/* --- CSS Variables extracted from the Logo --- */
 :root {
     --bg-darkest: #0d0e12;
     /* Darker shade for body */
     --header-bg: rgba(26, 28, 35, 0.95);
     /* Matched to logo background */
     --text-light: #f8fafc;
     --text-muted: #9ba3af;
     --accent-gold: #e6c040;
     /* Matched to logo gold */
     --accent-gold-light: #fbe689;
     --transition: all 0.3s ease;
 }

 /* --- Base Reset --- */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }

 body {
     background-color: var(--bg-darkest);
     color: var(--text-light);
     min-height: 100vh;
 }

 /* --- Top Announcement Bar --- */
 .top-bar {
     background-color: #000000;
     color: var(--text-light);
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 12px 20px;
     position: relative;
     font-size: 14px;
     font-weight: 500;
     border-bottom: 1px solid rgba(230, 192, 64, 0.2);
     /* Subtle gold border */
 }

 .top-bar-content {
     display: flex;
     align-items: center;
     gap: 12px;
     text-align: center;
 }

 .gold-dot {
     width: 10px;
     height: 10px;
     background-color: var(--accent-gold);
     border-radius: 50%;
     display: inline-block;
     box-shadow: 0 0 8px var(--accent-gold);
 }

 /* =========================================
           DROPDOWN MENU STYLES
           ========================================= */
 .dropdown {
     position: relative;
 }

 /* The little arrow next to OurStacks */
 .dropdown-icon {
     font-size: 10px !important;
     margin-left: 4px;
     transition: transform 0.3s ease !important;
 }

 .dropdown:hover .dropdown-icon {
     transform: rotate(180deg);
     color: var(--accent-gold);
 }

 /* The hidden box */
 .dropdown-content {
     visibility: hidden;
     opacity: 0;
     position: absolute;
     top: calc(100% + 30px);
     left: 0;
     background-color: var(--header-bg);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     min-width: 200px;
     box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.6);
     border-radius: 8px;
     border: 1px solid rgba(255, 255, 255, 0.08);
     padding: 10px 0;
     z-index: 1002;
     transform: translateY(10px);
     transition: all 0.3s ease;
     list-style: none;
 }

 /* Show the box on hover (Desktop) */
 .dropdown:hover .dropdown-content {
     visibility: visible;
     opacity: 1;
     top: calc(100% + 20px);
     /* 20px gap below the header nav item */
     transform: translateY(0);
 }

 /* Style the links inside the dropdown */
 .dropdown-content li {
     width: 100%;
 }

 .dropdown-content li a {
     display: block;
     padding: 12px 20px;
     color: var(--text-light);
     font-size: 14px;
     transition: all 0.2s ease;
 }

 /* Remove the gold underline animation from dropdown items */
 .dropdown-content li a::after {
     display: none;
 }

 /* Hover effect for individual dropdown links */
 .dropdown-content li a:hover {
     background-color: rgba(230, 192, 64, 0.1);
     color: var(--accent-gold);
     padding-left: 25px;
     /* Slight indent animation */
     border-left: 2px solid var(--accent-gold);
 }

 /* --- Mobile Responsiveness for Dropdown --- */
 @media (max-width: 992px) {
     .dropdown-content {
         position: static;
         visibility: visible;
         opacity: 1;
         display: none;
         /* Hidden by default on mobile, toggled via JS */
         background-color: transparent;
         box-shadow: none;
         border: none;
         padding: 0 0 0 20px;
         /* Indent under parent link */
         transform: none;
         margin-top: 10px;
     }

     /* Class added by JavaScript when tapped */
     .dropdown.active .dropdown-content {
         display: block;
     }

     .dropdown.active .dropdown-icon {
         transform: rotate(180deg);
     }
 }

 .close-btn {
     position: absolute;
     right: 20px;
     background: transparent;
     border: none;
     color: var(--text-muted);
     width: 24px;
     height: 24px;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     font-size: 16px;
     transition: var(--transition);
 }

 .close-btn:hover {
     color: var(--accent-gold);
     transform: scale(1.1);
 }

 /* --- Main Header Styling (Sticky) --- */
 .main-header {
     position: sticky;
     top: 0;
     width: 100%;
     background-color: var(--header-bg);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 5%;
     height: 80px;
     z-index: 1000;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
 }

 /* Logo Image Area */
 .logo {
     display: flex;
     align-items: center;
     text-decoration: none;
     z-index: 1001;
 }

 .logo-img {
     max-height: 55px;
     /* Adjust based on your gold logo */
     width: auto;
     transition: var(--transition);
 }

 .logo-img:hover {
     transform: scale(1.05);
 }

 /* --- Desktop Navigation --- */
 .nav-container {
     display: flex;
     align-items: center;
     gap: 40px;
 }

 .nav-links {
     display: flex;
     gap: 25px;
     list-style: none;
     align-items: center;
 }

 .nav-links li a {
     color: var(--text-light);
     text-decoration: none;
     font-size: 15px;
     font-weight: 500;
     display: flex;
     align-items: center;
     gap: 8px;
     position: relative;
     transition: var(--transition);
 }

 .nav-links li a i {
     color: var(--text-muted);
     font-size: 14px;
     transition: var(--transition);
 }

 /* Link Hover Animation */
 .nav-links li a:hover,
 .nav-links li a:hover i {
     color: var(--accent-gold);
 }

 .nav-links li a::after {
     content: '';
     position: absolute;
     width: 0;
     height: 2px;
     bottom: -6px;
     left: 0;
     background-color: var(--accent-gold);
     transition: width 0.3s ease;
     box-shadow: 0 0 8px var(--accent-gold);
 }

 .nav-links li a:hover::after,
 .nav-links li a.active::after {
     width: 100%;
 }

 /* --- Animated CTA Button --- */
 .cta-btn {
     background: transparent;
     color: var(--accent-gold);
     border: 2px solid var(--accent-gold);
     padding: 10px 24px;
     border-radius: 30px;
     font-size: 15px;
     font-weight: 600;
     cursor: pointer;
     text-decoration: none;
     transition: var(--transition);
 }

 .cta-btn:hover {
     background: var(--accent-gold);
     color: #000;
     /* Dark text on gold background */
     box-shadow: 0 0 15px rgba(230, 192, 64, 0.4);
     transform: translateY(-2px);
 }

 /* --- Hamburger Menu Icon (Mobile) --- */
 .hamburger {
     display: none;
     cursor: pointer;
     flex-direction: column;
     gap: 6px;
     z-index: 1001;
 }

 .hamburger span {
     display: block;
     width: 28px;
     height: 3px;
     background-color: var(--text-light);
     border-radius: 3px;
     transition: var(--transition);
 }

 /* Off-Canvas Overlay */
 .overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.7);
     backdrop-filter: blur(5px);
     opacity: 0;
     visibility: hidden;
     transition: var(--transition);
     z-index: 998;
 }

 .overlay.active {
     opacity: 1;
     visibility: visible;
 }

 /* --- Mobile Responsiveness & Off-Canvas Menu --- */
 @media (max-width: 1024px) {
     .nav-container {
         gap: 20px;
     }

     .nav-links {
         gap: 15px;
     }

     .nav-links li a {
         font-size: 14px;
     }
 }

 @media (max-width: 992px) {
     .top-bar {
         padding: 15px 40px 15px 20px;
     }

     .nav-container {
         position: fixed;
         top: 0;
         right: -100%;
         width: 300px;
         max-width: 80%;
         height: 100vh;
         background-color: #1a1c23;
         /* Solid dark background for mobile menu */
         flex-direction: column;
         justify-content: center;
         align-items: flex-start;
         padding: 40px;
         gap: 30px;
         transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
         box-shadow: -5px 0 25px rgba(0, 0, 0, 0.8);
         z-index: 999;
         border-left: 1px solid rgba(230, 192, 64, 0.1);
     }

     .nav-container.active {
         right: 0;
     }

     .nav-links {
         flex-direction: column;
         align-items: flex-start;
         width: 100%;
         gap: 25px;
     }

     .nav-links li a {
         font-size: 18px;
     }

     .hamburger {
         display: flex;
     }

     /* Hamburger to X Animation */
     .hamburger.active span:nth-child(1) {
         transform: translateY(9px) rotate(45deg);
         background-color: var(--accent-gold);
     }

     .hamburger.active span:nth-child(2) {
         opacity: 0;
     }

     .hamburger.active span:nth-child(3) {
         transform: translateY(-9px) rotate(-45deg);
         background-color: var(--accent-gold);
     }
 }

 /* --- Hero Section Styles --- */
 .hero-section {
     padding: 140px 5% 100px;
     /* Account for top-bar + header */
     background-color: var(--bg-darkest);
     color: var(--text-light);
     min-height: 80vh;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
 }

 /* Subtle dynamic background glow */
 .hero-section::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 100vw;
     height: 100vw;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(230, 192, 64, 0.03) 0%, rgba(230, 192, 64, 0) 60%);
     transform: translate(-50%, -50%);
     pointer-events: none;
     animation: backgroundPulse 8s ease-in-out infinite;
 }

 .hero-container {
     max-width: 1200px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
     align-items: center;
 }

 /* --- Hero Content (Text) --- */
 .hero-content {
     text-align: left;
 }

 .pre-headline {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: 14px;
     color: var(--accent-gold);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     margin-bottom: 20px;
     animation: fadeInSlideUp 0.6s ease-out;
 }

 .pre-headline i {
     font-size: 16px;
 }

 .hero-content h1 {
     font-size: 52px;
     font-weight: 800;
     line-height: 1.2;
     color: var(--text-light);
     margin-bottom: 25px;
     letter-spacing: -1.5px;
     animation: fadeInSlideUp 0.8s ease-out 0.2s;
     animation-fill-mode: both;
 }

 .brand-word {
     color: var(--accent-gold);
     position: relative;
 }

 .brand-word::after {
     content: '';
     position: absolute;
     bottom: -8px;
     left: 0;
     width: 100%;
     height: 4px;
     background-color: var(--accent-gold);
     border-radius: 2px;
     box-shadow: 0 0 10px var(--accent-gold);
 }

 .hero-content p {
     font-size: 17px;
     line-height: 1.8;
     color: var(--text-muted);
     margin-bottom: 40px;
     max-width: 550px;
     animation: fadeInSlideUp 1s ease-out 0.4s;
     animation-fill-mode: both;
 }

 /* Hero Action Buttons */
 .hero-actions {
     display: flex;
     gap: 20px;
     animation: fadeInSlideUp 1.2s ease-out 0.6s;
     animation-fill-mode: both;
 }

 .cta-primary {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background-color: var(--accent-gold);
     color: #000;
     padding: 15px 35px;
     border-radius: 40px;
     font-size: 16px;
     font-weight: 700;
     text-decoration: none;
     transition: var(--transition);
     box-shadow: 0 5px 15px rgba(230, 192, 64, 0.3);
 }

 .cta-primary:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 25px rgba(230, 192, 64, 0.5);
 }

 .cta-primary i {
     transition: transform 0.3s ease;
 }

 .cta-primary:hover i {
     transform: translateX(4px);
 }

 .cta-secondary {
     display: inline-flex;
     align-items: center;
     border: 2px solid rgba(255, 255, 255, 0.1);
     color: var(--accent-gold);
     background-color: rgba(230, 192, 64, 0.05);
     padding: 13px 35px;
     /* Adjust for border */
     border-radius: 40px;
     font-size: 16px;
     font-weight: 600;
     text-decoration: none;
     transition: var(--transition);
 }

 .cta-secondary:hover {
     border-color: var(--accent-gold);
     color: var(--accent-gold);
     background-color: rgba(230, 192, 64, 0.05);
 }

 /* --- Hero Visual (Animation) --- */
 .hero-visual {
     position: relative;
     animation: fadeInScale 1s ease-out 0.3s;
     animation-fill-mode: both;
 }

 .visual-wrapper {
     position: relative;
     width: 100%;
     height: 450px;
     /* Adjust height as needed */
     display: flex;
     justify-content: center;
     align-items: center;
 }

 /* Network Effect: Multiple dots and connecting lines */
 .particle-network {
     position: relative;
     width: 350px;
     height: 350px;
 }

 .node {
     position: absolute;
     width: 12px;
     height: 12px;
     background-color: var(--accent-gold);
     border-radius: 50%;
     box-shadow: 0 0 10px var(--accent-gold);
     transition: var(--transition);
     opacity: 0.9;
     cursor: pointer;
     display: block;
     z-index: 5;
 }

 .node:hover {
     background-color: #EA1413;
     box-shadow: 0 0 20px #EA1413;
     transform: scale(1.5) !important;
     opacity: 1;
     z-index: 10;
 }

 /* Positions and initial scales */
 .node-1 {
     top: 10%;
     left: 10%;
 }

 .node-2 {
     top: 30%;
     left: 45%;
 }

 .node-3 {
     top: 15%;
     left: 80%;
 }

 .node-4 {
     top: 55%;
     left: 75%;
 }

 .node-5 {
     top: 80%;
     left: 55%;
 }

 .node-6 {
     top: 75%;
     left: 20%;
 }

 .node-7 {
     top: 50%;
     left: 15%;
 }

 /* Lines between nodes */
 .line {
     position: absolute;
     background-color: rgba(230, 192, 64, 0.2);
     height: 1px;
     transform-origin: top left;
 }

 .line-1-2 {
     top: calc(10% + 6px);
     left: calc(10% + 6px);
     width: calc((45% - 10%)*3.5 + (30% - 10%)*3.5);
     transform: rotate(20deg);
 }

 /* Approximate line from node 1 to 2 */
 .line-2-3 {
     top: calc(30% + 6px);
     left: calc(45% + 6px);
     width: calc((80% - 45%)*3.5 + (30% - 15%)*3.5);
     transform: rotate(-25deg);
 }

 .line-3-4 {
     top: calc(15% + 6px);
     left: calc(80% + 6px);
     width: calc((80% - 75%)*3.5 + (55% - 15%)*3.5);
     transform: rotate(95deg);
 }

 .line-4-5 {
     top: calc(55% + 6px);
     left: calc(75% + 6px);
     width: calc((75% - 55%)*3.5 + (80% - 55%)*3.5);
     transform: rotate(130deg);
 }

 .line-5-6 {
     top: calc(80% + 6px);
     left: calc(55% + 6px);
     width: calc((55% - 20%)*3.5 + (80% - 75%)*3.5);
     transform: rotate(170deg);
 }

 .line-6-7 {
     top: calc(75% + 6px);
     left: calc(20% + 6px);
     width: calc((20% - 15%)*3.5 + (75% - 50%)*3.5);
     transform: rotate(240deg);
 }

 /* Code Stream Visual */
 .code-stream {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     font-family: 'Courier New', Courier, monospace;
     font-size: 14px;
     font-weight: 700;
 }

 .code-line {
     position: absolute;
     opacity: 0;
     display: flex;
     align-items: center;
 }

 /* Scatter positions and random fade in/out durations */
 .code-line:nth-child(1) {
     top: 15%;
     left: 10%;
     animation: randomFadeInOut 6s ease-in-out infinite 0.5s;
 }

 /* HTML */
 .code-line:nth-child(2) {
     top: 5%;
     right: 15%;
     animation: randomFadeInOut 7s ease-in-out infinite 2s;
 }

 /* CSS */
 .code-line:nth-child(3) {
     top: 45%;
     right: 5%;
     animation: randomFadeInOut 5s ease-in-out infinite 1s;
 }

 /* JS */
 .code-line:nth-child(4) {
     top: 75%;
     left: 15%;
     animation: randomFadeInOut 8s ease-in-out infinite 3s;
 }

 /* Node */
 .code-line:nth-child(5) {
     top: 65%;
     right: 20%;
     animation: randomFadeInOut 6.5s ease-in-out infinite 4s;
 }

 /* React */
 .code-line:nth-child(6) {
     top: 40%;
     left: 5%;
     animation: randomFadeInOut 5.5s ease-in-out infinite 0s;
 }

 /* Projects */
 .code-line:nth-child(7) {
     top: 85%;
     left: 55%;
     animation: randomFadeInOut 6s ease-in-out infinite 1.5s;
 }

 /* DB */

 @keyframes randomFadeInOut {

     0%,
     100% {
         opacity: 0;
         text-shadow: none;
         transform: scale(0.9);
     }

     40%,
     60% {
         opacity: 1;
         text-shadow: 0 0 10px currentColor;
         transform: scale(1);
     }
 }

 .code-line.green {
     color: #87e8de;
 }

 .code-line.blue {
     color: #81a1c1;
 }

 .code-line.gold {
     color: var(--accent-gold);
 }

 /* Blinking Dots surrounding code-stream text */
 .blink-dot {
     display: inline-block;
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: currentColor;
     vertical-align: middle;
     margin: 0 4px;
     animation: dotBlink 1.4s ease-in-out infinite;
     box-shadow: 0 0 6px currentColor, 0 0 12px currentColor;
 }

 .code-line.green .blink-dot {
     background: #87e8de;
     box-shadow: 0 0 6px #87e8de, 0 0 14px #87e8de;
 }

 .code-line.blue .blink-dot {
     background: #81a1c1;
     box-shadow: 0 0 6px #81a1c1, 0 0 14px #81a1c1;
 }

 .code-line.gold .blink-dot {
     background: var(--accent-gold);
     box-shadow: 0 0 6px var(--accent-gold), 0 0 14px var(--accent-gold);
 }

 /* Stagger the second dot */
 .code-line .blink-dot:last-child {
     animation-delay: 0.7s;
 }

 @keyframes dotBlink {

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

     50% {
         opacity: 1;
         transform: scale(1.3);
     }
 }

 /* Hero Video Modal (reuses video-modal styles) */
 .hero-video-modal {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 9999;
     display: flex;
     justify-content: center;
     align-items: center;
     opacity: 0;
     visibility: hidden;
     transition: all 0.4s ease;
 }

 .hero-video-modal.active {
     opacity: 1;
     visibility: visible;
 }

 .hero-video-modal .modal-content {
     transform: scale(0.8);
     transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .hero-video-modal.active .modal-content {
     transform: scale(1);
 }

 /* --- Keyframe Animations --- */
 @keyframes fadeInSlideUp {
     0% {
         opacity: 0;
         transform: translateY(30px);
     }

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

 @keyframes fadeInScale {
     0% {
         opacity: 0;
         transform: scale(0.9);
     }

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

 @keyframes nodeSequenceRed {

     0%,
     14% {
         background-color: #EA1413;
         box-shadow: 0 0 20px #EA1413;
         transform: scale(1.5);
         opacity: 1;
         z-index: 10;
     }

     16%,
     100% {
         background-color: var(--accent-gold);
         box-shadow: 0 0 10px var(--accent-gold);
         transform: scale(1);
         opacity: 0.9;
         z-index: 5;
     }
 }

 @keyframes backgroundPulse {

     0%,
     100% {
         transform: translate(-50%, -50%) radial-gradient(circle, rgba(230, 192, 64, 0.03) 0%, rgba(230, 192, 64, 0) 60%);
     }

     50% {
         transform: translate(-50%, -50%) radial-gradient(circle, rgba(230, 192, 64, 0.05) 0%, rgba(230, 192, 64, 0) 65%);
     }
 }

 @keyframes codeStreamIn {
     0% {
         opacity: 0;
         transform: translateX(30px);
     }

     5% {
         opacity: 0.7;
         transform: translateX(0px);
     }

     20% {
         opacity: 0.7;
         transform: translateX(-5px);
     }

     30% {
         opacity: 0;
         transform: translateX(-40px);
     }

     100% {
         opacity: 0;
         transform: translateX(-40px);
     }
 }

 /* --- Mobile Responsiveness --- */
 @media (max-width: 1024px) {
     .hero-container {
         grid-template-columns: 1fr;
         gap: 40px;
         text-align: center;
         justify-items: center;
     }

     .hero-content {
         display: flex;
         flex-direction: column;
         align-items: center;
         text-align: center;
     }

     .pre-headline {
         margin-bottom: 15px;
     }

     .hero-content h1 {
         font-size: 42px;
         line-height: 1.25;
         max-width: 600px;
         margin-bottom: 20px;
     }

     .hero-content p {
         font-size: 16px;
         margin-bottom: 30px;
     }

     .hero-actions {
         flex-direction: column;
         gap: 15px;
         width: 100%;
         max-width: 400px;
     }

     .cta-primary,
     .cta-secondary {
         width: 100%;
         justify-content: center;
     }

     .hero-visual {
         order: -1;
     }

     /* Visual first on tablet */
     .visual-wrapper {
         height: 350px;
     }

     .particle-network {
         width: 250px;
         height: 250px;
     }

     .code-stream {
         font-size: 14px;
         top: 0;
         right: 20px;
     }
 }

 @media (max-width: 768px) {
     .hero-section {
         padding: 120px 5% 80px;
     }

     .hero-content h1 {
         font-size: 36px;
         letter-spacing: -1px;
     }

     .visual-wrapper {
         height: 280px;
     }

     .particle-network {
         width: 220px;
         height: 220px;
     }

     .node {
         width: 10px;
         height: 10px;
     }

     .line {
         height: 0.5px;
         background-color: rgba(230, 192, 64, 0.1);
     }

     .code-stream {
         font-size: 12px;
     }
 }

 /* --- Featured Courses Section Styles --- */
 .courses-section {
     padding: 100px 5%;
     background-color: var(--bg-darkest);
     /* Uses existing background color */
 }

 .section-container {
     max-width: 1200px;
     margin: 0 auto;
 }

 /* Section Header */
 .section-header {
     text-align: center;
     margin-bottom: 60px;
 }

 .section-header h2 {
     font-size: 36px;
     color: var(--text-light);
     margin-bottom: 15px;
     letter-spacing: -0.5px;
 }

 .highlight-text {
     color: var(--accent-gold);
 }

 .section-header p {
     color: var(--text-muted);
     font-size: 16px;
     max-width: 600px;
     margin: 0 auto;
 }

 /* Grid Layout */
 .course-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
 }

 /* Individual Card Styling */
 .course-card {
     background-color: var(--header-bg);
     /* Match header for consistency */
     border: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     padding: 40px 30px;
     transition: all 0.4s ease;
     position: relative;
     overflow: hidden;
 }

 /* Top Border Glow Effect */
  .course-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 2px;
     background: linear-gradient(to right, #9b59b6, #ff79c6);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.4s ease;
     border-top-left-radius: 12px;
     border-top-right-radius: 12px;
 }

 .course-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(155, 89, 182, 0.15);
     border-color: rgba(155, 89, 182, 0.3);
 }

 .course-card:hover::before {
     transform: scaleX(1);
 }

 .card-icon {
     font-size: 32px;
     color: var(--accent-gold);
     margin-bottom: 20px;
     display: inline-block;
     padding: 15px;
     background: rgba(230, 192, 64, 0.1);
     border-radius: 12px;
 }

 .course-card h3 {
     font-size: 22px;
     color: var(--text-light);
     margin-bottom: 15px;
 }

 .course-card p {
     color: var(--text-muted);
     font-size: 15px;
     line-height: 1.6;
     margin-bottom: 25px;
 }

 .card-meta {
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-top: 1px solid rgba(255, 255, 255, 0.05);
     padding-top: 20px;
     margin-bottom: 20px;
 }

 .card-meta span {
     font-size: 13px;
     color: var(--text-muted);
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .card-meta span i {
     color: var(--accent-gold);
 }

 /* Action Link */
 .card-action {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     color: var(--text-light);
     text-decoration: none;
     font-weight: 600;
     font-size: 15px;
     transition: color 0.3s ease;
 }

 .card-action i {
     transition: transform 0.3s ease;
     color: var(--accent-gold);
 }

 .card-action:hover {
     color: var(--accent-gold);
 }

 .card-action:hover i {
     transform: translateX(5px);
 }

 /* Mobile Responsiveness for Section Header */
 @media (max-width: 768px) {
     .section-header h2 {
         font-size: 28px;
     }

     .course-card {
         padding: 30px 20px;
     }
 }

 /* --- Features / Why Choose Us Section Styles --- */
 .features-section {
     padding: 100px 5%;
     background-color: var(--header-bg);
     /* Slightly lighter dark background for contrast against the courses section */
     border-top: 1px solid rgba(255, 255, 255, 0.02);
     border-bottom: 1px solid rgba(255, 255, 255, 0.02);
 }

 .features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 40px;
     margin-top: 50px;
 }

 .feature-box {
     background-color: var(--bg-darkest);
     border: 1px solid rgba(230, 192, 64, 0.05);
     padding: 40px 30px;
     border-radius: 16px;
     text-align: center;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     position: relative;
     z-index: 1;
     overflow: hidden;
 }

 .feature-box::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 3px;
     background: linear-gradient(to right, #8b5cf6, #ec4899);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.4s ease;
     z-index: 2;
 }

 .feature-box:hover::before {
     transform: scaleX(1);
 }

 /* --- Mobile Responsiveness --- */
 @media (max-width: 768px) {
     .features-section {
         padding: 80px 5%;
     }

     .features-grid {
         gap: 25px;
     }

     .feature-box {
         padding: 30px 20px;
     }
 }



 /* --- Roadmap / Timeline Section Styles --- */
 .roadmap-section {
     padding: 100px 5%;
     background-color: var(--bg-darkest);
     position: relative;
     overflow: hidden;
 }

 /* Creative CSS Grid Background Pattern */
 .grid-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image:
         linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
         linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
     background-size: 40px 40px;
     z-index: 0;
     pointer-events: none;
     /* Fades the grid out at the top and bottom */
     mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
     -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
 }

 .roadmap-section .section-container {
     position: relative;
     z-index: 1;
 }

 /* Timeline Container */
 .timeline {
     position: relative;
     max-width: 1000px;
     margin: 60px auto 0;
     padding-bottom: 20px;
 }

 /* The Central Glowing Line */
 .timeline::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     width: 2px;
     height: 100%;
     background: linear-gradient(to bottom, transparent, var(--accent-gold), var(--accent-gold), transparent);
     transform: translateX(-50%);
     box-shadow: 0 0 15px rgba(230, 192, 64, 0.5);
 }

 /* Individual Timeline Items */
 .timeline-item {
     position: relative;
     width: 50%;
     padding: 20px 40px;
     margin-bottom: 30px;
 }

 .timeline-item.left {
     left: 0;
     text-align: right;
 }

 .timeline-item.right {
     left: 50%;
     text-align: left;
 }

 /* The Nodes (Dots) */
 .timeline-dot {
     position: absolute;
     top: 30px;
     width: 50px;
     height: 50px;
     background-color: var(--bg-darkest);
     border: 2px solid var(--accent-gold);
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     color: var(--accent-gold);
     font-size: 20px;
     z-index: 2;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(230, 192, 64, 0.2);
     transition: all 0.4s ease;
     animation: breathe 3s infinite ease-in-out;
 }

 .timeline-item.left .timeline-dot {
     right: -25px;
     /* Center on the line */
 }

 .timeline-item.right .timeline-dot {
     left: -25px;
     /* Center on the line */
 }

 /* Glassmorphism Content Cards with L-Shape Neon Animated Border */
 .timeline-content {
     background: rgba(26, 28, 35, 0.85);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.04);
     padding: 30px;
     border-radius: 16px;
     transition: transform 0.4s ease, box-shadow 0.4s ease;
     position: relative;
     overflow: hidden;
     z-index: 1;
 }

 /* L-Shape neon animated gradient border - vertical segment */
 .timeline-content::before {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 3px;
     height: 70%;
     background: linear-gradient(to top, #8b5cf6, #10b981, #ec4899, #8b5cf6);
     background-size: 100% 300%;
     animation: neonBorderFlow 3s linear infinite;
     border-radius: 3px;
     box-shadow: 0 0 8px rgba(139, 92, 246, 0.6), 0 0 20px rgba(139, 92, 246, 0.3);
     z-index: 2;
     transition: height 0.4s ease, box-shadow 0.4s ease;
 }

 /* L-Shape neon animated gradient border - horizontal segment */
 .timeline-content::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 70%;
     height: 3px;
     background: linear-gradient(to right, #8b5cf6, #10b981, #ec4899, #8b5cf6);
     background-size: 300% 100%;
     animation: neonBorderFlowH 3s linear infinite;
     border-radius: 3px;
     box-shadow: 0 0 8px rgba(16, 185, 129, 0.6), 0 0 20px rgba(16, 185, 129, 0.3);
     z-index: 2;
     transition: width 0.4s ease, box-shadow 0.4s ease;
 }

 @keyframes neonBorderFlow {
     0% {
         background-position: 0% 0%;
     }

     100% {
         background-position: 0% 300%;
     }
 }

 @keyframes neonBorderFlowH {
     0% {
         background-position: 0% 0%;
     }

     100% {
         background-position: 300% 0%;
     }
 }

 .timeline-content:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 30px rgba(139, 92, 246, 0.15), 0 0 20px rgba(16, 185, 129, 0.1);
 }

 .timeline-content:hover::before {
     box-shadow: 0 0 12px rgba(139, 92, 246, 0.8), 0 0 30px rgba(139, 92, 246, 0.4);
     height: 85%;
 }

 .timeline-content:hover::after {
     box-shadow: 0 0 12px rgba(236, 72, 153, 0.8), 0 0 30px rgba(236, 72, 153, 0.4);
     width: 85%;
 }

 .step-label {
     display: inline-block;
     color: var(--accent-gold);
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 2px;
     text-transform: uppercase;
     margin-bottom: 10px;
     background: rgba(230, 192, 64, 0.1);
     padding: 4px 10px;
     border-radius: 20px;
 }

 .timeline-content h3 {
     color: var(--text-light);
     font-size: 22px;
     margin-bottom: 15px;
 }

 .timeline-content p {
     color: var(--text-muted);
     font-size: 15px;
     line-height: 1.6;
 }

 @keyframes breathe {

     0%,
     100% {
         box-shadow: 0 0 15px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(230, 192, 64, 0.2), 0 0 0 rgba(230, 192, 64, 0);
     }

     50% {
         box-shadow: 0 0 15px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(230, 192, 64, 0.5), 0 0 15px rgba(230, 192, 64, 0.4);
     }
 }

 /* --- Mobile Responsiveness for Timeline --- */
 @media (max-width: 768px) {
     .timeline::before {
         left: 30px;
         /* Move line to the left edge */
     }

     .timeline-item {
         width: 100%;
         padding: 10px 0 30px 80px;
         /* Create space for the line on the left */
     }

     .timeline-item.left,
     .timeline-item.right {
         left: 0;
         text-align: left;
     }

     .timeline-item.left .timeline-dot,
     .timeline-item.right .timeline-dot {
         left: 5px;
         /* Align dots to the new line position */
         right: auto;
     }
 }


 /* --- Scroll Animation Classes --- */
 .timeline-item {
     opacity: 0;
     /* Hide items initially */
 }

 /* Slide in from the Left */
 .animate-left {
     animation: slideInLeft 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
 }

 /* Slide in from the Right */
 .animate-right {
     animation: slideInRight 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
 }

 @keyframes slideInLeft {
     0% {
         opacity: 0;
         transform: translateX(-80px);
     }

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

 @keyframes slideInRight {
     0% {
         opacity: 0;
         transform: translateX(80px);
     }

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

 /* Mobile specific: Slide up instead of sliding from the sides to prevent screen overflow */
 @media (max-width: 768px) {

     .animate-left,
     .animate-right {
         animation: slideUp 0.6s ease-out forwards;
     }

     @keyframes slideUp {
         0% {
             opacity: 0;
             transform: translateY(50px);
         }

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


 /* --- Testimonials Section Styles --- */
 .testimonials-section {
     padding: 100px 5%;
     background-color: var(--header-bg);
     /* Dark slate background */
     border-top: 1px solid rgba(255, 255, 255, 0.02);
     position: relative;
 }

 .testimonial-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 30px;
     margin-bottom: 60px;
 }

 .testimonial-card {
     background-color: var(--bg-darkest);
     border: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: 16px;
     padding: 40px 30px;
     position: relative;
     transition: all 0.4s ease;
     z-index: 1;
 }

 .testimonial-card:hover {
     transform: translateY(-10px);
     border-color: rgba(230, 192, 64, 0.3);
     /* Gold border on hover */
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(230, 192, 64, 0.05);
 }

 .quote-icon {
     position: absolute;
     top: 20px;
     right: 30px;
     font-size: 60px;
     color: rgba(230, 192, 64, 0.05);
     /* Very faint gold quote mark in background */
     z-index: -1;
     transition: color 0.4s ease;
 }

 .testimonial-card:hover .quote-icon {
     color: rgba(230, 192, 64, 0.15);
 }

 .stars {
     color: var(--accent-gold);
     font-size: 14px;
     margin-bottom: 20px;
     letter-spacing: 2px;
 }

 .review-text {
     color: var(--text-muted);
     font-size: 16px;
     line-height: 1.7;
     font-style: italic;
     margin-bottom: 30px;
     min-height: 110px;
     /* Keeps cards roughly the same height */
 }

 .student-info {
     display: flex;
     align-items: center;
     gap: 15px;
     border-top: 1px solid rgba(255, 255, 255, 0.05);
     padding-top: 20px;
 }

 .student-avatar {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid var(--accent-gold);
 }

 .student-info h4 {
     color: var(--text-light);
     font-size: 16px;
     margin-bottom: 4px;
 }

 .student-role {
     color: var(--accent-gold);
     font-size: 13px;
     font-weight: 600;
 }

 /* --- Stats Banner --- */
 .stats-banner {
     background: linear-gradient(90deg, rgba(230, 192, 64, 0.1), rgba(26, 28, 35, 0.8), rgba(230, 192, 64, 0.1));
     border: 1px solid rgba(230, 192, 64, 0.2);
     border-radius: 16px;
     padding: 40px;
     display: flex;
     justify-content: space-around;
     flex-wrap: wrap;
     gap: 30px;
     text-align: center;
 }

 .stat-item h3 {
     font-size: 42px;
     color: var(--text-light);
     margin-bottom: 10px;
     text-shadow: 0 0 15px rgba(230, 192, 64, 0.4);
     /* Glowing text */
 }

 .stat-item p {
     color: var(--text-muted);
     font-size: 15px;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: 600;
 }

 /* --- Mobile Responsiveness --- */
 @media (max-width: 768px) {
     .testimonials-section {
         padding: 80px 5%;
     }

     .testimonial-card {
         padding: 30px 20px;
     }

     .review-text {
         min-height: auto;
     }

     .stats-banner {
         flex-direction: column;
         padding: 30px 20px;
         gap: 40px;
     }
 }


 /* --- Detailed Program Section Styles --- */
 .program-detail-section {
     padding: 80px 5%;
     background-color: var(--bg-darkest);
 }

 .program-grid {
     display: grid;
     grid-template-columns: 1.1fr 0.9fr;
     /* Left side slightly wider */
     gap: 60px;
     align-items: start;
     max-width: 1200px;
     margin: 0 auto;
 }

 /* --- Left Side: Info --- */
 .badge {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background: rgba(230, 192, 64, 0.1);
     color: var(--accent-gold);
     padding: 6px 12px;
     border-radius: 6px;
     font-size: 13px;
     font-weight: 700;
     margin-bottom: 20px;
 }

 .program-info h2 {
     font-size: 32px;
     color: var(--text-light);
     line-height: 1.3;
     margin-bottom: 10px;
 }

 .guarantee-text {
     color: var(--accent-gold);
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 20px;
 }

 .program-desc {
     color: var(--text-muted);
     font-size: 15px;
     line-height: 1.6;
     margin-bottom: 30px;
 }

 /* Lists Grids */
 .checklist-grid,
 .features-list-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 15px;
     margin-bottom: 30px;
 }

 .check-item {
     display: flex;
     align-items: center;
     gap: 10px;
     color: var(--text-light);
     font-size: 14px;
     font-weight: 500;
 }

 .check-item i {
     color: var(--accent-gold);
     font-size: 16px;
 }

 .features-list-grid {
     background-color: rgba(255, 255, 255, 0.02);
     padding: 20px;
     border-radius: 12px;
     border: 1px solid rgba(255, 255, 255, 0.05);
     margin-bottom: 30px;
 }

 .feat-item {
     display: flex;
     align-items: center;
     gap: 12px;
     color: var(--text-muted);
     font-size: 14px;
 }

 .feat-item i {
     color: var(--accent-gold);
     /* Using gold instead of blue to match brand */
     width: 20px;
     text-align: center;
 }

 /* Info Cards */
 .info-cards-container {
     display: flex;
     gap: 20px;
     margin-bottom: 30px;
 }

 .info-card {
     flex: 1;
     background-color: var(--header-bg);
     border: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     padding: 20px;
     text-align: center;
     position: relative;
 }

 .card-top-icon {
     color: var(--accent-gold);
     font-size: 20px;
     margin-bottom: 10px;
 }

 .info-card h4 {
     color: var(--text-light);
     font-size: 14px;
     margin-bottom: 15px;
 }

 /* Avatar Group */
 .avatar-group {
     display: flex;
     justify-content: center;
     margin-bottom: 10px;
 }

 .avatar-group img {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     border: 2px solid var(--header-bg);
     margin-left: -10px;
     transition: transform 0.3s ease;
     cursor: pointer;
 }

 .avatar-group img:first-child {
     margin-left: 0;
 }

 .avatar-group img:hover {
     transform: translateY(-5px);
     z-index: 10;
 }

 .hover-text {
     font-size: 11px;
     color: var(--text-muted);
 }

 /* Batch Details */
 .batch-date {
     font-size: 18px;
     color: var(--text-light);
     font-weight: 700;
     margin-bottom: 2px;
 }

 .seats-left {
     font-size: 12px;
     color: var(--text-muted);
     margin-bottom: 15px;
 }

 .batch-meta {
     display: flex;
     flex-direction: column;
     gap: 8px;
     border-top: 1px solid rgba(255, 255, 255, 0.05);
     padding-top: 15px;
 }

 .batch-meta span {
     font-size: 13px;
     color: var(--text-muted);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
 }

 .batch-meta span i {
     color: var(--accent-gold);
 }

 /* Buttons */
 .program-actions {
     display: flex;
     gap: 15px;
 }

 .btn-primary,
 .btn-outline {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 10px;
     padding: 14px 20px;
     border-radius: 8px;
     font-size: 15px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s ease;
 }

 .btn-primary {
     background-color: var(--accent-gold);
     color: #000;
 }

 .btn-primary:hover {
     background-color: var(--accent-gold-light);
     transform: translateY(-2px);
 }

 .btn-outline {
     background-color: transparent;
     color: var(--text-light);
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

 .btn-outline:hover {
     border-color: var(--accent-gold);
     color: var(--accent-gold);
 }

 /* --- Right Side: Visuals --- */
 .video-thumbnail {
     width: 100%;
     border-radius: 16px;
     overflow: hidden;
     margin-bottom: 40px;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
     position: relative;
 }

 .video-thumbnail img {
     width: 100%;
     display: block;
     object-fit: cover;
 }

 .tech-stack-container {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-bottom: 30px;
 }

 .tech-icon {
     width: 50px;
     height: 50px;
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 24px;
     transition: transform 0.3s ease;
 }

 .tech-icon:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.08);
 }

 .tools-text {
     text-align: center;
 }

 .tools-text h4 {
     color: var(--text-light);
     font-size: 18px;
     margin-bottom: 8px;
 }

 .tools-text p {
     color: var(--text-muted);
     font-size: 14px;
 }

 /* --- Mobile Responsiveness --- */
 @media (max-width: 992px) {
     .program-grid {
         grid-template-columns: 1fr;
     }

     .program-visuals {
         order: -1;
         /* Puts image on top on mobile */
     }
 }

 @media (max-width: 768px) {

     .checklist-grid,
     .features-list-grid {
         grid-template-columns: 1fr;
         /* Stack lists on small screens */
     }

     .info-cards-container {
         flex-direction: column;
     }

     .program-actions {
         flex-direction: column;
     }
 }


 /* --- Video Section Styles --- */
 .video-section {
     padding: 100px 5%;
     background-color: var(--bg-darkest);
     text-align: center;
 }

 .video-wrapper {
     position: relative;
     max-width: 1000px;
     margin: 0 auto;
     border-radius: 20px;
     overflow: hidden;
     cursor: pointer;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
     border: 1px solid rgba(230, 192, 64, 0.1);
     transition: transform 0.4s ease, box-shadow 0.4s ease;
 }

 .video-wrapper:hover {
     transform: translateY(-5px);
     box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(230, 192, 64, 0.15);
     border-color: rgba(230, 192, 64, 0.3);
 }

 .video-thumbnail {
     width: 100%;
     display: block;
     aspect-ratio: 16 / 9;
     object-fit: cover;
     filter: brightness(0.6) contrast(1.1);
     transition: filter 0.4s ease;
 }

 .video-wrapper:hover .video-thumbnail {
     filter: brightness(0.4) contrast(1.2);
 }

 /* Pulsing Play Button */
 .play-btn {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 80px;
     height: 80px;
     background-color: var(--accent-gold);
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     color: #000;
     font-size: 24px;
     padding-left: 5px;
     /* visually center the play triangle */
     z-index: 2;
     animation: playPulse 2s infinite;
     transition: all 0.3s ease;
 }

 .video-wrapper:hover .play-btn {
     transform: translate(-50%, -50%) scale(1.1);
     background-color: var(--accent-gold-light);
 }

 @keyframes playPulse {
     0% {
         box-shadow: 0 0 0 0 rgba(230, 192, 64, 0.7);
     }

     70% {
         box-shadow: 0 0 0 20px rgba(230, 192, 64, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(230, 192, 64, 0);
     }
 }

 /* Video Overlay Info */
 .video-duration {
     position: absolute;
     bottom: 20px;
     left: 20px;
     display: flex;
     align-items: center;
     gap: 15px;
     z-index: 2;
 }

 .live-badge {
     background-color: #ff3333;
     color: white;
     padding: 4px 10px;
     border-radius: 4px;
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     animation: liveBlink 1.5s infinite;
 }

 @keyframes liveBlink {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: 0.7;
     }
 }

 .video-duration span:last-child {
     color: var(--text-light);
     font-weight: 600;
     font-size: 14px;
     background: rgba(0, 0, 0, 0.6);
     padding: 4px 10px;
     border-radius: 4px;
     backdrop-filter: blur(5px);
 }

 /* --- Video Modal Styles --- */
 .video-modal {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 9999;
     display: flex;
     justify-content: center;
     align-items: center;
     opacity: 0;
     visibility: hidden;
     transition: all 0.4s ease;
 }

 .video-modal.active {
     opacity: 1;
     visibility: visible;
 }

 .modal-backdrop {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.9);
     backdrop-filter: blur(10px);
 }

 .modal-content {
     position: relative;
     width: 90%;
     max-width: 900px;
     z-index: 10000;
     transform: scale(0.8);
     transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .video-modal.active .modal-content {
     transform: scale(1);
 }

 .iframe-container {
     position: relative;
     padding-bottom: 56.25%;
     /* 16:9 Aspect Ratio */
     height: 0;
     overflow: hidden;
     border-radius: 12px;
     box-shadow: 0 0 30px rgba(230, 192, 64, 0.2);
     border: 1px solid rgba(230, 192, 64, 0.3);
     background-color: #000;
 }

 .iframe-container iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

 .close-modal {
     position: absolute;
     top: -40px;
     right: -40px;
     background: transparent;
     border: none;
     color: var(--text-muted);
     font-size: 30px;
     cursor: pointer;
     transition: color 0.3s ease;
 }

 .close-modal:hover {
     color: var(--accent-gold);
 }

 /* --- Mobile Responsiveness --- */
 @media (max-width: 768px) {
     .video-section {
         padding: 80px 5%;
     }

     .play-btn {
         width: 60px;
         height: 60px;
         font-size: 20px;
     }

     .close-modal {
         top: -40px;
         right: 0;
     }
 }


 /* --- Blog / Insights Section Styles --- */
 .blog-section {
     padding: 100px 5%;
     background-color: var(--header-bg);
     /* Use the slightly lighter dark background */
     border-top: 1px solid rgba(255, 255, 255, 0.02);
 }

 .blog-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 40px;
     margin-bottom: 50px;
 }

 .blog-card {
     background-color: var(--bg-darkest);
     border: 1px solid rgba(255, 255, 0.05);
     border-radius: 16px;
     overflow: hidden;
     transition: all 0.4s ease;
     display: flex;
     flex-direction: column;
     position: relative;
 }

 .blog-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 3px;
     background: linear-gradient(to right, #8b5cf6, #ec4899);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.4s ease;
     z-index: 2;
 }

 .blog-card:hover::before {
     transform: scaleX(1);
 }

 .blog-card:hover {
     transform: translateY(-10px);
     border-color: rgba(230, 192, 64, 0.3);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 0 15px rgba(230, 192, 64, 0.05);
 }

 /* Blog Image Area */
 .blog-image {
     position: relative;
     width: 100%;
     height: 220px;
     overflow: hidden;
 }

 .blog-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s ease;
 }

 .blog-card:hover .blog-image img {
     transform: scale(1.08);
     /* Image zooms in slightly on hover */
 }

 .blog-category {
     position: absolute;
     top: 20px;
     left: 20px;
     background-color: var(--accent-gold);
     color: #000;
     padding: 6px 14px;
     border-radius: 30px;
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
     z-index: 2;
 }

 /* Blog Content Area */
 .blog-content {
     padding: 30px;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     /* Pushes the "read more" link to the bottom if cards are different heights */
 }

 .blog-meta {
     display: flex;
     align-items: center;
     gap: 15px;
     color: var(--text-muted);
     font-size: 13px;
     margin-bottom: 15px;
 }

 .blog-meta span i {
     color: var(--accent-gold);
     margin-right: 5px;
 }

 .blog-content h3 {
     font-size: 20px;
     color: var(--text-light);
     line-height: 1.4;
     margin-bottom: 15px;
     transition: color 0.3s ease;
 }

 .blog-card:hover .blog-content h3 {
     color: var(--accent-gold);
 }

 .blog-content p {
     color: var(--text-muted);
     font-size: 15px;
     line-height: 1.6;
     margin-bottom: 25px;
     flex-grow: 1;
 }

 .read-more {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     color: var(--accent-gold);
     text-decoration: none;
     font-weight: 600;
     font-size: 15px;
     transition: all 0.3s ease;
     align-self: flex-start;
 }

 .read-more i {
     transition: transform 0.3s ease;
 }

 .read-more:hover {
     color: var(--accent-gold-light);
 }

 .read-more:hover i {
     transform: translateX(5px);
     /* Arrow slides right on hover */
 }

 /* View All Button Container */
 .view-all-container {
     text-align: center;
     margin-top: 20px;
 }

 /* --- Mobile Responsiveness --- */
 @media (max-width: 768px) {
     .blog-section {
         padding: 80px 5%;
     }

     .blog-image {
         height: 200px;
     }

     .blog-content {
         padding: 25px 20px;
     }

     .blog-content h3 {
         font-size: 18px;
     }
 }


 /* --- Footer Section Styles --- */
 .site-footer {
     background-color: var(--bg-darkest);
     padding: 80px 5% 30px;
     border-top: 2px solid rgba(230, 192, 64, 0.1);
     /* Subtle gold border on top */
     position: relative;
     overflow: hidden;
 }

 /* Subtle background glow for the footer */
 .site-footer::before {
     content: '';
     position: absolute;
     bottom: -150px;
     right: -150px;
     width: 300px;
     height: 300px;
     background: radial-gradient(circle, rgba(230, 192, 64, 0.05) 0%, transparent 70%);
     border-radius: 50%;
     pointer-events: none;
 }

 .footer-top {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1.5fr;
     gap: 50px;
     margin-bottom: 60px;
 }

 /* Brand Column */
 .footer-logo {
     display: inline-block;
     margin-bottom: 20px;
 }

 .footer-logo img {
     max-height: 45px;
     transition: transform 0.3s ease;
 }

 .footer-logo img:hover {
     transform: scale(1.05);
 }

 .footer-brand p {
     color: var(--text-muted);
     font-size: 15px;
     line-height: 1.7;
     margin-bottom: 25px;
     max-width: 300px;
 }

 .social-links {
     display: flex;
     gap: 15px;
 }

 .social-links a {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 40px;
     height: 40px;
     background-color: rgba(255, 255, 255, 0.03);
     color: var(--text-light);
     border-radius: 50%;
     font-size: 16px;
     transition: all 0.3s ease;
     text-decoration: none;
     border: 1px solid rgba(255, 255, 255, 0.05);
 }

 .social-links a:hover {
     background-color: var(--accent-gold);
     color: #000;
     border-color: var(--accent-gold);
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(230, 192, 64, 0.3);
 }

 /* Links Columns */
 .footer-links h4,
 .footer-newsletter h4 {
     color: var(--text-light);
     font-size: 18px;
     margin-bottom: 25px;
     font-weight: 600;
     position: relative;
     display: inline-block;
 }

 /* Gold underline under headings */
 .footer-links h4::after,
 .footer-newsletter h4::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: -8px;
     width: 40px;
     height: 2px;
     background-color: var(--accent-gold);
 }

 .footer-links ul {
     list-style: none;
 }

 .footer-links ul li {
     margin-bottom: 15px;
 }

 .footer-links ul li a {
     color: var(--text-muted);
     text-decoration: none;
     font-size: 15px;
     transition: all 0.3s ease;
     display: inline-block;
 }

 .footer-links ul li a:hover {
     color: var(--accent-gold);
     transform: translateX(5px);
     /* Gentle slide to the right on hover */
 }

 /* Newsletter Column */
 .footer-newsletter p {
     color: var(--text-muted);
     font-size: 14px;
     line-height: 1.6;
     margin-bottom: 20px;
 }

 .newsletter-form {
     display: flex;
     align-items: center;
     background-color: rgba(255, 255, 255, 0.05);
     border-radius: 30px;
     padding: 5px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     transition: border-color 0.3s ease;
 }

 .newsletter-form:focus-within {
     border-color: var(--accent-gold);
     box-shadow: 0 0 10px rgba(230, 192, 64, 0.1);
 }

 .newsletter-form input {
     flex: 1;
     background: transparent;
     border: none;
     padding: 10px 15px;
     color: var(--text-light);
     font-size: 14px;
     outline: none;
 }

 .newsletter-form input::placeholder {
     color: rgba(255, 255, 255, 0.3);
 }

 .newsletter-form button {
     background-color: var(--accent-gold);
     color: #000;
     border: none;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     transition: all 0.3s ease;
     font-size: 14px;
 }

 .newsletter-form button:hover {
     background-color: var(--accent-gold-light);
     transform: scale(1.05);
 }

 /* Footer Bottom */
 .footer-bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-top: 30px;
     border-top: 1px solid rgba(255, 255, 255, 0.05);
     flex-wrap: wrap;
     gap: 20px;
 }

 .footer-bottom p {
     color: var(--text-muted);
     font-size: 14px;
 }

 .legal-links {
     display: flex;
     gap: 20px;
 }

 .legal-links a {
     color: var(--text-muted);
     text-decoration: none;
     font-size: 13px;
     transition: color 0.3s ease;
 }

 .legal-links a:hover {
     color: var(--accent-gold);
 }

 /* --- Mobile Responsiveness --- */
 @media (max-width: 1024px) {
     .footer-top {
         grid-template-columns: 1fr 1fr;
         /* Switch to 2 columns on tablet */
     }
 }

 @media (max-width: 768px) {
     .site-footer {
         padding: 60px 5% 30px;
     }

     .footer-top {
         grid-template-columns: 1fr;
         /* Stack everything on mobile */
         gap: 40px;
     }

     .footer-brand p {
         max-width: 100%;
     }

     .footer-bottom {
         flex-direction: column;
         text-align: center;
         justify-content: center;
     }

     .legal-links {
         justify-content: center;
     }
 }






 /* --- Booking Modal Styles --- */
 .booking-modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.8);
     backdrop-filter: blur(8px);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 10000;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
 }

 .booking-modal-overlay.active {
     opacity: 1;
     visibility: visible;
 }

 .booking-modal-content {
     background-color: #1a1c23;
     padding: 40px;
     border-radius: 16px;
     width: 90%;
     max-width: 450px;
     position: relative;
     border: 1px solid rgba(255, 255, 255, 0.1);
     transform: translateY(20px);
     transition: transform 0.3s ease;
 }

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

 .close-modal-btn {
     position: absolute;
     top: 20px;
     right: 20px;
     background: transparent;
     border: none;
     color: #9ba3af;
     font-size: 20px;
     cursor: pointer;
     transition: color 0.3s ease;
 }

 .close-modal-btn:hover {
     color: #fff;
 }

 .booking-modal-content h2 {
     color: #fff;
     margin-bottom: 10px;
     font-size: 24px;
 }

 .booking-modal-content p {
     color: #9ba3af;
     margin-bottom: 25px;
     font-size: 14px;
 }

 .input-group {
     margin-bottom: 20px;
     text-align: left;
 }

 .input-group label {
     display: block;
     color: #f8fafc;
     margin-bottom: 8px;
     font-size: 14px;
     font-weight: 500;
 }

 .input-group input {
     width: 100%;
     padding: 12px 15px;
     background-color: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #fff;
     font-size: 15px;
     outline: none;
     transition: border-color 0.3s ease;
 }

 .input-group input:focus {
     border-color: #F97316;
 }

 .submit-booking-btn {
     width: 100%;
     padding: 14px;
     background-color: #F97316;
     /* Custom Primary Accent */
     color: #fff;
     border: none;
     border-radius: 8px;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     transition: background-color 0.3s ease;
 }

 .submit-booking-btn:hover {
     background-color: #e06512;
 }

 .form-message {
     margin-top: 15px;
     font-size: 14px;
     text-align: center;
 }



 /* =========================================
           PRICING / COMPARISON SECTION
           ========================================= */
 .pricing-section {
     padding: 30px 5%;
     background-color: var(--header-bg);
     border-top: 1px solid rgba(255, 255, 255, 0.05);
 }

 .pricing-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
     max-width: 1200px;
     margin: 0 auto;
     align-items: center;
     /* Centers the cards vertically */
 }

 /* --- Base Pricing Card --- */
 .pricing-card {
     background-color: var(--bg-darkest);
     border: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: 16px;
     padding: 40px 30px;
     display: flex;
     flex-direction: column;
     position: relative;
     transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
     overflow: visible;
 }

 .pricing-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 16px;
     background: linear-gradient(to right, #8b5cf6, #ec4899);
     clip-path: inset(0 0 calc(100% - 3px) 0);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.4s ease;
     z-index: 2;
     pointer-events: none;
 }

 .pricing-card:hover::before {
     transform: scaleX(1);
 }

 .pricing-card:hover {
     transform: translateY(-5px);
     border-color: rgba(230, 192, 64, 0.2);
 }

 /* --- Active/Highlighted Pricing Card --- */
 .pricing-card.active-track {
     background-color: #000000;
     /* Solid black as requested */
     border: 2px solid var(--accent-gold);
     transform: scale(1.05);
     /* Makes it pop out */
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(230, 192, 64, 0.15);
     z-index: 2;
 }

 .pricing-card.active-track:hover {
     transform: scale(1.05) translateY(-5px);
 }

 /* Top Badge for Active Track */
 .track-badge {
     position: absolute;
     top: 0;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: var(--accent-gold);
     color: #000;
     padding: 6px 20px;
     border-radius: 20px;
     font-size: 13px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
     white-space: nowrap;
     z-index: 10;
 }

 /* --- Card Header & Pricing --- */
 .plan-header {
     margin-bottom: 20px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     padding-bottom: 20px;
 }

 .plan-header h3 {
     font-size: 24px;
     color: var(--text-light);
     margin-bottom: 8px;
 }

 .plan-header p {
     color: var(--text-muted);
     font-size: 14px;
     line-height: 1.4;
 }

 .plan-price {
     margin-bottom: 25px;
     display: flex;
     flex-direction: column;
 }

 .plan-price .old-price {
     color: #ef4444;
     font-size: 16px;
     font-weight: 600;
     text-decoration: line-through;
     margin-bottom: 5px;
 }

 .plan-price .new-price {
     color: var(--text-light);
     font-size: 38px;
     font-weight: 800;
     letter-spacing: -1px;
     line-height: 1;
 }

 .plan-price .duration {
     color: var(--text-muted);
     font-size: 13px;
     margin-top: 5px;
 }

 .plan-btn {
     width: 100%;
     margin-bottom: 30px;
 }

 /* --- Features List --- */
 .plan-features {
     flex-grow: 1;
 }

 .features-title {
     color: var(--text-light);
     font-size: 14px;
     font-weight: 600;
     margin-bottom: 15px;
 }

 .plan-features ul {
     list-style: none;
 }

 .plan-features ul li {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     color: var(--text-muted);
     font-size: 14px;
     margin-bottom: 12px;
     line-height: 1.5;
 }

 .plan-features ul li i {
     color: var(--accent-gold);
     font-size: 16px;
     margin-top: 3px;
 }

 /* Highlight specific features in active track */
 .active-track .plan-features ul li {
     color: var(--text-light);
 }

 /* --- Mobile Responsiveness --- */
 @media (max-width: 1024px) {
     .pricing-grid {
         grid-template-columns: 1fr;
         gap: 40px;
         max-width: 400px;
     }

     /* Remove scaling on mobile so it doesn't break screen width */
     .pricing-card.active-track {
         transform: none;
     }

     .pricing-card.active-track:hover {
         transform: translateY(-5px);
     }
 }

 @media (max-width: 768px) {
     .pricing-section {
         padding: 20px 5%;
     }
 }

 /* Styles extracted from contact.php */
 /* =========================================
           3. CONTACT PAGE LAYOUT
           ========================================= */
 .contact-page-section {
     padding: 120px 5% 80px;
 }

 .contact-container {
     max-width: 1200px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: start;
 }

 /* Left side content */
 .contact-text-content h2 {
     font-size: 42px;
     font-weight: 800;
     margin-bottom: 30px;
     letter-spacing: -1px;
 }

 .contact-text-content p {
     color: var(--text-muted);
     font-size: 16px;
     line-height: 1.8;
     margin-bottom: 20px;
 }

 .founders-block {
     margin: 35px 0;
     padding: 25px;
     background: rgba(230, 192, 64, 0.05);
     border-left: 4px solid var(--accent-gold);
     border-radius: 0 12px 12px 0;
 }

 .founders-block p {
     color: var(--text-light);
     font-style: italic;
     font-size: 17px;
     margin-bottom: 0;
 }

 /* Right side form */
 .contact-form-container {
     background-color: var(--header-bg);
     border: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: 16px;
     padding: 45px 40px;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
 }

 .input-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
 }

 .input-group {
     margin-bottom: 22px;
 }

 .input-group label {
     display: block;
     color: var(--text-light);
     margin-bottom: 8px;
     font-size: 14px;
     font-weight: 500;
 }

 .input-group input,
 .input-group select,
 .input-group textarea {
     width: 100%;
     padding: 14px 15px;
     background-color: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #fff;
     outline: none;
 }

 .input-group input:focus,
 .input-group textarea:focus {
     border-color: var(--accent-gold);
 }

 .input-group textarea {
     min-height: 120px;
     resize: vertical;
 }

 /* =========================================
           4. MAP SECTION (NEW)
           ========================================= */
 .map-section {
     width: 100%;
     height: 450px;
     background-color: #000;
     border-top: 1px solid rgba(230, 192, 64, 0.2);
     border-bottom: 1px solid rgba(230, 192, 64, 0.2);
     position: relative;
 }

 /* Filter to make the map match your dark/gold theme */
 .google-map {
     width: 100%;
     height: 100%;
     border: 0;
     filter: grayscale(1) invert(0.9) contrast(1.2);
 }

 .map-label {
     position: absolute;
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%);
     background: var(--accent-gold);
     color: #000;
     padding: 10px 25px;
     border-radius: 30px;
     font-weight: 700;
     font-size: 14px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
     z-index: 5;
 }


 /* Styles extracted from dev-intern.php */
 /* =========================================
           3. MAIN HEADER & DROPDOWN
           ========================================= */
 .main-header {
     position: sticky;
     top: 0;
     width: 100%;
     background-color: var(--header-bg);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 5%;
     height: 80px;
     z-index: 1000;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
 }

 .logo {
     display: flex;
     align-items: center;
     text-decoration: none;
     z-index: 1001;
 }

 .logo-img {
     max-height: 45px;
     transition: var(--transition);
 }

 .logo-img:hover {
     transform: scale(1.05);
 }

 .nav-container {
     display: flex;
     align-items: center;
     gap: 40px;
 }

 .nav-links {
     display: flex;
     gap: 25px;
     list-style: none;
     align-items: center;
 }

 .nav-links li a {
     color: var(--text-light);
     text-decoration: none;
     font-size: 15px;
     font-weight: 500;
     display: flex;
     align-items: center;
     gap: 8px;
     position: relative;
     transition: var(--transition);
 }

 .nav-links li a i {
     color: var(--text-muted);
     font-size: 14px;
     transition: var(--transition);
 }

 .nav-links li a:hover,
 .nav-links li a:hover i {
     color: var(--accent-gold);
 }

 .nav-links li a::after {
     content: '';
     position: absolute;
     width: 0;
     height: 2px;
     bottom: -6px;
     left: 0;
     background-color: var(--accent-gold);
     transition: width 0.3s ease;
     box-shadow: 0 0 8px var(--accent-gold);
 }

 .nav-links li a:hover::after,
 .nav-links li a.active::after {
     width: 100%;
 }

 .cta-btn-nav {
     background: transparent;
     color: var(--accent-gold);
     border: 2px solid var(--accent-gold);
     padding: 10px 24px;
     border-radius: 30px;
     font-size: 15px;
     font-weight: 600;
     cursor: pointer;
     text-decoration: none;
     transition: var(--transition);
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .cta-btn-nav:hover {
     background: var(--accent-gold);
     color: #000;
     box-shadow: 0 0 15px rgba(230, 192, 64, 0.4);
     transform: translateY(-2px);
 }

 .dropdown {
     position: relative;
 }

 .dropdown-icon {
     font-size: 10px !important;
     margin-left: 4px;
     transition: transform 0.3s ease !important;
 }

 .dropdown:hover .dropdown-icon {
     transform: rotate(180deg);
     color: var(--accent-gold);
 }

 .dropdown-content {
     visibility: hidden;
     opacity: 0;
     position: absolute;
     top: 130%;
     left: 0;
     background-color: var(--bg-darkest);
     min-width: 200px;
     box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.6);
     border-radius: 8px;
     border: 1px solid rgba(255, 255, 255, 0.05);
     padding: 10px 0;
     z-index: 1002;
     transform: translateY(10px);
     transition: all 0.3s ease;
     list-style: none;
 }

 .dropdown:hover .dropdown-content {
     visibility: visible;
     opacity: 1;
     top: 100%;
     transform: translateY(0);
 }

 .dropdown-content li {
     width: 100%;
 }

 .dropdown-content li a {
     display: block;
     padding: 12px 20px;
     color: var(--text-light);
     font-size: 14px;
     transition: all 0.2s ease;
 }

 .dropdown-content li a::after {
     display: none;
 }

 .dropdown-content li a:hover {
     background-color: rgba(230, 192, 64, 0.1);
     color: var(--accent-gold);
     padding-left: 25px;
     border-left: 2px solid var(--accent-gold);
 }

 .hamburger {
     display: none;
     cursor: pointer;
     flex-direction: column;
     gap: 6px;
     z-index: 1001;
 }

 .hamburger span {
     display: block;
     width: 28px;
     height: 3px;
     background-color: var(--text-light);
     border-radius: 3px;
     transition: var(--transition);
 }

 .overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.7);
     backdrop-filter: blur(5px);
     opacity: 0;
     visibility: hidden;
     transition: var(--transition);
     z-index: 998;
 }

 .overlay.active {
     opacity: 1;
     visibility: visible;
 }

 @media (max-width: 992px) {
     .nav-container {
         position: fixed;
         top: 0;
         right: -100%;
         width: 300px;
         max-width: 80%;
         height: 100vh;
         background-color: #1a1c23;
         flex-direction: column;
         justify-content: center;
         align-items: flex-start;
         padding: 40px;
         gap: 30px;
         transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
         box-shadow: -5px 0 25px rgba(0, 0, 0, 0.8);
         z-index: 999;
         border-left: 1px solid rgba(230, 192, 64, 0.1);
     }

     .nav-container.active {
         right: 0;
     }

     .nav-links {
         flex-direction: column;
         align-items: flex-start;
         width: 100%;
         gap: 25px;
     }

     .hamburger {
         display: flex;
     }

     .hamburger.active span:nth-child(1) {
         transform: translateY(9px) rotate(45deg);
         background-color: var(--accent-gold);
     }

     .hamburger.active span:nth-child(2) {
         opacity: 0;
     }

     .hamburger.active span:nth-child(3) {
         transform: translateY(-9px) rotate(-45deg);
         background-color: var(--accent-gold);
     }

     .dropdown-content {
         position: static;
         visibility: visible;
         opacity: 1;
         display: none;
         background-color: transparent;
         box-shadow: none;
         border: none;
         padding: 0 0 0 20px;
         transform: none;
         margin-top: 10px;
     }

     .dropdown.active .dropdown-content {
         display: block;
     }

     .dropdown.active .dropdown-icon {
         transform: rotate(180deg);
     }

     .top-bar {
         padding: 15px 40px 15px 20px;
     }
 }

 /* =========================================
           4. DEV INTERN SECTION
           ========================================= */
 .dev-intern-section {
     padding: 140px 5% 100px;
     background-color: var(--bg-darkest);
     position: relative;
     overflow: hidden;
 }

 .intern-split-layout {
     display: grid;
     grid-template-columns: 1.1fr 0.9fr;
     gap: 60px;
     align-items: center;
     max-width: 1200px;
     margin: 0 auto;
 }

 .intern-content h1 {
     font-size: 48px;
     font-weight: 800;
     color: var(--text-light);
     line-height: 1.2;
     margin-bottom: 25px;
     letter-spacing: -1px;
 }

 .intern-desc {
     color: var(--text-muted);
     font-size: 16px;
     line-height: 1.7;
     margin-bottom: 35px;
     max-width: 90%;
 }

 .intern-features-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
     margin-bottom: 40px;
 }

 .intern-feat-item {
     display: flex;
     align-items: center;
     gap: 12px;
     color: var(--text-light);
     font-size: 15px;
     font-weight: 500;
 }

 .intern-feat-item i {
     color: var(--accent-gold);
     font-size: 18px;
     background: rgba(230, 192, 64, 0.1);
     border-radius: 50%;
 }

 .intern-trust-tag {
     display: inline-block;
     color: var(--accent-gold);
     font-size: 15px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     padding: 12px 20px;
     background: rgba(230, 192, 64, 0.05);
     border-left: 3px solid var(--accent-gold);
     border-radius: 0 8px 8px 0;
 }

 .intern-pricing-card {
     background-color: var(--header-bg);
     border: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
     transition: transform 0.4s ease, border-color 0.4s ease;
 }

 .intern-pricing-card:hover {
     transform: translateY(-10px);
     border-color: rgba(230, 192, 64, 0.3);
     box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 20px rgba(230, 192, 64, 0.1);
 }

 .pricing-card-image {
     width: 100%;
     height: 220px;
     overflow: hidden;
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }

 .pricing-card-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s ease;
 }

 .intern-pricing-card:hover .pricing-card-image img {
     transform: scale(1.05);
 }

 .pricing-card-body {
     padding: 35px 30px;
 }

 .starts-at-text {
     color: var(--text-muted);
     font-size: 15px;
     margin-bottom: 5px;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: 600;
 }

 .price-display {
     display: flex;
     align-items: baseline;
     flex-wrap: wrap;
     gap: 12px;
     margin-bottom: 35px;
 }

 .old-prices {
     color: #ef4444;
     font-size: 20px;
     font-weight: 600;
     position: relative;
 }

 .old-prices::after {
     content: '';
     position: absolute;
     top: 50%;
     left: -5%;
     width: 110%;
     height: 2px;
     background-color: #ef4444;
     transform: rotate(-10deg);
 }

 .new-price {
     color: var(--text-light);
     font-size: 46px;
     font-weight: 800;
     letter-spacing: -1px;
 }

 .duration-text {
     color: var(--text-muted);
     font-size: 15px;
     font-weight: 500;
 }

 .pricing-actions {
     display: flex;
     gap: 15px;
 }

 .pricing-actions .btn-primary,
 .pricing-actions .btn-outline {
     flex: 1;
     text-align: center;
     padding: 14px 0;
     font-size: 15px;
     width: 100%;
 }

 @media (max-width: 992px) {
     .intern-split-layout {
         grid-template-columns: 1fr;
         gap: 50px;
     }

     .intern-desc {
         max-width: 100%;
     }
 }

 @media (max-width: 768px) {
     .dev-intern-section {
         padding: 120px 5% 80px;
     }

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

     .intern-features-grid {
         grid-template-columns: 1fr;
         gap: 15px;
     }

     .pricing-card-image {
         height: 180px;
     }

     .new-price {
         font-size: 38px;
     }

     .pricing-actions {
         flex-direction: column;
     }
 }


 /* Styles extracted from dev-prime.php */
 /* =========================================
           3. MAIN HEADER & DROPDOWN
           ========================================= */
 .main-header {
     position: sticky;
     top: 0;
     width: 100%;
     background-color: var(--header-bg);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 5%;
     height: 80px;
     z-index: 1000;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
 }

 .logo {
     display: flex;
     align-items: center;
     text-decoration: none;
     z-index: 1001;
 }

 .logo-img {
     max-height: 45px;
     transition: var(--transition);
 }

 .logo-img:hover {
     transform: scale(1.05);
 }

 .nav-container {
     display: flex;
     align-items: center;
     gap: 40px;
 }

 .nav-links {
     display: flex;
     gap: 25px;
     list-style: none;
     align-items: center;
 }

 .nav-links li a {
     color: var(--text-light);
     text-decoration: none;
     font-size: 15px;
     font-weight: 500;
     display: flex;
     align-items: center;
     gap: 8px;
     position: relative;
     transition: var(--transition);
 }

 .nav-links li a i {
     color: var(--text-muted);
     font-size: 14px;
     transition: var(--transition);
 }

 .nav-links li a:hover,
 .nav-links li a:hover i {
     color: var(--accent-gold);
 }

 .nav-links li a::after {
     content: '';
     position: absolute;
     width: 0;
     height: 2px;
     bottom: -6px;
     left: 0;
     background-color: var(--accent-gold);
     transition: width 0.3s ease;
     box-shadow: 0 0 8px var(--accent-gold);
 }

 .nav-links li a:hover::after,
 .nav-links li a.active::after {
     width: 100%;
 }

 .cta-btn-nav {
     background: transparent;
     color: var(--accent-gold);
     border: 2px solid var(--accent-gold);
     padding: 10px 24px;
     border-radius: 30px;
     font-size: 15px;
     font-weight: 600;
     cursor: pointer;
     text-decoration: none;
     transition: var(--transition);
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .cta-btn-nav:hover {
     background: var(--accent-gold);
     color: #000;
     box-shadow: 0 0 15px rgba(230, 192, 64, 0.4);
     transform: translateY(-2px);
 }

 .dropdown {
     position: relative;
 }

 .dropdown-icon {
     font-size: 10px !important;
     margin-left: 4px;
     transition: transform 0.3s ease !important;
 }

 .dropdown:hover .dropdown-icon {
     transform: rotate(180deg);
     color: var(--accent-gold);
 }

 .dropdown-content {
     visibility: hidden;
     opacity: 0;
     position: absolute;
     top: 130%;
     left: 0;
     background-color: var(--bg-darkest);
     min-width: 200px;
     box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.6);
     border-radius: 8px;
     border: 1px solid rgba(255, 255, 255, 0.05);
     padding: 10px 0;
     z-index: 1002;
     transform: translateY(10px);
     transition: all 0.3s ease;
     list-style: none;
 }

 .dropdown:hover .dropdown-content {
     visibility: visible;
     opacity: 1;
     top: 100%;
     transform: translateY(0);
 }

 .dropdown-content li {
     width: 100%;
 }

 .dropdown-content li a {
     display: block;
     padding: 12px 20px;
     color: var(--text-light);
     font-size: 14px;
     transition: all 0.2s ease;
 }

 .dropdown-content li a::after {
     display: none;
 }

 .dropdown-content li a:hover {
     background-color: rgba(230, 192, 64, 0.1);
     color: var(--accent-gold);
     padding-left: 25px;
     border-left: 2px solid var(--accent-gold);
 }

 .hamburger {
     display: none;
     cursor: pointer;
     flex-direction: column;
     gap: 6px;
     z-index: 1001;
 }

 .hamburger span {
     display: block;
     width: 28px;
     height: 3px;
     background-color: var(--text-light);
     border-radius: 3px;
     transition: var(--transition);
 }

 .overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.7);
     backdrop-filter: blur(5px);
     opacity: 0;
     visibility: hidden;
     transition: var(--transition);
     z-index: 998;
 }

 .overlay.active {
     opacity: 1;
     visibility: visible;
 }

 @media (max-width: 992px) {
     .nav-container {
         position: fixed;
         top: 0;
         right: -100%;
         width: 300px;
         max-width: 80%;
         height: 100vh;
         background-color: #1a1c23;
         flex-direction: column;
         justify-content: center;
         align-items: flex-start;
         padding: 40px;
         gap: 30px;
         transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
         box-shadow: -5px 0 25px rgba(0, 0, 0, 0.8);
         z-index: 999;
         border-left: 1px solid rgba(230, 192, 64, 0.1);
     }

     .nav-container.active {
         right: 0;
     }

     .nav-links {
         flex-direction: column;
         align-items: flex-start;
         width: 100%;
         gap: 25px;
     }

     .hamburger {
         display: flex;
     }

     .hamburger.active span:nth-child(1) {
         transform: translateY(9px) rotate(45deg);
         background-color: var(--accent-gold);
     }

     .hamburger.active span:nth-child(2) {
         opacity: 0;
     }

     .hamburger.active span:nth-child(3) {
         transform: translateY(-9px) rotate(-45deg);
         background-color: var(--accent-gold);
     }

     .dropdown-content {
         position: static;
         visibility: visible;
         opacity: 1;
         display: none;
         background-color: transparent;
         box-shadow: none;
         border: none;
         padding: 0 0 0 20px;
         transform: none;
         margin-top: 10px;
     }

     .dropdown.active .dropdown-content {
         display: block;
     }

     .dropdown.active .dropdown-icon {
         transform: rotate(180deg);
     }

     .top-bar {
         padding: 15px 40px 15px 20px;
     }
 }

 /* =========================================
           4. PROGRAM TRACK SECTION (Dev Prime)
           ========================================= */
 .dev-intern-section {
     padding: 140px 5% 100px;
     background-color: var(--bg-darkest);
     position: relative;
     overflow: hidden;
 }

 .intern-split-layout {
     display: grid;
     grid-template-columns: 1.1fr 0.9fr;
     gap: 60px;
     align-items: center;
     max-width: 1200px;
     margin: 0 auto;
 }

 .intern-content h1 {
     font-size: 48px;
     font-weight: 800;
     color: var(--text-light);
     line-height: 1.2;
     margin-bottom: 25px;
     letter-spacing: -1px;
 }

 .intern-desc {
     color: var(--text-muted);
     font-size: 16px;
     line-height: 1.7;
     margin-bottom: 35px;
     max-width: 90%;
 }

 .intern-features-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
     margin-bottom: 40px;
 }

 .intern-feat-item {
     display: flex;
     align-items: center;
     gap: 12px;
     color: var(--text-light);
     font-size: 15px;
     font-weight: 500;
 }

 .intern-feat-item i {
     color: var(--accent-gold);
     font-size: 18px;
     background: rgba(230, 192, 64, 0.1);
     border-radius: 50%;
 }

 .intern-trust-tag {
     display: inline-block;
     color: var(--accent-gold);
     font-size: 15px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     padding: 12px 20px;
     background: rgba(230, 192, 64, 0.05);
     border-left: 3px solid var(--accent-gold);
     border-radius: 0 8px 8px 0;
 }

 .intern-pricing-card {
     background-color: var(--header-bg);
     border: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
     transition: transform 0.4s ease, border-color 0.4s ease;
 }

 .intern-pricing-card:hover {
     transform: translateY(-10px);
     border-color: rgba(230, 192, 64, 0.3);
     box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 20px rgba(230, 192, 64, 0.1);
 }

 .pricing-card-image {
     width: 100%;
     height: 220px;
     overflow: hidden;
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }

 .pricing-card-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s ease;
 }

 .intern-pricing-card:hover .pricing-card-image img {
     transform: scale(1.05);
 }

 .pricing-card-body {
     padding: 35px 30px;
 }

 .starts-at-text {
     color: var(--text-muted);
     font-size: 15px;
     margin-bottom: 5px;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: 600;
 }

 .price-display {
     display: flex;
     align-items: baseline;
     flex-wrap: wrap;
     gap: 12px;
     margin-bottom: 35px;
 }

 .old-prices {
     color: #ef4444;
     font-size: 20px;
     font-weight: 600;
     position: relative;
 }

 .old-prices::after {
     content: '';
     position: absolute;
     top: 50%;
     left: -5%;
     width: 110%;
     height: 2px;
     background-color: #ef4444;
     transform: rotate(-10deg);
 }

 .new-price {
     color: var(--text-light);
     font-size: 46px;
     font-weight: 800;
     letter-spacing: -1px;
 }

 .duration-text {
     color: var(--text-muted);
     font-size: 15px;
     font-weight: 500;
 }

 .pricing-actions {
     display: flex;
     gap: 15px;
 }

 .pricing-actions .btn-primary,
 .pricing-actions .btn-outline {
     flex: 1;
     text-align: center;
     padding: 14px 0;
     font-size: 15px;
     width: 100%;
 }

 @media (max-width: 992px) {
     .intern-split-layout {
         grid-template-columns: 1fr;
         gap: 50px;
     }

     .intern-desc {
         max-width: 100%;
     }
 }

 @media (max-width: 768px) {
     .dev-intern-section {
         padding: 120px 5% 80px;
     }

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

     .intern-features-grid {
         grid-template-columns: 1fr;
         gap: 15px;
     }

     .pricing-card-image {
         height: 180px;
     }

     .new-price {
         font-size: 38px;
     }

     .pricing-actions {
         flex-direction: column;
     }
 }


 /* Styles extracted from dev-specialist.php */
 /* =========================================
           3. MAIN HEADER & DROPDOWN
           ========================================= */
 .main-header {
     position: sticky;
     top: 0;
     width: 100%;
     background-color: var(--header-bg);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 5%;
     height: 80px;
     z-index: 1000;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
 }

 .logo {
     display: flex;
     align-items: center;
     text-decoration: none;
     z-index: 1001;
 }

 .logo-img {
     max-height: 45px;
     transition: var(--transition);
 }

 .logo-img:hover {
     transform: scale(1.05);
 }

 .nav-container {
     display: flex;
     align-items: center;
     gap: 40px;
 }

 .nav-links {
     display: flex;
     gap: 25px;
     list-style: none;
     align-items: center;
 }

 .nav-links li a {
     color: var(--text-light);
     text-decoration: none;
     font-size: 15px;
     font-weight: 500;
     display: flex;
     align-items: center;
     gap: 8px;
     position: relative;
     transition: var(--transition);
 }

 .nav-links li a i {
     color: var(--text-muted);
     font-size: 14px;
     transition: var(--transition);
 }

 .nav-links li a:hover,
 .nav-links li a:hover i {
     color: var(--accent-gold);
 }

 .nav-links li a::after {
     content: '';
     position: absolute;
     width: 0;
     height: 2px;
     bottom: -6px;
     left: 0;
     background-color: var(--accent-gold);
     transition: width 0.3s ease;
     box-shadow: 0 0 8px var(--accent-gold);
 }

 .nav-links li a:hover::after,
 .nav-links li a.active::after {
     width: 100%;
 }

 .cta-btn-nav {
     background: transparent;
     color: var(--accent-gold);
     border: 2px solid var(--accent-gold);
     padding: 10px 24px;
     border-radius: 30px;
     font-size: 15px;
     font-weight: 600;
     cursor: pointer;
     text-decoration: none;
     transition: var(--transition);
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .cta-btn-nav:hover {
     background: var(--accent-gold);
     color: #000;
     box-shadow: 0 0 15px rgba(230, 192, 64, 0.4);
     transform: translateY(-2px);
 }

 .dropdown {
     position: relative;
 }

 .dropdown-icon {
     font-size: 10px !important;
     margin-left: 4px;
     transition: transform 0.3s ease !important;
 }

 .dropdown:hover .dropdown-icon {
     transform: rotate(180deg);
     color: var(--accent-gold);
 }

 .dropdown-content {
     visibility: hidden;
     opacity: 0;
     position: absolute;
     top: 130%;
     left: 0;
     background-color: #1a1c23f2;
     min-width: 200px;
     box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.6);
     border-radius: 8px;
     border: 1px solid rgba(255, 255, 255, 0.05);
     padding: 10px 0;
     z-index: 1002;
     transform: translateY(10px);
     transition: all 0.3s ease;
     list-style: none;
 }

 .dropdown:hover .dropdown-content {
     visibility: visible;
     opacity: 1;
     top: 36px;
     transform: translateY(0);
 }

 .dropdown-content li {
     width: 100%;
 }

 .dropdown-content li a {
     display: block;
     padding: 12px 20px;
     color: var(--text-light);
     font-size: 14px;
     transition: all 0.2s ease;
 }

 .dropdown-content li a::after {
     display: none;
 }

 .dropdown-content li a:hover {
     background-color: rgba(230, 192, 64, 0.1);
     color: var(--accent-gold);
     padding-left: 25px;
     border-left: 2px solid var(--accent-gold);
 }

 .hamburger {
     display: none;
     cursor: pointer;
     flex-direction: column;
     gap: 6px;
     z-index: 1001;
 }

 .hamburger span {
     display: block;
     width: 28px;
     height: 3px;
     background-color: var(--text-light);
     border-radius: 3px;
     transition: var(--transition);
 }

 .overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.7);
     backdrop-filter: blur(5px);
     opacity: 0;
     visibility: hidden;
     transition: var(--transition);
     z-index: 998;
 }

 .overlay.active {
     opacity: 1;
     visibility: visible;
 }

 @media (max-width: 992px) {
     .nav-container {
         position: fixed;
         top: 0;
         right: -100%;
         width: 300px;
         max-width: 80%;
         height: 100vh;
         background-color: #1a1c23;
         flex-direction: column;
         justify-content: center;
         align-items: flex-start;
         padding: 40px;
         gap: 30px;
         transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
         box-shadow: -5px 0 25px rgba(0, 0, 0, 0.8);
         z-index: 999;
         border-left: 1px solid rgba(230, 192, 64, 0.1);
     }

     .nav-container.active {
         right: 0;
     }

     .nav-links {
         flex-direction: column;
         align-items: flex-start;
         width: 100%;
         gap: 25px;
     }

     .hamburger {
         display: flex;
     }

     .hamburger.active span:nth-child(1) {
         transform: translateY(9px) rotate(45deg);
         background-color: var(--accent-gold);
     }

     .hamburger.active span:nth-child(2) {
         opacity: 0;
     }

     .hamburger.active span:nth-child(3) {
         transform: translateY(-9px) rotate(-45deg);
         background-color: var(--accent-gold);
     }

     .dropdown-content {
         position: static;
         visibility: visible;
         opacity: 1;
         display: none;
         background-color: transparent;
         box-shadow: none;
         border: none;
         padding: 0 0 0 20px;
         transform: none;
         margin-top: 10px;
     }

     .dropdown.active .dropdown-content {
         display: block;
     }

     .dropdown.active .dropdown-icon {
         transform: rotate(180deg);
     }

     .top-bar {
         padding: 15px 40px 15px 20px;
     }
 }

 /* =========================================
           4. PROGRAM TRACK SECTION (Specialist)
           ========================================= */
 .dev-intern-section {
     padding: 140px 5% 100px;
     background-color: var(--bg-darkest);
     position: relative;
     overflow: hidden;
 }

 .intern-split-layout {
     display: grid;
     grid-template-columns: 1.1fr 0.9fr;
     gap: 60px;
     align-items: center;
     max-width: 1200px;
     margin: 0 auto;
 }

 .intern-content h1 {
     font-size: 48px;
     font-weight: 800;
     color: var(--text-light);
     line-height: 1.2;
     margin-bottom: 25px;
     letter-spacing: -1px;
 }

 .intern-desc {
     color: var(--text-muted);
     font-size: 16px;
     line-height: 1.7;
     margin-bottom: 35px;
     max-width: 90%;
 }

 .intern-features-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
     margin-bottom: 40px;
 }

 .intern-feat-item {
     display: flex;
     align-items: center;
     gap: 12px;
     color: var(--text-light);
     font-size: 15px;
     font-weight: 500;
 }

 .intern-feat-item i {
     color: var(--accent-gold);
     font-size: 18px;
     background: rgba(230, 192, 64, 0.1);
     border-radius: 50%;
 }

 .intern-trust-tag {
     display: inline-block;
     color: var(--accent-gold);
     font-size: 15px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     padding: 12px 20px;
     background: rgba(230, 192, 64, 0.05);
     border-left: 3px solid var(--accent-gold);
     border-radius: 0 8px 8px 0;
 }

 .intern-pricing-card {
     background-color: var(--header-bg);
     border: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
     transition: transform 0.4s ease, border-color 0.4s ease;
     position: relative;
 }

 .intern-pricing-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 3px;
     background: linear-gradient(to right, #8b5cf6, #ec4899);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.4s ease;
     z-index: 2;
 }

 .intern-pricing-card:hover::before {
     transform: scaleX(1);
 }

 .intern-pricing-card:hover {
     transform: translateY(-10px);
     border-color: rgba(230, 192, 64, 0.3);
     box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 20px rgba(230, 192, 64, 0.1);
 }

 .pricing-card-image {
     width: 100%;
     height: 220px;
     overflow: hidden;
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }

 .pricing-card-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s ease;
 }

 .intern-pricing-card:hover .pricing-card-image img {
     transform: scale(1.05);
 }

 .pricing-card-body {
     padding: 35px 30px;
 }

 .starts-at-text {
     color: var(--text-muted);
     font-size: 15px;
     margin-bottom: 5px;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: 600;
 }

 .price-display {
     display: flex;
     align-items: baseline;
     flex-wrap: wrap;
     gap: 12px;
     margin-bottom: 35px;
 }

 .old-prices {
     color: #ef4444;
     font-size: 20px;
     font-weight: 600;
     position: relative;
 }

 .old-prices::after {
     content: '';
     position: absolute;
     top: 50%;
     left: -5%;
     width: 110%;
     height: 2px;
     background-color: #ef4444;
     transform: rotate(-10deg);
 }

 .new-price {
     color: var(--text-light);
     font-size: 46px;
     font-weight: 800;
     letter-spacing: -1px;
 }

 .duration-text {
     color: var(--text-muted);
     font-size: 15px;
     font-weight: 500;
 }

 .pricing-actions {
     display: flex;
     gap: 15px;
 }

 .pricing-actions .btn-primary,
 .pricing-actions .btn-outline {
     flex: 1;
     text-align: center;
     padding: 14px 0;
     font-size: 15px;
     width: 100%;
 }

 @media (max-width: 992px) {
     .intern-split-layout {
         grid-template-columns: 1fr;
         gap: 50px;
     }

     .intern-desc {
         max-width: 100%;
     }
 }

 @media (max-width: 768px) {
     .dev-intern-section {
         padding: 120px 5% 80px;
     }

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

     .intern-features-grid {
         grid-template-columns: 1fr;
         gap: 15px;
     }

     .pricing-card-image {
         height: 180px;
     }

     .new-price {
         font-size: 38px;
     }

     .pricing-actions {
         flex-direction: column;
     }
 }



 /* =========================================
   SELF-PACED PAGE RECREATED STYLES
   ========================================= */

 .why-sp-section {
     padding: 100px 5%;
     background-color: var(--bg-darkest);
 }

 .split-layout {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
     max-width: 1200px;
     margin: 0 auto;
     align-items: center;
 }

 .why-content h2 {
     font-size: 38px;
     margin-bottom: 30px;
     font-weight: 800;
 }

 .lead-text {
     font-size: 20px;
     color: var(--accent-gold);
     margin-bottom: 20px;
     font-weight: 600;
 }

 .text-block p {
     margin-bottom: 15px;
     color: var(--text-muted);
     line-height: 1.8;
 }

 .why-visuals {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .feature-card-mini {
     display: flex;
     align-items: center;
     gap: 20px;
     background: var(--header-bg);
     padding: 25px;
     border-radius: 12px;
     border: 1px solid rgba(255, 255, 255, 0.05);
 }

 .feature-card-mini .icon-wrap {
     width: 50px;
     height: 50px;
     background: rgba(230, 192, 64, 0.1);
     color: var(--accent-gold);
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 20px;
     flex-shrink: 0;
 }

 .card-text h4 {
     font-size: 18px;
     margin-bottom: 5px;
     color: var(--text-light);
 }

 .card-text p {
     color: var(--text-muted);
     margin: 0;
     font-size: 14px;
 }

 /* ── Scroll-driven Master Every Stack section ── */
 .modules-pin-container {
     height: 380vh;
     position: relative;
     background-color: #0d0e12;
 }

 .sp-modules-section {
     position: sticky;
     top: 0;
     height: 100vh;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     justify-content: center;
     background-color: #0d0e12;
     padding: 0 5%;
 }

 .modules-pin-inner {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
 }

 .modules-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 28px;
     width: 100%;
 }

 /* Cards start fully below viewport */
 .module-card {
     background: var(--header-bg);
     border: 1px solid rgba(255, 255, 255, 0.06);
     border-radius: 16px;
     padding: 8px 26px;
     position: relative;
     overflow: hidden;
     height: 183px;
     display: flex;
     flex-direction: column;
     /* NO css transition — transform is set directly by JS every scroll frame */
 }

 .module-card.scroll-card {
     transform: translateY(100vh);
     opacity: 0;
 }

 /* Gradient top bar on hover */
 .module-card::before {
     content: '';
     position: absolute;
     top: 0; left: 0;
     width: 100%; height: 3px;
     background: linear-gradient(to right, #8b5cf6, #ec4899);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.4s ease;
     z-index: 2;
 }
 .module-card:hover::before { transform: scaleX(1); }


 .card-title {
     font-size: 24px;
     font-weight: 800;
     color: var(--accent-gold);
     margin-bottom: 15px;
     letter-spacing: 1px;
 }

 .card-default-view p {
     color: var(--text-muted);
     line-height: 1.6;
     margin-bottom: 30px;
     flex-grow: 1;
 }

 .module-graphic {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     margin-top: auto;
     border-top: 1px solid rgba(255, 255, 255, 0.05);
     padding-top: 20px;
 }

 .price-tag {
     font-weight: 700;
     color: #fff;
     font-size: 18px;
     letter-spacing: 1px;
 }

 .graphic-icon {
     font-size: 40px;
     color: rgba(230, 192, 64, 0.2);
 }

 .hover-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid rgba(230, 192, 64, 0.2);
     padding-bottom: 15px;
     margin-bottom: 15px;
 }

 .hover-header h4 {
     font-size: 18px;
     color: var(--accent-gold);
     margin: 0;
 }

 .header-icon {
     font-size: 24px;
     color: var(--accent-gold);
 }

 .syllabus-scroll {
     overflow-y: auto;
     flex-grow: 1;
     padding-right: 10px;
 }

 .syllabus-scroll::-webkit-scrollbar {
     width: 4px;
 }

 .syllabus-scroll::-webkit-scrollbar-thumb {
     background: rgba(230, 192, 64, 0.3);
     border-radius: 4px;
 }

 .syllabus-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .syllabus-list li {
     color: var(--text-light);
     font-size: 14px;
     margin-bottom: 12px;
     display: flex;
     align-items: flex-start;
     gap: 10px;
 }

 .syllabus-list li i {
     color: var(--accent-gold);
     font-size: 12px;
     margin-top: 4px;
 }

 /* Responsive */
 @media (max-width: 992px) {
     .split-layout {
         grid-template-columns: 1fr;
     }
 }

 /* =========================================
   SELF-PACED PAGE SPECIFIC STYLES
   ========================================= */

 /* --- Self-Paced Hero Styles --- */
 .page-hero {
     padding: 180px 5% 100px;
     position: relative;
     overflow: hidden;
     min-height: 70vh;
     display: flex;
     align-items: center;
 }

 .hero-glow {
     position: absolute;
     top: 40%;
     left: 50%;
     width: 800px;
     height: 800px;
     background: radial-gradient(circle, rgba(230, 192, 64, 0.05) 0%, transparent 60%);
     transform: translate(-50%, -50%);
     pointer-events: none;
     z-index: 0;
     animation: pulseGlow 6s infinite alternate;
 }

 .page-hero .section-container {
     position: relative;
     z-index: 1;
     max-width: 900px;
     margin: 0 auto;
 }

 .pre-headline {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: 14px;
     color: var(--accent-gold);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     margin-bottom: 20px;
 }

 .page-hero h1 {
     font-size: 56px;
     font-weight: 800;
     line-height: 1.2;
     margin-bottom: 25px;
     letter-spacing: -1px;
 }

 .hero-subtitle {
     font-size: 18px;
     line-height: 1.8;
     color: var(--text-muted);
     margin-bottom: 40px;
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
 }

 .hero-actions {
     display: flex;
     gap: 20px;
     justify-content: center;
 }

 .cta-primary {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background-color: var(--accent-gold);
     color: #000;
     padding: 15px 35px;
     border-radius: 40px;
     font-size: 16px;
     font-weight: 700;
     text-decoration: none;
     transition: var(--transition);
     box-shadow: 0 5px 15px rgba(230, 192, 64, 0.3);
 }

 .cta-primary:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 25px rgba(230, 192, 64, 0.5);
 }

 @keyframes pulseGlow {
     0% {
         opacity: 0.6;
         transform: translate(-50%, -50%) scale(0.9);
     }

     100% {
         opacity: 1;
         transform: translate(-50%, -50%) scale(1.1);
     }
 }

 /* --- Why Self-Paced Section Styles --- */
 .why-sp-section {
     padding: 100px 5%;
     background-color: var(--header-bg);
     border-top: 1px solid rgba(255, 255, 255, 0.02);
 }

 .split-layout {
     display: grid;
     grid-template-columns: 1.1fr 0.9fr;
     gap: 60px;
     align-items: center;
     max-width: 1200px;
     margin: 0 auto;
 }

 .why-content h2 {
     font-size: 38px;
     margin-bottom: 30px;
     line-height: 1.3;
 }

 .lead-text {
     font-size: 18px;
     color: var(--text-light);
     font-weight: 600;
     margin-bottom: 20px;
     border-left: 4px solid var(--accent-gold);
     padding-left: 20px;
     background: linear-gradient(90deg, rgba(230, 192, 64, 0.05), transparent);
     padding-top: 10px;
     padding-bottom: 10px;
     border-radius: 0 8px 8px 0;
 }

 .text-block p {
     color: var(--text-muted);
     font-size: 16px;
     line-height: 1.7;
     margin-bottom: 20px;
 }

 .why-visuals {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .feature-card-mini {
     background-color: var(--bg-darkest);
     border: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     padding: 25px;
     display: flex;
     align-items: flex-start;
     gap: 20px;
     transition: var(--transition);
 }

 .feature-card-mini:hover {
     transform: translateX(-10px);
     border-color: rgba(230, 192, 64, 0.3);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
 }

 .icon-wrap {
     width: 50px;
     height: 50px;
     background-color: rgba(230, 192, 64, 0.1);
     color: var(--accent-gold);
     font-size: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 10px;
     flex-shrink: 0;
     transition: var(--transition);
 }

 .feature-card-mini:hover .icon-wrap {
     background-color: var(--accent-gold);
     color: #000;
 }

 .card-text h4 {
     font-size: 18px;
     margin-bottom: 8px;
 }

 .card-text p {
     color: var(--text-muted);
     font-size: 14px;
     line-height: 1.5;
     margin: 0;
 }

 /* =========================================
   PINNED SCROLL MODULES SECTION
   ========================================= */


 /* --- Card Content & Typography --- */
 /* --- Card Header Row (icon + title inline) --- */
 .card-header-row {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 10px;
 }

 .card-header-icon {
     font-size: 18px;
     color: var(--accent-gold);
     flex-shrink: 0;
 }

 .card-title {
     color: #f8fafc;
     font-size: 16px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     border-bottom: 2px solid #f8fafc;
     padding-bottom: 4px;
     margin-bottom: 0;
     display: inline-block;
 }

 .module-card p {
     color: #9ba3af;
     font-size: 12px;
     line-height: 1.35;
     margin-bottom: 10px;
 }

 .module-graphic {
     margin-top: auto;
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
 }

 .price-tag {
     color: #e6c040;
     font-weight: 700;
     font-size: 13px;
     letter-spacing: 0.5px;
 }

 .graphic-icon {
     display: none;
 }

 .card-module-btn {
     background: var(--accent-gold);
     color: #000;
     border: none;
     border-radius: 6px;
     padding: 7px 14px;
     font-size: 12px;
     font-weight: 700;
     cursor: pointer;
     transition: all 0.3s ease;
     letter-spacing: 0.5px;
 }

 .card-module-btn:hover {
     background: #cfab36;
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(230, 192, 64, 0.35);
 }


 /* =========================================
   DYNAMIC SYLLABUS MODAL STYLES
   ========================================= */
 .syllabus-modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.8);
     backdrop-filter: blur(8px);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 10000;
     opacity: 0;
     visibility: hidden;
     transition: var(--transition);
 }

 .syllabus-modal-overlay.active {
     opacity: 1;
     visibility: visible;
 }

 .syllabus-modal-content {
     background-color: var(--header-bg);
     padding: 30px;
     border-radius: 16px;
     width: 90%;
     max-width: 500px;
     max-height: 85vh;
     position: relative;
     border: 1px solid rgba(230, 192, 64, 0.3);
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
     transform: translateY(20px);
     transition: transform 0.3s ease;
     display: flex;
     flex-direction: column;
 }

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

 .close-modal-btn {
     position: absolute;
     top: 20px;
     right: 20px;
     background: transparent;
     border: none;
     color: var(--text-muted);
     font-size: 20px;
     cursor: pointer;
     transition: var(--transition);
 }

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

 .modal-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid rgba(230, 192, 64, 0.3);
     padding-bottom: 15px;
     margin-bottom: 20px;
     padding-right: 30px;
 }

 .modal-header h4 {
     color: var(--accent-gold);
     font-size: 20px;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .modal-header .header-icon {
     color: rgba(230, 192, 64, 0.5);
     font-size: 24px;
 }

 .modal-body {
     overflow-y: auto;
     flex-grow: 1;
     padding-right: 10px;
 }

 .modal-body::-webkit-scrollbar {
     width: 4px;
 }

 .modal-body::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 4px;
 }

 .modal-body::-webkit-scrollbar-thumb {
     background: var(--accent-gold);
     border-radius: 4px;
 }

 .syllabus-list {
     list-style: none;
 }

 .syllabus-list li {
     color: var(--text-light);
     font-size: 14px;
     padding: 12px 0;
     border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
     display: flex;
     align-items: flex-start;
     gap: 10px;
     line-height: 1.5;
 }

 .syllabus-list li:last-child {
     border-bottom: none;
 }

 .syllabus-list li i {
     color: var(--accent-gold);
     font-size: 14px;
     margin-top: 3px;
 }

 /* Clickable Module Card */
 .card-default-view {
     padding: 20px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
 }

 .view-curriculum-bar {
     background-color: rgba(230, 192, 64, 0.1);
     color: var(--accent-gold);
     text-align: center;
     padding: 10px;
     font-size: 14px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1px;
     border-top: 1px solid rgba(230, 192, 64, 0.2);
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 8px;
     transition: var(--transition);
     cursor: pointer;
 }

 .view-curriculum-bar:hover {
     background-color: var(--accent-gold);
     color: #000;
 }

 /* =========================================
   RESPONSIVE FIXES 
   ========================================= */
 @media (max-width: 992px) {
     .page-hero h1 {
         font-size: 42px;
     }

     .modules-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 20px;
     }
 }

 @media (max-width: 768px) {
     .page-hero {
         padding: 140px 5% 80px;
     }

     .page-hero h1 {
         font-size: 36px;
     }

     .hero-subtitle {
         font-size: 16px;
     }

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

     .modules-grid {
         grid-template-columns: 1fr;
         gap: 20px;
     }
 }


 /* =========================================
   CONTACT PAGE STYLES
   ========================================= */
 .contact-page-section {
     padding: 140px 5% 80px;
     background-color: var(--bg-darkest);
 }

 .contact-container {
     max-width: 1200px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
     align-items: start;
 }

 .contact-text-content {
     padding-right: 20px;
 }

 .contact-text-content h2 {
     font-size: 36px;
     color: var(--text-light);
     margin-bottom: 20px;
     line-height: 1.3;
 }

 .contact-text-content p {
     color: var(--text-muted);
     font-size: 15px;
     line-height: 1.8;
     margin-bottom: 20px;
 }

 .founders-block {
     background: rgba(230, 192, 64, 0.05);
     border-left: 3px solid var(--accent-gold);
     padding: 20px 25px;
     border-radius: 0 12px 12px 0;
     margin: 25px 0;
 }

 .founders-block p {
     color: var(--accent-gold);
     font-weight: 600;
     font-size: 15px;
     margin-bottom: 0;
 }

 .contact-form-container {
     background: var(--header-bg);
     border: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: 16px;
     padding: 40px;
 }

 .contact-form-container h3 {
     color: var(--text-light);
     font-size: 24px;
     margin-bottom: 5px;
 }

 .input-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
 }

 .input-group select,
 .input-group textarea {
     width: 100%;
     padding: 12px 15px;
     background-color: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #fff;
     font-size: 15px;
     outline: none;
     transition: border-color 0.3s ease;
     font-family: inherit;
 }

 .input-group select:focus,
 .input-group textarea:focus {
     border-color: var(--accent-gold);
 }

 .input-group textarea {
     min-height: 120px;
     resize: vertical;
 }

 .input-group select option {
     background-color: #1a1c23;
     color: #fff;
 }

 /* Map Section */
 .map-section {
     position: relative;
     padding: 0;
 }

 .map-label {
     position: absolute;
     top: 20px;
     left: 50%;
     transform: translateX(-50%);
     background: var(--accent-gold);
     color: #000;
     padding: 10px 25px;
     border-radius: 30px;
     font-weight: 700;
     font-size: 14px;
     z-index: 5;
     box-shadow: 0 4px 15px rgba(230, 192, 64, 0.3);
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .google-map {
     width: 100%;
     height: 400px;
     border: none;
     display: block;
     filter: grayscale(0.5) contrast(1.1);
 }

 /* Contact Page Mobile Responsive */
 @media (max-width: 992px) {
     .contact-container {
         grid-template-columns: 1fr;
         gap: 40px;
     }

     .contact-text-content {
         padding-right: 0;
     }
 }

 @media (max-width: 768px) {
     .contact-page-section {
         padding: 120px 5% 60px;
     }

     .contact-text-content h2 {
         font-size: 28px;
     }

     .contact-form-container {
         padding: 25px 20px;
     }

     .input-row {
         grid-template-columns: 1fr;
         gap: 0;
     }

     .google-map {
         height: 300px;
     }
 }

 @media (max-width: 480px) {
     .contact-page-section {
         padding: 110px 4% 50px;
     }

     .contact-form-container {
         padding: 20px 15px;
     }

     .contact-text-content h2 {
         font-size: 24px;
     }
 }


 /* =========================================
   FAQ SECTION STYLES
   ========================================= */
 .faq-section {
     padding: 80px 5%;
     background-color: var(--header-bg);
     border-top: 1px solid rgba(255, 255, 255, 0.03);
 }

 .faq-container {
     max-width: 800px;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .faq-item {
     background: var(--bg-darkest);
     border: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     overflow: hidden;
     transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }

 .faq-item:hover {
     border-color: rgba(230, 192, 64, 0.2);
 }

 .faq-item.active {
     border-color: rgba(230, 192, 64, 0.3);
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3), 0 0 10px rgba(230, 192, 64, 0.05);
 }

 .faq-question {
     width: 100%;
     background: transparent;
     border: none;
     padding: 22px 25px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
     transition: background 0.3s ease;
 }

 .faq-question span {
     color: var(--text-light);
     font-size: 16px;
     font-weight: 600;
     text-align: left;
     flex: 1;
     padding-right: 15px;
 }

 .faq-icon {
     color: var(--accent-gold);
     font-size: 14px;
     transition: transform 0.3s ease;
     flex-shrink: 0;
 }

 .faq-item.active .faq-icon {
     transform: rotate(180deg);
 }

 .faq-question:hover {
     background: rgba(230, 192, 64, 0.03);
 }

 .faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.4s ease, padding 0.3s ease;
     padding: 0 25px;
 }

 .faq-item.active .faq-answer {
     max-height: 300px;
     padding: 0 25px 22px;
 }

 .faq-answer p {
     color: var(--text-muted);
     font-size: 15px;
     line-height: 1.7;
     border-top: 1px solid rgba(255, 255, 255, 0.05);
     padding-top: 15px;
 }

 /* FAQ Mobile Responsive */
 @media (max-width: 768px) {
     .faq-section {
         padding: 60px 5%;
     }

     .faq-question {
         padding: 18px 20px;
     }

     .faq-question span {
         font-size: 15px;
     }

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

     .faq-item.active .faq-answer {
         padding: 0 20px 18px;
     }
 }

 /* =========================================
   HIRE FROM US PAGE STYLES
   ========================================= */
 .hire-page-wrapper {
     background-color: var(--bg-darkest);
     color: #fff;
     padding-top: 100px;
 }

 .hire-hero-section {
     padding: 60px 5%;
 }

 .hire-container {
     max-width: 1200px;
     margin: 0 auto;
 }

 .hire-tag {
     color: var(--accent-gold);
     font-weight: 700;
     font-size: 13px;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 15px;
     display: inline-block;
 }

 .hire-hero {
     display: grid;
     grid-template-columns: 1.1fr 0.9fr;
     gap: 50px;
     align-items: center;
     margin-bottom: 60px;
 }

 .hire-hero-content h1 {
     font-size: 42px;
     font-weight: 800;
     color: #fff;
     margin-bottom: 20px;
     line-height: 1.2;
 }

 .hire-hero-content p {
     color: #9ba3af;
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 15px;
 }

 .hire-hero-form {
     background: rgba(26, 28, 35, 0.7);
     border-radius: 12px;
     padding: 30px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
     border: 1px solid rgba(255, 255, 255, 0.07);
     backdrop-filter: blur(10px);
 }

 .hire-hero-form h3 {
     font-size: 22px;
     font-weight: 800;
     margin-bottom: 20px;
     color: #fff;
 }

 .hire-form-group {
     margin-bottom: 15px;
 }

 .hire-form-group label {
     display: block;
     font-size: 13px;
     font-weight: 600;
     margin-bottom: 5px;
     color: #9ba3af;
 }

 .hire-form-group input,
 .hire-form-group select {
     width: 100%;
     padding: 11px 14px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     background: rgba(0, 0, 0, 0.25);
     border-radius: 8px;
     font-size: 14px;
     color: #fff;
     font-family: inherit;
     transition: border-color 0.3s;
 }

 .hire-form-group input:focus,
 .hire-form-group select:focus {
     outline: none;
     border-color: var(--accent-gold);
     box-shadow: 0 0 0 3px rgba(230, 192, 64, 0.1);
 }

 .hire-form-group input::placeholder {
     color: #6b7280;
 }

 .hire-form-group select option {
     background: #1a1c23;
     color: #fff;
 }

 .hire-submit-btn {
     width: 100%;
     background: var(--accent-gold);
     color: #000;
     font-weight: 700;
     font-size: 15px;
     border: none;
     padding: 13px;
     border-radius: 8px;
     cursor: pointer;
     transition: var(--transition);
     margin-top: 8px;
 }

 .hire-submit-btn:hover {
     background: #cfab36;
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(230, 192, 64, 0.3);
 }

 .hire-stats-row {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 20px;
     border-top: 1px solid rgba(255, 255, 255, 0.05);
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     padding: 30px 0;
     margin-bottom: 60px;
 }

 .hire-stat-item {
     display: flex;
     align-items: center;
     gap: 14px;
     flex: 1;
 }

 .hire-stat-icon {
     width: 44px;
     height: 44px;
     background: rgba(230, 192, 64, 0.1);
     color: var(--accent-gold);
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 19px;
     flex-shrink: 0;
 }

 .hire-stat-item p {
     font-size: 13px;
     color: #fff;
     font-weight: 600;
     margin: 0;
     line-height: 1.4;
 }

 .hire-how-it-works {
     background: rgba(26, 28, 35, 0.4);
     border: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: 16px;
     padding: 36px;
     margin-bottom: 60px;
 }

 .how-works-top {
     display: flex;
     align-items: center;
     gap: 40px;
     margin-bottom: 36px;
     flex-wrap: wrap;
 }

 .how-works-top h2 {
     font-size: 20px;
     font-weight: 800;
     color: #fff;
     min-width: 140px;
 }

 .how-works-steps {
     display: flex;
     justify-content: space-between;
     flex: 1;
     gap: 20px;
     flex-wrap: wrap;
 }

 .hw-step {
     display: flex;
     align-items: flex-start;
     gap: 14px;
 }

 .hw-step-icon {
     position: relative;
     flex-shrink: 0;
 }

 .circle-icon {
     width: 48px;
     height: 48px;
     background: rgba(26, 28, 35, 0.9);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 19px;
     color: #fff;
 }

 .step-num {
     position: absolute;
     bottom: -4px;
     right: -4px;
     width: 20px;
     height: 20px;
     background: var(--accent-gold);
     color: #000;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 11px;
     font-weight: 700;
 }

 .hw-step-text h4 {
     font-size: 14px;
     font-weight: 700;
     color: #fff;
     margin-bottom: 4px;
 }

 .hw-step-text p {
     font-size: 12px;
     color: #9ba3af;
     margin: 0;
     max-width: 170px;
     line-height: 1.4;
 }

 .hw-banner {
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: rgba(26, 28, 35, 0.9);
     border: 1px solid rgba(230, 192, 64, 0.3);
     border-radius: 12px;
     padding: 20px 28px;
     gap: 20px;
     flex-wrap: wrap;
 }

 .hw-banner-left {
     display: flex;
     align-items: center;
     gap: 14px;
 }

 .hw-banner-icon {
     width: 40px;
     height: 40px;
     background: rgba(230, 192, 64, 0.15);
     color: var(--accent-gold);
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 17px;
     flex-shrink: 0;
 }

 .hw-banner h3 {
     font-size: 17px;
     font-weight: 700;
     color: #fff;
     margin: 0;
 }

 .hw-banner-btn {
     background: var(--accent-gold);
     color: #000;
     font-weight: 700;
     padding: 11px 22px;
     border-radius: 8px;
     font-size: 14px;
     transition: var(--transition);
     text-decoration: none;
     display: inline-block;
 }

 .hw-banner-btn:hover {
     background: #cfab36;
     transform: translateY(-2px);
 }

 .hire-value-section {
     background: rgba(26, 28, 35, 0.2);
     padding: 80px 5%;
 }

 .value-grid {
     display: grid;
     grid-template-columns: 0.8fr 1.2fr;
     gap: 60px;
 }

 .value-left h2 {
     font-size: 34px;
     font-weight: 800;
     color: #fff;
     margin-bottom: 18px;
     line-height: 1.2;
 }

 .value-left>p {
     color: #9ba3af;
     font-size: 15px;
     line-height: 1.6;
     margin-bottom: 14px;
 }

 .value-means-box {
     background: rgba(26, 28, 35, 0.6);
     border: 1px solid rgba(255, 255, 255, 0.06);
     border-radius: 12px;
     padding: 24px;
     margin-top: 24px;
 }

 .value-means-box h4 {
     font-size: 15px;
     font-weight: 700;
     margin-bottom: 14px;
     color: #fff;
 }

 .value-means-box ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .value-means-box li {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 14px;
     color: #9ba3af;
     margin-bottom: 9px;
 }

 .value-means-box li i {
     color: var(--accent-gold);
 }

 .value-right h3 {
     font-size: 17px;
     font-weight: 700;
     color: #fff;
     margin-bottom: 22px;
     border-bottom: 2px solid var(--accent-gold);
     display: inline-block;
     padding-bottom: 5px;
 }

 .value-cards-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 18px;
 }

 .v-card {
     background: rgba(26, 28, 35, 0.5);
     border-radius: 12px;
     padding: 20px;
     border: 1px solid rgba(255, 255, 255, 0.06);
     transition: var(--transition);
 }

 .v-card:hover {
     transform: translateY(-4px);
     border-color: rgba(230, 192, 64, 0.25);
 }

 .v-card-top {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 10px;
 }

 .v-card-icon {
     width: 34px;
     height: 34px;
     background: rgba(230, 192, 64, 0.1);
     color: var(--accent-gold);
     border-radius: 8px;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 15px;
 }

 .v-card h4 {
     font-size: 14px;
     font-weight: 700;
     color: #fff;
     margin: 0;
 }

 .v-card p {
     font-size: 12px;
     color: #9ba3af;
     line-height: 1.5;
     margin: 0;
 }

 .value-bottom-text {
     text-align: center;
     margin-top: 38px;
     font-size: 14px;
     font-weight: 700;
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
 }

 .value-bottom-text i {
     color: var(--accent-gold);
 }

 .hire-roles-section {
     padding: 80px 5%;
 }

 .roles-grid {
     display: grid;
     grid-template-columns: 1.2fr 0.8fr;
     gap: 60px;
 }

 .roles-left h2 {
     font-size: 30px;
     font-weight: 800;
     color: #fff;
     margin-bottom: 18px;
 }

 .roles-left>p {
     color: #9ba3af;
     font-size: 15px;
     line-height: 1.6;
     margin-bottom: 28px;
 }

 .roles-left h3,
 .roles-right h3 {
     font-size: 15px;
     font-weight: 700;
     color: #fff;
     margin-bottom: 18px;
 }

 .core-skills-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 14px;
 }

 .skill-box {
     background: rgba(26, 28, 35, 0.5);
     border: 1px solid rgba(255, 255, 255, 0.06);
     border-radius: 10px;
     padding: 14px;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     width: calc(25% - 11px);
     transition: var(--transition);
 }

 .skill-box:hover {
     border-color: var(--accent-gold);
     transform: translateY(-3px);
 }

 .skill-box i {
     color: var(--accent-gold);
     font-size: 22px;
     margin-bottom: 8px;
 }

 .skill-box span {
     font-size: 11px;
     font-weight: 600;
     color: #e5e7eb;
 }

 .talent-cats-list {
     display: flex;
     flex-direction: column;
     gap: 16px;
 }

 .cat-item {
     display: flex;
     align-items: flex-start;
     gap: 14px;
     background: rgba(26, 28, 35, 0.3);
     padding: 14px;
     border-radius: 10px;
     border: 1px solid rgba(255, 255, 255, 0.03);
 }

 .cat-icon {
     width: 34px;
     height: 34px;
     background: rgba(255, 255, 255, 0.05);
     color: var(--accent-gold);
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 15px;
     flex-shrink: 0;
 }

 .cat-text h4 {
     font-size: 14px;
     font-weight: 700;
     color: #fff;
     margin-bottom: 4px;
 }

 .cat-text p {
     font-size: 12px;
     color: #9ba3af;
     margin: 0;
 }

 .hire-bottom-cta {
     background: #1a1c23;
     border-top: 1px solid rgba(230, 192, 64, 0.2);
     padding: 40px 5%;
 }

 .cta-container {
     max-width: 1200px;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 20px;
 }

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

 .cta-left-icon {
     width: 48px;
     height: 48px;
     background: rgba(230, 192, 64, 0.1);
     color: var(--accent-gold);
     border-radius: 12px;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 22px;
 }

 .cta-text h3 {
     color: var(--accent-gold);
     font-size: 19px;
     font-weight: 700;
     margin-bottom: 4px;
 }

 .cta-text p {
     color: #9ba3af;
     font-size: 13px;
     margin: 0;
 }

 .cta-logo img {
     height: 34px;
 }

 /* Hire From Us — Responsive */
 @media (max-width: 992px) {
     .hire-hero {
         grid-template-columns: 1fr;
     }

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

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

     .how-works-top {
         flex-direction: column;
     }

     .hire-stats-row {
         flex-wrap: wrap;
     }
 }

 @media (max-width: 640px) {
     .hire-hero-content h1 {
         font-size: 30px;
     }

     .hire-stats-row {
         flex-direction: column;
     }

     .hw-banner {
         flex-direction: column;
         align-items: flex-start;
     }

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

     .skill-box {
         width: calc(50% - 8px);
     }

     .cta-container {
         flex-direction: column;
         text-align: center;
     }
 }




 /* Add this to your CSS file */

.map-section {
    width: 100%;
    /* Optional: Sets a dark background while the map loads */
    background-color: #121212; 
}

.google-map {
    width: 100%;
    height: 450px; /* Adjust height as needed */
    border: 0;
    
    /* Dark Mode Magic */
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

/* If your website has a specific dark mode class (e.g., on the body tag), 
   you can scope it like this: */
body.dark-mode .google-map {
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

/* =========================================
   SYLLABUS SECTION STYLES
========================================= */
.syllabus-section {
    padding: 80px 0;
    position: relative;
    z-index: 1;
}

.syllabus-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.syllabus-sidebar {
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.syllabus-tab {
    background: rgba(26, 28, 35, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.syllabus-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-gold);
    transform: scaleY(0);
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.syllabus-tab:hover, .syllabus-tab.active {
    background: rgba(230, 192, 64, 0.08);
    border-color: rgba(230, 192, 64, 0.3);
    transform: translateX(10px);
}

.syllabus-tab:hover::before, .syllabus-tab.active::before {
    transform: scaleY(1);
}

.syllabus-tab i {
    font-size: 28px;
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.syllabus-tab:hover i, .syllabus-tab.active i {
    color: var(--accent-gold);
    text-shadow: 0 0 15px rgba(230, 192, 64, 0.5);
}

.tab-text h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-light);
}

.tab-text p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.syllabus-content-area {
    width: 65%;
    background: rgba(26, 28, 35, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 40px;
    min-height: 600px;
    position: relative;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: box-shadow 0.4s ease;
}

/* L-Shape neon animated gradient border */
.syllabus-content-area::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3px;
    height: 70%;
    background: linear-gradient(to top, #8b5cf6, #10b981, #ec4899, #8b5cf6);
    background-size: 100% 300%;
    animation: neonBorderFlow 3s linear infinite;
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.6), 0 0 20px rgba(139, 92, 246, 0.3);
    z-index: 2;
}

.syllabus-content-area::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    height: 3px;
    background: linear-gradient(to right, #8b5cf6, #10b981, #ec4899, #8b5cf6);
    background-size: 300% 100%;
    animation: neonBorderFlowH 3s linear infinite;
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6), 0 0 20px rgba(16, 185, 129, 0.3);
    z-index: 2;
}

.syllabus-content-area:hover {
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.15), 0 0 20px rgba(16, 185, 129, 0.1);
}

.syllabus-pane {
    display: none;
    animation: fadeInSyllabus 0.5s ease forwards;
}

.syllabus-pane.active {
    display: block;
}

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

.pane-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pane-icon {
    font-size: 40px;
    color: var(--accent-gold);
}

.pane-header h2 {
    font-size: 32px;
    font-weight: 700;
}

.syllabus-modules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.syllabus-modules .module {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: transform 0.3s ease;
    height: 100%;
}

.syllabus-modules .module:hover {
    transform: translateY(-5px);
    border-color: rgba(230, 192, 64, 0.2);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.module h4 {
    color: var(--accent-gold);
    font-size: 16px;
    margin-bottom: 12px;
    font-weight: 600;
}

.module ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.module ul li {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 8px;
    position: relative;
    padding-left: 15px;
    line-height: 1.5;
}

.module ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 6px;
    height: 6px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: background 0.3s;
}

.module:hover ul li::before {
    background: var(--accent-gold);
}

@media (max-width: 992px) {
    .syllabus-layout {
        flex-direction: column;
    }
    
    .syllabus-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 15px;
        -webkit-overflow-scrolling: touch;
    }
    
    .syllabus-tab {
        flex: 0 0 280px;
    }
    
    .syllabus-content-area {
        width: 100%;
        padding: 25px;
    }
    
    .syllabus-modules {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   COMPREHENSIVE MOBILE RESPONSIVE OVERHAUL
   Covers all pages & sections for 320px-992px
   ========================================= */

/* --- Global overflow prevention --- */
html {
    overflow-x: hidden;
}

/* --- Small mobile devices (320px - 480px) --- */
@media (max-width: 480px) {
    /* Top announcement bar */
    .top-bar {
        font-size: 12px;
        padding: 10px 35px 10px 12px;
    }

    .top-bar-content {
        gap: 8px;
    }

    .gold-dot {
        width: 8px;
        height: 8px;
    }

    /* Header */
    .main-header {
        height: 65px;
        padding: 0 4%;
    }

    .logo-img {
        max-height: 38px;
    }

    /* Hero section */
    .hero-section {
        padding: 100px 4% 60px;
        min-height: auto;
    }

    .hero-content h1 {
        font-size: 28px;
        letter-spacing: -0.5px;
        margin-bottom: 15px;
    }

    .hero-content p {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 25px;
    }

    .pre-headline {
        font-size: 11px;
        letter-spacing: 1px;
        margin-bottom: 12px;
    }

    .cta-primary,
    .cta-secondary {
        padding: 12px 20px;
        font-size: 14px;
    }

    .visual-wrapper {
        height: 220px;
    }

    .particle-network {
        width: 180px;
        height: 180px;
    }

    .code-stream {
        font-size: 10px;
    }

    /* Course section */
    .courses-section {
        padding: 60px 4%;
    }

    .course-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .section-header {
        margin-bottom: 35px;
    }

    .section-header h2 {
        font-size: 24px;
    }

    .section-header p {
        font-size: 14px;
    }

    /* Features section */
    .features-section {
        padding: 60px 4%;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 30px;
    }

    .feature-box {
        padding: 25px 18px;
    }

    .feature-icon {
        width: 55px;
        height: 55px;
        font-size: 22px;
    }

    /* Roadmap section */
    .roadmap-section {
        padding: 60px 4%;
    }

    .timeline {
        margin-top: 30px;
    }

    .timeline::before {
        left: 20px;
    }

    .timeline-item {
        padding: 10px 0 20px 60px;
    }

    .timeline-item.left .timeline-dot,
    .timeline-item.right .timeline-dot {
        left: 0;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .timeline-content {
        padding: 20px 15px;
    }

    .timeline-content h3 {
        font-size: 18px;
    }

    .timeline-content p {
        font-size: 13px;
    }

    /* Testimonials */
    .testimonials-section {
        padding: 60px 4%;
    }

    .testimonial-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .testimonial-card {
        padding: 25px 18px;
    }

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

    .stat-item p {
        font-size: 12px;
    }

    /* Video section */
    .video-section {
        padding: 60px 4%;
    }

    .play-btn {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

    /* Blog section */
    .blog-section {
        padding: 60px 4%;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .blog-image {
        height: 180px;
    }

    .blog-content {
        padding: 20px 15px;
    }

    .blog-content h3 {
        font-size: 16px;
    }

    /* Footer */
    .site-footer {
        padding: 40px 4% 20px;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 30px;
    }

    .footer-brand p {
        font-size: 13px;
    }

    .social-links a {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .newsletter-form {
        border-radius: 25px;
    }

    /* Contact page */
    .contact-page-section {
        padding: 100px 4% 50px;
    }

    .contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-text-content h2 {
        font-size: 28px;
    }

    .contact-form-container {
        padding: 25px 18px;
    }

    .input-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Dev Intern/Specialist/Prime */
    .dev-intern-section {
        padding: 100px 4% 60px;
    }

    .intern-content h1 {
        font-size: 28px;
    }

    .intern-desc {
        font-size: 14px;
    }

    .intern-features-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .intern-feat-item {
        font-size: 13px;
    }

    .intern-trust-tag {
        font-size: 12px;
        letter-spacing: 1px;
        padding: 10px 15px;
    }

    .pricing-card-body {
        padding: 25px 18px;
    }

    .new-price {
        font-size: 32px;
    }

    .pricing-actions {
        flex-direction: column;
    }

    /* Pricing comparison cards */
    .pricing-section {
        padding: 15px 4%;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        max-width: 100%;
    }

    .pricing-card {
        padding: 30px 20px;
    }

    .pricing-card.active-track {
        transform: none;
    }

    .plan-price .new-price {
        font-size: 32px;
    }

    /* Self-paced page */
    .sp-modules-section {
        padding: 60px 4%;
    }

    .modules-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .module-card {
        height: auto;
        min-height: 220px;
        padding: 24px 18px;
    }

    .card-title {
        font-size: 20px;
    }

    /* Self-paced hero */
    .page-hero {
        padding: 100px 4% 50px;
    }

    .page-hero h1 {
        font-size: 26px;
    }

    .hero-subtitle {
        font-size: 14px;
    }

    /* Why self-paced section */
    .why-sp-section {
        padding: 60px 4%;
    }

    .split-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .why-content h2 {
        font-size: 26px;
        margin-bottom: 20px;
    }

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

    .feature-card-mini {
        padding: 18px;
        gap: 15px;
    }

    .feature-card-mini .icon-wrap {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    .card-text h4 {
        font-size: 15px;
    }

    /* Syllabus section small screen */
    .syllabus-section {
        padding: 50px 0;
    }

    .syllabus-sidebar {
        flex-direction: column;
        overflow-x: visible;
    }

    .syllabus-tab {
        flex: 0 0 auto;
        padding: 15px 18px;
        gap: 12px;
    }

    .syllabus-tab i {
        font-size: 22px;
    }

    .tab-text h3 {
        font-size: 15px;
    }

    .tab-text p {
        font-size: 11px;
    }

    .syllabus-content-area {
        padding: 20px 15px;
        min-height: auto;
    }

    .pane-header h2 {
        font-size: 24px;
    }

    .pane-icon {
        font-size: 30px;
    }

    .module h4 {
        font-size: 14px;
    }

    .module ul li {
        font-size: 12px;
    }

    /* Hire from us page */
    .hire-hero-section {
        padding: 100px 4% 50px;
    }

    .hire-container {
        max-width: 100%;
    }

    .hire-hero {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .hire-hero-content h1 {
        font-size: 26px;
    }

    .hire-hero-content p {
        font-size: 14px;
    }

    .hire-hero-form {
        padding: 22px 18px;
    }

    .hire-hero-form h3 {
        font-size: 18px;
    }

    .hire-stats-row {
        flex-direction: column;
        gap: 15px;
        padding: 20px 0;
        margin-bottom: 30px;
    }

    .hire-how-it-works {
        padding: 22px 18px;
        margin-bottom: 30px;
    }

    .how-works-steps {
        flex-direction: column;
        gap: 18px;
    }

    .hw-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px 18px;
    }

    .hw-banner h3 {
        font-size: 14px;
    }

    .hire-value-section {
        padding: 50px 4%;
    }

    .value-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .value-left h2 {
        font-size: 24px;
    }

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

    .hire-roles-section {
        padding: 50px 4%;
    }

    .roles-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .roles-left h2 {
        font-size: 24px;
    }

    .skill-box {
        width: calc(50% - 8px);
    }

    .core-skills-grid {
        gap: 10px;
    }

    .hire-bottom-cta {
        padding: 30px 4%;
    }

    .cta-container {
        flex-direction: column;
        text-align: center;
    }

    .cta-left {
        flex-direction: column;
        text-align: center;
    }

    .cta-text h3 {
        font-size: 16px;
    }

    .cta-text p {
        font-size: 12px;
    }

    /* Blog details page */
    .blog-details-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Booking modal */
    .booking-modal-content {
        padding: 25px 18px;
        width: 95%;
    }

    /* Syllabus modal */
    .syllabus-modal-content {
        width: 95%;
        max-height: 85vh;
        padding: 25px 18px;
    }

    /* Map section */
    .map-section {
        height: 300px;
    }

    .google-map {
        height: 300px;
    }

    /* Form inline flex layout in hire page */
    .hire-hero-form div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 0 !important;
    }
}

/* --- Medium mobile (481px - 768px) --- */
@media (max-width: 768px) and (min-width: 481px) {
    .hero-section {
        padding: 110px 5% 70px;
    }

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

    .courses-section {
        padding: 70px 5%;
    }

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

    .contact-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

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

    .intern-content h1 {
        font-size: 34px;
    }

    .split-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

    .module-card {
        height: auto;
        min-height: 260px;
    }

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

    .hire-hero-form div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Syllabus small tablet */
    .syllabus-sidebar {
        flex-direction: column;
        overflow-x: visible;
    }

    .syllabus-tab {
        flex: 0 0 auto;
    }
}

/* --- Tablet (769px - 992px) --- */
@media (max-width: 992px) and (min-width: 769px) {
    .hero-content h1 {
        font-size: 38px;
    }

    .contact-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

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

    .split-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

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

    .module-card {
        height: auto;
        min-height: 270px;
    }
}

/* --- Global mobile nav fix (ensure proper z-index layering) --- */
@media (max-width: 992px) {
    .nav-container {
        overflow-y: auto;
    }

    /* Prevent body scroll when menu is open */
    body.menu-open {
        overflow: hidden;
    }
}
/* Custom Pricing Split */
.price-split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 15px;
    margin: 15px 0 25px 0;
}
.price-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 48%;
}
.type-label {
    font-size: 13px;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 4px;
}
.calc {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.final-price {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-light);
}
.price-divider {
    width: 1px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
}
.price-split.grid-view {
    margin: 10px 0 20px 0;
    padding: 10px;
}
.price-split.grid-view .final-price {
    font-size: 18px;
}
.price-split.grid-view .type-label {
    font-size: 11px;
}