    .heroSwiper {
        width: 100%;
        height: 100%;
		border: 2px solid red;
    }
    swiper-container {
      width: 100%;
      height: 100%;
    }

    swiper-slide {
      position: relative;
      text-align: center;
      font-size: 18px;
      background: #45474B;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      mix-blend-mode: overlay;
      background-position: center center;
      opacity: 0.75;
    }

    /* Custom text overlay - once */
    .overlay-text {
    width: 80%;
      position: absolute;
      top: 30px;
      left: 50%;
      transform: translateX(-50%);
      color: #F5F7F8;
      font-size: 2.4rem;
      text-align: center;
      font-weight: 600;
      line-height: 40px;
      padding: 10px;
      border-radius: 8px;
      z-index: 10;
    }

    /* Custom Styles for Swiper Pagination & Navigation */
    swiper-container {
      --swiper-pagination-bullet-inactive-color: #F5F7F8; /* Inactive dot color */
      --swiper-pagination-bullet-inactive-opacity: 0.6; /* Inactive dot opacity */
      --swiper-pagination-color: #BF122E; /* Active dot color */
      --swiper-navigation-color: #F5F7F8; /* Arrow color */
    }

    swiper-container:hover {
      --swiper-navigation-color: #F5F7F8; /* Change arrows color on hover */
    }