/* -----------------------
   Arabic Typography System (Local Font: Alamaria)
   ----------------------- */

/* 1) Local font-face setup */
/* ----------------------------
   Almarai Font (300–800)
-----------------------------*/
@font-face {
    font-family: "Almarai";
    src: url("fonts/Almarai-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Almarai";
    src: url("fonts/Almarai-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: "Almarai";
    src: url("fonts/Almarai-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Almarai";
    src: url("fonts/Almarai-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* 2) Global setup */
:root {
    --font-main: "Almarai", "Arial", sans-serif;
    --base-size: 16px;
    --line-height: 1.7;
    --color-text: #1a1a1a;
    --color-muted: #666;
    --color-heading: #0d0d0d;
}



body {
    font-family: var(--font-main);
    font-size: var(--base-size);
    line-height: var(--line-height);
    color: var(--color-text);
    background-color: #fff;
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* 3) Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-main);
    font-weight: 700;
    color: var(--color-heading);
    margin: 0.5rem 0 0.8rem;
    line-height: 1.25;
}
input, .btn {
    font-family: var(--font-main);
    direction:rtl
}

h1 {
    font-size: 2.6rem;
}

h2 {
    font-size: 2.1rem;
}

h3 {
    font-size: 1.8rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1.05rem;
}

/* 4) Paragraphs & small text */
p {
    font-size: 1rem;
    margin: 0 0 1rem;
}

.lead {
    font-size: 1.2rem;
    color: var(--color-muted);
}

small, .small {
    font-size: 0.875rem;
    color: var(--color-muted);
}

/* 5) Labels and form text */
.label {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--color-heading);
}

/* 6) Helpers */
.text-center {
    text-align: center;
}

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

.text-left {
    text-align: left;
}
/* For mixed LTR content */
.muted {
    color: var(--color-muted);
}

/* 7) Responsive scaling */
@media (max-width: 992px) {
    h1 {
        font-size: 2.1rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    h3 {
        font-size: 1.5rem;
    }
}

@media (max-width: 600px) {
    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.5rem;
    }
}

/* 8) Optional decorative display heading */
.display-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-heading);
}

/* 9) Accessibility focus style */
:focus-visible {
    outline: 2px solid rgba(0, 150, 255, 0.4);
    outline-offset: 2px;
}
.pull-left {
    float: right !important;
}
.pull-right {
    float: left !important;
}