body { background-color: #ffffff; padding: 0; margin: 0; }

.container { height: 100dvh; width: 100%; overflow: hidden; background-size: cover; background-position: center; position: relative; }
.container { animation: 1s fader ease-in-out 0s forwards; opacity: 0; }

.bg-image { position: absolute; left: 0; top: 0; width: 100%; height: 100dvh; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; }
.bg-image { animation: 3.5s bg ease-in-out 0s forwards; }

.bg-image.bg-video .video-container,
.bg-image.bg-video video { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }

.bg-image.bg-video video { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.header { position: absolute; top: 160px; left: 100px; z-index: 1; background-color: var(--hl-dark-green); padding: 100px 40px 60px 40px; width: 90%; max-width: 395px; opacity: 0; box-sizing: border-box; }
.header { animation: 1s fader ease-in-out 1s forwards; }

.header img.logo { height: 126px; position: absolute; top: -63px; left: 40px; }
.header h1 { font-family: Roobert; font-size: 60px; font-weight: 600; color: #ffffff; margin: 0 0 0.5em 0; line-height: 1em; }

.header p { font-family: Roobert; font-size: 36px; font-weight: 400; color: var(--hl-light-green); line-height: 1.2em; }
.header > :last-child { margin-bottom: 0; }



a.enter-here { display: flex; flex-direction: row; gap: 10px; align-items: center; position: absolute; top: 240px; right: 0; z-index: 2; height: 53px; padding: 0 0 0 10px; background-color: #ffffff; color: var(--hl-dark-green); border: none; opacity: 0; }
a.enter-here label { font-family: Roobert; font-size: 16px; font-weight: 400; background-color: inherit; color: inherit; padding: 10px; }
a.enter-here .arrow { width: 53px; height: 53px; position: relative; }
a.enter-here .arrow:after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-image: url("/_assets/btn-arrow-hl-dark-green.png"); background-size: 17px; background-position: center; background-repeat: no-repeat; }
a.enter-here { animation: 1s btn-in ease-in-out 2s forwards; }

a.enter-here:hover { background-color: var(--hl-dark-green); color: #ffffff; }

/*** Animations ***/

@keyframes fader {
   0% { opacity: 0 }
   100% { opacity: 1 }
}

@keyframes btn-in {
   0% { opacity: 0; right: -50px; }
   100% { opacity: 1; right: 0 }
} 

@keyframes bg {
   0% { transform: scale(1.2) }
   100% { transform: scale(1) }
} 


/*** Responsive ***/

@media (max-width: 800px) {
   .header { top: 80px; left: 50px; width: auto; max-width: 340px; }
   .header h1 { font-size: 50px; }
}

@media (max-width: 590px) {
   .header { left: 30px; max-width: calc(100vw - 100px); }

   a.enter-here { top: 460px; }
}

@media (max-width: 400px) {
   .header  { max-width: calc(100vw - 60px); }
   .header h1 { font-size: 38px; line-height: 1.1em; }
}