@font-face {
  font-family: "Syncopate";
  src: url("../font/Syncopate-Bold.eot");
  src: url("../font/Syncopate-Bold.eot?#iefix") format("embedded-opentype"),
    url("../font/Syncopate-Bold.woff2") format("woff2"),
    url("../font/Syncopate-Bold.woff") format("woff"),
    url("../font/Syncopate-Bold.ttf") format("truetype"),
    url("../font/Syncopate-Bold.svg#Syncopate-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Armata";
  src: url("../font/Armata-Regular.eot");
  src: url("../font/Armata-Regular.eot?#iefix") format("embedded-opentype"),
    url("../font/Armata-Regular.woff2") format("woff2"),
    url("../font/Armata-Regular.woff") format("woff"),
    url("../font/Armata-Regular.ttf") format("truetype"),
    url("../font/Armata-Regular.svg#Armata-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* -- CSS RESET -- */
*,
*::before,
*::after {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  font-family: "Armata", sans-serif;
}
* {
  margin: 0;
  padding: 0;
}
img {
  border: none;
  max-width: 100%;
  height: auto;
}
img:not([alt]) {
  outline: .1em solid red;
}
button {
  border: none;
  background-color: transparent;
}
::-webkit-scrollbar {
  width: .6em;
  border: var(--border-sm);
  background-color: var(--black-xl);
}
::-webkit-scrollbar-thumb {
  border: var(--border-sm);
  border-radius: 1em;
  background-color: var(--white-sm);
}
h1 {
  font-size: var(--font-size-xxxl);
}
h2 {
  font-size: var(--font-size-xxl);
}
h3 {
  font-size: var(--font-size-xl);
}
h4 {
  font-size: var(--font-size-lg);
}
h5 {
  font-size: var(--font-size-md);
}
h6 {
  font-size: var(--font-size-sm);
}
p {
  font-size: var(--font-size-base);
}
h1,
h2,
h3,
h5 {
  font-family: "Syncopate", sans-serif;
  font-style: italic;
  margin: 1em 0 1em;
  text-align: center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-color: var(--analog-1);
  text-shadow: -.01em .03em .02em rgba(29, 29, 58, .3);
}
hr {
  border: 0;
  height: .1em;
  background-image: linear-gradient(to right, rgba(234, 211, 98, 0), rgba(234, 211, 98, .7), rgba(234, 211, 98, 0));
}
:root {
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  --font-size-sm: clamp(.8rem, .15vw + .77rem, .89rem);
  --font-size-base: clamp(1rem, .31vw + .94rem, 1.19rem);
  --font-size-md: clamp(1.25rem, .55vw + 1.14rem, 1.58rem);
  --font-size-lg: clamp(1.56rem, .91vw + 1.38rem, 2.11rem);
  --font-size-xl: clamp(1.95rem, 1.43vw + 1.67rem, 2.81rem);
  --font-size-xxl: clamp(2.44rem, 2.18vw + 2.01rem, 3.75rem);
  --font-size-xxxl: clamp(3.05rem, 3.24vw + 2.4rem, 5rem);
  --head-text: linear-gradient(150deg, var(--analog-2) 0%, var(--analog-1) 100%);
  --timeline: linear-gradient(150deg, var(--analog-1) 0%, var(--analog-2) 100%);
  --black: #1d1d3a;
  --black-sm: rgba(29, 29, 58, .2);
  --black-md: rgba(29, 29, 58, .4);
  --black-lg: rgba(29, 29, 58, .6);
  --black-xl: rgba(29, 29, 58, .8);
  --white: #ead362;
  --white-sm: rgba(234, 211, 98, .2);
  --white-md: rgba(234, 211, 98, .4);
  --white-lg: rgba(234, 211, 98, .6);
  --white-xl: rgba(234, 211, 98, .8);
  --analog-1: #00bef1;
  --analog-2: #e04c3d;
  --border-sm: .03em solid var(--white-sm);
  --border-md: .03em solid var(--white-md);
  --border-lg: .03em solid var(--black-lg);
}
/* -- MAIN BACKGROUND -- */
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  place-items: center;
  padding: 2em 3em;
  background: linear-gradient(180deg, var(--black) 0%, var(--black-xl) 75%, var(--black) 100%);
}
header {
  position: fixed;
  width: 100%;
  margin: 0 auto;
  top: 0;
  left: 0;
  background-color: var(--black);
  z-index: 100;
}
footer {
  position: fixed;
  color: var(--white);
  bottom: 1em;
  left: .7em;
  writing-mode: vertical-rl;
}
/* -- NAVIGATION -- */
.nav-up {
  top: -7em;
  transition: all .5s cubic-bezier(.25, .8, .25, 1);
}
.nav-down {
  transition: all .5s cubic-bezier(.25, .8, .25, 1);
}
.navbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  padding: 1em;
}
.navbar img {
  height: 4em;
}
.navbar ul {
  display: flex;
  margin: 0;
  padding: 0;
  gap: 2em;
  list-style: none;
}
.navbar ul li a {
  display: block;
  padding: .5em;
  color: var(--white);
  border: var(--border-md);
  border-radius: .5em;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  transition: all .5s cubic-bezier(.25, .8, .25, 1);
}
.navbar ul li a:hover {
  color: var(--white-md);
  font-style: italic;
  border: var(--border-sm);
  border-radius: .5em;
  background-color: transparent;
  transition: all .5s cubic-bezier(.25, .8, .25, 1);
}
.nav-toggler {
  display: none;
  height: 3em;
  padding: .5em;
  border: var(--border-md);
  border-radius: .5em;
  background-color: transparent;
  cursor: pointer;
}
.nav-toggler span,
.nav-toggler span:before,
.nav-toggler span:after {
  display: block;
  width: 2em;
  height: .2em;
  background-color: var(--white-lg);
  transition: all .5s cubic-bezier(.25, .8, .25, 1);
}
.nav-toggler span:before {
  content: '';
  transform: translateY(-.6em);
}
.nav-toggler span:after {
  content: '';
  transform: translateY(.4em);
}
.nav-toggler.toggler-open span {
  background-color: transparent;
}
.nav-toggler.toggler-open span:before {
  background-color: var(--analog-2);
  transform: translateY(0px) rotate(45deg);
}
.nav-toggler.toggler-open span:after {
  background-color: var(--analog-2);
  transform: translateY(-.2em) rotate(-45deg);
}
/* -- HEADER -- */
.hero video {
  width: 100%;
  height: 30em ! important;
  margin-top: 6em;
  padding: .5em;
  border: var(--border-md);
  border-radius: 1em;
  object-fit: cover;
  object-position: center;
}
/* -- CARDS -- */
.video-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3em;
}
.video-cards ul {
  list-style: none;
}
.video-card {
  display: flex;
  flex-direction: column;
  padding: .5em;
  border: var(--border-md);
  border-radius: 1em;
  background-color: var(--black-md);
  color: var(--white);
  overflow: hidden;
  transition: all .5s cubic-bezier(.25, .8, .25, 1);
}
.tour-name {
  font-size: var(--font-size-sm);
  padding: .5em;
}
.tour-type {
  font-size: var(--font-size-md);
  padding: .5em;
  transform-origin: bottom;
  transition: all .5s cubic-bezier(.25, .8, .25, 1);
}
.video-card:hover video {
  transform: scale(1.4);
  transform-origin: center;
}
.video-card:hover .tour-type {
  transform: scaleY(0);
  opacity: 0;
}
video {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: .5em .5em 0 0;
  cursor: pointer;
  transition: all .5s cubic-bezier(.25, .8, .25, 1);
  aspect-ratio: 16 / 9;
}
/* -- MODAL DETAiLS -- */
@-webkit-keyframes showOverlay {
  from {
    visibility: hidden;
    opacity: 0;
  }
  to {
    visibility: visible;
    opacity: 1;
  }
}
@keyframes showOverlay {
  from {
    visibility: hidden;
    opacity: 0;
  }
  to {
    visibility: visible;
    opacity: 1;
  }
}
@-webkit-keyframes hideOverlay {
  from {
    visibility: visible;
    opacity: 1;
  }
  to {
    visibility: hidden;
    opacity: 0;
  }
}
@keyframes hideOverlay {
  from {
    visibility: visible;
    opacity: 1;
  }
  to {
    visibility: hidden;
    opacity: 0;
  }
}
@-webkit-keyframes showModal {
  from {
    opacity: 0;
    transform: translateY(50%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes showModal {
  from {
    opacity: 0;
    transform: translateY(50%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes hideModal {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(50%);
  }
}
@keyframes hideModal {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(50%);
  }
}
.overlay {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  -webkit-animation-duration: .2s;
  animation-duration: .2s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  will-change: transform, opacity;
}
.overlay[data-backdrop] {
  background: var(--black-xl);
}
.overlay[data-opened=true] {
  pointer-events: auto;
  -webkit-animation-name: showOverlay;
  animation-name: showOverlay;
}
.overlay[data-opened=false] {
  -webkit-animation-name: hideOverlay;
  animation-name: hideOverlay;
}
.modal {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--black-xl);
  opacity: 0;
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  will-change: transform, opacity;
}
@media (min-width: 40em) {
  .modal {
    max-width: 45em;
    height: auto;
    max-height: 100%;
    margin: 1em;
  }
}
.overlay[data-opened=true] .modal {
  -webkit-animation-name: showModal;
  animation-name: showModal;
  -webkit-animation-timing-function: cubic-bezier(0, 0, .2, 1);
  animation-timing-function: cubic-bezier(0, 0, .2, 1);
}
.overlay[data-opened=false] .modal {
  -webkit-animation-name: hideModal;
  animation-name: hideModal;
  -webkit-animation-timing-function: cubic-bezier(.4, 0, 1, 1);
  animation-timing-function: cubic-bezier(.4, 0, 1, 1);
}
.modal-content {
  overflow-x: hidden;
  overflow-y: auto;
  flex-grow: 1;
  width: 100%;
  padding: 1em;
  color: var(--white);
}
.modal-content img {
  padding: .5em;
  margin: .5em 0 .5em;
  border: var(--border-md);
  border-radius: 1em;
}
.modal-content p {
  padding: .5em;
}
.button[data-modal-close] {
  position: absolute;
  z-index: 100;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  padding: 0;
  background: none;
  border-radius: none;
  cursor: pointer;
  text-decoration: none;
  color: var(--analog-2);
  transition: all .5s cubic-bezier(.25, .8, .25, 1);
}
.button[data-modal-close]:hover {
  color: var(--analog-1);
}
.modal .button[data-modal-close] {
  align-self: stretch;
  color: var(--analog-2);
}
.modal .button[data-modal-close]:hover {
  color: var(--analog-1);
}
.button[data-modal-close] .icon {
  flex-shrink: 0;
  width: 2em;
  height: 2em;
  pointer-events: none;
  fill: currentColor;
}
/* -- TIMELiNE -- */
.timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.timeline:before {
  content: "";
  position: absolute;
  top: -3em;
  left: 2em;
  width: .25em;
  height: calc(100% + 6em);
  background: var(--timeline);
  background-attachment: fixed;
  border-radius: .5em;
  opacity: .3;
}
.timeline-entry {
  position: relative;
  margin-bottom: 4em;
  color: var(--white-xl);
}
.timeline-entry:after {
  content: "";
  display: table;
  clear: both;
}
.timeline-id {
  position: absolute;
  left: 2em;
  padding: .5em .5em;
  border-radius: .5em;
  border: var(--border-sm);
  background: var(--black-lg);
  color: var(--white);
  font-size: var(--font-size-base);
  font-weight: bold;
  transform: translateX(-50%);
}
.timeline-content {
  position: relative;
  display: block;
  margin-left: 6em;
  padding: 1em;
  border: var(--border-sm);
  background: var(--black-lg);
  border-radius: .5em;
}
.timeline-text {
  color: var(--white);
  text-indent: 1.5em;
}
.timeline-text:last-child {
  margin-bottom: 1em;
}
/* -- ABOUT US -- */
.about-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3em;
}
.about-card {
  padding: 1em;
  border: var(--border-md);
  border-radius: 1em;
  background-color: var(--black-sm);
  color: var(--white);
  transition: all .5s cubic-bezier(.25, .8, .25, 1);
}
.about-card:hover {
  border: var(--border-md);
  border-radius: 1em;
  background-color: var(--black-md);
  transition: all .5s cubic-bezier(.25, .8, .25, 1);
}
.about-card p {
  max-width: 70ch;
}
.first p:first-of-type::first-letter {
  float: left;
  font-size: var(--font-size-xxl);
  line-height: .8;
  margin: 0;
  padding: .2em .2em 0 0;
}
/* -- CONTACT US -- */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3em;
  text-align: center;
}
.contact-card {
  padding: .5em;
  color: var(--white);
  border: var(--border-md);
  border-radius: 1em;
  background-color: var(--black-sm);
  transition: all .5s cubic-bezier(.25, .8, .25, 1);
  cursor: pointer;
}
.contact-card:hover {
  border: var(--border-md);
  border-radius: 1em;
  background-color: var(--black-md);
  transition: all .5s cubic-bezier(.25, .8, .25, 1);
  cursor: pointer;
}
.contact-card a {
  color: var(--white);
  text-decoration: none;
}
.contact-card img {
  width: 2.5em;
  vertical-align: middle;
}
.contact-card iframe {
  max-width: 100%;
  width: 100%;
  border-radius: .5em;
  display: block;
  cursor: pointer;
  transition: all .5s cubic-bezier(.25, .8, .25, 1);
}
.mailto-link {
  position: relative;
  padding: .5em 0;
}
.mailto-message {
  display: none;
  position: absolute;
  width: auto;
  top: .25em;
  left: 0;
  margin-bottom: -.5em;
  padding: .25em .75em;
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--white);
  transform: translate(-50%, -100%);
  white-space: nowrap;
  border: var(--border-md);
  border-radius: .5em;
  background-color: var(--analog-2);
}
.mailto-message:after,
.mailto-message:before {
  content: "";
}
.mailto-message:before {
  position: absolute;
  top: 100%;
  left: 50%;
  height: 0;
  width: 0;
  pointer-events: none;
  border: solid transparent;
  border-top-color: var(--analog-2);
  border-width: .5em;
  margin-left: -.5em;
}
.mailto-link:hover .mailto-message,
.mailto-link:focus .mailto-message,
.mailto-link:focus-within .mailto-message {
  display: block;
}
/* -- @MEDIA -- */
@media (max-width: 64em) {
  ::-webkit-scrollbar {
    display: none;
  }
  .about-cards,
  .contact-cards,
  .video-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 2em;
  }
  .nav-toggler {
    display: block;
  }
  .navbar ul {
    position: absolute;
    flex-direction: column;
    gap: 1em;
    width: 50%;
    max-height: 0;
    top: 6em;
    border-radius:  0 0 1em 1em;
    background-color: var(--black);
    transition: all .5s cubic-bezier(.25, .8, .25, 1);
    overflow: hidden;
  }
  .navbar ul li {
    width: 100%;
    text-align: center;
  }
  .navbar ul li a {
    padding: 1em;
    margin: .5em;
    color: var(--white);
    border: var(--border-md);
    background-color: var(--black-xl);
    letter-spacing: .2em;
  }
  .navbar ul li a:hover {
    color: var(--black);
    background-color: var(--white-xl);
  }
  .navbar ul.open {
    max-height: 100vh;
    overflow: visible;
  }
}
@media (max-width:40em) {
  .about-cards,
  .contact-cards,
  .video-cards {
    grid-template-columns: repeat(1, 1fr);
  }
  .timeline:before {
    left: 50%;
    transform: translateX(-50%);
  }
  .timeline-entry {
    top: 3em;
  }
  .timeline-id {
    left: 50%;
    top: -3em;
    transform: translateX(-50%);
  }
  .timeline-content {
    margin-left: 0;
  }
  .modal h3 {
    margin-top: 2em;
  }
}
/* -- @MEDIA -- */
.scroll-to-top {
  display: none;
  position: fixed;
  right: .1em;
  bottom: 1em;
  width: 3em;
  height: 3em;
  border-radius: 50% !important;
}
.arrow {
  animation: toggle .5s alternate infinite;
}
@keyframes toggle {
  to {
      transform: translateY(-2em);
  }
}