/* =====================================
   Laptop (992px)
===================================== */

@media (max-width:992px){

    .logo img{
        width:220px;
    }

    .about-grid{
        grid-template-columns:1fr;
        text-align:center;
        gap:40px;
    }

    .features{
        grid-template-columns:repeat(2,1fr);
    }

}


/* =====================================
   Tablet (768px)
===================================== */

@media (max-width:768px){

    header .container{
        padding:15px 0;
    }

    .logo img{
        width:180px;
    }

    .hamburger{
        display:block;
    }

    nav{
        position:absolute;
        top:75px;
        left:0;
        width:100%;
        background:#2d1b12;
        display:none;
    }

    nav.active{
        display:block;
    }

    nav ul{
        flex-direction:column;
        gap:0;
    }

    nav ul li{
        border-top:1px solid rgba(255,255,255,.15);
    }

    nav ul li a{
        display:block;
        padding:18px;
        text-align:center;
    }

    .hero h1{
        font-size:42px;
    }

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

    .buttons{
        flex-direction:column;
        align-items:center;
    }

    .mySwiper,
    .lavazzaSwiper{
        padding:20px 45px 60px;
    }

}


/* =====================================
   Mobile (576px)
===================================== */

@media (max-width:576px){

    section{
        padding:70px 0;
    }

    h2{
        font-size:30px;
    }

    .logo img{
        width:150px;
    }

    .hero h1{
        font-size:32px;
    }

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

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

    .card img{
        height:200px;
    }

    .swiper-button-next,
    .swiper-button-prev{
        transform:scale(.7);
    }

    .whatsapp,
    .call{
        width:50px;
        height:50px;
        font-size:22px;
    }

}

/*============================
Coffee Machines Responsive
=============================*/

@media(max-width:992px){

.machine-grid{

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

}

}

@media(max-width:768px){

.machine-grid{

grid-template-columns:1fr;

}

.machine-card img{

height:250px;

}

.section-subtitle{

font-size:16px;

}

}

@media (max-width:768px){

    .modal-content{

        width:95%;

        padding:25px;

    }

    .modal-content img{

        width:170px;

    }

    .modal-content h2{

        font-size:24px;

    }

    .modal-content p{

        font-size:15px;

        line-height:1.7;

    }

    .modal-btn{

        width:100%;

        display:flex;

        justify-content:center;

        align-items:center;

    }

}

@media (max-width:480px){

    .modal-content{

        padding:20px;

    }

    .modal-content img{

        width:140px;

    }

    .close-modal{

        font-size:30px;

    }

}