/* --- MOBILE RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 991px) {

    .site-header {
        background-color: #ffffff !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
}

    /* 2. Style the dropdown menu container */
    .navbar-collapse {
        background-color: #ffffff;
        position: absolute;
        /*Floatsthemenuoverthepageinsteadofpushingcontentdown*/top: 100%;
        /*Startsexactlyatthebottomoftheheader*/left: 0;
        width: 100%;
        padding: 1.5rem;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
        border-top: 1px solid var(--border-color);
        z-index: 1050;
        border-radius: 0 0 12px 12px;
}

    /* 3. Space out the mobile navigation links */
    .navbar-nav {
        display: flex;
        flex-direction: column;
        gap: 15px; /* Spacing between links */
        text-align: center; /* Centers the links for a cleaner mobile look */
    }

    .navbar-nav .nav-link {
        font-size: 1.1rem;
        padding: 10px 0;
    }
    /* 1. Reduce the top spacing below the navbar */
    .hero-section {
        padding-top: 100px; 
        padding-bottom: 40px;
    }

    /* 2. Shrink the main heading size for mobile */
    .display-3 {
        font-size: 2.75rem; 
    }

    /* 3. Remove the massive gap below the buttons */
    .hero-content {
        padding-bottom: 20px; 
        text-align: center; /* Optional: centers the hero text on mobile for a cleaner look */
    }
    
    /* Center the buttons on mobile if the text is centered */
    .hero-content .d-flex {
        justify-content: center;
    }

    /* 4. Reset the desktop min-height and pull the 3D image up */
    .hero-graphic-wrapper {
        min-height: 250px; /* Reduced from 450px */
        margin-top: 10px; /* Tightens the gap between buttons and the image */
    }

    /* 5. Adjust the floating stats card overlap for mobile */
    .hero-stats-container {
        margin-top: -30px; 
    }
    
    /* Add borders to the bottom of the first two stats on mobile instead of just the left side */
    .border-start {
        border-left: none !important;
    }
    
    .hero-stats-card .col-6:nth-child(1),
    .hero-stats-card .col-6:nth-child(2) {
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 20px;
        margin-bottom: 20px !important;
    }
    
    .hero-stats-card .col-6:nth-child(even) {
        border-left: 1px solid var(--border-color);
    }
}
@media (max-width: 767px) {
    /* Shrink the CTA text so it fits next to the button */
    .cta-title {
        font-size: 1.15rem !important;
        line-height: 1.3;
    }
    
    .cta-subtitle {
        font-size: 0.65rem;
    }

    /* Adjust the button padding for mobile */
    .btn-cta {
        padding: 8px 12px;
        font-size: 0.85rem;
    }
    
    /* Make the SVG arrow in the button smaller */
    .btn-cta svg {
        width: 14px;
        height: 14px;
    }
    
    /* Give the map section some breathing room on mobile */
    .map-container {
        padding: 30px 20px !important;
    }
}