:root {
    --black-color: #000;
    --white-color: #fff;
    --rgba-black-color: #ffffff14;
    --orang-color: #e68900;
    --orang-color-hover: #e68a00be;
}

* {
    font-family: 'Arial', sans-serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;

}

img {
    width: 100%;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-shadow-bottom {
    box-shadow: 0 8px 14px -12px var(--black-color);
}

/* start nav */
header {
    width: 100%;
    display: flex;
    justify-content: center;
}

.navbar {
    position: fixed;
    width: 100%;
    z-index: 100;
    transition: 0.3s ease, padding 0.3s ease;
    background-color: rgba(194, 194, 194, 0.396);
    backdrop-filter: blur(10px);
}

.navbar.scrolled {
    border-radius: 28px;
    width: 75%;
    padding: 5px 0;
    margin: 20px 0 0 0;
}

.navbar.not-scroll {
    padding: 10px 0;

}

.navbar .navbar-toggler {
    border: none;
}

.navbar .navbar-toggler:hover,
.navbar .navbar-toggler:focus {
    background-color: transparent;
    box-shadow: none;
}

.navbar-toggler[aria-expanded="true"] {
    border: .8px solid #000000;
}

/* end nav */
/* start hero */
.hero {
    box-shadow: 0 12px 24px -10px black;
}

/* end hero */
/* start about */

.about .text-about-answer {
    max-height: 430px;
    box-shadow: inset 0 0 13px -7px black;
}


.about .nav-link {
    border-left: 1px solid var(--orang-color);
    color: var(--black-color);
}

.about .nav-link :hover {
    color: var(--white-color);
    background-color: var(--orang-color);
}

.about .nav-link:focus {
    color: var(--white-color);
}

.about .nav-link.active {
    background-color: var(--orang-color);

}

@media (max-width: 445px) {
    .about nav {
        padding: 0;
    }

    .about nav a {
        padding: 5px;
    }

    .about .text-about-cuis {
        font-size: .9rem;
    }
}

/* end about */

.portfolio {
    /* .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    } */

    .swiper {
        width: 100%;
        height: 400px;
        position: relative;

    }


}

.swiper img {
    width: 100%;
    height: auto;
    object-fit: cover;

}

.mySwiper-2 img {
    height: 70px;
    width: 100%;
}

.text-overlay {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 5px;
    text-align: left;
}

.text-overlay h4 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
}

.text-overlay p {
    margin: 5px 0 0;
    font-size: 14px;
}


@media (max-width: 768px) {
    .portfolio {
        .swiper {
            height: 200px;
        }

        .text-overlay h4 {
            font-size: 14px;
        }

        .text-overlay p {
            font-size: 10px;
        }

    }

}

@media (max-width: 480px) {
    .portfolio {

        .swiper {
            height: 150px;
        }

        .text-overlay h4 {
            margin: 0;
            font-size: 11px;
        }

        .text-overlay p {
            font-size: 7px;
        }
    }

}



/* start scroll bar */
.scroll-bar {}

/* end scroll bar */
/* start comment */
.container-img-comment img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--orang-color);

}



/* تعريف حركة fadeInUp */
@keyframes fadeInUp {
    to {
        opacity: 1;
        /* جعل الشهادة مرئية تمامًا عند نهاية الأنيميشن */
        transform: translateY(0);
        /* إعادة الشهادة إلى موقعها الأصلي (إلغاء التحريك للأسفل) */
    }
}

/* استجابة التصميم لأجهزة الشاشات الصغيرة (أقل من 768px) */
@media screen and (max-width: 768px) {

    /* تعديل تنسيق حاوية الشهادات */
    .testimonial-container {
        flex-direction: column;
        /* تغيير ترتيب الشهادات من أفقي إلى عمودي في الشاشات الصغيرة */
        align-items: center;
        /* محاذاة الشهادات إلى المنتصف */
    }

    /* تعديل عرض الشهادات في الشاشات الصغيرة */

}

/* تنسيق الفوتر */
footer {
    background-color: #333;
    /* تعيين خلفية الفوتر إلى اللون الرمادي الداكن */
    color: #fff;
    /* تعيين لون النص في الفوتر إلى الأبيض */
    text-align: center;
    /* محاذاة النصوص في الفوتر إلى المركز */
    padding: 15px 0;
    /* إضافة حشوة داخلية في الفوتر بمقدار 15px من الأعلى والأسفل */
}



/* تنسيق قسم الحجز */
.booking {
    background-color: #f1f1f1;
    text-align: center;
    box-shadow: 0 0px 27px -12px var(--black-color);
}

/* تنسيق العنوان h2 داخل قسم الحجز */
.booking h2 {
    font-size: 2.5rem;
    /* تعيين حجم الخط للعناوين داخل القسم */
    color: #333;
    /* تعيين لون النص إلى اللون الرمادي الداكن */
    margin-bottom: 40px;
    /* إضافة مسافة أسفل العنوان لفصل العنوان عن باقي المحتوى */
}

/* تنسيق نموذج الحجز */
.form-contact {
    background-color: white;
    /* تعيين خلفية النموذج إلى اللون الأبيض */
    padding: 30px;
    /* إضافة حشوة داخلية بمقدار 30px حول المحتوى */
    border-radius: 8px;
    /* إضافة حواف دائرية للنموذج */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* إضافة ظل خفيف حول النموذج لجعلها تبدو عائمة */
    max-width: 600px;
    /* تعيين أقصى عرض للنموذج إلى 600px */
    margin: 0 auto;
    /* محاذاة النموذج إلى المنتصف باستخدام المسافة التلقائية من الجانبين */
    text-align: left;
    /* محاذاة النصوص داخل النموذج إلى اليسار */
}

/* تنسيق مجموعة الحقول داخل النموذج */
.form-group {
    margin-bottom: 20px;
    /* إضافة مسافة أسفل كل حقل */
}

/* تنسيق التسميات (labels) داخل النموذج */
label {
    font-size: 1.1rem;
    /* تعيين حجم الخط للتسميات */
    color: #555;
    /* تعيين لون النص إلى اللون الرمادي المتوسط */
    margin-bottom: 5px;
    /* إضافة مسافة أسفل التسميات */
    display: block;
    /* جعل التسميات تأخذ سطرًا كاملًا */
}

/* تنسيق الحقول (input, select) داخل النموذج */
input,
select {
    width: 100%;
    /* جعل الحقول تأخذ العرض الكامل للنموذج */
    padding: 10px;
    /* إضافة حشوة داخلية بمقدار 10px حول النصوص المدخلة */
    font-size: 1rem;
    /* تعيين حجم الخط داخل الحقول */
    border: 1px solid #ddd;
    /* تعيين حد خفيف حول الحقول باللون الرمادي الفاتح */
    border-radius: 5px;
    /* إضافة حواف دائرية للحقول */
    outline: none;
    /* إزالة الإطار الافتراضي عند التركيز على الحقول */
    transition: border-color 0.3s;
    /* إضافة تأثيرات انتقالية لتغيير لون الحدود عند التركيز */
}

/* تغيير لون الحدود عند التركيز على الحقول (input, select) */
input:focus,
select:focus {
    border-color: var(--orang-color);
    /* تغيير لون الحدود إلى البرتقالي عند التركيز */
}

/* تنسيق زر الإرسال */
.submit-btn {
    background-color: var(--orang-color);
    /* تعيين خلفية الزر إلى اللون البرتقالي */
    color: white;
    /* تعيين لون النص داخل الزر إلى الأبيض */
    border: none;
    /* إزالة الحدود الافتراضية حول الزر */
    padding: 12px 20px;
    /* إضافة حشوة داخلية للزر بمقدار 12px من الأعلى والأسفل و 20px من الجانبين */
    font-size: 1.1rem;
    /* تعيين حجم الخط داخل الزر */
    border-radius: 5px;
    /* إضافة حواف دائرية للزر */
    cursor: pointer;
    /* تغيير شكل المؤشر إلى اليد عند التمرير فوق الزر */
    transition: background-color 0.3s;
    /* إضافة تأثيرات انتقالية لتغيير خلفية الزر عند التمرير */
}



/* تأثير التمرير على زر الإرسال */
.submit-btn:hover {
    background-color: var(--orang-color-hover);
    color: var(--white-color);
}

.accordion-button:not(.collapsed) {
    background-color: var(--orang-color-hover);
    color: var(--white-color);
}

.accordion-button {
    color: var(--white-color);
}

/* تنسيق رسالة التأكيد بعد الحجز */
.confirmation-message {
    color: var(--white-color);
    background-color: var(--orang-color);
}

/* استجابة التصميم لأجهزة الشاشات الصغيرة (أقل من 768px) */
@media screen and (max-width: 768px) {

    /* تقليص حجم الخط للعناوين في الشاشات الصغيرة */
    .booking h2 {
        font-size: 2rem;
        /* تقليص حجم الخط إلى 2rem */
    }

    /* تقليص حجم الخط لزر الإرسال في الشاشات الصغيرة */
    .submit-btn {
        font-size: 1rem;
        /* تقليص حجم الخط إلى 1rem */
    }

    /* تقليص حجم الخط للحقلين (input, select) في الشاشات الصغيرة */
    .form-group input,
    .form-group select {
        font-size: 0.95rem;
        /* تقليص حجم الخط إلى 0.95rem */
    }
}

/* تنسيق قسم الغرف المتاحة */

.accordion-button {
    background-color: var(--orang-color);
}

.accordion-button:focus {
    box-shadow: none;

}

/* تنسيق قائمة تسعيرات الغرف */
.room-pricing-list {
    display: flex;
    /* استخدام Flexbox لترتيب الغرف بشكل أفقي */
    justify-content: space-around;
    /* توزيع الغرف بالتساوي عبر المساحة المتاحة */
    flex-wrap: wrap;
    /* السماح للعناصر بالانتقال إلى السطر التالي عند الضيق */
    gap: 20px;
    /* إضافة مسافة بين العناصر */
}

/* تنسيق كل غرفة في قائمة التسعير */
.room-pricing {
    background-color: #fff;
    /* تعيين خلفية الغرفة إلى اللون الأبيض */
    border: 2px solid #ddd;
    /* إضافة حد رمادي حول الغرفة */
    border-radius: 10px;
    /* إضافة حواف دائرية للغرفة */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* إضافة ظل خفيف حول الغرفة لجعلها تبدو عائمة */
    padding: 20px;
    /* إضافة حشوة داخلية بمقدار 20px حول محتوى الغرفة */
    max-width: 300px;
    /* تحديد الحد الأقصى لعرض الغرفة بـ 300px */
    text-align: center;
    /* محاذاة النصوص داخل الغرفة إلى المركز */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* إضافة تأثيرات انتقالية لتغيير الحركة والظل عند التمرير */
}

/* تأثير التمرير على العنصر .room-pricing (الغرفة) */
.room-pricing:hover {
    transform: translateY(-10px);
    /* عند التمرير فوق الغرفة، يتم تحريكها للأعلى بمقدار 10px */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    /* إضافة ظل أكبر وأكثر وضوحًا حول الغرفة عند التمرير */
}

/* تنسيق صورة الغرفة */
.room-image {
    width: 100%;
    /* تعيين عرض الصورة ليأخذ العرض الكامل للعنصر الحاوي */
    height: auto;
    /* تعيين الارتفاع ليكون تلقائيًا وفقًا للعرض لحفاظ على نسبة العرض إلى الارتفاع */
    border-radius: 10px;
    /* إضافة حواف دائرية للصورة لجعلها أكثر نعومة */
    transition: opacity 0.3s ease;
    /* إضافة تأثير انتقالي لتغيير الشفافية (الopacity) بشكل سلس */
}

/* تنسيق عنوان الغرفة داخل العنصر .room-pricing */
.room-pricing h3 {
    font-size: 1.5rem;
    /* تعيين حجم الخط للعنوان داخل الغرفة */
    color: #333;
    /* تعيين لون النص إلى اللون الرمادي الداكن */
    margin-top: 15px;
    /* إضافة مسافة فوق العنوان لفصل النص عن باقي المحتوى */
}

/* تنسيق الفقرة (الوصف) داخل العنصر .room-pricing */
.room-pricing p {
    font-size: 1rem;
    /* تعيين حجم الخط للفقرة */
    color: #666;
    /* تعيين لون النص إلى الرمادي المتوسط */
    margin: 10px 0;
    /* إضافة مسافة من الأعلى والأسفل حول الفقرة */
}

/* تنسيق العنصر span داخل .room-pricing */
.room-pricing span {
    font-weight: bold;
    /* جعل النص داخل العنصر span عريضًا */
    color: var(--orang-color);
    /* تعيين لون النص إلى اللون الأحمر الفاتح */
}

/* تنسيق سعر الغرفة داخل العنصر .room-pricing */
.room-pricing .price {
    font-size: 1.2rem;
    /* تعيين حجم الخط للسعر */
    color: #333;
    /* تعيين لون النص إلى اللون الرمادي الداكن */
    font-weight: bold;
    /* جعل النص عريضًا لتسليط الضوء على السعر */
}

/* تنسيق الحاوية التي تحتوي على العناصر داخل الغرفة */
.box {
    position: relative;
    /* تحديد موضع الحاوية بشكل نسبي لتمكين استخدام العناصر المطلقة بداخلها */
}

/* تأثير التمرير على صورة الغرفة */
.room-image:hover {
    opacity: 0.9;
    /* تقليل الشفافية (الopacity) للصورة إلى 90% عند التمرير فوقها لإضفاء تأثير التفاعل */
}



/* تنسيق الفيديو الخلفي */
#background-video {
    position: absolute;
    /* تعيين موضع الفيديو بشكل مطلق بالنسبة لأقرب عنصر ذو موضع نسبي */
    top: 0;
    /* تحديد الفيديو ليكون في أعلى الصفحة */
    left: 0;
    /* تحديد الفيديو ليكون على الجهة اليسرى */
    width: 100%;
    /* جعل الفيديو يأخذ العرض الكامل للصفحة */
    height: 100%;
    /* جعل الفيديو يأخذ الارتفاع الكامل للصفحة */
    object-fit: cover;
    /* التأكد من تغطية كامل المساحة بالفيديو دون تشويه */
    z-index: -1;
    /* تعيين الفيديو خلف باقي المحتوى في الصفحة */
}

/* استجابة التصميم لأجهزة الشاشات الصغيرة (أقل من 768px) */
@media screen and (max-width: 768px) {

    /* تغيير تنسيق قائمة الغرف في الشاشات الصغيرة */
    .room-list {
        flex-direction: column;
        /* جعل العناصر تتوزع عموديًا بدلاً من أفقيًا */
        align-items: center;
        /* محاذاة العناصر إلى المنتصف */
    }
}

/* تنسيق قسم الخدمات */
.services {
    padding: 60px 20px;
    /* إضافة حشوة داخلية بمقدار 60px من الأعلى والأسفل و 20px من الجانبين */
    background-color: #f1f1f1;
    /* تعيين خلفية القسم إلى اللون الرمادي الفاتح */
    text-align: center;
    /* محاذاة النصوص إلى المنتصف */
}

/* تنسيق العنوان h2 داخل قسم الخدمات */
.services h2 {
    font-size: 2.5rem;
    /* تعيين حجم الخط للعناوين داخل القسم */
    color: #333;
    /* تعيين لون النص إلى اللون الرمادي الداكن */
    margin-bottom: 40px;
    /* إضافة مسافة أسفل العنوان لفصل العنوان عن باقي المحتوى */
}

/* تنسيق قائمة الخدمات */
.service-list {
    display: flex;
    /* استخدام Flexbox لترتيب العناصر بشكل أفقي */
    justify-content: center;
    /* توزيع العناصر بشكل متساوي في المساحة المتاحة */
    gap: 20px;
    /* إضافة مسافة بين العناصر */
    flex-wrap: wrap;
    /* السماح للعناصر بالانتقال إلى السطر التالي عند الضيق */
}

/* تنسيق كل خدمة داخل قائمة الخدمات */
.service {
    background-color: white;
    /* تعيين خلفية الخدمة إلى اللون الأبيض */
    width: 300px;
    /* تحديد عرض الخدمة إلى 300px */
    padding: 20px;
    /* إضافة حشوة داخلية حول محتوى الخدمة */
    border-radius: 8px;
    /* إضافة حواف دائرية للخدمة */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* إضافة ظل خفيف حول الخدمة لجعلها تبدو عائمة */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* إضافة تأثيرات انتقالية لتغيير الحركة والظل */
    cursor: pointer;
    /* تغيير شكل المؤشر إلى اليد عند التمرير فوق العنصر */
    overflow: hidden;
    /* إخفاء أي محتوى يتجاوز حدود العنصر */
    text-align: left;
    /* محاذاة النصوص داخل الخدمة إلى اليسار */
    display: flex;
    /* استخدام Flexbox داخل الخدمة لترتيب المحتوى */
    flex-direction: column;
    /* ترتيب المحتوى عموديًا داخل الخدمة */
    align-items: center;
    /* محاذاة العناصر إلى المركز عموديًا */
}

/* تأثير التمرير على الخدمة */
.service:hover {
    transform: translateY(-10px);
    /* تحريك الخدمة للأعلى بمقدار 10px عند التمرير عليها */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    /* إضافة ظل أكبر وأكثر وضوحًا حول الخدمة */
}

/* تنسيق صورة الخدمة */
.service img {
    width: 100%;
    /* جعل عرض الصورة يأخذ العرض الكامل للعنصر الحاوي */
    height: 200px;
    /* تحديد ارتفاع الصورة إلى 200px */
    object-fit: cover;
    /* جعل الصورة تغطي المساحة المحددة لها دون تشويه */
    border-radius: 8px;
    /* إضافة حواف دائرية للصورة */
}

/* تنسيق العنوان h3 داخل الخدمة */
.service h3 {
    font-size: 1.5rem;
    /* تعيين حجم الخط للعنوان */
    color: #333;
    /* تعيين لون النص إلى اللون الرمادي الداكن */
    margin-top: 15px;
    /* إضافة مسافة فوق العنوان لفصل النص عن باقي المحتوى */
}

/* تنسيق الوصف داخل الخدمة */
.service p {
    font-size: 1rem;
    /* تعيين حجم الخط للوصف */
    color: #777;
    /* تعيين لون النص إلى اللون الرمادي الفاتح */
    margin-top: 10px;
    /* إضافة مسافة فوق الوصف لفصل النص عن العنوان */
}

/* تأثير الضغط على الخدمة */
.service:active {
    transform: scale(0.98);
    /* عند الضغط على الخدمة، يتم تصغيرها قليلًا بمقدار 2% */
}

/* استجابة التصميم لأجهزة الشاشات الصغيرة (أقل من 768px) */
@media screen and (max-width: 768px) {

    /* تغيير تنسيق قائمة الخدمات في الشاشات الصغيرة */
    .service-list {
        flex-direction: column;
        /* جعل العناصر تتوزع عموديًا بدلاً من أفقيًا */
        align-items: center;
        /* محاذاة العناصر إلى المنتصف */
    }

    /* تغيير عرض الخدمة في الشاشات الصغيرة */
    .service {
        width: 90%;
        /* جعل عرض الخدمة 90% من عرض الصفحة */
        margin-bottom: 20px;
        /* إضافة مسافة أسفل كل خدمة للفصل بينها */
    }
}


/* تنسيق العنوان h2 */
h2 {
    text-align: center;
    /* محاذاة النص إلى المركز */
    color: #333;
    /* تعيين لون النص إلى اللون الرمادي الداكن */
    margin-top: 20px;
    /* إضافة مسافة من الأعلى */
    font-size: 24px;
    /* تعيين حجم الخط إلى 24px */
}

/* تنسيق العنصر label */
label {
    font-size: 16px;
    /* تعيين حجم الخط إلى 16px */
    margin-bottom: 10px;
    /* إضافة مسافة من الأسفل للفصل بين العنصر والعناصر التالية */
    display: block;
    /* جعل label يظهر كعنصر كتلة */
}

/* تنسيق الحقل النصي (textarea) */
textarea {
    width: 100%;
    /* تعيين العرض ليأخذ كامل المساحة المتاحة */
    padding: 10px;
    /* إضافة حشوة داخلية داخل الحقل النصي */
    margin-bottom: 10px;
    /* إضافة مسافة أسفل الحقل النصي */
    border: 1px solid #ddd;
    /* تعيين حد خفيف بلون رمادي */
    border-radius: 4px;
    /* إضافة حواف دائرية للحدود */
    font-size: 14px;
    /* تعيين حجم الخط داخل الحقل النصي */
    resize: vertical;
    /* السماح بتغيير حجم الحقل النصي فقط عموديًا */
    box-sizing: border-box;
    /* تضمين الحشوة والهامش في حساب الأبعاد */
}


/* تنسيق قائمة التقييمات */
#reviews-list {
    margin-top: 20px;
    /* إضافة مسافة من الأعلى بين العنصر الحالي والعناصر السابقة */
    width: 80%;
    /* تحديد عرض القائمة ليأخذ 80% من المساحة المتاحة */
    max-width: 600px;
    /* تحديد أقصى عرض للقائمة ليكون 600px */
    margin: 0 auto;
    /* محاذاة القائمة إلى المنتصف */
    padding: 20px;
    /* إضافة حشوة داخلية داخل القائمة */
    background-color: var(--white-color);
    /* تعيين خلفية القائمة إلى اللون الأبيض */
    border-radius: 8px;
    /* إضافة حواف دائرية للقائمة */

}

/* تنسيق كل تقييم داخل القائمة */
.review-item {
    padding: 10px;
    /* إضافة حشوة داخلية حول كل تقييم */
    margin-bottom: 15px;
    /* إضافة مسافة من الأسفل بين كل تقييم وآخر */
    border-left: 5px solid #4CAF50;
    /* إضافة حد على الجانب الأيسر بلون أخضر */
    background-color: #f9f9f9;
    /* تعيين خلفية التقييم إلى اللون الرمادي الفاتح */
    font-size: 14px;
    /* تعيين حجم الخط داخل التقييم */
    border-radius: 4px;
    /* إضافة حواف دائرية للتقييم */
}

/* إزالة المسافة أسفل آخر تقييم */
.review-item:last-child {
    margin-bottom: 0;
    /* إزالة المسافة من الأسفل للتقييم الأخير */
}

/* تأثير الانتقال عند إضافة التقييم */
.fade-in {
    opacity: 0;
    /* تعيين الشفافية إلى 0 لتبدأ العنصر بشكل غير مرئي */
    animation: fadeIn 1s forwards;
    /* إضافة تأثير التحول التدريجي للظهور بمدة 1 ثانية */
}

@keyframes fadeIn {
    to {
        opacity: 1;
        /* زيادة الشفافية إلى 1 ليظهر العنصر تدريجيًا */
    }
}