/* =====================================
   TABLETS
===================================== */
@media (max-width:992px){

    .main-nav{
        display:none;
    }

    .header-btn{
        display:none;
    }

    .mobile-toggle{
        display:block;
    }

    .logo img{
        max-height:55px;
    }

    .container{
        width:90%;
        margin:auto;
    }
}


/* =====================================
   MOBILE
===================================== */
@media (max-width:768px){

    html{
        overflow-x:hidden;
    }

    body{
        overflow-x:hidden;
    }

    .container{
        width:92%;
    }

    section{
        padding:60px 0;
    }

    /* Hero */

    .hero{
        min-height:100vh;
        height:auto;
        padding:120px 0 70px;
        display:flex;
        align-items:center;
    }

    .hero-content{
        width:100%;
        max-width:100%;
        text-align:center;
    }

    .hero h1{
        font-size:40px;
        line-height:1.15;
    }

    .hero p{
        font-size:17px;
        margin:20px 0;
    }

    .hero-buttons{
        display:flex;
        flex-direction:column;
        gap:15px;
    }

    .hero-buttons a{
        width:100%;
    }

    /* Images */

    img{
        max-width:100%;
        height:auto;
    }

    /* Grid */

    .row,
    .grid,
    .columns{
        display:grid;
        grid-template-columns:1fr;
        gap:30px;
    }

    /* Footer */

    footer .row{
        grid-template-columns:1fr;
        text-align:center;
    }

}


/* =====================================
   SMALL DEVICES
===================================== */

@media (max-width:480px){

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

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

    .btn{
        width:100%;
    }

    h2{
        font-size:28px;
    }

}
@media (max-width:768px){

.products-home .section-title{
    grid-column:1 / -1;
    width:100%;
    text-align:center;
    margin-bottom:40px;
}

.products-home .products-grid{
    display:grid;
    grid-template-columns:1fr !important;
    gap:25px;
}

.products-home .product-card{
    width:100%;
}

.products-home .product-content h3{
    font-size:24px;
    word-break:normal;
    white-space:normal;
}

}
/* ==========================
   MOBILE FIX
========================== */
@media (max-width:768px){

    html,
    body{
        overflow-x:hidden !important;
    }

    .hero-stats{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:20px;
        width:100%;
    }

    .stat-card,
    .stat-box{
        width:100% !important;
        min-width:0 !important;
    }

    .container{
        width:92% !important;
        max-width:92% !important;
        margin:0 auto !important;
    }

}