@import '_mixins';
@import '_variables';

body {
  font-family: 'URW Form', sans-serif;

  p {
    letter-spacing: 0.05em;
    font-size: 16px;
  }
}

a {
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }
}

.anchor {
  cursor: pointer;
}

#main-menu {
  @include respond-below(xs) {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 10;
    background: #fff;
    display: none;

    &.visible {
      @include flexbox;
    }
  }

  div[id^='menu-container-'] {
    @include respond-below(xs) {
      width: 100%;
      @include flexbox;
      @include align-items(center);
      @include justify-content(center);
    }

    ul {
      margin: 0;
      padding: 0;
      list-style-type: none;

      @include respond-above(xs) {
        @include flexbox;
      }

      @include respond-below(xs) {
        width: 100%;
      }

      li {
        position: relative;

        &.parent {
          >a {
            @include respond-above(xs) {
              pointer-events: none;
            }
          }
        }

        ul {
          position: absolute;
          display: none;

          @include respond-below(xs) {
            position: static;
          }
        }

        @include respond-above(xs) {
          &:hover {
            ul {
              display: block;
            }
          }
        }

        &.active {
          ul {
            display: block;
          }
        }
      }
    }

    &#menu-container-1 {
      .level-0 {
        justify-content: space-between;

        >li {
          display: flex;
          align-items: center;

          >a {
            color: $cTxtGray;
            text-transform: uppercase;
          }

          &#link-8 {
            >a {
              color: $cTxtWhite;
              font-weight: 800;
              font-size: 23px;
              padding: 16px 46px 14px 46px;
              background-color: $cBlack;
            }
          }
        }
      }
    }
  }
}

#main-menu-btn {
  height: 70px;
  width: 70px;
  position: fixed;
  bottom: 30px;
  right: 60px;
  color: #fff;
  background: #000;
  display: none;
  z-index: 9999;
  line-height: 50px;
  text-align: center;
  font-size: 35px;
  cursor: pointer;

  @include border-radius(50%);

  @include respond-below(md) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.btn-1 {
  position: relative;
  display: inline-block;
  width: 100%;
  color: $cTxtBlack;
  font-weight: 300;
  font-size: 26px;

  padding: 28px 57px;
  border: 1px solid $cBlack;

  &:hover {
    color: $cTxtBlack;
  }

  &::before {
    content: '';
    position: absolute;
    right: 46px;
    top: 50%;
    transform: translateY(-50%);
    width: 58px;
    height: 2px;
    background-color: $cBlack;
  }

  &::after {
    content: '';
    position: absolute;
    right: 46px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    border-right: 2px solid $cBlack;
    border-top: 2px solid $cBlack;
  }
}

//* ~~~~~~~~~~ Components ~~~~~~~~~~ *//
#footer {
  background-color: $cBlack;

  .footer_wrapper {
    color: $cTxtWhite;
    padding-top: 35px;
    padding-bottom: 50px;

    .footer_top {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .box-left {
        display: flex;
        justify-content: center;
        flex-direction: column;
        font-size: 14px;

        p {
          font-weight: 400;
          line-height: 22px;

          font-size: 14px;
          letter-spacing: 0.01em;
          margin-bottom: 0;
        }

        img {
          max-width: 130px;
          margin-bottom: 40px;
        }
      }

      .box-center {
        h4 {
          font-size: 18px;
          font-weight: 700;
        }

        ul {
          padding: 0;
          margin: 0;
          list-style: none;

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

            a {
              color: $cTxtWhite;
              font-size: 14px;
              letter-spacing: 0.01em;
            }
          }
        }
      }

      .box-right {
        position: relative;
        padding-top: 30px;

        &::before {
          content: '';
          position: absolute;
          top: 9px;
          left: 0;
          right: 0;
          height: 1px;
          background: $cWhite;
        }

        ul {
          padding: 0;
          margin: 0;
          list-style: none;

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

            a {
              color: $cTxtWhite;
              font-size: 14px;
              letter-spacing: 0.01em;
            }
          }
        }
      }

      @include respond-below(sm) {
        flex-direction: column;
        row-gap: 50px;
      }
    }
  }
}

#contact-mini {
  padding: 60px 0;
  background-color: $cLightGray;

  .left_col {
    text-align: right;

    @include respond-above(md) {
      padding-right: 50px;
    }

    @include respond-below(md) {
      text-align: center;
      margin-bottom: 30px;
    }

    h2 {
      font-weight: 700;
      font-size: 32px;
      margin-bottom: 60px;
    }

    p {
      margin-bottom: 0;
    }

    ul {
      margin: 0;
      padding: 0;
      list-style: none;

      &.contact-social {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 9px;
        margin-bottom: 50px;
        margin-top: 15px;

        &::before {
          content: '';
          position: absolute;
          bottom: -25px;
          height: 1px;
          width: 275px;
          background: $cBlack;
        }

        img {
          max-width: 25px;
        }

        @include respond-below(md) {
          margin-top: 20px;
          justify-content: center;
        }
      }

      &.contact-data {
        li {
          &:not(:last-child) {
            margin-bottom: 10px;
          }

          a {
            color: $cTxtBlack;
            font-weight: 400;
            font-size: 18px;
          }
        }
      }
    }
  }

  .right_col {
    p {
      font-weight: 300;
    }

    .contact-head {
      padding-top: 5px;
    }
  }
}

#contact_form {
  button {
    border: 0;
  }

  .agreement {
    font-size: 10px;

    .agreement-container {
      margin-bottom: 10px;

      .form_group_2 {
        display: flex;
        align-items: center;
        gap: 10px;

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

        input[type='checkbox'] {
          position: relative;
          appearance: none;
          width: 26px;
          min-width: 26px;
          height: 26px;
          background: $cBlack;
          cursor: pointer;
          overflow: hidden;

          &::before {
            content: '';
            position: absolute;
            top: -20px;
            left: 35px;
            width: 3px;
            height: 17px;
            background: $cWhite;
            transform: rotate(35deg);
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            transition: top 250ms ease-in-out, left 250ms ease-in-out;
          }

          &::after {
            content: '';
            position: absolute;
            top: -7px;
            left: -16px;
            width: 3px;
            height: 11px;
            background: $cWhite;
            transform: rotate(-45deg);
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            transition: top 250ms ease-in-out, left 250ms ease-in-out;
          }

          &:checked {
            &::before {
              top: 6px;
              left: 14px;
            }

            &::after {
              top: 12px;
              left: 7px;
            }
          }
        }

        label {
          margin-bottom: 0;
          line-height: 1.5;
          cursor: pointer;

          &.label_form_check2 {
            max-width: 240px;
          }
        }
      }
    }

    .btn.btn-send {
      position: relative;
      color: $cTxtWhite;
      font-weight: 700;
      font-size: 16px;
      text-transform: uppercase;
      padding: 16px 60px 16px 20px;
      background: $cBlack;
      border-radius: 0;

      display: block;
      margin-left: auto;

      // @include respond-above(xs) {
      // 	margin-top: -35px;
      // }

      &::before {
        content: '';
        position: absolute;
        right: 16px;
        top: 50%;
        height: 2px;
        width: 30px;
        background: $cWhite;
        transform: translateY(-50%);
      }

      &::after {
        content: '';
        position: absolute;
        right: 16px;
        top: 50%;
        height: 12px;
        width: 12px;
        border-right: 2px solid $cWhite;
        border-bottom: 2px solid $cWhite;
        transform: translateY(-50%) rotate(-45deg);
      }
    }
  }

  .form_group {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid $cBlack;
    margin-bottom: 11px;

    textarea {
      border: 0;
      height: 100px;
      padding: 13px;
      resize: none;

      &::placeholder {
        color: $cTxtGray;
        font-weight: 700;
        font-size: 12.8px;
        line-height: 20px;
      }

      &:focus {
        outline: none;
      }
    }

    input,
    select {
      border: none;
      padding: 13px;

      &::placeholder {
        color: $cTxtGray;
        font-weight: 700;
        font-size: 12.8px;
        line-height: 20px;
      }

      &:focus {
        outline: none;
      }
    }
  }
}

header {
  position: sticky;
  top: 0;
  background: $cWhite;
  z-index: 998;
  transition: box-shadow 150ms linear;

  &.fixed {
    box-shadow: 0px 0px 30px rgba($cBlack, 0.4);
  }

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .container {
    @media (min-width: 1620px) {
      max-width: 1140px;
    }

    @media (min-width: 1360px) {
      max-width: 1140px;
    }

    @media (min-width: 1200px) {
      max-width: 1140px;
    }
  }

  .header__wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    @include respond-below(sm) {
      flex-direction: column;
      gap: 10px;
    }

    @include respond-below(md) {
      column-gap: 25px;
    }

    .header_left {
      display: flex;
      align-items: center;
      justify-content: center;

      @include respond-below(xl) {
        width: fit-content;
        margin-right: auto;
      }

      @include respond-between(md, lg) {
        padding: 20px;
      }

      @include respond-below(md) {
        margin: 20px auto;
      }

      a {
        display: block;
        position: relative;
        z-index: 10;
        max-width: 194px;

        img {
          width: 100%;
          max-width: 150px;
        }
      }
    }

    .header_right {
      padding: 30px 0;

      @include respond-below(md) {
        padding: 20px 0;
      }

      .header_big_btn {
        a {
          display: inline-block;
          font-weight: 800 !important;
          font-size: 23px !important;
          color: $cTxtWhite !important;
          padding: 12px 25px 7px 25px;
          background: $cBlack;
          cursor: pointer;

          @include respond-below(lg) {
            font-size: 20px !important;
            padding: 12px 20px 7px 20px;
          }
        }
      }
    }

    #advance_menu {
      @include respond-below(md) {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 9999;
        display: none;
        align-items: center;
        justify-content: center;

        &.visible {
          display: flex;
        }
      }

      .static_height {
        height: 230px;
      }

      ul {
        background: $cWhite;

        @include respond-above(md) {
          &:not(.lvl_1) {
            li {
              &.parent {
                &:hover {
                  >a {
                    &::before {
                      width: calc(100% - 23px);
                    }
                  }
                }

                >a {
                  &::after {
                    content: url('/upload/filemanager/Icons/mini_arrow_bottom_new.svg');
                    display: inline-block;
                    margin-left: 7px;
                    transition: all 250ms ease;
                  }
                }
              }
            }
          }
        }

        @include respond-below(md) {
          li {
            &.parent {
              >a {
                display: flex;
                flex-direction: row;
                justify-content: space-between;

                &::after {
                  content: url('/upload/filemanager/Icons/mini_arrow_bottom_new.svg');
                  transform: rotate(-90deg);
                  margin-left: 7px;
                  transition: all 250ms ease;
                }

                &:hover {
                  &::after {
                    transform: rotate(0deg);
                  }
                }
              }
            }
          }
        }

        li {
          &.parent {
            >a {
              width: fit-content;

              @include respond-above(md) {
                padding-bottom: 5px;
              }
            }
          }

          &:hover {
            >a {
              &::before {
                width: 100%;
              }
            }
          }

          @include respond-below(md) {
            &:not(:last-child) {
              &::after {
                content: '';
                position: absolute;
                bottom: -15px;
                left: 0;
                right: 0;
                height: 1px;
                background: $cSandDarker;
              }
            }
          }

          a {
            position: relative;
            color: $cTxtBlack;
            font-weight: 400;
            font-size: 15px;
            width: fit-content;
            text-transform: uppercase;

            &::before {
              content: '';
              position: absolute;
              bottom: 0;
              left: 0;
              width: 0;
              height: 1px;
              background: rgba(0, 0, 0, 0.15);
              transition: all 250ms ease;
            }

            &.no-click {
              @include respond-above(md) {
                pointer-events: none;
              }
            }

            @include respond-below(lg) {
              font-size: 14px;
            }

            @include respond-below(md) {
              font-size: 16px;
              display: block;
              width: 100% !important;

              &::before {
                display: none;
              }
            }
          }
        }
      }

      ul.lvl_1 {
        display: flex;
        align-items: center;
        gap: 40px;

        @include respond-between(md, lg) {
          gap: 20px;
        }

        @include respond-below(md) {
          flex-wrap: wrap;
          gap: 30px;

          width: 100%;
          max-width: 400px;
          padding-left: 15px;
          padding-right: 15px;
        }

        >li {
          position: relative;

          @include respond-below(md) {
            width: 100%;
          }

          &.parent {
            &:hover {
              ul.lvl_2 {
                opacity: 1;
                visibility: visible;
              }
            }

            @include respond-below(md) {
              &.active {
                ul.lvl_2 {
                  display: block;
                  opacity: 1;
                  visibility: visible;
                  width: 100%;
                  box-shadow: none;
                  background: #f4f4f4;
                  height: auto !important;
                  padding: 10px 20px;
                  margin-top: 10px;

                  @include respond-below(md) {
                    padding: 0 0 0 20px;
                    background: $cWhite;
                  }

                  li {
                    a {
                      margin-left: auto;
                      margin-right: auto;
                    }
                  }

                  // * {
                  // 	color: $cTxtBlack;
                  // }
                }
              }
            }
          }

          ul.lvl_2 {
            position: absolute;
            left: 0;
            width: max-content;
            opacity: 0;
            visibility: hidden;
            transition: visibility 250ms ease, opacity 250ms ease;
            padding: 20px;
            box-shadow: 0px 0px 30px rgba($cBlack, 0.06);

            @include respond-below(md) {
              position: static;
              display: none;
            }

            >li {
              @include respond-above(md) {
                &:hover {
                  >a {
                    &::after {
                      transform: rotate(-90deg);
                    }
                  }

                  ul.lvl_3 {
                    opacity: 1;
                    visibility: visible;
                    transition-delay: 200ms;
                  }

                  .category_img {
                    opacity: 1;
                    visibility: visible;
                    transition-delay: 200ms;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  }
                }
              }

              @include respond-below(md) {
                &.active {
                  ul.lvl_3 {
                    display: block;
                    visibility: visible;
                    opacity: 1;
                    position: static;
                    width: 100%;
                    background: transparent;
                    height: auto;
                    padding-top: 0;
                    box-shadow: none;
                    padding: 10px 0 0 0;

                    // * {
                    // 	color: $cTxtBlack;
                    // }
                  }
                }
              }

              >a {
                padding: 5px 0;
              }

              a {
                font-size: 14px;
              }

              ul.lvl_3 {
                position: absolute;
                left: calc(100% - 20px);
                top: 0;
                bottom: 0;
                padding: 20px;
                width: max-content;
                transition: visibility 250ms ease, opacity 250ms ease;
                opacity: 0;
                visibility: hidden;
                width: 200px;
                box-shadow: 30px 0px 30px rgba($cBlack, 0.06);
                min-height: fit-content;

                @include respond-below(md) {
                  transition: none;
                }

                li {
                  padding: 0px 10px;

                  a {
                    padding-bottom: 5px;
                  }
                }
              }

              .category_img {
                position: absolute;
                left: calc(100% + 150px - 10px);
                top: 0;
                // background: $cWhite;
                padding: 20px;
                opacity: 0;
                visibility: hidden;
                transition: visibility 250ms ease, opacity 250ms ease;
                // box-shadow: 26px 0px 30px rgba($cBlack, 0.04);

                &::before {
                  content: '';
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 50%;
                  height: 100%;
                  background: $cWhite;
                }

                img {
                  position: relative;
                  z-index: 1;
                }
              }
            }
          }
        }
      }
    }
  }
}

#page-hero {
  height: 475px;
  position: relative;
  display: flex;
  align-items: center;

  @include respond-below(md) {
    height: 400px;
  }

  >div {
    width: 100%;
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;

    .row {
      height: 100%;
      margin: 0;

      .col-12 {
        height: 100%;
        padding: 0;
      }
    }

    img {
      min-width: 100%;
      width: 100%;
      max-width: fit-content;
      filter: brightness(0.7);
      height: 100%;
      object-fit: cover;
    }

    video {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      min-width: 100% !important;
      min-height: 100%;
      width: auto !important;
      // height: auto;
      height: 100%;
      z-index: 1;
      overflow: hidden;
      background-color: $cBlack;
    }
  }

  .hero-data {
    position: relative;
    z-index: 1;

    ul {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 0;
      padding: 0;
      list-style: none;
      gap: 30px;
      margin-bottom: 60px;
      width: fit-content;

      &::before {
        content: '';
        position: absolute;
        bottom: -30px;
        height: 2px;
        right: 0;
        left: -50px;
        background-color: $cWhite;
      }

      li {
        position: relative;
        color: $cTxtWhite;
        font-weight: 200;
        font-size: 25px;

        &:not(:last-child) {
          &::before {
            content: '>';
            position: absolute;
            top: 50%;
            right: -30px;
            color: $cTxtWhite;
            transform: translate(-50%, -50%);
          }
        }

        a {
          color: $cTxtWhite;
          font-weight: 200;
          font-size: 25px;
        }

        @include respond-below(md) {
          font-size: 22px;

          a {
            font-size: 22px;
          }
        }

        @include respond-below(sm) {
          font-size: 18px;

          a {
            font-size: 18px;
          }
        }
      }
    }

    h2 {
      color: $cTxtWhite;
      font-weight: 700;
      font-size: 40px;
      margin-bottom: 0;

      @include respond-below(md) {
        font-size: 32px;
      }

      @include respond-below(sm) {
        font-size: 26px;
      }
    }
  }
}

#catalog-box {
  .catalog-box-1 {
    background-color: $cSand;

    @include respond-below(md) {
      padding: 40px 0 60px 0;
    }

    ul {
      display: flex;
      flex-direction: column;
      row-gap: 35px;
      margin: 0;
      padding: 0;
      list-style: none;

      li {
        a {
          width: 100%;
          display: block;
          color: $cTxtWhite;
          font-weight: 200;
          font-size: 26px;
          padding: 24px 120px 20px 45px;
          background-color: $cBlack;

          &.download-catalog {
            position: relative;

            &::before {
              content: '';
              position: absolute;
              right: 45px;
              top: 50%;
              width: 60px;
              height: 40px;
              background-image: url('/upload/filemanager/Icons/icon-download-file.svg');
              background-size: cover;
              background-repeat: no-repeat;
              transform: translateY(-50%);
            }
          }
        }
      }
    }
  }

  .catalog-box-2 {
    margin: 100px 0;

    a.btn-1 {
      padding: 28px 110px 28px 57px;
    }

    @include respond-below(md) {
      margin: 60px 0;
    }
  }
}

#nav_tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 17px;
  max-width: 400px;
  padding: 10px 0 10px 40px;
  list-style: none;
  border-left: 2px solid $cBlack;
  margin-bottom: 0;

  li {
    position: relative;
    min-width: fit-content;
    border: 1px solid $cCloud;
    background: $cWhite;
    transition: background 250ms ease;

    &.new {
      &::before {
        // content: url("/upload/filemanager/Icons/new-icon.png");
        content: '';
        position: absolute;
        top: -10px;
        right: -15px;
        width: 37px;
        height: 28px;
        background-image: url('/upload/filemanager/Icons/new-icon.png');
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
      }
    }

    &.active {
      background: $cCloud;
    }

    a {
      display: inline-block;
      color: $cTxtBlack;
      font-weight: 300;
      font-size: 19px;
      line-height: 1;
      font-family: $fontNewOrder;
      margin-bottom: 0;
      text-decoration: none;

      padding: 14px 22px;
      cursor: pointer;
    }
  }

  @include respond-below(md) {
    max-width: unset;
    justify-content: center;
    border-top: 2px solid $cBlack;
    border-left: none;
    padding: 40px 10px 10px 10px;
  }
}

#product-preview-box {
  .product-preview-box {
    .scontainer-content {
      .product-nav {
        position: relative;
        margin-top: 50px;
        padding-bottom: 80px;

        &::before {
          content: '';
          position: absolute;
          bottom: calc(80px / 2);
          left: 0;
          right: 0;
          height: 1px;
          background-color: $cSandDarker;
        }

        >.row {
          align-items: center;
        }

        .col-left {
          text-align: right;

          h3 {
            font-size: 30px;
            font-weight: 600;
            text-transform: uppercase;
            max-width: 200px;
            margin-left: auto;
            margin-bottom: 0;
            padding: 30px 20px 30px 0;
          }
        }

        .col-right {}

        @include respond-below(md) {
          &::before {
            display: none;
          }

          .col-left {
            text-align: center;

            h3 {
              padding: 30px 20px;
              max-width: unset;
            }
          }
        }
      }

      .product-preview {
        display: none;

        &.active {
          display: block;
        }

        .product_info_img {
          padding-top: 15px;

          .illustration_product_slider {
            .swiper-wrapper {
              .swiper-slide {
                text-align: center;
              }
            }

            .swiper-navigation {
              display: flex;
              flex-direction: row-reverse;
              align-items: center;
              justify-content: center;
              gap: 60px;
              margin-top: 40px;

              .swiper-button-disabled {
                opacity: 0.6;
              }

              .swiper-slide-next,
              .swiper-slide-prev {
                position: relative;
                cursor: pointer;
                width: 52px;
                height: 52px;
                border: 1px solid $cSandDarker;
                transition: background 250ms ease-in-out;

                &::before {
                  content: '';
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  width: 22px;
                  height: 22px;
                  border-top: 4px solid $cSandDarker;
                  border-right: 4px solid $cSandDarker;
                  transition: border-color 250ms ease-in-out;
                }

                &:not(.swiper-button-disabled) {
                  background: $cSandDarker;

                  &::before {
                    border-color: $cWhite;
                  }
                }

                &.swiper-slide-next {
                  &::before {
                    transform: translate(calc(-50% - 4px), -50%) rotate(45deg);
                  }
                }

                &.swiper-slide-prev {
                  &::before {
                    transform: translate(calc(-50% + 4px), -50%) rotate(-135deg);
                  }
                }
              }
            }
          }

          @include respond-below(md) {
            margin-bottom: 50px;
          }
        }

        .product_info_text {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-top: 50px;

          ul {
            list-style: none;
            margin-bottom: 0;
            padding: 10px 0px 10px 20px;
            height: 100%;
            border-left: 2px solid #010101;
            direction: rtl;

            /* width */
            &::-webkit-scrollbar {
              width: 3px;
            }

            /* Handle */
            &::-webkit-scrollbar-thumb {
              background: #dadada;
              border-radius: 0px;
            }

            /* Track */
            &::-webkit-scrollbar-track {
              box-shadow: inset 0 0 5px rgba(grey, 0.1);
              border-radius: 0px;
            }

            /* Handle on hover */
            &::-webkit-scrollbar-thumb:hover {
              background: #000000;
            }

            li {
              display: grid;
              grid-template-columns: 120px 1fr;
              column-gap: 40px;
              direction: ltr;

              &:not(:last-child) {
                margin-bottom: 25px;
              }

              h4 {
                font-weight: 700;
                font-size: 18px;
                margin-bottom: 0;
                text-align: right;
              }

              p {
                font-weight: 400;
                font-size: 18px;
                line-height: 26px;
                letter-spacing: 0.05em;
                margin-bottom: 0;
              }
            }

            @include respond-below(md) {
              border-left: none;
            }
          }

          &__footer {
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            column-gap: 55px;
            row-gap: 15px;
            padding-top: 70px;
            padding-left: 40px;

            .btn8 {
              font-weight: 700;
              font-size: 22px;
              text-transform: uppercase;
              padding: 20px 80px;
              border: 3px solid $cBlack;
              margin-bottom: 0;
            }

            img {
              width: 100%;
              max-width: fit-content;
            }

            @include respond-below(sm) {
              grid-template-columns: 1fr;
              padding-left: 0;

              .btn8 {
                order: 1;
              }

              img {
                margin: 0 auto;
              }
            }
          }

          @include respond-below(md) {
            padding-top: 0;
            margin-bottom: 0;

            ul {
              padding: 0;

              li {
                grid-template-columns: 1fr;

                h4 {
                  text-align: left;
                }
              }
            }
          }

          @include respond-below(sm) {
            .btn8 {
              margin-top: 40px;
              margin-left: auto;
              margin-right: auto;
            }
          }
        }

        @include respond-below(md) {
          padding-left: 0;
        }
      }
    }
  }
}

#product-description-box {
  margin-bottom: 200px;

  @include respond-below(md) {
    margin-bottom: 100px;
  }

  .col-right {
    position: relative;
    margin-top: 30px;
    height: fit-content;

    &::before {
      content: '';
      position: absolute;
      left: 48px;
      right: 15px;
      bottom: 0;
      height: 2px;
      background: $cBlack;
    }

    ul {
      margin: 0 0 80px 0;
      padding: 0;
      list-style: none;
      overflow: hidden;
      transition: height 250ms ease-in-out;

      p {
        font-weight: 300;
        font-size: 14px;
        hyphens: auto;

        strong {
          font-weight: 800;
        }

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

    @include respond-below(md) {
      &::before {
        left: 15px;
      }
    }
  }
}

.action-btn {
  position: absolute;
  width: 42px;
  height: 42px;
  background-color: $cSandDarker;
  bottom: 20px;
  right: 15px;
  cursor: pointer;
  border: 2px solid $cSandDarker;
  transition: background 250ms ease-in-out;

  &.active {
    background: $cWhite;

    &::after {
      height: 0;
    }

    &::before {
      background: $cSandDarker;
    }
  }

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 29px;
    height: 2px;
    background: $cWhite;
    transform: translate(-50%, -50%);
    transition: background 250ms ease-in-out;
  }

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 29px;
    background: $cWhite;
    transform: translate(-50%, -50%);
    transition: height 250ms ease-in-out;
  }
}

#product-colors {
  .product-colors {
    display: none;

    &.active {
      display: block;
    }
  }

  .col-left {
    text-align: right;

    h2 {
      font-weight: 400;
      font-size: 40px;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 50px;
    }

    @include respond-below(md) {
      text-align: left;
      margin-bottom: 50px;

      h2 {
        margin-bottom: 30px;

        br {
          display: none;
        }
      }
    }
  }

  .col-right {
    border-left: 2px solid $cBlack;

    .color-tiles-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 50px;
      row-gap: 40px;
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .color-tiles {
      .color-tiles-title {
        h2 {
          font-weight: 300;
          font-size: 20px;
          margin-bottom: 25px;

          &.color-tiles-title-big {
            font-size: 32px;
            font-weight: 400;
          }
        }
      }

      .color-tiles-data {
        display: flex;
        flex-direction: column;
        row-gap: 17px;
        overflow: hidden;

        li {
          display: flex;
          flex-direction: row;
          align-items: center;
          column-gap: 17px;

          img {
            max-height: 30px;
            width: 170px !important;
            object-fit: cover;
          }

          p {
            font-weight: 400;
            font-size: 13px;
            margin-bottom: 0;
          }
        }
      }

      .action-btn {
        position: relative;
        bottom: 0;
        left: 0;
        right: auto;
        margin-top: 17px;
      }
    }

    @include respond-below(sm) {
      .color-tiles-grid {
        grid-template-columns: 1fr;
      }
    }
  }
}

.accordion-box {
  list-style: none;
  padding: 70px 30px 70px 70px;
  margin: 0;

  li {
    &:not(:last-child) {
      margin-bottom: 25px;
    }

    h3 {
      font-size: 25px;
      font-weight: 200;
      margin-bottom: 12px;

      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      justify-content: flex-end;
      column-gap: 16px;

      cursor: pointer;
    }

    p {
      display: none;
      font-size: 14px;
      font-weight: 300;
      margin-bottom: 0;
    }
  }

  .accordion-btn {
    position: relative;
    width: 46px;
    height: 46px;
    background: $cBlack;
    border: 1px solid $cBlack;
    transition: background 250ms ease-in-out;

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 29px;
      height: 2px;
      background: $cWhite;
      transform: translate(-50%, -50%);
      transition: background 250ms ease-in-out;
    }

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 2px;
      height: 29px;
      background: $cWhite;
      transform: translate(-50%, -50%);
      transition: height 250ms ease-in-out;
    }

    &.active {
      background: $cWhite;

      &::before {
        background: $cBlack;
      }

      &::after {
        height: 0;
      }
    }
  }
}

#our-projects {
  .our-projects-head {
    h2 {
      color: $cTxtCloud;
      text-align: center;
      font-size: 50px;
      margin-bottom: 40px;
    }
  }

  .our-projects-data {
    background: $cLightGray;

    .slider-our-projects {
      .swiper-slide {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;

        .slide-data {
          text-align: right;
          max-width: 250px;
          margin-left: auto;
          margin-right: 60px;

          h2 {
            font-weight: 300;
            font-size: 32px;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 20px;
          }

          p {
            font-size: 12px;
            line-height: 2;

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

        .slide-img {
          img {
            width: 100%;
            max-width: fit-content;
          }
        }

        @include respond-below(md) {
          grid-template-columns: 1fr;
          row-gap: 30px;

          .slide-img {
            order: 1;
            text-align: center;
          }

          .slide-data {
            order: 2;
            margin-right: 0;
            margin-left: 0;
            max-width: unset;
            text-align: center;
            padding-bottom: 30px;
          }
        }
      }
    }

    .slider-navidation {
      .swiper-button {
        width: 90px;
        height: 90px;
        border-radius: 100%;
        background: $cWhite;

        &-next {
          &::after {
            right: 17px;
            transform: translate(-50%, -50%) rotate(45deg);
          }

          @include respond-above(md) {
            right: 15px;
            transform: translateX(50%);
          }
        }

        &-prev {
          &::after {
            left: 30px;
            transform: translate(-50%, -50%) rotate(225deg);
          }

          @include respond-above(md) {
            left: 15px;
            transform: translateX(50%);
          }
        }

        &::before {
          content: '';
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 45px;
          height: 2px;
          background-color: $cBlack;
        }

        &::after {
          content: '';
          position: absolute;
          // right: 17px;
          top: 50%;
          // transform: translate(-50%, -50%) rotate(45deg);
          width: 14px;
          height: 14px;
          border-right: 2px solid $cBlack;
          border-top: 2px solid $cBlack;
        }
      }
    }
  }
}

#cookie-information {
  font-size: 14px;
}

.main-content {
  padding-top: 75px;
  padding-bottom: 75px;
}

.files {
  list-style: none;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 0;

  li {
    background-color: #ebebeb;
    border-radius: 3px;
    transition: background-color 0.3s;

    a {
      margin: 0;
      padding: 20px;
      display: block;
      color: #000;

      i {
        font-size: 22px;
        margin-right: 10px;
        top: 5px;
        position: relative;
      }
    }

    &:hover {
      background-color: lighten($color: #ebebeb, $amount: 5%);

      a {
        color: lighten($color: black, $amount: 50%);
      }
    }
  }
}

.article-password {
  width: 500px;
  margin: 0 auto;
  padding: 50px 50px 40px;
  box-shadow: 0 0px 4px 0 #00000040;

  p {
    color: #000;
    font-size: 15px;
    text-transform: uppercase;
    margin-bottom: 0;
  }

  form {
    display: flex;
    flex-direction: column;
    row-gap: 12px;

    input[type='password'],
    input[type='email'] {
      height: 46px;
      border: 1px solid #000;
      border-radius: 0;
    }

    input[type='submit'] {
      height: 46px;
      font-size: 15px;
      padding: 13px 30px 15px;
      background: #000;
      border: none;
      border-radius: 0;
      text-transform: uppercase;
    }
  }
}

.article-1 {
  h2 {
    font-size: 20px;
    margin-bottom: 15px;
  }

  ul {
    margin: 0 0 50px 0;
    padding: 0;
    list-style-type: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;

    li {
      a {
        border: 1px solid #D4D4D4;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        padding: 15px;
        color: #000;
        transition: ease 0.3s all;
        position: relative;
        gap: 10px;

        img {
          width: 100%;
          max-width: 100% !important;
        }

        &::after {
          position: relative;
          top: -2px;
          content: '';
          display: flex;
          background: url('/upload/filemanager/Icons/icon-file.svg') no-repeat center;
          height: 20px;
          width: 20px;
          background-size: contain;

        }

        &:hover {
          border: 1px solid #000;
        }
      }
    }
  }

  hr {
    margin-bottom: 50px;
  }
}

.article_password_title {
  margin: 0 auto 50px;
  text-transform: uppercase;
  text-align: center;

  ._first {
    font-size: 15px;
    font-weight: 600;
  }

  ._second {
    font-size: 15px;
    font-weight: 300;
  }
}

body {
  &#page-8 {
    #page-hero {
      max-width: 1330px;
      margin-left: auto;
      margin-right: auto;
      height: 350px;
    }
  }
}