/***font family***/
 @font-face{
  font-family: Kalame;
  src: url(./../webfonts/Kalameh-Regular.ttf);
  font-weight: normal;
  font-style: normal;
}

svg {
  margin-left: 6px;
  margin-right: 6px;
}
:root {
  --main-color: #011c39;
  /*--main-color: #5f006b;*/
  /*--secondary-color: #e22084;*/
  --kids-color: #62af51;
  /*--home-color: #c63715;*/
  --beauty-color: #07bfbc;
  --main-text-color: #171717;
  --border-radius: 0;
  --gray: #e6e6e6;
  --dark-gray:#686963;
}
a {
  color: var(--main-text-color);
}


/* Page header */
.category-header {
  /*background-color: #f3e0e059;*/
  color: var(--main-color);
}



/* Breadcrumb */
.breadcrumb {
  font-size: .75rem;
}
.breadcrumb-item a {
  color: var(--dark-gray);
}

.breadcrumb-item.active {
  color: var(--main-color);
}
.breadcrumb-item+.breadcrumb-item::before {
  font-family: 'Material Icons';
  content: '\e5cb';
  color: var(--main-text-color);
}

/* Sidebar Menu */
.sidebar-menu {
  position: sticky;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  top: 0;
}

.sidebar-menu,
.sidebar-menu .accordion .accordion-button {
  border: 0;
}

.sidebar-menu .accordion .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.sidebar-menu .accordion .accordion-button:not(.collapsed) {
  background-color: #fdfafa;
  color: var(--main-text-color);

}

.sidebar-menu .accordion-item {
  margin-bottom: .5rem;
}

.sidebar-menu .accordion-item:first-of-type .accordion-button {
  border-radius: var(--border-radius);
}

.sidebar-menu .accordion-item .accordion-collapse {
  border: 0;
  font-size: .75rem;
}

.sidebar-menu .accordion-body label {
  border: 0;
}


.sidebar-menu input.form-check-input[type=checkbox] {
  border-radius: var(--border-radius);
}

.sidebar-menu input.form-check-input[type=checkbox]:checked {
  border-color: var(--main-color);
  background-color: var(--main-color);
  color: #f3e0e0;
}

/* Applied filters*/
.filtered-by a {
  color: var(--secondary-color);
  font-size: .8rem;
}
.filter-btn {
  border: 1px solid var(--gray);
  padding: 1px 5px;
  border-radius: 5px;
}
.filter-btn .material-icons-outlined {
  font-size: 12px;
  padding: 0;
}

.filter-btn span {
  font-size: 14px;
}

/* No Product */
.no-product {
  color: var(--dark-gray);
}
/* Recommended sort */
.show-by select {
  width: auto;
  padding-left: 3.75rem;
  border-radius: var(--border-radius);
}

.show-by select option:hover {
  background-color: var(--main-color);
  color: #f3e0e0;
}

/* Products Card  */

.products .card {
  border: 0 ;
  border-radius: 0px !important;

  margin-bottom: 3rem;
  /*border-radius: var(--border-radius);*/
}
.p_card .card {
  border: 0 ;
  border-radius: 0px !important;

  margin-bottom: 3rem;
  /*border-radius: var(--border-radius);*/
}

/*.p_card.card{*/
/*    overflow: hidden !important;*/
/*}*/

.products .card:hover {
  box-shadow: 0 6px 20px #69686329;

}

.products .card .card-img-top {
  /*border-radius: var(--border-radius);*/

  background-color: #e6e6e6;
}

.products .card-hover-buttons .material-icons-outlined {
  font-size: 24px;
  color: var(--dark-gray);
  padding: 3px;
  border: 1px solid #69686329;
  background-color: #e6e6e63a;

}

.product-card-img {
  overflow: hidden;
}

.product-card-img .card-hover-buttons {
  position: absolute;
  left: -35px;
  bottom: 0;
  transition: left .4s ease;

}
.product-card-img:hover .card-hover-buttons {
  position: absolute;
  left: 15px;
  bottom: 0;
  transition: left .4s ease;

}

.card-hover-buttons button {
  padding: 0;
}

.active-heart {
  color: var(--bs-red);
}

.hide {
  display: none;
}

.products .card:hover .card-hover-buttons {
  left: 3%;
  transition: left .4s ease;

}

.card-hover-buttons button:hover span.material-icons-outlined {
  color: var(--secondary-color);
}

.off-ticket,
.unavailable-product {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: var(--bs-red);
  color: #f3e0e0;
  padding: 4px 12px 0;
}

.unavailable-product {
  background-color: var(--dark-gray);
  color: var(--gray);
  padding: 4px 7px;

}

.available-inform-btn {
  border: 2px solid var(--main-color);
  color: var(--main-color);
  border-radius: var(--border-radius);
}

.products .card-text:hover a {
  color: var(--secondary-color);
}

.product-price {
  font-size: .75rem;
}

.product-color span {
  width: 20px;
  height: 20px;
  border: 3px double var(--gray);
  margin: 0 .25rem;
}


.product-color span.black-color {
  background-color: black;
}

.product-color span.red-color {
  background-color: white;
}
.product-color span.red-color {
  background-color: red;
}

.product-color span.yellow-color {
  background-color: yellow;
}

@media(max-width: 1199px) {
  .products .card-body {
    padding: 1rem .5rem;
  }
}

@media(max-width: 575px) {
  .accordion-body {
    padding: 1rem .75rem;
  }

  .accordion-button {
    font-size: .9rem;
  }

  .sidebar-menu .accordion .accordion-button::after {
    background-size: 60%;
  }
  .show-by select {
    font-size: .85rem;
  }
}

  /* body */
  body{
    overflow-x: hidden;
  }
  body::-webkit-scrollbar {
    width: 12px;               /* width of the entire scrollbar */
  }
  
  body::-webkit-scrollbar-track {
      background: #dbdbdb;     /* color of the tracking area */
  }
  
  body::-webkit-scrollbar-thumb {
    background: #36BED7;  /* color of the scroll thumb */
  }
/* main counteiner */
#main-counteiner{
    width: 100%;
    direction: rtl;
    text-align: right;
    font-family: Kalame;
    background-color: #FAFAFA;
}


}
ul{
  list-style-type: none;
  padding-right: 0;
}
/* hover for buttons */
@keyframes hover-shadow {
  0% {
    transform: translateY(6px);
    opacity: 0.4;
  }
  50% {
    transform: translateY(3px);
    opacity: 1;
  }
  100% {
    transform: translateY(6px);
    opacity: 0.4;
  }
}
.hover-shadow {
  display: inline-block;
  position: relative;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hover-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: "";
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0) 80%
  );
  /* W3C */
  transition-duration: 0.3s;
  transition-property: transform opacity;
}
.hover-shadow:hover {
  transform: translateY(-6px);
  animation-name: hover;
  animation-duration: 1.5s;
  /*animation-delay: 0.3s;*/
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.hover-shadow:hover:before {
  opacity: 0.4;
  transform: translateY(6px);
  animation-name: hover-shadow;
  animation-duration: 1.5s;
  /*animation-delay: 0.3s;*/
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
/* first menu */
.first-menu{
  background-image: url(./../image/Vector.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #011C39 !important;
}
.bars{
  width: 25px;
  height: 30px;
}
.navbar-light .navbar-toggler{
  color: transparent !important;
}
/* second menu */
.second-menu{
  background-color: #FAFAFA;
}
.second-menu >div .navbar-collapse ul li a:focus, .second-menu >div .navbar-collapse ul li a:hover{
  color: #88d1ea !important;
}
.input-search{
  background-color: #d9dee7;
  border-radius: 10px;
}
.input-search:hover{
  border: 1px solid #36BED7 !important;
}
.input-search span{
  width: 1px;
  height: 25px;
  background: #88d1ea;
  margin-top: 5px;
}
.input-search input{
  border-radius: 0 !important;
}
.input-search input::placeholder{
  color: #646464;
  font-size: 14px;
}
.input-search button , .input-search input{
  background-color: transparent;
}
.input-search button:focus{
  box-shadow: none;
}
.input-search input:focus{
  background-color: transparent;
  box-shadow: none;
}
.ShopBasket{
  background-color: #cce8e9;
  border-radius: 10px;
}
.ShopBasket span{
  top:30%;
  left: 75%;
  padding: 0.25rem;
  background-color: #F96300;
}
.btn-login-signup{
  background-color: #36BED7;
  border-radius: 10px;
}
.btn-login-signup:focus , .ShopBasket:focus{
  box-shadow: none;
}
.btn-login-signup span{
  background-color: #23b1e0;
  border-radius: 5px;
  margin-left: 5px;
  padding: 2px 4px 2px 2px ;
}
/* Services */
.part-Services{
  border-radius: 15px;
}
.icon-Services{
  width: 20px;
  margin-left: 10px;
}
.Vertical-Line{
  height: 50px;
}
.part-Services .holder-title:hover ,.part-Services .holder-title:focus{
  color:#23b1e0 !important;
}
/* Product View Button */
.btn-View-Products-left:focus{
  box-shadow: none;
}
.btn-View-Products-right{
  bottom: 10%;
  right: 10%;
  z-index: 1;
  border-radius: 10px;
  font-size: 14px;
}
.btn-View-Products-right:focus{
  box-shadow: none;
}
/* titles Newest Products and Best selling products */
.title-Newest-Products , .title-Best-selling-products{
  color: #011C39;
  white-space: nowrap;
}
/* link Show more */
.Show-more{
  color: #36BED7 !important;
  white-space: nowrap !important;
  font-size: 14px;
}
.Show-more svg{
  margin-right: 5px;
  margin-top: 1px;
}
/* style navbar tab */
.my-nav{
  border-bottom: 1px solid #A5A5A5 !important;
}
.nav-pills .nav-link.active{
  background-color: transparent;
  border-bottom: 2px solid #F96300;
  border-radius: 0;
}
/* style cards */
.card{
  border-radius: 30px;
  border: 0;
  box-shadow: 0px 4px 20px rgba(111, 67, 182, 0.07);
  transition: 1s ease;

}
.p_card .card:hover{
  transform: scale(1.1);
  transition: 1s ease;
  border: 1px solid #36BED7 !important;
  z-index: 1;
}
.card img{
  height: 100%;
  padding: 20px 30px 10px;
}
.Mobile-Price{
  color: #36BED7;
}
.brand-mobile{
  color: #cce9e8;
  font-size: 12px;
  padding-top: 0.25rem;
}
.heart{
  top: 137px;
  left: 4px;
  z-index: 1;
}
.heart svg{
  width: 17px;
  height: 17px;
}
.heart svg:focus{
  outline: 0;
}
.star:focus{
  box-shadow: none !important;
}
.star span{
  padding-left: 0 !important;
}
.card-title{
  font-size: 14px;
}
/* Brands */
.brand-company{
  transition: 1s ease;
}
.brand-company:hover{
  transform: scale(1.3);
  transition: 1s ease;
}
/* footer */
footer{
  background-color: #011C39;
  border-radius: 20px 20px 0 0;
}
.part-Relationship{
  background-color: #07223F;
  border-radius: 0  0 20px 20px;
}
.part-info h5 ,.title-list-footer{
  font-size: 18px;
}
.part-info p{
  font-size: 14px;
}
.part-Relationship div svg{
  width: 20px;
  height: 20px;
}
.footer-copyright{
  background-color: #07223F;
}
.btn-send{
  background-color: #36BED7;
}
.btn-send:focus ,.btn-send:hover{
  box-shadow: none;
  background-color: #23b1e0;
}
.btn-send svg{
  width: 30px;
  height: 35px;
  margin-left: 5px;
}
.icon-app{
  width: 20px;
  height: 20px;
  margin-left: 20px;
}
.Telegram:hover , .Telegram:focus{
  stroke: #0dcaf0;
}
.WhatsApp:hover , .WhatsApp:focus{
  stroke: #2cff00;
}
.Instagram:hover , .Instagram:focus{
  stroke: #ff00f0;
}
.list-footer{
  line-height: 2;
}
.list-footer li a:hover{
  color: gray !important;
}
.Newsletter{
  font-size: 11px;
}
.input-number:focus-visible{
  outline: 0;
}
.input-number:focus{
  box-shadow: 0 0 0 0.15rem rgba(6, 202, 220, 0.79);
}
.input-number::placeholder{
  font-size: 11px;
  padding-right: 10px;
}
.copyright-text{
  font-size: 14px;
}
/* media query */
@media (min-width:576px) and (max-width:991px) {
  .my-links-footer{
    padding-right: 2rem;
  }
}
@media (max-width:575px) {
  .btn-View-Products-left {
    bottom: 10%;
    right: 10%;
    z-index: 1;
    border-radius: 10px;
    font-size: 14px;
  }
  .my-Services{
    width: fit-content;
    border-bottom: 1px solid  #80808030 ;
  }
}
@media (min-width:576px) {
  .btn-View-Products-left {
    bottom: 10%;
    left: 10%;
    z-index: 1;
    border-radius: 10px;
    font-size: 14px;
  }
}
@media (max-width:400px) {
  .my-nav{
    overflow-x: scroll;
    overflow-y: hidden;
    flex-wrap: nowrap;
    border-bottom: none !important;
  }
  .my-nav::-webkit-scrollbar {
    height: 2px;              /* width of the entire scrollbar */
  }
  
  .my-nav::-webkit-scrollbar-track {
      background: #dbdbdb;     /* color of the tracking area */
  }
  
  .my-nav::-webkit-scrollbar-thumb {
    background: #36BED7;  /* color of the scroll thumb */
  }
  .title-Newest-Products , .title-Best-selling-products{
    font-size: 15px;
  }
  .my-nav .nav-item .nav-link{
    font-size: 13px;
    white-space: nowrap;
  }
  .btn-login-signup , .Mobile-Number a , .btn-View-Products-left , .btn-View-Products-right{
    font-size: 12px;
  }
}
@media (max-width:991px) {
  .collapse:not(.show){
    display: block !important;
    /*transition-delay: 0.3s !important;*/
  }
  .navbar-collapse{
    position: fixed;
    top: 0;
    z-index: 999;
    right: -500px;
    height: 100%;
    background: #36BED7;
    width: 250px;
    border-radius: 25px 0 0 25px;
    /*transition-delay: 0.3s !important;*/

    -webkit-transition: right 0.3s ease 0.3s;
    -moz-transition: right 0.3s ease 0.3s;
    -ms-transition: right 0.3s ease 0.3s;
    -o-transition: right 0.3s ease 0.3s;
    transition: right 0.3s ease 0.3s;
  }
  .close-collapse {
    top: 15px;
    left: 15px;
    bottom: 15px;
    position: absolute;
    background: white;
    border-radius: 100%;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding-left: 3px;
    }
    .close-collapse i{
      padding-right: 3px;
      color: black;
      font-size: 12px;
    }
    .input-search{
      width: 75%;
      margin-right: 2rem;
    }
    .input-search:hover{
      border: 1px solid white;
    }
    .navbar-collapse {
      -webkit-transition: right 0.3s ease 0.3s ;
      -moz-transition: right 0.3s ease 0.3s;
      -ms-transition: right 0.3s ease 0.3s;
      -o-transition: right 0.3s ease 0.3s;
      transition: right 0.3s ease 0.3s;
      /*transition-delay: 0.3s !important;*/
      right: -500px;

    }
    .navbar-collapse.show {
      right: 0;
      -webkit-transition: right 0.3s ease 0.3s;
      -moz-transition: right 0.3s ease 0.3s;
      -ms-transition: right 0.3s ease 0.3s;
      -o-transition: right 0.3s ease 0.3s;
      transition: right 0.3s ease 0.3s;
      /*transition-delay: 0.3s !important;*/

    }

  .navbar-nav{
    padding-right: 41px !important;
    padding-top: 10px;
  }
  .Mobile-Number{
    background-color: white;
    width: fit-content;
    margin-right: 7rem;
    margin-top: 3rem;
    padding: 8px;
    border-radius: 0 20px 20px 20px;
    box-shadow: 0px 4px 20px rgba(0, 116, 136, 0.86);
  }
  .Mobile-Number a{
    color: black !important;
  }
  .navbar-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #adb5bdad;
    top: 0;
    left: 0;
    display: none;
    z-index: 9;
  }
  .first-menu >div .navbar-collapse ul li a:focus, .first-menu >div .navbar-collapse ul li a:hover{
    color: #ffe65f !important;
  }
}
@media (min-width:992px) {
  .col-two-and-a-half {
    flex: 0 0 auto;
    width: 20%;
  }
  .first-menu >div .navbar-collapse ul li a:focus, .first-menu >div .navbar-collapse ul li a:hover{
    background-color: #0B294A;
    border-radius: 10px;
  }
}
@media (min-width:992px) and (max-width:1225px) {
  .holder-title{
    font-size: 14px !important;
  }
}