:root{ --bg:#0f2444; --bg2:#0f2444; --graphite:#19365f; --graphite2:#214677; --gold:#D4A64A; --gold-bright:#F1C76A; --gold-deep:#9B6A20; --off-white:#F5F2EA; --gray:#FFFFFF; --line: rgba(212,166,74,0.22); --radius: 6px; --max: 1220px; } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth; scroll-padding-top:126px;} body{ background:#0f2444; color:var(--off-white); font-family:'Tajawal', sans-serif; font-weight:400; line-height:1.75; overflow-x:hidden; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:'Cairo', sans-serif; font-weight:800; color:var(--off-white); line-height:1.35; } .en{ font-family:'Poppins', sans-serif; letter-spacing:2.5px; text-transform:uppercase; } img{max-width:100%; display:block;} a{color:inherit; text-decoration:none;} button{font-family:inherit; cursor:pointer;} ::selection{background:var(--gold); color:#0f2444;} :focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; } .wrap{ max-width:var(--max); margin:0 auto; padding:0 28px; } .eyebrow{ display:inline-block; font-size:12px; color:var(--gold); opacity:.85; margin-bottom:14px; } .section-head{ text-align:center; max-width:640px; margin:0 auto 56px; } .section-head h2{ font-size:clamp(28px,4vw,42px); margin-bottom:16px; } .section-head p{ color:var(--gray); font-size:16px; } .divider{ width:64px; height:2px; background:linear-gradient(90deg, transparent, var(--gold), transparent); margin:18px auto 0; } /* buttons */ .btn{ display:inline-flex; align-items:center; gap:10px; padding:16px 34px; border-radius:3px; font-size:15.5px; font-weight:700; font-family:'Cairo',sans-serif; border:1px solid transparent; transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, background .35s ease, border-color .35s ease; white-space:nowrap; } .btn-gold{ background:linear-gradient(135deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep)); color:#0f2444; box-shadow:0 8px 24px -8px rgba(212,166,74,.55); } .btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -10px rgba(241,199,106,.65); } .btn-outline{ border:1px solid var(--line); color:var(--off-white); background:rgba(255,255,255,0.02); } .btn-outline:hover{ border-color:var(--gold); color:var(--gold-bright); } .btn-lg{ padding:19px 42px; font-size:17px; } /* ---------------- PROMO BAR ---------------- */ .promo-bar{ position:fixed; top:0; left:0; right:0; z-index:1001; height:48px; display:flex; align-items:center; justify-content:center; gap:22px; background:linear-gradient(120deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep)); color:#0f2444; padding:0 18px; overflow:hidden; } .promo-bar .promo-msg{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; font-family:'Cairo',sans-serif; white-space:nowrap; } .promo-bar .promo-msg svg{ width:16px; height:16px; flex-shrink:0; } .promo-links{ display:flex; align-items:center; gap:10px; } .promo-link{ display:flex; align-items:center; gap:6px; background:rgba(10,7,0,0.14); border:1px solid rgba(10,7,0,0.25); border-radius:20px; padding:6px 14px; font-size:12.5px; font-weight:700; font-family:'Cairo',sans-serif; white-space:nowrap; transition:background .25s ease, transform .25s ease; } .promo-link:hover{ background:rgba(10,7,0,0.26); transform:translateY(-1px); } .promo-link svg{ width:14px; height:14px; flex-shrink:0; } @media (max-width:860px){ .promo-bar .promo-msg{ display:none; } .promo-bar{ gap:10px; } } @media (max-width:360px){ .promo-link span{ display:none; } .promo-link{ padding:8px 12px; } } /* ---------------- NAV ---------------- */ header{ position:fixed; top:48px; left:0; right:0; z-index:1000; background:rgba(15,36,68,0.62); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid rgba(212,166,74,0.12); transition:background .3s ease; } .nav{ display:flex; align-items:center; justify-content:space-between; height:78px; } .nav-left{ display:flex; align-items:center; gap:26px; } .brand{ display:flex; align-items:center; gap:12px; } .brand img{ height:44px; width:auto; } .nav-dropdown{ position:relative; } .nav-dropdown-btn{ display:flex; align-items:center; gap:8px; background:none; border:1px solid var(--line); border-radius:10px; color:var(--off-white); font-family:inherit; font-size:14.5px; font-weight:600; padding:10px 18px; cursor:pointer; transition:border-color .25s, color .25s, background .25s; } .nav-dropdown-btn svg{ transition:transform .25s ease; } .nav-dropdown-btn:hover{ border-color:var(--gold); color:var(--gold-bright); background:rgba(212,166,74,0.06); } .nav-dropdown.open .nav-dropdown-btn{ border-color:var(--gold); color:var(--gold-bright); } .nav-dropdown.open .nav-dropdown-btn svg{ transform:rotate(180deg); } .nav-links{ position:absolute; top:calc(100% + 10px); right:0; display:flex; flex-direction:column; gap:2px; list-style:none; min-width:220px; background:#0c1f3d; border:1px solid var(--line); border-radius:14px; padding:10px; box-shadow:0 18px 40px rgba(0,0,0,.35); font-size:14.5px; color:var(--off-white); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .22s ease, transform .22s ease, visibility .22s; z-index:80; } .nav-dropdown.open .nav-links{ opacity:1; visibility:visible; transform:translateY(0); } .nav-links li{ width:100%; } .nav-links a{ position:relative; display:block; padding:10px 12px; border-radius:8px; opacity:.88; transition:opacity .2s, color .2s, background .2s; } .nav-links a::after{ display:none; } .nav-links a:hover{ opacity:1; color:var(--gold-bright); background:rgba(212,166,74,0.08); } .nav-cta{ display:flex; align-items:center; gap:22px; } .nav-cta .btn{ padding:12px 24px; font-size:14px; } .lang-toggle{ background:none; border:1px solid var(--line); color:var(--gold-bright); border-radius:20px; padding:8px 16px; font-family:'Poppins',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:1px; cursor:pointer; transition:border-color .3s ease, background .3s ease; } .lang-toggle:hover{ border-color:var(--gold); background:rgba(212,166,74,0.08); } .burger{ display:none; width:26px; height:20px; position:relative; background:none; border:none; } .burger span{ position:absolute; right:0; left:0; height:2px; background:var(--gold); border-radius:2px; transition:transform .3s ease, opacity .3s ease, top .3s ease; } .burger span:nth-child(1){ top:0; } .burger span:nth-child(2){ top:9px; } .burger span:nth-child(3){ top:18px; } .burger.open span:nth-child(1){ top:9px; transform:rotate(45deg); } .burger.open span:nth-child(2){ opacity:0; } .burger.open span:nth-child(3){ top:9px; transform:rotate(-45deg); } .mobile-panel{ position:fixed; top:126px; right:0; bottom:0; left:0; inset:126px 0 0 0; background:rgba(15,36,68,0.98); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease; z-index:999; } .mobile-panel.open{ opacity:1; transform:translateY(0); pointer-events:auto; } .mobile-panel a{ font-size:20px; font-family:'Cairo',sans-serif; font-weight:700; } /* ---------------- HERO ---------------- */ .hero{ position:relative; min-height:100vh; display:flex; align-items:center; padding:198px 0 90px; overflow:hidden; background:var(--bg); } .hero::before{ content:''; position:absolute; top:0; right:0; bottom:0; left:0; inset:0; display:none; pointer-events:none; } .hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:60px; align-items:center; width:100%; } .hero-copy{ opacity:0; min-width:0; transform:translateY(18px); animation:rise .9s .15s cubic-bezier(.2,.7,.2,1) forwards; } .hero-logo-wrap{ opacity:0; transform:translateY(18px) scale(.97); animation:rise 1s .35s cubic-bezier(.2,.7,.2,1) forwards; display:flex; justify-content:center; position:relative; } @keyframes rise{ to{ opacity:1; transform:translateY(0) scale(1);} } .hero-logo-wrap::before{ content:''; position:absolute; width:340px; height:340px; background:none; } .hero-logo-wrap img{ max-width:380px; width:100%; height:auto; position:relative; } .hero h1{ font-size:clamp(34px,5.2vw,58px); background:linear-gradient(115deg, var(--off-white) 30%, var(--gold-bright) 60%, var(--gold) 85%); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:22px; } .hero h2{ font-family:'Tajawal',sans-serif; font-weight:700; font-size:clamp(18px,2.2vw,24px); color:var(--off-white); max-width:560px; width:100%; margin-bottom:20px; line-height:1.6; } .hero p.support{ color:var(--gray); font-size:16px; max-width:540px; width:100%; margin-bottom:36px; } .hero-ctas{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:30px; } .trust-line{ font-size:14px; color:var(--gold); opacity:.85; letter-spacing:.3px; } /* ---------------- FEATURED OFFERS BANNER (عروض مميزة) ---------------- */ .special-offer-section{ position:relative; padding:38px 0 0; } .special-offer-grid{ display:grid; grid-template-columns:1fr; gap:26px; } .special-offer-card{ --so-fade:to left; position:relative; display:flex; align-items:stretch; isolation:isolate; color:inherit; text-decoration:none; background:var(--graphite); border:1px solid rgba(241,199,106,.45); border-radius:16px; overflow:hidden; box-shadow:0 26px 60px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(241,199,106,.06) inset; transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; } html[dir="ltr"] .special-offer-card{ --so-fade:to right; } /* thin gold line along the top edge */ .special-offer-card::before{ content:""; position:absolute; inset-inline:0; top:0; height:3px; z-index:3; background:linear-gradient(90deg, transparent, var(--gold-bright), var(--gold), transparent); opacity:.9; } a.special-offer-card{ cursor:pointer; } a.special-offer-card:hover, a.special-offer-card:focus-visible{ transform:translateY(-5px); border-color:var(--gold-bright); outline:none; box-shadow:0 34px 70px -30px rgba(0,0,0,.9), 0 0 42px -14px rgba(241,199,106,.55); } /* the picture is shown WHOLE (never cropped) at a moderate size, on a soft panel */ .special-offer-media{ position:relative; flex:0 0 40%; max-width:440px; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(7,20,46,.42); } .special-offer-media img{ display:block; width:auto; max-width:100%; height:auto; max-height:380px; object-fit:contain; border-radius:12px; box-shadow:0 18px 40px -16px rgba(0,0,0,.75); outline:1px solid rgba(241,199,106,.22); transition:transform .5s ease; } a.special-offer-card:hover .special-offer-media img{ transform:scale(1.03); } .special-offer-card:not(.has-image) .special-offer-media{ display:none; } .special-offer-body{ position:relative; z-index:2; flex:1; min-width:0; padding:34px 40px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:18px; } .special-offer-tag{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:#1a1408; background:linear-gradient(135deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep)); padding:7px 18px 7px 16px; border-radius:999px; letter-spacing:.3px; box-shadow:0 8px 22px -10px rgba(241,199,106,.75); } .special-offer-tag svg{ width:15px; height:15px; flex:none; } .special-offer-body h3{ margin:0; font-size:clamp(20px,2.3vw,26px); line-height:1.55; font-weight:800; color:var(--gold-bright); overflow-wrap:anywhere; } .special-offer-body p{ color:var(--off-white); font-size:17px; line-height:1.95; margin:0; font-weight:500; white-space:pre-line; overflow-wrap:anywhere; } .special-offer-body p + p{ margin-top:-6px; } /* the visible link: shows the address itself, not just a button */ .special-offer-url{ display:flex; align-items:center; gap:10px; max-width:100%; padding:9px 16px; border-radius:10px; direction:ltr; unicode-bidi:isolate; background:rgba(7,20,46,.45); border:1px dashed rgba(241,199,106,.5); color:var(--gold-bright); font-size:13.5px; font-weight:600; letter-spacing:.2px; transition:background .25s ease, border-color .25s ease; } .special-offer-url svg{ width:16px; height:16px; flex:none; } .special-offer-url span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } a.special-offer-card:hover .special-offer-url{ background:rgba(7,20,46,.7); border-color:var(--gold-bright); border-style:solid; } .special-offer-cta{ margin-top:2px; padding:13px 28px; border-radius:10px; pointer-events:none; } a.special-offer-card:hover .special-offer-cta, a.special-offer-card:focus-visible .special-offer-cta{ transform:translateY(-2px); box-shadow:0 14px 32px -10px rgba(241,199,106,.7); } .special-offer-cta svg{ transition:transform .3s ease; } html[dir="ltr"] a.special-offer-card:hover .special-offer-cta svg{ transform:translateX(4px); } html[dir="rtl"] a.special-offer-card:hover .special-offer-cta svg{ transform:scaleX(-1) translateX(4px); } /* WhatsApp number / group: green button + green link chip */ .special-offer-card.is-whatsapp{ border-color:rgba(37,211,102,.5); } .special-offer-card.is-whatsapp::before{ background:linear-gradient(90deg, transparent, #25D366, transparent); } a.special-offer-card.is-whatsapp:hover, a.special-offer-card.is-whatsapp:focus-visible{ border-color:#25D366; box-shadow:0 34px 70px -30px rgba(0,0,0,.9), 0 0 42px -14px rgba(37,211,102,.55); } .is-whatsapp .special-offer-url{ color:#5EE59A; border-color:rgba(37,211,102,.55); } a.special-offer-card.is-whatsapp:hover .special-offer-url{ border-color:#25D366; } .is-whatsapp .special-offer-cta{ background:linear-gradient(135deg, #2EE07A, #25D366 55%, #128C4A); color:#04170c; box-shadow:0 8px 24px -8px rgba(37,211,102,.6); animation:soWaPulse 2.4s ease-out infinite; } .is-whatsapp .special-offer-cta svg{ width:20px; height:20px; } a.special-offer-card.is-whatsapp:hover .special-offer-cta{ box-shadow:0 14px 32px -10px rgba(37,211,102,.75); animation:none; } html[dir="rtl"] .is-whatsapp .special-offer-cta svg, html[dir="ltr"] a.special-offer-card.is-whatsapp:hover .special-offer-cta svg, html[dir="rtl"] a.special-offer-card.is-whatsapp:hover .special-offer-cta svg{ transform:none; } @keyframes soWaPulse{ 0%{ box-shadow:0 8px 24px -8px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,.5); } 70%,100%{ box-shadow:0 8px 24px -8px rgba(37,211,102,.6), 0 0 0 14px rgba(37,211,102,0); } } @media (prefers-reduced-motion:reduce){ .is-whatsapp .special-offer-cta{ animation:none; } } .special-offer-cta svg{ width:18px; height:18px; flex:none; } html[dir="rtl"] .special-offer-cta svg{ transform:scaleX(-1); } @media (min-width:900px){ .special-offer-grid:has(.special-offer-card:nth-child(2)){ grid-template-columns:repeat(2, minmax(0,1fr)); } .special-offer-grid:has(.special-offer-card:nth-child(2)) .special-offer-card{ flex-direction:column; } .special-offer-grid:has(.special-offer-card:nth-child(2)) .special-offer-media{ flex:0 0 auto; max-width:none; padding:16px; } .special-offer-grid:has(.special-offer-card:nth-child(2)) .special-offer-media img{ max-height:300px; } } @media (max-width:899px){ .special-offer-card{ flex-direction:column; } .special-offer-media{ flex:0 0 auto; max-width:none; padding:14px; } .special-offer-media img{ max-height:300px; } .special-offer-body{ padding:22px 20px 26px; gap:14px; } .special-offer-body p{ font-size:16px; line-height:1.9; } } @media (prefers-reduced-motion:reduce){ .special-offer-card, .special-offer-media img{ transition:none; } a.special-offer-card:hover{ transform:none; } } /* ---------------- ZERO AI GUARANTEE (ثابت — أول حاجة بعد الهيرو) ---------------- */ .zero-ai-section{ position:relative; padding:34px 0 0; } .zero-ai-card{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:22px; background:var(--graphite); border:1px solid rgba(212,166,74,.4); border-radius:16px; padding:30px 34px 28px; box-shadow:0 20px 44px -28px rgba(0,0,0,.65); } .zero-ai-card::before{ content:""; position:absolute; inset-inline:0; top:0; height:3px; background:var(--gold); opacity:.9; } .zero-ai-card.reveal{ transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .zero-ai-card.reveal.in-view:hover{ transform:translateY(-4px); border-color:var(--gold-bright); box-shadow:0 30px 60px -30px rgba(0,0,0,.8), 0 0 36px -16px rgba(241,199,106,.5); } .za-main{ display:flex; align-items:center; gap:26px; } .zero-ai-icon{ position:relative; flex-shrink:0; width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:rgba(212,166,74,.14); border:1px solid rgba(212,166,74,.4); color:var(--gold-bright); transition:transform .45s cubic-bezier(.2,.7,.2,1); } .zero-ai-card:hover .zero-ai-icon{ transform:scale(1.08) rotate(-5deg); } .zero-ai-icon svg{ width:32px; height:32px; position:relative; } .za-ring{ position:absolute; inset:-1px; border-radius:16px; animation:zaPulse 2.6s ease-out infinite; pointer-events:none; } @keyframes zaPulse{ 0%{ box-shadow:0 0 0 0 rgba(212,166,74,.45); } 100%{ box-shadow:0 0 0 18px rgba(212,166,74,0); } } .zero-ai-content{ min-width:0; flex:1; } .zero-ai-badge{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.4px; color:#1a1408; background:var(--gold); padding:5px 14px; border-radius:999px; margin-bottom:10px; } .zero-ai-content h3{ font-size:19px; margin-bottom:8px; line-height:1.5; } .zero-ai-content p{ color:var(--gray); font-size:14.5px; line-height:1.85; margin:0; max-width:900px; } .za-stat{ flex-shrink:0; text-align:center; min-width:130px; padding:6px 0; padding-inline-start:26px; border-inline-start:1px solid var(--line); } .za-num{ display:block; font-family:'Poppins',sans-serif; font-size:44px; font-weight:800; line-height:1.1; color:var(--gold-bright); direction:ltr; font-variant-numeric:tabular-nums; } .za-stat span{ display:block; margin-top:4px; font-size:12.5px; font-weight:700; color:var(--gray); } .za-steps{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; } .za-step{ display:flex; align-items:center; gap:12px; text-align:start; padding:14px 16px; border-radius:12px; cursor:pointer; background:rgba(255,255,255,.03); border:1px solid var(--line); color:var(--off-white); font-family:'Cairo',sans-serif; font-size:14.5px; font-weight:700; transition:transform .25s ease, border-color .25s ease, background .25s ease; } .za-step i{ flex-shrink:0; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-style:normal; font-family:'Poppins',sans-serif; font-size:13px; font-weight:700; color:var(--gold-bright); border:1px solid rgba(241,199,106,.5); transition:background .25s ease, color .25s ease; } .za-step:hover{ transform:translateY(-2px); border-color:var(--gold); } .za-step.active{ background:rgba(212,166,74,.14); border-color:var(--gold-bright); } .za-step.active i{ background:var(--gold); color:#1a1408; border-color:var(--gold); } .za-pane{ padding:14px 18px; border-radius:10px; background:rgba(212,166,74,.07); border-inline-start:3px solid var(--gold); } .za-detail{ display:none; margin:0; color:var(--off-white); font-size:15px; line-height:1.9; } .za-detail.active{ display:block; animation:zaFade .4s ease; } @keyframes zaFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } } .za-cta{ align-self:flex-start; } @media (max-width:820px){ .za-steps{ grid-template-columns:1fr; } } @media (max-width:720px){ .zero-ai-card{ padding:24px 20px 22px; } .za-main{ flex-direction:column; align-items:flex-start; gap:16px; } .za-stat{ display:flex; align-items:baseline; gap:12px; padding-inline-start:0; border-inline-start:0; border-top:1px solid var(--line); padding-top:14px; width:100%; text-align:start; } .za-stat .za-num{ display:inline-block; font-size:38px; } .za-stat span{ margin-top:0; } .za-cta{ align-self:stretch; text-align:center; justify-content:center; } } @media (prefers-reduced-motion:reduce){ .za-ring, .za-detail.active{ animation:none; } .zero-ai-card.reveal.in-view:hover, .zero-ai-card:hover .zero-ai-icon, .za-step:hover{ transform:none; } } /* ترتيب بعد الكارت: العروض ثم العروض المميزة (بيظهروا بس لما يتفعّلوا) */ .zero-ai-section ~ .offers{ padding:80px 0 10px; } .zero-ai-section ~ .special-offer-section{ padding:34px 0 0; } /* ---------------- SERVICES ---------------- */ section{ position:relative; padding:120px 0; } .services{ background:var(--bg); } .services-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:26px; } .card{ background:var(--graphite); border:1px solid var(--line); border-radius:var(--radius); padding:36px 30px 30px; position:relative; overflow:hidden; transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s ease, box-shadow .4s ease; } .card::before{ /* top accent line that sweeps in on hover */ content:''; position:absolute; top:0; right:0; left:0; height:3px; background:linear-gradient(90deg, transparent, var(--gold-bright), var(--gold), transparent); transform:scaleX(0); transform-origin:center; transition:transform .5s cubic-bezier(.2,.7,.2,1); } .card::after{ /* soft glow that follows the top-right corner on hover */ content:''; position:absolute; top:-40%; left:-20%; width:60%; height:80%; background:rgba(212,166,74,.05); opacity:0; transition:opacity .5s ease; pointer-events:none; } .card:hover{ transform:translateY(-8px); border-color:rgba(241,199,106,0.55); box-shadow:0 26px 50px -22px rgba(0,0,0,.75); } .card:hover::before{ transform:scaleX(1); } .card:hover::after{ opacity:1; } .card .num{ font-family:'Poppins',sans-serif; color:var(--gold-deep); font-size:13px; letter-spacing:1px; margin-bottom:16px; display:inline-block; padding:3px 10px; border:1px solid rgba(201,162,75,.35); border-radius:20px; background:rgba(201,162,75,.06); } .card .icon-badge{ width:60px; height:60px; display:flex; align-items:center; justify-content:center; border-radius:16px; margin-bottom:22px; background:rgba(212,166,74,.1); border:1px solid rgba(212,166,74,.28); transition:transform .45s cubic-bezier(.2,.7,.2,1), background .4s ease, border-color .4s ease; } .card:hover .icon-badge{ transform:scale(1.08) rotate(-4deg); background:rgba(212,166,74,.2); border-color:rgba(241,199,106,.6); } .card .icon{ width:30px; height:30px; color:var(--gold); } .card h3{ font-size:19px; margin-bottom:10px; font-family:'Poppins',sans-serif; letter-spacing:.2px; direction:ltr; text-align:right; } html[dir="ltr"] .card h3{ text-align:left; } .card p{ color:var(--gray); font-size:14.5px; line-height:1.85; } .card-link{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:13px; color:var(--gold-bright); border-bottom:1px solid rgba(241,199,106,.4); padding-bottom:2px; transition:border-color .3s ease, gap .3s ease; } .card-link:hover{ border-color:var(--gold-bright); gap:9px; } .card-link svg{ width:14px; height:14px; } .card-order-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:20px; padding:12px; background:none; border:1px solid var(--line); border-radius:8px; color:var(--gold-bright); font-family:'Cairo',sans-serif; font-weight:700; font-size:13.5px; cursor:pointer; transition:border-color .3s ease, background .35s ease, gap .3s ease, color .3s ease, transform .2s ease; } .card-order-btn:hover{ border-color:transparent; background:linear-gradient(135deg, var(--gold-bright), var(--gold) 65%, var(--gold-deep)); color:#1a1408; gap:12px; } .card-order-btn:active{ transform:scale(.98); } .card-order-btn svg{ width:15px; height:15px; } .offers{ background:var(--bg2); } .offers-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:26px; } .offer-card{ position:relative; display:flex; flex-direction:column; background:var(--graphite); border:1px solid rgba(201,162,75,.3); border-radius:var(--radius); padding:30px 26px 26px; overflow:hidden; transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s ease, box-shadow .4s ease; } .offer-card::before{ content:''; position:absolute; inset:0; pointer-events:none; z-index:0; background:rgba(212,166,74,.06); opacity:0; transition:opacity .4s ease; } .offer-card:hover{ transform:translateY(-8px); border-color:rgba(241,199,106,.7); box-shadow:0 26px 50px -22px rgba(0,0,0,.75); } .offer-card:hover::before{ opacity:1; } .offer-card > *{ position:relative; z-index:1; } .offer-card .offer-badge{ position:absolute; top:0; left:0; z-index:2; background:linear-gradient(135deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep)); color:#1a1408; font-weight:800; font-size:12.5px; padding:7px 18px; border-radius:0 0 14px 0; letter-spacing:.3px; box-shadow:0 6px 16px -6px rgba(0,0,0,.5); } html[dir="ltr"] .offer-card .offer-badge{ left:auto; right:0; border-radius:0 0 0 14px; } .offer-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-top:10px; } .offer-card .offer-icon{ width:54px; height:54px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:27px; border-radius:16px; background:rgba(201,162,75,.14); border:1px solid rgba(201,162,75,.35); box-shadow:inset 0 0 0 1px rgba(255,255,255,.03); } .offer-scope{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid var(--line); font-size:11.5px; font-weight:700; color:var(--gray); white-space:nowrap; max-width:100%; } .offer-scope span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .offer-scope svg{ width:13px; height:13px; flex-shrink:0; } .offer-scope.offer-scope-all{ background:rgba(76,175,107,.14); border-color:rgba(76,175,107,.35); color:#8fd6a8; } .offer-card h3{ font-size:18.5px; margin:18px 0 8px; } .offer-card p{ color:var(--gray); font-size:14px; line-height:1.8; flex-grow:0; } .offer-code-row{ display:flex; align-items:center; gap:8px; margin-top:16px; flex-wrap:wrap;} .offer-code-label{ font-size:12.5px; color:var(--gray);} .offer-code-chip{ font-family:'Poppins',sans-serif; direction:ltr; letter-spacing:1px; font-size:13px; font-weight:700; color:var(--gold-bright); background:rgba(201,162,75,.12); border:1px dashed rgba(201,162,75,.5); border-radius:8px; padding:4px 12px; cursor:pointer; transition:background .2s, border-color .2s; } .offer-code-chip:hover{ background:rgba(201,162,75,.22); border-color:var(--gold-bright);} .offer-card .card-order-btn{ margin-top:20px; } .offer-card-footer{ margin-top:auto; } .offer-divider{ height:1px; background:var(--line); margin:20px 0 0; } .offer-timer{ display:flex; align-items:center; gap:8px; margin-top:16px; padding:9px 12px; background:rgba(201,162,75,.1); border:1px solid rgba(201,162,75,.3); border-radius:10px; } .offer-timer svg{ width:16px; height:16px; color:var(--gold-bright); flex-shrink:0; } .offer-timer-label{ font-size:11.5px; color:var(--gray); } .offer-timer-value{ display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; font-size:13.5px; font-weight:700; color:var(--gold-bright); letter-spacing:.3px; } .offer-timer-days{ font-family:'Cairo',sans-serif; } .offer-timer-clock{ font-family:'Poppins',sans-serif; direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; } .offer-card.offer-ending .offer-timer{ background:rgba(220,90,80,.12); border-color:rgba(220,90,80,.4); } .offer-card.offer-ending .offer-timer svg{ color:#e07a6f; } .offer-card.offer-ending .offer-timer-value{ color:#e88a80; } @media (max-width:860px){ .offers-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:640px){ .offers-grid{ grid-template-columns:minmax(0,1fr); } } @media (max-width:420px){ .offer-card-top{ flex-direction:column; align-items:flex-start; } } /* ---------------- PORTFOLIO ---------------- */ .portfolio{ background:var(--bg2); } .portfolio-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:40px; } .portfolio-tab{ background:none; border:1px solid var(--line); color:var(--gray); border-radius:24px; padding:10px 22px; font-family:'Cairo',sans-serif; font-weight:700; font-size:13.5px; cursor:pointer; transition:border-color .3s ease, color .3s ease, background .3s ease; } .portfolio-tab:hover{ border-color:var(--gold); color:var(--gold-bright); } .portfolio-tab.active{ background:linear-gradient(135deg, var(--gold-bright), var(--gold-deep)); border-color:transparent; color:var(--bg); } .p-item.p-hidden{ display:none; } .p-item[data-lightbox="true"]{ cursor:pointer; } .portfolio-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; } .p-item{ position:relative; display:block; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); aspect-ratio:4/5; background: #19365f; transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; } .p-item:hover{ transform:translateY(-6px); box-shadow:0 22px 42px -20px rgba(0,0,0,.6); } .p-item.tall{ aspect-ratio:4/6.2; } .p-item.wide{ grid-column:span 2; aspect-ratio:16/9; } .p-item img{ transition:transform .6s cubic-bezier(.2,.7,.2,1); } .p-item[data-lightbox="true"]::before, .p-item.p-doc::before{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.6); width:52px; height:52px; border-radius:50%; background-color:rgba(212,166,74,.94); background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:center; background-size:22px; opacity:0; transition:opacity .3s ease, transform .3s ease; z-index:2; pointer-events:none; box-shadow:0 10px 26px -8px rgba(0,0,0,.5); } .p-item:hover[data-lightbox="true"]::before, .p-item.p-doc:hover::before{ opacity:1; transform:translate(-50%,-50%) scale(1); } /* ---------------- CONTENT PROTECTION (best-effort) ---------------- */ .portfolio, .doc-viewer, .lightbox{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .portfolio img, #dvImg{ -webkit-user-drag:none; -webkit-touch-callout:none; pointer-events:none; } #lightboxImg{ -webkit-user-drag:none; -webkit-touch-callout:none; } @media print{ .portfolio, .doc-viewer, .lightbox{ display:none !important; } } /* ---------------- SUBTLE WATERMARK (disabled: was obscuring portfolio pieces) ---------------- */ .p-item{ position:relative; } .watermark-disabled{ content:''; position:absolute; top:0; right:0; bottom:0; left:0; inset:0; background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwCAMAAAAJixmgAAAB/lBMVEVnZl6nj15lTSiTXyOXcEuqoIjHmFspRWNWMh5oAACWdVLh4uXo1qQpOE2tjGylmZj/f3+qVVWWdl5uV09jYwDkqTvyzWdVVVWQZTqwp6hlRzl6aGWuo2HMsp3XybKqVQC0iFczLRz//3/GmmbFk1PIrIPh3tWsiDw6QTjFrpH6997/AAD//wA/FRVYPDC7ucSKe4HGoXdAP0drdIR6fYB/g3uRaTm5gz+9qIv/fwDAfiXAu8Ds4MgAAAADFisCBxAKJ0fYp0vot1Xzx2r81nT95o+udyzMlToJITv52ofMmka6hDMJEhqVZSnDizT+9q3+/v5yRhj2xVoADCSkaybou2UsGAqIVhyLWiXhrUuvh04zJRNwVy8SM1ZRNRbOqGtqSCdORjDXtnFJKRD76qSRd02yl2luZlA1NS7+8pf+4npPOiZnOxIoKSrZojwWOmS2lFLcsVbpyoh/f3+WdDclDAEAHUKMaEXNuIpWVk6mekrZxY6Uhm3+/MZ0ZTZKSkcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADyIxSZAAAAgHRSTlP++/TznP/5/+0C4yb8/1pLAgNsmAL+/gOxNbJwFTImA5f7AmWf+175/0j/AQEEti1QOv9w//93sIUC/zmHAP7+//7+/v7+/v7//v7+//7+/gb+/v/+/v/+/f7+//7//v79/v7+/v7////+/v39/v7//v/+Av7///z+//v+///+/2jDR+EAAD0ESURBVHja7Z0HY+NGkqhBaqTRaJIn2h7n3bU33F54OQogAAIkQIBiEBMIMScFyhStUR7pr7+q6gYIMChMsPfeuffOHo8oEh+rurqqurpaWP8PNoTfgX8H/h34d+DfgX8H/o8JnMn88tnXz757+dL7iwfffffs2We/ZDL/3wFnfnn28vpXvHz22a/D/cmBM59998CX8LdfP3n+/Pl/v+eN50+eP/n6y4c+6XdfZ/7+7xk484yzZr558vzevbW17pnjjFZW6vUWG/V6b+Q4a2uI/jXnfvAs8+8SOPMHpsSZr5/f+2Kt64zqrYKqqnEaO/7QYBjGuFXvOWdrgP2QQX+W+fcFnHnG/vXk3r3jrlNvMdLXNHK5nHIgy5HIKBKRZfkAfrSjbcPQjB/rztm9e0++/ZTMwqeizXz5/Ivjbq9FpDkCPRj9+dKt/VC1LEvyBvzZqg6arhCJvDa2NzY6xknv7N6Tv2Y+FbPw0W0UF+1Sd4SwwPk6nlNGh24NMfN5UTyKTQ9RFPN5yao2LyMtpDZaztq9J0j78pd/bODMdx7tSgEkm8vB/x+k3B8QVYwtHlswEBywf2gKEWNjQ0Pmr5H5I9uwjwlMwv0GaVWEfR2PHzhu9QbWKW4Ut2QNhJZGzM/RiH2X+UcEppmbefLFca+AtCDbg8OaNR/26Eg8OkLN3nrMBwn4iP/lVuwoLw3diLbRqZ+Raj/47B8NmHC/vVc+q6se7Q+SJM6SAtHj+4Kwtry8fHL+6JFhPOLj/ORkeVkQhMf4KqAG/R5eRjobY2eNZnPmHwkYcTN/vXccIVXOvVb+XJuhBaHGHgvC8vK5oYVH+L8N42T5vwL2ERmzoXAOYibNfpD5hwH+hevymISbG7nWFK0oAusFQ92Je8OYN5B5e7vz6HxZuE9fk9WMoGY/z3wkZOFj4K4Dbt0AXNBnUOX8FOx9gVgnqFPA2vTAv9re6DxaFtCI5YcRrVM/RuSXmd8cGJ/grxwXZu5lSLhHKNnlc0CIzxk7Ez5wLs9xjBk++V34b81AQYv5atfQQLEz7Ov9LYHBX374hV0HIpi+ckiXQbTC8qPOxrY2n9UwXrd6Ttd2G41are2P2m7DtbsR8ECYdiPz1lHe6mqaufbkw62X8KGT91653tnGcEBuBnWZaN+BA4FkU6yGWu91y43aavHtW2nBeFts19xu78RAcRvL9wE5ohnOvW/oS/5tgDMQ+z1Zch5toJ09COIyWsDtkMYGYIE1ctloF2dARW+E/7rYbnTrY9DtE+FIqo409exe5sOE/P7A4As8vHd8Diqrbb92J7ii+BjWEj4mwADb6h2HWcVrhx9hVBuRlrZ9Dsg/tGAqg15/9+sDg3gzT8o9+O7BB+xako97JCwbaHE6BNwhg4WSRdi3i0iT0yPwM6bhtW5LM4S8dBk3PkzIwnsb54dfdMco3e1eVUoy2iTo8gkuPyFgEK3jtoszrAi22K8OcdNv1pz4uQBTeYeE/NmvCvwSxbsCaKBpTc8yi+KWcM4mK2Jype6cOI3Vt2HY61GnuAPMRVs9uS+5cdUBIT/49YBRne8dqyTJiDd5YepeoB9NuQ2NifjdxrlP68PG7j44Nb6NW++JRTm+svbNe6q18F7q/M2SE4+r6k6rhuJNctycoigMOE4SftQrt4O0ybvBHh3NZXZXTqXDeOEMQorPfhVg+JQndoscKxIvYCTFrbWW8qoSAN7unBzzefteksWVTdgSxRlmeMPjrhhVSK2f/QrAz9YzX3RRmHEVZy/hxoR6JSHLCgITsWb0uCq/j2iZrYevTV0WYvOQq/1BNaGaaw/fYyLfXcIPlxwVyF6PilKMWVLEBV6ZJAySN867NRKu9V60hKvFRw0Hvrq68PgoxMyQd2tWKlc/e3r3iSzcdfr+tbyCvLlDEi98/v2enE4nkLhCIo63jtsB4d7ZQqEyA24NPQ5bfh1XI2ExE7NkFSU7p5w9uTOxcEfeJ3ZdQTBQ5yQID55OTqeQl4k4p9bdwMx9D9wj4WQ77rQlKbkVA1E2RmArfpw/m11Fcb7P3JFYuBvvc7ulAJcMvgbwgjb30noq7QErOY77nrpMuBtGpC1ZTJDwNyjmeHy8DFFicopZiio5NF2ffSLgDK6+hVfAlbLy8Hkg3jVT1/UUEZv4PXwgbkw43za6Vcna2oqxVQggQX0bI1j0T8Jixukk1RTFvCOxcCfebgGN8SGqM4zTiL7pAyc83Pd1LxB3Q7WLkoi4nodFuTFRah8rKGYhIGaS8Q+v7kos3IX3TEkk9hWbMwnOEvIyYFk+/gi4lww36FJC0ERiLqKYjYmYWZAhVfcVcy1zh0SIcAdeB3gTlSiDehzRlzY94ITcbb//qku4jzZaLlqqrYnGBgImNpu7hZ0dErPoASfznPizjwzsyTfxKsuoTp0le5MB62nTafiW+f1wjW05KkmxrfAcDSJbya2kVHTlOM7mx6hFExnLdyC+HfAvyFuBmbrP5SukSrYHnB4FJ+/d3YzYfzM0uebpciA4DBKjS0lirjnqjjaO3Pej6DsS31alGW+CePPJCx14ObD5IdqcFB8vdzRYdkO4JN4pYKbZNJvdOgQnJ6jZjLjGLFfm4wE/WH9+DO5UOkH6nH8c2SwzXiAOaPOdecFNi2jxw+IU7jwB+1kfEHNe2nUAGdZm/EwxKUVfybcmvg3wy/UnQd4rmL42B07ZxWD4l7wj7rKGhjkwdZPJ2ALWoJi3wIAdt7RtDQxYHj5XyiLx7SKJWwA/W39q19OpFNdnMFebfOj6alC8dwIGO7CsHfDkn2eBGOt1vJ6Yk+B19ozt7fOLx/gtlF/JzpNbEQu3MFjflomX1t98f2XCW54Rr/fn4XAwHNKDH82fuuBDaiZLH3iAN3BOiZmtU2Nt21g+hf8+TJhA/OwjAIOBXloJ8KY3dU+8e74fKXomZnDaj0Ra6pj2jMaF+qjr7iZnoDHXN0ZLdQfGWWa2TtU1NGBJaSktO9/ewgERbg4YvnBMCBBSKEqQL1t6gdeuBsWLsP1ey9C2vZT0xjsaG1ph5A5CzEnhvJAoS/mju+FOm+6gATMumnoaF6fMhwK/XH9+JoMzlSoSr6l7o/w2lHRtdmkzyIjH2Wagh4z/3NgwTHvoMSfFoWvrsMTZg5tS8QtS1yF3hDRb1XaMlpxeuZf5+rMPAwaDdVwH3gRMN1EK8O4F0lX5YR9ojTilsxhvxxMxS053Njrq2S4g0+PCLw4buqzIelOU8ncADixaQTEnJQs121DrzvP19W8zHwAMKrJEBgsXJOkUVJtoU3o7IN6Bo2oAy6vs2HZvJyBhlo2HddMB5KS/fbRrJyC4c5O3E/PUEhDW7CRodrOHH37yE+D+IfO+wOhBryQgOLDhXaUrXIuROB1YfPO7PcNQMVnpE4dEPNl+gB+Mz4bBTaOqayqKfDjwLd+1xIsy9FzMojQEzdaMRz89XF//JvN+wM/Wn+AETuvIO0BekHYq7frqnB+MjHhBUVQ+pkQcFDBtmhqFshXcISw2HCWnOLusJG9661AK6PvsEj8dT8F/wdSCD3l0rZSF61fgY1LoKvAm62BnEDmd9XjzYteIK4pSKBQCxGwTv+Mb6wAw/NxYaecn+4LAuXso53KjKGMVh1en/bWLSK93cbEmnD4einkGPdelmY6ngNmKRtSceh2ycK1Cf7HiT+BexUzQqHnilZqvDUroKQtFHNhQQwHDC3LxQkMKixKTVipM5kH/og7fXC6nKBUYSkEdj8+XL04fwzebjN0EzOIpmC/NETzP+P8+XJDPvAb48/Xnjq/QgiLLshngzVuOoSreKMwQd+byqip8NzZKzQpue7sg5fOCqiRSS9lau8h3Gq1itebakR+pzsMvUdyaBBrTfgv5QXlpcAiP2vrprhL2FDqNCn2lVirwLrLp8w5ahjIZU0o9C+zxArGiOkVJnEFW9vW9op9FYJ45fpBkVRvdNazn2fLHNcQoHWlo6/rKjz/dCTjzgFloVGgpiXsrFbliesuR5NLsDQx1EXEnLGB67UpRmq5vkPUiranT3hcLNIZN4RRJf/755wDwrGfKCpPhS2roS5vm/8zcARhiQkdOcYXuxXFnUJHb3HmWupqqFELAC0UcEjB7rewT+2IepigewD2FBSvS46vHP9OYEM9JEcDzDRs2CDitR2sv7gDMXA6IgVGh+5qKIpZrnNfqaWALwxKeaHUYOCjgHH9pRVZWivlQFUuz7IVasy4Hm74xki8nDmw0+SOfz4sD9zAFhial2zVr+F8yd1Dpv69/PzIpRrKkIa0oaqHmmau6RmSF+TL2nA/G2wkImOOCNUgUVt6G5OI2Y9d7HD4uEfuF5T6smLzfd3ADRJETQCv+8OLhXYwWWixyNCwQ8PI2ETc83pbG0a4hJhl3OC/7wtQCFy+OROFMCob09uPYAo/SL6WeAZ4IOHbVHx0osKAlzEN7F95u+NOiClxh0QwGi5VmFqu/QaU4LtPnfPVcUz2LW5ij1bymMDyDJy+W+UgUyoHirOplbMrW5mkws8XN1c/3YUyA/Rmc7LVwl1ZVTOdAKWJx1579fFGVorBgl/+bM/KcUagdeuouXzGs8424v8ZMAYP9jRvjVs85xtGN/Hj+CJEDCl2RfeD9etsnlqKnMd+GickB+Ft9Ya0rCP3+6f3HsSRElkQ7H1jI5dSC3G1UpXYBgNvt2p59/PBOwLAkmShgCAqlCBYQbvQ8e3WyEZ8sMlPE6rjebfgFSlQ/WI6cdLSJwfJ5zf1WYxInSS64FpSsGpxeROre++UoJgF3KyJcPfaY5wGfuVUWgRFwbS9bcu5lXt4e+BkuSWChYUmSBqSZJ9wlkCIboWWVA1dwD1WtH+8Ww2V2efQpViNjbYrXNBOtRiB/YLlbSQiNH4NvqSj7aV2ntKitO6YMSrODWZQOOpnE7AN7v92reJ/ZUAG4mM2Wlhzn2/mp+XnAmX/K3KtDoEACXiZb2+brb+Sdps06ErjOqD13QhvYMAUQqd0dxwO8JvAWGoGIOl+9wjxXXa2kStl2MeiCgZ+16zr1MS1y414fmX8O84otPQQs7ZVKJdv8fn4SU1go4AQI2JKuKMwrc/n233U6YWIuYLXeKIbqCpMT1xdTqqvO2J+/yNtaChZvSbtbMWGsbNa89yhWd5sujGatyv9q9bg37mxrRuHiio6BBIC31Kj30S4BF0ulcmmRiOeqdEDA57CybEQ8/3k62vOIW8fFadrJMrLFahcKXMAYgRTKUiDjKeKxHTPLNtOb/V7rPFglb7QiXTZFd7st/NDeaTI4g/On8bYHXCZgKYvTYYGIhXkC/oYEnAIBn2Lx6HnRM9DBgH4iYrW3G8BNBr18tpJs0Z72irLPxOvxTmzWRb3GiH4cG3EKEKkciBe4bbx71zHqlCXddTAe7Z3CYuUDCzlpCri6aW8umfNFPAf4n9bvySjgKAC30H9Y5fFv710woveB1W7Rf34+bQOzUExu4ayDqfzWKSSAFubv2hRv8xhZLk4g3qzsv6JSoDg7eUpJ33fsH52xA1+L5ZqvErIzyIucON8zA8AVepYy5pHr38+rJRfmrMHfnqGA0/CLp1rc2O4y3ctHN+ZFfLmx8DaIK84pbxdjpNZvzwqYQSgcT9fVFiWrD7RyIrEvE63aMp2u6zZwuMdO78ToELXWwnRaA9xluTtlsyhO8oCrWIshm/PWYmHOVuH38Mm4EwwC3olr9bdcoR9taMG6b0580vCmYzK2lbQWlfTT1sjbM1Ad+SxcbQprV3FtPK5QIRC6h2a3WZ3+9WLbhQUdD38YDvzQTSfM0YC9RUzNsrdDB1WVmbbZmGuU5+29CHPCpDUSBPxmMw6ek6fQ3Q10jsMiVuMn/nZaDK3xNQPzx29X5BleadgzCol0Qt7fh4VLbxSDa1KxCsNbp9rHdUPb2YkDctFOp2WBVo77uarnBCIwnuu0pBqs5bocmbMTIcxZk0z4tvcxTBoB0RlX6CFBdjoM2iM+93hBm4MPOlvHT6+SVutOmFcaXhAuVssozoTWGri4SaWqhmGo41bduazhWxXLMszuOMyyWgrUmnYHKtIEOI5GS7TyFmbQzfpfZ0U8x2h9jwLeB/swUJVcocieXupteOsEQvNEldHwxSvOws6c2xCTUi1YYSvmxbVHhVSKcOVDf3Wp9ntj4PT8OMTWOppvqPHEUE0q6gkTiPMXCf8NpT29zOXTwIK5wp9mVyZh1mRRsQ6GDd2copa9BHRHmx0GbTAR7/XnNnw5i6FXSafnKjwY1gbJh968tdzIOK5yJ+VgEncaYEG0Ohqttq7k1D5M1IQckfLyps/r1k3nmKZzPonFVLL57fofbgAGk1UHm/UKgkERLKbpCTiyPXtibqM7zXuLIyrBLallw1xKUdmi40nX6p4bBTlhct4Dj5cO7mEWxcCXtlNKDryhciLRl5SslzY+3tgAD3aFOUk2rKzmyh9nDsAIMyYrUkjsJ/bhi4wqMr4ZE7A2e0hw48dVPn2Ts7hzdn6neCXBKLA6TXnU8HHHuDj5MRUBFziw97EGpvsacm4E1no/ISg8ESNVtb/9bUPVKzaJuImGobAyY7amgL9e/8ZUEvsV1OhRRUl5yjLS4tPnIrcf7S3gTbI86yIps3ccnIwTKcypJGS2VWXlpeZrxDXlEDDb15h8NvxhbIP5SikOaPV+peIFcvb2OwTWTQQWxQSVQ34zrdPC7CJcgfUBJDuU9+U9/nhDI3Ae1Pumz9gCzXmteWeQZpktvvSuPZJ1hkuV0chbdAxweMD3nA88OZoZN7QV+CVbAWOtK6an0Ta4ZnGFAaNO74NpKMzotDCr0a9kGTXarez7Au5qaugMLH7wSZs+ic/f+UeuFpUrDE8M3KfC2XvIC3DztVEBZl2IlwOHNBrnVhz4wZo2lEupKKc84JqCsXQJ846k0xV4J/VPmWvnMGn0K1JlaZQAATOBWK24Gjz4Sxtm5Tm8IdjFvP1HSpptVMl8JzIvuqMVEm+QV54zhb04zQAHIZtrStk/e8DS5quUvaSbFOrAg8sQj6rmtE6Hgb9bf1LA8BYeYyAnUm+9PWBtsv3Lh9YiDwxLpubzLhRz3lrWZI478nZukpddk/GGgGVvTYoHpjABFxTDfCuVDyzJ5dMJ3qiEu/VsSsNfpRTckZvWaWFaoynArZIBzHIBSxEtuFfGgI+ZgJOBypZpsjkDQ6NHBvgZyHtw5m2sDy6PTaoynyfhebwYpcWB+DAigePpm8T20t5krz6KUab6J4j+FgKD12EisCxh4VPK3w5pxdXAwJgh3mpPFNqfv32hT0Poe38KDkEQIJDvdnL74DbLEBjZfBkXB1nXxCLkm4END7hAGzaSlBr4DwAedFzFxCPLNopDFF18emEKAf+v9T8WcnRiRUr+OVHmAs4PDHV6xB0y0TExUKklNr0Fi4cY235OukBDMZvVZQ1mDEwucCU9t/RoUNtlvLM6zT3LILDHi8SOVD0MOG4n7zp1U+aOtSiaOQg16/8JLNMi4Afrf8J0A5gCCdZtL20sXcYVNbA9SKOBoGEBi7tqDhMVtLuEqPCfsoxlA+DIby4tLe1Ju4+0V2y3RfE3XmODWnUlNQEOwLKtjODyP1FoynGrtuQOvG9cqv4NgPVXVe+JuvGcGlenJrEQnsIr2JkC463LhO27RKP4zLYo12gxFNfW4l5tCyvZwufCHBZWhgByVbrY8N4p56xy3YhVq2+dVIqfFJkAK4V6rys0Vlcb7vFZ3WC7AaFNG3yVWpMaPnDz3btHLf1V1HskjG7jxp/CWy5CaEPpGxnPFOIUTvkmC6ZwbmaDgTQ6GQsFRwuAQcQpHQuBqicb+G2SKTl8y341FgNbc2zq0xJW6t1GdXKW/G27vALIRlDA/HVS0TM1kvuu86iVAmCL6fSQDrqaDxcCfw1TGA0SrGzJicnKD6c3RjGNRRodEjAAq2yrYBY4pdek0852Dis4UOnLUiDqaDt6Kgys1I89r4aXFovS273IIy0wg1nSd78AbgbfeJW67zpGK5VY8oDFOp74hUn8hwXAL2EKw0t2XJzCE41uxmWlcqAcHLDYhYBdepxw9CsFgA18NtpTRl4s7LrY2PHKWloNKeiFn+k612hutFrd9iS4ZjlAzHu+Xf1RC1gsPgptX6Wdd4ZRd9IpXwoRLb6jqeFEjxCawn8y8Kl+gFU4kfVt32U86OvRv1o15q+HIiQCznluAsoC5YCxdVYaPtpg6zfwenUTPGmw6nBgbw7X3enk0Nb9+5QFLJ4Zcc7r78oVHF8ykQ0ABv/Ff6r+NjbRCGcBwsAr2s6OFodpdejbaNAUVZ4Z7QXAzKiRy00ajcDg+/T/trHj9S9xinz6gnj7DZZv40aLeEe7c/JhP/PkdnkcmMC+iPky3CJg3Qc+GpBlD6/EAeA/rH9Tx6WzBc+T0os+8GgWuF6VpGleBGYnpgPAMIVBXsu0I0W9eFT7LU9iwrw52WiwjCqfw8jba89NASaROClKS+NpYPXM86XHDPiVxZU8lqSz+WGrJYRtFhj/7QiEhjDzfQ4z+Payif+3UrwlsAKasvuIp8PQA+dlfFj0ixuRDalhb/pzGIDru4uSnvd/pm5qZTXMC+4yk41UNAB4RbZf8SyNlRRbqLHm10GrJQQjhz8a8AwbfUnapXJhziErHigfiQLzs+YCK3wSI3BOAdO39m7DbzPExAdBhiRFOvgFNKRsiZ/mQ+CE3JjOBU5yQz//DCLOS5tqAJg+kFxCS6pqnbFhAnDVN9M9/Iz6k+AOhBDys7D73gb4WdF0cQJcV0x/sCjnkb1YwkzEBByXdyHyfafFucdpULCQx+XbNbYpBEHgzYmA5eN5yTGfmERcNAuVAC4Am/D1wP+aHW1sOHL5Vc3/tgTsmlL4fr6n9XewWZRzBnf8Ug9kjgOiperSVKuD+VJxOiXLgRWm04CjW5LQ2Yhz3o2TJQoWYCLunnRYgG14wBQem+ZodW4ykEvZYsTZgmejudemUvmY5HaMAgH7LtPRKe2AhbYRhZCR7oDfrwHMYSmwM8C2/Ei4WD2cSnW0zRoDDguirXreJwqvAD7f8kact/XY7vTaPPdU7HXIJQOd94DZkWsvHSCJCxKAeGgc/rhSoMlb8dxUVm8jdTWjZZzJJc/VwtZltC4skDAYaRltloGO5V4ImCkyq5ZO6a1tw8nOA67FvfARVj9Yfa4eabTnGcdUI09hw1JkGH4kAo+6B8CMF1ak4sJkLyNmtXoo4ooyKQTB3REAjoCNVs8q2f0lH/ixigt/aF0KAv9RRlHQqtQOAJtyABeigI5mmKV5wNWzYz7WjsH4YKjAG7d06uzID5jDEyNY0cWBmULL9lR6bEataVcYZnHAy8W+dGy/dBQ3ZPWwkk1489GKxaieyfwmsFEsBFelCtgXXJWsVDEA7FTSCZ9WX6pvGFp9aQ5weKO0+UibdPXAAgHaGuoZqsxLugoFVWHA3I2W5dpsumiKmCYxGepAnU9cJc2oq4ap2pVS2gOGV9cJ+Mu5wM9gGUYrPsLt1eDu3qGSTni4+uYmCDjeQr9kZh/Jh4VV9qKj7vPGLRoTLwxhrPqmxvPJ90owhVly1gwfdJsm5gs46rQa4o3H6QNaBQasp70sVyzWw/DefBLIAQiBZfhP2E92BwKhgR6QnWQrqbTHq5fqEKWpajpKEpsLnIzld8+N/X3WuSVunHHTOzgx5MRkw4iAGx4wfhFnYQH7p8BDIqa5o/CiCM6rUYmM2oo7qi0DMHe1pOSRgwkcObgQC6F0BzYUOoSJthQEbioT+dp2h+I+056zU0hPZIElvegovJFJzvDF2zUKfFOBgDH0kgsMOMGCQnvmoGpypqsW6nTeqvAwk6cVNfzNYlxWnVw5UbLTRR+4i9+M/P2C8PB7fJv4JQCXgsBVZcJbWtkg4HrKmmNQ6YHyp+cG7usgQly1+Y7v7olKrRH4+un9wQPGP6uu/xUGDyklQy21kjSJTZ5q4GnUHQSuAXBKcQE44blaySOBchfBk7bTwErOzUvNbBDYktOeeEtl8IvRSS4ksvM8ouTP4rCHGyZohfbBB+KRgHXRKQAUcVZwCZ0FJv2edxI5LGKRShTNeC6YNUatlBpxU9URuJzgITK8uJ/DBWwR8P+gmdGYArakVIKZK9tecpiAlYK5NKPTELfGRMFQuRexr7bKXpKmXV5dbTR2d1cUAp64wuRLp4h3EXBYxMxqmXE1PkmSq3GditJM5VCJpkulRM1zpmOCsl+pVO7NU2lMwuPBBqWZl3ZrIWDb5Lzl7DmZLDCS9XR0qlRD3NoSmyekzbRxV/CMVaBZJci4UpkQmwhc1tOmTAY9BJyMzZ405MCSJE/avpKgEdhWYCFXsulSNp31JXyKtWHKQmDlVUVWouI0cE1mCl1esje8VJVS161QUJP8+Qi0WSHxptP7BXNvNsQrVoK5CliKGDC14oLHLt8GOIl7jwc7AVzwpRBYr5iyrmRTS2HgxP5+5YvFwK/2XwFwLQxsJTwB90jAmPWXD8yAiEmbu4bKxJtOKPXGvJ6k1UIAmNIbAGwDcAV9TbK10yo9badZ5Kv6uJQGVW3Ks8qmXsnqS3v/u8RfR8CJxDXAif0EAbel0Gpjp5G3VMo+6niJDFmum1VOjBl5EWzzfsLDtYtzg3gGXJnUmBJwymQC1pwZ4GRs2vfgTrsnXZb1zaFuJDzgml7itb8ATOVfwYPUQeA/409f1WAhmgKuJQC4XMraXMAHLCOg+xVY4mDZUHiEIdfP2jMFTGwRo3AqMIc5MC5J6IG2ircCBgFoQVwYuGTIaTmlJwh4icdlACxfB7xEUUJ0GhjVBZfg0h640b6AIVysb3KkQY/j4up7VltYr1WbykclKgicZgI2NGNvcp507oYrvEmSViUthKtgmUdRSVV0G4D1PQQmCScBGOKA/cXA8NNEVsxPS1hy06DRS1ljmwTMa9oT6RWbMhgXhrrPcQ+cubjca+DAvogTaLQ2EzLj1TbOFmw1BxovkSeEa9IEF1QGVKqK5SzldHZzCYAtD1ig/iPXAGN3ElEstsO5GzBbpNEd1GgSESV7UulCU7IgIthPyPskXWdVWtRq1/JUOminEVg3DwrEq9FBg6lgaRbYkg41dgbVVxcskyw6KYUknMrqvPYIgPty6jpgDIrmAkuuDibLQY0ueLxgkME29U/iFVjqsIBEdnalxZ2FLUsqynElfPSBASt8c0brlMPFMaI43XOJC9gTL//qdH76ulG297KTLXHwpQWsFEosstIIrKej8HBhYAsjZBumMHmVBwzYNA+rEphmXNnlxP4NuJRVVLzzqEHgki5zAYOIvULHQPlT6Junf6SMkHjBepbnZHW5SpMMFwGvoQuZLmF2Kj+tjWD9sq81X8AmlgoKJ3HChUAwZKrmHekHJYkbin8mZDKHSyl5st/d2byumo9RROMhXLCeZnsuL8bDEQK+tyBa+gKBU0uoNV4DB1Hy4txNsFmg0XxJsqvV/nlceQUGaL+iyN0bcMFXGKGBV8MiRgmXE4onYM3QxrVrGiBwhQ6d+MLvPjWz6ls+MDUtWAR8j4IEW0xKVf6pzd6VV3tdLTWYyVLkVLQ4uBjHcxU6ua7IITdj3vPmrUtVC5z6CQJvmgHguFZfla7ltQ7CB4IweV+ei0u7saMUZvkXAqcpKgoAS7VWq88rC9spiAyV0WGzOujX4/6jn6ETObisLebNW25LU5Xgwa5AtIRTOFDAYawUpRt5A74axqFeDDpjPmJbI50BP5ib8bjHsjgWKOBk6m0anRPhaoir6GlzMBxcrZ0YbBbllDpVdFvNrr7pOI25xiovVS8RVwkd3asEgT0B8z4Q5nxips/EG6RNpBL22wWKJcYes76bz+cCv1x/DuKF/1VpW8a3V8VDdWNDG58sL/d69XN4qBylk2DiUv161T0EJ8zeXCnUqcI7H6zTkobuSDXUSW1IIazTANxQ1CAvaIJZm9OvBsKkPPYOn3jiXu74z3sLctngWd4nYP353JzWs/UnGBSFgUXeXqSF1y283tnZwTuy1ILs2DX8XqvRw8My4NL+nww8jg1aQD1IkoOmG6nHgZblKdkB8sLkzDRtdTakYosJmG2/0Svw6EoYGVt0SNVRvBA43Ma2fbiA5wKDZ5nGrUk9WAMQBH7KgGt8AQi6/W9rbtcZ9er1ntN1m212KLBpo3DLtN+ZprRUXNvowGO3Wq9VKiFTK5OsXRCY63QBK8y70wVYstwy3SnkI3HgxOPKJLBMeKnyVHvhZkUsJqBVStlfBo7zCIEyvC/tFAJnwWotSq97pumH5uUhBozY7FHneVYK8Qy1wPcOg1HCNDCTMJbGgDEcBxS6wBxXmR0H5ienxeRf+hHArQRw+TZXKl2WrgGOoBFO2Q/nAv+y/pCAN6Nh4FD1fs3Nuq5tH1L0RJ0AUZsJt4C4LdkvYFPYkh0iLgSNVuGYJQnARQ/zIhTOD9k5tC/73UjkdRzWBxZzhHH11GFx0VpIqxIBL83fW0LfEoDtTVuMWYv2UCw9gcke1vSQtZoi3ANYTLVx3ZQn7S0KM8BUfugBK94BRKnY8yYw5+W1S2TMWM8ENHsHE9vMcXFRaS8WMBjp0RI+4RcLSw+/IJhNKyZKC89o2JMmYqwtrUnaHDfOR3pCVoLAiryQWFZa/l6/1D7hJZkTKvoK/UqC4Ffhz13ETWUXny0Bm3XlLGEFyb0FwLAQEzCaaUmc3wMF878jOc3KUFLelgE8WP3MZsm4BcBh4opanxxIzUt7Y21GwBAzsqMsXukd553QIu/ba4BjsX6KgJ8vKHl4hgsxAk9P4inNbh+a7BQwz5/HjZZTLtneTJ4GNsOVwASsRlZDYc3SeCJgrxpvroATk10u4C0Xrzs8FDuKkF9hPw2euRSC1dJPbb0MKh2dmcRh4uKey69exTLTXtfNLtkgcnMaeKKfgeJ2ELHaInPFWwVRl7zGGH/g8XrAAQEfTHj1Kd5F0QbYLLAzm6nyorKlDJhplDBareuPWxXbe7WGi5bLbeztZZnjwTaIrgUmQ+2dr55sNmL91V5L9RXa02iUcEDAnkJ7wHikXFwoYPKzlmaM9FQl3hK1V9DnWK2wkK32XnaPRhYcD6qlSzBLM6PSYWDAPT8u8uIHPrao4qxdVxcBF3xdDwp47y3/0hY8aOyImo5O2aypQx7catUWTOKAuS7ulcCnRD/L3uSL00JghnzAOn1EuGcUWNwZ8eqZqoSBqRZoWsAc125L1/LiFL5ge4DP1z9fAAxWaxMnMfhasWvCcA85C8pfZsuxb6/nA3tWS1VXGqy2xTvMZk1KzqS3DV4RJvO5wbPt/uSmOuSJOkuiuHgG4xWiPX3GsZwuEP/ypkkcFLJVzdr+cmwuAg7otLrisufkZ28t//v7+T7v91GXE1zADJi3OOLhkSfgckBLFokFIgfyGKam8PQRAD6JfzhK3uKkaB4U2/YXZKbRc4HJfrd67Dg0dQEPnqklrSYZS293He8AgDoB9hLDXMB2rXgjL05hgTJWU1N4+igeTuJNmsTWba5vA+RaWU/wNTkk4MDaCQ5Jq97dfSsFz7JJ4TdL/syKzt7uduWDELCn0XwJLnu44nVLEn5MD7+gtB2ewmFgmsQ4K9187HYX1jH7hdtDbJrOAuO2W6/b8FwE/yj5tFEQOTHunjstVZ1a3vB7M1N61L+x6voDy6DR96ldVKIcnsLTB7VgJabe0VZyKN2aWEI5O2arEDroQ8nyQst0vJZEVqAxgjXnzZJbsSTPONRspxU8kwXIQOvWJp6GdL18UaMrdHp16bqDWjxg2txM7YqDG/rFWtMdLIo199hZqbfG47FhjMEFq684x+5ue3JB3KQPxIJYLEZXtPBzLLtu1+nV63XZHDm63ah5h1wwm3ITL34WdVpNTE/hqTmM8QNVqLv5x4O5jZDz17aukIpFvH0Ux6Qfp98GQpyb2ZSE5fMTXjZs0fVrE/15W6QRuhsymRRvvCYSNZp6c8jgSL+8BvgZZT3QuFlic+47Nq9wNL2xO6hKNw2LCVecvw0jRehuTDPY4WRBnoWdQxVvcS2mtXV0gRZkfz86fSZ+5sD0Epn+dC1/NZwj4qqxjem8QMcWYwwG+DpWtkG0aNdJarKOczvuTB597u2m1m2uAcUCmxbmkZTUi8xNfTzu6WlqIZ2PzRFx3lL9ixw171rhHU076V/3HNftS0jdbVZ5lJq/ebAo83J9w/xYTKCEvQIa/exaYLzTIUGJDFGMzmlBYhkB3MA9ytpJ8xppXPNtSLbGWvTqczWE9QyYMZA3dd/eii3TDqMcvanLA22aojnfb+b/MitiBgwy3d7mt0D7BVPUFvGmqTwHuKqwfYyadPtx040Isdh9I4dHXVOz13vMtqa5p1PxUSqfdGcV0BoT3OteJNLr9UajesvwmLdH7/OIklSTYcWuNHjrgw/HZQLW6BCc/eVMD7HZ1jTf2FSwURnkT5v5aXeDA4+CfZ/qnoydBaK1pk7Kszadk2mZtRvBZOuNuDdg45rUISkoX2RubC+FbcPxhP6+cpiPXUoLgCOhZ2i8ZkLWXB8R+wk3hX7fbQ6D200gQXFwhSfmrwYi/SDP56c1aQw5HMByN/QnsYWvsPigEHi422wOhosDpa2j5W2cbFo4fbdApV+CP61g/vEgmRcG0lzgnSntbbcYMZXiQygKz7R24u2BnnQDZ6CuemO6CZ2a+63hclbFa04ePRrzABdbp3W8X6uOH+HP4Ht0HtFdKFX2zvTnet9akI/eus86JanlOZepCXPuZinv4z537jK/dTgDzJal6ena5quVTQosWReafzc8nmhxJa/bEDgZwSvFW1Wpyr4XdmxB6tOxPVoKtg232KGOAjC/R+w7KkoXhhZnXUHVeGFXWiBgvNUcnJl7t+p6+ABiROx1nzsQxX5Tmgam6tUZ+3RIIt6RSTkH4+3JjfDw8NqGQ29DZ2rxRD87dglGBWZ9lQ5XawUC7m2wnj+eUWBakmXAhqa2W9jY2q/QirtzFnaYwQZbOsu364mHIRM7rdDPD7ozwLkAsOUvkG1e7YmpiKHB6A21hfe3ICEQg+Dr1NZWw79nGiG/JWB8xQHjjbP/4mu8FgDGb6FQjyvBvtxKri3N7AqBgNnXhZds3arNI0QQCWzXEH8tit2mNA2MZw1GM+5Fi5VsR+FbOGfH7ByICt8WGy0ND0/jQ+9qdEDPqVFH5MaZqtKFrEycqBv9DdY1y4h03Uu8D4V2juNxBNYm5cIHlAGlrTUlNX3+EUuVDDodFp+OhBcC474pCBJkJOQHzrSEWY+G4DUb/JQU6TpM4ohGh5U8i12sk6wU3Aj2yLx4UgoBWwZr2tVirnmxSz1/4hNgmk56DcKnWoonFyrV2ar8Ezr+sSO/uX334cwXMlPKpNjvhzbHiwU6A5cKF8PDcPAUAqz0AJDj5N4OK5NNVnJ2VDxxOl1STKnnuFyU3G3S+JYfVdq8k+QeALPeKTnZc8hsvIPBNOXsVB8CCPzjdMAnXn4azu1c24z36SYBb0fySWcYJCsW5miSRcB4lihnS8f4eWoQS+bHEg6ZiMxmqKyqylQDfqGn8QOnfjRcYLf81DwFyil+CVqRbZzimUD/USzcbtgaU71N3HyTuUPLdBAxO/U7EJsTu4WfQ2ePqKFauDS4xwp7SlKdjok7rusKbIAnhg+b5mcxYTkZt3rHjYHFvI0qSwhBPNwi4FYg2qevSMkRMK1EE72RdDONLb/t0OSCODjCblPJlZ/Ov0FtQUPtLzfp1L7WE8XDZiChWjygPII+DWwV2OfsSYXAkVpensNqc1AL/CN0uAsXoblaZVYBfswstxmQvhv3qqFH7DcDNYa2Senh0PlMtFgqcyKcF5m73Mbzcv0LeRtLdnaiYtLxNpokLIilUw1hYDydre7TkaSi5G/xVwLXe8AfEcQJNhKHHzo+sMKBvZOizPTbVJVFwDm6OiUwGWy82ExPlfxriqQ8KnRrn11m7v7rHZviP7TjtJq2xCNfqbFoS6bT+nrIaMHf0y3xckWXLLzhhNYNPOfqryUMWGqMglVaCWzjV1XxYA/+WGYqX2QACN1j/SUA2GE57gDwIdtXKPnfD3jhsaNlbLoKH6+/WHRB3sJ7Hu4lKMJ6HRFFu+nfrFKkC+PSm6FMOrb6YAdiG5LFCjv0crlsB0a5XGIPW23YqRFeRo1GFu/2rTKoNMxKVpdm+7WhuwbbUCdgNMmJEDDVmASBwUIX2O3eiUbmzsCZMqvDzjVFUU/y3q9SVabvNQQMK6zKPgd7kpiIItvX5zZr5RQrHNSlaoGgUnhAgOohVK/YZXdcYeWjCMwObS8ExqYHYux+i50Sq5SfL7wBUVh42dITPc7SJOAEd1kk5wN7poJi20GvkGYNOWs0t+gz2zdE8cUU9uxOpMnuw0C7b/KmCaPdHyxr92IsU+MBbN3OgVMhYNzt5sA83blMz5GW9ejiCxCvu5wmkSOHtZs/arp8c6Mq0/dqe6FqcSD0CibrtMLKeKvUMiwdLNp2V/iDRnaDD5xK4/WRRXYeBoHbaKGwEZpaaLUK+EVQMSUBm3SGOQhMV4oGgGPiBV5IiSam8eXiKy6FxfdpPS3xGw1Aqd2mFATWcUuADXmF75jyI8WwQGJXDtPr2CDt9tRKvcq8MbXn5fqqdVaMA8B44J6ApT1FOfAvc0nDFGGdxRCYVe8U+RaeB2xPgJOiwL74VKL04pprWxdfMPV3CBNxMdjfl4dHojtkbgICb3rXeeJY4vVpHq9UTLO+Okqr1+13L+rjQiJNHWcEg/dB6wt9p7CCW5mpLLwjfD10rRO6oTKve6Bm8nZNpmo7AqYrF6eBJxIWRaG+xLbmU9HrbvS87gqxh9GEsr+/n9gfiTHRpfRKkQFPhldR4wTqzFIJ1maGlmBsNptIJUyriTYXTRutqPzCyCICM1Gzb8s2vV3WVENqMosBs8Oh2nU9pNJ2AFgU7xMvFptkn153Z+s1l8R9hkq9jxm9/W4+JkY9CXNUe8KcOnOD/nEbTbAZrPQ1bYgNZIVV0qUmlXx4wIpJUQ9UUhziJj8Gka7pvSoIzDKbh449UWlR3KrzLz8RfXHtPcTXAP/T+vqLTTIpadnNxyyKXvEiUz00UrrthQPePibIKdSgiYm/aI/4vjaf9XRWolqgWkIGXA3vVNV1D5MBpwLA3cCyZInJ3iavNrGj119RK1x/k2eUeoyCpWyKMQvL/e1GeNTa1fCdJRa/pTNFBRCgniM7699Ikj1E4Xtb+eyVjn14eKizOv6TQiPA6zAtReMPL8CXBV1LBx2aQ3YDQHJ5s8TLXWsPr7+E+NqrPMFSZ/dZY0pzICZvlx+feBdZ183WqlNnbKq1WjZbm/lrGr1KSl45rnrWvUD2IjWzpOdnPnnZu7U+lf1qbhR829tpH6zfK8msLaU5vJZ4cXXA7cdFAReVSr3eizijegE9C93WZ522GeCLzSX0ZJH3xU13Lt94He8bPcEmnZMUY9bt9o3mvGx2Q2zW+fIq7VJYc6fTFN3UF5y9DvHa2TL57np59cY7poWbbhB/2Eix40xELN5ui2waef4mijX9d+VUqFqWbNDteEslIN5c2n144y3iN12p/cv60z3exiNIfPOFwdb8zS9rzlcVEHLZMdMBZvvmPUUxYmejS1gEWd6sPb1hAt/mlvgH619lqekB2H2P+LbXYN9p+KUxWIoMwIfl7E0RCIZIkfJeNpvFss/N2lfrN48bgWFKvChhaQ8EtZvOUFxcaPtxiFlpTLEYOs84Z0eSVSAPe8SbjZZK9t6LW1wSfzMwGS46/QHEtjPABpziooLOPN0xiX+S+J/oP/y/Zfdt4h4ivdS7lJLh3rA3bAUGAxYhMs0Sb7aUtbNvbsN7C2BMBkSp6BTsQslp5mOekEOt0LHCB/4nRvuDfHIgNfPJfpRelIzCT0/7QzHfHMBr+vCa5ukg30yKp3heVzy9pEPRUbxkGt3XaNOSmpe70qBoDaVBdCAN3aYUVIA8lzDuRXLebNaOrmZuNFi3BEZTvWpvlmmUnFOf+KIX4aPXpxuohKYUjSaj4jAqCfm/uFHcUM//JSLmT6NYydN189Jl1R1IQjQpCf3BSMIXNok3ebnrStXIAHy03ahkXVpStDtoSpduVYruXuKNsUKPRgQ+tGvR1qrQy3qjFF19eCveWwGD6fupQQJGYr2PTVCxdWZ1Mug4qnUoSf2BdGkNXQAeRNilV92ui38r5q8ih0npUmo2ETgfvRRcBL5k1VHJSHQoXQpdKdmNYEt+CV4XaUouyLwZofRDsT35ODL9F86ez1uCBenz9Y8GTIvTpk018EAcSYozV4UxnQYv/vISFNCFfwwGqMLiIDp0LfjbQT46HOxK7qUr5l0XVHpoNcVhMz+EHyFwE2y/W4WX7g4GkoVN261oU2qCPjSrzZnaDzH/uKf78o2Wav/nlry3BIYBxKzmv1zaHF3lY1ui5NUihCu52L78ZOXCfDE7rsqWs7x/gQn/hfAd4Oz3qRgApyk3x3kx/O3mhTq4G0ucN1r78rYYtwZ+sP60ZpOE0Wk1+6wQWPzkw1/z8/mgNl3UwXsulZbY/N19em0I/H4SBuI9bJlG+eZNE1fkmCj9CsjTSzX86/7yyhLlukvAW0be9Y8uYabVS3aZnSjV0/VTMfbrCDlwbJp9w0IhDUEFAeP6u/pw/RMBrz/dLW1653bSCtquraSY/3Vo87xTS/7qxwrv0IfEwPvT+j9/IuAH6w+jJZ3zJhJKSxDFra3kr0Hr4YrJi7FMN2UQcWkT5fv5J5Pw+vrDf8mm/GO0FTXyGC+t/NS0eA9zlRl/4TyXSJgMGIj1vTeZuwHcEfjz9cwLJOZn4JW4cYF6Hfukdkr8S7RZZdp8YigyvyoDkyGbtRe38yffX8JfA/GeniBg1shuLIifDDkPi9JV/7hJnmT+8bLGunjwzGdqqb3wavSPBrye+efM85ou86PD2Nht4/z0kyAD5PC0e1ZmF3UCbkdT2U0K7HKQdHT16fo/31Wj7wyMEdiXqyXvVBb2SdrunDDk5McUbfJK6Jk6a8CclwbLnW3aWvdEnEjt/cvD9fcYdwZGYpjIZo4JmBUOaj+e0sUqyY9jkZNX/UhdTkeLvIYapLvBr27KscsyZL32IrP+6wCT6QK1ZtcbsCZJQF4X6PBK7ENhh1f9C5gv6VKVn0DLXy2zu4eoNi3HKiZKoM53nr7vDYyf9NNquRD3rt1BVcupdQjyxWRyOHwvZwSzCI9P13p13Cm1o6x7NRD3T/xbUz0RK6m9Fw/X1389CXO13jNJmw0+tyoVpXVxH1iHu81B0k/w3NKtGJwKkR7rpaCzK9Ix6fP4YqyFDtEAsKrYteeZu3kbHwyMar3+NGqrG36TJNA0M1GRe0IyL1k197h/NRD95M81UgUdFtYiPXbeHWyR/YOXtkv2l9V4blLvxeeOuffm4fr7j/cF5rZrhV+enmNnfHHbvt69wqimZjsjp3t6f5iceyEgKP/wP5/2L3r11opsUo8g8CbcH/wQ8CpSUMMFbtRRrVBuP828rzp/EDAJ+ctomVoh5vhqwVwgs9dtUo1TVgfzU6/3LtbwVkDhFIbQF4S1i97yyTk7PKrICbq4JKXb0aJ/+OHqol7A7pFYsxc4GLZtnGEu9v2s1YcDk5C/2rNVqiisyKZ/AZ6tO05XGLLEelRPJyrBK+Y4AJrcHN25NTkoi2MoXKDM07zJvP96bVuTG6tP1z9wCB/02/BVPwRXE6ZwhQs4xVqrl0pl3TnrN4fezmnJ1lOJ/VdYoPeazgZoJF7n0K1VJ3l2WJMiK6zEjveB8YG3N1rl1ecfKN4PBqa59OWbbIpMVmISt5VLlCwmSQ+syZ3vtVq04eJo7Nb829/ZpB2crkUcR7dLS6wPShA4rm0X7L2vPhz3g4HZEzx9k9Xline/4aaXfIGxVNp0TLMX6V8NF22Xikk8ydR1zs7spWyWNwZJefEYuxpDA1xcel9m1n9zYELOPI1mbS9OJQGzhGKJkhJ62qwUCoWTH3sX3f7pVXN3gKN5hSasuxaJnHXtcnYPk8xRSpnxDAMHzoEXV15F3PUPx/0owGSvMyBlOwX2JyRgr2MeKGhFQcXEM1p0s12hUJfNFbDNZdbjxkswlybAZLVycdXkuL98jEf9OMDrGUJ+sRvFmh5KX3OFnrQIZAuMNrkNke7J8L6ZyRZCmff2oeunFVU5a6zi3P1IuB8LmCGDxY5mS5sTDgLm6knA3DjjZXm0gNnlKeCoD5zCxuKm3XiDfsbMGdHfHhiQUQaZf3uxC0uQXeLyIgmncE3lXcK5hM0FwNkSn8SphJywQbioyw9+WV//BwT21O7hV9HVLNdqT6PpYgNyEeNBYHuuhEEpUmkdaF+QcD/PfMxH/LjAXLMzX34VBTnDglpmwDgbGbBBwJXFEl7COaCXspx2/Zf1jzyEj/2G7BEzD796sZplvdSodjwEzBOPm56Dks1yQ43lZeVsI8ppP7JwPxEw0DITA2b7TbQB7hb60iwIYLmCoM1aYrS0IpVK0exu9MVX/8pk+wloPxEwWTB2NBu0+0W00XD1FHaCZzeYepf0ko/CdojYjG+8efHVlwzz809D++mAfbON/848/QpkvdpooG/tjMyRaTpUiYVGq5RtNFajIFdgZZQvf8l8uof6lMAM2tu4zWT+9enz51+9efMvb6LR6OoqQL558+YFgP7blw8zHuLnnxT2VwBm0M/CrQcyfEz5p79kMp/+YX4NYI/ylwefv5zdqH/w8vNffh3UXxl4joQzv8Fn/ybAv+n4Hfh34N+Bfwf+Hfh34N+Bfwf+Hfh34I80/h8r4yumR0UI0gAAAABJRU5ErkJggg=="); background-repeat:repeat; background-size:120px 120px; background-position:center; opacity:.05; pointer-events:none; z-index:1; } .doc-viewer-stage-inner{ position:relative; } .p-item:hover img{ transform:scale(1.06); } .p-placeholder{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--gray); } .p-placeholder svg{ width:38px; height:38px; opacity:.55; color:var(--gold); } .p-placeholder span{ font-size:12.5px; opacity:.6; } .p-info{ position:absolute; right:0; bottom:0; left:0; inset:auto 0 0 0; padding:20px 20px 18px; background:linear-gradient(0deg, rgba(0,0,0,.86), transparent); transform:translateY(6px); opacity:.92; transition:transform .35s ease; } .p-item:hover .p-info{ transform:translateY(0); } .p-item::after{ content:''; position:absolute; top:0; right:0; bottom:0; left:0; inset:0; border:1px solid transparent; transition:border-color .35s ease, box-shadow .35s ease; pointer-events:none; } .p-item:hover::after{ border-color:rgba(241,199,106,.6); box-shadow:inset 0 0 30px rgba(212,166,74,.12); } .p-info h4{ font-size:15.5px; margin-bottom:4px; } .p-info span{ font-size:12px; color:var(--gold); font-family:'Poppins',sans-serif; letter-spacing:1px; } /* ---------------- RESEARCH DOC CARDS ---------------- */ .p-doc{ cursor:pointer; } .p-doc img{ width:100%; height:100%; object-fit:cover; position:absolute; top:0; right:0; bottom:0; left:0; inset:0; } .p-doc-badge{ position:absolute; top:14px; right:14px; display:flex; align-items:center; gap:6px; background:rgba(5,14,32,0.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); border:1px solid rgba(241,199,106,.35); border-radius:20px; padding:6px 12px; color:var(--gold-bright); font-size:11.5px; font-family:'Poppins',sans-serif; letter-spacing:.5px; } .p-doc-badge svg{ width:14px; height:14px; } /* ---------------- DOC VIEWER ---------------- */ .doc-viewer{ position:fixed; top:0; right:0; bottom:0; left:0; inset:0; z-index:2100; background:rgba(5,14,32,0.96); display:none; flex-direction:column; opacity:0; transition:opacity .3s ease; } .doc-viewer.open{ display:flex; opacity:1; } .doc-viewer-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; background:rgba(255,255,255,0.03); border-bottom:1px solid var(--line); flex-wrap:wrap; } .doc-viewer-title{ display:flex; flex-direction:column; gap:2px; min-width:0; } .doc-viewer-title strong{ font-size:14.5px; color:var(--off-white); font-family:'Cairo',sans-serif; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:46vw; } .doc-viewer-title span{ font-size:11.5px; color:var(--gold); font-family:'Poppins',sans-serif; letter-spacing:1px; } .doc-viewer-controls{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .dv-btn{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid var(--line); color:var(--off-white); cursor:pointer; transition:background .25s ease, border-color .25s ease; } .dv-btn:hover{ background:rgba(255,255,255,0.14); border-color:var(--gold); } .dv-btn svg{ width:17px; height:17px; } .dv-btn:disabled{ opacity:.35; cursor:not-allowed; } .dv-btn:disabled:hover{ background:rgba(255,255,255,0.06); border-color:var(--line); } .dv-zoom-pct{ min-width:48px; text-align:center; font-size:12.5px; color:var(--gray); font-family:'Poppins',sans-serif; } .dv-page-input{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--gray); font-family:'Poppins',sans-serif; } .dv-page-input input{ width:44px; text-align:center; background:rgba(255,255,255,0.05); border:1px solid var(--line); border-radius:4px; color:var(--off-white); padding:6px 4px; font-family:'Poppins',sans-serif; font-size:12.5px; } .dv-page-input input:focus{ outline:none; border-color:var(--gold); } .dv-sep{ width:1px; height:22px; background:var(--line); margin:0 2px; } .doc-viewer-stage{ flex:1; position:relative; overflow:auto; display:flex; align-items:flex-start; justify-content:center; padding:26px 16px; } .doc-viewer-stage-inner{ display:flex; align-items:center; justify-content:center; min-height:100%; width:100%; } .doc-viewer-stage img{ max-width:min(880px, 92vw); width:100%; height:auto; box-shadow:0 20px 60px rgba(0,0,0,.55); border-radius:4px; background:#fff; transition:transform .25s ease; transform-origin:top center; user-select:none; -webkit-user-drag:none; } .doc-viewer-nav{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:rgba(47,143,239,0.12); border:1px solid rgba(47,143,239,0.55); color:#5aaeff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .25s ease, border-color .25s ease, color .25s ease; z-index:2; } .doc-viewer-nav:hover{ background:rgba(47,143,239,0.28); border-color:#5aaeff; color:#8cc7ff; } .doc-viewer-nav.prev{ right:16px; } .doc-viewer-nav.next{ left:16px; } .doc-viewer-nav svg{ width:22px; height:22px; } .doc-viewer-nav:disabled{ opacity:.25; cursor:not-allowed; } .doc-viewer-hint{ text-align:center; padding:8px; color:var(--gray); font-size:11.5px; font-family:'Poppins',sans-serif; letter-spacing:.5px; border-top:1px solid var(--line); } @media (max-width:680px){ .doc-viewer-title strong{ max-width:60vw; font-size:13px; } .doc-viewer-bar{ padding:10px 12px; gap:8px; } .dv-btn{ width:34px; height:34px; } .doc-viewer-nav{ width:40px; height:40px; } .doc-viewer-nav.prev{ right:8px; } .doc-viewer-nav.next{ left:8px; } .dv-page-input{ order:1; } } /* ---------------- LIGHTBOX ---------------- */ .lightbox{ position:fixed; top:0; right:0; bottom:0; left:0; inset:0; z-index:2000; background:rgba(5,14,32,0.94); display:none; align-items:center; justify-content:center; padding:70px 20px; opacity:0; transition:opacity .3s ease; } .lightbox.open{ display:flex; opacity:1; } .lightbox-stage{ position:relative; max-width:min(92vw, 1000px); max-height:78vh; overflow:hidden; border-radius:6px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; background:var(--bg); touch-action:none; } .lightbox-stage img{ max-width:100%; max-height:78vh; display:block; cursor:zoom-in; transition:transform .25s ease; transform-origin:center center; touch-action:none; will-change:transform; } .lightbox-stage img.zoomed{ cursor:zoom-out; } .lightbox-caption{ text-align:center; margin-top:18px; color:var(--off-white); font-family:'Cairo',sans-serif; font-weight:700; font-size:15px; } .lightbox-caption span{ display:block; margin-top:4px; color:var(--gold); font-size:12px; font-family:'Poppins',sans-serif; letter-spacing:1px; font-weight:400; } .lightbox-close{ position:absolute; top:20px; left:20px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid var(--line); color:var(--off-white); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .3s ease, border-color .3s ease; } .lightbox-close:hover{ background:rgba(255,255,255,0.14); border-color:var(--gold); } .lightbox-close svg{ width:20px; height:20px; } .lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid var(--line); color:var(--off-white); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .3s ease, border-color .3s ease; z-index:2; } .lightbox-nav:hover{ background:rgba(255,255,255,0.14); border-color:var(--gold); } .lightbox-nav svg{ width:22px; height:22px; } .lightbox-prev{ right:10px; } .lightbox-next{ left:10px; } .lightbox-hint{ text-align:center; margin-top:8px; color:var(--gray); font-size:11.5px; } @media (max-width:640px){ .lightbox{ padding:70px 10px 40px; } .lightbox-nav{ width:40px; height:40px; } .lightbox-nav svg{ width:18px; height:18px; } .lightbox-close{ width:38px; height:38px; top:12px; left:12px; } } /* ---------------- WHY ---------------- */ .why{ background:var(--bg); } .why-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-bottom:60px; } .stat-card{ text-align:center; padding:38px 24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--graphite); transition:border-color .35s ease, transform .35s ease; } .stat-card:hover{ border-color:rgba(241,199,106,.55); transform:translateY(-4px); } .stat-card .stat-num{ font-family:'Cairo',sans-serif; font-weight:900; font-size:clamp(30px,4vw,44px); background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep)); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; margin-bottom:12px; direction:ltr; } .stat-card p{ color:var(--off-white); font-size:14.5px; } .why-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; } .why-item{ text-align:center; padding:40px 26px 34px; border:1px solid var(--line); border-radius:var(--radius); background:var(--graphite); transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .why-item:hover{ transform:translateY(-7px); border-color:rgba(241,199,106,.5); box-shadow:0 18px 38px -20px rgba(212,166,74,.4); } .why-icon{ width:56px; height:56px; margin:0 auto 16px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(241,199,106,.14); border:1px solid rgba(241,199,106,.35); color:var(--gold-bright); transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; } .why-icon svg{ width:25px; height:25px; } .why-item:hover .why-icon{ transform:scale(1.1) rotate(-6deg); box-shadow:0 0 0 8px rgba(241,199,106,.08); } .why-item .num{ display:block; font-size:11.5px; font-weight:800; letter-spacing:1.5px; color:var(--gray); margin-bottom:8px; font-family:'Poppins',sans-serif; } .why-item h4{ font-size:17px; margin-bottom:10px; } .why-item p{ font-size:14px; color:var(--gray); } /* ---------------- CERTIFICATIONS + TAGLINE ---------------- */ .certs{ margin-top:70px; text-align:center; } .certs-head{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:30px; } .certs-head svg{ width:26px; height:26px; color:var(--gold); flex-shrink:0; } .certs-head h3{ font-size:21px; } .certs-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } .cert-chip{ position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:30px 18px 24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--graphite); font-size:13.5px; color:var(--off-white); transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease; cursor:pointer; font-family:'Tajawal', sans-serif; } .cert-chip::before{ content:''; position:absolute; inset:0; opacity:0; background:rgba(212,166,74,.08); transition:opacity .35s ease; pointer-events:none; } .cert-chip:hover{ border-color:var(--gold); transform:translateY(-6px); box-shadow:0 18px 36px -20px rgba(212,166,74,.5); } .cert-chip:hover::before{ opacity:1; } .cert-card-icon{ position:relative; z-index:1; width:56px; height:56px; margin-bottom:4px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(241,199,106,.14); border:1px solid rgba(241,199,106,.4); color:var(--gold-bright); transition:transform .4s cubic-bezier(.2,.7,.2,1); } .cert-chip:hover .cert-card-icon{ transform:scale(1.08) rotate(6deg); } .cert-card-icon svg{ width:24px; height:24px; } .cert-chip > span{ position:relative; z-index:1; font-weight:700; line-height:1.5; } .cert-chip .src{ position:relative; z-index:1; color:var(--gray); font-size:11.5px; font-family:'Poppins',sans-serif; letter-spacing:.5px; font-weight:500; } .cert-card-cta{ position:relative; z-index:1; display:flex; align-items:center; gap:6px; margin-top:8px; font-size:12px; color:var(--gray); opacity:.7; transition:color .3s ease, opacity .3s ease; } .cert-chip:hover .cert-card-cta{ color:var(--gold-bright); opacity:1; } .cert-card-cta svg{ width:15px; height:15px; flex-shrink:0; } /* ---------------- CERTIFICATE MODAL ---------------- */ .cert-modal{ position:fixed; top:0; right:0; bottom:0; left:0; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; padding:80px 16px 40px; opacity:0; transition:opacity .3s ease; } .cert-modal.open{ display:flex; opacity:1; } .cert-modal-backdrop{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; background:rgba(6,16,36,0.86); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .cert-modal-box{ position:relative; z-index:1; max-width:min(760px, 94vw); max-height:100%; width:100%; background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:22px 22px 26px; overflow-y:auto; box-shadow:0 30px 70px -20px rgba(0,0,0,.6); animation:certPop .35s cubic-bezier(.2,.7,.2,1); } @keyframes certPop{ from{ transform:scale(.94) translateY(10px); opacity:0; } to{ transform:scale(1) translateY(0); opacity:1; } } .cert-modal-title{ font-family:'Cairo', sans-serif; font-weight:800; font-size:18px; color:var(--gold-bright); margin-bottom:16px; padding-inline-end:40px; } .cert-modal-img-wrap{ border-radius:6px; overflow:hidden; border:1px solid var(--line); background:#fff; line-height:0; } .cert-modal-img-wrap img{ width:100%; height:auto; display:block; } .cert-modal-close{ position:absolute; top:16px; left:16px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--off-white); transition:background .25s ease, border-color .25s ease; } .cert-modal-close:hover{ background:rgba(255,255,255,0.14); border-color:var(--gold); } .cert-modal-close svg{ width:18px; height:18px; } @media (max-width:480px){ .cert-modal{ padding:70px 10px 24px; } .cert-modal-box{ padding:18px 16px 20px; } } .why-tagline{ margin-top:60px; text-align:center; padding:38px 30px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg2); display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; } .why-tagline svg{ width:26px; height:26px; color:var(--gold-bright); flex-shrink:0; } .why-tagline p{ font-family:'Cairo',sans-serif; font-weight:700; font-size:clamp(15px,2vw,18.5px); color:var(--gold-bright); max-width:640px; } /* ---------------- HOW IT WORKS ---------------- */ .how{ background:var(--bg2); } .steps{ position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; } .steps::before{ content:''; position:absolute; top:62px; right:6%; left:6%; height:1px; background:linear-gradient(90deg, transparent, var(--gold) 15%, var(--gold) 85%, transparent); opacity:.5; } .step{ position:relative; text-align:center; padding:34px 22px 30px; border:1px solid var(--line); border-radius:var(--radius); background:var(--graphite); transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .step:hover{ transform:translateY(-7px); border-color:rgba(241,199,106,.5); box-shadow:0 18px 38px -20px rgba(212,166,74,.4); } .step-dot{ width:56px; height:56px; margin:0 auto 24px; border-radius:50%; border:1px solid var(--gold); background:#0f2444; display:flex; align-items:center; justify-content:center; color:var(--gold-bright); position:relative; z-index:2; transition:transform .4s cubic-bezier(.2,.7,.2,1); } .step:hover .step-dot{ transform:scale(1.08); } .step-dot svg{ width:24px; height:24px; } .step-num{ position:absolute; bottom:-6px; inset-inline-end:-6px; width:22px; height:22px; border-radius:50%; background:var(--gold); color:#0a1a38; font-family:'Cairo',sans-serif; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg2); } .step h4{ font-size:16.5px; margin-bottom:10px; } .step p{ font-size:13.5px; color:var(--gray); max-width:230px; margin:0 auto; } /* ---------------- ORDER FORM ---------------- */ .order{ background:var(--bg); } .response-time-badge{ max-width:720px; margin:0 auto 28px; display:flex; flex-wrap:wrap; justify-content:center; gap:14px; } .rt-item{ display:flex; align-items:center; gap:9px; background:var(--graphite); border:1px solid var(--line); border-radius:24px; padding:10px 18px; font-size:13px; color:var(--off-white); } .rt-item svg{ width:17px; height:17px; color:var(--gold-bright); flex-shrink:0; } .order-box{ max-width:720px; margin:0 auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--graphite); padding:48px 40px; } .order-fallback{ margin-top:22px; padding:18px 20px; border:1px dashed var(--line); border-radius:4px; text-align:center; } .order-fallback p{ font-size:13px; color:var(--gray); margin-bottom:14px; } .order-fallback-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; } .order-fallback-actions .btn{ padding:10px 18px; font-size:13px; gap:8px; } .order-fallback-actions a.btn{ direction:ltr; } .clear-draft-row{ text-align:center; margin-top:16px; } .clear-draft-btn{ background:none; border:none; color:var(--gray); font-size:12px; text-decoration:underline; cursor:pointer; } .clear-draft-btn:hover{ color:var(--gold-bright); } .form-row{ margin-bottom:22px; } .form-row label{ display:block; font-size:14px; color:var(--gold-bright); margin-bottom:9px; font-family:'Cairo',sans-serif; font-weight:700; } .form-row input, .form-row select{ width:100%; background:#0f2444; border:1px solid var(--line); border-radius:4px; padding:14px 16px; color:var(--off-white); font-family:'Tajawal',sans-serif; font-size:15px; transition:border-color .3s ease; } .form-row input::placeholder{ color:#6b6b6b; } .form-row input:focus, .form-row select:focus{ outline:none; border-color:var(--gold); } .form-row select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:left 14px center; background-size:16px; cursor:pointer; } .form-row select option{ background:#0f2444; color:var(--off-white); } .form-row select:disabled, .field select:disabled{ opacity:.45; cursor:not-allowed; } .form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } .order-submit{ width:100%; justify-content:center; margin-top:8px; border:none; } .order-note{ text-align:center; font-size:13px; color:var(--gray); margin-top:18px; } .file-note{ font-size:13px; color:var(--gray); text-align:center; margin-top:14px; line-height:1.7; } .promo-input-wrap{ position:relative; } .promo-input-wrap svg{ position:absolute; top:50%; left:14px; transform:translateY(-50%); width:16px; height:16px; color:var(--gold); pointer-events:none; } .promo-input-wrap input{ padding-left:38px; } .dyn-group{ display:none; } .dyn-group textarea::placeholder{ color:#6b6b6b; } .dyn-group textarea:focus{ outline:none; border-color:var(--gold); } @media (max-width:640px){ .order-box{ padding:34px 22px; } .form-grid-2{ grid-template-columns:1fr; gap:0; } } /* ---------------- ORDER PRICING NOTE ---------------- */ .pricing-note{ display:flex; align-items:flex-start; gap:14px; max-width:640px; margin:26px auto 0; background:rgba(212,166,74,.08); border:1px solid var(--line); border-radius:var(--radius); padding:20px 24px; text-align:right; } .pricing-note svg{ width:24px; height:24px; color:var(--gold-bright); flex-shrink:0; margin-top:2px; } .pricing-note p{ font-size:14px; color:var(--off-white); line-height:1.9; margin:0; } .pricing-note strong{ color:var(--gold-bright); } @media (max-width:640px){ .pricing-note{ flex-direction:column; align-items:center; text-align:center; } } /* ---------------- REVIEWS ---------------- */ .reviews{ background:var(--bg); } /* ---------------- FOUNDER ---------------- */ .founder{ background:var(--bg2); } .founder-grid{ display:flex; gap:48px; align-items:flex-start; flex-wrap:wrap; } .founder-photo-col{ display:flex; flex-direction:column; align-items:center; gap:20px; flex:0 0 300px; max-width:300px; margin:0 auto; } .founder-photo-frame{ position:relative; width:100%; border-radius:18px; padding:7px; background:var(--gold); box-shadow:0 25px 55px -15px rgba(0,0,0,.6); } .founder-photo{ display:block; width:100%; height:auto; border-radius:13px; } .founder-photo-badge{ position:absolute; bottom:-14px; left:50%; transform:translateX(-50%); background:var(--gold); color:#0a1a38; font-size:11px; font-weight:800; letter-spacing:1.5px; padding:7px 18px; border-radius:999px; white-space:nowrap; box-shadow:0 8px 18px rgba(0,0,0,.4); } .founder-cta{ position:relative; overflow:hidden; isolation:isolate; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:16px 22px; border-radius:999px; background:linear-gradient(135deg, #2EE07A 0%, #25D366 50%, #128C4A 100%); border:1.5px solid rgba(255,255,255,.28); color:#04170c; font-weight:800; font-size:15.5px; text-decoration:none; box-shadow:0 12px 28px -10px rgba(37,211,102,.65), 0 2px 0 rgba(255,255,255,.35) inset; animation:founderWaPulse 2.6s ease-out infinite; transition:transform .25s ease, box-shadow .25s ease, filter .25s ease; } /* soft light sweep across the button so it reads as "tap me" */ .founder-cta::before{ content:""; position:absolute; inset-block:0; width:45%; z-index:-1; pointer-events:none; inset-inline-start:-60%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform:skewX(-20deg); animation:founderWaSheen 3.8s ease-in-out infinite; } .founder-cta:hover, .founder-cta:focus-visible{ transform:translateY(-3px); filter:brightness(1.06); outline:none; animation:none; box-shadow:0 18px 36px -10px rgba(37,211,102,.85), 0 2px 0 rgba(255,255,255,.35) inset; } .founder-cta:focus-visible{ box-shadow:0 0 0 4px rgba(37,211,102,.4), 0 18px 36px -10px rgba(37,211,102,.85); } .founder-cta:active{ transform:translateY(-1px) scale(.98); } .founder-cta svg{ flex-shrink:0; } .founder-cta .founder-cta-arrow{ width:18px; height:18px; transition:transform .25s ease; } html[dir="rtl"] .founder-cta .founder-cta-arrow{ transform:scaleX(-1); } html[dir="ltr"] .founder-cta:hover .founder-cta-arrow{ transform:translateX(4px); } html[dir="rtl"] .founder-cta:hover .founder-cta-arrow{ transform:scaleX(-1) translateX(4px); } @keyframes founderWaPulse{ 0%{ box-shadow:0 12px 28px -10px rgba(37,211,102,.65), 0 2px 0 rgba(255,255,255,.35) inset, 0 0 0 0 rgba(37,211,102,.55); } 70%,100%{ box-shadow:0 12px 28px -10px rgba(37,211,102,.65), 0 2px 0 rgba(255,255,255,.35) inset, 0 0 0 16px rgba(37,211,102,0); } } @keyframes founderWaSheen{ 0%,55%{ inset-inline-start:-60%; } 100%{ inset-inline-start:130%; } } @media (prefers-reduced-motion:reduce){ .founder-cta, .founder-cta::before{ animation:none; } } .founder-info{ flex:1; min-width:280px; } .founder-name{ font-size:30px; font-weight:800; letter-spacing:.5px; margin-bottom:14px; background:linear-gradient(90deg, var(--gold-bright), var(--off-white)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .founder-roles{ display:flex; flex-direction:column; gap:6px; margin-bottom:26px; } .founder-roles span{ font-size:12.5px; letter-spacing:1px; color:var(--gold); font-weight:700; } .founder-story-card{ position:relative; overflow:hidden; padding:32px 34px; border-radius:var(--radius); background:rgba(212,166,74,.08); border:1px solid var(--line); border-inline-start:3px solid var(--gold); } .founder-quote{ color:var(--gold); opacity:.5; margin-bottom:6px; } .founder-hook{ font-family:'Cairo', sans-serif; font-weight:700; font-size:17px; line-height:2; color:var(--off-white); white-space:pre-line; margin-bottom:22px; } .founder-story-divider{ height:1px; margin:0 0 22px; background:linear-gradient(90deg, var(--gold), transparent); } .founder-story-card p{ color:var(--gray); margin-bottom:14px; } .founder-tags{ display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; } .founder-tags span{ font-family:'Poppins', sans-serif; font-size:11.5px; letter-spacing:1px; padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:rgba(212,166,74,.08); color:var(--gold-bright); } .founder-goal{ font-weight:700; color:var(--off-white) !important; padding:16px 20px; border-radius:var(--radius); background:rgba(212,166,74,.1); border:1px solid var(--line); margin-bottom:0 !important; } .founder-tagline{ margin:56px auto 0; text-align:center; padding:28px 52px; border-radius:16px; position:relative; overflow:hidden; background:rgba(212,166,74,.08); border:1px solid var(--line); box-shadow:0 25px 50px -25px rgba(0,0,0,.55); display:flex; flex-direction:column; align-items:center; gap:8px; width:fit-content; max-width:100%; } .founder-tagline::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg, transparent, var(--gold), var(--gold-bright), var(--gold), transparent); } .founder-tagline strong{ font-family:'Cairo', sans-serif; font-size:24px; font-weight:800; letter-spacing:4px; white-space:nowrap; background:linear-gradient(90deg, var(--gold-bright), var(--gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .founder-tagline span{ font-family:'Poppins', sans-serif; font-size:13px; letter-spacing:1.5px; line-height:1.9; color:var(--gray); text-transform:uppercase; } @media (max-width:760px){ .founder-tagline{ padding:26px 32px; } .founder-tagline strong{ white-space:normal; } .founder-grid{ flex-direction:column; text-align:center; } .founder-roles{ align-items:center; } .founder-tags{ justify-content:center; } /* the photo stays compact, but the WhatsApp button gets its own, wider, one-line row */ .founder-photo-col{ flex:0 0 auto; width:100%; max-width:none; gap:34px; } .founder-photo-frame{ width:240px; max-width:100%; } .founder-cta{ width:100%; max-width:340px; min-height:52px; padding:13px 20px; gap:9px; font-size:15px; line-height:1.3; white-space:nowrap; } .founder-cta svg:first-child{ width:20px; height:20px; } .founder-cta .founder-cta-arrow{ width:16px; height:16px; } .founder-hook{ text-align:center; } .founder-story-card{ padding:26px 22px; text-align:right; } } @media (max-width:360px){ .founder-cta{ font-size:14px; padding:12px 14px; gap:7px; } } .reviews-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } .review-card{ background:var(--graphite); border:1px solid var(--line); border-radius:var(--radius); padding:30px; } .review-shot{ border:1px dashed rgba(154,166,184,.35); border-radius:4px; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; color:var(--gray); font-size:12.5px; margin-bottom:20px; text-align:center; padding:14px; } .review-card .stu{ font-size:13px; color:var(--gold); font-family:'Poppins',sans-serif; letter-spacing:.5px; } .rate-box{ max-width:560px; margin:56px auto 0; text-align:center; border:1px solid var(--line); border-radius:var(--radius); background:var(--graphite); padding:40px 34px; } .rate-box h3{ font-size:20px; margin-bottom:8px; } .rate-box p{ font-size:13.5px; color:var(--gray); margin-bottom:22px; } .rate-stars{ display:flex; justify-content:center; gap:8px; } .rate-star{ background:none; border:none; font-size:34px; line-height:1; color:#2a4a7a; cursor:pointer; transition:color .2s ease, transform .2s ease; } .rate-star:hover, .rate-star.hovered{ transform:scale(1.15); } .rate-star.selected{ color:var(--gold-bright); } .rate-comment-wrap{ display:none; margin-top:22px; flex-direction:column; gap:14px; } .rate-comment-wrap.show{ display:flex; } .rate-comment-wrap textarea{ width:100%; background:#132b4f; border:1px solid var(--line); border-radius:4px; padding:14px 16px; color:var(--off-white); font-family:'Tajawal',sans-serif; font-size:14px; resize:vertical; } .rate-comment-wrap textarea:focus{ outline:none; border-color:var(--gold); } .rate-comment-wrap .btn{ align-self:center; } /* ---------------- REVIEWS CAROUSEL ---------------- */ .reviews-carousel{ position:relative; max-width:460px; margin:0 auto 56px; } .rc-viewport{ position:relative; overflow:hidden; direction:ltr; border-radius:var(--radius); border:1px solid var(--line); background:var(--graphite); cursor:grab; transition:height .4s ease; } .rc-viewport.dragging{ cursor:grabbing; } .rc-track{ display:flex; align-items:flex-start; width:100%; transition:transform .5s cubic-bezier(.4,0,.2,1); will-change:transform; } .rc-track.no-transition{ transition:none; } .rc-slide{ flex:0 0 100%; width:100%; display:flex; align-items:center; justify-content:center; padding:22px; box-sizing:border-box; } .rc-slide img{ width:100%; height:auto; display:block; border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.4); pointer-events:none; -webkit-user-drag:none; } .rc-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%; background:rgba(8,19,42,.75); border:1px solid var(--line); color:var(--gold-bright); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .25s ease, border-color .25s ease; z-index:3; } .rc-arrow:hover{ background:rgba(212,166,74,.22); border-color:rgba(241,199,106,.5); } .rc-arrow svg{ width:18px; height:18px; } .rc-prev{ left:-10px; } .rc-next{ right:-10px; } .rc-dots{ display:flex; justify-content:center; align-items:center; gap:7px; margin-top:18px; flex-wrap:wrap; max-width:340px; margin-inline:auto; } .rc-dot{ width:7px; height:7px; border-radius:50%; background:#2a4a7a; border:none; padding:0; cursor:pointer; transition:background .25s ease, transform .25s ease; flex-shrink:0; } .rc-dot.active{ background:var(--gold-bright); transform:scale(1.4); } @media (max-width:560px){ .reviews-carousel{ max-width:100%; } .rc-arrow{ width:32px; height:32px; } .rc-prev{ left:4px; } .rc-next{ right:4px; } .rc-slide{ padding:16px; } } /* ---------------- FAQ ---------------- */ .faq{ background:var(--bg2); } .faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px; } .faq-item{ border:1px solid var(--line); border-radius:var(--radius); background:var(--graphite); overflow:hidden; transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease; } .faq-item:hover{ border-color:rgba(241,199,106,.3); transform:translateY(-2px); } .faq-item.open{ border-color:rgba(241,199,106,.5); box-shadow:0 14px 30px -20px rgba(212,166,74,.4); } .faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 26px; background:none; border:none; text-align:right; font-family:'Cairo',sans-serif; font-weight:700; font-size:16px; color:var(--off-white); cursor:pointer; } .faq-q .faq-icon{ flex-shrink:0; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--gold-bright); transition:transform .35s cubic-bezier(.2,.7,.2,1), background .3s ease, border-color .3s ease; } .faq-item:hover .faq-q .faq-icon{ border-color:rgba(241,199,106,.5); } .faq-q .faq-icon svg{ width:14px; height:14px; transition:transform .35s ease; } .faq-item.open .faq-q .faq-icon{ background:var(--gold); border-color:var(--gold); color:#0a1a38; transform:rotate(180deg); } .faq-a-wrap{ max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.2,.7,.2,1); } .faq-a{ padding:0 26px 24px; color:var(--gray); font-size:14.5px; line-height:1.85; } .faq-cta{ max-width:560px; margin:34px auto 0; text-align:center; padding:26px 24px; border:1px solid rgba(241,199,106,.3); border-radius:var(--radius); background:var(--graphite); display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; } .faq-cta p{ font-family:'Cairo',sans-serif; font-weight:700; font-size:15px; color:var(--off-white); margin:0; } @media (max-width:480px){ .faq-cta{ flex-direction:column; gap:14px; } } /* ---------------- BACK TO TOP ---------------- */ .back-to-top{ position:fixed; bottom:26px; right:26px; z-index:900; width:50px; height:50px; border-radius:50%; background:var(--graphite); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--gold-bright); opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .3s ease, transform .3s ease, border-color .3s ease, background .3s ease; } .back-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); } .back-to-top:hover{ border-color:var(--gold); background:#214677; } .back-to-top svg{ width:20px; height:20px; } /* ---------------- SCROLL REVEAL ---------------- */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .reveal.in-view{ opacity:1; transform:translateY(0); } /* Staggered cascade for grid/list reveals — gives scroll entrances a professional flow */ .services-grid .reveal:nth-child(1), .reviews-grid .reveal:nth-child(1), .steps .reveal:nth-child(1), .faq-list .reveal:nth-child(1), .payment-grid .reveal:nth-child(1), #portfolioGrid .reveal:nth-child(1), .amb-benefits .reveal:nth-child(1), .amb-steps .reveal:nth-child(1), .amb-info-grid .reveal:nth-child(1){ transition-delay:.05s; } .services-grid .reveal:nth-child(2), .reviews-grid .reveal:nth-child(2), .steps .reveal:nth-child(2), .faq-list .reveal:nth-child(2), .payment-grid .reveal:nth-child(2), #portfolioGrid .reveal:nth-child(2), .amb-benefits .reveal:nth-child(2), .amb-steps .reveal:nth-child(2), .amb-info-grid .reveal:nth-child(2){ transition-delay:.12s; } .services-grid .reveal:nth-child(3), .reviews-grid .reveal:nth-child(3), .steps .reveal:nth-child(3), .faq-list .reveal:nth-child(3), #portfolioGrid .reveal:nth-child(3), .amb-benefits .reveal:nth-child(3), .amb-steps .reveal:nth-child(3){ transition-delay:.19s; } .services-grid .reveal:nth-child(4), .steps .reveal:nth-child(4), .faq-list .reveal:nth-child(4), #portfolioGrid .reveal:nth-child(4), .amb-benefits .reveal:nth-child(4), .amb-steps .reveal:nth-child(4){ transition-delay:.26s; } .faq-list .reveal:nth-child(5), #portfolioGrid .reveal:nth-child(5), .amb-steps .reveal:nth-child(5){ transition-delay:.33s; } .faq-list .reveal:nth-child(6), #portfolioGrid .reveal:nth-child(6), .amb-steps .reveal:nth-child(6){ transition-delay:.4s; } #portfolioGrid .reveal:nth-child(7){ transition-delay:.47s; } #portfolioGrid .reveal:nth-child(8){ transition-delay:.54s; } /* ---------------- AMBASSADOR PROGRAM ---------------- */ .ambassador{ background:var(--bg2); } .amb-benefits{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; margin-bottom:48px; } .amb-benefit{ text-align:center; padding:28px 18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--graphite); transition:transform .35s ease, border-color .35s ease; } .amb-benefit:hover{ transform:translateY(-4px); border-color:rgba(241,199,106,.5); } .amb-benefit svg{ width:30px; height:30px; color:var(--gold-bright); margin-bottom:14px; } .amb-benefit h4{ font-size:14.5px; } .amb-commission{ display:flex; align-items:center; gap:14px; justify-content:center; max-width:680px; margin:0 auto 52px; background:rgba(212,166,74,.08); border:1px solid var(--line); border-radius:var(--radius); padding:18px 24px; text-align:center; } .amb-commission svg{ width:22px; height:22px; color:var(--gold-bright); flex-shrink:0; } .amb-commission p{ font-size:13.5px; color:var(--gray); margin:0; } .amb-sub-title{ text-align:center; font-size:22px; margin-bottom:34px; } .amb-steps-rows{ display:flex; flex-direction:column; gap:34px; } .amb-steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 24px; } .amb-step{ text-align:center; } .amb-step p{ font-size:13.5px; color:var(--gray); max-width:220px; margin:14px auto 0; } .amb-info-list{ max-width:820px; margin:0 auto 44px; display:flex; flex-direction:column; gap:14px; } .amb-info-item{ border:1px solid var(--line); border-radius:var(--radius); background:var(--graphite); overflow:hidden; transition:border-color .3s ease; } .amb-info-item.open{ border-color:rgba(241,199,106,.5); } .amb-info-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 26px; background:none; border:none; text-align:right; font-family:'Cairo',sans-serif; font-weight:700; font-size:16px; color:var(--gold-bright); cursor:pointer; } .amb-info-a-wrap{ max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.2,.7,.2,1); } .amb-info-a{ padding:0 26px 24px; color:var(--gray); font-size:14.5px; line-height:1.85; } .amb-form-box{ max-width:720px; margin:0 auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--graphite); padding:44px 40px; } .amb-form-box h3{ text-align:center; font-size:19px; margin-bottom:26px; } /* ---- Registration progress bar ---- */ .amb-progress-wrap{ margin-bottom:30px;} .amb-progress-label{ display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; font-size:13px; color:var(--text-muted, #9aa4b2); font-weight:600; } .amb-progress-pct{ font-weight:800; color:var(--gold); font-size:13.5px; font-variant-numeric:tabular-nums; transition:color .3s; } .amb-progress-track{ position:relative; height:9px; border-radius:20px; background:rgba(255,255,255,.07); overflow:hidden; border:1px solid rgba(255,255,255,.06); } .amb-progress-fill{ height:100%; width:0%; border-radius:20px; background:linear-gradient(90deg, var(--gold) 0%, var(--gold-bright, #e3c275) 100%); box-shadow:0 0 12px rgba(201,162,75,.6); transition:width .45s cubic-bezier(.4,0,.2,1); position:relative; } .amb-progress-fill::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); width:40%; animation:ambProgressShine 1.8s ease-in-out infinite; } .amb-progress-fill.is-complete{ box-shadow:0 0 16px rgba(76,175,107,.7); background:linear-gradient(90deg, #4caf6b, #7bd39a);} @keyframes ambProgressShine{ 0%{ transform:translateX(-120%);} 100%{ transform:translateX(280%);} } @media (prefers-reduced-motion: reduce){ .amb-progress-fill::after{ animation:none;} } @media (max-width:860px){ .amb-benefits{ grid-template-columns:repeat(2,minmax(0,1fr)); } .amb-steps{ gap:24px 10px; } } @media (max-width:640px){ .amb-form-box{ padding:34px 22px; } } @media (max-width:480px){ .amb-steps{ gap:20px 6px; } .amb-steps-line .step-dot{ width:40px; height:40px; margin-bottom:12px; font-size:14px; } .amb-step p{ font-size:12px; line-height:1.5; max-width:none; } } /* ---------------- AMBASSADOR TOGGLES ---------------- */ .amb-content{ padding-top:52px; } .amb-toggle-icon{ display:inline-flex; width:20px; height:20px; transition:transform .35s cubic-bezier(.2,.7,.2,1); } .amb-toggle-icon svg{ width:100%; height:100%; } [aria-expanded="true"] .amb-toggle-icon{ transform:rotate(180deg); } .amb-toggle-wrap{ max-height:0; overflow:hidden; transition:max-height .6s cubic-bezier(.2,.7,.2,1); } .amb-toggle-wrap.open{ max-height:6000px; } /* ---- hero attention badges ---- */ .amb-hero-badges{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin:26px 0 8px; } .amb-hero-badge{ display:inline-flex; align-items:center; gap:9px; padding:11px 20px; border:1px solid rgba(241,199,106,.4); border-radius:999px; background:rgba(212,166,74,.1); font-size:13.5px; font-weight:700; color:var(--gold-bright); transition:transform .3s ease, background .3s ease; } .amb-hero-badge:hover{ transform:translateY(-3px); background:rgba(212,166,74,.18); } .amb-hero-badge svg{ width:18px; height:18px; flex-shrink:0; } /* ---- "how it works" as a connected timeline ---- */ .amb-steps-line{ position:relative; } .amb-steps-line .step-dot{ position:relative; font-family:'Cairo',sans-serif; font-weight:800; font-size:18px; transition:transform .3s ease, box-shadow .3s ease; } .amb-steps-line .amb-step:hover .step-dot{ transform:scale(1.1); box-shadow:0 0 0 6px rgba(212,166,74,.14); } @media (min-width:861px){ .amb-steps-line::before{ content:''; position:absolute; top:23px; left:16.5%; right:16.5%; height:2px; background:linear-gradient(90deg, transparent, rgba(212,166,74,.4) 15%, rgba(212,166,74,.4) 85%, transparent); z-index:0; } } /* ---- final CTA that reveals the registration form ---- */ .amb-cta-box{ max-width:640px; margin:0 auto 30px; text-align:center; padding:38px 30px; border:1px solid rgba(241,199,106,.35); border-radius:var(--radius); background:var(--graphite); } .amb-cta-box h3{ font-size:20px; margin-bottom:10px; } .amb-cta-box p{ color:var(--gray); font-size:14px; margin-bottom:22px; } .btn-pulse{ position:relative; animation:ambCtaPulse 2.4s ease-in-out infinite; } @keyframes ambCtaPulse{ 0%, 100%{ box-shadow:0 0 0 0 rgba(212,166,74,.45); } 50%{ box-shadow:0 0 0 10px rgba(212,166,74,0); } } @media (prefers-reduced-motion: reduce){ .btn-pulse{ animation:none; } } @media (max-width:640px){ .amb-cta-box{ padding:28px 20px; } } /* ---------------- CONTACT ---------------- */ .contact{ background:var(--bg2); } .contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:60px; align-items:start; } .contact-list{ display:flex; flex-direction:column; gap:24px; } .contact-row{ --brand:var(--gold-bright); --brand-rgb:241,199,106; position:relative; overflow:hidden; isolation:isolate; cursor:pointer; display:flex; align-items:center; gap:16px; padding:18px 20px; border:1px solid var(--line); border-radius:12px; background:var(--graphite); box-shadow:0 10px 26px -20px rgba(0,0,0,.8); transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease; } .contact-row[data-brand="whatsapp"]{ --brand:#25D366; --brand-rgb:37,211,102; } .contact-row[data-brand="instagram"]{ --brand:#F0568B; --brand-rgb:240,86,139; } .contact-row[data-brand="facebook"]{ --brand:#5A9BFF; --brand-rgb:90,155,255; } /* coloured edge that reveals on hover — tells the eye "this is a button" */ .contact-row::before{ content:""; position:absolute; inset-block:0; inset-inline-start:0; width:4px; z-index:1; background:var(--brand); transform:scaleY(.35); opacity:.55; transition:transform .3s ease, opacity .3s ease; } .contact-row::after{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; pointer-events:none; background:linear-gradient(90deg, rgba(var(--brand-rgb),.16), rgba(var(--brand-rgb),0) 70%); transition:opacity .3s ease; } html[dir="rtl"] .contact-row::after{ background:linear-gradient(270deg, rgba(var(--brand-rgb),.16), rgba(var(--brand-rgb),0) 70%); } .contact-row:hover, .contact-row:focus-visible{ border-color:rgba(var(--brand-rgb),.75); transform:translateY(-3px); outline:none; box-shadow:0 18px 34px -20px rgba(var(--brand-rgb),.55); } .contact-row:hover::before, .contact-row:focus-visible::before{ transform:scaleY(1); opacity:1; } .contact-row:hover::after, .contact-row:focus-visible::after{ opacity:1; } .contact-row:focus-visible{ box-shadow:0 0 0 3px rgba(var(--brand-rgb),.35), 0 18px 34px -20px rgba(var(--brand-rgb),.55); } .contact-row:active{ transform:translateY(-1px) scale(.99); } .contact-row > svg{ width:20px; height:20px; padding:12px; box-sizing:content-box; border-radius:50%; color:var(--brand); flex-shrink:0; background:rgba(var(--brand-rgb),.12); border:1px solid rgba(var(--brand-rgb),.4); transition:background .3s ease, transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s ease; } .contact-row:hover > svg{ background:rgba(var(--brand-rgb),.24); border-color:var(--brand); transform:scale(1.08) rotate(-6deg); } .contact-row > div{ flex:1; min-width:0; } .contact-row .lbl{ font-size:12px; color:var(--gray); letter-spacing:1px; font-family:'Poppins',sans-serif; text-transform:uppercase; } .contact-row .val{ font-size:15.5px; color:var(--off-white); direction:ltr; text-align:right; overflow-wrap:break-word; } /* the "action" chip at the end of each card: label + arrow */ .contact-row .cr-go{ flex-shrink:0; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; white-space:nowrap; font-family:'Cairo',sans-serif; font-size:13px; font-weight:700; color:var(--brand); background:rgba(var(--brand-rgb),.1); border:1px solid rgba(var(--brand-rgb),.4); transition:background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; } .contact-row .cr-go svg{ width:16px; height:16px; flex:none; transition:transform .3s ease; } html[dir="rtl"] .contact-row .cr-go svg{ transform:scaleX(-1); } .contact-row .cr-go--icon{ padding:8px; } .contact-row:hover .cr-go, .contact-row:focus-visible .cr-go{ background:var(--brand); color:#132b4f; border-color:var(--brand); box-shadow:0 8px 20px -8px rgba(var(--brand-rgb),.8); } html[dir="ltr"] .contact-row:hover .cr-go svg{ transform:translateX(3px); } html[dir="rtl"] .contact-row:hover .cr-go svg{ transform:scaleX(-1) translateX(3px); } @media (max-width:560px){ /* Instagram + Facebook cards: one per line so the text never gets squeezed */ .contact-list > div > .contact-row{ flex:1 1 100% !important; min-width:0 !important; } } @media (max-width:420px){ .contact-row .cr-go-txt{ display:none; } .contact-row .cr-go{ padding:8px; } } @media (hover:none){ /* touch screens have no hover: keep the cue permanently visible */ .contact-row::before{ transform:scaleY(1); opacity:1; } } @media (prefers-reduced-motion:reduce){ .contact-row, .contact-row > svg, .contact-row::before, .contact-row .cr-go svg{ transition:none; } .contact-row:hover{ transform:none; } } .socials{ display:flex; gap:16px; margin-top:8px; } .social-btn{ width:50px; height:50px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold); transition:border-color .3s ease, transform .3s ease, color .3s ease, background .3s ease; } .social-btn svg{ width:20px; height:20px; } .social-btn:hover{ border-color:var(--gold-bright); color:var(--gold-bright); background:rgba(212,166,74,.1); transform:translateY(-3px); } .social-btn{ cursor:pointer; } .social-btn:hover{ box-shadow:0 12px 24px -12px rgba(241,199,106,.6); } .social-btn:focus-visible{ outline:none; border-color:var(--gold-bright); box-shadow:0 0 0 3px rgba(241,199,106,.35); } .contact-visual{ position:relative; overflow:hidden; border:1px solid rgba(241,199,106,.3); border-radius:var(--radius); background:var(--graphite); padding:50px 40px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px; box-shadow:0 30px 60px -34px rgba(212,166,74,.35); } .contact-visual::before{ content:''; position:absolute; inset:0; pointer-events:none; background:none; } .contact-visual > *{ position:relative; z-index:1; } .contact-visual img{ width:120px; height:120px; opacity:.95; object-fit:contain; } .contact-visual p{ color:var(--gray); font-size:14.5px; max-width:320px; } /* ---------------- FOOTER ---------------- */ footer{ background:#0f2444; padding:70px 0 30px; border-top:1px solid rgba(212,166,74,.12); } .footer-top{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:30px; padding-bottom:40px; } .footer-brand{ display:flex; align-items:center; gap:14px; } .footer-brand img{ height:40px; width:40px; object-fit:contain; } .footer-brand .tag{ font-size:13px; color:var(--gold); font-family:'Cairo',sans-serif; } .footer-links{ display:flex; gap:28px; list-style:none; font-size:14.5px; flex-wrap:wrap; } .footer-links a{ opacity:.8; transition:opacity .25s, color .25s; } .footer-links a:hover{ opacity:1; color:var(--gold-bright); } .footer-bottom{ border-top:1px solid rgba(212,166,74,.1); padding-top:26px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; } .footer-bottom p{ font-size:13px; color:var(--gray); } /* floating whatsapp */ .float-wa{ position:fixed; bottom:26px; left:26px; z-index:900; width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep)); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px -8px rgba(212,166,74,.6); transition:transform .3s ease; } .float-wa:hover{ transform:scale(1.07); } .float-wa svg{ width:28px; height:28px; color:#0f2444; } @media (max-width:980px){ .nav-dropdown, .nav-cta .btn{ display:none; } .burger{ display:block; } .hero-grid{ grid-template-columns:minmax(0,1fr); text-align:center; gap:44px; } .hero-copy{ order:2; } .hero-logo-wrap{ order:1; } .hero-copy p.support{ margin-inline:auto; } .hero-ctas{ justify-content:center; } .services-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .portfolio-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .p-item.wide{ grid-column:span 2; } .why-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .certs-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .why-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .stat-card{ padding:26px 14px; } .steps{ grid-template-columns:minmax(0,1fr); gap:44px; } .steps::before{ display:none; } .reviews-grid{ grid-template-columns:minmax(0,1fr); } .contact-grid{ grid-template-columns:minmax(0,1fr); gap:40px; } .ba-grid{ grid-template-columns:minmax(0,1fr); } } @media (max-width:560px){ .services-grid{ grid-template-columns:minmax(0,1fr); } .portfolio-grid{ grid-template-columns:minmax(0,1fr); } .p-item.wide{ grid-column:span 1; } .why-grid{ grid-template-columns:minmax(0,1fr); } .certs-grid{ grid-template-columns:minmax(0,1fr); } .why-stats{ grid-template-columns:minmax(0,1fr); } section{ padding:80px 0; } .hero{ padding:178px 0 70px; } .footer-top{ flex-direction:column; text-align:center; } .footer-bottom{ flex-direction:column; text-align:center; } } @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; } } /* Ambassador promo code result */ .amb-promo-result{ margin-top:16px; padding:16px 18px; border-radius:12px; background:rgba(201,162,75,.1); border:1px solid rgba(201,162,75,.35); text-align:center; font-weight:700; color:#C9A24B; line-height:1.8; } .amb-promo-result .code{ display:inline-block; margin-inline-start:6px; padding:3px 12px; background:rgba(201,162,75,.18); border-radius:8px; letter-spacing:1px; font-family:monospace; font-size:16px; } .amb-promo-result .code.amb-link-chip{ letter-spacing:normal; font-size:13px; max-width:100%; direction:ltr; white-space:normal; overflow-wrap:anywhere; word-break:break-all; vertical-align:middle; } .amb-promo-result.err{ color:#e2574c; background:rgba(226,87,76,.08); border-color:rgba(226,87,76,.3); } /* Order confirmation box (shown right after saving, before WhatsApp opens) */ .order-result{ margin-top:16px; padding:16px 18px; border-radius:12px; background:rgba(76,175,107,.1); border:1px solid rgba(76,175,107,.35); text-align:center; font-weight:700; color:#4caf6b; line-height:1.8; } .order-result .num{ display:inline-block; margin-inline-start:4px; font-family:monospace; font-size:16px; } /* Consent checkbox on order & ambassador forms */ .consent-row{ display:flex; align-items:flex-start; gap:8px; margin:14px 0 18px; font-size:13px; color:#c7c2b4; cursor:pointer; line-height:1.6; } .consent-row input[type="checkbox"]{ margin-top:3px; width:16px; height:16px; flex-shrink:0; accent-color:#C9A24B; cursor:pointer; } .consent-row a{ color:#C9A24B; text-decoration:underline; } .hidden{ display:none !important; } /* ===================================================================== BOOK YOUR SERVICE — interactive order form (progress, grouped sections, icons, live validation, date shortcuts, promo-code status). Colours reuse the site palette. ===================================================================== */ .order-box{ position:relative; } .order-box::before{ content:''; position:absolute; top:0; inset-inline:28px; height:2px; background:linear-gradient(90deg, transparent, var(--gold), transparent); opacity:.7; border-radius:2px; } .order-box .form-grid-2{ align-items:start; } /* progress */ .order-progress{ margin-bottom:30px; } .op-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:13.5px; color:var(--gray); margin-bottom:10px; } .op-count{ font-family:'Poppins',sans-serif; font-size:13px; color:var(--gold-bright); letter-spacing:.5px; } .op-track{ height:5px; border-radius:5px; background:rgba(212,166,74,.16); overflow:hidden; } .op-fill{ height:100%; width:0; border-radius:5px; background:var(--gold); transition:width .45s cubic-bezier(.2,.7,.2,1), background-color .3s ease; } .order-progress.is-complete .op-fill{ background:#5fcf9a; } .order-progress.is-complete .op-label{ color:#5fcf9a; } .order-progress.is-complete .op-count{ color:#5fcf9a; } /* sections */ .form-section + .form-section{ margin-top:12px; padding-top:28px; border-top:1px solid var(--line); } .form-section-title{ font-family:'Cairo',sans-serif; font-weight:700; font-size:16px; line-height:1.2; color:var(--off-white); margin-bottom:20px; padding-inline-start:12px; border-inline-start:3px solid var(--gold); } /* inputs with a leading icon */ .field-wrap{ position:relative; } .field-icon{ position:absolute; top:50%; inset-inline-start:14px; transform:translateY(-50%); width:18px; height:18px; color:var(--gold); opacity:.85; pointer-events:none; transition:opacity .25s ease, color .25s ease; } .field-wrap:focus-within .field-icon{ opacity:1; color:var(--gold-bright); } .order-box .field-wrap input, .order-box .field-wrap select{ padding-inline-start:44px; } .order-box .promo-input-wrap input{ padding-left:16px; padding-inline-start:44px; } .order-box .promo-input-wrap svg{ left:auto; inset-inline-start:14px; } .order-box .form-row input[type="date"]{ color-scheme:dark; } .order-box #clientPhone, .order-box #promoCode{ direction:ltr; } html[dir="rtl"] .order-box #clientPhone, html[dir="rtl"] .order-box #promoCode{ text-align:right; } html[dir="ltr"] .order-box .form-row select{ background-position:right 14px center; } html[dir="ltr"] .order-box .form-row select{ padding-inline-end:40px; } /* focus + hover */ .order-box .form-row input, .order-box .form-row select, .order-box .form-row textarea{ transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease; } .order-box .form-row input:hover, .order-box .form-row select:hover{ border-color:rgba(212,166,74,.45); } .order-box .form-row input:focus, .order-box .form-row select:focus, .order-box .form-row textarea:focus{ border-color:var(--gold-bright); box-shadow:0 0 0 3px rgba(241,199,106,.16); } /* valid / invalid states */ .order-box .form-row.is-valid > label::after{ content:'✓'; margin-inline-start:8px; color:#5fcf9a; font-size:13px; } .order-box .form-row.is-valid input, .order-box .form-row.is-valid select{ border-color:rgba(95,207,154,.55); } .order-box .form-row.is-invalid input, .order-box .form-row.is-invalid select{ border-color:#e2574c; box-shadow:0 0 0 3px rgba(226,87,76,.14); } /* Same invalid highlight, usable outside the order form too (e.g. the ambassador form's university combobox, which validates via JS since a hidden input can't carry native "required" validation). */ .form-row.is-invalid input, .form-row.is-invalid select{ border-color:#e2574c; box-shadow:0 0 0 3px rgba(226,87,76,.14); } .field-msg{ display:none; margin-top:7px; font-size:13px; line-height:1.5; color:#ff8a80; } .form-row.is-invalid .field-msg:not(:empty){ display:block; } .form-row.shake{ animation:gdShake .38s ease; } @keyframes gdShake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-5px); } 75%{ transform:translateX(5px); } } /* delivery-date shortcuts */ /* ---------------- UNIVERSITY SEARCH COMBOBOX ---------------- */ .uni-combo{ position:relative; } .uni-combo-input{ cursor:text; } .uni-combo:not(.field-wrap) .uni-combo-input{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:left 14px center; background-size:16px; padding-left:38px; } .uni-combo-dropdown{ position:absolute; z-index:60; top:calc(100% + 8px); left:0; right:0; max-height:280px; overflow-y:auto; background:var(--graphite); border:1px solid rgba(241,199,106,.35); border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.5); padding:6px; } .uni-combo-group-label{ padding:10px 12px 4px; font-size:11.5px; font-weight:700; letter-spacing:.02em; color:var(--gold-bright); opacity:.85; } .uni-combo-item{ padding:10px 12px; border-radius:9px; font-size:14px; cursor:pointer; color:var(--off-white); transition:background .15s ease; } .uni-combo-item:hover, .uni-combo-item.is-active{ background:rgba(241,199,106,.14); color:var(--gold-bright); } .uni-combo-item-other{ margin-top:4px; border-top:1px dashed rgba(255,255,255,.14); padding-top:12px; opacity:.85; } .uni-combo-empty{ padding:16px 12px; font-size:13px; color:var(--gray); text-align:center; } .uni-combo-dropdown::-webkit-scrollbar{ width:7px; } .uni-combo-dropdown::-webkit-scrollbar-thumb{ background:rgba(241,199,106,.35); border-radius:8px; } .date-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } .chip-urgent{ border-color:rgba(226,87,76,.55); color:#ffb4ac; } .chip-urgent:hover{ border-color:#e2574c; color:#fff; } .chip-urgent.is-active{ background:#e2574c; border-color:#e2574c; color:#fff; } .chip{ padding:6px 14px; border-radius:20px; font-size:13px; line-height:1.5; font-family:'Tajawal',sans-serif; color:var(--gray); background:transparent; border:1px solid var(--line); transition:color .2s ease, border-color .2s ease, background-color .2s ease; } .chip:hover{ color:var(--off-white); border-color:var(--gold); } .chip.is-active{ color:#0f2444; background:var(--gold-bright); border-color:var(--gold-bright); font-weight:700; } /* promo-code status line */ .promo-status{ margin-top:8px; font-size:13px; line-height:1.6; color:var(--gray); } .promo-status:empty{ display:none; } .promo-status.ok{ color:#5fcf9a; } .promo-status.bad{ color:#ff8a80; } .promo-status.checking::before{ content:''; display:inline-block; width:11px; height:11px; margin-inline-end:8px; border:2px solid rgba(154,168,188,.35); border-top-color:var(--gold-bright); border-radius:50%; vertical-align:-1px; animation:gdSpin .7s linear infinite; } @keyframes gdSpin{ to{ transform:rotate(360deg); } } /* submit button while the order is being saved */ .order-submit:disabled{ opacity:.8; cursor:progress; transform:none; box-shadow:none; } .order-submit:disabled::after{ content:''; width:16px; height:16px; border-radius:50%; border:2px solid rgba(15,36,68,.3); border-top-color:#0f2444; animation:gdSpin .7s linear infinite; } .amb-promo-result .code{ cursor:pointer; } @media (max-width:640px){ .order-box::before{ inset-inline:18px; } .op-head{ font-size:12.5px; } .form-section + .form-section{ padding-top:22px; } } @media (prefers-reduced-motion: reduce){ .form-row.shake{ animation:none; } .op-fill{ transition:none; } } /* inputs that are always typed left-to-right (phone, promo code) inside an RTL page: the icon sits at the reading-start side, so use physical padding here */ html[dir="rtl"] .order-box #clientPhone, html[dir="rtl"] .order-box #promoCode{ padding-right:44px; padding-left:16px; text-align:right; } html[dir="ltr"] .order-box #clientPhone, html[dir="ltr"] .order-box #promoCode{ padding-left:44px; padding-right:16px; text-align:left; } /* our own calendar icon replaces the browser's; the whole field opens the picker */ .order-box .field-wrap input[type="date"]{ position:relative; } .order-box .field-wrap input[type="date"]::-webkit-calendar-picker-indicator{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:pointer; } /* ===== login required: notices + gated ambassador form ===== */ .login-gate{ display:none; text-align:center; padding:18px 20px; margin-bottom:24px; border:1px dashed var(--gold); border-radius:14px; background:rgba(212,166,74,.07); } .login-gate p{ margin:0 0 14px; font-size:14.5px; line-height:1.8; color:var(--off-white); } html.gd-auth-known:not(.gd-logged-in) .login-gate{ display:block; } html.gd-auth-known:not(.gd-logged-in) #ambassadorForm{ display:none; } .login-note{ text-align:start; display:none; } .login-note p{ margin-bottom:12px; font-size:13.5px; color:var(--gray); } html.gd-auth-known:not(.gd-logged-in) .login-note{ display:block; } .order-box .field-icon{ z-index:1; } /* ===================================================================== BROWSER COMPATIBILITY FALLBACKS (browsers that don't know logical properties get the same result from these direction-specific physical rules) ===================================================================== */ html{ -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; text-size-adjust:100%; } .order-box::before{ left:28px; right:28px; } html[dir="rtl"] .field-icon{ right:14px; left:auto; } html[dir="ltr"] .field-icon{ left:14px; right:auto; } html[dir="rtl"] .order-box .field-wrap input, html[dir="rtl"] .order-box .field-wrap select{ padding-right:44px; } html[dir="ltr"] .order-box .field-wrap input, html[dir="ltr"] .order-box .field-wrap select{ padding-left:44px; } html[dir="ltr"] .order-box .form-row select{ padding-right:40px; } html[dir="rtl"] .form-section-title{ padding-right:12px; border-right:3px solid var(--gold); } html[dir="ltr"] .form-section-title{ padding-left:12px; border-left:3px solid var(--gold); } html[dir="rtl"] .order-box .form-row.is-valid > label::after{ margin-right:8px; } html[dir="ltr"] .order-box .form-row.is-valid > label::after{ margin-left:8px; } html[dir="rtl"] .promo-status.checking::before{ margin-left:8px; } html[dir="ltr"] .promo-status.checking::before{ margin-right:8px; } .hero-copy p.support{ margin-left:auto; margin-right:auto; } @media (min-width:981px){ .hero-copy p.support{ margin-left:0; margin-right:0; } } /* iPhone Safari: empty date inputs collapse without a min height */ @supports (-webkit-touch-callout:none){ .order-box input[type="date"]{ -webkit-appearance:none; appearance:none; min-height:50px; display:block; } } /* browsers without aspect-ratio (Safari < 15): keep portfolio cards tall enough */ @supports not (aspect-ratio:1/1){ .p-item{ height:0; padding-bottom:125%; } .p-item.wide{ padding-bottom:56.25%; } .p-item img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; } } /* ===================================================================== HEADER LOGIN BUTTON — one simple "تسجيل الدخول" button, on desktop and phone, always visible at the top of the page ===================================================================== */ .nav-cta .btn.nav-login{ background:rgba(212,166,74,.08); border:1px solid var(--gold); color:var(--gold-bright); white-space:nowrap; } .nav-cta .btn.nav-login:hover{ background:rgba(212,166,74,.18); transform:none; } @media (max-width:980px){ .nav-cta{ gap:10px; } .nav-cta .btn.nav-login{ display:inline-flex; padding:8px 16px; font-size:13.5px; border-radius:10px; } } /* ===================================================================== FLOATING "BOOK YOUR SERVICE" BUTTON — phone/tablet only. On those widths the header's own order-cta button is tucked inside the burger menu (see the .nav-cta .btn{display:none} rule above), so this stays pinned near the top of the screen the whole time the visitor scrolls, just under the promo bar + header. ===================================================================== */ .mobile-book-btn{ display:none; } @media (max-width:980px){ .mobile-book-btn{ display:flex; align-items:center; gap:7px; position:fixed; top:150px; left:14px; z-index:950; padding:10px 18px 10px 16px; border-radius:30px; background:linear-gradient(135deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep)); color:#0f2444; font-family:'Cairo',sans-serif; font-weight:800; font-size:13px; box-shadow:0 10px 26px -8px rgba(212,166,74,.55); text-decoration:none; white-space:nowrap; animation:mobileBookPulse 2.8s ease-in-out infinite; } .mobile-book-btn:active{ transform:scale(.96); } .mobile-book-btn svg{ width:16px; height:16px; flex-shrink:0; } } @media (max-width:560px){ .mobile-book-btn{ top:104px; left:10px; padding:9px 14px 9px 13px; font-size:12px; gap:5px; } .mobile-book-btn svg{ width:14px; height:14px; } } @keyframes mobileBookPulse{ 0%,100%{ box-shadow:0 10px 26px -8px rgba(212,166,74,.55); } 50%{ box-shadow:0 10px 34px -4px rgba(212,166,74,.9); } } @media (prefers-reduced-motion: reduce){ .mobile-book-btn{ animation:none; } } /* ===================================================================== PHONE LAYOUT (≤ 560px) — smaller logo, compact header, 2-column portfolio, tighter sections; everything scaled to a phone screen ===================================================================== */ @media (max-width:560px){ .wrap{ padding:0 16px; } section{ padding:52px 0; } .section-head{ margin-bottom:28px; } .section-head h2{ font-size:25px; margin-bottom:12px; line-height:1.35; } .section-head p{ font-size:14.5px; } .eyebrow{ font-size:11px; margin-bottom:10px; } .btn{ padding:12px 22px; font-size:14.5px; } .btn-lg{ padding:14px 26px; font-size:15.5px; } /* top bars: slimmer promo bar + header */ .promo-bar{ height:42px; padding:0 10px; gap:8px; } .promo-link{ padding:5px 11px; font-size:12px; } header{ top:42px; } .nav{ height:58px; } .brand img{ height:34px; } .nav-cta{ gap:8px; } .lang-toggle{ padding:6px 12px; font-size:12px; } .nav-cta .btn.nav-login{ padding:7px 14px; font-size:13px; } .burger{ width:24px; } /* burger menu: fits short screens, scrolls if needed */ .mobile-panel{ top:100px; inset:100px 0 0 0; justify-content:flex-start; gap:6px; padding:18px 20px 90px; overflow-y:auto; -webkit-overflow-scrolling:touch; } .mobile-panel a{ font-size:17px; padding:11px 0; width:100%; max-width:320px; text-align:center; border-bottom:1px solid rgba(255,255,255,.06); } .mobile-panel a.btn{ border-bottom:none; margin-top:14px !important; justify-content:center; } /* hero: small logo, compact text */ .hero{ min-height:0; padding:128px 0 44px; } .hero-grid{ gap:20px; } .hero-logo-wrap img{ width:132px; max-width:38vw; height:auto; } .hero-logo-wrap::before{ width:180px; height:180px; } .hero h1{ font-size:30px; margin-bottom:12px; } .hero h2{ font-size:16.5px; margin-bottom:12px; } .hero p.support{ font-size:14px; margin-bottom:22px; } .hero-ctas{ flex-direction:column; align-items:center; gap:10px; margin-bottom:20px; } .hero-ctas .btn{ width:100%; max-width:300px; justify-content:center; } .trust-line{ font-size:12.5px; } /* services: compact cards */ .services-grid{ gap:12px; } .card{ padding:20px 18px; } .card .num{ margin-bottom:10px; font-size:11.5px; padding:2px 8px; } .card .icon-badge{ width:48px; height:48px; margin-bottom:14px; border-radius:13px; } .card .icon{ width:24px; height:24px; } .card h3{ font-size:17px; } .card p{ font-size:13.5px; } .card-order-btn{ margin-top:12px; padding:9px 14px; font-size:13px; } /* why us */ .why-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:28px; } .stat-card{ padding:16px 6px; } .stat-card .stat-num{ font-size:21px; margin-bottom:6px; } .stat-card p{ font-size:11.5px; line-height:1.5; } .why-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .certs-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .why-item{ padding:26px 14px 22px; } .why-icon{ width:46px; height:46px; margin-bottom:12px; } .why-icon svg{ width:21px; height:21px; } .why-item .num{ font-size:10.5px; margin-bottom:6px; } .why-item h4{ font-size:14.5px; margin-bottom:6px; } .why-item p{ font-size:12.5px; line-height:1.6; } .why-tagline{ padding:16px; } .steps{ gap:30px; } /* portfolio: small 2-column tiles */ .portfolio-tabs{ gap:7px; margin-bottom:20px; } .portfolio-tab{ padding:7px 14px; font-size:12.5px; } .portfolio-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .p-item, .p-item.tall{ aspect-ratio:3/4; border-radius:12px; } .p-item.wide{ grid-column:span 2; aspect-ratio:16/10; } .p-info{ padding:14px 8px 8px; transform:none; } .p-info h4{ font-size:11px; line-height:1.4; margin-bottom:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .p-info span{ font-size:9.5px; letter-spacing:.4px; } .p-doc-badge{ top:6px; right:6px; padding:3px 8px; font-size:10px; gap:4px; } .p-doc-badge svg{ width:11px; height:11px; } /* reviews carousel */ .rc-dots{ gap:5px; margin-top:14px; max-width:260px; } .rc-dot{ width:6px; height:6px; } /* forms: 16px text stops iPhones zooming in on focus */ .form-row input, .form-row select, .form-row textarea{ font-size:16px; } .order-box{ padding:22px 14px; } .order-progress{ margin-bottom:22px; } .form-section-title{ font-size:15px; margin-bottom:16px; } .amb-form-box{ padding:22px 14px; } .login-gate{ padding:14px; } /* footer + floating buttons */ .footer-top{ gap:18px; } .float-wa{ width:46px; height:46px; left:12px; bottom:14px; } .float-wa svg{ width:24px; height:24px; } .back-to-top{ width:42px; height:42px; right:12px; bottom:14px; } } @media (max-width:360px){ .wrap{ padding:0 12px; } .nav-cta{ gap:6px; } .nav-cta .btn.nav-login{ padding:6px 10px; font-size:12px; } .lang-toggle{ padding:5px 9px; } .brand img{ height:30px; } .hero h1{ font-size:27px; } .why-grid{ grid-template-columns:minmax(0,1fr); } } /* ===================================================================== GLOBAL BUTTON SHEEN — every clickable action button gets a soft light sweep that passes over it every few seconds (the sweep takes ~1.3s, then the button rests for ~3s). One shared rule, one keyframe. Selection controls (tabs, chips, FAQ rows, stars, lightbox arrows) are intentionally left out — they are not "call to action" buttons. ===================================================================== */ .btn, .card-order-btn, .lang-toggle, .social-btn, .contact-row .cr-go{ position:relative; } .btn, .card-order-btn, .lang-toggle, .social-btn, .contact-row .cr-go, .float-wa, .back-to-top, .mobile-book-btn{ overflow:hidden; isolation:isolate; --sheen:rgba(255,255,255,.5); } /* dark / outline buttons get a warm gold sweep so it is visible on them */ .btn-outline, .card-order-btn, .lang-toggle, .social-btn, .back-to-top, .nav-cta .btn.nav-login, .contact-row .cr-go{ --sheen:rgba(241,199,106,.34); } .btn:not(:disabled)::after, .card-order-btn::after, .lang-toggle::after, .social-btn::after, .contact-row .cr-go::after, .float-wa::after, .back-to-top::after, .mobile-book-btn::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:55%; z-index:2; pointer-events:none; background:linear-gradient(105deg, transparent 15%, var(--sheen) 50%, transparent 85%); transform:translateX(-160%) skewX(-20deg); animation:gdSheen 4.5s ease-in-out infinite; } @keyframes gdSheen{ 0%{ transform:translateX(-160%) skewX(-20deg); } 28%, 100%{ transform:translateX(320%) skewX(-20deg); } } /* stagger a little so a whole row of buttons doesn't flash in unison */ .services-grid > :nth-child(3n+2) .card-order-btn::after, .offers-grid > :nth-child(2n) .card-order-btn::after, .socials .social-btn:nth-child(2n)::after, .contact-list .contact-row:nth-child(2) .cr-go::after{ animation-delay:.9s; } .services-grid > :nth-child(3n) .card-order-btn::after, .socials .social-btn:nth-child(3n)::after, .contact-list .contact-row:nth-child(3) .cr-go::after{ animation-delay:1.8s; } .float-wa::after{ animation-delay:.6s; } .back-to-top::after{ animation-delay:1.4s; } /* ===================================================================== FLOATING WHATSAPP BUTTON — green, with a soft pulsing ring ===================================================================== */ .float-wa{ background:linear-gradient(135deg, #2EE07A 0%, #25D366 50%, #128C4A 100%); border:1.5px solid rgba(255,255,255,.35); box-shadow:0 12px 28px -8px rgba(37,211,102,.75), 0 2px 0 rgba(255,255,255,.35) inset; animation:gdFloatWaPulse 2.6s ease-out infinite; transition:transform .3s ease, box-shadow .3s ease, filter .3s ease; } .float-wa svg{ color:#fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); } .float-wa:hover, .float-wa:focus-visible{ transform:scale(1.1); filter:brightness(1.06); outline:none; animation:none; box-shadow:0 16px 34px -8px rgba(37,211,102,.9), 0 2px 0 rgba(255,255,255,.35) inset; } .float-wa:focus-visible{ box-shadow:0 0 0 4px rgba(37,211,102,.4), 0 16px 34px -8px rgba(37,211,102,.9); } .float-wa:active{ transform:scale(.95); } @keyframes gdFloatWaPulse{ 0%{ box-shadow:0 12px 28px -8px rgba(37,211,102,.75), 0 2px 0 rgba(255,255,255,.35) inset, 0 0 0 0 rgba(37,211,102,.55); } 70%, 100%{ box-shadow:0 12px 28px -8px rgba(37,211,102,.75), 0 2px 0 rgba(255,255,255,.35) inset, 0 0 0 18px rgba(37,211,102,0); } } @media (prefers-reduced-motion:reduce){ .btn::after, .card-order-btn::after, .lang-toggle::after, .social-btn::after, .contact-row .cr-go::after, .float-wa::after, .back-to-top::after, .mobile-book-btn::after{ animation:none; display:none; } .float-wa{ animation:none; } } /* ===================================================================== COMPACT PAGE (mobile-length reduction) 1) portfolio "show more" 2) services in two columns 3) founder: same content, phone-sized photo + type 4) ambassador banner (details fold open) 5) "why us" = 4 points 6) "how it works" merged into "why us" ===================================================================== */ /* ---- 1) portfolio: "show more" ---- */ .portfolio-more-wrap{ text-align:center; margin-top:22px; } .portfolio-more-wrap[hidden]{ display:none; } #portfolioMoreBtn .pm-less{ display:none; } #portfolioMoreBtn.is-open .pm-more{ display:none; } #portfolioMoreBtn.is-open .pm-less{ display:inline; } #portfolioMoreBtn .pm-count{ opacity:.75; font-weight:600; } /* ---- 5) why-us: 4 points → one clean row on desktop ---- */ @media (min-width:981px){ .why-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } } /* ---- 6) "how it works" as a compact block inside why-us ---- */ .how-mini{ margin-top:56px; } .how-mini-title{ text-align:center; font-size:22px; margin-bottom:24px; } .how-mini-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } .how-mini-step{ padding:22px 16px 18px; text-align:center; border:1px solid var(--line); border-radius:var(--radius); background:var(--graphite); } .how-mini-num{ width:32px; height:32px; margin:0 auto 10px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--gold); background:#0f2444; color:var(--gold-bright); font-family:'Cairo',sans-serif; font-weight:800; font-size:14px; } .how-mini-step h4{ font-size:15px; margin-bottom:6px; } .how-mini-step p{ font-size:13px; line-height:1.65; color:var(--gray); } @media (max-width:980px){ .how-mini-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* ---- 4) ambassador banner ---- */ .amb-quick{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 10px; margin:20px 0 4px; } .amb-quick-step{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; color:var(--off-white); } .amb-quick-step b{ width:22px; height:22px; border-radius:50%; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; background:var(--gold); color:#0a1a38; font-family:'Cairo',sans-serif; font-size:12px; font-weight:800; } .amb-quick-arrow{ color:var(--gold); font-size:20px; line-height:1; } .amb-details-btn{ margin-top:18px; } .amb-details-btn .adb-hide{ display:none; } .amb-details-btn[aria-expanded="true"] .adb-show{ display:none; } .amb-details-btn[aria-expanded="true"] .adb-hide{ display:inline; } .amb-details{ display:none; } .amb-details.open{ display:block; } .ambassador .section-head{ margin-bottom:0; } .ambassador .amb-details.open{ margin-top:12px; } /* ---- 3) founder: base padding moved out of the inline style ---- */ .founder{ padding:90px 0; } /* =============================== PHONES =============================== */ @media (max-width:760px){ /* founder: every word kept — photo shrinks beside the name, text gets phone sizes */ .founder{ padding:44px 0; } .founder .section-head{ margin-bottom:22px; } .founder-grid{ display:grid; gap:0; align-items:start; grid-template-columns:116px minmax(0,1fr); column-gap:16px; grid-template-areas:"photo name" "photo roles" "story story" "cta cta"; text-align:start; } .founder-photo-col, .founder-info{ display:contents; } .founder-photo-frame{ grid-area:photo; width:116px; padding:4px; border-radius:14px; margin-bottom:10px; } .founder-photo{ aspect-ratio:4/5; height:auto; object-fit:cover; object-position:50% 0; border-radius:10px; } .founder-photo-badge{ font-size:9.5px; letter-spacing:.8px; padding:4px 12px; bottom:-10px; } .founder-name{ grid-area:name; align-self:end; font-size:19px; line-height:1.3; margin:2px 0 8px; text-align:start; } .founder-roles{ grid-area:roles; align-self:start; align-items:flex-start; gap:4px; margin:0; } .founder-roles span{ font-size:11px; letter-spacing:.2px; line-height:1.5; } .founder-story-card{ grid-area:story; margin-top:22px; padding:18px 16px; text-align:start; } .founder-quote{ width:22px; height:22px; margin-bottom:2px; } .founder-hook{ font-size:14.5px; line-height:1.85; margin-bottom:14px; text-align:start; } .founder-story-divider{ margin-bottom:14px; } .founder-story-card p{ font-size:13.5px; line-height:1.8; margin-bottom:10px; } .founder-tags{ justify-content:flex-start; gap:7px; margin:14px 0; } .founder-tags span{ font-size:10.5px; padding:6px 12px; letter-spacing:.5px; } .founder-goal{ font-size:13.5px; padding:12px 14px; } .founder-cta{ grid-area:cta; justify-self:center; width:100%; max-width:none; min-height:48px; margin-top:14px; font-size:14.5px; } .founder-tagline{ margin-top:26px; padding:20px 22px; } .founder-tagline strong{ font-size:20px; letter-spacing:3px; } .founder-tagline span{ font-size:11.5px; letter-spacing:1px; line-height:1.7; } } @media (max-width:560px){ /* 2) services: two small cards per row (last one full width) */ .services-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .services-grid .card{ display:flex; flex-direction:column; padding:14px 12px 12px; border-radius:14px; } .services-grid .card .num{ display:none; } .services-grid .card .icon-badge{ width:38px; height:38px; margin-bottom:9px; border-radius:11px; } .services-grid .card .icon{ width:20px; height:20px; } .services-grid .card h3{ font-size:13.5px; line-height:1.4; margin-bottom:5px; } .services-grid .card p{ font-size:11.5px; line-height:1.6; } .services-grid .card-link{ margin-top:10px; font-size:11px; } .services-grid .card-order-btn{ margin-top:auto; padding:8px 6px; font-size:11.5px; gap:5px; } .services-grid .card p + .card-order-btn, .services-grid .card .card-link + .card-order-btn{ margin-top:12px; } .services-grid .card-order-btn svg{ width:13px; height:13px; } .services-grid .card:last-child{ grid-column:1 / -1; } /* 1) portfolio button */ .portfolio-more-wrap{ margin-top:16px; } /* 4) ambassador banner */ .ambassador{ padding:40px 0; } .amb-quick{ margin-top:14px; gap:6px 8px; } .amb-quick-step{ font-size:12.5px; } .ambassador .amb-hero-badges{ gap:8px; margin:14px 0 4px; } .ambassador .amb-hero-badge{ padding:7px 12px; font-size:12px; gap:6px; } .ambassador .amb-hero-badge svg{ width:15px; height:15px; } .amb-details-btn{ margin-top:14px; width:100%; max-width:320px; justify-content:center; } .amb-content{ padding-top:28px; } /* 6) how-mini */ .how-mini{ margin-top:34px; } .how-mini-title{ font-size:17px; margin-bottom:14px; } .how-mini-grid{ gap:8px; } .how-mini-step{ padding:14px 10px 12px; border-radius:12px; } .how-mini-num{ width:26px; height:26px; font-size:12.5px; margin-bottom:7px; } .how-mini-step h4{ font-size:13px; line-height:1.4; margin-bottom:4px; } .how-mini-step p{ font-size:11.5px; line-height:1.55; } } /* ===================================================================== ZERO AI CARD — compact version (short text, static 3-step row) ===================================================================== */ .zero-ai-card{ gap:16px; padding:22px 26px 20px; } .zero-ai-icon{ width:52px; height:52px; border-radius:14px; } .zero-ai-icon svg{ width:26px; height:26px; } .zero-ai-content h3{ font-size:17px; margin-bottom:6px; } .zero-ai-content p{ font-size:14px; line-height:1.75; } .za-num{ font-size:36px; } .za-steps{ gap:10px; } .za-step{ padding:9px 12px; gap:9px; cursor:default; font-size:13.5px; } .za-step:hover{ transform:none; border-color:var(--line); } .za-step i{ width:24px; height:24px; font-size:12px; background:var(--gold); color:#1a1408; border-color:var(--gold); } @media (max-width:820px){ .za-steps{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:720px){ .zero-ai-card{ padding:16px 14px 14px; gap:12px; border-radius:14px; } .za-main{ display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; grid-template-areas:"icon badge stat" "title title title" "text text text"; gap:0 10px; } .zero-ai-content{ display:contents; } .zero-ai-icon{ grid-area:icon; width:40px; height:40px; border-radius:11px; } .zero-ai-icon svg{ width:21px; height:21px; } .za-ring{ border-radius:11px; } .zero-ai-badge{ grid-area:badge; justify-self:start; font-size:11px; padding:4px 11px; margin:0; } .za-stat{ grid-area:stat; display:flex; flex-direction:column; align-items:flex-end; gap:0; min-width:0; width:auto; border:0; padding:0; text-align:end; } .za-stat .za-num{ font-size:26px; } .za-stat span{ font-size:10.5px; margin:0; } .zero-ai-content h3{ grid-area:title; font-size:15px; line-height:1.5; margin:12px 0 4px; } .zero-ai-content p{ grid-area:text; font-size:12.5px; line-height:1.7; } .za-steps{ gap:6px; } .za-step{ flex-direction:column; justify-content:center; gap:4px; padding:8px 4px; font-size:11.5px; text-align:center; line-height:1.3; } .za-step i{ width:20px; height:20px; font-size:11px; } .za-cta{ padding:11px 16px; font-size:14px; } } /* ===================================================================== COMPACT CARDS ON PHONES — "why us" cards, certificates, tagline (same small-card feel as the services cards) ===================================================================== */ @media (max-width:560px){ .why-grid{ gap:10px; } .why-item{ padding:14px 10px 12px; border-radius:14px; } .why-icon{ width:36px; height:36px; margin-bottom:7px; } .why-icon svg{ width:18px; height:18px; } .why-item .num{ display:none; } .why-item h4{ font-size:13.5px; line-height:1.4; margin-bottom:4px; } .why-item p{ font-size:11.5px; line-height:1.55; } .certs{ margin-top:30px; } .certs-head{ margin-bottom:14px; gap:8px; } .certs-head svg{ width:20px; height:20px; } .certs-head h3{ font-size:16px; } .certs-grid{ gap:10px; } .cert-chip{ padding:12px 8px 10px; gap:4px; border-radius:14px; font-size:12px; } .cert-card-icon{ width:34px; height:34px; margin-bottom:2px; } .cert-card-icon svg{ width:17px; height:17px; } .cert-chip > span{ font-size:12px; line-height:1.4; } .cert-chip .src{ font-size:10.5px; } .cert-card-cta{ margin-top:2px; font-size:10.5px; gap:4px; opacity:1; } .cert-card-cta svg{ width:12px; height:12px; } .cert-hint{ margin-top:10px !important; font-size:11.5px !important; } .why-tagline{ margin-top:28px; padding:14px 14px; gap:8px; border-radius:14px; } .why-tagline svg{ width:20px; height:20px; } .why-tagline p{ font-size:13.5px; line-height:1.7; } } /* contact card: site logo on top (was a client screenshot) */ .contact-visual img{ width:130px; height:130px; opacity:1; } @media (max-width:560px){ .contact-visual{ padding:26px 18px; gap:12px; border-radius:14px; } .contact-visual img{ width:104px; height:104px; } .contact-visual h3{ font-size:17px !important; } .contact-visual p{ font-size:13px; line-height:1.7; } }