body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-light);
    color: var(--primary-dark);
    overflow-x: hidden;
}

/* Navbar */
.navbar-brand {
    font-size: 1.8rem;
    color: var(--primary-dark);
    letter-spacing: -1px;
}

/* Navbar Scroll State */
.navbar {
    transition: all 0.3s ease;
}

.navbar.scrolled-nav {
    background-color: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.start-project-btn {
    background-color: var(--primary-blue);
    border: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 10px 24px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.start-project-btn:hover {
    transform: translateY(-2px);
    background-color: #0b5ed7;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.4);
}

/* Shine effect on button */
.start-project-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    transform: rotate(45deg);
    transition: all 0.5s;
    opacity: 0;
}

.start-project-btn:hover::after {
    left: 100%;
    opacity: 1;
    transition: 0.7s;
}


/* Hero Section */
.hero-section {
    min-height: 100vh;
    padding-top: 80px;
    padding-bottom: 0;
    position: relative;
    overflow: hidden;
    background-image: url('../assets/images/bgHero.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Ensure parallax elements don't cause scroll */
}

.hero-title {
    color: var(--primary-dark);
    line-height: 1.4;
    /* Removed gradients from here to fix visibility with block children */
}

.reveal-line {
    display: inline-block;
    /* Changed from block to inline-block for better gradient handling if needed, or keep block if line breaks required */
    opacity: 1;
    transform: translateY(0);

    /* Apply Gradient Shimmer Directly to Lines */
    background: linear-gradient(135deg, var(--primary-dark) 0%, #157EEE 50%, var(--primary-dark) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes gradientShimmer {
    to {
        background-position: 200% center;
    }
}

.hero-subtitle {
    font-size: 1rem;
    line-height: 1.6;
    opacity: 1;
}

/*
   BACKGROUND SQUARES PATTERN
   Refining to match the intricate grid image
*/
.bg-squares {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.bg-shape {
    position: absolute;
    border: none;
    border-radius: 40px;
    z-index: 0;
}

/* Left Big Shape */
.shape-left-1 {
    width: 300px;
    height: 300px;
    top: 15%;
    left: -100px;
    border: none;
    /* Simulate open side if needed, or just a box */
}

/* Bottom Left L-Cluster */
.shape-left-2 {
    width: 250px;
    height: 300px;
    bottom: -50px;
    left: 5%;
    border: none;
    /* Create visual complexity */
}

/* We can use ::before/::after to make L shapes */
.shape-left-2::after {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 100px;
    height: 100px;
    border: none;
    border-radius: 30px;
}

/* Top Center (Near Hat) */
.shape-top-center {
    width: 400px;
    height: 150px;
    top: -20px;
    left: 30%;
    border: none;
    border-radius: 0 0 40px 40px;
}

/* Right Side Complex */
.shape-right-1 {
    width: 350px;
    height: 300px;
    top: 5%;
    right: -50px;
    border: none;
    border-radius: 40px 0 0 40px;
}

/* Bottom Right Big L */
.shape-right-2 {
    width: 400px;
    height: 400px;
    bottom: 5%;
    right: -100px;
    border: none;
    border-radius: 40px 0 0 0;
}

.shape-right-2::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 0;
    width: 150px;
    height: 150px;
    border: none;
    border-radius: 40px 40px 0 0;
}

/* 
   STATIC CONNECTORS (SVG + ICONS)
*/
.static-connectors {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Above canvas, below text */
    pointer-events: none;
}

.connector-group {
    position: absolute;
}

/* Common Icon Style */
.connector-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(21, 126, 238, 0.05) 100%);
    border: 2px solid rgba(21, 126, 238, 0.3);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #157EEE;
    font-size: 28px;
    box-shadow: 0 8px 32px rgba(21, 126, 238, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.3);
    position: absolute;
    z-index: 2;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(10px);
    animation: modern-float 3.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite, glow-pulse 3s ease-in-out infinite, subtle-rotate 6s ease-in-out infinite !important;
}

.connector-icon:hover {
    animation: none !important;
    transform: translateY(-6px) scale(1.1);
    box-shadow: 0 16px 48px rgba(21, 126, 238, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.5);
    border-color: rgba(21, 126, 238, 0.6);
    background: linear-gradient(135deg, rgba(240, 247, 255, 0.2) 0%, rgba(21, 126, 238, 0.15) 100%);
    color: #0b5ed7;
}

/* Modern Animations for connectors */
@keyframes modern-float {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
    }
    25% {
        transform: translateY(-14px) translateX(2px);
    }
    50% {
        transform: translateY(-8px) translateX(0px);
    }
    75% {
        transform: translateY(-12px) translateX(-2px);
    }
}

@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 8px 32px rgba(21, 126, 238, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow: 0 12px 48px rgba(21, 126, 238, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.5);
    }
}

@keyframes subtle-rotate {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(0.5deg);
    }
    75% {
        transform: rotate(-0.5deg);
    }
}

@keyframes stroke-draw {
    0% {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        opacity: 0;
    }
    30% {
        stroke-dasharray: 1000;
        stroke-dashoffset: 0;
        opacity: 1;
    }
    85% {
        stroke-dasharray: 1000;
        stroke-dashoffset: 0;
        opacity: 1;
    }
    100% {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        opacity: 0;
    }
}

@keyframes path-glow {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(21, 126, 238, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(21, 126, 238, 0.8));
    }
}

@keyframes modern-dot-pulse {
    0%, 100% {
        r: 10px;
        opacity: 0.8;
    }
    50% {
        r: 16px;
        opacity: 1;
    }
}

@keyframes modern-dot-glow {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(21, 126, 238, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 16px rgba(21, 126, 238, 1));
    }
}

.hover-float {
    /* Animations applied via connector-icon class */
    transition: transform 0.3s ease;
}

/* SVGs */
.connector-svg {
    position: absolute;
    overflow: visible;
    z-index: 1;
    width: 140px !important;
    height: 100px !important;
}

.draw-path {
    fill: none;
    stroke: #157EEE;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 4px rgba(21, 126, 238, 0.4));
    animation: stroke-draw 5s ease-in-out infinite;
}

.connector-dot {
    fill: #157EEE;
    opacity: 0.9;
    filter: drop-shadow(0 0 8px rgba(21, 126, 238, 0.6));
    animation: modern-dot-pulse 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite, modern-dot-glow 3s ease-in-out infinite;
}

/* 
   POSITIONING GROUPS
*/

/* HAT GROUP (Top Center) */
.group-hat {
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 120px;
}

/* Keep icon close to text on large screens */
@media (min-width: 992px) {
    .group-hat {
        top: calc(50% - 280px);
    }
}

@media (min-width: 1200px) {
    .group-hat {
        top: calc(50% - 300px);
    }
}

@media (min-width: 1400px) {
    .group-hat {
        top: calc(50% - 330px);
    }
}

.group-hat .connector-icon {
    top: 0;
    left: 0;
}

.group-hat .connector-svg {
    top: 18px;
    /* Align with center of icon */
    left: 60px;
    /* Start right of icon */
}

/* CODE GROUP (Left) */
.group-code {
    top: 48%;
    left: 15%;
    width: 150px;
    height: 150px;
}

/* Keep icon close to text on large screens */
@media (min-width: 992px) {
    .group-code {
        left: calc(50% - 380px);
    }
}

@media (min-width: 1200px) {
    .group-code {
        left: calc(50% - 420px);
    }
}

@media (min-width: 1400px) {
    .group-code {
        left: calc(50% - 500px);
    }
}

.group-code .connector-icon {
    bottom: 0;
    left: 0;
}

.group-code .connector-svg {
    bottom: 64px;
    left: 15px;
}

/* UX GROUP (Right) */
.group-ux {
    top: 48%;
    right: 15%;
    width: 150px;
    height: 120px;
}

/* Keep icon close to text on large screens */
@media (min-width: 992px) {
    .group-ux {
        right: calc(50% - 380px);
    }
}

@media (min-width: 1200px) {
    .group-ux {
        right: calc(50% - 420px);
    }
}

@media (min-width: 1400px) {
    .group-ux {
        right: calc(50% - 460px);
    }
}

.group-ux .connector-icon {
    top: 0;
    right: 0;
}

.group-ux .connector-svg {
    top: 47px;
    right: 0;
    transform: translateX(-30px);
}

/* Animations */
@keyframes drawStroke {
    to {
        stroke-dashoffset: 0;
    }
}


/* Feature Badges */
.feature-badges {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards 0.7s;
}

.feature-badge {
    background: var(--card-bg);
    border: 1px solid #e9ecef;
    border-radius: 50px;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    /* Button reset for semantic <button> element */
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.feature-badge:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Performance: content-visibility for below-fold sections */
.impact-section,
.process-section,
.leadership-section,
.cta-decision-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
}

.feature-badge:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-color: var(--connector-color);
}

.feature-badge .icon {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.feature-badge:hover .icon {
    transform: scale(1.2);
}

/*
   CANVAS BACKGROUND
*/
#heroCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Behind everything */
    opacity: 1;
    /* Animation removed */
}

/* Feature Badges Restored */
.feature-badges {
    opacity: 1;
    /* Animation removed */
}

.feature-badge {
    background: var(--card-bg);
    border: 1px solid #e9ecef;
    border-radius: 50px;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    /* Ensure transform-style is preserve-3d for better effect */
    transform-style: preserve-3d;
    will-change: transform;
}

.feature-badge:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-color: var(--connector-color);
}

.feature-badge .icon {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.feature-badge:hover .icon {
    transform: scale(1.2);
}

/* Ensure z-index is above canvas */
.hero-section .container {
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Animations Keyframes */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floatIcon {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

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

@keyframes pulseBlue {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(13, 110, 253, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
    }
}

/* Line Drawing Animations */
/* Because we used borders, animating width/height works if we align it right. 
   For 'L' shapes, expanding width then height is ideal but hard with one div.
   Simultaneous expansion of w/h on a border-radius box creates a diagonal reveal or arc reveal.
*/
@keyframes drawLeftLine {
    0% {
        width: 0;
        height: 0;
    }

    50% {
        width: 6%;
        height: 0;
    }

    /* Horizontal first */
    100% {
        width: 6%;
        height: 7%;
    }

    /* Then vertical */
}

@keyframes drawRightLine {
    0% {
        width: 0;
        height: 0;
    }

    50% {
        width: 80px;
        height: 0;
    }

    100% {
        width: 80px;
        height: 60px;
    }
}

@keyframes drawTopLine {
    0% {
        width: 0;
        height: 0;
    }

    50% {
        width: 60px;
        height: 0;
    }

    100% {
        width: 60px;
        height: 60px;
    }
}

@keyframes fadeInDot {
    to {
        opacity: 1;
    }
}

@keyframes fadeInLines {
    to {
        opacity: 1;
    }
}

/* Media Queries */
@media (max-width: 768px) {
    .display-3 {
        font-size: 2.5rem;
    }

    .connector-container {
        display: none;
    }

    .feature-badges {
        flex-direction: column;
        align-items: center;
    }

    .feature-badge {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

/* 
   PARTNERS MARQUEE SECTION 
*/
.partners-section {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid #eef2f7;
    position: relative;
    z-index: 5;
    padding-top: 2rem;
    padding-bottom: 2rem;
    overflow: hidden;
    width: 100%;
}

.logo-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    /* Critical for horizontal layout */
    justify-content: flex-start;
    /* Ensure start align */
}

/* Fade effects on the edges */
.logo-slider::before,
.logo-slider::after {
    content: "";
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.logo-slider::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, transparent 100%);
}

.logo-slider::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.95) 0%, transparent 100%);
}

.logo-track {
    display: flex;
    width: max-content;
    /* Ensure it fits all items */
    animation: scroll 40s linear infinite;
    white-space: nowrap;
    /* Prevent wrapping */
}

.slide {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0.6;
    filter: grayscale(100%);
    transition: all 0.3s ease;
    cursor: pointer;
    color: var(--primary-dark);
}

.slide:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.1);
}

.slide i {
    color: var(--primary-dark);
    transition: color 0.3s ease;
    font-size: 24px;
    /* Explicit icon size */
}

.slide:hover i {
    color: var(--primary-blue);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-1400px);
        /* 7 items * 200px = 1400px */
    }
}

/* 
   IMPACT SECTION (STICKY STACKING) 
*/
.impact-section {
    background-color: #fafbfd;
    /* Very subtle grey/blue tint */
}

.impact-cards-container {
    position: relative;
    padding-top: 40px;
}

.impact-card {
    position: sticky;
    top: 120px;
    /* Stick 120px from top */
    min-height: 600px;
    height: 70vh;
    /* Takes up most of viewport */
    background: #fff;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    /* Ensure hardware acceleration for smooth scroll */
    will-change: transform;
    z-index: 10;
}

/* 
   Stagger top positions slightly so they form a stack 
   if we wanted them to peek. But user wants "replace".
   Sticky does replace by default if they are full height enough. 
   We added inline styles for top in HTML for explicit staggering if needed.
   Let's ensure they have a shadow to show depth when stacking.
*/

.impact-card:nth-child(1) {
    top: 120px;
    z-index: 10;
}

.impact-card:nth-child(2) {
    top: 140px;
    /* Slight offset to see it stack */
    z-index: 20;
}

.impact-card:nth-child(3) {
    top: 160px;
    z-index: 30;
}

/* Image Grid Styling */
.card-images .object-fit-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.impact-card:hover .card-images .object-fit-cover {
    transform: scale(1.05);
}

.card-images {
    position: relative;
}

/* Make sure text is readable */
.impact-card .card-content {
    z-index: 2;
}

/* 
   PROCESS TIMELINE SECTION (Refined & Modern)
*/
.process-section {
    background: linear-gradient(to bottom, #ffffff, #f8f9fa);
    position: relative;
    z-index: 1;
}

.timeline {
    padding: 40px 0;
}

/* Central Lines */
.timeline-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    /* Slightly thinner */
    background-color: #f1f5f9;
    transform: translateX(-50%);
    border-radius: 4px;
    z-index: 0;
}

.timeline-line-progress {
    position: absolute;
    top: 0;
    left: 50%;
    width: 3px;
    background: #00000033;
    /* Blue to Purple */
    transform: translateX(-50%);
    /* z-index: 1; */
    height: 0%;
    border-radius: 4px;
    transition: height 0.1s linear;
    /* Smooth sync with scroll */
    box-shadow: 0 0 15px rgba(13, 110, 253, 0.5);
    /* Glow */
}

/* Nodes - Smaller & Sleeker */
.timeline-node {
    width: 60px;
    /* Reduced from 90px */
    height: 60px;
    /* Reduced from 90px */
    background: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
    /* INCREASED to strictly sit above line (z-index: 1) */
    border: 3px solid #fff;
    font-size: 1.2rem;
    /* Reduced font size */
    color: #36454F;
    /* Inactive color */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.timeline-item.active .timeline-node {
    /* background: linear-gradient(135deg, var(--primary-blue), #6610f2);
    color: #fff; */
    transform: scale(1.2) rotate(360deg);
    /* Rotate for flair */
    /* box-shadow: 0 0 20px rgba(13, 110, 253, 0.4);
    border-color: #fff; */
}

/* Text Cards (Compact & Animated) */
.timeline-content {
    background: #fff;
    padding: 1.5rem 2rem;
    /* Reduced padding */
    border-radius: 16px;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
    /* Soft diffuse shadow */
    border: 1px solid rgba(255, 255, 255, 0.8);
    position: relative;
    transition: all 0.4s ease;
    cursor: default;
}

/* Hover Effect */
.timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px -10px rgba(13, 110, 253, 0.1);
    border-color: rgba(13, 110, 253, 0.2);
}

/* Transitions - Slower & Smoother */
.timeline-item {
    position: relative;
    opacity: 0;
    transition: all 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Slower duration */
}

/* Slide In Directions */
/* Left side items slide from left */
.timeline-item:nth-child(odd) {
    transform: translateX(-80px);
    /* Larger starting offset for drama */
}

/* Right side items slide from right */
.timeline-item:nth-child(even) {
    transform: translateX(80px);
}

/* Active State */
.timeline-item.active {
    opacity: 1;
    transform: translateX(0);
}

/* Add specialized float animation to active cards for "more animation" */
.timeline-item.active .timeline-content {
    animation: floatCard 6s ease-in-out infinite;
}

@keyframes floatCard {

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

    50% {
        transform: translateY(-8px);
    }
}


/* 
   LEADERSHIP SECTION 
*/
.leadership-section {
    background: #fff;
    perspective: 1000px;
}

.slider-wrapper {
    position: relative;
    /* transition for slide in */
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.slider-wrapper.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Main Card */
.leadership-card {
    background: radial-gradient(circle at 80% 50%, #2c3e50, #1a252f);
    /* Deep dark blue-grey */
    z-index: 10;
    min-height: 450px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Glow Background */
.glow-bg {
    position: absolute;
    top: 50%;
    right: 0;
    width: 60%;
    height: 100%;
    background: radial-gradient(circle, rgba(13, 110, 253, 0.3) 0%, rgba(13, 110, 253, 0) 70%);
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}

/* Stacking Effect */
.stack-layer {
    position: absolute;
    top: 0;
    right: -20px;
    width: 100%;
    height: 100%;
    background: #cbd5e1;
    /* Light gray */
    border-radius: var(--bs-border-radius-xl);
    z-index: 1;
    transform: rotate(3deg) scale(0.95);
    opacity: 0.5;
    transition: transform 0.6s ease;
}

.stack-layer.layer-2 {
    right: -40px;
    background: #94a3b8;
    /* Darker gray */
    z-index: 0;
    transform: rotate(6deg) scale(0.9);
    opacity: 0.3;
}

/* Hover Animation on Stack */
.leadership-card:hover+.stack-layer,
.slider-wrapper:hover .stack-layer {
    transform: rotate(4deg) scale(0.96) translateX(10px);
}

.slider-wrapper:hover .stack-layer.layer-2 {
    transform: rotate(8deg) scale(0.92) translateX(20px);
}

.slider-wrapper .leadership-card .row .p-5 {
    padding: 4rem !important;
}

/* Image Styling */
.user-image-col {
    min-height: 300px;
    /* Mobile fallback */
    overflow: hidden;
    /* Ensure zoom stays contained */
}

.user-image-col img {
    object-position: top center;
    filter: grayscale(100%) brightness(0.9);
    /* Moody B&W start */
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Ultra smooth ease */
    width: 100%;
    height: 100%;
}

/* Colorize & Cinematic Move on Hover */
.leadership-card:hover .user-image-col img {
    filter: grayscale(0%) brightness(1.05);
    /* Restore color & slight pop */
    transform: scale(1.1);
    /* Smooth zoom */
}

/* Typography */
.text-primary.display-5 {
    color: #3b82f6 !important;
    /* Brighter blue for dark bg */
}

/* Social Buttons */
.social-buttons .social-btn {
    width: 45px;
    height: 45px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

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

/* Controls (Modern Redesign) */
.controls-container {
    /* margin-top removed as requested */
    position: relative;
    z-index: 50;
    /* Ensure it sits above stack layers */
    margin-top: 2rem;
    /* Reduced margin instead of 4rem */
}

.nav-arrow {
    width: 60px;
    height: 60px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: #fff;
    /* Default light */
    color: #333;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.nav-arrow:hover {
    transform: scale(1.15) translateY(-2px);
    box-shadow: 0 15px 35px rgba(13, 110, 253, 0.25) !important;
}

/* Primary Arrow (Blue) */
.nav-arrow.btn-primary-arrow {
    background: var(--primary-blue) !important;
    color: #fff !important;
    box-shadow: 0 10px 25px rgba(13, 110, 253, 0.3) !important;
}

.nav-arrow.btn-primary-arrow:hover {
    background: #4a8cff !important;
}

.pagination-dots .dot {
    width: 12px;
    height: 12px;
    background: #e2e8f0;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: all 0.4s ease;
    margin: 0 4px;
}

.pagination-dots .dot.active {
    width: 50px;
    border-radius: 20px;
    background: var(--primary-blue);
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
}

/* SLIDE ANIMATIONS */
@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(100px) scale(0.9);
    }

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

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

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

.slide-enter-next {
    animation: slideInRight 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.slide-enter-prev {
    animation: slideInLeft 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}


/* 
   FOOTER SECTION 
*/
.footer-section {
    background: radial-gradient(circle at 10% 20%, #2c3e50, #1e293b);
    color: #fff;

}

.footer-section .footer-heading {
    font-weight: 700;
    letter-spacing: -1px;
}



/* Social Icons */
.footer-socials .social-icon {
    width: 45px;
    height: 45px;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

/* Staggered fade-in for social icons when parent is active */
.reveal-item.active .footer-socials .social-icon {
    animation: fadeInUp 0.6s ease forwards;
}

.footer-socials .social-icon:hover {
    background-color: #fff !important;
    color: var(--primary-dark) !important;
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
}

/* Footer Heading Animation */
.footer-heading {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal-item.active .footer-heading {
    opacity: 1;
    transform: translateY(0);
}

/* Keyframe for social icons */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Footer Links */
.hover-white {
    transition: color 0.3s ease;
}

.hover-white:hover {
    color: #fff !important;
}

/* HR Line */
hr.opacity-25 {
    opacity: 0.15 !important;
}

/* 
   SCROLL TO TOP BUTTON 
*/
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--primary-blue);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.4);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

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

.scroll-to-top:hover {
    background: #0056d2;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(13, 110, 253, 0.6);
}

.scroll-to-top:active {
    transform: translateY(-2px);
}

/* ============================================================
   DARK MODE OVERRIDES
   ============================================================ */

/* Global */
[data-theme="dark"] body {
    background-color: var(--bg-body);
    color: var(--text-body);
}

/* Bootstrap class overrides */
[data-theme="dark"] .bg-white {
    background-color: var(--bg-surface) !important;
}
[data-theme="dark"] .bg-light {
    background-color: var(--bg-surface-alt) !important;
}
[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .text-dark {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .border {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}
[data-theme="dark"] .shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

/* Navbar */
[data-theme="dark"] .navbar.scrolled {
    background: var(--navbar-bg) !important;
    border-color: var(--border-color) !important;
}

/* Section badges (pill labels) */
[data-theme="dark"] .rounded-pill.bg-white {
    background-color: var(--badge-bg) !important;
    border-color: var(--badge-border) !important;
}

/* Section headings */
[data-theme="dark"] h2[style*="primary-dark"],
[data-theme="dark"] .display-4[style*="primary-dark"],
[data-theme="dark"] .display-5[style*="primary-dark"] {
    color: var(--text-heading) !important;
}

/* Impact section */
[data-theme="dark"] .impact-section {
    background: var(--bg-body);
}
[data-theme="dark"] .impact-card {
    background: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}
[data-theme="dark"] .impact-card .card-images {
    background: var(--bg-surface-alt) !important;
}
[data-theme="dark"] .impact-card .card-images .bg-white {
    background: var(--bg-elevated) !important;
}
[data-theme="dark"] .impact-card h3 {
    color: var(--text-heading);
}
[data-theme="dark"] .impact-card .btn-link.text-muted {
    color: var(--text-muted) !important;
}

/* Feature badges */
[data-theme="dark"] .feature-badge {
    background: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-body);
}
[data-theme="dark"] .feature-badge .text {
    color: var(--text-body);
}

/* Process / Timeline */
[data-theme="dark"] .process-section {
    background: var(--bg-surface);
}
[data-theme="dark"] .timeline-content {
    background: var(--timeline-bg);
    box-shadow: var(--timeline-shadow);
}
[data-theme="dark"] .timeline-content h3 {
    color: var(--primary-blue) !important;
}
[data-theme="dark"] .timeline-content p {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .timeline-node {
    background: var(--bg-elevated);
    border-color: var(--border-color);
    color: var(--primary-blue);
}
[data-theme="dark"] .timeline-line {
    background: var(--border-color);
}

/* Leadership */
[data-theme="dark"] .leadership-section {
    background: var(--bg-body) !important;
}
[data-theme="dark"] .stack-layer {
    background: var(--bg-surface-alt);
    border-color: var(--border-color);
}

/* Controls (nav arrows, dots) */
[data-theme="dark"] .nav-arrow {
    background: var(--bg-elevated);
    color: var(--text-body);
}
[data-theme="dark"] .dot {
    background: var(--border-color);
}

/* Footer (already dark, minor tweaks) */
[data-theme="dark"] .footer-section {
    background: #060a10;
}

/* Scroll to top */
[data-theme="dark"] .scroll-to-top {
    box-shadow: 0 4px 15px rgba(21, 126, 238, 0.4);
}

/* Toolbar buttons */
.toolbar-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--badge-bg);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--theme-transition);
    font-size: 0.9rem;
    padding: 0;
    line-height: 1;
}
.toolbar-btn:hover {
    color: var(--primary-blue);
    border-color: var(--primary-blue);
    background: rgba(21, 126, 238, 0.08);
}

.lang-btn {
    width: auto;
    border-radius: 50px;
    padding: 0 14px;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    height: 38px;
    font-family: 'Cairo', 'Poppins', sans-serif;
}

/* ============================================================
   RTL (ARABIC) LAYOUT OVERRIDES
   ============================================================ */

[dir="rtl"] body {
    font-family: 'Cairo', 'Poppins', sans-serif;
    text-align: right;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .display-2, [dir="rtl"] .display-4,
[dir="rtl"] .display-5, [dir="rtl"] .display-6 {
    font-family: 'Cairo', 'Poppins', sans-serif;
}

/* Timeline RTL: swap sides */
@media (min-width: 992px) {
    [dir="rtl"] .timeline-item .col-lg-5.text-lg-end {
        text-align: start !important;
    }
    [dir="rtl"] .timeline-item .col-lg-5.pe-lg-5 {
        padding-right: 0 !important;
        padding-left: 3rem !important;
    }
    [dir="rtl"] .timeline-item .col-lg-5.ps-lg-5 {
        padding-left: 0 !important;
        padding-right: 3rem !important;
    }
}

/* Impact cards: swap image/text sides */
@media (min-width: 992px) {
    [dir="rtl"] .impact-card.flex-lg-row {
        flex-direction: row-reverse !important;
    }
    [dir="rtl"] .impact-card.flex-lg-row-reverse {
        flex-direction: row !important;
    }
}

/* Leadership card - text/image swap */
@media (min-width: 992px) {
    [dir="rtl"] .leadership-card .row.g-0 {
        flex-direction: row-reverse;
    }
}

/* Footer RTL */
@media (min-width: 992px) {
    [dir="rtl"] .footer-section .text-lg-end {
        text-align: start !important;
    }
}

@media (min-width: 768px) {
    [dir="rtl"] .footer-section .text-md-start {
        text-align: end !important;
    }
    [dir="rtl"] .footer-section .text-md-end {
        text-align: start !important;
    }
}

/* RTL list alignment */
[dir="rtl"] .list-unstyled li .fa-check-circle {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* RTL feature badges */
[dir="rtl"] .feature-badges {
    direction: rtl;
}

/* RTL CTA section */
@media (min-width: 992px) {
    [dir="rtl"] .cta-card.text-lg-start {
        text-align: start !important;
    }
    [dir="rtl"] .justify-content-lg-start {
        justify-content: flex-start !important;
    }
}

/* RTL social buttons */
[dir="rtl"] .d-flex.gap-3 {
    direction: rtl;
}

/* RTL nav \u2014 logo right, controls left */
/* RTL already reverses flex-direction, do NOT add row-reverse (double-reverse = LTR again) */
[dir="rtl"] .navbar-brand {
    margin-right: 0;
    margin-left: 1rem;
}
[dir="rtl"] .navbar .d-flex.ms-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}