style.css

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  background-color: rgba(239, 233, 221, 1);
  scroll-behavior: smooth;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
body {
  max-width: 100%;
  margin: auto;
  padding-top: 80px;
}
@font-face {
  font-family: BebasKai;
  src: url("./BebasKai.ttf");
}
@font-face {
  font-family: Montserrat;
  src: url("./Montserrat-VariableFont_wght.ttf");
}
@font-face {
  font-family: expofont;
  src: url("./ExpoArabic-Book.ttf");
}

@font-face {
  font-family: expofontBold;
  src: url("./ExpoArabic-Bold.otf");
}

.card {
  margin: 15px 0 20px;
  width: 380px;
  display: flex;
  justify-content: center;
  position: relative;
  margin-inline: auto;
  padding-block: 8px;
  padding-bottom: 180px;
  border-radius: 23px;
  background-color: rgba(255, 255, 255, 1);
}

.card .car-details {
  width: 96%;
  position: absolute;
  bottom: 20px;
  display: flex;
  align-items: center;
  text-align: end;
  justify-content: space-around;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  font-family: expofont;
  font-size: 16px;
  left: 50%;
  transform: translateX(-50%);
}
.card .car-details p {
  font-weight: 400;
}
.card .car-details .details {
  width: 40%;
  font-weight: 900;
}
.card .car-details .price {
  width: 40%;
  font-family: expofont;
  font-weight: 800;
  line-height: 18px;
}

.card .car-details .price .currency {
  margin: 0;
  font-family: expofontBold;
  font-weight: 900;
  font-size: 22px;
}

.card .car-details .code,
.card .car-details .num,
.number-plate .code,
.number-plate .num {
  font-family: BebasKai;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.card .car-details .star {
  position: relative;
  width: 5%;
}

.card .car-details .star img {
  width: 36px;
  height: 36px;
  position: relative;
  top: -22px;
}

.contact,
#numbers {
  width: 90%;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  direction: rtl;
  gap: 20px;
}
.contact {
  /* position: absolute; */
  width: 100%;
  text-align: center;
  justify-content: center;
  column-gap: 15px;
}
.contact .call-us,
.contact .chat-with-us {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 47%;
  height: 38px;
  border-radius: 4px;
  background: rgba(25, 37, 64, 1);
  color: white;
  font-family: expofont;
  font-weight: 500;
}

.contact .call-us::before,
.contact .chat-with-us::before {
  position: relative;
  right: 8px;
  top: 2.2px;
}

.contact .call-us::before {
  content: url("./images/tel.png");
}
.contact .chat-with-us::before {
  content: url("./images/whatsapp.png");
}

#numbers {
  margin-block: 20px;
}
#numbers #car-numbers,
#numbers #bike-numbers {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45%;
  height: 48px;
  border-radius: 6px;
  background: #192540;
  color: #ebaf29;
  font-family: expofont;
  font-weight: 500;
  font-size: 20px;
  max-width: 200px;
}

#numbers #car-numbers::before,
#numbers #bike-numbers::before {
  position: relative;
  right: 8px;
  top: 1px;
}
@media (max-width: 768px) {
  #numbers #car-numbers,
  #numbers #bike-numbers {
    height: 38px;
    font-size: 15px;
  }
}
.number-plate {
  position: absolute;
  left: 50%;
  bottom: 10%;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  gap: 10px;
}
.number-plate .code {
  position: absolute;
  font-size: 30px;
  bottom: -22.5px;
  left: 28px;
}
.number-plate .num {
  position: absolute;
  bottom: -30px;
  left: 35%;
  font-size: 40px;
  letter-spacing: 5px;
  font-weight: 500 !important;
}
.car .imgCar {
  display: block;
  margin: auto;
}
.car {
  margin-bottom: 10px;
}
.car-number {
  position: relative;
}
.add_carnum {
  position: relative;
  width: max-content;
  margin: auto;
  max-width: 100%;
  width: 100%;
  height: 500px;
  margin: 60px 0px;
}
.add_carnum .car-image {
  width: 100%;
  height: 100%;
  filter: brightness(110%) contrast(90%) saturate(120%) sepia(10%);
  background-color: #a37511ec;
  object-fit: cover;
}

.add_carnum .content {
  position: absolute;
  box-sizing: border-box;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 94%;
}
.add_carnum p {
  margin-block: 10px;
}
.add_carnum .headline,
#questions > .title {
  font-family: expofontbold;
  color: white;
  font-size: 24px;
  text-shadow: 2px 2px rgba(0, 0, 0, 0.616);
}
.add_carnum .logo {
  width: 140px;
  height: 70px;
}

.add_carnum .description,
#questions .description {
  font-family: expofont;
  color: #ebaf29;
  font-size: 14px;
  margin-bottom: 18px;
}

.add_carnum .add {
  width: 380px;
  height: 60px;
  box-sizing: border-box;
  padding: 18px 20px 15px 90px;
  border-radius: 4px;
  font-family: expofont;
  font-weight: 700;
  word-spacing: 1px;
  font-size: 20px;
  background: #192540;
  color: white;
  text-decoration: none;
  position: relative;
}
.add_carnum .add::after {
  position: absolute;
  left: 30px;
  top: 4px;
  content: url("./images/icon-park-twotone_hand-painted-plate.svg");
  width: 44px;
  aspect-ratio: 1/ 1;
}

#questions {
  width: 100%;
  margin-top: 14px;
}

#questions > * {
  text-align: center;
  display: block;
  margin: 0 auto;
}

#questions > .title {
  margin: 20px 0 10px 0;
  text-shadow: none;
  color: #192540;
}

#questions > .description {
  color: #192540;
}

#features {
  margin: 20px 0px 46px;
  display: flex;
  justify-content: center;
  gap: 0px 20px;
  flex-wrap: wrap;
}

#features .feature p {
  margin: 4px 0;
  text-align: center;
}
#features .feature {
  box-sizing: border-box;
  text-align: right;
  width: 90%;
  padding: 20px 10px;
  margin-inline: auto;
  margin-block: 8px;
  border-radius: 10px;
  background-color: #192540;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  align-items: center;
  min-width: 220px;
  flex: 1;
}
img.imgFillter {
  width: 18px;
  object-fit: contain;
}
#features .feature .feature-title {
  font-family: expofont;
  font-weight: 600;
  font-size: 20px;
  color: #ebaf29;
  text-align: center;
}
#features .feature .feature-description {
  position: relative;
  color: #898989;
  font-family: expofont;
  font-weight: 500;
  font-size: 16px;
}

@media (max-width: 440px) {
  .add_carnum .add {
    font-size: 16px;
  }
  .add_carnum .headline,
  #questions > .title {
    font-size: 20px;
  }
}
/*fillter*/
.fillter {
  direction: rtl;
  font-family: expofont;
}
.fillter .content {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  background: white;
  margin: 0px 20px;
  padding: 20px;
  border-radius: 12px;
}
.fillter .content .boxTwo{
flex: 1;
}
.fillter .content .parts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  transition: 0.3s;
}
.fillter .content .part {
  max-width: calc(50% - 4px);
  width: 166px;
  border: 1px solid #bcbec0;
  flex: 1;
  min-width: 166px;
}
.fillter .content .part,
.fillter .content .form-control {
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 4px;
}
.fillter .content .form-control {
  width: 100%;
}
.fillter .content .part input {
  color: #192540;
  font-family: expofontBold;
  font-size: 14px;
  max-width: 100%;
  border: none;
  height: 34px;
  border-radius: 4px;
  outline: none;
  padding: 4px 8px;
}
.fillter .content .part input::placeholder {
  color: #192540;
  font-family: expofont;
  font-weight: bold;

  font-size: 14px;
}
.fillter select {
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: expofont;
  font-weight: bold;
  border: none;
  box-shadow: none !important;
  height: 34px !important;
  min-height: 34px !important;
}
.fillter .form-group {
  width: 100%;
}
.fillter select:focus {
  font-family: expofont;
  font-size: 14px;
  font-weight: bold;
}
.fillter .content .sel::before {
  border: none;
  width: 12px;
  height: 22px;
  background-image: url(./images/Vector.png);
  background-repeat: no-repeat;
  background-position: center;
  background-position-y: 6px;
  background-size: 12px;
  left: 10px;
}
.fillter .content .part1 {
  display: flex;
  gap: 6px;
  border-radius: 4px;
  padding: 4px 10px;
  background: #eee9dc;
  width: 220px;
  height: 36px;
  align-items: center;
}
.fillter .content .part .dropdown {
  direction: rtl;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  padding: 6px;
}
.fillter .dropdown-toggle::after {
  border: none;
  width: 12px;
  height: 22px;
  background-image: url("./images/Vector.png");
  background-repeat: no-repeat;
  background-position: center;
  background-position-y: 6px;
  background-size: 12px;
}
.fillter .content h4 {
  margin: 0px;
  font-size: 16px;
  color: rgba(25, 37, 64, 1);
  font-weight: bold;
  font-family: expofont;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fillter .content .part1 h4 {
  font-family: expofontBold;
  font-size: 15px;
}
.fillter .content .part ul {
  max-width: 100%;
  min-width: max-content;
  inset: 5px auto auto -21px !important;
  background: #eee9dc;
  padding: 8px 4px;
  border-radius: 8px;
}
.fillter .content .part ul li {
}
.fillter .content .part ul a {
  font-size: 14px;
  transition: 0.2s;
  padding: 4px 8px;
  border-radius: 4px;
}
.fillter .content .part ul a:hover {
  color: #e0aa0a;
  background-color: #1b2541;
}
.fillter .btnSearch {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1b2541;
  color: #e6ae08;
  border-radius: 6px;
  width: 166px;
  height: 38px;
  border: none;
  padding: 5px 10px;
  gap: 10px;
}
.fillter .btnSearch svg {
  width: 22px;
}
.fillter .btnSearch input {
  background: #1b2541;
  color: #e6ae08;
  border-radius: 8px;

  border: none;
}
.fillter .content .showMore {
  color: #164fd2;
  font-size: 15px;
  font-family: expofontBold;
  background-color: transparent;
  border: none;
  margin: 16px 0px 0px;
}
.fillter .content .part.more {
  display: none;
  transition: 0.3s;
}
.fillter .content.showMorePart .part.more {
  display: block;
}
.fillter .content.showMorePart .showMore {
  display: none;
}
@media(max-width:768px){
  .fillter .content {
    flex-direction: column;
}
.fillter .content .part {
  max-width: 100%;
  min-width: 120px;
}
.fillter .content .part1 {
 width: 100%;
}
}
/*contactUs*/
.contactUs {
  direction: rtl;
  width: 96%;
  max-width: 600px;
  margin: 120px auto 20px; 
}
.contactUs h1 {
  font-size: 24px;
  font-family: expofontBold;
  margin-bottom: 26px;
  color: rgba(25, 37, 64, 1);
}
.contactUs .topInput {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.contactUs form {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-bottom: 26px;
  padding: 0px 12px;
}
.contactUs form label {
  font-size: 16px;
  font-family: expofontBold;
}
.contactUs form input {
  font-family: expofontBold;
  font-size: 20px;
  height: 40px;
  width: 100%;
  border: none;
  border-radius: 4px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
  padding: 8px 10px;
}
.contactUs form p {
  font-size: 10px;
  font-family: expofont;
  margin: 0;
}
.contactUs form p.info {
  font-size: 8px;
  max-width: 270px;
  margin-top: 4px;
}
.form-control {
  appearance: none;
  min-height: 40px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
}
.contactUs form option {
  font-family: expofontBold;
  font-size: 16px;
}
.sel {
  position: relative;
  display: block;
}
.sel::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  background-image: url("./images/arrow.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  width: 12px;
  height: 6px;
}
.contactUs select {
  font-family: expofontBold;
  font-size: 16px;
}
select::selection {
  color: red;
  background: yellow;
}
select:focus {
  font-family: expofontBold;
  font-size: 16px;
}
select option {
  padding: 8px; /* Add padding to the options */
}
.contactUs .price {
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.contactUs .price h2 {
  font-family: expofontBold;
  font-size: 16px;
  margin: 0;
}
.contactUs .codeCountry {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 4px;
  gap: 6px;
  background-color: white;
  height: 40px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);

  min-width: 108px;
}
.contactUs .codeCountry p {
  font-family: expofontBold;
  font-size: 20px;
}
.contactUs .codeCountry img {
  max-width: 100%;
  height: auto;
}
.contactUs form input[type="tel"] {
  padding: 8px 16px;
}
.contactUs .selectTypeContact {
}
.contactUs .selectTypeContact label {
  margin-left: 10px;
}
.contactUs .selectTypeContact .part1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.contactUs .selectTypeContact .part1 input {
  box-shadow: none;
  width: 18px;
  height: 18px;
  background-color: #eee9dc;
  border-radius: 4px;
  border: 2px solid;
}
.contactUs .form-check-input:checked[type="checkbox"] {
  background-image: url("./images/true.svg");
  background-size: 66%;
}
.contactUs .selectTypeContact .part1 .custom-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-direction: row-reverse;
}
.contactUs .checkAgree {
  padding-right: 0;
}
.contactUs .checkAgree input {
  width: 18px;
  height: 18px;
  float: left;
  background-color: #eee9dc;

  border: 2px solid;
  box-shadow: none;
}
.contactUs .btnSend {
  background: rgba(25, 37, 64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  border-radius: 4px;
  margin-top: 24px;
  margin-bottom: 100px;
}
.contactUs .btnSend p {
  font-size: 20px;
  font-family: expofontBold;
  margin: 0;
  color: white;
}
.contactUs .btnSend img {
}
/*nextContent*/
.nextContent {
  direction: rtl;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 900px;
  margin: 20px auto 24px;
  padding: 0px 20px;
}
.nextContent button {
  flex: 1;
  background: rgba(235, 175, 41, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  border: none;
  max-width: 182px;
}
.nextContent button p {
  color: rgba(25, 37, 64, 1);
  font-size: 16px;
  font-family: expofontBold;
  margin: 0;
}
.nextContent button p img {
}
.nextContent .next {
  flex-direction: row-reverse;
}
.nextContent .prev {
}
.nextContent .prev img {
  transform: rotate(180deg);
}
@media (max-width: 500px) {
  .nextContent {
    padding: 0px 20px;
  }
}
/*sliderImgs*/
.sliderImgs {
  width: 100%;
  margin: auto;
}
.sliderImgs .swiper-horizontal {
  touch-action: pan-y;
  width: 100%;
  height: auto;
}
.sliderImgs .swiper-pagination {
  top: 90%;
}
.sliderImgs img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
}
@media (max-width: 440px) {
  .sliderImgs {
    width: 100%;
  }
  .sliderImgs .swiper-horizontal {
    width: 100%;
  }

}
/*cars*/
.cars {
  direction: rtl;
  display: flex;

  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.cars .cardNew {
  padding: 8px 8px 8px;
  background-color: white;
  border-radius: 14px;
  min-width: 360px;
  flex: 1;
  max-width: 360px;
}
.cars .cardNew .carInfo {
  position: relative;
}
.cars .cardNew .carInfo .imgCar {
  width: 100%;
  border-radius: 4px;
  display: block;
  margin: auto;
}
.cars .cardNew .carInfo .svgNum {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 90%;
  height: 68px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carsNew .cardNew .carInfo .svgNum.bike {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: auto;
}
.cars .cardNew .carInfo .featuresCar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  justify-content: flex-end;
  position: absolute;
  top: 14px;
  left: 0;
}
.cars .cardNew .carInfo .featuresCar p {
  font-size: 12px;
  padding: 4px 12px;
  margin: 0;
  text-align: center;
  color: rgba(25, 37, 64, 1);
  font-family: expofontBold;
}
.cars .cardNew .carInfo .featuresCar .pNew {
  background: rgba(235, 175, 41, 1);
}
.cars .cardNew .carInfo .featuresCar .goodPrice {
  background: rgba(66, 255, 0, 1);
}
.cars .cardNew .carInfo .featuresCar .three {
  background: rgba(255, 154, 154, 1);
}
.cars .cardNew .carDetails {
  padding: 0px 10px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 12px 0px 16px;
  position: relative;
}
.cars .cardNew .carDetails .part {
}
.cars .cardNew .carDetails .part p {
  margin: 0;
  font-family: expofont;
  line-height: 28px;
  word-spacing: 8px;
  text-wrap: nowrap;
}
.cars .cardNew .carDetails .part .boldSpan {
  font-family: expofontBold;
}
.cars .cardNew .carDetails .part .numCar {
  font-family: Montserrat;
  letter-spacing: 3px;
  font-weight: 700;
}
.cars .cardNew .carDetails .details {
  flex: 1;
}
.cars .cardNew .carDetails .price {
  flex: 1;
}
.cars .cardNew .carDetails .price .currency {
  font-family: expofontBold;
  font-size: 20px;
}
.cars .cardNew .carDetails .star {
  position: absolute;
  left: 20px;
}
 .contactCar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
 .contactCar a {
  padding: 6px 10px;
  border-radius: 8px;
  background-color: rgba(25, 37, 64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  text-decoration: none;
}
 .contactCar a p {
  color: white;
  font-size: 16px;
  font-family: expofont;
  margin: 0;
}
 .contactCar a img {
}
.cars .cardNew .carDetails .star {
  display: none;
}
@media (max-width: 1200px) {
  .cars .cardNew {
    min-width: 306px;
  }
}
@media (max-width: 768px) {
  .cars {
    gap: 14px 10px;
  }
  .cars .cardNew {
    width: 306px;
    flex: 1;
    min-width: 184px;
    padding: 4px 4px 8px;
    border-radius: 8px;
  }

  .cars .cardNew .carInfo .svgNum {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 90%;
    height: 40px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cars .cardNew .carInfo .featuresCar {
    gap: 2px;
  }
  .cars .cardNew .carInfo .featuresCar p {
    font-size: 10px;
    padding: 2px 6px;
  }
  .cars .cardNew .carDetails {
    padding: 0px 10px;

    gap: 20px;
  }
  .cars .cardNew .carDetails .part {
  }
  .cars .cardNew .carDetails .part p {
    line-height: 16px;
    word-spacing: 2px;
    font-size: 10px;
  }

  .cars .cardNew .carDetails .part .numCar {
    letter-spacing: 3px;
    font-weight: 700;
  }
  .cars .cardNew .carDetails .price .currency {
    font-size: 17px;
    height: 18px;
  }

 .contactCar {
    gap: 6px;
  }
 .contactCar a {
    padding: 6px 8px;
  }
 .contactCar a p {
    font-size: 10px;
  }
 .contactCar a img {
    height: 14px;
  }

}
@media (max-width: 440px) {
 .contactCar a p {
    font-size: 8px;
  }
.contactCar a img {
    height: 12px;
  }
  .cars .cardNew .carDetails {
    margin: 8px 0px 8px;
    gap: 12px;
  }

}
.swiper-pagination-bullet {
  background: #1b2541;
  opacity: 0.3;
  transition: 0.2s;
}
.swiper-pagination-bullet-active {
  background-color: #e6ae08;
  opacity: 1;
}
.successBox {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 5000;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #80807f8a;
  transition: 0.5s;
  opacity: 1;
}
.successBox.false {
  opacity: 0 !important;
  display: none;
}
.successBox .content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
  width: 400px;
  padding: 24px;
  max-width: 100%;
  border-radius: 38px;
  text-align: center;
  background-color: white;
}
.successBox .content img {
  width: 236px;
  height: 236px;
  margin: auto;
}
.successBox .content h2 {
  font-size: 28px;
  font-weight: 800;
  font-family: expofontBold;

  text-align: center;
  margin: 0;
}
.successBox .content p {
  font-family: expofont;
  font-size: 14px;
  text-align: center;
  margin: 0;
}

.successBox .content a {
  background: rgba(25, 37, 64, 1);
  width: 290px;
  padding: 18px;
  max-width: 94%;
  border-radius: 4px;
  color: rgba(243, 190, 70, 1);
  font-size: 16px;
  font-family: expofont;
  text-decoration: none;
}
.page {
  margin: 20px 0px;
  padding: 0px 12px;
}
.page h1 {
  font-size: 26px;
  font-family: expofontbold;
  text-align: start;
  direction: rtl;
}
.page p {
  font-size: 18px;
  font-family: expofont;
}
.page li {
  font-size: 18px;
  font-family: expofont;
}
/*cars New*/
/*cars*/
.sectionCars {
  margin: 60px 0px;
}
.carsNew {
  direction: rtl;
  display: flex;
  gap: 26px 16px;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.carsNew .cardNew {
  padding: 4px 4px 6px;
  background-color: white;
  border-radius: 5px;
  width: 306px;
  flex: 1;
  min-width: 184px;
}
.carsNew .cardNew .carInfo {
  position: relative;
}
.carsNew .cardNew .carInfo .imgCar {
  width: 100%;
  border-radius: 3px;
  display: block;
  margin: auto;
}
.carsNew .cardNew .carInfo .svgNum {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 90%;
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carsNew .cardNew .carInfo .featuresCar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  justify-content: flex-end;
  position: absolute;
  top: 14px;
  left: 0;
}
.carsNew .cardNew .carInfo .featuresCar p {
  font-size: 10px;
  padding: 2px 6px;
  margin: 0;
  text-align: center;
  color: rgba(25, 37, 64, 1);
  font-family: expofontBold;
}
.carsNew .cardNew .carInfo .featuresCar .pNew {
  background: rgba(235, 175, 41, 1);
}
.carsNew .cardNew .carInfo .featuresCar .goodPrice {
  background: rgba(66, 255, 0, 1);
}
.carsNew .cardNew .carInfo .featuresCar .three {
  background: rgba(255, 154, 154, 1);
}
.carsNew .cardNew .carDetails {
  padding: 0px 10px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 4px 0px 5px;
  position: relative;
}
.carsNew .cardNew .carDetails .part {
}
.carsNew .cardNew .carDetails .part p {
  margin: 0;
  font-family: expofont;
  line-height: 22px;
  word-spacing: 2px;
  font-size: 12px;
}
.carsNew .cardNew .carDetails .part .boldSpan {
  font-family: expofontBold;
}
.carsNew .cardNew .carDetails .part .numCar {
  font-family: Montserrat;
  letter-spacing: 3px;
  font-weight: 700;
}
.carsNew .cardNew .carDetails .details {
  flex: 1;
}
.carsNew .cardNew .carDetails .price {
  flex: 1;
}
.carsNew .cardNew .carDetails .price .currency {
  font-family: expofontBold;
  font-size: 17px;
  height: 18px;
}
.carsNew .cardNew .carDetails .star {
  position: absolute;
  left: 20px;
  display: none;
}
 .contactCar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
 .contactCar a {
  padding: 6px 8px;
  border-radius: 4px;
  background-color: rgba(25, 37, 64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  text-decoration: none;
}
 .contactCar a p {
  color: white;
  font-size: 10px;
  font-family: expofont;
  margin: 0;
}
 .contactCar a img {
  height: 14px;
  width: auto;
}
@media (max-width: 440px) {
  .contactCar a {
    padding: 6px 4px;
    gap: 4px;
}
.contactCar a img {
  height: 12px;
  width: auto;
}
}
/*con*/
.con {
  padding: 0px 22px;
  margin-top: 20px;
}
/*about*/
.about {
  margin: 10px auto 14px;
}
.about h1 {
  color: #192540;
  font-size: 24px;
  margin-bottom: 4px;
  text-align: center;
  font-family: expofontBold;
}
.about h2 {
  color: #666666;
  font-size: 14px;
  margin-bottom: 0px;
  text-align: center;
  font-family: expofont;
}
/*step*/
.step {
  width: 100%;
  background-color: #192540;
  color: #ebaf29;
  text-align: center;
  padding: 8px 18px;
  border-radius: 5px;
  font-family: expofont;
  margin-bottom: 4px;
  font-size: 15px;
}
/*flaps*/
.flaps {
  direction: rtl;
}
.flaps .headFlaps {
  background-color: #ebaf29;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 6px;
  padding: 4px 10px;
  height: 46px;
  margin-bottom: 12px;
}
.flaps .headFlaps h2 {
  font-size: 15px;
  font-family: expofont;
  font-weight: 700;
  color: #192540;
  margin: 0;
}
.flaps .headFlaps button {
  background-color: transparent;
  border: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.flaps .headFlaps button svg {
  width: 30px;
  height: 30px;
}
.flaps .allFlaps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}
.flaps .allFlaps .flap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.flaps .allFlaps .flap .part {
  flex: 1;
  width: 86px;
}
.flaps .allFlaps .flap .part.code {
  width: 64px;
}
.flaps .allFlaps .flap .part .form-group {
  width: 100%;
  height: 34px;
  min-height: 34px;
}
.flaps .allFlaps .flap .part .form-group .form-control {
  min-height: 34px;
  height: 34px;
  font-size: 14px;
  color: #6d6e70;
  box-shadow: none;
  font-family: expofont;
  border: none;
  font-weight: 600;
}
.flaps .allFlaps .flap .part input {
  max-width: 100%;
  border: none;
  height: 34px;
  border-radius: 5px;
  font-size: 14px;
  font-family: expofont;
  color: #6d6e70;
  font-weight: 600;
  outline: none;
  padding: 0px 6px;
  width: 100%;
}
.flaps .allFlaps .flap .part input::placeholder {
  font-family: expofont;

  font-weight: 600;
  font-size: 14px;
  color: #6d6e70;
}
.flaps .allFlaps .flap .delete {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  width: 28px;
  border-radius: 50%;
  border: 3px solid red;
  background: transparent;
}
.flaps .allFlaps .flap .delete p {
  font-size: 22px;
  margin: 0;
  margin-bottom: 7px;
  color: red;
  font-weight: 700;
  font-family: cursive;
}
.flaps .allFlaps .flap:first-of-type .delete {
  display: none;
}
/*stepTwo*/
.stepTwo {
  margin-bottom: 200px;
  direction: rtl;
}
.stepTwo .part {
  margin-bottom: 16px;
  margin-top: 22px;
}
.stepTwo .part label {
  font-size: 15px;
  font-family: expofont;
  margin-bottom: 4px;
  color: black;
  font-weight: 600;
}
.stepTwo .part input {
  width: 100%;
  height: 34px;
  border: none;
  border-radius: 6px;
  font-family: expofont;
  font-weight: 600;
  font-size: 14px;
  color: #192540;
  padding: 8px 10px;
  outline: none;
}
.stepTwo .part input::placeholder {
  font-family: expofont;

  font-weight: 600;
  font-size: 14px;
  color: #6d6e70;
}
.stepTwo label {
  font-size: 15px;
  font-family: expofont;
  margin-bottom: 4px;
  color: black;
  font-weight: 600;
}
.stepTwo .backGround {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.stepTwo .backGround button {
  flex: 1;
  height: 34px;
  border-radius: 5px;
  padding: 8px 10px;
  border: none;
  font-size: 15px;
  font-family: expofont;
  text-align: start;
  font-weight: 600;
}
.stepTwo .backGround .light {
  background-color: white;
  color: #6d6e70;
  border: 1px solid;
}
.stepTwo .backGround .dark {
  background-color: black;
  color: white;
}
.stepTwo .colors {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 24px;
}
.stepTwo .colors button {
  width: 70px;
  height: 35px;
  border-radius: 5px;
  border: 1px solid;
  flex: 1;
}
.stepTwo .colors button.active {
  border: 2px solid black;
}
.btnPage1{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  height: 38px;
  width: 100%;
  background-color: #192540;
  border-radius: 6px;
  color: #ebaf29;
  font-size: 16px;
  margin: 0;
  font-family: expofont;
  border: none;
  max-width: 400px ;
  margin: auto;
  text-decoration: none;
}
.btnPage1:hover{
  color: #ebaf29;

}
.btnPage2{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  height: 38px;
  width: 100%;
  background-color: transparent;
  border-radius: 6px;
  color: #192540;
  font-size: 16px;
  margin: 0;
  font-family: expofont;
  border: none;
  border: 1px solid #192540;
  max-width: 400px ;
margin: 10px auto;
text-decoration: none;
}
.btnPage2:hover{
  color: #192540;

}
.stepTwo .btnPage2{
  margin-bottom: 22px;
}
.stepTwo .upLoadImg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  height: 80px;
  width: 100%;
  background-color: #192540;
  border-radius: 6px;
}
.stepTwo .upLoadImg p {
  color: #ebaf29;
  font-size: 32px;
  margin: 0;
  font-family: expofont;
}
.stepTwo .upLoadImg svg {
  width: 40px;
  height: 40px;
}
.stepTwo .upLoadImg .LoadInput {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 50;
  opacity: 0;
  cursor: pointer;
  border-radius: 6px;
}

/*shap*/
.shap {
  position: relative;
  width: 430px;
  height: 480px;
  direction: rtl;
  margin: 0px auto 26px;
}
.shap .imgShap {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: black;
}
.shap .imgShap::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("./images/back.png");
  background-size: cover;
}
.shap .imgShap.white::before {
  opacity: 40%;
}
.shap .info {
  position: absolute;
  top: calc(50% - 28px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 94%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shap .info .part1 {
  display: flex;

  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.shap .info .part {
  max-width: 240px;
}

.shap .info .svgImg {
  height: 50px;
  margin-bottom: 4px;
}
.shap .info .svgImg svg {
}
.shap .info h3 {
  color: white;
  font-size: 22px;
  margin: 0;
  letter-spacing: -2px;
}
.shap .contactShap {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #e50000;
  padding: 10px;
  z-index: 50;
}
.shap .contactShap h4 {
  font-size: 15px;
  color: white;
  font-family: expofont;
  margin: 0;
}
.shap .contactShap p {
  direction: ltr;
  font-size: 15px;
  color: white;
  margin: 0;
  font-family: expofont;
}
.shap .comment {
  position: absolute;
  bottom: 44px;
  width: 100%;
}
.shap .comment p {
  font-size: 15px;
  color: white;
  padding: 0px 12px;
  font-family: expofont;
  text-align: end;
  margin: 0;
}

.shap .info.twoPart {
  gap: 20px;
  align-items: flex-start;
}
.shap .info.twoPart .part1 {
}
.shap .info.twoPart .part1 .part {
}
.shap .info.twoPart .part1 .part .svgImg {
  height: 44px;
}
.shap .info.twoPart .part1 .part .svgImg iframe {
}
.shap .info.twoPart .part1 .part h3 {
  font-size: 18px;
}
.topBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px 0px;
  position: fixed;
  bottom: 44px;
  right: 30px;
  z-index: 50000;
}
.topBtn button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ebaf29;
  width: 46px;
  height: 46px;
  padding: 4px;
  border-radius: 50%;
  border: none;
  transition: 0.5s;
}
.topBtn button:hover {
  box-shadow: 4px 7px 22px #e6ae08;
}
.topBtn button svg {
}
.paginationBox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  direction: ltr;
}

.paginationBox .page-item {
  background-color: #ebaf29;
  border-radius: 0px;
  width: 34px;
  height: 38px;
  display: flex;
  align-items: center;
}
.paginationBox .page-item span {
  color: #1b2541;
}
.paginationBox .page-item .page-link {
  background-color: #ebaf29;
  border: none;
  border-radius: 0px;
  color: #1b2541;
  transition: 0.3s;
  border-right: 1px solid #fdefbd;
}
.paginationBox .page-item.active {
  background-color: #1b2541;
}
.paginationBox .page-item.active .page-link {
  color: #ffbf00;
  background-color: #1b2541;
}
.paginationBox .page-item.active span {
  color: wheat;
}
.paginationBox .pagination .page-item:first-of-type {
  border-radius: 8px 0px 0px 8px;
}
.paginationBox .pagination .page-item:first-of-type .page-link {
  border-radius: 8px 0px 0px 8px;
}

.paginationBox .pagination .page-item:last-of-type {
  border-radius: 0px 8px 8px 0px;
}
.paginationBox .pagination .page-item:last-of-type .page-link {
  border-radius: 0px 8px 8px 0px;
  border: none;
}
/*loading*/
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #352a097d;
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}

.wave {
  -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0, 0, 0, 0.2));
  /*reflection for any element*/
}

.wave span {
  display: inline-block;
  color: #fff;
  font-size: 4em;
  text-transform: uppercase;
  animation: animate 1.5s ease-in-out infinite;
  animation-delay: calc(0.1s * var(--c));
}
@keyframes animate {
  20% {
    transform: translateY(-20px);
  }
}
/*empty*/
.pageNum{
  min-height: 60vh;
}
.pageNum1{
  margin: 30px auto;
}
.empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
  gap: 30px;
  margin: 50px auto; 
}
.empty .empty-img{
  max-width: 100%;
}
.empty .title{
  font-family: expofontBold;
  font-size: 24px;
  color: #192540;
  text-align: center;
}
.dateNumber{}
.dateNumber .content{
  
}
.dateNumber .content .date{
  display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.dateNumber .content .date .craete{}
.dateNumber .content .date .craete p{
  font-size: 16px;
  font-family: expofontBold;

}
.dateNumber .content .date .sattecard{}
.dateNumber .content .date .sattecard .stateCar{
  background-color: #EBAF29;
 
  border-radius: 4px;
  font-family: expofontBold;
font-size: 12px;
width: 54px;
height: 20px;
text-align: center;
margin: 0 auto;
}
.dateNumber .content .date h2{
  font-size: 14px;
  font-family: expofont;
  margin-bottom: 2px;
  color: #87837D;
 
}
.dateNumber .content .date p{
  font-family: expofont;
  font-size: 16px;
}
.dateNumber .content .btnPage1{
  width: 140px;
  text-decoration: none;
  margin: 0;
}
.dateNumber .content .btnPage1:hover{
  color: #e0aa0a;
}
/*login*/
.login{
  margin: 60px auto 20px;
  min-height: 54vh;
}
.login h1{
  text-align: center;
}
.login form{}
.login form label{
  font-family: expofont;
font-size: 16px;
}
.login form input{
  height: 40px;
  font-size: 18px;
}
.login form .btnPage1{
  height: 56px;
  max-width: 380px;
  color: white;
  font-size: 16px;
  font-family: expofont;
  margin-bottom: 16px;
  margin-top: 20px;
}
.login form .btnPage2{
  height: 56px;
  max-width: 380px;
  border: none;
}
.login input::placeholder{
  font-size: 14px;
  font-family: expofont;

}
.login form .passcode-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 14px;
  margin: 0px auto 20px;
  direction: ltr;
}
.login form .passcode-wrapper input {
  width: 100%;
  max-width: 50px;
  height: 50px;
  text-align: center;
  padding: 0px;
  border: 1px solid #C1C1C1;
  border-radius: 5px;
}
.login.otp h3{
  font-size: 14px;
  font-family: expofont;
  font-weight: 400;
  text-align: center;
color: #192540;
}
/*pageMyArts*/
.pageMyArts{
  margin: 50px auto;
}
.pageMyArts .infoUser{}
.pageMyArts .infoUser h2{
  font-size: 18px;
  font-family: expofontBold;
margin-bottom: 8px;
text-align: center;
}
.pageMyArts .infoUser h3{
  font-size: 16px;
  font-family: expofont;
text-align: center;
margin-bottom: 20px;
direction: ltr;

}
html[dir=ltr] .pageMyArts .infoUser h3{

}
.pageMyArts .btnProfile{
  display: flex;
  align-items: center;
  justify-content: center;
  gap:  10px 20px;
  flex-wrap: wrap;
  margin: 10px 0px 27px;
}
.pageMyArts .infoUser .btnPage1 ,.pageMyArts .infoUser .btnPage2 {
  text-decoration: none;
  max-width: 151px;
  margin: 0;
}

.pageMyArts h4{
  font-size: 18px;
  font-family: expofontBold;

margin-bottom: 10px;
}
.pageMyArts .sectionCars{
  margin-top: 0;
 
}
/*userInfo*/
.userInfo{
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.userInfo img{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.userInfo .detailsUser{
 

}
.userInfo .detailsUser h3{
  font-size: 12px;
  font-family: expofont;
margin-bottom: 2px;
}
.userInfo .detailsUser h4{
  font-size: 12px;
  font-family: expofontBold;
margin: 0;
}
.dateNumber .contactCar{
  margin-top: 30px;
  gap: 16px;
  margin-bottom: 30px;
}
.dateNumber .contactCar a {
  max-width: 190px;
  height: 48px;

 }
 .dateNumber .contactCar a p{
  font-size: 16px;
  font-family: expofontBold;

 }
 .dateNumber .contactCar a img{
  width: 20px;
  height: auto;
 }
 .dateNumber .date2 p{
  font-size: 12px !important;
 }
 .sold{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #C82D24;
  padding: 6px 12px;
  width: 100%;
  max-width: 400px;
  margin: 2px auto;
  border-radius: 4px;
  min-height: 22px;
 }
 .sold p{
  color: white;
  font-size: 10px;
  font-family: expofontBold;
margin: 0;
 }
 .sold2{
  height: 48px;

 }
 .sold2 p{
  font-size: 16px;
 }
 /*pop*/
 .popLogin {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 5000;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #80807f8a;
  transition: 0.5s;
  opacity: 1;

}
.popLogin.false {
  opacity: 0 !important;
  display: none;
}
.popLogin .content {
  width: 400px;
  padding: 32px;
  max-width: 100%;
  border-radius: 12px;
  text-align: center;
  background-color: #EFE9DD;
}
.popLogin .content img {
  width: 140px;
  height: 70px;
  margin: 0px auto 22px ;
}
.popLogin .content h2 {
  font-size: 22px;
  font-weight: 800;
  text-align: center;
margin-bottom: 12px;
  font-family: expofont;
  color: #192540;
}
.popLogin .content h3{
  font-size: 44px;
  font-weight: 800;
  font-family: expofontBold;
line-height: 120%;
  text-align: center;
  margin-bottom: 12px;
  color: #192540;

}
.popLogin .content p {
  font-family: expofont;
  font-size: 14px;
  text-align: center;
  margin-bottom: 24px;
}

.popLogin .content a {
  background: rgba(25, 37, 64, 1);
  width: 290px;
  padding: 10px;
  max-width: 230px;
  border-radius: 4px;
  color: white;
  font-size: 16px;
  font-family: expofontBold;
  text-decoration: none;
  display: block;
  margin:  8px auto;
}
.popLogin .content a.btn2 {
  background-color: transparent;
  color: #192540;
  border: 1px solid;
}


.successBox .boxBtnPop{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.successBox .boxBtnPop .link1{
  max-width: 164px;
  height: 56px;
  font-family: expofontBold;
  
}
.successBox .boxBtnPop .link2{
  max-width: 164px;
  height: 56px;
  font-family: expofontBold;
  color: #192540;
  border: 1px solid;
  background-color: transparent;
}
.successBox2  .content h2{
  font-family: expofont;
font-size: 24px;
margin-bottom: 12px;
font-weight: 300;
}
.successBox2 .content{
  gap: 0px;
  max-width: 94%;
}
.successBox2 .content  p{
  margin-bottom: 40px;
 
}
.successBox2  .content img{
  margin-bottom: 2px;
  max-width: 244px;
  height: 244px;
  border-radius: 50%;
}

/*active acount*/


.activeAcount {
  width: 100%;
  display: flex;
  justify-content: center;
  min-height: 66vh;
  padding: 40px 0px;
}

.activeAcount .content {
  display: flex;
  flex-direction: column;
  gap: 20px;
 
  align-items: center;
  width: 400px;
  max-width: 100%;

}
.activeAcount .content img {
  margin-bottom: 2px;
    max-width: 244px;
    height: 244px;
    border-radius: 50%;
    width: 100%;
    object-fit: contain;
}
.activeAcount .content h2 {
  font-size: 28px;
  font-weight: 800;
  font-family: expofontBold;

  text-align: center;
  margin: 0;
}
.activeAcount .content p {
  font-family: expofont;
  font-size: 14px;
  text-align: center;
  margin: 0;
}

.activeAcount .content a {
  background: rgba(25, 37, 64, 1);
  width: 290px;
  padding: 18px;
  max-width: 94%;
  border-radius: 4px;
  color: rgba(243, 190, 70, 1);
  font-size: 16px;
  font-family: expofont;
  text-decoration: none;
  text-align: center;
}
.activeAcount .boxBtnPop{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.activeAcount .boxBtnPop .link1{
  max-width: 164px;
  height: 56px;
  font-family: expofontBold;
  
}
.activeAcount .boxBtnPop .link2{
  max-width: 164px;
  height: 56px;
  font-family: expofontBold;
  color: #192540;
  border: 1px solid;
  background-color: white;
}
.activeAcount  .content h2{
  font-family: expofont;
font-size: 24px;
margin-bottom: 12px;
font-weight: 300;
}
.activeAcount .content{
  gap: 0px;
  max-width: 94%;
}
.activeAcount .content  p{
  margin-bottom: 24px;
 
}
.activeAcount  .content img{
  margin-bottom: 2px;
  max-width: 244px;
  height: 244px;
  border-radius: 50%;
}