*{

box-sizing:border-box;

}


body{

margin:0;

font-family:
Arial, Helvetica, sans-serif;

color:#333;

line-height:1.6;

}



.container{

max-width:1100px;

margin:auto;

padding:50px 20px;

}



.hero{

background:
linear-gradient(135deg,#123b4a,#1f7788);

color:white;

text-align:center;

padding:90px 20px;

}



.badge{

background:#f5c542;

color:#222;

padding:10px 20px;

display:inline-block;

border-radius:30px;

font-weight:bold;

}



h1{

font-size:48px;

}


h1 span{

font-size:28px;

font-weight:normal;

}



h2{

text-align:center;

font-size:34px;

}



.center{

text-align:center;

}



.button{

background:#f5c542;

color:#222;

padding:15px 35px;

border-radius:40px;

font-weight:bold;

text-decoration:none;

display:inline-block;

border:0;

cursor:pointer;

}



.grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:25px;

}



.box{

background:white;

padding:30px;

border-radius:15px;

box-shadow:0 5px 20px #ddd;

}



.box h3{

color:#12616d;

}



.dark{

background:#123b4a;

color:white;

text-align:center;

}



.counter{

display:flex;

justify-content:center;

gap:60px;

flex-wrap:wrap;

}



.counter strong{

font-size:50px;

display:block;

color:#f5c542;

}



.benefits{

background:#f3f6f7;

}



.benefits ul{

list-style:none;

font-size:20px;

max-width:700px;

margin:auto;

}



.benefits li{

margin:15px;

}



.contact{

text-align:center;

background:#eaf4f6;

}



.modal{

display:none;

position:fixed;

z-index:999;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,.65);

}



.modal-content{

background:white;

max-width:550px;

margin:5% auto;

padding:40px;

border-radius:20px;

position:relative;

}



.close{

position:absolute;

right:20px;

top:10px;

font-size:35px;

cursor:pointer;

}



.modal input,
.modal textarea,
.modal select{

width:100%;

padding:15px;

margin:10px 0;

border:1px solid #ddd;

border-radius:8px;

font-size:16px;

}



.trust{

margin-top:25px;

padding:20px;

background:#f4f6f7;

border-radius:10px;

font-size:14px;

}



footer{

background:#222;

color:white;

text-align:center;

padding:20px;

}




@media(max-width:700px){

h1{

font-size:32px;

}


h1 span{

font-size:20px;

}


h2{

font-size:26px;

}


.counter{

gap:20px;

}

}