/*!
 * Licensed under http://www.mytdevsolutions.com
 */

 /* Ensure the slider container is relatively positioned */
 #slider-carousel {
  display: flex;
  width: 100%;
  height: auto;
}

.carousel-img{
  height: auto !important;
  width: 32vw !important;
  margin-bottom: 75px;
}
.cart-icon{
  font-size: 3vh !important;
  color: #777 !important;
}
.custom-bars{
  color: black !important;
  font-size: 2rem;
  font-weight: 500 !important;
}
.center{
  display: flex;
  justify-content: center;
  align-items: center;
}
.custom-border{
  border: 0.5px black solid;
  padding: 8px 8px 2px 8px;
  border-radius: 4px;
}
.custom-start{
  display: flex;
  justify-content: baseline;
  align-items: baseline;
}
.custom-end{
  display: flex;
  justify-content: right;
  align-items: right;
}
.custom-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px;
  padding: 15px 15px 10px 15px;
}
.custom-col {
  flex: 1 !important;
}
.custom-col-4 {
  grid-column: span 4 !important;
}
.custom-col-3 {
  grid-column: span 3 !important;
}
.feat-cont{
  margin-top:90px
}
.slider-cont{
  margin-top:120px
}

.no-gap{
  margin: 0 !important;
  padding: 0 !important;
}

/* Style the carousel indicators (circles) */
.carousel-indicators {
  transform: translateX(-50%);
  z-index: 100 !important;
  justify-content: center;
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.carousel-indicators li {
  display: inline-block;
  width: 15px;
  height:  15px;
  margin: 0 5px;
  text-indent: -999px;
  cursor: pointer;
  background-color: rgb(170, 166, 166);
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.carousel-indicators li:hover,
.carousel-indicators .active {
  background-color: rgb(170, 166, 166);
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  width: 15px;
  height: 15px;
}

@media (min-width: 768px){
  .navbar-collapse.collapse {
    display: none !important;
    position:relative;
    height: auto !important;
  }

  .collapsing{
    display: none;
  }

  .navbar-home{
    display: block !important;
    padding-right: 5%;
    padding-top: 10px;
  }

}

@media (max-width: 768px){
  .navbar-home{
    display: none !important;
  }

  .text-logo-home{
    display: none !important;
  }
}

@media (min-width: 800px){

  .responsive-header{
    display: none !important;
  }

}


@media only screen and (max-width: 1200px) {
  .feat-cont{
    margin-top: 0px
  }
}
@media only screen and (max-width: 300px) {
  /* .carousel-indicators {
    top: 500px;
  } */
}

@media only screen and (min-width: 301px) and (max-width: 700px) {
  .carousel-img{
    height: auto !important;
    width: 100vw !important;
  }
  .slider-cont{
    margin-top:100px
  }
}

@media only screen and (min-width: 701px) and (max-width: 1200px) {
  /* .carousel-indicators {
    top: 550px;
  } */
}

/* @media only screen and (max-width: 300px) {
  .carousel-indicators {
    top: 500px;
  }
}

@media only screen and (min-width: 301px) and (max-width: 400px) {
  .carousel-indicators {
    top: 515px;
  }
}

@media only screen and (min-width: 401px) and (max-width: 415px) {
  .carousel-indicators {
    top: 550px;
  }
}
@media only screen and (min-width: 416px) and (max-width: 430px) {
  .carousel-indicators {
    top: 555px;
  }
}
@media only screen and (min-width: 431px) and (max-width: 500px) {
  .carousel-indicators {
    top: 555px;
  }
}

@media only screen and (min-width: 501px) and (max-width: 1000px) {
  .carousel-indicators {
    top: 580px;
  }
}
@media only screen and (min-width: 1001px) and (max-width: 1200px) {
  .carousel-indicators {
    top: 590px;
  }
}
@media only screen and (min-width: 1201px) and (max-width: 1500px) {
  .carousel-indicators {
    top: 595px;
  }
} */

/* @media (max-width: 1200px) {
  #slider-carousel {
    width: 100%;
    height: 82vh;
  }

  .carousel-indicators li {
    width: 15px;
    height: 15px;
    margin: 0 3px;
  }

  .carousel-indicators li:hover,
  .carousel-indicators .active {
    width: 15px;
    height: 15px;
    margin: 0 3px;
  }
}

@media only screen
  and (device-width: 344px)
  and (device-height: 882px){
    #slider-carousel {
      width: 100%;
      height: 65vh;
    }
}

@media only screen
  and (device-width: 375px)
  and (device-height: 667px){
    #slider-carousel {
      width: 100%;
      height: 95vh;
    }
}

@media only screen
  and (device-width: 414px)
  and (device-height: 896px){
    #slider-carousel {
      width: 100%;
      height: 75vh;
    }
}

@media only screen
  and (device-width: 390px)
  and (device-height: 844px) {
  #slider-carousel {
    width: 100%;
    height: 85vh;
  }
}

@media only screen
  and (device-width: 428px)
  and (device-height: 926px)
{
  #slider-carousel {
    width: 100%;
    height: 75vh;
  }
}



@media only screen
  and (device-width: 430px)
  and (device-height: 932px)
  and (-webkit-device-pixel-ratio: 3){
  #slider-carousel {
    width: 100%;
    height: 75vh;
  }
}

@media only screen
  and (device-width: 412px)
  and (device-height: 915px) {
    #slider-carousel {
      width: 100%;
      height: 95vh;
    }
}

@media only screen
  and (device-width: 360px)
  and (device-height: 740px) {
    #slider-carousel {
      width: 100%;
      height: 82vh;
    }
}

@media only screen
  and (device-width: 820px)
  and (device-height: 1180px) {
    #slider-carousel {
      width: 100%;
      height: 90vh;
    }
}

@media only screen
  and (device-width: 1024px)
  and (device-height: 1366px) {
    #slider-carousel {
      width: 100%;
      height: 40vh;
    }
} */