.mining-carousel {
  position: relative;
  width: 100%;
  height: 170vh;
  overflow: hidden;

  @media screen and (min-width: 1400px) and (max-width: 1700px) {
    .info-box {
      // border: 2px solid #45596D !important;
      height: 160% !important;

      p {
        font-size: var(--text-medium);
      }
    }

    .prev {
      left: -23% !important;
    }

    height: 200vh;

    .free-form-text {
      bottom: 0% !important;
      left: 0% !important;
    }

    .cta-button {
      top: 0px;
      right: 0% !important;
    }
  }

  .free-form-text {
    width: 100%;
    position: relative;
    bottom: 0%;
    left: 0%;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;

    h1 {
      font-size: var(--text-xxlarge);
      text-shadow: 5px 2px 10px rgba(0, 0, 0, 0.9);
      text-transform: uppercase;
      letter-spacing: 8px;
      color: white;
      width: 100%;
      text-align: center;
    }
  }

  .carousel-background {
    // position: absolute;
    background-position: center !important;
    background-repeat: no-repeat;
    background-size: cover !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 0.5s ease-in-out;
  }

  .carousel-content {
    position: absolute;
    top: 0px; /* Moves the info-box up to appear as if it's coming out */
    left: 50%;
    transform: translate(-50%, 0);
    width: 35%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    height: 80%;
  }

  .info-box {
    background: rgba(255, 255, 255, 0.5);
    width: 100%;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 0px 0px 30px 30px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    height: 100%;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 1) 100%
    );

    h2 {
      padding-top: 90% !important;
    }
  }

  .info-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 90%;
    background: rgba(255, 255, 255, 0.1); /* Adjust opacity */
    // backdrop-filter: blur(10px);
    z-index: -1; /* Places it behind the content */
    border-radius: 0px 0px 30px 30px; /* Optional: matches info-box shape */
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0.5) 60%
    );
  }

  h2 {
    color: #45596d;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .content-image {
    width: 80%;
    max-width: 250px;
    margin-bottom: 20px;
  }

  p {
    color: #333;
    font-size: var(--text-large);
    margin-bottom: 20px;
  }

  .cta-button {
    position: relative;
    bottom: 0%;
    right: 0%;
    display: inline-block;
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    // background: var(--primary-color);
    color: #fff;
    font-weight: bold;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s;
    // width: 400px;
    z-index: 999 !important;
    border: none;
    font-weight: lighter;
  }

  @media screen and (min-width: 1400px) and (max-width: 1700px) {
    .cta-button {
      bottom: -10% !important;
    }
  }

  .cta-button:hover {
    color: var(--text-color);
  }

  .prev,
  .next {
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    background: none;
    border: 2px solid #45596d;
    color: #45596d;
    font-size: var(--text-xxlarge);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 99;
    border: none;
  }

  .prev {
    left: -20%;
  }

  .next {
    right: -20%;
  }

  /* Responsive */
  @media screen and (max-width: 768px) {
    .carousel-content {
      width: 90%;
      top: 0; /* Prevents overflow on mobile */
    }

    .info-box {
      padding: 2rem;
    }

    .content-image {
      width: 60%;
    }

    .prev,
    .next {
      display: none;
    }
  }
}