@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;
           }

           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:nth-child(9) {
               animation-delay: .45s
           }

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

           .section:nth-child(11) {
               animation-delay: .55s
           }

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

           .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;
               display: flex;
               flex-direction: column;
               gap: 0.5rem;
               padding: 0;
           }

           .section-body ul li {
               display: flex !important;
               flex-direction: column !important;
               gap: 0.2rem;
               font-size: 0.92rem;
               line-height: 1.7;
               padding: 0.6rem 0.8rem !important;
               border-radius: 8px;
               background: var(--cream) !important;
               border: 1px solid var(--border) !important;
               width: 100% !important;
               box-sizing: border-box !important;
           }

           .section-body ul li::before {
               content: none !important;
           }

           .section-body ul li strong {
               display: flex;
               align-items: center;
               gap: 0.5rem;
               color: var(--teal2);
           }

           .section-body ul li strong::before {
               content: '←';
               color: var(--teal);
               font-size: 0.9rem;
               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);
           }

           :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;
               }
           }