/* =========================
   1200px
========================= */

@media (max-width:1200px){

    .hero{
        padding:45px 24px;
    }

    .mainOptions{
        width:100%;
        max-width:1200px;
        padding:0 24px;
    }

    .products{
        width:100%;
        max-width:1200px;
        padding:0 24px;
        grid-template-columns:repeat(3,1fr);
    }

}

/* =========================
   992px
========================= */

@media (max-width:992px){

    .nav-content{
        display:grid;
        grid-template-columns:auto 1fr;
        grid-template-areas:
            "logo menu"
            "button button";
        align-items:center;
        gap:20px;
        height:auto;
        padding:20px 32px;
    }

    .logo{
        grid-area:logo;
    }

    .menu{
        grid-area:menu;
        display:flex;
        justify-content:center;
        align-items:center;
        gap:30px;
        list-style:none;
    }

    .contact-btn{
        grid-area:button;
        justify-self:center;
        width:260px;
        text-align:center;
    }

    .mainOptions{
        padding:0 24px;
    }

    .products{
        grid-template-columns:repeat(2,1fr);
        padding:0 24px;
    }

}

/* =========================
   768px
========================= */

@media (max-width:768px){

    .container{
        padding:0 20px;
    }


    .logo{
        grid-area:logo;
        justify-content:center;
    }

    .menu{
        grid-area:menu;
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:20px;
    }

    .contact-btn{
        grid-area:button;
        width:260px;
    }

    .hero{
        padding:35px 20px;
    }

    .mainOptions{
        padding:0;
        gap:10px;
    }

    .mainOptions div{
        flex:1 1 calc(50% - 10px);
        text-align:center;
    }

    .products{
        grid-template-columns:1fr;
        padding:0;
        gap:20px;
    }

    .product{
        max-width:500px;
        width:100%;
        margin:auto;
    }

}

/* =========================
   480px
========================= */

@media (max-width:480px){

    .container{
        padding:0 16px;
    }

    .logo img{
        width:44px;
        height:44px;
    }

    .logo h2{
        font-size:24px;
    }

    .menu{
        gap:15px;
    }

    .menu a{
        font-size:16px;
    }

    .contact-btn{
        width:100%;
        max-width:260px;
    }

    .hero{
        padding:30px 16px;
    }

    .mainOptions{
        gap:10px;
    }

    .mainOptions div{
        flex:1 1 100%;
    }

    .products{
        gap:20px;
    }

    .product img{
        height:220px;
    }

    .product-info{
        padding:16px;
    }

    .product h3{
        font-size:20px;
    }

    .product h4{
        font-size:14px;
    }

    .product p{
        font-size:18px;
    }

    .product button{
        padding:12px;
    }

}