@font-face {
     font-family:Lobster;
     src: url(../fonts/Lobster-Regular.ttf);}
 @font-face {
    font-family:NotoNaskhArabic;
    src: url(../fonts/NotoNaskhArabic.ttf);}
 @font-face {
    font-family:sstbold;
    src: url(../fonts/SST-Arabic-Bold.ttf);}




* { box-sizing: border-box;}
body {
    margin: 0;
    padding:0;
    font-family: "NotoNaskhArabic", serif;
    background: url(../img/bg/brushed_alu.png) repeat;
}

#wrapper {
    position: relative;
    width: 1020px;
    margin: 0 auto;
    padding: 0;
    box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.9);
    direction: rtl;
    background : #fff;
}

.content {
    width:100%;
}

.container {position: relative; float:right;  width:100%;}




.nav {
    width: 100%;
    min-height: 50px;
    background-color:  #3C3C3C;
    background: linear-gradient( 0.25turn, #3c3c3c, #2a2a2a);
    display: block;
    float:right;

}
.nav-header {
    float:left;
    margin:10px 10px 10px 20px;
    position: relative;
}
.nav-logo {
    font-size: 24px;
    color: #fff;
    font-family: Lobster;
}
.nav-logo a:link {
    color: #fff;
}
.nav-logo a:visited {
    color: #fff;
}

.nav-list {
    float:right;
    direction: rtl;
    margin-right:20px;


}

.nav-list > i {
    font-size:24px;
    text-align:center;
    color:white !important;
    line-height:50px;

}


.shops {
 width:100%; background: white; float:right; position: relative;  background: url(../img/bg/shopbg.jpg) repeat;
  padding-bottom:60px;
}

.shop {
    float:right; border:1px solid black; height:100px;  margin:5px;
    text-align: center;
    border-radius: 3px;
    background: linear-gradient( 0.25turn, rgba(100,100,100,0.5), rgba(50,50,50,0.5));
    padding:5px;
    width:calc(25% - 10px);

}



@media only screen and (min-width: 0px) and (max-width: 359px) {
#wrapper {width:100%; }
.shop {width:calc(100% - 10px);}
}

@media only screen and (min-width: 360px) and (max-width: 768px) {
#wrapper {width:100%; }
.shop {width:calc(50% - 10px);}
}

@media only screen and (min-width: 769px) and (max-width: 1019px) {
#wrapper {width:100%; }
.shop {width:calc(33% - 10px);}
}






.slider {
     display: flex;
     height: 120px;
     max-height: auto;
     overflow-y: hidden;
     overflow-x: scroll !important;
     padding: 0px;
     scroll-behavior: smooth;
     width:calc(100%);
     float:right;
     background: #f3f3f3;
}
 .slider::-webkit-scrollbar {
     height: 5px;
     width: 150px;
     display: none;
}
 .slider::-webkit-scrollbar-track {
     background: transparent;
}
 .slider::-webkit-scrollbar-thumb {
     background: #888;
}
 .slider::-webkit-scrollbar-thumb:hover {
     background: #555;
}



.subcate::-webkit-scrollbar {
     height: 5px;
     width: 150px;
     display: none;
}
 .subcate::-webkit-scrollbar-track {
     background: transparent;
}
 .subcate::-webkit-scrollbar-thumb {
     background: #888;
}
 .subcate::-webkit-scrollbar-thumb:hover {
     background: #555;
}


 .slider img:hover {
     transform: scale(1.05);
     box-shadow: 10px 10px 10px rgba(0,0,0,0.15);
}
 .slide {

     position: relative;
     margin:10px 0px;
}
 .slide img {
     height: 100%;
     width: 100px;
     margin: 0 10px;
     object-fit: cover;
     border-radius: 5px;
     cursor: pointer;
     transition: .25s ease-in-out;
}

.right-slider{
height:50px; float:right; position: absolute; z-index: 1;
}

.left-slider{
height:50px; left:0; position: absolute; z-index: 2;
}


 .control-prev-btn {

     margin-top:35px;
     left: 0;
     background-color: rgba(255,255,255,0.60);
     height: 50px;
     line-height: 100px;
     width: 20px;
     text-align: center;
     box-shadow: 0 1px 3px #888;
     user-select: none;
     color: #444;
     cursor: pointer;
     z-index: 1; margin-right:-20px;
}
 .control-next-btn {
 margin-top:35px;
     right: 0;
     background-color: rgba(255,255,255,0.55);
     height: 50px;
     line-height: 100px;
     width: 20px;
     text-align: center;
     box-shadow: 0 1px 3px #888;
     user-select: none;
     color: #444;
     cursor: pointer;
}

.control-prev-btn i {line-height: 50px !important;}
.control-next-btn i {line-height: 50px !important;}

.subcate {
     overflow-y: hidden;  display: flex;
     overflow-x: scroll !important; margin-bottom: 5px; width:100%; clear:both; position: relative; padding:5px 5px;
     background-color:#f3f3f3;
     border-bottom:1px #c3c3c3 solid;
}
.subcateimgcon {
width:75px; height: 75px; border:1px solid #aaa; float:right; position: relative;  margin:5px; background-color:#fff; background: linear-gradient( 0.25turn, #444444 , #2a2a2a);  border-radius: 5px; box-shadow: 1px 1px 3px 0 #585858;
}
.subcateimgcon img {
    width:75px; height:75px;
}

.slide img.zoome6d{
      width: 500px;
    height: 600px;
    position: fixed;
    left: 25%;
    top: 0%;
    z-index: 1000;
        transform: scale(1) translatey(0) !important;

}

.slide span {
     position: absolute;
            width:calc(100% - 20px);
            text-align: center;
             top: 50%;
              background-color: rgba(0,0,0,0.30);
  left: 50%;
  transform: translate(-50%, -50%);
   font-family: NotoNaskhArabic;
   color:white;
    font-weight: bolder;
     font-size: 20px;
     text-shadow: 1px 1px 1px red ;

}

.overlay{
        position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.45);
    top: 0;
        display: none;
}
.overlay.active{
    display: block;
}
 @media only screen and (max-width: 420px) {
     .slider {
         padding: 0;
    }
     .slide {
         padding: 0px 10px;
    }
     .slide img {
         margin: 0;
    }
     .control-prev-btn {
         top: 37%;
    }
     .control-next-btn {
         top: 37%;
    }
}

.bottom-menu{
     position:fixed; bottom:0;  width:100%; max-width:1020px; height: 60px; background: white;
display: flex; /* Use flexbox for easy centering */
        justify-content: center; /* Horizontally center content */
        align-items: center;
         background-color: rgba(255, 255, 255, 0.60); /* Semi-transparent background */
    backdrop-filter: blur(1px); /* Frosted glass effect */
}
.btmmenutext {
    text-align:center; font-size:16px; width:25%; font-family: sstbold;
}
a:link {text-decoration: none; color:black;}
a:visited {text-decoration: none; color:black;}



.login-with-google-btn {
  transition: background-color .3s, box-shadow .3s;
  padding: 12px 16px 12px 42px;
  border: none;
  border-radius: 3px;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
  color: #757575;
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  background-image:url(../img/icons/gicon.png);
  background-color: white;
  background-repeat: no-repeat;
  background-position: 12px 11px;

  &:hover { box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);}

  &:active {background-color: #eeeeee;}

  &:disabled {
    filter: grayscale(100%);
    background-color: #ebebeb;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
    cursor: not-allowed;
  }
}

.login-with-facebook-btn {
  transition: background-color .3s, box-shadow .3s;
  padding: 12px 16px 12px 42px;
  border: none;
  border-radius: 3px;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
  color: #757575;
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  background-image:url(../img/icons/gicon.png);
  background-color: white;
  background-repeat: no-repeat;
  background-position: 12px 11px;

  &:hover { box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);}

  &:active {background-color: #eeeeee;}

  &:disabled {
    filter: grayscale(100%);
    background-color: #ebebeb;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
    cursor: not-allowed;
  }
}