* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  scroll-behavior: smooth;
}

.p-lr {
  padding-left: 108px;
  padding-right: 108px;
}

button {
  border: none;
  background: transparent;
  cursor: pointer;
}

header {
  width: 100%;
  background: #fff;

  .top-header {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .logo {
      width: 70px;
      min-width: 70px;
      display: flex;
      align-items: center;
      justify-content: center;

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

    .top-header-right {
      display: flex;
      align-items: center;
      gap: 32px;

      .roadSideAssistance {
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: 16px;
        line-height: 24px;
        font-weight: 400;
        color: #000;

        img {
          width: 24px;
          min-width: 24px;
        }
      }

      .headerPhone {
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: 16px;
        line-height: 24px;
        font-weight: 400;
        color: #000;

        img {
          width: 24px;
          min-width: 24px;
        }
      }

      .lang {
        display: flex;
        flex-direction: column;
        align-items: start;
        position: relative;

        .current-lang {
          background-color: #fff;
          border: 1px solid #dfdfdf;
          border-radius: 6px;
          padding: 6px 10px;
          display: flex;
          gap: 14px;
          align-items: center;
          cursor: pointer;

          span {
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: #272727;
          }

          img {
            width: 14px;
            transition: 0.35s ease-in-out;
          }
        }

        .other-langs {
          width: 100%;
          position: absolute;
          left: 0;
          top: 50px;
          display: flex;
          flex-direction: column;
          align-items: start;
          padding: 4px;
          border-radius: 8px;
          background: #fff;
          opacity: 0;
          visibility: hidden;
          z-index: 2;
          box-shadow: 1px 3px 4px 0px rgba(0, 0, 0, 0.25);
          transition: 0.35s ease-in-out;

          .lang-item {
            width: 100%;
            padding: 4px 8px;
            font-size: 15px;
            line-height: 22px;
            color: #272727;
            border-radius: 4px;
            transition: 0.35s ease-in-out;
            background: #fff;
            text-align: center;

            &:hover {
              background: #ecf5fb;
            }
          }
        }
      }

      .lang.active {
        .current-lang {
          img {
            transform: rotate(180deg);
          }
        }

        .other-langs {
          top: 40px;
          opacity: 1;
          visibility: visible;
        }
      }
    }
  }

  nav {
    position: relative;
    width: 100%;
    padding: 16px 0;

    .navbar-container {
      max-width: 1440px;
      width: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 32px;

      .nav-menuItem {
        .nav-menuItem-btn {
          display: flex;
          align-items: center;
          gap: 8px;
          text-transform: uppercase;
          text-decoration: none;
          color: #000;
          font-weight: 600;
          font-size: 16px;
          line-height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: transparent;
          border: none;
          cursor: pointer;

          img {
            transition: 0.3s ease-in-out;
            width: 14px;
            min-width: 14px;
            height: 14px;
          }
        }

        .nav-subMenu-wrapper {
          position: fixed;
          top: 126px;
          width: 100%;
          height: 0;
          opacity: 0;
          visibility: hidden;
          transition: 0.3s ease-in-out;
          z-index: 2;
          left: 0;
          background: rgba(0, 0, 0, 0.4);
          display: flex;
          flex-direction: column;
          align-items: start;

          .nav-model-categories-wrapper {
            width: 100%;
            background: #f8f8f8;
            border-bottom: 1px solid #e1e1e1;

            .nav-model-categories {
              max-width: 1440px;
              width: 100%;
              margin: 0 auto;

              .nav-model-category {
                color: #000;
                font-weight: 600;
                font-size: 16px;
                line-height: 24px;
                border: none;
                background: transparent;
                text-transform: uppercase;
                padding: 18px 0;
              }

              .nav-model-category.active {
                border-bottom: 3px solid #000;
              }
            }
          }

          .nav-models-wrapper {
            width: 100%;
            padding: 24px 0;
            background: #fff;
            overflow-y: auto;

            .nav-models {
              max-width: 1440px;
              width: 100%;
              margin: 0 auto;
              display: grid;
              grid-template-columns: repeat(4, 1fr);
              gap: 20px;

              .model-item {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;

                .modelImage {
                  width: 100%;
                  height: auto;

                  img {
                    width: 100%;
                  }
                }

                .modelBody {
                  margin-top: 20px;
                  display: flex;
                  flex-direction: column;
                  align-items: center;

                  .modelName {
                    color: #000;
                    font-weight: 500;
                    font-size: 24px;
                    line-height: 32px;
                    text-align: center;
                    margin-bottom: 12px;
                  }

                  p {
                    color: #b0b0b0;
                    font-weight: 400;
                    font-size: 14px;
                    text-align: center;
                    line-height: 20px;
                  }
                }
              }
            }
          }

          .nav-subMenu {
            width: 100%;
            padding: 24px 0;
            background: #fff;

            .nav-subMenu-inner {
              max-width: 1440px;
              width: 100%;
              margin: 0 auto;
              display: grid;
              grid-template-columns: repeat(4, 1fr);
              gap: 20px;

              .sub-menu-item {
                text-transform: uppercase;
                color: #000;
                font-weight: 600;
                font-size: 14px;
                line-height: 20px;
              }
            }
          }
        }
      }

      .nav-menuItem.active {
        .nav-menuItem-btn {
          img {
            transform: rotate(180deg);
          }
        }

        .nav-subMenu-wrapper {
          height: calc(100% - 126px);
          opacity: 1;
          visibility: visible;
        }
      }

      .nav-link {
        text-transform: uppercase;
        color: #000;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}

.home-hero-swiper {
  width: 100%;
  height: calc(100svh - 126px);

  .home-hero-item {
    width: 100%;
    height: 100%;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      filter: brightness(60%);
    }

    .content {
      padding-top: 100px;
      padding-bottom: 100px;
      max-width: 1440px;
      width: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: start;
      height: 100%;

      .hero-title {
        color: #fff;
        font-weight: 500;
        font-size: 60px;
        line-height: 72px;
        text-align: start;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 2;
      }

      p {
        margin-top: 20px;
        color: #fff;
        font-weight: 400;
        font-size: 48px;
        line-height: 56px;
        text-align: start;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 2;
      }

      .hero-link {
        max-width: 312px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 12px;
        background: #000;
        color: #fff;
        font-weight: 400;
        font-size: 20px;
        margin-top: auto;
        transition: 0.35s ease-in-out;
        cursor: pointer;
        text-decoration: none;
        text-transform: uppercase;
        border: 1px solid transparent;

        &:hover {
          border-color: #000;
          background: #fff;
          color: #000;
        }
      }
    }
  }

  .swiper-button-next,
  .swiper-button-prev {
    width: 70px;
    height: 70px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 100px;

    &::after {
      --swiper-navigation-size: 24px;
      color: #fff;
    }
  }

  .swiper-pagination {
    bottom: 20px;
    width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    background-color: #4a4a4a;
    padding: 10px 15px;
    border-radius: 100px;
    gap: 8px;

    .swiper-pagination-bullet {
      width: 12px;
      height: 12px;
      background: #fff;
      opacity: 1;
      margin: 0;
    }

    .swiper-pagination-bullet-active {
      background: #000;
    }
  }
}

.sectionNav {
  width: 100%;
  padding: 24px 0;
  background: #fff;
  border-bottom: 1px solid #f2f2f2;
  position: sticky;
  top: 0;
  z-index: 10;

  .sectionNavWrapper {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;


    .swiper-wrapper {
      display: flex;
      align-items: center;
    }

    .swiper-slide {
      width: 200px;
      display: flex;
    }

    .sectionNavItem {
      transition: color 0.35s ease-in-out;
      display: flex;
      align-items: center;
      text-align: center;
      position: relative;
      text-decoration: none;
      color: #aaa;
      font-weight: 700;
      font-size: 16px;
      line-height: 24px;
      text-transform: uppercase;
      border-bottom: 2px solid transparent;
      padding: 4px 8px;
    }

    .sectionNavItem.active {
      color: #000;
      border-color: #000;
    }
  }
}


.homeSection {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;

  .sectionItem {
    height: 100svh;
    width: 100%;
    position: relative;

    img,
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(80%);
    }

    .content {
      position: absolute;
      bottom: 40px;
      max-width: 1440px;
      width: 100%;
      left: 50%;
      transform: translateX(-50%);

      .content-title {
        color: #fff;
        font-weight: 500;
        font-size: 60px;
        line-height: 45px;
        text-align: start;
        text-transform: uppercase;
      }

      p {
        margin-top: 20px;
        color: #fff;
        font-weight: 400;
        font-size: 48px;
        line-height: 56px;
        text-align: start;
        text-transform: uppercase;
      }
    }
  }

  .homeModels-container {
    margin: 60px auto 0;
    width: 100%;
    max-width: 1440px;

    .sectionTitle {
      font-size: 32px;
      line-height: 48px;
      color: #000;
      font-weight: 500;
      text-align: center;
      text-transform: uppercase;
    }

    .homeModels {
      margin-top: 48px;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;

      .model-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid #f2f2f2;
        padding: 16px;

        .modelImage {
          width: 100%;
          height: auto;

          img {
            width: 100%;
          }
        }

        .modelBody {
          margin-top: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;

          .modelName {
            color: #000;
            font-weight: 500;
            font-size: 24px;
            line-height: 32px;
            text-align: center;
            margin-bottom: 12px;
          }

          p {
            color: #222222;
            font-weight: 400;
            font-size: 16px;
            text-align: center;
            line-height: 24px;
          }
        }
      }
    }
  }

  .homeNews-container {
    margin: 60px auto 100px;
    width: 100%;
    max-width: 1440px;
    position: relative;

    .sectionTitle {
      font-size: 32px;
      line-height: 48px;
      color: #000;
      font-weight: 500;
      text-align: center;
      text-transform: uppercase;
    }

    .homeNews-swiper {
      width: 100%;
      margin-top: 48px;
      position: initial;

      .news-item {
        width: 343px;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid #f2f2f2;
        padding: 16px;

        .newsImage {
          width: 100%;
          height: 240px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .newsBody {
          margin-top: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;

          .newsName {
            color: #000;
            font-weight: 500;
            font-size: 18px;
            line-height: 28px;
            text-align: start;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            -webkit-box-orient: vertical;
          }

          p {
            display: flex;
            align-items: center;
            margin-top: 24px;
            justify-content: center;
            gap: 8px;
            text-transform: uppercase;
            font-size: 16px;
            line-height: 24px;
            font-weight: 500;
            color: #000;

            svg {
              width: 16px;
              height: 16px;
              min-width: 16px;
            }
          }
        }
      }

      .swiper-button-next,
      .swiper-button-prev {
        width: 36px;
        height: 36px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 100px;

        &::after {
          --swiper-navigation-size: 14px;
          color: #fff;
        }
      }

      .swiper-button-next {
        right: 20px;
      }

      .swiper-button-prev {
        left: 20px;
      }
    }
  }
}

footer {
  width: 100%;
  background: #222;
  padding-top: 100px;

  .footer-container {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;

    .footer-top {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px 30px;

      .footer-section {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 16px;

        h2 {
          a {
            color: #f3f3f3;
            font-weight: 700;
            font-size: 18px;
            text-align: start;
            line-height: 28px;
          }
        }

        .sectionLinks {
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 12px;

          a {
            color: #c9c9c9;
            font-weight: 500;
            font-size: 18px;
            text-align: start;
            line-height: 28px;
          }
        }
      }
    }

    .privacy-policy {
      margin-top: 100px;
      font-size: 16px;
      line-height: 24px;
      font-weight: 500;
      color: #fff;
    }

    .footer-bottom {
      margin-top: 20px;
      padding: 20px 0;
      width: 100%;
      border-top: 1px solid #fff;

      p {
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        color: #fff;
      }
    }
  }
}

.modelInnerHero {
  width: 100%;
  position: relative;
  height: 400px;

  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .content {
    max-width: 1440px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);

    .hero-title {
      color: #fff;
      font-weight: 500;
      font-size: 48px;
      line-height: 56px;
      text-align: start;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -webkit-line-clamp: 2;
    }

    p {
      margin-top: 20px;
      color: #fff;
      font-weight: 400;
      font-size: 32px;
      line-height: 44px;
      text-align: start;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -webkit-line-clamp: 2;
    }
  }
}

.modelInnerSection {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;

  .videoSectionContainer {
    max-width: 1440px;
    width: 100%;
    margin: 40px auto 0;

    .videoSection {
      padding: 60px 108px;
      background-color: #fafafa;
      display: flex;
      flex-direction: column;
      align-items: center;

      .sectionTitle {
        font-size: 48px;
        line-height: 56px;
        text-align: center;
        font-weight: 500;
        color: #000;
      }

      video {
        margin-top: 40px;
        max-width: 900px;
        height: 100%;
        object-fit: contain;
      }
    }
  }

  .designSectionContainer {
    max-width: 1440px;
    width: 100%;
    margin: 40px auto 0;

    .designSection {
      padding: 60px;
      background-color: #fafafa;
      display: flex;
      flex-direction: column;
      align-items: center;

      .sectionTitle {
        font-size: 48px;
        line-height: 56px;
        text-align: center;
        font-weight: 500;
        color: #000;
      }

      .designSectionInner {
        margin-top: 40px;
        display: flex;
        align-items: center;
        gap: 40px;

        .designSectionImages {
          max-width: 600px;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 32px;

          .designImg {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

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

          .colorTabs {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;

            .colortabItem {
              padding: 4px;
              border: 2px solid transparent;
              border-radius: 100px;
              display: flex;
              align-items: center;
              justify-content: center;
              width: 40px;
              height: 40px;
              min-width: 40px;
              background: transparent;
              cursor: pointer;

              span {
                width: 100%;
                height: 100%;
                border-radius: 100px;
              }
            }

            .colortabItem.active {
              border-color: #000;
            }
          }
        }

        .designSectionTitle {
          line-height: 24px;
          color: #404040;
          font-size: 16px;
          font-weight: 400;
        }
      }
    }
  }

  .interiorSectionContainer {
    max-width: 1440px;
    width: 100%;
    margin: 100px auto 0;

    .interiorSection {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .sectionTitle {
        font-size: 48px;
        line-height: 56px;
        text-align: center;
        font-weight: 500;
        color: #000;
      }

      .interierImages {
        margin-top: 40px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;

        .imterierImg {
          width: 100%;
          height: 340px;
          display: flex;
          flex-direction: column;
          align-items: center;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }

  .comfortSectionContainer {
    max-width: 1440px;
    width: 100%;
    margin: 100px auto 0;

    .comfortSection {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .sectionTitle {
        font-size: 48px;
        line-height: 56px;
        text-align: center;
        font-weight: 500;
        color: #000;
      }

      .comfortCarts {
        margin-top: 40px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;

        .comfortCart {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 16px;

          .cartImg {
            width: 100%;
            height: 280px;
            display: flex;
            flex-direction: column;
            align-items: center;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .cartTitle {
            font-size: 16px;
            line-height: 24px;
            font-weight: 500;
            color: #000;
          }
        }
      }
    }
  }

  .safetySectionContainer {
    max-width: 1440px;
    width: 100%;
    margin: 100px auto;

    .safetySection {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .sectionTitle {
        font-size: 48px;
        line-height: 56px;
        text-align: center;
        font-weight: 500;
        color: #000;
      }

      .safetyCarts {
        margin-top: 40px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;

        .safetyCart {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 16px;

          .cartImg {
            width: 100%;
            height: 240px;
            display: flex;
            flex-direction: column;
            align-items: center;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .cartTitle {
            font-size: 16px;
            line-height: 24px;
            font-weight: 500;
            color: #000;
          }
        }
      }
    }
  }
}

.available_cars_container {
  max-width: 1440px;
  width: 100%;
  margin: 40px auto 0;

  .title {
    color: #000;
    font-weight: 500;
    font-size: 42px;
    line-height: 54px;
    text-align: start;
    text-transform: uppercase;
  }

  .available_cars_categories {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin-top: 60px;
    width: 100%;

    .model-item {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .modelImage {
        width: 100%;
        height: auto;

        img {
          width: 100%;
        }
      }

      .modelBody {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .modelName {
          color: #000;
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          text-align: center;
        }
      }
    }
  }

  .available_cars {
    margin-top: 60px;
    display: flex;
    align-items: start;
    gap: 24px;

    .filter {
      min-width: 280px;
      width: 280px;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 24px;

      .filter-box {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 12px;
        width: 100%;
        padding-bottom: 24px;
        border-bottom: 1px solid #aaa;

        .filter-btn {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          color: #000;
          font-weight: 500;
          font-size: 18px;
          line-height: 24px;
          text-align: left;

          img {
            width: 16px;
            height: 16px;
            transition: 0.3s ease-in-out;
          }
        }

        .filter-list {
          width: 100%;
          display: none;
          flex-direction: column;
          align-items: start;
          gap: 12px;

          .filter-item {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 12px;

            input {
              width: 18px;
              height: 18px;
            }

            label {
              color: #000;
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              text-align: left;
            }
          }
        }

        .filter-colors {
          width: 100%;
          display: none;
          grid-template-columns: repeat(8, 1fr);
          gap: 12px 16px;

          .color-item {
            width: 100%;
            height: 21px;
            border-radius: 100px;
            padding: 2px;
            position: relative;

            input {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              opacity: 0;
              z-index: 2;
            }
          }
        }

        &:last-child {
          padding-bottom: 0;
          border-bottom: none;
        }
      }

      .filter-box.active {
        .filter-btn {
          img {
            transform: rotate(180deg);
          }
        }

        .filter-list {
          display: flex;
        }

        .filter-colors {
          display: grid;
        }
      }
    }

    .all_available_cars {
      width: calc(100% - 280px);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;

      .card-card {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        padding: 16px;
        transition: 0.3s ease-in-out;

        .card-img {
          width: 100%;

          img {
            width: 100%;
          }
        }

        .card-body {
          display: flex;
          flex-direction: column;
          align-items: start;
          width: 100%;
          margin-top: 12px;

          .carModel {
            font-size: 20px;
            line-height: 28px;
            font-weight: 400;
            color: #000;
          }

          .card-body-head {
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: space-between;
            margin-top: 16px;

            p {
              font-size: 14px;
              line-height: 20px;
              font-weight: 400;
              color: #999;
            }
          }

          .stock {
            margin-top: 12px;
            font-size: 14px;
            line-height: 20px;
            font-weight: 500;
            color: #000;
          }

          .price {
            margin-top: 16px;
            font-size: 18px;
            line-height: 28px;
            font-weight: 500;
            color: #000;
          }
        }

        &:hover {
          box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.25);
        }
      }
    }
  }
}

.test-drive-head {
  width: 100%;
  height: 500px;
  position: relative;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .test-drive-hero {
    max-width: 1440px;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100px;
    display: flex;
    align-items: center;
    justify-content: start;

    .content-title {
      text-align: start;
      font-size: 40px;
      line-height: 45px;
      max-width: 300px;
      color: #fff;
    }
  }
}

.test-drive-container {
  margin: 100px auto;
  max-width: 1440px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  h2 {
    font-size: 32px;
    line-height: 48px;
    font-weight: 500;
    color: #000;
    text-transform: uppercase;
  }

  form {
    margin-top: 60px;
    max-width: 800px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 32px;

    .form-item {
      width: 100%;

      input,
      select {
        border-radius: 0;
        width: 100%;
        border: 1px solid #dcdee2;
        cursor: pointer;
        padding: 18px 12px;
        width: 100%;
        font-size: 16px;
        line-height: 24px;
        color: #000;
        font-weight: 400;
      }
    }

    .acceptTerms {
      display: flex;
      align-items: center;
      gap: 16px;

      input {
        width: 24px;
        height: 24px;
      }

      label {
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        color: #000;
      }
    }

    .sendForm {
      margin: 20px auto 0;
      max-width: 300px;
      width: 100%;
      background: #000;
      text-align: center;
      color: #fff;
      padding: 12px;
      font-size: 16px;
      line-height: 24px;
    }
  }
}

.guarantee-head {
  width: 100%;
  height: 600px;
  position: relative;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .guarantee-hero {
    max-width: 1440px;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px !important;
    display: flex;
    align-items: center;
    justify-content: start;

    .content-title {
      text-align: start;
      font-size: 48px;
      line-height: 45px;
      max-width: 400px;
      color: #fff;
    }
  }
}

.guarantee-container {
  max-width: 1440px;
  width: 100%;
  margin: 40px auto;

  .guarantee-main {
    width: 100%;
    display: flex;
    align-items: start;

    .guarantee-main-img {
      width: 600px;
      min-width: 600px;

      img {
        width: 100%;
      }
    }

    .guarantee-main-description {
      width: 100%;

      p {
        font-size: 16px;
        line-height: 24px;
        color: #000;
        font-weight: 400;
      }
    }
  }

  .guarantee-common-description {
    margin-top: 20px;
    width: 100%;

    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: 28px;
      line-height: 40px;
      font-weight: 500;
      color: #000;
    }

    p {
      font-size: 16px;
      line-height: 24px;
      color: #000;
      font-weight: 400;
    }
  }
}

.repairRules-head {
  width: 100%;
  height: 500px;
  position: relative;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(60%);
  }

  .repairRules-hero {
    max-width: 1440px;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: start;

    .content-title {
      text-align: start;
      font-size: 40px;
      line-height: 45px;
      max-width: 500px;
      color: #fff;
    }
  }
}

.repairRules-container {
  max-width: 1440px;
  width: 100%;
  margin: 40px auto 100px;

  .repairRules-description {
    margin: 0 auto;
    width: 100%;
    max-width: 700px;

    p {
      font-size: 16px;
      line-height: 24px;
      color: rgba(0, 0, 0, 0.7);
      font-weight: 400;
      text-align: center;
    }
  }

  .reglamenets {
    margin-top: 48px;

    .reglament-title {
      font-size: 32px;
      line-height: 40px;
      font-weight: 500;
      color: #000;
      text-align: center;
    }

    .reglament-boxes {
      margin-top: 48px;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;

      .reglament-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        border: 1px solid #eee;
        padding: 20px;

        .boxImg {
          width: 100%;
          height: auto;

          img {
            width: 100%;
          }
        }

        .modelName {
          margin-top: 12px;
          font-size: 24px;
          line-height: 32px;
          font-weight: 700;
          color: #000;
          text-align: left;
          margin-bottom: 36px;
        }

        .reglamentLinks {
          margin-top: 20px;
          display: flex;
          flex-direction: column;
          align-items: start;
          width: 100%;
          gap: 14px;
          margin-top: auto;

          .reglamentLink {
            color: #000;
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
          }
        }
      }
    }
  }
}

.about-head {
  width: 100%;
  height: 500px;
  position: relative;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(80%);
  }

  .about-hero {
    max-width: 1440px;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: start;

    .content-title {
      text-align: start;
      font-size: 40px;
      line-height: 45px;
      max-width: 500px;
      color: #fff;
    }
  }
}

.about-container {
  max-width: 1440px;
  width: 100%;
  margin: 100px auto;
  gap: 60px;
  display: flex;
  flex-direction: column;
  align-items: start;

  .about-item {
    display: flex;
    align-items: center;
    gap: 40px;
    width: 100%;

    .about-content {
      max-width: 700px;
      width: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 20px;

      .about-year {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
        color: #d6d6d6;
        font-weight: 600;
        font-size: 220px;
        line-height: 257px;
      }

      .about-title {
        font-size: 24px;
        line-height: 36px;
        color: #000;
        font-weight: 500;
      }

      .about-description {
        width: 100%;
        font-size: 16px;
        line-height: 24px;
        color: rgba(0, 0, 0, 0.8);
        font-weight: 400;
      }
    }

    .about-img {
      min-width: 500px;
      width: 500px;

      img {
        width: 100%;
      }
    }
  }
}

.blogs-container {
  max-width: 1440px;
  width: 100%;
  margin: 60px auto;

  .title {
    font-size: 40px;
    line-height: 60px;
    color: #000;
    font-weight: 500;
    text-align: center;
  }

  .all-blogs {
    margin-top: 48px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;

    .blog-card {
      width: 100%;
      border: 1px solid #eee;
      display: flex;
      flex-direction: column;
      padding: 20px;
      position: relative;
      text-decoration: none;

      .cardImg {
        width: 100%;
        height: 200px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }

    .blogName {
      margin-top: 32px;
      font-size: 24px;
      line-height: 32px;
      font-weight: 500;
      color: #000;
    }

    .more {
      margin: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #000;
    }
  }
}

.blogs-detail-container {
  max-width: 1440px;
  width: 100%;
  margin: 60px auto;

  .detailImg {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;

    img {
      max-width: 100%;
    }
  }

  .title {
    font-size: 40px;
    line-height: 60px;
    color: #000;
    font-weight: 500;
    text-align: start;
    margin-top: 40px;
  }

  .blog-content {
    margin-top: 40px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #000;

    ul {
      padding-left: 18px;
    }
  }
}

.contact-head {
  width: 100%;
  height: 600px;
  position: relative;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(80%);
  }

  .contact-hero {
    max-width: 1440px;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 60px;
    display: flex;
    align-items: center;
    justify-content: start;

    .content-title {
      text-align: start;
      font-size: 48px;
      line-height: 45px;
      max-width: 400px;
      color: #fff;
    }
  }
}

.contact-container {
  width: 100%;
  margin-top: 100px;

  .contact-content {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;

    .contact-text {
      font-size: 20px;
      line-height: 30px;
      color: #000;
      font-weight: 400;
    }

    .contact-phone {
      margin-top: 60px;
      display: flex;
      gap: 4px;
      flex-wrap: wrap;

      .phone_number {
        font-size: 20px;
        line-height: 30px;
        color: #000;
        font-weight: 600;
        text-decoration: underline;
      }

      p {
        font-size: 20px;
        line-height: 30px;
        color: #000;
        font-weight: 600;
      }
    }
  }

  .contact-form {
    margin-top: 100px;
    padding-top: 40px;
    padding-bottom: 40px;
    background: #f8f8f8;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .content-form-title {
      font-size: 32px;
      line-height: 48px;
      font-weight: 600;
      color: #000;
      text-align: center;
    }

    form {
      margin-top: 40px;
      max-width: 650px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 40px;

      .form-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;

        label {
          font-size: 16px;
          line-height: 24px;
          font-weight: 500;
          color: #000;
        }

        input {
          border-radius: 0;
          width: 100%;
          border: 1px solid #dcdee2;
          cursor: pointer;
          padding: 18px 12px;
          width: 100%;
          font-size: 16px;
          line-height: 24px;
          color: #000;
          font-weight: 400;
        }
      }

      .acceptTerms {
        display: flex;
        align-items: center;
        gap: 16px;

        input {
          width: 24px;
          height: 24px;
        }

        label {
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #000;
        }
      }

      .sendForm {
        margin: 20px auto 0;
        max-width: 300px;
        width: 100%;
        background: #000;
        text-align: center;
        color: #fff;
        padding: 20px;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}

.news-container {
  max-width: 1440px;
  width: 100%;
  margin: 60px auto;

  .title {
    font-size: 40px;
    line-height: 60px;
    color: #000;
    font-weight: 500;
    text-align: center;
  }

  .all-news {
    margin-top: 48px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;

    .news-card {
      width: 100%;
      border: 1px solid #eee;
      display: flex;
      flex-direction: column;
      padding: 20px;
      position: relative;
      text-decoration: none;

      .cardImg {
        width: 100%;
        height: 200px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }

    .newsName {
      margin-top: 32px;
      font-size: 24px;
      line-height: 32px;
      font-weight: 500;
      color: #000;
    }

    .more {
      margin: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #000;
    }
  }
}

.news-detail-container {
  max-width: 1440px;
  width: 100%;
  margin: 60px auto;

  .detailImg {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;

    img {
      max-width: 100%;
    }
  }

  .title {
    font-size: 40px;
    line-height: 60px;
    color: #000;
    font-weight: 500;
    text-align: start;
    margin-top: 40px;
  }

  .news-content {
    margin-top: 40px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #000;

    ul {
      padding-left: 18px;
    }
  }
}

.model-detail-container {
  max-width: 1440px;
  width: 100%;
  margin: 60px auto;

  .modelFName {
    text-align: center;
    font-size: 40px;
    line-height: 60px;
    font-weight: 600;
    color: #000;
  }

  .model-detail {
    margin-top: 48px;
    display: flex;
    align-items: start;
    gap: 40px;
    width: 100%;

    .modelImg {
      width: 100%;
      height: auto;

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

    .model-detail-box {
      min-width: 415px;
      width: 415px;
      background: #f8f8f8;
      display: flex;
      flex-direction: column;
      gap: 8px;

      .modelName {
        font-weight: 500;
        font-size: 24px;
      }

      .year,
      .vin {
        font-weight: 500;
        font-size: 18px;
      }

      .price {
        font-weight: 500;
      }

      .more {
        text-decoration: underline;
      }
    }
  }

  .accordionItem {
    border-bottom: 1px solid #ddd;

    .accHead {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      border: none;
      background: transparent;
      cursor: pointer;
      padding: 15px 0;

      img {
        transition: transform 0.3s ease;
      }
    }

    .description {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
    }

    &.active {
      .accHead img {
        transform: rotate(180deg);
      }
    }
  }
}

@media only screen and (max-width:1250px) {
  .contact-head {
    width: 100%;
    height: 400px;
    position: relative;
  }

  .guarantee-head {
    width: 100%;
    height: 400px;
    position: relative;

  }

  .news-detail-container {
    .title {
      font-size: 38px;
      line-height: 50px;
      color: #000;
      font-weight: 500;
      text-align: start;
      margin-top: 40px;
    }
  }

  .modelInnerSection {
    & .safetySectionContainer {
      & .safetySection {
        .sectionTitle {
          font-size: 38px;
        }
      }
    }
  }

  .modelInnerSection {
    & .comfortSectionContainer {
      & .comfortSection {
        .sectionTitle {
          font-size: 38px;
        }
      }
    }
  }

  .modelInnerSection {
    & .designSectionContainer {
      & .designSection {
        .sectionTitle {
          font-size: 38px;
          line-height: 56px;
          text-align: center;
          font-weight: 500;
          color: #000;
        }
      }
    }
  }


  .guarantee-head {
    & .guarantee-hero {
      .content-title {
        text-align: start;
        font-size: 38px;
        line-height: 45px;
        max-width: 400px;
        color: #fff;
      }
    }
  }

  .repairRules-head {
    & .repairRules-hero {
      .content-title {
        text-align: start;
        font-size: 31px;
      }
    }
  }


  .modelInnerSection {
    & .interiorSectionContainer {
      & .interiorSection {
        .sectionTitle {
          font-size: 40px;
          line-height: 56px;
          text-align: center;
          font-weight: 500;
          color: #000;
        }
      }
    }
  }

  header {
    & nav {
      & .navbar-container {
        & .nav-menuItem {
          .nav-menuItem-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            text-transform: uppercase;
            text-decoration: none;
            color: #000;
            font-weight: 600;
            font-size: 14px;
            line-height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            cursor: pointer;
          }
        }
      }
    }
  }

  .blogs-container {
    .all-blogs {
      margin-top: 48px;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }
  }


  header {
    & nav {
      & .navbar-container {
        .nav-link {
          font-size: 14px;
        }
      }
    }
  }

  header {
    & nav {
      .navbar-container {
        max-width: 1440px;
        width: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: 18px;
      }
    }
  }

  .about-container {
    & .about-item {
      & .about-content {
        .about-year {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          z-index: -1;
          color: #d6d6d6;
          font-weight: 600;
          font-size: 161px;
          line-height: 257px;
        }
      }
    }
  }

  .test-drive-head {
    & .test-drive-hero {
      .content-title {
        text-align: start;
        font-size: 38px;
        line-height: 45px;
      }
    }
  }

  .about-container {
    & .about-item {
      .about-img {
        min-width: 450px;
        width: 450px;
      }
    }
  }

  .guarantee-container {
    & .guarantee-main {
      .guarantee-main-img {
        width: 500px;
        min-width: 500px;
      }
    }
  }

  .guarantee-container {
    & .guarantee-main {
      & .guarantee-main-description {
        p {
          font-size: 14px;
          line-height: 20px;
          color: #000;
          font-weight: 400;
        }
      }
    }
  }

  .news-container {
    .all-news {
      margin-top: 48px;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }
  }

  .repairRules-container {
    & .reglamenets {
      .reglament-boxes {
        margin-top: 48px;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
    }
  }

  .modelInnerHero {
    & .content {
      .hero-title {
        color: #fff;
        font-weight: 500;
        font-size: 32px;
        line-height: 25px;
      }
    }
  }

  .modelInnerHero {
    & .content {
      p {
        margin-top: 20px;
        color: #fff;
        font-weight: 400;
        font-size: 24px;
        line-height: 35px;
        text-align: start;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 2;
      }
    }
  }

  .repairRules-head {
    width: 100%;
    height: 400px;
    position: relative;
  }

  .test-drive-head {
    width: 100%;
    height: 400px;
    position: relative;
  }

  .about-head {
    width: 100%;
    height: 400px;
    position: relative;
  }

  .model-detail-container {
    .modelFName {
      text-align: center;
      font-size: 32px;
      line-height: 60px;
      font-weight: 600;
      color: #000;
    }
  }

  .modelInnerHero {
    width: 100%;
    position: relative;
    height: 305px;
  }

  .modelInnerSection {
    & .videoSectionContainer {
      & .videoSection {
        .sectionTitle {
          font-size: 34px;
        }
      }
    }
  }
}

@media only screen and (max-width:992px) {

  .top-header-right {
    display: none !important;
  }

  .news-detail-container {
    max-width: 1440px;
    width: 100%;
    margin: 20px auto;
  }

  .test-drive-head {
    & .test-drive-hero {
      .content-title {
        text-align: start;
        font-size: 30px;
        line-height: 45px;
      }
    }
  }

  .test-drive-container {
    h2 {
      font-size: 24px;
      line-height: 48px;
      font-weight: 500;
      color: #000;
      text-transform: uppercase;
    }
  }

  .test-drive-container {
    margin: 50px auto;
  }

  .test-drive-container {
    form {
      margin-top: 38px;
    }
  }

  .test-drive-head {
    .test-drive-hero {
      max-width: 1440px;
      width: 100%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 35px;
    }
  }

  .about-container {
    & .about-item {
      .about-img {
        min-width: 100%;
        width: 100% !important;
      }
    }
  }

  .news-detail-container {
    .title {
      font-size: 30px;
      line-height: 45px;
    }
  }

  .modelInnerSection {
    .safetySectionContainer {
      margin: 60px auto;
    }
  }

  .modelInnerSection {
    .interiorSectionContainer {
      margin: 60px auto 0;
    }
  }

  .contact-head {
    & .contact-hero {
      .content-title {
        text-align: start;
        font-size: 40px;
      }
    }
  }

  .contact-container {
    width: 100%;
    margin-top: 50px;
  }

  .contact-container {
    & .contact-content {
      .contact-phone {
        margin-top: 30px;
      }
    }
  }

  .contact-container {
    .contact-form {
      margin-top: 60px;
    }
  }

  .blogs-container {
    .title {
      font-size: 26px;
      line-height: 40px;
      color: #000;
      font-weight: 500;
      text-align: center;
    }
  }

  .blogs-detail-container {
    max-width: 1440px;
    width: 100%;
    margin: 20px auto;
  }

  .home-hero-swiper {
    & .home-hero-item {
      & .content {
        .hero-link {
          max-width: 212px;
          width: 100%;
        }
      }
    }
  }

  .home-hero-swiper {
    .swiper-pagination {
      padding: 8px 10px;
    }
  }

  .modelInnerSection {
    & .interiorSectionContainer {
      & .interiorSection {
        .sectionTitle {
          font-size: 32px;
          line-height: 56px;
          text-align: center;
          font-weight: 500;
          color: #000;
        }
      }
    }
  }

  .blogs-container {
    max-width: 1440px;
    width: 100%;
    margin: 0px auto;
  }

  .modelInnerHero {
    & .content {
      p {
        margin-top: 9px;
      }
    }
  }

  .repairRules-head {
    width: 100%;
    height: 305px;
    position: relative;
  }

  .guarantee-container {
    & .guarantee-main {
      .guarantee-main-img {
        width: 324px;
        min-width: 324px;
      }
    }
  }

  .guarantee-container {
    & .guarantee-main {
      & .guarantee-main-description {
        p {
          font-size: 14px;
          line-height: 17px;
          color: #000;
          font-weight: 400;
        }
      }
    }
  }

  .available_cars_container {
    .available_cars_categories {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      margin-top: 40px;
      width: 100%;
    }
  }

  .blogs-detail-container {
    .blog-content {
      margin-top: 10px;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #000;
    }
  }


  .available_cars_container {
    & .available_cars {
      .all_available_cars {
        width: calc(100% - 280px);
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }
    }
  }



  .blogs-detail-container {
    .title {
      font-size: 25px;
      line-height: 35px;
      color: #000;
      font-weight: 500;
      text-align: start;
      margin-top: 30px;
    }
  }

  .modelInnerSection {
    & .videoSectionContainer {
      & .videoSection {
        video {
          margin-top: 40px;
          max-width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
  }

  .blogs-container {
    .all-blogs {
      margin-top: 14px;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }
  }

  .about-container {
    .about-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 40px;
      width: 100%;
    }
  }

  header {
    & .top-header {
      .logo {
        width: 60px;
        min-width: 60px;
      }
    }
  }

  header {

    .navbar-container {
      display: none !important;
    }

    header {
      nav {
        position: relative;
        width: 100%;
        padding: 0;
      }
    }

    .hamburger-btn {
      display: flex !important;
      gap: 12px;
      align-items: center;

      .hamburger {
        position: relative;
        z-index: 1001;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .hamburger-icon {
          width: 27px;
          height: 2px;
          margin: 4px auto;
          background-color: #000000;
          transition: all 0.3s ease-in-out;
        }

      }

      &.menu-open .hamburger {
        position: fixed;
        top: 16px;
        right: 30px;
        z-index: 2000;
      }
    }
  }

  header {
    nav {
      position: relative;
      width: 100%;
      padding: 0 0;
    }
  }

  .about-head {
    width: 100%;
    height: 305px;
    position: relative;
  }

  .about-container {
    max-width: 1440px;
    width: 100%;
    margin: 50px auto;
  }


  .about-head {
    & .about-hero {
      .content-title {
        text-align: start;
        font-size: 24px;
        line-height: 30px;
        max-width: 500px;
        color: #fff;
      }
    }
  }

  .about-container {
    & .about-item {
      .about-content {
        max-width: 100%;
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 20px;
      }
    }
  }

  .header-responsive-wrapper {
    display: block !important;
    width: 100%;



    .mobile-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: #00000053;
      flex-direction: column;
      z-index: 1500;
      transform: translateX(-100%);
      opacity: 0;
      pointer-events: none;

      transition: transform 0.3s ease, opacity 0.3s ease;

      &.active {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
        overflow-y: auto;
      }

      .responsive-menu-list {
        overflow-y: auto;
        position: relative;
        width: 60%;
        height: 100%;
        background-color: #fff;
        padding: 24px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;

        .menu-header {
          display: flex;
          justify-content: space-between;
          align-items: center;

          img {
            width: 66px;
          }

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


            .close-btn {
              cursor: pointer;
              user-select: none;


            }

          }


        }

        .mobile-nav-list {
          width: 100%;
          padding: 40px 0 0;
          margin: 0;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          gap: 20px;
          position: relative;

          a {
            text-decoration: none;
            color: #000000;
            text-transform: uppercase;
            font-weight: 500;
            font-size: 18px;
          }



          .dropdown-mobile {
            .navbar {
              .nav-list {
                display: flex;
                flex-direction: column;
                gap: 40px;


              }
            }

            .dropdown {
              position: fixed;
              top: 0;
              left: 0;
              width: 60%;
              height: 100vh;
              background: white;
              z-index: 1001;
              transition: transform 0.3s ease, opacity 0.3s ease;
              transform: translateX(-100%);
              opacity: 0;
              pointer-events: none;
              overflow-y: auto;
              padding: 20px;
              box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1);
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              align-items: start;
              gap: 45px;


              &.active {
                transform: translateX(0);
                opacity: 1;
                pointer-events: all;
              }

              .menu-inside {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: start;
                gap: 30px;
              }

              .car-models {
                font-weight: 500;
                font-size: 24px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 20px;

                img {
                  width: 100%;
                  height: auto;
                  object-fit: cover;
                }

                p {
                  text-align: center;
                  font-size: 18px;
                  font-weight: 400;
                  color: #999;
                }
              }


            }

            .mobileMenuItem {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .downIcon {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;

                span {
                  text-transform: uppercase;
                  font-size: 18px;
                  font-weight: 500;
                  color: #000;
                }
              }
            }

            .menu {
              text-transform: uppercase;
              font-weight: 500;
              font-size: 20px;
              color: #000;
            }


          }

          .language {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 14px;

            .lang {
              text-decoration: none;
              color: #333;
              background-color: #EEEEEE;
              padding: 6px 9px;
              border-radius: 2px;
              transition: 300ms ease;

              &.active {
                background-color: #CEA534;
                color: #fff;
              }
            }

          }

          .about-menu,
          .publish-menu,
          .media-menu {
            display: flex;
            flex-direction: column;

            .menu-toggle {
              width: 154px;
              display: flex;
              align-items: center;
              justify-content: flex-start;
              gap: 10px;
              background-color: transparent;
              color: #000;
              font-size: 18px;
              border: none;
              cursor: pointer;
              padding: 10px 0;
              font-weight: 400;

              img {
                transition: all 0.3s ease;
                width: 12px;
                height: 12px;
              }

              &.active {
                color: #fff;
                background-color: #000;

                img {
                  filter: brightness(0) invert(1);
                  transform: rotate(180deg);
                }
              }
            }

            .menu-list {
              display: none;
              flex-direction: column;
              gap: 12px;
              border: 1px solid #333;
              width: 200px;
              margin-top: 10px;
              padding-left: 10px;

              a {
                font-size: 16px;
                color: #333;
                padding: 6px 0;

                &:hover {
                  color: #000;
                  font-weight: bold;
                }
              }

              &.active {
                display: flex;
              }
            }
          }
        }
      }
    }
  }

  .home-hero-swiper {
    & .home-hero-item {
      & .content {
        .hero-title {
          font-size: 35px;
          line-height: 45px;
        }

        p {
          font-size: 29px;
          line-height: 45px;
        }
      }
    }
  }

  .home-hero-swiper {

    .swiper-button-next,
    .swiper-button-prev {
      display: none;
    }
  }

  .home-hero-swiper {
    & .swiper-pagination {
      .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: #fff;
        opacity: 1;
        margin: 0;
      }
    }
  }


  .homeSection {
    & .sectionItem {
      & .content {
        .content-title {
          font-size: 24px;
          line-height: 24px;
        }
      }
    }
  }

  .available_cars_container {
    .title {
      color: #000;
      font-weight: 500;
      font-size: 30px;
      line-height: 20px;
    }
  }

  footer {
    width: 100%;
    background: #222;
    padding-top: 40px;
  }

  .homeSection {
    & .sectionItem {
      & .content {
        p {
          font-size: 20px;
          line-height: 45px;
        }
      }
    }
  }

  .homeSection {
    & .homeModels-container {
      .homeModels {
        margin-top: 48px;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }
    }
  }

  .repairRules-container {
    & .reglamenets {
      .reglament-boxes {
        margin-top: 48px;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }
    }
  }

  .modelInnerSection {
    & .videoSectionContainer {
      .videoSection {
        padding: 60px 20px;
        background-color: #fafafa;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }

  footer {
    & .footer-container {
      .footer-top {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 30px;
      }
    }
  }

  .contact-head {
    width: 100%;
    height: 305px;
    position: relative;
  }

  .contact-head {
    & .contact-hero {
      .content-title {
        text-align: start;
        font-size: 34px;
        line-height: 31px;
        max-width: 400px;
        color: #fff;
      }
    }
  }

  .model-detail-container {
    max-width: 1440px;
    width: 100%;
    margin: 20px auto;
  }

  .model-detail-container {
    .modelFName {
      text-align: center;
      font-size: 34px;
      line-height: 60px;
      font-weight: 600;
      color: #000;
    }
  }

  .model-detail-container {
    & .model-detail {
      .model-detail-box {
        min-width: 355px;
        width: 355px;
        background: #f8f8f8;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
    }
  }

  .p-lr {
    padding-left: 40px;
    padding-right: 40px;
  }

  .news-detail-container {
    .news-content {
      margin-top: 18px;
    }
  }

  .news-detail-container {
    .title {
      margin-top: 26px;
    }
  }

  .news-container {
    margin: 20px auto;
  }

  .news-container {
    .title {
      font-size: 34px;
      line-height: 60px;
      color: #000;
      font-weight: 500;
      text-align: center;
    }
  }

  .news-container {
    .all-news {
      margin-top: 24px;
    }
  }


}

@media only screen and (max-width:768px) {
  .p-lr {
    padding-left: 20px;
    padding-right: 20px;
  }

  .about-container {
    & .about-item {
      & .about-content {
        .about-year {
          font-weight: 600;
          font-size: 129px;
          line-height: 257px;
        }
      }
    }
  }

  .modelInnerSection {
    & .comfortSectionContainer {
      & .comfortSection {
        .sectionTitle {
          font-size: 30px;
        }
      }
    }
  }

  .modelInnerSection {
    & .safetySectionContainer {
      & .safetySection {
        .sectionTitle {
          font-size: 30px;
        }
      }
    }
  }

  .modelInnerSection {
    & .designSectionContainer {
      & .designSection {
        .sectionTitle {
          font-size: 30px;
          line-height: 42px;
        }
      }
    }
  }

  .modelInnerSection {
    & .videoSectionContainer {
      & .videoSection {
        .sectionTitle {
          font-size: 28px;
        }
      }
    }
  }



  .repairRules-head {
    width: 100%;
    height: 305px;
    position: relative;
  }

  .guarantee-head {
    width: 100%;
    height: 305px;
    position: relative;
  }

  .guarantee-head {
    .guarantee-hero {
      max-width: 1440px;
      width: 100%;
      position: absolute;
      left: 50%;
      bottom: 48px;
      transform: translateX(-50%);
      bottom: 27px;
    }
  }

  .guarantee-head {
    & .guarantee-hero {
      .content-title {
        text-align: start;
        font-size: 25px;
        line-height: 40px;
        max-width: 400px;
        color: #fff;
      }
    }
  }

  .available_cars_container {
    & .available_cars {
      .all_available_cars {
        width: calc(100% - 280px);
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 24px;
      }
    }
  }

  .test-drive-head {
    width: 100%;
    height: 305px;
    position: relative;
  }

  .test-drive-head {
    .test-drive-hero {
      max-width: 1440px;
      width: 100%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: start;
    }
  }

  .test-drive-head {
    & .test-drive-hero {
      .content-title {
        text-align: start;
        font-size: 30px;
        line-height: 40px;
        max-width: 300px;
        color: #fff;
      }
    }
  }

  .guarantee-container {
    .guarantee-main {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
    }
  }


  .guarantee-container {
    & .guarantee-main {
      .guarantee-main-img {
        width: 100%;
        min-width: 100%;
      }
    }
  }

  .model-detail-container {
    .model-detail {
      margin-top: 0;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 40px;
      width: 100%;
    }

    .model-detail-container {
      .modelFName {
        text-align: center;
        font-size: 30px;
        line-height: 45px;
        font-weight: 600;
        color: #000;
      }
    }
  }

  .model-detail-container {
    & .model-detail {
      .model-detail-box {
        min-width: 100%;
        width: 100%;
        background: #f8f8f8;
      }
    }
  }
}

@media only screen and (max-width:668px) {

  .blogs-container {
    .all-blogs {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 24px;
    }
  }


  .test-drive-container {
    margin: 24px auto;
  }

  .news-container {
    & .all-news {
      .newsName {
        margin-top: 32px;
        font-size: 20px;
      }
    }
  }

  .news-container {
    & .all-news {
      & .news-card {
        .cardImg {
          width: 100%;
          height: auto;
        }
      }
    }
  }

  .news-container {
    .all-news {
      margin-top: 48px;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 24px;
    }
  }

  .news-container {
    .all-news {
      margin-top: 22px;
    }
  }

  .modelInnerSection {
    & .interiorSectionContainer {
      & .interiorSection {
        & .interierImages {
          .imterierImg {
            width: 100%;
            height: 316px;
          }
        }
      }
    }
  }

  .available_cars_container {
    & .available_cars {
      & .all_available_cars {
        & .card-card {
          & .card-body {
            .card-body-head {
              margin-top: 0;
            }
          }
        }
      }
    }
  }

  .contact-container {
    & .contact-content {
      .contact-text {
        font-size: 18px;
      }
    }
  }

  .contact-container {
    & .contact-content {
      & .contact-phone {
        .phone_number {
          font-size: 18px;
        }
      }
    }
  }

  .contact-container {
    & .contact-content {
      & .contact-phone {
        p {
          font-size: 18px;
        }
      }
    }
  }

  .contact-container {
    & .contact-form {
      .content-form-title {
        font-size: 28px;
        line-height: 42px;
        font-weight: 600;
        color: #000;
        text-align: center;
      }
    }
  }

  .contact-container {
    & .contact-content {
      .contact-phone {
        margin-top: 26px;
      }
    }
  }

  .contact-container {
    .contact-form {
      margin-top: 44px;
    }
  }


  .available_cars_container {
    margin: 20px auto 0;
  }

  .available_cars_container {
    & .available_cars {
      & .all_available_cars {
        & .card-card {
          & .card-body {
            .price {
              margin-top: 16px;
              font-size: 16px;
            }
          }
        }
      }
    }
  }

  .blogs-detail-container {
    .title {
      font-size: 20px;
    }
  }

  .about-container {
    & .about-item {
      & .about-content {
        .about-title {
          font-size: 20px;
          line-height: 30px;
        }
      }
    }
  }

  .home-hero-swiper {
    & .home-hero-item {
      & .content {
        p {
          font-size: 16px;
          line-height: 45px;
        }
      }
    }
  }

  .home-hero-swiper {
    & .home-hero-item {
      & .content {
        .hero-link {
          font-size: 16px;
        }
      }
    }
  }

  .sectionNav {
    & .sectionNavWrapper {
      .sectionNavItem {
        font-size: 14px;
      }
    }
  }

  .homeSection {
    & .sectionItem {
      & .content {
        .content-title {
          font-size: 20px;
        }
      }
    }
  }

  .homeSection {
    & .sectionItem {
      & .content {
        p {
          font-size: 16px;
          line-height: 45px;
        }
      }
    }
  }

  .homeSection {
    & .sectionItem {
      & .content {
        p {
          margin-top: 4px;
        }
      }
    }
  }

  .homeSection {
    & .homeModels-container {
      .sectionTitle {
        font-size: 24px;
      }
    }
  }

  .homeSection {
    & .homeModels-container {
      & .homeModels {
        & .model-item {
          & .modelBody {
            .modelName {
              font-size: 18px;
            }
          }
        }
      }
    }
  }

  .homeSection {
    & .homeModels-container {
      & .homeModels {
        & .model-item {
          & .modelBody {
            p {
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  .homeSection {
    & .homeNews-container {
      & .homeNews-swiper {
        & .news-item {
          & .newsBody {
            .newsName {
              font-size: 16px;
            }
          }
        }
      }
    }
  }

  .homeSection {
    & .homeNews-container {
      & .homeNews-swiper {
        & .news-item {
          & .newsBody {
            p {
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  footer {
    & .footer-container {
      & .footer-top {
        & .footer-section {
          & .sectionLinks {
            a {
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  footer {
    & .footer-container {
      .privacy-policy {
        margin-top: 50px;
        font-size: 14px;
      }
    }
  }

  .homeSection {
    & .homeNews-container {
      & .homeNews-swiper {

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

  .homeSection {
    & .homeNews-container {
      .sectionTitle {
        font-size: 24px;
      }
    }
  }

  .home-hero-swiper {
    & .home-hero-item {
      & .content {
        .hero-title {
          font-size: 20px;
          line-height: 36px;
        }
      }
    }
  }

  .available_cars_container {
    & .available_cars {
      .filter {
        display: none;
      }

      .filter.active {
        display: block;
        min-width: 100%;
        width: 100%;

      }
    }
  }

  .blogs-container {
    & .all-blogs {
      & .blog-card {
        .cardImg {
          width: 100%;
          height: auto;
        }
      }
    }
  }


  .available_cars_container {
    .available_cars {
      margin-top: 0;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 24px;
    }
  }

  .contact-head {
    & .contact-hero {
      .content-title {
        text-align: start;
        font-size: 24px;
        line-height: 45px;
        max-width: 400px;
        color: #fff;
      }
    }
  }


  .contact-head {
    .contact-hero {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 34px;
    }
  }

  .blogs-container {
    .title {
      font-size: 20px;
      line-height: 40px;
      color: #000;
      font-weight: 500;
      text-align: center;
    }
  }

  .blogs-container {
    & .all-blogs {
      .blogName {
        margin-top: 28px;
        font-size: 18px;
      }
    }
  }

  .available_cars_container {
    .title {
      font-size: 24px;
      line-height: 20px;
    }
  }

  .dropdown {
    width: 100%;
    position: relative;
    display: inline-block !important;
    margin-top: 40px;


    .dropdown-toggle {
      width: 100%;
      background-color: #000;
      color: white;
      padding: 10px 16px;
      border: none;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      font-size: 16px;

      svg {
        transition: transform 0.3s ease;
      }
    }


    .dropdown-menu {
      display: none;
      position: absolute;
      top: 41px;
      left: 0;
      right: 0;
      background-color: white;
      min-width: 100%;
      height: 100vh;
      border-radius: 4px;
      z-index: 10;
      margin-top: 5px;
      padding: 20px;
      overflow-y: auto;


      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 3px;
      }
    }


    &.active {
      .dropdown-menu {
        display: block;
      }

      .dropdown-toggle svg {
        transform: rotate(180deg);
      }
    }

    .custom-filter-section {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-bottom: 20px;
      border-bottom: 1px solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .custom-filter-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        font-size: 16px;
        font-weight: 600;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;

        img {
          width: 16px;
          height: 16px;
          transition: transform 0.3s ease;
        }
      }

      .custom-filter-options,
      .custom-color-options {
        display: none;
        flex-direction: column;
        gap: 10px;
        padding-left: 8px;
      }


      &.is-active {
        .custom-filter-options {
          display: flex;
        }

        .custom-color-options {
          display: grid;
          grid-template-columns: repeat(9, 1fr);
          gap: 12px 16px;
        }

        .custom-filter-toggle img {
          transform: rotate(180deg);
        }
      }


      .custom-option-item {
        display: flex;
        align-items: center;
        gap: 8px;

        input[type="checkbox"] {
          width: 16px;
          height: 16px;
        }

        label {
          font-size: 14px;
          color: #333;
        }
      }


      .custom-color-item {
        width: 24px;
        height: 24px;
        border-radius: 999px;
        position: relative;
        cursor: pointer;

        input[type="radio"] {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
          cursor: pointer;
          z-index: 2;
        }
      }
    }
  }


  .available_cars_container {
    & .available_cars {
      .all_available_cars {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }
    }
  }

  .available_cars_container {
    .available_cars_categories {
      display: none !important;
    }
  }

  .modelInnerSection {
    & .designSectionContainer {
      & .designSection {
        .designSectionInner {
          margin-top: 40px;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 40px;
        }
      }
    }
  }

  .modelInnerSection {
    & .interiorSectionContainer {
      & .interiorSection {
        .interierImages {
          margin-top: 40px;
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          gap: 24px;
        }
      }
    }
  }

  .modelInnerSection {
    & .comfortSectionContainer {
      & .comfortSection {
        .comfortCarts {
          margin-top: 40px;
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          gap: 24px;
        }
      }
    }
  }

  .modelInnerSection {
    & .safetySectionContainer {
      & .safetySection {
        .safetyCarts {
          margin-top: 40px;
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          gap: 24px;
        }
      }
    }
  }

  .modelInnerHero {
    & .content {
      .hero-title {
        color: #fff;
        font-weight: 500;
        font-size: 24px;
      }
    }
  }

  .modelInnerHero {
    & .content {
      p {
        font-size: 16px;
        line-height: 28px;
      }
    }
  }

  .modelInnerSection {
    & .videoSectionContainer {
      & .videoSection {
        .sectionTitle {
          font-size: 24px;
          line-height: 50px;
          text-align: center;
          font-weight: 500;
          color: #000;
        }
      }
    }
  }

  .news-detail-container {
    .title {
      font-size: 30px;
      line-height: 60px;
      color: #000;
      font-weight: 500;
      text-align: start;
      margin-top: 20px;
    }
  }

  .news-detail-container {
    .news-content {
      margin-top: 16px;
      font-size: 16px;
    }
  }


  .news-container {
    .title {
      font-size: 30px;
      line-height: 60px;
      color: #000;
      font-weight: 500;
      text-align: center;
    }
  }

  .repairRules-container {
    & .reglamenets {
      .reglament-boxes {
        margin-top: 48px;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 24px;
      }
    }
  }

  .test-drive-container {
    form {
      margin-top: 24px;
    }
  }

}

@media only screen and (max-width:568px) {
  .homeSection {
    & .homeModels-container {
      .homeModels {
        margin-top: 48px;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 24px;
      }
    }
  }

  .news-container {
    .title {
      font-size: 26px;
      line-height: 45px;
    }
  }

  .news-detail-container {
    .title {
      font-size: 24px;
      line-height: 34px;
    }
  }

  .news-detail-container {
    .news-content {
      margin-top: 20px;
    }
  }

  .news-detail-container {
    .title {
      margin-top: 24px;
    }
  }

  .guarantee-container {
    & .guarantee-common-description {

      h2,
      h3,
      h4,
      h5,
      h6 {
        font-size: 24px;
        line-height: 40px;
        font-weight: 500;
        color: #000;
      }
    }
  }

  .modelInnerSection {
    & .comfortSectionContainer {
      & .comfortSection {
        .sectionTitle {
          font-size: 20px;
        }
      }
    }
  }

  .news-detail-container {
    max-width: 1440px;
    width: 100%;
    margin: 0px auto;
  }

  .modelInnerSection {
    & .safetySectionContainer {
      & .safetySection {
        .sectionTitle {
          font-size: 20px;
        }
      }
    }
  }

  .modelInnerSection {
    & .videoSectionContainer {
      & .videoSection {
        .sectionTitle {
          font-size: 20px;
        }
      }
    }
  }

  .modelInnerSection {
    & .designSectionContainer {
      & .designSection {
        .sectionTitle {
          font-size: 20px;
          line-height: 42px;
        }
      }
    }
  }

  .guarantee-container {
    max-width: 1440px;
    width: 100%;
    margin: 22px auto;
  }

  .contact-container {
    width: 100%;
    margin-top: 30px;
  }


  .available_cars_container {
    & .available_cars {
      & .filter {
        & .filter-box {
          .filter-btn {
            font-size: 16px;
          }
        }
      }
    }
  }

  .blogs-detail-container {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
  }

  .repairRules-head {
    & .repairRules-hero {
      .content-title {
        text-align: start;
        font-size: 24px;
        line-height: 34px;
        max-width: 500px;
        color: #fff;
      }
    }
  }

  .repairRules-container {
    & .reglamenets {
      .reglament-title {
        font-size: 24px;
        line-height: 34px;
      }
    }
  }

  .repairRules-container {
    & .reglamenets {
      & .reglament-boxes {
        & .reglament-box {
          .modelName {
            margin-top: 12px;
            font-size: 20px;
            line-height: 32px;
            margin-bottom: 24px;
          }
        }
      }
    }
  }

  .modelInnerSection {
    & .interiorSectionContainer {
      & .interiorSection {
        .sectionTitle {
          font-size: 20px;
          line-height: 56px;
          text-align: center;
          font-weight: 500;
          color: #000;
        }
      }
    }
  }

  .modelInnerSection {
    & .videoSectionContainer {
      .videoSection {
        padding: 60px 0;
      }
    }
  }


  .header-responsive-wrapper {
    & .mobile-menu {
      .responsive-menu-list {
        width: 100%;
      }
    }
  }

  .repairRules-head {
    .repairRules-hero {
      max-width: 1440px;
      width: 100%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 5px;
    }
  }

  .model-detail-container {
    .modelFName {
      text-align: center;
      font-size: 24px;
      line-height: 45px;
      font-weight: 600;
      color: #000;
    }
  }

  .available_cars_container {
    & .available_cars {
      .all_available_cars {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 24px;
      }
    }
  }

  .available_cars_container {
    .available_cars_categories {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      margin-top: 40px;
      width: 100%;
    }
  }

  .available_cars_container {
    .title {
      font-size: 18px;
    }
  }

  .test-drive-head {
    & .test-drive-hero {
      .content-title {
        text-align: start;
        font-size: 24px;
        line-height: 38px;
        max-width: 300px;
        color: #fff;
      }
    }
  }

  .test-drive-container {
    h2 {
      font-size: 20px;
      line-height: 38px;
      font-weight: 500;
      color: #000;
      text-transform: uppercase;
    }
  }

  .header-responsive-wrapper {
    & .mobile-menu {
      & .responsive-menu-list {
        & .mobile-nav-list {
          & .dropdown-mobile {
            & .mobileMenuItem {
              & .downIcon {
                span {
                  text-transform: uppercase;
                  font-size: 16px;
                  font-weight: 500;
                  color: #000;
                }
              }
            }
          }
        }
      }
    }
  }

  .header-responsive-wrapper {
    & .mobile-menu {
      & .responsive-menu-list {
        & .mobile-nav-list {
          a {
            text-decoration: none;
            color: #000000;
            font-size: 16px;
          }
        }
      }
    }
  }

  footer {
    & .footer-container {
      .privacy-policy {
        margin-top: 50px;
        font-size: 14px;
        line-height: 24px;
        font-weight: 500;
        color: #fff;
      }
    }
  }

  footer {
    & .footer-container {
      .footer-top {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 40px 30px;
      }
    }
  }
}