/* RESET */
*{margin:0;padding:0;box-sizing:border-box;}

body{
font-family:'Poppins',sans-serif;
background:#f5f7fb;
color:#333;
}

/* ─── NAVBAR ─────────────────────────────────── */

nav{
position:fixed;
top:0;
width:100%;
height:70px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 32px;
z-index:1000;
background:rgba(5,15,30,0.75);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid rgba(255,255,255,0.06);
transition:background 0.3s, box-shadow 0.3s;
gap:24px;
}

/* Scrolled state */
nav.nav-scrolled{
background:rgba(5,15,30,0.97);
box-shadow:0 4px 24px rgba(0,0,0,0.3);
}

/* Logo — LEFT aligned */
.logo{
flex-shrink:0;
}
.logo a{display:flex;align-items:center;}
.logo img{
height:38px;
background:white;
padding:4px 6px;
border-radius:6px;
}

/* ─── DESKTOP NAV ─────────────────────────────── */

.nav-links-desktop{
display:flex;
align-items:center;
gap:4px;
flex:1;
justify-content:center;
}

.nav-link{
color:rgba(255,255,255,0.85);
text-decoration:none;
font-size:14px;
font-weight:500;
padding:8px 12px;
border-radius:8px;
white-space:nowrap;
transition:color 0.2s, background 0.2s;
position:relative;
display:flex;
align-items:center;
gap:4px;
}

.nav-link:hover{
color:#fff;
background:rgba(255,255,255,0.08);
}

/* Underline active indicator */
.nav-link.active{color:#56CCF2;}
.nav-link.active::after{
content:'';
position:absolute;
bottom:-2px;
left:12px;
right:12px;
height:2px;
background:#56CCF2;
border-radius:2px;
}

.nav-chevron{font-size:12px;opacity:0.7;}

/* RIGHT — CTA + hamburger */
.nav-right{
display:flex;
align-items:center;
gap:12px;
flex-shrink:0;
}

.nav-cta{
background:linear-gradient(135deg,#2F80ED,#56CCF2);
color:white !important;
text-decoration:none;
padding:9px 20px;
border-radius:24px;
font-size:13px;
font-weight:600;
white-space:nowrap;
transition:opacity 0.2s, transform 0.2s;
box-shadow:0 4px 14px rgba(47,128,237,0.4);
}

.nav-cta:hover{opacity:0.9;transform:translateY(-1px);}

/* HAMBURGER (mobile only) */
.menu-toggle{
display:none;
font-size:24px;
color:white;
cursor:pointer;
background:none;
border:none;
padding:4px 8px;
z-index:1001;
line-height:1;
}

/* ─── MEGA MENU (desktop) ──────────────────────── */

.mega-parent{
position:relative;
}

.mega-menu{
position:absolute;
top:calc(100% + 8px);
left:50%;
transform:translateX(-50%);
width:860px;
max-width:95vw;
background:white;
padding:28px 32px;
border-radius:16px;
box-shadow:0 24px 60px rgba(0,0,0,0.18);
opacity:0;
visibility:hidden;
transition:opacity 0.2s, transform 0.2s, visibility 0.2s;
transform:translateX(-50%) translateY(-6px);
z-index:2000;
border:1px solid #eef0f5;
}

.mega-parent:hover .mega-menu{
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(0);
}

.mega-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
}

.mega-column h4{
margin-bottom:12px;
color:#0A2540;
font-size:12px;
text-transform:uppercase;
letter-spacing:0.8px;
font-weight:700;
}

.mega-column a{
display:flex;
align-items:center;
gap:8px;
padding:7px 8px;
color:#444;
text-decoration:none;
font-size:13.5px;
border-radius:8px;
transition:background 0.15s, color 0.15s;
}
.mega-column a:hover{
background:#f0f5ff;
color:#2F80ED;
}

/* ─── DROPDOWN MENU (small, for Training & Resources) ── */

.dropdown-menu{
position:absolute;
top:calc(100% + 8px);
left:50%;
transform:translateX(-50%) translateY(-6px);
width:240px;
background:white;
border-radius:14px;
box-shadow:0 20px 50px rgba(0,0,0,0.15);
padding:10px;
opacity:0;
visibility:hidden;
transition:opacity 0.2s, transform 0.2s, visibility 0.2s;
z-index:2000;
border:1px solid #eef0f5;
}

.mega-parent:hover .dropdown-menu{
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(0);
}

.dropdown-menu a{
display:flex;
align-items:center;
gap:10px;
padding:9px 12px;
color:#333;
text-decoration:none;
font-size:13.5px;
border-radius:8px;
transition:background 0.15s, color 0.15s;
}
.dropdown-menu a:hover{background:#f0f5ff;color:#2F80ED;}

.dropdown-divider{
height:1px;
background:#f0f0f0;
margin:6px 0;
}

.dropdown-all{
color:#2F80ED !important;
font-weight:600;
font-size:13px !important;
}

/* ─── MOBILE DRAWER ───────────────────────────── */

.mobile-overlay{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.6);
z-index:1100;
}
.mobile-overlay.open{display:block;}

.mobile-drawer{
position:fixed;
top:0;
left:-105%;
width:82%;
max-width:320px;
height:100%;
background:#0d1b2e;
z-index:1200;
transition:left 0.28s ease;
display:flex;
flex-direction:column;
overflow:hidden;
box-shadow:4px 0 24px rgba(0,0,0,0.4);
}
.mobile-drawer.open{left:0;}

/* Drawer header */
.drawer-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:16px 18px;
background:#0a1628;
border-bottom:1px solid rgba(255,255,255,0.1);
flex-shrink:0;
}
.drawer-logo{
height:32px;
background:white;
padding:3px 6px;
border-radius:5px;
}
.drawer-close{
background:none;
border:none;
color:#aac;
font-size:22px;
cursor:pointer;
line-height:1;
padding:2px 6px;
}
.drawer-cta{
padding:16px 18px;
border-top:1px solid rgba(255,255,255,0.1);
flex-shrink:0;
background:#0a1628;
}

/* Drawer menu list */
.drawer-menu{
list-style:none;
overflow-y:auto;
flex:1;
padding:4px 0 40px;
margin:0;
}

/* Root-level items */
.drawer-menu > li{
display:block;
border-bottom:1px solid rgba(255,255,255,0.07);
}

.drawer-menu > li > a{
display:flex;
align-items:center;
gap:12px;
padding:15px 20px;
color:#dce8f8;
text-decoration:none;
font-size:15px;
font-weight:500;
transition:background 0.15s;
}
.drawer-menu > li > a:hover{
background:rgba(255,255,255,0.06);
color:#fff;
}

.dm-icon{font-size:17px;}

/* Accordion trigger row */
.accordion-trigger{
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 20px;
color:#dce8f8;
font-size:15px;
font-weight:500;
cursor:pointer;
transition:background 0.15s;
}
.accordion-trigger:hover{background:rgba(255,255,255,0.06);color:#fff;}

.accordion-arrow{
font-size:22px;
color:#7a9cc0;
transition:transform 0.25s ease;
display:inline-block;
line-height:1;
}

/* Accordion sub-list */
.accordion-body{
list-style:none;
max-height:0;
overflow:hidden;
transition:max-height 0.38s ease;
background:rgba(0,0,0,0.3);
padding:0;
margin:0;
}
.accordion-body.open{max-height:1200px;}

/* Group header inside accordion */
.acc-group{
padding:10px 20px 3px 24px;
font-size:10px;
text-transform:uppercase;
letter-spacing:1px;
color:#5a7ea0;
font-weight:700;
}

/* Sub-menu links */
.accordion-body li a{
display:block;
padding:11px 20px 11px 24px;
color:#b8cfe8;
text-decoration:none;
font-size:14px;
border-bottom:1px solid rgba(255,255,255,0.04);
transition:background 0.15s,color 0.15s;
}
.accordion-body li a:hover{
color:#ffffff;
background:rgba(47,128,237,0.2);
}

/* HERO */

.hero{
height:100vh;
padding-top:70px;
position:relative;
}

.hero-video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-1;
}

.hero-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
padding:20px;
}

.hero-content{
max-width:700px;
}

.hero-content h1{
font-size:clamp(1.4rem,5vw,2.6rem);
line-height:1.3;
margin:16px 0 10px;
}

.hero-content p{
font-size:clamp(0.85rem,3vw,1.1rem);
margin-bottom:24px;
}

.hero-badge{
display:inline-flex;
align-items:center;
gap:8px;
background:rgba(255,255,255,0.15);
backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,0.3);
color:white;
font-size:0.85rem;
font-weight:500;
padding:8px 18px;
border-radius:30px;
margin-bottom:20px;
letter-spacing:0.2px;
}

/* BUTTON */

.btn{
background:#2F80ED;
padding:12px 28px;
border-radius:30px;
color:white;
text-decoration:none;
font-weight:600;
display:inline-block;
font-size:clamp(0.85rem,3vw,1rem);
}

/* SERVICES */

.services-section{
padding:100px 20px 80px;
background:#f7f7f7;
}

.services-section h2{
text-align:center;
margin-bottom:40px;
font-size:clamp(1.3rem,4vw,2rem);
}

.services-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
max-width:1200px;
margin:auto;
text-align:left;
}

.service-column{
background:white;
border-radius:12px;
padding:24px;
box-shadow:0 4px 16px rgba(0,0,0,0.06);
}

.service-column h3{
margin-bottom:16px;
font-size:1rem;
color:#0A2540;
}

.service-column ul{
list-style:none;
}

.service-column li{
display:flex;
align-items:center;
margin-bottom:12px;
font-size:0.9rem;
}

.icon{
width:36px;
height:36px;
min-width:36px;
background:#eceafc;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin-right:10px;
font-size:16px;
}

/* CTA */

.cta{
background:linear-gradient(135deg,#2F80ED,#56CCF2);
color:white;
text-align:center;
padding:70px 20px;
margin-top:40px;
}

.cta h2{font-size:clamp(1.2rem,4vw,1.8rem);}
.cta p {margin:10px 0 24px;font-size:clamp(0.85rem,3vw,1rem);}

/* CONTACT */

.section{
padding:70px 20px;
text-align:center;
}

.section h2{
font-size:clamp(1.3rem,4vw,2rem);
margin-bottom:8px;
}

.contact-form{
max-width:700px;
margin:30px auto 0;
display:flex;
flex-direction:column;
gap:14px;
text-align:left;
}

.contact-row{
display:flex;
gap:10px;
flex-wrap:wrap;
}

.contact-row input{
flex:1;
min-width:140px;
}

.contact-form input,
.contact-form textarea{
padding:14px;
border-radius:8px;
border:1px solid #ddd;
font-family:inherit;
font-size:0.9rem;
width:100%;
}

.contact-form textarea{
min-height:120px;
resize:vertical;
}

.contact-form button{
background:#2F80ED;
color:white;
border:none;
padding:14px;
border-radius:30px;
cursor:pointer;
font-size:1rem;
font-family:inherit;
font-weight:600;
}

/* FOOTER */

footer{
background:#0A2540;
color:white;
text-align:center;
padding:30px 20px;
font-size:0.9rem;
line-height:1.8;
}

/* WHATSAPP */

.whatsapp-btn{
position:fixed;
bottom:20px;
right:20px;
width:58px;
height:58px;
z-index:999;
border-radius:50%;
overflow:hidden;
box-shadow:0 4px 14px rgba(0,0,0,0.25);
}

.whatsapp-btn img{
width:100%;
height:100%;
object-fit:cover;
}

/* ─── MOBILE ─────────────────────────────────── */

@media(max-width:768px){

  /* Show hamburger, hide desktop nav */
  .menu-toggle{display:block;}
  .nav-links-desktop{display:none;}
  .nav-cta{display:none;}
  nav{padding:0 16px;}

  /* HERO */
  .hero-badge{font-size:0.78rem;padding:6px 14px;}

  /* SERVICES */
  .services-section{padding:80px 16px 60px;}

  .services-grid{
    grid-template-columns:1fr 1fr;
    gap:16px;
  }

  .service-column{padding:16px;}

  /* CONTACT */
  .contact-row{flex-direction:column;}
  .contact-row input{min-width:unset;}

  /* FOOTER */
  footer{font-size:0.82rem;}
}

@media(max-width:480px){
  .services-grid{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  .service-column{
    padding:14px 12px;
  }

  .service-column h3{
    font-size:0.85rem;
  }

  .service-column li{
    font-size:0.78rem;
  }

  .icon{
    width:28px;
    height:28px;
    min-width:28px;
    font-size:13px;
  }
}
/* ═══════════════════════════════════════════════
   SHARED SECTION HELPERS
═══════════════════════════════════════════════ */

.section-label{
  display:inline-block;
  background:#e8f0fe;
  color:#2F80ED;
  font-size:11px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  padding:5px 14px;
  border-radius:20px;
  margin-bottom:14px;
}

.section-title{
  font-size:clamp(1.5rem,4vw,2.2rem);
  font-weight:700;
  color:#0A2540;
  line-height:1.25;
  margin-bottom:12px;
}

.section-sub{
  color:#666;
  font-size:clamp(0.88rem,2.5vw,1rem);
  max-width:560px;
  margin:0 auto 48px;
  text-align:center;
}

/* hero buttons */
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px;}
.btn-outline{background:transparent;border:2px solid white;color:white;}
.btn-outline:hover{background:white;color:#0A2540;}

/* ═══════════════════════════════════════════════
   STATS BAR
═══════════════════════════════════════════════ */

.stats-bar{
  background:#0A2540;
  padding:36px 20px;
}

.stats-inner{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0;
  max-width:900px;
  margin:auto;
  flex-wrap:wrap;
}

.stat-item{
  flex:1;
  min-width:150px;
  text-align:center;
  padding:12px 20px;
  color:white;
}

.stat-number{
  font-size:clamp(2rem,5vw,3rem);
  font-weight:700;
  color:#56CCF2;
  line-height:1;
}

.stat-suffix{
  font-size:clamp(1.4rem,3vw,2rem);
  font-weight:700;
  color:#56CCF2;
}

.stat-label{
  display:block;
  font-size:0.82rem;
  color:#a0b8cc;
  margin-top:6px;
  letter-spacing:0.3px;
}

.stat-divider{
  width:1px;
  height:50px;
  background:rgba(255,255,255,0.15);
  flex-shrink:0;
}

/* ═══════════════════════════════════════════════
   SERVICES (card style)
═══════════════════════════════════════════════ */

.services-section{
  padding:90px 24px 80px;
  background:#f5f7fb;
  text-align:center;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:1100px;
  margin:0 auto;
  text-align:left;
}

.service-card{
  background:white;
  border-radius:16px;
  padding:28px 24px;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  gap:10px;
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
  border:1px solid #eee;
  transition:transform 0.2s,box-shadow 0.2s;
}

.service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(47,128,237,0.12);
  border-color:#2F80ED;
}

.sc-icon{font-size:32px;line-height:1;}

.service-card h3{
  font-size:1rem;
  font-weight:600;
  color:#0A2540;
  margin:0;
}

.service-card p{
  font-size:0.88rem;
  color:#666;
  line-height:1.6;
  flex:1;
}

.sc-price{
  font-size:0.82rem;
  color:#2F80ED;
  font-weight:600;
}

.sc-link{
  font-size:0.85rem;
  color:#2F80ED;
  font-weight:600;
  margin-top:4px;
}

/* ═══════════════════════════════════════════════
   WHY CHOOSE US
═══════════════════════════════════════════════ */

.why-us{
  background:white;
  padding:90px 24px;
}

.why-us-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  max-width:1100px;
  margin:auto;
}

.why-us-text p{
  color:#555;
  line-height:1.75;
  margin-bottom:20px;
  font-size:0.95rem;
}

.why-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.why-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:0.92rem;
  color:#333;
}

.why-check{
  background:#2F80ED;
  color:white;
  border-radius:50%;
  width:20px;
  height:20px;
  min-width:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  margin-top:2px;
}

.why-us-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.why-card{
  border-radius:16px;
  padding:24px 20px;
}

.wc-blue{background:linear-gradient(135deg,#2F80ED,#56CCF2);color:white;}
.wc-dark{background:#0A2540;color:white;}

.wc-icon{font-size:28px;margin-bottom:10px;}

.why-card h4{
  font-size:0.95rem;
  font-weight:600;
  margin-bottom:6px;
}

.why-card p{
  font-size:0.82rem;
  opacity:0.85;
  line-height:1.5;
}

/* ═══════════════════════════════════════════════
   COURSES
═══════════════════════════════════════════════ */

.courses-section{
  background:#f5f7fb;
  padding:90px 24px 80px;
  text-align:center;
}

.courses-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:1100px;
  margin:0 auto;
  text-align:left;
}

.course-card{
  background:white;
  border-radius:16px;
  padding:24px;
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
  border:1px solid #eee;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:transform 0.2s,box-shadow 0.2s;
}

.course-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(47,128,237,0.12);
}

.course-tag{
  display:inline-block;
  background:#e8f0fe;
  color:#2F80ED;
  font-size:11px;
  font-weight:700;
  padding:3px 10px;
  border-radius:12px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  width:fit-content;
}

.course-card h4{
  font-size:0.98rem;
  font-weight:600;
  color:#0A2540;
  margin:0;
}

.course-card p{
  font-size:0.85rem;
  color:#666;
  line-height:1.6;
  flex:1;
}

.course-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:6px;
}

.course-price{display:flex;align-items:baseline;gap:8px;}

.price-now{
  font-size:1.05rem;
  font-weight:700;
  color:#0A2540;
}

.price-was{
  font-size:0.82rem;
  color:#aaa;
  text-decoration:line-through;
}

.btn-sm{
  background:#2F80ED;
  color:white;
  text-decoration:none;
  padding:7px 16px;
  border-radius:20px;
  font-size:0.8rem;
  font-weight:600;
  white-space:nowrap;
  transition:background 0.2s;
}

.btn-sm:hover{background:#1a6fd4;}

/* ═══════════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════════ */

.testimonials-section{
  background:white;
  padding:90px 24px 80px;
  text-align:center;
}

.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:1100px;
  margin:0 auto;
  text-align:left;
}

.tcard{
  background:#f8faff;
  border-radius:16px;
  padding:28px 24px;
  border:1px solid #e4eaf5;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.tcard-stars{
  color:#f4b942;
  font-size:1rem;
  letter-spacing:2px;
}

.tcard-text{
  font-size:0.9rem;
  color:#444;
  line-height:1.7;
  flex:1;
  font-style:italic;
}

.tcard-author{
  display:flex;
  align-items:center;
  gap:12px;
}

.tcard-avatar{
  width:42px;
  height:42px;
  min-width:42px;
  background:linear-gradient(135deg,#2F80ED,#56CCF2);
  color:white;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:16px;
}

.tcard-author strong{
  display:block;
  font-size:0.9rem;
  color:#0A2540;
}

.tcard-author span{
  font-size:0.78rem;
  color:#888;
}

/* ═══════════════════════════════════════════════
   CTA BANNER
═══════════════════════════════════════════════ */

.cta{
  background:linear-gradient(135deg,#0A2540,#1a4a7a);
  color:white;
  text-align:center;
  padding:80px 24px;
}

.cta h2{font-size:clamp(1.4rem,4vw,2rem);margin-bottom:10px;}
.cta p{color:#b0c8e8;margin-bottom:30px;font-size:clamp(0.88rem,2.5vw,1rem);}

.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

.btn-wa{
  background:#25D366;
  color:white;
}

.btn-wa:hover{background:#1ebe5d;}

/* ═══════════════════════════════════════════════
   CONTACT SECTION
═══════════════════════════════════════════════ */

.contact-section{
  padding:90px 24px 80px;
  background:#f5f7fb;
}

.contact-inner{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:60px;
  max-width:1100px;
  margin:auto;
  align-items:start;
}

.contact-info .section-title{text-align:left;}
.contact-info p{color:#555;line-height:1.75;font-size:0.93rem;margin-bottom:24px;}

.contact-details{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:28px;
}

.contact-details li{
  font-size:0.88rem;
  color:#444;
  line-height:1.5;
}

.contact-details a{color:#2F80ED;text-decoration:none;}

.contact-social{display:flex;gap:8px;flex-wrap:wrap;}

.social-btn{
  display:inline-block;
  padding:6px 14px;
  border:1px solid #ddd;
  border-radius:20px;
  font-size:0.78rem;
  color:#555;
  text-decoration:none;
  transition:all 0.2s;
}

.social-btn:hover{background:#2F80ED;color:white;border-color:#2F80ED;}

/* Contact form */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:14px;
  background:white;
  padding:36px 32px;
  border-radius:20px;
  box-shadow:0 4px 24px rgba(0,0,0,0.07);
}

.contact-form input,
.contact-form textarea,
.contact-form select{
  padding:13px 16px;
  border-radius:10px;
  border:1.5px solid #e0e6ef;
  font-family:inherit;
  font-size:0.9rem;
  color:#333;
  background:white;
  transition:border-color 0.2s;
  width:100%;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  outline:none;
  border-color:#2F80ED;
}

.contact-form select{color:#888;}

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */

footer{
  background:#0A2540;
  color:#a0b8cc;
  text-align:center;
  padding:36px 20px;
  font-size:0.88rem;
  line-height:2;
}

footer a{color:#56CCF2;text-decoration:none;}

/* ═══════════════════════════════════════════════
   MOBILE — NEW SECTIONS
═══════════════════════════════════════════════ */

@media(max-width:900px){
  .services-grid,
  .courses-grid,
  .testimonials-grid{
    grid-template-columns:1fr 1fr;
  }

  .why-us-inner{
    grid-template-columns:1fr;
    gap:40px;
  }

  .contact-inner{
    grid-template-columns:1fr;
    gap:36px;
  }
}

@media(max-width:768px){

  /* Stats */
  .stat-divider{display:none;}
  .stats-inner{gap:0;}
  .stat-item{min-width:45%;}

  /* Services */
  .services-section{padding:70px 16px 60px;}
  .services-grid{grid-template-columns:1fr 1fr;gap:14px;}
  .service-card{padding:18px 14px;}
  .sc-icon{font-size:26px;}
  .service-card h3{font-size:0.88rem;}
  .service-card p{font-size:0.8rem;}
  .sc-price,.sc-link{font-size:0.76rem;}

  /* Why us */
  .why-us{padding:60px 16px;}
  .why-us-cards{grid-template-columns:1fr 1fr;}

  /* Courses */
  .courses-section{padding:70px 16px 60px;}
  .courses-grid{grid-template-columns:1fr 1fr;gap:14px;}
  .course-card{padding:16px 14px;}

  /* Testimonials */
  .testimonials-section{padding:70px 16px 60px;}
  .testimonials-grid{grid-template-columns:1fr;}

  /* Contact */
  .contact-section{padding:70px 16px 60px;}
  .contact-form{padding:24px 18px;}
}

@media(max-width:480px){
  .services-grid,
  .courses-grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .why-us-cards{grid-template-columns:1fr 1fr;}

  .course-footer{flex-direction:column;align-items:flex-start;gap:10px;}
}

/* ═══════════════════════════════════════════════
   FOOTER LAYOUT
═══════════════════════════════════════════════ */

footer{
  background:#0A2540;
  color:#a0b8cc;
  padding:60px 24px 0;
  font-size:0.88rem;
}

.footer-inner{
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:40px;
  max-width:1100px;
  margin:0 auto 40px;
}

.footer-logo{
  height:44px;
  background:white;
  padding:5px 8px;
  border-radius:8px;
  margin-bottom:14px;
  display:block;
}

.footer-brand p{
  font-size:0.84rem;
  line-height:1.7;
  color:#7a9cc0;
  margin-bottom:16px;
}

.footer-social{display:flex;gap:10px;}
.footer-social a{
  width:34px;height:34px;
  background:rgba(255,255,255,0.08);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#a0b8cc;text-decoration:none;font-size:13px;
  transition:background 0.2s;
}
.footer-social a:hover{background:#2F80ED;color:white;}

.footer-col h5{
  color:white;
  font-size:0.9rem;
  font-weight:600;
  margin-bottom:14px;
  letter-spacing:0.3px;
}

.footer-col ul{list-style:none;}
.footer-col ul li{margin-bottom:8px;}
.footer-col ul li a{
  color:#7a9cc0;
  text-decoration:none;
  font-size:0.84rem;
  transition:color 0.2s;
}
.footer-col ul li a:hover{color:#56CCF2;}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.08);
  padding:20px 0;
  text-align:center;
  color:#5a7ea0;
  font-size:0.8rem;
  max-width:1100px;
  margin:0 auto;
}

@media(max-width:900px){
  .footer-inner{grid-template-columns:1fr 1fr;}
}

@media(max-width:600px){
  .footer-inner{grid-template-columns:1fr;}
  footer{padding:40px 20px 0;}
}

/* ═══════════════════════════════════════════════
   HERO — GRADIENT OVERLAY + VERTICAL CENTER FIX
═══════════════════════════════════════════════ */

.hero-overlay{
background: linear-gradient(
  to bottom,
  rgba(0,0,0,0.25) 0%,
  rgba(0,0,0,0.55) 40%,
  rgba(0,0,0,0.75) 100%
) !important;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding-top:70px;
}

.hero-content{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
max-width:720px;
padding:20px;
}

/* ═══════════════════════════════════════════════
   SCROLL INDICATOR
═══════════════════════════════════════════════ */

.scroll-indicator{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
color:rgba(255,255,255,0.7);
font-size:0.72rem;
letter-spacing:1.5px;
text-transform:uppercase;
padding-bottom:28px;
animation:fadeInUp 1s ease 1.5s both;
}

.scroll-mouse{
width:24px;
height:38px;
border:2px solid rgba(255,255,255,0.6);
border-radius:12px;
display:flex;
justify-content:center;
padding-top:6px;
}

.scroll-dot{
width:4px;
height:8px;
background:white;
border-radius:2px;
animation:scrollBounce 1.6s ease-in-out infinite;
}

@keyframes scrollBounce{
0%  { transform:translateY(0); opacity:1; }
80% { transform:translateY(12px); opacity:0; }
100%{ transform:translateY(0); opacity:0; }
}

@keyframes fadeInUp{
from{ opacity:0; transform:translateY(16px); }
to  { opacity:1; transform:translateY(0); }
}

/* ═══════════════════════════════════════════════
   PARTNER / TECH LOGO STRIP
═══════════════════════════════════════════════ */

.logo-strip{
background:#ffffff;
padding:28px 0;
border-bottom:1px solid #eee;
overflow:hidden;
}

.logo-strip-label{
text-align:center;
font-size:0.75rem;
text-transform:uppercase;
letter-spacing:1.2px;
color:#aaa;
margin-bottom:18px;
font-weight:600;
}

.logo-track-wrapper{
overflow:hidden;
position:relative;
}

/* fade edges */
.logo-track-wrapper::before,
.logo-track-wrapper::after{
content:'';
position:absolute;
top:0;
width:80px;
height:100%;
z-index:2;
}
.logo-track-wrapper::before{left:0; background:linear-gradient(to right,white,transparent);}
.logo-track-wrapper::after {right:0;background:linear-gradient(to left, white,transparent);}

.logo-track{
display:flex;
align-items:center;
gap:16px;
width:max-content;
animation:scrollTrack 28s linear infinite;
}

.lp-badge{
display:inline-flex;
align-items:center;
gap:6px;
background:#f4f6fb;
border:1px solid #e4e8f0;
border-radius:30px;
padding:8px 18px;
font-size:0.82rem;
font-weight:500;
color:#444;
white-space:nowrap;
}

@keyframes scrollTrack{
0%   { transform:translateX(0); }
100% { transform:translateX(-50%); }
}

/* ═══════════════════════════════════════════════
   WHATSAPP POPUP BUBBLE
═══════════════════════════════════════════════ */

.wa-wrapper{
position:fixed;
bottom:20px;
right:20px;
z-index:999;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:8px;
}

.wa-bubble{
background:white;
color:#333;
font-size:0.82rem;
font-weight:500;
padding:10px 36px 10px 14px;
border-radius:12px 12px 0 12px;
box-shadow:0 4px 20px rgba(0,0,0,0.15);
white-space:nowrap;
position:relative;
opacity:0;
transform:translateY(10px) scale(0.95);
pointer-events:none;
transition:opacity 0.3s ease, transform 0.3s ease;
}

.wa-bubble.show{
opacity:1;
transform:translateY(0) scale(1);
pointer-events:all;
}

.wa-bubble-close{
position:absolute;
top:6px;
right:8px;
background:none;
border:none;
font-size:11px;
color:#aaa;
cursor:pointer;
line-height:1;
padding:0;
}

.wa-bubble-close:hover{color:#555;}

@media(max-width:480px){
  .wa-bubble{display:none;}
}