banner-carrousel {
  display: block;
  overflow: hidden;
  width: 100%;

  .blaze-slider {
    .blaze-container {
      .blaze-track-container {
        position: relative;
        overflow: visible;

        .blaze-prev, .blaze-next {
          background-color: transparent;
          width: 28px;
          height: 28px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: none;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          cursor: pointer;
          left: 1.3vw;
          z-index: 10;
          transition: 0.3s;

          @media screen and (max-width: 768px) {
            display: none;
          }
        }

        .blaze-next {
          right: 1.3vw;
          left: auto;

          :is(svg) {
            transform: rotate(180deg);
          }
        }
        
        .blaze-track {
          max-height: 700px;
          display: flex;

          .banner__slide {
            width: 100%;
            min-height: 100%;
            overflow: hidden;
            position: relative;
            flex-shrink: 0;

            &.banner__slide--link {
              display: block;
              text-decoration: none;
              color: inherit;
              cursor: pointer;
            }

            .banner__text-content {
              display: flex;
              flex-direction: column;
              width: 80%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              z-index: 1;

              .banner__text-content__title {
                :is(p) {
                  color: #ffffff;
                  text-align: center;
                  font-family: 'Poppins', sans-serif;
                  font-size: clamp(24px, 3.125vw, 60px);
                  font-style: normal;
                  font-weight: 800;
                  line-height: normal;
                }
              }

              .banner__text-content__subtitle {
                color: #ffffff;
                text-align: center;
                font-family: 'Poppins', sans-serif;
                font-size: clamp(14px, 1.041666vw, 20px);
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                margin-bottom: 30px;
              }

              .banner__text-content__button {
                color: #ffffff;
                text-decoration: none;
                font-size: 16px;
                font-family: 'Poppins', sans-serif;
                border: 2px solid #ffffff;

                display: flex;
                justify-content: center;
                align-items: center;
                align-self: stretch;
                height: 45px;
                width: clamp(260px, 33.33vw, 640px);
                padding: 12px 10px;
                margin: auto;
                border-radius: 999.9px;
                transition: all ease 0.3s;

                &:hover {
                  background: #ffffff;
                  color: #000000;
                }
              }
            }

            .banner__video, .banner__image {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .desktop {
              display: none;
            }

            @media screen and (min-width: 600px) {
              .mobile {
                display: none;
              }

              .desktop {
                display: block;
              }
            }
          }
        }

        .blaze-pagination-banner-carrousel {
          display: flex;
          justify-content: center;
          gap: 8px;
          position: absolute;
          bottom: 20px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 10;
          width: auto;
          max-width: 90%;
          padding: 0 20px;
          align-items: flex-end;
          overflow: visible;

          @media screen and (min-width: 600px) {
            bottom: 32px;
            gap: 10px;
          }

          @media screen and (max-width: 768px) {
            gap: 6px;
            bottom: 20px;
            padding: 0 20px;
            width: calc(100% - 40px);
            max-width: 100%;
            left: 50%;
            transform: translateX(-50%);
          }

          .progress-bar-item {
            flex: 1;
            height: 4px;
            background: rgb(193,122,192);
            border-radius: 2px;
            overflow: visible;
            position: relative;
            cursor: pointer;
            transition: background 0.3s ease;
            max-width: 180px;
            min-width: 150px;
            display: flex;
            flex-direction: column;
            align-items: center;

            @media screen and (max-width: 768px) {
              height: 3px;
              max-width: none;
              min-width: 0;
              flex: 1;
              width: 100%;
            }

            &:hover {
              background: rgba(255, 255, 255, 0.5);
            }

            .progress-bar-text {
              position: absolute;
              bottom: 100%;
              margin-bottom: 8px;
              color: #ffffff;
              font-family: 'Poppins', sans-serif;
              font-size: 12px;
              font-weight: 500;
              text-align: center;
              white-space: nowrap;
              opacity: 0.5;
              transition: opacity 0.3s ease;
              pointer-events: none;
              text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
              left: 50%;
              transform: translateX(-50%);

              @media screen and (max-width: 768px) {
                font-size: 10px;
                margin-bottom: 6px;
              }
            }

            &.active .progress-bar-text {
              opacity: 1;
            }

            &:hover .progress-bar-text {
              opacity: 1;
            }

            .progress-bar-fill {
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              width: 0%;
              background: rgba(255, 255, 255, 0.9);
              border-radius: 2px;
              transition: width linear;
              will-change: width;
            }

            &.active .progress-bar-fill {
              width: 100%;
            }

            &.completed .progress-bar-fill {
              width: 100%;
              background: rgba(255, 255, 255, 0.6);
            }
          }
          :is(button) {
            font-size: 0;
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
          }
        }
      }
    }
  }
}