/*
Theme Name: TAFOKTIN Fast v3
Description: قالب مخصص عالي الأداء - طاقة شمسية وكهرباء
Author: TAFOKTIN
Version: 3.0.0
Text Domain: tafoktin
*/
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;900&display=swap');
:root{--nv:#1B3A5C;--nd:#0E2235;--gd:#F0B429;--gn:#25D366;--wh:#fff;--sf:#F4F7FB;--bd:#D8E3EF;--tx:#0F1E30;--mu:#4A607A;--r:12px;--sh:0 4px 20px rgba(14,34,53,.10)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Tajawal',system-ui,sans-serif;color:var(--tx);background:var(--wh);direction:rtl;text-align:right;overflow-x:hidden;line-height:1.7}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit;transition:all .2s}
ul{list-style:none}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--gd);border-radius:2px}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
section{padding:72px 0}
.bg-sf{background:var(--sf)}
.bg-nv{background:var(--nv)}
.bg-nd{background:var(--nd)}
/* TYPOGRAPHY */
h1{font-size:clamp(26px,5vw,50px);font-weight:900;line-height:1.1}
h2{font-size:clamp(20px,3.5vw,34px);font-weight:700;line-height:1.15}
h3{font-size:clamp(15px,2vw,19px);font-weight:700}
.stag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gd);margin-bottom:10px}
.sh2{font-size:clamp(20px,3vw,32px);font-weight:900;margin-bottom:6px}
.sh2.lt{color:#fff}
.sar{font-size:16px;color:var(--mu);margin-bottom:12px}
.sar.lt{color:rgba(255,255,255,.45)}
.sp{font-size:14.5px;color:var(--mu);line-height:1.85}
.sp.lt{color:rgba(255,255,255,.6)}
/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 22px;border-radius:10px;font-weight:700;font-size:13.5px;font-family:'Tajawal',sans-serif;border:none;cursor:pointer;transition:all .2s;white-space:nowrap;line-height:1}
.btn-gd{background:var(--gd);color:var(--nd)}
.btn-gd:hover{background:#FFD060;transform:translateY(-1px);box-shadow:0 6px 18px rgba(240,180,41,.38)}
.btn-nv{background:var(--nv);color:#fff}
.btn-nv:hover{background:#243F6A;transform:translateY(-1px)}
.btn-wa{background:var(--gn);color:#fff}
.btn-wa:hover{background:#1DAF54;transform:translateY(-1px)}
.btn-gh{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.3)}
.btn-gh:hover{border-color:var(--gd);color:var(--gd)}
.btn-sm{padding:7px 14px;font-size:12px;border-radius:8px}
/* HEADER */
#hd{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(14,34,53,.97);border-bottom:1px solid rgba(240,180,41,.15);backdrop-filter:blur(12px);transition:all .3s}
.hd-in{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;gap:14px}
.hd-logo img{height:50px;width:auto;max-width:180px;filter:brightness(1.1)}
.hd-nav{display:flex;gap:4px}
.hd-nav a{color:rgba(255,255,255,.75);font-size:13px;font-weight:700;padding:7px 12px;border-radius:8px;transition:all .2s}
.hd-nav a:hover,.hd-nav a.cur{color:var(--gd);background:rgba(240,180,41,.1)}
.hd-act{display:flex;align-items:center;gap:8px}
.hd-cart{color:rgba(255,255,255,.7);font-size:13px;display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:8px;transition:all .2s}
.hd-cart:hover{color:var(--gd)}
.cart-cnt{background:var(--gd);color:var(--nd);font-size:10px;font-weight:900;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.hbg{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.hbg span{width:22px;height:2px;background:#fff;border-radius:2px;transition:all .3s}
#mob-nav{display:none;position:fixed;top:72px;left:0;right:0;background:rgba(14,34,53,.99);border-top:1px solid rgba(240,180,41,.1);z-index:99;padding:10px 20px 18px}
#mob-nav.open{display:block}
#mob-nav a{display:block;color:rgba(255,255,255,.72);padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:14px;font-weight:700}
/* HERO */
.hero{min-height:100vh;background:linear-gradient(145deg,#0D1E35 0%,#1B3A5C 55%,#0f2840 100%);display:flex;align-items:center;padding:110px 20px 70px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 70% 38%,rgba(240,180,41,.07) 0%,transparent 65%),linear-gradient(rgba(240,180,41,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(240,180,41,.022) 1px,transparent 1px);background-size:auto,65px 65px,65px 65px;pointer-events:none}
.hero-in{max-width:1240px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;position:relative;z-index:1}
.hbadge{display:inline-flex;align-items:center;gap:8px;background:rgba(240,180,41,.1);border:1px solid rgba(240,180,41,.3);color:var(--gd);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:5px 15px;border-radius:20px;margin-bottom:20px}
.bdot{width:6px;height:6px;background:var(--gd);border-radius:50%;animation:bk 1.6s ease-in-out infinite}
@keyframes bk{0%,100%{opacity:1}50%{opacity:.25}}
.hero h1{color:#fff;margin-bottom:8px}
.hero h1 .gd{color:var(--gd)}
.har{font-size:18px;color:rgba(255,255,255,.4);margin-bottom:20px}
.hdesc{font-size:14.5px;color:rgba(255,255,255,.7);line-height:1.85;margin-bottom:6px}
.hdesc2{font-size:13px;color:rgba(255,255,255,.4);line-height:1.8;margin-bottom:30px}
.hbtns{display:flex;gap:10px;flex-wrap:wrap}
.hright{display:flex;flex-direction:column;gap:12px}
.hcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:13px;padding:14px 18px;display:flex;align-items:center;gap:12px;transition:all .2s}
.hcard:hover{background:rgba(255,255,255,.08);border-color:rgba(240,180,41,.25);transform:translateX(-3px)}
.hci{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.hi1{background:rgba(240,180,41,.18)}.hi2{background:rgba(59,130,246,.18)}.hi3{background:rgba(16,185,129,.18)}.hi4{background:rgba(239,68,68,.18)}
.hct{font-size:13.5px;font-weight:700;color:#fff;margin-bottom:1px}
.hca{font-size:11px;color:rgba(255,255,255,.35)}
.hstats{background:rgba(240,180,41,.08);border:1px solid rgba(240,180,41,.18);border-radius:11px;padding:16px;display:grid;grid-template-columns:repeat(4,1fr);margin-top:8px}
.hsi{text-align:center;padding:4px 0;border-left:1px solid rgba(240,180,41,.12)}
.hsi:last-child{border-left:none}
.hsn{font-size:20px;font-weight:900;color:var(--gd);line-height:1}
.hsl{font-size:10px;color:rgba(255,255,255,.38);margin-top:2px}
/* CATEGORIES */
.cats-g{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:44px}
.cat-c{background:var(--wh);border:1px solid var(--bd);border-radius:var(--r);padding:22px 18px;text-align:center;transition:all .25s;display:block;position:relative;overflow:hidden}
.cat-c::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--gd);transform:scaleX(0);transition:transform .25s;transform-origin:right}
.cat-c:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(14,34,53,.11);border-color:transparent}
.cat-c:hover::after{transform:scaleX(1)}
.cat-ico{font-size:34px;margin-bottom:10px;display:block}
.cat-nm{font-size:13.5px;font-weight:700;color:var(--tx);margin-bottom:3px}
.cat-ar{font-size:12px;color:var(--mu)}
.cat-ct{font-size:10px;color:var(--gd);font-weight:700;margin-top:5px}
/* PRODUCTS */
.prods-g{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.prod-c{background:var(--wh);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;transition:all .25s;display:flex;flex-direction:column}
.prod-c:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:transparent}
.prod-th{position:relative;overflow:hidden;aspect-ratio:1;background:var(--sf)}
.prod-th img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.prod-c:hover .prod-th img{transform:scale(1.06)}
.prod-badge{position:absolute;top:9px;right:9px;background:#DC2626;color:#fff;font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px}
.prod-cat{position:absolute;top:9px;left:9px;background:var(--nd);color:var(--gd);font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px}
.prod-body{padding:14px;flex:1;display:flex;flex-direction:column}
.prod-title{font-size:13.5px;font-weight:700;color:var(--tx);margin-bottom:6px;line-height:1.4;flex:1}
.prod-price{font-size:17px;font-weight:900;color:var(--gd);margin-bottom:11px}
.prod-price del{font-size:12px;color:var(--mu);font-weight:400;margin-right:5px}
.prod-acts{display:flex;justify-content:center;align-items:center;gap:7px}
.prod-acts .btn{flex:1;justify-content:center;min-width:0}
/* SERVICES */
.svcs-g{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.svc-c{background:var(--wh);border:1px solid var(--bd);border-radius:16px;padding:26px 22px;transition:all .25s;position:relative;overflow:hidden}
.svc-c::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--gd);transform:scaleX(0);transition:transform .3s;transform-origin:right}
.svc-c:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(14,34,53,.09);border-color:transparent}
.svc-c:hover::after{transform:scaleX(1)}
.svc-ico{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
.si1{background:#FEF8E0}.si2{background:#EFF6FF}.si3{background:#ECFDF5}.si4{background:#F5F3FF}.si5{background:#ECFEFF}.si6{background:#FFF4ED}
.svc-t{font-size:15.5px;font-weight:700;color:var(--tx);margin-bottom:2px}
.svc-a{font-size:12px;color:var(--mu);margin-bottom:9px}
.svc-p{font-size:13px;color:var(--mu);line-height:1.75}
.svc-ul{margin-top:10px;display:flex;flex-direction:column;gap:3px}
.svc-ul li{font-size:12px;color:var(--mu);display:flex;align-items:center;gap:6px}
.svc-ul li::before{content:'\2713';color:var(--gd);font-weight:900;font-size:11px;flex-shrink:0}
/* PROJECTS */
.proj-g{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}
.proj-g4{grid-template-columns:repeat(4,1fr)}
.proj-it{border-radius:var(--r);overflow:hidden;cursor:pointer;transition:all .25s;position:relative;aspect-ratio:4/3;background:var(--sf)}
.proj-it:hover{transform:translateY(-5px);box-shadow:0 14px 36px rgba(14,34,53,.13)}
.proj-it img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.proj-it:hover img{transform:scale(1.06)}
.proj-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,34,53,.75) 0%,transparent 55%);opacity:0;transition:opacity .3s;display:flex;align-items:flex-end;padding:13px}
.proj-it:hover .proj-ov{opacity:1}
.proj-lb{font-size:12px;color:#fff;font-weight:700}
/* TESTIMONIALS */
.tsti-g{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.tsti-c{background:var(--wh);border:1px solid var(--bd);border-radius:16px;padding:24px 22px;transition:all .25s}
.tsti-c:hover{box-shadow:var(--sh);transform:translateY(-3px)}
.tsti-s{color:var(--gd);font-size:14px;letter-spacing:2px;margin-bottom:11px}
.tsti-q{font-size:13.5px;color:var(--tx);line-height:1.8;margin-bottom:16px;font-style:italic}
.tsti-au{display:flex;align-items:center;gap:9px}
.tsti-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.tsti-n{font-size:13px;font-weight:700;color:var(--tx)}
.tsti-r{font-size:12px;color:var(--mu)}
/* PROCESS */
.proc-g{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:44px;position:relative}
.proc-g::before{content:'';position:absolute;top:26px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,var(--gd),rgba(240,180,41,.1));z-index:0}
.proc-s{text-align:center;position:relative;z-index:1;padding:0 8px}
.proc-n{width:52px;height:52px;border-radius:50%;background:var(--gd);color:var(--nd);font-size:18px;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;border:4px solid var(--nd)}
.proc-t{font-size:13px;font-weight:700;color:#fff;margin-bottom:2px}
.proc-a{font-size:11px;color:rgba(255,255,255,.38);margin-bottom:6px}
.proc-d{font-size:11.5px;color:rgba(255,255,255,.42);line-height:1.6}
/* CONTACT */
.cont-g{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:start}
.cblk{background:var(--sf);border:1px solid var(--bd);border-radius:11px;padding:14px 16px;display:flex;align-items:flex-start;gap:11px;margin-bottom:11px}
.cico{width:38px;height:38px;border-radius:8px;background:#FEF8E0;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.clbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--mu);margin-bottom:1px}
.cval{font-size:14px;font-weight:700;color:var(--tx)}
.cval a:hover{color:var(--gd)}
.cform{background:var(--wh);border:1px solid var(--bd);border-radius:18px;padding:32px 28px;box-shadow:var(--sh)}
.fg{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.fg label{font-size:12px;font-weight:700;color:var(--tx)}
.fg input,.fg select,.fg textarea{width:100%;background:var(--sf);border:1.5px solid var(--bd);color:var(--tx);font-family:'Tajawal',sans-serif;font-size:14px;padding:10px 14px;border-radius:10px;outline:none;transition:border .2s;direction:rtl}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--gd);background:var(--wh)}
.fg textarea{resize:vertical;min-height:85px}
.frow{display:flex;gap:11px}
.frow .fg{flex:1}
.fsub{width:100%;padding:12px;border-radius:10px;background:var(--nv);color:#fff;font-weight:700;font-size:14px;font-family:'Tajawal',sans-serif;border:none;cursor:pointer;transition:all .2s;margin-top:4px}
.fsub:hover{background:var(--gd);color:var(--nd);transform:translateY(-1px)}
/* TRUST */
.trust-b{background:var(--nv);padding:28px 0}
.trust-in{max-width:1240px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.tr-it{padding:14px;border-left:1px solid rgba(255,255,255,.08)}
.tr-it:last-child{border-left:none}
.tr-n{font-size:28px;font-weight:900;color:var(--gd);line-height:1;margin-bottom:4px}
.tr-l{font-size:11px;color:rgba(255,255,255,.45)}
/* FOOTER */
#ft{background:#091826;padding:52px 20px 24px}
.ft-g{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.ft-logo{height:42px;display:block;margin-bottom:12px}
.ft-desc{font-size:13px;line-height:1.8;color:rgba(255,255,255,.32)}
.ft-col h4{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gd);margin-bottom:13px}
.ft-col a{display:block;font-size:13px;color:rgba(255,255,255,.32);margin-bottom:8px;transition:color .2s}
.ft-col a:hover{color:var(--gd)}
.ft-btm{max-width:1240px;margin:0 auto;border-top:1px solid rgba(255,255,255,.06);padding-top:20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.ft-copy{font-size:12px;color:rgba(255,255,255,.2)}
.ft-soc{display:flex;gap:7px}
.sa{width:32px;height:32px;border-radius:7px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.36);font-size:11px;font-weight:700;transition:all .2s}
.sa:hover{background:rgba(240,180,41,.15);border-color:rgba(240,180,41,.3);color:var(--gd)}
/* MOBILE BAR */
.mob-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:999;background:#0D1E35;border-top:1px solid rgba(240,180,41,.12);padding:7px 0}
.mob-bar-in{display:flex;justify-content:space-around;align-items:center;max-width:480px;margin:0 auto;padding:0 10px}
.mb-it{display:flex;flex-direction:column;align-items:center;gap:3px;color:rgba(255,255,255,.5);text-decoration:none;font-size:10px;font-weight:700;padding:5px 10px;border-radius:9px;min-width:52px}
.mb-it.mb-wa{background:var(--gn);color:#fff;border-radius:11px;padding:7px 18px}
.mb-ic{font-size:19px;line-height:1}
/* LIGHTBOX */
.lb{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;padding:20px}
.lb.on{display:flex}
.lb img{max-width:90vw;max-height:88vh;border-radius:10px;object-fit:contain}
.lbx,.lbp,.lbn{position:absolute;background:rgba(255,255,255,.1);border:none;color:#fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;font-size:20px}
.lbx{top:18px;right:18px;width:40px;height:40px}
.lbp{left:14px;top:50%;transform:translateY(-50%);width:46px;height:46px;font-size:26px}
.lbn{right:14px;top:50%;transform:translateY(-50%);width:46px;height:46px;font-size:26px}
.lbx:hover,.lbp:hover,.lbn:hover{background:rgba(255,255,255,.22)}
/* TOAST */
.toast{position:fixed;bottom:82px;right:18px;z-index:9999;background:var(--nv);border:1px solid var(--gd);color:#fff;font-size:13px;padding:11px 16px;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.3);display:none;max-width:300px;line-height:1.5}
.toast.on{display:block;animation:tin .3s ease}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* REVEAL */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rv.vis{opacity:1;transform:none}
/* WOO OVERRIDES */
.woocommerce ul.products{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:18px!important;margin:0!important;padding:0!important;list-style:none!important}
.woocommerce ul.products li.product{border:1px solid var(--bd)!important;border-radius:var(--r)!important;overflow:hidden!important;background:var(--wh)!important;transition:all .25s!important;margin:0!important;float:none!important;width:auto!important}
.woocommerce ul.products li.product:hover{transform:translateY(-5px)!important;box-shadow:var(--sh)!important;border-color:transparent!important}
.woocommerce ul.products li.product img{width:100%!important;height:200px!important;object-fit:cover!important}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:13.5px!important;font-weight:700!important;color:var(--tx)!important;padding:12px 15px 4px!important}
.woocommerce ul.products li.product .price{font-size:17px!important;font-weight:900!important;color:var(--gd)!important;padding:0 15px!important;display:block!important;margin-bottom:10px!important}
.woocommerce ul.products li.product a.button{display:block!important;margin:0 15px 15px!important;background:var(--nv)!important;color:#fff!important;text-align:center!important;padding:9px!important;border-radius:9px!important;font-weight:700!important;font-size:13px!important}
.woocommerce ul.products li.product a.button:hover{background:var(--gd)!important;color:var(--nd)!important}
.woocommerce span.onsale{background:#DC2626!important;border-radius:20px!important;font-weight:700!important}
/* RESPONSIVE */
@media(max-width:1024px){
  .cats-g{grid-template-columns:repeat(3,1fr)}
  .prods-g,.woocommerce ul.products{grid-template-columns:repeat(3,1fr)!important}
  .ft-g{grid-template-columns:1fr 1fr;gap:24px}
}
@media(max-width:768px){
  .hd-nav{display:none}
  .hbg{display:flex}
  .hero-in{grid-template-columns:1fr;gap:32px}
  .hero h1{font-size:26px}
  .hstats{grid-template-columns:repeat(2,1fr)}
  .cats-g{grid-template-columns:repeat(2,1fr)}
  .prods-g,.woocommerce ul.products{grid-template-columns:repeat(2,1fr)!important}
  .svcs-g{grid-template-columns:1fr}
  .proj-g,.proj-g4{grid-template-columns:repeat(2,1fr)}
  .tsti-g{grid-template-columns:1fr}
  .cont-g{grid-template-columns:1fr}
  .proc-g{grid-template-columns:repeat(2,1fr);gap:18px}
  .proc-g::before{display:none}
  .trust-in{grid-template-columns:repeat(2,1fr)}
  .tr-it{border-left:none;border-bottom:1px solid rgba(255,255,255,.06)}
  .ft-g{grid-template-columns:1fr}
  .mob-bar{display:block}
  body{padding-bottom:70px}
  .frow{flex-direction:column}
}
@media(max-width:480px){
  .prods-g,.woocommerce ul.products{grid-template-columns:1fr!important}
  .proj-g,.proj-g4{grid-template-columns:1fr}
}