/* =========================================
   NAF MOVERS: SPLIT HERO STYLES
   Colors: Primary #1f4c83 | Accent #F5A524
   ========================================= */

/* --- 1. Main Container --- */
.naf-split-hero {
    position: relative;
    width: 100%;
    min-height: 85vh; /* Tall, premium feel */
    display: flex;
    align-items: center;
    color: #ffffff;
    overflow: hidden;
    padding-top: 80px; /* Account for sticky header */
}

/* --- 2. Background Layers --- */

/* The actual image (Visible behind the left side) */
.naf-hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    z-index: 1;
}

/* THE HARD SPLIT OVERLAY 
   Left: 20% Opacity Blue (#1f4c83)
   Right: 100% Solid Blue (#1f4c83) 
   The '50%' stops create the hard line.
*/
.naf-split-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(
        90deg, 
        rgba(31, 76, 131, 0.2) 15%,   /* Left Start */
        rgba(31, 76, 131, 0.2) 35%,  /* Left End */
        #1f4c83 50%,                 /* Right Start (Solid) */
        #1f4c83 100%                 /* Right End */
    );
}

/* --- 3. Grid Layout --- */
.naf-container {
    position: relative;
    z-index: 3; /* Above overlay */
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

.naf-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% Text | 50% Video */
    gap: 0; /* No gap, the split is controlled by background */
    align-items: center;
}

/* --- 4. Left Side: Content --- */
.naf-hero-content {
    padding-right: 60px; /* Space before the split line */
}

.naf-h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 3.8rem; /* Big, Bold Title */
    line-height: 1.1;
    margin-bottom: 25px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Text shadow for readability over image */
}

/* The Gold Span (#F5A524) */
.naf-gold-text {
    color: #F5A524;
    display: inline-block;
}

.naf-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 90%;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* --- 5. Buttons --- */
.naf-btn-group {
    display: flex;
    gap: 20px;
}

.btn-solid-gold {
    display: inline-block;
    background-color: #F5A524;
    color: #1f4c83; /* Blue text on Gold Button */
    padding: 16px 40px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    border: 2px solid #F5A524;
}

.btn-solid-gold:hover {
    background-color: transparent;
    color: #F5A524;
    border-color: #F5A524;
}

/* --- 6. Right Side: Video --- */
.naf-hero-video {
    padding-left: 60px; /* Push content inside the solid blue area */
    display: flex;
    justify-content: center;
}

.video-wrapper {
    width: 100%;
    max-width: 600px;
    overflow: hidden;
    line-height: 0; /* Remove bottom space */
}

.video-wrapper video {
    width: 100%;
    height: auto;
    display: block;
}

/* --- 7. Responsive / Mobile --- */
@media (max-width: 991px) {
    /* Break the hard split layout on Tablet/Mobile */
    
    .naf-split-hero {
        min-height: auto;
        padding: 120px 0 80px 0;
    }

    .naf-split-overlay {
        /* Change split to full solid overlay for better readability */
        background: rgba(31, 76, 131, 0.92); 
    }

    .naf-hero-grid {
        grid-template-columns: 1fr; /* Stack */
        gap: 50px;
    }

    .naf-hero-content {
        padding-right: 0;
        text-align: center;
    }

    .naf-hero-video {
        padding-left: 0;
    }

    .naf-h1 {
        font-size: 2.8rem;
    }

    .naf-subtitle {
        margin: 0 auto 30px auto;
    }

    .naf-btn-group {
        justify-content: center;
    }
}
/*brush mask hero*/

/*Brush mask hero*/
@media (max-width: 480px) {
    .naf-h1 {
        font-size: 2.2rem;
    }
    
    .btn-solid-gold {
        width: 100%;
        text-align: center;
    }
}
/* =========================================
   NAF MOVERS: RTL / ARABIC SUPPORT
   Description: Flips the Split Hero for Right-to-Left Layouts
   ========================================= */

/* 1. FLIP THE GRADIENT OVERLAY 
   Old: 90deg (Left Transparent -> Right Solid)
   New: -90deg (Right Transparent -> Left Solid)
*/
html[dir="rtl"] .naf-split-overlay {
    background: linear-gradient(
        -90deg, 
        rgba(31, 76, 131, 0.2) 15%, 
        rgba(31, 76, 131, 0.2) 35%, 
        #1f4c83 50%, 
        #1f4c83 100%
    );
}

/* 2. SWAP PADDING FOR CONTENT (Text Side) */
html[dir="rtl"] .naf-hero-content {
    padding-right: 0;      /* Remove LTR padding */
    padding-left: 60px;    /* Add RTL padding */
    text-align: right;     /* Ensure Arabic text aligns right */
}

/* 3. SWAP PADDING FOR VIDEO (Visual Side) */
html[dir="rtl"] .naf-hero-video {
    padding-left: 0;       /* Remove LTR padding */
    padding-right: 60px;   /* Add RTL padding */
}

/* 4. FONT ADJUSTMENT (Optional but Recommended) */
/* Arabic looks better with 'Tajawal' or 'Cairo' if you have them loaded */
html[dir="rtl"] .naf-h1,
html[dir="rtl"] .naf-subtitle,
html[dir="rtl"] .btn-solid-gold {
    font-family: 'Tajawal', 'Cairo', sans-serif; /* Fallback to sans-serif if not loaded */
}

/* 5. MOBILE RESET FOR RTL */
@media (max-width: 991px) {
    html[dir="rtl"] .naf-hero-content {
        padding-left: 0;
        text-align: center; /* Center on mobile like English */
    }

    html[dir="rtl"] .naf-hero-video {
        padding-right: 0;
    }
    
    html[dir="rtl"] .naf-split-overlay {
        background: rgba(31, 76, 131, 0.92); /* Keep consistent mobile dark overlay */
    }
}