:root {
   --primary: #2563EB;
   --primary-dark: #1D4ED8;
   --primary-light: #3B82F6;
   --accent: #F59E0B;
   --accent-dark: #D97706;
   --accent-light: #FCD34D;
   --rose: #EF4444;
   --emerald: #10B981;
   --violet: #8B5CF6;
   --white: #FFFFFF;
   --off-white: #F8FAFF;
   --gray-50: #F0F4FF;
   --gray-100: #E8EDFF;
   --gray-200: #C7D2FE;
   --gray-400: #818CF8;
   --gray-600: #4B5563;
   --gray-800: #1E293B;
   --gray-900: #0F172A;
   --font-head: 'Sora', 'Plus Jakarta Sans', sans-serif;
   --font-body: 'Plus Jakarta Sans', sans-serif;
   --font-jp: 'Noto Sans JP', sans-serif;
   --radius-sm: 8px;
   --radius: 14px;
   --radius-lg: 20px;
   --radius-xl: 28px;
   --shadow-sm: 0 2px 12px rgba(37, 99, 235, 0.08);
   --shadow: 0 8px 32px rgba(37, 99, 235, 0.12);
   --shadow-lg: 0 20px 60px rgba(37, 99, 235, 0.18);
   --glow: 0 0 40px rgba(59, 130, 246, 0.3);
 }

 /* ══ Dark Mode Variables ══ */
[data-theme="dark"] {
  --off-white: #0F172A; 
  --white: #1E293B; 
  --gray-50: #0F172A; 
  --gray-100: #334155; 
  --gray-200: #475569;
  --gray-600: #94A3B8; 
  --gray-800: #F1F5F9; 
  --gray-900: #F8FAFC; 
}

/* Specific component fixes for dark mode */
[data-theme="dark"] .navbar {
  background: rgba(30, 41, 59, 0.95);
  border-bottom: 1px solid var(--gray-100);
}

[data-theme="dark"] .mobile-menu,
[data-theme="dark"] .gallery-modal,
[data-theme="dark"] .modal-content {
  background: var(--off-white);
}

[data-theme="dark"] .about-floating-badge {
  background: var(--white);
  border-color: var(--gray-100);
}

[data-theme="dark"] .logo-text h1,
[data-theme="dark"] .footer-logo-text h2 {
  color: #EF4444; /* Adjusts the red logo text slightly for better contrast */
}
 /* ══ Reset ══ */
 *,
 *::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html {
   scroll-behavior: smooth;
 }

 body {
   font-family: var(--font-body);
   color: var(--gray-800);
   background: var(--off-white);
   overflow-x: hidden;
 }

 a {
   text-decoration: none;
   color: inherit;
 }

 ul {
   list-style: none;
 }

 img {
   display: block;
   max-width: 100%;
 }

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

 .section-tag {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: var(--primary);
   background: var(--gray-100);
   border: 1px solid var(--gray-200);
   padding: 6px 14px;
   border-radius: 100px;
   margin-bottom: 16px;
 }

 .section-tag::before {
   content: '';
   width: 6px;
   height: 6px;
   background: var(--primary);
   border-radius: 50%;
 }

 .section-title {
   font-family: var(--font-head);
   font-size: clamp(28px, 3.8vw, 46px);
   font-weight: 800;
   line-height: 1.15;
   letter-spacing: -0.5px;
 }

 .section-title .highlight {
   background: linear-gradient(135deg, var(--primary) 0%, var(--violet) 100%);
   -webkit-background-clip: text;
   background-clip: text;
 }

 /* ══ Buttons ══ */
 .btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 14px 28px;
   border-radius: 100px;
   font-family: var(--font-body);
   font-size: 15px;
   font-weight: 700;
   cursor: pointer;
   border: none;
   transition: all .28s cubic-bezier(.4, 0, .2, 1);
 }

 .btn-primary {
   background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
   color: #fff;
   box-shadow: 0 4px 20px rgba(37, 99, 235, .4);
 }

 .btn-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 28px rgba(95, 95, 95, 0.5);
   /* color: var(--primary); */
   color: #ffffff;
 }

 .btn-accent {
   background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
   color: #fff;
   box-shadow: 0 4px 20px rgba(245, 158, 11, .4);
 }

 .btn-accent:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 28px rgba(245, 158, 11, .5);
 }

 .btn-glass {
   background: rgba(255, 255, 255, 0.15);
   color: #fff;
   border: 1.5px solid rgba(255, 255, 255, 0.35);
   backdrop-filter: blur(8px);
 }

 .btn-glass:hover {
   background: rgba(63, 141, 230, 0.25);
   transform: translateY(-2px);
 }

 .btn-outline-primary {
   background: transparent;
   color: var(--primary);
   border: 2px solid var(--primary);
 }

 .btn-outline-primary:hover {
   background: var(--primary);
   color: #fff;
   transform: translateY(-2px);
 }

 /* ════════════════════════════════
       TOPBAR
    ════════════════════════════════ */
 .topbar {
   background: linear-gradient(90deg, var(--primary-dark) 0%, var(--primary) 100%);
   color: rgba(255, 255, 255, .9);
   font-size: 12.5px;
   font-weight: 500;
   padding: 9px 0;
 }

 .topbar .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 8px;
 }

 .topbar-left {
   display: flex;
   gap: 22px;
 }

 .topbar-left span {
   display: flex;
   align-items: center;
   gap: 6px;
 }

 .topbar-left a {
   color: rgba(255, 255, 255, .9);
   transition: color .2s;
 }

 .topbar-left a:hover {
   color: var(--accent-light);
 }

 .topbar-right {
   display: flex;
   gap: 16px;
 }

 .topbar-right a {
   color: rgba(255, 255, 255, .8);
   transition: all .2s;
   padding: 2px 10px;
   border-radius: 100px;
   border: 1px solid rgba(255, 255, 255, .25);
 }

 .topbar-right a:hover {
   color: #fff;
   border-color: rgba(255, 255, 255, .6);
   background: rgba(255, 255, 255, .12);
 }

 .topbar-badge {
   background: var(--accent);
   color: var(--gray-900);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 1px;
   text-transform: uppercase;
   padding: 2px 8px;
   border-radius: 100px;
 }

 /* ════════════════════════════════
       NAVBAR
    ════════════════════════════════ */
 .navbar {
   background: rgba(255, 255, 255, .92);
   position: sticky;
   top: 0;
   z-index: 999;
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-bottom: 1px solid rgba(37, 99, 235, .1);
   box-shadow: 0 4px 24px rgba(37, 99, 235, .06);
 }

 .navbar .container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 76px;
 }

 .logo {
   display: flex;
   align-items: center;
   gap: 14px;
 }

 .logo-icon {
   width: 52px;
   height: 52px;
   flex-shrink: 0;
   /* background: linear-gradient(135deg, var(--primary) 0%, var(--violet) 100%); */
   border-radius: var(--radius);
   display: flex;
   align-items: center;
   justify-content: center;
   /* box-shadow: 0 4px 16px rgba(37, 99, 235, .35); */
 }

 .logo-icon span {
   font-family: var(--font-jp);
   font-size: 26px;
   font-weight: 700;
   color: #fff;
 }

 .logo-text h1 {
   font-family: var(--font-head);
   font-size: 20px;
   font-weight: 800;
   color: #BB221C;
   /*var(--gray-900) */
   letter-spacing: -0.3px;
   line-height: 1.1;
 }

 .logo-text p {
   font-size: 10.5px;
   letter-spacing: 2px;
   color: rgb(63, 63, 63);
   text-transform: uppercase;
   font-weight: 600;
 }

 .nav-links {
   display: flex;
   align-items: center;
   gap: 2px;
 }

 .nav-links a {
   padding: 8px 16px;
   font-size: 14px;
   font-weight: 600;
   color: var(--gray-600);
   border-radius: 100px;
   transition: all .2s;
   position: relative;
 }

 .nav-links a:hover,
 .nav-links a.active {
   color: var(--primary);
   background: var(--gray-100);
 }

 .nav-cta {
   display: flex;
   gap: 10px;
   align-items: center;
 }

 .hamburger {
   display: none;
   flex-direction: column;
   gap: 5px;
   cursor: pointer;
   padding: 6px;
 }

 .hamburger span {
   width: 24px;
   height: 2.5px;
   background: var(--gray-800);
   border-radius: 4px;
   transition: all .3s;
 }

 .mobile-menu {
   display: flex;
   position: fixed;
   top: 76px;
   left: 0;
   right: 0;
   background: rgba(255, 255, 255, .96);
   backdrop-filter: blur(20px);
   box-shadow: var(--shadow);
   padding: 20px 28px;
   z-index: 998;
   flex-direction: column;
   gap: 4px;
   border-bottom: 1px solid var(--gray-100);
   /* new animation property */
   opacity: 0;
   visibility: hidden;
   transform: translateY(-15px);
   /* Starts slightly moved up */
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .mobile-menu.open {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
   /* Slides down to natural position */
 }

 .mobile-menu a {
   padding: 12px 16px;
   font-size: 15px;
   font-weight: 600;
   color: var(--gray-800);
   border-radius: var(--radius-sm);
   transition: all .2s;
 }

 .mobile-menu a:hover {
   background: var(--gray-100);
   color: var(--primary);
 }

 .mobile-menu .m-cta {
   margin-top: 10px;
   text-align: center;
   display: flex;
   justify-content: center;
 }


 /* ════════════════════════════════
       HERO
    ════════════════════════════════ */
 .hero {
   position: relative;
   min-height: 95vh;
   display: flex;
   align-items: center;
   overflow: hidden;
   background: linear-gradient(145deg, #0F172A 0%, #1E3A8A 40%, #1D4ED8 70%, #2563EB 100%);
 }

 .hero-orb1 {
   position: absolute;
   width: 700px;
   height: 700px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(139, 92, 246, .35) 0%, transparent 70%);
   right: -100px;
   top: -100px;
   pointer-events: none;
 }

 .hero-orb2 {
   position: absolute;
   width: 500px;
   height: 500px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(245, 158, 11, .2) 0%, transparent 70%);
   left: -80px;
   bottom: -80px;
   pointer-events: none;
 }

 .hero-orb3 {
   position: absolute;
   width: 400px;
   height: 400px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(59, 130, 246, .25) 0%, transparent 70%);
   left: 35%;
   top: 20%;
   pointer-events: none;
   animation: floatOrb 8s ease-in-out infinite;
 }

 @keyframes floatOrb {

   0%,
   100% {
     transform: translateY(0)
   }

   50% {
     transform: translateY(-30px)
   }
 }

 .hero-grid-pattern {
   position: absolute;
   inset: 0;
   opacity: .04;
   background-image: linear-gradient(rgba(255, 255, 255, 1) 1px, transparent 1px),
     linear-gradient(90deg, rgba(255, 255, 255, 1) 1px, transparent 1px);
   background-size: 40px 40px;
 }

 .hero-content {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center;
   width: 100%;
   padding: 80px 0;
 }

 .hero-left {
   color: #fff;
 }

 .hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: rgba(255, 255, 255, .1);
   border: 1px solid rgba(255, 255, 255, .2);
   border-radius: 100px;
   padding: 8px 18px;
   font-size: 13px;
   font-weight: 600;
   color: rgba(255, 255, 255, .95);
   margin-bottom: 28px;
   backdrop-filter: blur(12px);
 }

 .badge-dot {
   width: 8px;
   height: 8px;
   background: var(--accent);
   border-radius: 50%;
   box-shadow: 0 0 10px rgba(245, 158, 11, .8);
   animation: pulseDot 2s infinite;
 }

 @keyframes pulseDot {

   0%,
   100% {
     opacity: 1;
     transform: scale(1)
   }

   50% {
     opacity: .6;
     transform: scale(1.4)
   }
 }

 .hero-title {
   font-family: var(--font-head);
   font-size: clamp(38px, 5vw, 66px);
   font-weight: 800;
   line-height: 1.08;
   margin-bottom: 24px;
   letter-spacing: -1px;
 }

 .hero-title .accent-text {
   background: linear-gradient(90deg, var(--accent-light) 0%, #FDE68A 50%, var(--accent) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   display: block;
 }

 .hero-jp-text {
   font-family: var(--font-jp);
   font-size: 16px;
   color: rgba(255, 255, 255, .5);
   letter-spacing: 4px;
   margin-bottom: 8px;
   display: block;
 }

 .hero-sub {
   font-size: 17px;
   line-height: 1.75;
   color: rgba(255, 255, 255, .78);
   max-width: 500px;
   margin-bottom: 38px;
 }

 .hero-btns {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
   margin-bottom: 52px;
 }

 .hero-stats {
   display: flex;
   gap: 36px;
   padding-top: 32px;
   border-top: 1px solid rgba(255, 255, 255, .14);
   flex-wrap: wrap;
 }

 /* .stat-item {} */
 .stat-num {
   font-family: var(--font-head);
   font-size: 34px;
   font-weight: 800;
   color: var(--accent-light);
   line-height: 1;
   letter-spacing: -1px;
 }

 .stat-label {
   font-size: 12px;
   color: rgba(255, 255, 255, .6);
   margin-top: 4px;
   letter-spacing: 1px;
   text-transform: uppercase;
   font-weight: 600;
 }

 /* Hero Card */
 .hero-right {
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .hero-card {
   background: rgba(255, 255, 255, .1);
   backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, .2);
   border-radius: var(--radius-xl);
   padding: 36px;
   color: #fff;
   width: 100%;
   max-width: 380px;
   box-shadow: 0 24px 80px rgba(0, 0, 0, .25);
 }

 .hero-card-header {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 24px;
 }

 .hero-card-icon {
   width: 48px;
   height: 48px;
   background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 16px rgba(245, 158, 11, .4);
 }

 .hero-card-icon svg {
   width: 24px;
   height: 24px;
   fill: #fff;
 }

 .hero-card h3 {
   font-family: var(--font-head);
   font-size: 20px;
   font-weight: 700;
 }

 .hero-card>p {
   font-size: 13px;
   color: rgba(255, 255, 255, .65);
   margin-top: 2px;
 }

 .apply-form {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }

 .form-field {
   position: relative;
 }

 .form-field input,
 .form-field select {
   width: 100%;
   padding: 13px 16px;
   border-radius: var(--radius-sm);
   border: 1.5px solid rgba(255, 255, 255, .2);
   background: rgba(255, 255, 255, .1);
   color: #fff;
   font-family: var(--font-body);
   font-size: 14px;
   font-weight: 500;
   outline: none;
   transition: all .2s;
 }

 .form-field input::placeholder {
   color: rgba(255, 255, 255, .45);
 }

 .form-field input:focus,
 .form-field select:focus {
   border-color: var(--accent-light);
   background: rgba(255, 255, 255, .15);
 }

 .form-field select option {
   color: #000;
   background: #fff;
 }

 .apply-form .submit-btn {
   width: 100%;
   justify-content: center;
   padding: 14px;
   background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
   color: var(--gray-900);
   font-weight: 800;
   font-size: 15px;
   border-radius: var(--radius-sm);
   box-shadow: 0 4px 20px rgba(245, 158, 11, .45);
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 8px;
   transition: all .28s;
 }

 .apply-form .submit-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 28px rgba(245, 158, 11, .6);
 }

 /* ════════════════════════════════
       MARQUEE
    ════════════════════════════════ */
 .marquee-strip {
   background: linear-gradient(90deg, var(--accent) 0%, #FBBF24 50%, var(--accent) 100%);
   padding: 13px 0;
   overflow: hidden;
 }

 .marquee-track {
   display: flex;
   gap: 52px;
   animation: marquee 12s linear infinite;
   white-space: nowrap;
 }

 @keyframes marquee {
   from {
     transform: translateX(0)
   }

   to {
     transform: translateX(-50%)
   }
 }

 .marquee-item {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 12.5px;
   font-weight: 800;
   color: var(--gray-900);
   letter-spacing: 1.5px;
   text-transform: uppercase;
 }

 .marquee-star {
   font-size: 14px;
   color: var(--gray-900);
   opacity: .7;
 }

 /* ════════════════════════════════
       ABOUT
    ════════════════════════════════ */
 .about {
   padding: 110px 0;
   background: var(--white);
 }

 .about-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
 }

 .about-visual {
   position: relative;
 }


.about-img-wrap {
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative; /* Essential for absolute positioning of the image */
  box-shadow: var(--shadow-lg);
  
  /* Change the background color here */
  background: #fff; /* You can replace this with a hex code like #e0f2fe or a gradient */
}

.parveen_sir_img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; 
  object-position: top center; 
  display: block;
  transform: scale(1);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.about-img-wrap:hover .parveen_sir_img {
  transform: scale(1.05); 
}


 .about-placeholder-inner p {
   font-size: 14px;
   font-weight: 500;
 }

 .about-floating-badge {
   position: absolute;
   bottom: -22px;
   right: -22px;
   background: var(--white);
   border-radius: var(--radius-lg);
   box-shadow: 0 12px 40px rgba(37, 99, 235, .2);
   padding: 22px 30px;
   text-align: center;
   border: 1px solid var(--gray-100);
 }

 .about-floating-badge .num {
   font-family: var(--font-head);
   font-size: 40px;
   font-weight: 800;
   color: var(--primary);
   line-height: 1;
   letter-spacing: -1px;
 }

 .about-floating-badge .lbl {
   font-size: 11px;
   color: var(--gray-600);
   letter-spacing: 1px;
   text-transform: uppercase;
   margin-top: 4px;
   font-weight: 600;
 }

 .about-text p {
   color: var(--gray-600);
   line-height: 1.85;
   margin-top: 18px;
   font-size: 15.5px;
 }

 .about-features {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   margin-top: 32px;
 }

 .feature-item {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   padding: 18px;
   border-radius: var(--radius);
   background: var(--gray-50);
   border: 1px solid var(--gray-100);
   transition: all .25s;
 }

 .feature-item:hover {
   border-color: var(--gray-200);
   box-shadow: var(--shadow-sm);
   transform: translateY(-2px);
 }

 .feature-icon {
   width: 42px;
   height: 42px;
   flex-shrink: 0;
   background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 12px rgba(37, 99, 235, .25);
 }

 .feature-icon svg {
   width: 20px;
   height: 20px;
   fill: #fff;
 }

 .feature-info h4 {
   font-size: 13.5px;
   font-weight: 700;
   margin-bottom: 3px;
   color: var(--gray-800);
 }

 .feature-info p {
   font-size: 12.5px;
   color: var(--gray-600);
   line-height: 1.5;
 }

 /* ════════════════════════════════
       COURSES
    ════════════════════════════════ */
 .courses {
   padding: 110px 0;
   background: var(--gray-50);
 }

 .courses-header {
   text-align: center;
   max-width: 620px;
   margin: 0 auto 60px;
 }

 .courses-header p {
   color: var(--gray-600);
   margin-top: 16px;
   line-height: 1.75;
   font-size: 16px;
 }

 .courses-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
 }

 .course-card {
   background: var(--white);
   border-radius: var(--radius-lg);
   overflow: hidden;
   border: 1px solid rgba(37, 99, 235, .08);
   box-shadow: 0 2px 16px rgba(37, 99, 235, .06);
   transition: all .3s cubic-bezier(.4, 0, .2, 1);
 }

 .course-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-lg);
   border-color: rgba(37, 99, 235, .15);
 }

 .card-top {
   height: 158px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
 }

 .card-top-content {
   text-align: center;
   z-index: 2;
   position: relative;
 }

 .card-top svg {
   width: 52px;
   height: 52px;
   fill: rgba(255, 255, 255, .85);
   margin-bottom: 8px;
   display: block;
   margin: 0 auto 8px;
 }

 .card-top-jp {
   font-family: var(--font-jp);
   font-size: 22px;
   color: rgba(255, 255, 255, .6);
   letter-spacing: 6px;
 }

 .card-body {
   padding: 26px;
 }

 .card-tag {
   font-size: 10.5px;
   font-weight: 800;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--primary);
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 6px;
 }

 .card-tag::before {
   content: '';
   width: 4px;
   height: 14px;
   background: var(--primary);
   border-radius: 4px;
 }

 .card-title {
   font-family: var(--font-head);
   font-size: 19px;
   font-weight: 700;
   line-height: 1.3;
   margin-bottom: 10px;
   color: var(--gray-900);
 }

 .card-desc {
   font-size: 13.5px;
   color: var(--gray-600);
   line-height: 1.7;
   margin-bottom: 22px;
 }

 .card-meta {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   padding-top: 16px;
   border-top: 1px solid var(--gray-100);
 }

 .card-link {
   font-size: 13px;
   font-weight: 700;
   color: var(--primary);
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 7px 16px;
   background: var(--gray-100);
   border-radius: 100px;
   transition: all .2s;
 }

 .card-link:hover {
   background: var(--primary);
   color: #fff;
 }

 /* ════════════════════════════════
       WHY YAMATO
    ════════════════════════════════ */
 .why {
   padding: 110px 0;
   background: var(--white);
 }

 .why-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
 }

 .why-text p {
   color: var(--gray-600);
   line-height: 1.85;
   margin-top: 18px;
   font-size: 15.5px;
 }

 .why-list {
   margin-top: 34px;
   display: flex;
   flex-direction: column;
   gap: 16px;
 }

 .why-item {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   padding: 20px 22px;
   border-radius: var(--radius);
   border: 1.5px solid var(--gray-100);
   transition: all .25s;
   cursor: pointer;
   background: var(--white);
 }

 .why-item:hover {
   border-color: var(--primary);
   background: var(--gray-50);
   box-shadow: var(--shadow-sm);
   transform: translateX(4px);
 }

 .why-num {
   width: 42px;
   height: 42px;
   flex-shrink: 0;
   background: linear-gradient(135deg, var(--primary) 0%, var(--violet) 100%);
   color: #fff;
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-head);
   font-size: 14px;
   font-weight: 800;
   box-shadow: 0 4px 12px rgba(37, 99, 235, .3);
 }

 .why-info h4 {
   font-size: 15px;
   font-weight: 700;
   margin-bottom: 4px;
   color: var(--gray-900);
 }

 .why-info p {
   font-size: 13.5px;
   color: var(--gray-600);
   line-height: 1.65;
 }

 .why-visual {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px;
 }

 .why-box {
   border-radius: var(--radius-lg);
   padding: 34px 26px;
   text-align: center;
   transition: all .3s;
   position: relative;
   overflow: hidden;
 }

 .why-box::before {
   content: '';
   position: absolute;
   inset: 0;
   opacity: 0;
   transition: opacity .3s;
   background: linear-gradient(135deg, rgba(255, 255, 255, .1) 0%, transparent 100%);
 }

 .why-box:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-lg);
 }

 .why-box:hover::before {
   opacity: 1;
 }

 .why-box:nth-child(1) {
   background: linear-gradient(145deg, var(--primary) 0%, var(--primary-dark) 100%);
 }

 .why-box:nth-child(2) {
   background: linear-gradient(145deg, var(--violet) 0%, #6D28D9 100%);
 }

 .why-box:nth-child(3) {
   background: linear-gradient(145deg, var(--accent) 0%, var(--accent-dark) 100%);
 }

 .why-box:nth-child(4) {
   background: linear-gradient(145deg, var(--emerald) 0%, #059669 100%);
 }

 .wb-num {
   font-family: var(--font-head);
   font-size: 42px;
   font-weight: 800;
   color: #fff;
   line-height: 1;
   letter-spacing: -1px;
 }

 .wb-label {
   font-size: 13px;
   margin-top: 8px;
   color: rgba(255, 255, 255, .8);
   font-weight: 600;
   letter-spacing: .5px;
 }

 /* ════════════════════════════════
       TESTIMONIALS
    ════════════════════════════════ */
 .testimonials {
   padding: 110px 0;
   background: linear-gradient(145deg, var(--gray-900) 0%, #1E1B4B 50%, #1D4ED8 100%);
 }

 .testi-header {
   text-align: center;
   max-width: 580px;
   margin: 0 auto 60px;
 }

 .testi-header .section-tag {
   background: rgba(255, 255, 255, .1);
   border-color: rgba(255, 255, 255, .2);
   color: var(--accent-light);
 }

 .testi-header .section-tag::before {
   background: var(--accent-light);
 }

 .testi-header .section-title {
   color: #ffffff;
 }

 /* .texti-header .section-title .highlight{ color: yellow;} */
 .testi-header p {
   color: rgba(255, 255, 255, .65);
   margin-top: 16px;
   font-size: 15.5px;
   line-height: 1.75;
 }

 .testi-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
 }

 .testi-card {
   background: rgba(95, 87, 87, 0.07);
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: var(--radius-lg);
   padding: 32px;
   transition: all .3s;
   position: relative;
   overflow: hidden;
 }

 .testi-card::before {
   content: '"';
   position: absolute;
   top: 10px;
   right: 20px;
   font-family: Georgia, serif;
   font-size: 80px;
   color: rgba(255, 255, 255, .07);
   line-height: 1;
 }

 .testi-card:hover {
   background: rgba(255, 255, 255, .12);
   transform: translateY(-4px);
   border-color: rgba(255, 255, 255, .22);
 }

 .testi-stars {
   margin-bottom: 18px;
   display: flex;
   gap: 3px;
 }

 .testi-stars span {
   color: var(--accent);
   font-size: 16px;
 }

 .testi-text {
   font-size: 14.5px;
   line-height: 1.8;
   color: rgba(255, 255, 255, .82);
   margin-bottom: 24px;
   font-style: italic;
 }

 .testi-author {
   display: flex;
   align-items: center;
   gap: 14px;
 }

 .testi-avatar {
   width: 48px;
   height: 48px;
   flex-shrink: 0;
   background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-head);
   font-size: 18px;
   font-weight: 800;
   color: var(--gray-900);
   box-shadow: 0 4px 14px rgba(245, 158, 11, .4);
 }

 .testi-name {
   font-weight: 700;
   font-size: 15px;
   color: #fff;
 }

 .testi-role {
   font-size: 12px;
   color: rgba(255, 255, 255, .5);
   margin-top: 2px;
 }

 /* ════════════════════════════════
       GALLERY
    ════════════════════════════════ */
 .gallery {
   padding: 110px 0;
   background: var(--white);
 }

 .gallery-header {
   text-align: center;
   max-width: 560px;
   margin: 0 auto 60px;
 }

 .gallery-header p {
   color: var(--gray-600);
   margin-top: 14px;
   font-size: 15.5px;
   line-height: 1.75;
 }

 .gallery-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-auto-rows: 200px;
   gap: 16px;
 }

 .gal-item {
   border-radius: var(--radius);
   overflow: hidden;
   cursor: pointer;
 }

 .gal-thumb {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform .4s cubic-bezier(.4, 0, .2, 1);
   position: relative;
   overflow: hidden;
 }

 .gal-item:hover .gal-thumb {
   transform: scale(1.06);
 }

 .gal-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(37, 99, 235, .7) 0%, rgba(139, 92, 246, .6) 100%);
   opacity: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 1px;
   transition: opacity .3s;
   flex-direction: column;
   gap: 8px;
 }

 .gal-overlay svg {
   width: 28px;
   height: 28px;
   fill: #fff;
 }

 .gal-item:hover .gal-overlay {
   opacity: 1;
 }

 /* Forces all gallery and modal images to perfectly cover their container */
.gal-thumb img,
.modal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

 /* ════════════════════════════════
       CONTACT
    ════════════════════════════════ */
 .contact {
   padding: 110px 0;
   background: var(--gray-50);
 }

 .contact-grid {
   display: grid;
   grid-template-columns: 1fr 1.1fr;
   gap: 60px;
 }

 .contact-info p {
   color: var(--gray-600);
   line-height: 1.85;
   margin-top: 16px;
   margin-bottom: 38px;
   font-size: 15.5px;
 }

 .contact-details {
   display: flex;
   flex-direction: column;
   gap: 18px;
 }

 .detail-row {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   padding: 16px;
   background: var(--white);
   border-radius: var(--radius);
   border: 1px solid var(--gray-100);
   transition: all .25s;
 }

 .detail-row:hover {
   border-color: var(--gray-200);
   box-shadow: var(--shadow-sm);
 }

 .detail-icon {
   width: 50px;
   height: 50px;
   flex-shrink: 0;
   background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 14px rgba(37, 99, 235, .25);
 }

 .detail-icon svg {
   width: 22px;
   height: 22px;
   fill: #fff;
 }

 .detail-text h4 {
   font-size: 13px;
   font-weight: 700;
   margin-bottom: 3px;
   color: var(--gray-600);
   text-transform: uppercase;
   letter-spacing: 1px;
 }

 .detail-text p {
   font-size: 14.5px;
   color: var(--gray-900);
   font-weight: 600;
   line-height: 1.5;
 }

 .map-box {
   margin-top: 30px;
   background: var(--white);
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   border: 1px solid var(--gray-100);
 }

 .map-placeholder {
   height: 180px;
   background: linear-gradient(135deg, var(--gray-100) 0%, #E0E7FF 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 10px;
   color: var(--gray-600);
 }

 .map-placeholder svg {
   width: 36px;
   height: 36px;
   fill: var(--primary);
 }

 .map-placeholder p {
   font-size: 13px;
   font-weight: 600;
   color: var(--primary);
 }

 .contact-form-box {
   background: var(--white);
   border-radius: var(--radius-xl);
   padding: 44px;
   box-shadow: var(--shadow-lg);
   border: 1px solid var(--gray-100);
 }

 .contact-form-box h3 {
   font-family: var(--font-head);
   font-size: 26px;
   font-weight: 800;
   margin-bottom: 6px;
   color: var(--gray-900);
 }

 .contact-form-box>p {
   font-size: 14.5px;
   color: var(--gray-600);
   margin-bottom: 30px;
   line-height: 1.6;
 }

 .form-group {
   margin-bottom: 18px;
 }

 .form-group label {
   display: block;
   font-size: 12.5px;
   font-weight: 700;
   margin-bottom: 7px;
   color: var(--gray-800);
   text-transform: uppercase;
   letter-spacing: 1px;
 }

 .form-group input,
 .form-group select,
 .form-group textarea {
   width: 100%;
   padding: 13px 16px;
   border: 2px solid var(--gray-100);
   border-radius: var(--radius-sm);
   font-family: var(--font-body);
   font-size: 14.5px;
   color: var(--gray-900);
   background: var(--gray-50);
   outline: none;
   transition: all .2s;
   resize: vertical;
   font-weight: 500;
 }

 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
   border-color: var(--primary);
   background: var(--white);
   box-shadow: 0 0 0 4px rgba(37, 99, 235, .08);
 }

 .form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
 }

 .form-submit {
   width: 100%;
   justify-content: center;
   margin-top: 6px;
   padding: 15px;
   font-size: 16px;
   border-radius: var(--radius-sm);
 }

 /* ════════════════════════════════
       FOOTER
    ════════════════════════════════ */
 .footer {
   background: var(--gray-900);
   color: rgba(255, 255, 255, .65);
   padding: 72px 0 0;
 }

 .footer-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr;
   gap: 48px;
   margin-bottom: 52px;
 }

 .footer-logo {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 20px;
 }

 .footer-logo-icon {
   width: 48px;
   height: 48px;
   flex-shrink: 0;
   background: linear-gradient(135deg, var(--primary) 0%, var(--violet) 100%);
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .footer-logo-icon span {
   font-family: var(--font-jp);
   font-size: 24px;
   font-weight: 700;
   color: #fff;
 }

 .footer-logo-text h2 {
   font-family: var(--font-head);
   font-size: 18px;
   color: #BB221C;
   font-weight: 800;
 }

 .footer-logo-text p {
   font-size: 10px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: rgb(255, 255, 255);
   margin-top: 2px;
 }

 .footer-brand p {
   font-size: 14px;
   line-height: 1.8;
   max-width: 280px;
 }

 .footer-socials {
   display: flex;
   gap: 10px;
   margin-top: 24px;
 }

 .social-btn {
   width: 40px;
   height: 40px;
   border-radius: var(--radius-sm);
   background: rgba(255, 255, 255, .07);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all .2s;
   border: 1px solid rgba(255, 255, 255, .08);
 }

 .social-btn:hover {
   background: var(--primary);
   border-color: var(--primary);
   transform: translateY(-2px);
 }

 .social-btn svg {
   width: 16px;
   height: 16px;
   fill: rgba(255, 255, 255, .75);
 }

 .footer-col h4 {
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   color: #fff;
   margin-bottom: 22px;
   padding-bottom: 12px;
   border-bottom: 1px solid rgba(255, 255, 255, .08);
 }

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

 .footer-col ul li a {
   font-size: 14px;
   transition: color .2s;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .footer-col ul li a::before {
   content: '→';
   font-size: 11px;
   opacity: 0;
   transition: opacity .2s;
 }

 .footer-col ul li a:hover {
   color: var(--accent-light);
 }

 .footer-col ul li a:hover::before {
   opacity: 1;
 }

 .footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .08);
   padding: 22px 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px;
   font-size: 13px;
 }

 .footer-bottom .brand-name {
   color: var(--accent-light);
   font-weight: 700;
 }

 /* ════════════════════════════════
       SCROLL TOP
    ════════════════════════════════ */
 .scroll-top {
   position: fixed;
   bottom: 28px;
   right: 28px;
   width: 50px;
   height: 50px;
   background: linear-gradient(135deg, var(--primary) 0%, var(--violet) 100%);
   color: #fff;
   border: none;
   border-radius: var(--radius);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 6px 24px rgba(37, 99, 235, .45);
   opacity: 0;
   transform: translateY(20px);
   transition: all .3s;
   z-index: 1000;
 }

 .scroll-top.visible {
   opacity: 1;
   transform: translateY(0);
 }

 .scroll-top:hover {
   transform: translateY(-3px);
   box-shadow: 0 10px 32px rgba(37, 99, 235, .6);
 }

 .scroll-top svg {
   width: 20px;
   height: 20px;
   fill: #fff;
   stroke: #fff;
   stroke-width: 1;
 }

 /* ════════════════════════════════
       RESPONSIVE
    ════════════════════════════════ */
 @media (max-width: 1024px) {
   .hero-content {
     grid-template-columns: 1fr;
     gap: 52px;
   }

   .hero-right {
     display: none;
   }

   .about-grid,
   .why-grid,
   .contact-grid {
     grid-template-columns: 1fr;
     gap: 52px;
   }

   .about-floating-badge {
     right: 0;
   }

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

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

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

   .gallery-grid .gal-item.wide {
     grid-column: span 1;
   }

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

 @media (max-width: 768px) {
   .topbar .container {
     justify-content: center;
   }

   .topbar-right {
     display: none;
   }

   .nav-links,
   .nav-cta {
     display: none;
   }

   .hamburger {
     display: flex;
   }

   .hero-stats {
     gap: 24px;
     flex-wrap: wrap;
   }

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

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

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

   .gallery-grid .gal-item.tall {
     grid-row: span 1;
   }

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

   .form-row {
     grid-template-columns: 1fr;
   }

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

   .topbar-left {
     flex-direction: column;
     gap: 4px;
     align-items: center;
   }

   .hero-title {
     font-size: 36px;
   }

   .contact-form-box {
     padding: 28px;
   }
 }

 /* ════════════════════════════════
       ANIMATIONS
    ════════════════════════════════ */
 .fade-up {
   opacity: 0;
   transform: translateY(36px);
   transition: opacity .7s ease, transform .7s ease;
 }

 .fade-up.visible {
   opacity: 1;
   transform: none;
 }

 .toast {
   position: fixed;
   bottom: 90px;
   right: 28px;
   background: linear-gradient(135deg, var(--primary-dark) 0%, var(--violet) 100%);
   color: #fff;
   padding: 14px 22px;
   border-radius: var(--radius);
   font-size: 14px;
   font-weight: 600;
   z-index: 9999;
   transform: translateY(20px);
   opacity: 0;
   transition: all .35s;
   box-shadow: 0 8px 24px rgba(37, 99, 235, .4);
   max-width: 320px;
 }

 .toast.show {
   opacity: 1;
   transform: none;
 }




 /* ════════════════════════════════
    GALLERY MODAL (FULL SCREEN & CATEGORIES)
    ════════════════════════════════ */
 .gallery-modal {
   position: fixed;
   inset: 0;
   background: var(--white);
   /* Solid background for full screen */
   z-index: 10000;
   display: flex;
   align-items: flex-start;
   /* Align to top for scrolling */
   justify-content: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease;
   overflow-y: auto;
   /* Allow scrolling on the modal background itself */
 }

 .gallery-modal.active {
   opacity: 1;
   pointer-events: auto;
 }

 .modal-content {
   background: var(--white);
   width: 100%;
   min-height: 100vh;
   /* Full screen height */
   padding: 60px 5%;
   /* Responsive padding */
   position: relative;
   transform: translateY(20px);
   transition: transform 0.3s ease;
 }

 .gallery-modal.active .modal-content {
   transform: translateY(0);
 }

 .close-modal {
   position: fixed;
   /* Fixed so it stays visible when scrolling */
   top: 20px;
   right: 30px;
   font-size: 42px;
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(4px);
   border-radius: 50%;
   width: 50px;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
   cursor: pointer;
   color: var(--gray-600);
   transition: all 0.2s;
   line-height: 1;
   z-index: 10001;
   box-shadow: var(--shadow-sm);
 }

 .close-modal:hover {
   color: var(--rose);
   transform: scale(1.1);
 }

 .modal-content h2 {
   font-family: var(--font-head);
   font-size: 32px;
   margin-bottom: 40px;
   color: var(--gray-900);
   text-align: center;
 }

 /* Category Styling */
 .gallery-category {
   margin-bottom: 50px;
 }

 .category-title {
   font-family: var(--font-head);
   font-size: 22px;
   color: var(--primary);
   margin-bottom: 20px;
   padding-bottom: 10px;
   border-bottom: 2px solid var(--gray-100);
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .modal-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 16px;
 }

 .modal-item {
   border-radius: var(--radius);
   height: 220px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-weight: 700;
   box-shadow: var(--shadow-sm);
   overflow: hidden;
   transition: transform 0.3s;
 }

 .modal-item:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow);
 }

 /* Mobile Tweaks for Modal */
 @media (max-width: 768px) {
   .modal-content {
     padding: 50px 20px;
   }

   .modal-grid {
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   }

   .modal-item {
     height: 150px;
   }

   .close-modal {
     top: 10px;
     right: 10px;
     width: 40px;
     height: 40px;
     font-size: 32px;
   }
 }

 /* Mobile Tweaks for Modal */
 @media (max-width: 768px) {
   .modal-content {
     padding: 30px 20px;
   }

   .modal-grid {
     grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
   }

   .modal-item {
     height: 140px;
   }
 }



 /* ═══ LIGHTBOX MODAL ═══ */
 .lightbox-modal {
   background: rgba(0, 0, 0, 0.95) !important; /* Cinematic dark background */
   align-items: center; /* Center the image vertically */
   padding: 0;
 }

 .lightbox-modal .close-modal {
   color: #fff;
   background: rgba(255, 255, 255, 0.1);
 }

 .lightbox-modal .close-modal:hover {
   background: rgba(239, 68, 68, 0.8); /* Red on hover */
   color: #fff;
 }

 .lightbox-content {
   width: 100%;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
 }

 .lightbox-content img {
   max-width: 100%;
   max-height: 90vh;
   object-fit: contain; /* Ensures the whole image is visible, no cropping */
   border-radius: 8px;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
   transform: scale(0.95);
   transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
 }

 .gallery-modal.active .lightbox-content img {
   transform: scale(1);
 }