/* ==========================================================================
           1. FONTS, LOCALIZATION & GLOBAL RTL ALIGNMENTS
           ========================================================================== */
        html[lang="en"] { font-family: 'Sora', sans-serif; }
        html[lang="ar"] { font-family: 'IBM Plex Sans Arabic', sans-serif; }

        html[lang="en"] .loc::after { 
            content: attr(data-en); 
            font-family: 'Sora', sans-serif; 
        }
        html[lang="ar"] .loc::after { 
            content: attr(data-ar); 
            font-family: 'IBM Plex Sans Arabic', sans-serif; 
            font-size: 1.15em; 
            letter-spacing: 0;
        }

        /* Global alignment logic for Arabic layouts */
        html[lang="ar"] .loc, 
        html[lang="ar"] h1, 
        html[lang="ar"] h2, 
        html[lang="ar"] h3, 
        html[lang="ar"] label, 
        html[lang="ar"] p { 
            text-align: right; 
        }

        /* ==========================================================================
           2. FONT AWESOME & ICON PROTECTION
           ========================================================================== */
        .fas, .fab, .far, .fa {
            font-family: "Font Awesome 6 Free" !important;
            font-weight: 900 !important;
            display: inline-block;
            font-style: normal;
            font-variant: normal;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
        }

        /* ==========================================================================
           3. HERO SECTION (HIGH-CLARITY BACKGROUND & TEXT VISIBILITY FIXED)
           ========================================================================== */
        .stralen-hero-section { 
            position: relative; 
            padding-top: 8rem; 
            padding-bottom: 8rem; 
            color: white; 
            overflow: hidden;
            min-height: 75vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #020617;
        }

        /* ✅ Centered perfectly and locked in place */
        .hero-bg-layer { 
            position: absolute; 
            inset: 0; 
            background-image: url(../images/Contact-img/contact.jpg); 
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            opacity: 1; 
            filter: none;
            z-index: 0; 
        }

        /* ✅ FIXED TEXT VISIBILITY: Changed to a rich, darker radial-to-linear gradient blend. 
           This darkens the bright white center completely behind the text so it pops perfectly. */
        .hero-overlay-layer { 
            position: absolute; 
            inset: 0; 
            z-index: 1; 
            background: radial-gradient(circle, rgba(2, 6, 23, 0.75) 0%, rgba(2, 6, 23, 0.9) 100%);
        }

        .main-title { 
            font-size: clamp(2.5rem, 6vw, 4.5rem); 
            font-weight: 800; 
            line-height: 1.15;
            letter-spacing: -0.02em;
        }

        .accent-text { 
            color: transparent; 
            -webkit-text-stroke: 2px #10b981; 
        }

        .description-wrapper-centered {
            border-top: 2px solid #10b981;
            padding-top: 24px;
            max-width: 620px;
            margin: 0 auto;
        }

        /* ==========================================================================
           4. PREMIUM HOVER BUTTON ANIMATIONS (TRANSFORM BALANCED)
           ========================================================================== */
        .btn-fill-lr, .btn-fill-tb {
            position: relative;
            overflow: hidden;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.95rem 2.5rem;
            border: 2px solid #10b981;
            background: transparent;
            cursor: pointer;
            text-decoration: none;
            z-index: 5;
            transition: all 0.4s ease;
        }

        .btn-text {
            position: relative;
            z-index: 10;
            color: #fff;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.15em;
            transition: color 0.4s ease;
        }

        .btn-fill-lr .fill-layer, 
        .btn-fill-tb .fill-layer {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: #10b981;
            z-index: 1;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Left to Right Hover Animation */
        .btn-fill-lr .fill-layer {
            transform: scaleX(0);
            transform-origin: left;
        }
        .btn-fill-lr:hover .fill-layer {
            transform: scaleX(1);
        }

        /* Top to Bottom Hover Animation */
        .btn-fill-tb .fill-layer {
            transform: scaleY(0);
            transform-origin: top;
        }
        .btn-fill-tb:hover .fill-layer {
            transform: scaleY(1);
        }

        /* Mirror Left-to-Right origin direction dynamically when in RTL mode */
        html[dir="rtl"] .btn-fill-lr .fill-layer {
            transform-origin: right;
        }

        /* Text & Icon Color Inversion on Hover */
        .btn-fill-lr:hover .btn-text,
        .btn-fill-tb:hover .btn-text {
            color: #020617;
        }
        .btn-fill-lr:hover i,
        .btn-fill-tb:hover i {
            color: #020617 !important;
        }

        /* ==========================================================================
           5. ARABIC ASYMMETRICAL OVERLAP & RTL DIRECTION UTILITIES
           ========================================================================== */
        html[dir="rtl"] .flex-row-reverse-ar { 
            flex-direction: row-reverse; 
        }

        .info-item { 
            display: flex; 
            align-items: flex-start; 
            gap: 1rem; 
        }
        html[lang="ar"] .info-item { 
            flex-direction: row-reverse; 
        }

        .info-box-rtl { 
            transition: all 0.5s ease; 
        }
        html[lang="ar"] .info-box-rtl { 
            margin-right: 0 !important; 
            margin-left: -3rem !important; 
        }

        .form-input-rtl { text-align: left; }
        html[lang="ar"] .form-input-rtl { text-align: right; direction: rtl; }