.elementor-16788 .elementor-element.elementor-element-2009914{padding:20px 0px 20px 0px;}.elementor-16788 .elementor-element.elementor-element-0266cec{text-align:center;}.elementor-16788 .elementor-element.elementor-element-0266cec .elementor-heading-title{color:#00384F;font-family:"Lexend Deca", Sans-serif;font-size:33px;font-weight:600;}.elementor-16788 .elementor-element.elementor-element-0266cec > .elementor-widget-container{margin:0px 0px -34px 0px;padding:20px 0px 0px 0px;}.elementor-16788 .elementor-element.elementor-element-7fce29b{color:#333333;font-family:"Lexend Deca", Sans-serif;font-size:18px;font-weight:400;}:root{--page-title-display:none;}/* Start custom CSS for text-editor, class: .elementor-element-7fce29b *//* =========================================================
   FLUENT FORM #4
   FINAL CLEAN PROFESSIONAL CSS
   ========================================================= */


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

#fluentform_4 {
    width: 100%;
    max-width: 900px;
    margin: 40px auto;
    padding: 35px;
    box-sizing: border-box;

    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 18px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);

    font-family: inherit;
}


/* =========================================================
   2. FORM ROWS
   ========================================================= */

#fluentform_4 .ff-t-container {
    display: flex;
    width: 100%;
    gap: 20px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#fluentform_4 .ff-t-cell {
    box-sizing: border-box;
}


/* Two-column rows */

#fluentform_4 .ff-t-container.ff_columns_total_2 .ff-t-cell {
    width: 50% !important;
    flex: 0 0 50% !important;
}


/* =========================================================
   3. IMAGE UPLOAD ROW
   ========================================================= */

#fluentform_4 [data-name="ff_cn_id_1"] {
    display: block !important;
    width: 100% !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
}


/* Middle image column */

#fluentform_4 [data-name="ff_cn_id_1"] .ff-t-column-2 {
    width: 100% !important;
    flex: 0 0 100% !important;
    flex-basis: 100% !important;

    display: block !important;

    text-align: center !important;
}


/* Hide empty columns */

#fluentform_4 [data-name="ff_cn_id_1"] .ff-t-column-1,
#fluentform_4 [data-name="ff_cn_id_1"] .ff-t-column-3 {
    display: none !important;
}


/* Image Upload label */

#fluentform_4 [data-name="ff_cn_id_1"] .ff-el-input--label {
    width: 100%;
    margin-bottom: 10px;
    text-align: center !important;
}


/* =========================================================
   4. PROFILE IMAGE UPLOAD CIRCLE
   ========================================================= */

#fluentform_4 .ff_file_upload_holder {
    position: relative;

    width: 120px !important;
    height: 120px !important;

    min-width: 120px;
    min-height: 120px;

    margin: 0 auto 10px !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border: 2px dashed #cfd3df;
    border-radius: 50% !important;

    background: #f9f9ff;

    overflow: hidden;

    cursor: pointer;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}


/* Hover */

#fluentform_4 .ff_file_upload_holder:hover {
    border-color: #4f46e5;
    background: #f5f5ff;
    transform: scale(1.02);
}


/* =========================================================
   5. CHOOSE FILE BUTTON
   ========================================================= */

#fluentform_4 .ff_upload_btn {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 10px !important;

    box-sizing: border-box;

    background: transparent;

    color: #4f46e5;

    font-size: 12px;
    font-weight: 600;

    text-align: center;
}


/* =========================================================
   6. FILE INPUT
   ========================================================= */

#fluentform_4 .ff_file_upload_holder input[type="file"] {
    position: absolute !important;

    inset: 0;

    width: 100% !important;
    height: 100% !important;

    opacity: 0 !important;

    cursor: pointer;

    z-index: 10;
}


/* =========================================================
   7. PROFILE IMAGE PREVIEW
   ========================================================= */

#fluentform_4 .profile-image-preview {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 100%;
    height: 100%;

    transform: translate(-50%, -50%);

    object-fit: cover;

    border-radius: 50%;

    z-index: 3;

    display: none;
}


/* Show preview */

#fluentform_4 .ff_file_upload_holder.has-preview .profile-image-preview {
    display: block;
}


/* Hide Choose File when image selected */

#fluentform_4 .ff_file_upload_holder.has-preview .ff_upload_btn {
    opacity: 0;
}


/* =========================================================
   8. HIDE FLUENT FORMS UPLOADED FILE BOX
   ========================================================= */

#fluentform_4 .ff-uploaded-list {
    visibility: hidden !important;

    width: 0 !important;
    height: 0 !important;

    max-width: 0 !important;

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

    overflow: hidden !important;
}


/* =========================================================
   9. FORM GROUP
   ========================================================= */

#fluentform_4 .ff-el-group {
    margin-bottom: 20px;
}


/* =========================================================
   10. LABELS
   ========================================================= */

#fluentform_4 .ff-el-input--label {
    margin-bottom: 8px;
}

#fluentform_4 .ff-el-input--label label {
    display: inline-block;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;

    color: #222222;

    letter-spacing: 0.1px;
}


/* Required star */

#fluentform_4 .ff-el-is-required .ff-el-input--label label:after,
#fluentform_4 .asterisk-right label:after {
    color: #e63946 !important;
    margin-left: 4px;
}


/* =========================================================
   11. INPUTS
   ========================================================= */

#fluentform_4 .ff-el-form-control {
    width: 100%;

    min-height: 48px;

    padding: 12px 15px;

    box-sizing: border-box;

    border: 1px solid #dcdfe4;

    border-radius: 9px;

    background: #ffffff;

    color: #222222;

    font-size: 14px;

    outline: none;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


/* Placeholder */

#fluentform_4 .ff-el-form-control::placeholder {
    color: #9aa0a6;
    opacity: 1;
}


/* Focus */

#fluentform_4 .ff-el-form-control:focus {
    border-color: #4f46e5;

    box-shadow:
        0 0 0 3px rgba(79, 70, 229, 0.10);

    background: #ffffff;
}


/* =========================================================
   12. TEXTAREA
   ========================================================= */

#fluentform_4 textarea.ff-el-form-control {
    min-height: 110px;

    resize: vertical;

    line-height: 1.5;
}


/* =========================================================
   13. SELECT
   ========================================================= */

#fluentform_4 select.ff-el-form-control {
    cursor: pointer;

    appearance: auto;
}


/* =========================================================
   14. CHOICES.JS DROPDOWN
   ========================================================= */

#fluentform_4 .choices {
    position: relative;

    width: 100%;

    margin-bottom: 0;
}


/* Dropdown main box */

#fluentform_4 .choices__inner {
    min-height: 48px;

    padding: 6px 15px !important;

    box-sizing: border-box;

    border: 1px solid #dcdfe4;

    border-radius: 9px;

    background: #ffffff;

    font-size: 14px;

    color: #222222;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* Focus / Open */

#fluentform_4 .choices.is-focused .choices__inner,
#fluentform_4 .choices.is-open .choices__inner {
    border-color: #4f46e5;

    box-shadow:
        0 0 0 3px rgba(79, 70, 229, 0.10);
}


/* =========================================================
   IMPORTANT:
   DROPDOWN HEIGHT / MULTIPLE OPTIONS FIX
   ========================================================= */

#fluentform_4 .choices__list--dropdown {
    position: absolute !important;

    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    max-height: 300px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    box-sizing: border-box;

    border: 1px solid #dddddd;

    border-radius: 9px;

    background: #ffffff;

    z-index: 99999 !important;

    -webkit-overflow-scrolling: touch;
}


/* Choices inner dropdown list */

#fluentform_4 .choices__list--dropdown .choices__list {
    max-height: none !important;

    overflow: visible !important;

    padding: 0 !important;

    margin: 0 !important;
}


/* Dropdown options */

#fluentform_4 .choices__list--dropdown .choices__item--choice {
    display: block !important;

    width: 100% !important;

    min-height: 40px;

    padding: 10px 14px !important;

    box-sizing: border-box;

    font-size: 14px;

    line-height: 20px;

    color: #222222;

    background: #ffffff;

    cursor: pointer;
}


/* Hover option */

#fluentform_4 .choices__list--dropdown .choices__item--choice:hover {
    background: #f4f4ff;

    color: #222222;
}


/* Highlighted option */

#fluentform_4 .choices__list--dropdown .choices__item--choice.is-highlighted {
    background: #f4f4ff;

    color: #222222;
}


/* Selected option */

#fluentform_4 .choices__list--dropdown .choices__item--choice.is-selected {
    font-weight: 600;

    background: #fafaff;
}


/* Dropdown scrollbar */

#fluentform_4 .choices__list--dropdown::-webkit-scrollbar {
    width: 6px;
}

#fluentform_4 .choices__list--dropdown::-webkit-scrollbar-track {
    background: #f5f5f5;

    border-radius: 10px;
}

#fluentform_4 .choices__list--dropdown::-webkit-scrollbar-thumb {
    background: #c9cbd3;

    border-radius: 10px;
}

#fluentform_4 .choices__list--dropdown::-webkit-scrollbar-thumb:hover {
    background: #aeb1bc;
}


/* Firefox scrollbar */

#fluentform_4 .choices__list--dropdown {
    scrollbar-width: thin;

    scrollbar-color: #c9cbd3 #f5f5f5;
}


/* =========================================================
   15. DATE PICKER
   ========================================================= */

#fluentform_4 input.ff-el-datepicker {
    cursor: pointer;
}


/* =========================================================
   16. RADIO BUTTONS
   ========================================================= */

#fluentform_4 .ff_list_buttons .ff-el-input--content {
    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;
}


#fluentform_4 .ff-el-form-check {
    margin: 0;
}


/* Radio option box */

#fluentform_4 .ff-el-form-check-label {
    display: flex;

    align-items: center;

    gap: 8px;

    min-height: 46px;

    padding: 0 18px;

    box-sizing: border-box;

    border: 1px solid #dcdfe4;

    border-radius: 9px;

    background: #ffffff;

    cursor: pointer;

    font-size: 14px;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}


/* Hover */

#fluentform_4 .ff-el-form-check-label:hover {
    border-color: #4f46e5;

    background: #f8f8ff;
}


/* Radio */

#fluentform_4 .ff-el-form-check-input {
    accent-color: #4f46e5;

    cursor: pointer;
}


/* Selected text */

#fluentform_4 .ff-el-form-check-input:checked + span {
    font-weight: 600;
}


/* =========================================================
   17. ADDRESS
   ========================================================= */

#fluentform_4 #ff_4_description {
    min-height: 110px;
}


/* =========================================================
   18. SUBMIT BUTTON
   ========================================================= */

#fluentform_4 .ff_submit_btn_wrapper {
    margin-top: 25px;

    margin-bottom: 0;

    text-align: center;
}


/* Button */

#fluentform_4 .ff-btn-submit {
    min-width: 190px;

    min-height: 50px;

    padding: 13px 30px;

    border: none !important;

    border-radius: 9px;

    background: #4f46e5 !important;

    color: #ffffff !important;

    font-size: 15px;

    font-weight: 600;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 5px 15px rgba(79, 70, 229, 0.20);

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* Hover */

#fluentform_4 .ff-btn-submit:hover {
    background: #3730a3 !important;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(79, 70, 229, 0.28);
}


/* Active */

#fluentform_4 .ff-btn-submit:active {
    transform: translateY(0);
}


/* =========================================================
   19. DESKTOP ALIGNMENT
   ========================================================= */

@media (min-width: 768px) {

    #fluentform_4 .ff-t-container.ff_columns_total_2 {
        display: flex !important;
    }

    #fluentform_4 .ff-t-container.ff_columns_total_2 .ff-t-cell {
        width: 50% !important;
        flex-basis: 50% !important;
    }
}


/* =========================================================
   20. TABLET / MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #fluentform_4 {
        width: calc(100% - 24px);

        margin: 20px 12px;

        padding: 22px 17px;

        border-radius: 14px;
    }


    /* Stack columns */

    #fluentform_4 .ff-t-container {
        display: block !important;

        width: 100% !important;
    }


    #fluentform_4 .ff-t-container.ff_columns_total_2 .ff-t-cell {
        width: 100% !important;

        flex-basis: 100% !important;

        margin-bottom: 0;
    }


    /* Image upload */

    #fluentform_4 .ff_file_upload_holder {
        width: 120px !important;

        height: 120px !important;

        min-width: 120px;

        min-height: 120px;
    }


    /* Choices dropdown mobile */

    #fluentform_4 .choices__list--dropdown {
        max-height: 260px !important;

        overflow-y: auto !important;
    }


    /* Radio */

    #fluentform_4 .ff_list_buttons .ff-el-input--content {
        gap: 8px;
    }


    #fluentform_4 .ff-el-form-check-label {
        padding: 0 14px;
    }


    /* Submit */

    #fluentform_4 .ff-btn-submit {
        width: 100%;

        min-width: 0;
    }
}


/* =========================================================
   21. SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    #fluentform_4 {
        width: calc(100% - 16px);

        margin: 12px 8px;

        padding: 18px 13px;

        border-radius: 12px;
    }


    #fluentform_4 .ff-el-form-control {
        min-height: 46px;

        padding: 11px 13px;
    }


    #fluentform_4 .ff_file_upload_holder {
        width: 120px !important;

        height: 120px !important;
    }


    /* Small screen dropdown */

    #fluentform_4 .choices__list--dropdown {
        max-height: 240px !important;

        overflow-y: auto !important;
    }


    #fluentform_4 .ff-el-form-check-label {
        min-height: 44px;

        padding: 0 12px;

        font-size: 13px;
    }
}


/* =========================================================
   SUCCESS OVERLAY - PREMIUM DESIGN
   ========================================================= */

#successOverlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
    box-sizing: border-box;

    background: rgba(15, 23, 42, 0.72);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    z-index: 999999;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}


/* Active */

#successOverlay.active {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   SUCCESS CARD
   ========================================================= */

#successOverlay .success-card {
    position: relative;

    width: 100%;
    max-width: 450px;

    padding: 42px 35px 35px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.8);

    border-radius: 24px;

    text-align: center;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.20);

    transform: translateY(25px) scale(0.94);

    opacity: 0;

    transition:
        transform 0.45s cubic-bezier(.2,.8,.2,1),
        opacity 0.35s ease;
}


/* Card animation */

#successOverlay.active .success-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}


/* =========================================================
   SUCCESS ICON
   ========================================================= */

#successOverlay .success-icon {
    position: relative;

    width: 82px;
    height: 82px;

    margin: 0 auto 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ecfdf3;

    box-shadow:
        0 0 0 8px #f3fdf7,
        0 10px 25px rgba(22, 163, 74, 0.12);

    animation:
        successIconPop
        0.6s
        cubic-bezier(.17,.67,.35,1.3)
        0.25s
        both;
}


/* Green circle */

#successOverlay .success-icon::before {
    content: "";

    position: absolute;

    inset: 8px;

    border-radius: 50%;

    background: #16a34a;
}


/* Check SVG */

#successOverlay .success-icon svg {
    position: relative;

    z-index: 2;

    width: 38px;
    height: 38px;

    fill: none;

    stroke: #ffffff;

    stroke-width: 2.5;

    stroke-linecap: round;
    stroke-linejoin: round;

    stroke-dasharray: 50;
    stroke-dashoffset: 50;

    animation:
        checkDraw
        0.55s
        ease
        0.65s
        forwards;
}


/* =========================================================
   HEADING
   ========================================================= */

#successOverlay .success-card h2 {
    margin: 0 0 12px;

    color: #111827;

    font-size: 26px;

    line-height: 1.25;

    font-weight: 700;

    letter-spacing: -0.4px;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

#successOverlay .success-card p {
    margin: 0 auto 28px;

    max-width: 360px;

    color: #6b7280;

    font-size: 14px;

    line-height: 1.7;

    font-weight: 400;
}


/* =========================================================
   WHATSAPP BUTTON
   ========================================================= */

#successOverlay .btn-whatsapp {
    width: 100%;

    min-height: 52px;

    padding: 14px 20px;

    box-sizing: border-box;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    border: none;

    border-radius: 11px;

    background: #25d366;

    color: #ffffff;

    text-decoration: none;

    font-size: 15px;

    font-weight: 600;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(37, 211, 102, 0.25);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


/* WhatsApp SVG */

#successOverlay .btn-whatsapp svg {
    width: 21px;
    height: 21px;

    flex-shrink: 0;

    fill: currentColor;

    transition: transform 0.25s ease;
}


/* Hover */

#successOverlay .btn-whatsapp:hover {
    background: #1ebe5d;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(37, 211, 102, 0.32);
}


/* Icon hover */

#successOverlay .btn-whatsapp:hover svg {
    transform: scale(1.1);
}


/* Click */

#successOverlay .btn-whatsapp:active {
    transform: translateY(0);

    box-shadow:
        0 5px 12px rgba(37, 211, 102, 0.22);
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes successIconPop {

    0% {
        opacity: 0;
        transform: scale(0.4);
    }

    70% {
        opacity: 1;
        transform: scale(1.12);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


@keyframes checkDraw {

    from {
        stroke-dashoffset: 50;
    }

    to {
        stroke-dashoffset: 0;
    }
}


/* =========================================================
   SUCCESS OVERLAY MOBILE
   ========================================================= */

@media (max-width: 600px) {

    #successOverlay {
        padding: 16px;
    }

    #successOverlay .success-card {
        max-width: 100%;

        padding: 35px 22px 25px;

        border-radius: 20px;
    }

    #successOverlay .success-icon {
        width: 74px;
        height: 74px;

        margin-bottom: 20px;
    }

    #successOverlay .success-card h2 {
        font-size: 22px;
    }

    #successOverlay .success-card p {
        font-size: 13.5px;

        line-height: 1.65;

        margin-bottom: 24px;
    }

    #successOverlay .btn-whatsapp {
        min-height: 50px;

        font-size: 14px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    #successOverlay .success-card {
        padding: 30px 18px 22px;
    }

    #successOverlay .success-icon {
        width: 68px;
        height: 68px;
    }

    #successOverlay .success-card h2 {
        font-size: 20px;
    }
}/* End custom CSS */