/* volunteer css */


/* ---------------- WRAPPER ---------------- */
.v1 {
    width: 100%;
    max-width: 900px;
    margin: 20px auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: system-ui, -apple-system, sans-serif;
    background: #f6f8fb;
}

/* ---------------- PARAGRAPH CARD ---------------- */
.v1 p {
    background: linear-gradient(135deg, #ffffff, #f9fcff);
    padding: 14px;
    border-radius: 12px;
    line-height: 1.7;
    font-size: 14px;
    color: #2f3437;
    border: 1px solid #e3eaf3;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

/* ---------------- FORM CARD ---------------- */
.v1 form,
.v1 .wpcf7 form,
.v1 .wpforms-container form,
.v1 .elementor-form {
    background: linear-gradient(135deg, #ffffff, #fffdf3);
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #e6e9f2;
    box-shadow: 0 6px 14px rgba(0,0,0,0.04);

    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---------------- INPUTS ---------------- */
.v1 input,
.v1 textarea,
.v1 select {
    width: 100% !important;
    padding: 11px 12px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    border: 1px solid #d7e3f0 !important;
    background: #f9fcff !important;
    outline: none !important;
    box-sizing: border-box;
    color: #2f3437;
    transition: 0.2s ease;
}

/* focus = sky blue */
.v1 input:focus,
.v1 textarea:focus,
.v1 select:focus {
    border-color: #38bdf8 !important;
    background: #ffffff !important;
}

/* ---------------- BUTTON ---------------- */
.v1 button,
.v1 input[type="submit"],
.v1 .wpcf7-submit {
    width: 100% !important;
    padding: 12px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    border: none !important;
    background: linear-gradient(135deg, #38bdf8, #facc15) !important;
    color: #1f2326 !important;
    font-weight: 600 !important;
}

/* hover subtle */
.v1 button:hover,
.v1 input[type="submit"]:hover {
    filter: brightness(0.96);
}

/* ---------------- QUOTE CARD ---------------- */
.v1 blockquote {
    margin: 0;
    padding: 14px;
    background: linear-gradient(135deg, #fffdf3, #f9fcff);
    border-radius: 12px;
    font-style: italic;
    font-size: 13.8px;
    color: #3a3f44;
    border: 1px solid #f1e7b6;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

/* ---------------- MOBILE ---------------- */
@media (max-width: 768px) {
    .v1 {
        margin: 10px auto;
        padding: 10px;
        gap: 12px;
    }

    .v1 p,
    .v1 blockquote {
        font-size: 13.8px;
        padding: 12px;
        line-height: 1.6;
    }

    .v1 form {
        padding: 12px;
    }
}