*{
box-sizing:border-box;
}

body{
margin:0;
font-family:Arial,sans-serif;
background:#f5f8fc;
color:#14213d;
}

.container{
width:min(1100px,92%);
margin:auto;
}

header{
background:white;
border-bottom:1px solid #e5e7eb;
}

.nav{
height:80px;
display:flex;
align-items:center;
justify-content:space-between;
}

.brand{
display:flex;
align-items:center;
gap:12px;
}

.brand img{
width:60px;
height:60px;
object-fit:contain;
}

.brand h2{
font-size:18px;
margin:0;
color:#071d49;
}

.brand span{
font-size:11px;
color:#155bd7;
}

.phone{
background:#071d49;
color:white;
text-decoration:none;
padding:11px 18px;
border-radius:30px;
font-weight:bold;
}

.hero{
background:
linear-gradient(
135deg,
#061a42,
#123f91,
#0b7a45
);
color:white;
padding:75px 0;
}

.hero-grid{
display:grid;
grid-template-columns:1fr 300px;
gap:50px;
align-items:center;
}

.small-title{
font-size:12px;
letter-spacing:2px;
font-weight:bold;
color:#28a8ed;
}

.hero h1{
font-size:52px;
line-height:1.1;
max-width:650px;
margin:12px 0;
}

.hero p{
color:#dbeafe;
font-size:17px;
max-width:600px;
}

.website{
color:white;
font-weight:bold;
text-decoration:none;
}

.rating-box{
text-align:center;
background:rgba(255,255,255,.12);
padding:35px;
border-radius:20px;
border:1px solid rgba(255,255,255,.2);
}

.rating-number{
font-size:55px;
font-weight:bold;
}

.stars,
.card-stars{
color:#ffb400;
font-size:25px;
letter-spacing:2px;
}

.review-form{
background:white;
margin-top:50px;
padding:35px;
border-radius:20px;
box-shadow:0 10px 35px rgba(0,0,0,.07);
}

.review-form h2{
margin-top:7px;
}

.form-group{
margin-top:22px;
}

.form-group label{
display:block;
font-weight:bold;
margin-bottom:8px;
}

input,
select,
textarea{
width:100%;
padding:14px;
border:1px solid #dce2ea;
border-radius:10px;
font-size:15px;
outline:none;
}

input:focus,
select:focus,
textarea:focus{
border-color:#155bd7;
}

textarea{
height:130px;
resize:vertical;
}

.two-column{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

.rating-input{
display:flex;
flex-direction:row-reverse;
justify-content:flex-end;
}

.rating-input input{
display:none;
}

.rating-input label{
font-size:40px;
color:#d1d5db;
cursor:pointer;
margin-right:5px;
}

.rating-input input:checked ~ label,
.rating-input label:hover,
.rating-input label:hover ~ label{
color:#ffb400;
}

.consent{
display:flex;
align-items:flex-start;
gap:10px;
margin:22px 0;
font-size:14px;
color:#64748b;
}

.consent input{
width:auto;
margin-top:3px;
}

.submit-button{
background:#155bd7;
color:white;
border:0;
padding:14px 25px;
border-radius:10px;
font-weight:bold;
font-size:15px;
cursor:pointer;
}

.submit-button:hover{
background:#0d47b5;
}

.customer-section{
padding:60px 0;
}

.customer-section h2{
font-size:30px;
margin-top:5px;
}

.review-grid{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:20px;
}

.review-card{
background:white;
padding:22px;
border-radius:16px;
border:1px solid #e5e7eb;
}

.customer{
display:flex;
align-items:center;
gap:12px;
}

.avatar{
width:45px;
height:45px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#155bd7;
color:white;
font-weight:bold;
font-size:18px;
}

.customer strong{
display:block;
}

.customer small{
color:#16853b;
}

.card-stars{
margin:17px 0 10px;
}

.review-card p{
color:#475569;
line-height:1.7;
}

.service{
display:inline-block;
background:#eff6ff;
color:#155bd7;
padding:6px 10px;
border-radius:20px;
font-size:11px;
font-weight:bold;
}

.date{
font-size:11px;
color:#94a3b8;
margin-top:15px;
}

.no-review{
background:white;
padding:30px;
border-radius:15px;
}

footer{
background:#071d49;
color:white;
text-align:center;
padding:30px;
}

footer p{
color:#bcd0f7;
}

@media(max-width:768px){

.hero-grid{
grid-template-columns:1fr;
}

.hero h1{
font-size:38px;
}

.two-column{
grid-template-columns:1fr;
}

.review-grid{
grid-template-columns:1fr;
}

.brand h2{
font-size:14px;
}

.phone{
font-size:12px;
padding:8px 12px;
}

}