/* ========================= */
/*       Tablet View         */
/* ========================= */

@media (max-width: 1024px){

    .header-container{
        flex-direction: column;
        gap: 25px;
    }

    nav ul{
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .hero-text h2{
        font-size: 55px;
    }

    .hero-text p{
        font-size: 20px;
    }

    .why-container,
    .contact-container{
        grid-template-columns: 1fr;
    }

}


/* ========================= */
/*       Mobile View         */
/* ========================= */

@media (max-width: 768px){

    .top-bar{
        flex-direction: column;
        gap: 10px;
        padding: 15px;
        text-align: center;
    }


    .header-container{
        flex-direction: column;
        gap: 25px;
    }


    nav ul{
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }


    .header-call{
        width: 100%;
    }

    .header-call a{
        justify-content: center;
    }


    .hero{
        height: auto;
        min-height: 100vh;
    }


    .hero-overlay{
        padding: 120px 0;
    }


    .hero-text{
        text-align: center;
    }


    .hero-text h2{
        font-size: 42px;
    }


    .hero-text p{
        font-size: 18px;
        line-height: 1.8;
    }


    .hero-buttons{
        justify-content: center;
    }


    .hero-btn{
        width: 100%;
        justify-content: center;
    }


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


    .statistics{
        grid-template-columns: 1fr;
    }


    .contact-info li{
        font-size: 16px;
        align-items: flex-start;
    }


    .map-box iframe{
        height: 300px;
    }


    .footer-container{
        flex-direction: column;
        text-align: center;
    }


    .footer-features{
        justify-content: center;
    }

}


/* ========================= */
/*       Small Phones        */
/* ========================= */

@media (max-width: 480px){

    .hero-text h2{
        font-size: 32px;
    }


    .hero-text p{
        font-size: 16px;
    }


    .section-title h2,
    .why-list h2,
    .contact-info h2{
        font-size: 30px;
    }


    .service-card{
        padding: 30px 20px;
    }


    .floating-buttons{
        left: 15px;
        bottom: 15px;
    }


    .float-btn{
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

}