/* =========================
   HERO SECTION
========================= */

.how-hero{

background: linear-gradient(120deg,#1fa463,#0f7c47);
padding: 70px 0;

}

.hero-box{

text-align:center;
color:white;
padding:40px 20px;

}

.hero-box h1{

font-size:42px;
max-width:800px;
margin:auto;
line-height:1.4;

}

.hero-box .cta-button{

display:inline-block;
margin-top:25px;

background:white;
color:#1fa463;

padding:15px 35px;
border-radius:5px;
font-weight:bold;
text-decoration:none;

}


/* =========================
   HOW IT WORKS
========================= */

.how-process{

padding:40px 0 60px 0;
text-align:center;

}

.how-process h2{

font-size:58px;
color:#0d2f73;
margin-bottom:50px;

}


/* Timeline */

.timeline{

display:flex;
justify-content:space-between;
align-items:flex-start;
gap:0;
position:relative;

}

/* Main connecting line */

.timeline::before{

content:"";
position:absolute;

top:12px;
left:8%;

width:84%;
height:2px;

background:#cfcfcf;
z-index:0;

}

.step{

position:relative;
width:20%;
z-index:1;

}

.dot{

width:26px;
height:26px;
border-radius:50%;

margin:0 auto 20px auto;

box-shadow:0 3px 8px rgba(0,0,0,0.2);

}

.blue{

background:#11b9ff;

}

.green{

background:#00d26a;

}

.purple{

background:#cc33ff;

}

.yellow{

background:#ffe600;

}

.pink{

background:#ff2a7a;

}

.step h3{

font-size:20px;
margin-bottom:15px;
color:#222;

}

.step p{

font-size:15px;
line-height:1.7;
color:#555;

}


/* =========================
   PRICING SECTION
========================= */

.pricing-model{

padding:60px 0;

}

.pricing-model h2{

text-align:center;
font-size:42px;
color:#0d2f73;
margin-bottom:40px;

}

.pricing-box{

display:flex;
justify-content:space-between;
align-items:center;
gap:40px;

}

.pricing-list{

flex:1;

}

.pricing-item{

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

padding:20px 0;

border-bottom:1px solid #ddd;

font-size:18px;

}

.pricing-item strong{

color:#11b9ff;
font-size:20px;

}

.pricing-image{

flex:1;
text-align:center;

}

.pricing-image img{

max-width:300px;

}

.pricing-btn{

display:inline-block;
margin-top:35px;

background:#11b9ff;
color:white;

padding:15px 35px;
border-radius:5px;

text-decoration:none;
font-weight:bold;

}


/* =========================
   MOBILE RESPONSIVE
========================= */

@media(max-width:900px){

.timeline{

flex-direction:column;
align-items:center;
gap:40px;

}

.timeline::before{

display:none;

}

.step{

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

}

.how-process h2{

font-size:42px;

}

.hero-box h1{

font-size:30px;

}

.pricing-box{

flex-direction:column;

}

}