styles.css

@font-face {
  font-family: 'VisbyCF';
  src: url('fonts/VisbyCF-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'VisbyCF-Heavy';
  src: url('fonts/VisbyCF-Heavy.otf') format('opentype');
}

@font-face {
  font-family: 'VisbyCF-DemiBold';
  src: url('fonts/VisbyCF-DemiBold.otf') format('opentype');
}

@font-face {
  font-family: 'VisbyCF-Bold';
  src: url('fonts/VisbyCF-Bold.otf') format('opentype');
}

@font-face {
  font-family: 'VisbyCF-ExtraBold';
  src: url('fonts/VisbyCF-ExtraBold.otf') format('opentype');
}

:root {
  --font-default: 'VisbyCF', sans-serif;
  --font-demi-bold: 'VisbyCF-DemiBold', sans-serif;
  --font-bold: 'VisbyCF-Bold', sans-serif;
  --font-extra-bold: 'VisbyCF-ExtraBold', sans-serif;
  --font-heavy: 'VisbyCF-Heavy', sans-serif;

  --colors-white: #ffffff;
  --colors-black: #000000;
  --colors-dark-grey: #555555;
  --colors-grey: #f7f7f7;
  --colors-dark-blue: #595ff0;
  --colors-blue: #59c2f0;
  --colors-yellow: #f0b659;

  --breakpoint-xs: 320px;
  --breakpoint-s: 576px;
  --breakpoint-m: 768px;
  --breakpoint-l: 992px;
  --breakpoint-xl: 1248px;

  --spacing-2-xs: 0.5vw;
  --spacing-xs: 0.75vw;
  --spacing-s: 1vw;
  --spacing-m: 1.5vw;
  --spacing-l: 2vw;
  --spacing-xl: 2.5vw;
  --spacing-2-xl: 3.25vw;
  --spacing-3-xl: 3.5vw;
  --spacing-4-xl: 4vw;
  --spacing-5-xl: 4.5vw;
  --spacing-6-xl: 5vw;
  --spacing-7-xl: 7vw;

  --fontsize-heading-xxl: 7.2vw;
  --fontsize-heading-mobile-xxl: 16.35vw;

  --fontsize-heading-xl: 3.5vw;
  --fontsize-heading-mobile-xl: 14vw;

  --fontsize-heading-l: 2.5vw;
  --fontsize-heading-mobile-l: 9.34vw;

  --fontsize-heading-s: 1.5vw;
  --fontsize-heading-mobile-s: 5.84vw;

  --fontsize-heading-m: 1.7vw;

  --fontsize-body-s: 0.875vw;

  --fontsize-body-m: 1vw;
  --fontsize-body-mobile-m: 5.84vw;

  --fontsize-body-l: 1.66vw;
  --fontsize-body-mobile-l: 7.47vw;

  --fontsize-body-mobile-xxl: 8.17vw;

  --fontsize-body-xl: 2.08vw;
  --fontsize-body-mobile-xl: 9.34vw;
  --fontsize-body-mobile-2-xl: 20.32vw;
  --fontsize-body-mobile-3-xl: 30.84vw;

  --lineheight-xs: 0.6;
  --lineheight-s: 1;
  --lineheight-m: 1.2;
  --lineheight-l: 1.5;
  --lineheight-xl: 2.08vw;
  --lineheight-mobile-xl: 7.08vw;
}

/*::marker {
  content: '»';
  font-size: 1em;
  --hue: 0;
  color: var(--colors-white);
}*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-default);
  width: 100%;
  height: 100%;
}

h1,
h2 {
  font-family: var(--font-heavy);
  font-size: var(--fontsize-heading-xxl);
  letter-spacing: -1px;
  line-height: 6.5vw;
  font-weight: 600;
}

h3 {
  font-size: var(--fontsize-heading-l);
  font-weight: 400;
  line-height: var(--lineheight-s);
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  h1,
  h2 {
    font-size: var(--fontsize-heading-mobile-xxl);
    line-height: var(--lineheight-s);
    padding: var(--spacing-4-xl) 0;
  }

  h3 {
    font-size: var(--fontsize-heading-mobile-s);
    line-height: var(--lineheight-m);
    padding: var(--spacing-4-xl) 0;
  }
}

ul li {
  list-style: none;
}

ul li:before {
  content: '»';
  font-size: 1em;
  padding-right: 5px;
}

header {
  position: fixed;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-m);
  background-color: var(--colors-dark-blue);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

header.small {
  padding: var(--spacing-xs) var(--spacing-m);
  border-bottom: 5px solid white;
}

header.small img {
  height: 2vw;
}

header img {
  margin-top: 0.3vw;
  height: 3.2vw;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  header {
    padding: var(--spacing-4-xl) 5vw;
  }

  header img {
    height: 14.48vw;
  }

  header.small {
    padding: var(--spacing-2-xl) 5vw;
    border-bottom: 5px solid white;
  }

  header.small img {
    height: 8vw;
  }
}

header .logo-container {
  display: flex;
  justify-content: center;
}

header .logo-container > :first-child {
  margin-right: var(--spacing-xs);
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  header .logo-container > :last-child {
    display: none;
  }

  header.small img {
    height: 8vw;
  }
}

header ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

header ul a,
header ul a:visited {
  color: var(--colors-white);
  font-size: var(--fontsize-heading-s);
  font-family: var(--font-bold);
  text-decoration: none;
  padding-bottom: var(--spacing-xxs);
  border-bottom: 2px solid var(--colors-white);
}

header ul a:hover {
  color: var(--colors-yellow);
  border-bottom: 2px solid var(--colors-yellow);
}

header ul li {
  margin: var(--spacing-s) 0;
  width: 100%;
  list-style-type: none;
}

header ul li::before {
  content: '';
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  header ul a,
  header ul a:visited {
    font-size: var(--fontsize-body-mobile-l);
    padding-bottom: var(--spacing-xxs);
  }

  header ul {
    width: 100%;
    padding: var(--spacing-xl) 0;
  }

  header ul li {
    margin: var(--spacing-3-xl) 0;
    width: 100%;
  }
}

/*hamburger*/

.menu__icon {
  height: var(--spacing-2-xl);
  width: var(--spacing-2-xl);
  margin: 1.7vw;
  margin-right: 0;
  position: absolute;
  top: 0;
  right: var(--spacing-m);
  display: inline-block;
  vertical-align: middle;
  z-index: 20;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

header.small .menu__icon {
  height: var(--spacing-l);
  width: var(--spacing-l);
  margin: 0.9vw 0;
}

.menu__icon span {
  display: block;
  background: white;
  width: 100%;
  height: 15%;
  margin-top: -7.5%;
  position: absolute;
  left: 0;
  top: 50%;
}

header.small .menu__icon span {
  height: 15%;
  margin-top: -7.5%;
}

.menu__icon:before,
.menu__icon:after {
  content: '';
  display: block;
  background: var(--colors-white);
  width: 100%;
  height: 15%;
  position: absolute;
  left: 0;
  transform-origin: center center;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}

.menu__icon:before {
  top: 5%;
  margin-top: 5%;
}

.menu__icon:after {
  bottom: 5%;
  margin-bottom: 5%;
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .menu__icon {
    height: 14.48vw;
    width: 14.48vw;
    margin: 4.2vw 1vw;
    right: var(--spacing-5-xl);
  }

  header.small .menu__icon {
    height: var(--spacing-7-xl);
    width: var(--spacing-7-xl);
    margin: 4vw 0;
  }

  .menu__icon span {
    height: 15%;
    margin-top: -7.5%;
    left: 0;
    top: 50%;
  }

  header.small .menu__icon span {
    height: 15%;
    margin-top: -7.5%;
  }

  .menu__icon:before,
  .menu__icon:after {
    width: 100%;
    height: 15%;
    left: 0;
  }

  .menu__icon:before {
    top: 5%;
    margin-top: 5%;
  }

  .menu__icon:after {
    bottom: 5%;
    margin-bottom: 5%;
  }
}

.menu_shown .menu__icon span {
  background: transparent;
}

.menu_shown .menu__icon:before {
  top: 50%;
  margin-top: 2%;
  transform: rotate(45deg);
}

.menu_shown .menu__icon:after {
  bottom: 50%;
  margin-bottom: -15%;
  transform: rotate(-45deg);
}

.mobile.menu {
  width: 100%;
  position: fixed;
  overflow-y: auto;
  height: 100%;
  top: 0;
  left: 0;
  min-height: 100vh;
  text-align: center;
  background: var(--colors-dark-grey);
  z-index: 10;
  transition: all 0.4s ease-in-out;
  transform: translateX(-100%);
}

.menu_shown .mobile.menu {
  transform: translateX(0);
}

.mobile .menu__item {
  display: block;
  line-height: 2;
  padding: 25px 0;
}

section {
  /*height: 100vh;*/
  display: flex;
  justify-content: center;
  align-items: center;
  scroll-snap-align: start;
  padding: 0 var(--spacing-m);
  scroll-margin: var(--spacing-m);
}

section.intro {
  height: 100vh;
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  section {
    height: unset;
  }

  section.intro {
    height: unset;
  }
}

.container {
  /*height: 100vh;*/
  /*scroll-snap-type: y mandatory;
  overflow-y: scroll;
  scroll-behavior: smooth;*/

  animation: fadeInAnimation ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .container {
    height: unset;
  }
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.content {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-4-xl);
  width: 100%;
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .content {
    max-width: unset;
    padding: 18vw var(--spacing-4-xl);
  }
}

.col-2 {
  display: flex;
  font-family: var(--font-demi-bold);
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .col-2 {
    flex-direction: column;
  }
}

.col-2 > div {
  flex: 1 0 50%;
  font-size: var(--fontsize-body-l);
  line-height: var(--lineheight-xl);
}

.col-2 > :first-child {
  padding-right: var(--spacing-l);
}

.col-2 > :last-child {
  padding-left: var(--spacing-l);
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .col-2 > div {
    font-size: var(--fontsize-body-mobile-m);
    line-height: var(--lineheight-mobile-xl);
  }

  .col-2 > :first-child {
    padding-right: 0;
  }

  .col-2 > :last-child {
    padding-left: 0;
  }
}

.col-2-auto {
  height: 70vh;
  display: flex;
  flex-direction: column;
  flex-flow: column wrap;
  align-content: flex-start;
  column-gap: var(--spacing-6-xl);
}

.col-2-auto > * {
  flex: 1 0 50%;
  /*width: 50%;*/
}

.col-2-auto .title {
  font-weight: 600;
  margin-top: var(--spacing-m);
}

.block-rows {
  border-bottom: 5px solid var(--colors-white);
  margin-bottom: var(--spacing-m);
  padding-bottom: var(--spacing-2-xs);
  line-height: var(--lineheight-m);
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .block-rows {
    margin-bottom: var(--spacing-7-xl);
    padding-bottom: var(--spacing-6-xl);
  }
}

.block-row.bold {
  font-family: var(--font-extra-bold);
}

/*INTRO*/

.intro {
  background-color: var(--colors-dark-blue);
}

.intro-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}

.intro-content > .content > h1 {
  width: 90%;
}

.intro-content > .content > h1 > :first-child {
  color: var(--colors-white);
}

.intro-content > .content > h1 > :last-child {
  color: var(--colors-yellow);
}

.intro-content > .content > h1 > :nth-child(2) {
  color: var(--colors-yellow);
}

.heading-mobile {
  display: none;
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .heading-desktop {
    display: none;
  }

  .heading-mobile {
    display: inline-block;
  }
}

.intro-content-top {
  display: flex;
  justify-content: space-between;
  padding: 3.5vw 0;
  border-bottom: 5px solid var(--colors-white);
  transition: all 0s linear;
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .intro-content-top {
    padding: 12.8vw 0;
    margin: 0 var(--spacing-4-xl);
  }
}

.intro-content-top.no-border {
  border-bottom: none;
}

.intro-content-bottom {
  display: flex;
  justify-content: space-between;
  border-top: 5px solid var(--colors-white);
}

.intro-content-bottom > div {
  margin: var(--spacing-s) 0;
}

.intro-content-bottom p {
  color: var(--colors-white);
  font-family: var(--font-bold);
  font-size: var(--fontsize-body-l);
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .intro-content-bottom {
    display: flex;
    flex-direction: column;
    border-top: 5px solid var(--colors-white);
    padding: var(--spacing-4-xl) 0;
    margin: 0 var(--spacing-4-xl);
  }

  .intro-content-bottom > div {
    margin: 0;
  }

  .intro-content-bottom p {
    font-size: var(--fontsize-body-mobile-l);
    line-height: var(--lineheight-s);
  }
}

/*MISSION*/

.mission {
  background-color: var(--colors-yellow);
}

.mission-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 100%;
  color: var(--colors-white);
}

.mission-content > .content > h2 {
  width: 70%;

  margin-bottom: var(--spacing-2-xl);
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .mission-content > .content > h2 {
    width: 100%;
    padding: var(--spacing-4-xl) 0;
  }
}

.mission-content > .content > .author {
  display: flex;
  justify-content: flex-end;
  font-size: var(--fontsize-heading-l);
  font-family: var(--font-heavy);
  padding: var(--spacing-m) 0;
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .mission-content > .content > .author {
    justify-content: flex-start;
    font-size: var(--fontsize-heading-mobile-l);
    padding-top: var(--spacing-4-xl);
    padding-bottom: var(--spacing-7-xl);
  }
}

.mission-content > .content > h2 > :first-child {
  color: var(--colors-dark-blue);
}

/*ABOUT ME*/

.about {
  background-color: var(--colors-white);
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .about .col-2 {
    gap: 0;
  }
}

.about-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 100%;
  color: var(--colors-dark-grey);
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .about-content {
    margin-bottom: var(--spacing-4-xl);
  }
}

.about-content > .content > h2 {
  width: 70%;
  color: var(--colors-blue);
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .about-content > .content > h2 {
    width: 100%;
    margin: var(--spacing-l) 0;
  }
}

.about-content img {
  width: 100%;
  opacity: 0.63;
  padding-top: var(--spacing-3-xl);
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .about-content img {
    max-width: 80%;
    padding-top: var(--spacing-l);
  }
}

.about-content .col-about-me {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.about-content .col-about-me > h3 {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  font-size: var(--fontsize-heading-xl);
  font-family: var(--font-heavy);
  margin: var(--spacing-l) 0;
  color: var(--colors-yellow);
  width: 100%;
  text-align: center;
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .about-content .col-2 > div {
    font-size: var(--fontsize-body-mobile-m);
  }

  .about-content .col-about-me > h3 {
    font-size: var(--fontsize-heading-mobile-l);
    text-align: start;
  }
}

/* EXPERIENCE */

.experience {
  background-color: var(--colors-dark-grey);
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .experience {
    padding-bottom: var(--spacing-l);
  }
}
.experience-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 100%;
  color: var(--colors-white);
}

.experience-content > .content > h2 {
  margin: var(--spacing-xl) 0;
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .experience-content > .content > h2 {
    margin: var(--spacing-l) 0;
  }
}

.experience-content > .content > h2 > :first-child {
  color: var(--colors-white);
}

.experience-content > .content > h2 > :last-child {
  color: var(--colors-yellow);
}

/* SERVICES */

.services {
  background-color: var(--colors-white);
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .services {
    padding-bottom: var(--spacing-xl);
  }
}

.services-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 100%;
  color: var(--colors-dark-grey);
}

.services-content p {
  font-size: var(--fontsize-body-l);
  font-family: var(--font-demi-bold);
  margin-bottom: var(--spacing-l);
}

.services-content > .content > h2 {
  margin: var(--spacing-xl) 0;
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .services-content p {
    font-size: var(--fontsize-body-mobile-m);
    margin-bottom: var(--spacing-7-xl);
    line-height: var(--lineheight-mobile-xl);
  }

  .services-content > .content > h2 {
    margin: var(--spacing-l) 0;
  }
}

.services-content > .content > h2 > :first-child {
  color: var(--colors-white);
}

.services-content > .content > h2 > :last-child {
  color: var(--colors-yellow);
}

.services-content .col-2 {
  gap: var(--spacing-xl);
}

.services-container {
  display: flex;
  flex-direction: column;
  border-top: 5px solid var(--colors-dark-grey);
  border-bottom: 5px solid var(--colors-dark-grey);
}

.services-container > .row-1 {
  display: flex;
  justify-content: center;
  border-top: 5px solid var(--colors-dark-grey);
  border-bottom: 5px solid var(--colors-dark-grey);
  padding: var(--spacing-xs);
  color: var(--colors-white);
  font-size: var(--fontsize-heading-l);
  font-family: var(--font-extra-bold);
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .services-container > .row-1 {
    font-size: 7vw;
    padding: var(--spacing-xl);
    text-align: center;
  }
}

.services-container > :first-child {
  border-top: none;
  border-bottom: none;
}

.services-container > :last-child {
  border-bottom: none;
}

.services-container > .row-1.blue {
  background-color: var(--colors-blue);
}

.services-container > .row-1.yellow {
  background-color: var(--colors-yellow);
}

.services-container > .row-4 {
  display: flex;
  font-size: var(--fontsize-body-xl);
  font-family: var(--font-demi-bold);
  align-items: stretch;
  text-align: center;
}

.services-container > .row-4 > * {
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 5px solid var(--colors-dark-grey);
  padding: var(--spacing-xs);
  line-height: 1;
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .services-container > .row-4 {
    flex-direction: column;
  }

  .services-container > .row-4 > * {
    width: 100%;
    border-bottom: 5px solid var(--colors-dark-grey);
    border-right: none;
    font-size: var(--fontsize-body-mobile-m);
    padding: var(--spacing-xl);
    line-height: var(--lineheight-5-xl);
  }

  .services-container > .row-4 > :last-child {
    border-bottom: none;
  }
}

.services-container > .row-4 > :last-child {
  border-right: none;
}

/* AWARDS */

.awards {
  background-color: var(--colors-dark-blue);
}

.awards .col-2-auto > * {
  flex: 0 0 auto;
  width: 50%;
}

.awards-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 100%;
  color: var(--colors-white);
}

.awards-content .block-rows {
  margin-bottom: var(--spacing-2-xs);
  padding-bottom: var(--spacing-s);
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .awards-content .block-rows {
    padding-bottom: var(--spacing-4-xl);
    margin-bottom: var(--spacing-4-xl);
  }
}

.awards-content .block-rows.last {
  border: none;
}

.awards-content .block-row.title {
  padding-top: var(--spacing-s);
}

.awards-content .block-row.title.first {
  padding-top: 0;
}

.awards-content > .content > h2 {
  margin: var(--spacing-xl) 0;
  width: 100%;
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .awards-content > .content > h2 {
    font-size: var(--fontsize-heading-mobile-xl);
  }
}

.awards-content > .content > h2 > :first-child {
  color: var(--colors-yellow);
}

.awards-content > .content > h2 > :last-child {
  color: var(--colors-white);
}

/* CONTACT */

.contact {
  margin: 0;
  padding: 0;
  font-family: var(--font-demi-bold);
}

.contact > .contact-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  color: var(--colors-white);
}

.contact > .contact-content > :first-child {
  background-color: var(--colors-yellow);
  padding: 0 var(--spacing-m);
}

.contact > .contact-content > :nth-child(2) {
  background-color: var(--colors-dark-blue);
  padding: 0 var(--spacing-m);
}

.contact > .contact-content > :last-child {
  height: 8vh;
  border-top: 5px solid var(--colors-white);
  background-color: var(--colors-dark-grey);
  padding: 0 var(--spacing-m);
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .contact > .contact-content > :first-child {
    height: 100%;
  }

  .contact > .contact-content > :nth-child(2) {
    height: 100%;
    background-color: var(--colors-dark-blue);
    padding: 0 var(--spacing-m);
  }

  .contact > .contact-content > :last-child {
    background-color: var(--colors-dark-grey);
    padding: 8vw;
  }
}

.contact-content h2 {
  margin: 0;
  line-height: var(--lineheight-xs);
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .contact-content h2 {
    margin: var(--spacing-l) 0;
  }
}

.contact-content .content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100%;
}

.contact-content > :first-child > .content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .contact-content .content {
    flex-direction: column;
  }
}

.contact-content .contact-blocks-container {
  display: flex;
  justify-content: flex-end;
}

.contact-content .contact-blocks {
  display: flex;
  flex-direction: column;
  justify-content: center;

  height: 100%;
  gap: var(--spacing-m);
  font-size: var(--fontsize-body-l);
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .contact-content .contact-blocks {
    font-size: var(--fontsize-body-mobile-m);
  }

  .contact-content .contact-blocks-container {
    justify-content: flex-start;
    margin: var(--spacing-7-xl) 0;
  }
}

.contact-content .footer-logo {
  display: flex;
  align-items: flex-start;
}

.contact-content .footer-logo > :first-child {
  margin-right: var(--spacing-xs);
  height: var(--spacing-3-xl);
}

.contact-content .footer-logo > :last-child {
  height: var(--spacing-3-xl);
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .contact-content .footer-logo {
    flex-direction: column;
  }

  .contact-content .footer-logo > :first-child {
    margin-right: 0;
    margin: var(--spacing-7-xl) 0;
    height: var(--fontsize-body-mobile-3-xl);
  }

  .contact-content .footer-logo > :last-child {
    height: var(--fontsize-body-mobile-2-xl);
  }
}

.contact-content nav.footer-navigation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  gap: var(--spacing-xl);
  font-size: var(--fontsize-body-xl);
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .contact-content nav.footer-navigation {
    margin: 12vw 0;
    margin-left: -4vw;
  }
}

.contact-content nav.footer-navigation ul {
  width: 24vw;
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .contact-content nav.footer-navigation ul {
    width: 100%;
  }
}

.contact-content nav.footer-navigation ul > li {
  padding-inline-start: 1ch;
  font-size: var(--fontsize-body-l);
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .contact-content nav.footer-navigation ul > li {
    font-size: var(--fontsize-body-mobile-m);
  }
}

.contact-content nav.footer-navigation a,
.contact-content nav.footer-navigation a:visited {
  color: var(--colors-white);
  text-decoration: none;
  line-height: var(--lineheight-m);
}

.contact-content nav.footer-navigation a:hover {
  text-decoration: underline;
}

.back-to-top {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  height: 100%;
  font-size: var(--fontsize-body-xl);
  font-family: var(--font-heavy);
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .back-to-top {
    font-size: var(--fontsize-body-mobile-xl);
  }
}

.back-to-top a,
.back-to-top a:visited {
  color: var(--colors-white);
  text-decoration: none;
  line-height: var(--lineheight-xl);
}