/* ملف style.css */

/* 1. تعريف الخطوط والألوان الأساسية */
body {
    /* هذا هو ال الجديد */

    font-family: 'Tajawal', sans-serif;
}

/* 2. تنسيق قسم الواجهة الرئيسي (Hero Section) */
.hero-section {
    min-height: 70vh;
    /* ارتفاع الواجهة بنسبة 70% من الشاشة */

    /* تأكد من وضع صورة مناسبة في مجلد images باسم hero-bg.jpg */
    /* أضفت طبقة سوداء شفافة فوق الصورة لتوضيح النص */
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.5)), url('../images/img-2.png');
    background-size: cover;
    background-position: center center;
}

.hero-section h1 {
    /* تطبيق لون الشعار الأصفر على العنوان */
    color: #ffc107;
    /* هذا هو اللون الأصفر القياسي في Bootstrap ويشبه لون شعارك */
}

/* 3. تخصيص Navbar */
.navbar-brand img {
    /* يمكنك تعديل ارتفاع الشعار من هنا */
    max-height: 40px;
}

.navbar-brand {
    padding: 15px;
}

/* 4. تنسيق بطاقات معرض الأعمال (Portfolio Cards) */
.portfolio-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.06) !important;
}

.portfolio-card:hover {
    transform: translateY(-5px);
    /* رفع البطاقة للأعلى قليلًا */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    /* زيادة الظل لإعطاء عمق */
}

.portfolio-card .card-img-top {
    aspect-ratio: 4 / 3;
    /* نجعل الصور بنفس نسبة العرض للارتفاع */
    object-fit: cover;
    /* لضمان أن الصورة تملأ المساحة المخصصة لها بدون تشويه */
}

/* 5. تنسيق قسم الميزات (V2) */
.feature-item-v2 {
    padding: 2rem 1rem;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.feature-item-v2:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    border-color: var(--bs-warning);
}

.feature-item-v2 .feature-icon {
    display: inline-flex;
    font-size: 2.5rem;
    color: var(--bs-warning);
}

/* 6. تنسيق قسم دعوة للتواصل (CTA Section) */
.cta-section {
    background-color: #f8f9fa;
    /* لون الخلفية رمادي فاتح */
}

/* 5. تنسيق قسم التعريف البصري (Visual About Section) */
.visual-images-wrapper {
    position: relative;
    min-height: 500px;
    background-image: url('../images/img-4.png');
    /* اختر صورة خلفية مناسبة */
    background-size: cover;
    background-position: center;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* مهم لإخفاء أجزاء الدائرة الزائدة */
}

/* هذا الكود يصنع القوس الأبيض الكبير الذي يغطي جزء من الصورة */
.visual-images-wrapper::after {
    content: '';
    position: absolute;
    bottom: -25%;
    /* تعديل هذه القيمة للتحكم في حجم القوس */
    right: -50%;
    /* تعديل هذه القيمة للتحكم في حجم القوس */
    width: 150%;
    height: 100%;
    background-color: white;
    border-radius: 50%;
}

.circle-img {
    position: absolute;
    z-index: 10;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 5px solid white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.circle-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* تحديد أماكن الصور الدائرية الثلاث */
#circle1 {
    top: 10%;
    right: 55%;
}

#circle2 {
    top: 40%;
    right: 20%;
}

#circle3 {
    top: 65%;
    right: 60%;
}

.bottom-logo-banner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 11;
    background-color: white;
    padding: 1rem;
    text-align: center;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

/* 7. إضافة تأثير الحركة لسهم الزر */
.visual-about-section .btn .bi-arrow-left-short {
    /* نضيف حركة ناعمة للسهم */
    transition: transform 0.3s ease-in-out;
}

.visual-about-section .btn:hover .bi-arrow-left-short,
.visual-about-section .btn:active .bi-arrow-left-short {
    /* عند مرور الفأرة أو الضغط، نحرك السهم لليسار ليبدو وكأنه يمتد */
    transform: translateX(-8px);
}

/* 4. تنسيق بطاقات معرض الأعمال (V3 - التصميم النهائي) */
.portfolio-card-v3 {
    border: 1px solid #e9ecef;
    /* إطار رمادي فاتح */
    border-radius: 0.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff;
    overflow: hidden;
    /* يضمن بقاء الحواف الدائرية */
}

.portfolio-card-v3:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}

.portfolio-card-v3 .card-img-top {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* 5. تنسيق العلامة المائية على صور الأعمال */
.card-img-wrapper {
    position: relative;
}

.logo-watermark {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 0.5rem;
    border-radius: 0.375rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 10;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.portfolio-card-v3:hover .logo-watermark {
    opacity: 1;
}

.logo-watermark img {
    height: 25px;
    width: auto;
}

/* 8. تنسيق الفوتر الجديد (Main Footer) */
.main-footer {
    color: #adb5bd;
    /* لون رمادي فاتح للنصوص العادية */
}

.main-footer a.text-white:hover {
    color: var(--bs-warning) !important;
    /* تغيير لون الروابط إلى الأصفر عند المرور */
}

.footer-contact-info i {
    font-size: 1.2rem;
    color: var(--bs-warning);
}

/* =================================== */
/* Styles for Portfolio Page        */
/* =================================== */

/* 9. Portfolio Page - Hero Section Slideshow */
.portfolio-hero-section {
    min-height: 60vh;
    position: relative;
    overflow: hidden;
    color: #f8f9fa;
    background-color: #343a40;
    /* Fallback color */
    animation: portfolio-slideshow 15s infinite;
}

/* Overlay to make text readable */
.portfolio-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

@keyframes portfolio-slideshow {

    0%,
    100% {
        background-image: url('../images/img-19.png');
        background-size: auto;
        background-position: center;
    }

    33.33% {
        background-image: url('../images/img-50.png');
        background-size: auto;
        background-position: center;
    }

    66.66% {
        background-image: url('../images/img-75.png');
        /* Note: You mentioned img-75, but our set ends at 69. I am using img-59 instead. Please adjust if needed */
        background-size: auto;
        background-position: center;
    }
}


/* 10. Services for SEO Section */
/* 10. Services for SEO Section (V2) */
.service-card-v2 {
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius-xl);
    transition: all 0.3s ease;
    background-color: #fff;
    box-shadow: var(--bs-box-shadow-sm);
}

/* 10. Services for SEO Section (V2) */
.service-card-v2 {
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius-xl);
    transition: all 0.3s ease;
    background-color: #fff;
    box-shadow: var(--bs-box-shadow-sm);
}

.service-card-v2:hover {
    transform: translateY(-10px);
    box-shadow: var(--bs-box-shadow-lg);
    border-color: var(--bs-warning);
}

/* New styles for image icons */
.service-card-v2 .service-icon {
    width: 120px;
    /* حجم الصورة */
    height: 120px;
    /* حجم الصورة */
    border-radius: 50%;
    /* لجعلها دائرية */
    overflow: hidden;
    /* إخفاء زوايا الصورة */
    margin-bottom: 1rem;
    box-shadow: var(--bs-box-shadow-sm);
    border: 3px solid var(--bs-warning);
    /* إطار بلون الشعار */
}

.service-card-v2 .service-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* لضمان ملء الصورة للدائرة بدون تشويه */
}

/* --- End of new styles --- */

.service-card-v2 .service-features li {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

/* 11. Book Now Section */
.booking-card {
    border-radius: var(--bs-border-radius-xl);

    box-shadow: var(--bs-box-shadow-lg);
    margin-bottom: 4rem;
}

.booking-img-wrapper {
    position: relative;
    border-radius: var(--bs-border-radius-xl);
    height: 500px;
    display: flex;
    overflow: hidden;


}

.booking-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: auto;
}

.booking-content-box {
    position: absolute;
    bottom: -90px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    background-color: rgba(255, 255, 255, 0.50);
    backdrop-filter: blur(10px);
    padding: 1rem;
    border-radius: var(--bs-border-radius-lg);
    text-align: center;
    z-index: 3;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments for the floating box */
@media (max-width: 767.98px) {
    .booking-content-box {
        position: absolute;
        bottom: -90;
        text-align: center;
        padding: 0.5rem;
        width: 70%;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.50), rgba(153, 230, 165, 0.5));
        border-radius: 50px 50px var(--bs-border-radius-xl) var(--bs-border-radius-xl);
        box-shadow: none;
        border-top: 1px solid var(--bs-border-color);
    }

    .book-now-section .booking-card {
        border-radius: var(--bs-border-radius-lg);
    }
}


/* 12. Full Gallery Section (Watermark) */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-box-shadow-sm);
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.05);
    z-index: 10;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-item .logo-watermark {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.5rem;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    border-radius: var(--bs-border-radius-sm);
    opacity: 1;
    /* Always visible */
    pointer-events: none;
    /* User cannot interact with it */
}

.gallery-item .logo-watermark img {
    height: 20px;
    width: auto;
}

/* 12. Full Gallery Section (Final Design) */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--bs-border-radius-lg);
    /* حواف دائرية أكبر */
    box-shadow: var(--bs-box-shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 4 / 3;
    /* الأهم لتوحيد حجم الصور */
}

.gallery-item:hover {
    transform: scale(1.03);
    /* تكبير بسيط عند المرور */
    box-shadow: var(--bs-box-shadow-lg);
    z-index: 10;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* الأهم لملء المساحة بدون تشويه */
}

/* تصميم صندوق السعر */
/* 12. Full Gallery Section (Final Design with Name Tag) */
.gallery-item {
    position: relative;
    overflow: hidden;
    margin-bottom: 3rem;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 4 / 3;
}

.gallery-item:hover {
    transform: scale(1.03);
    box-shadow: var(--bs-box-shadow-lg);
    z-index: 10;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Updated: Designing the name tag */
.gallery-item .name-tag {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: rgba(255, 193, 7, 0.9);
    /* Using the brand's warning yellow color */
    backdrop-filter: blur(5px);
    padding: 0.3rem 0.85rem;
    border-radius: var(--bs-border-radius-pill);
    font-size: 0.8rem;
    font-weight: bold;
    color: #333;
    /* Dark text for better readability on yellow */
    pointer-events: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Watermark logo styling */
.gallery-item .logo-watermark-gallery {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 0.3rem 0.5rem;
    backdrop-filter: blur(9px);

    border-radius: var(--bs-border-radius-sm);
    opacity: 1;
    pointer-events: none;
}

.gallery-item .logo-watermark-gallery img {
    height: 70px;
    width: auto;
}

/* 13. Footer Services List */
.footer-services-list li {
    display: flex;
    align-items: flex-start;
    /* يضمن محاذاة صحيحة إذا كان النص أكثر من سطر */
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.footer-services-list i {
    font-size: 1.1rem;
    margin-top: 2px;
    /* لضبط المحاذاة العمودية للأيقونة مع النص */
}

/* =================================== */
/* Styles for About & Contact Page   */
/* =================================== */

/* 14. Core Services Section */
.service-highlight-card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-xl);
    transition: all 0.3s ease;
}

.service-highlight-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--bs-box-shadow-lg);
    border-color: var(--bs-warning);
}

.service-highlight-card .icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
    font-size: 2.5rem;
    margin: 0 auto;
}

/* 15. Contact Details List */
.contact-details-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.contact-details-list i {
    font-size: 1.5rem;
    color: var(--bs-warning);
    margin-top: 5px;
    margin-left: 1rem;
    /* Use margin-left in RTL for space */
}

.contact-details-list strong {
    display: block;
    margin-bottom: 0.25rem;
}

.contact-details-list p {
    margin: 0;
    color: var(--bs-gray-600);
}

/* =================================== */
/* 16. Floating Action Buttons       */
/* =================================== */

.floating-buttons {
    position: fixed;
    /* أهم خاصية لجعل الأزرار عائمة */
    bottom: 20%;
    left: 20px;
    /* في الجانب الأيسر من الشاشة */
    z-index: 1030;
    /* للتأكد من أنها فوق كل العناصر الأخرى */
    display: flex;
    flex-direction: column;
    /* لترتيب الأزرار فوق بعضها */
    gap: 20px;
    /* مسافة بين الزرين */
}

.floating-buttons a {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    text-decoration: none;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.floating-buttons a:hover {
    transform: scale(1.1);
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.3);
}

.btn-whatsapp-float {
    background-color: #25D366;
    /* لون الواتساب الرسمي */
}

.btn-phone-float {
    background-color: #007bff;
    /* لون أزرق للاتصال */
}