/*/////////////////////////////// sub page  //////////////////// */

/* side bar */
.sile-filter-mobile{
    display: none;
  }
.filter-mobile-box{
    display: none;
  }
  .fil-bx-new h5{
    font-size: 16px;
  }

/* product page */
/* swiper slide */
.ss{
  width: 60px !important;
  height: 70px !important;
 /* object-fit: cover; */
 }
 .ss img{
   width: 100%;
   height: 60px;
   object-fit: contain;
  }
  .slid{
      display: flex;
      justify-content: center;
      align-items: center;
    }
.main-sli{
      display: flex;
      align-items: center;
      justify-content: center;
}
.main-sli img{
      height: 450px;
      width: 100%;
      object-fit: contain;
}
/* quantity section */
.wid{
  width: 80px !important;
  flex: none !important;
}
.btn-number{
  background-color: var(--c2) !important;
  color: var(--c1) !important;
  font-weight: 800 !important;
  font-size: 28px !important;
  width: 55px;
  padding: 0px !important;
}

/* buy now and cart button */


/* .page-buy{
  background-color: black !important;
  color: var(--c1) !important;
  
} */
.page-buy {
  background-color: black !important;
  color: #fff !important;
  font-family: inherit;
  display: inline-block;
  width: 100%;
  
  line-height: 2.5em;
  overflow: hidden;
  margin: 20px;
  font-size: 17px;
  z-index: 1;
  border-radius: 6px;
  position: relative;
}
.page-cart{
  background-color: var(--c1) !important;
  color: #FFF !important;
}

.page-buy::before {
  position: absolute;
  content: "";
  background: var(--c1);
  width: 150px;
  height: 200px;
  z-index: -1;
  border-radius: 50%;
}
.page-cart::before {
  position: absolute;
  content: "";
  background: #000;
  width: 150px;
  height: 200px;
  z-index: -1;
  border-radius: 50%;
}

.page-buy:hover {
  color: white !important;
}

.page-buy:before {
  top: 100%;
  left: 100%;
  transition: .3s all;
}

.page-buy:hover::before {
  top: -30px;
  left: -30px;
}
/* description content */

.dis-navbar{
  display: flex;
  align-items: center;
  justify-content: center;
}
.dis-nav{
  border: none !important;
}
.dis-nav .nav-link{
  color: #000 !important;
}
.dis-nav .active{
  background-color: unset !important;
  border: 2px solid black !important;
  font-weight: bold;
}
.dic-con{
  background-color: rgba(209, 212, 212, 0.1) 
}
.cen-t{
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* //////////cart page /////////// */
.cart-pg .wid{
  width: 40px !important;
  height: 45px;
  flex: none !important;
}
.cart-pg .btn-number{
  background-color: var(--c2) !important;
  color: var(--c1) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  width: auto;
  padding: 8px !important;
  
}
.make-purchchese{
  background-color: var(--c1) !important;
  color: #fff !important;
  font-weight: bold !important;
}
/* buy now page */
.b-btn1{
  border:2px solid var(--c1) !important;
  color: var(--c1) !important;
}
.b-btn1:hover{
  background-color: var(--c1) !important;
  color: #FFF !important;
}
.b-btn2{
  background-color: var(--c1) !important;
  color: #FFF !important;
}
.buy-form input ,textarea ,select{
  border: 1px solid var(--c1);
}
.buy-form textarea{
  border: 1px solid var(--c1);
}
.buy-form select{
  border: 1px solid var(--c1);
}

.about-main{
  height: 60vh;
  background-image: url(../images/2.jpg) !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  position: relative;
}
.ab-ovl{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  /* background-color: rgb(0, 0, 0,.5); */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.ab-ovl h3{
  
  font-size: 40px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transform: translateY(-50%);
}
.ab-side img{
  height: 500px;
  object-fit: contain;
}
.ab-text-site{
  display: flex;
  justify-content: center;
  flex-direction: column;
}
/* details */
.detai-txt h3{
  font-size: 20px;
}
.detai-txt p{
  font-size: 15px;
}
.detai-i i{
  font-size: 40px;
}
 /* testi */
     /* .owl-theme{
      min-height: 80vh !important;
     } */
     .says .item{
      background-color: #fff;
      box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
      border-top: 3px solid var(--c1);
      min-height: 210px;
    }
    .says .item p{
      font-size: 14px;
    }
    .owl-carousel .owl-stage-outer {
      position: relative;
      min-height: 250px;
      -webkit-transform: translate3d(0,0,0);
  }
   /* ////////Contact us///// */
 .form-btn{
  background-color: var(--c1) !important;
  color: #fff !important;
}
.con-cards{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .cc{
    min-width: 350px !important;
    min-height: 250px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #e5e5e5;
    border-radius: 15px;
    border-top: 5px solid var(--c1);
    padding: 3%;
    transition: .5s;
  }
  .cc:hover{
    transition: .5s;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
  }
  .cc i{
    font-size: 50px;
    margin-bottom: 3%;
    color: var(--c1);
  }
  .cc h5{
  /* color: var(--w); */
  letter-spacing: 2px;
  text-align: center;
  }
  .cc p{
    /* color: var(--w) !important; */
    letter-spacing: 2px;
    text-align: center;
    }
    .con-input{
      border: none !important;
      border-bottom: 2px solid black !important;
      outline: none !important;
      margin-bottom: 8%;
    }
    .con-input:focus{
      outline: none !important;
    }
    .get-in{
      font-size: 50px;
      font-weight: 700;
      /* -webkit-text-stroke: 1px var(--c2);
      -webkit-text-fill-color: transparent; */
  
    }
    .con-img{
      object-fit: contain;
      height: 450px;
    }
    .icon-box{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
    }
    .boxs{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 3%;
    }
    .boxs i{
      font-size: 50px;
      color: black;
    }
    .con-bx img{
      width: 100px;
    }
    .con-bx h3{
      font-size: 22px;
      letter-spacing: 1px;
    }
    .con-bx{
      width: 100%;
      height: 230px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background-color: #f6f6f6;
      text-align: center;
    }
         /* zooom */
         .slideshow-items {
          width: 100%;
      }
      
      .slideshow-thumbnails {
          width: 100px;
          height: 100px;
      }
      
      #slideshow-items-container {
          display: inline-block;
          position: relative;
      }
      
      #lens {
          background-color: rgba(233, 233, 233, 0.4);
          /* width: 150px !important;
          height: 100px !important; */
      }
      
      #lens,
      #result {
          position: absolute;
          display: none;
          z-index: 1;
      }
      
      .slideshow-items {
          display: none;
      }
      
      .slideshow-items.active {
          display: block;
      }
      
      .slideshow-thumbnails {
          opacity: 0.5;
      }
      
      .slideshow-thumbnails.active {
          opacity: 1;
      }
      
      #lens,
      .slideshow-items,
      .slideshow-thumbnails,
      #result {
          border: solid var(--light-grey-2) 1px;
      }
      #result{
        z-index: 80;
      }
      /* similar products */
.sim-pro{
  position: relative;
}
.owl-nav{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 30%;
}
.sim-arrow{
  background-color: #000 !important;
  border-radius: 50% !important;
  height: 35px;
  width: 35px;
  display: flex !important;
  justify-content: center;
  align-items: center;
  transition: all 1s !important;
}

/* .sim-pro:hover .sim-arrow{
  transform: scale(1.3);
  transition: all 1s !important;
} */
.sim-card .name{
  width: 80%;
}
.isim-btn{
  background-color: var(--c1) !important;
  color: #fff !important;
  font-weight: 500 !important;
}
.sim-img{
  display: flex;
  justify-content: center;
  align-items: center;
}
  /* make it responsive */
@media screen and (max-width:920px) {

  /* side bar */
  .des-filter{
    display: none;
  }
  .filter-mobile-box{
      display: block;
      width: 100%;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      bottom: 0%;
      left: 0%;
      z-index: 200;
      box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
    }
  
    .filter-open{
      font-size: 18px !important;
      letter-spacing: 1px !important;
      font-weight: bold !important;
      color: var(--red) !important;
    }
    .filter-box{
      overflow-y: scroll;
    }
    .sile-filter-mobile{
      width: 81%;
      min-height: 100vh;
      position: fixed;
      z-index: 1210;
      display: block;
      /* background-color: aqua; */
      background-color: #fff;
      transition: all 1s;
      top: 0% !important;
      left: -110%;
      overflow-y: scroll !important;
      scroll-behavior: smooth;
      
      
    }
    /* ///// product page /////// */
    /* swiper silde */
    .main-sli img {
      height: 420px;
      width: 100% !important;
  }
  /* reviwe box */
  .revew-box{
    flex-direction: column;
  }
  /* about */
  .ab-ovl h3{
    font-size: 65px;
    transform: translateY(-75%);
  }
  .detai-i{
    text-align: center;
  }
  .detai-txt{
    text-align: center;
  }

    /* /////zoom/// */
      /* mobile zoom  */
  /* zoom page */
  .zoom-con{
    height: 100vh;
    width: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .image-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 500px;
    background-color: var(--c2);
    touch-action: none;
    cursor: move;
    position: relative;
    /* Set cursor to indicate draggable content */

}
.zoom-icon{
  position: absolute;
  bottom: 3%;
  right: 3%;
  font-size: 19px;
  color: var(--c1);
}
.go-back{
  position: absolute;
  top: 3%;
  right: 3%;
}
#productImage {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
}
@media screen and (max-width:620px){
    /* about */
    .about-main{
      height: 25vh;
    }
    .ab-ovl h3{
      font-size: 25px;
      transform: translateY(-75%);
    }
}
@media screen and (max-width:380px){
  .page-buy{
    font-size: 14px !important;
  }

}