/*Genral*/

body {
    font-family: "Tajawal", sans-serif;
}
  /* toppar */
  /* (A) FIXED WRAPPER */
  .hwrap {
      overflow: hidden; /* HIDE SCROLL BAR */
      background: #eee;
    }
     
    /* (B) MOVING TICKER WRAPPER */
    .hmove { display: flex; }
    
    /* (C) ITEMS - INTO A LONG HORIZONTAL ROW */
    .hitem {
      flex-shrink: 0;
      width: 100%;
      box-sizing: border-box;
      padding: 10px;
      text-align: center;
    }
     
    /* (D) ANIMATION - MOVE ITEMS FROM RIGHT TO LEFT */
    /* 4 ITEMS -400%, CHANGE THIS IF YOU ADD/REMOVE ITEMS */
    @keyframes tickerh {
      0% { transform: translate3d(100%, 0, 0); }
      100% { transform: translate3d(-400%, 0, 0); }
    }
    .hmove { animation: tickerh linear 15s infinite; }
    .hmove:hover { animation-play-state: paused; }
    
    /* (A) STANDARD ROW HEIGHT */
    .vwrap, .vitem {
      height: 30px;
      line-height: 30px;
    }
     
    /* (B) FIXED WRAPPER */
    .vwrap {
      overflow: hidden; /* HIDE SCROLL BAR */
      color: white;
    }
    /* (C) TICKER ITEMS */
    .vitem { text-align: center; }
     
    /* (D) ANIMATION - MOVE ITEMS FROM TOP TO BOTTOM */
    /* CHANGE KEYFRAMES IF YOU ADD/REMOVE ITEMS */
    .vmove { position: relative; }
    @keyframes tickerv {
      0% { bottom: 0; } /* FIRST ITEM */
      30% { bottom: 30px; } /* SECOND ITEM */
      60% { bottom: 60px; } /* THIRD ITEM */
      90% { bottom: 90px; } /* FORTH ITEM */
      100% { bottom: 0; } /* BACK TO FIRST */
    }
    .vmove {
      animation-name: tickerv;
      animation-duration: 10s;
      animation-iteration-count: infinite;
      animation-timing-function: cubic-bezier(1, 0, .5, 0);
    }
    .vmove:hover { animation-play-state: paused; }
  
  
  
    /* top bar */
  .topbar a{
      color: white;
      text-decoration: none;
      padding: 5px;
  }
  .topbar{
      height: 35px;
      text-align: center;
      vertical-align: middle;
      background-color: #217EF8;
  }
  .left{
      color: white;
  }
  .left a{
      padding-left: 20px;
  }
  /* menu bar */
  .top-menu-area a{
      color: rgb(63, 63, 63);
      text-decoration: none;
      font-weight: 900;
      
  }
  .top-menu-area .container-fluid{
      width: 90%;
  }
  .top-menu-area a i{
      width: 250px!important;
  }
  .top-menu-area i span{
      font-size: 11px;
  }
  .top-menu-area{
      text-align: center;
      vertical-align: middle;
      padding-top: 10px;
      background-color: white;
  }
  .top-menu-area  i{
      font-size: 30px;
  }
  .top-menu-area  p{
      font-size: 18px;
      line-height: 15px;
  }
  .searchbar{
      padding-top: 15px;
  }
  .Menu-area{
      padding-top: 10px;
  }
  @media only screen and (max-width: 900px) {
      .header-of-desktop{
          display: none;
      }
  }
  @media only screen and (min-width: 900px) {
      .mobile-nav-bar{
          display: none;
      }
  }
  /* dashboard */
  .product-type{
      width: 80%;
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
  .card-left img{
      width: 100%;
      object-fit: cover;
      border-radius: 25px;
      overflow: hidden;
      box-shadow: 0px 0px 5px 0px;
  }
  
  .product-type .col{
  position: relative;
  padding: 5px;
  transition: 0.2s; /* Animation */
  }
  .product-type .title{
      /* position: absolute; */
      /* top: 35%; */
      right: 25px;
      direction: rtl;
  }
  .product-type .title h4{
  font-size: 35px;
  font-weight: 900;
  }
  @media only screen and (max-width: 1502px) {
      .product-type .title h4{
          font-size: 20px;
          font-weight: 900;
          }
  }
  
  /* header-slider */
  .header-slider {
    min-height: 200px;
  }
  .header-slider .owl-nav{
        font-size: 35px;
    }
  .header-slider .owl-nav a{
      color: white;
  }
  .header-slider .owl-dots{
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
  }
  
  .header-slider .left-arrow::before,.header-slider .right-arrow::before{
      box-shadow: 0px 0px 10px 0px black;
      background-color: #217EF8;
  }
      .header-slider .left-arrow{
          position: absolute;
          left: 20px;
          bottom:  50%;
      }
      .header-slider .right-arrow{
          position: absolute;
          right:  20px;
          bottom: 50%;
      }
  
  
  /* product page */
  .product-item{
      border: #217EF8 1px solid;
      border-radius: 10px;
      padding: 10px;
      margin: 5px;
  }
  .product-item .product-text {
     direction: rtl;
  }
  .product-item .product-text a{
    text-decoration: none;
  }
  .product-item .product-text .product-name{
     font-weight: 900;
     color: black;
  }
  .product-item .product-text .product-price{
  font-size: 18px;
  font-weight: 800;
  color: #217EF8;
  margin: 0;
  }
  
  
  .product-category-text a{
      font-size: 14px;
      color: rgba(95, 95, 95, 0.781);
  }
  .product-footer{
      direction: rtl;
      text-align: center;
  }
  .product-footer .product-note{
      font-weight: 900;
      color: rgba(95, 95, 95, 0.781);
  }
  
  .aside-bar-product{
      direction: rtl;
  }
  .aside-bar-product .title{
      font-size: 25px;
      font-weight: 900;
      padding-top: 25px;
      padding-bottom: 5px;
      border-bottom: #217EF8 solid 3px;
  
  }
  .aside-bar-product .accordion-button{
      padding-right: 50px;
  }
  .aside-bar-product .accordion-button::after{
      position: absolute;
      margin-right: -30px;
  }
  .aside-bar-product a{
      color: black;
      text-decoration: none;
  }
  .aside-bar-product .category_list{
      border-right: 1px solid  rgb(191 191 191);
      padding-right: 20px;
  }
  .accordion-item{
  border: 0px;
  }
  .accordion-button{
      padding-top: 5px;
      padding-bottom: 5px;
  }
  .Dashboard_title_Col{
      border-bottom: 4px #afafaf solid;
      direction: rtl;
      height: 59.5px;
      margin: 10px;
  }
  .Dashboard_title{
    font-size: 24px;
    font-weight: 900;
    border-bottom: 7px #217EF8 solid;
    line-height: 53px;
    width: fit-content;
    margin-right: 10px;
    padding-left: 20px;
    padding-right: 20px;
}
  
  .bannar-img img{
      height: 250px;
      width: 100%;
      object-fit: cover;
      border-radius: 25px;
  }
  .bannar-img-top img{
      height: 70%;
      width: 100%;
      object-fit: cover;
      border-radius: 25px;
  }
  @media only screen and (min-width: 1502px) {
      .bannar-img-top img{
          height: 90%;
          width: 100%;
          object-fit: cover;
          border-radius: 25px;
      }
  }
  .footer_container ul{
      direction: ltr;
      text-align: right;
  }
  .footer_container{
      direction: rtl;
      text-align: right;
      border-right: 1px solid #dfdfdf;
  }
  .footer_container .footer-title .title{
  direction: rtl;
  font-weight: 900;
  }
  .info_desc{
      direction: rtl;
      font-weight: 900;
  }
  .info_desc a{
      direction: ltr;
      font-weight: 900;
  }
  .newsletter{
      direction: rtl;
  }
  
  .category_nav_header a{
   padding: 2px;
   direction: rtl;
  }
  .category_nav_header{
      direction: rtl;
  }
  .category_nav_header .dropdown-menu a{
      text-align: right;
      padding-right: 10px;
      padding-left: 10px;
  }
  .category_nav_header .dropdown-menu {
  width: auto;
  }
  
  
  .grid-cat-item{
      padding: 0;
      padding-right: 2px;
      padding-left: 2px;
      padding-bottom: 2px;
  }
  
  .product-icons .row{
      --bs-gutter-x: -5.5rem;
  }
  .product-icons{
      padding-right: 10px;
      padding-left: 10px;
  }
  
  /* qantaty arrow css */
  .number-input input[type="number"] {
      -webkit-appearance: textfield;
      -moz-appearance: textfield;
      appearance: textfield;
    }
    
    .number-input input[type=number]::-webkit-inner-spin-button,
    .number-input input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
    }
    
    .number-input {
      border: 2px solid #ddd;
      display: inline-flex;
    }
    
    .number-input,
    .number-input * {
      box-sizing: border-box;
    }
    .number-input button {
        outline:none;
        -webkit-appearance: none;
        background-color: transparent;
        border: none;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 35px;
        cursor: pointer;
        margin: 0;
        position: relative;
        transition: 100ms;
    }
    
    .number-input button:before,
    .number-input button:after {
        background-color: #fcfcfc;
        display: inline-block;
        position: absolute;
        content: '';
        width: 10px;
        height: 2px;
        background-color: #212121;
        transform: translate(-50%, -50%);
    
    }
    .number-input button.plus:after {
      transform: translate(-50%, -50%) rotate(90deg);
    }
    .number-input button:hover{
        background-color: #cbcbcb;
    }
    .number-input input[type=number] {
      max-width: 35px;
      height: 35px;
      padding: .5rem;
      border: solid #ddd;
      border-width: 0 2px;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
    } 
  
  
    /* anchor */
  
  
  
  
    
  
  .number-input a {
      outline:none;
      -webkit-appearance: none;
      background-color: transparent;
      border: none;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 35px;
      cursor: pointer;
      margin: 0;
      position: relative;
      transition: 100ms;
  }
  
  .number-input a:before,
  .number-input a:after {
      top: 50%;
      background-color: #fcfcfc;
      display: inline-block;
      position: absolute;
      content: '';
      width: 10px;
      height: 2px;
      background-color: #212121;
      transform: translate(-50%, -50%);
  
  }
  .number-input a.plus:after {
  transform: translate(-50%, -50%) rotate(90deg);
  }
  .number-input a:hover{
      background-color: #cbcbcb;
  }
  .number-input input[type=number] {
      max-width: 80px;
      height: 35px;
      padding: .5rem;
      border: solid #ddd;
      border-width: 0 2px;
      font-size: 15px;
      font-weight: bold;
      text-align: center;
  } 
  
  
  
    /* end  */
    .dot {
      height: 35px;
      width: 35px;
      background-color: #217EF8;
      color: white;
      border-radius: 50%;
      display: inline-block;
      border: 0;
    }
    .form_buttom button{
      background-color: #ffffff00;
      height: 35px;
      width: 35px;
      border: 0;
      color: white;
    }
    .badg_new_onhead{
      position: absolute;
    }
    .badg_offer_onhead{
      position: absolute;
      margin-top: 18px;
    }
    .check-details{
      direction: rtl;
      padding-right: 10px;
    }
    .check-details label{
      font-size: 25px;
      padding-right: 10px;
      cursor: pointer;
      user-select: none;
    }
    .arabic-model-text .modal-title{
      font-size: 17px;
      direction: rtl;
      float: right;
    }
    .arabic-model-text .modal-header{
      display: block;
    }
    .login-form label{
      float: right;
      padding-top: 5px;
      padding-bottom: 5px;
    }
    .login-form input{
      text-align: center;
    }
    .login-form ul{
      direction: rtl;
    }
    .login-form .login-container{
      border-radius: 10px;
      padding: 50px;
      box-shadow: #212121be 0px 0px 10px 0px;
    }
    .center-form{
      margin-right: 25%;
      margin-left: 25%;
    }
    .notifcations_icons{
      direction: rtl;
    }
    .notifcations_icons a{
      text-decoration: none;
      color: #212121;
    }
  
    .img-circle-small {
      height: 25px;
      width: 25px;
      border-radius: 100%;
      border: 2px solid #fff;
  }
  .loader {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      min-width: 100%;
      z-index: 1000;
      position: fixed;
      background-color: white;
    }
    .catbaque{
      margin-top: 95.99px;
    }
    .opaque{
      text-align: center;
      vertical-align: middle;
      padding-top: 10px;
      position: fixed;
      width: 100%;
      z-index: 100;
      animation-name: from_top_to_down;
      animation-duration: 3s;
    }
  
    @keyframes from_top_to_down {
      from {transform: translateY(-100px);}
      to {transform: translateY(0px);}
    }
    input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  /* Firefox */
  input[type=number] {
    -moz-appearance: textfield;
  }
  
  
  
  #eye-wrapper{
      background-color: #ffffff;
  
      width: 28px;
      position: absolute;
      transform: translate(0,-50%);
      top: 56%;
      right: 15px;
      border-radius: 50%;
      cursor: pointer;
      z-index: 1;
      transition: 0.5s;
  }
  #open,#close{
      position: absolute;
      margin: auto;
      left: 0;
      right: 0;
      top: 0.5px;
      width: 25px;
  }
  #open{
      display: none;
  }
  
  #eye-wrapper-reg{
      background-color: #ffffff;
      width: 28px;
      position: absolute;
      transform: translate(0,-50%);
      top: 56%;
      right: 15px;
      border-radius: 50%;
      cursor: pointer;
      z-index: 1;
      transition: 0.5s;
  }
  #open-reg,#close-reg{
      position: absolute;
      margin: auto;
      left: 0;
      right: 0;
      top: 0.5px;
      width: 25px;
  }
  #open-reg{
      display: none;
  }
  .password-container{
      position: relative;
  }
  #errorlog .alert{
      text-align: center;
  }
  #errorlog .check_and_conform{
      text-decoration: none;
      cursor: pointer;
      display: block;
      text-align: center;
      width: 100%;
      transition: 0.5s;
  }
  @keyframes scaleanimation {
      from {transform: scale(1);}
      to {transform: scale(0.95);}
    }
  
  #errorlog .check_and_conform{
      animation: scaleanimation 0.5s linear 0.5s infinite alternate;
  
  }
  #errorlog .check_and_conform:hover{
      transform: scale(0.95);
  }
  /* modal */
  #modal_element_body .modal-header{
      display: block;
  }
  #modal_element_body .modal-header .modal-title{
      float: right;
  }
  #modal_element_body .modal-header .btn-close{
      float: left;
      padding-top: 20px;
  }
  #modal_element_body .modal-footer{
  text-align: center;
  }
  #add-to-cart-form label{
      padding-top: 5px;
      padding-bottom: 5px;
      font-size: 18px;
      font-weight: 900;
  }
  #add-to-cart-form input,#add-to-cart-form textarea{
      background-color: #ccedba;
  }
  .img_container{
      text-align: center;
  }
  .img_container img{
      border: #2121214a 2px solid;
      border-radius: 25px;
      box-shadow: 0px 0px 10px 0px #00000038;
  }
  
  .product-item img{
      height: 100%;
      width: 100%;
      object-fit: cover;
  }
  #lightgallery img{
      width: 100%;
  }
  .bannar-hero{
      height: 700px;
  }
  @media only screen and (max-width: 1972px) {
      .bannar-hero{
          height: 600px;
      }
  }
  @media only screen and (max-width: 1774px) {
      .bannar-hero{
          height: 500px;
      }
  }
.rounded-image{
    width: 50px;
    height: 50px;
    object-fit: cover;
    object-position: center;
    border-radius: 100%;
    box-shadow: black 0px 0px 3px 0px;
    border: solid 2px white;

}