/* ==========================================
   RESPONSIVE.CSS
========================================== */

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

@media (max-width:1200px){

.container{
    width:94%;
}

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

.promo-slider{
    grid-template-columns:repeat(3,320px);
    overflow-x:auto;
}

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

.slide img{
    height:420px;
}

}

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

@media (max-width:992px){

.logo img{
    width:150px;
}

.nav-container{
    height:72px;
}

.favorite-grid{

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

    gap:18px;

}

.product-grid{

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

}

.article-grid{

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

}

.footer{

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

}

.slide img{

    height:350px;

}

.title h2{

    font-size:28px;

}

.product-card img{

    height:220px;

}

.product-item img{

    height:210px;

}

}

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

@media (max-width:768px){

body{

    padding-bottom:80px;

}

header{

    position:sticky;

}

.logo img{

    width:135px;

}

.nav-container{

    height:65px;

}

.nav-icon button{

    width:42px;

    height:42px;

    font-size:18px;

}

.search-box{

    margin:15px auto;

}

.search-box input{

    font-size:14px;

    padding:14px;

}

.search-box button{

    width:55px;

}

.slide img{

    height:220px;

}

.favorite{

    margin-top:20px;

}

.favorite-grid{

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

    padding:20px;

    gap:15px;

}

.fav-item img{

    width:55px;

    height:55px;

}

.fav-item span{

    font-size:13px;

}

.title{

    margin-bottom:20px;

}

.title h2{

    font-size:22px;

}

.title a{

    font-size:14px;

}

.product-grid{

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

    gap:15px;

}

.product-card img{

    height:170px;

}

.product-card h3{

    font-size:16px;

    padding:12px;

}

.price{

    font-size:20px;

}

.old-price{

    font-size:14px;

}

.rating{

    font-size:14px;

}

.product-item img{

    height:170px;

}

.product-info{

    padding:12px;

}

.product-info h3{

    font-size:16px;

    min-height:auto;

}

.product-info p{

    display:none;

}

.product-price{

    font-size:18px;

}

.product-old{

    font-size:13px;

}

.product-button{

    flex-direction:column;

}

.article-grid{

    grid-template-columns:1fr;

}

.article-card img{

    height:220px;

}

.footer{

    grid-template-columns:1fr;

    gap:30px;

}

.footer img{

    width:150px;

}

.sidebar{

    width:300px;

    right:-300px;

}

.bottom-nav{

    display:flex;

}

.whatsapp{

    bottom:90px;

    width:55px;

    height:55px;

    font-size:28px;

}

.scroll-top{

    bottom:155px;

}

}

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

@media (max-width:576px){

.container{

    width:92%;

}

.favorite-grid{

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

    gap:12px;

    padding:18px;

}

.fav-item img{

    width:48px;

    height:48px;

}

.fav-item span{

    font-size:12px;

}

.slide img{

    height:180px;

}

.banner-promo img{

    border-radius:12px;

}

.product-grid{

    gap:12px;

}

.product-card img{

    height:150px;

}

.product-item img{

    height:150px;

}

.product-info h3{

    font-size:15px;

}

.product-price{

    font-size:16px;

}

.discount{

    font-size:11px;

    padding:6px 8px;

}

.best-seller{

    font-size:11px;

    padding:6px 8px;

}

.footer{

    padding:40px 0;

}

.footer h3{

    font-size:18px;

}

.footer p{

    font-size:14px;

}

.copyright{

    font-size:13px;

}

}


.bottom-nav{

    display:flex;

}

body{

    padding-bottom:85px;

}
@media (min-width:769px){

.bottom-nav{

    display:none;

}

}


@media(max-width:992px){

.client-slider{

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

}

}

@media(max-width:576px){

.client-slider{

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

}

.trusted-client h2{

font-size:28px;

}

.client-item{

padding:18px;

}

}

@media (max-width:768px){

.hero-info{

flex-direction:column;
gap:18px;

}

.hero-info div{

width:100%;

}

}

@media(max-width:992px){

.why-grid{

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

}

}

@media(max-width:576px){

.why-grid{

grid-template-columns:1fr;

}

.why-us h2{

font-size:30px;

}

.why-card{

padding:28px 22px;

}

}

@media(max-width:992px){

.team-grid{

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

}

}

@media(max-width:576px){

.team-grid{

grid-template-columns:1fr;

}

.team-title{

font-size:30px;

}

.team-image{

height:260px;

}

}