/* Base */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Cairo', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}


/* Reveal on scroll */


/* الحاوية ثابتة بأسفل الصفحة */

#scroll-progress {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* أسفل الصفحة */
    height: 6px;
    /* سماكة الشريط */
    background: rgba(22, 163, 74, 0.15);
    /* خلفية خفيفة خضراء (#16A34A) */
    z-index: 9999;
    /* فوق كل العناصر */
    pointer-events: none;
    /* لا يمنع النقر على عناصر الصفحة */
}


/* شريط التقدم نفسه */

#scroll-progress-bar {
    width: 0%;
    height: 100%;
    background: #16A34A;
    /* أخضر */
    transition: width 0.08s linear;
}


/* دعم أنظمة تفضيل تقليل الحركة */

@media (prefers-reduced-motion: reduce) {
    #scroll-progress-bar {
        transition: none;
    }
}

.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease
}

.reveal.on {
    opacity: 1;
    transform: translateY(0)
}


/* CTA subtle glow */

.glow {
    box-shadow: 0 0 0 0 rgba(22, 163, 74, .35);
    animation: pulseGlow 2.2s infinite
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, .35)
    }
    70% {
        box-shadow: 0 0 0 18px rgba(22, 163, 74, 0)
    }
    100% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0)
    }
}


/* Partners marquee */

.marquee {
    --gap: 3rem;
    display: flex;
    gap: var(--gap);
    overflow: hidden;
    user-select: none
}

.marquee__group {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--gap);
    animation: scroll 24s linear infinite
}

@keyframes scroll {
    to {
        transform: translateX(calc(-100% - var(--gap)))
    }
}

.nav-link {
    font-weight: 500;
}

.nav-link:hover {
    color: #16a34a !important;
    /* font-weight: 600; */
    transition: 0.3s all ease;
}


/* Hero visual accents (subtle version) */

.hero-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(18px);
    opacity: .35;
    pointer-events: none
}

.hero-blob.blob-1 {
    width: 380px;
    height: 380px;
    right: -120px;
    top: -80px;
    background: radial-gradient(circle at 30% 30%, #34D399, #10B981 60%, transparent 65%);
    animation: float1 10s ease-in-out infinite
}

.hero-blob.blob-2 {
    width: 320px;
    height: 320px;
    left: -90px;
    bottom: -60px;
    background: radial-gradient(circle at 70% 70%, #A7F3D0, #34D399 55%, transparent 65%);
    animation: float2 12s ease-in-out infinite
}

#heroTitle {
    line-height: 1.4;
    letter-spacing: 0;
    word-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-ligatures: contextual;
    font-feature-settings: "calt" 1, "kern" 1;
}

#siteHeader {
    background: rgba(11, 11, 16, 0.14);
    backdrop-filter: blur(4px);
}

#siteHeader .nav-link,
#siteHeader .mobile-link,
#siteHeader .brand-img,
#siteHeader svg {
    color: white;
}

#siteHeader .nav-cta {
    background: rgba(255, 255, 255, 0.12);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.08);
}


/* ========================== */


/* Mobile Menu Glass Effect */

#mobileMenu {
    overflow: hidden;
    max-height: 0;
    transition: max-height 300ms ease;
    background: rgba(15, 23, 42, 0.55);
    /* خلفية زجاجية غامقة */
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}


/* When menu is open */

#mobileMenu.open {
    max-height: 500px;
    /* كافي جداً */
}


/* Links styling */

#mobileMenu a {
    display: block;
    padding: 12px 20px;
    /* المسافة بين اللينكات */
    color: #E3F8F0;
    /* نص فاتح ومناسب للخلفية */
    font-weight: 600;
    font-size: 1rem;
    border-radius: 8px;
    transition: background 0.25s ease;
}

#mobileMenu a:hover {
    background: rgba(255, 255, 255, 0.08);
}


/* Burger button when open (اختياري) */

#menuBtn.is-open {
    background: rgba(255, 255, 255, 0.12);
}


/* Make header transparent on mobile */

@media (max-width: 767px) {
    #siteHeader {
        background: transparent !important;
    }
}


/* ========================== */


/* SCROLLED */

#siteHeader.scrolled {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

#siteHeader.scrolled .nav-link,
#siteHeader.scrolled .mobile-link,
#siteHeader.scrolled .brand-img,
#siteHeader.scrolled svg {
    color: #0f172a;
}

#siteHeader.scrolled .nav-cta {
    background: linear-gradient(90deg, #16a34a);
    color: #fff;
    border: none;
}


/* Slider layout fix */


/* ============= */


/* ============= */


/* header فوق المينو */

#siteHeader {
    z-index: 50;
}


/* لو حبيت مساحة داخلية للمينو عند الفتح */

#siteHeader.menu-open #mobileMenu {
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
}


/* entrance animations */

.animate-entry-right {
    animation: entryRight 700ms cubic-bezier(.16, .84, .44, 1) both;
}

.animate-entry-up {
    animation: entryUp 700ms cubic-bezier(.16, .84, .44, 1) both;
    animation-delay: 120ms;
}

.animate-entry-left {
    animation: entryLeft 700ms cubic-bezier(.16, .84, .44, 1) both;
    animation-delay: 80ms;
}

@keyframes entryRight {
    from {
        transform: translateX(30px) scale(.995);
        opacity: 0;
    }
    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes entryLeft {
    from {
        transform: translateX(-30px) scale(.995);
        opacity: 0;
    }
    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes entryUp {
    from {
        transform: translateY(20px) scale(.995);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}


/* typing cursor blink */

@keyframes blink {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

#typed-cursor {
    animation: blink 1s step-end infinite;
}


/* ===== HARD FIX: صفّ الشرائح على سطر واحد مهما حصل ===== */

#slider {
    white-space: nowrap;
    /* يمنع اللف */
    font-size: 0;
    /* يقتل فراغات inline-block */
    transition: transform 500ms ease;
    will-change: transform;
}

#slider>figure {
    display: inline-block;
    /* كل شريحة صندوق على السطر */
    vertical-align: top;
    width: 100%;
    /* سنثبّت عرضها بالبكسل أيضاً */
    margin: 0;
    box-sizing: border-box;
    font-size: initial;
    /* يرجّع حجم خط داخل الشريحة لطبيعته */
}


/* new section */


/* الخط الأساسي */

body {
    font-family: 'Tajawal', sans-serif;
}


/* حركة البطاقات */

.card {
    transition: transform .25s ease, box-shadow .25s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.2);
}


/* الدائرة المتحركة */

.progress-svg {
    transform: rotate(90deg);
}


/* / */

@media (prefers-reduced-motion: reduce) {
    #heroTitle span {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

@keyframes float1 {
    0%,
    100% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(16px)
    }
}

@keyframes float2 {
    0%,
    100% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-14px)
    }
}

.float-slow {
    animation: float3 9s ease-in-out infinite
}

@keyframes float3 {
    0%,
    100% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-10px)
    }
}

.parallax-item {
    transition: transform .15s ease-out
}


/* Prevent anchor target from hiding behind sticky header */

[id] {
    scroll-margin-top: 90px;
}


/* خطواتك نحو النجاح */


/* سكشن كامل */

.steps {
    padding: 4rem 0;
    background-color: var(--bg-secondary);
    position: relative;
}


/* العناوين */

.steps-heading-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 0.5rem;
    transition: transform 0.6s ease, opacity 0.6s ease;
}

.steps-heading-subtitle {
    font-size: 1.125rem;
    color: #555;
    margin-top: 1rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.nav-linknav-link hover:text-primary
/* Divider */

.steps-heading-divider {
    width: 80px;
    height: 3px;
    background-color: #00b894;
    margin: 1rem auto 1.5rem auto;
    transition: width 0.5s ease;
}


/* خطوات المحتوى */

.steps-content-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

@media(min-width: 768px) {
    .steps-content-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(min-width: 1024px) {
    .steps-content-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* كل خطوة */

.steps-content-single {
    background-color: #fff;
    border-radius: 1rem;
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.steps-content-single:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}


/* الرقم الدائري */

.steps-content-single-box {
    width: 70px;
    height: 70px;
    margin: 0 auto 1rem auto;
    border-radius: 50%;
    background: linear-gradient(135deg, #00b894, #0984e3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.5rem;
    transform: rotate(0deg);
    transition: transform 1s ease;
}

.steps-content-single-box:hover {
    transform: rotate(360deg);
}


/* عنوان كل خطوة */

.steps-content-single-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #111;
}


/* وصف الخطوة */

.steps-content-single-description {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5rem;
}


/* السهم */

.steps-content-single-arrow {
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    /* يظهر على أجهزة كبيرة فقط */
}

@media(min-width: 1024px) {
    .steps-content-single-arrow {
        display: block;
    }
}

.steps-content-single-arrow svg {
    width: 40px;
    height: 40px;
    color: #00b894;
    transition: transform 0.3s ease;
}

.steps-content-single-arrow svg:hover {
    transform: translateX(5px);
}


/* =========================
   Animations
========================= */

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.sal-animate {
    animation: fadeInUp 0.7s ease forwards;
}


/* Responsive tweaks */

@media(max-width: 640px) {
    .steps-content-single {
        padding: 1.5rem 1rem;
    }
    .steps-content-single-box {
        width: 60px;
        height: 60px;
        font-size: 1.25rem;
    }
    .steps-heading-title {
        font-size: 2rem;
    }
    .steps-heading-subtitle {
        font-size: 1rem;
    }
}


/*  */

.descriptive-content {
    max-width: 350px;
}


/* keyframes needed for wave + ripple */

@keyframes waveMove {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-240px);
    }
}

@keyframes ripple {
    from {
        transform: scale(0.6);
        opacity: .35;
    }
    to {
        transform: scale(2);
        opacity: 0;
    }
}


/* Button overlay / fill */

.btn-hover {
    /* border-color: #ebebeb; */
    background-color: #effcf3;
}

.btn-cta {
    --g1: #34d399;
    --g2: #34d399;
}

.btn-cta .fill-overlay {
    background: linear-gradient(90deg, var(--g1), var(--g2));
    transition: width .65s cubic-bezier(.22, .9, .35, 1);
    width: 0%;
    z-index: 10;
    box-shadow: inset 0 6px 18px rgba(0, 0, 0, 0.06);
}

.btn-cta .wave-tile {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60'><path fill='%23ffffff' fill-opacity='0.12' d='M0 30 Q20 10 40 30 T80 30 T120 30 T160 30 T200 30 T240 30 V60 H0 Z'/></svg>");
    background-repeat: repeat-x;
    background-size: 240px 60px;
    animation: waveMove 3s linear infinite;
    opacity: 0;
    z-index: 9;
}


/* active/hover state: expand overlay + show wave */

.btn-cta:hover .fill-overlay,
.btn-cta.fill-active .fill-overlay,
.btn-cta:focus .fill-overlay {
    width: 100%;
}

.btn-cta:hover .wave-tile,
.btn-cta.fill-active .wave-tile,
.btn-cta:focus .wave-tile {
    opacity: 1;
}


/* text color switch when filled */

.btn-cta.fill-active .z-20,
.btn-cta:focus .z-20,
.btn-cta:hover .z-20 {
    color: #fff !important;
}


/* ripple (dynamically created) */

.ripple {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.35);
    transform: translate(-50%, -50%) scale(0.6);
    animation: ripple 0.9s ease-out forwards;
    z-index: 22;
}


/* simple entrance animation for elements that have data-ani attribute */

[data-ani="slide-up"] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .9, .3, 1);
}

[data-ani="fade"] {
    opacity: 0;
    transition: opacity .6s ease;
}

[data-ani="slide-up"].in-view,
[data-ani="fade"].in-view {
    opacity: 1;
    transform: none;
}


/* video popup base style (hidden by default) */

.video-popup {
    display: none;
}

.video-popup.grid-active {
    display: flex;
}

#whatsapp-icon {
    position: fixed;
    bottom: 20px;
    left: 20px;
    /* ثابتة على اليسار */
    width: 60px;
    height: 60px;
    z-index: 1000;
    opacity: 0;
    /* تختفي افتراضياً */
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
    /* شكل الدائرة */
    background-color: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

#whatsapp-icon img {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

#whatsapp-icon:hover {
    transform: scale(1.2);
    background-color: #1ebe57;
}