/* ... */
.cinematic-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000000;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.cinematic-loader.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Dark Vignette Effect */
.loader-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center,
            transparent 0%,
            transparent 40%,
            rgba(0, 0, 0, 0.3) 70%,
            rgba(0, 0, 0, 0.8) 100%);
    pointer-events: none;
}

/* Film Grain Texture */
.loader-grain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    background-image:
        radial-gradient(circle at 25% 25%, #ffffff 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, #ffffff 1px, transparent 1px),
        radial-gradient(circle at 25% 75%, #ffffff 0.5px, transparent 0.5px),
        radial-gradient(circle at 75% 25%, #ffffff 0.5px, transparent 0.5px);
    background-size: 4px 4px, 6px 6px, 3px 3px, 5px 5px;
    background-position: 0 0, 2px 2px, 1px 3px, 3px 1px;
    animation: grain 0.8s steps(8, end) infinite;
    pointer-events: none;
}

@keyframes grain {

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

    10% {
        transform: translate(-1px, -1px);
    }

    20% {
        transform: translate(1px, 0px);
    }

    30% {
        transform: translate(-1px, 1px);
    }

    40% {
        transform: translate(1px, -1px);
    }

    50% {
        transform: translate(-1px, -1px);
    }

    60% {
        transform: translate(1px, 1px);
    }

    70% {
        transform: translate(0px, -1px);
    }

    80% {
        transform: translate(-1px, 0px);
    }

    90% {
        transform: translate(1px, 1px);
    }
}

/* Loader Content */
.loader-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* WINORAA GLOBAL Text */
.loader-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(1.2rem, 3vw, 2rem);
    font-weight: 900;
    letter-spacing: -0.01em;
    color: #ffffff;
    text-align: center;
    margin: 0;
    opacity: 1;
    animation: breathe 4s ease-in-out infinite;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Enhanced Breathing Animation */
@keyframes breathe {

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

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

/* Subtitle Text */
.loader-subtitle {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(0.7rem, 1.5vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #ffffff;
    text-align: center;
    margin: 8px 0 0 0;
    opacity: 0.8;
    animation: subtitleBreathe 4s ease-in-out infinite;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

@keyframes subtitleBreathe {

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

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

/* Loading Dots */
.loader-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 25px;
}

.dot {
    width: 6px;
    height: 6px;
    background-color: #ffffff;
    border-radius: 50%;
    opacity: 0.4;
    animation: dotPulse 2s ease-in-out infinite;
}

.dot:nth-child(1) {
    animation-delay: 0s;
}

.dot:nth-child(2) {
    animation-delay: 0.2s;
}

.dot:nth-child(3) {
    animation-delay: 0.4s;
}

.dot:nth-child(4) {
    animation-delay: 0.6s;
}

.dot:nth-child(5) {
    animation-delay: 0.8s;
}

.dot:nth-child(6) {
    animation-delay: 1s;
}

.dot:nth-child(7) {
    animation-delay: 1.2s;
}

.dot:nth-child(8) {
    animation-delay: 1.4s;
}

.dot:nth-child(9) {
    animation-delay: 1.6s;
}

.dot:nth-child(10) {
    animation-delay: 1.8s;
}

@keyframes dotPulse {

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

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

/* Responsive adjustments */
@media (max-width: 768px) {
    .loader-text {
        font-size: clamp(1rem, 4vw, 1.6rem);
        letter-spacing: -0.02em;
    }

    .loader-subtitle {
        font-size: clamp(0.6rem, 2vw, 0.9rem);
        margin: 6px 0 0 0;
    }

    .loader-dots {
        gap: 6px;
        margin-top: 20px;
    }

    .dot {
        width: 5px;
        height: 5px;
    }
}

@media (max-width: 480px) {
    .loader-text {
        font-size: clamp(0.9rem, 5vw, 1.4rem);
        letter-spacing: -0.03em;
    }

    .loader-subtitle {
        font-size: clamp(0.5rem, 2.5vw, 0.8rem);
        margin: 5px 0 0 0;
    }

    .loader-dots {
        gap: 5px;
        margin-top: 18px;
    }

    .dot {
        width: 4px;
        height: 4px;
    }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .loader-grain {
        animation: none;
    }

    .loader-text {
        animation: breatheReduced 6s ease-in-out infinite;
    }

    @keyframes breatheReduced {

        0%,
        100% {
            opacity: 0.8;
        }

        50% {
            opacity: 1;
        }
    }
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #1a237e;
    --secondary-color: #0d47a1;
    --accent-color: #1565c0;
    --text-dark: #000000;
    --text-light: #333333;
    --text-muted: #666666;
    --bg-light: #f5f5f5;
    --white: #ffffff;
    --shadow-light: 0 5px 20px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.15);
    --shadow-heavy: 0 20px 40px rgba(0, 0, 0, 0.2);
    --border-radius: 15px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    overflow-x: hidden;
    background: var(--white);
}

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

/* Enhanced Typography */
.section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 800;
    /* ExtraBold */
    margin-bottom: 1.5rem;
    color: var(--text-dark);
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 2px;
}

/* Enhanced Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 1000;
    padding: 1rem 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: none;
}

/* Default scrolled state - works for most sections */
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-light);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Dark section adaptation */
.navbar.on-dark-section {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hero section - completely transparent */
.navbar.on-hero {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-bottom: none;
}

/* Light section adaptation */
.navbar.on-light-section {
    background: rgba(248, 249, 250, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-light);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

.nav-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.nav-logo h1 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0;
    line-height: 1;
}

.nav-logo h1 a {
    text-decoration: none;
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: inline-block;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.2), 0 0 12px rgba(255, 255, 255, 0.1);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
}

.nav-tagline {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    line-height: 1;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    width: 100%;
    align-self: center;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.2), 0 0 8px rgba(255, 255, 255, 0.1);
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.2));
}

/* Logo color adaptations */
.navbar.scrolled .nav-logo h1 a,
.navbar.on-light-section .nav-logo h1 a {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 5px rgba(26, 35, 126, 0.2), 0 0 10px rgba(26, 35, 126, 0.1);
    filter: drop-shadow(0 0 3px rgba(26, 35, 126, 0.2));
}

.navbar.on-dark-section .nav-logo h1 a {
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.25), 0 0 12px rgba(255, 255, 255, 0.15);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.25));
}

.navbar.on-hero .nav-logo h1 a {
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.2), 0 0 12px rgba(255, 255, 255, 0.1);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
}

/* Tagline color adaptations */
.navbar.scrolled .nav-tagline,
.navbar.on-light-section .nav-tagline {
    color: rgba(26, 35, 126, 0.6);
    text-shadow: 0 0 4px rgba(26, 35, 126, 0.15), 0 0 8px rgba(26, 35, 126, 0.1);
    filter: drop-shadow(0 0 3px rgba(26, 35, 126, 0.2));
}

.navbar.on-dark-section .nav-tagline {
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.25), 0 0 8px rgba(255, 255, 255, 0.15);
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.25));
}

.navbar.on-hero .nav-tagline {
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.2), 0 0 8px rgba(255, 255, 255, 0.1);
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.2));
}

.nav-logo h1 a:hover {
    transform: scale(1.05);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3), 0 0 15px rgba(255, 255, 255, 0.2);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
}

.nav-logo:hover .nav-tagline {
    opacity: 1;
    transform: translateY(-1px);
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.25), 0 0 10px rgba(255, 255, 255, 0.15);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.25));
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-link {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding: 0.5rem 0;
}

/* Navigation link color adaptations */
.navbar.scrolled .nav-link,
.navbar.on-light-section .nav-link {
    color: var(--text-dark);
}

.navbar.on-dark-section .nav-link {
    color: rgba(255, 255, 255, 0.9);
}

.navbar.on-hero .nav-link {
    color: rgba(255, 255, 255, 0.9);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar.scrolled .nav-link::after,
.navbar.on-light-section .nav-link::after {
    background: var(--gradient-primary);
}

.navbar.on-dark-section .nav-link::after {
    background: rgba(255, 255, 255, 0.8);
}

.navbar.on-hero .nav-link::after {
    background: rgba(255, 255, 255, 0.8);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link:hover {
    color: rgba(255, 255, 255, 1);
}

.navbar.scrolled .nav-link:hover,
.navbar.on-light-section .nav-link:hover {
    color: var(--primary-color);
}

.navbar.on-dark-section .nav-link:hover {
    color: rgba(255, 255, 255, 1);
}

.navbar.on-hero .nav-link:hover {
    color: rgba(255, 255, 255, 1);
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 0.5rem;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.9);
    margin: 3px 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}

.navbar.scrolled .bar,
.navbar.on-light-section .bar {
    background-color: var(--text-dark);
}

.navbar.on-dark-section .bar {
    background-color: rgba(255, 255, 255, 0.9);
}

.navbar.on-hero .bar {
    background-color: rgba(255, 255, 255, 0.9);
}

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

.hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Enhanced Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 120px 20px 80px;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    overflow: hidden;
}

.hero-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: -3;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: -2;
}

.hero-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(26, 35, 126, 0.1) 50%, rgba(13, 71, 161, 0.15) 100%);
    z-index: -1;
}

/* Hero Particles - Optimized */
.hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
    animation: float 20s ease-in-out infinite;
    z-index: 0;
    will-change: transform;
    /* Performance hint */
}

/* Optimized 3D Title */
.cinematic-title {
    /* ... existing font styles ... */
    will-change: transform;
    /* Reduced shadow complexity */
    text-shadow:
        2px 2px 0 rgba(0, 0, 0, 0.2),
        4px 4px 10px rgba(0, 0, 0, 0.3);
}

.story-title h1 {
    /* ... existing font styles ... */
    will-change: transform;
    /* Significantly reduced shadow layers - from 12+ to 4 efficient layers */
    text-shadow:
        1px 1px 0 #333,
        2px 2px 0 #444,
        3px 3px 0 #555,
        4px 4px 10px rgba(0, 0, 0, 0.3);

    /* Simplified gradient */
    background: linear-gradient(135deg, #000 0%, #333 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    animation: float3D 6s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.story-title h1:hover {
    transform: rotateX(5deg) rotateY(-5deg) scale(1.02);
    /* Simplified hover shadow */
    text-shadow:
        2px 2px 0 #333,
        4px 4px 0 #444,
        6px 6px 15px rgba(0, 0, 0, 0.3);
}

/* Optimized Event Text 3D */
.event-text {
    will-change: transform;
    /* Reduced layers */
    text-shadow:
        2px 2px 0 rgba(255, 255, 255, 0.05),
        4px 4px 0 rgba(255, 255, 255, 0.03),
        6px 6px 20px rgba(0, 0, 0, 0.2);
}

@keyframes float {

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

    33% {
        transform: translateY(-20px) rotate(1deg);
    }

    66% {
        transform: translateY(-10px) rotate(-1deg);
    }
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 1;
}

.cinematic-text-overlay {
    position: relative;
    z-index: 2;
    text-align: center;
    animation: fadeInCinematic 2s ease-out 0.5s both;
    width: 100%;
}

.cinematic-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    line-height: 1;
    text-transform: uppercase;

    /* Subtle text shadow */
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.3),
        2px 2px 0 rgba(0, 0, 0, 0.2),
        3px 3px 10px rgba(0, 0, 0, 0.4);

    /* Subtle glow */
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));

    /* Minimal 3D transform */
    transform: perspective(1000px) rotateX(2deg);
    transform-style: preserve-3d;
}

.cinematic-subtitle {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(0.7rem, 1.2vw, 1rem);
    font-weight: 600;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.9);
    margin: 1.5rem 0 0 0;
    text-transform: uppercase;

    /* Enhanced shadow for brightness */
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.5),
        2px 2px 5px rgba(0, 0, 0, 0.4),
        0 0 10px rgba(255, 255, 255, 0.3);

    /* Enhanced glow */
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));

    /* Animation delay */
    animation: fadeInCinematic 2s ease-out 1s both;
}

.hero-stats-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    animation: fadeInCinematic 2s ease-out 1.5s both;
}

.stat-item-overlay {
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.stat-number-container {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.2rem;
    min-width: 120px;
}

.stat-number-overlay {
    display: inline-block;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.5),
        2px 2px 5px rgba(0, 0, 0, 0.4);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1));
    min-width: auto;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Timer-like digit roller container */
.timer-counter {
    position: relative;
    height: 1.2em;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
}

.digit-roller {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.digit-strip {
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.digit {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.2em;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    text-shadow: inherit;
    line-height: 1;
}

/* Rolling animation states */
.rolling-active {
    background: rgba(255, 255, 255, 0.05);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.3),
        0 0 10px rgba(255, 255, 255, 0.1);
}

.rolling-active .digit-strip {
    animation: timerGlow 0.1s ease-in-out infinite alternate;
}

/* Enhanced effects for small numbers (like 3) */
.small-number-rolling {
    background: rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 4px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(255, 255, 255, 0.15),
        0 0 25px rgba(255, 255, 255, 0.05);
}

.small-number-rolling .digit-strip {
    animation: smallNumberGlow 0.12s ease-in-out infinite alternate;
}

.timer-complete {
    background: rgba(255, 255, 255, 0.02);
    animation: completeFlash 0.6s ease-out;
}

.small-number-complete {
    animation: smallNumberComplete 0.8s ease-out;
}

/* Timer glow effect during rolling */
@keyframes timerGlow {
    0% {
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1));
    }

    100% {
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
    }
}

/* Enhanced glow for small numbers */
@keyframes smallNumberGlow {
    0% {
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.15));
        transform: scale(1);
    }

    100% {
        filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.25));
        transform: scale(1.02);
    }
}

/* Completion flash effect */
@keyframes completeFlash {
    0% {
        background: rgba(255, 255, 255, 0.02);
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
    }

    30% {
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    }

    100% {
        background: rgba(255, 255, 255, 0.02);
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
    }
}

/* Enhanced completion for small numbers */
@keyframes smallNumberComplete {
    0% {
        background: rgba(255, 255, 255, 0.02);
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
        transform: scale(1);
    }

    20% {
        background: rgba(255, 255, 255, 0.12);
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
        transform: scale(1.05);
    }

    50% {
        background: rgba(255, 255, 255, 0.08);
        box-shadow: 0 0 25px rgba(255, 255, 255, 0.3);
        transform: scale(1.03);
    }

    100% {
        background: rgba(255, 255, 255, 0.02);
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
        transform: scale(1);
    }
}

/* Enhanced plus sign for timer effect */
.stat-plus {
    display: inline-block;
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.5),
        2px 2px 5px rgba(0, 0, 0, 0.4);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1));
    transform: translateY(2px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Mobile counter styles */
.mobile-counter {
    display: inline-block;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.5),
        2px 2px 5px rgba(0, 0, 0, 0.4);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1));
    transition: all 0.1s ease;
    transform-origin: center center;
}

.mobile-rolling {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.6),
        2px 2px 8px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(255, 255, 255, 0.2);
}

.mobile-complete {
    animation: mobileCompleteFlash 0.5s ease-out;
}

@keyframes mobileCompleteFlash {
    0% {
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1));
        text-shadow:
            1px 1px 0 rgba(0, 0, 0, 0.5),
            2px 2px 5px rgba(0, 0, 0, 0.4);
    }

    50% {
        filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));
        text-shadow:
            1px 1px 0 rgba(0, 0, 0, 0.7),
            2px 2px 10px rgba(0, 0, 0, 0.6),
            0 0 15px rgba(255, 255, 255, 0.3);
    }

    100% {
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.15));
        text-shadow:
            1px 1px 0 rgba(0, 0, 0, 0.5),
            2px 2px 5px rgba(0, 0, 0, 0.4),
            0 0 8px rgba(255, 255, 255, 0.1);
    }
}





.stat-label-overlay {
    font-size: clamp(0.6rem, 1vw, 0.8rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.6),
        2px 2px 5px rgba(0, 0, 0, 0.5),
        0 0 8px rgba(255, 255, 255, 0.2);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.15));
}

@keyframes fadeInCinematic {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotateX(5deg) translateY(20px);
        filter: blur(2px);
    }

    100% {
        opacity: 1;
        transform: perspective(1000px) rotateX(2deg) translateY(0);
        filter: blur(0px);
    }
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    opacity: 0;
    transform: translateY(30px);
}

.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    margin-bottom: 2rem;
    opacity: 0.9;
    line-height: 1.6;
    transform: translateY(30px);
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    transform: translateY(30px);
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    transform: translateY(30px);
}

.hero-stats .stat-item {
    text-align: center;
}

.hero-stats .stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: white;
}

.hero-stats .stat-label {
    font-size: 0.9rem;
    opacity: 0.8;
    color: white;
}

/* Animation classes */
.animate-on-load {
    animation: slideInUp 0.8s ease-out forwards;
}

.animate-on-load:nth-child(1) {
    animation-delay: 0.2s;
}

.animate-on-load:nth-child(2) {
    animation-delay: 0.4s;
}

.animate-on-load:nth-child(3) {
    animation-delay: 0.6s;
}

.animate-on-load:nth-child(4) {
    animation-delay: 0.8s;
}

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

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

/* Enhanced Buttons */
.btn {
    padding: 12px 30px;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: var(--white);
    color: var(--primary-color);
    box-shadow: var(--shadow-light);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-secondary:hover {
    background: white;
    color: var(--primary-color);
}

.btn-small {
    padding: 8px 20px;
    font-size: 0.9rem;
}

.btn-large {
    padding: 15px 40px;
    font-size: 1.1rem;
}

.btn-full {
    width: 100%;
    justify-content: center;
}

.btn-white {
    background: white;
    color: var(--primary-color);
}

.btn-outline {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.pulse-on-hover:hover {
    animation: pulse 0.6s ease-in-out;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

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

/* Enhanced Video Section */
.hero-video {
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 500px;
}

.video-placeholder {
    width: 100%;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
}

.video-placeholder:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-heavy);
}

.play-button {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    backdrop-filter: blur(10px);
}

.play-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.video-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
}

.video-overlay p {
    font-weight: 600;
    font-size: 1.1rem;
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    animation: bounce 2s infinite;
}

.scroll-arrow {
    width: 20px;
    height: 20px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(45deg);
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

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

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* Custom About Section Heading */
#about .heading-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
}

/* Story Section */
.story-section {
    padding: 100px 20px;
    background: #eaeff2;
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    /* Subtle clean transition instead of overlap */
}

.story-content {
    max-width: 800px;
    margin: 0 auto;
}

.story-text {
    margin-bottom: 3rem;
}

.story-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #333;
}

.story-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: #666;
}

/* Services Section - Checkerboard Redesign */
.services-section {
    padding: 130px 20px 100px;
    background-color: #A9A9A9 !important;
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
    position: relative;
    z-index: 4;
    margin-top: -80px;
}

.services-checkerboard {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto 4rem;
}

.service-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: stretch;
    height: 500px;
    /* Fixed height for consistent box sizes on desktop */
}

.service-visual {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

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

.service-row:hover .service-visual img {
    transform: scale(1.05);
}

.service-info-card {
    background-color: #4dabf7;
    /* Vibrant Lime Green from reference */
    border-radius: 30px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    color: #000;
    /* Black text for contrast */
    box-shadow: 0 10px 30px rgba(77, 171, 247, 0.3);
    transition: transform 0.3s ease;
    height: 100%;
    /* Ensure it fills the row height */
}

.service-row:hover .service-info-card {
    transform: translateY(-5px);
}

/* Services Text Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.service-info-card h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 25px;
    color: #000;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    line-height: 1.1;
    opacity: 1;
    /* Default to visible to prevent 'not showing' issues */
}

/* When the row is in view (handled by JS IntersectionObserver adding 'visible' class) */
.service-row.visible .service-info-card h3 {
    animation-play-state: running;
    animation-delay: 0.2s;
}

.service-list li {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    color: #1a1a1a;
    opacity: 1;
    /* Default to visible */
    transform: translateY(0);
    transition: all 0.5s ease;
}

.service-row.visible .service-list li {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for list items */
.service-row.visible .service-list li:nth-child(1) {
    transition-delay: 0.3s;
}

.service-row.visible .service-list li:nth-child(2) {
    transition-delay: 0.4s;
}

.service-row.visible .service-list li:nth-child(3) {
    transition-delay: 0.5s;
}

.service-row.visible .service-list li:nth-child(4) {
    transition-delay: 0.6s;
}

.explore-link {
    font-size: 1.1rem;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    transition: transform 0.3s ease;
    opacity: 1;
}

.service-row.visible .explore-link {
    opacity: 1;
    transition: opacity 0.5s ease 0.7s, transform 0.3s ease;
}

.explore-link:hover {
    transform: translateX(5px);
    text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .service-row {
        grid-template-columns: 1fr;
        height: auto;
        min-height: auto;
        gap: 0;
        /* Remove gap to make them stack perfectly same width */
        margin-bottom: 40px;
    }

    /* Force image to be on top for all rows on mobile */
    .service-row.reverse-layout .service-visual {
        order: -1;
    }

    .service-visual,
    .service-info-card {
        aspect-ratio: 1 / 1;
        /* Force square shape for same size look on mobile */
        height: auto;
        width: 100%;
        border-radius: 20px;
    }

    .service-visual {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .service-info-card {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        padding: 30px;
        justify-content: center;
    }

    .service-info-card h3 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }

    .service-list li {
        font-size: 0.95rem;
        margin-bottom: 8px;
    }
}

/* Events Section */
.events-section {
    padding: 130px 20px 100px;
    background: #f8f9fa;
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
    position: relative;
    z-index: 6;
    margin-top: -80px;
}

.events-section h2 {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: #333;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.event-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.event-card:hover {
    transform: translateY(-5px);
}

.event-image {
    height: 200px;
    overflow: hidden;
}

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

/* Duplicated Event Content Styles Removed */

/* Contact Section Animation Classes */
.animate-fade-in {
    opacity: 0;
    animation: fadeIn 0.8s ease-out forwards;
}

.animate-slide-up {
    opacity: 0;
    transform: translateY(30px);
    animation: slideUp 0.8s ease-out forwards;
}

.animate-slide-right {
    opacity: 0;
    transform: translateX(-30px);
    animation: slideRight 0.8s ease-out forwards;
}

.animate-bounce {
    opacity: 0;
    transform: scale(0.8);
    animation: bounceIn 0.6s ease-out forwards;
}

/* Animation Keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }

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

/* Contact Section */
.contact-section {
    padding: 130px 20px 100px;
    background: white;
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
    position: relative;
    z-index: 10;
    margin-top: -80px;
    /* Slight overlap to show the curve better */
}

.contact-section.dark-section {
    background: #2a2a2a;
    color: white;
}

/* Contact Section Landscape Layout */
.contact-content-landscape {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.contact-header-landscape {
    width: 100%;
    max-width: 800px;
}

.contact-tagline {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #7cb342;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.contact-title-landscape {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 2rem;
    color: white;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;

    /* Enhanced 3D container */
    transform-style: preserve-3d;
    perspective: 1200px;
}

.title-line {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;

    /* Add padding to accommodate 3D transforms */
    padding: 0 2rem;
    margin: 0.5rem 0;
}

.contact-title-landscape span {
    display: inline-block;
}

.event-text {
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.6);
    font-weight: 300;
    opacity: 0.5;

    /* Enhanced 3D Effect */
    transform: perspective(1000px) rotateY(-15deg) rotateX(5deg);
    text-shadow:
        /* Multiple layers for depth - more transparent */
        2px 2px 0 rgba(255, 255, 255, 0.05),
        4px 4px 0 rgba(255, 255, 255, 0.04),
        6px 6px 0 rgba(255, 255, 255, 0.03),
        8px 8px 0 rgba(255, 255, 255, 0.02),
        10px 10px 0 rgba(255, 255, 255, 0.01),
        /* Shadow for depth */
        12px 12px 20px rgba(0, 0, 0, 0.3),
        16px 16px 30px rgba(0, 0, 0, 0.15);

    /* Additional 3D styling */
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.05));
    transform-style: preserve-3d;
    transition: all 0.3s ease;
}

/* Right side EVENT - mirror the 3D effect */
.title-line .event-text:last-child {
    transform: perspective(1000px) rotateY(15deg) rotateX(5deg);
    text-shadow:
        /* Multiple layers for depth - reversed direction, more transparent */
        -2px 2px 0 rgba(255, 255, 255, 0.05),
        -4px 4px 0 rgba(255, 255, 255, 0.04),
        -6px 6px 0 rgba(255, 255, 255, 0.03),
        -8px 8px 0 rgba(255, 255, 255, 0.02),
        -10px 10px 0 rgba(255, 255, 255, 0.01),
        /* Shadow for depth */
        -12px 12px 20px rgba(0, 0, 0, 0.3),
        -16px 16px 30px rgba(0, 0, 0, 0.15);
}

/* Hover effect for enhanced 3D */
.event-text:hover {
    transform: perspective(1000px) rotateY(-20deg) rotateX(8deg) translateZ(10px);
    opacity: 0.8;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.8);
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.1));
}

.title-line .event-text:last-child:hover {
    transform: perspective(1000px) rotateY(20deg) rotateX(8deg) translateZ(10px);
}

.event-bold {
    color: white;
    font-weight: 900;
}

.title-large {
    font-size: 1.4em;
    font-weight: 900;
    color: white;
}

.contact-cta-btn {
    background: #7cb342;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contact-cta-btn:hover {
    background: #689f38;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(124, 179, 66, 0.3);
}

.contact-social-landscape {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.contact-social-landscape h4 {
    color: white;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.social-links-landscape {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}

.social-link-landscape {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-link-landscape:hover {
    background: #7cb342;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(124, 179, 66, 0.3);
}

.journey-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    font-style: italic;
}

/* Mobile Responsive for Landscape Layout */
@media (max-width: 768px) {
    .contact-content-landscape {
        gap: 2rem;
    }

    .contact-title-landscape {
        font-size: clamp(2rem, 8vw, 3rem);
        /* Maintain 3D container on mobile */
        transform-style: preserve-3d;
        perspective: 1000px;
    }

    .title-line {
        gap: 0.3rem;
        /* Maintain 3D spacing on mobile */
        padding: 0 1rem;
        margin: 0.3rem 0;
    }

    /* Preserve 3D effects on mobile - adjust for smaller screens */
    .event-text {
        /* Slightly reduced 3D effect for mobile but still visible and transparent */
        transform: perspective(800px) rotateY(-12deg) rotateX(4deg);
        opacity: 0.4;
        -webkit-text-stroke: 2px rgba(255, 255, 255, 0.5);
        text-shadow:
            /* Adjusted shadows for mobile - more transparent */
            1px 1px 0 rgba(255, 255, 255, 0.04),
            2px 2px 0 rgba(255, 255, 255, 0.03),
            3px 3px 0 rgba(255, 255, 255, 0.02),
            4px 4px 0 rgba(255, 255, 255, 0.01),
            5px 5px 0 rgba(255, 255, 255, 0.005),
            /* Depth shadows */
            6px 6px 15px rgba(0, 0, 0, 0.3),
            8px 8px 20px rgba(0, 0, 0, 0.15);
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.04));
    }

    /* Right side EVENT - mobile 3D effect */
    .title-line .event-text:last-child {
        transform: perspective(800px) rotateY(12deg) rotateX(4deg);
        text-shadow:
            /* Reversed shadows for mobile - more transparent */
            -1px 1px 0 rgba(255, 255, 255, 0.04),
            -2px 2px 0 rgba(255, 255, 255, 0.03),
            -3px 3px 0 rgba(255, 255, 255, 0.02),
            -4px 4px 0 rgba(255, 255, 255, 0.01),
            -5px 5px 0 rgba(255, 255, 255, 0.005),
            /* Depth shadows */
            -6px 6px 15px rgba(0, 0, 0, 0.3),
            -8px 8px 20px rgba(0, 0, 0, 0.15);
    }

    /* Mobile hover effects - slightly reduced */
    .event-text:hover {
        transform: perspective(800px) rotateY(-15deg) rotateX(6deg) translateZ(8px);
        opacity: 0.7;
        -webkit-text-stroke: 2px rgba(255, 255, 255, 0.7);
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.08));
    }

    .title-line .event-text:last-child:hover {
        transform: perspective(800px) rotateY(15deg) rotateX(6deg) translateZ(8px);
    }

    .social-links-landscape {
        gap: 1rem;
    }

    .social-link-landscape {
        width: 45px;
        height: 45px;
    }

    /* Reduce animation delays on mobile */
    .animate-slide-up,
    .animate-slide-right,
    .animate-fade-in,
    .animate-bounce {
        animation-delay: 0s !important;
    }
}

/* Extra small mobile devices - maintain 3D but optimize further */
@media (max-width: 480px) {
    .contact-title-landscape {
        font-size: clamp(1.8rem, 9vw, 2.5rem);
        perspective: 800px;
    }

    .title-line {
        gap: 0.2rem;
        padding: 0 0.5rem;
        margin: 0.2rem 0;
    }

    /* Optimized 3D for very small screens */
    .event-text {
        transform: perspective(600px) rotateY(-10deg) rotateX(3deg);
        opacity: 0.35;
        -webkit-text-stroke: 2px rgba(255, 255, 255, 0.4);
        text-shadow:
            1px 1px 0 rgba(255, 255, 255, 0.03),
            2px 2px 0 rgba(255, 255, 255, 0.02),
            3px 3px 0 rgba(255, 255, 255, 0.01),
            4px 4px 10px rgba(0, 0, 0, 0.25),
            6px 6px 15px rgba(0, 0, 0, 0.15);
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.03));
    }

    .title-line .event-text:last-child {
        transform: perspective(600px) rotateY(10deg) rotateX(3deg);
        text-shadow:
            -1px 1px 0 rgba(255, 255, 255, 0.03),
            -2px 2px 0 rgba(255, 255, 255, 0.02),
            -3px 3px 0 rgba(255, 255, 255, 0.01),
            -4px 4px 10px rgba(0, 0, 0, 0.25),
            -6px 6px 15px rgba(0, 0, 0, 0.15);
    }

    /* Simplified hover for small screens */
    .event-text:hover {
        transform: perspective(600px) rotateY(-12deg) rotateX(4deg) translateZ(5px);
        opacity: 0.6;
        -webkit-text-stroke: 2px rgba(255, 255, 255, 0.6);
    }

    .title-line .event-text:last-child:hover {
        transform: perspective(600px) rotateY(12deg) rotateX(4deg) translateZ(5px);
    }
}

/* Touch device optimizations for 3D effects */
@media (hover: none) and (pointer: coarse) {

    /* Mobile touch devices - optimize 3D for touch */
    .event-text {
        /* Ensure 3D effects are visible without hover but more transparent */
        opacity: 0.4;
        -webkit-text-stroke: 2px rgba(255, 255, 255, 0.5);
        transition: all 0.2s ease;
    }

    /* Touch-friendly active states */
    .event-text:active {
        transform: perspective(800px) rotateY(-18deg) rotateX(6deg) translateZ(8px);
        opacity: 0.8;
        -webkit-text-stroke: 2px rgba(255, 255, 255, 0.8);
        filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.1));
    }

    .title-line .event-text:last-child:active {
        transform: perspective(800px) rotateY(18deg) rotateX(6deg) translateZ(8px);
    }
}

.contact-section.dark-section {
    background: #2a2a2a;
    color: white;
}

.contact-content-modern {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-header-modern {
    flex: 1;
    max-width: 500px;
}

.contact-tagline {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #7cb342;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.contact-title-modern {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 2rem;
    color: white;
    text-transform: uppercase;
}

.contact-title-modern span {
    display: inline-block;
}

.contact-cta-btn {
    background: #7cb342;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contact-cta-btn:hover {
    background: #689f38;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(124, 179, 66, 0.3);
}

.contact-info-modern {
    flex: 1;
    max-width: 400px;
}

.contact-details-modern {
    margin-bottom: 3rem;
}

.contact-item-modern {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.contact-item-modern:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

.contact-icon-modern {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-icon-modern.email-icon {
    background: #1a237e;
}

.contact-icon-modern.phone-icon {
    background: #0d47a1;
}

.contact-icon-modern.location-icon {
    background: #1565c0;
}

.contact-icon-modern.warehouse-icon {
    background: #7cb342;
}

.contact-text-modern {
    color: white;
    font-size: 1rem;
}

.contact-link {
    color: #7cb342 !important;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: #689f38 !important;
}

.contact-social-modern h4 {
    color: white;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.social-links-modern {
    display: flex;
    gap: 1rem;
}

.social-link-modern {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-link-modern:hover {
    background: #7cb342;
    transform: translateY(-2px);
}

/* Mobile Responsive for Contact Section */
@media (max-width: 768px) {
    .contact-content-modern {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .contact-header-modern,
    .contact-info-modern {
        max-width: 100%;
    }

    .contact-title-modern {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .contact-item-modern {
        justify-content: center;
        text-align: left;
    }

    .social-links-modern {
        justify-content: center;
    }

    /* Reduce animation delays on mobile */
    .animate-slide-up,
    .animate-slide-right,
    .animate-fade-in,
    .animate-bounce {
        animation-delay: 0s !important;
    }
}

/* Mobile Responsive for Contact Details Modal */
@media (max-width: 768px) {
    .floating-contact-btn {
        bottom: 20px;
        right: 20px;
        width: 70px;
        height: 70px;
    }

    .connect-text {
        font-size: 0.6rem;
        letter-spacing: 0.3px;
    }

    .contact-modal-content {
        width: 95%;
        margin: 10px;
    }

    .contact-modal-header {
        padding: 25px 20px;
    }

    .contact-modal-body {
        padding: 25px 20px;
    }

    .contact-details-modal-content {
        width: 95%;
        margin: 10px;
    }

    .contact-details-header {
        padding: 25px 20px;
    }

    .contact-details-body {
        padding: 25px 20px;
    }

    .contact-detail-item {
        padding: 15px;
        gap: 15px;
    }

    .contact-detail-icon {
        width: 45px;
        height: 45px;
    }

    .contact-details-grid {
        gap: 15px;
    }
}

/* Footer */
.footer {
    background: #111;
    color: white;
    padding: 80px 0 40px;
    position: relative;
    z-index: 12;
    /* Highest z-index to sit on top of everything */
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3,
.footer-section h4 {
    margin-bottom: 1rem;
    color: #667eea;
}

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

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: #667eea;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #555;
    color: #999;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: white;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 2rem 0;
    }

    .nav-menu.active {
        left: 0;
    }

    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

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

    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .contact-section {
        padding-bottom: 200px;
        /* Ensure footer curve doesn't cover content on mobile */
    }

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

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

/* Services Page Styles */
.services-hero {
    padding: 150px 20px 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
}

.services-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.services-hero p {
    font-size: 1.2rem;
    max-width: 900px;
    margin: 0 auto;
    opacity: 0.9;
    line-height: 1.6;
}

.detailed-services {
    padding: 100px 20px;
    background: white;
}

.service-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 6rem;
}

.service-detail.reverse {
    direction: rtl;
}

.service-detail.reverse>* {
    direction: ltr;
}

.service-content h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #333;
}

.service-content p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.service-content ul {
    list-style: none;
    padding: 0;
}

.service-content ul li {
    padding: 0.5rem 0;
    color: #666;
    position: relative;
    padding-left: 1.5rem;
}

.service-content ul li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #667eea;
    font-weight: bold;
}

.service-image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.service-categories {
    padding: 100px 20px;
    background: #f8f9fa;
}

.service-categories h2 {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: #333;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.category-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.category-card:hover {
    transform: translateY(-5px);
}

.category-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #667eea;
}

/* Mini Marquee for Service Cards ("Like Context") */
@keyframes serviceMarquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.category-card p {
    color: #666;
    line-height: 1.6;
}

.services-cta {
    padding: 100px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
}

.services-cta h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.services-cta p {
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto 2rem;
    opacity: 0.9;
    line-height: 1.8;
}

/* Responsive adjustments for services page */
@media (max-width: 768px) {
    .services-hero h1 {
        font-size: 2.2rem;
    }

    .service-detail {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 4rem;
    }

    .service-detail.reverse {
        direction: ltr;
    }

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

    .services-cta h2 {
        font-size: 2rem;
    }
}

/* Contact Page Styles */
.contact-hero {
    padding: 150px 20px 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
}

.contact-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.contact-hero p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.9;
    line-height: 1.6;
}

.contact-main {
    padding: 100px 20px;
    background: white;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.contact-info-section h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #333;
}

.contact-info-section>p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 3rem;
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-method {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.method-icon {
    font-size: 2rem;
    width: 60px;
    height: 60px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.method-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}

.method-content p {
    color: #666;
    margin-bottom: 0.25rem;
}

.form-container {
    background: #f8f9fa;
    padding: 3rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.form-container h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #333;
    text-align: center;
}

.contact-form-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

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

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

.form-group label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.checkbox-group {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: normal;
}

.checkbox-label input[type="checkbox"] {
    margin: 0;
}

.btn-full {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
}

.map-section {
    padding: 100px 20px;
    background: #f8f9fa;
}

.map-section h2 {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: #333;
}

.map-placeholder {
    height: 400px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}

.map-content h3 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.map-content p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 0.5rem;
}

.faq-section {
    padding: 100px 20px;
    background: white;
}

.faq-section h2 {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: #333;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.faq-item {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 15px;
    transition: transform 0.3s ease;
}

.faq-item:hover {
    transform: translateY(-5px);
}

.faq-item h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
}

.faq-item p {
    color: #666;
    line-height: 1.6;
}

/* Responsive adjustments for contact page */
@media (max-width: 768px) {
    .contact-hero h1 {
        font-size: 2.2rem;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .form-container {
        padding: 2rem;
    }

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

    .contact-methods {
        gap: 1.5rem;
    }

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

/* About Page Styles */
.about-hero {
    padding: 150px 20px 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
}

.about-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.about-hero p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.9;
    line-height: 1.6;
}

.story-timeline {
    padding: 100px 20px;
    background: white;
}

.timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #667eea;
    transform: translateX(-50%);
}

.timeline-item {
    display: flex;
    align-items: center;
    margin-bottom: 4rem;
    position: relative;
}

.timeline-item:nth-child(odd) {
    flex-direction: row;
}

.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline-year {
    width: 100px;
    height: 100px;
    background: #667eea;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.timeline-content {
    flex: 1;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 15px;
    margin: 0 2rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.timeline-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
}

.timeline-content p {
    color: #666;
    line-height: 1.6;
}

.mission-vision {
    padding: 100px 20px;
    background: #f8f9fa;
}

.mv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
}

.mv-item {
    text-align: center;
    background: white;
    padding: 3rem 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.mv-item:hover {
    transform: translateY(-5px);
}

.mv-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.mv-item h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #333;
}

.mv-item p {
    color: #666;
    line-height: 1.8;
}

.team-section {
    padding: 100px 20px;
    background: white;
}

.team-section h2 {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #333;
}

.team-intro {
    text-align: center;
    font-size: 1.1rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto 3rem;
    line-height: 1.6;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.team-member {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    transition: transform 0.3s ease;
}

.team-member:hover {
    transform: translateY(-5px);
}

.member-photo {
    width: 150px;
    height: 150px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    overflow: hidden;
}

.member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-info h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}

.member-role {
    color: #667eea;
    font-weight: 600;
    margin-bottom: 1rem;
}

.member-bio {
    color: #666;
    line-height: 1.6;
}

.stats-section {
    padding: 100px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
}

.stats-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.stat-item {
    padding: 2rem;
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: white;
}

.stat-label {
    font-size: 1.1rem;
    opacity: 0.9;
}

.brands-section {
    padding: 100px 20px;
    background: #f8f9fa;
}

.brands-section h2 {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: #333;
}

.brands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.brand-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.brand-card:hover {
    transform: translateY(-5px);
}

.brand-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #667eea;
}

.brand-card p {
    color: #666;
    line-height: 1.6;
}

/* Responsive adjustments for about page */
@media (max-width: 768px) {
    .about-hero h1 {
        font-size: 2.2rem;
    }

    .timeline::before {
        left: 30px;
    }

    .timeline-item {
        flex-direction: row !important;
        align-items: flex-start;
    }

    .timeline-year {
        width: 60px;
        height: 60px;
        font-size: 1rem;
        margin-right: 2rem;
    }

    .timeline-content {
        margin: 0;
    }

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

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

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

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

/* Enhanced Story Section */
.story-section {
    padding: 100px 20px;
    background: var(--white);
    position: relative;
}

.story-content {
    max-width: 1200px;
    margin: 0 auto;
}

.story-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.story-title h1 {
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 900;
    line-height: 0.9;
    color: #000;
    margin: 0;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;

    /* 3D Black Text Shadow Effect */
    text-shadow:
        1px 1px 0 #333,
        2px 2px 0 #444,
        3px 3px 0 #555,
        4px 4px 0 #666,
        5px 5px 0 #777,
        6px 6px 1px rgba(0, 0, 0, .3),
        0 0 5px rgba(0, 0, 0, .2),
        1px 1px 3px rgba(0, 0, 0, .5),
        3px 3px 5px rgba(0, 0, 0, .4),
        5px 5px 10px rgba(0, 0, 0, .35),
        10px 10px 10px rgba(0, 0, 0, .3),
        20px 20px 20px rgba(0, 0, 0, .25);

    /* Black gradient text fill */
    background: linear-gradient(135deg, #000 0%, #333 50%, #000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    /* Animation */
    animation: float3D 6s ease-in-out infinite;
    transition: all 0.3s ease;
}

.story-title h1:hover {
    transform: rotateX(5deg) rotateY(-5deg) scale(1.02);
    text-shadow:
        2px 2px 0 #333,
        4px 4px 0 #444,
        6px 6px 0 #555,
        8px 8px 0 #666,
        10px 10px 0 #777,
        12px 12px 2px rgba(0, 0, 0, .4),
        0 0 10px rgba(0, 0, 0, .3),
        2px 2px 6px rgba(0, 0, 0, .6),
        6px 6px 10px rgba(0, 0, 0, .5),
        10px 10px 20px rgba(0, 0, 0, .45),
        20px 20px 20px rgba(0, 0, 0, .4),
        40px 40px 40px rgba(0, 0, 0, .35);
}

/* 3D Float Animation */
@keyframes float3D {

    0%,
    100% {
        transform: rotateX(0deg) rotateY(0deg) translateZ(0px);
    }

    25% {
        transform: rotateX(2deg) rotateY(-1deg) translateZ(5px);
    }

    50% {
        transform: rotateX(-1deg) rotateY(2deg) translateZ(10px);
    }

    75% {
        transform: rotateX(1deg) rotateY(-2deg) translateZ(5px);
    }
}

/* Enhanced 3D effect for individual letters */
.story-title h1 span {
    display: inline-block;
    transition: all 0.3s ease;
    transform-style: preserve-3d;
}

.story-title h1:hover span:nth-child(odd) {
    transform: translateZ(10px) rotateY(5deg);
}

.story-title h1:hover span:nth-child(even) {
    transform: translateZ(-5px) rotateY(-3deg);
}

.story-details {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.story-item {
    opacity: 0;
    transform: translateY(30px);
    transition: var(--transition);
}

.story-item.animate {
    opacity: 1;
    transform: translateY(0);
}

.story-item h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-dark);
    line-height: 1.3;
}

.story-item p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-light);
    margin: 0;
}

.story-text {
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(30px);
    transition: var(--transition);
}

.story-text.animate {
    opacity: 1;
    transform: translateY(0);
}

.story-text h2 {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
    position: relative;
}

.story-text h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 2px;
}

.story-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: var(--text-light);
}

/* Services Section */
.services-section {
    padding: 100px 20px;
    background: #ffffff;
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
    position: relative;
    z-index: 8;
    margin-top: -40px;
}

.careers-section {
    padding: 130px 20px 100px;
    background: #ffffff;
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
    position: relative;
    z-index: 8;
    margin-top: -80px;
}

.services-header {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.services-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #333;
}

.services-header p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.8;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.service-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-image {
    height: 200px;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

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

.service-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
}

.service-card p {
    color: #666;
    line-height: 1.6;
}

.services-grid-mobile {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 400px;
    margin: 0 auto;
    transform-style: preserve-3d;
}

.service-card-mobile {
    background: #1a1a1a;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    min-height: 200px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
}

.service-card-mobile:hover {
    transform: translate3d(0px, -10px, 20px) scale3d(1.02, 1.02, 1) rotateX(2deg) rotateY(1deg) rotateZ(0deg) skew(0deg, 0deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.service-image-mobile {
    flex: 1;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

.service-image-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s ease;
    transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
}

.service-card-mobile:hover .service-image-mobile img {
    transform: translate3d(0px, 0%, 0px) scale3d(1.08, 1.08, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
}

.service-overlay-text {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    transition: all 0.3s ease;
}

.service-card-mobile:hover .service-overlay-text {
    transform: translate3d(0px, -3px, 5px) scale3d(1.05, 1.05, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
}

.service-info-mobile {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transform-style: preserve-3d;
}

.service-info-mobile h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 15px 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    transition: all 0.3s ease;
}

.service-card-mobile:hover .service-info-mobile h3 {
    transform: translate3d(0px, -2px, 8px) scale3d(1.03, 1.03, 1) rotateX(1deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
}

.service-info-mobile ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    flex-grow: 1;
    transform-style: preserve-3d;
}

.service-info-mobile ul li {
    font-size: 0.8rem;
    margin-bottom: 5px;
    opacity: 0.9;
    line-height: 1.3;
    transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    transition: all 0.2s ease;
}

.service-card-mobile:hover .service-info-mobile ul li {
    transform: translate3d(2px, 0%, 3px) scale3d(1.01, 1.01, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
}

.service-btn {
    background: #8bc34a;
    color: #000;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    line-height: 1.2;
    align-self: flex-start;
    min-width: 80px;
    transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
}

.service-btn:hover {
    background: #9ccc65;
    transform: translate3d(0px, -4px, 10px) scale3d(1.05, 1.05, 1) rotateX(-2deg) rotateY(1deg) rotateZ(0deg) skew(0deg, 0deg);
    box-shadow: 0 8px 20px rgba(139, 195, 74, 0.4);
}

/* MICE Card Specific */
.mice-card {
    flex-direction: row;
}

.mice-info {
    background: #8bc34a;
    color: #000;
}

.mice-info h3 {
    color: #000;
}

.mice-info ul li {
    color: #000;
    opacity: 0.8;
}

.mice-btn {
    background: #000;
    color: #8bc34a;
}

.mice-btn:hover {
    background: #333;
}

/* Events Card Specific */
.events-card {
    flex-direction: row-reverse;
}

.events-info {
    background: #8bc34a;
    color: #000;
}

.events-info h3 {
    color: #000;
}

.events-info ul li {
    color: #000;
    opacity: 0.8;
}

.events-btn {
    background: #000;
    color: #8bc34a;
}

.events-btn:hover {
    background: #333;
}

/* Digital Services Card Specific */
.digital-card {
    flex-direction: row;
}

.digital-info {
    background: #8bc34a;
    color: #000;
}

.digital-info h3 {
    color: #000;
}

.digital-info ul li {
    color: #000;
    opacity: 0.8;
}

.digital-btn {
    background: #000;
    color: #8bc34a;
}

.digital-btn:hover {
    background: #333;
}

/* Corporate Gifting Card Specific */
.gifting-card {
    flex-direction: row-reverse;
}

.gifting-info {
    background: #8bc34a;
    color: #000;
}

.gifting-info h3 {
    color: #000;
}

.gifting-info ul li {
    color: #000;
    opacity: 0.8;
}

.gifting-btn {
    background: #000;
    color: #8bc34a;
}

.gifting-btn:hover {
    background: #333;
}

.business-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.business-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.business-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(26, 35, 126, 0.1), rgba(13, 71, 161, 0.1));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.business-card:hover::before {
    opacity: 1;
}

.business-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 2;
    transform: translateY(0);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.business-card:hover .business-overlay {
    transform: translateY(-5px);
}

.business-overlay h3 {
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px 15px;
    border-radius: 5px;
    margin: 0;
    text-align: center;
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
}

.business-card:hover .business-overlay h3 {
    background: rgba(26, 35, 126, 0.9);
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(26, 35, 126, 0.3);
}





/* Enhanced Events Section */
.events-section {
    padding: 100px 20px;
    background: var(--bg-light);
    position: relative;
}

.events-section .section-title {
    text-align: center;
    margin-bottom: 2rem;
}

.events-filter {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 1rem 2.5rem;
    border: 2px solid #2962ff;
    background: rgba(41, 98, 255, 0.05);
    color: #2962ff;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    backdrop-filter: blur(5px);
}

.filter-btn.active,
.filter-btn:hover {
    background: #2962ff;
    color: white;
    border-color: #2962ff;
    transform: translateY(-2px);
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.event-card {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: var(--transition);
    position: relative;
}

.event-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-medium);
}

.event-image {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

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

.event-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--gradient-primary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: capitalize;
}

.event-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}

.event-card:hover .event-overlay {
    opacity: 1;
}

.event-actions {
    display: flex;
    gap: 1rem;
}

.event-content {
    padding: 1.5rem;
}

.event-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-dark);
    text-transform: capitalize;
}

.event-date,
.event-location {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    text-transform: capitalize;
}

.event-date {
    color: var(--primary-color);
    font-weight: 600;
}

.event-location {
    color: var(--text-muted);
}

.event-content>p {
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    text-transform: capitalize;
}

.event-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    background: var(--bg-light);
    color: var(--primary-color);
    padding: 0.4rem 1rem;
    border-radius: 15px;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: capitalize;
}

.events-cta {
    text-align: center;
    background: var(--white);
    padding: 3rem 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    max-width: 600px;
    margin: 0 auto;
}

.events-cta p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: var(--text-dark);
    font-weight: 500;
}

.newsletter-signup {
    display: flex;
    gap: 1rem;
    max-width: 400px;
    margin: 0 auto;
}

.newsletter-input {
    flex: 1;
    padding: 12px 15px;
    border: 2px solid var(--bg-light);
    border-radius: 25px;
    font-size: 1rem;
    transition: var(--transition);
}

.newsletter-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.newsletter-btn {
    border-radius: 25px;
    white-space: nowrap;
}

/* Enhanced Contact Section */
.contact-section {
    padding: 100px 20px;
    background: var(--white);
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.contact-info h2 {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
}

.contact-info>p {
    font-size: 1.1rem;
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 3rem;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-light);
    border-radius: 10px;
    transition: var(--transition);
}

.contact-item:hover {
    background: rgba(102, 126, 234, 0.05);
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.contact-social h4 {
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-link {
    width: 50px;
    height: 50px;
    background: var(--bg-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    transition: var(--transition);
    text-decoration: none;
}

.social-link:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-3px);
}

.contact-form {
    background: var(--bg-light);
    padding: 3rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
}

.enhanced-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

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

.form-group label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 15px;
    border: 2px solid rgba(102, 126, 234, 0.1);
    border-radius: 8px;
    font-size: 1rem;
    transition: var(--transition);
    font-family: inherit;
    background: var(--white);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(26, 35, 126, 0.1);
}

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

/* Enhanced Footer */
.footer {
    background: var(--text-dark);
    color: white;
    padding: 60px 20px 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3,
.footer-section h4 {
    margin-bottom: 1rem;
    color: var(--primary-color);
}

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

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: #ccc;
    text-decoration: none;
    transition: var(--transition);
}

.footer-section a:hover {
    color: var(--primary-color);
}

.footer .social-links {
    display: flex;
    gap: 1rem;
}

.footer .social-links a {
    width: 40px;
    height: 40px;
    background: rgba(26, 35, 126, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.footer .social-links a:hover {
    background: var(--primary-color);
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #555;
    color: #999;
}

/* Loading Animation */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.loading.fade-out {
    opacity: 0;
    pointer-events: none;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 3px solid var(--bg-light);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* AOS Animation Styles */
[data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
}

[data-aos].aos-animate {
    opacity: 1;
    transform: none;
}

[data-aos="fade-up"] {
    transform: translateY(30px);
}

[data-aos="fade-left"] {
    transform: translateX(30px);
}

[data-aos="fade-right"] {
    transform: translateX(-30px);
}

[data-aos="zoom-in"] {
    transform: scale(0.8);
}

/* Video background responsive handling */
@media (max-width: 768px) {
    .hero-video-bg {
        /* On mobile, ensure video covers properly */
        min-width: 120%;
        min-height: 120%;
    }

    .hero-video-overlay {
        /* Slightly darker overlay on mobile for better text readability */
        background: rgba(0, 0, 0, 0.5);
    }
}

/* Fallback for browsers that don't support video */
@supports not (object-fit: cover) {
    .hero-video-bg {
        display: none;
    }

    .hero-gradient {
        background: linear-gradient(135deg, #000000 0%, #1a237e 50%, #0d47a1 100%);
    }
}

/* Prefers reduced motion - disable video for accessibility */
@media (prefers-reduced-motion: reduce) {
    .hero-video-bg {
        display: none;
    }

    .hero-gradient {
        background: linear-gradient(135deg, #000000 0%, #1a237e 50%, #0d47a1 100%);
    }

    .hero-content {
        gap: 3rem;
    }

    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav-logo h1 {
        font-size: 1.4rem;
    }

    .nav-tagline {
        font-size: 0.6rem;
        font-weight: 700;
        margin: 0;
        text-align: center;
        width: 100%;
        align-self: center;
    }

    /* Cinematic text responsive */
    .cinematic-title {
        font-size: clamp(1.5rem, 6vw, 3rem);
        letter-spacing: 0.03em;
        transform: perspective(800px) rotateX(1deg);
    }

    .cinematic-subtitle {
        font-size: clamp(0.5rem, 2vw, 0.8rem);
        letter-spacing: 0.1em;
        margin-top: 1rem;
    }

    .hero-stats-overlay {
        gap: 2rem;
        margin-top: 1.5rem;
        flex-direction: row;
    }

    .stat-number-overlay {
        font-size: clamp(1rem, 3vw, 1.5rem);
        /* Maintain timer effects on mobile */
        height: 1.1em;
    }

    .mobile-counter {
        font-size: clamp(1rem, 3vw, 1.5rem);
        height: auto;
        min-height: 1.1em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .timer-counter {
        height: 1.1em;
        border-radius: 3px;
        min-width: 1.5em;
    }

    .digit {
        height: 1.1em;
        font-size: clamp(1rem, 3vw, 1.5rem);
    }

    /* Optimized timer animation for mobile */
    .rolling-active {
        background: rgba(255, 255, 255, 0.03);
        box-shadow:
            inset 0 1px 2px rgba(0, 0, 0, 0.2),
            0 0 8px rgba(255, 255, 255, 0.08);
    }

    .rolling-active .digit-strip {
        animation: timerGlowMobile 0.08s ease-in-out infinite alternate;
    }

    /* Enhanced mobile effects for small numbers */
    .small-number-rolling {
        background: rgba(255, 255, 255, 0.05);
        box-shadow:
            inset 0 1px 3px rgba(0, 0, 0, 0.3),
            0 0 12px rgba(255, 255, 255, 0.12),
            0 0 20px rgba(255, 255, 255, 0.04);
    }

    .small-number-rolling .digit-strip {
        animation: smallNumberGlowMobile 0.1s ease-in-out infinite alternate;
    }

    @keyframes timerGlowMobile {
        0% {
            filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.08));
        }

        100% {
            filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.15));
        }
    }

    @keyframes smallNumberGlowMobile {
        0% {
            filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.12));
            transform: scale(1);
        }

        100% {
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
            transform: scale(1.015);
        }
    }

    /* Mobile completion effect */
    .timer-complete {
        animation: completeFlashMobile 0.4s ease-out;
    }

    .small-number-complete {
        animation: smallNumberCompleteMobile 0.6s ease-out;
    }

    @keyframes completeFlashMobile {
        0% {
            background: rgba(255, 255, 255, 0.02);
            box-shadow: 0 0 3px rgba(255, 255, 255, 0.08);
        }

        30% {
            background: rgba(255, 255, 255, 0.08);
            box-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
        }

        100% {
            background: rgba(255, 255, 255, 0.02);
            box-shadow: 0 0 3px rgba(255, 255, 255, 0.08);
        }
    }

    @keyframes smallNumberCompleteMobile {
        0% {
            background: rgba(255, 255, 255, 0.02);
            box-shadow: 0 0 3px rgba(255, 255, 255, 0.08);
            transform: scale(1);
        }

        25% {
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
            transform: scale(1.03);
        }

        100% {
            background: rgba(255, 255, 255, 0.02);
            box-shadow: 0 0 6px rgba(255, 255, 255, 0.12);
            transform: scale(1);
        }
    }

    .stat-label-overlay {
        font-size: clamp(0.5rem, 1.5vw, 0.7rem);
    }

    /* Video background mobile optimization */
    .hero-video-bg {
        min-width: 120%;
        min-height: 120%;
    }

    .hero-video-overlay {
        background: rgba(0, 0, 0, 0.5);
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background: rgba(0, 0, 0, 0.95);
        /* Changed to dark as per reference image */
        backdrop-filter: blur(20px);
        width: 100%;
        text-align: center;
        transition: var(--transition);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        padding: 2.5rem 0;
        gap: 1.5rem;
    }

    /* Force mobile links to be visible (white) on dark bg */
    .nav-menu .nav-link {
        color: rgba(255, 255, 255, 0.98) !important;
        font-size: 1.2rem;
        display: block;
        padding: 0.8rem 0;
    }

    .navbar.on-dark-section .nav-menu {
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(20px);
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    }

    .navbar.on-dark-section .nav-menu .nav-link {
        color: rgba(255, 255, 255, 0.9);
    }

    .navbar.on-hero .nav-menu {
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(20px);
    }

    .navbar.on-hero .nav-menu .nav-link {
        color: rgba(255, 255, 255, 0.9);
    }

    .nav-menu.active {
        left: 0;
    }

    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

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

    .hero-stats .stat-number {
        font-size: 1.5rem;
    }

    .hero-stats .stat-label {
        font-size: 0.8rem;
    }

    /* Show event overlay buttons on mobile as there is no hover */
    .event-overlay {
        opacity: 0.9 !important;
        background: rgba(0, 0, 0, 0.4);
    }

    .event-actions {
        transform: scale(0.9);
    }

    /* Force visibility for footer headings on mobile */
    .footer-section {
        text-align: center !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-section h4 {
        color: #ffffff !important;
        font-weight: 800 !important;
        opacity: 1 !important;
        text-align: center !important;
    }

    .footer .social-links a {
        color: #ffffff !important;
        font-weight: 500 !important;
        opacity: 1 !important;
        text-align: center !important;
        word-break: break-all !important;
        font-size: 0.9rem !important;
        width: auto !important;
        height: auto !important;
        display: inline-block !important;
    }

    .footer .social-links {
        justify-content: center !important;
        width: 100% !important;
    }

    .story-main {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .story-title h1 {
        font-size: clamp(2.5rem, 8vw, 4rem);
        text-align: center;
        margin-bottom: 2rem;
    }

    .story-details {
        gap: 2rem;
    }

    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

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

    .events-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
    }

    .event-card {
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .event-image {
        height: 180px;
    }

    .event-image img {
        object-fit: contain;
        padding: 1.5rem;
        background: #f8f9fa;
    }

    .event-content {
        padding: 1.2rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .event-content h3 {
        font-size: 1.05rem;
        margin-bottom: 0.8rem;
    }

    .event-date,
    .event-location {
        font-size: 0.95rem;
        margin-bottom: 0.4rem;
    }

    .event-content>p {
        font-size: 0.95rem;
        margin-bottom: 1rem;
        flex-grow: 1;
    }

    .tag {
        font-size: 0.9rem;
        padding: 0.3rem 0.8rem;
    }

    .event-badge {
        font-size: 0.9rem;
        padding: 0.4rem 0.8rem;
    }

    .events-filter {
        gap: 0.5rem;
    }

    .filter-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .newsletter-signup {
        flex-direction: column;
    }

    .contact-form {
        padding: 2rem;
    }

    .hero-buttons {
        justify-content: center;
    }

    .video-placeholder {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

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

    .events-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .event-image {
        height: 160px;
    }

    .event-content {
        padding: 1rem;
    }

    .event-content h3 {
        font-size: 1rem;
    }

    .event-date,
    .event-location,
    .event-content>p,
    .tag,
    .event-badge {
        font-size: 0.9rem;
    }

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

    .nav-tagline {
        font-size: 0.55rem;
        font-weight: 700;
        margin: 0;
        letter-spacing: 0.03em;
        text-align: center;
        width: 100%;
        align-self: center;
    }

    .hero {
        padding: 100px 15px 60px;
    }

    .services-section,
    .events-section,
    .contact-section,
    .story-section {
        padding: 60px 15px;
    }

    .hero-stats {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    .service-card,
    .event-card {
        margin: 0 10px;
    }
}

/* Print Styles */
@media print {

    .navbar,
    .hero-video,
    .contact-form,
    .footer {
        display: none;
    }

    .hero {
        background: none;
        color: black;
        padding: 20px 0;
    }

    .section {
        page-break-inside: avoid;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #000080;
        --accent-color: #1565c0;
        --text-dark: #000000;
        --text-light: #333333;
        --bg-light: #ffffff;
    }

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

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hero-particles {
        animation: none;
    }

    .scroll-indicator {
        animation: none;
    }
}

/* Enhanced 3D Story Section Background */
.story-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 20%, rgba(26, 35, 126, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(13, 71, 161, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.story-main {
    position: relative;
    z-index: 1;
}

/* 3D Perspective Container */
.story-title {
    perspective: 1200px;
    perspective-origin: center center;
    transform-style: preserve-3d;
}

/* Advanced 3D Text Effects */
.story-title h1 {
    position: relative;
    transform-origin: center center;
}

.story-title h1::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    color: rgba(0, 0, 0, 0.1);
    transform: translateZ(-20px) translateX(3px) translateY(3px);
    text-shadow: none;
}

/* Responsive 3D adjustments */
@media (max-width: 768px) {
    .story-title h1 {
        font-size: clamp(2.5rem, 8vw, 4rem);
        text-shadow:
            1px 1px 0 #333,
            2px 2px 0 #444,
            3px 3px 0 #555,
            4px 4px 1px rgba(0, 0, 0, .3),
            0 0 5px rgba(0, 0, 0, .2),
            2px 2px 3px rgba(0, 0, 0, .5),
            5px 5px 10px rgba(0, 0, 0, .4);
    }

    .story-title h1:hover {
        transform: rotateX(2deg) rotateY(-2deg) scale(1.01);
    }
}

/* Loading animation for 3D text */
.story-title h1 span {
    opacity: 0;
    animation: slideIn3D 0.8s ease-out forwards;
}

.story-title h1 span:nth-child(1) {
    animation-delay: 0.1s;
}

.story-title h1 span:nth-child(2) {
    animation-delay: 0.2s;
}

.story-title h1 span:nth-child(3) {
    animation-delay: 0.3s;
}

.story-title h1 span:nth-child(4) {
    animation-delay: 0.4s;
}

.story-title h1 span:nth-child(5) {
    animation-delay: 0.5s;
}

.story-title h1 span:nth-child(6) {
    animation-delay: 0.6s;
}

.story-title h1 span:nth-child(7) {
    animation-delay: 0.7s;
}

@keyframes slideIn3D {
    from {
        opacity: 0;
        transform: translateZ(-100px) rotateX(-90deg);
    }

    to {
        opacity: 1;
        transform: translateZ(0px) rotateX(0deg);
    }
}

/* Interactive 3D hover effects for individual words */
.story-title h1 span:hover {
    animation-play-state: paused;
    transform: translateZ(15px) rotateY(10deg) scale(1.05);
    text-shadow:
        3px 3px 0 #333,
        6px 6px 0 #444,
        9px 9px 0 #555,
        12px 12px 2px rgba(0, 0, 0, .4),
        0 0 15px rgba(0, 0, 0, 0.3),
        5px 5px 10px rgba(0, 0, 0, .6);
    color: #000;
}

/* Loading Dots */
.loader-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 25px;
}

.dot {
    width: 6px;
    height: 6px;
    background-color: #404040;
    border-radius: 50%;
    opacity: 0.3;
    animation: dotPulse 2s ease-in-out infinite;
}

.dot:nth-child(1) {
    animation-delay: 0s;
}

.dot:nth-child(2) {
    animation-delay: 0.2s;
}

.dot:nth-child(3) {
    animation-delay: 0.4s;
}

.dot:nth-child(4) {
    animation-delay: 0.6s;
}

.dot:nth-child(5) {
    animation-delay: 0.8s;
}

.dot:nth-child(6) {
    animation-delay: 1s;
}

.dot:nth-child(7) {
    animation-delay: 1.2s;
}

.dot:nth-child(8) {
    animation-delay: 1.4s;
}

.dot:nth-child(9) {
    animation-delay: 1.6s;
}

.dot:nth-child(10) {
    animation-delay: 1.8s;
}

@keyframes dotPulse {

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

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

/* Responsive adjustments */
@media (max-width: 768px) {
    .loader-text {
        font-size: clamp(1rem, 4vw, 1.6rem);
        letter-spacing: -0.02em;
    }

    .loader-subtitle {
        font-size: clamp(0.6rem, 2vw, 0.9rem);
        margin: 6px 0 0 0;
    }

    .loader-dots {
        gap: 6px;
        margin-top: 20px;
    }

    .dot {
        width: 5px;
        height: 5px;
    }
}

@media (max-width: 480px) {
    .loader-text {
        font-size: clamp(0.9rem, 5vw, 1.4rem);
        letter-spacing: -0.03em;
    }

    .loader-subtitle {
        font-size: clamp(0.5rem, 2.5vw, 0.8rem);
        margin: 5px 0 0 0;
    }

    .loader-dots {
        gap: 5px;
        margin-top: 18px;
    }

    .dot {
        width: 4px;
        height: 4px;
    }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .loader-grain {
        animation: none;
    }

    .loader-text,
    .loader-subtitle {
        animation: none;
    }

    .dot {
        animation: none;
        opacity: 0.6;
    }
}




/* Video Background Fallbacks and Accessibility */

/* Fallback for browsers that don't support video */
@supports not (object-fit: cover) {
    .hero-video-bg {
        display: none;
    }

    .hero-gradient {
        background: linear-gradient(135deg, #000000 0%, #1a237e 50%, #0d47a1 100%) !important;
    }
}

/* Prefers reduced motion - disable video for accessibility */
@media (prefers-reduced-motion: reduce) {
    .hero-video-bg {
        display: none;
    }

    .hero-gradient {
        background: linear-gradient(135deg, #000000 0%, #1a237e 50%, #0d47a1 100%) !important;
    }
}

/* Video loading fallback */
.hero-video-bg:not([src]) {
    display: none;
}

/* Career Section Styles */
.career-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.career-section h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.career-section p {
    color: var(--text-light);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.career-table-container {
    overflow-x: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    background: white;
}

.career-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.career-table thead {
    background: var(--gradient-primary);
    color: white;
}

.career-table th,
.career-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.career-table th {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.career-table tbody tr {
    transition: background-color 0.3s ease;
}

.career-table tbody tr:hover {
    background-color: rgba(26, 35, 126, 0.05);
}

.career-table tbody tr:last-child td {
    border-bottom: none;
}

.apply-btn {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.apply-btn:hover {
    background: var(--gradient-accent);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(26, 35, 126, 0.3);
}

/* Responsive Career Table */
@media (max-width: 768px) {
    .career-table-container {
        font-size: 0.8rem;
    }

    .career-table th,
    .career-table td {
        padding: 8px 10px;
    }

    .career-table th {
        font-size: 0.75rem;
    }

    .apply-btn {
        padding: 4px 8px;
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .career-table {
        font-size: 0.75rem;
    }

    .career-table th,
    .career-table td {
        padding: 6px 8px;
    }

    .apply-btn {
        padding: 3px 6px;
        font-size: 0.65rem;
    }
}

/* Career Section Styles */
.careers-section {
    padding: 100px 20px;
    background: #f8f9fa;
}

.careers-header {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.careers-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #333;
}

.careers-subtitle {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.8;
}

.careers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.career-card {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.career-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

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

.career-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    border-color: rgba(26, 35, 126, 0.1);
}

.career-card.highlighted {
    background: linear-gradient(135deg, rgba(26, 35, 126, 0.02) 0%, rgba(13, 71, 161, 0.02) 100%);
    border: 1px solid rgba(26, 35, 126, 0.1);
}

.career-card.highlighted::before {
    background: linear-gradient(90deg, #ff6b35, #f7931e);
    transform: scaleX(1);
}

.career-content h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.career-card.highlighted .career-content h3 {
    color: #ff6b35;
}

.career-content p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.apply-link {
    color: #ff6b35;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.apply-link:hover {
    color: #e55a2b;
    transform: translateX(5px);
}

.career-card:not(.highlighted) .apply-link {
    color: var(--primary-color);
}

.career-card:not(.highlighted) .apply-link:hover {
    color: var(--secondary-color);
}

/* Responsive Design for Careers */
@media (max-width: 768px) {
    .careers-section {
        padding: 60px 15px;
    }

    .careers-header h2 {
        font-size: 2rem;
    }

    .careers-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .career-card {
        padding: 1.5rem;
    }

    .career-content h3 {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .career-card {
        padding: 1.25rem;
    }

    .career-content h3 {
        font-size: 1rem;
    }

    .career-content p {
        font-size: 0.9rem;
    }

    .apply-link {
        font-size: 0.85rem;
    }
}

/* Application Modal Styles */
.application-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 20px;
}

.application-modal.show {
    opacity: 1;
    visibility: visible;
}

.application-modal-content {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    transform: translateY(30px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.application-modal.show .application-modal-content {
    transform: translateY(0) scale(1);
}

.application-header {
    background: var(--gradient-primary);
    color: white;
    padding: 2rem;
    border-radius: 20px 20px 0 0;
    text-align: center;
    position: relative;
}

.application-header h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: white;
}

.application-header p {
    font-size: 1rem;
    margin: 0;
    opacity: 0.9;
    color: white;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0.8;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
    transform: scale(1.1);
}

.application-form-container {
    padding: 2rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
}

.form-group label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
    font-size: 0.95rem;
}

.required {
    color: #e74c3c;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: inherit;
    background: #f8f9fa;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background: white;
    box-shadow: 0 0 0 3px rgba(26, 35, 126, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.file-input-container {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
}

.file-input-container input[type="file"] {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

.file-input-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 15px;
    border: 2px dashed #e9ecef;
    border-radius: 10px;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 50px;
}

.file-input-label:hover {
    border-color: var(--primary-color);
    background: rgba(26, 35, 126, 0.05);
}

.file-input-text {
    color: #666;
    font-size: 0.95rem;
}

.file-input-container input[type="file"]:focus+.file-input-label {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(26, 35, 126, 0.1);
}

.submit-application-btn {
    width: 100%;
    padding: 15px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.submit-application-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(26, 35, 126, 0.3);
}

.submit-application-btn:active {
    transform: translateY(0);
}

/* Responsive Design for Application Modal */
@media (max-width: 768px) {
    .application-modal {
        padding: 10px;
    }

    .application-modal-content {
        max-height: 95vh;
    }

    .application-header {
        padding: 1.5rem;
    }

    .application-header h2 {
        font-size: 1.5rem;
    }

    .application-form-container {
        padding: 1.5rem;
    }

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

    .close-btn {
        top: 10px;
        right: 15px;
        font-size: 1.5rem;
        width: 35px;
        height: 35px;
    }
}

@media (max-width: 480px) {
    .application-header {
        padding: 1.25rem;
    }

    .application-header h2 {
        font-size: 1.3rem;
    }

    .application-form-container {
        padding: 1.25rem;
    }

    .form-group {
        margin-bottom: 1.25rem;
    }
}

/* Email Composer Modal Styles */
.email-composer-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 20px;
}

.email-composer-modal.show {
    opacity: 1;
    visibility: visible;
}

.email-composer-content {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    transform: translateY(30px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.email-composer-modal.show .email-composer-content {
    transform: translateY(0) scale(1);
}

.email-composer-header {
    background: var(--gradient-primary);
    color: white;
    padding: 2rem;
    border-radius: 20px 20px 0 0;
    text-align: center;
    position: relative;
}

.email-composer-header h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: white;
}

.email-composer-header p {
    font-size: 1rem;
    margin: 0;
    opacity: 0.9;
    color: white;
}

.email-composer-body {
    padding: 2rem;
}

.email-field {
    margin-bottom: 1.5rem;
}

.email-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
    font-size: 0.95rem;
}

.email-field input,
.email-field textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
    background: #f8f9fa;
    color: #333;
    resize: vertical;
}

.email-field input[readonly],
.email-field textarea[readonly] {
    background: #f8f9fa;
    cursor: default;
}

.email-field textarea {
    min-height: 300px;
    line-height: 1.6;
}

.email-actions {
    display: flex;
    gap: 1rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.btn-send {
    background: #28a745;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 150px;
}

.btn-send:hover {
    background: #218838;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
}

.btn-copy {
    background: #007bff;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 150px;
}

.btn-copy:hover {
    background: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}

.btn-cancel {
    background: #6c757d;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 150px;
}

.btn-cancel:hover {
    background: #545b62;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(108, 117, 125, 0.3);
}

.email-note {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 10px;
    padding: 1rem;
    margin-top: 1rem;
}

.email-note p {
    margin: 0.5rem 0;
    color: #856404;
    font-size: 0.9rem;
}

.email-note strong {
    color: #533f03;
}

/* Responsive Design for Email Composer */
@media (max-width: 768px) {
    .email-composer-modal {
        padding: 10px;
    }

    .email-composer-content {
        max-height: 95vh;
    }

    .email-composer-header {
        padding: 1.5rem;
    }

    .email-composer-header h2 {
        font-size: 1.5rem;
    }

    .email-composer-body {
        padding: 1.5rem;
    }

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

    .btn-send,
    .btn-copy,
    .btn-cancel {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 480px) {
    .email-composer-header {
        padding: 1.25rem;
    }

    .email-composer-header h2 {
        font-size: 1.3rem;
    }

    .email-composer-body {
        padding: 1.25rem;
    }

    .email-field textarea {
        min-height: 250px;
    }
}

/* Floating Contact Button */
.floating-contact-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(26, 35, 126, 0.3);
    transition: all 0.3s ease;
    z-index: 1000;
    color: white;
    text-align: center;
}

.connect-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.1;
    text-transform: uppercase;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.floating-contact-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 35px rgba(26, 35, 126, 0.4);
    background: linear-gradient(135deg, #0d47a1 0%, #1a237e 100%);
}

.floating-contact-btn:hover .connect-text {
    transform: scale(1.1);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.floating-contact-btn:active {
    transform: translateY(-1px) scale(1.02);
}

/* Contact Modal */
.contact-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.contact-modal.show {
    opacity: 1;
    visibility: visible;
}

.contact-modal-content {
    background: white;
    border-radius: 15px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(30px);
    transition: transform 0.3s ease;
}

.contact-modal.show .contact-modal-content {
    transform: translateY(0);
}

.contact-modal-header {
    background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
    color: white;
    padding: 30px;
    border-radius: 15px 15px 0 0;
    text-align: center;
    position: relative;
}

.contact-modal-header h2 {
    margin: 0 0 10px 0;
    font-size: 1.8rem;
    font-weight: 600;
}

.contact-modal-header p {
    margin: 0;
    opacity: 0.9;
    font-size: 1rem;
}

.contact-modal-header .close-btn {
    position: absolute;
    top: 20px;
    right: 25px;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.contact-modal-header .close-btn:hover {
    opacity: 1;
}

.contact-modal-body {
    padding: 30px;
}

.modal-contact-form .form-group {
    margin-bottom: 20px;
}

.modal-contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.modal-contact-form input,
.modal-contact-form select,
.modal-contact-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    font-family: inherit;
    box-sizing: border-box;
}

.modal-contact-form input:focus,
.modal-contact-form select:focus,
.modal-contact-form textarea:focus {
    outline: none;
    border-color: #1a237e;
}

.modal-contact-form textarea {
    resize: vertical;
    min-height: 100px;
}

.modal-contact-form .btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.modal-contact-form .btn:hover {
    background: linear-gradient(135deg, #0d47a1 0%, #1a237e 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(26, 35, 126, 0.3);
}

/* Contact Details Modal */
.contact-details-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.contact-details-modal.show {
    opacity: 1;
    visibility: visible;
}

.contact-details-modal-content {
    background: #2a2a2a;
    border-radius: 15px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(30px);
    transition: transform 0.3s ease;
    color: white;
}

.contact-details-modal.show .contact-details-modal-content {
    transform: translateY(0);
}

.contact-details-header {
    background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
    color: white;
    padding: 30px;
    border-radius: 15px 15px 0 0;
    text-align: center;
    position: relative;
}

.contact-details-header h2 {
    margin: 0 0 10px 0;
    font-size: 1.8rem;
    font-weight: 600;
}

.contact-details-header p {
    margin: 0;
    opacity: 0.9;
    font-size: 1rem;
}

.contact-details-header .close-btn {
    position: absolute;
    top: 20px;
    right: 25px;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.contact-details-header .close-btn:hover {
    opacity: 1;
}

.contact-details-body {
    padding: 30px;
}

.contact-details-grid {
    display: grid;
    gap: 20px;
    margin-bottom: 30px;
}

.contact-detail-item {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 1.5rem;
    padding: 0;
    background: transparent;
    border-radius: 0;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(-30px);
}

.contact-detail-item.animate-slide-in {
    animation: slideInDetail 0.6s ease-out forwards;
}

.contact-detail-item:hover {
    background: transparent;
    transform: translateX(5px);
}

.contact-detail-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: iconPulse 2s ease-in-out infinite;
}

.contact-detail-icon.email-icon-detail {
    background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
}

.contact-detail-icon.phone-icon-detail {
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 100%);
}

.contact-detail-icon.location-icon-detail {
    background: linear-gradient(135deg, #1565c0 0%, #1976d2 100%);
}

.contact-detail-icon.warehouse-icon-detail {
    background: linear-gradient(135deg, #2e7d32 0%, #388e3c 100%);
    /* Green gradient for warehouse */
}

.contact-detail-info h4 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
}

.contact-detail-info p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
}

.contact-detail-link {
    color: #7cb342 !important;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
    font-size: 1rem;
}

.contact-detail-link:hover {
    color: #689f38 !important;
}

/* Animation Keyframes for Contact Details */
@keyframes slideInDetail {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .floating-contact-btn {
        bottom: 20px;
        right: 20px;
        width: 70px;
        height: 70px;
    }

    .connect-text {
        font-size: 0.6rem;
        letter-spacing: 0.3px;
    }

    .contact-modal-content {
        width: 95%;
        margin: 10px;
    }

    .contact-modal-header {
        padding: 25px 20px;
    }

    .contact-modal-body {
        padding: 25px 20px;
    }

    .contact-modal-header h2 {
        font-size: 1.5rem;
    }
}

/* Custom Adjustment: Center Story Title */
/* Removed previous .story-title styles as class changed */

/* Video Text Mask Styles */
.video-text-wrapper {
    position: relative;
    width: calc(100% + 40px);
    /* Break out of section padding */
    margin-left: -20px;
    /* Pull left */
    overflow: hidden;
    /* Ensure video never spreads outside wrapper */
    background-color: #eaeff2;
    /* Matches section */
    display: grid;
    place-items: center;
    isolation: isolate;
    /* Create new stacking context */
    padding: 0;
    /* Padding moved inside mask to prevent black bars */
}

.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    background: #000;
    /* Fallback: Black background ensures text is visible if video fails/loads slow */
}

.text-mask-overlay {
    position: relative;
    z-index: 2;
    background-color: #eaeff2;
    /* Must match page background exactly */
    color: #000;
    mix-blend-mode: lighten;
    /* Robust masking: Lightest pixel wins (White Overlay > Video; Video > Black Text) */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
}


.story-title-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    /* Full width */
    /* Add vertical padding here so the mask grows to cover it */
    padding: 4vw 0;
    /* Vertical padding reduced but sufficient for glyphs. Horizontal removed for flush edge. */
}

.line {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    line-height: 1;
    /* Restore full height to prevent blend-mode clipping artifacts */
    margin-bottom: -0.35em;
    /* Create tight visual spacing using margins instead */
    text-transform: uppercase;
    color: #000;
    text-align: left;
    /* Left align letters */
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    letter-spacing: -0.05em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    user-select: none;
    position: relative;
    /* Ensure clean stacking */
    z-index: 2;
    /* Stack above potential artifacts */
    /* Unified Landscape Size */
    font-size: clamp(3rem, 11.5vw, 15rem);
}

/* Removed individual line sizing for uniform left-align look */

/* Mobile adjustments handled by clamps */

/* Winoraa Styled About Section */
/* Winoraa Redesigned About Section - Video Mask */
.about-winoraa-section {
    padding: 0 0 100px 0;
    background-color: #ffffff;
    /* Must be white for screen blend mode to work perfectly */
    position: relative;
    z-index: 5;
    overflow: hidden;
}

/* Default Visibility Utilities */
/* Default Visibility Utilities */
.winoraa-mobile-marquee-standalone {
    display: none !important;
}


.container-fluid {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.about-split-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center horizontally */
    gap: 80px;
    /* Thoda gap */
    min-height: 80vh;
}

/* Left Column: Video Mask */
.about-left-video-mask {
    position: relative;
    flex: 1;
    /* sticky positioned if we want it to stay while scrolling, but static for now */
    height: auto;
    /* min-height removed to fit text tightly */
    display: flex;
    align-items: center;
}

.video-container-absolute {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.mask-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text-mask-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    /* Matches section bg */
    color: #000000;
    /* Text color becomes the mask */
    mix-blend-mode: screen;
    /* Magic happens here: White stays white, Black becomes transparent/video */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
}

.masked-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(3rem, 6vw, 6.5rem);
    font-weight: 900;
    line-height: 0.85;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: -0.02em;
    padding: 0;
}

/* Right Column: Content */
/* Right Column: Content */
.about-right-content {
    flex: 0 1 auto;
    /* Fix: Don't stretch */
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 0;
    align-items: flex-start;
    margin-top: 0;
    /* Fix: Exact Middle */
}

.content-block {
    max-width: 550px;
    /* Slightly wider */
}

.content-block h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    /* Size UP MORE */
    font-weight: 800;
    color: #000;
    margin-bottom: 20px;
    line-height: 1.25;
}

.content-block p {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    /* Size UP MORE */
    line-height: 1.6;
    color: #444;
}

/* Redesign Mobile Responsiveness */
@media (max-width: 992px) {
    .about-split-layout {
        flex-direction: column;
        gap: 40px;
    }

    .about-left-video-mask {
        width: 100%;
        min-height: 400px;
    }

    .about-right-content {
        width: 100%;
        padding: 40px;
    }
}



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

    .brand-block {
        aspect-ratio: auto;
        min-height: 500px;
    }
}

@media (max-width: 768px) {
    .brand-block {
        padding: 40px;
    }

    .info-block {
        padding: 40px 30px;
    }

    .intro-block p {
        font-size: 1.1rem;
    }
}

/* --- About Section Mobile Fixes (Added for Winoraa) --- */
/* Desktop Adjustment for Marquee Position */
.desktop-low-marquee {
    top: 70% !important;
}

/* Desktop-Only Heading Reduction (As requested: Match 'OUR' size) */
@media (min-width: 769px) {
    #about .heading-title {
        font-size: 1.5rem !important;
        /* Matches 'OUR' subtitle scale */
        margin-top: 10px;
    }

    #about .heading-subtitle {
        font-size: 1rem !important;
        /* Small and subtle */
    }
}

/* --- About Section Mobile Fixes (Added for Winoraa) --- */
@media (max-width: 768px) {

    /* Reset marquee for mobile */
    .desktop-low-marquee {
        top: 40% !important;
    }


    /* 1. Fix Layout Stacking & Spacing */
    /* 1. Fix Layout Stacking & Spacing */
    .about-winoraa-section {
        padding: 40px 0 !important;
        /* Reset vertical padding */
    }

    .about-split-layout {
        flex-direction: column;
        gap: 40px;
        min-height: auto !important;
        /* CRITICAL: Prevent container from forcing video height */
    }

    .about-left-video-mask,
    .about-right-content {
        width: 100%;
        max-width: 100%;
        flex: none;
    }

    /* Ensure mask wrapper fills whatever height the parent has */
    .about-left-video-mask {
        display: grid;
        width: 100%;
        overflow: hidden;
        background: #fff;
        padding-bottom: 0;
        margin-bottom: 20px;
        /* Restored original 20px */
        isolation: isolate;
        /* CRITICAL: Contain blend mode */
    }

    /* ... (Heading fixes skipped for brevity, keeping existing) ... */

    .text-mask-wrapper {
        width: 100%;
        margin: 0;
        padding: 60px 0;
        /* Restored original 60px vertical padding */
        background-color: #ffffff;
        position: relative;
        z-index: 2;
        mix-blend-mode: screen;
        /* Reinforce for mobile */
        color: #000;
        /* Ensure text is perfectly black for transparency */
    }

    .masked-title {
        font-size: 10.5vw !important;
        /* Further Reduced to ensure "S" is visible */
        line-height: 0.85;
        /* Tighten line height */
        margin: 0;
        text-align: left;
        /* Left Align Text */
        word-break: normal;
        /* Prevent mid-word breaks */
        overflow-wrap: normal;
        width: 100%;
        display: block;
        padding-left: 20px;
        /* Add some padding from edge */
        color: #000 !important;
        /* Force black */
    }

    /* Override inline styles and desktop defaults - Reset padding to standard */
    .about-winoraa-section .modern-heading-wrapper {
        margin-top: 0 !important;
        margin-bottom: 40px;
        /* Restored original 40px gap */
        transform: none !important;
        /* Remove forced min-height now that H2 provides content */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    /* Reset individual element transforms that cause overlap */
    /* Reset individual element transforms that cause overlap */
    #about .heading-title {
        display: block !important;
        /* RESTORED Static Title */
        font-size: 2.5rem !important;
        /* Proper mobile size */
        margin-top: 5px !important;
        margin-bottom: 20px !important;
        /* Push marquee down */
        transform: none !important;
        /* CRITICAL: Prevent -50px shift */
    }

    /* CRITICAL FIX: Reset Subtitle - Small & Tight for Mobile */
    .about-winoraa-section .heading-subtitle {
        transform: none !important;
        margin-bottom: 2px !important;
        /* Very close to title */
        font-size: 0.85rem !important;
        /* Small size */
        display: block !important;
        position: relative;
        z-index: 5;
        letter-spacing: 2px !important;
    }

    /* 4. Fix Marquee Position - SWITCH TO RELATIVE STACKING */
    /* 4. Fix Marquee Position - STANDALONE DECOUPLED IMPLEMENTATION */
    .desktop-only-marquee {
        display: none !important;
    }

    /* Dedicated Mobile Keyframes (Horizontal Only, no vertical shift) */
    @keyframes winoraa-mobile-scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-100%);
        }
    }

    .winoraa-mobile-marquee-standalone {
        display: block !important;
        position: relative !important;
        margin-top: 15px !important;
        width: 100%;
        white-space: nowrap;
        overflow: visible;
        /* Ensure content isn't clipped inside the scrolling box */

        font-family: 'Montserrat', sans-serif !important;
        font-weight: 900 !important;
        font-size: 12vw !important;
        /* Match Services Size */
        line-height: 1;

        /* Animation: Use New Keyframes + 5s Speed (Very Fast) */
        animation: winoraa-mobile-scroll 5s linear infinite !important;

        /* Default Style (Outline) */
        color: transparent;
        -webkit-text-stroke: 1px #888;
        /* Valid grey stroke */
        opacity: 1 !important;
    }

    /* Highlight Style (Solid Black) */
    .winoraa-mobile-marquee-standalone .highlight-text {
        color: #000 !important;
        -webkit-text-stroke: 0px !important;
        font-weight: 900 !important;
    }

    /* 5. Fix Giant Video Mask Text */
    /* .about-left-video-mask moved up to consolidate */

    .video-container-absolute {
        /* On mobile, we only want video behind text. 
           If it's absolute, it fills parent. 
           We need parent to shrink-wrap text. */
        position: absolute;
        /* Contract video slightly to prevent edge bleeding (The "Extra Line" Fix) */
        top: 2px;
        left: 2px;
        right: 2px;
        bottom: 2px;
        width: auto !important;
        height: auto !important;
        z-index: 0;
    }






    /* Ensure container (if used inside mask) is centered */
    .story-title-container {
        align-items: flex-start;
        /* Left Align */
        width: 100%;
    }

    /* 6. Shift Content Left (Maximize Width) */
    .container-fluid {
        padding: 0 20px !important;
        /* Reduce from 40px to 20px */
    }

    .about-right-content {
        padding: 0 !important;
        /* Remove extra padding to align with edge */
        text-align: left;
    }

    /* 7. Remove Unwanted Lines/Borders */
    .about-winoraa-section,
    .about-winoraa-section *,
    .modern-heading-wrapper,
    .heading-subtitle,
    .heading-title,
    .masked-title,
    .text-mask-wrapper,
    .about-left-video-mask,
    .video-container-absolute {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }

    /* 8. Format Content Blocks Properly */
    .about-right-content {
        gap: 25px !important;
        /* Reduce gap from 50px */
    }

    .content-block h3 {
        font-size: 1.35rem !important;
        /* Proper readable size for mobile */
        margin-bottom: 10px !important;
        line-height: 1.3 !important;
    }

    .content-block p {
        font-size: 0.95rem !important;
        /* Standard body text size */
        line-height: 1.5 !important;
        color: #333 !important;
        /* Ensure contrast */
        margin-bottom: 0 !important;
        text-align: left;
        /* Ensure clean left alignment */
    }

    /* 9. Fix Footer Overlap on Mobile */
    .contact-social-landscape {
        padding-bottom: 160px !important;
        /* Huge buffer to prevent footer overlap */
    }
}

/* --- iPad/Tablet Specific Fixes --- */
/* --- iPad/Tablet Specific Fixes (FINAL ROBUST GRID OVERLAY) --- */
@media (min-width: 768px) and (max-width: 1366px) {

    /* 
       1. Force Layout to Stack Vertically (Column) 
          This prevents the video section from being stretched by the right-side text,
          which often causes unwanted white space or video exposure issues.
    */
    #about .about-split-layout {
        flex-direction: column !important;
        gap: 0 !important;
        /* Remove gap to keep it tight */
    }

    #about .about-left-video-mask,
    #about .about-right-content {
        width: 100% !important;
        flex: none !important;
        /* Disable flex growing/shrinking */
    }

    /* 
       GRID OVERLAY STRATEGY:
       1. Use Grid to stack Video and Text Wrapper in the exact same cell (1/1).
       2. Text Wrapper determines the size of the cell.
       3. Video fills the cell (100% width/height of the Grid Area).
       4. Specificity Boost: Using #about ID selector.
    */
    #about .about-left-video-mask {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr !important;

        background-color: #ffffff !important;
        position: relative !important;
        overflow: hidden !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        isolation: isolate !important;
    }

    /* Video: Placed in Grid Area 1/1, z-index 0 */
    #about .video-container-absolute {
        grid-area: 1 / 1 !important;
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        z-index: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    #about .mask-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Text Wrapper: Placed in Grid Area 1/1, z-index 2 */
    #about .text-mask-wrapper {
        grid-area: 1 / 1 !important;
        z-index: 2 !important;

        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        background-color: #ffffff !important;
        mix-blend-mode: screen !important;

        padding: 80px 0 !important;
        /* Increased padding for better visual balance */
        margin: 0 !important;
        border: none !important;

        /* Left Align Content */
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        /* Start from Left */
        justify-content: center !important;
    }

    /* Text Sizing & Centering */
    #about .masked-title {
        width: 100% !important;
        display: block !important;
        padding: 0 40px !important;
        text-align: left !important;
        /* Left Align Text */
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 900 !important;
        color: #000000 !important;
        /* Ensure pure black for mask */

        /* Responsive large font size for tablets */
        font-size: clamp(3.5rem, 11vw, 6.5rem) !important;
        /* Slightly reduced to fit "EXPERIENCES" */
        line-height: 0.85 !important;
        letter-spacing: -2px !important;
    }
}

/* --- Desktop Specific Fixes (1367px+) --- */
@media (min-width: 1367px) {
    #about .video-container-absolute {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        border: none !important;
    }
}

/* Center About Us Masked Text Globally */
/* Align About Us Masked Text to Left */
#about .text-mask-wrapper {
    align-items: flex-start !important;
    text-align: left !important;
    padding-top: 250px !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* About Events Card Button (Re-added) */
.about-events-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #e6e6e6;
    padding: 1.5rem;
    border-radius: 20px;
    width: 400px;
    /* Make it wide */
    height: 200px;
    /* Height also */
    text-decoration: none;
    color: #000;
    margin: 40px auto 0;
    /* Centered */
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
}

/* Left-align card in About section content column */
.about-right-content .about-events-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.about-events-card:hover {
    transform: translateY(-5px);
    background-color: #d4d4d4;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-icon-wrapper {
    align-self: flex-end;
    margin-bottom: auto;
    /* Push content apart */
}

.card-icon-wrapper svg {
    width: 48px;
    /* Bigger icon */
    height: 48px;
    stroke: #000;
    stroke-width: 2.5px;
    /* Thicker stroke */
}

.about-events-card .card-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    /* Bigger text */
    text-transform: uppercase;
    line-height: 1;
    color: #000;
}

/* Responsive Adjustments for About Text Position & Alignment */
@media (max-width: 768px) {
    #about .text-mask-wrapper {
        padding-top: 120px !important;
        /* Adjusted for mobile height */
        padding-left: 20px !important;
        /* Add slight safe area on mobile */
        align-items: flex-start !important;
        text-align: left !important;
    }

    /* Make small in mobile view */
    .about-events-card {
        width: 100% !important;
        /* Fit container */
        max-width: 320px !important;
        /* Cap width */
        height: auto !important;
        min-height: 120px !important;
        /* Prevent overlapping */
        margin-top: 0.5rem !important;
        /* Moved slightly up */
    }

    .about-events-card .card-text {
        font-size: 1.5rem !important;
        /* Smaller text */
    }

    .card-icon-wrapper svg {
        width: 32px !important;
        /* Smaller icon */
        height: 32px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    #about .text-mask-wrapper {
        padding-top: 180px !important;
        /* Adjusted for tablet */
        padding-left: 30px !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    /* Center Content on iPad/Tablet */
    .about-right-content {
        align-items: center !important;
        text-align: center !important;
    }

    .content-block p {
        text-align: center !important;
    }

    .about-right-content .about-events-card {
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 1rem !important;
        /* Moved up on iPad */
    }
}

/* Clients Section Styles */
.clients-section {
    padding: 80px 0;
    background-color: #cfd3d8;
    /* Matching the grayish background */
    position: relative;
    overflow: hidden;
}

.clients-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
}

.clients-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    /* Large impact title */
    font-weight: 900;
    color: #000;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.clients-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a1a;
    text-align: right;
    line-height: 1.4;
    max-width: 300px;
    margin-bottom: 15px;
    /* Move up slightly */
}

/* Marquee Styles */
.clients-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 30px 0;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
    display: flex;
    gap: 80px;
    width: max-content;
    animation: scroll 20s linear infinite;
}

.marquee-track:hover {
    animation-play-state: paused;
}

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

    100% {
        transform: translateX(calc(-50% - 40px));
        /* Half of gap */
    }
}

.client-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    /* Allow auto width */
    flex-shrink: 0;
    /* Prevent shrinking */
    opacity: 0.6;
    transition: all 0.3s ease;
    mix-blend-mode: multiply;
}

.client-logo-item:hover {
    opacity: 1;
    transform: scale(1.05);
    /* Slight scale on hover */
}

.client-logo-item img {
    max-width: 160px;
    /* Slightly larger */
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: grayscale(100%) opacity(0.8);
}

.client-logo-item:hover img {
    filter: grayscale(0%) opacity(1);
    transform: none;
    /* Handled by parent */
}

@media (max-width: 768px) {
    .client-logo-item img {
        max-width: 120px;
        max-height: 60px;
    }

    .marquee-track {
        gap: 40px;
    }
}