/* In section 2 animation for the first 2 text with 4 hexagon*/
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Initially hidden */
.hidden-slide {
  opacity: 0;
  transform: translateX(100%);
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.visible-slide {
  opacity: 1;
  transform: translateX(0);
}

.parent-container {
  overflow: visible;
}

/* css for the 3rd text for 4 hexagon */
.hidden-focus {
  opacity: 0;
  transform: scale(0.9);
  filter: blur(5px);
  transition: transform 0.8s ease-out, opacity 0.8s ease-out,
    filter 0.8s ease-out;
}

.visible-focus {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

@keyframes slideInFromBottomRight {
  0% {
    transform: translate(50%, 50%);
    opacity: 0;
  }

  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

/* New class names */
.scroll-hidden {
  opacity: 0;
  transform: translate(50%, 50%);
  transition: opacity 0.5s ease-in-out, transform 1s ease-in-out;
}

.scroll-visible {
  animation: slideInFromBottomRight 1s forwards;
}

/* Animation in section2 for line under the miner */
.shrink-expand {
  width: 80%;
  height: 5%;
  /* background-color: #6d6d65; */
  filter: blur(2.81393px);
  animation: shrinkExpand 4s ease-in-out infinite;
}

@keyframes shrinkExpand {
  0% {
    width: 65%;
  }

  50% {
    width: 20%;
  }

  100% {
    width: 65%;
  }
}

@keyframes slideUpDown {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-25%);
  }

  100% {
    transform: translateY(0);
  }
}

.slide-up-down {
  animation: slideUpDown 4s ease-in-out infinite;
}



/* Mobile View */

/* Animation for the 4 divs at the bottom of the section */
.animated-divMobile {
  display: flex;
  width: 47.5%;
  height: 10vw;
  gap: 4%;
  padding: 0.2% 1%;
  align-items: center;
  border: 0.740517px solid #f0b90b;
  border-radius: 1.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 */
#div5,
#div6,
#div7,
#div8 {
  height: 6vw;
}

/* Target expanded state */
.expandMobile {
  height: 9vw !important;
}


/* Animation For The Carousel With Images */

button {
  transition: opacity 2s ease-in-out;
  opacity: 0.7;
}

button.active-buttonMobile {
  opacity: 1;
}

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

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


/* Scale up center animation */
.scale-up-center {
  animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes scale-up-center {
  0% {
    transform: scale(0.5);
  }

  100% {
    transform: scale(1);
  }
}

/* Slide top right animation */
.slide-tr {
  animation: slide-tr 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-tr {
  0% {
    transform: translateY(0) translateX(0);
  }

  100% {
    transform: translateY(0px) translateX(0px);
  }
}