*{
box-sizing:border-box;
margin:0;
padding:0;
}

body{
font-family:Arial,sans-serif;
background:#f5f7fa;
color:#222;
line-height:1.6;
}

.container{
max-width:1200px;
margin:auto;
padding:0 20px;
}

.header{
position:sticky;
top:0;
background:#0d2f57;
z-index:1000;
}

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

.logo{
height:45px;
}

.nav{
display:flex;
gap:25px;
}

.nav a{
color:white;
text-decoration:none;
}

button{
padding:12px 20px;
border:none;
border-radius:8px;
cursor:pointer;
background:white;
font-weight:600;
}

.hero{
padding:130px 0;
background:#0d2f57;
color:white;
}

.centered{
text-align:center;
}

.centered-content{
max-width:700px;
margin:auto;
}

.section{
padding:100px 0;
}

.service-list{
display:flex;
flex-direction:column;
gap:18px;
margin-top:50px;
}

.process-steps{
list-style:none;
margin-top:30px;
counter-reset:steps;
}

.process-steps li{
margin:20px;
font-size:20px;
}

.process-steps li::before{
counter-increment:steps;
content:counter(steps) ". ";
font-weight:bold;
}

.footer{
background:#0d2f57;
color:white;
padding:80px 0;
}

.footer-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:50px;
}

.footer a{

color:white;

text-decoration:none;

transition:.2s;

}

.footer a:hover{

opacity:.8;

text-decoration:underline;

}

.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
background:rgba(0,0,0,.5);
}

.hidden{
display:none;
}

.modal-content{
width:450px;
background:white;
padding:30px;
border-radius:12px;
}

.step{
display:none;
}

.step.active{
display:block;
}

input,
textarea,
select{
width:100%;
padding:12px;
margin:10px 0;
}

@media(max-width:768px){

.header-inner{
flex-direction:column;
height:auto;
padding:20px;
}

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


.nav{
flex-wrap:wrap;
justify-content:center;
}

}

.modal{
position:fixed;
inset:0;

display:flex;
justify-content:center;
align-items:center;

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

padding:20px;

z-index:5000;
}

.hidden{
display:none;
}

.modal-content{

position:relative;

width:100%;
max-width:600px;

background:white;

padding:40px;

border-radius:20px;

box-shadow:
0 20px 60px rgba(0,0,0,.25);

animation:popup .25s ease;
}


@keyframes popup{

from{

opacity:0;

transform:
translateY(25px);

}

to{

opacity:1;

transform:none;

}

}


.close-modal{

position:absolute;

top:20px;
right:20px;

border:none;
background:none;

font-size:24px;

cursor:pointer;
}


.progress-bar{

height:10px;

background:#e5e5e5;

border-radius:999px;

overflow:hidden;

margin-bottom:30px;

}


.progress-fill{

height:100%;

width:25%;

background:
linear-gradient(
90deg,
#0d2f57,
#2d6cdf
);

border-radius:999px;

transition:
width .35s ease;
}


.step{
display:none;
}

.step.active{
display:block;
}


.step h2{
margin-bottom:8px;
}

.step p{

color:#666;

margin-bottom:25px;

}


input,
textarea,
select{

width:100%;

padding:14px;

border:1px solid #ddd;

border-radius:10px;

margin-bottom:16px;

font-size:15px;

}


textarea{

resize:vertical;

min-height:130px;

}


.button-row{

display:flex;

justify-content:space-between;

margin-top:25px;

}


.back{

background:#eee;
color:black;

}


.next,
#submit{

background:#0d2f57;

color:white;

}


.contact-choice{

display:flex;

gap:25px;

margin-top:15px;

}


.contact-choice label{

display:flex;
align-items:center;
gap:8px;

}


@media(max-width:768px){

.modal-content{

padding:25px;

}

.button-row{

flex-direction:column;

gap:10px;

}

.button-row button{

width:100%;

}

}

#toast{

position:fixed;

top:30px;
right:30px;

background:#0d2f57;
color:white;

padding:18px 24px;

border-radius:12px;

box-shadow:
0 10px 30px rgba(0,0,0,.25);

font-size:14px;

opacity:0;
transform:translateY(-20px);

transition:
opacity .3s,
transform .3s;

z-index:99999;

max-width:320px;
}


#toast.show{

opacity:1;

transform:
translateY(0);

}


#toast.error{

background:#c0392b;
}


#toast.success{

background:#27ae60;
}

.success-step{

text-align:center;

padding:30px 10px;

}

.success-icon{

width:90px;
height:90px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

display:flex;

align-items:center;
justify-content:center;

font-size:40px;

background:#27ae60;

color:white;
}

.close-finished{

background:#0d2f57;
color:white;

margin-top:20px;
}


/* SERVICES */

.service-list{
display:flex;
flex-direction:column;
gap:14px;
margin-top:50px;
}

.service-card{
background:#111827;
color:white;
border-radius:16px;
overflow:hidden;
cursor:pointer;
transition:background .25s, transform .25s;
}

.service-card:hover{
background:#1b2435;
transform:translateY(-2px);
}

.service-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:24px;
padding:24px 28px 8px;
}

.service-header-left{
flex:1;
min-width:0;
}

.service-header h3{
font-size:22px;
font-weight:700;
line-height:1.3;
}

.service-right{
display:flex;
align-items:center;
gap:18px;
flex-shrink:0;
}

.service-price{
font-size:15px;
color:#cfd5df;
white-space:nowrap;
}

.arrow{
font-size:32px;
line-height:1;
transition:transform .3s;
}

.service-content{

padding:0 28px 24px;

color:#aeb7c6;

font-size:16px;

line-height:1.7;


/* collapsed state */

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:1;

overflow:hidden;

text-overflow:ellipsis;

max-height:28px;

transition:
max-height .35s ease,
color .35s ease;

}


.service-card.active
.service-content{

display:block;

-webkit-line-clamp:unset;

max-height:300px;

overflow:visible;

color:#d6dbe4;

}

.service-card.active .arrow{
transform:rotate(90deg);
}

@media(max-width:768px){

.service-header{
padding:20px 20px 8px;
}

.service-header h3{
font-size:18px;
}

.service-content{
font-size:14px;
padding:0 20px 20px;
}

.service-price{
font-size:13px;
}

.arrow{
font-size:28px;
}

}