*{margin: 0;padding: 0;box-sizing: border-box}html{scroll-behavior: smooth;scroll-padding-top: 80px}body{font-family: 'Inter', 'Roboto', sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;overflow-x: hidden}[x-cloak]{display: none !important}::selection{background: #105625;color: white}::-webkit-scrollbar{width: 8px}::-webkit-scrollbar-track{background: #f1f1f1}::-webkit-scrollbar-thumb{background: #105625;border-radius: 4px}::-webkit-scrollbar-thumb:hover{background: #0e4b20}#navbar{transition:background-color .3s ease,box-shadow .3s ease !important}#navbar.scrolled{background: rgba(255, 255, 255, 0.98);box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08)}.nav-link{position: relative;outline: none}.nav-link:focus,.nav-link:active{outline: none}.nav-link::after{content: '';position: absolute;bottom: -4px;left: 0;width: 0;height: 2px;background: #105625;transition: width 0.3s ease;border-radius: 1px}.nav-link:hover::after, .nav-link.active::after{width: 100%}.nav-link:visited{color:rgb(49 63 78)}.hero-content{opacity: 0;transform: translateY(30px)}.hero-content.animate-in{animation: fadeSlideUp 0.8s ease forwards}.hero-stat{opacity: 0;transform: translateY(20px)}.hero-stat.animate-in{animation: fadeSlideUp 0.6s ease forwards}.timeline-item{opacity: 0;transform: translateY(40px)}.timeline-item.animate-in{opacity: 1;transform: translateY(0);transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1)}.service-card{opacity: 0;transform: translateY(30px)}.service-card.animate-in{animation: fadeSlideUp 0.5s ease forwards}.project-card{transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1)}.partner-card{opacity: 0;transform: translateY(30px)}.partner-card.animate-in{animation: fadeSlideUp 0.5s ease forwards}.stat-counter{opacity: 0;transform: translateY(20px)}.stat-counter.animate-in{animation: fadeSlideUp 0.5s ease forwards}.stat-num{direction:ltr;unicode-bidi:isolate}#backToTop.visible{opacity: 1;pointer-events: auto}@keyframes fadeSlideUp{from{opacity: 0;transform: translateY(30px)}to{opacity: 1;transform: translateY(0)}}@keyframes fadeIn{from{opacity: 0}to{opacity: 1}}@keyframes scaleIn{from{opacity: 0;transform: scale(0.9)}to{opacity: 1;transform: scale(1)}}@keyframes slideInLeft{from{opacity: 0;transform: translateX(-40px)}to{opacity: 1;transform: translateX(0)}}@keyframes slideInRight{from{opacity: 0;transform: translateX(40px)}to{opacity: 1;transform: translateX(0)}}@keyframes pulseGlow{0%, 100%{box-shadow: 0 0 0 0 rgba(16, 86, 37, 0.4)}50%{box-shadow: 0 0 0 15px rgba(16, 86, 37, 0)}}[dir="rtl"] body{font-family: 'Noto Sans Arabic', 'Tahoma', sans-serif}#navbar{direction:ltr;text-align:left}[dir="rtl"] #navbar a.block{text-align:right}.nav-links{gap: 1.25rem !important;flex:1;justify-content:center}[dir="rtl"] .nav-links{flex-direction:row-reverse}.nav-actions{gap: 0.75rem !important;flex-shrink:0;position: relative;z-index: 2}[dir="rtl"] .ml-16{margin-left: 0;margin-right: 4rem}[dir="rtl"] .text-right{text-align: left}[dir="rtl"] .md\:text-right{text-align: left}[dir="rtl"] .text-left{text-align: right}[dir="rtl"] .md\:text-left{text-align: right}[dir="rtl"] .flex-row{flex-direction: row-reverse}
/* === RTL: flip directional Tailwind utilities used in markup === */
[dir="rtl"] .ml-1{margin-left:0;margin-right:.25rem}[dir="rtl"] .ml-2{margin-left:0;margin-right:.5rem}[dir="rtl"] .ml-3{margin-left:0;margin-right:.75rem}[dir="rtl"] .ml-4{margin-left:0;margin-right:1rem}[dir="rtl"] .ml-auto{margin-left:0;margin-right:auto}
[dir="rtl"] .mr-1{margin-right:0;margin-left:.25rem}[dir="rtl"] .mr-2{margin-right:0;margin-left:.5rem}[dir="rtl"] .mr-3{margin-right:0;margin-left:.75rem}[dir="rtl"] .mr-4{margin-right:0;margin-left:1rem}[dir="rtl"] .mr-auto{margin-right:0;margin-left:auto}
[dir="rtl"] .pl-2{padding-left:0;padding-right:.5rem}[dir="rtl"] .pl-3{padding-left:0;padding-right:.75rem}[dir="rtl"] .pl-4{padding-left:0;padding-right:1rem}[dir="rtl"] .pl-6{padding-left:0;padding-right:1.5rem}[dir="rtl"] .pl-10{padding-left:0;padding-right:2.5rem}@media (max-width:1023.98px){[dir="rtl"] .specialty-col-content.lg\:pl-10{padding-left:1rem;padding-right:1rem}}
[dir="rtl"] .pr-2{padding-right:0;padding-left:.5rem}[dir="rtl"] .pr-3{padding-right:0;padding-left:.75rem}[dir="rtl"] .pr-4{padding-right:0;padding-left:1rem}[dir="rtl"] .pr-6{padding-right:0;padding-left:1.5rem}
[dir="rtl"] .right-0{right:auto;left:0}[dir="rtl"] .right-2{right:auto;left:.5rem}[dir="rtl"] .right-4{right:auto;left:1rem}[dir="rtl"] .right-6{right:auto;left:1.5rem}[dir="rtl"] .right-8{right:auto;left:2rem}
[dir="rtl"] .left-0{right:0}[dir="rtl"] .left-4{left:auto;right:1rem}[dir="rtl"] .left-6{left:auto;right:1.5rem}[dir="rtl"] .left-8{left:auto;right:2rem}
[dir="rtl"] .border-l{border-left:0;border-right-width:1px}[dir="rtl"] .border-r{border-right:0;border-left-width:1px}
/* Mirror icons that point in a directional way (chevrons, arrows). Add class="flip-rtl" to the SVG.
   Mirror at the <path> level so the SVG element's own transform stack (translate, etc.) keeps working. */
[dir="rtl"] svg.flip-rtl > path,[dir="rtl"] svg.flip-rtl path{transform-box:fill-box;transform-origin:center;transform:scaleX(-1)}
/* File input button spacing in forms */
[dir="rtl"] input[type="file"]::file-selector-button,[dir="rtl"] input[type="file"]::-webkit-file-upload-button{margin-right:0;margin-left:1rem}
/* Mobile-only overrides */
@media (max-width:767px){
    .uppercase{text-transform:math-auto}
}
/* === RTL: flip Tailwind translate-x-* utilities (override the CSS variable so other transforms keep working) === */
[dir="rtl"] .translate-x-1{--tw-translate-x:-0.25rem}
[dir="rtl"] .translate-x-2{--tw-translate-x:-0.5rem}
[dir="rtl"] .translate-x-4{--tw-translate-x:-1rem}
[dir="rtl"] .-translate-x-1{--tw-translate-x:0.25rem}
[dir="rtl"] .-translate-x-2{--tw-translate-x:0.5rem}
[dir="rtl"] .-translate-x-4{--tw-translate-x:1rem}
[dir="rtl"] .group:hover .group-hover\:translate-x-1{--tw-translate-x:-0.25rem}
[dir="rtl"] .group:hover .group-hover\:translate-x-2{--tw-translate-x:-0.5rem}
[dir="rtl"] .group:hover .group-hover\:-translate-x-1{--tw-translate-x:0.25rem}
[dir="rtl"] .group:hover .group-hover\:-translate-x-2{--tw-translate-x:0.5rem}
[dir="rtl"] .group:hover .group-hover\:translate-x-0{--tw-translate-x:0px}
/* === RTL: Tailwind space-x-* uses ::not(:last-child) margin-left, which doesn't auto-flip === */
[dir="rtl"] .space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:1}
[dir="rtl"] .space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:1}
[dir="rtl"] .space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:1}
[dir="rtl"] .space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:1}
[dir="rtl"] .space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:1}
@media (max-width: 768px){html{scroll-padding-top: 64px}.hero-content h1{font-size: 2.25rem}.timeline-item .md\:w-5\/12{width: 100%}}@media (max-width: 480px){.hero-content h1{font-size: 1.875rem}}.page-loader{position: fixed;inset: 0;background: white;z-index: 9999;display: flex;align-items: center;justify-content: center;transition: opacity 0.5s ease, visibility 0.5s ease}.page-loader.hidden{opacity: 0;visibility: hidden}.loader-spinner{width: 48px;height: 48px;border: 3px solid #f0f0f0;border-top-color: #105625;border-radius: 50%;animation: spin 0.8s linear infinite}@keyframes spin{to{transform: rotate(360deg)}}@media print{#navbar, #backToTop, .page-loader{display: none !important}section{page-break-inside: avoid}body{color: black;background: white}}
/* Language switcher: dynamic flag indicator */
.lang-switch{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .75rem;border:1px solid #b3bdc8;border-radius:9999px;background:#fff;color:#313f4e;font-size:.75rem;font-weight:500;line-height:1;transition:border-color .2s ease,color .2s ease,background-color .2s ease,box-shadow .2s ease;cursor:pointer;user-select:none;outline:none;direction:ltr}
.lang-switch:hover{border-color:#105625;color:#105625}
.lang-switch:focus-visible{border-color:#105625;color:#105625;box-shadow:0 0 0 3px rgba(16,86,37,.18)}
.lang-switch[aria-expanded="true"]{border-color:#105625;color:#105625;box-shadow:0 0 0 3px rgba(16,86,37,.12)}
.lang-switch__flag{width:1.25rem;height:1.25rem;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;background:#f1f1f1;border:1px solid rgba(0,0,0,.06)}
.lang-switch__flag svg{width:100%;height:100%;display:block}
.lang-switch__code{font-weight:600;letter-spacing:.04em;min-width:1.25rem;text-align:center}
.lang-switch__chevron{width:.625rem;height:.625rem;transition:transform .2s ease;flex-shrink:0;opacity:.7}
.lang-switch[aria-expanded="true"] .lang-switch__chevron{transform:rotate(180deg);opacity:1}
.lang-menu{position:absolute;top:calc(100% + .5rem);right:0;width:12rem;background:#fff;border-radius:.875rem;box-shadow:0 12px 32px rgba(15,23,42,.12),0 4px 10px rgba(15,23,42,.04);border:1px solid #e5e7eb;padding:.375rem;z-index:60}
.lang-menu__item{display:flex;align-items:center;gap:.625rem;width:100%;padding:.5rem .625rem;border-radius:.5rem;font-size:.875rem;color:#313f4e;background:transparent;border:0;cursor:pointer;text-align:left;transition:background-color .15s ease,color .15s ease;outline:none}
.lang-menu__item:hover,.lang-menu__item:focus-visible{background:#e8f5ec;color:#105625}
.lang-menu__item[aria-current="true"]{background:#e8f5ec;color:#105625;font-weight:600}
.lang-menu__flag{width:1.125rem;height:1.125rem;border-radius:9999px;overflow:hidden;flex-shrink:0;border:1px solid rgba(0,0,0,.06);display:inline-flex;align-items:center;justify-content:center;background:#f1f1f1}
.lang-menu__flag svg{width:100%;height:100%;display:block}
.lang-menu__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-menu__check{width:.875rem;height:.875rem;flex-shrink:0;color:#105625}
/* Keep multi-word Latin names together as a single unbreakable LTR unit inside RTL text.
   direction:ltr forces source-order display so mixed "X و Y" patterns inside <bdi> read X then Y. */
.ltr-keep{white-space:nowrap;unicode-bidi:isolate;direction:ltr}
/* === Footer multilingual typography polish (applies at every breakpoint) ===
   Two-layer rule so the footer renders consistently in EN / AR / DE:
   1) Phone & email atoms are inline data — must never split mid-string.
      tabular-nums also gives the phone digits even widths so numbers in
      different locales line up cleanly under each other.
   2) Everything else (headings, list items, link labels) breaks at proper
      hyphenation points using the per-element [lang] dictionary
      (set by i18n.min.js on <html>), avoiding the ugly mid-syllable
      wrapping you get from word-break:break-all / overflow-wrap:anywhere
      on long German compounds like "Datenschutzerklärung". */
footer a[href^="tel:"],footer a[href^="mailto:"]{white-space:nowrap;font-variant-numeric:tabular-nums}
footer h4,footer ul li,footer ul li a:not([href^="tel:"]):not([href^="mailto:"]){overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
/* === Mobile footer (<768px): 3-column compact layout for Quick Links / Services / Contact === */
@media (max-width:767px){
    footer > .max-w-7xl{padding-top:2.5rem;padding-bottom:1rem}
    footer h4{font-size:.7rem;margin-bottom:.6rem;letter-spacing:.04em;line-height:1.25}
    footer ul{font-size:.7rem;line-height:1.4}
    footer ul.space-y-3 > :not([hidden]) ~ :not([hidden]){margin-top:.4rem !important}
    /* Tel/mailto keep their universal nowrap from the rule above; everything
       else stays soft-breakable. Slightly tighter phone tracking on the
       narrowest viewports so "+963 11 231 71 71" still fits the column. */
    footer ul li,footer ul li a:not([href^="tel:"]):not([href^="mailto:"]){overflow-wrap:break-word}
    footer a[href^="tel:"]{letter-spacing:-.01em}
    footer ul li.flex{gap:.3rem;justify-content:center}
    footer ul li svg{width:.75rem;height:.75rem;margin-top:.15rem}
    /* Visual balance: center column headings (so middle column lands at screen centre)
       and centre text in icon-less columns. Contact keeps its icon-on-start flow. */
    footer h4{text-align:center}
    footer ul:not(:has(svg)){text-align:center}
}