/* Core Color Palette */
:root {
    --primary-blue: #003399;    /* Corporate Deep Blue (Logo Background) */
    --light-blue: #00A8FF;      /* Light Blue (Map Detail) */
    --gold: #FFCC00;            /* Gold (Stars) */
    --gold-hover: #E6B800;
    --white: #FFFFFF;
}

.bg-primary { background-color: var(--primary-blue) !important; }
.text-gold { color: var(--gold) !important; }
.text-primary { color: var(--primary-blue) !important; }

/* Gold Button Design */
.btn-gold {
    background-color: var(--gold);
    color: var(--primary-blue); /* Better contrast with deep blue */
    border: none;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-gold:hover {
    background-color: var(--gold-hover);
    color: var(--primary-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 204, 0, 0.3);
}

/* Mobile Navigation Glassmorphism Effect */
.glass-menu {
    background: rgba(0, 51, 153, 0.75) !important; /* Deep Blue, semi-transparent */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-menu .offcanvas-title {
    color: var(--gold); /* Logo stars color for the title */
    font-weight: bold;
}

.glass-menu .nav-link {
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
    padding: 12px 15px;
    margin-bottom: 5px;
}

.glass-menu .nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--gold);
    border-radius: 8px;
    transform: translateX(8px);
}

/* Cards */
.card { 
    border: none; 
    box-shadow: 0 4px 20px rgba(0, 51, 153, 0.08); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

.card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 8px 25px rgba(0, 51, 153, 0.12); 
}

/* Slider Overlay */
.carousel-caption {
    background: rgba(0, 51, 153, 0.65); /* Using Primary Blue */
    backdrop-filter: blur(5px);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.carousel-caption h2 {
    color: var(--gold);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}