@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Tajawal:wght@400;500;700;800;900&display=swap');

*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:175%}body{background:#FAF7F1;color:#0A192F;font-family:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;line-height:1.15;overflow-x:hidden}
:root{--c:#FAF7F1;--ca:#FDFCF0;--n:#0A192F;--nm:#112240;--g:#C5A059;--gh:#D4B36A;--gs:rgba(197,160,89,0.1);--gg:rgba(197,160,89,0.22);--sl:#EEF1F5;--sb:#D6DCE4;--ws:#FDFCFA;--tm:rgba(253,252,240,0.55);--td:rgba(253,252,240,0.35);--ss:0 1px 3px rgba(12,29,63,0.05);--sm:0 8px 28px rgba(12,29,63,0.1);--sg:0 4px 20px rgba(197,160,89,0.2);--rs:6px;--rm:12px;--rl:16px;--rxl:20px;--fh:'Tajawal','Amiri','Noto Naskh Arabic',serif;--fb:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;--ts:.7s cubic-bezier(.25,.1,.25,1)}
.s{width:100%;padding:35px 8px;display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}.s.v{opacity:1;transform:translateY(0)}.sc{width:100%;max-width:1200px !important;}.hero{background:#FAF7F1;background-image:radial-gradient(ellipse at 50% 10%,rgba(184,147,79,0.03) 0%,transparent 65%)}.th{width:52px;height:0;background:#C5A059;opacity:.7;margin-bottom:-60px;border-radius:2px}.hb{text-align:center;margin-bottom:10px}.hl{font-family:var(--fh);font-size:clamp(1.3rem,4.5vw,2.65rem);font-weight:800;line-height:1.3;color:#0A192F}.vw{width:100%;max-width:720px;margin:0 auto 28px}.vc{position:relative;padding-bottom:50.25%;background:linear-gradient(135deg,#0F1F3A,#0C1D3F);border-radius:16px;cursor:pointer;box-shadow:var(--sm)}.pb{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,0.92);display:flex;align-items:center;justify-content:center}.pi{width:0;height:0;border-style:solid;border-width:12px 0 12px 22px;border-color:transparent transparent transparent #0A192F;margin-left:5px}.st{text-align:center;margin:28px 0 32px;color:#112240}.cta{background:#C5A059;color:#FEFEFD;border:none;border-radius:50px;padding:20px 40px;font-weight:600;font-size:0.7rem;cursor:pointer;box-shadow:var(--sg);display:inline-flex;align-items:center;gap:8px;transition:.35s;font-family:var(--fb)}.cta:hover{background:#D4B36A;transform:translateY(-2px)}.tb{display:flex;gap:30px;align-items:center;margin-top:24px;color:#112240;font-size:.7rem;justify-content:center}.problem{background:#EEF1F5}.sh{font-family:var(--fh);font-size:clamp(1.5rem,3.8vw,2.1rem);font-weight:800;text-align:center;margin-bottom:48px}.cg{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:44px}.c{background:rgba(255,255,255,0.7);border:1px solid #D6DCE4;border-radius:16px;padding:28px 22px;box-shadow:var(--ss)}.ctt{font-family:var(--fh);font-weight:800;font-size:1.1rem;margin-bottom:10px}.ctx{color:#112240;font-size:.9rem;font-family:var(--fb)}.sb{background:#0A192F;color:rgba(255,255,255,0.8);padding:18px 28px;border-radius:12px;text-align:center}.solution{background:#0A192F;color:#FAF7F1}.solution .sh{color:#C5A059}.bp{display:flex;align-items:center;justify-content:center;gap:16px;margin:32px 0 48px;flex-wrap:wrap}.si{transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform}.nd{background:#142644;border:1px solid rgba(197,160,89,0.25);border-radius:16px;padding:20px 28px;text-align:center;min-width:140px}.pc{background:#12243e;border:1px solid rgba(197,160,89,0.15);border-radius:16px;padding:26px 20px}.cn{color:#C5A059;opacity:.6}.pg{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.pt{color:#FAF7F1;font-family:var(--fh);font-weight:800;margin:12px 0}.ptx{color:var(--tm);font-family:var(--fb);font-size:.9rem}.authority{background:#0A192F;color:#FAF7F1}.sl{display:flex;gap:48px;align-items:center}.bc{background:rgba(17,34,64,0.55);border:1px solid rgba(197,160,89,0.2);border-radius:20px;padding:32px;text-align:center}.bf{width:100px;height:100px;border:1.5px solid #C5A059;border-radius:24px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 18px var(--gg)}.os{color:#C5A059;font-weight:600;margin-top:16px}.protocol{background:#FDFCF0}.th{display:flex;justify-content:space-between;position:relative;padding:20px 0}.th::before{content:'';position:absolute;top:48px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,#C5A059 15%,#C5A059 85%,transparent 100%);opacity:.4}.stp{text-align:center;flex:1;max-width:220px;position:relative;z-index:2}.stn{width:64px;height:64px;border-radius:50%;background:#FDFCFA;border:2px solid #C5A059;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:800;color:#C5A059;margin:0 auto 20px;font-family:var(--fh)}.stt{font-family:var(--fh);font-weight:800;margin-bottom:10px}.stx{font-family:var(--fb);font-size:.9rem;color:#112240}.closing{background:#0A192F;min-height:100vh;justify-content:center}.qb{background:rgba(197,160,89,0.06);border:1px solid rgba(197,160,89,0.18);border-radius:30px;padding:10px 24px;font-size:.8rem;color:#C5A059;margin-bottom:32px;text-align:center}.fc{background:#C5A059;color:#0A192F;border:none;border-radius:42px;padding:5px 8px;font-family:var(--fh);font-weight:800;font-size:1.15rem;cursor:pointer;box-shadow:0 8px 32px rgba(197,160,89,0.22);display:inline-flex;align-items:center;gap:10px;transition:.35s}.fc:hover{background:#D4B36A}.zc{position:fixed;bottom:20px;right:20px;z-index:999;display:flex;gap:8px}.zb{padding:10px 18px;border-radius:30px;font-weight:600;cursor:pointer;transition:.3s;border:none;font-size:.9rem;font-family:var(--fb)}.zi{background:#C5A059;color:#0A192F;box-shadow:var(--sg)}.zo{background:rgba(255,255,255,0.2);color:#FAF7F1;border:1px solid rgba(255,255,255,0.3);display:none}.mo{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:.4s}.mo.a{opacity:1;visibility:visible}.mc{background:#112240;border:1px solid rgba(197,160,89,0.25);border-radius:16px;padding:32px 24px;max-width:600px;width:100%;color:#FAF7F1;transform:translateY(20px) scale(.97);transition:transform .4s;position:relative}.mo.a .mc{transform:translateY(0) scale(1)}.mcl{position:absolute;top:16px;left:16px;background:rgba(255,255,255,0.05);border:1px solid rgba(197,160,89,0.2);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#C5A059;font-size:1.1rem;z-index:10}.mc iframe{border:0;width:100%;height:100%;background:#FAF7F1;border-radius:16px}
@media(max-width:768px){.cg,.pg{grid-template-columns:1fr}.th{display:none}.sl{flex-direction:column}}
.cd{position:fixed;width:12px;height:12px;background:#C5A059;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform .1s ease,width .2s ease,height .2s ease,background-color .2s ease;box-shadow:0 0 15px rgba(197,160,89,0.6)}.cd.ch{width:36px;height:36px;background:transparent;border:2px solid #C5A059;box-shadow:0 0 25px rgba(197,160,89,0.8)}
.pb-ct{position:fixed;top:0;left:0;width:100%;height:3px;z-index:9998;background:transparent;pointer-events:none}.pb-ct .pb-in{height:100%;width:0;background:linear-gradient(90deg,#C5A059,#D4B36A);box-shadow:0 0 10px rgba(197,160,89,0.5);transition:width .1s linear}
.c,.pc,.nd,.bc{transition:transform .4s cubic-bezier(.25,.1,.25,1),box-shadow .4s ease!important}.c:hover,.pc:hover,.nd:hover,.bc:hover{transform:translateY(-6px) scale(1.02)!important;box-shadow:0 12px 40px rgba(0,0,0,0.15)!important}
.timeline-horizontal{display:flex;justify-content:space-between;position:relative;padding:20px 0}.timeline-horizontal::before{content:'';position:absolute;top:48px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,#C5A059 15%,#C5A059 85%,transparent 100%);opacity:.4}.stp{text-align:center;flex:1;max-width:220px;position:relative;z-index:2}.stn{width:64px;height:64px;border-radius:50%;background:#FDFCFA;border:2px solid #C5A059;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:800;color:#C5A059;margin:0 auto 20px;font-family:var(--fh)}.stt{font-family:var(--fh);font-weight:800;margin-bottom:10px}.stx{font-family:var(--fb);font-size:.9rem;color:#112240}@media(max-width:768px){.timeline-horizontal{display:flex;flex-direction:column;align-items:center;gap:30px}.timeline-horizontal::before{display:none}.stp{max-width:100%;width:100%}}


/* ============================================================
   خلفية متحركة (دوديكاهيدرون) – مع شفافية أعلى للرؤية
   ============================================================ */

.mil-animation-frame {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    animation: jump 10s linear infinite;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.mil-animation {
    position: absolute;
    display: inline-block;
    width: 300px;
    height: 300px;
    opacity: 0.25;  /* زدنا الشفافية لتكون مرئية بشكل أوضح */
    pointer-events: none;
}

.mil-position-1 {
    top: 100px;
    right: 100px;
}
.mil-position-1 .mil-pentagon div {
    border-top: 0.1px solid rgba(0, 0, 0, 0.3);
}

.mil-position-2 {
    top: -60px;
    left: 15%;
}
.mil-position-2 .mil-pentagon div {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}
@media (max-width: 1400px) {
    .mil-position-2 { display: none; }
}

.mil-position-3 {
    bottom: -100px;
    right: 35%;
}
.mil-position-3 .mil-pentagon div {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}
@media (max-width: 1400px) {
    .mil-position-3 { display: none; }
}

/* الدوديكاهيدرون */
.mil-dodecahedron {
    position: relative;
    left: 100px;
    top: 40px;
    width: 100px;
    height: 223px;
    transform-style: preserve-3d;
    animation: rotate 100s infinite linear;
}

@keyframes rotate {
    from { transform: rotateX(0deg) rotateY(360deg) rotateZ(360deg); }
    to   { transform: rotateX(360deg) rotateY(0deg) rotateZ(-360deg); }
}

@keyframes jump {
    0%   { transform: translateY(-30px); }
    50%  { transform: translateY(30px);  }
    100% { transform: translateY(-30px); }
}

.mil-pentagon {
    position: absolute;
    width: 100px;
}
.mil-pentagon:nth-child(1)  { transform: rotateY(0.2turn) translateZ(69px) rotateX(26.5deg); }
.mil-pentagon:nth-child(6)  { bottom: 0; transform: rotateY(0.2turn) translateZ(-69px) rotateX(206.5deg); }
.mil-pentagon:nth-child(2)  { transform: rotateY(0.4turn) translateZ(69px) rotateX(26.5deg); }
.mil-pentagon:nth-child(7)  { bottom: 0; transform: rotateY(0.4turn) translateZ(-69px) rotateX(206.5deg); }
.mil-pentagon:nth-child(3)  { transform: rotateY(0.6turn) translateZ(69px) rotateX(26.5deg); }
.mil-pentagon:nth-child(8)  { bottom: 0; transform: rotateY(0.6turn) translateZ(-69px) rotateX(206.5deg); }
.mil-pentagon:nth-child(4)  { transform: rotateY(0.8turn) translateZ(69px) rotateX(26.5deg); }
.mil-pentagon:nth-child(9)  { bottom: 0; transform: rotateY(0.8turn) translateZ(-69px) rotateX(206.5deg); }
.mil-pentagon:nth-child(5)  { transform: rotateY(1turn) translateZ(69px) rotateX(26.5deg); }
.mil-pentagon:nth-child(10) { bottom: 0; transform: rotateY(1turn) translateZ(-69px) rotateX(206.5deg); }
.mil-pentagon:nth-child(11) { transform: translateZ(69px) rotateX(-90deg); }
.mil-pentagon:nth-child(12) { bottom: 0; transform: translateZ(-69px) rotateX(90deg); }

.mil-pentagon div {
    position: absolute;
    width: 100px;
    height: 69px;
    transform-origin: bottom;
}
.mil-pentagon div:nth-child(1) { transform: rotate(0.2turn); }
.mil-pentagon div:nth-child(2) { transform: rotate(0.4turn); }
.mil-pentagon div:nth-child(3) { transform: rotate(0.6turn); }
.mil-pentagon div:nth-child(4) { transform: rotate(0.8turn); }
.mil-pentagon div:nth-child(5) { transform: rotate(1turn); }

/* إخفاء العناصر الأصلية (تستخدم للاستنساخ فقط) */
.mil-hidden-elements {
    display: none;
}

/* تحسين للشاشات الصغيرة */
@media (max-width: 768px) {
    .mil-animation-frame {
        height: 60vh;
    }
    .mil-position-1 {
        right: 20px;
        top: 20px;
        transform: scale(0.6);
    }
}

/* ====== الهيدر الثابت ====== */
.mil-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 12px 28px;
    background: rgba(10, 25, 47, 0.92);
    backdrop-filter: blur(12px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
    border-bottom: 1px solid rgba(197, 160, 89, 0.15);
}

.mil-header .mil-logo-text {
    font-family: 'Tajawal', 'Amiri', 'Noto Naskh Arabic', serif;
    font-size: 1.3rem;
    color: #FAF7F1;
    font-weight: 800;
    letter-spacing: 1px;
}
.mil-header .mil-logo-text span {
    color: #C5A059;
}

.mil-header .mil-cta-sm {
    background: #C5A059;
    color: #0A192F;
    border: none;
    border-radius: 50px;
    padding: 8px 22px;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: 0.3s;
    font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
    box-shadow: 0 4px 15px rgba(197, 160, 89, 0.25);
}
.mil-header .mil-cta-sm:hover {
    background: #D4B36A;
    transform: translateY(-2px);
}

/* ====== الفوتر ====== */
.mil-footer {
    background: #0A192F;
    padding: 40px 28px 20px;
    border-top: 1px solid rgba(197, 160, 89, 0.1);
}

.mil-footer .mil-footer-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.mil-footer .mil-footer-brand {
    color: #FAF7F1;
    font-family: 'Tajawal', 'Amiri', 'Noto Naskh Arabic', serif;
    font-size: 1.2rem;
    font-weight: 800;
}
.mil-footer .mil-footer-brand span {
    color: #C5A059;
}

.mil-footer .mil-footer-links {
    display: flex;
    gap: 24px;
    color: rgba(253, 252, 240, 0.5);
    font-size: 0.8rem;
    font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
}
.mil-footer .mil-footer-links a {
    color: rgba(253, 252, 240, 0.5);
    text-decoration: none;
    transition: 0.3s;
}
.mil-footer .mil-footer-links a:hover {
    color: #C5A059;
}

.mil-footer .mil-footer-meta {
    color: rgba(253, 252, 240, 0.3);
    font-size: 0.7rem;
    text-align: center;
    width: 100%;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* تعويض ارتفاع الهيدر الثابت */
body {
    padding-top: 70px;
}

@media (max-width: 768px) {
    .mil-header {
        padding: 13px 15px;
    }
    .mil-header .mil-logo-text {
        font-size: 0.9rem;
    }
    .mil-header .mil-cta-sm {
        padding: 12px 6px;
        font-size: 0.6rem;
    }
    .mil-footer .mil-footer-inner {
        flex-direction: column;
        text-align: center;
    }
    .mil-footer .mil-footer-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* ============================================================
   مودال تقويم Google – مع إطار وحاويات متعددة لحل مشكلة القص
   ============================================================ */

:root {
    /* ====== نظام التحكم في حاوية الفيديو (للكمبيوتر) ====== */
    --video-container-width: 100%;
    --video-container-max-width: 100%;
    --video-container-height: auto;
    --video-aspect-ratio: 14 / 9;
    --video-padding: 0;
    --video-margin: 0 auto 28px;
    --video-bg: #000;
    --video-border-radius: 16px;
    --video-box-shadow: var(--sm);
    --video-scale: 1; /* التكبير على الكمبيوتر فقط */

    /* قيم التحكم في التقويم */
    --cal-clip-top: 4px;
    --cal-clip-bottom: 2px;      /* يخفي الفوتر بالكامل */
    --cal-iframe-height: 660px;    /* الارتفاع الأصلي للـ iframe (لا تغيير) */
    --cal-visible-height: calc(var(--cal-iframe-height) - var(--cal-clip-top) - var(--cal-clip-bottom)); /* حساب تلقائي */
  
    /* ====== نظام التحكم في العنوان الرئيسي (hl) ====== */
    --hl-wrapper-width: 100%;              /* عرض الحاوية */
    --hl-wrapper-max-width: 100%;        /* أقصى عرض */
    --hl-wrapper-padding: 20px 30px;      /* المسافات الداخلية */
    --hl-wrapper-margin: 0 auto;          /* الهوامش الخارجية */
    --hl-wrapper-bg: rgba(197, 160, 89, 0.05); /* خلفية الحاوية */
    --hl-wrapper-border-radius: 16px;     /* تدوير الزوايا */
    --hl-wrapper-box-shadow: none;        /* الظل (اختياري) */
    --hl-scale: 1;                        /* تكبير/تصغير النص */
    --hl-mobile-width: 90%;               /* عرض الحاوية في الموبايل */
    --hl-mobile-padding: 15px 20px;       /* مسافات الموبايل */
}

/* الحاوية الخارجية (ذات الإطار والخلفية) */
.cal-outer-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 8px auto 0;
    background: #FAF7F1;
    border-radius: 16px;
    border: 1px solid rgba(197, 160, 89, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* الحاوية الداخلية (مهمتها تطبيق القص على المحتوى فقط مع الحفاظ على الإطار) */
.cal-inner-wrapper {
    position: relative;
    width: 100%;
    height: var(--cal-visible-height);
    overflow: hidden;
    border-radius: 0;
}

/* الـ iframe نفسه */
.cal-inner-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--cal-iframe-height);
    clip-path: inset(var(--cal-clip-top) 0px var(--cal-clip-bottom) 0px);
    -webkit-clip-path: inset(var(--cal-clip-top) 0px var(--cal-clip-bottom) 0px);
    transform: translateY(calc(-1 * var(--cal-clip-top)));
    border: 0;
    background: #FAF7F1;
}

/* ضبط المودال */
.mc {
    max-width: 1000px;
    padding: 6px 10px 11px;
    background: #112240;
    border: 1px solid rgba(197, 160, 89, 0.25);
    border-radius: 16px;
    color: #FAF7F1;
    transform: translateY(20px) scale(.97);
    transition: transform .4s;
    position: relative;
    width: 100%;
}
/* ====== حاوية الفيديو الرئيسية ====== */
.vw {
    width: var(--video-container-width);
    max-width: var(--video-container-max-width);
    height: var(--video-container-height);
    padding: var(--video-padding);
    margin: var(--video-margin);
    transform: scale(var(--video-scale));
    transform-origin: center center;
    transition: transform 0.3s ease;
}

/* ====== حاوية الفيديو الداخلية ====== */
.vc {
    position: relative;
    width: 100%;
    aspect-ratio: var(--video-aspect-ratio);
    background: var(--video-bg);
    border-radius: var(--video-border-radius);
    box-shadow: var(--video-box-shadow);
    overflow: hidden;
    padding-bottom: 0 !important;
    height: auto !important;
}

/* ====== ضمان أن العناصر الداخلية تملأ الحاوية ====== */
.vc > div {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    padding-bottom: 0 !important;
    border-radius: var(--video-border-radius);
    overflow: hidden;
}

.vc > div > iframe {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    border-radius: var(--video-border-radius);
}

/* ====== حاوية العنوان الرئيسية (تحكم كامل) ====== */
.hl-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 20px 30px;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: none;
    transform: scale(1);
    transform-origin: center center;
    transition: transform 0.3s ease;
}
/* ====== العنوان نفسه (داخل الحاوية) ====== */
.hl-wrapper .hl {
    font-family: var(--fh);
    font-size: clamp(1.1rem, 4.5vw, 3.65rem);
    font-weight: 800;
    line-height: 1.3;
    color: #0A192F;
    margin: 0;
    text-align: center; /* يمكنك تغييرها إلى left أو right */
}

/* ====== تأثير الظهور التدريجي للعناصر الداخلية ====== */
.c, .nd, .pc, .bc, .stp, .stn, .ctt, .pt, .fc, .cta, .zb {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.c.visible, .nd.visible, .pc.visible, .bc.visible, 
.stp.visible, .stn.visible, .ctt.visible, .pt.visible,
.fc.visible, .cta.visible, .zb.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ====== زر العودة للأعلى (تصميم أنيق) ====== */
.back-to-top-btn {
    position: fixed;
    bottom: 30px;
    right: 10px;
    z-index: 9999;
    
    /* شكل دائري */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    
    /* خلفية بلورية شفافة */
    background: rgba(197, 160, 89, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    /* حدود خفيفة */
    border: 1px solid rgba(197, 160, 89, 0.25);
    
    /* السهم باللون الذهبي */
    color: #C5A059;
    font-size: 1.2rem;
    
    /* توسيط المحتوى */
    display: none; /* يظهر عند التمرير */
    align-items: center;
    justify-content: center;
    
    /* تأثيرات الحركة */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(197, 160, 89, 0.15);
}

.back-to-top-btn:hover {
    background: rgba(197, 160, 89, 0.25);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 20px rgba(197, 160, 89, 0.25);
    border-color: rgba(197, 160, 89, 0.5);
}

/* عند الضغط (للتفاعل) */
.back-to-top-btn:active {
    transform: scale(0.92);
}
/* ====== إعدادات الكمبيوتر ====== */
@media (min-width: 992px) {
    /* زر العودة للأعلى */
    .back-to-top-btn {
        bottom: 104px !important;
        right: 95px !important;
    }

    /* ====== توسيع عرض العنوان ====== */
    .hl-wrapper {
        width: 100% !important;           /* يأخذ العرض الكامل */
        max-width: 100% !important;       /* يلغي أي حد أقصى */
        padding: 20px 20px !important;    /* مسافة جانبية بسيطة */
        margin: 0 auto !important;
    }

    .hl-wrapper .hl {
        line-height: 1 !important;
        font-size: clamp(2.2rem, 5.5vw, 4.2rem) !important; /* تكبير النص قليلاً */
        text-align: center !important;
        white-space: normal !important;   /* يسمح بالالتفاف عند الحاجة */
        word-break: keep-all !important;  /* يمنع كسر الكلمات */
    }
  @media (min-width: 992px) {
    .sc {
        max-width: 1200px !important;
    }

    .hl-wrapper .hl {
        line-height: 1 !important;
        
        /* ====== التحكم بحجم الخط على الكمبيوتر فقط ====== */
        font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
        /* 
            - 2.5rem = أصغر حجم على الكمبيوتر (عند عرض 992px)
            - 5vw = يتغير مع عرض الشاشة ديناميكياً
            - 4.5rem = أكبر حجم (عند عرض كبير جداً) 
        */
    }
}
}