html {
    scroll-behavior: smooth;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.3) 100%
    );
}

.navbar-blur {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.service-card:hover .icon img {
    filter: brightness(0) invert(1);
}

@media (max-width: 768px) {
    .hero-overlay {
        width: 100%;
        background: linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.7) 0%,
            rgba(0, 0, 0, 0.3) 100%
        );
    }
}