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

@media (max-width:1200px){

    .container{
        width:94%;
    }

}

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

@media (max-width:992px){

    .container{
        width:95%;
    }

    .hero-wrapper,
    .about-wrapper,
    .contact-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }

    .hero-content,
    .about-content{
        text-align:center;
    }

    .hero-buttons,
    .hero-stats{
        justify-content:center;
    }

    /* Existing grids */

    .category-grid,
    .why-grid,
    .testimonial-grid,
    .footer-grid{
        grid-template-columns:repeat(2,1fr);
    }

    /* Products */

    .product-grid{
        grid-template-columns:repeat(2,1fr);
        gap:24px;
    }

    .category-heading h2{
        font-size:36px;
    }

    .bulk-content h2{
        font-size:36px;
    }

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

    .about-image img{
        height:auto;
    }

    .experience-box{
        position:static;
        margin:20px auto 0;
        right:auto;
        bottom:auto;
        max-width:220px;
    }

}

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

@media (max-width:768px){

    .container{
        width:92%;
    }

    section{
        padding:60px 0;
    }

    .top-bar{
        display:none;
    }

    .hero{
        min-height:auto;
        padding:60px 0;
    }

    .hero-wrapper,
    .about-wrapper,
    .contact-wrapper{
        grid-template-columns:1fr;
        gap:30px;
    }

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

    .hero p{
        font-size:16px;
        max-width:100%;
    }

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

    .hero-buttons .btn,
    .btn{
        width:100%;
        max-width:300px;
    }

    .hero-stats{
        flex-wrap:wrap;
        justify-content:center;
        gap:15px;
    }

    .stat{
        min-width:120px;
    }

    .hero-form{
        width:100%;
        padding:24px;
    }

    .about-image img{
        width:100%;
        height:auto;
    }

    .experience-box{
        position:static;
        margin:20px auto 0;
        right:auto;
        bottom:auto;
        max-width:200px;
        padding:20px;
    }

    /* Existing grids */

    .about-features,
    .category-grid,
    .why-grid,
    .testimonial-grid,
    .footer-grid,
    .stats-wrapper{
        grid-template-columns:1fr;
    }

    /* Products */

    .product-category{
        padding:70px 0;
    }

    .category-heading{
        margin-bottom:40px;
    }

    .category-heading h2{
        font-size:30px;
    }

    .category-heading p{
        font-size:16px;
    }

    .product-grid{
        grid-template-columns:1fr;
        gap:24px;
    }

    .bulk-order{
        padding:70px 0;
    }

    .bulk-content h2{
        font-size:30px;
    }

    .bulk-content p{
        font-size:16px;
    }

    .single-stat{
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.1);
    }

    .single-stat:last-child{
        border-bottom:none;
    }

    .section-title h2,
    .about-content h2{
        font-size:36px;
    }

}

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

@media (max-width:480px){

    .hero h1,
    .about-content h2{
        font-size:30px;
    }

    .products-hero h1{
        font-size:38px;
    }

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

    .category-heading h2{
        font-size:28px;
    }

    .product-content{
        padding:20px;
    }

}