/* SERVICES SECTION STYLES */
.services-section { 
    position: relative; 
    width: 100%; 
    height: 100vh; 
    background: #000; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden; 
}
.services-section .section-title { 
    position: absolute; 
    width: auto; 
    z-index: 10; 
    pointer-events: none; 
    bottom: 20px; 
    left: 47px; 
    text-align: left; 
}
.services-section .section-title-subheading { 
    font-family: 'Poppins', sans-serif; 
    font-size: 15px; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    color: #fff; 
    text-shadow: 1px 1px 2px #111; 
    padding: 52px 0 0 4px; 
    margin-bottom: 0; 
}
.services-section .section-title-heading { 
    position: absolute; 
    top: 3px; 
    font-family: 'Racing Sans One', cursive; 
    font-size: 55px; 
    font-weight: 900; 
    letter-spacing: normal; 
    color: #fff; 
    white-space: nowrap; 
    z-index: -1; 
    line-height: 1; 
}
.services-section .services-grid { 
    display: flex; 
    flex-wrap: wrap; 
    width: 100%; 
    height: 100vh; 
}
.services-section .service-item { 
    width: calc(100% / 3); 
    height: 50vh; 
    position: relative; 
    overflow: hidden; 
    transform-style: preserve-3d;
    transition: all 0.5s ease;
    cursor: pointer;
}
.services-section .service-item::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    z-index: 0;
    transition: all 0.5s ease;
}
.services-section .service-item:hover::before {
    filter: blur(5px);
    transform: scale(1.05);
    opacity: 0.65;
}
.services-section .service-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 60%); 
    transition: all 0.5s ease;
    z-index: 1;
}
.services-section .service-bg-1::before { 
    background-image: url(https://ghazy.online/wp-content/uploads/2025/09/WhatsApp-Image-2025-09-18-at-11.09.53.jpeg); 
}
.services-section .service-bg-2::before { 
    background-image: url(https://ghazy.online/wp-content/uploads/2025/07/gjkyky-1.jpg); 
}
.services-section .service-bg-3::before { 
    background-image: url(https://ghazy.online/wp-content/uploads/2025/09/al-magaz-mall.jpg); 
}
.services-section .service-bg-4::before { 
    background-image: url(https://ghazy.online/wp-content/uploads/2025/09/BEACH-WALK-05-scaled.jpg); 
}
.services-section .service-bg-5::before { 
    background-image: url(https://ghazy.online/wp-content/uploads/2025/09/IMG_26591-copy-1-scaled.jpg); 
}
.services-section .service-bg-6::before { 
    background-image: url(https://ghazy.online/wp-content/uploads/2025/07/m4.jpg); 
}
.services-section .service-content { 
    position: absolute; 
    top: 30%; 
    left: 5%; 
    z-index: 10; 
    color: #fff; 
    transform: translateZ(20px);
}
.services-section .service-title { 
    font-size: 20px; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    margin: 0; 
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1);
}
.services-section .service-description { 
    font-size: 14px; 
    font-weight: 500; 
    line-height: 1.6; 
    margin-top: 10px;
    color: #fff;
    opacity: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1);
}
.services-section .service-item:hover .service-description { 
    opacity: 1; 
}

/* --- تعديلات الموبايل النهائية: تبدأ من هنا --- */
@media (max-width: 991px) {
    /* --- التعديل المطلوب: جعل القسم يملأ الشاشة --- */
    .services-section {
      height: 100vh; /* Fallback for older browsers */
      height: 100dvh; /* Modern solution for perfect mobile viewport height */
    }
    .services-section .services-grid {
      height: 100%; /* Make grid fill the new section height */
    }
    .services-section .service-item {
      width: 50%;
      height: calc(100% / 3); /* Divide the grid height into 3 equal rows */
    }
    .services-section .service-description {
      display: none;
    }

    /* إخفاء عنوان القسم بالكامل */
    .services-section .section-title {
        display: none;
    }

    /* نقل عنوان الخدمة للأسفل */
    .services-section .service-content {
        top: auto;
        bottom: 15px;
        left: 15px;
        right: 15px;
    }

    /* --- تحسين شكل الخط ليكون أكثر أناقة --- */
    .services-section .service-title {
      font-size: 12px;
      font-weight: 600; /* تخفيف سُمك الخط قليلاً (Semi-bold) */
      letter-spacing: 0.03em; /* تقليل المسافة بين الحروف */
      text-shadow: 0 1px 3px rgba(0,0,0,0.8); /* جعل ظل النص أكثر نعومة */
    }
}