/* Reset default styles */
* {
    margin: 0; /* إزالة الهوامش الافتراضية لجميع العناصر */
    padding: 0; /* إزالة الحشوات الافتراضية لجميع العناصر */
    box-sizing: border-box; /* تعيين طريقة حساب الحجم لتشمل الحواف والتعبئة داخل الأبعاد المحددة */
}

/* Video background styling */
.video-background {
    position: fixed; /* وضع الفيديو بشكل ثابت في الشاشة */
    top: 0; /* تعيين الفيديو ليبدأ من أعلى الصفحة */
    left: 0; /* تعيين الفيديو ليبدأ من أقصى اليسار */
    width: 100%; /* تعيين عرض الفيديو ليغطي كامل الشاشة */
    height: 100%; /* تعيين ارتفاع الفيديو ليغطي كامل الشاشة */
    z-index: -1; /* وضع الفيديو خلف المحتوى الرئيسي */
}

#background-video {
    width: 100%; /* تعيين الفيديو ليغطي العرض بالكامل */
    height: 100%; /* تعيين الفيديو ليغطي الارتفاع بالكامل */
    object-fit: cover; /* ضمان أن الفيديو يغطي المساحة بشكل كامل دون تشويه */
    opacity: 0.3; /* تطبيق شفافية خفيفة على الفيديو (لتقليل التأثير المزعج) */
}

/* Body and general styling */
body {
    font-family: 'Arial', sans-serif; /* تعيين الخط الافتراضي للصفحة */
    background-color: rgba(244, 244, 244, 0.8); /* تعيين لون خلفية فاتح مع شفافية */
    color: #333; /* تعيين لون النص إلى رمادي غامق */
    line-height: 1.6; /* تعيين ارتفاع السطر ليكون 1.6 لسهولة القراءة */
    text-align: center; /* تعيين محاذاة النص ليكون في المنتصف */
}

/* Header */
header {
    background-color: rgba(0, 0, 0, 0.7); /* تعيين لون خلفية داكنة مع شفافية خفيفة */
    color: #fff; /* تعيين لون النص في العنوان إلى الأبيض */
    padding: 20px 0; /* إضافة حشوة على الجزء العلوي والسفلي من العنوان */
    position: sticky; /* جعل العنوان ثابتًا في أعلى الصفحة أثناء التمرير */
    top: 0; /* تعيين العنوان ليكون في أعلى الصفحة */
    z-index: 1000; /* تعيين قيمة z-index لضمان أن العنوان سيكون فوق باقي المحتوى */
}

header nav ul {
    list-style: none; /* إزالة النقاط في القوائم */
    padding: 0; /* إزالة الحشوة الافتراضية للقائمة */
}

header nav ul li {
    display: inline; /* جعل العناصر داخل القائمة تظهر في صف أفقي */
    margin-right: 20px; /* إضافة مسافة بين العناصر داخل القائمة */
}

header nav ul li a {
    color: #fff; /* تعيين لون النص في الروابط إلى الأبيض */
    text-decoration: none; /* إزالة الخط السفلي من الروابط */
    font-size: 18px; /* تعيين حجم الخط في الروابط */
    transition: color 0.3s; /* إضافة تأثير انتقال عند تغيير اللون */
}

header nav ul li a:hover {
    color: #ff6347; /* تغيير لون النص إلى لون برتقالي فاتح عند التمرير فوق الرابط */
}


/* Section Styling */
.trips-concerts {
    padding: 40px 20px; /* إضافة حشوة (padding) حول القسم */
    z-index: 10; /* تحديد قيمة z-index لضمان أن العنصر يظهر فوق العناصر الأخرى التي قد تكون موجودة */
}

/* Styling for the section title (h2) */
h2 {
    font-size: 36px; /* تحديد حجم الخط للعناوين الرئيسية */
    margin-bottom: 20px; /* إضافة مسافة أسفل العنوان */
    color: #fff; /* تحديد لون النص إلى الأبيض */
}

/* Styling for subheadings (h3) */
h3 {
    font-size: 28px; /* تحديد حجم الخط للعناوين الفرعية */
    margin-bottom: 15px; /* إضافة مسافة أسفل العنوان الفرعي */
    color: #3498db; /* تحديد لون النص باللون الأزرق الفاتح */
}

/* Styling for the list of trips and concerts */
.trip-list, .concert-list {
    display: flex; /* استخدام flexbox لتوزيع العناصر بشكل أفقي */
    justify-content: space-around; /* توزيع العناصر بشكل متساوٍ عبر العرض */
    flex-wrap: wrap; /* السماح للعناصر بالالتفاف إلى السطر التالي إذا كانت كبيرة */
    gap: 20px; /* إضافة مسافة بين العناصر */
}

/* Styling for each trip and concert item */
.trip, .concert {
    background-color: rgba(255, 255, 255, 0.8); /* تعيين خلفية شفافة بيضاء */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* إضافة ظل ناعم حول العنصر */
    width: 45%; /* تحديد العرض ليكون 45% من الحاوية الأم */
    border-radius: 10px; /* إضافة زوايا مدورة */
    overflow: hidden; /* إخفاء المحتوى الزائد الذي يخرج من الحدود */
    transition: transform 0.3s ease; /* إضافة تأثير تحويل تدريجي عند التفاعل مع العنصر */
}

/* Styling for the hover effect on trip and concert items */
.trip:hover, .concert:hover {
    transform: scale(1.05); /* تكبير العنصر بنسبة 5% عند التمرير عليه */
}

/* Styling for images inside trip and concert items */
img {
    width: 100%; /* تعيين عرض الصورة ليغطي العنصر بالكامل */
    height: auto; /* ضبط ارتفاع الصورة تلقائيًا لتتناسب مع العرض */
    border-bottom: 2px solid #ddd; /* إضافة حد أسفل الصورة */
}

/* Styling for buttons */
button {
    background-color: #3498db; /* تعيين لون الخلفية إلى الأزرق الفاتح */
    color: #fff; /* تعيين لون النص إلى الأبيض */
    padding: 10px; /* إضافة حشوة داخل الزر */
    border: none; /* إزالة الحدود الافتراضية للزر */
    border-radius: 5px; /* إضافة زوايا مدورة للزر */
    cursor: pointer; /* تغيير شكل المؤشر عند التمرير فوق الزر */
    font-size: 16px; /* تحديد حجم الخط في الزر */
    transition: background-color 0.3s ease; /* إضافة تأثير تدريجي لتغيير اللون */
}

/* Hover effect for buttons */
button:hover {
    background-color: #2980b9; /* تغيير لون الخلفية إلى لون أغمق عند التمرير */
}

/* Footer */
footer {
    background-color: rgba(0, 0, 0, 0.7); /* تعيين لون خلفية داكنة مع شفافية */
    color: #fff; /* تعيين لون النص إلى الأبيض */
    padding: 20px; /* إضافة حشوة داخل الفوتر */
    position: fixed; /* جعل الفوتر ثابت في أسفل الصفحة */
    bottom: 0; /* تحديد الموقع ليكون في الأسفل تمامًا */
    width: 100%; /* جعل الفوتر يمتد على كامل عرض الصفحة */
}

footer p {
    margin: 0; /* إزالة المسافة الافتراضية حول الفقرة */
    font-size: 14px; /* تحديد حجم الخط ليكون صغيرًا */
}

/* Audio controls */
.audio-controls {
    position: fixed; /* جعل عناصر التحكم في الصوت ثابتة */
    bottom: 70px; /* وضع عناصر التحكم فوق الفوتر بمقدار 70 بكسل */
    left: 50%; /* محاذاة العنصر أفقيًا إلى المنتصف */
    transform: translateX(-50%); /* تعويض التحويل من خلال نقل العنصر بنسبة 50% من عرضه */
    background-color: rgba(0, 0, 0, 0.7); /* تعيين خلفية داكنة مع شفافية */
    padding: 10px; /* إضافة حشوة داخل عناصر التحكم */
    border-radius: 5px; /* إضافة زوايا مدورة لعناصر التحكم */
    z-index: 1001; /* تعيين z-index أعلى من الفوتر لضمان ظهور عناصر التحكم فوق الفوتر */
}

.audio-controls button {
    color: #fff; /* تعيين لون النص في الأزرار إلى الأبيض */
    background-color: #3498db; /* تعيين لون الخلفية للأزرار إلى الأزرق الفاتح */
    border: none; /* إزالة الحدود الافتراضية للأزرار */
    padding: 10px; /* إضافة حشوة داخل الأزرار */
    cursor: pointer; /* تغيير شكل المؤشر عند التمرير فوق الأزرار */
    border-radius: 5px; /* إضافة زوايا مدورة للأزرار */
    font-size: 16px; /* تحديد حجم الخط داخل الأزرار */
}

.audio-controls input[type="range"] {
    width: 200px; /* تحديد عرض شريط التمرير (التحكم في الصوت) */
    margin-left: 10px; /* إضافة مسافة على اليسار بين الزر وشريط التمرير */
}


/* Media Query for responsiveness on devices with max width of 768px (like tablets or mobile) */
@media (max-width: 768px) {
    .trip-list, .concert-list {
        flex-direction: column; /* تحويل ترتيب العناصر إلى عمودي بدلًا من أفقي */
        align-items: center; /* محاذاة العناصر في المنتصف */
    }

    .trip, .concert {
        width: 80%; /* جعل العرض 80% من عرض الحاوية، لجعل العناصر أصغر قليلاً على الشاشات الصغيرة */
    }
}

/* Reset default styles */
* {
    margin: 0; /* إزالة المسافات الافتراضية حول جميع العناصر */
    padding: 0; /* إزالة الحشوة الافتراضية حول جميع العناصر */
    box-sizing: border-box; /* التأكد من أن الحشوة والحدود تُحتسب ضمن الأبعاد الكلية للعناصر */
}

/* Video background styling */
.video-background {
    position: fixed; /* جعل الفيديو الخلفي ثابتًا في مكانه */
    top: 0; /* وضع الفيديو في أعلى الصفحة */
    left: 0; /* وضع الفيديو في الجهة اليسرى من الصفحة */
    width: 100%; /* جعل الفيديو يغطي كامل عرض الصفحة */
    height: 100%; /* جعل الفيديو يغطي كامل ارتفاع الصفحة */
    z-index: -1; /* وضع الفيديو خلف المحتوى (تحديدًا خلف العناصر الأخرى في الصفحة) */
}

#background-video {
    width: 100%; /* تعيين عرض الفيديو ليغطي كامل الحاوية */
    height: 100%; /* تعيين ارتفاع الفيديو ليغطي كامل الحاوية */
    object-fit: cover; /* التأكد من أن الفيديو يغطي كامل الحاوية دون تشويه الصورة */
    opacity: 0.3; /* تعيين شفافية الفيديو ليكون خفيفًا في الخلفية */
}


/* Body and general styling */
body {
    font-family: 'Arial', sans-serif; /* تعيين خط النص إلى Arial مع خط بديل sans-serif */
    background-color: rgba(244, 244, 244, 0.8); /* تعيين خلفية بلون رمادي فاتح مع شفافية */
    color: #333; /* تعيين لون النص إلى درجة غامقة من الرمادي */
    line-height: 1.6; /* زيادة التباعد بين الأسطر لجعل النص أكثر وضوحًا */
    text-align: center; /* محاذاة النص إلى المنتصف */
}

/* Header */
header {
    background-color: rgba(0, 0, 0, 0.7); /* تعيين خلفية داكنة شفافة للفوتر */
    color: #fff; /* تعيين لون النص في الهيدر إلى الأبيض */
    padding: 20px 0; /* إضافة حشوة من الأعلى والأسفل لجعل الهيدر أكثر ارتفاعًا */
    position: sticky; /* جعل الهيدر يظل ثابتًا عند التمرير عبر الصفحة */
    top: 0; /* تحديد مكان الهيدر ليكون دائمًا في أعلى الصفحة */
    z-index: 1000; /* وضع الهيدر في الطبقة العليا لضمان أنه يبقى في الواجهة */
}

header nav ul {
    list-style: none; /* إزالة النقاط من قائمة الروابط */
    padding: 0; /* إزالة الحشوة الافتراضية من القائمة */
    display: flex; /* استخدام Flexbox لتوزيع العناصر بشكل أفقي */
    justify-content: center; /* محاذاة العناصر في المنتصف أفقيًا */
}

header nav ul li {
    margin-right: 20px; /* إضافة مسافة بين العناصر في القائمة */
    display: inline-block; /* عرض العناصر بشكل متتابع مع المسافات بينهما */
}

header nav ul li:last-child {
    margin-right: 0; /* إزالة المسافة اليمنى عن العنصر الأخير في القائمة */
}

header nav ul li a {
    color: #fff; /* تعيين لون النص داخل الروابط إلى الأبيض */
    text-decoration: none; /* إزالة التسطير من الروابط */
    font-size: 18px; /* تعيين حجم الخط في الروابط */
    transition: color 0.3s; /* إضافة تأثير انتقال تدريجي لتغيير اللون عند التمرير */
}

header nav ul li a:hover {
    color: #ff6347; /* تغيير لون النص إلى لون برتقالي عند التمرير فوق الرابط */
}


/* Content Section */
.trips-concerts {
    padding: 40px 20px; /* إضافة حشوة داخلية للجزء الخاص بالعروض (أعلى وأسفل 40px، يمين ويسار 20px) */
    z-index: 10; /* تحديد ترتيب الطبقات ليكون العنصر في الطبقة الأعلى */
}

h2 {
    font-size: 36px; /* تعيين حجم الخط للعنوان الرئيسي (h2) ليكون 36px */
    margin-bottom: 20px; /* إضافة مسافة من الأسفل للعنوان */
    color: #fff; /* تعيين لون النص في العنوان الرئيسي إلى الأبيض */
}

h3 {
    font-size: 28px; /* تعيين حجم الخط للعناوين الفرعية (h3) ليكون 28px */
    margin-bottom: 15px; /* إضافة مسافة من الأسفل للعناوين الفرعية */
    color: #3498db; /* تعيين لون النص للعناوين الفرعية إلى الأزرق (رقم اللون: #3498db) */
}

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

/* تنسيق كل رحلة أو عرض */
.trip, .concert {
    background-color: rgba(255, 255, 255, 0.8); /* تعيين خلفية بيضاء مع شفافية 80% */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* إضافة ظل خفيف للعنصر */
    width: 45%; /* تعيين العرض إلى 45% من المساحة المتاحة */
    border-radius: 10px; /* إضافة زاوية دائرية للحدود */
    overflow: hidden; /* إخفاء المحتوى الذي يتجاوز الحدود */
    transition: transform 0.3s ease; /* إضافة تأثير حركة سلس عند التمرير على العنصر */
}

/* تأثير عند التمرير فوق الرحلة أو العرض */
.trip:hover, .concert:hover {
    transform: scale(1.05); /* تكبير العنصر بنسبة 5% عند التمرير فوقه */
}

/* تنسيق الصور داخل الرحلات والعروض */
img {
    width: 100%; /* جعل عرض الصورة 100% من العنصر الحاوي لها */
    height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع الأصلية للصورة */
    border-bottom: 2px solid #ddd; /* إضافة حد تحت الصورة بلون رمادي فاتح */
}

/* Button styling */
button {
    background-color: #3498db; /* تعيين لون خلفية الزر إلى الأزرق */
    color: #fff; /* تعيين لون النص داخل الزر إلى الأبيض */
    padding: 10px; /* إضافة حشوة داخلية للزر من جميع الاتجاهات */
    border: none; /* إزالة الحد من الزر */
    border-radius: 5px; /* إضافة زاوية دائرية للحدود */
    cursor: pointer; /* تغيير شكل المؤشر عند التمرير فوق الزر ليصبح يد */
    font-size: 16px; /* تعيين حجم الخط داخل الزر */
    transition: background-color 0.3s ease; /* إضافة تأثير سلس عند تغيير اللون */
}

button:hover {
    background-color: #2980b9; /* تغيير لون الزر إلى الأزرق الداكن عند التمرير عليه */
}

/* Footer */
footer {
    background-color: rgba(0, 0, 0, 0.7); /* تعيين لون خلفية الفوتر إلى أسود مع شفافية 70% */
    color: #fff; /* تعيين لون النص داخل الفوتر إلى الأبيض */
    padding: 20px; /* إضافة حشوة داخلية للفوتر */
    position: fixed; /* تعيين الفوتر ليكون ثابت في الأسفل */
    bottom: 0; /* تحديد الموقع ليكون في الأسفل */
    width: 100%; /* تعيين عرض الفوتر ليغطي العرض الكامل للصفحة */
}

footer p {
    margin: 0; /* إزالة المسافة الافتراضية من حول الفقرة */
    font-size: 14px; /* تعيين حجم الخط للفقرة داخل الفوتر */
}

/* Audio controls */
.audio-controls {
    position: fixed; /* وضع عناصر التحكم بالصوت في مكان ثابت على الشاشة */
    bottom: 70px; /* تحديد المسافة من الأسفل بمقدار 70px */
    left: 50%; /* وضعه في المنتصف أفقيًا */
    transform: translateX(-50%); /* تعديل الموضع بحيث يكون العنصر في المنتصف بشكل دقيق */
    background-color: rgba(0, 0, 0, 0.7); /* تعيين خلفية شبه شفافة باللون الأسود */
    padding: 10px; /* إضافة حشوة داخلية لعناصر التحكم */
    border-radius: 5px; /* إضافة زاوية دائرية للحدود */
    z-index: 1001; /* تعيين طبقة أعلى من باقي العناصر لتكون مرئية دائمًا */
}

.audio-controls button {
    color: #fff; /* تعيين لون النص داخل الزر إلى الأبيض */
    background-color: #3498db; /* تعيين لون خلفية الزر إلى الأزرق */
    border: none; /* إزالة الحدود من الزر */
    padding: 10px; /* إضافة حشوة داخلية للزر */
    cursor: pointer; /* تغيير شكل المؤشر إلى اليد عند التمرير فوق الزر */
    border-radius: 5px; /* إضافة زاوية دائرية للحدود */
    font-size: 16px; /* تعيين حجم الخط داخل الزر */
}

/* عنصر التحكم في الصوت (مستوى الصوت) */
.audio-controls input[type="range"] {
    width: 200px; /* تعيين عرض شريط التمرير ليكون 200px */
    margin-left: 10px; /* إضافة مسافة صغيرة إلى اليسار بين الزر والشريط */
}

/* Media Queries for smaller screens */
@media (max-width: 768px) {
    .trip-list, .concert-list {
        flex-direction: column; /* تغيير الاتجاه إلى عمودي عند الشاشات الصغيرة */
        align-items: center; /* محاذاة العناصر إلى المركز */
    }

    .trip, .concert {
        width: 80%; /* تغيير عرض العناصر (الرحلات والعروض) ليكون 80% من العرض الكامل */
    }
}