@font-face {
    font-family: 'UnitOT';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/UnitOT/UnitOT.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'UnitOT';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/UnitOT/UnitOT-Medium.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'Bassy';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/bassy-brush-font/Bassy.ttf') format('truetype');
  }
  
  :root {
      --text-color: #4B5050;
      --primary-color: #6161FF;
      --grey-color: #EFEFEF;
      --secondary-color: #2C277B;
      --light-grey: #8C8C8C;
  
      --primary-font: 'UnitOT', Helvetica, Arial, sans-serif;
      --normal-text: clamp(16px, 1.25vw, 18px);
  
      /*--gap-width: 42px;*/
  }
  
  html {
      scroll-behavior: smooth;
  }
  
  body {
      font-family: var(--primary);
      font-size: var(--normal-text);
      color: var(--text-color);
      padding-top: 0;
  }
  
  a, span, li {
      font-family: var(--primary-font);
  }
  
  h2.big-hl {
      font-family: var(--primary-font);
      font-size: clamp(80px, 7vw, 120px);
      color: var(--text-color);
      font-weight: 500;
  }
  
  h2.big-hl .smaller-text {
      font-size: clamp(50px, 3vw, 40px);
  }
  
  h2 {
      font-family: var(--primary-font);
      font-size: clamp(30px, 2vw, 40px);
      color: var(--text-color);
      font-weight: 500;
      margin-bottom: 20px;
  }
  
  h2 .font-bassy {
      font-size: clamp(80px, 6vw, 110px);
      line-height: .6;
  }

  h2.big-hl .font-bassy {
    font-size: clamp(160px, 23vw, 220px);
    }
  
  h4 {
      font-family: var(--primary-font);
      font-size: clamp(20px, 2vw, 24px);
      color: var(--text-color);
      font-weight: 500;
      margin-bottom: 20px;
  }
  
  p {
      font-family: var(--primary-font);
      line-height: 1.3;
      font-size: var(--normal-text);
      color: var(--text-color);
      margin-bottom: 30px;
  }
  
  .sub-headline {
      font-size: 30px;
      font-weight: 500;
      margin-bottom: 30px;
  }
  
  .small-text {
      font-size: 16px;
      line-height: 1.1;
  }
  
  .big-text {
      font-size: 35px;
      font-weight: 500;
  }
  
  ul.big-list {
      margin-left: 70px;
  }
  
  ul.big-list > li {
      font-size: clamp(16px, 2.1vw, 23px);
  }
  
  ul.big-list > li + li {
      margin-top: 20px;
  }
  
  .top-logo {
      margin-bottom: clamp(5px, 4vw, 70px);
  }
  
  section + section,
  section + footer {
      margin-top: clamp(80px, 5vw, 100px);
  }
  
  section.grey-bg:first-of-type {
      padding-top: 25px;
      padding-bottom: 25px;
  }
  
  .content {
      width: 100%;
      max-width: 1320px;
      padding: 0 clamp(25px, 5vw, 100px);
      margin: auto;
      box-sizing: border-box;
  }
  
  .content.white-bg {
      padding-top: 40px;
      padding-bottom: 55px;
  }
  
  .blue-text {
      color: var(--primary-color);
  }
  
  .white-text {
      color: #fff;
  }
  
  .grey-color {
      color: var(--grey-color);
  }
  
  .font-bassy {
      font-family: 'Bassy', Helvetica, Arial, sans-serif;
      font-weight: 400;
  }
  
  .font-weight-500 {
      font-weight: 500;
  }
  
  .grey-bg {
      background-color: var(--grey-color);
  }
  
  .white-bg {
      background-color: #fff;
  }
  
  .headline-block-outer {
      margin-bottom: 60px;
      right: calc(-1 * clamp(2px, 6vw, 130px));
  }
  
  .headline-bg {
      background-color: var(--primary-color);
      clip-path: polygon(7% 0%, 100% 0%, 93% 100%, 0% 100%);
      display: inline-block;
      height: 100px;
      width: 355px;
  }
  
  .headline-absolute {
      position: absolute;
      /*top: 50%;*/
      top: 55px;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      margin-top: -37px;
  }
  
  .head-image {
      position: absolute;
      width: 100%;
      max-width: 620px;
      top: 50%;
      right: 30px;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
  }
  
  .button {
      border: 2px solid var(--primary-color);
      font-family: var(--normal-font);
      font-size: var(--normal-text);
      color: var(--primary-color);
      background-color: #fff;
      padding: 8px 21px;
      display: inline-block;
      cursor: pointer;
  }
  
  .small-arrow {
      width: 8px;
      height: 8px;
      border-bottom: 2px solid var(--primary-color);
      border-right: 2px solid var(--primary-color);
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      display: inline-block;
      vertical-align: 4px;
      margin-left: 8px;
  }
  
  .show-less-rooms > .small-arrow {
      transform: rotate(-135deg);
      -webkit-transform: rotate(-135deg);
      -moz-transform: rotate(-135deg);
      -ms-transform: rotate(-135deg);
      -o-transform: rotate(-135deg);
  }
  
  form > a > .button {
      border-color: var(--text-color);
      color: var(--text-color);
      margin-top: 20px;
  }
  
  ul > li::marker {
      font-size: 30px;
      color: var(--primary-color);
  }
  
  li + li {
      margin-top: 5px;
  }
  
  ul + a > .button {
      margin-top: 40px;
  }
  
  ul:not(.big-list) + a > .button {
      margin-bottom: 45px;
  }
  
  .fixed-object {
      position: fixed;
      bottom: 18px;
      right: 18px;
  }
  
  .bubble {
      background-color: var(--secondary-color);
      width: 115px;
      height: 115px;
      border-radius: 100%;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      -ms-border-radius: 100%;
      -o-border-radius: 100%;
      box-shadow: 2px 3px 3px #00000029;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      line-height: 1.1;
      gap: 12px;
  }
  
  .custom-card {
      padding-top: 15px;
  }
  
  .custom-card__border {
      background-image: url('../imgs/slider-box.svg');
      background-repeat: no-repeat;
      background-size: 100% 530px;
      min-height: 530px;
      padding: 0 28px;
      box-sizing: border-box;
  }
  
  .colored-circle {
      width: 100px;
      height: 100px;
      background-color: var(--secondary-color);
      border-radius: 100%;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      -ms-border-radius: 100%;
      -o-border-radius: 100%;
      margin: auto;
      top: -15px;
  }
  
  .colored-circle.facts {
      width: 80px;
      height: 80px;
      top: -32px;
      margin-bottom: -20px;
  }
  
  .colored-circle.facts > img {
      width: 65%;
  }
  
  .room-card {
      margin-bottom: 50px;
  }
  
  .room-card h4 {
      font-size: clamp(24px, 4vw, 30px);
      margin-top: 20px;
  }
  
  .room-card__image > img {
      aspect-ratio: 275 / 127;
      object-fit: cover;
      width: 100%;
  }
  
  .room-data {
      gap: 40px;
      color: var(--light-grey);
      margin-bottom: 30px;
  }
  
  .room-data > div {
      gap: 10px;
  }
  
  .room-icon {
      background-color: var(--text-color);
      width: 30px;
      height: 30px;
      border-radius: 100%;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      -ms-border-radius: 100%;
      -o-border-radius: 100%;
  }
  
  .object-pos-bottom > img {
      object-position: bottom;
  }
  
  .slider-controls {
      gap: 5px;
      margin-top: 0 !important;
      margin-bottom: 45px;
  }
  
  .slider-prev,
  .slider-next {
      border: 2px solid var(--primary-color);
      border-radius: 15px;
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
      -ms-border-radius: 15px;
      -o-border-radius: 15px;
  }
  
  .slider-prev > svg,
  .slider-next > svg {
      display: none;
  }
  
  .slider-next > img {
      transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -o-transform: rotate(180deg);
  }
  
  .data-box {
      background-image: url(../imgs/border-fakten.svg);
      background-repeat: no-repeat;
      background-size: 100% 210px;
      min-height: 210px;
      padding: 0 28px;
      margin-top: 130px;
  }
  
  .testi-slider-container {
      padding: 0 clamp(25px, 5vw, 100px);
  }
  
  .testi-slide {
      border: 2px solid var(--primary-color);
      padding: 2.5rem 2rem;
      position: relative;
      margin-top: 32px;
  }
  
  .testi-slide:after {
      content: "";
      position: absolute;
      top: -32px;
      right: 40px;
      background-image: url('../imgs/cites-blue.svg');
      width: 94px;
      height: 72px;
  }
  
  .testi-slide h4 {
      margin-bottom: 5px;
      text-transform: uppercase;
  }
  
  .uk-dotnav {
      align-items: center;
  }
  
  .uk-dotnav>* {
      padding-left: 3px;
  }
  
  .uk-dotnav>*>* {
      border: 2px solid var(--primary-color);
      width: 10px;
      height: 10px;
  }
  
  .uk-dotnav>.uk-active>* {
      background-color: var(--primary-color);
      width: 15px;
      height: 15px;
  }
  
  .uk-dotnav > li + li {
      margin-top: 0;
  }
  
  .legal-text {
      margin-top: 30px;
  }
  
  input {
      border: 1px solid var(--secondary-color);
      font-family: var(--normal-font);
      font-size: var(--normal-text);
      color: var(--text-color);
      font-weight: 500;
      padding: 13px 20px;
      width: 100%;
      box-sizing: border-box;
  }
  
  input::placeholder {
      color: var(--light-grey);
  }
  
  input[type="date"] {
      background-color: #fff;
  }
  
  input[type="date"]:before {
      content: attr(placeholder) !important;
  }
  
  input[type="date"]:focus:before {
      content: '' !important;
  }
  
  textarea {
      border: 1px solid var(--secondary-color);
      font-family: var(--normal-font);
      font-size: var(--normal-text);
      color: var(--text-color);
      font-weight: 500;
      padding: 13px 20px;
      margin: 30px 0;
      height: 150px;
      box-sizing: border-box;
      width: 100%;
  }
  
  textarea::placeholder {
      color: var(--light-grey);
  }
  
  select {
      border: 1px solid var(--secondary-color);
      background-color: #fff;
      font-family: var(--normal-font);
      font-size: var(--normal-text);
      color: var(--text-color);
      font-weight: 500;
      padding: 13px 20px;
      position: relative;
      width: 100%;
      height: 50px;
  }
  
  select:after {
      content: "";
      width: 14px;
      height: 14px;
      border-bottom: 2px solid var(--light-grey);
      background-color: red;
      position: absolute;
  }
  
  .bg-logo {
      background-image: url('../imgs/hml-logo-bg.svg');
      background-repeat: no-repeat;
      background-position: center right;
  }
  
  .footer {
      padding: clamp(50px, 5vw, 100px) 0;
  }
  
  
  .footer .footer-grid {
      gap: 40px;
  }
  
  .footer .socials-col {
      gap: 17px;
  }
  
  .footer .socials {
      gap: 10px;
  }
  
  .footer .socials-box {
      width: 30px;
  }
  
  @media (max-width: 1200px) {
      section.grey-bg:first-of-type {
          padding-top: 0;
          padding-bottom: 0;
      }
  
      .head-image {
          position: static;
          max-width: none;
          transform: none;
          -webkit-transform: none;
          -moz-transform: none;
          -ms-transform: none;
          -o-transform: none;
          margin-top: 60px;
      }
  
      .bg-logo {
          background-image: none;
      }
  
      .custom-card__border {
          background-image: url('../imgs/slider-box-broad.svg');
          background-size: 100% 402px;
          min-height: 402px;
          width: 350px;
          margin: auto;
      }
  
      .content.white-bg {
          padding-bottom: 0;
      }
  }
  
  @media (max-width: 960px) {
      .testi-slider {
          gap: 40px;
      }
  
      .room-card__image > img {
          aspect-ratio: 17 / 10;
      }
  
      .room-data {
          gap: 20px;
          margin-bottom: 20px !important;
      }
  }
  
  @media (max-width: 690px) {
      .headline-block-outer {
          right: -105px;
      }
  
      .headline-bg {
          height: 65px;
          width: 260px;
      }
  
      .headline-absolute {
          margin-top: -50px;
      }
  
      ul.big-list {
          margin-left: 0;
      }
  
      ul.big-list > li + li {
          margin-top: 5px;
      }
  
      .footer .footer-grid {
          flex-direction: column;
      }
  }
  
  @media (max-width: 400px) {
      .headline-block-outer {
          right: 0;
      }
  }