@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;

}
body {
  overflow-x: hidden;
}

.gray-background{
    background-color: rgb(251, 246, 251);
  
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.5); /* Background of the button */
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
}


/* life at kie first section start*/

  .swiper {
      width: 100%;
      height: 100%;
      overflow-x: hidden;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .mySwiper2 {
      height: 600px; /* or 60vh */
      width: 100% !important;
    }
.mySwiper2 .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mySwiper2 .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
    .mySwiper {
  width: 100%;
  height: 120px;
  box-sizing: border-box;
  padding: 10px 0;
}

.mySwiper .swiper-slide {
  width: 20% !important;
  height: 100%;
  opacity: 0.6;
  background-color: #000 !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}

.mySwiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
 .swiper-pagination-bullet {
  width: 18px;
  height: 18px;
  background: #000; /* Change color if needed */
  opacity: 0.6;
}

.swiper-pagination-bullet-active {
  background: #fff; /* Active bullet color */
  opacity: 1;
}

.swiper-slide-active {
  width: 60% !important; /* Width for the active (current) slide */
  opacity: 1; /* Make it fully visible */
  z-index: 2; /* Bring it to the front */
}

.swiper-slide-prev, .swiper-slide-next {
  width: 20% !important; /* Smaller width for the previous and next slides */
  opacity: 0.5; /* Slightly faded for non-active slides */
}
/* life at kie first section end*/
@media (max-width: 768px) {
  .mySwiper2 {
    height: 450px !important; /* Let it grow naturally */
    width: 100% !important;
  
  }

  .mySwiper2 .swiper-slide img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .mySwiper {
    height: 80px; /* Make thumbnails smaller */
    width: 100%;
  }

  .mySwiper .swiper-slide {
    width: 25% !important; /* More thumbnails visible */
  }

  .swiper-button-next,
  .swiper-button-prev {
    display: none; /* Hide nav buttons */
  }

  .swiper-slide-active {
    width: 98% !important;
    opacity: 1;
  }

  .swiper-slide-prev,
  .swiper-slide-next {
    width: 0% !important;
    opacity: 0;
  }
  .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: #000; /* Change color if needed */
  opacity: 0.6;
}

.swiper-pagination-bullet-active {
  background: #fff; /* Active bullet color */
  opacity: 1;
}

}

@media (max-width: 400px){
 .mySwiper2 {
    height: 300px !important; /* Let it grow naturally */
    width: 100% !important;
  
  }
  
  .mySwiper2 .swiper-slide img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

 .swiper-slide-active {
    width: 94% !important;
    opacity: 1;
  }
}
  .kie-activity-container{
    position: relative;
    height: 380px;
    transition: box-shadow 0.3s ease;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgb(213, 208, 208);
  }
  .kie-activity-container img{
    border-radius: 20px;
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
  }

  .kie-activity-container:hover{
    box-shadow: 0 0 20px maroon, 0 0 10px white;
  }

  .kie-activity-content{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgb(127, 5, 5), #df7b7b);
    /* background: rgba(0, 0, 0, 0.8); */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    overflow-y: auto;
    z-index: 2; /* Ensure it's above the image */
  }

  .kie-activity-container:hover .kie-activity-content{
    opacity: 1;
  }
  .kie-activity-title{
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(255, 250, 245, 0.6);
    text-align: center;
    padding: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #c91000 !important;
    /* z-index: 3; */
  }
  @media(max-width: 576px){
    .kie-activity-container-second{
      margin-top: 50px;
    }
  }
  .overflow-hidden-class{
    width: 100%;
    overflow: hidden;

  }