/*========================================
            TABLET
========================================*/

@media(max-width:1200px){

    .hero-left h1{

        font-size:54px;

    }

    .contact-wrapper{

        grid-template-columns:1fr;

    }

    .contact-map iframe{

        height:450px;

    }

}

/*========================================
            TABLET
========================================*/

@media(max-width:992px){

    nav{

        display:none;

    }

    #header .container{

        height:80px;

    }

    .logo img{

        height:55px;

    }

    .hero-content{

        flex-direction:column;

        justify-content:center;

        text-align:center;

    }

    .hero-left{

        width:100%;

    }

    .hero-buttons{

    flex-direction:column;

    align-items:center;

    gap:15px;

}

.btn-orange,
.btn-white{

    width:220px;

}

    .about-list{

        grid-template-columns:1fr 1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

}

/*========================================
            MOBILE
========================================*/

@media(max-width:768px){

    .container{

        width:92%;

    }

    .phone-btn{

        display:none;

    }

    .hero-left h1{

    font-size:32px;

    line-height:1.25;

    letter-spacing:-1px;

    margin-bottom:18px;

}

.hero-left p{

    font-size:16px;

    line-height:1.7;

    margin-bottom:30px;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

    gap:15px;

}

.btn-orange,
.btn-white{

    width:220px;

}


    .section-title h2{

        font-size:30px;

    }

    .product-grid{

        grid-template-columns:1fr;

    }

    .why-grid{

        grid-template-columns:1fr;

    }

    .about-list{

        grid-template-columns:1fr;

    }

    .contact-buttons{

        flex-direction:column;

    }

    .btn-orange,
    .btn-white{

        width:100%;

        text-align:center;

    }

}

/*========================================
            SMALL PHONE
========================================*/

@media(max-width:480px){

    #header .container{

        height:75px;

    }

    .logo img{

        height:45px;

    }

    #hero{

    padding-top:110px;

}

    .hero-left h1{

        font-size:34px;

    }

    .hero-left p{

        font-size:16px;

    }

    .section-title h2{

        font-size:30px;

    }

    .product-card h3{

        font-size:20px;

    }

}