:root{
    --brand:#1e7b85;  
    --brand-2:#a3e4e6;  
}
.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;
    padding: 130px 0;
    color:var(--brand);
    position: relative;
}
.hero::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--brand-2);
}
.hero .container {
    position: relative;
    z-index: 2;
}
.project-card {
    transition: all 0.4s ease;
    border-radius: 15px;
    overflow: hidden;
}
.project-card img {
    height: 200px;
    object-fit: cover;
}
.project-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.process-step {
    background: var(--surface, #f8f9fa);
    border-radius: 15px;
    padding: 25px;
    transition: 0.4s;
}
.process-step:hover {
    background: var(--brand, #22c55e);
    color: #fff;
    transform: translateY(-8px);
}
.why-us i {
    font-size: 2rem;
    color: var(--brand, #22c55e);
}