@font-face {
    font-family: saudi_riyal;
    src: url("../fonts/saudi_riyal.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



@font-face {
    font-family: "Expo Arabic Book";
    src: url("../fonts/ExpoArabic-Book.woff2") format("woff2"), url("ExpoArabic-Book.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Expo Arabic";
    src: url("../fonts/ExpoArabic-Medium.woff2") format("woff2"), url("ExpoArabic-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Expo Arabic";
    src: url("../fonts/ExpoArabic-SemiBold.woff2") format("woff2"), url("ExpoArabic-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Outfit;
    src: url("../fonts/Outfit-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Outfit Extra";
    src: url("../fonts/Outfit-ExtraBold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Outfit Semi";
    src: url("../fonts/Outfit-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Outfit;
    src: url("../fonts/Outfit-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Outfit;
    src: url("../fonts/Outfit-Thin.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Outfit Extra";
    src: url("../fonts/Outfit-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Outfit;
    src: url("../fonts/Outfit-Bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Outfit;
    src: url("../fonts/Outfit-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: "Outfit";
    src: url(O../fonts/utfit-Regular.woff)format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

body {
    margin: 0px;
    font-family: Outfit !important;
    font-family: "Expo Arabic" !important;
}

/* --------------------------------------------------------- */

:focus-visible {
    outline: 0;
}

/* =========================
   1) Layout: Header
   ========================= */
.tf_header {
    background: linear-gradient(to bottom, #1A3C6B 0%, #2E5EA0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

.tf_header .tf_logo {}

.tf_header .tf_logo img {}

/* =========================
   2) Layout: Body
   ========================= */
.tf_body {
    min-height: calc(100vh - 300px);
}

.tf_body .tf_body--container {
    max-width: 640px;
    margin: auto;
    padding: 50px 0;
}

/* Intro / Instruction text (inherits base font from body) */
.tf_body .tf_body--container>h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    color: #000;
}

/* =========================
   3) Component: Phone Input
   ========================= */
.phone-input {
    height: 57px;
    border: 1px solid #E1E1E1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    direction: ltr;
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    margin-top: 30px;
    margin-bottom: 50px;
}


.phone-input .divider {
    display: block;
    height: 17px;
    width: 1px;
    background: #000;
    margin: 0 4px;
}

.phone-input input[type="text"] {
    width: 100%;
    height: 100%;
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    border: 0;
    background: transparent;
}
.phone-input input.country-code {
    width: auto;
    max-width: 40px;
}

.phone-input input[type="text"]::placeholder {}

.phone-input input[type="text"]:focus {}

/* =========================
   4) Section: Classes
   ========================= */
.classes-section {
    background-color: #FAFAFA;
    padding: 30px 24px;
}

/* Header row inside classes section */
.classes-section .classes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.classes-section .classes-header .classes-title {
    margin: 0;
    color: #1A3C6B;
    font-size: 18px;
    font-weight: 600;
}

.classes-section .classes-header .classes-range {
    margin: 0;
    color: #1A3C6B;
    font-size: 18px;
    font-weight: 600;
}

/* =========================
   5) Table: Your Classes
   ========================= */
.table-wrap {}

.table-wrap table {
    width: 100%;
    background-color: #F1F1F4;
    border-radius: 12px;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.03);

}

.table-wrap table thead {}

.table-wrap table thead tr {}

.table-wrap table thead th {
    text-align: start;
    color: #212121;
    font-size: 13px;
    font-weight: 400;
    background-color: #FCFCFC;
    padding: 13px 16px;
}

.table-wrap table tbody {}

.table-wrap table tbody tr {}

.table-wrap table tbody td {
    text-align: start;
    color: #212121;
    font-size: 13px;
    font-weight: 400;
    background-color: #fff;
    padding: 13px 16px;
}

.table-wrap table tbody td[data-label] {}

/* Column-specific (keep minimal specificity; inherit where possible) */
.table-wrap table .col-link {
    text-align: center;
}

/* Link button inside table (icon-only) */
.link-btn {}

.link-btn:hover {}

.link-btn:focus-visible {}

.link-btn img {}

/* =========================
   6) CTA / Buttons
   ========================= */
.tf_btn {
    margin-top: 85px;
}

.tf_btn a {
    background-color: #FFC627;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    font-size: 18px;
    font-weight: 600;
    color: #1A3C6B;
    text-decoration: none;
}

.tf_btn a span {}

.tf_btn a:hover {}

.tf_btn a:active {}

.tf_btn a:focus-visible {}

/* =========================
   7) Footer
   ========================= */
.tf_footer {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
}

.tf_footer .tf_footer--container {
    display: flex;
    max-width: 1140px;
    width: 1140px;
    justify-content: space-between;
    align-items: center;
}

.tf_footer .tf_footer--container p {
    margin: 0;
    font-size: 14px;
    color: #1A3C6B;
    font-weight: 500;
}

.tf_footer .tf_footer--container>div {
    display: flex;
    gap: 20px;
}

.tf_footer .tf_footer--container a {
    display: block;
    width: 32px;
    height: 32px;
}

.lang-toggle {
    display: block;
    margin: 20px auto 0;
    padding: 6px 18px;
    border-radius: 999px;
    border: 1px solid #1A3C6B;
    background-color: #FFFFFF;
    color: #1A3C6B;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.lang-toggle:hover {
    background-color: #FFC627;
    color: #1A3C6B;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.lang-toggle:focus-visible {
    outline: 2px solid #FFC627;
    outline-offset: 2px;
}


@media (max-width: 767px) {

    /* =========================
   1) Layout: Header
   ========================= */
    .tf_header {
        background: linear-gradient(to bottom, #1A3C6B 0%, #2E5EA0 100%);
        height: 228px;
    }

    .tf_header .tf_logo {}

    .tf_header .tf_logo img {}

    /* =========================
   2) Layout: Body
   ========================= */
    .tf_body {
        display: flex;
        min-height: calc(100vh - 328px);
    }

    .tf_body .tf_body--container {
    max-width: unset;
    padding: 30px 0;
}

    /* Intro / Instruction text (inherits base font from body) */
    .tf_body .tf_body--container>h2 {
    margin: 0 24px;
}

    /* =========================
   3) Component: Phone Input
   ========================= */
    .phone-input {
    margin: 30px 24px;
}


    .phone-input .divider {}

    .phone-input input[type="text"] {}
    .phone-input input.country-code {}

    .phone-input input[type="text"]::placeholder {}

    .phone-input input[type="text"]:focus {}

    /* =========================
   4) Section: Classes
   ========================= */
    .classes-section {}

    /* Header row inside classes section */
    .classes-section .classes-header {}

    .classes-section .classes-header .classes-title {}

    .classes-section .classes-header .classes-range {}

    /* =========================
   5) Table: Your Classes
   ========================= */
    .table-wrap {}

    .table-wrap table {}

    .table-wrap table thead {}

    .table-wrap table thead tr {}

    .table-wrap table thead th {}

    .table-wrap table tbody {}

    .table-wrap table tbody tr {}

    .table-wrap table tbody td {}

    .table-wrap table tbody td[data-label] {}

    /* Column-specific (keep minimal specificity; inherit where possible) */
    .table-wrap table .col-link {}

    /* Link button inside table (icon-only) */
    .link-btn {}

    .link-btn:hover {}

    .link-btn:focus-visible {}

    .link-btn img {}

    /* =========================
   6) CTA / Buttons
   ========================= */
    .tf_btn {}

    .tf_btn a {
    margin: 43px 24px;
    margin-bottom: 0;
}

    .tf_btn a span {}

    .tf_btn a:hover {}

    .tf_btn a:active {}

    .tf_btn a:focus-visible {}

    /* =========================
   7) Footer
   ========================= */
    .tf_footer {}

    .tf_footer .tf_footer--container {
    justify-content: center;
    width: auto;
    max-width: unset;
    padding: 0 24px;
}

    .tf_footer .tf_footer--container p {}

    .tf_footer .tf_footer--container>div {
    display: none;
}

    .tf_footer .tf_footer--container a {}


}