@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import './reset.css';

body{
    font-family:'Montserrat',sans-serif ;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
} 

.title {
    font-size: 60px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 60px;
}
 .title span {
color: blue;

 }


header{
 box-shadow: 3px 3px 15px 0px rgba(34, 60, 80, 0.2);
}

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

}

.logo{
font-size: 24px;
font-weight: 500;

}
.logo span{
    color:#4bc5eb ;
}

.links {
display: flex;
gap: 20px;
}

.link{
font-weight: 500;
color:black;
transition:all .1s ease ;
}

.link:hover{
    color: skyblue;
text-decoration: underline;

}




.hero{
margin-top: 100px;
height: 80vh;

}

.hero_section{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 100px;
}

.car {
  width: 55%;  
}

.hero_title {

    font-size: 70px;
     font-weight: 600;
}
.text p {
font-size: 20px;
margin-top: 20px;
}

.btn {
padding: 5px 25px;
border-radius:50px ;
background-color:blue ;
color: aliceblue;
font-size: 32px;
}

.action {
display: flex;
gap: 20px;
margin-top: 32px;

}

/* popular_cars */

.card-1 {
width: 30%;
 box-shadow: 0px 5px 15px 0px rgba(34, 60, 80, 0.2);
border-radius: 30px;
overflow: hidden;
}
.card-1 img {
width: 100%;
height: 240px;
border-radius: 20px 20px 0 0;
object-fit: cover;
transition: all .2s linear;
}

.card-1 img:hover {
    transform: scale(1.1);
}


.card_text {

padding: 20px;

}

.popular_cars {
display: flex;
justify-content: space-between;
gap: 30px;
align-items: center;

}

.card_title {
font-size:  24px; ;
font-weight: 500;
margin-bottom: 20px;

}

.card_desk {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
     overflow: hidden;
    
}

.card_actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 15px;
}

.card_actions img {
width: 40px;
height: 40px;
cursor: pointer;

}

.contacts {

margin-top: 150px;

}

.contact_form {
margin: 0 auto;
width: 60%;
padding: 60px;
border-radius:20px ;
box-shadow: 3px 3px 15px 0px rgba(34, 60, 80, 0.2);

}



input, textarea {
width:100% ;
padding: 15px;
border-radius:20px ;
margin-bottom: 20px;
border: 1px solid #999;
border: 1px solid #4bc5eb;
box-shadow: 3px 3px 15px 0px rgba(34, 60, 80, 0.2);
}


label {
display: block;
font-size: 20px;

}

.review_cards {
display: flex;
justify-content: space-between;
gap: 30px;
border-radius: 50px;
}

.card img {
    width: 240px;
    height: 240px;
    border-radius: 500px;
  

}

.card_text {
border-radius: 30px;

box-shadow: 3px 3px 15px 0px rgba(34, 60, 80, 0.2);



}

.titles {
font-size:  24px; ;
font-weight: 500;
margin-bottom: 20px;


}