* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Tajawal', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
    margin: 0;
    padding: 0 calc(100vw * 0.08);
    font-family: 'Tajawal', sans-serif;
    background: url('../assets/images/BackGroundImage.png') no-repeat center center fixed;
    background-size: cover;
    min-height: 100vh;
    color: #ffffff;
    line-height: 1.6;
    direction: rtl;
    text-align: right;
    background-color: #101424;
    position: relative; /* Added position relative */
    z-index: 0; /* Added z-index */
}

/* Add a dark overlay to ensure text remains readable */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: rgba(16, 20, 36, 0.75); Changed from 0.95 to 0.75 for more visibility */
    z-index: -1;
    pointer-events: none; /* Added to ensure clicks pass through */
}

/* Direction specific styles */
[dir="ltr"] {
    text-align: left;
}

[dir="rtl"] {
    text-align: right;
}

.container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0;
    direction: rtl;
}

[dir="ltr"] .container {
    direction: ltr;
}

[dir="rtl"] .container {
    direction: rtl;
}

@media (max-width: 768px) {
    body {
        padding: 0 calc(100vw * 0.04);
    }
}

/* Reset default margins for RTL */
h1, h2, h3, h4, h5, h6, p {
    margin-left: 0;
    margin-right: 0;
}

/* RTL support for buttons and form elements */
button, 
input, 
select, 
textarea {
    text-align: right;
}

/* Form elements direction handling */
[dir="ltr"] input,
[dir="ltr"] textarea {
    text-align: left;
    direction: ltr;
}

[dir="rtl"] input,
[dir="rtl"] textarea {
    text-align: right;
    direction: rtl;
}

.btn {
    display: inline-block;
    padding: 15px 30px;
    background: #4a90e2;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn:hover {
    background: #357abd;
}