<style>
.qs-contact{
padding:80px 20px;
background:
linear-gradient(
180deg,
#ffffff,
#f6fbff
);
direction:rtl;
}
.qs-wrap{
max-width:1200px;
margin:auto;
}
.qs-head{
text-align:center;
margin-bottom:50px;
}
.qs-head h1{
font-size:42px;
color:#00245c;
margin-bottom:15px;
}
.qs-head p{
max-width:700px;
margin:auto;
font-size:18px;
line-height:2;
color:#58728a;
}
.qs-grid{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:20px;
margin-bottom:40px;
}
.qs-card{
background:#fff;
padding:35px;
border-radius:24px;
text-align:center;
box-shadow:
0 20px 50px
rgba(0,36,92,.08);
transition:.3s;
}
.qs-card:hover{
transform:
translateY(-8px);
}
.icon{
font-size:42px;
margin-bottom:18px;
}
.qs-card h3{
color:#00245c;
margin-bottom:10px;
}
.qs-card span{
color:#678;
}
.qs-form{
display:grid;
gap:18px;
}
.qs-form input,
.qs-form textarea{
padding:18px;
border:none;
border-radius:18px;
background:#fff;
box-shadow:
0 10px 30px
rgba(0,36,92,.05);
font-size:16px;
}
.qs-form textarea{
height:180px;
resize:none;
}
.qs-form button{
height:60px;
border:none;
border-radius:18px;
background:#1879c0;
color:#fff;
font-size:18px;
cursor:pointer;
transition:.3s;
}
.qs-form button:hover{
background:#00245c;
}
@media(max-width:768px){
.qs-grid{
grid-template-columns:1fr;
}
.qs-head h1{
font-size:32px;
}
}
</style>
