@use "../abstracts/"as *;

.banner {
  overflow: hidden;
  position: relative;
  z-index: 1;
  padding-block: 200px 120px;
  @include xxl {
   padding-block: 170px 90px;
  }

  @include xxl-down {
    padding-block: 160px 70px;
  }

  @include md-down {
    padding-block: 80px 60px;
  }

  .banner-wrapper {
    overflow: hidden;
    padding-inline: 60px;
    position: relative;
    @include xxl-down {
      padding-inline: 40px;
    }
    @include lg-down {
      padding-inline: 0;
    }

    @at-root {
      .banner-content {
        position: relative;
        .banner-title {
          font-size: 72px;
          font-style: italic;
          font-weight: 700;
          position: relative;
          @include xxl-down {
            font-size: 64px;
          }
          @include sm-down {
            font-size: 40px;
          }
        }
      }

      .banner-right {
        .banner-description {
          font-size: 16px;
          line-height: 28.8px;
          font-weight: 500;
          max-width: 90%;

          @include sm-down {
            font-size: 15px;
          }
        }

        @at-root {
          .overall-user {
            padding-top: 45px;
            @include flex($align: center, $gap: 20px, $wrap: wrap);
            .avatar-group {
              flex-shrink: 0;
            }

            .user-content {
              >h6 {
                color: $color-primary;
                font-weight: 700;
                font-size: 24px;
                font-family: $font-primary;
              }

              >p {
                color: $color-primary;
                font-weight: 500;
                font-size: 18px;
              }
            }
          }
        }
      }

      .providers {
        margin-top: 80px;
        @include lg-down {
          margin-top: 50px;
        }
        .providers-slider {
          position: relative;
          &::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 250px;
            height: 100%;
            background: $site-bg;
            background: linear-gradient(90deg, $site-bg 0%, rgba(255, 255, 255, 0) 100%);
            z-index: 1;
          }
          &::after{
            content: "";
            position: absolute;
            right: 0;
            top: 0;
            width: 250px;
            height: 100%;
            background: $site-bg;
            background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, $site-bg 100%);
            z-index: 1;
          }
          .provider-img {
            width: 100%;
            aspect-ratio: 16/6;
            @include flex($align: center, $justify: center);
            > img {
              max-width: 150px;
              width: 100%;
              @include xxl-down {
                max-width: 120px;
              }
              @include md-down {
                max-width: 100px;
              }
            }
          }
        }
      }
    }
  }
}