@font-face {
  font-family: 'helvetica';
  src: url('../fonts/helvetica/HelveticaNowTextBold.woff2');
  font-weight: bold
}

@font-face {
  font-family: 'helvetica';
  src: url('../fonts/helvetica/HelveticaNowTextBold.woff2');
  font-weight: bolder
}

@font-face {
  font-family: 'helvetica';
  src: url('../fonts/helvetica/HelveticaNowTextRegular.woff2');
  font-weight: normal
}

@font-face {
  font-family: 'helveticaCondensed';
  src: url('../fonts/helvetica/HelveticaNowDisplayCondensedBlack.woff2');
  font-weight: normal
}

:root {
  --primary: #1cff50;
  --lightprimary: #eefff4;
  --secondary: #2f2f2f;
  --light: #f5f5f5;
  --white: #ffffff;
  --lightblue: #add8e6;
  --lightgray: #ebebeb;
  --gray: #e2e2e2;
  --darkgray: rgb(169, 169, 169);
  --darkergray: rgb(128, 128, 128);
  --x-darkergray: rgb(79, 79, 79);
  --success: rgb(12, 149, 0);
  --danger: rgb(246, 59, 59);
  --shadow: 0 10px 35px -7px rgb(76, 76, 76)
}

* {
  font-family: 'helvetica', 'Arial';
  transition: .3s;
  box-sizing: border-box
}

*::selection {
  background-color: var(--secondary);
  color: var(--lightprimary)
}

body {
  margin: 0;
  transition: all 300ms ease-in-out !important
}

p {
  margin: 0
}

.d-flex {
  display: flex
}

.align-items-center {
  align-items: center
}

.justify-content-between {
  justify-content: space-between
}

svg {
  height: 25px;
  width: 25px;
  margin-right: 5px
}

button:hover,
.btn:hover {
  filter: brightness(95%) !important
}

a {
  text-decoration: none;
  cursor: pointer
}

a:hover {
  color: #000
}

.bordered {
  position: relative;
  padding-bottom: 2px
}

.bordered::after {
  content: '';
  height: 1px;
  width: 100%;
  position: absolute;
  background-color: var(--white);
  transform: rotateY(90deg);
  left: 0;
  bottom: 0;
  transition: 500ms
}

.bordered:hover::after {
  transform: rotateY(0deg)
}

.d-none {
  display: none !important
}

.small {
  font-size: small
}

.large {
  font-size: large
}

.larger {
  font-size: larger
}

.condensed {
  font-family: 'helveticaCondensed' !important
}

button:active,
a:active {
  transform: scale(98%)
}

.error {
  color: var(--danger);
  font-weight: normal
}

.success {
  display: block;
  color: var(--success);
  font-weight: normal;
  margin-bottom: 1rem
}

header::backdrop {
  filter: brightness(10%)
}

header .top-slogan {
  background-color: var(--primary);
  text-align: center;
  padding: .2rem 0;
  font-size: small;
  font-weight: bold
}

header .header-main {
  padding: 1rem 5rem;
  background-image: url('../images/header.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 80vh;
  max-height: 80vh
}

header .other-pages-header-main {
  padding: 1rem 5rem
}

.other-pages-header-main {
  background-color: var(--secondary)
}

header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--light);
  font-weight: bold;
  font-size: 14px
}

header nav a{
  color: var(--light);
}

header nav a:hover{
  color: var(--light);
}


header nav svg {
  stroke: var(--light);
  fill: var(--light)
}

header nav:first-child img {
  max-width: 100px;
  height: auto
}

header nav div:nth-child(2) div {
  margin-right: 20px;
  cursor: pointer
}

#menu-bar {
  cursor: pointer
}

header .form {
  position: sticky;
  top: 0;
  margin-top: 1rem;
  border-radius: 1.5rem;
  background-color: var(--white);
  padding: 3rem 2rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  -webkit-box-shadow: 0 10px 35px -7px rgb(76, 76, 76);
  -moz-box-shadow: 0 10px 35px -7px rgb(76, 76, 76);
  box-shadow: 0 10px 35px -7px rgb(76, 76, 76)
}

.input-group {
  position: relative;
  padding: 0 10px;
  margin: 1.5rem 0;
}

header .input-group .select {
  position: absolute;
  width: 60vw;
  height: 50vh;
  border-radius: .4rem;
  box-shadow: var(--shadow);
  background-color: var(--white);
  top: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

header .input-group .section {
  width: 50%;
  height: 100%
}

header .input-group .section:first-child {
  background-color: var(--white);
  border-radius: .4rem 0 0 .4rem
}

header .input-group .section:first-child .title {
  padding: 1rem 2rem;
  font-weight: bold
}

header .input-group .section:first-child .location {
  padding: 1rem 2rem;
  cursor: pointer
}

header .input-group .section:first-child .location img {
  width: 20px;
  margin-right: 10px;
  height: auto
}

header .input-group .section:first-child .location:hover {
  background-color: var(--light)
}

header .input-group .section:nth-child(2) {
  background-color: var(--light);
  border-radius: 0 .4rem .4rem 0
}

header .input-group .section:nth-child(2) div:first-child {
  padding: 1rem 2rem
}

header .input-group .section:nth-child(2) div:first-child img {
  width: 30px;
  height: auto
}

header .input-group .section:nth-child(2) .pickup-title {
  margin-top: 1rem;
  font-size: x-large;
  font-weight: bold
}

header .input-group .section:nth-child(2) .pickup-address,
header .input-group .section:nth-child(2) .return-title {
  margin-top: .5rem;
  font-size: small;
  color: var(--darkergray)
}

header .input-group .section:nth-child(2) .working-time {
  margin-top: 1rem;
  font-size: small
}

.input-group .input-icon {
  position: absolute;
  left: 23px;
  top: 9px
}

.input-group .input-icon img {
  width: 20px;
  height: auto
}

.input-group label {
  display: block;
  font-size: smaller;
  font-weight: bold;
  margin-bottom: .2rem;
  color: var(--secondary);
  position: absolute;
  top: -20px
}

.input-group input,
.input-group textarea {
  all: unset;
  padding: .8rem .1rem;
  border-radius: .4rem;
  outline: 2px solid var(--gray);
  padding-left: 2.5rem;
  cursor: pointer
}

.input-group input:focus,
.input-group textarea:focus {
  outline: 3px solid var(--primary)
}

.input-group input svg {
  stroke: var(--secondary);
  fill: var(--secondary)
}

header .form button {
  all: unset;
  padding: 1rem 2rem;
  background-color: var(--primary);
  border-radius: .6rem;
  font-weight: bold;
  color: var(--secondary);
  cursor: pointer
}

header .add-return input {
  padding: .8rem .8rem !important;
  text-align: center;
  outline-style: none;
  outline-color: var(--gray);
  color: var(--secondary)
}

.main-slogan {
  padding: 2rem 0;
  background-color: var(--primary);
  color: var(--secondary);
  text-align: center;
  font-weight: 700
}

.main-slogan p {
  font-family: 'helveticaCondensed';
  font-size: 72px;
  text-transform: uppercase;
  letter-spacing: -3px;
  line-height: 80px
}

.main-slogan span {
  display: block;
  margin-top: 1rem
}

.features {
  display: flex;
  justify-content: space-between;
  padding: 4rem 5rem;
  color: var(--secondary)
}

.features .feature {
  width: 33%
}

.features svg {
  fill: var(--secondary);
  stroke: var(--secondary);
  height: 30px;
  width: 30px
}

.features .feature-header {
  display: flex;
  align-items: center;
  font-weight: bold
}

.features .feature-header svg {
  margin-right: 10px
}

.features .feature-body {
  font-weight: bold;
  font-size: x-large;
  margin-top: 1rem;
  text-wrap: wrap
}

.about-us {
  padding: 2rem 5rem;
  color: var(--secondary);
  justify-content: space-between
}

.about-us div {
  width: 49%
}

.about-us div:first-child img {
  width: 100%;
  height: auto;
  border-radius: .5rem
}

.about-us p {
  font-size: large;
  line-height: 30px;
  margin-bottom: .5rem
}

.about-us p::before {
  content: '';
  margin-right: 15px
}

.about-us .btn {
  margin-top: 1rem;
  display: inline-block;
  padding: 1rem 2rem;
  background-color: var(--primary);
  color: var(--secondary);
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  border-radius: .5rem;
  border: 2px solid var(--secondary)
}

h1 {
  margin: 0;
  margin-bottom: 1rem;
  text-transform: uppercase
}

h1::before:not(.no-preIcon) {
  content: url('../images/trust.png');
  margin-right: 5px
}

.testimonials {
  margin: 4rem 0;
  padding: 0 5rem;
  background-image: url('../images/bmw.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  backdrop-filter: brightness(10%);
  text-align: center;
  color: var(--white);
  height: 100vh;
  display: flex;
  align-items: center
}

.testimonials p:first-child {
  font-size: 44px;
  margin-bottom: 2rem
}

.testimonials p:nth-child(2) {
  font-size: large
}

.testimonials p:nth-child(2)::before {
  content: '__'
}

h2,
h3 {
  text-align: center;
  font-size: xx-large;
  text-transform: uppercase;
  color: var(--secondary);
  width: 50vw;
  margin: auto;
  margin-bottom: 3rem
}

h3 {
  font-size: large
}

.blogs {
  display: flex;
  padding: 0 5rem;
  margin-bottom: 3rem;
  flex-wrap: wrap
}

.blogs .blog {
  width: 30%;
  padding: 1rem
}

.blogs .blog div:first-child {
  border-radius: .5rem;
  padding: .5rem;
  background-color: var(--white);
  border: 1px solid var(--gray)
}

.blogs .blog div:first-child:hover {
  border-radius: .5rem;
  background-color: var(--light);
  border: 1px solid var(--gray)
}

.blogs .blog div:first-child img {
  display: block;
  width: 100%;
  border-radius: .5rem;
  height: auto
}

.blogs .body {
  padding: 1rem .5rem
}

.blogs .title {
  font-size: x-large;
  font-weight: bold;
  text-transform: capitalize;
  color: var(--secondary);
  text-decoration: none;
  display: block;
  margin-bottom: 1rem
}

.blogs .short-text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

.blog .date {
  display: block;
  margin-bottom: .5rem;
  color: var(--secondary) !important;
  font-size: small
}

.blog .date::before {
  position: relative;
  content: url('../images/calendar.png');
  top: 3px;
  padding-right: 5px
}

.blogs .more {
  text-align: center;
  width: 100%;
  margin-top: 3rem
}

.blogs .more a {
  padding: 1rem 2rem;
  border-radius: .5rem;
  background-color: var(--primary);
  border: 2px solid var(--secondary);
  color: var(--secondary);
  font-weight: bold
}

.blog-container {
  width: 70%;
  margin: 0 auto
}

.blog-image {
  height: 50vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto
}

.blog-date {
  color: var(--secondary);
  margin-bottom: 2rem
}

.blog-text {
  margin-bottom: 2rem
}

.blog-keyword {
  color: var(--primary);
  background-color: var(--secondary);
  padding: .3rem 1rem;
  border-radius: .5rem;
  text-decoration: none;
  margin-right: .5rem
}

.blog-keyword:hover {
  color: var(--white)
}

.contact-us {
  background-color: var(--lightprimary)
}

.contact-us {
  padding: 2rem 5rem;
  color: var(--secondary);
  justify-content: space-between
}

.contact-us div {
  width: 49%
}

.contact-us div:nth-child(2) img {
  width: 100%;
  height: auto;
  border-radius: .5rem
}

.contact-us .btn {
  margin-top: 1rem;
  display: inline-block;
  padding: 1rem 2rem;
  background-color: var(--primary);
  color: var(--secondary);
  text-decoration: none;
  font-weight: bold;
  border-radius: .5rem;
  cursor: pointer;
  border: 2px solid var(--secondary)
}

h4 {
  font-size: xx-large;
  margin: 0;
  margin-bottom: 1rem;
  text-transform: uppercase
}

h4::before {
  content: url('../images/contact.png');
  margin-right: 5px
}

.contact-us .form {
  display: block;
  margin-top: 2rem;
  padding: 3rem 1rem;
  border-radius: .5rem;
  background-color: var(--white);
  width: 90%;
  padding-bottom: 1rem
}

.contact-us .input-group:not(.contact-us .input-group:first-child) {
  margin-top: 3rem
}

.contact-us .input-group {
  width: 85%;
  padding: 0
}

.contact-us .input-icon {
  left: 15px
}

.contact-us input,
.contact-us textarea {
  width: 100%
}

.custom-shape-divider-top-1710912247 {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg)
}

.custom-shape-divider-top-1710912247 svg {
  position: relative;
  display: block;
  width: calc(300% + 1.3px);
  height: 70px
}

.custom-shape-divider-top-1710912247 .shape-fill {
  fill: #EEFFF4
}

footer {
  padding: 2rem 5rem
}

footer img {
  width: 120px;
  height: auto;
  margin-right: 3rem
}

footer a {
  margin-right: 1rem;
  text-transform: uppercase;
  color: var(--secondary)
}

.copyright {
  margin-top: 1rem;
  text-align: center;
  background-color: var(--gray);
  padding: 1rem 0
}

#menu-list {
  width: 300px;
  max-width: 80vw;
  background-color: var(--white);
  height: 100vh;
  position: fixed;
  top: 0;
  left: -1000px;
  z-index: 2;
  box-shadow: var(--shadow);
  transition: all linear 200ms;
  padding: 1.5rem 4rem
}

#menu-list span:first-child {
  display: block;
  text-align: end
}

#menu-list svg {
  fill: var(--secondary) !important;
  stroke: var(--secondary) !important;
  cursor: pointer
}

#menu-list .logo {
  width: 30%;
  margin: auto
}

#menu-list .links {
  margin-top: 3rem
}

#menu-list .links a {
  display: block;
  margin: 1rem 0;
  font-size: x-large;
  text-transform: uppercase;
  font-weight: bold;
  color: var(--secondary)
}

#menu-list .links a:hover {
  color: var(--primary)
}

.show {
  animation: showMenu 500ms linear 0s 1 forwards
}

@keyframes showMenu {
  from {
    left: -1000px
  }

  to {
    left: 0
  }
}

h1.available-cars-title {
  font-weight: bolder;
  margin-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--gray)
}

main.available-cars-container {
  padding: 1rem 5rem
}

main .filter-buttons-container .button-container {
  color: var(--secondary)
}

main .filter-buttons-container .button-container select {
  background-color: var(--light);
  padding: .5rem 0;
  border: 1px solid var(--darkergray);
  border-radius: .3rem;
  outline: none;
  cursor: pointer
}

main .cars-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 2rem
}

main .cars-list .car {
  width: 30%;
  position: relative;
  border: 3px solid rgba(0, 0, 0, 0);
  padding: .1rem;
  border-radius: 18px;
  cursor: pointer;
  min-height: 400px;
  max-height: 500px;
  margin-bottom: 2rem;
}

main .cars-list .car:hover {
  border-color: var(--darkgray);
  box-shadow: var(--shadow)
}

main .cars-list .car .inner {
  color: var(--white);
  padding: 1rem;
  background-image: url('../images/background.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 16px;
  height: 100%
}

main .cars-list .car div:first-child p:first-child {
  font-size: large;
  font-weight: bold
}

main .cars-list .car div:first-child p:nth-child(2) {
  font-size: small;
  color: var(--darkgray)
}

main .cars-list .car div:first-child .option {
  display: inline-flex;
  align-items: center;
  background-color: var(--x-darkergray);
  padding: 0 .7rem;
  border-radius: 100rem
}

main .cars-list .car div:first-child .options-container {
  margin-top: 1.5rem;
  font-size: small
}

main .cars-list .car div:first-child .option svg {
  fill: var(--white);
  width: 10px
}

main .cars-list .car .car-footer {
  fill: var(--white);
  width: 10px;
  position: absolute;
  bottom: 20px;
  left: 15px;
  width: 100%;
  font-weight: bold
}

main .cars-list .car .car-footer a {
  display: inline-block;
  margin-top: 1rem;
  border: 2px solid var(--white);
  padding: .5rem 1.5rem;
  background-color: rgba(0, 0, 0, 0);
  color: var(--white);
  border-radius: 100rem
}

main .cars-list .car .car-footer a:hover {
  margin-top: 1rem;
  padding: .5rem 1.5rem;
  background-color: var(--secondary);
  color: var(--white) !important;
  cursor: pointer;
  border-radius: 100rem
}

main .cars-list .car .img-container img {
  width: 100%;
  height: auto;
  margin-bottom: 2rem
}

main.submit-order-container {
  padding: 1rem 5rem
}

main.submit-order-container .cars-list {
  margin-top: 0 !important;
  width: 30%
}

main.submit-order-container .cars-list .car {
  width: 100% !important
}

main.submit-order-container .form {
  background-color: var(--lightgray);
  width: 60%;
  padding: .5rem 1rem;
  border-radius: 18px;
  padding-top: 2rem
}

main.submit-order-container input,
main.submit-order-container textarea {
  width: 90%;
  background-color: var(--light);
  margin-bottom: 2rem
}

main.submit-order-container .form button {
  padding: .6rem 1.4rem;
  background-color: var(--secondary);
  color: var(--primary);
  border-radius: .6rem;
  text-transform: uppercase;
  border: 0;
  cursor: pointer
}

ul.contact-options li {
  display: block;
  margin-bottom: 1rem !important
}

ul.contact-options li .title {
  font-size: large;
  font-weight: bold
}

.terms {
  padding: 2rem 5rem
}

.terms h1 {
  border-bottom: 1px solid var(--gray)
}

.terms .title {
  display: inline-block;
  font-weight: bold;
  margin-top: 1rem;
  border-bottom: 1px solid var(--gray);
  padding: 0 1rem
}

.terms p:not(.title) {
  padding: 0 1.5rem;
  margin-top: .5rem;
  margin-bottom: 2rem
}

@media only screen and (max-width:724px) {
  header .header-main {
    padding: 1rem
  }

  header .other-pages-header-main {
    padding: 1rem
  }

  header .form {
    padding: 1rem .5rem
  }

  header nav {
    flex-wrap: wrap
  }

  header nav .navbar-links {
    justify-content: space-between
  }

  header nav .nav-link {
    width: 32%;
    font-size: smaller;
    margin: .5rem 0
  }

  header .form {
    padding: 2rem .5rem;
    flex-wrap: wrap
  }

  header .input-group .select {
    width: 80vw;
    height: auto;
    z-index: 99;
    flex-wrap: wrap
  }

  header .input-group .section {
    width: 100%;
    height: 100%
  }

  .input-group {
    margin-bottom: 2rem;
    width: 100%
  }

  .input-group input {
    width: 85%
  }

  #add-return {
    margin-bottom: 1rem
  }

  .main-slogan {
    padding: 5rem .5rem 2rem .5rem
  }

  .main-slogan p {
    font-size: 64px;
    text-transform: uppercase
  }

  .main-slogan span {
    padding: 0 .5rem
  }

  .features {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 4rem 1rem
  }

  .features .feature {
    margin-top: 2rem;
    text-align: center;
    width: 100%
  }

  .features svg {
    height: 30px;
    width: 30px
  }

  .features .feature-header {
    justify-content: center
  }

  .about-us {
    padding: 2rem 1rem;
    color: var(--secondary);
    justify-content: space-between;
    flex-wrap: wrap
  }

  .about-us div {
    width: 100%
  }

  .testimonials {
    margin: 4rem 0;
    padding: 0 1rem
  }

  .testimonials p:first-child {
    font-size: 32px;
    margin-bottom: 2rem
  }

  h2,
  h3 {
    width: 95vw
  }

  .blogs {
    display: flex;
    padding: 0 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap
  }

  .blogs .blog {
    width: 100%;
    padding: 1rem
  }

  .contact-us {
    background-color: var(--lightprimary)
  }

  .contact-us {
    padding: 2rem 1rem;
    color: var(--secondary);
    justify-content: space-between;
    flex-wrap: wrap
  }

  .contact-us div {
    width: 100%;
    text-align: center
  }

  .contact-us div:nth-child(2) img {
    display: none
  }

  .contact-us .btn {
    margin-top: 1rem;
    display: inline-block;
    padding: 1rem 2rem;
    background-color: var(--primary);
    color: var(--secondary);
    text-decoration: none;
    font-weight: bold;
    border-radius: .5rem;
    cursor: pointer;
    border: 2px solid var(--secondary)
  }

  footer {
    padding: 2rem 1rem
  }

  footer div {
    flex-wrap: wrap
  }

  footer img {
    width: 120px;
    height: auto;
    margin-bottom: 2rem
  }

  footer a {
    width: 100%;
    margin-right: 1rem;
    text-transform: uppercase;
    color: var(--secondary)
  }

  .copyright {
    margin-top: 1rem;
    text-align: center;
    background-color: var(--gray);
    padding: 1rem
  }

  #menu-list {
    width: 100%;
    max-width: 100vw
  }

  main.available-cars-container {
    padding: 1rem 1rem
  }

  main .cars-list .car {
    width: 100%
  }

  main.submit-order-container {
    padding: 1rem 1rem;
    flex-wrap: wrap
  }

  main.submit-order-container .form-container {
    flex-wrap: wrap
  }

  main.submit-order-container .cars-list {
    margin-top: 0 !important;
    width: 100%;
    margin-bottom: 2rem
  }

  main.submit-order-container .form-container .form {
    background-color: var(--lightgray);
    width: 100%;
    padding: .5rem 1rem;
    border-radius: 18px;
    padding-top: 2rem
  }

  .terms {
    padding: 2rem 1rem
  }
}