/* ==========================================
   RESPONSIVE.CSS
   SirWay Responsive Design
========================================== */


/* ==========================================
   Large Desktop
========================================== */

@media (max-width:1400px){

.container{
    width:90%;
}

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

}


/* ==========================================
   Laptop
========================================== */

@media (max-width:1200px){

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

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

.brand-strip{
    justify-content:center;
}

.hero-image{
    max-width:550px;
    margin:auto;
}

.products-grid,
.collection-grid,
.editor-grid,
.category-grid{
    grid-template-columns:repeat(2,1fr);
}

.footer-main{
    grid-template-columns:repeat(2,1fr);
    gap:40px;
}

.club-container{
    grid-template-columns:1fr;
    gap:50px;
}

}


/* ==========================================
   Tablet
========================================== */

@media (max-width:992px){

.nav-links{
    display:none;
}

.search-box{
    display:none;
}

.navbar{
    justify-content:space-between;
}

.hero{
    padding:80px 0;
}

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

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

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

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

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

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

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

}


/* ==========================================
   Small Tablet
========================================== */

@media (max-width:768px){

.hero{
    padding:70px 0;
}

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

.hero-buttons{
    flex-direction:column;
}

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

.brand-strip{
    flex-wrap:wrap;
}

.products-grid,
.collection-grid,
.editor-grid,
.category-grid,
.brands-grid{
    grid-template-columns:1fr 1fr;
}

.club-container{
    padding:45px;
}

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

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

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

.section-title p{
    width:100%;
}

}


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

@media (max-width:576px){

.container{
    width:92%;
}

.hero{
    padding:60px 0;
}

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

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

.hero-tag{
    font-size:13px;
}

.hero-image img{
    width:100%;
}

.floating-card{
    display:none;
}

.products-grid,
.collection-grid,
.editor-grid,
.category-grid,
.brands-grid{
    grid-template-columns:1fr;
}

.brand-card{
    padding:25px;
}

.product{
    margin-bottom:20px;
}

.editor-card{
    margin-bottom:20px;
}

.category-card{
    height:260px;
}

.club-container{
    padding:30px;
}

.club-left h2{
    font-size:34px;
}

.club-right form{
    padding:30px;
}

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

.section-title small{
    font-size:12px;
}

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

.footer-about img{
    width:170px;
}

.footer{
    text-align:center;
}

.social-icons{
    justify-content:center;
}

.back-top{
    margin-top:10px;
}

}


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

@media (max-width:400px){

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

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

.btn-primary,
.btn-secondary{
    padding:14px 24px;
    font-size:14px;
}

.club-left h2{
    font-size:30px;
}

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

.category-card{
    height:220px;
}

.footer-about img{
    width:150px;
}

}


/* ==========================================
   Landscape Phones
========================================== */

@media (max-height:500px){

.hero{
    padding:50px 0;
}

.hero-container{
    gap:40px;
}

}

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

.menu-toggle{

display:none;

font-size:28px;

cursor:pointer;

}

@media(max-width:768px){

.menu-toggle{

display:block;

}

.nav-links{

display:none;

flex-direction:column;

position:absolute;

top:80px;

left:0;

width:100%;

background:#fff;

padding:20px;

box-shadow:0 10px 30px rgba(0,0,0,.1);

}

.nav-links.active{

display:flex;

}

}