﻿/* Clean styling for �Doe-het-zelf� section with image below text */
#hp-do-it-yourself {
    --fg: #007ba4;
    --muted: #6b7280;
    --brand: #0ea5e9;
    --shadow: 0 8px 24px rgba(2, 6, 23, .06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 4vw, 48px);
    max-width: 1100px;
    margin: clamp(16px, 4vw, 48px) auto;
    padding: clamp(20px, 4vw, 48px);
    color: var(--fg);
    background: var(--bg);
    border-radius: 22px;
    text-align: center;
}

    /* Heading + paragraph */
    #hp-do-it-yourself h2 {
        font-size: 1.6rem;
        line-height: 1.2;
        margin: 0 0 0.3em;
    }

    #hp-do-it-yourself p {
        color: var(--muted);
        font-size: 13px;
        margin: 0 auto;
        max-width: 680px;
    }

    /* Image below text and bigger */
    #hp-do-it-yourself img {
        width: 100%;
        height: auto;
        border-radius: 18px;
        transition: transform .4s ease, box-shadow .4s ease;
    }





/* Mobile tweaks */
@media (max-width: 640px) {
    #hp-do-it-yourself {
        padding: 24px 16px;
    }

        #hp-do-it-yourself img {
            max-width: 100%;
        }
}
