@import 'mixins';
@import 'fonts';
@import 'variables';


*,
*::after,
*::before {
  box-sizing: border-box;
}

ul,
ol {
  padding: 0;
}

body,
h1,
h2,
h3,
p,
ul,
ol,
li {
  margin: 0;
}

ul {
  list-style: none;
}

img {
  width: 100%;
  display: block;
}

input,
button {
  font: inherit;
}

a {
  text-decoration: none;
}

body {
  background-color: #F2F1F1;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  @include fluid(font-size, 16px, 18px);
  @include fluid(line-height, 22px, 27px);
  color: #333333;
  overflow-x: hidden;
}

.container {
  @include container;
}

h1,
h2 {
  font-weight: 900;
  @include fluid(font-size, 28px, 56px);
  @include fluid(line-height, 36px, 68px);
  text-transform: uppercase;
}

h3 {
  font-weight: 700;
  @include fluid(font-size, 20px, 24px);
  @include fluid(line-height, 24px, 29px);
  text-transform: uppercase;
}

.link,
.btn {
  display: block;
  @include fluid(padding-top, 10px, 13px);
  @include fluid(padding-bottom, 10px, 13px);
  @include fluid(font-size, 14px, 16px);
  background-color: #2A7FE2;
  text-align: center;
  color: #F2F1F1;
  border: 2px solid #2A7FE2;
  transition: background-color .38s ease-in-out,
    color .38s ease-in-out;

  &:hover,
  &:active {
    background-color: #fff;
    color: #2A7FE2;
  }
}

.btn {
  width: 100%;
  @include fluid(margin-bottom, 10px, 15px);
}

.header {
  @include fluid(padding-bottom, 50px, 135px);

  &__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__linkLogo {
    @include fluid(margin-right, 10px, 90px);
  }

  &__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    @include fluid(padding-top, 15px, 25px);
    @include fluid(padding-bottom, 15px, 25px);
  }

  &__link {
    @include fluid(width, 155px, 220px);
  }

  &__burger {
    display: none;
  }
}

.logo {
  @include fluid(width, 300px, 414px);
  object-fit: cover;
}

.menu {
  display: flex;
  align-items: center;

  &__item {

    &--hidden {
      display: none;
    }

    &:not(:last-child) {
      @include fluid(margin-right, 10px, 30px);
    }

    &-link {
      color: #333333;
      @include fluid(font-size, 14px, 16px);
      @include fluid(line-height, 16px, 20px);
      transition: color .38s ease-in-out;

      &:hover {
        color: #2A7FE2;
      }
    }
  }
}

.multi {
  position: relative;
  @include fluid(margin-bottom, 35px, 170px);

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/multi/bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    z-index: -1;
  }

  &__swiper {
    @include fluid(height, 450px, 717px);
  }

  &__slide {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  &__item {
    &-title {
      @include fluid(margin-bottom, 15px, 30px);
    }

    &-subtitle {
      max-width: 660px;
      @include fluid(margin-bottom, 25px, 50px);
    }

    &-link {
      max-width: 380px;
      cursor: pointer;
    }

    &:first-child {
      @include fluid(padding-top, 20px, 37px);
    }

    &:last-child {
      @include fluid(padding-top, 0px, -60px);
    }
  }

  .swiper-pagination-bullet {
    @include fluid(width, 10px, 15px);
    @include fluid(height, 10px, 15px);
    background-color: #F2F1F1;
    opacity: 0.3;
    transition: background-color .38s ease-in-out,
      opacity .38s ease-in-out;

    &:hover {
      background-color: #D9D9D9;
      opacity: 1;
    }

    &.swiper-pagination-bullet-active {
      opacity: 1;
      background-color: #D9D9D9;
    }
  }

  .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 15px 0;
  }
}

.about {
  @include fluid(padding-top, 15px, 30px);
  @include fluid(margin-bottom, 120px, 200px);

  &__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    @include fluid(gap, 20px, 40px)
  }

  &__text {
    position: relative;

    p {
      @include fluid(margin-bottom, 15px, 30px);
    }
  }

  &__title {
    @include fluid(margin-bottom, 74px, 148px);
  }

  &__subtitle {
    position: absolute;
    @include fluid(top, 35px, 59px);
    width: max-content;
  }

  &__card {
    display: flex;
    flex-direction: column;

    &-text {
      color: #FFFFFF;
      background: #2C72C6;
      @include fluid(padding, 15px, 30px);
    }

    &-name {
      font-weight: 700;
      @include fluid(font-size, 20px, 24px);
      @include fluid(line-height, 24px, 29px);
      text-transform: uppercase;
      @include fluid(margin-bottom, 10px, 15px);
    }
  }

  &__box {
    position: relative;

    .about__card {
      position: absolute;
      left: 0;
      @include fluid(top, 98px, 177px);

      &-img {
        height: 333px;
        @include fluid(width, 310px, 660px);
        object-fit: cover;
        object-position: top center;
      }

      &-text {
        @include fluid(padding-right, 15px, 140px);
      }
    }
  }
}

.licenses {
  @include fluid(margin-bottom, 50px, 100px);

  &__prev,
  &__next {
    width: 40px;
    height: 40px;
    background-color: #2C72C6;
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;

    &::after {
      content: none;
    }
  }

  &__prev {
    background-image: url("../images/prev-arrow.svg");
  }

  &__next {
    background-image: url("../images/next-arrow.svg");
  }
}

.world {
  @include fluid(padding-top, 50px, 100px);
  @include fluid(margin-bottom, 50px, 100px);

  &__inner {
    display: grid;
    @include fluid(gap, 20px, 40px);
    grid-template-columns: 1.32fr 2fr;
  }

  &__logo {
    max-width: 413px;
    @include fluid(margin-bottom, 30px, 70px);
  }

  &__content {
    @include fluid(padding-left, 0, 20px);
    @include fluid(padding-right, 0, 20px);

    &-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      @include fluid(column-gap, 20px, 40px);
      @include fluid(row-gap, 20px, 70px);
    }

    &-item {
      display: grid;
      @include fluid(grid-gap, 18px, 24px);
      grid-template-columns: 70px auto;
      align-items: start;
      font-size: 14px;
      line-height: 150%;
    }

    &-title {
      @include fluid(font-size, 14px, 16px);
      line-height: 150%;
      @include fluid(margin-bottom, 8px, 10px);
    }
  }
}

.info {
  @include fluid(padding-top, 50px, 200px);
  @include fluid(margin-bottom, 50px, 100px);

  &__inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  &__item {
    &-title {
      @include fluid(margin-bottom, 20px, 40px);
    }

    &-link {
      display: block;
      width: fit-content;
      @include fluid(margin-bottom, 25px, 50px);
      font-weight: 500;
      @include fluid(font-size, 28px, 42px);
      @include fluid(line-height, 36px, 51px);
      text-transform: uppercase;
      color: #000000;
      transition: color .38s ease-in-out;

      &:hover {
        color: #2A7FE2;
      }
    }

    &-text {
      max-width: 350px;
      font-weight: 500;
      @include fluid(font-size, 20px, 24px);
      @include fluid(line-height, 24px, 26px);
      color: #000000;
    }
  }
}

.wrapper {
  @include fluid(padding-top, 50px, 100px);
  position: relative;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/wrapper-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    z-index: -1;
  }

  &__container {
    position: relative;
  }

  &__inner {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    @include fluid(gap, 20px, 40px);
    @include fluid(padding, 30px, 60px);
    background-color: #fff;
    @include fluid(margin-bottom, 35px, 170px);

    &--fork {
      opacity: 0;
      z-index: -1;
      visibility: hidden;
      transition: visibility .38s ease-in-out,
        opacity .38s ease-in-out,
        z-index .38s ease-in-out;

      &.active {
        visibility: visible;
        z-index: 1;
        opacity: 1;

        .calculator__item-elem--fork {
          background-color: #2C72C6;
          color: #fff;
        }
      }
    }

    &--scoop {
      opacity: 0;
      z-index: -1;
      visibility: hidden;
      transition: visibility .38s ease-in-out,
        opacity .38s ease-in-out,
        z-index .38s ease-in-out;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 50%;
      transform: translateX(-50%);

      &.active {
        visibility: visible;
        z-index: 1;
        opacity: 1;

        .calculator__item-elem--scoop {
          background-color: #2C72C6;
          color: #fff;
        }
      }
    }
  }
}

.calculator {
  &__title {
    max-width: 365px;
    @include fluid(margin-bottom, 25px, 50px);
  }

  &__item {
    @include fluid(margin-bottom, 25px, 50px);

    &-title {
      font-weight: 600;
      @include fluid(font-size, 16px, 18px);
      @include fluid(line-height, 18px, 22px);
      @include fluid(margin-bottom, 45px, 60px);

      &--mb {
        margin-bottom: 15px;
      }
    }

    &-block {
      display: flex;
      width: fit-content;
      @include fluid(margin-bottom, 15px, 30px);
    }

    &-elem {
      @include fluid(line-height, 16px, 20px);
      @include fluid(font-size, 14px, 16px);
      @include fluid(padding-top, 10px, 15px);
      @include fluid(padding-bottom, 10px, 15px);
      @include fluid(padding-left, 15px, 30px);
      @include fluid(padding-right, 15px, 30px);
      border-radius: 15px;
      border: 1px solid #2C72C6;
      background-color: #2C72C6;
      color: #fff;
      background-color: #fff;
      color: #2C72C6;
      cursor: pointer;
      transition: background-color .38s ease-in-out,
        color .38s ease-in-out;

      &:hover {
        background-color: #2C72C6;
        color: #fff;
      }

      &:not(:last-child) {
        margin-right: 10px;
      }
    }

    &-box {
      &--check {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }

      .noUi-target {
        border-radius: 7px;
        border: none;
        height: 4px;
        box-shadow: none;
        max-width: 640px;

        .noUi-connects {
          background-color: #C0D5EE;
          border-radius: 7px;
        }

        .noUi-tooltip {
          @include fluid(padding, 5px, 10px);
          border: none;
          border-radius: 25px;
          box-shadow: 0px 5px 10px rgba(51, 51, 51, 0.15);
          font-weight: 500;
          font-size: 13px;
          @include fluid(line-height, 13px, 16px);
          color: #222222;
        }

        .noUi-handle.noUi-handle-lower {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #2C72C6;
          top: -8px;
          box-shadow: none;

          &::before,
          &::after {
            content: none;
          }
        }

        .noUi-touch-area {
          cursor: pointer;
        }
      }
    }
  }
}

.label {
  position: relative;
  width: fit-content;
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 17px;
  color: #505050;

  &__input {
    &:checked+.label__inputCustom {
      background-color: #2C72C6;

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

  &__inputCustom {
    position: relative;
    width: 20px;
    height: 20px;
    @include fluid(margin-right, 5px, 10px);
    border: 1px solid #2C72C6;
    background: #fff;
    transition: background-color .38s ease-in-out;

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      width: 12px;
      height: 10px;
      background-image: url("../images/icons/check.svg");
      background-repeat: no-repeat;
      background-size: contain;
      transition: transform .38s ease-in-out;
    }
  }
}

.what {
  @include fluid(padding-top, 15px, 30px);
  @include fluid(padding-bottom, 50px, 200px);

  &__title {
    @include fluid(margin-bottom, 25px, 50px);
    color: #fff;
  }

  &__box {
    display: flex;
    width: fit-content;
    margin-left: auto;
    @include fluid(margin-bottom, 15px, 30px);

    &-btn {
      @include fluid(line-height, 16px, 20px);
      @include fluid(font-size, 14px, 16px);
      @include fluid(padding-top, 10px, 15px);
      @include fluid(padding-bottom, 10px, 15px);
      @include fluid(padding-left, 15px, 30px);
      @include fluid(padding-right, 15px, 30px);
      border-radius: 15px;
      background-color: #2C72C6;
      color: #fff;
      background-color: #fff;
      color: #2C72C6;
      cursor: pointer;
      transition: background-color .38s ease-in-out,
        color .38s ease-in-out;

      &:hover {
        background-color: #2C72C6;
        color: #fff;
      }

      &:not(:last-child) {
        margin-right: 10px;
      }

      &--active {
        background-color: #2C72C6;
        color: #fff;
      }
    }
  }

  &__item {
    display: none;
    opacity: 0;

    &--first {
      grid-template-columns: repeat(3, 1fr);
      @include fluid(gap, 20px, 40px);
    }

    &--active {
      display: grid;
    }

    &--opacity {
      opacity: 1;
      transition: opacity 0.38s;
    }
  }

  &__content {
    background-color: #fff;

    &-box {
      @include fluid(padding-top, 25px, 45px);
      @include fluid(padding-bottom, 25px, 50px);
      @include fluid(padding-left, 15px, 30px);
      @include fluid(padding-right, 15px, 30px);
    }

    &-title {
      @include fluid(margin-bottom, 10px, 20px);
    }
  }

  &__inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    @include fluid(gap, 20px, 40px);
    align-items: center;

    &-image {
      grid-column: 1/3;
    }

    &-box {
      grid-column: 3/5;
    }

    &-title {
      @include fluid(margin-bottom, 15px, 30px);
      color: #fff;
    }

    &-text {
      color: #fff;
      font-weight: 500;
    }
  }
}

.form {
  &__title {
    @include fluid(margin-bottom, 25px, 50px);
  }

  &__inner {
    &--border {
      border-top: 1px solid #000000;
      @include fluid(padding-top, 25px, 50px);
    }
  }

  &__box {
    @include fluid(margin-bottom, 15px, 30px);

    &-title {
      @include fluid(margin-bottom, 10px, 15px);
      font-weight: 600;
    }

    &-input {
      width: 100%;
      border: none;
      border-bottom: 1px solid #B8B8B8;
      background-color: transparent;
      outline: none;
      @include fluid(padding-top, 10px, 15px);
      @include fluid(padding-bottom, 5px, 10px);
      transition: border .38s ease-in-out;

      &:hover {
        border-bottom: 1px solid #2A7FE2;

        &::placeholder {
          color: #2A7FE2;
        }
      }

      &::placeholder {
        color: #B8B8B8;
        transition: color .38s ease-in-out;
      }

      &:focus {
        border-bottom: 1px solid #2A7FE2;

        &::placeholder {
          color: #2A7FE2;
        }
      }
    }
  }

  &__link {
    @include fluid(margin-bottom, 10px, 15px);
  }

  // &__label {
  //   position: relative;
  //   width: fit-content;
  //   display: flex;
  //   align-items: center;
  //   font-size: 14px;
  //   line-height: 17px;
  //   color: #505050;

  //   &-input {
  //     &:checked+.form__label-inputCustom {
  //       background-color: #2C72C6;

  //       &::after {
  //         transform: translate(-50%, -50%) scale(1);
  //       }
  //     }
  //   }

  //   &-inputCustom {
  //     position: relative;
  //     width: 20px;
  //     height: 20px;
  //     @include fluid(margin-right, 5px, 10px);
  //     border: 1px solid #2C72C6;
  //     background: #fff;
  //     transition: background-color .38s ease-in-out;

  //     &::after {
  //       content: "";
  //       position: absolute;
  //       top: 50%;
  //       left: 50%;
  //       transform: translate(-50%, -50%) scale(0);
  //       width: 12px;
  //       height: 10px;
  //       background-image: url("../images/icons/check.svg");
  //       background-repeat: no-repeat;
  //       background-size: contain;
  //       transition: transform .38s ease-in-out;
  //     }
  //   }
  // }
}

.check {
  width: 0;
  height: 0;
  position: absolute;
  opacity: 0;
  z-index: -1;
  visibility: hidden;
}

.catalog {
  @include fluid(padding-top, 50px, 200px);

  &__title {
    text-align: center;
    @include fluid(margin-bottom, 15px, 30px);
  }

  &__box {
    display: flex;
    align-items: center;
    justify-content: center;
    @include fluid(margin-bottom, 25px, 50px);

    &-btn {
      @include fluid(line-height, 16px, 20px);
      @include fluid(font-size, 14px, 16px);
      @include fluid(padding-top, 10px, 15px);
      @include fluid(padding-bottom, 10px, 15px);
      @include fluid(padding-left, 15px, 30px);
      @include fluid(padding-right, 15px, 30px);
      border-radius: 15px;
      background-color: #2C72C6;
      color: #fff;
      background-color: #fff;
      color: #2C72C6;
      cursor: pointer;
      transition: background-color .38s ease-in-out,
        color .38s ease-in-out;

      &:hover {
        background-color: #2C72C6;
        color: #fff;
      }

      &:not(:last-child) {
        margin-right: 10px;
      }

      &--active {
        background-color: #2C72C6;
        color: #fff;
      }
    }
  }

  &__slide {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(3, 1fr);
    @include fluid(gap, 20px, 40px);
    background-color: #F2F1F1;
  }

  &__item {
    display: none;
    opacity: 0;

    &--active {
      display: block;
    }

    &--opacity {
      opacity: 1;
      transition: opacity 0.38s;
    }
  }

  &__card {
    background-color: #fff;
    @include fluid(padding, 10px, 20px);

    &-img {
      @include fluid(height, 150px, 200px);
      object-fit: contain;
      @include fluid(margin-bottom, 10px, 15px);
    }

    &-title {
      @include fluid(margin-bottom, 10px, 20px);
      font-weight: 700;
      @include fluid(font-size, 20px, 24px);
      @include fluid(line-height, 24px, 29px);
      text-align: center;
      text-transform: uppercase;
      color: #2C72C6;
    }

    &-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      @include fluid(margin-bottom, 10px, 15px);

      &::last-child {
        @include fluid(margin-bottom, 10px, 20px);
      }
    }
  }

  &__link {
    outline: none;
  }

  &__block {
    display: flex;
    align-items: center;
    justify-content: center;
    @include fluid(padding-top, 25px, 50px);
  }

  &__forklift,
  &__bucket {

    &-prev,
    &-next,
    &-pagination {
      position: static;
      transition: opacity .38s ease-in-out;
    }

    &-prev,
    &-next {
      position: relative;
      margin-top: 0;
      width: fit-content;
      @include fluid(width, 30px, 40px);
      @include fluid(height, 30px, 40px);

      &::after {
        content: "";
        position: absolute;
        @include fluid(width, 30px, 40px);
        @include fluid(height, 30px, 40px);
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        background-image: url("../images/icons/arrow-pagination.svg");
        background-repeat: no-repeat;
        background-size: contain;
        display: flex;
        flex-direction: row-reverse;
      }
    }

    &-prev {
      &::after {
        transform: translateY(-50%) rotate(180deg);
      }
    }

    &-pagination {
      display: flex;
      @include fluid(padding-left, 15px, 30px);
      @include fluid(margin-right, 15px, 30px);
    }
  }

  .swiper-horizontal>.swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal,
  .swiper-pagination-custom,
  .swiper-pagination-fraction {
    width: fit-content;
  }

  .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    height: fit-content;
  }

  .swiper-pagination-bullet {
    background: transparent;
    color: #6899D4;
    opacity: 1;
    transition: opacity .38s ease-in-out;
  }

  .swiper-pagination-bullet-active {
    font-weight: 700;
    color: #2C72C6;
    transition: color .38s ease-in-out;
  }
}

.footer {
  @include fluid(padding-top, 25px, 50px);
  @include fluid(padding-bottom, 25px, 50px);
  background-color: #071A31;

  &__inner {
    @include fluid(padding-top, 10px, 20px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #6A7683;
  }

  &__item {
    display: flex;
    align-items: center;
  }

  &__link {
    @include fluid(font-size, 24px, 30px);
    color: #6A7683;
    transition: color .38s ease-in-out;

    &:not(:last-child) {
      @include fluid(margin-right, 20px, 40px);
    }

    &:hover {
      color: #fff;
    }
  }

  &__development {
    position: relative;
    color: #fff;
    @include fluid(padding-right, 50px, 75px);
    transition: .38s ease-in-out;

    &:hover {
      color: #F43E36;
    }

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 0;
      @include fluid(width, 42px, 53px);
      @include fluid(height, 30px, 42px);
      background-image: url("../images/icons/space-app.svg");
      background-repeat: no-repeat;
      background-size: contain;
    }
  }
}

@import 'media';