body{
    overflow-x: hidden;
}
.main-nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding:20px 0;
    font-size: 13px;
}
 
.main-nav ul{display: flex;}
.main-nav ul li{margin: 0 1em;}
.main-nav ul li a:hover{border-bottom:  2px solid  var(--primary-color);
}
.main-nav ul li a.active{
    border-bottom:  2px solid  var(--primary-color);
}
.main-nav ul li a{
    color: #262626;
    padding-bottom: 2px;
}
.main-nav ul.main-menu{
    flex: 1;
    margin-left: 1em;   
}
.menu-btn{
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 2;
    display: none;   
}


@media(max-width:700px){
.menu-btn{ display: block;}
.menu-btn:hover{opacity: 0.5;}
.main-nav ul.right-menu{margin-right: 5em;}
.main-nav ul.main-menu{
        display: block;
        position: fixed;
        top:0;
        left: 0;
        background:var(--primary-color);
        width: 50%;
        height: 100vh;
        border-right: var(--gray) 1px solid;
        opacity: 0.9;
        padding:3em 1em;
        transform: translateX(-500px);
        z-index: 1;
        transition:transform 0.5s ease-in-out;        
    }
    .main-nav ul.main-menu li{
    padding: 10px;
    border-bottom: var(--gray) solid 1px;
    font-size: 14px;
    }
    .main-nav ul.main-menu li a{color: #fff;}
    .main-nav ul.main-menu li:last-child{border-bottom: 0;}
    .main-nav ul.main-menu.show{transform: translateX(-20px);}

}

@media(max-width:400px){
    .main-nav .logo h1{ font-size: 1.5rem;}
}

@media(max-width:220px){
    .main-nav .logo {
        display: none;
     }
     .main-nav ul.main-menu{
        width:90%;

     }
     
}

/*===================| Product Info |===================*/


.product-detail .product-detail-content p{
    color:var(--gray);
    font-size: 1.1rem;
}
.product-detail .product-detail-content a h3{
 color:var(--black);
}
.product-detail .product-detail-content h4{
 
    color:var(--primary-color);
    font-size: 1.2rem;
}

 
.product-detail .product-detail-info  .quatity-wrapper{
   

    
}
.product-detail .product-detail-info input[type="number"]{
    -moz-appearance: textfield;
    text-align: center;
    font-size: 1rem;
    border:.1em var(--primary-color) solid;
    padding:.9em;
    width:50%;

}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    -web-appearance: none;
    margin: 0;
}

button{
    color:3264afe;
    background:var(--primary-color);
    border: none;
    font-size:1.2rem;
    cursor: pointer;
    color:var(--white);
}

#decrement{
    padding:.7em  .2em;
     
}

#increment{
    padding:.7em  .1em;
    
}

 
   /*===================| Promo |===================*/
.promo{
    background:var(--tertiary-color);
    padding:5em 0;
}
/*===================| Footer |===================*/
footer{
    background:var(--gray);
    padding:10em 0;
    color:#fff;
}
footer .footer-content .quick_links ul li a{color:#fff;}



@media only screen and (min-width:200px) {
    .product-detail .product-detail-info input[type="number"]{
        width:60%;
    }
    #decrement{
        padding:.7em  .4em;  
    }
    #increment{
        padding:.7em  .3em; 
    }
    
}
 
@media only screen and (min-width:700px) {

    .product-detail .product-detail-content{
        display: grid;
        grid-template-columns: 50% 50%;
        gap: 5em;
        }
        .product-detail .product-detail-content .product-detail-img img{
        width: 100%;
         height:100%;
        }

        .product-detail .product-detail-info input[type="number"]{
            width:70%;
        }
        #decrement{
            padding:.7em  .6em;  
        }
        #increment{
            padding:.7em  .5em; 
        }
.promo .promo-content{
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(25em,1fr));
    gap:5em;
}


.promo .promo-content .promo-info{
    margin-top:10em;
    text-align:center;
}
.promo .promo-content .promo-info .section-title{
    font-size: 4rem;    
}


footer .footer-content{
    display:grid;
    grid-template-columns:40% 20% 30%;
    gap:2em;
}
}

  
@media only screen and (min-width:1000px) {
 

        .product-detail .product-detail-info input[type="number"]{
            width:70%;
        }
        #decrement{
            padding:.7em  .6em;  
        }
        #increment{
            padding:.7em  .6em; 
        }
 
}