/*
Theme Name: WUJoodi
Theme URI: https://wujoodi.com
Author: Bassam Elsawy
Description: قالب ووردبريس مخصص لشركة WUJoodi - عصري وقوي، ثنائي اللغة (عربي أساسي / إنجليزي كامل)، بهوية بصرية داكنة متميزة.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: wujoodi
*/

/* ============ DESIGN TOKENS ============ */
:root{
  --bg:#07152E;
  --card:#0A1F44;
  --card-2:#0D2650;
  --accent:#00A37A;
  --accent-2:#00C795;
  --heading:#FFFFFF;
  --text:#A9B4C7;
  --line: rgba(169,180,199,0.14);
  --line-strong: rgba(0,163,122,0.35);
  --radius: 14px;
  --arabic: 'Tajawal', sans-serif;
  --english: 'Poppins', sans-serif;
  --container: 1180px;
  --shadow: 0 24px 60px -24px rgba(0,0,0,0.55);
  --glow: 0 0 0 1px rgba(0,163,122,0.25), 0 20px 50px -20px rgba(0,163,122,0.35);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--arabic);
  line-height:1.8;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.lang-en{font-family:var(--english);}
h1,h2,h3,h4{
  color:var(--heading);
  font-weight:700;
  line-height:1.3;
  margin-bottom:16px;
}
body.lang-en h1, body.lang-en h2, body.lang-en h3, body.lang-en h4{font-weight:600;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}

.wrap{max-width:var(--container); margin:0 auto; padding:0 24px;}
section.pad{padding:96px 0;}
section.pad-sm{padding:56px 0;}
.bg-card{background:var(--card);}

/* RTL/LTR direction handling */
html[dir="rtl"], body[dir="rtl"]{direction:rtl; text-align:right;}
html[dir="ltr"], body[dir="ltr"]{direction:ltr; text-align:left;}

/* ============ EYEBROW LABEL ============ */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--english); font-size:14px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-2); margin-bottom:16px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--accent); display:inline-block;}

.sec-head{max-width:640px; margin-bottom:56px;}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.sec-head.center .eyebrow{justify-content:center;}
.sec-head h2{font-size:clamp(26px,3.4vw,40px);}
.sec-head p{font-size:18px; color:var(--text);}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px; border-radius:10px; font-weight:700; font-size:16.5px;
  transition:.25s; cursor:pointer; border:1px solid transparent; white-space:nowrap;
}
.btn-primary{background:var(--accent); color:#05231a;}
.btn-primary:hover{background:var(--accent-2); transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(0,163,122,0.55);}
.btn-outline{background:transparent; border:1px solid rgba(255,255,255,0.22); color:#fff;}
.btn-outline:hover{border-color:var(--accent); color:var(--accent-2); transform:translateY(-2px);}
.btn-sm{padding:10px 20px; font-size:15px;}

.plain-link-cta{
  display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:700; font-size:17px;
  border-bottom:2px solid var(--accent); padding-bottom:5px; transition:.25s;
}
.plain-link-cta:hover{color:var(--accent-2); border-color:var(--accent-2); gap:12px;}
.plain-link-cta .arrow{transition:.25s; display:inline-block;}
.plain-link-cta:hover .arrow{transform:translateY(3px);}

/* ============ HEADER ============ */
header.site-header{
  position:fixed; inset:0 0 auto 0; z-index:200;
  background:rgba(7,21,46,0.97);
  border-bottom:1px solid var(--line);
  transition:.3s;
}
header.site-header.scrolled{
  background:rgba(7,21,46,0.97); box-shadow:0 14px 34px -20px rgba(0,0,0,0.5);
}
header.site-header.scrolled .nav-wrap{height:68px;}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; height:82px; transition:height .3s;}
.site-logo{font-family:var(--english); font-weight:700; font-size:22px; color:#fff; letter-spacing:.02em; display:flex; align-items:center;}
.site-logo img{height:38px; width:auto; max-width:180px; object-fit:contain; display:block;}
.site-logo span{color:var(--accent-2);}
.main-nav{display:flex; align-items:center; gap:36px;}
.main-nav li{position:relative;}
.main-nav a{font-size:16px; font-weight:600; color:var(--text); position:relative; padding:6px 0; transition:.2s;}
.main-nav a:hover, .main-nav a.current{color:var(--accent-2);}
.main-nav a::after{content:""; position:absolute; right:0; bottom:0; width:0; height:2px; background:var(--accent); transition:width .25s;}
body.lang-en .main-nav a::after{right:auto; left:0;}
.main-nav a:hover::after, .main-nav a.current::after{width:100%;}

/* دعم أي عناصر متداخلة (Sub-menu) في حالة اتحطت بالغلط تحت عنصر تاني في Appearance > Menus */
.main-nav ul.sub-menu{
  list-style:none; position:absolute; top:100%; inset-inline-start:0; min-width:200px; background:var(--card);
  border:1px solid var(--line); border-radius:10px; padding:10px; margin-top:10px;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.2s; z-index:50;
}
.main-nav li:hover > ul.sub-menu{opacity:1; visibility:visible; transform:translateY(0);}
.main-nav ul.sub-menu li{padding:0;}
.main-nav ul.sub-menu a{display:block; padding:9px 14px;}
.main-nav ul.sub-menu a::after{display:none;}
.header-cta{display:flex; align-items:center; gap:16px;}
.nav-mobile-only{display:none;}
.lang-switch{
  display:flex; align-items:center; border:1px solid var(--line); border-radius:20px; padding:3px;
  font-family:var(--english); font-size:12.5px; font-weight:700;
}
.lang-switch a{padding:6px 12px; border-radius:16px; color:var(--text); transition:.2s;}
.lang-switch a.active{background:var(--accent); color:#05231a;}
.menu-toggle{display:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); align-items:center; justify-content:center; background:transparent; position:relative;}
.menu-toggle span{display:block; width:18px; height:2px; background:#fff; position:relative;}
.menu-toggle span::before, .menu-toggle span::after{content:""; position:absolute; inset-inline-start:0; width:18px; height:2px; background:#fff;}
.menu-toggle span::before{top:-6px;}
.menu-toggle span::after{top:6px;}

@media (max-width:960px){
  .main-nav{
    display:none;
    position:fixed;
    top:82px;
    inset-inline-start:0;
    inset-inline-end:0;
    bottom:0;
    background:var(--bg);
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:24px 28px;
    gap:6px;
    width:100%;
    z-index:250;
    overflow-y:auto;
  }
  .main-nav.open{
    display:flex;
  }
  .main-nav li{width:100%;}
  .main-nav a{font-size:17.5px; line-height:1.3; padding:10px 0; display:block;}
  .main-nav ul.sub-menu{
    position:static; opacity:1; visibility:visible; transform:none; background:transparent; border:none;
    margin-top:8px; padding-inline-start:16px; display:flex; flex-direction:column; gap:10px;
  }
  .menu-toggle{display:flex;}
  .header-cta .btn-text{display:none;}
  .nav-mobile-only{display:block;}
}

/* ============ HERO (Homepage) ============ */
.hero{
  padding:170px 0 110px; position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; top:-20%; inset-inline-end:-10%; width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,163,122,0.22), transparent 70%); filter:blur(10px); pointer-events:none;
}
.hero::after{
  content:""; position:absolute; bottom:-30%; inset-inline-start:-15%; width:480px; height:480px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,163,122,0.10), transparent 70%); pointer-events:none;
}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center;}
.hero-copy h1{font-size:clamp(32px,4.4vw,52px); line-height:1.2; margin-bottom:22px;}
.hero-copy .lead{font-size:19px; margin-bottom:34px; max-width:480px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

.hero-visual{position:relative;}
.hero-panel{
  background:var(--card); border:1px solid var(--line); border-radius:20px; padding:36px;
  box-shadow:var(--shadow); position:relative;
}
.hero-panel::before{
  content:""; position:absolute; inset:-1px; border-radius:20px; padding:1px;
  background:linear-gradient(135deg, rgba(0,163,122,0.5), transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.hero-chart{display:flex; align-items:flex-end; gap:10px; height:140px; margin-bottom:24px;}
.hero-chart span{
  flex:1; background:linear-gradient(180deg, var(--accent-2), var(--accent)); border-radius:6px 6px 0 0;
  animation:growbar 1.4s ease-out both;
}
@keyframes growbar{from{transform:scaleY(0); transform-origin:bottom;} to{transform:scaleY(1);}}
.hero-panel .hero-icon-row{display:flex; gap:14px;}
.hero-panel .hero-icon-row .ic{
  width:44px; height:44px; border-radius:12px; background:rgba(0,163,122,0.12); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; color:var(--accent-2); font-size:18px;
}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; text-align:center;}
  .hero-copy .lead{margin-inline:auto;}
  .hero-actions{justify-content:center;}
  .hero{padding:140px 0 70px;}
}



/* ============ SOLUTION FEATURE CARD (Local Growth 90) ============ */
.solution-card{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:0; background:var(--card); border:1px solid var(--line);
  border-radius:20px; overflow:hidden; box-shadow:var(--shadow);
}
.solution-visual{
  background:linear-gradient(155deg, var(--card-2), var(--card)); position:relative; display:flex; align-items:center; justify-content:center;
  padding:50px; min-height:280px;
}
.solution-visual .orbit{
  position:relative; width:190px; height:190px;
}
.solution-visual .orbit-ring{
  position:absolute; inset:0; border:1.5px dashed var(--line-strong); border-radius:50%;
}
.solution-visual .orbit-core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; background:var(--accent); color:#05231a;
  display:flex; align-items:center; justify-content:center; font-size:26px; box-shadow:0 0 0 10px rgba(0,163,122,0.14);
}
.solution-visual .orbit-node{
  position:absolute; width:38px; height:38px; border-radius:10px; background:var(--card); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; color:var(--accent-2); font-size:15px;
}
.orbit-node.n1{top:-6px; left:20px;}
.orbit-node.n2{bottom:-6px; right:20px;}
.orbit-node.n3{top:40%; right:-14px;}
.solution-visual--image{padding:0;}
.solution-visual--image img{width:100%; height:100%; min-height:280px; object-fit:cover; display:block;}
.solution-body{padding:50px;}
.solution-body h3{font-size:24px; margin-bottom:14px;}
.solution-body p{margin-bottom:26px;}
.solution-note{font-size:14px; color:#7a8598; margin-top:16px;}

@media (max-width:900px){
  .solution-card{grid-template-columns:1fr;}
  .solution-body{padding:34px 26px;}
}

/* ============ SOLUTION SLIDER (يظهر بس لو فيه أكتر من حل واحد) ============ */
.solution-slider{position:relative;}
.solution-slider-track{
  display:flex; transition:transform .6s cubic-bezier(.4,0,.2,1);
}
body.lang-en .solution-slider-track{transition-timing-function:cubic-bezier(.4,0,.2,1);}
.solution-slider-track .solution-slide{
  flex:0 0 100%; min-width:100%;
}
.solution-dots{
  display:flex; justify-content:center; gap:10px; margin-top:22px;
}
.solution-dot{
  width:9px; height:9px; border-radius:50%; border:none; background:var(--line-strong); cursor:pointer; padding:0; transition:.25s;
}
.solution-dot.is-active{background:var(--accent); width:26px; border-radius:5px;}
@media (prefers-reduced-motion: reduce){
  .solution-slider-track{transition:none;}
}

/* ============ SHOP / STORE TEASER (image + text split, reversed) ============ */
.split-feature{display:grid; grid-template-columns:0.9fr 1.1fr; gap:50px; align-items:center;}
.split-feature.reverse{grid-template-columns:1.1fr 0.9fr;}
.split-feature.reverse .split-visual{order:2;}
.split-visual{
  background:var(--card); border:1px solid var(--line); border-radius:20px; padding:46px;
  display:flex; align-items:center; justify-content:center; min-height:220px; box-shadow:var(--shadow);
}
.split-visual .bag-icon{font-size:64px; color:var(--accent-2);}
.split-copy h3{font-size:22px;}
@media (max-width:900px){
  .split-feature, .split-feature.reverse{grid-template-columns:1fr;}
  .split-feature.reverse .split-visual{order:0;}
}

/* ============ WHY US (3 value cards) ============ */
.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.value-card{
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:36px 28px; text-align:center;
  transition:.3s;
}
.value-card:hover{border-color:var(--line-strong); transform:translateY(-6px); box-shadow:var(--glow);}
.value-icon{
  width:64px; height:64px; border-radius:16px; background:rgba(0,163,122,0.12); color:var(--accent-2);
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:26px;
}
.value-card h4{font-size:18px;}
.value-card p{font-size:15.5px;}

@media (max-width:900px){
  .value-grid{grid-template-columns:1fr;}
}

/* ============ FINAL CTA BANNER ============ */
.cta-banner{
  background:linear-gradient(120deg, var(--card), var(--card-2)); border:1px solid var(--line-strong);
  border-radius:22px; padding:64px 48px; text-align:center; position:relative; overflow:hidden;
}
.cta-banner::before{
  content:""; position:absolute; top:-40%; inset-inline-start:30%; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,163,122,0.20), transparent 70%);
}
.cta-banner h2{position:relative; z-index:1; font-size:clamp(22px,3vw,32px); max-width:640px; margin:0 auto 28px;}
.cta-actions{position:relative; z-index:1; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ============ SOLUTIONS LISTING PAGE ============ */
.solutions-list{display:flex; flex-direction:column; gap:26px;}

/* ============ LOCAL GROWTH 90 PAGE ============ */
.lg-hero{padding:170px 0 70px; text-align:center; position:relative; overflow:hidden;}
.lg-hero h1{font-size:clamp(26px,3.6vw,42px); max-width:820px; margin:0 auto 20px;}
.lg-hero p{font-size:18px; max-width:720px; margin:0 auto 30px;}
.lg-hero .hero-actions{justify-content:center;}

.problem-block{max-width:820px; margin:0 auto; text-align:center;}
.problem-block .quote{
  font-style:italic; color:#fff; font-size:18px; border-inline-start:3px solid var(--accent);
  padding-inline-start:20px; margin-top:24px; text-align:start; display:inline-block;
}

/* ============ GOOGLE MAPS PROFILE COMPARISON ============ */
.gmb-section{max-width:920px; margin:0 auto; text-align:center;}
.gmb-title{font-size:clamp(19px,2.6vw,26px); font-weight:700; color:#fff; line-height:1.6; margin-bottom:36px;}
.gmb-title .hl-repel{color:#ff8a6a;}
.gmb-title .hl-attract{color:var(--accent-2);}
.gmb-compare-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; text-align:start;}
.gmb-compare-card{
  background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:28px 26px; transition:.3s;
}
.gmb-compare-card.positive{border-color:rgba(0,163,122,0.5);}
.gmb-compare-card.negative{border-color:rgba(255,120,90,0.35);}
.gmb-compare-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--line);}
.gmb-compare-head span{font-weight:700; font-size:17px;}
.gmb-compare-card.positive .gmb-compare-head span{color:var(--accent-2);}
.gmb-compare-card.negative .gmb-compare-head span{color:#ff8a6a;}
.gmb-compare-icon{
  width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:15px;
}
.gmb-compare-card.positive .gmb-compare-icon{background:rgba(0,163,122,0.15); color:var(--accent-2);}
.gmb-compare-card.negative .gmb-compare-icon{background:rgba(255,120,90,0.15); color:#ff8a6a;}
.gmb-compare-list{display:flex; flex-direction:column; gap:13px;}
.gmb-compare-list li{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:16px; color:var(--text);}
.gmb-compare-list .mark{flex-shrink:0; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px;}
.gmb-compare-card.positive .mark{background:rgba(0,163,122,0.18); color:var(--accent-2);}
.gmb-compare-card.negative .mark{background:rgba(255,120,90,0.18); color:#ff8a6a;}

@media (max-width:760px){
  .gmb-compare-grid{grid-template-columns:1fr;}
}

/* ============ AUDIT REQUEST FORM ============ */
.audit-badges{display:flex; justify-content:center; gap:26px; flex-wrap:wrap; margin-bottom:30px;}
.audit-badge{display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600; color:var(--text);}
.audit-badge .ic{color:var(--accent-2); font-size:16px;}
.audit-form-box{
  max-width:640px; margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:42px;
  box-shadow:var(--shadow);
}
.audit-form-box .form-field{margin-bottom:20px;}
.stepper{display:flex; align-items:center; justify-content:space-between; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:6px;}
.stepper button{
  width:36px; height:36px; border-radius:8px; border:none; background:var(--card-2); color:#fff; font-size:18px; font-weight:700;
  cursor:pointer; transition:.2s; display:flex; align-items:center; justify-content:center;
}
.stepper button:hover{background:var(--accent); color:#05231a;}
.stepper output{font-weight:700; color:#fff; font-size:16.5px; font-family:var(--english);}
.field-note{font-size:13.5px; color:#7a8598; margin-top:6px; display:block;}

.feature-list{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
.feature-item{
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px; transition:.25s;
}
.feature-item:hover{border-color:var(--line-strong);}
.feature-item .num{
  font-family:var(--english); font-size:12px; font-weight:700; color:var(--accent-2); letter-spacing:.08em;
}
.feature-item h4{font-size:17.5px; margin:10px 0 8px;}
.feature-item p{font-size:15px;}
@media (max-width:760px){ .feature-list{grid-template-columns:1fr;} }

.process-strip{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:30px 0;
}
.process-strip span{
  background:rgba(0,163,122,0.12); border:1px solid var(--line-strong); color:var(--accent-2);
  padding:10px 18px; border-radius:24px; font-size:13.5px; font-weight:700;
}

.pricing-card{
  max-width:560px; margin:0 auto; background:var(--card); border:1px solid var(--line-strong); border-radius:20px;
  padding:46px; text-align:center; box-shadow:var(--glow);
}
.pricing-card .price{font-size:24px; font-weight:700; color:#fff; margin-bottom:10px;}
.pricing-card .price span{font-size:15.5px; color:var(--text); font-weight:400;}
.pricing-card p{margin-bottom:20px;}

/* ============ FAQ ============ */
.faq-list{max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:0;}
.faq-item{border-bottom:1px solid var(--line); padding:22px 0;}
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer;
  font-weight:700; color:#fff; font-size:17px;
}
.faq-q .plus{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; border:1px solid var(--line-strong); color:var(--accent-2);
  display:flex; align-items:center; justify-content:center; transition:.25s; font-size:15px;
}
.faq-item.open .faq-q .plus{transform:rotate(45deg); background:var(--accent); color:#05231a;}
.faq-a{
  max-height:0; overflow:hidden; transition:max-height .3s ease; font-size:16px; color:var(--text);
}
.faq-item.open .faq-a{max-height:400px; padding-top:14px;}



/* ============ CONTACT PAGE ============ */
.contact-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:50px; align-items:flex-start;}
.contact-info-card{
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:36px;
}
.contact-info-card h3{font-size:19px;}
.contact-info-card .wa-btn{
  margin-top:22px; width:100%; justify-content:center; background:var(--accent); color:#05231a; font-weight:700;
  padding:16px; border-radius:12px; display:flex; align-items:center; gap:10px; font-size:16.5px;
}
.contact-form-box{
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:40px;
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px;}
.form-field{display:flex; flex-direction:column; gap:8px;}
.form-field label{font-size:14.5px; font-weight:700; color:#fff;}
.form-field input, .form-field select, .form-field textarea{
  background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:13px 16px; color:#fff; font-size:16px;
  font-family:inherit; width:100%;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{outline:none; border-color:var(--accent);}
.form-field textarea{resize:vertical; min-height:120px;}
.form-msg{margin-top:14px; font-size:15.5px;}
.form-msg.success{color:var(--accent-2);}
.form-msg.error{color:#ff8080;}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
}

/* ============ WHATSAPP FLOATING BUTTON ============ */
.wa-float{
  position:fixed; bottom:26px; inset-inline-end:26px; z-index:300;
  width:60px; height:60px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 14px 34px -10px rgba(37,211,102,0.6);
  transition:.25s;
}
.wa-float:hover{transform:scale(1.08);}

/* ============ FOOTER ============ */
footer.site-footer{background:var(--card); border-top:1px solid var(--line); padding-top:70px;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px;}
.footer-logo{font-family:var(--english); font-weight:700; font-size:20px; color:#fff; margin-bottom:14px;}
.footer-logo span{color:var(--accent-2);}
.footer-tagline{color:var(--accent-2); font-size:15px; font-weight:600; margin-bottom:14px;}
.footer-about{font-size:15px; color:var(--text); max-width:280px;}
.footer-col h4{color:#fff; font-size:16px; margin-bottom:18px;}
.footer-col ul{display:flex; flex-direction:column; gap:11px;}
.footer-col a{font-size:15px; color:var(--text); transition:.2s;}
.footer-col a:hover{color:var(--accent-2);}
.footer-bottom{
  padding:22px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px; font-size:14px; color:#5f6c82;
}

@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr; gap:30px;}
}
@media (max-width:600px){
  .footer-grid{grid-template-columns:1fr;}
}
/* ============ SCROLL REVEAL ANIMATIONS ============ */
.reveal{
  opacity:0; transform:translateY(34px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
  will-change:opacity, transform;
}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-scale{opacity:0; transform:scale(.92); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);}
.reveal-scale.in{opacity:1; transform:scale(1);}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-scale{transition:none; opacity:1; transform:none;}
}

/* ============ SECTION WAVE DIVIDERS ============ */
.wave-divider{
  position:relative; height:70px; margin-top:-1px; overflow:hidden;
}
.wave-divider svg{position:absolute; bottom:0; width:100%; height:100%; display:block;}
.wave-divider.to-card svg path{fill:var(--card);}
.wave-divider.to-bg svg path{fill:var(--bg);}
@media (max-width:640px){ .wave-divider{height:40px;} }

/* ============ FLOATING GLOW ORBS (reusable background accents) ============ */
@keyframes floatOrb{
  0%, 100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-16px,-22px) scale(1.06); }
}
.glow-orb{
  position:absolute; border-radius:50%; pointer-events:none; filter:blur(6px);
  background:radial-gradient(circle, rgba(0,163,122,0.22), transparent 70%);
  animation:floatOrb 9s ease-in-out infinite;
}

/* ============ ANIMATED COUNTER NUMBERS ============ */
.counter-num{
  font-family:var(--english); font-weight:700; color:#fff; display:inline-block; font-variant-numeric:tabular-nums;
}

/* ============ ENHANCED HOVER MICRO-INTERACTIONS ============ */
.value-icon, .contact-info-card .wa-btn svg{transition:transform .3s ease;}
.value-card:hover .value-icon{transform:scale(1.12) rotate(-4deg);}
.feature-item{position:relative; overflow:hidden;}
.feature-item::before{
  content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px; background:var(--accent);
  transform:scaleY(0); transform-origin:bottom; transition:transform .35s ease;
}
.feature-item:hover::before{transform:scaleY(1);}
.feature-item:hover{transform:translateX(-3px);}
body.lang-en .feature-item:hover{transform:translateX(3px);}

.solution-card, .split-visual, .value-card, .pricing-card, .contact-info-card, .contact-form-box{
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.solution-card:hover{box-shadow:var(--glow);}

.btn-primary{position:relative; overflow:hidden;}
.btn-primary::after{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,0.25); transform:translateX(-120%) skewX(-15deg);
  transition:transform .5s ease;
}
.btn-primary:hover::after{transform:translateX(120%) skewX(-15deg);}

.orbit-ring{animation:spinSlow 18s linear infinite;}
@keyframes spinSlow{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
.orbit-node{animation:floaty 4s ease-in-out infinite;}
.orbit-node.n2{animation-delay:.6s;}
.orbit-node.n3{animation-delay:1.2s;}
@keyframes floaty{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }

.faq-q{transition:color .2s;}
.faq-item:hover .faq-q{color:var(--accent-2);}

/* ============ RESPONSIVE GLOBAL ============ */
@media (max-width:600px){
  section.pad{padding:64px 0;}
  .hero{padding:120px 0 56px;}
  .solution-body{padding:28px 20px;}
  .cta-banner{padding:44px 24px;}
  .wa-float{width:52px; height:52px; bottom:18px; inset-inline-end:18px;}
}


/* =========================================
   WUJoodi - How We Work
   ========================================= */

.wj-about-page .wj-how-we-work {
    background: #06152f;
    color: #ffffff;
    padding: 90px 0 100px;
    position: relative;
    overflow: hidden;
}

.wj-about-page .wj-how-we-work .wj-c {
    max-width: 1200px;
    width: 92%;
    margin: 0 auto;
}

/* العنوان */

.wj-about-page .wj-how-we-work .wj-eyebrow {
    color: #00c9a7;
    font-size: 17.5px;
    font-weight: 600;
    margin-bottom: 12px;
}

.wj-about-page .wj-how-we-work h2 {
    color: #ffffff;
    font-size: 42px;
    line-height: 1.4;
    font-weight: 800;
    margin: 0 0 18px;
}

.wj-about-page .wj-how-we-work .wj-lead {
    color: #aebbd2;
    font-size: 18.5px;
    line-height: 2;
}


/* =========================================
   Process
   ========================================= */




/* الرقم */

.wj-about-page .wj-step-num {
    display: block;
    color: #8fa4c7;
    font-size: 15.5px;
    line-height: 1;
    margin-bottom: 28px;
}


/* الدائرة */

.wj-about-page .wj-process-circle {
    width: 58px;
    height: 58px;
    margin: 0 auto 25px;
    border: 1px solid rgba(0, 201, 167, .45);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 201, 167, .025);
    box-shadow:
        0 0 0 8px rgba(0, 201, 167, .025),
        0 0 25px rgba(0, 201, 167, .08);
}


/* SVG */

.wj-about-page .wj-process-circle svg {
    width: 30px;
    height: 30px;
    color: #aebbd2;
    display: block;
}


/* عنوان الخطوة */

.wj-about-page .wj-step-label {
    display: block;
    color: #ffffff;
    font-size: 19.5px;
    font-weight: 700;
    margin-bottom: 12px;
}


/* وصف الخطوة */

.wj-about-page .wj-step-desc {
    color: #aebbd2;
    font-size: 15.5px;
    line-height: 2;
    margin: 0;
}


/* =========================================
   الخطوط بين الخطوات
   ========================================= */

.wj-about-page .wj-process-dots {
    position: relative;
    width: 100%;
    height: 1px;
    margin-top: 89px;
    border-top: 1px dashed rgba(0, 201, 167, .35);
}


/* =========================================
   Glow خلف السكشن
   ========================================= */

.wj-about-page .wj-how-we-work::before {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle,
        rgba(0, 201, 167, .06) 0%,
        rgba(0, 201, 167, 0) 70%
    );
    pointer-events: none;
}


/* =========================================
   Hover
   ========================================= */

.wj-about-page .wj-process-step:hover .wj-process-circle {
    border-color: #00c9a7;
    box-shadow:
        0 0 0 8px rgba(0, 201, 167, .035),
        0 0 30px rgba(0, 201, 167, .18);
}

.wj-about-page .wj-process-step:hover .wj-process-circle svg {
    color: #00c9a7;
}

.wj-about-page .wj-process-step:hover .wj-step-label {
    color: #00c9a7;
}


/* =========================================
   Mobile
   ========================================= */

@media (max-width: 900px) {

    .wj-about-page .wj-process {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 55px;
    }

    .wj-about-page .wj-process-dots {
        display: none;
    }

}

@media (max-width: 600px) {

    .wj-about-page .wj-how-we-work {
        padding: 60px 0;
    }

    .wj-about-page .wj-how-we-work h2 {
        font-size: 30px;
    }

    .wj-about-page .wj-how-we-work .wj-lead {
        font-size: 16.5px;
    }

    .wj-about-page .wj-process {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .wj-about-page .wj-process-step {
        padding: 0 25px;
    }

}
/* Dotted line */
.wj-about-page .wj-process-dots {
    display: block !important;
    flex: 1 1 50px !important;
    width: 50px !important;
    max-width: 70px !important;
    min-width: 20px !important;
    height: 1px !important;
    margin-top: 116px !important;
    border-top: 1px dashed rgba(0, 199, 149, .4) !important;
}

/* Circle */
.wj-about-page .wj-process-circle {
    width: 74px !important;
    height: 74px !important;
    min-width: 74px !important;
    margin: 0 auto 15px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* SVG */
.wj-about-page .wj-process-circle svg {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    display: block !important;
}

/* Step number */
.wj-about-page .wj-step-num {
    display: block !important;
    font-size: 13.5px !important;
    margin-bottom: 12px !important;
}

/* Step title */
.wj-about-page .wj-step-label {
    display: block !important;
    font-size: 16.5px !important;
    line-height: 1.6 !important;
    color: #fff !important;
}

/* Step description */
.wj-about-page .wj-step-desc {
    display: block !important;
    max-width: 150px !important;
    margin: 8px auto 0 !important;
    font-size: 13.5px !important;
    line-height: 1.7 !important;
}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 900px) {

    .wj-about-page .wj-process {
        flex-wrap: wrap !important;
        max-width: 760px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .wj-about-page .wj-process-dots {
        display: none !important;
    }

    .wj-about-page .wj-process-step {
        flex: 0 0 140px !important;
        width: 140px !important;
    }
}

@media (max-width: 600px) {

    .wj-about-page .wj-section {
        padding: 65px 0 !important;
    }

    .wj-about-page .wj-c {
        width: calc(100% - 32px) !important;
    }

    .wj-about-page .wj-process {
        gap: 35px 15px !important;
    }

    .wj-about-page .wj-process-step {
        flex: 0 0 calc(50% - 10px) !important;
        width: calc(50% - 10px) !important;
        max-width: none !important;
    }
}
/* =========================================
   WUJoodi - How We Work Section
   ========================================= */

.why-section {
    position: relative;
    width: 100%;
    padding: 90px 0;
    background: #06152f;
    overflow: hidden;
}

.why-section .wrap {
    width: min(1200px, 92%);
    margin: 0 auto;
}

.why-section .section-head {
    text-align: center;
    margin-bottom: 65px;
}

.why-section .eyebrow {
    color: #00c9a7;
    font-size: 17.5px;
    font-weight: 600;
    margin-bottom: 15px;
}

.why-section h2 {
    color: #fff;
    font-size: 42px;
    line-height: 1.4;
    font-weight: 800;
    margin: 0 0 20px;
}

.why-section .section-head p {
    color: #aebbd2;
    font-size: 19.5px;
    line-height: 2;
    max-width: 850px;
    margin: 0 auto;
}


/* Grid */

.why-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    position: relative;
    align-items: stretch;
}


/* Item */

.why-item {
    position: relative;
    text-align: center;
    padding: 25px 20px 30px;
    min-height: 280px;
    transition: .3s ease;
}

.why-item:hover {
    transform: translateY(-8px);
}


/* Number */

.why-number {
    display: block;
    color: #8fa4c7;
    font-size: 16.5px;
    margin-bottom: 35px;
}


/* Icon */

.why-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-icon svg {
    width: 45px;
    height: 45px;
    fill: none;
    stroke: #aebbd2;
    stroke-width: 1.7;
}


/* Title */

.why-item h3 {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 15px;
}


/* Description */

.why-item p {
    color: #aebbd2;
    font-size: 16.5px;
    line-height: 2;
    margin: 0;
}


/* Connecting line */

.why-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 170px;
    left: -1px;
    width: 40px;
    border-top: 1px dashed rgba(0, 201, 167, .35);
}


/* Glow */

.why-section::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    left: -300px;
    top: 100px;
    background: radial-gradient(
        circle,
        rgba(0, 201, 167, .08) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.why-section::after {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    right: -300px;
    bottom: -200px;
    background: radial-gradient(
        circle,
        rgba(0, 201, 167, .06) 0%,
        transparent 70%
    );
    pointer-events: none;
}


/* =========================================
   Responsive
   ========================================= */

@media (max-width: 1000px) {

    .why-grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 35px;
    }

    .why-item {
        min-height: 260px;
    }

    .why-item::after {
        display: none;
    }

}

@media (max-width: 600px) {

    .why-section {
        padding: 60px 0;
    }

    .why-section h2 {
        font-size: 30px;
    }

    .why-section .section-head p {
        font-size: 16.5px;
    }

    .why-grid {
        grid-template-columns: 1fr;
    }

    .why-item {
        min-height: auto;
        padding: 25px 15px 40px;
    }

}

/* ===== Mobile Fix for About Process ===== */
@media (max-width: 767px) {

    .wj-about-page .wj-process {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 35px 15px !important;
        margin-top: 40px !important;
        align-items: start !important;
    }

    .wj-about-page .wj-process-step {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: none !important;
        text-align: center !important;
    }

    .wj-about-page .wj-process-dots {
        display: none !important;
    }

    .wj-about-page .wj-process-circle {
        margin: 0 auto 12px !important;
    }

    .wj-about-page .wj-step-label {
        display: block !important;
        white-space: nowrap !important;
        font-size: 16.5px !important;
    }

    .wj-about-page .wj-step-desc {
        width: 100% !important;
        margin: 10px auto 0 !important;
        font-size: 14.5px !important;
        line-height: 1.8 !important;
    }

    .wj-about-page .wj-step-num {
        display: none !important;
    }
}