:root{
    --brand:#1e7b85;   
    --brand-2:#a3e4e6;      
    --surface:#f9fafb;
    --text:#1f2937;
}
body{
    font-family: "Poppins", sans-serif;
}

.hero{
    background: linear-gradient(to right, rgba(125, 139, 202, 0.9), rgba(6,182,212,0.9)),
                url('./img/highway.png') center/cover no-repeat;
    color:var(--surface);
    padding: 120px 0;
    text-align: center;
}
.hero h1{
    font-size: 3rem;
    font-weight: 700;
}
.hero p{
    font-size: 1.2rem;
}
.service-card{
    border: none;
    border-radius: 20px;
    transition: all 0.4s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    background: #fff;
}
.service-card:hover{
    transform: translateY(-10px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.service-card i{
    font-size: 3rem;
    color: var(--brand);
}
.section-title{
    font-weight: 700;
    text-align: center;
    /* margin-bottom: 40px;
    margin-top: 200px; */
}
.reveal{
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
}
.reveal.active{
    opacity: 1;
    transform: translateY(0);
}