@import "../variables";
@import "../mixin";
@import "../buttons/buttons";

/*===== HEADER TWO =====*/

.header-two {
  position: relative;

  & .header-content-area {
    height: 700px;
    background: var(--primary);
    position: relative;
    z-index: 1;

    @media #{$desktop} {
      height: 950px;
    }

    @media #{$xs} {
      height: 550px;
    }

    &::before {
      position: absolute;
      z-index: -1;
      content: "";
      top: 0;
      left: 0;
      width: 100%;
      height: 80%;
      background-color: var(--white);
      border-bottom-left-radius: 25px;
      border-bottom-right-radius: 200px;
      box-shadow: var(--shadow-4);

      @media #{$lg} {
        height: 85%;
      }

      @media #{$md} {
        height: 90%;
      }

      @media #{$xs} {
        height: 90%;
        border-bottom-right-radius: 150px;
      }
    }
  }

  & .header-content {
    padding-top: 95px;
  }

  & .header-title {
    font-size: 42px;
    line-height: 55px;
    color: var(--black);

    @media #{$xs} {
      font-size: 30px;
      line-height: 35px;
    }

    @media #{$sm} {
      font-size: 36px;
      line-height: 45px;
    }
  }

  & .text {
    font-size: 18px;
    line-height: 25px;
    color: var(--dark-3);
    font-weight: 300;
    margin-top: 16px;

    @media #{$xs} {
      font-size: 16px;
    }
  }

  & .header-btn {
    margin-top: 40px;
  }

  .primary-btn {
    @extend %primary-btn;
  }

  & .header-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
  }

  & .image {
    max-width: 760px;
    margin-left: auto;
    padding-top: 130px;

    & img {
      width: 800px;
    }
  }
}