/* ============================================================
   EG-BANK – Payroll Solutions  |  Payroll.css
   All classes prefixed with `payroll-`
   RTL support via html[lang="ar"]
   ============================================================ */

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
    --payroll-teal: #00C4B3;
    --payroll-navy: #003B70;
    --payroll-navy-dark: #002a52;
    --payroll-navy-mid: #0d4f8a;
    --payroll-white: #ffffff;
    --payroll-off-white: #f7f8fa;
    --payroll-text-grey: #8D8D8D;
    --payroll-text-dark: #344054;
    --payroll-border: #e4e7ec;
    --payroll-badge-border: #d0d5dd;

    --payroll-radius-sm: 8px;
    --payroll-radius-md: 12px;
    --payroll-radius-lg: 20px;
    --payroll-radius-xl: 28px;
    --payroll-shadow-card: 0 2px 12px rgba(0,59,112,0.07);
    --payroll-shadow-hover: 0 8px 32px rgba(0,59,112,0.13);
    --payroll-transition: 0.28s cubic-bezier(0.4,0,0.2,1);
}

/* ── Base Reset ─────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--payroll-font);
    color: var(--payroll-text-dark);
    background: var(--payroll-white);
    -webkit-font-smoothing: antialiased;
}

/* RTL */
html[lang="ar"] body {
    direction: rtl;
    text-align: right;
}

html[lang="ar"] .payroll-breadcrumb {
    direction: rtl;
}

/* ── Layout Container ────────────────────────────────────────── */
.payroll-container {
    margin: 0 auto;
    /*padding: 0 30px;*/

    }
.EmployeeExperience {
    padding: 20px;
    background: #00C4B30D;
}
/* ── Scroll Reveal ───────────────────────────────────────────── */
/*.payroll-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s var(--payroll-transition), transform 0.55s var(--payroll-transition);
}*/

       /* .payroll-reveal.payroll-visible {
            opacity: 1;
            transform: translateY(0);
        }*/
    /* ── Badge Pill ──────────────────────────────────────────────── */
    .payroll-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 16px;
        background: var(--payroll-white);
        border: 1px solid var(--payroll-badge-border);
        border-radius: 999px;
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--payroll-text-dark);
        letter-spacing: 0.02em;
        margin-bottom: 20px;
    }

    .payroll-badge--light {
        background: rgba(255,255,255,0.10);
        border-color: rgba(255,255,255,0.25);
        color: rgba(255,255,255,0.90);
    }

.payroll-badge__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--payroll-teal);
    flex-shrink: 0;
    display: none !important;
}

    .payroll-badge__dot--white {
        background: rgba(255,255,255,0.85);
    }
    /* ── Section Typography ──────────────────────────────────────── */
    .payroll-section__title {
        font-size: clamp(1.6rem, 3vw, 2.2rem);
        font-weight: 800;
        color: var(--payroll-navy);
        line-height: 1.22;
        margin-bottom: 14px;
    }

.payroll-section__desc {
    font-weight: 400;
    font-size: 16px;
    color: #4A5565;
    line-height: 1.65;
    /*max-width: 560px;*/
}
    /* ── Buttons ─────────────────────────────────────────────────── */
    .payroll-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 13px 28px;
        border-radius: var(--payroll-radius-sm);
        font-family: var(--payroll-font);
        font-weight: 700;
        font-size: 0.92rem;
        cursor: pointer;
        text-decoration: none;
        border: 2px solid transparent;
        white-space: nowrap;
        transition: background var(--payroll-transition), color var(--payroll-transition), border-color var(--payroll-transition), box-shadow var(--payroll-transition);
    }

    .payroll-btn--primary {
        background: var(--payroll-teal);
        color: var(--payroll-white);
        border-color: var(--payroll-teal);
    }

        .payroll-btn--primary:hover {
            background: #00b0a0;
            border-color: #00b0a0;
            box-shadow: 0 6px 20px rgba(0,196,179,0.35);
        }

    .payroll-btn--outline {
        background: transparent;
        color: var(--payroll-teal);
        border-color: var(--payroll-teal);
    }

        .payroll-btn--outline:hover {
            background: var(--payroll-teal);
            color: var(--payroll-white);
        }

    .payroll-btn--lg {
        padding: 16px 36px;
        font-size: 1rem;
    }
    /* ════════════════════════════════════════════════════════════
   1. HERO BANNER
════════════════════════════════════════════════════════════ */
    .payroll-hero {
        position: relative;
        width: 100%;
        height: 100vh;
        max-height: 720px;
        min-height: 480px;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
    }

    .highlight-text {
        color: #00C4B3;
    }

    .payroll-hero__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

    .payroll-hero__overlay {
        position: absolute;
        inset: 0;
       /* background: linear-gradient( to top, rgba(0,42,82,0.92) 0%, rgba(0,59,112,0.65) 45%, rgba(0,42,82,0.25) 100% );*/
        z-index: 1;
    }

    .payroll-hero__content {
        position: relative;
        z-index: 2;
        margin: 0 auto;
        padding: 0px 0px 72px;
        width: 100%;
    }

    .payroll-breadcrumb {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 20px;
    }

    .payroll-breadcrumb__item {
        font-size: 0.82rem;
        font-weight: 500;
        color: rgba(255,255,255,0.65);
        letter-spacing: 0.02em;
    }

    .payroll-breadcrumb__item--active {
        color: var(--payroll-teal);
    }

    .payroll-breadcrumb__sep {
        color: rgba(255,255,255,0.40);
        font-size: 0.85rem;
    }

    .payroll-hero__title {
        max-width: 707px;
        font-size: 48px;
        font-weight: 400;
        color: var(--payroll-white);
        line-height: 1.4;
        letter-spacing: -0.02em;
        margin-bottom: 16px;
    }

    .Payroll-Badge {
        margin: 20px;
    }

    .payroll-hero__subtitle {
        font-size: 20px;
        font-weight: 400;
        color: var(--payroll-white);
        line-height: 1.5;
        max-width: 520px;
    }
    /* ════════════════════════════════════════════════════════════
   2. COMPREHENSIVE PAYROLL MANAGEMENT
════════════════════════════════════════════════════════════ */
    .payroll-features {
        background: var(--payroll-white);
        padding: 40px 0;
    }

    .payroll-features__header {
        text-align: center;
        margin-bottom: 56px;
    }

        .payroll-features__header .payroll-badge {
            margin: 0 auto 20px;
        }

        .payroll-features__header .payroll-section__title {
            text-align: center;
            margin: 0 auto 14px;
        }

        .payroll-features__header .payroll-section__desc {
            text-align: center;
            margin: 0 auto;
        }

.payroll-features__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

    html[lang="ar"] .payroll-features__grid {
        text-align: right;
    }

.payroll-feature-card {
    background: var(--payroll-white);
    border: 1px solid var(--payroll-border);
    border-radius: var(--payroll-radius-md);
    padding: 20px 20px 20px;
    transition: box-shadow var(--payroll-transition), transform var(--payroll-transition), border-color var(--payroll-transition);
    flex: 0 1 calc(33.333% - 14px); 
    box-sizing: border-box;
}

        .payroll-feature-card:hover {
            box-shadow: none;
            transform: none;
            border-color:none;
        }

    .payroll-feature-card__icon {
        width: 44px;
        height: 44px;
        margin-bottom: 18px;
        display: block;
    }

        .payroll-feature-card__icon img,
        .payroll-feature-card__icon svg {
            width: 44px;
            height: 44px;
            display: block;
        }

    .payroll-feature-card__title {
        font-size: 18px;
        font-weight: 400;
        color: var(--payroll-navy);
        margin-bottom: 8px;
        line-height: 1.4;
    }

    .payroll-feature-card__desc {
        font-size: 16px;
        font-weight: 300;
        color: var(--payroll-text-grey);
        line-height: 1.6;
    }
    /* ════════════════════════════════════════════════════════════
   3. ENHANCE EMPLOYEE EXPERIENCE
════════════════════════════════════════════════════════════ */
    .payroll-employee {
        /*background: var(--payroll-off-white);*/
       /* padding: 30px 0;*/
    }

    .payroll-employee__header {
        text-align: center;
        margin-bottom: 56px;
    }

        .payroll-employee__header .payroll-badge {
            margin: 0 auto 20px;
        }

        .payroll-employee__header .payroll-section__title {
            margin: 0 auto 14px;
        }

        .payroll-employee__header .payroll-section__desc {
            margin: 0 auto;
        }

    .payroll-employee__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    html[lang="ar"] .payroll-employee__grid {
        text-align: right;
    }

.payroll-employee-card {
    background: var(--payroll-white);
    border: 1px solid var(--payroll-border);
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--payroll-transition), transform var(--payroll-transition);
    border-radius: 14px;
    border-width: 1px;
    padding: 24px;
    gap: 12px;
    opacity: 1;
}

        .payroll-employee-card:hover {
            box-shadow: none;
            transform: none;
        }

    .payroll-employee-card__accent {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--payroll-teal);
    }

    .payroll-employee-card__icon {
        width: 40px;
        height: 40px;
        margin-bottom: 20px;
        margin-top: 8px;
    }

        .payroll-employee-card__icon img,
        .payroll-employee-card__icon svg {
            width: 40px;
            height: 40px;
            display: block;
        }

    .payroll-employee-card__title {
        font-size: 16px;
        font-weight: 400;
        color: var(--payroll-navy);
        margin-bottom: 10px;
        line-height: 1.35;
    }

.payroll-employee-card__desc {
    font-weight: 300;
    font-size: 16px;
    color: #4A5565;
    line-height: 1.65;
}
    /* ════════════════════════════════════════════════════════════
   4. SEAMLESS BANK MIGRATION
════════════════════════════════════════════════════════════ */
    .payroll-migration {
       /* background: var(--payroll-off-white);*/
        padding: 30px 0;
    }

    .GreenText {
        color: #8BDC64 !important;
    }
    /* ── Panel ── */
    .payroll-migration__panel {
        background: #003B70;
        border-radius: 16px;
        padding: 80px 40px;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }

       /* .payroll-migration__panel::before {
            content: '';
            position: absolute;
            top: -80px;
            right: -80px;
            width: 320px;
            height: 320px;
            border-radius: 50%;
            background: rgba(255,255,255,0.04);
            pointer-events: none;
        }*/

      /*  .payroll-migration__panel::after {
            content: '';
            position: absolute;
            bottom: -60px;
            left: 60px;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(0,196,179,0.06);
            pointer-events: none;
        }*/
    /* ── Header ── */
    .payroll-migration__header {
        max-width: 839px;
        width: 100%;
        text-align: center;
        margin-bottom: 0;
    }

.payroll-migration__title {
    color: var(--payroll-white);
    margin-bottom: 30px;
    font-family: Co Headline;
    font-weight: 400;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: 0%;
    text-align: center;
}

    .payroll-migration__desc {
        font-size: 16px;
        font-weight: 400;
        color: var(--payroll-white);
        line-height: 28px;
        text-align: center;
    }

        .payroll-migration__desc strong {
            color: var(--payroll-white);
            font-weight: 700;
        }
    /* ── Cards ── */
    .payroll-migration__cards {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 24px;
        width: 100%;
        max-width: 898px;
        margin-bottom: 0;
    }

    .payroll-migration-card {
        flex: 1;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.20);
        border-radius: 14px;
        padding: 16px 24px;
        gap: 16px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        transition: background var(--payroll-transition);
    }

        .payroll-migration-card:hover {
            background: rgba(255,255,255,0.15);
        }
    /* Icon container */
    .payroll-migration-card__icon {
        width: 48px;
        height: 48px;
        background: #8BDC64;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-bottom: 0;
    }

        .payroll-migration-card__icon img,
        .payroll-migration-card__icon svg {
            width: 50px;
            height: 50px;
            display: block;
        }

    .payroll-migration-card__title {
        font-size: 18px;
        font-weight: 400;
        color: #00C4B3;
        line-height: 27px;
        text-transform: capitalize;
        margin-bottom: 0;
    }

    .payroll-migration-card__desc {
        font-size: 16px;
        font-weight: 400;
        color: var(--payroll-white);
        line-height: 24px;
    }
    /* ── Required Documents ── */
    .payroll-migration__documents {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
        max-width: 898px;
    }

    .payroll-migration__documents-title {
        font-size: 20px;
        font-weight: 700;
        color: #8BDC64;
        line-height: 100%;
    }

    .payroll-migration__documents-list {
        list-style: disc;
        margin: 0;
        padding-inline-start: 20px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

        .payroll-migration__documents-list li {
            font-size: 16px;
            font-weight: 400;
            color: var(--payroll-white);
            line-height: 24px;
        }

    /* ── Contact ── */
    .payroll-migration__contact {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
        max-width: 898px;
        padding-top: 0;
        border-top: none;
    }

    .payroll-migration__contact-label {
        font-size: 16px;
        line-height: 100%;
        color: var(--payroll-white);
        font-weight: 400;
    }

    .payroll-migration__contact-link {
        font-size: 20px;
        font-weight: 400;
        color: #8BDC64;
        text-decoration: underline;
        text-decoration-color: #8BDC64;
        line-height: 100%;
        transition: opacity var(--payroll-transition);
    }

        .payroll-migration__contact-link:hover {
            opacity: 0.80;
        }
    /* ════════════════════════════════════════════════════════════
   5. TESTIMONIAL CAROUSEL
════════════════════════════════════════════════════════════ */
    .payroll-testimonials {
        background: var(--payroll-white);
        padding: 30px 0;
    }
        /* ── Badge ── */
        .payroll-testimonials .payroll-badge {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 10px 16px;
            background: rgba(0, 59, 112, 0.08); /* changed: was white */
            border: none; /* changed: was 1px solid badge-border */
            border-radius: 300px;
            margin: 0 auto 32px;
            width: fit-content;
        }

        .payroll-testimonials .payroll-badge__dot {
            width: 5px;
            height: 5px;
            background: #003B70; /* changed: was teal */
            border-radius: 200px;
        }

        .payroll-testimonials .payroll-badge span,
        .payroll-testimonials .payroll-badge {
            font-size: 20px; /* changed: was 0.78rem */
            font-weight: 400;
            color: #003B70; /* changed: was text-dark */
            line-height: 36px;
        }
    /* ── Carousel track ── */
    .payroll-carousel {
        position: relative;
        overflow: hidden;
        cursor: grab;
        user-select: none;
    }

        .payroll-carousel:active {
            cursor: grabbing;
        }

    .payroll-carousel__track {
        display: flex;
        gap: 24px;
        transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
        will-change: transform;
    }
    /* ── Testimonial card ── */
    .payroll-testimonial-card {

        flex: 0 0 983px;
        max-width: 983px;
        /* flex-row: body left, avatar right, vertically centered */
        display: flex;
        flex-direction: row-reverse;
        align-items: center; /* center avatar vertically with content */
        justify-content: space-between;
        gap: 23px;
        padding: 48px;
        background: linear-gradient(135deg, #003B70 0%, #00C4B3 100%);
        border: none;
        border-radius: 24px;
        opacity: 1;
        transform: none;
        transition: box-shadow var(--payroll-transition);
    }

        .payroll-testimonial-card:hover {
            box-shadow: 0 8px 40px rgba(0,196,179,0.20);
        }

    html[lang="ar"] .payroll-testimonial-card {
        flex-direction: row-reverse;
        text-align: right;
    }
    /* Side cards only dim — no scale. Payroll.js centers the active card by
       its real (unscaled) width, so a scale transform on the side cards
       shrinks them toward their own centre and pulls their near edge back
       out of the visible area, silently cancelling the peek regardless of
       how narrow the active card's flex-basis is. */
    .payroll-testimonial-card {
        opacity: 0.55;
    }

    .payroll-testimonial-card.payroll-testimonial-card--active {
        opacity: 1;
        border-color: transparent;
        box-shadow: 0 8px 40px rgba(0,196,179,0.20);
    }
    /* ── Left: text column ── */
    .payroll-testimonial-card__body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        flex: 1; /* takes remaining width after avatar */
        min-width: 0;
    }
    /* Stars */
    .payroll-testimonial-card__stars {
        font-size: 30px;
        font-weight: 400;
        color: #8BDC64;
        line-height: 36px;
        letter-spacing: normal;
        margin-bottom: 0;
    }
    /* Quote */
.payroll-testimonial-card__quote {
    /* font-size: 24px;*/
    font-size: 16px;
    font-weight: 400;
    color: var(--payroll-white);
    line-height: 32px;
    margin-bottom: 0;
    font-style: normal;
    quotes: none;
    width: 100%;
    overflow-wrap: break-word;
}

        .payroll-testimonial-card__quote::before,
        .payroll-testimonial-card__quote::after {
            content: none;
        }
    /* Author info — stacked under quote */
    .payroll-testimonial-card__author {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        align-self: stretch;
    }

    .payroll-testimonial-card__info {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .payroll-testimonial-card__name {
        font-size: 16px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.8);
        line-height: 24px;
    }

    .payroll-testimonial-card__role {
        font-size: 14px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.8);
        line-height: 20px;
    }
    /* ── Right: avatar ── */
    .payroll-testimonial-card__avatar {
        box-sizing: border-box;
        width: 128px;
        height: 128px;
        border-radius: 91px;
        border: 4px solid rgba(255, 255, 255, 0.2);
        overflow: hidden;
        flex-shrink: 0;
        flex-grow: 0;
        order: 1;
    }

        .payroll-testimonial-card__avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border-radius: 91px; /* match container radius */
        }
    /* ── Left: body column ── */
    .payroll-testimonial-card__body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        gap: 16px;
        flex: none;
        order: 0;
        flex-grow: 1;
        min-width: 0;
    }
    /* Author container */
    .payroll-testimonial-card__author {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        gap: 0;
        align-self: stretch;
        flex: none;
        order: 2;
        flex-grow: 0;
    }
    /* ── Dots ── */
    .payroll-carousel__dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 36px;
    }

.payroll-carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--payroll-border);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background var(--payroll-transition), width var(--payroll-transition);
    display: none !important;
}

    .payroll-carousel__dot--active {
        background: var(--payroll-teal);
        width: 24px;
        border-radius: 4px;
    }

/* ── Desktop: vertical centering ── */
@media (min-width: 1024px) {
    .payroll-carousel__track {
        align-items: center;
    }

    .payroll-testimonial-card {
        overflow: hidden;
        transition: box-shadow var(--payroll-transition);
    }
}

    /* ════════════════════════════════════════════════════════════
   6. FAQ ACCORDION
════════════════════════════════════════════════════════════ */
.payroll-faq {
    background: #003B701A;
    padding: 30px 0;
}

    .payroll-faq__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
       /* max-width: 860px;*/
        margin: 0 auto;
       /* padding: 0 32px;*/
    }

    .payroll-faq__header {
        width: 100%;
        text-align: center;
       
    }

        .payroll-faq__header .payroll-badge {
            margin: 0 auto 20px;
        }

        .payroll-faq__header .payroll-section__title {
            text-align: center;
            margin: 0 auto 12px;
        }

        .payroll-faq__header .payroll-section__desc {
            text-align: center;
           /* margin: 0 auto;*/
            /*max-width: 500px;*/
        }

    .payroll-accordion {
        padding:0px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        background: transparent;
        border: none;
        border-radius: 0;
        overflow: visible;
    }

    .payroll-accordion__item {
        background: var(--payroll-white);
        border: 1px solid var(--payroll-border);
        border-radius: var(--payroll-radius-md);
        overflow: hidden;
        transition: border-color var(--payroll-transition), box-shadow var(--payroll-transition);
    }
.payroll-link {
    color: #003B70;
    /*text-decoration: underline;*/
    font-family: Co Headline;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0%;
    text-align: center;
}
/* .payroll-accordion__item:hover {
            border-color: rgba(0,196,179,0.35);
            box-shadow: 0 2px 16px rgba(0,59,112,0.07);
        }*/
.payroll-accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--payroll-font);
    font-size: 16px;
    font-weight: 400;
    color: #003B70;
    text-align: left;
    transition: background var(--payroll-transition);
}

    html[lang="ar"] .payroll-accordion__trigger {
        flex-direction: row-reverse;
        text-align: right;
    }

   /* .payroll-accordion__trigger:hover {
        background: rgba(0,196,179,0.03);
    }*/

    .payroll-accordion__trigger[aria-expanded="true"] {
        color: var(--payroll-navy);
    }

.payroll-accordion__chevron {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #717182;
    transition: transform var(--payroll-transition);
}

    .payroll-accordion__trigger[aria-expanded="true"] .payroll-accordion__chevron {
        transform: rotate(180deg);
    }

    .payroll-accordion__body {
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1);
    }

        .payroll-accordion__body.payroll-accordion__body--open {
            max-height: 600px;
        }

.payroll-accordion__content {
    font-weight: 300;
    padding: 16px 24px 22px;
    font-size: 16px;
    color: #444444;
    line-height: 1.72;
    border-top: 1px solid var(--payroll-border);
}

    html[lang="ar"] .payroll-accordion__content {
        text-align: right;
    }

.payroll-faq__footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: 24px;
    text-align: center;
}

.payroll-faq__footer-text {
    font-size: 16px;
    color: #5F6674;
    margin-bottom: 0px;
}
    /* ════════════════════════════════════════════════════════════
   7. CTA BANNER
════════════════════════════════════════════════════════════ */
    .payroll-cta {
        position: relative;
        overflow: hidden;
        border-radius: 0;
        /* layout — section IS the panel */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 25px;
        padding: 109px 199px 108px 198px;
        min-height: 366px;
        text-align: center;
        margin:40px;
    }
    /* Background image + overlay — scoped to the section */
    .payroll-cta__bg {
        position: absolute;
        inset: 0;
        z-index: 0;
    }

    .payroll-cta__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.payroll-cta__overlay {
    position: absolute;
    inset: 0;
    /* background: rgba(0, 59, 112, 0.70);*/
    background-color: #003B70B2;
    z-index: 1;
}
    /* Content wrapper */
    .payroll-cta__content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
        max-width: 804px;
        width: 100%;
        margin: 0 auto;
        padding: 0; /* changed: was 80px 20px */
        text-align: center;
        color: var(--payroll-white);
    }
    /* Title */
    .payroll-cta__title {
        font-size: 48px; /* changed: was clamp fluid */
        font-weight: 400; /* changed: was 800 */
        color: var(--payroll-white);
        line-height: 60px; /* changed */
        letter-spacing: normal; /* changed: was -0.02em */
        margin-bottom: 0; /* gap handled by content flex gap */
        max-width: 754px;
    }
    /* Description */
    .payroll-cta__desc {
        font-size: 24px; /* changed: was 1.02rem */
        font-weight: 300; /* changed: was unset */
        color: var(--payroll-white); /* changed: was rgba(255,255,255,0.72) */
        line-height: 32px; /* changed: was 1.65 */
        max-width: 804px;
    }
    /* Leftover utility classes kept in case used elsewhere */
    .payroll-cta__actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
        flex-wrap: wrap;
    }

    .payroll-cta__rating {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .payroll-cta__rating-stars {
        font-size: 1rem;
        letter-spacing: 1px;
    }

    .payroll-cta__rating-info {
        display: flex;
        flex-direction: column;
        text-align: left;
    }

    html[lang="ar"] .payroll-cta__rating-info {
        text-align: right;
    }

    .payroll-cta__rating-score {
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--payroll-white);
        line-height: 1;
    }

    .payroll-cta__rating-label {
        font-size: 0.72rem;
        color: rgba(255,255,255,0.55);
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
    /* ════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
════════════════════════════════════════════════════════════ */
    /* 1024px */
    @media (max-width: 1024px) {
        .payroll-features__grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .payroll-testimonial-card {
            flex: 0 0 80%;
        }

       /* .payroll-faq__inner {
            padding: 0 24px;
        }*/
    }
    /* 768px */
    @media (max-width: 768px) {
        .payroll-features__grid{
            display:grid;
        }
        .payroll-hero__content {
            /*padding: 0 24px 48px;*/
        }
        .payroll-employee-card__title{
            text-align:center;
        }
        .payroll-migration-card {
            text-align: center;
           
            align-items: center !important;
        }
        .payroll-migration__contact-label {
            line-height: 1.6 !important;
         
        }
        .payroll-migration__contact-link {
            font-size: 16px;
            font-weight: 400;
        }
        .payroll-cta{
            margin:20px 0px;
        }
        .payroll-employee-card__desc{
            text-align:center;
        }
        .payroll-features,
        .payroll-employee,
        .payroll-testimonials,
        .payroll-faq {
            padding: 30px 0;
        }

            .payroll-migration {
                padding: 30px 0;
            }

            .payroll-migration__panel {
                padding: 48px 24px;
                border-radius: var(--payroll-radius-lg);
            }

            .payroll-migration__cards {
                flex-direction: column;
            }

            .payroll-migration__title {
                font-size: 24px;
                line-height: 150%;
            }

            .payroll-migration__desc {
                font-size: 16px;
            }

            .payroll-employee__grid {
                grid-template-columns: 1fr;
            }

           /* .payroll-container {
                padding: 0 15px;
            }*/

            .payroll-cta {
                padding: 72px 60px;
            }

            .payroll-cta__title {
                font-size: 36px;
                line-height: 44px;
            }

            .payroll-cta__desc {
                font-size: 18px;
                line-height: 26px;
            }

           /* .payroll-faq__inner {
                padding: 0 20px;
            }*/
        }
    /* 640px */
    @media (max-width: 640px) {
        .payroll-features__grid {
            grid-template-columns: 1fr;
        }

        .payroll-employee__grid {
            grid-template-columns: 1fr;
            gap:16px;
        }

        .payroll-testimonial-card {
            gap: 10px;
            /* Same 80% as the 1024px breakpoint above, so the previous/next
               cards keep peeking in from both sides here too instead of the
               active card filling the viewport. The card also needs to be
               narrower than container-width minus the 24px flex gap, or the
               "peek" is just empty space rather than any of the neighbor's
               own card showing through — Payroll.js already centers
               whichever card is active based on its measured width, so this
               is the only piece needed. */
            flex: 0 0 80%;
            max-width: 80%;
            padding: 24px;
            flex-direction: column;
        }
        .payroll-testimonial-card__role {
            margin-bottom: 20px;
        }
        .payroll-testimonial-card__avatar {
            width: 80px;
            height: 80px;
            order: 0;
            align-self: flex-start;
        }

        .payroll-testimonial-card__quote {
            font-size: 16px;
            line-height: 24px;
        }

        .payroll-testimonial-card__stars {
            margin-top: 20px;
            letter-spacing: 7px;
            font-size: 20px;
        }
        .payroll-testimonial-card__author{
            flex-direction:column-reverse;
        }
        .payroll-cta {
            padding: 60px 32px;
        }

        .payroll-cta__title {
            font-weight: 400;
            line-height: 2 !important;
            font-size: 32px;
            line-height: 36px;
        }
      
        .payroll-cta__desc {
            font-size: 16px;
            line-height: 2;
        }

        .payroll-cta__actions {
            flex-direction: column;
            gap: 16px;
        }

        .payroll-cta__rating {
            justify-content: center;
        }

        .payroll-cta__rating-info {
            text-align: center;
        }

       /* .payroll-faq__inner {
            padding: 0 16px;
        }*/

        .payroll-accordion__trigger {
            text-align:left;
            font-size: 0.88rem;
            padding: 18px 18px;
        }

        .payroll-accordion__content {
            padding: 14px 18px 18px;
        }
    }
    /* 400px */
    @media (max-width: 400px) {
        .payroll-hero__title {
            font-size: 1.9rem;
        }

        .payroll-hero__subtitle {
            font-size: 0.92rem;
        }

        .payroll-migration__panel {
            padding: 32px 16px;
        }

        .payroll-migration__title {
            font-size: 24px;
            line-height: 30px;
        }
    }


/* ════════════════════════════════════════════════════════════
   8. PAYROLL INQUIRY FORM
════════════════════════════════════════════════════════════ */
.payroll-inquiry {
    background-color: #003B70;
    background-image: url("/assets/NewFolder/CorporateFormBg.svg"), linear-gradient(180deg, #003B70 0%, #005A9C 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: left bottom, center;
    background-size: 100% auto, cover;
    padding: 56px 24px 48px;
    border-radius: var(--payroll-radius-lg) var(--payroll-radius-lg) 0 0;
    overflow: hidden;
}

.payroll-inquiry__inner {
    max-width: 900px;
    margin-inline: auto;
}

.payroll-inquiry__title {
    text-align: center;
    font-size: 28px;
    font-weight: 500;
    color: var(--payroll-white);
    margin: 0 0 12px;
    line-height: 1.35;
}

.payroll-inquiry__subtitle {
    text-align: center;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 32px;
    line-height: 1.6;
    max-width: 620px;
    margin-inline: auto;
    margin-bottom: 32px;
}

.payroll-inquiry__alert {
    max-width: 900px;
    margin: 0 auto 20px;
    padding: 12px 16px;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
}

.payroll-inquiry__alert--success {
    background: rgba(29, 184, 142, 0.15);
    color: #5cb82e;
}

.payroll-inquiry__alert--error {
    background: rgba(255, 107, 107, 0.15);
    color: #ff6b6b;
}



/* ── Grid rows ─────────────────────────────────────────────── */
.payroll-inquiry__form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.payroll-inquiry__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.payroll-inquiry__row--full {
    grid-template-columns: 1fr;
}

/* ── Field wrapper ─────────────────────────────────────────── */
.payroll-inquiry__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Text inputs ───────────────────────────────────────────── */
    .payroll-inquiry__field input:not([type="radio"]) {
        width: 100%;
        padding: 13px 16px;
        border-radius: 8px;
        border: 0;
        background: #f1f4f8;
        color: #44566f;
        font-family: 'Co Headline';
        font-weight: 300;
        font-size: 16px;
        line-height: 150%;
        letter-spacing: 0%;
        outline: none;
        transition: background .2s;
        box-shadow: none;
    }
.sme-form input::placeholder{
    color:
}
.payroll-inquiry__field input:not([type="radio"]):focus {
    background: var(--payroll-white);
}
.payroll-inquiry__field input:not([type="radio"])::placeholder {
    color: #44566f;
}
.payroll-inquiry__field input::placeholder {
    color: #8fa3b8;
}

.payroll-inquiry__field .text-danger {
    font-size: 12px;
    color: #ff8080;
    text-align: start;
}

/* ── EGP suffix wrapper ────────────────────────────────────── */
.payroll-inquiry__input-egp {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    gap: 12px;
    height: 50px;
    background: #FFFFFF;
    border: 1px solid #CDCDCD;
    border-radius: 8px;
}

.payroll-inquiry__egp-badge {
    color: #9DA4B0;
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
}

.payroll-inquiry__input-egp input {
    flex: 1;
    height: 100%;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* ── Radio row ─────────────────────────────────────────────── */
.payroll-inquiry__field--radio {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 10px 0;
}

.payroll-inquiry__radio-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--payroll-white);
    white-space: nowrap;
}

.payroll-inquiry__radio-group {
    display: flex;
    align-items: center;
    gap: 24px;
}

.payroll-inquiry__radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--payroll-white);
    font-size: 14px;
    cursor: pointer;
}

.payroll-inquiry__radio input[type="radio"] {
    accent-color: var(--payroll-teal);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ── Actions ───────────────────────────────────────────────── */
.payroll-inquiry__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.payroll-inquiry__note {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .payroll-inquiry {
        padding: 40px 16px 36px;
    }

    .payroll-inquiry__title {
        font-size: 22px;
    }

    .payroll-inquiry__row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .payroll-inquiry__field--radio {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .payroll-inquiry__submit {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 400px) {
    .payroll-inquiry__egp-badge {
        /*padding: 0 10px;*/
        font-size: 11px;
    }
}