/* Make carousel full screen */
      .carousel-item {
        height: 100vh;
      }
      .carousel-item img {
        height: 100vh;
        width: 100%;
        object-fit: contain;
      }
      /* Red arrows */
      .carousel-control-prev-icon,
      .carousel-control-next-icon {
        background-image: none !important;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: red;
        position: relative;
      }
      .carousel-control-prev-icon::after,
      .carousel-control-next-icon::after {
        font-size: 36px;
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -60%);
        display: block;
        text-align: center;
      }
      .carousel-control-prev-icon::after {
        content: "\2039";
      }
      .carousel-control-next-icon::after {
        content: "\203A";
      }

      /* Clickable area bigger */
      .carousel-control-prev,
      .carousel-control-next {
        width: 70px;
      }

      /* Indicators (dots) styling */
      /* Indicators (dots) styling */
      .carousel-indicators {
        bottom: 20px !important; /* move dots a bit up from bottom */
      }

      .carousel-indicators [data-bs-target] {
        background-color: rgba(
          255,
          0,
          0,
          0.6
        ); /* semi-transparent red for inactive dots */
      }

      .carousel-indicators .active {
        background-color: red; /* solid red for the active dot */
      }