/* style.css */

/* --- متغيّرات الألوان والخطوط --- */
:root {
    --primary-color: #2e7d32; /* أخضر غامق */
    --secondary-color: #8bc34a; /* أخضر فاتح */
    --accent-color: #e3f2fd; /* أزرق فاتح جداً */
    --text-dark: #333333;
    --text-light: #666666;
}

body {
    font-family: 'Tajawal', sans-serif;
    overflow-x: hidden;
    background-color: #fcfcfc;
    
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            
}

/* --- Navbar --- */
.navbar {
    background-color: white;
    box-shadow: 0 0 15px rgba(0,0,0,0.05);
    padding: 15px 0;
}
.navbar-brand {
    font-weight: 800;
    color: var(--primary-color) !important;
    font-size: 1.5rem;
}
.nav-link {
    color: var(--text-dark);
    font-weight: 500;
    margin-left: 15px;
    transition: 0.3s;
}
.nav-link:hover, .nav-link.active {
    color: var(--primary-color);
}
.btn-main {
    background-color: var(--primary-color);
    color: white;
    padding: 10px 25px;
    border-radius: 50px;
    transition: 0.3s;
    border: 2px solid var(--primary-color);
}
.btn-main:hover {
    background-color: transparent;
    color: var(--primary-color);
    transform: translateY(-2px);
}

/* --- Hero Section --- */
.hero-section {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1581578731117-104f8a74695b?q=80&w=1920&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    position: relative;
}
.hero-content h1 {
    font-weight: 800;
    font-size: 3.5rem;
    margin-bottom: 20px;
}
.hero-content p {
    font-size: 1.3rem;
    opacity: 0.9;
    margin-bottom: 30px;
}

/* --- Section Titles --- */
.section-padding {
    padding: 80px 0;
}
.section-title {
    text-align: center;
    margin-bottom: 60px;
}
.section-title h2 {
    font-weight: 800;
    color: var(--text-dark);
    font-size: 2.5rem;
    position: relative;
    display: inline-block;
}
.section-title h2::after {
    content: '';
    width: 60px;
    height: 4px;
    background-color: var(--secondary-color);
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

/* --- Features Cards (تصميم الأيقونة العائمة) --- */
.feature-card {
    border-radius: 35px;
    padding: 70px 30px 40px 30px;
    position: relative;
    margin-top: 50px;
    text-align: center;
    transition: transform 0.3s ease;
    height: 100%; /* لضمان تساوي ارتفاع الكروت في الصف */
}
.feature-card:hover {
    transform: translateY(-10px);
}
/* ألوان البطاقات */
.card-green { background-color: #dbeecf; }
.card-orange { background-color: #ffe0cc; }
.card-chiled { background-color: #73dbfa3a; }
.card-blue { background-color: #e0f7fa; }
.card-yellow { background-color: #ffee0050; }

.icon-box {
    width: 90px;
    height: 90px;
    background-color: #ffffff;
    border-radius: 25px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%); /* يرفع الأيقونة لتتوسط الحافة */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.icon-box i {
    font-size: 2.5rem;
}
/* ألوان الأيقونات */
.text-green { color: #558b2f; }
.text-orange { color: #ef6c00; }
.text-chiled { color: #00b7ef; }
.text-blue { color: #0277bd; }
.text-yellow { color: #caac01; }

/* --- Services Section --- */
/* style.css (استبدال كلاسات .service-item بالتنسيقات التالية) */

/* ⛔️ حذف التنسيقات القديمة لـ .service-item و .service-icon ⛔️ */
/* .service-item {...} 
.service-item:hover {...} 
.service-icon {...} 
*/

/* 💡 تنسيقات البطاقات المعتمدة على الصور (الجديدة) 💡 */
.service-image-card {
    background: white;
    border-radius: 20px;
    overflow: hidden; /* مهم لضمان الزوايا الناعمة للصورة */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eee;
    height: 100%;
    text-align: center;
}

.service-image-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.card-img-top-holder {
    height: 180px; /* ارتفاع الصورة */
    background-size: cover;
    background-position: center;
    position: relative;
    border-bottom: 5px solid var(--secondary-color); /* شريط لوني فاصل */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* style.css (التعديل الخاص بتغيير موضع الأيقونة داخل الصورة) */

/* الأيقونة العائمة فوق الصورة */
.service-overlay-icon {
    /* ❌ حذف الخواص القديمة: top: 50%; left: 50%; transform: translate(-50%, -50%); ❌ */
    
    /* 💡 التنسيقات الجديدة: وضع الأيقونة في الزاوية السفلية اليمنى 💡 */
    position: absolute;
    bottom: 10px;        /* مسافة 10 بكسل من الأسفل */
    right: 10px;         /* مسافة 10 بكسل من اليمين (في تصميم RTL) */
    
    font-size: 0.5rem;   /* قمت بتصغير حجمها قليلاً لتبدو كشارة */
    color: white;
    background-color: var(--primary-color); /* استخدام لون أساسي قوي */
    padding: 8px;
    border-radius: 10px; /* جعلها مربعة ناعمة */
    opacity: 0.9;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* إضافة ظل بسيط لإبرازها */
}

.service-image-card:hover .service-overlay-icon {
    /* عند التحويم، يمكن جعلها أكثر وضوحاً */
    opacity: 1;
    transform: scale(1.05); /* تكبير بسيط عند التحويم */
}

/* ملاحظة: يمكنك إزالة التنسيق القديم:
.service-image-card:hover .service-overlay-icon {
    opacity: 1;
    background-color: var(--primary-color);
}
 واستبداله بتنسيق التكبير (scale) أعلاه
*/


.service-image-card:hover .service-overlay-icon {
    opacity: 1;
    background-color: var(--primary-color);
}

.card-body-content {
    padding: 20px 15px;
}

.card-body-content h5 {
    color: var(--text-dark);
    margin-bottom: 5px;
    font-weight: 700;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .card-img-top-holder {
        height: 150px;
    }
}

/* --- Footer --- */
footer {
    background-color: #1a1a1a;
    color: white;
    padding: 60px 0 20px 0;
}
footer h5 {
    color: var(--secondary-color);
    margin-bottom: 20px;
    font-weight: 700;
}
footer ul li {
    margin-bottom: 10px;
}
footer a {
    color: #ccc;
    text-decoration: none;
    transition: 0.3s;
}
footer a:hover {
    color: var(--secondary-color);
}
.social-icons a {
    margin-left: 15px;
    font-size: 1.2rem;
    color: white;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .hero-content h1 { font-size: 2.5rem; }
    .feature-card { margin-bottom: 30px; }
    .section-padding { padding: 50px 0; }
}




.testimonial-inner {
    max-width: 800px; /* تحديد عرض الدوارة لتكون مركزية ومريحة للقراءة */
    margin: 0 auto;   /* توسيط الدوارة */
    border: 1px solid #e0e0e0;
    position: relative;
    z-index: 1; /* لتكون فوق الأزرار الجانبية */
}

.testimonial-item {
    padding: 20px;
}

.quote-icon {
    font-size: 3rem;
    color: var(--secondary-color);
    line-height: 0;
}

.testimonial-text {
    font-size: 1.25rem;
    color: var(--text-dark);
    line-height: 1.8;
}

.customer-info h5 {
    color: var(--primary-color);
}

.carousel-control-prev,
.carousel-control-next {
    width: 5%; /* تصغير عرض منطقة الضغط على الأزرار */
    opacity: 1;
}

/* تصميم أزرار التنقل (الأسهم) */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: var(--primary-color);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    opacity: 0.8;
    background-size: 50%; /* تصغير حجم الأيقونة داخل الدائرة */
    transition: 0.3s;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    opacity: 1;
}

/* تصميم المؤشرات (الدوائر الصغيرة في الأسفل) */
.carousel-indicators button {
    background-color: var(--secondary-color);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 5px;
    border: 0;
    opacity: 0.5;
    transition: opacity 0.3s;
}
.carousel-indicators .active {
    opacity: 1;
    background-color: var(--primary-color);
}


/* Mobile adjustments */
@media (max-width: 768px) {
    .testimonial-inner {
        padding: 20px;
        border-radius: 20px;
    }
    .testimonial-text {
        font-size: 1rem;
    }
}


/* ... (كود CSS الموجود مسبقاً في ملف style.css) ... */

/* --- Testimonials Section (تحسين عناصر التحكم) --- */

/* style.css (التعديلات اللازمة) */

/* ------------------------------------- */
/* --- Testimonials Section (إصلاحات) --- */
/* ------------------------------------- */

.testimonial-inner {
    max-width: 800px; 
    margin: 0 auto;   
    border: 1px solid #e0e0e0;
    position: relative;
    z-index: 1; 
}

/* 1. تنسيق أزرار التنقل الجانبية (الأسهم) - تصميم موحد */
.carousel-control-prev,
.carousel-control-next {
    width: 50px; /* تقليل العرض لمنع ظهور شريط التمرير الأفقي */
    opacity: 1;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 35px; /* تصغير حجم الدائرة قليلاً */
    height: 35px;
    background-color: var(--primary-color);
    border-radius: 50%;
    opacity: 0.85;
    background-size: 35%; /* تصغير حجم أيقونة السهم داخل الدائرة */
    transition: 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); /* ظل أوضح */
}

/* 2. تنسيق المؤشرات (النقاط) - لإصلاح مشكلة العرض الزائد */
.carousel-indicators {
    /* جعلها نسبية لتكون متجاوبة بشكل أفضل */
    position: relative;
    bottom: auto;
    margin-top: 30px; 
}

.carousel-indicators button {
    /* 💡 تم تحديد عرض وارتفاع ثابت هنا لحل مشكلة العرض الكبير 💡 */
    width: 8px;
    height: 8px;
    
    background-color: var(--secondary-color);
    border-radius: 50%;
    margin: 0 6px;
    border: 0;
    opacity: 0.4; /* تقليل الشفافية قليلاً */
    transition: opacity 0.3s, transform 0.3s;
}
.carousel-indicators .active {
    opacity: 1;
    background-color: var(--primary-color);
    transform: scale(1.3); /* إبراز النقطة النشطة بشكل أوضح */
}


/* ------------------------------------- */
/* --- تحسين الاستجابة على الجوال (@media) --- */
/* ------------------------------------- */
@media (max-width: 768px) {
    .testimonial-inner {
        padding: 30px 15px;
        border-radius: 20px;
    }
    .testimonial-text {
        font-size: 1.05rem;
    }

    /* 💡 السماح بظهور الأسهم مع تصغيرها قليلاً على الجوال 💡 */
    .carousel-control-prev,
    .carousel-control-next {
        width: 10%; /* عرض بسيط */
    }
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 30px; /* تصغير الدائرة على الجوال */
        height: 30px;
        background-size: 30%; /* تصغير حجم الأيقونة */
    }

    /* تنسيق المؤشرات على الجوال (نفس المقاسات الصغيرة) */
    .carousel-indicators {
        margin-top: 15px; 
    }
}


/* style.css (إضافة أو تعديل هذه التنسيقات) */

/* 1. تنسيق الدوائر (المؤشرات) بشكل عام */
.carousel-indicators {
    /* التأكد من توسيط جميع المؤشرات داخل حاويتها */
    justify-content: center;
    /* إزالة أي هامش علوي غير مرغوب فيه */
    margin-top: 15px;
    margin-bottom: 0; 
    /* وضع المؤشرات فوق المحتوى قليلاً إذا لزم الأمر */
    position: relative;
}

/* 2. تنسيق كل دائرة (زر) بشكل فردي */
.carousel-indicators button {
    /* إعطائها شكل دائري و حجم ثابت */
    height: 10px;
    width: 10px;
    border-radius: 50%;
    
    /* لون المؤشرات غير النشطة (الخلفية والحدود) */
    background-color: #ccc;
    border: 1px solid #ccc;
    
    /* ترك مسافة بين كل دائرة والأخرى */
    margin: 0 4px;
    
    /* إخفاء النص الداخلي إذا وجد */
    text-indent: -999px;
    opacity: 0.7; /* جعلها باهتة قليلاً */
    transition: all 0.3s ease; /* إضافة تأثير حركي للمسة جمالية */
}

/* 3. تنسيق الدائرة النشطة (التي تشير إلى الرأي الحالي) */
.carousel-indicators .active {
    /* جعل الدائرة النشطة أكثر وضوحاً */
    background-color: var(--primary-color, #4CAF50); /* استخدم اللون الأساسي لموقعك */
    border-color: var(--primary-color, #4CAF50);
    opacity: 1; 
    /* يمكن جعلها أكبر قليلاً للتمييز */
    height: 0.5px; 
    width: 0.5px;
}

/* 4. تعديل خاص لشاشات الجوال */
@media (max-width: 768px) {
    .carousel-indicators {
        /* زيادة الهامش العلوي قليلاً لفصلها عن محتوى الرأي في الجوال */
        margin-top: 25px; 
        /* التأكد من أنها تظهر بشكل صحيح على الشاشات الصغيرة */
        padding: 0 10px;
    }
}


/* style.css (إضافة تنسيقات الأزرار الجديدة في نهاية الملف) */

/* تنسيق أزرار الـ Hero لجعلها أكبر وأجمل */
.custom-hero-btn {
    font-size: 1.15rem; /* تكبير الخط قليلاً */
    padding: 12px 35px; /* حشو أكبر لجعل الزر أطول وأعرض */
    font-weight: 600; /* جعل الخط سميكاً */
    border-radius: 50px; /* جعل الأزرار أكثر استدارة (Pill Shape) */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.custom-hero-btn:hover {
    transform: translateY(-3px); /* رفع الزر قليلاً عند التحويم */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* إضافة ظل أوضح */
}

/* تنسيق الزر الثاني (الحدودي) لجعله أكثر وضوحاً */
.btn-outline-light {
    color: white !important; /* ضمان بقاء النص باللون الأبيض */
    border-color: white !important; /* ضمان بقاء الإطار باللون الأبيض */
    background-color: transparent !important;
}

.btn-outline-light:hover {
    background-color: white !important;
    color: var(--primary-color) !important;
}


/* ==================================== */
/* 🔳 تعديل زر "تصفح خدماتنا" في قسم الهيرو إلى خلفية بيضاء */
/* ==================================== */

.hero-section .custom-hero-btn.btn-outline-light {
    /* 1. جعل الخلفية بيضاء صريحة */
    background-color: #ffffff !important; 
    
    /* 2. جعل لون النص داكناً لضمان القراءة على الخلفية البيضاء */
    color: #333333 !important; 
    
    /* 3. مطابقة لون الحدود مع الخلفية للحصول على مظهر أنيق */
    border-color: #ffffff !important; 
}

/* 4. (اختياري) إضافة تأثير التمرير (Hover) */
.hero-section .custom-hero-btn.btn-outline-light:hover {
    background-color: #f1f1f1 !important; /* لون رمادي فاتح عند التمرير */
    border-color: #f1f1f1 !important;
    color: #000000 !important; /* لون أسود للنص عند التمرير */
}

/* --- تحسين الاستجابة على الجوال (@media) --- */
@media (max-width: 768px) {
    .custom-hero-btn {
        width: 85%; /* جعل الزر يأخذ عرضاً واسعاً على الجوال */
        max-width: 300px; /* لضمان عدم تمدده بشكل مبالغ فيه */
        font-size: 1.1rem;
        padding: 12px 20px;
    }
    
    .hero-buttons {
        /* التأكد من توسيط الأزرار المكدسة */
        align-items: center !important;
    }
}



/* style.css (تعديل تنسيق الزر الرئيسي) */

.btn-main {
    background-color: var(--primary-color);
    color: white;
    padding: 10px 25px;
    border-radius: 50px;
    
    /* 💡 إضافة خاصية الحركة هنا 💡 */
    transition: 0.5s ease-in-out; 
    
    border: 2px solid var(--primary-color);
    /* التأكد من أن الزر يظهر فوق العناصر الأخرى */
    z-index: 100;
}
/* ================================================= */
/* تعديل خاص لجعْل البطاقات بعرض 50% في وضع الهاتف */
/* ================================================= */

/* نستخدم Media Query لتطبيق التعديل فقط على الشاشات الصغيرة (الهواتف) */
/* Bootstrap يعتبر الشاشات حتى 576px شاشات صغيرة جداً (XS) */
/* ================================================= */
/* تعديل خاص للهاتف (أقل من 576 بكسل) */
/* ================================================= */

@media (max-width: 576px) { 
    
    /* 1. جعل كل بطاقة تأخذ 50% من العرض (لإظهار بطاقتين بجانب بعض) */
    .row.g-4 > [class*="col-"] {
        width: 50% !important; 
        /* تقليل الحواف الجانبية بين البطاقات */
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    /* 2. تقليص حجم البطاقة نفسها (تقليل الحواف الداخلية) */
    .feature-card {
        padding: 15px !important;
        margin-bottom: 50px !important; /* تقليل المسافة الداخلية للبطاقة */
    }
    
    /* 3. التحكم في حجم خلفية الأيقونات (icon-box) */
    .feature-card .icon-box {
        width: 80px !important;     /* تقليل العرض */
        height: 80px !important;    /* تقليل الطول */
        line-height: 35px !important; /* ضبط ارتفاع النص لتوسيط الأيقونة عمودياً */
        font-size: 1.1rem !important; /* تقليل حجم رمز الأيقونة */
        margin-bottom: 10px !important; /* تقليل المسافة أسفل الأيقونة */
    }
    .feature-card .h4 {
        /* زيادة الهامش العلوي (margin-top) لدفع العنوان بعيداً عن الأيقونة */
        margin-top: 50px !important; 
        
        /* تقليل الحجم ليتناسب */
        font-size: 1rem !important; 
        margin-bottom: 5px !important;
    }
    /* 4. تقليل حجم الخطوط الداخلية لضمان عدم تداخل النص */
    .feature-card .h4 {
        font-size: 1rem !important; /* تصغير عنوان البطاقة */
        margin-bottom: 10px !important;
    }

    .feature-card .text-muted {
        font-size: 0.75rem !important; /* تصغير وصف البطاقة */
    }
}


/* ================================================= */
/* تعديل خاص لقسم الآراء في وضع الهاتف (3 بطاقات في الصف) */
/* ================================================= */

/* ================================================= */
/* تعديل خاص لقسم الآراء في وضع الهاتف (3 بطاقات في الصف) */
/* ================================================= */

@media (max-width: 576px) { 
    
    /* 1. جعل كل بطاقة تأخذ 33.33% من العرض (لإظهار 3 بجانب بعض) */
    #testimonials .row > .col-md-4 {
        width: 33.33% !important; 
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
    
    /* 2. تقليص حجم البطاقة بشكل كبير */
    #testimonials .testimonial-item {
        padding: 8px 5px !important; 
        border-radius: 8px !important; 
    }

    /* ****** 3. تقليص حجم نص الرأي بدلاً من إخفائه ****** */
    #testimonials .testimonial-text {
        font-size: 0.55rem !important; /* تقليص حجم الخط بشدة */
        line-height: 1.2 !important; /* تقليل التباعد بين الأسطر */
        margin-bottom: 5px !important; /* تقليل المسافة السفلية */
    }
    /* ************************************************* */

    /* 4. تقليص حجم الأيقونات والنصوص المتبقية */
    #testimonials .quote-icon {
        font-size: 0.8rem !important; /* تصغير حجم أيقونة الاقتباس */
        margin-bottom: 3px !important;
    }

    #testimonials .customer-info {
        margin-top: 3px !important; 
    }

    #testimonials .customer-info h5 {
        font-size: 0.7rem !important; 
        margin-bottom: 2px !important;
    }
    
    #testimonials .customer-info .small {
        display: none !important; 
    }

    #testimonials .rating {
        font-size: 0.6rem !important; 
        margin-top: 3px !important;
    }
}


/* ==================================== */
/* 🚀 زر الواتساب العائم (Floating WhatsApp Button) */
/* ==================================== */

.floating-whatsapp-btn {
    /* الموقع الثابت في الشاشة (أسفل اليسار / أو اليمين للصفحات العربية) */
    position: fixed;
    bottom: 20px;
    left: 20px; /* يمكن تغييرها إلى right: 20px إذا لم يكن لديك زر آخر في اليمين */
    
    /* تصميم البطاقة */
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 50px; /* لجعله بشكل حبة دواء */
    background-color: #25D366; /* لون الواتساب الأخضر */
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    
    /* الظل والحركة */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
    z-index: 1000; /* لضمان ظهوره فوق كل العناصر */
}

/* تنسيق أيقونة الواتساب */
.floating-whatsapp-btn .whatsapp-icon {
    font-size: 24px;
    margin-left: 8px; /* مسافة بين الأيقونة والنص */
    line-height: 1; /* لضمان توسيط الأيقونة */
}



/* تأثير التكبير عند المرور بالماوس (اختياري) */
.floating-whatsapp-btn:hover {
    background-color: #128C7E; /* لون أغمق عند التمرير */
    transform: scale(1.05); /* تكبير بسيط */
}


/* ==================================== */
/* 🚀 تنسيق قسم الهيرو (Hero Section) مع الخلفية والتراكب */
/* ==================================== */

.hero-section {
    /* 1. تحديد ارتفاع مناسب للقسم لكي تظهر الصورة */
    min-height: 60vh; 
    padding: 100px 0; /* مسافة داخلية لتوسيط المحتوى */
    
    /* 2. تطبيق الصورة والتراكب (اللون الأصفر الشفاف) */
    background-image: 
        /* طبقة التراكب (Overlay): لون أصفر شفاف بنسبة 50% */
        linear-gradient(rgba(255, 193, 7, 0.253), rgba(255, 193, 7, 0.233)), 
        /* الصورة الفعلية للخلفية (تأكد من المسار) */
        url('/images/cleaninghero.jpg'); 
        
    background-size: cover; /* لضمان تغطية الصورة للقسم بالكامل */
    background-position: center center; /* لتوسيط الصورة */
    background-attachment: fixed; /* (اختياري) لإعطاء تأثير بارالكس (Parallax) */

    /* 3. توسيط المحتوى داخلياً (النصوص والأزرار) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center; 
}

/* 4. تنسيق النصوص والأزرار لضمان ظهورها بوضوح فوق الخلفية */
.hero-section h1,
.hero-section p {
    color: #fff; /* لجعل النصوص بيضاء */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* إضافة ظل للنص لزيادة وضوحه */
}

.hero-section .btn-outline-light {
    border-color: #fff;
}



.navbar-brand {
    /* لجعل الصورة والنص يظهران بجانب بعضهما البعض */
    display: flex;
    align-items: center; 
    padding: 0;
}

.logo-image {
    /* تحديد الحجم */
    width: 45px;  
    height: 45px; 
    
    /* لجعل الصورة دائرية */
    border-radius: 50%; 
    object-fit: cover; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 
}

.site-name-text {
    /* تنسيق النص */
    font-size: 1rem; /* حجم الخط */
    font-weight: 700; /* جعل الخط سميكاً */
    margin-right: 10px; /* إضافة مسافة بين الصورة والنص */
    color: var(--bs-dark); /* يمكنك استخدام لون أساسي أو لون داكن */
    
    /* لضمان التوسيط العمودي */
    line-height: 1; 
}

/* تعديل للمظهر على شريط التنقل */
.navbar {
    padding-top: 10px;
    padding-bottom: 10px;
}


/* ==================================== */
/* 🖼️ تنسيق قسم نبذة عن شركتنا (About Section) */
/* ==================================== */

.about-section .about-content {
    /* للحصول على شكل البطاقة المعتاد في التصميم (تماماً مثل آراء العملاء) */
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.about-section .lead {
    color: #555;
    font-weight: 500;
}

.about-section .about-list li {
    font-size: 1.1rem;
    color: #333;
    /* مسافة تحت كل عنصر من عناصر القائمة */
    margin-bottom: 5px;
}

/* تنسيق الأيقونة داخل القائمة */
.about-section .about-list .bi {
    font-size: 1.2rem;
}

/* تخصيص لون الأيقونة */
.about-section .about-list .text-primary {
    /* استخدم اللون الأساسي لموقعك أو لون أزرق جذاب */
    color: var(--bs-primary) !important; 
}

/* التنسيق على الهاتف (اختياري) */
@media (max-width: 768px) {
    .about-section .about-content {
        padding: 20px !important;
    }
    .about-section .about-list li {
        font-size: 1rem;
    }
}


@media (max-width: 767.98px) {
    /* تطبيق المسافة على مجموعة الأيقونات فقط في وضع الهاتف */
    .social-icons {
        margin-top: 15px !important; /* نستخدم !important لضمان تجاوز تنسيق Bootstrap */
    }
}



/* هذا الكود يجب إضافته إلى ملف التنسيقات (CSS) الخاص بك إذا فشل الحل السابق */
/* هذا الكود يجب إضافته إلى ملف التنسيقات (CSS) الخاص بك إذا فشل الحل السابق */
@media (max-width: 767.98px) {
    .social-icons {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }
}






      .elegant-paragraph {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    padding: 25px 40px;
    max-width: 700px;
    margin: 30px auto;
    position: relative;
    overflow: hidden;
    animation: fadeInUp 1s ease-out 0.3s both;
}

/* تأثير لامع يتحرك */
.elegant-paragraph::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shine 3s infinite;
}


.elegant-paragraph p {
    color: #000000;
    font-size: 20px;
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 1;
    font-weight: 500;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.clean-icon {
    display: inline-block;
    font-size: 24px;
    margin-left: 8px;
    animation: bounce 2s ease-in-out infinite;
}

.decorative-line {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ffffff, transparent);
    margin: 15px auto 0;
    border-radius: 2px;
    animation: pulse-line 2s ease-in-out infinite;
}


/* أنيميشن الظهور من الأسفل */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* أنيميشن اللمعة */
@keyframes shine {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 150%;
    }
}

/* أنيميشن القفز */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* أنيميشن الخط */
@keyframes pulse-line {
    0%, 100% {
        opacity: 0.6;
        width: 80px;
    }
    50% {
        opacity: 1;
        width: 120px;
    }
}

/* تأثير عند المرور */
.elegant-paragraph:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);
    transition: all 0.3s ease;
}

/* استجابة للموبايل */
@media (max-width: 768px) {
    .elegant-paragraph {
        padding: 20px 25px;
    }
    
    .elegant-paragraph p {
        font-size: 18px;
    }
    
    .clean-icon {
        font-size: 20px;
    }
}