/* =====================================================
   شركة شوامخ الثراء — التصميم الرسمي
   الألوان: كحلي داكن + ذهبي راقٍ
===================================================== */

:root{
  --navy:#0a1526;
  --navy-2:#101f38;
  --navy-3:#1a345a;

  --gold:#c9a24b;
  --gold-light:#e7cd85;
  --gold-dark:#a3823a;

  --cream:#f6f1e7;
  --ink:#22303f;
  --muted:#5d6b7a;

  --wa:#25d366;
}


/* =====================================================
   إعدادات عامة
===================================================== */

*{
  -webkit-tap-highlight-color:transparent;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Tajawal',sans-serif;
  background:var(--cream);
  color:var(--ink);
  overflow-x:hidden;
}

h1,
h2,
h3,
h4,
h5{
  font-weight:800;
  color:var(--navy);
}

.text-gold{
  color:var(--gold)!important;
}

.bg-navy{
  background:var(--navy)!important;
}

.section{
  padding:96px 0;
}

.section-sm{
  padding:64px 0;
}


/* =====================================================
   العناوين
===================================================== */

.section-label{
  display:inline-block;
  color:var(--gold);
  font-weight:700;
  letter-spacing:.5px;
  font-size:.95rem;
  margin-bottom:.6rem;
}

.section-title{
  font-size:2.2rem;
  margin-bottom:1rem;
}

.section-line{
  width:70px;
  height:4px;
  border-radius:4px;
  margin:0 auto 1.2rem;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--gold-light)
    );
}

.section-line.start{
  margin-inline-start:0;
}


/* =====================================================
   الأزرار
===================================================== */

.btn-gold{
  background:
    linear-gradient(
      135deg,
      var(--gold),
      var(--gold-dark)
    );

  color:#fff;
  border:none;
  font-weight:700;

  padding:.85rem 2rem;
  border-radius:50px;

  box-shadow:
    0 8px 22px rgba(201,162,75,.35);

  transition:.3s;
}

.btn-gold:hover{
  color:#fff;
  transform:translateY(-3px);

  box-shadow:
    0 14px 30px rgba(201,162,75,.45);
}


.btn-outline-gold{
  border:2px solid var(--gold);
  color:var(--gold);
  background:transparent;

  font-weight:700;

  padding:.8rem 2rem;
  border-radius:50px;

  transition:.3s;
}

.btn-outline-gold:hover{
  background:var(--gold);
  color:#fff;
}


.btn-wa{
  background:var(--wa);
  color:#fff;
  border:none;

  font-weight:700;

  padding:.8rem 1.8rem;
  border-radius:50px;

  transition:.3s;

  box-shadow:
    0 8px 20px rgba(37,211,102,.3);
}

.btn-wa:hover{
  color:#fff;
  transform:translateY(-3px);
}


/* =====================================================
   شريط التنقل
===================================================== */

.navbar-sh{
  transition:.4s;
  padding:1rem 0;
}

.navbar-sh .navbar-brand{
  font-weight:800;
  font-size:1.35rem;
  color:#fff;
}

.navbar-sh .navbar-brand span{
  color:var(--gold);
}

.navbar-sh .nav-link{
  color:#e9eef5;
  font-weight:500;
  margin-inline-start:1.1rem;
  position:relative;
}

.navbar-sh .nav-link::after{
  content:'';

  position:absolute;
  bottom:2px;
  right:0;

  width:0;
  height:2px;

  background:var(--gold);

  transition:.3s;
  border-radius:2px;
}

.navbar-sh .nav-link:hover::after,
.navbar-sh .nav-link.active::after{
  width:100%;
}

.navbar-sh .nav-link.active{
  color:var(--gold);
}

.navbar-sh.scrolled{
  background:rgba(11,27,46,.97);

  backdrop-filter:blur(10px);

  box-shadow:
    0 6px 24px rgba(0,0,0,.25);

  padding:.5rem 0;
}

.navbar-toggler{
  border-color:rgba(255,255,255,.4);
}

.navbar-toggler:focus{
  box-shadow:none;
}


/* =====================================================
   الهيدر الرئيسي HERO
===================================================== */

.hero{
  min-height:100vh;

  display:flex;
  align-items:center;

  position:relative;

  background:

    radial-gradient(
      1200px 600px at 85% -10%,
      rgba(201,162,75,.18),
      transparent 60%
    ),

    radial-gradient(
      900px 500px at 10% 110%,
      rgba(201,162,75,.12),
      transparent 55%
    ),

    linear-gradient(
      160deg,
      var(--navy) 0%,
      var(--navy-2) 60%,
      #0e2036 100%
    );

  color:#fff;

  padding:140px 0 90px;

  overflow:hidden;
}


/* زخرفة الخلفية */

.hero::before{
  content:'';

  position:absolute;
  inset:0;

  opacity:.05;
  pointer-events:none;

  background-image:
    repeating-linear-gradient(
      45deg,
      #fff 0 1px,
      transparent 1px 26px
    );
}


/* =====================================================
   نص Hero
===================================================== */

.hero h1{
  color:#fff;

  font-size:
    clamp(
      1.9rem,
      4.2vw,
      3.2rem
    );

  line-height:1.5;
}

.hero .lead{
  color:#c8d4e2;

  font-size:1.15rem;

  line-height:2;

  max-width:720px;
}

.hero-line{
  width:90px;
  height:4px;

  border-radius:4px;

  margin:1.4rem 0;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      transparent
    );
}


/* =====================================================
   دوائر Hero الزخرفية
===================================================== */

.hero-ring{
  position:absolute;

  border:
    1.5px solid
    rgba(201,162,75,.25);

  border-radius:50%;

  pointer-events:none;
}

.hero-ring.r1{
  width:420px;
  height:420px;

  top:-120px;
  left:-120px;
}

.hero-ring.r2{
  width:300px;
  height:300px;

  top:-60px;
  left:-60px;

  border-color:
    rgba(201,162,75,.15);
}

.hero-ring.r3{
  width:520px;
  height:520px;

  bottom:-200px;
  right:-160px;

  border-color:
    rgba(201,162,75,.18);
}


/* =====================================================
   شعار الـ HERO داخل الدائرة
===================================================== */

.hero-logo-circle{

  position:absolute;

  /*
    وضع الدائرة جهة اليسار
  */
  left:1.5%;

  top:30%;

  transform:
    translateY(-50%);

  /*
    حجم الدائرة
  */
  width:260px;
  height:260px;

  border-radius:50%;

  /*
    خلفية داكنة فاخرة
  */
  background:

    radial-gradient(
      circle at 35% 25%,
      rgba(201,162,75,.14),
      transparent 38%
    ),

    radial-gradient(
      circle at 70% 75%,
      rgba(26,52,90,.55),
      transparent 50%
    ),

    #020b18;

  display:flex;

  align-items:center;
  justify-content:center;

  z-index:2;

  overflow:hidden;

  /*
    إطار ذهبي
  */
  border:
    2px solid
    rgba(201,162,75,.55);

  /*
    هالة خارجية
  */
  box-shadow:

    0 0 0 8px
    rgba(201,162,75,.035),

    0 0 35px
    rgba(201,162,75,.12),

    0 25px 60px
    rgba(0,0,0,.5);

  transition:
    transform .5s ease,
    box-shadow .5s ease;
}


/* =====================================================
   الحلقة الداخلية
===================================================== */

.hero-logo-circle::before{

  content:'';

  position:absolute;

  inset:13px;

  border-radius:50%;

  border:
    1px solid
    rgba(201,162,75,.25);

  box-shadow:
    inset 0 0 30px
    rgba(201,162,75,.04);

  pointer-events:none;
}


/* =====================================================
   لمعة داخل الدائرة
===================================================== */

.hero-logo-circle::after{

  content:'';

  position:absolute;

  width:220px;
  height:220px;

  top:-110px;
  left:-70px;

  border-radius:50%;

  background:
    rgba(255,255,255,.035);

  filter:blur(8px);

  pointer-events:none;
}


/* =====================================================
   صورة الشعار داخل الدائرة
===================================================== */

.hero-logo-circle img{

  position:relative;

  z-index:3;

  /*
    تكبير الشعار
  */
  width:86%;
  height:86%;

  object-fit:contain;

  background:transparent;

  /*
    مهم إذا كان الشعار PNG شفاف
  */
  mix-blend-mode:screen;

  filter:

    drop-shadow(
      0 8px 18px
      rgba(0,0,0,.45)
    )

    drop-shadow(
      0 0 15px
      rgba(201,162,75,.16)
    );

  transition:
    transform .45s ease,
    filter .45s ease;
}


/* حركة عند الماوس */

.hero-logo-circle:hover{

  transform:
    translateY(-50%)
    scale(1.02);

  box-shadow:

    0 0 0 8px
    rgba(201,162,75,.05),

    0 0 50px
    rgba(201,162,75,.2),

    0 30px 70px
    rgba(0,0,0,.55);
}

.hero-logo-circle:hover img{

  transform:scale(1.04);

  filter:

    drop-shadow(
      0 10px 20px
      rgba(0,0,0,.5)
    )

    drop-shadow(
      0 0 22px
      rgba(201,162,75,.22)
    );
}


/*
   إخفاء الشعار القديم داخل Hero
*/

.hero .hero-logo{
  display:none;
}


/* =====================================================
   زر النزول
===================================================== */

.hero-scroll{

  position:absolute;

  bottom:26px;
  left:50%;

  transform:
    translateX(-50%);

  color:var(--gold-light);

  font-size:1.4rem;

  animation:
    bounce 2s infinite;

  z-index:5;
}

@keyframes bounce{

  0%,
  100%{
    transform:
      translate(-50%,0);
  }

  50%{
    transform:
      translate(-50%,10px);
  }
}


/* =====================================================
   صفحات الهيدر الداخلية
===================================================== */

.page-hero{

  padding:150px 0 80px;

  color:#fff;

  text-align:center;

  position:relative;

  overflow:hidden;

  background:

    radial-gradient(
      800px 400px at 80% 0%,
      rgba(201,162,75,.16),
      transparent 60%
    ),

    linear-gradient(
      160deg,
      var(--navy),
      var(--navy-2)
    );
}

.page-hero h1{
  color:#fff;
  font-size:2.5rem;
}

.page-hero p{
  color:#c8d4e2;

  max-width:760px;

  margin:0 auto;

  line-height:2;
}

.breadcrumb-sh{
  background:transparent;
  padding:0;
  margin-top:1rem;
}

.breadcrumb-sh a{
  color:var(--gold-light);
  text-decoration:none;
}


/* =====================================================
   لماذا نحن
===================================================== */

.why-card{

  background:#fff;

  border-radius:18px;

  padding:2rem 1.5rem;

  height:100%;

  border:
    1px solid
    rgba(0,0,0,.05);

  box-shadow:
    0 6px 20px
    rgba(11,27,46,.06);

  transition:.35s;

  position:relative;

  overflow:hidden;
}

.why-card::before{

  content:'';

  position:absolute;

  top:0;
  right:0;

  width:100%;
  height:4px;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--gold-light)
    );

  transform:
    scaleX(0);

  transform-origin:right;

  transition:.4s;
}

.why-card:hover{

  transform:
    translateY(-8px);

  box-shadow:
    0 18px 40px
    rgba(11,27,46,.12);
}

.why-card:hover::before{
  transform:scaleX(1);
}

.why-icon{

  width:62px;
  height:62px;

  border-radius:16px;

  display:flex;

  align-items:center;
  justify-content:center;

  background:
    linear-gradient(
      135deg,
      rgba(201,162,75,.15),
      rgba(201,162,75,.05)
    );

  color:var(--gold-dark);

  font-size:1.7rem;

  margin-bottom:1.1rem;
}

.why-card h5{
  margin-bottom:.5rem;
}

.why-card p{

  color:var(--muted);

  font-size:.95rem;

  line-height:1.9;

  margin:0;
}


/* =====================================================
   بطاقات الأقسام الكبيرة
===================================================== */

.dept-card{

  border-radius:22px;

  overflow:hidden;

  background:#fff;

  height:100%;

  box-shadow:
    0 10px 34px
    rgba(11,27,46,.09);

  transition:.4s;

  border:
    1px solid
    rgba(0,0,0,.04);

  position:relative;
}

.dept-card:hover{

  transform:
    translateY(-10px);

  box-shadow:
    0 24px 50px
    rgba(11,27,46,.15);
}

.dept-head{

  padding:
    2.2rem
    1.8rem
    1.6rem;

  color:#fff;

  position:relative;

  overflow:hidden;
}

.dept-head::after{

  content:'';

  position:absolute;

  width:180px;
  height:180px;

  border-radius:50%;

  border:
    22px solid
    rgba(255,255,255,.07);

  top:-70px;
  left:-60px;
}

.dept-head h3{

  color:#fff;

  font-size:1.4rem;

  position:relative;

  z-index:2;
}

.dept-head .dept-icon{

  font-size:2.4rem;

  color:var(--gold-light);

  margin-bottom:.8rem;

  display:block;

  position:relative;

  z-index:2;
}

.dept-body{

  padding:
    1.6rem
    1.8rem
    2rem;
}

.dept-body ul{

  list-style:none;

  padding:0;

  margin:
    0 0
    1.3rem;
}

.dept-body li{

  padding:.45rem 0;

  color:var(--muted);

  font-size:.95rem;

  display:flex;

  align-items:center;

  gap:.6rem;
}

.dept-body li i{

  color:var(--gold);

  font-size:.8rem;
}


/* =====================================================
   آلية العمل
===================================================== */

.steps-wrap{
  position:relative;
}

.step-item{

  background:#fff;

  border-radius:18px;

  padding:
    2rem
    1.4rem;

  text-align:center;

  height:100%;

  box-shadow:
    0 8px 26px
    rgba(11,27,46,.07);

  transition:.35s;

  border:
    1px solid
    rgba(0,0,0,.04);
}

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

.step-num{

  width:56px;
  height:56px;

  border-radius:50%;

  margin:
    0 auto
    1rem;

  display:flex;

  align-items:center;
  justify-content:center;

  background:
    linear-gradient(
      135deg,
      var(--gold),
      var(--gold-dark)
    );

  color:#fff;

  font-weight:800;

  font-size:1.3rem;

  box-shadow:
    0 8px 18px
    rgba(201,162,75,.4);
}

.step-item h6{

  font-weight:700;

  font-size:1.05rem;
}

.step-item p{

  color:var(--muted);

  font-size:.9rem;

  margin:0;
}


/* =====================================================
   النماذج
===================================================== */

.form-card{

  background:#fff;

  border-radius:22px;

  padding:2.4rem;

  box-shadow:
    0 16px 46px
    rgba(11,27,46,.12);

  border-top:
    5px solid
    var(--gold);
}

.form-control,
.form-select{

  border-radius:12px;

  padding:.8rem 1rem;

  border:
    1.5px solid
    #e3e0d6;

  font-family:'Tajawal',sans-serif;
}

.form-control:focus,
.form-select:focus{

  border-color:var(--gold);

  box-shadow:
    0 0 0 .2rem
    rgba(201,162,75,.15);
}

.form-label{

  font-weight:700;

  font-size:.92rem;
}


/* =====================================================
   آراء العملاء
===================================================== */

.testi-card{

  background:#fff;

  border-radius:18px;

  padding:2rem;

  height:100%;

  box-shadow:
    0 8px 26px
    rgba(11,27,46,.06);

  border:
    1px solid
    rgba(0,0,0,.04);
}

.testi-card .stars{

  color:var(--gold);

  margin-bottom:.9rem;
}

.testi-card p{

  color:var(--muted);

  line-height:2;

  font-size:.95rem;
}

.testi-who{

  display:flex;

  align-items:center;

  gap:.8rem;

  margin-top:1.2rem;
}

.testi-ava{

  width:46px;
  height:46px;

  border-radius:50%;

  flex-shrink:0;

  background:
    linear-gradient(
      135deg,
      var(--navy),
      var(--navy-2)
    );

  color:var(--gold-light);

  display:flex;

  align-items:center;
  justify-content:center;

  font-weight:800;
}


/* =====================================================
   السياسات
===================================================== */

.policy-nav .list-group-item{

  border:none;

  border-inline-start:
    3px solid transparent;

  font-weight:600;

  color:var(--muted);

  padding:.8rem 1.1rem;

  cursor:pointer;

  background:transparent;
}

.policy-nav .list-group-item.active{

  background:
    rgba(201,162,75,.1);

  color:var(--gold-dark);

  border-inline-start-color:
    var(--gold);
}

.accordion-item{

  border:
    1px solid
    rgba(0,0,0,.07)!important;

  border-radius:
    14px!important;

  overflow:hidden;

  margin-bottom:1rem;
}

.accordion-button{

  font-weight:800;

  color:var(--navy);

  padding:1.2rem 1.4rem;

  font-family:'Tajawal',sans-serif;
}

.accordion-button:not(.collapsed){

  background:
    rgba(201,162,75,.08);

  color:var(--gold-dark);
}

.accordion-button:focus{

  box-shadow:none;

  border-color:var(--gold);
}

.policy-body h6{

  color:var(--gold-dark);

  font-weight:800;

  margin:
    1.2rem 0 .6rem;
}

.policy-body ul{
  padding-inline-start:1.2rem;
}

.policy-body li{

  margin-bottom:.45rem;

  line-height:1.9;

  color:var(--ink);
}

.policy-note{

  background:
    rgba(201,162,75,.09);

  border-inline-start:
    4px solid
    var(--gold);

  padding:.9rem 1.2rem;

  border-radius:10px;

  color:var(--ink);

  font-size:.95rem;
}


/* =====================================================
   الفوتر
===================================================== */

footer{

  background:
    linear-gradient(
      180deg,
      var(--navy),
      #081222
    );

  color:#b9c6d4;

  padding:
    70px 0 0;
}

footer h6{

  color:var(--gold-light);

  font-weight:800;

  margin-bottom:1.2rem;

  font-size:1.05rem;
}

footer a{

  color:#b9c6d4;

  text-decoration:none;

  transition:.3s;

  display:block;

  margin-bottom:.6rem;
}

footer a:hover{

  color:var(--gold);

  padding-inline-start:5px;
}

footer .contact-line{

  display:flex;

  gap:.7rem;

  margin-bottom:.9rem;

  align-items:flex-start;
}

footer .contact-line i{

  color:var(--gold);

  margin-top:3px;
}

.footer-bottom{

  border-top:
    1px solid
    rgba(255,255,255,.08);

  margin-top:3rem;

  padding:1.3rem 0;

  text-align:center;

  font-size:.9rem;

  color:#8b9aab;
}

.footer-logo{

  font-size:1.5rem;

  font-weight:800;

  color:#fff;
}

.footer-logo span{
  color:var(--gold);
}


/* =====================================================
   شعار النافبار
===================================================== */

.logo-badge{

  border-radius:14px;

  padding:3px 10px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  background:transparent;

  box-shadow:none;
}

.logo-badge img{

  height:74px;

  width:auto;

  display:block;

  object-fit:contain;
}

.navbar-brand{

  padding-top:0;

  padding-bottom:0;
}


/* =====================================================
   الشعار القديم للـ Hero
===================================================== */

.hero-logo{
  padding:10px 28px;
  border-radius:18px;
}

.hero-logo img{
  height:80px;
}


/* =====================================================
   شعار الفوتر
===================================================== */

.footer-logo-card{

  background:#fff;

  border-radius:16px;

  padding:14px 26px;

  display:inline-block;

  box-shadow:
    0 8px 24px
    rgba(0,0,0,.3);
}

.footer-logo-card img{

  height:88px;

  width:auto;

  display:block;
}


/* =====================================================
   زر الواتساب العائم
===================================================== */

.wa-float{

  position:fixed;

  bottom:24px;
  right:24px;

  z-index:1050;

  width:60px;
  height:60px;

  border-radius:50%;

  background:var(--wa);

  display:flex;

  align-items:center;
  justify-content:center;

  color:#fff;

  font-size:1.9rem;

  box-shadow:
    0 10px 26px
    rgba(37,211,102,.45);

  transition:.3s;

  text-decoration:none;
}

.wa-float:hover{

  color:#fff;

  transform:scale(1.1);
}

.wa-float::before{

  content:'';

  position:absolute;

  inset:0;

  border-radius:50%;

  background:var(--wa);

  animation:
    waPulse 2s infinite;

  z-index:-1;

  opacity:.5;
}

@keyframes waPulse{

  0%{
    transform:scale(1);
    opacity:.5;
  }

  100%{
    transform:scale(1.7);
    opacity:0;
  }
}


/* =====================================================
   CTA
===================================================== */

.cta-band{

  background:

    radial-gradient(
      700px 300px at 90% 0%,
      rgba(201,162,75,.22),
      transparent 60%
    ),

    linear-gradient(
      135deg,
      var(--navy),
      var(--navy-2)
    );

  border-radius:26px;

  color:#fff;

  padding:
    3.5rem 2.5rem;

  position:relative;

  overflow:hidden;
}

.cta-band::after{

  content:'';

  position:absolute;

  width:260px;
  height:260px;

  border-radius:50%;

  border:
    30px solid
    rgba(201,162,75,.1);

  bottom:-120px;
  left:-80px;
}

.cta-band h3{

  color:#fff;

  font-size:1.8rem;
}


/* =====================================================
   قوائم الخدمات الداخلية
===================================================== */

.svc-item{

  background:#fff;

  border-radius:16px;

  padding:1.6rem;

  height:100%;

  border:
    1px solid
    rgba(0,0,0,.05);

  box-shadow:
    0 6px 18px
    rgba(11,27,46,.05);

  transition:.3s;
}

.svc-item:hover{

  transform:
    translateY(-6px);

  box-shadow:
    0 16px 36px
    rgba(11,27,46,.1);
}

.svc-item h6{

  font-weight:800;

  color:var(--navy);

  margin-bottom:.9rem;

  display:flex;

  align-items:center;

  gap:.6rem;
}

.svc-item h6 i{
  color:var(--gold);
}

.svc-item ul{

  list-style:none;

  padding:0;

  margin:0;
}

.svc-item li{

  color:var(--muted);

  font-size:.92rem;

  padding:.3rem 0;

  display:flex;

  gap:.5rem;

  align-items:center;
}

.svc-item li i{

  color:var(--gold);

  font-size:.7rem;
}

.svc-item > p{

  color:var(--muted);

  font-size:.94rem;

  line-height:1.9;
}


/* =====================================================
   البرامج
===================================================== */

.program-block{

  background:#fff;

  border-radius:20px;

  padding:2.2rem;

  margin-bottom:1.8rem;

  border:
    1px solid
    rgba(0,0,0,.05);

  box-shadow:
    0 8px 28px
    rgba(11,27,46,.06);
}

.program-block h4{

  color:var(--navy);

  display:flex;

  align-items:center;

  gap:.7rem;

  margin-bottom:1rem;
}

.program-block h4 i{
  color:var(--gold);
}

.program-block p{

  color:var(--muted);

  line-height:2;
}

.program-tags{

  display:flex;

  flex-wrap:wrap;

  gap:.5rem;

  margin:.8rem 0;
}

.program-tags span{

  background:
    rgba(201,162,75,.1);

  color:var(--gold-dark);

  font-weight:600;

  padding:.35rem 1rem;

  border-radius:50px;

  font-size:.85rem;
}

.program-results{

  background:
    rgba(201,162,75,.07);

  border-radius:12px;

  padding:
    1.1rem
    1.3rem;

  margin-top:1rem;
}

.program-results h6{

  color:var(--gold-dark);

  font-weight:800;

  margin-bottom:.5rem;
}

.program-results ul{

  margin:0;

  padding-inline-start:1.1rem;
}

.program-results li{

  color:var(--ink);

  font-size:.93rem;

  padding:.2rem 0;
}


/* =====================================================
   التجاوب — أجهزة التابلت
===================================================== */

@media (max-width:1199px){

  .hero-logo-circle{

    left:-20px;

    width:320px;
    height:320px;
  }

  .hero-logo-circle img{

    width:86%;
    height:86%;
  }

}


/* =====================================================
   التجاوب — الجوال والتابلت
===================================================== */

@media (max-width:991px){

  .section{
    padding:64px 0;
  }

  .navbar-sh .nav-link{

    margin-inline-start:0;

    padding:.6rem 0;
  }

  .hero{

    padding:
      120px
      0
      70px;

    min-height:auto;
  }


  /*
     في الجوال تصبح الدائرة جزءاً من المحتوى
     وتظهر فوق النص
  */

  .hero-logo-circle{

    position:relative;

    left:auto;
    top:auto;

    transform:none;

    width:280px;
    height:280px;

    margin:
      0 auto
      40px;
  }

  .hero-logo-circle:hover{

    transform:
      scale(1.02);
  }

  .hero-logo-circle img{

    width:86%;
    height:86%;
  }

  .hero h1{

    font-size:
      clamp(
        1.8rem,
        6vw,
        2.6rem
      );
  }

  .hero .lead{

    font-size:1rem;
  }

}


/* =====================================================
   الجوال الصغير
===================================================== */

@media (max-width:576px){

  .section{
    padding:55px 0;
  }

  .section-title{
    font-size:1.8rem;
  }


  /* الدائرة */

  .hero-logo-circle{

    width:220px;
    height:220px;

    margin-bottom:30px;
  }

  .hero-logo-circle::before{
    inset:9px;
  }

  .hero-logo-circle img{

    width:88%;
    height:88%;
  }


  /* الهيدر */

  .hero{

    padding:
      105px
      0
      60px;
  }

  .hero h1{

    font-size:1.8rem;

    line-height:1.6;
  }

  .hero .lead{

    font-size:.98rem;

    line-height:1.9;
  }


  /* الأزرار */

  .hero .btn{

    width:100%;

    text-align:center;
  }


  /* الواتساب */

  .wa-float{

    width:54px;
    height:54px;

    right:18px;
    bottom:18px;

    font-size:1.7rem;
  }


  /* النموذج */

  .form-card{

    padding:1.5rem;
  }


  /* CTA */

  .cta-band{

    padding:
      2.5rem
      1.4rem;
  }

  .cta-band h3{

    font-size:1.45rem;
  }

}


/* =====================================================
   الشاشات الكبيرة جداً
===================================================== */

@media (min-width:1400px){

  .hero-logo-circle{

    left:3%;

    width:390px;
    height:390px;
  }

  .hero-logo-circle img{

    width:88%;
    height:88%;
  }

}

/* =====================================================
   إضافات التفاعلية والصور (تحديث 2026)
===================================================== */

/* ظهور العناصر عند التمرير */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s ease,transform .7s ease;
}

.reveal.show{
  opacity:1;
  transform:none;
}


/* عنصر عائم */
@keyframes floaty{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}

.float-sh{
  animation:floaty 5s ease-in-out infinite;
}


/* إطار الصور الفاخر */
.img-frame{
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(11,27,46,.18);
  position:relative;
}

.img-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s ease;
}

.img-frame:hover img{
  transform:scale(1.06);
}

.img-frame::after{
  content:'';
  position:absolute;
  inset:0;
  border:2px solid rgba(201,162,75,.45);
  border-radius:22px;
  pointer-events:none;
}


/* شريط الإحصائيات */
.stats-band{
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  color:#fff;
  border-radius:24px;
  padding:3rem 2rem;
  box-shadow:0 20px 50px rgba(11,27,46,.2);
  position:relative;
  overflow:hidden;
}

.stats-band::before{
  content:'';
  position:absolute;
  width:220px;
  height:220px;
  border-radius:50%;
  border:30px solid rgba(201,162,75,.08);
  top:-90px;
  left:-70px;
}

.stats-band .num{
  font-size:2.6rem;
  font-weight:800;
  color:var(--gold-light);
}

.stats-band .lbl{
  color:#c8d4e2;
  font-weight:500;
}


/* هيدر الصفحات مع صورة خلفية */
.page-hero-img{
  background:
    linear-gradient(rgba(10,21,38,.72),rgba(16,31,56,.88)),
    url('../assets/img/digital-services.png')
    center/cover no-repeat !important;
}


/* بطاقات الخدمات — تفاعلية */
.svc-item{
  transition:.35s;
  border-radius:16px;
}

.svc-item:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 38px rgba(11,27,46,.13);
}


/* =====================================================
   سلايدر آراء العملاء
===================================================== */

.testi-slider{
  position:relative;
  overflow:hidden;
}

.testi-track{
  display:flex;
  transition:transform .55s ease;
}

.testi-slide{
  flex:0 0 100%;
  padding:6px;
}

@media(min-width:768px){
  .testi-slide{flex:0 0 50%;}
}

@media(min-width:992px){
  .testi-slide{flex:0 0 33.333%;}
}

.testi-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  margin-top:1.4rem;
}

.testi-nav button{
  width:44px;
  height:44px;
  border-radius:50%;
  border:2px solid var(--gold);
  background:#fff;
  color:var(--gold-dark);
  transition:.3s;
}

.testi-nav button:hover{
  background:var(--gold);
  color:#fff;
}

.testi-dots{
  display:flex;
  gap:.5rem;
}

.testi-dots span{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ddd3b4;
  cursor:pointer;
  transition:.3s;
}

.testi-dots span.active{
  background:var(--gold);
  transform:scale(1.3);
}


/* =====================================================
   تحديث 2026 — تحريك وألوان البطاقات في كل الموقع
===================================================== */

/* ---------- 1) لمعة ذهبية متحركة عند المرور ---------- */
.why-card,
.dept-card,
.step-item,
.svc-item,
.testi-card,
.form-card{
  position:relative;
  overflow:hidden;
}

.why-card::after,
.dept-card::after,
.step-item::after,
.svc-item::after,
.testi-card::after,
.form-card::after{
  content:'';
  position:absolute;
  top:0;
  right:-80%;
  width:55%;
  height:100%;
  background:linear-gradient(
    105deg,
    transparent,
    rgba(201,162,75,.16),
    transparent
  );
  transform:skewX(-20deg);
  transition:none;
  pointer-events:none;
}

.why-card:hover::after,
.dept-card:hover::after,
.step-item:hover::after,
.svc-item:hover::after,
.testi-card:hover::after,
.form-card:hover::after{
  animation:cardShine .9s ease forwards;
}

@keyframes cardShine{
  from{right:-80%;}
  to{right:130%;}
}


/* ---------- 2) حدود متدرجة ملونة عند المرور ---------- */
.why-card,
.step-item,
.svc-item,
.testi-card{
  border:2px solid transparent;
  background-clip:padding-box;
  transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}

.why-card:hover{
  border-color:rgba(201,162,75,.55);
  box-shadow:0 18px 44px rgba(201,162,75,.22);
}

.step-item:hover{
  border-color:rgba(26,52,90,.45);
  box-shadow:0 18px 44px rgba(26,52,90,.18);
}

.svc-item:hover{
  border-color:rgba(201,162,75,.5);
  box-shadow:0 16px 38px rgba(201,162,75,.2);
}

.testi-card:hover{
  border-color:rgba(201,162,75,.45);
  box-shadow:0 16px 40px rgba(201,162,75,.18);
}


/* ---------- 3) أيقونات متدرجة الألوان ---------- */
.why-icon{
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#fff;
  box-shadow:0 8px 20px rgba(201,162,75,.4);
  transition:transform .4s ease;
}

.why-card:hover .why-icon,
.step-item:hover .step-num{
  transform:rotate(-8deg) scale(1.1);
}

.step-num{
  transition:transform .4s ease;
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 45%,var(--gold-dark));
  background-size:200% 200%;
  animation:stepGlow 3s ease infinite;
}

@keyframes stepGlow{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}


/* ---------- 4) رأس الأقسام (dept-head) بتدرج ذهبي ملون ---------- */
.dept-head{
  background:linear-gradient(135deg,var(--navy-3),var(--navy) 60%) !important;
  transition:background .4s ease;
}

.dept-card:hover .dept-head{
  background:linear-gradient(135deg,var(--gold-dark),var(--navy-3) 70%) !important;
}

.dept-card:hover .dept-icon{
  animation:iconPulse .6s ease;
}

@keyframes iconPulse{
  0%{transform:scale(1);}
  40%{transform:scale(1.25) rotate(-6deg);}
  100%{transform:scale(1);}
}


/* ---------- 5) نجوم الآراء — وميض ذهبي ---------- */
.testi-card .stars{
  letter-spacing:3px;
  text-shadow:0 0 12px rgba(201,162,75,.55);
}

.testi-ava{
  background:linear-gradient(135deg,var(--gold),var(--navy-3)) !important;
  transition:transform .4s ease;
}

.testi-card:hover .testi-ava{
  transform:scale(1.12) rotate(6deg);
}


/* ---------- 6) النماذج — حدود متوهجة ---------- */
.form-card{
  border-top:5px solid var(--gold) !important;
  transition:box-shadow .4s ease;
}

.form-card:hover{
  box-shadow:0 20px 55px rgba(201,162,75,.18);
}

.form-control:focus,
.form-select:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 .2rem rgba(201,162,75,.2), 0 0 18px rgba(201,162,75,.25);
}


/* ---------- 7) عناصر القائمة الجانبية والأكورديون ---------- */
.accordion-button:not(.collapsed){
  background:linear-gradient(90deg,rgba(201,162,75,.14),rgba(201,162,75,.05)) !important;
}

.policy-nav .list-group-item{
  transition:.3s;
  border-radius:10px;
}

.policy-nav .list-group-item:hover{
  background:rgba(201,162,75,.08);
  padding-inline-start:1.4rem;
}


/* ---------- 8) روابط الفوتر — توهج ذهبي ---------- */
footer a{
  position:relative;
  width:fit-content;
}

footer a::after{
  content:'';
  position:absolute;
  bottom:0;
  right:0;
  width:0;
  height:1.5px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold));
  transition:width .35s ease;
}

footer a:hover::after{
  width:100%;
}


/* ---------- 9) حركة دخول ناعمة للبطاقات عند تحميل الصفحة ---------- */
@keyframes cardIn{
  from{opacity:0;transform:translateY(24px) scale(.97);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

.why-card,
.dept-card,
.step-item,
.svc-item,
.testi-card{
  animation:cardIn .6s ease both;
}


/* ---------- 10) تدرج نصي ذهبي للعناوين البارزة ---------- */
.section-title{
  background:linear-gradient(135deg,var(--navy) 40%,var(--gold-dark));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}