/* style.css — base styles, shared components, and page-specific rules (deduplicated) */ :root{ --dark-green:#1b4332; --green-800:#2d6a4f; --green-700:#429670; --green-600:#49a379; --green-500:#52b788; --text-dark:#1a2e1a; --text-muted:#5a7a5a; --text-muted-2:#9bae9b; --border-light:#e8ede6; --bg-light:#f5f8f5; } *{ box-sizing:border-box; margin:0; padding:0; } /* RTL punctuation fix (site-wide): The page's base direction is LTR (no dir="rtl" on /), while layout (flex order, margins, etc.) was hand-built assuming that LTR base — so we deliberately do NOT flip `direction` globally, that would reorder nav links, footer columns, form rows, etc. The punctuation bug is a text-bidi issue, not a layout issue: with an LTR paragraph base, trailing neutrals (. , : ؛ …) at the end of an Arabic sentence resolve against the LTR edge and land on the wrong side. `unicode-bidi: plaintext` makes every text-bearing element resolve its own paragraph direction from its first strong character (Arabic → RTL), which fixes punctuation placement without touching `direction` — so flex ordering and the existing manual `direction: ltr/rtl` overrides (e.g. the stat cards) are completely unaffected. Zero-specificity :where() so it never fights any existing rule. */ :where(body, body *){ unicode-bidi: plaintext; } html{ scroll-behavior:smooth; overflow-x:hidden; } body{ font-family:'Cairo', sans-serif; color:var(--text-dark); background:#fff; overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } img{ display:block; max-width:100%; } a{ text-decoration:none; color:inherit; } button{ font-family:inherit; border:none; cursor:pointer; background:none; } ul{ list-style:none; } .wrap{ max-width:1280px; margin:0 auto; padding:0 24px; } .preloader{ position:fixed; inset:0; z-index:9999; background:var(--dark-green); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; transition:opacity .5s cubic-bezier(.4,0,.2,1), visibility .5s cubic-bezier(.4,0,.2,1); } .preloader__ring-wrap{ position:relative; width:96px; height:96px; display:flex; align-items:center; justify-content:center; } .preloader__ring{ position:absolute; inset:0; border-radius:50%; border:2px solid rgba(255,255,255,0.15); border-top-color:var(--green-500); animation:preloaderSpin 1s linear infinite; transition:opacity .3s ease; } .preloader__logo{ position:relative; z-index:1; width:64px; height:64px; border-radius:50%; transition:transform .3s cubic-bezier(.4,0,.2,1); } .preloader__name{ color:#fff; font-weight:600; font-size:16px; letter-spacing:.3px; opacity:0; animation:preloaderNameIn .6s cubic-bezier(.16,1,.3,1) forwards; animation-delay:.35s; transition:opacity .3s ease; } .preloader.is-leaving .preloader__logo{ transform:scale(0.95); } .preloader.is-leaving .preloader__ring{ opacity:0; } .preloader.is-leaving .preloader__name{ opacity:0; transition:opacity .3s ease; animation:none; } .preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; } .hero{ position:relative; min-height: 100vh; background:#1b4332; overflow:hidden; display:flex; flex-direction:column; } .hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .hero__overlay-1{ position:absolute; inset:0; background:linear-gradient(to left, rgba(27,67,50,0.8) 0%, rgba(27,67,50,0.5) 50%, rgba(0,0,0,0) 100%); } .hero__overlay-2{ position:absolute; inset:0; background:linear-gradient(to top, rgba(27,67,50,0.6) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%); } .leaves{ position:absolute; inset:0; overflow:hidden; pointer-events:none; } .leaves span{ position:absolute; font-family:'Cairo', sans-serif; color:rgba(45,106,79,0.05); user-select:none; } .leaves .lf1{ left:200px; top:82px; font-size:40px; transform:rotate(7.85deg); opacity:.76; color:rgba(82,183,136,0.14); } .leaves .lf2{ left:675px; top:405px; font-size:60px; transform:rotate(7.54deg); opacity:.75; color:rgba(82,183,136,0.12); } .leaves .lf3{ left:1193px; top:828px; font-size:60px; transform:rotate(4.19deg); opacity:.68; color:rgba(82,183,136,0.12); } .leaves .lf4{ left:842px; top:695px; font-size:70px; transform:rotate(0.68deg); opacity:.61; color:rgba(82,183,136,0.10); } .leaves .lf5{ left:128px; top:861px; font-size:80px; transform:rotate(7.59deg); opacity:.75; color:rgba(82,183,136,0.10); } .leaves .lf6{ left:708px; top:185px; font-size:26px; transform:rotate(9.97deg); color:#2d6a4f; opacity:.80; } .leaves .lf7{ left:419px; top:412px; font-size:30px; transform:rotate(7.28deg); color:#2d6a4f; opacity:.75; } .leaves .lf8{ left:131px; top:650px; font-size:34px; transform:rotate(1.18deg); color:#2d6a4f; opacity:.62; } .leaves .lf9{ left:1000px; top:634px; font-size:22px; transform:rotate(6.04deg); color:#2d6a4f; opacity:.72; } .leaves .lf10{ left:1291px; top:434px; font-size:18px; transform:rotate(0.52deg); color:#2d6a4f; opacity:.61; } .leaves .lf11{ left:882px; top:214px; font-size:14px; color:#2d6a4f; opacity:.7; } .leaves .lf12{ left:520px; top:750px; font-size:20px; transform:rotate(3.2deg); color:#52b788; opacity:.55; } .leaves .lf3, .leaves .lf5, .leaves .lf9, .leaves .lf12{ filter:blur(1px); } .leaves .lf4{ filter:blur(1.5px); } .leaves span{ animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; will-change: transform; } .nav { position: relative; z-index: 1000; width: 100%; padding-top: 28px; } .nav__row{ max-width:1280px; margin:0 auto; padding:0 24px; height:96px; display:flex; align-items:center; justify-content:space-between; } .nav__cta{ background:var(--green-800); color:#fff; font-weight:600; font-size:14px; padding:10px 20px; border-radius:12px; white-space:nowrap; } .nav__links{ display:flex; align-items:center; gap:4px; } .nav__links a{ display:flex; align-items:center; gap:4px; padding:8px 16px; border-radius:8px; color:#fff; font-weight:500; font-size:16px; white-space:nowrap; } .nav__links a.is-active{ background:rgba(45,106,79,0.1); } .nav__links a .chev{ width:12px; height:12px; } /* ============ NAVIGATION DROPDOWNS (UNIFIED & INTERACTION-OPTIMIZED) ============ */ .nav-dropdown { position: relative; display: inline-block; } .nav-dropdown__trigger { display: flex; align-items: center; gap: 4px; padding: 8px 16px; border-radius: 8px; font-family: inherit; font-weight: 500; font-size: 16px; color: inherit; background: none; border: none; cursor: pointer; transition: all 0.25s ease; white-space: nowrap; } .nav-dropdown__trigger .chev { width: 12px; height: 12px; transition: transform 0.2s ease; } .nav-dropdown:hover .nav-dropdown__trigger .chev, .nav-dropdown.is-open .nav-dropdown__trigger .chev { transform: rotate(180deg); } .nav-dropdown:hover .nav-dropdown__trigger, .nav-dropdown.is-active .nav-dropdown__trigger, .nav-dropdown.is-open .nav-dropdown__trigger { background: rgba(45, 106, 79, 0.1); } .nav__links .nav-dropdown__trigger { color: #fff; font-size: 16px; } /* --- Dropdown Menu Container & Invisible Hover Bridge --- */ .nav-dropdown__menu { position: absolute; top: 100%; right: 0; padding-top: 14px; min-width: 260px; z-index: 900; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s cubic-bezier(0.16, 1, 0.3, 1); } /* Invisible pseudo-element bridge extending upwards so mouse never loses hover */ .nav-dropdown__menu::before { content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 32px; background: transparent; z-index: 1; } /* Active/Open State: STRICTLY visible and higher z-index to avoid neighbor overlap */ .nav-dropdown:hover .nav-dropdown__menu, .nav-dropdown.is-open .nav-dropdown__menu, .nav-dropdown__menu:hover { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); z-index: 1050; } .nav-dropdown__menu-inner { direction: rtl; text-align: right; background: #fff; border-radius: 16px; box-shadow: 0 20px 40px rgba(45, 106, 79, 0.18), 0 2px 8px rgba(45, 106, 79, 0.08); padding: 8px; display: flex; flex-direction: column; gap: 10px; } .nav-dropdown__menu a, .nav-dropdown__item { direction: rtl; text-align: right; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 10px 16px; border-radius: 10px; color: var(--text-dark); font-weight: 500; font-size: 14px !important; white-space: nowrap; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } /* Standardized Circular Green Bullet Dot on RIGHT side in RTL */ .nav-dropdown__menu a::before, .nav-dropdown__item::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--green-500); border-radius: 50%; flex-shrink: 0; } .nav-dropdown__menu a:hover, .nav-dropdown__item:hover { background: var(--bg-light); color: var(--green-800); } .nav__brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; } .nav__brand img{ width:40px; height:40px; border-radius:50%; flex-shrink:0; } .nav__brand-text{ text-align:right; } .nav__brand-text p{ margin:0; color:#fff; } .nav__brand-name{ font-weight:600; font-size:16px; } .nav__brand-tag{ font-weight:400; font-size:12px; } .sticky-header{ position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(27,67,50,0.55); backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); box-shadow:0 8px 30px rgba(0,0,0,0.12); opacity:0; transform:translateY(-100%); pointer-events:none; transition:opacity .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1), background .3s ease; } .sticky-header.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; } .sticky-header__row{ max-width:1280px; margin:0 auto; padding:0 24px; height:72px; display:flex; align-items:center; justify-content:space-between; transition:height .3s cubic-bezier(.4,0,.2,1); } .sticky-header__cta{ background:var(--green-500); color:#fff; font-weight:600; font-size:13px; padding:9px 18px; border-radius:11px; white-space:nowrap; } .sticky-header__links{ display:flex; align-items:center; gap:4px; } .sticky-header__links > a, .sticky-header__links > .mnav-nav-scroll > a{ display:flex; align-items:center; gap:4px; padding:7px 14px; border-radius:8px; color:#fff; font-weight:500; font-size:15px; white-space:nowrap; } .sticky-header__links > a.is-active, .sticky-header__links > .mnav-nav-scroll > a.is-active{ background:rgba(255,255,255,0.15); } .sticky-header__links .nav-dropdown__trigger{ color:#fff; font-size:15px; padding:7px 14px; white-space:nowrap; } .sticky-header__links .nav-dropdown.is-active .nav-dropdown__trigger{ background:rgba(255,255,255,0.15); } .sticky-header__brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; } .sticky-header__brand img{ width:34px; height:34px; border-radius:50%; flex-shrink:0; } .sticky-header__brand-text{ text-align:right; } .sticky-header__brand-text p{ margin:0; color:#fff; } .sticky-header__brand-name{ font-weight:600; font-size:14px; } .sticky-header__brand-tag{ font-weight:400; font-size:11px; color:rgba(255,255,255,0.75); } .hero__content{ position:relative; z-index:5; flex:1; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; max-width:1280px; width:100%; margin:0 auto; padding:0 24px; padding-top:104px; } .hero__inner{ max-width:672px; width:100%; display:flex; flex-direction:column; align-items:flex-end; } .hero__badge{ display:inline-flex; align-items:center; gap:8px; background:rgba(82,183,136,0.2); border:1.25px solid rgba(82,183,136,0.3); border-radius:9999px; padding:9px 17px; margin-bottom:0; } .hero__badge-dot{ width:6px; height:6px; border-radius:50%; background:var(--green-500); opacity:.59; } .hero__badge span{ color:var(--green-500); font-size:12px; font-weight:500; } .hero__title{ font-weight:900; font-size:72px; line-height:90px; color:#fff; text-align:right; margin-top:12px; } .hero__title-line{ display:block; } .hero__title .accent{ color:var(--green-500); display:block; } .hero__desc{ max-width:576px; color:rgba(255,255,255,0.8); font-size:18px; line-height:29.25px; text-align:right; padding-top:40px; } .hero__actions{ display:flex; align-items:center; gap:16px; padding-top:40px; } .hero__link{ display:flex; align-items:center; gap:8px; color:rgba(255,255,255,0.9); font-weight:500; font-size:16px; } .hero__link img{ width:12px; height:12px; transform:rotate(0deg); display: block; margin-top: 2px; } .hero__btn{ background:var(--green-800); color:#fff; font-weight:700; font-size:16px; padding:10px 20px; border-radius:16px; transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1), background .25s ease; } .hero__btn:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,0.25); background:var(--green-700); } .hero__link{ transition:transform .25s cubic-bezier(.4,0,.2,1), color .25s ease; } .hero__link:hover{ transform:translateY(-2px); color:#fff; } .hero__badge, .hero__title-line, .hero__desc, .hero__actions > *{ opacity:0; } .scroll-indicator{ position:relative; z-index:5; display:flex; flex-direction:column; align-items:center; gap:8px; margin:0 auto 40px; opacity:0; } .scroll-indicator span{ color:rgba(255,255,255,0.5); font-size:12px; } .scroll-indicator .line{ width:1px; height:48px; background:linear-gradient(to bottom, rgba(255,255,255,0.4), rgba(0,0,0,0)); } .stats{ background:#fff; border-bottom:1.25px solid var(--border-light); padding:64px 0; } .stats__grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:32px; text-align:center; } .stats__num{ font-weight:900; font-size:36px; color:var(--green-800); line-height:40px; } .stats__label{ font-weight:500; font-size:14px; color:var(--text-muted); margin-top:4px; } .section{ padding:96px 0; } .section--alt{ background:var(--bg-light); } .section--dark{ background:var(--dark-green); } .section-eyebrow{ text-align:center; color:var(--green-500); font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; } .section-title{ text-align:center; font-weight:900; font-size:48px; color:var(--text-dark); margin-top:12px; line-height:48px; } .section-title--white{ color:#fff; } .section-sub{ max-width:576px; margin:16px auto 0; text-align:center; color:var(--text-muted); font-size:18px; line-height:28px; } .section-sub--white{ color:rgba(255,255,255,0.6); margin-top:24px; } .services-grid{ position:relative; display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; margin-top:64px; perspective:1600px; } .services-grid__final-sweep{ position:absolute; top:0; bottom:0; left:-30%; width:30%; background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.32) 45%, rgba(82,183,136,0.16) 58%, transparent 100%); opacity:0; pointer-events:none; z-index:5; mix-blend-mode:soft-light; } .service-card{ position:relative; overflow:hidden; background:#fff; border:1.25px solid var(--border-light); border-radius:24px; padding:33px; text-align:right; transform-style:preserve-3d; opacity:0; box-shadow: 0 1px 2px rgba(45,106,79,0.05), 0 8px 16px rgba(45,106,79,0.05), 0 20px 30px rgba(45,106,79,0.06); transition: border-color .6s cubic-bezier(.22,1,.36,1); will-change:transform, opacity, filter, box-shadow; } #services.is-in-view .services-grid .service-card:nth-child(1){ z-index:4; } #services.is-in-view .services-grid .service-card:nth-child(2){ z-index:3; } #services.is-in-view .services-grid .service-card:nth-child(3){ z-index:2; } #services.is-in-view .services-grid .service-card:nth-child(4){ z-index:1; } .services-grid .service-card.is-hovered{ border-color:rgba(82,183,136,0.5); } .services-grid.has-hover .service-card:not(.is-hovered){ opacity:.9; } .service-card__spotlight-var{ --mx:50%; --my:40%; } .service-card::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle 260px at var(--mx,50%) var(--my,40%), rgba(82,183,136,0.14), transparent 70%); opacity:0; transition:opacity .45s ease; pointer-events:none; z-index:0; } .service-card.is-hovered::before{ opacity:1; } .service-card__shine{ position:absolute; top:-60%; left:-60%; width:220%; height:220%; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 60%); mix-blend-mode:soft-light; opacity:0; transform:translate(-50%,-50%) scale(.6); pointer-events:none; z-index:0; transition:opacity .5s ease; } .service-card.is-hovered .service-card__shine{ opacity:.9; } .service-card__glow-ring{ position:absolute; inset:0; border-radius:inherit; padding:1.25px; background:conic-gradient(from var(--glow-angle,0deg), rgba(82,183,136,0) 0%, rgba(82,183,136,.85) 10%, rgba(82,183,136,0) 24%); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; pointer-events:none; z-index:0; transition:opacity .4s ease; } .service-card.is-hovered .service-card__glow-ring{ opacity:1; animation:glowRotate 3.2s linear infinite; } .service-card__emoji, .service-card__title, .service-card__desc, .service-card__more{ position:relative; z-index:1; transform:translateZ(20px); } .service-card__ripple{ position:absolute; width:12px; height:12px; margin-left:-6px; margin-top:-6px; border-radius:50%; background:radial-gradient(circle, rgba(82,183,136,0.35), rgba(82,183,136,0) 70%); pointer-events:none; z-index:2; } #services .section-eyebrow, #services .section-title, #services .section-sub{ opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); } #services.is-in-view .section-eyebrow{ opacity:1; transform:translateY(0); } #services.is-in-view .section-title{ opacity:1; transform:translateY(0); transition-delay:.12s; } #services.is-in-view .section-sub{ opacity:1; transform:translateY(0); transition-delay:.24s; } .service-card__emoji{ font-size:36px; line-height:40px; display:inline-block; transform-origin:50% 50%; opacity:0; } .service-card__title{ font-weight:700; font-size:20px; margin-top:20px; opacity:0; transition:transform .4s cubic-bezier(.22,1,.36,1); } .service-card__desc{ color:var(--text-muted); font-size:14px; line-height:22.75px; margin-top:12px; opacity:0; transition:color .35s ease, transform .4s cubic-bezier(.22,1,.36,1); } .service-card.is-hovered .service-card__title{ transform:translateY(-3px) translateZ(20px); } .service-card.is-hovered .service-card__desc{ color:var(--text-dark); transform:translateY(-1px) translateZ(20px); } .service-card__more{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:20px; opacity:0; } .service-card__more span{ position:relative; color:var(--green-800); font-weight:600; font-size:14px; transition:transform .4s cubic-bezier(.22,1,.36,1), color .3s ease; } .service-card__more span::after{ content:""; position:absolute; right:0; bottom:-3px; width:0%; height:1px; background:currentColor; transition:width .45s cubic-bezier(.22,1,.36,1); } .service-card.is-hovered .service-card__more span{ transform:translateX(-4px); color:var(--green-700); } .service-card.is-hovered .service-card__more span::after{ width:100%; } .service-card__more img{ width:16px; height:16px; transition:transform .45s cubic-bezier(.22,1,.36,1); } .service-card.is-hovered .service-card__more img{ transform:rotate(180deg) translateX(5px); } .about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; } .about-media{ position:relative; border-radius:24px; overflow:hidden; box-shadow:0 30px 80px 0 rgba(45,106,79,0.15); } .about-media img{ width:100%; height:438px; object-fit:cover; } .about-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(27,67,50,0.4), rgba(0,0,0,0)); } .about-media__badge{ position:absolute; right:20px; bottom:24px; background:rgba(255,255,255,0.85); border-radius:16px; padding:12px 20px; text-align:right; z-index:2; } .about-media__badge b{ display:block; color:var(--green-600); font-size:14px; font-weight:700; } .about-media__badge small{ display:block; color:var(--green-700); font-size:12px; font-weight:400; margin-top:2px; } .about-text{ text-align:right; } .about-eyebrow{ color:var(--green-500); font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; } .about-title{ font-weight:900; font-size:36px; line-height:45px; margin-top:12px; } .about-title .grad{ display:block; background:linear-gradient(171deg, #2d6a4f 0%, #52b788 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .about-p{ color:var(--text-muted); font-size:16px; line-height:26px; margin-top:30px; } .about-p + .about-p{ margin-top:24px; padding-bottom:8px; } .about-btn{ display:inline-block; margin-top:32px; background:var(--green-800); color:#fff; font-weight:700; font-size:16px; padding:14px 28px; border-radius:16px; } .features-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; margin-top:64px; } .feature-card{ background:#fff; border:1.25px solid var(--border-light); border-radius:24px; padding:29px; text-align:right; } .feature-card__num{ font-weight:900; font-size:48px; color:rgba(45,106,79,0.1); line-height:48px; } .feature-card__title{ font-weight:700; font-size:18px; margin-top:12px; } .feature-card__desc{ color:var(--text-muted); font-size:14px; line-height:22.75px; margin-top:8px; } .features-cta{ text-align:center; margin-top:40px; } .features-cta a{ display:inline-block; background:var(--green-800); color:#fff; font-weight:700; font-size:16px; padding:14px 28px; border-radius:16px; } .sectors-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:64px; } .sector-card{ background:var(--bg-light); border:1.25px solid var(--border-light); border-radius:16px; padding:25px; text-align:center; } .sector-card__emoji{ font-size:30px; line-height:36px; } .sector-card__title{ font-weight:600; font-size:14px; margin-top:12px; } .sectors-cta{ text-align:center; margin-top:40px; } .sectors-cta a{ display:inline-flex; align-items:center; gap:8px; justify-content:center; color:var(--green-800); font-weight:600; font-size:16px; } .sectors-cta img{ width:20px; height:20px; transform:rotate(180deg); } .method-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; margin-top:64px; } .method-card{ background:rgba(255,255,255,0.05); border:1.25px solid rgba(255,255,255,0.1); border-radius:24px; padding:29px; text-align:right; } .method-card__num{ width:56px; height:56px; background:var(--green-800); border-radius:16px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:20px; margin-right:0; margin-left:auto; } .method-card__title{ color:#fff; font-weight:700; font-size:18px; margin-top:20px; } .method-card__desc{ color:rgba(255,255,255,0.6); font-size:14px; line-height:22.75px; margin-top:8px; } .method-cta{ text-align:center; margin-top:40px; } .method-cta a{ display:inline-flex; align-items:center; gap:8px; justify-content:center; color:var(--green-500); font-weight:600; font-size:16px; } .method-cta img{ width:20px; height:20px; transform:rotate(180deg); } /* ============ VALUE SECTION (HOMEPAGE) ============ */ .value-section-fix { background: var(--bg-light); padding: 100px 0; position: relative; overflow: hidden; } .value-section-fix .wrap { max-width: 1640px !important; width: 92% !important; margin: 0 auto; padding: 0 32px; } .value-section-fix .value-grid, .value-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 80px; align-items: center; direction: rtl; margin-top: 0; } .value-text { text-align: right; direction: rtl; } .value-eyebrow { color: var(--green-500); font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; display: block; } .value-title { font-weight: 900; font-size: 42px; line-height: 1.25; color: var(--text-dark); margin-top: 8px; margin-bottom: 0; } .value-title .grad { display: block; background: linear-gradient(166deg, #2d6a4f 0%, #52b788 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .value-list { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; } .value-item { background: #fff; border: 1.25px solid var(--border-light); border-radius: 20px; padding: 20px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; direction: rtl; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.025), 0 1px 3px rgba(0, 0, 0, 0.03); transition: all 0.3s ease; } .value-item:hover { transform: translateY(-2px); border-color: var(--green-500); box-shadow: 0 8px 24px rgba(45, 106, 79, 0.08); } .value-item span.emoji { font-size: 18px; line-height: 1; flex-shrink: 0; } .value-item span.txt { color: var(--text-dark); font-size: 14px; font-weight: 700; line-height: 1.5; text-align: right; } .value-stats { position: relative; width: 100%; } .value-stats__blur { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 380px; height: 380px; background: rgba(82, 183, 136, 0.12); filter: blur(80px); border-radius: 50%; pointer-events: none; z-index: 0; } .value-stats__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; direction: ltr; /* للحفاظ على ترتيب كروت الأرقام مثل الصورة (24/7 على الشمال و 100% على اليمين) */ } .value-stat { background: #fff; border: 1.25px solid var(--border-light); border-radius: 28px; padding: 36px 28px; text-align: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.3s ease; } .value-stat:hover { transform: translateY(-3px); border-color: var(--green-500); box-shadow: 0 12px 32px rgba(45, 106, 79, 0.08); } .value-stat__num { font-weight: 900; font-size: 40px; color: var(--green-800); line-height: 1.1; margin-bottom: 8px; } .value-stat__label { font-weight: 600; font-size: 15px; color: #718096; margin-top: 0; line-height: 1.4; } .partners{ border-top:1.25px solid var(--border-light); border-bottom:1.25px solid var(--border-light); padding:81.25px 0; } .partners .section-title{ font-size:30px; line-height:36px; } /* ========================================================= PARTNERS / الجهات التنظيمية ========================================================= */ .partners-row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; width: max-content; gap: 24px; margin-top: 48px; animation: partnersMarqueeLoop 28s linear infinite; will-change: transform; } /* ========================================================= شكل المربع القديم ========================================================= */ .partners-row .partner-pill { position: relative; flex: 0 0 auto; width: 310px; min-height: 72px; padding: 20px 28px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; background: rgba(255, 255, 255, 0.035); color: inherit; overflow: hidden; cursor: pointer; transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease; } /* ========================================================= اللمعة المتحركة ========================================================= */ .partners-row .partner-pill::after { content: ""; position: absolute; top: -40%; left: -120%; width: 60%; height: 180%; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 100% ); transform: skewX(-20deg); animation: partnerShine 3.5s ease-in-out infinite; pointer-events: none; z-index: 2; } /* ========================================================= حركة اللمعة ========================================================= */ @keyframes partnerShine { 0% { left: -120%; } 45% { left: 150%; } 100% { left: 150%; } } /* ========================================================= حركة الشريط بالكامل ========================================================= */ @keyframes partnersMarqueeLoop { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* ========================================================= Hover ========================================================= */ @media (hover: hover) and (pointer: fine) { .partners-row:hover { animation-play-state: paused; } .partners-row .partner-pill:hover { transform: translateY(-7px) scale(1.035); border-color: rgba(63, 167, 124, 0.65); background: rgba(63, 167, 124, 0.08); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18), 0 0 25px rgba(63, 167, 124, 0.18); } .partners-row .partner-pill:hover::after { animation-duration: 1.2s; } } /* ========================================================= Dark Mode ========================================================= */ html.dark-mode .partners-row .partner-pill { background: rgba(255, 255, 255, 0.025); border-color: rgba(255, 255, 255, 0.10); } html.dark-mode .partners-row .partner-pill:hover { background: rgba(63, 167, 124, 0.08); border-color: rgba(63, 167, 124, 0.65); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35), 0 0 28px rgba(63, 167, 124, 0.20); } /* ========================================================= Mobile ========================================================= */ @media (max-width: 768px) { .partners-row { gap: 16px; margin-top: 32px; animation-duration: 28s; } .partners-row .partner-pill { width: 250px; min-height: 64px; padding: 16px 20px; border-radius: 14px; font-size: 14px; } } /* ========================================================= Reduced Motion ========================================================= */ @media (prefers-reduced-motion: reduce) { .partners-row { animation: none; transform: none; } .partners-row .partner-pill::after { animation: none; } .partners-row .partner-pill { transition: none; } } .cta{ position:relative; background:var(--green-800); overflow:hidden; padding:113px 0; } .cta__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.1; } .cta__overlay{ position:absolute; inset:0; background:rgba(45,106,79,0.9); } .cta__circle{ position:absolute; background:rgba(255,255,255,0.05); border-radius:50%; } .cta__content{ position:relative; max-width:896px; margin:0 auto; padding:0 24px; text-align:center; } .cta-eyebrow{ color:var(--green-500); font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; } .cta-title{ font-weight:900; font-size:60px; line-height:75px; color:#fff; margin-top:16px; } .cta-title .accent{ color:var(--green-500); display:block; } .cta-desc{ max-width:672px; margin:40px auto 0; color:rgba(255,255,255,0.7); font-size:20px; line-height:32.5px; } .cta-actions{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:56px; } .cta-btn-solid{ background:#fff; color:var(--green-800); font-weight:700; font-size:18px; padding:16px 40px; border-radius:16px; } .cta-btn-outline{ border:1.25px solid rgba(255,255,255,0.3); color:#fff; font-weight:700; font-size:18px; padding:17px 41px; border-radius:16px; } .footer{ background:var(--dark-green); } .footer__top-line{ height:1px; background:linear-gradient(to left, rgba(0,0,0,0), rgba(82,183,136,0.4) 50%, rgba(0,0,0,0)); } .footer__main{ padding:64px 24px 32px; max-width:1280px; margin:0 auto; } .footer-grid{ display:grid; grid-template-columns:1fr 1fr 1fr 2fr; gap:40px; } .footer-brand{ text-align:right; } .footer-brand__head{ display:flex; align-items:center; justify-content:flex-end; gap:16px; } .footer-brand__head img{ width:80px; height:80px; border-radius:50%; } .footer-brand__name{ color:#fff; font-weight:600; font-size:20px; } .footer-brand__tag{ color:#fff; font-weight:400; font-size:16px; margin-top:6px; } .footer-brand__desc{ max-width:320px; margin-right:0; margin-left:auto; color:var(--text-muted-2); font-size:14px; line-height:22.75px; margin-top:20px; } .footer-form{ margin-top:24px; max-width:468px; margin-right:0; margin-left:auto; } .footer-form__label{ color:#fff; font-weight:600; font-size:14px; text-align:right; } .footer-form__row{ display:flex; gap:8px; margin-top:12px; } .footer-form__input{ flex:1; background:rgba(255,255,255,0.1); border:1.25px solid rgba(255,255,255,0.1); border-radius:12px; padding:11px 17px; color:#fff; font-family:inherit; font-size:14px; text-align:right; direction:rtl; } .footer-form__input::placeholder{ color:rgba(255,255,255,0.4); } .footer-form__btn{ background:var(--green-800); color:#fff; font-weight:500; font-size:14px; padding:10px 16px; border-radius:12px; white-space:nowrap; } .footer-form__btn[disabled]{ opacity:.6; pointer-events:none; } .footer-form__feedback{ margin-top:8px; font-size:12.5px; font-weight:600; text-align:right; display:none; } .footer-form__feedback.is-visible{ display:block; } .footer-form__feedback.is-success{ color:#8fe0b7; } .footer-form__feedback.is-error{ color:#f2a3a3; } .footer-social{ display:flex; gap:12px; justify-content:flex-end; margin-top:24px; } .footer-social a{ width:36px; height:36px; background:rgba(255,255,255,0.1); border-radius:12px; display:flex; align-items:center; justify-content:center; } .footer-social img{ width:16px; height:16px; } .footer-col{ text-align:right; } .footer-col h4{ color:#fff; font-weight:600; font-size:14px; padding-bottom:9px; border-bottom:1.25px solid rgba(255,255,255,0.1); } .footer-col ul{ margin-top:16px; display:flex; flex-direction:column; gap:10px; } .footer-col ul li{ display:flex; align-items:center; justify-content:flex-end; gap:8px; color:var(--text-muted-2); font-size:14px; } .footer-col ul li .dot{ width:4px; height:4px; border-radius:50%; background:rgba(82,183,136,0.4); } .footer-contact li{ justify-content:flex-end; color:var(--text-muted-2); font-size:12px; gap:10px; } .footer-contact img{ width:16px; height:16px; } .footer-divider{ height:1px; background:rgba(255,255,255,0.1); margin-top:56px; } .footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding-top:24px; color:var(--text-muted-2); font-size:12px; } .footer-bottom .links{ display:flex; gap:16px; } body{ font-family:'Cairo', sans-serif; color:var(--text-dark); background:#fff; overflow-x:hidden; } .page-header { position: sticky; top: 0; z-index: 1000; background: #fff; box-shadow: 0 2px 15px rgba(45, 106, 79, 0.06); transition: box-shadow 0.3s ease, background 0.3s ease; } .page-header.is-scrolled { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } .page-header__row{ max-width:1280px; margin:0 auto; padding:0 16px; height:84px; display:flex; align-items:center; justify-content:space-between; } .page-header__cta{ background:var(--green-800); color:#fff; font-weight:600; font-size:14px; padding:10px 20px; border-radius:12px; white-space:nowrap; } .page-header__spacer{ width:81px; height:68px; } .page-header__links{ display:flex; align-items:center; gap:8px; } .page-header__links a{ display:flex; align-items:center; gap:4px; padding:8px 14px; border-radius:8px; color:var(--text-dark); font-weight:500; font-size:16px; line-height:1; white-space:nowrap; transition:all .25s ease; } .page-header__links a:hover{ color:var(--green-800); } .page-header__links a .chev{ width:11px; height:11px; } /* ============================================================ Desktop utility cluster — compact AR/EN switch + dark-mode toggle, injected by js/main.js as the last item in the nav row (see .page-header__links{gap:8px} above; no extra margin needed here, it inherits that same inter-item spacing). Mirrors the mobile drawer's .mnav-lang / .mnav-action visual language — rounded pill group, white active chip, icon circle — just sized for a compact 84px-tall desktop header. Dark-mode variants live with the rest of dark mode further down this file. ============================================================ */ .header-utility{ display:flex; align-items:center; gap:8px; } .header-utility__lang{ display:flex; gap:2px; padding:3px; border-radius:10px; background:var(--bg-light); border:1px solid var(--border-light); } .header-utility__lang-opt{ padding:5px 9px; border-radius:7px; font-family:inherit; font-size:11px; font-weight:700; color:var(--text-muted); opacity:.7; transition:background .2s ease, color .2s ease, opacity .2s ease; } .header-utility__lang-opt.is-active{ background:#fff; color:var(--green-800); opacity:1; box-shadow:0 2px 6px rgba(45,106,79,.14); } .header-utility__theme{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--bg-light); border:1px solid var(--border-light); color:var(--text-dark); flex-shrink:0; transition:background .2s ease, transform .2s ease; } .header-utility__theme:hover{ background:#fff; transform:translateY(-1px); } .header-utility__theme:active{ transform:translateY(0) scale(.94); } .header-utility__theme .mnav-action__icon{ display:flex; width:15px; height:15px; } .header-utility__theme svg{ width:15px; height:15px; } .page-header__links a.is-active{ background:rgba(45,106,79,.08); } .page-header__brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; } .page-header__brand img{ width:38px; height:38px; border-radius:50%; flex-shrink:0; } .page-header__brand-text{ text-align:right; } .page-header__brand-text p{ margin:0; color:#005249; } .page-header__brand-name{ font-weight:700; font-size:15px; } .page-header__brand-tag{ font-weight:400; font-size:11px; } .about-p{ color:var(--text-muted); font-size:16px; line-height:26px; margin-top:24px; } .about-hero{ position:relative; height:384px; background:var(--dark-green); overflow:hidden; display:flex; align-items:flex-end; } .about-hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .about-hero__overlay{ position:absolute; inset:0; background:linear-gradient(to top, #1b4332 0%, rgba(27,67,50,0.72) 55%, rgba(27,67,50,0.18) 100%); } .about-hero__content{ position:relative; z-index:2; max-width:1280px; width:100%; margin:0 auto; padding:0 24px 40px; text-align:right; } .about-hero__breadcrumb{ display:flex; align-items:center; justify-content:flex-start; direction:rtl; gap:8px; margin-bottom:14px; font-size:14px; font-weight:500; } .about-hero__breadcrumb a{ color:rgba(255,255,255,0.75); text-decoration:none; transition:color .2s ease; } .about-hero__breadcrumb a:hover{ color:#fff; } .about-hero__breadcrumb .sep{ color:rgba(255,255,255,0.4); font-size:13px; } .about-hero__breadcrumb .current{ color:var(--green-500); font-weight:600; } .about-hero__title{ font-weight:900; font-size:48px; line-height:48px; color:#fff; } .about-media--dark::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(27,67,50,0.3), rgba(0,0,0,0)); } .story-card{ max-width:976px; margin:56px auto 0; background:#fff; border:1.25px solid var(--border-light); border-radius:24px; padding:57px; box-shadow:0 1px 1.5px rgba(0,0,0,0.1), 0 1px 1px rgba(0,0,0,0.1); text-align:center; } .story-card__badge{ width:80px; height:80px; border-radius:50%; background:rgba(45,106,79,0.1); display:flex; align-items:center; justify-content:center; margin:0 auto; } .story-card__badge span{ font-weight:900; font-size:36px; line-height:40px; color:var(--green-800); } .story-card p{ color:var(--text-muted); font-size:18px; line-height:29.25px; margin-top:32px; } .story-card p + p{ margin-top:24px; } .team-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 22px; margin-top:56px; } .team-card{ background:var(--bg-light); border:1.25px solid var(--border-light); border-radius:24px; padding:33px; text-align:right; transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1); } .team-card.is-expanded{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(45,106,79,0.16), 0 8px 20px rgba(45,106,79,0.10); } .team-card__photo{ width:80px; height:80px; border-radius:30px; overflow:hidden; margin-left:auto; margin-right:0; } .team-card__photo img{ width:100%; height:100%; object-fit:cover; } .team-card__photo--zoom{ position:relative; } .team-card__photo--zoom img{ position:absolute; width:147.53%; height:259%; max-width:none; left:-11.86%; top:-110.2%; } .team-card__name{ font-weight:700; font-size:18.5px; line-height:28px; margin-top:20px; } .team-card__role{ font-weight:500; font-size:14px; line-height:22.75px; color:var(black); margin-top:12px; } .team-card__bio-wrap{ overflow:hidden; transition:height .35s ease; } .team-card__bio{ white-space:pre-line; } .team-card__bio.is-clamped{ display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; font-size: 15.5px; } .team-card.is-animating .team-card__bio{ opacity:.55; } .team-card__toggle{ display:flex; align-items:center; justify-content:flex-end; gap:6px; width:100%; margin-top:12px; background:none; border:none; padding:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:14px; color:var(--text-muted); transition:color .3s ease; } .team-card__toggle:hover{ color:var(--green-800); } .team-card__toggle .arrow{ width:11px; height:11px; flex-shrink:0; transition:transform .45s cubic-bezier(.22,1,.36,1); } .team-card__toggle.is-open .arrow{ transform:rotate(180deg); } .cta-about{ background:var(--dark-green); padding:80px 0; } .cta-about__content{ max-width:896px; margin:0 auto; padding:0 24px; text-align:center; } .cta-about__title{ font-weight:900; font-size:30px; line-height:36px; color:#fff; } .cta-about__subtitle{ margin-top:16px; padding-bottom:32px; color:rgba(255,255,255,0.6); font-size:16px; line-height:24px; } .cta-about__btn{ display:inline-block; background:var(--green-500); color:#fff; font-weight:700; font-size:16px; padding:16px 32px; border-radius:16px; } .page-hero-short{ position:relative; height:384px; background:var(--dark-green); overflow:hidden; display:flex; align-items:flex-end; } .page-hero-short__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .page-hero-short__overlay{ position:absolute; inset:0; background:linear-gradient(to top, #1b4332 0%, rgba(27,67,50,0.6) 50%, rgba(0,0,0,0) 100%); } .page-hero-short__content{ position:relative; z-index:2; max-width:1280px; width:100%; margin:0 auto; padding:0 24px 40px; text-align:right; } .page-hero-short__breadcrumb{ display:flex; align-items:center; justify-content:flex-start; direction:rtl; gap:8px; margin-bottom:14px; font-size:14px; font-weight:500; } .page-hero-short__breadcrumb a{ color:rgba(255,255,255,0.75); text-decoration:none; transition:color .2s ease; } .page-hero-short__breadcrumb a:hover{ color:#fff; } .page-hero-short__breadcrumb .sep{ color:rgba(255,255,255,0.4); font-size:13px; } .page-hero-short__breadcrumb .current{ color:var(--green-500); font-weight:600; } .page-hero-short__title{ font-weight:900; font-size:48px; line-height:48px; color:#fff; } .cta-green{ background:var(--green-800); padding:80px 0; } .cta-green__content{ max-width:896px; margin:0 auto; padding:0 24px; text-align:center; } .cta-green__title{ font-weight:900; font-size:36px; line-height:40px; color:#fff; } .cta-green__subtitle{ margin-top:16px; padding-bottom:32px; color:rgba(255,255,255,0.7); font-size:20px; line-height:28px; } .cta-green__btn{ display:inline-block; background:#fff; color:var(--green-800); font-weight:700; font-size:18px; padding:16px 40px; border-radius:16px; } .footer-contact a{ text-decoration:underline; cursor:pointer; } .feature-rows{ display:flex; flex-direction:column; gap:32px; margin-top:0; width:100%; } .feature-row{ background:#fff; border:1.25px solid var(--border-light); border-radius:24px; box-shadow:0 1px 1.5px rgba(0,0,0,0.1), 0 1px 1px rgba(0,0,0,0.1); padding:41px; display:flex; align-items:center; gap:32px; } .feature-row__text{ flex:1; text-align:right; } .feature-row__title{ font-weight:700; font-size:24px; line-height:32px; } .feature-row__desc{ color:var(--text-muted); font-size:18px; line-height:29.25px; margin-top:12px; } .feature-row__icon{ flex-shrink:0; width:64px; height:64px; border-radius:16px; background:rgba(45,106,79,0.1); display:flex; align-items:center; justify-content:center; font-size:30px; } .feature-row__num{ flex-shrink:0; font-weight:900; font-size:60px; line-height:60px; color:rgba(45,106,79,0.1); } .cta-white{ background:#fff; padding:80px 0; } .cta-white__content{ max-width:896px; margin:0 auto; padding:0 24px; text-align:center; } .cta-white__title{ font-weight:900; font-size:36px; line-height:40px; color:var(--text-dark); } .cta-white__subtitle{ margin-top:16px; padding-bottom:32px; color:var(--text-muted); font-size:20px; line-height:28px; } .cta-white__btn{ display:inline-block; background:var(--green-800); color:#fff; font-weight:700; font-size:18px; padding:16px 40px; border-radius:16px; } .intro{ padding:80px 0; } .method-section{ background:var(--bg-light); padding:64px 0; } .method-rows { direction: rtl; text-align: right; max-width: 1024px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 32px; } .method-row { direction: rtl; text-align: right; background: #fff; border: 1.25px solid var(--border-light); border-radius: 24px; box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1); padding: 41px; display: flex; align-items: center; justify-content: flex-start; gap: 32px; } .method-row__text { flex: 1; text-align: right; } .method-row__title{ font-weight:700; font-size:24px; line-height:32px; } .method-row__desc{ color:var(--text-muted); font-size:18px; line-height:29.25px; margin-top:12px; } .method-row__icon-wrap{ flex-shrink:0; position:relative; width:64px; height:64px; } .method-row__ghost-num{ position:absolute; top:-16px; left:-26px; font-weight:900; font-size:96px; line-height:96px; color:rgba(45,106,79,0.08); white-space:nowrap; z-index:0; } .method-row__icon{ position:relative; z-index:1; width:64px; height:64px; border-radius:16px; background:var(--green-800); display:flex; align-items:center; justify-content:center; font-size:30px; } /* ============================================================ METHODOLOGY CARD — number beside icon (desktop only) Base rule above absolutely-positions the ghost number so it bleeds out from behind the icon box (decorative overlap). On wide screens that reads as the number and icon sitting on top of one another, so here the number is taken out of absolute positioning and becomes a normal flex sibling instead — DOM order is number then icon, and with .method-row's inherited RTL this places the number on the right and the icon right beside it, each independently laid out, nothing overlapping. Every property of the number/icon themselves (size, weight, color, font-size) is untouched — only their layout/position changes. Scoped to min-width:901px, just above the existing max-width:900px breakpoint in responsive.css, so nothing here reaches the tablet/phone layout — that stays fully governed by the existing, unmodified rules below 901px. ============================================================ */ @media (min-width: 901px){ .method-row__icon-wrap{ display:flex; align-items:center; gap:16px; width:auto; height:auto; } .method-row__ghost-num{ position:static; } } .value-section{ background:var(--dark-green); padding:96px 0; } .value-section .value-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:64px; } .value-card{ background:rgba(255,255,255,0.05); border:1.25px solid rgba(255,255,255,0.1); border-radius:24px; padding:29px; display:flex; flex-direction:column; align-items:flex-start; text-align:right; } .value-card__bar{ width:8px; height:32px; border-radius:9999px; background:var(--green-500); } .value-card__title{ font-weight:700; font-size:20px; color:#fff; margin-top:20px; } .value-card__desc{ color:rgba(255,255,255,0.6); font-size:14px; line-height:22.75px; margin-top:12px; } .vision-section{ background:var(--dark-green); padding:96px 0; } .vision-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:48px; } .vision-card{ background:rgba(255,255,255,0.05); border:1.25px solid rgba(255,255,255,0.1); border-radius:24px; padding:29px; text-align:center; } .vision-card__emoji{ font-size:36px; line-height:40px; } .vision-card__title{ font-weight:700; font-size:20px; color:#fff; margin-top:16px; } .vision-card__desc{ color:rgba(255,255,255,0.6); font-size:14px; line-height:20px; margin-top:12px; } .sector-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; margin-top:0; } .sectors-section{ background:var(--bg-light); padding:64px 0; } .sector-card{ background:#fff; border:1.25px solid var(--border-light); border-radius:24px; padding:33px; } .sector-card__row{ display:flex; align-items:center; justify-content:flex-end; gap:20px; } .sector-card__info{ text-align:right; flex:1; } .sector-card__title{ font-weight:700; font-size:20px; line-height:28px; } .sector-card__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; justify-content:flex-end; } .sector-card__tag{ background:rgba(45,106,79,0.1); color:var(--green-800); font-weight:500; font-size:12px; line-height:16px; padding:4px 12px; border-radius:9999px; white-space:nowrap; } .sector-card__icon{ flex-shrink:0; width:64px; height:64px; border-radius:16px; background:rgba(45,106,79,0.1); display:flex; align-items:center; justify-content:center; font-size:30px; } .sector-card__desc{ color:var(--text-muted); font-size:14px; line-height:22.75px; margin-top:20px; text-align:right; } .partners-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:56px; } .partner-cell{ background:var(--bg-light); border:1.25px solid var(--border-light); border-radius:16px; padding:21px; display:flex; align-items:center; justify-content:center; text-align:center; } .partner-cell span{ font-weight:600; font-size:14px; line-height:19.25px; color:var(--text-dark); } .about-title .grad{ display:block; background:linear-gradient(173deg, #2d6a4f 0%, #52b788 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .page-hero { position: relative; height: 500px; background: var(--dark-green); overflow: hidden; display: flex; align-items: flex-end; } .page-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .page-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, #1b4332 0%, rgba(27, 67, 50, 0.5) 50%, rgba(0, 0, 0, 0) 100%); } .page-hero__content { position: relative; z-index: 2; max-width: 1280px; width: 100%; margin: 0 auto; padding: 0 24px 56px; text-align: right; } .page-hero__breadcrumb{ display:flex; align-items:center; justify-content:flex-start; direction:rtl; gap:8px; margin-bottom:14px; font-size:14px; font-weight:500; } .page-hero__breadcrumb a{ color:rgba(255,255,255,0.75); text-decoration:none; transition:color .2s ease; } .page-hero__breadcrumb a:hover{ color:#fff; } .page-hero__breadcrumb .crumb{ color:rgba(255,255,255,0.75); } .page-hero__breadcrumb .sep{ color:rgba(255,255,255,0.4); font-size:13px; } .page-hero__breadcrumb .current{ color:var(--green-500); font-weight:600; } .page-hero__title{ font-weight:900; font-size:60px; line-height:60px; color:#fff; } .page-hero__subtitle{ max-width:576px; margin:12px 0 0 auto; color:rgba(255,255,255,0.7); font-size:18px; line-height:28px; } .icard-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:64px; direction:rtl; } .icard{ background:#fff; border:1.25px solid var(--border-light); border-radius:24px; padding:29px; text-align:right; } .icard--empty{ visibility:hidden; } .icard__icon{ width:56px; height:56px; border-radius:16px; background:rgba(45,106,79,0.1); display:flex; align-items:center; justify-content:center; font-size:24px; margin-left:auto; margin-right:0; } .icard__title{ font-weight:700; font-size:18px; margin-top:20px; } .icard__desc{ color:var(--text-muted); font-size:14px; line-height:22.75px; margin-top:12px; } .standards-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-top:48px; } .standard-pill{ background:var(--bg-light); border:1.25px solid var(--border-light); border-radius:16px; padding:13.25px 25.25px; color:var(--text-dark); font-weight:700; font-size:14px; white-space:nowrap; } .cta-simple{ background:var(--dark-green); padding:80px 0; } .cta-simple__content{ max-width:896px; margin:0 auto; padding:0 24px; text-align:center; } .cta-simple__title{ font-weight:900; font-size:36px; line-height:40px; color:#fff; } .cta-simple__subtitle{ margin-top:16px; padding-bottom:32px; color:rgba(255,255,255,0.6); font-size:20px; line-height:28px; } .cta-simple__btn{ display:inline-block; background:var(--green-500); color:#fff; font-weight:700; font-size:18px; padding:16px 40px; border-radius:16px; } .page-hero{ position:relative; height:500px; background:var(--dark-green); overflow:hidden; display:flex; align-items:flex-end; } .page-hero__content{ position:relative; z-index:2; max-width:1280px; width:100%; margin:0 auto; padding:0 24px 48px; text-align:center; } .page-hero__subtitle{ max-width:576px; margin:12px auto 0; color:rgba(255,255,255,0.7); font-size:18px; line-height:28px; } .about-media__badge{ position:absolute; right:20px; bottom:24px; background:rgba(27,67,50,0.85); border-radius:16px; padding:12px 20px; text-align:right; z-index:2; } .about-media__badge b{ display:block; color:#fff; font-size:14px; font-weight:700; } .about-media__badge small{ display:block; color:rgba(255,255,255,0.7); font-size:12px; font-weight:400; margin-top:2px; } .about-title .grad{ display:block; background:linear-gradient(170deg, #2d6a4f 0%, #52b788 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .about-p:first-of-type{ margin-top:32px; } .ecard-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:64px; direction:rtl; } .ecard{ background:#fff; border:1.25px solid var(--border-light); border-radius:24px; padding:29px; text-align:right; display:flex; flex-direction:column; } .ecard__icon{ width:56px; height:56px; border-radius:50%; background:rgba(45,106,79,0.1); display:flex; align-items:center; justify-content:center; font-size:24px; margin-left:auto; margin-right:0; margin-bottom:20px; } .ecard__title{ font-weight:700; font-size:16px; line-height:24px; margin-bottom:8px; } .ecard__desc{ color:var(--text-muted); font-size:12px; line-height:19.5px; } .vision-wrap{ max-width:1152px; margin:0 auto; padding:0 24px; } .vision-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:56px; } .vision-card{ background:rgba(255,255,255,0.05); border:1.25px solid rgba(255,255,255,0.1); border-radius:24px; padding:29px; text-align:right; } .vision-card__desc{ color:rgba(255,255,255,0.6); font-size:14px; line-height:22.75px; margin-top:12px; } .cta-plain{ background:#fff; padding:80px 0; } .cta-plain__content{ max-width:896px; margin:0 auto; padding:0 24px; text-align:center; } .cta-plain__title{ font-weight:900; font-size:36px; line-height:40px; color:var(--text-dark); } .cta-plain__subtitle{ margin-top:16px; padding-bottom:32px; color:var(--text-muted); font-size:20px; line-height:28px; } .cta-plain__btn{ display:inline-block; background:var(--green-800); color:#fff; font-weight:700; font-size:18px; padding:16px 40px; border-radius:16px; } .page-hero__overlay{ position:absolute; inset:0; background:linear-gradient(to top, #1b4332 0%, rgba(27,67,50,0.6) 50%, rgba(0,0,0,0) 100%); } .about-title .grad{ display:block; background:linear-gradient(168deg, #2d6a4f 0%, #52b788 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .stats-green{ background:var(--green-800); padding:48px 0; } .stats-green__grid{ max-width:1024px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; text-align:center; } .stats-green__num{ font-weight:900; font-size:36px; color:#fff; line-height:40px; } .stats-green__label{ font-weight:400; font-size:14px; color:rgba(255,255,255,0.7); margin-top:4px; } .scard-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:64px; direction:rtl; } .scard{ background:#fff; border:1.25px solid var(--border-light); border-radius:24px; padding:29px; display:flex; align-items:flex-start; gap:20px; direction:ltr; } .scard__text{ flex:1; text-align:right; } .scard__title{ font-weight:700; font-size:18px; line-height:28px; } .scard__desc{ color:var(--text-muted); font-size:14px; line-height:22.75px; margin-top:8px; } .scard__icon{ flex-shrink:0; width:56px; height:56px; border-radius:16px; background:rgba(45,106,79,0.1); display:flex; align-items:center; justify-content:center; font-size:24px; } /* ============ PYRAMID / HIERARCHY OF CONTROLS (RTL FLOW) ============ */ .pyramid-wrap, .pyramid-col, .pyramid-row { direction: rtl; text-align: right; } .pyramid-wrap { display: flex; justify-content: center; padding-top: 56px; } .pyramid-col { max-width: 512px; width: 100%; display: flex; flex-direction: column; } .pyramid-row { display: flex; justify-content: center; padding-top: 12px; } .pyramid-row:first-child { padding-top: 0; } .pyramid-bar { direction: rtl; text-align: right; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 12px 20px; border-radius: 16px; width: 100%; } .pyramid-bar__label { order: 1; font-weight: 600; font-size: 14px; color: #fff; text-align: right; } .pyramid-bar__num { order: 2; font-weight: 700; font-size: 12px; color: rgba(255, 255, 255, 0.5); } .page-hero__subtitle{ max-width:576px; margin:0 auto; color:rgba(255,255,255,0.7); font-size:18px; line-height:28px; padding-top:20px; } .about-title .grad{ display:block; margin-top:12px; background:linear-gradient(169deg, #2d6a4f 0%, #52b788 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .ccard-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:64px; } .ccard{ background:#fff; border:1.25px solid var(--border-light); border-radius:24px; padding:29px; text-align:right; } .ccard__icon{ width:48px; height:48px; border-radius:12px; background:rgba(45,106,79,0.1); display:flex; align-items:center; justify-content:center; font-size:20px; margin-left:auto; margin-right:0; margin-bottom:16px; } .ccard__title{ font-weight:700; font-size:16px; line-height:24px; margin-bottom:8px; } .ccard__desc{ color:var(--text-muted); font-size:12px; line-height:19.5px; } .journey-wrap{ max-width:1024px; margin:0 auto; padding:0 24px; } .journey-track{ position:relative; max-width:976px; margin:0 auto; padding-top:56px; } .journey-line{ position:absolute; top:88px; right:32px; left:32px; height:2px; background:var(--border-light); } .journey-grid{ position:relative; display:grid; grid-template-columns:repeat(4, 1fr); gap:32px; } .journey-step{ display:flex; flex-direction:column; align-items:center; text-align:center; } .journey-step__num{ width:64px; height:64px; border-radius:50%; background:var(--green-800); color:#fff; font-weight:900; font-size:24px; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 7.5px rgba(0,0,0,0.1), 0 4px 3px rgba(0,0,0,0.1); } .journey-step__title{ font-weight:700; font-size:18px; margin-top:16px; } .journey-step__desc{ color:var(--text-muted); font-size:14px; line-height:20px; margin-top:8px; } .contact-hero{ position:relative; height:320px; background:var(--dark-green); overflow:hidden; display:flex; align-items:flex-end; } .contact-hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .contact-hero__overlay{ position:absolute; inset:0; background:linear-gradient(to top, #1b4332 0%, rgba(27,67,50,0.6) 50%, rgba(0,0,0,0) 100%); } .contact-hero__content{ position:relative; z-index:2; max-width:1280px; width:100%; margin:0 auto; padding:0 24px 40px; text-align:right; } .contact-hero__breadcrumb{ display:flex; align-items:center; justify-content:flex-start; direction:rtl; gap:8px; margin-bottom:14px; font-size:14px; font-weight:500; } .contact-hero__breadcrumb a{ color:rgba(255,255,255,0.75); text-decoration:none; transition:color .2s ease; } .contact-hero__breadcrumb a:hover{ color:#fff; } .contact-hero__breadcrumb .sep{ color:rgba(255,255,255,0.4); font-size:13px; } .contact-hero__breadcrumb .current{ color:var(--green-500); font-weight:600; } .contact-hero__title{ font-weight:900; font-size:48px; line-height:48px; color:#fff; } .contact-section{ padding:96px 0; } .contact-grid{ display:grid; grid-template-columns:464fr 720fr; gap:48px; align-items:start; } .contact-info{ text-align:right; } .contact-info__eyebrow{ color:var(--green-500); font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; } .contact-info__title{ font-weight:900; font-size:30px; line-height:36px; color:var(--text-dark); margin-top:16px; } .contact-info__desc{ color:var(--text-muted); font-size:16px; line-height:26px; margin-top:24px; } .info-cards{ margin-top:40px; display:flex; flex-direction:column; gap:20px; } .info-card{ background:var(--bg-light); border:1.25px solid var(--border-light); border-radius:16px; padding:21px; display:flex; align-items:center; justify-content:flex-end; gap:16px; } .info-card__text{ text-align:right; } .info-card__label{ color:var(--text-muted-2); font-size:12px; } .info-card__value{ color:var(--text-dark); font-weight:600; font-size:14px; margin-top:4px; } .info-card__icon{ flex-shrink:0; width:40px; height:40px; border-radius:12px; background:var(--green-800); display:flex; align-items:center; justify-content:center; } .info-card__icon img{ width:20px; height:20px; } .contact-info__follow{ margin-top:32px; } .contact-info__follow-label{ color:var(--text-dark); font-weight:600; font-size:14px; } .social-pills{ display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; justify-content:flex-end; } .social-pill{ background:var(--bg-light); border:1.25px solid var(--border-light); border-radius:12px; padding:9px 17px; color:var(--text-muted); font-weight:500; font-size:12px; white-space:nowrap; } .contact-form-card{ background:var(--bg-light); border:1.25px solid var(--border-light); border-radius:24px; padding:41px; } .contact-form-card__title{ font-weight:900; font-size:24px; line-height:32px; color:var(--text-dark); text-align:right; } form.contact-form{ margin-top:24px; } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .form-row + .form-row{ margin-top:16px; } .form-group{ display:flex; flex-direction:column; } .form-group label{ color:var(--text-muted); font-weight:700; font-size:12px; text-align:right; margin-bottom:8px; } .form-group input, .form-group select, .form-group textarea{ background:#fff; border:1.25px solid var(--border-light); border-radius:16px; padding:17px 21px; font-family:inherit; font-size:14px; font-weight:500; color:var(--text-dark); text-align:right; direction:rtl; width:100%; } .form-group input::placeholder, .form-group textarea::placeholder{ color:var(--text-muted-2); font-weight:500; } .form-group textarea{ resize:vertical; min-height:134px; font-weight:500; } .form-group--full{ margin-top:16px; } .contact-form__submit{ display:block; width:100%; margin-top:16px; background:var(--green-800); color:#fff; font-weight:700; font-size:16px; padding:16px; border-radius:16px; text-align:center; } .contact-form__submit[disabled]{ opacity:.6; pointer-events:none; } .contact-form__feedback{ margin-top:12px; font-size:13.5px; font-weight:600; text-align:center; display:none; } .contact-form__feedback.is-visible{ display:block; } .contact-form__feedback.is-success{ color:var(--green-800); } .contact-form__feedback.is-error{ color:#c23b3b; } html.dark-mode .contact-form__feedback.is-success{ color:#6fcf9e; } html.dark-mode .contact-form__feedback.is-error{ color:#e08585; } .location-section{ background:var(--bg-light); padding:32px 0; } .location-box{ background:var(--border-light); border:1.25px solid #d0d8cc; border-radius:24px; height:256px; display:flex; align-items:center; justify-content:center; } .location-box__inner{ text-align:center; } .location-box__icon{ width:48px; height:48px; border-radius:50%; background:rgba(45,106,79,0.2); display:flex; align-items:center; justify-content:center; margin:0 auto; } .location-box__icon img{ width:24px; height:24px; } .location-box__label{ color:var(--text-muted); font-weight:500; font-size:14px; margin-top:12px; } .vm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; } .vm-card{ border-radius:24px; text-align:right; } .vm-card--dark{ background:var(--dark-green); position:relative; overflow:hidden; padding:48px; } .vm-card--dark::before{ content:""; position:absolute; top:-128px; right:-128px; width:256px; height:256px; border-radius:50%; background:rgba(255,255,255,0.05); } .vm-card--light{ background:var(--bg-light); border:1.25px solid var(--border-light); padding:49px; } .vm-card__icon{ position:relative; z-index:1; width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; margin-left:auto; margin-right:0; } .vm-card--dark .vm-card__icon{ background:rgba(82,183,136,0.2); } .vm-card--light .vm-card__icon{ background:rgba(45,106,79,0.1); } .vm-card__icon img{ width:28px; height:28px; } .vm-card__eyebrow{ position:relative; z-index:1; color:var(--green-500); font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; margin-top:24px; } .vm-card__title{ position:relative; z-index:1; font-weight:900; font-size:30px; line-height:36px; margin-top:12px; } .vm-card--dark .vm-card__title{ color:#fff; } .vm-card--light .vm-card__title{ color:var(--text-dark); } .vm-card__desc{ position:relative; z-index:1; font-size:18px; line-height:29.25px; margin-top:20px; } .vm-card--dark .vm-card__desc{ color:rgba(255,255,255,0.7); } .vm-card--light .vm-card__desc{ color:var(--text-muted); } .values-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:64px; } .value-item-card{ background:#fff; border:1.25px solid var(--border-light); border-radius:24px; padding:33px; text-align:right; } .value-item-card__icon{ width:56px; height:56px; border-radius:16px; background:rgba(45,106,79,0.1); display:flex; align-items:center; justify-content:center; font-size:24px; margin-left:auto; margin-right:0; } .value-item-card__title{ font-weight:700; font-size:20px; margin-top:20px; } .value-item-card__desc{ color:var(--text-muted); font-size:14px; line-height:22.75px; margin-top:12px; } .commitment__btn{ display:inline-block; margin-top:8px; background:var(--green-800); color:#fff; font-weight:700; font-size:18px; padding:16px 32px; border-radius:16px; } .commitment__btn-wrap{ text-align:center; margin-top:24px; } /* ========================================================================== PREMIUM UX ENHANCEMENTS — floating minimal scrollbar + custom arrow cursor Self-contained, purely additive block: every rule below targets either a scrollbar pseudo-element/property or the `cursor` property only, so none of it can change existing layout, spacing, typography, color, or responsive behavior. Safe to remove as a single block if ever needed. ========================================================================== */ /* ---------- 1. Minimal "floating capsule" scrollbar ---------- Style: thumb-only look, transparent track, small margin from the browser edge, fully rounded ends. Inspired by modern sites (Apple/Notion/Linear/ Vercel-style scrollbars) rather than a classic scrollbar. */ /* Firefox: thinnest built-in width + transparent track (Firefox has no equivalent of the WebKit border/background-clip margin trick below, so this is the closest achievable match with standard CSS). */ html{ scrollbar-width: thin; scrollbar-color: var(--dark-green) transparent; } /* Chrome, Edge, Opera, Safari (WebKit) */ ::-webkit-scrollbar{ width: 14px; /* total track width */ height: 14px; } ::-webkit-scrollbar-track{ background: transparent; /* track visually disappears */ } ::-webkit-scrollbar-thumb{ background-color: var(--dark-green); /* Border is transparent and painted OUTSIDE the color (background-clip: padding-box), so it doesn't add visible bulk — it just reserves a gap. 14px track − 3px border on each side = 8px visible capsule, with a 3px "floating" margin on every side (this is the best cross-browser way to fake a scrollbar margin, since CSS has no literal scrollbar-margin property). */ background-clip: padding-box; border: 3px solid transparent; border-radius: 999px; /* fully rounded capsule ends */ } ::-webkit-scrollbar-thumb:hover{ background-color: var(--green-700); /* slightly brighter only */ background-clip: padding-box; transition: background-color 0.25s ease; } ::-webkit-scrollbar-button{ display: none; /* remove the old up/down arrow buttons */ width: 0; height: 0; } ::-webkit-scrollbar-corner{ background: transparent; } /* Reduced motion: keep the branded color, drop the hover transition */ @media (prefers-reduced-motion: reduce){ ::-webkit-scrollbar-thumb:hover{ transition: none; } } /* ---------- 2. Premium arrow cursor ---------- A crisp SVG replica of the familiar system arrow — dark green fill, a hairline white outline, and a very soft drop-shadow — not a novelty shape. Scoped to real mice/trackpads only, so phones and tablets never see it (the `cursor` property has no visual effect there anyway, but scoping it explicitly keeps intent explicit and guarantees zero touch impact and zero effect on tablet/mobile). */ @media (hover: hover) and (pointer: fine){ /* Default arrow */ body{ cursor: url('data:image/svg+xml,') 4 3, auto; } /* Same arrow on interactive elements (links, buttons, CTAs, menu items) — identical design and color, only the semantic fallback becomes `pointer` so assistive tooling still reads it as clickable. */ a, button, [role="button"], [role="menuitem"], input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"], select, summary, label{ cursor: url('data:image/svg+xml,') 4 3, pointer; } /* Text fields and editable content keep the normal I-beam caret */ input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="number"], input:not([type]), textarea, [contenteditable="true"], [contenteditable=""]{ cursor: text; } /* Disabled controls keep the browser's own default cursor */ [disabled], [aria-disabled="true"]{ cursor: not-allowed; } } /* ============================================================ DARK MODE — toggled from the mobile drawer's quick actions. Scoped, additive overrides on top of the existing light theme: shared chrome (page background, headers, the drawer itself, and dropdown popovers). Preference persists via localStorage and is restored before first paint (see js/main.js). Card and section-level theming is intentionally out of scope for now — this covers the surfaces common to every page. ============================================================ */ html.dark-mode{ color-scheme:dark; } html.dark-mode body{ background:#0e1712; color:#e9f2ea; } html.dark-mode .page-header{ background:#132018; box-shadow:0 4px 20px rgba(0,0,0,.35); } html.dark-mode .page-header__brand-tag{ color:#9fb6a6; } html.dark-mode .nav-dropdown__menu-inner{ background:#182b20; box-shadow:0 20px 40px rgba(0,0,0,.35); } html.dark-mode .nav-dropdown__menu a, html.dark-mode .nav-dropdown__item{ color:#e9f2ea; } html.dark-mode .nav-dropdown__menu a:hover, html.dark-mode .nav-dropdown__item:hover{ background:rgba(255,255,255,.06); color:#8fd6ae; } @media (max-width:1024px){ html.dark-mode .nav__links, html.dark-mode .sticky-header__links, html.dark-mode .page-header__links{ background-color:#0f1c15; background-image: radial-gradient(130% 55% at 100% 0%, rgba(255,255,255,.05), transparent 60%), linear-gradient(180deg, #16261d 0%, #0f1c15 60%, #0c1710 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%2352b788' stroke-width='1' opacity='0.05'%3E%3Cpath d='M24 118C24 78 62 78 62 38'/%3E%3Cpath d='M62 38C62 56 44 64 26 70'/%3E%3Cpath d='M110 30C110 62 80 66 80 98'/%3E%3Cpath d='M80 98C80 84 96 78 112 74'/%3E%3C/g%3E%3C/svg%3E"); background-repeat:no-repeat, no-repeat, repeat; background-size:auto, auto, 140px 140px; box-shadow:-28px 0 60px rgba(0,0,0,.45), -6px 0 18px rgba(0,0,0,.25); } html.dark-mode .mnav-header{ background:linear-gradient(135deg, #0c1710 0%, #163224 100%); } html.dark-mode .mnav-actions{ border-bottom-color:rgba(255,255,255,.08); --mnav-action-bg: rgba(255,255,255,.05); --mnav-action-fg: #e9f2ea; --mnav-action-active-chip: #1f3a2b; --mnav-action-icon-bg: rgba(255,255,255,.10); --mnav-action-border: rgba(255,255,255,.10); } html.dark-mode .mnav-lang__opt.is-active{ color:#8fd6ae; } html.dark-mode .mnav-action:hover{ box-shadow:0 2px 4px rgba(0,0,0,.25), 0 10px 22px rgba(0,0,0,.35); } html.dark-mode .nav__links a, html.dark-mode .sticky-header__links > a, html.dark-mode .page-header__links a, html.dark-mode .nav__links .mnav-nav-scroll > .nav-dropdown > .nav-dropdown__trigger, html.dark-mode .sticky-header__links .mnav-nav-scroll > .nav-dropdown > .nav-dropdown__trigger, html.dark-mode .page-header__links .mnav-nav-scroll > .nav-dropdown > .nav-dropdown__trigger{ color:#e9f2ea !important; } html.dark-mode .nav__links a:hover, html.dark-mode .sticky-header__links > a:hover, html.dark-mode .page-header__links a:hover, html.dark-mode .nav__links .nav-dropdown__trigger:hover, html.dark-mode .sticky-header__links .nav-dropdown__trigger:hover, html.dark-mode .page-header__links .nav-dropdown__trigger:hover{ background:rgba(255,255,255,.06); } html.dark-mode .nav__links a:hover .mnav-icon, html.dark-mode .sticky-header__links a:hover .mnav-icon, html.dark-mode .page-header__links a:hover .mnav-icon, html.dark-mode .nav__links .nav-dropdown__trigger:hover .mnav-icon, html.dark-mode .sticky-header__links .nav-dropdown__trigger:hover .mnav-icon, html.dark-mode .page-header__links .nav-dropdown__trigger:hover .mnav-icon{ color:#8fd6ae; } html.dark-mode .nav__links a.is-active, html.dark-mode .sticky-header__links > a.is-active, html.dark-mode .page-header__links a.is-active{ background:linear-gradient(135deg, rgba(82,183,136,.22), rgba(82,183,136,.1)); color:#8fd6ae !important; box-shadow:0 0 0 1px rgba(143,214,174,.2), 0 6px 18px rgba(0,0,0,.3); } html.dark-mode .nav-dropdown__menu-inner::before{ background:rgba(255,255,255,.10); } } /* ============================================================ DARK MODE — Part 2: cards, buttons, forms, icons and shadows. Extends the palette above (#0e1712 body, #132018/#182b20 panels, #e9f2ea text, #9fb6a6 muted, #8fd6ae accent) rather than introducing new colors. Two techniques: 1) Redefining the shared tokens (--text-dark, --text-muted, --text-muted-2, --border-light, --bg-light) inside html.dark-mode fixes every element that already reads them — most cards, borders, and body copy site-wide — with zero risk of layout change, since only the color values move. 2) Targeted fixes for the remaining surfaces that use a hardcoded #fff / light rgba() rather than one of those tokens. ============================================================ */ html.dark-mode{ --text-dark:#e9f2ea; --text-muted:#9fb6a6; --text-muted-2:#75907c; --border-light:rgba(255,255,255,.10); --bg-light:#152219; } /* Cards & repeated surfaces built on a hardcoded white rather than --bg-light. */ html.dark-mode .stats, html.dark-mode .value-item, html.dark-mode .value-stat, html.dark-mode .feature-row, html.dark-mode .method-row, html.dark-mode .service-card, html.dark-mode .sector-card, html.dark-mode .story-card, html.dark-mode .icard, html.dark-mode .ecard, html.dark-mode .scard, html.dark-mode .ccard, html.dark-mode .value-item-card, html.dark-mode .admin-login__card, html.dark-mode .info-card{ background:#152219; } /* Already-dark cards (built for the dark methodology section) use a translucent-white overlay rather than a token — lighten it just enough to stay visible against the darker dark-mode backdrop. */ html.dark-mode .method-card{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.09); } /* Card/row icon chips: their light-green tint (rgba(45,106,79,.08)- style) reads as a near-invisible smudge on a dark card — a translucent white tint keeps the icon itself (already colored) legible instead. */ html.dark-mode [class*="__icon"]{ background:rgba(255,255,255,.08); } html.dark-mode .method-row__icon-wrap{ background:transparent; } html.dark-mode .method-row__icon{ background:var(--green-800); } /* Secondary/outline buttons using a literal border rather than the --border-light token. */ html.dark-mode .about-btn, html.dark-mode .method-cta, html.dark-mode .features-cta, html.dark-mode .sectors-cta{ border-color:rgba(255,255,255,.16); } /* Form inputs (contact page) */ html.dark-mode .form-group input, html.dark-mode .form-group select, html.dark-mode .form-group textarea{ background:#152219; border-color:rgba(255,255,255,.12); color:#e9f2ea; } html.dark-mode .form-group input::placeholder, html.dark-mode .form-group textarea::placeholder{ color:#75907c; } html.dark-mode .form-group select option{ background:#152219; color:#e9f2ea; } /* Dark decorative sections (hero-style dark green blocks) sit a touch darker too, so they read as part of the dark theme rather than an identical carry-over from light mode. */ html.dark-mode .section--dark{ background:#132018; } /* The site's soft green-tinted card shadows (rgba(45,106,79,...)) read as a muddy halo on dark surfaces — remove the tint at rest and use a plain black shadow on hover instead, so depth still reads clearly with the existing hover-lift motion untouched. */ html.dark-mode .ccard, html.dark-mode .ecard, html.dark-mode .icard, html.dark-mode .scard, html.dark-mode .feature-card, html.dark-mode .sector-card, html.dark-mode .service-card, html.dark-mode .story-card, html.dark-mode .team-card, html.dark-mode .value-card, html.dark-mode .value-item-card, html.dark-mode .info-card, html.dark-mode .contact-form-card, html.dark-mode .value-item, html.dark-mode .value-stat{ box-shadow:none; } html.dark-mode .ccard:hover, html.dark-mode .ecard:hover, html.dark-mode .icard:hover, html.dark-mode .scard:hover, html.dark-mode .feature-card:hover, html.dark-mode .sector-card:hover, html.dark-mode .service-card:hover, html.dark-mode .story-card:hover, html.dark-mode .team-card:hover, html.dark-mode .value-card:hover, html.dark-mode .value-item-card:hover, html.dark-mode .info-card:hover, html.dark-mode .contact-form-card:hover{ box-shadow:0 20px 40px rgba(0,0,0,.45); } /* Footer divider: a hairline drawn from rgba(255,255,255,.1) already works on both themes since the footer itself stays --dark-green in both — listed here only for the desktop utility cluster and dropdown menus that inherit --border-light and are already covered above. */ /* Desktop utility cluster (AR/EN + dark-mode toggle) — light-mode values live with the component itself further down this file; dark variants here. */ html.dark-mode .header-utility__lang{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); } html.dark-mode .header-utility__lang-opt{ color:#e9f2ea; } html.dark-mode .header-utility__lang-opt.is-active{ background:#1f3a2b; color:#8fd6ae; } html.dark-mode .header-utility__theme{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#e9f2ea; } html.dark-mode .header-utility__theme:hover{ background:rgba(255,255,255,.1); } /* الجهات التنظيمية ذات العلاقة - حركة ولمعة عند Hover */ .partner-cell { position: relative; overflow: hidden; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } /* اللمعة */ .partner-cell::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.18), transparent ); transform: skewX(-20deg); pointer-events: none; } /* الحركة */ .partner-cell:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 12px 30px rgba(45, 106, 79, 0.25), 0 0 22px rgba(45, 106, 79, 0.14); border-color: rgba(45, 106, 79, 0.6); } /* تشغيل اللمعة */ .partner-cell:hover::after { animation: partnerShine 0.8s ease forwards; } @keyframes partnerShine { from { left: -120%; } to { left: 160%; } } /* ========================================= ✨ Premium Effect - Regulatory Partners ========================================= */ .partner-pill { position: relative; overflow: hidden; cursor: pointer; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease, background-color 0.35s ease; will-change: transform, box-shadow; } /* اللمعة اللي بتعدي على المربع */ .partner-pill::before { content: ""; position: absolute; top: 0; left: -120%; width: 70%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.75), transparent ); transform: skewX(-20deg); transition: left 0.65s ease; pointer-events: none; } /* حركة + إضاءة عند الماوس */ .partner-pill:hover { transform: translateY(-7px) scale(1.025); background: rgba(255, 255, 255, 0.98); border-color: #3fa77c; box-shadow: 0 10px 25px rgba(1, 78, 72, 0.14), 0 0 0 1px rgba(63, 167, 124, 0.12), 0 0 25px rgba(63, 167, 124, 0.10); color: #014e48; } /* تشغيل اللمعة */ .partner-pill:hover::before { left: 140%; } /* عند الضغط */ .partner-pill:active { transform: translateY(-2px) scale(0.98); box-shadow: 0 4px 12px rgba(1, 78, 72, 0.18), 0 0 20px rgba(63, 167, 124, 0.18); } /* حركة بسيطة للكتابة */ .partner-pill { text-shadow: 0 0 0 transparent; } .partner-pill:hover { text-shadow: 0 0 10px rgba(63, 167, 124, 0.18); } /* للموبايل: نحافظ على الشكل بدون تأثيرات مزعجة */ @media (max-width: 768px) { .partner-pill { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .partner-pill:hover { transform: translateY(-4px) scale(1.01); } } /* إظهار مربعات الجهات التنظيمية بوضوح في Light Mode */ html:not(.dark-mode) .partners-row .partner-pill { background: #ffffff; border: 1.5px solid #b8d6c7; color: #1a2e1a; box-shadow: 0 2px 8px rgba(45, 106, 79, 0.10), 0 0 0 1px rgba(45, 106, 79, 0.04); } /* زيادة الوضوح عند مرور الماوس */ html:not(.dark-mode) .partners-row .partner-pill:hover { background: #f4faf7; border-color: #3fa77c; box-shadow: 0 12px 30px rgba(45, 106, 79, 0.18), 0 0 25px rgba(63, 167, 124, 0.18); }