/* For the minign EDS package*/


/* Firefox */
.scroll {
  scrollbar-color: transparent transparent;
  /* Thumb | Track */
}

/*  For the Carousel with images  */
/* Smooth Button Transition */
button {
  transition: opacity 2s ease-in-out;
  opacity: 0.7;
}

button.active-button {
  opacity: 1;
}

/* Smooth Image Transition */
.hidden-image {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  width: 80%;
  /* Set width to 100% to match the container's size */
  height: 80%;
  transition: opacity 1.1s ease-in-out, visibility 1s ease-in-out;
}

.active-image {
  opacity: 1;
  visibility: visible;
  position: absolute;
  width: 80%;
  /* Set width to 100% to match the container's size */
  height: 80%;
  transition: opacity 1s ease-in-out;
}

/* Animation for the 4 divs at the bottom of the section */
.animated-div {
  display: flex;
  width: 16.5vw;
  height: 2vw;
  gap: 5%;
  padding: 0.2% 1%;
  align-items: center;
  border: 0.740517px solid #f0b90b;
  border-radius: 0.4vw;
  background: linear-gradient(85.32deg,
      rgba(240, 185, 11, 0.8) -10.68%,
      rgba(18, 18, 18, 0.5) 96.27%);
  transition: height 2s ease;
}

/* Initially set height to 2vw */
#div1,
#div2,
#div3,
#div4 {
  height: 2vw;
}

/* Target expanded state */
.expand {
  height: 3vw !important;
}


/* Css for Mobilel Swiper */

.highlighted {
  height: 9.5vw !important;
  opacity: 1 !important;
  transition: all 1.5s ease-in-out;
}

.highlighted-transition-out {
  transition: all 1.5s ease-in-out;
  animation: shrinkAndFadeOut 1.5s forwards;
}

.highlighted-transition-in {
  transition: all 1.5s ease-in-out;
  animation: growAndFadeIn 1.5s forwards;
}



@keyframes shrinkAndFadeOut {
  0% {
    height: 9.5vw;
    opacity: 1;
  }

  33% {
    height: 9.0vw;
    opacity: 0.8;
  }

  66% {
    height: 8.5vw;
    opacity: 0.5;
  }

  100% {
    height: 8vw;
    opacity: 0.3;
  }
}

@keyframes growAndFadeIn {
  0% {
    height: 8vw;
    opacity: 0.3;
  }

  33% {
    height: 8.6vw;
    opacity: 0.6;
  }

  66% {
    height: 9.0vw;
    opacity: 0.8;
  }

  100% {
    height: 9.5vw;
    opacity: 1;
  }
}