/* General Setup (Al Jawhara Theme - Deep Brown/Gold) */
body {
    font-family: 'Cairo', sans-serif;
    margin: 0;
    padding: 0;
    direction: rtl;
    text-align: right;
    background-color: #F7F0E6; /* خلفية كريمية فاتحة جداً (New) */
    color: #333;
    line-height: 1.7;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}


.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 25px;
}

h1, h2, h3, h4 {
color: #6B442A; /* بني غامق (New: Primary Color) */
margin-bottom: 25px;
font-weight: 900; /* خط سميك جداً */
}
h1 { font-size: 3.5em; text-align: center; }
h2 { font-size: 2.8em; text-align: center; margin-bottom: 60px; }
h3 { font-size: 2.2em; }
p { margin-bottom: 20px; }
.section-description {
text-align: center;
max-width: 800px;
margin: -35px auto 60px auto;
font-size: 1.2em;
color: #555;
line-height: 1.8;
}
a {
color: #B68D40; /* ذهبي/برونزي (Accent Color - Unchanged) */
text-decoration: none;
transition: color 0.3s ease, background-color 0.3s ease;
}
a:hover {
text-decoration: underline;
}

/* Header & Navigation */
header {
background-color: #6B442A; /* بني غامق (New) */
color: white;
padding: 15px 0;
position: fixed; /* تثبيت الهيدر */
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 1000;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo span {
font-size: 2em;
font-weight: 900;
color: #B68D40; /* ذهبي للشعار (Unchanged) */
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
/* Header & Navigation */
header {
background-color: #6B442A; 
/* ... (باقي الأكواد كما هي) ... */
}

/* ------------------ تعديلات الشعار (الصورة + النص) ------------------ */

.logo-content {
display: flex; /* لترتيب العناصر (الصورة والنص) جنباً إلى جنب */
align-items: center; /* لمحاذاة العناصر عمودياً في المنتصف */
}

.header-logo-img {
height: 60px; /* ارتفاع مناسب للشعار في الهيدر */
width: auto;
display: block;
margin-left: 10px; /* إضافة مسافة بين الشعار والنص (في اتجاه RTL) */
}

.logo-content span {
font-size: 1.8em; /* تصغير حجم الخط قليلاً ليتناسب مع الصورة */
font-weight: 900;
color: #B68D40; /* اللون الذهبي */
white-space: nowrap; /* لمنع الكلمة من النزول سطر جديد */
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* -------------------------------------------------------------------- */

/* ... باقي أكواد الـ CSS كما هي ... */

/* تعديل عرض الشعار في شاشات الموبايل */
@media (max-width: 576px) {
.header-logo-img {
height: 45px; /* تصغير ارتفاع الشعار */
}
.logo-content span {
font-size: 1.4em; /* تصغير حجم النص في الموبايل */
}
}

/* Hamburger Menu (Standard) */
.hamburger-menu { display: none; /* ... (Standard styles) ... */ }

/* Main Navigation Wrapper - Desktop */
.main-nav-wrapper {
display: flex;
flex-direction: row;
align-items: center;
width: auto;
margin-right: auto;
}
nav ul { display: flex; list-style: none; padding: 0; margin: 0; }
nav ul li a {
color: white;
padding: 12px 18px;
font-weight: 600;
border-radius: 6px;
white-space: nowrap;
transition: all 0.3s ease;
}
nav ul li a:hover, nav ul li.active a {
background-color: #B68D40; /* ذهبي (Unchanged) */
color: #6B442A; /* بني غامق (New) */
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
transition: all 0.3s ease;
}
.contact-header .phone-number {
background-color: #B68D40;
color: #6B442A; /* بني غامق (New) */
padding: 10px 18px;
border-radius: 6px;
font-weight: bold;
box-shadow: 0 3px 6px rgba(0,0,0,0.3);
white-space: nowrap;
}

/* Sections General */
main {
    /* تم تعديل هذا السطر ليصبح صفر بدلاً من 90px */
    padding-top: 0; 
}
.page-section {
padding: 100px 0;
}
.light-bg {
background-color: #F7E9D7; /* بيج فاتح (New: Logo BG Color) */
}

/* Buttons */
.btn, .btn-secondary {
display: inline-block;
padding: 15px 35px;
border-radius: 8px;
font-weight: 700;
font-size: 1.2em;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn {
background-color: #6B442A; /* بني غامق (New) */
color: white;
}
.btn:hover {
background-color: #58371F; /* بني أغمق قليلاً (New) */
transform: translateY(-2px);
}
.btn-secondary {
background-color: #B68D40; /* ذهبي (Unchanged) */
color: #6B442A; /* بني غامق (New) */
}
.btn-secondary:hover {
background-color: #A37E39;
}

/* Hero Section */
/* Hero Section */
#hero {
/* الصورة مع طبقة شفافة (Overlay) بلون بني غامق */
/* اللون البني الغامق #6B442A تم استخدامه كطبقة شفافة بقيمة 0.6 و 0.8 */
background-image: 
linear-gradient(rgba(107, 68, 42, 0.6), rgba(107, 68, 42, 0.6)), 
url('images/WhatsApp\ Image\ 2025-11-16\ at\ 11.39.43\ PM.jpeg'); /* تأكد أن مسار الصورة صحيح */
        
background-size: cover;
background-position: center;
color: white;
padding: 120px 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 80vh;
}
#hero h1 {
color: #B68D40; /* لتأكيد ظهور العنوان بلون ذهبي بارز فوق الطبقة الداكنة */
font-size: 4.5em;
line-height: 1.1;
}

/* Features Section */
#features .feature-item .icon {
font-size: 4em;
color: #B68D40;
margin-bottom: 20px;
}
.feature-item {
background-color: white;
border-top: 5px solid #6B442A; /* خط بني مميز (New) */
border-radius: 8px;
padding: 30px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
   transition: transform 0.3s ease, box-shadow 0.3s ease;}
.feature-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Services Section */
.service-card-image {
max-width: 100%;
height: 280px; /* ارتفاع أكبر للصور */
object-fit: cover;
border-bottom: 5px solid #B68D40; /* فاصل ذهبي (Unchanged) */
}
.service-card-content h3 {
color: #6B442A; /* بني غامق (New) */
}
.service-card-content ul li i {
color: #B68D40; /* علامات صح ذهبية (Unchanged) */
}
.service-card {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  transition: all 0.4s ease; 
}
.service-card:hover {
transform: translateY(-8px); /* رفع البطاقة لأعلى بشكل أكبر */
box-shadow: 0 12px 30px rgba(0,0,0,0.25); /* ظل أكثر وضوحاً وتركيزاً */
}

/* Footer */
footer {
background-color: #6B442A; /* بني غامق (New) */
color: white;
padding: 60px 0 25px 0;
}
footer h3 {
color: #B68D40; /* ذهبي (Unchanged) */
}
footer a {
color: #F7E9D7; /* لون بيج فاتح للروابط (New) */
}
.footer-col ul li::before {
content: "\2022";
color: #B68D40;
}
.copyright {
color: #F7E9D7; /* بيج فاتح (New) */
}
.footer-note {
color: #B68D40;
font-size: 0.9em;
}

/* Fixed Contact Buttons */
.fixed-contact-buttons {
/* ... (Standard styles) ... */
bottom: 30px;
right: 30px; /* تثبيت على اليسار في RTL */
z-index: 1001;
}

.whatsapp-btn {
background-color: #25d366; 
}
.phone-btn {
background-color: #B68D40; 
color: white;
}

/* --- Mobile Fixes (992px and 576px) --- */
@media (max-width: 992px) {
    /* تم تعديل هذا السطر ليصبح 0 بدلاً من 100px */
    main { padding-top: 0; } 
/* ... (Mobile Header styles) ... */
}
@media (max-width: 576px) {
    /* تم تعديل هذا السطر ليصبح 0 بدلاً من 90px */
    main { padding-top: 0; } 
/* ... (Mobile typography and structure) ... */
#hero h1 { font-size: 3em; }
/* ... (Mobile Footer styles) ... */
}
/* Features Section - لترتيب البطاقات بجانب بعضها */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* تم التعديل من 4 إلى 3 أعمدة متساوية في العرض */
    gap: 30px; /* مسافة بين البطاقات */
    text-align: center;
}

/* تعديل المحاذاة داخل البطاقة ليصبح النص في المنتصف */
#features .feature-item {
transition: transform 0.3s ease, box-shadow 0.3s ease;
    
/* إضافة Animation هنا */
opacity: 0; /* يبدأ مخفياً */
animation: fadeInUp 0.5s ease forwards;}
.feature-grid .feature-item:nth-child(1) { animation-delay: 0.1s; }
.feature-grid .feature-item:nth-child(2) { animation-delay: 0.2s; }
.feature-grid .feature-item:nth-child(3) { animation-delay: 0.3s; }

/* (Hover Effect) - التأثير الحالي جيد: transform: translateY(-5px); */
.feature-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Icons Style - تحديث الأيقونة لتكون في منتصف البطاقة */
#features .feature-item .icon {
display: block; /* لجعل الأيقونة كتلة وتأخذ المحاذاة الوسطية */
margin: 0 auto 20px auto; /* توسيط الأيقونة أفقياً */
}


/* --------------------- ضبط العرض على الأجهزة المختلفة --------------------- */

/* عندما يكون عرض الشاشة 992 بكسل أو أقل (مثل التابلت الأفقي) */
@media (max-width: 992px) {
.feature-grid {
grid-template-columns: repeat(2, 1fr); /* عمودين فقط (2x2) */
}
}

/* عندما يكون عرض الشاشة 576 بكسل أو أقل (مثل الموبايل) */
@media (max-width: 576px) {
.feature-grid {
grid-template-columns: 1fr; /* عمود واحد (فوق بعض) */
}
}
/* Services Section - لترتيب البطاقات بجانب بعضها */
.service-cards-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 3 أعمدة متساوية في العرض */
gap: 30px; /* مسافة بين البطاقات */
margin-bottom: 30px; 
    
}

/* تنسيق محتوى بطاقة الخدمة (للتأكد من التنسيق) */
.service-card-content {
padding: 25px;
}
.service-card-content ul {
list-style: none;
padding: 0;
}
.service-card-content ul li {
display: flex;
align-items: center;
margin-bottom: 10px;
font-size: 1.05em;
}
.service-card-content ul li i {
margin-left: 10px; /* مسافة بين أيقونة (صح) والنص */
}

/* --------------------- ضبط العرض على الأجهزة المختلفة --------------------- */

/* عندما يكون عرض الشاشة 992 بكسل أو أقل (مثل التابلت الأفقي) */
@media (max-width: 992px) {
.service-cards-grid {
grid-template-columns: repeat(2, 1fr); /* عمودين فقط (2x1 + بطاقة مفردة) */
gap: 25px;
}
}

/* عندما يكون عرض الشاشة 576 بكسل أو أقل (مثل الموبايل) */
@media (max-width: 576px) {
.service-cards-grid {
grid-template-columns: 1fr; /* عمود واحد (فوق بعض) */
gap: 20px;
}
}
/* About Section - لتنسيق النص والصورة جنباً إلى جنب */
.about-content {
display: flex;
align-items: center; /* لمحاذاة العناصر عمودياً في المنتصف */
gap: 40px; /* مسافة بين النص والصورة */
direction: rtl; /* التأكيد على الاتجاه من اليمين لليسار */
}

.about-content > div {
flex: 1; /* لجعل النص يأخذ المساحة المتبقية بالتساوي */
}

.about-image {
max-width: 45%; /* تحديد عرض الصورة (45% من مساحة القسم) */
height: auto;
border-radius: 12px; /* حواف مستديرة للصورة */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* ظل خفيف */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-image:hover {
transform: scale(1.02); /* تأثير بسيط عند المرور بالفأرة */
}

/* --------------------- ضبط العرض على الأجهزة المختلفة --------------------- */

/* عندما يكون عرض الشاشة 768 بكسل أو أقل (التابلت والموبايل) */
@media (max-width: 768px) {
.about-content {
flex-direction: column; /* لترتيب النص والصورة فوق بعضهما البعض */
text-align: center;
}
.about-image {
max-width: 80%; /* زيادة عرض الصورة لتأخذ معظم الشاشة */
order: -1; /* لوضع الصورة في الأعلى قبل النص */
margin-bottom: 20px;
}
.about-content h3 {
text-align: center; /* توسيط عنوان النص */
}
}
/* Contact Us Section - لترتيب معلومات الاتصال والنموذج جنباً إلى جنب */

/* تنسيق الحاوية الرئيسية */
.contact-grid {
display: flex;
gap: 40px; /* مسافة بين العمودين */
align-items: flex-start; /* محاذاة العناصر للأعلى */
}

/* تنسيق عمود بيانات الاتصال */
.contact-info {
flex: 1; /* يأخذ مساحة مرنة */
background-color: #F7E9D7; /* لون الخلفية البيج الفاتح (Logo BG Color) */
padding: 35px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.contact-info h3 {
color: #6B442A; 
border-bottom: 3px solid #B68D40; /* خط ذهبي أسفل العنوان */
padding-bottom: 10px;
margin-bottom: 25px;
font-size: 2.5em; /* حجم أكبر للعنوان */
}

.contact-info p {
font-size: 1.15em;
margin-bottom: 15px;
display: flex; /* لترتيب الأيقونة والنص */
align-items: center;
}
.contact-info p i {
color: #B68D40; /* أيقونات ذهبية */
margin-left: 10px;
}

/* تنسيق أيقونات التواصل الاجتماعي في هذا القسم */
.social-links-contact a {
font-size: 1.8em;
margin-left: 15px;
color: #6B442A; 
transition: color 0.3s ease;
}
.social-links-contact a:hover {
color: #B68D40; /* ذهبي عند التحويم */
}

/* تنسيق عمود نموذج الاتصال (الـ Form) */
.contact-form {
flex: 1.5; /* يأخذ مساحة أكبر قليلاً من عمود المعلومات */
background-color: white; 
padding: 35px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.contact-form h3 {
text-align: right;
color: #6B442A; 
margin-bottom: 25px;
font-size: 2.5em; /* حجم أكبر للعنوان */
}

/* تنسيق عناصر النموذج */
.form-group {
margin-bottom: 20px;
}

.contact-form label {
display: block;
margin-bottom: 8px;
font-weight: 700;
color: #6B442A; /* بني غامق لعنوان الحقل */
}

.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form textarea {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 6px;
box-sizing: border-box; /* لضمان أن العرض 100% يشمل البادينج */
font-family: 'Cairo', sans-serif;
font-size: 1em;
transition: border-color 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
border-color: #B68D40; /* إطار ذهبي عند التركيز */
outline: none;
}

.btn-submit {
display: block;
width: 100%;
background-color: #6B442A; 
color: white;
padding: 15px;
border: none;
border-radius: 8px;
font-size: 1.2em;
font-weight: 700;
cursor: pointer;
transition: background-color 0.3s ease;
}

.btn-submit:hover {
background-color: #58371F; /* بني أغمق */
}


/* --------------------- ضبط العرض على الأجهزة المختلفة --------------------- */

/* عندما يكون عرض الشاشة 992 بكسل أو أقل (التابلت) */
@media (max-width: 992px) {
.contact-grid {
flex-direction: column; /* لترتيب المعلومات والنموذج فوق بعضهما */
}
.contact-info,
.contact-form {
flex: 1; /* لجعل كل عمود يأخذ العرض الكامل */
width: 100%;
}
.contact-info {
order: 1; /* ترتيب معلومات الاتصال لتأتي قبل النموذج */
}
.contact-form {
order: 2; /* ترتيب النموذج ليأتي بعد المعلومات */
}
.contact-info h3,
.contact-form h3 {
text-align: center;
}
}
/* Footer - لترتيب الأعمدة جنباً إلى جنب */
.footer-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 أعمدة متساوية في العرض */
gap: 40px; /* مسافة بين الأعمدة */
padding-bottom: 40px; /* مسافة إضافية قبل حقوق النشر */
}

.footer-col h3 {
font-size: 1.8em;
margin-bottom: 25px;
position: relative;
padding-bottom: 10px;
}
/* إضافة خط ذهبي تحت عناوين الأعمدة في الفوتر */
.footer-col h3::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 60px; /* طول الخط */
height: 3px;
background-color: #B68D40; 
border-radius: 3px;
}

.footer-col ul {
list-style: none;
padding: 0;
}
.footer-col ul li {
margin-bottom: 10px;
font-size: 1.05em;
padding-right: 15px; /* مسافة لإبراز النقطة */
position: relative;
}
/* تخصيص شكل النقطة الذهبية */
.footer-col ul li::before {
content: "\f058"; /* استخدام أيقونة علامة صح (fa-check-circle) */
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: #B68D40;
position: absolute;
right: 0;
font-size: 0.9em;
}

.footer-col p {
font-size: 1.05em;
}
.footer-col a {
/* تم تعريف الألوان العامة للروابط في الفوتر مسبقاً */
color: #F7E9D7; 
}
.footer-col a:hover {
color: #B68D40; /* لون ذهبي عند التحويم */
text-decoration: none;
}

/* أيقونات التواصل الاجتماعي في الفوتر */
.social-links a {
font-size: 1.8em;
margin-left: 15px;
color: #B68D40;
transition: color 0.3s ease;
}
.social-links a:hover {
color: #F7E9D7;
}

.copyright {
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 25px;
margin-top: 25px;
}
.footer-note {
/* تم تعريف اللون الذهبي مسبقاً */
color: #B68D40;
}


/* --------------------- ضبط العرض على الأجهزة المختلفة --------------------- */

/* عندما يكون عرض الشاشة 768 بكسل أو أقل (التابلت والموبايل) */
@media (max-width: 768px) {
.footer-grid {
grid-template-columns: 1fr; /* عمود واحد (فوق بعض) */
gap: 30px;
text-align: center;
}
.footer-col h3 {
text-align: center;
/* توسيط الخط الذهبي تحت العنوان في وضع العمود الواحد */
padding-bottom: 20px;
}
.footer-col h3::after {
left: 0;
right: 0;
margin: auto;
}
/* إلغاء محاذاة القائمة لليمين وجعلها في المنتصف */
.footer-col ul {
width: max-content; /* جعل عرض القائمة بحجم محتواها */
margin: 0 auto; /* توسيط القائمة */
}
/* تعديل موضع النقطة الذهبية لتوسيطها في وضع العمود */
.footer-col ul li {
text-align: right; /* إعادة النص إلى اليمين داخل العنصر */
}
}
/* Fixed Contact Buttons */
.fixed-contact-buttons {
position: fixed;
bottom: 30px;
right: 30px; /* التثبيت على اليسار في اتجاه RTL */
left: auto; /* التأكيد على أن التثبيت من جهة اليسار */
z-index: 1001; /* للتأكد من أنها تظهر فوق كل العناصر */
display: flex;
flex-direction: column; /* ترتيب الأزرار فوق بعضها */
gap: 15px; /* مسافة بين الأزرار */
}

.floating-btn {
display: flex;
justify-content: center;
align-items: center;
width: 60px; /* حجم الدائرة */
height: 60px; /* حجم الدائرة */
border-radius: 50%; /* لجعلها دائرة */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* ظل قوي لتبدو بارزة */
font-size: 1.8em;
color: white;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-in-out; /* نعومة في الحركة والتغيير */
}

/* تنسيق زر الواتساب */
.whatsapp-btn {
background-color: #25d366; /* لون واتساب أخضر */
}
.whatsapp-btn:hover {
background-color: #128c7e; /* لون أغمق عند التحويم */
transform: scale(1.1) rotate(5deg); /* تكبير ودوران بسيط */
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6); /* ظل أخضر بارز */
}

/* تنسيق زر الهاتف */
.phone-btn {
background-color: #B68D40; /* لون ذهبي (لوننا الثانوي) */
color: #FFFFFF;
}
.phone-btn:hover {
background-color: #6B442A; /* بني غامق عند التحويم (لوننا الأساسي) */
transform: scale(1.1) rotate(-5deg); /* تكبير ودوران بسيط */
box-shadow: 0 6px 20px rgba(182, 141, 64, 0.6); /* ظل ذهبي بارز */
}


/* --------------------- ضبط العرض على الأجهزة المختلفة --------------------- */

@media (max-width: 576px) {
.fixed-contact-buttons {
bottom: 20px;
right: 20px;
gap: 10px;
}
.floating-btn {
width: 50px; /* تصغير حجم الأزرار في الموبايل */
height: 50px;
font-size: 1.5em;
}
}

/* Locations Section (مناطق الخدمة) */

.locations-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 أعمدة على الشاشات الكبيرة */
gap: 15px;
margin-top: 40px;
}

.location-card {
display: block;
padding: 20px;
text-align: center;
background-color: white;
color: #6B442A; 
border: 1px solid #ddd;
border-radius: 8px;
font-size: 1.2em;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.location-card:hover {
background-color: #B68D40; 
color: white; 
border-color: #B68D40;
transform: translateY(-3px); 
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

@media (max-width: 992px) {
.locations-grid {
grid-template-columns: repeat(2, 1fr); 
}
}


@media (max-width: 576px) {
.locations-grid {
grid-template-columns: 1fr; 
padding: 0 10px;
}
.location-card {
font-size: 1.1em;
}
}

.hamburger-menu {
display: none; 
background: none;
border: none;
cursor: pointer;
padding: 10px;
z-index: 1002; 
}

.hamburger-menu .bar {
display: block;
width: 25px;
height: 3px;
margin: 5px 0;
background-color: #B68D40; 
border-radius: 5px;
transition: all 0.3s ease-in-out;
}

/* ------------------------------------- */
/* Main Navigation Wrapper  */
/* ------------------------------------- */

@media (max-width: 992px) {
.hamburger-menu {
display: block; 
}

header .container {
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 10px;
}

.main-nav-wrapper {
    position: fixed;
    top: 0;
    right: -100%; 
    width: 70%;
    max-width: 300px;
    height: 100vh;
    background-color: #6B442A; 
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.4);
    transition: right 0.3s ease-in-out; 
    z-index: 1001;
    
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 100px; 
}

.main-nav-wrapper.open {
    right: 0;
}

nav {
    width: 100%;
}
nav ul {
    flex-direction: column; 
    text-align: center;
}
nav ul li {
    margin: 10px 0;
    width: 100%;
}
nav ul li a {
    padding: 15px 18px;
    display: block;
}
nav ul li a:hover, nav ul li.active a {
    background-color: #B68D40; 
    color: #6B442A;
}

.contact-header {
    margin-top: 30px;
    padding: 0 20px;
}
.contact-header .phone-number {
    display: block;
    width: 100%;
    text-align: center;
}

.hamburger-menu.open .bar:nth-child(1) {
    transform: translateY(8px) rotate(-45deg);
}
.hamburger-menu.open .bar:nth-child(2) {
    opacity: 0;
}
.hamburger-menu.open .bar:nth-child(3) {
    transform: translateY(-8px) rotate(45deg);
}

}


@media (max-width: 992px) {
.contact-grid {
flex-direction: column; 
}
.contact-info,
.contact-form {
flex: 1; 
width: 90%;
max-width: 500px;
margin: 20px auto; 
}
.contact-info {
order: 1; 
padding: 25px; 
}
.contact-form {
order: 2; 
padding: 25px; 
}

.contact-info h3,
.contact-form h3 {
    text-align: center;
    font-size: 2em; 
}

.contact-info p {
    justify-content: center;
    text-align: center;
    font-size: 1em; 
    line-height: 1.4;
}

.contact-info p i {
    margin-left: 5px; 
}

.social-links-contact {
    display: flex;
    justify-content: center; 
    margin-top: 20px;
}

}

@media (max-width: 576px) {
.contact-info,
.contact-form {
padding: 20px 15px;
}
.contact-info h3,
.contact-form h3 {
font-size: 1.8em; 
}
}

/* Steps Section -  */
.steps-grid {
display: grid;
grid-template-columns: repeat(5, 1fr); 
gap: 20px;
text-align: center;
}

.step-item {
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: white;
box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}

.step-number {
display: block;
width: 50px;
height: 50px;
line-height: 50px;
background-color: #B68D40; 
color: white;
font-size: 1.5em;
font-weight: 900;
border-radius: 50%;
margin: 0 auto 15px auto;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.step-item h3 {
font-size: 1.4em;
color: #6B442A; 
margin-bottom: 10px;
}

@media (max-width: 992px) {
.steps-grid {
grid-template-columns: repeat(2, 1fr); 
}
}
@media (max-width: 576px) {
.steps-grid {
grid-template-columns: 1fr; 
}
}
/* Animation Keyframes for Features */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* Packing Materials Section */
.materials-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); 
gap: 30px;
text-align: center;
margin-top: 40px;
}

.material-item {
padding: 30px 20px;
border-radius: 8px;
background-color: white;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
border-bottom: 4px solid #B68D40; 
transition: all 0.3s ease;
}

.material-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
background-color: #F7E9D7; 
}

/* Media Queries for Packing Materials */
@media (max-width: 992px) {
.materials-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.materials-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 576px) {

h1, h2, h3 {
    text-align: center !important; 
}

h1 { 
    font-size: 2.5em !important; 
    margin-bottom: 20px !important;
}
h2 { 
    font-size: 2em !important; 
    margin-bottom: 30px !important; 
}
h3 { 
    font-size: 1.6em !important; 
}

.section-description {
    text-align: center;
}

p {
    font-size: 1em; 
    line-height: 1.6;
}

}

.packing-sub-links h3 {
    color: #6B442A; 
    font-size: 1.8em;
    margin-bottom: 20px;
}

.packing-sub-links p {
    line-height: 2.2;
    font-size: 1.1em;
}

.packing-sub-links a {
    color: #6B442A; 
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
}

.packing-sub-links a:hover {
    color: #B68D40; 
    text-decoration: underline;
}