.main-container {
  position: relative;
  z-index: 2;
  background-color: $color-text-white;

  .banner-swiper {
    background-image: linear-gradient(90deg, #ffffff 43%, #fef8ec 0);
    padding: 32px 0 76px 0;
    overflow-x: hidden;

    @media screen and (max-width: 768px) {
      background-image: linear-gradient(180deg, #ffffff 81%, #fef8ec 0);
      padding: 56px 0 24px 0;
    }

    .banner-contents {
      .banner-title {
        width: 642px;

        @media screen and (max-width: 768px) {
          width: 100%;
        }

        h1 {
          font-weight: 700;
          font-family: $font-family-sora;
          line-height: 1.5;
          color: $secondary-color;
          z-index: 2;
          position: relative;
          background: $color-text-white;
          display: inline;
          padding: 10px 0 6px 0;
          top: 52px;
          transition: all 0.8s ease-out;

          @media screen and (max-width: 768px) {
            background: transparent;
            padding: 0;
            top: 0;
          }

          &.left {
            transition: all 0.8s;
          }

          span {
            padding-right: 12px;

            @media screen and (max-width:768px) {
              padding-right: 0;
            }
          }
        }
      }

      p {
        font-size: 18px;
        font-weight: 500;
        color: $secondary-color;
        margin: 74px 0 24px 0;

        @media screen and (max-width: 768px) {
          margin: 16px 0 24px 0;
          font-size: 16px;
        }
      }
    }

    .swiper {
      @media screen and (max-width: 768px) {
        margin-top: 40px;
      }

      .swiper-wrapper {
        .swiper-slide {
          img {
            width: 100%;
            height: 456px;
            border-radius: 8px;

            @media screen and (max-width: 768px) {
              height: 100%;
            }
          }
        }
      }

      .swiper-control {
        width: 16%;
        position: relative;
        bottom: 36px;
        right: -792px;

        @media screen and (max-width:1366px) {
          width: 20%;
          right: -634px;
        }

        @media screen and (max-width:1024px) {
          right: -520px;
          width: 24%;
        }

        @media screen and (max-width: 768px) {
          right: 0;
          left: 0;
          margin: 0 auto;
          bottom: 16px;
        }

        .swiper-button-next,
        .swiper-button-prev {
          width: 32px;
          height: 32px;

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

          &:after {
            content: "";
            background-image: url(../../../assets/img/icons/arrow-swiper-right.svg);
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-position: center;
          }
        }

        .swiper-button-prev {
          left: 72px;

          &::after {
            transform: rotate(180deg);
          }
        }
      }

      .swiper-pagination-progressbar {
        background: rgba(255, 255, 255, 0.4);

        &.swiper-pagination-horizontal {
          width: 50px;
          top: -6px;

          @media screen and (max-width:1023px) {
            right: 0;
            margin: 0 auto;
          }
        }

        .swiper-pagination-progressbar-fill {
          background: $color-text-white;
        }
      }
    }
  }

  .workplace-section {
    padding: 46px 0 80px 0;

    @media screen and (max-width: 768px) {
      padding: 56px 0;
    }

    h2 {
      font-size: 32px;
      color: $secondary-color;
      font-weight: 700;
      line-height: 1.5;
      font-family: $font-family-sora;
      margin-bottom: 16px;

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

    p {
      font-size: 18px;
      font-weight: 500;
      line-height: 1.5;
      color: $secondary-color;
      margin-bottom: 24px;
      text-align: center;

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

    .workplace-card {
      display: block;

      @media screen and (max-width:768px) {
        text-align: center;
      }

      img {
        width: 100%;
        height: 100%;

        @media screen and (max-width:768px) {
          width: 212px;
          height: 212px;
        }
      }

      p {
        font-size: 16px;
        font-weight: 500;
        color: $color-dark;
        line-height: 1.5;
        margin-bottom: 0;
        text-align: center;
      }

      .btn-circle {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        justify-content: center;

        @media screen and (max-width: 768px) {
          margin-bottom: 16px;
        }

        .btn-title {
          font-size: 24px;
          font-weight: 700;
          color: $color-primary;
          margin-right: 8px;
          line-height: 1.5;
          font-family: $font-family-sora;
        }

        .arrow-circle {
          background-color: $color-text-white;
          border: solid 1px $color-primary;
          border-radius: 50%;
          display: inline-block;
          height: 32px;
          width: 32px;
          overflow: hidden;
          position: relative;
          right: 0;
          top: 0;
          transition: all 0.6s cubic-bezier(0.86, 0, 0.07, 1);

          &::after {
            content: "";
            left: -100%;
            background-image: url(../../../assets/img/icons/arrow-blue.svg);
            width: 24px;
            height: 25px;
            position: absolute;
            transform: translate(-50%, -50%);
            transition: all 0.6s cubic-bezier(0.86, 0, 0.07, 1);
            background-repeat: no-repeat;
            top: 50%;
          }

          &::before {
            content: "";
            background-image: url(../../../assets/img/icons/arrow-blue.svg);
            width: 24px;
            height: 25px;
            top: 50%;
            left: 50%;
            position: absolute;
            transform: translate(-50%, -50%);
            transition: all 0.6s cubic-bezier(0.86, 0, 0.07, 1);
            background-repeat: no-repeat;
          }
        }
      }

      &:hover {
        .arrow-circle {
          &::before {
            left: 50px;
          }

          &::after {
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
  }

  .aurbis-value {
    padding: 80px 0;
    background-color: $secondary-color;

    @media screen and (max-width: 768px) {
      padding: 56px 0;
    }

    h2 {
      font-weight: 700;
      color: $color-text-white;
      line-height: 1.5;
      font-family: $font-family-sora;
      margin-bottom: 16px;
      text-align: center;

      @media screen and (max-width: 767px) {
        text-align: left;
      }
    }

    p {
      font-size: 18px;
      font-weight: 500;
      line-height: 1.5;
      color: $color-text-white;
      margin-bottom: 56px;
      text-align: center;

      @media screen and (max-width: 767px) {
        text-align: left;
        font-size: 16px;
        margin-bottom: 32px;
      }
    }

    .row {
      justify-content: center;

      .value-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 56px;
        padding: 0 16px;

        @media screen and (max-width: 767px) {
          flex-direction: row;
          align-items: flex-start;
          margin-bottom: 32px;
          padding: 0;
        }

        .value-item {
          text-align: center;

          @media screen and (max-width: 767px) {
            text-align: left;
          }

          img {
            @media screen and (max-width: 768px) {
              margin-right: 16px;
            }
          }

          h6 {
            font-size: 16px;
            font-weight: 600;
            color: $light-blue;
            line-height: 1.5;
            font-family: $font-family-sora;
            margin: 16px 0 8px 0;

            @media screen and (max-width: 768px) {
              margin: 0 0 8px 0;
            }
          }

          p {
            font-size: 16px;
            font-weight: 500;
            line-height: 1.5;
            color: $color-text-white;
            margin-bottom: 0;
          }
        }
      }
    }
  }

  .aurbis-features {
    padding: 80px 0;

    @media screen and (max-width: 768px) {
      padding: 56px 0;
    }

    h2 {
      font-weight: 700;
      color: $color-secondary;
      line-height: 1.5;
      font-family: $font-family-sora;
      margin-bottom: 0;

      @media screen and (max-width: 768px) {
        margin-bottom: 16px;
      }
    }

    p {
      font-size: 18px;
      font-weight: 500;
      line-height: 1.5;
      color: $secondary-color;
      margin-bottom: 0;

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

    .mobile-list {
      padding: 0 0 0 18px;
      margin: 0;

      li {
        font-size: 16px;
        font-weight: 600;
        color: $color-dark;
        line-height: 1.5;
        margin-bottom: 24px;
        list-style-type: disc;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .btn-feature {
      text-align: right;

      @media screen and (max-width: 768px) {
        text-align: left;
        margin-top: 32px;
      }
    }

    .feature-img-box {
      position: relative;
      margin-top: 56px;

      @media screen and (max-width: 768px) {
        margin-top: 24px;
      }

      img {
        width: 100%;
        height: 100%;
      }

      .tooltip-box {
        position: relative;
        display: block;

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

        .tooltip-btn {
          background-color: $color-primary;
          width: 44px;
          height: 44px;
          overflow: hidden;
          border-radius: 50%;
          border: none;
          outline: none;
          cursor: pointer;
          position: relative;

          &::before {
            content: "";
            background-image: url(../../../assets/img/icons/plus.svg);
            width: 32px;
            height: 32px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            transition: all 0.2s ease-out;
          }

          &:hover {
            &::before {
              background-image: url(../../../assets/img/icons/minus.svg);
              transform: rotate(180deg);
            }

            +.tooltip-contents {
              display: block;
            }
          }
        }

        .tooltip-contents {
          display: none;
          position: absolute;
          background-color: $color-text-white;
          width: 154px;
          left: -52px;
          top: 56px;
          padding: 10px;
          border-radius: 4px;

          p {
            font-size: 14px;
            font-weight: 600;
            color: $color-primary;
          }

          &::before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border: 10px solid transparent;
          }

          &.top-border {
            &::before {
              border-bottom-color: $color-text-white;
              top: -20px;
              left: 64px;
            }
          }
        }

        &.top {
          position: absolute;
          top: 170px;
          right: 288px;

          @media screen and (max-width:1366px) {
            top: 150px;
            right: 232px;
          }

          @media screen and (max-width:1024px) {
            top: 122px;
            right: 200px;
          }
        }

        &.right {
          position: absolute;
          top: 323px;
          right: 100px;

          @media screen and (max-width:1366px) {
            top: 268px;
            right: 80px;
          }

          @media screen and (max-width:1024px) {
            top: 212px;
            right: 58px;
          }
        }

        &.center {
          position: absolute;
          top: 368px;
          right: 565px;

          @media screen and (max-width:1366px) {
            top: 316px;
            right: 488px;
          }

          @media screen and (max-width:1024px) {
            top: 260px;
            right: 396px;
          }
        }

        &.left {
          position: absolute;
          top: 402px;
          left: 146px;

          @media screen and (max-width:1366px) {
            top: 340px;
            left: 128px;
          }

          @media screen and (max-width:1024px) {
            top: 282px;
            left: 106px;
          }
        }
      }
    }
  }

  .aurbis-global {
    padding: 80px 0;

    @media screen and (max-width: 768px) {
      padding: 0 0 56px 0;
    }

    h2 {
      font-weight: 700;
      color: $color-secondary;
      line-height: 1.5;
      font-family: $font-family-sora;
      margin-bottom: 0;

      @media screen and (max-width: 768px) {
        margin-bottom: 16px;
      }
    }

    p {
      font-size: 18px;
      font-weight: 500;
      line-height: 1.5;
      color: $secondary-color;
      margin-bottom: 0;

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

    .btn-border-blue {
      float: right;

      @media screen and (max-width: 768px) {
        margin-top: 32px;
        float: left;
      }
    }

    .global-card {
      position: relative;
      margin-top: 56px;

      @media screen and (max-width: 768px) {
        margin-top: 16px;
      }

      img {
        width: 100%;
        height: 100%;
        border-radius: 4px;

        @media screen and (max-width:768px) {
          height: 170px;
          object-fit: cover;
        }
      }

      p {
        position: absolute;
        bottom: 12px;
        left: 16px;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.5;
        color: $color-background-light;
        margin-bottom: 0;
      }

      &::before {
        content: "";
        background-image: linear-gradient(14deg,
            #000000 17%,
            rgba(0, 0, 0, 0) 59%);
        width: 100%;
        height: 100%;
        position: absolute;
        border-radius: 8px;
        opacity: 0.7;
      }
    }
  }

  .aurbis-tech {
    background-color: rgba(254, 242, 230, 0.4);
    padding: 80px 0 80px 0;

    @media screen and (max-width: 768px) {
      padding: 56px 0;
    }

    .lottieTech {
      width: 585px;
      height: 492px;
      position: relative;

      @media screen and (max-width:1024px) {
        width: 414px;
      }

      @media screen and (max-width:1023px) {
        width: 300px;
      }

      @media screen and (max-width: 767px) {
        width: 100%;
        height: 100%;
        left: -32px;
      }

      .floating-icons {
        .tech-people {
          width: 63px;
          height: 63px;
          position: absolute;
          top: 0;
          right: 154px;

          @media screen and (max-width:1024px) {
            top: 56px;
            right: 90px;
          }

          @media screen and (max-width:1023px) {
            top: 100px;
            right: 40px;
            width: 46px;
            height: 46px;
          }

          @media screen and (max-width: 767px) {
            width: 30px;
            height: 30px;
            top: 18px;
            right: 90px;
          }
        }

        .tech-medical {
          width: 85px;
          height: 85px;
          position: absolute;
          top: 98px;
          right: -48px;

          @media screen and (max-width:1024px) {
            top: 126px;
            right: -60px;
          }

          @media screen and (max-width:1023px) {
            width: 54px;
            height: 54px;
            top: 160px;
            right: -38px;
          }

          @media screen and (max-width: 767px) {
            width: 42px;
            height: 42px;
            top: 72px;
            right: -16px;
          }
        }

        .tech-cup {
          width: 69px;
          height: 69px;
          position: absolute;
          top: 226px;
          right: 24px;

          @media screen and (max-width:1024px) {
            right: -16px;
          }

          @media screen and (max-width:1023px) {
            width: 40px;
            height: 40px;
            right: 0;
          }

          @media screen and (max-width: 767px) {
            width: 34px;
            height: 34px;
            top: 142px;
            right: 24px;
          }
        }

        .tech-calender {
          width: 85px;
          height: 85px;
          position: absolute;
          top: 318px;
          right: -160px;

          @media screen and (max-width:1366px) {
            right: -60px;
          }

          @media screen and (max-width:1024px) {
            right: -118px;
          }

          @media screen and (max-width:1023px) {
            width: 54px;
            height: 54px;
            top: 268px;
            right: -80px;
          }

          @media screen and (max-width: 767px) {
            width: 42px;
            height: 42px;
            top: 180px;
            right: -40px;
          }
        }

        img {
          width: 100%;
          height: 100%;
        }

        .float-anim {
          display: none;
          overflow: hidden;
          border-radius: 50%;
          transform: translatey(0px);
          animation: float 9s ease-in-out infinite;
          box-shadow: 0 4.5px 4px 0 rgba(0, 48, 212, 0.02),
            0 12.5px 11.1px 0 rgba(0, 48, 212, 0.04),
            0 30.1px 26.8px 0 rgba(0, 48, 212, 0.05),
            0 100px 89px 0 rgba(0, 48, 212, 0.07);
        }

        @keyframes float {
          0% {
            transform: translatex(0px);
          }

          50% {
            transform: translatex(-14px);
          }

          100% {
            transform: translatex(0px);
          }
        }
      }

      &.icons {
        .floating-icons {
          .float-anim {
            display: block;
          }
        }
      }
    }

    .tech-contents {
      h2 {
        font-size: 36px;
        font-weight: 700;
        font-family: $font-family-sora;
        line-height: 1.5;
        margin-bottom: 16px;
        color: $secondary-color;

        @media screen and (max-width: 768px) {
          font-size: 24px;
        }
      }

      p {
        margin-bottom: 24px;
        color: $secondary-color;
        font-size: 18px;
        font-weight: 500;
        line-height: 1.5;

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

  .aurbis-clients {
    padding: 80px 0;
    background-color: rgba(254, 242, 230, 0.4);

    @media screen and (max-width: 768px) {
      padding: 60px 0 56px 0;
    }

    h2 {
      font-size: 36px;
      font-weight: 700;
      font-family: $font-family-sora;
      line-height: 1.5;
      margin-bottom: 16px;
      color: $secondary-color;
      text-align: center;

      @media screen and (max-width: 768px) {
        font-size: 24px;
      }
    }

    p {
      margin-bottom: 0;
      color: $secondary-color;
      font-size: 18px;
      font-weight: 500;
      line-height: 1.5;
      text-align: center;

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

    .clients-flex {
      display: flex;
      flex-direction: row;
      justify-content: center;
      margin-top: 68px;
      flex-wrap: wrap;

      .flex-item {
        width: 200px;
        height: 100%;
        margin: 0 32px 0 0;

        @media screen and (max-width: 768px) {
          width: 156px;
          height: 62px;
          margin: 0 16px 16px 0;
        }

        img {
          width: 100%;
          height: 100%;
        }

        &:nth-child(2) {
          @media screen and (max-width: 768px) {
            margin: 0;
          }
        }

        &:nth-child(4) {
          @media screen and (max-width: 768px) {
            margin: 0;
          }
        }

        &:last-child {
          margin: 0;
        }
      }
    }
  }

  .aurbis-contact {
    padding: 80px 0 120px 0;
    background-color: rgba(254, 242, 230, 0.4);

    @media screen and (max-width: 768px) {
      padding: 0;
      background-color: #10284b;
    }

    .container {
      @media screen and (max-width:768px) {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
      }
    }

    .contents {
      background-color: #10284b;
      padding: 43px 0 36px 160px;
      position: relative;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;

      @media screen and (max-width:1024px) {
        padding: 43px 0 42px 220px;
      }

      @media screen and (max-width:1023px) {
        padding: 56px 12px 476px 12px;
        border-radius: 0;
        text-align: center;
      }

      @media screen and (max-width: 767px) {
        padding: 56px 12px 280px 12px;
      }

      &::before {
        content: "";
        background-image: url(../../../assets/img/building.png);
        width: 524px;
        height: 372px;
        position: absolute;
        left: -52%;
        background-position: center center;
        background-size: cover;
        top: -101px;

        @media screen and (max-width:1023px) {
          height: 480px;
          width: 100%;
          top: 238px;
          left: 0;
        }

        @media screen and (max-width: 767px) {
          width: 100%;
          height: 262px;
          top: 238px;
          left: 0;
        }
      }

      h2 {
        font-weight: 700;
        color: $color-text-white;
        line-height: 1.5;
        font-family: $font-family-sora;
        margin-bottom: 10px;

        @media screen and (max-width:1024px) {
          font-size: 32px;
        }

        @media screen and (max-width: 767px) {
          font-size: 24px;
          margin-bottom: 16px;
        }
      }

      p {
        font-size: 18px;
        font-weight: 500;
        line-height: 1.5;
        color: $color-text-white;
        margin-bottom: 44px;

        @media screen and (max-width: 767px) {
          font-size: 16px;
          margin-bottom: 32px;
        }
      }
    }
  }
}

.hero {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100vh;
  width: 100vw;
  z-index: 99999999999;

  .pre-preloader {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: $color-secondary;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99999999999;
    // background: white;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      background: $color-secondary;
      z-index: 3;
      transform: scaleY(0);
      transform-origin: 100% 0%;
      animation: anim 2s forwards;
    }
  }
}

@keyframes anim {
  0% {
    transform: scaleY(1);
    transform-origin: 100% 0%;
  }

  50% {
    transform: scaleY(1);
    transform-origin: 100% 0%;
  }

  51% {
    transform: scaleY(1);
    transform-origin: 0% 100%;
  }

  100% {
    transform: scaleY(0);
    transform-origin: 0% 100%;
  }
}