@charset "UTF-8";
/* =========================================================
   Shams Kids Nursery — Modern, Playful Redesign Overlay
   Designed to coexist with the original styleAr.css.
   Loaded AFTER the base stylesheet to override key visuals.
   ========================================================= */

/* ---------- 1. Color & token overrides ---------- */
:root {
    --theme-color: #FF6B9D;
    --theme-color2: #FFB347;
    --theme-color3: #4ECDC4;
    --theme-color4: #95E1D3;
    --theme-color5: #C589E8;
    --theme-color6: #FFD93D;
    --title-color: #2C3E50;
    --body-color: #5A6677;
    --smoke-color: #FFF8F3;
    --smoke-color2: #F4F8FB;
    --th-border-color: #FCE4EC;
    --grad-primary: linear-gradient(135deg, #FF6B9D 0%, #FFB347 100%);
    --grad-secondary: linear-gradient(135deg, #4ECDC4 0%, #95E1D3 100%);
    --grad-warm: linear-gradient(135deg, #FFD93D 0%, #FFB347 100%);
    --grad-cool: linear-gradient(135deg, #C589E8 0%, #4ECDC4 100%);
    --grad-soft: linear-gradient(135deg, #FFF8F3 0%, #F4F8FB 100%);
    --shadow-sm: 0 2px 8px rgba(255, 107, 157, .08);
    --shadow-md: 0 8px 24px rgba(44, 62, 80, .08);
    --shadow-lg: 0 16px 48px rgba(255, 107, 157, .14);
    --shadow-soft: 0 10px 30px rgba(78, 205, 196, .15);
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;
    --title-font: "Baloo 2", "Tajawal", "Cairo", sans-serif;
    --body-font: "Baloo 2", "Tajawal", "Cairo", sans-serif;
}

/* ---------- 2. Body / typography ---------- */
body {
    font-family: var(--body-font) !important;
    background: radial-gradient(at 12% 8%, rgba(255, 217, 61, .10) 0, transparent 38%), radial-gradient(at 88% 0%, rgba(78, 205, 196, .08) 0, transparent 42%), radial-gradient(at 100% 90%, rgba(197, 137, 232, .08) 0, transparent 42%), #FFFEFC !important;
    color: var(--body-color);
    line-height: 1.75;
}

h1, h2, h3, h4, h5, h6,
.box-title, .sec-title, .breadcumb-title {
    font-family: var(--title-font) !important;
    color: var(--title-color);
    font-weight: 800;
    letter-spacing: -.01em;
}

.sec-title {
    font-size: clamp(28px, 3vw, 44px) !important;
    line-height: 1.25 !important;
}

.sub-title,
.sub-title.style1,
.sub-title.sub-title2 {
    font-family: var(--title-font) !important;
    font-weight: 700;
    color: var(--theme-color) !important;
    letter-spacing: .02em;
    position: relative;
    padding-inline-start: 0 !important;
}

    .sub-title::before {
        content: '✦';
        margin-inline-end: 8px;
        color: var(--theme-color3);
    }

p, .sec-text, .feature-item_text {
    font-family: var(--body-font);
    color: var(--body-color);
    line-height: 1.85;
}

/* ---------- 3. Buttons ---------- */
.th-btn,
.th-btn:link,
.th-btn:visited,
button.th-btn,
a.th-btn,
.btn-primary,
input[type="submit"].btn,
.btn.btn-primary {
    background: var(--grad-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    padding: 14px 32px !important;
    font-family: var(--title-font) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: .02em !important;
    box-shadow: 0 8px 22px rgba(255, 107, 157, .35) !important;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
    position: relative;
    overflow: hidden;
}

    .th-btn:hover,
    .th-btn:focus,
    button.th-btn:hover,
    a.th-btn:hover,
    .btn-primary:hover,
    .btn.btn-primary:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 14px 32px rgba(255, 107, 157, .45) !important;
        color: #fff !important;
        filter: brightness(1.04);
    }

    .th-btn::before,
    .th-btn::after {
        display: none !important;
    }

.btn.btn-info,
button.btn-info {
    background: var(--grad-secondary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
    box-shadow: 0 6px 18px rgba(78, 205, 196, .3) !important;
}

.btn.btn-success {
    background: linear-gradient(135deg, #7DBE48 0%, #95E1D3 100%) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    color: #fff !important;
    padding: 10px 22px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 16px rgba(125, 190, 72, .3) !important;
}

.btn.btn-danger {
    background: linear-gradient(135deg, #FF6B9D 0%, #ED4C67 100%) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    color: #fff !important;
    padding: 10px 22px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 16px rgba(237, 76, 103, .3) !important;
}

.btn.btn-warning {
    background: var(--grad-warm) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    color: #4a3a00 !important;
    padding: 10px 22px !important;
    font-weight: 700 !important;
}

.btn-secondary,
.btn.btn-secondary {
    background: #ECEFF4 !important;
    color: var(--title-color) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 700 !important;
}

.icon-btn {
    background: var(--grad-primary) !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: transform .25s ease;
}

    .icon-btn:hover {
        transform: rotate(-12deg) scale(1.05);
        color: #fff;
    }

/* ═════════════════════════════════════════════════════════
   4. Header / navbar
   ⚠ كل تعديلات الـ menu / navbar محصورة بـ min-width: 992px
   على الموبايل: ما نلمس شي — الثيم الأصلي يشتغل كما هو
   ═════════════════════════════════════════════════════════ */

.th-header.header-layout1 {
    background: transparent;
}

.th-header .header-top {
    background: var(--grad-primary) !important;
    color: #fff;
    font-size: 13px;
}

    .th-header .header-top a,
    .th-header .header-top span,
    .th-header .header-top li,
    .th-header .header-top i {
        color: #fff !important;
    }

    .th-header .header-top .social-links a {
        background: rgba(255, 255, 255, .2);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 3px;
        transition: transform .25s ease, background .25s ease;
    }

        .th-header .header-top .social-links a:hover {
            background: #fff;
            color: var(--theme-color) !important;
            transform: translateY(-3px) rotate(-8deg);
        }

.sticky-wrapper,
.th-header .sticky-wrapper {
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 4px 24px rgba(44, 62, 80, .07);
}

.header-logo img {
    width: auto;
    border-radius: 14px;
    transition: transform .3s ease;
}

    .header-logo img:hover {
        transform: rotate(-3deg) scale(1.04);
    }

/* ─── 4.A: تعديلات الديسكتوب فقط (lg فما فوق) ─── */
@media (min-width: 992px) {

    .menu-area {
        padding: 8px 0 !important;
    }

    .header-logo img {
        max-height: 60px;
    }

    .main-menu > ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
    }

        .main-menu > ul > li {
            margin: 0 1px !important;
        }

    .main-menu ul li > a {
        font-family: var(--title-font) !important;
        font-weight: 600 !important;
        color: var(--title-color) !important;
        font-size: 13px !important;
        padding: 6px 8px !important;
        border-radius: var(--radius-pill);
        letter-spacing: 0 !important;
        line-height: 1.2;
        transition: all .25s ease;
        position: relative;
        white-space: nowrap;
    }

        .main-menu ul li > a:hover,
        .main-menu ul li.active > a {
            background: rgba(255, 107, 157, .1);
            color: var(--theme-color) !important;
        }

        .main-menu ul li > a::before {
            display: none !important;
        }

    .header-button .th-btn {
        padding: 9px 18px !important;
        font-size: 13px !important;
    }
}

/* ─── 4.B: تصغير إضافي للشاشات المتوسطة (lg فقط) ─── */
@media (min-width: 992px) and (max-width: 1399px) {
    .main-menu > ul > li {
        margin: 0 !important;
    }

    .main-menu ul li > a {
        font-size: 11.5px !important;
        padding: 6px 5px !important;
    }

    .header-logo img {
        max-height: 50px;
    }

    .header-button .th-btn {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }
}

/* ─── 4.C: الشاشات الكبيرة جداً (xxl) ─── */
@media (min-width: 1400px) {
    .main-menu > ul > li {
        margin: 0 3px !important;
    }

    .main-menu ul li > a {
        font-size: 13.5px !important;
        padding: 8px 10px !important;
    }
}

/* ─── 4.D: قائمة الموبايل — ألوان وخطوط فقط، بدون layout ─── */
.th-menu-wrapper .th-menu-area {
    background: linear-gradient(160deg, #FFF8F3 0%, #F4F8FB 100%);
}

.th-mobile-menu ul li a {
    font-family: var(--title-font) !important;
    font-weight: 700 !important;
    color: var(--title-color) !important;
    transition: color .25s ease;
}

    .th-mobile-menu ul li a:hover {
        color: var(--theme-color) !important;
    }

/* ---------- 5. Hero section ---------- */
.th-hero-wrapper.hero-1 {
    border-radius: 0 0 56px 56px;
    overflow: hidden;
    position: relative;
}

.th-hero-bg {
    filter: saturate(105%);
}

.th-hero-wrapper.hero-1::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 248, 243, 0) 0%, rgba(255, 248, 243, .55) 100%);
    z-index: 1;
    pointer-events: none;
}

.th-hero-wrapper.hero-1 .container {
    position: relative;
    z-index: 2;
}

.th-hero-wrapper.hero-1 .sub-title.sub-title2 {
    display: inline-block;
    background: rgba(255, 255, 255, .92) !important;
    border: 2px solid rgba(255, 107, 157, .2);
    padding: 22px 40px !important;
    border-radius: 32px;
    font-size: clamp(18px, 2vw, 26px) !important;
    font-weight: 800 !important;
    color: var(--title-color) !important;
    box-shadow: 0 18px 50px rgba(44, 62, 80, .12);
    margin-top: 60px;
    text-align: center;
    line-height: 1.5;
}

    .th-hero-wrapper.hero-1 .sub-title.sub-title2::before {
        content: '';
    }

/* ---------- 6. Feature cards ---------- */
.feature-item {
    border-radius: var(--radius-xl) !important;
    padding: 32px 26px !important;
    background: #fff !important;
    border: 1px solid rgba(255, 107, 157, .08);
    box-shadow: 0 12px 36px rgba(44, 62, 80, .07);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
    position: relative;
    overflow: hidden;
}

    .feature-item:hover {
        transform: translateY(-10px) rotate(-.4deg);
        box-shadow: 0 22px 50px rgba(255, 107, 157, .18);
    }

    .feature-item .feature-shape {
        display: none !important;
    }

    .feature-item .feature-item_icon {
        width: 80px;
        height: 80px;
        border-radius: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--grad-soft);
        margin-bottom: 18px;
        transition: transform .35s ease;
    }

    .feature-item:hover .feature-item_icon {
        transform: rotate(-8deg) scale(1.06);
    }

    .feature-item .box-title {
        font-size: 22px !important;
        margin-bottom: 10px;
    }

    .feature-item[data-bg-color="#FEEDEA"] .feature-item_icon {
        background: linear-gradient(135deg, #FFE3EC 0%, #FFD1DC 100%);
    }

    .feature-item[data-bg-color="#F1F9EA"] .feature-item_icon {
        background: linear-gradient(135deg, #E5F7DA 0%, #D6F1C2 100%);
    }

    .feature-item[data-bg-color="#FFF6E8"] .feature-item_icon {
        background: linear-gradient(135deg, #FFEFD0 0%, #FFE0A1 100%);
    }

    .feature-item[data-bg-color="#E3F5F9"] .feature-item_icon {
        background: linear-gradient(135deg, #DCF3F9 0%, #BFE9F2 100%);
    }

/* ---------- 7. Program / classroom cards ---------- */
.program-area {
    background: radial-gradient(at 10% 10%, rgba(255, 217, 61, .08) 0, transparent 38%), radial-gradient(at 90% 30%, rgba(78, 205, 196, .08) 0, transparent 38%), var(--smoke-color) !important;
    border-radius: 56px;
    margin: 30px 12px;
}

.program-feature {
    background: #fff;
    border-radius: var(--radius-xl) !important;
    padding: 24px 22px;
    box-shadow: 0 12px 36px rgba(44, 62, 80, .08);
    transition: transform .3s ease, box-shadow .3s ease;
    border: 1px solid rgba(255, 107, 157, .06);
}

    .program-feature:hover {
        transform: translateY(-8px) rotate(.3deg);
        box-shadow: 0 22px 50px rgba(255, 107, 157, .18);
    }

    .program-feature .box-title {
        font-size: 24px !important;
        margin-top: 14px;
    }

.program-feature_year {
    display: inline-block;
    background: var(--grad-secondary);
    color: #fff !important;
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 10px;
}

/* ---------- 8. About area ---------- */
.about-item {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 14px 18px !important;
    box-shadow: 0 6px 18px rgba(44, 62, 80, .06);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform .25s ease;
}

    .about-item:hover {
        transform: translateX(-6px);
    }

.about-item_icon {
    background: var(--grad-primary);
    color: #fff !important;
    width: 42px;
    height: 42px;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .about-item_icon i {
        color: #fff !important;
    }

.checklist.style1 ul li {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 12px 16px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 4px 14px rgba(44, 62, 80, .05);
    border-inline-start: 4px solid var(--theme-color);
    list-style: none;
    font-size: 15px;
    line-height: 1.7;
}

    .checklist.style1 ul li:nth-child(2n) {
        border-color: var(--theme-color3);
    }

    .checklist.style1 ul li:nth-child(3n) {
        border-color: var(--theme-color2);
    }

    .checklist.style1 ul li:nth-child(4n) {
        border-color: var(--theme-color5);
    }

    .checklist.style1 ul li:nth-child(5n) {
        border-color: var(--theme-color6);
    }

/* ---------- 9. Counter / CTA strip ---------- */
.counter-area {
    background: var(--grad-primary);
    border-radius: var(--radius-xl);
    margin: 40px 12px;
    padding: 40px 20px !important;
    position: relative;
    overflow: hidden;
}

    .counter-area::before {
        content: '🌈';
        position: absolute;
        font-size: 200px;
        opacity: .07;
        top: -40px;
        left: -10px;
        pointer-events: none;
    }

    .counter-area::after {
        content: '🎈';
        position: absolute;
        font-size: 160px;
        opacity: .07;
        bottom: -40px;
        right: -10px;
        pointer-events: none;
    }

    .counter-area .counter-shape {
        display: none !important;
    }

    .counter-area p {
        color: #fff !important;
        font-weight: 600;
        line-height: 1.9;
    }

/* ---------- 10. Gallery ---------- */
.gallery-card .box-img {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    display: block;
    position: relative;
    box-shadow: 0 10px 28px rgba(44, 62, 80, .12);
    transition: transform .35s ease, box-shadow .35s ease;
}

    .gallery-card .box-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s ease;
    }

.gallery-card:hover .box-img {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(255, 107, 157, .25);
}

    .gallery-card:hover .box-img img {
        transform: scale(1.06);
    }

/* ---------- 11. Testimonials ---------- */
.testi-card {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 30px !important;
    box-shadow: 0 14px 40px rgba(44, 62, 80, .08);
    border: 1px solid rgba(255, 107, 157, .08);
}

.testi-card_text {
    color: var(--title-color) !important;
    font-family: var(--title-font) !important;
}

/* ---------- 12. Forms ---------- */
.form-control,
input.form-control,
textarea.form-control,
select.form-control {
    border: 2px solid #EEF1F5 !important;
    border-radius: var(--radius-md) !important;
    padding: 14px 18px !important;
    font-family: var(--body-font) !important;
    font-size: 15px !important;
    background: #fff !important;
    transition: all .25s ease !important;
    box-shadow: none !important;
    height: auto !important;
    color: var(--title-color) !important;
}

    .form-control:focus {
        border-color: var(--theme-color) !important;
        box-shadow: 0 0 0 4px rgba(255, 107, 157, .12) !important;
        outline: none !important;
    }

    .form-control::placeholder {
        color: #B2BAC4;
    }

.form-group {
    position: relative;
    margin-bottom: 18px;
}

    .form-group label {
        display: block;
        font-family: var(--title-font);
        font-weight: 700;
        color: var(--title-color);
        margin-bottom: 8px;
        font-size: 14px;
    }

.contact-form {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 38px 34px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255, 107, 157, .06);
}

    .contact-form .form-group i {
        position: absolute;
        inset-inline-end: 18px;
        top: 17px;
        color: #B2BAC4;
        pointer-events: none;
        font-size: 16px;
    }

    .contact-form .form-group .form-control {
        padding-inline-end: 44px !important;
    }

/* ---------- 13. Contact info cards ---------- */
.contact-info {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 26px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 10px 28px rgba(44, 62, 80, .07);
    border: 1px solid rgba(255, 107, 157, .07);
    transition: transform .3s ease, box-shadow .3s ease;
    height: 100%;
}

    .contact-info:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 38px rgba(255, 107, 157, .15);
    }

    .contact-info .contact-info_icon {
        width: 64px;
        height: 64px;
        border-radius: 20px;
        background: var(--grad-soft);
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        padding: 14px;
    }

.contact-info_label {
    font-family: var(--title-font);
    font-weight: 700;
    color: var(--theme-color);
    margin-bottom: 4px !important;
    font-size: 14px;
}

.contact-info_link {
    font-family: var(--title-font);
    font-weight: 700;
    color: var(--title-color) !important;
    font-size: 16px;
}

.contact-info_wrapp:nth-child(1) .contact-info_icon {
    background: linear-gradient(135deg, #FFE3EC 0%, #FFD1DC 100%);
}

.contact-info_wrapp:nth-child(2) .contact-info_icon {
    background: linear-gradient(135deg, #E0F7F4 0%, #B6EAE3 100%);
}

.contact-info_wrapp:nth-child(3) .contact-info_icon {
    background: linear-gradient(135deg, #FFEFD0 0%, #FFE0A1 100%);
}

.contact-info_wrapp:nth-child(4) .contact-info_icon {
    background: linear-gradient(135deg, #F0E1FA 0%, #DEC4F0 100%);
}

/* ---------- 14. Breadcrumb header ---------- */
.breadcumb-wrapper {
    position: relative;
    border-radius: 0 0 56px 56px;
    overflow: hidden;
    padding: 100px 0 80px !important;
    background-color: #FFF8F3;
    background-blend-mode: lighten;
}

    .breadcumb-wrapper::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 107, 157, .35) 0%, rgba(78, 205, 196, .25) 100%);
        z-index: 1;
    }

    .breadcumb-wrapper .container {
        position: relative;
        z-index: 2;
    }

    .breadcumb-wrapper .breadcumb-content {
        text-align: center;
        visibility: visible !important;
    }

    .breadcumb-wrapper .breadcumb-title {
        color: #fff;
        font-size: clamp(28px, 4vw, 50px);
        font-weight: 800;
        text-shadow: 0 4px 20px rgba(0, 0, 0, .25);
        margin-bottom: 8px;
    }

    .breadcumb-wrapper .breadcumb-menu {
        display: inline-flex;
        gap: 10px;
        background: rgba(255, 255, 255, .25);
        backdrop-filter: blur(8px);
        border-radius: var(--radius-pill);
        padding: 8px 20px;
        list-style: none;
    }

        .breadcumb-wrapper .breadcumb-menu li,
        .breadcumb-wrapper .breadcumb-menu li a {
            color: #fff !important;
            font-family: var(--title-font);
            font-weight: 700;
        }

            .breadcumb-wrapper .breadcumb-menu li:not(:last-child)::after {
                content: '/';
                margin-inline-start: 10px;
                color: rgba(255, 255, 255, .7);
            }

/* ---------- 15. Footer ---------- */
.footer-wrapper.footer-layout1 {
    background: linear-gradient(160deg, #2C3E50 0%, #1F2A36 100%) !important;
    border-radius: 56px 56px 0 0;
    margin-top: 40px;
    padding-top: 70px;
    position: relative;
    overflow: hidden;
}

.footer-wrapper .widget_title,
.footer-wrapper h3 {
    color: #FFD93D !important;
    font-weight: 800 !important;
    margin-bottom: 22px !important;
    position: relative;
    padding-bottom: 14px;
}

    .footer-wrapper .widget_title::after {
        content: '';
        position: absolute;
        bottom: 0;
        inset-inline-start: 0;
        width: 50px;
        height: 3px;
        border-radius: 3px;
        background: var(--grad-primary);
    }

.footer-wrapper .about-text,
.footer-wrapper .footer-info,
.footer-wrapper .footer-info a,
.footer-wrapper .recent-post {
    color: #cfd8e3 !important;
}

    .footer-wrapper .footer-info i {
        color: var(--theme-color) !important;
        margin-inline-end: 8px;
    }

.footer-wrapper .about-logo img {
    background: #fff !important;
    border-radius: 16px;
    padding: 8px;
}

.footer-wrapper .recent-post.style2 {
    background: rgba(255, 255, 255, .05);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    border-inline-start: 3px solid var(--theme-color3);
    font-size: 15px;
}

.footer-wrapper .copyright-wrap {
    background: rgba(0, 0, 0, .25);
    margin-top: 40px;
    padding: 18px 0 !important;
    border-radius: 0 !important;
}

.footer-wrapper .copyright-text {
    color: #cfd8e3 !important;
}

    .footer-wrapper .copyright-text a {
        color: var(--theme-color) !important;
        font-weight: 700;
    }

/* ---------- 16. Newsletter strip ---------- */
.newsletter-sec {
    position: relative;
}

.newsletter-widget {
    background: var(--grad-primary);
    border-radius: var(--radius-xl);
    padding: 40px 30px !important;
    text-align: center;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

    .newsletter-widget::before {
        content: '⭐';
        position: absolute;
        font-size: 140px;
        opacity: .12;
        left: -20px;
        top: -30px;
    }

    .newsletter-widget::after {
        content: '🌟';
        position: absolute;
        font-size: 120px;
        opacity: .12;
        right: -20px;
        bottom: -30px;
    }

    .newsletter-widget h4,
    .newsletter-widget h5 {
        color: #fff !important;
        position: relative;
        z-index: 2;
        font-weight: 800;
    }

    .newsletter-widget h5 {
        font-size: 16px !important;
        font-weight: 600 !important;
        margin-top: 12px;
        opacity: .95;
    }

/* ---------- 17. Tables ---------- */
.table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(44, 62, 80, .07);
    background: #fff;
}

    .table thead th,
    .table thead tr th {
        background: var(--grad-primary) !important;
        color: #fff !important;
        font-family: var(--title-font);
        font-weight: 800 !important;
        border: none !important;
        padding: 14px 12px !important;
        text-align: center;
    }

    .table tbody td {
        padding: 12px !important;
        border-color: #F0F4F8 !important;
        vertical-align: middle !important;
        font-size: 14px;
    }

    .table tbody tr:nth-child(odd) {
        background: #FFFCFA;
    }

    .table tbody tr:nth-child(even) {
        background: #fff;
    }

    .table tbody tr:hover {
        background: #FFF0F5;
    }

table[id*="gvMaster"],
.table-rep-plugin table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    box-shadow: 0 8px 22px rgba(44, 62, 80, .07);
    background: #fff;
}

    table[id*="gvMaster"] th,
    .table-rep-plugin table th {
        background: var(--grad-primary) !important;
        color: #fff !important;
        border: none !important;
        padding: 14px 10px !important;
    }

    table[id*="gvMaster"] td,
    .table-rep-plugin table td {
        padding: 10px !important;
    }

    table[id*="gvMaster"] tr:nth-child(odd) td {
        background: #FFFCFA;
    }

    table[id*="gvMaster"] tr:nth-child(even) td {
        background: #fff;
    }

    table[id*="gvMaster"] tr:hover td {
        background: #FFF0F5 !important;
    }

a.fas.fa-edit,
a.fas.fa-trash,
a.fas.fa-eye,
.btn-icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    color: #fff !important;
    font-size: 14px;
}

a.fas.fa-edit {
    background: var(--grad-secondary);
}

a.fas.fa-trash {
    background: linear-gradient(135deg, #FF6B9D, #ED4C67);
}

a.fas.fa-eye {
    background: var(--grad-warm);
    color: #4a3a00 !important;
}

/* ---------- 18. Cards / boxes ---------- */
.card {
    border: none !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: 0 10px 28px rgba(44, 62, 80, .08) !important;
    background: #fff;
}

.box {
    border-radius: var(--radius-lg) !important;
    background: #fff;
    border: 1px solid rgba(255, 107, 157, .08);
}

[style*="box-shadow:0 0px 3px #30419b"],
[style*="box-shadow: 0 0px 3px #30419b"] {
    box-shadow: 0 10px 28px rgba(44, 62, 80, .08) !important;
    border-radius: var(--radius-xl) !important;
    background: #fff;
    border: 1px solid rgba(255, 107, 157, .08);
}

.card-body {
    padding: 22px !important;
}

.header-title,
h4.header-title,
h4.mt-0.header-title {
    font-family: var(--title-font);
    font-weight: 800;
    color: var(--title-color);
    font-size: 22px;
    margin-bottom: 18px !important;
    position: relative;
    padding-bottom: 12px;
}

    .header-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        inset-inline-start: 0;
        width: 60px;
        height: 4px;
        border-radius: 4px;
        background: var(--grad-primary);
    }

/* ---------- 19. Pagination ---------- */
.paginationClass td {
    background: #fff !important;
}

    .paginationClass td a,
    .paginationClass td span {
        display: inline-block;
        padding: 6px 12px;
        margin: 0 3px;
        border-radius: var(--radius-pill);
        font-weight: 700;
        text-decoration: none;
        background: #FFF0F5;
        color: var(--title-color) !important;
        min-width: 32px;
        text-align: center;
    }

    .paginationClass td span {
        background: var(--grad-primary) !important;
        color: #fff !important;
    }

/* ---------- 20. Validation ---------- */
.field-validation-error,
[id*="ValidationSummary"] li,
.validator {
    color: #ED4C67 !important;
    font-weight: 700;
    font-size: 13px;
}

/* ---------- 21. Scroll-to-top ---------- */
.scroll-top {
    background: var(--grad-primary) !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    box-shadow: 0 12px 28px rgba(255, 107, 157, .4);
}

    .scroll-top::after {
        color: #fff !important;
    }

/* ---------- 22. Title area ---------- */
.title-area .sub-title {
    display: inline-block;
    background: rgba(255, 107, 157, .1);
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    margin-bottom: 12px;
}

/* ---------- 23. img-box ---------- */
.img-box1 .img1,
.img-box2 .img1,
.img-box3 .img1 {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(44, 62, 80, .12);
}

/* ---------- 24. LinkButton in gridviews ---------- */
a.fas[id*="lnk"],
a.fas[class*="fa-edit"],
a.fas[class*="fa-trash"],
a.fas[class*="fa-eye"],
a.fas[class*="fa-cog"] {
    text-decoration: none !important;
    margin: 0 3px;
    transition: transform .25s ease;
}

a.fas:hover {
    transform: scale(1.08) rotate(-5deg);
}

/* ---------- 25. Misc ---------- */
.sec-btn .th-btn.th-style {
    background: var(--grad-secondary) !important;
    box-shadow: 0 8px 22px rgba(78, 205, 196, .35) !important;
}

.team-card,
.team-img-wrap {
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.shape-mockup {
    opacity: .55;
    transition: opacity .3s ease;
}

.slider-arrow {
    background: #fff !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    box-shadow: 0 8px 22px rgba(44, 62, 80, .12) !important;
    border: none !important;
    color: var(--theme-color) !important;
    transition: transform .25s ease, background .25s ease;
}

    .slider-arrow:hover {
        background: var(--grad-primary) !important;
        color: #fff !important;
        transform: translateY(-3px) scale(1.05);
    }

/* ---------- 26. Helper utilities ---------- */
.sk-page {
    padding: 40px 0 60px;
}

.sk-card {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 32px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255, 107, 157, .06);
}

.sk-page-title {
    font-family: var(--title-font);
    font-weight: 800;
    color: var(--title-color);
    font-size: clamp(24px, 3vw, 36px);
    margin-bottom: 8px;
    text-align: center;
}

.sk-page-subtitle {
    color: var(--theme-color);
    font-weight: 700;
    text-align: center;
    margin-bottom: 28px;
    font-size: 16px;
}

    .sk-page-subtitle::before {
        content: '✦  ';
    }

    .sk-page-subtitle::after {
        content: '  ✦';
    }

.sk-login-card {
    max-width: 460px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 44px 36px;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 107, 157, .08);
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .sk-login-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 6px;
        background: var(--grad-primary);
    }

.sk-login-emoji {
    font-size: 64px;
    display: inline-block;
    background: var(--grad-soft);
    width: 110px;
    height: 110px;
    border-radius: 50%;
    line-height: 110px;
    margin-bottom: 18px;
    box-shadow: 0 12px 30px rgba(255, 107, 157, .2);
}

@media (max-width: 992px) {
    .program-area, .counter-area {
        border-radius: 32px;
        margin: 20px 6px;
    }

    .breadcumb-wrapper {
        border-radius: 0 0 32px 32px;
        padding: 80px 0 60px !important;
    }

    .footer-wrapper.footer-layout1 {
        border-radius: 32px 32px 0 0;
    }

    .th-hero-wrapper.hero-1 {
        border-radius: 0 0 32px 32px;
    }

    .contact-form {
        padding: 26px 20px;
    }
}

@media (max-width: 576px) {
    .th-btn {
        padding: 12px 22px !important;
        font-size: 14px !important;
    }

    .feature-item {
        padding: 24px 20px !important;
    }

    .sk-login-card {
        padding: 32px 22px;
    }
}

/* ---------- 27. Motion ---------- */
@keyframes skFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.feature-item_icon,
.contact-info_icon {
    animation: skFloat 4.5s ease-in-out infinite;
}

.feature-item:nth-child(2n) .feature-item_icon {
    animation-delay: -1.2s;
}

.feature-item:nth-child(3n) .feature-item_icon {
    animation-delay: -2.4s;
}

.feature-item:nth-child(4n) .feature-item_icon {
    animation-delay: -3.2s;
}

@media (prefers-reduced-motion: reduce) {
    .feature-item_icon, .contact-info_icon {
        animation: none;
    }

    *, *::before, *::after {
        transition: none !important;
    }
}

/* ---------- 28. Accessibility focus ---------- */
:focus-visible {
    outline: 3px solid rgba(255, 107, 157, .55);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---------- 29. Hero ---------- */
.th-hero-wrapper.hero-1 .container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding-top: 80px;
}

/* ---------- 30. Form labels ---------- */
.form-label {
    font-family: var(--title-font);
    font-weight: 700;
    color: var(--title-color);
    margin-bottom: 6px;
    font-size: 14px;
}

/* ---------- 31. Repeater rows ---------- */
.summary-row td {
    font-weight: 600;
    font-family: var(--title-font);
}

.active-row td {
    background: rgba(255, 107, 157, .08) !important;
    border-color: var(--theme-color) !important;
}

.toggle-details {
    font-size: 13px !important;
    padding: 8px 16px !important;
}

/* ---------- 32. WhatsApp ---------- */
img[src*="whatsapp"] {
    border-radius: 8px;
    transition: transform .25s ease;
}

    img[src*="whatsapp"]:hover {
        transform: scale(1.15);
    }

/* ---------- 33. Footer table ---------- */
.table-bordered {
    border: none !important;
}

    .table-bordered th,
    .table-bordered td {
        border: 1px solid #F0F4F8 !important;
    }

/* ---------- 34. Admin form rows ---------- */
.p-20 {
    padding: 8px 0 !important;
}

.nice-select,
.nice-select.form-control {
    border-radius: var(--radius-md) !important;
    border: 2px solid #EEF1F5 !important;
    height: 50px !important;
    line-height: 46px !important;
    font-family: var(--body-font) !important;
    padding-right: 18px !important;
    padding-left: 30px !important;
}

select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF6B9D'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 22px;
    padding-inline-start: 40px !important;
}

/* ---------- 35. UpdatePanel ---------- */
.upMsg, [id*="UpMsg"] {
    margin: 8px 0;
}

/* ---------- 36. Spacing helpers ---------- */
.space, .space-top, .space-bottom {
    position: relative;
}

.space-bottom {
    padding-bottom: 60px;
}

.space-top {
    padding-top: 60px;
}

.space {
    padding: 60px 0;
}

/* ---------- 37. Card spacing ---------- */
.card.m-b-30 {
    margin-bottom: 24px !important;
}

/* ---------- 38. HR ---------- */
hr {
    border: 0;
    border-top: 2px dashed rgba(255, 107, 157, .25);
    margin: 28px 0;
}

/* ---------- 39. btnNew ---------- */
button[id*="btnNew"] {
    background: var(--grad-secondary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    padding: 14px 28px !important;
    font-family: var(--title-font) !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 22px rgba(78, 205, 196, .35) !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
}

    button[id*="btnNew"]:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 14px 32px rgba(78, 205, 196, .45) !important;
    }

/* ---------- 40. Date input ---------- */
input[type="date"] {
    cursor: pointer;
}

/* ═════════════════════════════════════════════════════════
   41. إصلاح قوي وصريح لقائمة الموبايل
   هذا override بأقصى أولوية لضمان ظهور زر الـ Burger
   على كل الشاشات الأقل من 992px
   ═════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

    /* إخفاء القائمة الرئيسية (الديسكتوب) على الموبايل */
    .main-menu {
        display: none !important;
    }

    /* إظهار header-button بشكل flex مع التأكد إنه ظاهر */
    .header-button {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }

        /* إجبار زر الـ Burger على الظهور بكل الطرق الممكنة */
        .header-button .th-menu-toggle,
        button.th-menu-toggle.d-block,
        button.th-menu-toggle[class*="d-block"],
        .th-header .th-menu-toggle {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            visibility: visible !important;
            opacity: 1 !important;
            position: relative !important;
            z-index: 100 !important;
            width: 48px !important;
            height: 48px !important;
            min-width: 48px !important;
            min-height: 48px !important;
            padding: 0 !important;
            margin: 0 0 0 8px !important;
            background: var(--grad-primary) !important;
            color: #fff !important;
            border: 2px solid #fff !important;
            border-radius: 50% !important;
            box-shadow: 0 4px 14px rgba(255, 107, 157, .4) !important;
            font-size: 18px !important;
            cursor: pointer !important;
            overflow: visible !important;
        }

    /* الأيقونة جوة الزر */
    .th-menu-toggle i,
    .th-menu-toggle .far,
    .th-menu-toggle .fal,
    .th-menu-toggle .fa-bars,
    .th-menu-toggle .fa-times {
        color: #fff !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 18px !important;
        line-height: 1 !important;
    }

    /* تصغير زر "سجل طفلك الآن" على الموبايل ليفسح للبرغر */
    .header-button .th-btn {
        padding: 8px 14px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }
}

/* ضمان ظهور القائمة الجانبية المنبثقة لما تنفتح */
.th-menu-wrapper {
    z-index: 99999 !important;
}

    .th-menu-wrapper.th-body-visible,
    body.th-body-visible .th-menu-wrapper {
        visibility: visible !important;
        opacity: 1 !important;
    }