/*
  DGA-Style-ar.css
  RTL Version for Arabic Language Support
*/

/* ===== At-rules: Fonts ===== */
/* Assuming Arabic font files exist in the same fonts folder */
@font-face {
  font-family: 'IBMPlexSansArabic-Regular';
  src: url("../fonts/IBMPlexSansArabic-Regular.ttf");
}
@font-face {
  font-family: 'IBMPlexSansArabic-Medium';
  src: url("../fonts/IBMPlexSansArabic-Medium.ttf");
}
@font-face {
  font-family: 'IBMPlexSansArabic-Light';
  src: url("../fonts/IBMPlexSansArabic-Light.ttf");
}
@font-face {
  font-family: 'IBMPlexSansArabic-SemiBold';
  src: url("../fonts/IBMPlexSansArabic-SemiBold.ttf");
}

/* ===== Base Settings ===== */
html {
  direction: rtl;
}

body {
  margin: 0;
  font-size: 16px;
  color: #0D121C !important;
  font-family: 'IBMPlexSansArabic-Regular', sans-serif !important;
  text-align: right;
  direction: rtl;
}

/* ===== Typography & Links ===== */
p {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 16px;
  color: #0D121C;
}

a {
  color: #1B8354 !important;
  font-size: 16px;
  text-decoration: underline;
}

/* Visited links */
a:visited {
  color: #14573A !important;
}

/* Links on mouse over */
a:hover {
  color: #54C08A !important;
}

 


.title {
    margin-bottom: 10px;
    margin-top: 25px;
    font-weight: 800;
    font-family: inherit;
}

a:hover {
  color: #54C08A;
  font-size: 16px;
  text-decoration: underline;
}

a:hover {
    text-decoration: underline;
}

h2 {
  font-size: 20px;
  font-weight: 600;
  color: #161616;
  margin-bottom: 15px;
}

/* 1. Container Setup */
#usernameText {
    /* position: relative; */
    /* display: inline-block; */
    /* cursor: pointer; */
    /* padding: 10px 0px; */
    /* border-radius: 8px; */
    /* font-family: inherit; */
    /* text-align: left; */ /* Aligns for Arabic */
    /* min-width: 140px; */
    /* transition: all 0.3s ease; */
}

/* 2. Hide the links by default and style them as a list */
#usernameText a {
    display: none; /* Hidden until hover */
    position: absolute;
    right: -1px; /* Align to container border */
    width: calc(100% + 2px);
    background-color: #ffffff;
    color: #161616 !important;
    padding: 12px 15px;
    text-decoration: none !important;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 999;
    font-size: 14px;
    transition: background 0.2s;
}

/* 3. Dropdown Logic on Hover */
#usernameText:hover {
    /* background: #fff; */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.05); */
}

/* Positioning the items vertically */
#usernameText:hover #ctl00_ss_IdWelcomeDisplayAr_lvName_hlProfile {
    display: block;
    top: 100%; /* First item below the name */
}

#usernameText:hover #ctl00_ss_IdWelcomeDisplayAr_lvName_hlLogOut {
    display: block;
    top: calc(100% + 45px); /* Second item below the first */
    border-top: none;
    border-radius: 0 0 8px 8px;
    color: #dc3545 !important; /* Red for Logout */
}

/* 4. Formatting the Spans inside */
#usernameText span {
    display: inline-block;
    margin-left: 5px;
}

#ctl00_ss_IdWelcomeDisplayAr_lvName_lblName {
    color: #6c757d;
    font-size: 13px;
}

#ctl00_ss_IdWelcomeDisplayAr_lvName_lblADName {
    font-weight: bold;
    /* color: #006c35; */ /* MOH Green */
}

/* 5. Hover effects for links */
#usernameText a:hover {
    background-color: #f1f8f4;
    color: #006c35 !important;
}

/* Remove the specific loginclass.css if it interferes */
#usernameText link {
    display: none;
}


/* ===== Navigation ===== */
li.nav-item a {
  font-size: 16px;
  text-decoration: none;
  color: #161616 !important;
  padding: 0px;
  margin-right: 0px; /* RTL Flip */
}

li.nav-item a:hover {
  color: #111827 !important;
   /* RTL Flip */
}

.col-md-3 h6 a
 
 {
    color: #198754 !important;
}


.navbar-nav .nav-link {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

/* Header & Breadcrumbs */
section.stamp-header {
  background: #f5f6f8;
  border-bottom: 1px solid #D2D6DB;
}

.breadcrumb-item + .breadcrumb-item::before {
  font-family: "Font Font Font Awesome 6 Pro6 Pro6 Pro";
  font-weight: 900;
  content: "\f104" !important; /* Switched from right angle (f105) to left angle */
  color: #9DA4AE !important;
  padding: 0 0px;
  float: right; /* Ensure icon sits correctly */
}

/* ===== Inputs & Forms ===== */
label.required::after {
  content: " *";
  color: #B91C1C;
  font-weight: 700;
  margin-right: 0.25rem; /* RTL Flip */
  margin-left: 0;
}

/* Search Bar Specifics */
.input-group-text {
  border-left: 0; /* RTL Flip: Remove inner border */
  border-right: 1px solid #ced4da;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-right: -1px;
  margin-left: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.input-group > :not(:last-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.close-search {
  float: left; /* RTL Flip */
}

/* ===== Buttons ===== */
.arrow-btn {
  background: #1B8354;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  transition: background 0.2s;
  border: 0;
  color: #fff;
  width: 50px;
  height: 50px;
  float: left; /* RTL Flip */
  margin-left: 10px; /* RTL Flip */
  margin-right: 0;
}

.btn-outline-secondary-action {
  border: 1px solid #dce0e4 !important;
  padding: .375rem .75rem !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  background: none;
  color: #6c757d;
  margin-left: 8px !important; /* RTL Flip */
  margin-right: 0 !important;
}

/* ===== Accordion ===== */
.accordion-button .arrow-icon {
  margin-right: auto; /* RTL Flip: Move arrow to left */
  margin-left: 0;
}

.accordion-button::after {
  display: none !important;
}

.accordion-button:not(.collapsed) .arrow-icon {
  transform: rotate(180deg);
}

/* ===== Cards & Layout ===== */
.card-wrapper {
  direction: rtl;
}

.card-title {
  font-family: 'IBMPlexSansArabic-SemiBold';
  text-align: right;
}

.card.service-card .card-title {
  margin-right: 0px; 
  margin-left: 0px; 
}

.news-meta {
  margin-right: 16px; /* RTL Flip */
  margin-left: 0;
}

/* About Cards */
.info-card h6 {
  text-align: right;
}

.info-card .arrow {
  align-self: flex-end;
  transform: scaleX(-1); /* Flip arrow icon direction */
}

/* ===== Carousel ===== */
.carousel-caption {
  right: 15%;
  left: 15%;
  text-align: right !important; /* RTL Flip */
}

.carousel-indicators {
  padding-right: 0;
  padding-left: 0;
}

.carousel-indicators [data-bs-target] {
  margin: 0 6px;
}

/* ===== Mega Menu ===== */
.mega-menu {
  right: 0; /* RTL Flip */
  left: auto;
  text-align: right;
}

.mobile-submenu {
  left: auto;
  right: 100%; /* RTL Flip */
  transition: right 0.3s ease;
}

.mobile-submenu.active {
  right: 0;
}

.mobile-submenu .back-btn i {
  transform: rotate(180deg); /* Flip back arrow */
}

/* ===== Side Menu & Lists ===== */
ul.sideMenuPickList li {
  float: right; /* RTL Flip */
}

ul.subInnerMenuPanel li {
  text-align: right;
}

ul.subInnerMenuPanel li a {
  text-align: left; /* Keep English/Specific text aligned if needed, usually right for Arabic */
  text-align: right !important; 
}

ul li.sideMenuPanelToggle a span {
  /* border-right: 2px solid #fff; */
  border-left: none;
  padding-right: 5px;
  padding-left: 0;
}

.sideMenuPanelToggle .panel-default > .panel-heading a:after {
  float: left; /* RTL Flip */
  transform: rotate(180deg); /* Flip chevron */
}

/* ===== Footer ===== */
.footer-links {
  padding-right: 0; /* RTL Flip */
  padding-left: 0;
}

.small-links a {
  margin-left: 10px; /* RTL Flip */
  margin-right: 0;
  color: #fff !important;
}

.modified-date {
  text-align: left; /* RTL Flip: Date usually on opposite side */
}

.feedback-result {
  margin-right: auto; /* RTL Flip */
  margin-left: 0;
}

/* ===== Partners Carousel ===== */
.partners-carousel-control.left {
  right: -60px; /* RTL Flip */
  left: auto;
  transform: translateY(-50%) rotate(180deg); /* Flip arrow */
}

.partners-carousel-control.right {
  left: -60px; /* RTL Flip */
  right: auto;
  transform: translateY(-50%) rotate(180deg); /* Flip arrow */
}

/* ===== Tabs ===== */
.nav-tabs.custom-tabs .nav-link {
  margin-left: 1rem; /* RTL Flip */
  margin-right: 0;
}

#categoriesTabs.tabs li {
  float: right;
}

.tabs {
  padding-right: 0;
}

.tab-btn {
  font-family: 'IBMPlexSansArabic-SemiBold' !important;
}

/* ===== Events / Timeline ===== */
.event-slide {
  padding-right: 120px;
  padding-left: 120px;
}

.events-controls {
  padding-right: 120px;
  padding-left: 120px;
}

.events-arrows .nav-btn i {
  transform: scaleX(-1); /* Flip arrows */
}

/* ===== Utility Classes & Fixes ===== */
.float-right {
  float: left !important;
}

.text-align-right {
  text-align: left;
}

/* Alerts */
.alert.alert-success {
  border-right: 6px solid #16A34A; /* RTL Flip */
  border-left: none;
}

.alert.alert-success::before {
  margin-left: .5rem;
  margin-right: 0;
}

/* Tags */
.tags li.tag-green, .tag-blue, .tag-gray {
  margin-left: 5px;
  margin-right: 0;
}

/* Verification Card */
.verify-toggle #chevronIcon {
  margin-right: 0.5rem !important;
  margin-left: 0 !important;
}

/* Font Families Specifics */
h1, h2, h3, h4, h5, h6, .card-title, .footer-title, .sstitle {
  font-family: 'IBMPlexSansArabic-SemiBold', sans-serif !important;
}

body, p, a, span, div, .btn, .nav-link {
  font-family: 'IBMPlexSansArabic-Regular', sans-serif !important;
}


ul.navbar-nav.me-auto.mb-2.mb-lg-0.gap-3.gap-lg-4 {
    margin-right: 0px !important;
}
/* Full Bleed Fixes for RTL */
.controls, 
[aria-labelledby="servicesHeading"] .carousel-container, 
[aria-labelledby="servicesHeading"] .cards-wrapper {
    margin-right: calc(50% - 50vw) !important;
    margin-left: calc(50% - 50vw) !important;
    padding-right: clamp(20px, 6vw, 120px) !important;
    padding-left: clamp(20px, 6vw, 120px) !important;
}

/* Media Queries */
@media (max-width: 768px) {
  .partners-carousel-control.left {
    right: 0px;
  }
  .partners-carousel-control.right {
    left: 0px;
  }
  
  .event-slide {
    padding-right: 20px;
    padding-left: 20px;
  }
  
  .container, .container-fluid {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }
}

:root {
  /* Adjust colors here if you change the brand color */
  --focus-ring-color: #1B8354;
  /* brand green */
  --focus-ring-outline: 3px solid #000000;
  --focus-ring-offset: 2px;
  /* space between element & ring */
  --focus-oval-radius: 8px;
  --focus-ring-color: #1B8354;
  /* brand green */
  --focus-ring: 3px solid var(--focus-ring-color);
  --focus-offset: 3px;
  --focus-radius: 8px;
}
:root {
  --focus-ring-color:#1B8354;
  --focus-ring:3px solid var(--focus-ring-color);
  --focus-offset:3px;
}
:root {
  --focus-ring-color:#1B8354;
  --focus-ring:3px solid var(--focus-ring-color);
  --focus-offset:3px;
  --focus-radius:8px;
}
:root {
  --focus-ring-color:#1B8354;
}
html {
  scroll-padding-top: var(--header-height);
}
*:focus {
  scroll-margin-top: var(--header-height);
}
:root {
  --focus-ring-color:#1B8354;          /* brand green */
  --focus-ring:3px solid var(--focus-ring-color);
  --focus-offset:3px;
  --focus-radius:8px;
}
:root {
  --focusRing:#1B8354;
}
button:focus {
  outline:auto;
}
html {
  font-size: 100%;
}
body {
  font-size: 1rem; line-height: 1.6;
}
:root {
  --header-height: 72px;
  --focus-ring-color: #161616;
  --focus-ring: 3px solid #161616;
  --focus-offset: 0px;
  --focus-radius: 4px;
  /* Modular scale in rem (no viewport units) */
  --step--1: 0.875rem;
  /* 14px */
  --step-0: 1rem;
  /* 16px */
  --step-1: 1.125rem;
  /* 18px */
  --step-2: 1.375rem;
  /* 22px */
  --step-3: 1.75rem;
  /* 28px */
  --step-4: 2.25rem;
  /* 36px */
  --step-5: 3rem;
  /* 48px */
}
h1,.h1 {
  font-size: var(--step-5); line-height: 1.2;
}
h2,.h2 {
  font-size: var(--step-4); line-height: 1.25;
}
h3,.h3 {
  font-size: var(--step-3); line-height: 1.3;
}
h4,.h4 {
  font-size: var(--step-2); line-height: 1.35;
}
h5,.h5 {
  font-size: var(--step-1); line-height: 1.4;
}
h6,.h6 {
  font-size: var(--step-0); line-height: 1.45;
}
a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:not(.btn):hover, a:not(.btn):focus-visible {
  text-decoration-thickness: 2px;
}
label.required::after {
  /* add class="required" to labels */
  content:" *"; color:#B91C1C; font-weight:700; margin-left:.25rem;
}
label:has(> input[required], > select[required], > textarea[required])::after {
  content:" *"; color:#B91C1C; font-weight:700; margin-left:.25rem;
}
html {
  font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
:root {
  --step-4: 2.75rem;
  --step-5: 3.5rem;
  --step--1: 0.875rem;
  /* 14px */
  --step-0: 1rem;
  /* 16px */
  --step-1: 1.125rem;
  /* 18px */
  --step-2: 1.375rem;
  /* 22px */
  --step-3: 1.75rem;
  /* 28px */
  --step-4: 2.25rem;
  /* 36px */
  --step-5: 3rem;
  /* 48px */;
}
h1 {
  font-size: var(--step-5) !important; line-height: 1.2;
}
h2 {
  font-size: var(--step-4) !important; line-height: 1.25;
}
h3 {
  font-size: var(--step-3) !important; line-height: 1.3;
}
h4 {
  font-size: var(--step-2) !important; line-height: 1.35;
}
h5 {
  font-size: var(--step-1) !important; line-height: 1.4;
}
h6 {
  font-size: var(--step-0) !important; line-height: 1.45;
}
p, a, label, li, input, textarea, select, button,
.nav-link, .dropdown-item, .page-link, .badge, .tag-green, .tag-blue, .tag-gray,
.verify-subtext, .verify-link, .Authoritynumbertext, .tab-btn {
  font-size: 1rem;
}
a.footer-social-option {
  color: #ffffff !important;
    margin-right: 10px;
        text-decoration: none;
}


ul.dropdown-menu.show {
    box-shadow: 18px -4px 16px 1px rgba(0, 0, 0, 0.1);
    border: 1px;
    padding: 20px;
    line-height: 31px;
    width: 220px;
}
a.footer-social-option:focus {
    color: #ffffff !important;
    margin-right: 10px;
    text-decoration: none;
    background: #074D31;
    border: 0px;
    outline: 2px solid #1B8354;
    outline-offset: 2px;
    border-radius: 2px;
}
:root{
  --moh-green: #1B8354;
  --moh-green-700:#0f5a3a;
  --tint-green-50:#F3FCF6;
  --tint-green-100:#E6F7EE;
  --ink-900:#15212A;
  --ink-700:#384250;
  --ink-500:#6B7280;
  --surface:#ffffff;

  --radius-xl: 16px;
}
button.btnHelp {
    background: #6e7376;
    color: #fff;
    padding: 5px 15px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 0;
    font-weight: 500;
    font-size: 12px;
    margin-top: 5px;
    position: relative
}
ul.sideMenuPickList {
    background: #fff;
    padding: 5px;
    margin: 0 0 10px;
    width: 110px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    display: none;
    position: unset;
    top: unset;
    bottom: unset;
    left: unset;
    float: unset;
    min-width: unset
}
ul.sideMenuPickList li {
    display: inline-block;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #ccc;
    padding: 5px 0;
    line-height: 0
}
ul li.sideMenuPanelToggle {
    padding: 2px 5px 5px;
    border: 0
}
ul.sideMenuPickList li:last-child {
    border-bottom: 0 solid #ccc
}
ul.sideMenuPickList li a {
    padding: 5px
}
ul.dropdown-menu li.activedSubMenu a.dropdown-item {
    position: relative;
    display: block;
    width: 100%;
}
ul.dropdown-menu.show li a.dropdown-item {
    color: unset;
    text-decoration: none;
    background-color: #fff;
    border-right-color: #fff0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: none
}
a:active,a:link,a:visited,ul.sideMenuPickList li a:focus,ul.sideMenuPickList li a:hover {
    text-decoration: none
}
ul.sideMenuPickList .dropdown-submenu .dropdown-menu {
    border: 0;
    min-width: 250px;
    border-radius: 10px;
    padding: 10px 0;
}
ul.subInnerMenuPanel li a span i {
    transform: rotate(180deg);
}
ul.sideMenuPickList li a {
    padding: 5px;
}
a:active, a:link, a:visited, ul.sideMenuPickList li a:focus, ul.sideMenuPickList li a:hover {
    text-decoration: none;
}
 
ul.sideMenuPickList li:last-child {
    border-bottom: 0 solid #ccc;
}
ul.sideMenuPickList li {
    display: inline-block;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #ccc;
    padding: 5px 0;
    line-height: 0;
}
ul.sideMenuPickList li a {
    padding: 5px 5px !important;
}


/* =========================================
   Side Menu Item Fix: Text Below Image
   ========================================= */

/* 1. Force Column Layout for Side Menu Links */
ul.sideMenuPickList > li > a.dropdown-item {
    display: flex !important;
    flex-direction: column !important; /* Stacks content vertically */
    align-items: center !important;    /* Centers content horizontally */
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;    /* Allows text to wrap if long */
    gap: 8px !important;               /* Space between image and text */
    height: auto !important;           /* Allow height to grow */
    padding: 15px 5px !important;      /* Vertical padding */
}













 

 
 

.btnHelp:hover {
    background-color: #5a5f62;
}

/* Pulse/Ring Animation for the button */
.btnHelp::before,
.btnHelp::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: -1;
}

.btnHelp::after {
    width: 40px;
    height: 40px;
    border: 2px solid #1B8354; /* MOH Green ring */
    opacity: 0;
    animation: ring 1.5s infinite;
}

@keyframes ring {
    0% {
        width: 30px;
        height: 30px;
        opacity: 1;
    }
    100% {
        width: 60px;
        height: 60px;
        opacity: 0;
    }
}
















/* 2. Clean up Image Margins */
ul.sideMenuPickList > li > a.dropdown-item img {
    margin: 0 !important;
    width: 40px;                       /* Standardize icon size */
    height: auto;
    object-fit: contain;
}

/* 3. Text Styling */
ul.sideMenuPickList > li > a.dropdown-item span {
    display: block;
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    white-space: break-spaces;
}

/* 4. Hide default Bootstrap dropdown arrow (if visible) */
ul.sideMenuPickList > li > a.dropdown-toggle::after {
    display: none !important;
}

ul.subInnerMenuPanel li {
    text-align: left;
    padding: 7px 5px;
    line-height: 1;
}
ul li.sideMenuPanelToggle a span {
    display: inline;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    /* border-left: 2px solid #fff; */
    padding-left: 5px;
}
ul.dropdown-menu li.activedSubMenu a.dropdown-item span {
    border-bottom: 2px solid #3e8863;
}
ul.subInnerMenuPanel li a {
    text-align: right;
    color: #555 !important;
    font-size: 12px !important;
    padding: 0 !important;
    line-height: 14px;
}
ul.sideMenuPickList li a {
    padding: 5px !important;
}
a:link, ul.sideMenuPickList li a:focus, ul.sideMenuPickList li a:hover {
    text-decoration: none;
}
ul.subInnerMenuPanel li a span {
    color: #9b9362;
    padding-right: 5px;
    padding-left: 0;
    margin-left: 0;
    font-size: 16px;
    border: 0;
    padding-bottom: 0;
}
 
ul.subInnerMenuPanel li a span {
    color: #9b9362 !important;
    padding-right: 5px;
    padding-left: 0;
    margin-left: 0;
    font-size: 16px;
    border: 0;
    padding-bottom: 0;
}
ul.subInnerMenuPanel li {
    text-align: left;
    padding: 7px 5px;
    line-height: 1
}
button.btnHelp, ul.sideMenuPickList {
    box-shadow: rgb(50 50 93 / 25%) 0 13px 27px -5px, rgb(0 0 0 / 30%) 0 8px 16px -8px;
}
section[aria-labelledby="news-section-title"] .grid-container {
  display: flex !important;
}
article.event-slide { margin-block:0; }
:root{
  --moh-green-600: #074D31;
  --moh-green-700:#156743;
  --moh-ink-900:#12221A;
  --moh-ink-700: #161616;
  --moh-ink-500:#5E6B7E;
  --moh-surface:#F5FAF7;
  --radius-xl:16px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 8px 24px rgba(16,24,40,.10);
  --space-3:1rem;
  --space-4:1.25rem;
  --space-6:1.75rem;
  --space-8:2.25rem;
  --transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s;
  --autoMs: 6000ms; /* keep in sync with JS */
}
html, body { overflow-x: clip; }


/* ===== Component & page-specific selectors ===== */

.bg-section{

  background-color: #F9FAFB;
}
#prevBtn:disabled,
#nextBtn:disabled {
  pointer-events: none;
  cursor: default;
  transition: opacity 0.3s ease;
  background: #f9fafa;
  color: #000000;
}
#mobileCarousel {
  display: none !important; /* Hide by default */;
}
:where(
  a, button, .btn, .nav-link, .page-link,
  input, select, textarea, summary,
  [role="button"], [tabindex]:not([tabindex="-1"])
):focus-visible {
  /* outline: var(--focus-ring-outline); */
  /* outline-offset: var(--focus-ring-offset); */
  /* border-radius: var(--focus-oval-radius); */
}
.about-card {
  background: #fff;
      border-radius: 16px;
      padding: 24px;
      border: 1px solid #E5E7EB;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;
}
.about-card .icon {
  font-size: 24px;
      background: #e7f6ed;
      color: #219653;
      padding: 10px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
}
.about-card h5 {
  font-weight: 600;
      font-size: 18px;
      margin-bottom: 8px;
}
.about-card:hover {
  transform: translateY(-5px);
      box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.about-hero {
  background-image: url('Body.jpg');
      background-size: cover;
      background-position: center;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.about-hero h1 {
  font-size: 40px;
      font-weight: 700;
}
.accordion-button {
  font-weight: 600 !important;
      background-color: #ffffff;
      transition: background-color 0.2s ease;
}
.accordion-button .arrow-icon {
  transition: transform 0.3s ease;
  color: #1E1E1E;
  font-size: 14px;
  margin-right: auto;
}
.accordion-button::after {
  display: none !important;
}
.accordion-button:active,
    .accordion-button:focus {
  background-color: #f7fdf9 !important;
  box-shadow: none !important;
  border-color: transparent !important;
  color: #1b8354 !important;
}
.accordion-button:hover {
  background-color: #f7fdf9 !important;
}
.accordion-button:not(.collapsed) {
  color: #1E1E1E;
}
.accordion-button:not(.collapsed) .arrow-icon {
  transform: rotate(180deg);
}

.accordion-button:not(.collapsed) {
    color: #0c8c60!important;
    background-color: var(--bs-accordion-active-bg);
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
 
.app-badges img {
  margin-top: 8px;
}
.arrow-btn {
  background: #1B8354;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  transition: background 0.2s;
  border: 0;
  color: #fff;
  width: 50px;
  height: 50px;
  float: right;
  margin-right: 10px;
}
.arrow-btn:hover {
  background: #104631;
  color: #fff;
}
.Authoritynumber {
  background: #fff;
  padding: 15px;
}
.Authoritynumbertext {
  color: #161616;
  font-size: 16px;
  font-weight: 500;
}
.badge {
  background-color: #F3FCF6;
    border-radius: 4px !important;
    width: auto;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1B8354;
    font-size: 12px !important;
    padding-top: 10px !important;
    padding-right: 7px !important;
    padding-left: 7px !important;
}
.beta-badge {
  background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}
.bg-dark :where(.nav-link, .page-link, a, button, .btn):focus-visible,
.bg-dark .user-is-tabbing :where(.nav-link, .page-link, a, button, .btn):focus {
  outline-color: #fff;
}
.bg-success-dcard {
  background-color: #F3FCF6;
  border-radius: 50% !important;
  width: 35px;
  height: 35px;
  border: none !important;
  font-size: 18px !important;
  color: #1b8354 !important;
}
.bottomsheet_icons {
  border: 1px solid;
    border-radius: 4px;
    height: 45px;
    background: #fff;
}
.breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 1rem;
}
.breadcrumb-item + .breadcrumb-item::before {
  font-family: "Font Font Font Awesome 6 Pro6 Pro6 Pro";
    font-weight: 900;
    content: "\f105" !important;
    color: #9DA4AE !important;
    padding: 0 0px;
}
.breadcrumb-item active {
  color: #9DA4AE!important;
}
.breadcrumb-link {
  color: #384250 !important;
  text-decoration: none;
  transition: all 0.2s ease;
}
.breadcrumb-link:hover {
  text-decoration: underline;
}
.btn-main-action {
  background: #1B8354 !important;
  color: #fff !important;
  padding: .375rem .75rem !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  border: none;
}
.btn-main-action:active {
  padding: .375rem .75rem !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  background: #104631 !important;
  color: #fff !important;
  border-radius: 4px !important;
}
.btn-main-action:focus-visible,
.user-is-tabbing .btn-main-action:focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
  box-shadow: none; /* keep the ring clean */;
}
.btn-main-action:hover {
  padding: .375rem .75rem !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  background: #166A45 !important;
  color: #fff !important;
  border-radius: 4px !important;
}
.btn-outline-dark {
  color: #198754;
    border:0px;
}
.btn-outline-dark:hover {
  color: #00754a;
    background: none;
}
.btn-outline-secondary-action {
  border: 1px solid #dce0e4 !important;
  padding: .375rem .75rem !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  background: none;
  color: #6c757d;
  margin-right: 8px !important;
}
.btn-outline-secondary-action:active {
  padding: .375rem .75rem !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  border: 1px solid #dce0e4 !important;
  background-color: #E5E7EB !important;
}
.btn-outline-secondary-action:focus {
  /* fallback for older browsers */
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
}
.btn-outline-secondary-action:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
  box-shadow: none;                     /* override Bootstrap glow */;
}
.btn-outline-secondary-action:focus-visible,
.user-is-tabbing .btn-outline-secondary-action:focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
  box-shadow: none;
}
.btn-outline-secondary-action:hover {
  padding: .375rem .75rem !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  border: 1px solid #dce0e4 !important;
  background-color: #E5E7EB !important;
}
.btn:focus-visible,
.user-is-tabbing .btn:focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
  color: #198754 !important;
}
.card {
  flex: 0 0 334px;
  background: #fff;
  border: 1px solid #DBDFE3 !important;
  border-radius: 16px !important;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  /* scroll-snap-align: start; */
  transition: all 0.3s ease;
}
.card-body.d-flex.flex-column {
  padding: 15px;
}
.card-grid {
  display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
      margin-top: 40px;
}
.card-icon {
  font-size: 24px;
  background: #e7f6ed;
  color: #219653;
  padding: 10px;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-item {
  width: calc(25% - 12px);
      opacity: 0;
      transform: scale(0.95);
      transition: opacity 0.4s ease, transform 0.4s ease;
      display: none;
      background: #fff;
      border: 1px solid #DBDFE3;
      border-radius: 16px;
      padding: 16px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	    flex-direction: column;  
  justify-content: space-between;
}
.card-item .mb-2, 
.card-item .card-title, 
.card-item .card-text, 
.card-item .mb-3, 
.card-item div:last-child {
  width: 100%;
}
.card-item.show {
  display: flex !important;
      opacity: 1;
      transform: scale(1);
}
.card-item:hover {
  transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    border-color: #ccc;
}
.card-title {
  font-size: 18px !important;
  font-weight: 600;
  font-family: 'IBMPlexSans-SemiBold';
}
.card-wrapper {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

@media (min-width: 992px) {
    .col-lg-3 {
        flex: 0 0 auto;
        width: 33.16161633% !important;
    }
}


.card-wrapper.hide {
  opacity: 0;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}
.cards-wrapper {
  display: flex;
      flex-wrap: wrap;
      gap: 16px;
      justify-content: flex-start;
}
.carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-top: 5px;
}
.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 8rem;
  left: 15%;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: #fff;
  text-align: left !important;
}
.carousel-caption .btn {
  padding: 0.75rem 1.5rem;
      font-size: 1rem;
      text-decoration: none;
}
.carousel-caption h1 {
  font-size: 3rem;
      font-weight: 700;
      color: #fff;
}
.carousel-caption p {
  font-size: 1.25rem;
      color: #f8f9fa;
      max-width: 600px;
      margin-top: 1rem;
      margin-bottom: 1.5rem;
}
.carousel-container {
  position: relative;
  overflow: hidden;
 
}
.carousel-indicators {
  bottom: 20px;
}
.carousel-indicators .active {
  background-color: #198754;
}
.carousel-indicators [data-bs-target] {
  width: 12px;
      height: 12px;
      border-radius: 50%;
      margin: 0 6px;
      background-color: white;
      border: 2px solid #198754;
      opacity: 1;
      transition: background-color 0.3s;
}
.carousel-inner {
  height: 491px;
}
.carousel-item {
  height: 491px;
}
.carousel-item img {
  object-fit: cover;
      height: 100%;
      width: 100%;
}
.carousel::-webkit-scrollbar {
  display: none;
}
.close-modal {
  background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
}
.close-search {
  float: right;
    font-size: 1.5rem;
    cursor: pointer;
}
.comments-card {
  background-color: #fff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  border: 1px solid #dbdfe3;
}
.contact-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  background-color: #fff;
  width: 100%;
}
.contact-icon {
  flex-shrink: 0;
  background-color: #ECFDF3;
  color: #1B8354;
  padding: 12px;
  border-radius: 50%;
  font-size: 20px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: none !important;
    width: 100vw;
    padding-left: 120px!important;
    padding-right: 120px !important;
    box-sizing: border-box;
}
.controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  max-width: none !important;
  width: 100vw;                 /* stretch edge-to-edge */
  margin-left: 50%;             /* center the 100vw block */
  transform: translateX(-50%);  /* cancel the extra 50% margin */
  padding-left: 120px !important;
  padding-right: 120px !important;
  box-sizing: border-box;       /* keep gutters inside width */
}
.custom-tabs {
  border-bottom: 1px solid #e0e0e0;
  white-space: nowrap;
}
.custom-tabs .nav-link {
  color: #4b5563;
  font-weight: 600;
  font-size: 0.875rem;
  border: none;
  border-bottom: 2px solid transparent;
  margin-right: 1rem;
  padding-bottom: 0.5rem;
}
.custom-tabs .nav-link.active {
  color: #1B8354;
  border-color: #1B8354;
  background-color: transparent;
}
.darck-icon {
  color: #161616 !important;
}
.desktop-settings {
  display: flex;
    gap: 10px;
}
.dot {
  height: 10px;
  width: 10px;
  background-color: #ccc;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}
.dot.active {
  background-color: #219653;
}
.dropdown-menu.mega-menu {
  width: 100%;
    left: 0;
    right: 0;
    top: 100%;
    padding: 2rem;
    border-top: 1px solid #D2D6DB;
    border-radius: 0px 0px var(--Radius-radius-lg, 16px) var(--Radius-radius-lg, 16px);
    background: var(--Background-background-menu, #FFF);
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
}
.feedback-buttons {
  display: flex;
            gap: 10px;
}
.feedback-card {
  border: 1px solid #E5E7EB;
      border-radius: 16px;
      padding: 24px;
      display: flex;
      gap: 20px;
      align-items: center;
      background-color: #fff;
      margin-top: 60px;
}
.feedback-card .btn {
  white-space: nowrap;
}
.feedback-card i {
  font-size: 28px;
      color: #1B8354;
      background-color: #ECFDF3;
      padding: 12px;
      border-radius: 50%;
}
.feedback-card-content h5 {
  font-weight: 600;
}
.feedback-card-content p {
  color: #4B5563;
      margin-bottom: 12px;
}
.feedback-question {
  font-size: 16px;
}
.feedback-result {
  color: #6B7280;
            font-size: 14px;
			margin-left:auto;
}
.feedback-section {
  display: flex;
            align-items: center;
    
            padding: 15px 0;
            flex-wrap: wrap;
            gap: 15px;
}
.float-right {
  float: right;
}
.form-container {
  display: none;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}
.form-control:focus-visible,
.user-is-tabbing .form-control:focus {
  outline: var(--focus-ring-outline);
  outline-offset: var(--focus-ring-offset);
  box-shadow: none; /* keep the ring clean and consistent */;
}
.form-group {
  margin-bottom: 15px;
}
.full-background {
  background: #F7FDF9;
}
.full-background-page-head {
  background: #F7FDF9;
    padding-top: 40px;
    padding-bottom: 40px;
}
.full-background-page-head h1 {
  font-size: 40px;
      font-weight: 700;
      color: #121212;
      margin-bottom: 15px;
}
.full-background-page-head p {
  font-size: 16px;
      color: #161616;
      max-width: 600px;
}
.full-nobackground {
  background: #fff;
}
.full-width-green-devider {
  border-bottom: 1px solid #1B8354;
    margin-bottom: 24px;
    margin-top: 24px;
}
.gov-header {
  font-size: 16px !important;
  padding: 10px 0px;
  color: #161616;
}
.gov-header i {
  color: #384250;
}
.gray-line {
  border-bottom: 1px solid #E5E7EB;
}
.green-color-verify {
  color: #198754;
}
.header h2 {
  font-size: 30px !important;
  font-weight: bold;
  margin-bottom: 8px;
}
.header p {
  max-width: 70%;
  color: #161616;
}
.header-dark .nav-link:focus-visible,
.header-dark [data-mega-toggle].nav-link:focus-visible {
  outline-color:#fff;
}
.icon-btn {
  cursor: pointer;
    color: #161616;
}
.icon-text {
  display: flex;
  align-items: start;
  gap: 10px;
  margin-bottom: 15px;
}
.indicators {
  display: flex;
  gap: 10px;
}
.info-card {
  background-color: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.info-card h6 {
    margin: 0;
    flex: 1;
    text-align: right;
}

.info-card .arrow {
  align-self: flex-end;
    margin-top: 16px;
    background-color: #f4f5f6;
    border-radius: 6px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #000;
}
.info-card .icon {
  background-color: #ecfdf3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #1B8354;
    margin-bottom: 12px;
}
.info-card h6 {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: auto;
}
.info-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}
.info-text {
  font-weight: 500;
}
.input-group-text {
  cursor: pointer;
}
.ksa-logo {
  width: 24px;
    height: 24px;
}
.left-content {
  flex: 2;
}
.main-menu-item {
  font-weight: bold;
    color: #198754 !important;
}
.mega-column h6 a {
  font-weight: bold;
    color: #198754 !important;
}
.mega-column ul {
  list-style: none;
    padding-left: 0;
}
.mega-column ul li a {
  text-decoration: none;
    color: #161616;
    display: block;
    padding: 4px 0;
}
.mega-column ul li a:hover {
  text-decoration: underline !important;
    color: #198754 !important;
}
.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  padding: 20px 30px;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
  z-index: 1000;
}
.mega-menu.is-open {
  display: block;
}
.mega-menu.show {
  display: block;
  animation: fadeIn .3s ease;
}
.mega-menu[hidden] {
  display: none !important;
}
.menu-other-side {
  color: #161616 !important;
    font-size: 16px;
    text-decoration: none !important;
    padding: 16px !important;
}
.mobile-settings {
  display: none;
}
.mobile-submenu {
  position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 1050;
    transition: left 0.3s ease;
    padding: 2rem;
    overflow-y: auto;
}
.mobile-submenu .back-btn {
  font-weight: bold;
    color: #198754;
    cursor: pointer;
    margin-bottom: 1rem;
    display: inline-block;
}
.mobile-submenu.active {
  left: 0;
}
.modified-date {
  text-align: right;
            color: #4B5563;
            font-size: 14px;
            padding: 10px 0;
}
.nav-link {
  cursor: pointer;
}
.nav-link.active-search {
  background-color: #198754;
    color: #fff !important;
    border-radius: 5px;
    padding: 16px;
}
.nav-link.active-search i {
  color: #ffffff !important;
}
.nav-tabs.custom-tabs {
  border-bottom: 1px solid #dee2e6;
  white-space: nowrap;
  flex-wrap: nowrap;
}
.nav-tabs.custom-tabs .nav-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: #4b5563;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.5rem 0.75rem;
  /* margin-right: 1rem; */
  background-color: transparent;
  white-space: nowrap;
}
.nav-tabs.custom-tabs .nav-link.active {
  color: #1b8354;
  border-bottom: 2px solid #1b8354;
  background-color: transparent;
}
.nav-tabs.custom-tabs .nav-link:hover {
  color: #1b8354;
}
.navbar .nav-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
}
.navbar .nav-link:focus-visible,
.navbar .nav-link.user-is-tabbing:focus {
  outline: var(--focus-ring-outline);
  outline-offset: var(--focus-ring-offset);
}
.navbar .nav-link:focus-visible,
.navbar [data-mega-toggle]:focus-visible,
.mega-menu a:focus-visible,
.dropdown-item:focus-visible {
  outline: 3px solid #1B8354;
  outline-offset: 2px;
  border-radius: 4px;
}
.navbar .nav-link:focus-visible,
.navbar button.nav-link:focus-visible,
.navbar .dropdown-item:focus-visible {
  outline: 3px solid #1B8354;
  outline-offset: 2px;
  border-radius: 4px;
}
.navbar [data-mega-toggle] {
  color: inherit;
  cursor: pointer;
}
.navbar [data-mega-toggle].nav-link:focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
}
.navbar [data-mega-toggle].nav-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
  box-shadow:none;                      /* override any Bootstrap glow */
  background-color: #ECFDF3 !important;             /* optional extra cue */
}
.navbar [data-mega-toggle]:hover {
    text-decoration: none;
    color: #1b8354;
}
 

 
.nav-item.dropdown .nav-link i {
  transition: transform 0.25s ease;
}

.container.header.position-relative.mb-4 {
    width: 100%;
    margin-left: 0px;
    padding-left: 0px !important;
    padding-right: 0px !important;
}
 
.news-card {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  border: 1px solid #DBDFE3 !important;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.news-card .btn:focus-visible,
.user-is-tabbing .news-card .btn:focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
  color: #198754 !important;
}
.news-card:focus-within {
  box-shadow: 0 0 0 3px rgba(27,131,84,.25);
  border-radius: 12px; /* match your card radius */;
}
.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.news-image {
  height: 335px;
  object-fit: cover;
  border-radius: 16px;
  padding: 15px;
}
.offcanvas-bottom {
  border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}
.page-item.active .page-link {
  color: #fff;
  background-color: #ffffff;
  border-color: #0d6efd;
  border-bottom: 3px solid #408354 !important;
  border-radius: 0px;
}
.page-item.disabled .page-link {
  color: var(--bs-secondary-color, #6c757d);
  background-color: var(--bs-secondary-bg, #f8f9fa);
  border-color: var(--bs-border-color, #dee2e6);
}
.page-item.disabled a {
  background: #ffffff !important;
  color: #000 !important;
}
.page-link {
  color: var(--bs-link-color, #0d6efd);
  background-color: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius, 0.375rem);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
}
.page-link:hover {
  color: var(--bs-link-hover-color, #0a58ca);
  background-color: var(--bs-tertiary-bg, #e9ecef);
  border-color: var(--bs-border-color, #dee2e6);
}
.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
  justify-content: center;
  gap: 0.5rem;
}
.pagination .page-link:focus-visible,
.user-is-tabbing .pagination .page-link:focus {
  outline: var(--focus-ring-outline);
  outline-offset: var(--focus-ring-offset);
}
.partner-card {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  min-width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #6b7280;
  font-size: 14px;
  flex: 0 0 auto;
}
.partner-card img {
  width: 40px;
  margin-bottom: 10px;
}
.partners-carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #f4f4f4;
  border: none;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  z-index: 1;
}
.partners-carousel-control.left {
  left: -60px;
}
.partners-carousel-control.right {
  right: -60px;
}
.partners-carousel-wrapper {
  position: relative;
}
.partners-track {
  display: flex;
  gap: 16px;
  overflow-x: hidden;
  scroll-behavior: smooth;
  padding: 10px 0;
}
.payment-channels img,
.app-badges img {
  max-height: 32px;
  margin-right: 8px;
}
.rate-button {
  margin-left: auto;
}
.rating-buttons {
  display: flex;
            justify-content: flex-end;
            margin-top: 20px;
            gap: 10px;
}
.rating-modal {
  display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 100;
            align-items: center;
            justify-content: center;
}
.rating-modal-content {
  background-color: white;
            padding: 25px;
            border-radius: 16px;
            max-width: 500px;
            width: 90%;
}
.rating-modal-header {
  display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
}
.rating-stars {
  display: flex;
            justify-content: center;
            margin: 20px 0;
            font-size: 32px;
}
.rating-stars .star {
  font-size: 32px;
            margin: 0 5px;
}
.rating-text {
  font-size: 16px;
}
.rating-value {
  font-weight: bold;
            font-size: 18px;
}
.ratings-container {
  padding: 15px 0;
}
.ratings-display {
  display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
}
.read-more {
  transition: background-color 0.3s, color 0.3s;
}
.read-more:hover {
  background-color: #145c32;
  color: #fff;
}
.reviews-count {
  color: #6B7280;
            font-size: 14px;
            margin-left: 10px;
}
.right-card {
    /* Critical for auto-height in Flexbox */
    flex: 1;
    align-self: flex-start;
    height: auto;
    
    /* Your existing styling */
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    
    /* Optimization: ensures internal spacing handles the height */
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Ensure the container doesn't force height */
.service-section {
    display: flex;
    align-items: flex-start; /* Aligns items to the top, allowing auto-height */
    gap: 24px;
    flex-wrap: wrap; /* Good for responsiveness */
}

/* Fix for icons and text alignment inside the card */
.icon-text {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.search-panel {
  background-color: #fff;
    padding: 2rem;
    display: none;
    position: relative;
    z-index: 1000;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    border-radius: 0px 0px var(--Radius-radius-lg, 16px) var(--Radius-radius-lg, 16px);
    border-top: 1px solid #D2D6DB;
}
.search-panel.active {
  display: block;
    position: absolute;
    width: 100%;
}
.search-results-page .action-btn {
  margin-top: 12px;
}
.search-results-page .pagination {
  justify-content: center;
  margin-top: 40px;
}
.search-results-page .result-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}
.search-results-page .result-card .date {
  font-size: 13px;
  color: #6b7280;
}
.search-results-page .result-card h5 {
  font-weight: 600;
}
.search-results-page .result-card h6 {
  color: #1B8354;
  font-weight: 600;
  margin: 0;
}
.search-results-page .result-card p {
  color: #161616;
  margin-bottom: 12px;
}
.search-results-page .result-header {
  margin-bottom: 30px;
}
.search-results-page .result-header h2 {
  font-weight: 700;
}
.search-results-page .result-header small {
  color: #6b7280;
}
.search-results-page .search-bar {
  max-width: 800px;
  margin: 0 auto 40px;
}
.search-results-page .search-bar .form-control {
  border-radius: 0.375rem 0 0 0.375rem;
}
.search-results-page .search-bar .form-control:focus {
  box-shadow: none;
}
.search-results-page .search-bar .input-group-text {
  background-color: #fff;
  border-right: 0;
}
.search-results-page .tags span {
  display: inline-block;
  background-color: #f3f4f6;
  color: #161616;
  padding: 4px 10px;
  margin-right: 6px;
  border-radius: 6px;
  font-size: 13px;
}
.search-suggestions .btn {
  background-color: #f1f1f1;
    border: none;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.section-title {
  padding: 60px 0 20px;
}
.section-title h1 {
  font-weight: 700;
    font-size: 36px;
    color: #121212;
}
.section-title p {
  max-width: 720px;
    font-size: 16px;
    color: #161616;
}
.service-card:focus-within {
  box-shadow: 0 0 0 3px rgba(27,131,84,.25);
  border-radius: 12px;
}
.service-rating-container {
  max-width: 1200px;
            margin: 0 auto;
}
.service-section {
  /* max-width: 1410px; */
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  /* padding: 30px; */
  box-sizing: border-box;
}
.services-container {
  background: #F7FDF9;
  width: 100% !important;
  height: 240px;
}
.services-section {
  max-width: 1200px;
  margin: auto;
  background-color: #F9FAFB;
}
.setting-option {
  min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center;
}
.setting-option:focus {
  /* fallback */
  outline:3px solid #1B8354; outline-offset:3px; border-radius:8px;
}
.setting-option:focus-visible {
  outline:3px solid #1B8354;
  outline-offset:3px;
  border-radius:8px;
  background-color:#ECFDF3; /* optional cue */;
}
.show-mega {
  display: flex !important;
      flex-wrap: wrap;
      gap: 2rem;
}
.slider-button {
  color: #1C4A35 !important;
    background: #fff !important;
    font-size: 18px !important;
}
.star {
  color: #E5E7EB;
            font-size: 24px;
            margin: 0;
            cursor: pointer;
}
.star.filled {
  color: #22A969;
}
.star.half {
  position: relative;
}
.star.half::before {
  content: '\f089'; /* Font Font Font Awesome 6 Pro6 Prohalf star */
            position: absolute;
            color: #22A969;
}
.stars {
  display: inline-flex;
            align-items: center;
}
.success-message {
  display: none;
  color: #22a969;
  margin-top: 15px;
  font-weight: 500;
}
.tab-btn {
  background: none;
  border: none;
  padding: 10px 0;
  font-weight: 600 !important;
  color: #161616;
  font-size: 14px;
  cursor: pointer;
  position: relative;
  font-family: inherit;
}


.tab-btn:hover {
 
  color: #0d8c60;
     border-color: #ffffff;
    background-color: #ffffff;
    background-color: #ffffff;
}



.tab-btn.active {
  color: #0d8c60;
  font-weight: bold;
  font-family: 'IBMPlexSansArabic-SemiBold';
  border-color: #ffffff;
  background-color: #ffffff;
  background-color: #ffffff;
}

.tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #1B8354;
}


.tab-content {
  margin-top: 1rem;
}
.tab-content-item {
  display: none;
}
.tab-content-item.show {
  display: block;
}
.tab-ellipsis {
  font-size: 18px;
  color: #888;
  margin-left: auto;
  padding: 12px 0;
}
.tab-pane .card {
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
.tab-pane .card-body {
  padding: 1rem;
}


/* Container for the tabs */
.tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    gap: 10px;
    padding-bottom: 10px; /* Space for scrollbar if visible */
    scrollbar-width: none; /* Hides scrollbar in Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.tabs::-webkit-scrollbar {
    display: none;
}

/* Ensure buttons don't shrink and stay on one line */
.tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 20px;
    background: #fff;
    cursor: pointer;
    border-radius: 0px;
}

 



.tabs {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
  padding-bottom: 0px;
  font-family: 'IBMPlexSansArabic-SemiBold' !important;
  font-weight: bold;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tag-blue {
  color: #1849A9 !important;
  border: 1px solid #dce0e4;
  background-color: #EFF8FF !important;
}
.tag-gray {
  color: #1F2A37 !important;
  border: 1px solid #E5E7EB;
  background-color: #F9FAFB !important;
}
.tag-green {
  color: #085D3A !important;
  border: 1px solid #ABEFC6;
  background-color: #ECFDF3 !important;
}


.tags li.tag-green:nth-child(1) {
    color: #166534 !important ;
    background: #ECFDF3 !important ;
      padding: 5px !important;
}

.tags li.tag-green:nth-child(2) {
  background-color: #EFF8FF !important ;
    padding: 5px !important;
  color: #1849A9 !important ;
}

.tags li.tag-green:nth-child(3) {
  background-color: #F1F5F9 !important;
  padding: 5px !important;
  color: #475569 !important;
  margin-top: 5px;
}



.tag-green, .tag-blue, .tag-gray {
  --bs-badge-padding-x: 0.65em;
  --bs-badge-padding-y: 0.35em;
  --bs-badge-font-size: 0.75em;
  --bs-badge-font-weight: 700;
  display: inline-block;
  padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
  font-size: var(--bs-badge-font-size);
  font-weight: var(--bs-badge-font-weight);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 4px;
}
.user-is-tabbing :where(
  a, button, .btn, .nav-link, .page-link,
  input, select, textarea, summary,
  [role="button"], [tabindex]:not([tabindex="-1"])
):focus {
  outline: var(--focus-ring-outline);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--focus-oval-radius);
}
.verify-card {
  background-color: #f5f6f8;
  padding: 15px 0;
}
.verify-heading {
  font-weight: 600;
  color: #000;
  font-size: 16px;
  font-family: 'IBMPlexSans-SemiBold';
}
.verify-icon {
  font-size: 20px;
    color: #198754;
}
.verify-link {
  color: #1B8354 !important;
  text-decoration: underline !important;
  font-size: 16px;
}
.verify-subtext {
  color: #161616;
    font-size: 16px;
}
.verify-toggle {
  background: #f5f6f8;
}
.verify-toggle:active {
  background: #f5f6f8;
}
.verify-toggle:hover {
  background: #f5f6f8;
}
.verify_link {
  color: #0d8c60;
    font-size: 16px;
}
.video-box {
  background-color: #F0F2F5;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin: 20px 0;
}
.video-box i {
  font-size: 40px;
  color: #1B8354;
}
.view-all {
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  border: 1px solid #ccc;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 6px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.view-all:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
  box-shadow: none;                     /* keep the ring clean */
  background-color: #198754;             /* optional extra cue */
  color:#fff !important;
}
.view-all:focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
}
.view-all {
  min-height:40px; padding:.5rem .9rem;
}

.view-all:hover {
    background: #E5E7EB;
    border: 1px solid #ccc;
}

.verify-toggle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
  box-shadow:none;            /* keep ring clean, override BS glow if any */
  background-color:#ECFDF3;   /* optional extra cue */
  color: #1b8354 !important;
}
.verify-toggle:focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
}
.verify-toggle[aria-expanded="true"] {
  background-color:#F0FFF7;
}
.verify-toggle #chevronIcon {
  transition: transform .2s ease;
}
.verify-toggle[aria-expanded="true"] #chevronIcon {
  transform: rotate(180deg);
}
.dark-section .verify-toggle:focus-visible {
  outline-color:#fff;
}
.verify-toggle {
  min-height:40px;
}
.carousel-indicators [data-bs-target] {
  width: 2rem; height: 2rem;
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #94A3B8;      /* neutral border */
  background: #fff; color: #334155;
  font-weight: 600; font-size: 0.875rem; line-height: 1;
  margin: 0 .25rem;
}
.carousel-indicators .active {
  background: #1B8354; border-color: #1B8354; color: #fff;
}
.carousel-indicators [data-bs-target]:focus-visible {
  outline: 3px solid #1B8354;
  outline-offset: 3px;
  border-radius: 9999px;
}
.visually-hidden {
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
#services-panel .arrow-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 9999px;      /* circular ring around the arrow */
  box-shadow: none;           /* keep ring crisp */
  background-color:#ECFDF3;   /* optional extra cue */;
}
#services-panel .arrow-btn:focus {
  /* fallback for older browsers */
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 9999px;
}
#services-panel .arrow-btn {
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
}
.dark-section #services-panel .arrow-btn:focus-visible {
  outline-color:#fff;
}
.navbar .nav-link.menu-other-side:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
  background-color:#ECFDF3; /* optional extra cue */;
}
.navbar .nav-link.menu-other-side:focus {
  /* fallback */
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
}
.navbar .nav-link.menu-other-side {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.header-dark .nav-link.menu-other-side:focus-visible {
  outline-color:#fff;
}
.btn-main-action:focus-visible {
  outline: var(--focus-ring) !important;   /* beat any outline:0 reset */
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
  box-shadow: none;                         /* keep ring crisp */;
}
.btn-main-action:focus {
  /* fallback for older browsers */
  outline: var(--focus-ring) !important;
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
}
.btn-main-action.use-alt-focus {
  position: relative;
}
.btn-main-action.use-alt-focus:focus-visible {
  outline: none !important;                 /* switch to pseudo-ring below */;
}
.btn-main-action.use-alt-focus:focus-visible::after {
  content:"";
  position:absolute; inset:-6px;           /* draws outside the element box */
  border: 3px solid var(--focus-ring-color);
  border-radius: calc(var(--focus-radius) + 6px);
  pointer-events:none;
}

 
#heroCarousel .carousel-control-prev:focus::after,
#heroCarousel .carousel-control-next:focus::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width:44px;
  height:44px;
 
}
.slider-button {
  position: relative;
}
.slider-button:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 3px;
  border-radius: 8px;
  z-index: 1002;           /* above typical overlays */;
}
.hero-overlay, .slide-overlay {
  pointer-events:none;
}
.slider-button.use-alt-focus:focus-visible {
  outline: none;                 /* switch to pseudo-ring */;
}
.navbar .nav-link:focus-visible {
  outline: var(--focus-ring) !important;   /* beat outline:0 resets */
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
  background-color: #ecfdf3;                /* optional extra cue */
  /* border-radius: 4px; */
  color: #1b8354 !important;
}
.navbar .nav-link:focus {
  /* fallback for older browsers */
  outline: var(--focus-ring) !important;
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
}


.nav-item.dropdown .fa-angle-down {
  transition: transform 0.25s ease;
  transform: rotate(0deg);
}

/* when dropdown is open */
.nav-item.dropdown .nav-link[aria-expanded="true"] .fa-angle-down {
  transform: rotate(180deg);
}

.navbar [data-mega-toggle].nav-link:focus-visible,
.navbar [data-mega-toggle].nav-link:focus {
  outline: var(--focus-ring) !important;
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
}
.dropdown-menu .dropdown-item:focus-visible,
.dropdown-menu .dropdown-item:focus {
  outline: 3px solid var(--focus-ring-color) !important;
  outline-offset: 2px;
  border-radius: 6px;
}
.navbar .nav-link.use-alt-focus:focus-visible {
  outline: none !important;
  position: relative;
}
.navbar .nav-link.use-alt-focus:focus-visible::after {
  content:"";
  position:absolute; inset:-6px;
  border:3px solid var(--focus-ring-color);
  border-radius: calc(var(--focus-radius) + 6px);
  pointer-events:none;
  background: transparent;
}
.carousel-indicators--numbered [data-bs-target] {
  width:2rem; height:2rem; margin:0 .25rem;
  border-radius:9999px; border:2px solid #94A3B8;
  background:#fff; color:#334155;
  display:inline-flex; align-items:center; justify-content:center;
  font:600 0.875rem/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.carousel-indicators--numbered .active {
  background:#1B8354; border-color:#1B8354; color:#fff;
}
.carousel-indicators--numbered [data-bs-target]:focus-visible {
  outline:3px solid #1B8354; outline-offset:3px; border-radius:9999px;
}
.carousel-indicators--numbered [data-bs-target]:focus {
  outline:3px solid #1B8354; outline-offset:3px; border-radius:9999px;
}
#tabs .tab-btn {
  min-height: 44px;
  padding: .5rem 0rem;
}
#tabs .tab-btn[aria-selected="true"] {
  border-bottom: 3px solid #1B8354;
  border: 0px;
}
.slider-button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
  box-shadow:none;
  position: relative;
  z-index: 2;                 /* ensure ring is above slide image/overlays */;
}
.slider-button:focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
}
.slider-button.use-alt-focus:focus-visible {
  outline: none;
  position: relative;
}
.slider-button.use-alt-focus:focus-visible::after {
  content:"";
  position:absolute;
  inset:-6px;                 /* draws outside element box */
  border:3px solid var(--focus-ring-color);
  border-radius: calc(var(--focus-radius) + 6px);
  pointer-events:none;
  z-index: 3;
}
.carousel-caption {
  overflow: visible;
}
.hero-overlay, .slide-overlay {
  pointer-events: none;
}
.text-gov {
  color: #1B8354;
}
.carousel-indicators--numbered [data-bs-target] {
  width: 2rem;
  height: 2rem;
  padding: 0;                       /* override Bootstrap padding */
  display: inline-flex;             /* make the button a flex box */
  align-items: center;              /* vertical center */
  justify-content: center;          /* horizontal center */
  text-align: center;
  line-height: 1;                   /* avoid baseline quirks */;
}
.carousel-indicators--numbered [data-bs-target] > span {
  display: none;
  pointer-events: none;  
             /* clicks go to the button */;
}
.carousel-item {
  position: relative;
}
.carousel-item::before {
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.55); /* strong, but not opaque */
  z-index: 1;
}
 
.carousel-indicators [data-bs-target] {
  box-sizing: content-box;
    flex: 0 1 auto;
    width: 20px!important;
    height: 20px!important;
    border-radius: 50% !important;
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #1B8354 !important;
    background-clip: padding-box;
    border: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: .5;
    transition: opacity .6s ease;
}
.carousel-caption p {
  color:#fff;
  text-shadow:none !important;
  background:#1B8354;
  display:inline-block;
  padding:.1em .4em;
  border-radius:.35em;
}


#heroCarousel .carousel-control-prev:focus-visible::after,
#heroCarousel .carousel-control-next:focus-visible::after {
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:48px; height:48px;
  border:3px solid var(--focus-ring-color);
  border-radius:9999px;
  background:rgba(255,255,255,.9);
  pointer-events:none;
  z-index:2;
}

.carousel-indicators--numbered [data-bs-target] {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;           /* centers label */
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 2px solid #94A3B8;
  background: #fff;
  color: #334155;
  font: 600 0.875rem/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.carousel-indicators--numbered .active {
  background: #1B8354;
  border-color: #1B8354;
  color: #fff;
}
.carousel-indicators--numbered [data-bs-target]:focus-visible {
  outline: 3px solid #1B8354;
  outline-offset: 3px;
  border-radius: 9999px;
}
.carousel-indicators--numbered [data-bs-target] > .ci-label {
  display: block;
  pointer-events: none;           /* clicks still go to the button */;
}
.carousel-indicators.carousel-indicators--numbered [data-bs-target] {
  /* Default (non-active) */
  --ci-bg: #FFFFFF;      /* background */
  --ci-fg: #0F172A;      /* text: nearly-black slate */
  background: var(--ci-bg) !important;
  color: var(--ci-fg) !important;           /* ≈17.8:1 vs white */
  border: 2px solid #94A3B8;
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  line-height: 1;
 
}
.carousel-indicators--numbered [data-bs-target] > .ci-label {
  color: inherit !important;
  opacity: 1 !important;
  display: block;
  pointer-events: none;
}
.carousel-indicators--numbered [data-bs-target].active {
  --ci-bg: #1B8354;      /* brand green */
  --ci-fg: #FFFFFF;      /* white text */
  background: var(--ci-bg) !important;
  border-color: var(--ci-bg) !important;
  color: var(--ci-fg) !important;
}
.carousel-indicators--numbered [data-bs-target],
.carousel-indicators--numbered [data-bs-target] > .ci-label {
  text-shadow: none !important;
}
.carousel-indicators--numbered [data-bs-target] {
  /* Default (non-active) */
  --ci-bg: #FFFFFF;          /* background */
  --ci-fg: #0F172A;          /* text (very dark slate) */
  background: var(--ci-bg) !important;
  color: var(--ci-fg) !important;        /* ≈17.8:1 vs white */
  border: 2px solid #94A3B8;
  width: 2rem; height: 2rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; line-height: 1;
  text-shadow: none !important;
}
.carousel-indicators--numbered [data-bs-target].active {
  --ci-bg: #1B8354;          /* brand green */
  --ci-fg: #FFFFFF;          /* white text */
  background: var(--ci-bg) !important;   /* ≈4.75:1 */
  border-color: var(--ci-bg) !important;
  color: var(--ci-fg) !important;
}
.carousel-indicators--numbered [data-bs-target] > .ci-label {
  color: inherit !important;
  background: var(--ci-bg) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  filter: none !important;
  display: block;
  pointer-events: none;
  font-weight: 600;                 /* 14px / 600 => AA ≥ 3:1 */
  font-size: 14px;
}
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
  position: absolute;               /* bootstrap already */
  z-index: 5;                        /* above overlays/captions */;
}


button.carousel-control-prev i {
    background: #1b8354;
    padding: 13px;
    border-radius: 4px;
    font-size: 24px;
      transform: rotate(180deg);
}

button.carousel-control-next i {
    background: #1b8354;
    padding: 13px;
    border-radius: 4px;
    font-size: 24px;
      transform: rotate(180deg);
}
 
#heroCarousel .carousel-caption {
  z-index: 6 !important;       /* controls are z-index 5 in your CSS */
  overflow: visible;            /* don't clip the focus ring */
}
#heroCarousel .slider-button {
  position: relative; 
  z-index: 7;                   /* sit above the caption container */;
}
#heroCarousel .carousel-item::before {
  z-index: 1;
  pointer-events: none;         /* overlay cannot intercept focus/clicks */;
}
.carousel-indicators--numbered [data-bs-target] {
  opacity: 1 !important;                     /* no fading */
  width: 2rem; height: 2rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; line-height: 1;
  border: 2px solid #94A3B8;
  background: #FFFFFF !important;            /* solid white */
  color: #0F172A !important;                 /* very dark slate ≈17.8:1 on white */
  text-shadow: none !important;
  filter: none !important;
}
.carousel-indicators--numbered [data-bs-target] > .ci-label {
  display: block;
  pointer-events: none;
  background: inherit !important;
  color: inherit !important;
  opacity: 0 !important;                     /* span itself fully opaque */
  text-shadow: none !important;
  filter: none !important;
  font-weight: 600;                           /* your spec */
  font-size: 14px;
}
.carousel-indicators--numbered [data-bs-target].active {
  background: #16603F !important;            /* darker brand green than #1B8354 if needed */
  border-color: #16603F !important;
  color: #FFFFFF !important;                  /* ≈5.7:1 on #16603F (AA passes) */;
}
.carousel-indicators--numbered [data-bs-target].active > .ci-label {
  background: #16603F !important;
  color: #FFFFFF !important;
}
.small, .text-small {
  font-size: var(--step--1);
}
#heroCarousel .carousel-caption h1 {
  font-size: var(--step-5);         /* no viewport units */
  font-weight: 700;
  line-height: 1.2;
  color: #fff !important;
  text-shadow: none !important;     /* shadows don't count toward contrast */
  background: #1B8354;              /* AA on white text (~4.75:1) */
  display: inline-block;
  padding: .15em .45em;
  border-radius: .35em;
}
#heroCarousel .carousel-caption p {
  font-size: var(--step-1);         /* rem-based */
  color: #fff;
  text-shadow: none !important;
  background: #1B8354;
  display: block;
  padding: .1em .4em;
  border-radius: .35em;
}
.required-star {
  color:#B91C1C; font-weight:700; margin-left:.25rem;
}
.form-control.is-invalid {
  border:2px solid #DC2626;
}
.field-msg {
  display:flex; gap:.5rem; align-items:center; margin-top:.5rem;
}
.field-msg--error {
  color:#B91C1C;
}
.field-msg--success {
  color:#1B8354;
}
.tag {
  display:inline-flex; align-items:center; gap:.4rem; padding:.125rem .5rem; border-radius:9999px; font-size:.875rem;
}
.tag--success {
  color:#166534; background:#ECFDF3; border:1px solid #86EFAC;
}
.tag--info {
  color:#0C4A6E; background:#E0F2FE; border:1px solid #7DD3FC;
}
.tag--inactive {
  color:#475569; background:#F1F5F9; border:1px solid #CBD5E1;
}
.alert {
  display:flex; gap:.5rem; align-items:flex-start; padding:.75rem 1rem; border-radius:.5rem;
}
.alert--success {
  color:#166534; background:#ECFDF3; border:1px solid #86EFAC;
}
.alert--error {
  color:#7F1D1D; background:#FEF2F2; border:1px solid #FCA5A5;
}
.form-control.is-valid {
  border:2px solid #16A34A;
}
.invalid-feedback::before {
  content:"✖"; margin-right:.4rem; font-weight:700;
}
.valid-feedback::before {
  content:"✔"; margin-right:.4rem; font-weight:700;
}

#lifeExperienceTag {
    display: none;
}

.tag-green, .tag-blue, .tag-gray {
  display: inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.125rem .5rem;
  border-radius: 5px;
  border: 1px solid;
  font-size: .875rem !important;
  font-family: 'IBMPlexSansArabic-SemiBold';
  margin-right: 5px;
  padding: 5px;
}
.tag-green {
  color:#166534; background:#ECFDF3;
}
.tag-green::before {
  content:"✔";font-weight:700;display: none;
}
.tag-blue {
  color: #0C4A6E !important;
  background:#E0F2FE;
}
.tag-blue::before {
  content:"ℹ";font-weight:700;display: none;
}
.tag-gray {
  color:#475569; background:#F1F5F9;
}
.tag-gray::before {
  content:"•";font-size:1.1em;line-height:1;display: none;
}
.alert.alert-success {
  border-left:6px solid #16A34A;
}
.alert.alert-success::before {
  content:"✔"; margin-right:.5rem; font-weight:700;
}
.alert.alert-danger {
  border-left:6px solid #DC2626;
}
.alert.alert-danger::before {
  content:"âš "; margin-right:.5rem; font-weight:700;
}
[aria-disabled="true"], .disabled, :disabled {
  opacity:.6;
  background-image: repeating-linear-gradient(-45deg,
    transparent 0 6px, rgba(0,0,0,.08) 6px 12px); /* stripe pattern */;
}
#tabs .tab-btn[aria-selected="true"] {
  border-bottom:3px solid #1B8354;
  position:relative;
}
#tabs .tab-btn[aria-selected="true"]::after {
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-3px;
  width:18px;
  height:3px;
  background:#1B8354;
  border-radius: 0px;
}
.navbar .nav-link[aria-current="page"] {
  text-decoration: underline; text-underline-offset:4px; text-decoration-thickness:2px;
}
.carousel-caption h1 {
  font-size: var(--step-5) !important;
}
.carousel-caption p {
  font-size: var(--step-1) !important;
}
.footer-section {
  background-color: #074D31;
  color: white;
  font-size: 14px;
}
.footer-title {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  margin-bottom: 12px;
  font-family: 'IBMPlexSans-SemiBold';
}
.footer-links {
  list-style: none;
  padding-left: 0;
}
.footer-links li {
  margin-bottom: 8px;
}
.footer-links a {
  color: white !important;
  text-decoration: none;
}
.footer-links a:hover {
  text-decoration: underline;
}
.footer-setting-option {
  color: #ffffff;
}
.footer-setting-option:hover {
  color: #ffffff;
}
.small-links a {
  color: #ccc;
  text-decoration: none;
  margin-left: 10px;
}
.small-links a:hover {
  text-decoration: underline;
}
.footer-end a {
  color: #ffffff !important;
    text-decoration: underline;
}
.footer-end p {
  color: #ffffff !important;
}
.footer-copyright {
  color: #fff;
  font-family: IBMPlexSans-SemiBold;
  direction: ltr;
  text-align: right;
}
.footer-Developed {
  color: #fff;
}
.footer-lastdate {
  color: #fff;
}
.footer-small-links {
  color: #fff !important;
    text-decoration: underline !important;
}
.visually-hidden {
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important;
}
.tags {
  display: contents;gap:.5rem;list-style:none;padding:0;margin:0;
}
.tab-btn:focus-visible {
  outline: 3px solid #1B8354;
  outline-offset: 2px;
  border-radius: 4px;
}
.stamp-header {
    background: #f5f6f8;
}
.nav-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgb(236 253 243);
}
.verify-toggle {
border: 0px !important;
 
}
.verify-toggle:focus-visible{


      outline: 2px solid #1B8354 !important;
    outline-offset: 2px;
    border-radius: 4px;
    background-color: #f5f6f8;
      color:#1B8354 !important;
 
}
.verify-toggle:focus {


      outline: 2px solid #1B8354 !important;
    outline-offset: 2px;
    border-radius: 4px;
    background-color: #f5f6f8;
    color:#1B8354 !important;
 
}
.tab-btn:focus,
.tab-btn:focus-visible {
    /* outline: none; */
    /* border: 2px solid #1B8354; */
    /* border-radius: 4px; */
    /* background-color: #ECFDF3; */
    /* color: #1B8354 !important; */
}
.arrow-btn:focus,
.arrow-btn:focus-visible   {

     outline: 2px solid #1B8354 !important;
    outline-offset: 2px;
 
  background: #1B8354;
  border-radius: 50% !important;
 
 
 
 
  color: #fff !important;
 
}
.partners-carousel-control:focus,
.partners-carousel-control:focus-visible{
     outline: 2px solid #1B8354 !important;
    outline-offset: 2px;
  background: #1B8354;
  color: #fff !important;
}
.footer-links-li a:focus,
.footer-links-li a:focus-visible{
     outline: 2px solid #1B8354 !important;
    outline-offset: 2px;
  background: #f3fcf6;
  color: #1B8354 !important;
      border-radius: 2px;
}
.menu-other-side:after {
    content: "";
    display: none;
    position: absolute;
    bottom: 0;
    height: 6px;
    background-color: var(--moe-primary-400);
    border-radius: 9999px;
    width: calc(100% - 1rem);
    left: 50%;
    transform: translate(-50%);
    transition: none;
}
.nav-link.menu-other-side {
  color: #161616; /* default dark text */
  transition: color 0.3s ease;
}
.nav-link.menu-other-side:hover {
  color: #1B8354 !important; /* MOH green */
  text-decoration: underline;
}
.nav-link.menu-other-side .darck-icon {
  /* transition: color 0.3s ease, transform 0.3s ease; */
  /* MOH green */
}
.nav-link.menu-other-side:hover .darck-icon {
  color: #ffffff !important;      /* match hover color */
  /* transform: scale(1.1); */ /* subtle zoom effect */
}
.Platform-white{
    filter: brightness(0) invert(1);

}
.aboutus-container{
 
  margin-inline: auto;
 
 
}
.aboutus-head{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 16px;
}
.aboutus-title{
  margin: 0;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.2;
  color: var(--ink-900);
  font-weight: 700;
}
.aboutus-btn{
  border: 1px solid var(--moh-green);
  color: var(--moh-green);
  background: transparent;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.aboutus-btn:hover{
  background: var(--tint-green-50);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 1px 8px rgba(27,131,84,.15);
}
.aboutus-btn:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--moh-green) 35%, white);
  outline-offset: 2px;
}
.aboutus-desc{
  margin: 14px 0 28px;
  color: var(--ink-700);
  font-size: 16px;
  line-height: 1.6;
}
.aboutus-stats{
  --gap: clamp(16px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  list-style: none;
  padding: 28px 0 0;
  margin: 0;
}
.stat{
  text-align: center;
}
.stat-icon{
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--tint-green-100);
  color: var(--moh-green);
  margin: 0 auto 18px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--moh-green) 18%, transparent);
}
.stat-value{
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  color: var(--moh-green);
  letter-spacing: .5px;
  font-size: 35px !important;
}
.stat-label{
  margin-top: 6px;
  color: var(--ink-500);
  font-size: 14px;
}
.aboutus-stats .stat{
  position: relative;
  padding: 12px 8px;
  border-radius: 16px;
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.aboutus-stats .stat:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--moh-green, #1B8354) 35%, white);
  outline-offset: 3px;
  background: var(--tint-green-50, #F3FCF6);
  transform: translateY(-4px);
}
.aboutus-stats .stat-icon{
  position: relative;
  transition: transform .22s ease, background-color .22s ease, box-shadow .22s ease;
}
.aboutus-stats .stat-icon::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
}
.aboutus-stats .stat:focus-visible .stat-icon::after{
  animation: stat-ping .8s ease-out;
}
.sts-logo {
    width: 45px;
}
.sideMenuToggleWrapper {
    left: 0;
    position: absolute;
    z-index: 10;
    margin-top: 10px
}
.sideMenuToggleWrapper.expanded {
    top: 175px;
    background: #ffffff;
}
.btnHelp::before {
    border-radius: 1000px;
    min-width: calc(300px - 12px);
    min-height: calc(60px - 12px);
    opacity: 0;
    transition: .3s 
ease-in-out;
}
.btnHelp::before, .sideMenuToggleWrapper .btnHelp::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-15%, -50%);
}
.sideMenuToggleWrapper .btnHelp::after {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    border: 6px solid #3e8863;
    z-index: -1;
    animation: 1.5s infinite ring;
}
.allservices_slider, .boxCommentA, .calendar_slider, .calender td, .coronanews span, .elan, .new, .new_slider, .news_slider, .popover__wrapper, .reply, .replyHead, .sideMenuPickList .dropdown-submenu, .vote_box, span#resultspan {
    position: relative;
}
:active, button.btnHelp:focus {
    outline: 0 !important;
}
.sideMenuPickList .dropdown-menu.show, div.ms-webpart-cell-vertical-inline-table {
    display: block !important;
}
.sideMenuPickList .dropdown-submenu .dropdown-menu {
    min-height: 100px;
    top: -6px;
    left: 115%;
    position: absolute;
    margin: .125rem 0 0;
    list-style: none;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    z-index: 1000;
    border-radius: .25rem;
    display: none;
    float: left;
    background-color: #fff;
    background-clip: padding-box;
}
.sideMenuPickList .dropdown-submenu.activedSubMenu::after {
    display: block;
 
    position: absolute;
    transform: scale(.39, .39);
    left: 72px;
    top: -103px;
}
.sideMenuPickList .dropdown-menu.show {
    display: block !important;
}
.sideMenuPanelToggle .panel-default>.panel-heading a {
    display: block;
    padding: 8px 8px 8px 12px !important;
    text-decoration: none;
    font-size: 12px !important;
    text-align: left;
    background-color: #3e8863;
    color: #fff !important;
    border-radius: 8px;
}
.sideMenuPanelToggle .panel-default>.panel-heading a span {
    padding: 0 0 0 5px;
}
.sideMenuPanelToggle .panel-default>.panel-heading a[aria-expanded=false]:after {
    content: "\f105" !important;
}
.sideMenuPanelToggle .panel-default>.panel-heading a:after {
    /* content: ""; */
    position: relative;
    float: right;
    top: 1px;
    display: inline-block;
    font-style: normal;
    font-family: FontAwesome;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: transform .25s 
linear;
    -webkit-transition: -webkit-transform .25s 
linear;
    transform: none;
    opacity: 1;
}
.sideMenuPickList .dropdown-submenu a::after {
    transform: rotate(-90deg);
    position: absolute;
    right: 6px;
    top: .8em;
    opacity: 0;
}
.sideMenuPanelToggle .panel-default>.panel-heading a[aria-expanded=true] {
    background-color: #9b9362;
}
.ms-sbgo, ul.subInnerMenuPanel {
    padding-left: 5px;
}
.panel-group {
    padding: 0 10px;
}
.sideMenuPanelToggle .panel-default>.panel-heading a:after {
    content: "\f105" !important;
    position: relative;
    float: right;
    top: 1px;
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: transform .25s 
linear;
    -webkit-transition: -webkit-transform .25s 
linear;
    transform: none;
    opacity: 1;
  font-family:'Font Awesome 6 Pro'
}
.sideMenuPickList .dropdown-submenu.activedSubMenu::after, .sideMenuPickList .dropdown-submenu.activedSubMenu::before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.sideMenuPickList .dropdown-submenu.activedSubMenu::after {
	/* border-color: rgba(255, 255, 255, 0); */
	border-right-color: #fff;
	border-width: 75px;
	margin-top: -75px;
	margin-left: -61px;
	box-shadow: 63px 9px 11px rgba(0, 0, 0, 0.1);
}
.sideMenuPickList .dropdown-submenu.activedSubMenu::before {
	/* border-color: rgba(255, 255, 255, 0); */
	border-right-color: #fff;
	border-width: 81px;
	margin-top: -81px;
}
.dropdown-item {
    white-space: break-spaces !important;
}
.sideMenuPanelToggle .panel-default>.panel-heading a[aria-expanded=true] {
    background-color: #9b9362
}
.sideMenuPanelToggle .panel-default>.panel-heading a[aria-expanded=true]:after {
    content: "\f077 "
}
.sideMenuPanelToggle .panel-default>.panel-heading a[aria-expanded=false]:after {
    content: "\f079";
}
.card.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 335px; /* tune if you want taller cards */
}

.card.service-card .card-text {
  margin-bottom: 12px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;           /* clamp to ~3 lines */
  min-height: calc(1.5em * 3);     /* reserve space so cards align */
}
.card.service-card .mb-3 { margin-bottom: 14px; }
.card.service-card > div:last-of-type {
  margin-top: auto;                /* pushes actions to the bottom */
  display: flex;
  gap: 8px;
  justify-content: flex-start;     /* or space-between if you prefer */
}
.card.service-card .btn {
  white-space: nowrap;
  align-items: center;
  /* display: inline-flex; */
}
.card.service-card{
  display:flex;
  flex-direction:column;
  height:auto;            /* let JS measure real height first */
}
.card.service-card > div:last-of-type{
  margin-top:auto;        /* pin Actions row */
  display:flex;
  gap:8px;
}
.card.service-card .card-title{margin-bottom:6px;height: 50px;margin-left: 0px;margin-top: 10px;}
.card.service-card .card-text{
  margin-bottom:12px;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;        /* clamp if needed */
  overflow:hidden;
  min-height:calc(1.5em * 3);  /* reserve room so rows align better */
}
[aria-labelledby="servicesHeading"] {
  overflow: visible;
}
[aria-labelledby="servicesHeading"] .carousel-container,
[aria-labelledby="servicesHeading"] .cards-wrapper,
[aria-labelledby="servicesHeading"] .card-wrapper {
  width: 100vw;              /* span the whole screen */
  margin-left: 50%;          /* center the 100vw block */
  transform: translateX(-50%);
  padding-left: 0 !important;
  padding-right: 0 !important;
}
[aria-labelledby="servicesHeading"] .carousel {
  padding-right: 120px !important;
  padding-left: 0 !important;
}
[aria-labelledby="servicesHeading"].container {
  /* break out of Bootstrap container limits */
  max-width: none !important;
  width: 100vw;                 /* stretch edge-to-edge */
  margin-right: -50%;             /* center the 100vw block */
  transform: translateX(-50%);  /* cancel the extra 50% margin */
  padding-left: 120px !important;
  padding-right: 120px!important;
  box-sizing: border-box;       /* keep gutters inside width */
}
[aria-labelledby="servicesHeading"].container .carousel-container,
[aria-labelledby="servicesHeading"].container .cards-wrapper,
[aria-labelledby="servicesHeading"].container .card-wrapper {
  padding-left: 0;
  padding-right: 0;
}
.calendar-hero{
  position: relative;
  width: 100%;
  color: #fff;
  /* subtle diagonal dark gradient like the screenshot */
  background: linear-gradient(135deg, #0E1116 0%, #1B222A 60%, #1C2229 100%);
  overflow: hidden;
}
.calendar-hero__wrap{
  max-width: 100%;
  padding-left: 80px;
  padding-right: 80px;
  padding-top: 56px;
  padding-bottom: 120px; /* leave space for bottom controls */
}
.events-slider{
  position:relative;
  width:100%;
  min-height:420px;              /* adapt as needed */
  padding:48px 56px 72px;
  color:#E9F2EE;
  background: #1b8354;
  overflow:hidden;
}
.events-track{
  display:flex;
  height:100%;
  will-change:transform, opacity;
  transition: transform 620ms cubic-bezier(.22,.61,.36,1);
}
.event-slide{
  flex:0 0 100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  opacity:.9;
  padding: 9px;
}
.badge-zt{
  display:inline-block;
  /* letter-spacing:.3px; */
  color:#fff;
  background-color: #ffffff2b;     /* ZATCA blue badge */
  padding:8px 12px;
  border-radius: 4px !important;
  font-size: 19px !important;
  width: 12rem;
}
.event-meta{
  display:flex;
  align-items:center;
  gap:10px;
  color: #ffffff;
  font-size:14px;
}
.event-title{
  margin:6px 0 4px;
  font-weight:700;
  font-size: clamp(22px, 3.2vw, 36px);
  line-height:1.15;
  color: #ffffff;
  max-width: 1100px;
  width: auto;
}
.event-location{
 
  color: #1b8354;
 
}
.btn.btn-ghost{
  display:inline-block;
  align-self:flex-start;
  padding:10px 16px;
  border: 1px solid rgb(255 255 255);
  border-radius:10px;
  color: #EAF4F0 !important;
  text-decoration:none;
  transition:transform .25s ease, background-color .25s ease, border-color .25s ease;
}
.btn.btn-ghost:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.4);
  transform:translateY(-1px);
}
.events-controls{
  position:absolute;
  left:0;
  right:0;
  bottom:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 56px;
  pointer-events:none; /* allow buttons to enable themselves */
  padding-left: 120px;
  padding-right: 120px;
}
.events-dots{
  display:flex; gap:10px;
  pointer-events:auto;
}
.events-dots button{
  width:10px; height:10px;
  border-radius:50%;
  border:0;
  background:#2C5346;
  opacity:.8;
  transition:transform .25s ease, opacity .25s ease, background-color .25s ease;
}
.events-dots button[aria-current="true"]{
  background: #ffffff;       /* MOH green */
  opacity:1;
  transform:scale(1.1);
}
.events-arrows{
  display:flex;
  gap: 12px;
  pointer-events:auto;
}
.nav-btn{
  width: 50px;
  height: 50px;
  display:grid;
  place-items:center;
  border:0;
  background: #074D31;
  color: #ffffff;
  border-radius: 50%;
  transition: transform .2s ease, background-color .25s ease, box-shadow .25s ease;
}
.nav-btn:hover{ transform:translateY(-2px); }
.nav-btn.primary{
  background: #ffffff;       /* primary next */
  color: #198754;
}
.nav-btn:focus-visible{
  outline:3px solid #B9F5D0;
  outline-offset:3px;
  border-radius:12px;
}
.events-track.is-fading{
  transition: opacity 420ms ease;
}
.events-track.is-fading{ opacity:.85; }
.events-track.is-fading:not(.noop){ opacity:1; }
.events-slider{ overflow:hidden; }
.events-track{
  display:flex;
  gap:0;                 /* <— important */
  flex-wrap:nowrap;
}
.event-slide{
  flex:0 0 100%;         /* <— exactly one slide’s width */
  max-width:100%;
  margin:0;              /* guard against accidental margins showing a 2nd slide */
  box-sizing:border-box; /* padding stays inside the 100% width */
}
.events-slider.one-slide{overflow:hidden;padding-left: 0;padding-right:0;}
.events-slider.one-slide .events-track{
  display:flex; flex-wrap:nowrap; gap:0 !important;
  will-change:transform; transform:translate3d(0,0,0);
}
.events-slider.one-slide .event-slide{
  flex:0 0 auto;           /* width set in JS to be exact pixels */
  width:100%;
  max-width:none;
  margin:0 !important;
  box-sizing:border-box;
  padding-left: 120px;
  padding-right: 120px;
  padding-bottom: 50px;
}
.events-slider.one-slide .event-slide > *{/* padding-left:56px; *//* padding-right:56px; */}
.events-slider{
  position:relative;
  width:100%;
  min-height: 400px;              /* adapt as needed */
  padding:48px 56px 72px;
  color:#E9F2EE;
  background: #074D31;
  overflow:hidden;
}
.event-meta{
  display:flex;
  align-items:center;
  gap:10px;
  color: #1b8354;
  font-size: 18px;
}
.events-controls{
  position:absolute;
  left:0;
  right:0;
  bottom: 39px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 56px;
  pointer-events:none; /* allow buttons to enable themselves */
  padding-left: 120px;
  padding-right: 120px;
}
.events-dots button{
  width:10px;
  height:10px;
  border-radius:50%;
  border:0;
  background: #ffffff9e;
  opacity:.8;
  transition:transform .25s ease, opacity .25s ease, background-color .25s ease;
}
.nav-btn{
  width: 50px;
  height: 50px;
  display:grid;
  place-items:center;
  border:0;
  background: #ffffff42;
  color: #ffffff;
  border-radius: 50%;
  transition: transform .2s ease, background-color .25s ease, box-shadow .25s ease;
}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap}
.moh-feature-strip{padding:var(--space-8) var(--space-3);background: #f5faf7;}
.feature-grid{
 margin:0 auto;display:grid;gap:var(--space-4);
  grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;padding:0
}
.feature-card{border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);background:#fff;transition:var(--transition);border: 1px solid #DBDFE3 !important;}
.feature-link{
  display:block;
  width:100%;
  text-align:initial;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:calc(var(--space-6) + 2px) var(--space-6) var(--space-6);
  color:inherit;
  border-radius:inherit;
  outline:none;
}
.feature-accent{
  height: 2px;
  margin:-calc(var(--space-6) + 2px) 0 var(--space-6);
  border-top-left-radius:var(--radius-xl);
  border-top-right-radius:var(--radius-xl);
  background:linear-gradient(90deg,var(--moh-green-600),#00b894);
  margin-bottom: 10px;
}
.feature-title{margin:0 0 .5rem;color:var(--moh-ink-900);font-weight:700;font-size:1.125rem; width: 100%;
    float: left;}
.feature-copy{margin:0;color:var(--moh-ink-500)}
.feature-card:hover,.feature-card:focus-within{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.feature-card.is-active{box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);}
.feature-card.is-active .feature-accent{background:linear-gradient(90deg,var(--moh-green-700),var(--moh-green-600))}
.feature-link:focus-visible{outline:3px solid rgba(10,123,94,.28);outline-offset:2px}
.moh-story-band{background:var(--moh-surface);padding:var(--space-8) var(--space-3)}
.story-carousel{max-width:1340px;margin:0 auto;position:relative}
.story-track{display:flex;transition:transform .6s cubic-bezier(.2,.8,.2,1);will-change:transform}
.story-slide{
  min-width:100%;
  height:360px;              /* <- as requested */
  display:grid;
  /* gap:var(--space-4); */
  grid-template-columns:1.25fr 1fr;
  align-items:stretch;
  position:relative;
  border-radius:var(--radius-xl);
  margin-right: 20px;
}
.story-media, .story-content{height:100%}
.story-media{margin:0;/* border-top-left-radius: var(--radius-xl); */overflow:hidden;background:#e6eef0;border-bottom-right-radius: var(--radius-xl);}
.story-media img, .story-media video{display:block;width:100%;height:100%;object-fit:cover}
.story-content{
  background:#fff;
  /* border-top-right-radius: var(--radius-xl); */
  padding:clamp(1.25rem,2vw + 1rem,2.25rem);
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom-left-radius: var(--radius-xl);
  padding-top: 0rem !important;
}
.story-heading{margin:0 0 .5rem;color:var(--moh-ink-900);font-weight:800;font-size:clamp(1.25rem,1vw + 1rem,1.75rem)}
.story-copy{margin:0 0 1rem;color: var(--moh-ink-700);}
.story-link{display:inline-flex;align-items:center;gap:.5ch;color: var(--moh-green-700) !important;font-weight:700;/* border-bottom:2px solid rgba(27,131,84,.35); */padding-bottom:2px;text-decoration:none}
.story-link:hover,.story-link:focus-visible{color:var(--moh-green-600);border-color:var(--moh-green-600);outline:3px solid rgba(10,123,94,.25);outline-offset:2px}
.slide-progress{
  position:absolute;
  top: 0px;
  /* left: 10px; */
  height: 2px;
  /* width:0; */
  border-top-left-radius:var(--radius-xl);
  border-top-right-radius:var(--radius-xl);
  background:linear-gradient(90deg,var(--moh-green-600),#00b894);
  /* right: -10px; */
}
.story-slide.is-active .slide-progress{ animation: fill var(--autoMs) linear forwards; }
.story-dots{display:flex;gap:.5rem;justify-content:center;margin-top:var(--space-6)}
.story-dot{width:10px;height:10px;border-radius:50%;background:#c9e7d9;border:0}
.story-dot[aria-selected="true"]{background:var(--moh-green-600)}
.story-dot:focus-visible{outline:3px solid rgba(10,123,94,.35);outline-offset:2px}
[dir="rtl"] .feature-grid, [dir="rtl"] .story-track { direction: rtl; }
[dir="rtl"] .story-link span:last-child {/* transform: scaleX(-1); */}
.container, .container-fluid, .container-lg, .container-md,
.container-sm, .container-xl, .container-xxl {
  /* max-width: none !important; */
  /* width: 100% !important; */                 /* was 100vw */
  /* padding-left: clamp(20px, 6vw, 120px) !important; */
  /* padding-right: clamp(20px, 6vw, 120px) !important; */
  /* box-sizing: border-box; */
}
.full-bleed {
  /* Pull edges to viewport without setting width */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Optional: keep your nice page gutters inside */
  padding-left: clamp(20px, 6vw, 120px);
  padding-right: clamp(20px, 6vw, 120px);
}
[aria-labelledby="servicesHeading"] .carousel-container,
[aria-labelledby="servicesHeading"] .cards-wrapper,
[aria-labelledby="servicesHeading"] .card-wrapper {
  width: auto !important;                 /* stop using 100vw */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  transform: none !important;             /* remove centering transform */
  padding-left: 0 !important;             /* content will get gutters inside slides */
  padding-right: 0 !important;
}
.controls {
    width: auto !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    transform: none !important;
    padding-left: clamp(20px, 6vw, 120px) !important;
    padding-right: clamp(20px, 6vw, 120px) !important;
    box-sizing: border-box;
}
.mtb-moh{
  margin-top: 5rem !important;
  margin-bottom: 5rem !important;
}
.mt-moh{
  margin-top: 5rem !important;
 
}
.mb-moh{
  margin-bottom: 5rem !important;
}
.ptb-moh{
padding-top: 5rem !important;
padding-bottom: 5rem !important;

}
.pb-moh{
 
padding-bottom: 5rem !important;

}
.pt-moh{
 
padding-top: 5rem !important;

}


/* ===== Keyframes ===== */

@keyframes fadeIn {
  from {opacity: 0; transform: translateY(10px);}
  to   {opacity: 1; transform: translateY(0);};
}
@keyframes stat-ping{
  0%   { box-shadow: 0 0 0 0 rgba(27,131,84,.30); opacity: 1; }
  100% { box-shadow: 0 0 0 14px rgba(27,131,84,0); opacity: 0; }
}
@keyframes fill { from{width:0} to{width:100%} }


/* ===== Media queries (grouped by condition) ===== */

@media (max-width: 768px) {

  .card {
      flex: 0 0 85%;
    }

  .service-section {
      flex-direction: column;
      padding: 15px;
    }

  .left-content,
    .right-card {
      flex: 1 1 100%;
      width: 100%;
    }

  .video-box {
      height: 180px;
    }

  .custom-tabs .nav-link {
      font-size: 14px;
      margin-right: 0.5rem;
    }

  .tab-content {
      padding: 1rem 0.5rem;
    }

  .icon-text {
      flex-direction: row;
      align-items: flex-start;
    }

  .payment-channels img,
    .app-badges img {
      max-width: 100px;
      height: auto;
    }

  .app-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

  nav a {
      font-size: 14px;
    }

  h2 {
      font-size: 22px;
    }

  .partners-carousel-control.left {
      left: 0px;
    }

  .partners-carousel-control.right {
      right: 0px;
    }

  .ratings-display {
                  flex-direction: column;
                  align-items: flex-start;
              }

  .rate-button {
                  margin-left: 0;
                  margin-top: 10px;
              }

  .feedback-section {
                  flex-direction: column;
                  align-items: flex-start;
              }

  .feedback-result {
                  margin-top: 10px;
              }

  .carousel-caption h1 {
    font-size: 2rem;
  }

  .carousel-caption p {
    font-size: 1rem;
  }

  .events-slider{ padding:36px 20px 84px; }

  .events-controls{ padding:0 20px; }

}


@media (max-width: 767.98px) {

  .grid-container {
    /* display: none; */
  }

  #mobileCarousel {
    display: block; /* Show only on mobile */;
  }

  .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
      max-width: none !important;
      width: 100vw;
      margin-left: 0;
      transform: none;
      padding-left: 20px !important;
      padding-right: 20px !important;
      box-sizing: border-box;
  }

  .carousel-item {
    transition: transform 0.6s ease-in-out;
  }

  .carousel-indicators {
    /* position: static; */
    margin-top: 1rem;
    justify-content: center;
  }

  .carousel-indicators [data-bs-target] {
    background-color: #198754;
      width: 10px;
      height: 10px;
      border-radius: 50%;
  }

  .carousel-control-prev,
    .carousel-control-next {
    display: none !important;
  }

  .mobile-settings {
    display: block !important;
  }

  .desktop-settings {
    display: none !important;
  }

  section[aria-labelledby="news-section-title"] .grid-container{
      display: flex !important;          /* show cards row */
      flex-wrap: nowrap;                  /* single row */
      gap: 16px;                          /* space between cards */
      overflow-x: auto;                   /* horizontal scroll */
      overscroll-behavior-x: contain;     /* keep scroll in container */
      -webkit-overflow-scrolling: touch;  /* momentum scroll on iOS */
      scroll-snap-type: x mandatory;      /* snap to each card */
      padding-bottom: 8px;
      touch-action: pan-x;                /* improve swipe responsiveness */
    }

  section[aria-labelledby="news-section-title"] .grid-container > [class*="col-"]{
      flex: 0 0 85%;
      max-width: 85%;
      scroll-snap-align: start;
    }

  section[aria-labelledby="news-section-title"] .grid-container .news-card{
      height: 100%;
    }

  section[aria-labelledby="news-section-title"] #mobileCarousel{
      display: none !important;
    }

  section[aria-labelledby="news-section-title"] .grid-container{
      flex-wrap: nowrap;
      gap: 16px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      padding-bottom: 8px;
      touch-action: pan-x;
    }

  .container, .container-fluid, .container-lg, .container-md,
    .container-sm, .container-xl, .container-xxl {
      width: 100% !important;               /* was 100vw */
      padding-left: 20px !important;
      padding-right: 20px !important;
    }

}


@media (max-width: 992px) {

  .card-item {
    width: calc(50% - 8px);
  }

  .aboutus-stats{ grid-template-columns: repeat(2, 1fr); }

  [aria-labelledby="servicesHeading"].container {
      padding-left: 32px !important;
      padding-right: 32px !important;
    }

}


@media (max-width: 576px) {

  .card-item {
          width: 100%;
        }

  .card.service-card > div:last-of-type .btn {/* flex: 1 1 auto; */}

  [aria-labelledby="servicesHeading"].container {
      padding-left: 16px !important;
      padding-right: 16px !important;
    }

}


@media (max-width: 991.98px) {

  .dropdown-menu.mega-menu {
        display: none !important;
      }

  .mega-menu {
          position: relative;
          top: auto;
          left: auto;
          width: 100%;
          box-shadow: none;
        }

}


@media (forced-colors: active) {

  .navbar .nav-link:focus,
    .navbar .nav-link:focus-visible,
    .dropdown-menu .dropdown-item:focus,
    .dropdown-menu .dropdown-item:focus-visible{
      outline: 2px solid ButtonText !important;
      outline-offset: 2px;
    }

  #tabs .tab-btn:focus,
    #tabs .tab-btn:focus-visible{
      outline: 2px solid ButtonText;
      outline-offset: 2px;
    }

  .slider-button:focus,
    .slider-button:focus-visible{
      outline: 2px solid ButtonText;
      outline-offset: 2px;
    }

  .slider-button.use-alt-focus:focus-visible::after{
      border-color: ButtonText;
    }

  #heroCarousel .carousel-control-prev:focus,
    #heroCarousel .carousel-control-prev:focus-visible,
    #heroCarousel .carousel-control-next:focus,
    #heroCarousel .carousel-control-next:focus-visible{
      outline:2px solid ButtonText !important;
      background:Canvas;
    }

  #heroCarousel .carousel-control-prev:focus-visible::after,
    #heroCarousel .carousel-control-prev:focus::after,
    #heroCarousel .carousel-control-next:focus-visible::after,
    #heroCarousel .carousel-control-next:focus::after{
      border-color:ButtonText;
      background:Canvas;
    }

  .carousel-indicators--numbered [data-bs-target]{
      forced-color-adjust: none;
      background: Canvas !important;
      color: ButtonText !important;
      border: 2px solid ButtonText !important;
    }

  .carousel-indicators--numbered [data-bs-target].active{
      background: ButtonFace !important;
      color: ButtonText !important;
    }

  .carousel-indicators--numbered [data-bs-target] > .ci-label{
      background: Canvas !important;
      color: ButtonText !important;
    }

  #heroCarousel .carousel-control-prev:focus,
    #heroCarousel .carousel-control-prev:focus-visible,
    #heroCarousel .carousel-control-next:focus,
    #heroCarousel .carousel-control-next:focus-visible{
      outline: 2px solid ButtonText !important;
      background: Canvas !important;
      box-shadow: none !important;
    }

  #heroCarousel .carousel-control-prev:focus::after,
    #heroCarousel .carousel-control-prev:focus-visible::after,
    #heroCarousel .carousel-control-next:focus::after,
    #heroCarousel .carousel-control-next:focus-visible::after{
      border-color: ButtonText;
      background: Canvas;
    }

}


@media (min-width: 48em) {

  :root{ --step-4: 2.5rem; --step-5: 3.25rem; }

}


@media (min-width: 64em) {

}


@media (max-width: 520px) {

  .aboutus-head{ grid-template-columns: 1fr; }

  .aboutus-btn{ justify-self: start; }

  .aboutus-stats{ grid-template-columns: 1fr 1fr; }

}


@media (min-width: 992px) {

  .about-us .aboutus-desc {
      width: 75%;
      margin-inline: inherit;
    }

}


@media (hover:hover) {

  .aboutus-stats .stat:hover{
      transform: translateY(-4px);

    }

  .aboutus-stats .stat:hover .stat-icon{ 
      transform: scale(1.06);

    }

  .aboutus-stats .stat:hover .stat-icon::after{
      animation: stat-ping .8s ease-out;
    }

}


@media (prefers-reduced-motion: reduce) {

  .aboutus-stats .stat,
    .aboutus-stats .stat-icon{ transition:none; }

  .aboutus-stats .stat-icon::after{ animation:none !important; }

  .events-track{ transition:none !important; }

  .events-dots button,
    .btn.btn-ghost,
    .nav-btn{ transition:none !important; }

  *{transition:none!important;animation:none!important}

}


@media (min-width: 768px) {

  section[aria-labelledby="news-section-title"] .grid-container{
      flex-wrap: wrap;
    }

}


@media (max-width:768px) {

  .events-slider.one-slide .event-slide > *{ padding-left:20px; padding-right:20px; }

}


@media (max-width:992px) {

  .feature-grid{grid-template-columns:1fr 1fr}

}


@media (max-width:576px) {

  .feature-grid{grid-template-columns:1fr;         display: none;}
  
.events-slider.one-slide .event-slide {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    margin: 0 !important;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
}
[aria-labelledby="servicesHeading"] .carousel {
    padding-left: 20px !important;
    padding-right: 20px!important;
}


}


@media (max-width:1024px) {

  .story-slide{grid-template-columns:1fr}

}












/******************************************/


:where(a, button, .btn, .nav-link, .page-link,
       input, select, textarea, summary,
       [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  /* outline: var(--focus-ring, 3px solid #1B8354); */
  /* outline-offset: var(--focus-offset, 3px); */
  /* border-radius: var(--focus-radius, 6px); */
  /* box-shadow: none; */ /* keep ring crisp */
}

/* Make sure .feature-link gets it too (belt and suspenders) */
.feature-link:focus-visible {
  outline: var(--focus-ring, 3px solid #1B8354);
  outline-offset: var(--focus-offset, 3px);
  border-radius: var(--focus-radius, 6px);
}

.feature-link:focus-visible {
  box-shadow:
    0 0 0 2px #fff,                 /* inner separator */
    0 0 0 5px var(--focus-ring-color, #1B8354);  /* outer brand ring */
}

.partners-carousel-control .btn-label {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: -2.25rem;                /* sits under the button */
  font-size: .875rem;
  background: #fff; padding: .125rem .375rem; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(16,24,40,.1);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.partners-carousel-control:focus-visible .btn-label {
  opacity: 1;                       /* show on keyboard focus */
}



 

.partners-carousel-control .btn-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2.25rem;           /* sits under the round button */
  font-size: .875rem;
  background: #fff;
  padding: .125rem .375rem;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(16,24,40,.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.partners-carousel-control:focus-visible .btn-label {
  opacity: 1;
}


/* 1) Don’t kill outlines by default */
.feature-link {
  outline: none; /* you can keep this IF you add the fallbacks below */
}

/* 2) Keyboard-visible focus (modern) + 3) Fallback for older browsers */
.feature-link:focus-visible,
.user-is-tabbing .feature-link:focus,
html.user-is-tabbing .feature-link:focus {
  /* two-tone ring that clears busy backgrounds */
  box-shadow:
    0 0 0 2px #fff, /* inner separator */
    0 0 0 5px var(--focus-ring-color, #1B8354);
  outline: none;          /* prefer the ring above */
  border-color: transparent; /* avoid layout jank */
}

/* 4) Windows High Contrast / Forced Colors */
@media (forced-colors: active) {
  .feature-link:focus,
  .feature-link:focus-visible,
  .user-is-tabbing .feature-link:focus {
    outline: 2px solid ButtonText;
    outline-offset: 2px;
    box-shadow: none; /* let system color win */
  }
}



/* ---- Focus ring tokens (tweak if you like) ---- */
:root{
  /* --focus-ring-color: #1B8354; */
  /* --focus-ring-gap: 2px; */   /* inner separator */
  /* --focus-ring-width: 5px; */ /* outer brand ring */
}

/* ---- Modern focus + fallbacks (Firefox + keyboard-only path) ---- */
.feature-link:focus-visible,
.feature-link:-moz-focusring,              /* Firefox fallback */
.user-is-tabbing .feature-link:focus {     /* fallback where :focus-visible is missing */
  outline: none !important;                /* neutralize outline resets */
  box-shadow:
    0 0 0 var(--focus-ring-gap) #fff,
    0 0 0 calc(var(--focus-ring-gap) + var(--focus-ring-width)) var(--focus-ring-color);
  border-color: transparent;               /* avoid layout jank if you have borders */
  border-radius: 6px;                      /* keep ring crisp on rounded buttons */
}

/* If any previous rules set background/border on :focus, undo them here */
.feature-link:focus {
  background: inherit;
}

/* ---- High Contrast / Forced Colors: let the OS draw it ---- */
@media (forced-colors: active) {
  .feature-link:focus,
  .feature-link:focus-visible,
  .user-is-tabbing .feature-link:focus {
    outline: 2px solid CanvasText !important;
    outline-offset: 2px;
    box-shadow: none !important;
  }
}



/* Position the numeric/text label under each dot */
.story-dots { display:flex; gap:.75rem; align-items:flex-start; }
.story-dots .dot-wrap { position:relative; display:inline-flex; flex-direction:column; align-items:center; }
.story-dots .story-dot { position:relative; width:12px; height:12px; border-radius:50%; /* your existing dot styles */ }
.story-dots .dot-label {
  margin-top:.35rem;
  font-size:.75rem;
  line-height:1;
  /* keep good contrast; adjust to your palette */
  color:#384250;
  display: none;
}

.story-dots .story-dot:focus-visible,
.user-is-tabbing .story-dots .story-dot:focus {
  outline:none;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 5px var(--focus-ring-color, #1B8354);
  border-radius:999px;
}


/* Make the button show its label normally */
.carousel-indicators--numbered [data-bs-target] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 9999px;
  border: 2px solid #94A3B8;
  background: #fff;
  color: #334155;
  text-indent: 0 !important;          /* override old hide rule */
  overflow: visible;                   /* ensure the label can render */
}

/* Make the label visible and readable */
.carousel-indicators--numbered [data-bs-target] > .ci-label {
  display: block !important;
  /* opacity: 1 !important; */
  font-weight: 600;
  font-size: 14px;
  pointer-events: none;
}

/* Active state */
.carousel-indicators--numbered [data-bs-target].active {
  background: #1B8354; border-color: #1B8354; color: #fff;
}

/* Keyboard focus ring (you already have this—keep it) */
.carousel-indicators--numbered [data-bs-target]:focus-visible {
  outline: 3px solid #1B8354; outline-offset: 3px; border-radius: 9999px;
}

.dot-wrap{display:inline-flex;align-items:center;gap:.4rem}
.dot-label{font-size:14px;line-height:1}











/* Dots: keep layout intact, let labels sit below the circles */
.events-dots button {
  position: relative;           /* anchor for the label */
  overflow: visible;            /* allow label to render outside */
}
.events-dots button .btn-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -1.6rem;              /* tweak as you like */
  font-size: .75rem;
  line-height: 1;
  background: #fff;
  padding: 0 .35rem;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(16,24,40,.12);
  pointer-events: none;
  display: none;
}

/* Prev/Next arrows: tiny caption under each */
.nav-btn {
  position: relative;
  overflow: visible;
}
.nav-btn .btn-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -1.6rem;
  font-size: .75rem;
  line-height: 1;
  background: #fff;
  padding: 0 .35rem;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(16,24,40,.12);
  pointer-events: none;
  display: none;
}

/* Strong keyboard focus (works with your brand ring) */
.events-dots button:focus-visible,
.user-is-tabbing .events-dots button:focus,
.nav-btn:focus-visible,
.user-is-tabbing .nav-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--focus-ring-color, #1B8354);
  border-radius: 999px; /* or 8px for arrows */
}

@media (forced-colors: active){
  .events-dots button:focus,
  .nav-btn:focus {
    outline: 2px solid CanvasText; outline-offset: 2px; box-shadow: none;
  }
}



/* Brand focus tokens */
:root{
  /* --focus-ring-color: #1B8354; */   /* tweak to your brand */
  /* --focus-ring-gap: 2px; */         /* inner separator */
  /* --focus-ring-width: 5px; */       /* outer ring */
}

/* Make ghost links unmistakably focused */
a.btn.btn-ghost:focus-visible,
a.btn.btn-ghost:-moz-focusring,               /* Firefox fallback */
.user-is-tabbing a.btn.btn-ghost:focus {      /* fallback where :focus-visible is missing */
  outline: none !important;                   /* neutralize any outline resets */
  box-shadow:
    0 0 0 var(--focus-ring-gap) #fff,         /* inner white halo to clear busy backgrounds */
    0 0 0 calc(var(--focus-ring-gap) + var(--focus-ring-width)) var(--focus-ring-color);
  border-color: transparent;                  /* avoid relying on border for focus */
  border-radius: 8px;                          /* match your button radius */
}

/* If you have a rule that changes ghost border/background on :focus, undo it */
a.btn.btn-ghost:focus { background: inherit; }

/* High Contrast / Forced Colors: let the OS draw it */
@media (forced-colors: active){
  a.btn.btn-ghost:focus,
  a.btn.btn-ghost:focus-visible,
  .user-is-tabbing a.btn.btn-ghost:focus {
    outline: 2px solid CanvasText !important;
    outline-offset: 2px;
    box-shadow: none !important;
  }
}





/* Give each footer icon a visible caption under it */
 

.footer-icons .footer-setting-option .btn-label{
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: -1.4rem;                  /* tweak spacing if needed */
  font-size: .75rem; line-height: 1;
  background: #fff; padding: 0 .35rem;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(16,24,40,.12);
  pointer-events: none;              /* purely decorative */
  color: #384250;                    /* ensure good contrast */
  display: inline-block;             /* make it real, visible text */
}

/* Give the footer a little breathing room for the captions, if needed */
.footer-icons{ padding-bottom: 1.75rem; }

/* Optional: a nice keyboard ring for these buttons */
.footer-setting-option:focus-visible,
.user-is-tabbing .footer-setting-option:focus{
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--focus-ring-color, #1B8354);
  border-radius: 8px;
}

@media (forced-colors: active){
  .footer-setting-option:focus,
  .footer-setting-option:focus-visible{
    outline: 2px solid CanvasText; outline-offset: 2px; box-shadow: none;
  }
}



/* Make the existing <span class="visually-hidden">Settings</span> visible in the footer */
.footer-icons .footer-setting-option{
  position: relative;
  overflow: visible; /* allow caption to sit outside the button */
  color: #fff;
}

.footer-icons .footer-setting-option > .visually-hidden{
  position: absolute !important;
  left: 50%; transform: translateX(-50%);
  bottom: -1.4rem;           /* tweak spacing */
  /* cancel the visually-hidden clipping */
  clip: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  border: 0 !important;
  padding: 0 .35rem;
  /* make it look like a tiny caption */
  display: inline-block !important;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(16,24,40,.12);
  color: #384250;            /* ensure ≥ 4.5:1 contrast */
  font-size: .75rem;
  line-height: 1;
}



.color-white{
  color: #fff !important;
}








.carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }

.card.service-card { scroll-snap-align: start; }

 



.indicators .indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #DBDFE3 !important;
  background: #DBDFE3;
}
.indicators .indicator-dot.active {background: #1B8354;border-color: #1B8354 !important;}



.news-meta {
    display: flex
;
    align-items: center;
    gap: 10px;
    color: #1b8354;
    font-size: 18px;
    margin-left: 16px;
}




li.nav-item.dropdown.position-relative.tooltips.logout.srclose {
    list-style: none;
}




/*Login*/


 
.dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;     
    padding: 10px 16px;
}

 
.dropdown-item i {
    font-size: 16px;
    width: 20px;                  
    text-align: center;
    flex-shrink: 0;               
}

 
.dropdown-item span,
.dropdown-item .item-text {
    display: inline-block;
    white-space: nowrap;    
}

 
.loginclass.nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
    background: transparent !important;
    border: 0 !important;
    /* padding: 6px 10px; */
    cursor: pointer;
    color: #0D121C;
}

 
.loginclass .fa-user {
    color: #161616;
    font-size: 20px;
}

 
.username-display {
    display: flex;
    flex-direction: column;      
    line-height: 1.2;
}

 
.username-display #ctl00_ss_IdWelcomeDisplay_lvName_lblName {
    font-size: 13px;
    color: #666;
    margin-bottom: 2px;
}

 
.username-display #ctl00_ss_IdWelcomeDisplay_lvName_lblADName {
    font-size: 15px;
    font-weight: 600;
    color: #0D121C;
}

 
.username-display a {
    /* display: none; */
}
 
#dropdownArrow {
    font-size: 14px;
    color: #6b7280;
    transition: transform .2s ease;
    display: none !important;
}
 
#loginButton[aria-expanded="true"] #dropdownArrow {
    transform: rotate(180deg);
}

 
.loginclass:hover {
    color: #1B8354;
}

.loginclass:hover .fa-user,
.loginclass:hover #dropdownArrow {
    color: #1B8354;
}


/* ===========================
   Background Wrapper
=========================== */
.coloredbg {
    background: #F7FDF9;
    padding: 16px 0;
}


/* ===========================
   Breadcrumb
=========================== */
.bc {
    padding: 0px;
    font-family: 'IBMPlexSans-Regular', sans-serif;
}

.bc .ms-breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

 
.ms-breadcrumb > li > .s4-breadcrumb-arrowcont,
.ms-breadcrumb > li > span.s4-breadcrumb-arrowcont img {
    display: none !important;
}


.bc li {
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #0D121C;
}
ul.ms-breadcrumbRootNode, ul.ms-breadcrumbNode {
    margin-right: 0px;
    margin-top: 0px;
    padding-right: 0px;
}

/* Links */
.bc a {
    color: #1B8354 !important;
    text-decoration: none !important;
    font-weight: 500;
}

.bc a:hover {
    color: #166A45 !important;
    text-decoration: underline !important;
}

/* Current Node */
.bc .ms-breadcrumbCurrentNode {
    /* font-weight: 600; */
    color: #0D121C;
}

/* Replace old image arrow */
.bc .s4-breadcrumb-arrowcont {
    margin: 0 6px;
    /* display: flex; */
    align-items: center;
}
li.ms-breadcrumbRootNode img {
    display: none !important;
}

.bc .s4-breadcrumb-arrowcont::after {
    content: "\f104"; /* FontFont Font Awesome 6 Pro6 Proarrow-right */
    font-family: 'Font Awesome 6 Pro';
    font-weight: 900;
    font-size: 13px;
    color: #6B7280;
}

/* Hide SharePoint icon image */
.bc .s4-breadcrumb img {
    display: none !important;
}

/* Fix old clr span */
.bc .clr {
    display: block;
    clear: both;
}



/* ===========================
   Title + Icons Section
=========================== */
.icons_title {
    margin-top: 10px;
    padding: 0px 0 8px;
}

.icons_title > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    float: left;
}

/* Title */
.sstitle {
    margin: 0;
    font-size: 32px;
    font-family: 'IBMPlexSans-SemiBold';
    color: #0D121C;
}


/* ===========================
   Inline Icons (Listen, Font +/-, Share, etc.)
=========================== */
.int_icons ul {
    padding: 0;
    margin: 0;
    display: flex;
    gap: 8px;
    list-style: none;
}

.int_icons li {
    position: relative;
}

.int_icons li a,
.int_icons li span {
    /* width: 36px; */
    /* height: 36px; */
    /* background: #FFFFFF; */
    /* border-radius: 50%; */
    /* border: 1px solid #E5E7EB; */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    /* transition: 0.2s ease; */
    /* cursor: pointer; */
}

.int_icons li img {
    width: 18px;
}

/* Hover State */
.int_icons li a:hover,
.int_icons li span:hover {
    /* background: #ECFDF3; */
    /* border-color: #1B8354; */
    /* transform: translateY(-2px); */
    /* box-shadow: 0 3px 8px rgba(0,0,0,0.08); */
}


 



/* ===========================
   Share Box (dropdown)
=========================== */
.tooltips.sharepage.srclose {
    position: relative;
}

/* White arrow */
.tooltips.sharepage .triangle-up {
    position: absolute;
    bottom: 100%;
    right: 10px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid white;
    display: none;
}

.tooltips.sharepage.srclose > div {
    position: absolute;
    top: 118%;
    right: 0;
    min-width: 180px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 10px 8px;
    box-shadow: 0px 8px 20px rgba(0,0,0,0.12);
    z-index: 999;
}

.tooltips.sharepage.srclose img {
    width: 22px;
    height: 22px;
    margin: 3px;
}

/* Auto-show arrow when dropdown is shown */
.tooltips.sharepage.srclose > div[style*="display:block"] ~ .triangle-up,
.tooltips.sharepage.srclose > div[style*="display: block"] ~ .triangle-up {
    display: block;
}


/* Fix clr */
.icons_title .clr {
    display: block;
    clear: both;
}





div#userDropdown {
    padding: 15px;
}

a.dropdown-item.text-danger {
    color: red !important;
}

/*End login*/



/*2nd Header*/

  /* Breadcrumb */
  .breadcrumb-container {
    font-size: 14px;
    color: #6b7280;
  }

  .breadcrumb-container a {
    color: #369168 !important;
    text-decoration: none;
  }

  .breadcrumb-container .current {
    color: #9ca3af;
  }

  /* Page Title */
  .page-title {
    font-size: 40px;
    font-weight: 700;
    margin: 0;
    color: #121212;
  }

  /* Listen Button */
  .listen-btn {
    background: #fff;
    border: 1px solid #ccc;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
  }

  .listen-btn i {
    color: #1b8354;
  }

  .listen-btn:hover {
    border-color: #1b8354;
    background-color: #F3FCF6;
  }


  .action-icons i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 20px;
    color: #8c835b;
    cursor: pointer;
    line-height: 1;
    transition: color .2s ease;
  }

  .action-icons i:hover {
    color: #1b8354;
  }

 
  .tooltip {
    opacity: 0;
    transition: opacity .2s ease-out;
  }

  .tooltip.show {
    opacity: 1;
    transform: none;
  }



/*2nd Header*/



.bc, .icons_title {
    background-color: #F7FDF9;
}

  .sstitle {
    float: right;
    color: #121212;
}

  .bc>div, .icons_title>div {
    margin: 0 auto;
    padding: 15px 0;
}


/* ====== 2-Column Layout: Main 75% – Left 25% ====== */

.two-col-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

/* تأكد أننا نلغي أي float قديم من SharePoint أو CSS قديم */
.two-col-layout .main_conts,
.two-col-layout .left_conts {
    float: none !important;
}

/* Main content = 75% */
.two-col-layout .main_conts {
    /* flex: 0 0 75%; */
    /* max-width: 75%; */
 
   width: 75% !important;  
}

/* Left side menu = 25% */
.two-col-layout .left_conts {
    flex: 0 0 25%;
    /* max-width: 25%; */
    /* width: 25% !important; */
}

/* أي span clr قديم كان يستخدم للـ float clearfix نلغي ظهوره هنا */
.two-col-layout .clr.sp {
    display: none !important;
}

/* ====== Responsive: على الشاشات الصغيرة يخلوها تحت بعض ====== */
@media (max-width: 992px) {
    .two-col-layout {
        flex-direction: column;
    }

    .two-col-layout .main_conts,
    .two-col-layout .left_conts {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100% !important;
    }
}


/* ================================
   Left Menu Container
================================ */
.leftmenu {
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 20px 18px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    font-family: 'IBMPlexSans-Regular', sans-serif;
}

/* ================================
   Title "in this Section"
================================ */
.leftmenu .sm_title {
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6B7280;
    margin-bottom: 14px;
    font-weight: 600;
}

.leftmenu .sm_title span {
    font-weight: 400;
    color: #9CA3AF;
}


/* ===============================
   Page Content Main Wrapper
=================================*/
#PageContent {
    background-color: #FFFFFF;
    /* border: 1px solid #E5E7EB; */
    border-radius: 16px;
    /* padding: 0px 36px  36px  0px; */
    font-family: 'IBMPlexSans-Regular', sans-serif;
    color: #111827;
    line-height: 1.8;
    /* box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); */
}

/* ===============================
   Page Title
=================================*/
#PageContent .nd_title {
    font-size: 28px;
    font-family: 'IBMPlexSans-SemiBold';
    color: #0D121C;
    margin-bottom: 20px;
}

/* ===============================
   Image block (optional)
=================================*/
#PageContent .pageImage img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    margin-bottom: 18px;
}

/* ===============================
   Date (if visible)
=================================*/
#PageContent .news_date {
    font-size: 14px;
    color: #6B7280;
    margin-bottom: 10px;
}

/* ===============================
   Main Content Area
=================================*/
#PageContent .newscontent {
    font-size: 16px;
}

/* Remove weird spacing and zero-width spaces SharePoint injects */
.newscontent div, .newscontent p {
    word-break: break-word;
}

/* Remove forced justify */
.newscontent div[style*="text-align:justify"], .newscontent p[style*="text-align:justify"] {
    text-align: start !important;
}

/* Standard paragraph spacing */
#PageContent .newscontent p {
    margin: 0 0 16px;
}

 

/* Headings inside content */
#PageContent .newscontent strong,
#PageContent .newscontent b {
    font-family: 'IBMPlexSans-SemiBold';
    font-size: 18px;
    color: #0D121C;
}

/* Lists */
#PageContent .newscontent ul,
#PageContent .newscontent ol {
    margin: 0 0 18px 24px;
    padding: 0;
    line-height: 1.7;
}

#PageContent .newscontent li {
    margin-bottom: 8px;
}

/* Tables generated by SharePoint (if exist) */
#PageContent table {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
    margin-top: 50px;
}

#PageContent table td,
#PageContent table th {
    /* border: 1px solid #E5E7EB; */
    /* padding: 10px 14px; */
}

/* ===============================
   Responsive
=================================*/
@media (max-width: 768px) {
    #PageContent {
        padding: 20px 18px 26px;
        border-radius: 12px;
    }

    #PageContent .nd_title {
        font-size: 22px;
    }

    #PageContent .newscontent {
        font-size: 15px;
    }
}



/* ================================
   Remove SharePoint spacing
================================ */
.leftmenu ul.ms-core-listMenu-root,
.leftmenu ul.root {
    margin: 0;
    padding: 0;
    list-style: none;
}

.leftmenu li.static {
    margin-bottom: 4px;
    margin-left: 20px;
    margin-right: 20px;
}

/* Specificity: (0,1,1) */
span.menu-item-text {
    color: #074D31;
    font-size: 16px;
    font-family: 'IBMPlexSans-SemiBold';
}
/* ================================
   Left Menu Items
================================ */
.leftmenu a.ms-core-listMenu-item,
.leftmenu span.ms-core-listMenu-item {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none !important;
    font-size: 15px;
    color: #111827;
    transition: 
        background-color .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

/* Hover state */
.leftmenu a.ms-core-listMenu-item:hover {
    background-color: #F3F4F6;
    color: #0D121C;
}

/* ================================
   Selected Item (current page)
================================ */
.leftmenu li.static.selected a.ms-core-listMenu-item,
.leftmenu a.ms-core-listMenu-selected {
    background-color: #f7fdf9 !important;
    border: 1px solid #074D31 !important;
    color: #1B8354 !important;
    font-weight: 600;
}

/* ================================
   "Recent" item (not clickable)
================================ */
.leftmenu li.static span.ms-core-listMenu-item {
    background-color: #F9FAFB;
    color: #6B7280;
    cursor: default;
}

/* Padding for nested arrows SharePoint adds */
.leftmenu .additional-background {
    padding-left: 0 !important;
}

/* Hide flyout arrows (we don’t use them in the design) */
.leftmenu .ms-navedit-flyoutArrow {
    background: none !important;
}

/* ================================
   Responsive
================================ */
@media (max-width: 992px) {
    .leftmenu {
        padding: 16px 14px;
        border-radius: 12px;
    }

    .leftmenu a.ms-core-listMenu-item {
        font-size: 14px;
        padding: 8px 10px;
    }
}


/* Dark Mode Start here */


/* Dark Mode End Here */
/* ================================
   MOH News List – 2 cards per row
   ================================ */

/* Main wrapper inside PageContent */
.main_conts #PageContent .cbq-layout-main {
    margin: 0;               /* keep it inside the PageContent box */
    /* padding: 0 15px 15px; */    /* 15px gap from PageContent border */
    box-sizing: border-box;
}

/* Outer UL: use flex to layout the cards */
.main_conts #PageContent .dfwp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;               /* horizontal & vertical gap between cards */
    box-sizing: border-box;
    left: 0px;
    margin-left: 0px;
}

/* Inner UL that SharePoint generates – make it transparent in layout,
   so its <li> children act as direct flex items of dfwp-list */
.main_conts #PageContent .news_arch {
    list-style: none;
    margin: 0;
    padding: 0;
    display: contents;       /* key trick so li participate in flex parent */
}

/* Each news card item */
.main_conts #PageContent .news_arch > li {
    flex: 0 0 calc(50% - 12px);   /* 2 cards per row */
    max-width: calc(50% - 12px);  /* prevent overflow */
    box-sizing: border-box;
    display: flex;                /* so we can stretch the card inside */
    min-height: 80px;
    height: auto;
}

.news_details {
    padding-left: 0px !important;
}

/* Hover State */
.main_conts #PageContent .news_arch > li:hover {transform: translateY(-4px);box-shadow: 0 2px 6px rgba(0,0,0,0.06);}

/* Base */
.news_arch li {
    transition: background-color .25s ease, 
                transform .25s ease;
}



/* Optional: link highlight on hover */
.news_arch li:hover a .ntitle {
    color: #0d8c60 !important;
}



/* Make the whole <a> behave like a Bootstrap card */
.main_conts #PageContent .news_arch > li > a {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 16px;
    border: 1px solid #E5E7EB;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    text-decoration: none;
    width: 100%;
}

/* Image behaves like .card-img-top */
.main_conts #PageContent .news_arch > li > a > img {
    width: 100%;
    height: 260px;          /* adjust if you like */
    object-fit: cover;
    display: block;
}

/* Date + title area */
.main_conts #PageContent .news_arch > li > a .date,
.main_conts #PageContent .news_arch > li > a .ntitle {
    display: block;
    padding-inline: 18px;
}

.main_conts #PageContent .news_arch > li > a .date {
    padding-top: 16px;
    font-size: 14px;
    color: #6B7280;
}

.main_conts #PageContent .news_arch > li > a .ntitle {
    padding-bottom: 18px;
    font-weight: 600;
    font-size: 16px;
    color: #111827;
    padding-top: 18px;
}

/* Remove the old clearfix span if it shows */
.main_conts #PageContent .news_arch .clr {
    display: none !important;
}

/* Responsive: stack cards on small screens */
@media (max-width: 768px) {
    .main_conts #PageContent .news_arch > li {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* Hide the old pager images */
.PagerContainerTable td img {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* General style for pager buttons */
.PagerContainerTable a.PagerHyperlinkStyle {
    position: relative;
    /* padding: 15px 0px; */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===============================
   ICONS — FONT AWESOME
   =============================== */

/* First page (double-left) */
.PagerContainerTable a[title*="Back To First"]::after,
.PagerContainerTable a[title*="Go To Last"]::after {
    font-family: "Font Font Font Awesome 6 Pro6 Pro6 Pro";
    font-weight: 900;
    font-size: 16px;
    color: #1B8354;
    content: "\f100"; /* fa-angles-double-left */
}

/* Last page (double-right) */
.PagerContainerTable a[title*="Go To Last"]::after {
    content: "\f101"; /* fa-angles-double-right */
}

/* Previous page */
.PagerContainerTable a[title^=" Back To Page"]::after,
.PagerContainerTable a[title*=" Next To Page"]::after {
    font-family: "Font Font Font Awesome 6 Pro6 Pro6 Pro";
    font-weight: 900;
    font-size: 16px;
    color: #1B8354;
    content: "\f104"; /* fa-angle-left */
}

/* Next page */
.PagerContainerTable a[title*="Next To Page"]::after {
    content: "\f105"; /* fa-angle-right */
}

/* Hover effect */
.PagerContainerTable a.PagerHyperlinkStyle:hover::after {
    color: #145c38;
}



 /* ============================
   Global Form Fields – MOH / DGA
   ============================ */

:root {
  --field-radius: 8px;
  --field-bg: #FFFFFF;
  --field-bg-filled: #F9FAFB;
  --field-bg-pressed: #F3F4F6;

  --field-border: #DCE0E4;       /* Default */
  --field-border-hover: #C2C7CF; /* Hover */
  --field-border-focus: #1B8354; /* Focus (MOH green) */
  --field-border-error: #D92D20; /* Error Red */
  --field-text: #0D121C;
  --field-placeholder: #6B7280;
}

/* Base style – applies to all inputs & textareas */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="password"],
input[type="number"],
textarea,
select {
  box-sizing: border-box;
  width: 100%;
  font-family: 'IBMPlexSans-Regular', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--field-text);
  border-radius: var(--field-radius);
  border: 1px solid var(--field-border);
  background-color: var(--field-bg);
  padding: 10px 12px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
  /* margin-top: 15px; */
  /* margin-bottom: 15px; */
  border-radius: 4px !important;
}

 

/* 3. Input Fields (.TextBox) */
input.TextBox {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem; /* Bootstrap-like padding */
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #f8f9fa; /* Light grey background */
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 8px; /* Modern rounded corners */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    box-sizing: border-box; /* Fix width issues in tables */
    height: 45px;
    margin-bottom: 5px;
    /* margin-top: 15px; */
    /* margin-bottom: 15px; */
}

input.TextBox:focus {
    color: #212529;
    background-color: #fff;
    border-color: #006d5b; /* MOH Green Focus */
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(0, 109, 91, 0.25);
}




/* 5. Button (.Button) */
input.Button {
    display: inline-block;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: #006d5b; /* MOH Primary Green */
    border: 1px solid #006d5b;
    padding: 0.5rem 2rem;
    font-size: 1rem;
    border-radius: 4px;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
    /* margin-top: 20px; */
    width: auto;
    min-width: 150px;
    margin-left: 0px;
}

input.Button:hover {
    background-color: #005546; /* Darker Green on Hover */
    border-color: #004d40;
}

/* 6. Form Group Spacing */
/* Since the HTML uses tables and divs mixed, we target the containers */
.formgroup > div {
    margin-bottom: 20px;
}

/* 7. Results Area */
#div_result {
    margin-top: 25px;
    padding: 20px;
    background-color: #f1fcf9; /* Very light green background */
    border: 1px solid #d1e7dd;
    border-radius: 8px;
    color: #0f5132;
    line-height: 1.6;
}

/* Style the result text generated by JS */
#div_result b {
    font-size: 1.2rem;
    display: block;
    margin-bottom: 10px;
    color: #006d5b;
}

#div_result ul {
    padding-left: 20px;
    margin-top: 10px;
}

#div_result li {
    margin-bottom: 8px;
}

#div_result a {
    color: #006d5b;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
}

#div_result a:hover {
    border-bottom-color: #006d5b;
}

/* 8. Table Reset / Cleanup */
/* Force tables to behave more responsively inside the webpart */
[id^="ctl00_SPWebPartManager1"] table {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
}

[id^="ctl00_SPWebPartManager1"] td {
    vertical-align: top;
}



/* Placeholder */
input::placeholder,
textarea::placeholder {
  color: var(--field-placeholder);
  font-size: 14px;
}

/* ---------- States ---------- */

/* Hover (no error) */
input:hover:not(:disabled):not([aria-invalid="true"]),
textarea:hover:not(:disabled):not([aria-invalid="true"]),
select:hover:not(:disabled):not([aria-invalid="true"]) {
  border-color: var(--field-border-hover);
}

/* Focus */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--field-border-focus);
  box-shadow: 0 0 0 1px rgba(27, 131, 84, 0.25);
}

/* Pressed / Active */
input:active,
textarea:active,
select:active {
  background-color: var(--field-bg-pressed);
}

/* Disabled */
input:disabled,
textarea:disabled,
select:disabled {
  background-color: #F3F4F6;
  color: #9CA3AF;
  cursor: not-allowed;
}

/* ---------- Error States ---------- */
/* Mark error via .is-error or aria-invalid="true" */

input.is-error,
textarea.is-error,
select.is-error,
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--field-border-error);
}

input.is-error:focus-visible,
textarea.is-error:focus-visible,
select.is-error:focus-visible,
input[aria-invalid="true"]:focus-visible,
textarea[aria-invalid="true"]:focus-visible,
select[aria-invalid="true"]:focus-visible {
  border-color: var(--field-border-error);
  box-shadow: 0 0 0 1px rgba(217, 45, 32, 0.25);
}

/* Error + Hover */
input.is-error:hover,
textarea.is-error:hover,
select.is-error:hover,
input[aria-invalid="true"]:hover,
textarea[aria-invalid="true"]:hover,
select[aria-invalid="true"]:hover {
  border-color: #B42318; /* أغمق شوي للهوفر */
}

/* Error message text */
.field-error,
span.field-error,
span.DevHelperValCtrl {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--field-border-error) !important;
}

/* ---------- Filled variant (مثل الصور اللي فيها BG رمادي) ---------- */
/* استخدم الكلاس هذا إذا حاب الحقل يكون ممتلئ (filled) */

.input-filled,
.input-filled input,
.input-filled textarea,
.input-filled select {
  background-color: var(--field-bg-filled);
}

/* ---------- Underline style variant (آخر صورة) ---------- */
/* اختياري: حقل بخط سفلي فقط عند الضغط */

.input-underline {
  border-radius: 8px;
  border: 1px solid transparent;
  border-bottom-color: var(--field-border);
  background-color: var(--field-bg-filled);
}

.input-underline:hover {
  border-bottom-color: var(--field-border-hover);
}

.input-underline:focus-visible {
  outline: none;
  border-bottom-color: var(--field-border-focus);
  box-shadow: 0 2px 0 0 var(--field-border-focus);
}

 
 

 




.InVisible {
    margin-top: 50px;
    font-family: 'IBMPlexSans-SemiBold';
}

/* == Pagination – MOH / DGA style == */

.PagerContainerTable {
  border-collapse: separate;
  border-spacing: 0;
  margin: 24px auto;
}

/* خلي الصف نفسه flex عشان النمر تتوسّط */
.PagerContainerTable tr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

/* إخفاء "Page 1 Of 930" */
.PagerInfoCell {
  display: none;
  color: #6b7280;
  font-size: 13px;
  font-family: "IBMPlexSans-Regular", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.PagerOtherPageCells,
.PagerCurrentPageCell,
.PagerSSCCells {
  padding: 0;
}

 
.PagerHyperlinkStyle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 2px;
  border-radius: 999px;
  font-family: "IBMPlexSans-Medium", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1;
  color: #111827 !important;
  text-decoration: none !important;
  cursor: pointer;
  border: 0;
  transition: color 0.2s ease, background-color 0.2s ease,
    border-color 0.2s ease, transform 0.15s ease;
}

/* hover للأرقام العادية */
.PagerOtherPageCells .PagerHyperlinkStyle:hover,
.PagerSSCCells .PagerHyperlinkStyle:hover {
  /* color: #212529 !important; */
  /* background-color: #f3f4f6; */
}

/* الصفحة الحالية – رقم عادي مع underline أخضر */
.PagerCurrentPageCell .PagerHyperlinkStyle {
  position: relative;
  font-family: "IBMPlexSans-SemiBold";
}

.PagerCurrentPageCell .PagerHyperlinkStyle::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -6px;
  width: 70%;
  height: 3px;
  border-radius: 999px;
  background-color: #1b8354; /* MOH green */
}

/* بلوك ... (PagerSSCCells) – مربع بحواف دائرية وحدود داكنة */
.PagerSSCCells .PagerHyperlinkStyle {
  min-width: 40px;
  border-radius: 10px;
  border: 1px solid #111827;
}

/* اختياري: أول PagerSSCCell يظهر “...” بدل الرقم */
.PagerSSCCells:first-of-type .PagerHyperlinkStyle {
  color: transparent !important;
}
.PagerSSCCells:first-of-type .PagerHyperlinkStyle::before {
  content: "...";
  color: #111827;
}

/* أيقونات Previous / Next (الصور) */
.PagerOtherPageCells img {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  /* تحويل اللون لرمادي داكن قريب من التصميم */
  filter: brightness(0) saturate(100%) invert(12%) sepia(6%)
    saturate(490%) hue-rotate(177deg) brightness(96%) contrast(88%);
}

/* منع underline على hover لأي رابط داخل الـ pager */
.PagerContainerTable a.PagerHyperlinkStyle:hover {
  text-decoration: none !important;
}












/* ====== Wrapper container ====== */
.important-links-highlight-card-section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: stretch; /* أهم سطر – يجعل كل الكروت نفس الطول */
}

/* ====== Individual card block ====== */
.moh-highlight-card-important-links {
    flex: 0 0 calc(25% - 20px);
    max-width: calc(25% - 20px);
    display: flex;
    height: 100%;
}

/* ====== Card itself ====== */
.moh-highlight-card-important-links .moh-card-body {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    /* CHANGE: auto to 100% forces the card to fill the parent's height */
    height: 100%; 
    justify-content: space-between;
    transition: 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    /* OPTIONAL: You can keep min-height if you want a baseline size, 
       but height: 100% is the key for equality. */
    min-height: 360px; 
}

/* Hover */
.moh-highlight-card-important-links .moh-card-body:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* Typography */
.ccTitle {
    font-family: "IBMPlexSans-SemiBold";
    font-size: 18px !important;
    margin-bottom: 15px;
    color: #111827;
}

.ccDetails {
    font-family: "IBMPlexSans-Regular";
    font-size: 16px;
    color: #4b5563;
    line-height: 1.6;
    margin-top: auto !important;
}


/* ====== Responsive ====== */

/* Tablet – 2 per row */
@media (max-width: 992px) {
    .moh-highlight-card-important-links {
        flex: 0 0 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }
}

/* Mobile – 1 per row */
@media (max-width: 576px) {
    .moh-highlight-card-important-links {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


.col-md-12.important-links-title-section h1 {
font-size: 30px !important;
    font-weight: bold;
    margin-bottom: 8px;
    color:#161616;
}


/* ================================
   E-Participation Section (MOH / DGA)
   ================================ */

.eParticipationContainer {
    width: 100%;
    padding: 40px 20px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

/* Make the card stretch full width */
.eParticipationContainerrow {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.eParticipationContainerrow .col-md-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100%;
    display: block;

    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 2px 6px rgba(15,23,42,0.06);
}

/* Title */
.eTitle {
    font-family: 'IBMPlexSans-SemiBold';
    font-size: 32px;
    color: #0D121C;
    margin-bottom: 16px;
}

/* Details */
.eDetails {
    font-family: 'IBMPlexSans-Regular';
    font-size: 16px;
    color: #4B5563;
    line-height: 1.7;
    margin-bottom: 24px;
}

/* Button */
.eLink .btn {
    font-size: 16px !important;
    font-family: 'IBMPlexSans-Medium' !important;
    padding: 10px 18px !important;
    border-radius: 6px !important;
    border: 1px solid #1B8354 !important;
    color: #1B8354 !important;
    background: #FFFFFF !important;
}

.eLink .btn:hover {
    background: #ECFDF3 !important;
    color: #145C38 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .eParticipationContainerrow .col-md-12 {
        padding: 24px 20px;
    }

    .eTitle {
        font-size: 26px;
    }

    .eDetails {
        font-size: 15px;
        line-height: 1.6;
    }

    .eLink .btn {
        width: 100%;
        text-align: center;
    }
}



/* ================================
   Comments WebPart – Layout Wrapper
   ================================ */

.ms-webpart-zone.ms-fullWidth {
    width: 100%;
    /* padding-left: 120px; */
    /* padding-right: 120px; */
}

.ms-webpart-zone.ms-fullWidth .ms-webpart-chrome-fullWidth,
.ms-webpart-zone.ms-fullWidth .ms-WPBody {
    width: 100%;
}

/* Outer panel around the form */
.edit-mode-panel {
    margin-top: 24px;
}

/* ================================
   Comment Form Container
   ================================ */

.comments_form {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 24px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Each row wrapper */
.comments_form > div {
    /* margin-bottom: 10px; */
}

/* Remove old clr span effect */
.comments_form .clr {
    display: none !important;
}

/* ================================
   Inputs & Textarea
   ================================ */

.comments_form .TextBox,
.comments_form input[type="text"],
.comments_form textarea {
    width: 100% !important;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-size: 16px;
    font-family: 'IBMPlexSans-Regular', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #0D121C;
    background-color: #FFFFFF;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

/* Textarea specific */
#txtCommentText {
    min-height: 120px;
    resize: vertical;
}

/* Placeholder */
.comments_form .TextBox::placeholder,
.comments_form input[type="text"]::placeholder,
.comments_form textarea::placeholder {
    color: #9CA3AF;
    font-size: 14px;
}

/* Focus state */
.comments_form .TextBox:focus,
.comments_form input[type="text"]:focus,
.comments_form textarea:focus {
    outline: none;
    border-color: #1B8354;
    box-shadow: 0 0 0 1px #1B8354;
}

/* ================================
   Validation Messages
   ================================ */

.comments_form .DevHelperValCtrl,
#spnCommentEmail,
#spnCommentWriterName,
#captchaError {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    color: #B91C1C; /* Red-700 */
}

/* ================================
   Captcha Area
   ================================ */

.comments_form #captcha {
    margin-bottom: 8px;
}

.comments_form #captcha canvas {
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background-color: #F9FAFB;
}

/* Captcha input */
#cpatchaTextBox {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
}

/* ================================
   Submit Button
   ================================ */

.comments_form .Button {
    margin-top: 10px;
    align-self: flex-start; /* left in LTR, right in RTL by default container */
    padding: 10px 20px;
    font-size: 16px;
    font-family: 'IBMPlexSans-Medium', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    border-radius: 8px;
    border: 0;
    background-color: #1B8354;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease;
}

.comments_form .Button:hover {
    background-color: #166A45;
    box-shadow: 0 3px 8px rgba(22,106,69,0.35);
    transform: translateY(-1px);
}

.comments_form .Button:active {
    background-color: #104631;
    box-shadow: none;
    transform: translateY(0);
}

/* ================================
   Responsive
   ================================ */

@media (max-width: 768px) {
    .comments_form {
        padding: 18px 16px 16px;
    }

    .comments_form .Button {
        width: 100%;
        text-align: center;
    }
}



.arrows {
    display: flex;
    gap: 0px;
    pointer-events: auto;
}

/* Make aboutPage full width */
.container.aboutPage {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


.container.aboutPageContent  {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


.aboutPageContent {
    padding-right: 0px !important;
    padding-left: 0px !important;
}



.container .faq {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.FaqPageContent {
    padding-right: 0px !important;
    padding-left: 0px !important;
}



/* Base layout */
#categoriesTabs.tabs {
    display: flex;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
    border-bottom: 1px solid #ddd;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}

#categoriesTabs.tabs::-webkit-scrollbar {
    display: none;
}

/* Each tab */
#categoriesTabs.tabs li {
    padding: 12px 0;
    cursor: pointer;
    position: relative;
}

#categoriesTabs.tabs li a {
    text-decoration: none;
    font-size: 14px;
    color: #161616 !important;
    font-weight: 500;
    transition: color .25s ease;
}

/* Hover */
#categoriesTabs.tabs li:hover a {
    color: #1B8354;
}

/* ACTIVE state — matches your .tab-btn[aria-selected="true"] */
#categoriesTabs.tabs li.current a {
    color: #0d8c60 !important;
    font-weight: 600;
}

/* Main underline */
#categoriesTabs.tabs li.current {
    border-bottom: 3px solid #1B8354;
}

/* Center mini bar (same as ::after in your example) */
#categoriesTabs.tabs li.current::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3px;
    transform: translateX(-50%);
    width: 18px;
    height: 3px;
    background: #1B8354;
    border-radius: 2px;
}


#cats_container.product-details-area .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 25px;
}







#parentSectionsContainer .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}




/* Scope ONLY inside parentSectionsContainer */
#parentSectionsContainer .conSarchFilter {
    display: flex;
    align-items: center;
    gap: 0px;
    padding: 16px 24px;
    margin-bottom: 24px;
    background: #F8FAF9;
    border-radius: 12px;
    border: 1px solid #E6E8EB;
}

/* Search input container */
#parentSectionsContainer .conSarchFilter .has-search {
    position: relative;
}

#parentSectionsContainer .conSarchFilter .has-search .form-control {
    padding-left: 40px;
    border-radius: 8px;
    height: 42px;
}

/* Search icon */
#parentSectionsContainer .conSarchFilter .has-search .form-control-feedback {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8A8A8A;
    font-size: 16px;
}

/* Sorting buttons */
#parentSectionsContainer .conSarchFilter .SortingService .filter-btn {
    display: inline-block;
    padding: 8px;
    cursor: pointer;
    transition: 0.25s ease;
    color: #1B8354;
    border: 1px solid;
}

#parentSectionsContainer .conSarchFilter .SortingService .filter-btn:hover {
    color: #ffffff;
}

#parentSectionsContainer .conSarchFilter .SortingService i {
    font-size: 22px;
}




/* Scope ONLY cards inside parent-section-4 */
#parent-section-4 .service-item[data-parent-id="4"] .mb-3 span:nth-child(1) {
    /* Keep original (tag-green) */
    margin-bottom: 5px;
}

/* 2nd span — Patient */
#parent-section-4 .service-item[data-parent-id="4"] .mb-3 span:nth-child(2) {
    background-color: #EFF8FF !important;
    color: #1849A9 !important;
    padding: 5px !important;
    border-radius: 4px;
}

/* 3rd span — Women */
#parent-section-4 .service-item[data-parent-id="4"] .mb-3 span:nth-child(3) {
    background-color: #F1F5F9 !important;
    color: #475569 !important;
    padding: 5px !important;
    border-radius: 4px;
}

/* 4th span — keep original (tag-gray) */
#parent-section-4 .service-item[data-parent-id="4"] .mb-3 span:nth-child(4) {
    /* Keep default */
}


/* Make the whole text block behave as two-line layout */
.dfwp-list .event_block .econts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 3.6em; /* controls total height = 2 lines approx. */
    overflow: hidden;
}

/* Date – always one line */
.dfwp-list .event_block .Modifiedstyle {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #6B7280;
    font-size: 13px;
    font-weight: 400 !important;
}

/* Title – clamp to 2 lines */
.dfwp-list .event_block .econts > span:last-child {
    display: -webkit-box;
    -webkit-line-clamp: 2;           /* LIMIT TO 2 LINES */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}
/* Container: exactly 2 cards per row */
.dfwp-list .listblock {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns only */
    gap: 20px;
    margin-top: 20px;
}


/* 2 Cards Per Row */
.dfwp-list .listblock {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

/* Card */
.dfwp-list .event_block {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 18px;
    text-decoration: none !important;
    color: #0D121C;
    transition: all 0.25s ease;
    position: relative;
    min-height: 150px;
}

.dfwp-list .event_block:hover {
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    transform: translateY(-4px);
    border-color: #D1D5DB;
}

/* Icon — single image only */
.dfwp-list .event_block img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    margin-bottom: 12px;
}

/* Ensure second icon is completely ignored/hidden if exists */
.dfwp-list .event_block img:nth-child(2) {
    display: none !important;
}

/* Text Container */
.dfwp-list .event_block .econts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Date */
.dfwp-list .event_block .Modifiedstyle {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #6B7280;
    font-size: 13px;
    font-weight: 400 !important;
}

/* Title — 2 lines only */
.dfwp-list .event_block .econts > span:last-child {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

/* Remove unused span */
.dfwp-list .clr {
    display: none !important;
}

/* Mobile → 1 card per row */
@media (max-width: 767px) {
    .dfwp-list .listblock {
        grid-template-columns: 1fr !important;
    }
}


.main_conts_full   {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100% !important;
}


.container-lg {
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


.container.eParticipationContainer
 {
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
}



/* --- Health Tools Carousel Section --- */

.mohhealthtools-page {
    padding: 40px 0;
    font-family: 'IBMPlexSans-Regular', sans-serif;
}

/* Wrapper to hold buttons and track */
.carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

/* Navigation Buttons */
.carousel-btn {
    background-color: #fff;
    border: 1px solid #E5E7EB;
    color: #1B8354; /* MOH Green */
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    width: 40px;
    height: 40px;
}

.carousel-btn:hover {
    background-color: #1B8354;
    color: #fff;
    border-color: #1B8354;
}

/* Main Viewport Container */
.carousel-container {
    overflow: hidden;
    width: 100%;
    padding: 10px 0; /* Space for shadow */
}

/* Moving Track */
.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 20px;
    will-change: transform;
}

/* Individual Slide Wrapper */
.carousel-slide {
    flex: 0 0 auto;
    width: 280px; /* Fixed width for cards */
    display: flex;
}

/* Link Wrapper */
.custom-card {
    text-decoration: none;
    color: inherit;
    width: 100%;
    display: block;
}

.custom-card:hover {
    text-decoration: none;
}

/* Card Styling */
.mohhealthtools-page .card {
    background-color: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    min-height: 320px;
    height: 100%;
    padding: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mohhealthtools-page .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    border-color: #1B8354;
}

/* Logo/Icon Container */
.econsultationlogo {
    width: 60px;
    height: 60px;
    background-color: #F3FCF6; /* Light Green Tint */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.econsultationimg {
    width: 32px;
    height: 32px;
    object-fit: contain;
    /* Ensure icons are visible - if SVG is black, you might want to filter it to green */
    filter: invert(35%) sepia(19%) saturate(1663%) hue-rotate(103deg) brightness(93%) contrast(86%); /* Matches #1B8354 */
}

/* Card Title */
.mohhealthtools-page .card-title {
    color: #0D121C;
    font-family: 'IBMPlexSans-SemiBold', sans-serif;
    font-size: 18px;
    margin-bottom: 12px;
    line-height: 1.4;
    text-align: left;
}

/* Card Body Text */
.mohhealthtools-page .card-text {
    color: #6B7280; /* Muted text */
    font-size: 14px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Limit text lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .carousel-slide {
        width: 100%; /* Full width on mobile */
        flex: 0 0 100%;
    }
    
    .carousel-track {
        gap: 10px;
    }
}



.container.mohhealthtools-page {

    padding-left: 0 !important;
    padding-right: 0 !important;
}





.main_conts #PageContent .announcements {
    list-style: none;
    margin: 0;
    padding: 0;
    display: contents;
}


.main_conts #PageContent .announcements > li > a {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 16px;
    border: 1px solid #E5E7EB;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    text-decoration: none;
    width: 100%;
    background: #ffffff;
}


.main_conts #PageContent .announcements > li > a > img {
    width: 100%;
    height: 260px;
    object-fit: contain;
    display: block;
    background-color: #f3f3f3;
}

.main_conts #PageContent .announcements> li > a .ntitle {
    padding-bottom: 18px;
    font-weight: 600;
    font-size: 16px;
    color: #111827;
    padding-top: 18px;
    background: #ffffff;
}







.main_conts #PageContent .AwarenessPlateform {
    list-style: none;
    margin: 0;
    padding: 0;
    display: contents;
}


.main_conts #PageContent .AwarenessPlateform > li > a {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 16px;
    border: 1px solid #E5E7EB;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    text-decoration: none;
    width: 100%;
 
}


.main_conts #PageContent .AwarenessPlateform > li > a > img {
    width: 100%;
    height: 260px;
    object-fit: contain;
    display: block;
  background-color: #f3f3f3;
}

.main_conts #PageContent .AwarenessPlateform> li > a .ntitle {
    padding-bottom: 18px;
    font-weight: 600;
    font-size: 16px;
    color: #111827;
    padding-top: 18px;
    background: #ffffff;
}





.main_conts #PageContent .AwarenessPlateform {
    list-style: none;
    margin: 0;
    padding: 0;
    display: contents;
}


.main_conts #PageContent .AwarenessPlateform > li > a {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 16px;
    border: 1px solid #E5E7EB;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    text-decoration: none;
    width: 100%;
 
}


.main_conts #PageContent .AwarenessPlateform > li > a > img {
    width: 100%;
    height: 260px;
    object-fit: contain;
    display: block;
}

.main_conts #PageContent .AwarenessPlateform> li > a .ntitle {
    padding-bottom: 18px;
    font-weight: 600;
    font-size: 16px;
    color: #111827;
    padding-top: 18px;
    background: #ffffff;
}


.main_conts #PageContent .imagelinks > li > a > img {
    width: 100%;
    height: 260px;
    object-fit: scale-down;
    display: block;
  background-color: #f3f3f3;
}


/* =========================================
   MOH DGA Apps Section Styling
   ========================================= */

/* 1. Global Section Settings */
.MOHApps-Ideas-section {
    padding: 4rem 0;
    background-color: #ffffff; /* Clean white background per DGA style */
    font-family: 'IBM Plex Sans', 'IBM Plex Sans Arabic', sans-serif; /* Matches your uploaded font */
    color: #161616161616;
    overflow: hidden;
}

/* 2. Typography - Matching DGA Headers */
.MOHApps-Ideas-title-section h1 {
    color: #0b5e48; /* Official MOH Primary Green */
    font-size: 2.5rem; /* ~40px */
    font-weight: 700; /* Bold */
    margin-bottom: 1.5rem;
    position: relative;
    line-height: 1.2;
    font-size: 24px !important;
}

/* Sub-headline / Description Styling */
.MOHApps-Ideas-details-section h3 {
    font-size: 1.125rem; /* 18px - Standard body lead size */
    color: #555555;
    font-weight: 400; /* Light/Regular per IBM Plex Light */
    line-height: 1.8;
    margin-bottom: 3rem;
    /* max-width: 900px; */
    font-size: 16px !important;
}

/* 3. Main App Image */
.MOHApps-Ideas-image-section {
    text-align: center;
    margin-bottom: 40px;
}

.mohapplogoMain {
    max-width: 100%;
    height: auto;
    max-height: 400px;
    border-radius: 16px; /* Smooth corners */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Subtle shadow matching DGA cards */
    border: 1px solid #e5e5e5;
      max-width: 250px;
}

/* 4. Cards Container (Fixing the Grid) */
/* The provided HTML lacks a '.row' parent for the cols, so we force flexbox behavior here */
.MOHApps-Ideas-highlight-card-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Align left */
    gap: 24px; /* Space between cards */
    margin-top: 20px;
    margin-bottom: 60px; /* Spacing between app sections */
}

/* 5. Store Card Styling */
.moh-highlight-card {
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    
    /* Flex sizing to fix col-md-4 issues if bootstrap css is missing/conflicting */
    flex: 0 0 calc(33.161616% - 16px); 
    max-width: calc(33.161616% - 16px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
}

/* Hover Effect - MOH Green Border */
.moh-highlight-card:hover, 
.moh-highlight-card:focus {
    transform: translateY(-5px);
    outline: none;
}

/* Card Links */
.moh-highlight-card > a {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
}

.mohapplogo {
    height: 45px; /* Fixed height for store logos */
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* 6. Card Body & Stats */
.moh-app-card-body {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
}

/* Stats Groups (Download & Rating) */
.appDownload, .appRating {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

/* Icons inside stats */
.imgappDownload {
    width: 45px;
    height: 45px;
    filter: invert(31%) sepia(8%) saturate(23%) hue-rotate(314deg) brightness(97%) contrast(88%); /* Grey icon color */
}

/* Text inside stats */
.ccTitleappd {
    display: flex;
    flex-direction: column;
}

.ccTitle {
    font-size: 0.75rem; /* 12px */
    color: #1b8354;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 0 2px 0;
    letter-spacing: 0.5px;
}

.appd {
    font-size: 1rem; /* 16px */
    color: #0b5e48; /* MOH Green for numbers */
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

/* 7. Separator for multiple apps */
.MOHApps-Ideas-content-section {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 40px;
}

.MOHApps-Ideas-content-section:last-child {
    border-bottom: none;
}

/* =========================================
   Responsive Design
   ========================================= */
@media (max-width: 991px) {
    .moh-highlight-card {
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
}

@media (max-width: 768px) {
    .MOHApps-Ideas-title-section h1 {
        font-size: 2rem;
    }
    
    /* Stack cards on mobile */
    .MOHApps-Ideas-highlight-card-section {
        flex-direction: column;
    }

    .moh-highlight-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .mohapplogoMain {
        max-height: 250px;
    }
}



/* =========================================
   5. Media Gallery (WebPart Zone)
   ========================================= */
/* Reset SharePoint default spacing */
.ms-webpart-zone, 
.ms-webpart-cell-vertical {
    display: block !important;
}

/* Gallery Grid Container */
ul.pg {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 0;
    margin: 30px 0 0 0;
    list-style: none;
}

/* Gallery Item Card */
ul.pg li {
    width: calc(33.161616% - 10px); /* 3 items per row */
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

ul.pg li:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* Link Container */
ul.pg li a.youtube {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* Gallery Image */
ul.pg li a.youtube img {
    width: 100%;
    height: 150px; /* Fixed height for consistency */
    object-fit: cover;
    border-bottom: 1px solid #f0f0f0;
}

/* Gallery Text */
ul.pg li span {
    padding: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    direction: rtl;
    line-height: 1.4;
    background-color: #fff;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gallery Responsive Breakpoints */
@media (max-width: 768px) {
    ul.pg li {
        width: calc(50% - 8px); /* 2 items per row on tablet */
    }
}

@media (max-width: 480px) {
    ul.pg li {
        width: 100%; /* 1 item per row on mobile */
    }
}

/* Utility to hide SharePoint spacer divs */
.ms-clear {
    display: none;
}

.nd_TopSlider {
    font-size: 35px;
    color: #0d8c60;
    font-weight: 600;
}


/* =========================================
   MOH Health Tools Section CSS
   Target: .HealthTools & .htoolan
   ========================================= */

/* --- 1. Main Container --- */
.HealthTools {
  padding: 40px 0;
  font-family: 'IBMPlexSans-Regular', sans-serif;
  width: 100%;
}

/* --- 2. Grid Adjustments --- */
/* Force row to behave as a flex container */
.HealthTools .row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
  margin-left: -10px;
}

/* Column Sizing (4 per row on desktop) */
.HealthTools .col-md-3 {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0 10px;
  margin-bottom: 20px;
  box-sizing: border-box;
  display: flex; /* Ensures card stretches to full height of column */
}

/* --- 3. Tool Card (.htoolan) --- */
.htoolan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Align content to top */
  text-align: center;
  background-color: #ffffff;
  border: 1px solid #E5E7EB; /* Light gray border */
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  height: 100%; /* Fill the column height */
  text-decoration: none !important; /* Remove underline */
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

/* Hover Effect */
.htoolan:hover {
  transform: translateY(-5px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #DBDFE3 !important; /* MOH Green */
}

/* Focus State for Accessibility */
.htoolan:focus-visible {
  outline: 3px solid #1B8354;
  outline-offset: 2px;
  border-radius: 12px;
}

/* --- 4. Tool Icon/Image (.htoolimg) --- */
.htoolimg {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
  /* Optional: Background circle behind icon */
  padding: 10px;
  background-color: #ECFDF3; /* Very light green tint */
  border-radius: 50%;
  border: 1px solid #E6F7EE;
}

/* Icon Hover Animation */
.htoolan:hover .htoolimg {
  /* transform: scale(1.1); */
  background-color: #ECFDF3;
  /* border-color: #1B8354; */
}

/* --- 5. Tool Title (.ntitle) --- */
.ntitle {
  font-family: 'IBMPlexSans-SemiBold', sans-serif;
  font-size: 16px !important;
  color: #0D121C;
  line-height: 1.4;
  margin-top: auto; /* Pushes text to align if heights differ */
  margin-bottom: auto;
  transition: color 0.2s ease;
  display: block;
}

.htoolan:hover .ntitle {
  color: #1B8354; /* MOH Green */
}

/* --- 6. Utilities --- */
/* Hide SharePoint spacer div */
.HealthTools .clr {
  display: none !important;
}

/* --- 7. Responsive Design --- */

/* Tablet: 3 cards per row */
@media (max-width: 992px) {
  .HealthTools .col-md-3 {
    flex: 0 0 33.161616%;
    max-width: 33.161616%;
  }
}

/* Small Tablet / Large Mobile: 2 cards per row */
@media (max-width: 768px) {
  .HealthTools .col-md-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  .htoolan {
    padding: 16px;
  }
  
  .htoolimg {
    width: 50px;
    height: 50px;
  }
  
  .ntitle {
    font-size: 14px !important;
  }
}

/* Mobile: 1 card per row */
@media (max-width: 576px) {
  .HealthTools .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  /* Horizontal Layout on Mobile (Icon Left, Text Right) */
  .htoolan {
    flex-direction: row; 
    text-align: left;
    align-items: center;
    gap: 16px;
    height: auto; /* Allow auto height on mobile */
  }

  .htoolimg {
    margin-bottom: 0;
    flex-shrink: 0; /* Prevent icon shrinking */
  }

  .ntitle {
    margin: 0;
  }
}





/* =========================================
   Container & Grid Layout
   ========================================= */
.awarenesscontainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  padding: 40px 15px;
  /* max-width: 1200px; */
  margin: 0 auto;
  font-family: 'IBMPlexSans', sans-serif; /* Matching font from your assets */
}

/* =========================================
   3D Flip Card Configuration
   ========================================= */
.awarenesscontainer .card {
  width: 300px;
  height: 420px;
  perspective: 1000px; /* Essential for 3D effect */
  border: none;
  background-color: transparent;
  cursor: pointer;
  margin-bottom: 20px;
}

/* Common styles for Front and Back faces */
.awarenesscontainer .front,
.awarenesscontainer .back {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  backface-visibility: hidden; /* Hides the back of the element when rotated */
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
  overflow: hidden;
}

/* =========================================
   Front Face Styling (Image & Title)
   ========================================= */
.awarenesscontainer .front {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end; /* Text at bottom */
  justify-content: center;
  transform: rotateY(0deg);
  z-index: 2;
}

/* Gradient Overlay for text readability on images */
.awarenesscontainer .front::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 50%);
  z-index: 1;
}

.awarenesscontainer .front p {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  letter-spacing: 0.5px;
}

/* =========================================
   Back Face Styling (List & Content)
   ========================================= */
.awarenesscontainer .back {
  background-color: #fff;
  transform: rotateY(180deg); /* Start flipped */
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid #e0e0e0;
  overflow: hidden !important;
}

/* Scrollable container for the list links */
.awarenesscontainer .back > div {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.awarenesscontainer .back ul {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
  overflow-y: auto; /* Allows scrolling if list is long */
  margin-bottom: 15px;
  
  /* Scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: #ccc #f1f1f1;
}

.awarenesscontainer .back ul::-webkit-scrollbar {
  width: 6px;
}
.awarenesscontainer .back ul::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}

/* Link Styling */
.awarenesscontainer .back a {
  display: block;
  text-decoration: none;
  /* padding: 2px 0px; */
  border-bottom: 1px solid #f0f0f0;
  /* transition: all 0.3s ease; */
  padding-top: 10px;
}

.awarenesscontainer .back a:hover {
  /* transform: translateX(5px); */
}

.awarenesscontainer .back a:last-child {
  border-bottom: none;
}

.ntitle {
  display: block;
  color: #161616;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: normal;
  /* margin-bottom: 6px; */
}

.awarenesscontainer .back a:hover .ntitle {
  color: #007c5a; /* MOH Green */
}

/* Meta info (comments/views - mostly hidden in HTML but styled just in case) */
.nfbar {
  font-size: 0.75rem;
  color: #999;
}

/* =========================================
   Button Styling
   ========================================= */
.awarenesscontainer .button {
  background-color: #007c5a; /* MOH Primary Green */
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 0;
  width: 100%;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-top: auto;
}

.awarenesscontainer .button:hover {
  background-color: #005a41; /* Darker Green */
}

.awarenesscontainer .button:active {
  transform: scale(0.98);
}

/* =========================================
   Hover Interaction (The Flip)
   ========================================= */
.awarenesscontainer .card:hover .front {
  transform: rotateY(-180deg);
}

.awarenesscontainer .card:hover .back {
  transform: rotateY(0deg);
}






/* =========================================
   Main Slider Container
   ========================================= */
.mainslider {
  position: relative;
  width: 100%;
  max-width: 1920px; /* Limit max width for very large screens */
  margin: 0 auto;
  background-color: #f8f9fa; /* Light background as fallback */
  overflow: hidden; /* Hide overflow from slides */
}

/* =========================================
   Slick Slider Core Styles
   ========================================= */
.m_slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.m_slider .slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  /* Set a consistent height for the slider area */
  height: 500px !important; 
}

.m_slider .slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================
   Slide Content Styling
   ========================================= */
.m_slider .slick-slide {
  display: block;
  height: 500px; /* Match slick-list height */
  position: relative;
  outline: none; /* Remove focus outline */
}

/* Image Styling - Critical for responsiveness */
.m_slider .slick-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures image covers area without distortion */
  object-position: center;
  display: block;
}

/* Link Styling */
.m_slider .slick-slide a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  outline: none;
}

/* Visually Hidden Text (Accessibility) */
.m_slider .slick-slide strong {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================
   Navigation Arrows Styling
   ========================================= */
.m_slider .slick-prev,
.m_slider .slick-next {
  position: absolute;
  display: block;
  width: 40px;
  height: 40px;
  padding: 10px; /* Padding for the arrow icon inside */
  cursor: pointer;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  outline: none;
  background-color: #1B8354 !important; /* Semi-transparent white bg */
  border-radius: 50%; /* Circular buttons */
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  box-sizing: border-box;
}

/* Hover effect for arrows */
.m_slider .slick-prev:hover,
.m_slider .slick-next:hover {
  background-color: #007c5a; /* MOH Green */
  opacity: 1;
  /* If the arrow icons are black images, invert them to white on hover */
  filter: brightness(0) invert(1); 
}

/* Positioning */
.m_slider .slick-prev {
  left: 20px; /* Left side */
}

.m_slider .slick-next {
  right: 20px; /* Right side */
}

/* =========================================
   Responsive Adjustments
   ========================================= */
@media (max-width: 992px) {
  .m_slider .slick-list,
  .m_slider .slick-slide {
    height: 400px !important;
  }
}

@media (max-width: 768px) {
  .m_slider .slick-list,
  .m_slider .slick-slide {
    height: 300px !important;
  }
  
  /* Smaller arrows on mobile */
  .m_slider .slick-prev,
  .m_slider .slick-next {
    width: 32px;
    height: 32px;
    padding: 8px;
  }
}

@media (max-width: 576px) {
  .m_slider .slick-list,
  .m_slider .slick-slide {
    height: 220px !important;
  }
}


/* ============================
   MOH – Awareness Services CSS
   Target: #servicesSections
   Paste AFTER Slick and theme CSS
   ============================ */

/* --- theme vars --- */
:root{
  --moh-green: #14573A;
  --muted: #6b7280;
  --surface: #fff;
  --panel: #F7FDF9;
  --border: #E5E7EB;
  --radius: 12px;
  --gap: 16px;
  --shadow: 0 8px 22px rgba(13,18,28,0.06);
}

/* --- wrapper --- */
#servicesSections.services.container {
  font-family: "IBMPlexSans-Regular", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  padding: 20px;
  box-sizing: border-box;
  color: #0D121C;
  background: #f7fdf9;
}

/* Title */
#servicesSections > div > strong{
  display:block;
  font-size: 26px;
  font-weight:700;
  margin-bottom:12px;
}
#servicesSections > div > strong span { color: var(--moh-green); }

/* clearfix util */
#servicesSections .clr{ clear: both; display:block; height:0; }

/* --- Subtabs --- */
#servicesSections .subtabs{
  list-style:none;
  display:flex;
  gap:var(--gap);
  padding:0;
  margin:0 0 14px 0;
  border-bottom:2px solid var(--border);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
#servicesSections .subtabs li{
  padding:10px 14px;
  font-weight:600;
  color:#344054;
  cursor:pointer;
  white-space:nowrap;
  border-bottom:3px solid transparent;
  transition: color .18s, border-color .18s, background .12s;
  border-radius:8px 8px 0 0;
}
#servicesSections .subtabs li:hover{color:var(--moh-green);}
#servicesSections .subtabs li.subcurrent{color:var(--moh-green);border-bottom-color:var(--moh-green);}

/* --- Subbox / sliders --- */
#servicesSections .subbox{ display:none; padding-top:12px; }
#servicesSections .subbox.visible{ display:block; }

/* generic slider container (Slick) */
#servicesSections .mobile_services,
#servicesSections .allservices_slider,
#servicesSections .m_slider {
  box-sizing: border-box;
}

/* --- MOBILE HORIZONTAL SLIDER (MobileView) --- */
/* Force slick list to be a stable viewport and override inline sizes */
#servicesSections .mobile_services .slick-list {
  overflow: hidden !important;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  width: 100% !important;
  padding: 8px 0;
}

/* Make track behave horizontally and not shrink slides */
#servicesSections .mobile_services .slick-track {
  display:flex !important;
  gap: 12px;
  align-items: center;
  width: auto !important;
  transform: none !important; /* if you see jumpy behavior, remove this */
}

/* Each mobile slide fills viewport width (one per view) */
#servicesSections .mobile_services .slick-slide {
  width: 100% !important;
  min-width: 240px;
  display:flex !important;
  justify-content:center;
  box-sizing:border-box;
}

/* Slide anchor */
#servicesSections .mobile_services .slick-slide a {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:inherit;
  padding:12px;
}

/* Mobile slide image */
#servicesSections .mobile_services .slick-slide img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
  display:block;
  margin-bottom:10px;
}

/* Slide caption */
#servicesSections .mobile_services .slick-slide span {
  font-size: 15px;
  text-align:center;
  color:#0D121C;
  display:block;
}

/* Arrows (mobile carousel) */
#servicesSections .mobile_services .slick-prev,
#servicesSections .mobile_services .slick-next{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:40px;
  height:40px;
  background: rgba(255,255,255,0.95);
  border-radius:50%;
  border:1px solid var(--border);
  box-shadow: 0 6px 18px rgba(13,18,28,0.08);
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
#servicesSections .mobile_services .slick-prev{ left:8px; }
#servicesSections .mobile_services .slick-next{ right:8px; }

/* make arrow images scale */
#servicesSections .mobile_services .slick-prev img,
#servicesSections .mobile_services .slick-next img{
  width:18px; height:18px; object-fit:contain;
}

/* disable pointer events on clones */
#servicesSections .mobile_services .slick-cloned { pointer-events:none; }

/* --- DESKTOP ICON SLIDER (.allservices_slider) --- */
/* Slick track fix: keep items in a single row */
#servicesSections .allservices_slider .slick-track {
  display:flex !important;
  gap: 14px;
  align-items: center;
  width: auto !important;
}

/* Slide sizes (icons) — force sensible default and override tiny inline widths */
#servicesSections .allservices_slider .slick-slide {
  width: 220px !important;
  min-width: 220px;
  max-width: 220px;
  box-sizing: border-box;
  list-style:none;
  border-radius:10px;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow: 0 6px 18px rgba(13,18,28,0.04);
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:6px;
  height: 220px;
}

/* tiny items sometimes get inline width: force image visible */
#servicesSections .allservices_slider .slick-slide img {
  width:100%;
  height:120px;
  object-fit:cover;
  border-radius:10px;
  display:block;
}

/* loader fallback */
#servicesSections .allservices_slider li.loader div,
#servicesSections .mobile_services li.loader div {
  width:36px; height:36px; border-radius:50%;
  border:4px solid var(--moh-green); border-top-color:transparent;
  animation: servicesSpin .7s linear infinite;
  margin:30px auto;
}
@keyframes servicesSpin { to { transform: rotate(360deg); } }

/* ensure anchors in allservices_slider cover full card */
#servicesSections .allservices_slider .slick-slide a,
#servicesSections .allservices_slider .slick-slide a img { display:block; width:100%; height:100%; }

/* --- Responsiveness --- */
@media (max-width: 992px) {
  /* Desktop icon slider becomes 2-up */
  #servicesSections .allservices_slider .slick-slide { width: 46% !important; min-width: auto; }
  /* Mobile carousel: keep arrows but reduce size */
  #servicesSections .mobile_services .slick-prev,
  #servicesSections .mobile_services .slick-next { width:36px; height:36px; }
}

@media (max-width: 576px) {
  #servicesSections .allservices_slider .slick-slide { width: 100% !important; }
  #servicesSections .mobile_services .slick-slide img { width:100px; height:100px; }
}

/* --- Accessibility & polish --- */
#servicesSections .mobile_services .slick-slide a:focus,
#servicesSections .allservices_slider .slick-slide a:focus {
  outline: 3px solid rgba(27,131,84,0.14);
  outline-offset: 6px;
  border-radius: 10px;
}

/* RTL support */
[dir="rtl"] #servicesSections .mobile_services .slick-prev { right:8px; left:auto; transform:none; }
[dir="rtl"] #servicesSections .mobile_services .slick-next { left:8px; right:auto; transform:none; }
[dir="rtl"] #servicesSections .subtabs { direction: rtl; }

/* small debug utility (remove when done) */
#servicesSections.debug { outline: 2px dashed rgba(27,131,84,0.12); }
/* ============================
   Visibility Rules
   Show mobile_services only on mobile
   Hide on tablets/desktops
   ============================ */

/* Desktop & Tablet (≥ 768px): hide mobile slider */
@media (min-width: 768px) {
  #servicesSections .mobile_services {
    display: none !important;
  }
}

/* Mobile (< 768px): show mobile slider, hide desktop content */
@media (max-width: 767px) {
  #servicesSections .mobile_services {
    display: block !important;
  }

  /* hide desktop subtabs + desktop sliders */
  #servicesSections .section.awarenesscontainer {
    display: none !important;
  }
}

 


.allservices_slider, .slick-initialized, .slick-slider {
    padding-left: 0px;
}



/* Ensure the list container behaves as a flex row */
ul.pg {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;       /* Space between items */
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Ensure list items sit side-by-side */
ul.pg li {
  flex: 0 0 auto !important;  /* Do not stretch, just fit content */
  display: block !important;
  margin: 0 !important;
}

/* Style the link card inside */
ul.pg li a.youtube {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 160px !important;    /* Fixed width for uniform look */
  text-decoration: none !important;
  background: #fff !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  padding: 12px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Hover Effect */
ul.pg li a.youtube:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  border-color: #E5E7EB !important; /* MOH Green */
}

/* Image styling */
ul.pg li a.youtube img {
  width: 100% !important;
  height: 100px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
}

/* Text styling */
ul.pg li a.youtube span {
  font-family: 'IBMPlexSans-Medium', sans-serif !important;
  font-size: 14px !important;
  color: #161616 !important;
  text-align: center !important;
  line-height: 1.3 !important;
}


/* =========================================
   MOH Health Tools Section CSS
   Target: .HealthTools & .htoolan
   ========================================= */

/* --- 1. Main Container --- */
.HealthTools {
  padding: 40px 0;
  font-family: 'IBMPlexSans-Regular', sans-serif;
  width: 100%;
}

/* --- 2. Grid Adjustments --- */
/* Force row to behave as a flex container */
.HealthTools .row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
  margin-left: -10px;
}

/* Column Sizing (4 per row on desktop) */
.HealthTools .col-md-3 {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0 10px;
  margin-bottom: 20px;
  box-sizing: border-box;
  display: flex; /* Ensures card stretches to full height of column */
}

/* --- 3. Tool Card (.htoolan) --- */
.htoolan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Align content to top */
  text-align: center;
  background-color: #ffffff;
  border: 1px solid #E5E7EB; /* Light gray border */
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  height: 100%; /* Fill the column height */
  text-decoration: none !important; /* Remove underline */
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

/* Hover Effect */
.htoolan:hover {
  transform: translateY(-5px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #DBDFE3 !important; /* MOH Green */
}

/* Focus State for Accessibility */
.htoolan:focus-visible {
  outline: 3px solid #1B8354;
  outline-offset: 2px;
  border-radius: 12px;
}

/* --- 4. Tool Icon/Image (.htoolimg) --- */
.htoolimg {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
  /* Optional: Background circle behind icon */
  padding: 10px;
  background-color: #ECFDF3; /* Very light green tint */
  border-radius: 50%;
  border: 1px solid #E6F7EE;
}

/* Icon Hover Animation */
.htoolan:hover .htoolimg {
  /* transform: scale(1.1); */
  background-color: #ECFDF3;
  /* border-color: #1B8354; */
}

/* --- 5. Tool Title (.ntitle) --- */
.ntitle {
  font-family: 'IBMPlexSans-SemiBold', sans-serif;
  font-size: 16px !important;
  color: #0D121C;
  line-height: 1.4;
  margin-top: auto; /* Pushes text to align if heights differ */
  margin-bottom: auto;
  transition: color 0.2s ease;
  display: block;
}

.htoolan:hover .ntitle {
  color: #1B8354; /* MOH Green */
}

/* --- 6. Utilities --- */
/* Hide SharePoint spacer div */
.HealthTools .clr {
  display: none !important;
}

/* --- 7. Responsive Design --- */

/* Tablet: 3 cards per row */
@media (max-width: 992px) {
  .HealthTools .col-md-3 {
    flex: 0 0 33.161616%;
    max-width: 33.161616%;
  }
}

/* Small Tablet / Large Mobile: 2 cards per row */
@media (max-width: 768px) {
  .HealthTools .col-md-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  .htoolan {
    padding: 16px;
  }
  
  .htoolimg {
    width: 50px;
    height: 50px;
  }
  
  .ntitle {
    font-size: 14px !important;
  }
}

/* Mobile: 1 card per row */
@media (max-width: 576px) {
  .HealthTools .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  /* Horizontal Layout on Mobile (Icon Left, Text Right) */
  .htoolan {
    flex-direction: row; 
    text-align: left;
    align-items: center;
    gap: 16px;
    height: auto; /* Allow auto height on mobile */
  }

  .htoolimg {
    margin-bottom: 0;
    flex-shrink: 0; /* Prevent icon shrinking */
  }

  .ntitle {
    margin: 0;
  }
}

/* =========================================================
   CONTACT US – SYSTEM-LEVEL STYLESHEET
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --green-main: #1B8354;
  --green-soft: #ECFDF3;

  --text-main: #0D121C;
  --text-subtle: #6B7280;

  --border-soft: #E5E7EB;
  --surface: #FFFFFF;

  --radius-lg: 20px;
  --radius-md: 14px;

  --shadow-soft: 0 8px 28px rgba(0,0,0,.06);
  --shadow-hover: 0 14px 40px rgba(0,0,0,.10);

  --ease: cubic-bezier(.4,0,.2,1);
}

/* ---------- Page ---------- */
.two-col-layout {
  background: #fff;
}

.nd_title {
  font-size: 32px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 40px;
}

/* ---------- Grid normalization ---------- */
.row {
  display: flex;
  flex-wrap: wrap;
}

.mohCards {
  display: flex;
  flex-direction: column;
}

/* ---------- Card header ---------- */
.holderStaTitel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.section-sub-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
}

/* ---------- Icons ---------- */
.iconSVG {
  width: 45px !important;
  height: auto;
}

.holderStaTitel.mb-3 {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-soft);
}

.shadow.p-3.mb-3.bg-white.rounded.accordion-group {
    box-shadow: none !important;
}
/* ---------- Card body ---------- */
.holderStatistic {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-soft);
  transition:
    transform .35s var(--ease),
    box-shadow .35s var(--ease);
}

.mohCards:hover .holderStatistic {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.holderStatistic hr {
  border: none;
  height: 1px;
  background: var(--border-soft);
  margin: 18px 0;
}

/* ---------- Text ---------- */
.moh-default .text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-subtle);
}

.text-golden {
  color: #9A7D2E;
  font-weight: 500;
}

/* ---------- Numbers / primary actions ---------- */
.boxNumber {
  margin-top: 14px;
}

.boxNumber .count a {
  font-size: 24px;
  font-weight: 700;
  color: var(--green-main);
  letter-spacing: .6px;
  text-decoration: none;
}

.boxNumber .count a:hover {
  text-decoration: underline;
}

/* ---------- Links ---------- */
a {
  color: var(--green-main);
  transition: color .2s ease;
}

a:hover {
  color: #54C08A;
}

/* ---------- Social & app icons ---------- */
.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 16px;
  max-width: 280px;
}

.filterSvg,
.filterPng {
  width: 44px;
  height: 44px;
  object-fit: contain;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}

.wrapper a:hover img {
  transform: scale(1.1);
  opacity: .85;
}

/* ---------- Accordion ---------- */
.accordion-group {
  border-radius: var(--radius-md);
}

.accordion-heading a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
}

.accordion-heading a:hover {
  color: var(--green-main);
}

.accordion-inner {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-subtle);
}

/* ---------- Map ---------- */
.map-container img {
  width: 100%;
  border-radius: var(--radius-md);
}

/* ---------- Accessibility ---------- */
a:focus-visible {
  outline: 3px solid var(--green-main);
  outline-offset: 3px;
}

img {
 /* max-width: 100%; */
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .holderStatistic {
    margin-bottom: 32px;
  }
}

@media (max-width: 575px) {
  .holderStaTitel {
    flex-direction: column;
    text-align: center;
  }

  .iconSVG {
    width: 60px;
  }

  .boxNumber .count a {
    font-size: 21px;
  }

  .nd_title {
    font-size: 26px;
    margin-bottom: 28px;
  }
}


.holderStaTitel {
    margin-top: 50px;
}

input[type=button], input[type=reset], input[type=submit], button {
    min-width: 0 !important;

}

a.view-all {
    color: #0d121c !important;
}

/* 1. Position the entire caption container to the Right */
#heroCarousel .carousel-caption {
    right: 15% !important;          /* Move close to the right edge */
    left: auto !important;         /* Release the left side */
    width: 50% !important;         /* Limit width so it stays on the right */
    top: 50% !important;           /* Center vertically */
    bottom: auto !important;       /* Release bottom anchor */
    transform: translateY(-50%);   /* Perfect vertical centering */
    text-align: right !important;  /* Align text content to the right */
    padding-bottom: 0 !important;
}

/* 2. Style the H1 to sit on top */
#heroCarousel .carousel-caption h1 {
    display: block !important;     /* Force it to take full width (pushes link down) */
    width: 100%;                   
    margin-bottom: 20px !important;/* Add space between Title and Link */
    background: transparent !important; /* Remove the green background box if present */
    padding: 0 !important;
    text-shadow: none !important;
}

/* 3. Style the Link/Button */
#heroCarousel .carousel-caption .slider-button {
    display: inline-block !important;
    float: right !important;       /* Ensure it sticks to the right side */
    margin: 0 !important;
    clear: both;                   /* Ensure no overlap */
    display: none !important;
}

/* 4. (Optional) Hide the paragraph if you only want Title + Link */
#heroCarousel .carousel-caption p {
    display: none !important;
}

/* Mobile Adjustments: Center it on small screens */
@media (max-width: 768px) {
    #heroCarousel .carousel-caption {
        width: 90% !important;
        right: 5% !important;
        left: 5% !important;
        text-align: center !important;
    }
    #heroCarousel .carousel-caption .slider-button {
        float: none !important;
    }
}




/* Container alignment for RTL */
.accordion-container {
    direction: rtl;
    margin-top: 0rem;
    border-top: 1px solid #f0f0f0; /* Matches the dividers in service page */
}

/* Individual FAQ Row */
.set {
    border-bottom: 1px solid #E5E7EB;
    background: transparent;
    transition: background 0.2s ease;
}

.set:last-child {
    border-bottom: none;
}

/* Question Link Style */
.set > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
    text-decoration: none !important;
    color: #2D3748 !important; /* Dark gray for headers */
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.3s ease;
}

/* Hover Effect - Uses MOH Green */
.set > a:hover {
    color: #008D43; 
}

/* Icon Styling - Plus/Minus */
.set > a i {
    font-size: 14px;
    color: #008D43 !important;
    /* background: #e6f4ec !important; */ /* Light green circular background */
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* When expanded: Rotate icon and change color */
.set > a.active {
    color: #008D43 !important;
}

.set > a.active i {
    transform: rotate(0); /* Turns + into x */
    /* background: #008D43; */
    color: #008D43;
}

/* Answer Content Area */
.content {
    padding: 0 15px 25px 15px;
    color: #4A5568; /* Text color from service-description */
    line-height: 1.8;
    display: none; /* Controlled by JS */
}

/* Internal List Styling */
.content ul {
    list-style: none;
    padding-right: 0;
    margin-top: 10px;
}

.content ul li {
    position: relative;
    padding-right: 25px;
    margin-bottom: 12px;
}

/* Custom Bullet Points (MOH Green) */
.content ul li::before {
    content: "\f00c"; /* FontAwesome check or circle */
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    right: 0;
    color: #008D43;
    font-size: 14px;
}

.content p {
    margin-bottom: 0;
}

/* Small Bold Headers inside content */
.marb-5 strong {
    color: #2D3748;
    display: block;
    margin-bottom: 5px;
}



/* Container for the archived documents list */
#documents-container-archived {
    display: flex;
    flex-direction: column;
    gap: 12px;
    direction: rtl; /* Arabic alignment */
    margin-top: 1.5rem;
}

/* Individual document block */
.event_block {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB; /* Matching the card borders in DGA-Style */
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    position: relative;
    margin-bottom: 15px;
}

.event_block:hover {
    border-color:  #074D31 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    background-color: #F9FAFB;
}

/* Icon Handling: 
   Assuming download_icon.png is the primary icon. 
   We hide the second one or stack them based on your preference. */
.event_block img {
    width: 24px;
    height: 24px;
    margin-left: 15px; /* Spacing for RTL */
    flex-shrink: 0;
}

/* Content wrapper */
.econts {
    display: flex;
    flex-direction: column;
    color: #374151; /* Dark gray for readability */
    line-height: 1.5;
    flex-grow: 1;
}

/* The File Date (Modifiedstyle) */
.Modifiedstyle {
    color: var(--main-green);
    font-size: 0.85rem;
    font-weight: 500;
    margin-left: 8px; /* Space between date and title in Arabic */
    /* background: #E6F4EC; */ /* Light green tint */
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Title text */
.econts span {
    font-weight: 600;
    font-size: 1rem;
    color: var(--dark-green);
}

/* Hide the clear span if not used for structural floats */
.clr {
    display: none;
}

.event_block img{
  display:none;
}


/* Add a "Download" label or arrow on the left side (for RTL) */
.event_block::after {
    content: "\f019"; /* FontAwesome download icon */
    font-family: "Font Awesome 6 Pro";
    color: #9CA3AF;
    font-size: 1.1rem;
    margin-right: auto; /* Pushes to the far left in RTL */
    transition: color 0.3s ease;
}

.event_block:hover::after {
    color: var(--main-green);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .event_block {
        padding: 12px;
    }
    .econts span {
        font-size: 0.9rem;
    }
    .Modifiedstyle {
        display: block;
        width: fit-content;
        margin-bottom: 4px;
        margin-left: 0;
    }
}




/* Container logic to handle the carousel behavior */
.pg {
    display: flex !important; /* Change grid to flex for horizontal scrolling */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 20px;
    padding: 20px 0;
    margin: 0;
    list-style: none;
    direction: rtl; /* Aligned with your Arabic content */
    -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar but keep functionality */
.pg::-webkit-scrollbar {
    display: none;
}

/* Force each item to take up exactly 1/3 of the container width */
.pg li {
    flex: 0 0 calc(33.161616% - 14px); /* 3 in one row minus gap logic */
    scroll-snap-align: start;
    margin: 0;
}

/* Card Styling (DGA-Style Reference) */
.gallery-item {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #E5E7EB; /* Matches your right-card border */
    border-radius: 16px; /* Matches your service-card radius */
    overflow: hidden;
    text-decoration: none !important;
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
}

.gallery-item:hover {
    border-color: var(--main-green); /* DGA Brand Green */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

/* Image Thumbnail */
.gallery-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

/* Caption Text */
.gallery-item span {
    padding: 15px;
    color: var(--dark-green); /* DGA Dark Green */
    font-weight: 600;
    text-align: center;
    background: #fff;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Video Play Icon (MOH Design) */
.gallery-item[data-content-type="youtube"]::after {
    content: "\f04b";
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--main-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Responsive: 1 item per row on mobile */
@media (max-width: 992px) {
    .pg li {
        flex: 0 0 85%; /* Shows a peek of the next card */
    }
}


/* === Evaluation Section Wrapper === */
.evaluation {
    border-top: 1px solid #074D31;
    padding-top: 20px;
    align-items: center;
    font-size: 14px;
    color: #161616;
}

/* === Feedback Question === */
.feedback-question {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

/* === Yes / No Buttons === */
.option-master {
    background-color: #1f7a4f;
    color: #fff !important;
    padding: 6px 18px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.option-master:hover {
    background-color: #16603d;
    transform: translateY(-1px);
}

/* === Feedback Result Text === */
.feedback-response {
    font-size: 12px;
    color: #666;
}

.feedback-response strong {
    color: #000;
}

/* === Right Side Info (Last Update & Reads) === */
.evaluation .rdCounts {
    font-weight: 600;
    margin-left: 4px;
    font-size: 16px;
}

.evaluation span {
    font-size: 16px;
    color: #555;
}

/* === Column Alignment === */
.evaluation > div {
    display: flex;
    align-items: center;
}

/* === Responsive Tweak === */
@media (max-width: 768px) {
    .evaluation {
        text-align: center;
    }

    .evaluation > div {
        justify-content: center;
    }

    .feedback-question {
        justify-content: center;
    }
}

/* E-Participation */

/* =========================================
   Engage/Consultation Section (MOH Style)
   ========================================= */

.engage-section {
    padding: 60px 0;
    background-color: #FFFFFF; /* Pure white background */
    direction: rtl; /* Arabic alignment */
}

.engage-header {
    margin-bottom: 32px;
}

.engage-title {
    font-family: 'IBMPlexSansArabic-SemiBold', sans-serif !important; /* */
    font-size: 32px;
    color: #0D121C; /* Dark Ink */
    margin: 0;
}

/* 4-Column Grid Layout */
.engage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 per row */
    gap: 20px; /* Standard spacing */
}

/* Card Styling */
.engage-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB; /* Subtle border */
    border-radius: 16px; /* Rounded corners */
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.engage-card-link {
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    width: 100%;
}

.engage-card:hover {
    transform: translateY(-5px); /* Elevation effect */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); /* Soft shadow */
     /* Green border on hover */
    background: #F9FAFB;
}

/* Typography inside Card */
.engage-card-title {
    font-family: 'IBMPlexSansArabic-SemiBold', sans-serif !important;
    font-size: 18px;
    color: #111827;
    margin-bottom: 12px;
}

.engage-card-description {
    font-family: 'IBMPlexSansArabic-Regular', sans-serif !important;
    font-size: 15px;
    color: #4B5563; /* Gray text */
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Arrow/Action Link */
.engage-card-arrow {
    font-family: 'IBMPlexSansArabic-Medium', sans-serif !important;
    font-size: 14px;
    color: #1B8354 !important; /* MOH Green */
    display: flex;
    align-items: center;
    gap: 8px;
}

.engage-card:hover .engage-card-arrow {
    text-decoration: underline;
}

/* =========================================
   Responsive Adjustments
   ========================================= */

@media (max-width: 1200px) {
    .engage-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 per row on small desktops */
    }
}

@media (max-width: 992px) {
    .engage-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 per row on tablets */
    }
}

@media (max-width: 576px) {
    .engage-grid {
        grid-template-columns: 1fr; /* Stack on mobile */
    }
    .engage-title {
        font-size: 24px;
    }
}


button.verify-toggle.d-flex.align-items-center.ps-4.ps-md-2.pt-1.pt-md-0.collapsed {
    color: #111827;
}

/* E-Participation End */



.navbar {
  height: 72px;
  padding: 0;
}

#mainNavbar {
  height: 100%;
}


#mainNavbar .navbar-nav {
  height: 100%;
  align-items: stretch;
}

#mainNavbar .nav-item {
  display: flex;
  align-items: stretch;
}


#mainNavbar .navbar-nav {
  height: 100%;
  align-items: stretch;
}

#mainNavbar .nav-item {
  display: flex;
  align-items: stretch;
}

#mainNavbar .nav-link,
#mainNavbar button.nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 500;
  color: #1A1A1A;
  position: relative;
  border: none;
  background: transparent;
  transition: background 0.25s ease;
}


#mainNavbar .nav-item > .nav-link:hover,
#mainNavbar .nav-item > button.nav-link:hover {
  background-color: #EDEFF1; /* نفس الرمادي في الصورة */
}


#mainNavbar .nav-item > .nav-link:hover::after,
#mainNavbar .nav-item > button.nav-link:hover::after {
  background-color: #1F2937;
}

#mainNavbar .nav-item > .nav-link.active::after,
#mainNavbar .nav-item > button.nav-link[aria-expanded="true"]::after {
  background-color: #1B8354;
}

#mainNavbar .nav-item > .nav-link.active,
#mainNavbar .nav-item > button.nav-link[aria-expanded="true"] {
  background-color: #EDEFF1;
}


 


/* ============================= */
/* NAVBAR BASE STYLE */
/* ============================= */

#mainNavbar .nav-link,
#mainNavbar .nav-link:focus,
#mainNavbar .nav-link:active {
  position: relative;
  font-size: 16px;
  font-weight: 500;
  color: #1A1A1A !important;
  /* padding: 12px 18px; */
  border-radius: 4px;
  transition: all 0.25s ease;
}

/* Remove default button style */
#mainNavbar button.nav-link {
  background: transparent;
  border: 0;
}

/* ============================= */
/* HOVER STYLE (Gray with dark bottom bar) */
/* ============================= */

#mainNavbar .nav-item > .nav-link:hover,
#mainNavbar .nav-item > button.nav-link:hover {
  background-color: #E5E7EB !important;
  color: #161616 !important;
}

#mainNavbar .nav-item > .nav-link:hover::after,
#mainNavbar .nav-item > button.nav-link:hover::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 4px;
  background-color: #1F2937; /* dark bottom bar */
  border-radius: 4px;
}

/* ============================= */
/* ACTIVE / SELECTED STYLE (Green bottom bar) */
/* ============================= */

#mainNavbar .nav-item > .nav-link.active,
#mainNavbar .nav-item > button.nav-link[aria-expanded="true"] {
  background-color: #1B8354 !important;
  color: #fff !important;
}

#mainNavbar .nav-item > .nav-link.active::after,
#mainNavbar .nav-item > button.nav-link[aria-expanded="true"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 4px;
  background-color: #54C08A; /* MOH green */
  border-radius: 4px;
}

/* Rotate arrow when open */
#mainNavbar button[aria-expanded="true"] i.fa-angle-down {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

/* ============================= */
/* SEARCH BUTTON (Green Block Style) */
/* ============================= */

/* =========================================
   1. BASE SETUP (Button & Underline)
   ========================================= */
#searchToggle {
  position: relative;
  border-radius: 0;
  transition: all 0.3s ease;
  /* Default text color (usually dark or brand color) */
  color: #161616; 
}

/* The Underline (Hidden by default) */
#searchToggle::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 80%;
  height: 5px;
  
  /* Start hidden */
  transform: translateX(-50%) scaleX(0); 
  transition: transform 0.3s ease, background-color 0.3s ease;
  transform-origin: center;
}

/* =========================================
   2. HOVER STATE (Light Gray / Dark Text)
   ========================================= */
#searchToggle:hover {
  background-color: #E5E7EB;
  color: #161616 !important;
}

#searchToggle:hover i {
  color: #161616 !important;
}

#searchToggle:hover::after {
  background-color: #1F2937; /* Dark Line */
  transform: translateX(-50%) scaleX(1);
}

/* =========================================
   3. ACTIVE STATE (Green / White Text)
   (Overrides Hover)
   ========================================= */
#searchToggle.active,
#searchToggle[aria-expanded="true"] { 
  background-color: #1b8354 !important;
  color: #ffffff !important; /* Forces Text White */
}

/* Force Icon to be White when Active */
#searchToggle.active i,
#searchToggle[aria-expanded="true"] i {
    color: #ffffff !important; /* Forces Icon White */
}

/* Active Underline (Gold) */
#searchToggle.active::after,
#searchToggle[aria-expanded="true"]::after {
  background-color: #54c08a !important;
  transform: translateX(-50%) scaleX(1);
}







/* ============================= */
/* DROPDOWN ARROW TRANSITION */
/* ============================= */

#mainNavbar .nav-link i.fa-angle-down {
  transition: transform 0.3s ease;
}

/* ============================= */
/* USER LOGIN STYLE CLEANUP */
/* ============================= */

.loginclass {
  padding: 10px 16px;
  border-radius: 8px;
  transition: background 0.25s ease;
}

.loginclass:hover {
  background-color: #F2F4F5;
}


/* ============================= */
/* FORCE 72px HEIGHT FOR ALL NAV ITEMS */
/* ============================= */

.navbar {
  height: 72px;
  padding: 0;
}

#mainNavbar,
#mainNavbar .navbar-nav {
  height: 100%;
  z-index: 999999999 !important;
  background: #ffffff;
}

#mainNavbar .navbar-nav {
  align-items: stretch;
}

/* IMPORTANT PART */
#mainNavbar .nav-item {
  display: flex;
  align-items: stretch;
}

/* Apply to ANY direct child (a or button) */
#mainNavbar .nav-item > a,
#mainNavbar .nav-item > button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 500;
  color: #1A1A1A;
  position: relative;
  background: transparent;
  border: 0;
  transition: background 0.25s ease;
  padding-left: 5px !important;
  padding-right: 5px !important;
}


#mainNavbar .nav-item > a:hover,
#mainNavbar .nav-item > button:hover {
  background-color: #EDEFF1;
}



/* ============================= */
/* SELECTED / ACTIVE NAV ITEM */
/* ============================= */

#mainNavbar .nav-item > a.is-selected,
#mainNavbar .nav-item > button.is-selected {
  background-color: #1B8354;   /* MOH green */
  color: #ffffff !important;
}

#mainNavbar .nav-item > a.is-selected i,
#mainNavbar .nav-item > button.is-selected i {
  color: #ffffff !important;
}


#mainNavbar .nav-item > a.is-selected::after,
#mainNavbar .nav-item > button.is-selected::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 60%;
  height: 4px;
  background-color: #1B8354; /* lighter green */
  border-radius: 4px;
}

#mainNavbar .nav-item > a.active,
#mainNavbar .nav-item > button[aria-expanded="true"],
#mainNavbar .nav-item.show > a {
  background-color: #1B8354;
  color: #fff !important;
}

#mainNavbar .nav-item > a.active::after,
#mainNavbar .nav-item > button[aria-expanded="true"]::after,
#mainNavbar .nav-item.show > a::after {
  background-color: #54C08A;
}




/* ============================= */
/* ACTIVE / SELECTED = FULL GREEN */
/* ============================= */

#mainNavbar .nav-item > a.active,
#mainNavbar .nav-item > a.is-selected,
#mainNavbar .nav-item.show > a,
#mainNavbar .nav-item > button[aria-expanded="true"],
#mainNavbar .nav-item > button.is-selected {
  
  background-color: #1B8354;   /* MOH Green */
  color: #ffffff !important;
}


#mainNavbar .nav-item > a.active i,
#mainNavbar .nav-item > a.is-selected i,
#mainNavbar .nav-item.show > a i,
#mainNavbar .nav-item > button[aria-expanded="true"] i,
#mainNavbar .nav-item > button.is-selected i {
  color: #ffffff !important;
}


#mainNavbar .nav-item > a.active::after,
#mainNavbar .nav-item > a.is-selected::after,
#mainNavbar .nav-item.show > a::after,
#mainNavbar .nav-item > button[aria-expanded="true"]::after,
#mainNavbar .nav-item > button.is-selected::after {
  
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 60%;
  height: 4px;
  background-color: #54C08A; /* lighter green bar */
  border-radius: 4px;
}


#mainNavbar .nav-item > a,
#mainNavbar .nav-item > button {
  position: relative;
}





/*****************************foundation day css**************************************/


 
 
section[aria-labelledby="news-section-title"] {
  position: relative !important;
  overflow: hidden;  
 
  padding-top: 40px; 
  padding-bottom: 40px;
}

 
section[aria-labelledby="news-section-title"]::before,
section[aria-labelledby="news-section-title"]::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);  
  
  width: 100vw;   
  height: 22px;    
  
  background-image: url('https://st.moh.gov.sa/_layouts/15/MOH/Internet/New/Enterprise/img/separator-1.svg');  
 
  background-repeat:repeat;
  z-index: 1;
}

 
section[aria-labelledby="news-section-title"]::before {
  top: 0;
  margin: 0;
}

 
section[aria-labelledby="news-section-title"]::after {
  bottom: 0;
  margin: 0;
}



 
.footer-section {
    position: relative;
    background-color: #231F20!important;  
    overflow: hidden;
    z-index: 0; 
}

 
.footer-section::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    
 
    width: 550px;   
    height: 550px;
    
 
    background-image: url('https://st.moh.gov.sa/_layouts/15/MOH/Internet/New/Enterprise/img/footer-backeground.svg'); /* ⚠️ CHECK THIS PATH */
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
    
 
    pointer-events: none;  
    
 
    z-index: 0;
    filter: invert(1);
}

 
.footer-section .container {
    position: relative;
    z-index: 2;  
}

 
#servicesHeading {
  display: flex;          
  align-items: center;  
  gap: 0px;          
}

 
#servicesHeading::before {
  content: "";
  display: block;
  width: 70px;            
  height: 70px;           
  
  
  background-image: url('https://st.moh.gov.sa/_layouts/15/MOH/Internet/New/Enterprise/img/service-icon.svg');
 
  background-repeat: no-repeat;
  background-position: center;
  padding-left: 0px;
}





 
#news-section-title {
  display: flex;           
  align-items: center;     
  gap: 0px;               
}

 
#news-section-title::before {
  content: "";
  display: block;
  width: 70px;             
  height: 70px;            
  background-image: url('https://st.moh.gov.sa/_layouts/15/MOH/Internet/New/Enterprise/img/news-icon.svg');
  background-repeat: no-repeat;
  background-position: center;
  padding-left: 0px;
}

 



#HealthEventsHeading {
  display: flex;          
  align-items: center;    
  gap: 0px;              
}


#HealthEventsHeading::before {
  content: "";
  display: block;
  width: 70px;           
  height: 70px;          
  background-image: url('https://st.moh.gov.sa/_layouts/15/MOH/Internet/New/Enterprise/img/news-icon.svg');
  background-repeat: no-repeat;
  background-position: center;
  padding-left: 0px;
}






#aboutusHeading {
  display: flex;         
  align-items: center;    
  gap: 0px;              
}


#aboutusHeading::before {
  content: "";
  display: block;
  width: 70px;          
  height: 70px;           
  background-image: url('https://st.moh.gov.sa/_layouts/15/MOH/Internet/New/Enterprise/img/about-us-icon.svg');
  background-repeat: no-repeat;
  background-position: center;
  padding-left: 0px;
}




.bg-section {
    background: linear-gradient(253deg, #F8F5F4 52.82%, rgba(248, 245, 244, 0.60) 93.02%, rgba(248, 245, 244, 0.00) 122.63%);
}

.moh-feature-strip, .moh-story-band {
    background: linear-gradient(253deg, #F8F5F4 52.82%, rgba(248, 245, 244, 0.60) 93.02%, rgba(248, 245, 244, 0.00) 122.63%);
}


section.container.ptb-moh.bg-section {
    background-image: url(https://st.moh.gov.sa/_layouts/15/MOH/Internet/New/Enterprise/img/services-section.svg);
    background-size: cover;
    background-repeat: no-repeat;
}