:root {
  --nav-bg-color: rgba(251, 250, 247); /* لون خلفية الشريط */
  --bg-color:rgb(234, 231, 224,0.6);  /* لون خلفية الصفحة */
  --main-color: #D49B72;  /* اللون الرئيسي */
  --second-color: #AF8E72;  /* اللون الثانوي */
  --white-color: #fafaf6; /* لون خلفية الاطارات */
  --text-color: rgba(44, 36, 27, 0.9);  /* لون النص */
  --font-title: 'Fustat-Light', serif; /* خط العنوان */
  --font-body: 'Amiri', sans-serif; /* خط النص */
  --box-radius: 1.15rem;  /* انحناء زوايا الصندوق او الزر */
  --box-shadow: 0 0.25rem 1.25rem rgba(129,129,146, 0.3);   /* ظل الصندوق */
}

html {
  scroll-behavior: smooth;
  transition: opacity 0.4s ease;
}

/* Reset بعض التنسيقات الافتراضية للمتصفح */
/* هذا يساعد في جعل التصميم متناسق عبر المتصفحات المختلفة */
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  
}

/*تنسيق عام للصفحات  */
body {
  background-color: var(--bg-color);
  font-family: var(--font-body);
  direction: rtl;
  opacity: 1;
  transition: opacity 0.3s ease;
}


.centered-body {
  display: flex;
  justify-content: center; /* توسيط أفقي */
  align-items: center; /* توسيط رأسي */
  flex-direction: column;
}

.centered-screen {
  min-height: 90vh; /* يضمن أن يكون العنصر يغطي كامل ارتفاع الصفحة */

}

.title {
  font-size: clamp(1.75rem, 2vw, 3rem);
  color: var(--main-color);
  margin-bottom: clamp(1.2rem, 2vw, 2.5rem);
  font-family: var(--font-title);
}


/*اضافة الخطوط */
@font-face {
  font-family: 'Fustat-Light';
  src: url('../fonts/Fustat-Light.ttf');
}

@font-face {
  font-family: 'Amiri';
  src: url('../fonts/Amiri-Regular.ttf');
}