body{

font-family:'Poppins',sans-serif;


}


/* HERO */

.ask-hero{
height:300px;
background:url('../img/image_site/hero.jpg') center/cover no-repeat;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}

.ask-hero .overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
}

.hero-content{
position:relative;
color:white;
text-align:center;
}

.hero-content h1{
font-size:40px;
}

.hero-content p{
opacity:0.9;
}

/* CONTAINER */

.ask-container{
padding:60px 20px;
background:#f9fafb;
}

/* GRID */

.ask-grid{
display:grid;
grid-template-columns:1fr 2fr;
gap:30px;
max-width:1000px;
margin:auto;
}

/* VEHICLE */

.vehicle-card{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.vehicle-card p{
color:#17c3b2;
font-weight:bold;
}

/* FORM */

.ask-form{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
animation:fadeUp 0.8s ease;
}

.ask-form h3{
margin-bottom:15px;
color:#17c3b2;
}

.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
}

.form-grid input,
.ask-form textarea{
width:100%;
padding:12px;
border:1px solid #ddd;
border-radius:6px;
margin-bottom:15px;
}

.ask-form textarea{
min-height:120px;
}

/* BUTTON */

.btn-submit{
background:linear-gradient(120deg,#17c3b2,#0ea5e9);
color:white;
padding:14px;
border:none;
border-radius:8px;
cursor:pointer;
width:100%;
transition:0.3s;
}

.btn-submit:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,0,0,0.15);
}

/* SUCCESS */

.success-box{
background:#ecfdf5;
border-left:5px solid #17c3b2;
padding:15px;
margin-bottom:20px;
border-radius:6px;
}

/* ANIMATION */

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* MOBILE */

@media(max-width:900px){

.ask-grid{
grid-template-columns:1fr;
}

.form-grid{
grid-template-columns:1fr;
}

.hero-content h1{
font-size:28px;
}

}