.hero {
        width: 100%;
        min-height: 100dvh;
        position: relative;
        padding: 80px 0 40px 0;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .hero .hero-bg::before {
        content: "";
        background:color-mix(in srgb, #ffffff, transparent 50%);
        position: absolute;
        inset: 0;
        z-index: 3;
    }

    section,
    .section {
        color: #3d4348;
        background-color: #ffffff;
        /* padding: 60px 0; */
        scroll-margin-top: 100px;
        overflow: clip;
    }

    .hero .hero-bg img {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 2;
    }

    .hero .container, .hero .container-fluid {
        position: relative;
        z-index: 3;
    }
    .hero-img  {
        width: 400px;
    }