:root {
    --th-blue: #1769e8;
    --th-blue-hover: #0f58cb;
    --th-blue-soft: #eef5ff;

    --th-dark: #111827;
    --th-dark-deep: #090d14;

    --th-text: #101828;
    --th-muted: #667085;
    --th-muted-2: #98a2b3;

    --th-bg: #f7f9fc;
    --th-card: #ffffff;

    --th-border: #e4e7ec;
    --th-border-dark: #d0d5dd;

    --th-green: #12b76a;

    --th-radius-sm: 10px;
    --th-radius: 16px;
    --th-radius-lg: 24px;

    --th-container: 1240px;

    --th-font-strong: 800;

    --th-shadow:
        0 16px 45px rgba(16,24,40,.07);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--th-dark-deep);
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    margin: 0;

    display: flex;
    flex-direction: column;

    background: #fff;
    color: var(--th-text);

    direction: rtl;

    font-family:
        "Tajawal",
        Arial,
        sans-serif;

    font-size: 16px;
    line-height: 1.8;

    -webkit-font-smoothing: antialiased;
}

#main-content {
    flex: 1 0 auto;

    width: 100%;

    background: #fff;
}

.th-site-footer {
    flex-shrink: 0;
}

body,
input,
button,
select,
textarea {
    font-family: inherit;
}

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

img {
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    outline: none;
}

button {
    cursor: pointer;
}

svg {
    display: block;
}

.th-container {
    width:
        min(
            calc(100% - 48px),
            var(--th-container)
        );

    margin-inline: auto;
}

.th-content {
    padding-block:
        50px 80px;
}

.th-page-title {
    margin:
        0 0
        30px;

    font-size:
        clamp(32px,4vw,46px);

    line-height: 1.25;
    font-weight: 900;
}

.th-section {
    padding-block: 78px;
}

.th-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 22px;

    margin-bottom: 34px;
}

.th-section-heading > div > span,
.th-section-heading > span {
    display: block;

    margin-bottom: 5px;

    color: var(--th-blue);

    font-size: 13px;
    font-weight: 800;
}

.th-section-heading h2 {
    margin: 0;

    color: var(--th-text);

    font-size:
        clamp(32px,3vw,42px);

    line-height: 1.25;

    font-weight: 900;

    letter-spacing: -.4px;
}

.th-section-heading p {
    margin:
        10px 0 0;

    color: var(--th-muted);

    font-size: 15px;
    line-height: 1.9;
}

.th-section-heading > a {
    color: var(--th-blue);

    font-size: 14px;
    font-weight: 800;
}

.th-heading-center {
    display: block;

    max-width: 680px;

    margin-inline: auto;
    margin-bottom: 38px;

    text-align: center;
}

.th-btn {
    min-height: 50px;

    padding: 0 26px;

    border:
        1px solid transparent;

    border-radius: 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
    font-weight: 800;

    transition:
        transform .18s ease,
        background-color .18s ease,
        border-color .18s ease;
}

.th-btn:hover {
    transform: translateY(-1px);
}

.th-btn-primary {
    background: var(--th-blue);
    color: #fff;
}

.th-btn-primary:hover {
    background: var(--th-blue-hover);
    color: #fff;
}

.th-btn-outline {
    border-color: var(--th-border-dark);

    background: #fff;
    color: var(--th-dark);
}

.th-btn-white {
    background: #fff;
    color: var(--th-dark);
}

strong,
b {
    font-weight: 800;
}

.screen-reader-text {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0,0,0,0);

    white-space: nowrap;

    border: 0;
}

@media (max-width: 767px) {

    body {
        font-size: 15px;
    }

    .th-container {
        width:
            min(
                calc(100% - 24px),
                var(--th-container)
            );
    }

    .th-section {
        padding-block: 52px;
    }
}