.banner-outer-container {
  padding-top: 3rem;
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;

  --image-and-title-left-spacing: 25%;
  --title-nigative: 1.5rem;
  --image-and-title-right-spacing: initial;
  --page-title-font-size: 14rem;
}

.page-title {
  padding-left: calc(
    var(--image-and-title-left-spacing) - var(--title-nigative)
  );
  padding-right: var(--image-and-title-right-spacing);
  font-size: var(--page-title-font-size);
  font-family: var(--font-bold);
  font-weight: bold;
  letter-spacing: -10px;
  line-height: 1;
}

.banner-image {
  position: absolute;
  top: 0;
  left: var(--image-and-title-left-spacing);
  right: var(--image-and-title-right-spacing);
  max-height: 100%;

  img {
    max-height: 100vh;
  }
}

.location-info {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 10px;
  left: calc(52vw + 6rem);
  /* left: 55%; */
  font-size: 1.6rem;
  font-family: var(--font-bold);
  font-weight: bold;
  line-height: 1;
  letter-spacing: -1px;
}

/* banner animation start */

/* Initial hidden state */
.page-title {
  opacity: 0;
  transform: translateX(-100%);
  transition: transform 1s ease, opacity 1s ease;
}

.location-info {
  opacity: 0;
  transform: translateX(100%);
  transition: transform 1s ease, opacity 1s ease;
}

.banner-image {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 1s ease, transform 1s ease;
}

/* Active state (when banner loads) */
.banner-container.animate .page-title {
  opacity: 1;
  transform: translateX(0);
}

.banner-container.animate .location-info {
  opacity: 1;
  transform: translateX(0);
}

.banner-container.animate .banner-image {
  opacity: 1;
  transform: scale(1);
  transition-delay: 1s; /* Image appears after title & info */
}

/* banner animation end */

.banner-bottom-container {
  display: grid;
  padding-left: 1rem;
  letter-spacing: -20px;
  line-height: 0.8;
  font-size: clamp(24px, 12.6vw, 200px);
}

.page-center {
  max-width: 70%;
  width: 860px;
  margin-inline: auto;
  display: grid;
  gap: 2rem;

  .view-all {
    background-color: transparent;
    color: black;
    padding: 0;
  }
}

h2 {
  font-size: clamp(2.5rem, -0.875rem + 9vw, 5rem);
  font-family: var(--font-regular);
  font-weight: normal;
  letter-spacing: -5px;
  line-height: 1.1;
  padding-top: 0.8rem;
}

h3 {
  font-size: clamp(1.8rem, -0.875rem + 5vw, 2rem);
  font-family: var(--font-bold);
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 1;
}

p {
  font-size: 1.2rem;
  letter-spacing: -0.6px;
}

.contacts {
  font-size: 1.2rem;
  letter-spacing: -0.6px;
  padding-bottom: 3rem;

  .contacts-item {
    display: flex;
    align-items: flex-start;
    gap: 4px;
  }

  img {
    margin-top: 3px;
  }
}

/* for extra large screen */
@media only screen and (min-width: 1500px) {
  .banner-bottom-container {
    font-size: 12vw;
    letter-spacing: -1vw;
  }

  .page-title {
    font-size: clamp(12rem, -0.875rem + 15vw, 20rem);
  }
}

@media only screen and (max-width: 1400px) {
  .banner-bottom-container {
    letter-spacing: -18px;
  }

  .location-info {
    left: calc(55vw + 6rem);
  }
}

@media only screen and (max-width: 1200px) {
  .banner-bottom-container {
    letter-spacing: -16px;
  }
}

@media only screen and (max-width: 992px) {
  .banner-bottom-container {
    letter-spacing: -12px;
  }
}

/* media for specially for ipad only */

@media only screen and (min-width: 850px) and (max-width: 1280px) {
  .banner-outer-container {
    --image-and-title-left-spacing: 15%;
    --title-nigative: 0rem;
  }

  .page-title {
    font-size: clamp(60px, 40vw, 17rem);
    letter-spacing: -8px;
  }
}

/* for banner height in large screen ipad */
@media only screen and (min-width: 768px) and (max-width: 912px) {
  .banner-outer-container {
    --image-and-title-left-spacing: 8%;
    max-height: 1080px;
  }

  .page-title {
    font-size: clamp(60px, 32vw, 15rem);
    letter-spacing: -8px;
  }
}

@media only screen and (max-width: 767px) {
  .banner-outer-container {
    --image-and-title-left-spacing: 5%;
    --image-and-title-right-spacing: 5%;
    --title-nigative: 0rem;
  }

  .page-title {
    font-size: clamp(60px, -0.875rem + 34vw, 12rem);
    letter-spacing: -6px;
  }

  .location-info {
    left: initial;
    right: 5%;
  }

  .banner-bottom-container {
    letter-spacing: -9px;
  }

  .page-center {
    max-width: 80%;
  }

  h2 {
    font-size: clamp(3rem, -0.875rem + 10vw, 4.6rem);
    letter-spacing: -4px;
    line-height: 1;
  }
}

@media only screen and (max-width: 576px) and (min-width: 340px) {
  .banner-outer-container {
    height: 80vh;
  }

  .banner-image {
    top: initial;
    bottom: 80px;
  }

  .location-info {
    bottom: 20px;
  }

  .banner-bottom-container {
    font-size: clamp(24px, 11vw, 70px);
    letter-spacing: -5px;
  }

  .page-center {
    .view-all {
      font-size: 2.6rem;
      letter-spacing: -2px;
    }
  }

  h2 {
    font-size: clamp(2rem, -0.875rem + 12vw, 3rem);
    letter-spacing: -2px;
  }
}

@media only screen and (max-width: 420px) {
  .banner-bottom-container {
    letter-spacing: -4px;
  }
}