body {
    font-family:'Times New Roman', Times, serif, sans-serif;
    margin: 0;
    padding: 0;
    direction: rtl;
    text-align: right;
    background: linear-gradient(100deg, #623df7, #eff0f1); /* خلفية متدرجة بين الزهري والأزرق */
    background-attachment:local; /* تثبيت الخلفية عند التمرير */
    color: rgb(10, 10, 10); /* تغيير لون النص لتناسب مع الخلفية */
}

/* تأثيرات على البار */
header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #623df7, white); /* البنفسجي الفاتح متداخل مع الأبيض */
    color: white;
    padding: 1em;
    box-shadow: 0px 2px 5px rgba(255, 255, 255, 0.5); /* ظل للشريط ليبدو ثلاثي الأبعاد */
}


.logo-container {
    order: 1;
    top: 10px; /* تعديل موقع اللوغو لأعلى */
    right: 10px; /* تعديل موقع اللوغو لليمين */
    display: flex;
    align-items: center;
    gap: 10px; /* المسافة بين اللوغو والطائرة */
}

.logo-img {
    width: 150px; /* تصغير حجم اللوغو */
    height: auto;
    transition: transform 0.3s ease; /* تأثير الانتقال */
}

header:hover .logo-img {
    transform: translateY(-8px); /* حركة الرفع لأعلى */
}

.header-title {
    flex-grow: 1;
    text-align: center;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    display:inline;
    margin-left: 0px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    padding: 0.5em 2.5em;
    background-color: rgba(166, 5, 253, 0.8); /* اللون الزهري مع شفافية */
    border-radius: 25px;
}

nav ul li a:hover {
    background-color: rgba(96, 47, 243, 0.8); /* اللون الزهري الغامق عند التمرير مع شفافية */
}

main {
    padding: 2em;
}

section {
    margin-bottom: 2em;
}

footer {
    background-color: rgba(0, 33, 71, 0.8); /* الأزرق الغامق مع شفافية */
    color: white;
    text-align: center;
    padding: 1em;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.catalog {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.item {
    text-align: center;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    transition: transform 0.3s ease; /* تأثير تحويل العنصر بالكامل */
}

.item img {
    max-width: 295px;
    border-radius: 10px;
    transition: transform 0.3s ease; /* تأثير تحويل الصورة */
}

.item:hover {
    transform: scale(1.05); /* تكبير العنصر عند التحويم */
}

.item:hover img {
    transform: scale(1.1); /* تكبير الصورة عند التحويم */
}

.item p {
    margin-top: 10px;
    color: #ddd;
    font-size: 14px;
}

/* تنسيق قسم حول */
#about {
    padding: 2em;
    text-align: center;
}
.about-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-item {
    direction: ltr; /* توجيه النص من اليسار إلى اليمين */
    text-align: left; /* محاذاة النص إلى اليسار */
}

.about-img {
    order: -1;
    align-items: center;
    padding: 1em;
    text-align: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    box-shadow: 2px 4px 8px rgba(247, 244, 244, 0.1);
}

.about-text {
    color: #070707;
}

.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.package-item {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease; /* تأثير الانتقال */
}

.package-item:hover {
    transform: scale(1.05); /* تكبير العنصر عند التحويم */
}

.package-item h2 {
    color: #fff;
    margin: 0;
}

.package-item p {
    color: #ddd;
    margin: 0;
}

/* تنسيق قسم باقاتنا */
#packages {
    padding: 2em;
    text-align: center;
}

.package-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.package {
    position: relative; /* يجب أن يكون موقعًا نسبيًا لتمكين الزوايا ثلاثية الأبعاد */
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease; /* تأثير الانتقال */
    transform-style: preserve-3d; /* جعل العنصر ثلاثي الأبعاد */
}

.package:hover {
    transform: rotateY(10deg) rotateX(10deg) scale(1.05); /* تدوير وتكبير العنصر عند التحويم */
}

.package h3,
.package p {
    position: relative; /* يجب أن يكون موقعًا نسبيًا لتمكين الزوايا ثلاثية الأبعاد */
    color: #fff;
    margin: 0;
}

.package h3::before,
.package p::before {
    content: ''; /* إضافة عنصر يسمح بتطبيق التأثيرات ثلاثية الأبعاد */
    position: absolute; /* تحديد الموقع بالنسبة للعنصر الأصلي */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* لون الخلفية للزوايا الثلاثية */
    border-radius: 10px;
    transition: opacity 0.3s ease; /* تأثير التلاشي */
    transform: perspective(1000px) rotateY(0) rotateX(0); /* تأثير التحويل ثلاثي الأبعاد */
    pointer-events: none; /* عدم التفاعل مع الفأرة للعنصر */
    opacity: 0; /* الشفافية الأولية: غير مرئي */
}

.package:hover h3::before,
.package:hover p::before {
    opacity: 1; /* جعل الزوايا ظاهرة عند التحويل */
}
#contact {
    padding: 2em;
    text-align: center;
}
.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* التخطيط الشبكي */
    gap: 20px; /* المسافة بين العناصر */
}

.package-item {
    text-align: center; /* محاذاة النص إلى المركز */
    padding: 10px; /* الهوامش الداخلية للعناصر */
    background-color: #f9f9f9; /* خلفية خفيفة */
    border-radius: 8px; /* زوايا دائرية */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ظل خفيف للعناصر */
}

.package-item img {
    max-width: 100%; /* جعل الصورة تستجيب لحجم العنصر */
    height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع */
    border-radius: 8px 8px 0 0; /* زوايا دائرية للجزء العلوي من الصورة */
    margin-bottom: 10px; /* مسافة بين الصورة والنص */
}
@media (max-width: 600px) {
    nav ul li {
        display: block;
        margin: 10px 0;
    }

    .catalog .item {
        margin: 10px 0;
    }

    .about-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .about-item {
        margin-bottom: 20px;
    }

    .packages-grid {
        grid-template-columns: 1fr;
    }

    .package-item {
        margin-bottom: 20px;
    }

    .contact-info {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .contact-info > div {
        margin-bottom: 10px;
    }
}
@media (max-width: 600px) {
    .packages-grid {
        grid-template-columns: 1fr;
    }
}
@media only screen and (max-width: 600px) {
    /* تصميم خاص للشاشات الصغيرة */
}
nav ul li .active {
    font-weight: bold;
    text-decoration: underline;
}

.container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    text-align: left;
    direction: rtl;
}

.terms h2 {
    color: #0073e6;
}

.terms h3 {
    color: #005bb5;
    margin-top: 20px;
    text-align: left;
}

.terms ul {
    padding-left: 20px;
    
}

.terms ul li {
    margin-bottom: 10px;
    text-align: left;
}