/*
Theme Name: Umar Farooq CMS Expert
Theme URI: https://umardev.online
Author: Umar Developer
Author URI: https://awaiskhan.online
Description: Fully dynamic ACF-powered portfolio theme for M. Umar Farooq - CMS Expert. Every heading, text, image and social link is editable from wp-admin via Advanced Custom Fields. Requires the free "Advanced Custom Fields" plugin.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: umar-cms-expert
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700;800&family=Plus+Jakarta+Sans:wght@700;800&display=swap');

:root{
  --gold:#C9A227; --gold-2:#E7CB6E; --gold-deep:#9C7C1B;
  --navy:#0A0F1E; --surface:#0F172A; --card:#111B30;
  --line:rgba(255,255,255,.08); --txt:#E6EAF2; --muted:#93A1B8; --dim:#5b6b86;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--txt);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
section{scroll-margin-top:88px}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:rgba(201,162,39,.32);color:#fff}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#070b16}
::-webkit-scrollbar-thumb{background:#1d2942;border-radius:8px;border:3px solid #070b16}
::-webkit-scrollbar-thumb:hover{background:#2a3a5c}

@keyframes floatBlob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(34px,-44px) scale(1.12)}}
@keyframes floatBlob2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.1)}}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}50%{box-shadow:0 0 0 7px rgba(52,211,153,0)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

/* reveal-on-scroll */
[data-reveal]{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.16,.84,.44,1),transform .9s cubic-bezier(.16,.84,.44,1)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="scale"]{transform:scale(.93)}
[data-reveal="left"]{transform:translateX(-46px)}
[data-reveal="right"]{transform:translateX(46px)}
[data-reveal].is-in{transform:none}
[data-bar]{width:0;transition:width 1.4s cubic-bezier(.16,.84,.44,1)}

/* layout */
.wrap{max-width:1200px;margin:0 auto;padding:0 26px}
.eyebrow{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:14px}
.sec-h{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:42px;line-height:1.12;letter-spacing:-1px;color:#fff;margin:0}
.lead{color:var(--muted);font-size:17px;line-height:1.65}
.page-head{padding:142px 0 30px;position:relative}

/* ambient background */
.ambient{position:fixed;inset:0;pointer-events:none;z-index:0}
.ambient i{position:absolute;border-radius:50%;display:block}
.ambient .b1{top:-10%;right:-8%;width:620px;height:620px;background:radial-gradient(circle,rgba(201,162,39,.16),transparent 62%);filter:blur(20px);animation:floatBlob 16s ease-in-out infinite}
.ambient .b2{bottom:-12%;left:-10%;width:560px;height:560px;background:radial-gradient(circle,rgba(37,71,140,.30),transparent 64%);filter:blur(24px);animation:floatBlob2 19s ease-in-out infinite}
.ambient .b3{inset:0;width:auto;height:auto;border-radius:0;background:radial-gradient(900px 500px at 80% -5%,rgba(201,162,39,.08),transparent 70%)}

/* glass surfaces */
.glass{background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012));border:1px solid var(--line);border-radius:18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.card-lift{transition:transform .4s cubic-bezier(.16,.84,.44,1),box-shadow .4s,border-color .4s}
.card-lift:hover{transform:translateY(-8px);border-color:rgba(201,162,39,.45);box-shadow:0 24px 50px rgba(0,0,0,.4)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;padding:14px 24px;border-radius:12px;text-decoration:none;cursor:pointer;border:none;font-family:inherit;transition:transform .3s,box-shadow .3s,background .3s,border-color .3s}
.btn-gold{background: linear-gradient(135deg, var(--gold), #ffc000);color:#0A0F1E;box-shadow:0 10px 30px rgba(201,162,39,.26)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(201,162,39,.5)}
.btn-ghost{background:rgba(255,255,255,.04);border:1px solid var(--line);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(201,162,39,.5)}
.chip{font-size:13.5px;font-weight:600;color:#c3cee0;background:rgba(255,255,255,.04);border:1px solid var(--line);padding:7px 13px;border-radius:9px;transition:border-color .3s,color .3s}
.chip:hover{border-color:rgba(201,162,39,.5);color:#fff}

/* navbar */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(9,13,26,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav-in{height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:17px;color:#fff;letter-spacing:.2px;display:block;line-height:1.05;white-space:nowrap}
.brand small{font-size:10.5px;letter-spacing:3.5px;text-transform:uppercase;color:var(--gold);font-weight:600;white-space:nowrap}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:500;transition:color .25s;position:relative}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:#fff}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--gold-deep))}
.burger{display:none;background:rgba(255,255,255,.05);border:1px solid var(--line);color:#fff;width:42px;height:42px;border-radius:10px;cursor:pointer;align-items:center;justify-content:center}
.mobile-menu{display:none;border-top:1px solid var(--line);background:rgba(9,13,26,.97);padding:14px 26px 22px}
.mobile-menu.open{display:block;animation:fadeDown .3s ease}
.mobile-menu a{display:block;color:var(--txt);text-decoration:none;padding:12px 4px;border-bottom:1px solid var(--line);font-weight:500}
.mobile-menu a:last-child{border:none}

/* footer */
.foot{border-top:1px solid var(--line);padding:56px 0 30px;background:rgba(7,11,22,.6);position:relative;z-index:2}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px}
.foot a{color:var(--muted);text-decoration:none;font-size:14px;transition:color .25s}
.foot a:hover{color:var(--gold)}

/* grids */
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:64px;align-items:center}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.ach-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.contact-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:50px;align-items:start}
.detail-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:40px;align-items:start}

/* portfolio card */
.port-card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .4s cubic-bezier(.16,.84,.44,1),box-shadow .4s,border-color .4s;text-decoration:none;display:block}
.port-card:hover{transform:translateY(-7px);border-color:rgba(201,162,39,.4);box-shadow:0 26px 56px rgba(0,0,0,.45)}
.port-shot{position:relative;height:218px;overflow:hidden;background:#0c1322}
.port-shot image-slot,.port-shot .ph{transition:transform .65s cubic-bezier(.16,.84,.44,1);width:100%;height:100%;display:block}
.port-card:hover .port-shot image-slot,.port-card:hover .port-shot .ph{transform:scale(1.07)}
.port-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:18px;opacity:0;transition:opacity .4s;background:linear-gradient(to top,rgba(8,12,22,.92),rgba(8,12,22,.1) 60%,transparent);pointer-events:none}
.port-card:hover .port-overlay{opacity:1}
.filter-btn{font-size:13.5px;padding:9px 16px;border-radius:10px;cursor:pointer;font-family:inherit;background:rgba(255,255,255,.04);color:#c3cee0;border:1px solid var(--line);font-weight:500;transition:all .25s}
.filter-btn.active{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#0A0F1E;border-color:transparent;font-weight:700}
.is-hidden{display:none !important}

/* floating CTA */
.fab{position:fixed;right:24px;bottom:24px;z-index:70;display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#0A0F1E;font-weight:700;font-size:14.5px;padding:14px 20px;border-radius:14px;text-decoration:none;box-shadow:0 14px 40px rgba(201,162,39,.45);transition:transform .3s,box-shadow .3s;opacity:0;transform:translateY(20px);pointer-events:none}
.fab.show{opacity:1;transform:none;pointer-events:auto}
.fab:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 20px 50px rgba(201,162,39,.6)}

/* inputs */
.fld{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:11px;padding:13px 14px;color:#fff;font-size:14.5px;font-family:inherit;outline:none;transition:border-color .25s}
.fld:focus{border-color:var(--gold)}
.lbl{display:block;font-size:13px;color:var(--muted);margin-bottom:7px;font-weight:500}

/* small reusable grids (mini-stat rows, form field pairs, galleries) — these
   replace one-off inline grid-template-columns so they actually respond to
   the breakpoints below instead of being locked by inline-style specificity */
.uf-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.uf-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.uf-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

@media(max-width:980px){
 .hero-grid,.about-grid,.contact-grid,.ach-grid,.detail-grid{grid-template-columns:1fr;gap:48px}
 .svc-grid,.port-grid,.tst-grid,.uf-grid-4{grid-template-columns:repeat(2,1fr)}
 .stats-grid{grid-template-columns:repeat(2,1fr)}
 .skills-grid{grid-template-columns:1fr}
 .nav-links{display:none}
 .burger{display:inline-flex}
 .foot-grid{grid-template-columns:1fr 1fr}
 .detail-grid aside{position:static !important;top:auto !important}
}
@media(max-width:600px){
 .svc-grid,.port-grid,.tst-grid,.foot-grid,.stats-grid,.uf-grid-4{grid-template-columns:1fr}
 .uf-grid-2,.uf-grid-3{grid-template-columns:1fr}
 .hero-h1{font-size:39px !important;line-height:1.1 !important}
 .sec-h{font-size:29px !important}
 .wrap{padding:0 20px}
 .fab{right:16px;bottom:16px;padding:12px 16px;font-size:13.5px}
 .foot-grid > div:first-child{grid-column:1/-1}
}
@media(max-width:380px){
 .hero-h1{font-size:33px !important}
 .sec-h{font-size:25px !important}
 .btn{padding:13px 18px;font-size:14px}
}
@media(max-width:480px){
 .uf-donut-row{flex-wrap:wrap;justify-content:center;text-align:center}
 .uf-donut-row > div:last-child{align-items:center}
}


/* ===== WordPress core alignment / a11y helpers ===== */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important;}
.alignfull{width:100vw;max-width:100vw;}
.alignwide{max-width:1200px;}

/* image-slot -> real <img> replacement styling (keeps original slot proportions) */
.img-slot-wrap{position:relative;overflow:hidden;width:100%;height:100%;display:block;background:#0c1322;}
.img-slot-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.img-slot-wrap.is-placeholder{display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:12.5px;text-align:center;padding:14px;border:1px dashed var(--line);}

/* wp form styling */
.wpcf7-form input.fld, .wpcf7-form textarea.fld { width:100%; }