@media(max-width:991px){

    .navbar,
    .consult-btn{
        display:none;
    }

    .menu-toggle{
        display:block;
    }

}
/* ====================================
   Large Devices (1200px)
==================================== */

@media (max-width:1200px){

    .container{
        max-width:95%;
    }

    .mega-menu{
        width:550px;
    }

}


/* ====================================
   Laptop & Tablet
==================================== */

@media (max-width:991px){

    .navbar,
    .consult-btn{
        display:none;
    }

    .menu-toggle{
        display:block;
    }

    .header-container{
        height:80px;
    }

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

    .hero{
        height:80vh;
    }

    .hero-content h1{
        font-size:45px;
    }

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

    .about-section .container{
        grid-template-columns:1fr;
        gap:40px;
    }

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

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

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

    .process-grid{
        grid-template-columns:repeat(3,1fr);
    }

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

    .market-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .footer .container{
        grid-template-columns:1fr 1fr;
    }

}


/* ====================================
   Mobile Devices
==================================== */

@media (max-width:767px){

    section{
        padding:60px 0;
    }

    .container{
        padding:0 15px;
    }

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

    .hero{
        height:70vh;
        text-align:center;
    }

    .hero-content{
        padding:0 15px;
    }

    .hero-content h1{
        font-size:32px;
        line-height:1.3;
    }

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

    .hero-btns{
        flex-direction:column;
        gap:10px;
    }

    .btn-primary,
    .btn-secondary{
        width:100%;
        text-align:center;
    }

    .section-title h2{
        font-size:28px;
    }

    .about-content h2{
        font-size:28px;
    }

    .brand-grid,
    .product-grid,
    .why-grid,
    .process-grid,
    .quality-grid,
    .market-grid{
        grid-template-columns:1fr;
    }

    .product-card img{
        height:220px;
    }

    .brand-box,
    .product-card,
    .why-box{
        margin-bottom:10px;
    }

    .cta-section h2{
        font-size:28px;
    }

    .cta-section p{
        font-size:15px;
    }

    .footer .container{
        grid-template-columns:1fr;
        gap:30px;
    }

    .footer-bottom-wrap{
        flex-direction:column;
        text-align:center;
        gap:10px;
    }

}


/* ====================================
   Small Mobile
==================================== */

@media (max-width:480px){

    .header-container{
        height:70px;
    }

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

    .menu-toggle{
        font-size:24px;
    }

    .mobile-menu{
        width:280px;
    }

    .hero{
        height:65vh;
    }

    .hero-content h1{
        font-size:26px;
    }

    .hero-content p{
        font-size:14px;
    }

    .section-title h2{
        font-size:24px;
    }

    .about-content h2{
        font-size:24px;
    }

    .process-grid div,
    .quality-grid div,
    .market-grid div{
        padding:18px;
    }

    .footer{
        padding-top:50px;
    }

    .footer-col h3{
        font-size:20px;
    }

}

@media(max-width:991px){

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

}

@media(max-width:767px){

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

    .product-item{
        padding:10px;
    }

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

}

@media(max-width:480px){

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

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

    .hero-slide{
        height:70vh;
    }

    .hero-content h1{
        font-size:34px;
    }

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

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

    .brochure-download{
        left:15px;
        bottom:20px;

        padding:12px 18px;
        font-size:14px;
    }

}