/* ==========================================
   RESPONSIVE
========================================== */


/* ==========================================
   DESKTOP / LAPTOP
========================================== */

@media (max-width:1200px){

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

}


/* ==========================================
   TABLET
========================================== */

@media (max-width:1024px){

    .header-wrapper{
        gap:15px;
    }

    .category-btn span{
        display:none;
    }

}


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

@media (max-width:768px){

    /* Header */

    .header-wrapper{
        height:70px;
        gap:12px;
    }

    .logo img{
        height:40px;
    }

    .search-wrapper{
        display:none;
    }

    .category-btn{
        display:none;
    }

    .mobile-menu{
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:26px;
    }

    .login-btn{
        padding:10px 16px;
        font-size:14px;
    }

    /* Hero */

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

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

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    /* Product */

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

    .product-body{
        padding:18px;
    }

    .product-body h3{
        font-size:17px;
        min-height:auto;
    }

    .price{
        font-size:20px;
    }

}


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

@media (max-width:480px){

    .header-wrapper{
        height:64px;
    }

    .logo img{
        height:35px;
    }

    .login-btn{
        padding:8px 14px;
        font-size:13px;
    }

    .hero{
        padding:60px 0;
    }

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

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

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

}

@media(max-width:1200px){

.category-grid{

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

}

}

@media(max-width:768px){

.category-grid{

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

gap:18px;

}

}

@media(max-width:480px){

.category-grid{

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

}

.category-card{

padding:18px;

}

.category-card img{

width:70px;

height:70px;

}

.category-card h3{

font-size:16px;

}

}

@media(max-width:1200px){

.brand-grid{

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

}

}

@media(max-width:768px){

.brand-grid{

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

gap:18px;

}

}

@media(max-width:480px){

.brand-card{

height:95px;

}

.brand-card img{

max-width:90px;

}

}

@media(max-width:1200px){

.news-grid{

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

}

}

@media(max-width:768px){

.news-grid{

grid-template-columns:1fr;

gap:20px;

}

.news-content{

padding:20px;

}

.news-content h3{

font-size:20px;

}

}

/*==========================
WHY US
==========================*/

@media(max-width:1024px){

.why-grid{

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

}

}

@media(max-width:768px){

.why-grid{

grid-template-columns:1fr;

gap:24px;

}

.section-header.center h2{

font-size:38px;

}

.why-card{

padding:36px 26px;

}

}

@media(max-width:992px){

.featured-wrapper{

grid-template-columns:1fr;

text-align:center;

padding:50px;

}

.featured-buttons{

justify-content:center;

flex-wrap:wrap;

}

}

@media(max-width:768px){

.featured-content h2{

font-size:36px;

}

.featured-wrapper{

padding:40px 30px;

}

}

/*==================================
PRODUCT PAGE
==================================*/

@media(max-width:1200px){

#allProducts{

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

}

.products-layout{

grid-template-columns:240px 1fr;

}

}

@media(max-width:768px){

.products-layout{

grid-template-columns:1fr;

}

.sidebar{

position:static;

margin-bottom:30px;

}

.products-top{

flex-direction:column;

align-items:flex-start;

gap:20px;

}

#allProducts{

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

gap:20px;

}

}

@media(max-width:480px){

#allProducts{

grid-template-columns:1fr;

}

.page-hero{

padding:60px 0;

}

.page-hero h1{

font-size:36px;

}

}

/*==================================
FOOTER
==================================*/

@media(max-width:992px){

.footer-grid{

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

gap:40px;

}

}

@media(max-width:768px){

.footer{

padding:60px 0 25px;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-about{

display:flex;

flex-direction:column;

align-items:center;

}

.footer-social{

justify-content:center;

}

.footer-about p{

max-width:100%;

}

}

@media (max-width:768px){

.header-right{

    margin-left:auto;

    display:flex;

    align-items:center;

}

}

/*==================================
LOGIN
==================================*/

@media(max-width:768px){

.login-page{

padding:30px 15px;

}

.login-card{

padding:35px 25px;

border-radius:24px;

}

.login-logo img{

width:170px;

}

.login-card h1{

font-size:30px;

}

.login-description{

font-size:15px;

}

.login-options{

flex-direction:column;

gap:15px;

align-items:flex-start;

}

}

/*==================================
ABOUT PAGE
==================================*/

@media(max-width:1024px){

.about-grid{

grid-template-columns:1fr;

}

.stats-grid{

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

}

.brand-grid{

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

}

.contact-grid{

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

}

}

@media(max-width:768px){

.timeline::before{

display:none;

}

.timeline-item{

flex-direction:column;

}

.timeline-year{

margin-bottom:20px;

}

.stats-grid,

.brand-grid,

.contact-grid{

grid-template-columns:1fr;

}

.about-content h2{

font-size:34px;

}

.cta-banner{

padding:50px 30px;

}

.cta-banner h2{

font-size:34px;

}

.map-wrapper iframe{

height:320px;

}

}

@media(max-width:768px){

.section h2{

font-size:28px;

}

.section p{

font-size:15px;

}

.cta-banner{

padding:45px 25px;

}

.cta-banner h2{

font-size:30px;

}

}