/* Self-hosted IBM Plex Sans Arabic; licensed under the bundled SIL OFL. */
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/ibm-plex-sans-arabic/regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/ibm-plex-sans-arabic/medium.woff2') format('woff2');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/ibm-plex-sans-arabic/semibold.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/ibm-plex-sans-arabic/bold.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

/* Override page-specific legacy fonts while preserving icon glyphs. */
html body,
html body :is(#main#main, #header#header, #footer#footer, #topbar#topbar),
html body :is(#main#main, #header#header, #footer#footer, #topbar#topbar) :where(*):not(:where(.fa, .fas, .far, .fab, .fal, .fad, .bi, [class*="fa-"], [class*="bi-"], .material-icons)),
html body :is(input, select, textarea, button) {
    font-family: var(--it-font-family) !important;
}

html body { font-size: 17px; line-height: 1.85; font-weight: 400; }
html body #main#main :is(p, li, dd, .hero-desc, .feature-desc, .home-faq-answer, .faq-answer) {
    font-size: clamp(16px, 1.1vw + 5px, 18px) !important;
    font-weight: 400 !important;
    line-height: 1.85 !important;
}
html body #main#main :is(p, li, dd, .hero-desc, .feature-desc, .home-faq-answer, .faq-answer) :where(span, a) {
    font-weight: inherit !important;
}
html body #main#main :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 700 !important;
    line-height: 1.5 !important;
}
html body #main#main :is(h1, h2, h3, h4, h5, h6) :where(span, a, strong, b) {
    font-weight: inherit !important;
}
html body #main#main h1 { font-size: clamp(34px, 4.2vw, 60px) !important; }
html body #main#main h2 { font-size: clamp(28px, 3vw, 42px) !important; }
html body #main#main h3 { font-size: clamp(22px, 1.8vw, 28px) !important; }
html body #main#main h4 { font-size: clamp(20px, 1.5vw, 24px) !important; }
html body #main#main :is(h5, h6) { font-size: 18px !important; }
html body #main#main :is(strong, b, .btn, button) { font-weight: 600 !important; }
html body #main#main :is(.accordion-header, .faq-question):is(h1, h2, h3),
html body #main#main :is(.accordion-button, .faq-question button) {
    font-size: clamp(18px, 1.5vw, 22px) !important;
    font-weight: 600 !important;
    line-height: 1.65 !important;
}
html body #header#header #navbar a.nav-link,
html body #header#header .header-actions :is(a, button) { font-weight: 600 !important; }
html body #footer#footer.infinity-footer .footer-section-title {
    font-size: 22px !important;
    font-weight: 700 !important;
}
html body #footer#footer.infinity-footer :is(p, a, span, small, .copyright):not(:where(.fa, .fas, .far, .fab, .bi, [class*="fa-"], [class*="bi-"])) {
    font-weight: 400 !important;
    line-height: 1.85;
}

@media (max-width: 767.98px) {
    html body #main#main h1 { font-size: clamp(30px, 7.5vw, 38px) !important; }
    html body #main#main h2 { font-size: clamp(26px, 6.5vw, 32px) !important; }
    html body #main#main h3 { font-size: 22px !important; }
    html body #main#main h4 { font-size: 20px !important; }
}

/* Header/footer share the brand heading gradient, with smaller navigation. */
html body #footer#footer .footer-social-links .fa-brands {
    font-family: 'Font Awesome 6 Brands' !important;
    font-weight: 400 !important;
    font-style: normal;
    -webkit-text-fill-color: currentColor !important;
}
/* Include glyphs also on pages using the reduced homepage icon stylesheet. */
#footer .footer-social-links .fa-youtube::before { content: '\f167'; }
#footer .footer-social-links .fa-x-twitter::before { content: '\e61b'; }
html body #header#header #navbar a.nav-link,
html body #footer#footer.infinity-footer .footer-section-title {
    background-image: linear-gradient(90deg, #2F3A85 0%, #257ACD 52%, #C15F9F 100%) !important;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent !important;
    font-weight: 700 !important;
}
html body #header#header #navbar a.nav-link :where(span),
html body #footer#footer.infinity-footer .footer-section-title :where(span) {
    -webkit-text-fill-color: inherit !important;
}
html body #header#header #navbar a.nav-link {
    font-size: 17px !important;
    line-height: 1.6 !important;
}
html body #footer#footer.infinity-footer .footer-section-title {
    font-size: clamp(22px, 1.8vw, 28px) !important;
    line-height: 1.5 !important;
}
html body #footer#footer.infinity-footer :is(.footer-quick-links a, .footer-contact-item a, .footer-address-card a) {
    font-size: 16px !important;
    font-weight: 500 !important;
}
/* Icon fonts must stay solid even when their surrounding link is gradient text. */
html body #header#header #navbar a.nav-link {
    background-color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}
html body #header#header #navbar a.nav-link :is(i, .fa, .bi) {
    color: #257ACD !important;
    -webkit-text-fill-color: currentColor !important;
}
html body.dark #header#header #navbar a.nav-link,
html body.dark #footer#footer.infinity-footer .footer-section-title {
    background-image: linear-gradient(90deg, #b9c2ff 0%, #9acbff 52%, #efb6da 100%) !important;
}
html body.dark #header#header #navbar a.nav-link :is(i, .fa, .bi) { color: #9acbff !important; }
@media (min-width: 992px) and (max-width: 1250px) {
    html body #header#header #navbar a.nav-link { font-size: 15px !important; }
}