html {
    scroll-behavior: smooth;
}

.taraf-header {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.taraf-header .taraf-design nav > div {
    height: 64px !important;
    column-gap: 1.5rem !important;
    padding-inline: 1rem !important;
    border-color: #8a7044 !important;
}

@media (width >= 64rem) {
    .taraf-header .taraf-design nav > div {
        height: 88px !important;
        column-gap: 100px !important;
        padding-inline: 4rem !important;
        border-radius: 1rem;
    }
}

.taraf-header nav > div > div {
    column-gap: 1rem !important;
}

/* The site sets direction:rtl on every element, which flips +50K into 50K+. */
.taraf-design [dir="ltr"] {
    direction: ltr;
}

/* Bootstrap spacing utilities use !important and different steps than Tailwind. */
.taraf-design .gap-3 { gap: 0.75rem !important; }
.taraf-design .gap-4 { gap: 1rem !important; }
.taraf-design .gap-5 { gap: 1.25rem !important; }
.taraf-design .p-3 { padding: 0.75rem !important; }
.taraf-design .p-4 { padding: 1rem !important; }
.taraf-design .px-3 { padding-inline: 0.75rem !important; }
.taraf-design .px-4 { padding-inline: 1rem !important; }
.taraf-design .py-3 { padding-block: 0.75rem !important; }
.taraf-design .py-4 { padding-block: 1rem !important; }
.taraf-design .py-5 { padding-block: 1.25rem !important; }
.taraf-design .pb-4 { padding-bottom: 1rem !important; }
.taraf-design .pb-5 { padding-bottom: 1.25rem !important; }
.taraf-design .ps-3 { padding-inline-start: 0.75rem !important; }
.taraf-design .ps-4 { padding-inline-start: 1rem !important; }
.taraf-design .mt-3 { margin-top: 0.75rem !important; }
.taraf-design .mx-4 { margin-inline: 1rem !important; }

/* Bootstrap .order-first is order:-1 !important, so the photo stays in the side column. */
@media (width >= 64rem) {
    .taraf-design .lg\:order-none { order: 0 !important; }
}

/* Parent variants were left unprefixed, so they lose to .taraf-design utilities. */
.taraf-design .\[\&_p\]\:text-\[\#968b7a\] p { color: #968b7a; }
.taraf-design .\[\&_p\]\:text-gray-700 p { color: #2d2d2d; }
.taraf-design .\[\&_p\]\:text-gray2-800 p { color: #828282; }
.taraf-design .\[\&_p\]\:text-xl p {
    font-size: 1.25rem !important;
    line-height: 2.25rem;
}

/* Base gap/padding overrides are !important, so the larger breakpoint has to be too. */
@media (width >= 40rem) {
    .taraf-design .sm\:gap-6 { gap: 1.5rem !important; }
    .taraf-design .sm\:p-6 { padding: 1.5rem !important; }
    .taraf-design .sm\:p-8 { padding: 2rem !important; }
}

@media (width >= 64rem) {
    .taraf-design .lg\:gap-4 { gap: 1rem !important; }
    .taraf-design .lg\:gap-6 { gap: 1.5rem !important; }
    .taraf-design .lg\:gap-8 { gap: 2rem !important; }
    .taraf-design .lg\:gap-16 { gap: 4rem !important; }
    .taraf-design .lg\:gap-\[17px\] { gap: 17px !important; }
    .taraf-design .lg\:gap-\[53px\] { gap: 53px !important; }
    .taraf-design .lg\:px-16 { padding-inline: 4rem !important; }
}

.taraf-design .shadow-lg {
    box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a !important;
}

/* Reserve the map box before the file loads, so the scroll offset is not stuck at height 0. */
.taraf-design #nationalities > img {
    aspect-ratio: 1440 / 740;
    width: 100%;
    max-width: 1440px;
    height: auto;
}

/* Bootstrap .text-secondary and .bg-secondary are gray. Keep the design gold. */
.taraf-design .text-secondary { color: #b8955a !important; }
.taraf-design .bg-secondary { background-color: #b8955a !important; }
.taraf-design .border-secondary { border-color: #b8955a !important; }
.taraf-design [class*="text-secondary-active"] .text-secondary { color: #937748 !important; }

.taraf-page {
    overflow-x: clip;
    background: #fff;
}

/* The old stylesheet sets Montserrat on every element, and it sits outside
   Tailwind's layers, so it covers the design fonts. These stacks match
   taraf_new_desigin_v2: Arabic body, IBM Plex Sans for Latin, Lalezar for display. */
.taraf-design,
.taraf-design :where(*):not(i):not([class*="fa-"]) {
    font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
}

.taraf-design .font-latin,
.taraf-design .font-latin :where(*):not(.font-sans):not(.font-display):not(i):not([class*="fa-"]) {
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", ui-sans-serif, sans-serif;
}

.taraf-design .font-display,
.taraf-design .font-display :where(*):not(.font-sans):not(.font-latin):not(i):not([class*="fa-"]) {
    font-family: "Lalezar", "IBM Plex Sans Arabic", sans-serif;
}

.taraf-design .font-sans,
.taraf-design .font-sans :where(*):not(.font-latin):not(.font-display):not(i):not([class*="fa-"]) {
    font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
}

html[dir="ltr"] .taraf-design,
html[dir="ltr"] .taraf-design :where(*):not(i):not([class*="fa-"]) {
    direction: ltr;
}

html[dir="rtl"] .taraf-design,
html[dir="rtl"] .taraf-design :where(*):not(i):not([class*="fa-"]) {
    direction: rtl;
}

.taraf-design a,
.taraf-design a:hover,
.taraf-design a:focus {
    color: inherit;
    text-decoration: none;
}

.taraf-design ul,
.taraf-design ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.taraf-design h1,
.taraf-design h2,
.taraf-design h3,
.taraf-design h4,
.taraf-design h5,
.taraf-design p {
    margin-bottom: 0;
}

.taraf-design button,
.taraf-design input,
.taraf-design select,
.taraf-design textarea {
    font-family: inherit;
}

.taraf-design button,
.taraf-design [type="button"],
.taraf-design [type="reset"],
.taraf-design [type="submit"] {
    margin: 0;
    border: 0;
    background-color: transparent;
    background-image: none;
    cursor: pointer;
}

.taraf-design [x-cloak] {
    display: none !important;
}