.wpcf7 input[type="submit"] {
    background-color: #315EFB !important;
    font-family: "Comfortaa", Sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-transform: capitalize !important;
    color: #FFFFFF !important;
    border: 1px solid #315EFB !important;
    border-radius: 12px !important;
    padding: 8px 20px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    display: inline-block !important;
    line-height: 1.5 !important;
}

.wpcf7 input[type="submit"]:hover {
    background-color: transparent !important;
    color: #315EFB !important;
    border-color: #315EFB !important;
    text-decoration: none !important;
}

.mfn-footer a:not(.button, .icon_bar, .mfn-btn, .mfn-option-btn) {
    color: #315EFB !important;
}

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

    .content_wrapper .section_wrapper,
    .container,
    .four.columns .widget-area {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

span.wpcf7-form-control-wrap .wpcf7-date,
span.wpcf7-form-control-wrap .wpcf7-quiz,
span.wpcf7-form-control-wrap .wpcf7-number,
span.wpcf7-form-control-wrap .wpcf7-select,
span.wpcf7-form-control-wrap .wpcf7-text,
span.wpcf7-form-control-wrap .wpcf7-textarea {
    padding: 15px 20px !important;
    border-radius: 12px;
    color: #fff;
    background: #d2e9ff59;
}

span.wpcf7-form-control-wrap .wpcf7-date::placeholder,
span.wpcf7-form-control-wrap .wpcf7-quiz::placeholder,
span.wpcf7-form-control-wrap .wpcf7-number::placeholder,
span.wpcf7-form-control-wrap .wpcf7-select::placeholder,
span.wpcf7-form-control-wrap .wpcf7-text::placeholder,
span.wpcf7-form-control-wrap .wpcf7-textarea::placeholder {
    color: #022644;
}

/* Header Sticky on Scroll */
#masthead {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#masthead .blur-header {
    backdrop-filter: blur(10px);
}

footer {
    backdrop-filter: blur(10px) !important;
}

.portal-jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.portal-job-card {
    background: #fff;
    border-radius: 14px;
    padding: 25px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transition: all .3s ease;
}

.portal-job-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.portal-job-card h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.job-location {
    color: #777;
    margin-bottom: 18px;
    font-size: 14px;
}

.job-apply-btn {
    display: inline-block;
    background: #1e73ff;
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
}

.job-apply-btn:hover {
    background: #0f5fe0;
}

/* ============================================
   MOBILE MENU STYLES - Portal Talents (Fixed)
   ============================================ */

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

    /* ── Main nav dropdown container ── */
    .hfe-nav-menu__layout-horizontal .hfe-nav-menu__submenu-arrow,
    nav.hfe-nav-menu.hfe-nav-menu__layout-horizontal,
    .hfe-nav-menu.hfe-nav-menu__layout-horizontal,
    div.hfe-nav-menu__layout-horizontal>ul.hfe-nav-menu,
    ul.hfe-nav-menu {
        background: rgba(10, 12, 28, 0.97) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
    }

    /* ── The actual dropdown nav (open state) ── */
    .hfe-nav-menu__layout-horizontal.hfe-nav-menu__breakpoint-tablet,
    .hfe-nav-menu__layout-horizontal.hfe-nav-menu__breakpoint-tablet>ul,
    .elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal>ul,
    .elementor-widget-navigation-menu ul.hfe-nav-menu {
        background: rgba(10, 12, 28, 0.97) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 2px solid #315EFB !important;
        border-radius: 0 0 18px 18px !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
        padding: 10px 0 20px !important;
        overflow: hidden !important;
    }

    /* ── Every <li> item ── */
    .elementor-widget-navigation-menu ul.hfe-nav-menu>li,
    ul.hfe-nav-menu>li.menu-item {
        border-bottom: 1px solid rgba(49, 94, 251, 0.12) !important;
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .elementor-widget-navigation-menu ul.hfe-nav-menu>li:last-child {
        border-bottom: none !important;
    }

    /* ── Menu links ── */
    .elementor-widget-navigation-menu ul.hfe-nav-menu li a.hfe-menu-item,
    ul.hfe-nav-menu li>a.hfe-menu-item,
    .hfe-nav-menu li a {
        color: #dde1f0 !important;
        font-family: "Comfortaa", sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        padding: 14px 28px !important;
        display: flex !important;
        align-items: center !important;
        text-decoration: none !important;
        letter-spacing: 0.3px !important;
        transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease !important;
        background: transparent !important;
        position: relative !important;
        border: none !important;
    }

    /* ── Hover state ── */
    .elementor-widget-navigation-menu ul.hfe-nav-menu li a.hfe-menu-item:hover,
    ul.hfe-nav-menu li>a.hfe-menu-item:hover {
        color: #315EFB !important;
        background: rgba(49, 94, 251, 0.08) !important;
        padding-left: 36px !important;
    }

    /* ── Active / current page ── */
    .elementor-widget-navigation-menu ul.hfe-nav-menu li.current-menu-item>a,
    .elementor-widget-navigation-menu ul.hfe-nav-menu li.current-menu-ancestor>a,
    ul.hfe-nav-menu li.current-menu-item>a.hfe-menu-item {
        color: #315EFB !important;
        background: rgba(49, 94, 251, 0.12) !important;
        padding-left: 36px !important;
        font-weight: 700 !important;
        border-left: 3px solid #315EFB !important;
    }

    /* ── Hamburger toggle button ── */
    .hfe-nav-menu__toggle {
        background: transparent !important;
        border: none !important;
        outline: none !important;
        padding: 6px !important;
    }

    /* ── Hamburger icon color ── */
    .hfe-nav-menu__toggle .hfe-nav-menu-icon svg,
    .hfe-nav-menu-icon svg path,
    .hfe-nav-menu-icon svg {
        fill: #fff !important;
        color: #fff !important;
        width: 28px !important;
        height: 28px !important;
    }

    /* ── "Why Choose Us" style fix: text color on highlighted item ── */
    .elementor-widget-navigation-menu ul.hfe-nav-menu li.current-menu-item>a span,
    .elementor-widget-navigation-menu ul.hfe-nav-menu li a.hfe-menu-item span {
        color: inherit !important;
    }

    /* ── Slide-in animation ── */
    .hfe-nav-menu__layout-horizontal>ul.hfe-nav-menu {
        animation: ptMenuIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both !important;
    }

    @keyframes ptMenuIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ── Sub-menus ── */
    .hfe-nav-menu .sub-menu,
    ul.hfe-nav-menu li .sub-menu {
        background: rgba(5, 7, 20, 0.98) !important;
        border-left: 2px solid rgba(49, 94, 251, 0.35) !important;
        margin-left: 16px !important;
        padding: 4px 0 !important;
        border-radius: 0 0 10px 10px !important;
    }

    .hfe-nav-menu .sub-menu li a,
    ul.hfe-nav-menu li .sub-menu li a {
        font-size: 13px !important;
        padding: 10px 24px !important;
        color: #a0a6c0 !important;
    }

    .hfe-nav-menu .sub-menu li a:hover {
        color: #315EFB !important;
        background: rgba(49, 94, 251, 0.07) !important;
    }
}

/* ============================================
   TABLET (768px–1024px) — subtle tweaks only
   ============================================ */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

    .hfe-nav-menu li a.hfe-menu-item {
        font-size: 13px !important;
        padding: 10px 12px !important;
    }
}

.td-page .td-card .td-form-group input {
    border-radius: 12px;
    background-color: #D2E9FF !important;
    color: #000 !important;
}

.td-page .td-card .td-form-group input::placeholder {
    color: rgba(0, 0, 0, 0.8);
}

select:focus {
    background-color: #D2E9FF !important;
}

/* Fix FOUC on nav menu */
.hfe-nav-menu li a.hfe-menu-item,
ul.hfe-nav-menu li>a {
    color: #fff !important;
    /* أو اللون اللي عايزه من الأول */
    background: transparent !important;
    transition: all 0.3s ease;
}

.hfe-nav-menu li a.hfe-menu-item:hover,
ul.hfe-nav-menu li>a:hover {
    color: #0068FF !important;
}

// contact 
.contact-star-section {
    position: relative;
    border-top: 1px solid transparent;
}

.contact-star-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(45, 45, 45, 0.25) 10%,
            rgba(45, 45, 45, 0.25) 90%,
            transparent 100%);
    filter: blur(0.5px);
}


/* ---------------------------- new input  */

/* ============================================================
   PORTAL TALENTS — UNIFIED INPUT STYLES
   Applies to: Register, Login, Forgot Password, Reset Password,
               Talent Dashboard, Company Dashboard
   ============================================================ */

/* ── Base: كل الـ input classes ── */
.ptr-input,
.ptl-input,
.pfp-input,
.prp-input,
.td-input,
.td-select,
.td-textarea,
.cdinp,
.cdsel,
.cdtxt {
    background-color: #D2E9FF !important;
    color: #022644 !important;
    border: 1.5px solid transparent !important;
    border-radius: 12px !important;
    font-family: "Comfortaa", sans-serif !important;
    font-size: 14px !important;
    transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* ── Placeholder ── */
.ptr-input::placeholder,
.ptl-input::placeholder,
.pfp-input::placeholder,
.prp-input::placeholder,
.td-input::placeholder,
.td-textarea::placeholder,
.cdinp::placeholder,
.cdtxt::placeholder {
    color: rgba(2, 38, 68, 0.45) !important;
    font-family: "Comfortaa", sans-serif !important;
}

/* ── Focus ── */
.ptr-input:focus,
.ptl-input:focus,
.pfp-input:focus,
.prp-input:focus,
.td-input:focus,
.td-select:focus,
.td-textarea:focus,
.cdinp:focus,
.cdsel:focus,
.cdtxt:focus {
    background-color: #c0dcf8 !important;
    border-color: #315EFB !important;
    box-shadow: 0 0 0 4px rgba(49, 94, 251, 0.12) !important;
    outline: none !important;
}

/* ── Select arrow ── */
.ptr-input.ptr-select,
.td-select,
.cdsel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23315EFB' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px !important;
    padding-right: 40px !important;
    cursor: pointer !important;
}

/* Fix: select focus background مش يتغير للأبيض */
.ptr-input.ptr-select:focus,
.td-select:focus,
.cdsel:focus {
    background-color: #c0dcf8 !important;
}

/* ── Textarea ── */
.td-textarea,
.cdtxt {
    resize: vertical !important;
    min-height: 90px !important;
}

/* ── Disabled input ── */
.td-input:disabled,
.cdinp:disabled,
.ptl-input:disabled,
.ptr-input:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    background-color: #D2E9FF !important;
}

/* ── Error state ── */
.td-input.error,
.cdinp.error,
.ptr-input.error,
.ptl-input.error {
    border-color: #ef4444 !important;
    background-color: #fff0f0 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10) !important;
}

/* ── Autofill fix (Chrome) ── */
.ptr-input:-webkit-autofill,
.ptl-input:-webkit-autofill,
.pfp-input:-webkit-autofill,
.prp-input:-webkit-autofill,
.td-input:-webkit-autofill,
.cdinp:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #D2E9FF inset !important;
    -webkit-text-fill-color: #022644 !important;
    caret-color: #022644 !important;
}

.td-btn:hover {
    color: #fff !important;
}

.td-sidebar__logo-text:hover {
    color: #315EFB;
}