.extensions-sub-page-side-bar-sticky {
    position: sticky !important;
    top: 50px;
}

.extensions-sub-page-side-bar-sticky-icon-holder {
    width: fit-content !important;
}

.extensions-sub-page-side-bar-sticky-icon {}

.extensions-sub-page-side-bar-sticky-icon .elementor-icon {
    display: block !important;
}

/*****************************/
/*****************************/
/*****************************/

.extension-sub-page-contact-form-holder {
    width: 304px;
    max-width: 304px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.extension-sub-page-contact-form-holder:hover {}

/* ══════════════════════════════════════════════════
   HEADER SECTION  (icon + title + text)
══════════════════════════════════════════════════ */

.extension-sub-page-contact-form-details-holder {}

/* Icon + title row */
.extension-sub-page-contact-form-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

/* Icon badge */


/* Title */
.extension-sub-page-contact-form-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin: 0;
    padding: 0;
}

/* Description text */
.extension-sub-page-contact-form-text {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
    color: rgba(212, 230, 249, 0.6);
    margin: 0;
}

.extension-sub-page-contact-form-divider {
    height: 1px;
    background: rgba(212, 230, 249, 0.09);
}

/* ══════════════════════════════════════════════════
   FIELDS SECTION
══════════════════════════════════════════════════ */

.extension-sub-page-contact-form-fileds-holder {
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: rgba(1, 47, 107, 0.15);
}

/* Name + Email side by side */
.extension-sub-page-contact-form-input-holder {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Labels ── */
.extension-sub-page-contact-form-name-holder label,
.extension-sub-page-contact-form-email-holder label {
    display: flex;
    flex-direction: column;
    gap: 5px;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgb(212, 230, 249);
    cursor: pointer;
}

.extension-sub-page-contact-form-name-holder p,
.extension-sub-page-contact-form-email-holder p {
    margin-bottom: 8px;
}

/* ── Input + icon wrapper ── */
.extension-sub-page-contact-form-name-input-and-icon-holder p,
.extension-sub-page-contact-form-email-input-and-icon-holder p {
    position: relative;
    display: flex;
    align-items: center;
}

/* Leading icon inside the input row */
.extension-sub-page-contact-form-name-input-and-icon-holder i,
.extension-sub-page-contact-form-email-input-and-icon-holder i {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);

}



.extension-sub-page-contact-form-name-input-and-icon-holder>i,
.extension-sub-page-contact-form-email-input-and-icon-holder>i {

    font-size: 13px;
    color: rgba(212, 230, 249, 0.28);
    pointer-events: none;
    z-index: 1;
    transition: color 0.2s ease;
}

/* CF7 injects a <span> wrapper around its inputs — target both */
.extension-sub-page-contact-form-name-input-and-icon-holder .wpcf7-form-control-wrap,
.extension-sub-page-contact-form-email-input-and-icon-holder .wpcf7-form-control-wrap {
    width: 100%;
}

/* ── Text / Email inputs ── */
.extension-sub-page-contact-form-name-input-and-icon-holder input[type="text"],
.extension-sub-page-contact-form-name-input-and-icon-holder input[type="email"],
.extension-sub-page-contact-form-email-input-and-icon-holder input[type="text"],
.extension-sub-page-contact-form-email-input-and-icon-holder input[type="email"] {
    width: 100%;
    padding: 10px 12px 10px 34px;
    /* left padding for the icon */

    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 230, 249, 0.13);
    border-radius: 8px;

    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;

    outline: none;
    -webkit-appearance: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.extension-sub-page-contact-form-name-input-and-icon-holder input::placeholder,
.extension-sub-page-contact-form-email-input-and-icon-holder input::placeholder {
    color: rgba(212, 230, 249, 0.2);
}

/* Focus state */
.extension-sub-page-contact-form-name-input-and-icon-holder input:focus,
.extension-sub-page-contact-form-email-input-and-icon-holder input:focus {
    border-color: #ffd800;
    background: rgba(255, 216, 0, 0.03);
    box-shadow: 0 0 0 3px rgba(255, 216, 0, 0.08);
}

.extension-sub-page-contact-form-name-input-and-icon-holder:has(input[type=text]:focus) i,
.extension-sub-page-contact-form-email-input-and-icon-holder:has(input[type=email]:focus) i {
    color: #ffd800;
}


/* Icon brightens when its sibling input is focused */
.extension-sub-page-contact-form-name-input-and-icon-holder input:focus~i,
.extension-sub-page-contact-form-email-input-and-icon-holder input:focus~i,
.extension-sub-page-contact-form-name-input-and-icon-holder:focus-within>i,
.extension-sub-page-contact-form-email-input-and-icon-holder:focus-within>i {
    color: rgba(255, 216, 0, 0.6);
}

/* CF7 validation error */
.extension-sub-page-contact-form-name-input-and-icon-holder input.wpcf7-not-valid,
.extension-sub-page-contact-form-email-input-and-icon-holder input.wpcf7-not-valid {
    border-color: rgba(255, 80, 80, 0.5);
    background: rgba(255, 80, 80, 0.04);
}

.wpcf7-not-valid-tip {
    font-size: 10.5px;
    color: rgba(255, 120, 120, 0.85);
    margin-top: 4px;
    display: block;
}

/* ══════════════════════════════════════════════════
   RECAPTCHA + SUBMIT ROW
══════════════════════════════════════════════════ */

.extension-sub-page-contact-form-recaptcha-and-submit-holder {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* reCAPTCHA widget */
.extension-sub-page-contact-form-recaptcha {
    display: flex;
    justify-content: flex-start;
}

/* Scale down reCAPTCHA to fit narrow sidebars gracefully */
.extension-sub-page-contact-form-recaptcha .g-recaptcha,
.extension-sub-page-contact-form-recaptcha>div {
    transform-origin: left center;
}

/* CF7 response output (success / error messages) */
.extension-sub-page-contact-form-fileds-holder .wpcf7-response-output {
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0;
    border: none;
}

/* Success */
.extension-sub-page-contact-form-fileds-holder .wpcf7-mail-sent-ok {
    background: rgba(255, 216, 0, 0.1);
    color: #ffd800;
    border: 1px solid rgba(255, 216, 0, 0.25);
}

/* Error */
.extension-sub-page-contact-form-fileds-holder .wpcf7-mail-sent-ng,
.extension-sub-page-contact-form-fileds-holder .wpcf7-validation-errors,
.extension-sub-page-contact-form-fileds-holder .wpcf7-spam-blocked {
    background: rgba(255, 80, 80, 0.08);
    color: rgba(255, 130, 130, 0.9);
    border: 1px solid rgba(255, 80, 80, 0.2);
}

/* ══════════════════════════════════════════════════
   SUBMIT BUTTON
   CF7 renders a <button type="submit"> inside [submit]
   The layout wraps it alongside an icon <i> element
══════════════════════════════════════════════════ */
.extension-sub-page-contact-form-recaptcha-and-submit-holder {
    display: flex;
    align-items: center;
    gap: 16px;
}

.extension-sub-page-contact-form-recaptcha p {
    margin: 0;
}

.extension-sub-page-contact-form-submit-holder {
    position: relative;
    width: fit-content;
    height: fit-content;
    width: 100%;
}

.extension-sub-page-contact-form-submit-holder p {
    margin: 0;
    width: 100%;
}

.extension-sub-page-contact-form-submit-holder input[type="submit"] {
    background-color: #ffd800;
    width: 100%;
    border: 0;
    border-radius: 14px;
    color: #012f6b;
    font-size: 14px;
    line-height: 1.42;
    font-weight: 700;
    letter-spacing: 0px;
    text-transform: capitalize;
    text-align: left;
    box-shadow: 0 5px 7px -1px #0000001a, 0 2px 3px -3px #0000001a;
    transition: 0.3s;
    padding: 12px 44px 12px 24px;
}

.extension-sub-page-contact-form-submit-holder input[type="submit"]:hover {
    background-color: #ffd800;
    color: #012f6b;
    box-shadow: 0 10px 15px -3px #0000001a, 0 4px 5px -3px #0000001a;
    transform: scale(1.01) translate(0px, -2px);
}

.extension-sub-page-contact-form-submit-icon-holder {
    position: absolute;
    top: 30%;
    left: 150px;
    transform: translate(-50%, -50%);
    color: #012f6b;
    font-size: 14px;
    transition: 0.3s;
}

.extension-sub-page-contact-form-submit-holder:has(input[type="submit"]:hover) .extension-sub-page-contact-form-submit-icon-holder {
    transform: translate(-50%, calc(-50% - 2px)) scale(1.01);
}

.extension-sub-page-contact-form-submit-icon-holder p {
    margin: 0;
}

/* ══════════════════════════════════════════════════
   CF7 SPINNER  (loading indicator)
══════════════════════════════════════════════════ */

.wpcf7 .ajax-loader {
    display: none !important;
    /* hide default CF7 spinner */
}

/* Optional: simple pulse on the submit holder while sending */
.wpcf7-form.submitting .extension-sub-page-contact-form-submit-holder {
    opacity: 0.7;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — collapse text description indent
   on narrow screens
══════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .extension-sub-page-contact-form-details-holder {
        padding: 20px 20px 18px;
    }

    .extension-sub-page-contact-form-fileds-holder {
        padding: 18px 20px 20px;
    }

    .extension-sub-page-contact-form-text {
        padding-left: 0;
    }

    /* Stack label text more comfortably */
    .extension-sub-page-contact-form-name-holder label,
    .extension-sub-page-contact-form-email-holder label {
        gap: 6px;
    }
}


/******************************************************/

@media (max-width: 1200px) {

    /* Release the fixed 304px width and let it breathe */
    .extension-sub-page-contact-form-holder {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }

    /* The outer Elementor sticky container should stop being sticky */
    .extensions-sub-page-side-bar-sticky {
        position: relative !important;
        top: unset !important;
    }

    /* Recaptcha + submit: switch from column to row so they
       sit side by side on the wider available space          */
    .extension-sub-page-contact-form-recaptcha-and-submit-holder {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
    }

    .extension-sub-page-contact-form-recaptcha {
        flex: 0 0 auto;
    }

    .extension-sub-page-contact-form-submit-holder {
        flex: 1 1 160px;
        min-width: 160px;
    }

    /* Name + Email: switch to a two-column row */
    .extension-sub-page-contact-form-input-holder {
        flex-direction: row;
        gap: 14px;
    }

    .extension-sub-page-contact-form-name-holder,
    .extension-sub-page-contact-form-email-holder {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Submit icon: recalculate position now the button is wider */
    .extension-sub-page-contact-form-submit-icon-holder {
        /* left: unset;
        right: 18px;
        top: 50%;
        transform: translateY(-50%); */
    }

    .extension-sub-page-contact-form-submit-holder:has(input[type="submit"]:hover) .extension-sub-page-contact-form-submit-icon-holder {
        transform: translateY(calc(-50% - 2px)) scale(1.01);
    }

}

/* ══════════════════════════════════════════════════
   BELOW 768px
   Recaptcha + submit back to column — recaptcha is
   too wide to share a row on a phone.
══════════════════════════════════════════════════ */

@media (max-width: 768px) {

    .extension-sub-page-contact-form-header {
        justify-content: center;
    }

    .extension-sub-page-contact-form-text {
        text-align: center;
    }

    .extension-sub-page-contact-form-holder {
        max-width: 100%;
    }

    /* Name + Email back to a single column */
    .extension-sub-page-contact-form-input-holder {
        flex-direction: column;
        gap: 12px;
    }

    /* Recaptcha + submit back to stacked column */
    .extension-sub-page-contact-form-recaptcha-and-submit-holder {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .extension-sub-page-contact-form-submit-holder {
        width: fit-content;
        flex: unset;
    }

    /* Restore icon position for full-width button */
    .extension-sub-page-contact-form-submit-icon-holder {
        /* left: unset;
        right: 18px;
        top: 50%;
        transform: translateY(-50%); */
    }

}

/* ══════════════════════════════════════════════════
   BELOW 480px
   Tighten spacing for small phones.
══════════════════════════════════════════════════ */

@media (max-width: 480px) {

    /* Scale down reCAPTCHA widget (304px wide) to fit
       without horizontal scroll on small phones       */
    .extension-sub-page-contact-form-recaptcha .wpcf7-recaptcha {
        transform: scale(0.88);
        transform-origin: left center;
    }

    /* Compensate for the scale so it doesn't leave a gap below */
    .extension-sub-page-contact-form-recaptcha {
        height: 70px;
        overflow: hidden;
    }

    .extension-sub-page-contact-form-submit-holder input[type="submit"] {
        font-size: 13px;
        padding: 11px 44px 11px 18px;
    }

}


@media (max-width: 434px) {
    .extension-sub-page-contact-form-fileds-holder{
        padding:0 ;
    }
}