 :root {
        --bg-topbar: #024b24; /* Dark Green */
        --bg-white: #ffffff;
        --text-dark: #222222;
        --text-light: #f8f9fa;
        --accent-gold: #d4af37; /* Metallic Gold */
        --accent-gold-hover: #b5952f;
    }

    body {
        font-family: 'Montserrat', sans-serif;
        color: var(--text-dark);
        overflow-x: hidden;
    }

    .btn-gold {
        background-color: var(--bg-topbar);
        color: var(--accent-gold);
        font-weight: 600;
        padding: 0.7rem 1.8rem;
        border: 2px solid var(--accent-gold);
        border-radius: 4px;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 0.9rem;
        white-space: nowrap;
        text-decoration: none;
        display: inline-block;
    }

    .btn-gold:hover {
        background-color: var(--accent-gold);
        color: var(--bg-white);
    }

    /* Hover card effect */
    .hover-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .hover-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    }

    /* --- HEADER TITLE ANIMATIONS --- */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes goldGlow {
        0%, 100% {
            filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.3));
        }
        50% {
            filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.7));
        }
    }

    .animate-badge {
        animation: fadeInUp 0.8s ease-out forwards;
    }

    .animate-title {
        animation: fadeInUp 1s ease-out 0.2s forwards;
        opacity: 0; /* Starts hidden for transition */
    }

    .animate-text {
        animation: fadeInUp 1.2s ease-out 0.4s forwards;
        opacity: 0;
    }

    .animate-buttons {
        animation: fadeInUp 1.4s ease-out 0.6s forwards;
        opacity: 0;
    }

    .gold-glow-text {
        color: #d4af37;
        display: inline-block;
        /* animation: goldGlow 3s infinite ease-in-out; */
    }
       .hero-banner {
    background: linear-gradient(rgba(2, 75, 36, 0.90), rgba(1, 42, 20, 0.94)), 
                url('../images/index-banner.png?auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; /* Added to prevent tiling */
    border-bottom: 3px solid var(--accent-gold);
    padding: 140px 0 90px 0; /* Shorthand padding */
    color: #ffffff;
}
    /* Responsive typography helpers */
    @media (max-width: 768px) {
        .hero-section {
            padding: 90px 0 !important;
            text-align: center;
        }
        .display-3 {
            font-size: 2.3rem !important;
        }
        .display-6 {
            font-size: 1.8rem !important;
        }
    }
    .form-control:focus,
        .form-select:focus {
            border-color: var(--accent-gold) !important;
            box-shadow: 0 0 0 4px rgba(212,175,55,0.12) !important;
        }