.elementor-2441 .elementor-element.elementor-element-37cc2e9{--display:flex;}.elementor-2441 .elementor-element.elementor-element-fae5d2a{--spacer-size:50px;}.elementor-2441 .elementor-element.elementor-element-9b51354{--display:flex;}/* Start custom CSS for container, class: .elementor-element-9b51354 *//* ============================================================
   CAREER / PROFESSIONAL PROFILE FORM
   Contact Form 7 - Complete Custom CSS
   ============================================================ */


/* ============================================================
   1. MAIN FORM CONTAINER
   ============================================================ */

.professional-profile-form {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    font-family: inherit !important;
    color: #333 !important;
}

.professional-profile-form *,
.professional-profile-form *::before,
.professional-profile-form *::after {
    box-sizing: border-box !important;
}


/* ============================================================
   2. SECTION HEADINGS
   ============================================================ */

.professional-profile-form h3 {
    display: block !important;
    width: 100% !important;
    margin: 30px 0 20px !important;
    padding: 12px 18px !important;

    background: #193d63 !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 0 !important;

    font-size: 20px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    text-align: left !important;
}


/* ============================================================
   3. 50% - 50% FORM ROW
   ============================================================ */

.professional-profile-form .form-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    width: 100% !important;
    gap: 30px !important;

    margin: 0 0 20px !important;
    padding: 0 !important;

    align-items: flex-start !important;
}


/* Each column = 50% */

.professional-profile-form .form-row .form-group {
    display: block !important;

    width: calc(50% - 15px) !important;
    max-width: calc(50% - 15px) !important;

    flex: 0 0 calc(50% - 15px) !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ============================================================
   4. SINGLE FORM GROUP
   ============================================================ */

.professional-profile-form > .form-group,
.professional-profile-form .form-group {
    width: 100% !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
}


/* ============================================================
   5. LABELS
   ============================================================ */

.professional-profile-form label {
    display: block !important;
    width: 100% !important;

    margin: 0 0 8px !important;
    padding: 0 !important;

    color: #222222 !important;

    font-size: 15px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;

    text-align: left !important;
}


/* ============================================================
   6. TEXT / EMAIL / TEL / DATE / NUMBER INPUTS
   ============================================================ */

.professional-profile-form input[type="text"],
.professional-profile-form input[type="email"],
.professional-profile-form input[type="tel"],
.professional-profile-form input[type="date"],
.professional-profile-form input[type="number"],
.professional-profile-form input[type="url"],
.professional-profile-form select,
.professional-profile-form textarea {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    padding: 12px 13px !important;

    min-height: 48px !important;

    background: #ffffff !important;
    color: #333333 !important;

    border: 1px solid #d5dce3 !important;
    border-radius: 4px !important;

    outline: none !important;
    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}


/* ============================================================
   7. PLACEHOLDER
   ============================================================ */

.professional-profile-form input::placeholder,
.professional-profile-form textarea::placeholder {
    color: #777777 !important;
    opacity: 1 !important;
}


/* ============================================================
   8. INPUT FOCUS
   ============================================================ */

.professional-profile-form input[type="text"]:focus,
.professional-profile-form input[type="email"]:focus,
.professional-profile-form input[type="tel"]:focus,
.professional-profile-form input[type="date"]:focus,
.professional-profile-form input[type="number"]:focus,
.professional-profile-form input[type="url"]:focus,
.professional-profile-form select:focus,
.professional-profile-form textarea:focus {
    border-color: #193d63 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #193d63 !important;
}


/* ============================================================
   9. TEXTAREA
   ============================================================ */

.professional-profile-form textarea {
    width: 100% !important;
    min-height: 120px !important;

    resize: vertical !important;

    padding: 12px 13px !important;
}


/* ============================================================
   10. FILE UPLOAD
   ============================================================ */

.professional-profile-form input[type="file"] {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 48px !important;

    padding: 8px !important;

    background: #ffffff !important;

    border: 1px solid #d5dce3 !important;
    border-radius: 4px !important;

    font-size: 14px !important;
    cursor: pointer !important;
}


/* ============================================================
   11. TABLE
   ============================================================ */

.professional-profile-form .profile-table {
    display: table !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 25px !important;
    padding: 0 !important;

    border-collapse: collapse !important;
    border-spacing: 0 !important;

    table-layout: fixed !important;
}


/* ============================================================
   12. TABLE HEADER
   ============================================================ */

.professional-profile-form .profile-table th {
    padding: 10px 8px !important;

    background: #eef2f6 !important;
    color: #333333 !important;

    border: 1px solid #d5dce3 !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    line-height: 1.4 !important;

    text-align: left !important;
    vertical-align: middle !important;
}


/* ============================================================
   13. TABLE CELLS
   ============================================================ */

.professional-profile-form .profile-table td {
    padding: 5px !important;

    background: #ffffff !important;

    border: 1px solid #d5dce3 !important;

    vertical-align: middle !important;
}


/* ============================================================
   14. TABLE INPUTS
   ============================================================ */

.professional-profile-form .profile-table td input[type="text"] {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 38px !important;

    margin: 0 !important;
    padding: 7px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    font-size: 13px !important;

    box-shadow: none !important;
}


/* Table input focus */

.professional-profile-form .profile-table td input[type="text"]:focus {
    border: 1px solid #193d63 !important;
    box-shadow: none !important;
}


/* ============================================================
   15. SUBMIT AREA
   ============================================================ */

.professional-profile-form .form-submit {
    display: block !important;

    width: 100% !important;

    margin: 30px 0 20px !important;
    padding: 0 !important;

    text-align: center !important;
}


/* ============================================================
   16. SUBMIT BUTTON
   ============================================================ */

.professional-profile-form input[type="submit"] {
    display: inline-block !important;

    width: auto !important;
    min-width: 220px !important;

    min-height: 48px !important;

    margin: 0 !important;
    padding: 13px 30px !important;

    background: #193d63 !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 4px !important;

    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;

    cursor: pointer !important;

    transition: all 0.3s ease !important;
}


/* Submit hover */

.professional-profile-form input[type="submit"]:hover {
    background: #102f50 !important;
    color: #ffffff !important;
}


/* ============================================================
   17. CF7 VALIDATION ERROR
   ============================================================ */

.professional-profile-form .wpcf7-not-valid {
    border-color: #dc3545 !important;
}


.professional-profile-form .wpcf7-not-valid-tip {
    display: block !important;

    margin-top: 5px !important;

    color: #dc3545 !important;

    font-size: 13px !important;
    line-height: 1.4 !important;
}


/* ============================================================
   18. CF7 RESPONSE MESSAGE
   ============================================================ */

.professional-profile-form .wpcf7-response-output {
    display: block !important;

    width: 100% !important;

    margin: 20px 0 !important;
    padding: 12px 15px !important;

    border-radius: 4px !important;

    font-size: 14px !important;
}


/* ============================================================
   19. SPAN WRAPPER
   CF7 creates span.wpcf7-form-control-wrap
   ============================================================ */

.professional-profile-form .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}


/* ============================================================
   20. MOBILE - 767PX
   ============================================================ */

@media screen and (max-width: 767px) {

    .professional-profile-form {
        width: 100% !important;
        max-width: 100% !important;
    }


    /* 1 column on mobile */

    .professional-profile-form .form-row {
        display: block !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }


    .professional-profile-form .form-row .form-group {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        flex: 0 0 100% !important;

        margin-bottom: 18px !important;
    }


    /* Section heading */

    .professional-profile-form h3 {
        font-size: 17px !important;
        padding: 11px 14px !important;
        margin: 25px 0 18px !important;
    }


    /* Table scroll */

    .professional-profile-form .profile-table {
        display: block !important;

        width: 100% !important;

        overflow-x: auto !important;

        white-space: nowrap !important;

        table-layout: auto !important;
    }


    .professional-profile-form .profile-table th,
    .professional-profile-form .profile-table td {
        min-width: 130px !important;
    }


    .professional-profile-form .profile-table td input {
        min-width: 115px !important;
    }


    /* Submit */

    .professional-profile-form input[type="submit"] {
        display: block !important;

        width: 100% !important;
        min-width: 100% !important;
    }
}


/* ============================================================
   21. SMALL MOBILE - 480PX
   ============================================================ */

@media screen and (max-width: 480px) {

    .professional-profile-form h3 {
        font-size: 16px !important;
        padding: 10px 12px !important;
    }


    .professional-profile-form label {
        font-size: 14px !important;
    }


    .professional-profile-form input[type="text"],
    .professional-profile-form input[type="email"],
    .professional-profile-form input[type="tel"],
    .professional-profile-form input[type="date"],
    .professional-profile-form input[type="file"],
    .professional-profile-form textarea {
        font-size: 14px !important;
    }
}/* End custom CSS */