@use '../utils' as *;

/*----------------------------------------*/
/*  banner css
/*----------------------------------------*/
.banner-style-four {
  padding-top: 210px;
  padding-bottom: 300px;
  @media #{$xl} {
    padding-top: 220px;
    padding-bottom: 150px;
  }
  @media #{$lg} {
    padding-top: 200px;
    padding-bottom: 140px;
  }
  @media #{$md} {
    padding-top: 180px;
    padding-bottom: 120px;
  }
  @media #{$sm} {
    padding-top: 150px;
    padding-bottom: 150px;
  }
  @media #{$xs} {
    padding-top: 150px;
    padding-bottom: 100px;
  }
  @media #{$xxs} {
    padding-top: 130px;
    padding-bottom: 110px;
  }
  .banner-content {
    .banner-title {
      color: var(--td-white);
      margin-bottom: 30px;
      line-height: 1.3;
      letter-spacing: -6px;

      @media #{$x3l} {
        font-size: 60px;
      }

      @media #{$xxl} {
        font-size: 50px;
      }

      @media #{$xl} {
        font-size: 48px;
      }

      @media #{$lg} {
        font-size: 40px;
      }

      @media #{$md} {
        font-size: 36px;
        letter-spacing: -4px;
      }

      @media #{$sm} {
        font-size: 34px;
      }

      @media #{$sm} {
        font-size: 32px;
        letter-spacing: -3px;
      }

      @media #{$xs} {
        font-size: 26px;
        letter-spacing: -3px;
      }

      @media #{$xxs} {
        font-size: 24px;
        letter-spacing: -3px;
      }
    }

    .description {
      color: rgba($color: $white, $alpha: .7);
      max-width: 659px;
      margin-bottom: 45px;
      font-size: 18px;
      line-height: 1.5;
      letter-spacing: -2px;

      @media #{$xs,$sm,$md} {
        font-size: 16px;
        letter-spacing: -1px;
      }
    }
  }
  .banner-thumb {
    img {
      width: 100%;
    }
  }
  .banner-thumb-wrapper {
    position: relative;
    z-index: 5;
    .banner-cercle {
      position: absolute;
      top: -15px;
      left: 0;
      z-index: -1;
    }
  }
  .banner-dot {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: -1;
  }
  .banner-four-shapes {
    .shape-one {
      position: absolute;
      top: 20%;
      left: 5%;
      z-index: -1;
      filter: blur(4px);
      @media #{$xs,$sm,$md} {
        max-width: 50px;
      }
    }
    .shape-two {
      position: absolute;
      bottom: 33%;
      left: 39%;
      z-index: -1;
      filter: blur(4px);
    }
    .round-one {
      position: absolute;
      top: -100%;
      right: -50%;
      z-index: -1;
      @media #{$xs,$sm} {
        top: 0;
      }
    }
  }
}