/* ------------------ HEADER فاخر للعود والبخور ------------------ */
.main-nav-container {
    background: linear-gradient(135deg, #751c0a, #a32b14); /* درجات اللون الجديد */
    border-bottom: 4px solid #d4af37; /* حافة ذهبية */
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
    border-radius: 0 0 20px 20px;
    transition: all 0.3s ease;
}

/* شعار الهيدر */
.navbar-brand img {
    max-height: 80px;
    border-radius: 12px;
    border: 3px solid #d4af37;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}
.navbar-brand img:hover {
    transform: scale(1.05);
}

/* ------------------ FOOTER فاخر ------------------ */
/* ------------------ تصميم الفوتر ------------------ */
.store-footer__inner {
    background: linear-gradient(135deg, #751c0a, #a32b14);
    border-top: 4px solid #d4af37;
    border-radius: 4rem 4rem 0 0;
    padding: 3rem 4rem;
    color: #fff;
    font-family: Arial, sans-serif;
}

/* حاوية الأعمدة */
.store-footer__inner > div > .grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* توزيع الأعمدة بالتساوي */
    gap: 2rem;
}

/* كل عمود */
.store-footer__inner .lg\:col-span-2,
.store-footer__inner > div > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.5rem;
}

/* العناوين */
.store-footer__inner h3 {
    color: #d4af37;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: bold;
}

/* النصوص */
.store-footer__inner p {
    margin: 0;
    line-height: 1.3;
    font-size: 0.95rem;
}

/* شعار الفوتر */
.store-footer__inner img {
    height: 80px;
    width: auto;
    margin-bottom: 1rem;
    border-radius: 50%;
    border: 5px solid #d4af37;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

/* روابط الفوتر */
.store-footer__inner a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}
.store-footer__inner a:hover {
    color: #d4af37;
}

/* أيقونات التواص*
@media (max-width: 768px) {
    /* جعل الأعمدة تتحول لعمود واحد */
    .store-footer__inner > div > .grid {
        flex-direction: column;
        gap: 2rem;
        align-items: center; /* توسيط الأعمدة */
    }

/* توسيط محتويات كل عمود */
.store-footer__inner .lg\:col-span-2,
.store-footer__inner > div > div {
    align-items: center;
    text-align: center;
}
.s-contacts-item {
    display: flex;
    justify-content: center; /* توسيط أفقي */
    align-items: center;     /* توسيط عمودي */
    gap: 10px;
}

.s-contacts-item svg {
    width: 24px;
    height: 24px;
}

    /* تصغير وتوسيط الشعار */
    .store-footer__inner img {
        height: 60px;
        margin: 0 auto 1rem auto; /* توسيط الشعار */
    }

    /* توسيط أيقونات التواصل */
    .s-contacts-item {
        justify-content: center;
    }

    .s-contacts-item svg {
        width: 20px;
        height: 20px;
    }

    /* أسفل الفوتر */
    .store-footer .container.text-center {
        flex-direction: column;
        gap: 1rem;
        align-items: center; /* توسيط */
    }
.store-footer__inner img {
   margin-left: 50px !important;
   margin-right: 0 !important;
   margin-inline-start: 50px !important;
}
/* حاوية أيقونات التواصل */
.s-contacts-list-vertical {
    display: flex;
    flex-direction: column; /* ترتيب عمودي */
    align-items: flex-start; /* أو center حسب الرغبة */
    gap: 10px; /* مسافة بين كل أيقونة */
    margin: 0;
    padding: 0;
}

/* كل أيقونة */
.s-contacts-item {
    display: flex;
    align-items: center; /* توسيط الأيقونة والنص عموديًا */
    justify-content: flex-start; /* أو center لتوسيطها أفقياً */
    gap: 8px; /* مسافة بين الأيقونة والنص */
    text-decoration: none;
    color: #fff;
}

/* دائرة الأيقونة */
.s-contacts-item .s-contacts-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* شكل دائري */
    width: 36px;   /* زيادة الحجم */
    height: 36px;  /* زيادة الحجم */
}

/* حجم الأيقونات داخل الدائرة */
.s-contacts-item svg {
    width: 20px;   /* زيادة حجم الأيقونة قليلًا */
    height: 20px;
    display: block;
}
}
/* توسيط شعار الفوتر للشاشات الكبيرة */
@media (min-width: 769px) {
    .store-footer__inner {
        display: flex;
        justify-content: center; /* توسيط أفقي */
        align-items: center;     /* توسيط عمودي */
        flex-direction: column;  /* لو هناك عناصر أخرى بجانب الشعار */
    }

    .store-footer__inner img {
        margin: 0; /* إزالة أي هوامش قد تمنع الوسيط */
    }
}
/* تثبيت الهيدر في أعلى الصفحة */
.main-nav-container {
    position: fixed;  /* تثبيت */
    top: 0;           /* أعلى الصفحة */
    left: 0;
    width: 100%;      /* عرض كامل */
    z-index: 9999;    /* فوق كل العناصر */
}

/* لتجنب تغطية المحتوى أسفل الهيدر */
body {
    padding-top: 100px; /* نفس ارتفاع الهيدر تقريباً */
}