html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: #f0f0f0; /* لون خلفي احتياطي */
}

/* الحاوية الخاصة بالصورة */
.background-container {
    display: flex;
    justify-content: center; /* أفقيًا */
    align-items: flex-start; /* تبدأ من أعلى الصفحة */
    margin-top: 5px; /* مسافة تحت الـ Navbar (يمكن تعديلها حسب ارتفاعه) */
    height: calc(100vh - 70px); /* تغطي باقي الشاشة بعد الـ Navbar */
}

.main-image {
    background-image: url('/images/Background.jpeg');
    background-size: contain;
   /* background-size: cover;*/ /* تغطي كامل العنصر */
    background-position: center; /* تتمركز */
    background-repeat: no-repeat;
    width: 600px; /* عرض ثابت */
    height: 400px; /* ارتفاع ثابت */
    max-width: 90%; /* يتكيف مع الشاشات الصغيرة */
    max-height: 80%; /* يتكيف مع الشاشات الصغيرة */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.form-container {
    display: flex;
    justify-content: center; /* يضع الفورم في المنتصف أفقيًا */
    align-items: center; /* يضع الفورم في المنتصف رأسيًا */
    height: calc(100vh - 70px); /* يترك مساحة للـ Navbar */
    margin-top: 70px; /* المسافة تحت الـ Navbar */
}