*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: "IBM Plex Sans", sans-serif;
}
@font-face {
  font-family: "Bright Grotesk Light" ;
  src: url("./bright-grotesk.ttf");
}
.bg-header-silks{
    background-color: #b31e22;
}
.bg-header-silkss{
  background-color: #F2CD4B;
}
.bg-image {
    /* background-image: url(./banner_new.jpg); */
    /* background-size: cover; */
    background-position: center;
    background-repeat: no-repeat;
    /* height: 700px; */
    background-color: #ffe11f;
}
.background-body{
  background-color: #FCF3EE;
}
.background-navbar{
  background-color: white;
  -webkit-box-shadow: 0 8px 6px -4px #d3d2d2;
  -moz-box-shadow: 0 8px 6px -4px #d3d2d2;
       box-shadow: 0 8px 6px -4px #d3d2d2;
  
}
.nav-links li a {
    list-style: none;
    text-decoration: none;
  }
  
  /* css to reset all the designs */
  
  /* add styles on elements */
  
/*    */
ul li{
  list-style: none;

}
 
p a{
  text-decoration: none;
  color: #4F4F4F;
}

.navbars{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* product */
.product-items ul li a{
  text-decoration: none;
  color: #BA3337;
}
.nav-items ul li a{
  text-decoration: none;
  color: white;
}


.product-first{
  display: flex;
  align-items: center;
  padding: 20px 0px 0px 0px;
}
.nav-first{
  display: flex;
  align-items: center;
  padding: 20px 0px 0px 0px;
}

.product-items .product-links{
  display: flex;
  font-size: 14px;
  font-weight: 500;
  gap: 15px;
  padding-left:20px ;
  color:#BA3337;
}
.nav-items .nav-links {
  display: flex;
  font-size: 14px;
  gap: 15px;
  padding-left:20px ;
  color: white;
}

.product-second{
  display: flex;
  align-items: center;
  gap: 10px ;
}
.nav-second{
  display: flex;
  align-items: center;
  gap: 10px ;
}

#search{
  border-radius: 25px;
  border: 2px solid #609;
  padding: 20px; 
  height: 20px;   
}
#product-search{
  border-radius: 25px;
  border: 2px solid #F6DEBA;
  padding: 20px; 
  height: 20px;   
}

.search-icon{
  width: 35px;
  height: 35px;
  display: none;
}
.logo-head{
  display: none;
}

 /* END OF GENERAL STYLING */
 
 /* START OF USEFUL CODE */
 .hamburger {
  display: block;
  width: 50px;
  height: 50px;
  background-color: white;
  position: relative;
  cursor: pointer;
  border-radius: 10px;
  & span,
  &:before,
  &:after {
   content: " ";
   display: block;
   width: 30px;
   height: 2px;
   background-color: black  ;
   transform: rotate(0);
   position: absolute;
   left: 10px;
 
   transition: all 300ms ease-in-out;
  }
 
  &:before {
   top: 16px;
  }
  & span {
   top: 25px;
   opacity: 1;
  }
  &:after {
   bottom: 15px;
  }
 
  &.active span {
   opacity: 0;
   top: 25px;
   transform: rotate(90deg);
  }
  &.active:before {
   width: 34px;
   top: 25px;
   left: 8px;
   transform: rotate(45deg);
  }
  &.active:after {
   width: 34px;
   bottom: 24px;
   left: 8px;
   transform: rotate(-45deg);
  }
 }
.hamburger{
display: none;
}



/* shop by Category */

.font-shop-category{
  font-family: "IBM Plex Sans", sans-serif;
}
.font-shop-context{
  font-size: 20px;
  color: #7d7067;
}
.font-shop-subtitle{
  font-family: "Bright Grotesk Light";
  font-size: 40px;
  Color: #2f251c;
}
.icon-left ,.icon-right{
  border: 1px solid #c1c1c0;
  border-radius: 100px;
  width: 50px;
  padding: 10px;
}
.icon-left:hover ,.icon-right:hover{
    background-color: #7d7067;
    transition: 0.3s;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-slide img {
  width: 100%;
  height: auto;
}
.swiper-button-next,
.swiper-button-prev {
  color: #000; /* Customize arrow color */
}

/* Certificate */
.bg-certificate{
  background-color:#FDF4EF ;
}
.certificate-title{
  color: #4f4e4e;
  font-size: 20px;
  /* font-family: "Bright Grotesk Light"; */
  font-weight: 600;
}
.Trusted-Title{
  font-family: "Bright Grotesk Light";
  color: #B68052;
  font-size: 20px;
  font-weight: 600;
}
.trusted-para{
  font-family: "Bright Grotesk Light";
  color: #4f4e4e;
  font-size: 16px;

}

.parent{
  position: relative;
}
.child{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.certificate-content{
  width: 50%;
}

/* pure silk  */

.kumbam-img{
  width: 60px;
  height: auto;
}
/* .img-captions{
  color: #4f4e4e;
}
.img-para{
  font-size: 16px;
  color: #4F4F4F;
  font-style: italic;
  font-weight: 600;
} */

/* wedding */

.bg-wedding{
  background-color: #fbf0ea;
}
.para-wedding{
  width: 25%;
  color: #B68052;
  font-weight: 500;
  font-style: italic;
}
.btn-wedding{
  border: 1px solid #EEB743;
  background-color: #B92227;
  color: white;
  font-style: italic;
  font-weight: 500;
}

/* footer */
.footer-logo{
  width: 75%;
}
.footer-link li a{
   text-decoration: none;
   color: #7d7067;
   font-weight: 600;
}
.footer-border{
  border-top: 1px solid #CA972A;
}
.social-icon{
  width: 44px;
}
.call-text,.contact-text,.locations-text{
  color: #7d7067;
  font-weight: 600;
}
.copyrights{
  background-color: #CA972A;
}



.splide__slide {
  text-align: center;
}

.img-captions {
  font-weight: bold;
  color: #4f4e4e;
}

.img-para {
  font-size: 16px;
  color: #4F4F4F;
  font-style: italic;
  font-weight: 600;
}

.splide__arrow {
  background: none;
  border: none;
  font-size: 30px;
  cursor: pointer;
}
/* 
.splide__arrow--prev {
  left: -1rem;
}

.splide__arrow--next {
  right: -1rem;
} */


.custom-arrow {
  border: none;
  background-color:transparent;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.custom-arrow-prev {
  left: -1rem;
}

.custom-arrow-next {
  right: -1rem;
}
.icon-lefts {
  border: 1px solid #c1c1c0;
  border-radius: 100px;
  width: 50px;
  padding: 10px;
}
.icon-lefts:hover{
    background-color: #F7E2D1;
    transition: 0.3s;
}
/* product */
.product-filter{
  background-color: #F6F6F6;
}
.font-filter{
  border-bottom: 1px dotted black  ;
}
        /* Customize the track (background) */
        input[type="range"] {
          -webkit-appearance: none;
          appearance: none;
          width: 100%;
          height: 8px;
          background: #ddd;
          border-radius: 5px;
          outline: none;
          opacity: 0.7;
          transition: opacity .2s;
      }

      /* Hover effect for the range input */
      input[type="range"]:hover {
          opacity: 1;
      }

      /* Customize the thumb (handle) */
      input[type="range"]::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: #ff5722; /* Custom thumb color */
          cursor: pointer;
          box-shadow: 0 0 5px rgba(0,0,0,0.2);
      }

      input[type="range"]::-moz-range-thumb {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: #ff5722; /* Custom thumb color */
          cursor: pointer;
          box-shadow: 0 0 5px rgba(0,0,0,0.2);
      }

      /* Customize the filled track before the thumb */
      input[type="range"]::-webkit-slider-runnable-track {
          background: linear-gradient(to right, #f44336, #f44336); /* Custom track gradient */
          height: 8px;
          border-radius: 5px;
      }

      input[type="range"]::-moz-range-progress {
          background: linear-gradient(to right, #f44336, #f44336); /* Custom track gradient */
          height: 8px;
      }

      input[type="range"]::-ms-fill-lower {
          background: #f44336;
      }

      input[type="range"]::-ms-fill-upper {
          background: #f44336;
      }
    .product-parent{
      position: relative;
    }
    .product-child{
      position: absolute;
      top:11px;
      right: 12px;
    }
    
    



    
@media screen and (min-width:200px) and (max-width: 1024px) {


  .bigImg{
    width: 100%;
  }
  .para-wedding{
    width: 100%;

  }
  .footer-logo{
    width: 50%;
  }
  .certificate-content{
    width: 100%;
  }
  .font-shop-subtitle{
    font-size: 30px;
  }
  .logo{
    display:none;
  }

  .logo-head{
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .hamburger{
    display: block;
    justify-content: start;
    }

  .search-icon{
    width: 35px;
    height: 35px;
    display: block;
  }
  #search{
   display: block; 
   position: absolute;
  left: 5%;
   width:90%;
   margin-top: 50px;
   transition: all 0.4s ease;
   opacity: 0;
  }

  #search.show {
    display: block;
    opacity: 1;
  }
  .nav-items .nav-links{
    display: flex;
    flex-direction: column;
    position: fixed;
    justify-content: center;
    /* align-items: center; */
    top: 0;
    left: -100%; /* Hide the menu initially */
    width: 70%;
    height: 100%;
    background-color:white; /* Full-screen background */
    z-index: 9999;
    padding-top: 50px;
    transition: left 0.3s ease-in-out; /* Slide-in effect */
  }
  
  /* When active (hamburger clicked), slide in the menu */
  .nav-items .nav-links.active {
    left: 0;
  }
  .nav-items ul li a{
    text-decoration: none;
    color: black;
    font-size: 18px;
    font-weight: 600;
  }
}