/* ===================================================================== UNIFORD — Website Design (desktop @1440) | hand CSS, prefix .uf- Pairs with Bootstrap 5 RTL (CDN) + Bootstrap Icons (CDN). Design tokens come straight from Figma (file CJUqvMzg8XjEe4q47c2Tub). ===================================================================== */ /* ---------- Fonts ---------- Design font = "Somar Rounded". Drop the real files in assets/fonts/ (SomarRounded-Regular/Medium/Bold .woff2) and they take over automatically. Until then we fall back to Tajawal (loaded from Google in the ). */ @font-face{font-family:"Somar Rounded";src:url("../fonts/SomarRounded-Regular.woff2") format("woff2"),url("../fonts/SomarRounded-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:"Somar Rounded";src:url("../fonts/SomarRounded-Medium.woff2") format("woff2"),url("../fonts/SomarRounded-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:"Somar Rounded";src:url("../fonts/SomarRounded-SemiBold.woff2") format("woff2"),url("../fonts/SomarRounded-SemiBold.woff") format("woff");font-weight:600;font-style:normal;font-display:swap;} @font-face{font-family:"Somar Rounded";src:url("../fonts/SomarRounded-Bold.woff2") format("woff2"),url("../fonts/SomarRounded-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:"Somar Rounded";src:url("../fonts/SomarRounded-ExtraBold.woff2") format("woff2"),url("../fonts/SomarRounded-ExtraBold.woff") format("woff");font-weight:800;font-style:normal;font-display:swap;} /* ---------- Tokens ---------- */ :root{ --uf-navy:#0f1e3d; --uf-navy-dark:#010b1a; --uf-gold:#f2a41d; --uf-green:#16A34A; --uf-text:#374151; --uf-muted:#4b5563; --uf-muted2:#9ca3af; --uf-muted3:#6b7280; --uf-light:#d1d5db; --uf-border:#f3f4f6; --uf-role-org:#f2a41d; --uf-role-trainer:#6b4c9a; --uf-role-uni:#2e5eaa; --uf-role-school:#2d8b4e; --uf-font:"Somar Rounded","Tajawal","Cairo",system-ui,sans-serif; } /* ---------- Reset / base ---------- */ *{box-sizing:border-box;} html,body{margin:0;padding:0;} body.uf-page{ font-family:var(--uf-font); color:var(--uf-text); background:#fff; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-width:1440px; /* desktop-first; responsive comes later */ } /* section backgrounds span the full viewport; content stays centered */ .uf-page>.uf-canvas>section, .uf-page>.uf-canvas>header, .uf-page>.uf-canvas>footer{width:100%;} .uf-page a{text-decoration:none;color:inherit;} .uf-page ul{list-style:none;padding:0;} .uf-page p{margin:0;} .uf-page h1,.uf-page h2,.uf-page h3,.uf-page h4{margin:0;font-weight:700;} img{display:block;max-width:none;} /* full-width page; backgrounds fill the screen, content centered at 1440/1344 */ .uf-canvas{width:100%;margin:0 auto;position:relative;overflow-x:hidden;} /* shared inner container (48px gutters → 1344 content) */ .uf-wrap{width:1344px;margin:0 auto;} /* ============================================================ NAV */ .uf-nav{background:var(--uf-navy-dark);height:64px;} .uf-nav-in{height:64px;display:flex;align-items:center;justify-content:space-between; padding:0 32px;max-width:1440px;margin:0 auto;} .uf-nav-logo{height:42px;width:126px;object-fit:contain;object-position:center;} .uf-nav-menu{display:flex;align-items:center;gap:24px;direction:rtl;} .uf-nav-menu a{font-size:14px;line-height:20px;color:rgba(255,255,255,.9);font-weight:400;} .uf-nav-menu a.active{color:var(--uf-gold);font-weight:700;} .uf-nav-actions{display:flex;align-items:center;gap:12px;} .uf-lang{display:flex;align-items:center;gap:8px;background:rgba(240,249,255,.2);direction:ltr; border-radius:12px;padding:8px 12px;color:#fff;font-size:16px;line-height:18px;font-weight:500;cursor:pointer;} .uf-lang i{font-size:22px;} .uf-btn-login{background:var(--uf-gold);color:var(--uf-navy);font-weight:500;font-size:16px; line-height:16px;border-radius:12px;padding:0 16px;height:41px;min-width:64px;display:flex; align-items:center;justify-content:center;white-space:nowrap;border:0;cursor:pointer;} /* ============================================================ HERO */ .uf-hero{position:relative;height:697px;background:var(--uf-navy);overflow:hidden;} .uf-hero-bg{position:absolute;inset:62px 0 0 0;height:635px;width:100%;object-fit:cover; opacity:.9;} .uf-hero-inner{position:relative;width:1440px;height:697px;margin:0 auto;} .uf-hero-instructor{position:absolute;left:531px;top:51px;width:877px;height:auto;} .uf-hero-copy{position:absolute;left:55px;top:243px;width:626px;text-align:right;} .uf-hero-copy h1{font-size:48px;line-height:75px;color:#fff;font-weight:700;margin-bottom:24px;} .uf-hero-copy h1 .gold{color:var(--uf-gold);} .uf-hero-copy p{font-size:18px;line-height:28px;color:var(--uf-light);max-width:576px;margin-right:auto;} /* ============================================================ STATS STRIP */ .uf-strip{background:var(--uf-navy);padding:25px 0 24px;} .uf-strip-in{display:flex;justify-content:space-between;direction:ltr;} .uf-strip-cell{width:318px;display:flex;align-items:center;justify-content:center;gap:16px; position:relative;height:48px;} .uf-strip-cell + .uf-strip-cell::after{content:"";position:absolute;right:-12px;top:2px; width:1px;height:44px;background:rgba(255,255,255,.12);} .uf-strip-cell .uf-strip-ico{width:46px;height:45px;display:flex;align-items:center;justify-content:center; color:var(--uf-gold);font-size:34px;flex:none;} .uf-strip-txt{text-align:right;} .uf-strip-txt .t1{color:#fff;font-weight:700;font-size:20px;line-height:28px;white-space:nowrap;} .uf-strip-txt .t2{color:var(--uf-muted2);font-size:14px;line-height:20px;white-space:nowrap;} /* ============================================================ ROLES (اختر من أنت) */ .uf-roles{background:#fff;padding:64px 0;} .uf-roles-head{text-align:center;margin-bottom:0;height:84px;} .uf-roles-head h2{font-size:30px;line-height:36px;color:var(--uf-navy);font-weight:700;} .uf-roles-head h2 .gold{color:var(--uf-gold);} .uf-roles-grid{display:flex;justify-content:space-between;gap:24px;direction:ltr;} .uf-role-card{width:318px;height:442px;border:1px solid var(--uf-border);border-radius:16px; overflow:hidden;display:flex;flex-direction:column;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1); background:#fff;transition:transform .15s ease,box-shadow .15s ease;} .uf-role-card:hover{transform:translateY(-4px);box-shadow:0 18px 30px -10px rgba(0,0,0,.18);} .uf-role-media{position:relative;height:192px;width:100%;} .uf-role-media img{width:100%;height:192px;object-fit:cover;} .uf-role-badge{position:absolute;left:12px;top:158px;width:56px;height:56px;border-radius:50%; display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px; box-shadow:0 11.6px 17.5px -3.5px rgba(0,0,0,.1),0 4.6px 7px -4.6px rgba(0,0,0,.1);} .uf-role-body{padding:20px;display:flex;flex-direction:column;text-align:right;flex:1;} .uf-role-body h3{font-size:20px;line-height:28px;color:var(--uf-navy);font-weight:700;margin-bottom:8px;} .uf-role-body .sub{font-size:14px;line-height:20px;color:var(--uf-muted);margin-bottom:16px;} .uf-role-list{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;} .uf-role-list li{display:flex;align-items:center;justify-content:flex-end;direction:ltr;gap:8px; font-size:14px;line-height:20px;color:var(--uf-text);} .uf-role-list li span{text-align:right;} .uf-role-list li i{font-size:14px;flex:none;color:#22c55e;} .uf-role-btn{margin-top:auto;height:40px;border-radius:8px;display:flex;align-items:center; justify-content:center;gap:8px;color:#fff;font-weight:700;font-size:14px;border:0;cursor:pointer;} .uf-role-btn i{font-size:13px;} /* per-role tints */ .uf-role-card.org{background:#fffcf5;} .uf-role-card.org .uf-role-badge,.uf-role-card.org .uf-role-btn{background:var(--uf-role-org);} .uf-role-card.trainer{background:#fbf8ff;} .uf-role-card.trainer .uf-role-badge,.uf-role-card.trainer .uf-role-btn{background:var(--uf-role-trainer);} .uf-role-card.uni{background:#f8faff;} .uf-role-card.uni .uf-role-badge,.uf-role-card.uni .uf-role-btn{background:var(--uf-role-uni);} .uf-role-card.school{background:#f6fff9;} .uf-role-card.school .uf-role-badge,.uf-role-card.school .uf-role-btn{background:var(--uf-role-school);} /* ============================================================ FREE-TEST BANNER */ .uf-cta-test{padding:48px 0;background:#fff;} .uf-cta-test-box{position:relative;width:1342px;margin:0 auto;border-radius:24px;overflow:hidden; background:var(--uf-navy);min-height:418px;display:flex;align-items:center;} .uf-cta-test-box>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;} .uf-cta-test-in{position:relative;width:856px;margin:0 60px 0 auto;display:flex;justify-content:space-between; gap:24px;} .uf-cta-feats{width:416px;display:flex;flex-direction:column;gap:24px;order:2;} .uf-cta-feat{display:flex;align-items:center;justify-content:flex-start;gap:16px;height:48px;text-align:right;} .uf-cta-feat span{flex:none;color:#fff;font-size:18px;line-height:28px;font-weight:700;} .uf-cta-feat .ic{width:48px;height:48px;display:flex;align-items:center;justify-content:center;flex:none; background:rgba(242,164,29,.2);border-radius:8px;color:var(--uf-gold);font-size:20px;} .uf-cta-copy{width:416px;text-align:right;order:1;} .uf-cta-copy .eyebrow{color:var(--uf-gold);font-size:14px;line-height:20px;font-weight:700;margin-bottom:8px;} .uf-cta-copy h2{color:#fff;font-size:36px;line-height:40px;font-weight:700;margin-bottom:24px;} .uf-cta-copy p{color:var(--uf-light);font-size:18px;line-height:28px;margin-bottom:32px;} .uf-cta-copy .uf-btn-gold{display:inline-flex;align-items:center;gap:8px;background:var(--uf-gold); color:var(--uf-navy);font-weight:700;font-size:16px;border-radius:8px;padding:12px 24px;border:0;cursor:pointer;} /* ============================================================ PARTNERS */ .uf-partners{background:#f8f9fa;padding:64px 0;} .uf-partners h2{text-align:center;font-size:30px;line-height:36px;color:var(--uf-navy);font-weight:700;margin-bottom:48px;} .uf-partners h2 .gold{color:var(--uf-gold);} .uf-partners-strip{width:1344px;margin:0 auto;display:block;} .uf-partners-strip img{width:100%;height:auto;} /* ============================================================ ADVISOR */ .uf-advisor{background:var(--uf-navy-dark);padding:32px 0;border-bottom:1px solid rgba(255,255,255,.1);} .uf-advisor-in{position:relative;height:278px;} .uf-advisor-stat + .uf-advisor-stat{border-left:1px solid #161616;} .uf-advisor-photo{position:absolute;left:998px;top:0;width:333px;height:278px;object-fit:contain;} .uf-advisor-copy{position:absolute;left:534px;top:18px;width:416px;text-align:right;} .uf-advisor-copy h2{color:#fff;font-size:36px;line-height:40px;font-weight:700;margin-bottom:16px;} .uf-advisor-copy .role{color:var(--uf-gold);font-size:18px;line-height:28px;font-weight:700;margin-bottom:16px;} .uf-advisor-copy p{color:var(--uf-light);font-size:18px;line-height:29px;margin-bottom:32px;} .uf-advisor-copy .uf-btn-outline{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--uf-gold); color:var(--uf-gold);font-weight:700;font-size:16px;border-radius:8px;padding:14px 26px;background:transparent;cursor:pointer;} .uf-advisor-stats{position:absolute;left:13px;top:77px;display:flex;gap:0;direction:ltr;} .uf-advisor-stat{width:158px;text-align:center;} .uf-advisor-stat .ic{width:56px;height:56px;margin:0 auto;display:flex;align-items:center;justify-content:center; color:var(--uf-gold);font-size:30px;} .uf-advisor-stat .num{color:#fff;font-weight:700;font-size:28px;line-height:32px;margin-top:12px;} .uf-advisor-stat .lbl{color:var(--uf-muted2);font-size:14px;line-height:20px;margin-top:8px;} /* ============================================================ FOOTER */ .uf-footer{background:var(--uf-navy-dark);padding:64px 0 32px;} .uf-footer-cols{display:flex;justify-content:space-between;gap:40px;padding-bottom:48px;direction:ltr;} .uf-footer-col{width:306px;text-align:right;} .uf-footer-col h4{color:#fff;font-size:16px;line-height:24px;font-weight:700;margin-bottom:16px;} .uf-footer-col ul li{margin-bottom:12px;} .uf-footer-col ul li a,.uf-footer-contact li{color:var(--uf-muted2);font-size:14px;line-height:20px;} .uf-footer-contact li{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-bottom:12px;} .uf-footer-contact li i{font-size:13px;color:var(--uf-muted2);flex:none;} .uf-footer-brand img{height:42px;width:126px;object-fit:contain;margin-bottom:12px;margin-left:auto;} .uf-footer-brand p{color:var(--uf-muted2);font-size:14px;line-height:22.75px;margin-bottom:24px;} .uf-footer-social{display:flex;justify-content:flex-end;gap:12px;} .uf-footer-social a{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.1); display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;} .uf-footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:33px;text-align:center;} .uf-footer-bottom p{color:var(--uf-muted3);font-size:14px;line-height:20px;} /* ============================================================ AUTH PAGES (login / register / verify / forgot / reset) */ .uf-auth{position:relative;min-height:960px;overflow:hidden;display:flex; background:linear-gradient(173.83deg,#f4f7ff 47.2%,#d7e6ff 83.3%);} .uf-auth-illus{position:absolute;left:24px;bottom:0;width:520px;height:auto;pointer-events:none;z-index:1;} .uf-auth-illus.phone{width:360px;left:90px;bottom:80px;} .uf-auth-inner{position:relative;z-index:2;width:100%;max-width:1440px;margin:0 auto;min-height:960px; display:flex;align-items:center;justify-content:space-between;padding:0 72px;direction:ltr;} .uf-auth-copy{width:600px;text-align:right;} .uf-auth-copy h2{font-size:36px;line-height:46px;color:var(--uf-navy);font-weight:700;margin-bottom:18px;} .uf-auth-copy p{font-size:18px;line-height:30px;color:var(--uf-muted);max-width:600px;margin-right:auto;} .uf-auth-card{width:510px;flex:none;} .uf-auth-logo{width:186px;height:77px;object-fit:contain;display:block;margin:0 auto 30px;} .uf-auth-card h2{font-size:28px;line-height:39px;color:var(--uf-navy);font-weight:700;text-align:center;margin-bottom:10px;} .uf-auth-sub{text-align:center;font-size:16px;color:var(--uf-navy);margin-bottom:30px;} .uf-auth-sub a{color:var(--uf-gold);font-weight:700;} .uf-auth-desc{text-align:center;font-size:18px;line-height:28px;color:#474747;max-width:420px;margin:0 auto 30px!important;} .uf-field{position:relative;margin-bottom:22px;} .uf-field>label{display:block;text-align:right;font-size:14px;color:var(--uf-text);margin-bottom:8px;font-weight:500;} .uf-field .ctrl{position:relative;} .uf-field input{width:100%;height:58px;border:1px solid #e5e7eb;border-radius:10px;background:#fff; padding:0 48px;font-family:inherit;font-size:15px;color:var(--uf-text);text-align:right;outline:none;} .uf-field input::placeholder{color:#9ca3af;} .uf-field input:focus{border-color:var(--uf-gold);box-shadow:0 0 0 3px rgba(242,164,29,.12);} .uf-field .ic-r{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--uf-gold);font-size:16px;} .uf-field .ic-l{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--uf-gold);font-size:16px;cursor:pointer;background:transparent;border:0;padding:0;} .uf-field.phone input{padding-left:78px;} .uf-cc{position:absolute;left:14px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:5px; font-size:14px;color:var(--uf-text);border-left:1px solid #e5e7eb;padding-left:10px;} .uf-cc .chev{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #6b7280;} .uf-auth-forgot{text-align:right;margin:-6px 0 24px;} .uf-auth-forgot a{color:var(--uf-gold);font-size:15px;font-weight:500;} .uf-btn-primary{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:56px; background:var(--uf-navy);color:#fff;font-weight:700;font-size:17px;border:0;border-radius:12px;cursor:pointer;} .uf-btn-primary:hover{background:#16294d;} /* contact submit — gold pill, navy text, send glyph, auto width right-aligned (Figma BUTTON-152) */ .uf-btn-send{display:inline-flex;align-items:center;gap:8px;background:var(--uf-gold);color:#0b1d3a; font-weight:700;font-size:14px;border:0;border-radius:12px;padding:14px 32px;cursor:pointer;} .uf-btn-send:hover{background:#e0961a;} .uf-btn-send .ufi{font-size:14px;} .uf-auth-terms{display:flex;align-items:flex-start;justify-content:flex-start;gap:8px;text-align:right; font-size:13px;color:var(--uf-muted);margin-bottom:22px;direction:rtl;} .uf-auth-terms input{width:18px;height:18px;margin-top:1px;accent-color:var(--uf-gold);flex:none;} /* AUTH PAGES (login/register/verify/forgot/reset, Frames -84..-80) — exact 1440 match: large left illustration (blob + laptop/phone) spans the left half, centered copy over the blob, card pinned right & vertically centred in the page (Figma centres every card at page-y 512). Per-page illustration via the src; phone pages add `.auth-phone` (copy sits ~35px higher). */ .auth .uf-auth-inner{display:block;padding:0;} .auth .uf-auth-illus{left:0;width:835px;height:auto;} .auth .uf-auth-illus-sm{display:none;} .auth .uf-auth-copy{position:absolute;left:72px;top:364px;width:596px;text-align:center;z-index:2;} .auth-phone .uf-auth-copy{top:329px;} .auth .uf-auth-copy h2{font-size:28px;line-height:1.25;font-weight:500;color:#021b43;margin-bottom:18px;} .auth .uf-auth-copy p{font-size:18.5px;line-height:37px;color:#121212;max-width:596px;margin:0 auto;text-align:center;} .auth .uf-auth-card{position:absolute;left:835px;top:448px;transform:translateY(-50%);width:510px;z-index:2;} .auth .uf-auth-card h2{font-size:24px;font-weight:600;color:#021b43;margin-bottom:8px;} .auth .uf-auth-sub{font-size:18px;color:#474747;} .auth .uf-field input{height:56px;border-color:#ebebeb;} .auth .uf-field input::placeholder{color:#595e6b;} /* OTP */ .uf-otp{display:flex;gap:12px;direction:ltr;justify-content:center;margin-bottom:20px;} .uf-otp input{width:64px;height:64px;border:1px solid #e5e7eb;border-radius:12px;background:#fff; text-align:center;font-size:24px;font-weight:700;color:var(--uf-navy);outline:none;} .uf-otp input:focus{border-color:var(--uf-gold);box-shadow:0 0 0 3px rgba(242,164,29,.12);} .uf-otp-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;font-size:14px;} .uf-otp-meta .timer{color:var(--uf-muted3);} .uf-otp-meta a{color:var(--uf-gold);font-weight:500;} /* ============================================================ PAGE HEADER BAND (dark) */ .uf-pagehead{position:relative;background:#020b1a;padding:48px 32px;text-align:center;overflow:hidden;} .uf-pagehead h1{font-size:30px;line-height:36px;color:#fff;font-weight:700;margin-bottom:16px;position:relative;z-index:2;} .uf-pagehead p{font-size:14px;line-height:20px;color:rgba(255,255,255,.7);position:relative;z-index:2;} .uf-pagehead .shape{position:absolute;z-index:1;pointer-events:none;opacity:.9;} .uf-pagehead .shape.s1{right:0;bottom:-30px;width:213px;} .uf-pagehead .shape.s2{left:0;top:-30px;height:230px;} .uf-pagehead .shape.s3{left:32px;top:30px;width:50px;} /* pagehead decals (dashes top-left + dotted ring/shape top-right) baked from the Figma export — the old head-shape-*.png were SVGs mislabelled .png and never rendered on file://. Add `.deco` to any `.uf-pagehead` that should show them (test-intro/questions/result). */ .uf-pagehead.deco{background-image:url("../img/test-head-bg.png");background-repeat:no-repeat;background-position:center top;background-size:1440px 168px;} /* pagehead PHOTO variant (contact) — full-bleed photo bg + dark overlay, right-aligned breadcrumb/H1/copy (Figma SECTION-2 140:39978). */ .uf-pagehead.photo{padding:112px 64px 64px;text-align:right;min-height:350px;background:#0b1d3a;} .uf-pagehead.photo .ph-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;} .uf-pagehead.photo::after{content:"";position:absolute;inset:0;background:rgba(1,11,26,.6);z-index:1;} .uf-pagehead.photo .ph-in{position:relative;z-index:2;max-width:1312px;margin:0 auto;} .uf-pagehead.photo .ph-crumb{display:flex;align-items:center;justify-content:flex-end;gap:8px; font-size:14px;color:rgba(255,255,255,.7);margin-bottom:16px;} .uf-pagehead.photo .ph-crumb a{color:rgba(255,255,255,.7);text-decoration:none;} .uf-pagehead.photo .ph-crumb span{color:var(--uf-gold);} .uf-pagehead.photo .ph-crumb .ufi{font-size:11px;color:rgba(255,255,255,.7);} .uf-pagehead.photo h1{font-size:48px;line-height:48px;color:#fff;font-weight:700;margin-bottom:16px;} .uf-pagehead.photo h1 span{color:var(--uf-gold);} .uf-pagehead.photo p{font-size:16px;line-height:26px;color:rgba(255,255,255,.7);max-width:672px;margin-left:auto;margin-right:0;} /* ============================================================ TEST FLOW (intro / questions / result) */ .uf-test-intro{background:#f5f7fb;padding:48px 32px;} .uf-test-card{width:672px;max-width:672px;margin:0 auto;background:#fff;border:1px solid var(--uf-border); border-radius:16px;padding:33px;text-align:center;box-shadow:0 1px 1px rgba(0,0,0,.05);} .uf-test-card .brain{width:192px;height:192px;border-radius:16px;object-fit:cover;margin:0 auto 24px;} .uf-test-card h2{font-size:24px;line-height:32px;color:var(--uf-navy);font-weight:700;margin-bottom:12px;} .uf-test-card .desc{font-size:14px;line-height:22.75px;color:#475569;max-width:512px;margin:0 auto;} .uf-test-pills{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px;} .uf-test-pill{display:inline-flex;align-items:center;gap:8px;background:#f5f7fb;border-radius:9999px; padding:8px 16px;font-size:12px;font-weight:700;color:#475569;} .uf-test-pill i{font-size:12px;color:var(--uf-gold);} .uf-test-start{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:32px;} .uf-btn-gold-cta{display:inline-flex;align-items:center;gap:8px;background:var(--uf-gold);color:var(--uf-navy); font-weight:700;font-size:16px;border-radius:12px;padding:16px 32px;border:0;cursor:pointer;} .uf-btn-gold-cta:hover{background:#e0961a;} .uf-test-note{font-size:12px;color:#475569;} /* test questions */ .uf-quiz{background:#f5f7fb;padding:48px 32px;min-height:560px;} .uf-quiz-card{width:768px;max-width:768px;margin:0 auto;} .uf-quiz-progress{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px; font-size:14px;color:#475569;direction:ltr;} .uf-quiz-progress .pct{color:var(--uf-gold);font-weight:700;} .uf-quiz-bar{height:8px;background:#e5e7eb;border-radius:9999px;overflow:hidden;margin-bottom:28px;} .uf-quiz-bar span{display:block;height:100%;background:var(--uf-gold);border-radius:9999px;} .uf-quiz-q{font-size:22px;line-height:32px;color:var(--uf-navy);font-weight:700;text-align:right;margin-bottom:24px!important;} .uf-quiz-opts{display:flex;flex-direction:column;gap:14px;margin-bottom:30px;} .uf-quiz-opt{display:flex;align-items:center;justify-content:flex-start;gap:12px;background:#fff;border:1px solid #e5e7eb; border-radius:12px;padding:16px 20px;text-align:right;font-size:16px;color:var(--uf-text);cursor:pointer;transition:.15s;} .uf-quiz-opt:hover{border-color:var(--uf-gold);background:#fffdf7;} .uf-quiz-opt .dot{width:20px;height:20px;border:2px solid #cbd5e1;border-radius:50%;flex:none;} .uf-quiz-opt.sel{border-color:var(--uf-gold);background:#fffdf7;} .uf-quiz-opt.sel .dot{border-color:var(--uf-gold);background:var(--uf-gold);box-shadow:inset 0 0 0 3px #fff;} .uf-quiz-nav{display:flex;align-items:center;justify-content:space-between;direction:ltr;} .uf-btn-ghost{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid #cbd5e1; color:#475569;border-radius:12px;padding:12px 28px;font-weight:500;font-size:15px;cursor:pointer;} /* test result */ .uf-result{background:#f5f7fb;padding:40px 32px 56px;} .uf-result-inner{width:768px;max-width:768px;margin:0 auto;} .uf-rc{background:#fff;border:1px solid var(--uf-border);border-radius:16px;padding:28px;margin-bottom:20px;} .uf-rc-main{text-align:center;} .uf-rc-bulb{width:64px;height:64px;border-radius:50%;background:#fff7e6;color:var(--uf-gold); display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 16px;} .uf-rc-main .label{color:var(--uf-navy);font-weight:700;font-size:20px;} .uf-rc-main .field{color:var(--uf-gold);font-weight:700;font-size:18px;margin-top:4px;} .uf-rc-main .sub{color:#475569;font-size:14px;margin-top:6px;} .uf-rc h3{font-size:18px;color:var(--uf-navy);font-weight:700;text-align:right;margin-bottom:16px; display:flex;align-items:center;gap:8px;justify-content:flex-start;} .uf-rc h3 i{color:var(--uf-green);font-size:14px;} .uf-rc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;direction:rtl;} .uf-rc-item{display:flex;align-items:center;justify-content:flex-start;gap:8px;background:#f5f7fb; border-radius:10px;padding:12px 16px;font-size:14px;color:#374151;text-align:right;} .uf-rc-item i{color:var(--uf-green);font-size:12px;flex:none;} .uf-rc-item .ufi-arrow{color:var(--uf-gold);transform:rotate(90deg);} .uf-result-tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start;} .uf-result-tag{border:1px solid var(--uf-gold);color:var(--uf-gold);border-radius:9999px; padding:6px 16px;font-size:14px;font-weight:500;} .uf-result-courses{display:flex;gap:16px;direction:ltr;} .uf-rcourse{flex:1;background:#fff;border:1px solid var(--uf-border);border-radius:12px;overflow:hidden;} .uf-rcourse>img{width:100%;height:120px;object-fit:cover;} .uf-rcourse-body{padding:14px;text-align:right;} .uf-rcourse-body h4{font-size:15px;color:var(--uf-navy);font-weight:700;margin-bottom:10px;} .uf-rcourse-row{display:flex;align-items:center;justify-content:space-between;direction:ltr;} .uf-rcourse-row .price{color:#475569;font-size:13px;font-weight:700;} .uf-rcourse-row a{background:var(--uf-gold);color:var(--uf-navy);font-weight:700;font-size:12px; border-radius:8px;padding:6px 16px;} .uf-result-actions{display:flex;align-items:center;justify-content:space-between;margin-top:8px;direction:ltr;gap:16px;} .uf-result-actions .right{display:flex;gap:12px;align-items:center;} .uf-link-save{color:#475569;font-size:14px;} .uf-pagehead-back{position:absolute;top:24px;right:32px;z-index:3;color:rgba(255,255,255,.85)!important; font-size:14px;display:inline-flex;align-items:center;gap:6px;} .uf-pagehead-back i{font-size:12px;} /* ============================================================ CONTACT */ .uf-contact{background:#fff;padding:56px 48px;} .uf-contact-inner{max-width:1344px;margin:0 auto;display:flex;gap:32px;align-items:flex-start;} .uf-contact-form{flex:1;background:#fff;border:1px solid var(--uf-border);border-radius:16px;padding:32px;text-align:right;} .uf-contact-form h2{font-size:24px;color:var(--uf-navy);font-weight:700;text-align:right;margin-bottom:6px;} .uf-contact-form .sub{font-size:14px;color:#475569;text-align:right;margin-bottom:24px;} .uf-form-row{display:flex;gap:16px;} .uf-form-row>.uf-fg{flex:1;} .uf-fg{margin-bottom:18px;} .uf-fg label{display:block;text-align:right;font-size:14px;color:var(--uf-text);font-weight:500;margin-bottom:8px;} .uf-fg input,.uf-fg select,.uf-fg textarea{width:100%;border:1px solid #e5e7eb;border-radius:10px;background:#fff; padding:12px 16px;font-family:inherit;font-size:15px;color:var(--uf-text);text-align:right;outline:none;} .uf-fg textarea{height:140px;resize:none;} .uf-fg input:focus,.uf-fg textarea:focus,.uf-fg select:focus{border-color:var(--uf-gold);box-shadow:0 0 0 3px rgba(242,164,29,.12);} .uf-fg .count{text-align:left;font-size:12px;color:#9ca3af;margin-top:6px;} .uf-contact-aside{width:360px;flex:none;display:flex;flex-direction:column;gap:16px;} .uf-contact-card{background:#f8f9fa;border:0;border-radius:16px;padding:20px; display:flex;gap:16px;align-items:flex-start;text-align:right;direction:rtl;} .uf-contact-card .ico{width:48px;height:48px;border-radius:12px;background:rgba(242,164,29,.1);color:var(--uf-gold); display:flex;align-items:center;justify-content:center;font-size:18px;flex:none;} .uf-contact-card .meta h4{font-size:14px;color:#0b1d3a;font-weight:700;margin-bottom:4px;} .uf-contact-card .meta .v{font-size:14px;color:var(--uf-text);font-weight:500;} .uf-contact-card .meta .s{font-size:12px;color:#9ca3af;margin-top:4px;} .uf-contact-social{background:#0b1d3a;border-radius:16px;padding:22px;text-align:right;} .uf-contact-social h4{color:#fff;font-size:16px;font-weight:700;margin-bottom:16px;} .uf-contact-social .row{display:flex;gap:12px;justify-content:flex-start;} .uf-contact-social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff; display:flex;align-items:center;justify-content:center;font-size:16px;} /* ============================================================ ABOUT PAGE (من نحن — node 140:40346) */ /* hero band */ .uf-about-hero{position:relative;height:550px;background:#0b1d3a;overflow:hidden;} .uf-about-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .uf-about-hero .ov{position:absolute;inset:0;background:rgba(1,11,26,.6);} .uf-about-hero-in{position:relative;z-index:2;max-width:1440px;margin:0 auto;padding:112px 64px 64px; display:flex;justify-content:flex-start;} .uf-about-hero-box{width:768px;text-align:right;} .uf-about-bc{display:flex;justify-content:flex-start;align-items:center;gap:8px;margin-bottom:16px;} .uf-about-bc .cur{color:var(--uf-gold);font-size:14px;line-height:20px;} .uf-about-bc a{color:rgba(255,255,255,.6);font-size:14px;line-height:20px;} .uf-about-bc i{color:rgba(255,255,255,.45);font-size:11px;} .uf-about-hero-box h1{font-size:48px;line-height:1.2;color:#fff;font-weight:700;margin-bottom:16px;} .uf-about-hero-box h1 .gold{color:var(--uf-gold);} .uf-about-hero-box p{font-size:16px;line-height:26px;color:rgba(255,255,255,.7);max-width:512px;} /* shared section heading (centered with gold dashes / single right dash) */ .uf-about-sec{max-width:1440px;margin:0 auto;padding:0 64px;} .uf-about-h2c{display:flex;align-items:center;justify-content:center;gap:12px;} .uf-about-h2c h2{font-size:24px;line-height:32px;color:#0b1d3a;font-weight:700;} .uf-about-dash{width:32px;height:1px;background:var(--uf-gold);flex:none;} .uf-about-sec-sub{font-size:14px;line-height:20px;color:#6b7280;text-align:center;margin-top:12px;} /* intro (من نحن؟) */ .uf-about-intro{background:#fff;padding:64px 0;} .uf-about-intro-in{max-width:1440px;margin:0 auto;padding:0 64px;display:flex;gap:48px;align-items:center;justify-content:flex-start;} .uf-about-intro-text{flex:1;text-align:right;} .uf-about-h2r{display:flex;align-items:center;gap:12px;justify-content:flex-start;margin-bottom:16px;} .uf-about-h2r h2{font-size:24px;line-height:32px;color:#0b1d3a;font-weight:700;} .uf-about-intro-text p{font-size:16px;line-height:26px;color:var(--uf-muted);margin-bottom:24px;} .uf-about-intro-text p:last-child{margin-bottom:0;} .uf-about-intro-img{width:505px;height:407px;flex:none;border-radius:16px;object-fit:cover; box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);} /* vision / mission / goals */ .uf-about-vrm{background:#f8f9fa;padding:64px 0;} .uf-about-vrm .head{margin-bottom:48px;} .uf-about-vrm-grid{display:flex;gap:24px;direction:ltr;justify-content:center;} .uf-about-vrm-card{width:421px;background:#fff;border:1px solid var(--uf-border);border-radius:16px; padding:33px;display:flex;flex-direction:column;align-items:center;text-align:center; box-shadow:0 1px 1px rgba(0,0,0,.05);} .uf-about-vrm-ico{width:64px;height:64px;border-radius:16px;background:#0b1d3a;color:var(--uf-gold); display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:20px;} .uf-about-vrm-card h3{font-size:18px;line-height:28px;color:#0b1d3a;font-weight:700;margin-bottom:12px;} .uf-about-vrm-card p{font-size:14px;line-height:22.75px;color:var(--uf-muted3);} /* values */ .uf-about-values{background:#fff;padding:64px 0;} .uf-about-values .head{margin-bottom:48px;} .uf-about-vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;direction:ltr;} .uf-about-vcard{background:#f8f9fa;border:1px solid transparent;border-radius:16px;padding:25px; direction:rtl;text-align:right;} .uf-about-vcard .vh{display:flex;align-items:center;gap:16px;justify-content:flex-start;margin-bottom:12px;} .uf-about-vcard .vh .ico{width:48px;height:48px;border-radius:12px;background:rgba(242,164,29,.1); color:var(--uf-gold);display:flex;align-items:center;justify-content:center;font-size:20px;flex:none;} .uf-about-vcard .vh h3{font-size:16px;line-height:24px;color:#0b1d3a;font-weight:700;} .uf-about-vcard p{font-size:14px;line-height:22.75px;color:var(--uf-muted3);} /* timeline */ .uf-about-timeline{background:#f8f9fa;padding:64px 0;} .uf-about-timeline .head{margin-bottom:48px;} .uf-about-tl{position:relative;max-width:1312px;margin:0 auto;} .uf-about-tl::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px; background:rgba(242,164,29,.3);transform:translateX(-50%);} .uf-about-tl-row{display:flex;align-items:center;gap:24px;direction:ltr;position:relative;} .uf-about-tl-row + .uf-about-tl-row{margin-top:32px;} .uf-about-tl-sp{width:612px;flex:none;} .uf-about-tl-dot{width:40px;height:40px;border-radius:9999px;background:var(--uf-gold);color:#0b1d3a; display:flex;align-items:center;justify-content:center;font-size:14px;flex:none;z-index:2;} .uf-about-tl-card{width:612px;flex:none;background:#fff;border:1px solid var(--uf-border);border-radius:16px; padding:25px;box-shadow:0 1px 1px rgba(0,0,0,.05);} .uf-about-tl-row.r .uf-about-tl-card{text-align:left;} .uf-about-tl-row.l .uf-about-tl-card{text-align:right;} .uf-about-tl-card .yr{color:var(--uf-gold);font-size:14px;line-height:20px;font-weight:700;} .uf-about-tl-card h3{color:#0b1d3a;font-size:18px;line-height:28px;font-weight:700;margin:4px 0 8px;} .uf-about-tl-card p{color:var(--uf-muted3);font-size:14px;line-height:22.75px;} /* stats strip */ .uf-about-stats{background:#0b1d3a;padding:56px 0;} .uf-about-stats-in{max-width:1440px;margin:0 auto;padding:0 64px;display:flex;gap:32px;direction:ltr;justify-content:center;} .uf-about-stat{width:304px;display:flex;flex-direction:column;align-items:center;text-align:center;} .uf-about-stat .ico{width:56px;height:56px;display:flex;align-items:center;justify-content:center; color:var(--uf-gold);font-size:31px;margin-bottom:12px;} .uf-about-stat .num{color:var(--uf-gold);font-size:30px;line-height:36px;font-weight:700;margin-bottom:4px;} .uf-about-stat .lbl{color:rgba(255,255,255,.6);font-size:14px;line-height:20px;} /* final CTA card */ .uf-about-cta{background:#fff;padding:64px 0;} .uf-about-cta-wrap{max-width:1440px;margin:0 auto;padding:0 64px;} .uf-about-cta-card{position:relative;background:#0b1d3a;border-radius:24px;overflow:hidden;padding:64px;text-align:center;} .uf-about-cta-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.1;} .uf-about-cta-in{position:relative;z-index:2;} .uf-about-cta-in h2{color:#fff;font-size:30px;line-height:36px;font-weight:700;margin-bottom:16px;} .uf-about-cta-in p{color:rgba(255,255,255,.6);font-size:14px;line-height:20px;max-width:512px;margin:0 auto 32px;} .uf-about-cta-btns{display:flex;justify-content:center;gap:16px;direction:ltr;} .uf-about-cta-btns a{display:inline-flex;align-items:center;gap:8px;height:50px;border-radius:12px; font-size:14px;font-weight:700;padding:0 32px;} .uf-about-cta-btns .ghost{border:1px solid rgba(255,255,255,.3);color:#fff;} .uf-about-cta-btns .gold{background:var(--uf-gold);color:#0b1d3a;} .uf-about-cta-btns i{font-size:12px;} /* ============================================================ FOUNDER PAGE (محمد مكي — node 140:40912) */ /* hero */ .uf-mk-hero{position:relative;height:635px;background:#0b1d3a;overflow:hidden;} .uf-mk-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .uf-mk-hero-inner{position:relative;width:1440px;height:635px;margin:0 auto;} .uf-mk-hero-photo{position:absolute;left:618px;top:-13px;width:791px;height:auto;pointer-events:none;} .uf-mk-hero-copy{position:absolute;left:52px;top:197px;width:613px;text-align:right;} .uf-mk-hero-copy .uf-mk-lead{margin-left:auto;margin-right:0;} .uf-mk-hero-copy h1{font-size:60px;line-height:60px;font-weight:700;color:#fff;margin-bottom:22px;} .uf-mk-role{color:var(--uf-gold);font-size:20px;line-height:28px;font-weight:700;margin-bottom:16px;} .uf-mk-lead{color:rgba(255,255,255,.7);font-size:16px;line-height:26px;max-width:512px;margin-bottom:32px;} .uf-mk-hstats{display:flex;direction:ltr;justify-content:flex-end;align-items:center;gap:24px;width:100%;} .uf-mk-hstat{display:flex;flex-direction:column;align-items:center;} .uf-mk-hstat .n{color:var(--uf-gold);font-size:24px;line-height:32px;font-weight:700;} .uf-mk-hstat .l{color:rgba(255,255,255,.5);font-size:12px;line-height:16px;margin-top:0;} .uf-mk-hdiv{width:1px;height:40px;background:rgba(255,255,255,.2);} /* intro (كيف بدأت القصة؟) */ .uf-mk-intro{background:#fff;padding:64px 0;} .uf-mk-intro-in{max-width:1440px;margin:0 auto;padding:0 64px;display:flex;gap:48px;align-items:center;justify-content:flex-start;} .uf-mk-intro-text{flex:1;text-align:right;} .uf-mk-intro-text p{font-size:16px;line-height:26px;color:var(--uf-muted);margin-bottom:16px;} .uf-mk-intro-text p:last-child{margin-bottom:0;} .uf-mk-intro-imgwrap{position:relative;flex:none;width:505px;} .uf-mk-intro-img{width:505px;height:auto;display:block;} .uf-mk-quote-float{position:absolute;left:113px;top:449px;width:408px;background:var(--uf-gold);color:#0b1d3a; font-size:14px;line-height:20px;font-weight:700;text-align:right;padding:12px 24px;border-radius:12px; box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);} /* philosophy (فلسفتي) */ .uf-mk-phil{background:#f8f9fa;padding:64px 0;} .uf-mk-phil .head{margin-bottom:48px;} .uf-mk-phil-grid{display:flex;gap:20px;direction:ltr;justify-content:center;} .uf-mk-phil-card{width:313px;background:#fff;border:1px solid var(--uf-border);border-radius:16px;padding:25px; display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 1px 1px rgba(0,0,0,.05);} .uf-mk-phil-ico{width:56px;height:56px;border-radius:9999px;background:rgba(242,164,29,.1);color:var(--uf-gold); display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px;} .uf-mk-phil-card h3{font-size:16px;line-height:24px;color:#0b1d3a;font-weight:700;margin-bottom:8px;} .uf-mk-phil-card p{font-size:14px;line-height:22.75px;color:var(--uf-muted3);} /* timeline (محطات الرحلة) — centred spine, alternating cards */ .uf-mk-tl-sec{background:#fff;padding:64px 0;} .uf-mk-tl-sec .head{margin-bottom:48px;} .uf-mk-tl{position:relative;max-width:896px;margin:0 auto;} .uf-mk-tl::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(242,164,29,.3);transform:translateX(-50%);} .uf-mk-tl-row{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;direction:ltr;position:relative;} .uf-mk-tl-row + .uf-mk-tl-row{margin-top:40px;} .uf-mk-tl-row.r .uf-mk-tl-card{grid-column:2;} .uf-mk-tl-row.l .uf-mk-tl-card{grid-column:1;} .uf-mk-tl-card{background:#f8f9fa;border:1px solid var(--uf-border);border-radius:16px;padding:21px; box-shadow:0 1px 1px rgba(0,0,0,.05);text-align:right;direction:rtl;} .uf-mk-tl-yr{display:inline-flex;align-items:center;background:var(--uf-gold);color:#0b1d3a;font-size:12px; line-height:16px;font-weight:700;border-radius:8px;padding:4px 12px;margin-bottom:8px;} .uf-mk-tl-card h3{color:#0b1d3a;font-size:16px;line-height:24px;font-weight:700;margin-bottom:8px;} .uf-mk-tl-card p{color:var(--uf-muted3);font-size:14px;line-height:22.75px;} .uf-mk-tl-dot{position:absolute;left:50%;top:20px;width:12px;height:12px;border-radius:9999px;background:var(--uf-gold); transform:translateX(-50%);box-shadow:0 0 0 4px rgba(212,168,83,.2);z-index:2;} /* stats (تأثيرنا بالأرقام) — reuses .uf-about-stat* cells */ .uf-mk-stats{background:#0b1d3a;padding:56px 0;} .uf-mk-stats h2{color:#fff;font-size:24px;line-height:32px;font-weight:700;text-align:center;margin-bottom:40px;} /* quote */ .uf-mk-quotesec{background:#fff;padding:64px 0;text-align:center;} .uf-mk-quote-in{max-width:768px;margin:0 auto;} .uf-mk-quote-ico{width:50px;height:48px;color:var(--uf-gold);margin:0 auto 24px;} .uf-mk-quote-txt{font-size:30px;line-height:36px;font-weight:700;color:#0b1d3a;margin-bottom:24px;} .uf-mk-quote-by{font-size:18px;line-height:28px;font-weight:700;color:var(--uf-gold);} /* final CTA — reuses .uf-about-cta-* inner */ .uf-mk-cta{background:#f8f9fa;padding:64px 0;} /* ============================================================ LOGGED-IN NAV VARIANT (user chip) */ .uf-nav-actions.loggedin{direction:ltr;} .uf-nav-user{display:flex;align-items:center;gap:8px;background:rgba(240,249,255,.2);border-radius:8px; padding:0 16px;height:40px;direction:ltr;cursor:pointer;} .uf-nav-user .cv{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #fff;} .uf-nav-user .nm{color:#fff;font-size:14px;line-height:20px;} .uf-nav-user .av{width:28px;height:28px;border-radius:50%;background:var(--uf-gold);color:#0b1d3a; font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;} /* ============================================================ USER-TYPE HOME — طالب ثانوي (school) [green accent #016c57] */ /* hero */ .uf-sch-hero{position:relative;height:697px;background:#0f1e3d;overflow:hidden;} .uf-sch-hero-bg{position:absolute;left:0;top:62px;width:100%;height:635px;object-fit:cover;object-position:center;} .uf-sch-hero-inner{position:relative;width:1440px;height:697px;margin:0 auto;} .uf-sch-hero-copy{position:absolute;left:64px;top:231px;width:516px;padding-left:18px;text-align:right;} .uf-sch-hlabel{display:flex;align-items:center;gap:8px;justify-content:flex-start;margin-bottom:12px; color:#016c57;font-size:18px;line-height:20px;font-weight:700;} .uf-sch-hlabel i{font-size:22px;} .uf-sch-hero-copy h1{font-size:48px;line-height:75px;font-weight:700;color:#0b1d3a;margin-bottom:24px;} .uf-sch-hero-copy h1 .g{color:#016c57;} .uf-sch-hero-copy p{font-size:18px;line-height:28px;color:#626262;max-width:457px;} /* heading shared */ .uf-sch-h2{text-align:center;font-size:30px;line-height:36px;font-weight:700;color:#0f1e3d;margin-bottom:48px!important;} .uf-sch-h2 .g{color:var(--uf-gold);} /* services (خدماتنا تساعدك) */ .uf-sch-svcsec{background:#fff;padding:64px 0;} .uf-sch-svc-row{display:flex;gap:16px;direction:ltr;justify-content:center;max-width:1440px;margin:0 auto;padding:0 64px;} .uf-sch-svc{position:relative;width:316px;height:447px;border-radius:16px;overflow:hidden;flex:none;} .uf-sch-svc>img{width:100%;height:100%;object-fit:cover;} .uf-sch-svc-panel{position:absolute;left:0;bottom:0;width:100%;min-height:193px;border-radius:16px 16px 0 0; padding:24px 21px;display:flex;flex-direction:column;gap:17px;color:#fff;} .uf-sch-svc-panel.c-teal{background:rgba(0,85,87,.71);} .uf-sch-svc-panel.c-blue1{background:rgba(43,62,140,.82);} .uf-sch-svc-panel.c-brown{background:rgba(140,100,43,.82);} .uf-sch-svc-panel.c-blue2{background:rgba(43,96,140,.82);} .uf-sch-svc-top{display:flex;direction:ltr;align-items:center;justify-content:space-between;} .uf-sch-svc-top .num{font-size:36px;font-weight:700;text-decoration:underline;line-height:1;} .uf-sch-svc-top .ttl{font-size:22px;font-weight:700;} .uf-sch-svc-desc{font-size:14px;line-height:19.5px;text-align:right;} .uf-sch-svc-btn{display:flex;align-items:center;justify-content:center;gap:4px;height:49px;border:1px solid #fff; border-radius:8px;color:#fff;font-size:16px;font-weight:700;cursor:pointer;text-decoration:none;} .uf-sch-svc-btn i{font-size:12px;} /* group-exam banner */ .uf-sch-exam{background:#f8f9fa;padding:64px 0;} .uf-sch-exam-box{position:relative;max-width:1342px;margin:0 auto;height:415px;border-radius:24px;overflow:hidden; display:flex;direction:ltr;align-items:center;} .uf-sch-exam-box>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .uf-sch-exam-ov{position:absolute;left:0;top:0;height:100%;width:1162px; background:linear-gradient(to right,#030d1e 29%,rgba(9,69,157,0));} .uf-sch-exam-content{position:relative;z-index:2;width:565px;text-align:right;padding:0 50px;} .uf-sch-exam-content h2{color:#fff;font-size:32px;line-height:39px;font-weight:700;margin-bottom:9px;} .uf-sch-exam-content .sub{color:var(--uf-gold);font-size:18px;line-height:26px;margin-bottom:18px;} .uf-sch-exam-list{display:flex;flex-direction:column;gap:13px;margin-bottom:26px;direction:rtl;} .uf-sch-exam-list li{display:flex;align-items:center;gap:9px;justify-content:flex-start;color:#d1d5db;font-size:18px;line-height:26px;} .uf-sch-exam-list li i{color:var(--uf-gold);font-size:22px;flex:none;} .uf-sch-exam-btn{display:inline-flex;align-items:center;gap:9px;background:var(--uf-gold);color:#0b1d3a; font-weight:700;font-size:15px;border-radius:13px;padding:13px 26px;cursor:pointer;} .uf-sch-exam-btn i{font-size:13px;} /* future fields (مجالات المستقبل) */ .uf-sch-fields{background:#f7f8fa;padding:64px 0;} .uf-sch-fields-in{max-width:1440px;margin:0 auto;padding:0 64px;} .uf-sch-fields-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:40px;direction:ltr;} .uf-sch-fields-head h2{font-size:30px;line-height:36px;font-weight:700;color:#0f1e3d;} .uf-sch-fields-arrows{display:flex;gap:11px;} .uf-sch-arrowbtn{width:45px;height:45px;border-radius:50%;background:#192b4a;border:1px solid #d1d5db; display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;cursor:pointer;} .uf-sch-fields-row{display:flex;gap:16px;} .uf-sch-field{flex:1;height:279px;border-radius:16px;overflow:hidden;position:relative;display:block; text-decoration:none;background:linear-gradient(#192b4a,#0b1c3a);} .uf-sch-field>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .uf-sch-field::after{content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(13,30,60,.86) 14%,rgba(13,30,60,.63) 43%,rgba(13,30,60,0) 59%);} .uf-sch-field-cap{position:absolute;bottom:0;left:0;width:100%;padding:20px;text-align:center;z-index:2;} .uf-sch-field-cap h3{color:var(--uf-gold);font-size:16px;line-height:24px;font-weight:700;margin-bottom:8px;} .uf-sch-field-cap p{color:rgba(255,255,255,.9);font-size:14px;line-height:22.75px;} /* success stories */ .uf-sch-stories{background:#f7f8fa;padding:64px 0;} .uf-sch-stories h2{text-align:center;font-size:30px;line-height:36px;font-weight:700;color:#0f1e3d;margin-bottom:40px;} .uf-sch-stories-row{display:flex;gap:16px;direction:ltr;justify-content:center;max-width:1440px;margin:0 auto;padding:0 64px;} .uf-sch-story{width:426px;background:#fff;border:1px solid var(--uf-border);border-radius:16px;padding:21px; direction:rtl;text-align:right;box-shadow:0 1px 1px rgba(0,0,0,.05);} .uf-sch-story-head{display:flex;align-items:center;gap:12px;justify-content:flex-start;margin-bottom:12px;} .uf-sch-story-head img{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none;} .uf-sch-story-head .nm{font-size:17.6px;line-height:25px;font-weight:700;color:#0b1d3a;} .uf-sch-story-head .rl{font-size:15px;line-height:20px;color:var(--uf-gold);} .uf-sch-story p{font-size:17.6px;line-height:28.6px;color:#4b5563;margin-bottom:12px;} .uf-sch-story-stars{display:flex;gap:5px;justify-content:flex-start;} .uf-sch-story-stars i{color:var(--uf-gold);font-size:15px;} /* ============================================================ USER-TYPE HOME — طالب جامعة (university) */ .uf-uni-hero{position:relative;height:698px;background:#0b1d3a;overflow:hidden;} .uf-uni-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;} .uf-uni-h2{text-align:center;font-size:30px;line-height:36px;font-weight:700;color:#0f1e3d;margin-bottom:40px;} /* programs (برامجنا المهنية) */ .uf-uni-progs{background:#f8f8f8;padding:64px 0;} .uf-uni-prog-row{display:flex;gap:16px;direction:ltr;justify-content:center;max-width:1440px;margin:0 auto;padding:0 64px;} .uf-uni-prog{position:relative;width:249.6px;height:380px;border-radius:16px;overflow:hidden;flex:none;} .uf-uni-prog>img{width:100%;height:100%;object-fit:cover;} .uf-uni-prog::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.5) 50%,rgba(0,0,0,0));} .uf-uni-prog-num{position:absolute;left:12px;top:12px;width:32px;height:32px;border-radius:8px; display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;z-index:2;} .uf-uni-prog-body{position:absolute;left:0;bottom:0;width:100%;padding:16px;z-index:2;text-align:right;color:#fff;} .uf-uni-prog-body h3{font-size:16px;line-height:20px;font-weight:700;margin-bottom:4px;} .uf-uni-prog-body .d{font-size:12px;line-height:16px;color:rgba(255,255,255,.7);margin-bottom:12px;} .uf-uni-prog-btn{display:flex;align-items:center;justify-content:center;gap:4px;height:32px;border:1px solid #fff; border-radius:8px;color:#fff;font-size:12px;font-weight:700;cursor:pointer;} .uf-uni-prog-btn i{font-size:10px;} /* free courses (دورات مجانيه) */ .uf-uni-free-sec{background:#fff;padding:64px 0;} .uf-uni-free-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;max-width:1440px;margin:0 auto;padding:0 64px;} .uf-uni-free{width:247px;background:#fff;border:1px solid var(--uf-border);border-radius:19px;overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.05);flex:none;} .uf-uni-free-img{position:relative;height:154px;} .uf-uni-free-img>img{width:100%;height:100%;object-fit:cover;} .uf-uni-free-badge{position:absolute;left:10px;top:10px;background:var(--uf-gold);color:#fff;font-size:12px; font-weight:700;border-radius:7px;padding:5px 10px;} .uf-uni-free-body{padding:19px;text-align:right;} .uf-uni-free-body h3{font-size:16.8px;line-height:24px;font-weight:700;color:#0b1d3a;margin-bottom:5px;} .uf-uni-free-body p{font-size:14.4px;line-height:19.5px;color:#6b7280;margin-bottom:14px;} .uf-uni-free-link{display:flex;align-items:center;gap:5px;justify-content:flex-start;color:var(--uf-gold); font-size:14.4px;font-weight:700;cursor:pointer;} .uf-uni-free-link i{font-size:12px;} /* consult block (sessions + banner) */ .uf-uni-consult{background:#f7f8fa;padding:64px 0;} .uf-uni-consult-card{max-width:1312px;margin:0 auto;background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.05); display:flex;align-items:center;gap:6px;padding:0 24px;overflow:hidden;} .uf-uni-sessions{display:flex;flex-wrap:wrap;gap:16px;justify-content:flex-end;padding:32px;flex:1;} .uf-uni-sess{width:224px;background:#f8f8f8;border-radius:12px;padding:20px;text-align:right; display:flex;flex-direction:column;align-items:flex-end;} .uf-uni-sess-ico{width:40px;height:40px;border-radius:50%;background:rgba(242,164,29,.2);color:var(--uf-gold); display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:12px;} .uf-uni-sess h4{font-size:14px;line-height:20px;color:#0b1d3a;font-weight:700;margin-bottom:4px;} .uf-uni-sess .dur{font-size:12px;line-height:16px;color:var(--uf-gold);font-weight:700;margin-bottom:8px;} .uf-uni-sess p{font-size:12px;line-height:19.5px;color:#6b7280;margin-bottom:12px;width:100%;} .uf-uni-sess-btn{width:100%;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center; gap:4px;font-size:12px;font-weight:700;color:#fff;cursor:pointer;} .uf-uni-sess-btn.gold{background:var(--uf-gold);} .uf-uni-sess-btn.navy{background:#0b1d3a;} .uf-uni-sess-btn i{font-size:10px;} .uf-uni-consult-banner{width:511px;height:288px;border-radius:24px;overflow:hidden;position:relative;flex:none;} .uf-uni-consult-banner img{width:100%;height:100%;object-fit:cover;} .uf-uni-consult-banner::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to top,rgba(11,29,58,.9),rgba(11,29,58,.15));} .uf-uni-consult-cap{position:absolute;right:25px;bottom:40px;width:275px;text-align:right;z-index:2;} .uf-uni-consult-cap h3{color:#fff;font-size:20px;line-height:28px;font-weight:700;margin-bottom:4px;} .uf-uni-consult-cap .by{color:var(--uf-gold);font-size:14px;line-height:20px;font-weight:700;margin-bottom:4px;} .uf-uni-consult-cap p{color:rgba(255,255,255,.7);font-size:12px;line-height:16px;} /* success stories */ .uf-uni-stories{background:#fff;padding:64px 0;} .uf-uni-story-row{display:flex;flex-wrap:wrap;gap:16px;direction:ltr;justify-content:center;max-width:1440px;margin:0 auto;padding:0 64px;} .uf-uni-story{width:316px;background:#fff;border:1px solid var(--uf-border);border-radius:16px;padding:21px; text-align:center;box-shadow:0 1px 1px rgba(0,0,0,.05);display:flex;flex-direction:column;align-items:center;} .uf-uni-story img{width:80px;height:80px;border-radius:50%;object-fit:cover;margin-bottom:16px;} .uf-uni-story p{font-size:14px;line-height:22.75px;color:#4b5563;margin-bottom:16px;} .uf-uni-story .nm{font-size:14px;line-height:20px;font-weight:700;color:#0b1d3a;} .uf-uni-story .tt{font-size:12px;line-height:16px;color:var(--uf-gold);} /* ============================================================ ICONS (exact Figma glyphs as recolourable masks) */ .ufi{display:inline-block;background-color:currentColor;width:1em;height:1em;flex:none;vertical-align:-0.125em; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:contain;mask-size:contain;} /* per-icon mask glyphs (data-URIs) live in icons.css — load it after this file */ /* numbers / latin runs that must stay LTR */ .ltr{direction:ltr;unicode-bidi:embed;display:inline-block;} /* ============================================================ TRAINER / EXPERT homepage (مدرب / خبير) — .uf-tr-* ============================================================ */ .uf-tr-h2{text-align:center;font-size:30px;line-height:36px;font-weight:700;color:#0f1e3d;margin:0 0 40px!important;} .uf-tr-h2.light{color:#fff;} /* ---- Hero ---- */ .uf-tr-hero{position:relative;height:697px;background:var(--uf-navy);overflow:hidden;} .uf-tr-hero-bg{position:absolute;left:0;top:62px;width:100%;height:635px;object-fit:cover;object-position:60% center;} .uf-tr-hero-bg::after{content:"";} .uf-tr-hero-ov{position:absolute;left:0;top:62px;width:100%;height:635px; background:linear-gradient(90deg,rgba(15,30,61,.92) 0%,rgba(15,30,61,.55) 45%,rgba(15,30,61,.05) 75%,transparent 100%);} .uf-tr-hero-inner{position:relative;width:1440px;height:697px;margin:0 auto;} .uf-tr-hero-copy{position:absolute;left:103px;top:231px;width:516px;padding-left:18px;text-align:right;} .uf-tr-hero-lbl{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-bottom:12px; color:var(--uf-gold);font-size:18px;font-weight:700;} .uf-tr-hero-lbl i{font-size:22px;} .uf-tr-hero-copy h1{font-size:48px;line-height:75px;font-weight:700;color:#fff;margin:0 0 24px;} .uf-tr-hero-copy h1 .g{color:var(--uf-gold);} .uf-tr-hero-copy p{font-size:18px;line-height:28px;color:#d8d4d4;max-width:457px;margin:0 0 0 auto;} /* ---- Services (ماذا نبني لك) ---- */ .uf-tr-svcsec{background:#fff;padding:64px 0;} .uf-tr-svc-row{display:flex;gap:20px;direction:ltr;justify-content:center;max-width:1408px;margin:0 auto;padding:0 64px;} .uf-tr-svc{position:relative;width:305px;background:#fff;border:1px solid var(--ac);border-radius:16px;overflow:hidden;flex:none;} .uf-tr-svc-img{position:relative;height:176px;} .uf-tr-svc-img>img{width:100%;height:100%;object-fit:cover;display:block;} .uf-tr-svc-num{position:absolute;left:12px;top:12px;min-width:34px;height:28px;padding:0 6px;border-radius:4px; background:var(--ac);color:#fff;font-size:20px;font-weight:700;line-height:28px;text-align:center;} .uf-tr-svc-ico{position:absolute;left:50%;bottom:-28px;transform:translateX(-50%);width:56px;height:56px;border-radius:50%; background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center;z-index:2; box-shadow:0 11.6px 17.5px -3.5px rgba(0,0,0,.1),0 4.6px 7px -4.6px rgba(0,0,0,.1);} .uf-tr-svc-ico i{font-size:26px;} .uf-tr-svc-body{padding:40px 16px 16px;text-align:right;} .uf-tr-svc-body h3{font-size:18px;font-weight:700;color:#000;margin:0 0 16px;} .uf-tr-svc-body p{font-size:14px;line-height:22.75px;color:#000;margin:0 0 16px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .uf-tr-svc-foot{display:flex;direction:ltr;} .uf-tr-svc-circ{width:32px;height:32px;border-radius:50%;border:1px solid var(--ac);color:var(--ac); display:flex;align-items:center;justify-content:center;font-size:12px;} /* ---- Programs (برامجنا التعليميه) + VIP ---- */ .uf-tr-progsec{background:var(--uf-navy-dark);padding:64px 0;} .uf-tr-prog-row{display:flex;gap:16px;direction:ltr;justify-content:center;max-width:1440px;margin:0 auto;padding:0 80px;} .uf-tr-prog{flex:1 1 0;min-width:0;background:#000;border:1px solid rgba(242,164,29,.3);border-radius:16px;overflow:hidden; display:flex;flex-direction:column;} .uf-tr-prog-img{position:relative;height:176px;} .uf-tr-prog-img>img{width:100%;height:100%;object-fit:cover;display:block;} .uf-tr-prog-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#000,rgba(0,0,0,0) 60%);} .uf-tr-prog-num{position:absolute;left:12px;top:12px;color:var(--uf-gold);font-size:20px;font-weight:700;line-height:28px;z-index:2;} .uf-tr-prog-cap{position:absolute;left:0;bottom:14px;width:100%;text-align:center;z-index:2;padding:0 8px;} .uf-tr-prog-cap h3{color:#fff;font-size:16px;line-height:24px;font-weight:700;margin:0;} .uf-tr-prog-cap span{color:#9ca3af;font-size:12px;line-height:16px;} .uf-tr-prog-body{padding:16px;display:flex;flex-direction:column;gap:16px;flex:1;} .uf-tr-prog-body p{color:#9ca3af;font-size:14px;line-height:20px;text-align:right;margin:0; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px;} .uf-tr-prog-btn{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;height:40px; border:1px solid var(--uf-gold);border-radius:8px;color:var(--uf-gold);font-size:14px;font-weight:700;text-decoration:none;} .uf-tr-prog-btn i{font-size:12px;} /* VIP banner */ .uf-tr-vip-wrap{max-width:1440px;margin:0 auto;padding:48px 80px 0;} .uf-tr-vip{display:flex;direction:ltr;background:#000;border:1px solid rgba(242,164,29,.3);border-radius:24px;overflow:hidden;} .uf-tr-vip-txt{flex:0 0 60%;max-width:60%;padding:48px;text-align:right;} .uf-tr-vip-txt h2{font-size:30px;line-height:36px;font-weight:700;color:#fff;margin:0 0 8px;} .uf-tr-vip-txt h2 .vip{color:var(--uf-gold);} .uf-tr-vip-sub{color:var(--uf-gold);font-size:16px;line-height:24px;margin:0 0 8px;} .uf-tr-vip-desc{color:#9ca3af;font-size:14px;line-height:20px;margin:0 0 24px;} .uf-tr-vip-list{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-wrap:wrap;gap:12px;} .uf-tr-vip-list li{flex:0 0 calc(50% - 6px);display:flex;align-items:center;justify-content:flex-end;gap:8px; color:#d1d5db;font-size:14px;line-height:20px;} .uf-tr-vip-list .c{flex:none;width:24px;height:24px;border-radius:50%;background:rgba(242,164,29,.2);color:var(--uf-gold); display:flex;align-items:center;justify-content:center;font-size:11px;} .uf-tr-vip-btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 32px;border-radius:12px; background:var(--uf-gold);color:#0b1d3a;font-size:14px;font-weight:700;} .uf-tr-vip-btn i{font-size:12px;} .uf-tr-vip-media{flex:1;display:flex;align-items:center;justify-content:center;padding:32px;} .uf-tr-vip-media img{width:340px;height:340px;border-radius:50%;object-fit:cover;} /* ---- Testimonials (قصص نجاحنا الملهمة) ---- */ .uf-tr-stories{background:#f8f9fa;padding:64px 0;} .uf-tr-story-row{display:flex;gap:26px;direction:ltr;justify-content:center;max-width:1440px;margin:0 auto;padding:0 80px;} .uf-tr-story{flex:1 1 0;max-width:300px;background:#fff;border:1px solid #dfdfdf;border-radius:16px;padding:20px;} .uf-tr-story p{font-size:14px;line-height:22.75px;color:#000;margin:0 0 16px;text-align:right; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:45.5px;} .uf-tr-story-foot{display:flex;direction:ltr;align-items:center;justify-content:flex-end;gap:12px;} .uf-tr-story-id{text-align:right;} .uf-tr-story-id .nm{font-size:14px;font-weight:700;color:#000;line-height:20px;} .uf-tr-story-id .rl{font-size:12px;color:#6b7280;line-height:16px;} .uf-tr-story-q{flex:none;width:40px;height:40px;border-radius:50%;background:var(--uf-gold);color:#fff; display:flex;align-items:center;justify-content:center;font-size:16px;} /* ============================================================ INSTITUTIONS / UNIVERSITIES homepage (مؤسسات / جامعات) — .uf-inst-* ============================================================ */ /* hero reuses .uf-tr-hero shell; copy sits further left + wider */ .uf-tr-hero-copy.uf-inst-copy{left:54px;width:545px;} .uf-tr-hero-copy.uf-inst-copy h1{width:545px;} /* ---- Programs (البرامج التدريبه المتخصصه) — image cards w/ colored panel ---- */ .uf-inst-progsec{background:#fff;padding:64px 0;} .uf-inst-prog-row{display:flex;gap:16px;direction:ltr;justify-content:center;max-width:1440px;margin:0 auto;padding:0 64px;} .uf-inst-prog{position:relative;width:316px;height:447px;border-radius:16px;overflow:hidden;flex:none;} .uf-inst-prog>img{width:100%;height:100%;object-fit:cover;display:block;} .uf-inst-prog-panel{position:absolute;left:0;bottom:0;width:100%;min-height:212px;border-radius:16px 16px 0 0; padding:24px 21px;display:flex;flex-direction:column;gap:17px;color:#fff;} .uf-inst-prog-panel.c-teal{background:rgba(0,85,87,.71);} .uf-inst-prog-panel.c-blue1{background:rgba(43,67,140,.82);} .uf-inst-prog-panel.c-blue2{background:rgba(52,95,130,.82);} .uf-inst-prog-panel.c-brown{background:rgba(97,75,32,.82);} .uf-inst-prog-top{display:flex;direction:ltr;align-items:center;justify-content:space-between;gap:12px;} .uf-inst-prog-ico{flex:none;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.2); display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;} .uf-inst-prog-top h3{flex:1;font-size:22px;font-weight:700;color:#fff;margin:0;text-align:right;} .uf-inst-prog-desc{font-size:14px;line-height:19.5px;text-align:right;margin:0;} .uf-inst-prog-btn{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:4px;height:49px; border:1px solid #fff;border-radius:8px;color:#fff;font-size:16px;font-weight:700;} .uf-inst-prog-btn i{font-size:12px;} /* ---- Services (الاستشارات التعليمية) — reuse .uf-tr-svc with modifier ---- */ .uf-tr-svc.uf-inst{border-color:#dedddf;} .uf-tr-svc.uf-inst .uf-tr-svc-body h3{color:var(--ac);} .uf-inst-svc-btn{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;height:49px; border:1px solid #0b1d3a;border-radius:8px;color:#0b1d3a;font-size:16px;font-weight:700;} .uf-inst-svc-btn i{font-size:12px;} /* ---- Stats band ---- */ .uf-inst-statsec{background:#fff;padding:64px 0;} .uf-inst-stats{background:#0d1a2b;border-radius:24px;max-width:1342px;margin:0 auto;padding:32px 64px; display:flex;direction:ltr;flex-wrap:wrap;gap:24px;justify-content:center;} .uf-inst-stat{flex:1 1 0;min-width:200px;display:flex;flex-direction:column;align-items:center;text-align:center;} .uf-inst-stat-ico{width:65px;height:65px;display:flex;align-items:center;justify-content:center; color:var(--uf-gold);font-size:40px;margin-bottom:8px;} .uf-inst-stat-num{color:var(--uf-gold);font-size:24px;font-weight:700;line-height:32px;margin-bottom:4px;} .uf-inst-stat-lbl{color:rgba(255,255,255,.6);font-size:12px;line-height:16px;} /* ---- Testimonials (قصص نجاح ملهمة) ---- */ .uf-inst-stories{background:#f7f8fa;padding:64px 0;} .uf-inst-story-row{display:flex;flex-wrap:wrap;gap:20px;direction:ltr;justify-content:center; max-width:1440px;margin:0 auto;padding:0 64px;} .uf-inst-story{position:relative;width:313px;background:#fff;border:1px solid #f3f4f6;border-radius:16px; padding:25px;box-shadow:0 1px 2px rgba(0,0,0,.05);overflow:hidden;} .uf-inst-story-corner{position:absolute;right:0;top:0;width:80px;height:80px;background:rgba(11,29,58,.05);border-bottom-left-radius:60px;} .uf-inst-story-qq{position:absolute;right:14px;top:14px;color:#0b1d3a;font-size:22px;z-index:2;} .uf-inst-story p{position:relative;font-size:14px;line-height:22.75px;color:#4b5563;text-align:right;margin:16px 0 20px; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:68px;} .uf-inst-story-foot{border-top:1px solid #f3f4f6;padding-top:17px;display:flex;direction:ltr;align-items:center;gap:12px;} .uf-inst-story-id{flex:1;text-align:right;} .uf-inst-story-id .nm{font-size:14px;font-weight:700;color:#0b1d3a;line-height:20px;} .uf-inst-story-id .loc{font-size:12px;color:#9ca3af;line-height:16px;} .uf-inst-story-av{flex:none;width:44px;height:44px;border-radius:12px;background:#0b1d3a;color:var(--uf-gold); display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;} /* ============================================================ ACCOUNT / DASHBOARD page (حسابي) — .uf-acct-* ============================================================ */ .uf-acct-sec{background:#f7f8fa;padding:0 64px 64px;} .uf-acct-bc{max-width:1312px;margin:0 auto;padding:40px 0 32px;text-align:right;font-size:14px;color:#6b7280;} .uf-acct-bc a{color:#6b7280;text-decoration:none;} .uf-acct-bc .sep{margin:0 8px;color:#9ca3af;} .uf-acct-bc .cur{color:var(--uf-gold);font-weight:700;} .uf-acct-row{display:flex;gap:32px;max-width:1312px;margin:0 auto;align-items:flex-start;} .uf-acct-side{width:288px;flex:none;} .uf-acct-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:24px;} /* cards */ .uf-acct-card{background:#fff;border:1px solid #f3f4f6;border-radius:16px;box-shadow:0 1px 1px rgba(0,0,0,.05);padding:33px;} .uf-acct-card h2{font-size:20px;font-weight:700;color:#0b1d3a;text-align:right;margin:0 0 24px;} .uf-acct-sub{font-size:12px;color:#9ca3af;text-align:right;margin:-20px 0 24px;} .uf-acct-grid{display:flex;flex-wrap:wrap;gap:16px;direction:ltr;} .uf-acct-field{width:calc(50% - 8px);} .uf-acct-field label{display:block;font-size:12px;color:#6b7280;text-align:right;margin-bottom:4px;} .uf-acct-field input{width:100%;background:#f8f9fa;border:1px solid #e5e7eb;border-radius:12px;height:42px; padding:0 17px;font-size:14px;font-weight:700;color:#0b1d3a;text-align:right;font-family:inherit;} .uf-acct-field input.ltr{text-align:left;direction:ltr;} .uf-acct-field input::placeholder{color:#9ca3af;font-weight:500;} .uf-acct-actions{text-align:right;margin-top:24px;} .uf-acct-btn-gold{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 24px; border-radius:12px;background:var(--uf-gold);color:#0b1d3a;font-size:14px;font-weight:700;border:none;cursor:pointer;} .uf-acct-btn-outline{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 26px; border-radius:12px;border:2px solid #0b1d3a;background:none;color:#0b1d3a;font-size:14px;font-weight:700;cursor:pointer;} /* sidebar */ .uf-acct-side-card{background:#fff;border:1px solid #f3f4f6;border-radius:16px;box-shadow:0 1px 1px rgba(0,0,0,.05); padding:25px;position:sticky;top:88px;} .uf-acct-ava{width:96px;height:96px;border-radius:50%;border:4px solid rgba(242,164,29,.2);object-fit:cover;display:block;margin:0 auto 16px;} .uf-acct-name{font-size:18px;font-weight:700;color:#0b1d3a;text-align:center;margin-bottom:4px;} .uf-acct-email{font-size:12px;color:#9ca3af;text-align:center;margin-bottom:16px;} .uf-acct-tabs{display:flex;flex-direction:column;gap:4px;} .uf-acct-tab{display:flex;align-items:center;justify-content:flex-start;gap:12px;height:52px;padding:0 16px; border-radius:12px;color:#4b5563;font-size:14px;font-weight:700;border:none;background:none;width:100%;cursor:pointer;} .uf-acct-tab i{font-size:18px;} .uf-acct-tab.active{background:var(--uf-gold);color:#0b1d3a;} .uf-acct-logout{border-top:1px solid #f3f4f6;margin-top:24px;padding-top:17px;} .uf-acct-logout button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:40px; border:none;background:none;color:#ef4444;font-size:14px;font-weight:700;cursor:pointer;} .uf-acct-logout i{font-size:14px;} /* ===================================================================== HOME (index.html) — FIXED 1440 layout, pixel-matched to Figma. Section backgrounds are full-bleed (100% width) while the content is 1440/1344-centered (the base rules already do this), so at 1440 it is identical to the Figma frame and on wider screens the colored bands still fill the viewport instead of looking "stuck in the middle". The desktop min-width:1440 floor (from the base body rule) is kept so the page always reads exactly like the 1440 design. The NAV overlaps the hero — in Figma NAV-2 and the hero SECTION-2 are both at y=0, the nav sitting over the hero's top navy strip. ===================================================================== */ .home .uf-nav{position:absolute;top:0;left:0;right:0;z-index:50;} /* hamburger button — hidden on desktop, shown on tablet/phone */ .uf-nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px; padding:9px;background:rgba(240,249,255,.12);border:0;border-radius:10px;cursor:pointer;} .uf-nav-burger span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:.2s;} .uf-nav.open .uf-nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);} .uf-nav.open .uf-nav-burger span:nth-child(2){opacity:0;} .uf-nav.open .uf-nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* ===================================================================== RESPONSIVE — Home (index.html). Desktop ≥1440 stays Figma-exact (above). Below 1440 the fixed/absolute layout reflows fluidly; tablet & phone stack; nav collapses to a hamburger. All scoped to `.home` so the other pages are untouched. ===================================================================== */ /* ---- Fluid desktop (≤1439): unfix widths, reflow absolute hero/advisor ---- */ @media (max-width:1439.98px){ body.uf-page.home{min-width:0;} .home .uf-nav-in{max-width:100%;padding:0 clamp(20px,3.5vw,48px);} .home .uf-wrap{width:auto;max-width:1344px;padding:0 clamp(20px,3.5vw,48px);} /* HERO: absolute → fluid flex (instructor right, copy left) */ .home .uf-hero{height:auto;} .home .uf-hero-bg{inset:0;height:100%;} .home .uf-hero-inner{position:relative;width:100%;max-width:none;height:auto;min-height:560px;margin:0; padding:88px clamp(20px,3.5vw,48px) 0;display:flex;align-items:center;justify-content:space-between; gap:clamp(16px,2vw,40px);} .home .uf-hero-copy{position:relative;left:auto;top:auto;z-index:2;width:auto;max-width:52%;flex:1 1 auto;} .home .uf-hero-instructor{position:relative;left:auto;top:auto;z-index:1;width:auto;max-width:46%;height:auto; align-self:flex-end;margin:0;} /* FREE-TEST: fixed box → fluid */ .home .uf-cta-test-box{width:auto;max-width:1342px;margin:0 clamp(20px,3.5vw,48px);} .home .uf-cta-test-in{width:auto;max-width:856px;margin:0 auto;padding:0 clamp(16px,2vw,40px);} /* ADVISOR: absolute → fluid flex (photo right, copy mid, stats left) */ .home .uf-advisor-in{height:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:24px 40px;direction:rtl;} .home .uf-advisor-photo{position:static;left:auto;top:auto;width:clamp(260px,24vw,333px);height:auto;flex:none;} .home .uf-advisor-copy{position:static;left:auto;top:auto;width:auto;flex:1 1 340px;} .home .uf-advisor-stats{position:static;left:auto;top:auto;flex:none;} /* PARTNERS strip fluid */ .home .uf-partners-strip{width:100%;max-width:1344px;} } /* ---- Small desktop / large tablet (≤1199): roles → 2 columns ---- */ @media (max-width:1199.98px){ .home .uf-roles-grid{flex-wrap:wrap;} .home .uf-role-card{width:calc(50% - 12px);height:auto;} } /* ---- Tablet (≤991): hero stacks, nav → hamburger, strip 2×2 ---- */ @media (max-width:991.98px){ /* nav becomes a solid bar with hamburger; no longer overlaps the hero */ .home .uf-nav{position:static;background:var(--uf-navy-dark);height:auto;} .home .uf-nav-in{flex-wrap:wrap;height:auto;min-height:64px;gap:12px 16px;align-items:center;padding-bottom:8px;} .home .uf-nav-burger{display:flex;} .home .uf-nav-menu,.home .uf-nav-actions{display:none;width:100%;} .home .uf-nav.open .uf-nav-menu{display:flex;flex-direction:column;align-items:flex-start;gap:14px;order:4; width:100%;padding-top:6px;} .home .uf-nav.open .uf-nav-actions{display:flex;justify-content:flex-end;gap:12px;order:5;width:100%;padding-bottom:8px;} /* hero → single column: COPY on top, instructor image below flush to the bottom edge (legs grounded, not floating/cut). */ .home .uf-hero-inner{flex-direction:column;align-items:center;text-align:center; padding:40px clamp(20px,4vw,40px) 0;min-height:0;gap:28px;} .home .uf-hero-copy{order:1;max-width:none;width:100%;text-align:center;} .home .uf-hero-copy h1{font-size:38px;line-height:1.3;} .home .uf-hero-copy p{max-width:620px;margin:0 auto;} .home .uf-hero-instructor{order:2;width:auto;max-width:min(480px,82vw);height:auto; margin:0 auto;align-self:center;display:block;} /* strip → 2×2 */ .home .uf-strip-in{flex-wrap:wrap;gap:24px 0;} .home .uf-strip-cell{width:50%;} .home .uf-strip-cell + .uf-strip-cell::after{display:none;} /* free-test → stacked card (copy on top, features below). The banner image's baked white frame was made transparent, so the box's navy shows with no white edges even when object-fit:cover crops the tall mobile box. */ .home .uf-cta-test-box{display:block;min-height:0;} .home .uf-cta-test-box>img{opacity:.5;} .home .uf-cta-test-in{position:relative;width:100%;max-width:none;margin:0; flex-direction:column;align-items:stretch;gap:28px;padding:32px 24px;} .home .uf-cta-copy,.home .uf-cta-feats{width:100%;} /* CTA button → moved to the very bottom of the card, below the features */ .home .uf-cta-test-in{gap:0;} .home .uf-cta-copy{display:contents;} .home .uf-cta-feats{order:1;} .home .uf-cta-copy .uf-btn-gold{order:2;margin-top:28px;align-self:stretch;justify-content:center;} /* advisor → centered stack */ .home .uf-advisor-in{flex-direction:column;text-align:center;align-items:center;} .home .uf-advisor-copy{flex:none;width:100%;text-align:center;} .home .uf-advisor-copy p{margin-left:auto;margin-right:auto;} .home .uf-advisor-stats{justify-content:center;} /* footer → 2 columns */ .home .uf-footer-cols{flex-wrap:wrap;gap:32px 40px;} .home .uf-footer-col{width:calc(50% - 20px);} } /* ---- Phone (≤575): everything single column ---- */ @media (max-width:575.98px){ .home .uf-role-card{width:100%;} .home .uf-hero-copy h1{font-size:30px;} .home .uf-hero-copy p{font-size:16px;} .home .uf-strip-cell{width:100%;max-width:240px;margin:0 auto;justify-content:flex-start;} .home .uf-strip-txt{flex:1;} .home .uf-cta-copy h2{font-size:26px;} .home .uf-cta-feat span{font-size:16px;} .home .uf-advisor-stats{flex-wrap:wrap;gap:20px;} .home .uf-advisor-stat{width:calc(50% - 10px);border-left:0!important;} .home .uf-footer-col{width:100%;} } /* ============================================================ AUTH RESPONSIVE (scoped .auth — login/register/verify/forgot/reset; desktop ≥1440 stays Figma-exact above) */ /* ---- Laptop/large-tablet (≤1439.98): drop the absolute 1440 layout → fluid 2-col (brand aside left, form right) ---- */ @media (max-width:1439.98px){ body.uf-page.auth{min-width:0;} .auth .uf-wrap{width:auto;max-width:1344px;padding:0 clamp(20px,5vw,48px);} /* footer: kill the fixed 1344px width that overflowed mobile */ .auth .uf-auth{min-height:0;} .auth .uf-auth-inner{display:flex;flex-direction:row;align-items:center;justify-content:center; gap:clamp(28px,4vw,64px);padding:64px clamp(24px,5vw,56px);min-height:0;direction:ltr;} .auth .uf-auth-illus{display:none;} /* big blob graphic is for the 1440 absolute layout only */ .auth .uf-auth-illus-sm{display:block;width:min(38vw,400px);height:auto;} .auth .uf-auth-aside{display:flex;flex-direction:column;align-items:center;gap:24px;flex:1 1 0;max-width:520px;} .auth .uf-auth-copy{position:static;left:auto;top:auto;width:100%;max-width:520px;text-align:center;} .auth .uf-auth-card{position:static;left:auto;top:auto;transform:none;flex:0 0 auto;width:min(46vw,460px);} } /* ---- Tablet/mobile (≤991.98): stack — brand on top, form below; nav → hamburger ---- */ @media (max-width:991.98px){ .auth .uf-nav{height:auto;} /* let the navy bg grow so the dropdown links aren't white-on-light (invisible) */ .auth .uf-nav-in{flex-wrap:wrap;height:auto;min-height:64px;gap:12px 16px;padding-bottom:8px;} .auth .uf-nav-burger{display:flex;} .auth .uf-nav-menu,.auth .uf-nav-actions{display:none;width:100%;} .auth .uf-nav.open .uf-nav-menu{display:flex;flex-direction:column;align-items:flex-start;gap:14px;order:4;width:100%;padding-top:6px;} .auth .uf-nav.open .uf-nav-actions{display:flex;justify-content:flex-end;gap:12px;order:5;width:100%;padding-bottom:8px;} .auth .uf-auth-inner{flex-direction:column;gap:32px;padding:48px clamp(20px,5vw,40px);} .auth .uf-auth-aside{order:1;width:100%;max-width:560px;} .auth .uf-auth-card{order:2;width:100%;max-width:480px;} .auth .uf-auth-illus-sm{width:min(58vw,340px);} /* footer → 2 columns */ .auth .uf-footer-cols{flex-wrap:wrap;gap:32px 40px;} .auth .uf-footer-col{width:calc(50% - 20px);} } /* ---- Phone (≤575.98): compact ---- */ @media (max-width:575.98px){ .auth .uf-auth-inner{padding:36px 18px;gap:22px;} .auth .uf-auth-illus-sm{width:min(64vw,240px);} .auth .uf-auth-copy h2{font-size:23px;line-height:1.3;margin-bottom:10px;} .auth .uf-auth-copy p{font-size:15px;line-height:25px;} .auth .uf-auth-card{max-width:none;} .auth .uf-auth-card h2{font-size:21px;} .auth .uf-auth-sub{font-size:16px;} .auth .uf-field input{height:54px;} .auth .uf-footer-col{width:100%;} /* footer → single column on phones */ } /* ============================================================ TEST PAGES RESPONSIVE (shared .testpg = intro / questions / result; desktop ≥1440 stays Figma-exact above) */ /* ---- ≤1439.98: lift the 1440 floor + make footer/header/content fluid ---- */ @media (max-width:1439.98px){ body.uf-page.testpg{min-width:0;} .testpg .uf-wrap{width:auto;max-width:1344px;padding:0 clamp(20px,5vw,48px);} /* footer: kill fixed 1344px width */ .testpg .uf-pagehead.deco{background-size:auto 168px;} /* decals hug the edges as it narrows */ .testpg .uf-test-card{width:auto;} /* intro card was fixed 672px → fluid */ .testpg .uf-quiz-card{width:auto;max-width:768px;} /* questions card fixed 768px → fluid */ .testpg .uf-result-inner{width:auto;max-width:768px;} /* result column fixed 768px → fluid */ } /* ---- ≤991.98: nav → hamburger; footer → 2 cols ---- */ @media (max-width:991.98px){ .testpg .uf-nav{height:auto;} .testpg .uf-nav-in{flex-wrap:wrap;height:auto;min-height:64px;gap:12px 16px;padding-bottom:8px;} .testpg .uf-nav-burger{display:flex;} .testpg .uf-nav-menu,.testpg .uf-nav-actions{display:none;width:100%;} .testpg .uf-nav.open .uf-nav-menu{display:flex;flex-direction:column;align-items:flex-start;gap:14px;order:4;width:100%;padding-top:6px;} .testpg .uf-nav.open .uf-nav-actions{display:flex;justify-content:flex-end;gap:12px;order:5;width:100%;padding-bottom:8px;} .testpg .uf-footer-cols{flex-wrap:wrap;gap:32px 40px;} .testpg .uf-footer-col{width:calc(50% - 20px);} } /* ---- ≤767.98: result course cards stack ---- */ @media (max-width:767.98px){ .testpg .uf-result-courses{flex-direction:column;} } /* ---- ≤575.98: compact + single-column grids/actions ---- */ @media (max-width:575.98px){ .testpg .uf-pagehead{padding:36px 18px;} .testpg .uf-pagehead h1{font-size:23px;line-height:30px;} .testpg .uf-pagehead-back{position:static;display:inline-flex;margin-bottom:12px;} /* result back-link: out of the corner so it can't overlap the title */ .testpg .uf-footer-col{width:100%;} /* intro */ .testpg .uf-test-intro{padding:32px 16px;} .testpg .uf-test-card{padding:24px 16px;} .testpg .uf-test-card .brain{width:150px;height:150px;} /* questions */ .testpg .uf-quiz{padding:32px 16px;} .testpg .uf-quiz-q{font-size:19px;line-height:28px;} /* result */ .testpg .uf-result{padding:32px 16px 48px;} .testpg .uf-rc{padding:20px 16px;} .testpg .uf-rc-grid{grid-template-columns:1fr;} .testpg .uf-result-actions{flex-direction:column;align-items:center;gap:12px;} .testpg .uf-result-actions .right{justify-content:center;} .testpg .uf-btn-gold-cta{font-size:14px;padding:12px 24px;border-radius:10px;} } /* ============================================================ CONTACT RESPONSIVE (contact.html `.contactpg`; desktop ≥1440 stays Figma-exact above) */ /* ---- ≤1439: lift the 1440 floor; nav/footer/section fluid ---- */ @media (max-width:1439.98px){ body.uf-page.contactpg{min-width:0;} .contactpg .uf-nav-in{max-width:100%;padding:0 clamp(20px,3.5vw,48px);} .contactpg .uf-wrap{width:auto;max-width:1344px;padding:0 clamp(20px,3.5vw,48px);} .contactpg .uf-pagehead.photo{padding:96px clamp(20px,5vw,64px) 56px;} .contactpg .uf-contact{padding:48px clamp(20px,4vw,48px);} } /* ---- ≤991: nav → hamburger; form + aside stack; footer → 2 cols ---- */ @media (max-width:991.98px){ .contactpg .uf-nav{height:auto;} .contactpg .uf-nav-in{flex-wrap:wrap;height:auto;min-height:64px;gap:12px 16px;padding-bottom:8px;} .contactpg .uf-nav-burger{display:flex;} .contactpg .uf-nav-menu,.contactpg .uf-nav-actions{display:none;width:100%;} .contactpg .uf-nav.open .uf-nav-menu{display:flex;flex-direction:column;align-items:flex-start;gap:14px;order:4;width:100%;padding-top:6px;} .contactpg .uf-nav.open .uf-nav-actions{display:flex;justify-content:flex-end;gap:12px;order:5;width:100%;padding-bottom:8px;} .contactpg .uf-contact-inner{flex-direction:column;} .contactpg .uf-contact-form{width:100%;} .contactpg .uf-contact-aside{width:100%;} .contactpg .uf-pagehead.photo h1{font-size:38px;line-height:44px;} .contactpg .uf-footer-cols{flex-wrap:wrap;gap:32px 40px;} .contactpg .uf-footer-col{width:calc(50% - 20px);} } /* ---- ≤575: phone — single-column form rows, compact head, footer 1 col ---- */ @media (max-width:575.98px){ .contactpg .uf-pagehead.photo{padding:72px 18px 40px;min-height:0;} .contactpg .uf-pagehead.photo h1{font-size:30px;line-height:38px;} .contactpg .uf-pagehead.photo p{font-size:14px;line-height:22px;} .contactpg .uf-contact{padding:36px 16px;} .contactpg .uf-contact-form{padding:24px 16px;} .contactpg .uf-form-row{flex-direction:column;gap:0;} .contactpg .uf-btn-send{width:100%;justify-content:center;} .contactpg .uf-footer-col{width:100%;} } /* ============================================================ ABOUT RESPONSIVE (about.html `.aboutpg`; desktop ≥1440 stays Figma-exact above) */ /* ---- ≤1439: lift the 1440 floor; section gutters fluid ---- */ @media (max-width:1439.98px){ body.uf-page.aboutpg{min-width:0;} .aboutpg .uf-nav-in{max-width:100%;padding:0 clamp(20px,3.5vw,48px);} .aboutpg .uf-wrap{width:auto;max-width:1344px;padding:0 clamp(20px,3.5vw,48px);} .aboutpg .uf-about-hero-in{padding:96px clamp(20px,5vw,64px) 56px;} .aboutpg .uf-about-sec, .aboutpg .uf-about-intro-in, .aboutpg .uf-about-stats-in, .aboutpg .uf-about-cta-wrap{padding-left:clamp(20px,5vw,64px);padding-right:clamp(20px,5vw,64px);} .aboutpg .uf-about-tl{padding-left:clamp(0px,2vw,24px);padding-right:clamp(0px,2vw,24px);} } /* ---- ≤991: nav → hamburger; hero/intro/cards/timeline reflow; footer → 2 cols ---- */ @media (max-width:991.98px){ .aboutpg .uf-nav{height:auto;} .aboutpg .uf-nav-in{flex-wrap:wrap;height:auto;min-height:64px;gap:12px 16px;padding-bottom:8px;} .aboutpg .uf-nav-burger{display:flex;} .aboutpg .uf-nav-menu,.aboutpg .uf-nav-actions{display:none;width:100%;} .aboutpg .uf-nav.open .uf-nav-menu{display:flex;flex-direction:column;align-items:flex-start;gap:14px;order:4;width:100%;padding-top:6px;} .aboutpg .uf-nav.open .uf-nav-actions{display:flex;justify-content:flex-end;gap:12px;order:5;width:100%;padding-bottom:8px;} /* hero */ .aboutpg .uf-about-hero{height:auto;} .aboutpg .uf-about-hero-in{padding:80px clamp(20px,5vw,48px) 48px;} .aboutpg .uf-about-hero-box{width:100%;} .aboutpg .uf-about-hero-box h1{font-size:34px;} /* intro → stack, image below text */ .aboutpg .uf-about-intro-in{flex-direction:column;gap:32px;align-items:stretch;} .aboutpg .uf-about-intro-img{width:100%;max-width:560px;height:auto;align-self:center;} /* VRM 3-cards → stacked centered */ .aboutpg .uf-about-vrm-grid{flex-wrap:wrap;} .aboutpg .uf-about-vrm-card{width:100%;max-width:520px;} /* values 3 → 2 cols */ .aboutpg .uf-about-vgrid{grid-template-columns:repeat(2,1fr);} /* stats 4 → 2×2 */ .aboutpg .uf-about-stats-in{flex-wrap:wrap;gap:32px 24px;} .aboutpg .uf-about-stat{width:calc(50% - 12px);} /* timeline → single-sided (line on the right, all cards left of it) */ .aboutpg .uf-about-tl::before{left:auto;right:19px;} .aboutpg .uf-about-tl-sp{display:none;} .aboutpg .uf-about-tl-row{gap:16px;direction:rtl;align-items:flex-start;} .aboutpg .uf-about-tl-row + .uf-about-tl-row{margin-top:20px;} .aboutpg .uf-about-tl-card{width:auto;flex:1 1 0;min-width:0;} .aboutpg .uf-about-tl-row.r .uf-about-tl-card, .aboutpg .uf-about-tl-row.l .uf-about-tl-card{text-align:right;} /* cta padding */ .aboutpg .uf-about-cta-card{padding:48px clamp(20px,4vw,48px);} /* footer → 2 cols */ .aboutpg .uf-footer-cols{flex-wrap:wrap;gap:32px 40px;} .aboutpg .uf-footer-col{width:calc(50% - 20px);} } /* ---- ≤575: phone — single column everywhere ---- */ @media (max-width:575.98px){ .aboutpg .uf-about-hero-in{padding:64px 18px 40px;} .aboutpg .uf-about-hero-box h1{font-size:27px;line-height:1.3;} .aboutpg .uf-about-hero-box p{font-size:14px;line-height:24px;} .aboutpg .uf-about-intro, .aboutpg .uf-about-vrm, .aboutpg .uf-about-values, .aboutpg .uf-about-timeline, .aboutpg .uf-about-cta{padding:40px 0;} .aboutpg .uf-about-vgrid{grid-template-columns:1fr;} .aboutpg .uf-about-stat{width:100%;} .aboutpg .uf-about-cta-in h2{font-size:24px;line-height:32px;} .aboutpg .uf-about-cta-btns{flex-direction:column;align-items:stretch;} .aboutpg .uf-about-cta-btns a{justify-content:center;} .aboutpg .uf-footer-col{width:100%;} } /* ============================================================ FOUNDER RESPONSIVE (founder.html `.founderpg`; desktop ≥1440 stays Figma-exact above) */ /* ---- ≤1439: lift the 1440 floor; section gutters fluid; hero inner fluid ---- */ @media (max-width:1439.98px){ body.uf-page.founderpg{min-width:0;} .founderpg .uf-nav-in{max-width:100%;padding:0 clamp(20px,3.5vw,48px);} .founderpg .uf-wrap{width:auto;max-width:1344px;padding:0 clamp(20px,3.5vw,48px);} .founderpg .uf-mk-intro-in, .founderpg .uf-about-sec, .founderpg .uf-about-stats-in, .founderpg .uf-about-cta-wrap{padding-left:clamp(20px,5vw,64px);padding-right:clamp(20px,5vw,64px);} /* hero: absolute 1440 stage → fluid. Cutout photo hugs the right, copy stays left */ .founderpg .uf-mk-hero-inner{width:100%;} .founderpg .uf-mk-hero-photo{left:auto;right:0;width:min(58%,791px);} .founderpg .uf-mk-hero-copy{left:clamp(20px,5vw,52px);} } /* ---- ≤991: nav → hamburger; hero stacks (photo hidden); grids reflow; footer 2 cols ---- */ @media (max-width:991.98px){ .founderpg .uf-nav{height:auto;} .founderpg .uf-nav-in{flex-wrap:wrap;height:auto;min-height:64px;gap:12px 16px;padding-bottom:8px;} .founderpg .uf-nav-burger{display:flex;} .founderpg .uf-nav-menu,.founderpg .uf-nav-actions{display:none;width:100%;} .founderpg .uf-nav.open .uf-nav-menu{display:flex;flex-direction:column;align-items:flex-start;gap:14px;order:4;width:100%;padding-top:6px;} .founderpg .uf-nav.open .uf-nav-actions{display:flex;justify-content:flex-end;gap:12px;order:5;width:100%;padding-bottom:8px;} /* hero → static stacked text over the bg; cutout photo hidden */ .founderpg .uf-mk-hero{height:auto;} .founderpg .uf-mk-hero-inner{position:relative;height:auto;} .founderpg .uf-mk-hero-photo{display:none;} .founderpg .uf-mk-hero-copy{position:static;width:100%;padding:80px clamp(20px,5vw,48px) 56px;} .founderpg .uf-mk-hero-copy h1{font-size:44px;line-height:1.1;} .founderpg .uf-mk-lead{max-width:none;} .founderpg .uf-mk-hstats{justify-content:flex-start;} /* intro → stack; image + floating quote go inline */ .founderpg .uf-mk-intro-in{flex-direction:column;gap:32px;align-items:stretch;} .founderpg .uf-mk-intro-imgwrap{width:100%;max-width:560px;align-self:center;} .founderpg .uf-mk-intro-img{width:100%;} .founderpg .uf-mk-quote-float{position:static;width:auto;max-width:none;} /* philosophy 4 → 2 cols */ .founderpg .uf-mk-phil-grid{flex-wrap:wrap;} .founderpg .uf-mk-phil-card{width:calc(50% - 10px);} /* stats 4 → 2×2 */ .founderpg .uf-about-stats-in{flex-wrap:wrap;gap:32px 24px;} .founderpg .uf-about-stat{width:calc(50% - 12px);} /* timeline → single-sided (spine on the right) */ .founderpg .uf-mk-tl::before{left:auto;right:5px;} .founderpg .uf-mk-tl-row{grid-template-columns:1fr;column-gap:0;padding-right:32px;} .founderpg .uf-mk-tl-row.r .uf-mk-tl-card, .founderpg .uf-mk-tl-row.l .uf-mk-tl-card{grid-column:1;} .founderpg .uf-mk-tl-dot{left:auto;right:0;transform:none;} /* cta padding + quote */ .founderpg .uf-about-cta-card{padding:48px clamp(20px,4vw,48px);} .founderpg .uf-mk-quote-txt{font-size:26px;line-height:34px;} /* footer → 2 cols */ .founderpg .uf-footer-cols{flex-wrap:wrap;gap:32px 40px;} .founderpg .uf-footer-col{width:calc(50% - 20px);} } /* ---- ≤575: phone — single column ---- */ @media (max-width:575.98px){ .founderpg .uf-mk-hero-copy{padding:64px 18px 40px;} .founderpg .uf-mk-hero-copy h1{font-size:34px;} .founderpg .uf-mk-role{font-size:17px;} .founderpg .uf-mk-intro, .founderpg .uf-mk-phil, .founderpg .uf-mk-tl-sec, .founderpg .uf-mk-quotesec, .founderpg .uf-mk-cta{padding:40px 0;} .founderpg .uf-mk-phil-card{width:100%;} .founderpg .uf-about-stat{width:100%;} .founderpg .uf-mk-quote-txt{font-size:22px;line-height:30px;} .founderpg .uf-about-cta-in h2{font-size:24px;line-height:32px;} .founderpg .uf-about-cta-btns{flex-direction:column;align-items:stretch;} .founderpg .uf-about-cta-btns a{justify-content:center;} .founderpg .uf-footer-col{width:100%;} } /* ============================================================ SCHOOL HOME (school-home.html `.school`) — Figma-match + responsive */ /* Figma fix: NAV overlaps the hero (NAV-2 & hero SECTION-2 both at y=0; the hero photo starts at y=62 just under the 64px nav). Without this the nav sits in normal flow and the hero's top navy strip shows as a 62px band. */ .school .uf-nav{position:absolute;top:0;left:0;right:0;z-index:50;} /* ---- ≤1439: lift the 1440 floor; make fixed widths fluid ---- */ @media (max-width:1439.98px){ body.uf-page.school{min-width:0;} .school .uf-nav-in{max-width:100%;padding:0 clamp(20px,3.5vw,48px);} .school .uf-wrap{width:auto;max-width:1344px;padding:0 clamp(20px,3.5vw,48px);} /* hero stage → full width; copy hugs the left with a fluid gutter */ .school .uf-sch-hero-inner{width:100%;} .school .uf-sch-hero-copy{left:clamp(20px,5vw,64px);} /* card rows: fluid side gutters + cards shrink to fit, then wrap */ .school .uf-sch-svc-row, .school .uf-sch-stories-row{flex-wrap:wrap;padding-left:clamp(20px,4vw,64px);padding-right:clamp(20px,4vw,64px);} .school .uf-sch-svc{width:auto;flex:1 1 240px;max-width:316px;min-width:230px;} .school .uf-sch-story{width:auto;flex:1 1 300px;max-width:426px;min-width:280px;} .school .uf-sch-fields-in{padding-left:clamp(20px,4vw,64px);padding-right:clamp(20px,4vw,64px);} .school .uf-sch-exam-box{margin-left:clamp(20px,3vw,49px);margin-right:clamp(20px,3vw,49px);} } /* ---- ≤991: nav → hamburger; hero stacks; grids reflow; footer 2 cols ---- */ @media (max-width:991.98px){ /* nav becomes a static solid bar with hamburger (no longer overlaps hero) */ .school .uf-nav{position:static;background:var(--uf-navy-dark);height:auto;} .school .uf-nav-in{flex-wrap:wrap;height:auto;min-height:64px;gap:12px 16px;align-items:center;padding-bottom:8px;} .school .uf-nav-burger{display:flex;} .school .uf-nav-menu,.school .uf-nav-actions{display:none;width:100%;} .school .uf-nav.open .uf-nav-menu{display:flex;flex-direction:column;align-items:flex-start;gap:14px;order:4;width:100%;padding-top:6px;} .school .uf-nav.open .uf-nav-actions{display:flex;justify-content:flex-end;gap:12px;order:5;width:100%;padding-bottom:8px;} /* hero → column: photo on top, copy below on a light card with dark text */ .school .uf-sch-hero{height:auto;display:flex;flex-direction:column;} .school .uf-sch-hero-bg{position:relative;top:0;left:0;width:100%;height:auto;order:1;} .school .uf-sch-hero-inner{position:static;width:100%;height:auto;order:2;background:#f3f1ec;} .school .uf-sch-hero-copy{position:static;left:auto;top:auto;width:auto;padding:32px clamp(18px,5vw,40px);} .school .uf-sch-hero-copy h1{font-size:40px;line-height:1.25;} .school .uf-sch-hero-copy p{max-width:none;} /* services 2-up */ .school .uf-sch-svc{flex:1 1 calc(50% - 8px);max-width:none;min-width:0;} /* fields 5 → wrap (≈3-up) */ .school .uf-sch-fields-row{flex-wrap:wrap;} .school .uf-sch-field{flex:1 1 200px;min-width:180px;} /* exam content fluid */ .school .uf-sch-exam-box{height:auto;min-height:415px;} .school .uf-sch-exam-content{width:auto;max-width:560px;padding:36px clamp(20px,4vw,50px);} .school .uf-sch-exam-ov{width:100%;} /* stories 2-up */ .school .uf-sch-story{flex:1 1 calc(50% - 8px);max-width:none;min-width:0;} /* footer 2 cols */ .school .uf-footer-cols{flex-wrap:wrap;gap:32px 40px;} .school .uf-footer-col{width:calc(50% - 20px);} } /* ---- ≤767: services / stories → single column ---- */ @media (max-width:767.98px){ /* single column — flex-basis:100% (NOT width) so it overrides the ≤991 50% basis */ .school .uf-sch-svc-row, .school .uf-sch-stories-row{flex-direction:column;align-items:center;} .school .uf-sch-svc{flex:0 0 auto;width:100%;max-width:420px;} .school .uf-sch-story{flex:0 0 auto;width:100%;max-width:480px;} .school .uf-sch-fields-head{margin-bottom:28px;} } /* ---- ≤575: phone tightening ---- */ @media (max-width:575.98px){ .school .uf-sch-svcsec, .school .uf-sch-exam, .school .uf-sch-fields, .school .uf-sch-stories{padding:40px 0;} .school .uf-sch-hero-copy h1{font-size:32px;} .school .uf-sch-h2{font-size:24px;line-height:32px;} .school .uf-sch-fields-head h2, .school .uf-sch-stories h2, .school .uf-sch-exam-content h2{font-size:24px;line-height:1.3;} .school .uf-sch-field{flex:1 1 100%;min-width:0;height:220px;} .school .uf-footer-col{width:100%;} } /* ============================================================ UNIVERSITY-SELECT (university-select.html `.unisel` — Frame -75 "اختيار الجامعة", logged-in طالب ثانوي). Desktop @1440 Figma-exact. */ /* nav overlaps the photo hero (both at y=0 in Figma; nav solid navy covers the photo's top 64px) */ .unisel .uf-nav{position:absolute;top:0;left:0;right:0;z-index:50;} /* hero — reuse `.uf-pagehead.photo`, just resize H1 (36 not 48) + taller stage */ .unisel .uf-pagehead.photo{min-height:400px;padding:112px 64px 64px;} .unisel .uf-pagehead.photo h1{font-size:36px;line-height:40px;margin-bottom:12px;} .unisel .uf-pagehead.photo p{color:#fff;max-width:none;} /* shared section shell */ .uf-us-in{max-width:1440px;margin:0 auto;padding:0 64px;} .uf-us-sec{background:#fff;padding:40px 0;} .uf-us-sec.gray{background:#f7f8fa;} .uf-us-h2{font-size:24px;line-height:32px;font-weight:700;color:#0b1d3a;text-align:right;margin:0 0 24px!important;} /* intro paragraph */ .uf-us-intro{background:#fff;padding:40px 64px;} .uf-us-intro p{max-width:768px;margin:0 auto;text-align:center;font-size:16px;line-height:26px;color:#4b5563;} /* 2-col grid of items (offers / benefits / stories). Figma auto-layout is LTR (x=0 card = LEFT) → grid is `direction:ltr` so DOM order = Figma left→right; cards reset to rtl for their inner icon-right/text-right layout. */ .uf-us-grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:flex-start;direction:ltr;} .uf-us-card,.uf-us-story{direction:rtl;} /* item card (check offer + star benefit) */ .uf-us-card{display:flex;align-items:center;gap:12px;justify-content:flex-start; width:calc(50% - 8px);border-radius:12px;padding:16px 17px;} .uf-us-card .ic{flex:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;} .uf-us-card .ic .ufi{font-size:14px;} .uf-us-card .tx{font-size:14px;line-height:20px;color:#374151;text-align:right;} .uf-us-card.offer{background:#fff;border:1px solid #f3f4f6;} .uf-us-card.offer .ic{background:#1e6b5e;color:#fff;} .uf-us-card.benefit{background:#f8f9fa;} .uf-us-card.benefit .ic{background:rgba(242,164,29,.1);color:var(--uf-gold);} /* testimonial card */ .uf-us-story{width:calc(50% - 8px);background:#fff;border:1px solid #f3f4f6;border-radius:16px; padding:21px;box-shadow:0 1px 1px rgba(0,0,0,.05);} .uf-us-story-head{display:flex;align-items:center;gap:12px;justify-content:flex-start;margin-bottom:12px;} .uf-us-story-head .av{flex:none;width:40px;height:40px;border-radius:50%;background:#1e6b5e;color:#fff; font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;} .uf-us-story-head .nm{font-size:14px;font-weight:700;color:#0b1d3a;} .uf-us-story p{margin:0;font-size:14px;line-height:22.75px;color:#4b5563;text-align:right;} /* booking banner */ .uf-us-booksec{background:#fff;padding:40px 0;} .uf-us-book{background:#0b1d3a;border-radius:16px;padding:40px;display:flex;align-items:center;justify-content:space-between;gap:24px;} .uf-us-book-info{text-align:right;} .uf-us-book-info h2{font-size:24px;line-height:32px;font-weight:700;color:#fff;margin:0 0 8px;} .uf-us-book-info p{font-size:14px;line-height:20px;color:rgba(255,255,255,.6);margin:0 0 8px;} .uf-us-book-info .price{font-size:30px;line-height:36px;font-weight:700;color:var(--uf-gold);} .uf-us-book-btn{display:inline-flex;align-items:center;gap:8px;background:var(--uf-gold);color:#0b1d3a; font-size:14px;font-weight:700;text-decoration:none;border-radius:12px;padding:14px 32px;white-space:nowrap;} .uf-us-book-btn .ufi{font-size:14px;color:#0b1d3a;} /* per-page accent for the check circles + story avatars (teal default = اختيار الجامعة; gold = التخطيط الأكاديمي; navy = استشارات أولياء الأمور) */ .acc-gold .uf-us-card.offer .ic,.acc-gold .uf-us-story-head .av{background:#f2a41d;} .acc-navy .uf-us-card.offer .ic,.acc-navy .uf-us-story-head .av{background:#0b1d3a;} .acc-steel .uf-us-card.offer .ic,.acc-steel .uf-us-story-head .av{background:#4a90a4;} /* ===== Booking-confirmed banner (Frame -47 SECTION-28) ===== */ .uf-conf-banner{background:#f0fdf4;border-bottom:1px solid #dcfce7;padding:24px 64px 25px;} .uf-conf-banner-in{max-width:1312px;margin:0 auto;} .uf-conf-banner-row{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin-bottom:4px;} .uf-conf-banner-row .ic{flex:none;width:32px;height:32px;border-radius:50%;background:#22c55e;display:flex;align-items:center;justify-content:center;} .uf-conf-banner-row .ic .ufi{font-size:14px;color:#fff;} .uf-conf-banner-row .t{font-size:16px;line-height:24px;font-weight:700;color:#166534;} .uf-conf-banner p{margin:0;padding-right:44px;font-size:14px;line-height:20px;color:#16a34a;text-align:right;} /* ===== "استشارتك محجوزة" confirmation card (Frame -47 SECTION-155) ===== */ .uf-conf-sec{background:#fff;padding:40px 0;} .uf-conf-card{max-width:1312px;margin:0 auto;border-radius:16px;padding:40px; background:linear-gradient(160deg,#0b1d3a 0%,#1a3050 100%);} .uf-conf-head{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin-bottom:24px;} .uf-conf-head .ic{flex:none;width:48px;height:48px;border-radius:50%;background:#22c55e;display:flex;align-items:center;justify-content:center;} .uf-conf-head .ic .ufi{font-size:20px;color:#fff;} .uf-conf-head .tx{text-align:right;} .uf-conf-head h2{margin:0;font-size:24px;line-height:32px;font-weight:700;color:#fff;} .uf-conf-head .ref{font-size:14px;line-height:20px;color:rgba(255,255,255,.5);} .uf-conf-cells{display:flex;flex-wrap:wrap;gap:16px;direction:ltr;margin-bottom:24px;} .uf-conf-cell{width:calc(33.333% - 11px);direction:rtl;background:rgba(255,255,255,.1);border-radius:12px;padding:20px;} .uf-conf-cell-top{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-bottom:8px;color:rgba(255,255,255,.6);} .uf-conf-cell-top .lbl{font-size:12px;line-height:16px;} .uf-conf-cell-top svg{flex:none;width:16px;height:16px;} .uf-conf-cell .val{font-size:14px;line-height:20px;font-weight:700;color:#fff;text-align:right;} .uf-conf-link{background:rgba(255,255,255,.1);border-radius:12px;padding:24px;} .uf-conf-link-head{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-bottom:12px;color:#fff;} .uf-conf-link-head .t{font-size:16px;line-height:24px;font-weight:700;} .uf-conf-link-head svg{flex:none;width:18px;height:18px;} .uf-conf-field{display:flex;align-items:center;direction:ltr;gap:12px;background:rgba(255,255,255,.1);border-radius:8px;padding:12px;} .uf-conf-field .copy{flex:none;width:36px;height:36px;border:none;cursor:pointer;background:var(--uf-gold);border-radius:8px;display:flex;align-items:center;justify-content:center;} .uf-conf-field .copy svg{width:15px;height:15px;} .uf-conf-field .url{flex:1;min-width:0;font-size:14px;line-height:20px;color:rgba(255,255,255,.8);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .uf-conf-field .g{flex:none;width:20px;height:20px;} .uf-conf-note{margin:12px 0 0;font-size:12px;line-height:16px;color:rgba(255,255,255,.4);text-align:right;} /* ===== Field / major detail page (Frame -69). Reuses .uf-us-in / .uf-us-h2 / .uf-us-sec ===== */ .uf-fld-overview{background:#fff;padding:40px 0;} .uf-fld-overview .uf-us-h2{margin-bottom:16px;} .uf-fld-overview p{max-width:768px;margin:0 0 0 auto;text-align:right;font-size:15px;line-height:26px;color:#4b5563;} /* 3-col icon-card grid (التخصصات الفرعية / أفضل الجامعات) — direction:ltr so DOM order = Figma left→right */ .uf-fld-grid{display:flex;flex-wrap:wrap;gap:12px;direction:ltr;} .uf-fld-card{width:calc(33.333% - 8px);direction:rtl;display:flex;align-items:center;justify-content:flex-start; gap:12px;height:66px;padding:17px;background:#fff;border:1px solid #f3f4f6;border-radius:12px;} .uf-fld-card .ic{flex:none;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;} .uf-fld-card .ic svg{width:17px;height:17px;} .uf-fld-card.tag .ic{background:rgba(242,164,29,.1);color:var(--uf-gold);} .uf-fld-card.uni .ic{background:#0b1d3a;color:#fff;} .uf-fld-card .tx{font-size:14px;line-height:20px;color:#374151;text-align:right;} /* الوظائف المتاحة + المهارات المطلوبة — two columns */ .uf-fld-cols{display:flex;flex-wrap:wrap;gap:40px;direction:ltr;} .uf-fld-col{flex:1 1 calc(50% - 20px);min-width:0;direction:rtl;} .uf-fld-col h3{margin:0 0 16px;font-size:24px;line-height:32px;font-weight:700;color:#0b1d3a;text-align:right;} .uf-fld-row{display:flex;align-items:center;justify-content:flex-start;gap:12px;height:48px;padding:12px; background:#f8f9fa;border-radius:8px;margin-bottom:8px;} .uf-fld-row svg{flex:none;width:17px;height:17px;color:var(--uf-gold);} .uf-fld-row .tx{font-size:14px;line-height:20px;color:#374151;text-align:right;} /* مستقبل المجال navy card */ .uf-fld-future-sec{background:#fff;padding:40px 0;} .uf-fld-future{max-width:1312px;margin:0 auto;background:#0b1d3a;border-radius:16px;padding:32px;} .uf-fld-future h2{margin:0 0 16px;font-size:24px;line-height:32px;font-weight:700;color:#fff;text-align:right;} .uf-fld-future p{margin:0;font-size:16px;line-height:26px;color:rgba(255,255,255,.7);text-align:right;} /* back button */ .uf-fld-back-sec{background:#fff;padding:8px 0 48px;text-align:center;} .uf-fld-back{display:inline-flex;align-items:center;gap:8px;background:var(--uf-gold);color:#0b1d3a; text-decoration:none;font-size:14px;font-weight:700;border-radius:8px;padding:12px 24px;} .uf-fld-back svg{width:15px;height:15px;} /* ===== Program / course detail page (Frame -24). `pdpg` body class = nav overlaps hero ===== */ .pdpg .uf-nav{position:absolute;top:0;left:0;right:0;z-index:50;} .uf-pd-hero{position:relative;background:#0b1d3a;overflow:hidden;padding:112px 80px 48px;min-height:420px;} .uf-pd-hero .ph-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;} .uf-pd-hero::after{content:"";position:absolute;inset:0;background:rgba(2,11,26,.5);z-index:1;} .uf-pd-hero-in{position:relative;z-index:2;max-width:672px;margin-left:auto;text-align:right;} .uf-pd-crumb{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-bottom:12px;font-size:14px;line-height:20px;} .uf-pd-crumb a{color:#9ca3af;text-decoration:none;} .uf-pd-crumb span{color:var(--uf-gold);} .uf-pd-crumb .ufi{font-size:11px;color:#9ca3af;} .uf-pd-hero h1{font-size:36px;line-height:40px;font-weight:700;color:#fff;margin:0 0 8px;} .uf-pd-cat{font-size:16px;line-height:24px;color:var(--uf-gold);margin:0 0 12px;} .uf-pd-sub{font-size:14px;line-height:20px;color:#fff;margin:0 0 24px;} .uf-pd-pills{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;} .uf-pd-pill{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border-radius:12px;padding:8px 16px;height:40px;color:#fff;font-size:14px;font-weight:700;white-space:nowrap;} .uf-pd-pill svg{width:16px;height:16px;flex:none;} /* body 2-col: sidebar (left) + main (right) */ .uf-pd-sec{background:#fff;padding:40px 0;} .uf-pd-body{max-width:1440px;margin:0 auto;padding:0 80px;display:flex;gap:32px;direction:ltr;align-items:flex-start;} .uf-pd-side{flex:0 0 405px;direction:rtl;} .uf-pd-card{position:sticky;top:88px;background:#fff;border:1px solid #eae8e8;border-radius:16px;padding:25px;} .uf-pd-price{font-size:30px;line-height:36px;font-weight:700;color:#000;text-align:center;} .uf-pd-price-sub{font-size:12px;line-height:16px;color:#6b7280;text-align:center;margin:4px 0 20px;} .uf-pd-feat{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-bottom:12px;} .uf-pd-feat svg{width:15px;height:15px;flex:none;color:var(--uf-gold);} .uf-pd-feat span{font-size:14px;line-height:20px;color:#9ca3af;} .uf-pd-book{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;margin-top:8px; background:var(--uf-gold);color:#000;border:none;cursor:pointer;font-size:14px;font-weight:700;font-family:inherit;border-radius:12px;} .uf-pd-book svg{width:15px;height:15px;} .uf-pd-guarantee{font-size:12px;line-height:16px;color:#6b7280;text-align:center;margin:12px 0 0;} .uf-pd-main{flex:1 1 0;min-width:0;direction:rtl;} .uf-pd-main h2{font-size:24px;line-height:32px;font-weight:700;color:#000;text-align:right;margin:0 0 16px;} .uf-pd-about{font-size:14px;line-height:22.75px;color:#9ca3af;text-align:right;margin:0;} .uf-pd-main h3{font-size:20px;line-height:28px;font-weight:700;color:#000;text-align:right;margin:32px 0 16px;} .uf-pd-learn{display:flex;flex-wrap:wrap;gap:12px;direction:ltr;} .uf-pd-learn-item{width:calc(50% - 6px);direction:rtl;display:flex;align-items:center;justify-content:flex-start; gap:12px;background:#f8f9fa;border-radius:12px;padding:17px;} .uf-pd-learn-item .ic{flex:none;width:28px;height:28px;border-radius:50%;background:var(--uf-gold);display:flex;align-items:center;justify-content:center;} .uf-pd-learn-item .ic svg{width:13px;height:13px;} .uf-pd-learn-item .tx{font-size:14px;line-height:20px;color:#000;text-align:right;} /* program content (lessons list) */ .uf-pd-content{background:#fff;padding:40px 0 8px;} .uf-pd-content-in{max-width:1440px;margin:0 auto;padding:0 80px;} .uf-pd-content h2{font-size:24px;line-height:32px;font-weight:700;color:#0b1d3a;text-align:right;margin:0 0 8px;} .uf-pd-content-sub{font-size:14px;line-height:20px;color:#9ca3af;text-align:right;margin:0 0 24px;} .uf-pd-lesson{display:flex;align-items:center;gap:16px;background:#f8f9fa;border-radius:12px;padding:17px;margin-bottom:12px;} .uf-pd-lesson .tt{flex:1;min-width:0;font-size:14px;line-height:20px;font-weight:700;color:#000;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .uf-pd-lesson .tm{flex:none;font-size:12px;line-height:16px;color:#6b7280;} .uf-pd-lesson .lk{flex:none;width:40px;height:40px;border-radius:8px;background:#e9e9e9;display:flex;align-items:center;justify-content:center;} .uf-pd-lesson .lk svg{width:17px;height:17px;color:#6b7280;} /* final CTA */ .uf-pd-cta-sec{background:#fff;padding:40px 0 48px;} .uf-pd-cta{max-width:1280px;margin:0 auto;background:#0b1d3a;border-radius:16px;padding:41px; display:flex;align-items:center;justify-content:space-between;gap:24px;} .uf-pd-cta-tx{text-align:right;} .uf-pd-cta-tx h2{font-size:24px;line-height:32px;font-weight:700;color:#fff;margin:0 0 8px;} .uf-pd-cta-tx p{font-size:14px;line-height:20px;color:#9ca3af;margin:0;} .uf-pd-cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--uf-gold);color:#000;text-decoration:none; border:none;cursor:pointer;font-size:14px;font-weight:700;font-family:inherit;border-radius:12px;padding:14px 32px;white-space:nowrap;} .uf-pd-cta-btn svg{width:14px;height:14px;} /* ===== Booking modal (Frame -74) ===== */ .uf-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center; padding:24px;background:rgba(2,11,26,.55);} .uf-modal.open{display:flex;} .uf-modal-card{background:#fff;border-radius:16px;padding:32px;width:512px;max-width:100%; max-height:calc(100vh - 48px);overflow-y:auto;box-shadow:0 24px 60px rgba(2,11,26,.3);} .uf-modal-head{display:flex;direction:ltr;align-items:center;justify-content:space-between;margin-bottom:24px;} .uf-modal-head h3{margin:0;font-size:20px;line-height:28px;font-weight:700;color:#0b1d3a;text-align:right;} .uf-modal-x{width:32px;height:32px;border:none;background:transparent;border-radius:50%;cursor:pointer; font-size:24px;line-height:1;color:#0b1d3a;display:flex;align-items:center;justify-content:center;} .uf-modal-x:hover{background:#f3f4f6;} .uf-modal-field{display:flex;flex-direction:column;align-items:stretch;margin-bottom:16px;} .uf-modal-field label{font-size:14px;line-height:20px;font-weight:700;color:#0b1d3a;text-align:right;margin-bottom:4px;} .uf-modal-field input,.uf-modal-field textarea{width:100%;border:1px solid #e5e7eb;border-radius:12px; padding:11px 17px;font-size:14px;color:#0b1d3a;font-family:inherit;text-align:right;background:#fff;outline:none;} .uf-modal-field input::placeholder,.uf-modal-field textarea::placeholder{color:#9ca3af;} .uf-modal-field input[dir="ltr"]{text-align:left;} .uf-modal-field input:focus,.uf-modal-field textarea:focus{border-color:var(--uf-gold);} .uf-modal-field textarea{resize:vertical;min-height:82px;line-height:20px;} .uf-modal-count{font-size:12px;line-height:16px;color:#9ca3af;text-align:left;margin-top:4px;} .uf-modal-price{display:flex;align-items:center;justify-content:space-between;background:#f8f9fa; border-radius:12px;padding:16px;margin-bottom:16px;} .uf-modal-price .lbl{font-size:14px;color:#4b5563;} .uf-modal-price .val{font-size:16px;font-weight:700;color:#0b1d3a;} .uf-modal-submit{width:100%;border:none;cursor:pointer;background:var(--uf-gold);color:#0b1d3a; font-size:14px;font-weight:700;font-family:inherit;border-radius:12px;padding:12px;} /* success state (Frame -73) — shown after submit, header stays */ .uf-modal-success{display:none;flex-direction:column;align-items:center;text-align:center;padding:32px 0;} .uf-modal-card.done .uf-modal-form{display:none;} .uf-modal-card.done .uf-modal-success, .uf-modal-card.success-only .uf-modal-success{display:flex;} .uf-modal-suc-icon{width:64px;height:64px;border-radius:50%;background:#dcfce7;display:flex; align-items:center;justify-content:center;margin-bottom:16px;} .uf-modal-suc-icon .ufi{font-size:30px;color:#166534;} .uf-modal-success h4{font-size:18px;line-height:28px;font-weight:700;color:#166534;margin:0 0 8px;} .uf-modal-success p{font-size:14px;line-height:20px;color:#6b7280;margin:0 0 24px;} .uf-modal-suc-btn{background:var(--uf-gold);color:#0b1d3a;border:none;cursor:pointer;font-weight:700; font-size:14px;font-family:inherit;border-radius:8px;padding:10px 24px;} /* ===== Checkout / إتمام الدفع (payment.html, Frame -68) ===== */ .paypg .uf-nav{position:absolute;top:0;left:0;right:0;z-index:50;} .uf-pay-sec{background:#f7f8fa;padding:96px 64px 64px;min-height:640px;} .uf-pay-crumb{display:flex;align-items:center;justify-content:flex-end;gap:8px;max-width:1312px; margin:0 auto 40px;font-size:14px;line-height:20px;} .uf-pay-crumb a{color:#6b7280;text-decoration:none;} .uf-pay-crumb span{color:var(--uf-gold);} .uf-pay-crumb .ufi{font-size:11px;color:#9ca3af;} .uf-pay-col{width:672px;max-width:100%;margin:0 auto;} .uf-pay-card{background:#fff;border:1px solid #f3f4f6;border-radius:16px;padding:25px;margin-bottom:24px; box-shadow:0 1px 2px rgba(0,0,0,.04);} .uf-pay-card h2{font-size:20px;line-height:28px;font-weight:700;color:#0b1d3a;text-align:right;margin:0 0 16px;} .uf-pay-row{display:flex;align-items:center;justify-content:space-between;gap:16px; padding-bottom:13px;margin-bottom:12px;border-bottom:1px solid #f3f4f6;} .uf-pay-row .lbl{font-size:14px;color:#6b7280;} .uf-pay-row .val{font-size:14px;font-weight:700;color:#0b1d3a;text-align:left;} .uf-pay-row.total{border-bottom:none;padding-bottom:0;margin-bottom:0;padding-top:8px;} .uf-pay-row.total .val{font-size:20px;line-height:28px;color:var(--uf-gold);} .uf-pay-methods{display:flex;flex-wrap:wrap;gap:12px;direction:ltr;} .uf-pay-method{display:flex;direction:rtl;align-items:center;justify-content:flex-start;gap:12px; width:calc(50% - 6px);height:76px;padding:0 18px;border:1px solid #e5e7eb;border-radius:12px; background:#fff;cursor:pointer;} .uf-pay-method img{width:40px;height:40px;object-fit:contain;flex:none;} .uf-pay-method .nm{font-size:14px;font-weight:500;color:#0b1d3a;} .uf-pay-method.sel{border-color:var(--uf-gold);background:#fef9f0;} .uf-pay-confirm{width:100%;height:52px;border:none;cursor:pointer;background:var(--uf-gold);color:#0b1d3a; font-size:14px;font-weight:700;font-family:inherit;border-radius:12px;display:flex;align-items:center; direction:ltr;justify-content:center;gap:8px;margin-top:8px;} .uf-pay-confirm svg{width:15px;height:15px;flex:none;} .uf-pay-secure{display:flex;align-items:center;direction:ltr;justify-content:center;gap:6px;margin-top:16px; font-size:12px;line-height:16px;color:#6b7280;} .uf-pay-secure svg{width:13px;height:13px;flex:none;} /* ---- UNIVERSITY-SELECT RESPONSIVE (desktop ≥1440 stays Figma-exact above) ---- */ @media (max-width:1439.98px){ body.uf-page.unisel{min-width:0;} .unisel .uf-nav-in{max-width:100%;padding:0 clamp(20px,3.5vw,48px);} .unisel .uf-wrap{width:auto;max-width:1344px;padding:0 clamp(20px,3.5vw,48px);} .unisel .uf-pagehead.photo{padding:112px clamp(20px,5vw,64px) 56px;} .unisel .uf-us-in{max-width:100%;padding:0 clamp(20px,4vw,64px);} .unisel .uf-us-intro{padding-left:clamp(20px,4vw,64px);padding-right:clamp(20px,4vw,64px);} .unisel .uf-conf-banner{padding-left:clamp(20px,4vw,64px);padding-right:clamp(20px,4vw,64px);} .unisel .uf-conf-sec{padding-left:clamp(20px,4vw,64px);padding-right:clamp(20px,4vw,64px);} } @media (max-width:991.98px){ .unisel .uf-nav{position:static;height:auto;} .unisel .uf-nav-in{flex-wrap:wrap;height:auto;min-height:64px;gap:12px 16px;padding-bottom:8px;} .unisel .uf-nav-burger{display:flex;} .unisel .uf-nav-menu,.unisel .uf-nav-actions{display:none;width:100%;} .unisel .uf-nav.open .uf-nav-menu{display:flex;flex-direction:column;align-items:flex-start;gap:14px;order:4;width:100%;padding-top:6px;} .unisel .uf-nav.open .uf-nav-actions{display:flex;justify-content:flex-end;gap:12px;order:5;width:100%;padding-bottom:8px;} .unisel .uf-pagehead.photo{min-height:0;} .unisel .uf-pagehead.photo h1{font-size:32px;line-height:38px;} /* grids 2 → 1 col */ .unisel .uf-us-card,.unisel .uf-us-story{width:100%;} /* booking → stack, button full-width */ .unisel .uf-us-book{flex-direction:column;align-items:stretch;gap:20px;padding:32px 24px;} .unisel .uf-us-book-info{text-align:right;} .unisel .uf-us-book-btn{justify-content:center;} /* footer → 2 cols */ .unisel .uf-footer-cols{flex-wrap:wrap;gap:32px 40px;} .unisel .uf-footer-col{width:calc(50% - 20px);} /* field page: 3-col cards → 2-col; jobs/skills → 1-col */ .unisel .uf-fld-card{width:calc(50% - 6px);} .unisel .uf-fld-col{flex:1 1 100%;} .unisel .uf-fld-cols{gap:24px;} } @media (max-width:575.98px){ .unisel .uf-pagehead.photo{padding:84px 18px 40px;} .unisel .uf-pagehead.photo h1{font-size:27px;line-height:34px;} .unisel .uf-pagehead.photo p{font-size:14px;line-height:22px;} .unisel .uf-us-intro{padding:32px 18px;} .unisel .uf-us-intro p{font-size:14px;line-height:24px;} .unisel .uf-us-sec,.unisel .uf-us-booksec{padding:32px 0;} .unisel .uf-us-in{padding:0 18px;} .unisel .uf-us-book-info h2{font-size:21px;} .unisel .uf-footer-col{width:100%;} .uf-modal{padding:12px;} .uf-modal-card{padding:24px 18px;} .uf-modal-head h3{font-size:17px;} .unisel .uf-conf-cell{width:100%;} .unisel .uf-conf-card{padding:24px 18px;} .unisel .uf-conf-banner{padding:20px 18px;} .unisel .uf-fld-card{width:100%;} .unisel .uf-fld-future{padding:24px 18px;} } /* ---- CHECKOUT RESPONSIVE (payment.html `.paypg`) ---- */ @media (max-width:1439.98px){ body.uf-page.paypg{min-width:0;} .paypg .uf-nav-in{max-width:100%;padding:0 clamp(20px,3.5vw,48px);} .paypg .uf-wrap{width:auto;max-width:1344px;padding:0 clamp(20px,3.5vw,48px);} .paypg .uf-pay-sec{padding:96px clamp(20px,4vw,64px) 56px;} } @media (max-width:991.98px){ .paypg .uf-nav{position:static;height:auto;} .paypg .uf-nav-in{flex-wrap:wrap;height:auto;min-height:64px;gap:12px 16px;padding-bottom:8px;} .paypg .uf-nav-burger{display:flex;} .paypg .uf-nav-menu,.paypg .uf-nav-actions{display:none;width:100%;} .paypg .uf-nav.open .uf-nav-menu{display:flex;flex-direction:column;align-items:flex-start;gap:14px;order:4;width:100%;padding-top:6px;} .paypg .uf-nav.open .uf-nav-actions{display:flex;justify-content:flex-end;gap:12px;order:5;width:100%;padding-bottom:8px;} .paypg .uf-pay-sec{padding:72px clamp(20px,4vw,48px) 48px;} .paypg .uf-footer-cols{flex-wrap:wrap;gap:32px 40px;} .paypg .uf-footer-col{width:calc(50% - 20px);} } @media (max-width:575.98px){ .paypg .uf-pay-sec{padding:64px 16px 40px;} .paypg .uf-pay-card{padding:20px 16px;} .paypg .uf-pay-method{width:100%;} .paypg .uf-footer-col{width:100%;} } /* ============================================================ INSTITUTIONS-HOME RESPONSIVE (institutions-home.html `.instpg`; desktop ≥1440 stays Figma-exact above) */ /* ---- ≤1439: lift 1440 floor; hero/rows fluid + wrap ---- */ @media (max-width:1439.98px){ body.uf-page.instpg{min-width:0;} .instpg .uf-nav-in{max-width:100%;padding:0 clamp(20px,3.5vw,48px);} .instpg .uf-wrap{width:auto;max-width:1344px;padding:0 clamp(20px,3.5vw,48px);} .instpg .uf-tr-hero-inner{width:100%;} .instpg .uf-inst-prog-row,.instpg .uf-tr-svc-row{flex-wrap:wrap;max-width:100%;padding:0 clamp(20px,4vw,64px);} .instpg .uf-inst-prog{flex:1 1 260px;min-width:240px;max-width:340px;} .instpg .uf-tr-svc{flex:1 1 240px;min-width:230px;max-width:320px;} .instpg .uf-inst-story-row{padding:0 clamp(20px,4vw,64px);} .instpg .uf-inst-statsec{padding-left:clamp(20px,4vw,64px);padding-right:clamp(20px,4vw,64px);} .instpg .uf-inst-stats{padding:32px clamp(20px,3vw,64px);} } /* ---- ≤991: nav → hamburger; hero copy static; grids 4 → 2; footer 2 cols ---- */ @media (max-width:991.98px){ .instpg .uf-nav{height:auto;} .instpg .uf-nav-in{flex-wrap:wrap;height:auto;min-height:64px;gap:12px 16px;padding-bottom:8px;} .instpg .uf-nav-burger{display:flex;} .instpg .uf-nav-menu,.instpg .uf-nav-actions{display:none;width:100%;} .instpg .uf-nav.open .uf-nav-menu{display:flex;flex-direction:column;align-items:flex-start;gap:14px;order:4;width:100%;padding-top:6px;} .instpg .uf-nav.open .uf-nav-actions{display:flex;justify-content:flex-end;gap:12px;order:5;width:100%;padding-bottom:8px;} /* hero → fluid, copy static over full-height photo */ .instpg .uf-tr-hero{height:auto;} .instpg .uf-tr-hero-bg,.instpg .uf-tr-hero-ov{top:0;height:100%;} .instpg .uf-tr-hero-ov{background:linear-gradient(90deg,rgba(15,30,61,.82),rgba(15,30,61,.5));} .instpg .uf-tr-hero-inner{height:auto;} .instpg .uf-tr-hero-copy,.instpg .uf-tr-hero-copy.uf-inst-copy{position:static;left:auto;top:auto;width:100%;max-width:none;padding:100px clamp(20px,5vw,48px) 56px;} .instpg .uf-tr-hero-copy.uf-inst-copy h1{width:auto;} .instpg .uf-tr-hero-copy h1{font-size:34px;line-height:1.4;} .instpg .uf-tr-hero-copy p{max-width:none;} /* programs / services → 2-col */ .instpg .uf-inst-prog{flex:1 1 calc(50% - 8px);max-width:none;min-width:0;} .instpg .uf-tr-svc{flex:1 1 calc(50% - 10px);max-width:none;min-width:0;} /* stories → 2-col */ .instpg .uf-inst-story{width:calc(50% - 10px);} /* stats smaller min so they wrap 2-3 up */ .instpg .uf-inst-stat{min-width:150px;} /* trim section padding */ .instpg .uf-inst-progsec,.instpg .uf-tr-svcsec,.instpg .uf-inst-statsec,.instpg .uf-inst-stories{padding:48px 0;} /* footer → 2 cols */ .instpg .uf-footer-cols{flex-wrap:wrap;gap:32px 40px;} .instpg .uf-footer-col{width:calc(50% - 20px);} } /* ---- ≤575: phone — everything 1 col ---- */ @media (max-width:575.98px){ .instpg .uf-tr-hero-copy,.instpg .uf-tr-hero-copy.uf-inst-copy{padding:88px 18px 44px;} .instpg .uf-tr-hero-copy h1{font-size:27px;} .instpg .uf-inst-prog{flex:1 1 100%;max-width:420px;margin:0 auto;} .instpg .uf-tr-svc{flex:1 1 100%;max-width:360px;margin:0 auto;} .instpg .uf-inst-story{width:100%;} .instpg .uf-inst-stat{flex:1 1 100%;min-width:0;} .instpg .uf-tr-h2{font-size:24px;line-height:1.3;margin-bottom:28px;} .instpg .uf-footer-col{width:100%;} } /* ============================================================ PROGRAM-DETAIL RESPONSIVE (program-branding.html `.pdpg`; desktop ≥1440 stays Figma-exact above) */ @media (max-width:1439.98px){ body.uf-page.pdpg{min-width:0;} .pdpg .uf-nav-in{max-width:100%;padding:0 clamp(20px,3.5vw,48px);} .pdpg .uf-wrap{width:auto;max-width:1344px;padding:0 clamp(20px,3.5vw,48px);} .pdpg .uf-pd-hero{padding:112px clamp(20px,4vw,80px) 48px;} .pdpg .uf-pd-body,.pdpg .uf-pd-content-in{padding-left:clamp(20px,4vw,80px);padding-right:clamp(20px,4vw,80px);} .pdpg .uf-pd-cta-sec{padding-left:clamp(20px,4vw,80px);padding-right:clamp(20px,4vw,80px);} } @media (max-width:991.98px){ .pdpg .uf-nav{position:static;height:auto;} .pdpg .uf-nav-in{flex-wrap:wrap;height:auto;min-height:64px;gap:12px 16px;padding-bottom:8px;} .pdpg .uf-nav-burger{display:flex;} .pdpg .uf-nav-menu,.pdpg .uf-nav-actions{display:none;width:100%;} .pdpg .uf-nav.open .uf-nav-menu{display:flex;flex-direction:column;align-items:flex-start;gap:14px;order:4;width:100%;padding-top:6px;} .pdpg .uf-nav.open .uf-nav-actions{display:flex;justify-content:flex-end;gap:12px;order:5;width:100%;padding-bottom:8px;} .pdpg .uf-pd-hero{padding:56px clamp(20px,5vw,48px) 48px;min-height:0;} .pdpg .uf-pd-hero-in{max-width:none;} /* 2-col → stack (price card on top) */ .pdpg .uf-pd-body{flex-direction:column;} .pdpg .uf-pd-side{flex:1 1 auto;width:100%;} .pdpg .uf-pd-card{position:static;max-width:480px;margin:0 auto;} .pdpg .uf-pd-main{flex:1 1 auto;width:100%;} .pdpg .uf-pd-learn-item{width:100%;} /* CTA → stack */ .pdpg .uf-pd-cta{flex-direction:column;align-items:stretch;gap:20px;padding:28px 24px;} .pdpg .uf-pd-cta-tx{text-align:center;} .pdpg .uf-pd-cta-btn{justify-content:center;} .pdpg .uf-footer-cols{flex-wrap:wrap;gap:32px 40px;} .pdpg .uf-footer-col{width:calc(50% - 20px);} } @media (max-width:575.98px){ .pdpg .uf-pd-hero{padding:48px 18px 36px;} .pdpg .uf-pd-hero h1{font-size:28px;line-height:36px;} .pdpg .uf-pd-pill{font-size:13px;padding:6px 12px;height:36px;} .pdpg .uf-pd-lesson{gap:10px;padding:14px;} .pdpg .uf-footer-col{width:100%;} }