/* ===========================================
   RESPONSIVE
=========================================== */

/* Tablets */
@media (max-width: 992px){

    .hero-grid{

        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;

    }

    .hero-content{

        max-width: 100%;

    }

    .hero p{

        margin-left: auto;
        margin-right: auto;

    }

    .hero-buttons{

        justify-content: center;

    }

    .hero-stats{

        justify-content: center;

    }

    .hero h1{

        font-size: 3.5rem;

    }

    .map-placeholder{

        max-width: 400px;

    }

    .about-grid{

        grid-template-columns: 1fr;

    }

}

/* Mobile */
@media (max-width: 768px){

    .nav-links{

        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        background: rgba(255,255,255,.98);
        backdrop-filter: blur(12px);
        flex-direction: column;
        padding: 2rem;
        gap: 1.5rem;
        transform: translateX(100%);
        transition: var(--transition);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-md);

    }

    .nav-links.active{

        transform: translateX(0);

    }

    .hamburger{

        display: flex;

    }

    .btn-nav{

        display: none;

    }

    .hero h1{

        font-size: 2.8rem;

    }

    .hero-stats{

        gap: 1.5rem;
        flex-wrap: wrap;

    }

    .hero-buttons{

        flex-direction: column;
        align-items: center;
        gap: .8rem;

    }

    .hero-buttons .btn{

        width: 100%;
        max-width: 280px;

    }

    .hero{

        min-height: auto;
        padding: 4rem 0;

    }

    .map-placeholder{

        max-width: 300px;

    }

    h1{

        font-size: 2.8rem;

    }

    h2{

        font-size: 2rem;

    }

    .section{

        padding: var(--space-lg) 0;

    }

    .expertise-card{

        padding: 1.5rem;

    }

}

/* Small Mobile */
@media (max-width: 480px){

    .hero h1{

        font-size: 2.2rem;

    }

    .map-placeholder{

        max-width: 250px;

    }

    .stat-number{

        font-size: 1.5rem;

    }

    .logo h2{

        font-size: 1.3rem;

    }

    .logo span{

        font-size: .75rem;

    }

}