@font-face{
    font-family: 'Yekan';
   

    src: url("../FONTS/YekanBakhFaNum-Regular.woff") format('woff');
}
@font-face{
    font-family: 'Yekan-bold';
    src: url('../FONTS/YekanBakhFaNum-Bold.woff') format('woff');
}
*{
    scrollbar-width:none ;
    font-family: 'Yekan';
    
}





/* media query */
@media (max-width: 750px) {
    .iconhide {
        display: none; 
        transition: all 0.4 ease;
    
    }

   

    .mbmenu{
        display: flex;
        flex-direction: row-reverse;
        
    }
    .trigger{
        width:100% ;
        height: 50px;
    }
    .trigger2{
        height: 100%;
    }
    .search{
        justify-content: center;
    }
}

@media screen and (max-width : 610px){
    .text-sm-1{font-size: 20px; width: 160px; }
}
@media screen and (max-width : 1100px){
    .textmd-1{
        font-size: 20px;

    }
    .text-sm-7{
        .gap-y-9{
            row-gap: 14px;
        }
    }
    .textmd-10{
        font-size: 10px;
        padding: 0 20px;
        p{
           line-height: normal; 
        }
        
    }
.submenu li a{
    font-size: 15px !important;
}}

@media screen and (max-width : 460px){
    .text-sm-2{font-size: 20px!important; width: 160px; }
    .pad .text-sm-2 p {
        font-size: 20px!important; 
    }
}


@media screen and (max-width : 1000px){
    .h-sm-1{height: 40vh !important; }
    .h-sm-2{height: 30vh !important; }
    
}

@media screen and (max-width : 1150px){
    .branches-rwd{
        .row{
            height: fit-content;
        }
        .px-14{
            font-size: 20px;
            padding: 0;
        }
    }
    .margin-sm{
        padding: 0 30px;
       
        justify-content: center;
        .pad{
            gap: 0;
            margin-top: 0;
        }
    }
    .text-sm-7{
        font-size: 20px;
        padding: 0 20px;
    }
    .text-sm-4{
        font-size: 35px;

        .hsize:hover{
            font-size: 40px;
        }}}

        @media screen and (max-width : 460px){
            .text-sm-3{font-size: 60px;  }
            .text-sm-5{font-size: 25px;  }
            .text-sm-6{font-size: 15px; padding: 0 20px; }
           
            .margin-sm{
                
                margin-top: 70px;
        
               
            }
        }
@media screen and (max-width : 570px){
            .section1-sm-4{
               h1{
                font-size: 50px !;
               }
                }}  
                
@media screen and (max-width :1000px ){

    .bgimg1{
        justify-content: center;
        
    .pad1{
        position: unset;
    }
    }

    .mt-sm-2{
        margin-top: 1rem;
    }
}            


     
     

/* media query end */

/* footer icons */
@media screen and (max-width : 643px){
    .align-sm-1{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
     }

     .text-sm-20{
        font-size: 20px;
     }

}
/* footer icons end */

/* animation pulse */
@keyframes pulse6 {
    60% {
        opacity: 0.6;
    }
}
.pulsing{
    animation:  2s pulse6  cubic-bezier(0.4, 0, 0.6, 1) infinite ;
}
/* animation pulse end */


/* preloader */


#preloader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: #4B675B url('../IMG/logo/logo.png') no-repeat center center;
    animation: fadeout 1.7s ; 
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

@keyframes fadeout{
    to{
        opacity:0
    }
}
/* preloader end */

/* scrollUp */
.scroll-top {
	width: 35px;
	height: 35px;
	position: fixed;
	bottom: 5%;
	left: 30px;
	border-radius: 6px;
	z-index: 99;
	color: #4B675B;
	text-align: center;
	cursor: pointer;
	transition: 1s ease;
	border:  solid #4B675B;
    opacity: 0;
    visibility: hidden;
}
.show{
    opacity: 1;
    visibility: visible;
}
.scroll-top::after {
	position: absolute;
	z-index: -1;
	top: 100%;
	left: 5%;
	height: 10px;
	width: 90%;
	opacity: 1;
	
}
.scroll-top:hover {
	background: #4b675b76;
    border-radius: 18px;
    
}
/* scrollUp end */



/* header */
.sticky-menu {
	position: fixed;
	left: 0;
	margin: auto;
	top: 0;
	width: 100%;
	z-index: 99;
	-webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
	box-shadow: 0 10px 15px rgba(76, 0, 255, 0.1);
	
}

.sticky-menu {
    background-color: transparent;
    transition: background-color 0.3s ease;
}

.sticky-menu.scrolled {
    background-color: #314a3f;
}

.row.bgimg {
    position: sticky;
    top: 0;
    z-index: 1;
}
/* header end */



/* main */
@media screen and (min-width : 992px){
    .mleft{ margin-left: 0 !important; }
    .mright{ margin-right: 0 !important; }
}

.bgimg{
    
    background-position:top ;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height:100vh;
}

.bgimg1{
    
    background-position:top ;
    background-repeat: no-repeat;
    background-size: cover;
    height:100vh;
}
.pad{
    .btm2{
        width: 73%;
        margin: auto;
        border-radius: 6px;
        
        
        p{
         padding: 12px 0 ;
        font-size: 25px;
        border-radius: 6px;
        box-shadow: inset 0 0 5px 5px #4b675b85;
        background-color: #4b675b70;
        }
         
        
    }
}
.pad .col-lg-4 {
    padding: 10px 0;

    .btm{
        width: 90%;
        margin: auto;
        border-radius: 6px;
         border: 2px solid ;
         
        
         p{
            
            padding: 12px 0 ;
           font-size: 30px;
           border-radius: 6px;
           box-shadow: inset 0 0 5px 5px #4b675b2d;
           background-color: #4b675b38;
           }
           p:hover{
               background-color:#4b675bb9 ;
               box-shadow: inset 0 0 8px 8px #4b675b;
               }
        .auction:hover{
            background-color: #ff1f1fbc;
            color:#ffffff;
            box-shadow: inset 0 0 8px 8px #ff1f1fce;
            
        }
    }

    .btm-branches{
        width: 83%;
        margin: auto;
        border-radius: 6px;
         border: 2px solid ;
         
        
         p{
            
            padding: 12px 0 ;
           font-size: 30px;
           border-radius: 6px;
           box-shadow: inset 0 0 5px 5px #4b675b2d;
           background-color: #4b675b38;
           }
           p:hover{
               background-color:#4b675bb9 ;
               box-shadow: inset 0 0 8px 8px #4b675b;
               }
        
    }

    .btm-boys{
        width: 95%;
        margin: auto;
        border-radius: 6px;
         border: 2px solid ;
         
        
         p{
            
            padding: 12px 0 ;
           font-size: 30px;
           border-radius: 6px;
           box-shadow: inset 0 0 5px 5px #ae8f7b8f;
           background-color: #ae8f7b70;
           }
           p:hover{
               background-color:#c9885a ;
               box-shadow: inset 0 0 8px 8px #d29871;
               }
        .auction:hover{
            background-color: #ff1f1fbc;
            color:#ffffff;
            box-shadow: inset 0 0 8px 8px #ff1f1fce;
            
        }
    }
    .btm-girls{
        width: 90%;
        margin: auto;
        border-radius: 6px;
         border: 2px solid ;
         
        
         p{
            
            padding: 12px 0 ;
           font-size: 30px;
           border-radius: 6px;
           box-shadow: inset 0 0 5px 5px #4b675b2d;
           background-color: #4b675b38;
           }
           p:hover{
               background-color:#4b675bb9 ;
               box-shadow: inset 0 0 8px 8px #4b675b;
               }
        .auction:hover{
            background-color: #ff1f1fbc;
            color:#ffffff;
            box-shadow: inset 0 0 8px 8px #ff1f1fce;
            
        }
    }

    .btm-sub{
        width: 90%;
        margin: auto;
        border-radius: 6px;
         border: 2px solid ;
         
        
        p{
            
         padding: 12px 0 ;
        font-size: 17px;
        border-radius: 6px;
        box-shadow: inset 0 0 5px 5px #4b675b2d;
        background-color: #4b675b38;
        }
        p:hover{
            background-color:#4b675bb9 ;
            box-shadow: inset 0 0 8px 8px #4b675b;
            }
       
    }
    .btmh{
        width: 95%;
        margin: auto;
        border-radius: 6px;
         border: 2px solid ;
         
        
        p{
            
         padding: 12px 0 ;
        font-size: 30px;
        border-radius: 6px;
        box-shadow: inset 0 0 5px 5px #4b675b71;
        background-color: #4b675b44;
        }
        p:hover{
            background-color:#4b675bb9 ;
            box-shadow: inset 0 0 8px 8px #4b675b;
            }
        .auction:hover{
            background-color: #ff1f1fbc;
            color:#ffffff;
            box-shadow: inset 0 0 8px 8px #ff1f1fce;
            
        }
    }

    .btm1{
        width: 80%;
        margin: auto;
        border-radius: 6px;
        
        
        p{
         padding: 12px 0 ;
        font-size: 22px;
        border-radius: 6px;
        box-shadow: inset 0 0 5px 5px #4b675b36;
        background-color: #4b675b42;
        }
         
        
    }
}

@media screen and (max-width: 1282px){
    .rwd1{
        flex-direction: column;
        width: 80%;
        justify-self: center;
       a{
        width: 100%;
        margin-top: 5px;
       }
    }
    .address{
        margin: 0;
    }
    .prfmargin{
        
        margin: 0;
        padding: 0;
           
       .section{
        padding: 0 20px;
       }
       .jstfy{
        justify-content: center;
       }

       .img{
        .p-3{
           width: 110px;
        height: 110px;  
        }

        font-size: 12px;
        button{
            padding: 12px 15px;
        }
       }
       ul{
        font-size: 20px;
       }
       .px-5{
        padding: 0;
        
       }
       .px-12{
        padding: 0;
    }
}}


 /* OffCanvas menu  */
 .extra-info {
  
    transition: all 0.7s ease;
    z-index: 999;
    transform: translateY(-2050%); 
}
.extra-info.active {
    transform: translateY(0); 
}

.offcanvas-overly {
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}
.offcanvas-overly.active {
    opacity: 1;
    visibility: visible;
}

/* offcanvs end */
.menu-item {
    a {
        font-family: 'Yekan';
        color: #4b675b ;
        padding: 10px 15px;
        display: block;
        font-weight: 500;
        transition: color 0.3s ease;
    }
    a:hover {
        color: #d0d0d0;
    }
}

.menu-item .icn.active {
    color: rgb(195, 196, 195);
    font-size: 22px ;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.khaneh{
color: #4b675b;
}
.submenu {
    scrollbar-width: thin ;
    scrollbar-color: rgb(204, 204, 204) #4b675b;
    padding: 20px;
    border-radius: 0  0 20px 20px;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    background: #FFFFFF;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease-in-out;
    z-index: 10;
    color: #4b675b;

   
}



.submenu li {
    margin: 0;
    color: #4b675b;
}

.submenu li a {
    padding: 10px 15px;
    color: #4b675b;
    text-decoration: none;
    display: block;
    font-size: 20px;
    position: relative; 
    transition: background 0.3s ease, color 0.3s ease;
}

.submenu li a:hover {
    color: #d0d0d0;
}


.submenu li a::before {
    content: '';
    position: absolute;
    right: 4px; 
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 2px;
    background: #007bff;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.submenu li a:hover::before {
    opacity: 1;
    transform: translateY(-50%) scaleX(1.2); 
}

.menu-item .icn::after {
    content: '\f107'; 
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    margin-left: 8px;
   
}


.submenu.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}


@media (max-width: 948px) {
    .menu {
        flex-direction: column;
        align-items: flex-end;
    }

    .submenu {
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
        box-shadow: none;
        display: block;
        overflow-y: auto; 
        max-height: 300px; 
    }
}


@media (max-width: 948px) {
    .menu {
        flex-direction: column;
    }
    .navbar{
        display: flex;
    }
    .menu-item {
        width: 100%;
    }
    .khaneh{
        padding: 20px;
        width: 100%;
    }

    .submenu {
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
        box-shadow: none;
        display: none; 
    }

    .submenu.show {
        display: block; 
    }
}


/* signup */
.signup1{
    label{
        font-size: 17px !important;
        
     } 
}
.signup{ 
    color: #4B675B;
   

    label{
        font-size: 19px;
        
     }

     .sign-button{

        a{
            p{
           
            border: #4B675B 1px solid;
            border-radius: 5px;
            padding:10px 10px ;
            box-shadow: 0px 4px 4px 0px #00000040;
        }}
        a:hover{
            box-shadow:inset 0 0 10px 2px #314a3f;
            border-radius: 5px;
        }
        input[type="button"]:hover{
            box-shadow:inset 0 0 10px 3px #21322b;
        }
     input[type="button"]{
       
        color: #ffffff;
        border: #4B675B 1px solid;
        background-color: #4B675B;
        border-radius: 5px;
        cursor: pointer;
        padding:10px 10px ;
        box-shadow: 0px 4px 4px 0px #00000040;

        }}


}

@media screen and (max-width :779px ){
    .text-sm-8{
        font-size: 20px !important;
        padding: 0 15px;
    }
    .gold-customer{
        justify-content: center;
    }
    .sign-sm-1{
        display:flex ;
        flex-direction: column;
        
        input,a{
            width: 100%;
            max-width: 364px;
            font-size: 25px;
        }
       
    }
    .mobile-rwd{
        flex-direction: column;
        display: flex;
        align-items: center;
        text-align: justify;
        ul{
           margin: 0 20px;
        }
    }
    .mbile-height{
        
        padding: 0;
        .col-xl-10{
              height: fit-content;
        margin-top: 40px ;
        margin-bottom: 20px ;
        .mt-24{
            
            margin-top: 40px;
            p{
                font-size: 20px;
                text-align: justify;
            }
        }
        }
      
    }
    .sign-sm-2{
        display:flex ;
        flex-direction: column-reverse;
        margin-bottom: 0;
        input,a{
            width: 100%;
            max-width: 364px;
            font-size: 25px;
        }
       
    }
 }   
/* signup */

/* purchase */
.heart {
    animation: impulse 0.7s ease;
}
@keyframes impulse {
    
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.7);
    }
    100% {
        transform: scale(1);
    }
}

.heart-filled {
    animation: heart-pulse 0.7s ease;
}

@keyframes heart-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.7);
    }
    100% {
        transform: scale(1);
    }
}

/* purchase end*/

/* size scale bg */
.selected {
    background-color: #4b675b87;
    color: black;
    border-radius: 13px;
    transition: all 0.3s ease-in-out;
}
/* size scale bg end*/

/* scale modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
   
}
.show-modal {
    display: block;
    opacity: 1;
}
.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px 0;
    border: 1px solid #888;
    max-width: 100%;
   height : 800px;
}
@media screen and (max-width :990px ){
    .lspace{
        p{
        letter-spacing: 0.2em;


        }
       
    }
    .modal-content{
        height: 1200px;
    }
    /* .mdl-right{
        margin-right: 50px;
    } */
   .imgcenter{
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    align-self: center;
   }
 } 

.close-btn {
    
    color: black;
    font-size: 30px;
    font-weight: 900;
    cursor: pointer;
}
.close-btn:hover {
    color: darkred;
}


th, td {
    border: 1px solid #000;
    padding: 8px;
    text-align: center;
}
tr:nth-child(even) {
    background-color: white;
   
}
tr:nth-child(odd) {
    color: white;
    background-color: #4B675B;
}


    /* star vote */
    .stars {
        display: inline-block;
        font-size: 2rem;
        direction: rtl;
        unicode-bidi: bidi-override;
    }
    .stars input {
        display: none;
    }
    .stars label {
        color: #ccc;
        cursor: pointer;
    }
    .stars input:checked ~ label,
    .stars input:checked ~ label ~ label {
        color: #4b675b;
    }
    /* star vote end*/
    @media screen and (max-width :20000px ){
        .modal-content{
            display: flex;
            flex-direction: column;
            justify-self: center;
            font-size: 15px !important;
        }
        .mdltxt{
            font-size: 15px !important; 
        }
    }

/* scale modal end */

.delete:hover svg path {
    fill: red;
}

/* kharid-logo */

@media screen and (max-width :1200px ){
    .img-res{
        margin: 0 ;
        img{width: 60%;}           
        p{  font-size: 20px;}
    }
    .prf{
        padding: 0;
        justify-content: center;
        .mr-8{
            margin-top: 22px;
        }
    }
}
@media screen and (max-width :718px ){
    .padding-sm-0{
        padding: 0; 
        
    }
    .margin-sm-0{
        margin-left:0 ;
    }
    .img-res{
        margin: 0 ;
        img{width: 70%;}           
        p{  font-size: 11px;}
    }
    .pdx{
        font-size: 15px;
        padding: 10px 40px;
    }
    .jstfy{
        justify-content: center;
    }
}
@media screen and (max-width:500px){
    .sefaresh{
        flex-direction: column;
        div{
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        img{
            width: 40%;
            margin: 15px 20px;
        }
    }
    
    .main-container{
        padding: 15px;
    }
}
@media screen and (max-width :1380px ){
    
    .textres{
        width: 90%;
        p{
             font-size: 20px;
             
        }
        h1{
            font-size: 25px ;
        }
        li{

            div{
               width: 100%;
               justify-content: center;
            }
       
    }
}}

@media screen and (max-width :784px ){
    .textres{
        
        width: 85%;
        p{
            
            font-size: 20px;
       }
       li{
        div{
           display: block; 
        }}}}
        
     /* address drop down */
     .address-content:not(.order) {
        display: none;
        background-color: #f9f9f9;
        padding: 10px;
        padding-right: 30px;
        margin-top: 10px;
    }

    .address-content:not(.order) li {
        padding: 14px 0;
    }

    .rtte:focus{
        img{
            rotate: -90deg;
            transition: all 0.3s ease-in-out;
        }
    }

    .ppy p{
        padding: 8px 0;
    }
    

    .bg-design{
        
        background-image: url(../IMG/bg-img/salian-design.png) ;
        background-position:center ;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        height:105vh;
        
    }


    /* sarv salian */
    @media screen and (max-width :1500px ){
        .margin-md-0{
            margin: 0;
        }
        .ceo{
            padding: 0 50px;
            margin: 50px 0 ;
            .ceo-2{
             font-size: 15px;

            }
        }

        }


        /*new old logo */
        .logos{
            img{
                margin: 10px 0;
                border: solid;
                border-image:linear-gradient(to top, rgb(186, 186, 186),rgb(129, 129, 129), rgb(67, 67, 67)) 1 ;  
            }
        }




        /* auction-page */
        @media screen and (max-width :1200px ){
            .bg-auction{
                .text-white{
                    margin-top: 20px;
                }
                a{
                    font-size: 20px;
                }
                .font-black{
                    font-size: 35px;
                }
                img{
                    height: auto;
                }
            }
    
            }



            /* switch toggle */
           
            .switch {
                position: relative;
                display: inline-block;
                width: 58px;
                height: 21px;
                input {
                    opacity: 0;
                    width: 0;
                    height: 0;
            }

            }
            .slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: #cccccc;
                transition: .4s;
            }
            
            .slider:before {
                position: absolute;
                content: "";
                height: 15px;
                width: 15px;
                left: 4px;
                bottom: 3px;
                background-color: #ffffff;
                transition: .4s;
            }
          
            
            input:checked + .slider {
                background-color: #4b675b;
            }
            
            input:checked + .slider:before {
                transform: translateX(26px);
            }

            .slider.round {
                border-radius: 34px;
            }
            
            .slider.round:before {
                border-radius: 50%;
            }
  

            /* add address map */
            #map {
                height: 400px;
                width: 100%;
            }
            #search-box {
                width: 300px;
                padding: 8px;
                font-size: 16px;
            }



            /* order table */
           
            .table{
                table-layout: auto;
                min-width: fit-content;
                width: 100%;
                overflow-x: scroll;
               
                
                th, td {
                    text-align: center;
                    align-items: center;
                    border: none;
                    height: 100%;
                 }
              
                
            }
          
            
            thead {
                background-color: #f2f2f2;
            }
            
            table tr:nth-child(even) {
                background-color: #f9f9f9;
                color: #4b675b;
            }
            table tr:nth-child(odd) {
                background-color: #f9f9f9;
                color: #4b675b;
            }


            .address-content.order .favorite-tbl {
                display: none;
                background-color: #f9f9f9;
               margin-top: 10px;
               
               
            }
        
            


            .table-favorite{
                table-layout: auto;
                min-width: fit-content;
                width: 100%;
                overflow-x: scroll;
               
                
                th, td {
                    
                    text-align: center;
                    align-items: center;
                    border: none;
                    height: 100%;
                 }
               
                 
            }

            .address-content.favorite-tbl {
                display: none;
                background-color: #f9f9f9;
               margin-top: 10px;
               
               
            }