/* ============================================= */
/* 1. Global Variables & Theme
/* ============================================= */
:root {
    --primary: #0B1426;
    --gold: #00D4C2;
    --gold-light: #4284E7;
    --gray-50: #FAFAFA;
    --gray-100: #F5F5F5;
    --gray-600: #6B7280;
    --gray-900: #111827;
}

html {
    scroll-behavior: smooth;
}

/* ============================================= */
/* 2. Typography & Custom Utilities
/* ============================================= */
.font-display {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
}

.gradient-gold {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
}

.gradient-dark {
    background: linear-gradient(135deg, #0B1426 0%, #1E3A8A 100%);
}

/* ============================================= */
/* 5. Tailwind Color Overrides (Direct Method)
/* ============================================= */

/* Override text colors */
.text-yellow-400,
.text-yellow-600 { 
  color: #00D4C2 !important; /* Your custom gold/teal color */
}

/* Override hover colors */
.hover\:text-yellow-600:hover,
.group:hover .group-hover\:text-yellow-600 { 
  color: #4284E7 !important; /* Your custom gold-light/blue color on hover */
}

/* Override SVG fill colors */
.fill-yellow-400 { 
  fill: #00D4C2 !important; /* Fills icons with your custom gold/teal color */
}

/* ============================================= */
/* 3. Animations & Keyframes
/* ============================================= */

/* Animated Gradient Text Effect */
.animated-gradient-text {
    background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: text-gradient-flow 3s linear infinite;
}

@keyframes text-gradient-flow {
    to {
        background-position: 200% center;
    }
}

/* Blinking Cursor for Typing Effect */
#cursor {
    font-weight: 300;
    opacity: 1;
    animation: blink 0.8s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

 /* Marquee Animation */
    @keyframes scroll-left {
        0% { transform: translateX(0%); }
        100% { transform: translateX(-50%); }
    }

    @keyframes text-gradient-flow {
        to { background-position: 200% center; }
    }

    .marquee-container {
        padding: 1rem 0;
        height: auto;
        line-height: 1;
        overflow: hidden;
        margin: 40px 0;
    }

    .marquee-text {
        display: inline-block;
        white-space: nowrap;
        animation: scroll-left 25s linear infinite, text-gradient-flow 3s linear infinite;
        animation-delay: -25s;
        will-change: transform;
        background: linear-gradient(90deg, #00D4C2, #4284E7, #00D4C2);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-size: 3.5rem;
        line-height: 1;
        opacity: 1;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    .marquee-text::after {
        content: attr(data-content);
        display: inline-block;
        padding-left: 4rem;
        background: linear-gradient(90deg, #00D4C2, #4284E7, #00D4C2);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: text-gradient-flow 3s linear infinite;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-size: 3.5rem;
        line-height: 1;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    /* Responsive adjustments */
    @media (min-width: 640px) {
        .marquee-text, .marquee-text::after { font-size: 4.5rem; }
    }
    @media (min-width: 1024px) {
        .marquee-text, .marquee-text::after { font-size: 6rem; }
    }

    .fade-in-section {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .fade-in-section.is-visible {
        opacity: 1;
        transform: translateY(0);
    }



@keyframes scroll-left {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

/* Bouncing Scroll Indicator */
@keyframes bounce-scroll {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

#scroll-indicator {
  animation: bounce-scroll 2s infinite;
  transition: opacity 0.3s;
}

/* ============================================= */
/* 4. Component-Specific Styles
/* ============================================= */

/* Fade-in on Scroll Effect */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero Section & Video Background */
#hero-background-youtube {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw; /* 16:9 aspect ratio */
    min-height: 100vh;
    min-width: 177.77vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Fix to prevent layout shift during typing animation */
#dynamic-text-hero {
    display: inline-block;
    min-height: 2.5rem; /* Adjust based on your text size */
}

/* Pop-up Modals (Contact, Brochure, Mobile Menu) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}
.modal-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}
.modal-content {
    background: white;
    padding: 2rem;
    border-radius: 0.75rem;
    width: 90%;
    max-width: 500px;
    position: relative;
    transform: translateY(-20px);
    transition: transform 0.3s ease-in-out;
}
.modal-overlay.visible .modal-content {
    transform: translateY(0);
}

/* Carousel Styles */
.carousel-dot.active {
    background-color: var(--gold);
}

/* ============================================= */
/* 5. Responsive Adjustments
/* ============================================= */
@media (max-width: 768px) {
  #scroll-indicator {
    display: none;
  }
}

/* Keyframe animation for the logo movement */
@keyframes slide-right {
    0%, 100% {
        transform: translateX(8%); /* Start position */
    }
    50% {
        transform: translateX(-75%);  /* End position */
    }
}

/* Class to apply the animation to the logo */
.animated-logo {
    animation: slide-right 10s ease-in-out infinite;
}

/* ============================================= */
/* 7. Components: Dropdown Menu
/* ============================================= */
.dropdown-container {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 260px; /* Slightly wider for the longer text */
    background: white;
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid #f3f4f6; /* border-gray-100 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    
    /* Animation and Initial State */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease-in-out;
    z-index: 50;
    
    /* This padding creates the invisible space for the bridge */
    padding-top: 0.5rem; /* pt-2 */
}

/* This is the invisible "bridge" that keeps the menu open */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.5rem; /* Must match padding-top */
    background: transparent;
}

/* Show the menu on hover of the container */
.dropdown-container:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: block;
    padding: 0.75rem 1rem; /* py-3 px-4 */
    color: #374151; /* text-gray-700 */
    font-size: 0.875rem; /* text-sm */
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.dropdown-item:hover {
    background-color: #f9fafb; /* hover:bg-gray-50 */
    color: var(--gold); /* Uses your theme color */
    border-left-color: var(--gold);
    padding-left: 1.25rem; /* pl-5, creates a nice indent effect */
}

.text-gold {
  color: #00D4C2 !important; /* Gold color */
  font-weight: 600 !important;
}