/*
==========================================================================
   CSS FOR: Homepage (AR & EN)
   File Location: /assets/css/page-homepage.css
==========================================================================
*/

/* ========== 1. DESKTOP STYLES (Styles for large screens) ========== */

/* --- Hero Section --- */
.pioneer-hero-section { position: relative; height: 90vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.hero-video-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; }
.hero-video-background video { width: 100%; height: 100%; object-fit: cover; }
.pioneer-hero-section::after { content: ''; position: absolute; inset: 0; background: rgba(18, 18, 18, .65); z-index: -1; }
.pioneer-hero-content { position: relative; z-index: 2; color: #fff; max-width: 800px; padding: 0 15px; }
.hero-title { font-size: 52px; font-weight: 700; margin-bottom: 20px; line-height: 1.3; }

/* --- Services Section --- */
.services-section { padding: 80px 15px; background: #fff; color: #333; }
.services-section .section-title h2 { font-size: 42px; font-weight: 700; color: #121212; margin-bottom: 15px; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: stretch; }
.service-card { background: #1f1f1f; border: 1px solid #333; border-radius: 10px; overflow: hidden; transition: transform .3s, border-color .3s; display: flex; flex-direction: column; color: #fff; }
.service-card:hover { transform: translateY(-10px); border-color: #fdd835; }
.service-image { width: 100%; height: 200px; }
.service-image img { width: 100%; height: 100%; object-fit: cover; }
.service-content { padding: 25px; text-align: center; flex-grow: 1; display: flex; flex-direction: column; }
.service-card h3 { font-size: 22px; color: #fdd835; margin: 0 0 15px; }
.service-card p { color: #ccc; line-height: 1.7; margin-bottom: 25px; flex-grow: 1; }
.service-button { display: inline-block; background: #fdd835; color: #121212; padding: 10px 25px; border-radius: 5px; text-decoration: none; font-weight: 700; transition: .3s; align-self: center; margin-top: auto; border: 2px solid #fdd835; }
.service-button:hover { background: transparent; color: #fdd835; }

/* --- Counter Section --- */
.counter-section { padding: 80px 15px; background: #fff; }
.counter-grid { display: grid; grid-template-columns: repeat(3, 200px); gap: 50px; justify-content: center; background: #121212; border-radius: 20px; padding: 60px 80px; max-width: 1000px; margin: 0 auto; }
.counter-item { text-align: center; }
.counter-circle { width: 180px; height: 180px; border-radius: 50%; background: #fdd835; color: #121212; display: flex; justify-content: center; align-items: center; font-size: 38px; font-weight: 700; margin: 0 auto 20px; transition: transform .3s; }
.counter-title { font-size: 20px; font-weight: 600; color: #fff; }

/* --- Clients Section --- */
.pioneer-clients-section { padding: 80px 0; background: #fff; color: #121212; }
.pioneer-clients-section .section-header { text-align: center; margin-bottom: 60px; }
.clients-logo-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 40px 20px; align-items: center; }
.client-logo-item img { max-width: 100%; height: auto; object-fit: contain; opacity: .85; transition: .3s; }
.client-logo-item:hover img { opacity: 1; transform: scale(1.1); }


/* ========== 2. RESPONSIVE STYLES (Styles for smaller screens) ========== */

/* --- For Tablets (شاشات الأجهزة اللوحية) --- */
@media (max-width: 992px) {
    .services-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
    .clients-logo-grid { 
        grid-template-columns: repeat(4, 1fr); 
    }
    .counter-grid { 
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
        padding: 40px; 
    }
}

/* --- For Mobile Phones (شاشات الجوال) --- */
@media (max-width: 768px) {
    .hero-title { 
        font-size: 38px; 
    }
    .services-grid { 
        grid-template-columns: 1fr; 
    }
    .clients-logo-grid { 
        grid-template-columns: repeat(3, 1fr); 
        gap: 30px 15px; 
    }
    .counter-grid {
        grid-template-columns: 1fr;
    }
}

/* --- For Small Mobile Phones (شاشات الجوال الصغيرة) --- */
@media (max-width: 480px) { 
    .clients-logo-grid { 
        grid-template-columns: repeat(2, 1fr); 
    } 
}