.elementor-2400 .elementor-element.elementor-element-4409f09{--display:flex;}/* Start custom CSS for formidable, class: .elementor-element-348cdc0 */span.frm_required {display: none;}

div#frm_field_11_container {justify-content:center !important;display:flex}

.frm_forms .frm_form_field select {
    /* 1. Remove the default browser arrow */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    /* 2. Re-insert the arrow with your color #283B9E */
    /* Note: %23 is the CSS code for the # symbol */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23283B9E'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd' /%3E%3C/svg%3E") !important;
    
    background-repeat: no-repeat !important;

    /* 3. SET SIZE: Change 25px to make it larger or smaller */
    background-size: 25px !important;

    /* 4. SET POSITION: 'right 15px' keeps it from touching the edge */
    background-position: right 15px center !important;

    /* 5. Ensure text doesn't overlap the new larger arrow */
    padding-right: 45px !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4409f09 */.elementor-2400 .elementor-element.elementor-element-4409f09 {
    background: linear-gradient(180deg, #F8FAFF 0%, #F8FAFF 50%, #E8F0FF 100%); 
}/* End custom CSS */