:root {--bg: #97815f;/* بيج فاتح */--card: #ffffff;--accent: #331c08;/* بني دافئ */--accent-2: #c78727; /* ذهبي خفيف */--muted: #6b5b4a;--radius: 14px;}
* {box-sizing: border-box;}
html, body { height: 100%;}
body {  line-height: 1.6;margin: 0;font-family: 'Amiri', 'Cairo', system-ui, -apple-system, Roboto, Arial, sans-serif;background: var(--bg);color: #2b2b2b;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.site-header {padding: 20px 16px;border-bottom: 5px solid rgba(0, 0, 0, 0.05);background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent);}
.header-inner {padding: 0px 100px;display: flex;justify-content: space-between; /* logo يمين و البحث يسار */gap: 20px;direction: rtl; /* هذا يجعل الترتيب من اليمين إلى اليسار */}
.brand {display: flex;align-items: center;gap: 12px;}
.brand img {display: inline-block;animation: sway 2.5s ease-in-out infinite;width: 150px;height: 150px;border-radius: 50%;object-fit: cover;}
@keyframes sway { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(1deg); } 75% { transform: rotate(-1deg); }}
.brand-text {text-align: right;}
.brand-text h1 {margin: 0;font-size: 28px;line-height: 1.3;color: #2b2b2b;}
.brand-text p {margin: 4px 0 0;font-size: 16px;color: #6b4f2a;}
/* أزرار مواقع التواصل الاجتماعي */
.social-links {display: flex;justify-content:flex-start;gap: 35px;margin-top: 0;margin-left: auto;}
.social-links a {display: inline-flex;align-items: center;justify-content: center;width: 50px;height: 50px;border-radius: 50%;font-size: 22px;color: #fff;transition: transform 0.3s ease, box-shadow 0.3s ease;animation: glowSocial 3s infinite ease-in-out;}
/* تأثير عند المرور */
.social-links a:hover { transform: translateY(-6px) scale(1.05);box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);}
/* ألوان كل منصة */
.facebook { background: #1877f2; }
.whatsapp { background: #25d366; }
.tiktok { background: #000; }
.instagram { background: #e2036b; }
/* توهج نابض */
@keyframes glowSocial { 0% {box-shadow: 0 0 5px rgb(240, 219, 151), 0 0 10px rgb(240, 219, 151);} 50% {box-shadow: 0 0 15px rgba(224, 223, 209, 0.966),0 0 30px rgba(224, 223, 209, 0.966);} 100% {box-shadow: 0 0 5px rgb(240, 219, 151), 0 0 10px rgb(240, 219, 151);}}
/* قسم النص */
.hero-text {display: flex;align-items: center;justify-content: center;gap: 40px;text-align: right;flex-wrap: wrap;padding: 40px 20px;}
.hero-text-content {max-width: 500px;}
.hero-text h2 {margin: 0;font-size: 28px;color: #3a2b20;}
.hero-text p {display: inline-block;animation: sway 2.5s ease-in-out infinite;margin: 8px 0 0;color: #413d3a;}
@keyframes sway {0%, 100% { transform: rotate(0deg); }25% { transform: rotate(1deg); }75% { transform: rotate(-1deg); }}
/* قسم الصور  */
.hero-slideshow {position: relative;width: 400px;height: 400px;flex-shrink: 0;}
.hero-slideshow img {position: absolute;top: 0;left: 0;width: 100%; height: 100%;object-fit: cover;border-radius: 50px;opacity: 0;transition: opacity 1s ease;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);}
.hero-slideshow img.active {opacity: 1;}
/* النص المتحرك */
.container {max-width: 1100px;margin: 28px auto;padding: 0 16px;}
.news-bar {width: 100%;padding: 5px 0;}
.scroll-text {display: inline-block;white-space: nowrap;font-size: 18px;font-weight: 600;color: #3a1e0b; animation: scroll-left 20s linear infinite;}
@keyframes scroll-left {0% { transform: translateX(100%); }100% { transform: translateX(-100%); }}

/* الأزرار الرئيسية */
.main-buttons {margin-top: 30px;display: flex;flex-direction:row;justify-content: center;align-items: flex-start;gap: 40px;flex-wrap: nowrap;/*padding: 30px;*/}
.button-box {text-align: center;flex: 0 0 auto;}
.big-btn {width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;background: none;border: none;cursor: pointer;border-radius: 20px;overflow: hidden;box-shadow: 0 4px 15px rgba(0,0,0,0.2);transition: transform 0.3s ease, box-shadow 0.3s ease;}
.big-btn img {margin:0 auto; display:block;width: 180px;height:180px;/*object-fit: cover;border-radius: 20px;*/transition: transform 0.4s ease;}
.big-btn:hover img {transform: scale(1.08);}
.big-btn:hover { transform: scale(1.05);box-shadow: 0 0 35px rgba(78, 49, 10, 0.7), 0 0 60px rgba(202, 170, 133, 0.5);}
/* footer */
.site-footer {margin-top: 28px;padding: 18px 0;color: var(--muted);font-size: 16px;text-align: center;}
.muted { opacity: 0.8; }



/* =======================
   تحسين المظهر على الهواتف
======================= */
@media (max-width: 768px) {
  body {
    text-align: center;
  }

  main, section, .container, .hero-text, .main-buttons {
    margin: 0 auto;
    max-width: 95%;  /* يمنع المحتوى من التمدد أكثر من اللازم */
  }

  h1, h2, h3, h4, h5, h6, p {
    text-align: center;
  }

  .buttons,
  .main-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .header-inner {
    flex-direction: column;
    align-items: center;
    padding: 10px;
  }

  .brand {
    flex-direction: column;
    text-align: center;
  }

  .brand img {
    width: 100px;
    height: 100px;
  }

  .brand-text h1 {
    font-size: 20px;
  }

  .brand-text p {
    font-size: 14px;
  }

  .social-links {
  display: flex;
  justify-content: center;   /* توسيط أفقي */
  align-items: center;       /* توسيط عمودي */
  gap: 15px;
  margin-top: 15px;
  flex-wrap: wrap;           /* يجعل الأزرار تنزل لسطر جديد إذا لم يوجد مكان */
  width: 100%;
  text-align: center;
}

  .hero-text {
    flex-direction: column;
    gap: 20px;
    padding: 20px 10px;
    text-align: center;
  }

  .hero-text-content {
    max-width: 100%;
  }

  .hero-slideshow {
    width: 250px;
    height: 250px;
  }

  .hero-text h2 {
    font-size: 20px;
  }

  .hero-text p {
    font-size: 14px;
  }

  .main-buttons {
  display: flex;
  flex-direction: row;     /* الأزرار جنب بعض */
  justify-content: center; /* في وسط الصفحة */
  align-items: center;
  flex-wrap: wrap;         /* إذا لم يوجد مكان كافٍ، تنزل للأعلى/السطر التالي */
  gap: 15px;
}


  .big-btn {
    width: 140px;
    height: 140px;
  }

  .big-btn img {
    width: 140px;
    height: 140px;
  }

  .scroll-text {
    font-size: 5px;
  }
}

/* شاشة صغيرة جدًا (هواتف قديمة أو عرض <480px) */
@media (max-width: 480px) {
  .brand-text h1 {
    font-size: 18px;
  }

  .hero-text h2 {
    font-size: 18px;
  }

  .big-btn {
    width: 120px;
    height: 120px;
  }

  .big-btn img {
    width: 120px;
    height: 120px;
  }
}