/* Reset & base styles */
* {
  margin: 0;
  padding: 0px;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background-color: #000 !important;
}

#contact {
  position: relative;
  isolation: isolate;
  contain: paint;
  height: auto;
  min-height: 100svh;
  overflow: visible;
}

#contact .frost {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

#contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.001);
  pointer-events: none;
  z-index: 0;
}

body {
  /* background-color: black; */
  margin: 0;
  overflow-x: hidden;
  font-family: "Changa", sans-serif;
  background-color: #000 !important;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Fixed full-screen canvas for Three.js background */
canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  /* or 100svh if you prefer small viewport */
  z-index: 0;
  /* <-- was -1 */
  /* behind everything */
  pointer-events: none;
  display: block;
  /* avoids any inline canvas spacing bug */
}

/* Full-height sections */
section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 3rem;
  text-align: center;
  position: relative;
  z-index: 1;
}

#section1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
  padding: 20px;
}

#section1 h1 {
  font-size: 3.5rem;
  margin-bottom: 10px;
  line-height: 1.5;
}

#section1 h2 {
  font-size: 1.5rem;
  font-weight: 400;
  margin-top: 0;
}

@media (max-width: 900px) {
  #section1 h1 {
    font-size: 2.8rem;
  }

  #section1 h2 {
    margin-top: 20px;
    font-size: 1.4rem;
  }
}

/* Add header styles */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

.logo {
  height: 50px;
}

.contact-link {
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

.contact-link:hover {
  color: #00ff41;
}

/* --- Split layout + responsive type for sections 2/3/4 --- */
:root {
  --container-max: 1200px;
  --pad-inline: clamp(16px, 5vw, 64px);
  --col-gap: clamp(16px, 6vw, 72px);
  --title-size: clamp(2rem, 1.2rem + 4vw, 4rem);
  /* left heading */
  --body-size: clamp(1rem, 0.9rem + 1.2vw, 1.4rem);
  /* right text */
}

/* keep sections stable on mobile */
section {
  height: 100svh;
  text-align: left;
}

/* shared split container */
.split {
  /* width: min(100%, var(--container-max)); */
  margin: 0 auto;
  padding-inline: var(--pad-inline);
  display: grid;
  grid-template-columns: clamp(160px, 24vw, 420px) 1fr;
  /* left title / right text */
  align-items: center;
  gap: var(--col-gap);
}

/* left header – stack words vertically like your screenshot */
.stacked-title {
  display: grid;
  gap: 0.15em;
  font-size: var(--title-size);
  line-height: 1.05;
  font-weight: 700;
}

.stacked-title > span {
  display: block;
}

/* right copy */
.split-body {
  max-width: 70ch;
  font-size: var(--body-size);
  line-height: 1.7;
  opacity: 0.95;
}

/* collapse to one column on smaller screens */
@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .split-body {
    margin-top: 0.75rem;
  }
}

/* Let sections grow if content needs more height in short landscape */
@media (orientation: landscape) and (max-height: 520px) {
  section {
    height: auto;
    /* no fixed height */
    min-height: 100svh;
    /* still at least fill the screen */
    align-items: flex-start;
    /* top align content (no vertical squeeze) */
    padding-block: clamp(16px, 6vh, 48px);
  }

  /* Collapse the two columns when height is tiny */
  .split {
    grid-template-columns: 1fr;
    row-gap: clamp(12px, 3vh, 20px);
  }

  /* Smaller type in short landscape */
  .stacked-title {
    font-size: clamp(1.4rem, 0.9rem + 2.2vw, 2.2rem);
    line-height: 1.1;
    font-weight: 600;
    /* a bit lighter helps readability when small */
  }

  .split-body {
    font-size: clamp(0.95rem, 0.8rem + 1vw, 1.15rem);
    line-height: 1.55;
  }
}

/* Extra safety: allow long words to wrap (e.g., “Documentation”) */
.stacked-title,
.split-body {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* =========================
   Frosted glass with feathered edges
   ========================= */
/* Frosted glass: straight edges + feathered fade (no rounded corners) */
/* ================================
   Center-strong frost (blur + dark)
   ================================ */
.frost {
  position: relative;
  isolation: isolate;
  /* keeps the layers inside this box */
}

/* Outer, WIDE layer: mild blur + mild dark that reaches further */
.frost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  /* mild blur + mild tint */
  backdrop-filter: blur(var(--blur-outer, 6px));
  -webkit-backdrop-filter: blur(var(--blur-outer, 6px));
  background: rgba(0, 0, 0, var(--tint-outer, 0.22));

  /* rectangular vignette (smooth fade to edges) */
  --edge-outer: var(--edge-outer-size, 70px);
  mask: linear-gradient(
      to right,
      transparent,
      #000 var(--edge-outer),
      #000 calc(100% - var(--edge-outer)),
      transparent
    ),
    linear-gradient(
      to bottom,
      transparent,
      #000 var(--edge-outer),
      #000 calc(100% - var(--edge-outer)),
      transparent
    );
  mask-composite: intersect;

  /* Safari/WebKit */
  -webkit-mask: linear-gradient(
      to right,
      transparent,
      #000 var(--edge-outer),
      #000 calc(100% - var(--edge-outer)),
      transparent
    ),
    linear-gradient(
      to bottom,
      transparent,
      #000 var(--edge-outer),
      #000 calc(100% - var(--edge-outer)),
      transparent
    );
  -webkit-mask-composite: destination-in;
}

/* Inner, NARROW layer: strong blur + strong dark concentrated at center */
.frost::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  backdrop-filter: blur(var(--blur-inner, 16px));
  -webkit-backdrop-filter: blur(var(--blur-inner, 16px));
  background: rgba(0, 0, 0, var(--tint-inner, 0.6));
  /* black→transparent via mask */

  /* tighter mask so it dominates in the middle */
  --edge-inner: var(--edge-inner-size, 50px);
  mask: linear-gradient(
      to right,
      transparent,
      #000 var(--edge-inner),
      #000 calc(100% - var(--edge-inner)),
      transparent
    ),
    linear-gradient(
      to bottom,
      transparent,
      #000 var(--edge-inner),
      #000 calc(100% - var(--edge-inner)),
      transparent
    );
  mask-composite: intersect;

  /* Safari/WebKit */
  -webkit-mask: linear-gradient(
      to right,
      transparent,
      #000 var(--edge-inner),
      #000 calc(100% - var(--edge-inner)),
      transparent
    ),
    linear-gradient(
      to bottom,
      transparent,
      #000 var(--edge-inner),
      #000 calc(100% - var(--edge-inner)),
      transparent
    );
  -webkit-mask-composite: destination-in;
}

/* Keep your real content sharp and above the frost layers */
.frost > * {
  position: relative;
  z-index: 1;
}

.frost h4 {
  font-size: 1.2rem;
  text-align: center;
  color: #ffffff;
  margin-top: 20px;
}

@media (max-width: 900px) {
  .frost h4 {
    font-size: 1rem;
  }
}

button[aria-busy="true"],
button.btn-busy {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  filter: grayscale(1) !important;
  pointer-events: none !important;
}

button[aria-busy="false"],
button:not(.btn-busy) {
  cursor: pointer;
  /* ensure pointer after reset */
}

/* — Optional global controls —
   Increase/decrease to taste without changing layout */
:root {
  --edge-outer-size: 30px;
  /* reach of the mild blur/dark toward edges */
  --edge-inner-size: 70px;
  /* reach of the strong blur/dark in the center */
  --blur-outer: 3px;
  /* less blur near edges */
  --blur-inner: 6px;
  /* more blur in center */
  --tint-outer: 0.22;
  /* lighter dark near edges */
  --tint-inner: 0.7;
  /* full black feeling at center */
}

.split.frost {
  padding-top: 50px;
  /* adjust to taste */
  padding-bottom: 50px;
}

/* --- Language switch pill --- */
#lang-switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

header {
  position: fixed;
  /* already set */
}

header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

/* center the pill horizontally */
#lang-switch {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  /* keep EN/عر on one line */
  z-index: 11;
  /* above background */
}

/* order rules: flip button order based on language */
#lang-switch.ltr-order [data-lang="en"] {
  order: 1;
}

#lang-switch.ltr-order [data-lang="ar"] {
  order: 2;
}

#lang-switch.rtl-order [data-lang="ar"] {
  order: 1;
}

#lang-switch.rtl-order [data-lang="en"] {
  order: 2;
}

#lang-switch button {
  font: 600 0.9rem "Changa", sans-serif;
  color: #fff;
  background: transparent;
  border: 0;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
}

#lang-switch button[aria-checked="true"] {
  background: #00ff41;
  color: #000;
}

/* Put the switch next to your Contact Us link (header already flexes) */
header {
  gap: 12px;
}

/* --- Direction-aware alignment with :dir() --- */
:root {
  --align-start: left;
  --align-end: right;
}

:root:dir(rtl) {
  --align-start: right;
  --align-end: left;
}

/* Titles and body text follow the document direction without changing layout */
section,
.split,
.stacked-title,
.split-body {
  text-align: var(--align-start);
}

/* Input placeholders/fields will inherit direction from html */
input,
textarea {
  direction: inherit;
  text-align: inherit;
}

/* Keep logical direction for grids but don’t create accidental wide flows */
html[dir="rtl"] .split {
  direction: rtl;
}

html[dir="ltr"] .split {
  direction: ltr;
}

/* Text alignment already uses CSS vars; this just reinforces inputs */
html[dir="rtl"] input,
html[dir="rtl"] textarea {
  direction: rtl;
  text-align: right;
}

html[dir="ltr"] input,
html[dir="ltr"] textarea {
  direction: ltr;
  text-align: left;
}

@supports (-webkit-touch-callout: none) {
  #threejs-canvas {
    width: 100%;
    height: 100svh;
  }

  /* was width:100vw */
}

/* No animation before hydration */
html:not(.i18n-ready) #lang-switch button {
  transition: none !important;
}

/* Pre-position for Arabic before JS */
html[data-lang-boot="ar"] #lang-switch {
  direction: rtl;
}

html[data-lang-boot="ar"] #lang-switch [data-lang="ar"] {
  order: 1;
}

html[data-lang-boot="ar"] #lang-switch [data-lang="en"] {
  order: 2;
}

/* Show the "active" pill BEFORE JS based on the booted lang */
/* Make these only apply until .i18n-ready is set */
html[data-lang-boot="ar"]:not(.i18n-ready) #lang-switch [data-lang="ar"],
html[data-lang-boot="en"]:not(.i18n-ready) #lang-switch [data-lang="en"] {
  background: #00ff41 !important;
  color: #000 !important;
}

html[data-lang-boot="ar"]:not(.i18n-ready) #lang-switch [data-lang="en"],
html[data-lang-boot="en"]:not(.i18n-ready) #lang-switch [data-lang="ar"] {
  background: transparent !important;
  color: #fff !important;
}

/* Pre-position the switch correctly before JS hydration */
html[data-lang-boot="ar"] #lang-switch {
  direction: rtl;
}

html[data-lang-boot="ar"] #lang-switch [data-lang="ar"] {
  order: 1;
}

html[data-lang-boot="ar"] #lang-switch [data-lang="en"] {
  order: 2;
}

/* Prevent wrong-language flash ONLY when Arabic was saved */
html[data-lang-boot="ar"]:not(.i18n-ready) [data-i18n] {
  visibility: hidden;
}

html[data-lang-boot="ar"]:not(.i18n-ready)
  [data-i18n-placeholder]::placeholder {
  color: transparent;
}

.contat-email {
  cursor: pointer;
}
.contat-email:hover {
  color: #00ff41;
}