/* --- BRANDING & RESET --- */
    :root {
        --feat-primary: #2563EB;
        --feat-secondary: #0F172A;
        --feat-bg-light: #F8FAFC;
        --feat-text-main: #1E293B;
        --feat-text-muted: #64748b;
        --feat-border: #E2E8F0;
        --nav-width: 320px;
        --header-offset: 0px; 
    }

    .feat-wrapper {
        font-family: 'Lexend', sans-serif;
        color: var(--feat-secondary);
        background: #fff;
        text-align: <?php echo ($lang == 'ar') ? 'right' : 'left'; ?>;
    }

    /* --- STICKY HERO HEADER --- */
    .feat-hero {
        position: sticky;
        top: var(--header-offset);
        z-index: 900;
        background: radial-gradient(circle at top right, #eff6ff, #ffffff);
        padding: 140px 0 40px;
        text-align: center;
        border-bottom: 1px solid var(--feat-border);
        transition: padding 0.3s ease, background 0.3s ease, top 0.3s ease;
    }

    .feat-sticky-logo {
        position: absolute;
        <?php echo ($lang == 'ar') ? 'right' : 'left'; ?>: 40px;
        top: 50%;
        transform: translateY(-50%);
        width: 140px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s ease;
        z-index: 10;
        pointer-events: none;
    }

    .feat-sticky-logo img { width: 100%; height: auto; display: block; }

    .feat-hero.shrunk {
        padding: 20px 0 15px;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    }
    
    .feat-hero.shrunk .feat-sticky-logo { opacity: 1; visibility: visible; pointer-events: auto; }
    .feat-hero.shrunk .feat-section-title { font-size: 1.5rem; margin: 0; }
    .feat-hero.shrunk .feat-hero-desc, .feat-hero.shrunk .feat-badge { display: none !important; }

    /* --- LAYOUT GRID --- */
    .feat-layout {direction: <?php echo ($lang == 'ar') ? 'rtl' : 'ltr'; ?>; display: flex; max-width: 1440px; margin: 0 auto; position: relative;}

    /* --- LEFT SIDEBAR NAV --- */
    .feat-sidebar {
        width: var(--nav-width);
        position: sticky;
        top: 80px; 
        height: calc(100vh - 80px);
        overflow-y: auto;
        padding: 40px 20px 40px 10px;
        flex-shrink: 0;
        border-<?php echo ($lang == 'ar') ? 'left' : 'right'; ?>: 2px solid var(--feat-border);
        background: #fff;
        transition: top 0.3s ease, height 0.3s ease;
    }

    .feat-sidebar::-webkit-scrollbar { width: 4px; }
    .feat-sidebar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

    .feat-nav-group { margin-bottom: 35px; }
    .feat-group-label {
        font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
        color: var(--feat-text-muted); letter-spacing: 1.5px;
        margin-bottom: 15px; padding-<?php echo ($lang == 'ar') ? 'right' : 'left'; ?>: 15px; display: block;
    }

    .feat-nav-list { list-style: none; padding: 0; margin: 0; }
    .feat-nav-item { margin-bottom: 4px; position: relative; }

    .feat-nav-item a {
        display: flex; align-items: center; padding: 12px 15px;
        text-decoration: none !important; color: var(--feat-text-main);
        font-weight: 500; font-size: 0.85rem; transition: all 0.2s ease;
        border-radius: 8px; gap: 12px;
        flex-direction: <?php echo ($lang == 'ar') ? 'row-reverse' : 'row'; ?>;
    }

    .feat-nav-item.active::after {
        content: ''; position: absolute; <?php echo ($lang == 'ar') ? 'left' : 'right'; ?>: -22px; top: 10%;
        height: 80%; width: 4px; background: var(--feat-primary);
        border-radius: 4px 0 0 4px; box-shadow: -2px 0 10px rgba(37, 99, 235, 0.3);
    }

    .feat-nav-item.active a { color: var(--feat-primary); background: #eff6ff; }
    .feat-nav-item.active i { color: var(--feat-primary); }

    /* --- RIGHT CONTENT AREA --- */
    .feat-content { flex-grow: 1; padding: 40px 80px 100px; min-width: 0; }

    /* CRITICAL SCROLL MARGIN FIX */
    .feat-section, .feat-capability[id], .feat-info-card[id], section[id] { 
        scroll-margin-top: 50px; 
    }

    .feat-section { margin-bottom: 50px; }
    
    .feat-badge {
        background: #eff6ff; color: var(--feat-primary); padding: 6px 16px;
        border-radius: 50px; font-size: 0.75rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 1px; display: inline-block; margin-bottom: 15px;
    }

    .feat-section-title {
        font-size: 3rem; font-weight: 800; margin: 20px 0;
        color: var(--feat-secondary); letter-spacing: -0.03em;
    }

    .feat-section-desc {
        font-size: 1.15rem; color: var(--feat-text-main);
        line-height: 1.8; margin-bottom: 40px; max-width: 950px;
    }

    .feat-text-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; }
    .feat-text-columns p { margin: 0; font-size: 1.05rem; color: var(--feat-text-muted); line-height: 1.8; }

    /* --- MEDIA & PLACEHOLDERS --- */
    .feat-media-row { display: flex; align-items: center; gap: 50px; margin: 60px 0; flex-direction: <?php echo ($lang == 'ar') ? 'row-reverse' : 'row'; ?>; }
    .feat-media-row.reverse { flex-direction: <?php echo ($lang == 'ar') ? 'row' : 'row-reverse'; ?>; }
    
    .feat-media-img { 
        flex: 1; border-radius: 20px; overflow: hidden; 
        box-shadow: 0 20px 40px rgba(0,0,0,0.08); 
        border: 1px solid var(--feat-border); 
        background: #f1f5f9; 
        display: flex; align-items: center; justify-content: center; position: relative; 
    }
    
    .feat-media-img.pos-frame {
        max-width: 750px; width: 100%; height: auto;
        /*aspect-ratio: 4 / 3; margin: 30px auto; flex: none; */
    }

    .feat-media-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .feat-img-placeholder { font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; text-align: center; padding: 20px; }

    /* --- UI ELEMENTS --- */
    .feat-table-box { margin: 40px 0; border: 1px solid var(--feat-border); border-radius: 12px; overflow: hidden; }
    .feat-table { width: 100%; border-collapse: collapse; }
    .feat-table th { background: var(--feat-bg-light); padding: 15px; text-align: <?php echo ($lang == 'ar') ? 'right' : 'left'; ?>; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; }
    .feat-table td { padding: 15px; border-top: 1px solid var(--feat-border); font-size: 0.95rem; }

    .feat-info-card { background: var(--feat-bg-light); padding: 30px; border-radius: 20px; border-<?php echo ($lang == 'ar') ? 'right' : 'left'; ?>: 5px solid var(--feat-primary); margin: 40px 0; }
    .feat-list { list-style: none; padding: 0; margin: 25px 0; }
    .feat-list li { position: relative; padding-<?php echo ($lang == 'ar') ? 'right' : 'left'; ?>: 35px; margin-bottom: 15px; font-weight: 500; color: var(--feat-text-main); font-size: 1.05rem; }
    .feat-list li::before { content: '\f058'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; <?php echo ($lang == 'ar') ? 'right' : 'left'; ?>: 0; color: #10B981; }

    /* ARROW ALIGNMENT FIX */
    .feat-read-more { 
        display: inline-flex; 
        align-items: center; 
        color: var(--feat-primary); 
        font-weight: 700; 
        text-decoration: none !important; 
        gap: 10px; 
        margin-top: 25px; 
        transition: all 0.2s ease; 
        font-size: 1rem;
        line-height: 1;
        height: 24px;
        flex-direction: <?php echo ($lang == 'ar') ? 'row-reverse' : 'row'; ?>;
    }
    .feat-read-more i { 
        transition: transform 0.2s ease; 
        font-size: 14px !important; 
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 2px;
        transform: <?php echo ($lang == 'ar') ? 'rotate(180deg)' : 'none'; ?>;
    }
    .feat-read-more:hover { color: #1e40af; }
    .feat-read-more:hover i { transform: <?php echo ($lang == 'ar') ? 'translateX(-5px) rotate(180deg)' : 'translateX(5px)'; ?>; }

    .feat-capability > i { font-size: 2rem; color: var(--feat-primary); margin-bottom: 25px; display: block; }
    
    .feat-capability { padding: 40px; background: #fff; border-radius: 20px; border: 1px solid var(--feat-border); transition: all 0.3s ease; margin-bottom: 30px; }
    .feat-capability:hover { border-color: var(--feat-primary); box-shadow: 0 15px 40px rgba(0,0,0,0.06); transform: translateY(-5px); }
    .feat-capability h4 { font-size: 1.4rem; font-weight: 800; margin-bottom: 15px; color: var(--feat-secondary); }
    .feat-capability p { line-height: 1.7; color: var(--feat-text-muted); }

    /* MODAL STYLES */
    .uc-modal.uc-open { background: rgba(15, 23, 42, 0.85) !important; backdrop-filter: blur(4px); }
    .rs-modal-card { background: white; border-radius: 16px; overflow: hidden; max-width: 820px; width: 95%; display: flex; border: none; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); flex-direction: <?php echo ($lang == 'ar') ? 'row-reverse' : 'row'; ?>; }
    .rs-modal-left { width: 40%; background-color: #000; }
    .rs-modal-left img { width: 100%; height: 100%; object-fit: cover; }
    .rs-modal-right { width: 60%; background: white; padding: 25px 30px; position: relative; text-align: <?php echo ($lang == 'ar') ? 'right' : 'left'; ?>; }

    /* Mobile handling */
    .feat-sidebar-toggle { display: none; position: fixed; bottom: 30px; left: 30px; width: 56px; height: 56px; background: var(--feat-primary); color: white; border-radius: 50%; z-index: 1100; align-items: center; justify-content: center; cursor: pointer; border: none; }
    @media (max-width: 1024px) {
        .feat-layout { flex-direction: column; }
        .feat-sidebar { position: fixed; left: 0; top: 0; z-index: 1200; transform: translateX(<?php echo ($lang == 'ar') ? '100%' : '-100%'; ?>); visibility: hidden; height: 100vh; width: 280px; box-shadow: 20px 0 50px rgba(0,0,0,0.1); border-right: none; }
        .feat-sidebar.mobile-active { transform: translateX(0); visibility: visible; }
        .feat-sidebar-toggle { display: flex; }
        .feat-content { padding: 40px 24px 100px; }
        .feat-hero { position: relative; padding: 100px 0 40px; }
        .feat-text-columns { grid-template-columns: 1fr; }
        .feat-media-row, .feat-media-row.reverse { flex-direction: column; gap: 30px; }
        .feat-media-img.pos-frame 
        {
         max-width: 100%; 
            /*aspect-ratio: 4 / 3; */
        }
        .rs-modal-left { display: none !important; }
        .rs-modal-right { width: 100% !important; }
    }

    /* Breadcrumbs */
    .rs-breadcrumbs {
        display: flex;
        align-items: center;
        justify-content: center; /* Centered to match the hero section alignment */
        flex-wrap: wrap;
        gap: 10px;
        font-size: 0.95rem;
        font-weight: 500;
        margin-bottom: 25px;
        color: var(--feat-text-muted); /* Updated to feat variables */
        flex-direction: <?php echo ($lang == 'ar') ? 'row-reverse' : 'row'; ?>; /* RTL Support */
    }

    .rs-breadcrumbs a {
        color: var(--feat-primary); /* Updated to feat variables */
        text-decoration: none;
        transition: color 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-direction: <?php echo ($lang == 'ar') ? 'row-reverse' : 'row'; ?>; /* RTL Support */
    }

    .rs-breadcrumbs a:hover {
        color: var(--feat-secondary); /* Updated to feat variables */
        text-decoration: underline;
    }

    .rs-breadcrumbs .rs-separator {
        color: #94a3b8;
        font-size: 0.8rem;
        transform: <?php echo ($lang == 'ar') ? 'rotate(180deg)' : 'none'; ?>; /* Flip arrows for Arabic */
    }

    .rs-breadcrumbs .rs-current {
        color: var(--feat-text-main); /* Updated to feat variables */
    }