@import './variables.scss';

  
  @media(min-width:1200px) {
    .w-lg-35 {
      width: 35% !important;
    }
  }
  
  .wrapper {
    /* max-width: 1100px; */
    width: 100%;
    position: relative;
  }
  
  .wrapper i {
    top: -13%;
    right: 0;
    height: 42px;
    width: 42px;
    cursor: pointer;
    font-size: 1.25rem;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0px 9px 16px rgb(205 189 224 / 50%);
    transform: translateY(-50%);
    transition: transform 0.1s linear;
  }
  
  .wrapper i:active {
    transform: translateY(-50%) scale(0.85);
  }
  
  .wrapper i:first-child {
    right: 80px;
  }
  
  .wrapper .left-arrow:hover,
  .wrapper .right-arrow:hover {
    background: #f7f7f7;
  }

  .wrapper .left-arrow:hover img,
  .wrapper .right-arrow:hover img{
    filter: invert(50%) sepia(27%) saturate(5151%) hue-rotate(328deg) brightness(100%) contrast(100%);
  }
  
  .wrapper i:last-child {
    right: 20px;
  }
  
  
  
  .wrapper .carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% / 5) - 12px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 20px;
    border-radius: 8px;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  
  .spotlight-carousel .wrapper .carousel {
    /* // grid-auto-columns: calc((100% / 4.05) - 24px); */
    grid-auto-columns: calc(23.691358% - 24px);

  }
  .spotlight-carousel.top-news-carousel .wrapper .carousel {
    grid-auto-columns: calc(34% - 24px);
}

@media(max-width:500px){
  .spotlight-carousel.top-news-carousel .wrapper .carousel {
    grid-auto-columns: calc(102% - 24px);
}
}
@media (min-width:501px) and (max-width:767px) {
  .spotlight-carousel.top-news-carousel .wrapper .carousel {
    grid-auto-columns: calc(100%/1 - 24px);
}
}
@media (min-width:768px) and (max-width:1330px) {
  .spotlight-carousel.top-news-carousel .wrapper .carousel {
    grid-auto-columns: calc(100%/2 - 24px);
}
}
  
  .carousel::-webkit-scrollbar {
    display: none;
  }
  
  .carousel.no-transition {
    scroll-behavior: auto;
  }
  
  .carousel.dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
  
  .carousel.dragging .card {
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
  }
  
  .carousel :where(.card, .img) {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .carousel .card {
    scroll-snap-align: start;
    /* height: 342px; */
    list-style: none;
    background: #fff;
    cursor: pointer;
    /* padding-bottom: 15px; */
    flex-direction: column;
    border-radius: 8px;
    border: unset;
  }
  
  .card.cust-card img {
    width: 250px;
  }
  
  @media (min-width: 601px) and (max-width: 1200px) {
    .wrapper .carousel {
      grid-auto-columns: calc((100% / 2) - 10px);
    }
  }
  
  @media (min-width: 1201px) and (max-width:1400px) {
    .wrapper .carousel {
      grid-auto-columns: calc((100% / 4) - 8px);
    }
  }
  
  @media screen and (max-width: 600px) {
    .wrapper .carousel {
      grid-auto-columns: 100%;
      grid-auto-columns: calc((100% / 1) - -40px);
    }
  }
  
  /* Similar Carousel */
  
  @media (min-width: 601px) and (max-width: 1200px) {
    .spotlight-carousel .wrapper .carousel {
      grid-auto-columns: calc((100% / 2) - 10px);
    }
  }
  
  @media (min-width: 1201px) and (max-width:1400px) {
    .spotlight-carousel .wrapper .carousel {
      grid-auto-columns: calc((100% / 4.5) - 8px);
    }
  }
  
  @media screen and (max-width: 600px) {
    .spotlight-carousel .wrapper .carousel {
      grid-auto-columns: 100%;
      grid-auto-columns: calc((100% / 1.1) - -40px);
    }
  }
  
/* //   .spotlight-carousel .wrapper i:first-child {
//     left: 18px;
//   }
  
//   .spotlight-carousel .wrapper i:last-child {
//     right: 38px;
//   } */
  
  @media screen and (max-width: 1024px) {
    .spotlight-carousel .wrapper i:first-child {
      left: 0px;
    }
  
    .spotlight-carousel .wrapper i:last-child {
      right: 0px;
    }
    .wrapper i{
      top: 50%;
    }
  }

  
  @media  (max-width:690px) {
    .quick-carousel .wrapper .carousel {
      grid-auto-columns: calc((100% / 1) - 10px);
    }
  }
  @media (min-width: 601px) and (max-width: 100px) {
    .quick-carousel .wrapper .carousel {
      grid-auto-columns: calc((100% / 1.5) - 150px);
    }
  }
  @media (min-width: 1000px) and (max-width: 1200px) {
    .quick-carousel .wrapper .carousel {
      grid-auto-columns: calc((100% / 2.5) - 40px);
    }
  }
  
  @media (min-width: 1201px) and (max-width:1400px) {
    .quick-carousel .wrapper .carousel {
      grid-auto-columns: calc((100% / 4.5) - -68px);
    }
  }
 
  
  @media screen and (max-width: 600px) {
    .quick-carousel .wrapper .carousel {
      grid-auto-columns: 100%;
      grid-auto-columns: calc((100% / 1.1) - 40px);
    }
  }
  
/* //   .spotlight-carousel .wrapper i:first-child {
//     left: 18px;
//   }
  
//   .spotlight-carousel .wrapper i:last-child {
//     right: 38px;
//   } */
/*   
  @media screen and (max-width: 1024px) {
    .spotlight-carousel .wrapper i:first-child {
      left: 0px;
    }
  
    .spotlight-carousel .wrapper i:last-child {
      right: 0px;
    }
    .wrapper i{
      top: 50%;
    }
  } */
  
  .carousel-card{
    border-radius: 24px !important;
    border:1px solid #EDEDED !important;
  }
  .carousel-img-container{
    width: 100%;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }
  .carousel-card-img{
    width: 100%;
    height:170px;
    object-fit: cover;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }
  .custom-card-body{
    padding: 30px 20px 20px 20px;
    background-color: #fff;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
  }
  .carousel-right-arrow{
    width: 15px;
    height: 15px;
    transform: rotate(180deg);
  }
  .carousel-left-arrow{
    width: 15px;
    height: 15px;
  }
  .card-heading-ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 245px;
  }
  .card-para-ellipsis{
    display: -webkit-box;  
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;   
    overflow: hidden;   
    text-overflow: ellipsis;
  }
  .carousel-caption.carousel-text-container{
    position: absolute;
    left: 0;
    top: 6%;
    padding: 20px 60px;
    color: #fff;
    text-align: left;
    width: 630px;
  }
  .carousel-control-next, .carousel-control-prev{
    display: none;
  }
  .carousel-indicators.custom-carousel-indicators{
    left:58px;
    bottom: 32px;
    margin: 0;
    justify-content: start;
    align-items: center;
  }
  .carousel-indicators.custom-carousel-indicators button{
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #C3C3C3;
  }
  .carousel-indicators.custom-carousel-indicators button.active{
    width: 7px;
    height: 7px;
    background-color: #535353;
    border: 6px solid #DFDFDF;
  }
  @media(min-width:767px) and (max-width:1023px){
  .carousel-text-container{
    width: 300px !important;  
  }
}
@media(min-width:300px) and (max-width:767px){
.carousel-caption.carousel-text-container{
  padding:0px 20px !important;
  width: 333px !important;
}
.carousel-item.custom-carousel-item{
  border-radius: 20px !important;
  border: 1px solid #EDEDED;
}
.carousel-item.custom-carousel-item img{
  border-radius: 20px !important;
  border: 1px solid #EDEDED;
}
.banner-heading{
  font-size: 20px !important;
}
.carousel-inner.custom-carousel-section{
  height: 600px;
}

}