@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

:root {
    /* --primary-color: #FE5D26; */
    --primary-color: #26A8E0;
    --secondary-color: #FFE8E0;
    /* --dark-primary-color: #F23D00; */
    --dark-primary-color:#2633E0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body::-webkit-scrollbar {
    width: 12px;
}

body::-webkit-scrollbar-track {
    background: #FFF;
}

body::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
}


/* COMPONENTS */
button {
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;

    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}

button i {
    font-size: 24px;
}

.btn-primary {
    /* background: var(--primary-color); */
    background-color: var(--dark-primary-color);
    color: white;
}

.btn-secondary {
    background: transparent;
    color: var(--primary-color);
    border: solid 2px var(--primary-color);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
}

.text-input {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: fit-content;
}

.text-input label {
    font-weight: 600;
}

.text-input input,
.text-input textarea {
    padding: 10px;
    border-radius: 8px;
    outline: none;
    border: none;
    background: #f2f2f2;
    font-size: 14px;
    max-width: 200px;
    resize: none;
}


.title-section {
    font-size: 32px;
    text-align: center;
}

.title-section span {
    color: var(--primary-color);
}

.desc-section {
    text-align: center;
}

.section-menu {
    padding: 2rem 5%;
}

.card-info {
    display: flex;
    gap: 1rem;
}

.card-info-icon {
    font-size: 24px;
    color: white;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.5), transparent);
    padding: 12px;
    width: 50px;
    height: 50px;
    border-radius: 100%;
}

.card-info-text {
    color: white;
}

/* HEADER */

.header{
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-inline: 5%;
     height: 100px;
     position: fixed;
     width: 100%;
     top: 0;
     z-index: 999;
     background: rgba(255,255,255,0.25);
     backdrop-filter: blur(100px);
}

.header__title span{
     color: var( --primary-color);
}

.header__nav ul{
     
     display: flex;
     list-style: none;
     gap: 12px;
}


.header__nav-auth{
     display: flex;
     gap: 2rem;
     align-items: center;
}


.header__nav ul li a{
     text-decoration: none;
     color: black;
     font-weight: 600;
     font-size: 18px;
     transition: 300ms ease;
}

.header__nav ul li a:hover{
     color: var(--primary-color);
}

.header__auth{
     display: flex;
     gap: 1rem;
}

.header__menu{
     display: none;
}



/* HOME */

.home{
     min-height: 100dvh;
     display: flex;
     align-items: center;
    position: relative;
    overflow: hidden;
}

.home__title{
     font-size: 42px;
     line-height: 3rem;
     margin-bottom: 8px;
}

.home__content{
     width: 55%;
}

.home__title span{
     color: var(--primary-color);
}

.home__des{
     margin-bottom: 18px;
}

.home__search-car{
     display: flex;
     gap: 1rem;
     backdrop-filter: blur(50px);
     background: rgba(255, 255, 255, 0.5);
     border: 2px solid #eeeeee ;
     padding: 16px;
     border-radius: 12px;
     align-items: end;
     position: absolute;
     transform: translateY(100%);
     margin-top: -60px;
}

.home__rectangle{
     position: absolute;
     width: 100%;
     height: 50%;
     background-color: var(--dark-primary-color);
     clip-path: polygon(0 100%,100% 0 , 100% 100%);
     bottom: 0;
     z-index: -1;
     
}

.home__img{
     height: 350px;
     right: 0;
     position: absolute;
     margin-right: -150px;
     z-index: -1;
}


/* CARS */
.cars {
      display: flex;
      flex-direction: column;
      align-items: center;

}

.cars__list-btn{
      display: flex;
      gap: 12px;
      margin-block: 2rem;
}

.cars__list-card{
      display: flex;
      gap:2rem;
      flex-wrap: wrap;
      justify-content: center;
}

.cars__card{
      background:linear-gradient(-45deg,var(--primary-color),var(--dark-primary-color)) ;
      padding: 16px;
      border-radius: 12px;
      border: solid 1.5px #eeeeeeee;
}

.cars__card-car-image{
      height: 150px;
      object-fit: cover;
      transition: 0.3s ease;
      cursor: pointer;
}

.cars__card-car-image:hover{
      transform: scale(1.1);
}

.cars__card-info{
      display: flex;
      gap: 1rem;
      margin-top: 8px;
}

.cars__card-info-item{
     width: 100%;
     display: flex;
     align-items: center;
     gap: 4px;
}

.cars__card-info-item i{
      font-size: 24px;
      color: var(--secondary-color);
}

.cars__card-price-rent{
      display: flex;
      justify-content:space-between ;
      align-items: center;
      margin-top: 24px;
}

.cars__price{
      color: var(--secondary-color);
}

.cars__price span {
      color: black;
      font-size: 16px;

}


/* ABOUT */

.about{
      background-color: var(--primary-color);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
}
.about__img-car{
      height: 300px;
      margin-left: -250px;
      z-index: 1;
}

.about__circle{
      height: 700px;
      aspect-ratio: 1/1;
      border-radius: 100%;
      position: absolute;
      top: 50%;
      left: -350px;
      transform: translateY(-50%);
      background-color: var(--dark-primary-color);
}

.about__title{
      color: white;
      text-align: start;
}

.about__des{
      color: white;
}

.about__list-info{
      margin-top: 2rem;
}

.about__list-info .card-info{
      margin-top:1rem ;
      color: #ffffff;
}

.card-info_icon {
      display: flex;
      align-items: center;
      justify-content: center;
}

.card-info_icon i{
      color: white;
      font-size: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      border: solid;
      border-radius: 50%;

}
/* TESTIMONIALS */

.testimonials__list-card{
       display: flex;
       margin-top: 4rem;
       flex-wrap: wrap;
       gap: 3rem;
       justify-content: center;
}


.testimonials__card{
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      max-width: 300px;
}

.testimonials__card-img{
width: 100px;
height: 100px;
border: solid 3px var(--primary-color);
padding: 4px;
border-radius: 100%;
margin-bottom: 8px;
}

.testimonials__card-img img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 100%;
}

.testimonials__card-name{
      color: var(--primary-color);
      margin-bottom: 4px;
}

.Testimonial__card-rate{
     display: flex;
     align-items: center;
     margin-bottom:8px ;
}

.Testimonial__card-rate i{
      color: var(--dark-primary-color);
      font-size: 24px;
}

.Testimonial__card-rate  span{
      font-weight: 600;
      margin-left: 8px;

}

/* CONTACT */

.contact{
      background-color: var(--primary-color);
}

.contact__title{
     color:#ffff;
     text-align: start;
}

.contact__desc{
      color: #fff;
      text-align: start;
}

.contact__content{
      margin-top: 2rem;
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap: 3rem;
}

.contact__form{
      display: flex;
      flex-direction: column;
      gap: 1rem;
}
.contact__form .text-input{
      width: 100%; 
}

.contact__form .text-input label{
      color: #ffff;
}

.contact__form .text-input input,
.contact__form .text-input textarea{
      /* background-color: #F37546; */
      background-color: #1F95C3;
      /* color: #fff; */
      max-width: 100%;
      color: black;
      border: 1px solid;
}

.contact__form .text-input input::placeholder,
.contact__form .text-input textarea::placeholder{
      color: #eeeeeeee;
}

.contact__form .btn-primary{
      background-color: var(--dark-primary-color);
      margin-top: 8px;
}

.contact__list-info{
      display: flex;
     flex-direction: column;
     gap: 2rem;
     margin-top: 16px;
}

.card-info{
      color: #fff;
}

/* FOOTER */

.footer{
   background-color: var(--dark-primary-color);
   color: #ffff;
}

.footer__content{
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
       gap: 1rem;
}


.foote__menu-title{
   font-weight: 600;
   font-size: 18px;
}

.footer__menu ul{
      list-style: none;
      margin-top: 12px;
}

.footer__menu ul li a{
      color: #ffffff;
      text-decoration: none;
}


.footer__divider{
     width: 100%;
     height: 2px;  
     background-color: rgba(255, 255, 255, 0.15);
 }

.footer__copyright{
       text-align: center;
 }

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

    /* HEADER */
    .header__nav-auth{
         position: fixed;
         top: 100px;
         width: 100%;
         left: 0;
         flex-direction: column;
         align-items: start;
         padding: 0rem 5%;
         background-color: white;
         height: 0;
         overflow: hidden;
         transition: 0.3s ease;
    }
    
    .header__nav-auth.show{
         height: 320px;
         padding: 1rem 5%;
    }

    
    .header__nav ul{
         flex-direction: column;
    }

    .header__menu{
         display: block;
         cursor: pointer;
    }
    .header__menu i{
         font-size: 38px;
         color: var(--primary-color);
    }

    .header__menu .fa-xmark{
         display: none;
    }

    /* HOME */

    .home{
         padding-top: 100px;
         flex-direction: column;
    }

    .home__content{
         width: 100%;
    }
    .home__rectangle{
         height: 25%;
    }
    .home__img{
         bottom: 0;
          height: 250px;
          margin-right: -200px;
    }


    .home__search-car{
         position: static;
         transform: translateY(0);
         margin-top: 2rem;
         flex-wrap: wrap;
    }



    /* ABOUT */
     .about{
           flex-direction: column;
     }

     .about__content{
           z-index: 1;
     }

     .about__circle{
           top: 0;
     }
    /* CONTACT */
   .contact__content{
      display: flex;
      flex-direction: column-reverse;
      margin-top:0;
      gap: 2rem;
   }

   .contact__list-info{
       margin-top: 2rem;
   }

   
    /* FOOTER */
     .footer__content{
        grid-template-columns: 1fr;
     }
}