@font-face {
    font-family: "Long";
    src: url("/assets/fonts/long.woff");
}

@font-face {
    font-family: "Round";
    src: url("/assets/fonts/round.woff");
}

@font-face {
    font-family: "Round Bold";
    font-weight: bold;
    src: url("/assets/fonts/round-bold.woff");
}
*{
    box-sizing: border-box;
}
body {
    width: 100dvw;
    overflow-x: hidden;
    font-family: "Round", sans-serif;
    background-color: #000;
    margin:0px;
}

main {
    width: 100dvw;
    overflow-x: hidden;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    z-index: 100;
}

@media (min-width: 768px) {
    nav {
        padding: 2rem;
    }
}

.hero-section {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.hero-section .scale-out {
  object-fit: cover;
  height: 100%;
}

@media (min-width: 768px) {
  .hero-section .scale-out {
    transform: scale(1.25);
  }
}

.hero-section .double-arrow {
  position: absolute;
  bottom: 1.25rem;
  width: 12rem;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}

.hero-section .fake-logo-wrapper {
  position: absolute;
  z-index: 50;
  left: 50%;
  transform: translateX(-50%);
}

@media (min-width: 480px) {
  .hero-section .fake-logo-wrapper {
    top: 9.5rem;
  }
}

@media (min-width: 640px) {
  .hero-section .fake-logo-wrapper {
    top: 12.8rem;
  }
}

@media (min-width: 768px) {
  .hero-section .fake-logo-wrapper {
    top: 8.5rem;
  }
}

@media (min-width: 1536px) {
  .hero-section .fake-logo-wrapper {
    top: 11rem; /* top-44 برابر 11rem */
  }
}

@media (min-width: 1920px) {
  .hero-section .fake-logo-wrapper {
    top: 8rem; /* top-32 برابر 8rem */
  }
}

.hero-section .overlay-logo {
  width: 5rem; /* w-20 */
  height: 100%; /* size-full */
  object-fit: cover;
  opacity: 0;
}

@media (min-width: 768px) {
  .hero-section .overlay-logo {
    width: 6rem; /* md:w-24 */
  }
}

@media (min-width: 1536px) {
  .hero-section .overlay-logo {
    width: 7rem; /* 2xl:w-28 */
  }
}

@media (min-width: 1920px) {
  .hero-section .overlay-logo {
    width: 8rem; /* 3xl:w-32 */
  }
}

.entrance-message {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 20;
  opacity: 1;
      mask-image: radial-gradient(circle at 50% 100vh, black 0%, transparent 0%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

@media (min-width: 768px) {
  .md-w-32 {
    width: 8rem;
  }
}

@media (min-width: 768px) {
  .md-w-52 {
    width: 13rem;
  }
}

 .mask-wrapper {
    mask-image: url("/assets/images/us-logo.svg");
    mask-repeat: no-repeat;
  }

  .first-vd-wrapper .first-vd {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% center;
}

@media (min-width: 768px) {
  .first-vd-wrapper .first-vd {
    object-position: 50% center;
  }
}

.ellie {
  position: relative;
  z-index: 10;
  padding-inline-start: 2.5rem; /* ps-10 */
  padding-block: 10rem; /* py-40 */
  margin-top: 15rem; /* mt-60 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem; /* gap-5 */
  width: 100vw; /* w-dvw */
  overflow-x: hidden;
}

@media (min-width: 1024px) {
  .ellie {
    flex-direction: row; /* lg:flex-row */
    padding-inline-start: 10rem; /* lg:ps-40 */
  }
}

@media (min-width: 1536px) {
  .ellie {
    padding-inline-start: 20rem; /* 2xl:ps-80 */
  }
}

.ellie h1 {
  color: #d6d6a1; /* text-yellow */
  font-family: 'Long', sans-serif; /* font-long */
  text-transform: uppercase;
  font-size: 6rem; /* text-8xl */
  margin-bottom: 5rem; /* mb-20 */
}

.ellie h2 {
  color: #4a5d23; /* text-green */
  font-size: 1.875rem; /* text-3xl */
  margin-bottom: 1.75rem; /* mb-7 */
  padding-inline-end: 2.5rem; /* pe-10 */
}

@media (min-width: 768px) {
  .ellie h2 {
    font-size: 3rem; /* md:text-5xl */
    padding-inline-end: 5rem; /* md:pe-20 */
  }
}

.ellie p {
  color: #FFFFFF; /* text-white */
  font-size: 1.125rem; /* text-lg */
  padding-inline-end: 3.5rem; /* pe-14 */
}

@media (min-width: 768px) {
  .ellie p {
    font-size: 1.5rem; /* md:text-2xl */
    padding-inline-end: 7rem; /* md:pe-28 */
  }
}

.ellie .ellie-1 {
  background-color: #d6d6a1; /* bg-yellow */
  height: 80vh; /* lg:h-[80vh] */
  width: auto;
  transform: translateX(-1.25rem); /* -translate-x-5 */
  margin-bottom: 20px;
}

.ellie .ellie-1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 5% center;
  transition: transform 0.7s ease-in-out;
}

.ellie .ellie-1 img:hover {
  transform: scale(0.98);
}

.ellie .ellie-2 {
  background-color: #d6d6a1;
  height: 90vh;
  width: auto;
  margin-top: 5rem; /* mt-20 */
  transform: translateX(-1.25rem);
}

@media (min-width: 768px) {
  .ellie .ellie-2 {
    margin-top: 9rem; /* md:mt-36 */
  }
}

.ellie .ellie-2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% center;
  transition: transform 0.7s ease-in-out;
}

.ellie .ellie-2 img:hover {
  transform: scaleX(0.97) scaleY(0.98);
}

.ellie .ellie-3 {
  background-color: #d6d6a1;
  height: 50vh;
  transform: translateX(-1.25rem);
  width: 100%;
}

@media (min-width: 768px) {
  .ellie .ellie-3 {
    width: 60%; /* md:w-[60%] */
  }
}

.ellie .ellie-3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% center;
  transition: transform 0.7s ease-in-out;
}

.ellie .ellie-3 img:hover {
  transform: scale(0.97);
}

.abby {
  position: relative;
}

.abby-life {
  position: relative;
  z-index: 10;
  padding-block: 10rem; /* py-40 */
  margin-top: 15rem; /* mt-60 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem; /* gap-5 */
  width: 100vw; /* w-dvw */
  overflow-x: hidden;
}

@media (min-width: 1024px) {
  .abby-life {
    flex-direction: row; /* lg:flex-row */
  }
}

.abby-life h1 {
  color: #d6d6a1; /* text-yellow */
  font-family: 'Long', sans-serif; /* font-long */
  text-transform: uppercase;
  font-size: 8rem; /* text-8xl */
  margin-bottom: 5rem; /* mb-20 */
}

.abby-life h2 {
  color: #4a5d23; /* text-green */
  font-size: 1.875rem; /* text-3xl */
  margin-bottom: 1.75rem; /* mb-7 */
  padding-inline-end: 2.5rem; /* pe-10 */
}

@media (min-width: 768px) {
  .abby-life h2 {
    font-size: 3rem; /* md:text-5xl */
    padding-inline-end: 5rem; /* md:pe-20 */
  }
}

.abby-life p {
  color: #FFFFFF; /* text-white */
  font-size: 1.125rem; /* text-lg */
  padding-inline-end: 3.5rem; /* pe-14 */
}

@media (min-width: 768px) {
  .abby-life p {
    font-size: 1.5rem; /* md:text-2xl */
    padding-inline-end: 7rem; /* md:pe-28 */
  }
}

.abby-life p:last-of-type {
  display: block;
}

@media (min-width: 768px) {
  .abby-life p:last-of-type {
    display: none; /* md:hidden */
  }
}

@media (min-width: 1280px) {
  .abby-life p:last-of-type {
    display: block; /* xl:block */
  }
}

.abby-life .abby-1 {
  background-color: #d6d6a1; /* bg-yellow */
  height: 80vh; /* lg:h-[80vh] */
  width: auto;
  transform: translateX(-1.25rem); /* -translate-x-5 */
}

.abby-life .abby-1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 85% center;
  transition: transform 0.7s ease-in-out;
}

.abby-life .abby-1 img:hover {
  transform: scale(0.98);
}

.abby-life .abby-2 {
  background-color: #d6d6a1;
  height: 60vh; /* lg:h-[60vh] */
  width: 80%; /* w-[80%] */
  margin-top: 5rem; /* my-20 (vertical margin) */
  margin-bottom: 5rem;
  transform: translateX(1.25rem);
}

@media (min-width: 768px) {
  .abby-life .abby-2 {
    margin-top: 9rem; /* md:my-36 */
    margin-bottom: 9rem;
  }
}

@media (min-width: 1024px) {
  .abby-life .abby-2 {
    width: 70%; /* lg:w-[70%] */
    transform: translateX(-1.25rem); /* lg:-translate-x-5 */
  }
}

.abby-life .abby-2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center;
  transition: transform 0.7s ease-in-out;
}

.abby-life .abby-2 img:hover {
  transform: scaleX(0.98) scaleY(0.98);
}

.abby-life .abby-3 {
  background-color: #FFD700;
  height: 90vh; /* lg:h-[90vh] */
  transform: translateX(-1.25rem);
  width: 100%;
}

@media (min-width: 768px) {
  .abby-life .abby-3 {
    width: 60%; /* md:w-[60%] */
  }
}

.abby-life .abby-3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  transition: transform 0.7s ease-in-out;
}

.abby-life .abby-3 img:hover {
  transform: scaleX(0.98) scaleY(0.99);
}

@media (min-width: 1024px) {
  .abby-life-content {
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .lg-ps-32 {
    padding-inline-start: 8rem;
  }
}

.ellie-content,
  .abby-life-content {
    background: radial-gradient(ellipse, #111117 20%, transparent 70%);
  }

  .final {
  position: relative;
  height: 100dvh; /* h-dvh */
  overflow: hidden;
}

.final .final-content {
  transform: scale(1.10); /* scale-110 */
}