@font-face {
 font-family: "Boutros Heading";
 src: url("../fonts/BOUTROSNEWSH1-BOLD.TTF") format("truetype");
 font-style: normal;
 font-weight: 700;
 font-display: swap;
}

@font-face {
 font-family: "Boutros Heading";
 src: url("../fonts/BOUTROSNEWSH1-BOLD.TTF") format("truetype");
 font-style: normal;
 font-weight: 800;
 font-display: swap;
}

@font-face {
 font-family: "Dubai Regular";
 src: url("../fonts/DUBAI-REGULAR.woff2") format("woff2");
 font-style: normal;
 font-weight: 400;
 font-display: swap;
}

@font-face {
 font-family: "Arabic UI Display Heavy";
 src: url("../fonts/ARBFONTS-ARABICUIDISPLAYHEAVY.otf") format("opentype");
 font-style: normal;
 font-weight: 800;
 font-display: swap;
}

:root {
 --body-font: "Dubai Regular", "Segoe UI", Tahoma, sans-serif;
 --display-heading-font: "Boutros Heading", "Segoe UI", Tahoma, sans-serif;
 --heading-font: "Arabic UI Display Heavy", "Segoe UI", Tahoma, sans-serif;
 --bg: #f6f2eb;
 --surface: rgba(255, 255, 255, 0.72);
 --surface-strong: rgba(255, 250, 244, 0.94);
 --text: #18211f;
 --muted: #5d6c68;
 --accent: #0f766e;
 --accent-soft: rgba(15, 118, 110, 0.1);
 --accent-2: #b7791f;
 --border: rgba(24, 33, 31, 0.12);
 --shadow: 0 20px 50px rgba(24, 33, 31, 0.08);
 --shadow-strong: 0 24px 56px rgba(15, 118, 110, 0.22);
}

* {
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
}

body {
 margin: 0;
 font-family: var(--body-font);
 color: var(--text);
 background:
  radial-gradient(circle at top right, rgba(15, 118, 110, 0.12), transparent 28%),
  radial-gradient(circle at top left, rgba(183, 121, 31, 0.12), transparent 26%),
  linear-gradient(180deg, #fcfaf6 0%, #f3eee6 48%, #f7f3ec 100%);
}

h1,
h2 {
 font-family: var(--display-heading-font);
}

h3,
h4,
h5,
h6,
.brand-copy strong,
.highlight strong,
.stat strong,
.testimonial-person strong,
.region-link-copy strong {
 font-family: var(--heading-font);
}

body::before {
 content: "";
 position: fixed;
 inset: 0;
 background-image:
  linear-gradient(rgba(255, 255, 255, 0.42) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255, 255, 255, 0.32) 1px, transparent 1px);
 background-size: 32px 32px;
 opacity: 0.35;
 pointer-events: none;
 mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent 80%);
}

a {
 color: inherit;
 text-decoration: none;
 touch-action: manipulation;
}

img {
 display: block;
 max-width: 100%;
}

button,
input,
textarea,
select,
label {
 touch-action: manipulation;
}

.wrapper {
 position: relative;
 z-index: 1;
 width: min(1120px, calc(100% - 32px));
 margin: 0 auto;
}

@keyframes fade-up {
 from {
  opacity: 0;
  transform: translateY(18px);
 }

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

.site-header {
 padding: 28px 0 18px;
}

.topbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 padding: 14px 18px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 24px;
 backdrop-filter: blur(16px);
 box-shadow: var(--shadow);
 animation: fade-up 0.7s ease both;
}

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

.brand-logo {
 display: block;
 width: auto;
 height: 76px;
 max-width: 100%;
}

.brand-mark {
 display: grid;
 place-items: center;
 width: 46px;
 height: 46px;
 border-radius: 14px;
 background: linear-gradient(135deg, var(--accent), #10b981);
 color: #fff;
 font-size: 1.2rem;
 font-weight: 700;
 box-shadow: 0 12px 24px rgba(15, 118, 110, 0.28);
}

.brand-copy strong {
 display: block;
 font-size: calc(1.55rem);
 font-family: var(--heading-font);
 font-weight: 800;
 color: #0f766e;
}

.brand-copy span {
 color: var(--muted);
 font-size: 0.92rem;
}

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

.nav a {
 padding: 10px 14px;
 border: 1px solid rgba(24, 33, 31, 0.08);
 border-radius: 999px;
 background: rgba(255, 255, 255, 0.78);
 color: var(--muted);
 transition: transform 0.2s ease, color 0.2s ease;
}

.nav-icon-link {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 44px;
 padding: 10px;
 line-height: 1;
}

.nav-icon-link svg {
 width: 18px;
 height: 18px;
 fill: currentColor;
}

.nav a:hover,
.nav a:focus-visible,
.button:hover,
.button:focus-visible,
.link:hover,
.link:focus-visible,
.region-list a:hover,
.region-list a:focus-visible,
.cta-links a:hover,
.cta-links a:focus-visible {
 transform: translateY(-2px);
}

.nav a:hover,
.nav a:focus-visible {
 color: var(--text);
}

.hero {
 padding: 28px 0 36px;
}

.hero-shell {
 display: grid;
 grid-template-columns: 1fr;
 gap: 24px;
 align-items: start;
}

.hero-copy,
.hero-media,
.stat,
.highlight,
.card,
.testimonial-card,
.faq-item,
.panel,
.region-panel,
.cta-shell {
 animation: fade-up 0.75s ease both;
}

.hero-media {
 align-self: start;
 height: fit-content;
 animation-delay: 0.08s;
}

.hero-copy,
.hero-media {
 display: flex;
 flex-direction: column;
 gap: 18px;
 padding: 32px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 32px;
 backdrop-filter: blur(16px);
 box-shadow: var(--shadow);
}

.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 width: fit-content;
 padding: 10px 14px;
 border-radius: 999px;
 background: var(--accent-soft);
 color: var(--accent);
 font-weight: 600;
}

.eyebrow::before {
 content: "";
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: currentColor;
 box-shadow: 0 0 0 8px rgba(15, 118, 110, 0.12);
}

.hero h1 {
 margin: 0;
 font-family: var(--display-heading-font);
 font-size: clamp(2.5rem, 5vw, 4.6rem);
 line-height: 1.05;
 letter-spacing: -0.02em;
}

.hero p,
.section-head p,
.highlight p,
.card p,
.panel p,
.cta-shell p,
.stat span {
 margin: 0;
 color: var(--muted);
 line-height: 1.9;
}

.hero p {
 font-size: 1.08rem;
}

.hero-copy {
 background: linear-gradient(135deg, rgba(15, 118, 110, 0.96), rgba(17, 24, 39, 0.96));
 border-color: transparent;
 box-shadow: var(--shadow-strong);
 color: #f9fbfb;
}

.hero-copy h1 {
 color: #f9fbfb;
}

.hero-copy p {
 color: rgba(249, 251, 251, 0.8);
}

.hero-copy .eyebrow {
 background: rgba(255, 255, 255, 0.12);
 color: #f9fbfb;
}

.hero-copy .eyebrow::before {
 box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.12);
}

.hero-copy .chip {
 background: rgba(255, 255, 255, 0.08);
 border-color: rgba(255, 255, 255, 0.14);
 color: #f9fbfb;
}

.hero-actions,
.hero-note,
.badge-row,
.link-row,
.cta-links {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
}

.button,
.link,
.cta-links a,
.region-list a {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 14px 18px;
 border-radius: 18px;
 font-weight: 600;
 transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.button.primary {
 background: var(--text);
 color: #fff;
 box-shadow: none;
}

.button.secondary,
.link {
 background: rgba(255, 255, 255, 0.92);
 border: 1px solid var(--border);
 color: var(--text);
}

.chip,
.badge {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 10px 12px;
 border-radius: 999px;
 background: #fff;
 border: 1px solid rgba(24, 33, 31, 0.08);
 font-size: 0.92rem;
}

.badge {
 background: var(--accent-soft);
 border-color: transparent;
 color: var(--accent);
 font-weight: 600;
}

.hero-media {
 padding: 18px;
}

.hero-media img {
 width: 100%;
 height: auto;
 aspect-ratio: 16 / 9;
 min-height: 0;
 object-fit: contain;
 background: rgba(24, 33, 31, 0.05);
 border: 1px solid rgba(24, 33, 31, 0.08);
 border-radius: 24px;
}

.media-caption {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 color: var(--muted);
 font-size: 0.95rem;
}

.stats,
.grid,
.quality,
.region-list {
 display: grid;
 gap: 18px;
}

.faq-list {
 position: relative;
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 align-items: start;
 gap: 18px;
 padding: 8px 0;
 isolation: isolate;
}

.faq-list::before,
.faq-list::after {
 content: "";
 position: absolute;
 z-index: -1;
 width: 220px;
 height: 220px;
 border-radius: 50%;
 filter: blur(18px);
 pointer-events: none;
 opacity: 0.45;
}

.faq-list::before {
 top: -24px;
 right: -28px;
 background: radial-gradient(circle, rgba(15, 118, 110, 0.18), transparent 68%);
}

.faq-list::after {
 bottom: -36px;
 left: -20px;
 background: radial-gradient(circle, rgba(183, 121, 31, 0.16), transparent 70%);
}

.stats {
 grid-template-columns: repeat(4, minmax(0, 1fr));
 padding-top: 18px;
 padding-bottom: 32px;
}

.stat {
 padding: 20px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 24px;
 box-shadow: var(--shadow);
}

.stat strong {
 display: block;
 margin-bottom: 8px;
 font-size: 2rem;
}

section {
 padding: 18px 0 36px;
}

.section-head {
 display: flex;
 align-items: end;
 justify-content: space-between;
 gap: 16px;
 margin-bottom: 22px;
}

.section-head h2 {
 margin: 0;
 font-family: var(--display-heading-font);
 font-size: clamp(1.6rem, 3vw, 2.35rem);
}

.section-head p {
 max-width: 38rem;
}

.highlights {
 grid-template-columns: repeat(4, minmax(0, 1fr));
}

.highlight,
.card,
.testimonial-card,
.panel {
 padding: 24px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 28px;
 box-shadow: var(--shadow);
}

.highlight strong,
.panel h3,
.card h3 {
 display: block;
 margin-bottom: 10px;
 font-family: var(--heading-font);
 font-size: 1.15rem;
}

.catalog,
.quality {
 grid-template-columns: repeat(2, minmax(0, 1fr));
}

.testimonials {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 align-items: stretch;
}

.testimonial-card {
 position: relative;
 display: flex;
 flex-direction: column;
 gap: 22px;
 justify-content: space-between;
 min-height: 100%;
 overflow: hidden;
 transition: transform 0.2s ease, border-color 0.2s ease;
}

.testimonial-card:hover,
.testimonial-card:focus-within {
 transform: translateY(-2px);
 border-color: rgba(15, 118, 110, 0.18);
}

.testimonial-card::before {
 content: '"';
 position: absolute;
 top: 18px;
 inset-inline-start: 20px;
 font-family: var(--heading-font);
 font-size: 4.2rem;
 line-height: 1;
 color: rgba(15, 118, 110, 0.12);
 pointer-events: none;
}

.testimonial-quote {
 margin: 0;
 padding-top: 18px;
}

.testimonial-quote p {
 margin: 0;
 color: var(--text);
 font-size: 1rem;
 line-height: 2;
}

.testimonial-person {
 display: flex;
 flex-direction: column;
 gap: 6px;
 padding-top: 16px;
 border-top: 1px solid rgba(24, 33, 31, 0.08);
}

.testimonial-person strong {
 font-size: 1rem;
}

.testimonial-person span {
 color: var(--muted);
 font-size: 0.88rem;
}

.faq-item {
 position: relative;
 background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 250, 244, 0.8));
 border: 1px solid rgba(24, 33, 31, 0.1);
 border-radius: 32px;
 box-shadow: 0 18px 46px rgba(24, 33, 31, 0.09);
 backdrop-filter: blur(18px);
 overflow: hidden;
 transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, background-color 0.24s ease;
}

.faq-item:hover,
.faq-item:focus-within {
 transform: translateY(-2px);
 border-color: rgba(15, 118, 110, 0.22);
 box-shadow: 0 26px 58px rgba(15, 118, 110, 0.12);
}

.faq-item[open] {
 background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 252, 251, 0.88));
 border-color: rgba(15, 118, 110, 0.24);
 box-shadow: 0 28px 60px rgba(15, 118, 110, 0.16);
}

.faq-item summary {
 position: relative;
 display: grid;
 grid-template-columns: 1fr auto;
 align-items: start;
 gap: 18px;
 padding: 26px 28px 22px 32px;
 cursor: pointer;
 list-style: none;
}

.faq-item summary::-webkit-details-marker {
 display: none;
}

.faq-item summary > span:first-child {
 font-size: 1.1rem;
 font-weight: 700;
 line-height: 1.8;
 letter-spacing: -0.01em;
}

.faq-item[open] summary > span:first-child {
 color: var(--accent);
}

.faq-item summary:focus-visible {
 outline: none;
}

.faq-toggle {
 display: grid;
 place-items: center;
 flex: none;
 position: relative;
 width: 48px;
 height: 48px;
 border-radius: 18px;
 background: linear-gradient(135deg, rgba(15, 118, 110, 0.14), rgba(183, 121, 31, 0.1));
 border: 1px solid rgba(15, 118, 110, 0.14);
 color: var(--accent);
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
 transition: transform 0.24s ease, background-color 0.24s ease, border-color 0.24s ease, color 0.24s ease, box-shadow 0.24s ease;
}

.faq-toggle::before,
.faq-toggle::after {
 content: "";
 position: absolute;
 width: 12px;
 height: 2px;
 border-radius: 999px;
 background: currentColor;
 transition: transform 0.24s ease, opacity 0.24s ease;
}

.faq-toggle::before {
 transform: translateX(-4px) rotate(45deg);
}

.faq-toggle::after {
 transform: translateX(4px) rotate(-45deg);
}

.faq-item summary:focus-visible .faq-toggle {
 box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.faq-item[open] .faq-toggle {
 background: linear-gradient(135deg, var(--accent), #0b5f59);
 border-color: transparent;
 color: #fff;
 box-shadow: 0 14px 28px rgba(15, 118, 110, 0.24);
}

.faq-item[open] .faq-toggle::before {
 transform: translateX(-4px) rotate(-45deg);
}

.faq-item[open] .faq-toggle::after {
 opacity: 1;
 transform: translateX(4px) rotate(45deg);
}

.faq-answer {
 padding: 0 28px 28px 32px;
}

.faq-answer::before {
 content: "";
 display: block;
 height: 1px;
 background: linear-gradient(90deg, rgba(15, 118, 110, 0.2), rgba(24, 33, 31, 0.05));
}

.faq-answer p {
 margin: 18px 0 0;
 max-width: 46rem;
 color: var(--muted);
 line-height: 1.9;
}

.card {
 display: flex;
 flex-direction: column;
 gap: 16px;
}

.card .badge-row {
 gap: 8px;
}

.card .badge {
 padding: 8px 12px;
 background: rgba(15, 118, 110, 0.09);
 border: 1px solid rgba(15, 118, 110, 0.16);
 color: var(--accent);
 font-size: 0.84rem;
 font-weight: 700;
}

.card .link-row {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 gap: 10px;
 align-items: stretch;
 padding-top: 6px;
}

.card .link {
 width: 100%;
 min-height: 52px;
 border-radius: 16px;
 background: rgba(255, 255, 255, 0.98);
 border: 1px solid rgba(24, 33, 31, 0.12);
 color: var(--text);
 box-shadow: none;
}

.card-top {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 16px;
}

.card .link.primary {
 background: var(--accent);
 border-color: transparent;
 color: #fff;
 box-shadow: none;
}

.region-panel {
 padding: 28px;
 background: linear-gradient(180deg, rgba(24, 33, 31, 0.94), rgba(24, 33, 31, 0.88));
 border-radius: 32px;
 color: #f8faf8;
 box-shadow: 0 24px 48px rgba(12, 16, 15, 0.18);
}

.region-panel h3 {
 margin-top: 0;
 margin-bottom: 12px;
 font-size: 1.4rem;
}

.region-panel p {
 margin-bottom: 18px;
 color: rgba(248, 250, 248, 0.76);
}

.region-list {
 grid-template-columns: repeat(3, minmax(0, 1fr));
}

.region-list a {
 display: grid;
 gap: 8px;
 align-content: start;
 justify-content: flex-start;
 background: rgba(255, 255, 255, 0.08);
 border: 1px solid rgba(255, 255, 255, 0.1);
 color: #f8faf8;
}

.region-link-copy {
 display: grid;
 gap: 6px;
}

.region-link-copy strong {
 font-size: 1rem;
}

.region-link-copy span {
 color: rgba(248, 250, 248, 0.76);
 font-size: 0.9rem;
 line-height: 1.8;
}

.checklist {
 display: grid;
 gap: 12px;
}

.check {
 display: flex;
 gap: 12px;
 align-items: flex-start;
 line-height: 1.9;
 color: var(--muted);
}

.check::before {
 content: "";
 flex: none;
 width: 11px;
 height: 11px;
 margin-top: 0.6rem;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--accent), #10b981);
 box-shadow: 0 0 0 8px rgba(15, 118, 110, 0.08);
}

.cta {
 padding-bottom: 56px;
}

.cta-shell {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
 padding: 32px;
 background: linear-gradient(135deg, rgba(15, 118, 110, 0.96), rgba(17, 24, 39, 0.96));
 border-radius: 36px;
 color: #f9fbfb;
 box-shadow: var(--shadow-strong);
}

.cta-shell p {
 max-width: 38rem;
 color: rgba(249, 251, 251, 0.78);
}

.cta-links a {
 background: #f9fbfb;
 color: #12211e;
 font-weight: 700;
}

.site-footer {
 padding: 0 0 32px;
 color: var(--muted);
 font-size: 0.95rem;
}

.footer-shell {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding-top: 18px;
 border-top: 1px solid rgba(24, 33, 31, 0.1);
}

.notice-panel h3 {
 margin-top: 0;
 margin-bottom: 12px;
}

.notice-panel p {
 margin: 0;
 line-height: 1.9;
 color: var(--muted);
}

@media (max-width: 980px) {
 .hero-shell,
 .catalog,
 .quality {
  grid-template-columns: 1fr;
 }

 .faq-list {
  grid-template-columns: 1fr;
 }

 .stats,
 .highlights,
 .region-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }

 .testimonials {
  grid-template-columns: 1fr;
 }

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

@media (max-width: 640px) {
 .wrapper {
  width: min(1120px, calc(100% - 20px));
 }

 .brand-logo {
  height: 64px;
 }

 .topbar {
  padding: 14px;
  border-radius: 20px;
 }

 .nav {
  display: none;
 }

 .hero-copy,
 .hero-media,
 .stat,
 .highlight,
 .card,
 .testimonial-card,
 .panel {
  padding: 22px;
  border-radius: 22px;
 }

 .faq-item {
  border-radius: 24px;
 }

 .faq-item summary {
  gap: 14px;
  padding: 22px 22px 18px 26px;
 }

 .faq-answer {
  padding: 0 22px 22px 26px;
 }

 .faq-toggle {
  width: 42px;
  height: 42px;
  border-radius: 14px;
 }

 .hero-actions,
 .cta-links {
  width: 100%;
 }

 .button,
 .cta-links a,
 .link,
 .region-list a {
  width: 100%;
 }

 .stats,
 .highlights,
 .region-list {
  grid-template-columns: 1fr;
 }

 .cta-shell,
 .region-panel {
  padding: 24px;
  border-radius: 28px;
 }
}