@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Roboto:wght@400;500;700;900&display=swap');

      html,
      body,
      body * {
          font-family: 'Tajawal', sans-serif !important;
      }

      .brand-en,
      .brand-en * {
          font-family: 'Roboto', sans-serif !important;
      }

      :root {
          --teal: #007F80;
          --teal2: #006375;
          --teal3: #C7DDE1;
          --cream: #f8f9fb;
          --cream2: #f0f3f6;
          --white: #ffffff;
          --text-dark: #1a2e2f;
          --text-mid: #3a5a5b;
          --text-light: #6b8f90;
          --border: #ddeaec;
      }

      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      html {
          scroll-behavior: smooth;
      }

      .terms-page .body {
          font-family: 'Tajawal', sans-serif;
          background: var(--white);
          color: var(--text-dark);
          line-height: 1.8;
          overflow-x: hidden;
      }

      .site-header {
          position: sticky;
          top: 0;
          z-index: 100;
          background: rgba(255, 255, 255, 0.94);
          backdrop-filter: blur(14px);
          border-bottom: 1px solid var(--border);
          padding: 0 2.5rem;
      }

      .header-inner {
          max-width: 1200px;
          margin: 0 auto;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 62px;
      }

      .logo {
          font-family: 'Roboto', sans-serif;
          font-weight: 900;
          font-size: 1.25rem;
          color: var(--teal2);
          text-decoration: none;
          letter-spacing: 2px;
          text-transform: uppercase;
      }

      .logo em {
          font-style: normal;
          color: var(--teal);
      }

      nav a {
          font-family: 'Tajawal', sans-serif;
          font-size: 0.88rem;
          font-weight: 500;
          color: var(--text-mid);
          text-decoration: none;
          margin-inline-start: 2rem;
          transition: color 0.2s;
      }

      nav a:hover {
          color: var(--teal);
      }

      .hero {
          min-height: 52vh;
          background: linear-gradient(160deg, #C7DDE1 0%, #EFF6FF 50%, #C7DDE1 100%);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          padding: 4rem 2rem 7rem;
          position: relative;
          overflow: hidden;
      }

      .hero::before {
          content: '';
          position: absolute;
          inset: 0;
          background-image: radial-gradient(circle, rgba(0, 127, 128, 0.07) 1px, transparent 1px);
          background-size: 36px 36px;
          pointer-events: none;
      }

      .hero-wave {
          position: absolute;
          bottom: -2px;
          left: 0;
          right: 0;
          line-height: 0;
          pointer-events: none;
      }

      .hero-wave svg {
          display: block;
          width: 100%;
      }

      .hero-bar {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 3px;
          background: linear-gradient(90deg, transparent, var(--teal) 30%, var(--teal2) 70%, transparent);
      }

      .hero-inner {
          position: relative;
          z-index: 2;
          max-width: 760px;
      }

      .hero-eyebrow {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 12px;
          margin-bottom: 2.4rem;
          opacity: 0;
          animation: heroUp 0.6s 0.3s ease forwards;
      }

      .hero-eyebrow-text {
          font-family: 'Roboto', sans-serif;
          font-size: 0.62rem;
          font-weight: 700;
          letter-spacing: 5px;
          text-transform: uppercase;
          color: var(--text-light);
      }

      .hero h1 {
          font-family: 'Tajawal', sans-serif;
          font-size: clamp(3.5rem, 8vw, 6.5rem);
          line-height: 0.95;
          letter-spacing: -3px;
          margin-bottom: 2rem;
      }

      .hero-w1 {
          display: block;
          font-weight: 300;
          color: var(--text-dark);
          opacity: 0;
          transform: translateY(36px);
          animation: heroUp 1s 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }

      .hero-w2 {
          font-weight: 800;
          color: var(--teal);
          opacity: 0;
          transform: translateY(36px);
          animation: heroUp 1s 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
          position: relative;
          display: inline-block;
      }

      .hero-w2::after {
          content: '';
          position: absolute;
          bottom: 6px;
          right: 0;
          left: 0;
          height: 2px;
          background: linear-gradient(to left, var(--teal3), var(--teal), var(--teal3));
          transform: scaleX(0);
          transform-origin: right;
          animation: heroLine 1s 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }

      @keyframes heroLine {
          to {
              transform: scaleX(1);
          }
      }

      .hero-sep {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 14px;
          margin: 0 auto 2rem;
          opacity: 0;
          animation: heroUp 0.5s 0.95s ease forwards;
      }

      .hero-sep-hr {
          flex: 1;
          max-width: 60px;
          border: none;
          border-top: 1px solid var(--border);
      }

      .hero-sep-brand {
          font-family: 'Roboto', sans-serif;
          font-weight: 900;
          font-size: 0.7rem;
          letter-spacing: 5px;
          color: var(--teal2);
          opacity: 0.6;
      }

      .hero-desc {
          font-size: 1rem;
          line-height: 2;
          color: var(--text-mid);
          max-width: 500px;
          margin: 0 auto;
          opacity: 0;
          animation: heroUp 0.6s 1.05s ease forwards;
      }

      .hero-desc b {
          font-family: 'Roboto', sans-serif;
          font-weight: 700;
          color: var(--teal2);
      }

      @keyframes heroUp {
          from {
              opacity: 0;
              transform: translateY(20px);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      .layout {
          display: grid;
          grid-template-columns: 260px 1fr;
          gap: 0;
          max-width: 1100px;
          margin: 0 auto;
          padding: 3rem 2rem;
      }

      .sidebar {
          position: sticky;
          top: 80px;
          height: fit-content;
          padding-inline-end: 2rem;
      }

      .toc-card {
          background: var(--cream);
          border: 1px solid var(--border);
          border-radius: 14px;
          padding: 1.4rem;
          overflow: hidden;
      }

      .toc-title {
          font-family: 'Tajawal', sans-serif;
          font-size: 0.8rem;
          font-weight: 700;
          color: var(--teal2);
          text-transform: uppercase;
          letter-spacing: 1px;
          margin-bottom: 1rem;
          padding-bottom: 0.7rem;
          border-bottom: 2px solid var(--teal3);
      }

      .toc-list {
          list-style: none;
          display: flex;
          flex-direction: column;
          gap: 0.15rem;
      }

      .toc-list li a {
          display: block;
          font-size: 0.82rem;
          font-weight: 500;
          color: var(--text-mid);
          text-decoration: none;
          padding: 0.45rem 0.6rem;
          border-radius: 8px;
          transition: all 0.2s;
          line-height: 1.4;
      }

      .toc-list li a:hover {
          background: var(--teal3);
          color: var(--teal2);
          padding-inline-start: 1rem;
      }

      .toc-list li a.active {
          background: var(--teal);
          color: var(--white);
          padding-inline-start: 1rem;
          font-weight: 700;
      }

      .toc-list li a.active .num {
          background: rgba(255, 255, 255, 0.22);
          color: var(--white);
      }

      .toc-list li a .num {
          display: inline-block;
          width: 20px;
          height: 20px;
          background: var(--teal3);
          color: var(--teal2);
          font-size: 0.7rem;
          font-weight: 700;
          border-radius: 50%;
          text-align: center;
          line-height: 20px;
          margin-inline-end: 0.4rem;
          flex-shrink: 0;
      }

      .content {
          min-width: 0;
      }

      .intro-card {
          background: linear-gradient(135deg, var(--teal3), var(--cream2));
          border: 1px solid var(--border);
          border-right: 4px solid var(--teal);
          border-radius: 12px;
          padding: 1.4rem 1.6rem;
          margin-bottom: 2.5rem;
          font-size: 0.95rem;
          color: var(--text-mid);
          line-height: 1.9;
      }

      .intro-card strong {
          color: var(--teal2);
      }

      .section {
          margin-bottom: 2.8rem;
          animation: fadeUp 0.5s ease both;
      }

      @keyframes fadeUp {
          from {
              opacity: 0;
              transform: translateY(16px);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      .section:nth-child(1) {
          animation-delay: .05s
      }

      .section:nth-child(2) {
          animation-delay: .1s
      }

      .section:nth-child(3) {
          animation-delay: .15s
      }

      .section:nth-child(4) {
          animation-delay: .2s
      }

      .section:nth-child(5) {
          animation-delay: .25s
      }

      .section:nth-child(6) {
          animation-delay: .3s
      }

      .section:nth-child(7) {
          animation-delay: .35s
      }

      .section:nth-child(8) {
          animation-delay: .4s
      }

      .section-header {
          display: flex;
          align-items: center;
          gap: 0.8rem;
          margin-bottom: 1rem;
          padding-bottom: 0.8rem;
          border-bottom: 1px solid var(--border);
      }

      .section-num {
          width: 32px;
          height: 32px;
          background: var(--teal);
          color: var(--white);
          font-family: 'Tajawal', sans-serif;
          font-size: 0.8rem;
          font-weight: 700;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
      }

      .section-title {
          font-family: 'Tajawal', sans-serif;
          font-size: 1.15rem;
          font-weight: 700;
          color: var(--text-dark);
      }

      .section-body {
          font-size: 0.95rem;
          color: var(--text-mid);
          line-height: 1.9;
      }

      .section-body p {
          margin-bottom: 0.9rem;
      }

      .section-body p:last-child {
          margin-bottom: 0;
      }

      .section-body ul {
          list-style: none;
          margin: 0.6rem 0 0.9rem;
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
      }

      .section-body ul li {
          display: flex;
          gap: 0.7rem;
          align-items: flex-start;
          font-size: 0.92rem;
          line-height: 1.7;
          padding: 0.5rem 0.8rem;
          border-radius: 8px;
          background: var(--cream);
          border: 1px solid var(--border);
      }

      .section-body ul li::before {
          content: '↩';
          color: var(--teal);
          font-size: 0.9rem;
          margin-top: 0.1rem;
          flex-shrink: 0;
      }

      .highlight-box {
          background: linear-gradient(135deg, rgba(0, 127, 128, 0.05), rgba(199, 221, 225, 0.3));
          border: 1px solid var(--teal3);
          border-right: 3px solid var(--teal3);
          border-radius: 10px;
          padding: 1rem 1.2rem;
          margin: 1rem 0;
          font-size: 0.9rem;
          color: var(--text-mid);
      }

      .highlight-box strong {
          color: var(--teal2);
      }

      .warning-box {
          background: rgba(0, 99, 117, 0.05);
          border: 1px solid rgba(0, 127, 128, 0.2);
          border-right: 3px solid var(--teal2);
          border-radius: 10px;
          padding: 1rem 1.2rem;
          margin: 1rem 0;
          font-size: 0.9rem;
          color: var(--text-mid);
      }

      .contact-cta {
          background: linear-gradient(135deg, var(--teal2), var(--teal));
          border-radius: 16px;
          padding: 2.5rem 2rem;
          text-align: center;
          color: var(--white);
          margin-top: 1rem;
          position: relative;
          overflow: hidden;
      }

      .contact-cta::before {
          content: '';
          position: absolute;
          width: 260px;
          height: 260px;
          background: rgba(255, 255, 255, 0.07);
          border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
          top: -60px;
          left: -60px;
          pointer-events: none;
      }

      .contact-cta::after {
          content: '';
          position: absolute;
          width: 180px;
          height: 180px;
          background: rgba(255, 255, 255, 0.05);
          border-radius: 60% 40% 45% 55% / 55% 60% 40% 45%;
          bottom: -40px;
          right: -40px;
          pointer-events: none;
      }

      .contact-cta h3 {
          font-family: 'Tajawal', sans-serif;
          font-size: 1.4rem;
          font-weight: 700;
          margin-bottom: 0.5rem;
          position: relative;
          z-index: 1;
      }

      .contact-cta p {
          opacity: 0.85;
          font-size: 0.95rem;
          margin-bottom: 1.6rem;
          position: relative;
          z-index: 1;
      }

      .cta-btn {
          display: inline-flex;
          align-items: center;
          gap: 0.55rem;
          background: var(--white);
          color: var(--teal2);
          font-family: 'Tajawal', sans-serif;
          font-weight: 700;
          font-size: 0.95rem;
          padding: 0.8rem 2rem;
          border-radius: 100px;
          text-decoration: none;
          transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s;
          position: relative;
          z-index: 1;
          letter-spacing: 0.3px;
      }

      .cta-btn:hover {
          transform: translateY(-3px) scale(1.03);
          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
      }

      .cta-btn svg {
          width: 16px;
          height: 16px;
          transition: transform 0.25s;
      }

      .cta-btn:hover svg {
          transform: translateX(-4px);
      }


      @media (max-width: 768px) {
          .layout {
              grid-template-columns: 1fr;
              padding: 1.5rem 1rem;
          }

          .sidebar {
              position: static;
              padding-inline-end: 0;
              margin-bottom: 1.5rem;
          }

          .toc-card {
              display: none;
          }

          .hero {
              min-height: auto;
              padding: 5rem 1.5rem 7rem;
          }

          .hero h1 {
              font-size: 3rem;
              letter-spacing: -1px;
          }

      }


      #gotoTop {
          position: fixed;
          bottom: 32px;
          left: 32px;
          z-index: 9999;
          width: 48px;
          height: 48px;
          border-radius: 14px;
          background: teal !important;
          color: #fff;
          border: none;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 8px 24px rgba(103, 58, 183, 0.35);
          opacity: 0;
          transform: translateY(16px) scale(0.85);
          transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.25s ease;
          pointer-events: none;
      }

      #gotoTop.visible {
          opacity: 1;
          transform: translateY(0) scale(1);
          pointer-events: auto;
      }

      #gotoTop:hover {
          transform: translateY(-3px) scale(1.08);
          box-shadow: 0 14px 32px rgba(103, 58, 183, 0.45);
      }

      /* navbar */
      :root {
          --teal: #007F80;
          --teal-dark: #006375;
          --teal-light: #e8f6f6;
          --border: rgba(0, 99, 117, 0.15);
          --muted: #5a8a8e;
          --bg: #fff;
          --surface: #ffffff;
          --header-h: 68px;
          --shadow: 0 12px 30px rgba(0, 0, 0, .12);
      }

      .header-logo {
          display: flex;
          align-items: center;
          text-decoration: none;
          padding-left: 10px;
      }

      .header-logo img {
          height: 24px;
          width: auto;
          display: block;
      }

      button {
          font-family: inherit;
      }

      a {
          color: inherit;
          text-decoration: none;
      }

      .mega-backdrop {
          position: fixed;
          inset: 0;
          top: var(--header-h);
          background: rgba(13, 43, 46, .15);
          z-index: 998;
          opacity: 0;
          pointer-events: none;
          transition: opacity .25s;
      }

      .mega-backdrop.visible {
          opacity: 1;
          pointer-events: all;
      }

      .site-header {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          height: var(--header-h);
          background: rgba(255, 255, 255, 0.96);
          backdrop-filter: blur(12px);
          border-bottom: 1px solid var(--border);
          z-index: 1000;
          transition: box-shadow .3s;
      }

      .site-header.scrolled {
          box-shadow: 0 4px 24px rgba(0, 99, 117, 0.08);
      }

      .header-inner {
          max-width: 1200px;
          margin: 0 auto;
          padding: 12px 16px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 14px;
      }

      .header-nav {
          display: flex;
          align-items: center;
          gap: 72px;
      }

      .nav-item {
          position: relative;
      }

      .nav-link {
          display: flex;
          align-items: center;
          gap: 5px;
          padding: 8px 14px;
          border-radius: 8px;
          font-size: 14px;
          font-weight: 600;
          color: var(--text, #0d2b2e);
          text-decoration: none;
          white-space: nowrap;
          cursor: pointer;
          background: none;
          border: none;
          font-family: inherit;
          transition: background .2s, color .2s;
      }

      .nav-link:hover,
      .nav-link.active {
          background: var(--teal-light);
          color: var(--teal-dark);
      }

      .nav-link .chevron,
      .chevron {
          width: 14px;
          height: 14px;
          transition: transform .25s;
          opacity: .5;
          flex-shrink: 0;
      }

      .nav-item.open .nav-link .chevron {
          transform: rotate(180deg);
          opacity: 1;
      }

      .header-actions {
          display: flex;
          align-items: center;
          gap: 12px;
      }

      .lang-switcher {
          font-size: 13px;
          color: var(--muted);
          display: flex;
          align-items: center;
          gap: 4px;
      }

      .lang-switcher a {
          color: var(--muted);
          text-decoration: none;
          transition: color .2s;
      }

      .lang-switcher a:hover {
          color: var(--teal);
      }

      .lang-switcher span {
          opacity: .4;
      }

      .mega-wrapper {
          position: fixed;
          top: var(--header-h);
          left: 0;
          right: 0;
          z-index: 999;
          pointer-events: none;
      }

      .mega-menu {
          position: fixed;
          top: var(--header-h);
          left: 0;
          right: 0;
          height: calc(100vh - var(--header-h));
          background: white;
          z-index: 999;
          opacity: 0;
          transform: translateY(-10px);
          transition: all .25s ease;
          overflow-y: auto;
      }

      .mega-menu.open {
          opacity: 1;
          transform: translateY(0);
          pointer-events: all;
          max-height: 600px;
      }

      .mega-inner {
          width: 100%;
          max-width: 1400px;
          margin: 0 auto;
          padding: 40px 60px;
          display: grid;
          grid-template-columns: 240px 1fr;
          min-height: 100%;
      }

      .mega-tabs {
          background: #f7fbfb;
          border-left: 1px solid var(--border);
          padding: 24px 0;
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      .mega-tab-btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          padding: 13px 20px;
          font-size: 14px;
          font-weight: 700;
          color: var(--muted);
          background: none;
          border: none;
          font-family: inherit;
          cursor: pointer;
          text-align: right;
          transition: all .2s;
          border-right: 3px solid transparent;
          width: 100%;
      }

      .mega-tab-btn:hover {
          color: var(--text, #0d2b2e);
          background: var(--teal-light);
      }

      .mega-tab-btn.active {
          color: var(--teal-dark);
          background: white;
          border-right-color: var(--teal);
          font-weight: 800;
      }

      .mega-tab-btn .tab-arrow {
          width: 14px;
          height: 14px;
          opacity: 0;
          transition: opacity .2s;
          color: var(--teal);
          flex-shrink: 0;
      }

      .mega-tab-btn.active .tab-arrow {
          opacity: 1;
      }

      .mega-content {
          padding: 28px 32px;
          background: white;
          overflow: hidden;
      }

      .mega-panel {
          display: none;
          animation: panelIn .2s ease;
      }

      .mega-panel.active {
          display: block;
      }

      @keyframes panelIn {
          from {
              opacity: 0;
              transform: translateX(-6px);
          }

          to {
              opacity: 1;
              transform: translateX(0);
          }
      }

      .mega-panel-title {
          font-size: 10px;
          font-weight: 800;
          letter-spacing: .18em;
          text-transform: uppercase;
          color: var(--muted);
          margin-bottom: 18px;
          display: flex;
          align-items: center;
          gap: 10px;
      }

      .mega-panel-title::after {
          content: '';
          flex: 1;
          height: 1px;
          background: var(--border);
      }

      .solutions-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 8px;
      }

      .sol-card {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          padding: 14px 16px;
          border-radius: 10px;
          text-decoration: none;
          border: 1px solid transparent;
          transition: all .2s ease;
      }

      .sol-card:hover {
          background: var(--teal-light);
          border-color: rgba(0, 127, 128, .15);
          transform: translateY(-1px);
      }

      .sol-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          border-radius: 9px;
          background: var(--teal-light, #e8f6f6);
          flex-shrink: 0;
      }

      .sol-icon svg {
          width: 20px;
          height: 20px;
          stroke: var(--teal, #007F80);
          flex-shrink: 0;
      }

      .sol-name {
          font-size: 13px;
          font-weight: 700;
          color: var(--text, #0d2b2e);
          line-height: 1.2;
          margin-bottom: 3px;
      }

      .sol-desc {
          font-size: 11px;
          color: var(--muted);
          line-height: 1.4;
      }

      .industry-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 6px;
      }

      .ind-item {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 11px 14px;
          border-radius: 9px;
          text-decoration: none;
          border: 1px solid transparent;
          transition: all .18s;
      }

      .ind-item:hover {
          background: var(--teal-light);
          border-color: rgba(0, 127, 128, .12);
      }

      .ind-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          border-radius: 9px;
          background: var(--teal-light, #e8f6f6);
          flex-shrink: 0;
      }

      .ind-icon svg {
          width: 20px;
          height: 20px;
          stroke: var(--teal, #007F80);
          flex-shrink: 0;
      }

      .ind-name {
          font-size: 12.5px;
          font-weight: 600;
          color: var(--text, #0d2b2e);
          line-height: 1.3;
      }

      .mega-footer {
          grid-column: 1/-1;
          border-top: 1px solid var(--border);
          padding: 14px 32px;
          display: flex;
          align-items: center;
          gap: 24px;
          background: #f7fbfb;
      }

      .mega-footer-tag {
          font-size: 12px;
          color: var(--muted);
      }

      .mega-footer-tag strong {
          color: var(--teal-dark);
      }

      .mobile-drawer {
          position: fixed;
          top: 0;
          right: 0;
          bottom: 0;
          width: min(320px, 86vw);
          background: #fff;
          z-index: 200;
          overflow-y: auto;
          transform: translateX(100%);
          transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
      }

      .mobile-drawer.open {
          transform: translateX(0);
      }

      .mobile-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 16px 20px;
          border-bottom: 1px solid #e4eaf0;
          position: sticky;
          top: 0;
          background: #fff;
          z-index: 5;
      }

      .mobile-title {
          font-size: 17px;
          font-weight: 900;
          color: #006375;
          font-family: 'Tajawal', sans-serif;
      }

      .mobile-close {
          background: none;
          border: none;
          font-size: 20px;
          cursor: pointer;
          color: #5a6a74;
          padding: 4px 8px;
          border-radius: 6px;
          line-height: 1;
      }

      .mobile-nav {
          padding: 12px 16px 40px;
          display: flex;
          flex-direction: column;
          gap: 2px;
          font-family: 'Tajawal', sans-serif;
      }

      .m-link {
          display: block;
          padding: 12px 14px;
          font-size: 15px;
          font-weight: 700;
          color: #2d3a42;
          text-decoration: none;
          border-radius: 8px;
      }

      .m-link:hover {
          background: #f0f9fb;
          color: #006375;
      }

      .m-accordion {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          padding: 12px 14px;
          font-family: 'Tajawal', sans-serif;
          font-size: 15px;
          font-weight: 700;
          color: #2d3a42;
          background: none;
          border: none;
          cursor: pointer;
          border-radius: 10px !important;
          text-align: right;
      }

      .m-accordion.open,
      .m-accordion:hover {
          background: #f0f9fb;
          color: #006375;
      }

      .m-accordion.open {
          border-radius: 10px 10px 0 0 !important;
      }

      .m-chev {
          font-size: 16px;
          transition: transform 0.2s;
          display: inline-block;
      }

      .m-accordion.open .m-chev {
          transform: rotate(180deg);
      }

      .m-panel {
          display: none;
          padding: 4px 0 4px 16px;
          flex-direction: column;
          gap: 1px;
          background: #f7fcfc;
          border-radius: 10px;
          margin: 2px 0 6px 0;
          border-right: 3px solid var(--teal, #007F80);
      }

      .m-panel.open {
          display: flex;
      }

      .m-sublink {
          padding: 10px 16px !important;
          font-size: 14px !important;
          font-weight: 600 !important;
          color: #2d3a42 !important;
          border-radius: 8px;
          display: flex;
          align-items: center;
          gap: 8px;
          text-decoration: none;
      }

      .m-sublink::before {
          content: '';
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background: var(--teal, #007F80);
          flex-shrink: 0;
          opacity: 0.6;
      }

      .m-sublink:hover {
          background: #e8f6f6 !important;
          color: #006375 !important;
      }

      .m-sublink:hover::before {
          opacity: 1;
      }

      .mobile-actions {
          margin-top: 20px;
          padding-top: 20px;
          border-top: 1px solid #e4eaf0;
          display: flex;
          flex-direction: column;
          gap: 12px;
      }

      .hamburger {
          display: none;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 5px;
          width: 40px;
          height: 40px;
          background: none;
          border: none;
          cursor: pointer;
          padding: 6px;
          border-radius: 8px;
      }

      .hamburger span {
          display: block;
          width: 22px;
          height: 2px;
          background: #2d3a42;
          border-radius: 2px;
          transition: all 0.25s;
      }

      @media (max-width: 980px) {
          .header-inner {
              display: grid !important;
              grid-template-columns: 40px 1fr 40px !important;
              align-items: center !important;
              padding: 0 16px !important;
              gap: 0 !important;
          }

          .header-logo {
              grid-column: 2 !important;
              grid-row: 1 !important;
              display: flex !important;
              justify-content: center !important;
              align-items: center !important;
          }

          .hamburger {
              grid-column: 1 !important;
              grid-row: 1 !important;
              justify-self: start !important;
              align-self: center !important;
              display: flex !important;
              margin: 0 !important;
          }

          .header-nav,
          .header-actions {
              display: none !important;
          }
      }

      .site-footer-new {
          background: #006375;
          color: rgba(255, 255, 255, 0.80);
          direction: rtl;
      }

      .footer-inner {
          max-width: 1200px;
          margin: 0 auto;
          padding: 64px 32px 0;
      }

      .footer-top {
          display: grid;
          grid-template-columns: 1fr 2fr;
          gap: 48px;
          padding-bottom: 48px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.15);
      }

      .footer-brand img,
      .footer-logo-text {
          height: 30px;
          width: auto;
          margin-bottom: 16px;
          display: block;
          filter: brightness(0) invert(1);
      }

      .footer-logo-text {
          font-size: 22px;
          font-weight: 900;
          color: white;
          line-height: 30px;
          filter: none;
      }

      .footer-tagline {
          font-size: 0.9rem;
          line-height: 1.8;
          color: rgba(255, 255, 255, 0.60);
          max-width: 260px;
          margin-bottom: 24px;
      }

      .footer-social {
          display: flex;
          gap: 10px;
          flex-wrap: wrap;
      }

      .footer-social-btn {
          width: 40px;
          height: 40px;
          border-radius: 10px;
          background: rgba(255, 255, 255, 0.12);
          border: 1px solid rgba(255, 255, 255, 0.2);
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgba(255, 255, 255, 0.75);
          text-decoration: none;
          transition: all .22s ease;
      }

      .footer-social-btn:hover {
          background: rgba(255, 255, 255, 0.25);
          border-color: rgba(255, 255, 255, 0.5);
          color: white;
          transform: translateY(-2px);
      }

      .footer-social-btn svg {
          width: 17px;
          height: 17px;
      }

      .footer-links-group {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 32px;
      }

      .footer-col h4 {
          font-size: 0.75rem;
          font-weight: 800;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: rgba(255, 255, 255, 0.55);
          margin-bottom: 16px;
      }

      .footer-col a {
          display: block;
          font-size: 0.9rem;
          color: rgba(255, 255, 255, 0.70);
          text-decoration: none;
          margin-bottom: 11px;
          transition: color .2s;
          line-height: 1.4;
      }

      .footer-col a:hover {
          color: white;
      }

      .footer-contact-item {
          display: flex !important;
          align-items: center;
          gap: 9px;
      }

      .footer-contact-item svg {
          width: 15px;
          height: 15px;
          flex-shrink: 0;
          opacity: 0.55;
      }

      .footer-bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 12px;
          padding: 22px 0;
          font-size: 0.82rem;
          color: rgba(255, 255, 255, 0.40);
          border-top: 1px solid rgba(255, 255, 255, 0.10);
          margin-top: 0;
      }

      .footer-bottom strong {
          color: rgba(255, 255, 255, 0.65);
      }

      .footer-bottom-links {
          display: flex;
          align-items: center;
          gap: 10px;
      }

      .footer-bottom-links a {
          color: rgba(255, 255, 255, 0.40);
          text-decoration: none;
          transition: color .2s;
      }

      .footer-bottom-links a:hover {
          color: white;
      }

      .footer-bottom-links span {
          opacity: 0.3;
      }

      @media (max-width: 768px) {
          .footer-top {
              grid-template-columns: 1fr;
              gap: 36px;
          }

          .footer-links-group {
              grid-template-columns: 1fr 1fr;
          }
      }

      @media (max-width: 560px) {
          .footer-links-group {
              grid-template-columns: 1fr 1fr;
          }
      }