@font-face { font-family: "IBMPlexSansArabic"; src: url("../assets/fonts/IBMPlexSansArabic-Regular.ttf") format("truetype"); font-weight: 100 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBMPlexSansArabic"; src: url("../assets/fonts/IBMPlexSansArabic-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "IBMPlexSansArabic"; src: url("../assets/fonts/IBMPlexSansArabic-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "IBMPlexSansArabic"; src: url("../assets/fonts/IBMPlexSansArabic-Bold.ttf") format("truetype"); font-weight: 700 900; font-style: normal; font-display: swap; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: "IBMPlexSansArabic", sans-serif; text-decoration: none; } html { font-size: 62.5%; overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 7rem; } body { font-size: clamp(1.4rem, 1.2vw, 1.6rem); font-weight: 400; line-height: 1.5; /* Safety net for anything that reaches past the edge (mobile Safari does not reliably honour overflow-x on alone). `clip` rather than `hidden` so the sticky nav keeps working. */ overflow-x: clip; } .center { display: flex; justify-content: center; align-items: center; } /* status/bullet dot — used in the hero pill and in the footer on every page */ .dot { width: 8px; height: 8px; border-radius: 9999px; flex-shrink: 0; } .skip-link { position: absolute; top: -100%; inset-inline-start: 1rem; z-index: 2000; padding: 1rem 2rem; border-radius: 0 0 0.8rem 0.8rem; background-color: var(--bs-teal); color: var(--bs-dark); font-weight: 600; } .skip-link:focus-visible { top: 0; color: var(--bs-dark); } /* AOS hides [data-aos] elements until it initialises — keep the content readable when JS is unavailable or the user asked for reduced motion. */ html:not(.js) [data-aos] { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } ul { list-style: none; padding: 0; margin: 0; } a { text-decoration: none; color: var(--bs-white); } img { display: block; max-width: 100%; height: auto; } .root { position: relative; z-index: 1; min-height: 100vh; } .root-bg{ position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; z-index: -1; } @media (max-width: 991px) { html { font-size: 60%; } } @media (max-width: 450px) { html { font-size: 55%; } } /* ----------------nav bar------------------ */ .nav-wrapper{ border-radius: 0 0 8px 8px; border-bottom: solid 1px var(--bs-gray-200); } .nav-links li a{ color: var(--bs-gray-100); font-weight: 400; transition: 0.4s; } .nav-links li a.active{ font-weight: 600; color: var(--bs-teal); } .nav-links li a:hover{ color: var(--bs-teal); } .btn-contact-us{ border-radius: 1.6rem; padding: 1.7rem 4rem; } @media (max-width: 575.98px) { .btn-contact-us { padding: 1.5rem 2.6rem; } } /* ----------------------------sidebar----------------------- */ .offcanvas { background-color: var(--bs-dark); width: 30rem; max-width: 90vw; } .offcanvas-body a { color: var(--bs-gray-100); padding: 1rem 0; display: block; text-align: center; border: 1px solid var(--bs-gray-200); border-radius: 0.8rem; transition: 0.3s; font-weight: 500; } .offcanvas-body a:hover { background-color: var(--bs-gray-100); color: var(--bs-dark); } .btn-sidebar img{ width: 4rem; } /* ---------------------footer--------------------- */ footer{ border-top: solid 1px var(--bs-gray-200); } .footer-content{ border-bottom: solid 1px var(--bs-gray-200); padding-bottom: 5.2rem; } /* ------------------gutter override------------------ */ @media screen and (max-width: 991px) { .g-5 { --bs-gutter-x: 1.5rem; } } /* ------------------colour helpers------------------ This Bootstrap build only ships .text-purple and .text-gray-100 for the custom palette; the teal/green tokens exist as variables but have no utility class, so text using them rendered at the inherited body colour. */ .text-teal { color: var(--bs-teal) !important; } .text-green-100 { color: var(--bs-green-100) !important; } /* ------------------latin runs inside RTL text------------------ Phone numbers and email addresses are logically LTR; without this they get reordered by the bidi algorithm when they sit next to Arabic text. */ .contact-value { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* ------------------unified-number button in the nav------------------ */ .btn-hotline { padding: 1.3rem 2.6rem; } .btn-hotline img { width: 2rem; } .offcanvas-hotline { background-color: var(--bs-teal); color: var(--bs-dark) !important; font-weight: 700; border-color: var(--bs-teal) !important; } /* ------------------contact cards (home + contact page)------------------ */ .contact-card { border: 1px solid var(--bs-gray-300); background-color: var(--bs-gray-400); border-radius: 2.4rem; color: inherit; } .contact-icon { width: 6.4rem; height: 6.4rem; flex-shrink: 0; border-radius: 9999px; border: 1px solid var(--bs-gray-300); background-color: var(--bs-gray-500); } .contact-icon img { width: 2.6rem; } /* ------------------social icon button------------------ */ .social-link { width: 4rem; height: 4rem; border-radius: 9999px; border: 1px solid var(--bs-gray-300); background-color: var(--bs-gray-400); color: var(--bs-purple); } /* ------------------shared page hero (inner pages)------------------ */ .page-hero { border-bottom: 1px solid var(--bs-gray-200); } .page-hero .page-eyebrow { border-radius: 9999px; border: 1px solid var(--bs-indigo-100); background-color: var(--bs-indigo); color: var(--bs-pink); } .page-lead { max-width: 72rem; } /* ------------------long-form legal / policy pages------------------ */ .legal-content { border: 1px solid var(--bs-gray-300); background-color: var(--bs-gray-400); border-radius: 2.4rem; } .legal-content h2 { color: var(--bs-teal); } .legal-content p, .legal-content li { color: var(--bs-gray-100); } .legal-content ul { list-style: none; display: flex; flex-direction: column; gap: 1.2rem; } .legal-content ul li { position: relative; padding-inline-start: 2.4rem; } .legal-content ul li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.85em; width: 0.8rem; height: 0.8rem; border-radius: 9999px; background-color: var(--bs-teal); } .legal-wrap { max-width: 88rem; }