@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Jost:wght@400;500;600&display=swap");

@media (max-width: 767.98px) {
  header nav a[aria-label="Nirvaana Greens home"] img {
    height: 4.25rem;
  }
}

@media (max-width: 639.98px) {
  a[aria-label="Chat on WhatsApp"] {
    bottom: 1rem;
    right: 1rem;
    width: 3.25rem;
    height: 3.25rem;
  }

  #home {
    --mobile-hero-serif: "Cormorant Garamond", "Bodoni 72", Didot,
      "Bodoni MT", Georgia, serif;
    --mobile-hero-sans: "Jost", "Avenir Next", "Segoe UI", sans-serif;
    aspect-ratio: 941 / 1672;
    height: auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
    background-image: url("../images/mobile%20responsiveness.png");
    background-position: center -1.5rem;
    background-repeat: no-repeat;
    background-size: auto calc(100% + 3rem);
  }

  #home > img:first-child {
    display: none;
  }

  #home > div.relative {
    height: 100%;
    min-height: 0;
    padding: 7.75rem 1.25rem 0.75rem;
    z-index: 1;
  }

  #home > div.relative > div.reveal:first-child {
    position: static;
    transform: none;
  }

  #home > div.relative > div.reveal > div.mt-\[38rem\] {
    border-radius: 1rem;
    bottom: 0.75rem;
    display: grid;
    height: 6.25rem;
    left: 1.25rem;
    margin: 0;
    max-width: none;
    position: absolute;
    right: 1.25rem;
    width: auto;
  }

  #home > div.relative > div.reveal > div.mt-\[38rem\] > div {
    gap: 0.35rem;
    justify-content: center;
    padding: 0.65rem 0.25rem;
  }

  #home > div.relative > div.reveal > div.mt-\[38rem\] svg {
    height: 1.85rem;
    width: 1.85rem;
  }

  #home > div.relative > div.reveal > div.mt-\[38rem\] span {
    font-size: 0.66rem;
    line-height: 1.2;
  }

  #home div:has(+ h1) {
    font-family: var(--mobile-hero-sans);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    margin-bottom: 0.9rem;
  }

  #home h1 {
    font-family: var(--mobile-hero-serif);
    font-size: 2.55rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 0.94;
    max-width: 22rem;
  }

  #home h1 + div {
    margin-top: 0.8rem;
  }

  #home h1 + div + p {
    font-family: var(--mobile-hero-sans);
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.55;
    margin-top: 0.75rem;
    max-width: 19rem;
  }

  #home h1 + div + p + div {
    margin-top: 1rem;
  }

  #home h1 + div + p + div a[href="#contact"] {
    border-radius: 0.85rem;
    border-width: 1px;
    gap: 1rem;
    font-family: var(--mobile-hero-sans);
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0;
    min-height: 2.85rem;
    padding: 0 1.25rem;
    width: 15.5rem;
  }
}