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



/*==============================================
    LARGE DEVICES
==============================================*/

@media (max-width: 1200px){

    .container{

        max-width: 1140px;

    }

    .hero .container,
    .about .container{

        gap: 60px;

    }

}



/*==============================================
    LAPTOPS
==============================================*/

@media (max-width: 992px){

    section{

        padding: 90px 0;

    }

    h1{

        font-size: 3.5rem;

    }

    h2{

        font-size: 2.5rem;

    }

    .hero .container{

        grid-template-columns: 1fr;

        text-align: center;

    }

    .hero-content{

        order: 2;

    }

    .hero-image{

        order: 1;

    }

    .hero-buttons{

        justify-content: center;

    }

    .about .container{

        grid-template-columns: 1fr;

    }

    .services-grid{

        grid-template-columns: repeat(2,1fr);

    }

    .portfolio-grid{

        grid-template-columns: repeat(2,1fr);

    }

    .product-grid{

        grid-template-columns: repeat(2,1fr);

    }

    .footer-grid{

        grid-template-columns: repeat(2,1fr);

    }

}



/*==============================================
    TABLETS
==============================================*/

@media (max-width: 768px){

    .container{

        padding-inline:20px;

    }

    section{

        padding:80px 0;

    }

    h1{

        font-size:3rem;

    }

    h2{

        font-size:2.2rem;

    }

    h3{

        font-size:1.6rem;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .hero-buttons .btn-primary,

    .hero-buttons .btn-secondary{

        width:100%;

    }

    .services-grid,

    .portfolio-grid,

    .product-grid{

        grid-template-columns:1fr;

    }

    .about-features{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

}



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

@media (max-width:576px){

    h1{

        font-size:2.5rem;

    }

    h2{

        font-size:2rem;

    }

    p{

        font-size:.95rem;

    }

    .service-card,

    .product-card,

    .portfolio-card{

        padding:20px;

    }

    .btn{

        width:100%;

        justify-content:center;

    }

}



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

@media (max-width:375px){

    h1{

        font-size:2.2rem;

    }

    h2{

        font-size:1.8rem;

    }

    .container{

        padding-inline:15px;

    }

}