.logo {
  position: absolute;
  top: 2rem;
  left: 2rem;
  z-index: 500;
}
.hero-container {
  display: flex;
  height: 100vh;
  width: 100%;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero-container .main-content {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100vh;
}
.text-content .text-rows span {
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 240;
  line-height: 140%;
  letter-spacing: 0.13px;
}
.hero-container .main-content .right-main-content {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: end;
  /* border: 2px solid black; */
}
.hero-container .main-content .text-content {
  height: 100vh;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: start;
  padding-left: 10rem;
}

.left-content {
  width: 35rem;
}
.text-content .hero-section-titles {
  width: 35rem;
  height: 4.81rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}
.text-content .hero-section-titles .greetings-text {
  position: absolute;
  display: flex;
  top: 4.81rem;
  overflow: hidden;
  animation: moveUpgreet 800ms linear forwards;
  animation-delay: 2.75s;
}
.text-content .hero-section-titles .greetings-text {
  font-size: 4.37rem;
  line-height: 4.81rem;
  font-weight: 260;
  margin: 0;
  font-family: "VELUX Transform Variable";
}
.text-content .hero-section-titles .set1,
.text-content .hero-section-titles .set2 {
  position: absolute;
  top: 4.81rem;
  animation: moveUpgreet 800ms linear forwards;
}
.text-content .hero-section-titles .set1 {
  animation-delay: 3.25s;
}
.text-content .hero-section-titles .set2 {
  animation-delay: 3.75s;
}
.text-content .hero-section-titles p,
.text-content .hero-section-titles p {
  font-size: 4.37rem;
  line-height: 4.81rem;
  font-weight: 260;
  margin: 0;
}
@keyframes moveUpgreet {
  0% {
    top: 4.81rem;
  }
  100% {
    top: 0rem;
  }
}
.text-content .left-content .bottom-text {
  position: relative;
  margin-top: 2rem;
}
.text-content .left-content .bottom-text .quote {
  position: relative;
  opacity: 0;
  width: 38rem;
  transform: translateY(3rem);
  animation: revealText 1s ease-in-out forwards;
  animation-delay: 4.5s;
}
.text-content .left-content .bottom-text .quote p {
  font-size: 1.7rem;
  margin: 0;
  font-style: normal;
  font-weight: 240;
  letter-spacing: 0.13px;
}
@keyframes revealText {
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.text-content .left-content .button-container {
  position: relative;
  margin-top: 2rem;
  opacity: 0;
  transform: translateY(3rem);
  animation: revealText 1s ease-in-out forwards;
  animation-delay: 4.75s;
  pointer-events: auto;
}
.text-content .left-content .button-container button {
  font-size: 1rem;
font-style: normal;
font-weight: 600;
line-height: 115%; 
letter-spacing: 0.14px;
  width: 11rem;
  height: 3.5rem;
  flex-shrink: 0;
  border: 1px solid;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.arrow-container {
  position: relative;
  width: 1.15rem;
  height: 3.5rem;
  margin-left: 10px;
  overflow: hidden;
}
.arrow1 {
  width: 1.15rem;
  height: auto;
  position: absolute;
  left: 0;
  top: 35%;
}
.arrow1.animate-arrow1{
  animation: moveArrow1 0.4s infinite linear;
  /* animation-delay: 6.5s; */
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.arrow2 {
  width: 1.15rem;
  height: auto;
  position: absolute;
  left: 0;
  top: -65%;
}
.arrow2.animate-arrow2{
  animation: moveArrow2 0.4s infinite linear;
  /* animation-delay: 6.5s; */
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes moveArrow1 {
  0% {
    top: 35%;
    opacity: 1;
    visibility: visible;
  }
  100% {
    top: 135%;
    opacity: 1;
    visibility: visible;
  }
}
@keyframes moveArrow2 {
  0% {
    top: -65%;
    visibility: hidden;
  }
  100% {
    top: 35%;
    visibility: visible;
  }
}
.hero-container .main-content .right-main-content .right-content {
  background-color: #f3f0eb;
  width: 60%;
  height: 100%;
  position: relative;
  top: 0;
  right: -60%;
  display: flex;
  justify-content: right;
  animation: backgroundslideIn .8s ease forwards;
  animation-delay: 4.75s;
}
@keyframes backgroundslideIn {
  100% {
    right: 0%;
  }
}

.hero-container .date {
  font-size: 1rem;
  font-weight: 260;
  color: #28231f;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4rem;
  top: 8.5rem;
  right: 13.5rem;
  z-index: 1;
  animation: moveUp 1s ease forwards;
  animation-delay: 5.3s;
}

.hero-container .get-in-touch {
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 600;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4rem;
  top: 8.5rem;
  right: 0%;
  width: 10rem;
  height: 2.5rem;
  animation: moveUpButton 1s forwards;
  animation-delay: 5.2s;
  margin-left: 2rem;
  margin-right: 2rem;
  cursor: pointer;
  border: none;
  background: #c70000;
  z-index: 1;
}
.hero-container .get-in-touch .contact-button {
  display: flex;
  font-family: "VELUX Transform Variable";
  justify-content: center;
  align-items: center;
  border: none;
  font-style: normal;
  font-weight: 500;
  background: #c70000;
  color: #fff;
  align-items: center;
  opacity: 1;
}
@keyframes moveUp {
  100% {
    top: 1.75rem;
  }
}

@keyframes moveUpButton {
  100% {
    top: 2.25rem;
  }
}
.text-content .text-rows button {
  background: transparent;
  border: 2px solid white;
  padding: 0.6125rem 1.25rem;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  width: 10rem;
}
/* .text-content button:hover {
  background: rgba(255, 255, 255, 0.1);
} */

/* AFTR NOON IMAGE SECTION*/
:root {
  --transform-origin-x: 53%;
  --transform-origin-y: 10%;
  --transform-origin-x-morningImage: 15%;
  --transform-origin-y-morningImage: 0%;
  --transform-origin-x-eveningImage: 47%;
  --transform-origin-y-eveningImage: 17%;
}
.hero-morning .image-container,
.hero-afternoon .image-container,
.hero-evening .image-container {
  flex: 1;
  position: absolute;
  z-index: 100;
  overflow: hidden;
}
.hero-morning .image-container img,
.hero-afternoon .image-container img,
.hero-evening .image-container img {
  overflow: hidden;
  width: 100%;
  /* height: 100%; */
  z-index: 100;
}
.hero-afternoon .image-container {
  top: 0;
  right: -10%;
  bottom: -145%;
  left: -45%;
  animation: image-move-up 2s forwards, image-move-down 3s 2s forwards;
}
@keyframes image-move-up {
  0%{
    top: 0;
    right: -10%;
    bottom: -145%;
    left: -45%;
  }
  100% {
    top: -15%;
    right: -10%;
    bottom: -125%;
    left: -50%;
  }
}
.hero-afternoon .image-container img {
  transform-origin: var(--transform-origin-x) var(--transform-origin-y);
  transform: scale(3);
  animation: scale-down-initial 2s forwards, scale-down-secondary 3s 2s forwards,
    scale-to-original 0.75s 5s forwards;
}
@keyframes scale-down-initial {
  100% {
    transform: scale(2.15);
  }
}
@keyframes scale-down-secondary {
  100% {
    transform: scale(1.2);
  }
}
/* MORNING SECTION*/
.hero-morning .image-container {
  top: -10%;
  right: -15%;
  bottom: -80%;
  left: -20%;
  z-index: 2;
  animation: moveImageUp 2s ease-in-out forwards, image-move-down 3s 2s forwards;
}
@keyframes moveImageUp {
  0% {
    top: -10%;
    right: -15%;
    bottom: -80%;
    left: -20%;
  }
  100% {
    top: -20%;
    right: -25%;
    bottom: -60%;
    left: 0%;
  }
}
.hero-morning .image-container img {
  transform-origin: var(--transform-origin-x-morningImage)
    var(--transform-origin-y-morningImage);
  transform: scale(2.6);
  animation: scaleDown1 2s ease-in-out forwards, scaleDown 3s 2s forwards,
    scale-to-original 0.75s 5s forwards;
}
@keyframes scaleDown1 {
  0% {
    transform: scale(2.6);
  }
  100% {
    transform: scale(2.1);
  }
}
@keyframes scaleDown {
  100% {
    transform: scale(1.2);
  }
}
/* Evening Section */
.hero-evening .image-container {
  top: 0%;
  right: 0%;
  bottom: 0%;
  left: 0%;
  animation: move-eve-ImageUp 2s ease-in-out forwards,
    image-move-down 3s 2s forwards;
}
@keyframes move-eve-ImageUp {
  0% {
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
  }
  100% {
    top: -10%;
    right: 0%;
    bottom: 0%;
    left: 0%;
  }
}

.hero-evening .image-container img {
  transform-origin: var(--transform-origin-x-eveningImage)
    var(--transform-origin-y-eveningImage);
  transform: scale(3);
  animation: evescaleDown1 2s ease-in-out forwards, evescaleDown 3s 2s forwards,
    scale-to-original 0.75s 5s forwards;
}
@keyframes evescaleDown1 {
  0% {
    transform: scale(3);
  }
  100% {
    transform: scale(1.25);
  }
}
@keyframes evescaleDown {
  100% {
    transform: scale(1.2);
  }
}
@keyframes scale-to-original {
  100% {
    transform: scale(1);
  }
}
@keyframes image-move-down {
  100% {
    top: 7.5rem;
    bottom: 6%;
    right: 0%;
    left: 59%;
  }
}
@media (max-width: 1440px) {
  .hero-container .main-content .right-main-content .right-content {
    background-color: #f3f0eb;
    width: 70%;
    height: 100%;
    right: -70%;
  }
  .hero-container .main-content .text-content {
    padding-left: 8rem;
  }
  .hero-container .get-in-touch {
    margin-right: 4rem;
  }
  .hero-container .date {
    right: 15.5rem;
  }
  .text-content .left-content .bottom-text .quote {
    width: 31rem;
  }
  .text-content .left-content .bottom-text .quote p {
    font-size: 1.4rem;
  }
  @keyframes image-move-down {
    100% {
      top: 7.5rem;
      bottom: 6%;
      right: 0%;
      left: 55%;
    }
  }
}

@media (max-width: 1250px) and (min-width: 900px) {
  /* .hero-container .main-content .text-content {
    padding-left: 7.5rem;
  } */
  .hero-container .main-content .right-main-content .right-content {
    background-color: #f3f0eb;
    width: 80%;
    height: 100%;
    right: -80%;
  }
  .text-content .hero-section-titles {
    width: 30rem;
    height: 3.81rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
  }
  .text-content .hero-section-titles .greetings-text {
    font-size: 3.37rem;
    font-weight: 160;
  }
  .text-content .hero-section-titles .set1,
  .text-content .hero-section-titles .set2 {
    top: 3.81rem;
  }
  .text-content .hero-section-titles p,
  .text-content .hero-section-titles p {
    font-size: 3.37rem;
    line-height: 3.81rem;
    font-weight: 160;
  }
  .text-content .left-content .bottom-text .quote {
    width: 30rem;
    font-size: 1rem;
    font-weight: 160;
  }
  .hero-container .main-content .text-content {
    padding-left: 2rem;
  }
  
.hero-container .get-in-touch {
  font-size: 0.625rem;
  font-weight: 500;
  width: 8rem;
  height: 2rem;
  margin-right: 2rem;
}
@keyframes moveUpButton {
  100% {
    top: 2.75rem;
  }
}
.hero-container .date {
  font-size: .825rem;
  font-weight: 260;
  height: 4rem;
  top: 8.5rem;
  right: 11rem;
  z-index: 1;
  animation: moveUp 1s ease forwards;
  animation-delay: 5.3s;
}
}

@media (max-width: 900px) and (min-width: 850px) {
  /* .hero-container .main-content .text-content {
    padding-left: 7.5rem;
  } */
  .hero-container .main-content .right-main-content .right-content {
    background-color: #f3f0eb;
    width: 80%;
    height: 100%;
    right: -80%;
  }
  .text-content .hero-section-titles {
    width: 30rem;
    height: 3.81rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
  }
  .text-content .hero-section-titles .greetings-text {
    font-size: 3.37rem;
    font-weight: 160;
    line-height: 3.81rem;
    
  }
  .text-content .hero-section-titles .set1,
  .text-content .hero-section-titles .set2 {
    top: 3.81rem;
  }
  .text-content .hero-section-titles p,
  .text-content .hero-section-titles p {
    font-size: 3.37rem;
    line-height: 3.81rem;
    font-weight: 160;
  }
  .text-content .left-content .bottom-text .quote {
    width: 30rem;
    font-size: 1rem;
    font-weight: 160;
  }
  .hero-container .main-content .text-content {
    padding-left: 2rem;
  }
  
.hero-container .get-in-touch {
  font-size: 0.625rem;
  font-weight: 500;
  width: 8rem;
  height: 2rem;
  margin-right: .75rem;
}
@keyframes moveUpButton {
  100% {
    top: 2.75rem;
  }
}
.hero-container .date {
  font-size: .825rem;
  font-weight: 260;
  height: 4rem;
  top: 8.5rem;
  right: 9.5rem;
  z-index: 1;
  animation: moveUp 1s ease forwards;
  animation-delay: 5.3s;
}
}

@media (min-width: 600px) and (max-width: 850px) {
  .hero-container .main-content .right-main-content .right-content {
    background-color: #f3f0eb;
    width: 63%;
    height: 100%;
    right: -63%;
  }
  .hero-container .main-content .text-content {
    margin-top: 3rem;
    align-items: start;
  }
  .hero-container {
    height: 1400px;
  }
  .hero-container .main-content {
    flex-direction: column-reverse;
    height: 1400px;
  }
  .hero-container .main-content .text-content
  {
    width: 100%;
    height: 45%;
  }
  .hero-container .main-content .right-main-content {
    width: 100%;
    height: 55%;
  }
  .hero-container .main-content .text-content {
    padding-left: 2rem;
  }
  .hero-container .get-in-touch {
    display: none;
  }
  .hero-container .date {
    right: 4rem;
    font-size: 1.5rem;
  }
  @keyframes image-move-down {
    100% {
      top: 7rem;
      right: 0%;
      left: 20%;
    }
  }
}
@media (min-width: 500px) and (max-width: 600px) {
  .hero-container {
    height: 1050px;
  }
  .hero-container .main-content .text-content {
    align-items: start;
    margin-top: 2rem;
  }
  .hero-container .main-content {
    flex-direction: column-reverse;
    height: 1100px;
  }
  .hero-container .main-content .text-content,
  .hero-container .main-content .right-main-content {
    width: 100%;
    height: 50%;
  }
  .hero-container .main-content .text-content {
    padding-left: 2rem;
  }
  .text-content .hero-section-titles {
    width: 35rem;
    height: 3.5rem;
  }
  .text-content .hero-section-titles .greetings-text,
  .text-content .hero-section-titles p,
  .text-content .hero-section-titles p {
    font-size: 3rem;
    line-height: 3.5rem;
    font-weight: 260;
    margin: 0;
    top:3.5rem
  }
  .text-content .left-content .bottom-text .quote {
    position: relative;
    opacity: 0;
    width: 29rem;
  }
  .text-content .left-content .bottom-text .quote p {
    font-size: 1.3rem;
    margin: 0;
    font-style: normal;
    font-weight: 240;
  }
  .hero-container .get-in-touch {
    display: none;
  }
  .hero-container .date {
    right: 4rem;
    font-size: 1rem;
  }
  @keyframes image-move-down {
    100% {
      top: 7rem;
      right: 0%;
      left: 20%;
    }
  }
  @keyframes moveUpgreet {
    0% {
      top: 3.125rem;
    }
    100% {
      top: 0rem;
    }
  }
}
@media (min-width: 400px) and (max-width: 500px) {
  .hero-container .main-content .text-content {
    align-items: start;
  }
  .hero-container .main-content .right-main-content .right-content {
    background-color: #f3f0eb;
    width: 65%;
    height: 100%;
    right: -65%;
  }
  .hero-container {
    height: 890px;
  }
  .hero-container .main-content {
    flex-direction: column-reverse;
    height: 890px;
  }
  .hero-container .main-content .text-content,
  .hero-container .main-content .right-main-content {
    width: 100%;
    height: 50%;
  }
  .text-content .hero-section-titles {
    width: 35rem;
    height: 3rem;
  }
  .hero-container .main-content .right-main-content{
    margin-bottom: 2rem;
  }
  .hero-container .main-content .text-content {
    padding-left: 2rem;
  }
  .text-content .hero-section-titles .greetings-text,
  .text-content .hero-section-titles p,
  .text-content .hero-section-titles p {
    font-size: 2.37rem;
    line-height: 3rem;
    font-weight: 260;
    margin: 0;
    top:3rem;
  }
  .text-content .left-content .bottom-text .quote {
    position: relative;
    opacity: 0;
    width: 22rem;
  }
  .text-content .left-content .bottom-text .quote p {
    font-size: 1rem;
    margin: 0;
    font-style: normal;
    font-weight: 240;
  }
  .hero-container .get-in-touch {
    display: none;
  }
  .hero-container .date {
    top: 4rem;
    right: 2rem;
    font-size: 0.75rem;
  }
  .hero-container .date img{
    width: 1.8rem;
    height: 1.8rem;
  }
  @keyframes image-move-down {
    100% {
      top: 5rem;
      right: 0%;
      left: 20%;
    }
  }
  @keyframes moveUp {
    100% {
      top: 1rem;
    }
  }
  @keyframes moveUpgreet {
    0% {
      top: 2rem;
    }
    100% {
      top: 0rem;
    }
  }
  .text-content .left-content .bottom-text {
    position: relative;
    margin-top: .5rem !important;
  }
}

@media (max-width: 400px) {
  .hero-container .main-content .text-content {
    align-items: start;
  }
  .logo {
    position: absolute;
    top: 1.5rem;
    left: 1rem;
    z-index: 500;
  }
  .logo img{
    width: 5.5rem;
    height: 2rem;
  }
  .hero-container {
    height: 750px;
  }
  .hero-container .main-content {
    flex-direction: column-reverse;
    height: 750px;
  }
  .hero-container .main-content .text-content,
  .hero-container .main-content .right-main-content {
    width: 100%;
    height: 50%;
  }
  .text-content .hero-section-titles {
    width: 35rem;
    height: 3rem;
  }
  .hero-container .main-content .right-main-content{
    margin-bottom: 2rem;
  }
  .hero-container .main-content .text-content {
    padding-left: 2rem;
  }
  .hero-container .main-content .right-main-content .right-content {
    background-color: #f3f0eb;
    width: 65%;
    height: 100%;
    right: -65%;
  }
  .text-content .hero-section-titles .greetings-text,
  .text-content .hero-section-titles p,
  .text-content .hero-section-titles p {
    font-size: 2.37rem;
    line-height: 3rem;
    font-weight: 260;
    margin: 0;
    top:3rem;
  }
  .text-content .left-content .bottom-text .quote {
    position: relative;
    opacity: 0;
    width: 22rem;
  }
  .text-content .left-content .bottom-text .quote p {
    font-size: 1rem;
    margin: 0;
    font-style: normal;
    font-weight: 240;
  }
  .hero-container .get-in-touch {
    display: none;
  }
  .hero-container .date {
    top: 7rem;
    right: 1rem;
    font-size: 0.75rem;
  }
  @keyframes image-move-down {
    100% {
      top: 4.5rem;
      right: 0%;
      left: 20%;
    }
  }
  @keyframes moveUp {
    100% {
      top: .5rem;
    }
  }
  @keyframes moveUpgreet {
    0% {
      top: 2rem;
    }
    100% {
      top: 0rem;
    }
  }
  .text-content .left-content .button-container {
    position: relative;
    margin-top: 2rem;
    opacity: 0;
    transform: translateY(3rem);
    animation: revealText 1s ease-in-out forwards;
    animation-delay: 4.5s;
    pointer-events: auto;
  }
  .text-content .left-content .button-container button {
    font-size: 1rem;
    width: 11rem;
    height: 3rem;
  }
  .text-content .left-content .bottom-text {
    position: relative;
    margin-top: 0 !important;
  }
}