@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Reem+Kufi:wght@400..800&display=swap');

:root {
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --primary-color: #ffffff;
    --primary-hover: #e0e0e0;
    --secondary-color: #a0a0a0;
    --text-color: #ffffff;
    --text-muted: #b0b0b0;
    --border-color: #333333;
    --danger-color: #cf6679;
    --success-color: #03dac6;
    --glass-blur: blur(0px);
    --selection-bg: rgba(255, 255, 255, 0.2);
}

::selection {
    background: var(--selection-bg);
    color: var(--text-color);
}

.hidden {
    display: none !important;
}

.meal-card-choice:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.meal-card-choice.active {
    background: rgba(3, 218, 198, 0.05) !important;
    border-color: var(--success-color) !important;
    box-shadow: 0 0 10px rgba(3, 218, 198, 0.2);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Outfit', sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 800;
    letter-spacing: -0.08em;
    color: white;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Logo & Animations */
/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    /* Sticky for persistent usage */
    top: 0;
    z-index: 1000;
}

.logo-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-decoration: none;
    cursor: pointer;
    z-index: 10;
}

.logo-container img {
    width: 80px;
    /* Further increased for Desktop */
    height: 80px;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: brightness(0) invert(1);
    /* Ensure logo is white */
}

.slogan-bar {
    width: 220px;
    overflow: hidden;
    white-space: nowrap;
    background: transparent;
    margin-top: -5px;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.slogan-content {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 10s linear infinite;
    font-size: 0.75rem;
    color: white;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}



/* Deprecated or hidden if content removed, avoiding errors */
.slogan-bar {
    display: none;
}


.nav-links {
    margin-left: auto;
    /* Pushes links to the right */
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1002;
    padding: 10px;
    margin-left: auto;
    /* Ensures hamburger stays right on mobile */
}



.logo-text {
    font-family: 'Reem Kufi', sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    color: white;
    letter-spacing: 0.05em;
    white-space: nowrap;
    /* 3D Depth Effect */
    text-shadow:
        2px 2px 0px rgba(0, 0, 0, 0.3),
        4px 4px 0px rgba(0, 0, 0, 0.2),
        6px 6px 0px rgba(0, 0, 0, 0.15),
        8px 8px 0px rgba(0, 0, 0, 0.1),
        10px 10px 20px rgba(0, 0, 0, 0.4);
    /* Gradient overlay */
    background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 50%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Enhance geometric look */
    transform: perspective(500px) rotateY(0deg);
    transition: all 0.3s ease;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background: white;
    transition: all 0.3s ease;
    border-radius: 2px;
}

/* Mobile Nav Styles */

@media (max-width: 768px) {

    /* Absolute positioning for Hamburger to prevent layout shifts */
    .hamburger {
        display: flex;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1501;
        /* Above the menu */
        margin: 0;
        /* Remove auto margins */
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: var(--bg-color);
        flex-direction: column;
        justify-content: flex-start;
        /* Start from top */
        padding: 100px 40px 40px;
        /* Add top padding to clear area */
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1500;
        /* Above logo (1002) but below hamburger */
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links a {
        font-size: 1.5rem;
        width: 100%;
        text-align: center;
        padding: 1rem 0;
        color: white;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .nav-links a.btn {
        margin-top: 20px;
        background: rgba(255, 255, 255, 0.1);
        border: 2px solid white;
        border-bottom: 2px solid white;
        border-radius: 12px;
        width: 80%;
        align-self: center;
    }

    .navbar {
        padding: 0.75rem 1rem;
        display: flex;
        align-items: center;
        width: 100%;
        position: sticky;
        justify-content: center;
        /* Center logo by default in flex */
        min-height: 70px;
    }

    .logo-container {
        position: relative;
        /* Reset absolute centering, just be center of flex */
        left: auto;
        transform: none;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        width: auto;
        z-index: 1002;
    }

    .logo-container img {
        width: 65px !important;
        /* Further increased for Tablet */
        height: 65px !important;
    }

    .logo-text {
        font-size: 1.8rem !important;
    }

    /* Hamburger Animation to X */
    .hamburger.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 80px 20px;
    max-width: 800px;
    margin: 0 auto;
}

.hero-slogan-container {
    width: 100%;
    overflow: hidden;
    margin-bottom: 1.5rem;
    position: relative;
    white-space: nowrap;
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

.hero-slogan-bar {
    display: inline-block;
    white-space: nowrap;
    animation: scrollSlogan 20s linear infinite;
}

.hero-slogan-text {
    display: inline-block;
    padding: 0 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: white;
    font-family: 'Outfit', sans-serif;
}

@keyframes scrollSlogan {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.hero-image-container {
    position: relative;
    display: inline-block;
    max-width: 320px;
    width: 100%;
    margin: 30px 0;
}

.hero-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.hero-image-container:hover .hero-img {
    transform: scale(1.05);
}

.glass-btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    width: auto;
    min-width: 180px;
    padding: 12px 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 10;
    white-space: nowrap;
    border: 2px solid white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-btn:hover {
    background: white;
    color: black;
    border-color: white;
    transform: translateX(-50%) translateY(-2px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    text-shadow: none;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


.hero h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    cursor: default;
    color: white;
}

.hero p {
    font-size: 1.125rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

/* Components */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    padding: 20px;
}

.auth-card {
    background: var(--card-bg);
    padding: 2.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    width: 100%;
    max-width: 440px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

.auth-card h2 {
    font-size: 1.75rem;
    margin-bottom: 2rem;
    text-align: center;
    color: white;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    background: #2a2a2a;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: white;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.2s ease;
    appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: white;
    background: #333;
}

/* Button Styles */
.btn {
    display: inline-block;
    padding: 10px 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: white;
    font-weight: 700;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    text-align: center;
}

.btn:hover {
    background: white;
    color: black;
    border-color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn-submit {
    width: 100%;
    padding: 1rem;
    background: white;
    color: black;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.btn-submit:hover {
    background: #e0e0e0;
    transform: translateY(-1px);
}

/* Global Glass Button Style - Transparent for Mobile & PC */
.glass-btn {
    background: transparent !important;
    border: 2px solid white !important;
    color: white !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    font-weight: 700;
    transition: all 0.3s ease;
}

.glass-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    color: white !important;
}

.btn-whatsapp {
    background: transparent !important;
    border: 2px solid white !important;
    color: white !important;
    box-shadow: none !important;
}

.btn-whatsapp:hover {
    background: #25D366 !important;
    border-color: #25D366 !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4) !important;
}

.auth-footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.auth-footer a {
    color: white;
    font-weight: 600;
    text-decoration: underline;
}

/* Dashboard & Cards */
.workouts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.workout-card,
.plan-header {
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: transform 0.2s ease;
}

.workout-card:hover {
    transform: translateY(-4px);
    border-color: #444;
}

/* Tag Styles */
.tag {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tag.Easy {
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
}

.tag.Medium {
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
}

.tag.Hard {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

.workout-stats {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Toast */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 1rem 1.5rem;
    background: #333;
    color: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transform: translateY(150%);
    transition: transform 0.3s ease;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 10px;
}

.toast.show {
    transform: translateY(0);
}

.toast.success {
    border-left: 4px solid var(--success-color);
}

.toast.error {
    border-left: 4px solid var(--danger-color);
}

/* ========================================
   COMPREHENSIVE RESPONSIVE DESIGN
   Optimized for Android & iOS devices
   ======================================== */

/* Tablet Landscape & Small Desktops (768px - 1024px) */
@media (max-width: 1024px) {
    .navbar {
        padding: 1rem 1.5rem;
    }

    .hero {
        padding: 60px 20px;
    }

    .auth-card {
        max-width: 500px;
        padding: 2rem;
    }
}

/* Tablet Portrait (600px - 768px) */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    .days-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .plan-container {
        padding: 20px;
    }

    /* Touch-friendly buttons */
    .btn,
    .btn-primary,
    .btn-action {
        min-height: 44px;
        /* iOS guideline for touch targets */
        padding: 0.75rem 1.25rem;
        font-size: 1rem;
    }

    /* Readable form inputs */
    .form-group input,
    .form-group select,
    .form-group textarea {
        min-height: 44px;
        font-size: 16px;
        /* Prevent iOS zoom */
        padding: 0.75rem;
    }
}

/* Large Phones (481px - 600px) */
@media (max-width: 600px) {
    body {
        font-size: 15px;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.65rem;
    }

    h3 {
        font-size: 1.35rem;
    }

    .navbar {
        padding: 0.875rem 1rem;
        min-height: 65px;
    }

    .logo-text {
        font-size: 2rem;
    }

    .logo-container img {
        width: 55px !important;
        /* Further increased for Large Phones */
        height: 55px !important;
    }

    /* Improve card layouts */
    .auth-card,
    .workout-card,
    .day-card {
        padding: 1.5rem;
        margin: 0.75rem;
    }

    /* Stack elements vertically on mobile */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    /* Better spacing for mobile */
    .plan-header {
        padding: 1.25rem;
    }

    /* Optimize meal cards for mobile */
    .meal-card-choice {
        flex: 0 0 130px !important;
    }

    /* Improve button spacing */
    .glass-btn {
        width: 85%;
        max-width: 280px;
        font-size: 1rem;
        padding: 0.875rem 1.25rem;
    }
}

/* Standard Phones (376px - 480px) */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    .hero h1 {
        font-size: 2.25rem;
        line-height: 1.2;
    }

    h1 {
        font-size: 1.75rem !important;
        margin-bottom: 1rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    .auth-card {
        padding: 1.5rem;
        margin: 1rem;
        width: calc(100% - 2rem);
    }

    .logo-container img {
        width: 48px !important;
        /* Further increased for Small Phones */
        height: 48px !important;
    }

    .logo-text {
        font-size: 1.8rem;
        text-align: center;
    }

    .navbar {
        padding: 0.75rem 1rem;
        min-height: 60px;
    }

    .days-grid {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }

    .plan-header {
        padding: 1rem;
    }

    .hero {
        padding: 40px 15px;
    }

    .hero-image-container {
        width: 85%;
        max-width: 320px;
        margin: 20px auto;
    }

    .hero-img {
        width: 100%;
        height: 400px;
        max-height: 450px;
        object-fit: contain;
        object-position: center;
    }

    /* Full-width slogan on mobile */
    .hero-slogan-container {
        width: 100vw;
        margin-left: -15px;
        margin-right: -15px;
        mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    }

    .glass-btn {
        width: 90%;
        max-width: 300px;
        font-size: 1rem;
        padding: 0.875rem;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Optimize forms for mobile */
    .form-group {
        margin-bottom: 1rem;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 1rem;
        font-size: 16px;
        /* Crucial: prevents iOS zoom on focus */
        min-height: 48px;
        border-radius: 8px;
    }

    .form-group label {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    /* Touch-friendly buttons */
    .btn,
    .btn-primary,
    .btn-action,
    button[type="submit"] {
        min-height: 48px;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
    }

    /* Improve container padding */
    .plan-container {
        padding: 15px !important;
    }

    /* Better card layouts */
    .day-card,
    .workout-card,
    .meal-section-choices {
        padding: 1rem;
        margin-bottom: 0.875rem;
    }

    /* Optimize meal cards */
    .meal-card-choice {
        flex: 0 0 120px !important;
        min-width: 120px;
    }

    /* Improve table readability - convert to cards on mobile */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        font-size: 0.85rem;
    }

    /* Navigation improvements */
    .nav-links a {
        font-size: 1.3rem;
        padding: 1.25rem 0;
        min-height: 48px;
    }
}

/* Small Phones (320px - 375px) */
@media (max-width: 375px) {
    body {
        font-size: 13px;
    }

    .hero h1 {
        font-size: 1.875rem;
    }

    h1 {
        font-size: 1.5rem !important;
    }

    h2 {
        font-size: 1.35rem;
    }

    h3 {
        font-size: 1.15rem;
    }

    .logo-container img {
        width: 30px !important;
        height: 30px !important;
    }

    .logo-text {
        font-size: 1.6rem;
    }

    .navbar {
        padding: 0.625rem 0.75rem;
        min-height: 56px;
    }

    .auth-card {
        padding: 1.25rem;
        margin: 0.75rem;
        width: calc(100% - 1.5rem);
    }

    .hero-image-container {
        width: 90%;
        max-width: 280px;
    }

    .hero-img {
        height: 350px;
        max-height: 380px;
    }

    .glass-btn {
        width: 92%;
        font-size: 0.95rem;
        padding: 0.75rem;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 0.875rem;
        font-size: 16px;
        /* Still 16px to prevent zoom */
    }

    .btn,
    .btn-primary,
    .btn-action {
        padding: 0.75rem 1.25rem;
        font-size: 0.95rem;
    }

    .meal-card-choice {
        flex: 0 0 110px !important;
        min-width: 110px;
    }

    /* Compact spacing */
    .plan-container {
        padding: 12px !important;
    }

    .day-card,
    .workout-card {
        padding: 0.875rem;
    }
}

/* Extra Small Phones (≤ 320px) */
@media (max-width: 320px) {
    body {
        font-size: 12px;
    }

    .hero h1 {
        font-size: 1.65rem;
    }

    h1 {
        font-size: 1.35rem !important;
    }

    h2 {
        font-size: 1.2rem;
    }

    .logo-text {
        font-size: 1.4rem;
    }

    .logo-container img {
        width: 26px !important;
        height: 26px !important;
    }

    .navbar {
        padding: 0.5rem 0.625rem;
        min-height: 52px;
    }

    .auth-card {
        padding: 1rem;
        margin: 0.5rem;
    }

    .glass-btn {
        width: 94%;
        font-size: 0.9rem;
        padding: 0.625rem;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 0.75rem;
    }

    .meal-card-choice {
        flex: 0 0 100px !important;
        min-width: 100px;
    }
}

/* Landscape Orientation Optimizations */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        padding: 30px 15px;
    }

    .hero h1 {
        font-size: 1.75rem;
    }

    .navbar {
        min-height: 50px;
        padding: 0.5rem 1rem;
    }

    .logo-text {
        font-size: 1.5rem;
    }

    .nav-links {
        padding-top: 60px;
    }

    .auth-card {
        padding: 1.25rem;
        margin: 0.75rem auto;
    }
}

/* iOS-specific optimizations */
@supports (-webkit-touch-callout: none) {

    /* Better touch handling on iOS */
    * {
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
    }

    input,
    textarea,
    select {
        font-size: 16px;
        /* Prevent zoom on iOS */
    }

    /* Fix iOS safe areas */
    .navbar {
        padding-top: max(0.75rem, env(safe-area-inset-top));
    }

    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}


/* Arabic Support */
html[lang="ar"] body {
    font-family: 'Reem Kufi', sans-serif;
    direction: rtl;
    text-align: right;
    line-height: 1.8;
    overflow-wrap: break-word;
}

html[lang="ar"] .hero-slogan-bar {
    animation-direction: reverse;
}

html[lang="ar"] .hero,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] p,
html[lang="ar"] a,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea {
    font-family: 'Reem Kufi', sans-serif !important;
}

/* Fix RTL Navbar */
html[lang="ar"] .nav-links {
    margin-right: auto;
    margin-left: 0;
}

html[lang="ar"] .hamburger {
    right: auto;
    left: 20px;
}

html[lang="ar"] .glass-btn {
    letter-spacing: 0;

}

@media (max-width: 768px) {
    html[lang="ar"] .nav-links {
        right: auto;
        left: -100%;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        align-items: flex-start;
        /* Align text to right in RTL vertical menu */
        text-align: right;
    }

    html[lang="ar"] .nav-links.active {
        right: auto;
        left: 0;
    }

    html[lang="ar"] .nav-links a {
        text-align: right;
        width: 100%;
    }
}