body{
font-family:Poppins,sans-serif;
overflow-x:hidden;
}

.navbar{
transition:.3s;
background:rgba(0,0,0,.15);
backdrop-filter:blur(12px);
}

.hero{

background:linear-gradient(135deg,#0b74c9,#56b947,#f4a62d,#ea3b3b);

background-size:400% 400%;

animation:bg 12s infinite alternate;

position:relative;

}

@keyframes bg{

0%{background-position:left;}

100%{background-position:right;}

}

.overlay{

position:absolute;

width:100%;

height:100%;

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

}

.hero .container{

position:relative;

z-index:10;

}

.hero h1{

font-size:65px;

font-weight:800;

}

.hero span{

color:#ffd95b;

}

.hero p{

font-size:20px;

margin-top:20px;

max-width:550px;

}

.stats{

padding:80px 0;

background:#fff;

}

.stats h2{

font-size:55px;

font-weight:700;

color:#0b74c9;

}

.section-title{

text-align:center;

font-size:40px;

font-weight:700;

margin-bottom:30px;

}

.feature-card{

background:#fff;

padding:40px;

border-radius:20px;

text-align:center;

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

transition:.4s;

height:100%;

}

.feature-card:hover{

transform:translateY(-10px);

}

.icon{

width:70px;

height:70px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

margin:auto;

margin-bottom:20px;

color:white;

}

.blue{background:#0b74c9;}
.green{background:#56b947;}
.orange{background:#f4a62d;}
.red{background:#ea3b3b;}

.timeline{

padding:100px 0;

background:#f8f9fa;

}

.steps{

display:flex;

justify-content:space-between;

text-align:center;

margin-top:60px;

}

.circle{

width:80px;

height:80px;

border-radius:50%;

background:#56b947;

color:white;

line-height:80px;

font-size:28px;

font-weight:bold;

margin:auto auto 20px;

}

.cta{

padding:100px 0;

background:#0b74c9;

color:white;

}

.cta h2{

font-size:50px;

font-weight:700;

}

footer{

padding:60px;

background:#fff;

}

@media(max-width:768px){

.hero h1{

font-size:45px;

}

.steps{

flex-direction:column;

gap:40px;

}

}