@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/Vazirmatn/Vazirmatn-Regular.ttf") format("ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "LyonArabicDisplay";
  src: url("fonts/Lyon_Arabic_2/COMM - Lyon Arabic Display Regular.otf")
    format("otf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "LyonArabicDisplay";
  src: url("fonts/Lyon_Arabic_2/COMM - Lyon Arabic Display Medium.otf")
    format("opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "LyonArabicDisplay";
  src: url("fonts/Lyon_Arabic_2/COMM - Lyon Arabic Display Bold.otf")
    format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Lyon Arabic Slanted Display";
  src: url("fonts/Lyon_Arabic_2/COMM - Lyon Arabic Slanted Display Bold.otf")
    format("opentype");
  font-weight: 700;
  font-style: normal;
}
/* @font-face {
  font-family: "Inter Display";
  src: url("fonts/Lyon_Arabic_2/COMM - Lyon Arabic Slanted Display Bold.otf")
    format("opentype");
  font-weight: 700;
  font-style: normal;
} */

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

@font-face {
  font-family: "InterDisplay";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Inter-4.1/InterDisplay-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "InterDisplay";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Inter-4.1/InterDisplay-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "InterDisplay";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Inter-4.1/InterDisplay-Bold.woff2") format("woff2");
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  &:not(.ar) {
    --font-primary: "InterDisplay";
    --font-title: "Lyon Arabic Slanted Display";
  }
  color: #f5f5f6;
  &.ar {
    --font-primary: "Vazirmatn";
    --font-title: "LyonArabicDisplay";
    h1 {
      font-family: var(--font-title);
    }
  }
  font-family: var(--font-primary);

  h2,
  h3 {
    font-family: var(--font-title);
    font-style: italic;
  }
}

/* Section styling with subtle animation */
section {
  opacity: 0;
  transition: all 1s ease-in-out;
  padding-top: 10rem;
  min-height: 200px;
  img,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    opacity: 0;
    transition: all 1s ease-in-out;
  }

  img {
    transform: translateY(-100px);
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    transform: scale(0.5);
  }

  p {
    transform: translateX(-100px);
  }
}

section.visible {
  opacity: 1;
  img,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    opacity: 1;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    transform: scale(1);
  }
  img {
    transform: translateY(0);
  }
  p {
    transform: translateX(0);
  }
  /* transform: scale(1); */
}

.carousel-image {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.carousel-image.active {
  opacity: 1;
}
.carousel-shade {
  background: radial-gradient(
    34.62% 29.51% at 50% 65.74%,
    rgba(0, 3, 15, 0) 0%,
    #00030f 100%
  );
}

.mobile-menu {
  transition: all 0.3s ease;
}