/* National Day 96 — Forsati skin. Targets the existing فرصي markup only (.hero-area-wrapper, main.main-content section, footer.footer-area). Remove the two lines to end the event. */ @font-face{font-family:"Saudi";font-weight:300 400;font-display:swap;src:local("Saudi"),local("SaudiWeb-Regular"),url(fonts/SaudiWeb-Regular.woff2) format("woff2")} @font-face{font-family:"Saudi";font-weight:600 700;font-display:swap;src:local("Saudi Bold"),local("SaudiWeb-Bold"),url(fonts/SaudiWeb-Bold.woff2) format("woff2")} @keyframes nd96-caret{50%{opacity:0}} body{overflow-x:clip} /* ── Hero ─────────────────────────────────────────────── */ .hero-area-wrapper.nd96{ --nd96-from:#211501;--nd96-to:#7c5d21;--nd96-word:#d8b67a; --nd96-angle:270deg; --nd96-card:491px;--nd96-strip:40px;--nd96-n:6; --nd96-deck-w:calc(var(--nd96-card) + (var(--nd96-n) - 1) * var(--nd96-strip)); --nd96-motion:.6s ease; background-image:linear-gradient(var(--nd96-angle),var(--nd96-from),var(--nd96-to)); background-color:#211501; } .hero-area-wrapper.nd96.nd96-heritage{--nd96-from:#01572b;--nd96-to:#5aba1c;--nd96-word:#ebffe6} .hero-area-wrapper.nd96.nd96-courage{--nd96-from:#1b2613;--nd96-to:#607c4f;--nd96-word:#c9e0bb} .hero-area-wrapper.nd96.nd96-ambition{--nd96-from:#340117;--nd96-to:#971a4d;--nd96-word:#ff85c7} .hero-area-wrapper.nd96.nd96-generosity{--nd96-from:#312d6e;--nd96-to:#6565e0;--nd96-word:#ded8f7} .hero-area-wrapper.nd96.nd96-kindness{--nd96-from:#011d3a;--nd96-to:#0050af;--nd96-word:#07b9ff} .hero-area-wrapper.nd96.nd96-vision{--nd96-from:#211501;--nd96-to:#7c5d21;--nd96-word:#d8b67a} /* outgoing gradient, faded out by the script on each change */ .hero-area-wrapper.nd96::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--nd96-angle),var(--nd96-prev-from,transparent),var(--nd96-prev-to,transparent));opacity:0;pointer-events:none;z-index:0} /* campaign pattern */ .hero-area-wrapper.nd96::after{content:"";position:absolute;inset:0;background:url(nd96_pattern.svg) repeat;opacity:.4;pointer-events:none;z-index:0} /* contrast scrim under the text column, over the gradient + pattern */ .hero-area-wrapper.nd96 .right-section-hero::before{content:"";position:absolute;inset:-64px calc(50% - 50vw);background:linear-gradient(var(--nd96-angle),rgba(0,0,0,.5),rgba(0,0,0,.22) 45%,transparent 70%);z-index:-1;pointer-events:none} .hero-area-wrapper.nd96 .nd96-eyebrow{display:block;color:#fff;font-size:16px;line-height:24px;font-weight:500;margin-bottom:12px} .hero-area-wrapper.nd96 div h1{ font-family:"Saudi","IBM Plex Sans Arabic",sans-serif;font-weight:700; font-size:clamp(40px,4.6vw,72px);line-height:1.15;margin-bottom:16px !important;max-width:none; } .hero-area-wrapper.nd96 .nd96-typed{color:var(--nd96-word);transition:color var(--nd96-motion)} .hero-area-wrapper.nd96 .nd96-typed::after{content:"";display:inline-block;width:2px;height:.9em;margin-inline-start:.1em;vertical-align:-.1em;background:currentColor;animation:nd96-caret 1s steps(1) infinite} .hero-area-wrapper.nd96 div h6{max-width:640px} .hero-area-wrapper.nd96 .nd96-short{display:none} /* nav row: arrows + dots */ .nd96-nav{display:flex;align-items:center;gap:12px;margin-top:24px} .nd96-arrow{width:40px;height:40px;border-radius:4px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.15);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:background var(--nd96-motion)} .nd96-arrow:hover{background:rgba(255,255,255,.25)} .nd96-arrow:focus-visible{outline:2px solid #fff;outline-offset:2px} .nd96-dots{display:flex;gap:8px;padding:0 4px} .nd96-dot{width:12px;height:12px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.6);cursor:pointer;transition:background var(--nd96-motion),transform var(--nd96-motion)} .nd96-dot[aria-selected="true"]{background:#fff;transform:scale(1.2)} .nd96-dot:focus-visible{outline:2px solid #fff;outline-offset:2px} /* deck of six cards */ .nd96-deck{position:absolute;z-index:1;touch-action:pan-y;user-select:none;-webkit-user-select:none} .nd96-card{position:absolute;padding:0;border:0;background:none;overflow:hidden;cursor:pointer;z-index:calc(20 - var(--rel,1));transition:transform var(--nd96-motion),opacity var(--nd96-motion)} .nd96-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--nd96-motion);-webkit-user-drag:none;pointer-events:none} .nd96-card:focus-visible{outline:2px solid #fff;outline-offset:-4px} @media (min-width:992px){ .hero-area-wrapper.nd96{--nd96-card:340px;--nd96-dir:-1;max-height:none;height:auto;min-height:560px} .hero-area-wrapper.nd96 .right-section-hero>[class*="col-"]{width:100%;max-width:100%;padding-left:calc(var(--nd96-deck-w) + 32px)} .nd96-deck{inset-block:0;left:0;width:var(--nd96-deck-w)} .nd96-card{top:calc((100% - var(--nd96-card)) / 2);inset-inline-start:0;width:var(--nd96-card);height:var(--nd96-card);transform:translateX(calc(var(--drag,0px) + var(--nd96-dir) * var(--rel,1) * var(--nd96-strip)))} .nd96-card.is-active{transform:translateX(var(--drag,0px));cursor:default;transition:transform var(--nd96-motion),z-index 0s .6s} .nd96-card img{transform:translateX(calc(var(--nd96-dir) * (var(--nd96-card) - var(--nd96-strip))))} .nd96-card.is-active img{transform:none} } @media (min-width:1200px){.hero-area-wrapper.nd96{--nd96-card:400px;min-height:620px}} @media (min-width:1400px){.hero-area-wrapper.nd96{--nd96-card:491px;min-height:680px}} @media (max-width:991.98px){ .hero-area-wrapper.nd96{--nd96-angle:0deg;height:auto;max-height:none;min-height:0;flex-direction:column;padding:32px 0 40px;gap:24px} .hero-area-wrapper.nd96 .right-section-hero{min-height:0;text-align:center} .hero-area-wrapper.nd96 .right-section-hero::before{inset:auto calc(50% - 50vw) -40px;height:80%;background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.22) 60%,transparent)} .hero-area-wrapper.nd96 div h1,.hero-area-wrapper.nd96 div h6{text-align:center} .hero-area-wrapper.nd96 div h6{margin-inline:auto} .hero-area-wrapper.nd96 .nd96-body{display:none} .hero-area-wrapper.nd96 .nd96-short{display:block} .nd96-nav{justify-content:center} .nd96-deck{position:relative;order:-1;width:100%;max-width:651px;margin-inline:auto;aspect-ratio:430/324} .nd96-card{top:0;height:100%;width:75.35%;inset-inline-start:12.33%;opacity:0;z-index:1;transform:translateX(calc(var(--drag,0px) + var(--nd96-dir,-1) * var(--srel,1) * 91.8%)) scale(.73)} .nd96-card.is-near{opacity:1} .nd96-card.is-active{opacity:1;z-index:2;transform:translateX(var(--drag,0px))} } .nd96-deck.is-dragging .nd96-card{transition:none} /* ── Section chrome ───────────────────────────────────── */ main.main-content section.nd96-section::after{content:"";position:absolute;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);height:24px;background:url(section_bar1.svg) repeat-x bottom center;background-size:auto 24px;pointer-events:none;z-index:0} main.main-content section.nd96-bar-2::after{background-image:url(section_bar2.svg)} main.main-content section.nd96-bar-3::after{background-image:url(section_bar3.svg)} main.main-content section.nd96-vector::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);min-width:1280px;background:url(section_vector.svg) no-repeat bottom left;background-size:contain;opacity:.55;pointer-events:none;z-index:0} main.main-content section.nd96-vector::after{content:none} main.main-content section.nd96-section>*{position:relative;z-index:1} /* ── Footer ───────────────────────────────────────────── */ footer.footer-area.nd96-footer{background-color:#074D31;background-image:url(footer_bar.svg);background-repeat:repeat-x;background-position:bottom center;background-size:auto 80px;padding-bottom:80px} .nd96-footer-logo{height:40px;width:auto} html[data-theme="dark"] footer.footer-area.nd96-footer{background-color:#063f28} /* ── Header items (language + theme) ──────────────────── */ .header-align-last .header-navigation-area ul.main-menu{flex-wrap:nowrap;align-items:center} .nd96-hdr-item>a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .nd96-hdr-item i{font-size:20px;line-height:1} .nd96-icon-lang{display:inline-block;width:20px;height:20px;background-color:currentColor;-webkit-mask:var(--nd96-lang-icon) no-repeat center/contain;mask:var(--nd96-lang-icon) no-repeat center/contain} :root{--nd96-lang-icon:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 5.96552H8.15M12 5.96552H10.25M8.15 5.96552H10.25M8.15 5.96552V5M10.25 5.96552C9.88076 7.28593 9.10754 8.53411 8.225 9.63103M5.975 12C6.68843 11.344 7.4942 10.5394 8.225 9.63103M8.225 9.63103C7.775 9.10345 7.145 8.24984 6.965 7.86364M8.225 9.63103L9.575 11.0345' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='M7.02231 16.9777C7.07674 18.6978 7.26397 19.7529 7.90796 20.5376C8.07418 20.7401 8.25989 20.9258 8.46243 21.092C9.56878 22 11.2125 22 14.5 22C17.7875 22 19.4312 22 20.5376 21.092C20.7401 20.9258 20.9258 20.7401 21.092 20.5376C22 19.4312 22 17.7875 22 14.5C22 11.2125 22 9.56878 21.092 8.46243C20.9258 8.25989 20.7401 8.07418 20.5376 7.90796C19.7563 7.26676 18.707 7.07837 17 7.02303M7.02231 16.9777C5.30217 16.9233 4.24713 16.736 3.46243 16.092C3.25989 15.9258 3.07418 15.7401 2.90796 15.5376C2 14.4312 2 12.7875 2 9.5C2 6.21252 2 4.56878 2.90796 3.46243C3.07418 3.25989 3.25989 3.07418 3.46243 2.90796C4.56878 2 6.21252 2 9.5 2C12.7875 2 14.4312 2 15.5376 2.90796C15.7401 3.07418 15.9258 3.25989 16.092 3.46243C16.736 4.24713 16.9233 5.30217 16.9777 7.02231C16.9777 7.02231 16.9777 7.02231 17 7.02303M7.02231 16.9777L17 7.02303' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M13 19L13.8333 17M18 19L17.1667 17M13.8333 17L15.5 13L17.1667 17M13.8333 17H17.1667' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E")} .nd96-theme-label--hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ── Dark mode (html[data-theme="dark"]) ──────────────── */ html[data-theme="dark"]{color-scheme:dark} html[data-theme="dark"] body{background:#0c111b !important;color:#d2d6db} html[data-theme="dark"] .digital-stamp-card{background:#111927 !important} html[data-theme="dark"] .digital-stamp-card h6,html[data-theme="dark"] .digital-stamp-card p{color:#f3f4f6 !important} html[data-theme="dark"] .digital-stamp-body .box,html[data-theme="dark"] .digital-stamp-body .stamp-link-box{background:#161b26 !important;border-color:#384250 !important} html[data-theme="dark"] .digital-stamp-body .img-border-rounded{background:#1f2a37 !important} html[data-theme="dark"] .header-area,html[data-theme="dark"] .header-area.header-area-shadow{background-color:#161b26} html[data-theme="dark"] .header-area.transparent{background-color:transparent} html[data-theme="dark"] .header-area .main-menu>li>a,html[data-theme="dark"] .header-area .main-menu>li>a span,html[data-theme="dark"] .header-area .main-menu>li>a i,html[data-theme="dark"] .header-area .main-menu>li>a svg{color:#f9fafb !important} html[data-theme="dark"] .header-area .main-menu>li>a:hover,html[data-theme="dark"] .header-area .main-menu>li>a:hover span{color:#7ad19f !important} html[data-theme="dark"] .submenu-nav{background-color:#1f2a37 !important;border-color:#384250} html[data-theme="dark"] .submenu-nav li a{color:#e5e7eb !important} html[data-theme="dark"] .submenu-nav li a:hover{color:#7ad19f !important} html[data-theme="dark"] .btn-menu i{color:#f3f4f6} html[data-theme="dark"] .off-canvas-wrapper,html[data-theme="dark"] .offcanvas{background-color:#161b26;color:#f3f4f6} html[data-theme="dark"] .mobile-menu-items a,html[data-theme="dark"] .mobile-menu-items span{color:#f3f4f6 !important} html[data-theme="dark"] .offcanvas-header-logo{filter:brightness(0) invert(1)} html[data-theme="dark"] .btn-menu-close i{color:#f3f4f6} html[data-theme="dark"] .section-title .title,html[data-theme="dark"] main h3,html[data-theme="dark"] main h5,html[data-theme="dark"] main h6{color:#f3f4f6 !important} /* the degree / city chip keeps its own tinted surface */ html[data-theme="dark"] .card-jobs b,html[data-theme="dark"] .card-training b{background:#1f2a37 !important;border-color:#384250 !important;color:#e5e7eb !important} html[data-theme="dark"] .arrow-link i{background-color:#1f2a37 !important;color:#7ad19f !important} html[data-theme="dark"] .arrow-link i:hover{background-color:#2d3541 !important;color:#fff !important} html[data-theme="dark"] main p,html[data-theme="dark"] .desc p,html[data-theme="dark"] .post-details-content p{color:#d2d6db !important} html[data-theme="dark"] .news-item,html[data-theme="dark"] .card-guide-file,html[data-theme="dark"] .card-jobs,html[data-theme="dark"] .card-training,html[data-theme="dark"] .team-item,html[data-theme="dark"] .funfact-item,html[data-theme="dark"] .contact-aside{background:#161b26 !important;background-color:#161b26 !important;border-color:#384250 !important} html[data-theme="dark"] .news-item-content,html[data-theme="dark"] .news-item .date,html[data-theme="dark"] .card-guide-file span{color:#f3f4f6 !important} html[data-theme="dark"] .counter-icon-div,html[data-theme="dark"] .card-guide-file>div,html[data-theme="dark"] .team-item .thumb{background-color:rgba(27,131,84,.2) !important;color:#7ad19f !important} html[data-theme="dark"] .counter-number,html[data-theme="dark"] .counter-number span{color:#7ad19f !important} html[data-theme="dark"] .counter-title{color:#e5e7eb !important} html[data-theme="dark"] .team-item .title a{color:#f3f4f6 !important} html[data-theme="dark"] .arrow-link a,html[data-theme="dark"] .arrow-link i{color:#7ad19f !important} html[data-theme="dark"] .news-blank-link{background-color:#1f2a37 !important;color:#f3f4f6 !important;outline-color:#384250 !important} html[data-theme="dark"] .news-blank-link:hover{background:#2d3541 !important;color:#fff !important} html[data-theme="dark"] .brand-logo-item{background:transparent} html[data-theme="dark"] .brand-logo-item img{filter:brightness(0) invert(1);opacity:.85} html[data-theme="dark"] .brand-swiper-btn-prev i,html[data-theme="dark"] .brand-swiper-btn-next i{color:#f3f4f6} html[data-theme="dark"] .importent-links a{color:#7ad19f !important} html[data-theme="dark"] .owl-theme .owl-dots .owl-dot span{background:#384250 !important} html[data-theme="dark"] .owl-theme .owl-dots .owl-dot.active span{background:#7ad19f !important} html[data-theme="dark"] .cookie-box{background:#161b26 !important;color:#f3f4f6} html[data-theme="dark"] .cookie-box h2,html[data-theme="dark"] .cookie-box p{color:#f3f4f6 !important} html[data-theme="dark"] .scroll-to-top{background-color:#1f2a37;color:#f3f4f6} html[data-theme="dark"] main.main-content section.nd96-section::after{filter:brightness(.7)} html[data-theme="dark"] main.main-content section.nd96-vector::before{filter:invert(1);opacity:.3} /* ── English (html[dir="ltr"]) ────────────────────────── */ html[dir="ltr"] body{direction:ltr} /* the markup pins dir="rtl" on several sections/rows — release them in English */ html[dir="ltr"] [dir="rtl"]{direction:ltr !important} html[dir="ltr"] .funfact-area,html[dir="ltr"] .breadcrumb,html[dir="ltr"] .importent-links,html[dir="ltr"] .footer-main,html[dir="ltr"] .footer-bottom,html[dir="ltr"] .header-area.transparent,html[dir="ltr"] .stamp-ar,html[dir="ltr"] .off-canvas-wrapper{direction:ltr} html[dir="ltr"] .section-title .title,html[dir="ltr"] .footer-link-title,html[dir="ltr"] .copyright,html[dir="ltr"] .counter-title,html[dir="ltr"] .footer-link-content li a,html[dir="ltr"] .desc p{text-align:left} .hero-area-wrapper.nd96[dir="ltr"]{--nd96-angle:90deg;--nd96-dir:1;direction:ltr} .hero-area-wrapper.nd96[dir="ltr"] div h1,.hero-area-wrapper.nd96[dir="ltr"] div h6{text-align:left} .hero-area-wrapper.nd96[dir="ltr"] .nd96-arrow i{transform:scaleX(-1)} html[dir="ltr"] .digital-stamp-card .digital-stamp-header,html[dir="ltr"] .digital-stamp-body .box,html[dir="ltr"] .digital-stamp-body .stamp-link-box{direction:ltr;text-align:left} html[dir="ltr"] .arrow-link i,html[dir="ltr"] .news-link-btn i{transform:scaleX(-1)} html[dir="ltr"] .footer-logo-custom{text-align:right} @media (min-width:992px){ .hero-area-wrapper.nd96[dir="ltr"] .right-section-hero>[class*="col-"]{padding-left:var(--bs-gutter-x,.75rem);padding-right:calc(var(--nd96-deck-w) + 32px)} .hero-area-wrapper.nd96[dir="ltr"] .nd96-deck{left:auto;right:0} } @media (prefers-reduced-motion:reduce){ .hero-area-wrapper.nd96 .nd96-typed::after{animation:none} .nd96-card,.nd96-card img,.nd96-dot,.nd96-arrow{transition:none} }