/* ==========================================================
   BrainExcel Education — custom overrides on top of the theme
   Keep all brand-specific tweaks here so main.css stays clean.
   ========================================================== */

:root {
  --be-purple: #600EE4;
  --be-purple-2: #6754E9;
  --be-orange: #F15F25;
}

/* Smooth in-page scrolling for the one-page nav */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

/* Wider wordmark logo needs more room than the stock theme allows */
.header-main .header-logo {
  max-width: 190px;
}
@media (max-width: 1399px) {
  .header-main .header-logo {
    max-width: 160px;
  }
}
.offcanvas__logo img,
.footer-logo img {
  max-width: 200px;
}

/* Header CTA button sits where the theme's cart icon used to be */
.header-main .header-cta {
  padding: 12px 24px;
  border-radius: 50px;
  background: var(--be-purple);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  transition: all .35s ease;
}
.header-main .header-cta:hover {
  background: #4a09b4;
  color: #fff;
  transform: translateY(-2px);
}
@media (max-width: 767px) {
  .header-main .header-cta {
    display: none;
  }
}

/* Numbered badge used on the "Why Choose" value cards */
.value-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--be-purple);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 18px;
}

/* Sutra / benefit list inside the about block */
.benefit-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
  font-weight: 500;
}
.benefit-line img {
  margin-top: 4px;
  flex: 0 0 auto;
}

/* Floating WhatsApp + call buttons (carried over from the live site) */
.floating-contact {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.floating-contact a {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  transition: transform .3s ease;
}
.floating-contact a:hover {
  transform: scale(1.08);
  color: #fff;
}
.floating-contact .wa {
  background: #25D366;
}
.floating-contact .call {
  background: var(--be-purple);
}

/* Course cards: the theme's 3 info boxes need a little more breathing room
   because our labels ("Duration", "Levels") are longer than the demo's */
.time-management .box_in h4 {
  font-size: 15px;
}
.time-management .box_in h4 small {
  font-size: 13px;
}

/* Franchise / programs cards — the theme's price row is reused for a tagline */
.plan-tagline {
  font-size: 18px;
  font-weight: 600;
  color: var(--be-purple);
  text-align: center;
}

/* Our footer intro copy is longer than the demo's, so the decorative teddy
   collided with the "Join Social" row — nudge it clear of the text column */
.footer-style3 .footer-doll {
  bottom: 250px;
  left: -30px;
  opacity: .9;
}
@media (max-width: 1399px) {
  .footer-style3 .footer-doll {
    display: none;
  }
}

/* The offcanvas capitalises link text, which mangles the email address */
.offcanvas__contact-text a[href^="mailto:"],
.offcanvas__contact-text a[href^="tel:"] {
  text-transform: none;
}

/* ==========================================================
   Maths-symbol decorations
   The template's original decorations were flat PNG illustrations
   (giraffe, balloons, teddy). They're now SVG stickers built from
   maths symbols, so they need a little sizing help.
   ========================================================== */
.banner-section03 .shot-4,
.banner-section03 .shot-plen,
.banner-section03 .shot-3,
.about-thumb4 .doll,
.ser-ele-left, .ser-ele-right,
.book-bird, .ele-cake,
.ranbow-testimonial,
.footer-bench, .footer-doll, .footer-babol {
  pointer-events: none;
}

/* Slow, gentle rotation for a couple of the symbol clusters so the
   section doesn't read as static once the bouncing PNGs are gone */
@keyframes beSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes beFloatRotate {
  0%   { transform: translateY(0) rotate(-6deg); }
  50%  { transform: translateY(-14px) rotate(6deg); }
  100% { transform: translateY(0) rotate(-6deg); }
}
.banner-section03 .shot-plen,
.ser-ele-left {
  animation: beFloatRotate 6s ease-in-out infinite;
}
.skill-flowwer {
  animation: beSpin 14s linear infinite;
}

/* The sage illustration is a photo, not the template's blob-shaped PNG,
   so give the frame its own rounding and a soft frame */
.about-thumb4 .thumb {
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(96, 14, 228, .16);
}
.about-thumb4 .thumb img {
  width: 100%;
  height: auto;
  display: block;
}
/* Digit cluster: theme pins it top-right behind the frame (z-index:-1);
   pull it out to the corner so it reads as a decoration, not a glitch */
.addmissions-section4 .about-thumb4 .doll {
  right: -34px;
  top: -34px;
  z-index: 2;
  max-width: 170px;
}
@media (max-width: 575px) {
  .addmissions-section4 .about-thumb4 .doll {
    max-width: 110px;
    right: -12px;
    top: -12px;
  }
}

/* "16 SUTRAS" badge — template pinned it half off the viewport; moved to the
   lower-left so it doesn't collide with the operator arc on the right */
.addmissions-section4 .babol-quit {
  bottom: -30px;
  left: 10px;
  right: auto;
  z-index: 3;
  max-width: 200px;
}

/* Operator grid was bleeding off the left edge */
.addmissions-section4 > img[class*="top-0"][class*="start-0"] {
  left: 18px !important;
  max-width: 210px;
  opacity: .8;
}

/* Course card photos are real photographs now — crop them consistently */
.class-program_items4 .c-image img,
.cources-single-items .c-image img {
  aspect-ratio: 371 / 224;
  object-fit: cover;
}

/* The symbol stickers are visually denser than the flat PNG illustrations
   they replaced, so pull them behind the content and out of the text column */
#why-us .container,
#blog .container,
.service-program-section .container,
.testimonial-section3 .container {
  position: relative;
  z-index: 2;
}
#why-us .ele-cake,
#blog .ele-cake {
  left: -70px !important;
  top: auto !important;
  bottom: 80px;
  max-width: 150px;
  opacity: .45;
  z-index: 0;
}
#why-us .book-bird,
#blog .book-bird {
  right: 10px;
  top: auto !important;
  bottom: 60px;
  max-width: 140px;
  opacity: .5;
  z-index: 0;
}
.service-program-section .ser-ele-left,
.service-program-section .ser-ele-right {
  opacity: .55;
  max-width: 150px;
  z-index: 0;
}
.testimonial-section3 .ranbow-testimonial {
  opacity: .5;
  max-width: 150px;
}

/* Brand logo: the colour logo reads on white, so give it a white chip over the
   dark header/footer surfaces and cap its height so the stacked mark stays tidy. */
.header-logo img,
.offcanvas__logo img { height: 50px; width: auto; }
.header-logo img {
  background: #fff;
  padding: 5px 10px;
  border-radius: 12px;
}
.footer-logo img {
  height: 62px;
  width: auto;
  background: #fff;
  padding: 8px 12px;
  border-radius: 12px;
}