@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Cinzel:wght@400;700;900&display=swap');

:root {
    
    --lux-gold: #d4af37;
    --lux-gold-dim: #aa8c2c;
    --lux-gold-light: #f3e5ab;
    --lux-platinum: #e5e4e2;
    --lux-dark: #050505;
    --lux-deep-purple: #1a0b2e;

    
    --grad-royal: linear-gradient(135deg, #1a0b2e 0%, #000000 100%);
    --grad-gold: linear-gradient(135deg, #d4af37, #f3e5ab, #aa8c2c);
    --grad-premium: linear-gradient(135deg, #6366f1, #8b5cf6, #d4af37);
    --grad-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));

    
    --shadow-lux: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(212, 175, 55, 0.1);
    --glow-gold: 0 0 20px rgba(212, 175, 55, 0.3);
    --glow-purple: 0 0 30px rgba(99, 102, 241, 0.2);
}


body {
    background-color: var(--lux-dark) !important;
    color: var(--lux-platinum) !important;
}


h1,
h2,
h3,
h4,
h5,
h6,
.brand-text h3,
.hero-title,
.section-title {
    font-family: 'Playfair Display', serif !important;
    letter-spacing: -0.02em !important;
    font-weight: 700 !important;
}


p,
span,
a,
li,
input,
button {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    letter-spacing: 0.02em !important;
}


::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #050505;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #6366f1, #d4af37);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #8b5cf6, #f3e5ab);
}

/* SELECTION LUXURY */
::selection {
    background: var(--lux-gold);
    color: #000;
}


.header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 30px !important;

    background: rgba(5, 5, 5, 0.7) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

.header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--lux-gold), transparent);
    opacity: 0.5;
}


.logo-section {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.brand {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.brand-text h1 {
    background: linear-gradient(135deg, #fff 30%, #d4af37 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.2);
    margin: 0 !important;
}


.logo-section {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.brand {
    display: flex !important;
    flex-direction: column !important;
    /* Stack vertically */
    align-items: flex-start !important;
    /* Align left to match logo if text is longer, or center? User said "below logo" usually implies center 
       but if it's "Logo kindha Name" it's stack. Let's center align for symmetry */
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 0 !important;
    text-decoration: none !important;
    text-align: center !important;
}

/* HIDE EXPLORE MORE SECTION */
.mobile-quick-actions-wrapper {
    display: none !important;
}

.brand-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    /* Tight spacing between title and slogan */
}

.brand-text h1 {
    font-family: 'Cinzel', serif !important;
    /* Majestic Font */
    font-size: 1.8rem !important;
    /* Larger Sizing */
    letter-spacing: 0.05em !important;
    background: linear-gradient(135deg, #fff 40%, #d4af37 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 0 40px rgba(212, 175, 55, 0.4);
    margin: 0 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

.brand-text p {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-size: 0.85rem !important;
    color: var(--lux-gold) !important;
    letter-spacing: 0.1em !important;
    opacity: 0.9 !important;
    margin: 0 !important;
}

.brand-logo img {
    height: 65px !important;
    width: auto !important;

    /* AGGRESSIVE BACKGROUND REMOVAL & GOLD TRANSFORMATION */
    filter: grayscale(100%) contrast(200%) invert(100%) sepia(100%) hue-rotate(5deg) saturate(400%) drop-shadow(0 0 5px rgba(212, 175, 55, 0.5)) !important;

    mix-blend-mode: screen !important;
    opacity: 1 !important;
    border-radius: 0 !important;
    background: transparent !important;
    transition: transform 0.5s ease, filter 0.5s ease !important;
}

.brand:hover .brand-logo img {
    transform: scale(1.1) !important;
    filter: grayscale(100%) contrast(200%) invert(100%) sepia(100%) hue-rotate(5deg) saturate(500%) drop-shadow(0 0 15px rgba(212, 175, 55, 0.8)) !important;
}

.nav-content {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    /* Push everything to right */
    justify-content: center !important;
    margin-left: 20px !important;
    max-width: none !important;
    /* Allow full width */
}

/* MAIN NAV */
.main-nav {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    /* Space between links and search/icons */
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    padding: 10px 0 !important;
}

/* NAVIGATION LINKS */
.nav-links {
    display: flex !important;
    gap: 30px !important;
    margin: 0 auto !important;
    /* Center links if possible */
}

.nav-link {
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.7) !important;
    transition: all 0.4s ease !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 5px 0 !important;
}

.nav-link:hover,
.nav-link.active {
    color: var(--lux-gold) !important;
    background: transparent !important;
    transform: translateY(-2px);
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
}

.nav-link::before {
    background: var(--grad-gold) !important;
    height: 1px !important;
    bottom: -4px !important;
}

/* SEARCH BOX LUXURY */
.search-box {
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 40px !important;
}

.search-box:hover,
.search-box:focus-within {
    border-color: var(--lux-gold) !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.15) !important;
}

.search-btn {
    background: var(--grad-gold) !important;
    color: #000 !important;
}

/* ICON BUTTONS */
.icon-btn {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
}

.icon-btn:hover {
    border-color: var(--lux-gold) !important;
    color: var(--lux-gold) !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2) !important;
    background: rgba(212, 175, 55, 0.05) !important;
}

/* SUB NAV */
.sub-nav {
    width: 100% !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: none !important;
    border-top: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

.sub-nav-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    /* Force Single Line */
    justify-content: flex-start !important;
    /* Prevents left side clipping */
    overflow-x: auto !important;
    /* Safe scroll if needed */
    gap: 8px !important;
    /* Reduced for fit */
    padding: 5px 0 !important;
    width: 100% !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.sub-nav-links::-webkit-scrollbar {
    display: none !important;
}

.sub-nav-link {
    white-space: nowrap !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: transparent !important;
    flex-shrink: 0 !important;

    /* COMPACT STYLING TO FIT */
    padding: 6px 14px !important;
    font-size: 0.8rem !important;
    /* Slightly smaller text */
    letter-spacing: 0.02em !important;
}

/* Add margin-auto to first and last child to center the group if there's extra space */
.sub-nav-link:first-child {
    margin-left: auto !important;
}

.sub-nav-link:last-child {
    margin-right: auto !important;
}



/* HERO TITLE */
.hero-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
    line-height: 1.1 !important;
    background: linear-gradient(135deg, #fff 0%, #e0e7ff 50%, #d4af37 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 30px rgba(99, 102, 241, 0.3));
    margin-bottom: 1.5rem !important;
}

/* HERO BADGE */
.hero-badge {
    background: rgba(212, 175, 55, 0.1) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    color: var(--lux-gold-light) !important;
    border-radius: 50px !important;
    padding: 8px 20px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.1) !important;
}

/* CARDS - "FLOAT GLASS" */
.profile-card,
.person-card,
.value-card,
.stat-item,
.vm-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(40px) !important;
    /* ULTRA BLUR */
    border-radius: 20px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
}

.profile-card:hover,
.person-card:hover,
.value-card:hover,
.stat-item:hover,
.vm-card:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(212, 175, 55, 0.05)) !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(212, 175, 55, 0.1) !important;
}

/* STATS */
.stat-number {
    font-family: 'Cinzel', serif !important;
    color: var(--lux-gold) !important;
    -webkit-text-fill-color: var(--lux-gold) !important;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

/* IMAGES */
img {
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.person-image img,
.profile-image img,
.about-image img {
    border-radius: 16px !important;
    filter: brightness(0.9) contrast(1.1) grayscale(0.2) !important;
}

.person-card:hover img,
.profile-card:hover img {
    filter: brightness(1.1) contrast(1.1) grayscale(0) !important;
    transform: scale(1.05) !important;
}


button {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--grad-gold);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

button:hover::before {
    opacity: 0.1;
}

/* UTILITY BAR - "THE RIBBON" */
.utility-bar {
    background: linear-gradient(90deg, #0f0f13 0%, #1a1a20 50%, #0f0f13 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px;
    margin-bottom: 5px;
}

.announce-track p {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: rgba(255, 255, 255, 0.6) !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.75rem !important;
}


@keyframes float-lux {

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

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

@keyframes gold-shine {
    0% {
        background-position: -200%;
    }

    100% {
        background-position: 200%;
    }
}

.hero-stats .stat-item:nth-child(1) {
    animation-delay: 0.1s;
}

.hero-stats .stat-item:nth-child(2) {
    animation-delay: 0.2s;
}

.hero-stats .stat-item:nth-child(3) {
    animation-delay: 0.3s;
}

.hero-stats .stat-item:nth-child(4) {
    animation-delay: 0.4s;
}

.stat-item {
    animation: fade-in-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* FOOTER / DARK MODE ENHANCEMENTS */
.team-testimonials {
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.team-testimonial__quote {
    font-family: 'Playfair Display', serif !important;
    font-style: italic;
    font-size: 1.2rem !important;
    color: var(--lux-platinum) !important;
}

/* MOBILE OPTIMIZATIONS */
@media (max-width: 768px) {
    .header {
        background: rgba(5, 5, 5, 0.95) !important;
        flex-direction: row !important;
        /* Keep logo and hamburger side by side */
        padding: 5px 15px !important;
        /* Reduced padding */
        height: auto !important;
        /* Allow growing if needed */
        min-height: 70px !important;
    }

    /* Scale down Brand for Mobile to prevent taking too much space */
    .brand-logo img {
        height: 40px !important;
    }

    .brand-text h1 {
        font-size: 1.1rem !important;
        /* Much smaller */
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.3) !important;
    }

    .brand-text p {
        font-size: 0.6rem !important;
        letter-spacing: 0.05em !important;
    }

    .brand {
        gap: 2px !important;
    }

    .hero-title {
        font-size: 2.2rem !important;
    }

    /* Sub Nav visibility handling */
    .nav-content {
        display: none !important;
        /* Standard Menu behavior */
    }

    .nav-content.active {
        display: flex !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: auto !important;
        background: rgba(5, 5, 5, 0.98) !important;
        /* Darker opaque background */
        backdrop-filter: blur(20px) !important;
        padding: 20px !important;
        border-bottom: 1px solid var(--lux-gold) !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    }
}