/* ==========================================================================
   Childhood Stories — main stylesheet
   مبني على تصميم فيجما 1600×6200
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* الخط — التصميم مبني على Ubuntu */
    --font-main: 'Ubuntu', sans-serif;

    --teal: #70BEBE;
    --teal-dark: #4E9E9E;
    --purple: #A5629A;
    --yellow: #F0CC10;
    --yellow-hi: #FFCD01;
    --yellow-soft: #FDD440;
    --cream: #FBF7F3;
    --grey: #747474;
    --black: #000000;
    --white: #ffffff;

    --card-teal: #D6E7E4;
    --card-yellow: #F7E9BC;

    --r-sm: 10px;
    --r-md: 15px;
    --r-pill: 500px;

    --header-h: 122px;
    --wave-h: 29px;

    --ease: cubic-bezier(.25, .8, .25, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    /* لا اسكرول جانبي مهما حصل */
    max-width: 100%;
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: var(--font-main);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: var(--black);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

body.nav-locked {
    overflow: hidden;
}

.wrap {
    overflow-x: clip;
}

img {
    max-width: 100%;
    height: auto;
}

/* بوتستراب بيحط underline على a:hover — بنلغيه في كل الحالات */
a,
a:link,
a:visited,
a:hover,
a:focus,
a:active {
    color: inherit;
    text-decoration: none;
}

a {
    transition: color .3s var(--ease);
}

a:hover,
a:focus {
    color: var(--teal);
}

p {
    margin: 0 0 1rem;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 700;
    line-height: 1.3;
}

ul.list-unstyled {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* الكونتينر متساب لبوتستراب بمقاسه الطبيعي — مفيش override هنا. */

/* --------------------------------------------------------------------------
   3. عناصر مشتركة
   -------------------------------------------------------------------------- */

/* زرار «سجل الان» — مقاس التصميم الثابت 145×56 في الموقع كله */
.main-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 8px;
    width: 145px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--yellow);
    color: var(--black);
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}

/* السهم مايل ٤٥ درجة زي التصميم — بيشاور لبرّه ناحية اتجاه القراءة.
   المقاس 17px هو مقاس الأيقونة الحقيقي (23.6 في الفيجما = 17×√2 بسبب الدوران). */
.main-btn img {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    transform: rotate(-45deg);
    transition: transform .3s var(--ease);
}

html[dir="ltr"] .main-btn img {
    transform: rotate(45deg);
}

.main-btn:hover {
    background: var(--yellow-hi);
    color: var(--black);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(240, 204, 16, .45);
}

/* الحركة على الهوفر: رفع لفوق مباشرة (translateY قبل rotate عشان الإزاحة
   تبقى في مساحة الشاشة مش متدوّرة) — فبتبقى نفس الحركة في العربي والإنجليزي. */
.main-btn:hover img {
    transform: translateY(-3px) rotate(-45deg);
}


/* عنوان السكشن */
.section-head {
    text-align: center;
    margin-bottom: 36px;
}

.section-title {
    font-size: 45px;
    font-weight: 700;
    line-height: 66px;
    color: var(--teal);
    margin: 0;
}

.section-subtitle {
    font-size: 21px;
    font-weight: 300;
    color: var(--purple);
    margin: 0;
    /* تقريب الـ subtitle من العنوان زي التصميم (الصناديق متداخلة شوية) */
    margin-top: -10px;
}

/* الأمواج
   الأصل شكل أبيض مصمت من تحت وحافته العليا موجة، طوله 29px ودورته ~115px.
   بيتكرر أفقيًا بمقاسه الطبيعي من غير أي تصغير أو قص. */
.wave {
    position: absolute;
    inset-inline: 0;
    height: var(--wave-h);
    background-image: url("../images/bauo8iqwxsmsk6pj73 (1) 3.png");
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: auto var(--wave-h);
    pointer-events: none;
    z-index: 4;
}

/* فوق الانترو: نقلبه رأسيًا فيبقى أبيض مصمت من فوق وموجته نازلة على الصورة.
   -2px عشان ميبقاش في خط شعرة بينه وبين الهيدر. */
.wave--intro-top {
    inset-block-start: -2px;
    transform: scaleY(-1);
}

/* تحت الانترو: بمقاسه الطبيعي — أبيض من تحت وموجته طالعة */
.wave--intro-bottom {
    inset-block-end: 0;
}

/* الديكورات */
.deco {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.deco--clouds {
    width: 181px;
    inset-block-start: 30px;
}

.deco--plus {
    width: 84px;
    inset-block-end: 40px;
}

/* مواضع الديكورات زي التصميم — والخصائص المنطقية بتعكسها في الإنجليزي */
.goals .deco--clouds { inset-inline-start: 40px; }
.goals .deco--plus   { inset-inline-end: 30px; }

.facilities .deco--clouds { inset-inline-end: 80px; }
.facilities .deco--plus   { inset-inline-start: 30px; }

/* --------------------------------------------------------------------------
   4. الهيدر
   -------------------------------------------------------------------------- */
.site-header {
    position: relative;
    z-index: 30;
    min-height: var(--header-h);
    display: flex;
    align-items: center;
    background: var(--white);
    transition: min-height .3s var(--ease), box-shadow .3s var(--ease);
}

.site-header.is-stuck {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    min-height: 84px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
}

/* لما الهيدر يتثبّت بيخرج من التدفق — بنعوّض ارتفاعه في أول سكشن بعده */
.site-header.is-stuck + section {
    margin-block-start: var(--header-h);
}

.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}

.main-logo {
    flex: 0 0 auto;
}

.main-logo img {
    width: 96px;
    height: auto;
    transition: width .3s var(--ease);
}

.site-header.is-stuck .main-logo img {
    width: 74px;
}

/* المنيو */
.main-nav .nav-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav .nav-list > li {
    white-space: nowrap;
}

.main-nav .nav-list > li > a {
    display: inline-block;
    padding-block: 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--black);
}

/* ملحوظة: ووردبريس بيضيف current-menu-item لكل البنود لأنها كلها روابط أنكور
   على نفس الصفحة — فالتفعيل بيعتمد على .current-section اللي الجافاسكريبت بيحطها.
   التفعيل باللون بس، من غير أي خط تحت الكلمة. */
.main-nav .nav-list > li > a:hover,
.main-nav .nav-list > li.current-section > a {
    color: var(--teal);
}

/* أزرار الهيدر */
.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* عرض الكونتينر — مفرود شوية زي التصميم (محتوى ~1170px بدل 1140px)
   التصميم إطاره 1600px والمحتوى ثابت من 215px لـ 1385px = 1170px */
@media (min-width: 1200px) {
    .container {
        max-width: 1280px;
    }
}

/* مبدّل اللغة */
/* نفس ارتفاع زرار «سجل الان» عشان يقفوا في خط واحد */
.lang-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 7px;
    height: 56px;
    padding-inline: 16px;
    border: 1.5px solid var(--teal);
    border-radius: var(--r-pill);
    /* تنسيق الهوفر بقى هو التنسيق الافتراضي: خلفية تركوازي وخط أبيض */
    background: var(--teal);
    color: var(--white);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}

.lang-switch i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
}

/* لازم :link/:visited عشان يغلبوا قاعدة a:link{color:inherit} الأعلى تخصيصًا */
.lang-switch,
.lang-switch:link,
.lang-switch:visited {
    color: var(--white);
}

.lang-switch:hover {
    background: var(--teal);
    color: var(--white);
    transform: translateY(-2px);
}

/* زرار الموبايل */
.nav-btn {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--cream);
    color: var(--teal);
    font-size: 20px;
    cursor: pointer;
}

/* منيو الموبايل */
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--ease), visibility .35s var(--ease);
}

.nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.mobile-nav-list {
    position: fixed;
    inset-block: 0;
    z-index: 100;
    width: min(320px, 85vw);
    padding: 28px 24px;
    background: var(--white);
    overflow-y: auto;
    box-shadow: 0 0 40px rgba(0, 0, 0, .12);
    transition: transform .4s var(--ease);
}

/* الدرج بيطلع من نفس ناحية زرار البرجر */
html[dir="rtl"] .mobile-nav-list {
    inset-inline-end: 0; /* = الشمال في RTL */
    transform: translateX(-105%);
}

html[dir="ltr"] .mobile-nav-list {
    inset-inline-end: 0; /* = اليمين في LTR */
    transform: translateX(105%);
}

html[dir="rtl"] .mobile-nav-list.is-open,
html[dir="ltr"] .mobile-nav-list.is-open {
    transform: translateX(0);
}

/* المنيو الجانبية — الاتجاه بيتبع لغة الصفحة تلقائيًا */
.mobile-nav-list {
    text-align: start;
}

.mobile-nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 24px;
    padding-block-end: 18px;
    border-block-end: 1px solid #EEE;
}

.mobile-logo img {
    width: 104px;
    display: block;
}

.nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cream);
    color: var(--teal);
    font-size: 17px;
    cursor: pointer;
    transition: background .3s var(--ease), color .3s var(--ease);
}

.nav-close:hover {
    background: var(--teal);
    color: var(--white);
}

.mobile-nav-list .mobile-list {
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.mobile-nav-list .mobile-list > li + li {
    border-block-start: 1px solid #F0F0F0;
}

.mobile-nav-list .mobile-list > li > a {
    display: block;
    padding: 14px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--black);
    text-align: start;
}

.mobile-nav-list .mobile-list > li > a:hover,
.mobile-nav-list .mobile-list > li.current-section > a {
    color: var(--teal);
}

/* زرار «سجل الان» هنا بس في الريسبونسيف — بياخد عرض الدرج */
.mobile-nav-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-block-end: 10px;
}

.mobile-nav-actions .main-btn {
    width: 100%;
}

.mobile-nav-actions .lang-switch {
    width: 100%;
    height: 52px;
}

/* --------------------------------------------------------------------------
   5. الانترو
   -------------------------------------------------------------------------- */
/* في التصميم البلوب مركون تحت في نص السكشن — قاعدته على قاعدة الانترو
   والموجة السفلية بتقصّ طرفه. */
.intro {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 950px;
    padding: 90px 0 0;
    background-color: var(--cream);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.intro-blob {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 852px;
    max-width: calc(100% - 48px);
    aspect-ratio: 852 / 585;
    padding: 60px;
    background: url("../images/slider-bg-floral 1.png") center / contain no-repeat;
}

.intro-content {
    width: 100%;
    max-width: 570px;
    text-align: center;
}

.intro-kicker {
    margin: 0 0 6px;
    font-size: 30px;
    font-weight: 300;
    line-height: 1.4;
    color: var(--purple);
}

.intro-title {
    margin: 0 0 18px;
    color: var(--teal);
    font-weight: 700;
    line-height: 1.25;
}

.intro-title__1,
.intro-title__2 {
    display: block;
}

.intro-title__1 {
    font-size: 51px;
}

.intro-title__2 {
    font-size: 57px;
}

.intro-desc {
    font-size: 22px;
    font-weight: 400;
    line-height: 31px;
    color: var(--black);
}

.intro-desc p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   6. من نحن
   -------------------------------------------------------------------------- */
.about {
    padding-block: 110px;
    background: var(--white);
}

.about-blocks {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 44px;
    width: 100%;
}

.about-block {
    width: 100%;
}

/* العنوان والنص يبدأوا من أول العمود على طول */
.about-block__title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    margin: 0 0 10px;
    font-size: 21px;
    font-weight: 700;
    line-height: 44px;
    color: var(--black);
    text-align: start;
}

.about-block__icon {
    width: 33px;
    height: auto;
    flex: 0 0 auto;
}

.about-block__text {
    width: 100%;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 31px;
    color: var(--black);
    text-align: start;
}

.about-image {
    max-width: 440px;
    margin-inline: auto;
}

.about-image img {
    width: 100%;
    border-radius: var(--r-md);
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   7. أهدافنا
   -------------------------------------------------------------------------- */
.goals {
    position: relative;
    padding-block: 90px 110px;
    background: var(--cream);
    overflow: hidden;
}

/* كل الكروت في السلايدر بنفس الطول مهما اختلف طول النص
   (أويل بيعوّم العناصر افتراضيًا فبنخليه فليكس) */
.goals-slider .owl-stage,
.packages-slider .owl-stage {
    display: flex;
    align-items: stretch;
}

.goals-slider .owl-item,
.packages-slider .owl-item {
    display: flex;
    float: none;
}

.goals-slider .goal-card,
.packages-slider .package-card {
    width: 100%;
}

.goal-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 40px 22px 70px;
    text-align: center;
    background: url("../images/Vector3.png") center / 100% 100% no-repeat;
}

.goals-slider .owl-item:nth-child(even) .goal-card {
    background-image: url("../images/Vector4.png");
}

.goal-card__number {
    display: block;
    margin-block-end: 14px;
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, .85);
}

.goal-card__image {
    margin-block-end: 20px;
    border-radius: 22px;
    overflow: hidden;
}

.goal-card__image img {
    width: 100%;
    aspect-ratio: 240 / 159;
    object-fit: cover;
    /* الـ radius على الصورة نفسها كمان عشان تفضل بنفس الشكل وقت التكبير
       (من غير كده زوايا الصورة بتطلع بيضا لما تكبر) ولو الصورة اتغيّرت */
    border-radius: 22px;
    transition: transform .5s var(--ease);
}

/* الأنيميشن بقى على الصورة بس — مش على الكارد كله */
.goal-card__image:hover img {
    transform: scale(1.06);
}

.goal-card__text {
    flex: 1 1 auto;
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
    color: var(--black);
}

/* Owl بيخلي .owl-carousel display:none لحد ما يشتغل، فبيقيس عرض صفر وقت التهيئة
   والكروت بتطلع بعرض غلط. بندي العنصر عرض حقيقي قبل التهيئة من غير ما يبان. */
.goals-slider.owl-carousel:not(.owl-loaded),
.packages-slider.owl-carousel:not(.owl-loaded),
.facilities-slider.owl-carousel:not(.owl-loaded) {
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

/* ------------------------------------------------------------------
   أسهم السلايدرز — دايرة رمادية 50px على جنب الكروت زي التصميم.
   المكان بيتحسب من الفراغ الجانبي المتاح: بيقف على 70px لما يبقى في مساحة،
   ولو الشاشة ضيقت بيقرّب لحد ما يفضل جوة الشاشة من غير ما يعمل اسكرول جانبي.
   ------------------------------------------------------------------ */
.goals-slider.owl-carousel .owl-nav,
.packages-slider.owl-carousel .owl-nav {
    margin: 0;
}

.goals-slider.owl-carousel .owl-nav button.owl-prev,
.goals-slider.owl-carousel .owl-nav button.owl-next,
.packages-slider.owl-carousel .owl-nav button.owl-prev,
.packages-slider.owl-carousel .owl-nav button.owl-next {
    position: absolute;
    inset-block-start: 50%;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #D9D9D9;
    color: var(--white);
    font-size: 15px;
    line-height: 1;
    transform: translateY(-50%);
    transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}

.goals-slider.owl-carousel .owl-nav button.owl-prev,
.packages-slider.owl-carousel .owl-nav button.owl-prev {
    inset-inline-start: max(calc((100% - 100vw) / 2 + 16px), -70px);
}

.goals-slider.owl-carousel .owl-nav button.owl-next,
.packages-slider.owl-carousel .owl-nav button.owl-next {
    inset-inline-end: max(calc((100% - 100vw) / 2 + 16px), -70px);
}

.goals-slider.owl-carousel .owl-nav button:hover,
.packages-slider.owl-carousel .owl-nav button:hover {
    background: var(--teal);
    color: var(--white);
    transform: translateY(-50%) scale(1.08);
}

.goals-slider.owl-carousel .owl-nav button.disabled,
.packages-slider.owl-carousel .owl-nav button.disabled {
    opacity: .45;
    pointer-events: none;
}

/* الأسهم بتتقلب مع اتجاه الصفحة عن طريق كلاس البوتستراب في الـ JS،
   بس نضمن إن الأيقونة نفسها متتقلبش مرتين */
.goals-slider.owl-carousel .owl-nav button i,
.packages-slider.owl-carousel .owl-nav button i {
    pointer-events: none;
}

.owl-carousel .owl-dots {
    margin-block-start: 26px;
    text-align: center;
    background: transparent;
}

.owl-carousel .owl-dots .owl-dot,
.owl-carousel .owl-dots .owl-dot:hover,
.owl-carousel .owl-dots .owl-dot:focus {
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0;
}

.owl-carousel .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: #D9D9D9;
    border-radius: 50%;
    display: block;
    transition: background .3s var(--ease), width .3s var(--ease);
}

.owl-carousel .owl-dots .owl-dot.active span {
    width: 26px;
    border-radius: var(--r-pill);
    background: var(--teal);
}

/* --------------------------------------------------------------------------
   8. برامجنا التعليمية
   -------------------------------------------------------------------------- */
.programs {
    padding-block: 100px;
    background: var(--white);
}

/* فليكس مش جريد عشان الصفّ الأخير الناقص يتوسّط زي التصميم.
   المسافة الرأسية 30px زي التصميم (من تحت الكارت الأبيض لصورة الصف اللي بعده). */
.programs-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
}

.programs-grid > .program-card {
    flex: 0 0 calc((100% - 60px) / 3);
    max-width: calc((100% - 60px) / 3);
}

/* كارت عمودي عشان كل الكروت في الصف يطلعوا بنفس الطول */
.program-card {
    position: relative;
    display: flex;
    flex-direction: column;
}

.program-card__image {
    flex: 0 0 auto;
    border-radius: var(--r-sm);
    overflow: hidden;
}

.program-card__image img {
    width: 100%;
    aspect-ratio: 369 / 357;
    object-fit: cover;
    transition: transform .5s var(--ease);
}

.program-card:hover .program-card__image img {
    transform: scale(1.06);
}

.program-card__body {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;          /* بيمدّ الكارت الأبيض لحد آخر الكارت فيتساووا */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 92%;              /* نسبة التصميم: 339 من 369 */
    min-height: 250px;       /* نسبة التصميم: 265 من 369 */
    margin: -140px auto 0;
    padding: 30px 18px 26px;
    text-align: center;
    background: var(--white);
    border-radius: var(--r-sm);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .10);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.program-card:hover .program-card__body {
    transform: translateY(-8px);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .14);
}

.program-card__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    margin-block-end: 12px;
}

.program-card__icon img {
    position: relative;
    z-index: 2;
    max-width: 74px;
    max-height: 74px;
}

/* في التصميم النقطة على الناحية اللي قبل الأيقونة في اتجاه القراءة
   (يمين الأيقونة في العربي) — inset-inline-start بيعكسها لوحدها في الإنجليزي */
.program-card__dot {
    position: absolute;
    inset-block-end: 8px;
    inset-inline-start: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #BBD9EC;
}

.program-card__title {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 500;
    line-height: normal;
    color: var(--black);
}

.program-card__desc {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 23px;
    color: var(--grey);
}

/* --------------------------------------------------------------------------
   9. الباقات
   -------------------------------------------------------------------------- */
.packages {
    padding-block: 100px;
    background: var(--cream);
}

/* المسافات مأخوذة من التصميم (كارت 372×461) ومظبوطة على عرضنا:
   العنوان 41 من فوق · العنوان→أول سطر 48 · وقت→سعر 29 · مجموعة→مجموعة 66
   · آخر سعر→الزرار 82 · وتحت الزرار ديل البلوب */
.package-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 30px 76px;
    text-align: center;
    background: url("../images/Vector.png") center / 100% 100% no-repeat;
}

.package-card--highlight {
    background-image: url("../images/Vector2.png");
}

/* هوفر على الكارد كله = يفعّل هوفر الزرار اللي جواه */
.package-card:hover .main-btn {
    background: var(--yellow-hi);
    color: var(--black);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(240, 204, 16, .45);
}

.package-card:hover .main-btn img {
    transform: rotate(-45deg) translateY(-3px);
}

html[dir="ltr"] .package-card:hover .main-btn img {
    transform: rotate(45deg) translateY(-3px);
}

.package-card__title {
    margin: 0 0 42px;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--teal);
}

/* التخصيص عالي عشان يغلب قاعدة ul.list-unstyled العامة اللي بتصفّر الـ margin */
.package-card ul.package-card__rows {
    flex: 1 1 auto;   /* بيدفع الزرار لتحت فيبقوا كلهم على سطر واحد */
    width: 100%;
    margin: 0 0 46px;
    padding: 0;
}

.package-card__rows li + li {
    margin-block-start: 32px;
}

.package-card__label,
.package-card__price {
    display: block;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--black);
}

/* --------------------------------------------------------------------------
   10. المرافق والخدمات
   -------------------------------------------------------------------------- */
.facilities {
    position: relative;
    padding-block: 90px 110px;
    background: var(--white);
    overflow: hidden;
}

/* جريد بـ grid-auto-rows: 1fr = كل الصفوف بطول أطول واحد فيهم،
   حتى لو نص اتكسر سطرين في لغة من الاتنين */
.facilities-list {
    display: grid;
    grid-auto-rows: 1fr;
    gap: 18px;
}

.facility-item {
    display: flex;
}

.facility-item__btn {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    min-height: 55px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.facility-item__text {
    flex: 1;
    text-align: start;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--black);
    transition: color .3s var(--ease);
}

.facility-item__num {
    flex: 0 0 55px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
    font-size: 19px;
    font-weight: 500;
    color: var(--black);
    transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}

.facility-item.is-active .facility-item__num,
.facility-item:hover .facility-item__num {
    background: var(--yellow);
    transform: scale(1.06);
}

.facility-item:hover .facility-item__text {
    color: var(--teal);
}

.facilities-media {
    position: relative;
}

/* الماسك على .owl-stage-outer مش على السلايدر نفسه —
   كده أسهم Owl (اللي بتتولّد كأخت لـ stage-outer) بتفضل برّه الماسك ومتتقصّش */
/* الماسك من facilities-mask.svg مش من "Mask group.png".
   الصورة القديمة متصدّرة من الفيجما وجواها أيقونتين سهم مرسومين جوه الشكل،
   ولما بتتستخدم كماسك بيفتحوا فتحة على شكل سهم فبيبان سهمين وهميين.
   الـ SVG ده هو الشكل لوحده (مسار واحد) من غيرهم. */
.facilities-slider .owl-stage-outer {
    -webkit-mask: url("../images/facilities-mask.svg") center / contain no-repeat;
    mask: url("../images/facilities-mask.svg") center / contain no-repeat;
}

.facilities-media__item {
    margin: 0;
    aspect-ratio: 560 / 432;
}

.facilities-media__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* أسهم الكاروسيل بتاع المرافق — أسهم Owl نفسه.
   الماسك متحطّ على .owl-stage-outer، والـ .owl-nav أخته فمش بتتقص. */
.facilities-slider .owl-nav {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 5;
    pointer-events: none;
}

.facilities-slider .owl-nav button.owl-prev,
.facilities-slider .owl-nav button.owl-next {
    position: absolute;
    inset-block-start: 50%;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--black);
    font-size: 17px; /* مقاس أيقونة التصميم 16.85px */
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .3s var(--ease), transform .3s var(--ease);
}

/* مكان السهمين مأخوذ من التصميم بالظبط.
   صندوق الصورة 560×432 عند (825, 4709)، والسهمين 16.85px عند:
     شمال  x=844.3  -> مركزه 27.75  = 4.96%  من الحافة الشمال
     يمين  x=1335.8 -> مركزه 519.3  = 92.73% = 7.27% من الحافة اليمين
     رأسيًا y=4931.97 -> مركزه 231.4 = 53.6%
   بنطرح نص عرض الزرار عشان المركز يقع على النقطة دي بالظبط. */
.facilities-slider .owl-nav button.owl-prev,
.facilities-slider .owl-nav button.owl-next {
    inset-block-start: 53.6%;
}

/* التموضع حسب اتجاه الأيقونة نفسها — الماسك/الصورة مش بتتقلب بين اللغتين،
   فالسهم الشمال ‹ (fa-arrow-left) يفضل شمال، واليمين › (fa-arrow-right) يفضل يمين
   في العربي والإنجليزي. بنلغّي الـ inset-inline المنطقية ونستخدم left/right فيزيائية. */
.facilities-slider .owl-nav button.owl-prev,
.facilities-slider .owl-nav button.owl-next {
    inset-inline-start: auto;
    inset-inline-end: auto;
}

.facilities-slider .owl-nav button:has(.fa-arrow-left) {
    left: calc(1.96% - 20px);
    right: auto;
}

.facilities-slider .owl-nav button:has(.fa-arrow-right) {
    right: calc(7.27% - 20px);
    left: auto;
}

.facilities-slider .owl-nav button:hover {
    color: var(--yellow);
}

/* نفشة الهوفر لبرّه حسب اتجاه السهم */
.facilities-slider .owl-nav button:has(.fa-arrow-left):hover {
    transform: translateY(-50%) translateX(-3px);
}

.facilities-slider .owl-nav button:has(.fa-arrow-right):hover {
    transform: translateY(-50%) translateX(3px);
}

/* --------------------------------------------------------------------------
   11. فريقنا
   -------------------------------------------------------------------------- */
.team {
    padding-block: 60px 110px;
    text-align: center;
    background: var(--cream);
}

.team-text {
    max-width: 1005px;
    margin: 0 auto 40px;
    font-size: 25px;
    font-weight: 400;
    line-height: 38px;
    color: var(--black);
}

.team-text p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   12. الفوتر
   -------------------------------------------------------------------------- */
.main-footer {
    position: relative;
    padding-block: 70px;
    background-color: var(--teal-dark);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.main-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(327.09deg, rgba(0, 0, 0, 0.1674) -26.53%, rgba(34, 119, 119, 0.93) 932.39%);
}

.main-footer > .container {
    position: relative;
    z-index: 2;
}

.footer-card {
    padding: 46px 38px 22px; /* التصميم: 49 فوق و37 جنب */
    background: var(--white);
    border-radius: var(--r-md);
}

.footer-col {
    margin-block-end: 26px;
    /* كل محتوى الفوتر يبدأ من ناحية القراءة (يمين في العربي، شمال في الإنجليزي) */
    text-align: start;
}

.footer-title {
    margin: 0 0 24px;
    font-size: 17px;
    font-weight: 700;
    color: var(--black);
    text-align: start;
}

/* عمود البراند — الشعار في النص والسوشيال تحته */
.footer-col--brand {
    text-align: center;
}

.footer-logo {
    display: block;
}

.footer-logo img {
    width: 124px;
    /* الشعار في النص + مسافة أقل بينه وبين السوشيال */
    margin-inline: auto;
    margin-block-end: 10px;
}

/* السوشيال صف col-3 (٤ في السطر) متوسّط */
.footer-social {
    /* ترتيب الأيقونات ثابت زي التصميم في اللغتين */
    direction: ltr;
    margin-inline: 0;
    row-gap: 8px;
}

.footer-social > [class*="col-"] {
    display: flex;
    justify-content: center;
    padding-inline: 3px;
}

/* دايرة مضبوطة — flex-basis ثابت عشان الفليكس ميضغطهاش لبيضاوي */
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--white);
    font-size: 15px;
    line-height: 1;
    transition: transform .3s var(--ease), background .3s var(--ease);
}

.footer-social a:hover {
    transform: translateY(-3px);
    background: var(--yellow-hi);
}

/* الروابط عمودين زي التصميم — الأول بيتملى قبل التاني
   (يعني في العربي: العمود اليمين الأول) */
.footer-list {
    column-count: 2;
    column-gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: start;
}

/* التصميم: المسافة بين الرابط واللي بعده 33px (24 سطر + 9) */
.footer-list li {
    break-inside: avoid;
    margin-block-end: 9px;
}

.footer-list a {
    position: relative;
    display: inline-block;
    padding-inline-start: 16px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--black);
    white-space: nowrap; /* «سياسة الخصوصية» و«المرافق والخدمات» على سطر واحد */
}

.footer-list a::before {
    content: '–';
    position: absolute;
    inset-inline-start: 0;
}

/* الأيقونة الأول (ناحية القراءة) وبعدها النص — زي التصميم */
.footer-contact li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-block-end: 13px; /* التصميم: 37px بين الصف والتاني */
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
}

.footer-contact i {
    flex: 0 0 auto;
    color: var(--teal);
    font-size: 14px;
}

.footer-contact a,
.footer-contact span {
    word-break: break-word;
}

/* شعارات الجهات جنب بعض على سطر واحد زي التصميم */
.footer-badges {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 12px;
    margin-block-start: 22px;
}

.footer-badges > img {
    flex: 0 1 auto;
    max-width: calc(50% - 6px);
    max-height: 38px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.footer-badges > a {
    flex: 0 1 auto;
    max-width: calc(50% - 6px);
    max-height: 38px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.footer-map {
    width: 100%;
    height: 157px; /* مقاس التصميم */
    border-radius: var(--r-sm);
    overflow: hidden;
}

.footer-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.footer-bottom {
    margin-block-start: 20px;
    padding-block-start: 18px;
    border-block-start: 1px solid #E9E9E9;
    text-align: center;
    font-size: 14px;
    color: var(--black);
}

.footer-bottom p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 8px;
    margin: 0;
}

.footer-bottom .footer-site-link,
.footer-bottom .efadh-link {
    color: var(--teal);
    font-weight: 700;
    transition: color .3s var(--ease);
}

.footer-bottom .footer-site-link:hover,
.footer-bottom .efadh-link:hover {
    color: var(--teal-dark);
}

.footer-bottom p > span:nth-child(3),
.footer-bottom p > span:nth-child(5) {
    color: #C9C9C9;
}

/* --------------------------------------------------------------------------
   13. الصفحات الداخلية
   -------------------------------------------------------------------------- */
.inner-page {
    padding-block: 80px 100px;
}

.inner-page .section-title {
    margin-block-end: 32px;
    text-align: center;
}

.inner-page__thumb {
    margin-block-end: 36px;
    border-radius: var(--r-md);
    overflow: hidden;
}

.inner-page__thumb img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
}

.inner-page__content h2,
.inner-page__content h3,
.inner-page__content h4 {
    margin-block: 28px 10px;
    font-size: 21px;
    color: var(--teal);
    text-align: center;
}

/* القوايم لو استخدمها العميل تفضل متوسّطة كتلة وقابلة للقراءة */
.inner-page__content ul,
.inner-page__content ol {
    display: inline-block;
    text-align: start;
    margin-inline: auto;
}

/* محتوى الصفحات الداخلية متوسّط في اللغتين */
.inner-page__content {
    max-width: 900px;
    margin-inline: auto;
    font-size: 18px;
    line-height: 34px;
    text-align: center;
}

.inner-page__content > *:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   14. الريسبونسيف
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .main-nav .nav-list {
        gap: 22px;
    }

    .main-nav .nav-list > li > a {
        font-size: 15px;
    }

    .intro-title__1 { font-size: 42px; }
    .intro-title__2 { font-size: 46px; }
}

@media (max-width: 991px) {
    :root {
        --header-h: 96px;
    }

    .main-nav {
        display: none;
    }

    .nav-btn {
        display: inline-flex;
    }

    .header-actions {
        gap: 10px;
    }

    /* زرار «سجل الان» بيتشال من الهيدر ويفضل في المنيو الجانبية بس */
    .header-actions .main-btn {
        display: none;
    }

    .site-header {
        min-height: 96px;
    }

    .main-logo img {
        width: 110px;
    }

    .section-title {
        font-size: 34px;
        line-height: 1.4;
    }

    .section-subtitle {
        font-size: 18px;
        line-height: 1.8;
        margin-top: -6px;
    }

    /* البلوب مركون تحت في النص زي الديسكتوب — والموجة السفلية بتقصّ طرفه */
    .intro {
        min-height: 620px;
        align-items: flex-end;
        padding: 110px 0 0;
    }

    /* نفس شكل الزهور بتاع الديسكتوب — بنسيب الشكل يتمدّد مع ارتفاع النص
       (100% 100%) بدل contain، عشان يفضل مغطّي الكلام على الشاشات الطويلة */
    /* الشكل بيضاوي فحوافه العليا والسفلى أضيق من الصندوق —
       الحشوة بالنسبة المئوية عشان الكلام يفضل جوه المنطقة الآمنة على أي عرض */
    .intro-blob {
        aspect-ratio: auto;
        width: 100%;
        max-width: calc(100% - 24px);
        padding: 13% 15%;
        background-size: 100% 100%;
        background-position: center;
    }

    .intro-kicker { font-size: 19px; margin-bottom: 2px; }
    .intro-title__1 { font-size: 28px; }
    .intro-title__2 { font-size: 31px; }
    .intro-title { margin-bottom: 12px; }
    .intro-desc { font-size: 16px; line-height: 27px; }

    .about {
        padding-block: 70px;
    }

    .about-image {
        max-width: 380px;
        margin-block-end: 40px;
    }

    .programs-grid {
        gap: 34px 24px;
    }

    .programs-grid > .program-card {
        flex-basis: calc((100% - 24px) / 2);
        max-width: calc((100% - 24px) / 2);
    }

    .facilities-wrap {
        row-gap: 40px;
    }

    /* الصورة أضيق شوية عشان يفضل فراغ جنبها تقف فيه الأسهم مرتاحة */
    .facilities-media {
        max-width: 440px;
        margin-inline: auto;
    }

    /* المكان بالنِسَب فبيتظبط لوحده مع أي عرض — مفيش override هنا */

    /* صورة كارت الأهداف بتكبر على الموبايل فالتقويس لازم يكبر معاها */
    .goal-card__image {
        border-radius: 18px;
    }

    .team-text {
        font-size: 20px;
        line-height: 34px;
    }

    .footer-card {
        padding: 34px 24px 20px;
    }

    .deco--clouds { width: 120px; }
    .deco--plus { width: 56px; }
}

@media (max-width: 767px) {
    /* تقليل الـ padding العمودي للسكاشن على الموبايل — 25px فوق/تحت لكل سكشن
       يعني المسافة بين أي سكشنين = 50px (بدل الديسكتوب الكبير) */
    .about,
    .goals,
    .programs,
    .packages,
    .facilities,
    .team {
        padding-block: 25px;
    }

    .section-head {
        margin-bottom: 38px;
    }

    .section-title {
        font-size: 28px;
    }

    .programs-grid {
        max-width: 420px;
        margin-inline: auto;
    }

    .programs-grid > .program-card {
        flex-basis: 100%;
        max-width: 100%;
    }

    .package-card__title {
        font-size: 30px;
    }

    .facilities-media {
        max-width: 300px;
    }

    .facility-item__text {
        font-size: 17px;
    }

    .facility-item__num {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        font-size: 17px;
    }

    /* الروابط تفضل عمودين على الموبايل مش كلهم تحت بعض */
    .footer-list {
        column-count: 2;
        column-gap: 18px;
    }

    .footer-list a {
        font-size: 14px;
    }

    .deco {
        display: none;
    }
}

@media (max-width: 575px) {
    /* الزرار بيفضل بمقاسه — بنكسب المساحة من اللوجو ومبدّل اللغة */
    .main-logo img {
        width: 74px;
    }

    .header-actions {
        gap: 8px;
    }

    /* الزرار الأصفر اتشال من الهيدر، فمبدّل اللغة عنده مساحة يفضل بحروفه */
    .nav-btn,
    .header-actions .lang-switch {
        height: 52px;
    }

    .nav-btn {
        width: 52px;
    }

    .intro {
        min-height: 540px;
        padding: 80px 0 0;
    }

    .intro-blob {
        padding: 15% 16%;
    }

    .intro-kicker { font-size: 16px; }
    .intro-title__1 { font-size: 21px; }
    .intro-title__2 { font-size: 24px; }
    .intro-desc { font-size: 14px; line-height: 23px; }

    .goal-card {
        padding: 34px 18px 60px;
    }

    .goal-card__image {
        border-radius: 16px;
    }

    .goal-card__number { font-size: 42px; }
    .goal-card__text { font-size: 17px; line-height: 28px; }
}

/* --------------------------------------------------------------------------
   15. تخفيف الحركة لمن يفضّلها
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}