@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/amiri-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/amiri-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/amiri-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/amiri-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
  --east-oud-black: #080806;
  --east-oud-charcoal: #11110f;
  --east-oud-panel: #181713;
  --east-oud-gold: #b59655;
  --east-oud-gold-hover: #c8aa68;
  --east-oud-ivory: #f1ede3;
  --east-oud-muted: #b8b1a3;
  --east-oud-border: rgb(181 150 85 / 38%);
}

html { background: var(--east-oud-black); }
body { background: var(--east-oud-black) !important; color: var(--east-oud-ivory) !important; }
body.bg-light { background: var(--east-oud-black) !important; }

h1, h2, h3, h4 { font-family: 'Amiri', 'Tajawal', serif; letter-spacing: 0; }
p, li, span { letter-spacing: 0; }

.text-\[clamp\(2\.5rem\,5vw\,4rem\)\] { font-size: 2.5rem !important; }
.text-\[clamp\(1\.2rem\,2vw\,1\.8rem\)\] { font-size: 1.2rem !important; }
.text-\[clamp\(1\.8rem\,3vw\,2\.5rem\)\] { font-size: 1.8rem !important; }
.text-\[clamp\(1rem\,1\.5vw\,1\.2rem\)\] { font-size: 1rem !important; }

#navbar {
  background: #080806 !important;
  border-bottom: 1px solid var(--east-oud-border);
  box-shadow: 0 8px 30px rgb(0 0 0 / 28%) !important;
}
#navbar a:not([href^='https://wa.me/']) { color: var(--east-oud-muted); }
#navbar a:not([href^='https://wa.me/']):hover,
#navbar a:not([href^='https://wa.me/']):focus-visible { color: var(--east-oud-gold-hover); }
#navbar .text-2xl { color: var(--east-oud-ivory); font-family: 'Amiri', 'Tajawal', serif; }
#navbar .fa { font-family: FontAwesome; }
#mobile-menu { background: #080806 !important; border-top: 1px solid var(--east-oud-border); }

body > section:nth-of-type(odd) { background-color: var(--east-oud-black) !important; }
body > section:nth-of-type(even) { background-color: var(--east-oud-charcoal) !important; }
body > section:first-of-type { background-color: var(--east-oud-black) !important; }
body > section:first-of-type .bg-dark\/50 { background-color: rgb(0 0 0 / 68%) !important; }
body > section:first-of-type h1 { color: var(--east-oud-ivory); text-shadow: 0 3px 18px rgb(0 0 0 / 72%); }

.bg-white,
:not(body).bg-light { background-color: var(--east-oud-panel) !important; }
.bg-secondary\/20, .bg-primary\/5 { background-color: var(--east-oud-charcoal) !important; }
.bg-primary\/10 { background-color: rgb(181 150 85 / 12%) !important; }
.bg-primary\/20 { background-color: rgb(181 150 85 / 18%) !important; }
.bg-primary\/30 { background-color: rgb(181 150 85 / 30%) !important; }
.bg-primary { background-color: var(--east-oud-gold) !important; color: var(--east-oud-black) !important; }
.bg-accent { background-color: var(--east-oud-gold) !important; }
.hover\:bg-accent:hover { background-color: var(--east-oud-gold-hover) !important; }
.hover\:bg-accent\/90:hover { background-color: var(--east-oud-gold-hover) !important; }
.bg-dark { background-color: var(--east-oud-black) !important; }

.bg-green-600,
.bg-green-500,
.bg-red-500,
.bg-orange-500 { background-color: var(--east-oud-gold) !important; }

.text-green-500,
.text-red-500,
.text-yellow-400,
.text-yellow-300 { color: var(--east-oud-gold) !important; }

.hover\:bg-green-600:hover,
.hover\:bg-red-600:hover { background-color: var(--east-oud-gold-hover) !important; }

.text-dark, .text-white { color: var(--east-oud-ivory) !important; }
.text-gray-600 { color: var(--east-oud-muted) !important; }
.text-primary, .text-accent { color: var(--east-oud-gold) !important; }
.border-accent { border-color: var(--east-oud-gold) !important; }
.border-gray-200, .border-gray-700 { border-color: var(--east-oud-border) !important; }

.shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
  border-color: var(--east-oud-border);
  box-shadow: 0 14px 34px rgb(0 0 0 / 24%) !important;
}
section .shadow-md, section .shadow-lg, section .shadow-xl, section .shadow-2xl {
  border-style: solid;
  border-width: 1px;
}
.rounded-lg, .rounded-xl { border-radius: 4px !important; }

section img.rounded-lg,
section .overflow-hidden img { filter: saturate(.82) contrast(1.05); }
.hover-scale:hover { transform: translateY(-3px); }

a[href^='https://wa.me/'][class~='bg-green-500'],
a[href^='https://wa.me/'][class~='bg-primary'] {
  background-color: #16a34a !important;
  border-color: #22c55e !important;
  color: #fff !important;
}
a[href^='https://wa.me/'][class~='bg-green-500']:hover,
a[href^='https://wa.me/'][class~='bg-green-500']:focus-visible,
a[href^='https://wa.me/'][class~='bg-primary']:hover,
a[href^='https://wa.me/'][class~='bg-primary']:focus-visible { background-color: #15803d !important; }

a[href='#'][aria-label] {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.5rem;
  background: transparent !important;
  border: 1px solid var(--east-oud-border);
  color: var(--east-oud-gold) !important;
}
.space-x-4 > a[href='#'][aria-label] ~ a[href='#'][aria-label] {
  margin-left: 0 !important;
  margin-right: 1rem !important;
}
.fa-tiktok::before { content: '\f001'; }
a[href='#'][aria-label]:hover,
a[href='#'][aria-label]:focus-visible { border-color: var(--east-oud-gold-hover); color: var(--east-oud-gold-hover) !important; }

footer { background: var(--east-oud-black) !important; border-top: 1px solid var(--east-oud-border); }
#back-to-top {
  background: var(--east-oud-black) !important;
  border: 1px solid var(--east-oud-gold);
  border-radius: 50%;
  color: var(--east-oud-gold) !important;
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--east-oud-gold-hover);
  outline-offset: 3px;
}

#navbar { padding-block: 0 !important; }
#navbar > .container { padding-block: .75rem; }
#navbar .space-x-8 { gap: 1.25rem; }
#navbar .space-x-8 > * + * { margin-inline: 0 !important; }

.east-hero {
  height: clamp(38rem, 72vh, 50rem) !important;
  min-height: 38rem;
}
.east-hero > .absolute img {
  object-position: center center;
  filter: saturate(.9) contrast(1.04);
}
.east-hero > .absolute .bg-dark\/50 { background-color: rgb(0 0 0 / 52%) !important; }
.east-hero__content {
  display: grid;
  justify-items: start;
  margin-inline: auto;
  text-align: right;
}
.east-hero__content > h1,
.east-hero__content > p {
  width: min(36rem, 44vw);
  margin-inline: 0;
}
.east-hero__content > div { justify-content: flex-start; }
.east-hero .animate-bounce { animation: none; }

.east-products,
.east-about,
.east-video,
.east-production,
.east-market,
.east-cooperation,
.east-effects,
.east-process,
.east-testimonials,
.east-contact { scroll-margin-top: 5rem; }

.east-products__grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  align-items: stretch;
}
.east-product-feature {
  grid-column: 1 / -1 !important;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
}
.east-product-feature > .relative { min-height: 30rem; }
.east-product-feature > .relative img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.east-product-feature > .p-6 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem;
}
.east-product-card { display: grid; grid-template-rows: 18rem 1fr; }
.east-product-card:nth-of-type(2) { grid-row: span 2; }
.east-product-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.east-product-description + .east-product-description {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--east-oud-border);
}
.east-product-description p { line-height: 1.85; }
.east-product-card--portrait { grid-template-rows: auto 1fr; }
.east-product-card--portrait img,
.east-video__image { width: 100%; height: auto; display: block; }
.east-product-card > .p-6 { display: flex; flex-direction: column; }
.east-product-card > .p-6 > div:last-child { margin-top: auto; }

.east-proof-grid { grid-template-columns: 1.2fr .9fr .9fr; }
.east-proof-grid > div {
  box-shadow: none !important;
  border-top: 1px solid var(--east-oud-border);
}
.east-video__frame {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .55fr);
  max-width: 80rem;
}
.east-video__frame > .aspect-w-16 { min-height: 0; align-self: start; }

.east-production__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.east-production__item {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  border-radius: 0 !important;
}
.east-production__item:nth-child(even) { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.east-production__item:nth-child(even) img { order: 2; }
.east-production__item img {
  width: 100%;
  height: 100%;
  min-height: 22rem;
  object-fit: cover;
}
.east-production__item > .p-6 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem;
}

.east-process__timeline > div { gap: 2rem; }
.east-process__timeline img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.east-testimonials .shadow-lg,
.east-contact .shadow-lg { box-shadow: none !important; }

@media (max-width: 767px) {
  #navbar { box-shadow: 0 5px 20px rgb(0 0 0 / 34%) !important; }
  #navbar > .container { padding-block: .625rem; }
  body > section:first-of-type h1 { line-height: 1.25; }
  .east-hero {
    height: 78svh !important;
    min-height: 39rem;
    max-height: 48rem;
    align-items: end;
    padding-bottom: 4.5rem;
  }
  .east-hero > .absolute img { object-position: 54% center; }
  .east-hero > .absolute .bg-dark\/50 { background-color: rgb(0 0 0 / 58%) !important; }
  .east-hero__content { justify-items: stretch; text-align: center; }
  .east-hero__content > h1 {
    max-width: 100%;
    font-size: 2rem !important;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .east-hero__content > h1,
  .east-hero__content > p { width: 100%; }
  .east-hero__content > div,
  .east-hero__content a { width: 100%; justify-content: center; }
  .east-hero .animate-bounce { display: none; }
  .east-products, .east-about, .east-production, .east-market,
  .east-cooperation, .east-effects, .east-process,
  .east-testimonials, .east-contact { padding-block: 4rem; }
  .east-products__grid,
  .east-product-feature,
  .east-video__frame,
  .east-production__item,
  .east-production__item:nth-child(even) { grid-template-columns: 1fr; }
  .east-product-feature > .relative { min-height: 18rem; }
  .east-product-feature > .p-6 { padding: 1.5rem; }
  .east-product-card { grid-template-rows: 15rem 1fr; }
  .east-product-card--portrait { grid-template-rows: auto 1fr; }
  .east-product-card:nth-of-type(2) { grid-row: auto; }
  .east-proof-grid { grid-template-columns: 1fr; }
  .east-production__item:nth-child(even) img { order: initial; }
  .east-production__item img { min-height: 16rem; }
  .east-production__item > .p-6 { padding: 1.5rem; }
  .east-effects .-right-6 { right: 0 !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #navbar .hidden.md\:flex { display: none !important; }
  #navbar > .container > .md\:hidden { display: block !important; }
  #mobile-menu.md\:hidden:not(.hidden) { display: block !important; }
  .east-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .east-product-feature { grid-template-columns: 1fr 1fr; }
  .east-proof-grid { grid-template-columns: 1fr; }
  .east-video__frame { grid-template-columns: 1.15fr .85fr; }
}

@media (min-width: 768px) {
  .text-\[clamp\(2\.5rem\,5vw\,4rem\)\] { font-size: 3.25rem !important; }
  .text-\[clamp\(1\.2rem\,2vw\,1\.8rem\)\] { font-size: 1.5rem !important; }
  .text-\[clamp\(1\.8rem\,3vw\,2\.5rem\)\] { font-size: 2.15rem !important; }
  .text-\[clamp\(1rem\,1\.5vw\,1\.2rem\)\] { font-size: 1.1rem !important; }
}

@media (min-width: 1280px) {
  .text-\[clamp\(2\.5rem\,5vw\,4rem\)\] { font-size: 4rem !important; }
  .text-\[clamp\(1\.2rem\,2vw\,1\.8rem\)\] { font-size: 1.8rem !important; }
  .text-\[clamp\(1\.8rem\,3vw\,2\.5rem\)\] { font-size: 2.5rem !important; }
  .text-\[clamp\(1rem\,1\.5vw\,1\.2rem\)\] { font-size: 1.2rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hover-scale:hover { transform: none; }
}