@font-face {
    font-family: logo;
    src: url(logo.otf);
    font-display: swap;
}

@font-face {
    font-family: fa;
    src: url(fa.ttf);
    font-display: swap;
}

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    direction:rtl;
    font-family:myfont;
}


body{
    width:100%;
    
    margin:auto;
    text-align: center;
    
}


input{
    margin: 15px;
    padding: 10px;
    border-radius: 30px;
    font-size: 17px;
    border: none;
    max-width: 90%;
}
button{
    /*margin: 20px;*/
    padding: 5px;
    border-radius: 30px;
    font-size: 17px;
    text-align: center;
    border: none;
    background:none;
}
select{
    margin: 20px;
    padding: 20px;
    border-radius: 20px;
    font-size: 17px;
    text-align: center;
    border: none;
}

hr{
    margin:15px;
}

a{
    text-decoration: none;

}

img{
    width:100%;
}
.box{
  
    margin: 20px;
    padding: 20px;
    border-radius: 20px;
}
.content{
    margin: 10px;
    padding: 30px 10px;
    border-radius: 20px;
}


.menuh{
    border-radius: 17px;
    margin:10px;
}

.menu{
    
    height: 75px;
    display: flex;
}

.menudiv{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex:25%;
}

.menudiv img{
    width:37px;
}

.menu a{
    max-width:1000px;
}

.menu-logo{
    flex:30%;
}

.menu-list{
    flex:60%;
    display:flex;
}
.menu-item{
    flex:1;
}
.menu-item button{
    background: none;
    border: none;
    font-size: 14px;
}
.drop{
    display: none;
      position: absolute;
      min-width: 160px;
      z-index: 1;
    font-size: 20px;
    padding: 20px;
    line-height: 2;
    top: 180px;
    border-radius: 10px;
    right:10px;
    width:98%;
    max-height: 70%;
    overflow: auto;
}
.drop1{
    display:flex;
}
.drop2{
    flex:1;
    margin: 5px;
    padding: 5px;
}
.drop3{
    display: flex;

}
.menu-item:hover .drop{
    display: block;
}
.menu-item:hover .menubtn p{
    padding:5px;
    border-radius:7px;
}
.menu-acc{
    flex:5%;
    padding:13px;
}
.menu-notif{
    flex:5%;
    padding:13px;
}

.menubtn{
    justify-content: center;
    align-items: center;
    /*display:flex;*/
}



/*menu mobile*/

.menum{
    display:none;
}









@media screen and (max-width: 1000px) {
    
    .menuh{
        display:none;
    }
    .menud{
        display:none;
        margin: 10px;
        border-radius: 17px;
        overflow:hidden;
    }
    .menud1{
        display:flex;
        flex-wrap:wrap;
        width:100%;
    }
    .menud2{
        flex:50%;
        padding:5px;
    }
    .menum a{
    max-width:1000px;
    }
    .menum{
        display:flex;
        margin: 10px;
        border-radius: 17px;
        height: 60px;
    }
    .menudiv{
        padding:15px;
    }
    
    .menum-notif{
        flex:20%;
    }
    .menum-logo{
        flex:60%;
        
    }
    .logoa{
        
        font-family:logo;
        font-size:38px;
    }
    .menum-bar{
        flex:20%;
    }
    .menud-item{
        border-radius:7px;
        padding:5px;
    }
    .menud-item2{
       
     
        flex:1;
    }
    .menud-item p{
        background: none;
        border: none;
        display: flex;
      justify-content: center;
      align-items: center;
        width: 100%;
        margin: auto;
        align-items: center;
        font-size: large;
        
    }
    .menud-item a{
        background: none;
        border: none;
        display: flex;
      justify-content: center;
      align-items: center;
        width: 100%;
        margin: auto;
        align-items: center;
        font-size: large;
        
    }
    .menud-item p img{
        height: 50px;
    }
    .menud-item a img{
        height: 50px;
    }
    
    .dropd{
        line-height: 1.5;
    }
    
}

.badane{
    max-width: 1200px;
    margin:auto;
    padding:10px;
}


.sshop{
    width:100%;
    /*height:350px;*/
    border-radius:9px;
    overflow:auto;
    display:flex;
    padding: 15px 3px;
}

.sshop3 img{
    width:auto;
    height:auto;
    max-width:150px;
    max-height:150px;
}
.sshop3{
    
    margin: 5px;
    border-radius: 10px;
    padding: 3px;
    min-width:150px;
}
.sprice{
    font-family:math;
    color:gray;
}
.slogo{
    font-family: system-ui;
    color: gray;
    text-align: left;
    margin: 0 5px;
    font-size: small;
    opacity: 0.5;
}
.sname{
    margin: 0 5px;
}
.sdimg{
    height:150px;
    align-content: center;
}
.sdname{
    height:65px;
    align-content: center;
    margin-top: -10px;
}




.shop{
    display:flex;
    
}
.filter{
    flex:20%;
    border-radius:10px;
    margin-left:10px;
    padding:10px;
}

.sshopl{
    flex:80%;
    width:100%;
    /*height:350px;*/
    border-radius:9px;
    flex-wrap:wrap;
    display:flex;
    padding: 15px 3px;
    justify-content: center; /* وسط‌چین افقی */
    align-items: center;     /* وسط‌چین عمودی */
    
}

.sshop3l img{
    width:auto;
    height:auto;
    max-width:150px;
    max-height:150px;
}
.sshop3l{
    
    margin: 5px;
    border-radius: 10px;
    padding: 3px;
    max-width: 250px;
    flex: 20%;
}
.spricel{
    font-family:math;
    color:gray;
}
.slogol{
    font-family: system-ui;
    color: gray;
    text-align: left;
    margin: 0 5px;
    font-size: small;
    opacity: 0.5;
}
.snamel{
    margin: 0 5px;
}
.sdimgl{
    height:150px;
    align-content: center;
}
.sdnamel{
    height:65px;
    align-content: center;
    margin-top: -10px;
}

.shead{
    display:flex;
    margin: 9px;
}
.sheadf{
    flex:10%;
    display:none;
}
.sheadt{
    flex:80%;
    
}
.sheads{
    flex:10%;
}

    


@media screen and (max-width: 600px) {
    
    
    .filter{
        display:none;
        margin:20px;
    }
    .shop{
        display:block;
    }
    .sheadf{
        display:initial;
    }
    .sshop3l{
    
   
    max-width: 250px;
    flex: 40%;
}

}






.banners{
    width:100%;
    margin:20px auto;
    border-radius:10px;
    max-width:1000px;
    
}
.des{
    margin: 15px 5px;
    padding: 15px 5px;
    border-radius: 10px;
    text-align: right;
    line-height: 2;
}

 #sortMenu {
            display: none;
            position: absolute;
            background-color: gray;
            border: 1px solid #ccc;
            padding: 10px;
            z-index:2;
        }
        #sortMenu button {
            display: block;
            width: 100%;
            margin: 5px 0;
            cursor: pointer;
        }


.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
  }

  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 25px;
  }

  .slider:before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
  }

  input:checked + .slider {
    background-color: #4CAF50;
  }

  input:checked + .slider:before {
    transform: translateX(25px);
  }



  .navzone{
        width:100%;
    }
    .nav{
        display:flex;
        flex-wrap:wrap;
        padding:5px;
        max-width: 1400px;
        margin: auto;
    }
    .navi{
        display:flex;
        justify-content: center;
        align-items: center;
    }
    .navb{
        justify-content: center;
        align-items: center;
    }
    .navc{
        justify-content: center;
        align-items: center;
    }
    .navc img{
        width:50px;
        margin-bottom: -10px;
    }
    .navb img{
        width:30px;
        margin-top: 10px;
    }
    .navb p{
        font-size: small;
    }
    .navi img{
        width:50px;
        margin:0 15px;
    }
    .nav5{
        flex:5%;
    }
    .nav10{
        flex:10%;
    }
    .nav15{
        flex:15%;
    }
    .nav20{
        flex:20%;
    }
    .nav25{
        flex:28%;
    }
    .nav30{
        flex:30%;
    }
    .nav40{
        flex:40%;
    }
   
    .navm{
        display:none;
    }
    
    
    
@media screen and (min-width: 1010px) {
    .instanav{
        display:none;
    }
    .wtsnav{
        display:none;
    }
    #nav{
        display:flex;
    }
    
    .navdrop img{
        margin:0;
    }
    .navdrop{
        display: none;
        position: absolute;
        min-width: 160px;
        z-index: 1;
        font-size: 20px;
        padding: 20px;
        line-height: 2;
        top: 135px;
        border-radius: 10px;
        right:10px;
        width:98%;
        max-height: 70%;
        overflow: auto;
    }
    .navdrop1{
        display:flex;
    }
    .navdrop2{
        flex:1;
        margin: 5px;
        padding: 5px;
    }
    .navdrop3{
        display: flex;
    
    }
    .navdrop4{
        /*height: 50px;    */
    }
    .navc:hover .navdrop{
        display: block;
    }
    .navc:hover .navci img{
        background-color:gray;
        border-radius:7px;
    }
    
    .dnd{
        display:none;
    }
    
}
@media screen and (max-width: 1010px) {
    #nav{
        display:none;
    }
    .navm{
        display:flex;
        margin: 10px;
        border-radius: 17px;
        height: 70px;
    }
    .navm img{
        width: 50px;
    }
    .navm-bar{
        flex:20%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    .navm-logo{
        flex:60%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    .navm-cart{
        flex:20%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    .navm-logo a{
        font-size: 45px;
    }
    .navdrop{
        display:none;
        flex-wrap:wrap;
    }
    .navdrop a{
        flex:100%;
        text-align: center !important;
    }
    .navdrop2 img{
        margin:0;
    }
    .navdrop1{
        flex:100%;
        margin:0 9px;
    }
    .dnm{
        display:none;
    }
    .nav40 {
        flex: 100%;
        padding: 15px;
    }
    .nav5 {
        flex: 40%;
        margin: 10px;
        border-radius: 7px;
    }
    .navc{
        padding:5px;
    }
    .navdrop4{
        margin: 15px;
        display:flex;
    }
    .madarpnav{
        margin-top: 20px;
        margin-bottom: 7px;
    }
    .navplus{
        width: 40px !important;
        margin-right: 20px !important;
    }
    
}