` with
flex:0 0 25% from Bootstrap; previous rule targeted .numbers__block
which is the inner content. Target the col-* classes directly.
============================================================ */
@media (max-width: 575.98px) {
/* Force the Bootstrap columns to full width at narrow mobile */
body.dga-homepage .numbers .col-md-6,
body.dga-homepage .numbers .col-lg-3,
body.dga-homepage .numbers .col-md-6.col-lg-3,
body.dga-homepage .numbers [class*="col-"] {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
}
body.dga-homepage .numbers__block {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 auto !important;
}
/* Ensure the parent .row doesn't keep them wrapped horizontally */
body.dga-homepage .numbers .row,
body.dga-homepage .numbers > .container > .row {
flex-direction: column !important;
align-items: center !important;
gap: 16px !important;
}
body.dga-homepage .numbers .row > * {
width: 100% !important;
max-width: 320px !important;
}
}
/* ============================================================
FIX 12 (2026-05-21, revised): Chatbot widget DGA theming
Third-party "ST" chat widget injected by
chat-smebank.uniithra.com.sa/Generate_kafalah/chatBot-en.js
v2: polished pill design — 56px circular button with chat-bubble
icon; "Not available" disabled state in muted DGA gray, not navy.
============================================================ */
/* Container — bottom-left (RTL pattern on this site), proper spacing */
.st-btn-container.right-bottom,
.st-btn-container-disable.right-bottom,
.st-btn-container,
.st-btn-container-disable {
bottom: 24px !important;
right: auto !important;
left: 24px !important;
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
border-radius: 32px !important;
padding: 0 !important;
z-index: 9999 !important;
}
/* Available (live) state — pure brand */
.st-btn-container.right-bottom {
background-color: transparent !important;
}
/* Disabled / unavailable state — soft muted dark green pill */
.st-btn-container-disable.right-bottom {
background-color: rgba(7, 77, 49, 0.92) !important;
background-image: none !important;
box-shadow: 0 8px 24px rgba(7, 77, 49, 0.22) !important;
padding-right: 18px !important;
border-radius: 32px !important;
}
/* The circular chat button itself */
.st-button-main {
background-color: #067647 !important;
background-image: linear-gradient(135deg, #067647 0%, #074D31 100%) !important;
color: #ffffff !important;
border: none !important;
border-radius: 50% !important;
width: 56px !important;
height: 56px !important;
min-width: 56px !important;
min-height: 56px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 8px 24px rgba(7, 77, 49, 0.32) !important;
font-family: "IBM Plex Sans Arabic", sans-serif !important;
cursor: pointer !important;
position: relative !important;
transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.st-button-main:hover {
background-image: linear-gradient(135deg, #074D31 0%, #053321 100%) !important;
transform: translateY(-1px) !important;
box-shadow: 0 12px 28px rgba(7, 77, 49, 0.4) !important;
}
/* Inject a chat-bubble icon via ::before so the button isn't an
empty green circle (third-party widget didn't bundle an icon) */
.st-button-main::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background-image: url("data:image/svg+xml;utf8,
") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 26px 26px !important;
pointer-events: none !important;
}
/* Disabled-state icon (lower-contrast) */
.st-btn-container-disable .st-button-main {
background-image: linear-gradient(135deg, #5C7A6F 0%, #455F55 100%) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
cursor: not-allowed !important;
}
.st-btn-container-disable .st-button-main:hover {
transform: none !important;
background-image: linear-gradient(135deg, #5C7A6F 0%, #455F55 100%) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
}
/* "Not available now" label (visible only in disabled state) */
.st-button-lable {
color: #ffffff !important;
font-family: "IBM Plex Sans Arabic", sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
white-space: nowrap !important;
padding: 0 4px 0 0 !important;
line-height: 1.3 !important;
}
/* Chat panel (expanded view) */
.st-panel {
border-radius: 16px !important;
box-shadow: 0 20px 48px rgba(16, 24, 40, 0.18) !important;
border: 1px solid #D2D6DB !important;
overflow: hidden !important;
font-family: "IBM Plex Sans Arabic", sans-serif !important;
}
.st-panel-header,
.st-panel-header.text-center {
background-color: #067647 !important;
background-image: linear-gradient(135deg, #067647 0%, #074D31 100%) !important;
color: #ffffff !important;
padding: 16px 20px !important;
font-family: "IBM Plex Sans Arabic", sans-serif !important;
font-weight: 600 !important;
font-size: 16px !important;
}
.st-panel-header * { color: #ffffff !important; }
.st-panel #CloseBtn,
.st-panel-header #CloseBtn,
.st-panel .pull-left.fa.fa-times {
color: #ffffff !important;
opacity: 0.9 !important;
}
.st-panel #CloseBtn:hover { opacity: 1 !important; }
/* Chat actions / cells */
.st-actionContainer.right-bottom { font-family: "IBM Plex Sans Arabic", sans-serif !important; }
.My-Cell,
.My-grid {
font-family: "IBM Plex Sans Arabic", sans-serif !important;
color: #1F2A37 !important;
}
.My-grid-disable { opacity: 0.5 !important; }
/* ============================================================
FIX 13 (2026-05-21): Footer bottom-strip typography polish
Now that the strip merges with the main green footer, refine
typography + spacing of Sitemap/RSS links and copyright.
============================================================ */
.dga-footer-bottom__inner {
padding: 0 16px !important;
align-items: center !important;
}
.dga-footer-bottom__links a {
font-size: 13px !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.85) !important;
padding: 4px 8px !important;
border-radius: 4px !important;
transition: color 0.15s ease, background-color 0.15s ease !important;
}
.dga-footer-bottom__links a:hover,
.dga-footer-bottom__links a:focus-visible {
color: #ffffff !important;
background-color: rgba(255, 255, 255, 0.08) !important;
}
.dga-footer-bottom__links a:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.5) !important;
outline-offset: 2px !important;
}
.dga-footer-bottom__links span {
color: rgba(255, 255, 255, 0.35) !important;
font-size: 13px !important;
user-select: none !important;
}
.dga-footer-bottom__copy {
font-size: 13px !important;
font-weight: 400 !important;
color: rgba(255, 255, 255, 0.85) !important;
letter-spacing: 0.01em !important;
}
.dga-footer-bottom__logo img {
max-height: 24px !important;
opacity: 0.85 !important;
transition: opacity 0.15s ease !important;
}
.dga-footer-bottom__logo:hover img { opacity: 1 !important; }
/* ============================================================
FIX 15 (2026-05-21): Footer polish — seal under Follow Us + larger Kafalah logo
User feedback: "the seal look like middle part correct the seal below
the follow us and fit make it simple footer one part and the logo
not visual in footer correct that also"
- Move .dga-footer-stamp (DGA seal) to right-align so it sits under
the Follow Us social column (right side of footer)
- Tighten the seal strip padding so the footer reads as one cohesive band
- Enlarge the Kafalah logo in the brand column so it's clearly visible
============================================================ */
/* Compact footer — seal under Follow Us, no white background panel
(DGA seal is white-on-transparent → designed for dark backgrounds).
Uses logical `flex-end` so the seal auto-flips position when the
page direction switches (right in LTR / left in RTL). */
.dga-footer-stamp {
display: flex !important;
justify-content: flex-end !important; /* auto-flips: right in LTR, left in RTL */
align-items: center !important;
padding: 0 !important;
margin: -8px 0 12px !important; /* pull up tight under cols */
border-top: none !important;
background: transparent !important;
}
.dga-footer-stamp img,
.dga-footer-stamp svg {
/* NO background, NO padding, NO border — let the DGA white-on-
transparent badge display directly on the green footer. */
background: transparent !important;
background-color: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
height: 56px !important;
width: auto !important;
max-width: 200px !important;
opacity: 1 !important;
display: block !important;
object-fit: contain !important;
}
/* NOTE: do NOT add an [dir="rtl"] override here. The flex-end value
above already does the right thing for both LTR and RTL because
`flex-end` follows the parent's writing direction. Manually
forcing flex-start on RTL would PIN the seal to the right on
Arabic pages (the opposite of what's wanted). */
/* COMPACT footer — tight padding everywhere, one cohesive band */
.dga-footer-body {
padding: 24px 0 12px !important;
}
.dga-footer-cols {
gap: 24px !important;
padding-bottom: 0 !important;
}
.dga-footer-bottom {
padding: 10px 0 12px !important;
}
.dga-footer-bottom__copy {
font-size: 12px !important;
line-height: 1.4 !important;
}
.dga-footer-heading {
margin-bottom: 12px !important;
font-size: 14px !important;
}
.dga-footer-links li {
margin-bottom: 6px !important;
}
.dga-footer-links a {
font-size: 13px !important;
line-height: 1.5 !important;
}
/* Kafalah brand logo — make it visibly bigger in the footer column */
.dga-footer-col--brand .footer__logo,
.dga-footer-col--brand a.footer__logo {
display: inline-block !important;
}
.dga-footer-col--brand .footer__logo img,
.dga-footer-col--brand a img {
height: 64px !important;
width: auto !important;
max-width: 180px !important;
display: block !important;
}
.dga-footer-col--brand {
min-height: 64px !important;
}
/* ============================================================
FIX 14 (2026-05-21): User wants the footer bottom strip to be
JUST the copyright, centered. No Sitemap/RSS links, no small
Kafalah logo. Make the strip feel like the natural last line of
the main green footer, not a separate sub-section.
============================================================ */
.dga-footer-bottom {
/* Match main footer body exactly - no darker shade, no border-top
- so the copyright reads as the final line of one unified footer. */
background-color: #074D31 !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
padding: 12px 0 14px !important;
}
/* Hide Sitemap | RSS links and the small logo */
.dga-footer-bottom__links,
.dga-footer-bottom__logo {
display: none !important;
}
/* Copyright takes the full width, centered */
.dga-footer-bottom__inner {
justify-content: center !important;
text-align: center !important;
}
.dga-footer-bottom__copy {
flex: 0 1 auto !important;
width: auto !important;
margin: 0 auto !important;
font-size: 12px !important;
color: rgba(255, 255, 255, 0.75) !important;
}
/* ============================================================
FIX 6 (2026-05-21): Laptop range (1280-1599) — show horizontal
nav but with fewer items. Hides "Muahal Initiative / Start Your
Journey" so the remaining 6 items + search/lang/vision fit.
<1280 still collapses to hamburger.
Selectors include :not(.show) to match the specificity of the
global @media (max-width:1599.98px) rule above (which hides
.navbar-collapse:not(.show) .navbar-nav). Without :not(.show),
the global rule wins on specificity and the nav stays hidden.
============================================================ */
@media (min-width: 1280px) and (max-width: 1599.98px) {
/* Hide the hamburger at this range — we use the horizontal nav instead */
.header .navbar-toggler { display: none !important; }
/* Re-show the navbar collapse and the nav list (both .show and :not(.show)
because Bootstrap may not add .show on desktop) */
.header .navbar-collapse,
.header .navbar-collapse:not(.show) { display: flex !important; }
.header .navbar-collapse .navbar-nav,
.header .navbar-collapse:not(.show) .navbar-nav,
.header .navbar-collapse #dga-main-nav,
.header .navbar-collapse:not(.show) #dga-main-nav {
display: flex !important;
flex-direction: row !important;
}
/* Hide Muahal Initiative / Start Your Journey at laptop widths */
.header .navbar-nav > li[data-dga-nav-key="muahal"],
#dga-main-nav > li[data-dga-nav-key="muahal"] {
display: none !important;
}
/* Compact nav typography so 6 items + utility bar fit at this width */
.header .navbar-nav > li > a,
.header .navbar-nav > li > .nav-link,
#dga-main-nav > li > a,
#dga-main-nav > li > a.nav-link {
font-size: clamp(13px, 0.92vw, 15px) !important;
line-height: 22px !important;
padding: 6px 8px !important;
white-space: nowrap !important;
}
}