/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
}
/*
  3. Allow percentage-based heights in the application
*/
html,
body {
  height: 100%;
  min-height: 100%;
}
/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
/*
  7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
  font: inherit;
}
/*
  8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
/*
  9. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

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

:root {
  --h1-font-size: clamp(2px, 10px + 3vw, 40px);
  --h2-font-size: clamp(2.2em, 1.9em + 0.75vw, 2.8em);
  --h3-font-size: calc(var(--h2-font-size) / 1.2);
  --p-font-size_tmp: clamp(1.6em, 1.5em + 0.25vw, 1.8em);
  --p-font-size: calc(var(--p-font-size_tmp) / 1.2);

  --size_2x4: clamp(2px, 1px + 4vw, 4px);
  --siza_2x3: clamp(3px, 2.4px + 2vw, 4px);

  --s_16_32: clamp(16px, 8px + 2vw, 32px);
  --s_24_32: clamp(24px, 20px + 1vw, 32px);

  --cta-font-size: 5em;

  /**/
  --color-main: 39, 171, 177;
  --color-main2: #6a8b9b;
  --color-main3: #99bfc6;
  --color-sub: #94c83f;
  --color-sub-hover: #d7b06d;
  --font-header: 'Orson', sans-serif;
  --font-body: 'Gadugi', sans-serif;

  --h1-margin-bottom: clamp(32px, 24px + 2vw, 48px);
  --h2-margin-bottom: 24px;
  --h3-margin: 48px;

  --section-padding: clamp(4.8em, 4em + 2vw, 6.4em);
  --ul-text-small-font-size: 1.6em;
}

@font-face {
  font-family: 'Gadugi';
  src: url('fonts/gadugi.ttf') format('truetype');
  font-style: normal;
}

@font-face {
  font-family: 'Gadugi';
  src: url('fonts/gadugi_bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Orson';
  src: url('fonts/sf_orson_casual_heavy.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Orson';
  src: url('fonts/sf_orson_casual_medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Orson';
  src: url('fonts/sf_orson_casual_light.ttf') format('truetype');
  font-weight: lighter;
  font-style: normal;
}

@font-face {
  font-family: 'Orson';
  src: url('fonts/sf_orson_casual_heavy_oblique.ttf') format('truetype');
  font-weight: bold;
  font-style: oblique;
}

@font-face {
  font-family: 'Orson';
  src: url('fonts/sf_orson_casual_medium_oblique.ttf') format('truetype');
  font-weight: normal;
  font-style: oblique;
}

@font-face {
  font-family: 'Orson';
  src: url('fonts/sf_orson_casual_light_oblique.ttf') format('truetype');
  font-weight: lighter;
  font-style: oblique;
}

html {
  scroll-behavior: smooth;
  scroll-padding: calc(var(--s_16_32) * 1);
}

body {
  background-color: #ebedee;
  color: #5b5b5b;
  font-size: 62.5%;
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1;
  height: auto;
}

.vertical-lines-container {
  min-height: 100vh;
  position: relative;
  z-index: 10;

  > div {
    bottom: 0;
    content: '';
    position: absolute;
    width: 1px;
  }
}

.about_page {
  background-image: url('images/about_bg.svg'); /* Replace with the path to your background image */
  background-size: auto calc(100% - 20vh); /* Height 100% of the container, width auto */
  background-position: 100% 20vh; /* Shift the image to the right by 50% */
  background-repeat: no-repeat; /* Prevent the background image from repeating */
}

.contact_page {
  background-image: url('images/contact_bg.svg'); /* Replace with the path to your background image */
  background-size: auto 100%; /* Height 100% of the container, width auto */
  background-position: 100% 0; /* Shift the image to the right by 50% */
  background-repeat: no-repeat; /* Prevent the background image from repeating */
}

.vertical-lines-container .first-line {
  animation: lineGrow1 20s ease-out forwards;
  background-color: rgba(var(--color-main), 0.5);
  height: calc(100% - 50vh);
  left: 5%;
  top: 50vh;
  top: 50vh;

  &::before {
    background-color: rgba(var(--color-main), 1);
    border-radius: 50%;
    content: '';
    height: 12px;
    left: calc(8% - 6px);
    position: absolute;
    top: 0;
    width: 12px;
    z-index: 2;
  }
}

.vertical-lines-container .first-line-other {
  animation: lineGrow1o 20s ease-out forwards;
  background-color: rgba(var(--color-main), 0.5);
  height: calc(100% - 25vh);
  left: 5%;
  top: 0vh;
}

.vertical-lines-container .second-line {
  background-color: rgba(255, 255, 255, 1);
  left: 26%;
  top: 0;
}

.vertical-lines-container .third-line {
  animation: lineGrow3 10s ease-out forwards;
  background-color: rgba(0, 0, 0, 0.1);
  height: 100vh;
  right: 5%;
  top: 0;
}

@keyframes lineGrow1 {
  0% {
    height: 0;
  }
  100% {
    height: calc(100% - 50vh);
  }
}

@keyframes lineGrow1o {
  0% {
    height: 0;
  }
  100% {
    height: calc(100% - 75vh);
  }
}

@keyframes lineGrow3 {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-header);
}

header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  display: flex;
  height: 90px;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  width: min(85%, 1600px);

  @media screen and (max-width: 900px) {
    justify-content: flex-end;
  }

  @media screen and (max-width: 700px) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: block;
    height: 80px;
    overflow: hidden;
    padding-inline: 7.5vw;
    transition: all 0.5s;
    width: 100%;

    &.show {
      height: 250px;
    }
  }

  > div {
  }

  #logo {
    aspect-ratio: 1215 / 421;
    display: block;
    left: 0;
    position: absolute;
    top: 15px;
    width: 173px;

    @media screen and (max-width: 700px) {
      height: 60px;
      margin-top: 10px;
      position: static;
    }
  }

  #ham {
    background: rgba(var(--color-main), 1);
    border-bottom: 1px solid #fff;
    display: none;
    height: 45px;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 45px;

    @media screen and (max-width: 700px) {
      display: block;
    }

    .burger-container {
      cursor: pointer;
      display: inline-block;
      height: 45px;
      position: absolute;
      transform: rotate(0deg);
      transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
      width: 45px;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      z-index: 1000;

      #burger {
        display: block;
        height: 8px;
        margin: -4px auto 0;
        position: relative;
        top: 50%;
        width: 18px;
      }

      &.open {
        transform: rotate(90deg);

        #burger .bar {
          background: #fff;
          transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
          transition-delay: 0.2s;

          &.topBar {
            transform: translateY(4px) rotate(45deg);
          }

          &.btmBar {
            transform: translateY(3px) rotate(-45deg);
          }
        }
      }
    }

    .bar {
      background: #fff;
      display: block;
      height: 1px;
      position: relative;
      transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
      transition-delay: 0s;
      width: 100%;

      &.topBar {
        transform: translateY(0px) rotate(0deg);
      }

      &.btmBar {
        transform: translateY(6px) rotate(0deg);
      }
    }
  }

  nav {
    align-items: flex-end;
    display: flex;
    font-family: var(--font-header);
    font-size: calc(var(--p-font-size) * 1.33);
    font-weight: bold;

    ul {
      display: flex;

      li {
        display: flex;
      }

      a {
        color: #000;
        display: flex;
        padding: 8px 12px;
        text-decoration: none;
        text-transform: uppercase;
        transition: all 0.5s ease-in-out;

        background: linear-gradient(to top, rgba(var(--color-main), 1), transparent) no-repeat;
        background-size: 100% 5px; /* Width 100%, Height 5px */
        background-position: bottom; /* Position at the bottom */

        &:hover {
          background-color: #aaa;
        }

        &.current {
          background-color: rgba(var(--color-main), 1);
          color: #fff;
        }
      }
    }

    @media screen and (max-width: 700px) {
      flex: 0 0 100%;
      flex-wrap: wrap;

      ul {
        flex: 0 0 100%;
        flex-wrap: wrap;
        margin-top: 16px;

        li {
          display: flex;
          flex: 0 0 100%;

          a {
            flex: 0 0 100%;
          }
        }
      }
    }
  }

  .circle {
    background-color: rgba(var(--color-main), 1);
    border-radius: 50%;
    bottom: -6px;
    height: 12px;
    position: absolute;
    right: -6px;
    width: 12px;

    @media screen and (max-width: 700px) {
      display: none;
    }
  }
}

main {
  &.index {
    background-image: url('images/index_bg2.svg');
    background-size: 50% 50%;
    background-position: 100% bottom;
    background-repeat: no-repeat;
  }

  &.text {
    > div {
      margin: 0 auto;
      padding: calc(var(--s_16_32) * 3) 0;
      width: min(85%, 720px);

      h1 {
        font-size: calc(var(--h1-font-size) * 1.6);
        font-family: var(--font-body);
        margin: 0 0 calc(var(--s_16_32) * 2);
        text-align: center;
      }

      h2 {
        color: rgba(var(--color-main), 1);
        font-size: calc(var(--h2-font-size) * 1.3);
        margin: calc(var(--s_16_32) * 1.5) auto;
        text-align: center;
        text-wrap: balance;
      }

      p {
        font-size: calc(var(--p-font-size));
        line-height: 150%;
        text-align: justify;
      }
    }
  }
}

#hero {
  background-image: url('images/hero_blocks.svg');
  background-size: 100% auto; /* Width 100%, height auto */
  background-position: bottom; /* Position at the bottom */
  background-repeat: no-repeat; /* Prevent repeating */
  display: flex;
  height: calc(100vh - 90px);
  max-height: calc(1080px - 120px);

  > div {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 85%;

    h1.headline {
      font-family: var(--font-header);
      font-size: calc(var(--h1-font-size) * 2);
      font-weight: bold;
      line-height: 120%;
      margin: auto;
      padding: 0 10vw 0 15vw;
      text-align: right;

      span {
        opacity: 0.1;
        transform: translateY(10px);
        animation: fadeUp 0.2s ease forwards;

        &.stlye {
          color: rgba(var(--color-main), 1);
          font-style: oblique;
          -webkit-text-stroke: 2px rgba(0, 0, 0, 0.5);
        }
      }

      @media screen and (max-width: 900px) {
        padding: 0 0;
      }
    }

    div.cta {
      font-size: calc(var(--p-font-size) * 1.5);
      font-weight: 400;
      margin: 0 auto calc(var(--s_16_32) * 1.5);
      width: 80%;

      a {
        background-color: rgba(var(--color-main), 1);
        color: #fff;
        display: inline-block;
        font-size: 0.9em;
        font-weight: 500;
        margin-top: 32px;
        padding: calc(var(--s_24_32) * 0.75) calc(var(--s_24_32) * 1);
        text-decoration: none;
        text-transform: uppercase;
        transition: all 0.25s ease-in-out;

        &:hover {
          background-color: #5b5b5b;
        }

        &:active {
          transform: scale(0.9);
        }
      }
    }
  }
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#about {
  padding-top: calc(var(--s_16_32) * 4);

  > div {
    background-color: #ebedee;
    background-color: transparent;
    position: relative;
    z-index: 20;
  }

  > div:not(.values) {
    align-items: center;
    display: flex;
    gap: 32px;
    height: min(50vh, 600px);
    margin-top: 64px;
    padding-right: max(calc((100% - 1200px) / 2), 7.5vw);

    div.img {
      flex: 0 0 50%;
      height: 100%;
      overflow: hidden;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 100%;
        background: linear-gradient(to left, rgba(235, 237, 238, 1) 5%, rgba(235, 237, 238, 0) 30%);
        z-index: 1;
        pointer-events: none;
      }

      img {
        display: block;
        height: 100%;
        object-fit: cover;
        position: relative;
        width: 100%;
        z-index: 0; /* Ensure the image is below the gradient */
      }
    }

    div.desc {
      border-left: 4px solid rgba(var(--color-main), 1);
      padding-left: max(calc((100% - 1200px) / 2), 7.5vw);
      padding-left: 32px;
      max-width: 620px;
      h2 {
        color: rgba(var(--color-main), 1);
        font-size: calc(var(--h2-font-size) * 1.1);
        font-style: oblique;
        margin-bottom: calc(var(--s_16_32) * 1);
      }

      p {
        font-size: var(--p-font-size);
        line-height: 150%;
        text-align: justify;

        & + p {
          margin-top: 16px;
        }
      }
    }

    @media screen and (max-width: 900px) {
      flex-wrap: wrap;
      height: auto;

      div.img {
        flex: 0 0 100%;
      }

      div.desc {
        border-left: 0;
      }
    }
  }

  div.values {
    align-items: center;
    color: rgba(0, 0, 0, 0.1);
    display: flex;
    font-size: calc(var(--h1-font-size) * 2.5);
    font-weight: 600;
    justify-content: center;
    margin: 0 auto;
    overflow: hidden;
    padding: calc(var(--s_16_32) * 2) 0;
    position: relative;
    width: min(85%, 1200px);
    width: 100%;
    white-space: nowrap;

    > div {
      animation: scroll linear infinite;
      display: flex;
      gap: calc(var(--s_16_32) * 4);
      white-space: nowrap;

      > span {
        background-color: #ebedee;
      }
    }
  }
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/**/

.fade-in {
  opacity: 0;
  transition: opacity 3s 2s ease-out, transform 3s 2s ease-out;
}

.fade-in.visible {
  opacity: 1;
}

/**/

#services {
  background-color: rgba(var(--color-main), 1);
  background-image: url('images/index_services.svg');
  background-size: 100% auto; /* Width 100%, height auto */
  background-position: right 100%; /* Position at the bottom */
  background-repeat: no-repeat; /* Prevent repeating */
  background: rgba(var(--color-main), 1);
  padding: calc(var(--s_16_32) * 3) 0;
  position: relative;
  z-index: 20;

  > div {
    margin: 0 auto;
    width: min(85%, 1140px);
  }

  div.headline {
    margin-bottom: calc(var(--s_16_32) * 2);

    h2 {
      font-size: calc(var(--h1-font-size) * 1.6);
      text-shadow: 2px 0 4px rgba(0, 0, 0, 0.5);

      span {
        color: #fff;
        font-family: var(--font-body);
        text-transform: uppercase;
      }
    }

    p {
      color: #fff;
      font-size: calc(var(--p-font-size) * 1.1);
      line-height: 150%;
      margin-top: calc(var(--s_16_32) * 0.5);
    }
  }

  ul {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    list-style: none;

    li {
      align-items: center;
      display: flex;
      flex-direction: column;
      font-size: 1.4em;
      justify-content: space-between;
      padding: 0 16px;

      & + li {
        border-left: 1px solid rgba(255, 255, 255, 0.5);
      }

      h3 {
        color: #000;
        font-size: 1.25em;
        font-weight: bold;
        margin-bottom: 16px;
        text-align: center;
      }

      p {
        color: #fff;
        line-height: 130%;
        text-align: justify;
      }

      span {
        background-color: #fff;
        border: 1px solid rgba(var(--color-main), 1);
        border-radius: 50%;
        display: block;
        height: 80px;
        margin-top: calc(var(--s_16_32) * 1);
        position: relative;
        transition: all 0.5s ease-in-out;
        width: 80px;

        &::before,
        &::after {
          border-radius: 50%;
          border: 1px solid #fff; /* Second border */
          content: '';
          position: absolute;

          top: -2px;
          left: -2px;
          right: -2px;
          bottom: -2px;
          z-index: -1;
        }

        &::after {
          box-shadow: 0 8px 4px 0px rgba(0, 0, 0, 0.1);
          transition: all 0.5s ease-in-out;
          z-index: 2;
        }

        &:hover {
          &::after {
            box-shadow: 0 8px 8px 2px rgba(0, 0, 0, 0.3);
          }
        }

        img {
          height: 100%;
          object-fit: cover;
          width: 100%;
        }
      }
    }

    @media screen and (max-width: 1200px) {
      gap: calc(var(--s_16_32) * 2);
      grid-template-columns: 1fr 1fr;

      li {
        padding: 0;

        & + li {
          border: 0;
        }
      }
    }

    @media screen and (max-width: 600px) {
      grid-template-columns: 100%;

      li {
        padding: 16px 0;

        & + li {
        }
      }
    }
  }
}

#space {
  height: 500px;
}

#process {
  padding-left: max(calc((100% - 1200px) / 2), 5vw);

  h2 {
    font-size: calc(var(--h1-font-size) * 2);
    padding: calc(var(--s_16_32) * 3) 0;
    position: relative;
    left: -5vw;

    @media screen and (max-width: 1590px) {
      left: 0;
      padding-right: 5vw;
    }

    span {
      color: rgba(var(--color-main), 1);
      font-style: oblique;
      font-weight: bold;
      -webkit-text-stroke: 2px rgba(0, 0, 0, 0.5);
    }
  }

  div.process {
    display: flex;
    gap: calc(var(--s_16_32) * 2);

    div.desc {
      flex: 0 0 calc(40% - 64px);

      & > div.headline {
        color: rgba(var(--color-main), 1);
        font-size: calc(var(--h1-font-size) * 1.5);
        margin-bottom: 64px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

        span {
          color: #5b5b5b;
          display: block;
          font-size: 1em;
          font-weight: bold;
          text-transform: uppercase;
        }
      }

      ul {
        display: flex;
        flex-wrap: wrap;
        gap: 32px;
        list-style: none;

        li {
          align-items: flex-end;
          display: flex;
          flex: 0 0 100%;
          gap: 32px;

          & > span {
            aspect-ratio: 1;
            background-color: #fff;
            border: 1px solid rgba(var(--color-main), 1);
            border-radius: 50%;
            display: block;
            height: 64px;
            margin-bottom: 8px;
            position: relative;
            width: 64px;

            &::before,
            &::after {
              border-radius: 50%;
              border: 1px solid #fff; /* Second border */
              content: '';
              position: absolute;

              top: -2px;
              left: -2px;
              right: -2px;
              bottom: -2px;
              z-index: -1;
            }
          }

          & > div {
            align-items: flex-end;
            display: flex;
            flex: 1;
            gap: 32px;

            > div {
              align-self: flex-end;
              font-size: var(--p-font-size);
              flex: 0 0 calc(100% - 112px);

              h3 {
                color: rgba(var(--color-main), 1);
                font-size: 1.5em;
                margin-bottom: 8px;
                text-transform: uppercase;
              }

              p {
              }
            }

            > span {
              aspect-ratio: 3.7;
              display: block;
              flex: 0 0 64px;
              transition: all 0.5s;
            }
          }

          &:hover {
            & > div {
              span {
                transform: translateX(32px);
              }
            }
          }
        }
      }
    }

    div.img {
      align-items: center;
      background-image: url('images/process_bg.jpg');
      background-position: center;
      background-size: cover;
      color: #fff;
      display: flex;
      flex: 0 0 60%;
      padding: calc(var(--s_16_32) * 3);
      position: relative;

      &::before {
        content: '';
        background: rgba(var(--color-main), 0.75);
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
      }

      & > div {
        position: relative;
        z-index: 10;

        h3 {
          font-family: var(--font-header);
          font-size: 3em;
          text-transform: uppercase;
        }

        p {
          font-size: var(--p-font-size);
          line-height: 150%;
          margin-top: 16px;
        }
      }
    }

    @media screen and (max-width: 1100px) {
      div.desc {
      }

      div.img {
      }
    }
  }

  @media screen and (max-width: 1100px) {
    padding: 0;

    h2 {
      padding-inline: max(calc((100% - 1200px) / 2), 7.5vw);
    }

    div.process {
      flex-wrap: wrap;

      div.desc {
        flex: 0 0 100%;
        padding-inline: max(calc((100% - 1200px) / 2), 7.5vw);
      }

      div.img {
        flex: 0 0 100%;
        padding-inline: max(calc((100% - 1200px) / 2), 7.5vw);
      }
    }
  }
}

#review {
  background-color: rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--s_16_32) * 2);
  justify-content: space-between;
  margin: calc(var(--s_16_32) * 3) auto;
  padding: calc(var(--s_16_32) * 3);
  width: min(85%, 1140px);

  @media screen and (max-width: 600px) {
    background-color: transparent;
    justify-content: center;
    padding: 0;
  }

  > div.data {
    flex: 1 0 50%;

    h2 {
      font-size: calc(var(--h1-font-size) * 1.6);
      margin-bottom: calc(var(--s_16_32) * 1);
      text-align: left;

      span {
        color: rgba(var(--color-main), 1);
        display: block;
        font-style: oblique;
        font-weight: bold;
        -webkit-text-stroke: 2px rgba(0, 0, 0, 0.5);
      }
    }

    p {
      font-size: var(--p-font-size);
      line-height: 150%;
      max-width: 400px;
    }

    a {
      background-color: rgba(var(--color-main), 1);
      color: #fff;
      display: block;
      font-size: var(--p-font-size);
      font-weight: bold;
      margin-top: calc(var(--s_16_32) * 1);
      padding: calc(var(--s_24_32) * 0.75) calc(var(--s_24_32) * 1);
      text-decoration: none;
      transition: all 0.25s ease-in-out;
      width: fit-content;

      &:hover {
        background-color: #5b5b5b;
      }

      &:active {
        transform: scale(0.9);
      }
    }
  }

  .carousel {
    flex: 0 0 300px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }

  div.cards {
    display: flex;
    transition: transform 0.5s ease-in-out;

    div.card {
      display: flex;
      flex: 0 0 300px;
      flex-wrap: wrap;
      font-size: var(--p-font-size);
      line-height: 150%;

      div.text {
        background-color: #727271;
        color: #fff;
        flex: 0 0 100%;
        height: 280px;
        padding: 24px;
      }

      div.author {
        background-color: #c5c6c6;
        display: flex;
        flex: 0 0 100%;
        gap: 16px;
        padding: 24px;

        div.img {
          padding: 0;

          span {
            background-color: rgba(var(--color-main), 1);
            display: block;
            height: 64px;
            width: 64px;
          }
        }

        div.data {
          align-items: flex-end;
          display: flex;
          flex-wrap: wrap;
          gap: -4px;

          p {
            flex: 0 0 100%;

            span {
              font-weight: bold;
            }
          }
        }
      }
    }
  }

  div.nav {
    display: flex;
    gap: 32px;
    flex: 0 0 100%;
    justify-content: center;
    margin-top: 16px;

    button {
      align-items: center;
      aspect-ratio: 1;
      background-color: #fff;
      border: 2px solid rgba(var(--color-main), 1);
      color: rgba(var(--color-main), 1);
      cursor: pointer;
      border-radius: 50%;
      display: flex;
      flex: 0 0 48px;
      font-family: var(--font-header);
      font-size: 2em;
      font-weight: bold;
      justify-content: center;
      text-decoration: none;
      transition: all 0.25s ease-in-out;

      &:hover {
        border-color: #5b5b5b;
        color: #5b5b5b;
      }

      &:disabled {
        background-color: #eee;
        border-color: #aaa;
        color: #aaa;
        cursor: not-allowed;
        opacity: 0.5;
      }
    }
  }
}

/* SERVICES */

#services_intro {
  margin: 0 auto;
  width: min(85%, 1140px);

  h2 {
    font-family: var(--font-body);
    font-size: calc(var(--h1-font-size) * 1.25);
    font-weight: normal;
    margin: calc(var(--s_16_32) * 3) 0 calc(var(--s_16_32) * 0.75);

    span {
      color: rgba(var(--color-main), 1);
      display: block;
      font-family: var(--font-header);
      font-size: 1.2em;
      font-style: oblique;
      font-weight: bold;
      line-height: 150%;
      -webkit-text-stroke: 2px rgba(0, 0, 0, 0.5);
    }
  }

  > div {
    display: flex;
    gap: calc(var(--s_16_32) * 4);
    font-size: var(--p-font-size);

    > div {
      flex: 0 0 calc((100% - calc(var(--s_16_32) * 4)) / 2);

      &:not(.img) {
        align-items: flex-end;
        border-top: 1px solid rgba(0, 0, 0, 0.2);
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--s_16_32) * 1.5);
        padding-top: calc(var(--s_16_32) * 0.75);

        p {
          line-height: 150%;
          text-align: justify;
        }

        ul {
          display: flex;
          flex: 0 0 100%;
          justify-content: space-between;
          list-style: none;

          @media screen and (max-width: 500px) {
            display: grid;
            gap: var(--s_16_32);
            grid-template-columns: 1fr 1fr;
          }

          li {
            display: flex;
            flex: 0 0 110px;

            > a {
              align-items: center;
              display: flex;
              flex: 0 0 100%;
              flex-direction: column;
              gap: 16px;
              justify-content: flex-start;
              text-decoration: none;

              span {
                color: rgba(var(--color-main), 1);
                font-family: var(--font-header);
                font-weight: bold;
                line-height: 120%;
                text-align: center;

                &.icon {
                  aspect-ratio: 1;
                  flex: 0 0 64px;
                  display: block;
                  width: 64px;
                }
              }
            }
          }
        }
      }

      &.img {
        background-color: rgba(0, 0, 0, 0.1);
        box-shadow: 4px 4px 0px 0px rgba(var(--color-main), 0.75);
        display: flex;
        flex: 1;

        img {
          flex: 1;
          object-fit: cover;
        }
      }
    }

    @media screen and (max-width: 1100px) {
      flex-wrap: wrap;

      > div {
        flex: 0 0 calc((100% - calc(var(--s_16_32) * 4)) / 2);

        &:not(.img) {
          flex: 0 0 100%;
        }
      }
    }
  }
}

#services_headline {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: calc(var(--h1-font-size) * 2);
  font-weight: 700;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  padding: calc(var(--s_16_32) * 2) 0;
  position: relative;
  width: min(85%, 1200px);
  width: 100%;
  white-space: nowrap;

  > div {
    animation: scroll linear infinite;
    display: flex;
    gap: calc(var(--s_16_32) * 4);
    white-space: nowrap;

    > span {
      background-color: #ebedee;
    }
  }
}

#services_det {
  background-color: #5b5b5b;
  padding: calc(var(--s_16_32) * 3) 0;

  background-image: url('images/services_bg.svg'); /* Replace with the path to your background image */
  background-size: auto calc(100% - 20vh); /* Height 100% of the container, width auto */
  background-position: 100% 10vh; /* Shift the image to the right by 50% */
  background-repeat: no-repeat; /* Prevent the background image from repeating */

  h2 {
    color: #fff;
    font-family: Gadugi;
    font-size: calc(var(--h1-font-size) * 1.6);
    margin: 0 auto calc(var(--s_16_32) * 2);
    text-transform: uppercase;
    width: min(85%, 1140px);

    span {
      color: rgba(var(--color-main), 1);
      font-style: oblique;
      font-weight: normal;
      text-transform: lowercase;
    }
  }

  #services_list {
    color: #fff;
    display: flex;
    margin: 0 auto;
    width: min(85%, 1140px);

    div.spacer {
      opacity: 0;
      font-size: calc(var(--h1-font-size) * 1.6);
      font-weight: bold;
      text-transform: lowercase;
    }

    div.services {
      display: flex;
      flex-wrap: wrap;
      gap: calc(var(--s_16_32) * 2);

      & > div {
        display: flex;
        gap: calc(var(--s_16_32) * 3);
      }

      & > div:nth-child(even) {
        flex-direction: row-reverse;
      }
    }

    div.data {
      flex: 1;
    }

    div.photo {
      flex: 0 0 30%;

      span {
        display: block;
        font-size: 3.6em;
        margin-bottom: calc(var(--s_16_32) * 0.5 + 4px);
      }

      img {
        box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.25);
      }
    }

    h3 {
      color: rgba(var(--color-main), 1);
      font-size: 3.6em;
      font-weight: bold;
      margin-bottom: calc(var(--s_16_32) * 0.5);
      text-transform: uppercase;
    }

    p {
      font-size: var(--p-font-size);
      line-height: 140%;
      text-align: justify;
    }

    ul {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      font-size: var(--p-font-size);
      list-style: none;
      margin-top: calc(var(--s_16_32) * 1);
      text-align: justify;

      li {
        border-left: 2px solid rgba(var(--color-main), 1);
        flex: 0 0 100%;
        padding-left: 8px;
      }
    }

    @media screen and (max-width: 900px) {
      div.spacer {
        display: none;
      }

      div.services {
        gap: calc(var(--s_16_32) * 3);

        & > div {
          flex-wrap: wrap;
          gap: calc(var(--s_16_32) * 2);
          justify-content: flex-start;
        }

        & > div:nth-child(even) {
          flex-direction: row;
        }
      }

      div.data {
        flex: 0 0 100%;
      }

      div.photo {
        flex: 0 0 300px;

        span {
          display: none;
        }
      }
    }
  }
}

#services_cta {
  display: flex;
  font-size: calc(var(--h1-font-size) * 1);
  font-weight: bold;
  justify-content: center;
  line-height: 125%;
  margin: 0 auto;
  padding: calc(var(--s_16_32) * 2) 0;
  width: min(85%, 1280px);

  a {
    color: rgba(var(--color-main), 1);
    text-decoration: none;
  }
}

/* ABOUT */

#about_intro {
  display: flex;
  gap: calc(var(--s_16_32) * 1.5);
  margin: calc(var(--s_16_32) * 4) auto calc(var(--s_16_32) * 3);
  padding-right: max(calc((100% - 1200px) / 2), 7.5vw);

  > div.img {
    border-right: 8px solid rgba(var(--color-main), 1);
    flex: 0 0 46%;

    img {
      height: 100%;
      object-fit: cover;
      width: 100%;
    }
  }

  > div.desc {
    flex: 0 0 calc(47% - (var(--s_16_32) * 1.5));

    h2 {
      font-size: calc(var(--h2-font-size) * 1.2);
      line-height: 120%;
      margin-bottom: var(--s_24_32);
      max-width: 600px;
      text-wrap: balance;
    }

    p {
      font-size: var(--p-font-size);
      line-height: 150%;
      text-align: justify;

      + p {
        margin-top: 16px;
      }
    }
  }

  @media screen and (max-width: 1000px) {
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 0;

    > div.img {
      border-right: 0;
      flex: 0 0 min(85%, 960px);
    }

    > div.desc {
      flex: 0 0 min(85%, 960px);

      h2 {
        max-width: 100%;
        text-align: center;
      }

      p {
        text-align: center;
        text-wrap: balance;
      }
    }
  }
}

#about_values {
  margin: 0 auto;
  width: min(85%, 960px);

  > div {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--s_24_32) * 1.5);

    > div {
      flex: 0 0 100%;
    }
  }

  h2 {
    font-size: calc(var(--h1-font-size) * 1.6);
    font-family: var(--font-body);
    margin: 0 0 calc(var(--s_16_32) * 2);
    text-align: center;
  }

  h3 {
    color: rgba(var(--color-main), 1);
    font-size: calc(var(--h2-font-size) * 1.3);
    margin-bottom: calc(var(--s_24_32) * 0.75);
    text-align: center;
    text-wrap: balance;
  }

  p {
    font-size: var(--p-font-size);
    line-height: 140%;
    text-align: center;
    text-wrap: balance;
  }

  span {
    display: block;
    font-size: calc(var(--h1-font-size) * 1);
    font-weight: bold;
    line-height: 125%;
    padding: calc(var(--s_16_32) * 2) 0;
    text-align: center;

    a {
      color: rgba(var(--color-main), 1);
      text-decoration: none;
    }
  }
}

/* CONTACT */

#contact {
  display: flex;
  gap: calc(var(--s_16_32) * 3);
  margin: calc(var(--s_16_32) * 4) auto calc(var(--s_16_32) * 3);
  width: min(85%, 1140px);

  div.contact_data {
    flex: 0 0 35%;

    h2 {
      color: rgba(var(--color-main), 1);
      font-size: calc(var(--h1-font-size) * 1.25);
      font-family: var(--font-body);
      font-weight: bold;
      margin-bottom: calc(var(--s_24_32) * 0.5);
    }

    p {
      font-size: var(--p-font-size);
      line-height: 150%;
    }

    > div {
      display: flex;
      flex-wrap: wrap;
      gap: calc(var(--s_24_32) * 0.75);
      margin-top: calc(var(--s_24_32) * 1.5);

      div {
        flex: 0 0 100%;
        font-size: var(--p-font-size);

        span {
          color: rgba(var(--color-main), 1);
          display: block;
          font-weight: bold;
          margin-bottom: 8px;
        }

        ul {
          display: flex;
          gap: 8px;

          li {
            display: block;
            height: 24px;
            width: 24px;

            a {
              align-items: center;
              display: flex;
              justify-content: center;

              &:hover {
                svg {
                  color: rgba(var(--color-main), 1);
                }
              }
            }

            span {
              display: block;
              height: 20px;
              transition: all 0.5s;
              width: 20px;

              svg {
                color: #5b5b5b;
              }
            }
          }
        }
      }
    }
  }

  div.contact_form {
    flex: 1;
    margin-top: calc(var(--s_16_32) * 2);

    #results_inner {
      flex: 0 0 100%;
      font-size: calc(var(--p-font-size) * 1);
      justify-content: center;

      &.ok {
        border: 1px solid green;
        color: green;
        margin-bottom: 20px;
        padding: 15px;
      }

      &.err {
        border: 1px solid red;
        color: red;
        margin-bottom: 20px;
        padding: 20px;
      }
    }

    form {
      display: grid;
      gap: calc(var(--s_16_32) * 1);
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

      div {
        display: flex;

        &.full {
          grid-column: 1 / -1;
        }

        &.g-recaptcha {
          > div {
            max-width: 100% !important;
          }
        }
      }
    }
  }

  input,
  textarea,
  button {
    background: transparent;
    border: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-bottom: 1px solid rgba(var(--color-main), 1);
    box-sizing: border-box;
    color: #000;
    font-family: var(--font-body);
    font-size: calc(var(--p-font-size) * 1);
    font-weight: 400;
    margin: 0;
    padding: calc(var(--s_24_32) * 0.5) calc(var(--s_24_32) * 0.75);
    transition: all 0.5s;
    width: 100%;

    &:hover {
      border: 1px solid rgba(0, 0, 0, 0.1);
    }
  }

  textarea {
    height: 100px;
  }

  button {
    background-color: rgba(var(--color-main), 1);
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.25s ease-in-out;
    width: fit-content;

    &:hover {
      background-color: #5b5b5b;
    }

    &:active {
      transform: scale(0.9);
    }
  }

  @media screen and (max-width: 900px) {
    flex-wrap: wrap;

    div.contact_data {
      flex: 0 0 min(400px, 100%);
    }

    div.contact_form {
      flex: 0 0 100%;
    }
  }
}

#map {
  height: 40vh;
  max-height: 500px;
}

#contact_cta {
  padding: 0 7.5vw;

  span {
    display: block;
    font-size: calc(var(--h1-font-size) * 1);
    font-weight: bold;
    line-height: 125%;
    padding: calc(var(--s_16_32) * 2) 0;
    text-align: center;

    a {
      color: rgba(var(--color-main), 1);
      text-decoration: none;
    }
  }
}

/* FOOTER */

footer {
  border-top: 2px solid rgba(var(--color-main), 1);
  display: flex;
  flex-wrap: wrap;
  font-size: calc(var(--p-font-size) * 0.9);
  gap: calc(var(--s_16_32) * 1.5);
  justify-content: center;
  padding: calc(var(--s_16_32) * 1.5) 0;

  > div {
    align-items: center;
    display: flex;
    gap: var(--s_16_32);
    justify-content: space-between;
    width: min(85%, 1140px);

    > div {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;

      &.logo {
        aspect-ratio: 1552 / 537;
        width: 200px;
      }
    }

    span {
      &.head {
        flex: 0 0 100%;
        font-weight: bold;
      }
    }

    @media screen and (max-width: 600px) {
      flex-wrap: wrap;
      justify-content: center;

      > div {
        flex: 0 0 100%;
        justify-content: center;

        &.logo {
          flex: 0 0 200px;
        }
      }

      span {
        &.head {
          text-align: center;
        }
      }
    }

    ul {
      display: flex;
      gap: 12px;

      li {
        display: block;
        height: 20px;
        width: 20px;

        a {
          align-items: center;
          display: flex;
          justify-content: center;
        }

        span {
          display: block;
          height: 20px;
          width: 20px;

          svg {
            stroke-width: 1;
          }
        }
      }
    }
  }

  ul {
    display: flex;
    flex: 0 0 100%;
    gap: 32px;
    justify-content: center;
    list-style: none;

    a {
      color: #5b5b5b;
      text-decoration: underline;

      &:hover {
        text-decoration: none;
      }
    }

    &.socials {
      justify-content: flex-start;
    }
  }

  p {
    flex: 0 0 100%;
    text-align: center;
  }
}

.lazyload,
.lazyloading {
  opacity: 0;
}

.lazyloaded {
  opacity: 1;
  /*  transition is applied to lazyloaded not lazyload */
  transition: opacity 300ms;
}