.home-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: 8rem;
  @media (min-width: 1024px) {
    padding-left: 1.25rem;
    paddingr-right: 1.25rem;
  }
  @media (min-width: 1200px) {
    flex-direction: row;
    align-items: start;
    gap: 2rem;
    height: clamp(50rem, calc(var(--vh, 1vh) * 100), 77.5rem);
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  } 
  
  & .home-hero__main-visual {
    position: relative;
    box-shadow: var(--elevation-2);
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem;
    overflow: hidden;
    height: 30rem;
    @media (min-width: 768px) {
      height: 35rem;
    }
    @media (min-width: 1024px) {
      height: 40rem;
    }
    @media (min-width: 1200px) {
      height: 100%;
      width: 70%;
    }
    & .home-hero__image {
      position: relative;
      height: 100%;
      width: 100%;
      &::after {
        content: "";
        display: block;
        position: absolute;
        inset: 0;
        background-color: var(--logo-orange);
        opacity: 10%;
        pointer-events: none;
      }
      & img {
        object-fit: cover;
        height: 100%;
        width: 100%;
      }
    }
    & .home-hero__title {
      position: absolute;
      bottom: 8.75rem;
      left: 0.75rem;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      color: var(--snow);
      @media (min-width: 768px) {
        left: 1.25rem;
      }
      @media (min-width: 1024px) {
        left: 2rem;
      }
      @media (min-width: 1200px) {
        left: 2.5rem;
      }
      & .home-hero__title-main {
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
        line-height: 1.25;
        letter-spacing: 0.12em;
        font-weight: 900;
        font-size: 1.25rem;
        @media (min-width: 768px) {
          font-size: 2.25rem;
        }
        @media (min-width: 1024px) {
          font-size: 2.5rem;
        }
        @media (min-width: 1200px) {
          font-size: 3rem;
        }
      }
      & .home-hero__title-sub {
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
        font-size: 0.875rem;
        @media (min-width: 768px) {
          font-size: 1rem;
        }
        @media (min-width: 1024px) {
          font-size: 1.125rem;
        }
        @media (min-width: 1200px) {
          font-size: 1.25rem;
        }
      }
    }
  }
  
  & .home-hero__nav {
    box-shadow: var(--elevation-2);
    position: relative;
    padding: 3rem 1.5rem;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    background-color: var(--snow);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: -6.75rem;
    @media (min-width: 1200px) {
      border-radius: 2rem;
      flex: 1 1 0%;
      margin-top: 0;
    }
    & .home-hero__nav-dec-circle {
      position: absolute;
      right: -4.375rem;
      bottom: -7.5rem;
      width: 15rem;
      height: 15rem;
      border-radius: 9999px;
      background-color: var(--snow);
      opacity: 20%;
    }
  }
  
  & .page-hero__wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    min-width: 50rem;
    width: 100%;
    height: 3rem;
    background-image: url(/system_panel/uploads/images/wave.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    @media (min-width: 1024px) {
      height: 4rem;
    }
    @media (min-width: 1200px) {
      height: 5.5625rem;
    }
  }
}

.home-intro-dec-circle {
  position: absolute;
  top: 2.5rem;
  left: -15rem;
  width: 40rem;
  height: 40rem;
  background-color: var(--logo-orange);
  opacity: 10%;
  border-radius: 9999px;
}

.home-about-dec-circle {
  position: absolute;
  bottom: -6.25rem;
  left: -10rem;
  width: 50rem;
  height: 50rem;
  background-color: var(--logo-orange);
  opacity: 10%;
  border-radius: 9999px;
  display: none;
  @media (min-width: 1024px) {
    display: block;
  }
}

.home-services-dec-circle {
  position: absolute;
  width: 10rem;
  height: 10rem;
  background-color: var(--snow);
  opacity: 20%;
  border-radius: 9999px;
  &.home-services-dec-circle--tr {
    top: -6.25rem;
    right: -6.25rem;
  }
  &.home-services-dec-circle--bl {
    bottom: -7.5rem;
    left: -6.25rem;
  }
  &.home-services-dec-circle--lime {
    width: 40rem;
    height: 40rem;
    top: 5rem;
    right: -5rem;
    background-color: var(--lime);
    opacity: 10%;
  }
  &.home-services-dec-circle--logo-orange {
    width: 35rem;
    height: 35rem;
    bottom: 3.75rem;
    left: -8.75rem;
    background-color: var(--logo-orange);
    opacity: 10%;
  }
}