:root{--green:#0B7A3E;--green2:#4ac07f;--ink:#0B0F0D;--wash:#F5F7F6;--white:#fff;--muted:#66706b;--line:rgba(11,15,13,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Manrope,system-ui,sans-serif;color:var(--ink);background:#fff;overflow-x:hidden}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}.wrap{width:min(1160px,calc(100% - 32px));margin:auto}.narrow{width:min(880px,calc(100% - 32px));margin:auto}.urdu,[dir=rtl],.urdu-title{font-family:"Noto Naskh Arabic",serif;direction:rtl;text-align:right;line-height:2}.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.header-inner{min-height:76px;display:flex;align-items:center;gap:22px}.brand{display:flex;align-items:center;gap:10px;flex:none}.brand-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--green);color:#fff;font-weight:800}.custom-logo{width:46px;height:46px;object-fit:contain}.brand-text{display:flex;flex-direction:column;line-height:1.05}.brand-text strong{font-size:20px}.brand-text small{font-size:10px;color:#6b746f;margin-top:5px}.primary-nav{margin-left:auto}.su-menu{display:flex;align-items:center;gap:18px;list-style:none;margin:0;padding:0}.su-menu a{font-size:12px;font-weight:700;color:#27312c}.su-menu a:hover{color:var(--green)}.search-link{font-size:26px}.menu-toggle{display:none;background:none;border:0;font-size:28px}.hero{background:var(--ink);color:#fff;padding:78px 0 88px;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:60px}.eyebrow{display:inline-block;color:#81d9a8;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}.eyebrow.green{color:var(--green)}.hero h1{font-size:clamp(44px,6vw,76px);line-height:.98;letter-spacing:-.055em;margin:0;max-width:760px}.hero p{font-size:18px;line-height:1.75;color:rgba(255,255,255,.68);max-width:650px;margin:26px 0 32px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:12px;font-weight:800;font-size:14px;border:1px solid transparent}.btn.primary{background:var(--green);color:#fff}.btn.primary:hover{background:#096633}.btn.ghost{border-color:rgba(255,255,255,.2);color:#fff}.hero-media{position:relative}.hero-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:26px;box-shadow:0 28px 80px rgba(0,0,0,.35)}.verified{position:absolute;left:20px;bottom:-22px;background:#fff;color:var(--ink);padding:15px 18px;border-radius:15px;font-weight:800;box-shadow:0 12px 30px rgba(0,0,0,.18)}.verified small{color:#768079;font-weight:600}.search-band{background:var(--wash);padding:50px 0}.search-band h2{text-align:center;font-size:25px}.su-search{display:flex;background:#fff;border:1px solid #dfe5e1;border-radius:14px;padding:6px;box-shadow:0 8px 30px rgba(0,0,0,.04)}.su-search input{flex:1;border:0;padding:15px 16px;font-size:16px;outline:0;background:transparent}.su-search button{background:var(--green);color:#fff;border:0;border-radius:10px;padding:0 24px;font-weight:800}.section{padding:78px 0}.section.wash{background:var(--wash)}.section h1,.section h2,.article h1{letter-spacing:-.035em}.section h2{font-size:38px;margin:0}.section-head{display:flex;justify-content:space-between;gap:20px;margin-bottom:36px}.section-head h1{font-size:48px;margin:8px 0 10px}.section-head p,.section> .wrap>p{color:var(--muted)}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}.category-card{border:1px solid var(--line);border-radius:18px;padding:26px;transition:.2s;background:#fff}.category-card:hover{transform:translateY(-2px);border-color:rgba(11,122,62,.35);background:var(--wash)}.cat-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:13px;background:rgba(11,122,62,.1);font-size:23px}.category-card h3{font-size:18px;margin:18px 0 8px}.category-card p{color:var(--muted);line-height:1.65;font-size:14px}.category-card strong,.read-more{color:var(--green);font-size:13px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}.cards.two{grid-template-columns:repeat(2,1fr)}.card,.video-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.card-image,.video-thumb{display:block;aspect-ratio:16/9;background:#dfe9e3;overflow:hidden;position:relative}.card-image img,.video-thumb img{width:100%;height:100%;object-fit:cover}.placeholder{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#0B7A3E,#0B0F0D);color:#fff;font-size:30px;font-weight:800}.card-body{padding:22px}.meta{font-size:11px;color:#89918d;text-transform:uppercase;letter-spacing:.04em}.card h3,.video-card h3{font-size:19px;line-height:1.35;margin:9px 0}.card p,.video-card p{font-size:14px;line-height:1.6;color:var(--muted)}.popular-list{margin-top:28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.popular-list a{display:grid;grid-template-columns:44px 1fr auto;gap:15px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}.popular-list a:last-child{border:0}.popular-list span{font-family:monospace;color:rgba(11,122,62,.6)}.videos-dark{background:var(--ink);color:#fff}.video-head{display:flex;align-items:end;justify-content:space-between;gap:20px}.video-card{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.1)}.video-card .card-body p{color:rgba(255,255,255,.6)}.play{position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%;background:var(--green);display:grid;place-items:center;color:#fff;font-size:20px}.read-more.light{color:#83d9aa}.empty-state{grid-column:1/-1;background:#fff;border:1px dashed #cdd6d1;border-radius:18px;padding:30px;text-align:center}.empty-state.dark{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.15)}.article-wrap{padding:55px 0 80px;background:#fff}.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px}.article h1{font-size:clamp(36px,5vw,58px);line-height:1.05;margin:12px 0}.urdu-title{font-size:30px;color:#254a36;margin:14px 0}.breadcrumbs{font-size:12px;color:#7c8680}.article-meta{font-size:13px;color:#7e8882;margin:18px 0}.article-featured{border-radius:20px;overflow:hidden;margin:28px 0}.article-featured img{width:100%;max-height:520px;object-fit:cover}.article-content{font-size:17px;line-height:1.85}.article-content h2{font-size:30px;margin-top:38px}.article-content h3{font-size:23px;margin-top:30px}.article-content img{border-radius:14px}.notice{padding:18px 20px;border-left:4px solid var(--green);background:#eef8f2;border-radius:12px;margin:28px 0;line-height:1.65}.notice.warning{background:#fff8e8;border-color:#d59700}.video-embed{margin-top:35px}.video-embed iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:16px}.sidebar{position:relative}.sidebox{border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:18px}.sidebox h3{margin-top:0}.side-link{display:block;padding:10px 0;border-top:1px solid var(--line);font-size:13px;font-weight:700}.job-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:25px 0}.job-facts div{background:var(--wash);padding:16px;border-radius:12px}.job-facts small{display:block;color:#7d8681}.job-facts strong{display:block;margin-top:4px}.salary{display:inline-block;background:#e7f6ed;color:var(--green);padding:6px 10px;border-radius:20px;font-size:12px;font-weight:800}.pagination{margin-top:35px}.site-footer{background:#090d0b;color:#fff;padding:58px 0 22px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}.site-footer p,.site-footer a{color:rgba(255,255,255,.62);font-size:13px;line-height:1.8}.site-footer ul{list-style:none;padding:0}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;margin-top:35px;color:rgba(255,255,255,.45);font-size:12px}
@media(max-width:980px){.primary-nav{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:15px 20px}.primary-nav.open{display:block}.su-menu{flex-direction:column;align-items:flex-start}.menu-toggle{display:block;margin-left:auto}.search-link{display:none}.hero-grid,.article-grid{grid-template-columns:1fr}.hero-media{max-width:700px}.category-grid,.cards{grid-template-columns:repeat(2,1fr)}.sidebar{display:none}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.wrap,.narrow{width:min(100% - 24px,1160px)}.header-inner{min-height:68px}.brand-text small{display:none}.hero{padding:55px 0 68px}.hero-grid{gap:38px}.hero h1{font-size:46px}.hero p{font-size:16px}.verified{display:none}.section{padding:56px 0}.section h2{font-size:31px}.section-head h1{font-size:38px}.category-grid,.cards,.cards.two{grid-template-columns:1fr}.video-head{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr}.job-facts{grid-template-columns:1fr}.su-search button{padding:0 15px}.article-content{font-size:16px}.article h1{font-size:38px}}

.su-urdu-title{font-family:"Noto Naskh Arabic",sans-serif;text-align:right;font-size:clamp(1.5rem,3vw,2.2rem);margin:.5rem 0 1.5rem}.su-featured-image{width:100%;height:auto;border-radius:18px;margin:1rem 0 1.5rem}.su-entry-content{font-size:1.05rem;line-height:1.9}.su-entry-content[dir="rtl"]{font-family:"Noto Naskh Arabic",sans-serif}.su-notice{padding:14px 16px;border:1px solid #d6a800;background:#fff8d9;border-radius:12px;margin:1rem 0}

/* SaudiUrdu v2 enhancements */
.job-view-all{background:#0B7A3E;color:#fff;align-self:flex-start}
.job-card-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.company-logo-small{width:58px;height:58px;border:1px solid var(--line);border-radius:13px;background:#fff;display:grid;place-items:center;padding:7px;flex:none}
.company-logo-small img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.company-logo-small span{font-size:11px;font-weight:800;color:var(--green)}
.company-logo-large{width:92px;height:92px;border:1px solid var(--line);border-radius:18px;background:#fff;padding:10px;display:grid;place-items:center;flex:none}
.company-logo-large img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.job-title-row{display:flex;gap:20px;align-items:center;margin:18px 0 25px}
.job-title-row h1{margin:0}
.job-company{color:var(--muted);margin:6px 0 0}
.job-tags{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 16px}
.job-tags span,.featured-pill{font-size:11px;font-weight:700;padding:6px 9px;border-radius:999px;background:#eef8f2;color:var(--green)}
.featured-pill{background:#fff4d6;color:#8a6100}
.job-mini-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:11px;color:var(--muted)}
.job-actions{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}
.btn.outline-dark{border-color:#cfd8d3;color:var(--ink);background:#fff}
.job-contact{background:var(--wash);border-radius:12px;padding:15px 17px;margin:20px 0}
.job-filter{display:flex;gap:10px;margin:0 0 30px}
.job-filter input{flex:1;padding:14px 16px;border:1px solid #dce3df;border-radius:12px;font:inherit}
.job-filter button{border:0;background:var(--green);color:#fff;border-radius:12px;padding:0 20px;font-weight:800}
.video-duration{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.82);color:#fff;border-radius:6px;padding:4px 7px;font-size:11px;font-weight:800}
.site-footer{padding:64px 0 22px;background:#070b09}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.footer-logo-line{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.footer-logo-line h3{margin:0;font-size:22px}
.footer-logo-line small{color:rgba(255,255,255,.5)}
.footer-mark{width:42px;height:42px;border-radius:12px}
.footer-brand>p{max-width:430px;margin-bottom:20px}
.footer-column h4{margin:3px 0 16px;font-size:14px}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin:0 0 8px}
.footer-links a{transition:.2s}
.footer-links a:hover{color:#75d49e}
.footer-socials{display:flex;flex-wrap:wrap;gap:8px}
.social-btn{border:1px solid rgba(255,255,255,.13);padding:9px 11px;border-radius:10px!important;line-height:1!important;color:rgba(255,255,255,.82)!important}
.social-btn:hover{background:rgba(255,255,255,.07);color:#fff!important}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media(max-width:980px){.footer-top{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
 .footer-top{grid-template-columns:1fr;gap:28px}
 .job-title-row{align-items:flex-start}.company-logo-large{width:72px;height:72px}
 .job-filter{flex-direction:column}.job-filter button{padding:13px 16px}
 .footer-bottom{flex-direction:column}
}


/* =========================================================
   SaudiUrdu v3 — Professional motion & responsive typography
   ========================================================= */

/* Smooth, responsive type */
.hero h1{
  font-size:clamp(42px,5.6vw,78px);
  text-wrap:balance;
}
.hero p{
  font-size:clamp(15px,1.25vw,18px);
  text-wrap:pretty;
}
.section h2{
  font-size:clamp(29px,3.2vw,40px);
  text-wrap:balance;
}
.section-head h1{
  font-size:clamp(36px,4vw,50px);
}
.card h3,.video-card h3,.category-card h3{
  text-wrap:balance;
}
.hero-copy,.section-head,.card-body,.category-card{
  min-width:0;
}

/* Better transition quality */
.btn,
.category-card,
.card,
.video-card,
.popular-list a,
.hero-media img,
.su-menu a{
  transition:
    transform .32s cubic-bezier(.22,1,.36,1),
    box-shadow .32s cubic-bezier(.22,1,.36,1),
    border-color .25s ease,
    background-color .25s ease,
    color .25s ease,
    opacity .25s ease;
}
.btn:hover{transform:translateY(-2px)}
.category-card:hover,
.card:hover,
.video-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 45px rgba(11,15,13,.09);
}
.popular-list a:hover{
  padding-left:8px;
  color:var(--green);
}
.hero-media:hover img{
  transform:scale(1.012);
}

/* JS reveal system — only active after JS adds .su-motion-ready */
.su-motion-ready .su-reveal{
  opacity:0;
  transform:translate3d(0,24px,0);
  filter:blur(2px);
  transition:
    opacity .72s cubic-bezier(.22,1,.36,1),
    transform .72s cubic-bezier(.22,1,.36,1),
    filter .72s ease;
  transition-delay:var(--su-delay,0ms);
  will-change:opacity,transform;
}
.su-motion-ready .su-reveal.su-reveal-left{
  transform:translate3d(-28px,0,0);
}
.su-motion-ready .su-reveal.su-reveal-right{
  transform:translate3d(28px,0,0);
}
.su-motion-ready .su-reveal.su-reveal-scale{
  transform:scale(.965);
}
.su-motion-ready .su-reveal.is-visible{
  opacity:1;
  transform:none;
  filter:none;
}

/* Hero entrance: slightly more premium than generic scroll animation */
.su-motion-ready .hero .hero-copy .eyebrow,
.su-motion-ready .hero .hero-copy h1,
.su-motion-ready .hero .hero-copy p,
.su-motion-ready .hero .hero-actions,
.su-motion-ready .hero .hero-media{
  opacity:0;
}
.su-motion-ready .hero.su-hero-loaded .hero-copy .eyebrow{
  animation:suFadeUp .65s .05s cubic-bezier(.22,1,.36,1) both;
}
.su-motion-ready .hero.su-hero-loaded .hero-copy h1{
  animation:suFadeUp .78s .14s cubic-bezier(.22,1,.36,1) both;
}
.su-motion-ready .hero.su-hero-loaded .hero-copy p{
  animation:suFadeUp .72s .26s cubic-bezier(.22,1,.36,1) both;
}
.su-motion-ready .hero.su-hero-loaded .hero-actions{
  animation:suFadeUp .68s .36s cubic-bezier(.22,1,.36,1) both;
}
.su-motion-ready .hero.su-hero-loaded .hero-media{
  animation:suFadeRight .9s .18s cubic-bezier(.22,1,.36,1) both;
}
@keyframes suFadeUp{
  from{opacity:0;transform:translate3d(0,24px,0)}
  to{opacity:1;transform:none}
}
@keyframes suFadeRight{
  from{opacity:0;transform:translate3d(34px,0,0) scale(.98)}
  to{opacity:1;transform:none}
}

/* Mobile: keep motion subtle and typography readable */
@media(max-width:980px){
  .hero h1{font-size:clamp(42px,8vw,64px)}
  .hero-grid{gap:42px}
}
@media(max-width:640px){
  .hero h1{
    font-size:clamp(38px,12vw,50px);
    line-height:1.02;
    letter-spacing:-.045em;
  }
  .hero p{
    font-size:16px;
    line-height:1.7;
  }
  .hero-actions .btn{
    min-height:48px;
  }
  .section h2{font-size:clamp(28px,9vw,34px)}
  .category-card,.card-body{padding:20px}
  .su-motion-ready .su-reveal,
  .su-motion-ready .su-reveal.su-reveal-left,
  .su-motion-ready .su-reveal.su-reveal-right{
    transform:translate3d(0,16px,0);
    filter:none;
  }
}

/* Accessibility: honor reduced-motion setting */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .su-motion-ready .su-reveal{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
}


/* ==========================================================
   SaudiUrdu v4 — guaranteed visible motion layer
   New filename prevents Hostinger/browser stale asset caching.
   ========================================================== */

/* Header navigation hover */
.primary-nav a,
.su-menu a {
  position: relative;
}
.primary-nav a::after,
.su-menu a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -7px;
  height: 2px;
  background: var(--green);
  border-radius: 999px;
  transition: left .28s ease, right .28s ease;
}
.primary-nav a:hover::after,
.su-menu a:hover::after {
  left: 0;
  right: 0;
}

/* Hero: CSS-only entrance so it works even before scroll JS */
.hero .eyebrow {
  animation: suV4FadeUp .7s .05s cubic-bezier(.22,1,.36,1) both;
}
.hero .hero-copy h1 {
  animation: suV4FadeUp .85s .14s cubic-bezier(.22,1,.36,1) both;
}
.hero .hero-copy p {
  animation: suV4FadeUp .78s .28s cubic-bezier(.22,1,.36,1) both;
}
.hero .hero-actions {
  animation: suV4FadeUp .72s .40s cubic-bezier(.22,1,.36,1) both;
}
.hero .hero-media {
  animation: suV4MediaIn .95s .18s cubic-bezier(.22,1,.36,1) both;
}
.hero .verified {
  animation: suV4Float 4.6s 1.25s ease-in-out infinite;
}
@keyframes suV4FadeUp {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes suV4MediaIn {
  from { opacity:0; transform:translateX(42px) scale(.975); }
  to   { opacity:1; transform:none; }
}
@keyframes suV4Float {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-7px); }
}

/* Clearly visible, premium hover behavior */
.category-card,
.card,
.video-card {
  transform: translateY(0) scale(1);
  transition:
    transform .34s cubic-bezier(.22,1,.36,1),
    box-shadow .34s cubic-bezier(.22,1,.36,1),
    border-color .25s ease !important;
}
.category-card:hover,
.card:hover,
.video-card:hover {
  transform: translateY(-9px) scale(1.012) !important;
  box-shadow: 0 24px 55px rgba(11, 15, 13, .14) !important;
  border-color: rgba(11,122,62,.25) !important;
}
.category-card .cat-icon {
  transition: transform .32s cubic-bezier(.22,1,.36,1), background-color .25s ease;
}
.category-card:hover .cat-icon {
  transform: rotate(-4deg) scale(1.1);
}

/* Buttons */
.btn {
  overflow:hidden;
  position:relative;
}
.btn::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg, transparent 25%, rgba(255,255,255,.24) 45%, transparent 65%);
  transform:translateX(-130%);
  transition:transform .55s ease;
  pointer-events:none;
}
.btn:hover::before { transform:translateX(130%); }
.btn:hover { transform:translateY(-3px) !important; }

/* Search */
.search-band form input,
.search-band form input[type="search"] {
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.search-band form input:focus,
.search-band form input[type="search"]:focus {
  transform:translateY(-1px);
  border-color:rgba(11,122,62,.42);
  box-shadow:0 0 0 4px rgba(11,122,62,.09);
}

/* More obvious scroll reveals, applied by v4 JS */
html.su-v4-motion .su-v4-reveal {
  opacity:0;
  transform:translateY(34px);
  transition:
    opacity .78s cubic-bezier(.22,1,.36,1),
    transform .78s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--su-v4-delay,0ms);
}
html.su-v4-motion .su-v4-reveal.su-v4-visible {
  opacity:1;
  transform:none;
}

/* Responsive typography and motion */
.hero h1 {
  font-size:clamp(44px,5.5vw,80px) !important;
  line-height:.98;
  letter-spacing:-.055em;
}
.hero p {
  font-size:clamp(16px,1.25vw,19px);
}
.section h2 {
  font-size:clamp(30px,3.1vw,42px);
}

@media(max-width: 760px) {
  .hero h1 {
    font-size:clamp(40px,12vw,54px) !important;
    line-height:1.02;
  }
  .hero .hero-media {
    animation-name:suV4FadeUp;
  }
  .category-card:hover,
  .card:hover,
  .video-card:hover {
    transform:translateY(-5px) scale(1.006) !important;
  }
  html.su-v4-motion .su-v4-reveal {
    transform:translateY(20px);
  }
}

@media(prefers-reduced-motion:reduce) {
  .hero .eyebrow,
  .hero .hero-copy h1,
  .hero .hero-copy p,
  .hero .hero-actions,
  .hero .hero-media,
  .hero .verified {
    animation:none !important;
  }
  html.su-v4-motion .su-v4-reveal {
    opacity:1!important;
    transform:none!important;
  }
}