/* ========================= */
/* 0. ROOT VARIABLES & GLOBAL */
/* ========================= */
:root {
    /* MCA Branding Mapping */
    --mca-blue: #003c82; /* Primary (Trust/Navy) */
    --mca-gold: #ffc107; /* Accent (Attention/Gold) */
    --mca-navy: #002244; /* Dark Background */
    --mca-light-gray: #f8f9fa;
    /* Original Variables (Mapped to MCA Brand) */
    --navy: var(--mca-blue);
    --gold: var(--mca-gold);
    --muted: #6c757d;
}

/* Global Utility Classes */
.text-mca-blue {
    color: var(--mca-blue) !important;
}

.bg-mca-blue {
    background-color: var(--mca-blue) !important;
}

.bg-mca-gold {
    background-color: var(--mca-gold) !important;
}

.text-mca-gold {
    color: var(--mca-gold) !important;
}


/* ========================= */
/* 1. HERO & CONTENT SECTIONS (Unchanged) */
/* ========================= */

.hero-section {
    position: relative;
    overflow: hidden;
}

.hero-bg {
    background: linear-gradient(rgba(0, 45, 100, 0.9), rgba(0, 45, 100, 0.9)), url('/images/hero-bg-sea.jpg') center/cover no-repeat fixed;
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-section .container {
    position: relative;
    z-index: 2;
}

.hero-card {
    margin-top: 20px;
}

.hero-wave {
    display: block;
    width: 100%;
    height: 80px;
    margin-top: -1px;
}

.service-card {
    transition: transform .35s ease, box-shadow .35s ease;
    border-bottom: 3px solid transparent;
}

    .service-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.12);
        border-bottom-color: var(--mca-gold);
    }

.cta-section {
    background: linear-gradient(90deg, var(--mca-blue) 0%, #0056b3 100%);
    padding: 36px 0;
}

@media (max-width: 767px) {
    /* .hero-card { display: none; } */
}


/* ========================= */
/* 2. FLOATING, ROUNDED NAVBAR (OPAQUE FIX) */
/* ========================= */

/* 1. Initial Solid State (Now fully opaque) */
.custom-navbar,
.transparent-navbar {
    /* Set solid background color (MCA Blue) */
    background-color: var(--mca-blue) !important;
    /* Apply box shadow immediately to enhance the 'floating' look */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    /* Positioning and Size */
    left: 1rem;
    right: 1rem;
    width: auto;
    padding-top: 15px;
    padding-bottom: 15px;
    transition: all 0.4s ease;
    border-radius: 12px;
    z-index: 1030;
}

    /* Link Styling - Now that the background is solid, links don't need text-shadow */
    .transparent-navbar .nav-link,
    .transparent-navbar .navbar-brand {
        color: #ffffff !important;
        text-shadow: none; /* Removed text shadow */
    }

        .transparent-navbar .nav-link:hover {
            color: var(--mca-gold) !important;
        }

    /* Request Quote Button (Initial State) */
    .transparent-navbar .quote-btn {
        background-color: var(--mca-gold) !important;
        border-color: var(--mca-gold) !important;
        color: var(--mca-blue) !important;
        transition: all 0.3s ease;
    }

/* 2. Scrolled/Solid State (The SHRINK) */
/* The scrolled state remains mostly the same, as the initial state is now also solid blue. */
.scrolled-navbar {
    background-color: var(--mca-blue) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    /* SMALLER END PADDING (The shrinking effect) */
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 12px;
}

    .scrolled-navbar .nav-link,
    .scrolled-navbar .navbar-brand {
        color: #ffffff !important;
    }

/* Logo Sizing & Shrinking */
.navbar-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
    transition: all 0.4s ease;
}

.scrolled-navbar .navbar-logo {
    height: 35px; /* Shrinks logo on scroll */
}

/* Mobile Fix: Ensures full width on mobile view and solid background */
@media (max-width: 991.98px) {
    .custom-navbar,
    .transparent-navbar {
        left: 0;
        right: 0;
        border-radius: 0;
    }

        .transparent-navbar .navbar-collapse {
            background-color: var(--mca-blue);
            border-radius: 0 0 12px 12px;
            margin-top: 10px;
            padding: 10px 15px;
        }
}