@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700&display=swap");
//* ~~~~~~ Variables ~~~~~~ *//
//* colors
$cWhite: #fff;
$cGray: #cccccc;
$cLightYellow: #fbf6eb;
$cYellow: #e2be74;
$cBlack: #000;

//* ~~~~~~ Mixins ~~~~~~ *//
@mixin fontRalewey {
  font-family: "Raleway", sans-serif;
}

//* ~~~~~~ Static ~~~~~~~ *//
header {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 0 20%;
}

.own-container {
  width: 100vw;
  max-width: 1300px;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 0 15px;
}

//* Turn off the title on the page
#layout {
  #content {
    .text_menu_title_header {
      display: none;
    }
  }
}

body {
  @media only screen and (max-width: 757px) {
    padding: 0 !important;
  }
}

//* ~~~~~~ Pages ~~~~~~ *//
#about-page {
  @include fontRalewey;

  .hero-slide {
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    height: 850px;
    overflow: hidden;

    video {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      height: 100%;
      object-fit: cover;
    }

    .hero-slide__title {
      position: relative;
      padding-left: 140px;
      padding-top: 120px;

      color: $cWhite;
      font-size: 3.8125rem;
      font-weight: 800;
      @include fontRalewey;
      z-index: 9;
    }

    @media (max-width: 991px) {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;

      .hero-slide__title {
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 0;
      }
    }

    @media (max-width: 665px) {
      .hero-slide__title {
        font-size: 2.75rem;
      }
    }
  }

  .box-01 {
    margin-bottom: 110px;

    .box-01__wrapper {
      h2 {
        color: $cBlack;
        font-size: 2rem;
        text-align: center;
        font-weight: 800;
        margin-top: 60px;
        margin-bottom: 60px;
      }

      .grid-tiles {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 25px;

        .grid-tile {
          border: 1px solid $cGray;
          border-radius: 7px;
          padding: 20px;

          h4 {
            color: $cBlack;
            font-size: 1.4375rem;
            font-weight: 700;
            margin: 10px 0;
          }

          p {
            color: $cBlack;
            font-size: 1.0625rem;
            font-weight: 400;
            margin: 0;
          }
        }
      }
    }

    @media (max-width: 991px) {
      .box-01__wrapper {
        .grid-tiles {
          .grid-tile {
            &:last-child {
              grid-column: 1 / -1;
            }
          }
        }
      }
    }

    @media (max-width: 654px) {
      .box-01__wrapper {
        .grid-tiles {
          .grid-tile {
            text-align: center;
          }
        }
      }
    }
  }

  .box-02 {
    padding: 100px 0;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    background: $cLightYellow;

    .box-02__wrapper {
      .own-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 70px;
        align-items: center;

        .own-col-1 {
          .form-row-1 {
            margin-bottom: 50px;
            text-align: center;

            h2 {
              &:nth-child(1) {
                color: $cYellow;
                font-size: 110px;
                font-weight: 800;
                line-height: 1;
                margin: 0;
              }

              &:nth-child(2) {
                color: $cYellow;
                font-size: 35px;
                font-weight: 800;
                line-height: 1;
                padding-left: 150px;
              }
            }
          }

          .form-row-2,
          .form-row-3,
          .form-row-4 {
            display: flex;
            flex-direction: row;
            gap: 25px;

            .form-row__col1 {
              background: $cYellow;
              margin-top: -30px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
              min-width: 110px;
              height: 110px;

              span {
                color: $cWhite;
                font-size: 5.375rem;
                font-weight: 700;
                height: 100%;
              }
            }

            .form-row__col2 {
              h3 {
                color: $cBlack;
                font-size: 1.25rem;
                font-weight: 800;
                margin-top: 0;
                margin-bottom: -10px;
                text-transform: uppercase;
              }

              p {
                color: $cBlack;
                font-size: 1.25rem;
                font-weight: 400;
                line-height: 1.3;

                strong {
                  font-weight: 900;
                }

                a {
                  color: $cBlack;
                }
              }
            }
          }

          .form-row-2,
          .form-row-3 {
            margin-bottom: 25px;
          }
        }
      }
    }

    .btn-1 {
      text-align: center;
      line-height: 1;
      color: $cBlack;
      font-size: 16px;
      font-weight: 800;
      text-transform: uppercase;
      background: $cYellow;
      padding: 15px 13px 13px;
      width: 100%;
      max-width: 270px;
      display: block;
      letter-spacing: 1px;
    }

    @media (max-width: 1199px) {
      .box-02__wrapper {
        .own-row {
          grid-template-columns: 1fr;
          gap: 50px;

          .own-col-1 {
            .form-row__col2 {
              p {
                br {
                  display: none;
                }
              }
            }
          }

          .own-col-2 {
            grid-row-end: 1;
            text-align: center;
          }
        }
      }
    }

    @media (max-width: 757px) {
      .box-02__wrapper {
        .own-row {
          .own-col-1 {
            .form-row-1 {
              h2 {
                &:nth-child(1) {
                  font-size: 80px;
                }

                &:nth-child(2) {
                  padding-left: 0;
                }
              }
            }
          }
        }
      }
    }

    @media (max-width: 530px) {
      .box-02__wrapper {
        .own-row {
          .own-col-1 {

            .form-row-2,
            .form-row-3,
            .form-row-4 {
              flex-direction: column;
              align-items: center;

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

              .form-row__col1 {
                margin-top: 0;
              }

              .form-row__col2 {
                text-align: center;

                .btn-1 {
                  margin: 0 auto;
                }
              }
            }
          }
        }
      }
    }
  }

  .box-03 {
    margin-bottom: 110px;

    .box-03__wrapper {
      h2 {
        color: $cBlack;
        font-size: 2.625rem;
        text-align: center;
        font-weight: 800;
        margin-top: 60px;
        margin-bottom: 80px;
      }

      .grid-tiles {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 70px;

        .grid-tile {
          h4 {
            color: $cBlack;
            font-size: 1.4375rem;
            font-weight: 700;
            margin: 10px 0;
          }

          p {
            color: $cBlack;
            font-size: 1.0625rem;
            font-weight: 400;
            margin: 0;
          }
        }
      }
    }

    @media (max-width: 757px) {
      .box-03__wrapper {
        h2 {
          font-size: 2rem;
        }
      }
    }

    @media (max-width: 700px) {
      .box-03__wrapper {
        .grid-tiles {
          .grid-tile {
            text-align: center;
          }
        }
      }
    }
  }

  .box-04 {
    .box-04__wrapper {
      h2 {
        color: $cBlack;
        font-size: 2.625rem;
        text-align: center;
        font-weight: 800;
        margin-top: 60px;
        margin-bottom: 80px;
      }

      .models-slider {
        display: flex;
        align-items: center;
        min-height: 450px;
        position: relative;
        padding: 0 50px;

        .swiper {
          height: 100%;
          max-width: 1170px;

          .swiper-wrapper {
            .swiper-slide {
              a {
                width: 100%;
                max-width: 271px;
                display: block;
                height: 100%;
                margin: 0 auto;
              }

              .slide-image {}

              .slide-data {
                .slide-data__title {
                  color: #aaaaaa;
                  font-size: 1rem;
                  text-transform: uppercase;
                  margin: 10px 0 0;
                }

                .slide-data__price {
                  color: #535353;
                  margin: 0;
                  display: none;
                }
              }
            }
          }
        }

        .swiper-button-prev,
        .swiper-button-next {
          height: 100%;
          transform: translateY(-50%);

          &::after {
            color: #dddddd;
            font-size: 60px;
          }
        }
      }
    }

    @media (max-width: 757px) {
      .box-04__wrapper {
        h2 {
          font-size: 2rem;
        }
      }
    }

    @media (max-width: 400px) {
      .box-04__wrapper {
        .models-slider {

          .swiper-button-next,
          .swiper-button-prev {
            &::after {
              font-size: 40px;
            }
          }
        }
      }
    }
  }

  .box-05 {
    .box-05__wrapper {
      h2 {
        color: $cBlack;
        font-size: 2.625rem;
        text-align: center;
        font-weight: 800;
        margin-top: 60px;
        margin-bottom: 80px;
      }

      .big-tiles {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
        text-align: center;

        .big-tile {
          h4 {
            color: $cBlack;
            font-size: 1.4375rem;
            font-weight: 700;
            max-width: 270px;
            margin: 30px auto 0 auto;
          }
        }
      }
    }

    @media (max-width: 991px) {
      .box-05__wrapper {
        .big-tiles {
          .big-tile {
            img {
              width: 100%;
              max-width: 200px;
            }

            &:last-child {
              grid-column: 1 / -1;
            }
          }
        }
      }
    }

    @media (max-width: 757px) {
      .box-05__wrapper {
        h2 {
          font-size: 2rem;
        }

        .big-tiles {
          .big-tile {
            img {
              width: 100%;
              max-width: 150px;
            }
          }
        }
      }
    }
  }

  .box-06 {
    margin-top: 70px;

    .box-06__wrapper {
      padding: 0 15px;

      h2 {
        color: $cBlack;
        font-size: 1.25rem;
        font-weight: 800;
        text-transform: uppercase;
      }

      p {
        color: $cBlack;
        font-size: 1.25rem;
        font-weight: 400;
        margin: 0;
      }

      .box-06__row {
        margin-top: 20px;
        display: flex;
        align-items: center;
        gap: 40px;

        a {
          line-height: 1;
          color: $cWhite;
          font-size: 15px;
          font-weight: 700;
          text-transform: uppercase;
          background: $cYellow;
          padding: 17px 15px 15px;
          display: block;
          letter-spacing: 1px;
        }
      }
    }
  }

  .box-07 {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 70px;
    background: $cLightYellow;

    .box-07__wrapper {
      padding: 70px 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));

      .box-07__tile {
        text-align: center;

        .title {
          color: $cYellow;
          font-size: 3rem;
          font-weight: 800;
        }

        .text {
          color: $cYellow;
          font-size: 2rem;
          font-weight: 400;
        }
      }
    }

    @media (min-width: 839px) and (max-width: 1109px) {
      .box-07__wrapper {
        .box-07__tile {
          &:nth-child(4) {
            grid-column: 1 / -1;
          }
        }
      }
    }
  }
}

.faq {
  max-width: 1020px;
  margin: auto;
  padding: 75px 0;

  h2 {
    color: $cBlack;
    font-size: 2rem;
    text-align: center;
    font-weight: 800;
    margin-top: 60px;
    margin-bottom: 60px;
  }

  #faq_accordion {
    h3 {
      padding: 15px;
      border: 1px solid #eeeeee;
      margin-bottom: 0;
      margin-top: 0;
      cursor: pointer;
    }

    .ui-accordion-content {
      padding: 15px;
      border: 1px solid #eeeeee;
      border-top: 0;
      border-bottom: 0;

      &:last-child {
        border-bottom: 1px solid #eeeeee;
      }

      &.ui-accordion-content-active {
        height: auto !important;
      }
    }
  }
}