@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");

:root {
  --font-family: "Outfit", sans-serif;
  --red-color: #ef3c3a;
  --primary-color: #ff7101;
  --secondary-color: #696665;
  --white-color: #ffffff;
  --black-color: #000000;
  --half-black-color: #0000002c;
  --half-white-color: #ffffff5e;
  --gray-color: #ededed;
  --green-color: #40a800;
  --half-rad-color:#ef3d3a1e;
  /* --gray-color: #ffffff5e; */
}

/* ---------------------  Multi Section Styling Start --------------------- */
::-webkit-scrollbar {
  width: 12px; /* Consistent width */
  height: 12px; /* Consistent height for horizontal scrollbar */
}

::-webkit-scrollbar-track {
  background: var(
    --half-white-color
  ); /* Changed from transparent for visibility */
  border-radius: 8px; /* Retained rounded edges */
}

::-webkit-scrollbar-thumb {
  background: var(--red-color); /* Retained red color for thumb */
  border-radius: 8px; /* Retained rounded edges */
  border: 1px solid var(--gray-color); /* Retained border */
}

::-webkit-scrollbar-thumb:hover {
  background: var(
    --secondary-color
  ); /* Changed to secondary color for hover contrast */
}

* {
  scrollbar-color: var(--red-color) #00000000;
  scrollbar-width: thin;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none !important;
}

select:focus {
  outline: none;
  border: none;
}

input:focus {
  outline: none;
  border: none;
}

textarea:focus {
  outline: none;
  border: none;
}

.top-sec {
  align-items: center;
  justify-content: space-between;
  padding: 2vh 0vw;

  h3 {
    font-family: var(--font-family);
    color: var(--black-color);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -1px;
  }

  .view-all-btn {
    color: var(--black-color);
    border: 1px solid var(--gray-color);
    padding: 10px 30px;
    border-radius: 10px;
    font-family: var(--font-family);
    font-size: 14px;
    transition: 0.3s;
  }

  .view-all-btn:hover {
    background-color: var(--black-color);
    color: var(--white-color);
    transition: 0.3s;
  }
}

.car-sell-cart {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  /* border: 1px solid var(--gray-color) !important; */
  box-shadow: 0px 0px 10px 0px #00000028;

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

  .position-absolute {
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .stutas {
      background: var(--red-color);

      border-radius: 5px;
      padding: 5px 10px;
      font-family: var(--font-family);
      font-size: 10px;
      text-decoration: none;
      color: var(--white-color);
      letter-spacing: 1px;
      transition: 0.3s;
    }

    .images {
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 5px;
      padding: 3px 10px;
      font-family: var(--font-family);
      font-size: 10px;
      text-decoration: none;
      color: var(--white-color);
      transition: 0.3s;
    }

    .madeYear {
      background-color: var(--red-color);
      border-radius: 5px;
      padding: 4px 10px;
      font-family: var(--font-family);
      font-size: 10px;
      text-decoration: none;
      color: var(--white-color);
      transition: 0.3s;
    }
  }

  .content {
    padding: 10px 10px 10px 10px;

    .bodyType {
      color: var(--red-color);
      font-family: var(--font-family);
      font-size: 14px;
    }

    .model {
      color: var(--black-color);
      font-family: var(--font-family);
      line-height: 110%;
      font-size: 18px;
      padding: 10px 0px;
      font-weight: 600;
    }

    .options {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0px;
      font-size: 12px;
      color: var(--secondary-color);
      font-family: var(--font-family);
      text-align: center;

      i {
        font-size: 14px;
      }
    }

    .price-and-viewBtn {
      padding: 5px 0px;
      align-items: center;
      justify-content: space-between;

      .price {
        color: var(--green-color);
        font-family: var(--font-family);
        font-family: 16px;
        font-weight: 600;
        margin: 0;
      }

      .view-btn {
        border: 1px solid var(--black-color);
        padding: 5px 10px;
        border-radius: 10px;
        font-family: var(--font-family);
        font-size: 14px;
        color: var(--black-color);
        text-decoration: none;
        text-align: center;
        transition: 0.3s;
        width: 100px;
      }

      .view-btn:hover {
        background-color: var(--black-color);
        color: var(--white-color);
        transition: 0.3s;
      }
    }
  }
}

/* ---------------------------- Vier Button Start ---------------------------- */
.FE-view-btn {
  --color: var(--black-color);
  padding: 0vh 1vw;
  font-family: var(--font-family);
  display: inline-block;
  text-transform: capitalize;
  height: 2.6em;
  line-height: 2.5em;
  margin: 0;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--color);
  transition: color 0.3s;
  z-index: 1;
  font-size: 14px;
  border-radius: 5px;
  font-weight: 500;
  color: var(--color);
  text-decoration: none;
  text-align: center;

  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    background: var(--color);
    height: 250px;
    width: 400px;
    border-radius: 50%;
    top: 100%;
    left: 100%;
    transition: all 0.5s;
  }

  &:hover {
    color: var(--white-color);

    &::before {
      top: -40px;
      left: -50px;
    }
  }

  &:active::before {
    background: #3a0ca3;
    transition: background 0s;
  }
}
/* ---------------------------- Vier Button End ---------------------------- */

/* ----------------------------  Button start ---------------------------- */

.FE-btn,
.FE-btn *,
.FE-btn :after,
.FE-btn :before,
.FE-btn:after,
.FE-btn:before {
  border: 0 solid;
  box-sizing: border-box;
}

.FE-btn {
  -webkit-tap-highlight-color: transparent;
  background-color: var(--red-color);
  color: var(--white-color);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  text-transform: capitalize;
  border-radius: 10px;
  border: 2px solid var(--red-color);
  padding: 08px 30px;
  z-index: 0;
  text-decoration: none;
  display: inline-block;
  position: relative;
  overflow: hidden;

  .text-container {
    display: block;
    position: relative;
    z-index: 2;

    .text {
      color: var(--white-color) !important;
      position: relative;
      display: inline-block;
      z-index: 2;
    }
  }

  /* hover effects */
  &:hover {
    .text {
      animation: move-up-alternate 0.3s forwards;
      color: var(--red-color) !important;
    }

    &::before {
      --progress: 100%;
    }

    &::after {
      --progress: -102%;
    }
  }

  &::before,
  &::after {
    --skew: 0.2;
    background-color: var(--white-color);
    content: "";
    display: block;
    height: 102%;
    left: calc(-50% - 50% * var(--skew));
    pointer-events: none;
    position: absolute;
    top: -104%;
    transform: skew(calc(150deg * var(--skew))) translateY(var(--progress, 0));
    transition: transform 0.2s ease;
    width: 100%;
    z-index: 1;
  }

  &::after {
    --progress: 0%;
    left: calc(50% + 50% * var(--skew));
    top: 102%;
  }
}

/* Keyframes */
@keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(80%);
  }
  51% {
    transform: translateY(-80%);
  }
  to {
    transform: translateY(0);
  }
}
/* ----------------------------  Button end ---------------------------- */

/* --------------------- Multi Section Styling End --------------------- */

/* --------------------- Header Styling Start ---------------------  */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
  background-color: transparent;
  transition: all 0.3s ease;
  border-bottom: 1px solid var(--half-white-color);
}

header .container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  max-width: 1200px;
}

header .logo {
  width: 30%;
  max-width: 150px;
  display: block;
}

header .logo img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

header .logo img:hover {
  transform: scale(1.05);
}

header .hamburger {
  cursor: pointer;
  display: none;
  z-index: 1001;
}

header .hamburger input {
  display: none;
}

header .hamburger input:checked + svg {
  transform: rotate(-45deg);
}

header .hamburger input:checked + svg .line-top-bottom {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42;
}

header .hamburger svg {
  height: 35px;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

header .hamburger svg .line {
  fill: none;
  stroke: var(--white-color);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

header .hamburger svg .line-top-bottom {
  stroke-dasharray: 12 63;
}

header .nav {
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

header .nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

header .nav ul .responsive-sec {
  display: none;
}

header .nav ul li {
  margin: auto 15px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: relative;
}

header .nav ul li a {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  color: var(--white-color);
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  transition: color 0.3s ease;
}

header .nav ul li a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--red-color);
  transition: width 0.3s ease;
  z-index: -1;
}

header .nav ul li a:hover::before,
header .nav ul li a.active::before {
  width: 100%;
}

header .nav ul li a:hover,
header .nav ul li a.active {
  color: var(--red-color);
}

/* Scrolled state */
header.scrolled {
  background-color: var(--white-color);
  border-bottom: 1px solid var(--half-black-color);
  padding: 10px 0;
}

header.scrolled .hamburger svg .line {
  stroke: var(--black-color) !important;
}

header.scrolled .nav ul li a {
  color: var(--black-color) !important;
}

/* Mobile styles */
@media (max-width: 768px) {
  header .hamburger {
    display: block !important;
  }

  header .nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    max-width: 300px;
    height: 70vh;
    background-color: var(--white-color);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 5vh 5px;
    overflow-y: auto; /* Enable scrolling for the menu */
  }

  header .nav.active {
    right: 0;
  }

  header .nav ul {
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 20px;
  }

  header .nav ul .responsive-sec {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    width: 100%;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
  }

  header .nav.active ul .responsive-sec {
    opacity: 1;
    transform: translateY(0);
  }

  header .nav ul .responsive-sec img {
    width: 120px;
    height: auto;
    object-fit: contain;
    margin-bottom: 20px;
  }

  header .nav ul .responsive-sec.icon {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 20px;
  }

  header .nav ul .responsive-sec.icon a {
    color: var(--red-color) !important;
    margin: 0 10px;
    font-size: 18px;
  }

  header .nav ul li {
    margin: 15px 0 !important;
    width: 100%;
    text-align: center;
  }

  header .nav ul li a {
    color: var(--black-color) !important;
    font-size: 18px;
    width: 100%;
    display: block;
  }

  header.scrolled .hamburger svg .line {
    stroke: var(--black-color) !important;
  }
}

@media (max-width: 480px) {
  header {
    padding: 10px 0;
  }

  header .logo {
    width: 20%;
    max-width: 100px;
  }

  header .hamburger svg .line {
    stroke: var(--black-color) !important;
  }

  header .nav ul .responsive-sec {
    width: 100%;
    text-align: center;
    margin-bottom: 25px;
  }
  header .nav ul li {
    width: 100px;
  }
}
.white-background {
  header {
    .nav {
      ul {
        li {
          a {
            color: #000000;

            &:hover {
              color: var(--red-color);
            }
          }
          .active {
            color: var(--red-color);
          }
        }
      }
    }
  }
}

/* --------------------- Header Styling End ---------------------  */
/* --------------------- Home Section Styling Start ---------------------  */
.Home-section {
  .main-slider {
    position: relative;
    /* overflow-x: hidden !important; */

    .swiper-wrapper {
      .swiper-slide {
        height: 100dvh;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        align-items: center;
        .container {
          z-index: 100;

          .model-name {
            font-family: var(--font-family);
            font-size: 60px;
            color: var(--white-color);
            font-weight: 400 !important;
          }

          .Feature-sec {
            padding: 2vh 0vw;
            align-items: center;
            gap: 0vh 1vw;

            h6 {
              font-family: var(--font-family);
              color: var(--white-color);
              font-size: 18px;
              font-weight: 400 !important;
              margin: 0;

              i {
                font-size: 22px;
              }
            }
          }
        }
      }

      .swiper-slide::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
      }
    }

    .position-absolute {
      padding: 1vh 10px;
      object-fit: cover;
      background-color: var(--white-color);
      border-radius: 15px;
      z-index: 100 !important;
      bottom: 50px;
      left: 50%;
      transform: translateX(-50%);

      form {
        margin: auto;
        padding: 20px 5px;

        > .row {
          padding: 0;
          margin: auto;

          > div {
            display: inline-block !important;
            width: 24%;
            padding: 2px 10px;
            margin: auto;

            label {
              margin: 5px 0px;
              padding: 0 5px;
              font-family: var(--font-family);
              color: var(--black-color);
              font-size: 16px;
            }

            select {
              width: 100%;
              padding: 12px 5px;
              border-radius: 10px;
              border: 1px solid var(--half-black-color);
              font-family: var(--font-family);
              font-size: 16px;
              color: var(--secondary-color);
              background-color: var(--white-color);
              appearance: none;
              -webkit-appearance: none;
              background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23696665' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
              background-repeat: no-repeat;
              background-position: right 15px center;
              background-size: 16px;
              cursor: pointer;
              transition: border-color 0.2s ease;
            }
          }
        }

        div {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0;

          button {
            display: block;
            background-color: var(--red-color);
            color: var(--white-color);
            padding: 7px 5px;
            text-align: center;
            border-radius: 10px;
            font-family: var(--font-family);
            font-size: 16px;
            width: 180px;
            font-weight: 500;
            letter-spacing: 1px;
            border: 2px solid var(--red-color);
            transition: 0.3s ease;
          }

          button:hover {
            background-color: var(--white-color);
            color: var(--red-color);
          }
        }
      }
    }
  }

  .second-sec {
    padding: 5vh 0vw;

    .container {
      .nav-tabs {
        li {
          .nav-link {
            color: var(--secondary-color);
            font-family: var(--font-family);
            border: none !important;
            box-shadow: none !important;
            outline: none !important;
            background: transparent !important;
            transition: none !important;

            &:hover,
            &:focus,
            &:active {
              color: var(--black-color);
              border: none !important;
              box-shadow: none !important;
              outline: none !important;
              background: transparent !important;
              transform: none !important;
            }

            &.active {
              color: var(--black-color);
              border: none !important;
              border-bottom: 2px solid var(--red-color) !important;
              background: transparent !important;
              box-shadow: none !important;
            }
          }

          &:hover,
          &:focus,
          &:active {
            color: var(--black-color);
            box-shadow: none !important;
            outline: none !important;
            background: transparent !important;
            transform: none !important;
          }
        }
      }

      .tab-content {
        padding: 20px 0vw;

        .tab-pane {
          .row {
            > div {
              margin: 1vh 0vw !important;
            }
          }
        }
      }
    }
  }

  .third-sec {
    padding: 3vh 0vw;

    h3 {
      font-family: var(--font-family);
      color: var(--black-color);
      font-size: 24px;
      font-weight: 500;
      letter-spacing: -1px;
    }

    .brand-slide {
      border: 1px solid var(--gray-color);
      padding: 2vh 2vw;
      border-radius: 10px;
      margin: 10px;
      text-align: center;

      a {
        display: block;
        text-decoration: none;
        text-align: center;
      }

      img {
        width: 80px;
        height: 60px;
        object-fit: contain;
      }

      .brandName {
        font-family: var(--font-family);
        font-size: 18px;
        font-weight: 600;
        color: var(--black-color);
      }

      .quantity {
        color: var(--secondary-color);
        font-family: var(--font-family);
        font-size: 14px;
      }
    }

    .swiper-pagination {
      bottom: -0px !important;

      .swiper-pagination-bullet-active {
        background-color: var(--red-color);
      }
    }
  }

  .forth-sec {
    padding: 5vh 0vw;

    h3 {
      font-family: var(--font-family);
      color: var(--black-color);
      font-size: 24px;
      font-weight: 500;
      letter-spacing: -1px;
      margin: 0;
    }

    p {
      font-family: var(--font-family);
      font-size: 16px;
      color: var(--secondary-color);
    }

    .row {
      > div {
        padding: 10px;

        .col {
          border: 1px solid var(--gray-color);
          padding: 4vh 1vw;
          border-radius: 20px;
          width: 100% !important;

          img {
            width: 60px;
            height: 60px;
            object-fit: contain;
          }

          h4 {
            font-family: var(--font-family);
            color: var(--black-color);
            font-size: 20px;
            font-weight: 600;
            margin: 1vh 0vw;
            text-align: left;
          }

          p {
            font-family: var(--font-family);
            font-size: 16px;
            color: var(--secondary-color);
            text-align: left;
            margin-bottom: 3vh;
          }
        }
      }
    }
  }

  .fivth-sec {
    padding: 5vh 0vw;
  }

  .sixth-sec {
    padding: 5vh 0vw;

    .row {
      .col {
        border-radius: 15px;
        padding: 2vh 1vw;
        margin: 1vh auto;
        display: flex;
        align-items: center;
        justify-content: space-around;
        background-color: var(--red-color);

        img {
          width: 35%;
        }

        div {
          width: 60%;

          h5 {
            color: var(--white-color);
            font-size: 20px;
            font-family: var(--font-family);
          }

          p {
            color: var(--white-color);
            font-size: 16px;
            font-family: var(--font-family);
          }

          a {
            border-radius: 10px;
            font-family: var(--font-family);
            font-size: 14px;
            padding: 8px 20px;
            text-decoration: none;
            color: var(--red-color);
            background-color: var(--white-color);
          }

          a:hover {
            scale: 1.1;
          }
        }
      }
    }
  }

  .seventh-sec {
    padding: 5vh 0vw;

    .row {
      padding: 0;

      .cols {
        padding: 2vh;
        width: 16% !important;
        margin: auto;
        border: 1px solid var(--gray-color) !important;
        border-radius: 15px;
        text-align: center;

        a {
          margin: 1vh auto;
          img {
            width: 60px;
            height: 50px;
            object-fit: contain;
          }
        }

        h6 {
          font-family: var(--font-family);
          font-size: 16px;
          color: var(--black-color);
          margin: 2px 0px;
        }

        p {
          font-family: var(--font-family);
          color: var(--secondary-color);
          font-size: 14px;
          margin: 1px 0px 2px 0px;
        }
      }
    }
  }

  .eight-sec {
    padding: 5vh 0vw;

    .mySwiper {
      .swiper-wrapper {
        .swiper-slide {
          border-radius: 20px;
          width: 100%;
          height: 60dvh;
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          display: flex;
          align-items: center;
          padding: 1vh 2vw;

          div {
            z-index: 100;
            width: 50%;

            h1 {
              font-family: var(--font-family);
              font-size: 50px;
              color: var(--white-color);
              font-weight: 500;
              margin: 0;
              line-height: 110%;
            }

            p {
              font-family: var(--font-family);
              color: var(--white-color);
              font-size: 16px;
            }
          }
        }

        .swiper-slide::after {
          border-radius: 20px;

          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.3);
        }
      }

      .swiper-pagination {
        bottom: -0px !important;

        .swiper-pagination-bullet-active {
          background-color: var(--red-color);
        }
      }
    }
  }

  .night-sec {
    padding: 5vh 0vw;

    .blogs-row {
      .blogs-col {
        width: 31%;
        margin: auto;
        border: 1px solid var(--gray-color);
        border-radius: 15px;
        padding: 0;
        overflow: hidden;

        .position-relative {
          img {
            width: 100%;
            height: 200px;
            object-fit: cover;
          }

          .date {
            position: absolute;
            z-index: 1;
            background-color: var(--red-color);
            bottom: 10px;
            left: 10px;
            padding: 2px 10px;
            border-radius: 20px;
            font-size: 12px;
            color: var(--white-color);
            font-family: var(--font-family);
          }
        }

        .content {
          padding: 10px 10px;

          .d-flex {
            align-items: center;
            gap: 1vh 0.5vw;
            color: var(--gray-color);
          }

          h3 {
            font-family: var(--font-family);
            font-size: 18px;
            font-weight: 600;
            margin: 10px 0px 5px 0px;
          }

          p {
            font-family: var(--font-family);
            font-size: 16px;
            color: var(--secondary-color);
            line-height: 18px;
          }
        }
      }
    }
  }

  .tenth-sec {
    padding: 5vh 0vw;

    h3 {
      text-align: center;
      font-family: var(--font-family);
      color: var(--black-color);
      font-size: 24px;
      font-weight: 500;
      letter-spacing: -1px;
      margin: 2vh 0vw;
    }

    .row {
      .col-2 {
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
  }
}

/* --------------------- Home Section Styling End ---------------------  */
/* --------------------- About Section Styling Start ---------------------  */
.About-section {
  .heading {
    font-family: var(--font-family);
    font-size: 24px;
    color: var(--black-color);
    font-weight: 600;
    text-align: center;
  }

  .main-section {
    background-image: url("Image/About-us-banner.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 70dvh;
    padding: 0;
    display: flex;
    align-items: center;

    div {
      z-index: 90;
      gap: 2vh 0vw;

      h1 {
        font-family: var(--font-family);
        color: var(--white-color);
        font-size: 70px;
        font-weight: 500;
        line-height: 100%;
      }

      p {
        font-family: var(--font-family);
        color: var(--white-color);
        font-size: 16px;
        margin: 3vh 0vw;
        text-transform: capitalize;
      }

      /* a {
        background-color: var(--red-color);
        padding: 10px 30px;
        border-radius: 10px;
        color: var(--white-color);
        border: 2px solid var(--red-color);
        transition: 0.3s;
        font-size: 16px;
        font-family: var(--font-family);
        text-transform: capitalize;
        text-decoration: none;
      }

      a:hover {
        background-color: transparent;
        color: var(--red-color);
        transition: 0.3s;
      } */
    }
  }

  .main-section::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70dvh;
    background: rgba(0, 0, 0, 0.3);
  }

  .second-sec {
    padding: 5vh 0vw;

    > .row {
      > div {
        img {
          height: 100%;
          width: 100%;
          object-fit: contain;
        }

        h3 {
          font-family: var(--font-family);
          color: var(--black-color);
          font-size: 24px;
        }

        p {
          font-family: var(--font-family);
          font-size: 16px;
          text-transform: capitalize;
          color: var(--secondary-color);
        }

        .d-flex {
          align-items: center;
          padding: 2vh 1vw;
          border: 1px solid var(--half-black-color);
          border-radius: 10px;
          margin: 10px 0px;

          img {
            width: 60px;
            height: 60px;
            object-fit: contain;
          }

          div {
            padding: 0vh 1vw;

            h6 {
              font-family: var(--font-family);
              font-size: 24px;
              line-height: 100%;
              color: var(--black-color);
            }

            p {
              font-family: var(--font-family);
              font-size: 16px;
              margin: 0;
              line-height: 100%;
              color: var(--secondary-color);
            }
          }
        }
      }
    }
  }

  /* .third-sec {
    padding: 5vh 0vw;

    .row {
      > div {
        img {
          width: 100%;
          object-fit: contain;
          border-radius: 10px;
        }

        .d-flex {
          padding: 1vh 0vw;
          align-items: center;
          justify-content: space-between;

          div {
            h5 {
              font-family: var(--font-family);
              font-size: 24px;
              margin: 5px 0px;
            }

            h6 {
              font-family: var(--font-family);
              font-size: 16px;
              margin: 5px 0px;
              color: var(--secondary-color);
            }

            a {
              border: 1px solid var(--half-black-color);
              border-radius: 50%;
              padding: 10px;
              font-size: 12px;
              object-fit: contain;
              transition: 0.3s;
              color: var(--secondary-color);
              text-decoration: none;
            }

            a:hover {
              background-color: var(--secondary-color);
              color: var(--white-color);
              transition: 0.3s;
            }
          }
        }
      }
    }

    p {
      font-size: 16px;
      color: var(--secondary-color);
      font-family: var(--font-family);
      text-align: center;

      a {
        color: var(--primary-color);
        text-decoration: none;
      }
    }
  } */

  .forth-sec {
    padding: 5vh 0vw;

    .row {
      > div {
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
  }

  .fivth-sec {
    padding: 5vh 0vw;

    .gtco-testimonials {
      position: relative;
      border-radius: 15px;
      width: 100%;

      .swiper {
        width: 100%;

        .swiper-slide {
          .card {
            background: var(--half-rad-color);
            margin: 0 15px;
            padding: 25px;
            border-radius: 20px;
            border: 0;
            transition: all 0.4s ease;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0.7;
            transform: scale(0.95);
            height: 100%;

            .d-flex {
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              margin-bottom: 15px;

              .ratting-icon {
                display: flex;
                gap: 3px;

                span {
                  color: var(--red-color);
                  font-size: 14px;
                }
              }

              .date-time {
                font-size: 12px;
                color: var(--secondary-color);
              }
            }

            .card-text {
              font-size: 16px;
              color: var(--black-color);
              line-height: 1.6;
              text-align: center;
              font-style: italic;
              margin: 10px 0;
            }

            .client-info {
              display: flex;
              align-items: center;
              width: 100%;
              margin-top: 20px;

              img {
                width: 50px !important;
                height: 50px;
                object-fit: cover;
                border-radius: 50%;
                margin-right: 15px;
                border: 2px solid #e3f2fd;
              }

              div {
                h5 {
                  font-size: 16px;
                  margin: 0;
                  margin-bottom: 3px;
                  color: #333;
                }

                p {
                  font-size: 14px;
                  color: #696665;
                  margin: 0;
                }
              }
            }
          }
        }
      }
    }

    /* @media (max-width: 767px) {
          .gtco-testimonials {
            margin-top: 20px;
            padding: 20px 15px;
          }

          .card {
            margin: 0 10px;
            padding: 20px;
          }

          .d-flex {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 20px;
          }

          .date-time {
            align-self: flex-end;
          }
        } */
  }

  .sixth-sec {
    padding: 5vh 0vw;

    .swiper {
      position: relative;
      padding-bottom: 40px;
      width: 100%;
    }

    .swiper-wrapper {
      width: 100%;
    }
  }
}

/* --------------------- About Section Styling End ---------------------  */
/* --------------------- Shop Section Styling Start ---------------------  */
.Shop-Section {
  margin-top: 80px;

  .top {
    padding: 1vh 0vw;
    display: flex;
    align-items: center;
    color: var(--secondary-color);
    gap: 0vh 5px;

    i {
      font-size: 10px;
    }

    h6 {
      font-family: var(--font-family);
      font-size: 14px;
      margin: 0;
      line-height: 100%;
    }
  }

  hr {
    margin: 5px auto 10px auto;
  }

  .main-section {
    padding: 4vh 0vw;

    h2 {
      font-family: var(--font-family);
      font-size: 24px;
      font-weight: 600;
      color: var(--black-color);
      margin: 0;
      letter-spacing: -1px;
    }

    p {
      font-family: var(--font-family);
      font-size: 14px;
      color: var(--secondary-color);
      margin: 0;
    }

    .row {
      margin: 10px 0px;
      padding: 20px 5px;

      > .col-lg-3 {
        /* border: 1px solid var(--half-black-color); */
        box-shadow: 0px 0px 10px 0px #00000028;

        border-radius: 20px;
        padding: 2vh 1vw;
        background-color: var(--white-color);
        height: 100%;

        form {
          select:focus {
            border-color: var(--red-color) !important;
            outline: none;
          }

          select:hover {
            border-color: var(--red-color) !important;
          }

          h3 {
            font-family: var(--font-family);
            color: var(--black-color);
            font-size: 18px;
            font-weight: 600 !important;
            margin: 0;
          }

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

            .clear-btn {
              display: flex;
              align-items: center;
              font-family: var(--font-family);
              font-size: 14px;
              border: 1px solid var(--gray-color);
              /* border: 1px solid var(--half-black-color); */
              background-color: var(--white-color);
              padding: 5px 10px;
              border-radius: 10px;
              cursor: pointer;
              transition: all 0.2s ease;

              i {
                font-size: 12px;
                margin-right: 5px;
              }
            }

            .clear-btn:hover {
              background-color: var(--);
              border: 1px solid var(--half-black-color);
            }
          }

          select {
            margin: 10px 0;
            width: 100%;
            padding: 12px 15px;
            border-radius: 10px;
            border: 1px solid var(--gray-color);
            font-family: var(--font-family);
            font-size: 16px;
            color: var(--secondary-color);
            background-color: var(--white-color);
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23696665' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 15px center;
            background-size: 16px;
            cursor: pointer;
            transition: border-color 0.2s ease;
          }

          .price-display,
          .year-display,
          .km-display {
            text-align: center;
            font-family: var(--font-family);
            font-size: 16px;
            font-weight: 600;
            color: var(--red-color);
            margin: 5px 0;
            padding: 10px;
            background-color: var(--half-rad-color);
            border-radius: 10px;
          }

          .slider-container {
            position: relative;
            height: 5px;
            background-color: var(--gray-color);
            border-radius: 5px;
            margin: 30px 0;

            .slider-track {
              height: 5px;
              position: absolute;
              background-color: var(--half-rad-color);
              border-radius: 5px;
              z-index: 1;
            }
          }

          input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            position: absolute;
            background: none;
            pointer-events: none;
            z-index: 2;
            height: 5px;
            top: 0;
            margin: 0;
          }

          input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            height: 18px;
            width: 18px;
            border-radius: 50%;
            background: var(--white-color);
            border: 2px solid var(--red-color);
            cursor: pointer;
            pointer-events: auto;
          }

          input[type="range"]::-moz-range-thumb {
            height: 18px;
            width: 18px;
            border-radius: 50%;
            background: var(--white-color) !important;
            border: 2px solid var(--red-color);
            cursor: pointer;
            pointer-events: auto;
          }

          .min-max-labels {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            color: var(--secondary-color);
            font-family: var(--font-family);
            font-size: 16px;
          }

          .price-inputs,
          .year-inputs,
          .km-inputs {
            display: flex;
            gap: 15px;
            margin-top: 20px;
          }

          .price-input,
          .year-input,
          .km-input {
            flex: 1;
          }

          .price-input label,
          .year-input label,
          .km-input label {
            display: block;
            margin-bottom: 5px;
            color: var(--secondary-color);
            font-size: 16px;
            font-family: var(--font-family);
          }

          .price-input input,
          .year-input input,
          .km-input input {
            width: 100%;

            padding: 10px 15px;
            border: 1px solid var(--half-black-color);
            border-radius: 10px;
            font-family: var(--font-family);
            font-size: 16px;
          }

          .price-input input:focus,
          .year-input input:focus,
          .km-input input:focus {
            border-color: var(--red-color);
            color: var(--white-color);

            outline: none;
          }

          .radio {
            margin: 10px 0;
            color: var(--white-color) ;

            label {
              font-family: var(--font-family);
              font-size: 16px;
              color: var(--black-color);
            }

            input[type="checkbox"] {
              color: var(--white-color);
              accent-color: var(--red-color);
            }
          }
        }
      }

      .col-lg-9 {
        margin: 0;
        padding: 0;

        div {
          padding: 7px;
          .car-listing-cell {
            padding: 10px;
          }
        }
      }
    }
  }
}

/* --------------------- Shop Section Styling End ---------------------  */
/* --------------------- Deaital Shop Style Start ---------------------  */
.Deatial-page {
  margin-top: 80px;

  .top {
    padding: 1vh 0vw;
    display: flex;
    align-items: center;
    color: var(--secondary-color);
    gap: 0vh 5px;

    i {
      font-size: 10px;
    }

    h6 {
      font-family: var(--font-family);
      font-size: 14px;
      margin: 0;
      line-height: 100%;
    }
  }

  hr {
    margin: 5px auto 10px auto;
  }

  .main-section {
    .row {
      > div {
        .carImages {
          margin: 1vh 0vw 5vh 0vw;
          width: 100%;

          .swiper-wrapper {
            .swiper-slide {
              overflow: hidden;

              img {
                border-radius: 15px;
                width: 100% !important;
                height: 50vh !important;

                object-fit: cover;
              }
            }
          }

          .swiper-pagination {
            .swiper-pagination-bullet-active {
              background-color: var(--red-color) !important;
            }
          }
        }

        h3 {
          font-family: var(--font-family);
          font-size: 24px;
          font-weight: 600;
        }

        p {
          font-family: var(--font-family);
          color: var(--secondary-color);
          font-size: 16px;
          font-weight: 300;
          margin: 5px 0px;
        }

        a {
          font-family: var(--font-family);
          font-size: 14px;
          border: 1px solid var(--half-black-color);
          padding: 10px;
          border-radius: 10px;
          color: var(--black-color);
          display: inline-block;
          margin: 10px 0px;
          transition: 0.3s ease;

          i {
            color: var(--red-color);
          }
        }

        a:hover {
          border-color: var(--red-color);
        }

        .row {
          padding: 2vh 0vw;

          > div {
            .d-flex {
              justify-content: space-between;
              align-items: center;
              margin: 1vh 0vw;

              div {
                color: var(--black-color);
                font-family: var(--font-family);
                font-size: 16px;
              }

              .icons {
                color: #696665;
                font-family: var(--font-family);
                font-size: 16px;

                i {
                  color: #b6b6b6;
                }
              }
            }
          }
        }

        .Features {
          > div {
            margin: 5px 0px;
            font-family: var(--font-family);
            color: var(--secondary-color);
            font-size: 16px;

            i {
              color: var(--red-color);
              font-size: 18px;
            }
          }
        }

        .faq-container {
          .faq-item {
            border-bottom: 1px solid var(--half-black-color);
            padding: 10px 0;

            .faq-question {
              width: 100%;
              background: none;
              border: none;
              outline: none;
              text-align: left;
              font-size: 16px;
              font-weight: 600;
              cursor: pointer;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-family: var(--font-family);
              font-weight: 600;
              padding: 10px 0;
            }

            .faq-answer {
              max-height: 0;
              overflow: hidden;
              transition: max-height 0.4s ease, padding 0.3s ease;
              padding: 0 0;

              p {
                margin: 5px 0;
                font-family: var(--font-family);
                font-size: 14px;
              }
            }
          }

          .faq-item:nth-last-child(1) {
            border: none !important;
          }

          .active {
            .icon {
              color: var(--red-color);
            }

            .faq-question .icon {
              transform: rotate(180deg);
              content: "–";
            }

            .faq-answer {
              max-height: 200px;
              padding: 5px 0;
            }
          }

          .faq-question .icon {
            transition: transform 0.3s ease;
            font-weight: bold;
            font-size: 1.2rem;
          }
        }
      }

      > div {
        .carDetial {
          border: 1px solid var(--half-black-color);
          border-radius: 15px;
          padding: 2vh 1.5vh;
          margin: 10px 0px;

          .modelName {
            font-family: var(--font-family);
            font-size: 22px;
            color: var(--black-color);
          }

          .Feature {
            p {
              color: #696665;
              font-family: var(--font-family);
              font-size: 16px;
            }
          }

          .rate {
            color: var(--green-color);
            font-family: var(--font-family);
            font-size: 24px;
            font-weight: 600 !important;
          }
        }

        .recommendedCars {
          border: 1px solid var(--half-black-color);
          border-radius: 15px;
          padding: 2vh 1.5vh;
          margin: 10px 0px;

          h2 {
            font-family: var(--font-family);
            font-size: 24px;
            color: var(--black-color);
            margin: 0 0px 5px 0px;
          }

          p {
            color: #696665;
            font-family: var(--font-family);
            font-size: 14px;
            margin: 0 0px 10px 0px;
          }

          a {
            padding: 5px;
            box-shadow: 0px 0px 10px 0px #0000001f;
            border-radius: 10px;
            border: none;
            display: block;
            margin: 2vh 0vw;
            align-items: center;
            justify-content: left;
            cursor: pointer;

            img {
              width: 150px;
              height: 100px;
              object-fit: cover;
              border-radius: 10px;
            }

            div {
              margin: 0vh 1vw;

              h5 {
                font-size: 16px;
                color: var(--black-color);
                font-family: var(--font-family);
               
              }

              p {
                font-size: 14px;
                color: var(--green-color);
                font-family: var(--font-family);
                font-weight: 600;
                margin: 0;
              }
            }
          }
        }
      }
    }
  }
}

/* --------------------- Deaital Shop Style End ---------------------  */
/* --------------------- FAQs Style Start ---------------------  */
.Faqs-Section {
  margin-top: 80px;

  .top {
    padding: 1vh 0vw;

    display: flex;
    align-items: center;
    color: var(--secondary-color);

    gap: 0vh 5px;

    i {
      font-size: 10px;
    }

    h6 {
      font-family: var(--font-family);
      font-size: 14px;
      margin: 0;
    }
  }

  .heading-icons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2vh auto;

    h2 {
      font-family: var(--font-family);
      color: var(--black-color);
      font-size: 24px;
      margin: 0 !important;
      font-weight: 600;
    }

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

      h6 {
        margin: 0 2px;
        font-family: var(--font-family);
        color: var(--black-color);
        font-weight: 300;
        font-size: 16px;
      }

      a {
        padding: 4px 6px;
        font-size: 16px;
        color: var(--red-color);
        margin: 2px;
        border: 1px solid var(--half-black-color);
        border-radius: 50%;
        transition: 0.3s;
      }

      a:hover {
        background-color: var(--red-color);
        color: var(--white-color);
        transition: 0.3s;
        scale: 1.1;
      }
    }
  }

  .main-container {
    margin: 1vh auto 5vw auto;

    .faq-container {
      h3 {
        color: var(--red-color);
        font-size: 20px;
        font-family: var(--font-family);
        margin: 0;
      }

      .accordion {
        .accordion-item {
          border: 1px solid #ededed;
          border-radius: 10px;
          padding: 1vh;
          margin: 10px 0px;

          button {
            position: relative;
            display: block;
            text-align: left;
            width: 100%;
            padding: 10px 0px;
            color: #24272c;
            font-size: 16px;
            font-weight: 500;
            font-family: var(--font-family);
            border: none;
            background: none;
            outline: none;

            .accordion-title {
              padding: 1em 1.5em 1em 0;
            }

            .icon {
              display: inline-block;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: 0;
              width: 22px;
              height: 22px;
              border: 1px solid;
              border-radius: 50%;
            }

            .icon::before {
              display: block;
              position: absolute;
              content: "";
              top: 50%;
              transform: translateY(-50%);
              left: 5px;
              width: 10px;
              height: 2px;
              background: currentColor;
            }

            .icon::after {
              display: block;
              position: absolute;
              content: "";
              top: 50%;
              transform: translateY(-50%);
              left: 9px;
              width: 2px;
              height: 10px;
              background: currentColor;
            }
          }

          button:hover,
          button:focus {
            cursor: pointer;
            color: var(--red-color);
          }

          button[aria-expanded="true"] {
            color: var(--red-color);
          }

          button[aria-expanded="true"] .icon::after {
            width: 0;
          }

          button[aria-expanded="true"] + .accordion-content {
            opacity: 1;
            max-height: 9em;
            transition: all 200ms linear;
            will-change: opacity, max-height;
          }

          .accordion-content {
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            transition: opacity 200ms linear, max-height 200ms linear;
            will-change: opacity, max-height;

            p {
              font-size: 14px;
              font-family: var(--font-family);
              color: var(--black-color);
              font-weight: 300;
              margin: 10px 0px 5px 0px;
            }
          }
        }

        .accordion-item:has(button[aria-expanded="true"]) {
          background-color: var(--half-rad-color);
        }
      }
    }
  }
}

/* --------------------- FAQs Style End ---------------------  */
/* --------------------- Contact Styling Start ---------------------  */
.contact-section {
  margin-top: 80px;

  .top {
    padding: 1vh 0vw;

    display: flex;
    align-items: center;
    color: var(--secondary-color);

    gap: 0vh 5px;

    i {
      font-size: 10px;
    }

    h6 {
      font-family: var(--font-family);
      font-size: 14px;
      margin: 0;
    }
  }

  hr {
    margin: 10px auto;
  }

  .main-section {
    padding: 0vh 0 4vh 0;

    .heading-icons {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 2vh auto;

      h2 {
        font-family: var(--font-family);
        color: var(--black-color);
        font-size: 24px;
        margin: 0 !important;
        font-weight: 600;
      }

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

        h6 {
          margin: 0 2px;
          font-family: var(--font-family);
          color: var(--black-color);
          font-weight: 300;
          font-size: 16px;
        }

        a {
          padding: 4px 6px;
          font-size: 16px;
          color: var(--red-color);
          margin: 2px;
          border: 1px solid var(--half-black-color);
          border-radius: 50%;
          transition: 0.3s;
        }

        a:hover {
          background-color: var(--red-color);
          color: var(--white-color);
          transition: 0.3s;
          scale: 1.1;
        }
      }
    }

    iframe {
      width: 100%;
      height: 60dvh;
      object-fit: cover;
      border-radius: 15px;
    }
  }

  .second-sec {
    padding: 4vh 0px;

    .row {
      > div {
        h2 {
          font-family: var(--font-family);
          color: var(--black-color);
          font-size: 24px;
          margin: 0 !important;
          font-weight: 600;
        }

        p {
          color: var(--secondary-color);
          font-family: var(--font-family);
          font-size: 16px;
        }

        form {
          > div {
            margin: 1vh 0vw;

            label {
              display: block;
              font-family: var(--font-family);
              color: var(--secondary-color);
              font-size: 16px;
              margin-bottom: 5px;
            }

            .input {
              width: 100%;
              padding: 1vh 1vw;
              border-radius: 10px;
              border: 1px solid var(--half-black-color);
              &:hover{
                border-color: var(--red-color);
              }
            }
          }

         button{
          width: 180px;
          margin: auto;
          background-color: transparent;
         }
        }
      }

      .col-lg-4 {
        /* border: 1px solid var(--half-black-color); */
        border-radius: 10px;
        padding: 2vh 1vw;
        box-shadow: 0px 0px 10px 0px #00000013;
        height: 100%;

        > div {
          padding: 1vh 0vw;

          h6 {
            font-family: var(--font-family);
            font-size: 16px;
            margin: 10px 0;
          }

          a {
            display: block;
            line-height: 110%;
            color: var(--secondary-color);
            font-family: var(--font-family);
            font-size: 14px;
            margin: 0;
          }

          p {
            font-family: var(--font-family);
            font-size: 14px;
            margin: 5px 0;
            line-height: 100%;
          }
        }

        .social-icon {
          a {
            border: 1px solid var(--half-black-color) !important;
            display: inline-block;
            padding: 10px;
            border-radius: 50%;
            transition: 0.3s;
            font-size: 16px;
          }

          a:hover {
            background-color: var(--secondary-color);
            color: var(--white-color);
            transition: 0.3s;
            scale: 1.1;
          }
        }
      }
    }
  }

  .third-sec {
    padding: 4vh 0px;

    h2 {
      font-family: var(--font-family);
      color: var(--black-color);
      font-size: 24px;
      margin: 2vh 0 !important;
      font-weight: 600;
      text-align: center;
    }

    .row {
      > div {
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
}
/* --------------------- Contact Styling End ---------------------  */
/* --------------------- Footer Styling Start ---------------------  */
footer {
  padding: 5vh 0vw 1vh 0vw;
  background-color: var(--red-color);

  .first-container {
    .row {
      .col-lg-3 {
        align-items: center;

        img {
          width: 60px;
          height: 60px;
          object-fit: contain;
        }

        div {
          margin: 0vh 1vw;

          h5 {
            font-family: var(--font-family);
            color: var(--white-color);
            margin: 0px;
            font-size: 22px;
          }

          p {
            font-family: var(--font-family);
            color: var(--white-color);
            margin: 0;
            font-size: 16px;
          }
        }
      }
    }
  }

  hr {
    color: var(--white-color);
    margin: 3vh 0vw;
    border-color: var(--white-color); /* Fix for hr styling */
  }

  .second-container {
    .row {
      div {
        margin-bottom: 30px;

        h4 {
          font-family: var(--font-family);
          color: var(--white-color);
          margin: 0px 0px 20px 0px;
          font-size: 22px;
          font-weight: 600;
        }

        a {
          display: block;
          font-family: var(--font-family);
          font-size: 16px;
          font-weight: 500;
          color: var(--white-color);
          text-decoration: none;
          position: relative;
          margin: 10px 0px;
          overflow: hidden;
          transition: color 0.3s ease;

          &:hover,
          &.active {
            color: var(--black-color);
          }
        }

        /* Rest of your styling remains same */
        p {
          color: var(--white-color);
          font-family: var(--font-family);
          font-size: 16px;
          font-weight: 400;
          margin: 0 0 15px 0;
          line-height: 1.6;
        }

        form {
          input {
            margin: 8px 0;
            width: 100%;
            border: none;
            outline: none;
            border-radius: 5px;
            padding: 12px 15px;
            background-color: var(--white-color);
            color: var(--black-color);
            box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease-in-out;
            font-family: var(--font-family);
            font-size: 14px;
          }

          input:focus {
            background-color: #f8f8f8;
            box-shadow: inset 0 0 0 1px var(--black-color);
            transform: translateY(-1px);
          }

          input::placeholder {
            color: var(--secondary-color);
          }

          button {
            width: 100%;
            padding: 8px 15px;
            border-radius: 5px;
            font-size: 16px;
            font-family: var(--font-family);
            color: var(--white-color);
            background-color: var(--black-color);
            border: 1px solid var(--black-color);
            transition: all 0.3s ease;
            margin-top: 10px;
            cursor: pointer;
          }

          button:hover {
            background-color: var(--white-color);
            color: var(--black-color);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
          }
        }
      }
    }
  }

  > p {
    text-align: center;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--white-color);
    margin: 20px 0 0 0;
    padding: 15px 0;
  }
}

/* --------------------- Footer Styling End ---------------------  */
/* --------------------- Responsive for Tab Styling Start ---------------------  */
@media (max-width: 1024px) {
  .car-sell-cart {
    position: relative;
    /* width: 300px; */
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--gray-color);

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

    .position-absolute {
      top: 10px;
      left: 10px;
      right: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .Featured {
        background: var(--primary-color);
        border: 1px solid var(--primary-color);
        border-radius: 20px;
        padding: 5px 10px;
        font-family: var(--font-family);
        font-size: 12px;
        text-decoration: none;
        color: var(--white-color);
        letter-spacing: 1px;
        transition: 0.3s;
      }

      .images {
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 20px;
        padding: 5px 10px;
        font-family: var(--font-family);
        font-size: 12px;
        text-decoration: none;
        color: var(--white-color);
        transition: 0.3s;
      }

      .madeYear {
        background-color: var(--red-color);
        border-radius: 20px;
        padding: 5px 10px;
        font-family: var(--font-family);
        font-size: 12px;
        text-decoration: none;
        color: var(--white-color);
        transition: 0.3s;
        border: 1px solid var(--red-color);
      }
    }

    .content {
      padding: 15px 10px 15px 10px;

      .bodyType {
        color: var(--red-color);
        font-family: var(--font-family);
        font-size: 14px;
      }

      .model {
        color: var(--black-color);
        font-family: var(--font-family);
        font-size: 18px;
        padding: 10px 0px;
        font-weight: 600;
      }

      .options {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0px;

        font-size: 14px;
        color: var(--secondary-color);
        font-family: var(--font-family);

        i {
          font-size: 16px;
        }
      }

      .price-and-viewBtn {
        padding: 10px 0px;
        align-items: center;
        justify-content: space-between;

        .price {
          color: var(--primary-color);
          font-family: var(--font-family);
          font-family: 18px;
          font-weight: 600;
          margin: 0;
        }

        .view-btn {
          border: 1px solid var(--black-color);
          padding: 5px 10px;
          border-radius: 30px;
          font-family: var(--font-family);
          font-size: 14px;
          color: var(--black-color);
          text-decoration: none;
          transition: 0.3s;
        }

        .view-btn:hover {
          background-color: var(--black-color);
          color: var(--white-color);
          transition: 0.3s;
        }
      }
    }
  }
  /* --------------------- Header Styling Start ---------------------  */
  /* header {
    .hamburger {
      display: block;
    }

    .nav {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      background-color: var(--white-color);
      transform: translateY(-100%);
      opacity: 0;
      visibility: hidden;
      transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    }

    .nav.active {
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
    }

    .nav {
      ul {
        flex-direction: column;
        padding: 20px;

        li {
          margin: 10px 0;
          transform: translateY(20px);
          opacity: 0;
        }
      }
    }

    .nav.active {
      ul {
        li {
          transform: translateY(0);
          opacity: 1;
          transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;

          a {
            color: var(--black-color);
            font-size: 18px;
          }
        }
      }
    }
  }
  .scrolled {
    .nav {
      ul {
        li {
          a {
            color: var(--black-color) !important;
          }
        }
      }
    }
  } */
  /* --------------------- Header Styling end ---------------------  */
  /* --------------------- Home Section Styling Start ---------------------  */
  .Home-section {
    .main-slider {
      .swiper-wrapper {
        .swiper-slide {
          height: 65dvh;

          .container {
            .model-name {
              font-size: 50px;
              margin: 0;
            }

            .Feature-sec {
              padding: 2vh 0vw;

              h6 {
                font-size: 18px;

                i {
                  font-size: 22px;
                }
              }
            }

            .contact-btn {
              padding: 5px 12px;
              font-size: 12px;
            }
          }
        }
      }

      .position-absolute {
        padding: 0.5vh 5px;
        bottom: 30px;

        form {
          padding: 5px 5px;

          > .row {
            padding: 0;
            margin: auto;

            > div {
              width: 49%;

              label {
                font-size: 16px;
              }

              select {
                option {
                  font-size: 14px;
                  font-family: var(--font-family);
                }
              }
            }
          }
        }
      }
    }

    .second-sec {
      padding: 2vh 0vw;

      .container {
        .nav-tabs {
          li {
            .nav-link {
              color: var(--secondary-color);
              font-family: var(--font-family);
            }

            .active {
              border: none;
              color: var(--black-color);
              border-bottom: 2px solid var(--primary-color);
            }

            .nav-link:active {
              border: none;
            }
          }
        }

        .tab-content {
          padding: 20px 0vw;

          .tab-pane {
            .row {
              > div {
                margin: 1vh 0vw !important;
                padding: 2px;
              }
            }
          }
        }
      }
    }

    .forth-sec {
      padding: 2vh 0vw;

      .row {
        .col {
          width: 49% !important;
          margin: 5px auto;

          img {
            width: 50px;
            height: 50px;
          }

          h4 {
            font-size: 20px;
          }

          p {
            font-size: 16px;
            margin-bottom: 2vh;
          }

          a {
            padding: 8px 15px;
          }
        }
      }
    }

    .sixth-sec {
      padding: 2vh 0vw;

      .row {
        .col {
          /* width: 48%;   */
          margin: 1vh auto;

          img {
            width: 35%;
          }

          div {
            width: 60%;

            h5 {
              font-size: 24px;
            }

            p {
              font-size: 16px;
            }

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

        .orange-bg {
          background-color: var(--primary-color);

          a {
            background-color: var(--black-color);
            color: var(--white-color);
          }
        }

        .red-bg {
          background-color: var(--red-color);

          a {
            color: var(--black-color);
            background-color: var(--white-color);
          }
        }
      }
    }

    .seventh-sec {
      padding: 2vh 0vw;

      .row {
        .cols {
          padding: 2vh;
          width: 32% !important;
          margin: 5px auto;
        }
      }
    }

    .eight-sec {
      padding: 2vh 0vw;

      .mySwiper {
        .swiper-wrapper {
          .swiper-slide {
            height: 40dvh;
            padding: 1vh 2vw;

            div {
              width: 60%;

              h1 {
                font-size: 40px;
                line-height: 110%;
              }

              p {
                font-size: 16px;
              }

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

        .swiper-pagination {
          bottom: -0px !important;

          .swiper-pagination-bullet-active {
            background-color: var(--primary-color);
          }
        }
      }
    }

    .night-sec {
      padding: 2vh 0vw;

      .blogs-row {
        .blogs-col {
          width: 48%;
          margin: 1vh auto;
        }
      }
    }

    .tenth-sec {
      padding: 2vh 0vw;

      h3 {
        text-align: center;
        font-family: var(--font-family);
        color: var(--black-color);
        font-size: 24px;
        font-weight: 500;
        letter-spacing: 0px;
        margin: 2vh 0vw;
      }

      .row {
        .col-2 {
          img {
            object-fit: cover;
          }
        }
      }
    }
  }
  /* --------------------- Home Section Styling End ---------------------  */
  /* --------------------- About Section Styling Start ---------------------  */
  .About-section {
    .heading {
      margin: 2vh auto;
    }

    .main-section {
      height: 50dvh;

      div {
        gap: 2vh 0vw;

        h1 {
          font-size: 50px;
          letter-spacing: -1px;
        }

        p {
          letter-spacing: 1px;
        }
      }
    }

    .main-section::after {
      height: 50dvh;
    }

    .second-sec {
      padding: 5vh 0 0vh 0;

      > .row {
        > div {
          img {
            object-fit: contain;
          }

          h3 {
            font-size: 20px;
          }

          p {
            font-size: 16px;
          }

          .d-flex {
            padding: 2vh 1vw;

            img {
              width: 50px;
              height: 50px;
            }

            div {
              padding: 0vh 1vw;

              h6 {
                font-size: 18px;
              }

              p {
                font-size: 14px;
              }
            }
          }
        }
      }
    }

    .third-sec {
      padding: 5vh 0vw 0 0;

      .row {
        > div {
          margin: 1vh auto;

          .d-flex {
            padding: 1vh 0vw;
            align-items: center;
            justify-content: space-between;

            div {
              h5 {
                font-size: 18px;
              }

              h6 {
                font-size: 14px;
              }

              a {
                padding: 8px;

                object-fit: contain;
              }
            }
          }
        }
      }
    }

    .fivth-sec {
      padding: 0vh 0vw 0 0;
    }
  }
  /* --------------------- About Section Styling End ---------------------  */
  /* --------------------- Shop Section Styling Start ---------------------  */
  .Shop-Section {
    margin-top: 100px;

    .main-section {
      padding: 4vh 0vw;

      h2 {
        font-size: 20px;
        letter-spacing: 0px;
      }

      p {
        font-size: 14px;
        margin: 0;
      }

      .row {
        margin: 5px 0px;
        padding: 10px 0px;

        > .col-lg-3 {
          border-radius: 10px;
        }

        .col-lg-9 {
          margin: 0;
          padding: 0;

          div {
            .car-listing-cell {
              padding: 10px;

              a {
                img {
                  height: 150px;
                  object-fit: contain;
                }
              }

              .model {
                line-height: 100%;
              }
            }
          }
        }
      }
    }
  }
  /* --------------------- Shop Section Styling End ---------------------  */
  /* --------------------- Contact Styling Start ---------------------  */
  .contact-section {
    margin-top: 80px;

    .main-section {
      padding: 0vh 0 4vh 0;
      .heading-icons {
        h2 {
          font-size: 20px;
        }
      }

      iframe {
        height: 40dvh;
      }
    }

    .second-sec {
      padding: 2vh 0px;

      .row {
        > div {
          h2 {
            font-size: 20px;
          }

          p {
            font-size: 14px;
          }

          form {
            > div {
              label {
                font-size: 12px;
              }

              .input {
                padding: 5px 5px;
                border-radius: 5px;
              }
            }

            button {
              padding: 8px;
              border-radius: 10px;
              font-size: 14px;
            }
          }
        }

        .col-lg-4 {
          padding: 1vh 1vw;
          height: 100%;

          > div {
            padding: 1vh 0vw;

            h6 {
              font-size: 14px;
              margin: 5px 0;
            }

            a {
              font-size: 12px;
            }

            p {
              font-size: 12px;
              margin: 5px 0;
            }
          }

          .social-icon {
            a {
              border: 1px solid var(--half-black-color) !important;
              display: inline-block;
              padding: 10px;
              border-radius: 50%;
              transition: 0.3s;
              font-size: 16px;
            }

            a:hover {
              background-color: var(--secondary-color);
              color: var(--white-color);
              transition: 0.3s;
              scale: 1.1;
            }
          }
        }
      }
    }

    .third-sec {
      padding: 4vh 0px;

      h2 {
        font-size: 24px;
        margin: 2vh 0 !important;
        text-align: center;
      }

      .row {
        > div {
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }
  /* --------------------- Contact Styling End ---------------------  */
  /* --------------------- Deaital Shop Style Start ---------------------  */
  .Deatial-page {
    margin-top: 100px;

    .main-section {
      .row {
        > div {
          .carImages {
            margin: 1vh 0vw 5vh 0vw;
            width: 100%;

            .swiper-wrapper {
              .swiper-slide {
                overflow: hidden;
                img {
                  height: 40vh !important;
                  object-fit: cover;
                }
              }
            }
          }

          h3 {
            font-family: var(--font-family);
            font-size: 24px;
            font-weight: 600;
          }

          p {
            font-family: var(--font-family);
            color: var(--secondary-color);
            font-size: 16px;
            font-weight: 300;
            margin: 5px 0px;
          }

          a {
            font-family: var(--font-family);
            font-size: 14px;
            border: 1px solid var(--half-black-color);
            padding: 10px;
            border-radius: 10px;
            color: var(--black-color);
            display: inline-block;
            margin: 10px 0px;
            transition: 0.3s ease;

            i {
              color: var(--red-color);
            }
          }

          a:hover {
            border-color: var(--red-color);
          }

          .row {
            padding: 2vh 0vw;

            > div {
              .d-flex {
                justify-content: space-between;
                align-items: center;
                margin: 1vh 0vw;

                div {
                  color: var(--black-color);
                  font-family: var(--font-family);
                  font-size: 16px;
                }

                .icons {
                  color: #696665;
                  font-family: var(--font-family);
                  font-size: 16px;

                  i {
                    color: #b6b6b6;
                  }
                }
              }
            }
          }

          .Features {
            > div {
              margin: 5px 0px;
              font-family: var(--font-family);
              color: var(--secondary-color);
              font-size: 16px;

              i {
                color: #7ed321;
                font-size: 18px;
              }
            }
          }

          .faq-container {
            .faq-item {
              border-bottom: 1px solid var(--half-black-color);
              padding: 10px 0;

              .faq-question {
                width: 100%;
                background: none;
                border: none;
                outline: none;
                text-align: left;
                font-size: 16px;
                font-weight: 600;
                cursor: pointer;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-family: var(--font-family);
                font-weight: 600;
                padding: 10px 0;
              }

              .faq-answer {
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.4s ease, padding 0.3s ease;
                padding: 0 0;

                p {
                  margin: 5px 0;
                  font-family: var(--font-family);
                  font-size: 14px;
                }
              }
            }

            .faq-item:nth-last-child(1) {
              border: none !important;
            }

            .active {
              .icon {
                color: var(--red-color);
              }

              .faq-question .icon {
                transform: rotate(180deg);
                content: "–";
              }

              .faq-answer {
                max-height: 200px;
                padding: 5px 0;
              }
            }

            .faq-question .icon {
              transition: transform 0.3s ease;
              font-weight: bold;
              font-size: 1.2rem;
            }
          }
        }

        > div {
          .carDetial {
            border: 1px solid var(--half-black-color);
            border-radius: 15px;
            padding: 2vh 1.5vh;
            margin: 10px 0px;

            .modelName {
              font-family: var(--font-family);
              font-size: 24px;
              color: var(--black-color);
            }

            .Feature {
              p {
                color: #696665;
                font-family: var(--font-family);
                font-size: 16px;
              }
            }

            .rate {
              color: var(--primary-color);
              font-family: var(--font-family);
              font-size: 30px;
              font-weight: 600;
            }
          }

          .recommendedCars {
            border: 1px solid var(--half-black-color);
            border-radius: 15px;
            padding: 2vh 1.5vh;
            margin: 10px 0px;

            h2 {
              font-family: var(--font-family);
              font-size: 24px;
              color: var(--black-color);
              margin: 0 0px 5px 0px;
            }

            p {
              color: #696665;
              font-family: var(--font-family);
              font-size: 14px;
              margin: 0 0px 10px 0px;
            }

            a {
              padding: 0;
              border: none;
              display: block;
              margin: 2vh 0vw;
              align-items: center;
              justify-content: left;
              cursor: pointer;

              img {
                width: 150px;
                height: 100px;
                object-fit: cover;
                border-radius: 10px;
              }

              div {
                margin: 0vh 1vw;

                h5 {
                  font-size: 16px;
                  color: var(--black-color);
                  font-family: var(--font-family);
                  color: var(--secondary-color);
                }

                p {
                  font-size: 14px;
                  color: var(--black-color);
                  font-family: var(--font-family);
                  font-weight: 600;
                  margin: 0;
                }
              }
            }
          }
        }
      }
    }
  }

  /* --------------------- Deaital Shop Style End ---------------------  */
}

/* --------------------- Responsive for Tab Styling End ---------------------  */
/* --------------------- Responsive for Mobile Styling Start ---------------------  */
@media (max-width: 445px) {
  body,
  html {
    width: 100dvw !important;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
  }
  .top-sec {
    width: 95%;
    margin: auto;
    align-items: center;
    justify-content: space-between;
    padding: 2vh 1vw;

    h3 {
      font-size: 20px;
      font-weight: 500;
      letter-spacing: -1px;
      margin: 0;
    }

    .view-all-btn {
      font-size: 12px;
    }
  }

  .car-sell-cart {
    position: relative;
    /* width:   */
    margin: 0vh auto;
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--gray-color);

    img {
      width: 100%;
      height: 150px;
      object-fit: contain;
    }

    .position-absolute {
      left: 5px;
      right: 5px;

      .Featured {
        font-size: 8px;
      }

      .images {
        font-size: 8px;
      }

      .madeYear {
        font-size: 8px;
      }
    }

    .content {
      padding: 5px;

      .bodyType {
        font-size: 12px;
        font-weight: 600;
      }

      .model {
        font-size: 16px;
        margin: 0;
        line-height: 110%;
        padding: 5px 0px;
        font-weight: 600;
      }

      .options {
        padding: 10px 0px;
        font-size: 10px;

        i {
          font-size: 12px;
        }
      }

      .price-and-viewBtn {
        padding: 10px 0px;
        align-items: center;
        justify-content: space-between;

        .price {
          font-family: 14px !important;
        }

        .view-btn {
          padding: 5px 8px;
          font-size: 10px;
        }
      }
    }
  }

  /* --------------------- Home Section Styling Start ---------------------  */
  .Home-section {
    .main-slider {
      position: relative;

      .swiper-wrapper {
        .swiper-slide {
          min-height: 60dvh;

          .container {
            .model-name {
              font-size: 30px;
              font-weight: 500;
            }

            .Feature-sec {
              padding: 2vh 0vw;
              gap: 0vh 1vw;

              h6 {
                font-size: 16px;

                i {
                  font-size: 20px;
                }
              }
            }

            .contact-btn {
              padding: 8px 12px;
              text-align: center;
              border-radius: 10px;
              font-family: var(--font-family);
              font-size: 16px;
              width: 180px;
              font-weight: 500;
              letter-spacing: 1px;
              border: 2px solid var(--red-color);
            }
          }
        }
      }

      .position-absolute {
        box-shadow: 0px 0px 10px 0px #00000038;
        width: 95%;
        padding: 1vh 10px;
        border-radius: 10px;
        bottom: -14dvh;

        form {
          padding: 5px;

          > .row {
            padding: 0;
            margin: auto;

            > div {
              width: 49%;
              padding: 2px 10px;
              margin: auto;

              label {
                margin: 3px 0px;
                padding: 0 5px;
                font-size: 14px;
              }

              select {
                padding: 10px 5px;
                border-radius: 10px;
                font-size: 14px;
                background-size: 14px;

                option {
                  font-size: 12px;
                }
              }
            }
          }

          div {
            margin: 1vh auto;

            button {
              font-size: 14px;
            }
          }
        }
      }
    }

    .second-sec {
      margin-top: 12dvh;
      padding: 2vh 0vw;

      .container {
        .nav-tabs {
          li {
            .nav-link {
              color: var(--secondary-color);
              font-family: var(--font-family);
            }

            .active {
              border: none;
              color: var(--black-color);
              border-bottom: 2px solid var(--primary-color);
            }

            .nav-link:active {
              border: none;
            }
          }
        }

        .tab-content {
          padding: 20px 0vw;

          .tab-pane {
            .row {
              > div {
                width: 49%;
                margin: 5px auto !important;
                padding: 0;
              }
            }
          }
        }
      }
    }

    .third-sec {
      padding: 2vh 0vw;

      h3 {
        font-size: 20px;
      }

      .brand-slide {
        border: 1px solid var(--gray-color);
        padding: 2vh 2vw;
        border-radius: 10px;
        margin: 10px;
        text-align: center;

        a {
          display: block;
          text-decoration: none;
          text-align: center;
        }

        img {
          width: 80px;
          height: 60px;
          object-fit: contain;
        }

        .brandName {
          font-family: var(--font-family);
          font-size: 18px;
          font-weight: 600;
          color: var(--black-color);
        }

        .quantity {
          color: var(--secondary-color);
          font-family: var(--font-family);
          font-size: 14px;
        }
      }

      .swiper-pagination {
        bottom: -0px !important;

        .swiper-pagination-bullet-active {
          background-color: var(--primary-color);
        }
      }
    }

    .forth-sec {
      padding: 2vh 1vw;

      h3 {
        font-size: 20px;
      }

      p {
        font-size: 14px;
      }

      .row {
        padding: 0vh 2vw;

        > div {
          width: 48%;
          margin: 5px auto;

          .col {
            width: 100%;
            padding: 4vh 1vw;
            margin: auto;

            img {
              width: 40px;
              height: 40px;
              object-fit: contain;
            }

            h4 {
              font-size: 20px;
              margin: 1vh 0vw;
            }

            p {
              font-size: 14px;
              margin-bottom: 3vh;
            }

            a {
              font-size: 12px;
              padding: 5px 10px;
            }
          }
        }
      }
    }

    .fivth-sec {
      padding: 2vh 0vw;

      .top-sec {
        h3 {
          width: 60%;
        }
      }

      .row {
        width: 96%;
        margin: auto;

        > div {
          width: 49.5%;
          margin: 5px auto;
          padding: 0;
        }
      }
    }

    .sixth-sec {
      padding: 2vh 1vw;
    }

    .seventh-sec {
      padding: 2vh 0vw;

      .row {
        width: 97%;
        margin: auto;
        padding: 0;

        .cols {
          width: 32%;
          margin: 3px auto;

          a {
            margin-bottom: 5px;

            img {
              width: 50px;
              height: 40px;
            }
          }
        }
      }
    }

    .eight-sec {
      padding: 2vh 1vw;

      .mySwiper {
        .swiper-wrapper {
          .swiper-slide {
            height: 35dvh;
            padding: 1vh 2vw;

            div {
              z-index: 100;
              width: 70%;

              h1 {
                font-size: 20px;
                line-height: 110%;
                margin-bottom: 10px;
              }

              p {
                font-size: 14px;
                line-height: 105%;
              }

              a {
                font-size: 12px;
                padding: 5px 8px;
              }
            }
          }
        }

        .swiper-pagination {
          bottom: -0px !important;

          .swiper-pagination-bullet-active {
            background-color: var(--primary-color);
          }
        }
      }
    }

    .night-sec {
      padding: 2vh 1vw;

      .top-sec {
        h3 {
          width: 60%;
        }
      }

      .blogs-row {
        width: 97%;
        margin: auto;

        .blogs-col {
          width: 100%;
          margin: 3px auto;

          .position-relative {
            img {
              width: 100%;
              height: 150px;
              object-fit: cover;
            }

            .date {
              font-size: 10px;
            }
          }

          .content {
            padding: 10px 10px;

            .d-flex {
              align-items: center;
              gap: 1vh 0.5vw;
              color: var(--gray-color);
            }

            h3 {
              font-size: 16px;
            }

            p {
              font-size: 14px;
              line-height: 15px;
            }
          }
        }
      }
    }

    .tenth-sec {
      padding: 2vh 0vw;

      h3 {
        font-size: 20px;
      }

      .row {
        .col-2 {
          img {
            object-fit: contain;
          }
        }
      }
    }
  }

  /* --------------------- Home Section Styling End ---------------------  */
  /* --------------------- About Section Styling Start ---------------------  */
  .About-section {
    .heading {
      font-size: 20px;
      font-weight: 600;
    }

    .main-section {
      height: 50dvh;

      div {
        z-index: 90;
        gap: 2vh 0vw;

        h1 {
          font-size: 30px;
        }

        p {
          font-size: 14px;
          margin: 2vh 0vw;
        }

        a {
          padding: 8px 20px;
          font-size: 12px;
        }
      }
    }

    .main-section::after {
      height: 50dvh;
    }

    .second-sec {
      padding: 5vh 0vw;

      > .row {
        width: 98%;
        margin: auto;

        > div {
          h3 {
            font-size: 20px;
          }

          p {
            font-size: 14px;
          }

          .d-flex {
            margin: 1vh 1vw;

            div {
              padding: 0vh 1vw;

              h6 {
                font-size: 20px;
              }

              p {
                font-size: 14px;
              }
            }
          }
        }
      }
    }

    .forth-sec {
      padding: 2vh 0vw;

      .row {
        > div {
          width: 16.5%;
          margin: auto;

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

    /* .fivth-sec {
      padding: 5vh 0vw;

      .gtco-testimonials {
        position: relative;
        border-radius: 15px;
        width: 100%;

        .swiper {
          width: 100%;

          .swiper-slide {
            .card {
              background: rgba(255, 113, 1, 0.06);
              margin: 0 15px;
              padding: 25px;
              border-radius: 20px;
              border: 0;
              transition: all 0.4s ease;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              opacity: 0.7;
              transform: scale(0.95);
              height: 100%;

              .d-flex {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                margin-bottom: 15px;

                .ratting-icon {
                  display: flex;
                  gap: 3px;

                  span {
                    color: #ff7101;
                    font-size: 14px;
                  }
                }

                .date-time {
                  font-size: 12px;
                  color: #696665;
                }
              }

              .card-text {
                font-size: 16px;
                color: #555;
                line-height: 1.6;
                text-align: center;
                font-style: italic;
                margin: 10px 0;
              }

              .client-info {
                display: flex;
                align-items: center;
                width: 100%;
                margin-top: 20px;

                img {
                  width: 50px !important;
                  height: 50px;
                  object-fit: cover;
                  border-radius: 50%;
                  margin-right: 15px;
                  border: 2px solid #e3f2fd;
                }

                div {
                  h5 {
                    font-size: 16px;
                    margin: 0;
                    margin-bottom: 3px;
                    color: #333;
                  }

                  p {
                    font-size: 14px;
                    color: #696665;
                    margin: 0;
                  }
                }
              }
            }
          }
        }
      }
    } */

    .sixth-sec {
      padding: 5vh 0vw;
      width: 95%;
      margin: auto;

      .swiper {
        position: relative;
        padding-bottom: 40px;
        width: 100%;
      }

      .swiper-wrapper {
        width: 100%;

        .car-sell-cart {
          width: 100%;

          a {
            img {
              height: 220px;
              object-fit: cover;
            }
          }
        }
      }
    }
  }
  /* --------------------- About Section Styling end ---------------------  */
  /* --------------------- Shop Section Styling Start ---------------------  */
  .Shop-Section {
    margin-top: 60px;

    .main-section {
      padding: 4vh 0vw;

      h2 {
        font-size: 20px;
        letter-spacing: 0px;
      }

      p {
        font-size: 14px;
        margin: 0;
      }

      .row {
        margin: 5px 0px;
        padding: 10px 0px;

        > .col-lg-3 {
          border-radius: 10px;
          form {
            padding: 0vh 2vw;
          }
        }

        .col-lg-9 {
          margin: 0;
          padding: 0;

          > .col-sm-6 {
            width: 49%;
            width: 1vh auto;
            .car-listing-cell {
              width: 100%;
              padding: 10px;

              a {
                img {
                  height: 150px;
                  object-fit: contain;
                }
              }

              .model {
                line-height: 100%;
              }
            }
          }
        }
      }
    }
  }
  /* --------------------- Shop Section Styling End ---------------------  */
  /* --------------------- FAQs Style Start ---------------------  */
  .Faqs-Section {
    .heading-icons {
      margin: 2vh auto;

      h2 {
        font-size: 18px;
      }

      .icon {
        display: block;

        h6 {
          text-align: center;
          font-size: 12px;
          margin: 1vh auto;
        }
      }
    }
  }
  /* --------------------- FAQs Style End ---------------------  */
  /* --------------------- Contact Styling Start ---------------------  */
  .contact-section {
    margin-top: 80px;

    .main-section {
      width: 96%;
      margin: auto;

      iframe {
        height: 30dvh;
      }
    }

    .second-sec {
      width: 96%;
      margin: 1vh auto;

      .row {
        > div {
          h2 {
            font-size: 20px;
          }

          p {
            font-size: 14px;
          }

          form {
            .col-md-6 {
              width: 49%;
              margin: auto;
            }
            > div {
              label {
                font-size: 12px;
              }

              .input {
                padding: 5px 5px;
                border-radius: 5px;
              }
            }

            button {
              padding: 8px;
              border-radius: 10px;
              font-size: 14px;
            }
          }
        }

        .col-lg-4 {
          padding: 1vh 1vw;
          height: 100%;
          width: 96%;
          margin: 2vh auto;

          > div {
            padding: 1vh 0vw;

            h6 {
              font-size: 14px;
              margin: 5px 0;
            }

            a {
              font-size: 12px;
            }

            p {
              font-size: 12px;
              margin: 5px 0;
            }
          }

          .social-icon {
            a {
              border: 1px solid var(--half-black-color) !important;
              display: inline-block;
              padding: 10px;
              border-radius: 50%;
              transition: 0.3s;
              font-size: 16px;
            }
          }
        }
      }
    }

    .third-sec {
      padding: 2vh 0px;
      .row {
        > div {
          width: 16%;
          margin: auto;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }
  /* --------------------- Contact Styling End ---------------------  */

  footer {
    padding: 5vh 0vw 1vh 0vw;
    background-color: var(--red-color);

    .first-container {
      .row {
        .col-lg-3 {
          align-items: center;
          width: 49%;
          margin: auto;

          img {
            width: 50px;
            height: 50px;
          }

          div {
            margin: 0vh 1vw;

            h5 {
              margin: 0px;
              font-size: 18px;
            }

            p {
              margin: 0;
              font-size: 12px;
            }
          }
        }
      }
    }
    .second-container {
      .row {
        div {
          h4 {
            color: var(--black-color);
          }
          width: 50%;
          margin-bottom: 2vh;
        }
        div:last-child {
          width: 100%;
        }
      }
    }
  }
}

/* --------------------- Responsive for Mobile Styling End ---------------------  */