/* =========================================================
   فرسان الجزيرة — Design System
   Premium Saudi Home-Services Site (RTL / Arabic)
   ========================================================= */

:root{
  --navy: #0A2E52;
  --navy-2: #0E3E6E;
  --sky: #2E9BE6;
  --sky-light: #EAF5FD;
  --gray-50: #F6F8FA;
  --gray-100: #EDF1F5;
  --gray-300: #C9D3DC;
  --gray-600: #5A6B7B;
  --white: #FFFFFF;
  --gold: #C9A24B; /* subtle premium accent, used sparingly */

  --font-display: 'Cairo', sans-serif;
  --font-body: 'Cairo', sans-serif;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;

  --shadow-soft: 0 10px 40px rgba(10, 46, 82, 0.08);
  --shadow-mid: 0 16px 50px rgba(10, 46, 82, 0.14);
  --shadow-strong: 0 24px 60px rgba(10, 46, 82, 0.22);

  --ease: cubic-bezier(.22,.9,.32,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-body);
  color: var(--navy);
  background: var(--white);
  direction: rtl;
  text-align: right;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
html, body {
  overflow-x: hidden;
  width: 100%;
}

/* ومنع أي عنصر من التسبب في overflow */
* {
  max-width: 100vw !important;
  overflow-x: clip;
}
img{max-width:100%; height:auto; display:block;}
a{text-decoration:none; color:inherit;}
ul{margin:0; padding:0; list-style:none;}
h1,h2,h3,h4,h5{font-family:var(--font-display); font-weight:800; color:var(--navy); margin:0;}
p{margin:0; color:var(--gray-600); line-height:1.9;}
.section{padding:96px 0;}
.section-sm{padding:64px 0;}
@media(max-width:768px){
  .section{padding:64px 0;}
  .section-sm{padding:44px 0;}
}

/* -------- Utility -------- */
.bg-sky-light{background:var(--sky-light);}
.bg-gray-50{background:var(--gray-50);}
.bg-navy{background:var(--navy);}
.text-sky{color:var(--sky);}
.text-navy{color:var(--navy);}
.text-gold{color:var(--gold);}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.82rem; font-weight:800; letter-spacing:.3px;
  color: var(--sky);
  background: var(--sky-light);
  padding:8px 18px; border-radius:100px;
  margin-bottom:18px;
}
.eyebrow i{font-size:.7rem;}

.section-title{
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height:1.35;
  margin-bottom:16px;
}
.section-sub{
  font-size:1.05rem;
  max-width:680px;
}
.section-head{margin-bottom:48px;}
.section-head.text-center{margin-inline:auto; text-align:center;}
.section-head.text-center .section-sub{margin-inline:auto;}

/* -------- Buttons -------- */
.btn-fj{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 32px;
  border-radius:100px;
  font-weight:800;
  font-size:1rem;
  border:2px solid transparent;
  transition:.35s var(--ease);
  white-space:nowrap;
}
.btn-fj-primary{
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color:var(--white);
  box-shadow: var(--shadow-mid);
}
.btn-fj-primary:hover{
  transform:translateY(-3px);
  box-shadow: var(--shadow-strong);
  color:var(--white);
}
.btn-fj-secondary{
  background: var(--white);
  color: var(--navy);
  border-color: var(--sky);
}
.btn-fj-secondary:hover{
  background: var(--sky);
  color:var(--white);
  transform:translateY(-3px);
  border-color:var(--sky);
}
.btn-fj-light{
  background: rgba(255,255,255,.14);
  color: var(--white);
  border-color: rgba(255,255,255,.5);
  backdrop-filter: blur(6px);
}
.btn-fj-light:hover{
  background: var(--white);
  color: var(--navy);
}

/* =========================================================
   HEADER
   ========================================================= */
.fj-header{
  position:fixed; inset-inline:0; top:0; z-index:1000;
  padding:20px 0;
  transition: all .4s var(--ease);
  background: transparent;
}
.fj-header.is-scrolled{
  padding:12px 0;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 30px rgba(10,46,82,.08);
}
.fj-header .navbar-brand{
  display:flex; align-items:center; gap:12px;
  font-weight:900; font-size:1.35rem;
  color:var(--white);
  transition:color .4s var(--ease);
}
.fj-header.is-scrolled .navbar-brand{color:var(--navy);}
.fj-header .brand-icon{
  width:46px; height:46px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--sky), var(--navy));
  color:var(--white); font-size:1.3rem;
  box-shadow: var(--shadow-soft);
  flex-shrink:0;
}
.fj-nav-link{
  font-weight:700; font-size:.98rem;
  color: var(--white);
  padding:10px 18px !important;
  position:relative;
  transition: color .4s var(--ease);
}
.fj-header.is-scrolled .fj-nav-link{color:var(--navy);}
.fj-nav-link::after{
  content:''; position:absolute; right:18px; left:18px; bottom:4px;
  height:2px; background:var(--sky);
  transform:scaleX(0); transform-origin:center;
  transition:transform .3s var(--ease);
}
.fj-nav-link:hover::after, .fj-nav-link.active::after{transform:scaleX(1);}
.fj-header .navbar-toggler{border:none; color:var(--white); font-size:1.4rem;}
.fj-header.is-scrolled .navbar-toggler{color:var(--navy);}
.fj-header .navbar-toggler:focus{box-shadow:none;}
.header-call-btn{
  display:flex; align-items:center; gap:10px;
  background: var(--sky);
  color:var(--white) !important;
  padding:11px 22px; border-radius:100px;
  font-weight:800; font-size:.95rem;
  box-shadow: var(--shadow-soft);
  transition: .35s var(--ease);
}
.header-call-btn:hover{background:var(--navy); transform:translateY(-2px);}

@media (max-width:991px){
  .fj-header .navbar-collapse{
    background:var(--white); border-radius:var(--radius-md);
    margin-top:14px; padding:18px; box-shadow:var(--shadow-mid);
  }
  .fj-header .fj-nav-link, .fj-header.is-scrolled .fj-nav-link{color:var(--navy) !important;}
  .fj-header .fj-nav-link::after{display:none;}
}

/* =========================================================
   HERO — Split layout
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  background: var(--navy);
  overflow:hidden;
  padding-top:120px;
}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.hero-bg::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(10,46,82,.94) 0%, rgba(10,46,82,.82) 45%, rgba(10,46,82,.45) 100%);
}
[dir="rtl"] .hero-bg::after{
  background: linear-gradient(270deg, rgba(10,46,82,.94) 0%, rgba(10,46,82,.82) 45%, rgba(10,46,82,.45) 100%);
}
.hero-content{position:relative; z-index:2; padding:60px 0 100px;}
.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  color:var(--white);
  padding:9px 20px; border-radius:100px;
  font-weight:700; font-size:.88rem;
  backdrop-filter: blur(8px);
  margin-bottom:26px;
}
.hero-badge i{color:var(--sky);}
.hero h1{
  color:var(--white);
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height:1.28;
  margin-bottom:22px;
}
.hero h1 span{color:var(--sky);}
.hero p.lead{
  color: rgba(255,255,255,.85);
  font-size:1.15rem;
  max-width:560px;
  margin-bottom:36px;
}
.hero-cta{display:flex; flex-wrap:wrap; gap:16px;}
.hero-trust{
  display:flex; flex-wrap:wrap; gap:28px;
  margin-top:52px;
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,.18);
}
.hero-trust .item{display:flex; align-items:center; gap:12px; color:var(--white);}
.hero-trust .item i{font-size:1.5rem; color:var(--sky);}
.hero-trust .item strong{display:block; font-size:1.05rem;}
.hero-trust .item span{display:block; font-size:.8rem; color:rgba(255,255,255,.7);}

.hero-scroll{
  position:absolute; bottom:28px; right:50%; transform:translateX(50%);
  color:rgba(255,255,255,.7); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:.78rem;
}
.hero-scroll .line{width:1px; height:34px; background:rgba(255,255,255,.4); position:relative; overflow:hidden;}
.hero-scroll .line::after{
  content:''; position:absolute; top:-100%; right:0; left:0; height:100%;
  background:var(--sky); animation: scrollLine 1.8s infinite ease-in-out;
}
@keyframes scrollLine{ 50%{top:0;} 100%{top:100%;} }

/* Inner page hero (shorter) */
.hero-inner{min-height:56vh; padding-top:140px; padding-bottom:70px;}
.breadcrumb-fj{
  display:flex; gap:8px; align-items:center;
  color:rgba(255,255,255,.75); font-weight:600; font-size:.9rem; margin-bottom:18px;
}
.breadcrumb-fj a{color:rgba(255,255,255,.75); transition:.3s;}
.breadcrumb-fj a:hover{color:var(--sky);}
.breadcrumb-fj i{font-size:.65rem;}

/* =========================================================
   ABOUT
   ========================================================= */
.about-media{position:relative;}
.about-media img{border-radius:var(--radius-lg); box-shadow:var(--shadow-mid);}
.about-badge-float{
  position:absolute; bottom:-28px; left:-28px;
  background:var(--white); border-radius:var(--radius-md);
  padding:22px 26px; box-shadow:var(--shadow-strong);
  display:flex; align-items:center; gap:16px;
}
[dir="rtl"] .about-badge-float{left:auto; right:-28px;}
.about-badge-float .num{font-size:2.1rem; font-weight:900; color:var(--navy);}
.about-badge-float .cap{font-size:.8rem; color:var(--gray-600); font-weight:700;}
.about-list li{
  display:flex; align-items:flex-start; gap:14px; margin-bottom:16px;
}
.about-list i{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:var(--sky-light); color:var(--sky);
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
  margin-top:2px;
}
.about-list strong{display:block; color:var(--navy); font-size:1.02rem;}

/* =========================================================
   SERVICE / FEATURE CARDS
   ========================================================= */
.fj-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:38px 30px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--gray-100);
  height:100%;
  transition: all .4s var(--ease);
  position:relative;
  overflow:hidden;
}
.fj-card::before{
  content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--sky), var(--navy));
  transform:scaleY(0); transform-origin:top; transition:transform .4s var(--ease);
}
.fj-card:hover{transform:translateY(-10px); box-shadow:var(--shadow-strong);}
.fj-card:hover::before{transform:scaleY(1);}
.fj-card .icon-wrap{
  width:66px; height:66px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  background: var(--sky-light); color:var(--sky);
  font-size:1.7rem; margin-bottom:22px;
  transition:.4s var(--ease);
}
.fj-card:hover .icon-wrap{
  background: linear-gradient(135deg, var(--sky), var(--navy));
  color:var(--white);
  transform: rotate(-8deg) scale(1.05);
}
.fj-card h3{font-size:1.2rem; margin-bottom:12px;}
.fj-card p{font-size:.95rem;}
.fj-card .link-more{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:18px; font-weight:800; color:var(--navy); font-size:.9rem;
}
.fj-card .link-more i{transition:.3s; color:var(--sky);}
.fj-card:hover .link-more i{transform:translateX(-4px);}

/* Why choose us — alt cards */
.why-card{text-align:center; padding:34px 20px;}
.why-card .icon-wrap{margin-inline:auto;}

/* =========================================================
   CITY CHIPS
   ========================================================= */
.city-card{
  position:relative; border-radius:var(--radius-md); overflow:hidden;
  height:230px; display:flex; align-items:flex-end; padding:26px;
  background:linear-gradient(135deg, var(--navy), var(--navy-2));
  box-shadow:var(--shadow-soft);
  transition:.4s var(--ease);
}
.city-card::after{
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 30% 20%, rgba(46,155,230,.35), transparent 60%);
}
.city-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-strong);}
.city-card .content{position:relative; z-index:2; color:var(--white);}
.city-card h3{color:var(--white); font-size:1.3rem; margin-bottom:6px;}
.city-card span{color:rgba(255,255,255,.75); font-size:.85rem; display:flex; align-items:center; gap:6px;}
.city-card i.map-icon{
  position:absolute; top:20px; left:20px; z-index:2;
  color:rgba(255,255,255,.5); font-size:1.4rem;
}
[dir="rtl"] .city-card i.map-icon{left:auto; right:20px;}

/* =========================================================
   STATS COUNTER
   ========================================================= */
.stats-strip{
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 100%);
  border-radius:var(--radius-lg);
  padding:56px 30px;
  position:relative; overflow:hidden;
}
.stats-strip::before{
  content:''; position:absolute; width:340px; height:340px; border-radius:50%;
  background:rgba(46,155,230,.18); top:-140px; left:-100px; filter:blur(10px);
}
.stat-item{text-align:center; position:relative; z-index:2;}
.stat-item .num{
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight:900; color:var(--white); display:flex; align-items:center; justify-content:center; gap:4px;
}
.stat-item .label{color:rgba(255,255,255,.75); font-weight:700; margin-top:6px; font-size:.95rem;}
.stat-item i{color:var(--sky); font-size:1.6rem; margin-bottom:10px; display:block;}

/* =========================================================
   PROCESS TIMELINE
   ========================================================= */
.process-track{position:relative;}
.process-track::before{
  content:''; position:absolute; top:44px; right:8%; left:8%; height:2px;
  background: repeating-linear-gradient(to left, var(--sky) 0 10px, transparent 10px 20px);
}
@media(max-width:991px){.process-track::before{display:none;}}
.process-step{text-align:center; position:relative;}
.process-step .step-circle{
  width:88px; height:88px; border-radius:50%;
  background:var(--white); border:2px solid var(--sky-light);
  display:flex; align-items:center; justify-content:center;
  font-size:1.9rem; color:var(--navy);
  margin:0 auto 22px; position:relative; z-index:2;
  box-shadow: var(--shadow-soft);
  transition:.4s var(--ease);
}
.process-step:hover .step-circle{
  background:linear-gradient(135deg, var(--sky), var(--navy)); color:var(--white);
  transform:scale(1.08);
}
.process-step .step-no{
  position:absolute; top:-6px; left:50%; transform:translateX(56%);
  background:var(--navy); color:var(--white); font-weight:900; font-size:.75rem;
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  z-index:3;
}
.process-step h4{font-size:1.05rem; margin-bottom:8px;}
.process-step p{font-size:.88rem;}

/* =========================================================
   GALLERY
   ========================================================= */
.gallery-item{
  position:relative; border-radius:var(--radius-md); overflow:hidden;
  cursor:pointer;
}
.gallery-item img{transition: transform .6s var(--ease); width:100%; height:280px; object-fit:cover;}
.gallery-item .overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,46,82,.85), transparent 60%);
  display:flex; align-items:flex-end; padding:20px;
  opacity:0; transition:.4s var(--ease);
}
.gallery-item .overlay span{color:var(--white); font-weight:800;}
.gallery-item .overlay i{
  position:absolute; top:20px; left:20px; color:var(--white);
  background:rgba(255,255,255,.18); width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
[dir="rtl"] .gallery-item .overlay i{left:auto; right:20px;}
.gallery-item:hover img{transform:scale(1.1);}
.gallery-item:hover .overlay{opacity:1;}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.review-card{
  background:var(--white); border-radius:var(--radius-lg);
  padding:34px; box-shadow:var(--shadow-soft); border:1px solid var(--gray-100);
  height:100%;
}
.review-card .stars{color:#F5B301; font-size:.9rem; margin-bottom:16px;}
.review-card p.quote{color:var(--navy); font-size:1rem; font-weight:600; line-height:1.9; margin-bottom:22px;}
.review-card .reviewer{display:flex; align-items:center; gap:14px;}
.review-card .avatar{
  width:50px; height:50px; border-radius:50%;
  background:linear-gradient(135deg, var(--sky), var(--navy));
  display:flex; align-items:center; justify-content:center;
  color:var(--white); font-weight:800; font-size:1.1rem; flex-shrink:0;
}
.review-card .reviewer strong{display:block; color:var(--navy); font-size:.95rem;}
.review-card .reviewer span{font-size:.8rem; color:var(--gray-600);}
.swiper-pagination-bullet{background:var(--gray-300); opacity:1;}
.swiper-pagination-bullet-active{background:var(--sky); width:24px; border-radius:5px;}

/* =========================================================
   FAQ
   ========================================================= */
.faq-item{
  background:var(--white); border:1px solid var(--gray-100); border-radius:var(--radius-md);
  margin-bottom:14px; overflow:hidden; box-shadow:var(--shadow-soft);
}
.faq-question{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 26px; cursor:pointer; font-weight:800; color:var(--navy); font-size:1.02rem;
}
.faq-question .fa-plus{transition:.35s var(--ease); color:var(--sky); flex-shrink:0;}
.faq-item.active .fa-plus{transform:rotate(135deg);}
.faq-answer{max-height:0; overflow:hidden; transition:max-height .4s var(--ease);}
.faq-answer .inner{padding:0 26px 24px; color:var(--gray-600); font-size:.95rem;}
.faq-item.active{border-color:var(--sky);}

/* =========================================================
   FINAL CTA
   ========================================================= */
.final-cta{
  background: linear-gradient(120deg, var(--navy), var(--navy-2));
  border-radius:var(--radius-lg);
  padding:70px 40px;
  position:relative; overflow:hidden; text-align:center;
}
.final-cta::before, .final-cta::after{
  content:''; position:absolute; border-radius:50%;
  background:rgba(46,155,230,.2);
}
.final-cta::before{width:280px; height:280px; top:-120px; right:-80px;}
.final-cta::after{width:200px; height:200px; bottom:-100px; left:-60px;}
.final-cta h2{color:var(--white); position:relative; z-index:2;}
.final-cta p{color:rgba(255,255,255,.8); position:relative; z-index:2; margin:16px auto 32px; max-width:560px;}
.final-cta .hero-cta{justify-content:center; position:relative; z-index:2;}

/* =========================================================
   INSECT / TYPE CARDS (pest pages)
   ========================================================= */
.pest-type-card{
  background:var(--white); border-radius:var(--radius-md); padding:26px 20px;
  text-align:center; border:1px solid var(--gray-100); box-shadow:var(--shadow-soft);
  transition:.35s var(--ease); height:100%;
}
.pest-type-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-mid); border-color:var(--sky);}
.pest-type-card i{font-size:2rem; color:var(--sky); margin-bottom:14px;}
.pest-type-card h4{font-size:1rem;}

/* =========================================================
   FOOTER
   ========================================================= */
.fj-footer{background:var(--navy); color:rgba(255,255,255,.75); padding-top:80px;}
.fj-footer h5{color:var(--white); font-size:1.1rem; margin-bottom:24px;}
.fj-footer .footer-brand{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
.fj-footer .footer-brand strong{color:var(--white); font-size:1.3rem;}
.fj-footer p{color:rgba(255,255,255,.6); font-size:.92rem;}
.fj-footer ul li{margin-bottom:12px;}
.fj-footer ul li a{color:rgba(255,255,255,.68); font-size:.92rem; transition:.3s; display:inline-flex; align-items:center; gap:8px;}
.fj-footer ul li a:hover{color:var(--sky); transform:translateX(-4px);}
.fj-footer ul li a i{font-size:.7rem; color:var(--sky);}
.footer-contact li{display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.75); font-size:.92rem;}
.footer-contact i{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; color:var(--sky); flex-shrink:0;
}
.social-icons{display:flex; gap:12px; margin-top:22px;}
.social-icons a{
  width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; color:var(--white);
  transition:.3s var(--ease);
}
.social-icons a:hover{background:var(--sky); transform:translateY(-4px);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:56px; padding:24px 0; text-align:center; font-size:.85rem; color:rgba(255,255,255,.55);
}
.footer-bottom a{color:var(--sky); font-weight:700;}

/* =========================================================
   FLOATING BUTTONS
   ========================================================= */
.floating-actions{
  position: fixed;
  bottom: 26px;
  right: 22px; /* ← غيرها لـ right */
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fab{
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--white); font-size:1.5rem;
  box-shadow:var(--shadow-mid);
  transition:.35s var(--ease);
  position:relative;
}
.fab-whatsapp{background:#25D366;}
.fab-call{background:var(--sky);}
.fab:hover{transform:scale(1.1);}
.fab-whatsapp::before{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid #25D366; opacity:.6;
  animation:pulseRing 2s infinite;
}
@keyframes pulseRing{
  0%{transform:scale(.9); opacity:.7;}
  70%{transform:scale(1.35); opacity:0;}
  100%{opacity:0;}
}
.back-to-top{
  position:fixed; bottom:26px; right:22px; z-index:1200;
  width:50px; height:50px; border-radius:50%;
  background:var(--navy); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; box-shadow:var(--shadow-mid);
  opacity:0; visibility:hidden; transform:translateY(20px);
  transition:.4s var(--ease);
}
[dir="rtl"] .back-to-top{right:22px;}
.back-to-top.show{opacity:1; visibility:visible; transform:translateY(0);}
.back-to-top:hover{background:var(--sky);}

/* =========================================================
   LOADER
   ========================================================= */
#fj-loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--navy);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
#fj-loader.loaded{opacity:0; visibility:hidden;}
.loader-emblem{
  width:70px; height:70px; border-radius:18px;
  background:linear-gradient(135deg, var(--sky), var(--white));
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; color:var(--navy);
  animation: loaderPulse 1.1s infinite ease-in-out;
}
@keyframes loaderPulse{
  0%,100%{transform:scale(1); opacity:1;}
  50%{transform:scale(.82); opacity:.65;}
}

/* =========================================================
   MISC / RESPONSIVE
   ========================================================= */
.badge-schema{display:none;}
.breadcrumb-nav{padding:22px 0; font-size:.88rem; color:var(--gray-600); border-bottom:1px solid var(--gray-100);}
.breadcrumb-nav a{color:var(--sky); font-weight:700;}
.breadcrumb-nav i{font-size:.6rem; margin:0 6px; color:var(--gray-300);}

@media (max-width:576px){
  .hero{padding-top:100px;}
  .hero-content{padding:30px 0 70px;}
  .hero-trust{gap:18px;}
  .floating-actions{bottom:18px; left:14px;}
  [dir="rtl"] .floating-actions{left:14px;}
  .fab{width:50px; height:50px; font-size:1.3rem;}
  .back-to-top{bottom:18px; right:14px; width:44px; height:44px;}
  .final-cta{padding:46px 22px;}
  .stats-strip{padding:40px 18px;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}

/* Focus visibility (a11y) */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--sky); outline-offset:2px;
}





/* =========================================================
   qwen
   ========================================================= */
   
   /* =========================================================
🔥 MOBILE RESPONSIVE FIXES - July 2026
========================================================= */

/* 1. Hero Section - تصغير الارتفاع */
@media (max-width: 768px) {
  .hero {
    min-height: auto !important;
    padding-top: 100px !important;
    padding-bottom: 50px !important;
  }
  
  .hero-content {
    padding: 40px 0 60px !important;
  }
  
  .hero h1 {
    font-size: clamp(1.7rem, 6vw, 2.2rem) !important;
    line-height: 1.35 !important;
  }
  
  .hero p.lead {
    font-size: 1rem !important;
    margin-bottom: 28px !important;
  }
  
  /* الـ buttons في hero */
  .hero-cta {
    flex-direction: column !important;
    width: 100%;
    gap: 12px !important;
  }
  
  .hero-cta .btn-fj {
    width: 100% !important;
    padding: 14px 24px !important;
    font-size: .95rem !important;
  }
  
  /* الـ trust items */
  .hero-trust {
    gap: 16px !important;
    margin-top: 36px !important;
    padding-top: 24px !important;
  }
  
  .hero-trust .item {
    flex: 1 1 45% !important;
    font-size: .88rem !important;
  }
  
  .hero-trust .item i {
    font-size: 1.2rem !important;
  }
  
  .hero-trust .item strong {
    font-size: .95rem !important;
  }
  
  .hero-trust .item span {
    font-size: .75rem !important;
  }
}

/* 2. Cards - تصغير الـ padding */
@media (max-width: 768px) {
  .fj-card {
    padding: 26px 22px !important;
  }
  
  .fj-card .icon-wrap {
    width: 56px !important;
    height: 56px !important;
    font-size: 1.4rem !important;
    margin-bottom: 18px !important;
  }
  
  .fj-card h3 {
    font-size: 1.1rem !important;
  }
  
  .fj-card p {
    font-size: .9rem !important;
  }
  
  .fj-card .link-more {
    font-size: .85rem !important;
  }
  
  /* City cards */
  .city-card {
    height: auto !important;
    min-height: 180px !important;
    padding: 22px !important;
  }
  
  .city-card h3 {
    font-size: 1.15rem !important;
  }
  
  /* Review cards */
  .review-card {
    padding: 26px 22px !important;
  }
  
  .review-card p.quote {
    font-size: .95rem !important;
  }
  
  .review-card .avatar {
    width: 44px !important;
    height: 44px !important;
    font-size: 1rem !important;
  }
}

/* 3. Sections - تصغير الـ padding */
@media (max-width: 768px) {
  .section {
    padding: 60px 0 !important;
  }
  
  .section-sm {
    padding: 44px 0 !important;
  }
  
  .section-title {
    font-size: clamp(1.4rem, 5vw, 1.8rem) !important;
  }
  
  .section-sub {
    font-size: .95rem !important;
  }
  
  .section-head {
    margin-bottom: 36px !important;
  }
  
  /* Stats strip */
  .stats-strip {
    padding: 40px 20px !important;
  }
  
  .stat-item .num {
    font-size: clamp(1.9rem, 6vw, 2.4rem) !important;
  }
  
  .stat-item .label {
    font-size: .88rem !important;
  }
  
  /* Process timeline */
  .process-step .step-circle {
    width: 70px !important;
    height: 70px !important;
    font-size: 1.5rem !important;
  }
  
  .process-step h4 {
    font-size: .95rem !important;
  }
  
  .process-step p {
    font-size: .82rem !important;
  }
  
  /* FAQ */
  .faq-question {
    padding: 18px 20px !important;
    font-size: .95rem !important;
  }
  
  .faq-answer .inner {
    padding: 0 20px 20px !important;
    font-size: .9rem !important;
  }
  
  /* Final CTA */
  .final-cta {
    padding: 50px 24px !important;
  }
  
  .final-cta h2 {
    font-size: clamp(1.4rem, 5vw, 1.8rem) !important;
  }
  
  .final-cta p {
    font-size: .95rem !important;
    margin: 14px auto 26px !important;
  }
  
  .final-cta .hero-cta {
    flex-direction: column !important;
  }
  
  .final-cta .hero-cta .btn-fj {
    width: 100% !important;
  }
}

/* 4. About section */
@media (max-width: 768px) {
  .about-badge-float {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 20px auto 0 !important;
    max-width: 280px !important;
    padding: 18px 22px !important;
  }
  
  .about-badge-float .num {
    font-size: 1.7rem !important;
  }
  
  .about-badge-float .cap {
    font-size: .75rem !important;
  }
  
  .about-list li {
    gap: 12px !important;
    margin-bottom: 14px !important;
  }
  
  .about-list i {
    width: 28px !important;
    height: 28px !important;
    font-size: .75rem !important;
  }
  
  .about-list strong {
    font-size: .95rem !important;
  }
}

/* 5. Gallery */
@media (max-width: 768px) {
  .gallery-item img {
    height: 220px !important;
  }
  
  .gallery-item .overlay {
    padding: 16px !important;
  }
  
  .gallery-item .overlay span {
    font-size: .9rem !important;
  }
}

/* 6. Footer */
@media (max-width: 768px) {
  .fj-footer {
    padding-top: 50px !important;
  }
  
  .fj-footer h5 {
    font-size: 1rem !important;
    margin-bottom: 18px !important;
  }
  
  .fj-footer p {
    font-size: .88rem !important;
  }
  
  .fj-footer ul li a {
    font-size: .88rem !important;
  }
  
  .footer-bottom {
    margin-top: 40px !important;
    padding: 20px 0 !important;
    font-size: .8rem !important;
  }
}
/* 7. Floating buttons */
@media (max-width: 576px) {
  .floating-actions {
    bottom: 16px !important;
    left: 12px !important;
    gap: 12px !important;
  }
  
  .fab {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.3rem !important;
  }
  
  .back-to-top {
    bottom: 16px !important;
    left: 12px !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* 8. Navbar على الموبايل */
@media (max-width: 991px) {
  .fj-header .navbar-collapse {
    margin-top: 12px !important;
    padding: 16px !important;
  }
  
  .fj-nav-link {
    padding: 10px 14px !important;
    font-size: .9rem !important;
  }
  
  .header-call-btn {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 12px !important;
    padding: 12px 20px !important;
  }
}

/* 9. شاشات صغيرة جداً */
@media (max-width: 400px) {
  .hero h1 {
    font-size: 1.5rem !important;
  }
  
  .section-title {
    font-size: 1.3rem !important;
  }
  
  .fj-card {
    padding: 22px 18px !important;
  }
  
  .fj-card .icon-wrap {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.2rem !important;
  }
}

/* 10. إصلاح عام للـ containers */
@media (max-width: 768px) {
  .container, .container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* إخفاء زر Back to Top */
.back-to-top {
  display: none !important;
}