.title-section-container {
      position: relative;
      padding-bottom: 0 !important;
    }

    /* الشريط المتدرج */
    .gradient-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: linear-gradient(to left,
          #072C49,
          #9DDAE5,
          #007497,
          #ECE6DD,
          #DEA470,
          #E9937D);
    }

    :root {
      --dark-green: #072c49;
      --light-green: rgb(48, 101, 141);
      --text-color: #ffffff;
      --hr-color: rgb(68, 126, 170);
      --primary-green: #008069;
      --light-green: #e9f5f3;
      --text-dark: #333;
      --text-light: #555;
      --border-radius-base: 12px;
      --spacing-lg: 32px;
      --spacing-md: 20px;

      --pantone: #ECE6DD;
      --pantone-light: #ece6dd3d;
    }

    @font-face {
      font-family: 'SFProAR';
      src: url('../fonts/SFProAR_regular.ttf') format('truetype'),
        url('../fonts/SFProAR_semibold.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }

    html,
    body,
    main {
      height: 100%;
    }

    body {
      font-family: "SFProAR", sans-serif;
      padding: 11px;
    }

    .SFProAR-regular {
      font-family: "SFProAR", sans-serif;
      font-weight: 400;
      font-style: normal;
    }

    .SFProAR-medium {
      font-family: "SFProAR", sans-serif;
      font-weight: 500;
      font-style: normal;
    }

    .tajawal-bold {
      font-family: "Tajawal", sans-serif;
      font-weight: 700;
      font-style: normal;
    }

    .tajawal-extrabold {
      font-family: "Tajawal", sans-serif;
      font-weight: 800;
      font-style: normal;
    }

    .tajawal-black {
      font-family: "Tajawal", sans-serif;
      font-weight: 900;
      font-style: normal;
    }

    .header {
      border-bottom: 1px solid #e0e0e0;
      padding-top: 12px;
      padding-bottom: 6px;
    }

    .header .logo {
      max-height: 120px;
    }

    .header .navbar-item.logo:hover {
      max-height: 120px;
      background: none !important;
      background-color: none !important;
    }

    html {
      scroll-behavior: smooth;
    }

    .custom-footer {
      background-color: var(--dark-green) !important;
      color: var(--text-color);
      padding: 3rem 1.5rem 2rem 1.5rem;
      direction: rtl;
      text-align: right;
    }

    .custom-footer .title,
    .custom-footer a,
    .custom-footer p,
    .custom-footer span,
    .custom-footer li {
      color: var(--text-color) !important;
    }

    .custom-title-spacing {
      padding-bottom: 0.5rem;
      margin-bottom: 1.5rem !important;
      font-size: 1.2rem !important;
      font-weight: 600;
    }

    .custom-list {
      list-style: none;
      margin-left: 0;
      margin-right: 0;
    }

    .custom-list li {
      margin-bottom: 0.5rem;
    }

    .custom-link:hover {
      text-decoration: underline;
    }

    .custom-social-links {
      display: flex;
      gap: 10px;
    }

    .custom-icon-top {
      color: #0196c4;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 35px;
      height: 35px;
      font-size: .9rem;
      border: 1px solid #072c4959;
      border-radius: 50%;
    }

    .custom-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 35px;
      height: 35px;
      border: 1px solid var(--text-color);
      border-radius: 5px;
      font-size: 1rem;
      transition: background-color 0.2s;
    }

    .custom-icon:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }

    .custom-hr {
      background-color: var(--hr-color);
      height: 1px;
      margin: 2rem 0 0 0;
      border: none;
    }

    .custom-bottom-row {
      margin-top: 1rem;
      align-items: flex-end;
    }

    .custom-logo-container {
      display: flex;
      align-items: center;
    }

    .custom-accessibility-icon {
      background-color: var(--light-green);
      border-radius: 50%;
      width: 50px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.5rem;
    }

    .custom-logo-text {
      font-weight: bold;
      font-size: 0.9rem;
    }

    .custom-rega-logo {
      display: flex;
      flex-direction: column;
      line-height: 1;
      text-align: right;
      border-right: 1px solid var(--text-color);
      padding-right: 20px;
    }

    .custom-rega-logo .custom-logo-subtext {
      font-size: 0.65rem;
      font-weight: 300;
      margin-top: 3px;
    }

    .custom-vision-logo {
      font-weight: 900;
      font-size: 1.2rem;
      line-height: 1;
    }

    .custom-scroll-top-button {
      position: absolute;
      right: 0;
      bottom: 0;
      background-color: var(--light-green);
      border: none;
      color: var(--text-color);
      width: 50px;
      height: 50px;
      border-radius: 5px 5px 0 0;
      cursor: pointer;
      font-size: 1rem;
      margin-right: -1.5rem;
    }

    .custom-bottom-row .column:last-child {
      position: relative;
    }

    @media screen and (max-width: 768px) {
      .custom-scroll-top-button {
        display: none;
      }

      .custom-logo-container {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
      }
    }

    .is-size-cos {
      font-size: 12px !important;
    }

    .title.is-cos-4 {
      font-size: 16px !important;
    }

    #scrollToTopBtn {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 30px;
      z-index: 99;
      border: none;
      outline: none;
      background-color: #072c49;
      color: white;
      cursor: pointer;
      padding: 15px;
      border-radius: 6px;
      font-size: 18px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    #scrollToTopBtn:hover {
      background-color: #005f7a;
    }

    .is-white {
      color: #ffffff !important;
    }

    .bg-pantone {
      background-color: var(--pantone);
    }

    .bg-pantone-light {
      background-color: var(--pantone-light);
    }

    a.navbar-item.active {
      color: var(--dark-green);
      font-weight: 600;
    }


    .breadcrumb {
      font-size: .9rem;
      /* Base font size */
      color: #4a4a4a;
      /* Text color */
    }

    .breadcrumb ul {
      display: flex;
      /* Use flexbox for horizontal alignment */
      flex-wrap: wrap;
      /* Allow wrapping on small screens */
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .breadcrumb li {
      display: flex;
      align-items: center;
      white-space: nowrap;
      /* Prevent items from breaking */
    }

    .breadcrumb a {
      color: var(--dark-green);
      /* Bulma's primary blue for links */
      text-decoration: none;
      padding: 0 0.75em;
      /* Horizontal padding for touch targets */
      transition: color 0.2s ease;
    }

    .breadcrumb a:hover {
      color: #363636;
      /* Darker on hover */
    }

    .breadcrumb li:first-child a {
      padding-left: 0;
      /* Remove padding from the first item's left side */
    }

    /* * -----------------------------------------------------
 * Arrow Separator Styling (The core trick!)
 * -----------------------------------------------------
 */

    /* Target the separator of every list item EXCEPT the first one */
    .breadcrumb li:not(:first-child)::before {
      content: "";
      /* Required for pseudo-element */
      display: block;
      width: 0;
      height: 0;

      /* Create the triangular shape using borders */
      border-top: 0.35em solid transparent;
      border-bottom: 0.35em solid transparent;

      /* This border creates the visible arrow pointing right */
      border-right: 0.35em solid #b5b5b5;
      /* Light gray color for the separator */

      margin: 0 0.5em;
      /* Spacing around the arrow */
    }

    /* * -----------------------------------------------------
 * Active State Styling
 * -----------------------------------------------------
 */
    .breadcrumb li.is-active a {
      color: #363636;
      /* Darker color for the active link */
      pointer-events: none;
      /* Make the active link unclickable */
      cursor: default;
    }

    /* Remove the separator for the active (last) item */
    .breadcrumb li.is-active::before {
      margin-left: 0.5em;
      /* Keep space for consistency */
    }

    /* * -----------------------------------------------------
 * RTL (Right-to-Left) Implementation
 * -----------------------------------------------------
 */
    .breadcrumb-container.rtl .breadcrumb ul {
      flex-direction: row-reverse;
      /* Reverse the order of list items */
    }

    .breadcrumb-container.rtl .breadcrumb li:not(:last-child)::after {
      /* Instead of using ::before on every item except the first, 
       we use ::after on every item except the last (the active one)
       to place the separator on the left side. */
      content: "";
      display: block;
      width: 0;
      height: 0;

      border-top: 0.35em solid transparent;
      border-bottom: 0.35em solid transparent;

      /* Reverse the arrow direction: Border-right makes it point left */
      border-right: 0.35em solid #b5b5b5;

      margin: 0 0.5em;
    }

    /* Hide the default ::before separators in RTL context */
    .breadcrumb-container.rtl .breadcrumb li::before {
      display: none;
    }

    .breadcrumb-container.rtl .breadcrumb li a {
      padding: 0 0.75em;
    }

    .breadcrumb-container.rtl .breadcrumb li:last-child a {
      padding-right: 0;
      /* Remove padding from the last (now visually first) item */
    }

    /* Remove the custom ::after separator on the last/active item in LTR */
    .breadcrumb li.is-active::after {
      display: none;
    }

    .title-section-container {
      margin-bottom: 0px !important;
      background-color: #072c491f;
      height: 170px;
      justify-content: center;
      padding-right: 100px;
      display: flex;
    }

    form label {
      font-size: 14px !important;
      margin-bottom: 12px !important;
    }

    /* ===== Disable System Dark Mode ===== */
    :root {
      color-scheme: light;
    }

    html,
    body {
      background-color: #ffffff !important;
      color: #000000 !important;
    }

    /* منع أي تفاعل مع prefers-color-scheme */
    @media (prefers-color-scheme: dark) {

      html,
      body {
        background-color: #ffffff !important;
        color: #000000 !important;
      }

      * {
        background-color: unset !important;
        color: inherit !important;
      }
    }