/* Add custom CSS styles below */ 
#whatsapp-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: white;
    font-size: 30px;
    text-align: center;
    line-height: 60px;
    border-radius: 50%;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: 0.3s;
}

#whatsapp-btn:hover {
    background-color: #1EBE5D;
}
/* تغيير التذييل إلى اللون البني  */
.footer, 
.footer-container, 
.footer-main, 
.footer-bottom, 
.site-footer, 
#footer, 
div[class*="footer"] {
    background-color: #5b4431 !important; /* لون بني داكن */
    color:#b57b2e !important;  /* النصوص باللون الذهبي */
}

/* استهداف النصوص والروابط داخل التذييل */
.footer a, 
.footer-container a, 
.footer-main a, 
.footer-bottom a, 
.site-footer a, 
#footer a, 
div[class*="footer"] a {
    color: #b57b2e !important; /* الروابط باللون الذهبي */
    text-decoration: none !important; /* إزالة الخط السفلي */
}

/* استهداف النصوص العادية داخل التذييل */
.footer p, 
.footer-container p, 
.footer-main p, 
.footer-bottom p, 
.site-footer p, 
#footer p, 
div[class*="footer"] p {
    color: #b57b2e !important; /* النصوص باللون الذهبي */
    font-size: 14px; /* حجم النص */
}

/* تخصيص الخطوط في التذييل لتكون أكثر وضوحاً */
.footer p, 
.footer-container p {
    font-family: Arial, sans-serif; /* اختيار الخط المناسب */
}

/* إضافة تأثير عند المرور فوق الروابط */
.footer a:hover, 
.footer-container a:hover, 
.footer-main a:hover, 
.footer-bottom a:hover, 
.site-footer a:hover, 
#footer a:hover, 
div[class*="footer"] a:hover {
    color: #e9991b !important; /* تغيير لون الروابط عند التمرير إلى ذهبي لامع */
}
/* إضافة صورة الشعار كخلفية في الفوتر */
.footer, 
.footer-container, 
.footer-main, 
.footer-bottom, 
.site-footer, 
#footer, 
div[class*="footer"] {
    background-color: #58413a !important; /* اللون البني الغامق */
    color: #e9991b !important; /* اللون الذهبي للنصوص */
    text-align: center; /* توسيط النصوص */
    padding: 50px 10px; /* تباعد داخلي للفوتر */
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 120px auto; /* تعديل حجم الشعار */
}
/* شاشة التحميل */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #58413a; /* اللون البني الغامق */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 1s ease-in-out; /* تأثير التلاشي */
}

/* إضافة الشعار في المنتصف */
body::after {
  content: "";
  background: url('https://i.postimg.cc/vZjXmz5z/1.png') no-repeat center center;
  background-size: contain;
  width: 150px;
  height: 150px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  animation: fadeInOut 1.5s infinite alternate;
}

/* عندما يتم إضافة الكلاس، اختفاء شاشة التحميل */
body.hide-loader::before,
body.hide-loader::after {
  opacity: 0; /* إخفاء شاشة التحميل */
  pointer-events: none; /* منع التفاعل */
}

/* حذف العنصر نهائيًا بعد التلاشي */
body.hide-loader::before {
  display: none;
}اللو البني */
.header {
    background-color: #8B4513; /* اللون البني */
    color: #fff; /* تغيير لون النص إلى الأبيض */
    height: 80px; /* تعديل ارتفاع الشريط العلوي */
    padding: 15px 20px; /* إضافة حواف داخلية */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
body {
    background-color: #E6D5B8;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
}