/* ---------------------------
   Root & Base
--------------------------- */
:root{
  --bg:#f7f8fa;
  --text:#102022;
  --muted:#6b6f72;
  --accent:#2e9ddd;
  --accent-2:linear-gradient(90deg, #83e29c, #4ac78d);
  --card:#ffffff;
  --radius:14px;
}

*{box-sizing:border-box}
html, body{height:100%; margin:0; font-family:'Montserrat',sans-serif; line-height:1.45; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
body{background:var(--bg); color:var(--text);}

/* Utility container */
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ---------------------------
   Header & Nav
--------------------------- */
.header-nav{
  position:fixed; top:0; left:0; width:100%; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 22px; background:rgba(255,255,255,0.9);
  background-color: #ffffff; box-shadow:0 4px 18px rgba(15,20,25,0.06); z-index:1200;
}
.header-nav .logo img{display:block}
.header-nav .menu{display:flex; gap:20px; list-style:none; margin-left:12px; align-items:center}
.header-nav .menu a{color:var(--muted); text-decoration:none; font-weight:600; font-size:0.95rem}
.header-nav .menu a:hover{color:var(--text)}
/* Update the header Sign up button to match the hero button style */
.menu .btn-menu-cta{
 display:inline-block; /* Ensure it behaves like a block for padding/rounding */
 background:linear-gradient(90deg, #83e29c, #4ac78d);
 padding:10px 20px; /* Adjusted padding to be similar to .btn-signup */
 border-radius:999px; /* Highly rounded/pill shape */
 color:#1f1f1f; 
 text-decoration:none; 
 font-weight:700;
 transition: transform .25s, box-shadow .25s;
 box-shadow:0 6px 18px rgba(16,32,34,0.1); /* Adding some shadow to look more prominent */
}
.menu .btn-menu-cta:hover{
 transform:translateY(-2px); 
 box-shadow:0 8px 20px rgba(16,32,34,0.15); /* Slightly stronger hover shadow */
}

.nav-cta{display:flex; align-items:center}
.nav-cta .btn-lang{padding:6px 12px; border:none; border-radius:8px; color:#6b6f72; font-weight:700; margin-right:10px; cursor:pointer}
.nav-cta .social-icon{margin-left:12px; color:var(--muted); font-size:1.1rem; text-decoration:none}
.nav-cta .social-icon:hover{color:var(--accent-2)}

/* ---------------------------
   Hero / Video Header
--------------------------- */
.video-header{
  position:relative; height:85vh; min-height:520px; display:flex; align-items:center;
  overflow:hidden; margin-top:64px;
}
.video-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(0.6) saturate(1.05);}
.video-overlay{
  position:relative; z-index:3; left:6%; max-width:640px; color:#fff;
}
.video-overlay h1{font-size:2.6rem; margin:0 0 12px; font-weight:800; line-height:1.03}
.video-overlay .lead{color:rgba(255,255,255,0.9); margin-bottom:18px; font-weight:500}
.btn-signup{
  display:inline-block; background:linear-gradient(90deg, #83e29c, #4ac78d);
  padding:12px 26px; border-radius:999px; color:#1f1f1f; text-decoration:none; font-weight:700;
  box-shadow:0 8px 24px rgba(255,127,80,0.14)
}
.video-header::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0.15),rgba(0,0,0,0.35));
  z-index:2; pointer-events:none;
}


/* ---------------------------
   Sections: Intro
--------------------------- */
.intro-journey {
  width: 100%;
  padding: 6rem 8%;
  background: #f9f9f9; /* soft neutral background to contrast hero and features */
  display: flex;
  justify-content: center;
  align-items: center;
}

.intro-container {
  max-width: 1200px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4rem;
}

.intro-left h2 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  color: #111;
}

.intro-right p {
  font-size: 1.2rem;
  line-height: 1.7;
  color: #555;
}

/* 📱 Responsive */
@media (max-width: 900px) {
  .intro-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .intro-left h2 {
    font-size: 2.4rem;
  }

  .intro-right p {
    font-size: 1.1rem;
    margin-top: 1.5rem;
  }
}


/* ---------------------------
   Sections: Features
--------------------------- */
.features{padding:60px 0}
.features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:16px}
.feature{
  background:var(--card); padding:22px; border-radius:12px;
  box-shadow:0 8px 30px rgba(16,32,34,0.04);
  transition: transform .28s, box-shadow .28s; opacity:0; transform:translateY(20px);
}
.feature.visible{opacity:1; transform:none}
.feature:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(16,32,34,0.07)}
.feature-icon{
  width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  margin-bottom:12px; background:linear-gradient(180deg, rgba(26,163,163,0.08), transparent);
  color:var(--accent); font-size:1.25rem;
}
.feature h3{margin:0 0 8px; font-size:1.05rem}
.feature p{color:var(--muted); font-size:0.95rem; line-height:1.5}

/* ---------------------------
   Sections: Learning Path (Replaces Flexible Dates)
--------------------------- */
.learning-path{padding:80px 20px; background:var(--card); text-align:center}
.path-subtext{max-width:700px; margin:0 auto 40px; color:var(--muted); font-size:1.1rem;}

.path-container{
 display:flex; 
 align-items:flex-start; /* align items to the top so steps with long text don't break the vertical alignment */
 justify-content:center; 
 flex-wrap:wrap; 
 gap:20px;
}
.path-step{
 width:260px; background:var(--bg); border-radius:16px; padding:30px 20px;
 box-shadow:0 6px 18px rgba(16,32,34,0.04); 
 transition: transform .3s, box-shadow .3s;
 text-align:center;
}
.path-step:hover{transform:translateY(-5px); box-shadow:0 12px 30px rgba(16,32,34,0.08)}

.path-step .icon{
 font-size:2.5rem; margin-bottom:15px;
 color:var(--accent); /* Use your accent color */
}
.path-step h3{font-size:1.25rem; font-weight:700; color:var(--text); margin:0 0 10px}
.path-step p{font-size:0.95rem; color:var(--muted); line-height:1.5}

.path-arrow{
 font-size:2.2rem; color:var(--accent); 
 display:flex; align-items:center; /* Vertically align arrow */
 padding: 0 10px; /* some spacing */
}

.path-cta{margin-top:40px;}

/* Responsive adjustments for path */
@media(max-width:900px){
.path-container{flex-direction:column; align-items:center;}
.path-step{width:80%; max-width:400px; margin-bottom:10px;}
.path-arrow{
 transform:rotate(90deg); /* Rotate arrow for vertical layout */
 margin:10px 0;
}
}

/* ---------------------------
   Beyond the Classroom / Gallery
--------------------------- */
.beyond{padding:64px 0; text-align:center}
.beyond-header{max-width:900px; margin:0 auto 22px; opacity:0; transform:translateY(18px); transition:all .6s}
.beyond-header.visible{opacity:1; transform:none}
.beyond-header h2{font-size:1.9rem; margin-bottom:8px}
.beyond-header .sub{color:var(--muted); max-width:760px; margin:0 auto}

/* photo grid */
.photo-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px}
.photo-grid img{
  width:100%; height:220px; object-fit:cover; border-radius:10px; display:block;
  transition:transform .35s, box-shadow .35s; cursor:pointer; opacity:0; transform:translateY(18px);
}
.photo-grid img.visible{opacity:1; transform:none}
.photo-grid img:hover{transform:scale(1.03); box-shadow:0 14px 30px rgba(16,32,34,0.08)}

/* ---------------------------
   Reviews Section
--------------------------- */
.reviews-section {
  padding: 5rem 2rem;
  background: #f9fafb;
  text-align: center;
  position: relative;
}

.reviews-section h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 3rem;
}

/* ---------------------------
   Carousel wrapper & viewport
--------------------------- */
.carousel-wrapper {
  position: relative;
}

.carousel-viewport {
  overflow: hidden; /* hide overflowing cards */
  padding-bottom: 1rem;
}

.reviews-track {
  display: flex;           /* horizontal row */
  flex-wrap: nowrap;       /* no wrapping */
  gap: 1.5rem;            /* spacing between cards */
  transition: transform 0.3s ease;
}

/* ---------------------------
   Individual review cards
--------------------------- */
.review {
  flex: 0 0 auto;                  /* prevent shrinking */
  width: 300px;                     /* adjust as needed */
  background: white;
  border-radius: 1.5rem;
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  padding: 2rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease;
}

.review:hover {
  transform: translateY(-6px);
}

.review-text {
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
  margin-bottom: 1.2rem;
}

/* Reviewer info + stars */
.review-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.review-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: #111;
}

.review-stars {
  display: flex;
  gap: 0.2rem;
  color: #fbbc05;
  font-size: 1.2rem;
}

/* ---------------------------
   Navigation arrows
--------------------------- */
.rev-prev,
.rev-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  color: #333;
  border: none;
  font-size: 2rem;
  padding: 0.6rem 1rem;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: background 0.3s ease, transform 0.2s ease;
  z-index: 10;
}

.rev-prev:hover,
.rev-next:hover {
  background: #f1f1f1;
  transform: translateY(-50%) scale(1.1);
}

.rev-prev { left: -0.05rem; }
.rev-next { right: -0.05rem; }

/* ---------------------------
   Google button card (last slide)
--------------------------- */
.review.see-all {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4285f4;
  color: white;
  font-weight: 600;
  font-size: 1.2rem;
  border-radius: 1.5rem;
}

.review.see-all a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: white;
  text-decoration: none;
}

.review.see-all a:hover {
  background: #3367d6;
}

.review.see-all svg {
  width: 28px;
  height: 28px;
}

/* ---------------------------
   Responsive adjustments
--------------------------- */
/* carousel: snapping + nicer touch scrolling (non-visual) */
.carousel-viewport {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;        /* ensure the viewport is scrollable */
  scrollbar-width: none;   /* hide firefox scrollbar */
}
.carousel-viewport::-webkit-scrollbar { display: none; } /* hide webkit scrollbar */

.review {
  scroll-snap-align: start;
}
@media (max-width: 1024px) {
  .review { width: 250px; }
}

@media (max-width: 600px) {
  .review { width: 90%; margin: 0 auto; }
  .rev-prev, .rev-next { display: none; }
}


/* Rating & CTA under carousel */
.rating-cta {
  margin-top: 24px;      /* a bit more spacing */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;       /* handles smaller screens */
}

.rating {
  font-weight: 800;
  color: var(--text);
  display: flex;
  gap: 8px;
  align-items: center;
}

.btn-clean-green {
  background: linear-gradient(90deg,#83e29c,#a1fb98);
  padding: 10px 22px;
  border-radius: 999px;
  text-decoration: none;
  color: #2d2d2d;
  font-weight: 700;
  transition: transform 0.25s, box-shadow 0.25s;
}

.btn-clean-green:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16,32,34,0.1);
}

/* Responsive adjustments */
@media (max-width:1000px){
  .reviews-carousel { width: 90%; }
}

@media (max-width:700px){
  .reviews-wrap { flex-direction: column; gap: 18px; }
  .rev-nav { margin: 0 auto; }
}

/* ---------------------------
   Signup Section
--------------------------- */
.signup-section {
  text-align: center;
  padding: 200px 20px;
  background: linear-gradient(to bottom right, #f7f7f7, #ffffff);
  border-top: 1px solid #eee;
}

.signup-section h2 {
  font-size: 2rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.signup-section p {
  font-size: 1rem;
  color: #555;
  margin-bottom: 25px;
}

.btn-group {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 25px;
}

/* Base button style */
.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 999px; /* full pill */
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* Primary button – Signup */
.btn-signup, .btn-menu-cta {
  background: linear-gradient(90deg, #83e29c, #4ac78d);
  border-radius: 999px;
  color: #1f1f1f;
  padding: 12px 26px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(255,127,80,0.14);
  transition: transform .25s, box-shadow .25s;
  text-decoration: none;
}
.btn-signup:hover, .btn-menu-cta:hover {
  transform: translateY(-2px);
  opacity: 0.85;
  box-shadow: 0 12px 28px rgba(16,32,34,0.15);
}


/* Secondary button – Placement Test */
.btn-placement {
  background: linear-gradient(90deg, #83e29c, #4ac78d);
  color: #272727;
  padding: 14px 32px;
  border-radius: 9999px; /* pill shape */
  transition: all 0.2s ease;
}

.btn-placement:hover {
  opacity: 0.85;
  box-shadow: 0 12px 28px rgba(16,32,34,0.15);
  transform: translateY(-1px);
}





.trust-row {
  margin-top: 15px;
  font-size: 0.9rem;
  color: #666;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}


/* Add a hover effect for better user experience */
.signup-box .btn-cta:hover{
 transform:none; /* Remove the vertical hover movement */
 background:var(--accent); /* Fill with accent color on hover */
 color:white;
 box-shadow:0 4px 12px rgba(46, 157, 221, 0.2); /* Subtle shadow on hover */
}

/* ---------------------------
   Footer & WhatsApp
--------------------------- */
.site-footer {
  background-color: #1e2b58;
  color: #fff;
  padding: 40px 20px 20px;
  font-family: 'Montserrat', sans-serif;
}

.footer-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
}

.footer-left {
  flex: 1 1 300px;
}

.footer-right {
  flex: 1 1 600px; /* bigger map */
}

.footer-info h3,
.footer-socials h3,
.footer-right h3 {
  margin-bottom: 12px;
  font-size: 18px;
  color: #f5f5f5;
}

.footer-info p {
  font-size: 14px;
  color: #ccc;
  margin: 4px 0;
}

.footer-map iframe {
  border-radius: 8px;
  width: 100%;
  height: 100%;
  max-height: 400px;
}

.footer-socials a {
  color: #ccc;
  font-size: 18px;
  margin-right: 12px;
}

.footer-socials a:hover {
  color: #fff;
}

.footer-bottom {
  text-align: center;
  margin-top: 30px;
  font-size: 12px;
  color: #999;
}

/* Responsive */
@media screen and (max-width: 900px) {
  .footer-main {
    flex-direction: column;
  }

  .footer-right {
    order: -1; /* map on top for mobile if you want */
    margin-bottom: 20px;
  }
}

.whatsapp-btn{
  position:fixed; right:22px; bottom:22px; width:64px; height:64px;
  border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; box-shadow:0 12px 36px rgba(0,0,0,0.12); z-index:1300; text-decoration:none
}

/* ---------------------------
   Learning Path Section
--------------------------- */
.learning-path{padding:80px 20px; background:#fff; text-align:center}
.path-container{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:30px}
.path-step{
  width:260px; background:#f9f9f9; border-radius:16px; padding:30px 20px;
  box-shadow:0 4px 12px rgba(0,0,0,0.06); transition: transform .3s, box-shadow .3s;
}
.path-step:hover{transform:translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,0.1)}
.path-step .icon{font-size:3rem; margin-bottom:15px}
.path-step h3{font-size:1.5rem; font-weight:700; color:#2b2b2b; margin-bottom:10px}
.path-step p{font-size:1rem; color:#555; line-height:1.5}
.path-arrow{font-size:2rem; color:#4caf50}

/* ---------------------------
   Responsive
--------------------------- */
@media(max-width:1000px){
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .photo-grid{grid-template-columns:repeat(3,1fr)}
  .video-overlay h1{font-size:2.1rem}
}
@media(max-width:700px){
  .photo-grid{grid-template-columns:repeat(2,1fr)}
  .reviews-carousel{width:86%}
  .header-nav .menu{display:none}
  .video-overlay{left:6%; right:6%}
}
@media(max-width:420px){
  .photo-grid img{height:140px}
  .video-overlay h1{font-size:1.5rem}
  .btn-signup{padding:10px 18px; font-size:0.9rem}
}
/* 📱 Updated Mobile Hero Fix */
@media (max-width: 600px) {
  .video-header {
    height: 80vh; /* Keeps the impact but fits better */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .video-overlay {
    position: relative;
    left: 0 !important; /* Forces the 6% from desktop to disappear */
    width: 90%; /* Keeps a small margin on the sides */
    margin: 0 auto;
    text-align: center;
    padding: 0;
  }

  .video-overlay h1 {
    font-size: 1.7rem !important; /* !important ensures it overrides the desktop style */
    line-height: 1.2;
    margin-bottom: 15px;
    width: 100%;
  }

  .video-overlay .lead {
    font-size: 1rem;
    line-height: 1.4;
    margin: 0 auto 20px;
    width: 100%;
  }
/* 📱 Final CTA Mobile Fix */
@media (max-width: 600px) {
  
  .signup-section {
    padding: 60px 20px !important; /* Reduce that massive desktop padding */
  }

  .signup-section .btn-group {
    display: flex !important;
    flex-direction: column !important; /* Forces vertical stacking */
    align-items: center !important;
    gap: 15px !important;
    width: 100%;
  }

  .signup-section .btn {
    width: 100% !important; /* Make buttons full width of their container */
    max-width: 300px; /* But don't let them get awkwardly wide */
    margin: 0 auto !important;
    display: block !important;
    padding: 16px 20px !important;
    font-size: 1rem !important;
  }

  /* Fix for the trust icons overlapping */
  .trust-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 30px !important;
  }
}
}
/* 📱 Mobile Button Stacking Fix */
@media (max-width: 600px) {
  
  .signup-section .btn-group {
    display: flex !important;
    flex-direction: column !important; /* Forces one button on top of the other */
    align-items: center !important;
    gap: 15px !important; /* Space between the two buttons */
    width: 100% !important;
  }

  .signup-section .btn {
    /* Basic Layout */
    display: block !important;
    width: 90% !important; /* Occupy most of the screen width */
    max-width: 320px !important; /* Don't let them get too fat on tablets */
    margin: 0 auto !important;
    
    /* Text Handling */
    white-space: normal !important; /* Allows the text to wrap if it MUST */
    text-align: center !important;
    line-height: 1.2 !important;
    
    /* Sizing */
    padding: 16px 15px !important; /* Vertical padding first, horizontal second */
    height: auto !important; /* Ensures the button grows if text hits two lines */
    box-sizing: border-box !important;
  }
  
  /* Ensuring the text inside the buttons doesn't feel too cramped */
  .btn-placement, .btn-signup {
    font-size: 0.95rem !important;
  }
}
/* 🛠️ The "Safety Reset" to fix cutting/overflow */
@media (max-width: 600px) {
  
  /* 1. Prevent the whole page from horizontal scrolling */
  html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }

  /* 2. Fix the Signup Section container */
  .signup-section {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* 3. Ensure the Button Group doesn't push the edges */
  .btn-group {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* 4. Fix any other potential wider-than-screen elements */
  .container, .intro-container, .features-grid, .path-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 20px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* 5. One last tweak for the buttons */
  .signup-section .btn {
    width: 100% !important; /* Take full available space inside the padding */
    max-width: 280px !important; /* Slightly smaller to be safe */
  }
}