/* RESET */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    overflow-x: hidden;
    font-family: 'Poppins', sans-serif;
}



/* COLORS */
:root{
  --mint:#3BE79B;
  --dark:#032E49;
}

/* CONTAINER */
.container{
  width:90%;
  max-width:1300px;
  margin:auto;
}

/* TOP BAR */
.top-bar{
  background:var(--mint);
  color:#000;
  font-size:14px;
}

.top-flex{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 0;
}

/* LEFT */
.top-left{
  display:flex;
  align-items:center;
  gap:10px;
}

/* RIGHT SOCIAL */
.top-right{
  display:flex;
  align-items:center;
}
.top-right a{
  color:#000;
  margin-left:12px;
  font-size:14px;
  transition:0.3s;
}

/* HOVER */
.top-right a:hover{
  color:var(--dark);
}

/* TOP BAR RESPONSIVE */
@media (max-width: 600px){
  .top-bar{
    font-size:13px;
  }

  .top-flex{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 0;
    text-align:center;
  }

  .top-left{
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 12px;
  }

  .top-left .divider{
    display:none;
  }

  .top-right{
    justify-content:center;
    gap:12px;
  }

  .top-right a{
    margin-left:0;
    font-size:15px;
    line-height:1;
  }
}

/* NAVBAR */
.navbar{
  background:var(--dark);
}

/* NAV CONTAINER */
.nav-container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 0;
}

/* LOGO */
.logo-box{
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1002;
}

.logo-box img{
  width:200px;
  height:auto;
  object-fit:contain;
}

/* MENU */
.nav-menu{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}

.nav-menu a{
  color:#fff;
  text-decoration:none;
  margin:0 10px;
  font-size:14px;
  position:relative;
  transition:0.3s;
  position: relative;
  display: inline-block;
}

/* HOVER */
.nav-menu a:hover{
  color:var(--mint);
}

.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--mint);
  transition: 0.3s ease;
}

/* HOVER */
.nav-menu a:hover::after {
  width: 100%;
}

/* ACTIVE */
.nav-menu a.active::after {
  width: 100%;
}
/* LOGIN BUTTON */
.login-btn{
  background:var(--mint);
  color:#000 !important;
  padding:6px 14px;
  border-radius:20px;
  font-weight:600;
  margin-left:15px;
}

/* RESPONSIVE */
/* HAMBURGER */
.menu-toggle{
  display:none;
  font-size:22px;
  color:#fff;
  cursor:pointer;
}

/* MOBILE */
@media(max-width:1000px){

  .menu-toggle{
    display:block;
    z-index:1002;
  }

  .navbar{
    position:relative;
    z-index:1003;
  }

  /* MOBILE MENU */
  .nav-menu{
    position:fixed;
    top:115px; 
    right:-100%;
    width:100%;
    height:calc(100vh - 70px);
    background:var(--dark);
    flex-direction:column;
    align-items:flex-start;
    padding:30px;
    transition:0.4s ease;
    z-index:1001;
  }

  .nav-menu a{
    margin:12px 0;
    width:auto;
    font-size:16px;
  }

  /* ACTIVE */
  .nav-menu.active{
    right:0;
  }

}










/* HERO */
.hero{
  position:relative;
  height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
}

/* BACKGROUND IMAGE */
.hero-bg{
  position:absolute;
  width:100%;
  height:100%;
  background:url('https://images.unsplash.com/photo-1503376780353-7e6692767b70') center/cover no-repeat;
  z-index:0;
}

/* OVERLAY */
.hero-overlay{
  position:absolute;
  width:100%;
  height:100%;
  background:linear-gradient(
    90deg,
    rgba(3,46,73,0.95) 35%,
    rgba(3,46,73,0.6) 70%,
    transparent 100%
  );
  z-index:1;
}

/* CONTENT */
.hero-container{
  position:relative;
  z-index:2;
}

.hero-left{
  padding: 20px;
  max-width:600px;
  color:#fff;
}

/* TAG */
.hero-tag{
  color:var(--mint);
  font-weight:600;
  letter-spacing:2px;
}

/* TITLE */
.hero h1{
  font-size:70px;
  font-weight:800;
  line-height:1.1;
  margin:15px 0;
}

.hero h1 span{
  color:var(--mint);
}

/* TEXT */
.hero p{
  color:#d1d5db;
  margin-bottom:30px;
  font-size:16px;
}

/* BUTTONS */
.hero-buttons{
  display:flex;
  gap:15px;
}

/* BUTTON BASE */
.btn{
  padding:14px 30px;
  border-radius:40px;
  text-decoration:none;
  font-weight:600;
  transition:0.3s;
}

/* PRIMARY */
.btn.primary{
  background:var(--mint);
  color:#000;
  box-shadow:0 10px 30px rgba(59,231,155,0.4);
}

/* OUTLINE */
.btn.outline{
  border:1px solid var(--mint);
  color:#fff;
}

/* HOVER */
.btn:hover{
  transform:translateY(-3px);
}

/* FLOATING CAR */
.hero-car{
  position:absolute;
  bottom:-20px;
  right:0;
  z-index:2;
}

.hero-car img{
  width:700px;
  max-width:100%;
}

/* RESPONSIVE */
@media(max-width:992px){

  .hero{
    height:auto;
    padding:100px 0;
  }

  .hero h1{
    font-size:40px;
  }

  .hero-car{
    position:relative;
    margin-top:40px;
    text-align:center;
  }

  .hero-car img{
    width:90%;
  }

}

@media(max-width:450px){
    .hero-buttons{
        flex-direction: column;
    }
    .btn.primary{
        text-align: center;
    }
    .btn.outline{
        text-align: center;
    }
}
/* WHY SECTION */
.why{
  padding:100px 0;
  background:#032E49;
  color:#fff;
}

/* HEADER */
.why-header{
  text-align:center;
  max-width:700px;
  margin:auto;
  margin-bottom:60px;
}

.why-header span{
  color:#3BE79B;
  font-weight:600;
  letter-spacing:1px;
}

.why-header h2{
  font-size:40px;
  margin:15px 0;
}

.why-header p{
  color:#d1d5db;
}

/* GRID */
.why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px;
}

/* CARD */
.why-card{
  background:rgba(255,255,255,0.05);
  border-radius:15px;
  overflow:hidden;
  transition:0.4s;
  backdrop-filter:blur(10px);
}

/* IMAGE */
.why-card img{
  width:100%;
  height:180px;
  object-fit:cover;
}

/* TEXT */
.why-card h3{
  padding:15px;
  color:#3BE79B;
}

.why-card p{
  padding:0 15px 20px;
  font-size:14px;
  color:#d1d5db;
}

/* HOVER */
.why-card:hover{
  transform:translateY(-10px);
  box-shadow:0 15px 30px rgba(59,231,155,0.2);
}

/* RESPONSIVE */
@media(max-width:1000px){
  .why-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .why-grid{
    grid-template-columns:1fr;
  }
}


/* SECTION */
.instructors{
  padding:100px 0;
  background:#032E49;
  color:#fff;
}

/* HEADER */
.ins-header{
  text-align:center;
  max-width:700px;
  margin:auto;
  margin-bottom:60px;
}

.ins-header span{
  color:#3BE79B;
  font-weight:600;
}

.ins-header h2{
  font-size:40px;
  margin:15px 0;
}

.ins-header p{
  color:#d1d5db;
}

/* GRID */
.ins-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px;
}

/* CARD — flex column for stable CTA alignment; GPU-friendly hover */
.ins-card{
  background:#fff;
  color:#000;
  border-radius:15px;
  overflow:hidden;
  text-align:center;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  isolation:isolate;
  box-shadow:0 12px 32px rgba(0,0,0,0.12);
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.ins-img{
  overflow:hidden;
  border-radius:15px;
  flex-shrink:0;
  position:relative;
  z-index:0;
}

/* IMAGE */
.ins-img img{
  width:100%;
  height:250px;
  object-fit:cover;
  display:block;
  border-radius:14px;
  transition:transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transform:translateZ(0);
  backface-visibility:hidden;
}

.ins-card:hover .ins-img img,
.ins-card:focus-within .ins-img img{
  transform:scale3d(1.03, 1.03, 1);
}

/* CONTENT */
.ins-content{
  padding:20px;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  position:relative;
  z-index:1;
}

.ins-content h3{
  margin-bottom:5px;
}

.ins-content span{
  color:#3BE79B;
  font-size:14px;
}

.ins-content p{
  font-size:14px;
  color:#555;
  margin-top:10px;
}

/* View profile — homepage instructors only (does not affect .blog .blog-btn) */
.instructors .blog-btn{
  align-self:center;
  margin:16px auto 20px;
  padding:12px 28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:#032E49;
  position:relative;
  z-index:2;
  background:linear-gradient(135deg, #5ff0b0 0%, #3BE79B 38%, #2bc889 100%);
  border:1px solid rgba(3,46,73,0.14);
  box-shadow:
    0 10px 28px rgba(59,231,155,0.38),
    0 1px 0 rgba(255,255,255,0.45) inset;
  transform:translateZ(0);
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.28s ease;
}

.instructors .blog-btn::after{
  display:none;
}

.instructors .blog-btn:hover{
  transform:translate3d(0, -3px, 0);
  box-shadow:
    0 16px 38px rgba(59,231,155,0.48),
    0 0 0 1px rgba(59,231,155,0.22) inset;
  filter:brightness(1.05);
}

.instructors .blog-btn:active{
  transform:translate3d(0, -1px, 0);
  transition-duration:0.12s;
}

/* SOCIAL — fixed anchor + opacity/transform (no bottom jump / hover thrash) */
.ins-social{
  position:absolute;
  left:0;
  right:0;
  bottom: clamp(230px, 50%, 188px);
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  padding:0 14px;
  z-index:4;
  opacity:0;
  transform:translate3d(0, 12px, 0);
  pointer-events:none;
  transition:
    opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.ins-card:hover .ins-social,
.ins-card:focus-within .ins-social{
  opacity:1;
  transform:translate3d(0, 0, 0);
  pointer-events:auto;
}

.ins-social a{
  width:42px;
  height:42px;
  box-sizing:border-box;
  background:#032E49;
  color:#fff;
  border-radius:50%;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  text-decoration:none;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 6px 16px rgba(0,0,0,0.22);
  transform:translateZ(0);
  backface-visibility:hidden;
  transition:
    background-color 0.28s ease,
    color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.ins-social a:hover{
  background:#3BE79B;
  color:#032E49;
  transform:translate3d(0, -2px, 0);
  box-shadow:0 10px 24px rgba(59,231,155,0.38);
}

.ins-social a:active{
  transform:translate3d(0, 0, 0);
  transition-duration:0.1s;
}

/* Card lift — same motion language as icons (transform-only) */
.ins-card:hover,
.ins-card:focus-within{
  transform:translate3d(0, -10px, 0);
  box-shadow:
    0 24px 52px rgba(0,0,0,0.2),
    0 0 0 1px rgba(59,231,155,0.14);
}

/* Touch / coarse pointers: no hover overlay; stable in-flow social row */
@media (hover:none), (pointer:coarse){
  .ins-social{
    position:relative;
    bottom:auto;
    left:auto;
    right:auto;
    opacity:1;
    transform:none;
    pointer-events:auto;
    padding:6px 16px 20px;
    margin-top:-4px;
    z-index:2;
  }

  .ins-card:hover .ins-img img,
  .ins-card:focus-within .ins-img img{
    transform:none;
  }

  .ins-card:hover,
  .ins-card:focus-within{
    transform:translate3d(0, -6px, 0);
  }
}

@media (prefers-reduced-motion:reduce){
  .ins-card,
  .ins-card:hover,
  .ins-card:focus-within,
  .ins-img img,
  .ins-social,
  .ins-social a,
  .instructors .blog-btn,
  .instructors .blog-btn:hover,
  .instructors .blog-btn:active{
    transition-duration:0.01ms;
  }

  .ins-card:hover,
  .ins-card:focus-within{
    transform:none;
  }

  .ins-img img{
    transform:none;
  }

  .ins-social{
    opacity:1;
    transform:none;
    pointer-events:auto;
  }

  .ins-social a:hover{
    transform:none;
  }

  .instructors .blog-btn:hover,
  .instructors .blog-btn:active{
    transform:none;
  }
}

/* RESPONSIVE */
@media(max-width:1000px){
  .ins-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .ins-grid{
    grid-template-columns:1fr;
  }
}



/* SECTION */
.courses{
  padding:100px 0;
  background:#fff;
  color:#000;
}

/* HEADER */
.course-header{
  text-align:center;
  max-width:700px;
  margin:auto;
  margin-bottom:60px;
}

.course-header span{
  color:#3BE79B;
  font-weight:600;
}

.course-header h2{
  font-size:40px;
  margin:15px 0;
}

.course-header p{
  color:#555;
}

/* GRID */
.course-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
}

/* CARD */
.course-card{
  background:#fff;
  border-radius:15px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  transition:0.4s;
}

/* IMAGE */
.course-img{
  position:relative;
}

.course-img img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

/* BADGE */
.badge{
  position:absolute;
  top:15px;
  left:15px;
  background:#3BE79B;
  color:#000;
  padding:5px 12px;
  font-size:12px;
  border-radius:20px;
  font-weight:600;
}

/* CONTENT */
.course-content{
  padding:20px;
}

.course-content h3{
  margin-bottom:10px;
}

.course-content p{
  font-size:14px;
  color:#555;
}

/* META */
.course-meta{
  display:flex;
  justify-content:space-between;
  margin:15px 0;
  font-size:13px;
  color:#777;
}
.course-meta i{
  margin-right:6px;
  color:#3BE79B;
}
/* BUTTON */
.course-btn{
  display:inline-block;
  background:#032E49;
  color:#fff;
  padding:10px 18px;
  border-radius:25px;
  text-decoration:none;
  font-size:14px;
  transition:0.3s;
}

/* HOVER */
.course-btn:hover{
  background:#3BE79B;
  color:#032E49;
}

.course-card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

/* RESPONSIVE */
@media(max-width:1000px){
  .course-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .course-grid{
    grid-template-columns:1fr;
  }
}

/* SECTION */
.how{
  padding:100px 0;
  background:#032E49;
  color:#fff;
}

/* HEADER */
.how-header{
  text-align:center;
  max-width:700px;
  margin:auto;
  margin-bottom:70px;
}

.how-header span{
  color:#3BE79B;
  font-weight:600;
}

.how-header h2{
  font-size:40px;
  margin:15px 0;
}

.how-header p{
  color:#d1d5db;
}

/* GRID */
.how-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px;
}

/* CARD */
.how-card{
  background:rgba(255,255,255,0.05);
  border-radius:15px;
  padding:30px 20px;
  text-align:center;
  position:relative;
  transition:0.4s;
  backdrop-filter:blur(10px);
}

/* STEP NUMBER */
.step{
  position:absolute;
  top:-15px;
  left:50%;
  transform:translateX(-50%);
  background:#3BE79B;
  color:#032E49;
  font-weight:700;
  padding:5px 12px;
  border-radius:20px;
  font-size:12px;
}

/* ICON */
.how-icon{
  width:70px;
  height:70px;
  background:#032E49;
  border:2px solid #3BE79B;
  color:#3BE79B;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  margin:20px auto;
  transition:0.3s;
}

/* TITLE */
.how-card h3{
  margin-bottom:10px;
}

/* TEXT */
.how-card p{
  font-size:14px;
  color:#d1d5db;
}

/* HOVER */
.how-card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 40px rgba(59,231,155,0.2);
}

.how-card:hover .how-icon{
  background:#3BE79B;
  color:#032E49;
}

/* RESPONSIVE */
@media(max-width:1000px){
  .how-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .how-grid{
    grid-template-columns:1fr;
  }
}




.testimonials{
  padding:100px 0;
  background:#fff;
}

/* HEADER */
.test-header{
  text-align:center;
  max-width:700px;
  margin:auto;
  margin-bottom:60px;
}

.test-header span{
  color:#3BE79B;
  font-weight:600;
}

.test-header h2{
  font-size:40px;
  margin:15px 0;
}

.test-header p{
  color:#555;
}

/* SLIDER GRID */
.test-slider{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
}

/* CARD */
.test-card{
  background:#fff;
  border-radius:15px;
  padding:25px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  transition:0.4s;
}

/* TOP */
.test-top{
  display:flex;
  align-items:center;
  gap:15px;
}

.test-top img{
  width:60px;
  height:60px;
  border-radius:50%;
  object-fit:cover;
}

/* STAR */
.stars{
  margin:15px 0;
  color:#3BE79B;
}

/* TEXT */
.test-card p{
  font-size:14px;
  color:#555;
}

/* HOVER */
.test-card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

/* RESPONSIVE */
@media(max-width:1000px){
  .test-slider{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .test-slider{
    grid-template-columns:1fr;
  }
}

/* SECTION */
.service-area{
  padding:100px 0;
  background:#032E49;
  color:#fff;
}

/* HEADER */
.service-header{
  text-align:center;
  max-width:700px;
  margin:auto;
  margin-bottom:60px;
}

.service-header span{
  color:#3BE79B;
  font-weight:600;
  letter-spacing:1px;
}

.service-header h2{
  font-size:40px;
  margin:15px 0;
}

.service-header p{
  color:#d1d5db;
}

/* GRID */
.service-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
}

/* IMAGE */
.service-img{
  position:relative;
}

.service-img img{
  width:100%;
  border-radius:20px;
  object-fit:cover;
  box-shadow:0 20px 40px rgba(0,0,0,0.3);
}

/* CONTENT */
.service-content h3{
  margin-bottom:20px;
  color:#3BE79B;
  font-size:22px;
}

/* LOCATION LIST */
.location-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:25px;
  max-height:160px;
  overflow-y:auto;
}

/* TAG */
.location-list span{
  background:#fff;
  color:#032E49;
  padding:8px 15px;
  border-radius:20px;
  font-size:13px;
  font-weight:500;
  transition:0.3s;
}

.location-list span:hover{
  background:#3BE79B;
  color:#032E49;
}

/* TEXT */
.service-content p{
  color:#d1d5db;
  margin-bottom:25px;
}

/* BUTTON */
.service-btn{
  display:inline-block;
  background:#3BE79B;
  color:#032E49;
  padding:12px 25px;
  border-radius:30px;
  text-decoration:none;
  font-weight:600;
  transition:0.3s;
}

.service-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(59,231,155,0.4);
}

/* RESPONSIVE */
@media(max-width:900px){
  .service-grid{
    grid-template-columns:1fr;
  }

  .service-img{
    order:-1;
  }
}

/* SECTION */
.blog{
  padding:100px 0;
  background:#fff;
}

/* HEADER */
.blog-header{
  text-align:center;
  max-width:700px;
  margin:auto;
  margin-bottom:60px;
}

.blog-header span{
  color:#3BE79B;
  font-weight:600;
}

.blog-header h2{
  font-size:40px;
  margin:15px 0;
}

.blog-header p{
  color:#555;
}

/* GRID */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
}

/* CARD */
.blog-card{
  background:#fff;
  border-radius:15px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  transition:0.4s;
}

/* IMAGE */
.blog-img img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

/* CONTENT */
.blog-content{
  padding:20px;
}

.blog-content .date{
  font-size:12px;
  color:#3BE79B;
  font-weight:600;
}

.blog-content h3{
  margin:10px 0;
}

.blog-content p{
  font-size:14px;
  color:#555;
}

/* BUTTON */
.blog-btn{
  display:inline-block;
  margin-top:15px;
  color:#032E49;
  font-weight:600;
  text-decoration:none;
  position:relative;
}

/* UNDERLINE EFFECT */
.blog-btn::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:0;
  height:2px;
  background:#3BE79B;
  transition:0.3s;
}

.blog-btn:hover::after{
  width:100%;
}

/* HOVER */
.blog-card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

/* RESPONSIVE */
@media(max-width:1000px){
  .blog-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .blog-grid{
    grid-template-columns:1fr;
  }
}


/* =========================
   FAQ SECTION
========================= */

.faq-section{
    position: relative;
    padding: 110px 20px;
    background: #032E49;
    overflow: hidden;
}

/* BACKGROUND GLOW */
.faq-section::before{
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(59,231,155,0.18), transparent 70%);
    top: -180px;
    right: -120px;
    z-index: 0;
}

.faq-container{
    max-width: 1300px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* =========================
   IMAGE
========================= */

.faq-image{
    position: relative;
}

.faq-img-wrap{
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    height: 450px;
    box-shadow:
    0 30px 70px rgba(0,0,0,0.35);
}

.faq-img-wrap img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* IMAGE OVERLAY */
.faq-img-wrap::after{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        to top,
        rgba(3,46,73,0.8),
        rgba(3,46,73,0.1)
    );
}

/* BADGE */
.faq-badge{
    position:absolute;
    left:30px;
    bottom:30px;
    z-index:5;
    background:rgba(255,255,255,0.12);
    backdrop-filter: blur(12px);
    border:1px solid rgba(255,255,255,0.2);
    padding:20px 24px;
    border-radius:22px;
    color:#fff;
    box-shadow:
    0 15px 40px rgba(0,0,0,0.25);
}

.faq-badge span{
    font-size:32px;
    font-weight:800;
    color:#3BE79B;
    display:block;
    line-height:1;
}

.faq-badge p{
    margin-top:8px;
    font-size:14px;
    color:#fff;
}

/* =========================
   CONTENT
========================= */

.faq-subtitle{
    display:inline-block;
    background: rgba(59,231,155,0.12);
    color:#3BE79B;
    padding:10px 18px;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    margin-bottom:20px;
    border:1px solid rgba(59,231,155,0.25);
}

.faq-content h2{
    font-size:52px;
    line-height:1.1;
    color:#fff;
    margin-bottom:20px;
    font-weight:800;
}

.faq-content h2 span{
    color:#3BE79B;
}

.faq-top p{
    color:#d9e4ec;
    line-height:1.8;
    font-size:17px;
    max-width:600px;
}

/* =========================
   FAQ ITEMS
========================= */

.faq-items{
    margin-top:45px;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.faq-item{
    background: rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:22px;
    overflow:hidden;
    transition:0.4s ease;
    backdrop-filter: blur(10px);
}

.faq-item.active{
    background: rgba(59,231,155,0.08);
    border-color: rgba(59,231,155,0.25);
}

.faq-question{
    width:100%;
    background:none;
    border:none;
    outline:none;
    padding:24px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#fff;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    text-align:left;
}

.faq-question span{
    width:38px;
    height:38px;
    background:#3BE79B;
    color:#032E49;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:800;
    flex-shrink:0;
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s ease;
}

.faq-answer p{
    padding:0 28px 28px;
    color:#d9e4ec;
    line-height:1.8;
    font-size:15px;
}

/* ACTIVE */
.faq-item.active .faq-answer{
    max-height:300px;
}

/* HOVER */
.faq-item:hover{
    transform: translateY(-3px);
    border-color: rgba(59,231,155,0.4);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:992px){

    .faq-container{
        grid-template-columns:1fr;
    }

    .faq-img-wrap{
        height:500px;
    }

    .faq-content h2{
        font-size:42px;
    }
}

@media(max-width:768px){

    .faq-section{
        padding:80px 20px;
    }

    .faq-content h2{
        font-size:34px;
    }

    .faq-question{
        font-size:16px;
        padding:20px;
    }

    .faq-answer p{
        padding:0 20px 20px;
    }

    .faq-img-wrap{
        height:400px;
    }
}




/* =========================
   CTA SECTION
========================= */

.cta-section{
    position: relative;
    padding: 120px 20px;
    overflow: hidden;
    background: #032E49;
}

/* BG IMAGE */
.cta-bg{
    position:absolute;
    inset:0;
    z-index:1;
}

.cta-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* OVERLAY */
.cta-overlay{
    position:absolute;
    inset:0;
    z-index:2;

    background:
    linear-gradient(
        90deg,
        rgba(3,46,73,0.95) 0%,
        rgba(3,46,73,0.85) 40%,
        rgba(3,46,73,0.55) 100%
    );
}

/* CONTAINER */
.cta-container{
    position:relative;
    z-index:5;
    max-width:1300px;
    margin:auto;

    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:60px;
    align-items:center;
}

/* =========================
   CONTENT
========================= */

.cta-subtitle{
    display:inline-block;
    padding:10px 18px;
    background:rgba(59,231,155,0.12);
    border:1px solid rgba(59,231,155,0.25);
    border-radius:50px;
    color:#3BE79B;
    font-size:14px;
    font-weight:700;
    margin-bottom:24px;
    backdrop-filter: blur(10px);
}

.cta-content h2{
    font-size:64px;
    line-height:1.08;
    color:#fff;
    font-weight:800;
    margin-bottom:24px;
    max-width:700px;
}

.cta-content h2 span{
    color:#3BE79B;
}

.cta-content p{
    color:#d8e4ea;
    font-size:18px;
    line-height:1.9;
    max-width:650px;
}

/* =========================
   BUTTONS
========================= */

.cta-buttons{
    display:flex;
    gap:18px;
    margin-top:40px;
    flex-wrap:wrap;
}

.cta-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:17px 34px;
    border-radius:18px;
    text-decoration:none;
    font-size:16px;
    font-weight:700;
    overflow:hidden;
    transition:0.4s ease;
}

/* PRIMARY */
.primary-btn{
    background:linear-gradient(
        135deg,
        #3BE79B,
        #20c97a
    );
    color:#032E49;
    box-shadow:
    0 18px 40px rgba(59,231,155,0.25);
}

.primary-btn:hover{
    transform:translateY(-4px);
    box-shadow:
    0 24px 50px rgba(59,231,155,0.35);
}

/* SECONDARY */
.secondary-btn{
    border:1px solid #3BE79B;
    color:#fff;
}

.secondary-btn:hover{
    background:#fff;
    color:#032E49;
    transform:translateY(-4px);
}

/* =========================
   FLOATING CARD
========================= */

.cta-card{
    border:1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(2px);
    border-radius:32px;
    padding:35px;
    box-shadow:
    0 30px 70px rgba(0,0,0,0.35);
    position:relative;
}

/* TOP */
.cta-card-top{
    margin-bottom:30px;
}

.cta-card-top h3{
    color:#fff;
    font-size:30px;
    font-weight:800;
}

/* FEATURES */
.cta-features{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.cta-feature{
    display:flex;
    gap:18px;
    align-items:center;
}

.cta-feature .icon{
    width:60px;
    height:60px;
    min-width:60px;
    border-radius:18px;
    background:linear-gradient(
        135deg,
        #3BE79B,
        #20c97a
    );
    display:flex;
    align-items:center;
    justify-content:center;
    color:#032E49;
    font-size:22px;
    box-shadow:
    0 12px 30px rgba(59,231,155,0.25);
}

.cta-feature h4{
    color:#fff;
    font-size:20px;
    margin-bottom:8px;
}

.cta-feature p{
    color:#d9e4ec;
    line-height:1.7;
    font-size:15px;
}

/* =========================
   GLOW EFFECT
========================= */

.cta-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:radial-gradient(
        circle,
        rgba(59,231,155,0.18),
        transparent 70%
    );

    right:-120px;
    top:-120px;
    z-index:1;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1100px){

    .cta-container{
        grid-template-columns:1fr;
    }

    .cta-content h2{
        font-size:50px;
    }
}

@media(max-width:768px){

    .cta-section{
        padding:90px 20px;
    }

    .cta-content h2{
        font-size:38px;
    }

    .cta-content p{
        font-size:16px;
    }

    .cta-card{
        padding:25px;
    }

    .cta-btn{
        width:100%;
    }

    .cta-buttons{
        flex-direction:column;
    }
}








/* FOOTER */
.footer{
  background:#032E49;
  color:#fff;
  padding:80px 0 30px;
}

/* GRID */
.footer-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
  margin-bottom:40px;
}

/* COLUMN */
.footer-col h3,
.footer-col h4{
  margin-bottom:15px;
}

.footer-col p{
  font-size:14px;
  color:#d1d5db;
  margin-bottom:10px;
}
.footer-col p i{
  margin-right: 10px;
}

/* LINKS */
.footer-col ul{
  list-style:none;
}

.footer-col ul li{
  margin-bottom:10px;
}

.footer-col ul li a{
  text-decoration:none;
  color:#d1d5db;
  font-size:14px;
  transition:0.3s;
}


/* CONTACT ICON */
.footer-col i{
  color:#3BE79B;
}


/* FORM */
.footer-form{
  display:flex;
  margin-top:10px;
}

.footer-form input{
  flex:1;
  padding:10px;
  border:none;
  outline:none;
  border-radius:5px 0 0 5px;
}

.footer-form button{
  background:#3BE79B;
  color:#032E49;
  border:none;
  padding:10px 15px;
  border-radius:0 5px 5px 0;
  cursor:pointer;
}

/* SOCIAL */
.footer-social{
  margin-top:15px;
}

.footer-social a{
  display:inline-block;
  margin-right:10px;
  background:#fff;
  color:#032E49;
  width:35px;
  height:35px;
  line-height:35px;
  text-align:center;
  border-radius:50%;
  transition:0.3s;
}

.footer-social a:hover{
  background:#3BE79B;
  color: #032E49;
}

.footer-social a:hover i{
  color:#032E49;
}

/* BOTTOM */
.footer-bottom{
  text-align:center;
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:15px;
}

.footer-bottom p{
  font-size:13px;
  color:#aaa;
}

/* RESPONSIVE */
@media(max-width:1000px){
  .footer-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

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

  .footer-form{
    flex-direction:column;
  }

  .footer-form input{
    border-radius:5px;
    margin-bottom:10px;
  }

  .footer-form button{
    border-radius:5px;
  }
}









/* =========================
   ABOUT HERO SECTION
========================= */

.about-hero{
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 120px 20px;
    background: #032E49;
}

/* =========================
   BG IMAGE
========================= */

.about-hero-bg{
    position:absolute;
    inset:0;
    z-index:1;
}

.about-hero-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* =========================
   OVERLAY
========================= */

.about-overlay{
    position:absolute;
    inset:0;
    z-index:2;

    background:
    linear-gradient(
        90deg,
        rgba(3,46,73,0.96) 0%,
        rgba(3,46,73,0.92) 35%,
        rgba(3,46,73,0.65) 70%,
        rgba(3,46,73,0.45) 100%
    );
}

/* =========================
   GLOW EFFECT
========================= */

.about-glow{
    position:absolute;
    width:600px;
    height:600px;
    border-radius:50%;
    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.16),
        transparent 70%
    );

    top:-200px;
    right:-120px;
    z-index:2;
}

/* =========================
   CONTAINER
========================= */

.about-hero-container{
    position:relative;
    z-index:5;

    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:60px;
    align-items:center;
}

/* =========================
   CONTENT
========================= */

.about-subtitle{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:12px 20px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.25);

    color:#3BE79B;
    font-size:14px;
    font-weight:700;

    margin-bottom:28px;

    backdrop-filter: blur(10px);
}

.about-hero-content h1{
    font-size:72px;
    line-height:1.05;
    color:#fff;
    font-weight:800;
    max-width:760px;
    margin-bottom:28px;
}

.about-hero-content h1 span{
    color:#3BE79B;
}

.about-hero-content p{
    max-width:650px;
    color:#d9e4ec;
    font-size:18px;
    line-height:1.9;
}

/* =========================
   BUTTONS
========================= */

.about-buttons{
    display:flex;
    gap:18px;
    margin-top:40px;
    flex-wrap:wrap;
}

.about-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:17px 34px;

    border-radius:18px;

    text-decoration:none;
    font-size:16px;
    font-weight:700;

    transition:0.4s ease;
}

/* PRIMARY */
.primary-btn{
    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #21c77b
    );

    color:#032E49;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.25);
}

.primary-btn:hover{
    transform:translateY(-4px);

    box-shadow:
    0 25px 55px rgba(59,231,155,0.35);
}

/* OUTLINE */
.outline-btn{
    border:1px solid rgba(255,255,255,0.2);
    color:#fff;

    background:
    rgba(255,255,255,0.05);

    backdrop-filter: blur(10px);
}

.outline-btn:hover{
    background:#fff;
    color:#032E49;
    transform:translateY(-4px);
}

/* =========================
   STATS
========================= */

.about-stats{
    display:flex;
    gap:20px;
    margin-top:55px;
    flex-wrap:wrap;
}

.about-stat-box{
    min-width:180px;

    padding:28px 25px;

    border-radius:24px;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(12px);

    transition:0.4s ease;
}

.about-stat-box:hover{
    transform:translateY(-5px);

    border-color:
    rgba(59,231,155,0.35);
}

.about-stat-box h3{
    color:#3BE79B;
    font-size:42px;
    margin-bottom:10px;
}

.about-stat-box span{
    color:#fff;
    font-size:15px;
}

/* =========================
   FLOATING CARD
========================= */

.about-floating-card{
    position:relative;

    padding:30px;

    border-radius:35px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.12);

    backdrop-filter: blur(14px);

    box-shadow:
    0 35px 80px rgba(0,0,0,0.35);
}

/* TOP */
.floating-top{
    margin-bottom:28px;
}

.mini-tag{
    display:inline-block;

    padding:8px 16px;

    border-radius:50px;

    background:#3BE79B;

    color:#032E49;
    font-size:13px;
    font-weight:700;

    margin-bottom:18px;
}

.floating-top h3{
    color:#fff;
    font-size:34px;
    line-height:1.3;
}

/* IMAGE */
.floating-image{
    border-radius:24px;
    overflow:hidden;
    margin-bottom:28px;
}

.floating-image img{
    width:100%;
    height:280px;
    object-fit:cover;
    display:block;
}

/* FEATURES */
.floating-bottom{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.floating-item{
    display:flex;
    align-items:center;
    gap:16px;

    padding:16px 18px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.05);

    transition:0.4s ease;
}

.floating-item:hover{
    background:
    rgba(59,231,155,0.12);
}

.floating-item i{
    width:48px;
    height:48px;

    border-radius:14px;

    background:#3BE79B;

    color:#032E49;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:18px;
}

.floating-item span{
    color:#fff;
    font-size:15px;
    font-weight:600;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .about-hero-content h1{
        font-size:58px;
    }
}

@media(max-width:992px){

    .about-hero{
        min-height:auto;
    }

    .about-hero-container{
        grid-template-columns:1fr;
    }

    .about-floating-card{
        max-width:700px;
        margin:0 auto;
    }

    .about-hero-content h1{
        font-size:48px;
    }
}

@media(max-width:768px){

    .about-hero{
        padding:90px 20px;
    }

    .about-hero-content h1{
        font-size:38px;
    }

    .about-hero-content p{
        font-size:16px;
    }

    .about-stat-box{
        width:100%;
    }

    .floating-top h3{
        font-size:28px;
    }

    .about-btn{
        width:100%;
    }

    .about-buttons{
        flex-direction:column;
    }
}

@media(max-width:480px){

    .about-hero{
        padding:80px 16px;
    }

    .about-subtitle{
        width:100%;
        justify-content:center;
        text-align:center;
    }

    .about-hero-content h1{
        font-size:32px;
    }

    .about-hero-content p{
        font-size:15px;
    }
}



/* =========================
   OUR STORY SECTION
========================= */

.our-story-section{
    position: relative;
    padding: 120px 20px;
    background: #fff;
    overflow: hidden;
}

/* =========================
   GLOW EFFECT
========================= */

.story-glow{
    position:absolute;
    width:550px;
    height:550px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    left:-180px;
    bottom:-180px;
}

/* =========================
   WRAPPER
========================= */

.story-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

/* =========================
   IMAGE AREA
========================= */

.story-images{
    position:relative;
    min-height:700px;
}

/* MAIN IMAGE */
.story-main-image{
    width:100%;
    height:620px;

    border-radius:35px;
    overflow:hidden;

    box-shadow:
    0 30px 80px rgba(0,0,0,0.15);
}

.story-main-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* SMALL IMAGE */
.story-small-image{
    position:absolute;

    width:260px;
    height:220px;

    right:-40px;
    bottom:20px;

    border-radius:28px;
    overflow:hidden;

    border:8px solid #fff;

    box-shadow:
    0 20px 50px rgba(0,0,0,0.15);
}

.story-small-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* FLOATING CARD */
.story-floating-card{
    position:absolute;

    left:-30px;
    top:60px;

    display:flex;
    align-items:center;
    gap:18px;

    padding:22px 24px;

    background:#032E49;
    border-radius:24px;

    box-shadow:
    0 25px 60px rgba(3,46,73,0.25);
}

/* ICON */
.story-icon{
    width:65px;
    height:65px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;
    font-size:24px;
}

.story-floating-card h3{
    color:#fff;
    font-size:28px;
    margin-bottom:4px;
}

.story-floating-card p{
    color:#d8e4ea;
    font-size:14px;
}

/* =========================
   CONTENT
========================= */

.story-subtitle{
    display:inline-block;

    padding:12px 20px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.25);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

.story-content h2{
    font-size:56px;
    line-height:1.1;

    color:#032E49;

    margin-bottom:28px;
}

.story-content h2 span{
    color:#3BE79B;
}

.story-text{
    color:#5c6b77;
    line-height:1.9;
    font-size:17px;
    margin-bottom:22px;
}

/* =========================
   FEATURES
========================= */

.story-features{
    margin-top:35px;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.story-feature{
    display:flex;
    align-items:center;
    gap:12px;

    padding:18px 20px;

    border-radius:18px;

    background:#f7fafc;

    transition:0.4s ease;
}

.story-feature:hover{
    transform:translateY(-4px);

    background:#032E49;
}

.story-feature:hover span{
    color:#fff;
}

.story-feature i{
    color:#3BE79B;
    font-size:18px;
}

.story-feature span{
    color:#032E49;
    font-size:15px;
    font-weight:600;

    transition:0.4s ease;
}

/* =========================
   BUTTON
========================= */

.story-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-top:40px;

    padding:18px 34px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #032E49,
        #064c75
    );

    color:#fff;
    text-decoration:none;
    font-size:16px;
    font-weight:700;

    transition:0.4s ease;

    box-shadow:
    0 18px 40px rgba(3,46,73,0.18);
}

.story-btn:hover{
    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    color:#032E49;

    transform:translateY(-4px);

    box-shadow:
    0 22px 50px rgba(59,231,155,0.28);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1100px){

    .story-wrapper{
        grid-template-columns:1fr;
    }

    .story-images{
        min-height:auto;
    }

    .story-content h2{
        font-size:48px;
    }

    .story-small-image{
        right:0;
    }
}

@media(max-width:768px){

    .our-story-section{
        padding:90px 20px;
    }

    .story-content h2{
        font-size:36px;
    }

    .story-text{
        font-size:16px;
    }

    .story-features{
        grid-template-columns:1fr;
    }

    .story-main-image{
        height:450px;
    }

    .story-small-image{
        width:180px;
        height:150px;
        border-width:5px;
    }

    .story-floating-card{
        left:15px;
        top:15px;
        padding:16px;
    }

    .story-floating-card h3{
        font-size:22px;
    }

    .story-btn{
        width:100%;
    }
}

@media(max-width:480px){

    .story-main-image{
        height:360px;
        border-radius:26px;
    }

    .story-small-image{
        right:10px;
        bottom:10px;
        width:150px;
        height:120px;
    }

    .story-floating-card{
        left:10px;
        top:10px;
        gap:12px;
    }
}


/* =========================
   MISSION & VISION SECTION
========================= */

.mission-vision-section{
    position: relative;
    padding: 120px 20px;
    background: #032E49;
    overflow: hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.mv-glow{
    position:absolute;
    border-radius:50%;
    filter: blur(40px);
}

.mv-glow-1{
    width:500px;
    height:500px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.15),
        transparent 70%
    );

    top:-200px;
    left:-180px;
}

.mv-glow-2{
    width:450px;
    height:450px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.12),
        transparent 70%
    );

    right:-150px;
    bottom:-180px;
}

/* =========================
   HEADER
========================= */

.mv-header{
    position:relative;
    z-index:2;

    text-align:center;
    max-width:850px;
    margin:auto;
    margin-bottom:80px;
}

.mv-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.25);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:25px;

    backdrop-filter: blur(10px);
}

.mv-header h2{
    font-size:58px;
    line-height:1.1;

    color:#fff;

    margin-bottom:24px;
}

.mv-header h2 span{
    color:#3BE79B;
}

.mv-header p{
    color:#d8e4ea;
    font-size:18px;
    line-height:1.9;
}

/* =========================
   GRID
========================= */

.mv-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:1fr 0.9fr 1fr;
    gap:30px;
    align-items:center;
}

/* =========================
   CARD
========================= */

.mv-card{
    padding:40px 35px;

    border-radius:32px;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(14px);

    transition:0.4s ease;

    box-shadow:
    0 25px 70px rgba(0,0,0,0.18);
}

.mv-card:hover{
    transform:translateY(-8px);

    border-color:
    rgba(59,231,155,0.35);
}

/* ICON */
.mv-icon{
    width:78px;
    height:78px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #23ca7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;
    font-size:30px;

    margin-bottom:28px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.25);
}

/* TITLE */
.mv-card h3{
    color:#fff;
    font-size:34px;
    margin-bottom:18px;
}

/* TEXT */
.mv-card p{
    color:#d9e4ec;
    line-height:1.9;
    font-size:16px;
}

/* =========================
   LIST
========================= */

.mv-list{
    margin-top:35px;

    display:flex;
    flex-direction:column;
    gap:18px;
}

.mv-item{
    display:flex;
    align-items:center;
    gap:14px;

    padding:16px 18px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.05);

    transition:0.4s ease;
}

.mv-item:hover{
    background:
    rgba(59,231,155,0.12);
}

.mv-item i{
    color:#3BE79B;
    font-size:18px;
}

.mv-item span{
    color:#fff;
    font-size:15px;
    font-weight:600;
}

/* =========================
   CENTER IMAGE
========================= */

.mv-center-image{
    position:relative;
}

.mv-image-wrap{
    position:relative;

    border-radius:35px;
    overflow:hidden;

    height:760px;

    box-shadow:
    0 35px 80px rgba(0,0,0,0.30);
}

.mv-image-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* OVERLAY */
.mv-image-wrap::after{
    content:"";
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(3,46,73,0.85),
        rgba(3,46,73,0.15)
    );
}

/* FLOATING BOX */
.mv-floating-box{
    position:absolute;

    left:30px;
    bottom:30px;

    z-index:5;

    padding:24px 26px;

    border-radius:24px;

    background:
    rgba(255,255,255,0.10);

    border:
    1px solid rgba(255,255,255,0.15);

    backdrop-filter: blur(14px);
}

.mv-floating-box h4{
    color:#3BE79B;
    font-size:42px;
    margin-bottom:8px;
}

.mv-floating-box p{
    color:#fff;
    font-size:15px;
    line-height:1.6;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .mv-grid{
        grid-template-columns:1fr;
    }

    .mv-image-wrap{
        height:500px;
    }
}

@media(max-width:768px){

    .mission-vision-section{
        padding:90px 20px;
    }

    .mv-header h2{
        font-size:38px;
    }

    .mv-header p{
        font-size:16px;
    }

    .mv-card{
        padding:28px;
    }

    .mv-card h3{
        font-size:28px;
    }

    .mv-image-wrap{
        height:400px;
    }

    .mv-floating-box{
        left:20px;
        bottom:20px;
        padding:18px;
    }

    .mv-floating-box h4{
        font-size:32px;
    }
}

@media(max-width:480px){

    .mv-header{
        margin-bottom:60px;
    }

    .mv-header h2{
        font-size:32px;
    }

    .mv-card{
        padding:24px 20px;
        border-radius:26px;
    }

    .mv-image-wrap{
        height:320px;
        border-radius:26px;
    }

    .mv-floating-box{
        left:14px;
        bottom:14px;
        padding:14px;
        border-radius:18px;
    }
}


/* =========================
   INSTRUCTOR PROFILE SECTION
========================= */

.about-instructors-section{
    position: relative;
    padding: 120px 20px;
    background: #fff;
    overflow: hidden;
}

/* =========================
   GLOW EFFECT
========================= */

.inst-glow{
    position:absolute;
    border-radius:50%;
}

.inst-glow-1{
    width:500px;
    height:500px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    top:-180px;
    right:-120px;
}

.inst-glow-2{
    width:400px;
    height:400px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.08),
        transparent 70%
    );

    left:-120px;
    bottom:-120px;
}

/* =========================
   HEADER
========================= */

.inst-header{
    position:relative;
    z-index:2;

    text-align:center;

    max-width:850px;
    margin:auto;
    margin-bottom:80px;
}

.inst-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.25);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

.inst-header h2{
    font-size:58px;
    line-height:1.1;

    color:#032E49;

    margin-bottom:24px;
}

.inst-header h2 span{
    color:#3BE79B;
}

.inst-header p{
    color:#5d6c77;
    font-size:18px;
    line-height:1.9;
}

/* =========================
   GRID
========================= */

.inst-profile-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

/* =========================
   CARD
========================= */

.inst-profile-card{
    position:relative;

    border-radius:35px;

    overflow:hidden;

    background:#fff;

    transition:0.4s ease;

    box-shadow:
    0 25px 60px rgba(0,0,0,0.08);
}

.inst-profile-card:hover{
    transform:translateY(-10px);

    box-shadow:
    0 35px 80px rgba(0,0,0,0.12);
}

/* =========================
   IMAGE
========================= */

.inst-image-wrap{
    position:relative;
    height:420px;
    overflow:hidden;
}

.inst-image-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:0.5s ease;
}

.inst-profile-card:hover .inst-image-wrap img{
    transform:scale(1.06);
}

/* OVERLAY */
.inst-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(3,46,73,0.75),
        transparent 60%
    );
}

/* EXPERIENCE */
.inst-exp{
    position:absolute;

    left:25px;
    bottom:25px;

    z-index:5;

    padding:18px 20px;

    border-radius:22px;

    background:
    rgba(255,255,255,0.12);

    border:
    1px solid rgba(255,255,255,0.15);

    backdrop-filter: blur(12px);
}

.inst-exp span{
    display:block;

    color:#3BE79B;
    font-size:34px;
    font-weight:800;
}

.inst-exp p{
    color:#fff;
    font-size:14px;
}

/* =========================
   CONTENT
========================= */

.inst-content{
    padding:35px 30px;
}

.inst-top{
    margin-bottom:18px;
}

.inst-top h3{
    color:#032E49;
    font-size:30px;
    margin-bottom:8px;
}

.inst-top span{
    color:#3BE79B;
    font-size:15px;
    font-weight:700;
}

.inst-content p{
    color:#5d6c77;
    font-size:16px;
    line-height:1.9;
}

/* =========================
   FEATURES
========================= */

.inst-features{
    margin-top:28px;

    display:flex;
    flex-direction:column;
    gap:14px;
}

.inst-feature{
    display:flex;
    align-items:center;
    gap:12px;

    padding:14px 16px;

    border-radius:16px;

    background:#f7fafc;

    transition:0.4s ease;
}

.inst-feature:hover{
    background:#032E49;
}

.inst-feature:hover span{
    color:#fff;
}

.inst-feature i{
    color:#3BE79B;
    font-size:16px;
}

.inst-feature span{
    color:#032E49;
    font-size:15px;
    font-weight:600;

    transition:0.4s ease;
}

/* =========================
   SOCIAL
========================= */

.inst-social{
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 30px;
    align-items: center;
    text-align: center;
}

.inst-social a{
    width:48px;
    height:48px;

    border-radius:16px;

    background:#032E49;

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;
    font-size:16px;

    transition:0.4s ease;
}

.inst-social a:hover{
    background:#3BE79B;
    color:#032E49;

    transform:translateY(-4px);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1100px){

    .inst-profile-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .about-instructors-section{
        padding:90px 20px;
    }

    .inst-header h2{
        font-size:38px;
    }

    .inst-header p{
        font-size:16px;
    }

    .inst-profile-grid{
        grid-template-columns:1fr;
    }

    .inst-image-wrap{
        height:360px;
    }

    .inst-content{
        padding:28px 24px;
    }

    .inst-top h3{
        font-size:26px;
    }
}

@media(max-width:480px){

    .inst-header{
        margin-bottom:60px;
    }

    .inst-header h2{
        font-size:32px;
    }

    .inst-profile-card{
        border-radius:26px;
    }

    .inst-image-wrap{
        height:320px;
    }

    .inst-exp{
        left:16px;
        bottom:16px;
        padding:14px 16px;
        border-radius:18px;
    }

    .inst-exp span{
        font-size:28px;
    }
}


/* =========================
   WHY STUDENTS TRUST US
========================= */

.trust-section{
    position: relative;
    padding: 120px 20px;
    background: #032E49;
    overflow: hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.trust-bg-glow{
    position:absolute;
    border-radius:50%;
}

.trust-glow-1{
    width:550px;
    height:550px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.14),
        transparent 70%
    );

    top:-220px;
    left:-180px;
}

.trust-glow-2{
    width:450px;
    height:450px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    right:-160px;
    bottom:-180px;
}

/* =========================
   HEADER
========================= */

.trust-header{
    position:relative;
    z-index:2;

    text-align:center;

    max-width:850px;
    margin:auto;
    margin-bottom:80px;
}

.trust-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.25);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;

    backdrop-filter: blur(10px);
}

.trust-header h2{
    font-size:58px;
    line-height:1.1;

    color:#fff;

    margin-bottom:24px;
}

.trust-header h2 span{
    color:#3BE79B;
}

.trust-header p{
    color:#d9e4ec;
    font-size:18px;
    line-height:1.9;
}

/* =========================
   WRAPPER
========================= */

.trust-wrapper{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:0.95fr 1.05fr;
    gap:60px;
    align-items:center;
}

/* =========================
   IMAGE
========================= */

.trust-image-wrap{
    position:relative;

    height:450px;

    border-radius:35px;
    overflow:hidden;

    box-shadow:
    0 35px 80px rgba(0,0,0,0.35);
}

.trust-image-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* OVERLAY */
.trust-image-wrap::after{
    content:"";
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(3,46,73,0.85),
        rgba(3,46,73,0.15)
    );
}

/* FLOATING BOX */
.trust-floating-box{
    position:absolute;

    left:30px;
    bottom:30px;

    z-index:5;

    display:flex;
    align-items:center;
    gap:18px;

    padding:22px 24px;

    border-radius:24px;

    background:
    rgba(255,255,255,0.12);

    border:
    1px solid rgba(255,255,255,0.15);

    backdrop-filter: blur(12px);
}

.trust-float-icon{
    width:65px;
    height:65px;

    border-radius:20px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22c87c
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;
    font-size:24px;
}

.trust-floating-box h4{
    color:#fff;
    font-size:28px;
    margin-bottom:5px;
}

.trust-floating-box p{
    color:#d9e4ec;
    font-size:14px;
}

/* =========================
   RIGHT CONTENT
========================= */

.trust-right{
    display:flex;
    flex-direction:column;
    gap:24px;
}

/* CARD */
.trust-card{
    display:flex;
    gap:24px;

    padding:30px;

    border-radius:30px;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(14px);

    transition:0.4s ease;
}

.trust-card:hover{
    transform:translateY(-6px);

    border-color:
    rgba(59,231,155,0.35);

    background:
    rgba(59,231,155,0.08);
}

/* ICON */
.trust-icon{
    width:78px;
    height:78px;

    min-width:78px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;
    font-size:28px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.25);
}

/* TEXT */
.trust-content h3{
    color:#fff;
    font-size:28px;
    margin-bottom:14px;
}

.trust-content p{
    color:#d9e4ec;
    font-size:16px;
    line-height:1.9;
}

/* =========================
   STATS
========================= */

.trust-stats{
    position:relative;
    z-index:2;

    margin-top:80px;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.trust-stat-item{
    padding:35px 25px;

    text-align:center;

    border-radius:30px;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(12px);

    transition:0.4s ease;
}

.trust-stat-item:hover{
    transform:translateY(-6px);

    border-color:
    rgba(59,231,155,0.35);
}

.trust-stat-item h3{
    color:#3BE79B;
    font-size:52px;
    margin-bottom:12px;
}

.trust-stat-item p{
    color:#fff;
    font-size:16px;
    font-weight:600;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .trust-wrapper{
        grid-template-columns:1fr;
    }

    .trust-image-wrap{
        height:500px;
    }

    .trust-stats{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .trust-section{
        padding:90px 20px;
    }

    .trust-header h2{
        font-size:38px;
    }

    .trust-header p{
        font-size:16px;
    }

    .trust-card{
        flex-direction:column;
        padding:24px;
    }

    .trust-content h3{
        font-size:24px;
    }

    .trust-image-wrap{
        height:400px;
    }

    .trust-floating-box{
        left:20px;
        bottom:20px;
        padding:18px;
    }

    .trust-floating-box h4{
        font-size:22px;
    }

    .trust-stats{
        grid-template-columns:1fr;
    }

    .trust-stat-item h3{
        font-size:42px;
    }
}

@media(max-width:480px){

    .trust-header{
        margin-bottom:60px;
    }

    .trust-header h2{
        font-size:32px;
    }

    .trust-image-wrap{
        height:320px;
        border-radius:26px;
    }

    .trust-floating-box{
        left:14px;
        bottom:14px;
        gap:14px;
        padding:14px;
        border-radius:18px;
    }

    .trust-float-icon{
        width:54px;
        height:54px;
        border-radius:16px;
    }
}




/* =========================
   SAFETY & CERTIFICATION
========================= */

.safety-section{
    position: relative;
    padding: 120px 20px;
    background: #fff;
    overflow: hidden;
}

/* =========================
   GLOW EFFECT
========================= */

.safety-glow{
    position:absolute;
    border-radius:50%;
}

.safety-glow-1{
    width:500px;
    height:500px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.12),
        transparent 70%
    );

    top:-180px;
    right:-140px;
}

.safety-glow-2{
    width:400px;
    height:400px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.08),
        transparent 70%
    );

    left:-120px;
    bottom:-120px;
}

/* =========================
   WRAPPER
========================= */

.safety-wrapper{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

/* =========================
   CONTENT
========================= */

.safety-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.25);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

.safety-content h2{
    font-size:58px;
    line-height:1.1;

    color:#032E49;

    margin-bottom:24px;
}

.safety-content h2 span{
    color:#3BE79B;
}

.safety-text{
    color:#5d6c77;
    font-size:17px;
    line-height:1.9;

    margin-bottom:40px;
}

/* =========================
   FEATURES
========================= */

.safety-features{
    display:flex;
    flex-direction:column;
    gap:24px;
}

/* ITEM */
.safety-item{
    display:flex;
    gap:22px;

    padding:28px;

    border-radius:30px;

    background:#f7fafc;

    transition:0.4s ease;

    box-shadow:
    0 10px 30px rgb(0 0 0 / 24%);
}

.safety-item:hover{
    transform:translateY(-6px);

    background:#032E49;
}

.safety-item:hover h3,
.safety-item:hover p{
    color:#fff;
}

/* ICON */
.safety-icon{
    width:78px;
    height:78px;

    min-width:78px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #24cc7e
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;
    font-size:28px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.25);
}

/* TEXT */
.safety-info h3{
    color:#032E49;
    font-size:28px;
    margin-bottom:12px;

    transition:0.4s ease;
}

.safety-info p{
    color:#5d6c77;
    font-size:16px;
    line-height:1.8;

    transition:0.4s ease;
}

/* =========================
   IMAGE SIDE
========================= */

.safety-image-side{
    position:relative;
}

/* MAIN IMAGE */
.safety-image-wrap{
    position:relative;

    height:760px;

    border-radius:35px;
    overflow:hidden;

    box-shadow:
    0 35px 80px rgba(0,0,0,0.18);
}

.safety-image-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* OVERLAY */
.safety-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(3,46,73,0.82),
        rgba(3,46,73,0.10)
    );
}

/* =========================
   CERTIFICATE CARD
========================= */

.certificate-card{
    position:absolute;

    left:30px;
    bottom:30px;

    z-index:5;

    display:flex;
    align-items:center;
    gap:18px;

    padding:10px 15px;

    border-radius:24px;

    background:
    rgba(255,255,255,0.12);

    border:
    1px solid rgba(255,255,255,0.15);

    backdrop-filter: blur(14px);
}

/* ICON */
.certificate-icon{
    width: 45px;
    height: 45px;
    border-radius: 30px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #21c77b
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;
    font-size:28px;
}

.certificate-content h4{
    color:#fff;
    font-size:20px;
    margin-bottom:5px;
}

.certificate-content p{
    color:#d8e4ea;
    font-size:15px;
}

/* =========================
   SMALL FLOAT CARD
========================= */

.safety-small-card{
    position:absolute;

    right:-50px;
    bottom:40px;

    width:320px;

    padding:28px;

    border-radius:30px;

    background:#032E49;

    box-shadow:
    0 25px 60px rgba(3,46,73,0.25);
}

/* TOP */
.small-card-top{
    margin-bottom:30px;
}

.small-card-top h3{
    color:#fff;
    font-size:30px;
    margin-bottom:10px;
}

.small-card-top span{
    color:#d9e4ec;
    line-height:1.7;
    font-size:15px;
}

/* =========================
   PROGRESS
========================= */

.small-progress{
    display:flex;
    flex-direction:column;
    gap:22px;
}

/* ITEM */
.progress-item{
    width:100%;
}

.progress-top{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:10px;
}

.progress-top p{
    color:#fff;
    font-size:14px;
}

.progress-top span{
    color:#3BE79B;
    font-size:14px;
    font-weight:700;
}

/* BAR */
.progress-bar{
    width:100%;
    height:5px;

    border-radius:30px;

    background:
    rgba(255,255,255,0.12);

    overflow:hidden;
}

.progress-fill{
    height:100%;

    border-radius:30px;

    background:
    linear-gradient(
        90deg,
        #3BE79B,
        #20c879
    );
}

.fill-1{
    width:98%;
}

.fill-2{
    width:99%;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .safety-wrapper{
        grid-template-columns:1fr;
    }

    .safety-image-wrap{
        height:500px;
    }

    .safety-small-card{
        right:20px;
        bottom:20px;
    }
}

@media(max-width:768px){

    .safety-section{
        padding:90px 20px;
    }

    .safety-content h2{
        font-size:38px;
    }

    .safety-text{
        font-size:16px;
    }

    .safety-item{
        flex-direction:column;
        padding:24px;
    }

    .safety-info h3{
        font-size:24px;
    }

    .safety-image-wrap{
        height:400px;
    }

    .certificate-card{
        left:20px;
        bottom:20px;
        padding:18px;
    }

    .certificate-content h4{
        font-size:20px;
    }

    .safety-small-card{
        position:relative;
        right:0;
        bottom:0;

        width:100%;

        margin-top:25px;
    }
}

@media(max-width:480px){

    .safety-content h2{
        font-size:32px;
    }

    .safety-image-wrap{
        height:320px;
        border-radius:26px;
    }

    .certificate-card{
        left:14px;
        bottom:14px;
        padding:14px;
        border-radius:18px;
    }

    .certificate-content h4{
        font-size:18px;
    }
}



/* =========================
   STUDENT SUCCESS SECTION
========================= */

.student-success-section{
    position: relative;
    padding: 120px 20px;
    background: #032E49;
    overflow: hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.success-glow{
    position:absolute;
    border-radius:50%;
}

.success-glow-1{
    width:550px;
    height:550px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.14),
        transparent 70%
    );

    top:-220px;
    right:-180px;
}

.success-glow-2{
    width:450px;
    height:450px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    left:-150px;
    bottom:-180px;
}

/* =========================
   HEADER
========================= */

.success-header{
    position:relative;
    z-index:2;

    text-align:center;

    max-width:850px;
    margin:auto;
    margin-bottom:80px;
}

.success-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.25);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

.success-header h2{
    font-size:58px;
    line-height:1.1;

    color:#fff;

    margin-bottom:24px;
}

.success-header h2 span{
    color:#3BE79B;
}

.success-header p{
    color:#d9e4ec;
    font-size:18px;
    line-height:1.9;
}

/* =========================
   WRAPPER
========================= */

.success-wrapper{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:1fr 0.9fr;
    gap:40px;
    align-items:start;
}

/* =========================
   MAIN CARD
========================= */

.success-main-card{
    padding:40px;

    border-radius:35px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(14px);

    box-shadow:
    0 30px 70px rgba(0,0,0,0.20);

    margin-bottom:30px;
}

/* TOP */
.success-top{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;

    margin-bottom:28px;
}

/* PROFILE */
.success-profile{
    display:flex;
    align-items:center;
    gap:18px;
}

.success-profile img{
    width:85px;
    height:85px;

    border-radius:50%;
    object-fit:cover;

    border:4px solid #3BE79B;
}

.success-profile h3{
    color:#fff;
    font-size:28px;
    margin-bottom:6px;
}

.success-profile span{
    color:#3BE79B;
    font-size:15px;
    font-weight:600;
}

/* RATING */
.success-rating{
    color:#3BE79B;
    font-size:18px;

    display:flex;
    gap:5px;
}

/* REVIEW */
.success-review{
    color:#d9e4ec;
    font-size:18px;
    line-height:2;
}

/* =========================
   STATS
========================= */

.success-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.success-stat-item{
    padding:30px 20px;

    text-align:center;

    border-radius:28px;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(10px);

    transition:0.4s ease;
}

.success-stat-item:hover{
    transform:translateY(-5px);

    border-color:
    rgba(59,231,155,0.35);
}

.success-stat-item h3{
    color:#3BE79B;
    font-size:48px;
    margin-bottom:10px;
}

.success-stat-item p{
    color:#fff;
    font-size:15px;
    font-weight:600;
}

/* =========================
   RIGHT SIDE
========================= */

.success-right{
    position:relative;

    display:flex;
    flex-direction:column;
    gap:25px;
}

/* CARD */
.success-card{
    padding:28px;

    border-radius:28px;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(12px);

    transition:0.4s ease;
}

.success-card:hover{
    transform:translateY(-6px);

    border-color:
    rgba(59,231,155,0.35);

    background:
    rgba(59,231,155,0.08);
}

/* TOP */
.success-card-top{
    display:flex;
    align-items:center;
    gap:16px;

    margin-bottom:18px;
}

.success-card-top img{
    width:70px;
    height:70px;

    border-radius:50%;
    object-fit:cover;

    border:3px solid #3BE79B;
}

.success-card-top h4{
    color:#fff;
    font-size:24px;
    margin-bottom:5px;
}

.success-card-top span{
    color:#3BE79B;
    font-size:14px;
    font-weight:600;
}

/* TEXT */
.success-card p{
    color:#d9e4ec;
    line-height:1.9;
    font-size:16px;
}

/* =========================
   FLOATING BOX
========================= */

.success-floating-box{
    display:flex;
    align-items:center;
    gap:18px;

    padding:30px;

    border-radius:30px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22ca7d
    );

    box-shadow:
    0 25px 60px rgba(59,231,155,0.25);
}

/* ICON */
.floating-review-icon{
    width:75px;
    height:75px;

    border-radius:24px;

    background:#032E49;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#3BE79B;
    font-size:30px;
}

.success-floating-box h3{
    color:#032E49;
    font-size:30px;
    margin-bottom:8px;
}

.success-floating-box p{
    color:#032E49;
    font-size:15px;
    line-height:1.7;
    font-weight:500;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .success-wrapper{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .student-success-section{
        padding:90px 20px;
    }

    .success-header h2{
        font-size:38px;
    }

    .success-header p{
        font-size:16px;
    }

    .success-main-card{
        padding:28px;
    }

    .success-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .success-profile h3{
        font-size:24px;
    }

    .success-review{
        font-size:16px;
    }

    .success-stats{
        grid-template-columns:1fr;
    }

    .success-card{
        padding:24px;
    }

    .success-card-top h4{
        font-size:22px;
    }

    .success-floating-box{
        flex-direction:column;
        align-items:flex-start;
    }

    .success-floating-box h3{
        font-size:24px;
    }
}

@media(max-width:480px){

    .success-header{
        margin-bottom:60px;
    }

    .success-header h2{
        font-size:32px;
    }

    .success-main-card{
        padding:22px;
        border-radius:26px;
    }

    .success-profile img{
        width:72px;
        height:72px;
    }

    .success-profile h3{
        font-size:22px;
    }

    .success-stat-item h3{
        font-size:38px;
    }

    .success-card-top img{
        width:60px;
        height:60px;
    }
}







/* =========================
   COURSES HERO SECTION
========================= */

.courses-hero{
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 120px 20px;
    background: #032E49;
}

/* =========================
   BACKGROUND IMAGE
========================= */

.courses-hero-bg{
    position:absolute;
    inset:0;
    z-index:1;
}

.courses-hero-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* =========================
   OVERLAY
========================= */

.courses-overlay{
    position:absolute;
    inset:0;
    z-index:2;

    background:
    linear-gradient(
        90deg,
        rgba(3,46,73,0.97) 0%,
        rgba(3,46,73,0.92) 38%,
        rgba(3,46,73,0.65) 72%,
        rgba(3,46,73,0.38) 100%
    );
}

/* =========================
   GLOW
========================= */

.courses-glow{
    position:absolute;
    width:650px;
    height:650px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.16),
        transparent 70%
    );

    top:-220px;
    right:-120px;

    z-index:2;
}

/* =========================
   CONTAINER
========================= */

.courses-hero-container{
    position:relative;
    z-index:5;

    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:60px;
    align-items:center;
}

/* =========================
   CONTENT
========================= */

.courses-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.25);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:28px;

    backdrop-filter: blur(10px);
}

.courses-hero-content h1{
    font-size:72px;
    line-height:1.05;

    color:#fff;

    margin-bottom:28px;

    font-weight:800;

    max-width:760px;
}

.courses-hero-content h1 span{
    color:#3BE79B;
}

.courses-hero-content p{
    max-width:650px;

    color:#d9e4ec;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   BUTTONS
========================= */

.courses-buttons{
    display:flex;
    gap:18px;

    margin-top:40px;

    flex-wrap:wrap;
}

.courses-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:17px 34px;

    border-radius:18px;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;
}

/* PRIMARY */
.primary-btn{
    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #21c77b
    );

    color:#032E49;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.25);
}

.primary-btn:hover{
    transform:translateY(-4px);

    box-shadow:
    0 24px 50px rgba(59,231,155,0.35);
}

/* OUTLINE */
.outline-btn{
    border:1px solid rgba(255,255,255,0.20);

    background:
    rgba(255,255,255,0.05);

    backdrop-filter: blur(10px);

    color:#fff;
}

.outline-btn:hover{
    background:#fff;
    color:#032E49;

    transform:translateY(-4px);
}

/* =========================
   STATS
========================= */

.courses-stats{
    display:flex;
    gap:20px;

    margin-top:55px;

    flex-wrap:wrap;
}

.courses-stat-box{
    min-width:190px;

    padding:30px 25px;

    border-radius:24px;

    background:
    rgba(255,255,255,0.07);

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(12px);

    transition:0.4s ease;
}

.courses-stat-box:hover{
    transform:translateY(-5px);

    border-color:
    rgba(59,231,155,0.35);
}

.courses-stat-box h3{
    color:#3BE79B;

    font-size:44px;

    margin-bottom:10px;
}

.courses-stat-box span{
    color:#fff;

    font-size:15px;
}

/* =========================
   FLOATING CARD
========================= */

.courses-floating-card{
    position:relative;

    padding:32px;

    border-radius:35px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.12);

    backdrop-filter: blur(16px);

    box-shadow:
    0 35px 80px rgba(0,0,0,0.35);
}

/* TOP */
.floating-course-top{
    margin-bottom:28px;
}

.mini-course-tag{
    display:inline-block;

    padding:8px 16px;

    border-radius:50px;

    background:#3BE79B;

    color:#032E49;

    font-size:13px;
    font-weight:700;

    margin-bottom:18px;
}

.floating-course-top h3{
    color:#fff;

    font-size:34px;
    line-height:1.3;
}

/* IMAGE */
.floating-course-image{
    border-radius:24px;
    overflow:hidden;

    margin-bottom:28px;
}

.floating-course-image img{
    width:100%;
    height:280px;

    object-fit:cover;
    display:block;
}

/* =========================
   FEATURES
========================= */

.floating-course-features{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.course-feature-item{
    display:flex;
    align-items:center;
    gap:14px;

    padding:16px 18px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.05);

    transition:0.4s ease;
}

.course-feature-item:hover{
    background:
    rgba(59,231,155,0.12);
}

.course-feature-item i{
    color:#3BE79B;

    font-size:18px;
}

.course-feature-item span{
    color:#fff;

    font-size:15px;
    font-weight:600;
}

/* =========================
   PRICE BOX
========================= */

.course-price-box{
    margin-top:28px;

    padding:22px 24px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #20c97a
    );

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.course-price-box p{
    color:#032E49;

    font-size:14px;
    margin-bottom:4px;
}

.course-price-box h4{
    color:#032E49;

    font-size:42px;
    font-weight:800;
}

.course-price-box a{
    padding:14px 24px;

    border-radius:16px;

    background:#032E49;

    color:#fff;

    text-decoration:none;

    font-size:15px;
    font-weight:700;

    transition:0.4s ease;
}

.course-price-box a:hover{
    transform:translateY(-4px);

    background:#021f31;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .courses-hero-content h1{
        font-size:58px;
    }
}

@media(max-width:992px){

    .courses-hero{
        min-height:auto;
    }

    .courses-hero-container{
        grid-template-columns:1fr;
    }

    .courses-floating-card{
        max-width:700px;
    }

    .courses-hero-content h1{
        font-size:48px;
    }
}

@media(max-width:768px){

    .courses-hero{
        padding:90px 20px;
    }

    .courses-hero-content h1{
        font-size:38px;
    }

    .courses-hero-content p{
        font-size:16px;
    }

    .courses-stat-box{
        width:100%;
    }

    .floating-course-top h3{
        font-size:28px;
    }

    .courses-btn{
        width:100%;
    }

    .courses-buttons{
        flex-direction:column;
    }

    .course-price-box{
        flex-direction:column;
        align-items:flex-start;
    }

    .course-price-box a{
        width:100%;
        text-align:center;
    }
}


/* =========================
   COURSE CATEGORIES SECTION
========================= */

.course-categories-section{
    position: relative;
    padding: 120px 20px;
    background: #fff;
    overflow: hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.cat-glow{
    position:absolute;
    border-radius:50%;
}

.cat-glow-1{
    width:500px;
    height:500px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    top:-180px;
    right:-120px;
}

.cat-glow-2{
    width:400px;
    height:400px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.08),
        transparent 70%
    );

    left:-120px;
    bottom:-120px;
}

/* =========================
   HEADER
========================= */

.course-cat-header{
    position:relative;
    z-index:2;

    text-align:center;

    max-width:850px;
    margin:auto;
    margin-bottom:80px;
}

.course-cat-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.25);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

.course-cat-header h2{
    font-size:58px;
    line-height:1.1;

    color:#032E49;

    margin-bottom:24px;
}

.course-cat-header h2 span{
    color:#3BE79B;
}

.course-cat-header p{
    color:#5d6c77;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   GRID
========================= */

.course-cat-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

/* =========================
   CARD
========================= */

.course-cat-card{
    position:relative;

    padding:35px 30px;

    border-radius:35px;

    background:#fff;

    border:
    1px solid rgba(3,46,73,0.08);

    transition:0.4s ease;

    overflow:hidden;

    box-shadow:
    0 20px 50px rgba(0,0,0,0.06);
}

.course-cat-card::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:
    linear-gradient(
        90deg,
        #3BE79B,
        #22ca7d
    );

    transform:scaleX(0);

    transition:0.4s ease;

    transform-origin:left;
}

.course-cat-card:hover::before,
.active-card::before{
    transform:scaleX(1);
}

.course-cat-card:hover{
    transform:translateY(-10px);

    box-shadow:
    0 30px 70px rgba(0,0,0,0.10);
}

/* ACTIVE CARD */
.active-card{
    background:#032E49;

    border-color:
    rgba(59,231,155,0.18);
}

.active-card h3,
.active-card p,
.active-card .cat-feature span{
    color:#fff;
}

/* =========================
   ICON
========================= */

.course-cat-icon{
    width:82px;
    height:82px;

    border-radius:26px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22ca7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:32px;

    margin-bottom:28px;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.25);
}

/* TAG */
.course-tag{
    display:inline-block;

    padding:8px 16px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    color:#3BE79B;

    font-size:13px;
    font-weight:700;

    margin-bottom:20px;
}

/* TITLE */
.course-cat-card h3{
    color:#032E49;

    font-size:30px;
    line-height:1.3;

    margin-bottom:18px;

    transition:0.4s ease;
}

/* TEXT */
.course-cat-card p{
    color:#5d6c77;

    font-size:16px;
    line-height:1.9;

    transition:0.4s ease;
}

/* =========================
   FEATURES
========================= */

.course-cat-features{
    margin-top:30px;

    display:flex;
    flex-direction:column;
    gap:16px;
}

/* ITEM */
.cat-feature{
    display:flex;
    align-items:center;
    gap:12px;

    padding:14px 16px;

    border-radius:16px;

    background:
    rgba(59,231,155,0.06);

    transition:0.4s ease;
}

.course-cat-card:hover .cat-feature{
    background:
    rgba(59,231,155,0.12);
}

.cat-feature i{
    color:#3BE79B;

    font-size:16px;
}

.cat-feature span{
    color:#032E49;

    font-size:15px;
    font-weight:600;

    transition:0.4s ease;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .course-cat-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .course-categories-section{
        padding:90px 20px;
    }

    .course-cat-header h2{
        font-size:38px;
    }

    .course-cat-header p{
        font-size:16px;
    }

    .course-cat-grid{
        grid-template-columns:1fr;
    }

    .course-cat-card{
        padding:28px 24px;
    }

    .course-cat-card h3{
        font-size:26px;
    }
}


/* =========================
   COURSE CARDS SECTION
========================= */

.course-cards-section{
    position: relative;
    padding: 120px 20px;
    background: #032E49;
    overflow: hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.course-card-glow{
    position:absolute;
    border-radius:50%;
}

.glow-1{
    width:550px;
    height:550px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.14),
        transparent 70%
    );

    top:-220px;
    right:-180px;
}

.glow-2{
    width:450px;
    height:450px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    left:-160px;
    bottom:-180px;
}

/* =========================
   HEADER
========================= */

.course-cards-header{
    position:relative;
    z-index:2;

    text-align:center;

    max-width:850px;
    margin:auto;
    margin-bottom:80px;
}

.course-cards-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.25);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

.course-cards-header h2{
    font-size:58px;
    line-height:1.1;

    color:#fff;

    margin-bottom:24px;
}

.course-cards-header h2 span{
    color:#3BE79B;
}

.course-cards-header p{
    color:#d9e4ec;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   GRID
========================= */

.course-cards-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

/* =========================
   CARD
========================= */

.course-main-card{
    position:relative;

    border-radius:35px;

    overflow:hidden;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(14px);

    transition:0.4s ease;

    box-shadow:
    0 30px 70px rgba(0,0,0,0.18);
}

.course-main-card:hover{
    transform:translateY(-10px);

    border-color:
    rgba(59,231,155,0.35);
}

/* FEATURED */
.featured-course{
    border:
    1px solid rgba(59,231,155,0.35);

    background:
    rgba(59,231,155,0.08);
}

/* =========================
   IMAGE
========================= */

.course-main-image{
    position:relative;

    height:300px;

    overflow:hidden;
}

.course-main-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.5s ease;
}

.course-main-card:hover .course-main-image img{
    transform:scale(1.08);
}

/* BADGE */
.course-badge{
    position:absolute;

    top:22px;
    left:22px;

    padding:10px 18px;

    border-radius:50px;

    background:#032E49;

    color:#fff;

    font-size:13px;
    font-weight:700;

    z-index:5;
}

.green-badge{
    background:#3BE79B;
    color:#032E49;
}

.dark-badge{
    background:#fff;
    color:#032E49;
}

/* =========================
   CONTENT
========================= */

.course-main-content{
    padding:32px 30px;
}

/* TOP */
.course-top-info{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;

    margin-bottom:22px;
}

.course-level{
    color:#3BE79B;

    font-size:14px;
    font-weight:700;
}

/* RATING */
.course-rating{
    display:flex;
    align-items:center;
    gap:6px;

    color:#3BE79B;

    font-size:15px;
}

.course-rating span{
    color:#fff;
    font-weight:600;
}

/* TITLE */
.course-main-content h3{
    color:#fff;

    font-size:32px;
    line-height:1.3;

    margin-bottom:18px;
}

/* TEXT */
.course-main-content p{
    color:#d9e4ec;

    font-size:16px;
    line-height:1.9;
}

/* =========================
   FEATURES
========================= */

.course-main-features{
    margin-top:30px;

    display:flex;
    flex-direction:column;
    gap:16px;
}

.main-feature{
    display:flex;
    align-items:center;
    gap:12px;

    padding:15px 16px;

    border-radius:16px;

    background:
    rgba(255,255,255,0.05);

    transition:0.4s ease;
}

.main-feature:hover{
    background:
    rgba(59,231,155,0.12);
}

.main-feature i{
    color:#3BE79B;

    font-size:16px;
}

.main-feature span{
    color:#fff;

    font-size:15px;
    font-weight:600;
}

/* =========================
   FOOTER
========================= */

.course-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-top:35px;
}

/* PRICE */
.course-price span{
    color:#d9e4ec;

    font-size:14px;
}

.course-price h4{
    color:#3BE79B;

    font-size:42px;

    margin-top:4px;
}

/* BUTTON */
.course-btn-main{
    padding:16px 26px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #20c879
    );

    color:#032E49;

    text-decoration:none;

    font-size:15px;
    font-weight:700;

    transition:0.4s ease;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

.course-btn-main:hover{
    transform:translateY(-4px);

    box-shadow:
    0 24px 50px rgba(59,231,155,0.35);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .course-cards-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .course-cards-section{
        padding:90px 20px;
    }

    .course-cards-header h2{
        font-size:38px;
    }

    .course-cards-header p{
        font-size:16px;
    }

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

    .course-main-content{
        padding:28px 24px;
    }

    .course-main-content h3{
        font-size:28px;
    }

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

    .course-btn-main{
        width:100%;
        text-align:center;
    }
}

/* =========================
   COURSE DETAILS SECTION
========================= */

.course-details-section{
    position: relative;
    padding: 120px 20px;
    background: #fff;
    overflow: hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.course-details-glow{
    position:absolute;
    border-radius:50%;
}

.glow-left{
    width:520px;
    height:520px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    top:-180px;
    left:-180px;
}

.glow-right{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.08),
        transparent 70%
    );

    right:-120px;
    bottom:-120px;
}

/* =========================
   WRAPPER
========================= */

.course-details-wrapper{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

/* =========================
   IMAGE SIDE
========================= */

.course-details-image-side{
    position:relative;
}

/* MAIN IMAGE */
.course-details-main-image{
    position:relative;

    height:760px;

    border-radius:35px;
    overflow:hidden;

    box-shadow:
    0 35px 80px rgba(0,0,0,0.16);
}

.course-details-main-image img{
    width:100%;
    height:100%;

    object-fit:cover;
    display:block;
}

/* OVERLAY */
.course-details-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(3,46,73,0.85),
        rgba(3,46,73,0.15)
    );
}

/* =========================
   FLOATING INFO
========================= */

.course-floating-info{
    position:absolute;
    left:30px;
    bottom:30px;
    z-index:5;
    display:flex;
    align-items:center;
    gap:18px;
    padding:10px 15px;
    border-radius:24px;
    background:
    rgba(255,255,255,0.12);
    border:
    1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(14px);
}

/* ICON */
.course-float-icon{
    width:45px;
    height:45px;

    border-radius:30px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #21c87a
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:28px;
}

.course-floating-info h4{
    color:#fff;

    font-size:28px;
    margin-bottom:6px;
}

.course-floating-info p{
    color:#d8e4ea;

    font-size:14px;
}

/* =========================
   SMALL CARD
========================= */

.course-small-card{
    position:absolute;

    right:-40px;
    bottom:100px;

    width:340px;

    padding:30px;

    border-radius:32px;

    background:#032E49;

    box-shadow:
    0 30px 70px rgba(3,46,73,0.25);
}

/* TOP */
.small-course-top{
    margin-bottom:28px;
}

.small-course-top h3{
    color:#fff;

    font-size:32px;
    margin-bottom:10px;
}

.small-course-top span{
    color:#d9e4ec;

    font-size:15px;
    line-height:1.8;
}

/* LIST */
.small-course-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.small-course-item{
    display:flex;
    align-items:center;
    gap:14px;

    padding:15px 16px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.06);
}

.small-course-item i{
    color:#3BE79B;

    font-size:16px;
}

.small-course-item span{
    color:#fff;

    font-size:15px;
    font-weight:600;
}

/* =========================
   CONTENT
========================= */

.course-details-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.25);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

.course-details-content h2{
    font-size:58px;
    line-height:1.1;

    color:#032E49;

    margin-bottom:28px;
}

.course-details-content h2 span{
    color:#3BE79B;
}

.course-details-text{
    color:#5d6c77;

    font-size:17px;
    line-height:1.9;

    margin-bottom:40px;
}

/* =========================
   TIMELINE
========================= */

.course-timeline{
    position:relative;

    display:flex;
    flex-direction:column;
    gap:28px;
}

/* ITEM */
.timeline-item{
    display:flex;
    gap:24px;

    padding:28px;

    border-radius:30px;

    background:#f7fafc;

    transition:0.4s ease;

    box-shadow:
    0 10px 30px rgba(0,0,0,18%);
}

.timeline-item:hover{
    transform:translateY(-6px);

    background:#032E49;
}

.timeline-item:hover h3,
.timeline-item:hover p{
    color:#fff;
}

/* NUMBER */
.timeline-number{
    width:75px;
    height:75px;

    min-width:75px;

    border-radius:22px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22ca7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:28px;
    font-weight:800;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* TEXT */
.timeline-content h3{
    color:#032E49;

    font-size:30px;
    margin-bottom:12px;

    transition:0.4s ease;
}

.timeline-content p{
    color:#5d6c77;

    font-size:16px;
    line-height:1.9;

    transition:0.4s ease;
}

/* =========================
   BUTTON
========================= */

.course-details-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-top:40px;

    padding:18px 36px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #032E49,
        #064c74
    );

    color:#fff;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(3,46,73,0.16);
}

.course-details-btn:hover{
    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #21c87a
    );

    color:#032E49;

    transform:translateY(-5px);

    box-shadow:
    0 25px 55px rgba(59,231,155,0.30);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .course-details-wrapper{
        grid-template-columns:1fr;
    }

    .course-details-main-image{
        height:520px;
    }

    .course-small-card{
        right:20px;
        bottom:20px;
    }
}

@media(max-width:768px){

    .course-details-section{
        padding:90px 20px;
    }

    .course-details-content h2{
        font-size:38px;
    }

    .course-details-text{
        font-size:16px;
    }

    .timeline-item{
        flex-direction:column;
        padding:24px;
    }

    .timeline-content h3{
        font-size:24px;
    }

    .course-details-main-image{
        height:420px;
    }

    .course-floating-info{
        left:20px;
        bottom:20px;
        padding:18px;
    }

    .course-floating-info h4{
        font-size:22px;
    }

    .course-small-card{
        position:relative;
        right:0;
        bottom:0;

        width:100%;

        margin-top:25px;
    }

    .course-details-btn{
        width:100%;
    }
}


/* =========================
   PRICING SECTION
========================= */

.pricing-section{
    position: relative;
    padding: 120px 20px;
    background: #032E49;
    overflow: hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.pricing-glow{
    position:absolute;
    border-radius:50%;
}

.pricing-glow-1{
    width:550px;
    height:550px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.15),
        transparent 70%
    );

    top:-220px;
    right:-180px;
}

.pricing-glow-2{
    width:450px;
    height:450px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    left:-140px;
    bottom:-180px;
}

/* =========================
   HEADER
========================= */

.pricing-header{
    position:relative;
    z-index:2;

    text-align:center;

    max-width:850px;
    margin:auto;
    margin-bottom:80px;
}

.pricing-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.25);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

.pricing-header h2{
    font-size:58px;
    line-height:1.1;

    color:#fff;

    margin-bottom:24px;
}

.pricing-header h2 span{
    color:#3BE79B;
}

.pricing-header p{
    color:#d9e4ec;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   GRID
========================= */

.pricing-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
}

/* =========================
   CARD
========================= */

/* CARD */
.pricing-card{
    position:relative;
    padding:40px 35px;
    border-radius:36px;
    background:
    rgba(255,255,255,0.06);
    border:
    1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(14px);
    transition:0.4s ease;
    box-shadow:
    0 30px 70px rgba(0,0,0,0.18);
    display:flex;
    flex-direction:column;
}

.pricing-card:hover{
    transform:translateY(-10px);

    border-color:
    rgba(59,231,155,0.35);
}

/* FEATURED */
.featured-pricing{
    background:
    rgba(59,231,155,0.10);

    border:
    1px solid rgba(59,231,155,0.35);

    transform:scale(1.04);
}

/* BADGE */
.featured-badge{
    position:absolute;

    top:-16px;
    right:30px;

    padding:10px 18px;

    border-radius:50px;

    background:#3BE79B;

    color:#032E49;

    font-size:13px;
    font-weight:700;

    box-shadow:
    0 15px 35px rgba(59,231,155,0.30);
}

/* =========================
   TOP
========================= */

.pricing-top{
    margin-bottom:35px;
}

/* TAG */
.pricing-tag{
    display:inline-block;

    padding:8px 16px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    color:#3BE79B;

    font-size:13px;
    font-weight:700;

    margin-bottom:20px;
}

.featured-tag{
    background:#3BE79B;
    color:#032E49;
}

/* TITLE */
.pricing-top h3{
    color:#fff;

    font-size:34px;
    line-height:1.3;

    margin-bottom:18px;
}

/* TEXT */
.pricing-top p{
    color:#d9e4ec;

    font-size:16px;
    line-height:1.9;
}

/* =========================
   PRICE
========================= */

.pricing-price{
    margin-bottom:35px;
}

.pricing-price h2{
    color:#3BE79B;

    font-size:72px;
    line-height:1;

    margin-bottom:10px;
}

.pricing-price span{
    color:#d9e4ec;

    font-size:15px;
}

/* =========================
   FEATURES
========================= */

/* FEATURES */
.pricing-features{
    display:flex;
    flex-direction:column;
    gap:18px;
    flex:1;
}
/* ITEM */
.pricing-feature-item{
    display:flex;
    align-items:center;
    gap:14px;

    padding:16px 18px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.05);

    transition:0.4s ease;
}

.pricing-feature-item:hover{
    background:
    rgba(59,231,155,0.12);
}

.pricing-feature-item i{
    color:#3BE79B;

    font-size:16px;
}

.pricing-feature-item span{
    color:#fff;

    font-size:15px;
    font-weight:600;
}

/* =========================
   BUTTON
========================= */
.pricing-btn{
    display:flex;
    align-items:center;
    justify-content:center;

    /* CHANGE */
    margin-top:auto;

    width:100%;

    padding:18px 20px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.12);

    color:#fff;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;
    margin-top: 30px;
}

.pricing-btn:hover{
    background:#fff;

    color:#032E49;

    transform:translateY(-4px);
}

/* FEATURED BTN */
.featured-btn{
    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    color:#032E49;

    border:none;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.28);
}

.featured-btn:hover{
    background:#fff;
    color:#032E49;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .pricing-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .featured-pricing{
        transform:none;
    }
}

@media(max-width:768px){

    .pricing-section{
        padding:90px 20px;
    }

    .pricing-header h2{
        font-size:38px;
    }

    .pricing-header p{
        font-size:16px;
    }

    .pricing-grid{
        grid-template-columns:1fr;
    }

    .pricing-card{
        padding:32px 24px;
    }

    .pricing-top h3{
        font-size:28px;
    }

    .pricing-price h2{
        font-size:58px;
    }
}


/* =========================
   WHY TAKE OUR COURSES
========================= */

.why-course-section{
    position: relative;
    padding: 120px 20px;
    background: #fff;
    overflow: hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.why-course-glow{
    position:absolute;
    border-radius:50%;
}

.glow-one{
    width:520px;
    height:520px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    top:-180px;
    right:-150px;
}

.glow-two{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.08),
        transparent 70%
    );

    left:-140px;
    bottom:-140px;
}

/* =========================
   HEADER
========================= */

.why-course-header{
    position:relative;
    z-index:2;

    text-align:center;

    max-width:850px;
    margin:auto;
    margin-bottom:80px;
}

.why-course-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.25);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

.why-course-header h2{
    color:#032E49;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.why-course-header h2 span{
    color:#3BE79B;
}

.why-course-header p{
    color:#5d6c77;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   WRAPPER
========================= */

.why-course-wrapper{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:0.95fr 1.05fr;
    gap:60px;
    align-items:center;
}

/* =========================
   IMAGE
========================= */

.why-course-image-wrap{
    position:relative;

    height:450px;

    border-radius:35px;
    overflow:hidden;

    box-shadow:
    0 35px 80px rgba(0,0,0,0.16);
}

.why-course-image-wrap img{
    width:100%;
    height:100%;

    object-fit:cover;
    display:block;
}

/* OVERLAY */
.why-course-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(3,46,73,0.82),
        rgba(3,46,73,0.10)
    );
}

/* FLOATING BOX */
.why-floating-box{
    position:absolute;

    left:30px;
    bottom:30px;

    z-index:5;

    display:flex;
    align-items:center;
    gap:18px;

    padding:22px 24px;

    border-radius:24px;

    background:
    rgba(255,255,255,0.12);

    border:
    1px solid rgba(255,255,255,0.15);

    backdrop-filter: blur(14px);
}

/* ICON */
.why-floating-icon{
    width:68px;
    height:68px;

    border-radius:22px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22ca7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:28px;
}

.why-floating-box h4{
    color:#fff;

    font-size:28px;
    margin-bottom:5px;
}

.why-floating-box p{
    color:#d8e4ea;

    font-size:14px;
}

/* =========================
   RIGHT SIDE
========================= */

.why-course-right{
    display:flex;
    flex-direction:column;
    gap:24px;
}

/* CARD */
.why-course-card{
    display:flex;
    gap:24px;

    padding:30px;

    border-radius:30px;

    background:#f7fafc;

    transition:0.4s ease;

    box-shadow:
    0 10px 30px rgb(0 0 0 / 14%);
}

.why-course-card:hover{
    transform:translateY(-6px);

    background:#032E49;
}

.why-course-card:hover h3,
.why-course-card:hover p{
    color:#fff;
}

/* ACTIVE */
.active-card{
    background:#032E49;
}

.active-card h3,
.active-card p{
    color:#fff !important;
}

/* ICON */
.why-course-icon{
    width:80px;
    height:80px;

    min-width:80px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:30px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* TEXT */
.why-course-content h3{
    color:#032E49;

    font-size:30px;

    margin-bottom:14px;

    transition:0.4s ease;
}

.why-course-content p{
    color:#5d6c77;

    font-size:16px;
    line-height:1.9;

    transition:0.4s ease;
}

/* =========================
   STATS
========================= */

.why-course-stats{
    position:relative;
    z-index:2;

    margin-top:80px;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.why-stat-item{
    padding:35px 25px;

    border-radius:30px;

    background:#032E49;

    text-align:center;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(3,46,73,0.12);
}

.why-stat-item:hover{
    transform:translateY(-6px);
}

.why-stat-item h3{
    color:#3BE79B;

    font-size:52px;

    margin-bottom:12px;
}

.why-stat-item p{
    color:#fff;

    font-size:16px;
    font-weight:600;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .why-course-wrapper{
        grid-template-columns:1fr;
    }

    .why-course-image-wrap{
        height:520px;
    }

    .why-course-stats{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .why-course-section{
        padding:90px 20px;
    }

    .why-course-header h2{
        font-size:38px;
    }

    .why-course-header p{
        font-size:16px;
    }

    .why-course-card{
        flex-direction:column;
        padding:24px;
    }

    .why-course-content h3{
        font-size:24px;
    }

    .why-course-image-wrap{
        height:400px;
    }

    .why-floating-box{
        left:20px;
        bottom:20px;
        padding:18px;
    }

    .why-floating-box h4{
        font-size:22px;
    }

    .why-course-stats{
        grid-template-columns:1fr;
    }

    .why-stat-item h3{
        font-size:42px;
    }
}




/* =========================
   PRICING HERO SECTION
========================= */

.pricing-hero-section{
    position: relative;
    min-height: 100vh;
    overflow: hidden;

    display:flex;
    align-items:center;

    padding: 120px 20px;

    background:#032E49;
}

/* =========================
   BACKGROUND
========================= */

.pricing-hero-bg{
    position:absolute;
    inset:0;
    z-index:1;
}

.pricing-hero-bg img{
    width:100%;
    height:100%;

    object-fit:cover;
}

/* =========================
   OVERLAY
========================= */

.pricing-hero-overlay{
    position:absolute;
    inset:0;
    z-index:2;

    background:
    linear-gradient(
        90deg,
        rgba(3,46,73,0.96) 0%,
        rgba(3,46,73,0.92) 38%,
        rgba(3,46,73,0.65) 72%,
        rgba(3,46,73,0.35) 100%
    );
}

/* =========================
   GLOW
========================= */

.pricing-hero-glow{
    position:absolute;

    width:650px;
    height:650px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.16),
        transparent 70%
    );

    top:-220px;
    right:-120px;

    z-index:2;
}

/* =========================
   WRAPPER
========================= */

.pricing-hero-wrapper{
    position:relative;
    z-index:5;

    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:60px;
    align-items:center;
}

/* =========================
   CONTENT
========================= */

.pricing-hero-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.25);

    backdrop-filter: blur(10px);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:28px;
}

.pricing-hero-content h1{
    color:#fff;

    font-size:72px;
    line-height:1.05;

    margin-bottom:28px;

    font-weight:800;

    max-width:760px;
}

.pricing-hero-content h1 span{
    color:#3BE79B;
}

.pricing-hero-content p{
    max-width:650px;

    color:#d9e4ec;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   BUTTONS
========================= */

.pricing-hero-buttons{
    display:flex;
    gap:18px;

    margin-top:40px;

    flex-wrap:wrap;
}

/* PRIMARY BTN */
.pricing-primary-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:18px 34px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #20c879
    );

    color:#032E49;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.28);
}

.pricing-primary-btn:hover{
    transform:translateY(-5px);

    box-shadow:
    0 28px 60px rgba(59,231,155,0.35);
}

/* OUTLINE BTN */
.pricing-outline-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:18px 34px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.12);

    backdrop-filter: blur(10px);

    color:#fff;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;
}

.pricing-outline-btn:hover{
    background:#fff;
    color:#032E49;

    transform:translateY(-5px);
}

/* =========================
   STATS
========================= */

.pricing-hero-stats{
    display:flex;
    gap:20px;

    margin-top:55px;

    flex-wrap:wrap;
}

.pricing-stat-item{
    min-width:190px;

    padding:30px 25px;

    border-radius:24px;

    background:
    rgba(255,255,255,0.07);

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(12px);

    transition:0.4s ease;
}

.pricing-stat-item:hover{
    transform:translateY(-5px);

    border-color:
    rgba(59,231,155,0.35);
}

.pricing-stat-item h3{
    color:#3BE79B;

    font-size:44px;

    margin-bottom:10px;
}

.pricing-stat-item p{
    color:#fff;

    font-size:15px;
}

/* =========================
   HERO CARD
========================= */

.pricing-hero-card{
    position:relative;
    padding:35px;
    border-radius:36px;
    background:
    rgba(255,255,255,0.08);
    border:
    1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(16px);
    box-shadow:
    0 35px 80px rgba(0,0,0,0.35);
}

/* TOP */
.hero-card-top{
    margin-bottom:30px;
}

.hero-card-badge{
    display:inline-block;

    padding:9px 18px;

    border-radius:50px;

    background:#3BE79B;

    color:#032E49;

    font-size:13px;
    font-weight:700;

    margin-bottom:20px;
}

.hero-card-top h3{
    color:#fff;

    font-size:38px;
    line-height:1.3;

    margin-bottom:18px;
}

.hero-card-top p{
    color:#d9e4ec;

    line-height:1.9;
}

/* =========================
   PRICE BOX
========================= */

.hero-price-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    padding:28px;

    border-radius:28px;

    background:
    rgba(59,231,155,0.10);

    margin-bottom:30px;
}

/* LEFT */
.hero-price-left h2{
    color:#3BE79B;

    font-size:72px;
    line-height:1;

    margin-bottom:8px;
}

.hero-price-left span{
    color:#d9e4ec;

    font-size:15px;
}

/* RIGHT */
.hero-price-right{
    width:90px;
    height:90px;

    border-radius:28px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:36px;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.22);
}

/* =========================
   FEATURES
========================= */

.hero-feature-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* ITEM */
.hero-feature-item{
    display:flex;
    align-items:center;
    gap:14px;

    padding:16px 18px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.05);

    transition:0.4s ease;
}

.hero-feature-item:hover{
    background:
    rgba(59,231,155,0.12);
}

.hero-feature-item i{
    color:#3BE79B;

    font-size:16px;
}

.hero-feature-item span{
    color:#fff;

    font-size:15px;
    font-weight:600;
}

/* =========================
   BUTTON
========================= */

.hero-card-btn{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;

    margin-top:35px;

    padding:18px 20px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22ca7d
    );

    color:#032E49;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.28);
}

.hero-card-btn:hover{
    transform:translateY(-5px);

    box-shadow:
    0 28px 60px rgba(59,231,155,0.35);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .pricing-hero-content h1{
        font-size:58px;
    }
}

@media(max-width:992px){

    .pricing-hero-section{
        min-height:auto;
    }

    .pricing-hero-wrapper{
        grid-template-columns:1fr;
    }

    .pricing-hero-card{
        max-width:700px;
    }

    .pricing-hero-content h1{
        font-size:48px;
    }
}

@media(max-width:768px){

    .pricing-hero-section{
        padding:90px 20px;
    }

    .pricing-hero-content h1{
        font-size:38px;
    }

    .pricing-hero-content p{
        font-size:16px;
    }

    .pricing-hero-buttons{
        flex-direction:column;
    }

    .pricing-primary-btn,
    .pricing-outline-btn{
        width:100%;
    }

    .pricing-stat-item{
        width:100%;
    }

    .hero-card-top h3{
        font-size:30px;
    }

    .hero-price-left h2{
        font-size:56px;
    }

    .hero-price-box{
        flex-direction:column;
        align-items:flex-start;
    }
}

/* =========================
   PRICING PACKAGES SECTION
========================= */

.pricing-packages-section{
    position: relative;
    padding: 120px 20px;
    background: #fff;
    overflow: hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.pricing-packages-glow{
    position:absolute;
    border-radius:50%;
}

.glow-left{
    width:520px;
    height:520px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    top:-180px;
    left:-180px;
}

.glow-right{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.08),
        transparent 70%
    );

    right:-120px;
    bottom:-120px;
}

/* =========================
   HEADER
========================= */

.pricing-packages-header{
    position:relative;
    z-index:2;

    text-align:center;

    max-width:850px;
    margin:auto;
    margin-bottom:80px;
}

.pricing-packages-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:#032E49;

    border:
    1px solid rgba(59,231,155,0.25);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

.pricing-packages-header h2{
    color:#032E49;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.pricing-packages-header h2 span{
    color:#3BE79B;
}

.pricing-packages-header p{
    color:#5d6c77;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   GRID
========================= */

.pricing-packages-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
}

/* =========================
   CARD
========================= */

.pricing-package-card{
    position:relative;

    padding:40px 35px;

    border-radius:36px;

    background:#fff;

    border:
    1px solid rgba(3,46,73,0.08);

    box-shadow:
    0 25px 60px rgba(0,0,0,0.06);

    transition:0.4s ease;

    display:flex;
    flex-direction:column;
}

.pricing-package-card:hover{
    transform:translateY(-10px);

    box-shadow:
    0 35px 80px rgba(0,0,0,0.10);
}

/* FEATURED */
.featured-package{
    background:#032E49;

    border:
    1px solid rgba(59,231,155,0.25);

    transform:scale(1.04);
}

/* BADGE */
.featured-package-badge{
    position:absolute;

    top:-16px;
    right:30px;

    padding:10px 18px;

    border-radius:50px;

    background:#3BE79B;

    color:#032E49;

    font-size:13px;
    font-weight:700;

    box-shadow:
    0 15px 35px rgba(59,231,155,0.25);
}

/* =========================
   TOP
========================= */

.package-top{
    margin-bottom:35px;
}

/* TAG */
.package-tag{
    display:inline-block;

    padding:8px 16px;

    border-radius:50px;

    background:#032E49;

    color:#3BE79B;

    font-size:13px;
    font-weight:700;

    margin-bottom:20px;
}

.featured-tag{
    background:#3BE79B;
    color:#032E49;
}

/* TITLE */
.package-top h3{
    color:#032E49;

    font-size:34px;
    line-height:1.3;

    margin-bottom:18px;
}

.featured-package .package-top h3{
    color:#fff;
}

/* TEXT */
.package-top p{
    color:#5d6c77;

    font-size:16px;
    line-height:1.9;
}

.featured-package .package-top p{
    color:#d9e4ec;
}

/* =========================
   PRICE
========================= */

.package-price{
    margin-bottom:35px;
}

.package-price h2{
    color:#3BE79B;

    font-size:72px;
    line-height:1;

    margin-bottom:10px;
}

.package-price span{
    color:#5d6c77;

    font-size:15px;
}

.featured-package .package-price span{
    color:#d9e4ec;
}

/* =========================
   FEATURES
========================= */

.package-features{
    display:flex;
    flex-direction:column;
    gap:18px;

    flex:1;
}

/* ITEM */
.package-feature-item{
    display:flex;
    align-items:center;
    gap:14px;

    padding:16px 18px;

    border-radius:18px;

    background:#f7fafc;

    transition:0.4s ease;
}

.package-feature-item:hover{
    background:
    rgba(59,231,155,0.12);
}

.featured-package .package-feature-item{
    background:
    rgba(255,255,255,0.05);
}

.featured-package .package-feature-item:hover{
    background:
    rgba(59,231,155,0.12);
}

.package-feature-item i{
    color:#3BE79B;

    font-size:16px;
}

.package-feature-item span{
    color:#032E49;

    font-size:15px;
    font-weight:600;
}

.featured-package .package-feature-item span{
    color:#fff;
}

/* =========================
   BUTTON
========================= */

.package-btn{
    display:flex;
    align-items:center;
    justify-content:center;

    margin-top:35px;

    width:100%;

    padding:18px 20px;

    border-radius:18px;

    background:#032E49;

    color:#fff;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;
}

.package-btn:hover{
    background:#3BE79B;

    color:#032E49;

    transform:translateY(-4px);
}

/* FEATURED BUTTON */
.featured-package-btn{
    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    color:#032E49;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.25);
}

.featured-package-btn:hover{
    background:#fff;
    color:#032E49;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .pricing-packages-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .featured-package{
        transform:none;
    }
}

@media(max-width:768px){

    .pricing-packages-section{
        padding:90px 20px;
    }

    .pricing-packages-header h2{
        font-size:38px;
    }

    .pricing-packages-header p{
        font-size:16px;
    }

    .pricing-packages-grid{
        grid-template-columns:1fr;
    }

    .pricing-package-card{
        padding:32px 24px;
    }

    .package-top h3{
        font-size:28px;
    }

    .package-price h2{
        font-size:58px;
    }
}


/* =========================
   COMPARISON TABLE SECTION
========================= */

.comparison-section{
    position: relative;
    padding: 120px 20px;
    background: #032E49;
    overflow: hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.comparison-glow{
    position:absolute;
    border-radius:50%;
}

.comparison-glow-1{
    width:550px;
    height:550px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.14),
        transparent 70%
    );

    top:-220px;
    right:-180px;
}

.comparison-glow-2{
    width:450px;
    height:450px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    left:-140px;
    bottom:-180px;
}

/* =========================
   HEADER
========================= */

.comparison-header{
    position:relative;
    z-index:2;

    text-align:center;

    max-width:850px;
    margin:auto;
    margin-bottom:80px;
}

.comparison-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.25);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

.comparison-header h2{
    color:#fff;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.comparison-header h2 span{
    color:#3BE79B;
}

.comparison-header p{
    color:#d9e4ec;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   TABLE WRAPPER
========================= */

.comparison-table-wrapper{
    position:relative;
    z-index:2;

    overflow-x:auto;

    border-radius:36px;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(14px);

    box-shadow:
    0 30px 70px rgba(0,0,0,0.20);
}

/* =========================
   TABLE
========================= */

.comparison-table{
    width:100%;

    border-collapse:collapse;

    min-width:1000px;
}

/* =========================
   TABLE HEAD
========================= */

.comparison-table thead{
    background:
    rgba(255,255,255,0.04);
}

.comparison-table th{
    padding:35px 25px;

    text-align:center;

    border-bottom:
    1px solid rgba(255,255,255,0.08);
}

/* FEATURE COLUMN */
.feature-column{
    text-align:left !important;

    color:#fff;

    font-size:22px;
}

/* =========================
   PLAN
========================= */

.table-plan{
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* TAG */
.table-plan-tag{
    display:inline-block;

    padding:8px 16px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    color:#3BE79B;

    font-size:13px;
    font-weight:700;

    margin-bottom:18px;
}

/* ACTIVE TAG */
.active-tag{
    background:#3BE79B;
    color:#032E49;
}

/* TITLE */
.table-plan h3{
    color:#fff;

    font-size:34px;

    margin-bottom:10px;
}

/* PRICE */
.table-plan p{
    color:#3BE79B;

    font-size:22px;
    font-weight:700;
}

/* =========================
   FEATURED COLUMN
========================= */

.featured-column{
    background:
    rgba(59,231,155,0.08);
}

.featured-column-cell{
    background:
    rgba(59,231,155,0.05);
}

/* =========================
   TABLE BODY
========================= */

.comparison-table tbody tr{
    transition:0.3s ease;
}

.comparison-table tbody tr:hover{
    background:
    rgba(255,255,255,0.03);
}

/* TD */
.comparison-table td{
    padding:24px 25px;

    text-align:center;

    border-bottom:
    1px solid rgba(255,255,255,0.08);

    color:#fff;

    font-size:16px;
}

/* FEATURE NAME */
.feature-name{
    text-align:left !important;

    color:#fff;

    font-weight:600;
}

/* ICONS */
.green-icon{
    color:#3BE79B;

    font-size:18px;
}

.red-icon{
    color:#ff5f5f;

    font-size:18px;
}

/* =========================
   BUTTON ROW
========================= */

.table-btn-row td{
    padding:35px 25px;
}

/* BTN */
.table-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:16px 26px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.12);

    color:#fff;

    text-decoration:none;

    font-size:15px;
    font-weight:700;

    transition:0.4s ease;
}

.table-btn:hover{
    background:#fff;

    color:#032E49;

    transform:translateY(-4px);
}

/* FEATURED BTN */
.featured-table-btn{
    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    border:none;

    color:#032E49;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.22);
}

.featured-table-btn:hover{
    background:#fff;
    color:#032E49;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

    .comparison-section{
        padding:90px 20px;
    }

    .comparison-header h2{
        font-size:38px;
    }

    .comparison-header p{
        font-size:16px;
    }

    .comparison-table th,
    .comparison-table td{
        padding:20px 18px;
    }

    .table-plan h3{
        font-size:28px;
    }

    .feature-column{
        font-size:18px;
    }
}


/* =========================
   WHAT'S INCLUDED SECTION
========================= */

.whats-included-section{
    position: relative;
    padding: 120px 20px;
    background: #fff;
    overflow: hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.included-glow{
    position:absolute;
    border-radius:50%;
}

.included-glow-1{
    width:520px;
    height:520px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    top:-180px;
    right:-150px;
}

.included-glow-2{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.08),
        transparent 70%
    );

    left:-140px;
    bottom:-140px;
}

/* =========================
   HEADER
========================= */

.included-header{
    position:relative;
    z-index:2;

    text-align:center;

    max-width:850px;
    margin:auto;
    margin-bottom:80px;
}

.included-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.25);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

.included-header h2{
    color:#032E49;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.included-header h2 span{
    color:#3BE79B;
}

.included-header p{
    color:#5d6c77;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   WRAPPER
========================= */

.included-wrapper{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:0.95fr 1.05fr;
    gap:60px;
    align-items:center;
}

/* =========================
   IMAGE
========================= */

.included-image-box{
    position:relative;

    height:450px;

    border-radius:35px;
    overflow:hidden;

    box-shadow:
    0 35px 80px rgba(0,0,0,0.16);
}

.included-image-box img{
    width:100%;
    height:100%;

    object-fit:cover;
    display:block;
}

/* OVERLAY */
.included-image-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(3,46,73,0.85),
        rgba(3,46,73,0.12)
    );
}

/* FLOATING CARD */
.included-floating-card{
    position:absolute;

    left:30px;
    bottom:30px;

    z-index:5;

    display:flex;
    align-items:center;
    gap:18px;

    padding:22px 24px;

    border-radius:24px;

    background:
    rgba(255,255,255,0.12);

    border:
    1px solid rgba(255,255,255,0.15);

    backdrop-filter: blur(14px);
}

/* ICON */
.included-floating-icon{
    width:70px;
    height:70px;

    border-radius:22px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:28px;
}

.included-floating-card h4{
    color:#fff;

    font-size:28px;
    margin-bottom:6px;
}

.included-floating-card p{
    color:#d8e4ea;

    font-size:14px;
}

/* =========================
   RIGHT SIDE
========================= */

.included-right{
    display:flex;
    flex-direction:column;
    gap:24px;
}

/* CARD */
.included-card{
    display:flex;
    gap:24px;

    padding:30px;

    border-radius:30px;

    background:#f7fafc;

    transition:0.4s ease;

    box-shadow:
    0 10px 30px rgba(0,0,0,18%);
}

.included-card:hover{
    transform:translateY(-6px);

    background:#032E49;
}

.included-card:hover h3,
.included-card:hover p{
    color:#fff;
}

/* ACTIVE */
.active-included-card{
    background:#032E49;
}

.active-included-card h3,
.active-included-card p{
    color:#fff !important;
}

/* ICON */
.included-icon{
    width:80px;
    height:80px;

    min-width:80px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:30px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* CONTENT */
.included-content h3{
    color:#032E49;

    font-size:30px;

    margin-bottom:14px;

    transition:0.4s ease;
}

.included-content p{
    color:#5d6c77;

    font-size:16px;
    line-height:1.9;

    transition:0.4s ease;
}

/* =========================
   VALUE BOX
========================= */

.included-value-box{
    position:relative;
    z-index:2;

    margin-top:80px;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

/* ITEM */
.included-value-item{
    padding:35px 30px;

    border-radius:30px;

    background:#032E49;

    text-align:center;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(3,46,73,0.12);
}

.included-value-item:hover{
    transform:translateY(-6px);
}

.included-value-item h3{
    color:#3BE79B;

    font-size:58px;

    margin-bottom:14px;
}

.included-value-item p{
    color:#fff;

    font-size:16px;
    line-height:1.8;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .included-wrapper{
        grid-template-columns:1fr;
    }

    .included-image-box{
        height:520px;
    }

    .included-value-box{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .whats-included-section{
        padding:90px 20px;
    }

    .included-header h2{
        font-size:38px;
    }

    .included-header p{
        font-size:16px;
    }

    .included-card{
        flex-direction:column;
        padding:24px;
    }

    .included-content h3{
        font-size:24px;
    }

    .included-image-box{
        height:420px;
    }

    .included-floating-card{
        left:20px;
        bottom:20px;

        padding:18px;
    }

    .included-floating-card h4{
        font-size:22px;
    }

    .included-value-item h3{
        font-size:46px;
    }
}


/* =========================
   DISCOUNTS SECTION
========================= */

.discount-section{
    position: relative;
    padding: 120px 20px;
    overflow: hidden;

    background:#032E49;
}

/* =========================
   BACKGROUND
========================= */

.discount-bg{
    position:absolute;
    inset:0;
    z-index:1;
}

.discount-bg img{
    width:100%;
    height:100%;

    object-fit:cover;
}

/* =========================
   OVERLAY
========================= */

.discount-overlay{
    position:absolute;
    inset:0;
    z-index:2;

    background:
    linear-gradient(
        90deg,
        rgba(3,46,73,0.95) 0%,
        rgba(3,46,73,0.90) 40%,
        rgba(3,46,73,0.75) 72%,
        rgba(3,46,73,0.60) 100%
    );
}

/* =========================
   GLOW
========================= */

.discount-glow{
    position:absolute;

    width:650px;
    height:650px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.18),
        transparent 70%
    );

    top:-220px;
    right:-120px;

    z-index:2;
}

/* =========================
   WRAPPER
========================= */

.discount-wrapper{
    position:relative;
    z-index:5;

    display:grid;
    grid-template-columns:1fr 0.9fr;
    gap:60px;
    align-items:center;
}

/* =========================
   CONTENT
========================= */

.discount-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.25);

    backdrop-filter: blur(10px);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

.discount-content h2{
    color:#fff;

    font-size:64px;
    line-height:1.08;

    margin-bottom:28px;

    max-width:720px;
}

.discount-content h2 span{
    color:#3BE79B;
}

.discount-content p{
    color:#d9e4ec;

    font-size:18px;
    line-height:1.9;

    max-width:650px;
}

/* =========================
   FEATURES
========================= */

.discount-features{
    display:flex;
    flex-direction:column;
    gap:18px;

    margin-top:35px;
}

/* ITEM */
.discount-feature-item{
    display:flex;
    align-items:center;
    gap:14px;

    padding:18px 20px;

    border-radius:20px;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(12px);

    transition:0.4s ease;

    max-width:520px;
}

.discount-feature-item:hover{
    background:
    rgba(59,231,155,0.12);

    transform:translateX(6px);
}

.discount-feature-item i{
    color:#3BE79B;

    font-size:18px;
}

.discount-feature-item span{
    color:#fff;

    font-size:15px;
    font-weight:600;
}

/* =========================
   BUTTONS
========================= */

.discount-buttons{
    display:flex;
    gap:18px;

    margin-top:40px;

    flex-wrap:wrap;
}

/* PRIMARY BTN */
.discount-primary-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:18px 34px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #20c879
    );

    color:#032E49;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.28);
}

.discount-primary-btn:hover{
    transform:translateY(-5px);

    box-shadow:
    0 28px 60px rgba(59,231,155,0.35);
}

/* OUTLINE BTN */
.discount-outline-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:18px 34px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.12);

    color:#fff;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;
}

.discount-outline-btn:hover{
    background:#fff;
    color:#032E49;

    transform:translateY(-5px);
}

/* =========================
   CARD
========================= */

.discount-card{
    position:relative;

    padding:35px;

    border-radius:36px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.12);

    backdrop-filter: blur(16px);

    box-shadow:
    0 35px 80px rgba(0,0,0,0.35);
}

/* TOP */
.discount-card-top{
    margin-bottom:35px;
}

.offer-badge{
    display:inline-block;

    padding:9px 18px;

    border-radius:50px;

    background:#3BE79B;

    color:#032E49;

    font-size:13px;
    font-weight:700;

    margin-bottom:20px;
}

.discount-card-top h3{
    color:#fff;

    font-size:48px;
    line-height:1.2;

    margin-bottom:18px;
}

.discount-card-top h3 span{
    color:#3BE79B;
}

.discount-card-top p{
    color:#d9e4ec;

    line-height:1.9;
}

/* =========================
   OFFER ITEMS
========================= */

.discount-offers{
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* ITEM */
.discount-offer-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    padding:20px;

    border-radius:24px;

    background:
    rgba(255,255,255,0.05);

    transition:0.4s ease;
}

.discount-offer-item:hover{
    background:
    rgba(59,231,155,0.12);

    transform:translateY(-4px);
}

/* LEFT */
.discount-offer-left h4{
    color:#fff;

    font-size:24px;

    margin-bottom:8px;
}

.discount-offer-left p{
    color:#d9e4ec;

    font-size:15px;
    line-height:1.7;
}

/* PERCENT */
.discount-percent{
    width:90px;
    height:90px;

    min-width:90px;

    border-radius:28px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:28px;
    font-weight:800;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.22);
}

/* =========================
   BUTTON
========================= */

.discount-card-btn{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;

    margin-top:35px;

    padding:18px 20px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    color:#032E49;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.28);
}

.discount-card-btn:hover{
    transform:translateY(-5px);

    box-shadow:
    0 28px 60px rgba(59,231,155,0.35);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .discount-wrapper{
        grid-template-columns:1fr;
    }

    .discount-content h2{
        font-size:54px;
    }
}

@media(max-width:768px){

    .discount-section{
        padding:90px 20px;
    }

    .discount-content h2{
        font-size:38px;
    }

    .discount-content p{
        font-size:16px;
    }

    .discount-buttons{
        flex-direction:column;
    }

    .discount-primary-btn,
    .discount-outline-btn{
        width:100%;
    }

    .discount-card{
        padding:28px 24px;
    }

    .discount-card-top h3{
        font-size:34px;
    }

    .discount-offer-item{
        flex-direction:column;
        align-items:flex-start;
    }
}


/* =========================
   BOOKING HERO SECTION
========================= */

.booking-hero-section{
    position: relative;
    min-height: 100vh;

    display:flex;
    align-items:center;

    overflow:hidden;

    padding:120px 20px;

    background:#032E49;
}

/* =========================
   BACKGROUND
========================= */

.booking-hero-bg{
    position:absolute;
    inset:0;
    z-index:1;
}

.booking-hero-bg img{
    width:100%;
    height:100%;

    object-fit:cover;
}

/* =========================
   OVERLAY
========================= */

.booking-hero-overlay{
    position:absolute;
    inset:0;
    z-index:2;

    background:
    linear-gradient(
        90deg,
        rgba(3,46,73,0.96) 0%,
        rgba(3,46,73,0.92) 38%,
        rgba(3,46,73,0.68) 72%,
        rgba(3,46,73,0.40) 100%
    );
}

/* =========================
   GLOW
========================= */

.booking-hero-glow{
    position:absolute;

    width:650px;
    height:650px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.16),
        transparent 70%
    );

    top:-220px;
    right:-120px;

    z-index:2;
}

/* =========================
   WRAPPER
========================= */

.booking-hero-wrapper{
    position:relative;
    z-index:5;

    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:60px;
    align-items:center;
}

/* =========================
   CONTENT
========================= */

.booking-hero-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.25);

    backdrop-filter: blur(10px);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:28px;
}

.booking-hero-content h1{
    color:#fff;

    font-size:72px;
    line-height:1.05;

    margin-bottom:28px;

    font-weight:800;

    max-width:760px;
}

.booking-hero-content h1 span{
    color:#3BE79B;
}

.booking-hero-content p{
    max-width:650px;

    color:#d9e4ec;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   BUTTONS
========================= */

.booking-hero-buttons{
    display:flex;
    gap:18px;

    margin-top:40px;

    flex-wrap:wrap;
}

/* PRIMARY BTN */
.booking-primary-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:18px 34px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #20c879
    );

    color:#032E49;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.28);
}

.booking-primary-btn:hover{
    transform:translateY(-5px);

    box-shadow:
    0 28px 60px rgba(59,231,155,0.35);
}

/* OUTLINE BTN */
.booking-outline-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:18px 34px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.12);

    backdrop-filter: blur(10px);

    color:#fff;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;
}

.booking-outline-btn:hover{
    background:#fff;
    color:#032E49;

    transform:translateY(-5px);
}

/* =========================
   STATS
========================= */

.booking-hero-stats{
    display:flex;
    gap:20px;

    margin-top:55px;

    flex-wrap:wrap;
}

.booking-stat-item{
    min-width:190px;

    padding:30px 25px;

    border-radius:24px;

    background:
    rgba(255,255,255,0.07);

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(12px);

    transition:0.4s ease;
}

.booking-stat-item:hover{
    transform:translateY(-5px);

    border-color:
    rgba(59,231,155,0.35);
}

.booking-stat-item h3{
    color:#3BE79B;

    font-size:44px;

    margin-bottom:10px;
}

.booking-stat-item p{
    color:#fff;

    font-size:15px;
}

/* =========================
   HERO CARD
========================= */

.booking-hero-card{
    position:relative;

    padding:35px;

    border-radius:36px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.12);

    backdrop-filter: blur(16px);

    box-shadow:
    0 35px 80px rgba(0,0,0,0.35);
}

/* TOP */
.booking-card-top{
    margin-bottom:35px;
}

.booking-card-badge{
    display:inline-block;

    padding:9px 18px;

    border-radius:50px;

    background:#3BE79B;

    color:#032E49;

    font-size:13px;
    font-weight:700;

    margin-bottom:20px;
}

.booking-card-top h3{
    color:#fff;

    font-size:42px;
    line-height:1.2;

    margin-bottom:18px;
}

.booking-card-top p{
    color:#d9e4ec;

    line-height:1.9;
}

/* =========================
   STEPS
========================= */

.booking-steps{
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* ITEM */
.booking-step-item{
    display:flex;
    gap:18px;

    padding:22px;

    border-radius:24px;

    background:
    rgba(255,255,255,0.05);

    transition:0.4s ease;
}

.booking-step-item:hover{
    background:
    rgba(59,231,155,0.12);

    transform:translateY(-4px);
}

/* ACTIVE */
.active-step{
    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.22);
}

/* NUMBER */
.booking-step-number{
    width:65px;
    height:65px;

    min-width:65px;

    border-radius:20px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:24px;
    font-weight:800;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* CONTENT */
.booking-step-content h4{
    color:#fff;

    font-size:24px;

    margin-bottom:8px;
}

.booking-step-content p{
    color:#d9e4ec;

    font-size:15px;
    line-height:1.8;
}

/* =========================
   BUTTON
========================= */

.booking-card-btn{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;

    margin-top:35px;

    padding:18px 20px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    color:#032E49;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.28);
}

.booking-card-btn:hover{
    transform:translateY(-5px);

    box-shadow:
    0 28px 60px rgba(59,231,155,0.35);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .booking-hero-content h1{
        font-size:58px;
    }
}

@media(max-width:992px){

    .booking-hero-section{
        min-height:auto;
    }

    .booking-hero-wrapper{
        grid-template-columns:1fr;
    }

    .booking-hero-card{
        max-width:700px;
    }

    .booking-hero-content h1{
        font-size:48px;
    }
}

@media(max-width:768px){

    .booking-hero-section{
        padding:90px 20px;
    }

    .booking-hero-content h1{
        font-size:38px;
    }

    .booking-hero-content p{
        font-size:16px;
    }

    .booking-hero-buttons{
        flex-direction:column;
    }

    .booking-primary-btn,
    .booking-outline-btn{
        width:100%;
    }

    .booking-stat-item{
        width:100%;
    }

    .booking-card-top h3{
        font-size:32px;
    }

    .booking-step-item{
        flex-direction:column;
    }
}


/* =========================
   COURSE SELECTION SECTION
========================= */

.course-selection-section{
    position: relative;
    padding:120px 20px;
    background:
    radial-gradient(
        circle at top left,
        rgba(59,231,155,0.05),
        transparent 25%
    ),
    linear-gradient(
        180deg,
        #F7FBFA,
        #EDF7F3
    );
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.course-selection-glow{
    position:absolute;
    border-radius:50%;
}

.glow-left{
    width:520px;
    height:520px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    top:-180px;
    left:-180px;
}

.glow-right{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.08),
        transparent 70%
    );

    right:-120px;
    bottom:-120px;
}

/* =========================
   HEADER
========================= */

.course-selection-header{
    position:relative;
    z-index:2;

    text-align:center;

    max-width:850px;
    margin:auto;
    margin-bottom:80px;
}

.course-selection-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.25);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

.course-selection-header h2{
    color:#032E49;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.course-selection-header h2 span{
    color:#3BE79B;
}

.course-selection-header p{
    color:#5d6c77;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   GRID
========================= */

.course-selection-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
}

/* =========================
   CARD
========================= */

.selection-card{
    position:relative;

    padding:35px;

    border-radius:36px;

    background:#fff;

    border:
    1px solid rgba(3,46,73,0.08);

    box-shadow:
    0 25px 60px rgba(0,0,0,0.06);

    transition:0.4s ease;

    display:flex;
    flex-direction:column;
}

.selection-card:hover{
    transform:translateY(-10px);

    box-shadow:
    0 35px 80px rgba(0,0,0,0.10);
}

/* ACTIVE */
.active-selection-card{
    background:#032E49;

    border:
    1px solid rgba(59,231,155,0.22);
}

.active-selection-card h3,
.active-selection-card p,
.active-selection-card .selection-price span{
    color:#fff !important;
}

/* =========================
   TOP
========================= */

.selection-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:30px;
}

/* BADGE */
.selection-badge{
    display:inline-block;

    padding:8px 16px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    color:#3BE79B;

    font-size:13px;
    font-weight:700;
}

/* ICON */
.selection-icon{
    width:78px;
    height:78px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:30px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* =========================
   CONTENT
========================= */

.selection-content h3{
    color:#032E49;

    font-size:32px;
    line-height:1.3;

    margin-bottom:18px;
}

.selection-content p{
    color:#5d6c77;

    font-size:16px;
    line-height:1.9;
}

/* =========================
   FEATURES
========================= */

.selection-features{
    display:flex;
    flex-direction:column;
    gap:16px;

    margin-top:30px;

    flex:1;
}

/* ITEM */
.selection-feature-item{
    display:flex;
    align-items:center;
    gap:14px;

    padding:16px 18px;

    border-radius:18px;

    background:#f7fafc;

    transition:0.4s ease;
}

.selection-feature-item:hover{
    background:
    rgba(59,231,155,0.12);
}

.active-selection-card .selection-feature-item{
    background:
    rgba(255,255,255,0.06);
}

.active-selection-card .selection-feature-item:hover{
    background:
    rgba(59,231,155,0.12);
}

.selection-feature-item i{
    color:#3BE79B;

    font-size:16px;
}

.selection-feature-item span{
    color:#032E49;

    font-size:15px;
    font-weight:600;
}

.active-selection-card .selection-feature-item span{
    color:#fff;
}

/* =========================
   FOOTER
========================= */

.selection-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-top:35px;
}

/* PRICE */
.selection-price span{
    color:#5d6c77;

    font-size:14px;
}

.selection-price h4{
    color:#3BE79B;

    font-size:42px;

    margin-top:4px;
}

/* BUTTON */
.selection-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:16px 24px;

    border-radius:18px;

    background:#032E49;

    color:#fff;

    text-decoration:none;

    font-size:15px;
    font-weight:700;

    transition:0.4s ease;
}

.selection-btn:hover{
    background:#3BE79B;

    color:#032E49;

    transform:translateY(-4px);
}

.active-selection-card .selection-btn{
    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    color:#032E49;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.25);
}

.active-selection-card .selection-btn:hover{
    background:#fff;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .course-selection-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .course-selection-section{
        padding:90px 20px;
    }

    .course-selection-header h2{
        font-size:38px;
    }

    .course-selection-header p{
        font-size:16px;
    }

    .course-selection-grid{
        grid-template-columns:1fr;
    }

    .selection-card{
        padding:28px 24px;
    }

    .selection-content h3{
        font-size:26px;
    }

    .selection-footer{
        flex-direction:column;
        align-items:flex-start;
    }

    .selection-btn{
        width:100%;
    }
}

/* =========================
   LESSON SCHEDULING SECTION
========================= */

.lesson-schedule-section{
    position:relative;
    padding:120px 20px;
    background:
    radial-gradient(
        circle at top left,
        rgba(59,231,155,0.08),
        transparent 28%
    ),
    linear-gradient(
        135deg,
        #031D2F,
        #04263C,
        #021521
    );
    min-height:100vh;
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.schedule-glow{
    position:absolute;
    border-radius:50%;
}

.schedule-glow-1{
    width:550px;
    height:550px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.15),
        transparent 70%
    );

    top:-220px;
    right:-180px;
}

.schedule-glow-2{
    width:450px;
    height:450px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    left:-140px;
    bottom:-180px;
}

/* =========================
   HEADER
========================= */

.schedule-header{
    position:relative;
    z-index:2;

    text-align:center;

    max-width:850px;
    margin:auto;
    margin-bottom:80px;
}

.schedule-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.25);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

.schedule-header h2{
    color:#fff;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.schedule-header h2 span{
    color:#3BE79B;
}

.schedule-header p{
    color:#d9e4ec;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   WRAPPER
========================= */

.schedule-wrapper{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
}

/* =========================
   CARDS
========================= */

.schedule-calendar-card,
.schedule-info-card,
.schedule-summary-card{
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:36px;
    box-shadow:
    0 30px 70px rgba(0,0,0,0.20);
}

/* =========================
   CALENDAR
========================= */

.schedule-calendar-card{
    padding:35px;
}

/* TOP */
.calendar-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:35px;
}

.calendar-top h3{
    color:#fff;

    font-size:32px;
}

.calendar-top span{
    color:#3BE79B;

    font-size:15px;
    font-weight:700;
}

/* DAYS */
.calendar-days{
    display:grid;
    grid-template-columns:repeat(7,1fr);

    gap:12px;

    margin-bottom:18px;
}

.calendar-days span{
    color:#d9e4ec;

    text-align:center;

    font-size:14px;
    font-weight:600;
}

/* DATES */
.calendar-dates{
    display:grid;
    grid-template-columns:repeat(7,1fr);

    gap:12px;
}

/* DATE */
.calendar-date{
    height:68px;

    border-radius:20px;

    background:
    rgba(255,255,255,0.05);

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;

    font-size:18px;
    font-weight:700;

    cursor:pointer;

    transition:0.4s ease;
}

.calendar-date:hover{
    background:
    rgba(59,231,155,0.14);

    transform:translateY(-4px);
}

/* ACTIVE */
.active-date{
    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    color:#032E49;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.25);
}

/* DISABLED */
.disabled-date{
    opacity:0.35;

    pointer-events:none;
}

/* =========================
   RIGHT SIDE
========================= */

.schedule-right{
    display:flex;
    flex-direction:column;
    gap:28px;
}

/* INFO CARD */
.schedule-info-card{
    padding:30px;
}

.schedule-info-badge{
    display:inline-block;

    padding:10px 18px;

    border-radius:50px;

    background:#3BE79B;

    color:#032E49;

    font-size:13px;
    font-weight:700;

    margin-bottom:20px;
}

.schedule-info-card h3{
    color:#fff;

    font-size:38px;

    margin-bottom:12px;
}

.schedule-info-card p{
    color:#d9e4ec;

    line-height:1.8;
}

/* =========================
   TIME GRID
========================= */

.schedule-time-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

/* ITEM */
.schedule-time-item{
    padding:28px;

    border-radius:28px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.10);

    backdrop-filter: blur(12px);

    transition:0.4s ease;

    cursor:pointer;
}

.schedule-time-item:hover{
    transform:translateY(-6px);

    background:
    rgba(59,231,155,0.12);
}

/* ACTIVE */
.active-time{
    background:
    rgba(59,231,155,0.14);

    border:
    1px solid rgba(59,231,155,0.25);
}

/* DISABLED */
.disabled-time{
    opacity:0.45;

    pointer-events:none;
}

/* PERIOD */
.time-period{
    display:inline-block;

    padding:7px 14px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.14);

    color:#3BE79B;

    font-size:12px;
    font-weight:700;

    margin-bottom:20px;
}

/* TIME */
.schedule-time-item h4{
    color:#fff;

    font-size:28px;

    margin-bottom:10px;
}

/* TEXT */
.schedule-time-item p{
    color:#d9e4ec;

    font-size:15px;
}

/* =========================
   SUMMARY CARD
========================= */

.schedule-summary-card{
    padding:35px;
}

/* TOP */
.schedule-summary-top{
    display:flex;
    align-items:center;
    gap:20px;

    margin-bottom:30px;
}

/* ICON */
.schedule-summary-icon{
    width:80px;
    height:80px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:30px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

.schedule-summary-top h4{
    color:#fff;

    font-size:28px;

    margin-bottom:6px;
}

.schedule-summary-top p{
    color:#d9e4ec;
}

/* DETAILS */
.schedule-summary-details{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* ITEM */
.schedule-summary-item{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:18px 20px;

    border-radius:20px;

    background:
    rgba(255,255,255,0.05);
}

.schedule-summary-item span{
    color:#d9e4ec;

    font-size:15px;
}

.schedule-summary-item strong{
    color:#fff;

    font-size:16px;
}

/* BUTTON */
.schedule-btn{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;

    margin-top:35px;

    padding:18px 20px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    color:#032E49;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.28);
}

.schedule-btn:hover{
    transform:translateY(-5px);

    box-shadow:
    0 28px 60px rgba(59,231,155,0.35);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .schedule-wrapper{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .lesson-schedule-section{
        padding:90px 20px;
    }

    .schedule-header h2{
        font-size:38px;
    }

    .schedule-header p{
        font-size:16px;
    }

    .schedule-calendar-card,
    .schedule-summary-card,
    .schedule-info-card{
        padding:28px 24px;
    }

    .calendar-top{
        flex-direction:column;
        gap:12px;
        align-items:flex-start;
    }

    .calendar-top h3{
        font-size:26px;
    }

    .calendar-date{
        height:58px;
        font-size:16px;
    }

    .schedule-time-grid{
        grid-template-columns:1fr;
    }

    .schedule-time-item h4{
        font-size:28px;
    }

    .schedule-summary-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .schedule-summary-item{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }
}

/* =========================
   STUDENT INFORMATION SECTION
========================= */

.student-info-section{
    position:relative;
    padding:120px 20px;
    background:#fff;
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.student-info-glow{
    position:absolute;
    border-radius:50%;
}

.glow-left{
    width:520px;
    height:520px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    top:-180px;
    left:-180px;
}

.glow-right{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.08),
        transparent 70%
    );

    right:-120px;
    bottom:-120px;
}

/* =========================
   HEADER
========================= */

.student-info-header{
    position:relative;
    z-index:2;

    text-align:center;

    max-width:850px;
    margin:auto;
    margin-bottom:80px;
}

.student-info-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.25);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

.student-info-header h2{
    color:#032E49;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.student-info-header h2 span{
    color:#3BE79B;
}

.student-info-header p{
    color:#5d6c77;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   WRAPPER
========================= */

.student-info-wrapper{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:35px;
}

/* =========================
   FORM CARD
========================= */

.student-form-card{
    padding:40px;

    border-radius:36px;

    background:#fff;

    border:
    1px solid rgba(3,46,73,0.08);

    box-shadow:
    0 25px 60px rgba(0,0,0,0.06);
}

/* TOP */
.student-form-top{
    margin-bottom:35px;
}

.student-form-badge{
    display:inline-block;

    padding:10px 18px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    color:#3BE79B;

    font-size:13px;
    font-weight:700;

    margin-bottom:20px;
}

.student-form-top h3{
    color:#032E49;

    font-size:42px;

    margin-bottom:14px;
}

.student-form-top p{
    color:#5d6c77;

    line-height:1.9;
}

/* =========================
   FORM
========================= */

.student-form{
    display:flex;
    flex-direction:column;
    gap:24px;
}

/* ROW */
.student-form-row{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
}

/* GROUP */
.student-form-group{
    display:flex;
    flex-direction:column;
}

/* LABEL */
.student-form-group label{
    color:#032E49;

    font-size:15px;
    font-weight:700;

    margin-bottom:12px;
}

/* INPUT */
.student-form-group input,
.student-form-group select,
.student-form-group textarea{
    width:100%;

    padding:18px 20px;

    border-radius:18px;

    border:
    1px solid rgba(3,46,73,0.10);

    background:#f7fafc;

    outline:none;

    color:#032E49;

    font-size:15px;

    transition:0.4s ease;
}

/* TEXTAREA */
.student-form-group textarea{
    min-height:160px;
    resize:none;
}

/* FOCUS */
.student-form-group input:focus,
.student-form-group select:focus,
.student-form-group textarea:focus{
    border-color:#3BE79B;

    background:#fff;

    box-shadow:
    0 0 0 4px rgba(59,231,155,0.12);
}

/* =========================
   CHECKBOX
========================= */

.student-checkbox{
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.student-checkbox input{
    margin-top:4px;
}

.student-checkbox label{
    color:#5d6c77;

    line-height:1.8;
}

/* =========================
   BUTTON
========================= */

.student-form-btn{
    width:100%;

    padding:20px;

    border:none;

    border-radius:20px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    color:#032E49;

    font-size:16px;
    font-weight:700;

    cursor:pointer;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.25);
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}

.student-form-btn:hover{
    transform:translateY(-5px);

    box-shadow:
    0 28px 60px rgba(59,231,155,0.35);
}

/* =========================
   RIGHT SIDE
========================= */

.student-info-right{
    display:flex;
    flex-direction:column;
    gap:30px;
}

/* SIDE CARD */
.student-side-card,
.student-contact-card{
    padding:35px;

    border-radius:36px;

    background:#032E49;

    box-shadow:
    0 25px 60px rgba(0,0,0,0.08);
}

/* ICON */
.student-side-icon{
    width:85px;
    height:85px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:32px;

    margin-bottom:28px;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.22);
}

/* TEXT */
.student-side-card h3,
.student-contact-card h4{
    color:#fff;

    font-size:34px;

    margin-bottom:18px;
}

.student-side-card p,
.student-contact-card p{
    color:#d9e4ec;

    line-height:1.9;
}

/* FEATURES */
.student-side-features{
    display:flex;
    flex-direction:column;
    gap:18px;

    margin-top:30px;
}

/* ITEM */
.student-side-item{
    display:flex;
    align-items:center;
    gap:14px;

    padding:18px 20px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.06);
}

.student-side-item i{
    color:#3BE79B;
}

.student-side-item span{
    color:#fff;

    font-size:15px;
    font-weight:600;
}

/* =========================
   CONTACT
========================= */

.student-contact-item{
    display:flex;
    align-items:center;
    gap:16px;

    margin-top:22px;

    padding:18px 20px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.06);
}

.student-contact-item i{
    color:#3BE79B;

    font-size:18px;
}

.student-contact-item span{
    color:#fff;

    font-size:15px;
    font-weight:600;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .student-info-wrapper{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .student-info-section{
        padding:90px 20px;
    }

    .student-info-header h2{
        font-size:38px;
    }

    .student-info-header p{
        font-size:16px;
    }

    .student-form-card,
    .student-side-card,
    .student-contact-card{
        padding:28px 24px;
    }

    .student-form-top h3{
        font-size:32px;
    }

    .student-side-card h3,
    .student-contact-card h4{
        font-size:28px;
    }

    .student-form-row{
        grid-template-columns:1fr;
    }
}


/* =========================
   PAYMENT OPTION SECTION
========================= */

.payment-option-section{
    position:relative;
    padding:120px 20px;
    background:
    radial-gradient(
        circle at top left,
        rgba(59,231,155,0.08),
        transparent 28%
    ),
    linear-gradient(
        135deg,
        #031D2F,
        #04263C,
        #021521
    );
    min-height:100vh;
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.payment-glow{
    position:absolute;
    border-radius:50%;
}

.payment-glow-1{
    width:550px;
    height:550px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.14),
        transparent 70%
    );

    top:-220px;
    right:-180px;
}

.payment-glow-2{
    width:450px;
    height:450px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    left:-140px;
    bottom:-180px;
}

/* =========================
   HEADER
========================= */

.payment-header{
    position:relative;
    z-index:2;

    text-align:center;

    max-width:850px;
    margin:auto;
    margin-bottom:80px;
}

.payment-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.25);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

.payment-header h2{
    color:#fff;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.payment-header h2 span{
    color:#3BE79B;
}

.payment-header p{
    color:#d9e4ec;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   WRAPPER
========================= */

.payment-wrapper{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:35px;
}

/* =========================
   CARDS
========================= */

.payment-card,
.booking-summary-card,
.payment-trust-card{
    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.12);

    border-radius:36px;

    backdrop-filter: blur(14px);

    box-shadow:
    0 30px 70px rgba(0,0,0,0.20);
}

/* =========================
   PAYMENT CARD
========================= */

.payment-card{
    padding:40px;
}

/* TOP */
.payment-card-top{
    margin-bottom:35px;
}

.payment-badge{
    display:inline-block;

    padding:10px 18px;

    border-radius:50px;

    background:#3BE79B;

    color:#032E49;

    font-size:13px;
    font-weight:700;

    margin-bottom:20px;
}

.payment-card-top h3{
    color:#fff;

    font-size:42px;

    margin-bottom:14px;
}

.payment-card-top p{
    color:#d9e4ec;

    line-height:1.9;
}

/* =========================
   METHODS
========================= */

.payment-methods{
    display:flex;
    flex-direction:column;
    gap:20px;

    margin-bottom:35px;
}

/* METHOD */
.payment-method{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    padding:24px;

    border-radius:28px;

    background:
    rgba(255,255,255,0.05);

    border:
    1px solid rgba(255,255,255,0.08);

    transition:0.4s ease;

    cursor:pointer;
}

.payment-method:hover{
    background:
    rgba(59,231,155,0.12);

    transform:translateY(-4px);
}

/* ACTIVE */
.active-payment{
    background:
    rgba(59,231,155,0.14);

    border:
    1px solid rgba(59,231,155,0.22);
}

/* LEFT */
.payment-method-left{
    display:flex;
    align-items:center;
    gap:18px;
}

/* ICON */
.payment-method-icon{
    width:72px;
    height:72px;

    border-radius:22px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:28px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* TEXT */
.payment-method-left h4{
    color:#fff;

    font-size:24px;

    margin-bottom:8px;
}

.payment-method-left p{
    color:#d9e4ec;

    font-size:15px;
    line-height:1.8;
}

/* CHECK */
.payment-check{
    width:40px;
    height:40px;

    border-radius:50%;

    background:#3BE79B;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:16px;
}

/* =========================
   FORM
========================= */

.payment-form{
    display:flex;
    flex-direction:column;
    gap:22px;
}

/* ROW */
.payment-form-row{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
}

.two-column{
    grid-template-columns:repeat(2,1fr);
}

/* GROUP */
.payment-group{
    display:flex;
    flex-direction:column;
}

/* LABEL */
.payment-group label{
    color:#fff;

    font-size:15px;
    font-weight:700;

    margin-bottom:12px;
}

/* INPUT */
.payment-group input{
    width:100%;

    padding:18px 20px;

    border-radius:18px;

    border:
    1px solid rgba(255,255,255,0.10);

    background:
    rgba(255,255,255,0.05);

    outline:none;

    color:#fff;

    font-size:15px;

    transition:0.4s ease;
}

.payment-group input:focus{
    border-color:#3BE79B;

    background:
    rgba(255,255,255,0.08);

    box-shadow:
    0 0 0 4px rgba(59,231,155,0.12);
}

/* =========================
   RIGHT
========================= */

.payment-right{
    display:flex;
    flex-direction:column;
    gap:30px;
}

/* SUMMARY */
.booking-summary-card{
    padding:35px;
}

/* TOP */
.booking-summary-top{
    display:flex;
    align-items:center;
    gap:20px;

    margin-bottom:30px;
}

/* ICON */
.booking-summary-icon{
    width:80px;
    height:80px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:30px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

.booking-summary-top h3{
    color:#fff;

    font-size:32px;

    margin-bottom:6px;
}

.booking-summary-top p{
    color:#d9e4ec;
}

/* DETAILS */
.booking-summary-details{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* ITEM */
.booking-summary-item{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:18px 20px;

    border-radius:20px;

    background:
    rgba(255,255,255,0.05);
}

.booking-summary-item span{
    color:#d9e4ec;

    font-size:15px;
}

.booking-summary-item strong{
    color:#fff;

    font-size:16px;
}

/* TOTAL */
.booking-total{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-top:30px;

    padding:24px;

    border-radius:24px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.18);
}

.booking-total span{
    color:#fff;

    font-size:16px;
    font-weight:600;
}

.booking-total h4{
    color:#3BE79B;

    font-size:42px;
}

/* BUTTON */
.confirm-booking-btn{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;

    margin-top:35px;

    padding:18px 20px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    color:#032E49;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.28);
}

.confirm-booking-btn:hover{
    transform:translateY(-5px);

    box-shadow:
    0 28px 60px rgba(59,231,155,0.35);
}

/* =========================
   TRUST CARD
========================= */

.payment-trust-card{
    padding:35px;

    text-align:center;
}

/* ICON */
.payment-trust-icon{
    width:90px;
    height:90px;

    margin:auto;
    margin-bottom:28px;

    border-radius:28px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:34px;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.22);
}

/* TEXT */
.payment-trust-card h4{
    color:#fff;

    font-size:30px;

    margin-bottom:16px;
}

.payment-trust-card p{
    color:#d9e4ec;

    line-height:1.9;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .payment-wrapper{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .payment-option-section{
        padding:90px 20px;
    }

    .payment-header h2{
        font-size:38px;
    }

    .payment-header p{
        font-size:16px;
    }

    .payment-card,
    .booking-summary-card,
    .payment-trust-card{
        padding:28px 24px;
    }

    .payment-card-top h3{
        font-size:32px;
    }

    .payment-method{
        flex-direction:column;
        align-items:flex-start;
    }

    .payment-method-left{
        flex-direction:column;
        align-items:flex-start;
    }

    .two-column{
        grid-template-columns:1fr;
    }

    .booking-summary-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .booking-summary-item{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .booking-total{
        flex-direction:column;
        gap:12px;
    }

    .payment-trust-card h4{
        font-size:26px;
    }
}


/* =========================
   BOOKING CONFIRMATION SECTION
========================= */

.booking-confirmation-section{
    position:relative;
    padding:120px 20px;
    background:#fff;
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.confirmation-glow{
    position:absolute;
    border-radius:50%;
}

.confirmation-glow-1{
    width:550px;
    height:550px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.12),
        transparent 70%
    );

    top:-220px;
    left:-180px;
}

.confirmation-glow-2{
    width:450px;
    height:450px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.08),
        transparent 70%
    );

    right:-140px;
    bottom:-180px;
}

/* =========================
   WRAPPER
========================= */

.confirmation-wrapper{
    position:relative;
    z-index:2;

    max-width:1000px;
    margin:auto;
}

/* =========================
   CARD
========================= */

.confirmation-card{
    position:relative;

    padding:60px;

    border-radius:42px;

    background:#fff;

    border:
    1px solid rgba(3,46,73,0.08);

    box-shadow:
    0 35px 90px rgba(0,0,0,0.08);

    overflow:hidden;
}

/* =========================
   SUCCESS ICON
========================= */

.confirmation-success-icon{
    width:130px;
    height:130px;

    margin:auto;
    margin-bottom:40px;

    border-radius:36px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:56px;

    box-shadow:
    0 30px 70px rgba(59,231,155,0.28);
}

/* =========================
   CONTENT
========================= */

.confirmation-content{
    text-align:center;

    max-width:760px;
    margin:auto;
}

/* BADGE */
.confirmation-badge{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.22);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

/* TITLE */
.confirmation-content h2{
    color:#032E49;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.confirmation-content h2 span{
    color:#3BE79B;
}

/* TEXT */
.confirmation-content p{
    color:#5d6c77;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   BOOKING INFO
========================= */

.confirmation-booking-info{
    margin-top:55px;

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
}

/* ITEM */
.confirmation-info-item{
    padding:24px;

    border-radius:26px;

    background:#f7fafc;

    transition:0.4s ease;
}

.confirmation-info-item:hover{
    transform:translateY(-5px);

    background:
    rgba(59,231,155,0.10);
}

.confirmation-info-item span{
    display:block;

    color:#5d6c77;

    font-size:14px;

    margin-bottom:10px;
}

.confirmation-info-item strong{
    color:#032E49;

    font-size:20px;
    line-height:1.5;
}

/* =========================
   NEXT STEPS
========================= */

.confirmation-next-steps{
    margin-top:60px;

    padding:40px;

    border-radius:36px;

    background:#032E49;
}

/* TITLE */
.confirmation-next-steps h3{
    color:#fff;

    font-size:36px;

    margin-bottom:35px;
}

/* STEP ITEM */
.confirmation-step-item{
    display:flex;
    gap:22px;

    padding:24px;

    border-radius:26px;

    background:
    rgba(255,255,255,0.06);

    margin-bottom:20px;

    transition:0.4s ease;
}

.confirmation-step-item:last-child{
    margin-bottom:0;
}

.confirmation-step-item:hover{
    transform:translateY(-5px);

    background:
    rgba(59,231,155,0.12);
}

/* NUMBER */
.confirmation-step-number{
    width:72px;
    height:72px;

    min-width:72px;

    border-radius:22px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:26px;
    font-weight:800;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* CONTENT */
.confirmation-step-item h4{
    color:#fff;

    font-size:24px;

    margin-bottom:10px;
}

.confirmation-step-item p{
    color:#d9e4ec;

    line-height:1.9;
}

/* =========================
   BUTTONS
========================= */

.confirmation-buttons{
    display:flex;
    justify-content:center;
    gap:18px;

    margin-top:50px;

    flex-wrap:wrap;
}

/* PRIMARY BTN */
.confirmation-primary-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:18px 34px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    color:#032E49;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.25);
}

.confirmation-primary-btn:hover{
    transform:translateY(-5px);

    box-shadow:
    0 28px 60px rgba(59,231,155,0.35);
}

/* OUTLINE BTN */
.confirmation-outline-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:18px 34px;

    border-radius:18px;

    background:#032E49;

    color:#fff;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;
}

.confirmation-outline-btn:hover{
    background:#3BE79B;

    color:#032E49;

    transform:translateY(-5px);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:992px){

    .confirmation-content h2{
        font-size:46px;
    }

    .confirmation-booking-info{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .booking-confirmation-section{
        padding:90px 20px;
    }

    .confirmation-card{
        padding:32px 24px;
    }

    .confirmation-success-icon{
        width:100px;
        height:100px;

        font-size:44px;
    }

    .confirmation-content h2{
        font-size:36px;
    }

    .confirmation-content p{
        font-size:16px;
    }

    .confirmation-next-steps{
        padding:28px 22px;
    }

    .confirmation-next-steps h3{
        font-size:28px;
    }

    .confirmation-step-item{
        flex-direction:column;
    }

    .confirmation-step-item h4{
        font-size:22px;
    }

    .confirmation-buttons{
        flex-direction:column;
    }

    .confirmation-primary-btn,
    .confirmation-outline-btn{
        width:100%;
    }
}


/* =========================
   PREMIUM BOOKING FAQ
========================= */

.premium-booking-faq{
    position:relative;
    padding:120px 20px;
    background:
    linear-gradient(
        180deg,
        #F4FBF8,
        #ECF7F2
    );
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.premium-faq-glow{
    position:absolute;
    border-radius:50%;
}

.faq-glow-one{
    width:520px;
    height:520px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    top:-180px;
    left:-180px;
}

.faq-glow-two{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.08),
        transparent 70%
    );

    right:-120px;
    bottom:-120px;
}

/* =========================
   HEADER
========================= */

.premium-faq-header{
    position:relative;
    z-index:2;

    max-width:850px;

    text-align:center;

    margin:auto;
    margin-bottom:80px;
}

.premium-faq-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.22);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

.premium-faq-header h2{
    color:#032E49;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.premium-faq-header h2 span{
    color:#3BE79B;
}

.premium-faq-header p{
    color:#5d6c77;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   WRAPPER
========================= */

.premium-faq-wrapper{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:35px;
    align-items:start;
}

/* =========================
   LEFT SIDE
========================= */

.premium-faq-left{
    display:flex;
    flex-direction:column;
    gap:22px;
}

/* =========================
   FAQ ITEM
========================= */

.premium-faq-item{
    border-radius:34px;

    background:#f7fafc;

    border:
    1px solid rgba(3,46,73,0.06);

    overflow:hidden;

    transition:0.4s ease;
}

/* HOVER */
.premium-faq-item:hover{
    transform:translateY(-5px);

    border-color:
    rgba(59,231,155,0.18);

    box-shadow:
    0 25px 60px rgba(0,0,0,0.06);
}

/* ACTIVE */
.premium-faq-item.active-faq{
    background:#032E49;

    border:
    1px solid rgba(59,231,155,0.18);
}

/* =========================
   QUESTION
========================= */

.premium-faq-question{
    width:100%;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    padding:30px;

    border:none;
    outline:none;

    background:none;

    cursor:pointer;

    text-align:left;
}

/* QUESTION TEXT */
.premium-faq-question span{
    color:#032E49;

    font-size:22px;
    font-weight:700;

    line-height:1.5;

    transition:0.4s ease;
}

/* ACTIVE TEXT */
.premium-faq-item.active-faq
.premium-faq-question span{
    color:#fff;
}

/* =========================
   ICON
========================= */

.premium-faq-icon{
    width:58px;
    height:58px;

    min-width:58px;

    border-radius:18px;

    background:
    rgba(59,231,155,0.12);

    display:flex;
    align-items:center;
    justify-content:center;

    transition:0.4s ease;
}

/* ICON STYLE */
.premium-faq-icon i{
    color:#3BE79B;

    font-size:20px;

    transition:0.3s ease;
}

/* HOVER ICON */
.premium-faq-question:hover .premium-faq-icon{
    background:#3BE79B;
}

.premium-faq-question:hover .premium-faq-icon i{
    color:#032E49;
}

/* ACTIVE ICON */
.premium-faq-item.active-faq
.premium-faq-icon{
    background:#3BE79B;
}

.premium-faq-item.active-faq
.premium-faq-icon i{
    color:#032E49;
}

/* =========================
   ANSWER
========================= */

.premium-faq-answer{
    max-height:0;

    overflow:hidden;

    transition:
    max-height 0.45s ease,
    padding 0.45s ease;

    padding:
    0 30px 0 30px;
}

/* ACTIVE ANSWER */
.premium-faq-item.active-faq
.premium-faq-answer{
    max-height:300px;

    padding:
    0 30px 32px 30px;
}

/* ANSWER TEXT */
.premium-faq-answer p{
    color:#5d6c77;

    font-size:16px;
    line-height:1.9;
}

/* ACTIVE ANSWER TEXT */
.premium-faq-item.active-faq
.premium-faq-answer p{
    color:#d9e4ec;
}

/* =========================
   RIGHT SIDE
========================= */

.premium-faq-support-card{
    position:sticky;
    top:120px;

    padding:40px;

    border-radius:38px;

    background:#032E49;

    box-shadow:
    0 35px 80px rgba(0,0,0,0.12);
}

/* =========================
   SUPPORT TOP
========================= */

.premium-faq-support-top{
    margin-bottom:35px;
}

/* ICON */
.premium-support-icon{
    width:95px;
    height:95px;

    border-radius:30px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:36px;

    margin-bottom:30px;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.22);
}

/* TEXT */
.premium-faq-support-top h3{
    color:#fff;

    font-size:38px;

    margin-bottom:18px;
}

.premium-faq-support-top p{
    color:#d9e4ec;

    line-height:1.9;
}

/* =========================
   CONTACT ITEMS
========================= */

.premium-support-contact{
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* ITEM */
.premium-support-item{
    display:flex;
    align-items:center;
    gap:18px;

    padding:22px;

    border-radius:24px;

    background:
    rgba(255,255,255,0.06);
}

/* ICON */
.premium-support-item i{
    width:58px;
    height:58px;

    border-radius:18px;

    background:
    rgba(59,231,155,0.12);

    display:flex;
    align-items:center;
    justify-content:center;

    color:#3BE79B;

    font-size:18px;
}

/* TEXT */
.premium-support-item span{
    display:block;

    color:#d9e4ec;

    font-size:13px;

    margin-bottom:6px;
}

.premium-support-item strong{
    color:#fff;

    font-size:16px;
}

/* =========================
   BUTTON
========================= */

.premium-support-btn{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;

    margin-top:35px;

    padding:18px 20px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    color:#032E49;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.25);
}

/* BUTTON HOVER */
.premium-support-btn:hover{
    transform:translateY(-5px);

    box-shadow:
    0 28px 60px rgba(59,231,155,0.35);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .premium-faq-wrapper{
        grid-template-columns:1fr;
    }

    .premium-faq-support-card{
        position:relative;
        top:auto;
    }
}

@media(max-width:768px){

    .premium-booking-faq{
        padding:90px 20px;
    }

    .premium-faq-header h2{
        font-size:38px;
    }

    .premium-faq-header p{
        font-size:16px;
    }

    .premium-faq-question{
        padding:24px 22px;
    }

    .premium-faq-question span{
        font-size:18px;
    }

    .premium-faq-answer{
        padding:
        0 22px 0 22px;
    }

    .premium-faq-item.active-faq
    .premium-faq-answer{
        padding:
        0 22px 24px 22px;
    }

    .premium-faq-support-card{
        padding:30px 24px;
    }

    .premium-faq-support-top h3{
        font-size:30px;
    }
}


@media(max-width:550px){

    .premium-faq-right{
        width:100%;
        max-width:100%;

        overflow:hidden;
    }

    .premium-faq-support-card{
        width:100%;
        max-width:100%;

        padding:24px 18px;

        border-radius:28px;

        overflow:hidden;

        box-sizing:border-box;
    }

    .premium-support-contact{
        width:100%;
    }

    .premium-support-item{
        width:100%;

        display:flex;

        align-items:flex-start;

        gap:14px;

        padding:18px;

        overflow:hidden;

        border-radius:20px;
    }

    .premium-support-item i{
        width:50px;
        min-width:50px;

        height:50px;

        font-size:16px;

        flex-shrink:0;
    }

    .premium-support-item div{
        flex:1;

        min-width:0;
    }

    .premium-support-item strong{
        display:block;

        font-size:15px;

        line-height:1.6;

        word-break:break-word;

        overflow-wrap:break-word;
    }

    .premium-support-btn{
        width:100%;

        padding:16px 18px;

        font-size:15px;
    }

}



/* =========================
   INSTRUCTOR HERO SECTION
========================= */

.instructor-hero-section{
    position:relative;
    min-height:100vh;

    display:flex;
    align-items:center;

    overflow:hidden;

    padding:120px 20px;

    background:#032E49;
}

/* =========================
   BACKGROUND
========================= */

.instructor-hero-bg{
    position:absolute;
    inset:0;
    z-index:1;
}

.instructor-hero-bg img{
    width:100%;
    height:100%;

    object-fit:cover;
}

/* =========================
   OVERLAY
========================= */

.instructor-hero-overlay{
    position:absolute;
    inset:0;
    z-index:2;

    background:
    linear-gradient(
        90deg,
        rgba(3,46,73,0.96) 0%,
        rgba(3,46,73,0.92) 38%,
        rgba(3,46,73,0.68) 72%,
        rgba(3,46,73,0.40) 100%
    );
}

/* =========================
   GLOW EFFECTS
========================= */

.instructor-hero-glow{
    position:absolute;
    border-radius:50%;
    z-index:2;
}

.glow-one{
    width:620px;
    height:620px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.16),
        transparent 70%
    );

    top:-220px;
    right:-180px;
}

.glow-two{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    left:-140px;
    bottom:-180px;
}

/* =========================
   WRAPPER
========================= */

.instructor-hero-wrapper{
    position:relative;
    z-index:5;

    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:60px;
    align-items:center;
}

/* =========================
   LEFT CONTENT
========================= */

.instructor-hero-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.22);

    backdrop-filter:blur(10px);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:28px;
}

/* TITLE */
.instructor-hero-content h1{
    color:#fff;

    font-size:72px;
    line-height:1.05;

    font-weight:800;

    margin-bottom:28px;

    max-width:760px;
}

.instructor-hero-content h1 span{
    color:#3BE79B;
}

/* TEXT */
.instructor-hero-content p{
    color:#d9e4ec;

    font-size:18px;
    line-height:1.9;

    max-width:650px;
}

/* =========================
   BUTTONS
========================= */

.instructor-hero-buttons{
    display:flex;
    gap:18px;

    margin-top:40px;

    flex-wrap:wrap;
}

/* PRIMARY BTN */
.instructor-primary-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:18px 34px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    color:#032E49;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.28);
}

.instructor-primary-btn:hover{
    transform:translateY(-5px);

    box-shadow:
    0 28px 60px rgba(59,231,155,0.35);
}

/* OUTLINE BTN */
.instructor-outline-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:18px 34px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.12);

    backdrop-filter:blur(10px);

    color:#fff;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;
}

.instructor-outline-btn:hover{
    background:#fff;

    color:#032E49;

    transform:translateY(-5px);
}

/* =========================
   STATS
========================= */

.instructor-hero-stats{
    display:flex;
    gap:20px;

    margin-top:55px;

    flex-wrap:wrap;
}

/* ITEM */
.instructor-stat-item{
    min-width:190px;

    padding:30px 25px;

    border-radius:24px;

    background:
    rgba(255,255,255,0.07);

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(12px);

    transition:0.4s ease;
}

.instructor-stat-item:hover{
    transform:translateY(-5px);

    border-color:
    rgba(59,231,155,0.35);
}

.instructor-stat-item h3{
    color:#3BE79B;

    font-size:44px;

    margin-bottom:10px;
}

.instructor-stat-item p{
    color:#fff;

    font-size:15px;
}

/* =========================
   RIGHT SIDE
========================= */

.instructor-hero-right{
    position:relative;
}

/* MAIN IMAGE */
.instructor-main-image{
    position:relative;
    border-radius:40px;
    overflow:hidden;
    box-shadow:
    0 40px 90px rgba(0,0,0,0.35);
    height: 650px;
}

.instructor-main-image img{
    width:100%;
    height:650px;

    object-fit:cover;
}

/* =========================
   FLOATING CARDS
========================= */

.instructor-floating-card{
    position:absolute;

    display:flex;
    align-items:center;
    gap:18px;

    padding:20px;

    border-radius:24px;

    background:
    rgba(255,255,255,0.10);

    border:
    1px solid rgba(255,255,255,0.12);

    backdrop-filter:blur(16px);

    box-shadow:
    0 25px 60px rgba(0,0,0,0.18);

    transition:0.4s ease;
}

.instructor-floating-card:hover{
    transform:translateY(-6px);
}

/* POSITION */
.card-one{
    top:40px;
    left:-60px;
}

.card-two{
    bottom:40px;
    right:-50px;
}

/* ICON */
.floating-icon{
    width:70px;
    height:70px;

    min-width:70px;

    border-radius:22px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:28px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* TEXT */
.instructor-floating-card h4{
    color:#fff;

    font-size:22px;

    margin-bottom:6px;
}

.instructor-floating-card p{
    color:#d9e4ec;

    font-size:14px;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .instructor-hero-content h1{
        font-size:58px;
    }

    .card-one{
        left:0;
    }

    .card-two{
        right:0;
    }
}

@media(max-width:992px){

    .instructor-hero-section{
        min-height:auto;
    }

    .instructor-hero-wrapper{
        grid-template-columns:1fr;
    }

    .instructor-hero-content h1{
        font-size:48px;
    }

    .instructor-hero-right{
        max-width:700px;
    }
}

@media(max-width:768px){

    .instructor-hero-section{
        padding:90px 20px;
    }

    .instructor-hero-content h1{
        font-size:38px;
    }

    .instructor-hero-content p{
        font-size:16px;
    }

    .instructor-hero-buttons{
        flex-direction:column;
    }

    .instructor-primary-btn,
    .instructor-outline-btn{
        width:100%;
    }

    .instructor-stat-item{
        width:100%;
    }

    .instructor-main-image img{
        height:520px;
    }

    .instructor-floating-card{
        position:relative;

        margin-top:20px;
    }

    .card-one,
    .card-two{
        top:auto;
        left:auto;
        right:auto;
        bottom:auto;
    }
}


/* =========================
   INSTRUCTOR PROFILES
========================= */

.instructor-profiles-section{
    position:relative;
    padding:120px 20px;
    background:#fff;
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.profiles-glow{
    position:absolute;
    border-radius:50%;
}

.glow-left{
    width:520px;
    height:520px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    top:-180px;
    left:-180px;
}

.glow-right{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.08),
        transparent 70%
    );

    right:-120px;
    bottom:-120px;
}

/* =========================
   HEADER
========================= */

.profiles-header{
    position:relative;
    z-index:2;

    max-width:850px;

    text-align:center;

    margin:auto;
    margin-bottom:80px;
}

.profiles-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.22);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

/* TITLE */
.profiles-header h2{
    color:#032E49;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.profiles-header h2 span{
    color:#3BE79B;
}

/* TEXT */
.profiles-header p{
    color:#5d6c77;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   GRID
========================= */

.profiles-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
}

/* =========================
   CARD
========================= */

.profile-card{
    position:relative;

    border-radius:38px;

    background:#fff;

    overflow:hidden;

    border:
    1px solid rgba(3,46,73,0.08);

    box-shadow:
    0 25px 60px rgba(0,0,0,0.06);

    transition:0.4s ease;
}

.profile-card:hover{
    transform:translateY(-10px);

    box-shadow:
    0 35px 90px rgba(0,0,0,0.10);
}

/* FEATURED */
.featured-profile{
    background:#032E49;

    border:
    1px solid rgba(59,231,155,0.18);
}

.featured-profile .profile-role,
.featured-profile h3,
.featured-profile p{
    color:#fff !important;
}

/* =========================
   IMAGE
========================= */

.profile-image{
    position:relative;
}

.profile-image img{
    width:100%;
    height:420px;

    object-fit:cover;
}

/* EXPERIENCE */
.profile-experience{
    position:absolute;

    bottom:24px;
    left:24px;

    width:90px;
    height:90px;

    border-radius:26px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.25);
}

.profile-experience span{
    color:#032E49;

    font-size:28px;
    font-weight:800;
}

.profile-experience p{
    color: #032E49 !important;
    font-size:13px;
    font-weight:700;
}

/* =========================
   CONTENT
========================= */

.profile-content{
    padding:35px;
}

/* ROLE */
.profile-role{
    display:inline-block;

    margin-bottom:18px;

    color:#3BE79B;

    font-size:14px;
    font-weight:700;
}

/* NAME */
.profile-content h3{
    color:#032E49;

    font-size:34px;

    margin-bottom:18px;
}

/* TEXT */
.profile-content p{
    color:#5d6c77;

    line-height:1.9;
}

/* =========================
   SKILLS
========================= */

.profile-skills{
    display:flex;
    flex-wrap:wrap;
    gap:12px;

    margin-top:28px;
}

/* SKILL */
.profile-skills span{
    padding:10px 16px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    color:#3BE79B;

    font-size:13px;
    font-weight:700;
}

.featured-profile .profile-skills span{
    background:
    rgba(255,255,255,0.08);
}

/* =========================
   FOOTER
========================= */

.profile-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    margin-top:35px;
}

/* SOCIAL */
.profile-social{
    display:flex;
    gap:12px;
}

/* LINK */
.profile-social a{
    width:44px;
    height:44px;
    border-radius:14px;
    background:#f7fafc;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#032E49;
    font-size:15px;
    transition:0.4s ease;
    text-decoration: none;
}

.profile-social a:hover{
    background:#3BE79B;
    color:#032E49;
    transform:translateY(-4px);
}

.featured-profile .profile-social a{
    background:
    rgba(255,255,255,0.08);
    color:#fff;
}
.featured-profile .profile-social a:hover{
    background:#3BE79B;
    color:#032E49;
    transform:translateY(-4px);
}

/* BUTTON */
.profile-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:14px 22px;

    border-radius:16px;

    background:#032E49;

    color:#fff;

    text-decoration:none;

    font-size:14px;
    font-weight:700;

    transition:0.4s ease;
}

.profile-btn:hover{
    background:#3BE79B;

    color:#032E49;

    transform:translateY(-4px);
}

.featured-profile .profile-btn{
    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    color:#032E49;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.25);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .profiles-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .instructor-profiles-section{
        padding:90px 20px;
    }

    .profiles-header h2{
        font-size:38px;
    }

    .profiles-header p{
        font-size:16px;
    }

    .profiles-grid{
        grid-template-columns:1fr;
    }

    .profile-image img{
        height:380px;
    }

    .profile-content{
        padding:28px 24px;
    }

    .profile-content h3{
        font-size:28px;
    }

    .profile-footer{
        flex-direction:column;
        align-items:flex-start;
    }

    .profile-btn{
        width:100%;
    }
}


/* =========================
   INSTRUCTOR SKILLS SECTION
========================= */

.instructor-skills-section{
    position:relative;
    padding:120px 20px;
    background:#032E49;
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.skills-glow{
    position:absolute;
    border-radius:50%;
}

.skills-glow-one{
    width:620px;
    height:620px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.14),
        transparent 70%
    );

    top:-220px;
    right:-180px;
}

.skills-glow-two{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    left:-120px;
    bottom:-180px;
}

/* =========================
   HEADER
========================= */

.skills-header{
    position:relative;
    z-index:2;

    max-width:850px;

    text-align:center;

    margin:auto;
    margin-bottom:80px;
}

.skills-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.22);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

/* TITLE */
.skills-header h2{
    color:#fff;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.skills-header h2 span{
    color:#3BE79B;
}

/* TEXT */
.skills-header p{
    color:#d9e4ec;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   WRAPPER
========================= */

.skills-wrapper{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:0.95fr 1.05fr;
    gap:50px;
    align-items:center;
}

/* =========================
   IMAGE
========================= */

.skills-image{
    position:relative;
    border-radius:40px;
    overflow:hidden;
    box-shadow: 0 40px 90px rgba(0,0,0,0.30);
    height: 450px;
}

.skills-image img{
    width:100%;
    object-fit:cover;
    height: 450px;
}

/* FLOATING CARD */
.skills-floating-card{
    position:absolute;
    left:30px;
    bottom:30px;
    display:flex;
    align-items:center;
    gap:18px;
    padding:22px;
    border-radius:28px;
    background:rgba(255,255,255,0.10);
    border:1px solid rgba(255,255,255,0.12);
    backdrop-filter:blur(16px);
    box-shadow:0 25px 60px rgba(0,0,0,0.18);
}

/* ICON */
.skills-floating-icon{
    width:70px;
    height:70px;

    min-width:70px;

    border-radius:22px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:28px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* TEXT */
.skills-floating-card h4{
    color:#fff;

    font-size:22px;

    margin-bottom:6px;
}

.skills-floating-card p{
    color:#d9e4ec;

    font-size:14px;
}

/* =========================
   RIGHT SIDE
========================= */

.skills-right{
    display:flex;
    flex-direction:column;
    gap:28px;
}

/* =========================
   SKILL CARD
========================= */

.skill-card{
    padding:32px;

    border-radius:34px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.10);

    backdrop-filter:blur(14px);

    transition:0.4s ease;

    box-shadow:
    0 25px 60px rgba(0,0,0,0.12);
}

.skill-card:hover{
    transform:translateY(-8px);

    border-color:
    rgba(59,231,155,0.20);
}

/* FEATURED */
.featured-skill-card{
    background:
    linear-gradient(
        135deg,
        rgba(59,231,155,0.16),
        rgba(255,255,255,0.08)
    );

    border:
    1px solid rgba(59,231,155,0.20);
}

/* =========================
   TOP
========================= */

.skill-top{
    display:flex;
    align-items:center;
    gap:18px;

    margin-bottom:28px;
}

/* ICON */
.skill-icon{
    width:78px;
    height:78px;

    min-width:78px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:30px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* INFO */
.skill-info{
    flex:1;
}

.skill-info h3{
    color:#fff;

    font-size:30px;

    margin-bottom:8px;
}

.skill-info span{
    color:#3BE79B;

    font-size:14px;
    font-weight:700;
}

/* PERCENT */
.skill-percent{
    color:#fff;

    font-size:34px;
    font-weight:800;
}

/* =========================
   BAR
========================= */

.skill-bar{
    width:100%;
    height:5px;
    border-radius:50px;
    overflow:hidden;
    background:
    rgba(255,255,255,0.08);
    margin-bottom:24px;
}

/* PROGRESS */
.skill-progress{
    height:100%;

    border-radius:50px;

    background:
    linear-gradient(
        90deg,
        #3BE79B,
        #22cb7d
    );

    box-shadow:
    0 10px 25px rgba(59,231,155,0.30);
}

/* WIDTHS */
.progress-one{
    width:98%;
}

.progress-two{
    width:95%;
}

.progress-three{
    width:97%;
}

.progress-four{
    width:99%;
}

/* =========================
   TEXT
========================= */

.skill-card p{
    color:#d9e4ec;

    line-height:1.9;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .skills-wrapper{
        grid-template-columns:1fr;
    }

    .skills-image{
        max-width:700px;
    }
}

@media(max-width:768px){

    .instructor-skills-section{
        padding:90px 20px;
    }

    .skills-header h2{
        font-size:38px;
    }

    .skills-header p{
        font-size:16px;
    }

    .skills-image img{
        height:520px;
    }

    .skills-floating-card{
        position:relative;

        left:auto;
        bottom:auto;

        margin:20px;
    }

    .skill-card{
        padding:28px 24px;
    }

    .skill-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .skill-info h3{
        font-size:26px;
    }

    .skill-percent{
        font-size:28px;
    }
}


/* =========================
   INSTRUCTOR CERTIFICATION
========================= */

.instructor-certification-section{
    position:relative;
    padding:120px 20px;
    background:#fff;
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.certification-glow{
    position:absolute;
    border-radius:50%;
}

.cert-glow-left{
    width:520px;
    height:520px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    top:-180px;
    left:-180px;
}

.cert-glow-right{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.08),
        transparent 70%
    );

    right:-120px;
    bottom:-120px;
}

/* =========================
   HEADER
========================= */

.certification-header{
    position:relative;
    z-index:2;

    max-width:850px;

    text-align:center;

    margin:auto;
    margin-bottom:80px;
}

.certification-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.22);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

/* TITLE */
.certification-header h2{
    color:#032E49;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.certification-header h2 span{
    color:#3BE79B;
}

/* TEXT */
.certification-header p{
    color:#5d6c77;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   WRAPPER
========================= */

.certification-wrapper{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:0.95fr 1.05fr;
    gap:50px;
    align-items:center;
}

/* =========================
   IMAGE
========================= */

.certification-image{
    position:relative;
    border-radius:40px;
    overflow:hidden;
    box-shadow:0 40px 90px rgba(0,0,0,0.10);
    height: 450px;
}

.certification-image img{
    width:100%;
    height:450px;
    object-fit:cover;
}

/* =========================
   BADGE
========================= */

.certification-badge{
    position:absolute;

    left:30px;
    bottom:30px;

    display:flex;
    align-items:center;
    gap:18px;

    padding:22px;

    border-radius:28px;

    background:
    rgba(255,255,255,0.10);

    border:
    1px solid rgba(255,255,255,0.14);

    backdrop-filter:blur(16px);

    box-shadow:
    0 25px 60px rgba(0,0,0,0.18);
}

/* ICON */
.certification-badge-icon{
    width:74px;
    height:74px;

    min-width:74px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:30px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* TEXT */
.certification-badge h4{
    color:#fff;

    font-size:24px;

    margin-bottom:6px;
}

.certification-badge p{
    color:#d9e4ec;

    font-size:14px;
}

/* =========================
   RIGHT SIDE
========================= */

.certification-right{
    display:flex;
    flex-direction:column;
    gap:26px;
}

/* =========================
   CERT CARD
========================= */

.certification-card{
    display:flex;
    align-items:flex-start;
    gap:24px;

    padding:32px;

    border-radius:34px;

    background:#f7fafc;

    border:
    1px solid rgba(3,46,73,0.06);

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(0,0,0,0.04);
}

.certification-card:hover{
    transform:translateY(-6px);

    border-color:
    rgba(59,231,155,0.18);

    box-shadow:
    0 30px 70px rgba(0,0,0,0.08);
}

/* FEATURED */
.featured-cert-card{
    background:#032E49;

    border:
    1px solid rgba(59,231,155,0.18);
}

.featured-cert-card h3,
.featured-cert-card p{
    color:#fff !important;
}

/* =========================
   ICON
========================= */

.certification-icon{
    width:82px;
    height:82px;

    min-width:82px;

    border-radius:26px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:32px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* =========================
   CONTENT
========================= */

.certification-content h3{
    color:#032E49;

    font-size:30px;

    margin-bottom:14px;
}

.certification-content p{
    color:#5d6c77;

    line-height:1.9;
}

/* =========================
   STATS
========================= */

.certification-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;

    margin-top:10px;
}

/* ITEM */
.cert-stat-item{
    padding:28px 24px;

    border-radius:28px;

    background:
    rgba(59,231,155,0.10);

    border:
    1px solid rgba(59,231,155,0.16);

    text-align:center;

    transition:0.4s ease;
}

.cert-stat-item:hover{
    transform:translateY(-5px);

    box-shadow:
    0 20px 45px rgba(59,231,155,0.16);
}

.cert-stat-item h4{
    color:#032E49;

    font-size:42px;

    margin-bottom:10px;
}

.cert-stat-item p{
    color:#5d6c77;

    font-size:15px;
    line-height:1.7;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .certification-wrapper{
        grid-template-columns:1fr;
    }

    .certification-image{
        max-width:700px;
    }
}

@media(max-width:768px){

    .instructor-certification-section{
        padding:90px 20px;
    }

    .certification-header h2{
        font-size:38px;
    }

    .certification-header p{
        font-size:16px;
    }

    .certification-image img{
        height:520px;
    }

    .certification-badge{
        position:relative;

        left:auto;
        bottom:auto;

        margin:20px;
    }

    .certification-card{
        flex-direction:column;

        padding:28px 24px;
    }

    .certification-content h3{
        font-size:26px;
    }

    .certification-stats{
        grid-template-columns:1fr;
    }
}



/* =========================
   INSTRUCTOR AVAILABILITY
========================= */

.instructor-availability-section{
    position:relative;
    padding:120px 20px;
    background:#032E49;
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.availability-glow{
    position:absolute;
    border-radius:50%;
}

.glow-left{
    width:620px;
    height:620px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.14),
        transparent 70%
    );

    top:-220px;
    left:-180px;
}

.glow-right{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    right:-120px;
    bottom:-180px;
}

/* =========================
   HEADER
========================= */

.availability-header{
    position:relative;
    z-index:2;

    max-width:850px;

    text-align:center;

    margin:auto;
    margin-bottom:80px;
}

.availability-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.22);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

/* TITLE */
.availability-header h2{
    color:#fff;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.availability-header h2 span{
    color:#3BE79B;
}

/* TEXT */
.availability-header p{
    color:#d9e4ec;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   WRAPPER
========================= */

.availability-wrapper{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:0.95fr 1.05fr;
    gap:50px;
    align-items:center;
}

/* =========================
   IMAGE
========================= */

.availability-image{
    position:relative;

    border-radius:40px;

    overflow:hidden;

    box-shadow:
    0 40px 90px rgba(0,0,0,0.30);
}

.availability-image img{
    width:100%;
    height:450px;

    object-fit:cover;
}

/* FLOATING CARD */
.availability-floating-card{
    position:absolute;

    left:30px;
    bottom:30px;

    display:flex;
    align-items:center;
    gap:18px;

    padding:22px;

    border-radius:28px;

    background:
    rgba(255,255,255,0.10);

    border:
    1px solid rgba(255,255,255,0.12);

    backdrop-filter:blur(16px);

    box-shadow:
    0 25px 60px rgba(0,0,0,0.18);
}

/* ICON */
.availability-floating-icon{
    width:72px;
    height:72px;

    min-width:72px;

    border-radius:22px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:30px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* TEXT */
.availability-floating-card h4{
    color:#fff;

    font-size:22px;

    margin-bottom:6px;
}

.availability-floating-card p{
    color:#d9e4ec;

    font-size:14px;
}

/* =========================
   RIGHT SIDE
========================= */

.availability-right{
    display:flex;
    flex-direction:column;
    gap:28px;
}

/* =========================
   CARD
========================= */

.availability-card{
    padding:34px;

    border-radius:34px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.10);

    backdrop-filter:blur(14px);

    transition:0.4s ease;

    box-shadow:
    0 25px 60px rgba(0,0,0,0.12);
}

.availability-card:hover{
    transform:translateY(-8px);

    border-color:
    rgba(59,231,155,0.20);
}

/* FEATURED */
.featured-availability-card{
    background:
    linear-gradient(
        135deg,
        rgba(59,231,155,0.18),
        rgba(255,255,255,0.08)
    );

    border:
    1px solid rgba(59,231,155,0.22);
}

/* =========================
   TOP
========================= */

.availability-top{
    display:flex;
    align-items:center;
    gap:20px;

    margin-bottom:28px;
}

/* ICON */
.availability-icon{
    width:80px;
    height:80px;

    min-width:80px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:32px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* TEXT */
.availability-top h3{
    color:#fff;

    font-size:32px;

    margin-bottom:8px;
}

.availability-top span{
    color:#3BE79B;

    font-size:14px;
    font-weight:700;
}

/* =========================
   TIME
========================= */

.availability-time{
    margin-bottom:24px;
}

/* ITEM */
.time-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    padding:18px 22px;

    border-radius:22px;

    background:
    rgba(255,255,255,0.06);
}

.time-item span{
    color:#d9e4ec;

    font-size:15px;
}

.time-item strong{
    color:#fff;

    font-size:16px;
}

/* =========================
   TEXT
========================= */

.availability-card p{
    color:#d9e4ec;

    line-height:1.9;
}

/* =========================
   WEEKEND CARD
========================= */

.availability-weekend{
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding:34px;
    border-radius:34px;
    background:
    rgba(255,255,255,0.08);
    border:
    1px solid rgba(255,255,255,0.10);
    backdrop-filter:blur(14px);
    box-shadow:
    0 25px 60px rgba(0,0,0,0.12);
}

/* CONTENT */
.weekend-content{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom: 20px;
}

/* ICON */
.weekend-icon{
    width:82px;
    height:82px;
    min-width:82px;
    border-radius:26px;
    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );
    display:flex;
    align-items:center;
    justify-content:center;
    color:#032E49;
    font-size:32px;
    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* TEXT */
.weekend-content h3{
    color:#fff;
    font-size:32px;
    margin-bottom:10px;
}

.weekend-content p{
    color:#d9e4ec;
    line-height:1.8;
}

/* =========================
   BUTTON
========================= */

.availability-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 10px 20px;
    border-radius: 25px;
    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );
    color:#032E49;
    text-decoration:none;
    font-size:15px;
    font-weight:700;
    transition:0.4s ease;
    white-space:nowrap;
    box-shadow:0 20px 45px rgba(59,231,155,0.25);
}

.availability-btn:hover{
    transform:translateY(-5px);

    box-shadow:
    0 28px 60px rgba(59,231,155,0.35);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .availability-wrapper{
        grid-template-columns:1fr;
    }

    .availability-image{
        max-width:700px;
    }
}

@media(max-width:768px){

    .instructor-availability-section{
        padding:90px 20px;
    }

    .availability-header h2{
        font-size:38px;
    }

    .availability-header p{
        font-size:16px;
    }

    .availability-image img{
        height:520px;
    }

    .availability-floating-card{
        position:relative;

        left:auto;
        bottom:auto;

        margin:20px;
    }

    .availability-card{
        padding:28px 24px;
    }

    .availability-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .availability-top h3{
        font-size:26px;
    }

    .time-item{
        flex-direction:column;
        align-items:flex-start;
    }

    .availability-weekend{
        flex-direction:column;
        align-items:flex-start;

        padding:28px 24px;
    }

    .weekend-content{
        flex-direction:column;
        align-items:flex-start;
    }

    .weekend-content h3{
        font-size:26px;
    }

    .availability-btn{
        width:100%;
    }
}


/* =========================
   STUDENT FEEDBACK SECTION
========================= */

.student-feedback-section{
    position:relative;
    padding:120px 20px;
    background:#fff;
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.feedback-glow{
    position:absolute;
    border-radius:50%;
}

.feedback-glow-left{
    width:520px;
    height:520px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    top:-180px;
    left:-180px;
}

.feedback-glow-right{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.08),
        transparent 70%
    );

    right:-120px;
    bottom:-120px;
}

/* =========================
   HEADER
========================= */

.feedback-header{
    position:relative;
    z-index:2;

    max-width:850px;

    text-align:center;

    margin:auto;
    margin-bottom:70px;
}

.feedback-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.22);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

/* TITLE */
.feedback-header h2{
    color:#032E49;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.feedback-header h2 span{
    color:#3BE79B;
}

/* TEXT */
.feedback-header p{
    color:#5d6c77;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   STATS
========================= */

.feedback-stats{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;

    margin-bottom:60px;
}

/* CARD */
.feedback-stat-card{
    padding:35px 30px;

    border-radius:34px;

    background:#f7fafc;

    border:
    1px solid rgba(3,46,73,0.06);

    text-align:center;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(0,0,0,0.04);
}

.feedback-stat-card:hover{
    transform:translateY(-6px);

    box-shadow:
    0 30px 70px rgba(0,0,0,0.08);
}

/* FEATURED */
.featured-feedback-stat{
    background:#032E49;

    border:
    1px solid rgba(59,231,155,0.18);
}

.featured-feedback-stat h3,
.featured-feedback-stat p{
    color:#fff !important;
}

/* TEXT */
.feedback-stat-card h3{
    color:#032E49;

    font-size:52px;

    margin-bottom:12px;
}

.feedback-stat-card p{
    color:#5d6c77;

    font-size:16px;
    line-height:1.8;
}

/* =========================
   GRID
========================= */

.feedback-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

/* =========================
   CARD
========================= */

.feedback-card{
    padding:35px;

    border-radius:36px;

    background:#fff;

    border:
    1px solid rgba(3,46,73,0.08);

    transition:0.4s ease;

    box-shadow:
    0 25px 60px rgba(0,0,0,0.05);
}

.feedback-card:hover{
    transform:translateY(-10px);

    box-shadow:
    0 35px 90px rgba(0,0,0,0.10);
}

/* FEATURED */
.featured-feedback-card{
    background:#032E49;

    border:
    1px solid rgba(59,231,155,0.18);
}

.featured-feedback-card h4,
.featured-feedback-card span,
.featured-feedback-card p{
    color:#fff !important;
}

/* =========================
   TOP
========================= */

.feedback-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-bottom:28px;
}

/* USER */
.feedback-user{
    display:flex;
    align-items:center;
    gap:16px;
}

/* IMAGE */
.feedback-user img{
    width:74px;
    height:74px;

    border-radius:50%;

    object-fit:cover;

    border:
    4px solid rgba(59,231,155,0.18);
}

/* TEXT */
.feedback-user h4{
    color:#032E49;

    font-size:22px;

    margin-bottom:6px;
}

.feedback-user span{
    color:#5d6c77;

    font-size:14px;
}

/* QUOTE */
.feedback-quote{
    width:64px;
    height:64px;

    min-width:64px;

    border-radius:22px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:24px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* =========================
   STARS
========================= */

.feedback-stars{
    display:flex;
    gap:8px;

    margin-bottom:24px;
}

.feedback-stars i{
    color:#3BE79B;

    font-size:16px;
}

/* =========================
   TEXT
========================= */

.feedback-card p{
    color:#5d6c77;

    line-height:1.9;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .feedback-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .student-feedback-section{
        padding:90px 20px;
    }

    .feedback-header h2{
        font-size:38px;
    }

    .feedback-header p{
        font-size:16px;
    }

    .feedback-stats{
        grid-template-columns:1fr;
    }

    .feedback-grid{
        grid-template-columns:1fr;
    }

    .feedback-card{
        padding:28px 24px;
    }

    .feedback-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .feedback-user h4{
        font-size:20px;
    }

    .feedback-stat-card h3{
        font-size:42px;
    }
}




/* =========================
   RESOURCES HERO SECTION
========================= */

.resources-hero-section{
    position:relative;
    min-height:100vh;

    display:flex;
    align-items:center;

    overflow:hidden;

    padding:120px 20px;

    background:#032E49;
}

/* =========================
   BACKGROUND
========================= */

.resources-hero-bg{
    position:absolute;
    inset:0;
    z-index:1;
}

.resources-hero-bg img{
    width:100%;
    height:100%;

    object-fit:cover;
}

/* =========================
   OVERLAY
========================= */

.resources-hero-overlay{
    position:absolute;
    inset:0;
    z-index:2;

    background:
    linear-gradient(
        90deg,
        rgba(3,46,73,0.96) 0%,
        rgba(3,46,73,0.92) 38%,
        rgba(3,46,73,0.70) 72%,
        rgba(3,46,73,0.42) 100%
    );
}

/* =========================
   GLOW EFFECTS
========================= */

.resources-hero-glow{
    position:absolute;
    border-radius:50%;
    z-index:2;
}

.glow-one{
    width:620px;
    height:620px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.16),
        transparent 70%
    );

    top:-220px;
    right:-180px;
}

.glow-two{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    left:-140px;
    bottom:-180px;
}

/* =========================
   WRAPPER
========================= */

.resources-hero-wrapper{
    position:relative;
    z-index:5;

    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:60px;
    align-items:center;
}

/* =========================
   LEFT CONTENT
========================= */

.resources-hero-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.22);

    backdrop-filter:blur(10px);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:28px;
}

/* TITLE */
.resources-hero-content h1{
    color:#fff;

    font-size:72px;
    line-height:1.05;

    font-weight:800;

    margin-bottom:28px;

    max-width:760px;
}

.resources-hero-content h1 span{
    color:#3BE79B;
}

/* TEXT */
.resources-hero-content p{
    color:#d9e4ec;

    font-size:18px;
    line-height:1.9;

    max-width:650px;
}

/* =========================
   BUTTONS
========================= */

.resources-hero-buttons{
    display:flex;
    gap:18px;

    margin-top:40px;

    flex-wrap:wrap;
}

/* PRIMARY BTN */
.resources-primary-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:18px 34px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    color:#032E49;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.28);
}

.resources-primary-btn:hover{
    transform:translateY(-5px);

    box-shadow:
    0 28px 60px rgba(59,231,155,0.35);
}

/* OUTLINE BTN */
.resources-outline-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:18px 34px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.12);

    backdrop-filter:blur(10px);

    color:#fff;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;
}

.resources-outline-btn:hover{
    background:#fff;

    color:#032E49;

    transform:translateY(-5px);
}

/* =========================
   STATS
========================= */

.resources-hero-stats{
    display:flex;
    gap:20px;

    margin-top:55px;

    flex-wrap:wrap;
}

/* ITEM */
.resources-stat-item{
    min-width:190px;

    padding:30px 25px;

    border-radius:24px;

    background:
    rgba(255,255,255,0.07);

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(12px);

    transition:0.4s ease;
}

.resources-stat-item:hover{
    transform:translateY(-5px);

    border-color:
    rgba(59,231,155,0.35);
}

.resources-stat-item h3{
    color:#3BE79B;

    font-size:44px;

    margin-bottom:10px;
}

.resources-stat-item p{
    color:#fff;

    font-size:15px;
}

/* =========================
   RIGHT SIDE
========================= */

.resources-hero-right{
    position:relative;
}

/* MAIN IMAGE */
.resources-main-image{
    position:relative;
    border-radius:40px;
    overflow:hidden;
    box-shadow:0 40px 90px rgba(0,0,0,0.35);
    height: 760px;
}

.resources-main-image img{
    width:100%;
    height:760px;

    object-fit:cover;
}

/* =========================
   FLOATING CARDS
========================= */

.resources-floating-card{
    position:absolute;

    display:flex;
    align-items:center;
    gap:18px;

    padding:20px;

    border-radius:24px;

    background:
    rgba(255,255,255,0.10);

    border:
    1px solid rgba(255,255,255,0.12);

    backdrop-filter:blur(16px);

    box-shadow:
    0 25px 60px rgba(0,0,0,0.18);

    transition:0.4s ease;
}

.resources-floating-card:hover{
    transform:translateY(-6px);
}

/* POSITION */
.card-one{
    top:40px;
    left:-60px;
}

.card-two{
    bottom:40px;
    right:-50px;
}

/* ICON */
.resources-floating-icon{
    width:70px;
    height:70px;

    min-width:70px;

    border-radius:22px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:28px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* TEXT */
.resources-floating-card h4{
    color:#fff;

    font-size:22px;

    margin-bottom:6px;
}

.resources-floating-card p{
    color:#d9e4ec;

    font-size:14px;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .resources-hero-content h1{
        font-size:58px;
    }

    .card-one{
        left:0;
    }

    .card-two{
        right:0;
    }
}

@media(max-width:992px){

    .resources-hero-section{
        min-height:auto;
    }

    .resources-hero-wrapper{
        grid-template-columns:1fr;
    }

    .resources-hero-content h1{
        font-size:48px;
    }

    .resources-hero-right{
        max-width:700px;
    }
}

@media(max-width:768px){

    .resources-hero-section{
        padding:90px 20px;
    }

    .resources-hero-content h1{
        font-size:38px;
    }

    .resources-hero-content p{
        font-size:16px;
    }

    .resources-hero-buttons{
        flex-direction:column;
    }

    .resources-primary-btn,
    .resources-outline-btn{
        width:100%;
    }

    .resources-stat-item{
        width:100%;
    }

    .resources-main-image img{
        height:520px;
    }

    .resources-floating-card{
        position:relative;

        margin-top:20px;
    }

    .card-one,
    .card-two{
        top:auto;
        left:auto;
        right:auto;
        bottom:auto;
    }
}


/* =========================
   DRIVING TEST PREPARATION
========================= */

.driving-test-prep-section{
    position:relative;
    padding:120px 20px;
    background:#fff;
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.prep-glow{
    position:absolute;
    border-radius:50%;
}

.prep-glow-left{
    width:520px;
    height:520px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    top:-180px;
    left:-180px;
}

.prep-glow-right{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.08),
        transparent 70%
    );

    right:-120px;
    bottom:-120px;
}

/* =========================
   HEADER
========================= */

.prep-header{
    position:relative;
    z-index:2;

    max-width:850px;

    text-align:center;

    margin:auto;
    margin-bottom:80px;
}

.prep-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.22);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

/* TITLE */
.prep-header h2{
    color:#032E49;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.prep-header h2 span{
    color:#3BE79B;
}

/* TEXT */
.prep-header p{
    color:#5d6c77;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   WRAPPER
========================= */

.prep-wrapper{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:0.95fr 1.05fr;
    gap:50px;
    align-items:center;
}

/* =========================
   IMAGE
========================= */

.prep-image{
    position:relative;

    border-radius:40px;

    overflow:hidden;

    box-shadow:
    0 40px 90px rgba(0,0,0,0.10);
}

.prep-image img{
    width:100%;
    height:450px;
    object-fit:cover;
}

/* FLOATING CARD */
.prep-floating-card{
    position:absolute;

    left:30px;
    bottom:30px;

    display:flex;
    align-items:center;
    gap:18px;

    padding:22px;

    border-radius:28px;

    background:
    rgba(255,255,255,0.10);

    border:
    1px solid rgba(255,255,255,0.14);

    backdrop-filter:blur(16px);

    box-shadow:
    0 25px 60px rgba(0,0,0,0.18);
}

/* ICON */
.prep-floating-icon{
    width:74px;
    height:74px;

    min-width:74px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:30px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* TEXT */
.prep-floating-card h4{
    color:#fff;

    font-size:24px;

    margin-bottom:6px;
}

.prep-floating-card p{
    color:#d9e4ec;

    font-size:14px;
}

/* =========================
   RIGHT SIDE
========================= */

.prep-right{
    display:flex;
    flex-direction:column;
    gap:28px;
}

/* =========================
   CARD
========================= */

.prep-card{
    padding:34px;

    border-radius:34px;

    background:#f7fafc;

    border:
    1px solid rgba(3,46,73,0.06);

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(0,0,0,0.04);
}

.prep-card:hover{
    transform:translateY(-6px);

    border-color:
    rgba(59,231,155,0.18);

    box-shadow:
    0 30px 70px rgba(0,0,0,0.08);
}

/* FEATURED */
.featured-prep-card{
    background:#032E49;

    border:
    1px solid rgba(59,231,155,0.18);
}

.featured-prep-card h3,
.featured-prep-card p,
.featured-prep-card span,
.featured-prep-card strong{
    color:#fff !important;
}

/* =========================
   TOP
========================= */

.prep-card-top{
    display:flex;
    align-items:center;
    gap:20px;

    margin-bottom:24px;
}

/* ICON */
.prep-icon{
    width:82px;
    height:82px;

    min-width:82px;

    border-radius:26px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:32px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* TEXT */
.prep-card-top h3{
    color:#032E49;

    font-size:30px;

    margin-bottom:8px;
}

.prep-card-top span{
    color:#3BE79B;

    font-size:14px;
    font-weight:700;
}

/* PARAGRAPH */
.prep-card p{
    color:#5d6c77;

    line-height:1.9;

    margin-bottom:28px;
}

/* =========================
   PROGRESS
========================= */

.prep-progress-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:14px;
}

.prep-progress-top span{
    color:#5d6c77;

    font-size:14px;
}

.prep-progress-top strong{
    color:#032E49;

    font-size:15px;
}

/* BAR */
.prep-bar{
    width:100%;
    height:5px;
    border-radius:50px;
    overflow:hidden;
    background:rgba(3,46,73,0.08);
}

/* FILL */
.prep-fill{
    height:100%;
    border-radius:50px;
    background:
    linear-gradient(
        90deg,
        #3BE79B,
        #22cb7d
    );
    box-shadow:0 10px 25px rgba(59,231,155,0.30);
}

/* WIDTH */
.fill-one{
    width:96%;
}

.fill-two{
    width:98%;
}

.fill-three{
    width:94%;
}

/* =========================
   CHECKLIST
========================= */

.prep-checklist{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

/* ITEM */
.prep-check-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:20px;
    border-radius:22px;
    background:rgba(59,231,155,0.10);
    border:1px solid rgba(59,231,155,0.14);
    transition:0.4s ease;
}

.prep-check-item:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 45px rgba(59,231,155,0.14);
}

/* ICON */
.prep-check-item i{
    color:#3BE79B;
    font-size:18px;
}

/* TEXT */
.prep-check-item span{
    color:#032E49;
    font-size:15px;
    font-weight:600;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .prep-wrapper{
        grid-template-columns:1fr;
    }

    .prep-image{
        max-width:700px;
    }
}

@media(max-width:768px){

    .driving-test-prep-section{
        padding:90px 20px;
    }

    .prep-header h2{
        font-size:38px;
    }

    .prep-header p{
        font-size:16px;
    }

    .prep-image img{
        height:520px;
    }

    .prep-floating-card{
        position:relative;

        left:auto;
        bottom:auto;

        margin:20px;
    }

    .prep-card{
        padding:28px 24px;
    }

    .prep-card-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .prep-card-top h3{
        font-size:26px;
    }

    .prep-checklist{
        grid-template-columns:1fr;
    }
}


/* =========================
   DRIVING TIPS SECTION
========================= */

.driving-tips-section{
    position:relative;
    padding:120px 20px;
    background:#032E49;
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.tips-glow{
    position:absolute;
    border-radius:50%;
}

.tips-glow-left{
    width:620px;
    height:620px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.14),
        transparent 70%
    );

    top:-220px;
    left:-180px;
}

.tips-glow-right{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    right:-120px;
    bottom:-180px;
}

/* =========================
   HEADER
========================= */

.tips-header{
    position:relative;
    z-index:2;

    max-width:850px;

    text-align:center;

    margin:auto;
    margin-bottom:80px;
}

.tips-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.22);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

/* TITLE */
.tips-header h2{
    color:#fff;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.tips-header h2 span{
    color:#3BE79B;
}

/* TEXT */
.tips-header p{
    color:#d9e4ec;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   GRID
========================= */

.tips-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

/* =========================
   CARD
========================= */

.tips-card{
    position:relative;

    padding:34px;

    border-radius:36px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.10);

    backdrop-filter:blur(14px);

    transition:0.4s ease;

    box-shadow:
    0 25px 60px rgba(0,0,0,0.12);

    overflow:hidden;
}

.tips-card:hover{
    transform:translateY(-10px);

    border-color:
    rgba(59,231,155,0.20);

    box-shadow:
    0 35px 90px rgba(0,0,0,0.18);
}

/* FEATURED */
.featured-tips-card{
    background:
    linear-gradient(
        135deg,
        rgba(59,231,155,0.18),
        rgba(255,255,255,0.08)
    );

    border:
    1px solid rgba(59,231,155,0.22);
}

/* =========================
   ICON
========================= */

.tips-icon{
    width:88px;
    height:88px;

    border-radius:28px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:34px;

    margin-bottom:28px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* =========================
   CONTENT
========================= */

.tips-content span{
    display:inline-block;

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:16px;
}

.tips-content h3{
    color:#fff;

    font-size:32px;
    line-height:1.3;

    margin-bottom:18px;
}

.tips-content p{
    color:#d9e4ec;

    line-height:1.9;
}

/* =========================
   FOOTER
========================= */

.tips-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-top:30px;
}

/* LEVEL */
.tips-level{
    padding:10px 18px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.16);

    color:#3BE79B;

    font-size:13px;
    font-weight:700;
}

/* BUTTON */
.tips-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:14px 20px;

    border-radius:16px;

    background:#fff;

    color:#032E49;

    text-decoration:none;

    font-size:14px;
    font-weight:700;

    transition:0.4s ease;
}

.tips-btn:hover{
    background:#3BE79B;

    transform:translateY(-4px);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .tips-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .driving-tips-section{
        padding:90px 20px;
    }

    .tips-header h2{
        font-size:38px;
    }

    .tips-header p{
        font-size:16px;
    }

    .tips-grid{
        grid-template-columns:1fr;
    }

    .tips-card{
        padding:28px 24px;
    }

    .tips-content h3{
        font-size:26px;
    }

    .tips-footer{
        flex-direction:column;
        align-items:flex-start;
    }
    .tips-btn{
        width:100%;
    }
}

/* =========================
   TRAFFIC RULES SECTION
========================= */

.traffic-rules-section{
    position:relative;
    padding:120px 20px;
    background:#fff;
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.traffic-glow{
    position:absolute;
    border-radius:50%;
}

.traffic-glow-left{
    width:520px;
    height:520px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    top:-180px;
    left:-180px;
}

.traffic-glow-right{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.08),
        transparent 70%
    );

    right:-120px;
    bottom:-120px;
}

/* =========================
   HEADER
========================= */

.traffic-header{
    position:relative;
    z-index:2;

    max-width:850px;

    text-align:center;

    margin:auto;
    margin-bottom:80px;
}

.traffic-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.22);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

/* TITLE */
.traffic-header h2{
    color:#032E49;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.traffic-header h2 span{
    color:#3BE79B;
}

/* TEXT */
.traffic-header p{
    color:#5d6c77;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   GRID
========================= */

.traffic-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

/* =========================
   CARD
========================= */

.traffic-card{
    position:relative;

    padding:34px;

    border-radius:36px;

    background:#f7fafc;

    border:
    1px solid rgba(3,46,73,0.06);

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(0,0,0,0.04);

    overflow:hidden;
}

.traffic-card:hover{
    transform:translateY(-10px);

    border-color:
    rgba(59,231,155,0.18);

    box-shadow:
    0 35px 90px rgba(0,0,0,0.08);
}

/* FEATURED */
.featured-traffic-card{
    background:#032E49;

    border:
    1px solid rgba(59,231,155,0.18);
}

.featured-traffic-card h3,
.featured-traffic-card p,
.featured-traffic-card span,
.featured-traffic-card strong{
    color:#fff !important;
}

/* =========================
   ICON
========================= */

.traffic-icon{
    width:88px;
    height:88px;

    border-radius:28px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:34px;

    margin-bottom:28px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* =========================
   CONTENT
========================= */

.traffic-content span{
    display:inline-block;

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:16px;
}

.traffic-content h3{
    color:#032E49;

    font-size:30px;
    line-height:1.3;

    margin-bottom:18px;
}

.traffic-content p{
    color:#5d6c77;

    line-height:1.9;

    margin-bottom:28px;
}

/* =========================
   INFO BOX
========================= */

.traffic-info{
    display:flex;
    flex-direction:column;
    gap:16px;
}

/* ITEM */
.traffic-info-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    padding:18px 22px;

    border-radius:20px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.08);
}

.featured-traffic-card .traffic-info-item{
    background:
    rgba(255,255,255,0.06);
}

.traffic-info-item strong{
    color:#032E49;

    font-size:15px;
}

.traffic-info-item span{
    color:#3BE79B;

    font-size:15px;
    font-weight:700;

    margin:0;
}

/* =========================
   MINI BOX
========================= */

.traffic-mini-box{
    display:flex;
    align-items:center;
    gap:14px;

    padding:18px 20px;

    border-radius:20px;

    background:
    rgba(59,231,155,0.10);

    border:
    1px solid rgba(59,231,155,0.14);
}

/* ICON */
.traffic-mini-box i{
    color:#3BE79B;

    font-size:18px;
}

/* TEXT */
.traffic-mini-box span{
    color:#032E49;

    font-size:15px;
    font-weight:600;

    margin:0;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .traffic-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .traffic-rules-section{
        padding:90px 20px;
    }

    .traffic-header h2{
        font-size:38px;
    }

    .traffic-header p{
        font-size:16px;
    }

    .traffic-grid{
        grid-template-columns:1fr;
    }

    .traffic-card{
        padding:28px 24px;
    }

    .traffic-content h3{
        font-size:26px;
    }

    .traffic-info-item{
        flex-direction:column;
        align-items:flex-start;
    }
}




/* =========================
   PRACTICE TEST SECTION
========================= */

.practice-test-section{
    position:relative;
    padding:120px 20px;
    background:#032E49;
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.practice-glow{
    position:absolute;
    border-radius:50%;
}

.practice-glow-left{
    width:620px;
    height:620px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.14),
        transparent 70%
    );

    top:-220px;
    left:-180px;
}

.practice-glow-right{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    right:-120px;
    bottom:-180px;
}

/* =========================
   HEADER
========================= */

.practice-header{
    position:relative;
    z-index:2;

    max-width:850px;

    text-align:center;

    margin:auto;
    margin-bottom:80px;
}

.practice-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.22);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

/* TITLE */
.practice-header h2{
    color:#fff;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.practice-header h2 span{
    color:#3BE79B;
}

/* TEXT */
.practice-header p{
    color:#d9e4ec;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   WRAPPER
========================= */

.practice-wrapper{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:0.95fr 1.05fr;
    gap:50px;
    align-items:center;
}

/* =========================
   IMAGE
========================= */

.practice-image{
    position:relative;

    border-radius:40px;

    overflow:hidden;

    box-shadow:
    0 40px 90px rgba(0,0,0,0.30);
}

.practice-image img{
    width:100%;
    height:900px;

    object-fit:cover;
}

/* FLOATING CARD */
.practice-floating-card{
    position:absolute;

    left:30px;
    bottom:30px;

    display:flex;
    align-items:center;
    gap:18px;

    padding:22px;

    border-radius:28px;

    background:
    rgba(255,255,255,0.10);

    border:
    1px solid rgba(255,255,255,0.12);

    backdrop-filter:blur(16px);

    box-shadow:
    0 25px 60px rgba(0,0,0,0.18);
}

/* ICON */
.practice-floating-icon{
    width:74px;
    height:74px;

    min-width:74px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:30px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* TEXT */
.practice-floating-card h4{
    color:#fff;

    font-size:24px;

    margin-bottom:6px;
}

.practice-floating-card p{
    color:#d9e4ec;

    font-size:14px;
}

/* =========================
   RIGHT SIDE
========================= */

.practice-right{
    display:flex;
    flex-direction:column;
    gap:28px;
}

/* =========================
   CARD
========================= */

.practice-card{
    padding:34px;

    border-radius:34px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.10);

    backdrop-filter:blur(14px);

    transition:0.4s ease;

    box-shadow:
    0 25px 60px rgba(0,0,0,0.12);
}

.practice-card:hover{
    transform:translateY(-6px);

    border-color:
    rgba(59,231,155,0.20);
}

/* FEATURED */
.featured-practice-card{
    background:
    linear-gradient(
        135deg,
        rgba(59,231,155,0.18),
        rgba(255,255,255,0.08)
    );

    border:
    1px solid rgba(59,231,155,0.22);
}

/* =========================
   TOP
========================= */

.practice-card-top{
    display:flex;
    align-items:center;
    gap:20px;

    margin-bottom:24px;
}

/* ICON */
.practice-icon{
    width:82px;
    height:82px;

    min-width:82px;

    border-radius:26px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:32px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* TEXT */
.practice-card-top h3{
    color:#fff;

    font-size:30px;

    margin-bottom:8px;
}

.practice-card-top span{
    color:#3BE79B;

    font-size:14px;
    font-weight:700;
}

/* PARAGRAPH */
.practice-card p{
    color:#d9e4ec;

    line-height:1.9;

    margin-bottom:28px;
}

/* =========================
   PROGRESS
========================= */

.practice-progress-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:14px;
}

.practice-progress-top span{
    color:#d9e4ec;

    font-size:14px;
}

.practice-progress-top strong{
    color:#fff;

    font-size:15px;
}

/* BAR */
.practice-bar{
    width:100%;
    height:5px;

    border-radius:50px;

    overflow:hidden;

    background:
    rgba(255,255,255,0.08);
}

/* FILL */
.practice-fill{
    height:100%;

    border-radius:50px;

    background:
    linear-gradient(
        90deg,
        #3BE79B,
        #22cb7d
    );

    box-shadow:
    0 10px 25px rgba(59,231,155,0.30);
}

/* WIDTHS */
.fill-one{
    width:96%;
}

.fill-two{
    width:94%;
}

.fill-three{
    width:97%;
}

/* =========================
   QUIZ BOX
========================= */

.practice-quiz-box{
    padding:36px;

    border-radius:36px;

    background:#fff;

    border:
    1px solid rgba(3,46,73,0.08);

    box-shadow:
    0 25px 60px rgba(0,0,0,0.08);
}

/* TOP */
.quiz-box-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    margin-bottom:28px;
}

/* BADGE */
.quiz-badge{
    display:flex;
    align-items:center;
    gap:10px;

    padding:12px 18px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.16);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;
}

/* QUESTIONS */
.quiz-box-top strong{
    color:#032E49;

    font-size:16px;
}

/* TITLE */
.practice-quiz-box h3{
    color:#032E49;

    font-size:34px;

    line-height:1.3;

    margin-bottom:18px;
}

/* TEXT */
.practice-quiz-box p{
    color:#5d6c77;

    line-height:1.9;

    margin-bottom:30px;
}

/* BUTTON */
.practice-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:18px 32px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    color:#032E49;

    text-decoration:none;

    font-size:15px;
    font-weight:700;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.25);
}

.practice-btn:hover{
    transform:translateY(-5px);

    box-shadow:
    0 28px 60px rgba(59,231,155,0.35);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .practice-wrapper{
        grid-template-columns:1fr;
    }

    .practice-image{
        max-width:700px;
    }
}

@media(max-width:768px){

    .practice-test-section{
        padding:90px 20px;
    }

    .practice-header h2{
        font-size:38px;
    }

    .practice-header p{
        font-size:16px;
    }

    .practice-image img{
        height:520px;
    }

    .practice-floating-card{
        position:relative;

        left:auto;
        bottom:auto;

        margin:20px;
    }

    .practice-card{
        padding:28px 24px;
    }

    .practice-card-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .practice-card-top h3{
        font-size:26px;
    }

    .practice-quiz-box{
        padding:28px 24px;
    }

    .quiz-box-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .practice-quiz-box h3{
        font-size:28px;
    }

    .practice-btn{
        width:100%;
    }
}


/* =========================
   LEARNING VIDEOS SECTION
========================= */

.learning-videos-section{
    position:relative;
    padding:120px 20px;
    background:#fff;
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.videos-glow{
    position:absolute;
    border-radius:50%;
}

.videos-glow-left{
    width:520px;
    height:520px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    top:-180px;
    left:-180px;
}

.videos-glow-right{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.08),
        transparent 70%
    );

    right:-120px;
    bottom:-120px;
}

/* =========================
   HEADER
========================= */

.videos-header{
    position:relative;
    z-index:2;

    max-width:850px;

    text-align:center;

    margin:auto;
    margin-bottom:80px;
}

.videos-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.22);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

/* TITLE */
.videos-header h2{
    color:#032E49;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.videos-header h2 span{
    color:#3BE79B;
}

/* TEXT */
.videos-header p{
    color:#5d6c77;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   GRID
========================= */

.videos-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

/* =========================
   VIDEO CARD
========================= */

.video-card{
    position:relative;

    border-radius:36px;

    overflow:hidden;

    background:#fff;

    border:
    1px solid rgba(3,46,73,0.08);

    transition:0.4s ease;

    box-shadow:
    0 25px 60px rgba(0,0,0,0.05);
}

.video-card:hover{
    transform:translateY(-10px);

    box-shadow:
    0 35px 90px rgba(0,0,0,0.10);
}

/* FEATURED */
.featured-video-card{
    border:
    1px solid rgba(59,231,155,0.22);

    box-shadow:
    0 35px 90px rgba(59,231,155,0.12);
}

/* =========================
   THUMB
========================= */

.video-thumb{
    position:relative;

    height:320px;

    overflow:hidden;
}

.video-thumb img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.6s ease;
}

.video-card:hover .video-thumb img{
    transform:scale(1.08);
}

/* OVERLAY */
.video-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(3,46,73,0.82),
        rgba(3,46,73,0.18)
    );
}

/* =========================
   PLAY BUTTON
========================= */

.video-play-btn{
    position:absolute;

    top:50%;
    left:50%;

    transform:
    translate(-50%,-50%);

    width:88px;
    height:88px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:28px;

    cursor:pointer;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.30);
}

.video-card:hover .video-play-btn{
    transform:
    translate(-50%,-50%)
    scale(1.08);
}

/* DURATION */
.video-duration{
    position:absolute;

    right:20px;
    bottom:20px;

    padding:10px 16px;

    border-radius:50px;

    background:
    rgba(255,255,255,0.14);

    border:
    1px solid rgba(255,255,255,0.14);

    backdrop-filter:blur(12px);

    color:#fff;

    font-size:13px;
    font-weight:700;
}

/* =========================
   CONTENT
========================= */

.video-content{
    padding:34px;
}

.video-content span{
    display:inline-block;

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:16px;
}

.video-content h3{
    color:#032E49;

    font-size:30px;
    line-height:1.3;

    margin-bottom:18px;
}

.video-content p{
    color:#5d6c77;

    line-height:1.9;
}

/* =========================
   FOOTER
========================= */

.video-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-top:30px;
}

/* STATS */
.video-stats{
    display:flex;
    flex-direction:column;
    gap:12px;
}

/* ITEM */
.video-stat{
    display:flex;
    align-items:center;
    gap:10px;
}

.video-stat i{
    color:#3BE79B;

    font-size:15px;
}

.video-stat span{
    color:#5d6c77;

    font-size:14px;

    margin:0;
}

/* BUTTON */
.video-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:16px 22px;

    border-radius:18px;

    background:#032E49;

    color:#fff;

    text-decoration:none;

    font-size:14px;
    font-weight:700;

    transition:0.4s ease;
}

.video-btn:hover{
    background:#3BE79B;

    color:#032E49;

    transform:translateY(-4px);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .videos-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .learning-videos-section{
        padding:90px 20px;
    }

    .videos-header h2{
        font-size:38px;
    }

    .videos-header p{
        font-size:16px;
    }

    .videos-grid{
        grid-template-columns:1fr;
    }

    .video-thumb{
        height:260px;
    }

    .video-content{
        padding:28px 24px;
    }

    .video-content h3{
        font-size:26px;
    }

    .video-footer{
        flex-direction:column;
        align-items:flex-start;
    }

    .video-btn{
        width:100%;
    }
}


/* =========================
   REVIEWS HERO SECTION
========================= */

.reviews-hero-section{
    position:relative;
    min-height:100vh;

    display:flex;
    align-items:center;

    overflow:hidden;

    padding:120px 20px;

    background:#032E49;
}

/* =========================
   BACKGROUND
========================= */

.reviews-hero-bg{
    position:absolute;
    inset:0;
    z-index:1;
}

.reviews-hero-bg img{
    width:100%;
    height:100%;

    object-fit:cover;
}

/* =========================
   OVERLAY
========================= */

.reviews-hero-overlay{
    position:absolute;
    inset:0;
    z-index:2;

    background:
    linear-gradient(
        90deg,
        rgba(3,46,73,0.96) 0%,
        rgba(3,46,73,0.92) 40%,
        rgba(3,46,73,0.72) 72%,
        rgba(3,46,73,0.42) 100%
    );
}

/* =========================
   GLOW EFFECTS
========================= */

.reviews-glow{
    position:absolute;
    border-radius:50%;
    z-index:2;
}

.glow-one{
    width:620px;
    height:620px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.16),
        transparent 70%
    );

    top:-220px;
    right:-180px;
}

.glow-two{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    left:-140px;
    bottom:-180px;
}

/* =========================
   WRAPPER
========================= */

.reviews-hero-wrapper{
    position:relative;
    z-index:5;

    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:60px;
    align-items:center;
}

/* =========================
   LEFT CONTENT
========================= */

.reviews-hero-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.22);

    backdrop-filter:blur(10px);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:28px;
}

/* TITLE */
.reviews-hero-content h1{
    color:#fff;

    font-size:72px;
    line-height:1.05;

    font-weight:800;

    margin-bottom:28px;

    max-width:760px;
}

.reviews-hero-content h1 span{
    color:#3BE79B;
}

/* TEXT */
.reviews-hero-content p{
    color:#d9e4ec;

    font-size:18px;
    line-height:1.9;

    max-width:650px;
}

/* =========================
   BUTTONS
========================= */

.reviews-hero-buttons{
    display:flex;
    gap:18px;

    margin-top:40px;

    flex-wrap:wrap;
}

/* PRIMARY BTN */
.reviews-primary-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:18px 34px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    color:#032E49;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.28);
}

.reviews-primary-btn:hover{
    transform:translateY(-5px);

    box-shadow:
    0 28px 60px rgba(59,231,155,0.35);
}

/* OUTLINE BTN */
.reviews-outline-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:18px 34px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.12);

    backdrop-filter:blur(10px);

    color:#fff;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;
}

.reviews-outline-btn:hover{
    background:#fff;

    color:#032E49;

    transform:translateY(-5px);
}

/* =========================
   STATS
========================= */

.reviews-hero-stats{
    display:flex;
    gap:20px;

    margin-top:55px;

    flex-wrap:wrap;
}

/* ITEM */
.reviews-stat-item{
    min-width:190px;

    padding:30px 25px;

    border-radius:24px;

    background:
    rgba(255,255,255,0.07);

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(12px);

    transition:0.4s ease;
}

.reviews-stat-item:hover{
    transform:translateY(-5px);

    border-color:
    rgba(59,231,155,0.35);
}

.reviews-stat-item h3{
    color:#3BE79B;

    font-size:44px;

    margin-bottom:10px;
}

.reviews-stat-item p{
    color:#fff;

    font-size:15px;
}

/* =========================
   RIGHT SIDE
========================= */

.reviews-hero-right{
    position:relative;
}

/* MAIN IMAGE */
.reviews-main-image{
    position:relative;
    border-radius:40px;
    overflow:hidden;
    box-shadow:
    0 40px 90px rgba(0,0,0,0.35);
    height: 650px;
}

.reviews-main-image img{
    width:100%;
    height:650px;
    object-fit:cover;
}

/* =========================
   FLOATING CARDS
========================= */

.reviews-floating-card{
    position:absolute;

    padding:24px;

    border-radius:28px;

    background:
    rgba(255,255,255,0.10);

    border:
    1px solid rgba(255,255,255,0.12);

    backdrop-filter:blur(16px);

    box-shadow:
    0 25px 60px rgba(0,0,0,0.18);

    transition:0.4s ease;
}

.reviews-floating-card:hover{
    transform:translateY(-6px);
}

/* POSITIONS */
.review-card-one{
    top:40px;
    left:-80px;

    width:360px;
}

.card-two{
    right:-40px;
    bottom:40px;

    display:flex;
    align-items:center;
    gap:18px;
}

/* =========================
   CARD TOP
========================= */

.reviews-card-top{
    display:flex;
    align-items:center;
    gap:16px;

    margin-bottom:20px;
}

/* IMAGE */
.reviews-card-top img{
    width:72px;
    height:72px;

    border-radius:50%;

    object-fit:cover;

    border:
    4px solid rgba(59,231,155,0.20);
}

/* TEXT */
.reviews-card-top h4{
    color:#fff;

    font-size:22px;

    margin-bottom:6px;
}

.reviews-card-top span{
    color:#3BE79B;

    font-size:14px;
    font-weight:700;
}

/* STARS */
.reviews-stars{
    display:flex;
    gap:8px;

    margin-bottom:18px;
}

.reviews-stars i{
    color:#3BE79B;

    font-size:16px;
}

/* TEXT */
.reviews-floating-card p{
    color:#d9e4ec;

    line-height:1.8;
}

/* =========================
   ICON CARD
========================= */

.reviews-floating-icon{
    width:74px;
    height:74px;

    min-width:74px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:30px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

.card-two h4{
    color:#fff;

    font-size:22px;

    margin-bottom:6px;
}

.card-two p{
    color:#d9e4ec;

    font-size:14px;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .reviews-hero-content h1{
        font-size:58px;
    }

    .card-one{
        left:0;
    }

    .card-two{
        right:0;
    }
}

@media(max-width:992px){

    .reviews-hero-section{
        min-height:auto;
    }

    .reviews-hero-wrapper{
        grid-template-columns:1fr;
    }

    .reviews-hero-content h1{
        font-size:48px;
    }

    .reviews-hero-right{
        max-width:700px;
    }
}

@media(max-width:768px){

    .reviews-hero-section{
        padding:90px 20px;
    }

    .reviews-hero-content h1{
        font-size:38px;
    }

    .reviews-hero-content p{
        font-size:16px;
    }

    .reviews-hero-buttons{
        flex-direction:column;
    }

    .reviews-primary-btn,
    .reviews-outline-btn{
        width:100%;
    }

    .reviews-stat-item{
        width:100%;
    }

    .reviews-main-image img{
        height:520px;
    }

    .reviews-floating-card{
        position:relative;

        width:100% !important;

        margin-top:20px;
    }

    .card-one,
    .card-two{
        top:auto;
        left:auto;
        right:auto;
        bottom:auto;
    }

    .card-two{
        flex-direction:column;
        align-items:flex-start;
    }
}


/* =========================
   STUDENT TESTIMONIALS
========================= */

.student-testimonials-section{
    position:relative;
    padding:120px 20px;
    background:#fff;
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.testimonial-glow{
    position:absolute;
    border-radius:50%;
}

.testimonial-glow-left{
    width:520px;
    height:520px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    top:-180px;
    left:-180px;
}

.testimonial-glow-right{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.08),
        transparent 70%
    );

    right:-120px;
    bottom:-120px;
}

/* =========================
   HEADER
========================= */

.testimonial-header{
    position:relative;
    z-index:2;

    max-width:850px;

    text-align:center;

    margin:auto;
    margin-bottom:80px;
}

.testimonial-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.22);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

/* TITLE */
.testimonial-header h2{
    color:#032E49;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.testimonial-header h2 span{
    color:#3BE79B;
}

/* TEXT */
.testimonial-header p{
    color:#5d6c77;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   GRID
========================= */

.testimonial-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

/* =========================
   CARD
========================= */

.testimonial-card{
    position:relative;

    padding:36px;

    border-radius:36px;

    background:#fff;

    border:
    1px solid rgba(3,46,73,0.08);

    transition:0.4s ease;

    box-shadow:
    0 25px 60px rgba(0,0,0,0.05);

    overflow:hidden;
}

.testimonial-card:hover{
    transform:translateY(-10px);

    box-shadow:
    0 35px 90px rgba(0,0,0,0.10);
}

/* FEATURED */
.featured-testimonial-card{
    background:#032E49;

    border:
    1px solid rgba(59,231,155,0.18);
}

.featured-testimonial-card h4,
.featured-testimonial-card p,
.featured-testimonial-card span,
.featured-testimonial-card strong{
    color:#fff !important;
}

/* =========================
   TOP
========================= */

.testimonial-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-bottom:28px;
}

/* USER */
.testimonial-user{
    display:flex;
    align-items:center;
    gap:16px;
}

/* IMAGE */
.testimonial-user img{
    width:74px;
    height:74px;

    border-radius:50%;

    object-fit:cover;

    border:
    4px solid rgba(59,231,155,0.20);
}

/* TEXT */
.testimonial-user h4{
    color:#032E49;

    font-size:24px;

    margin-bottom:6px;
}

.testimonial-user span{
    color:#3BE79B;

    font-size:14px;
    font-weight:700;
}

/* QUOTE */
.testimonial-quote{
    width:68px;
    height:68px;

    min-width:68px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:26px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* =========================
   STARS
========================= */

.testimonial-stars{
    display:flex;
    gap:8px;

    margin-bottom:24px;
}

.testimonial-stars i{
    color:#3BE79B;

    font-size:16px;
}

/* =========================
   TEXT
========================= */

.testimonial-card p{
    color:#5d6c77;

    line-height:1.9;

    margin-bottom:30px;
}

/* =========================
   FOOTER
========================= */

.testimonial-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

/* VERIFIED */
.verified-badge{
    display:flex;
    align-items:center;
    gap:10px;

    padding:12px 18px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.16);
}

.verified-badge i{
    color:#3BE79B;

    font-size:15px;
}

.verified-badge span{
    color:#032E49;

    font-size:13px;
    font-weight:700;
}

/* DATE */
.testimonial-footer strong{
    color:#5d6c77;

    font-size:14px;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .testimonial-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .student-testimonials-section{
        padding:90px 20px;
    }

    .testimonial-header h2{
        font-size:38px;
    }

    .testimonial-header p{
        font-size:16px;
    }

    .testimonial-grid{
        grid-template-columns:1fr;
    }

    .testimonial-card{
        padding:28px 24px;
    }

    .testimonial-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .testimonial-user h4{
        font-size:22px;
    }

    .testimonial-footer{
        flex-direction:column;
        align-items:flex-start;
    }
}




/* =========================
   PREMIUM VIDEO TESTIMONIALS
========================= */

.premium-video-testimonials{
    position:relative;
    padding:120px 20px;
    background:#032E49;
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.premium-video-glow{
    position:absolute;
    border-radius:50%;
}

.glow-left{
    width:620px;
    height:620px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.16),
        transparent 70%
    );

    top:-220px;
    left:-180px;
}

.glow-right{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    right:-120px;
    bottom:-180px;
}

/* =========================
   HEADER
========================= */

.premium-video-header{
    position:relative;
    z-index:2;

    max-width:850px;

    text-align:center;

    margin:auto;
    margin-bottom:80px;
}

.premium-video-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.20);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

.premium-video-header h2{
    color:#fff;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.premium-video-header h2 span{
    color:#3BE79B;
}

.premium-video-header p{
    color:#d9e4ec;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   WRAPPER
========================= */

.premium-video-wrapper{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:30px;
}

/* =========================
   MAIN VIDEO
========================= */

.premium-main-video{
    position:relative;

    min-height:760px;

    border-radius:42px;

    overflow:hidden;

    box-shadow:
    0 40px 100px rgba(0,0,0,0.25);
}

.premium-main-video img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.8s ease;
}

.premium-main-video:hover img{
    transform:scale(1.06);
}

/* OVERLAY */
.premium-main-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(3,46,73,0.96),
        rgba(3,46,73,0.18)
    );
}

/* =========================
   PLAY BUTTON
========================= */

.premium-main-play{
    position:absolute;

    top:50%;
    left:50%;

    transform:
    translate(-50%,-50%);

    width:110px;
    height:110px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:34px;

    cursor:pointer;

    z-index:3;

    transition:0.4s ease;

    box-shadow:
    0 25px 60px rgba(59,231,155,0.30);
}

.premium-main-video:hover .premium-main-play{
    transform:
    translate(-50%,-50%)
    scale(1.08);
}

/* =========================
   CONTENT
========================= */

.premium-main-content{
    position:absolute;

    left:0;
    bottom:0;

    width:100%;

    padding:50px;

    z-index:3;
}

/* BADGE */
.premium-main-badge{
    display:inline-flex;
    align-items:center;
    gap:12px;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.14);

    border:
    1px solid rgba(59,231,155,0.20);

    margin-bottom:28px;
}

.premium-main-badge i{
    color:#3BE79B;
}

.premium-main-badge span{
    color:#3BE79B;

    font-size:14px;
    font-weight:700;
}

/* TITLE */
.premium-main-content h3{
    color:#fff;
    font-size:50px;
    line-height:1.1;
    margin-bottom:24px;
    max-width:700px;
}

/* TEXT */
.premium-main-content p{
    color:#d9e4ec;

    line-height:1.9;

    max-width:700px;

    margin-bottom:40px;
}

/* =========================
   BOTTOM
========================= */

.premium-main-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

/* USER */
.premium-main-user{
    display:flex;
    align-items:center;
    gap:16px;
}

.premium-main-user img{
    width:74px;
    height:74px;

    border-radius:50%;

    object-fit:cover;

    border:
    4px solid rgba(59,231,155,0.20);
}

.premium-main-user h4{
    color:#fff;

    font-size:22px;

    margin-bottom:6px;
}

.premium-main-user span{
    color:#3BE79B;

    font-size:14px;
}

/* STATS */
.premium-main-stats{
    display:flex;
    gap:14px;
}

.premium-main-stat{
    display:flex;
    align-items:center;
    gap:10px;

    padding:14px 18px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.08);
}

.premium-main-stat i{
    color:#3BE79B;
}

.premium-main-stat span{
    color:#fff;

    font-size:14px;
}

/* =========================
   RIGHT LIST
========================= */

.premium-video-list{
    display:flex;
    flex-direction:column;
    gap:24px;
}

/* ITEM */
.premium-video-item1{
    padding:20px;
    border-radius:30px;
    background:
    rgba(255,255,255,0.08);
    border:
    1px solid rgba(255,255,255,0.10);
    backdrop-filter:blur(14px);
    transition:0.4s ease;
}
.premium-video-item{
    display:flex;
    gap:20px;
}

.premium-video-item:hover{
    transform:translateY(-6px);

    border-color:
    rgba(59,231,155,0.20);
}

/* THUMB */
.premium-video-thumb{
    position:relative;

    width:220px;
    min-width:220px;

    height:220px;

    border-radius:24px;

    overflow:hidden;
}

.premium-video-thumb img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.6s ease;
}

.premium-video-item:hover img{
    transform:scale(1.08);
}

/* OVERLAY */
.premium-thumb-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(3,46,73,0.88),
        rgba(3,46,73,0.18)
    );
}

/* PLAY */
.premium-thumb-play{
    position:absolute;

    top:50%;
    left:50%;

    transform:
    translate(-50%,-50%);

    width:72px;
    height:72px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:24px;
}

/* =========================
   INFO
========================= */

.premium-video-info{
    flex:1;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.premium-video-info span{
    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:14px;
}

.premium-video-info h4{
    color:#fff;
    font-size:25px;
    line-height:1.3;
    margin-bottom:18px;
}

.premium-video-info p{
    color:#d9e4ec;
    line-height:1.8;
    margin-bottom:26px;
}

/* META */
.premium-video-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top: 20px;
}

/* AUTHOR */
.premium-video-author{
    display:flex;
    align-items:center;
    gap:12px;
}

.premium-video-author img{
    width:54px;
    height:54px;

    border-radius:50%;

    object-fit:cover;
}

.premium-video-author strong{
    color:#fff;

    font-size:15px;
}

/* TIME */
.premium-video-time{
    padding:10px 16px;

    border-radius:50px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.08);

    color:#fff !important;

    font-size:13px !important;
}

/* =========================
VIDEO MODAL
========================= */

.video-modal{
    position:fixed;

    inset:0;

    width:100%;
    height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,0.75);

    backdrop-filter:blur(10px);

    z-index:99999;

    opacity:0;
    visibility:hidden;

    transition:0.4s ease;
}

/* ACTIVE */
.video-modal.active{
    opacity:1;
    visibility:visible;
}

/* CONTAINER */
.video-container{
    position:relative;

    width:90%;
    max-width:1200px;

    border-radius:30px;

    overflow:hidden;

    transform:scale(0.8);

    transition:0.4s ease;

    box-shadow:
    0 40px 100px rgba(0,0,0,0.45);
}

.video-modal.active .video-container{
    transform:scale(1);
}

/* IFRAME */
.video-container iframe{
    width:100%;
    height:680px;

    display:block;
}

/* CLOSE */
.video-close{
    position:absolute;

    top:-60px;
    right:0;

    width:50px;
    height:50px;

    border-radius:50%;

    background:#3BE79B;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:24px;

    cursor:pointer;

    z-index:5;

    transition:0.3s ease;
}

.video-close:hover{
    transform:rotate(90deg);
}

/* MAKE PLAY BUTTON CLICKABLE */
.premium-main-play{
    z-index:50;
    cursor:pointer;
}

/* MAIN CONTENT */
.premium-main-content{
    pointer-events:none;
}

/* ENABLE PLAY BUTTON */
.premium-main-play i{
    pointer-events:none;
}

/* SMALL PLAY BUTTON */
.premium-thumb-play{
    z-index:50;
    cursor:pointer;
}
.open-video{
    cursor:pointer;
    z-index:100;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .premium-video-wrapper{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .premium-video-testimonials{
        padding:90px 20px;
    }

    .premium-video-header h2{
        font-size:38px;
    }

    .premium-video-header p{
        font-size:16px;
    }

    .premium-main-video{
        min-height:560px;
    }

    .premium-main-content{
        padding:30px 24px;
    }

    .premium-main-content h3{
        font-size:34px;
    }

    .premium-main-bottom{
        flex-direction:column;
        align-items:flex-start;
    }

    .premium-video-item{
        flex-direction:column;
    }

    .premium-video-thumb{
        width:100%;
        min-width:100%;
        height:240px;
    }

    .premium-video-info h4{
        font-size:24px;
    }

    .premium-video-meta{
        flex-direction:column;
        align-items:flex-start;
    }
    .video-container iframe{
        height:260px;
    }

    .video-close{
        top:-55px;
    }
}


/* =========================
   REVIEW STATISTICS SECTION
========================= */

.review-statistics-section{
    position:relative;
    padding:120px 20px;
    background:#fff;
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.review-stats-glow{
    position:absolute;
    border-radius:50%;
}

.stats-glow-left{
    width:520px;
    height:520px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    top:-180px;
    left:-180px;
}

.stats-glow-right{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.08),
        transparent 70%
    );

    right:-120px;
    bottom:-120px;
}

/* =========================
   HEADER
========================= */

.review-stats-header{
    position:relative;
    z-index:2;

    max-width:850px;

    text-align:center;

    margin:auto;
    margin-bottom:80px;
}

.review-stats-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.22);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

/* TITLE */
.review-stats-header h2{
    color:#032E49;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.review-stats-header h2 span{
    color:#3BE79B;
}

/* TEXT */
.review-stats-header p{
    color:#5d6c77;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   STATS GRID
========================= */

.review-stats-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;

    margin-bottom:70px;
}

/* =========================
   CARD
========================= */

.review-stat-card{
    position:relative;

    padding:36px 30px;

    border-radius:36px;

    background:#f7fafc;

    border:
    1px solid rgba(3,46,73,0.06);

    text-align:center;

    transition:0.4s ease;

    box-shadow:
    0 25px 60px rgba(0,0,0,0.04);
}

.review-stat-card:hover{
    transform:translateY(-10px);

    border-color:
    rgba(59,231,155,0.18);

    box-shadow:
    0 35px 90px rgba(0,0,0,0.08);
}

/* FEATURED */
.featured-review-stat{
    background:#032E49;

    border:
    1px solid rgba(59,231,155,0.20);
}

.featured-review-stat h3,
.featured-review-stat p,
.featured-review-stat span{
    color:#fff !important;
}

/* ICON */
.review-stat-icon{
    width:92px;
    height:92px;

    margin:auto;
    margin-bottom:28px;

    border-radius:30px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:34px;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.22);
}

/* NUMBER */
.review-stat-card h3{
    color:#032E49;

    font-size:52px;

    margin-bottom:14px;
}

/* TEXT */
.review-stat-card p{
    color:#5d6c77;

    line-height:1.8;

    margin-bottom:24px;
}

/* BOTTOM */
.review-stat-bottom{
    padding-top:22px;

    border-top:
    1px solid rgba(3,46,73,0.08);
}

.review-stat-bottom span{
    color:#3BE79B;

    font-size:14px;
    font-weight:700;
}

/* =========================
   ANALYTICS WRAPPER
========================= */

.review-analytics-wrapper{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;

    padding:50px;

    border-radius:42px;

    background:#032E49;

    overflow:hidden;

    box-shadow:
    0 35px 90px rgba(0,0,0,0.12);
}

/* =========================
   LEFT SIDE
========================= */

.analytics-mini-title{
    display:inline-block;

    padding:12px 20px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.16);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

/* TITLE */
.review-analytics-left h3{
    color:#fff;

    font-size:48px;
    line-height:1.2;

    margin-bottom:24px;
}

/* TEXT */
.review-analytics-left p{
    color:#d9e4ec;

    line-height:1.9;

    margin-bottom:36px;
}

/* FEATURES */
.analytics-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

/* ITEM */
.analytics-feature{
    display:flex;
    align-items:center;
    gap:14px;

    padding:18px 20px;

    border-radius:20px;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.08);
}

/* ICON */
.analytics-feature i{
    color:#3BE79B;

    font-size:18px;
}

/* TEXT */
.analytics-feature span{
    color:#fff;

    font-size:15px;
    font-weight:600;
}

/* =========================
   RIGHT SIDE
========================= */

.review-analytics-right{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:30px;
}

/* ITEM */
.analytics-progress-item{
    padding:28px;

    border-radius:28px;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.08);
}

/* TOP */
.analytics-progress-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:18px;
}

.analytics-progress-top span{
    color:#fff;

    font-size:15px;
    font-weight:600;
}

.analytics-progress-top strong{
    color:#3BE79B;

    font-size:16px;
}

/* BAR */
.analytics-progress-bar{
    width:100%;
    height:5px;
    border-radius:50px;
    overflow:hidden;
    background:rgba(255,255,255,0.08);
}

/* FILL */
.analytics-progress-fill{
    height:100%;

    border-radius:50px;

    background:
    linear-gradient(
        90deg,
        #3BE79B,
        #22cb7d
    );

    box-shadow:
    0 10px 25px rgba(59,231,155,0.30);
}

.fill-one{
    width:99%;
}

.fill-two{
    width:97%;
}

.fill-three{
    width:96%;
}

.fill-four{
    width:98%;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .review-stats-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .review-analytics-wrapper{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .review-statistics-section{
        padding:90px 20px;
    }

    .review-stats-header h2{
        font-size:38px;
    }

    .review-stats-header p{
        font-size:16px;
    }

    .review-stats-grid{
        grid-template-columns:1fr;
    }

    .review-stat-card{
        padding:30px 24px;
    }

    .review-analytics-wrapper{
        padding:30px 24px;
    }

    .review-analytics-left h3{
        font-size:32px;
    }

    .analytics-features{
        grid-template-columns:1fr;
    }
}



/* =========================
   LEAVE REVIEW SECTION
========================= */

.leave-review-section{
    position:relative;
    padding:120px 20px;
    background:#032E49;
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.leave-review-glow{
    position:absolute;
    border-radius:50%;
}

.glow-left{
    width:620px;
    height:620px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.16),
        transparent 70%
    );

    top:-220px;
    left:-180px;
}

.glow-right{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    right:-120px;
    bottom:-180px;
}

/* =========================
   WRAPPER
========================= */

.leave-review-wrapper{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

/* =========================
   LEFT CONTENT
========================= */

.leave-review-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.18);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

/* TITLE */
.leave-review-left h2{
    color:#fff;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.leave-review-left h2 span{
    color:#3BE79B;
}

/* TEXT */
.leave-review-left p{
    color:#d9e4ec;

    line-height:1.9;

    font-size:18px;

    margin-bottom:40px;
}

/* =========================
   FEATURES
========================= */

.leave-review-features{
    display:flex;
    flex-direction:column;
    gap:24px;
}

/* ITEM */
.leave-review-feature{
    display:flex;
    gap:20px;

    padding:24px;

    border-radius:28px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.10);

    backdrop-filter:blur(14px);

    transition:0.4s ease;
}

.leave-review-feature:hover{
    transform:translateY(-5px);

    border-color:
    rgba(59,231,155,0.20);
}

/* ICON */
.leave-feature-icon{
    width:78px;
    height:78px;

    min-width:78px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:28px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* TEXT */
.leave-review-feature h4{
    color:#fff;

    font-size:24px;

    margin-bottom:10px;
}

.leave-review-feature p{
    color:#d9e4ec;

    font-size:15px;

    margin:0;
}

/* =========================
   FORM BOX
========================= */

.leave-review-form-box{
    padding:42px;

    border-radius:42px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.10);

    backdrop-filter:blur(18px);

    box-shadow:
    0 35px 90px rgba(0,0,0,0.18);
}

/* HEADER */
.review-form-header{
    margin-bottom:34px;
}

.review-form-header h3{
    color:#fff;

    font-size:38px;

    margin-bottom:12px;
}

.review-form-header p{
    color:#d9e4ec;
}

/* =========================
   FORM
========================= */

.leave-review-form{
    display:flex;
    flex-direction:column;
    gap:24px;
}

/* GROUP */
.review-input-group{
    display:flex;
    flex-direction:column;
    gap:12px;
}

/* LABEL */
.review-input-group label{
    color:#fff;
    font-size:15px;
    font-weight:600;
}

/* INPUT */
.review-input-group input,
.review-input-group select,
.review-input-group textarea{
    width:100%;
    padding:18px 22px;
    border-radius:20px;
    background:#032E49;
    border:
    1px solid rgba(255,255,255,0.10);
    outline:none;
    color:#fff;
    font-size:15px;
    transition:0.4s ease;
}

/* SELECT — CUSTOM ARROW */
.review-input-group select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    padding-right:60px;
    background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233BE79B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 20px center;
    background-size:14px;
    cursor:pointer;
}

.review-input-group select::-ms-expand{
    display:none;
}

.review-input-group select option{
    background:#032E49;
    color:#fff;
}

/* TEXTAREA */
.review-input-group textarea{
    min-height:180px;
    resize:none;
}

/* PLACEHOLDER */
.review-input-group input::placeholder,
.review-input-group textarea::placeholder{
    color:#d9e4ec;
}

/* FOCUS */
.review-input-group input:focus,
.review-input-group select:focus,
.review-input-group textarea:focus{
    border-color:rgba(59,231,155,0.35);
    box-shadow:0 0 0 4px rgba(59,231,155,0.08);
}

/* =========================
   STARS
========================= */

.review-stars-select{
    display:flex;
    gap:12px;
}

.review-stars-select i{
    font-size:28px;
    color:
    rgba(255,255,255,0.30);
    cursor:pointer;
    transition:0.3s ease;
    
}

.review-stars-select i:hover{
    transform:scale(1.1);
}

.review-stars-select .active-star{
    color:#3BE79B;
}

/* =========================
   UPLOAD BOX
========================= */

.review-upload-box{
    position:relative;

    padding:40px 24px;

    border-radius:28px;

    border:
    2px dashed rgba(59,231,155,0.25);

    text-align:center;

    background:
    rgba(255,255,255,0.04);
}

/* ICON */
.review-upload-box i{
    color:#3BE79B;

    font-size:42px;

    margin-bottom:20px;
}

/* TITLE */
.review-upload-box h4{
    color:#fff;

    font-size:24px;

    margin-bottom:12px;
}

/* TEXT */
.review-upload-box p{
    color:#d9e4ec;

    margin-bottom:20px;
}

/* FILE */
/* FILE INPUT ONLY */
.review-upload-box input[type="file"]{
    width:260px;

    padding:10px 14px;

    border-radius:14px;

    border:
    1px solid rgba(59,231,155,0.25);

    background:
    rgba(255,255,255,0.06);

    color:#d9e4ec;

    font-size:14px;

    backdrop-filter:blur(10px);

    cursor:pointer;

    transition:0.4s ease;
}

/* HOVER */
.review-upload-box input[type="file"]:hover{
    border-color:#3BE79B;

    box-shadow:
    0 10px 25px rgba(59,231,155,0.15);
}

/* CHOOSE FILE BUTTON */
.review-upload-box input[type="file"]::file-selector-button{
    padding:10px 18px;

    border:none;

    border-radius:10px;

    margin-right:14px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    color:#032E49;

    font-weight:700;

    cursor:pointer;

    transition:0.3s ease;
}

/* BUTTON HOVER */
.review-upload-box input[type="file"]::file-selector-button:hover{
    transform:scale(1.05);
}

/* =========================
   BUTTON
========================= */

.submit-review-btn{
    width:100%;

    padding:20px;

    border:none;

    border-radius:22px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    color:#032E49;

    font-size:16px;
    font-weight:700;

    cursor:pointer;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.25);
}

.submit-review-btn:hover{
    transform:translateY(-5px);

    box-shadow:
    0 30px 70px rgba(59,231,155,0.35);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .leave-review-wrapper{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .leave-review-section{
        padding:90px 20px;
    }

    .leave-review-left h2{
        font-size:38px;
    }

    .leave-review-left p{
        font-size:16px;
    }

    .leave-review-feature{
        flex-direction:column;
    }

    .leave-review-form-box{
        padding:30px 24px;
    }

    .review-form-header h3{
        font-size:30px;
    }
}


/* =========================
   CONTACT HERO SECTION
========================= */

.contact-hero-section{
    position:relative;
    min-height:100vh;

    display:flex;
    align-items:center;

    overflow:hidden;

    padding:120px 20px;

    background:#032E49;
}

/* =========================
   BACKGROUND
========================= */

.contact-hero-bg{
    position:absolute;
    inset:0;
    z-index:1;
}

.contact-hero-bg img{
    width:100%;
    height:100%;

    object-fit:cover;
}

/* =========================
   OVERLAY
========================= */

.contact-hero-overlay{
    position:absolute;
    inset:0;
    z-index:2;

    background:
    linear-gradient(
        90deg,
        rgba(3,46,73,0.96) 0%,
        rgba(3,46,73,0.92) 38%,
        rgba(3,46,73,0.70) 72%,
        rgba(3,46,73,0.42) 100%
    );
}

/* =========================
   GLOW EFFECTS
========================= */

.contact-glow{
    position:absolute;
    border-radius:50%;
    z-index:2;
}

.glow-one{
    width:620px;
    height:620px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.16),
        transparent 70%
    );

    top:-220px;
    right:-180px;
}

.glow-two{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    left:-140px;
    bottom:-180px;
}

/* =========================
   WRAPPER
========================= */

.contact-hero-wrapper{
    position:relative;
    z-index:5;

    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:60px;
    align-items:center;
}

/* =========================
   LEFT CONTENT
========================= */

.contact-hero-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.22);

    backdrop-filter:blur(10px);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:28px;
}

/* TITLE */
.contact-hero-content h1{
    color:#fff;

    font-size:72px;
    line-height:1.05;

    font-weight:800;

    margin-bottom:28px;

    max-width:760px;
}

.contact-hero-content h1 span{
    color:#3BE79B;
}

/* TEXT */
.contact-hero-content p{
    color:#d9e4ec;

    font-size:18px;
    line-height:1.9;

    max-width:650px;
}

/* =========================
   BUTTONS
========================= */

.contact-hero-buttons{
    display:flex;
    gap:18px;

    margin-top:40px;

    flex-wrap:wrap;
}

/* PRIMARY BTN */
.contact-primary-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:18px 34px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    color:#032E49;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.28);
}

.contact-primary-btn:hover{
    transform:translateY(-5px);

    box-shadow:
    0 28px 60px rgba(59,231,155,0.35);
}

/* OUTLINE BTN */
.contact-outline-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:18px 34px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.12);

    backdrop-filter:blur(10px);

    color:#fff;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;
}

.contact-outline-btn:hover{
    background:#fff;

    color:#032E49;

    transform:translateY(-5px);
}

/* =========================
   STATS
========================= */

.contact-hero-stats{
    display:flex;
    gap:20px;

    margin-top:55px;

    flex-wrap:wrap;
}

/* ITEM */
.contact-stat-item{
    min-width:190px;

    padding:30px 25px;

    border-radius:24px;

    background:
    rgba(255,255,255,0.07);

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(12px);

    transition:0.4s ease;
}

.contact-stat-item:hover{
    transform:translateY(-5px);

    border-color:
    rgba(59,231,155,0.35);
}

.contact-stat-item h3{
    color:#3BE79B;

    font-size:44px;

    margin-bottom:10px;
}

.contact-stat-item p{
    color:#fff;

    font-size:15px;
}

/* =========================
   RIGHT SIDE
========================= */

.contact-hero-right{
    position:relative;
}

/* IMAGE */
.contact-main-image{
    position:relative;
    border-radius:40px;
    overflow:hidden;
    box-shadow:0 40px 90px rgba(0,0,0,0.35);
    height: 650px;
}

.contact-main-image img{
    width:100%;
    height:650px;
    object-fit:cover;
}

/* =========================
   FLOATING CARDS
========================= */

.contact-floating-card{
    position:absolute;
    padding:15px;
    border-radius:15px;
    background:rgba(255,255,255,0.10);
    border:1px solid rgba(255,255,255,0.12);
    backdrop-filter:blur(16px);
    box-shadow:0 25px 60px rgba(0,0,0,0.18);
    transition:0.4s ease;
}

.contact-floating-card:hover{
    transform:translateY(-6px);
}

/* POSITIONS */
.card-one{
    top:40px;
    left:-60px;
    align-items:center;
    gap:18px;
}

.card-two{
    right: -70px;
    bottom: 20px;
    width: 100%;
}

/* ICON */
.contact-floating-icon{
    width:74px;
    height:74px;
    min-width:74px;
    border-radius:24px;
    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );
    display:flex;
    align-items:center;
    justify-content:center;
    color:#032E49;
    font-size:30px;
    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* TEXT */
.card-one h4{
    color:#fff;

    font-size:22px;

    margin-bottom:6px;
}

.card-one p{
    color:#d9e4ec;

    font-size:14px;
}

/* =========================
   CARD TOP
========================= */

.contact-card-top{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:22px;
    width: 60%;
}

/* IMAGE */
.contact-card-top img{
    width:72px;
    height:72px;

    border-radius:50%;

    object-fit:cover;

    border:
    4px solid rgba(59,231,155,0.20);
}

/* TEXT */
.contact-card-top h4{
    color:#fff;

    font-size:22px;

    margin-bottom:6px;
}

.contact-card-top span{
    color:#3BE79B;

    font-size:14px;
    font-weight:700;
}

/* =========================
   AVAILABILITY
========================= */

.contact-availability{
    display:flex;
    align-items:center;
    gap:12px;

    padding:16px 18px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.08);

    color:#fff;

    font-size:14px;
    font-weight:600;
}

/* DOT */
.online-dot{
    width:12px;
    height:12px;

    border-radius:50%;

    background:#3BE79B;

    box-shadow:
    0 0 15px rgba(59,231,155,0.8);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .contact-hero-content h1{
        font-size:58px;
    }

    .card-one{
        left:0;
    }

    .card-two{
        right:0;
    }
}

@media(max-width:992px){

    .contact-hero-section{
        min-height:auto;
    }

    .contact-hero-wrapper{
        grid-template-columns:1fr;
    }

    .contact-hero-content h1{
        font-size:48px;
    }

    .contact-hero-right{
        max-width:700px;
    }
}

@media(max-width:768px){

    .contact-hero-section{
        padding:90px 20px;
    }

    .contact-hero-content h1{
        font-size:38px;
    }

    .contact-hero-content p{
        font-size:16px;
    }

    .contact-hero-buttons{
        flex-direction:column;
    }

    .contact-primary-btn,
    .contact-outline-btn{
        width:100%;
    }

    .contact-stat-item{
        width:100%;
    }
    .contact-main-image{
        height: 520px;
    }
    .contact-main-image img{
        height:520px;
    }

    .contact-floating-card{
        position:relative;

        width:100% !important;

        margin-top:20px;
    }
    .contact-card-top{
        width: 100%;
    }
    .card-one,
    .card-two{
        top:auto;
        left:auto;
        right:auto;
        bottom:auto;
    }

    .card-one{
        flex-direction:column;
        align-items:flex-start;
    }
}



/* =========================
   CONTACT INFORMATION
========================= */

.premium-contact-info-section{
    position:relative;
    padding:120px 20px;
    background:#fff;
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.premium-contact-glow{
    position:absolute;
    border-radius:50%;
}

.glow-left{
    width:520px;
    height:520px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    top:-180px;
    left:-180px;
}

.glow-right{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.08),
        transparent 70%
    );

    right:-120px;
    bottom:-120px;
}

/* =========================
   HEADER
========================= */

.premium-contact-header{
    position:relative;
    z-index:2;

    max-width:850px;

    text-align:center;

    margin:auto;
    margin-bottom:80px;
}

/* SUBTITLE */
.premium-contact-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.20);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

/* TITLE */
.premium-contact-header h2{
    color:#032E49;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.premium-contact-header h2 span{
    color:#3BE79B;
}

/* TEXT */
.premium-contact-header p{
    color:#5d6c77;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   GRID
========================= */

.premium-contact-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

/* =========================
   CARD
========================= */

.premium-contact-card{
    position:relative;

    display:flex;
    gap:26px;

    padding:36px;

    border-radius:36px;

    background:#fff;

    border:
    1px solid rgba(3,46,73,0.08);

    transition:0.4s ease;

    overflow:hidden;

    box-shadow:
    0 25px 60px rgba(0,0,0,0.05);
}

.premium-contact-card:hover{
    transform:translateY(-10px);

    border-color:
    rgba(59,231,155,0.20);

    box-shadow:
    0 35px 90px rgba(0,0,0,0.08);
}

/* FEATURED */
.featured-contact-card{
    background:#032E49;

    border:
    1px solid rgba(59,231,155,0.20);
}

.featured-contact-card h3,
.featured-contact-card p,
.featured-contact-card span{
    color:#fff !important;
}

/* =========================
   ICON
========================= */

.premium-contact-icon{
    width:92px;
    height:92px;
    min-width:92px;
    border-radius:30px;
    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;
    color:#032E49;
    font-size:34px;
    box-shadow:0 20px 45px rgba(59,231,155,0.22);
}

/* =========================
   CONTENT
========================= */

.premium-contact-content{
    flex:1;
}

/* SMALL TEXT */
.premium-contact-content span{
    display:inline-block;
    color:#3BE79B;
    font-size:14px;
    font-weight:700;
}

/* TITLE */
.premium-contact-content h3{
    color:#032E49;

    font-size:30px;
    line-height:1.4;

    margin-bottom:16px;
}

/* TEXT */
.premium-contact-content p{
    color:#5d6c77;

    line-height:1.9;

    margin-bottom:28px;
}

/* =========================
   FOOTER
========================= */

.premium-contact-footer{
    padding-top:24px;

    border-top:
    1px solid rgba(3,46,73,0.08);
}

/* BADGE */
.premium-contact-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:12px 18px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.16);
}

.premium-contact-badge i{
    color:#3BE79B;

    font-size:14px;
}

.premium-contact-badge span{
    color:#032E49;

    font-size:13px;
    font-weight:700;

    margin:0;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .premium-contact-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .premium-contact-info-section{
        padding:90px 20px;
    }

    .premium-contact-header h2{
        font-size:38px;
    }

    .premium-contact-header p{
        font-size:16px;
    }

    .premium-contact-card{
        flex-direction:column;

        padding:30px 24px;
    }

    .premium-contact-content h3{
        font-size:24px;
    }
}


/* =========================
   CONTACT FORM SECTION
========================= */

.premium-contact-form-section{
    position:relative;
    padding:120px 20px;
    background:#032E49;
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.contact-form-glow{
    position:absolute;
    border-radius:50%;
}

.glow-left{
    width:620px;
    height:620px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.16),
        transparent 70%
    );

    top:-220px;
    left:-180px;
}

.glow-right{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    right:-120px;
    bottom:-180px;
}

/* =========================
   WRAPPER
========================= */

.premium-contact-form-wrapper{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
}

/* =========================
   LEFT SIDE
========================= */

.premium-contact-image{
    position:relative;

    min-height:850px;

    border-radius:42px;

    overflow:hidden;

    box-shadow:
    0 40px 100px rgba(0,0,0,0.25);
}

.premium-contact-image img{
    width:100%;
    height:100%;

    object-fit:cover;
}

/* OVERLAY */
.premium-contact-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(3,46,73,0.96),
        rgba(3,46,73,0.18)
    );
}

/* CONTENT */
.premium-contact-image-content{
    position:absolute;

    left:0;
    bottom:0;

    width:100%;

    padding:50px;

    z-index:3;
}

/* SMALL */
.premium-contact-image-content span{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.14);

    border:
    1px solid rgba(59,231,155,0.20);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:28px;
}

/* TITLE */
.premium-contact-image-content h2{
    color:#fff;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

/* TEXT */
.premium-contact-image-content p{
    color:#d9e4ec;

    line-height:1.9;

    max-width:600px;
}

/* =========================
   RIGHT SIDE
========================= */

.premium-contact-form-box{
    padding:46px;

    border-radius:42px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.10);

    backdrop-filter:blur(18px);

    box-shadow:
    0 35px 90px rgba(0,0,0,0.18);
}

/* HEADER */
.premium-form-header{
    margin-bottom:36px;
}

/* SMALL */
.premium-form-header span{
    display:inline-block;

    padding:10px 18px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.18);

    color:#3BE79B;

    font-size:13px;
    font-weight:700;

    margin-bottom:20px;
}

/* TITLE */
.premium-form-header h2{
    color:#fff;

    font-size:46px;

    margin-bottom:16px;
}

/* TEXT */
.premium-form-header p{
    color:#d9e4ec;

    line-height:1.8;
}

/* =========================
   FORM
========================= */

.premium-contact-form{
    display:flex;
    flex-direction:column;
    gap:24px;
}

/* ROW */
.premium-form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

/* GROUP */
.premium-input-group{
    display:flex;
    flex-direction:column;
    gap:12px;
}

/* LABEL */
.premium-input-group label{
    color:#fff;

    font-size:15px;
    font-weight:600;
}

/* INPUT */
.premium-input-group input,
.premium-input-group select,
.premium-input-group textarea{
    width:100%;
    padding:18px 22px;
    border-radius:10px;
    background:#173E57;
    border: 1px solid rgba(255,255,255,0.10);
    outline:none;
    color:#fff;
    font-size:15px;
    transition:0.4s ease;
}

/* PLACEHOLDER */
.premium-input-group input::placeholder,
.premium-input-group textarea::placeholder{
    color:#d9e4ec;
}

/* TEXTAREA */
.premium-input-group textarea{
    min-height:180px;

    resize:none;
}

/* FOCUS */
.premium-input-group input:focus,
.premium-input-group select:focus,
.premium-input-group textarea:focus{
    border-color:
    rgba(59,231,155,0.35);

    box-shadow:
    0 0 0 4px rgba(59,231,155,0.08);
}

/* =========================
   CHECKBOX
========================= */

.premium-checkbox{
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.premium-checkbox input{
    margin-top:5px;
}

.premium-checkbox label{
    color:#d9e4ec;

    line-height:1.7;

    font-size:14px;
}

/* =========================
   BUTTON
========================= */

.premium-contact-btn{
    width:100%;

    padding:20px;

    border:none;

    border-radius:22px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    color:#032E49;

    font-size:16px;
    font-weight:700;

    cursor:pointer;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.25);
}

.premium-contact-btn:hover{
    transform:translateY(-5px);

    box-shadow:
    0 30px 70px rgba(59,231,155,0.35);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .premium-contact-form-wrapper{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .premium-contact-form-section{
        padding:90px 20px;
    }

    .premium-contact-image{
        min-height:520px;
    }

    .premium-contact-image-content{
        padding:30px 24px;
    }

    .premium-contact-image-content h2{
        font-size:38px;
    }

    .premium-contact-form-box{
        padding:30px 24px;
    }

    .premium-form-header h2{
        font-size:34px;
    }

    .premium-form-row{
        grid-template-columns:1fr;
    }
}



/* =========================
   GOOGLE MAP SECTION
========================= */

.premium-map-section{
    position:relative;
    padding:120px 20px;
    background:#fff;
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.premium-map-glow{
    position:absolute;
    border-radius:50%;
}

.glow-left{
    width:520px;
    height:520px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    top:-180px;
    left:-180px;
}

.glow-right{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.08),
        transparent 70%
    );

    right:-120px;
    bottom:-120px;
}

/* =========================
   HEADER
========================= */

.premium-map-header{
    position:relative;
    z-index:2;

    max-width:850px;

    text-align:center;

    margin:auto;
    margin-bottom:80px;
}

/* SUBTITLE */
.premium-map-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.20);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

/* TITLE */
.premium-map-header h2{
    color:#032E49;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.premium-map-header h2 span{
    color:#3BE79B;
}

/* TEXT */
.premium-map-header p{
    color:#5d6c77;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   WRAPPER
========================= */

.premium-map-wrapper{
    position:relative;
    z-index:2;
}

/* =========================
   MAP
========================= */

.premium-google-map{
    position:relative;
    width:100%;
    height:650px;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 35px 90px rgba(0,0,0,0.08);
    margin-bottom:40px;
}

/* IFRAME */
.premium-google-map iframe{
    width:100%;
    height:100%;
    border:none;
    filter:grayscale(100%) contrast(1.1);
}

/* =========================
   OVERLAY CARD
========================= */

.premium-map-overlay-card{
    position:absolute;

    left:40px;
    bottom:40px;

    max-width:420px;

    padding:32px;

    border-radius:34px;

    background:
    rgba(3,46,73,0.92);

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(16px);

    display:flex;
    gap:22px;

    box-shadow:
    0 25px 60px rgba(0,0,0,0.20);
}

/* ICON */
.premium-map-icon{
    width:88px;
    height:88px;

    min-width:88px;

    border-radius:28px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:34px;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.22);
}

/* CONTENT */
.premium-map-content span{
    display:inline-block;

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:14px;
}

.premium-map-content h3{
    color:#fff;

    font-size:34px;

    margin-bottom:16px;
}

.premium-map-content p{
    color:#d9e4ec;

    line-height:1.9;
}

/* =========================
   LOCATION GRID
========================= */

.premium-location-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

/* CARD */
.premium-location-card{
    padding:34px 28px;

    border-radius:34px;

    background:#fff;

    border:
    1px solid rgba(3,46,73,0.08);

    transition:0.4s ease;

    text-align:center;

    box-shadow:
    0 25px 60px rgba(0,0,0,0.05);
}

.premium-location-card:hover{
    transform:translateY(-8px);

    border-color:
    rgba(59,231,155,0.18);

    box-shadow:
    0 35px 90px rgba(0,0,0,0.08);
}

/* FEATURED */
.featured-location-card{
    background:#032E49;

    border:
    1px solid rgba(59,231,155,0.20);
}

.featured-location-card h4,
.featured-location-card p{
    color:#fff !important;
}

/* ICON */
.premium-location-icon{
    width:80px;
    height:80px;
    margin:auto;
    margin-bottom:28px;
    border-radius:10px;
    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );
    display:flex;
    align-items:center;
    justify-content:center;
    color:#032E49;
    font-size:40px;
    box-shadow: 0 20px 45px rgba(59,231,155,0.22);
}

/* TITLE */
.premium-location-card h4{
    color:#032E49;

    font-size:24px;

    margin-bottom:16px;
}

/* TEXT */
.premium-location-card p{
    color:#5d6c77;

    line-height:1.8;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .premium-location-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .premium-map-section{
        padding:90px 20px;
    }

    .premium-map-header h2{
        font-size:38px;
    }

    .premium-map-header p{
        font-size:16px;
    }

    .premium-google-map{
        height:500px;
    }

    .premium-map-overlay-card{
        position:relative;

        left:auto;
        bottom:auto;

        max-width:100%;

        margin:20px;
    }

    .premium-location-grid{
        grid-template-columns:1fr;
    }

    .premium-map-overlay-card{
        flex-direction:column;
    }

    .premium-map-content h3{
        font-size:28px;
    }
}




/* =========================
   FAQ HERO SECTION
========================= */

.premium-faq-hero{
    position:relative;
    min-height:100vh;

    display:flex;
    align-items:center;

    overflow:hidden;

    padding:120px 20px;

    background:#032E49;
}

/* =========================
   BACKGROUND
========================= */

.faq-hero-bg{
    position:absolute;
    inset:0;
    z-index:1;
}

.faq-hero-bg img{
    width:100%;
    height:100%;

    object-fit:cover;
}

/* =========================
   OVERLAY
========================= */

.faq-hero-overlay{
    position:absolute;
    inset:0;
    z-index:2;

    background:
    linear-gradient(
        90deg,
        rgba(3,46,73,0.96) 0%,
        rgba(3,46,73,0.92) 40%,
        rgba(3,46,73,0.70) 72%,
        rgba(3,46,73,0.45) 100%
    );
}

/* =========================
   GLOW EFFECTS
========================= */

.faq-hero-glow{
    position:absolute;
    border-radius:50%;
    z-index:2;
}

.glow-one{
    width:620px;
    height:620px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.16),
        transparent 70%
    );

    top:-220px;
    right:-180px;
}

.glow-two{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    left:-120px;
    bottom:-180px;
}

/* =========================
   WRAPPER
========================= */

.premium-faq-hero-wrapper{
    position:relative;
    z-index:5;

    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:60px;
    align-items:center;
}

/* =========================
   LEFT CONTENT
========================= */

.premium-faq-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.22);

    backdrop-filter:blur(10px);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:28px;
}

/* TITLE */
.premium-faq-hero-content h1{
    color:#fff;

    font-size:78px;
    line-height:1.02;

    font-weight:800;

    margin-bottom:28px;

    max-width:760px;
}

.premium-faq-hero-content h1 span{
    color:#3BE79B;
}

/* TEXT */
.premium-faq-hero-content p{
    color:#d9e4ec;

    font-size:18px;
    line-height:1.9;

    max-width:650px;

    margin-bottom:40px;
}

/* =========================
   SEARCH
========================= */

.premium-faq-search{
    position:relative;

    max-width:620px;

    margin-bottom:34px;
}

.premium-faq-search input{
    width:100%;
    height:78px;
    border:none;
    outline:none;
    padding:0 90px 0 28px;
    border-radius:24px;
    background:
    rgba(255,255,255,0.10);
    border:
    1px solid rgba(255,255,255,0.12);
    backdrop-filter:blur(12px);
    color:#fff;
    font-size:16px;
}

.premium-faq-search input::placeholder{
    color:#d9e4ec;
}

/* BUTTON */
.premium-faq-search button{
    position:absolute;
    top:50%;
    right:12px;
    transform:translateY(-50%);
    width:58px;
    height:58px;
    border:none;
    border-radius:18px;
    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );
    display:flex;
    align-items:center;
    justify-content:center;
    color:#032E49;
    font-size:20px;
    cursor:pointer;
    transition:0.4s ease;
}

.premium-faq-search button:hover{
    transform:
    translateY(-50%)
    scale(1.05);
}

/* =========================
   TAGS
========================= */

.premium-faq-tags{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.premium-faq-tags span{
    padding:12px 20px;
    border-radius:50px;
    background:
    rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.10);
    backdrop-filter:blur(10px);
    color:#fff;
    font-size:14px;
    font-weight:600;
    transition:0.4s ease;
}

.premium-faq-tags span:hover{
    background:#3BE79B;
    color:#032E49;
    transform:translateY(-4px);
}

/* =========================
   RIGHT SIDE
========================= */

.premium-faq-hero-right{
    position:relative;
}

/* IMAGE */
.premium-faq-image{
    position:relative;
    border-radius:42px;
    overflow:hidden;
    box-shadow:0 40px 100px rgba(0,0,0,0.30);
    height: 550px;
}

.premium-faq-image img{
    width:100%;
    height: 550px;
    object-fit:cover;
}

/* =========================
   FLOATING CARDS
========================= */

.premium-faq-floating-card{
    position:absolute;
    padding:24px;
    border-radius:28px;
    background:
    rgba(255,255,255,0.10);
    border:1px solid rgba(255,255,255,0.12);
    backdrop-filter:blur(16px);
    box-shadow:0 25px 60px rgba(0,0,0,0.18);
    transition:0.4s ease;
}

.premium-faq-floating-card:hover{
    transform:translateY(-6px);
}

/* POSITIONS */
.card-one{
    top:40px;
    left:-60px;
    display:flex;
    align-items:center;
    gap:18px;
}

.card-two{
    right:-40px;
    bottom:40px;
    width: 100%;
}

/* ICON */
.premium-floating-icon{
    width:74px;
    height:74px;

    min-width:74px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:30px;

    box-shadow:
    0 18px 40px rgba(59,231,155,0.22);
}

/* TEXT */
.card-one h4{
    color:#fff;

    font-size:22px;

    margin-bottom:6px;
}

.card-one p{
    color:#d9e4ec;

    font-size:14px;
}

/* =========================
   SUPPORT TOP
========================= */

.faq-support-top{
    display:flex;
    align-items:center;
    gap:16px;

    margin-bottom:22px;
}

/* IMAGE */
.faq-support-top img{
    width:72px;
    height:72px;

    border-radius:50%;

    object-fit:cover;

    border:
    4px solid rgba(59,231,155,0.20);
}

/* TEXT */
.faq-support-top h4{
    color:#fff;

    font-size:22px;

    margin-bottom:6px;
}

.faq-support-top span{
    color:#3BE79B;

    font-size:14px;
    font-weight:700;
}

/* STATUS */
.faq-support-status{
    display:flex;
    align-items:center;
    gap:12px;

    padding:16px 18px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.08);

    color:#fff;

    font-size:14px;
    font-weight:600;
}

/* DOT */
.faq-online-dot{
    width:12px;
    height:12px;

    border-radius:50%;

    background:#3BE79B;

    box-shadow:
    0 0 15px rgba(59,231,155,0.8);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .premium-faq-hero-content h1{
        font-size:62px;
    }

    .card-one{
        left:0;
    }

    .card-two{
        right:0;
    }
}

@media(max-width:992px){

    .premium-faq-hero{
        min-height:auto;
    }

    .premium-faq-hero-wrapper{
        grid-template-columns:1fr;
    }

    .premium-faq-hero-content h1{
        font-size:52px;
    }

    .premium-faq-hero-right{
        max-width:700px;
    }
}

@media(max-width:768px){

    .premium-faq-hero{
        padding:90px 20px;
    }

    .premium-faq-hero-content h1{
        font-size:40px;
    }

    .premium-faq-hero-content p{
        font-size:16px;
    }

    .premium-faq-search input{
        height:70px;
    }

    .premium-faq-image{
        height: 520px;
    }
    .faq-glow-one{
        display: none;
    }
    .premium-faq-image img{
        height:520px;
    }

    .premium-faq-floating-card{
        position:relative;

        width:100% !important;

        margin-top:20px;
    }

    .card-one,
    .card-two{
        top:auto;
        left:auto;
        right:auto;
        bottom:auto;
    }

    .card-one{
        flex-direction:column;
        align-items:flex-start;
    }
}



/* =========================
   FAQ CATEGORIES
========================= */

.premium-faq-categories{
    position:relative;
    padding:120px 20px;
    background:#fff;
    overflow:hidden;
}

/* =========================
   GLOW EFFECTS
========================= */

.faq-category-glow{
    position:absolute;
    border-radius:50%;
}

.glow-left{
    width:520px;
    height:520px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    top:-180px;
    left:-180px;
}

.glow-right{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.08),
        transparent 70%
    );

    right:-120px;
    bottom:-120px;
}

/* =========================
   HEADER
========================= */

.premium-faq-category-header{
    position:relative;
    z-index:2;

    max-width:850px;

    text-align:center;

    margin:auto;
    margin-bottom:80px;
}

/* SUBTITLE */
.premium-category-subtitle{
    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.20);

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:24px;
}

/* TITLE */
.premium-faq-category-header h2{
    color:#032E49;

    font-size:58px;
    line-height:1.1;

    margin-bottom:24px;
}

.premium-faq-category-header h2 span{
    color:#3BE79B;
}

/* TEXT */
.premium-faq-category-header p{
    color:#5d6c77;

    font-size:18px;
    line-height:1.9;
}

/* =========================
   GRID
========================= */

.premium-faq-category-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

/* =========================
   CARD
========================= */

.premium-category-card{
    position:relative;

    padding:38px;

    border-radius:36px;

    background:#fff;

    border:
    1px solid rgba(3,46,73,0.08);

    transition:0.4s ease;

    overflow:hidden;

    box-shadow:
    0 25px 60px rgba(0,0,0,0.05);
}

.premium-category-card:hover{
    transform:translateY(-10px);

    border-color:
    rgba(59,231,155,0.20);

    box-shadow:
    0 35px 90px rgba(0,0,0,0.08);
}

/* FEATURED */
.featured-category-card{
    background:#032E49;

    border:
    1px solid rgba(59,231,155,0.20);
}

.featured-category-card h3,
.featured-category-card p,
.featured-category-card span{
    color:#fff !important;
}

/* =========================
   ICON
========================= */

.premium-category-icon{
    width:92px;
    height:92px;

    margin-bottom:30px;

    border-radius:30px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:34px;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.22);
}

/* =========================
   CONTENT
========================= */

.premium-category-content span{
    display:inline-block;

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:16px;
}

/* TITLE */
.premium-category-content h3{
    color:#032E49;

    font-size:32px;
    line-height:1.3;

    margin-bottom:18px;
}

/* TEXT */
.premium-category-content p{
    color:#5d6c77;

    line-height:1.9;
}

/* =========================
   ARROW
========================= */

.premium-category-arrow{
    margin-top:34px;

    width:64px;
    height:64px;

    border-radius:20px;

    background:
    rgba(59,231,155,0.10);

    border:
    1px solid rgba(59,231,155,0.14);

    display:flex;
    align-items:center;
    justify-content:center;

    color:#3BE79B;

    font-size:22px;

    transition:0.4s ease;
}

.premium-category-card:hover .premium-category-arrow{
    background:#3BE79B;

    color:#032E49;

    transform:translateX(6px);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .premium-faq-category-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .premium-faq-categories{
        padding:90px 20px;
    }

    .premium-faq-category-header h2{
        font-size:38px;
    }

    .premium-faq-category-header p{
        font-size:16px;
    }

    .premium-faq-category-grid{
        grid-template-columns:1fr;
    }

    .premium-category-card{
        padding:30px 24px;
    }

    .premium-category-content h3{
        font-size:26px;
    }
}


/* =========================
   ULTRA EMERGENCY HELP
========================= */

.ultra-emergency-help{
    position:relative;
    padding:120px 20px;
    background:#fff;
    overflow:hidden;
}

/* =========================
   BLUR EFFECTS
========================= */

.ultra-emergency-blur{
    position:absolute;
    border-radius:50%;
}

.blur-left{
    width:520px;
    height:520px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.12),
        transparent 70%
    );

    top:-180px;
    left:-180px;
}

.blur-right{
    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(59,231,155,0.10),
        transparent 70%
    );

    right:-120px;
    bottom:-120px;
}

/* =========================
   WRAPPER
========================= */

.ultra-emergency-wrapper{
    position:relative;

    border-radius:48px;

    overflow:hidden;

    min-height:760px;

    box-shadow:
    0 45px 120px rgba(0,0,0,0.12);
}

/* =========================
   BACKGROUND
========================= */

.ultra-emergency-bg{
    position:absolute;
    inset:0;
}

.ultra-emergency-bg img{
    width:100%;
    height:100%;

    object-fit:cover;
}

/* =========================
   OVERLAY
========================= */

.ultra-emergency-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(3,46,73,0.96),
        rgba(3,46,73,0.82)
    );
}

/* =========================
   CONTENT
========================= */

.ultra-emergency-content{
    position:relative;
    z-index:5;

    padding:80px;
}

/* =========================
   TOP
========================= */

.ultra-emergency-top{
    max-width:850px;

    margin-bottom:60px;
}

/* BADGE */
.ultra-emergency-badge{
    display:inline-flex;
    align-items:center;
    gap:12px;

    padding:14px 24px;

    border-radius:50px;

    background:
    rgba(59,231,155,0.12);

    border:
    1px solid rgba(59,231,155,0.18);

    backdrop-filter:blur(12px);

    margin-bottom:30px;
}

.ultra-emergency-badge i{
    color:#3BE79B;
}

.ultra-emergency-badge span{
    color:#3BE79B;

    font-size:14px;
    font-weight:700;
}

/* TITLE */
.ultra-emergency-top h2{
    color:#fff;

    font-size:72px;
    line-height:1.02;

    margin-bottom:28px;
}

.ultra-emergency-top h2 span{
    color:#3BE79B;
}

/* TEXT */
.ultra-emergency-top p{
    color:#d9e4ec;

    font-size:18px;
    line-height:1.9;

    max-width:720px;
}

/* =========================
   CENTER
========================= */

.ultra-emergency-center{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:30px;

    margin-bottom:50px;
}

/* =========================
   BIG SUPPORT CARD
========================= */

.ultra-big-support-card{
    display:flex;
    gap:26px;

    padding:38px;

    border-radius:36px;

    background:
    rgba(255,255,255,0.10);

    border:
    1px solid rgba(255,255,255,0.12);

    backdrop-filter:blur(16px);
}

/* ICON */
.ultra-support-icon{
    width:100px;
    height:100px;

    min-width:100px;

    border-radius:30px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#032E49;

    font-size:40px;

    box-shadow:
    0 25px 50px rgba(59,231,155,0.25);
}

/* CONTENT */
.ultra-support-content span{
    display:inline-block;

    color:#3BE79B;

    font-size:14px;
    font-weight:700;

    margin-bottom:16px;
}

.ultra-support-content h3{
    color:#fff;
    font-size:40px;
    margin-bottom:16px;
}

.ultra-support-content p{
    color:#d9e4ec;
    line-height:1.8;
}

/* =========================
   STATUS CARD
========================= */

.ultra-status-card{
    padding:38px;

    border-radius:36px;

    background:
    rgba(255,255,255,0.10);

    border:
    1px solid rgba(255,255,255,0.12);

    backdrop-filter:blur(16px);
}

/* TOP */
.ultra-status-top{
    display:flex;
    align-items:center;
    gap:18px;

    margin-bottom:30px;
}

/* IMAGE */
.ultra-status-top img{
    width:90px;
    height:90px;

    border-radius:50%;

    object-fit:cover;

    border:
    4px solid rgba(59,231,155,0.20);
}

/* TEXT */
.ultra-status-top h4{
    color:#fff;

    font-size:26px;

    margin-bottom:8px;
}

.ultra-status-top span{
    color:#3BE79B;

    font-size:14px;
    font-weight:700;
}

/* BOTTOM */
.ultra-status-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    padding:22px;

    border-radius:24px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.08);
}

/* ONLINE */
.ultra-online-status{
    display:flex;
    align-items:center;
    gap:12px;

    color:#fff;

    font-size:15px;
    font-weight:600;
}

/* DOT */
.ultra-online-dot{
    width:12px;
    height:12px;

    border-radius:50%;

    background:#3BE79B;

    box-shadow:
    0 0 15px rgba(59,231,155,0.8);
}

/* STRONG */
.ultra-status-bottom strong{
    color:#3BE79B;

    font-size:15px;
}

/* =========================
   BUTTONS
========================= */

.ultra-emergency-buttons{
    display:flex;
    gap:20px;

    flex-wrap:wrap;
}

/* PRIMARY */
.ultra-primary-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    padding:20px 34px;

    border-radius:22px;

    background:
    linear-gradient(
        135deg,
        #3BE79B,
        #22cb7d
    );

    color:#032E49;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;

    box-shadow:
    0 20px 45px rgba(59,231,155,0.28);
}

.ultra-primary-btn:hover{
    transform:translateY(-5px);
}

/* OUTLINE */
.ultra-outline-btn,
.ultra-glass-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    padding:20px 34px;

    border-radius:22px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.12);

    backdrop-filter:blur(12px);

    color:#fff;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s ease;
}

.ultra-outline-btn:hover,
.ultra-glass-btn:hover{
    background:#fff;

    color:#032E49;

    transform:translateY(-5px);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .ultra-emergency-top h2{
        font-size:58px;
    }

    .ultra-emergency-center{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .ultra-emergency-help{
        padding:90px 20px;
    }

    .ultra-emergency-content{
        padding:40px 24px;
    }

    .ultra-emergency-top h2{
        font-size:40px;
    }

    .ultra-emergency-top p{
        font-size:16px;
    }

    .ultra-big-support-card{
        flex-direction:column;
    }

    .ultra-support-content h3{
        font-size:34px;
    }

    .ultra-status-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .ultra-status-bottom{
        flex-direction:column;
        align-items:flex-start;
    }

    .ultra-emergency-buttons{
        flex-direction:column;
    }

    .ultra-primary-btn,
    .ultra-outline-btn,
    .ultra-glass-btn{
        width:100%;
    }
}


/* =====================================================
   REVIEWS PAGE — FULL RESPONSIVE OVERRIDES
   Scope: reviews.html only
   Breakpoints: 1400 / 1200 / 992 / 768 / 576 / 400 px
===================================================== */

/* ---------- 1400px : large desktop ---------- */
@media (max-width:1400px){

    /* HERO */
    .reviews-hero-section{
        padding:110px 20px;
    }
    .reviews-hero-content h1{
        font-size:64px;
    }
    .reviews-hero-wrapper{
        gap:50px;
    }
    .reviews-main-image,
    .reviews-main-image img{
        height:600px;
    }
    .review-card-one{
        left:-40px;
        width:340px;
    }
    .card-two{
        right:-20px;
    }

    /* TESTIMONIALS */
    .testimonial-header h2,
    .premium-video-header h2,
    .review-stats-header h2,
    .leave-review-left h2{
        font-size:52px;
    }

    /* PREMIUM VIDEO */
    .premium-main-video{
        min-height:680px;
    }
    .premium-main-content{
        padding:42px;
    }
    .premium-main-content h3{
        font-size:42px;
    }
    .premium-video-thumb{
        width:200px;
        min-width:200px;
        height:200px;
    }

    /* ANALYTICS */
    .review-analytics-left h3{
        font-size:42px;
    }
}

/* ---------- 1200px : tablet landscape / small desktop ---------- */
@media (max-width:1200px){

    /* HERO */
    .reviews-hero-section{
        padding:100px 20px;
        min-height:auto;
    }
    .reviews-hero-wrapper{
        gap:40px;
    }
    .reviews-hero-content h1{
        font-size:54px;
    }
    .reviews-hero-content p{
        font-size:17px;
    }
    .reviews-hero-stats{
        gap:14px;
        margin-top:40px;
    }
    .reviews-stat-item{
        min-width:160px;
        padding:24px 20px;
    }
    .reviews-stat-item h3{
        font-size:38px;
    }
    .reviews-main-image,
    .reviews-main-image img{
        height:560px;
    }
    .review-card-one{
        top:24px;
        left:0;
        width:320px;
        padding:20px;
    }
    .card-two{
        right:0;
        bottom:24px;
        padding:20px;
    }

    /* TESTIMONIALS */
    .student-testimonials-section,
    .premium-video-testimonials,
    .review-statistics-section,
    .leave-review-section{
        padding:100px 20px;
    }
    .testimonial-header,
    .premium-video-header,
    .review-stats-header{
        margin-bottom:60px;
    }
    .testimonial-header h2,
    .premium-video-header h2,
    .review-stats-header h2,
    .leave-review-left h2{
        font-size:46px;
    }
    .testimonial-card{
        padding:30px 26px;
        border-radius:30px;
    }
    .testimonial-user img{
        width:64px;
        height:64px;
    }
    .testimonial-user h4{
        font-size:20px;
    }
    .testimonial-quote{
        width:60px;
        height:60px;
        font-size:22px;
    }

    /* PREMIUM VIDEO */
    .premium-video-wrapper{
        gap:24px;
    }
    .premium-main-video{
        min-height:600px;
    }
    .premium-main-content{
        padding:36px 30px;
    }
    .premium-main-content h3{
        font-size:36px;
    }
    .premium-main-user img{
        width:64px;
        height:64px;
    }

    /* ANALYTICS */
    .review-stats-grid{
        gap:24px;
    }
    .review-stat-card{
        padding:32px 24px;
        border-radius:30px;
    }
    .review-stat-card h3{
        font-size:46px;
    }
    .review-stat-icon{
        width:80px;
        height:80px;
        font-size:30px;
    }
    .review-analytics-wrapper{
        padding:40px 36px;
        border-radius:36px;
    }
    .review-analytics-left h3{
        font-size:38px;
    }

    /* LEAVE REVIEW */
    .leave-review-wrapper{
        gap:40px;
    }
    .leave-review-form-box{
        padding:36px 30px;
        border-radius:36px;
    }
    .review-form-header h3{
        font-size:32px;
    }
}

/* ---------- 992px : tablet ---------- */
@media (max-width:992px){

    /* HERO */
    .reviews-hero-section{
        padding:90px 20px;
    }
    .reviews-hero-wrapper{
        grid-template-columns:1fr;
        gap:50px;
    }
    .reviews-hero-content{
        text-align:center;
    }
    .reviews-hero-content h1,
    .reviews-hero-content p{
        margin-left:auto;
        margin-right:auto;
    }
    .reviews-hero-content h1{
        font-size:46px;
    }
    .reviews-hero-buttons{
        justify-content:center;
    }
    .reviews-hero-stats{
        justify-content:center;
    }
    .reviews-hero-right{
        max-width:680px;
        margin:0 auto;
    }
    .reviews-main-image,
    .reviews-main-image img{
        height:520px;
    }
    .review-card-one{
        top:18px;
        left:18px;
        width:300px;
    }
    .card-two{
        right:18px;
        bottom:18px;
    }

    /* TESTIMONIALS */
    .student-testimonials-section,
    .premium-video-testimonials,
    .review-statistics-section,
    .leave-review-section{
        padding:90px 20px;
    }
    .testimonial-header h2,
    .premium-video-header h2,
    .review-stats-header h2,
    .leave-review-left h2{
        font-size:40px;
    }
    .testimonial-grid{
        grid-template-columns:repeat(2,1fr);
        gap:24px;
    }

    /* PREMIUM VIDEO */
    .premium-video-wrapper{
        grid-template-columns:1fr;
    }
    .premium-main-video{
        min-height:540px;
    }
    .premium-main-content{
        padding:32px 28px;
    }
    .premium-main-content h3{
        font-size:32px;
    }
    .premium-video-thumb{
        width:200px;
        min-width:200px;
        height:200px;
    }

    /* STATS */
    .review-stats-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .review-analytics-wrapper{
        grid-template-columns:1fr;
        gap:36px;
        padding:36px 30px;
    }
    .analytics-features{
        grid-template-columns:repeat(2,1fr);
    }
    .review-analytics-left h3{
        font-size:32px;
    }

    /* LEAVE REVIEW */
    .leave-review-wrapper{
        grid-template-columns:1fr;
        gap:50px;
    }
    .leave-review-form-box{
        padding:32px 26px;
    }
}

/* ---------- 768px : large phone / small tablet ---------- */
@media (max-width:768px){

    /* HERO */
    .reviews-hero-section{
        padding:80px 16px;
    }
    .reviews-hero-subtitle{
        font-size:13px;
        padding:10px 18px;
        margin-bottom:22px;
    }
    .reviews-hero-content h1{
        font-size:36px;
        margin-bottom:22px;
    }
    .reviews-hero-content p{
        font-size:15px;
        line-height:1.8;
    }
    .reviews-hero-buttons{
        flex-direction:column;
        gap:14px;
        margin-top:32px;
    }
    .reviews-primary-btn,
    .reviews-outline-btn{
        width:100%;
        padding:16px 24px;
        font-size:15px;
        border-radius:14px;
    }
    .reviews-hero-stats{
        gap:12px;
        margin-top:36px;
    }
    .reviews-stat-item{
        flex:1 1 100%;
        min-width:100%;
        padding:22px 20px;
    }
    .reviews-stat-item h3{
        font-size:34px;
    }
    .reviews-stat-item p{
        font-size:14px;
    }
    .reviews-main-image{
        border-radius:28px;
    }
    .reviews-main-image,
    .reviews-main-image img{
        height:420px;
    }

    /* HERO FLOATING CARDS — stack below image */
    .reviews-floating-card{
        position:relative !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        width:100% !important;
        margin-top:18px;
        padding:22px 20px;
        border-radius:22px;
    }
    .reviews-card-top{
        gap:14px;
        margin-bottom:16px;
    }
    .reviews-card-top img{
        width:60px;
        height:60px;
        border:3px solid rgba(59,231,155,0.20);
    }
    .reviews-card-top h4,
    .card-two h4{
        font-size:18px;
    }
    .reviews-card-top span{
        font-size:13px;
    }
    .reviews-stars{
        gap:6px;
        margin-bottom:14px;
    }
    .reviews-floating-card p{
        font-size:14px;
        line-height:1.7;
    }
    .card-two{
        flex-direction:row;
        align-items:center;
        gap:16px;
    }
    .reviews-floating-icon{
        width:60px;
        height:60px;
        min-width:60px;
        font-size:24px;
        border-radius:18px;
    }

    /* TESTIMONIALS */
    .student-testimonials-section,
    .premium-video-testimonials,
    .review-statistics-section,
    .leave-review-section{
        padding:70px 16px;
    }
    .testimonial-header,
    .premium-video-header,
    .review-stats-header{
        margin-bottom:48px;
    }
    .testimonial-subtitle,
    .premium-video-subtitle,
    .review-stats-subtitle{
        font-size:12px;
        padding:10px 18px;
        margin-bottom:18px;
    }
    .testimonial-header h2,
    .premium-video-header h2,
    .review-stats-header h2,
    .leave-review-left h2{
        font-size:30px;
        margin-bottom:18px;
    }
    .testimonial-header p,
    .premium-video-header p,
    .review-stats-header p,
    .leave-review-left p{
        font-size:15px;
        line-height:1.8;
    }
    .testimonial-grid{
        grid-template-columns:1fr;
        gap:20px;
    }
    .testimonial-card{
        padding:26px 22px;
        border-radius:24px;
    }
    .testimonial-top{
        flex-direction:row;
        align-items:flex-start;
        justify-content:space-between;
        gap:14px;
        margin-bottom:22px;
    }
    .testimonial-user{
        gap:12px;
    }
    .testimonial-user img{
        width:54px;
        height:54px;
        border:3px solid rgba(59,231,155,0.20);
    }
    .testimonial-user h4{
        font-size:18px;
    }
    .testimonial-user span{
        font-size:12px;
    }
    .testimonial-quote{
        width:50px;
        height:50px;
        min-width:50px;
        font-size:18px;
        border-radius:16px;
    }
    .testimonial-stars{
        gap:6px;
        margin-bottom:18px;
    }
    .testimonial-stars i{
        font-size:14px;
    }
    .testimonial-card p{
        font-size:14px;
        line-height:1.8;
        margin-bottom:22px;
    }
    .testimonial-footer{
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        flex-wrap:wrap;
    }
    .verified-badge{
        padding:9px 14px;
    }
    .verified-badge span{
        font-size:12px;
    }
    .testimonial-footer strong{
        font-size:13px;
    }

    /* PREMIUM VIDEO */
    .premium-video-wrapper{
        gap:18px;
    }
    .premium-main-video{
        min-height:440px;
        border-radius:28px;
    }
    .premium-main-content{
        padding:24px 20px;
    }
    .premium-main-badge{
        padding:9px 16px;
        margin-bottom:18px;
    }
    .premium-main-badge span{
        font-size:12px;
    }
    .premium-main-content h3{
        font-size:24px;
        margin-bottom:14px;
    }
    .premium-main-content p{
        font-size:14px;
        line-height:1.7;
        margin-bottom:22px;
    }
    .premium-main-bottom{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
    }
    .premium-main-user img{
        width:54px;
        height:54px;
        border:3px solid rgba(59,231,155,0.20);
    }
    .premium-main-user h4{
        font-size:17px;
    }
    .premium-main-user span{
        font-size:12px;
    }
    .premium-main-stats{
        gap:10px;
        flex-wrap:wrap;
    }
    .premium-main-stat{
        padding:10px 14px;
    }
    .premium-main-stat span{
        font-size:13px;
    }
    .premium-main-play{
        width:78px;
        height:78px;
        font-size:24px;
    }

    /* RIGHT VIDEO LIST */
    .premium-video-item1{
        padding:16px;
        border-radius:22px;
    }
    .premium-video-item{
        flex-direction:column;
        gap:16px;
    }
    .premium-video-thumb{
        width:100%;
        min-width:100%;
        height:220px;
        border-radius:18px;
    }
    .premium-thumb-play{
        width:60px;
        height:60px;
        font-size:20px;
    }
    .premium-video-info span{
        font-size:12px;
        margin-bottom:10px;
    }
    .premium-video-info h4{
        font-size:20px;
        margin-bottom:12px;
    }
    .premium-video-info p{
        font-size:14px;
        line-height:1.7;
        margin-bottom:18px;
    }
    .premium-video-meta{
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        flex-wrap:wrap;
    }
    .premium-video-author img{
        width:44px;
        height:44px;
    }
    .premium-video-author strong{
        font-size:14px;
    }
    .premium-video-time{
        padding:8px 14px;
        font-size:12px !important;
    }

    /* VIDEO MODAL */
    .video-container{
        width:94%;
        border-radius:18px;
    }
    .video-container iframe{
        height:240px;
    }
    .video-close{
        top:-50px;
        width:42px;
        height:42px;
        font-size:20px;
    }

    /* STATS */
    .review-stats-grid{
        grid-template-columns:1fr;
        gap:18px;
        margin-bottom:50px;
    }
    .review-stat-card{
        padding:26px 22px;
        border-radius:24px;
    }
    .review-stat-icon{
        width:74px;
        height:74px;
        font-size:28px;
        margin-bottom:20px;
        border-radius:22px;
    }
    .review-stat-card h3{
        font-size:38px;
        margin-bottom:10px;
    }
    .review-stat-card p{
        font-size:14px;
        line-height:1.7;
        margin-bottom:18px;
    }
    .review-stat-bottom{
        padding-top:16px;
    }
    .review-stat-bottom span{
        font-size:13px;
    }

    /* ANALYTICS */
    .review-analytics-wrapper{
        padding:28px 22px;
        border-radius:28px;
        gap:28px;
    }
    .analytics-mini-title{
        font-size:12px;
        padding:9px 16px;
        margin-bottom:18px;
    }
    .review-analytics-left h3{
        font-size:26px;
        margin-bottom:18px;
    }
    .review-analytics-left p{
        font-size:14px;
        line-height:1.8;
        margin-bottom:24px;
    }
    .analytics-features{
        grid-template-columns:1fr;
        gap:12px;
    }
    .analytics-feature{
        padding:14px 16px;
        gap:12px;
        border-radius:16px;
    }
    .analytics-feature i{
        font-size:16px;
    }
    .analytics-feature span{
        font-size:14px;
    }
    .review-analytics-right{
        gap:18px;
    }
    .analytics-progress-item{
        padding:20px;
        border-radius:22px;
    }
    .analytics-progress-top{
        margin-bottom:14px;
    }
    .analytics-progress-top span{
        font-size:14px;
    }
    .analytics-progress-top strong{
        font-size:14px;
    }

    /* LEAVE REVIEW */
    .leave-review-subtitle{
        font-size:12px;
        padding:10px 18px;
        margin-bottom:18px;
    }
    .leave-review-features{
        gap:14px;
    }
    .leave-review-feature{
        flex-direction:row;
        gap:16px;
        padding:18px 20px;
        border-radius:22px;
    }
    .leave-feature-icon{
        width:56px;
        height:56px;
        min-width:56px;
        font-size:22px;
        border-radius:18px;
    }
    .leave-review-feature h4{
        font-size:18px;
        margin-bottom:6px;
    }
    .leave-review-feature p{
        font-size:13px;
    }
    .leave-review-form-box{
        padding:26px 20px;
        border-radius:28px;
    }
    .review-form-header{
        margin-bottom:24px;
    }
    .review-form-header h3{
        font-size:24px;
        margin-bottom:8px;
    }
    .review-form-header p{
        font-size:14px;
    }
    .leave-review-form{
        gap:18px;
    }
    .review-input-group label{
        font-size:14px;
    }
    .review-input-group input,
    .review-input-group select,
    .review-input-group textarea{
        padding:14px 16px;
        font-size:14px;
        border-radius:14px;
    }
    .review-input-group select{
        padding-right:48px;
        background-position:right 16px center;
    }
    .review-input-group textarea{
        min-height:140px;
    }
    .review-stars-select{
        gap:10px;
    }
    .review-stars-select i{
        font-size:24px;
    }
    .review-upload-box{
        padding:28px 18px;
        border-radius:22px;
    }
    .review-upload-box i{
        font-size:34px;
        margin-bottom:14px;
    }
    .review-upload-box h4{
        font-size:18px;
        margin-bottom:8px;
    }
    .review-upload-box p{
        font-size:13px;
        margin-bottom:14px;
    }
    .submit-review-btn{
        padding:16px;
        font-size:15px;
        border-radius:16px;
    }
}

/* ---------- 576px : phones ---------- */
@media (max-width:576px){

    /* HERO */
    .reviews-hero-section{
        padding:70px 14px;
    }
    .reviews-hero-content h1{
        font-size:30px;
        line-height:1.15;
    }
    .reviews-hero-content p{
        font-size:14px;
    }
    .reviews-stat-item h3{
        font-size:30px;
    }
    .reviews-main-image,
    .reviews-main-image img{
        height:340px;
    }
    .reviews-floating-card{
        padding:20px 18px;
    }
    .reviews-card-top img{
        width:54px;
        height:54px;
    }
    .reviews-card-top h4,
    .card-two h4{
        font-size:17px;
    }
    .reviews-floating-icon{
        width:54px;
        height:54px;
        min-width:54px;
        font-size:22px;
    }
    .card-two p{
        font-size:13px;
    }

    /* TESTIMONIALS */
    .student-testimonials-section,
    .premium-video-testimonials,
    .review-statistics-section,
    .leave-review-section{
        padding:60px 14px;
    }
    .testimonial-header h2,
    .premium-video-header h2,
    .review-stats-header h2,
    .leave-review-left h2{
        font-size:26px;
    }
    .testimonial-card{
        padding:22px 18px;
    }
    .testimonial-top{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
    }
    .testimonial-user img{
        width:50px;
        height:50px;
    }
    .testimonial-user h4{
        font-size:17px;
    }
    .testimonial-quote{
        width:46px;
        height:46px;
        min-width:46px;
        font-size:16px;
    }
    .testimonial-card p{
        font-size:13.5px;
    }
    .testimonial-footer{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    /* PREMIUM VIDEO */
    .premium-main-video{
        min-height:380px;
        border-radius:22px;
    }
    .premium-main-content{
        padding:20px 16px;
    }
    .premium-main-content h3{
        font-size:20px;
    }
    .premium-main-content p{
        font-size:13.5px;
        margin-bottom:18px;
    }
    .premium-main-user img{
        width:48px;
        height:48px;
    }
    .premium-main-user h4{
        font-size:16px;
    }
    .premium-main-stats{
        width:100%;
    }
    .premium-main-stat{
        padding:9px 12px;
    }
    .premium-main-stat span{
        font-size:12px;
    }
    .premium-main-play{
        width:66px;
        height:66px;
        font-size:20px;
    }
    .premium-video-thumb{
        height:190px;
    }
    .premium-video-info h4{
        font-size:18px;
    }
    .premium-video-info p{
        font-size:13.5px;
    }
    .premium-video-meta{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    /* VIDEO MODAL */
    .video-container iframe{
        height:200px;
    }
    .video-close{
        top:-46px;
        width:38px;
        height:38px;
        font-size:18px;
    }

    /* STATS */
    .review-stat-card{
        padding:22px 18px;
    }
    .review-stat-icon{
        width:68px;
        height:68px;
        font-size:26px;
        border-radius:20px;
    }
    .review-stat-card h3{
        font-size:34px;
    }

    /* ANALYTICS */
    .review-analytics-wrapper{
        padding:22px 18px;
        border-radius:24px;
    }
    .review-analytics-left h3{
        font-size:22px;
    }

    /* LEAVE REVIEW */
    .leave-review-feature{
        flex-direction:row;
        align-items:flex-start;
        padding:16px 18px;
        gap:14px;
    }
    .leave-feature-icon{
        width:50px;
        height:50px;
        min-width:50px;
        font-size:20px;
        border-radius:16px;
    }
    .leave-review-feature h4{
        font-size:16px;
    }
    .leave-review-feature p{
        font-size:12.5px;
    }
    .leave-review-form-box{
        padding:22px 16px;
    }
    .review-form-header h3{
        font-size:22px;
    }
    .review-input-group input,
    .review-input-group select,
    .review-input-group textarea{
        padding:13px 14px;
    }
    .review-input-group select{
        padding-right:42px;
        background-position:right 14px center;
    }
    .review-stars-select i{
        font-size:22px;
    }
    .review-upload-box{
        padding:22px 14px;
    }
    .review-upload-box i{
        font-size:30px;
    }
    .review-upload-box h4{
        font-size:17px;
    }
    .submit-review-btn{
        padding:15px;
        font-size:14px;
    }
}

/* ---------- 400px : extra small phones ---------- */
@media (max-width:400px){

    /* HERO */
    .reviews-hero-section{
        padding:60px 12px;
    }
    .reviews-hero-subtitle{
        font-size:11px;
        padding:9px 14px;
    }
    .reviews-hero-content h1{
        font-size:26px;
    }
    .reviews-hero-content p{
        font-size:13.5px;
    }
    .reviews-primary-btn,
    .reviews-outline-btn{
        padding:14px 20px;
        font-size:14px;
    }
    .reviews-stat-item{
        padding:18px 16px;
    }
    .reviews-stat-item h3{
        font-size:26px;
    }
    .reviews-stat-item p{
        font-size:13px;
    }
    .reviews-main-image,
    .reviews-main-image img{
        height:280px;
    }

    /* TESTIMONIALS */
    .student-testimonials-section,
    .premium-video-testimonials,
    .review-statistics-section,
    .leave-review-section{
        padding:50px 12px;
    }
    .testimonial-header h2,
    .premium-video-header h2,
    .review-stats-header h2,
    .leave-review-left h2{
        font-size:22px;
    }
    .testimonial-header p,
    .premium-video-header p,
    .review-stats-header p,
    .leave-review-left p{
        font-size:13.5px;
    }
    .testimonial-user h4{
        font-size:16px;
    }

    /* PREMIUM VIDEO */
    .premium-main-video{
        min-height:340px;
    }
    .premium-main-content h3{
        font-size:18px;
    }
    .premium-main-stat{
        padding:8px 10px;
    }
    .premium-video-thumb{
        height:170px;
    }
    .premium-video-info h4{
        font-size:17px;
    }

    /* MODAL */
    .video-container iframe{
        height:180px;
    }

    /* STATS */
    .review-stat-card h3{
        font-size:30px;
    }
    .review-stat-icon{
        width:62px;
        height:62px;
        font-size:24px;
    }

    /* ANALYTICS */
    .review-analytics-left h3{
        font-size:20px;
    }
    .analytics-progress-item{
        padding:18px 16px;
    }

    /* LEAVE REVIEW */
    .leave-review-feature{
        flex-direction:column;
        align-items:flex-start;
    }
    .leave-feature-icon{
        width:48px;
        height:48px;
        min-width:48px;
        font-size:18px;
    }
    .review-form-header h3{
        font-size:20px;
    }
    .review-stars-select{
        gap:8px;
    }
    .review-stars-select i{
        font-size:20px;
    }
}


/* =========================================================
   STUDENT RESOURCES PAGE — FULL RESPONSIVE OVERRIDES
   Scope: student-resources.html only
   Breakpoints: 1440 / 1200 / 992 / 768 / 550 / 441 / 390 / 320 px
   - Prevents overflow, scales typography, restacks grids
   - Preserves desktop design, colors, hover, animations
========================================================= */

/* Box-sizing & overflow safety for all student-resources sections */
.resources-hero-section,
.driving-test-prep-section,
.driving-tips-section,
.traffic-rules-section,
.practice-test-section,
.learning-videos-section{
    overflow-x:hidden;
}

.resources-hero-section *,
.driving-test-prep-section *,
.driving-tips-section *,
.traffic-rules-section *,
.practice-test-section *,
.learning-videos-section *{
    box-sizing:border-box;
}

.resources-hero-section img,
.driving-test-prep-section img,
.driving-tips-section img,
.traffic-rules-section img,
.practice-test-section img,
.learning-videos-section img{
    max-width:100%;
}

/* ---------- 1440px : large desktop ---------- */
@media (max-width:1440px){

    /* HERO */
    .resources-hero-section{
        padding:110px 20px;
    }
    .resources-hero-wrapper{
        gap:50px;
    }
    .resources-hero-content h1{
        font-size:62px;
    }
    .resources-main-image img{
        height:680px;
    }
    .card-one{
        left:-30px;
    }
    .card-two{
        right:-30px;
    }

    /* SECTION HEADERS */
    .prep-header h2,
    .tips-header h2,
    .traffic-header h2,
    .practice-header h2,
    .videos-header h2{
        font-size:52px;
    }

    /* PREP / PRACTICE */
    .prep-card-top h3,
    .practice-card-top h3{
        font-size:26px;
    }
    .prep-icon,
    .practice-icon{
        width:74px;
        height:74px;
        min-width:74px;
        font-size:28px;
        border-radius:22px;
    }
    .practice-image img{
        height:780px;
    }

    /* TIPS / TRAFFIC */
    .tips-content h3,
    .traffic-content h3{
        font-size:28px;
    }
    .tips-icon,
    .traffic-icon{
        width:78px;
        height:78px;
        font-size:30px;
    }

    /* VIDEOS */
    .video-content h3{
        font-size:26px;
    }
    .video-thumb{
        height:280px;
    }
}

/* ---------- 1200px : laptop / large tablet ---------- */
@media (max-width:1200px){

    /* HERO */
    .resources-hero-section{
        padding:100px 20px;
        min-height:auto;
    }
    .resources-hero-wrapper{
        gap:40px;
    }
    .resources-hero-content h1{
        font-size:54px;
    }
    .resources-hero-content p{
        font-size:17px;
    }
    .resources-hero-stats{
        gap:14px;
        margin-top:40px;
    }
    .resources-stat-item{
        min-width:160px;
        padding:24px 20px;
    }
    .resources-stat-item h3{
        font-size:38px;
    }
    .resources-main-image img{
        height:600px;
    }
    .card-one{
        top:24px;
        left:0;
        padding:18px;
    }
    .card-two{
        bottom:24px;
        right:0;
        padding:18px;
    }
    .resources-floating-icon{
        width:60px;
        height:60px;
        min-width:60px;
        font-size:24px;
    }
    .resources-floating-card h4{
        font-size:18px;
    }

    /* SECTION SPACING */
    .driving-test-prep-section,
    .driving-tips-section,
    .traffic-rules-section,
    .practice-test-section,
    .learning-videos-section{
        padding:100px 20px;
    }
    .prep-header,
    .tips-header,
    .traffic-header,
    .practice-header,
    .videos-header{
        margin-bottom:60px;
    }
    .prep-header h2,
    .tips-header h2,
    .traffic-header h2,
    .practice-header h2,
    .videos-header h2{
        font-size:46px;
    }

    /* PREP - stack to single column */
    .prep-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }
    .prep-image{
        max-width:100%;
    }
    .prep-image img{
        height:460px;
    }

    /* PRACTICE - stack to single column */
    .practice-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }
    .practice-image{
        max-width:100%;
    }
    .practice-image img{
        height:600px;
    }

    /* TIPS / TRAFFIC */
    .tips-grid,
    .traffic-grid{
        grid-template-columns:repeat(2,1fr);
        gap:24px;
    }

    /* VIDEOS */
    .videos-grid{
        grid-template-columns:repeat(2,1fr);
        gap:24px;
    }
    .video-thumb{
        height:260px;
    }
    .video-content{
        padding:28px 24px;
    }
}

/* ---------- 992px : tablet ---------- */
@media (max-width:992px){

    /* HERO */
    .resources-hero-section{
        padding:90px 20px;
    }
    .resources-hero-wrapper{
        grid-template-columns:1fr;
        gap:50px;
    }
    .resources-hero-content{
        text-align:center;
    }
    .resources-hero-content h1,
    .resources-hero-content p{
        margin-left:auto;
        margin-right:auto;
    }
    .resources-hero-content h1{
        font-size:44px;
    }
    .resources-hero-buttons{
        justify-content:center;
    }
    .resources-hero-stats{
        justify-content:center;
    }
    .resources-hero-right{
        max-width:680px;
        margin:0 auto;
    }
    .resources-main-image img{
        height:500px;
    }

    /* SECTION HEADERS */
    .prep-header h2,
    .tips-header h2,
    .traffic-header h2,
    .practice-header h2,
    .videos-header h2{
        font-size:40px;
    }

    /* PREP */
    .prep-image img{
        height:420px;
    }
    .prep-card{
        padding:28px 24px;
        border-radius:28px;
    }
    .prep-card-top h3{
        font-size:24px;
    }
    .prep-icon{
        width:68px;
        height:68px;
        min-width:68px;
        font-size:24px;
        border-radius:20px;
    }
    .prep-checklist{
        grid-template-columns:1fr;
    }

    /* TIPS */
    .tips-card{
        padding:28px 24px;
        border-radius:28px;
    }
    .tips-icon{
        width:72px;
        height:72px;
        font-size:28px;
        margin-bottom:22px;
    }
    .tips-content h3{
        font-size:24px;
    }

    /* TRAFFIC */
    .traffic-card{
        padding:28px 24px;
        border-radius:28px;
    }
    .traffic-icon{
        width:72px;
        height:72px;
        font-size:28px;
    }
    .traffic-content h3{
        font-size:24px;
    }
    .traffic-info{
        flex-direction:column;
        gap:12px;
    }
    .traffic-info-item{
        width:100%;
    }

    /* PRACTICE */
    .practice-image img{
        height:520px;
    }
    .practice-card{
        padding:28px 24px;
        border-radius:28px;
    }
    .practice-card-top h3{
        font-size:24px;
    }
    .practice-icon{
        width:68px;
        height:68px;
        min-width:68px;
        font-size:24px;
        border-radius:20px;
    }
    .practice-quiz-box{
        padding:28px 24px;
        border-radius:28px;
    }
    .practice-quiz-box h3{
        font-size:26px;
    }

    /* VIDEOS */
    .videos-grid{
        grid-template-columns:1fr;
        gap:22px;
    }
    .video-thumb{
        height:300px;
    }
    .video-play-btn{
        width:74px;
        height:74px;
        font-size:24px;
    }
    .video-content h3{
        font-size:24px;
    }
}

/* ---------- 768px : large phone / small tablet ---------- */
@media (max-width:768px){

    /* HERO */
    .resources-hero-section{
        padding:80px 16px;
    }
    .resources-hero-subtitle{
        font-size:13px;
        padding:10px 18px;
        margin-bottom:22px;
    }
    .resources-hero-content h1{
        font-size:34px;
        margin-bottom:22px;
    }
    .resources-hero-content p{
        font-size:15px;
        line-height:1.8;
    }
    .resources-hero-buttons{
        flex-direction:column;
        gap:14px;
        margin-top:32px;
        width:100%;
    }
    .resources-primary-btn,
    .resources-outline-btn{
        width:100%;
        padding:16px 24px;
        font-size:15px;
        border-radius:14px;
    }
    .resources-hero-stats{
        gap:12px;
        margin-top:36px;
    }
    .resources-stat-item{
        flex:1 1 100%;
        min-width:100%;
        padding:22px 20px;
    }
    .resources-stat-item h3{
        font-size:32px;
    }
    .resources-stat-item p{
        font-size:14px;
    }
    .resources-main-image{
        border-radius:24px;
    }
    .resources-main-image img{
        height:380px;
    }
    .resources-floating-card{
        position:relative !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        width:100% !important;
        margin-top:16px;
        padding:18px 16px;
        border-radius:20px;
    }
    .resources-floating-icon{
        width:54px;
        height:54px;
        min-width:54px;
        font-size:22px;
        border-radius:16px;
    }
    .resources-floating-card h4{
        font-size:17px;
    }
    .resources-floating-card p{
        font-size:13px;
    }

    /* SECTIONS — compact spacing */
    .driving-test-prep-section,
    .driving-tips-section,
    .traffic-rules-section,
    .practice-test-section,
    .learning-videos-section{
        padding:70px 16px;
    }
    .prep-header,
    .tips-header,
    .traffic-header,
    .practice-header,
    .videos-header{
        margin-bottom:46px;
    }
    .prep-subtitle,
    .tips-subtitle,
    .traffic-subtitle,
    .practice-subtitle,
    .videos-subtitle{
        font-size:12px;
        padding:10px 18px;
        margin-bottom:18px;
    }
    .prep-header h2,
    .tips-header h2,
    .traffic-header h2,
    .practice-header h2,
    .videos-header h2{
        font-size:30px;
        margin-bottom:18px;
    }
    .prep-header p,
    .tips-header p,
    .traffic-header p,
    .practice-header p,
    .videos-header p{
        font-size:15px;
        line-height:1.8;
    }

    /* PREP */
    .prep-image img{
        height:340px;
    }
    .prep-floating-card{
        left:14px;
        bottom:14px;
        padding:14px;
        gap:12px;
        border-radius:20px;
    }
    .prep-floating-icon{
        width:54px;
        height:54px;
        min-width:54px;
        font-size:22px;
        border-radius:18px;
    }
    .prep-floating-card h4{
        font-size:18px;
    }
    .prep-floating-card p{
        font-size:12px;
    }
    .prep-card{
        padding:24px 20px;
        border-radius:24px;
    }
    .prep-card-top{
        flex-direction:row;
        align-items:flex-start;
        gap:14px;
        margin-bottom:18px;
    }
    .prep-card-top h3{
        font-size:20px;
    }
    .prep-icon{
        width:58px;
        height:58px;
        min-width:58px;
        font-size:22px;
        border-radius:18px;
    }
    .prep-card p{
        font-size:14px;
        line-height:1.8;
        margin-bottom:20px;
    }
    .prep-check-item{
        padding:16px;
        gap:12px;
        border-radius:18px;
    }
    .prep-check-item span{
        font-size:14px;
    }

    /* TIPS */
    .tips-grid{
        grid-template-columns:1fr;
        gap:18px;
    }
    .tips-card{
        padding:22px 18px;
        border-radius:22px;
    }
    .tips-icon{
        width:60px;
        height:60px;
        font-size:24px;
        margin-bottom:18px;
        border-radius:20px;
    }
    .tips-content span{
        font-size:13px;
        margin-bottom:12px;
    }
    .tips-content h3{
        font-size:20px;
        margin-bottom:14px;
    }
    .tips-content p{
        font-size:14px;
        line-height:1.7;
    }
    .tips-footer{
        flex-direction:row;
        align-items:center;
        gap:12px;
        margin-top:22px;
        flex-wrap:wrap;
    }
    .tips-level{
        padding:8px 14px;
        font-size:12px;
    }
    .tips-btn{
        padding:12px 18px;
        font-size:13px;
        border-radius:14px;
    }

    /* TRAFFIC */
    .traffic-grid{
        grid-template-columns:1fr;
        gap:18px;
    }
    .traffic-card{
        padding:22px 18px;
        border-radius:22px;
    }
    .traffic-icon{
        width:60px;
        height:60px;
        font-size:24px;
        margin-bottom:18px;
        border-radius:20px;
    }
    .traffic-content span{
        font-size:13px;
        margin-bottom:12px;
    }
    .traffic-content h3{
        font-size:20px;
        margin-bottom:14px;
    }
    .traffic-content p{
        font-size:14px;
        line-height:1.7;
    }
    .traffic-info{
        gap:10px;
        margin-top:18px;
    }
    .traffic-info-item{
        padding:14px 16px;
    }
    .traffic-info-item strong{
        font-size:14px;
    }
    .traffic-info-item span{
        font-size:13px;
    }
    .traffic-mini-box{
        padding:12px 14px;
        gap:10px;
        margin-top:18px;
    }
    .traffic-mini-box span{
        font-size:13px;
    }

    /* PRACTICE */
    .practice-image img{
        height:380px;
    }
    .practice-floating-card{
        position:relative;
        left:auto;
        bottom:auto;
        margin:14px;
        padding:14px;
        gap:12px;
        border-radius:20px;
    }
    .practice-floating-icon{
        width:54px;
        height:54px;
        min-width:54px;
        font-size:22px;
        border-radius:18px;
    }
    .practice-floating-card h4{
        font-size:18px;
    }
    .practice-floating-card p{
        font-size:12px;
    }
    .practice-card{
        padding:24px 20px;
        border-radius:24px;
    }
    .practice-card-top{
        flex-direction:row;
        align-items:flex-start;
        gap:14px;
        margin-bottom:18px;
    }
    .practice-card-top h3{
        font-size:20px;
    }
    .practice-icon{
        width:58px;
        height:58px;
        min-width:58px;
        font-size:22px;
        border-radius:18px;
    }
    .practice-card p{
        font-size:14px;
        line-height:1.8;
        margin-bottom:20px;
    }
    .practice-bar{
        height:5px;
    }
    .practice-quiz-box{
        padding:24px 20px;
        border-radius:24px;
    }
    .quiz-box-top{
        flex-direction:row;
        align-items:center;
        gap:14px;
        margin-bottom:20px;
        flex-wrap:wrap;
    }
    .quiz-badge{
        padding:9px 14px;
        font-size:12px;
    }
    .quiz-box-top strong{
        font-size:14px;
    }
    .practice-quiz-box h3{
        font-size:22px;
        margin-bottom:14px;
    }
    .practice-quiz-box p{
        font-size:14px;
        line-height:1.8;
        margin-bottom:22px;
    }
    .practice-btn{
        width:100%;
        padding:15px 22px;
        font-size:14px;
        border-radius:14px;
    }

    /* VIDEOS */
    .videos-grid{
        grid-template-columns:1fr;
        gap:20px;
    }
    .video-card{
        border-radius:24px;
    }
    .video-thumb{
        height:230px;
    }
    .video-play-btn{
        width:64px;
        height:64px;
        font-size:22px;
    }
    .video-duration{
        right:14px;
        bottom:14px;
        padding:8px 14px;
        font-size:12px;
    }
    .video-content{
        padding:22px 20px;
    }
    .video-content span{
        font-size:13px;
        margin-bottom:12px;
    }
    .video-content h3{
        font-size:20px;
        margin-bottom:14px;
    }
    .video-content p{
        font-size:14px;
        line-height:1.7;
    }
    .video-footer{
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        gap:14px;
        margin-top:22px;
        flex-wrap:wrap;
    }
    .video-stats{
        flex-direction:row;
        gap:14px;
        flex-wrap:wrap;
    }
    .video-stat span{
        font-size:13px;
    }
    .video-btn{
        padding:13px 18px;
        font-size:13px;
        border-radius:14px;
    }
}

/* ---------- 550px : phones ---------- */
@media (max-width:550px){

    /* HERO */
    .resources-hero-section{
        padding:60px 12px;
    }
    .resources-hero-content h1{
        font-size:28px;
        line-height:1.15;
    }
    .resources-hero-content p{
        font-size:14px;
    }
    .resources-stat-item h3{
        font-size:28px;
    }
    .resources-main-image img{
        height:300px;
    }

    /* SECTIONS */
    .driving-test-prep-section,
    .driving-tips-section,
    .traffic-rules-section,
    .practice-test-section,
    .learning-videos-section{
        padding:60px 12px;
    }
    .prep-header h2,
    .tips-header h2,
    .traffic-header h2,
    .practice-header h2,
    .videos-header h2{
        font-size:26px;
    }

    /* PREP */
    .prep-image img{
        height:280px;
    }
    .prep-card{
        padding:20px 16px;
    }
    .prep-card-top h3{
        font-size:18px;
    }
    .prep-icon{
        width:52px;
        height:52px;
        min-width:52px;
        font-size:20px;
    }

    /* TIPS / TRAFFIC */
    .tips-content h3,
    .traffic-content h3{
        font-size:18px;
    }
    .tips-icon,
    .traffic-icon{
        width:54px;
        height:54px;
        font-size:22px;
    }
    .tips-footer{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }
    .tips-btn{
        width:100%;
    }

    /* PRACTICE */
    .practice-image img{
        height:320px;
    }
    .practice-card{
        padding:20px 16px;
    }
    .practice-card-top h3{
        font-size:18px;
    }
    .practice-icon{
        width:52px;
        height:52px;
        min-width:52px;
        font-size:20px;
    }
    .practice-quiz-box{
        padding:22px 16px;
    }
    .practice-quiz-box h3{
        font-size:20px;
    }
    .quiz-box-top{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    /* VIDEOS */
    .video-thumb{
        height:200px;
    }
    .video-play-btn{
        width:58px;
        height:58px;
        font-size:20px;
    }
    .video-content h3{
        font-size:18px;
    }
    .video-footer{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
    }
    .video-btn{
        width:100%;
    }
}

/* ---------- 441px : small phones ---------- */
@media (max-width:441px){

    /* HERO */
    .resources-hero-section{
        padding:50px 12px;
    }
    .resources-hero-subtitle{
        font-size:11px;
        padding:8px 14px;
    }
    .resources-hero-content h1{
        font-size:25px;
    }
    .resources-hero-content p{
        font-size:13.5px;
    }
    .resources-primary-btn,
    .resources-outline-btn{
        padding:14px 20px;
        font-size:14px;
    }
    .resources-stat-item{
        padding:18px 16px;
    }
    .resources-stat-item h3{
        font-size:24px;
    }
    .resources-stat-item p{
        font-size:13px;
    }
    .resources-main-image img{
        height:240px;
    }
    .resources-floating-card{
        padding:14px 14px;
    }
    .resources-floating-icon{
        width:46px;
        height:46px;
        min-width:46px;
        font-size:18px;
    }

    /* SECTIONS */
    .driving-test-prep-section,
    .driving-tips-section,
    .traffic-rules-section,
    .practice-test-section,
    .learning-videos-section{
        padding:50px 12px;
    }
    .prep-header h2,
    .tips-header h2,
    .traffic-header h2,
    .practice-header h2,
    .videos-header h2{
        font-size:22px;
    }
    .prep-header p,
    .tips-header p,
    .traffic-header p,
    .practice-header p,
    .videos-header p{
        font-size:13.5px;
    }

    /* PREP */
    .prep-card-top{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }
    .prep-card-top h3{
        font-size:17px;
    }
    .prep-icon{
        width:48px;
        height:48px;
        min-width:48px;
        font-size:18px;
        border-radius:14px;
    }
    .prep-image img{
        height:240px;
    }
    .prep-floating-card{
        left:10px;
        bottom:10px;
        padding:12px;
    }
    .prep-floating-icon{
        width:46px;
        height:46px;
        min-width:46px;
        font-size:18px;
    }
    .prep-floating-card h4{
        font-size:15px;
    }
    .prep-floating-card p{
        font-size:11px;
    }
    .prep-check-item{
        padding:14px;
    }
    .prep-check-item span{
        font-size:13px;
    }

    /* TIPS */
    .tips-card{
        padding:20px 16px;
    }
    .tips-content h3{
        font-size:17px;
    }
    .tips-content p{
        font-size:13.5px;
    }
    .tips-icon{
        width:50px;
        height:50px;
        font-size:20px;
    }
    .tips-level{
        font-size:11px;
        padding:7px 12px;
    }

    /* TRAFFIC */
    .traffic-card{
        padding:20px 16px;
    }
    .traffic-content h3{
        font-size:17px;
    }
    .traffic-content p{
        font-size:13.5px;
    }
    .traffic-icon{
        width:50px;
        height:50px;
        font-size:20px;
    }
    .traffic-info-item{
        padding:12px 14px;
    }
    .traffic-info-item strong{
        font-size:13px;
    }
    .traffic-info-item span{
        font-size:12px;
    }
    .traffic-mini-box{
        padding:10px 12px;
    }
    .traffic-mini-box span{
        font-size:12px;
    }

    /* PRACTICE */
    .practice-card-top{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }
    .practice-card-top h3{
        font-size:17px;
    }
    .practice-icon{
        width:48px;
        height:48px;
        min-width:48px;
        font-size:18px;
        border-radius:14px;
    }
    .practice-image img{
        height:260px;
    }
    .practice-floating-card{
        margin:10px;
        padding:12px;
    }
    .practice-floating-icon{
        width:46px;
        height:46px;
        min-width:46px;
        font-size:18px;
    }
    .practice-floating-card h4{
        font-size:15px;
    }
    .practice-floating-card p{
        font-size:11px;
    }
    .practice-quiz-box h3{
        font-size:18px;
    }
    .practice-btn{
        padding:14px 20px;
        font-size:13.5px;
    }
    .quiz-badge{
        padding:8px 12px;
        font-size:11px;
    }

    /* VIDEOS */
    .video-thumb{
        height:180px;
    }
    .video-play-btn{
        width:54px;
        height:54px;
        font-size:18px;
    }
    .video-duration{
        right:10px;
        bottom:10px;
        padding:6px 12px;
        font-size:11px;
    }
    .video-content{
        padding:18px 16px;
    }
    .video-content h3{
        font-size:17px;
    }
    .video-content p{
        font-size:13.5px;
    }
    .video-stat span{
        font-size:12px;
    }
    .video-btn{
        padding:12px 16px;
        font-size:12.5px;
    }
}

/* ---------- 390px : iPhone 12 mini / very small ---------- */
@media (max-width:390px){

    .resources-hero-content h1{
        font-size:23px;
    }
    .resources-stat-item h3{
        font-size:22px;
    }
    .resources-main-image img{
        height:220px;
    }
    .prep-image img{
        height:220px;
    }
    .practice-image img{
        height:240px;
    }
    .video-thumb{
        height:170px;
    }

    .prep-header h2,
    .tips-header h2,
    .traffic-header h2,
    .practice-header h2,
    .videos-header h2{
        font-size:20px;
    }
    .tips-content h3,
    .traffic-content h3,
    .video-content h3,
    .prep-card-top h3,
    .practice-card-top h3{
        font-size:16px;
    }
    .practice-quiz-box h3{
        font-size:17px;
    }
    .resources-floating-card h4{
        font-size:15px;
    }
    .resources-floating-card p{
        font-size:11.5px;
    }
}

/* ---------- 320px : smallest phones (iPhone 5 / SE) ---------- */
@media (max-width:320px){

    /* HERO */
    .resources-hero-section{
        padding:40px 10px;
    }
    .resources-hero-content h1{
        font-size:21px;
    }
    .resources-hero-content p{
        font-size:13px;
    }
    .resources-primary-btn,
    .resources-outline-btn{
        padding:12px 16px;
        font-size:13px;
    }
    .resources-stat-item{
        padding:14px 12px;
    }
    .resources-stat-item h3{
        font-size:20px;
    }
    .resources-stat-item p{
        font-size:12px;
    }
    .resources-main-image img{
        height:190px;
    }
    .resources-floating-icon{
        width:42px;
        height:42px;
        min-width:42px;
        font-size:16px;
    }

    /* SECTIONS */
    .driving-test-prep-section,
    .driving-tips-section,
    .traffic-rules-section,
    .practice-test-section,
    .learning-videos-section{
        padding:40px 10px;
    }
    .prep-header h2,
    .tips-header h2,
    .traffic-header h2,
    .practice-header h2,
    .videos-header h2{
        font-size:18px;
    }
    .prep-header p,
    .tips-header p,
    .traffic-header p,
    .practice-header p,
    .videos-header p{
        font-size:12.5px;
    }

    /* PREP / PRACTICE */
    .prep-image img,
    .practice-image img{
        height:200px;
    }
    .prep-card,
    .practice-card{
        padding:16px 14px;
        border-radius:18px;
    }
    .prep-card-top h3,
    .practice-card-top h3{
        font-size:15px;
    }
    .prep-icon,
    .practice-icon{
        width:42px;
        height:42px;
        min-width:42px;
        font-size:16px;
        border-radius:12px;
    }
    .prep-card p,
    .practice-card p{
        font-size:13px;
    }
    .prep-check-item,
    .traffic-info-item,
    .traffic-mini-box{
        padding:10px 12px;
    }
    .practice-quiz-box{
        padding:18px 14px;
    }
    .practice-quiz-box h3{
        font-size:16px;
    }
    .practice-btn{
        padding:13px 16px;
        font-size:13px;
    }

    /* TIPS / TRAFFIC */
    .tips-card,
    .traffic-card{
        padding:16px 14px;
        border-radius:18px;
    }
    .tips-icon,
    .traffic-icon{
        width:44px;
        height:44px;
        font-size:18px;
        margin-bottom:14px;
    }
    .tips-content h3,
    .traffic-content h3{
        font-size:15px;
    }
    .tips-content p,
    .traffic-content p{
        font-size:13px;
    }

    /* VIDEOS */
    .video-thumb{
        height:150px;
    }
    .video-play-btn{
        width:48px;
        height:48px;
        font-size:16px;
    }
    .video-content{
        padding:16px 14px;
    }
    .video-content h3{
        font-size:15px;
    }
    .video-content p{
        font-size:13px;
    }
    .video-btn{
        padding:11px 14px;
        font-size:12px;
    }
    .video-stats{
        flex-direction:column;
        gap:8px;
    }
}


/* =========================================================
   INSTRUCTORS PAGE — REFINEMENTS + FULL RESPONSIVE
   Scope: instructors.html only
   - Polishes skill cards (slimmer, better alignment)
   - Tightens spacing, alignment, typography
   - Full responsive: 1440 / 1200 / 992 / 768 / 550 / 441 / 390 / 320 px
   - Keeps premium look, gradients, glow, shadows, hover
========================================================= */

/* Box-sizing & overflow safety */
.instructor-hero-section,
.instructor-profiles-section,
.instructor-skills-section,
.instructor-certification-section,
.instructor-availability-section,
.student-feedback-section{
    overflow-x:hidden;
}

.instructor-hero-section *,
.instructor-profiles-section *,
.instructor-skills-section *,
.instructor-certification-section *,
.instructor-availability-section *,
.student-feedback-section *{
    box-sizing:border-box;
}

.instructor-hero-section img,
.instructor-profiles-section img,
.instructor-skills-section img,
.instructor-certification-section img,
.instructor-availability-section img,
.student-feedback-section img{
    max-width:100%;
}

/* ---------- SKILL CARD POLISH (desktop) ----------
   Slimmer card, tighter alignment, premium feel.
   Keeps gradient + glow + hover unchanged. */
.skill-card{
    padding:24px 26px;
    border-radius:26px;
}

.skill-top{
    gap:16px;
    margin-bottom:18px;
    align-items:center;
}

.skill-icon{
    width:60px;
    height:60px;
    min-width:60px;
    border-radius:18px;
    font-size:24px;
    box-shadow:0 14px 30px rgba(59,231,155,0.22);
}

.skill-info h3{
    font-size:22px;
    margin-bottom:4px;
    line-height:1.25;
}

.skill-info span{
    font-size:13px;
}

.skill-percent{
    font-size:24px;
    line-height:1;
    align-self:center;
}

.skill-bar{
    height:5px;
    margin-bottom:14px;
}

.skill-card p{
    font-size:14.5px;
    line-height:1.75;
    margin:0;
}

.skills-right{
    gap:20px;
}

/* ---------- 1440px : large desktop ---------- */
@media (max-width:1440px){

    .instructor-hero-section{
        padding:110px 20px;
    }
    .instructor-hero-content h1{
        font-size:62px;
    }
    .instructor-main-image,
    .instructor-main-image img{
        height:600px;
    }
    .card-one{
        left:-20px;
    }
    .card-two{
        right:-20px;
    }

    /* Section headers slimmer */
    .profiles-header h2,
    .skills-header h2,
    .certification-header h2,
    .availability-header h2,
    .feedback-header h2{
        font-size:50px;
    }

    /* Profile card */
    .profile-image img{
        height:380px;
    }
    .profile-content{
        padding:30px;
    }
    .profile-content h3{
        font-size:28px;
    }

    /* Certification + availability */
    .certification-content h3,
    .availability-top h3,
    .weekend-content h3{
        font-size:26px;
    }
    .certification-icon,
    .availability-icon,
    .weekend-icon{
        width:70px;
        height:70px;
        min-width:70px;
        font-size:26px;
        border-radius:22px;
    }
    .certification-image img,
    .availability-image img,
    .skills-image img{
        height:420px;
    }

    /* Feedback */
    .feedback-stat-card h3{
        font-size:46px;
    }
}

/* ---------- 1200px : laptop / large tablet ---------- */
@media (max-width:1200px){

    /* HERO */
    .instructor-hero-section{
        padding:100px 20px;
        min-height:auto;
    }
    .instructor-hero-wrapper{
        gap:40px;
    }
    .instructor-hero-content h1{
        font-size:54px;
    }
    .instructor-hero-content p{
        font-size:17px;
    }
    .instructor-hero-stats{
        gap:14px;
        margin-top:40px;
    }
    .instructor-stat-item{
        min-width:160px;
        padding:24px 20px;
    }
    .instructor-stat-item h3{
        font-size:38px;
    }
    .instructor-main-image,
    .instructor-main-image img{
        height:560px;
    }
    .card-one{
        top:24px;
        left:0;
        padding:18px;
    }
    .card-two{
        bottom:24px;
        right:0;
        padding:18px;
    }
    .floating-icon{
        width:60px;
        height:60px;
        min-width:60px;
        font-size:24px;
    }
    .instructor-floating-card h4{
        font-size:18px;
    }

    /* SECTIONS */
    .instructor-profiles-section,
    .instructor-skills-section,
    .instructor-certification-section,
    .instructor-availability-section,
    .student-feedback-section{
        padding:100px 20px;
    }
    .profiles-header,
    .skills-header,
    .certification-header,
    .availability-header,
    .feedback-header{
        margin-bottom:60px;
    }
    .profiles-header h2,
    .skills-header h2,
    .certification-header h2,
    .availability-header h2,
    .feedback-header h2{
        font-size:44px;
    }

    /* PROFILES */
    .profiles-grid{
        grid-template-columns:repeat(2,1fr);
        gap:26px;
    }
    .profile-image img{
        height:360px;
    }
    .profile-content{
        padding:28px;
    }
    .profile-content h3{
        font-size:26px;
    }
    .profile-experience{
        width:78px;
        height:78px;
        border-radius:22px;
        bottom:18px;
        left:18px;
    }
    .profile-experience span{
        font-size:24px;
    }

    /* SKILLS */
    .skills-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }
    .skills-image{
        max-width:100%;
        height:auto;
    }
    .skills-image,
    .skills-image img{
        height:420px;
    }

    /* CERTIFICATION */
    .certification-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }
    .certification-image{
        max-width:100%;
    }
    .certification-image,
    .certification-image img{
        height:420px;
    }
    .certification-card{
        padding:26px 24px;
        gap:20px;
        border-radius:26px;
    }
    .certification-icon{
        width:64px;
        height:64px;
        min-width:64px;
        font-size:24px;
        border-radius:20px;
    }
    .certification-content h3{
        font-size:22px;
        margin-bottom:10px;
    }
    .certification-content p{
        font-size:14.5px;
        line-height:1.75;
    }

    /* AVAILABILITY */
    .availability-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }
    .availability-image{
        max-width:100%;
    }
    .availability-image img{
        height:420px;
    }
    .availability-card{
        padding:26px 24px;
        border-radius:26px;
    }
    .availability-top{
        gap:16px;
        margin-bottom:20px;
    }
    .availability-icon,
    .weekend-icon{
        width:64px;
        height:64px;
        min-width:64px;
        font-size:24px;
        border-radius:20px;
    }
    .availability-top h3,
    .weekend-content h3{
        font-size:22px;
    }
    .availability-weekend{
        padding:26px 24px;
        border-radius:26px;
    }

    /* FEEDBACK */
    .feedback-stats{
        gap:20px;
    }
    .feedback-stat-card{
        padding:28px 24px;
        border-radius:28px;
    }
    .feedback-stat-card h3{
        font-size:42px;
    }
    .feedback-grid{
        grid-template-columns:repeat(2,1fr);
        gap:24px;
    }
    .feedback-card{
        padding:28px 24px;
        border-radius:28px;
    }
    .feedback-quote{
        width:54px;
        height:54px;
        min-width:54px;
        font-size:20px;
        border-radius:18px;
    }
    .feedback-user img{
        width:64px;
        height:64px;
    }
}

/* ---------- 992px : tablet ---------- */
@media (max-width:992px){

    /* HERO */
    .instructor-hero-section{
        padding:90px 20px;
    }
    .instructor-hero-wrapper{
        grid-template-columns:1fr;
        gap:50px;
    }
    .instructor-hero-content{
        text-align:center;
    }
    .instructor-hero-content h1,
    .instructor-hero-content p{
        margin-left:auto;
        margin-right:auto;
    }
    .instructor-hero-content h1{
        font-size:44px;
    }
    .instructor-hero-buttons{
        justify-content:center;
    }
    .instructor-hero-stats{
        justify-content:center;
    }
    .instructor-hero-right{
        max-width:680px;
        margin:0 auto;
    }
    .instructor-main-image,
    .instructor-main-image img{
        height:480px;
    }

    /* SECTIONS */
    .profiles-header h2,
    .skills-header h2,
    .certification-header h2,
    .availability-header h2,
    .feedback-header h2{
        font-size:38px;
    }

    /* PROFILES */
    .profile-image img{
        height:340px;
    }

    /* SKILLS — already 1-col */
    .skills-image,
    .skills-image img{
        height:380px;
    }
    .skill-card{
        padding:22px 22px;
    }
    .skill-info h3{
        font-size:20px;
    }
    .skill-percent{
        font-size:22px;
    }

    /* CERTIFICATION stats */
    .certification-stats{
        grid-template-columns:repeat(3,1fr);
        gap:14px;
    }
    .cert-stat-item{
        padding:22px 18px;
        border-radius:22px;
    }
    .cert-stat-item h4{
        font-size:34px;
    }
    .cert-stat-item p{
        font-size:13.5px;
    }

    /* AVAILABILITY image */
    .availability-image img{
        height:380px;
    }

    /* FEEDBACK */
    .feedback-stats{
        grid-template-columns:repeat(3,1fr);
    }
    .feedback-stat-card{
        padding:24px 20px;
    }
    .feedback-stat-card h3{
        font-size:36px;
    }
    .feedback-stat-card p{
        font-size:14px;
    }
    .feedback-grid{
        grid-template-columns:1fr;
        gap:20px;
    }
}

/* ---------- 768px : large phone / small tablet ---------- */
@media (max-width:768px){

    /* HERO */
    .instructor-hero-section{
        padding:70px 16px;
    }
    .instructor-hero-subtitle{
        font-size:13px;
        padding:10px 18px;
        margin-bottom:22px;
    }
    .instructor-hero-content h1{
        font-size:34px;
        margin-bottom:22px;
    }
    .instructor-hero-content p{
        font-size:15px;
        line-height:1.8;
    }
    .instructor-hero-buttons{
        flex-direction:column;
        gap:14px;
        margin-top:32px;
        width:100%;
    }
    .instructor-primary-btn,
    .instructor-outline-btn{
        width:100%;
        padding:16px 24px;
        font-size:15px;
        border-radius:14px;
    }
    .instructor-hero-stats{
        gap:12px;
        margin-top:36px;
    }
    .instructor-stat-item{
        flex:1 1 100%;
        min-width:100%;
        padding:22px 20px;
    }
    .instructor-stat-item h3{
        font-size:32px;
    }
    .instructor-stat-item p{
        font-size:14px;
    }
    .instructor-main-image{
        border-radius:24px;
    }
    .instructor-main-image,
    .instructor-main-image img{
        height:380px;
    }
    .instructor-floating-card{
        position:relative !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        width:100% !important;
        margin-top:16px;
        padding:18px 16px;
        border-radius:20px;
    }
    .floating-icon{
        width:54px;
        height:54px;
        min-width:54px;
        font-size:22px;
        border-radius:16px;
    }
    .instructor-floating-card h4{
        font-size:17px;
    }
    .instructor-floating-card p{
        font-size:13px;
    }

    /* SECTIONS */
    .instructor-profiles-section,
    .instructor-skills-section,
    .instructor-certification-section,
    .instructor-availability-section,
    .student-feedback-section{
        padding:64px 16px;
    }
    .profiles-header,
    .skills-header,
    .certification-header,
    .availability-header,
    .feedback-header{
        margin-bottom:46px;
    }
    .profiles-subtitle,
    .skills-subtitle,
    .certification-subtitle,
    .availability-subtitle,
    .feedback-subtitle{
        font-size:12px;
        padding:10px 18px;
        margin-bottom:18px;
    }
    .profiles-header h2,
    .skills-header h2,
    .certification-header h2,
    .availability-header h2,
    .feedback-header h2{
        font-size:30px;
        margin-bottom:18px;
    }
    .profiles-header p,
    .skills-header p,
    .certification-header p,
    .availability-header p,
    .feedback-header p{
        font-size:15px;
        line-height:1.8;
    }

    /* PROFILES */
    .profiles-grid{
        grid-template-columns:1fr;
        gap:20px;
    }
    .profile-card{
        border-radius:28px;
    }
    .profile-image img{
        height:300px;
    }
    .profile-experience{
        width:70px;
        height:70px;
        border-radius:20px;
        bottom:14px;
        left:14px;
    }
    .profile-experience span{
        font-size:22px;
    }
    .profile-experience p{
        font-size:12px;
    }
    .profile-content{
        padding:22px 20px;
    }
    .profile-content h3{
        font-size:22px;
        margin-bottom:14px;
    }
    .profile-content p{
        font-size:14px;
        line-height:1.75;
    }
    .profile-skills{
        gap:8px;
        margin-top:20px;
    }
    .profile-skills span{
        font-size:12px;
        padding:8px 14px;
    }
    .profile-footer{
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        gap:14px;
        margin-top:24px;
        flex-wrap:wrap;
    }
    .profile-social a{
        width:38px;
        height:38px;
        font-size:13px;
        border-radius:12px;
    }
    .profile-btn{
        padding:11px 18px;
        font-size:13px;
        border-radius:14px;
    }

    /* SKILLS */
    .skills-image,
    .skills-image img{
        height:320px;
    }
    .skills-floating-card{
        position:relative;
        left:auto;
        bottom:auto;
        margin:14px;
        padding:14px;
        gap:12px;
        border-radius:20px;
    }
    .skills-floating-icon{
        width:54px;
        height:54px;
        min-width:54px;
        font-size:22px;
        border-radius:18px;
    }
    .skills-floating-card h4{
        font-size:18px;
    }
    .skills-floating-card p{
        font-size:12px;
    }
    .skill-card{
        padding:20px 18px;
        border-radius:22px;
    }
    .skill-top{
        flex-direction:row;
        align-items:center;
        gap:14px;
        margin-bottom:14px;
    }
    .skill-icon{
        width:50px;
        height:50px;
        min-width:50px;
        font-size:20px;
        border-radius:16px;
    }
    .skill-info h3{
        font-size:18px;
    }
    .skill-info span{
        font-size:12px;
    }
    .skill-percent{
        font-size:20px;
    }
    .skill-bar{
        height:5px;
        margin-bottom:12px;
    }
    .skill-card p{
        font-size:13.5px;
        line-height:1.7;
    }

    /* CERTIFICATION */
    .certification-image,
    .certification-image img{
        height:320px;
    }
    .certification-badge{
        left:14px;
        bottom:14px;
        padding:14px;
        gap:12px;
        border-radius:20px;
    }
    .certification-badge-icon{
        width:54px;
        height:54px;
        min-width:54px;
        font-size:22px;
        border-radius:18px;
    }
    .certification-badge h4{
        font-size:18px;
    }
    .certification-badge p{
        font-size:12px;
    }
    .certification-card{
        flex-direction:row;
        align-items:flex-start;
        gap:14px;
        padding:20px 18px;
        border-radius:22px;
    }
    .certification-icon{
        width:52px;
        height:52px;
        min-width:52px;
        font-size:20px;
        border-radius:16px;
    }
    .certification-content h3{
        font-size:18px;
        margin-bottom:8px;
    }
    .certification-content p{
        font-size:13.5px;
        line-height:1.7;
    }
    .certification-stats{
        grid-template-columns:repeat(3,1fr);
        gap:10px;
    }
    .cert-stat-item{
        padding:18px 12px;
        border-radius:18px;
    }
    .cert-stat-item h4{
        font-size:26px;
        margin-bottom:6px;
    }
    .cert-stat-item p{
        font-size:12px;
    }

    /* AVAILABILITY */
    .availability-image img{
        height:320px;
    }
    .availability-floating-card{
        position:relative;
        left:auto;
        bottom:auto;
        margin:14px;
        padding:14px;
        gap:12px;
        border-radius:20px;
    }
    .availability-floating-icon{
        width:54px;
        height:54px;
        min-width:54px;
        font-size:22px;
        border-radius:18px;
    }
    .availability-floating-card h4{
        font-size:18px;
    }
    .availability-floating-card p{
        font-size:12px;
    }
    .availability-card{
        padding:20px 18px;
        border-radius:22px;
    }
    .availability-top{
        flex-direction:row;
        align-items:center;
        gap:14px;
        margin-bottom:18px;
    }
    .availability-icon{
        width:52px;
        height:52px;
        min-width:52px;
        font-size:20px;
        border-radius:16px;
    }
    .availability-top h3{
        font-size:18px;
    }
    .availability-top span{
        font-size:12px;
    }
    .time-item{
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        padding:14px 16px;
        border-radius:18px;
        gap:10px;
        flex-wrap:wrap;
    }
    .time-item span{
        font-size:13px;
    }
    .time-item strong{
        font-size:14px;
    }
    .availability-card p{
        font-size:13.5px;
        line-height:1.7;
    }
    .availability-weekend{
        padding:20px 18px;
        border-radius:22px;
    }
    .weekend-content{
        flex-direction:row;
        align-items:center;
        gap:14px;
        margin-bottom:16px;
    }
    .weekend-icon{
        width:52px;
        height:52px;
        min-width:52px;
        font-size:20px;
        border-radius:16px;
    }
    .weekend-content h3{
        font-size:18px;
        margin-bottom:6px;
    }
    .weekend-content p{
        font-size:13.5px;
        line-height:1.7;
    }
    .availability-btn{
        width:100%;
        padding:13px 20px;
        font-size:14px;
    }

    /* FEEDBACK */
    .feedback-stats{
        grid-template-columns:1fr;
        gap:14px;
        margin-bottom:36px;
    }
    .feedback-stat-card{
        padding:20px 18px;
    }
    .feedback-stat-card h3{
        font-size:32px;
    }
    .feedback-card{
        padding:22px 20px;
        border-radius:24px;
    }
    .feedback-top{
        flex-direction:row;
        align-items:flex-start;
        justify-content:space-between;
        gap:14px;
        margin-bottom:20px;
    }
    .feedback-user{
        gap:12px;
    }
    .feedback-user img{
        width:54px;
        height:54px;
        border-width:3px;
    }
    .feedback-user h4{
        font-size:17px;
    }
    .feedback-user span{
        font-size:12px;
    }
    .feedback-quote{
        width:48px;
        height:48px;
        min-width:48px;
        font-size:18px;
        border-radius:16px;
    }
    .feedback-stars{
        gap:6px;
        margin-bottom:18px;
    }
    .feedback-stars i{
        font-size:14px;
    }
    .feedback-card p{
        font-size:13.5px;
        line-height:1.7;
    }
}

/* ---------- 550px : phones ---------- */
@media (max-width:550px){

    /* HERO */
    .instructor-hero-section{
        padding:60px 12px;
    }
    .instructor-hero-content h1{
        font-size:28px;
    }
    .instructor-hero-content p{
        font-size:14px;
    }
    .instructor-stat-item h3{
        font-size:28px;
    }
    .instructor-main-image,
    .instructor-main-image img{
        height:300px;
    }

    /* SECTION HEADERS */
    .profiles-header h2,
    .skills-header h2,
    .certification-header h2,
    .availability-header h2,
    .feedback-header h2{
        font-size:26px;
    }

    /* PROFILES */
    .profile-image img{
        height:260px;
    }
    .profile-content{
        padding:20px 18px;
    }
    .profile-content h3{
        font-size:20px;
    }
    .profile-footer{
        flex-direction:column;
        align-items:stretch;
        gap:14px;
    }
    .profile-btn{
        width:100%;
    }

    /* SKILLS */
    .skills-image,
    .skills-image img{
        height:260px;
    }
    .skill-top{
        gap:12px;
    }
    .skill-icon{
        width:46px;
        height:46px;
        min-width:46px;
        font-size:18px;
        border-radius:14px;
    }
    .skill-info h3{
        font-size:17px;
    }
    .skill-info span{
        font-size:11.5px;
    }
    .skill-percent{
        font-size:18px;
    }
    .skill-card p{
        font-size:13px;
    }

    /* CERTIFICATION */
    .certification-image,
    .certification-image img{
        height:260px;
    }
    .certification-card{
        gap:12px;
        padding:18px 16px;
    }
    .certification-icon{
        width:46px;
        height:46px;
        min-width:46px;
        font-size:18px;
        border-radius:14px;
    }
    .certification-content h3{
        font-size:17px;
    }
    .certification-content p{
        font-size:13px;
    }
    .certification-stats{
        grid-template-columns:repeat(3,1fr);
        gap:8px;
    }
    .cert-stat-item{
        padding:14px 8px;
    }
    .cert-stat-item h4{
        font-size:22px;
    }
    .cert-stat-item p{
        font-size:11px;
    }

    /* AVAILABILITY */
    .availability-image img{
        height:260px;
    }
    .availability-icon,
    .weekend-icon{
        width:46px;
        height:46px;
        min-width:46px;
        font-size:18px;
        border-radius:14px;
    }
    .availability-top h3,
    .weekend-content h3{
        font-size:17px;
    }
    .time-item{
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }
    .availability-card p,
    .weekend-content p{
        font-size:13px;
    }

    /* FEEDBACK */
    .feedback-top{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
    }
    .feedback-quote{
        width:42px;
        height:42px;
        min-width:42px;
        font-size:16px;
        border-radius:14px;
    }
}

/* ---------- 441px : small phones ---------- */
@media (max-width:441px){

    .instructor-hero-section{
        padding:50px 12px;
    }
    .instructor-hero-subtitle{
        font-size:11px;
        padding:8px 14px;
    }
    .instructor-hero-content h1{
        font-size:25px;
    }
    .instructor-hero-content p{
        font-size:13.5px;
    }
    .instructor-primary-btn,
    .instructor-outline-btn{
        padding:14px 20px;
        font-size:14px;
    }
    .instructor-stat-item{
        padding:18px 16px;
    }
    .instructor-stat-item h3{
        font-size:24px;
    }
    .instructor-stat-item p{
        font-size:13px;
    }
    .instructor-main-image,
    .instructor-main-image img{
        height:240px;
    }
    .instructor-floating-card{
        padding:14px;
    }
    .floating-icon{
        width:46px;
        height:46px;
        min-width:46px;
        font-size:18px;
    }

    /* SECTIONS */
    .instructor-profiles-section,
    .instructor-skills-section,
    .instructor-certification-section,
    .instructor-availability-section,
    .student-feedback-section{
        padding:50px 12px;
    }
    .profiles-header h2,
    .skills-header h2,
    .certification-header h2,
    .availability-header h2,
    .feedback-header h2{
        font-size:22px;
    }
    .profiles-header p,
    .skills-header p,
    .certification-header p,
    .availability-header p,
    .feedback-header p{
        font-size:13.5px;
    }

    /* PROFILES */
    .profile-image img{
        height:230px;
    }
    .profile-content h3{
        font-size:18px;
    }
    .profile-skills span{
        font-size:11.5px;
        padding:6px 12px;
    }

    /* SKILLS */
    .skills-image,
    .skills-image img{
        height:220px;
    }
    .skill-card{
        padding:18px 14px;
    }
    .skill-top{
        gap:10px;
    }
    .skill-icon{
        width:42px;
        height:42px;
        min-width:42px;
        font-size:16px;
        border-radius:12px;
    }
    .skill-info h3{
        font-size:16px;
        line-height:1.2;
    }
    .skill-info span{
        font-size:11px;
    }
    .skill-percent{
        font-size:17px;
    }
    .skill-bar{
        height:5px;
        margin-bottom:10px;
    }
    .skill-card p{
        font-size:12.5px;
        line-height:1.65;
    }

    /* CERTIFICATION */
    .certification-image,
    .certification-image img{
        height:220px;
    }
    .certification-card{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
        padding:16px 14px;
    }
    .certification-icon{
        width:42px;
        height:42px;
        min-width:42px;
        font-size:16px;
        border-radius:12px;
    }
    .certification-content h3{
        font-size:16px;
    }
    .certification-content p{
        font-size:12.5px;
    }
    .certification-stats{
        grid-template-columns:1fr;
        gap:10px;
    }
    .cert-stat-item h4{
        font-size:24px;
    }
    .cert-stat-item p{
        font-size:12px;
    }

    /* AVAILABILITY */
    .availability-image img{
        height:220px;
    }
    .availability-card{
        padding:16px 14px;
    }
    .availability-top{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }
    .availability-icon,
    .weekend-icon{
        width:42px;
        height:42px;
        min-width:42px;
        font-size:16px;
        border-radius:12px;
    }
    .availability-top h3,
    .weekend-content h3{
        font-size:16px;
    }
    .time-item{
        padding:12px 14px;
    }
    .time-item span{
        font-size:12.5px;
    }
    .time-item strong{
        font-size:13.5px;
    }
    .availability-card p,
    .weekend-content p{
        font-size:12.5px;
    }
    .availability-weekend{
        padding:16px 14px;
    }
    .weekend-content{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }
    .availability-btn{
        padding:12px 16px;
        font-size:13px;
    }

    /* FEEDBACK */
    .feedback-stat-card{
        padding:18px 16px;
    }
    .feedback-stat-card h3{
        font-size:26px;
    }
    .feedback-stat-card p{
        font-size:13px;
    }
    .feedback-card{
        padding:18px 16px;
    }
    .feedback-user img{
        width:48px;
        height:48px;
    }
    .feedback-user h4{
        font-size:15px;
    }
    .feedback-user span{
        font-size:11.5px;
    }
    .feedback-quote{
        width:40px;
        height:40px;
        min-width:40px;
        font-size:14px;
    }
    .feedback-card p{
        font-size:13px;
    }
}

/* ---------- 390px : iPhone 12 mini / very small ---------- */
@media (max-width:390px){

    .instructor-hero-content h1{
        font-size:23px;
    }
    .instructor-stat-item h3{
        font-size:22px;
    }
    .instructor-main-image,
    .instructor-main-image img{
        height:220px;
    }

    .profiles-header h2,
    .skills-header h2,
    .certification-header h2,
    .availability-header h2,
    .feedback-header h2{
        font-size:20px;
    }

    .profile-image img{
        height:210px;
    }
    .profile-content h3{
        font-size:17px;
    }

    .skills-image,
    .skills-image img,
    .certification-image,
    .certification-image img,
    .availability-image img{
        height:200px;
    }

    .skill-info h3,
    .certification-content h3,
    .availability-top h3,
    .weekend-content h3{
        font-size:15px;
    }

    .feedback-stat-card h3{
        font-size:24px;
    }
    .feedback-card p{
        font-size:12.5px;
    }
}

/* ---------- 320px : smallest phones (iPhone 5 / SE) ---------- */
@media (max-width:320px){

    .instructor-hero-section{
        padding:40px 10px;
    }
    .instructor-hero-content h1{
        font-size:21px;
    }
    .instructor-hero-content p{
        font-size:13px;
    }
    .instructor-primary-btn,
    .instructor-outline-btn{
        padding:12px 16px;
        font-size:13px;
    }
    .instructor-stat-item{
        padding:14px 12px;
    }
    .instructor-stat-item h3{
        font-size:20px;
    }
    .instructor-stat-item p{
        font-size:12px;
    }
    .instructor-main-image,
    .instructor-main-image img{
        height:190px;
    }
    .floating-icon{
        width:40px;
        height:40px;
        min-width:40px;
        font-size:15px;
    }
    .instructor-floating-card h4{
        font-size:15px;
    }
    .instructor-floating-card p{
        font-size:11.5px;
    }

    /* SECTIONS */
    .instructor-profiles-section,
    .instructor-skills-section,
    .instructor-certification-section,
    .instructor-availability-section,
    .student-feedback-section{
        padding:40px 10px;
    }
    .profiles-header h2,
    .skills-header h2,
    .certification-header h2,
    .availability-header h2,
    .feedback-header h2{
        font-size:18px;
    }
    .profiles-header p,
    .skills-header p,
    .certification-header p,
    .availability-header p,
    .feedback-header p{
        font-size:12.5px;
    }

    /* PROFILES */
    .profile-image img{
        height:190px;
    }
    .profile-content{
        padding:16px 14px;
    }
    .profile-content h3{
        font-size:16px;
    }
    .profile-content p{
        font-size:13px;
    }

    /* SKILLS */
    .skills-image,
    .skills-image img{
        height:180px;
    }
    .skill-card{
        padding:16px 12px;
        border-radius:18px;
    }
    .skill-icon{
        width:38px;
        height:38px;
        min-width:38px;
        font-size:14px;
        border-radius:10px;
    }
    .skill-info h3{
        font-size:14px;
    }
    .skill-info span{
        font-size:10.5px;
    }
    .skill-percent{
        font-size:15px;
    }
    .skill-card p{
        font-size:12px;
    }

    /* CERTIFICATION */
    .certification-image,
    .certification-image img{
        height:180px;
    }
    .certification-card{
        padding:14px 12px;
    }
    .certification-icon{
        width:38px;
        height:38px;
        min-width:38px;
        font-size:14px;
        border-radius:10px;
    }
    .certification-content h3{
        font-size:14px;
    }
    .certification-content p{
        font-size:12px;
    }
    .cert-stat-item h4{
        font-size:22px;
    }

    /* AVAILABILITY */
    .availability-image img{
        height:180px;
    }
    .availability-card{
        padding:14px 12px;
    }
    .availability-icon,
    .weekend-icon{
        width:38px;
        height:38px;
        min-width:38px;
        font-size:14px;
        border-radius:10px;
    }
    .availability-top h3,
    .weekend-content h3{
        font-size:14px;
    }
    .availability-card p,
    .weekend-content p{
        font-size:12px;
    }

    /* FEEDBACK */
    .feedback-stat-card{
        padding:16px 14px;
    }
    .feedback-stat-card h3{
        font-size:22px;
    }
    .feedback-card{
        padding:16px 14px;
    }
    .feedback-user{
        gap:10px;
    }
    .feedback-user img{
        width:42px;
        height:42px;
        border-width:2px;
    }
    .feedback-quote{
        width:36px;
        height:36px;
        min-width:36px;
        font-size:13px;
    }
}


/* ===================================================================
   PREMIUM TOPBAR / NAVBAR / MOBILE MENU — RESPONSIVE OVERRIDES
   Applies site-wide. Preserves desktop look, polishes alignment,
   and rebuilds the mobile menu as a slide-in panel with backdrop.
   Breakpoints: 1440 / 1200 / 1100 / 992 / 768 / 550 / 441 / 390 / 320 px
=================================================================== */

/* Body scroll lock when mobile menu is open */
body.menu-open{
    overflow:hidden;
}

/* ---------- TOPBAR — base polish ---------- */
.top-bar{
    position:relative;
    z-index:1001;
}
.top-flex{
    flex-wrap:wrap;
    gap:6px 14px;
}
.top-left span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
}
.top-left .divider{
    opacity:0.55;
}

/* ---------- NAVBAR — base polish ---------- */
.navbar{
    position:relative;
    z-index:1003;
}
.nav-container{
    gap:18px;
}
.logo-box img{
    transition:width 0.3s ease;
}

/* ---------- HAMBURGER BUTTON — premium ---------- */
.menu-toggle{
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:12px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.10);
    transition:0.3s ease;
    color:#fff;
    font-size:18px;
    z-index:1010;
}
.menu-toggle:hover{
    background:rgba(59,231,155,0.14);
    border-color:rgba(59,231,155,0.22);
    color:var(--mint);
}
.menu-toggle.active{
    background:rgba(59,231,155,0.18);
    border-color:rgba(59,231,155,0.30);
    color:var(--mint);
}
.menu-toggle i{
    line-height:1;
    transition:transform 0.3s ease;
}
.menu-toggle.active i{
    transform:rotate(90deg);
}

/* ---------- BACKDROP (mobile menu) ---------- */
.nav-backdrop{
    position:fixed;
    inset:0;
    background:rgba(3,46,73,0.55);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    opacity:0;
    visibility:hidden;
    transition:opacity 0.4s ease, visibility 0.4s ease;
    z-index:1004;
    cursor:pointer;
}
.nav-backdrop.active{
    opacity:1;
    visibility:visible;
}

/* ---------- 1440px : large desktop polish ---------- */
@media (max-width:1440px){
    .logo-box img{
        width:170px;
    }
    .nav-menu a{
        margin:0 8px;
        font-size:13.5px;
    }
}

/* ---------- 1200px : laptop ---------- */
@media (max-width:1200px){
    .nav-container{
        padding:14px 0;
    }
    .logo-box img{
        width:150px;
    }
    .nav-menu a{
        margin:0 7px;
        font-size:13px;
    }
    .top-bar{
        font-size:13.5px;
    }
}

/* ---------- 1100px : SWITCH TO MOBILE MENU ----------
   10 menu items don't fit comfortably below this width, so the
   mobile slide-in panel takes over here instead of at 1000px.
*/
@media (max-width:1100px){

    .menu-toggle{
        display:flex !important;
    }

    /* Side-panel mobile menu */
    .nav-menu{
        position:fixed !important;
        top:0 !important;
        right:0 !important;
        bottom:0;
        width:min(360px, 88vw);
        height:100vh;
        height:100dvh;
        max-height:100vh;

        background:linear-gradient(180deg, #032E49 0%, #052A40 100%);

        display:flex;
        flex-direction:column;
        flex-wrap:nowrap;
        align-items:stretch;
        justify-content:flex-start;
        gap:6px;

        padding:90px 22px 28px 22px;

        transform:translateX(100%);
        transition:transform 0.45s cubic-bezier(0.65,0,0.35,1);

        z-index:1005;

        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;

        box-shadow:-30px 0 80px rgba(0,0,0,0.45);
        border-left:1px solid rgba(255,255,255,0.08);
    }

    .nav-menu.active{
        transform:translateX(0);
    }

    /* Menu links — large touch targets, premium look */
    .nav-menu a{
        width:100%;
        margin:0;
        padding:14px 18px;
        font-size:15.5px;
        font-weight:500;
        color:#fff;
        background:rgba(255,255,255,0.03);
        border:1px solid rgba(255,255,255,0.06);
        border-radius:14px;
        transition:0.3s ease;
        line-height:1.3;

        opacity:0;
        transform:translateX(20px);
        transition:transform 0.4s ease, opacity 0.4s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }

    .nav-menu.active a{
        opacity:1;
        transform:translateX(0);
    }

    /* Stagger entry animation */
    .nav-menu.active a:nth-child(1){ transition-delay:0.05s; }
    .nav-menu.active a:nth-child(2){ transition-delay:0.10s; }
    .nav-menu.active a:nth-child(3){ transition-delay:0.15s; }
    .nav-menu.active a:nth-child(4){ transition-delay:0.20s; }
    .nav-menu.active a:nth-child(5){ transition-delay:0.25s; }
    .nav-menu.active a:nth-child(6){ transition-delay:0.30s; }
    .nav-menu.active a:nth-child(7){ transition-delay:0.35s; }
    .nav-menu.active a:nth-child(8){ transition-delay:0.40s; }
    .nav-menu.active a:nth-child(9){ transition-delay:0.45s; }
    .nav-menu.active a:nth-child(10){ transition-delay:0.50s; }

    .nav-menu a:hover,
    .nav-menu a:focus,
    .nav-menu a.active{
        background:rgba(59,231,155,0.14);
        border-color:rgba(59,231,155,0.22);
        color:var(--mint);
    }

    /* Disable underline animation in mobile mode */
    .nav-menu a::after{
        display:none !important;
    }
}

/* ---------- 992px : tablet ---------- */
@media (max-width:992px){
    .top-bar{
        font-size:13px;
    }
    .top-flex{
        padding:7px 0;
        gap:6px 14px;
    }
    .top-right a{
        margin-left:10px;
    }
}

/* ---------- 768px : large phone / small tablet ---------- */
@media (max-width:768px){

    .top-bar{
        font-size:12.5px;
    }
    .top-flex{
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:center;
        gap:6px 14px;
        padding:8px 0;
        text-align:center;
    }
    .top-left{
        flex-wrap:wrap;
        gap:6px 12px;
        justify-content:center;
    }
    .top-left .divider{
        display:none;
    }
    .top-right{
        gap:14px;
        justify-content:center;
    }
    .top-right a{
        margin-left:0;
        font-size:14px;
    }

    .nav-container{
        padding:12px 0;
    }
    .logo-box img{
        width:140px;
    }
}

/* ---------- 550px : phones ---------- */
@media (max-width:550px){

    .top-bar{
        font-size:12px;
    }
    .top-flex{
        padding:7px 0;
        gap:5px 12px;
    }
    .top-right a{
        font-size:13.5px;
    }

    .nav-menu{
        width:100% !important;
        padding:84px 18px 24px 18px;
    }
    .nav-menu a{
        padding:13px 16px;
        font-size:15px;
    }
}

/* ---------- 441px : small phones ---------- */
@media (max-width:441px){

    .top-bar{
        font-size:11px;
    }
    .top-flex{
        padding:7px 0;
        gap:4px 8px;
        justify-content:center;
        flex-wrap:wrap;
    }
    .top-left{
        gap:4px 8px;
        justify-content:center;
        flex-wrap:wrap;
    }
    .top-left span{
        font-size:11px;
        gap:5px;
        white-space:nowrap;
    }
    .top-left span i{
        font-size:11px;
    }
    .top-right{
        gap:10px;
        justify-content:center;
    }
    .top-right a{
        font-size:12.5px;
    }

    .nav-container{
        padding:11px 0;
        gap:12px;
    }
    .logo-box img{
        width:130px;
    }
    .menu-toggle{
        width:38px;
        height:38px;
        font-size:16px;
        border-radius:10px;
    }
}

/* ---------- 390px : iPhone 12 mini ---------- */
@media (max-width:390px){

    .top-bar{
        font-size:10.5px;
    }
    .top-flex{
        padding:6px 0;
        gap:4px 8px;
    }
    .top-left{
        gap:3px 7px;
    }
    .top-left span{
        font-size:10.5px;
        gap:4px;
    }
    .top-left span i{
        font-size:10.5px;
    }
    .top-right{
        gap:9px;
    }
    .top-right a{
        font-size:12px;
    }

    .logo-box img{
        width:120px;
    }
    .nav-menu{
        padding:78px 16px 22px 16px;
    }
    .nav-menu a{
        padding:12px 14px;
        font-size:14.5px;
    }
}

/* ---------- 320px : smallest phones ---------- */
@media (max-width:320px){

    .top-bar{
        font-size:10px;
    }
    .top-flex{
        padding:6px 0;
        gap:3px 6px;
    }
    .top-left{
        gap:3px 6px;
    }
    .top-left span{
        font-size:10px;
        gap:4px;
    }
    .top-left span i{
        font-size:10px;
    }
    .top-right{
        gap:8px;
    }
    .top-right a{
        font-size:11.5px;
    }

    .nav-container{
        padding:10px 0;
        gap:10px;
    }
    .logo-box img{
        width:110px;
    }
    .menu-toggle{
        width:36px;
        height:36px;
        font-size:15px;
        border-radius:9px;
    }
    .nav-menu{
        padding:74px 14px 20px 14px;
    }
    .nav-menu a{
        padding:11px 13px;
        font-size:14px;
        border-radius:12px;
    }
}


/* ===================================================================
   NAVBAR VISIBILITY + STICKY FIXES
   Final override layer for fixed topbar/navbar and mobile menu stacking.
=================================================================== */

:root{
    --top-bar-height:34px;
    --navbar-height:78px;
    --site-header-height:112px;
}

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

body{
    padding-top:var(--site-header-height);
}

body.menu-open{
    overflow:hidden;
    touch-action:none;
}

.top-bar,
.navbar{
    left:0;
    right:0;
    width:100%;
}

.top-bar{
    position:fixed;
    top:0;
    z-index:3000;
    box-shadow:0 8px 24px rgba(0,0,0,0);
    transition:box-shadow 0.3s ease, background 0.3s ease;
}

.navbar{
    position:fixed;
    top:var(--top-bar-height);
    z-index:2999;
    box-shadow:0 14px 36px rgba(0,0,0,0);
    transition:box-shadow 0.3s ease, background 0.3s ease;
}

body.header-scrolled .top-bar{
    box-shadow:0 8px 24px rgba(0,0,0,0.08);
}

body.header-scrolled .navbar{
    box-shadow:0 18px 45px rgba(0,0,0,0.28);
}

.nav-backdrop{
    z-index:2500;
}

@media (max-width:1100px){
    .navbar{
        z-index:3010;
    }

    .menu-toggle{
        position:relative;
        z-index:3030;
        flex:0 0 auto;
    }

    .nav-menu{
        top:0 !important;
        right:0 !important;
        bottom:auto;
        left:auto !important;
        width:min(380px, 88vw) !important;
        min-width:0;
        height:100vh !important;
        height:100dvh !important;
        max-height:100vh !important;
        max-height:100dvh !important;
        padding:calc(var(--site-header-height) + 18px) 22px 26px !important;
        z-index:3020 !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:none;
        overflow-x:hidden;
        overflow-y:auto;
        transform:translate3d(105%, 0, 0) !important;
        will-change:transform;
        filter:none !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
        box-sizing:border-box;
    }

    .nav-menu.active{
        transform:translate3d(0, 0, 0) !important;
        pointer-events:auto;
    }

    .nav-menu a{
        display:flex !important;
        align-items:center;
        justify-content:flex-start;
        min-height:48px;
        width:100%;
        max-width:100%;
        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;
        white-space:normal;
        word-break:normal;
        overflow-wrap:anywhere;
        box-sizing:border-box;
    }

    .nav-menu:not(.active) a{
        pointer-events:none;
    }

    .nav-menu.active a{
        pointer-events:auto;
    }
}

@media (max-width:768px){
    body{
        padding-top:var(--site-header-height);
    }

    .navbar{
        top:var(--top-bar-height);
    }

    .nav-menu{
        padding:calc(var(--site-header-height) + 16px) 20px 24px !important;
    }
}

@media (max-width:589px){
    .nav-menu{
        width:100% !important;
        padding:calc(var(--site-header-height) + 14px) 18px 22px !important;
    }
}

@media (max-width:441px){
    .nav-menu{
        padding:calc(var(--site-header-height) + 12px) 16px 20px !important;
    }
}

@media (max-width:390px){
    .nav-menu{
        padding:calc(var(--site-header-height) + 10px) 14px 18px !important;
    }
}

@media (max-width:320px){
    .nav-menu{
        padding:calc(var(--site-header-height) + 8px) 12px 16px !important;
    }

    .nav-menu a{
        min-height:44px;
    }
}


/* ===================================================================
   MOBILE MENU LOGO HEADER
   Adds the brand logo at the top-left of the slide-in mobile menu,
   visually aligned with the close (X) button in the fixed navbar.
   CSS-only — no HTML changes. Applies only in mobile menu mode.
=================================================================== */

@media (max-width:1100px){

    /* Logo positioned in the empty area at top-left of the panel.
       Sits inside the navbar slot so it lines up with the X icon. */
    .nav-menu::before{
        content:"";
        position:absolute;
        top:var(--top-bar-height);
        left:22px;
        height:var(--navbar-height);
        width:160px;
        max-width:calc(100% - 90px);

        background-image:url('../images/worksprout_logo.svg');
        background-repeat:no-repeat;
        background-position:left center;
        background-size:contain;

        opacity:0;
        transform:translateX(-12px);
        transition:opacity 0.4s ease 0.10s, transform 0.45s cubic-bezier(0.65,0,0.35,1) 0.10s;

        pointer-events:none;
        z-index:2;
    }

    .nav-menu.active::before{
        opacity:1;
        transform:translateX(0);
    }
}

/* ---------- Responsive logo sizing ---------- */
@media (max-width:768px){
    .nav-menu::before{
        left:20px;
        width:150px;
    }
}

@media (max-width:589px){
    .nav-menu::before{
        left:18px;
        width:140px;
    }
}

@media (max-width:550px){
    .nav-menu::before{
        left:18px;
        width:135px;
    }
}

@media (max-width:441px){
    .nav-menu::before{
        left:16px;
        width:125px;
    }
}

@media (max-width:390px){
    .nav-menu::before{
        left:14px;
        width:115px;
    }
}

@media (max-width:320px){
    .nav-menu::before{
        left:12px;
        width:100px;
    }
}


/* ===================================================================
   PRICING PAGE — FULL RESPONSIVE OVERRIDES
   Hero / Packages / Comparison Table / What's Included / Discount.
   Preserves the premium colors, gradients, glow, glass, and animations.
   Breakpoints: 1440 / 1200 / 992 / 768 / 589 / 550 / 441 / 390 / 320 px
=================================================================== */

/* ---------- Safety: prevent overflow + responsive media ---------- */
.pricing-hero-section,
.pricing-packages-section,
.comparison-section,
.whats-included-section,
.discount-section{
    overflow-x:hidden;
}

.pricing-hero-section img,
.pricing-packages-section img,
.comparison-section img,
.whats-included-section img,
.discount-section img{
    max-width:100%;
}

.comparison-table-wrapper{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

/* Subtle desktop polish on package cards: slightly more compact while
   keeping the premium look intact. */
.pricing-package-card{
    padding:36px 30px;
}
.package-price h2{
    font-size:64px;
}
.package-top h3{
    font-size:30px;
}
.featured-package{
    transform:scale(1.03);
}

/* ---------- 1440px : large desktop ---------- */
@media (max-width:1440px){

    .pricing-hero-section,
    .pricing-packages-section,
    .comparison-section,
    .whats-included-section,
    .discount-section{
        padding-left:24px;
        padding-right:24px;
    }

    .pricing-hero-content h1{
        font-size:60px;
    }
    .pricing-hero-content p{
        font-size:17px;
    }
    .pricing-stat-item h3{
        font-size:40px;
    }
    .hero-card-top h3{
        font-size:32px;
    }
    .hero-price-left h2{
        font-size:62px;
    }

    .pricing-packages-header h2,
    .comparison-header h2,
    .included-header h2{
        font-size:50px;
    }
    .pricing-packages-header p,
    .comparison-header p,
    .included-header p{
        font-size:17px;
    }

    .package-top h3{
        font-size:28px;
    }
    .package-price h2{
        font-size:58px;
    }

    .discount-content h2{
        font-size:54px;
    }
    .discount-card-top h3{
        font-size:42px;
    }

    .included-content h3{
        font-size:26px;
    }
    .included-value-item h3{
        font-size:50px;
    }
}

/* ---------- 1200px : laptop ---------- */
@media (max-width:1200px){

    .pricing-hero-section{
        padding:100px 22px;
    }
    .pricing-packages-section,
    .comparison-section,
    .whats-included-section,
    .discount-section{
        padding:100px 22px;
    }

    .pricing-hero-wrapper,
    .included-wrapper,
    .discount-wrapper{
        gap:48px;
    }

    .pricing-hero-content h1{
        font-size:54px;
    }
    .pricing-hero-content p{
        font-size:16.5px;
    }

    .pricing-hero-stats{
        gap:16px;
        margin-top:42px;
    }
    .pricing-stat-item{
        min-width:170px;
        padding:26px 22px;
    }
    .pricing-stat-item h3{
        font-size:36px;
    }
    .pricing-stat-item p{
        font-size:14px;
    }

    .pricing-hero-card{
        padding:30px;
        border-radius:30px;
    }
    .hero-card-top h3{
        font-size:30px;
    }
    .hero-price-left h2{
        font-size:56px;
    }
    .hero-price-right{
        width:80px;
        height:80px;
        border-radius:24px;
        font-size:32px;
    }

    .pricing-packages-grid{
        gap:26px;
    }
    .pricing-package-card{
        padding:32px 26px;
        border-radius:30px;
    }
    .package-top h3{
        font-size:26px;
    }
    .package-price h2{
        font-size:54px;
    }

    .pricing-packages-header h2,
    .comparison-header h2,
    .included-header h2{
        font-size:46px;
    }

    .feature-column,
    .table-plan h3{
        font-size:26px;
    }
    .table-plan p{
        font-size:20px;
    }
    .comparison-table th{
        padding:28px 20px;
    }
    .comparison-table td{
        padding:20px 20px;
        font-size:15px;
    }

    .included-image-box{
        height:480px;
    }
    .included-floating-card h4{
        font-size:22px;
    }
    .included-content h3{
        font-size:24px;
    }
    .included-icon{
        width:70px;
        height:70px;
        min-width:70px;
        font-size:26px;
        border-radius:20px;
    }
    .included-value-item h3{
        font-size:46px;
    }

    .discount-content h2{
        font-size:48px;
    }
    .discount-card{
        padding:30px;
        border-radius:30px;
    }
    .discount-card-top h3{
        font-size:38px;
    }
    .discount-percent{
        width:78px;
        height:78px;
        min-width:78px;
        font-size:24px;
        border-radius:22px;
    }
    .discount-offer-left h4{
        font-size:20px;
    }
}

/* ---------- 992px : tablet ---------- */
@media (max-width:992px){

    .pricing-hero-section{
        min-height:auto;
        padding:90px 20px;
    }
    .pricing-packages-section,
    .comparison-section,
    .whats-included-section,
    .discount-section{
        padding:90px 20px;
    }

    .pricing-hero-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }
    .pricing-hero-card{
        max-width:680px;
        margin:0 auto;
    }
    .pricing-hero-content h1{
        font-size:46px;
    }

    .pricing-hero-stats{
        gap:14px;
    }
    .pricing-stat-item{
        flex:1 1 calc(33.333% - 14px);
        min-width:0;
        padding:22px 18px;
    }
    .pricing-stat-item h3{
        font-size:32px;
    }

    .pricing-packages-header,
    .comparison-header,
    .included-header{
        margin-bottom:60px;
    }
    .pricing-packages-header h2,
    .comparison-header h2,
    .included-header h2{
        font-size:42px;
    }
    .pricing-packages-header p,
    .comparison-header p,
    .included-header p{
        font-size:16px;
    }

    .pricing-packages-grid{
        grid-template-columns:repeat(2,1fr);
        gap:22px;
    }
    .featured-package{
        transform:none;
    }

    .included-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }
    .included-image-box{
        height:440px;
    }
    .included-value-box{
        grid-template-columns:repeat(3,1fr);
        gap:18px;
        margin-top:60px;
    }
    .included-value-item{
        padding:28px 22px;
    }
    .included-value-item h3{
        font-size:42px;
    }

    .discount-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }
    .discount-content h2{
        font-size:42px;
    }
    .discount-card{
        max-width:680px;
    }
    .discount-card-top h3{
        font-size:34px;
    }
    .discount-feature-item{
        max-width:none;
    }
}

/* ---------- 768px : large phone / small tablet ---------- */
@media (max-width:768px){

    .pricing-hero-section,
    .pricing-packages-section,
    .comparison-section,
    .whats-included-section,
    .discount-section{
        padding:80px 18px;
    }

    .pricing-hero-content h1{
        font-size:38px;
        line-height:1.12;
        margin-bottom:22px;
    }
    .pricing-hero-content p{
        font-size:15.5px;
        line-height:1.8;
    }
    .pricing-hero-subtitle,
    .pricing-packages-subtitle,
    .comparison-subtitle,
    .included-subtitle,
    .discount-subtitle{
        font-size:13px;
        padding:10px 18px;
        margin-bottom:20px;
    }

    .pricing-hero-buttons{
        flex-direction:column;
        gap:14px;
        margin-top:30px;
    }
    .pricing-primary-btn,
    .pricing-outline-btn{
        width:100%;
        padding:15px 24px;
        font-size:15px;
        border-radius:14px;
    }

    .pricing-hero-stats{
        margin-top:36px;
        gap:12px;
        flex-direction:row;
    }
    .pricing-stat-item{
        flex:1 1 calc(50% - 6px);
        min-width:0;
        padding:18px 14px;
        border-radius:18px;
    }
    .pricing-stat-item h3{
        font-size:28px;
        margin-bottom:6px;
    }
    .pricing-stat-item p{
        font-size:13px;
    }

    .pricing-hero-card{
        padding:24px;
        border-radius:24px;
    }
    .hero-card-badge{
        font-size:12px;
        padding:7px 14px;
        margin-bottom:14px;
    }
    .hero-card-top h3{
        font-size:24px;
        margin-bottom:12px;
    }
    .hero-card-top p{
        font-size:14.5px;
        line-height:1.7;
    }
    .hero-price-box{
        flex-direction:row;
        align-items:center;
        padding:18px 20px;
        border-radius:20px;
        gap:14px;
        margin-bottom:22px;
    }
    .hero-price-left h2{
        font-size:42px;
    }
    .hero-price-left span{
        font-size:13.5px;
    }
    .hero-price-right{
        width:60px;
        height:60px;
        border-radius:18px;
        font-size:24px;
    }
    .hero-feature-list{
        gap:12px;
    }
    .hero-feature-item{
        padding:13px 14px;
        border-radius:14px;
        gap:12px;
    }
    .hero-feature-item span{
        font-size:14px;
    }
    .hero-card-btn{
        margin-top:22px;
        padding:15px 18px;
        font-size:15px;
        border-radius:14px;
    }

    .pricing-packages-header,
    .comparison-header,
    .included-header{
        margin-bottom:50px;
    }
    .pricing-packages-header h2,
    .comparison-header h2,
    .included-header h2{
        font-size:34px;
        margin-bottom:18px;
    }

    .pricing-packages-grid{
        grid-template-columns:1fr;
        gap:22px;
    }
    .pricing-package-card{
        padding:28px 22px;
        border-radius:24px;
    }
    .package-tag{
        font-size:12px;
        padding:6px 14px;
        margin-bottom:14px;
    }
    .package-top{
        margin-bottom:24px;
    }
    .package-top h3{
        font-size:23px;
        margin-bottom:12px;
    }
    .package-top p{
        font-size:14.5px;
        line-height:1.75;
    }
    .package-price{
        margin-bottom:24px;
    }
    .package-price h2{
        font-size:46px;
    }
    .package-price span{
        font-size:13.5px;
    }
    .package-features{
        gap:12px;
    }
    .package-feature-item{
        padding:12px 14px;
        border-radius:14px;
        gap:12px;
    }
    .package-feature-item span{
        font-size:14px;
    }
    .package-btn{
        margin-top:22px;
        padding:15px 18px;
        font-size:15px;
        border-radius:14px;
    }
    .featured-package-badge{
        right:20px;
        top:-14px;
        padding:8px 14px;
        font-size:12px;
    }

    .comparison-table{
        min-width:760px;
    }
    .comparison-table th{
        padding:20px 16px;
    }
    .comparison-table td{
        padding:16px 14px;
        font-size:14px;
    }
    .feature-column{
        font-size:18px;
    }
    .table-plan h3{
        font-size:22px;
        margin-bottom:6px;
    }
    .table-plan p{
        font-size:18px;
    }
    .table-plan-tag{
        font-size:11.5px;
        padding:6px 12px;
        margin-bottom:12px;
    }
    .table-btn-row td{
        padding:24px 14px;
    }
    .table-btn{
        padding:13px 18px;
        font-size:13.5px;
        border-radius:14px;
    }

    .included-image-box{
        height:380px;
        border-radius:26px;
    }
    .included-floating-card{
        left:16px;
        bottom:16px;
        right:16px;
        padding:14px 16px;
        gap:12px;
        border-radius:18px;
    }
    .included-floating-icon{
        width:54px;
        height:54px;
        min-width:54px;
        border-radius:16px;
        font-size:22px;
    }
    .included-floating-card h4{
        font-size:18px;
        margin-bottom:4px;
    }
    .included-floating-card p{
        font-size:13px;
    }
    .included-card{
        flex-direction:row;
        gap:16px;
        padding:22px 18px;
        border-radius:22px;
    }
    .included-icon{
        width:56px;
        height:56px;
        min-width:56px;
        border-radius:16px;
        font-size:22px;
    }
    .included-content h3{
        font-size:20px;
        margin-bottom:8px;
    }
    .included-content p{
        font-size:14px;
        line-height:1.7;
    }
    .included-value-box{
        grid-template-columns:1fr;
        gap:14px;
        margin-top:50px;
    }
    .included-value-item{
        padding:24px 20px;
        border-radius:22px;
    }
    .included-value-item h3{
        font-size:38px;
        margin-bottom:8px;
    }
    .included-value-item p{
        font-size:14px;
    }

    .discount-content h2{
        font-size:34px;
        margin-bottom:18px;
    }
    .discount-content p{
        font-size:15.5px;
    }
    .discount-features{
        margin-top:26px;
        gap:12px;
    }
    .discount-feature-item{
        padding:13px 16px;
        border-radius:14px;
    }
    .discount-feature-item span{
        font-size:14px;
    }
    .discount-buttons{
        flex-direction:column;
        gap:12px;
        margin-top:30px;
    }
    .discount-primary-btn,
    .discount-outline-btn{
        width:100%;
        padding:15px 24px;
        font-size:15px;
        border-radius:14px;
    }
    .discount-card{
        padding:24px;
        border-radius:24px;
    }
    .discount-card-top{
        margin-bottom:24px;
    }
    .offer-badge{
        font-size:12px;
        padding:7px 14px;
        margin-bottom:14px;
    }
    .discount-card-top h3{
        font-size:30px;
        margin-bottom:12px;
    }
    .discount-card-top p{
        font-size:14.5px;
        line-height:1.7;
    }
    .discount-offers{
        gap:12px;
    }
    .discount-offer-item{
        flex-direction:row;
        align-items:center;
        padding:14px 16px;
        border-radius:18px;
        gap:14px;
    }
    .discount-offer-left h4{
        font-size:17px;
        margin-bottom:4px;
    }
    .discount-offer-left p{
        font-size:13px;
        line-height:1.6;
    }
    .discount-percent{
        width:60px;
        height:60px;
        min-width:60px;
        border-radius:18px;
        font-size:18px;
    }
    .discount-card-btn{
        margin-top:22px;
        padding:15px 18px;
        font-size:15px;
        border-radius:14px;
    }
}

/* ---------- 589px : intermediate phone ---------- */
@media (max-width:589px){

    .pricing-hero-section,
    .pricing-packages-section,
    .comparison-section,
    .whats-included-section,
    .discount-section{
        padding:70px 16px;
    }

    .pricing-hero-content h1{
        font-size:34px;
    }
    .pricing-stat-item{
        flex:1 1 100%;
    }
    .pricing-stat-item h3{
        font-size:30px;
    }

    .pricing-packages-header h2,
    .comparison-header h2,
    .included-header h2{
        font-size:30px;
    }

    .package-price h2{
        font-size:42px;
    }
    .featured-package-badge{
        right:16px;
        font-size:11.5px;
        padding:7px 12px;
    }

    .comparison-table{
        min-width:660px;
    }

    .included-image-box{
        height:340px;
    }
    .included-card{
        padding:20px 16px;
    }
    .included-content h3{
        font-size:18px;
    }
}

/* ---------- 550px : phones ---------- */
@media (max-width:550px){

    .pricing-hero-content h1{
        font-size:32px;
    }
    .pricing-hero-content p{
        font-size:15px;
    }

    .pricing-hero-card{
        padding:22px 18px;
        border-radius:22px;
    }
    .hero-card-top h3{
        font-size:22px;
    }
    .hero-price-box{
        padding:16px;
        gap:12px;
    }
    .hero-price-left h2{
        font-size:38px;
    }
    .hero-price-right{
        width:54px;
        height:54px;
        border-radius:16px;
        font-size:22px;
    }

    .pricing-package-card{
        padding:24px 20px;
        border-radius:22px;
    }
    .package-top h3{
        font-size:21px;
    }
    .package-price h2{
        font-size:40px;
    }

    .table-plan h3{
        font-size:20px;
    }
    .table-plan p{
        font-size:16px;
    }
    .feature-column{
        font-size:16px;
    }
    .comparison-table th,
    .comparison-table td{
        padding:14px 12px;
    }
    .comparison-table td{
        font-size:13.5px;
    }
    .table-btn{
        padding:11px 14px;
        font-size:12.5px;
    }

    .included-floating-card{
        flex-direction:row;
        align-items:center;
    }
    .included-value-item h3{
        font-size:34px;
    }

    .discount-content h2{
        font-size:30px;
    }
    .discount-card-top h3{
        font-size:26px;
    }
    .discount-percent{
        width:54px;
        height:54px;
        min-width:54px;
        border-radius:16px;
        font-size:16px;
    }
}

/* ---------- 441px : small phones ---------- */
@media (max-width:441px){

    .pricing-hero-section,
    .pricing-packages-section,
    .comparison-section,
    .whats-included-section,
    .discount-section{
        padding:64px 14px;
    }

    .pricing-hero-content h1{
        font-size:28px;
        margin-bottom:18px;
    }
    .pricing-hero-content p{
        font-size:14.5px;
        line-height:1.75;
    }
    .pricing-hero-subtitle,
    .pricing-packages-subtitle,
    .comparison-subtitle,
    .included-subtitle,
    .discount-subtitle{
        font-size:12px;
        padding:8px 14px;
    }

    .pricing-stat-item{
        padding:16px 14px;
    }
    .pricing-stat-item h3{
        font-size:26px;
    }
    .pricing-stat-item p{
        font-size:12.5px;
    }

    .pricing-hero-card{
        padding:20px 16px;
        border-radius:20px;
    }
    .hero-card-top h3{
        font-size:20px;
    }
    .hero-card-top p{
        font-size:13.5px;
    }
    .hero-price-left h2{
        font-size:34px;
    }
    .hero-price-left span{
        font-size:12.5px;
    }
    .hero-price-right{
        width:50px;
        height:50px;
        border-radius:14px;
        font-size:20px;
    }
    .hero-feature-item{
        padding:11px 12px;
        gap:10px;
        border-radius:12px;
    }
    .hero-feature-item span{
        font-size:13px;
    }
    .hero-feature-item i{
        font-size:14px;
    }

    .pricing-packages-header,
    .comparison-header,
    .included-header{
        margin-bottom:40px;
    }
    .pricing-packages-header h2,
    .comparison-header h2,
    .included-header h2{
        font-size:26px;
        margin-bottom:14px;
    }
    .pricing-packages-header p,
    .comparison-header p,
    .included-header p{
        font-size:14.5px;
        line-height:1.75;
    }

    .pricing-package-card{
        padding:22px 16px;
        border-radius:20px;
    }
    .package-top{
        margin-bottom:18px;
    }
    .package-top h3{
        font-size:19px;
    }
    .package-top p{
        font-size:13.5px;
        line-height:1.65;
    }
    .package-price{
        margin-bottom:18px;
    }
    .package-price h2{
        font-size:36px;
    }
    .package-price span{
        font-size:12.5px;
    }
    .package-features{
        gap:10px;
    }
    .package-feature-item{
        padding:10px 12px;
        border-radius:12px;
        gap:10px;
    }
    .package-feature-item i{
        font-size:14px;
    }
    .package-feature-item span{
        font-size:13px;
    }
    .package-btn{
        margin-top:18px;
        padding:13px 16px;
        font-size:14px;
        border-radius:12px;
    }
    .featured-package-badge{
        right:14px;
        top:-12px;
        padding:6px 12px;
        font-size:11px;
    }

    .comparison-table{
        min-width:560px;
    }
    .comparison-table th{
        padding:16px 12px;
    }
    .comparison-table td{
        padding:12px 10px;
        font-size:13px;
    }
    .table-plan h3{
        font-size:18px;
    }
    .table-plan p{
        font-size:15px;
    }
    .table-plan-tag{
        font-size:11px;
        padding:5px 10px;
        margin-bottom:10px;
    }
    .feature-column{
        font-size:15px;
    }
    .green-icon,
    .red-icon{
        font-size:15px;
    }
    .table-btn{
        padding:10px 12px;
        font-size:12px;
    }

    .included-image-box{
        height:300px;
        border-radius:22px;
    }
    .included-floating-card{
        left:12px;
        right:12px;
        bottom:12px;
        padding:12px 14px;
        border-radius:16px;
    }
    .included-floating-icon{
        width:46px;
        height:46px;
        min-width:46px;
        border-radius:14px;
        font-size:18px;
    }
    .included-floating-card h4{
        font-size:16px;
    }
    .included-floating-card p{
        font-size:12.5px;
    }
    .included-card{
        flex-direction:row;
        gap:14px;
        padding:18px 14px;
        border-radius:18px;
    }
    .included-icon{
        width:48px;
        height:48px;
        min-width:48px;
        border-radius:14px;
        font-size:18px;
    }
    .included-content h3{
        font-size:17px;
        margin-bottom:6px;
    }
    .included-content p{
        font-size:13px;
        line-height:1.65;
    }
    .included-value-item{
        padding:20px 16px;
    }
    .included-value-item h3{
        font-size:30px;
        margin-bottom:6px;
    }
    .included-value-item p{
        font-size:13px;
    }

    .discount-content h2{
        font-size:26px;
        margin-bottom:14px;
    }
    .discount-content p{
        font-size:14.5px;
    }
    .discount-feature-item{
        padding:11px 14px;
        border-radius:12px;
    }
    .discount-feature-item span{
        font-size:13px;
    }
    .discount-feature-item i{
        font-size:15px;
    }
    .discount-card{
        padding:20px 16px;
        border-radius:20px;
    }
    .offer-badge{
        font-size:11px;
        padding:6px 12px;
    }
    .discount-card-top h3{
        font-size:24px;
    }
    .discount-card-top p{
        font-size:13.5px;
    }
    .discount-offer-item{
        padding:12px 14px;
        gap:12px;
        border-radius:14px;
    }
    .discount-offer-left h4{
        font-size:15.5px;
    }
    .discount-offer-left p{
        font-size:12.5px;
    }
    .discount-percent{
        width:50px;
        height:50px;
        min-width:50px;
        border-radius:14px;
        font-size:14.5px;
    }
}

/* ---------- 390px : iPhone 12 mini ---------- */
@media (max-width:390px){

    .pricing-hero-content h1{
        font-size:26px;
    }

    .pricing-hero-card{
        padding:18px 14px;
    }
    .hero-price-left h2{
        font-size:30px;
    }

    .pricing-packages-header h2,
    .comparison-header h2,
    .included-header h2{
        font-size:24px;
    }

    .package-price h2{
        font-size:32px;
    }

    .comparison-table{
        min-width:520px;
    }

    .discount-content h2{
        font-size:24px;
    }
    .discount-card-top h3{
        font-size:22px;
    }
}

/* ---------- 320px : smallest phones ---------- */
@media (max-width:320px){

    .pricing-hero-section,
    .pricing-packages-section,
    .comparison-section,
    .whats-included-section,
    .discount-section{
        padding:56px 12px;
    }

    .pricing-hero-content h1{
        font-size:23px;
        margin-bottom:14px;
    }
    .pricing-hero-content p{
        font-size:13.5px;
    }
    .pricing-stat-item{
        padding:14px 12px;
    }
    .pricing-stat-item h3{
        font-size:23px;
    }
    .pricing-stat-item p{
        font-size:12px;
    }

    .pricing-hero-card{
        padding:16px 12px;
        border-radius:18px;
    }
    .hero-card-top h3{
        font-size:18px;
    }
    .hero-price-box{
        padding:14px;
    }
    .hero-price-left h2{
        font-size:28px;
    }
    .hero-price-right{
        width:46px;
        height:46px;
        font-size:18px;
        border-radius:12px;
    }
    .hero-feature-item{
        padding:10px;
    }
    .hero-feature-item span{
        font-size:12.5px;
    }
    .hero-card-btn{
        padding:13px 14px;
        font-size:13.5px;
    }

    .pricing-packages-header h2,
    .comparison-header h2,
    .included-header h2{
        font-size:22px;
    }

    .pricing-package-card{
        padding:20px 14px;
        border-radius:18px;
    }
    .package-top h3{
        font-size:17px;
    }
    .package-top p{
        font-size:13px;
    }
    .package-price h2{
        font-size:30px;
    }
    .package-feature-item{
        padding:9px 11px;
    }
    .package-feature-item span{
        font-size:12.5px;
    }
    .package-btn{
        padding:12px 14px;
        font-size:13px;
    }
    .featured-package-badge{
        right:12px;
        top:-10px;
        padding:5px 10px;
        font-size:10.5px;
    }

    .comparison-table{
        min-width:480px;
    }
    .comparison-table th{
        padding:14px 10px;
    }
    .comparison-table td{
        padding:10px 8px;
        font-size:12px;
    }
    .table-plan h3{
        font-size:16px;
    }
    .table-plan p{
        font-size:14px;
    }
    .feature-column{
        font-size:14px;
    }
    .table-btn{
        padding:9px 10px;
        font-size:11.5px;
    }

    .included-image-box{
        height:260px;
        border-radius:18px;
    }
    .included-floating-card{
        left:10px;
        right:10px;
        bottom:10px;
        padding:10px 12px;
    }
    .included-floating-card h4{
        font-size:15px;
    }
    .included-card{
        gap:12px;
        padding:16px 12px;
        border-radius:16px;
    }
    .included-icon{
        width:44px;
        height:44px;
        min-width:44px;
        border-radius:12px;
        font-size:16px;
    }
    .included-content h3{
        font-size:16px;
    }
    .included-content p{
        font-size:12.5px;
    }
    .included-value-item{
        padding:18px 14px;
        border-radius:18px;
    }
    .included-value-item h3{
        font-size:26px;
    }
    .included-value-item p{
        font-size:12.5px;
    }

    .discount-content h2{
        font-size:22px;
    }
    .discount-content p{
        font-size:13.5px;
    }
    .discount-feature-item{
        padding:10px 12px;
    }
    .discount-feature-item span{
        font-size:12.5px;
    }
    .discount-card{
        padding:18px 14px;
        border-radius:18px;
    }
    .discount-card-top h3{
        font-size:20px;
    }
    .discount-card-top p{
        font-size:13px;
    }
    .discount-offer-item{
        padding:11px 12px;
        gap:10px;
    }
    .discount-offer-left h4{
        font-size:14.5px;
    }
    .discount-offer-left p{
        font-size:12px;
    }
    .discount-percent{
        width:46px;
        height:46px;
        min-width:46px;
        border-radius:12px;
        font-size:13px;
    }
    .discount-card-btn{
        padding:13px 14px;
        font-size:13.5px;
    }
}


/* ===================================================================
   NAVBAR / MOBILE MENU — STABLE BREAKPOINT BEHAVIOR
   Fixes the "menu flashes open then closes" bug when crossing 1100px.
   - Disables all menu/backdrop transitions while the window is resizing
   - Keeps the body scroll lock + backdrop scoped strictly to mobile
   - Menu open/closed state is now controlled ONLY by user interaction
=================================================================== */

/* Backdrop never renders on desktop, even if the .active class persists
   from a previous mobile session. */
.nav-backdrop{
    display:none;
}

@media (max-width:1100px){
    .nav-backdrop{
        display:block;
    }
}

/* Body scroll lock only applies on mobile. On desktop the page must
   remain scrollable even if .menu-open is still on the body. */
body.menu-open{
    overflow:visible;
    touch-action:auto;
}

@media (max-width:1100px){
    body.menu-open{
        overflow:hidden;
        touch-action:none;
    }
}

/* While the user is resizing the window, kill every transition/animation
   on the navbar, mobile menu, menu links, and backdrop. This prevents the
   menu from animating between desktop layout and mobile slide-in layout,
   which is what caused the brief flash at the 1100px breakpoint. */
body.is-resizing .navbar,
body.is-resizing .navbar *,
body.is-resizing .nav-menu,
body.is-resizing .nav-menu *,
body.is-resizing .nav-menu::before,
body.is-resizing .nav-backdrop,
body.is-resizing .menu-toggle,
body.is-resizing .menu-toggle *{
    transition:none !important;
    animation:none !important;
}


/* ===================================================================
   ACTIVE NAV LINK — premium polish
   Class is applied automatically by JS based on the current URL.
   Works on both desktop nav and the mobile slide-in menu.
=================================================================== */

/* ----- Desktop: mint text + persistent underline (already at width:100%) */
.nav-menu a.active{
    color:var(--mint);
    font-weight:600;
}

.nav-menu a.active::after{
    background:var(--mint);
    box-shadow:0 6px 18px rgba(59,231,155,0.35);
}

/* ----- Mobile slide-in menu: stronger tint than hover, with subtle glow */
@media (max-width:1100px){

    .nav-menu a.active{
        background:rgba(59,231,155,0.20);
        border-color:rgba(59,231,155,0.38);
        color:var(--mint);
        font-weight:600;
        box-shadow:
            0 10px 24px rgba(59,231,155,0.12),
            inset 0 0 0 1px rgba(59,231,155,0.10);
    }

    /* Hover on the active item shouldn't fight with the active state. */
    .nav-menu a.active:hover,
    .nav-menu a.active:focus{
        background:rgba(59,231,155,0.24);
        border-color:rgba(59,231,155,0.45);
        color:var(--mint);
    }
}


/* ===================================================================
   ABOUT PAGE — FULL RESPONSIVE OVERRIDES
   Hero / Our Story / Mission & Vision / Instructors / Trust /
   Safety & Certification / Student Success.
   Preserves the premium colors, gradients, glassmorphism, glow,
   shadows, hover effects, and animations.
   Breakpoints: 1440 / 1200 / 1100 / 992 / 768 / 589 / 550 / 441 / 390 / 320 px
=================================================================== */

/* ---------- Safety: prevent overflow, responsive media ---------- */
.about-hero,
.our-story-section,
.mission-vision-section,
.about-instructors-section,
.trust-section,
.safety-section,
.student-success-section{
    overflow-x:hidden;
}

.about-hero img,
.our-story-section img,
.mission-vision-section img,
.about-instructors-section img,
.trust-section img,
.safety-section img,
.student-success-section img{
    max-width:100%;
}

/* ---------- 1440px : large desktop polish ---------- */
@media (max-width:1440px){

    .about-hero,
    .our-story-section,
    .mission-vision-section,
    .about-instructors-section,
    .trust-section,
    .safety-section,
    .student-success-section{
        padding-left:24px;
        padding-right:24px;
    }

    .about-hero-content h1{
        font-size:60px;
    }
    .about-hero-content p{
        font-size:17px;
    }
    .about-stat-box h3{
        font-size:38px;
    }
    .floating-top h3{
        font-size:30px;
    }

    .story-content h2,
    .mv-header h2,
    .inst-header h2,
    .trust-header h2,
    .safety-content h2,
    .success-header h2{
        font-size:50px;
    }
    .mv-header p,
    .inst-header p,
    .trust-header p,
    .success-header p{
        font-size:17px;
    }
    .story-text,
    .safety-text{
        font-size:16.5px;
    }

    .mv-card h3,
    .trust-content h3,
    .safety-info h3{
        font-size:28px;
    }
    .mv-floating-box h4{
        font-size:38px;
    }

    .inst-image-wrap{
        height:380px;
    }
    .inst-top h3{
        font-size:26px;
    }

    .trust-image-wrap{
        height:430px;
    }
    .trust-stat-item h3{
        font-size:46px;
    }

    .safety-image-wrap{
        height:680px;
    }

    .success-stat-item h3{
        font-size:42px;
    }
}

/* ---------- 1200px : laptop ---------- */
@media (max-width:1200px){

    .about-hero,
    .our-story-section,
    .mission-vision-section,
    .about-instructors-section,
    .trust-section,
    .safety-section,
    .student-success-section{
        padding:100px 22px;
    }

    .about-hero-container,
    .story-wrapper,
    .trust-wrapper,
    .safety-wrapper,
    .success-wrapper{
        gap:48px;
    }

    .about-hero-content h1{
        font-size:54px;
    }
    .about-stats{
        gap:14px;
    }
    .about-stat-box{
        min-width:160px;
        padding:24px 20px;
    }
    .about-stat-box h3{
        font-size:34px;
    }

    .about-floating-card{
        padding:26px;
        border-radius:30px;
    }
    .floating-image img{
        height:240px;
    }

    .story-images{
        min-height:auto;
    }
    .story-main-image{
        height:540px;
    }
    .story-small-image{
        width:230px;
        height:200px;
    }
    .story-content h2{
        font-size:46px;
    }

    .mv-header h2,
    .inst-header h2,
    .trust-header h2,
    .safety-content h2,
    .success-header h2{
        font-size:44px;
    }

    .mv-card{
        padding:32px 28px;
        border-radius:28px;
    }
    .mv-icon{
        width:68px;
        height:68px;
        border-radius:20px;
        font-size:26px;
        margin-bottom:22px;
    }
    .mv-card h3{
        font-size:28px;
        margin-bottom:14px;
    }
    .mv-image-wrap{
        height:560px;
    }

    .inst-image-wrap{
        height:360px;
    }
    .inst-content{
        padding:28px 24px;
    }
    .inst-top h3{
        font-size:24px;
    }

    .trust-image-wrap{
        height:480px;
    }
    .trust-card{
        padding:24px;
        border-radius:24px;
    }
    .trust-icon{
        width:64px;
        height:64px;
        min-width:64px;
        border-radius:18px;
        font-size:24px;
    }
    .trust-content h3{
        font-size:23px;
        margin-bottom:10px;
    }
    .trust-stats{
        grid-template-columns:repeat(4,1fr);
        gap:18px;
    }
    .trust-stat-item{
        padding:28px 18px;
    }
    .trust-stat-item h3{
        font-size:42px;
    }

    .safety-item{
        padding:22px;
        border-radius:24px;
        gap:18px;
    }
    .safety-icon{
        width:64px;
        height:64px;
        min-width:64px;
        border-radius:18px;
        font-size:24px;
    }
    .safety-info h3{
        font-size:23px;
    }

    .success-main-card{
        padding:32px;
    }
    .success-profile h3{
        font-size:24px;
    }
    .success-profile img{
        width:72px;
        height:72px;
    }
    .success-review{
        font-size:16.5px;
    }
    .success-stat-item h3{
        font-size:38px;
    }
    .success-card{
        padding:24px;
    }
    .success-card-top h4{
        font-size:21px;
    }
    .success-floating-box{
        padding:24px;
        border-radius:24px;
    }
    .floating-review-icon{
        width:64px;
        height:64px;
        border-radius:20px;
        font-size:26px;
    }
    .success-floating-box h3{
        font-size:24px;
    }
}

/* ---------- 1100px : narrow laptop / tablet landscape ---------- */
@media (max-width:1100px){

    .about-hero-container{
        grid-template-columns:1fr;
        gap:42px;
    }
    .about-floating-card{
        max-width:680px;
        margin:0 auto;
        width:100%;
    }
    .about-hero-content h1{
        font-size:48px;
    }

    .mv-grid{
        gap:24px;
    }

    .trust-stats{
        grid-template-columns:repeat(2,1fr);
    }

    .safety-small-card{
        right:auto;
        left:auto;
        position:relative;
        bottom:auto;
        width:100%;
        margin-top:24px;
    }
}

/* ---------- 992px : tablet portrait ---------- */
@media (max-width:992px){

    .about-hero,
    .our-story-section,
    .mission-vision-section,
    .about-instructors-section,
    .trust-section,
    .safety-section,
    .student-success-section{
        padding:90px 20px;
    }

    .about-hero{
        min-height:auto;
    }
    .about-hero-content h1{
        font-size:44px;
        margin-bottom:22px;
    }
    .about-hero-content p{
        font-size:16px;
    }
    .about-stats{
        margin-top:42px;
        gap:12px;
    }
    .about-stat-box{
        flex:1 1 calc(33.333% - 12px);
        min-width:0;
        padding:20px 16px;
        border-radius:20px;
    }
    .about-stat-box h3{
        font-size:30px;
        margin-bottom:6px;
    }
    .about-stat-box span{
        font-size:13.5px;
    }

    .story-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }
    .story-images{
        min-height:auto;
    }
    .story-main-image{
        height:480px;
    }
    .story-small-image{
        right:0;
    }
    .story-content h2{
        font-size:40px;
    }

    .mv-grid{
        grid-template-columns:1fr;
        gap:24px;
    }
    .mv-image-wrap{
        height:420px;
    }
    .mv-header h2,
    .inst-header h2,
    .trust-header h2,
    .safety-content h2,
    .success-header h2{
        font-size:40px;
    }
    .mv-header,
    .inst-header,
    .trust-header,
    .success-header{
        margin-bottom:60px;
    }

    .inst-profile-grid{
        grid-template-columns:repeat(2,1fr);
        gap:24px;
    }
    .inst-image-wrap{
        height:340px;
    }

    .trust-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }
    .trust-image-wrap{
        height:420px;
    }
    .trust-stats{
        grid-template-columns:repeat(2,1fr);
        margin-top:60px;
    }

    .safety-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }
    .safety-image-wrap{
        height:520px;
    }
    .certificate-card{
        left:24px;
        bottom:24px;
        padding:14px 18px;
    }

    .success-wrapper{
        grid-template-columns:1fr;
        gap:36px;
    }
    .success-main-card{
        padding:28px;
    }
    .success-floating-box{
        padding:22px;
    }
}

/* ---------- 768px : large phone / small tablet ---------- */
@media (max-width:768px){

    .about-hero,
    .our-story-section,
    .mission-vision-section,
    .about-instructors-section,
    .trust-section,
    .safety-section,
    .student-success-section{
        padding:80px 18px;
    }

    /* About hero */
    .about-subtitle,
    .story-subtitle,
    .mv-subtitle,
    .inst-subtitle,
    .trust-subtitle,
    .safety-subtitle,
    .success-subtitle{
        font-size:13px;
        padding:10px 18px;
        margin-bottom:20px;
    }
    .about-hero-content h1{
        font-size:36px;
        line-height:1.12;
        margin-bottom:20px;
    }
    .about-hero-content p{
        font-size:15.5px;
        line-height:1.8;
    }
    .about-buttons{
        flex-direction:column;
        gap:12px;
        margin-top:30px;
    }
    .about-btn{
        width:100%;
        padding:15px 24px;
        font-size:15px;
        border-radius:14px;
    }
    .about-stats{
        margin-top:32px;
        flex-direction:row;
        gap:10px;
    }
    .about-stat-box{
        flex:1 1 calc(50% - 5px);
        min-width:0;
        padding:16px 12px;
        border-radius:16px;
    }
    .about-stat-box h3{
        font-size:26px;
    }
    .about-stat-box span{
        font-size:13px;
    }

    .about-floating-card{
        padding:22px;
        border-radius:24px;
        max-width:none;
    }
    .floating-top h3{
        font-size:24px;
        line-height:1.25;
    }
    .floating-image img{
        height:200px;
    }
    .floating-bottom{
        gap:12px;
    }
    .floating-item{
        padding:12px 14px;
        gap:14px;
        border-radius:14px;
    }
    .floating-item i{
        width:42px;
        height:42px;
        border-radius:12px;
        font-size:16px;
    }
    .floating-item span{
        font-size:14px;
    }

    /* Story */
    .story-main-image{
        height:380px;
        border-radius:24px;
    }
    .story-small-image{
        width:170px;
        height:140px;
        border-width:5px;
        right:0;
        bottom:14px;
        border-radius:20px;
    }
    .story-floating-card{
        left:14px;
        top:14px;
        padding:14px 16px;
        gap:14px;
        border-radius:18px;
    }
    .story-icon{
        width:54px;
        height:54px;
        border-radius:14px;
        font-size:20px;
    }
    .story-floating-card h3{
        font-size:20px;
    }
    .story-floating-card p{
        font-size:12.5px;
    }
    .story-content h2{
        font-size:32px;
        margin-bottom:18px;
    }
    .story-text{
        font-size:14.5px;
        line-height:1.8;
    }
    .story-features{
        grid-template-columns:1fr;
        gap:12px;
        margin-top:28px;
    }
    .story-feature{
        padding:13px 14px;
        border-radius:14px;
    }
    .story-feature span{
        font-size:14px;
    }
    .story-btn{
        width:100%;
        margin-top:30px;
        padding:14px 20px;
        font-size:15px;
        border-radius:14px;
    }

    /* Mission/Vision */
    .mv-header,
    .inst-header,
    .trust-header,
    .success-header{
        margin-bottom:48px;
    }
    .mv-header h2,
    .inst-header h2,
    .trust-header h2,
    .safety-content h2,
    .success-header h2{
        font-size:30px;
        margin-bottom:16px;
    }
    .mv-header p,
    .inst-header p,
    .trust-header p,
    .success-header p,
    .safety-text{
        font-size:14.5px;
        line-height:1.8;
    }
    .mv-card{
        padding:24px 20px;
        border-radius:22px;
    }
    .mv-icon{
        width:56px;
        height:56px;
        border-radius:16px;
        font-size:22px;
        margin-bottom:18px;
    }
    .mv-card h3{
        font-size:22px;
        margin-bottom:12px;
    }
    .mv-card p{
        font-size:14.5px;
        line-height:1.75;
    }
    .mv-list{
        margin-top:24px;
        gap:12px;
    }
    .mv-item{
        padding:12px 14px;
        border-radius:14px;
        gap:12px;
    }
    .mv-item span{
        font-size:13.5px;
    }
    .mv-image-wrap{
        height:340px;
        border-radius:24px;
    }
    .mv-floating-box{
        left:16px;
        bottom:16px;
        right:16px;
        padding:16px 18px;
        border-radius:18px;
    }
    .mv-floating-box h4{
        font-size:28px;
        margin-bottom:4px;
    }
    .mv-floating-box p{
        font-size:13px;
    }

    /* Instructors */
    .inst-profile-grid{
        grid-template-columns:1fr;
        gap:22px;
    }
    .inst-profile-card{
        border-radius:24px;
    }
    .inst-image-wrap{
        height:300px;
    }
    .inst-exp{
        left:16px;
        bottom:16px;
        padding:12px 16px;
        border-radius:16px;
    }
    .inst-exp span{
        font-size:26px;
    }
    .inst-exp p{
        font-size:12.5px;
    }
    .inst-content{
        padding:22px 18px;
    }
    .inst-top{
        margin-bottom:14px;
    }
    .inst-top h3{
        font-size:21px;
        margin-bottom:6px;
    }
    .inst-top span{
        font-size:13.5px;
    }
    .inst-content p{
        font-size:14.5px;
        line-height:1.75;
    }
    .inst-features{
        margin-top:20px;
        gap:10px;
    }
    .inst-feature{
        padding:11px 14px;
        border-radius:12px;
        gap:10px;
    }
    .inst-feature span{
        font-size:13.5px;
    }
    .inst-social{
        margin-top:22px;
        gap:10px;
    }
    .inst-social a{
        width:42px;
        height:42px;
        border-radius:12px;
        font-size:14px;
    }

    /* Trust */
    .trust-image-wrap{
        height:340px;
        border-radius:24px;
    }
    .trust-floating-box{
        left:16px;
        bottom:16px;
        right:16px;
        padding:14px 16px;
        gap:14px;
        border-radius:18px;
    }
    .trust-float-icon{
        width:50px;
        height:50px;
        border-radius:14px;
        font-size:20px;
    }
    .trust-floating-box h4{
        font-size:18px;
    }
    .trust-floating-box p{
        font-size:12.5px;
    }
    .trust-card{
        flex-direction:row;
        align-items:flex-start;
        gap:16px;
        padding:20px;
        border-radius:20px;
    }
    .trust-icon{
        width:52px;
        height:52px;
        min-width:52px;
        border-radius:14px;
        font-size:20px;
    }
    .trust-content h3{
        font-size:18px;
        margin-bottom:8px;
    }
    .trust-content p{
        font-size:14px;
        line-height:1.75;
    }
    .trust-stats{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
        margin-top:48px;
    }
    .trust-stat-item{
        padding:22px 14px;
        border-radius:20px;
    }
    .trust-stat-item h3{
        font-size:34px;
        margin-bottom:8px;
    }
    .trust-stat-item p{
        font-size:13.5px;
    }

    /* Safety */
    .safety-features{
        gap:16px;
    }
    .safety-item{
        flex-direction:row;
        align-items:flex-start;
        gap:16px;
        padding:18px;
        border-radius:20px;
    }
    .safety-icon{
        width:52px;
        height:52px;
        min-width:52px;
        border-radius:14px;
        font-size:20px;
    }
    .safety-info h3{
        font-size:18px;
        margin-bottom:8px;
    }
    .safety-info p{
        font-size:14px;
        line-height:1.7;
    }
    .safety-image-wrap{
        height:380px;
        border-radius:24px;
    }
    .certificate-card{
        left:16px;
        bottom:16px;
        right:16px;
        padding:10px 14px;
        gap:14px;
        border-radius:18px;
    }
    .certificate-icon{
        width:42px;
        height:42px;
        font-size:22px;
    }
    .certificate-content h4{
        font-size:16px;
    }
    .certificate-content p{
        font-size:13px;
    }
    .safety-small-card{
        margin-top:20px;
        padding:22px;
        border-radius:24px;
    }
    .small-card-top h3{
        font-size:24px;
        margin-bottom:8px;
    }
    .small-card-top span{
        font-size:13.5px;
    }
    .small-progress{
        gap:18px;
    }

    /* Student Success */
    .success-main-card{
        padding:24px;
        border-radius:24px;
    }
    .success-top{
        flex-direction:row;
        align-items:center;
        flex-wrap:wrap;
        gap:14px;
        margin-bottom:20px;
    }
    .success-profile{
        gap:14px;
    }
    .success-profile img{
        width:60px;
        height:60px;
        border-width:3px;
    }
    .success-profile h3{
        font-size:18px;
        margin-bottom:2px;
    }
    .success-profile span{
        font-size:13px;
    }
    .success-rating{
        font-size:14px;
        gap:3px;
    }
    .success-review{
        font-size:14.5px;
        line-height:1.85;
    }
    .success-stats{
        grid-template-columns:repeat(3,1fr);
        gap:12px;
    }
    .success-stat-item{
        padding:20px 12px;
        border-radius:20px;
    }
    .success-stat-item h3{
        font-size:28px;
        margin-bottom:6px;
    }
    .success-stat-item p{
        font-size:13px;
    }
    .success-right{
        gap:18px;
    }
    .success-card{
        padding:20px;
        border-radius:22px;
    }
    .success-card-top{
        gap:14px;
        margin-bottom:14px;
    }
    .success-card-top img{
        width:54px;
        height:54px;
        border-width:3px;
    }
    .success-card-top h4{
        font-size:18px;
        margin-bottom:2px;
    }
    .success-card-top span{
        font-size:12.5px;
    }
    .success-card p{
        font-size:14px;
        line-height:1.7;
    }
    .success-floating-box{
        flex-direction:row;
        align-items:center;
        gap:16px;
        padding:20px;
        border-radius:22px;
    }
    .floating-review-icon{
        width:54px;
        height:54px;
        min-width:54px;
        border-radius:16px;
        font-size:22px;
    }
    .success-floating-box h3{
        font-size:20px;
        margin-bottom:4px;
    }
    .success-floating-box p{
        font-size:13px;
        line-height:1.55;
    }
}

/* ---------- 589px : intermediate phone ---------- */
@media (max-width:589px){

    .about-hero,
    .our-story-section,
    .mission-vision-section,
    .about-instructors-section,
    .trust-section,
    .safety-section,
    .student-success-section{
        padding:70px 16px;
    }

    .about-hero-content h1{
        font-size:32px;
    }
    .about-stat-box{
        flex:1 1 100%;
    }

    .story-content h2{
        font-size:28px;
    }
    .story-main-image{
        height:340px;
    }

    .mv-header h2,
    .inst-header h2,
    .trust-header h2,
    .safety-content h2,
    .success-header h2{
        font-size:26px;
    }

    .trust-stats{
        grid-template-columns:1fr;
    }

    .success-stats{
        grid-template-columns:1fr;
    }
}

/* ---------- 550px : phones ---------- */
@media (max-width:550px){

    .about-hero-content h1{
        font-size:30px;
    }
    .about-floating-card{
        padding:18px 16px;
        border-radius:22px;
    }
    .floating-top h3{
        font-size:22px;
    }
    .floating-image img{
        height:180px;
    }

    .story-main-image{
        height:320px;
    }
    .story-small-image{
        width:140px;
        height:120px;
        right:8px;
        bottom:8px;
        border-width:4px;
    }

    .mv-image-wrap{
        height:300px;
    }
    .mv-floating-box h4{
        font-size:24px;
    }

    .inst-image-wrap{
        height:280px;
    }
    .inst-top h3{
        font-size:20px;
    }

    .trust-image-wrap{
        height:300px;
    }

    .safety-image-wrap{
        height:340px;
    }

    .success-floating-box{
        flex-direction:column;
        align-items:flex-start;
    }
}

/* ---------- 441px : small phones ---------- */
@media (max-width:441px){

    .about-hero,
    .our-story-section,
    .mission-vision-section,
    .about-instructors-section,
    .trust-section,
    .safety-section,
    .student-success-section{
        padding:64px 14px;
    }

    .about-subtitle,
    .story-subtitle,
    .mv-subtitle,
    .inst-subtitle,
    .trust-subtitle,
    .safety-subtitle,
    .success-subtitle{
        font-size:12px;
        padding:8px 14px;
    }

    .about-hero-content h1{
        font-size:26px;
        margin-bottom:16px;
    }
    .about-hero-content p{
        font-size:14.5px;
        line-height:1.75;
    }
    .about-buttons{
        margin-top:24px;
    }
    .about-btn{
        padding:13px 20px;
        font-size:14px;
        border-radius:12px;
    }
    .about-stats{
        margin-top:26px;
    }
    .about-stat-box{
        padding:14px 12px;
    }
    .about-stat-box h3{
        font-size:24px;
    }
    .about-stat-box span{
        font-size:12.5px;
    }

    .about-floating-card{
        padding:16px 14px;
        border-radius:20px;
    }
    .floating-top{
        margin-bottom:18px;
    }
    .floating-top h3{
        font-size:20px;
    }
    .floating-image img{
        height:160px;
    }
    .floating-image{
        margin-bottom:18px;
    }
    .floating-item{
        padding:11px 12px;
        gap:12px;
    }
    .floating-item i{
        width:38px;
        height:38px;
        border-radius:10px;
        font-size:14px;
    }
    .floating-item span{
        font-size:13px;
    }

    .story-content h2{
        font-size:26px;
        margin-bottom:14px;
    }
    .story-text{
        font-size:13.5px;
        line-height:1.7;
    }
    .story-main-image{
        height:280px;
        border-radius:20px;
    }
    .story-small-image{
        width:120px;
        height:100px;
        right:8px;
        bottom:8px;
        border-radius:16px;
        border-width:3px;
    }
    .story-floating-card{
        left:10px;
        top:10px;
        padding:11px 12px;
        gap:10px;
    }
    .story-icon{
        width:42px;
        height:42px;
        border-radius:12px;
        font-size:16px;
    }
    .story-floating-card h3{
        font-size:16px;
    }
    .story-floating-card p{
        font-size:11.5px;
    }
    .story-feature{
        padding:11px 12px;
    }
    .story-feature span{
        font-size:13px;
    }
    .story-btn{
        padding:13px 18px;
        font-size:14px;
        border-radius:12px;
    }

    .mv-header,
    .inst-header,
    .trust-header,
    .success-header{
        margin-bottom:38px;
    }
    .mv-header h2,
    .inst-header h2,
    .trust-header h2,
    .safety-content h2,
    .success-header h2{
        font-size:23px;
        margin-bottom:14px;
    }
    .mv-header p,
    .inst-header p,
    .trust-header p,
    .success-header p,
    .safety-text{
        font-size:13.5px;
        line-height:1.7;
    }
    .mv-card{
        padding:20px 16px;
        border-radius:20px;
    }
    .mv-icon{
        width:48px;
        height:48px;
        border-radius:14px;
        font-size:18px;
        margin-bottom:14px;
    }
    .mv-card h3{
        font-size:19px;
        margin-bottom:10px;
    }
    .mv-card p{
        font-size:13.5px;
    }
    .mv-list{
        margin-top:18px;
        gap:10px;
    }
    .mv-item{
        padding:10px 12px;
        border-radius:12px;
    }
    .mv-item span{
        font-size:13px;
    }
    .mv-image-wrap{
        height:260px;
        border-radius:20px;
    }
    .mv-floating-box{
        left:12px;
        right:12px;
        bottom:12px;
        padding:12px 14px;
        border-radius:14px;
    }
    .mv-floating-box h4{
        font-size:22px;
    }
    .mv-floating-box p{
        font-size:12px;
    }

    .inst-profile-card{
        border-radius:20px;
    }
    .inst-image-wrap{
        height:240px;
    }
    .inst-exp{
        left:12px;
        bottom:12px;
        padding:10px 14px;
        border-radius:14px;
    }
    .inst-exp span{
        font-size:22px;
    }
    .inst-exp p{
        font-size:11.5px;
    }
    .inst-content{
        padding:18px 14px;
    }
    .inst-top h3{
        font-size:18px;
    }
    .inst-top span{
        font-size:12.5px;
    }
    .inst-content p{
        font-size:13.5px;
    }
    .inst-feature{
        padding:10px 12px;
    }
    .inst-feature span{
        font-size:13px;
    }
    .inst-social{
        margin-top:18px;
        gap:8px;
    }
    .inst-social a{
        width:38px;
        height:38px;
        border-radius:10px;
        font-size:13px;
    }

    .trust-image-wrap{
        height:260px;
        border-radius:20px;
    }
    .trust-floating-box{
        left:10px;
        right:10px;
        bottom:10px;
        padding:11px 13px;
        gap:12px;
    }
    .trust-float-icon{
        width:42px;
        height:42px;
        border-radius:12px;
        font-size:16px;
    }
    .trust-floating-box h4{
        font-size:16px;
    }
    .trust-floating-box p{
        font-size:11.5px;
    }
    .trust-card{
        gap:14px;
        padding:16px;
        border-radius:18px;
    }
    .trust-icon{
        width:46px;
        height:46px;
        min-width:46px;
        border-radius:12px;
        font-size:18px;
    }
    .trust-content h3{
        font-size:16px;
    }
    .trust-content p{
        font-size:13px;
    }
    .trust-stats{
        margin-top:36px;
    }
    .trust-stat-item{
        padding:18px 12px;
        border-radius:18px;
    }
    .trust-stat-item h3{
        font-size:28px;
    }
    .trust-stat-item p{
        font-size:13px;
    }

    .safety-item{
        gap:14px;
        padding:16px;
        border-radius:18px;
    }
    .safety-icon{
        width:46px;
        height:46px;
        min-width:46px;
        border-radius:12px;
        font-size:18px;
    }
    .safety-info h3{
        font-size:16px;
    }
    .safety-info p{
        font-size:13px;
    }
    .safety-image-wrap{
        height:280px;
        border-radius:20px;
    }
    .certificate-card{
        left:10px;
        right:10px;
        bottom:10px;
        padding:9px 12px;
        gap:12px;
        border-radius:14px;
    }
    .certificate-icon{
        width:36px;
        height:36px;
        border-radius:10px;
        font-size:18px;
    }
    .certificate-content h4{
        font-size:14.5px;
        margin-bottom:2px;
    }
    .certificate-content p{
        font-size:12px;
    }
    .safety-small-card{
        padding:18px;
        border-radius:20px;
    }
    .small-card-top h3{
        font-size:20px;
    }
    .small-card-top span{
        font-size:13px;
    }

    .success-main-card{
        padding:18px;
        border-radius:20px;
    }
    .success-profile img{
        width:54px;
        height:54px;
    }
    .success-profile h3{
        font-size:16px;
    }
    .success-profile span{
        font-size:12.5px;
    }
    .success-review{
        font-size:13.5px;
        line-height:1.75;
    }
    .success-stat-item{
        padding:16px 10px;
        border-radius:18px;
    }
    .success-stat-item h3{
        font-size:24px;
    }
    .success-stat-item p{
        font-size:12px;
    }
    .success-card{
        padding:16px;
        border-radius:18px;
    }
    .success-card-top img{
        width:48px;
        height:48px;
    }
    .success-card-top h4{
        font-size:16px;
    }
    .success-card-top span{
        font-size:12px;
    }
    .success-card p{
        font-size:13px;
    }
    .success-floating-box{
        padding:16px;
        border-radius:20px;
    }
    .floating-review-icon{
        width:46px;
        height:46px;
        border-radius:14px;
        font-size:18px;
    }
    .success-floating-box h3{
        font-size:18px;
    }
    .success-floating-box p{
        font-size:12.5px;
    }
}

/* ---------- 390px : iPhone 12 mini ---------- */
@media (max-width:390px){

    .about-hero-content h1{
        font-size:24px;
    }

    .story-content h2{
        font-size:24px;
    }

    .mv-header h2,
    .inst-header h2,
    .trust-header h2,
    .safety-content h2,
    .success-header h2{
        font-size:21px;
    }

    .story-main-image{
        height:240px;
    }
    .mv-image-wrap{
        height:230px;
    }
    .inst-image-wrap{
        height:220px;
    }
    .trust-image-wrap{
        height:230px;
    }
    .safety-image-wrap{
        height:250px;
    }

    .trust-stat-item h3{
        font-size:26px;
    }
    .success-stat-item h3{
        font-size:22px;
    }
}

/* ---------- 320px : smallest phones ---------- */
@media (max-width:320px){

    .about-hero,
    .our-story-section,
    .mission-vision-section,
    .about-instructors-section,
    .trust-section,
    .safety-section,
    .student-success-section{
        padding:54px 12px;
    }

    .about-hero-content h1{
        font-size:21px;
        margin-bottom:12px;
    }
    .about-hero-content p{
        font-size:13.5px;
    }
    .about-stats{
        margin-top:22px;
    }
    .about-stat-box{
        padding:12px 10px;
    }
    .about-stat-box h3{
        font-size:21px;
    }
    .about-stat-box span{
        font-size:12px;
    }
    .about-floating-card{
        padding:14px 12px;
        border-radius:18px;
    }
    .floating-top h3{
        font-size:18px;
    }
    .floating-image img{
        height:150px;
    }
    .floating-item{
        padding:10px 11px;
    }
    .floating-item span{
        font-size:12.5px;
    }

    .story-content h2{
        font-size:22px;
    }
    .story-text{
        font-size:13px;
    }
    .story-main-image{
        height:220px;
        border-radius:18px;
    }
    .story-small-image{
        width:108px;
        height:88px;
        border-radius:14px;
    }
    .story-floating-card{
        padding:9px 10px;
        gap:8px;
    }
    .story-icon{
        width:38px;
        height:38px;
        font-size:14px;
    }
    .story-floating-card h3{
        font-size:14.5px;
    }
    .story-floating-card p{
        font-size:11px;
    }
    .story-feature{
        padding:10px 11px;
    }
    .story-feature span{
        font-size:12.5px;
    }

    .mv-header h2,
    .inst-header h2,
    .trust-header h2,
    .safety-content h2,
    .success-header h2{
        font-size:20px;
    }
    .mv-card{
        padding:18px 14px;
        border-radius:18px;
    }
    .mv-card h3{
        font-size:18px;
    }
    .mv-card p,
    .mv-item span{
        font-size:13px;
    }
    .mv-image-wrap{
        height:210px;
        border-radius:18px;
    }
    .mv-floating-box{
        padding:11px 12px;
    }
    .mv-floating-box h4{
        font-size:20px;
    }

    .inst-image-wrap{
        height:200px;
    }
    .inst-content{
        padding:16px 12px;
    }
    .inst-top h3{
        font-size:17px;
    }
    .inst-content p{
        font-size:13px;
    }
    .inst-feature{
        padding:9px 11px;
    }
    .inst-feature span{
        font-size:12.5px;
    }

    .trust-image-wrap{
        height:210px;
        border-radius:18px;
    }
    .trust-card{
        padding:14px;
        gap:12px;
        border-radius:16px;
    }
    .trust-icon{
        width:42px;
        height:42px;
        min-width:42px;
        border-radius:11px;
        font-size:16px;
    }
    .trust-content h3{
        font-size:15px;
    }
    .trust-content p{
        font-size:12.5px;
    }
    .trust-stat-item{
        padding:16px 10px;
        border-radius:16px;
    }
    .trust-stat-item h3{
        font-size:24px;
    }
    .trust-stat-item p{
        font-size:12.5px;
    }

    .safety-item{
        padding:14px;
        gap:12px;
        border-radius:16px;
    }
    .safety-icon{
        width:42px;
        height:42px;
        min-width:42px;
        border-radius:11px;
        font-size:16px;
    }
    .safety-info h3{
        font-size:15px;
    }
    .safety-info p{
        font-size:12.5px;
    }
    .safety-image-wrap{
        height:230px;
        border-radius:18px;
    }
    .certificate-card{
        padding:8px 10px;
        gap:10px;
    }
    .certificate-icon{
        width:32px;
        height:32px;
        font-size:16px;
    }
    .certificate-content h4{
        font-size:13px;
    }
    .certificate-content p{
        font-size:11.5px;
    }
    .safety-small-card{
        padding:16px;
        border-radius:18px;
    }
    .small-card-top h3{
        font-size:18px;
    }

    .success-main-card{
        padding:16px;
        border-radius:18px;
    }
    .success-profile img{
        width:48px;
        height:48px;
    }
    .success-profile h3{
        font-size:14.5px;
    }
    .success-profile span{
        font-size:11.5px;
    }
    .success-review{
        font-size:12.5px;
    }
    .success-stat-item{
        padding:14px 8px;
    }
    .success-stat-item h3{
        font-size:20px;
    }
    .success-stat-item p{
        font-size:11.5px;
    }
    .success-card{
        padding:14px;
        border-radius:16px;
    }
    .success-card-top img{
        width:42px;
        height:42px;
        border-width:2px;
    }
    .success-card-top h4{
        font-size:14.5px;
    }
    .success-card-top span{
        font-size:11.5px;
    }
    .success-card p{
        font-size:12.5px;
    }
    .success-floating-box{
        padding:14px;
        gap:12px;
    }
    .floating-review-icon{
        width:40px;
        height:40px;
        font-size:16px;
    }
    .success-floating-box h3{
        font-size:16px;
    }
    .success-floating-box p{
        font-size:12px;
    }
}


/* ===================================================================
   COURSES PAGE — FULL RESPONSIVE OVERRIDES
   Hero / Categories / Course Cards / Course Details / Pricing /
   Why Take Our Courses / FAQ / CTA.
   Preserves the premium colors, gradients, glassmorphism, glow,
   shadows, hover effects, and animations.
   Breakpoints: 1440 / 1200 / 1100 / 992 / 768 / 589 / 550 / 441 / 390 / 320
=================================================================== */

/* Universal safety inside courses-page sections */
.courses-hero,
.course-categories-section,
.course-cards-section,
.course-details-section,
.pricing-section,
.why-course-section,
.faq-section,
.cta-section{
    overflow-x:hidden;
}

.courses-hero img,
.course-categories-section img,
.course-cards-section img,
.course-details-section img,
.pricing-section img,
.why-course-section img,
.faq-section img,
.cta-section img{
    max-width:100%;
}

/* Slim down the featured-pricing scale earlier to avoid overflow */
@media(max-width:1280px){
    .featured-pricing{
        transform:none;
    }
}

/* =========================
   1440px — Large desktop polish
========================= */
@media(max-width:1440px){

    .courses-hero{
        padding:110px 20px;
    }
    .courses-hero-content h1{
        font-size:62px;
    }
    .courses-hero-content p{
        font-size:17px;
    }
    .courses-stat-box h3{
        font-size:40px;
    }
    .floating-course-top h3{
        font-size:30px;
    }
    .floating-course-image img{
        height:260px;
    }

    .course-cat-header h2,
    .course-cards-header h2,
    .course-details-content h2,
    .pricing-header h2,
    .why-course-header h2{
        font-size:52px;
    }

    .course-cat-card h3,
    .course-main-content h3,
    .pricing-top h3,
    .timeline-content h3,
    .why-course-content h3{
        font-size:28px;
    }

    .course-details-main-image{
        height:680px;
    }
}

/* =========================
   1200px — Laptop
========================= */
@media(max-width:1200px){

    .courses-hero{
        padding:100px 20px;
    }
    .courses-hero-container{
        gap:50px;
    }
    .courses-hero-content h1{
        font-size:54px;
    }
    .courses-hero-content p{
        font-size:16px;
        line-height:1.85;
    }
    .courses-stats{
        gap:16px;
        margin-top:45px;
    }
    .courses-stat-box{
        min-width:160px;
        padding:24px 20px;
    }
    .courses-stat-box h3{
        font-size:36px;
    }
    .courses-floating-card{
        padding:28px;
        border-radius:30px;
    }
    .floating-course-top h3{
        font-size:28px;
    }
    .floating-course-image img{
        height:240px;
    }
    .course-price-box h4{
        font-size:36px;
    }

    .course-categories-section,
    .course-cards-section,
    .course-details-section,
    .pricing-section,
    .why-course-section{
        padding:100px 20px;
    }
    .course-cat-header,
    .course-cards-header,
    .pricing-header,
    .why-course-header{
        margin-bottom:60px;
    }
    .course-cat-header h2,
    .course-cards-header h2,
    .pricing-header h2,
    .why-course-header h2,
    .course-details-content h2{
        font-size:46px;
    }
    .course-cat-header p,
    .course-cards-header p,
    .pricing-header p,
    .why-course-header p{
        font-size:17px;
    }

    .course-cat-card{
        padding:30px 26px;
        border-radius:28px;
    }
    .course-cat-icon{
        width:72px;
        height:72px;
        font-size:28px;
        border-radius:22px;
        margin-bottom:22px;
    }
    .course-cat-card h3{
        font-size:24px;
    }
    .course-cat-card p{
        font-size:15px;
        line-height:1.8;
    }
    .cat-feature{
        padding:12px 14px;
        gap:10px;
    }
    .cat-feature span{
        font-size:14px;
    }

    .course-cards-grid{
        gap:24px;
    }
    .course-main-image{
        height:260px;
    }
    .course-main-content{
        padding:28px 26px;
    }
    .course-main-content h3{
        font-size:26px;
    }
    .course-main-content p{
        font-size:15px;
        line-height:1.8;
    }
    .main-feature{
        padding:13px 14px;
        gap:10px;
    }
    .main-feature span{
        font-size:14px;
    }
    .course-price h4{
        font-size:36px;
    }
    .course-btn-main{
        padding:14px 22px;
        font-size:14px;
    }

    .course-details-wrapper{
        gap:50px;
    }
    .course-details-main-image{
        height:560px;
    }
    .course-small-card{
        right:20px;
        bottom:30px;
        width:320px;
        padding:26px;
        border-radius:28px;
    }
    .small-course-top h3{
        font-size:26px;
    }
    .timeline-item{
        padding:24px;
        gap:20px;
    }
    .timeline-number{
        width:64px;
        height:64px;
        min-width:64px;
        font-size:24px;
        border-radius:18px;
    }
    .timeline-content h3{
        font-size:24px;
    }

    .pricing-card{
        padding:34px 28px;
        border-radius:30px;
    }
    .pricing-top h3{
        font-size:28px;
    }
    .pricing-price h2{
        font-size:60px;
    }

    .why-course-wrapper{
        gap:50px;
    }
    .why-course-image-wrap{
        height:420px;
    }
    .why-course-card{
        padding:26px;
        gap:20px;
        border-radius:26px;
    }
    .why-course-icon{
        width:68px;
        height:68px;
        min-width:68px;
        font-size:26px;
        border-radius:20px;
    }
    .why-course-content h3{
        font-size:24px;
        margin-bottom:10px;
    }
    .why-course-content p{
        font-size:15px;
        line-height:1.8;
    }
    .why-course-stats{
        margin-top:60px;
        gap:20px;
    }
    .why-stat-item{
        padding:30px 20px;
        border-radius:24px;
    }
    .why-stat-item h3{
        font-size:44px;
    }

    .faq-container{
        gap:50px;
    }
    .faq-content h2{
        font-size:46px;
    }
    .faq-img-wrap{
        height:420px;
    }

    .cta-container{
        gap:50px;
    }
    .cta-content h2{
        font-size:50px;
    }
}

/* =========================
   1100px — Narrow laptop / large tablet
========================= */
@media(max-width:1100px){

    .courses-hero-container{
        grid-template-columns:1fr;
        gap:50px;
    }
    .courses-floating-card{
        max-width:680px;
    }
    .courses-hero-content h1{
        font-size:48px;
    }

    .course-cat-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .course-cards-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .pricing-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .featured-pricing{
        transform:none;
    }

    .course-details-wrapper{
        grid-template-columns:1fr;
        gap:60px;
    }
    .course-details-main-image{
        height:520px;
    }
    .course-small-card{
        right:20px;
        bottom:20px;
    }

    .why-course-wrapper{
        grid-template-columns:1fr;
    }
    .why-course-image-wrap{
        height:440px;
    }

    .faq-container{
        grid-template-columns:1fr;
    }
    .faq-img-wrap{
        height:440px;
    }

    .cta-container{
        grid-template-columns:1fr;
    }
}

/* =========================
   992px — Tablet
========================= */
@media(max-width:992px){

    .courses-hero{
        min-height:auto;
        padding:90px 20px;
    }
    .courses-hero-content h1{
        font-size:44px;
    }
    .courses-stat-box{
        min-width:150px;
        padding:22px 18px;
    }
    .courses-stat-box h3{
        font-size:32px;
    }
    .courses-floating-card{
        padding:26px;
        border-radius:26px;
    }
    .floating-course-top h3{
        font-size:26px;
    }
    .floating-course-image img{
        height:220px;
    }

    .course-categories-section,
    .course-cards-section,
    .course-details-section,
    .pricing-section,
    .why-course-section{
        padding:90px 20px;
    }
    .course-cat-header,
    .course-cards-header,
    .pricing-header,
    .why-course-header{
        margin-bottom:50px;
    }
    .course-cat-header h2,
    .course-cards-header h2,
    .pricing-header h2,
    .why-course-header h2,
    .course-details-content h2{
        font-size:42px;
    }
    .course-cat-header p,
    .course-cards-header p,
    .pricing-header p,
    .why-course-header p{
        font-size:16px;
        line-height:1.8;
    }

    .course-main-image{
        height:240px;
    }

    .course-details-main-image{
        height:480px;
    }
    .course-floating-info{
        left:22px;
        bottom:22px;
        padding:14px 18px;
        gap:14px;
    }
    .course-float-icon{
        width:42px;
        height:42px;
        font-size:22px;
    }
    .course-floating-info h4{
        font-size:22px;
    }
    .course-small-card{
        position:relative;
        right:0;
        bottom:0;
        width:100%;
        margin-top:24px;
    }

    .pricing-card{
        padding:32px 26px;
    }
    .pricing-price h2{
        font-size:54px;
    }

    .why-course-stats{
        grid-template-columns:repeat(2,1fr);
    }
    .why-stat-item h3{
        font-size:40px;
    }

    .faq-content h2{
        font-size:40px;
    }
    .faq-img-wrap{
        height:420px;
    }
    .faq-question{
        font-size:17px;
        padding:22px 24px;
    }

    .cta-content h2{
        font-size:44px;
    }
    .cta-card{
        padding:30px;
    }
}

/* =========================
   768px — Large phone / small tablet
========================= */
@media(max-width:768px){

    .courses-hero{
        padding:80px 18px;
    }
    .courses-hero-container{
        gap:40px;
    }
    .courses-subtitle{
        font-size:13px;
        padding:10px 18px;
        margin-bottom:22px;
    }
    .courses-hero-content h1{
        font-size:38px;
        margin-bottom:22px;
    }
    .courses-hero-content p{
        font-size:15px;
        line-height:1.8;
    }
    .courses-buttons{
        flex-direction:column;
        gap:14px;
        margin-top:32px;
    }
    .courses-btn{
        width:100%;
        padding:15px 24px;
        font-size:15px;
        border-radius:16px;
    }
    .courses-stats{
        gap:12px;
        margin-top:40px;
    }
    .courses-stat-box{
        flex:1 1 100%;
        min-width:0;
        width:100%;
        padding:20px 18px;
        border-radius:20px;
    }
    .courses-stat-box h3{
        font-size:30px;
    }
    .courses-stat-box span{
        font-size:14px;
    }
    .courses-floating-card{
        padding:22px;
        border-radius:24px;
    }
    .mini-course-tag{
        font-size:12px;
        padding:7px 14px;
    }
    .floating-course-top h3{
        font-size:24px;
    }
    .floating-course-image{
        border-radius:18px;
        margin-bottom:22px;
    }
    .floating-course-image img{
        height:200px;
    }
    .course-feature-item{
        padding:13px 14px;
        gap:12px;
    }
    .course-feature-item i{
        font-size:16px;
    }
    .course-feature-item span{
        font-size:14px;
    }
    .course-price-box{
        flex-direction:column;
        align-items:flex-start;
        padding:20px;
        border-radius:20px;
        gap:14px;
    }
    .course-price-box h4{
        font-size:32px;
    }
    .course-price-box a{
        width:100%;
        text-align:center;
        padding:13px 22px;
        font-size:14px;
    }

    .course-categories-section,
    .course-cards-section,
    .course-details-section,
    .pricing-section,
    .why-course-section{
        padding:80px 18px;
    }
    .course-cat-grid{
        grid-template-columns:1fr;
        gap:22px;
    }
    .course-cat-header,
    .course-cards-header,
    .pricing-header,
    .why-course-header{
        margin-bottom:40px;
    }
    .course-cat-header h2,
    .course-cards-header h2,
    .pricing-header h2,
    .why-course-header h2,
    .course-details-content h2{
        font-size:34px;
        margin-bottom:18px;
    }
    .course-cat-header p,
    .course-cards-header p,
    .pricing-header p,
    .why-course-header p{
        font-size:15px;
    }
    .course-cat-subtitle,
    .course-cards-subtitle,
    .course-details-subtitle,
    .pricing-subtitle,
    .why-course-subtitle{
        font-size:13px;
        padding:10px 18px;
        margin-bottom:18px;
    }

    .course-cat-card{
        padding:26px 22px;
        border-radius:24px;
    }
    .course-cat-icon{
        width:64px;
        height:64px;
        font-size:24px;
        border-radius:20px;
        margin-bottom:20px;
    }
    .course-tag{
        font-size:12px;
        padding:7px 14px;
        margin-bottom:14px;
    }
    .course-cat-card h3{
        font-size:22px;
        margin-bottom:14px;
    }
    .course-cat-card p{
        font-size:14px;
        line-height:1.75;
    }
    .course-cat-features{
        margin-top:22px;
        gap:12px;
    }

    .course-cards-grid{
        grid-template-columns:1fr;
        gap:24px;
    }
    .course-main-image{
        height:230px;
    }
    .course-badge{
        top:18px;
        left:18px;
        padding:8px 14px;
        font-size:12px;
    }
    .course-main-content{
        padding:24px 22px;
    }
    .course-top-info{
        flex-wrap:wrap;
        gap:10px;
        margin-bottom:18px;
    }
    .course-level{
        font-size:13px;
    }
    .course-rating{
        font-size:14px;
    }
    .course-main-content h3{
        font-size:22px;
        margin-bottom:14px;
    }
    .course-main-content p{
        font-size:14px;
        line-height:1.75;
    }
    .course-main-features{
        margin-top:22px;
        gap:12px;
    }
    .course-footer{
        flex-direction:column;
        align-items:stretch;
        gap:16px;
        margin-top:26px;
    }
    .course-price span{
        font-size:13px;
    }
    .course-price h4{
        font-size:32px;
    }
    .course-btn-main{
        width:100%;
        text-align:center;
        padding:14px 22px;
    }

    .course-details-wrapper{
        gap:40px;
    }
    .course-details-main-image{
        height:380px;
        border-radius:26px;
    }
    .course-floating-info{
        left:18px;
        bottom:18px;
        padding:12px 14px;
        gap:12px;
        border-radius:18px;
    }
    .course-float-icon{
        width:40px;
        height:40px;
        font-size:20px;
        border-radius:14px;
    }
    .course-floating-info h4{
        font-size:18px;
        margin-bottom:4px;
    }
    .course-floating-info p{
        font-size:13px;
    }
    .course-small-card{
        padding:22px;
        border-radius:24px;
    }
    .small-course-top h3{
        font-size:22px;
    }
    .small-course-top span{
        font-size:14px;
    }
    .small-course-list{
        gap:14px;
    }
    .small-course-item{
        padding:13px 14px;
        gap:12px;
    }
    .small-course-item span{
        font-size:14px;
    }
    .course-details-text{
        font-size:15px;
        margin-bottom:30px;
    }
    .course-timeline{
        gap:18px;
    }
    .timeline-item{
        flex-direction:row;
        padding:20px;
        gap:16px;
        border-radius:24px;
    }
    .timeline-number{
        width:54px;
        height:54px;
        min-width:54px;
        font-size:20px;
        border-radius:16px;
    }
    .timeline-content h3{
        font-size:20px;
        margin-bottom:8px;
    }
    .timeline-content p{
        font-size:14px;
        line-height:1.75;
    }
    .course-details-btn{
        width:100%;
        padding:15px 24px;
        margin-top:30px;
        font-size:15px;
    }

    .pricing-grid{
        grid-template-columns:1fr;
        gap:22px;
    }
    .pricing-card{
        padding:30px 24px;
        border-radius:26px;
    }
    .pricing-tag{
        font-size:12px;
        padding:7px 14px;
        margin-bottom:16px;
    }
    .pricing-top{
        margin-bottom:24px;
    }
    .pricing-top h3{
        font-size:24px;
        margin-bottom:14px;
    }
    .pricing-top p{
        font-size:14px;
        line-height:1.75;
    }
    .pricing-price{
        margin-bottom:26px;
    }
    .pricing-price h2{
        font-size:48px;
    }
    .pricing-price span{
        font-size:14px;
    }
    .pricing-features{
        gap:14px;
    }
    .pricing-feature-item{
        padding:13px 14px;
        gap:12px;
        border-radius:14px;
    }
    .pricing-feature-item span{
        font-size:14px;
    }
    .pricing-btn{
        padding:15px 18px;
        font-size:15px;
        margin-top:24px;
        border-radius:16px;
    }
    .featured-badge{
        top:-14px;
        right:24px;
        padding:8px 16px;
        font-size:12px;
    }

    .why-course-wrapper{
        gap:36px;
    }
    .why-course-image-wrap{
        height:340px;
        border-radius:28px;
    }
    .why-floating-box{
        left:18px;
        bottom:18px;
        padding:14px 16px;
        gap:14px;
        border-radius:18px;
    }
    .why-floating-icon{
        width:54px;
        height:54px;
        font-size:22px;
        border-radius:18px;
    }
    .why-floating-box h4{
        font-size:20px;
        margin-bottom:4px;
    }
    .why-floating-box p{
        font-size:13px;
    }
    .why-course-right{
        gap:18px;
    }
    .why-course-card{
        flex-direction:row;
        gap:16px;
        padding:22px;
        border-radius:22px;
    }
    .why-course-icon{
        width:60px;
        height:60px;
        min-width:60px;
        font-size:22px;
        border-radius:18px;
    }
    .why-course-content h3{
        font-size:20px;
        margin-bottom:8px;
    }
    .why-course-content p{
        font-size:14px;
        line-height:1.75;
    }
    .why-course-stats{
        grid-template-columns:repeat(2,1fr);
        margin-top:50px;
        gap:14px;
    }
    .why-stat-item{
        padding:24px 16px;
        border-radius:20px;
    }
    .why-stat-item h3{
        font-size:34px;
        margin-bottom:6px;
    }
    .why-stat-item p{
        font-size:14px;
    }

    .faq-section{
        padding:80px 18px;
    }
    .faq-container{
        gap:36px;
    }
    .faq-img-wrap{
        height:340px;
        border-radius:24px;
    }
    .faq-badge{
        left:18px;
        bottom:18px;
        padding:14px 18px;
        border-radius:18px;
    }
    .faq-badge span{
        font-size:24px;
    }
    .faq-badge p{
        font-size:13px;
    }
    .faq-content h2{
        font-size:32px;
    }
    .faq-top p{
        font-size:15px;
    }
    .faq-items{
        margin-top:30px;
        gap:14px;
    }
    .faq-question{
        font-size:15px;
        padding:18px 18px;
        gap:14px;
    }
    .faq-question span{
        width:32px;
        height:32px;
        font-size:18px;
    }
    .faq-answer p{
        padding:0 18px 20px;
        font-size:14px;
    }

    .cta-section{
        padding:80px 18px;
    }
    .cta-container{
        gap:36px;
    }
    .cta-subtitle{
        font-size:13px;
        padding:9px 16px;
        margin-bottom:18px;
    }
    .cta-content h2{
        font-size:34px;
        margin-bottom:18px;
    }
    .cta-content p{
        font-size:15px;
        line-height:1.8;
    }
    .cta-buttons{
        flex-direction:column;
        gap:12px;
        margin-top:30px;
    }
    .cta-btn{
        width:100%;
        padding:15px 24px;
        font-size:15px;
        border-radius:16px;
    }
    .cta-card{
        padding:26px;
        border-radius:26px;
    }
    .cta-card-top{
        margin-bottom:22px;
    }
    .cta-card-top h3{
        font-size:24px;
    }
    .cta-features{
        gap:18px;
    }
    .cta-feature{
        gap:14px;
    }
    .cta-feature .icon{
        width:52px;
        height:52px;
        min-width:52px;
        font-size:20px;
        border-radius:16px;
    }
    .cta-feature h4{
        font-size:17px;
        margin-bottom:6px;
    }
    .cta-feature p{
        font-size:14px;
        line-height:1.6;
    }
}

/* =========================
   589px
========================= */
@media(max-width:589px){

    .courses-hero{
        padding:70px 16px;
    }
    .courses-hero-content h1{
        font-size:34px;
    }
    .courses-stat-box{
        padding:18px 16px;
    }
    .courses-stat-box h3{
        font-size:28px;
    }
    .courses-floating-card{
        padding:20px;
        border-radius:22px;
    }
    .floating-course-top h3{
        font-size:22px;
    }
    .floating-course-image img{
        height:180px;
    }
    .course-price-box h4{
        font-size:28px;
    }

    .course-categories-section,
    .course-cards-section,
    .course-details-section,
    .pricing-section,
    .why-course-section,
    .faq-section,
    .cta-section{
        padding:70px 16px;
    }

    .course-cat-header h2,
    .course-cards-header h2,
    .pricing-header h2,
    .why-course-header h2,
    .course-details-content h2{
        font-size:30px;
    }

    .course-cat-card{
        padding:24px 20px;
        border-radius:22px;
    }
    .course-cat-card h3{
        font-size:20px;
    }

    .course-main-image{
        height:210px;
    }
    .course-main-content{
        padding:22px 20px;
    }
    .course-main-content h3{
        font-size:20px;
    }
    .course-price h4{
        font-size:28px;
    }

    .course-details-main-image{
        height:340px;
        border-radius:24px;
    }
    .course-small-card{
        padding:20px;
    }
    .small-course-top h3{
        font-size:20px;
    }
    .timeline-item{
        flex-direction:column;
        padding:18px;
        border-radius:22px;
    }
    .timeline-number{
        width:50px;
        height:50px;
        min-width:50px;
        font-size:18px;
        border-radius:14px;
    }
    .timeline-content h3{
        font-size:19px;
    }

    .pricing-card{
        padding:26px 22px;
        border-radius:24px;
    }
    .pricing-top h3{
        font-size:22px;
    }
    .pricing-price h2{
        font-size:42px;
    }
    .featured-badge{
        right:18px;
    }

    .why-course-image-wrap{
        height:300px;
        border-radius:24px;
    }
    .why-course-card{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
        padding:20px;
    }
    .why-course-icon{
        width:54px;
        height:54px;
        min-width:54px;
        font-size:20px;
    }
    .why-course-content h3{
        font-size:19px;
    }
    .why-course-stats{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }
    .why-stat-item{
        padding:22px 14px;
    }
    .why-stat-item h3{
        font-size:30px;
    }

    .faq-img-wrap{
        height:300px;
    }
    .faq-content h2{
        font-size:28px;
    }
    .faq-question{
        font-size:14px;
        padding:16px 16px;
    }
    .faq-answer p{
        padding:0 16px 18px;
        font-size:13.5px;
    }

    .cta-content h2{
        font-size:30px;
    }
    .cta-card{
        padding:22px;
    }
    .cta-card-top h3{
        font-size:22px;
    }
}

/* =========================
   550px
========================= */
@media(max-width:550px){

    .courses-hero-content h1{
        font-size:30px;
        line-height:1.15;
    }
    .courses-hero-content p{
        font-size:14.5px;
    }
    .courses-stat-box h3{
        font-size:26px;
    }
    .courses-floating-card{
        padding:18px;
    }
    .floating-course-top h3{
        font-size:20px;
    }
    .floating-course-image img{
        height:170px;
    }
    .course-price-box{
        padding:18px;
    }
    .course-price-box h4{
        font-size:26px;
    }

    .course-cat-header h2,
    .course-cards-header h2,
    .pricing-header h2,
    .why-course-header h2,
    .course-details-content h2{
        font-size:28px;
    }

    .course-cat-card h3{
        font-size:19px;
    }
    .course-cat-icon{
        width:58px;
        height:58px;
        font-size:22px;
        border-radius:18px;
    }

    .course-main-image{
        height:200px;
    }
    .course-main-content h3{
        font-size:19px;
    }

    .course-details-main-image{
        height:300px;
    }
    .course-floating-info h4{
        font-size:16px;
    }

    .pricing-card{
        padding:24px 20px;
    }
    .pricing-top h3{
        font-size:20px;
    }
    .pricing-price h2{
        font-size:38px;
    }

    .why-course-image-wrap{
        height:260px;
    }
    .why-course-stats{
        grid-template-columns:1fr;
    }
    .why-stat-item h3{
        font-size:32px;
    }

    .faq-img-wrap{
        height:260px;
    }
    .faq-content h2{
        font-size:26px;
    }

    .cta-content h2{
        font-size:26px;
    }
    .cta-feature h4{
        font-size:16px;
    }
    .cta-feature p{
        font-size:13px;
    }
}

/* =========================
   441px
========================= */
@media(max-width:441px){

    .courses-hero{
        padding:60px 14px;
    }
    .courses-subtitle{
        font-size:12px;
        padding:8px 14px;
    }
    .courses-hero-content h1{
        font-size:26px;
    }
    .courses-hero-content p{
        font-size:14px;
    }
    .courses-btn{
        padding:13px 20px;
        font-size:14px;
    }
    .courses-stat-box{
        padding:16px 14px;
        border-radius:18px;
    }
    .courses-stat-box h3{
        font-size:24px;
    }
    .courses-stat-box span{
        font-size:13px;
    }
    .courses-floating-card{
        padding:16px;
        border-radius:20px;
    }
    .floating-course-top h3{
        font-size:18px;
        line-height:1.25;
    }
    .floating-course-image img{
        height:150px;
    }
    .course-feature-item{
        padding:12px;
    }
    .course-feature-item span{
        font-size:13px;
    }
    .course-price-box h4{
        font-size:24px;
    }
    .course-price-box a{
        padding:12px 18px;
        font-size:13px;
    }

    .course-categories-section,
    .course-cards-section,
    .course-details-section,
    .pricing-section,
    .why-course-section,
    .faq-section,
    .cta-section{
        padding:60px 14px;
    }
    .course-cat-header h2,
    .course-cards-header h2,
    .pricing-header h2,
    .why-course-header h2,
    .course-details-content h2{
        font-size:24px;
    }
    .course-cat-header p,
    .course-cards-header p,
    .pricing-header p,
    .why-course-header p{
        font-size:14px;
    }
    .course-cat-subtitle,
    .course-cards-subtitle,
    .course-details-subtitle,
    .pricing-subtitle,
    .why-course-subtitle{
        font-size:12px;
        padding:8px 14px;
    }

    .course-cat-card{
        padding:20px 18px;
        border-radius:20px;
    }
    .course-cat-icon{
        width:52px;
        height:52px;
        font-size:20px;
        border-radius:16px;
        margin-bottom:16px;
    }
    .course-cat-card h3{
        font-size:18px;
    }
    .course-cat-card p{
        font-size:13.5px;
    }
    .cat-feature{
        padding:10px 12px;
    }
    .cat-feature span{
        font-size:13px;
    }

    .course-main-image{
        height:180px;
    }
    .course-badge{
        top:14px;
        left:14px;
        padding:7px 12px;
        font-size:11px;
    }
    .course-main-content{
        padding:20px 18px;
    }
    .course-main-content h3{
        font-size:18px;
    }
    .course-main-content p{
        font-size:13.5px;
    }
    .main-feature{
        padding:11px 12px;
    }
    .main-feature span{
        font-size:13px;
    }
    .course-price h4{
        font-size:26px;
    }
    .course-btn-main{
        padding:13px 18px;
        font-size:13.5px;
    }

    .course-details-main-image{
        height:260px;
        border-radius:22px;
    }
    .course-floating-info{
        left:14px;
        bottom:14px;
        padding:10px 12px;
        gap:10px;
    }
    .course-float-icon{
        width:36px;
        height:36px;
        font-size:18px;
    }
    .course-floating-info h4{
        font-size:15px;
    }
    .course-floating-info p{
        font-size:12px;
    }
    .course-small-card{
        padding:18px;
        border-radius:20px;
    }
    .small-course-top h3{
        font-size:18px;
    }
    .small-course-top span{
        font-size:13px;
    }
    .small-course-item{
        padding:11px 12px;
    }
    .small-course-item span{
        font-size:13px;
    }
    .timeline-item{
        padding:16px;
        border-radius:20px;
    }
    .timeline-number{
        width:46px;
        height:46px;
        min-width:46px;
        font-size:16px;
        border-radius:12px;
    }
    .timeline-content h3{
        font-size:17px;
    }
    .timeline-content p{
        font-size:13.5px;
    }
    .course-details-btn{
        padding:14px 20px;
        font-size:14px;
    }

    .pricing-card{
        padding:22px 18px;
        border-radius:22px;
    }
    .pricing-top h3{
        font-size:18px;
    }
    .pricing-price h2{
        font-size:34px;
    }
    .pricing-feature-item{
        padding:11px 12px;
    }
    .pricing-feature-item span{
        font-size:13px;
    }
    .pricing-btn{
        padding:13px 16px;
        font-size:14px;
    }

    .why-course-image-wrap{
        height:230px;
        border-radius:22px;
    }
    .why-floating-box{
        left:14px;
        bottom:14px;
        padding:12px;
        gap:12px;
        border-radius:16px;
    }
    .why-floating-icon{
        width:46px;
        height:46px;
        font-size:18px;
        border-radius:14px;
    }
    .why-floating-box h4{
        font-size:17px;
    }
    .why-floating-box p{
        font-size:12px;
    }
    .why-course-card{
        padding:18px;
        border-radius:20px;
    }
    .why-course-icon{
        width:48px;
        height:48px;
        min-width:48px;
        font-size:18px;
        border-radius:14px;
    }
    .why-course-content h3{
        font-size:17px;
    }
    .why-course-content p{
        font-size:13.5px;
    }
    .why-stat-item{
        padding:20px 14px;
        border-radius:18px;
    }
    .why-stat-item h3{
        font-size:28px;
    }
    .why-stat-item p{
        font-size:13px;
    }

    .faq-img-wrap{
        height:230px;
        border-radius:20px;
    }
    .faq-badge{
        left:14px;
        bottom:14px;
        padding:12px 14px;
        border-radius:16px;
    }
    .faq-badge span{
        font-size:20px;
    }
    .faq-badge p{
        font-size:12px;
    }
    .faq-content h2{
        font-size:24px;
    }
    .faq-top p{
        font-size:14px;
    }
    .faq-question{
        font-size:13.5px;
        padding:14px 14px;
    }
    .faq-question span{
        width:28px;
        height:28px;
        font-size:16px;
    }
    .faq-answer p{
        padding:0 14px 16px;
        font-size:13px;
    }

    .cta-content h2{
        font-size:24px;
    }
    .cta-content p{
        font-size:14px;
    }
    .cta-btn{
        padding:13px 20px;
        font-size:14px;
    }
    .cta-card{
        padding:20px;
        border-radius:22px;
    }
    .cta-card-top h3{
        font-size:20px;
    }
    .cta-feature .icon{
        width:46px;
        height:46px;
        min-width:46px;
        font-size:18px;
        border-radius:14px;
    }
    .cta-feature h4{
        font-size:15px;
    }
    .cta-feature p{
        font-size:12.5px;
    }
}

/* =========================
   390px
========================= */
@media(max-width:390px){

    .courses-hero-content h1{
        font-size:24px;
    }
    .courses-stat-box h3{
        font-size:22px;
    }
    .floating-course-top h3{
        font-size:17px;
    }
    .floating-course-image img{
        height:140px;
    }
    .course-price-box h4{
        font-size:22px;
    }

    .course-cat-header h2,
    .course-cards-header h2,
    .pricing-header h2,
    .why-course-header h2,
    .course-details-content h2{
        font-size:22px;
    }
    .course-cat-card h3{
        font-size:17px;
    }
    .course-main-image{
        height:170px;
    }
    .course-main-content h3{
        font-size:17px;
    }
    .course-price h4{
        font-size:24px;
    }

    .course-details-main-image{
        height:230px;
    }
    .small-course-top h3{
        font-size:17px;
    }
    .timeline-content h3{
        font-size:16px;
    }

    .pricing-card{
        padding:20px 16px;
    }
    .pricing-top h3{
        font-size:17px;
    }
    .pricing-price h2{
        font-size:30px;
    }

    .why-course-image-wrap{
        height:210px;
    }
    .why-course-content h3{
        font-size:16px;
    }
    .why-stat-item h3{
        font-size:26px;
    }

    .faq-img-wrap{
        height:210px;
    }
    .faq-content h2{
        font-size:22px;
    }

    .cta-content h2{
        font-size:22px;
    }
    .cta-card-top h3{
        font-size:18px;
    }
}

/* =========================
   320px
========================= */
@media(max-width:320px){

    .courses-hero,
    .course-categories-section,
    .course-cards-section,
    .course-details-section,
    .pricing-section,
    .why-course-section,
    .faq-section,
    .cta-section{
        padding:50px 12px;
    }
    .courses-hero-content h1{
        font-size:22px;
    }
    .courses-hero-content p{
        font-size:13.5px;
    }
    .courses-btn,
    .cta-btn,
    .course-btn-main,
    .course-details-btn,
    .pricing-btn{
        padding:12px 16px;
        font-size:13px;
    }
    .courses-stat-box{
        padding:14px 12px;
    }
    .courses-stat-box h3{
        font-size:20px;
    }
    .courses-floating-card{
        padding:14px;
        border-radius:18px;
    }
    .floating-course-top h3{
        font-size:16px;
    }
    .floating-course-image img{
        height:130px;
    }
    .course-price-box{
        padding:14px;
    }
    .course-price-box h4{
        font-size:20px;
    }

    .course-cat-header h2,
    .course-cards-header h2,
    .pricing-header h2,
    .why-course-header h2,
    .course-details-content h2{
        font-size:20px;
    }

    .course-cat-card{
        padding:18px 14px;
    }
    .course-cat-icon{
        width:46px;
        height:46px;
        font-size:18px;
        border-radius:14px;
    }
    .course-cat-card h3{
        font-size:16px;
    }
    .course-cat-card p{
        font-size:13px;
    }
    .cat-feature span{
        font-size:12.5px;
    }

    .course-main-image{
        height:160px;
    }
    .course-main-content{
        padding:18px 14px;
    }
    .course-main-content h3{
        font-size:16px;
    }
    .course-main-content p{
        font-size:13px;
    }
    .main-feature span{
        font-size:12.5px;
    }
    .course-price h4{
        font-size:22px;
    }

    .course-details-main-image{
        height:200px;
    }
    .course-small-card{
        padding:16px;
    }
    .small-course-top h3{
        font-size:16px;
    }
    .small-course-item span{
        font-size:12.5px;
    }
    .timeline-item{
        padding:14px;
    }
    .timeline-number{
        width:42px;
        height:42px;
        min-width:42px;
        font-size:14px;
    }
    .timeline-content h3{
        font-size:15px;
    }
    .timeline-content p{
        font-size:13px;
    }

    .pricing-card{
        padding:18px 14px;
    }
    .pricing-top h3{
        font-size:16px;
    }
    .pricing-top p{
        font-size:13px;
    }
    .pricing-price h2{
        font-size:28px;
    }
    .pricing-feature-item span{
        font-size:12.5px;
    }
    .featured-badge{
        right:14px;
        padding:7px 14px;
        font-size:11px;
    }

    .why-course-image-wrap{
        height:190px;
    }
    .why-floating-box{
        padding:10px;
        gap:10px;
    }
    .why-floating-icon{
        width:40px;
        height:40px;
        font-size:16px;
    }
    .why-floating-box h4{
        font-size:15px;
    }
    .why-floating-box p{
        font-size:11.5px;
    }
    .why-course-card{
        padding:16px;
    }
    .why-course-icon{
        width:42px;
        height:42px;
        min-width:42px;
        font-size:16px;
    }
    .why-course-content h3{
        font-size:15px;
    }
    .why-course-content p{
        font-size:12.5px;
    }
    .why-stat-item{
        padding:18px 12px;
    }
    .why-stat-item h3{
        font-size:24px;
    }
    .why-stat-item p{
        font-size:12.5px;
    }

    .faq-img-wrap{
        height:190px;
    }
    .faq-badge{
        padding:10px 12px;
    }
    .faq-badge span{
        font-size:18px;
    }
    .faq-content h2{
        font-size:20px;
    }
    .faq-top p{
        font-size:13px;
    }
    .faq-question{
        font-size:13px;
        padding:12px 12px;
        gap:10px;
    }
    .faq-question span{
        width:26px;
        height:26px;
        font-size:14px;
    }
    .faq-answer p{
        padding:0 12px 14px;
        font-size:12.5px;
    }

    .cta-content h2{
        font-size:20px;
    }
    .cta-content p{
        font-size:13px;
    }
    .cta-card{
        padding:16px;
    }
    .cta-card-top h3{
        font-size:17px;
    }
    .cta-feature .icon{
        width:40px;
        height:40px;
        min-width:40px;
        font-size:16px;
    }
    .cta-feature h4{
        font-size:14px;
    }
    .cta-feature p{
        font-size:12px;
    }
}


/* ===================================================================
   BOOK LESSON PAGE — FULL RESPONSIVE OVERRIDES
   Hero / Course Selection / Lesson Schedule / Student Information /
   Payment Option / Booking Confirmation / Premium Booking FAQ.
   Preserves the premium colors, gradients, glassmorphism, glow,
   shadows, hover effects, and animations.
   Breakpoints: 1440 / 1200 / 1100 / 992 / 768 / 589 / 550 / 441 / 390 / 320
=================================================================== */

/* Universal safety inside book-lesson sections */
.booking-hero-section,
.course-selection-section,
.lesson-schedule-section,
.student-info-section,
.payment-option-section,
.booking-confirmation-section,
.premium-booking-faq{
    overflow-x:hidden;
}

.booking-hero-section img,
.course-selection-section img,
.lesson-schedule-section img,
.student-info-section img,
.payment-option-section img,
.booking-confirmation-section img,
.premium-booking-faq img{
    max-width:100%;
}

/* Make form inputs/selects/textareas always fit inside their card */
.student-form-group input,
.student-form-group select,
.student-form-group textarea,
.payment-group input{
    box-sizing:border-box;
    max-width:100%;
}

/* Native select arrow control — keep it readable on every device */
.student-form-group select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    padding-right:46px;
    background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23032E49' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 20px center;
    background-size:12px 8px;
}

/* =========================
   1440px — Large desktop polish
========================= */
@media(max-width:1440px){

    .booking-hero-section{
        padding:110px 20px;
    }
    .booking-hero-content h1{
        font-size:62px;
    }
    .booking-hero-content p{
        font-size:17px;
    }
    .booking-stat-item h3{
        font-size:40px;
    }
    .booking-card-top h3{
        font-size:36px;
    }
    .booking-step-number{
        width:58px;
        height:58px;
        min-width:58px;
        font-size:22px;
        border-radius:18px;
    }
    .booking-step-content h4{
        font-size:22px;
    }

    .course-selection-header h2,
    .schedule-header h2,
    .student-info-header h2,
    .payment-header h2,
    .premium-faq-header h2{
        font-size:52px;
    }
    .confirmation-content h2{
        font-size:50px;
    }

    .selection-content h3,
    .calendar-top h3,
    .schedule-info-card h3,
    .schedule-summary-top h4,
    .booking-summary-top h3,
    .student-form-top h3,
    .payment-card-top h3,
    .payment-trust-card h4,
    .premium-faq-support-top h3{
        font-size:32px;
    }

    .schedule-time-item h4{
        font-size:24px;
    }
    .calendar-date{
        height:60px;
        font-size:16px;
    }
}

/* =========================
   1200px — Laptop
========================= */
@media(max-width:1200px){

    .booking-hero-section{
        padding:100px 20px;
    }
    .booking-hero-wrapper{
        gap:50px;
    }
    .booking-hero-content h1{
        font-size:54px;
    }
    .booking-hero-content p{
        font-size:16px;
        line-height:1.85;
    }
    .booking-hero-stats{
        gap:16px;
        margin-top:45px;
    }
    .booking-stat-item{
        min-width:160px;
        padding:24px 20px;
    }
    .booking-stat-item h3{
        font-size:36px;
    }
    .booking-hero-card{
        padding:30px;
        border-radius:32px;
    }
    .booking-card-top h3{
        font-size:32px;
    }
    .booking-step-item{
        padding:18px;
        gap:14px;
        border-radius:20px;
    }
    .booking-step-content h4{
        font-size:20px;
    }
    .booking-step-content p{
        font-size:14px;
    }

    .course-selection-section,
    .lesson-schedule-section,
    .student-info-section,
    .payment-option-section,
    .booking-confirmation-section,
    .premium-booking-faq{
        padding:100px 20px;
    }
    .course-selection-header,
    .schedule-header,
    .student-info-header,
    .payment-header,
    .premium-faq-header{
        margin-bottom:60px;
    }
    .course-selection-header h2,
    .schedule-header h2,
    .student-info-header h2,
    .payment-header h2,
    .premium-faq-header h2{
        font-size:44px;
    }
    .course-selection-header p,
    .schedule-header p,
    .student-info-header p,
    .payment-header p,
    .premium-faq-header p{
        font-size:17px;
    }

    .course-selection-grid{
        grid-template-columns:repeat(2,1fr);
        gap:26px;
    }
    .selection-card{
        padding:30px 26px;
        border-radius:30px;
    }
    .selection-icon{
        width:68px;
        height:68px;
        font-size:26px;
        border-radius:20px;
    }
    .selection-content h3{
        font-size:26px;
        margin-bottom:14px;
    }
    .selection-content p{
        font-size:15px;
        line-height:1.8;
    }
    .selection-feature-item{
        padding:13px 14px;
        gap:12px;
    }
    .selection-feature-item span{
        font-size:14px;
    }
    .selection-price h4{
        font-size:36px;
    }
    .selection-btn{
        padding:14px 22px;
        font-size:14px;
    }

    .schedule-wrapper{
        grid-template-columns:1fr;
        gap:32px;
    }
    .schedule-calendar-card,
    .schedule-info-card,
    .schedule-summary-card{
        padding:30px;
        border-radius:30px;
    }
    .calendar-top h3{
        font-size:26px;
    }
    .calendar-date{
        height:58px;
        font-size:16px;
        border-radius:16px;
    }
    .calendar-days,
    .calendar-dates{
        gap:10px;
    }
    .schedule-time-grid{
        gap:16px;
    }
    .schedule-time-item{
        padding:22px;
        border-radius:22px;
    }
    .schedule-time-item h4{
        font-size:24px;
    }
    .schedule-info-card h3{
        font-size:30px;
    }
    .schedule-summary-icon{
        width:64px;
        height:64px;
        font-size:24px;
        border-radius:20px;
    }
    .schedule-summary-top h4{
        font-size:24px;
    }

    .student-info-wrapper{
        grid-template-columns:1fr;
        gap:32px;
    }
    .student-form-card,
    .student-side-card,
    .student-contact-card{
        padding:32px;
        border-radius:30px;
    }
    .student-form-top h3,
    .student-side-card h3,
    .student-contact-card h4{
        font-size:30px;
    }
    .student-side-icon{
        width:72px;
        height:72px;
        font-size:28px;
        border-radius:20px;
        margin-bottom:22px;
    }
    .student-side-features{
        gap:14px;
        margin-top:24px;
    }
    .student-side-item,
    .student-contact-item{
        padding:15px 18px;
    }

    .payment-wrapper{
        grid-template-columns:1fr;
        gap:32px;
    }
    .payment-card,
    .booking-summary-card,
    .payment-trust-card{
        padding:32px;
        border-radius:30px;
    }
    .payment-card-top h3{
        font-size:30px;
    }
    .payment-method{
        padding:18px;
        gap:14px;
        border-radius:22px;
    }
    .payment-method-icon{
        width:60px;
        height:60px;
        font-size:24px;
        border-radius:18px;
    }
    .payment-method-left h4{
        font-size:20px;
    }
    .payment-method-left p{
        font-size:14px;
    }
    .payment-check{
        width:36px;
        height:36px;
        font-size:14px;
    }
    .booking-summary-top h3{
        font-size:26px;
    }
    .booking-total h4{
        font-size:36px;
    }
    .payment-trust-icon{
        width:78px;
        height:78px;
        font-size:30px;
        border-radius:24px;
    }
    .payment-trust-card h4{
        font-size:26px;
    }

    .confirmation-card{
        padding:48px;
        border-radius:36px;
    }
    .confirmation-success-icon{
        width:110px;
        height:110px;
        font-size:48px;
        border-radius:30px;
        margin-bottom:32px;
    }
    .confirmation-content h2{
        font-size:46px;
    }
    .confirmation-content p{
        font-size:17px;
    }
    .confirmation-next-steps{
        padding:32px;
        margin-top:48px;
        border-radius:30px;
    }
    .confirmation-next-steps h3{
        font-size:30px;
        margin-bottom:26px;
    }
    .confirmation-step-number{
        width:60px;
        height:60px;
        min-width:60px;
        font-size:22px;
        border-radius:18px;
    }
    .confirmation-step-item h4{
        font-size:20px;
    }
    .confirmation-info-item{
        padding:20px;
        border-radius:22px;
    }
    .confirmation-info-item strong{
        font-size:18px;
    }

    .premium-faq-wrapper{
        grid-template-columns:1fr;
        gap:32px;
    }
    .premium-faq-support-card{
        position:relative;
        top:auto;
        padding:32px;
        border-radius:30px;
    }
    .premium-faq-support-top h3{
        font-size:30px;
    }
    .premium-support-icon{
        width:80px;
        height:80px;
        font-size:30px;
        border-radius:24px;
        margin-bottom:24px;
    }
    .premium-faq-question{
        padding:26px 24px;
    }
    .premium-faq-question span{
        font-size:20px;
    }
    .premium-faq-icon{
        width:50px;
        height:50px;
        min-width:50px;
        border-radius:14px;
    }
    .premium-faq-icon i{
        font-size:18px;
    }
}

/* =========================
   1100px — Narrow laptop / large tablet
========================= */
@media(max-width:1100px){

    .booking-hero-wrapper{
        grid-template-columns:1fr;
        gap:50px;
    }
    .booking-hero-card{
        max-width:680px;
    }
    .booking-hero-content h1{
        font-size:48px;
    }
}

/* =========================
   992px — Tablet
========================= */
@media(max-width:992px){

    .booking-hero-section{
        min-height:auto;
        padding:90px 20px;
    }
    .booking-hero-content h1{
        font-size:44px;
    }
    .booking-stat-item{
        min-width:150px;
        padding:22px 18px;
    }
    .booking-stat-item h3{
        font-size:32px;
    }
    .booking-hero-card{
        padding:28px;
        border-radius:30px;
    }
    .booking-card-top h3{
        font-size:30px;
    }

    .course-selection-section,
    .lesson-schedule-section,
    .student-info-section,
    .payment-option-section,
    .booking-confirmation-section,
    .premium-booking-faq{
        padding:90px 20px;
    }
    .course-selection-header,
    .schedule-header,
    .student-info-header,
    .payment-header,
    .premium-faq-header{
        margin-bottom:50px;
    }
    .course-selection-header h2,
    .schedule-header h2,
    .student-info-header h2,
    .payment-header h2,
    .premium-faq-header h2{
        font-size:40px;
    }
    .course-selection-header p,
    .schedule-header p,
    .student-info-header p,
    .payment-header p,
    .premium-faq-header p{
        font-size:16px;
        line-height:1.8;
    }

    .course-selection-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .schedule-time-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .calendar-date{
        height:54px;
        font-size:15px;
    }

    .student-form-row{
        gap:18px;
    }

    .payment-method{
        padding:16px;
    }
    .payment-method-icon{
        width:56px;
        height:56px;
        font-size:22px;
    }
    .payment-method-left h4{
        font-size:18px;
        margin-bottom:6px;
    }

    .confirmation-card{
        padding:42px 36px;
    }
    .confirmation-content h2{
        font-size:40px;
    }
    .confirmation-booking-info{
        grid-template-columns:1fr;
    }
}

/* =========================
   768px — Large phone / small tablet
========================= */
@media(max-width:768px){

    .booking-hero-section{
        padding:80px 18px;
    }
    .booking-hero-wrapper{
        gap:40px;
    }
    .booking-hero-subtitle{
        font-size:13px;
        padding:10px 18px;
        margin-bottom:22px;
    }
    .booking-hero-content h1{
        font-size:38px;
        margin-bottom:22px;
    }
    .booking-hero-content p{
        font-size:15px;
        line-height:1.8;
    }
    .booking-hero-buttons{
        flex-direction:column;
        gap:14px;
        margin-top:30px;
    }
    .booking-primary-btn,
    .booking-outline-btn{
        width:100%;
        padding:15px 24px;
        font-size:15px;
        border-radius:16px;
    }
    .booking-hero-stats{
        gap:12px;
        margin-top:36px;
    }
    .booking-stat-item{
        flex:1 1 100%;
        min-width:0;
        width:100%;
        padding:20px 18px;
        border-radius:20px;
    }
    .booking-stat-item h3{
        font-size:30px;
    }
    .booking-stat-item p{
        font-size:14px;
    }
    .booking-hero-card{
        padding:24px;
        border-radius:26px;
    }
    .booking-card-badge{
        font-size:12px;
        padding:7px 14px;
        margin-bottom:16px;
    }
    .booking-card-top{
        margin-bottom:26px;
    }
    .booking-card-top h3{
        font-size:26px;
        margin-bottom:14px;
    }
    .booking-card-top p{
        font-size:14.5px;
        line-height:1.8;
    }
    .booking-steps{
        gap:14px;
    }
    .booking-step-item{
        flex-direction:row;
        align-items:flex-start;
        gap:14px;
        padding:16px;
        border-radius:18px;
    }
    .booking-step-number{
        width:50px;
        height:50px;
        min-width:50px;
        font-size:20px;
        border-radius:14px;
    }
    .booking-step-content h4{
        font-size:18px;
        margin-bottom:6px;
    }
    .booking-step-content p{
        font-size:13.5px;
        line-height:1.65;
    }
    .booking-card-btn{
        margin-top:26px;
        padding:15px 18px;
        font-size:15px;
        border-radius:16px;
    }

    .course-selection-section,
    .lesson-schedule-section,
    .student-info-section,
    .payment-option-section,
    .booking-confirmation-section,
    .premium-booking-faq{
        padding:80px 18px;
    }
    .course-selection-subtitle,
    .schedule-subtitle,
    .student-info-subtitle,
    .payment-subtitle,
    .premium-faq-subtitle{
        font-size:13px;
        padding:10px 18px;
        margin-bottom:18px;
    }
    .course-selection-header,
    .schedule-header,
    .student-info-header,
    .payment-header,
    .premium-faq-header{
        margin-bottom:40px;
    }
    .course-selection-header h2,
    .schedule-header h2,
    .student-info-header h2,
    .payment-header h2,
    .premium-faq-header h2{
        font-size:32px;
        margin-bottom:18px;
    }
    .course-selection-header p,
    .schedule-header p,
    .student-info-header p,
    .payment-header p,
    .premium-faq-header p{
        font-size:15px;
    }

    .course-selection-grid{
        grid-template-columns:1fr;
        gap:22px;
    }
    .selection-card{
        padding:26px 22px;
        border-radius:26px;
    }
    .selection-top{
        margin-bottom:24px;
    }
    .selection-badge{
        font-size:12px;
        padding:7px 14px;
    }
    .selection-icon{
        width:60px;
        height:60px;
        font-size:24px;
        border-radius:18px;
    }
    .selection-content h3{
        font-size:22px;
        margin-bottom:12px;
    }
    .selection-content p{
        font-size:14.5px;
        line-height:1.75;
    }
    .selection-features{
        margin-top:22px;
        gap:12px;
    }
    .selection-footer{
        flex-direction:column;
        align-items:stretch;
        gap:16px;
        margin-top:26px;
    }
    .selection-price span{
        font-size:13px;
    }
    .selection-price h4{
        font-size:32px;
    }
    .selection-btn{
        width:100%;
        text-align:center;
        padding:14px 22px;
        font-size:14px;
    }

    .schedule-wrapper{
        gap:24px;
    }
    .schedule-calendar-card,
    .schedule-info-card,
    .schedule-summary-card{
        padding:24px 20px;
        border-radius:26px;
    }
    .calendar-top{
        flex-direction:column;
        gap:8px;
        align-items:flex-start;
        margin-bottom:24px;
    }
    .calendar-top h3{
        font-size:22px;
    }
    .calendar-top span{
        font-size:14px;
    }
    .calendar-days,
    .calendar-dates{
        gap:8px;
    }
    .calendar-days span{
        font-size:12px;
    }
    .calendar-date{
        height:48px;
        font-size:14px;
        border-radius:14px;
    }
    .schedule-info-badge{
        font-size:12px;
        padding:8px 14px;
        margin-bottom:16px;
    }
    .schedule-info-card h3{
        font-size:24px;
    }
    .schedule-info-card p{
        font-size:14.5px;
        line-height:1.75;
    }
    .schedule-time-grid{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }
    .schedule-time-item{
        padding:18px 16px;
        border-radius:20px;
    }
    .time-period{
        font-size:11px;
        padding:6px 12px;
        margin-bottom:14px;
    }
    .schedule-time-item h4{
        font-size:22px;
        margin-bottom:6px;
    }
    .schedule-time-item p{
        font-size:13px;
    }
    .schedule-summary-top{
        flex-direction:row;
        align-items:flex-start;
        gap:14px;
        margin-bottom:22px;
    }
    .schedule-summary-icon{
        width:54px;
        height:54px;
        font-size:22px;
        border-radius:16px;
    }
    .schedule-summary-top h4{
        font-size:20px;
        margin-bottom:4px;
    }
    .schedule-summary-top p{
        font-size:14px;
    }
    .schedule-summary-details{
        gap:12px;
    }
    .schedule-summary-item{
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
        gap:8px;
        padding:14px 16px;
        border-radius:16px;
    }
    .schedule-summary-item span{
        font-size:13.5px;
    }
    .schedule-summary-item strong{
        font-size:14px;
    }
    .schedule-btn{
        margin-top:26px;
        padding:15px 18px;
        font-size:15px;
        border-radius:16px;
    }

    .student-form-card,
    .student-side-card,
    .student-contact-card{
        padding:26px 22px;
        border-radius:26px;
    }
    .student-form-top{
        margin-bottom:24px;
    }
    .student-form-badge{
        font-size:12px;
        padding:8px 14px;
        margin-bottom:16px;
    }
    .student-form-top h3{
        font-size:24px;
        margin-bottom:10px;
    }
    .student-form-top p{
        font-size:14.5px;
        line-height:1.75;
    }
    .student-form{
        gap:18px;
    }
    .student-form-row{
        grid-template-columns:1fr;
        gap:18px;
    }
    .student-form-group label{
        font-size:14px;
        margin-bottom:10px;
    }
    .student-form-group input,
    .student-form-group select,
    .student-form-group textarea{
        padding:14px 16px;
        font-size:14.5px;
        border-radius:14px;
    }
    .student-form-group select{
        padding-right:42px;
        background-position:right 16px center;
    }
    .student-form-group textarea{
        min-height:130px;
    }
    .student-checkbox{
        gap:10px;
    }
    .student-checkbox label{
        font-size:14px;
    }
    .student-form-btn{
        padding:16px;
        font-size:15px;
        border-radius:16px;
    }
    .student-side-icon{
        width:60px;
        height:60px;
        font-size:24px;
        border-radius:18px;
        margin-bottom:18px;
    }
    .student-side-card h3,
    .student-contact-card h4{
        font-size:24px;
        margin-bottom:14px;
    }
    .student-side-card p,
    .student-contact-card p{
        font-size:14.5px;
        line-height:1.75;
    }
    .student-side-features{
        gap:12px;
        margin-top:22px;
    }
    .student-side-item,
    .student-contact-item{
        padding:14px 16px;
        gap:12px;
        border-radius:14px;
    }
    .student-side-item span,
    .student-contact-item span{
        font-size:14px;
    }
    .student-contact-item{
        margin-top:14px;
    }

    .payment-card,
    .booking-summary-card,
    .payment-trust-card{
        padding:26px 22px;
        border-radius:26px;
    }
    .payment-card-top{
        margin-bottom:26px;
    }
    .payment-badge{
        font-size:12px;
        padding:8px 14px;
        margin-bottom:16px;
    }
    .payment-card-top h3{
        font-size:24px;
        margin-bottom:10px;
    }
    .payment-card-top p{
        font-size:14.5px;
        line-height:1.75;
    }
    .payment-methods{
        gap:14px;
        margin-bottom:26px;
    }
    .payment-method{
        flex-direction:row;
        align-items:center;
        gap:12px;
        padding:14px;
        border-radius:18px;
    }
    .payment-method-left{
        flex-direction:row;
        align-items:center;
        gap:14px;
    }
    .payment-method-icon{
        width:50px;
        height:50px;
        font-size:20px;
        border-radius:14px;
    }
    .payment-method-left h4{
        font-size:16px;
        margin-bottom:4px;
    }
    .payment-method-left p{
        font-size:13px;
        line-height:1.5;
    }
    .payment-check{
        width:30px;
        height:30px;
        font-size:12px;
    }
    .payment-form{
        gap:16px;
    }
    .payment-form-row{
        gap:14px;
    }
    .two-column{
        grid-template-columns:1fr;
    }
    .payment-group label{
        font-size:14px;
        margin-bottom:10px;
    }
    .payment-group input{
        padding:14px 16px;
        font-size:14.5px;
        border-radius:14px;
    }
    .booking-summary-top{
        flex-direction:row;
        align-items:flex-start;
        gap:14px;
        margin-bottom:22px;
    }
    .booking-summary-icon{
        width:54px;
        height:54px;
        font-size:22px;
        border-radius:16px;
    }
    .booking-summary-top h3{
        font-size:22px;
        margin-bottom:4px;
    }
    .booking-summary-top p{
        font-size:14px;
    }
    .booking-summary-details{
        gap:12px;
    }
    .booking-summary-item{
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
        gap:8px;
        padding:14px 16px;
        border-radius:16px;
    }
    .booking-summary-item span{
        font-size:13.5px;
    }
    .booking-summary-item strong{
        font-size:14px;
    }
    .booking-total{
        flex-direction:row;
        flex-wrap:wrap;
        gap:10px;
        margin-top:22px;
        padding:18px;
        border-radius:18px;
    }
    .booking-total span{
        font-size:14px;
    }
    .booking-total h4{
        font-size:30px;
    }
    .confirm-booking-btn{
        margin-top:26px;
        padding:15px 18px;
        font-size:15px;
        border-radius:16px;
    }
    .payment-trust-icon{
        width:64px;
        height:64px;
        font-size:24px;
        border-radius:20px;
        margin-bottom:20px;
    }
    .payment-trust-card h4{
        font-size:22px;
        margin-bottom:12px;
    }
    .payment-trust-card p{
        font-size:14.5px;
        line-height:1.75;
    }

    .confirmation-card{
        padding:32px 22px;
        border-radius:30px;
    }
    .confirmation-success-icon{
        width:90px;
        height:90px;
        font-size:40px;
        border-radius:24px;
        margin-bottom:24px;
    }
    .confirmation-badge{
        font-size:13px;
        padding:10px 18px;
        margin-bottom:18px;
    }
    .confirmation-content h2{
        font-size:30px;
        margin-bottom:16px;
    }
    .confirmation-content p{
        font-size:15px;
        line-height:1.8;
    }
    .confirmation-booking-info{
        margin-top:36px;
        gap:14px;
    }
    .confirmation-info-item{
        padding:18px;
        border-radius:18px;
    }
    .confirmation-info-item span{
        font-size:13px;
        margin-bottom:8px;
    }
    .confirmation-info-item strong{
        font-size:16px;
    }
    .confirmation-next-steps{
        margin-top:36px;
        padding:24px 20px;
        border-radius:24px;
    }
    .confirmation-next-steps h3{
        font-size:24px;
        margin-bottom:20px;
    }
    .confirmation-step-item{
        flex-direction:row;
        align-items:flex-start;
        gap:14px;
        padding:18px;
        margin-bottom:14px;
        border-radius:18px;
    }
    .confirmation-step-number{
        width:50px;
        height:50px;
        min-width:50px;
        font-size:18px;
        border-radius:14px;
    }
    .confirmation-step-item h4{
        font-size:17px;
        margin-bottom:6px;
    }
    .confirmation-step-item p{
        font-size:14px;
        line-height:1.7;
    }
    .confirmation-buttons{
        flex-direction:column;
        gap:12px;
        margin-top:32px;
    }
    .confirmation-primary-btn,
    .confirmation-outline-btn{
        width:100%;
        padding:15px 24px;
        font-size:15px;
        border-radius:16px;
    }

    .premium-faq-left{
        gap:14px;
    }
    .premium-faq-item{
        border-radius:24px;
    }
    .premium-faq-question{
        gap:14px;
        padding:20px;
    }
    .premium-faq-question span{
        font-size:16px;
        line-height:1.45;
    }
    .premium-faq-icon{
        width:42px;
        height:42px;
        min-width:42px;
        border-radius:12px;
    }
    .premium-faq-icon i{
        font-size:16px;
    }
    .premium-faq-answer{
        padding:0 20px;
    }
    .premium-faq-item.active-faq .premium-faq-answer{
        padding:0 20px 22px;
    }
    .premium-faq-answer p{
        font-size:14.5px;
        line-height:1.75;
    }
    .premium-faq-support-card{
        padding:26px 22px;
        border-radius:26px;
    }
    .premium-support-icon{
        width:60px;
        height:60px;
        font-size:24px;
        border-radius:18px;
        margin-bottom:18px;
    }
    .premium-faq-support-top{
        margin-bottom:26px;
    }
    .premium-faq-support-top h3{
        font-size:24px;
        margin-bottom:12px;
    }
    .premium-faq-support-top p{
        font-size:14.5px;
        line-height:1.75;
    }
    .premium-support-contact{
        gap:14px;
    }
    .premium-support-item{
        gap:14px;
        padding:14px 16px;
        border-radius:18px;
    }
    .premium-support-item i{
        width:46px;
        height:46px;
        font-size:16px;
        border-radius:14px;
    }
    .premium-support-item span{
        font-size:12px;
        margin-bottom:4px;
    }
    .premium-support-item strong{
        font-size:14.5px;
    }
    .premium-support-btn{
        margin-top:26px;
        padding:15px 18px;
        font-size:15px;
        border-radius:16px;
    }
}

/* =========================
   589px
========================= */
@media(max-width:589px){

    .booking-hero-section{
        padding:70px 16px;
    }
    .booking-hero-content h1{
        font-size:34px;
    }
    .booking-stat-item h3{
        font-size:28px;
    }
    .booking-hero-card{
        padding:22px;
        border-radius:24px;
    }
    .booking-card-top h3{
        font-size:24px;
    }
    .booking-step-item{
        padding:14px;
        gap:12px;
    }
    .booking-step-number{
        width:46px;
        height:46px;
        min-width:46px;
        font-size:18px;
    }

    .course-selection-section,
    .lesson-schedule-section,
    .student-info-section,
    .payment-option-section,
    .booking-confirmation-section,
    .premium-booking-faq{
        padding:70px 16px;
    }
    .course-selection-header h2,
    .schedule-header h2,
    .student-info-header h2,
    .payment-header h2,
    .premium-faq-header h2,
    .confirmation-content h2{
        font-size:28px;
    }

    .selection-card{
        padding:24px 20px;
        border-radius:24px;
    }
    .selection-content h3{
        font-size:20px;
    }

    .schedule-time-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .calendar-date{
        height:44px;
        font-size:13.5px;
        border-radius:12px;
    }
    .calendar-days,
    .calendar-dates{
        gap:6px;
    }

    .student-form-card,
    .student-side-card,
    .student-contact-card,
    .payment-card,
    .booking-summary-card,
    .payment-trust-card,
    .premium-faq-support-card{
        padding:22px 18px;
        border-radius:24px;
    }
    .student-form-top h3,
    .student-side-card h3,
    .student-contact-card h4,
    .payment-card-top h3,
    .booking-summary-top h3,
    .payment-trust-card h4,
    .premium-faq-support-top h3{
        font-size:22px;
    }

    .payment-method{
        flex-wrap:wrap;
    }
    .payment-method-left h4{
        font-size:15px;
    }

    .confirmation-card{
        padding:28px 20px;
    }
    .confirmation-success-icon{
        width:80px;
        height:80px;
        font-size:34px;
    }
    .confirmation-content h2{
        font-size:26px;
    }
    .confirmation-next-steps{
        padding:22px 18px;
    }
    .confirmation-next-steps h3{
        font-size:22px;
    }
    .confirmation-step-item{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
        padding:16px;
    }

    .premium-faq-question span{
        font-size:15px;
    }
}

/* =========================
   550px
========================= */
@media(max-width:550px){

    .booking-hero-content h1{
        font-size:30px;
        line-height:1.15;
    }
    .booking-hero-content p{
        font-size:14.5px;
    }
    .booking-stat-item h3{
        font-size:26px;
    }
    .booking-hero-card{
        padding:20px;
    }
    .booking-card-top h3{
        font-size:22px;
    }

    .course-selection-header h2,
    .schedule-header h2,
    .student-info-header h2,
    .payment-header h2,
    .premium-faq-header h2,
    .confirmation-content h2{
        font-size:26px;
    }

    .selection-content h3{
        font-size:19px;
    }
    .selection-icon{
        width:54px;
        height:54px;
        font-size:22px;
    }

    .schedule-time-grid{
        grid-template-columns:1fr;
    }

    .calendar-days,
    .calendar-dates{
        gap:5px;
    }
    .calendar-date{
        height:42px;
        font-size:13px;
        border-radius:10px;
    }
    .calendar-days span{
        font-size:11px;
    }

    .student-form-group input,
    .student-form-group select,
    .student-form-group textarea,
    .payment-group input{
        padding:13px 14px;
        font-size:14px;
    }

    .booking-total h4{
        font-size:26px;
    }

    .confirmation-card{
        padding:24px 18px;
        border-radius:26px;
    }

    .premium-faq-question{
        padding:18px;
    }
    .premium-faq-question span{
        font-size:14.5px;
    }
}

/* =========================
   441px
========================= */
@media(max-width:441px){

    .booking-hero-section,
    .course-selection-section,
    .lesson-schedule-section,
    .student-info-section,
    .payment-option-section,
    .booking-confirmation-section,
    .premium-booking-faq{
        padding:60px 14px;
    }
    .booking-hero-subtitle{
        font-size:12px;
        padding:8px 14px;
    }
    .booking-hero-content h1{
        font-size:26px;
    }
    .booking-hero-content p{
        font-size:14px;
    }
    .booking-primary-btn,
    .booking-outline-btn{
        padding:13px 20px;
        font-size:14px;
    }
    .booking-stat-item{
        padding:16px 14px;
        border-radius:18px;
    }
    .booking-stat-item h3{
        font-size:24px;
    }
    .booking-stat-item p{
        font-size:13px;
    }
    .booking-hero-card{
        padding:18px;
        border-radius:22px;
    }
    .booking-card-top h3{
        font-size:20px;
    }
    .booking-card-top p{
        font-size:13.5px;
    }
    .booking-step-item{
        padding:14px;
        gap:12px;
        border-radius:16px;
    }
    .booking-step-number{
        width:42px;
        height:42px;
        min-width:42px;
        font-size:16px;
        border-radius:12px;
    }
    .booking-step-content h4{
        font-size:16px;
    }
    .booking-step-content p{
        font-size:13px;
    }
    .booking-card-btn{
        padding:13px 16px;
        font-size:14px;
    }

    .course-selection-header h2,
    .schedule-header h2,
    .student-info-header h2,
    .payment-header h2,
    .premium-faq-header h2,
    .confirmation-content h2{
        font-size:24px;
    }
    .course-selection-header p,
    .schedule-header p,
    .student-info-header p,
    .payment-header p,
    .premium-faq-header p{
        font-size:14px;
    }
    .course-selection-subtitle,
    .schedule-subtitle,
    .student-info-subtitle,
    .payment-subtitle,
    .premium-faq-subtitle{
        font-size:12px;
        padding:8px 14px;
    }

    .selection-card{
        padding:20px 16px;
        border-radius:22px;
    }
    .selection-icon{
        width:48px;
        height:48px;
        font-size:20px;
        border-radius:14px;
    }
    .selection-content h3{
        font-size:18px;
    }
    .selection-content p{
        font-size:13.5px;
    }
    .selection-feature-item{
        padding:11px 12px;
    }
    .selection-feature-item span{
        font-size:13px;
    }
    .selection-price h4{
        font-size:28px;
    }
    .selection-btn{
        padding:13px 18px;
        font-size:13.5px;
    }

    .schedule-calendar-card,
    .schedule-info-card,
    .schedule-summary-card{
        padding:20px 16px;
        border-radius:22px;
    }
    .calendar-top h3{
        font-size:20px;
    }
    .calendar-days,
    .calendar-dates{
        gap:4px;
    }
    .calendar-date{
        height:38px;
        font-size:12.5px;
        border-radius:10px;
    }
    .calendar-days span{
        font-size:10.5px;
    }
    .schedule-info-card h3{
        font-size:20px;
    }
    .schedule-info-card p{
        font-size:13.5px;
    }
    .schedule-time-item{
        padding:14px;
        border-radius:16px;
    }
    .time-period{
        font-size:10.5px;
        padding:5px 10px;
        margin-bottom:10px;
    }
    .schedule-time-item h4{
        font-size:18px;
    }
    .schedule-time-item p{
        font-size:12px;
    }
    .schedule-summary-icon,
    .booking-summary-icon{
        width:46px;
        height:46px;
        font-size:18px;
        border-radius:14px;
    }
    .schedule-summary-top h4,
    .booking-summary-top h3{
        font-size:18px;
    }
    .schedule-summary-item,
    .booking-summary-item{
        padding:12px 14px;
    }
    .schedule-summary-item span,
    .booking-summary-item span{
        font-size:13px;
    }
    .schedule-summary-item strong,
    .booking-summary-item strong{
        font-size:13.5px;
    }
    .schedule-btn,
    .student-form-btn,
    .confirm-booking-btn,
    .premium-support-btn{
        padding:13px 16px;
        font-size:14px;
    }

    .student-form-card,
    .student-side-card,
    .student-contact-card,
    .payment-card,
    .booking-summary-card,
    .payment-trust-card,
    .premium-faq-support-card{
        padding:20px 16px;
        border-radius:22px;
    }
    .student-form-top h3,
    .student-side-card h3,
    .student-contact-card h4,
    .payment-card-top h3,
    .payment-trust-card h4,
    .premium-faq-support-top h3{
        font-size:20px;
    }
    .student-side-icon,
    .premium-support-icon,
    .payment-trust-icon{
        width:54px;
        height:54px;
        font-size:22px;
        border-radius:16px;
    }
    .student-side-item,
    .student-contact-item{
        padding:12px 14px;
    }
    .student-side-item span,
    .student-contact-item span{
        font-size:13px;
    }

    .payment-method{
        padding:12px;
        gap:10px;
    }
    .payment-method-icon{
        width:42px;
        height:42px;
        font-size:18px;
        border-radius:12px;
    }
    .payment-method-left{
        gap:10px;
    }
    .payment-method-left h4{
        font-size:14px;
    }
    .payment-method-left p{
        font-size:12px;
    }
    .payment-check{
        width:26px;
        height:26px;
        font-size:11px;
    }
    .booking-total{
        padding:14px;
    }
    .booking-total h4{
        font-size:24px;
    }

    .confirmation-card{
        padding:22px 16px;
        border-radius:24px;
    }
    .confirmation-success-icon{
        width:70px;
        height:70px;
        font-size:30px;
        border-radius:20px;
        margin-bottom:20px;
    }
    .confirmation-badge{
        font-size:12px;
        padding:8px 14px;
        margin-bottom:16px;
    }
    .confirmation-content h2{
        font-size:22px;
    }
    .confirmation-content p{
        font-size:14px;
    }
    .confirmation-info-item{
        padding:14px 16px;
        border-radius:16px;
    }
    .confirmation-info-item span{
        font-size:12.5px;
        margin-bottom:6px;
    }
    .confirmation-info-item strong{
        font-size:14.5px;
    }
    .confirmation-next-steps{
        padding:18px 14px;
        border-radius:20px;
    }
    .confirmation-next-steps h3{
        font-size:20px;
        margin-bottom:16px;
    }
    .confirmation-step-item{
        padding:14px;
        gap:12px;
        border-radius:16px;
    }
    .confirmation-step-number{
        width:42px;
        height:42px;
        min-width:42px;
        font-size:16px;
        border-radius:12px;
    }
    .confirmation-step-item h4{
        font-size:15.5px;
    }
    .confirmation-step-item p{
        font-size:13px;
    }
    .confirmation-primary-btn,
    .confirmation-outline-btn{
        padding:13px 18px;
        font-size:14px;
    }

    .premium-faq-question{
        padding:14px 16px;
        gap:10px;
    }
    .premium-faq-question span{
        font-size:13.5px;
    }
    .premium-faq-icon{
        width:36px;
        height:36px;
        min-width:36px;
    }
    .premium-faq-icon i{
        font-size:14px;
    }
    .premium-faq-answer p{
        font-size:13.5px;
    }
    .premium-support-item{
        padding:12px;
        gap:12px;
    }
    .premium-support-item i{
        width:40px;
        height:40px;
        font-size:14px;
        border-radius:12px;
    }
    .premium-support-item strong{
        font-size:13.5px;
        word-break:break-word;
    }
}

/* =========================
   390px
========================= */
@media(max-width:390px){

    .booking-hero-content h1{
        font-size:24px;
    }
    .booking-stat-item h3{
        font-size:22px;
    }
    .booking-card-top h3{
        font-size:18px;
    }

    .course-selection-header h2,
    .schedule-header h2,
    .student-info-header h2,
    .payment-header h2,
    .premium-faq-header h2,
    .confirmation-content h2{
        font-size:22px;
    }

    .selection-content h3{
        font-size:17px;
    }

    .calendar-date{
        height:36px;
        font-size:12px;
    }
    .schedule-info-card h3{
        font-size:18px;
    }
    .schedule-time-item h4{
        font-size:17px;
    }

    .student-form-top h3,
    .student-side-card h3,
    .student-contact-card h4,
    .payment-card-top h3,
    .payment-trust-card h4,
    .premium-faq-support-top h3{
        font-size:18px;
    }
    .booking-total h4{
        font-size:22px;
    }

    .confirmation-content h2{
        font-size:20px;
    }
    .confirmation-step-item h4{
        font-size:14.5px;
    }

    .premium-faq-question span{
        font-size:13px;
    }
}

/* =========================
   320px
========================= */
@media(max-width:320px){

    .booking-hero-section,
    .course-selection-section,
    .lesson-schedule-section,
    .student-info-section,
    .payment-option-section,
    .booking-confirmation-section,
    .premium-booking-faq{
        padding:50px 12px;
    }
    .booking-hero-content h1{
        font-size:22px;
    }
    .booking-hero-content p{
        font-size:13.5px;
    }
    .booking-primary-btn,
    .booking-outline-btn,
    .booking-card-btn,
    .selection-btn,
    .schedule-btn,
    .student-form-btn,
    .confirm-booking-btn,
    .confirmation-primary-btn,
    .confirmation-outline-btn,
    .premium-support-btn{
        padding:12px 16px;
        font-size:13px;
    }
    .booking-stat-item{
        padding:14px 12px;
    }
    .booking-stat-item h3{
        font-size:20px;
    }
    .booking-hero-card{
        padding:14px;
        border-radius:20px;
    }
    .booking-step-item{
        padding:12px;
    }
    .booking-step-number{
        width:38px;
        height:38px;
        min-width:38px;
        font-size:14px;
    }

    .course-selection-header h2,
    .schedule-header h2,
    .student-info-header h2,
    .payment-header h2,
    .premium-faq-header h2,
    .confirmation-content h2{
        font-size:20px;
    }

    .selection-card{
        padding:16px 12px;
    }
    .selection-icon{
        width:42px;
        height:42px;
        font-size:18px;
    }
    .selection-content h3{
        font-size:16px;
    }

    .calendar-days span{
        font-size:9.5px;
    }
    .calendar-date{
        height:32px;
        font-size:11px;
        border-radius:8px;
    }
    .calendar-days,
    .calendar-dates{
        gap:3px;
    }

    .schedule-time-item{
        padding:12px;
    }
    .schedule-time-item h4{
        font-size:16px;
    }

    .student-form-card,
    .student-side-card,
    .student-contact-card,
    .payment-card,
    .booking-summary-card,
    .payment-trust-card,
    .premium-faq-support-card,
    .schedule-calendar-card,
    .schedule-info-card,
    .schedule-summary-card{
        padding:16px 12px;
        border-radius:20px;
    }
    .student-form-group input,
    .student-form-group select,
    .student-form-group textarea,
    .payment-group input{
        padding:12px;
        font-size:13.5px;
    }
    .student-form-group select{
        padding-right:36px;
        background-position:right 12px center;
    }

    .payment-method{
        padding:10px;
    }
    .payment-method-icon{
        width:38px;
        height:38px;
        font-size:16px;
    }
    .payment-method-left h4{
        font-size:13px;
    }
    .payment-method-left p{
        font-size:11.5px;
    }
    .booking-total h4{
        font-size:20px;
    }

    .confirmation-card{
        padding:18px 14px;
        border-radius:22px;
    }
    .confirmation-success-icon{
        width:60px;
        height:60px;
        font-size:24px;
        border-radius:18px;
    }
    .confirmation-content h2{
        font-size:18px;
    }
    .confirmation-content p{
        font-size:13px;
    }
    .confirmation-info-item{
        padding:12px;
    }
    .confirmation-info-item strong{
        font-size:13.5px;
    }
    .confirmation-next-steps{
        padding:14px 12px;
    }
    .confirmation-next-steps h3{
        font-size:17px;
    }
    .confirmation-step-item{
        padding:12px;
    }
    .confirmation-step-number{
        width:36px;
        height:36px;
        min-width:36px;
        font-size:14px;
    }
    .confirmation-step-item h4{
        font-size:13.5px;
    }
    .confirmation-step-item p{
        font-size:12.5px;
    }

    .premium-faq-question{
        padding:12px 14px;
        gap:8px;
    }
    .premium-faq-question span{
        font-size:12.5px;
    }
    .premium-faq-icon{
        width:32px;
        height:32px;
        min-width:32px;
        border-radius:10px;
    }
    .premium-faq-icon i{
        font-size:12px;
    }
    .premium-faq-answer p{
        font-size:13px;
    }
    .premium-faq-answer{
        padding:0 14px;
    }
    .premium-faq-item.active-faq .premium-faq-answer{
        padding:0 14px 16px;
    }
    .premium-support-item{
        flex-wrap:wrap;
    }
    .premium-support-item strong{
        font-size:13px;
    }
}


/* ===================================================================
   FAQ PAGE + CONTACT PAGE — FULL RESPONSIVE OVERRIDES
   FAQ:     Hero / Categories / FAQ Accordion / Premium Booking FAQ /
            Ultra Emergency Help.
   Contact: Hero / Contact Info / Contact Form / Google Map / FAQ.
   Preserves the premium colors, gradients, glassmorphism, glow,
   shadows, hover effects, and animations.
   Breakpoints: 1440 / 1200 / 1100 / 992 / 768 / 589 / 550 / 441 / 390 / 320
=================================================================== */

/* Universal safety inside FAQ + Contact sections */
.premium-faq-hero,
.premium-faq-categories,
.ultra-emergency-help,
.contact-hero-section,
.premium-contact-info-section,
.premium-contact-form-section,
.premium-map-section{
    overflow-x:hidden;
}

.premium-faq-hero img,
.premium-faq-categories img,
.ultra-emergency-help img,
.contact-hero-section img,
.premium-contact-info-section img,
.premium-contact-form-section img,
.premium-map-section img{
    max-width:100%;
}

/* Make form inputs / selects / textareas always fit inside their card */
.premium-input-group input,
.premium-input-group select,
.premium-input-group textarea,
.premium-faq-search input{
    box-sizing:border-box;
    max-width:100%;
}

/* Custom dark-theme select arrow on the contact form */
.premium-input-group select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    padding-right:54px;
    background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%233BE79B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 22px center;
    background-size:12px 8px;
}

/* Map iframe always fluid */
.premium-google-map,
.premium-google-map iframe{
    max-width:100%;
}

/* =========================
   1440px — Large desktop polish
========================= */
@media(max-width:1440px){

    .premium-faq-hero{
        padding:110px 20px;
    }
    .premium-faq-hero-content h1{
        font-size:66px;
    }
    .premium-faq-hero-content p{
        font-size:17px;
    }
    .premium-faq-image,
    .premium-faq-image img{
        height:520px;
    }
    .premium-faq-search input{
        height:74px;
    }
    .premium-faq-search button{
        width:54px;
        height:54px;
    }

    .contact-hero-section{
        padding:110px 20px;
    }
    .contact-hero-content h1{
        font-size:62px;
    }
    .contact-hero-content p{
        font-size:17px;
    }
    .contact-stat-item h3{
        font-size:40px;
    }
    .contact-main-image,
    .contact-main-image img{
        height:600px;
    }

    .premium-faq-category-header h2,
    .premium-contact-header h2,
    .premium-form-header h2,
    .premium-map-header h2{
        font-size:52px;
    }
    .premium-contact-image-content h2{
        font-size:50px;
    }
    .premium-category-content h3{
        font-size:28px;
    }
    .premium-contact-content h3{
        font-size:26px;
    }
    .premium-contact-image{
        min-height:780px;
    }
    .premium-google-map{
        height:580px;
    }
    .premium-map-overlay-card{
        padding:28px;
    }
    .premium-map-icon{
        width:78px;
        height:78px;
        min-width:78px;
        font-size:30px;
    }
    .premium-map-content h3{
        font-size:30px;
    }

    .ultra-emergency-content{
        padding:70px;
    }
    .ultra-emergency-top h2{
        font-size:62px;
    }
    .ultra-support-content h3{
        font-size:36px;
    }
    .ultra-status-top h4{
        font-size:24px;
    }
}

/* =========================
   1200px — Laptop
========================= */
@media(max-width:1200px){

    .premium-faq-hero{
        padding:100px 20px;
    }
    .premium-faq-hero-wrapper{
        gap:50px;
    }
    .premium-faq-hero-content h1{
        font-size:56px;
    }
    .premium-faq-hero-content p{
        font-size:16px;
        line-height:1.85;
    }
    .premium-faq-search{
        max-width:560px;
    }
    .premium-faq-search input{
        height:68px;
        padding:0 80px 0 24px;
        font-size:15px;
    }
    .premium-faq-search button{
        width:50px;
        height:50px;
        font-size:18px;
        right:10px;
    }
    .premium-faq-tags span{
        padding:10px 18px;
        font-size:13px;
    }
    .premium-faq-image,
    .premium-faq-image img{
        height:480px;
    }
    .premium-faq-floating-card{
        padding:18px;
    }
    .premium-floating-icon{
        width:60px;
        height:60px;
        min-width:60px;
        font-size:24px;
        border-radius:18px;
    }
    .card-one h4,
    .contact-card-top h4,
    .faq-support-top h4{
        font-size:18px;
    }
    .faq-support-top img,
    .contact-card-top img{
        width:60px;
        height:60px;
    }

    .contact-hero-section{
        padding:100px 20px;
    }
    .contact-hero-wrapper{
        gap:50px;
    }
    .contact-hero-content h1{
        font-size:54px;
    }
    .contact-hero-content p{
        font-size:16px;
        line-height:1.85;
    }
    .contact-hero-stats{
        gap:16px;
        margin-top:45px;
    }
    .contact-stat-item{
        min-width:160px;
        padding:24px 20px;
    }
    .contact-stat-item h3{
        font-size:36px;
    }
    .contact-main-image,
    .contact-main-image img{
        height:560px;
    }
    .contact-floating-card{
        padding:14px;
    }
    .contact-floating-icon{
        width:60px;
        height:60px;
        min-width:60px;
        font-size:24px;
        border-radius:18px;
    }

    .premium-faq-categories,
    .premium-contact-info-section,
    .premium-contact-form-section,
    .premium-map-section,
    .ultra-emergency-help{
        padding:100px 20px;
    }
    .premium-faq-category-header,
    .premium-contact-header,
    .premium-map-header{
        margin-bottom:60px;
    }
    .premium-faq-category-header h2,
    .premium-contact-header h2,
    .premium-form-header h2,
    .premium-map-header h2{
        font-size:46px;
    }
    .premium-contact-image-content h2{
        font-size:46px;
    }
    .premium-faq-category-header p,
    .premium-contact-header p,
    .premium-map-header p{
        font-size:17px;
    }

    .premium-faq-category-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .premium-category-card{
        padding:32px 28px;
        border-radius:30px;
    }
    .premium-category-icon{
        width:78px;
        height:78px;
        font-size:30px;
        border-radius:24px;
        margin-bottom:24px;
    }
    .premium-category-content h3{
        font-size:26px;
        margin-bottom:14px;
    }
    .premium-category-content p{
        font-size:15px;
        line-height:1.8;
    }
    .premium-category-arrow{
        width:54px;
        height:54px;
        font-size:20px;
        border-radius:18px;
        margin-top:28px;
    }

    .premium-contact-grid{
        grid-template-columns:1fr;
    }
    .premium-contact-card{
        padding:30px;
        gap:22px;
        border-radius:30px;
    }
    .premium-contact-icon{
        width:78px;
        height:78px;
        min-width:78px;
        font-size:30px;
        border-radius:24px;
    }
    .premium-contact-content h3{
        font-size:24px;
        margin-bottom:14px;
    }
    .premium-contact-content p{
        font-size:15px;
        line-height:1.8;
        margin-bottom:22px;
    }
    .premium-contact-footer{
        padding-top:18px;
    }

    .premium-contact-form-wrapper{
        grid-template-columns:1fr;
        gap:32px;
    }
    .premium-contact-image{
        min-height:520px;
        border-radius:32px;
    }
    .premium-contact-image-content{
        padding:36px;
    }
    .premium-contact-form-box{
        padding:36px;
        border-radius:32px;
    }
    .premium-form-header{
        margin-bottom:28px;
    }
    .premium-form-header h2{
        font-size:36px;
    }
    .premium-form-header p{
        font-size:15px;
    }
    .premium-contact-form{
        gap:18px;
    }
    .premium-form-row{
        gap:16px;
    }
    .premium-input-group input,
    .premium-input-group select,
    .premium-input-group textarea{
        padding:14px 18px;
        font-size:14.5px;
        border-radius:14px;
    }
    .premium-input-group select{
        padding-right:48px;
        background-position:right 18px center;
    }
    .premium-input-group textarea{
        min-height:140px;
    }
    .premium-input-group label{
        font-size:14px;
    }
    .premium-contact-btn{
        padding:16px;
        font-size:15px;
        border-radius:18px;
    }

    .premium-google-map{
        height:520px;
        margin-bottom:32px;
    }
    .premium-map-overlay-card{
        left:30px;
        bottom:30px;
        max-width:380px;
        padding:24px;
        gap:18px;
        border-radius:28px;
    }
    .premium-map-icon{
        width:68px;
        height:68px;
        min-width:68px;
        font-size:26px;
        border-radius:22px;
    }
    .premium-map-content h3{
        font-size:26px;
        margin-bottom:10px;
    }
    .premium-map-content p{
        font-size:14.5px;
        line-height:1.7;
    }
    .premium-location-grid{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }
    .premium-location-card{
        padding:28px 22px;
        border-radius:28px;
    }
    .premium-location-icon{
        width:64px;
        height:64px;
        font-size:30px;
        margin-bottom:22px;
    }
    .premium-location-card h4{
        font-size:20px;
        margin-bottom:12px;
    }
    .premium-location-card p{
        font-size:14.5px;
    }

    .ultra-emergency-wrapper{
        min-height:auto;
        border-radius:36px;
    }
    .ultra-emergency-content{
        padding:60px;
    }
    .ultra-emergency-top{
        margin-bottom:40px;
    }
    .ultra-emergency-top h2{
        font-size:54px;
    }
    .ultra-emergency-top p{
        font-size:17px;
    }
    .ultra-emergency-center{
        grid-template-columns:1fr;
        gap:24px;
        margin-bottom:40px;
    }
    .ultra-big-support-card,
    .ultra-status-card{
        padding:30px;
        border-radius:30px;
    }
    .ultra-big-support-card{
        gap:22px;
    }
    .ultra-support-icon{
        width:84px;
        height:84px;
        min-width:84px;
        font-size:34px;
        border-radius:26px;
    }
    .ultra-support-content h3{
        font-size:32px;
        margin-bottom:12px;
    }
    .ultra-support-content p{
        font-size:15px;
        line-height:1.7;
    }
    .ultra-status-top img{
        width:72px;
        height:72px;
    }
    .ultra-status-top h4{
        font-size:22px;
    }
}

/* =========================
   1100px — Narrow laptop / large tablet
========================= */
@media(max-width:1100px){

    .premium-faq-hero-wrapper,
    .contact-hero-wrapper{
        grid-template-columns:1fr;
        gap:50px;
    }
    .premium-faq-hero-right,
    .contact-hero-right{
        max-width:680px;
    }
    .premium-faq-hero-content h1{
        font-size:50px;
    }
    .contact-hero-content h1{
        font-size:48px;
    }

    .card-one{
        left:0;
    }
    .card-two{
        right:0;
    }
}

/* =========================
   992px — Tablet
========================= */
@media(max-width:992px){

    .premium-faq-hero,
    .contact-hero-section{
        min-height:auto;
        padding:90px 20px;
    }
    .premium-faq-hero-content h1{
        font-size:46px;
    }
    .contact-hero-content h1{
        font-size:44px;
    }
    .contact-stat-item{
        min-width:150px;
        padding:22px 18px;
    }
    .contact-stat-item h3{
        font-size:32px;
    }
    .premium-faq-image,
    .premium-faq-image img{
        height:440px;
    }
    .contact-main-image,
    .contact-main-image img{
        height:520px;
    }

    .premium-faq-categories,
    .premium-contact-info-section,
    .premium-contact-form-section,
    .premium-map-section,
    .ultra-emergency-help{
        padding:90px 20px;
    }
    .premium-faq-category-header,
    .premium-contact-header,
    .premium-map-header{
        margin-bottom:50px;
    }
    .premium-faq-category-header h2,
    .premium-contact-header h2,
    .premium-form-header h2,
    .premium-map-header h2,
    .premium-contact-image-content h2{
        font-size:40px;
    }

    .premium-google-map{
        height:460px;
    }
    .premium-map-overlay-card{
        left:24px;
        bottom:24px;
        max-width:340px;
    }

    .ultra-emergency-content{
        padding:48px;
    }
    .ultra-emergency-top h2{
        font-size:46px;
    }
    .ultra-support-content h3{
        font-size:28px;
    }
}

/* =========================
   768px — Large phone / small tablet
========================= */
@media(max-width:768px){

    .premium-faq-hero,
    .contact-hero-section{
        padding:80px 18px;
    }
    .premium-faq-hero-wrapper,
    .contact-hero-wrapper{
        gap:40px;
    }
    .premium-faq-subtitle,
    .contact-hero-subtitle{
        font-size:13px;
        padding:10px 18px;
        margin-bottom:22px;
    }
    .premium-faq-hero-content h1{
        font-size:38px;
        margin-bottom:22px;
    }
    .contact-hero-content h1{
        font-size:38px;
        margin-bottom:22px;
    }
    .premium-faq-hero-content p,
    .contact-hero-content p{
        font-size:15px;
        line-height:1.8;
    }
    .premium-faq-hero-content p{
        margin-bottom:30px;
    }
    .premium-faq-search{
        margin-bottom:26px;
    }
    .premium-faq-search input{
        height:64px;
        padding:0 70px 0 22px;
        font-size:14.5px;
        border-radius:18px;
    }
    .premium-faq-search button{
        width:46px;
        height:46px;
        font-size:16px;
        border-radius:14px;
    }
    .premium-faq-tags{
        gap:10px;
    }
    .premium-faq-tags span{
        padding:9px 16px;
        font-size:12.5px;
    }

    .contact-hero-buttons{
        flex-direction:column;
        gap:14px;
        margin-top:30px;
    }
    .contact-primary-btn,
    .contact-outline-btn{
        width:100%;
        padding:15px 24px;
        font-size:15px;
        border-radius:16px;
    }
    .contact-hero-stats{
        gap:12px;
        margin-top:36px;
    }
    .contact-stat-item{
        flex:1 1 100%;
        min-width:0;
        width:100%;
        padding:20px 18px;
        border-radius:20px;
    }
    .contact-stat-item h3{
        font-size:30px;
    }
    .contact-stat-item p{
        font-size:14px;
    }

    .premium-faq-image,
    .premium-faq-image img{
        height:360px;
        border-radius:30px;
    }
    .contact-main-image,
    .contact-main-image img{
        height:380px;
        border-radius:30px;
    }
    .premium-faq-floating-card,
    .contact-floating-card{
        position:relative;
        width:100% !important;
        margin-top:18px;
        padding:16px;
        border-radius:20px;
    }
    .card-one,
    .card-two{
        top:auto;
        left:auto;
        right:auto;
        bottom:auto;
    }
    .card-one{
        flex-direction:row;
        align-items:center;
        gap:14px;
    }
    .premium-floating-icon,
    .contact-floating-icon{
        width:50px;
        height:50px;
        min-width:50px;
        font-size:20px;
        border-radius:14px;
    }
    .card-one h4{
        font-size:16px;
        margin-bottom:4px;
    }
    .card-one p{
        font-size:13px;
    }
    .faq-support-top,
    .contact-card-top{
        gap:12px;
        margin-bottom:14px;
        width:100%;
    }
    .faq-support-top img,
    .contact-card-top img{
        width:48px;
        height:48px;
        border-width:3px;
    }
    .faq-support-top h4,
    .contact-card-top h4{
        font-size:16px;
        margin-bottom:2px;
    }
    .faq-support-top span,
    .contact-card-top span{
        font-size:12.5px;
    }
    .faq-support-status,
    .contact-availability{
        padding:12px 14px;
        font-size:13px;
    }

    .premium-faq-categories,
    .premium-contact-info-section,
    .premium-contact-form-section,
    .premium-map-section,
    .ultra-emergency-help{
        padding:80px 18px;
    }
    .premium-faq-category-header,
    .premium-contact-header,
    .premium-map-header{
        margin-bottom:40px;
    }
    .premium-faq-category-header h2,
    .premium-contact-header h2,
    .premium-form-header h2,
    .premium-map-header h2{
        font-size:32px;
        margin-bottom:18px;
    }
    .premium-contact-image-content h2{
        font-size:32px;
        margin-bottom:16px;
    }
    .premium-faq-category-header p,
    .premium-contact-header p,
    .premium-map-header p,
    .premium-form-header p,
    .premium-contact-image-content p{
        font-size:15px;
    }
    .premium-category-subtitle,
    .premium-contact-subtitle,
    .premium-map-subtitle{
        font-size:13px;
        padding:10px 18px;
        margin-bottom:18px;
    }

    .premium-faq-category-grid{
        grid-template-columns:1fr;
        gap:20px;
    }
    .premium-category-card{
        padding:26px 22px;
        border-radius:26px;
    }
    .premium-category-icon{
        width:64px;
        height:64px;
        font-size:26px;
        border-radius:20px;
        margin-bottom:20px;
    }
    .premium-category-content span{
        font-size:13px;
        margin-bottom:12px;
    }
    .premium-category-content h3{
        font-size:22px;
        margin-bottom:12px;
    }
    .premium-category-content p{
        font-size:14.5px;
        line-height:1.75;
    }
    .premium-category-arrow{
        width:48px;
        height:48px;
        font-size:18px;
        margin-top:22px;
    }

    .premium-contact-card{
        flex-direction:row;
        gap:18px;
        padding:24px 20px;
        border-radius:24px;
    }
    .premium-contact-icon{
        width:60px;
        height:60px;
        min-width:60px;
        font-size:24px;
        border-radius:18px;
    }
    .premium-contact-content span{
        font-size:13px;
    }
    .premium-contact-content h3{
        font-size:20px;
        margin-bottom:10px;
    }
    .premium-contact-content p{
        font-size:14px;
        line-height:1.7;
        margin-bottom:18px;
    }
    .premium-contact-footer{
        padding-top:14px;
    }
    .premium-contact-badge{
        padding:9px 14px;
        gap:8px;
    }
    .premium-contact-badge span{
        font-size:12px;
    }

    .premium-contact-form-wrapper{
        gap:24px;
    }
    .premium-contact-image{
        min-height:380px;
        border-radius:26px;
    }
    .premium-contact-image-content{
        padding:24px 22px;
    }
    .premium-contact-image-content span{
        font-size:13px;
        padding:9px 16px;
        margin-bottom:18px;
    }
    .premium-contact-form-box{
        padding:24px 20px;
        border-radius:26px;
    }
    .premium-form-header{
        margin-bottom:22px;
    }
    .premium-form-header span{
        font-size:12px;
        padding:8px 14px;
        margin-bottom:14px;
    }
    .premium-form-row{
        grid-template-columns:1fr;
        gap:14px;
    }
    .premium-input-group{
        gap:8px;
    }
    .premium-input-group label{
        font-size:13.5px;
    }
    .premium-input-group input,
    .premium-input-group select,
    .premium-input-group textarea{
        padding:13px 16px;
        font-size:14px;
        border-radius:12px;
    }
    .premium-input-group select{
        padding-right:42px;
        background-position:right 14px center;
    }
    .premium-input-group textarea{
        min-height:120px;
    }
    .premium-checkbox label{
        font-size:13px;
    }
    .premium-contact-btn{
        padding:14px;
        font-size:14.5px;
        border-radius:16px;
    }

    .premium-google-map{
        height:380px;
        border-radius:24px;
        margin-bottom:24px;
    }
    .premium-map-overlay-card{
        position:relative;
        left:auto;
        bottom:auto;
        max-width:100%;
        margin:18px;
        flex-direction:row;
        gap:14px;
        padding:18px;
        border-radius:22px;
    }
    .premium-map-icon{
        width:54px;
        height:54px;
        min-width:54px;
        font-size:22px;
        border-radius:18px;
    }
    .premium-map-content span{
        font-size:12.5px;
        margin-bottom:8px;
    }
    .premium-map-content h3{
        font-size:20px;
        margin-bottom:8px;
    }
    .premium-map-content p{
        font-size:13.5px;
        line-height:1.6;
    }
    .premium-location-grid{
        grid-template-columns:1fr;
        gap:14px;
    }
    .premium-location-card{
        padding:24px 20px;
        border-radius:22px;
    }
    .premium-location-icon{
        width:56px;
        height:56px;
        font-size:26px;
        border-radius:14px;
        margin-bottom:18px;
    }
    .premium-location-card h4{
        font-size:18px;
        margin-bottom:10px;
    }
    .premium-location-card p{
        font-size:14px;
        line-height:1.65;
    }

    .ultra-emergency-wrapper{
        border-radius:28px;
    }
    .ultra-emergency-content{
        padding:30px 22px;
    }
    .ultra-emergency-top{
        margin-bottom:30px;
    }
    .ultra-emergency-badge{
        padding:10px 18px;
        margin-bottom:22px;
    }
    .ultra-emergency-badge span{
        font-size:13px;
    }
    .ultra-emergency-top h2{
        font-size:32px;
        margin-bottom:18px;
    }
    .ultra-emergency-top p{
        font-size:14.5px;
        line-height:1.8;
    }
    .ultra-emergency-center{
        gap:18px;
        margin-bottom:30px;
    }
    .ultra-big-support-card,
    .ultra-status-card{
        padding:24px 20px;
        border-radius:24px;
    }
    .ultra-big-support-card{
        flex-direction:row;
        align-items:flex-start;
        gap:18px;
    }
    .ultra-support-icon{
        width:64px;
        height:64px;
        min-width:64px;
        font-size:26px;
        border-radius:20px;
    }
    .ultra-support-content span{
        font-size:13px;
        margin-bottom:8px;
    }
    .ultra-support-content h3{
        font-size:22px;
        margin-bottom:10px;
    }
    .ultra-support-content p{
        font-size:14px;
    }
    .ultra-status-top{
        flex-direction:row;
        align-items:center;
        gap:14px;
        margin-bottom:22px;
    }
    .ultra-status-top img{
        width:60px;
        height:60px;
    }
    .ultra-status-top h4{
        font-size:18px;
        margin-bottom:4px;
    }
    .ultra-status-top span{
        font-size:13px;
    }
    .ultra-status-bottom{
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
        gap:14px;
        padding:16px 18px;
        border-radius:18px;
    }
    .ultra-online-status{
        font-size:14px;
    }
    .ultra-status-bottom strong{
        font-size:13.5px;
    }
    .ultra-emergency-buttons{
        flex-direction:column;
        gap:12px;
    }
    .ultra-primary-btn,
    .ultra-outline-btn,
    .ultra-glass-btn{
        width:100%;
        padding:15px 24px;
        font-size:15px;
        border-radius:18px;
    }
}

/* =========================
   589px
========================= */
@media(max-width:589px){

    .premium-faq-hero,
    .contact-hero-section,
    .premium-faq-categories,
    .premium-contact-info-section,
    .premium-contact-form-section,
    .premium-map-section,
    .ultra-emergency-help{
        padding:70px 16px;
    }
    .premium-faq-hero-content h1{
        font-size:32px;
    }
    .contact-hero-content h1{
        font-size:32px;
    }
    .premium-faq-image,
    .premium-faq-image img{
        height:320px;
    }
    .contact-main-image,
    .contact-main-image img{
        height:340px;
    }
    .premium-faq-search input{
        height:60px;
        padding:0 64px 0 18px;
    }
    .premium-faq-search button{
        width:42px;
        height:42px;
        font-size:14px;
    }

    .premium-faq-category-header h2,
    .premium-contact-header h2,
    .premium-form-header h2,
    .premium-map-header h2,
    .premium-contact-image-content h2{
        font-size:28px;
    }
    .premium-category-content h3{
        font-size:20px;
    }
    .premium-contact-card{
        flex-direction:column;
        gap:14px;
    }
    .premium-contact-icon{
        width:54px;
        height:54px;
        font-size:22px;
    }

    .premium-google-map{
        height:340px;
    }
    .premium-map-overlay-card{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
        margin:14px;
    }
    .premium-map-icon{
        width:48px;
        height:48px;
        font-size:20px;
    }

    .ultra-emergency-top h2{
        font-size:28px;
    }
    .ultra-big-support-card{
        flex-direction:column;
        align-items:flex-start;
    }
    .ultra-support-content h3{
        font-size:20px;
    }
    .ultra-status-top{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }
    .ultra-status-bottom{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }
}

/* =========================
   550px
========================= */
@media(max-width:550px){

    .premium-faq-hero-content h1,
    .contact-hero-content h1{
        font-size:30px;
        line-height:1.15;
    }
    .premium-faq-hero-content p,
    .contact-hero-content p{
        font-size:14.5px;
    }
    .contact-stat-item h3{
        font-size:26px;
    }

    .premium-faq-search input{
        height:56px;
        padding:0 60px 0 16px;
        font-size:14px;
    }
    .premium-faq-search button{
        width:38px;
        height:38px;
        right:8px;
    }
    .premium-faq-tags span{
        padding:8px 14px;
        font-size:12px;
    }

    .premium-faq-image,
    .premium-faq-image img,
    .contact-main-image,
    .contact-main-image img{
        height:290px;
    }

    .premium-faq-category-header h2,
    .premium-contact-header h2,
    .premium-form-header h2,
    .premium-map-header h2,
    .premium-contact-image-content h2{
        font-size:26px;
    }
    .premium-category-card{
        padding:22px 18px;
    }
    .premium-category-icon{
        width:56px;
        height:56px;
        font-size:22px;
    }
    .premium-category-content h3{
        font-size:19px;
    }

    .premium-input-group input,
    .premium-input-group select,
    .premium-input-group textarea{
        padding:12px 14px;
        font-size:13.5px;
    }
    .premium-input-group select{
        padding-right:38px;
        background-position:right 12px center;
    }

    .premium-google-map{
        height:300px;
    }
}

/* =========================
   441px
========================= */
@media(max-width:441px){

    .premium-faq-hero,
    .contact-hero-section,
    .premium-faq-categories,
    .premium-contact-info-section,
    .premium-contact-form-section,
    .premium-map-section,
    .ultra-emergency-help{
        padding:60px 14px;
    }
    .premium-faq-subtitle,
    .contact-hero-subtitle{
        font-size:12px;
        padding:8px 14px;
    }
    .premium-faq-hero-content h1,
    .contact-hero-content h1{
        font-size:26px;
    }
    .premium-faq-hero-content p,
    .contact-hero-content p{
        font-size:14px;
    }
    .contact-primary-btn,
    .contact-outline-btn{
        padding:13px 20px;
        font-size:14px;
    }
    .contact-stat-item{
        padding:16px 14px;
        border-radius:18px;
    }
    .contact-stat-item h3{
        font-size:24px;
    }
    .contact-stat-item p{
        font-size:13px;
    }

    .premium-faq-search input{
        height:52px;
        padding:0 54px 0 14px;
        font-size:13.5px;
        border-radius:14px;
    }
    .premium-faq-search button{
        width:36px;
        height:36px;
        font-size:13px;
        border-radius:10px;
        right:7px;
    }
    .premium-faq-tags{
        gap:8px;
    }
    .premium-faq-tags span{
        padding:7px 12px;
        font-size:11.5px;
    }

    .premium-faq-image,
    .premium-faq-image img{
        height:230px;
        border-radius:22px;
    }
    .contact-main-image,
    .contact-main-image img{
        height:240px;
        border-radius:22px;
    }
    .premium-faq-floating-card,
    .contact-floating-card{
        padding:14px;
        border-radius:16px;
    }
    .premium-floating-icon,
    .contact-floating-icon{
        width:42px;
        height:42px;
        min-width:42px;
        font-size:16px;
        border-radius:12px;
    }
    .card-one h4{
        font-size:14.5px;
    }
    .card-one p{
        font-size:12px;
    }
    .faq-support-top img,
    .contact-card-top img{
        width:42px;
        height:42px;
        border-width:2px;
    }
    .faq-support-top h4,
    .contact-card-top h4{
        font-size:14.5px;
    }
    .faq-support-top span,
    .contact-card-top span{
        font-size:11.5px;
    }
    .faq-support-status,
    .contact-availability{
        padding:10px 12px;
        font-size:12.5px;
        border-radius:14px;
    }
    .online-dot,
    .faq-online-dot{
        width:10px;
        height:10px;
    }

    .premium-faq-category-header h2,
    .premium-contact-header h2,
    .premium-form-header h2,
    .premium-map-header h2,
    .premium-contact-image-content h2{
        font-size:24px;
    }
    .premium-faq-category-header p,
    .premium-contact-header p,
    .premium-map-header p,
    .premium-form-header p{
        font-size:14px;
    }
    .premium-category-subtitle,
    .premium-contact-subtitle,
    .premium-map-subtitle{
        font-size:12px;
        padding:8px 14px;
    }

    .premium-category-card{
        padding:18px 14px;
        border-radius:20px;
    }
    .premium-category-icon{
        width:48px;
        height:48px;
        font-size:20px;
        border-radius:16px;
        margin-bottom:16px;
    }
    .premium-category-content h3{
        font-size:18px;
    }
    .premium-category-content p{
        font-size:13.5px;
    }
    .premium-category-arrow{
        width:42px;
        height:42px;
        font-size:16px;
        border-radius:14px;
        margin-top:18px;
    }

    .premium-contact-card{
        padding:18px 14px;
        border-radius:18px;
    }
    .premium-contact-icon{
        width:48px;
        height:48px;
        font-size:20px;
        border-radius:14px;
    }
    .premium-contact-content h3{
        font-size:18px;
    }
    .premium-contact-content p{
        font-size:13.5px;
    }
    .premium-contact-badge{
        padding:8px 12px;
    }
    .premium-contact-badge span{
        font-size:11.5px;
    }

    .premium-contact-image{
        min-height:300px;
        border-radius:20px;
    }
    .premium-contact-image-content{
        padding:18px 14px;
    }
    .premium-contact-form-box{
        padding:18px 14px;
        border-radius:20px;
    }
    .premium-form-header h2{
        font-size:22px;
    }
    .premium-form-header span{
        font-size:11.5px;
        padding:7px 12px;
    }
    .premium-input-group input,
    .premium-input-group select,
    .premium-input-group textarea{
        padding:11px 14px;
        font-size:13.5px;
        border-radius:11px;
    }
    .premium-input-group select{
        padding-right:36px;
    }
    .premium-input-group label{
        font-size:13px;
    }
    .premium-checkbox label{
        font-size:12.5px;
    }
    .premium-contact-btn{
        padding:13px;
        font-size:14px;
        border-radius:14px;
    }

    .premium-google-map{
        height:260px;
        border-radius:18px;
    }
    .premium-map-overlay-card{
        margin:10px;
        padding:14px;
        gap:10px;
        border-radius:16px;
    }
    .premium-map-icon{
        width:42px;
        height:42px;
        min-width:42px;
        font-size:18px;
        border-radius:14px;
    }
    .premium-map-content h3{
        font-size:18px;
    }
    .premium-map-content p{
        font-size:13px;
    }
    .premium-location-card{
        padding:20px 16px;
        border-radius:18px;
    }
    .premium-location-icon{
        width:48px;
        height:48px;
        font-size:22px;
        margin-bottom:14px;
    }
    .premium-location-card h4{
        font-size:16.5px;
    }
    .premium-location-card p{
        font-size:13.5px;
    }

    .ultra-emergency-wrapper{
        border-radius:22px;
    }
    .ultra-emergency-content{
        padding:24px 18px;
    }
    .ultra-emergency-badge{
        padding:8px 14px;
        gap:8px;
        margin-bottom:18px;
    }
    .ultra-emergency-badge span{
        font-size:12px;
    }
    .ultra-emergency-top h2{
        font-size:24px;
    }
    .ultra-emergency-top p{
        font-size:13.5px;
    }
    .ultra-big-support-card,
    .ultra-status-card{
        padding:18px;
        border-radius:18px;
    }
    .ultra-support-icon{
        width:54px;
        height:54px;
        min-width:54px;
        font-size:22px;
        border-radius:16px;
    }
    .ultra-support-content h3{
        font-size:18px;
        word-break:break-word;
    }
    .ultra-support-content p{
        font-size:13px;
    }
    .ultra-status-top img{
        width:54px;
        height:54px;
    }
    .ultra-status-top h4{
        font-size:16px;
    }
    .ultra-status-top span{
        font-size:12px;
    }
    .ultra-status-bottom{
        padding:14px;
        border-radius:14px;
    }
    .ultra-online-status{
        font-size:13px;
    }
    .ultra-status-bottom strong{
        font-size:12.5px;
    }
    .ultra-primary-btn,
    .ultra-outline-btn,
    .ultra-glass-btn{
        padding:13px 18px;
        font-size:14px;
        gap:10px;
    }
}

/* =========================
   390px
========================= */
@media(max-width:390px){

    .premium-faq-hero-content h1,
    .contact-hero-content h1{
        font-size:24px;
    }
    .contact-stat-item h3{
        font-size:22px;
    }

    .premium-faq-image,
    .premium-faq-image img,
    .contact-main-image,
    .contact-main-image img{
        height:210px;
    }

    .premium-faq-category-header h2,
    .premium-contact-header h2,
    .premium-form-header h2,
    .premium-map-header h2,
    .premium-contact-image-content h2{
        font-size:22px;
    }
    .premium-category-content h3,
    .premium-contact-content h3{
        font-size:17px;
    }
    .premium-google-map{
        height:230px;
    }
    .premium-map-content h3{
        font-size:16.5px;
    }
    .ultra-emergency-top h2{
        font-size:22px;
    }
    .ultra-support-content h3{
        font-size:17px;
    }
}

/* =========================
   320px
========================= */
@media(max-width:320px){

    .premium-faq-hero,
    .contact-hero-section,
    .premium-faq-categories,
    .premium-contact-info-section,
    .premium-contact-form-section,
    .premium-map-section,
    .ultra-emergency-help{
        padding:50px 12px;
    }
    .premium-faq-hero-content h1,
    .contact-hero-content h1{
        font-size:22px;
    }
    .premium-faq-hero-content p,
    .contact-hero-content p{
        font-size:13.5px;
    }
    .contact-primary-btn,
    .contact-outline-btn,
    .premium-contact-btn,
    .ultra-primary-btn,
    .ultra-outline-btn,
    .ultra-glass-btn{
        padding:12px 16px;
        font-size:13px;
    }
    .contact-stat-item{
        padding:14px 12px;
    }
    .contact-stat-item h3{
        font-size:20px;
    }

    .premium-faq-search input{
        height:48px;
        padding:0 48px 0 12px;
        font-size:13px;
    }
    .premium-faq-search button{
        width:32px;
        height:32px;
        font-size:12px;
        right:6px;
    }
    .premium-faq-tags span{
        padding:6px 10px;
        font-size:11px;
    }

    .premium-faq-image,
    .premium-faq-image img,
    .contact-main-image,
    .contact-main-image img{
        height:190px;
    }
    .premium-faq-floating-card,
    .contact-floating-card{
        padding:12px;
    }

    .premium-faq-category-header h2,
    .premium-contact-header h2,
    .premium-form-header h2,
    .premium-map-header h2,
    .premium-contact-image-content h2{
        font-size:20px;
    }

    .premium-category-card{
        padding:16px 12px;
    }
    .premium-category-icon{
        width:42px;
        height:42px;
        font-size:18px;
    }
    .premium-category-content h3{
        font-size:16px;
    }
    .premium-category-content p{
        font-size:13px;
    }

    .premium-contact-card{
        padding:16px 12px;
    }
    .premium-contact-icon{
        width:42px;
        height:42px;
        font-size:18px;
    }
    .premium-contact-content h3{
        font-size:16px;
    }
    .premium-contact-content p{
        font-size:13px;
    }

    .premium-contact-image{
        min-height:240px;
    }
    .premium-contact-image-content{
        padding:14px 12px;
    }
    .premium-contact-form-box{
        padding:14px 12px;
    }
    .premium-input-group input,
    .premium-input-group select,
    .premium-input-group textarea{
        padding:10px 12px;
        font-size:13px;
    }
    .premium-input-group select{
        padding-right:32px;
        background-position:right 10px center;
    }

    .premium-google-map{
        height:200px;
    }
    .premium-map-overlay-card{
        margin:8px;
        padding:12px;
        gap:8px;
    }
    .premium-map-icon{
        width:38px;
        height:38px;
        min-width:38px;
        font-size:16px;
    }
    .premium-location-card{
        padding:16px 12px;
    }
    .premium-location-icon{
        width:42px;
        height:42px;
        font-size:18px;
    }
    .premium-location-card h4{
        font-size:15.5px;
    }
    .premium-location-card p{
        font-size:13px;
    }

    .ultra-emergency-content{
        padding:18px 14px;
    }
    .ultra-emergency-top h2{
        font-size:20px;
    }
    .ultra-emergency-top p{
        font-size:13px;
    }
    .ultra-big-support-card,
    .ultra-status-card{
        padding:14px 12px;
    }
    .ultra-support-icon{
        width:46px;
        height:46px;
        min-width:46px;
        font-size:18px;
    }
    .ultra-support-content h3{
        font-size:16px;
    }
    .ultra-support-content p{
        font-size:12.5px;
    }
    .ultra-status-top img{
        width:46px;
        height:46px;
    }
    .ultra-status-bottom{
        padding:12px;
    }
}


/* ===================================================================
   REVIEWS PAGE — EXTENDED RESPONSIVE REFINEMENTS
   Adds 1920 / 1440 / 1100 / 589 / 550 / 441 / 390 / 320 breakpoints
   on top of the existing 1400/1200/992/768/576/400 block.
   Preserves premium colors, gradients, glassmorphism, glow, shadows,
   hover effects, animations, and transitions.
=================================================================== */

/* Universal safety inside reviews page */
.reviews-hero-section,
.student-testimonials-section,
.premium-video-testimonials,
.review-statistics-section,
.leave-review-section{
    overflow-x:hidden;
}

.reviews-hero-section img,
.student-testimonials-section img,
.premium-video-testimonials img,
.review-statistics-section img,
.leave-review-section img{
    max-width:100%;
}

/* Make every form control respect its container */
.review-input-group input,
.review-input-group select,
.review-input-group textarea{
    box-sizing:border-box;
    max-width:100%;
}

/* Modal iframe always fluid */
.video-container,
.video-container iframe{
    max-width:100%;
}

/* =========================
   1920px — Ultra-wide polish
========================= */
@media(min-width:1601px){

    .reviews-hero-section{
        padding:140px 24px;
    }
    .reviews-hero-content h1{
        font-size:80px;
    }
    .reviews-hero-content p{
        font-size:19px;
    }
    .reviews-main-image,
    .reviews-main-image img{
        height:680px;
    }

    .student-testimonials-section,
    .premium-video-testimonials,
    .review-statistics-section,
    .leave-review-section{
        padding:130px 24px;
    }
    .testimonial-header h2,
    .premium-video-header h2,
    .review-stats-header h2,
    .leave-review-left h2{
        font-size:60px;
    }
    .premium-main-content h3{
        font-size:46px;
    }
}

/* =========================
   1440px — Laptop polish (sits between default and 1400 query)
========================= */
@media(max-width:1440px){

    .reviews-hero-section{
        padding:115px 22px;
    }
    .reviews-hero-content h1{
        font-size:66px;
    }
    .reviews-hero-content p{
        font-size:17.5px;
    }
    .reviews-stat-item h3{
        font-size:40px;
    }
    .reviews-main-image,
    .reviews-main-image img{
        height:620px;
    }

    .student-testimonials-section,
    .premium-video-testimonials,
    .review-statistics-section,
    .leave-review-section{
        padding:115px 22px;
    }
    .testimonial-header h2,
    .premium-video-header h2,
    .review-stats-header h2,
    .leave-review-left h2{
        font-size:54px;
    }
    .premium-main-video{
        min-height:700px;
    }
    .premium-main-content h3{
        font-size:40px;
    }
    .review-stat-card h3{
        font-size:48px;
    }
    .review-analytics-left h3{
        font-size:42px;
    }
    .review-form-header h3{
        font-size:32px;
    }
}

/* =========================
   1100px — Narrow laptop / large tablet
========================= */
@media(max-width:1100px){

    .reviews-hero-wrapper{
        gap:46px;
    }
    .reviews-hero-content h1{
        font-size:50px;
    }
    .reviews-hero-content p{
        font-size:16.5px;
    }
    .reviews-stat-item{
        min-width:150px;
        padding:22px 18px;
    }
    .reviews-stat-item h3{
        font-size:34px;
    }
    .reviews-main-image,
    .reviews-main-image img{
        height:540px;
    }

    .testimonial-header h2,
    .premium-video-header h2,
    .review-stats-header h2,
    .leave-review-left h2{
        font-size:42px;
    }
    .testimonial-grid{
        gap:24px;
    }
    .premium-main-video{
        min-height:560px;
    }
    .premium-main-content h3{
        font-size:34px;
    }
    .premium-video-thumb{
        width:180px;
        min-width:180px;
        height:180px;
    }
    .review-stat-card h3{
        font-size:42px;
    }
    .review-analytics-left h3{
        font-size:34px;
    }
}

/* =========================
   589px — Mid-phone refinement
========================= */
@media(max-width:589px){

    .reviews-hero-section{
        padding:70px 14px;
    }
    .reviews-hero-content h1{
        font-size:30px;
    }
    .reviews-hero-content p{
        font-size:14px;
    }
    .reviews-stat-item h3{
        font-size:30px;
    }
    .reviews-main-image,
    .reviews-main-image img{
        height:340px;
    }

    .student-testimonials-section,
    .premium-video-testimonials,
    .review-statistics-section,
    .leave-review-section{
        padding:60px 14px;
    }
    .testimonial-header h2,
    .premium-video-header h2,
    .review-stats-header h2,
    .leave-review-left h2{
        font-size:26px;
    }
    .testimonial-card{
        padding:22px 18px;
    }
    .testimonial-top{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
    }
    .testimonial-quote{
        width:46px;
        height:46px;
        min-width:46px;
        font-size:16px;
    }
    .testimonial-footer{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }
    .premium-main-video{
        min-height:380px;
        border-radius:22px;
    }
    .premium-main-content h3{
        font-size:20px;
    }
    .premium-main-bottom{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
    }
    .premium-video-thumb{
        height:200px;
    }
    .video-container iframe{
        height:200px;
    }
    .review-stat-card h3{
        font-size:34px;
    }
    .review-analytics-left h3{
        font-size:24px;
    }
    .review-form-header h3{
        font-size:22px;
    }
    .review-stars-select i{
        font-size:22px;
    }
}

/* =========================
   550px — Small phones
========================= */
@media(max-width:550px){

    .reviews-hero-content h1{
        font-size:28px;
        line-height:1.18;
    }
    .reviews-hero-content p{
        font-size:13.5px;
    }
    .reviews-primary-btn,
    .reviews-outline-btn{
        padding:14px 22px;
        font-size:14.5px;
    }
    .reviews-stat-item{
        padding:18px 16px;
        border-radius:18px;
    }
    .reviews-stat-item h3{
        font-size:28px;
    }
    .reviews-main-image,
    .reviews-main-image img{
        height:300px;
    }
    .reviews-floating-card{
        padding:18px 16px;
        border-radius:20px;
    }
    .reviews-card-top img{
        width:48px;
        height:48px;
        border-width:3px;
    }
    .reviews-card-top h4,
    .card-two h4{
        font-size:16px;
    }
    .reviews-card-top span{
        font-size:12.5px;
    }
    .reviews-stars i{
        font-size:13px;
    }
    .reviews-floating-card p{
        font-size:13.5px;
        line-height:1.65;
    }
    .reviews-floating-icon{
        width:50px;
        height:50px;
        min-width:50px;
        font-size:20px;
        border-radius:16px;
    }

    .testimonial-card{
        padding:20px 16px;
        border-radius:22px;
    }
    .testimonial-user img{
        width:48px;
        height:48px;
    }
    .testimonial-user h4{
        font-size:16px;
    }
    .testimonial-user span{
        font-size:11.5px;
    }
    .testimonial-card p{
        font-size:13px;
    }

    .premium-main-content h3{
        font-size:19px;
    }
    .premium-main-content p{
        font-size:13px;
    }
    .premium-main-play{
        width:60px;
        height:60px;
        font-size:18px;
    }
    .premium-video-thumb{
        height:200px;
        width: 100%;

    }
    .premium-video-info h4{
        font-size:17px;
    }
    .premium-video-info p{
        font-size:13px;
    }
    .premium-video-meta{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .review-stat-card{
        padding:20px 16px;
    }
    .review-stat-icon{
        width:62px;
        height:62px;
        font-size:24px;
        border-radius:18px;
    }
    .review-stat-card h3{
        font-size:30px;
    }
    .review-stat-card p{
        font-size:13.5px;
    }

    .review-analytics-wrapper{
        padding:20px 16px;
        border-radius:22px;
    }
    .review-analytics-left h3{
        font-size:22px;
    }
    .analytics-feature{
        padding:12px 14px;
    }
    .analytics-feature span{
        font-size:13.5px;
    }
    .analytics-progress-item{
        padding:18px 16px;
        border-radius:20px;
    }

    .leave-review-feature{
        padding:14px 16px;
        gap:12px;
    }
    .leave-feature-icon{
        width:46px;
        height:46px;
        min-width:46px;
        font-size:18px;
        border-radius:14px;
    }
    .leave-review-feature h4{
        font-size:15px;
    }
    .leave-review-feature p{
        font-size:12px;
    }
    .leave-review-form-box{
        padding:20px 14px;
        border-radius:24px;
    }
    .review-input-group input,
    .review-input-group select,
    .review-input-group textarea{
        padding:12px 14px;
        font-size:13.5px;
    }
    .review-input-group select{
        padding-right:38px;
        background-position:right 12px center;
    }
    .review-stars-select i{
        font-size:20px;
    }
    .review-upload-box{
        padding:20px 14px;
    }
    .review-upload-box i{
        font-size:28px;
    }
    .review-upload-box h4{
        font-size:16px;
    }
    .submit-review-btn{
        padding:14px;
        font-size:14px;
        border-radius:14px;
    }
}

/* =========================
   441px — Compact phones
========================= */
@media(max-width:441px){

    .reviews-hero-section{
        padding:60px 12px;
    }
    .reviews-hero-subtitle{
        font-size:11.5px;
        padding:8px 14px;
    }
    .reviews-hero-content h1{
        font-size:25px;
    }
    .reviews-hero-content p{
        font-size:13px;
    }
    .reviews-primary-btn,
    .reviews-outline-btn{
        padding:13px 18px;
        font-size:14px;
    }
    .reviews-stat-item{
        padding:16px 14px;
    }
    .reviews-stat-item h3{
        font-size:26px;
    }
    .reviews-stat-item p{
        font-size:12.5px;
    }
    .reviews-main-image,
    .reviews-main-image img{
        height:260px;
    }
    .reviews-floating-card{
        padding:16px 14px;
    }
    .reviews-card-top img{
        width:44px;
        height:44px;
        border-width:2px;
    }
    .reviews-card-top h4,
    .card-two h4{
        font-size:15px;
    }
    .reviews-stars{
        gap:5px;
    }
    .reviews-stars i{
        font-size:12px;
    }
    .reviews-floating-card p{
        font-size:13px;
    }
    .reviews-floating-icon{
        width:44px;
        height:44px;
        min-width:44px;
        font-size:18px;
        border-radius:14px;
    }

    .student-testimonials-section,
    .premium-video-testimonials,
    .review-statistics-section,
    .leave-review-section{
        padding:50px 12px;
    }
    .testimonial-subtitle,
    .premium-video-subtitle,
    .review-stats-subtitle,
    .leave-review-subtitle{
        font-size:11.5px;
        padding:8px 14px;
    }
    .testimonial-header h2,
    .premium-video-header h2,
    .review-stats-header h2,
    .leave-review-left h2{
        font-size:22px;
    }
    .testimonial-header p,
    .premium-video-header p,
    .review-stats-header p,
    .leave-review-left p{
        font-size:13px;
    }
    .testimonial-card{
        padding:18px 14px;
        border-radius:20px;
    }
    .testimonial-user img{
        width:42px;
        height:42px;
        border-width:2px;
    }
    .testimonial-user h4{
        font-size:15px;
    }
    .testimonial-quote{
        width:42px;
        height:42px;
        min-width:42px;
        font-size:14px;
    }
    .testimonial-stars i{
        font-size:13px;
    }
    .testimonial-card p{
        font-size:12.5px;
    }
    .verified-badge{
        padding:8px 12px;
    }
    .verified-badge span{
        font-size:11.5px;
    }
    .testimonial-footer strong{
        font-size:12px;
    }

    .premium-video-wrapper{
        gap:14px;
    }
    .premium-main-video{
        min-height:340px;
        border-radius:18px;
    }
    .premium-main-content{
        padding:16px 14px;
    }
    .premium-main-badge{
        padding:7px 12px;
        margin-bottom:14px;
    }
    .premium-main-badge span{
        font-size:11.5px;
    }
    .premium-main-content h3{
        font-size:18px;
        margin-bottom:10px;
    }
    .premium-main-content p{
        font-size:12.5px;
        margin-bottom:14px;
    }
    .premium-main-user img{
        width:42px;
        height:42px;
    }
    .premium-main-user h4{
        font-size:15px;
    }
    .premium-main-stat{
        padding:7px 10px;
    }
    .premium-main-stat span{
        font-size:11.5px;
    }
    .premium-main-play{
        width:54px;
        height:54px;
        font-size:16px;
    }
    .premium-video-item1{
        padding:12px;
        border-radius:18px;
    }
    .premium-video-thumb{
        height:160px;
        border-radius:14px;
    }
    .premium-thumb-play{
        width:50px;
        height:50px;
        font-size:16px;
    }
    .premium-video-info h4{
        font-size:16px;
    }
    .premium-video-info p{
        font-size:12.5px;
    }
    .premium-video-author img{
        width:38px;
        height:38px;
    }
    .premium-video-author strong{
        font-size:12.5px;
    }
    .premium-video-time{
        padding:6px 10px;
        font-size:11px !important;
    }

    .video-container{
        width:96%;
        border-radius:16px;
    }
    .video-container iframe{
        height:180px;
    }
    .video-close{
        top:-44px;
        width:36px;
        height:36px;
        font-size:16px;
    }

    .review-stat-card{
        padding:18px 14px;
        border-radius:20px;
    }
    .review-stat-icon{
        width:54px;
        height:54px;
        font-size:22px;
        border-radius:16px;
        margin-bottom:14px;
    }
    .review-stat-card h3{
        font-size:26px;
    }
    .review-stat-card p{
        font-size:13px;
    }
    .review-stat-bottom span{
        font-size:11.5px;
    }

    .review-analytics-wrapper{
        padding:18px 14px;
        border-radius:20px;
    }
    .analytics-mini-title{
        font-size:11.5px;
        padding:7px 12px;
    }
    .review-analytics-left h3{
        font-size:20px;
    }
    .review-analytics-left p{
        font-size:13px;
    }
    .analytics-feature{
        padding:11px 12px;
        gap:10px;
        border-radius:14px;
    }
    .analytics-feature i{
        font-size:14px;
    }
    .analytics-feature span{
        font-size:13px;
    }
    .analytics-progress-item{
        padding:14px 14px;
        border-radius:18px;
    }
    .analytics-progress-top span,
    .analytics-progress-top strong{
        font-size:12.5px;
    }

    .leave-review-feature{
        padding:12px 14px;
        gap:10px;
        border-radius:18px;
    }
    .leave-feature-icon{
        width:42px;
        height:42px;
        min-width:42px;
        font-size:16px;
        border-radius:12px;
    }
    .leave-review-feature h4{
        font-size:14.5px;
    }
    .leave-review-feature p{
        font-size:11.5px;
    }
    .leave-review-form-box{
        padding:18px 12px;
        border-radius:20px;
    }
    .review-form-header h3{
        font-size:19px;
    }
    .review-form-header p{
        font-size:12.5px;
    }
    .review-input-group label{
        font-size:13px;
    }
    .review-input-group input,
    .review-input-group select,
    .review-input-group textarea{
        padding:11px 12px;
        font-size:13px;
        border-radius:11px;
    }
    .review-input-group select{
        padding-right:34px;
        background-position:right 10px center;
    }
    .review-input-group textarea{
        min-height:120px;
    }
    .review-stars-select{
        gap:8px;
    }
    .review-stars-select i{
        font-size:18px;
    }
    .review-upload-box{
        padding:18px 12px;
        border-radius:18px;
    }
    .review-upload-box i{
        font-size:26px;
        margin-bottom:10px;
    }
    .review-upload-box h4{
        font-size:14.5px;
    }
    .review-upload-box p{
        font-size:12px;
    }
    .submit-review-btn{
        padding:13px;
        font-size:13.5px;
        border-radius:12px;
    }
}

/* =========================
   390px
========================= */
@media(max-width:390px){

    .reviews-hero-content h1{
        font-size:23px;
    }
    .reviews-stat-item h3{
        font-size:24px;
    }
    .reviews-main-image,
    .reviews-main-image img{
        height:230px;
    }

    .testimonial-header h2,
    .premium-video-header h2,
    .review-stats-header h2,
    .leave-review-left h2{
        font-size:21px;
    }
    .premium-main-video{
        min-height:300px;
    }
    .premium-main-content h3{
        font-size:17px;
    }
    .premium-video-thumb{
        height:150px;
    }
    .video-container iframe{
        height:160px;
    }
    .review-stat-card h3{
        font-size:24px;
    }
    .review-analytics-left h3{
        font-size:18px;
    }
    .review-form-header h3{
        font-size:18px;
    }
}

/* =========================
   320px — Tiny phones
========================= */
@media(max-width:320px){

    .reviews-hero-section,
    .student-testimonials-section,
    .premium-video-testimonials,
    .review-statistics-section,
    .leave-review-section{
        padding:46px 10px;
    }
    .reviews-hero-content h1{
        font-size:21px;
    }
    .reviews-hero-content p{
        font-size:12.5px;
    }
    .reviews-primary-btn,
    .reviews-outline-btn{
        padding:11px 14px;
        font-size:13px;
    }
    .reviews-stat-item{
        padding:14px 12px;
    }
    .reviews-stat-item h3{
        font-size:22px;
    }
    .reviews-stat-item p{
        font-size:12px;
    }
    .reviews-main-image,
    .reviews-main-image img{
        height:200px;
    }
    .reviews-floating-card{
        padding:14px 12px;
    }
    .reviews-card-top img{
        width:38px;
        height:38px;
    }
    .reviews-card-top h4,
    .card-two h4{
        font-size:14px;
    }
    .reviews-stars i{
        font-size:11px;
    }
    .reviews-floating-card p{
        font-size:12.5px;
    }
    .reviews-floating-icon{
        width:38px;
        height:38px;
        min-width:38px;
        font-size:16px;
        border-radius:12px;
    }

    .testimonial-header h2,
    .premium-video-header h2,
    .review-stats-header h2,
    .leave-review-left h2{
        font-size:19px;
    }
    .testimonial-card{
        padding:16px 12px;
    }
    .testimonial-user img{
        width:38px;
        height:38px;
    }
    .testimonial-user h4{
        font-size:14px;
    }
    .testimonial-card p{
        font-size:12px;
    }

    .premium-main-video{
        min-height:260px;
    }
    .premium-main-content{
        padding:14px 12px;
    }
    .premium-main-content h3{
        font-size:15.5px;
    }
    .premium-main-content p{
        font-size:11.5px;
    }
    .premium-main-play{
        width:48px;
        height:48px;
        font-size:14px;
    }
    .premium-video-item1{
        padding:10px;
    }
    .premium-video-thumb{
        height:130px;
    }
    .premium-video-info h4{
        font-size:14px;
    }
    .premium-video-info p{
        font-size:12px;
    }

    .video-container iframe{
        height:140px;
    }
    .video-close{
        top:-40px;
        width:32px;
        height:32px;
        font-size:14px;
    }

    .review-stat-card{
        padding:16px 12px;
    }
    .review-stat-icon{
        width:46px;
        height:46px;
        font-size:18px;
    }
    .review-stat-card h3{
        font-size:22px;
    }
    .review-stat-card p{
        font-size:12px;
    }
    .review-stat-bottom span{
        font-size:11px;
    }

    .review-analytics-wrapper{
        padding:14px 12px;
    }
    .review-analytics-left h3{
        font-size:17px;
    }
    .review-analytics-left p{
        font-size:12px;
    }
    .analytics-feature{
        padding:9px 10px;
    }
    .analytics-feature span{
        font-size:12px;
    }
    .analytics-progress-item{
        padding:12px 12px;
    }
    .analytics-progress-top span,
    .analytics-progress-top strong{
        font-size:11.5px;
    }

    .leave-review-feature{
        padding:10px 12px;
        gap:8px;
    }
    .leave-feature-icon{
        width:36px;
        height:36px;
        min-width:36px;
        font-size:14px;
    }
    .leave-review-feature h4{
        font-size:13.5px;
    }
    .leave-review-feature p{
        font-size:11px;
    }
    .leave-review-form-box{
        padding:14px 10px;
    }
    .review-form-header h3{
        font-size:17px;
    }
    .review-form-header p{
        font-size:12px;
    }
    .review-input-group input,
    .review-input-group select,
    .review-input-group textarea{
        padding:10px 11px;
        font-size:12.5px;
    }
    .review-input-group select{
        padding-right:30px;
        background-position:right 8px center;
    }
    .review-stars-select i{
        font-size:16px;
    }
    .review-upload-box{
        padding:14px 10px;
    }
    .review-upload-box i{
        font-size:22px;
    }
    .review-upload-box h4{
        font-size:13px;
    }
    .review-upload-box p{
        font-size:11px;
    }
    .submit-review-btn{
        padding:12px;
        font-size:12.5px;
    }
}


/* ===================================================================
   COURSES PAGE — PRICING CARD BASELINE ALIGNMENT
   Scope: courses.html "Affordable Driving Courses With Premium Training"
   Equalizes card heights, pins prices on a shared row, and locks every
   CTA to the exact same baseline. Preserves all colors, gradients,
   shadows, hover effects, and typography.
=================================================================== */

/* Equal-height row: every card stretches to the tallest sibling */
.pricing-section .pricing-grid{
    align-items:stretch;
}

/* Card becomes a strict flex column at full height */
.pricing-section .pricing-card{
    height:100%;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
}

/* Header / price are fixed-size; features absorb every height delta */
.pricing-section .pricing-top,
.pricing-section .pricing-price{
    flex:0 0 auto;
}

.pricing-section .pricing-features{
    flex:1 1 auto;
    margin-bottom: 20px;
}

/* Featured card grows upward from the button row, so all three CTAs
   stay on the same baseline despite the existing scale highlight. */
.pricing-section .featured-pricing{
    transform-origin:center bottom;
}

/* CTA pinned to the bottom of every card — overrides the original
   `margin-top:30px` without changing button size or padding. */
.pricing-section .pricing-btn{
    margin-top:auto !important;
    margin-bottom:0 !important;
    align-self:stretch;
}

/* Desktop: keep the description / heading band on a shared row so
   prices line up perfectly across cards. */
@media(min-width:1201px){

    .pricing-section .pricing-top{
        min-height:200px;
    }
    .pricing-section .pricing-price{
        min-height:120px;
    }
}

/* Tablet landscape (2-col layout) — same idea, shorter band. */
@media(max-width:1200px) and (min-width:769px){

    .pricing-section .pricing-top{
        min-height:175px;
    }
    .pricing-section .pricing-price{
        min-height:115px;
    }
}

/* Mobile: cards stack — release fixed bands, but still pin the CTA
   to the bottom with predictable spacing. */
@media(max-width:768px){

    .pricing-section .pricing-card{
        height:auto;
        min-height:0;
    }
    .pricing-section .pricing-top,
    .pricing-section .pricing-price{
        min-height:0;
    }
    .pricing-section .pricing-features{
        flex:0 1 auto;
    }
    .pricing-section .pricing-btn{
        margin-top:28px !important;
    }
    /* Remove the desktop scale on mobile so stacked cards feel even. */
    .pricing-section .featured-pricing{
        transform:none;
    }
}

@media(max-width:441px){

    .pricing-section .pricing-btn{
        margin-top:22px !important;
    }
}


/* ===================================================================
   COURSES PAGE — "Explore Our Premium Driving Programs"
   Course-card baseline alignment.
   Scope: courses.html .course-cards-section
   Equalizes .course-main-card heights, flexes .course-main-content,
   and pins .course-footer (price + CTA) to the bottom of every card.
   Preserves all existing premium colors, gradients, glow, shadows,
   hover effects, typography, padding, and the .course-main-image
   height. Only structural alignment is changed.
=================================================================== */

/* Equal-height row */
.course-cards-section .course-cards-grid{
    align-items:stretch;
}

/* Card → flex column at full row height */
.course-cards-section .course-main-card{
    display:flex;
    flex-direction:column;
    height:100%;
    box-sizing:border-box;
}

/* Image stays its own fixed band, content flexes below it */
.course-cards-section .course-main-image{
    flex:0 0 auto;
}

.course-cards-section .course-main-content{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
}

/* Header / title / description / features stay natural; the footer
   gets pushed to the bottom edge of every card. */
.course-cards-section .course-top-info,
.course-cards-section .course-main-content h3,
.course-cards-section .course-main-content p,
.course-cards-section .course-main-features{
    flex:0 0 auto;
    margin-bottom: 20px;
}

.course-cards-section .course-footer{
    margin-top:auto !important;
}

/* Desktop: keep the title + description band on a shared row so the
   prices line up consistently across all cards. */
@media(min-width:1201px){

    .course-cards-section .course-main-content h3{
        min-height:84px;
    }
    .course-cards-section .course-main-content p{
        min-height:120px;
    }
}

/* Tablet landscape (2-col layout) — same idea, slightly shorter. */
@media(max-width:1200px) and (min-width:769px){

    .course-cards-section .course-main-content h3{
        min-height:78px;
    }
    .course-cards-section .course-main-content p{
        min-height:110px;
    }
}

/* Mobile: cards stack — release fixed bands, keep auto bottom-pin
   so the CTA still sits at the bottom of each card. */
@media(max-width:768px){

    .course-cards-section .course-main-card{
        height:auto;
    }
    .course-cards-section .course-main-content h3,
    .course-cards-section .course-main-content p{
        min-height:0;
    }
    .course-cards-section .course-main-features{
        flex:0 1 auto;
        
    }
}


/* ===================================================================
   PRICING PAGE — COMPARISON TABLE FULL-FIT RESPONSIVENESS
   Scope: pricing.html "Choose The Right Course For Your Driving Goals"
   Strategy: fluid table-layout:fixed + clamp() + word-wrap so all 4
   columns always remain visible inside the viewport on every device.
   Horizontal scroll is only an automatic last-resort fallback below
   320px and never appears at any of the listed breakpoints.
   Preserves all gradients, shadows, glow, hover effects, badges,
   border-radius, and the desktop typography.
=================================================================== */

/* Page-level safety: section never bleeds past the viewport */
.comparison-section{
    overflow-x:hidden;
}

/* Wrapper: simple block, full width of its container.
   overflow-x:auto stays as a fallback (e.g. very long custom text),
   but the fluid sizing below means the table will fit naturally. */
.comparison-section .comparison-table-wrapper{
    display:block;
    
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:rgba(59,231,155,0.45) rgba(255,255,255,0.06);
}
.comparison-section .comparison-table-wrapper::-webkit-scrollbar{
    height:6px;
}
.comparison-section .comparison-table-wrapper::-webkit-scrollbar-track{
    background:rgba(255,255,255,0.06);
    border-radius:0 0 36px 36px;
}
.comparison-section .comparison-table-wrapper::-webkit-scrollbar-thumb{
    background:linear-gradient(135deg,#3BE79B,#22cb7d);
    border-radius:50px;
}

/* Fluid table — fits every viewport, no minimum width forced. */
.comparison-section .comparison-table{
    width:100%;
    min-width:0;
    table-layout:fixed;
    border-collapse:collapse;
}

/* Predictable column widths: feature column wider, three plan columns
   share the remaining space evenly. */
.comparison-section .comparison-table .feature-column,
.comparison-section .comparison-table .feature-name{
    width:30%;
}
.comparison-section .comparison-table th:not(.feature-column),
.comparison-section .comparison-table td:not(.feature-name){
    width:23.33%;
}

/* Cell padding scales fluidly between mobile-friendly and desktop sizes. */
.comparison-section .comparison-table th,
.comparison-section .comparison-table td{
    padding:clamp(8px,1.6vw,35px) clamp(6px,1.2vw,25px);
    word-break:break-word;
    overflow-wrap:anywhere;
    white-space:normal;
    text-align:center;
    font-size:clamp(11px,1.15vw,16px);
}

.comparison-section .comparison-table .feature-column,
.comparison-section .comparison-table .feature-name{
    text-align:left !important;
    font-size:clamp(12px,1.4vw,22px);
}

/* Plan header card stays centered + wraps naturally */
.comparison-section .table-plan{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(4px,0.6vw,10px);
    width:100%;
}
.comparison-section .table-plan-tag{
    display:inline-block;
    padding:clamp(3px,0.5vw,8px) clamp(7px,1vw,16px);
    border-radius:50px;
    font-size:clamp(9px,0.9vw,13px);
    margin-bottom:clamp(6px,1vw,18px);
    line-height:1.3;
    max-width:100%;
    white-space:normal;
    word-break:break-word;
    text-align:center;
}
.comparison-section .table-plan h3{
    font-size:clamp(14px,2vw,34px);
    line-height:1.2;
    margin-bottom:clamp(4px,0.7vw,10px);
    word-break:break-word;
}
.comparison-section .table-plan p{
    font-size:clamp(11px,1.4vw,22px);
    font-weight:700;
    line-height:1.2;
}

/* Cell icons */
.comparison-section .green-icon,
.comparison-section .red-icon{
    font-size:clamp(11px,1.2vw,18px);
}

/* CTA row */
.comparison-section .table-btn-row td{
    padding:clamp(12px,1.8vw,35px) clamp(6px,1.2vw,25px);
}
.comparison-section .table-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:clamp(8px,1.1vw,16px) clamp(10px,1.6vw,26px);
    font-size:clamp(11px,1.1vw,15px);
    border-radius:clamp(10px,1.2vw,18px);
    line-height:1.2;
    word-break:break-word;
    max-width:100%;
}

/* =========================
   1200px — Laptop
========================= */
@media(max-width:1200px){

    .comparison-section .comparison-table th,
    .comparison-section .comparison-table td{
        padding:22px 16px;
    }
    .comparison-section .table-btn-row td{
        padding:28px 14px;
    }
}

/* =========================
   1100px
========================= */
@media(max-width:1100px){

    .comparison-section .comparison-table th,
    .comparison-section .comparison-table td{
        padding:20px 14px;
    }
}

/* =========================
   992px — Tablet
========================= */
@media(max-width:992px){

    .comparison-section .comparison-table th,
    .comparison-section .comparison-table td{
        padding:18px 12px;
    }
    .comparison-section .comparison-table .feature-column,
    .comparison-section .comparison-table .feature-name{
        width:32%;
    }
    .comparison-section .comparison-table th:not(.feature-column),
    .comparison-section .comparison-table td:not(.feature-name){
        width:22.66%;
    }
    .comparison-section .table-btn-row td{
        padding:24px 10px;
    }
}

/* =========================
   809px
========================= */
@media(max-width:809px){

    .comparison-section .comparison-table th,
    .comparison-section .comparison-table td{
        padding:16px 10px;
    }
}

/* =========================
   768px — Large phone / small tablet
========================= */
@media(max-width:768px){

    .comparison-section .comparison-table-wrapper{
        border-radius:24px;
    }
    .comparison-section .comparison-table-wrapper::-webkit-scrollbar-track{
        border-radius:0 0 24px 24px;
    }
    .comparison-section .comparison-table th,
    .comparison-section .comparison-table td{
        padding:14px 8px;
    }
    .comparison-section .comparison-table .feature-column,
    .comparison-section .comparison-table .feature-name{
        width:34%;
    }
    .comparison-section .comparison-table th:not(.feature-column),
    .comparison-section .comparison-table td:not(.feature-name){
        width:22%;
    }
    .comparison-section .table-btn-row td{
        padding:22px 8px;
    }
}

/* =========================
   589px
========================= */
@media(max-width:589px){

    .comparison-section .comparison-table th,
    .comparison-section .comparison-table td{
        padding:12px 6px;
    }
    .comparison-section .comparison-table .feature-column,
    .comparison-section .comparison-table .feature-name{
        width:36%;
    }
    .comparison-section .comparison-table th:not(.feature-column),
    .comparison-section .comparison-table td:not(.feature-name){
        width:21.33%;
    }
}

/* =========================
   550px
========================= */
@media(max-width:550px){

    .comparison-section .comparison-table th,
    .comparison-section .comparison-table td{
        padding:11px 5px;
    }
}

/* =========================
   441px
========================= */
@media(max-width:441px){

    .comparison-section .comparison-table-wrapper{
        border-radius:18px;
    }
    .comparison-section .comparison-table-wrapper::-webkit-scrollbar-track{
        border-radius:0 0 18px 18px;
    }
    .comparison-section .comparison-table th,
    .comparison-section .comparison-table td{
        padding:10px 4px;
        font-size:11px;
    }
    .comparison-section .comparison-table .feature-column,
    .comparison-section .comparison-table .feature-name{
        width:38%;
        font-size:11.5px;
    }
    .comparison-section .comparison-table th:not(.feature-column),
    .comparison-section .comparison-table td:not(.feature-name){
        width:20.66%;
    }
    .comparison-section .table-plan-tag{
        font-size:9px;
        padding:3px 6px;
        margin-bottom:6px;
    }
    .comparison-section .table-plan h3{
        font-size:13.5px;
    }
    .comparison-section .table-plan p{
        font-size:11.5px;
    }
    .comparison-section .green-icon,
    .comparison-section .red-icon{
        font-size:11px;
    }
    .comparison-section .table-btn-row td{
        padding:18px 4px;
    }
    .comparison-section .table-btn{
        padding:8px 8px;
        font-size:10.5px;
        border-radius:10px;
    }
}

/* =========================
   390px
========================= */
@media(max-width:390px){

    .comparison-section .comparison-table th,
    .comparison-section .comparison-table td{
        padding:9px 3px;
        font-size:10.5px;
    }
    .comparison-section .comparison-table .feature-column,
    .comparison-section .comparison-table .feature-name{
        font-size:11px;
    }
    .comparison-section .table-plan h3{
        font-size:12.5px;
    }
    .comparison-section .table-plan p{
        font-size:11px;
    }
    .comparison-section .table-btn{
        padding:7px 6px;
        font-size:10px;
    }
}

/* =========================
   320px — Tiny phones (last-resort scroll fallback only if a single
   word still cannot wrap; layout still tries to fit fully).
========================= */
@media(max-width:320px){

    .comparison-section .comparison-table-wrapper{
        border-radius:14px;
    }
    .comparison-section .comparison-table-wrapper::-webkit-scrollbar-track{
        border-radius:0 0 14px 14px;
    }
    .comparison-section .comparison-table th,
    .comparison-section .comparison-table td{
        padding:8px 2px;
        font-size:10px;
    }
    .comparison-section .comparison-table .feature-column,
    .comparison-section .comparison-table .feature-name{
        width:38%;
        font-size:10.5px;
    }
    .comparison-section .comparison-table th:not(.feature-column),
    .comparison-section .comparison-table td:not(.feature-name){
        width:20.66%;
    }
    .comparison-section .table-plan-tag{
        font-size:8.5px;
        padding:2px 5px;
        margin-bottom:5px;
    }
    .comparison-section .table-plan h3{
        font-size:11.5px;
    }
    .comparison-section .table-plan p{
        font-size:10.5px;
    }
    .comparison-section .green-icon,
    .comparison-section .red-icon{
        font-size:10.5px;
    }
    .comparison-section .table-btn{
        padding:6px 4px;
        font-size:9.5px;
        border-radius:8px;
    }
}


/* ===================================================================
   ONLINE STATUS DOT — perfect circle + premium pulse animation
   Scope: .online-dot inside .contact-availability (contact.html).
   Locks dimensions so flexbox cannot squash the dot, and adds a
   smooth breathing neon-green pulse. Preserves color, layout, and
   the existing glassmorphism wrapper.
=================================================================== */

/* Perfect circle on every device — flexbox safe */
.contact-availability .online-dot,
.online-dot{
    flex:0 0 auto;
    flex-shrink:0;
    display:inline-block;
    width:12px;
    height:12px;
    min-width:12px;
    min-height:12px;
    max-width:12px;
    max-height:12px;
    aspect-ratio:1 / 1;
    border-radius:50%;
    background:#3BE79B;
    box-shadow:0 0 15px rgba(59,231,155,0.8);
    line-height:0;
    padding:0;
    box-sizing:border-box;
    position:relative;
    animation:onlineDotPulse 2.2s ease-in-out infinite;
    transform-origin:center center;
    will-change:transform, box-shadow;
}

@keyframes onlineDotPulse{
    0%{
        transform:scale(1);
        box-shadow:
            0 0 0 0 rgba(59,231,155,0.55),
            0 0 12px rgba(59,231,155,0.55);
    }
    50%{
        transform:scale(1.18);
        box-shadow:
            0 0 0 8px rgba(59,231,155,0),
            0 0 22px rgba(59,231,155,0.85);
    }
    100%{
        transform:scale(1);
        box-shadow:
            0 0 0 0 rgba(59,231,155,0),
            0 0 12px rgba(59,231,155,0.55);
    }
}

/* Reduced-motion users get a static dot, still perfectly round */
@media (prefers-reduced-motion: reduce){
    .contact-availability .online-dot,
    .online-dot{
        animation:none;
        box-shadow:0 0 12px rgba(59,231,155,0.55);
    }
}

/* Slightly smaller dot on phones — still a perfect circle. */
@media (max-width:768px){
    .contact-availability .online-dot,
    .online-dot{
        width:11px;
        height:11px;
        min-width:11px;
        min-height:11px;
        max-width:11px;
        max-height:11px;
    }
}

@media (max-width:441px){
    .contact-availability .online-dot,
    .online-dot{
        width:10px;
        height:10px;
        min-width:10px;
        min-height:10px;
        max-width:10px;
        max-height:10px;
    }
}


/* ===================================================================
   FOOTER — PREMIUM HOVER EFFECTS
   Theme accent: #27D082
   Adds smooth color/translate/glow transitions to Quick Links,
   Contact Info items + icons, and Social icons. No structural,
   layout, or color-at-rest changes — purely interactive polish.
=================================================================== */

.footer{
    --footer-accent:#27D082;
    --footer-accent-soft:rgba(39,208,130,0.45);
    --footer-accent-glow:rgba(39,208,130,0.35);
}

/* ---------- QUICK LINKS ---------- */
.footer-col ul li a{
    position:relative;
    display:inline-block;
    transition:
        color 0.3s ease,
        transform 0.3s ease,
        text-shadow 0.3s ease,
        letter-spacing 0.3s ease;
}

/* Animated underline glow */
.footer-col ul li a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:0;
    height:2px;
    border-radius:4px;
    background:var(--footer-accent);
    box-shadow:0 0 10px var(--footer-accent-soft);
    transition:width 0.35s ease;
}

.footer-col ul li a:hover,
.footer-col ul li a:focus-visible{
    color:var(--footer-accent);
    transform:translateX(6px);
    text-shadow:0 0 12px var(--footer-accent-soft);
    letter-spacing:0.2px;
}

.footer-col ul li a:hover::after,
.footer-col ul li a:focus-visible::after{
    width:100%;
}

/* ---------- CONTACT INFO ITEMS ---------- */
/* Scope only paragraphs that contain an icon — the description
   paragraphs in other columns stay untouched. */
.footer-col p:has(> i){
    display:inline-flex;
    align-items:center;
    transition:
        color 0.3s ease,
        transform 0.3s ease,
        text-shadow 0.3s ease;
    cursor:default;
}

.footer-col p:has(> i):hover{
    color:var(--footer-accent);
    transform:translateX(4px);
    text-shadow:0 0 10px var(--footer-accent-glow);
}

/* Footer icons — glow + scale */
.footer-col p i,
.footer-col i{
    display:inline-block;
    transition:
        color 0.3s ease,
        transform 0.3s ease,
        text-shadow 0.3s ease,
        filter 0.3s ease;
}

.footer-col p:has(> i):hover i,
.footer-col p i:hover,
.footer-col i:hover{
    color:var(--footer-accent);
    transform:scale(1.18);
    text-shadow:0 0 14px var(--footer-accent-soft);
    filter:drop-shadow(0 0 8px var(--footer-accent-glow));
}

/* ---------- SOCIAL ICONS ---------- */
.footer-social a{
    position:relative;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;
    will-change:transform;
}

.footer-social a i{
    transition:color 0.3s ease, transform 0.35s ease;
}

.footer-social a:hover,
.footer-social a:focus-visible{
    background:var(--footer-accent);
    color:#032E49;
    transform:translateY(-5px) scale(1.06);
    box-shadow:
        0 14px 28px rgba(39,208,130,0.32),
        0 0 22px var(--footer-accent-glow);
}

.footer-social a:hover i,
.footer-social a:focus-visible i{
    color:#032E49;
    transform:scale(1.05);
}

/* Reduced-motion users get color-only hover, no movement. */
@media (prefers-reduced-motion: reduce){

    .footer-col ul li a,
    .footer-col p:has(> i),
    .footer-col p i,
    .footer-col i,
    .footer-social a,
    .footer-social a i,
    .footer-col ul li a::after{
        transition-duration:0.001ms;
    }

    .footer-col ul li a:hover,
    .footer-col p:has(> i):hover,
    .footer-social a:hover{
        transform:none;
    }
}


/* Footer Contact Info stays vertical while keeping premium hover polish */
.footer-grid .footer-col:nth-child(3){
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.footer-grid .footer-col:nth-child(3) p:has(> i){
    display:flex;
    align-items:center;
    width:100%;
    margin-bottom:10px;
}


/* Footer Subscribe button hover polish */
.footer-form button{
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.footer-form button:hover,
.footer-form button:focus-visible{
    background:#27D082;
    color:#032E49;
    box-shadow:
        0 12px 24px rgba(39,208,130,0.28),
        0 0 18px rgba(39,208,130,0.35);
}

/* ===================================================================
   Site navigation + student area (V01 wiring, V02-ready structure)
=================================================================== */

.logo-link{
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    color:inherit;
    outline:none;
}

.logo-link:focus-visible{
    box-shadow:0 0 0 3px rgba(59,231,155,0.55);
    border-radius:10px;
}

/* --- Student dashboard: cinematic portal (scoped — does not affect booking student-info forms) --- */

.student-info-section:has(.dash-layout){
    position:relative;
    padding:clamp(48px,6vw,72px) clamp(16px,3vw,32px) clamp(64px,8vw,96px);
    min-height:calc(100vh - var(--site-header-height, 140px));
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(59,231,155,0.14) 0%, transparent 55%),
        linear-gradient(168deg, #011522 0%, #032E49 42%, #021a2b 100%);
    /* overflow:hidden breaks position:sticky on descendants; clip x only for glow bleed */
    overflow-x:clip;
    overflow-y:visible;
}

/* Sticky uses viewport scroll — root overflow-x:hidden breaks sticky in Chromium; clip does not */
html:has(.dash-layout),
body:has(.dash-layout){
    overflow-x:clip;
    overflow-y:visible;
}

.student-info-section:has(.dash-layout) .glow-left{
    background:radial-gradient(circle, rgba(59,231,155,0.22) 0%, transparent 68%);
    opacity:0.95;
}

.student-info-section:has(.dash-layout) .glow-right{
    background:radial-gradient(circle, rgba(59,231,155,0.16) 0%, transparent 70%);
    opacity:0.9;
}

.dash-layout{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(260px,300px) minmax(0,1fr);
    gap:clamp(20px,3vw,36px);
    width:100%;
    max-width:1320px;
    margin:0 auto;
    padding:clamp(8px,1.5vw,12px) 0 0;
    align-items:stretch;
}

.dash-sidebar{
    align-self:start;
    position:sticky;
    top:calc(var(--site-header-height, 112px) + 16px);
    z-index:2;
    display:flex;
    flex-direction:column;
    max-height:calc(100vh - var(--site-header-height, 112px) - 28px);
    max-height:calc(100dvh - var(--site-header-height, 112px) - 28px);
    overflow-x:hidden;
    overflow-y:visible;
    background:rgba(2,26,43,0.72);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:20px;
    padding:26px 20px 28px;
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    box-shadow:
        0 4px 24px rgba(0,0,0,0.35),
        0 0 0 1px rgba(59,231,155,0.06) inset,
        0 28px 64px rgba(0,0,0,0.45);
}

.dash-sidebar h3{
    flex-shrink:0;
    color:rgba(255,255,255,0.92);
    font-size:0.78rem;
    margin:0 0 18px;
    padding-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,0.1);
    letter-spacing:0.14em;
    text-transform:uppercase;
    font-weight:700;
    opacity:1;
}

/* Scroll only the nav list: page wheel works on heading / padding; chains when nav at limits */
.dash-nav{
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:1 1 auto;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    scroll-behavior:smooth;
    overscroll-behavior-y:auto;
    overscroll-behavior-x:none;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:rgba(59,231,155,0.45) rgba(255,255,255,0.06);
    padding-right:2px;
    margin-right:-2px;
}

.dash-sidebar .dash-nav::-webkit-scrollbar{
    width:6px;
}

.dash-sidebar .dash-nav::-webkit-scrollbar-track{
    background:rgba(0,0,0,0.18);
    border-radius:100px;
    margin:4px 0;
}

.dash-sidebar .dash-nav::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg, rgba(59,231,155,0.65) 0%, rgba(59,231,155,0.28) 100%);
    border-radius:100px;
    border:2px solid rgba(2,26,43,0.35);
}

.dash-sidebar .dash-nav::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg, rgba(95,240,176,0.85) 0%, rgba(59,231,155,0.45) 100%);
}

.dash-nav a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border-radius:12px;
    color:rgba(255,255,255,0.86);
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    border:1px solid transparent;
    position:relative;
    transition:
        background 0.28s ease,
        color 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        transform 0.22s ease;
}

.dash-nav a i{
    width:1.25em;
    text-align:center;
    color:var(--mint);
    font-size:15px;
    filter:drop-shadow(0 0 8px rgba(59,231,155,0.35));
}

.dash-nav a:hover{
    background:rgba(59,231,155,0.1);
    color:#fff;
    border-color:rgba(59,231,155,0.18);
    box-shadow:0 8px 28px rgba(0,0,0,0.25);
}

.dash-nav a.active{
    background:linear-gradient(105deg, rgba(59,231,155,0.22) 0%, rgba(59,231,155,0.08) 100%);
    color:#fff;
    font-weight:700;
    border-color:rgba(59,231,155,0.35);
    box-shadow:
        0 0 0 1px rgba(59,231,155,0.2) inset,
        0 12px 32px rgba(0,0,0,0.3);
}

.dash-nav a.active::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:3px;
    height:60%;
    border-radius:0 4px 4px 0;
    background:var(--mint);
    box-shadow:0 0 14px rgba(59,231,155,0.65);
}

.dash-main{
    min-width:0;
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    gap:clamp(22px,3vw,32px);
}

.dash-hero{
    margin:0;
    padding:clamp(22px,3vw,32px) clamp(22px,3vw,36px);
    background:rgba(2,26,43,0.55);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:20px;
    backdrop-filter:blur(14px) saturate(130%);
    -webkit-backdrop-filter:blur(14px) saturate(130%);
    box-shadow:
        0 8px 40px rgba(0,0,0,0.35),
        0 0 0 1px rgba(59,231,155,0.05) inset;
}

.dash-hero span{
    display:inline-block;
    color:var(--mint);
    font-size:12px;
    font-weight:700;
    letter-spacing:0.16em;
    text-transform:uppercase;
    margin-bottom:12px;
    padding:6px 14px;
    border-radius:999px;
    background:rgba(59,231,155,0.12);
    border:1px solid rgba(59,231,155,0.28);
}

.dash-hero h1{
    color:#fff;
    font-size:clamp(1.65rem,2.2vw + 1rem,2.35rem);
    line-height:1.18;
    margin:0 0 14px;
    font-weight:700;
    letter-spacing:-0.02em;
    text-shadow:0 2px 24px rgba(0,0,0,0.35);
}

.dash-hero p{
    color:rgba(255,255,255,0.82);
    max-width:56rem;
    font-size:clamp(14px,1.05vw,16px);
    line-height:1.65;
    margin:0;
}

.dash-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(18px,2.2vw,26px);
    flex:1;
    align-content:start;
}

.dash-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:220px;
    padding:clamp(22px,2.5vw,30px) clamp(20px,2.2vw,28px) 24px;
    background:linear-gradient(155deg, rgba(3,46,73,0.72) 0%, rgba(2,26,43,0.55) 100%);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:20px;
    backdrop-filter:blur(16px) saturate(135%);
    -webkit-backdrop-filter:blur(16px) saturate(135%);
    box-shadow:
        0 6px 16px rgba(0,0,0,0.28),
        0 24px 56px rgba(0,0,0,0.38),
        0 0 0 1px rgba(59,231,155,0.05) inset;
    overflow:hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.dash-card::after{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:3px;
    background:linear-gradient(90deg, transparent, rgba(59,231,155,0.55), transparent);
    opacity:0.85;
}

.dash-card:hover{
    transform:translateY(-4px);
    border-color:rgba(59,231,155,0.22);
    box-shadow:
        0 12px 28px rgba(0,0,0,0.35),
        0 32px 64px rgba(0,0,0,0.42),
        0 0 48px rgba(59,231,155,0.12);
}

.dash-card h3{
    position:relative;
    color:#fff;
    font-size:clamp(1.08rem,1.1vw + 0.85rem,1.28rem);
    font-weight:700;
    margin:6px 0 14px;
    padding-left:18px;
    line-height:1.35;
    letter-spacing:-0.01em;
}

.dash-card h3::before{
    content:"";
    position:absolute;
    left:0;
    top:0.45em;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--mint);
    box-shadow:0 0 14px rgba(59,231,155,0.65);
}

.dash-card p{
    flex:1;
    color:rgba(255,255,255,0.84);
    font-size:clamp(13.5px,0.95vw,15px);
    line-height:1.65;
    margin:0 0 22px;
}

.dash-card a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-self:flex-start;
    gap:10px;
    margin-top:auto;
    padding:12px 18px;
    font-size:13px;
    font-weight:700;
    letter-spacing:0.03em;
    text-transform:uppercase;
    color:var(--dark);
    text-decoration:none;
    background:linear-gradient(135deg, var(--mint) 0%, #2ed18a 100%);
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.15);
    box-shadow:0 6px 20px rgba(59,231,155,0.35);
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        filter 0.22s ease;
}

.dash-card a:hover{
    text-decoration:none;
    filter:brightness(1.05);
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(59,231,155,0.45);
}

.dash-card a i{
    font-size:12px;
    opacity:0.9;
}

/* Dashboard: settings panel matches glass system */
.student-info-section:has(.dash-layout) .dash-main > .checkout-summary-card{
    width:100%;
    max-width:none;
    margin:0;
    padding:clamp(26px,3vw,36px) clamp(22px,3vw,32px);
    background:linear-gradient(155deg, rgba(3,46,73,0.72) 0%, rgba(2,26,43,0.55) 100%);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:20px;
    box-shadow:
        0 6px 16px rgba(0,0,0,0.28),
        0 24px 56px rgba(0,0,0,0.38),
        0 0 0 1px rgba(59,231,155,0.05) inset;
}

.student-info-section:has(.dash-layout) .dash-main .student-form-card{
    max-width:640px;
    width:100%;
    margin:0;
    padding:clamp(28px,3vw,40px);
    background:linear-gradient(155deg, rgba(3,46,73,0.78) 0%, rgba(2,26,43,0.62) 100%);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:22px;
    backdrop-filter:blur(16px) saturate(130%);
    -webkit-backdrop-filter:blur(16px) saturate(130%);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.35),
        0 0 0 1px rgba(59,231,155,0.06) inset;
}

.student-info-section:has(.dash-layout) .student-form-top h3,
.student-info-section:has(.dash-layout) .student-form-group label{
    color:#fff;
}

.student-info-section:has(.dash-layout) .student-form-top p{
    color:rgba(255,255,255,0.78);
}

.student-info-section:has(.dash-layout) .student-form-group input{
    background:rgba(0,0,0,0.25);
    border-color:rgba(255,255,255,0.14);
    color:#fff;
}

.student-info-section:has(.dash-layout) .student-form-group input::placeholder{
    color:rgba(255,255,255,0.38);
}

@media (max-width:1024px){
    .dash-layout{
        grid-template-columns:minmax(240px,280px) minmax(0,1fr);
        gap:22px;
    }

    .dash-sidebar{
        padding:22px 16px 24px;
    }
}

@media (max-width:900px){
    .student-info-section:has(.dash-layout){
        min-height:auto;
        padding-bottom:56px;
    }

    .dash-layout{
        grid-template-columns:1fr;
        padding-top:4px;
    }

    .dash-sidebar{
        display:block;
        position:relative;
        top:auto;
        z-index:auto;
        max-height:none;
        overflow:visible;
    }

    .dash-nav{
        flex:none;
        min-height:0;
        overflow:visible;
        padding-right:0;
        margin-right:0;
        scroll-behavior:auto;
        overscroll-behavior:auto;
        scrollbar-width:auto;
        scrollbar-color:auto;
        flex-direction:row;
        flex-wrap:wrap;
        gap:10px;
    }

    .dash-nav a{
        flex:1 1 calc(50% - 10px);
        min-width:140px;
        justify-content:center;
        padding:12px 14px;
        font-size:13px;
    }

    .dash-nav a.active::before{
        display:none;
    }

    .dash-nav a.active{
        border-left:none;
        border-bottom:3px solid var(--mint);
    }

    .dash-grid{
        grid-template-columns:1fr;
    }

    .dash-card{
        min-height:0;
    }
}

@media (prefers-reduced-motion: reduce){
    .dash-card,
    .dash-card a,
    .dash-nav a{
        transition-duration:0.01ms;
    }

    .dash-nav{
        scroll-behavior:auto;
    }

    .dash-card:hover{
        transform:none;
    }

    .dash-card a:hover{
        transform:none;
    }
}

/* --- Auth pages (login / register) --- */
.auth-section{
    min-height:calc(100vh - 120px);
    padding:56px 0 72px;
    background:linear-gradient(165deg,#021a2b 0%,#032E49 45%,#021a2b 100%);
}

.auth-wrap{
    max-width:460px;
    margin:0 auto;
    width:90%;
}

.auth-card{
    background:rgba(3,46,73,0.55);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:18px;
    padding:32px 28px 36px;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 24px 60px rgba(0,0,0,0.45);
}

.auth-card h1{
    color:#fff;
    font-size:1.55rem;
    margin-bottom:8px;
}

.auth-card .auth-lead{
    color:rgba(255,255,255,0.7);
    font-size:14px;
    margin-bottom:22px;
}

.auth-field{
    margin-bottom:16px;
}

.auth-field label{
    display:block;
    color:rgba(255,255,255,0.85);
    font-size:13px;
    margin-bottom:6px;
}

.auth-field input{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(0,0,0,0.2);
    color:#fff;
    font-family:inherit;
    font-size:14px;
}

.auth-field input::placeholder{
    color:rgba(255,255,255,0.35);
}

.auth-submit{
    display:block;
    width:100%;
    margin-top:8px;
    padding:14px 16px;
    border:none;
    border-radius:12px;
    background:var(--mint);
    color:#032E49;
    font-weight:700;
    font-size:15px;
    cursor:pointer;
    font-family:inherit;
    transition:transform 0.2s ease,box-shadow 0.2s ease;
}

.auth-submit:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 28px rgba(59,231,155,0.35);
}

.auth-alt{
    margin-top:18px;
    text-align:center;
    font-size:14px;
    color:rgba(255,255,255,0.65);
}

.auth-alt a{
    color:var(--mint);
    font-weight:600;
    text-decoration:none;
}

.auth-alt a:hover{
    text-decoration:underline;
}

/* --- Content detail shell (blog / FAQ / course detail) --- */
.content-detail-section{
    padding:56px 0 80px;
    background:linear-gradient(180deg,#021a2b 0%,#032E49 40%,#021a2b 100%);
}

.content-detail-card{
    max-width:820px;
    margin:0 auto;
    width:90%;
    background:rgba(3,46,73,0.5);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:18px;
    padding:36px 32px 40px;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 22px 55px rgba(0,0,0,0.4);
}

.content-detail-card .meta{
    color:var(--mint);
    font-size:13px;
    font-weight:600;
    letter-spacing:0.05em;
    text-transform:uppercase;
    margin-bottom:10px;
}

.content-detail-card h1{
    color:#fff;
    font-size:clamp(1.6rem,3vw,2.2rem);
    line-height:1.2;
    margin-bottom:16px;
}

.content-detail-card .lead{
    color:rgba(255,255,255,0.78);
    font-size:16px;
    line-height:1.65;
    margin-bottom:22px;
}

.content-detail-card .body-copy{
    color:rgba(255,255,255,0.78);
    font-size:15px;
    line-height:1.75;
}

.content-detail-card .body-copy p+p{
    margin-top:14px;
}

.content-detail-actions{
    margin-top:28px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.content-detail-actions a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 18px;
    border-radius:10px;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
}

.content-detail-actions .btn-solid{
    background:var(--mint);
    color:#032E49;
}

.content-detail-actions .btn-ghost{
    border:1px solid rgba(255,255,255,0.25);
    color:#fff;
}

/* Checkout summary (booking flow) */
.checkout-summary-card{
    max-width:720px;
    margin:0 auto;
    width:90%;
    background:rgba(3,46,73,0.5);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:18px;
    padding:32px 28px 36px;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 22px 55px rgba(0,0,0,0.4);
}

.checkout-summary-card h2{
    color:#fff;
    font-size:1.45rem;
    margin-bottom:8px;
}

.checkout-summary-card > p{
    color:rgba(255,255,255,0.72);
    font-size:14px;
    margin-bottom:22px;
}

.checkout-rows{
    border-top:1px solid rgba(255,255,255,0.08);
    border-bottom:1px solid rgba(255,255,255,0.08);
    padding:18px 0;
    margin-bottom:22px;
}

.checkout-row{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:10px 0;
    font-size:14px;
    color:rgba(255,255,255,0.85);
}

.checkout-row span:last-child{
    color:#fff;
    font-weight:600;
}

.checkout-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
}

.checkout-actions a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 22px;
    border-radius:12px;
    font-weight:700;
    font-size:14px;
    text-decoration:none;
}

.checkout-actions .go-pay{
    background:var(--mint);
    color:#032E49;
}

.checkout-actions .go-back{
    border:1px solid rgba(255,255,255,0.25);
    color:#fff;
}

/* --- Premium checkout portal (checkout.html only — does not affect student-information white form) --- */
.student-info-section.checkout-page{
    position:relative;
    overflow-x:clip;
    overflow-y:visible;
    padding:clamp(40px,5vw,56px) clamp(16px,3vw,28px) clamp(72px,8vw,96px);
    min-height:calc(100vh - var(--site-header-height, 112px));
    background:
        radial-gradient(90% 55% at 12% 18%, rgba(59,231,155,0.16) 0%, transparent 52%),
        radial-gradient(70% 50% at 88% 72%, rgba(59,231,155,0.1) 0%, transparent 55%),
        linear-gradient(168deg, #011522 0%, #032E49 44%, #021a2b 100%);
    color:#fff;
}

.checkout-page .student-info-glow{
    opacity:0.85;
}

.checkout-page .glow-left{
    background:radial-gradient(circle, rgba(59,231,155,0.2) 0%, transparent 68%);
}

.checkout-page .glow-right{
    background:radial-gradient(circle, rgba(59,231,155,0.14) 0%, transparent 70%);
}

.checkout-glow{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    z-index:0;
}

.checkout-glow-a{
    width:420px;
    height:420px;
    top:-140px;
    right:-100px;
    background:radial-gradient(circle, rgba(59,231,155,0.18) 0%, transparent 68%);
    filter:blur(0);
}

.checkout-glow-b{
    width:360px;
    height:360px;
    bottom:-80px;
    left:-80px;
    background:radial-gradient(circle, rgba(3,46,73,0.55) 0%, transparent 70%);
}

.checkout-container{
    position:relative;
    z-index:2;
    max-width:1180px;
}

.checkout-hero{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    justify-content:space-between;
    gap:clamp(20px,3vw,32px);
    margin-bottom:clamp(28px,4vw,40px);
    padding-bottom:clamp(22px,3vw,30px);
    border-bottom:1px solid rgba(255,255,255,0.1);
}

.checkout-hero-main{
    flex:1 1 min(100%, 520px);
    min-width:0;
}

.checkout-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:700;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--mint);
    margin-bottom:12px;
    padding:8px 16px;
    border-radius:999px;
    background:rgba(59,231,155,0.12);
    border:1px solid rgba(59,231,155,0.28);
}

.checkout-hero h1{
    font-size:clamp(1.75rem,2.2vw + 1rem,2.5rem);
    line-height:1.15;
    font-weight:700;
    color:#fff;
    margin:0 0 14px;
    letter-spacing:-0.02em;
}

.checkout-hero h1 span{
    color:var(--mint);
}

.checkout-lead{
    margin:0;
    max-width:36rem;
    font-size:clamp(14px,1.05vw,16px);
    line-height:1.65;
    color:rgba(255,255,255,0.78);
}

.checkout-steps{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:0;
    margin:0;
    flex:0 1 auto;
}

.checkout-step{
    font-size:11px;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    padding:10px 14px;
    border-radius:999px;
    color:rgba(255,255,255,0.45);
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(0,0,0,0.2);
    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.checkout-step a{
    color:inherit;
    text-decoration:none;
}

.checkout-step.is-complete{
    color:rgba(255,255,255,0.75);
    border-color:rgba(59,231,155,0.25);
}

.checkout-step.is-current{
    color:#032E49;
    background:linear-gradient(135deg, #5ff0b0 0%, #3BE79B 55%, #2bc889 100%);
    border-color:rgba(59,231,155,0.45);
    box-shadow:0 8px 28px rgba(59,231,155,0.35);
}

.checkout-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(300px,380px);
    gap:clamp(22px,3vw,36px);
    align-items:start;
}

.checkout-main{
    display:flex;
    flex-direction:column;
    gap:clamp(18px,2.2vw,24px);
    min-width:0;
}

.checkout-panel{
    background:rgba(2,26,43,0.55);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:20px;
    padding:clamp(20px,2.5vw,26px) clamp(18px,2.2vw,24px);
    backdrop-filter:blur(16px) saturate(135%);
    -webkit-backdrop-filter:blur(16px) saturate(135%);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.28),
        0 0 0 1px rgba(59,231,155,0.06) inset;
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.checkout-panel:hover{
    transform:translateY(-3px);
    border-color:rgba(59,231,155,0.18);
    box-shadow:
        0 16px 44px rgba(0,0,0,0.35),
        0 0 0 1px rgba(59,231,155,0.1) inset;
}

.checkout-panel-title{
    font-size:0.72rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    font-weight:700;
    color:rgba(255,255,255,0.55);
    margin:0 0 16px;
}

.checkout-package{
    padding:0;
    overflow:hidden;
}

.checkout-package-banner{
    position:relative;
    aspect-ratio:21/9;
    min-height:140px;
    max-height:200px;
}

.checkout-package-banner img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.checkout-package-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 0%, rgba(1,17,34,0.75) 100%);
}

.checkout-package-pill{
    position:absolute;
    left:16px;
    bottom:14px;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    padding:8px 14px;
    border-radius:999px;
    color:#032E49;
    background:var(--mint);
    box-shadow:0 6px 20px rgba(0,0,0,0.35);
}

.checkout-package-body{
    padding:clamp(18px,2vw,22px) clamp(18px,2.2vw,24px) clamp(20px,2.4vw,24px);
}

.checkout-package-name{
    margin:0 0 14px;
    font-size:clamp(1.1rem,1.2vw + 0.85rem,1.35rem);
    font-weight:700;
    color:#fff;
}

.checkout-package-meta{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.checkout-package-meta li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:14px;
    color:rgba(255,255,255,0.78);
    line-height:1.45;
}

.checkout-package-meta i{
    color:var(--mint);
    margin-top:3px;
    flex-shrink:0;
}

.checkout-detail-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 20px;
}

.checkout-detail{
    padding:14px 16px;
    border-radius:14px;
    background:rgba(0,0,0,0.22);
    border:1px solid rgba(255,255,255,0.08);
}

.checkout-detail-label{
    display:block;
    font-size:11px;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.45);
    margin-bottom:6px;
}

.checkout-detail-value{
    font-size:15px;
    font-weight:600;
    color:#fff;
    word-break:break-word;
}

.checkout-instructor-preview .checkout-panel-title{
    margin-bottom:14px;
}

.checkout-instructor-row{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}

.checkout-instructor-photo{
    flex-shrink:0;
    width:72px;
    height:72px;
    border-radius:16px;
    overflow:hidden;
    border:2px solid rgba(59,231,155,0.35);
    box-shadow:0 8px 24px rgba(0,0,0,0.35);
}

.checkout-instructor-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.checkout-instructor-info{
    flex:1 1 min(160px, 100%);
    min-width:0;
}

.checkout-instructor-name{
    margin:0 0 4px;
    font-size:1.05rem;
    font-weight:700;
    color:#fff;
}

.checkout-instructor-role{
    margin:0 0 8px;
    font-size:13px;
    color:rgba(255,255,255,0.62);
}

.checkout-instructor-rating{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:600;
    color:#fff;
}

.checkout-stars{
    color:var(--mint);
    letter-spacing:2px;
}

.checkout-rating-muted{
    font-weight:500;
    color:rgba(255,255,255,0.45);
}

.checkout-instructor-link{
    margin-left:auto;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    font-weight:600;
    color:var(--mint);
    text-decoration:none;
    padding:10px 14px;
    border-radius:12px;
    border:1px solid rgba(59,231,155,0.35);
    background:rgba(59,231,155,0.08);
    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.checkout-instructor-link:hover{
    background:rgba(59,231,155,0.18);
    color:#fff;
    transform:translateY(-2px);
}

.checkout-trust-micro{
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    gap:0;
    padding:clamp(16px,2vw,20px);
    border-radius:18px;
    background:rgba(3,46,73,0.45);
    border:1px solid rgba(255,255,255,0.1);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.checkout-trust-item{
    flex:1 1 200px;
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:8px 12px;
}

.checkout-trust-item > i{
    font-size:22px;
    color:var(--mint);
    margin-top:2px;
    filter:drop-shadow(0 0 10px rgba(59,231,155,0.35));
}

.checkout-trust-item strong{
    display:block;
    font-size:14px;
    color:#fff;
    margin-bottom:4px;
}

.checkout-trust-item span{
    font-size:13px;
    color:rgba(255,255,255,0.65);
    line-height:1.45;
}

.checkout-trust-divider{
    width:1px;
    margin:4px 0;
    background:linear-gradient(180deg, transparent, rgba(255,255,255,0.15), transparent);
    flex:0 0 auto;
}

.checkout-aside{
    position:sticky;
    top:calc(var(--site-header-height, 112px) + 16px);
    align-self:start;
    z-index:3;
}

.checkout-order-summary{
    background:rgba(2,26,43,0.72);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:22px;
    padding:clamp(22px,2.8vw,28px) clamp(20px,2.4vw,26px) clamp(24px,3vw,30px);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    box-shadow:
        0 12px 40px rgba(0,0,0,0.38),
        0 0 0 1px rgba(59,231,155,0.08) inset,
        0 32px 64px rgba(0,0,0,0.35);
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease;
}

.checkout-order-summary:hover{
    transform:translateY(-2px);
    box-shadow:
        0 18px 48px rgba(0,0,0,0.42),
        0 0 0 1px rgba(59,231,155,0.12) inset;
}

.checkout-order-head h2{
    color:#fff;
    font-size:1.35rem;
    font-weight:700;
    margin:0 0 10px;
    letter-spacing:-0.02em;
}

.checkout-order-head p{
    color:rgba(255,255,255,0.7);
    font-size:14px;
    line-height:1.55;
    margin:0 0 18px;
}

.checkout-page .checkout-rows{
    border-top:1px solid rgba(255,255,255,0.1);
    border-bottom:none;
    padding:16px 0 8px;
    margin-bottom:0;
}

.checkout-page .checkout-pricing{
    padding:8px 0 4px;
    margin-bottom:18px;
}

.checkout-row--muted{
    color:rgba(255,255,255,0.72);
}

.checkout-row--muted span:last-child{
    color:rgba(255,255,255,0.88);
    font-weight:600;
}

.checkout-divider{
    height:1px;
    margin:12px 0 10px;
    background:linear-gradient(90deg, transparent, rgba(59,231,155,0.35), transparent);
}

.checkout-row--total{
    padding-top:14px;
    padding-bottom:4px;
    font-size:16px;
}

.checkout-row--total span:first-child{
    color:rgba(255,255,255,0.85);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.06em;
    font-size:12px;
}

.checkout-row--total span:last-child{
    font-size:1.55rem;
    font-weight:800;
    color:var(--mint);
    letter-spacing:-0.02em;
}

.checkout-secure-badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:20px;
}

.checkout-secure-badges span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
    padding:8px 10px;
    border-radius:10px;
    color:rgba(255,255,255,0.75);
    background:rgba(0,0,0,0.25);
    border:1px solid rgba(255,255,255,0.1);
}

.checkout-secure-badges i{
    color:var(--mint);
    font-size:12px;
}

.checkout-actions--stack{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
}

.checkout-cta-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:16px 22px;
    border-radius:14px;
    font-weight:800;
    font-size:14px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    text-decoration:none;
    color:#032E49;
    background:linear-gradient(135deg, #6ef4bd 0%, #3BE79B 40%, #24c07f 100%);
    border:1px solid rgba(3,46,73,0.12);
    box-shadow:
        0 12px 36px rgba(59,231,155,0.42),
        0 1px 0 rgba(255,255,255,0.45) inset;
    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease,
        filter 0.25s ease;
}

.checkout-cta-primary:hover{
    transform:translateY(-3px);
    filter:brightness(1.06);
    box-shadow:
        0 18px 44px rgba(59,231,155,0.5),
        0 0 0 1px rgba(59,231,155,0.25) inset;
}

.checkout-cta-primary:active{
    transform:translateY(-1px);
}

.checkout-cta-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 18px;
    border-radius:12px;
    font-weight:600;
    font-size:14px;
    text-decoration:none;
    color:rgba(255,255,255,0.88);
    border:1px solid rgba(255,255,255,0.22);
    background:rgba(255,255,255,0.04);
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}

.checkout-cta-secondary:hover{
    background:rgba(255,255,255,0.1);
    border-color:rgba(59,231,155,0.35);
    color:#fff;
}

html:has(.checkout-page),
body:has(.checkout-page){
    overflow-x:clip;
    overflow-y:visible;
}

@media (max-width:991px){
    .checkout-grid{
        grid-template-columns:1fr;
    }

    .checkout-aside{
        position:relative;
        top:auto;
        order:-1;
    }

    .checkout-order-summary:hover{
        transform:none;
    }

    .checkout-detail-grid{
        grid-template-columns:1fr;
    }

    .checkout-trust-divider{
        width:100%;
        height:1px;
        margin:8px 0;
    }
}

@media (max-width:600px){
    .checkout-hero{
        flex-direction:column;
        align-items:flex-start;
    }

    .checkout-steps{
        width:100%;
    }

    .checkout-step{
        flex:1 1 auto;
        text-align:center;
        justify-content:center;
    }

    .checkout-package-banner{
        aspect-ratio:16/9;
        min-height:160px;
    }

    .checkout-instructor-link{
        margin-left:0;
        width:100%;
        justify-content:center;
    }
}

@media (prefers-reduced-motion:reduce){
    .checkout-panel,
    .checkout-panel:hover,
    .checkout-package:hover,
    .checkout-order-summary,
    .checkout-order-summary:hover,
    .checkout-cta-primary,
    .checkout-cta-primary:hover,
    .checkout-instructor-link,
    .checkout-instructor-link:hover{
        transition-duration:0.01ms;
        transform:none;
    }
}

.blog-header-actions{
    margin-top:12px;
}

/* --- Global image reliability (responsive, reduce broken-icon jank) --- */
img{
    max-width:100%;
    height:auto;
    vertical-align:middle;
}

.blog-img img,
.course-img img,
.ins-img img,
.checkout-package-banner img,
.checkout-instructor-photo img{
    display:block;
}