/* ========================================= */
/* 1. التنسيقات العامة */
/* ========================================= */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.btn-orange {
    background-color: #de641b;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s ease;
}

.btn-orange:hover {
    background-color: #c45515;
}

/* ========================================= */
/* 2. شريط التنقل (Navbar) والشعار */
/* ========================================= */
.navbar {
    background-color: white;
    border-bottom: 2px solid #007bff;
    padding: 10px 20px;
    display: flex !important; /* التأكد من تفعيل الفليكس */
    justify-content: center !important; /* إجبار المحاذاة للمنتصف */
    align-items: center;
    position: relative;
}

.logo {
    height: 30vh;
    vertical-align: middle;
    transition: height 0.3s ease;
}

.nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links a {
    color: #333;
    margin: 0 15px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
}

.nav-links a:hover {
    color: #fff;
    background-color: #de641b;
    padding: 6px;
    border-radius: 5px;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 2px 0;
    border-radius: 2px;
}

/* ========================================= */
/* 3. سلايدر المشاريع الرئيسي */
/* ========================================= */
.hero-projects-slider-section {
    position: relative;
    height: 80vh;
    overflow: hidden;
    background: #000;
}

.hero-slider-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.hero-slide { 
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%; 
    background-size: cover;
    background-position: center; 
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1;
}

.hero-slide.active { opacity: 1; z-index: 2; }

.hero-slide-overlay { 
    background: rgba(0,0,0,0.3);
    width: 100%; height: 100%; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.hero-slide-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    transform: translateY(30px);
    transition: 0.8s;
    opacity: 0;
    text-shadow: 2px 2px 5px black;
}

.hero-slide.active .hero-slide-title { transform: translateY(0); opacity: 1; }

.hero-slider-btn { 
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
    background: rgba(255,255,255,0.2); border: none; color: white; padding: 15px; cursor: pointer; font-size: 1.5rem;
}
.hero-slider-btn:hover { background: #de641b; }
.prev { left: 20px; }
.next { right: 20px; }

/* ========================================= */
/* 4. كروت الخدمات والمشاريع (مدمجة) */
/* ========================================= */
.service-card, .projects-card {
    display: inline-block;
    margin: 1.5%;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    background-color: #fff;
    cursor: pointer;
}

.service-card:hover, .projects-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* تأثير خاص للمشاريع فقط */
.projects-card:hover {
    background: rgba(222, 100, 27, 0.7);
    text-shadow: 0 0 5px #fff; /* تم تصحيح الكود هنا ليعمل بشكل سليم */
}

.service-image-container, .projects-image-container {
    height: 200px;
    position: relative;
}

.service-image, .projects-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-icon-circle, .projects-icon-circle {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background-color: #de641b;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    border: 3px solid white;
}

.service-content, .projects-content {
    padding: 40px 20px 20px;
    text-align: center;
}

.service-content h3, .projects-content h3 {
    color: #007bff;
    margin-bottom: 10px;
}

/* ========================================= */
/* 5. سلايدر عرض المشروع والمودال (Modal) */
/* ========================================= */
#carouselExample {
    background: transparent !important;
    padding: 0 !important;
    margin-top: 15px;
    max-width: 100%;
}

.carousel-inner {
    border-radius: 10px;
    overflow: hidden;
    background: #f9f9f9;
}

.carousel-item img {
    /* اجعل الطول ثابتاً كما أردت */
    height: 350px; 
    max-height: 350px;
    
    /* اجعل العرض يملأ الحاوية تماماً */
    width: 100%; 
    
    /* هذا السطر سحري: يمنع تمطط الصورة ويحافظ على أبعادها داخل الـ 350px */
    object-fit: cover; 
    
    margin: 0 auto;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    width: 30px;
    height: 30px;
    background-color: #0a0a0a;
    border-radius: 20px;
}

.modal-overlay {
    display: none; position: fixed; z-index: 10000; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9); justify-content: center; align-items: center;
}

.modal-content { max-width: 90%; max-height: 80%; border: 5px solid white; border-radius: 5px; }

.close-btn { position: absolute; top: 20px; right: 35px; color: white; font-size: 40px; cursor: pointer; }

/* حركة شريط العملاء */
@keyframes scroll-left {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* ========================================= */
/* 6. التجاوب مع الشاشات (Media Queries) */
/* ========================================= */

/* الشاشات الكبيرة */
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 100%;  
    }
    .service-card, .projects-card {
        width: 25%;
    }
}

/* الشاشات المتوسطة */
@media (min-width: 770px) and (max-width: 1199px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 100%;  
    }
}

/* الشاشات الصغيرة (الجوال) */
@media (max-width: 768px) {
    .logo { height: 10vh; } 
    
    .menu-toggle { display: flex; }

    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background-color: white;
        border-bottom: 2px solid #007bff;
        text-align: center;
        padding: 10px 0;
        z-index: 1000;
    }

    .nav-links.active { display: flex; }

    .nav-links a { margin: 10px 0; display: block; }

    .service-card, .projects-card {
        width: 90%;
        margin: 15px auto;
        display: block; /* يضمن نزولها في سطر منفصل */
    }

    .about-counters { flex-direction: column; }
    
    .slide-title { font-size: 2em; }
}

/* ========================================= */
/* تنسيقات صفحة تفاصيل المشروع */
/* ========================================= */

.project-view-section {
    padding: 60px 25px;
}

.project-view-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

/* عمود الصور */
.project-images-col {
    flex: 1;
    min-width: 300px;
}

.project-main-image {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.carousel-image-pointer {
    cursor: pointer;
}

/* عمود تفاصيل المشروع */
.project-details-col {
    flex: 1;
    min-width: 300px;
    background: #f9f9f9;
    padding: 30px;
    border-radius: 15px;
}

.project-title {
    color: #de641b;
    margin-bottom: 25px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
}

.detail-item {
    margin-bottom: 15px;
}

.detail-label {
    color: #007bff;
}

/* قسم الوصف */
.project-description-box {
    margin-top: 30px;
}

.project-description-title {
    color: #333;
}

.project-description-text {
    color: #666;
    line-height: 1.8;
}

#carouselExample {
    min-height: 350px; /* نفس الطول الذي اخترته للصور */
    background-color: #ee0b0b; /* لون خلفية مؤقت لمنع الفراغ */
}

/* هذا السطر يمنع الفوضى قبل اشتغال الـ JS 
.carousel-item:not(.active) {
    display: none;
}

.carousel-item.active {
    display: block ;
}*/