:root{
    --brand: #091957; /* main brand color */
    --accent: #C5A352; /* accent/gold */
    --card-bg: rgba(255,255,255,0.98); /* light card background sitting on dark page */
    --card-text: #0f1724; /* dark text for cards */
    --muted-on-dark: #ededed; /* muted text for dark backgrounds */
    --text-on-brand: #f7fbff; /* headings / important text on brand */
}
/* Import the Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
* {
    font-family: "Lato", sans-serif;
}
.montserrat-bold {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700;
}
.montserrat-semi {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600;
}
/* === SMOOTH SCROLLING IMPLEMENTATION === */
html {
    /* Enables smooth animation for anchor link clicks */
    scroll-behavior: smooth;
    /* Adds offset equal to the header height (h-20 = 5rem) so fixed header doesn't cover content */
    scroll-padding-top: 5rem; 
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--brand); /* Page background set to main color */
    color: var(--muted-on-dark); /* Light default text color for contrast on dark background */
    /* Initially hide overflow to prevent scrolling content while splash screen is visible */
    overflow: hidden; 
}
section {
    overflow: hidden;
}
/* Define a custom, deep navy color for the premium feel */
.bg-prestige-dark {
    background-color: var(--brand); /* Updated main color */
}
.text-prestige-accent {
    color: var(--accent) !important; /* Gold/Bronze Accent (Kept for accent) */
}
.border-prestige-accent {
    border-color: var(--accent);
}

/* Explore overlay: use brand tint instead of gray overlay */
#explore-message {
    background-color: transparent;
    color: var(--muted-on-dark);
}

/* Make the footer match the brand for a cohesive end section */
footer {
    background-color: var(--brand) !important;
}

/* Make entire page sections use the brand background (so page isn't white)
    while keeping inner card elements readable via their card-bg rule above */
section.bg-white, section.bg-gray-50, section.bg-gray-100 {
    background-color: var(--brand) !important;
    color: var(--card-text) !important;
}

/* Header and mobile menu: use brand background and light link colors */
header.bg-white {
    background-color: var(--brand) !important;
}
/* header.bg-white a, #mobile-menu.bg-white a {
    color: var(--muted-on-dark) !important;
} */
/* Mobile menu container (when visible) */
#mobile-menu.bg-white {
    background-color: var(--brand) !important;
}

/* Footer link color adjustments */
footer a { color: rgba(255,255,255,0.9); }

/* Custom Timeline Styles for better visual flow (used in Project Journey) */
.timeline-step {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 2.5rem;
}
.timeline-step::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.25rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: #d4af37; /* Accent color for the point */
    z-index: 10;
    box-shadow: 0 0 0 4px #e5e7eb; /* Light gray ring */
}
.timeline-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 0.45rem;
    top: 1.25rem;
    bottom: -2.5rem;
    width: 2px;
    background-color: #ccc; /* Connector line */
}
#book-call {
    margin-bottom: 5em;
}
.nav-menu:hover {
    color: var(--accent) !important;
}
/* Mobile-friendly adjustment for the timeline */
@media (min-width: 768px) {
    .timeline-step {
        padding-left: 3rem;
    }
    .timeline-step::before {
        left: 0.5rem;
    }
    .timeline-step:not(:last-child)::after {
        left: 0.95rem;
    }
    
}
@media (max-width: 768px) {
    #book-call {
        margin-bottom: 0 !important;
    }
}