/* HERO SECTION STYLES */
.hero-section-container { font-weight: 600; position: relative; width: 100%; height: 100vh; overflow: hidden; }
.hero-section-container .overlay:before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 2; pointer-events: none; background: linear-gradient(-45deg, rgba(0,0,0,0.6), rgba(0,0,0,0.8), rgba(25, 25, 25, 0.7), rgba(0,0,0,0.9)); background-size: 400% 400%; animation: subtleGradientAnimation 25s ease infinite; }
@keyframes subtleGradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.fadeIn-element { opacity: 0; }
.hero-section-container .content-container { position: absolute; left: 47px; bottom: 138px; z-index: 10; color: #fff; }
.hero-section-container .content-container h4 { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); margin: 0 0 15px; min-height: 20px; }
.hero-section-container .social-icons, .social-icons { margin: 0; padding: 0; list-style: none; }
.hero-section-container .social-icons li, .social-icons li { display: inline-block; padding: 0 10px 0 0; }
.hero-section-container .social-icons a, .social-icons a { font-size: 20px; color: #fff; text-decoration: none; transition: color 0.3s ease; }
.hero-section-container .social-icons a:hover, .social-icons a:hover { color: #ccc; }
.company-profile-btn { position: relative; display: inline-block; margin-top: 20px; padding: 10px 0; color: #fff; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; }
.company-profile-btn span { position: relative; }
.company-profile-btn::after { content: ''; position: absolute; width: 100%; height: 2px; background: #fff; bottom: 0; left: 0; transform: scaleX(0); transform-origin: right; transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
.company-profile-btn:hover::after { transform: scaleX(1); transform-origin: left; }
.hero-section-container .section-bg-home { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; overflow: hidden; background-color: #000; background-size: cover; background-position: center center; }
.hero-section-container .section-bg-home video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; width: auto; height: auto; object-fit: cover; transition: opacity 1s ease; }
.hero-section-container .bottom-credits { position: absolute; left: 51px; bottom: 46px; font-size: 9px; text-transform: uppercase; font-weight: 700; z-index: 10; color: #fff; }
.hero-section-container .video-sound-toggle { position: absolute; bottom: 40px; right: 50px; z-index: 10; font-size: 22px; color: #fff; opacity: 0.7; transition: all 0.3s ease; text-decoration: none; cursor: pointer; }
.hero-section-container .video-sound-toggle:hover { opacity: 1; transform: scale(1.1); }



/* =================================================== */
/* ====== MOBILE RESPONSSIVENESS (Max Width 767px) === */
/* =================================================== */
@media (max-width: 767px) {
    
    body, html {
        margin: 0;
        padding: 0;
        overflow-x: hidden; 
    }
    
    /* --- التعديل الوحيد المطلوب --- */
    .hero-section-container {
        /* للمتصفحات القديمة كخيار احتياطي */
        height: 100vh;
        /* الحل الحديث الذي يضمن أن القسم يملأ الشاشة بالضبط في الموبايل */
        height: 100dvh;
    }
    
    .hero-section-container .content-container {
        left: 0; 
        bottom: 100px; 
        padding: 0 20px; 
        width: 100%; 
        box-sizing: border-box; 
    }
    
    .hero-section-container .bottom-credits {
        left: 20px; 
        bottom: 25px;
    }
    
    .hero-section-container .video-sound-toggle {
        bottom: 20px;
        right: 20px;
        font-size: 20px;
    }
}