/* Carousel slides */
    .carousel-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: scale(0.97);
      transition: opacity 0.65s ease, transform 0.65s ease;
      pointer-events: none;
      z-index: 0;
    }
    .carousel-slide.active {
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
      z-index: 1;
    }
    .carousel-slide img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: grayscale(30%) brightness(0.88) opacity(0.6);
      transition: filter 0.65s ease;
    }
    .carousel-slide.active img {
      filter: grayscale(0%) brightness(1) opacity(1);
    }

    /* Cards */
    .carousel-card {
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: border-color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;
    }
    .carousel-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 5px;
      background: #003461;
      transform: scaleY(0);
      transform-origin: bottom;
      transition: transform 0.4s ease;
      border-radius: 0 2px 2px 0;
    }
    .carousel-card.active::before {
      transform: scaleY(1);
    }
    .carousel-card.active {
      border-color: rgba(0, 52, 97, 0.5) !important;
      background-color: rgba(122, 122, 122, 0.091);
      box-shadow: 0 4px 20px rgba(0, 52, 97, 0.1);
    }
    .card-timer {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 4px;
      width: 0%;
      background: linear-gradient(90deg, #006d3d, #003461);
      border-radius: 0 1px 1px 0;
    }

    /* Dots */
    .carousel-dot {
      height: 3px;
      border-radius: 9999px;
      transition: all 0.4s ease;
      flex: 1;
      background: #ffffff;
    }
    .carousel-dot.active {
      background: #30347D;
      flex: 2.5;
    }