/* --- CSS VARIABLES & THEMING --- */
:root {
    --bg-dark: #090c10;
    --bg-card: rgba(22, 27, 34, 0.7);
    --border-color: rgba(255, 255, 255, 0.1);
    --primary-green: #00e676;
    --primary-glow: rgba(0, 230, 118, 0.35);
    --accent-red: #ff5252;
    --text-main: #f0f6fc;
    --text-muted: #8b949e;
    /* --font-heading: 'Outfit', sans-serif; */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Inter', sans-serif;
    --transition-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
    scroll-behavior: smooth;
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-body);
    overflow-x: hidden;
}

body {
    position: relative;
    cursor: default;
}

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

ul {
    list-style: none;
}

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

.section-padding {
    /* padding: 0 0 100px; */
}

/* --- CUSTOM CURSOR --- */
.cursor-dot,
.cursor-outline {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
}

.cursor-dot {
    width: 8px;
    height: 8px;
    /* background-color: var(--primary-green); */
    /* background-color: #03acfd; */
    /* background-color: #069ff9; */
    background-color: #1aafe5;
}

.cursor-outline {
    width: 36px;
    height: 36px;
    /* border: 1px solid var(--primary-green); */
    border: 1px solid #1aafe5;
    /* border: 1px solid #03acfd; */
    transition: transform 0.15s ease-out;
}

@media screen and (max-width: 767px) {
    .cursor-dot {
        display: none;
    }
    .cursor-outline {
        display: none;
    }
}



/* --- 3D ARROW CANVAS --- */
#arrow-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 99;
}

/* --- TYPOGRAPHY & GRADIENTS --- */
h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    /* font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; */
    letter-spacing: -0.02em;
}

.gradient-text {
    /* color: #03acfd; */
    color: #D4AF37;
     /* background: conic-gradient(
  from 180deg, 
  #e63e10, 
  #03acfd,
  #044ffc,
  #001c86, 
  #fc2203
); */
    /* background: linear-gradient(90deg, #22D3A1 20%,  #00E5FF 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; */
    /* background-size: 200% 200%; */
    /* animation: h1-hue 9s linear infinite; */
    font-size: 80px;
  }
  
@keyframes h1-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(98,192,138,.55)
    }

    70% {
        box-shadow: 0 0 0 10px transparent
    }

    to {
        box-shadow: 0 0 0 0 transparent
    }
}

@keyframes h1-hue {
    to {
        background-position: 200% 200%
    }
}

@keyframes h1-spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes h1-fill {
    0% {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes h1-float {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-12px)
    }
}
a.btn.btn-primary.btn-glow {
    background-color: #D4AF37;
        /* background: linear-gradient(90deg, #00E5FF 0%, #22D3A1 85%); */
    /* background-image: linear-gradient(135deg, oklch(0.68 0.17 245), color-mix(oklch(0.68 0.17 245) 55%, oklch(0.74 0.18 152))); */

    /* background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial; */

    /* background: linear-gradient(135deg, #03acfd, #044ffc); */
    /* background-color: #001c86; */
    color: #000;
    transition:  transform 0.5s ease;
}

a.btn.btn-primary.btn-glow.open-modal:hover {
    /* background: linear-gradient(135deg, #fc4002, #fd2802); */
    /* background: #fd2802; */
    color: #000;
    transform: translateY(-2px);
}


.accent-red {
    /* color: var(--accent-red); */

        /* background: linear-gradient(135deg, #03acfd 0%, #044ffc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    /* color: #069ff9; */

    color: #D4AF37;

    /* background: linear-gradient(90deg, #22D3A1 20%,  #00E5FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; */
}

.section-header {
    text-align: center;
    margin-bottom: 30px;
}

.section-header h2 {
    /* font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; */
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.section-header p {
    color: var(--text-muted);
    font-size: 16px;
}

/* --- GLASSMORPHISM CARDS --- */
.glass-panel {
    /* background: var(--bg-card); */
    /* background-color: #FBBF24; */
    background-color: #D4AF37;
    color: #000;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
}

/* --- NAVIGATION --- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    padding: 4px 0;
    transition: all 0.4s ease;
}

.navbar.scrolled {
    background: rgba(9, 12, 16, 0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    padding: 4px 0;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.4rem;
    color: #fff;
}

.logo span {
    color: var(--primary-green);
}

.nav-links {
    display: flex;
    gap: 32px;
}

.nav-links a {
    font-size: 14px;
    color: #fff;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    /* color: var(--primary-green); */
    color: #069ff9;
}

/* --- BUTTONS --- */
.btn {
    display: inline-block;
    padding: 15px 28px;
    border-radius: 30px;
    font-weight: 400;
    /* font-size: 0.95rem; */
    cursor: pointer;
    transition: all 0.3s var(--transition-smooth);
    border: 1px solid transparent;
    /* background: linear-gradient(90deg, #00E5FF 10%, #22D3A1 100%); */
}

.hero-actions .watch {
    /* border: 1px solid #00E5FF; */
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* background-color: #00e5ff1a; */
    /* background: transparent; */
    background: rgba(255, 255, 255, 0.08);
    transition:  transform 0.5s ease;
}

.hero-actions .watch:hover {
    transform: translateY(-2px);
}

.btn-primary {
    /* background: linear-gradient(90deg, #00E5FF 10%, #22D3A1 100%); */
    background: #D4AF37;
    /* background-image: linear-gradient(135deg, oklch(0.68 0.17 245), color-mix(oklch(0.68 0.17 245) 55%, oklch(0.74 0.18 152)));
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial; */
    /* background: linear-gradient(135deg, #03acfd, #044ffc); */
    /* background-color: #001c86; */
    /* background: linear-gradient(135deg, #00d4ff, #7f00ff); */
    color: #000;
    box-shadow: 0 4px 45px rgba(0, 212, 255, 0.24);
    /* color: #000; */
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400px;
}

.btn-primary:hover {
    transform: translateY(-2px);
    /* box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4); */
/* background: linear-gradient(135deg, #88f927, #05bd03); */
color: #000;
/* box-shadow: 0 4px 15px rgba(5, 189, 3, 0.25); */
}


.btn-outline {
    border-color: var(--border-color);
    color: var(--text-main);
}

.btn-outline:hover {
    border-color: var(--primary-green);
    color: var(--primary-green);
}

.btn-secondary {
    background-color: #D4AF37;
    /* background: rgba(255, 255, 255, 0.05); */

    /* background: linear-gradient(90deg, #00E5FF 10%, #22D3A1 100%); */

    /* background-image: linear-gradient(135deg, oklch(0.68 0.17 245), color-mix(oklch(0.68 0.17 245) 55%, oklch(0.74 0.18 152))); */
    /* background-position-x: initial;
    background-position-y: initial;
    background-size: initial;

    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial; */
    padding: 10px 17px; 
    font-size: 14px;
    /* color: var(--text-main); */
    color: #000;
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    /* background: rgba(255, 255, 255, 0.1); */
}


/* ==========================================
   NAVBAR MOBILE RESPONSIVE STYLES
   ========================================== */

/* Hide mobile button wrapper on desktop */
.mobile-only-btn {
  display: none;
}

@media screen and (max-width: 768px) {
  /* Hide desktop call-to-action button */
  .desktop-btn {
    display: none;
  }

  .mobile-only-btn {
    display: block;
    margin-top: 10px;
  }

  .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 10px 16px;
  }

  /* Hamburger Icon Styling */
  .nav-toggle {
    display: block;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1000;
  }

  a.btn.btn-secondary {
    color: #000;
  }

  .hamburger,
  .hamburger::before,
  .hamburger::after {
    display: block;
    width: 25px;
    height: 3px;
    background: #ffffff; /* Change color based on theme */
    transition: transform 0.3s ease, opacity 0.3s ease;
    position: relative;
  }

  .hamburger::before,
  .hamburger::after {
    content: '';
    position: absolute;
  }

  .hamburger::before { top: -8px; }
  .hamburger::after { bottom: -8px; }

  /* Mobile Slide-Down Menu */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #0b0e14; /* Match header background */
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 25px 0;
    margin: 0;
    list-style: none;
    
    /* Hide by default */
    display: none;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
  }

  /* Active Menu Toggle State */
  .nav-links.active {
    display: flex;
  }

  /* Animated X Icon when menu open */
  .nav-toggle.active .hamburger {
    background: transparent;
  }
  .nav-toggle.active .hamburger::before {
    transform: rotate(45deg);
    top: 0;
  }
  .nav-toggle.active .hamburger::after {
    transform: rotate(-45deg);
    top: 0;
  }
}









/* --- LOGO WRAPPER --- */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-weight: 800;
    font-size: 1.4rem;
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.logo:hover {
    opacity: 0.9;
}

.logo span {
    color: var(--primary-green, #00e676);
    
}

/* --- LOGO IMAGE STYLES --- */
.logo-img {
    height: 90px;
    width: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

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

/* --- RESPONSIVE STYLING --- */
@media (max-width: 768px) {
    .logo-img {
        height: 60px;
    }

    .logo {
        font-size: 1.2rem;
    }
}








/* --- HERO SECTION --- */
.hero {
    position: relative;
    min-height: 100vh;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    /* text-align: center; */
    padding: 140px 24px 20px;
    
}

.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* background: url('./assets/videos/3406418683-preview.mp4');  
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; */
  /* z-index: 1; *//
  
}

/* video {
  width: 100%;
  height: auto;
  display: block;
} */

.hero-video-bg img {
/* object-position: no-repeat center center;
    object-fit: contain;
    background-size: cover;
    display: flex;
    align-items: center; */
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
}



#hero-3d-canvas {
    width: 100%;
    height: 100%;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: radial-gradient(circle at center, rgba(9, 12, 16, 0.3) 0%, rgba(9, 12, 16, 0.95) 100%); */
    background: rgba(0, 0, 0, 0.6);
    /* background: rgba(0 0 0 / 80%); */
}


/* ==========================================
   HERO CONTENT MOBILE RESPONSIVE STYLES
   ========================================== */
@media screen and (max-width: 767px) {

    .hero  {
        padding-top: 30%;
    }

    .hero h1 {
        text-align: center;
    }

    .hero .container  {
        padding: 0;
    }
  /* Hero Container Wrapper Padding */
  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    /* padding: 30px 16px !important; */
    /* text-align: center; */
    box-sizing: border-box !important;
  }

  /* Top Alert Badge Adjustments */
  .hero-content .badge {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    padding: 8px 14px !important;
    display: inline-block;
    max-width: 100% !important;
    word-break: break-word;
    margin-bottom: 16px !important;
  }

  /* Heading Typography Scaling */
  .hero-content h1 {
    /* font-size: 2.2rem !important;
    line-height: 1.2 !important;
    margin: 16px 0 !important;
    word-break: break-word; */
  }

  .gradient-text {
    font-size: 2.2rem !important;
  }

  .hero-content h1 span {
    font-size: 2.2rem !important;
  }

  /* Override Inline 80px Font Size on Mobile */
  .hero-content h1 span[style*="font-size: 80px"],
  .hero-content h1 span[style*="font-size:80px"] {
  /* .hero-content h1 span { */
    /* font-size: 2.2rem !important;
    display: block;
    margin-top: 4px; */
  }

  /* Hero Paragraph Adjustments */
  .hero-content p {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    margin: 16px 0 24px 0 !important;
    color: #fff !important;
    text-align: center;
    /* padding: 0 8px !important; */
  }

  /* Action Buttons Stack */
  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    text-align: center !important;
    padding: 14px 20px !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
}

/* Extra small devices (Max Width: 480px) */
@media screen and (max-width: 480px) {
  /* .hero-content h1 {
    font-size: 1.8rem !important;
  }

  .hero-content h1 span[style*="font-size: 80px"],
  .hero-content h1 span[style*="font-size:80px"] {
    font-size: 2rem !important;
  } */
}




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

.tagline-container {
  display: flex;
  /* align-items: center; */
  /* justify-content: center; */
  gap: 16px;
  padding: 22px 0px;
  
  /* Dark blue gradient background matching the image */
  /* background: linear-gradient(to right, #001f3f, #002b4e, #001a33); */
  
  /* Text styling */
  color: rgb(139, 148, 158);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.divider {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 300;
  font-size: 14px;
}


/* ==========================================
   TAGLINE CONTAINER MOBILE STYLES
   ========================================== */
@media screen and (max-width: 767px) {
  .tagline-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    /* flex-direction: column; */
    gap: 8px 27px !important; /* Row and column gaps */
    width: 100% !important;
    /* padding: 10px 16px !important; */
    box-sizing: border-box !important;
    text-align: center;
    color: #fff;
  }

  /* Hide raw vertical line dividers on small screens */
  .tagline-container .divider {
    display: none !important;
  }

  /* Style individual tagline items */
  .tagline-container span:not(.divider) {
    font-size: 0.85rem !important;
    letter-spacing: 1.5px !important;
    white-space: nowrap;
    opacity: 0.9;
  }

  /* Optional: Add bullet dots between items on mobile */
  .tagline-container span:not(.divider):not(:last-child)::after {
    /* content: "•"; */
    margin-left: 12px;
    opacity: 0.5;
  }

  .hero-video-bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Prevents image distortion */
    object-position: right !important; /* Centers focal point on narrow screens */
    position: absolute;
    top: 0;
    left: 0;
  }
}




.red-badge {
    background: rgba(255, 82, 82, 0.05);
border: 1px solid rgba(255, 82, 82, 0.2);
    color: #e43e30;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    letter-spacing: .10em;
    gap: 6px;
}



.hero h1 {
    font-family: var(--font-heading);
    /* font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; */
    font-size: 60px;
    line-height: 1.15;
    /* margin-bottom: 24px; */
    font-weight: 700;
}

.hero p {
    font-size: 16px;
    color: var(--text-muted);
    margin-bottom: 27px;
    line-height: 1.5;
}

.hero-actions {
    display: flex;
    gap: 16px;
    /* justify-content: center; */
    margin-bottom: 28px;
}

p.disclaimer-text {
    font-size: 12px;
    /* color: var(--text-muted); */
    color: #F0533F;
    opacity: 0.7;
}

/* --- LAYOUT GRIDS --- */
.grid {
    display: grid;
    gap: 24px;
}

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

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

/* --- PROBLEM SECTION --- */
section#problem {
    padding: 50px 0 100px;
    background-color: black;
}
.problem-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.problem-item {
    background: rgba(255, 82, 82, 0.05);
    border: 1px solid rgba(255, 82, 82, 0.2);
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.problem-card {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.problem-card.glass-panel h3 {
    font-size: 20px;
    font-weight: 600;
    font-family: var(--font-body);
}

.badge.badge-primary {
    margin-bottom: 12px;
}

.stat-box {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.stat-number {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    /* color: var(--accent-red); */

        /* background: linear-gradient(135deg, #03acfd 0%, #044ffc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */

    color: #069ff9;
}

/* --- METHOD SECTION --- */
.method-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 30px;
    border-radius: 16px;
    transition: transform 0.3s ease;
}

.method-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-green);
}

.step-num {
    font-size: 2rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.15);
    margin-bottom: 12px;
}

.philosophy-bar {
    margin-top: 20px;
    padding: 24px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 16px;
}

.ph-item {
    /* font-weight: 600; */
    font-size: 15px;
    /* letter-spacing: 0.05em; */
}

@media screen and (max-width: 767px) {
    .philosophy-bar {
        margin-top: 20px;
        padding: 24px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 16px;
    }
    .ph-item {
        position: relative;
        width: 100%;
        justify-content: center;
        padding: 6px 0;
    }

    /* Subdued divider line with low opacity */
    .ph-item:not(:last-child) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
    .ph-item:not(:last-child)::after {
        content: "";
        position: absolute;
        bottom: -3px; /* Centers the 6px dot on the 1px line */
        left: 50%;
        transform: translateX(-50%);
        width: 6px;
        height: 6px;
        background-color: #D4AF37; /* Gold accent color */
        border-radius: 50%;
        box-shadow: 0 0 6px rgba(212, 175, 55, 0.5); /* Subtle glow */
    }
}










/* method */
/* =========================================================
   METHOD
   ========================================================= */
.method {
    padding: 75px 0 70px;
    border-top: 1px solid var(--line);
    background: #0c151d !important;
}

.method-steps {
    margin-top: 0px;
    position: relative;
}

.method-steps::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 27px;
    height: 1px;
    /* background: #65f6a8; */
    
    /* background: #22D3A1; */
    background: #D4AF37;

}

.method-steps .progress-line {
    position: absolute;
    left: 0;
    top: 27px;
    height: 1px;
    background: #22D3A1;

    /* background: #65f6a8; */
    ;
    width: 0%;
    transition: width 1.1s var(--ease);
}

.method-step .node {
    position: absolute;
    top: 18px;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    /* background: #65f6a8; */

    background: #22D3A1;

    /* border: 1px solid #65f6a8; */

    border: 1px solid #D4AF37;
    background-color: #D4AF37;

    transition: border-color .4s, background .4s;
}

.method-step.is-visible .node {
    /* border-color: #65f6a8; */
    /* background: #65f6a8; */

    border-color: #22D3A1;
    background: #22D3A1;

    /* border-color: RED; */
    /* background: RED; */
}

.method-track {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

.method-step {
    padding-top: 52px;
    position: relative;
}

.method-step .num {
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--text-faint);
    margin-bottom: 10px;
    display: block;
}

.method-step h3 {
    font-family: var(--font-display);
    /* color: #FBBF24; */
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.method-step p {
    font-size: 16px;
    /* color: var(--text-muted); */
    color: rgb(139, 148, 158);
    line-height: 1.6;
}

@media (max-width:900px) {
    .method-track {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 18px;
    }

    .method-steps::before,
    .method-steps .progress-line {
        display: none;
    }
}

@media (max-width:767px) {

    .method-track {
        grid-template-columns: repeat(1, 1fr);
    }
    .method-step  {
      background: rgba(255, 255, 255, 0.03);
    border: 1px solid #ffffff1f;
      padding-left: 18px;
      padding-bottom: 25px;
        padding-top: 25px;
    }
    .method-step .node {
      /* left: 18px; */
      display: none;
    }
    /* .method-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    position: relative;
  }


  .method-step .node {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    display: block !important;
    margin: 0 auto 12px auto !important;
  }


  .method-step .num {
    display: block !important;
    margin-bottom: 6px !important;
  } */

  .section-header h2  {
    font-size: 28px;
  }
  .chakra-text-p {
    font-size: 18px !important;
    color: #ffffff7d;
    font-weight: 400;
}
.session-layout {
    
    gap: 25px !important;
   
}
.feature-card-sec__item {
   
     padding: 0px !important; 
}

    .feature-card-sec__grid {
    
        gap: 0px !important;
    }
}




/* video sticky */


/* This is the placeholder that reserves the space in the page's layout.
     The real <video> is a fixed element that gets moved on top of it. */
.hero__video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 25px;
    background-image: url("https://sriraghavendracollegeofnursing.in/apply-now/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-18-at-2.49.00-PM-1.jpeg");
    /* background-image: url(''); */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* ---------- the actual floating video stage (always position:fixed) ---------- */
.video-stage {
    position: fixed;
    top: 0;
    left: 0;
    width: 900px;
    height: 506px;

    overflow: hidden;
    border-radius: var(--radius);
    border: 3px solid var(--maroon);
    background: #000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);



}

.video-stage.morphing {
    transition:
        top .6s cubic-bezier(.22, 1, .36, 1),
        left .6s cubic-bezier(.22, 1, .36, 1),
        width .6s cubic-bezier(.22, 1, .36, 1),
        height .6s cubic-bezier(.22, 1, .36, 1),
        border-radius .4s ease,
        border-width .4s ease,
        box-shadow .4s ease;
}

.video-stage.corner {
    border-width: 2px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

.hero__video-thumb {
    position: relative;
    width: 100%;
    height: 100%;
}



div#videoSlot {
    /* position: fixed; */
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    /* z-index: 9999; */
    width: 90%;
    max-width: 650px;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
}

p#video-home {
    margin-bottom: 30px !important;
}

.hero__video-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.overlay-grad {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.video-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* background: #fff; */
    background: rgba(0, 0, 0, 0.55);
    color: var(--ink);

    font-weight: 600;
    font-size: 0.85rem;
    padding: 4px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.video-tag .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--maroon);
    display: inline-block;
}

/* smaller tag + close button only make sense once it's a small corner pip */
.video-stage.corner .video-tag {
    top: 8px;
    left: 8px;
    font-size: 8px;
    padding: 5px 10px;
}

.stage-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 23px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2;
    backdrop-filter: blur(4px);
}

.video-stage.corner .stage-close {
    display: flex;
}

.stage-close:hover {
    background: var(--maroon);
}

div#videoStage {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;

    
}



/* new banner */


/* Wrapper block to restrict scope reset */
.srb-banner-wrapper {
    /* background-color: #00193b; */
   background-color: #0c151d;
   /* background: linear-gradient(135deg, rgba(18, 24, 38, 0.9) 0%, rgba(10, 15, 26, 0.95) 100%); */
    /* background-color: black; */

    width: 100%;
    padding: 20px;
}



/* Main Container holding both sides */
.srb-main-container {
    /* background-color: oklch(0.24 0.16 269.6); */
    color: #ffffff;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 50px;
    padding-bottom: 70px;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

/* Top disclaimer note */
.srb-top-disclaimer {

    right: 40px;
    font-size: 14px;
    color: #ffcc00;
    text-align: right;
    opacity: 0.9;
}

/* Left Side Column */
.srb-left-column {
    flex: 1;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.srb-main-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 5px;
    color: #ffffff;
}

.srb-left-column h2 {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.srb-subtitle-location {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    color: #8b949e;
    font-size: 16px;
    font-weight: 400;
    /* letter-spacing: 4px; */
    /* text-transform: uppercase; */
    margin: 0 0 30px;
}

.srb-subtitle-location::before,
.srb-subtitle-location::after {
    content: "";
    width: 90px;
    height: 2px;
    background: linear-gradient(to right,
            rgba(214, 190, 22, 0.2) 0%,
            #d6be16 40%,
            #d6be16 100%);
}

.srb-subtitle-location::after {
    background: linear-gradient(to left,
            rgba(214, 190, 22, 0.2) 0%,
            #d6be16 40%,
            #d6be16 100%);
}

.srb-logo-wrapper {
    margin-bottom: 0px;
    align-items: center;
    display: flex;
    margin-top: 20px;
    flex-direction: column;

}

.srb-logo-circle {
    width: 130px;
    height: 130px;
    background: radial-gradient(circle, #fff 60%, #fffb00 100%);
    border-radius: 50%;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(255, 251, 0, 0.4);
    padding: 5px;
    border: 2.5px solid var(--brand-yellow);
    display: block;
    position: relative;
    overflow: hidden;
}

.srb-logo-circle img {
    width: 100%;
    height: auto;
}

.srb-estd-text {
    font-size: 14px;
    letter-spacing: 2px;
    color: #ffffff;
    margin-bottom: 20px;
    margin-top: 20px;
}

.srb-attention-text {
    font-weight: 700;
    color: #ffcc00;
    font-size: 16px;
    letter-spacing: 0.5px;
    align-self: flex-start;
    margin-top: auto;
}

/* Right Side Column */
.srb-right-column {
    flex: 1;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

.paramedical-line {
    position: relative;
    display: inline-block;
}

.paramedical-line::after {
    content: "";
    position: absolute;
    left: 0%;
    bottom: -14px;
    width: 112%;
    /* Increase to 120%, 130%, etc. */
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20'%3E%3Cpath d='M5 12 C100 20 220 2 395 12' fill='none' stroke='%23ff3b3b' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

/* Tamil + English Main Headline */
/* .srb-headline-section {
            margin-bottom: 25px;
            border-bottom: 4px solid #e63946; 
            padding-bottom: 10px;
        } */

.srb-tamil-text-large {
    font-size: 25px;
    font-weight: 700;
    display: block;
    color: #ffffff;
    line-height: 50px;
}

.srb-highlight-yellow {
    color: #fff;
}

.srb-sub-description {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
    opacity: 0.95;
    color: #ffffff;
    margin-top: 20px;
}

.hero-poster-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.hero-poster-banner img {
    max-width: 52%;
    height: auto;
    display: block;
    border-radius: 20px
}


/* Badges / Key highlights grid */
.srb-highlights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 20px;
    margin-bottom: 40px;
    font-size: 15px;
    color: #ffffff;
}

.srb-highlight-item {
    display: flex;
    align-items: center;
    gap: 8px;

}

.srb-tamil-text-large img.emoji {
    font-size: 38px;
    transform: rotate(-20deg);
    /* Adjust angle as needed */
    display: inline-block;

}

span.attention-color {
    color: #ffbd00;
    font-style: italic;
}

/* Bottom Controls Row (Timer + Button) */
.srb-action-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 25px;
    flex-direction: column;
}

/* Timer UI Elements */
.srb-timer-box {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
}

.srb-timer-icon {
    color: #ffcc00;
    font-size: 18px;
}

.srb-timer-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.srb-timer-digits {
    font-size: 20px;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}

.srb-timer-label {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
    margin-top: -2px;
}

.srb-timer-separator {
    font-weight: 700;
    font-size: 18px;
    margin-top: -10px;
}

/* Action Button */
.srb-apply-btn {
    background: linear-gradient(180deg, #ffcc00 0%, #ff9900 100%);
    border: none;
    color: #0b0784;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(255, 153, 0, 0.3);
    transition: transform 0.2s ease;
}

.srb-apply-btn:hover {
    transform: translateY(-2px);
}

/* Responsive Breakpoint for Tablet/Mobile screens */
@media (max-width: 900px) {
    .srb-main-container {
        flex-direction: column;
        gap: 40px;
        padding: 40px 20px;
        padding-bottom: 20px;
    }

    .srb-left-column,
    .srb-right-column {
        max-width: 100%;
        width: 100%;
    }

    .srb-subtitle-location::before {
        left: 5%;
    }

    .srb-subtitle-location::after {
        right: 5%;
    }

    .srb-action-row {
        flex-direction: column;
        align-items: stretch;
    }

    .srb-timer-box {
        justify-content: center;
    }

    .srb-apply-btn {
        justify-content: center;
    }
    .srb-left-column h2 {
        font-size: 28px !important;
    }
}







/* --- MENTOR SECTION --- */
section#mentor {
    padding-top: 90px;
    padding-bottom: 100px;
    /* background-color: #0B1F3B; */
    background-color: #000;
}
.mentor {
    display: grid;
    /* grid-template-columns: .9fr 1.1fr; */

    grid-template-columns: 1.1fr .9fr;
    /* align-items: center; */
    gap: 9vw
}

/* .mentor-photo {
    height: 570px;
    max-width: 520px;
    position: relative;
    display: grid;
    place-items: center
} */

.mentor-photo {
        width: 100%;
        /* max-width: 700px; Optional cap, matches reference poster width */
        /* margin: 20px auto;  */
        border-radius: 16px; /* Soft corner radius like the reference image */
        overflow: hidden; /* Ensures image respects the border-radius */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); /* Subtle depth shadow */
        display: block;

        position: -webkit-sticky; 
        position: sticky;
        top: 20%; /* Offset distance from the top edge during scroll */
        z-index: 10;

        /* Box sizing setup */
        max-width: 450px;
        height: fit-content; /* CRITICAL: Prevents stretching to full container height */
    }

    .mentor-photo__image {
        width: 100%; /* Spans full container width */
        height: auto; /* Maintains proportional aspect ratio (4:5 vertical) */
        display: block; /* Prevents tiny alignment gaps at the bottom */
        
        /* Ensures the text is sharp and the white/gold colors pop */
        object-fit: contain; 
    }


/* ==========================================
   MENTOR SECTION MOBILE RESPONSIVE STYLES
   ========================================== */
@media screen and (max-width: 767px) {
  .mentor-section {
    padding: 40px 16px;
  }

  .mentor-section .container {
    padding: 0;
  }

  .mentor-copy p  {
    text-align: justify;
  }

  /* Force vertical layout (Text top, Image bottom) */
  .mentor.container {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
  }

  /* Heading typography scaling */
  .mentor-copy h2 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  .mentor-copy h3 {
    font-size: 22px !important;
    margin-top: 8px !important;
  }

  .mentor-copy p {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }

  /* Stylized blockquote adjustments */
  .mentor-copy blockquote {
    font-size: 0.9rem !important;
    padding: 12px 16px !important;
    margin: 15px 0 !important;
    border-left: 3px solid #D4AF37; /* Accent border line */
  }

  /* Responsive 3-Column Counter Grid */
  .counter-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    margin-top: 25px !important;
    text-align: center;
  }

  .counter-value {
    font-size: 1.4rem !important;
  }

  .counter-label {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
  }

  /* Full-width call-to-action button */
  .hero-actions {
    /* margin-top: 25px !important; */
    margin-top: 25px !important;
    display: flex;
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Mentor Photo container & image sizing */
  .mentor-photo {
    width: 100% !important;
    max-width: 350px !important;
    margin: 0 auto !important; /* Center horizontally */
  }

  .mentor-photo__image {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px;
  }
}

/* Extra small screens (Max Width: 480px) */
@media screen and (max-width: 767px) {
  /* Stack counters into 2 columns if screen is too narrow */
  .counter-container {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
}






    
    

.portrait-placeholder {
    width: 70%;
    height: 82%;
    border: 1px solid rgba(101, 246, 168, .35);
    background: linear-gradient(145deg, #111714, #080a09);
    display: grid;
    place-content: center;
    text-align: center;
    box-shadow: 0 0 70px rgba(101, 246, 168, .08), inset 0 0 60px rgba(101, 246, 168, .03)
}

.portrait-placeholder span {
    font: 600 80px "Space Grotesk";
    color: rgba(101, 246, 168, .18)
}

.portrait-placeholder small {
    color: #7d8882;
    letter-spacing: .15em
}

.orbit {
    position: absolute;
    border: 1px solid rgba(101, 246, 168, .25);
    border-radius: 50%;
    inset: 9%;
    transform: rotateX(65deg);
    animation: orbit 12s linear infinite
}

.o2 {
    inset: 18%;
    transform: rotateY(70deg);
    animation-direction: reverse
}

@keyframes orbit {
    to {
        transform: rotateX(65deg) rotateZ(360deg)
    }
}

.photo-meta {
    position: absolute;
    right: 0;
    top: 18%;
    padding: 15px;
    background: #080c0a;
    border: 1px solid rgba(101, 246, 168, .25);
    font: 600 13px "Space Grotesk";
    color: #65f6a8
}

.photo-meta small {
    display: block;
    color: #84908a;
    font-size: 8px;
    margin-top: 5px
}

.mentor-copy h3 {
    font: 500 22px "Space Grotesk";
    color: #dbe3df;
    margin: 15px 0 15px;
}

.mentor-copy h2 {
    font-size: 40px;
}

.mentor-copy h2 em {
    font-style: normal;
    color: #65f6a8;
}



.mentor-copy p {
    color: rgb(139, 148, 158);;
    line-height: 1.85;
    max-width: 650px
}

.mentor-copy blockquote {
    border-left: 2px solid #65f6a8;
    padding: 15px 25px;
    margin: 20px 0 28px;
    color: #e6ece8;
    font: 500 20px "Space Grotesk";
    line-height: 1.5
}



/* --- LEARN CARDS --- */
section#learn {
    padding-top: 80px;
    padding-bottom: 80px;
    /* background-color: black; */
    background-color: #0c151d;
}
.learn-card {
    background-color: #111c26;
     border: 1px solid #ffffff1f;
    /* background: var(--bg-card); */
    /* border: 1px solid var(--border-color); */
    /* background: linear-gradient(135deg, rgba(18, 24, 38, 0.9) 0%, rgba(10, 15, 26, 0.95) 100%); */
    /* border: 1px solid rgba(0, 212, 255, 0.2); */
    padding: 24px;
    border-radius: 12px;
    
}

.learn-card:hover {
    /* border: 0.2px solid #069ff9; */
    border: 1px solid rgb(34 211 161 / 30%);
    transform: scale(1.05);
}

.learn-card.highlight-card {
    /* border-color: var(--primary-green); */
    /* background: rgba(0, 230, 118, 0.05); */

    background-color: #111c26;

    /* background: linear-gradient(135deg, rgba(18, 24, 38, 0.9) 0%, rgba(10, 15, 26, 0.95) 100%); */
    /* border: 1px solid rgba(0, 212, 255, 0.2); */
    border: 1px solid #ffffff1f;
}
.learn-card h4 {
    margin: 10px 0 5px;
    font-size: 18px;
    font-weight: 600;
    font-family: var(--font-body);
    /* color: #FBBF24; */
    color: #fff;
}
.learn-card p {
    font-size: 16px;
    color: rgb(139, 148, 158);;
    line-height: 1.4;
}

@media screen and (max-width: 767px) {

    .container .section-header {
        padding-left: 20px;
        padding-right: 20px;
    }

}





/* who it's for */
/* Audience Section Styles */
/* section.audience.section {
    position: relative;
    max-width: 1600px;
    padding: 140px 7vw;
    margin: auto;
} */
 section.audience {
    padding-top: 70px;
    background-color: #000;
    /* background-color: #0B1F3B; */
}
.audience-list {
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.audience-row {
    display: grid;
    grid-template-columns: 60px 1fr 1.2fr 30px;
    gap: 20px;
    align-items: center;
    padding: 26px 20px;
    border-width: 0 0 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012));
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: inset 0 1px rgba(255, 255, 255, .04);
    backdrop-filter: blur(15px);
    transition: border-color .3s, box-shadow .3s;
}

.audience-row:hover {
    border-color: rgba(101, 246, 168, .4);
    /* border-color: #70caf4; */
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3), 0 0 30px rgba(101, 246, 168, .06);
}

.audience-row b,
.audience-row i {
    color: #65f6a8;
    /* background: linear-gradient(135deg, #03acfd 0%, #044ffc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
}

.audience-row strong {
    font: 500 22px "Space Grotesk", sans-serif;
}

.audience-row span {
    color: #89938e;
}

.audience-row i {
    font-style: normal;
}

/* Mobile Responsive Adjustments */
@media (max-width: 700px) {
    .audience-row {
        grid-template-columns: 35px 1fr 20px;
    }

    .audience-row span {
        grid-column: 2;
    }

    .audience-row strong {
        font-size: 18px;
    }

    .audience-row i {
        grid-column: 3;
        grid-row: 1;
    }
    .section-heading h2 {
        font-size: 28px !important;
    }
}







/* --- TIMELINE / CURRICULUM --- */
.session {
    position: relative;
    margin: 0 0 14px 70px;
    padding: 22px 25px;
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 4px
}

.session:hover {
    /* border-color: #25d805; */
        /* border: 1px solid rgb(32 209 0 / 30%); */
        border: 1px solid rgba(0, 212, 255, 0.3);
}

.session {
    background: linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012));
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: inset 0 1px rgba(255, 255, 255, .04);
    /* backdrop-filter: blur(15px); */
}

section#training {
    position: relative;
    padding: 80px 0 90px;
    /* max-width: 1160px; */
    margin: auto;
    /* background: black; */
    background: url('./assets/videos/3406418683-preview.mp4');
}

.bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
    pointer-events: none; /* Prevents clicks on video */
}


.sessions .container {
    position: relative;
    z-index: 2;
}

.section-heading h2 {
    font-size: 40px;
    line-height: 1;
    margin: 0;
    max-width: 900px;
}

.section-heading.reveal p {
    color: rgb(139, 148, 158);;
    line-height: 1.85;
    max-width: 650px;
    /* margin-top: 10px; */
}

.reveal-line {
    margin-top: 10px;
}

.section-heading.reveal {
    /* margin-bottom: 25px; */
}

.section-heading h2 em {
    font-style: normal;
    color: #069ff9;
    /* background: linear-gradient(135deg, #03acfd 0%, #044ffc 100%);
-webkit-background-clip: text;
 -webkit-text-fill-color: transparent; */
}

/* session mobile responsive */
@media screen and (max-width: 768px) {
  /* Prevent horizontal scrolling/clipping */
  .sessions.section,
  .sessions .container {
    width: 100% !important;
    max-width: 100% !important;
    /* padding-left: 15px !important; */
    /* padding-right: 15px !important; */
    box-sizing: border-box !important;
    overflow-x: hidden;
  }


  /* Force vertical layout for the main layout container */
  .session-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    grid-template-columns: 1fr !important; /* Overrides grid layout if used */
  }


  /* Center heading and badge above the cards */
  .section-heading {
    text-align: center !important;
    /* margin-bottom: 20px !important; */
  }


  /* Scale and center the circle badge */
  .session-badge {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    margin: 0 auto 30px auto !important;
    width: 180px !important;
    height: 180px !important;
  }


  /* Full width timeline container */
  .timeline {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
  }


  /* Hide ornamental background lines on mobile to avoid layout shifts */
  .timeline-line {
    display: none !important;
  }


  /* Individual Session Cards Fix */
  .session {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px !important;
    margin: 0 0 10px 0 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
  }


  /* Text formatting inside cards */
  .session strong,
  .session-sub-content {
    display: block;
    word-break: break-word;
  }
}






/* Section Wrapper */
.learning-section {
  padding: 26px 20px 80px;
  /* background-color: #0B1F3B; */
  background-color: #000;
}

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

/* Header */
.learning-header {
  margin-bottom: 40px;
}

.learning-header h2 {
  font-size: 32px;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 10px;
}

.learning-header p {
  font-size: 16px;
  color: #94a3b8;
  max-width: 700px;
  line-height: 1.5;
}

/* 3-Column Grid Matching the Reference Design */
.learning-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Individual Card */
.learning-card {
  display: flex;
  flex-direction: column;

  background-color: #111c26;
    border: 1px solid #ffffff1f;
  
/* border: 1px solid #ffffff1f; */

  /* background: #1E293B;
  border: 1px solid #637388; */

  border-radius: 20px;
  /* background-color: #12171d; */
  transition: transform 0.3s ease;
}

.learning-card:hover {
    transform: scale(1.05);
}

/* Top Rounded Preview Area (Replaces Image) */
.card-preview {
  width: 100%;
  height: 218px;
  background: linear-gradient(135deg, #151a24 0%, #1c2331 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  /* border: 1px solid rgba(0, 230, 118, 0.2); */
  /* transition: transform 0.3s ease, border-color 0.3s ease; */
}

.learning-card:hover .card-preview {
  /* transform: translateY(-4px); */
  /* border-color: rgba(0, 230, 118, 0.5); */
}

.preview-badge {
  width: 60px;
  height: 60px;
  /* background: rgba(0, 230, 118, 0.1); */
  /* border: 1px solid rgba(0, 230, 118, 0.3); */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d4af37;
  font-size: 24px;
}


.preview-badge {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image Styling */
.preview-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fits image perfectly without stretching */
  object-position: top;
  display: block;
  /* transition: transform 0.3s ease; */
  border-radius: 20px;
}

/* .learning-card:hover .preview-badge img {
  transform: scale(1.05);
} */



/* Bottom Text Content (Left Aligned) */
.card-content h3 {
  font-size: 18px;
  color: #fff;
  /* color: #FBBF24; */
  font-weight: 600;
  margin-bottom: 8px;
}

.card-content p {
  font-size: 16px;
  color: rgb(139, 148, 158);
  /* color: #fff; */
  line-height: 1.6;
}

.card-content {
    padding: 12px 8px 12px 14px;
}

/* Responsive Styles */
@media (max-width: 992px) {
  .learning-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .learning-grid {
    grid-template-columns: 1fr;
  }
  .learning-section .container {
    padding: 0;
  }

}















.session-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 80px;
    padding-top: 40px;
}

.session-badge {
    position: sticky;
    top: 18%;
    height: 300px;
    display: grid;
    place-items: center;
    align-content: center;
    /* border: 1px solid rgba(101, 246, 168, .25); */
    /* border: 1px solid rgb(32 209 0 / 30%); */
    border: 1px solid rgb(26 175 229 / 40%);
    /* border: 1px solid rgba(0, 212, 255, 0.2); */
    border-radius: 50%;
    /* background: radial-gradient(circle, rgba(101, 246, 168, .12), transparent 60%); */
    background: radial-gradient(circle, rgba(0, 212, 255, 0.12), transparent 60%);
    /* box-shadow: 0 0 80px rgba(101, 246, 168, .06); */
    box-shadow: 0 0 80px rgb(26 175 229 / 10%);
}

.session-badge span {
    font: 600 110px "Space Grotesk";
    /* color: #25d805; */
    /* color: #03acfd; */
    /* color: #069ff9; */
    color: #D4AF37;
    /* background: linear-gradient(90deg, #22D3A1 20%, #00E5FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; */
    line-height: .8
}

.session-badge small {
    letter-spacing: .2em;
    color: #87918c
}

.timeline {
    position: relative;
    padding: 10px 0
}

.timeline-line {
    position: absolute;
    left: 29px;
    top: 0;
    bottom: 0;
    width: 1px;
    /* background: rgba(101, 246, 168, .18) */
        /* border: 1px solid rgba(101 246 168 / 30%); */
        /* border: 1px solid rgba(0 212 255 / 30%); */
        border: 1px solid rgb(26 175 229 / 30%);
}

article.session.reveal.bg-green {
    /* background: rgba(0, 230, 118, 0.1) !important;
    border: 1px solid rgba(0, 230, 118, 0.3) !important; */

    /* background: rgba(6, 50, 0, 0.1) !important; */

    /* border: 1px solid #146a09; */
    /* background-color: #063200; */

    /* border: 1px solid #fbbf248f; */
    border: 1px solid rgba(251, 191, 36, 0.3);
    /* background-color: #fbbf2429;  */
        background: rgba(212, 175, 55, 0.15);
}

article.session.reveal.bg-blue {
    border: 1px solid rgb(26 175 229 / 30%);
   background: rgb(26 175 229 / 10%);
}

.session {
    position: relative;
    margin: 0 0 14px 70px;
    padding: 22px 25px;
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 4px;
    transition: transform 0.3s ease;
}
article.session.reveal:hover 
 {
    transform: scale(1.02);
}

.session b {
    grid-row: 1/4;
    /* color: #25d805; */
    /* color: #03acfd; */
    /* color: #069ff9; */
    color: #D4AF37;
    /* background: linear-gradient(90deg, #22D3A1 20%, #00E5FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; */
}

.session-sub-content {
    color: rgb(139, 148, 158);;
    margin-top: 5px;
}

.session span {
    font-size: 12px;
    letter-spacing: .15em;
    color: #77827c;
}

.session strong {
    font: 500 20px "Space Grotesk";
    /* color: #FBBF24; */
    color: #fff;
}




/* --- MASTERCLASS / CTA --- */
/* Masterclass Section Specifics */
section#masterclass {
    padding-top: 100px;
    padding-bottom: 90px;
}
.masterclass {
    min-height: 850px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.free-trading {
    padding: 10px;
    background-color: white;
    color: black !important;
    margin-bottom: 5px !important;
}
.badge.badge-primary.free-trading {
    background: white;
}

.orb-large {
    position: absolute;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(101, 246, 168, .18), rgba(101, 246, 168, .03) 40%, transparent 70%);
    /* border: 1px solid #25d805; */
        /* border: 1px solid rgb(32 209 0 / 30%); */
    /* box-shadow: 0 0 120px rgba(101, 246, 168, .1); */
    border: 1px solid rgb(26 175 229 / 30%);
    box-shadow: 0 0 120px rgb(26 175 229 / 10%);
    animation: float 9s ease-in-out infinite;
}

.master-copy {
    position: relative;
    max-width: 800px;
    text-align: center;
}

.pop-badge {
    display: inline-block;
    background-color: rgba(159, 233, 194, 0.3) ;
    border: 1px solid rgba(101, 246, 168, .3);
    padding: 9px 13px;
    color: #0d9488;
    font-size: 10px;
    border-radius: 20px;
    letter-spacing: .10em;
    margin-bottom: 25px;
}

.master-copy h2 {
    /* font-family: var(--font-heading); */
    font-size: 40px;
    line-height: 1.3;
    margin: 0;
}

.master-copy h2 em {
    font-style: normal;
    color: #069ff9;
    /* background: linear-gradient(135deg, #03acfd 0%, #044ffc 100%);
-webkit-background-clip: text;
 -webkit-text-fill-color: transparent; */
}

.master-copy>p {
    /* color: #909b95; */
    color: rgb(139, 148, 158);;
    max-width: 580px;
    margin: 14px auto;
    line-height: 1.7;
}

.master-copy ul {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
    color: #c5cdc9;
    font-size: 14px;
    margin-bottom: 22px;
}

.master-copy li:before {
    content: "✦";
    color: #65f6a8;
    margin-right: 7px;
}

@keyframes float {
    50% {
        transform: translate3d(0, -16px, 0) rotateX(2deg) rotateY(-3deg);
    }
}

/* Responsive Styles */
/* @media (max-width: 700px) {
    .orb-large {
        width: 420px;
        height: 420px;
    }

    .masterclass {
        min-height: 750px;
    }
} */

/* ==========================================
   MASTERCLASS SECTION MOBILE STYLES
   ========================================== */
@media screen and (max-width: 767px) {
  /* Section Layout & Spacing */
  .masterclass.section {
    padding: 50px 16px !important;
    position: relative;
    overflow: hidden; /* Prevents decorative background orbs from causing horizontal overflow */
    text-align: center;
    min-height: 600px;
  }

  /* Decorative Background Glow Scaling */
  .orb-large {
    width: 360px !important;
    height: 360px !important;
    opacity: 0.7; /* Softens glow for small displays */
  }

  /* Content Container Limits */
  .master-copy {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Responsive Typography */
  .master-copy h2 {
    font-size: 28px !important;
    line-height: 1.3 !important;
    margin: 15px 0 !important;
  }

  .master-copy p {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
  }

  /* Full-Width Touch Button */
  .master-copy .btn {
    width: 100% !important;
    padding: 16px 20px !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.5px;
    box-sizing: border-box !important;
    display: inline-block;
    margin: 15px 0 !important;
  }

  /* Limited Seats Warning Text */
  .master-copy p[style*="#F0533F"] {
    font-size: 0.75rem !important;
    margin-top: 8px !important;
    line-height: 1.3;
  }
}




/* ============================
       ALUMNI / TESTIMONIALS SECTION
    ============================ */
.alumni-section {
    padding: 70px 0;
    background-color: black;
    /* background: #03103e; */
    /* background-image: 
    radial-gradient(60% 60% at 20% 20%, rgba(4, 79, 252, 0.14), transparent 65%),
    radial-gradient(55% 55% at 85% 20%, rgba(3, 172, 253, 0.14), transparent 65%),
    radial-gradient(50% 50% at 50% 80%, rgba(253, 22, 4, 0.14), transparent 65%); */
}

.alumni-section__label {
    text-align: center;
    margin-bottom: 1rem;
}

.alumni-section__label span {
    display: inline-block;
    /* background-color: var(--brand-navy); */
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 6px 16px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.alumni-story {
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    background-color: var(--bg-secondary);
    overflow: hidden;
    margin-bottom: 2rem;
}

.alumni-story__thumb {
    aspect-ratio: 4/3;
    overflow: hidden;
}

.alumni-story__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.alumni-story__body {
    padding: 1.5rem;
}

.alumni-story__body blockquote {

    font-style: italic;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--muted);
    border-left: 3px solid var(--brand-yellow);
    padding-left: 1rem;
    margin-bottom: 1rem;
}

.alumni-story__body .name {
    font-weight: 800;
    color: var(--foreground);
}

.alumni-story__body .role {
    font-size: 0.8rem;
    color: var(--brand-yellow);
}


/* ── Heading ── */
.alumni-head {
    text-align: center;
    margin-bottom: 10px;
    padding: 0 24px;
}

.alumni-head-p {
    font-size: 12px !important;
    color: #F0533F !important;
    line-height: 1.6;
    margin-top: 10px;
}

.alumni-head h2 {

    font-size: 40px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
    letter-spacing: -.01em;
}

.alumni-head h2 .gold {
    color: #069ff9;
    /* background: linear-gradient(135deg, #03acfd 0%, #044ffc 100%);
-webkit-background-clip: text;
 -webkit-text-fill-color: transparent; */
}


@media screen and (max-width: 767px)  {
    .alumni-head h2  {
        font-size: 28px !important;
    }
}



.alumni-head p {
    font-size: 16px;
    color: rgb(139, 148, 158);
    line-height: 1.6;
}

.ts-root {
    width: 100%;
    overflow: hidden;
    /* background: #03103e; */
    padding: 32px 0 28px;
    position: relative
}

.ts-track-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 530px
}

.ts-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: sticky;
    width: 100%
}

.ts-card {
    position: absolute;
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    cursor: pointer
}

.ts-card.pos-center {
    width: 260px;
    z-index: 10;
    box-shadow: 0 8px 40px rgba(120, 80, 200, 0.18);
    opacity: 1;
    transform: translateX(0) scale(1);
    border: 2.5px solid #e8e0ff
}

.ts-card.pos-left1 {
    width: 200px;
    z-index: 7;
    opacity: 0.85;
    transform: translateX(-290px) scale(0.88);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    filter: brightness(0.92)
}

.ts-card.pos-left2 {
    width: 170px;
    z-index: 5;
    opacity: 0.55;
    transform: translateX(-500px) scale(0.78);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    filter: brightness(0.82) saturate(0.7)
}

.ts-card.pos-right1 {
    width: 200px;
    z-index: 7;
    opacity: 0.85;
    transform: translateX(290px) scale(0.88);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    filter: brightness(0.92)
}

.ts-card.pos-right2 {
    width: 170px;
    z-index: 5;
    opacity: 0.55;
    transform: translateX(500px) scale(0.78);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    filter: brightness(0.82) saturate(0.7)
}

.ts-card.pos-hidden {
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transform: translateX(620px) scale(0.7)
}

.ts-card.pos-hidden-left {
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transform: translateX(-620px) scale(0.7)
}

.media-wrap {
    position: relative;
    width: 100%
}

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

.pos-center .media-wrap img,
.pos-center .media-wrap video {
    height: 460px;
    border-radius: 0
}

.pos-left1 .media-wrap img,
.pos-left1 .media-wrap video {
    height: 330px
}

.pos-left2 .media-wrap img,
.pos-left2 .media-wrap video {
    height: 280px
}

.pos-right1 .media-wrap img,
.pos-right1 .media-wrap video {
    height: 330px
}

.pos-right2 .media-wrap img,
.pos-right2 .media-wrap video {
    height: 280px
}

.phone-notch {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    height: 32px;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    z-index: 5
}

.notch-dots {
    display: flex;
    gap: 5px
}

.notch-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #333
}

.notch-time {
    font-size: 10px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.5px
}

.logo-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #fff;
    border-radius: 8px;
    padding: 3px 6px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    border: 0.5px solid #e0d8f8
}

.logo-badge span:first-child {
    font-size: 8px;
    font-weight: 700;
    color: #6b3fa0
}

.logo-badge span:last-child {
    font-size: 7px;
    font-weight: 600;
    color: #9b6bdc;
    letter-spacing: 0.5px
}

.video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4
}
.bg-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0 0 0 / 90%); /* Adjust opacity (0.5) as needed */
    z-index: 1;
}

.pause-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    border: 2px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px)
}

.pause-bar {
    width: 4px;
    height: 18px;
    background: #fff;
    border-radius: 2px;
    margin: 0 3px
}

.play-icon-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    border: 2px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
    cursor: pointer
}

.vid-bottom-bar {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5
}

.vid-ctrl-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(30, 30, 30, 0.55);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    backdrop-filter: blur(2px)
}

.card-info {
    padding: 12px 14px 14px;
    background: #fff
}

.card-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a2e
}

.card-location {
    font-size: 11px;
    font-weight: 700;
    color: #000;
    letter-spacing: 0.6px;
    margin-top: 2px
}

.card-sub {
    font-size: 11px;
    color: #000;
    ;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px
}

.card-sub::before {
    content: "✈";
    font-size: 10px
}

.card-quote {
    font-size: 12px;
    color: #666;
    margin-top: 8px;
    line-height: 1.55;
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.read-more-btn {
    background: none;
    border: none;
    color: #7c4dcc;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    margin-top: 6px;
    text-decoration: underline;
    text-underline-offset: 2px
}

.arr-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e0d8f8;
    box-shadow: 0 2px 12px rgba(120, 80, 200, 0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, box-shadow 0.2s
}

.arr-btn:hover {
    background: #f3eeff;
    box-shadow: 0 4px 18px rgba(120, 80, 200, 0.2)
}

.arr-btn svg {
    width: 18px;
    height: 18px;
    stroke: #5a3a9a;
    stroke-width: 2.5;
    fill: none
}

#arrLeft {
    left: 8px
}

#arrRight {
    right: 8px
}

@media(max-width:700px) {
    .ts-track-wrap {
        height: 550px
    }

    .ts-card.pos-center {
        width: 220px
    }

    .ts-card.pos-left1 {
        width: 160px;
        transform: translateX(-220px) scale(0.85)
    }

    .ts-card.pos-left2 {
        opacity: 0;
        pointer-events: none
    }

    .ts-card.pos-right1 {
        width: 160px;
        transform: translateX(220px) scale(0.85)
    }

    .ts-card.pos-right2 {
        opacity: 0;
        pointer-events: none
    }

    .pos-center .media-wrap img,
    .pos-center .media-wrap video {
        height: 480px
    }

    .pos-left1 .media-wrap img,
    .pos-left1 .media-wrap video {
        height: 260px
    }

    .pos-right1 .media-wrap img,
    .pos-right1 .media-wrap video {
        height: 260px
    }

    h2.section__title.benefits {
        padding: 30px 0px;
    }
}

@media(max-width:420px) {
    .ts-card.pos-left1 {
        opacity: 0;
        pointer-events: none
    }

    .ts-card.pos-right1 {
        opacity: 0;
        pointer-events: none
    }

    .ts-card.pos-center {
        width: 85vw
    }
}

@media (max-width: 767px) {
    #popmake-519 {
        width: 95% !important;
        max-width: 95% !important;
        /* top: 20px !important; */
        left: 0 !important;
        right: 0 !important;
    }

    #pum_popup_title_519 {
        font-size: 20px !important;
        text-align: center;
    }

    .popupvideo-inner p {
        text-align: center;
    }

    .popupvideo-outer,
    .popupvideo-inner,
    .popupvideo-outer .container {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .popupvideo-inner iframe {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9;
        display: block;
        border: 0;
    }

    #popmake-519 {
        width: 95% !important;
        max-width: 695px !important;
        box-sizing: border-box;
    }

    #popmake-519 .pum-content {
        overflow: hidden !important;
    }
}




/* --- FAQ ACCORDION --- */
section#faq {
    padding-top: 65px;
    padding-bottom: 80px;
}
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    /* background: var(--bg-card); */
    /* background: linear-gradient(135deg, rgba(18, 24, 38, 0.9) 0%, rgba(10, 15, 26, 0.95) 100%); */
    /* border: 1px solid var(--border-color); */
    background-color: #111c26;
    border: 1px solid #ffffff1f;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}

.faq-question {
    padding: 20px 24px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

.faq-answer {
    padding: 0 24px 20px;
    color: var(--text-muted);
    display: none;
}
.faq-answer p {
    line-height: 1.4;
}

.faq-item.active .faq-answer {
    display: block;
}

/* ==========================================
   FAQ SECTION MOBILE STYLES
   ========================================== */
@media screen and (max-width: 767px) {

    
  /* Container Padding */
  .faq.section-padding {
    /* padding: 40px 16px !important; */
    padding: 0;
  }

  /* Section Title Scaling */
  .faq .section-header h2 {
    font-size: 28px !important;
    text-align: center;
    margin-bottom: 24px !important;
  }

  /* Accordion Layout */
  .faq-accordion {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    gap: 12px !important;
  }

  /* FAQ Card Item */
  .faq-item {
    width: 100% !important;
    border-radius: 8px;
    box-sizing: border-box !important;
    overflow: hidden;
  }

  /* Question Header & Touch Area */
  .faq-question {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 16px !important;
    font-size: 0.95rem !important;
    font-weight: 600;
    line-height: 1.4 !important;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Plus/Minus Toggle Icon Alignment */
  .faq-question .toggle {
    font-size: 1.2rem !important;
    margin-left: 12px !important;
    flex-shrink: 0;
  }

  /* Answer Container & Text */
  .faq-answer {
    padding: 0 16px 14px 16px !important;
  }

  .faq-answer p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    opacity: 0.9;
  }
}








/* --- FOOTER --- */
.footer {
    border-top: 1px solid var(--border-color);
    padding: 80px 0 40px;
    background: #05070a;
}



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

.footer-bottom {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 30px;
}

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

    .grid-2,
    .grid-3,
    .timeline {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

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

    .nav-links {
        display: none;
    }

    .footer-grid {
        /* grid-template-columns: 1fr; */

        
    }
}




/* Final CTA */
.cta-banner-wrapper {
    width: 100%;
    padding: 90px 20px 90px;
    background: black;
    display: flex;
    justify-content: center;
    font-family: var(--font-body);
}

/* Wide Horizontal Rectangle Banner */
.cta-rectangle-card {
    width: 100%;
    max-width: 1100px;
    background-color: #111c26;
    border: 1px solid #ffffff1f;
    /* background: linear-gradient(135deg, rgba(18, 24, 38, 0.9) 0%, rgba(10, 15, 26, 0.95) 100%); */
    /* border: 1px solid rgba(0, 212, 255, 0.2); */
    border-radius: 12px; /* Clean rectangular corners */
    padding: 40px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Left Content Column */
.cta-rect-content {
    flex: 1.2;
}

.cta-rect-badge {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(0, 212, 255, 0.1);
    color: #00d4ff;
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.cta-rect-title {
    font-size: 40px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    line-height: 1.2;
    /* font-family: var(--font-heading); */
}

.cta-rect-subtitle {
    font-size: 16px;
    color: rgb(139, 148, 158);
    margin-bottom: 12px;
}

.cta-rect-desc {
    font-size: 16px;
    color: rgb(139, 148, 158);
    margin-bottom: 16px;
}

.cta-rect-desc strong {
    color: #1aafe5;
    /* background: linear-gradient(135deg, #03acfd 0%, #044ffc 100%);
-webkit-background-clip: text;
 -webkit-text-fill-color: transparent; */
}

.cta-rect-highlights {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 14px;
    color: rgb(139, 148, 158);
    font-weight: 600;
}

/* Right Action Column */
.cta-rect-action {
    flex: 0.8;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #ffffff1f;
    /* background: rgba(255, 255, 255, 0.02); */
    padding: 24px;
    border-radius: 8px;
    /* border: 1px solid rgba(255, 255, 255, 0.05); */
    text-align: center;
}

.cta-rect-tagline {
    font-size: 22px;
    font-weight: 600;
    font-family: var(--font-body);
    color: #ffffff;
    margin-bottom: 8px;
}

.pulsing-dot {
  width: 8px;
  height: 8px;
  background-color: #00ff88;
box-shadow: 0 0 8px #a7f3d0;
  /* background-color: #00ffab; */
  border-radius: 50%;
  /* box-shadow: 0 0 8px #026745; */
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

a.final-btn.final-btn-secondary {
    gap: 4px;
}

a.final-btn.final-btn-primary
{
    gap: 10px;
}

/* Buttons */
.final-btn {
    /* display: inline-block; */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 20px;
    font-size: 0.9rem;
    font-weight: 400;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.25s ease;
    text-align: center;
}

.final-btn-primary {
    /* background: linear-gradient(135deg, #00d4ff, #7f00ff); */
    /* background: linear-gradient(135deg, #03acfd, #044ffc); */
    background: linear-gradient(90deg, #00E5FF 10%, #22D3A1 100%);
    /* background-image: linear-gradient(135deg, oklch(0.68 0.17 245), color-mix(oklch(0.68 0.17 245) 55%, oklch(0.74 0.18 152))); */
/* background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial; */
    color: #ffffff;
    /* box-shadow: 0 4px 15px rgba(0, 212, 255, 0.25); */
    font-size: 16px;
    font-weight: 400px;
}

.final-btn-primary:hover {
    transform: translateY(-2px);
    /* box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4); */
}

.final-btn-secondary {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: url('./assets/videos/WhatsApp\ Video\ 2026-09-03\ at\ 1.06.50\ PM.mp4') no-repeat center/cover;
    background: url('./assets/videos/WhatsApp\ Video\ 2026-09-03\ at\ 1.06.50\ PM\ \(1\).mp4');
}

.final-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Mobile Responsiveness */
@media (max-width: 850px) {
    .cta-rectangle-card {
        flex-direction: column;
        padding: 30px 24px;
        align-items: stretch;
    }

    .cta-rect-highlights {
        flex-direction: column;
        gap: 8px;
    }

    .cta-rect-title {
        font-size: 28px !important;
    }

    a.final-btn.final-btn-primary {
        font-size: 12px
    }

    a.final-btn.final-btn-secondary  {
        font-size: 12px;
    }
}




/* footer */
.site-footer {
    background: #06090e;
    color: #94a3b8;
    padding: 70px 20px 30px;
    font-family: var(--font-body);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-container {
    max-width: 1150px;
    margin: 0 auto;
}

/* Layout Grid */
.footer-grid {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 50px;
}

/* Brand Column */
.footer-brand-col {
    flex: 1.5;
}


.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* Image Tag Styling */
.footer-logo {
  height: 80px;
  width: auto;
  object-fit: contain;
  display: block;
  margin-bottom: 15px;
}

.footer-slogan {
    font-size: 18px;
    color: #cbd5e1;
    font-weight: 600;
    margin-bottom: 18px;
}

.footer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-tags span {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgb(139, 148, 158);
    /* color: #64748b; */
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 4px;
}

/* Quick Links Column */
.footer-links-col {
    flex: 1;
}

.footer-heading {
    font-size: 1rem;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;

    display: flex;             /* Align items horizontally in a row */
  align-items: center;         /* Center icons vertically */
  gap: 15px;                  /* Add spacing between each icon */
  list-style: none;           /* Remove bullet points */
  padding: 0;                 /* Clear default padding */
  margin: 0;  
}

.footer-menu li a {
    /* color: #94a3b8; */
    text-decoration: none;
    color: rgb(139, 148, 158);
    font-size: 0.9rem;
    transition: color 0.2s ease;

    display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.footer-menu-icon {
  /* display: flex;             
  align-items: center;     
  gap: 15px;                  
  list-style: none;        
  padding: 0;               
  margin: 0;                   */


  list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    gap: 9px; 
}

/* .footer-menu-icon li a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  
} */

.footer-menu-icon li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.footer-menu-icon li img {
  width: 24px;                 /* Adjust icon width as needed */
  height: 32px;                /* Adjust icon height as needed */
  object-fit: contain;
  transition: transform 0.2s ease;
}

/* Hover effect */
.footer-menu-icon li img:hover {
  transform: translateY(-2px);
}

.footer-menu-icon li a img {
    width: 100% !important;
}

.footer-menu li a:hover {
    color: #069ff9;
}

/* Divider Line */
.footer-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin-bottom: 40px;
}

/* Risk Disclaimer Card */
.footer-disclaimer {
    background: rgba(18, 24, 38, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 30px;
}

.disclaimer-title {
    color: #f59e0b;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-disclaimer p {
    font-size: 12px;
    line-height: 1.6;
    /* color: #64748b; */
    color: rgb(139, 148, 158);
    margin: 0;
}

/* Copyright Bar */
.footer-bottom {
    text-align: center;
    font-size: 0.8rem;
    color: #475569;
}

/* Responsive Adjustments */
@media (max-width: 767px) {
    .footer-grid {
        display: flex;
        flex-direction: column !important;
        gap: 32px;
    }

    .footer-menu {
        flex-direction: column;
        gap: 10px;
    }
}

/* ==========================================
   FOOTER MENU MOBILE RESPONSIVE STYLES
   ========================================== */
@media screen and (max-width: 767px) {
  .footer-menu {
    display: flex !important;
    flex-direction: column !important; /* Stacks links vertically */
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important; /* Space between links */
    padding: 0 !important;
    margin: 20px 0 !important;
    list-style: none !important;
    /* text-align: center; */

    flex-wrap: nowrap;
  }

  .footer-menu-icon {
        flex-direction: row !important; /* Stack icons vertically */
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;               /* Vertical spacing between icons */
        width: 45% !important;
        margin: 0px 0 !important;
    }

    .footer-menu-icon li img {
        width: 40px;            /* Slightly larger touch target on mobile */
        height: 40px;
    }

    .footer-menu-icon li a {
      padding: 0px 0px !important;
    }

  .footer-menu li {
    width: 100% !important;
    margin: 0 !important;
  }

  .footer-menu li a {
    display: inline-block;
    font-size: 0.95rem !important;
    padding: 6px 0px !important;
    line-height: 1.4;
    transition: opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Optional: Horizontal Wrap Layout for Slightly Broader Mobile Screens */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .footer-menu {
    flex-direction: row !important; /* Side-by-side layout on tablets/phablets */
    flex-wrap: wrap !important;
    gap: 12px 20px !important;
  }

  .footer-menu li {
    width: auto !important;
  }
}



/* pop up */
/* Base Layout & Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 10000;
  font-family: 'Inter', sans-serif;
}

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

/* Modal Card */
.modal-card {
  background: #ffffff;
  width: 90%;
  max-width: 580px;
  border-radius: 20px;
  padding: 32px;
  position: relative;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.close-btn {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  font-size: 24px;
  color: #6b7280;
  cursor: pointer;
}

/* Header & Badge */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.modal-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #000;
}

.modal-subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  color: #9ca3af;
}

.badge {
  /* background-color: #e6f7f0; */
  /* color: #0d9488; */

  /* border: 1px solid rgb(34 211 161 / 60%); */
    /* color: #22D3A1; */

    color: #1aafe5;
    border: 1px solid rgb(26 175 229 / 60%);

    /* color: #D4AF37;
    border: 1px solid rgb(212 175 55 / 60%); */

      /* background: rgba(0, 230, 118, 0.1); */
  /* border: 1px solid rgba(0, 230, 118, 0.3); */
    /* color: var(--primary-green); */
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  letter-spacing: .10em;
  gap: 6px;
  margin-bottom: 20px;
}

.badge-dot {
  width: 6px;
  height: 6px;
  background-color: #10b981;
  border-radius: 50%;
}

/* Form Styles */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.full-width {
  margin-bottom: 20px;
}

label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}

input, select, textarea {
    font-family: var(--font-body) ;
  width: 100%;
  padding: 10px 14px;
  background-color: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  font-size: 14px;
  color: #334155;
  outline: none;
  box-sizing: border-box;
}

input::placeholder, textarea::placeholder {
    font-family: var(--font-body) ;
  color: #94a3b8;
}

input:focus, select:focus, textarea:focus {
    font-family: var(--font-body) ;
  border-color: #00b87c;
  background-color: #ffffff;
}

.phone-input {
  display: flex;
  background-color: #f8fafc;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
  overflow: hidden;
}

.phone-input input {
  border: none;
  background: transparent;
}

.country-code {
  padding: 10px 12px;
  font-size: 14px;
  color: #475569;
  border-right: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
}

textarea {
  resize: vertical;
}

/* Submit Button & Footer */
.submit-btn {
  width: 100%;
  /* background-color: #00b87c; */
  /* background: linear-gradient(135deg, #00d4ff, #7f00ff); */
  background: linear-gradient(135deg, #00d4ff, #7f00ff);
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.25);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition: background-color 0.2s;
  font-family: var(--font-body) ;
}

.submit-btn:hover {
  background: linear-gradient(135deg, #00d4ff, #7f00ff);
}

.footer-note {
  text-align: center;
  font-size: 12px;
  color: #94a3b8;
  margin-top: 14px;
  margin-bottom: 0;
}

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



.form-group:has(select) {
    grid-column: 1 / -1;
    width: 100%;
}

.form-group:has(select) select {
    width: 100%;
}




/* chakra */
.chakra-section{
      padding-bottom: 0px;
}
.chakra-item,
.chakra-item *{
    cursor:pointer;
}


.chakra-tabs{
  display:flex;
  gap:18px;
  height:370px;
  overflow:hidden;
  width:100%;
}

/* TAB */
.chakra-item{
  position:relative;
  flex:0 0 70px;
  border-radius:10px;
  background: #002a4c;
  transition:all .5s ease;
  overflow:hidden;
  cursor:pointer;
}

/* ACTIVE TAB */
.chakra-item.active {
  flex:1 1 58%;
}

/* DEFAULT */
.chakra-item{
  position:relative;
  flex:1;
  min-width:70px;
  border-radius:10px;
  background:var(--bg);
  overflow:hidden;
  cursor:pointer;

  transition:
    flex .65s cubic-bezier(.22,1,.36,1),
    transform .3s ease;
}

/* ACTIVE TAB */
.chakra-item.active{
  flex:7;
}

/* VERTICAL TEXT */
.chakra-vertical{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(180deg);
  writing-mode:vertical-rl;
  color:#fff;
  font-size:22px;
  white-space:nowrap;
  transition:.4s ease;
  z-index:2;
}

/* CONTENT */
.chakra-content{
  opacity:0;
  visibility:hidden;

  transform:translateX(-120px);

  transition:
    opacity .45s ease,
    transform .42s cubic-bezier(.2,.9,.3,1);

  display:flex;
  justify-content:space-between;
  align-items:center;
  height:100%;
  padding:25px;
  gap:40px;
}

.chakra-item.active .chakra-content,
.chakra-item:hover .chakra-content{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
}
.chakra-text{
  transition:
    opacity .4s ease,
    transform .5s cubic-bezier(.2,.9,.3,1);
}

.chakra-text-h3 {
    margin-bottom: 10px; color: #D4AF37 !important;
}

.chakra-image{
  transition:
    opacity .4s ease;
}

.chakra-image img{
  transform:none !important;
  transition:none !important;
}

/* HIDE VERTICAL TEXT */
.chakra-item.active .chakra-vertical,
.chakra-item:hover .chakra-vertical{
  opacity:0;
}
.chakra-item:not(.active) .chakra-text,
.chakra-item:not(.active) .chakra-image{
  opacity:0;
}

/* TEXT */
.chakra-text{
  width:45%;
}

.chakra-text h3{
  font-size: 30px;
  line-height:1.05;
  color: #ffffff7d;
  font-weight:600;
  font-family: var(--font-body);
}

.chakra-text-p {
    font-size: 24px;
    color: #ffffff7d;
    font-weight:400;
}

.chakra-text strong{
  color:#fff;
  font-weight:700;
}

.chakra-text a{
  display:inline-block;
  margin-top:60px;
  color:#fff;
  font-size:22px;
    line-height: 30px;
}

/* IMAGE */
.chakra-image{
  width:45%;
}

.chakra-image img{
 
    width: 100%;
    object-fit: cover;
    min-height: 237px;
    max-height: 350px;
 
  border-radius:24px;
  display:block;
}

/* MOBILE */
@media(max-width:768px){
.chakra-section {
   
    padding-bottom: 30px;
}
  .chakra-tabs{
    display: flex;
        flex-direction: column;
        overflow-x: auto;
        overflow-y: hidden;
        height: auto;
        gap: 12px;
        padding-bottom: 10px;
        scroll-snap-type: unset;
        -webkit-overflow-scrolling: touch;
  }

  .chakra-tabs::-webkit-scrollbar{
    height:6px;
  }

  .chakra-tabs::-webkit-scrollbar-thumb{
    background:#bbb;
  }

  .chakra-item{
    flex:0 0 85%;
    min-width:85%;
    height:330px;
    scroll-snap-align:start;
  }

  .chakra-item.active{
    flex:0 0 85%;
  }
 .chakra-text,
  .chakra-image{
    opacity:1 !important;
  }

  .chakra-vertical{
    display:none;
  }

  .chakra-content{
    opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        padding: 20px;
        gap: 20px;
  }

  .chakra-text{
    width: 100%;
  }

  .chakra-image{
    width: 100%;
  }

  .chakra-text h3{
    /* color: #edce63; */
    font-size:24px;
    line-height:1.2;
  }

  .chakra-text a{
    margin-top:40px;
    font-size:18px;
  }

  .chakra-image img{
    width:100%;
    height:260px;
    object-fit:cover;
    border-radius:20px;
  }
}




.sticky-footer-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #0b1536; /* Dark navy blue from image */
      color: #ffffff;
      padding: 12px 0;
      z-index: 1000;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    }

    /* Inner Container to align elements */
    .banner-container {
      max-width: 925px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    /* Left Side Content */
    .banner-left {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .banner-title {
      font-weight: 400;
      font-size: 16px;
      /* letter-spacing: 0.2px; */
    }

    .banner-rating {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: #b0b8c4;
    }

    .google-icon {
      width: 18px;
      height: 18px;
    }

    /* Right Side Button */
    .apply-btn {
      background: linear-gradient(135deg, #00d4ff, #7f00ff);
    color: #ffffff;

      font-weight: 400;
      font-size: 16px;
      /* padding: 12px 32px; */
      padding: 8px 24px;
      border: none;
      border-radius: 50px; /* Fully rounded pill shape */
      cursor: pointer;
      text-decoration: none;
      transition: background-color 0.2s ease, transform 0.1s ease;
    }

    .apply-btn:hover {
      background: linear-gradient(135deg, #00bfff, #8000fff3);
      transform: translateY(-1px);
    }

    /* Mobile Responsive Tweaks */
    @media (max-width: 600px) {
      .banner-title {
        font-size: 15px;
      }
      .apply-btn {
        padding: 10px 20px;
        font-size: 14px;
      }
    }





/* counter section */
/* Container holding the stats */
    .counter-container {
        background-color: #111c26;
    border: 1px solid #ffffff1f;
      display: flex;
      /* background-color: #0e1723; */
      /* border: 1px solid #1f2b3a; */
      border-radius: 20px;
      padding: 0px 0;
      margin-top: 20px;
      /* width: 90%; */
      max-width: 900px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    }

    /* Individual counter box */
    .counter-item {
      flex: 1;
      text-align: center;
      padding: 10px 20px;
      position: relative;
    }

    /* Add vertical dividers between items */
    .counter-item:not(:last-child)::after {
      content: "";
      position: absolute;
      right: 0;
      top: 10%;
      height: 80%;
      width: 1px;
      background-color: #1f2b3a;
    }

    /* Value text styling */
    .counter-value {
      font-size: 20px;
      font-weight: 700;
      /* margin-bottom: 8px; */
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      height: 35px;
    }

    /* Label text styling */
    .counter-label {
      color: #8c9ba8;
      font-size: 12px;
      font-weight: 400;
    }

    /* Color styles for specific metrics */
    .blue-text {
      color: #069ff9;
    }

    .green-text {
      color: #26D07C;
      gap: 0px
    }

    .gold-text {
      color: #F0B341;
    }

    .star-icon {
      font-size: 20px;
      line-height: 1;
    }





/* why do beginner struggle */
.rut-struggle-section {
  /* background-color: #0b132b; */
  /* background-color: #0B1F3B; */
  background-color: #000;
  color: #ffffff;
  font-family: Inter, sans-serif;
  padding: 70px 20px 80px;
  box-sizing: border-box;
}

.rut-struggle-container {
  max-width: 1140px;
  margin: 0 auto;
}

/* Header Styles */
.rut-struggle-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 50px auto;
}

.rut-struggle-badge {
  display: inline-block;
  background-color: rgba(255, 77, 77, 0.15);
  color: #ff4d4d;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 77, 77, 0.3);
}

.rut-struggle-title {
  font-size: 40px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px 0;
  line-height: 1.2;
}

.rut-struggle-subtitle {
  font-size: 16px;
  font-weight: 500;
  /* color: #00e676; */
  color: #8b949e;
  margin: 0 0 10px 0;
}

.rut-struggle-intro {
  font-size: 16px;
  color: #8b949e;
  margin: 0;
}

/* Grid Layout */
.rut-struggle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 50px;
}

/* Card Styling */
.rut-struggle-card {
  /* background-color: #1c2541; */
  /* border: 1px solid rgba(255, 255, 255, 0.08); */

  /* background: rgb(22 27 34 / 70%);
  border: 1px solid rgba(255, 255, 255, 0.1); */

   /* background: #1E293B; */
   /* border: 1px solid #637388; */

  background: rgba(255, 82, 82, 0.05);
  border: 1px solid rgba(255, 82, 82, 0.2);

  border-radius: 12px;
  padding: 22px 24px;
  position: relative;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.rut-struggle-card:hover {
  transform: translateY(-5px);
  /* border-color: rgba(0, 230, 118, 0.4); */
  /* border-color: #069ff9; */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.rut-struggle-icon {
  font-size: 28px;
  margin-bottom: 16px;
}

.rut-struggle-icon img {
    width: 12%;
    height: 0%;
}

.rut-struggle-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 10px 0;
  position: relative;
  padding-left: 0px;
}

/* Custom red 'X' bullet mark */
.rut-struggle-card-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  /* color: #ff4d4d; */
  /* font-weight: 800; */
  /* font-size: 16px; */
  /* margin-right: 10px; */
}

.rut-struggle-card-desc {
    color: #8b949e;
  font-size: 16px;
  /* color: #cbd5e1; */
  line-height: 1.6;
  margin: 0;
}

.rut-struggle-card-desc strong {
  color: #ffffff;
}

.rut-struggle-card-desc em {
  color: #ff4d4d;
  font-style: normal;
  font-weight: 700;
}

/* Bottom Takeaway Box */
.rut-struggle-takeaway {
  /* background: linear-gradient(135deg, #1c2541 0%, #0b132b 100%); */
  background: rgb(22 27 34 / 70%);
  /* border: 1px solid #00e676; */
  border: 1px solid rgb(34 211 161 / 30%);
  /* background: #1E293B; */
   /* border: 1px solid #637388; */
  border-radius: 16px;
  padding: 36px 30px;
  text-align: center;
  /* box-shadow: 0 10px 30px rgba(0, 230, 118, 0.1); */
}

.rut-struggle-highlight {
  font-size: 16px;
  font-weight: 700;
  color: #F0533F;
  /* color: #ff4d4d; */
  letter-spacing: 0px;
  display: block;
  margin-bottom: 8px;
}

.rut-struggle-takeaway-text {
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
  margin: 0;
  line-height: 1.4;
}

.rut-struggle-takeaway-text span {
  /* color: #00e676; */
  color: #22D3A1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Responsive Media Queries */
@media (max-width: 992px) {
  .rut-struggle-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .rut-struggle-grid {
    grid-template-columns: 1fr;
  }
  
  .rut-struggle-title {
    font-size: 28px;
  }
  
  .rut-struggle-takeaway-text {
    font-size: 18px;
  }

  .rut-struggle-takeaway-text span {
    text-decoration: none;
    color: #fff;
  }
}





/* RISEX GOLDEN STRATEGY SECTION */
.risex-section {
  padding: 80px 20px;
  /* background: radial-gradient(circle at top center, #1a1f2c 0%, #0b0e14 70%); */
  /* background-color: #090c10; */
  background-color: #0c151d;
}

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

/* Header */
.risex-header {
  text-align: center;
  margin-bottom: 0px;
}

.risex-badge {
  background: rgba(212, 175, 55, 0.15);
  color: #d4af37;
  border: 1px solid #d4af37;
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 15px;
}

.risex-header h2 {
  font-size: 38px;
  color: #ffffff;
  margin-bottom: 15px;
  font-weight: 700;
}

.risex-subtitle {
  font-size: 18px;
  color: rgb(139, 148, 158);
  max-width: 650px;
  margin: 0 auto;
}


.feature-card-sec__wrapper {
    /* background: radial-gradient(circle at center, #0f1c3f 0%, #050a18 100%); */
    /* padding: 80px 20px; */
    font-family: 'Inter', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    /* min-height: 100vh; */
    padding-bottom: 25px;
    padding-top: 12px;
}

/* Grid Layout for Columns */
.feature-card-sec__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1200px;
    width: 100%;
}
/* Individual Feature Item */
.feature-card-sec__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
}
/* Icon Container */
.feature-card-sec__icon-box {
    width: 80px;
    height: 80px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.feature-card-sec__icon-box img {
    width: 100%;
}
/* Icon Styling */
.feature-card-sec__icon {
    font-size: 55px;
    color: #43c6eb; /* Cyan blue accent */
    /* Using drop-shadow to give a light glow effect similar to the image */
    filter: drop-shadow(0 0 8px rgba(67, 198, 235, 0.3));
}
/* Title Styling */
.feature-card-sec__title {
    /* color: #f3ce70;  */
    color: #D4AF37;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.3;
}
/* Description Paragraph Styling */
.feature-card-sec__description {
    color: rgb(139, 148, 158);
    font-size: 0.98rem;
    line-height: 1.6;
    font-weight: 400;
    max-width: 320px;
}

/* Responsive Design for Mobile & Tablet Screen Sizes */
@media (max-width: 900px) {
    .feature-card-sec__grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 0px;
    }
    
    .feature-card-sec__wrapper {
        padding: 40px 20px;
    }
}


/* Worlow Steps */
.risex-flow-outer {
    display: flex;
    justify-content: center;
    align-items: center;
}
.risex-flow {
    width: 58%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 30px;
  margin-bottom: 0px;
  background: rgba(255, 255, 255, 0.03);
  padding: 20px;
  border-radius: 12px;
  /* border: 1px solid rgba(255, 255, 255, 0.05); */
  border: 1px solid #ffffff1f;
}

.flow-step {
  background: #151a24;
  /* border: 1px solid rgba(212, 175, 55, 0.3); */
  border: 1px solid rgba(251, 191, 36, 0.3);
  padding: 10px 18px;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.flow-step span {
  /* color: #d4af37; */
  color: #FBBF24;
  font-size: 12px;
}

.flow-arrow {
  color: #64748b;
  font-size: 12px;
}

/* Mindset Cards */
.risex-mindset {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}

.mindset-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 25px;
  border-radius: 12px;
  background: #111c26;
}

.mindset-card.wrong {
  border-left: 4px solid #ef4444;
}

.mindset-card.wrong .icon {
  color: #ef4444;
  font-size: 28px;
}

.mindset-card.right {
  border-left: 4px solid #10b981;
}

.mindset-card.right .icon {
  color: #10b981;
  font-size: 28px;
}

.mindset-card .label {
  font-size: 12px;
  text-transform: uppercase;
  color: rgb(139, 148, 158);
  letter-spacing: 1px;
  font-weight: 600;
  display: block;
  margin-bottom: 5px;
}

.mindset-card p {
  font-size: 16px;
  color: #ffffff;
  font-weight: 500;
}

.mindset-divider {
  color: #d4af37;
  font-size: 20px;
}

/* Footer Section */
.risex-footer {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.goal-box {
  background: linear-gradient(90deg, rgba(212,175,55,0.1) 0%, rgba(212,175,55,0.02) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.goal-box p {
  color: #e1e7ef;
  font-size: 16px;
}

.goal-box strong {
  /* color: #d4af37; */
  color: #FBBF24;
}

.disclaimer {
  font-size: 12px;
  color: #F0533F;
  font-style: italic;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .risex-section .container {
        padding: 0;
    }
  .risex-header h2 {
    font-size: 28px !important;
  }
  
  .risex-mindset {
    flex-direction: column;
  }
  
  .mindset-divider {
    transform: rotate(90deg);
  }
  
  .flow-arrow {
    display: none;
  }
}


/* .risex-understand-container {
  max-width: 800px;
  margin: 0 auto 60px auto;
}

.risex-subheading h3 {
  text-align: center;
  font-size: 26px;
  color: #ffffff;
  margin-bottom: 35px;
}

.split-checklist {
  display: flex;
  gap: 30px;
  background: #121620;
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 30px;
  border-radius: 16px;
}

.check-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border-left: 3px solid #10b981;
  transition: all 0.25s ease;
}

.check-row:hover {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: #d4af37;
  transform: translateX(4px);
}

.check-mark {
  color: #10b981;
  font-size: 13px;
  font-weight: 900;
}

.check-icon {
  color: #d4af37;
  font-size: 15px;
  width: 20px;
  text-align: center;
}

.check-row span {
  color: #e1e7ef;
  font-size: 15px;
  font-weight: 600;
}

@media (max-width: 650px) {
  .split-checklist {
    flex-direction: column;
    gap: 16px;
    padding: 20px;
  }
} */


.risex-understand-wrapper {
  max-width: 900px;
  margin: 0 auto 40px auto;
  text-align: center;
}

.risex-subheading {
  margin-bottom: 30px;
}

.sub-badge {
  color: #d4af37;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 6px;
  display: block;
}

.risex-subheading h3 {
  font-size: 25px !important;
  color: #ffffff;
  font-weight: 600;
}

/* Flex Chips Layout */
.chips-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.chip-item {
  display: flex;
  align-items: center;
  gap: 12px;
  /* background: #141923; */
  /* background: #111c26; */
  background: transparent;
  /* border: 1px solid rgba(212, 175, 55, 0.2); */
  /* border: 1px solid rgba(251, 191, 36, 0.3); */
  border: 1px solid rgb(26 175 229 / 30%);
  padding: 8px 20px;
  border-radius: 50px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
}

.chip-item:hover {
  /* background: rgba(26, 175, 229, 0.12); */
  border-color: #1aafe5;
  transform: translateY(-3px);
  box-shadow: 0 8px 10px rgba(26, 175, 229, 0.15);
}

.chip-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.15);
  /* color: #d4af37; */
  color: #FBBF24;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.chip-item span {
  color: #ffffff;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.3px;
}

@media (max-width: 600px) {
  .chip-item {
    width: 100%;
    justify-content: flex-start;
  }
}

@media screen and (min-width: 1024px) {
 button#navToggle {
    display: none;
}
}

.ytmCuedOverlayPlayButton {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -22px !important;
    margin-top: -3px !important;
    width: 48px !important;
    height: 37px !important;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
      .hero {
        padding-top: 20%;
    }

    .hero {
    position: relative;
    min-height: 69vh;
    }
    .card-preview {
    width: 100%;
    height: 70%;
    }

        .chakra-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px;
    }

    .chakra-image img {
    width: 100%;
    object-fit: cover;
    /* min-height: 237px; */
    max-height: 618px;
    }

        .feature-card-sec__wrapper {
        padding: 40px 20px 50px;
    }
}