:root {
  --orange: #F22222;
}

* {
  padding:0;
  margin:0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  overflow-x: hidden;
}
ul {
  list-style: none;
}
#contact-form-message{
    font-size: 14px;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}




@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 	960px;
  }
}
@media (min-width: 1600px) {
  .container {
    max-width: 1200px;
  }
}
.contact-form p {
    color: white;
    padding-top:5px;
}
.contact-sticky {
    background-color: var(--orange);
    position: fixed;
    z-index: 999;
    border-top-left-radius: 5px;
    font-size: 16px;
    line-height: 22px;
    top: 50%;
    transform: translateY(-50%);
    border-right: 0;
    border-bottom-left-radius: 5px;
    right: 0;
    padding: 10px;
    display: grid;
    gap: 10px;
}

    .contact-sticky a {
    display: grid;
    gap: 10px;
    transition: .3s ease-in-out;
    }
    .contact-sticky a:hover {
    opacity: .7;
    }

    .contact-sticky span {
    writing-mode: vertical-rl;
    color: #ffffff;
    text-transform: uppercase;
}

.reservation-details .franchising-wrapper .item .item-wrapper svg {
    width:20px;
    height:20px;
}


.custom-select {

    position: relative;
    display: inline-block;
    width:100%;
}


.custom-select ul {
    display: none;
    position: absolute;
    top: 70%;
    left: 0;
    z-index: 99;
    width: 100%;
    padding: 0;
    margin: 0;
    border-top: none;
    background-color: #fff;
    list-style: none;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid gray;
}

.custom-select li {
    padding: 10px;
    cursor: pointer;
    color: #838383;
    font-size: 14px;
}

.custom-select li:hover {
    background-color: #f5f5f5;
}

.custom-select li.selected {
    background-color: var(--orange);
    color: #fff;
}

.custom-select input[type=hidden] {
    display: none;
}

.reservation-payment-details .wrapper{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 50px;
}
.page-wrapper form .wrapper .input-wrapper {
    position: relative;
}

.page-wrapper form .wrapper .input-wrapper a {
    position: absolute;
    background-color: var(--orange);
    padding: 13px;
    line-height: 0.3;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    right: 7px;
    top: 6px;
    cursor: pointer;
    padding: 4px;
}

.page-wrapper form .wrapper .input-wrapper .modal p {
    margin-bottom: 5px;
}

.page-wrapper #register .input-group {
    position: relative;
}

.page-wrapper #register .input-group-append {
    position: absolute;
    top: 8px;
    right: 10px;
    cursor: pointer;
}

.page-wrapper #register .input-group-append .password-validation {
    position: absolute;
    right: 30px;
}

.page-wrapper #register .input-group-append .password-validation2 {
    position: absolute;
    right: 30px;
}

.page-wrapper #register .input-group-append button {
    background-color: transparent;
    border: 0;
}

.page-wrapper #register .fas {
    font-family: "FontAwesome";
    font-size: 22px;
    font-style: initial;
    cursor: pointer;
}

.page-wrapper #register .fa-check:before {
    color: green;
}

.page-wrapper #register .fa-times {
    color: red;
}
.reservation-details .wrapper .book-extra-fetaures {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.reservation-details .wrapper .book-extra-fetaures .item a {
    display: block;
    cursor: pointer;
}

.reservation-details .wrapper .book-extra-fetaures .item a:hover .tooltiptext {
    display: block;
}

.reservation-details .wrapper .book-extra-fetaures .item .tooltiptext {
    position: absolute;
    background-color: #ffff;
    padding: 10px;
    font-size: 12px;
    border: 1px solid var(--orange);
    z-index: 999;
    max-width:250px;
    display: none;
}

.cars .wrapper .item .offer-description{
  color: var(--orange);
  font-weight: bold !important;
}

.reservation-details .reservation-total table .header {
    background-color: var(--orange);
    border-bottom: 0;
}

.reservation-details .reservation-total table .header td{
    color: #fff;
}

.reservation-details .reservation-total table .total {
    background-color: var(--orange);
    border: 0;
}

.reservation-details .reservation-total table .total td {
    color: #fff;
}


/*header*/
header {
  position: fixed;
  width: 100%;
  padding: 10px 0;
  transition: 0.5s ease-in-out;
  background: #0B0B0B;
  z-index: 999;
}
header nav.navbar {
  width: 100%;
  z-index: 9;
  transition: .4s ease-in-out;
  display: flex;
  justify-content: space-between;
}
header nav.navbar .items {
  display: flex;
  align-items: center;
}
header nav.navbar .items .languages {
  margin-left:50px;
  position: relative;
}
header nav.navbar .items .languages select {
  appearance: none;
  background-color: transparent;
  border: none;
  color: #fff;
  padding: 10px 20px 10px 10px;
  font-weight: 700;
  font-size: 16px;
  position: relative;
  background: url(/rent/assets/images/down-arrow.svg) no-repeat right ;
  background-size: 16px !important;
  cursor: pointer;
  font-family: 'Play',sans-serif;
}
header nav.navbar .items .languages select option {
  color: #000;
}
header nav.navbar .items .languages select:focus {
  outline: none;
}
header nav.navbar .navbar_wrap {
  display: flex;
  justify-content: space-between;
  position: relative;
  align-items: center;
  position: relative;
  z-index: 2;
}
.duration-details{
    display: flex;
    justify-content:space-between;
}
.duration-details p{
    padding-top: 0px !important;
}
header nav.navbar .navbar_wrap .logo img {
  max-width: 200px;
}
nav.navbar #navbarNav {
  top: 100%;
  left: 0px;
  transition: height 3s;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  transition: all 1s;
}
nav.navbar #navbarNav ul {
  display: flex;
}
nav.navbar #navbarNav .navbar-nav li {
  margin: 25px 0;
  text-align: center;
  padding-left: 50px;
}
nav.navbar #navbarNav .navbar-nav li a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  text-transform: uppercase;
  transition: .4s ease-in-out;
  font-weight: 700;
}
nav.navbar #navbarNav .navbar-nav li a:hover {
  opacity: 0.6;
}
nav.navbar.active #navbarNav {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: all 1s;
}
nav.navbar .navbar_wrap .toggler {
  cursor: pointer;
  position: relative;
  width: 25px;
  height: 20px;
  display: none;
}
nav.navbar .navbar_wrap .toggler .line {
  position: absolute;
  height: 2px;
  width: 100%;
  background: white;
  left: 0;
  transition: all cubic-bezier(0.26, 0.1, 0.27, 1.55) 0.35s;
}
nav.navbar .navbar_wrap .toggler .line:first-child {
  top: 10%;
}
nav.navbar .navbar_wrap .toggler .line:nth-child(2) {
  top: 50%;
}
nav.navbar .navbar_wrap .toggler .line:last-child {
  top: 90%;
}
nav.navbar .navbar_wrap .toggler.active .line:first-child {
  transform: rotate(45deg);
  top: 50%;
}
nav.navbar .navbar_wrap .toggler.active .line:nth-child(2), nav.navbar .navbar_wrap .toggler.active .line:last-child {
  transform: rotate(-45deg);
  top: 50%;
}

/*footer*/
footer {
  padding: 100px 0 30px 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
footer::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #000000 8.24%, rgba(10, 10, 10, 0.845763) 100%);
}
footer .topfooter {
  padding-bottom: 50px;
  position: relative;
  z-index: 3;
}
footer .topfooter .wrapper {
  display: grid;
  grid-template-columns: 33% 33% 34%;
}
footer .topfooter h4 {
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 20px;
}
footer .topfooter .logo-social {
  display: grid;
  padding-right: 20px;
}
footer .topfooter .logo-social .logo  img {
  width: 180px;
}
footer .topfooter .logo-social .social-media {
  display: flex;
  align-items: flex-end;
}
footer .topfooter .logo-social .social-media a {
  margin-right: 12px;
}
footer .topfooter .logo-social .social-media img {
  transition: .3s ease-in-out;
}
footer .topfooter .logo-social .social-media img:hover {
  opacity: .7;
}
footer .topfooter .sitemap {
  padding-right: 20px;
}
footer .topfooter .sitemap .menu {
  display: grid;
}
footer .topfooter .sitemap .menu a {
  color: #fff;
  font-size: 15px;
  padding-bottom: 10px;
  transition: .3s ease-in-out;
}
footer .topfooter .sitemap .menu a:hover {
  opacity: .7;
}
footer .topfooter .contact-details {
  padding-right: 20px;
}
footer .topfooter .contact-details p {
  padding-bottom: 10px;
}
footer .topfooter .contact-details span {
  color: var(--orange);
  font-weight: 700;
}
footer .topfooter .contact-details p , footer .topfooter .contact-details a {
  color: #fff;
  font-size: 15px;
}
footer .topfooter .contact-details a {
  transition: .3s ease-in-out;
}
footer .topfooter .contact-details a:hover {
  opacity: .7;
}
footer .topfooter .contact-form  .wrapper {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
footer .topfooter .contact-form  .wrapper .input_text {
  width: 100%;
}
footer .topfooter .contact-form  .wrapper .input_text input[type="text"] {
  height:30px;
  width:100%;
  outline:0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size:14px;
  padding:5px 10px;
  box-sizing:border-box;
  background-color: rgba(255, 255, 255, 0.2);
  appearance: none;
  color: #7A7A7A;
  font-family: 'Play', sans-serif;
}
footer .topfooter .contact-form  .wrapper .input_text input[type="text"]:focus {
  border: 1px solid var(--orange);
}
footer .topfooter .contact-form  .wrapper textarea {
  height:50px;
  width:100%;
  outline:0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size:14px;
  padding:5px 10px;
  box-sizing:border-box;
  background-color: rgba(255, 255, 255, 0.2);
  appearance: none;
  color: #7A7A7A;
  resize: none;
  font-family: 'Play', sans-serif;
}
footer .topfooter .contact-form  .wrapper textarea:focus {
  border: 1px solid var(--orange);
}
footer .topfooter .contact-form input[type="submit"] {
  background-color: var(--orange);
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  outline: none;
  padding: 6px 35px;
  font-family: 'Play', sans-serif;
  border: 0;
  cursor: pointer;
  transition: .3s ease-in-out;
  display: flex;
  margin-left: auto;
}
footer .topfooter .contact-form input[type="submit"]:hover {
  opacity: 0.7;
}
footer .bottomfooter {
  z-index: 3;
  position: relative;
}
footer .bottomfooter .wrapper {
  display: flex;
  justify-content: space-between;
}
footer .bottomfooter .wrapper p , footer .bottomfooter .wrapper a {
  color: #939393;
  font-size: 13px;
}
footer .bottomfooter .wrapper .powered a {
  font-weight: 700;
  transition: .3s ease-in-out;
  text-transform: uppercase;
}
footer .bottomfooter .wrapper .powered a:hover {
  opacity: .7;
}

/*Home Page*/
.main-banner {
  background-position: center;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
}
.main-banner::after {
  position: absolute;
  content:"";
  /* background: linear-gradient(180deg, #000000 0%, rgba(49, 49, 49, 0.808848) 71.79%, rgba(255, 255, 255, 0) 88.57%); */
  background: linear-gradient(180deg, #000 15%, rgb(255 249 249 / 0%) 70.79%, rgb(255 255 255 / 0%) 78.57%);
  height: 100%;
  width: 100%;
}
.reservation-wrapper-filter {
  margin-top: 35%;
  height: 100vh;
  position: relative;
  z-index: 99;
}
.reservation-wrapper-filter h1 {
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  /* margin-bottom: 5px; */
}
.reservation-wrapper-filter h3 {
  font-size: 32px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 50px;
}
.reservation-wrapper-filter h3 span {
  color: var(--orange);
  font-weight: 700;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.5);
  padding-inline: 8px;
}
.reservation-wrapper-filter .wrapper {
  display: grid;
  align-items: flex-end;
  grid-template-columns: 32% 25% 25% 15%;
  gap:10px;
}
.reservation-wrapper-filter .wrapper .input-group {
  display: flex;
  gap: 10px;
}
.reservation-wrapper-filter .wrapper .input-group select {
  padding-left: 10px;
}
.reservation-wrapper-filter .wrapper .location-wrapper {
  display: flex;
  align-items: flex-end;
}
.reservation-wrapper-filter .wrapper .location-wrapper .pickup-location {
  display: block;
  flex:1;
}
.reservation-wrapper-filter .wrapper .location-wrapper .pickup-location .pickup-location-content {
  display: flex;
  justify-content: space-between;
}
.reservation-wrapper-filter .wrapper .location-wrapper .pickup-location .pickup-location-content #dropoff-location-con {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.reservation-wrapper-filter .wrapper .location-wrapper .pickup-location .pickup-location-content #dropoff-location-con span {
  color: #fff;
  padding-left: 2px;
  font-size: 14px;
}
.reservation-wrapper-filter .wrapper .location-wrapper #dropoff-location {
  flex: 1 1 0%;
  padding-left: 0.25rem !important;
  display: none;
}
.reservation-wrapper-filter .wrapper h4 {
  color: #fff;
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 15px; 
}
.reservation-wrapper-filter .wrapper input[type="date"] ,
.reservation-wrapper-filter .wrapper input[type="text"],
.reservation-wrapper-filter .wrapper select  {
  background-color: #9A9A9A;
  color: #fff;
  border: 0;
  width: 100%;
  padding: 15px;
  font-family: 'Play',sans-serif;
  font-size: 14px;
  appearance: none;
}

.reservation-wrapper-filter .wrapper input[type="date"] ,
.reservation-wrapper-filter .wrapper input[type="text"],
.reservation-wrapper-filter .wrapper select::after  {
 content: 'that';
}
.reservation-wrapper-filter .wrapper input:focus ,
.reservation-wrapper-filter .wrapper select:focus  {
  outline: none;
  border: 0;
}
.fa-check path{
    color: green;
}
.fa-times {
  margin-left: 2px;
  font-size: 18px;
  cursor: pointer;
  color: #F22222;
}
.fa-times:before {
  content: "\2715";
  font-style: bold;
}
.reservation-wrapper-filter .wrapper .dropoff-location-content {
  display: flex;
  justify-content: space-between;
}
.reservation-wrapper-filter .wrapper #continue {
  padding: 15px;
  width: 100%;
  background-color: var(--orange);
  border: 1px solid var(--orange);
  color: #fff;
  font-family: 'Play',sans-serif;
  font-weight: 700;
  font-size: 14px;
  transition: .3s ease-in-out;
  cursor: pointer;
}
.reservation-wrapper-filter .wrapper #continue:hover {
  background-color: transparent;
  color: var(--orange);
}
.reservation-wrapper-filter .pick_cartype {
  margin-top: 15px;
  padding: 10px;
  /* width: 100%; */
  background-color: var(--orange);
  border: 1px solid var(--orange);
  color: #fff;
  font-family: 'Play',sans-serif;
  font-weight: 700;
  font-size: 14px;
  transition: .3s ease-in-out;
}
.reservation-wrapper-filter .pick_cartype:focus {
  outline: none;
}
#reservation-form {
width: 100%;
height: auto;
background-color: #646464; 
border-radius: 15px; 
padding: 40px 20px; 
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
}
.h1-banner{
  text-align: center;
  padding-top: 15px;
}
.h3-banner{
  text-align: center;
}

.main-banner .social-media {
  position: absolute;
  bottom: 3%;
  left: 50%;
  transform: translatex(-50%);
  z-index: 99;
  display: flex;
  gap: 20px;
}
.main-banner .social-media img {
    width:24px;
    height: 24px;
}
/* brands */
.brands {
  overflow: hidden;
  padding: 120px 0;
}
.services {
  margin-bottom: 120px;
}
.brands img {
  width: 85px;
  object-fit: contain;
  aspect-ratio: 3/2;
  display: flex;
  margin: auto;
}
.services h2 {
  color: #1B1B1B;
  text-align: center;
  margin-bottom: 30px;
  font-weight: 700;
  font-size: 40px;
  text-transform: uppercase;
}
.services .wrapper {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 30px;
  width: 80%;
  margin: auto;
}
.services .wrapper .item-service {
  background-color: #EFEFEF;
  height: 100%;
  padding: 50px 15px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.services .wrapper .item-service h3 {
  font-weight: 700;
  font-size: 64px;
  color: var(--orange);
  text-transform: uppercase;
}
.services .wrapper .item-service p {
  font-size: 24px;
  color: #636363;
  text-transform: uppercase;
}
.services .wrapper .item-reservation {
  background-color: var(--orange);
  height: 100%;
  display: flex;
  align-items: center;
  padding: 15px;
  text-align: center;
  justify-content: center;
}
.services .wrapper .item-reservation p {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.services .wrapper .item-reservation img {
  width: 100px;
}
.cars {
  margin-bottom: 120px;
}
.cars h3 {
  color: var(--orange);
  font-size: 24px;
  text-transform: uppercase;
  font-weight: 400;
  text-align: center;
}
.cars h2 {
  color: #1B1B1B;
  text-align: center;
  margin-bottom: 30px;
  font-weight: 700;
  font-size: 40px;
  text-transform: uppercase;
}
.cars .wrapper {
  margin-top: 30px;
  /* display: grid; */
  /* grid-template-columns: repeat(3,1fr);
  gap: 50px; */
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-evenly; */
  justify-content: start;
  gap: 30px;
}
.cars .wrapper .item {
  border-radius: 4px;
  border: 1px solid #eee;
  position: relative;
  /* height:425px; */
  padding-top:0px;
  /*padding:20px;*/
  padding: 0px;transition: .4s ease-in-out;
  width: calc(33.33% - 20px);
  overflow: hidden;
}

.cars .wrapper .item .images{
  /* height: 220px; */
  overflow: hidden;
}

  .hidden{
    /* display: none; */
  }
.cars .wrapper .item:hover {
    box-shadow: 0 10px 30px 0 rgb(18 54 82 / 20%);

    -webkit-box-shadow: 0 10px 30px 0 rgb(18 54 82 / 20%);
  }
  .cars .wrapper .item .images {
    padding-top:0px;
    position: relative;
    width: 100%;
  }

  .cars .wrapper .item .images .arrows {
    position:absolute;
    top:50%;
    width: 30px;
    height:30px;
  }
  .cars .wrapper .item .images .arrows.prev {
    background-color: #12100fba;
    border:none;
    color:white;
    padding:5px 10px;
    cursor: pointer;left: 0px;
    border-radius: 0px 5px 5px 0px;

  }
  .cars .wrapper .item .images .arrows.prev img {
    transform: rotate(180deg)
  }

  .cars .wrapper .item .images .arrows.next {
    background-color: #12100fba;
    border:none;
    color:white;
    padding:5px 10px;
    cursor: pointer;
    border-radius: 5px 0px 0px 5px;
    right: 0px;
  }

  .cars .wrapper .item .images .arrows img {
    width: 16px;
  }
.cars .wrapper .item .images  img {
  /*width: 250px;*/
  width:100%;
  height: 100%;
  object-fit: cover;

}
.cars .wrapper .item .images  .active {
    /*width: 250px;*/

height: 220px;
object-fit: cover;
object-position: center center;

  }



.cars .wrapper .item h4 {
  color: #393939;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 5px;
}
.cars .wrapper .item h4 span {
  color: var(--orange);
}

.cars .wrapper .item p {
  color: #878787;
  font-size: 16px;
}

.cars .wrapper .item .details-wrapper {
  margin: 10px 0;
  display: flex;
  justify-content: space-between !important;
}
.cars .wrapper .item .details-wrapper .details-item {
  display: flex;
  align-items: center;
}
.cars .wrapper .item .details-wrapper .details-item img {
  width: 20px;
  margin:0 5px 0 0;
}
.cars .wrapper .item .details-wrapper .details-item p {
  color: #3D3D3D;
  font-size: 14px;
}
.cars .wrapper .item .reserve-button {
  background-color: var(--orange);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  padding: 7px 20px;
  border-radius: 3px;
  border: 2px solid var(--orange);
  transition: .3s ease-in-out;
  display: inline-block;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: fit-content;
}
.cars .wrapper .item .reserve-button:hover {
  background-color: #fff;
  color: var(--orange);
}
.cars .view-all {
  justify-content: center;
  width: fit-content;
  display: flex;
  margin: auto;
  margin-top: 50px;
  background-color: var(--orange);
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  padding: 7px 20px;
  border: 2px solid var(--orange);
  transition: .3s ease-in-out;
}
.cars .view-all:hover {
  background-color: #fff;
  color: var(--orange);
}
.download-app {
  margin-bottom: -100px;
}
.gradient-bg {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #F22222 100%);
  height: 150px;
  width: 70%;
  margin-left: auto;
}
.download-app .wrapper {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  width: 80%;
  margin: auto;
}
.download-app .wrapper .content h2 {
  color: var(--orange);
  font-size: 40px;
  font-weight: 400;
  margin-bottom: 50px;
}
.download-app .wrapper .content .available-apps {
  display: flex;
  gap: 20px;
}
.download-app .wrapper .content h2 span {
  font-weight: 700;
}
.download-app .wrapper .image img {
  width: 100%;
  position: relative;
  z-index: 9;
}

/*Rent a Car*/

.reservation-details-wrapper  {
  padding-top: 130px;
}
.line {
  background-color: #EAEAEA;
  height: 3px;
}
.lineorange {
  background-color: var(--orange);
  height: 3px;
}
.filter {
  position: relative;
}
.filter ul {
  display: none;
  position: absolute;
  z-index: 99;
  left: 0;
}


.reservation-details-wrapper .wrapper {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  padding: 10px 0;
  gap: 20px 40px;
}
.reservation-details-wrapper .wrapper h3 {
  font-size: 16px;
  font-weight: 700;
  color: #404040;
}
.reservation-details-wrapper .wrapper p {
  padding-top: 10px;
  color: #404040;
  font-size: 16px;
}
.reservation-details-wrapper .wrapper .change-bookings {
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
}
.reservation-details-wrapper  .wrapper .change-bookings a {
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: #404040;
  position: relative;
  transition: .4s ease-in-out;
  height: fit-content;
}
/* .reservation-details-wrapper  .wrapper .change-bookings a::after {
  position: absolute;
  content: "\25BC";
  right: -20px;
  color: var(--orange);
} */
.reservation-details-wrapper  .wrapper .change-bookings a:hover {
  opacity: .7;
}
#change-bookings-dates.active{
  display:block
}
#change-bookings-dates .reservation-wrapper-filter .wrapper input[type="date"],
#change-bookings-dates .reservation-wrapper-filter .wrapper input[type="text"],
#change-bookings-dates .reservation-wrapper-filter .wrapper select {
  background-color: #fff !important;
  color: #858585 !important;
  box-shadow: 0px 0px 15px 3px rgb(180 180 180 / 25%);
}

#change-bookings-dates {
  padding: 40px 0;
  display: none;
}
#change-bookings-dates .reservation-wrapper-filter .wrapper h4 {
  color: #404040;
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 15px;
}

#change-bookings-dates .reservation-wrapper-filter .wrapper .location-wrapper .pickup-location .pickup-location-content #dropoff-location-con span {
  color: #404040;
  padding-left: 2px;
  font-size: 14px;
}
.filter-cars {
  margin-bottom: 20px;
}
.filter-cars h4 {
  color: #404040;
  font-weight: 700;
  font-size: 16px;
  position: relative;
  width: fit-content;
  cursor: pointer;
  margin-bottom: 10px;
}

.filter-cars .car-type {
  max-height: 400px;
  border-radius: 4px;
  overflow-y: scroll;
  /* height: fit-content; */
}

.filter-cars .car-type::-webkit-scrollbar  {
    width: 6px;
  }

  .filter-cars .car-type::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
  }

  /* Handle */
  .filter-cars .car-type::-webkit-scrollbar-thumb {
    background: #F22222;
    border-radius: 10px;
  }

  /* Handle on hover */
  .filter-cars .car-type::-webkit-scrollbar-thumb:hover {
    background: #F22222;
  }
  




/* Target the element with the scrollbar (e.g., body or a specific container) */
body {
  /* Set a fixed height for the scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #333 #fff; /* Scrollbar color and track color */
}

.filter-cars ul {
  padding: 0px 9px;
  background: #FFFFFF;
  box-shadow: 0 10px 30px 0 rgb(18 54 82 / 20%);
  width: fit-content;
}
.filter-cars ul li {
  margin: 10px 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.filter-cars ul li p {
  padding-left: 10px;
  color: #404040;
  font-size: 18px;
}
.filter-cars ul li svg {
  width: 20px;
}
.rent-sportcar {
  background-position: left;
  background-repeat: no-repeat;
  background-size: 50%;
  width: 100%;
  background-color: #1A1A1A;
  position: relative;
}
.rent-sportcar::after {
  position: absolute;
  content: "";
}
.rent-sportcar .wrapper {
  display: grid;
  margin-left: auto;
  grid-template-columns: repeat(2,1fr);
  align-items: center;
  gap: 50px;
  max-height: 220px;
}
.rent-sportcar .wrapper .image img {
  width: 100%;
}
.rent-sportcar .wrapper .content {
  padding: 30px 0;
  width: 500px;
}
.rent-sportcar .wrapper .content h2 {
  font-weight: 700;
  color: #fff;
  font-size: 32px;
  margin-bottom: 10px;
}
.rent-sportcar .wrapper .content p {
  color: #fff;
  font-size: 14px;
  margin-bottom: 20px;
}
.rent-sportcar .wrapper .content a {
  background-color: var(--orange);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 7px 20px;
  border: 2px solid var(--orange);
  transition: .3s ease-in-out;
  display: inline-block;
}
.rent-sportcar .wrapper .content a:hover {
  background-color: transparent;
  color: var(--orange);
}

/*Rent a car details*/
.car-details {
  padding-top: 50px;
}
.car-details .wrapper {
  display: grid;
  grid-template-columns: 60% 40%;
}
.car-details .wrapper .left-details h2 {
  color: #393939;
  font-weight: 700;
  font-size: 40px;
  margin-bottom: 10px;
}
.car-details .wrapper .left-details h3 {
  color: #393939;
  font-weight: 700;
  font-size: 32px;
  margin-bottom: 10px;
}
.car-details .wrapper .left-details img {
  width: 100%;
  cursor: pointer;
  border-radius: 4px;
}
.car-details .wrapper .left-details .images {
    display: flex;
}


  .car-details .wrapper .left-details .images img {
    width: 20%;

    margin-right:4px;
  }
  .car-details .wrapper .left-details .images .active {
    border:2px solid #F22222;
    padding:2px;
    cursor: pointer;
  }
  .zoom {
    position: fixed;
    top:0;
    display: none;
    width: 100%;
    height: 100vh;
    background-color: #0000008a;z-index: 1000;
  }
  .zoom.show{
    display: block;
}
.zoom .images{
    display: flex;

}

.zoom .images img{
    width: 20%;
    margin-right:4px;
}
.zoom .images .active{
    border:2px solid #F22222;
    padding:2px;
    cursor: pointer;

}
.zoom img{
    width:100%;
    position:relative;
    border-radius: 3px;
}

.car-details .wrapper .left-details h3 span {
  color: var(--orange);
}
.car-details .wrapper .right-details {
    padding-top:95px;
  padding-left: 50px;
}
.car-details .wrapper .right-details h3 {
  color: #393939;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
}
.car-details .wrapper .right-details .car-features {
  margin-bottom: 50px;
}
.car-details .wrapper .right-details .details-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.car-details .wrapper .right-details .details-item img {
  width: 25px;
  margin-right: 10px;
}
.car-details .wrapper .right-details .details-item p {
  color: #3D3D3D;
  font-size: 22px;
}


.reservation-details h2 {
  color: #393939;
  font-size: 32px;
  margin-bottom: 30px;
}
.reservation-details .franchising-wrapper {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  margin-bottom: 50px;
}
.reservation-details .franchising-wrapper .item {
  border-right:1px solid #D9D9D9;
  padding-right: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reservation-details .franchising-wrapper .item button {
    background-color: transparent;
    border:none;
    cursor:pointer;
    position: relative;
    display: inline-block;
  }
  .reservation-details .franchising-wrapper .item button .tooltiptext {
    display: none;
    width: 355px;
    background-color: white;
    border:2px  solid var(--orange);
    color: black;
    text-align: left;
    padding: 10px 15px;

    /* Position the tooltip */
    position: absolute;
    z-index: 1115;
  }
  .reservation-details .franchising-wrapper .item button:hover .tooltiptext {
    display: block;
  }
.reservation-details .franchising-wrapper .item:last-child {
  border: 0;
}
.reservation-details .wrapper {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 50px;
  margin-bottom: 50px;
}

.items-flex{
  display: block !important;
}
.reservation-details .reservation-total table {
  width: 100%;
  background-color: rgba(243, 243, 243, 0.5);
  text-align: end;
  border-collapse: collapse;
}
.reservation-details .reservation-total table  tr {
  border-top: 1px solid lightgray;
}
.reservation-details .reservation-total table tr td {
  padding: 10px;
  color: #3D3D3D;
  font-size: 16px;
}
/* .reservation-details .reservation-total table tr:last-child {
  font-weight: 700;
} */
.reservation-details .reservation-total h3 {
  color: #393939;
  font-size: 32px;
  margin-bottom: 30px;
}
.reservation-details .wrapper .booked-car-details .item {
  margin-bottom: 50px;
}
.reservation-details .wrapper .booked-car-details .item h3 {
  color: #404040;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 5px;
}
.reservation-details .wrapper .booked-car-details .item h4 {
  color: var(--orange);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}
.reservation-details .wrapper .booked-car-details .item p {
  color: #404040;
  font-size: 20px;
}

.reservation-details .wrapper .book-extra-fetaures .item {
  background-color: #F8F8F8;
  margin-bottom: 20px;
  padding: 10px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  flex: 0 0 49%;
}
.reservation-details .wrapper .book-extra-fetaures .item .description {
  display: flex;
  align-items: center;
}
.reservation-details .wrapper .book-extra-fetaures .item .description img {
  width: 35px;
  margin-right: 20px;
}
.reservation-details .wrapper .book-extra-fetaures .item .description p {
  font-size: 20px;
  color: #3D3D3D;
}

/*Custom radio&checkbox buttons*/
.item-wrapper {
  display: block;
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  font-size: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #404040;
}
.item-wrapper input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border-radius: 0%;
  border: 2px solid var(--orange);
  background: transparent;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.item-wrapper input:checked ~ .checkmark:after {
  display: block;
}

.item-wrapper .checkmark:after {
  top: 4px;
  left: 4.5px;
  width: 8px;
  height: 8px;
  border-radius: 0%;
  background: var(--orange);
}

.reservation-details .wrapper .book-extra-fetaures .item .checkmark {
  right: 0;
  left: auto;
}

.item-wrapper input[type="radio"] + .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid var(--orange);
  background: transparent;
}

.item-wrapper input[type="radio"] + .checkmark:after {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
  display: none;
}

.item-wrapper input[type="radio"]:checked + .checkmark:after {
  display: block;
}

.reservation-details .wrapper .book-extra-fetaures .item .item-wrapper {
  padding-left: 0;
  padding-right: 35px;
}
.reservation-total button {
  justify-content: center;
  width: fit-content;
  display: flex;
  margin: auto;
  margin-top: 50px;
  background-color: var(--orange);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 7px 20px;
  border: 2px solid var(--orange);
  transition: .3s ease-in-out;
  cursor: pointer;
}

.reservation-total button:hover {
  background-color: #fff;
  color: var(--orange);
}

.page-wrapper-forgot-password{
    height: 100vh;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 450px;
  }

/*Log In & Register Page*/
.page-wrapper {
  height: 100vh;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 650px;
}
.page-wrapper::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #000000 8.24%, rgba(10, 10, 10, 0.845763) 100%);
}
.forgot-password{
    max-height: 400px !important;
    background-color: white !important;
}

.page-wrapper form {
  z-index: 9;
  position: relative;
  display: block;
  margin: auto;
  display: grid;
}
.page-wrapper #register {
  width: 700px;
}
.page-wrapper #login {
  width: 500px;
}
.page-wrapper form h2 {
  color: var(--orange);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
.page-wrapper form .wrapper {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 20px;
}
.page-wrapper form p {
  color: #fff;
  font-size: 15px;
  margin-bottom: 40px;
}
.page-wrapper form input[type="email"],
.page-wrapper form input[type="password"],
.page-wrapper form input[type="text"],
.page-wrapper form input[type="tel"],
.page-wrapper form input[type="date"],
.page-wrapper form select {
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
  color: #2a2a2a;
  font-size: 14px;
  border: 1px solid #fff;
  height: 38px;
}
.page-wrapper form input[type="email"]::placeholder,
.page-wrapper form input[type="password"]::placeholder,
.page-wrapper form input[type="tel"]::placeholder,
.page-wrapper form input[type="text"]::placeholder,
.page-wrapper form input[type="date"]::placeholder,
.page-wrapper form select::placeholder {
  color: #B3B3B3;
  font-size: 14px;
}
.page-wrapper form input[type="email"]:focus,
.page-wrapper form input[type="password"]:focus,
.page-wrapper form input[type="text"]:focus,
.page-wrapper form input[type="tel"]:focus,
.page-wrapper form input[type="date"]:focus,
.page-wrapper form select:focus {
  outline: none;
  border: 1px solid var(--orange);
}
.page-wrapper form .forgot-psw a {
  color: #949494;
  font-size: 14px;
  transition: .3s ease-in-out;
}
.page-wrapper form .forgot-psw a:hover {
  text-decoration: underline;
  transition: .3s ease-in-out;
}
.page-wrapper form button {
  width: fit-content;
  margin-top: 20px;
  background-color: var(--orange);
  color: #fff;
  font-size: 14px;
  outline: none;
  padding: 6px 35px;
  font-family: 'Play', sans-serif;
  border: 1px solid var(--orange);
  cursor: pointer;
  transition: .3s ease-in-out;
  font-weight: 700;
}
.page-wrapper form button:hover {
  background-color: transparent;
  color: var(--orange);
}
.page-wrapper form p span {
  color: var(--orange);
}

/*Contact Page*/
.contact-opener-banner {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 350px;
  display: flex;
  align-items: center;
  position: relative;
}
.contact-opener-banner::after {
  content: "";
  background: linear-gradient(179.27deg, #373737 0.63%, #373737 50.21%, rgba(55, 55, 55, 0) 126.64%);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
}
.contact-opener-banner .page-title {
  color: #fff;
  position: relative;
  z-index: 3;
  font-weight: 700;
  font-size: 32px;
}
.contact-main-wrapper {
  padding: 50px 0;
}
.contact-main-wrapper .wrapper {
  display: grid;
  grid-template-columns: 60% 40%;
}
.contact-main-wrapper .wrapper h3 {
  font-size: 20px;
  color: #595959;
  margin-bottom: 20px;
  font-weight: 700;
}
.contact-main-wrapper .wrapper .contact-form {
  padding-right: 70px;
}
.contact-main-wrapper .wrapper .contact-form  .wrapper {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
}
.contact-main-wrapper .wrapper .contact-form  .wrapper  .input_text {
  width: 100%;
}
.contact-main-wrapper .wrapper .contact-form  .wrapper .input_text input[type="text"] ,
.contact-main-wrapper .wrapper .contact-form  .wrapper .input_text input[type="tel"] ,
.contact-main-wrapper .wrapper .contact-form  .wrapper .input_text input[type="email"] {
  height:35px;
  width:100%;
  outline:0;
  border: 1px solid #BDBDBD;
  font-size:14px;
  padding:5px 10px;
  box-sizing:border-box;
  background-color: #FAFAFA;
  appearance: none;
  color: #7A7A7A;
  font-family: 'Play', sans-serif;
}
.contact-main-wrapper .wrapper .contact-form  .wrapper .input_text input[type="text"]:focus ,
.contact-main-wrapper .wrapper .contact-form  .wrapper .input_text input[type="email"]:focus ,
.contact-main-wrapper .wrapper .contact-form  .wrapper .input_text input[type="tel"]:focus {
  border: 1px solid var(--orange);
}
.contact-main-wrapper .wrapper .contact-form  .wrapper textarea {
  height:80px;
  width:100%;
  outline:0;
  border: 1px solid #BDBDBD;
  font-size:14px;
  padding:5px 10px;
  box-sizing:border-box;
  background-color: #FAFAFA;
  appearance: none;
  color: #7A7A7A;
  resize: none;
  font-family: 'Play', sans-serif;
}
.contact-main-wrapper .wrapper .contact-form  .wrapper textarea:focus {
  border: 1px solid var(--orange);
}
.contact-main-wrapper .wrapper .contact-form  input[type="submit"] {
  background-color: var(--orange);
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  outline: none;
  padding: 10px 40px;
  font-family: 'Play', sans-serif;
  border: 2px solid var(--orange);
  cursor: pointer;
  transition: .3s ease-in-out;
  font-weight: 700;
}
.contact-main-wrapper .wrapper .contact-form input[type="submit"]:hover {
  background-color: transparent;
  color: var(--orange);
}
.contact-main-wrapper .wrapper .contact-information .location {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}
.contact-main-wrapper .wrapper .contact-information h4 {
  color: #595959;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}
.contact-main-wrapper .wrapper .contact-information .location img {
  margin-right: 15px;
  width: 25px;
}
.contact-main-wrapper .wrapper .contact-information .location p {
  color: #3D3D3D;
  font-size: 15px;
}
.contact-main-wrapper .wrapper .contact-information .wrapper {
  margin-bottom: 25px;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 20px;
}
.contact-main-wrapper .wrapper .contact-information .wrapper a {
  color: var(--orange);
  font-size: 15px;
  transition: .3s ease-in-out;
}
.contact-main-wrapper .wrapper .contact-information .wrapper a:hover {
  opacity: .7;
}
.contact-main-wrapper .wrapper .contact-information .social-media a {
  margin-right: 10px;
}
.contact-main-wrapper .wrapper .contact-information .social-media img {
  transition: .3s ease-in-out;
}
.contact-main-wrapper .wrapper .contact-information .social-media img:hover {
  opacity: .7;
}
.map {
  height: 250px;
}

/*Booking confirmation*/
.booking-confirmation-wrapper {
    padding: 300px 0 332px 0;
}
.booking-confirmation-wrapper p {
  text-align: center;
  color: var(--orange);
  font-size: 18px;
  margin-bottom: 50px;
  font-weight: 700;
}
.booking-confirmation-wrapper h3 {
  text-align: center;
  color: #5A5A5A;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 50px;
  font-weight: 400;
}
.booking-confirmation-wrapper h3 span {
  font-weight: 700;
}
.booking-confirmation-wrapper img {
  width: 300px;
  text-align: center;
  margin:auto;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
}
.booking-confirmation-wrapper a {
  text-transform: uppercase;
  background-color: var(--orange);
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  outline: none;
  padding:10px 35px;
  font-family: 'Play', sans-serif;
  border: 1px solid var(--orange);
  cursor: pointer;
  font-weight: 700;
  transition: .3s ease-in-out;
  display: flex;
  margin: auto;
  width: fit-content;
}
.booking-confirmation-wrapper a:hover{
  background-color: transparent;
  color: var(--orange);
}

/*Reserved models*/
.reserved-models {
  padding: 170px 0 100px 0;
}
.reserved-models p {
  text-align: center;
  color: var(--orange);
  font-size: 18px;
  margin-bottom: 50px;
  font-weight: 700;
}
.reserved-models a {
  text-transform: uppercase;
  background-color: var(--orange);
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  outline: none;
  padding:10px 35px;
  font-family: 'Play', sans-serif;
  border: 1px solid var(--orange);
  cursor: pointer;
  font-weight: 700;
  transition: .3s ease-in-out;
  display: flex;
  margin: auto;
  width: fit-content;
}
.reserved-models a:hover{
  background-color: transparent;
  color: var(--orange);
}

/*Payment methods*/
.login_form {
  padding: 170px 0 100px 0;
}
.login_form form {
  z-index: 9;
  position: relative;
  display: block;
  margin: auto;
  display: grid;
  width: 80%;
}
.login_form form h2 {
  color: var(--orange);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
.login_form form p {
  color: #404040;
  font-size: 15px;
  margin-bottom: 40px;
}
.login_form form input[type="email"],
.login_form form input[type="password"],
.login_form form input[type="text"],
.login_form form input[type="tel"],
.login_form form select {
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
  color: #515151;
  font-size: 14px;
  background: rgba(204, 204, 204, 0.44);
  border: 1px solid #fff;
}
.login_form form input[type="email"]::placeholder,
.login_form form input[type="password"]::placeholder,
.login_form form input[type="tel"]::placeholder,
.login_form form input[type="text"]::placeholder,
.login_form form select::placeholder {
  color: #515151;
  font-size: 14px;
}
.login_form form input[type="email"]:focus,
.login_form form input[type="password"]:focus,
.login_form form input[type="text"]:focus,
.login_form form input[type="tel"]:focus,
.login_form form select:focus {
  outline: none;
  border: 1px solid var(--orange);
}
.login_form form .forgot-psw a {
  color: #949494;
  font-size: 14px;
  transition: .3s ease-in-out;
}
.login_form form .forgot-psw a:hover {
  text-decoration: underline;
  transition: .3s ease-in-out;
}
.login_form form button {
  width: fit-content;
  margin-top: 20px;
  background-color: var(--orange);
  color: #fff;
  font-size: 14px;
  outline: none;
  padding: 6px 35px;
  font-family: 'Play', sans-serif;
  border: 1px solid var(--orange);
  cursor: pointer;
  transition: .3s ease-in-out;
  font-weight: 700;
}
.login_form form button:hover {
  background-color: transparent;
  color: var(--orange);
}
.login_form form p span {
  color: var(--orange);
}

.register_form h1 {
  color: var(--orange);
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 50px;
}
.register_form form {
  z-index: 9;
  position: relative;
  display: block;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 50px;
}
.register_form form h2 {
  color: #000000;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
.register_form form .input-wrapper {
  position: relative;
}
.register_form form .input-wrapper .information {
  position: absolute;
  background-color: var(--orange);
  line-height: 0.3;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  right: 10px;
  top: 28px;
  cursor: pointer;
}
.register_form form input[type="email"],
.register_form form input[type="password"],
.register_form form input[type="text"],
.register_form form input[type="tel"],
.register_form form select {
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
  color: #515151;
  font-size: 14px;
  background: rgba(204, 204, 204, 0.44);
  border: 1px solid #fff;
}
.register_form form input[type="email"]::placeholder,
.register_form form input[type="password"]::placeholder,
.register_form form input[type="tel"]::placeholder,
.register_form form input[type="text"]::placeholder,
.register_form form select::placeholder {
  color: #515151;
  font-size: 14px;
}
.register_form form input[type="email"]:focus,
.register_form form input[type="password"]:focus,
.register_form form input[type="text"]:focus,
.register_form form input[type="tel"]:focus,
.register_form form select:focus {
  outline: none;
  border: 1px solid var(--orange);
}
.register_form form .forgot-psw a {
  color: #949494;
  font-size: 14px;
  transition: .3s ease-in-out;
}
.register_form form .forgot-psw a:hover {
  text-decoration: underline;
  transition: .3s ease-in-out;
}
.register_form form button {
  width: fit-content;
  margin-top: 20px;
  background-color: var(--orange);
  color: #fff;
  font-size: 14px;
  outline: none;
  padding: 6px 35px;
  font-family: 'Play', sans-serif;
  border: 1px solid var(--orange);
  cursor: pointer;
  transition: .3s ease-in-out;
  font-weight: 700;
}
.register_form form button:hover {
  background-color: transparent;
  color: var(--orange);
}
.register_form form p span {
  color: var(--orange);
}


.payment-methods {
  margin-bottom: 100px;
}
.payment-methods h2 {
  color: #393939;
  font-size: 32px;
  margin-bottom: 30px;
}
.payment-methods .container .wrapper .item h3 {
  color: #000000;
}
.payment-methods .wrapper {
  display: flex;
  /* gap: 10px; */
}
.payment-methods .wrapper .item {
  border: 1px solid #C6C6C6;
  width:200px;
  padding: 15px;
  text-align: center;
  height: 100%;
  transition: .3s ease-in-out;
  max-height: 140px;
}
.payment-methods .wrapper .item .payment-visa {
   width: 80px;
}

.payment-methods .wrapper .item .payment-mastercard {
    width: 60px;
}
.payment-methods .wrapper .item .cash {
    width: 80px;
}

.payment-methods .wrapper .item:hover {
  border-color: var(--orange);
  box-shadow:0px 3px 8px #F22222;
}
.payment-methods .wrapper .item h3 {
  color: var(--orange);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 15px;
}
.payment-methods .wrapper .item .card-items {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 20px;
 margin-top: 30px;
}

.payment-methods .book {
  justify-content: center;
  width: fit-content;
  display: flex;
  margin: auto;
  margin-top: 50px;
  background-color: var(--orange);
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  padding: 10px 30px;
  border: 2px solid var(--orange);
  transition: .3s ease-in-out;
}
.payment-methods .book:hover {
  background-color: transparent;
  color: var(--orange);
}
.rent-button{
  background-color: #d3d3d3c7;
  color: #080808;
  font-weight: 700;
  font-size: 14px;
  padding: 7px 20px;
  border: 2px solid #0000005c;
  transition: .3s ease-in-out;
  display: inline-block;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  width: 100%;
}
.rent-button:hover {
    background-color: transparent;
    color: var(--orange);
}


@media(max-width:1200px) {

  .rent-sportcar .wrapper {
    max-height: 200px;
  }

  /*footer*/
  footer .topfooter .logo-social .logo img {
    width: 160px;
  }

  /*Home Page*/
  .cars .wrapper {
    /* gap: 27px; */
  }
  .cars .wrapper .item {
    padding: 0px;
    width: calc(33.33% - 27px);
    margin-bottom: 27px;
  }
  .reservation-wrapper-filter .wrapper {
    grid-template-columns: inherit;
  }
  .reservation-details h2 {
    font-size: 28px;
  }
  .reservation-details{
    margin:50px 0;
  }
}

@media(max-width:991px) {

  .rent-sportcar .wrapper {
    max-height: auto;
  }
  /*header*/
  header nav.navbar .navbar_wrap {
    width: 100%;
  }
  nav.navbar #navbarNav .navbar-nav li {
    padding-left: 0;
  }

  nav.navbar #navbarNav {
    width: 100%;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-100%);
    height: 100vh;
    background: #000;
 }
  nav.navbar .navbar_wrap .toggler {
    display: block;
  }
  nav.navbar #navbarNav ul {
    display: block;
  }
  header nav.navbar .items .languages {
    margin-left: 5px;
  }
  .car-details .wrapper .right-details {
    padding-top:0;
  }
  /*Payment methods*/
  .payment-methods h2 {
    font-size: 24px;
    margin-bottom: 25px;
  }
  /*footer*/
  footer .topfooter .wrapper {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 50px;
  }
  footer .topfooter .logo-social {
    padding-right: 0;
  }
  footer .topfooter .sitemap {
    padding-right: 0;
  }
  footer .topfooter .contact-details {
    padding-right: 0;
  }

  /*Home Page*/
  .services .wrapper {
    width: 100%;
  }
  .cars .wrapper {
    /* grid-template-columns: repeat(2,1fr); */
  }
  .cars .wrapper .item{
    width: calc(50% - 27px);
  }
  .download-app .wrapper {
    width: 100%;
  }
  .download-app .wrapper .image img {
    width: 100%;
  }
  .register_form{
    margin-bottom:50px;
  }
  .payment-methods .wrapper .item{
    margin: auto;
  }
  .main-banner .social-media{
    bottom: 18%;
  }

  /*Rent a car*/
  .rent-sportcar .wrapper .content {
    padding: 20px 15px 20px 0;
    width: 100%;
  }
  .reservation-details{
    margin:0px 0;
  }
  .reservation-details-wrapper .wrapper {
    grid-template-columns: repeat(2,1fr);
  }
  .filter-cars ul li p {
    font-size: 16px;
  }
  /*Rent a car details*/
  .car-details .wrapper .left-details h2 {
    font-size: 30px;
  }
  .car-details .wrapper .left-details h3 {
    font-size: 24px;
  }
  .car-details .wrapper .right-details .car-features {
    margin-bottom: 0;
  }
  .car-details .wrapper .right-details .car-capacity {
    margin-bottom: 0;
  }
  .car-details .wrapper .right-details h3 {
    font-size: 19px;
    margin-bottom: 20px;
  }
  .car-details .wrapper .right-details .details-item p {
    font-size: 16px;
  }
  .car-details .wrapper {
    grid-template-columns: repeat(1,1fr);
    gap: 50px;
  }
  .car-details .wrapper .right-details {
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
  }
  .reservation-details h2 {
    font-size: 24px;
  }
  .reservation-details .franchising-wrapper {
    grid-template-columns: repeat(2,1fr);
  }
  .reservation-details .wrapper {
    grid-template-columns: repeat(1,1fr);
  }
  .reservation-details .wrapper .booked-car-details {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
  }
  .reservation-details .wrapper .booked-car-details .item {
    margin-bottom: 0;
  }
  .reservation-details .wrapper .booked-car-details .item h3 {
    font-size: 19px;
  }
  .reservation-details .wrapper .booked-car-details .item h4 {
    font-size: 16px;
  }
  .reservation-details .wrapper .booked-car-details .item p {
    font-size: 16px;
  }
  .reservation-details .wrapper .book-extra-fetaures {
    margin-top: 50px;
    padding-left: 0;
  }
  .item-wrapper {
    font-size: 16px;
  }
  .reservation-details .wrapper .book-extra-fetaures .item .description p {
    font-size: 16px;
  }
  .reservation-details .reservation-total h3 {
    font-size: 24px;
  }
  .reservation-details .reservation-total table tr td {
    padding: 20px 10px;
    font-size: 13px;
  }
  .reservation-details-wrapper .wrapper .change-bookings {
    display: unset;
    justify-content: flex-end;
    margin-right: 0;
  }
  /*Contact Page*/
  .contact-main-wrapper .wrapper .contact-form {
    padding-right: 40px;
  }
  .contact-main-wrapper .wrapper .contact-information .wrapper {
    grid-template-columns: repeat(1,1fr);
    gap: 25px;
  }
}

@media(max-width:767px) {
  .rent-sportcar .wrapper {
    max-height: auto;
  }

  /*header*/
  header {
    padding: 10px 0;
  }
  nav.navbar #navbarNav ul {
    display: block;
  }
  nav.navbar #navbarNav .navbar-nav li {
    padding-right: 0;
  }
  header nav.navbar .navbar_wrap .logo img {
    max-width: 150px;
  }
  /*Payment methods*/
  .login_form {
    padding: 120px 0 50px 0;
  }
  .login_form form {
    width: 100%;
  }
  .register_form h1 {
    font-size: 26px;
    margin-bottom:20px;
  }
  .register_form form {
    width: 100%;
    gap: 20px;
    grid-template-columns: repeat(1,1fr);
  }
  .payment-methods {
    margin-bottom: 50px;
  }

  .payment-methods .book {
    margin-top: 30px;
    font-size: 15px;
  }
  /*Booking confirmation*/
  .booking-confirmation-wrapper {
    padding: 120px 0 50px 0;
  }
  .booking-confirmation-wrapper img {
    width: 200px;
  }
  .reservation-details .wrapper .book-extra-fetaures .item .description {
    width: 60%;
    font-size: 12px;
  }

  /*Reserved models*/
  .reserved-models {
    padding: 120px 0 50px 0;
  }

  /*footer*/
  footer {
    padding: 50px 0 30px 0;
  }
  footer .topfooter .contact-details p {
    display: grid;
  }

  /*Home Page*/
  .main-banner {
    background-size: 602px 392px;
    min-height: 750px;
    background-position: bottom;
  }
  
  .main-banner::after{
    /*background: linear-gradient(180deg, #000 35%, rgb(255 249 249 / 0%) 55.79%, rgb(255 245 245 / 20%) 90.57%);*/
    background: linear-gradient(180deg, #000 45%, rgb(255 249 249 / 0%) 55.79%, rgb(255 245 245 / 0%) 185.57%);
  }
  #reservation-form{
    padding: 10px;
  }
  .reservation-wrapper-filter{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 500px;
    margin-top: 0;
  }
  
  .reservation-wrapper-filter h1 {
    font-size: 30px;
  }
  .reservation-wrapper-filter h3 {
    font-size: 20px;
    margin-bottom: 20px;
  }
  .services {
    margin-bottom: 50px;
  }
  .brands {
    padding: 50px 0;
    margin-top: -30%;
    background: white;
    position: relative;
  }
  .services h2 {
    font-size: 25px;
    margin-bottom: 15px;
  }
  .services .wrapper {
    gap: 15px;
  }
  .services .wrapper .item-service h3 {
    font-size: 50px;
  }
  .services .wrapper .item-service p {
    font-size: 18px;
  }
  .services .wrapper .item-reservation p {
    font-size: 18px;
  }
  .cars {
    margin-bottom: 50px;
  }
  .cars h2 {
    margin-bottom: 15px;
    font-size: 25px;
  }
  .cars h3 {
    font-size: 18px;
  }
  .cars .wrapper {
    /* gap: 15px; */
    /* grid-template-columns: repeat(1,1fr) */

  }
  
  .cars .wrapper .item .images .active{
    height: 270px;
  }
  .cars .wrapper .item {
    /* height: 475px; */
    width: 100%;
    margin-bottom: 15px;
  }
  .cars .wrapper .item .details-wrapper .details-item {
    margin-bottom: 5px;
  }
  .cars .wrapper .item img {
    width: 200px;
  }
  .cars .wrapper .item .reserve-button {
    font-size: 15px;
    width: 100%;
    text-align: center;
  }
  .cars .wrapper .item h4 {
    font-size: 18px;
  }
  .cars .wrapper .item p {
    font-size: 14px;
  }
  .cars .wrapper .item .details-wrapper {
    /* justify-content: unset; */
  }
  .cars .view-all {
    margin-top: 30px;
    font-size: 15px;
  }
  .download-app .wrapper {
    grid-template-columns: 35% 65%;
  }
  .download-app .wrapper .content h2 {
    font-size: 24px;
    margin-bottom:20px;
  }
  .download-app .wrapper .content .available-apps {
    display: table-caption;
  }
  .download-app .wrapper .content .available-apps img {
    width: 150px;
  }

  /*Rent a car*/
   .reservation-details-wrapper {
    /* padding-top: 120px; */
    padding-top: 75px;
  }
  .rent-sportcar .wrapper {
    grid-template-columns: repeat(1,1fr);
    gap: 0;
  }
  .rent-sportcar .wrapper .content {
    max-width: 540px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  }
  .rent-sportcar .wrapper .content h2 {
    font-size: 24px;
  }
  /*Rent a car details*/
  .car-details {
    padding: 50px 0 0px 0;
  }

  /*Log In Page*/
  .page-wrapper {
  height: 100%;
  min-height: 100%;
  padding: 120px 0 50px 0;
}
    .forgot-password{
        min-height: 600px;
        /* max-height: 600px !important; */
    }
  .page-wrapper #login {
    width: 100%;
  }
  .page-wrapper #register {
    width: 100%;
  }

  /*Contact Page*/
  .contact-main-wrapper .wrapper {
    grid-template-columns: repeat(1,1fr);
    gap: 50px;
  }
  .contact-main-wrapper .wrapper .contact-form {
    padding-right: 0;
  }
  .contact-main-wrapper .wrapper .contact-form .wrapper {
    gap: 15px;
  }
  .contact-main-wrapper .wrapper .contact-information .wrapper {
    grid-template-columns: repeat(2,1fr);
    gap: 15px;
  }
  .contact-sticky{
        box-shadow: rgba(0, 0, 0, 1) 0px 0px 7px;
        /* margin: 120px 0; */
        /* margin: 120px 0; */
        width: 100%;
        background-color: var(--orange);
        position: fixed;
        z-index: 999;
        border-top-left-radius: 0;
        font-size: 16px;
        line-height: 22px;
        top: unset;
        bottom: 0;
        transform: unset;
        border-right: 0;
        border-bottom-left-radius: 0;
        right: 0;
        padding: 10px;
        display: flex;
        gap: 20px;
        justify-content: center;
        align-items: center;
  }
.contact-sticky span {
    writing-mode:horizontal-tb;
    }
    .contact-sticky a {
        display: flex;
        gap: 20px;
        align-items: center;
    }
}

@media(max-width:576px) {
  
  
body > footer{
  
  margin-bottom: 45px;
}
  
  
    .payment-methods .wrapper .item {
        margin:auto;
    }
  /*header*/
  nav.navbar .navbar_wrap .toggler {
    width: 25px;
  }

  /*Payment methods*/
  .payment-methods .wrapper {
    grid-template-columns: repeat(1,1fr);
  }

  .payment-methods .wrapper{
    display: grid;
  }
  /*footer*/
  footer .topfooter .wrapper {
    grid-template-columns: repeat(1,1fr);
    gap: 20px;
  }
  footer .topfooter h4 {
    margin-bottom: 10px;
  }
  footer .topfooter .logo-social .social-media {
    margin-top: 20px;
  }
  footer .topfooter .contact-details p {
    display: inherit;
  }
  footer .bottomfooter .wrapper p, footer .bottomfooter .wrapper a {
    font-size: 12px;
  }

  /*Home Page*/
  .reservation-wrapper-filter h1 {
    font-size: 23px;
  }
  .reservation-wrapper-filter h3 {
    font-size: 20px;
  }
  .services .wrapper {
    grid-template-columns: repeat(1,1fr);
  }
  .services .wrapper .item-reservation {
    padding: 40px 15px;
  }
  .cars .wrapper {
    /* grid-template-columns: repeat(1,1fr); */
  }
  .cars .wrapper .item .details-wrapper {
    display: flex;
    /* width: fit-content; */

  }
  .download-app .wrapper .content h2 {
    font-size: 17px;
  }
  .download-app .wrapper .content .available-apps img {
    width: 120px;
  }

  /*Rent a car*/
  .reservation-details-wrapper .wrapper {
    grid-template-columns: repeat(1,1fr);
  }
  #change-bookings-dates {
    padding: 20px 0;
  }
  .filter-cars ul li p {
    font-size: 14px;
  }
  /*Rent a car details*/
  .car-details .wrapper .left-details h2 {
    font-size: 24px;
  }
  .car-details .wrapper .left-details h3 {
    font-size: 20px;
  }
  .car-details .wrapper .right-details {
    grid-template-columns: repeat(1,1fr);
  }
  .car-details .wrapper .right-details h3 {
    margin-bottom: 10px;
  }
  .reservation-details h2 {
    font-size: 20px;
  }
  .reservation-details .franchising-wrapper {
    grid-template-columns: repeat(1,1fr);
  }
  .reservation-details .franchising-wrapper .item {
    border-right: 0;
    padding-right: 0;
  }
  .reservation-details .wrapper .booked-car-details {
    grid-template-columns: repeat(1,1fr);
  }
  .reservation-details .wrapper .book-extra-fetaures .item {
    padding: 10px 5px;
  }
  .reservation-details .wrapper .book-extra-fetaures .item .description img {
    width: 30px;
    margin-right: 20px;
  }
  .item-wrapper {
    font-size: 14px;
  }

  /*Register - Login */
  .page-wrapper form .wrapper {
    grid-template-columns: repeat(1,1fr);
    gap: 0;
  }
}

.modal {
  display: none;
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  width: 100%;
  overflow: auto;
  z-index: 999;
  justify-content: flex-end;
  padding-top: 20px;
  width: 100%;
}
.modal .modal-content {
    padding: 10px 20px;
    background-color: #fff;
    border: 2px solid var(--orange);
}
.modal .modal-content p {
  color: var(--orange);
  font-size: 15px;
  padding-bottom: 10px;
}
.modal .modal-content img {
  max-width: 300px;
  width: 100%;
}
.modal .modal-content button {
  background-color: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 7px 15px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 50px;
  text-transform: uppercase;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  justify-content: center;
  margin: 20px 0;
  margin-right: 20px;
  transition: 0.4s ease-in-out;
}

.modal .modal-content button:hover {
  opacity: 0.7;
}

#modalButton{
  margin:0;
  padding:0;
  background-color: #F22222;
  display: inline-block;
  padding: 0 20px 0 20px;
  height: auto;
  min-height: 3rem;
  float: right;
}

.modal .modal-content .close {
  color: #000;
  font-size: 28px;
  justify-content: right;
  font-weight: bold;
  transition: 0.3s ease-in-out;
  display: flex;
}

.modal .modal-content .close:hover, .modal .modal-content .close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.swiper-button-next, .swiper-button-prev{
  width: 30px !important;
  height: 30px !important; 
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffffa1;
  border-radius: 50%;
}
.swiper-button-next{
  right: 5px;
}
.swiper-button-prev{
  left: 5px;
}
.swiper-button-next::after, .swiper-button-prev::after{
  color: #F22222;
  font-size: unset !important;
  font-weight: bolder;
}

.cars .wrapper .item .img-container{
  position: relative;
}
.cars .wrapper .item .img-container::before{
  content: '';
  display: block;
  padding-bottom: 60%;
}
.cars .wrapper .item .img-container img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}
input {
  border-radius: 0;
}

input[type="search"] {
  -webkit-appearance: none;
}

.location-card{
  position: relative;
}



.filter-toggler{
  display: none;
}

.back-button{
  display: none;
}
#datepicker, #datepicker1{
  border-radius: 8px;
}

.form-control{
  border-radius: 8px;
}

@media(min-width:767px){
  #booking-dates-toggler{
display: none;
  }
}
@media(max-width:767px){

  #ui-datepicker-div{
    z-index: 1000 !important;
  }

  .reservation-details-wrapper .location-card{
    padding-left: 25px;
  }
  .location-card::before{
    content: '';
    position: absolute;
    left: 0;
    height: 100%;
    background: #9a9a9a;
    width: 1px;
  }

  .change-bookings{
    background: #f4f4f9;
    padding: 15px;
    border-radius: 6px;
  }
  #change-bookings-dates{
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 999;
    padding-top: 100px;
    transform: translateY(-100%);
    overflow-y: scroll;
    transition: .6s ease;
  }

  .reservation-wrapper-filter{
    min-height: 600px;
  }
  #booking-dates-toggler{
    content: '';
    position: absolute;
    top: 40px;
    left: 20px;
    width: 30px;
    height: 30px;
    background: none;
    outline: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: %23#F22222;transform: ;msFilter:;'%3E%3Cpath d='m16.192 6.344-4.243 4.242-4.242-4.242-1.414 1.414L10.535 12l-4.242 4.242 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L13.364 12l4.242-4.242z'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    cursor: pointer;
  }

 

  #change-bookings-dates.active{
    transform: translateY(0);
  }

  .filter-toggler{
    position: fixed;
    cursor: pointer;
    bottom: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    background: darkgray;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0px 3px 11px 2px rgba(0,0,0,0.2);
    outline: none;
  }
  .filter-toggler::before{
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='30px' height='30px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.90693 3.9999C9.93791 3.99996 9.96894 4.00001 10 4.00001C10.0311 4.00001 10.0621 3.99996 10.0931 3.9999C10.4618 3.99929 10.8242 3.99869 11.147 4.08519C12.0098 4.31636 12.6836 4.99023 12.9148 5.85296C13.0013 6.1758 13.0007 6.53821 13.0001 6.90693C13.0001 6.93792 13 6.96895 13 7.00001H21C21.5523 7.00001 22 7.44772 22 8.00001C22 8.55229 21.5523 9.00001 21 9.00001H13C13 9.03107 13.0001 9.0621 13.0001 9.09309C13.0007 9.46181 13.0013 9.82422 12.9148 10.1471C12.6836 11.0098 12.0098 11.6837 11.147 11.9148C10.8242 12.0013 10.4618 12.0007 10.0931 12.0001C10.0621 12.0001 10.0311 12 10 12C9.96894 12 9.93791 12.0001 9.90692 12.0001C9.5382 12.0007 9.17579 12.0013 8.85295 11.9148C7.99022 11.6837 7.31635 11.0098 7.08519 10.1471C6.99868 9.82421 6.99928 9.46181 6.9999 9.09308C6.99995 9.0621 7 9.03106 7 9.00001H5C4.44772 9.00001 4 8.55229 4 8.00001C4 7.44772 4.44772 7.00001 5 7.00001H7C7 6.96895 6.99995 6.93792 6.9999 6.90693C6.99928 6.53821 6.99868 6.1758 7.08519 5.85296C7.31635 4.99023 7.99022 4.31636 8.85295 4.08519C9.17579 3.99869 9.5382 3.99929 9.90693 3.9999ZM9.49861 6.00536C9.39195 6.01022 9.36685 6.01805 9.37059 6.01704C9.19804 6.06328 9.06327 6.19805 9.01704 6.3706C9.0162 6.37411 9.00963 6.40483 9.00535 6.49861C9.00024 6.61064 9 6.75845 9 7.00001V9.00001C9 9.24156 9.00024 9.38937 9.00535 9.5014C9.01021 9.60806 9.01804 9.63315 9.01704 9.62942C9.06327 9.80196 9.19804 9.93674 9.37059 9.98297C9.36685 9.98197 9.39195 9.98979 9.49861 9.99466C9.61063 9.99977 9.75844 10 10 10C10.2416 10 10.3894 9.99977 10.5014 9.99466C10.608 9.98979 10.6331 9.98197 10.6294 9.98297C10.802 9.93674 10.9367 9.80196 10.983 9.62942C10.982 9.63315 10.9898 9.60806 10.9946 9.5014C10.9998 9.38937 11 9.24156 11 9.00001V7.00001C11 6.75845 10.9998 6.61064 10.9946 6.49861C10.9898 6.39196 10.982 6.36686 10.983 6.3706M9.49861 6.00536C9.61063 6.00025 9.75844 6.00001 10 6.00001L9.49861 6.00536ZM10 6.00001C10.2416 6.00001 10.3894 6.00025 10.5014 6.00536L10 6.00001ZM10.5014 6.00536C10.5952 6.00963 10.6259 6.0162 10.6294 6.01704L10.5014 6.00536ZM10.6298 6.01713C10.6298 6.01713 10.6296 6.0171 10.6294 6.01704L10.6298 6.01713ZM15.9069 11.9999C15.9379 12 15.9689 12 16 12C16.0311 12 16.0621 12 16.0931 11.9999C16.4618 11.9993 16.8242 11.9987 17.147 12.0852C18.0098 12.3164 18.6836 12.9902 18.9148 13.853C19.0013 14.1758 19.0007 14.5382 19.0001 14.9069C19.0001 14.9379 19 14.9689 19 15H21C21.5523 15 22 15.4477 22 16C22 16.5523 21.5523 17 21 17H19C19 17.0311 19.0001 17.0621 19.0001 17.0931C19.0007 17.4618 19.0013 17.8242 18.9148 18.1471C18.6836 19.0098 18.0098 19.6837 17.147 19.9148C16.8242 20.0013 16.4618 20.0007 16.0931 20.0001C16.0621 20.0001 16.0311 20 16 20C15.9689 20 15.9379 20.0001 15.9069 20.0001C15.5382 20.0007 15.1758 20.0013 14.853 19.9148C13.9902 19.6837 13.3164 19.0098 13.0852 18.1471C12.9987 17.8242 12.9993 17.4618 12.9999 17.0931C12.9999 17.0621 13 17.0311 13 17H5C4.44772 17 4 16.5523 4 16C4 15.4477 4.44772 15 5 15H13C13 14.969 12.9999 14.9379 12.9999 14.9069C12.9993 14.5382 12.9987 14.1758 13.0852 13.853C13.3164 12.9902 13.9902 12.3164 14.853 12.0852C15.1758 11.9987 15.5382 11.9993 15.9069 11.9999ZM15.4986 14.0054C15.392 14.0102 15.3669 14.018 15.3706 14.017C15.198 14.0633 15.0633 14.1981 15.017 14.3706C15.018 14.3669 15.0102 14.392 15.0054 14.4986C15.0002 14.6106 15 14.7585 15 15V17C15 17.2416 15.0002 17.3894 15.0054 17.5014C15.0102 17.6081 15.018 17.6332 15.017 17.6294C15.0633 17.802 15.198 17.9367 15.3706 17.983C15.3669 17.982 15.392 17.9898 15.4986 17.9947C15.6106 17.9998 15.7584 18 16 18C16.2416 18 16.3894 17.9998 16.5014 17.9947C16.608 17.9898 16.6331 17.982 16.6294 17.983C16.802 17.9367 16.9367 17.802 16.983 17.6294C16.982 17.6332 16.9898 17.6081 16.9946 17.5014C16.9998 17.3894 17 17.2416 17 17V15C17 14.7585 16.9998 14.6106 16.9946 14.4986C16.9898 14.392 16.982 14.3669 16.983 14.3706C16.9367 14.1981 16.802 14.0633 16.6294 14.017C16.6331 14.018 16.608 14.0102 16.5014 14.0054C16.3894 14.0002 16.2416 14 16 14C15.7584 14 15.6106 14.0002 15.4986 14.0054Z' fill='%230F1729'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
  }

  .back-button{
    cursor: pointer;
    width: 70px;
    font-family: 'Play', sans-serif;
    display: flex;
    align-items: center;
    margin-top: 10px;
  }

  .back-button p{
    font-size: 16px;
    font-weight: 700;
    color: #404040;
  }
  #menu-primary-menu li{
    justify-content: center;
  }
  
  .go-back{
    /* top: 70px; */
    left: 10px;
    width: 30px;
    height: 60px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
  }
  .go-back::before{
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' fill='%23F22222' class='icon' version='1.1' xmlns='http://www.w3.org/2000/svg' stroke='%23F22222' stroke-width='51.2'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round' stroke='%23F22222' stroke-width='2.048'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M669.6 849.6c8.8 8 22.4 7.2 30.4-1.6s7.2-22.4-1.6-30.4l-309.6-280c-8-7.2-8-17.6 0-24.8l309.6-270.4c8.8-8 9.6-21.6 2.4-30.4-8-8.8-21.6-9.6-30.4-2.4L360.8 480.8c-27.2 24-28 64-0.8 88.8l309.6 280z' fill='%23F22222'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");    width: 30px;
    height: 30px;
  }
  .car-details .details-item ul li {
    background: #e3e3ea !important;
  }

  .filter-cars{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    /* background: white; */
   
    z-index: 2;
    display: flex;
    flex-direction: column;
  
    transform: translateX(-100%);
    overflow-y: auto;
    overflow-x: hidden;
    transition: .3s ease;
  }

  .filter-cars > div{
    height: 100%;
    padding-top: 100px;
    background: white;
    width: 70%;
    min-width: 300px;
    border: 1px solid gray;
  }
  .filter-cars > .container{
    min-height: 500px;
  }
  .filter-cars.active{
    transform: translateX(0);
  }

  .filter-cars .wrapper{
    gap: 20px 0;
    justify-content: space-between;
  }
  .filter-cars ul{
    width: 100%;
  }
  .filter-cars .filter{
    /* width: calc(50% - 10px); */
    width: 100%;
  }

  .filter-cars.active::after{
    content: '';
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    right: -100%;
    top: 0;
    width: 100%;
    height: 100%;
  }

 
 
  .filter-cars .filter h4, .filter-cars .filter h4 div {
    width: 100%;
    justify-content: space-between;
    display: flex;
    align-items: center;
  }

  .filter-cars .filter h4 img{
    width: 14px;
  }

  .cars .wrapper .item .details-wrapper {
    justify-content: space-around !important;
  }
}

.text-center{
  text-align: center;
}
.applied-filters{
  /* margin-top: 20px; */
}
.applied-filters ul{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.applied-filters ul div{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.applied-filters li{
  position: relative;
  background: #f4f4f9;
  padding: 5px 8px 5px 25px;
  border-radius: 4px;
  border: 1px solid #eee;
  font-size: 14px;
}

.applied-filters li span{
  display: flex;
  content: '';
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: %23#F22222;transform: ;msFilter:;'%3E%3Cpath d='m16.192 6.344-4.243 4.242-4.242-4.242-1.414 1.414L10.535 12l-4.242 4.242 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L13.364 12l4.242-4.242z'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.car-details .details-item ul li {
  position: relative;
    background: #f4f4f9;
    padding: 5px 8px;
    border-radius: 4px;
    border: 1px solid #eee;
    font-size: 14px;
}

.booking-close-swipe-area{
  width: 100%;
  height: 30%;
  border: 1px solid black;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
  border:none;
}
.booking-close-swipe-area p{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.booking-close-swipe-area p::before{
  display: block;
  content: '';
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg fill='%23#F22222' height='800px' width='800px' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewbox='-66.53 -66.53 644.86 644.86' xml:space='preserve' stroke='%23#F22222' stroke-width='24.054646999999996'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'/%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath d='M263.535,248.453c-4.16-4.16-10.88-4.16-15.04,0L3.054,493.787c-4.053,4.267-3.947,10.987,0.213,15.04 c4.16,3.947,10.667,3.947,14.827,0l237.867-237.76l237.76,237.76c4.267,4.053,10.987,3.947,15.04-0.213 c3.947-4.16,3.947-10.667,0-14.827L263.535,248.453z'/%3E%3Cpath d='M18.201,263.493l237.76-237.76l237.76,237.76c4.267,4.053,10.987,3.947,15.04-0.213c3.947-4.16,3.947-10.667,0-14.827 L263.535,3.12c-4.16-4.16-10.88-4.16-15.04,0L3.054,248.453c-4.053,4.267-3.947,10.987,0.213,15.04 C7.534,267.547,14.041,267.547,18.201,263.493z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-size: contain;
}

.no-scroll{
  overflow: hidden !important;
}

@media(max-height:767px) { 

  .reservation-wrapper-filter{
    top: 52%;
  }
  .brands{
    margin-top: -10%;
  }
  .main-banner .social-media{
    bottom: 4%;
  }
}

@media only screen and (min-width: 850px) and (max-width: 1200px) and (min-height: 1200px) and (max-height: 1400px) {
  .brands{
    margin-top: -50%;
  }
  .main-banner{
    background-size: contain;
  }
  .main-banner::after{
    background: linear-gradient(180deg, #000 35%, rgb(255 249 249 / 0%) 56.79%, rgb(255 245 245 / 20%) 74.57%); 
  }
  .main-banner .social-media{
    bottom: 35%;
  }
}

@media only screen and (min-width: 750px) and (max-width: 850px) and (min-height: 1000px) and (max-height: 1200px) {
  .brands{
    margin-top: -50%;
  }
  .main-banner{
    background-size: contain;
  }
  .main-banner .social-media{
    bottom: 35%;
  }
  .main-banner::after{
    background: linear-gradient(180deg, #000 35%, rgb(255 249 249 / 0%) 56.79%, rgb(255 245 245 / 20%) 74.57%); 
  }
  .reservation-wrapper-filter{
    margin-top: 35%;
  }
  .reservation-wrapper-filter h3{
    font-size: 20px;
  }
  .reservation-wrapper-filter h1{
    font-size: 22px;
  }
}