.wrapper{
    background-color: var(--white);
}

.contact{
    background-color: var(--nsf-light);
    /* padding: 2%; */
    margin: 0px;
    padding: 20px;
}

.contact-page-form {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;

}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;

}

.input-field.contact {
    width: 100%;
    padding: 10px;
    border: none;
    background-color: var(--white);
    border-radius: 8px;
    font-size: 16px;
}

.input-field.contact.message {
    height: 150px;
    resize: vertical;

}

.button.contact {
    padding: 10px 20px;
    background-color: var(--nsf-primary);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.button.contact:hover {
    background-color: var(--nsf-primary-dark);
    transition: background-color 0.3s;
}

.form-succes, .w-form-fail {
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    font-size: 16px;
}

.form-succes {
    background-color: var(--success-bg);
    color: var(--success-text);
    display: none;
}

.w-form-fail {
    background-color: var(--fail-bg);
    color: var(--fail-text);
    display: none;
}

.horizontal-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

@media (max-width: 768px) {
    .horizontal-wrapper {
        flex-direction: column;
        gap: 20px; /* Adjust gap as needed for smaller screens */
        text-align: center;
        padding: 20px 0;
    }

    .horizontal-wrapper.contact{
        padding: 20px;
    }

    .div-left.right-p{
        padding: 0px;
        text-align: center;
        gap: 0;
    }

    .div-left{
        padding: 0%;
        align-items: center;
    }

    .div-right{
        padding: 0%;
        align-items: center;
    }

    .div-right.left-p{
        padding: 0px;
        text-align: center;
    }

}