:root {
   --dropdown-menu-bg: rgb(63, 63, 63);
}

.hero {
   height: 605px;
   display: flex;
   /* padding: 0 var(--hmargin); */
   flex-direction: column;
   background-color: #5c7e9c;
   /* background: url("/img/bg/hero.jpg");
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover; */
   position: relative;
   color: #ffffff;
   justify-content: center;
}

.hero-topShadow {
   width: 100%;
   left: 0;
   top: 0;
   height: 320px;
   position: absolute;
   background: linear-gradient(#28282880, #62626200);
   transition: height 0.8s ease-out;
}

.hero-content {
   margin-top: 100px;
   display: grid;
   height: 100%;
   /* align-content: center; */
   grid-template-columns: 1fr 1fr;
   grid-template-areas: "left right";
}

.hero-content > * {
   padding: 40px;
}

.hero-content-left {
   grid-area: left;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: end;
   gap: 60px;
   /* background-color: #5c7e9c; */
}
.hero-content-right {
   grid-area: right;
   background: url("/img/bg/hero.jpg");
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   max-width: 700px;
   z-index: 1;
}

.hero-content-text {
   max-width: 430px;
   font-size: 58px;
   font-weight: normal;
   text-align: right;
}

.hero-orderButton {
   background-color: #5f96c5;
}

@media screen and (max-width: 1400px) {
}

@media screen and (max-width: 1000px) {
   .hero-content-text {
      font-size: 52px;
   }
}

@media screen and (max-width: 800px) {
   .hero {
      height: 605px;
      display: flex;
      padding: 0 var(--hmargin);
      flex-direction: column;
      background: url("/img/bg/hero.jpg");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      position: relative;
      color: #ffffff;
   }
   
   .hero-topShadow {
      width: 100%;
      left: 0;
      height: 320px;
      position: absolute;
      background: linear-gradient(#28282880, #62626200);
   }
   
   .hero-content {
      display: flex;
      flex-direction: column;
      height: 100%;
      max-width: 700px;
      align-self: center;
      row-gap: 115px;
      margin-bottom: 95px;
      align-items: center;
      justify-content: end;
      margin-left: var(--hmargin);
      margin-right: var(--hmargin);
   }

   .hero-content > * {
      padding: unset;
   }
   
   .hero-content-text {
      font-size: 64px;
      font-weight: normal;
      text-align: center;
   }

   .hero-content-left {
      align-items: center;
   }
   
   .hero-content-right {
      display: none;
   }
}

@media screen and (max-width: 600px) {
   .hero-content {
      margin-top: 170px;
      row-gap: 110px;
      justify-content: unset;
   }

   .hero-content-text {
      font-size: 45px;
   }
}