/* --------------------------------------------------------------------------
   RESPONSIVE SWITCHING
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .hero-actions .btn-primary, 
    .hero-actions .btn-secondary {   
        margin-bottom: 16px;
    }

    #global-header {
        top: 12px;
        width: 94%;
    }

    .pill-navbar {
        padding: 12px 20px;
    }

    .desktop-nav {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .hero-section {
        height: auto;
        padding: 140px 0 80px 0;
    }

    .quote-slider {
        height: 8.5rem;
    }

    .quote-item {
        font-size: 2.1rem;
        padding: 0 16px;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
        padding: 0 16px;
    }

    .about-grid, .services-grid {
        grid-template-columns: 1fr;
    }

    .hero-actions .btn-primary, 
    .hero-actions .btn-secondary {
        width: 100%;
       
    }

    /* --------------------------------------------------------------------------
   SLIDING MOBILE MENU DRAWER
   -------------------------------------------------------------------------- */


.mobile-nav-links a {
    color: var(--c028_solid);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}

.mobile-nav-links a:hover {
    color: var(--c021_solid);
}

}