@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');

:root {
    --background-color-opacity: rgba(0, 0, 0, 0.5);
    /* Color with opacity */
    --background-color: #000000;
    --background-gray: #5c585800;
    /* Background color for the entire website, including individual sections */
    --default-color: #ebe9e2;
    /* Default color used for the majority of the text content across the entire website */
    --primary-color: #215968;
    /* Color for headings, subheadings and title throughout the website */
    --secondary-color: #f9faed;
    /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --light-primary-color: #1edbe3;
    /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
    --contrast-color: #ebe9e2;
    /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
    --font-family: Arial, sans-serif;
}

body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(var(--background-color-opacity), var(--background-color-opacity)), url('./../assets/images/login-bg.png');
    /* تأكد من تحديث المسار إلى مسار الصورة المناسب */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    color: var(--default-color);
}

.login-bg {
    position: fixed;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 0.5;
    /* إضافة الشفافية للصورة الخلفية */
}



/*------------ Login container ------------*/
.box-area {
    width: 70%;
    height: 500px;
    margin: 0 auto;
    /* جعل الصندوق يتمركز في الوسط */
    background-color: rgba(0, 0, 0, 0.7);
    /* خلفية سوداء مع شفافية */
    border-radius: 30px;
    padding: 3px;
    display: flex;
    /* جعل العنصر الرئيسي flexbox */
    justify-content: space-between;
    /* توزيع المساحة بالتساوي بين الصناديق */
    align-items: center;
    /* توسيط المحتوى عموديًا */
}

/*------------ Left box ------------*/
.left-box {
    width: 50%;
    /* تحديد العرض بـ 50% لتوزيع المساحة بالتساوي */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* إخفاء أي جزء من الصورة يتجاوز حدود الصندوق */
    height: 100%;
    /* تأكد من أن ارتفاع الصندوق مغطى بالكامل */
}

.left-box img {
    width: 100%;
    /* جعل الصورة تتناسب مع عرض الصندوق */
    height: auto;
    /* الحفاظ على نسبة العرض إلى الارتفاع */
    max-height: 100%;
    /* تأكد من أن الصورة لا تتجاوز ارتفاع الصندوق */
    object-fit: cover;

}

/*------------ Right box ------------*/
.right-box {
    width: 50%;
    /* تحديد العرض بـ 50% لتوزيع المساحة بالتساوي */
    padding: 40px;
    /* إضافة مساحة داخلية للصندوق */
    background-color: transparent;
    /* إزالة أي خلفية عن الصندوق الأيمن */
}

/*------------ For small screens ------------*/
@media only screen and (max-width: 768px) {
    .box-area {
        width: 90%;
        /* تقليل عرض الصندوق على الشاشات الصغيرة */
        margin: 0 auto;
        /* تأكد من أن الصندوق يتمركز في الوسط */
        flex-direction: column;
        /* تكديس الصناديق فوق بعضها في الشاشات الصغيرة */
    }

    .left-box,
    .right-box {
        width: 100%;
        /* جعل الصناديق تمتد لعرض كامل في الشاشات الصغيرة */
    }
}


/*------------ Custom Placeholder ------------*/

::placeholder {
    font-size: 16px;
}

.rounded-4 {
    border-radius: 20px;
}

.rounded-5 {
    border-radius: 30px;
}

/* تغيير لون زر الـ Login */
.btn-primary {
    background-color: var(--primary-color);
    /* لون الخلفية للزر */
    border-color: var(--primary-color);
    /* لون الحد */
}

.btn-primary:hover {
    background-color: rgba(33, 89, 104, 0.8);
    /* لون مع شفافية لجعله أفتح */
    border-color: rgba(33, 89, 104, 0.8);
    /* نفس التأثير للحدود */
}

.input-group .btn {
    margin-top: 10px;
}