/* =========================================================
   BBSEdtech — Global Styles (clean, gap-free header + hero)
   ========================================================= */

/* ---------- Theme variables ---------- */
:root{
  --brand-blue:#002f6c;
  --cta-blue:#1d5be2;
  --emerald:#50c878;
  --muted-grey:#f4f6f8;
  --text-grey:#666;

  /* Header stack heights (adjust if you tweak bars) */
  --ribbon-h: 36px;       /* Offer ribbon height  */
  --strip-h:  36px;       /* Contact strip height */
  --nav-h:    64px;       /* Navbar height (approx visual) */
}

/* ---------- Resets ---------- */
html, body{ margin:0; padding:0; }
*,*::before,*::after{ box-sizing:border-box; }

/* ---------- Base ---------- */
body{
  font-family:'Montserrat', Arial, sans-serif;
  background:var(--muted-grey);
  color:var(--text-grey);
}
/* Prevent scroll-to-anchor from hiding under sticky header */
html{ scroll-padding-top: calc(var(--ribbon-h) + var(--strip-h) + 8px); }

/* ========= Header Stack ========= */
/* Offer Ribbon (fixed at very top) */
.offer-ribbon{
  position:fixed; top:0; left:0; right:0;
  height:var(--ribbon-h);
  background:var(--emerald); color:#fff;
  font-weight:600; font-size:.92rem;
  display:flex; align-items:center; z-index:1050;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.offer-ribbon .container{ display:flex; justify-content:center; align-items:center; gap:1rem; }
.offer-ribbon .offer-cta{
  background:#fff; color:var(--cta-blue);
  padding:.22rem .6rem; border-radius:6px; text-decoration:none; font-weight:800;
}
.offer-ribbon .offer-cta:hover{ background:#1d5be2; color:#fff; }

/* Contact strip (sticky under ribbon) */
.contact-strip{
  position:sticky; top:var(--ribbon-h); height:var(--strip-h);
  background:#0f5db5; color:#e7f0ff; display:flex; align-items:center;
  z-index:1045; border-bottom:1px solid rgba(255,255,255,.08); font-size:.92rem;
}
.strip-link{ color:#e7f0ff; text-decoration:none; }
.strip-link:hover{ color:#fff; text-decoration:underline; }
.strip-text{ opacity:.9; }

/* Bootstrap sticky top offset under ribbon+strip */
.sticky-top{ top: calc(var(--ribbon-h) + var(--strip-h)); }

/* ========= Navbar (light, pretty) ========= */
.navbar{
  background:#fff !important;
  padding-top:0 !important; padding-bottom:0 !important;
  box-shadow:0 6px 24px rgba(2,22,63,.05);
  border-bottom:1px solid #eef2f7;
}
.navbar .container{ max-width:1240px; }
.navbar-brand{ display:flex; align-items:center; width:170px; }
.navbar-brand img{
  height:42px !important; width:100% !important; max-width:100% !important;
  object-fit:contain; padding:4px 0 !important;
}
.navbar-nav .nav-item{ margin-right:1.2rem; }
.navbar-nav .nav-item:last-child{ margin-right:0; }
.navbar-nav .nav-link{
  color:#102a43 !important; font-weight:700; font-size:1.05rem;
  letter-spacing:.2px; padding:12px 14px !important; white-space:nowrap;
  position:relative; transition:color .18s ease;
}
.navbar-nav .nav-link:hover{ color:var(--cta-blue) !important; }
/* underline micro-interaction */
.navbar-nav .nav-link::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px;
  background:transparent; transform:scaleX(0);
  transform-origin:left center; transition:transform .18s ease, background .18s ease;
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after{ background:var(--cta-blue); transform:scaleX(1); }

/* CTA button in nav */
.btn-cta{
  background:var(--cta-blue); color:#fff; font-weight:800;
  border-radius:14px; padding:12px 20px; border:1px solid rgba(29,91,226,.15);
  box-shadow:0 6px 18px rgba(29,91,226,.22);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-cta:hover{ background:#1760ff; transform:translateY(-1px); box-shadow:0 10px 24px rgba(29,91,226,.28); }

/* ========= Mega menu (light/beautiful) ========= */
.mega-menu{ width:100%; border:0; }
.mega-menu .dropdown-item{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 12px; border-radius:10px; color:#0b2a55; background:#fff;
}
.mega-menu .dropdown-item:hover{ background:#f6f9ff; color:var(--cta-blue); }
.course-title{ font-weight:800; }
.course-sub{ font-size:.86rem; opacity:.75; }

/* Desktop: open on hover */
@media (min-width:992px){
  .navbar .dropdown:hover > .dropdown-menu{ display:block; }
  .navbar .dropdown-toggle::after{ display:none; }
}

/* Mobile menu panel */
@media (max-width:991px){
  .navbar .container{ max-width:100%; }
  .navbar-brand{ width:150px; }
  .navbar-collapse{ background:#fff; border-top:1px solid #eef2f7; padding:10px 8px; }
  .btn-cta{ width:100%; margin-top:8px; }
}

/* =========================================================
   HERO — centered content, auto-scaling height & typography
   ========================================================= */
.hero{ position:relative; background:transparent; margin:0; padding:0; }

/* Swiper hero height scales with viewport */
.hero-swiper, .hero-slide{
  height:clamp(320px, 60vh, 680px);
  min-height:320px; max-height:680px; width:100%; position:relative; background:none;
}
.hero-slide{ background-size:cover; background-position:center; }
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(0,47,108,.30) 25%, rgba(16,85,152,.15) 100%);
}

/* Vertically centered text block */
.hero .container, .hero-content{
  height:100%; display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start; text-align:left; gap:.75rem; padding:0 1rem;
}

/* Auto-scaling text */
.hero-content h1{
  color:#fff; font-weight:800; font-size:clamp(22px, 4.5vw, 44px);
  line-height:1.1; letter-spacing:.2px;
}
.hero-content p{
  color:#fff; font-size:clamp(14px, 2.2vw, 20px);
  line-height:1.5; max-width:58ch; opacity:.95; margin:0 0 .5rem 0;
}
.hero-content .btn{
  font-size:clamp(13px, 1.8vw, 16px);
  padding:clamp(8px, 1.2vw, 12px) clamp(14px, 2vw, 20px);
  border-radius:12px;
}

/* Swiper UI */
.swiper-pagination-bullet{ background:#fff; opacity:.75; }
.swiper-pagination-bullet-active{ background:var(--cta-blue); }
.swiper-button-next,.swiper-button-prev{ color:#fff; z-index:5; }

/* Google rating pill pieces */
.google-rating{ display:flex; align-items:center; gap:6px; text-decoration:none; color:#000; font-size:14px; }
.google-logo{
  font-weight:bold;
  background: linear-gradient(90deg, #4285F4, #EA4335, #FBBC05, #34A853);
  background-clip:text;                 /* Standard */
  -webkit-background-clip:text;         /* WebKit */
  color:transparent;                     /* Standard */
  -webkit-text-fill-color:transparent;   /* WebKit */
}
.rating-number{ font-weight:bold; color:#000; }
.stars i{ color:#fbbc05; font-size:14px; }

/* =========================================================
   Content / cards / sections
   ========================================================= */
.section-title{ font-size:2rem; font-weight:700; color:var(--brand-blue); }
.card-custom{
  border:none; border-radius:1.5rem; box-shadow:0 4px 16px #1d5be214;
  background:#fff; transition:box-shadow .2s;
}
.card-custom:hover{ box-shadow:0 8px 32px #1d5be238; }
.benefits-icon{ font-size:2.5rem; color:var(--emerald); }
.testimonial-card{
  border-left:5px solid var(--cta-blue); background:#fff; border-radius:1rem;
  box-shadow:0 2px 8px #19548a1a; padding:1.2rem 1rem; margin:1rem .5rem;
}
.reviews-widget{
  background:#fff; border-radius:1.5rem; box-shadow:0 2px 12px #19548a10;
  padding:1.8rem 1.5rem; margin:2rem 0; text-align:center;
}
/* Remove random gaps between hero and first section */
.hero + section{ margin-top:0; }

/* =========================================================
   Footer
   ========================================================= */
.footer{
  background:var(--brand-blue); color:#c9d6e3; font-size:.97rem;
  border-top:4px solid var(--emerald); padding-top:2rem; padding-bottom:1rem;
}

/* =========================================================
   Floating WhatsApp + Callback tab (always on top)
   ========================================================= */
.floating-whatsapp,
.callback-tab{ position:fixed; z-index:1400; }

/* WhatsApp */
.floating-whatsapp{
  right:26px; bottom:26px; display:flex; align-items:center; justify-content:center;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff; box-shadow:0 8px 28px rgba(0,0,0,.18);
}
.floating-whatsapp i{ font-size:1.7rem; line-height:1; }

/* Callback vertical tab */
.callback-tab{
  top:50%; right:0; transform:translateY(-50%);
  background:var(--emerald); color:#fff;
  padding:.6rem .8rem; border-radius:8px 0 0 8px; cursor:pointer;
  box-shadow:-2px 2px 12px rgba(0,0,0,.25);
  border:none; outline:0;
}
.callback-tab span{
  display:block; writing-mode:vertical-rl; text-orientation:mixed;
  font-weight:700; font-size:.95rem; letter-spacing:.2px;
}
.callback-tab:hover{ background:var(--cta-blue); }

/* Avoid overlaps on very small screens */
@media (max-width:420px){
  .floating-whatsapp{ right:16px; bottom:16px; width:52px; height:52px; }
  .callback-tab{ padding:.5rem .7rem; }
}

/* =========================================================
   Callback slide-out panel
   ========================================================= */
.cb-panel{
  position:fixed; top:0; right:-420px; /* off-canvas */
  width:420px; max-width:92vw; height:100dvh;
  background:#fff; z-index:1450;
  box-shadow:-12px 0 30px rgba(0,0,0,.18);
  display:flex; flex-direction:column; transition:right .25s ease;
}
.cb-panel.is-open{ right:0; }

.cb-panel__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid #eef2f7;
}
.cb-close{
  background:transparent; border:none; font-size:28px; line-height:1; cursor:pointer; color:#6b7785;
}
.cb-close:hover{ color:#111; }

/* Backdrop */
.cb-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1440; }
[hidden]{ display:none !important; }

/* Form */
.cb-form{ padding:16px 18px 22px; overflow:auto; }
.cb-field{ margin-bottom:14px; }
.cb-field label{ font-weight:700; color:#0b2a55; margin-bottom:6px; display:block; }
.cb-field input[type="text"],
.cb-field input[type="tel"],
.cb-field select,
.cb-field textarea{
  width:100%; border:1px solid #dfe6ee; border-radius:10px;
  padding:10px 12px; font-size:15px; outline:0;
  transition:border-color .15s ease, box-shadow .15s ease; background:#fff;
}
.cb-field textarea{ resize:vertical; }
.cb-field input:focus,
.cb-field select:focus,
.cb-field textarea:focus{
  border-color:#b9d2ff; box-shadow:0 0 0 4px rgba(29,91,226,.12);
}
.cb-error{ display:none; color:#b42318; font-size:.85rem; margin-top:6px; }
.cb-field.is-invalid .cb-error{ display:block; }
.cb-field.is-invalid input,
.cb-field.is-invalid select,
.cb-field.is-invalid textarea{
  border-color:#ffb4b4; box-shadow:0 0 0 4px rgba(255,0,0,.06);
}
.cb-split{ display:flex; gap:10px; }
.cb-split .cb-field{ flex:1; }

.cb-check{
  display:flex; align-items:center; gap:8px;
  margin:6px 0 12px; font-size:.95rem; color:#384860;
}

.cb-submit{
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:10px; position:relative;
}
.cb-spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid transparent; border-top-color:#fff;
  animation: cb-spin .7s linear infinite; display:none;
}
.cb-submit.loading .cb-spinner{ display:inline-block; }
.cb-submit.loading .cb-submit__text{ opacity:.7; }
@keyframes cb-spin{ to{ transform: rotate(360deg);} }

.cb-privacy{ font-size:.85rem; color:#6b7785; margin-top:10px; }

/* Success state */
.cb-success{ padding:24px 18px; text-align:center; }
.cb-success__icon{
  width:58px; height:58px; border-radius:50%;
  margin:10px auto 8px; background:var(--emerald); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; box-shadow:0 6px 16px rgba(0,0,0,.12);
}

/* =========================================================
   Responsive refinements
   ========================================================= */
/* Slightly reduce hero on short laptop screens */
@media (max-height:800px) and (min-width:992px){
  .hero-swiper, .hero-slide{ height: clamp(280px, 50vh, 560px); }
}
/* Tighter navbar on 13" laptops so items don’t wrap */
@media (min-width:992px) and (max-width:1200px){
  .navbar-nav .nav-link{ padding:10px 12px !important; font-size:1rem; }
  .navbar-brand{ width:150px; }
}
/* Tablet: keep hero text from hugging edges */
@media (min-width:576px) and (max-width:991.98px){
  .hero .container, .hero-content{ padding:0 24px; }
}
/* Phones: smaller CTA, keep floaters clear of keyboard */
@media (max-width:420px){
  .hero-content .btn{ padding:10px 14px; }
  .floating-whatsapp{ right:14px; bottom:14px; width:52px; height:52px; }
  .callback-tab{ padding:.5rem .6rem; }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion:reduce){
  .swiper-wrapper{ transition-duration:0ms !important; }
}
/* Keep the whole panel centered and inside the viewport  */
.navbar .dropdown.position-static .dropdown-menu.mega-menu{
  top: calc(100% + 10px);
  left: 50% !important;
  transform: translateX(-50%);
  right: auto !important;

  width: min(1100px, calc(100vw - 32px));
  max-width: 1100px;

  padding: 16px;
  border-radius: 14px;
  box-shadow: 0 14px 38px rgba(0,0,0,.12);
  border: 1px solid #eef2f7;
}

/* neutralize any old 100% rule that stretched it edge-to-edge */
.mega-menu{ width: auto !important; }

/* --- FIX: make columns stack items and never overlap --- */
.mega-menu .row{
  align-items: flex-start;     /* default, but explicit */
  flex-wrap: wrap;             /* ensure wrapping when narrow */
}

.mega-menu .row > [class*="col-"]{
  display: flex;               /* vertical stack per column */
  flex-direction: column;
  gap: 10px;                   /* space between items in a column */
  min-width: 0;                /* prevents flex items from blowing out */
}

/* each course entry behaves like a card-ish block */
.mega-menu .dropdown-item{
  display: block;              /* not inline */
  line-height: 1.35;           /* avoid cramped lines */
  padding: 10px 12px;
  border-radius: 10px;
  white-space: normal;         /* allow wrapping */
  background: #fff;
}

/* improve readability of title/subtitle */
.mega-menu .dropdown-item .course-title{
  display: block;
  font-weight: 800;
  color: #0b2a55;
  margin-bottom: 2px;
}

.mega-menu .dropdown-item .course-sub{
  display: block;
  font-size: .92rem;
  color: #44546a;
}

/* hover state */
.mega-menu .dropdown-item:hover{
  background: #f4f7ff;
  color: #1d5be2;
}

/* Mobile: wide but inside viewport with rounded corners */
@media (max-width: 991.98px){
  .navbar .dropdown.position-static .dropdown-menu.mega-menu{
    left: 50% !important;
    transform: translateX(-50%);
    width: calc(100vw - 24px);
    max-width: none;
    border-radius: 12px;
  }
}