:root {
  --primary: #04453F;
  --secondary: #E76432;
  --accent-1: #36AEA5;
  --tertiary-decoration: #FAA5AE;
  --primary-background: #FDF9EE;
  --secondary-background: #EEF7F6;
  --primary-decoration: #4C696F;
  --secondary-decoration: #F17F3F;
  --accent-decoration: #77AAD9;
  --background-decoration: #F7E6B5;
  --black: #323232;
  --white: #FFFFFF;
  --link-animation: 0.5s cubic-bezier(0, 1, 1, 1);
  --button-animation: background-color 0.25s ease-out, transform 0.5s cubic-bezier(0, 1, 1, 1);
  --gap: 1.6rem;
  --nav-link-gap: 1.6rem;
  --card-shadow: 0 4px 16px 0 rgba(38, 55, 47, 0.1);
  --card-shadow-hover: 0 64px 64px 0 rgba(38, 55, 47, 0.2)
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Raleway', sans-serif;
  line-height: 1.7;
  font-size: 1rem;
}

html {
  scroll-behavior: smooth;
  font-size: 18px;
}

h1, h2, h3, h4, h5, h6, a {
  font-family: 'Lato', sans-serif;
  font-weight: normal;
  margin: 1rem 0;
}

h1, h2, h3 {
  line-height: 1.1;
  margin: 1rem 0;
}

h4, h5, h6 {
  line-height: 1.3;
  margin: 1rem 0;
}

h6 {
  font-size: 1.1rem;
}

h5 {
  font-size: 1.3rem;
}

h4 {
  font-size: 1.6rem;
}

h3 {
  font-size: 1.8rem;
}

h2 {
  font-size: 2rem;
}

h1 {
  font-size: 2.2rem;
}

ul {
  padding: 0;
  margin: 0;
}

a {
  color: var(--secondary);
  font-size: 1.2rem;
  transition: var(--link-animation);
}

a.link {
  position: relative;
  text-decoration: none;
  display: inline-block;
  margin: 0;
}

a.breadcrumb {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.8rem;
  font-family: 'Raleway';
  margin: 0;
  text-decoration: none;
  color: var(--accent-1);
  padding-left: 2.6rem;
}

a.breadcrumb::before {
  content: '';
  height: 2px;
  width: 2rem;
  background: var(--accent-1);
  position: absolute;
  left: 0;
  top: 0.6rem;
  transition: var(--link-animation);
}

a.breadcrumb::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6rem;
}

a.breadcrumb:hover {
  padding-left: 3rem;
  cursor: pointer;
  color: var(--primary);
}

a.breadcrumb:hover::before {
  width: 2.4rem;
  cursor: pointer;
  background-color: var(--primary);
}

a.link::before {
  content: '';
  width: 0;
  position: absolute;
  left: 0;
  bottom: 0px;
  height: 2px;
  background: var(--secondary);
  transition: var(--link-animation);
}

a.link:hover::before{
  width: 100%;
}

a.primary:hover {
  color: var(--accent-1);
}

p {
  margin: 0.6rem 0;
}

img, svg {
  max-width: 100%;
  display: block;
}

body {
  background: var(--primary-background);
}

body.tak,
body.tak .main-nav {
  background: var(--secondary-background);
}

footer {
  background-color: var(--white);
  padding-top: 3rem;
  gap: 2rem;
  font-variant-numeric: lining-nums;
}

footer address {
  font-style: normal;  
}

footer > article {
  padding: 0 10vw;
  margin: 8vw 0;
}

footer li {
  padding: 0;
}

.footer li::before {
  width: 0;
  height: 0;
}

footer a, 
footer p, 
footer h6, 
footer h5, 
footer h4 {
  font-family: 'Raleway', sans-serif;
}

footer a {
  text-decoration: none;
  color: var(--black);
  font-weight: 400;
  font-size: 1rem;
  display: block;
  position: relative;
  transition: var(--link-animation);
  width: max-content;
}

footer a::before {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  left: 0;
  bottom: 0px;
  background-color: var(--secondary);
  transition: var(--link-animation);
}

footer .social-icons a::before {
  display: none;
}

footer a:hover {
  color: var(--secondary);
}

footer a:hover::before {
  width: 100%;
}

footer a.direct-contact {
  margin: 0.6rem 0;
  font-variant-numeric: lining-nums;
}

footer article ul li,
footer article ul li a {
  margin: 0.6rem 0;
}

footer section {
  padding-top: 4vw;
  padding-bottom: 4vw;
}

article {
  margin: 12vw 0;
}

article > * {
  margin: 1rem 0;
}

address {
  line-height: 2rem;
  font-weight: normal;
}

address p {
  margin: 0.2rem 0;
}

address p:last-of-type {
  margin-bottom: 2rem;
}

/* Color classes */
.primary {
  color: var(--primary);
}

.secondary {
  color: var(--secondary)
}

.accent {
  color: var(--accent-1);
}

.lightblue {
  color: var(--accent-decoration);
}

.quote-column svg {
  max-width: 100%;
}

.sm-headline {
  text-transform: uppercase;
  position: relative;
}

.sm-headline hr {
  height: 2px;
  z-index: 1;
  background-color: var(--accent-1);
}

.sm-headline .sm-text {
  position: absolute;
  z-index: 10;
  color: var(--accent-1);
  background-color: var(--secondary-background);
  padding: 0 0.8rem 0.4rem 0;
  top: -1.2rem;
}

.secondary-bg {
  background-color: var(--secondary-background);
}

.active {
  color: var(--secondary);
}

.bold {
  font-weight: 700;
}

/* Section styling */
section.flex,
div.flex {
  gap: var(--gap);
}

div.flex.service-price {
  gap: 1rem;
}

div.service-price .btn {
  margin-top: 1rem;
}

section > div {
  margin: var(--gap) 0;
}

section.has-illustration > div {
  margin: 0;
}

section.md-flex-column > div {
  width: 100%;
}

section {
  padding: 10vw 4vw;
}

/* List styling */
ul {
  list-style: none;
}

ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  border-radius: 50%;
  background-color: var(--accent-1);
  display: inline-block;
  width: 8px;
  height: 8px;
}

li {
  color: var(--primary);
  padding-left: 1rem;
  position: relative;
  margin: 1rem 0;
}

.secondary-bg li:not(.accent) {
  color: var(--black);
}

/* Flex section */
.flex-space-between-centered {
  justify-content: space-between;
  align-items: center;
}

.flex {
  display: flex;
}

.main-nav {
  padding: 4vw;
  height: 68px;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background-color: var(--primary-background);
  z-index: 10000;
  transform: translateY(-68px);
  transition: var(--link-animation);
  box-shadow: 0px -32px 32px 32px rgba(0,0,0,.15);
}

.main-nav.sticky {
  transform: translateY(0);
}

.main-nav.top {
  box-shadow: none;
}

.main-nav > a {
  z-index: 1000;
}

.main-nav > ul {
  position: fixed;
  display: flex;
  flex-direction: column;
  background-color: var(--background-decoration);
  width: 100vw;  
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 100;
  list-style-type: none;
  transition: var(--link-animation);
  transform: translateX(100vw);
  gap: 5vh;
}

.main-nav.active > ul {
  transform: translateX(0);
}

.main-nav > ul > li {
  padding: 0;
  margin: 0;
}

.main-nav > ul > li > a {
  display: block;
  margin: 0;
  color: var(--primary);
  text-decoration: none;
  font-weight: 700;
  transition: var(--link-animation);
  opacity: 0;
  transform: translateY(-10vw);
  position: relative;
  font-size: 1.4rem;
}

.main-nav > ul > li > a.active {
  color: var(--secondary);
}

.main-nav > ul > li > a::before {
  content: '';
  width: 0;
  height: 2px;
  background: var(--primary);
  position: absolute;
  left: 0;
  bottom: -6px;
  transition: var(--link-animation);
}

.main-nav > ul > li > a:not(.active):hover::before {
  width: 100%;
}

.main-nav.active > ul > li:nth-child(5n+1) > a {
  transition-delay: 0.35s;
}

.main-nav.active > ul > li:nth-child(5n+2) > a {
  transition-delay: 0.45s;
}

.main-nav.active > ul > li:nth-child(5n+3) > a {
  transition-delay: 0.55s;
}

.main-nav.active > ul > li:nth-child(5n+4) > a {
  transition-delay: 0.65s;
}

.main-nav.active > ul > li:nth-child(5n) > a {
  transition-delay: 0.75s;
}

.main-nav.active > ul > li > a {
  transform: translateX(0);
  opacity: 1;
}

.main-nav > ul > li > a:hover {
  cursor: pointer;
}

ul.nav-list {
  pointer-events: all;
}

ul.nav-list li::before {
  width: 0;
  height: 0;
}

/* Burger menu icon */
.fa-bars {
  font-size: 1.5em;
  padding: 0.5rem 0 0.5rem 1rem;
  z-index: 1000;
}

.fa-bars:hover {
  cursor: pointer;
}

.logo {
  text-decoration: none;
  font-weight: 700;
  font-size: .9rem;
  font-family: 'Raleway', sans-serif;
  width: 5rem;
  line-height: 1;
}

.logo:hover svg * {
  fill: var(--secondary) !important;
  transition: var(--link-animation);
}


/* Button styling */
.btn {
  display: block;
  text-decoration: none;
  background-color: var(--secondary);
  color: var(--white);
  width: fit-content;
  padding: 0.5rem 2rem;
  border-radius: 10rem;
  margin: 4rem auto 1rem;
  transition: var(--button-animation);
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
}

.btn.primary {
  background-color: var(--primary);
}

.btn.primary:hover {
  background-color: var(--accent-1);
  color: var(--white);
}

.btn:hover {
  background: var(--primary-decoration);
  transform: scale(1.03);
  color: var(--white);
}

/* Element specific classes */
.header-section svg {
  margin: 0 auto;
  max-width: 90%;
}

.owner-picture {
  display: block;
  position: relative;
  margin: 2rem 0;
  width: 90%;
}

.owner-picture > img {
  position: absolute;
  top: 16%;
  left: 12%;
  width: 76%;
}

.owner-name, .owner-role {
  text-align: center;
  margin: 0.2rem 0;
}

.value img {
  max-width: 3rem;
}

.help-header {
  text-align: center;
}

.social-icons > li {
  margin: 0 1rem;
}

.copyright {
  text-align: center;
}

.help-section > div {
  text-align: center;
  position: relative;
}

section.flex.help-section {
  gap: 0;
}

.help-section .decoration {
  max-width: 25%;
  position: absolute;
  bottom: 18%;
}

.tak .help-section .decoration {
  bottom: unset;
  top: 10%;
}

.help-section .shapes_l {
  left: -1rem;
}

.help-section .shapes_r {
  right: -1rem;
}

.help-section .line_circle,
.help-section .double_line {
  display: none;
}


.header-section {
  text-align: center;
  margin-top: 68px;
}

.header-section.home {
  min-height: calc(100vh - 68px);
}

.header-section:not(.home) {
  text-align: left;
}

.header-section div {
  margin: 0;
}

.main-title br {
  display: none;
}

.owner-key-points {
  margin: 2rem 0;
}

.sm-text {
  font-size: 1rem;
}

.sm-text a {
  font-size: inherit;
}

.bold {
  font-weight: bold;
}

.uppercase {
  text-transform: uppercase;
}

.service .header-section {
  padding-top: 0;
}

.service .header-section h1 {
  margin-top: 0.6rem;
}

.services-offer {
  gap: 12px !important;
  justify-content: flex-start !important;
  margin: 2rem 0 !important;
}

.services-offer .text-container .sm-text {
  font-size: 0.8rem;
  margin: 0;
}

.services-offer svg {
  margin: 0;
}

.services-offer .warning-icon {
  max-width: 64px;
  margin: 0;
}

.service-link {
  background-color: var(--white);
  padding: 2rem 1.6rem;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 50;
  transition: var(--link-animation);
}

.service-link:hover {
  transform: translateY(-0.6rem);
  cursor: pointer;
  box-shadow: var(--card-shadow-hover);
}

.service-link:hover .link-container::before {
  width: 100%;
}

.service-link .link-container {
  margin-top: auto;
  display: flex;
  width: max-content;
  position: relative;
}

.service-link .link-container::before {
  content: '';
  background-color: var(--secondary);
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  transition: var(--link-animation);
}

.service-link a {
  white-space: nowrap;
  margin: 0;
}

.service-link .link-container svg {
  max-width: 1.2rem;
  min-width: 1.2rem;
  margin-left: 0.6rem;
}

.service-link > * {
  margin: 0;
}

.service-link .primary {
  margin: 0;
}

.service-link li {
  margin: 0.6rem 0;
}

.service-link .price * {
  margin: 0;
}

.service-link .cta {
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
}

.services-list {
  position: relative;
}

.top-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8vw;
  background-color: var(--primary-background);
  z-index: 1;
  margin: 0;
  display: none;
}

.read-more {
  margin: 0.4rem 0;
}

.about-viso .read-more-section {
  margin: 1.6rem 0;
}

.about-viso .read-more-section p {
  margin: 0.2rem 0;
}

.form-section {
  position: relative;
}

form {
  display: flex;
  flex-direction: column;
  z-index: 50;
  border-radius: 1rem;
}

form fieldset {
  border: none;
  outline: none;
  padding: 0;
  display: block;
}

.input-field {
  width: 100%;
  display: block;
  margin: 2rem 0;
  position: relative;
}

.input-field input,
.input-field textarea  {
  display: block;
  width: 100%;
  outline: none;
  border: none;
  padding: 2rem 0 0.8rem 0;
  border-bottom: 2px solid var(--primary-decoration);
  transition: var(--link-animation);
  /* background-color: var(--white); */
  background: transparent;
}

.input-field textarea {
  line-height: 1.4;
  padding-top: 0;
  margin-top: 4rem;
  resize: none;
}

input[type="submit"] {
  margin: 0 0 0 auto;
  outline: none;
  border: none;
}

input[type="submit"]:hover {
  cursor: pointer;
}

.input-field label {
  position: absolute;
  left: 0;
  bottom: 0.6rem;
  transition: var(--link-animation);
}

.input-field.focused input,
.input-field.focused textarea {
  border-color: var(--accent-1);
}

.input-field.focused label,
.input-field.not-empty label {
  bottom: 2.4rem;
  font-size: 0.88rem;
}

.input-field.textarea-field label {
  bottom: 8rem;
}

.input-field.textarea-field.focused label,
.input-field.textarea-field.not-empty label {
  bottom: 9.4rem;
  font-size: 0.88rem;
}

.input-field.focused label {
  color: var(--accent-1);
}

.input-field input::placeholder,
.input-field textarea::placeholder {
  visibility: hidden;
}

.input-field input:-webkit-autofill {
  background-color: transparent;
}

.input-field input:-webkit-autofill,
.input-field input:-webkit-autofill:hover, 
.input-field input:-webkit-autofill:focus, 
.input-field input:-webkit-autofill:active{
  -webkit-box-shadow: 0 0 0 10rem var(--white) inset !important;
  box-shadow: 0 0 0 10rem var(--white) inset !important;
}

section.md-flex-column > div.quote-column {
  margin-top: 6rem;
}

section.point-section {
  gap: 0;
}

section.point-section > * {
  margin: 0;
}

section.point-section ul:first-child li:last-child {
  margin-bottom: 0;
}

.lg-33-66 h3 br {
  display: none;
}

.about-service .about-service-text p {
  margin: 1rem 0;
}

.supervision-types .links a {
  display: block;
  text-decoration: none;
  color: var(--black);
  margin: 0.6rem 0;
  font-family: 'Raleway', sans-serif;
}

.supervision-types article:first-child {
  margin-top: 0;
}

.supervision-types article {
  margin: calc(var(--gap) * 2) 0;
}

ol, ol li {
  margin: 0;
  padding: 0;
}

.timeline-container {
  padding: 1rem 0;
  position: relative;
}

.timeline-bar {
  height: 100%;
  width: 2px;
  position: absolute;
  left: 0.5rem;
  top: 0;
  background: var(--accent-1);
}

.timeline-items {
  margin: 1rem 0;
}

.timeline-item {
  gap: calc(var(--gap) * 2);
  margin: 2rem 0;
}

.timeline-item > * {
  flex: 1;
}

.timeline-item .bullet {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  max-width: 1.2rem;
  background: var(--accent-1);
  border-radius: 50%;
  transform: translateY(2.6rem);
  box-shadow: 0 0 0 1rem var(--secondary-background);
}

.timeline-item .text-box {
  flex-grow: 6;
  background: var(--white);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: -0.5rem 0.5rem 0px 0px var(--accent-1);
  position: relative;
}

.timeline-item .text-box::before,
.timeline-item .text-box::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-top: 1.4rem solid transparent;
  border-bottom: 1.4rem solid transparent;
  border-right: 2rem solid var(--white);
}

.timeline-item .text-box::before {
  border-right: 2rem solid var(--white);
  left: -1.6rem;
  top: 1.4rem;
  z-index: 10;
}

.timeline-item .text-box::after{
  left: -2rem;
  top: 1.8rem;
  border-right: 2rem solid var(--accent-1);
  z-index: 1;
}

.timeline-item .text-box h5 {
  margin-top: 0;
}

.timeline-item .text-box p {
  margin-bottom: 0;
}

.carousel-item .card-text {
  margin: 1.6rem 0;
  color: var(--black);
}

.carousel-item .card-title {
  font-size: 1.3rem;
}

.carousel-item .person > * {
  margin: 0rem;
}

.carousel-item .person .person-position {
  font-style: italic;
}

.carousel-item .person .person-position,
.carousel-item .person .person-workplace {
  color: var(--black);
}

.carousel-control-next, .carousel-control-prev {
  width: max-content;
}

.carousel-indicators {
  margin-bottom: 0;
  margin-top: 0;
  bottom: -4rem;
}

.carousel-indicators [data-bs-target] {
  width: 12px;
  height: 12px;
  margin: 0.3rem;
  border-radius: 50%;
}

.carousel-dark .carousel-indicators [data-bs-target] {
  background-color: var(--accent-1);
}

body.tak .help-section {
  margin-top: 4rem;
}

body.tak .help-section svg:not(.decoration) {
  max-width: 60%;
  margin: 0 auto;
}

body.tak .help-section.text p,
body.tak .help-section.text h1 {
  margin: 0.2rem auto;
}

.header-section .direct-contact {
  margin-top: 2rem;
}

.header-section .direct-contact a {
  color: var(--black);
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .sm-flex-column {
    flex-direction: column;
  }
  
  .sm-flex-row {
    flex-direction: row;
  }

  .sm-flex-column-r {
    flex-direction: column-reverse;
  }
  
  .sm-flex-row-r {
    flex-direction: row-reverse;
  }

  .sm-flex-align-center {
    justify-content: center;
    align-items: center;
  }

  .sm-flex-align-center-v {
    align-items: center;
  }

  .sm-flex-align-center-h {
    justify-content: center;
  }

  .sm-no-gap {
    gap: 0 !important;
  }

  .carousel-control-next {
    right: 0;
  }

  .carousel-control-prev {
    left: 0;
  }

  .carousel-control-prev,
  .carousel-control-next {
    height: max-content;
    bottom: -6rem;
    top: unset;
  }

  .carousel-indicators {
    bottom: -6rem;
  }

  section.reference-section {
    padding: 10vw 4vw 20vh;
  }

  .header-section div .md-flex-row ul:last-child li {
    margin-top: 0;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .header-section:not(.home) svg {
    max-width: 80%;
    margin: 0 auto;
  }
  
  .md-flex-column {
    flex-direction: column;
  }
  
  .md-flex-row {
    flex-direction: row;
  }

  .md-flex-column-r {
    flex-direction: column-reverse;
  }
  
  .md-flex-row-r {
    flex-direction: row-reverse;
  }

  .md-flex-align-center {
    justify-content: center;
    align-items: center;
  }

  .md-flex-align-center-v {
    align-items: center;
  }

  .md-flex-align-center-h {
    justify-content: center;
  }

  .md-no-gap {
    gap: 0 !important;
  }

  section.reference-section {
    padding: 10vw 4vw 20vh;
  }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .main-nav > ul > li > a {
    font-size: 1.5rem;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .lg-flex-column {
    flex-direction: column;
  }
  
  .lg-flex-row {
    flex-direction: row;
  }

  .lg-flex-column-r {
    flex-direction: column-reverse;
  }
  
  .lg-flex-row-r {
    flex-direction: row-reverse;
  }

  .lg-flex-align-center {
    justify-content: center;
    align-items: center;
  }

  .lg-flex-align-center-v {
    align-items: center;
  }

  .lg-flex-align-center-h {
    justify-content: center;
  }

  .main-nav > ul > li > a {
    font-size: 1.5rem;
  }

  .lg-no-gap {
    gap: 0 !important;
  }
}

@media screen and (max-width: 1279px) {
  .services-offer .warning-icon {
    display: none;
  }
  
  .services-offer p {
    display: inline;
  }
}

@media screen and (min-width: 1280px) {
  .xlg-flex-column {
    flex-direction: column;
  }
  
  .xlg-flex-row {
    flex-direction: row;
  }

  .xlg-flex-column-r {
    flex-direction: column-reverse;
  }
  
  .xlg-flex-row-r {
    flex-direction: row-reverse;
  }

  .xlg-flex-align-center {
    justify-content: center;
    align-items: center;
  }

  .xlg-flex-align-center-v {
    align-items: center;
  }

  .xlg-flex-align-center-h {
    justify-content: center;
  }

  .xlg-no-gap {
    gap: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: 20px;
  }

  a {
    font-size: 1.1rem;
  }

  .sm-text {
    font-size: 0.9rem;
  }

  section {
    padding: 5vw 8vw;
  }

  article {
    margin: var(--gap) 0;
  }

  footer > article, footer > section {
    padding: 0 5vw;
    margin: 3vw 0;
  }

  .value-container {
    display: flex;
    gap: var(--gap);
  }

  .values-section .value-container article {
    flex: 1;
  }

  .value img {
    max-width: max-content;
  }

  .footer-nav {
    display: flex;
    justify-content: center;
  }

  .services {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
  }

  .services > article {
    margin: 0;
    width: calc(50% - var(--gap) / 2);
  }
  
  .footer-nav > article {
    margin: 0 4vw;
    flex: 1;
  }

  .footer-nav > article:first-child {
    margin-left: 0;
  }

  .footer-nav > article:last-child {
    margin-right: 0;
  }

  .header-section svg {
    max-width: 68%;
  }

  .owner-picture {
    max-width: 70%;
  }

  .main-title br {
    display: inline-block;
  }

  .help-header br {
    display: none;
  }

  .help-section .decoration {
    max-width: 20%;
  }
  
  .help-section .shapes_l {
    left: -2vw;
  }
  
  .help-section .shapes_r {
    right: -2vw;
  }

  .service-link ul {
    min-height: 16rem;
  }

  .service-link.temadage ul {
    min-height: initial;
  }

  .service-link > .primary {
    font-size: 1.5rem;
  }

  .services-list {
    flex-wrap: wrap;
    gap: var(--gap);
  }

  .services-list .service-link {
    margin: 0;
    width: calc(50% - var(--gap) / 2);
  }

  section.has-illustration > div > svg {
    max-width: 70%;
    margin: 0 auto;
  }

  .two-columns.lg-33-66 > *:last-child {
    flex-grow: 2;
  }

  .about-viso .read-more-section {
    margin: 1rem 0;
  }

  .carousel-item {
    padding: 0 10vw;
  }

  .header-section div .md-flex-row ul {
    width: calc(50% - var(--gap) / 2);
  }
}

@media screen and (min-width: 1024px) {
  body.no-overflow {
    overflow: hidden;
  }

  body.tak .help-section {
    margin-top: 0rem;
  }

  body.tak .help-section svg:not(.decoration) {
    max-width: 50%;
    margin: 0 auto 2rem;
  }

  .main-nav > ul {
    position: relative;
    width: auto;
    height: initial;
    flex-direction: row;
    transform: translate(0);
    transition: none;
    background: transparent;
    gap: 3vw;
  }

  .main-nav > ul > li > a {
    transform: translate(0);
    opacity: 1;
    font-size: 1rem;
  }

  section {
    padding: 8vw 5vw;
  }

  form {
    background-color: var(--white);
    box-shadow: var(--card-shadow);
    transform: translateY(-6rem);
  }

  form fieldset {
    padding: 2rem;
  }

  form fieldset legend {
    transform: translateY(4rem);
  }

  .input-field input,
  .input-field textarea  {
    background-color: var(--white);
  }

  section.lg-flex-row > div.quote-column > * {
    margin-left: 2rem;
  }

  .header-section {
    flex-direction: row-reverse;
    gap: var(--gap);
    align-items: center;
    min-height: calc(50vh - 80px);
    margin-top: 80px;
    text-align: left;
  }

  .header-section.home {
    min-height: calc(100vh - 80px);
  }

  .about-header {
    flex-direction: row;
    gap: 3rem;
    align-items: center;
  }

  .owner-container {
    margin: 0;
  }

  .two-columns > * {
    flex: 1;  
  }

  .btn {
    padding: 0.5rem 2rem;
    margin: 2rem 0;
  }

  .services {
    gap: var(--gap);
  }
  
  .services li {
    font-size: 0.9rem;
  }

  .help-section > div {
    width: 80%;
    margin: 0 auto;
  }

  .help-section > div > * {
    width: 80%;
    margin: 0 auto;
  }

  .help-section > div > .btn {
    margin: var(--gap) auto;
    width: fit-content;
  }

  .services > article {
    margin: 0;
    width: calc(50% - var(--gap) / 2);
  }

  .services article h5 {
    margin-top: 0;
  }

  .main-nav {
    padding: 0 5vw;
    min-height: 80px;
    transform: translateY(-80px);
  }

  .header-section svg {
    max-width: 100%;
  }

  .owner-picture {
    max-width: 85%;
  }

  .owner-container .btn {
    margin-bottom: 0;
  }

  #menu-icon {
    display: none;
  }

  .main-title br {
    display: none;
  }

  .values-section .primary {
    text-align: center;
    margin: 2rem 0;
  }

  address p:first-child {
    margin-top: 0;
  }

  footer article nav li:first-child,
  footer article nav li:first-child a {
    margin-top: 0;
  }

  .footer-nav > article.contact {
    flex-grow: 2;
  }

  .help-section > div > .btn {
    margin-bottom: 8rem;
  }

  .help-section .decoration {
    bottom: 35%;
  }

  .help-section .shapes_l {
    left: -8vw;
  }
  
  .help-section .shapes_r {
    right: -8vw;
  }
  
  .help-section .line_circle,
  .help-section .double_line {
    display: block;
  }

  .help-section .line_circle {
    bottom: 10%;
    left: -7vw;
  }

  .help-section .double_line {
    bottom: 10%;
    right: -7vw;
  }

  .tak .help-section .line_circle,
  .tak .help-section .double_line {
    bottom: unset;
    top: 28%;
  }

  .service .header-section {
    padding: 2rem 5vw;
  }

  .service .header-section svg {
    max-width: 100%;
  }

  .service .header-section > div:last-child {
    flex-grow: 2;
  }

  .services-offer {
    display: flex;
  }

  .services-offer .warning-icon {
    width: 10%;
  }

  .services-list {
    padding-top: 4vw;
  }

  section.has-illustration > div > svg {
    margin: 0 auto;
    max-width: 100%;
  }

  .baggrund-help {
    padding-left: 0;
    padding-right: 0;
  }

  .baggrund-help p {
    max-width: 80%;
    margin: 0 auto;
  }

  section.lg-flex-row > div.quote-column {
    margin-top: 6.8rem;
  }

  .quote-column h3 {
    margin-top: 2rem;
  }

  .top-mask {
    display: block;
  }
  
  section.point-section {
    gap: var(--gap);
  }

  .timeline-bar {
    left: 50%;
  }

  .timeline-item {
    width: 50%;
  }

  .timeline-item:nth-child(2n+1) .bullet {
    transform: translateX(0.65rem) translateY(2.6rem);
  }

  .timeline-item:nth-child(2n) .bullet {
    transform: translateX(-0.55rem) translateY(2.6rem);
  }

  .timeline-item:nth-child(2n+1) .text-box {
    box-shadow: 0.5rem 0.5rem 0px 0px var(--accent-1);
  }

  .timeline-item:nth-child(2n+1) .text-box::before, 
  .timeline-item:nth-child(2n+1) .text-box::after {
    border-top: 1.4rem solid transparent;
    border-bottom: 1.4rem solid transparent;
    border-right: 1.4rem solid transparent;
    border-left: 2rem solid var(--white);
  }

  .timeline-item:nth-child(2n+1) .text-box::before {
    left: unset;
    right: -3.2rem;
  }

  .timeline-item:nth-child(2n+1) .text-box::after {
    border-left: 2rem solid var(--accent-1);
    left: unset;
    right: -3.6rem;
  }

  .timeline-item:nth-child(2n) {
    margin: 0 0 0 auto;
  }
  
  .timeline-container {
    margin: 4rem 0;
  }

  .timeline h3 br {
    display: none;
  }

  .timeline > h3,
  .timeline > p  {
    width: 80%;
    margin: 0 auto;
    text-align: center;
  }
}

@media screen and (min-width: 1280px) {
  html {
    font-size: 20px;
  }

  form fieldset {
    padding: 3rem;
  }

  .timeline > h3,
  .timeline > p  {
    width: 60%;
  }

  section.lg-flex-row > div.quote-column > * {
    margin-left: 4rem;
  }

  .main-title br {
    display: inline-block;
  }

  section {
    padding: 8vw 5vw;
  }

  section.lg-flex-row > div {
    margin: 0;
  }

  .header-section {
    padding: 0 5vw;
  }

  .header-section svg,
  section.has-illustration > div > svg {
    max-width: 90%;
    margin: 0 auto;
  }

  section.has-illustration.about-service > div > svg {
    max-width: 100%;
  }

  .owner-picture {
    max-width: 70%;
    margin-top: 0;
  }

  .help-section > div {
    width: 65%;
  }

  .services-section {
    gap: var(--gap);
  }

  .services-section .services-title {
    width: 25%;
    position: sticky;
    top: 10vw;
    height: 28vh;
  }

  .services-section .services-title .secondary {
    margin-top: 0;
  }

  .services-section .services {
    width: 75%;
  }

  .services-section .services article h5 {
    margin-top: 0;
  }

  .copyright {
    text-align: left;
  }

  .social-icons > li {
    margin: 0 .4rem;
  }

  .social-icons > li:first-child {
    margin-left: 0;
  }

  .footer-nav {
    padding: 0;
  }

  footer {
    padding: 5vw;
  }

  .footer-nav article h6 {
    margin-top: 0;
  }

  .footer-nav > article {
    margin: 0;
  }

  footer .copyright {
    padding: 0;
  }

  footer .copyright p:first-of-type {
    margin-top: 0;
  }

  footer > section:first-child {
    width: 40%;
  }

  footer > section:last-child {
    width: 60%;
    gap: var(--gap);
  }

  .help-section .shapes_l {
    left: -16vw;
  }
  
  .help-section .shapes_r {
    right: -16vw;
  }

  .help-section .line_circle,
  .help-section .double_line {
    bottom: 12%;
  }

  .services-list .service-link {
    width: calc((100% / 3) - var(--gap) + (var(--gap) / 3));
  }

  .service-link ul,
  .service-link.temadage ul {
    min-height: 14rem;
  }

  .supervision-types .links {
    position: sticky;
    top: 10vw;
    height: 68vh;
  }

  section.point-section.spaced-point-section {
    gap: calc(var(--gap) * 4);
  }

  svg.contract-illustration {
    max-width: 70% !important;
  }
}

@media screen and (min-width: 1366px) {
  :root {
    --gap: 2rem;
  }

  html {
    font-size: 20px;
  }

  a {
    font-size: 1rem;
  }

  .main-nav > ul > li > a {
    font-size: 0.9rem;
  }

  .main-nav > ul {
    gap: var(--nav-link-gap);
  }

  .baggrund-help p {
    max-width: 70%;
  }

  .supervision-types .links {
    height: 65vh;
  }

  .timeline-item {
    gap: calc(var(--gap) * 2.5);
  }
}

@media screen and (min-width: 1440px) {
  html {
    font-size: 21px;
  }
  
  h3 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 2.2rem;
  }
  
  h1 {
    font-size: 2.4rem;
  }

  .header-section svg,
  section.has-illustration > div > svg {
    max-width: 80%;
    margin: 0 auto;
  }

  section.has-illustration.about-service > div > svg {
    max-width: 100%;
  }

  .service-link ul, .service-link.temadage ul {
    min-height: 15rem;
  }

  .supervision-types .links {
    height: 58vh;
  }

  .timeline-item {
    gap: calc(var(--gap) * 3);
  }

  .reference-section {
    padding: 8vw 10vw;
  }
}

@media screen and (min-width: 1536px) {
  html {
    font-size: 22px;
  }

  .services-section .services-title {
    top: 10vw;
    height: 32vh;
  }

  .help-section > div {
    max-width: 60%;
  }

  .supervision-types .links {
    height: 64vh;
  }

  section.has-illustration.service-price > div > svg {
    max-width: 70%;
  }

  .reference-section {
    padding: 8vw 12vw;
  }
}

@media screen and (min-width: 1800px) {
  html {
    font-size: 24px;
  }

  h3 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 2.3rem;
  }
  
  h1 {
    font-size: 2.8rem;
  }

  .header-section svg,
  section.has-illustration > div > svg {
    max-width: 76%;
    margin: 0 auto;
  }

  section.has-illustration.about-service > div > svg {
    max-width: 100%;
  }

  .owner-picture {
    max-width: 60%;
  }

  section.has-illustration.service-price > div > svg {
    max-width: 70%;
  }

  .help-section .decoration {
    max-width: 18%;
  }

  .main-nav > ul > li > a {
    font-size: 0.8rem;
  }

  .lg-33-66 h3 br {
    display: block;
  }

  .supervision-types .links {
    height: 56vh;
  }

  svg.contract-illustration {
    max-width: 65% !important;
  }
}