:root{
            --brand:#0d6efd;
            --muted:#6c757d;
        }
        body{padding-top:70px}
        .hero{
            background: linear-gradient(90deg, rgba(13,110,253,0.1), rgba(13,110,253,0.03));
            padding: 4rem 0;
        }
.hero {
            position: relative;
            padding-top: 6rem; /* space for fixed navbar */
            padding-bottom: 6rem;
            background-image: url('/imgs/hero-bg.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            color: #fff;
        }

        .hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0.45); /* dark overlay for readability */
            z-index: 0;
        }

        /* Keep content above overlay */
        .hero .container,
        .hero .card.feature {
            position: relative;
            z-index: 1;
        }

        /* Ensure text is readable on the image */
        .hero .display-5,
        .hero .lead,
        .hero .btn-outline-secondary {
            color: #fff;
        }

        /* Keep the right-side card visually distinct */
        .hero .card.feature {
            background: rgba(255,255,255,0.95);
            color: #000;
        }

        @media (min-width: 992px) {
            .hero { padding-top: 8rem; padding-bottom: 8rem; }
        }

        .service-icon{
            font-size: 2rem;
            color: var(--brand);
        }
        .feature{
            background: #fff;
            border-radius: .5rem;
            box-shadow: 0 6px 18px rgba(15,23,42,0.04);
            padding: 1.25rem;
        }
        footer{background:#f8f9fa;padding:2rem 0;}