/* ===== الثيم ===== */
:root{
    --white:#ffffff;
    --gold:#d4af37;
    --gold-2:#c9a227;
    --black:#0f1115;
    --muted:#6b7280;
    --bg:#ffffff;           /* خلفية بيضاء */
    --border:#eaeaea;
    --radius:16px;
    --shadow:0 8px 28px rgba(17,17,17,.08);
}

body{
    background:var(--bg); color:var(--black);
}


/* start scroll bar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: #f6f6f6;
    box-shadow: 0 0 5px 0px #ddd inset;
}

::-webkit-scrollbar-thumb {
    background-color: #d4af37;
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover{
        background-color: #c09f33 !important;
    }
/* end scroll bar */


.main-section {
    padding: 1.5rem 0;
    min-height: calc(100vh - 65px - 74px);
}

/* ===== أدوات عامة ===== */
.title{font-size:32px; margin:0 0 16px}
.title.center{text-align:center}
.gold{color:var(--gold)}
.btn{display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px; border:1px solid var(--border); cursor:pointer; text-decoration:none}
.btn.gold{background:var(--gold); color:#fff; border-color:transparent}
.btn.dark{background:var(--black); color:#fff; border-color:transparent}
.btn.outline{background:transparent; color:var(--black)}
.btn.lg{padding:14px 22px; font-weight:700}
.btn.full{width:100%; justify-content:center}
.btn:hover{filter:brightness(.95)}

/* ===== الهيدر ===== */
.site-header{position:sticky; top:0; z-index:10; background:var(--white); border-bottom:1px solid var(--border)}
.header-inner{display:flex; align-items:center; gap:16px; height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--black); font-weight:800}
.brand-mark{width:18px; height:18px; border-radius:3px; background:linear-gradient(135deg,var(--gold),#fff); box-shadow:inset 0 0 0 2px rgba(0,0,0,.06)}
.brand-text{letter-spacing:.5px}
.nav{margin-inline-start:auto; display:flex; align-items:center; gap:18px}
.nav a{color:var(--black); text-decoration:none; font-weight:600}
.nav a:hover{color:var(--gold)}
/* ===== السلايدر (CSS) ===== */
.hero {
  background: var(--white);
}

.mySwiper {
  position: relative;
  height: 440px;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* السلايد */
.swiper-slide {
  position: relative;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #fff;
  transition: transform 1s ease, opacity 1s ease;
  overflow: hidden;
}

/* الصورة داخل السلايد */
.swiper-slide img.slide-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* التظليل */
.swiper-slide .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.35));
  z-index: 1;
}

/* النصوص */
.caption {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
  max-width: 750px;
}

.caption h1 {
  font-size: 40px;
  margin: 0 0 10px;
  line-height: 1.3;
}

.caption p {
  max-width: 650px;
  line-height: 1.9;
  margin: 0 0 18px;
  font-size: 16px;
}

/* زر */
.caption .btn {
  padding: 10px 24px;
  font-size: 16px;
  border-radius: 6px;
  width: fit-content;
}

/* أزرار السويبر */
.swiper-button-next,
.swiper-button-prev {
  color: #fff;
  transition: opacity 0.3s;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  opacity: 0.8;
}

/* النقاط */
.swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.7);
  opacity: 1;
}
.swiper-pagination-bullet-active {
  background: var(--gold, #c9a227);
}

/* ===== من نحن ===== */
.grid-2{display:grid; grid-template-columns:1.2fr .8fr; gap:22px; align-items:center}
.about-text p{color:var(--muted); line-height:1.9}
.checks{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px}
.checks i{color:var(--gold)}

/* الرؤية والرسالة */
.vision-mission{margin-top:24px; display:grid; gap:16px}
.vm-box{background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow)}
.vm-box h3{margin:0 0 8px; font-size:20px; display:flex; align-items:center; gap:8px}
.vm-box p{margin:0; color:var(--muted); line-height:1.8}

/* كروت جانبية */
.about-cards{display:grid; gap:12px}
.about-cards .card{background:var(--white); padding:18px; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); text-align:center}
.about-cards .card i{font-size:28px; color:var(--gold)}
.about-cards .card h3{margin:12px 0 8px}

/* ===== الخدمات ===== */
.services .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.service{background:var(--white); border:1px solid var(--border); border-radius:14px; padding:22px; text-align:center; box-shadow:var(--shadow)}
.service i{font-size:32px; color:var(--gold)}
.service h3{margin:12px 0 8px}
.service p{color:var(--muted)}

/* ===== أهمية الحجامة ===== */
.importance .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.panel{background:var(--white); border:1px solid var(--border); border-radius:14px; padding:18px; box-shadow:var(--shadow)}
.panel-head{display:flex; align-items:center; gap:8px; font-weight:700; margin-bottom:8px}
.panel-head i{color:var(--gold)}
.bullets{margin:0; padding:0 18px; line-height:2}

/* ===== دعوة للحجز ===== */
.booking{background:linear-gradient(135deg, #fff, #fff 60%, rgba(212,175,55,.12)); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.booking-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.booking p{color:var(--muted)}

/* ===== تواصل وخريطة ===== */
.contact .contact-card{background:var(--white); border:1px solid var(--border); border-radius:14px; padding:20px; box-shadow:var(--shadow)}
.form{display:grid; gap:12px; margin-top:10px}
.field{display:grid; gap:6px}
.field input,.field select,.field textarea{border:1px solid var(--border); border-radius:12px; padding:12px; outline:none; font-family:inherit}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
.contact-info{display:grid; gap:6px; margin-top:12px; color:var(--muted)}
.map-card{border-radius:14px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border)}
.map-card iframe{display:block; width:100%; height:420px; border:0}

/* ===== تجاوب ===== */
@media (max-width: 1024px){
    .grid-2{grid-template-columns:1fr}
    .services .grid-3,
    .importance .grid-3{grid-template-columns:1fr 1fr}
    .caption h1{font-size:32px}
}
@media (max-width: 640px){
    .services .grid-3,
    .importance .grid-3{grid-template-columns:1fr}
    .slider{height:360px}
    .title{font-size:26px}
    .nav{display:none} /* على الجوال يمكن لاحقًا تحويلها لقائمة منسدلة */
}

/* ===== نبذة (طيبة للحجامة) ===== */
.highlights-grid{align-items:start; gap:18px}
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.ticks li{display:flex; align-items:center; gap:10px}
.ticks i{color:var(--gold)}
.quote-card{background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); color:var(--muted)}
.quote-card i{color:var(--gold); margin-inline-start:6px}

/* ===== الخدمات ===== */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.service{background:var(--white); border:1px solid var(--border); border-radius:14px; padding:22px; text-align:center; box-shadow:var(--shadow)}
.service i{font-size:32px; color:var(--gold)}
.service p{color:var(--muted)}

/* ===== الأمراض ===== */
.disease-grid{align-items:start; gap:18px}
.bulleted{margin:0; padding-inline:18px; line-height:2}
.note-card{background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); color:var(--muted)}
.note-card i{color:var(--gold); margin-inline-start:6px}

/* ===== الفوائد ===== */
.benefits-grid{align-items:stretch; gap:12px}
.benefit{background:var(--white); border:1px solid var(--border); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow); display:flex; align-items:center; gap:10px}
.benefit i{color:var(--gold)}

/* ===== رحلة العلاج ===== */
.journey .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.step{background:var(--white); border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow:var(--shadow); position:relative}
.step .num{position:absolute; top:-10px; inset-inline-start:-10px; background:var(--gold); color:#fff; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:800}

/* ===== دعوة الحجز ===== */
.booking{background:linear-gradient(135deg, #fff, #fff 60%, rgba(212,175,55,.12)); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.booking-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.booking p{color:var(--muted)}

/* ===== تواصل وخريطة ===== */
.contact .contact-card{background:var(--white); border:1px solid var(--border); border-radius:14px; padding:20px; box-shadow:var(--shadow)}
.form{display:grid; gap:12px; margin-top:10px}
.field{display:grid; gap:6pxquote-card}
.field input,.field select,.field textarea{border:1px solid var(--border); border-radius:12px; padding:12px; outline:none; font-family:inherit}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
.contact-info{display:grid; gap:6px; margin-top:12px; color:var(--muted)}
.map-card{border-radius:14px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border)}
.map-card iframe{display:block; width:100%; height:420px; border:0}

/* ===== الفوتر ===== */
.site-footer{background:var(--white); border-top:1px solid var(--border)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:10px}
.footer-inner .social a{color:var(--black); margin-inline-start:10px; text-decoration:none}
.footer-inner .social a:hover{color:var(--gold)}

/* ===== تجاوب ===== */
@media (max-width: 1024px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .journey .steps{grid-template-columns:1fr 1fr}
  .caption h1{font-size:32px}
}
@media (max-width: 640px){
  .grid-3{grid-template-columns:1fr}
  .slider{height:360px}
  .title{font-size:26px}
  .nav{display:none}
  .journey .steps{grid-template-columns:1fr}
}