/* ==========================================
   ARABIC RTL STYLESHEET
   Base: style.css (imported)
   Overrides for right-to-left layout + Arabic typography
   ========================================== */

/* Import the base styles */
@import url('style.css');

/* Arabic-friendly font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;600;700;800&display=swap');

/* Override font-family to include Arabic font */
body {
    font-family: 'Noto Sans Arabic', 'Poppins', sans-serif;
    direction: rtl;
    text-align: right;
}

/* ==========================================
   Layout RTL Adjustments
   ========================================== */

/* Flip the visual-side overlay gradient for RTL */
.visual-side::after {
    background: linear-gradient(to left, rgba(0, 0, 0, 0) 70%, rgba(15, 15, 18, 0.8) 100%);
}

/* Content side aligns to the right in RTL */
.content-side {
    order: -1;
}

/* ==========================================
   Card RTL Adjustments
   ========================================== */

/* Flip card-thumb margin */
.card-thumb {
    margin-right: 0;
    margin-left: 1.5rem;
}

/* Flip card-action margin and hover direction */
.card-action {
    margin-left: 0;
    margin-right: 1rem;
}

.link-card:hover .card-action {
    transform: translateX(-5px) rotate(-90deg);
}

/* Card shimmer effect direction */
.link-card::after {
    left: auto;
    right: -100%;
    background: linear-gradient(-90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: right 0.6s ease;
}

.link-card:hover::after {
    right: 100%;
    left: auto;
}

/* Card description alignment */
.card-description {
    text-align: right;
}

/* ==========================================
   Floating Particles RTL
   ========================================== */

.content-side::before {
    right: auto;
    left: 10%;
}

.content-side::after {
    left: auto;
    right: 10%;
}

/* ==========================================
   Footer RTL
   ========================================== */

.footer-text {
    text-align: right;
}

.footer-keywords {
    justify-content: flex-start;
    direction: rtl;
}

/* ==========================================
   Hero Section - Arabic Typography
   ========================================== */

.hero-name {
    letter-spacing: 0;
    font-family: 'Poppins', sans-serif;
}

.hero-description {
    letter-spacing: 1px;
    font-family: 'Noto Sans Arabic', sans-serif;
}

/* ==========================================
   Mobile Responsiveness RTL
   ========================================== */

@media (max-width: 900px) {
    .visual-side::after {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(15, 15, 18, 1) 100%);
    }

    .content-side {
        border-radius: 40px 40px 0 0;
    }

    .card-thumb {
        margin-left: 1rem;
    }
}

@media (max-width: 400px) {
    .card-thumb {
        margin-left: 0.8rem;
    }
}