/* Grid Background */
    body, html{
        background-image: repeating-linear-gradient(
                90deg,
                hsla(196, 0%, 79%, 0.06) 0px,
                hsla(196, 0%, 79%, 0.06) 1px,
                transparent 1px,
                transparent 96px
            ),
            repeating-linear-gradient(
                0deg,
                hsla(196, 0%, 79%, 0.06) 0px,
                hsla(196, 0%, 79%, 0.06) 1px,
                transparent 1px,
                transparent 96px
            ),
            repeating-linear-gradient(
                0deg,
                hsla(196, 0%, 79%, 0.09) 0px,
                hsla(196, 0%, 79%, 0.09) 1px,
                transparent 1px,
                transparent 12px
            ),
            repeating-linear-gradient(
                90deg,
                hsla(196, 0%, 79%, 0.09) 0px,
                hsla(196, 0%, 79%, 0.09) 1px,
                transparent 1px,
                transparent 12px
            ),
            linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255)) !important;
    }

    .nav-link {
        margin-right: 20px;
        font-size: 1rem;
    }

    .banner-bg{
        position: relative;
        background: url("/assets/img/landing/rv_parks.jpeg") no-repeat center center;
        background-size: cover;
        height: 90vh;
        background-color: rgba(0, 0, 0, 0.70); /* Dark overlay */
    }

    .banner-bg::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.70); /* Dark overlay */
        z-index: 1;
    }

    .banner-content {
        position: relative; /* Required to apply z-index */
        z-index: 2; /* Higher than ::before */
    }

    ul.list-unstyled li {
        margin-bottom: 0.5rem; /* adjust spacing */
    }

/* content-breaker */
    .text-overlay-section {
        width: 100vw;
        height: 40vh;
        overflow: hidden;
        position: relative;
    }
    
    .bg-image {
        position: absolute;
        inset: 0;
        background: url('/assets/img/landing/van-image.jpg') no-repeat center center;
        background-size: cover;
        z-index: 1;
        filter: brightness(0.4) blur(2px); /* combined in one line */
        transform: scale(1.1); /* prevents blur cutoff */
    }
    
    .text-overlay-section .container {
        z-index: 2;
        position: relative;
    }

    /* General Section Layout */
    .section-layout {
        width: 100vw;
        position: relative;
        overflow: hidden;
    }

    /* HERO & LAST sections - fixed height */
    .hero-section,
    .last-section-container {
        height: 70vh;
    }

    /* HOW IT WORKS section - flexible height with balanced margins */
    .how-it-works {
        height: auto;
        min-height: 70vh;
        display: flex;
        align-items: center;     /* vertical center */
        justify-content: center; /* horizontal center */
        padding: 5rem 0;         /* balanced top & bottom */
    }

    /* Background Images */
    .content-bg {
        position: absolute;
        inset: 0;
        background: url('/assets/img/landing/revenue-image.jpg') no-repeat center center;
        background-size: cover;
        z-index: 1;
        filter: brightness(0.5) blur(3px);
        transform: scale(1.1);
    }

    .last-section {
        position: absolute;
        inset: 0;
        background: url('/assets/img/landing/meeting-image.jpg') no-repeat center center;
        background-size: cover;
        z-index: 1;
        filter: brightness(0.5) blur(3px);
        transform: scale(1.1);
    }

    /* MOBILE adjustments - reduce margins for text-heavy section */
    /* Mobile view - remove vertical centering so content flows naturally */
    @media (max-width: 768px) {
        .how-it-works {
            display: block;      /* remove flex centering */
            padding: 2rem 0;     /* smaller spacing */
        }
    }


  /* Market Segments */
    .card-img-top {
        width: 100%; /* Makes the image span the full width of the card */
        height: auto; /* Maintains aspect ratio */
        max-height: 160px !important; /* Adjust this value as needed */
        object-fit: cover; /* Ensures the image covers the area without distortion */
    }

    .btn-black{
        background-color: #333333;
        color: #fff;
    }

    .btn-black:hover{
        background-color: #1c1c1c;
    }