.elementor-47 .elementor-element.elementor-element-7fc3264{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:1;}.elementor-47 .elementor-element.elementor-element-0219055{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-47 .elementor-element.elementor-element-0219055:not(.elementor-motion-effects-element-type-background), .elementor-47 .elementor-element.elementor-element-0219055 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1EB47314;}.elementor-47 .elementor-element.elementor-element-6d3c45c .fluentform-widget-wrapper{background-color:#FFFFFF;}.elementor-47 .elementor-element.elementor-element-6d3c45c{width:100%;max-width:100%;}.elementor-47 .elementor-element.elementor-element-6d3c45c > .elementor-widget-container{background-color:#FFFFFF;padding:30px 30px 30px 30px;border-radius:10px 10px 10px 10px;box-shadow:0px 0px 30px -15px rgba(0,0,0,0.5);}.elementor-47 .elementor-element.elementor-element-6d3c45c.elementor-element{--align-self:center;}.elementor-47 .elementor-element.elementor-element-6d3c45c .fluentform-widget-wrapper .ff-el-group a{color:#FFFFFF;}.elementor-47 .elementor-element.elementor-element-6d3c45c .fluentform-widget-wrapper .ff-el-group .ff-btn-submit{background-color:var( --e-global-color-primary );color:#ffffff !important;}@media(max-width:1024px){.elementor-47 .elementor-element.elementor-element-0219055{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-47 .elementor-element.elementor-element-6d3c45c{width:100%;max-width:100%;}}@media(min-width:768px){.elementor-47 .elementor-element.elementor-element-0219055{--content-width:1280px;}}/* Start custom CSS for html, class: .elementor-element-3346f8c *//* =========================================================
   YAQEEN FOUNDATION
   BECOME A VOLUNTEER — FLUENT FORM SECTION
========================================================= */


/* =========================================================
   MAIN SECTION
========================================================= */

html body .yq-volunteer-form-section{
    --yq-red:#f84d42;
    --yq-green:#20b86d;
    --yq-yellow:#ffb840;
    --yq-heading:#343434;
    --yq-text:#727272;
    --yq-light:#f2f2f2;

    position:relative !important;
    width:100% !important;
    padding:50px 20px !important;
    overflow:hidden !important;

    background:
        radial-gradient(
            circle at 4% 10%,
            rgba(255,184,64,.09) 0%,
            transparent 28%
        ),
        radial-gradient(
            circle at 96% 88%,
            rgba(32,184,109,.075) 0%,
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #fffaf6 0%,
            #ffffff 48%,
            #f6fbf8 100%
        ) !important;
}


/* DECORATIVE GLOW */

html body .yq-volunteer-form-section::before{
    content:"" !important;

    position:absolute !important;

    top:-110px !important;
    right:-100px !important;

    width:300px !important;
    height:300px !important;

    border-radius:50% !important;

    background:
        rgba(248,77,66,.055) !important;

    pointer-events:none !important;
}


html body .yq-volunteer-form-section::after{
    content:"" !important;

    position:absolute !important;

    left:-90px !important;
    bottom:-130px !important;

    width:280px !important;
    height:280px !important;

    border-radius:50% !important;

    background:
        rgba(255,184,64,.07) !important;

    pointer-events:none !important;
}


/* =========================================================
   INNER WRAPPER
========================================================= */

html body .yq-volunteer-form-section
.yq-volunteer-form-wrap{

    position:relative !important;

    z-index:2 !important;

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

    margin:0 auto !important;

    display:grid !important;

    grid-template-columns:
        minmax(0,.9fr)
        minmax(0,1.1fr) !important;

    gap:55px !important;

    align-items:center !important;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

html body .yq-volunteer-form-copy{
    min-width:0 !important;
}


html body .yq-volunteer-form-copy-inner{
    max-width:560px !important;
}


/* EYEBROW */

html body .yq-volunteer-form-eyebrow{
    display:inline-block !important;

    margin:0 0 10px !important;

    color:#f84d42 !important;

    font-family:"Pacifico",cursive !important;

    font-size:24px !important;

    line-height:1.35 !important;

    font-weight:400 !important;
}


/* HEADING */

html body .yq-volunteer-form-copy h2{
    margin:0 0 18px !important;

    color:#343434 !important;

    font-family:"Nunito",sans-serif !important;

    font-size:40px !important;

    line-height:1.3 !important;

    font-weight:800 !important;

    letter-spacing:0 !important;
}


html body .yq-volunteer-form-copy h2 span{
    position:relative !important;

    z-index:1 !important;

    display:inline-block !important;

    color:#343434 !important;
}


/* CHARITE UNDERLINE */

html body .yq-volunteer-form-copy h2 span::after{
    content:"" !important;

    position:absolute !important;

    z-index:-1 !important;

    left:0 !important;

    top:74% !important;

    width:100% !important;

    height:55% !important;

    background-image:
        url("https://yaqeenglobalfoundation.org/wp-content/themes/charite/assets/shape/title-underline.png") !important;

    background-repeat:no-repeat !important;

    background-position:center !important;

    background-size:100% 100% !important;

    pointer-events:none !important;
}


/* DESCRIPTION */

html body .yq-volunteer-form-intro{
    margin:0 0 28px !important;

    color:#727272 !important;

    font-family:"DM Sans",sans-serif !important;

    font-size:16px !important;

    line-height:26px !important;

    font-weight:400 !important;
}


/* =========================================================
   FEATURE POINTS
========================================================= */

html body .yq-volunteer-form-points{
    display:flex !important;

    flex-direction:column !important;

    gap:18px !important;

    margin:0 0 27px !important;
}


html body .yq-volunteer-form-point{
    display:grid !important;

    grid-template-columns:52px 1fr !important;

    gap:15px !important;

    align-items:center !important;
}


/* ICON */

html body .yq-volunteer-form-point-icon{
    width:52px !important;
    height:52px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    flex:0 0 52px !important;

    border-radius:10px !important;

    color:#ffffff !important;

    background:#20b86d !important;

    box-shadow:
        0 5px 0 rgba(18,142,83,.17),
        0 10px 20px rgba(32,184,109,.13) !important;
}


html body .yq-volunteer-form-point-icon--yellow{
    color:#343434 !important;

    background:#ffb840 !important;

    box-shadow:
        0 5px 0 rgba(206,139,23,.16),
        0 10px 20px rgba(255,184,64,.15) !important;
}


html body .yq-volunteer-form-point-icon--red{
    color:#ffffff !important;

    background:#f84d42 !important;

    box-shadow:
        0 5px 0 rgba(194,53,44,.16),
        0 10px 20px rgba(248,77,66,.14) !important;
}


html body .yq-volunteer-form-point-icon i{
    color:inherit !important;

    font-size:20px !important;

    line-height:1 !important;
}


/* POINT TITLE */

html body .yq-volunteer-form-point strong{
    display:block !important;

    margin:0 0 3px !important;

    color:#343434 !important;

    font-family:"Nunito",sans-serif !important;

    font-size:17px !important;

    line-height:1.35 !important;

    font-weight:800 !important;
}


/* POINT TEXT */

html body .yq-volunteer-form-point p{
    margin:0 !important;

    color:#727272 !important;

    font-family:"DM Sans",sans-serif !important;

    font-size:14px !important;

    line-height:22px !important;
}


/* =========================================================
   BOTTOM NOTE
========================================================= */

html body .yq-volunteer-form-note{
    display:flex !important;

    align-items:center !important;

    gap:12px !important;

    padding:15px 17px !important;

    border:
        1px solid rgba(248,77,66,.11) !important;

    border-radius:10px !important;

    background:
        rgba(248,77,66,.045) !important;
}


html body .yq-volunteer-form-note-icon{
    width:34px !important;
    height:34px !important;

    flex:0 0 34px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    border-radius:7px !important;

    color:#ffffff !important;

    background:#f84d42 !important;
}


html body .yq-volunteer-form-note-icon i{
    color:#ffffff !important;

    font-size:13px !important;
}


html body .yq-volunteer-form-note p{
    margin:0 !important;

    color:#343434 !important;

    font-size:13px !important;

    line-height:21px !important;

    font-weight:600 !important;
}


/* =========================================================
   FORM CARD
========================================================= */

html body .yq-volunteer-form-card{
    position:relative !important;

    min-width:0 !important;

    padding:34px !important;

    border:
        1px solid rgba(52,52,52,.075) !important;

    border-radius:15px !important;

    background:#ffffff !important;

    box-shadow:
        0 18px 50px rgba(38,45,49,.09) !important;
}


/* SMALL TOP ACCENT */

html body .yq-volunteer-form-card::before{
    content:"" !important;

    position:absolute !important;

    top:0 !important;
    left:34px !important;

    width:75px !important;
    height:4px !important;

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

    background:
        linear-gradient(
            90deg,
            #f84d42,
            #ffb840
        ) !important;
}


/* =========================================================
   FLUENT FORM RESET / STRICT SCOPE
========================================================= */

html body .yq-volunteer-form-card
.fluentform,
html body .yq-volunteer-form-card
.ff-el-group,
html body .yq-volunteer-form-card
.ff-el-input--content{
    font-family:"DM Sans",sans-serif !important;
}


/* REMOVE UNWANTED FORM MARGINS */

html body .yq-volunteer-form-card
.ff-el-group{
    margin-bottom:18px !important;
}


/* =========================================================
   LABELS
========================================================= */

html body .yq-volunteer-form-card
.ff-el-input--label label,
html body .yq-volunteer-form-card
.ff-el-form-check-label{
    color:#343434 !important;

    font-family:"DM Sans",sans-serif !important;

    font-size:13px !important;

    line-height:20px !important;

    font-weight:600 !important;
}


html body .yq-volunteer-form-card
.ff-el-input--label{
    margin-bottom:7px !important;
}


/* REQUIRED STAR */

html body .yq-volunteer-form-card
.ff-el-input--label label::after{
    color:#f84d42 !important;
}


/* =========================================================
   INPUTS
========================================================= */

html body .yq-volunteer-form-card
input[type="text"],

html body .yq-volunteer-form-card
input[type="email"],

html body .yq-volunteer-form-card
input[type="tel"],

html body .yq-volunteer-form-card
input[type="number"],

html body .yq-volunteer-form-card
input[type="url"],

html body .yq-volunteer-form-card
input[type="date"],

html body .yq-volunteer-form-card
select,

html body .yq-volunteer-form-card
textarea{

    width:100% !important;

    min-height:50px !important;

    padding:
        12px 15px !important;

    border:
        1px solid rgba(52,52,52,.12) !important;

    border-radius:
        6px !important;

    outline:none !important;

    color:#343434 !important;

    background:#fbfcfc !important;

    font-family:"DM Sans",sans-serif !important;

    font-size:14px !important;

    line-height:22px !important;

    box-shadow:none !important;

    transition:
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease !important;
}


/* TEXTAREA */

html body .yq-volunteer-form-card textarea{
    min-height:125px !important;

    resize:vertical !important;
}


/* PLACEHOLDER */

html body .yq-volunteer-form-card
input::placeholder,

html body .yq-volunteer-form-card
textarea::placeholder{
    color:#9a9a9a !important;

    opacity:1 !important;
}


/* =========================================================
   INPUT FOCUS
========================================================= */

html body .yq-volunteer-form-card
input:focus,

html body .yq-volunteer-form-card
select:focus,

html body .yq-volunteer-form-card
textarea:focus{

    border-color:
        rgba(248,77,66,.55) !important;

    background:#ffffff !important;

    box-shadow:
        0 0 0 3px rgba(248,77,66,.07) !important;
}


/* =========================================================
   RADIO + CHECKBOX
========================================================= */

html body .yq-volunteer-form-card
input[type="checkbox"],
html body .yq-volunteer-form-card
input[type="radio"]{
    accent-color:#f84d42 !important;
}


/* =========================================================
   FLUENT FORM SUBMIT BUTTON
   CHARITE / YAQEEN THEME STYLE
========================================================= */

html body .yq-volunteer-form-card
button.ff-btn-submit,

html body .yq-volunteer-form-card
.ff-btn-submit,

html body .yq-volunteer-form-card
button[type="submit"]{

    width:auto !important;

    min-width:165px !important;

    height:50px !important;

    min-height:50px !important;

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:8px !important;

    margin:2px 0 0 !important;

    padding:
        0 29px !important;

    border:
        0 !important;

    border-radius:
        5px !important;

    outline:none !important;

    color:
        #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;

    background:
        #f84d42 !important;

    font-family:
        "DM Sans",
        sans-serif !important;

    font-size:
        13px !important;

    line-height:
        1 !important;

    font-weight:
        700 !important;

    letter-spacing:
        .35px !important;

    text-transform:
        uppercase !important;

    cursor:
        pointer !important;

    box-shadow:
        0 3px 0 rgba(194,53,44,.19),
        0 8px 18px rgba(248,77,66,.16) !important;

    transition:
        transform .22s ease,
        background .22s ease,
        box-shadow .22s ease !important;
}


/* BUTTON HOVER */

html body .yq-volunteer-form-card
button.ff-btn-submit:hover,

html body .yq-volunteer-form-card
.ff-btn-submit:hover,

html body .yq-volunteer-form-card
button[type="submit"]:hover{

    color:#ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;

    background:
        #ed463c !important;

    transform:
        translateY(-2px) !important;

    box-shadow:
        0 4px 0 rgba(194,53,44,.18),
        0 11px 22px rgba(248,77,66,.20) !important;
}


/* BUTTON ACTIVE */

html body .yq-volunteer-form-card
button.ff-btn-submit:active,

html body .yq-volunteer-form-card
.ff-btn-submit:active,

html body .yq-volunteer-form-card
button[type="submit"]:active{

    transform:
        translateY(0) !important;
}


/* =========================================================
   FLUENT FORM ERROR
========================================================= */

html body .yq-volunteer-form-card
.text-danger,

html body .yq-volunteer-form-card
.error{

    color:#f84d42 !important;

    font-size:12px !important;
}


html body .yq-volunteer-form-card
.ff-el-is-error input,

html body .yq-volunteer-form-card
.ff-el-is-error textarea,

html body .yq-volunteer-form-card
.ff-el-is-error select{

    border-color:
        rgba(248,77,66,.60) !important;
}


/* =========================================================
   SUCCESS MESSAGE
========================================================= */

html body .yq-volunteer-form-card
.ff-message-success{

    padding:
        15px 17px !important;

    border:
        1px solid rgba(32,184,109,.18) !important;

    border-radius:
        8px !important;

    color:
        #343434 !important;

    background:
        rgba(32,184,109,.07) !important;

    font-family:
        "DM Sans",
        sans-serif !important;

    font-size:
        14px !important;

    line-height:
        23px !important;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1024px){

    html body .yq-volunteer-form-section{
        padding:
            20px !important;
    }


    html body .yq-volunteer-form-section
    .yq-volunteer-form-wrap{

        grid-template-columns:
            .9fr 1.1fr !important;

        gap:
            30px !important;
    }


    html body .yq-volunteer-form-eyebrow{
        font-size:
            22px !important;
    }


    html body .yq-volunteer-form-copy h2{
        font-size:
            36px !important;
    }


    html body .yq-volunteer-form-card{
        padding:
            27px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

    html body .yq-volunteer-form-section{
        padding:
            20px 13px !important;
    }


    html body .yq-volunteer-form-section
    .yq-volunteer-form-wrap{

        grid-template-columns:
            1fr !important;

        gap:
            28px !important;
    }


    html body .yq-volunteer-form-copy-inner{
        max-width:
            none !important;
    }


    html body .yq-volunteer-form-eyebrow{
        font-size:
            20px !important;
    }


    html body .yq-volunteer-form-copy h2{
        font-size:
            30px !important;
    }


    html body .yq-volunteer-form-intro{
        font-size:
            15px !important;

        line-height:
            24px !important;
    }


    html body .yq-volunteer-form-point{
        grid-template-columns:
            47px 1fr !important;

        gap:
            13px !important;
    }


    html body .yq-volunteer-form-point-icon{
        width:
            47px !important;

        height:
            47px !important;

        flex-basis:
            47px !important;
    }


    html body .yq-volunteer-form-card{
        padding:
            24px 20px !important;
    }


    html body .yq-volunteer-form-card::before{
        left:
            20px !important;
    }


    html body .yq-volunteer-form-card
    button.ff-btn-submit,

    html body .yq-volunteer-form-card
    .ff-btn-submit,

    html body .yq-volunteer-form-card
    button[type="submit"]{

        min-width:
            155px !important;

        height:
            48px !important;

        min-height:
            48px !important;

        padding:
            0 24px !important;
    }

}/* End custom CSS */