/* ========================================================= my-wazifah — main design stylesheet IMPORTANT: built with CSS logical properties throughout (margin-inline-*, padding-inline-*, inset-inline-*, text-align: start/end, border-inline-*, etc.) so that when Polylang adds an English (LTR) version and flips the , the whole layout mirrors automatically — no rebuild, no separate RTL/LTR stylesheet needed. ========================================================= */ :root{ --ink:#16241D; --green:#1F4A3C; --green-deep:#143226; --green-soft:#E7EFEA; --gold:#C9972E; --gold-light:#E0B563; --gold-soft:#FBF1DC; --surface:#FFFFFF; --surface-2:#F7F8F6; --text-soft:#5C6B63; --border:#E3E8E2; --radius:20px; --radius-sm:12px; } *{box-sizing:border-box;} body.wazifah{margin:0;background:var(--surface);color:var(--ink);font-family:'Almarai',sans-serif;overflow-x:hidden;} .wazifah h1,.wazifah h2,.wazifah h3,.wazifah .display{font-family:'Cairo',sans-serif;font-weight:800;margin:0;} .wazifah p{margin:0;} .wazifah a{color:inherit;text-decoration:none;} .wazifah img,.wazifah svg{display:block;max-width:100%;} .wazifah .container{max-width:1180px;margin-inline:auto;padding-inline:24px;} .wazifah .icon{width:18px;height:18px;flex:none;} .wazifah button{font-family:'Almarai',sans-serif;} /* ---------- reveal / count animations ---------- */ .wazifah .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;} .wazifah .reveal.in{opacity:1;transform:translateY(0);} @media (prefers-reduced-motion:reduce){ .wazifah .reveal{opacity:1;transform:none;transition:none;} .wazifah .float,.wazifah .marquee-track{animation:none !important;} } @keyframes wazifahFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}} .wazifah .float{animation:wazifahFloat 5s ease-in-out infinite;} /* ---------- header ---------- */ .wazifah .site-header{background:#fff;border-bottom:1px solid var(--border);position:relative;z-index:60;} .wazifah .header-top{display:flex;align-items:center;justify-content:space-between;height:84px;} .wazifah .logo img{height:54px;width:auto;} .wazifah .main-nav{display:flex;align-items:center;gap:30px;font-size:14.5px;font-weight:700;color:var(--text-soft);} .wazifah .main-nav a.current{color:var(--green);} .wazifah .main-nav a:hover{color:var(--green);} .wazifah .header-actions{display:flex;align-items:center;gap:12px;} .wazifah .icon-btn{width:40px;height:40px;border-radius:50%;background:var(--green-soft);display:flex;align-items:center;justify-content:center;color:var(--green);border:none;cursor:pointer;} .wazifah .btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 24px;font-weight:800;font-size:13.5px;cursor:pointer;border:none;transition:.25s ease;} .wazifah .btn-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--green-deep);box-shadow:0 10px 22px -10px rgba(201,151,46,.5);} .wazifah .btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 26px -10px rgba(201,151,46,.6);} .wazifah .btn-green{background:var(--green);color:#fff;} .wazifah .btn-green:hover{background:var(--green-deep);transform:translateY(-2px);} .wazifah .btn-light{background:#fff;color:var(--green-deep);} .wazifah .btn-light:hover{transform:translateY(-2px);} .wazifah .btn-outline{border:1.5px solid var(--border);color:var(--ink);background:transparent;} .wazifah .btn-sm{padding:9px 18px;font-size:12.5px;} .wazifah .hamburger{display:none;width:42px;height:42px;border-radius:10px;background:var(--green-soft);border:1.5px solid var(--green-soft);align-items:center;justify-content:center;cursor:pointer;color:var(--green);flex:none;} .wazifah .hamburger svg{width:22px;height:22px;display:block;color:var(--green);} /* filter bar (tier 2, green) */ .wazifah .filter-bar{background:linear-gradient(120deg,var(--green-deep),var(--green));padding:18px 0;} .wazifah .filter-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;} .wazifah .filter-field{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid rgba(255,255,255,.18);border-radius:999px;font-size:13.5px;color:#EAF1EC;cursor:pointer;background:transparent;} .wazifah .filter-field svg{color:#A9C4B6;width:16px;height:16px;} .wazifah .filter-field select{background:transparent;border:none;color:#EAF1EC;font-family:'Almarai',sans-serif;font-size:13.5px;cursor:pointer;} .wazifah .filter-field select option{color:#16241D;} .wazifah .salary-wrap{margin-inline-start:auto;display:flex;align-items:center;gap:14px;color:#fff;font-size:13px;font-weight:700;} .wazifah .salary-track{width:130px;height:4px;background:rgba(255,255,255,.25);border-radius:4px;position:relative;} .wazifah .salary-track i{position:absolute;top:50%;width:60%;inset-inline-end:10%;height:4px;background:var(--gold-light);border-radius:4px;transform:translateY(-50%);} .wazifah .salary-track b{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:var(--gold-light);transform:translate(50%,-50%);} .wazifah .salary-track b.a{inset-inline-end:10%;} .wazifah .salary-track b.b{inset-inline-end:70%;} /* ---------- off-canvas mobile menu ---------- */ /* Hardened: hidden by default via visibility + pointer-events, NOT just transform, so it can never render visibly open on load regardless of whether dir="rtl"/"ltr" is present on yet. Only JS adding the .open class (on click) reveals it. */ .wazifah .wzf-panel-overlay{position:fixed !important;inset:0;background:rgba(10,20,16,.5);opacity:0 !important;visibility:hidden !important;pointer-events:none !important;transition:opacity .3s,visibility 0s linear .3s;z-index:90;} .wazifah .wzf-panel-overlay.open{opacity:1 !important;visibility:visible !important;pointer-events:auto !important;transition:opacity .3s,visibility 0s linear 0s;} .wazifah .wzf-panel{position:fixed !important;top:0;bottom:0;inset-inline-end:0;width:78%;max-width:320px;background:var(--green-deep);z-index:95;visibility:hidden !important;transform:translateX(100%) !important;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s linear .35s;padding:26px 22px;color:#fff;} .wazifah .wzf-panel.open{visibility:visible !important;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s linear 0s;} [dir="rtl"] .wazifah .wzf-panel.open{transform:translateX(0) !important;} [dir="ltr"] .wazifah .wzf-panel{transform:translateX(-100%) !important;} [dir="ltr"] .wazifah .wzf-panel.open{transform:translateX(0) !important;} .wazifah .wzf-panel-head{display:flex;justify-content:space-between;align-items:center;margin-block-end:30px;} .wazifah .wzf-panel-close{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;} .wazifah .wzf-panel-nav a{display:flex;align-items:center;gap:14px;padding:14px 4px;font-weight:800;font-size:15px;border-block-end:1px solid rgba(255,255,255,.08);color:#EAF1EC;} .wazifah .wzf-panel-nav a.current{color:var(--gold-light);} .wazifah .wzf-panel-nav svg{width:20px;height:20px;color:var(--gold-light);} .wazifah .wzf-panel .btn{width:100%;justify-content:center;margin-block-start:26px;} .wazifah .wzf-panel-social{display:flex;gap:10px;margin-block-start:24px;} .wazifah .wzf-panel-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;} /* ---------- hero (home) ---------- */ .wazifah .hero{padding-block:64px 30px;} .wazifah .hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;} .wazifah .eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--green-soft);color:var(--green);font-size:13px;font-weight:800;padding:7px 16px;border-radius:999px;margin-block-end:20px;} .wazifah .hero h1{font-size:42px;line-height:1.32;} .wazifah .hero h1 span{color:var(--gold);} .wazifah .hero p.lead{margin-block-start:16px;color:var(--text-soft);font-size:15.5px;line-height:1.85;max-width:480px;} .wazifah .hero-ctas{display:flex;gap:12px;margin-block-start:28px;flex-wrap:wrap;} .wazifah .mini-stats{display:flex;gap:24px;margin-block-start:32px;flex-wrap:wrap;} .wazifah .mini-stat{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink);} .wazifah .mini-stat .ic{width:30px;height:30px;border-radius:50%;background:var(--gold-soft);color:var(--gold);display:flex;align-items:center;justify-content:center;flex:none;} .wazifah .hero-visual{position:relative;} .wazifah .hero-blob{position:absolute;inset-block:-30px -10px;inset-inline:10% -10px;background:radial-gradient(circle at 30% 30%,var(--gold-light),var(--gold) 70%);border-radius:48% 52% 60% 40% / 50% 45% 55% 50%;opacity:.28;z-index:0;} .wazifah .hero-photo-wrap{position:relative;z-index:1;border-radius:46% 54% 62% 38% / 48% 42% 58% 52%;overflow:hidden;aspect-ratio:1/1.02;box-shadow:0 30px 60px -20px rgba(20,50,38,.35);} .wazifah .hero-photo-wrap img{width:100%;height:100%;object-fit:cover;object-position:50% 10%;} .wazifah .float-card{position:absolute;background:#fff;border-radius:16px;padding:13px 16px;box-shadow:0 16px 32px -14px rgba(20,50,38,.3);display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:800;z-index:2;} .wazifah .float-card .ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;} .wazifah .float-card.a{inset-block-start:6%;inset-inline-end:-6%;} .wazifah .float-card.a .ic{background:var(--green-soft);color:var(--green);} .wazifah .float-card.b{inset-block-end:8%;inset-inline-start:-8%;} .wazifah .float-card.b .ic{background:var(--gold-soft);color:var(--gold);} .wazifah .float-card b{display:block;font-size:15px;} .wazifah .float-card span{display:block;color:var(--text-soft);font-weight:700;font-size:11px;} /* ---------- marquee (trusted companies) ---------- */ .wazifah .trust-strip{padding-block:46px;background:var(--surface-2);overflow:hidden;} .wazifah .trust-strip .label{text-align:center;font-size:13px;font-weight:800;color:var(--text-soft);margin-block-end:6px;} .wazifah .trust-strip h2{text-align:center;font-size:22px;margin-block-end:26px;} .wazifah .marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);} .wazifah .marquee-track{display:flex;gap:14px;width:max-content;animation:wazifahScroll 26s linear infinite;} [dir="rtl"] .wazifah .marquee-track{animation-name:wazifahScroll;} [dir="ltr"] .wazifah .marquee-track{animation-name:wazifahScrollLtr;} @keyframes wazifahScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} @keyframes wazifahScrollLtr{from{transform:translateX(0);}to{transform:translateX(50%);}} .wazifah .badge-pill{display:flex;align-items:center;gap:9px;padding:11px 20px;background:#fff;border:1px solid var(--border);border-radius:999px;font-weight:800;font-size:13px;color:var(--ink);white-space:nowrap;} .wazifah .badge-pill i{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;font-style:normal;font-family:'Cairo',sans-serif;font-size:12px;flex:none;} /* ---------- sections ---------- */ .wazifah .section{padding-block:64px;} .wazifah .section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-block-end:30px;flex-wrap:wrap;gap:12px;} .wazifah .section-head h2{font-size:27px;} .wazifah .count-pill{border:1.5px solid var(--border);border-radius:999px;padding:6px 16px;font-weight:800;font-size:13px;margin-inline-start:10px;} .wazifah .see-all{font-size:14px;font-weight:800;color:var(--green);display:flex;align-items:center;gap:6px;} .wazifah .sort{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:var(--text-soft);} .wazifah .sort b{color:var(--ink);} .wazifah .field-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;} .wazifah .field-tile{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:20px 14px;text-align:center;transition:.25s;cursor:pointer;} .wazifah .field-tile:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 14px 26px -16px rgba(20,50,38,.25);} .wazifah .field-tile .ic{width:32px;height:32px;margin-inline:auto;margin-block-end:12px;color:var(--green);} .wazifah .field-tile h3{font-size:13.5px;font-family:'Almarai',sans-serif;font-weight:800;} .wazifah .field-tile small{display:block;margin-block-start:4px;color:var(--text-soft);font-size:11.5px;} /* ---------- job card ---------- */ .wazifah .job-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;} .wazifah .job-card{border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:12px;transition:.3s;text-decoration:none;color:inherit;} .wazifah .job-card:hover{transform:translateY(-5px);box-shadow:0 24px 40px -20px rgba(20,50,38,.28);} .wazifah .job-card-top{display:flex;align-items:center;justify-content:space-between;} .wazifah .pill-date{background:rgba(255,255,255,.7);border-radius:999px;padding:6px 13px;font-size:12px;font-weight:800;} .wazifah .bookmark{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.7);border:none;display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;} .wazifah .company{font-size:13px;font-weight:700;opacity:.7;} .wazifah .job-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;} .wazifah .job-card h3{font-size:17.5px;line-height:1.4;} .wazifah .brand-bubble{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Cairo',sans-serif;font-weight:700;font-size:14px;flex:none;} .wazifah .badge-row{display:flex;flex-wrap:wrap;gap:7px;} .wazifah .tag{background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.9);font-size:11.5px;font-weight:800;padding:5px 11px;border-radius:999px;} .wazifah .job-card-foot{display:flex;align-items:center;justify-content:space-between;margin-block-start:auto;padding-block-start:8px;} .wazifah .price b{font-size:16px;display:block;} .wazifah .price span{font-size:11.5px;opacity:.65;} .wazifah .card-sage{background:var(--green-soft);} .wazifah .card-gold{background:var(--gold-soft);} .wazifah .card-sand{background:#F3EEE3;} .wazifah .card-mist{background:#E7ECEE;} /* ---------- how it works ---------- */ .wazifah .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .wazifah .step{border-radius:var(--radius);padding:28px 24px;} .wazifah .step b.num{font-family:'Cairo',sans-serif;font-size:14px;letter-spacing:1px;opacity:.55;display:block;margin-block-end:12px;} .wazifah .step h3{font-size:17px;margin-block-end:8px;} .wazifah .step p{opacity:.75;font-size:13.5px;line-height:1.8;} /* ---------- CTA banner ---------- */ .wazifah .cta-banner{display:grid;grid-template-columns:1fr 1fr;border-radius:24px;overflow:hidden;} .wazifah .cta-half{padding:46px 40px;} .wazifah .cta-half.seeker{background:linear-gradient(135deg,var(--green-deep),var(--green));color:#fff;} .wazifah .cta-half.employer{background:var(--gold-soft);color:var(--ink);} .wazifah .cta-half h3{font-size:22px;margin-block-end:10px;} .wazifah .cta-half.seeker h3{color:#fff;} .wazifah .cta-half p{color:var(--text-soft);font-size:14px;margin-block-end:22px;line-height:1.8;max-width:380px;} .wazifah .cta-half.seeker p{color:#CFE0DB;} /* ---------- listing layout ---------- */ .wazifah .breadcrumb{font-size:13px;color:var(--text-soft);padding-block:18px;} .wazifah .breadcrumb b{color:var(--ink);} .wazifah .layout-grid{display:grid;grid-template-columns:280px 1fr;gap:26px;align-items:flex-start;padding-block-start:10px;} .wazifah .ad-card{background:linear-gradient(135deg,var(--green-deep),var(--green));color:#fff;border-radius:var(--radius);padding:26px;margin-block-end:22px;position:relative;overflow:hidden;} .wazifah .ad-card h3{font-size:20px;line-height:1.4;margin-block-end:18px;} .wazifah .filters{background:var(--surface-2);border-radius:var(--radius);padding:22px;} .wazifah .filters h3{font-size:15px;margin-block-end:16px;} .wazifah .filter-group{margin-block-end:18px;} .wazifah .filter-group h4{font-size:12.5px;font-weight:800;color:var(--text-soft);margin-block-end:10px;text-transform:uppercase;letter-spacing:.4px;} .wazifah .filter-chk{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;padding-block:6px;} .wazifah .filter-chk label{display:flex;align-items:center;gap:9px;cursor:pointer;} .wazifah .filter-chk span.count{color:var(--text-soft);font-size:12px;} .wazifah .filters .btn{width:100%;justify-content:center;margin-block-start:6px;} .wazifah .pagination{display:flex;justify-content:center;gap:8px;margin-block-start:34px;} .wazifah .pagination a,.wazifah .pagination span{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);font-weight:800;font-size:13px;} .wazifah .pagination a.active,.wazifah .pagination span.active{background:var(--green);border-color:var(--green);color:#fff;} .wazifah .pagination .dots{border:none;} .wazifah .no-results{padding:60px 20px;text-align:center;color:var(--text-soft);background:var(--surface-2);border-radius:var(--radius);} /* ---------- about page ---------- */ .wazifah .about-hero{padding-block:56px 10px;text-align:center;} .wazifah .about-hero h1{font-size:36px;max-width:680px;margin-inline:auto;} .wazifah .about-hero p{margin:16px auto 0;color:var(--text-soft);max-width:540px;line-height:1.8;font-size:15px;} .wazifah .stat-row{display:flex;justify-content:center;gap:60px;padding-block:40px;flex-wrap:wrap;} .wazifah .stat-row div{text-align:center;} .wazifah .stat-row b{font-family:'Cairo',sans-serif;font-size:32px;display:block;color:var(--green-deep);} .wazifah .stat-row span{font-size:13px;color:var(--text-soft);font-weight:700;} .wazifah .mission-card{background:var(--surface-2);border-radius:24px;padding:46px;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;} .wazifah .mission-card h2{font-size:24px;margin-block-end:14px;} .wazifah .mission-card p{color:var(--text-soft);line-height:1.9;font-size:14.5px;} .wazifah .value-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;} .wazifah .value-tile{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px;font-weight:800;font-size:13.5px;display:flex;align-items:center;gap:10px;} .wazifah .value-tile svg{color:var(--gold);width:20px;height:20px;flex:none;} /* ---------- contact page ---------- */ .wazifah .contact-hero{padding-block:50px 10px;text-align:center;} .wazifah .contact-hero h1{font-size:32px;} .wazifah .contact-hero p{margin-block-start:10px;color:var(--text-soft);font-size:14.5px;} .wazifah .contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;padding-block:36px 70px;align-items:flex-start;} .wazifah .form-card{background:var(--surface-2);border-radius:var(--radius);padding:34px;} .wazifah .form-card h2{font-size:21px;margin-block-end:6px;} .wazifah .form-card>p{color:var(--text-soft);font-size:13.5px;margin-block-end:24px;} .wazifah .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-block-end:14px;} .wazifah .input-group{position:relative;} .wazifah .input-group svg{position:absolute;top:50%;inset-inline-end:16px;transform:translateY(-50%);color:var(--text-soft);width:16px;height:16px;pointer-events:none;} .wazifah .input{width:100%;background:#fff;border:1px solid var(--border);border-radius:12px;padding-block:13px;padding-inline:44px 16px;font-family:'Almarai',sans-serif;font-size:13.5px;} .wazifah textarea.input{min-height:120px;resize:vertical;padding-block-start:13px;} .wazifah .info-card{background:linear-gradient(135deg,var(--green-deep),var(--green));color:#fff;border-radius:var(--radius);padding:30px;margin-block-end:16px;} .wazifah .info-row{display:flex;align-items:center;gap:12px;padding-block:14px;border-block-end:1px solid rgba(255,255,255,.12);font-size:13.5px;} .wazifah .info-row:last-child{border-block-end:none;} .wazifah .info-row .ic{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;flex:none;color:var(--gold-light);} .wazifah .map-card{height:160px;border-radius:var(--radius);background:var(--surface-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-soft);font-size:12.5px;font-weight:700;border:1.5px dashed var(--border);} .wazifah .map-card svg{color:var(--gold);width:26px;height:26px;} .wazifah .social-row{display:flex;gap:10px;margin-block-start:14px;} .wazifah .social-row a{width:40px;height:40px;border-radius:50%;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center;transition:.2s;} .wazifah .social-row a:hover{background:var(--green);color:#fff;transform:translateY(-3px);} .wazifah .form-msg{padding:14px 16px;border-radius:12px;font-size:13.5px;font-weight:700;margin-block-end:16px;} .wazifah .form-msg.success{background:var(--green-soft);color:var(--green-deep);} .wazifah .form-msg.error{background:#FBE3E3;color:#9C2B2B;} /* ---------- footer ---------- */ .wazifah .site-footer{background:var(--green-deep);color:#BFD2C7;padding-block:50px 22px;margin-block-start:50px;} .wazifah .footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px;padding-block-end:28px;border-block-end:1px solid rgba(255,255,255,.1);} .wazifah .footer-logo{display:flex;align-items:center;gap:10px;margin-block-end:14px;} .wazifah .footer-logo img{height:30px;} .wazifah .footer-logo b{font-family:'Cairo',sans-serif;font-size:18px;} .wazifah .footer-logo b span{color:var(--gold-light);} .wazifah .site-footer h4{color:#fff;font-size:14px;margin-block-end:14px;} .wazifah .site-footer a{display:block;font-size:13px;padding-block:5px;} .wazifah .site-footer a:hover{color:#fff;} .wazifah .foot-note{font-size:13px;line-height:1.8;max-width:280px;} .wazifah .bottom-bar{display:flex;justify-content:space-between;padding-block-start:18px;font-size:12.5px;flex-wrap:wrap;gap:10px;} .wazifah .foot-social{display:flex;gap:8px;margin-block-start:16px;} .wazifah .foot-social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;} .wazifah .foot-social svg{width:16px;height:16px;} @media (max-width:980px){ .wazifah .hero-split{grid-template-columns:1fr;} .wazifah .hero-visual{max-width:380px;margin-inline:auto;margin-block:30px 60px;} .wazifah .field-grid{grid-template-columns:repeat(3,1fr);} .wazifah .job-grid{grid-template-columns:repeat(2,1fr);} .wazifah .layout-grid{grid-template-columns:1fr;} .wazifah .steps,.wazifah .mission-card,.wazifah .contact-grid,.wazifah .value-grid,.wazifah .cta-banner{grid-template-columns:1fr;} .wazifah .footer-grid{grid-template-columns:1fr 1fr;} .wazifah .field-row{grid-template-columns:1fr;} .wazifah .hero h1{font-size:32px;} } @media (max-width:640px){ .wazifah .main-nav{display:none;} .wazifah .header-actions .btn{display:none;} .wazifah .hamburger{display:flex;} .wazifah .job-grid{grid-template-columns:1fr;} .wazifah .field-grid{grid-template-columns:repeat(2,1fr);} .wazifah .footer-grid{grid-template-columns:1fr;} .wazifah .filter-row{flex-direction:column;align-items:stretch;} .wazifah .salary-wrap{margin-inline-start:0;} .wazifah .hero{padding-block-start:30px;} } /* ---------- back to top ---------- */ #wzfBackToTop{position:fixed;inset-block-end:28px;inset-inline-end:22px;z-index:999;width:46px;height:46px;border-radius:12px;background:var(--gold);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px -8px rgba(201,151,46,.55);opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease;pointer-events:none;} #wzfBackToTop.visible{opacity:1;transform:translateY(0);pointer-events:auto;} #wzfBackToTop:hover{background:var(--gold-light);transform:translateY(-3px);} #wzfBackToTop svg{width:20px;height:20px;color:var(--green-deep);} /* ---------- about-hero full banner ---------- */ .wazifah .about-hero{padding-block:0;text-align:unset;} .wazifah .about-hero-banner{background:linear-gradient(120deg,var(--green-deep) 0%,var(--green) 60%,#2A6B54 100%);padding:60px 0 54px;position:relative;overflow:hidden;margin-block-end:0;} .wazifah .about-hero-banner::before{content:'';position:absolute;inset-block-start:-60px;inset-inline-end:-60px;width:320px;height:320px;border-radius:50%;background:rgba(201,151,46,.12);pointer-events:none;} .wazifah .about-hero-banner::after{content:'';position:absolute;inset-block-end:-80px;inset-inline-start:-40px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none;} .wazifah .about-hero-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;} .wazifah .about-hero-copy{max-width:580px;} .wazifah .about-hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(232,199,122,.18);border:1px solid rgba(232,199,122,.35);color:var(--gold-light);font-size:12.5px;font-weight:800;padding:6px 14px;border-radius:999px;margin-block-end:18px;} .wazifah .about-hero-banner h1{font-size:36px;line-height:1.3;color:#fff;margin-block-end:14px;} .wazifah .about-hero-banner p{color:#CFE0DB;font-size:15px;line-height:1.85;max-width:480px;} .wazifah .about-hero-stats{display:flex;gap:28px;flex-wrap:wrap;margin-block-start:28px;} .wazifah .about-hero-stat{text-align:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:14px 20px;min-width:90px;} .wazifah .about-hero-stat b{font-family:'Cairo',sans-serif;font-size:24px;color:var(--gold-light);display:block;} .wazifah .about-hero-stat span{font-size:11.5px;color:#CFE0DB;font-weight:700;} /* ---------- contact-hero full banner ---------- */ .wazifah .contact-hero{padding-block:0;text-align:unset;} .wazifah .contact-hero-banner{background:linear-gradient(120deg,var(--green-deep),var(--green));padding:48px 0 44px;position:relative;overflow:hidden;margin-block-end:0;} .wazifah .contact-hero-banner::before{content:'';position:absolute;inset-block-start:-50px;inset-inline-end:-50px;width:280px;height:280px;border-radius:50%;background:rgba(201,151,46,.1);pointer-events:none;} .wazifah .contact-hero-inner{display:flex;align-items:center;gap:24px;} .wazifah .contact-hero-ic{width:60px;height:60px;border-radius:16px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex:none;} .wazifah .contact-hero-ic svg{width:28px;height:28px;color:var(--gold-light);} .wazifah .contact-hero-banner h1{font-size:30px;color:#fff;margin-block-end:8px;} .wazifah .contact-hero-banner p{color:#CFE0DB;font-size:14.5px;line-height:1.7;margin:0;} .wazifah .contact-hero-chips{display:flex;gap:10px;margin-block-start:20px;flex-wrap:wrap;} .wazifah .contact-hero-chip{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:700;color:#EAF1EC;} .wazifah .contact-hero-chip svg{width:14px;height:14px;color:var(--gold-light);} /* ============================================================= * v5 ADDITIONS — company logo, improved cards, single job page * ============================================================= */ /* ---------- Company logo on cards ---------- */ .wazifah .company-logo-card{ width:48px;height:48px;border-radius:12px;overflow:hidden; background:var(--surface-soft,#F7F8F6);border:1px solid var(--border,#E3E8E2); display:flex;align-items:center;justify-content:center;flex:none; } .wazifah .company-logo-card img{ width:100%;height:100%;object-fit:contain; } .wazifah .brand-bubble-hero{ width:80px;height:80px;font-size:28px;border-radius:20px;flex:none; } .wazifah .company-logo-hero{ width:80px;height:80px;border-radius:20px;overflow:hidden; background:#fff;border:1px solid var(--border,#E3E8E2); display:flex;align-items:center;justify-content:center;flex:none; box-shadow:0 4px 14px -6px rgba(0,0,0,.15); } .wazifah .company-logo-hero img{ width:100%;height:100%;object-fit:contain;padding:6px; } /* ---------- Improved job card ---------- */ .wazifah .job-card .job-title-row{ display:flex;align-items:flex-start;justify-content:space-between;gap:10px; } .wazifah .card-excerpt{ font-size:12.5px;color:var(--text-soft,#5C6B63);line-height:1.7; margin-block:0; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .wazifah .card-location{ font-size:12.5px;color:var(--text-soft,#5C6B63);font-weight:700; display:inline-flex;align-items:center;gap:3px; } .wazifah .tag-sector{ background:var(--green-soft,#E7EFEA);color:var(--green,#1F4A3C); border-color:rgba(31,74,60,.15); } .wazifah .tag-type{ background:var(--gold-soft,#FBF1DC);color:#946A18; border-color:rgba(201,151,46,.2); } .wazifah .tag-location{ background:var(--surface-soft,#F7F8F6);color:var(--text-soft,#5C6B63); display:inline-flex;align-items:center;gap:4px; } .wazifah .tag-country{ background:var(--green-soft,#E7EFEA);color:var(--green-deep,#143226);font-weight:800; } /* ---------- Single job hero ---------- */ .wazifah .single-job-hero{ background:var(--card,#fff);border:1px solid var(--border,#E3E8E2); border-radius:var(--radius,20px);padding:28px 30px; display:flex;align-items:center;justify-content:space-between; gap:24px;flex-wrap:wrap;margin-block-end:24px; box-shadow:0 4px 18px -10px rgba(20,50,38,.12); } .wazifah .single-job-hero-left{ display:flex;align-items:center;gap:18px;flex:1;min-width:0; } .wazifah .single-job-hero-copy{flex:1;min-width:0;} .wazifah .single-job-title{font-size:24px;line-height:1.35;margin-block-end:6px;} .wazifah .single-job-company{ font-size:14.5px;font-weight:800;color:var(--green,#1F4A3C);margin-block-end:12px; } .wazifah .single-job-badges{flex-wrap:wrap;gap:8px;} .wazifah .single-apply-btn{ white-space:nowrap;font-size:15px;padding:14px 28px; box-shadow:0 10px 24px -10px rgba(201,151,46,.5); } .wazifah .single-job-hero-actions{flex:none;} /* ---------- Single job two-column grid ---------- */ .wazifah .single-job-grid{ display:grid;grid-template-columns:1fr 320px; gap:24px;align-items:flex-start; } .wazifah .content-card{ background:var(--card,#fff);border:1px solid var(--border,#E3E8E2); border-radius:var(--radius,20px);padding:28px;margin-block-end:20px; } .wazifah .content-card h2{font-size:18px;margin-block-end:14px;} .wazifah .job-description{ color:var(--text-soft,#5C6B63);font-size:14.5px;line-height:1.95; } .wazifah .job-description p{margin-block-end:12px;} .wazifah .job-description ul,.wazifah .job-description ol{ padding-inline-start:20px;margin-block-end:12px; } .wazifah .job-description li{margin-block-end:6px;} /* ---------- Single job sidebar ---------- */ .wazifah .single-job-sidebar{display:flex;flex-direction:column;gap:16px;} .wazifah .sidebar-apply-card{ background:linear-gradient(135deg,var(--green-deep,#143226),var(--green,#1F4A3C)); border-radius:var(--radius,20px);padding:22px;color:#fff; } .wazifah .sidebar-apply-cta{ font-size:13.5px;color:#CFE0DB;margin-block-end:14px;font-weight:700; } .wazifah .sidebar-info-card{ background:var(--card,#fff);border:1px solid var(--border,#E3E8E2); border-radius:var(--radius,20px);padding:22px; } .wazifah .sidebar-info-card h3{font-size:15px;margin-block-end:14px;} .wazifah .quick-row{ display:flex;justify-content:space-between;align-items:flex-start; padding:10px 0;border-block-end:1px solid var(--border,#E3E8E2); font-size:13.5px;gap:10px; } .wazifah .quick-row:last-child{border-block-end:none;} .wazifah .quick-label{color:var(--text-soft,#5C6B63);flex:none;} .wazifah .quick-value{font-weight:800;text-align:end;} .wazifah .sidebar-share{ background:var(--surface-soft,#F7F8F6);border:1px solid var(--border,#E3E8E2); border-radius:var(--radius,20px);padding:20px; } .wazifah .sidebar-share h3{font-size:14px;margin-block-end:12px;} .wazifah .share-row{display:flex;gap:8px;flex-wrap:wrap;} .wazifah .share-btn{ display:inline-flex;align-items:center;gap:7px; padding:9px 14px;border-radius:999px; font-size:12.5px;font-weight:800;text-decoration:none;transition:.2s; } .wazifah .share-btn:hover{transform:translateY(-2px);} .wazifah .share-btn.wa{background:#25D366;color:#fff;} .wazifah .share-btn.x{background:#000;color:#fff;} .wazifah .share-btn.li{background:#0077B5;color:#fff;} .wazifah .sidebar-source{ text-align:center; } .wazifah .sidebar-source a{ font-size:13px;font-weight:800;color:var(--text-soft,#5C6B63); text-decoration:none; } .wazifah .sidebar-source a:hover{color:var(--green,#1F4A3C);} /* ---------- Related jobs section ---------- */ .wazifah .see-all{ font-size:14px;font-weight:800;color:var(--green,#1F4A3C); text-decoration:none;display:flex;align-items:center;gap:6px; } /* ---------- Responsive ---------- */ @media (max-width:900px){ .wazifah .single-job-grid{grid-template-columns:1fr;} .wazifah .single-job-hero{flex-direction:column;align-items:flex-start;} .wazifah .single-apply-btn{width:100%;justify-content:center;} .wazifah .single-job-hero-left{flex-direction:column;align-items:flex-start;} } @media (max-width:640px){ .wazifah .single-job-title{font-size:20px;} .wazifah .content-card{padding:20px;} } /* ---------- Trust strip real logo images ---------- */ .wazifah .trust-logo-wrap{ width:28px;height:28px;border-radius:7px;overflow:hidden; background:#fff;border:1px solid var(--border,#E3E8E2); display:flex;align-items:center;justify-content:center;flex:none; } .wazifah .trust-logo-wrap img{ width:100%;height:100%;object-fit:contain;padding:2px; } /* ---------- Field tile icon wrapper ---------- */ .wazifah .field-tile .field-tile-icon{ transition:transform .2s ease; } .wazifah .field-tile:hover .field-tile-icon{ transform:scale(1.1); }