@import "mixins.less";
@import "animations.less";
@import "header.less";
@import "grid.less";
@import "typography.less";

.font(@weight:400, @width:100) {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: @weight;
  font-style: normal;
  font-variation-settings: "wdth" @width;
}

.icon() {
  font-family: "Font Awesome 6 Free";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant: normal;
  font-style: normal;
  font-weight: 900;
}

@red: #c40005;
@blue: #0160b4;
@green: #1f692e;
@black: #333333;
@lightgrey: #d8d8d8;
@mediumgrey: #787878;

body,
html {
  margin: 0;
  padding: 0;
  .font;
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
}

// * {
//   outline: 1px solid red; /* Debugging */
// }

html {
  scroll-behavior: smooth;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

figure {
  margin: 0;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
}

@boxPadding: 30px;
.padBox {
  padding: @boxPadding;
  display: block;
  @media @xsmall {
    padding: 20px;
  }
}

body {
  .customBarThin;
  max-width: 100vw;
  overflow-x: hidden;

  &.locked {
    height: 100vh;
    overflow-y: hidden;
  }
}

/*
header: 10000
logo: 10001
language: 10002
menu: 10003
home link: 10005;
search: 10100;
menu-mobile: 10110;
cookie: 20000
*/

:target {
  scroll-margin-top: 80px; /* Offset for fixed header */
}

& header {
  .header;
}

preloader {
  width: 60px;
  height: 50px;
  position: relative;
  & img {
    position: absolute;
    height: 100%;
    width: auto;
    top: 0;
    opacity: 0; /* Start with opacity 0 */
    animation: fadeInOut 0.9s infinite; /* 9 seconds total, 3 images */
    &.red {
      left: 0;
      animation-delay: 0s;
    }
    &.blue {
      left: 50%;
      .translate(-50%,0,0);
      animation-delay: 0.3s;
    }
    &.green {
      right: 0;
      animation-delay: 0.6s;
    }
  }
}

hero {
  .padBox;
  border-bottom: thin solid @lightgrey;
  .transition(all 0.3s ease 0.2s);

  & inner {
    display: block;
    aspect-ratio: 10/4;
    border: none;
    position: relative;
    overflow: hidden;
    @media @medium {
      aspect-ratio: 10/7;
    }
    @media @xsmall {
      aspect-ratio: 10/16;
    }

    & preloader {
      position: absolute;
      left: 50%;
      top: 50%;
      .translate(-50%,-50%,0);
    }

    & div.article {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 1;

      &.active {
        opacity: 1;
        z-index: 500;

        &.loaded {
          & div.image {
            opacity: 1;
          }
          & div.details {
            opacity: 1;
            & .title {
              .transition(all 0.3s ease 0.5s);
              .translate(0,0,0);
            }
            & .content {
              .transition(all 0.3s ease 0.6s);
              .translate(0,0,0);
            }
            & a {
              .transition(transform  0.3s ease 0.7s);
              .translate(0,0,0);
            }
          }
          & div.process-share {
            .transition(bottom 0.5s ease 0.5s);
            bottom: 60px;
          }
        }
      }

      & div.image {
        .cover;
        position: absolute;
        top: 0;
        height: 100%;
        right: 0;
        width: 80%;
        opacity: 0;
        .transition(opacity 0.5s ease);
        @media @medium {
          width: 60%;
          right: 40%;
        }
        @media @xsmall {
          width: 100%;
          right: 0;
        }
      }

      & div.details {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 1) 0%,
          rgba(0, 0, 0, 1) 60%,
          rgba(0, 0, 0, 0) 100%
        );
        padding: 20px;
        opacity: 0;
        .noselect;
        @media @medium {
          width: 40%;
          background: none;
          left: 60%;
          overflow: hidden;
        }
        @media @xsmall {
          width: 100%;
          left: 0;
          padding: 0;
          background: linear-gradient(
            to bottom,
            black 0%,
            black 50%,
            rgba(0, 0, 0, 0) 100%
          );
          height: auto;
          padding: 20px 20px 40px;
        }

        & .title {
          color: white;
          width: 60%;
          .font(700, 80);
          font-size: 25px;
          .translate(-150%,0,0);
          @media @medium {
            width: 90%;
            color: black;
          }
          @media @xsmall {
            width: 100%;
            margin-bottom: 30px;
          }
        }

        & .content {
          color: white;
          width: 60%;
          .font(200);
          font-size: 14px;
          letter-spacing: 0.5px;
          .translate(-150%,0,0);
          @media @medium {
            .font(400);
            width: 90%;
            color: black;
          }
          @media @xsmall {
            display: none;
          }
        }

        & a {
          display: flex;
          align-items: flex-start;
          .font(600,90);
          font-size: 17px;
          color: @lightgrey;
          text-decoration: none;
          gap: 10px;
          .translate(-150%,0,0);
          display: inline-flex;
          max-width: 350px;
          @media @medium {
            color: @blue;
          }

          &:hover {
            color: @red;
          }

          & i {
            font-weight: 200;
            margin-top: 4px;
          }
        }
      }

      & div.process-share {
        position: absolute;
        left: 20px;
        bottom: -60px;
        .transition(bottom 0.5s ease);
        & label {
          display: none;
        }
        @media @medium {
          left: auto;
          right: 20px;
        }
      }
    }

    & div.information {
      position: absolute;
      display: grid;
      grid-template-columns: 1fr 150px 1fr;
      left: 0;
      width: 100%;
      bottom: 0;
      z-index: 1001;
      background: white;
      align-items: stretch;
      justify-content: center;
      .translate(0,100%,0);
      .noselect;
      padding: 10px 0;

      &.active {
        .transition(transform 0.5s ease 0.5s);
        .translate(0,0,0);
      }

      & .left,
      & .right {
        position: relative;

        & .ind {
          position: absolute;
          .font(600);
          font-size: 13px;
          line-height: 21px;
          color: @mediumgrey;
          left: 0;
          top: 0;
          opacity: 0;
          width: 100%;
          white-space: nowrap; /* Prevent text from wrapping */
          overflow: hidden; /* Hide overflowed text */
          text-overflow: ellipsis;
          .translate(0,150%,0);
          transition-property: opacity, transform;
          transition-duration: 0.3s, 0.3s;
          transition-timing-function: ease, ease-in;
          transition-delay: 0s, 0s;
          cursor: pointer;
          padding-left: 15px;

          &:hover {
            color: @black;
          }

          &.active {
            transition-property: opacity, transform;
            transition-duration: 0.3s, 0.3s;
            transition-timing-function: ease, ease-in;
            transition-delay: 0s, 1s;
            opacity: 1;
            .translate(0,0,0);
          }

          & i {
            color: @blue;
            padding-right: 10px;
            position: absolute;
            left: 0;
            top: 50%;
            .translate(0,-50%,0);
          }
        }
      }

      & .right {
        & .ind {
          left: auto;
          right: 0;
          text-align: right;
          padding-left: 0;
          padding-right: 15px;

          &.active {
            transition-property: opacity, transform;
            transition-duration: 0.3s, 0.3s;
            transition-timing-function: ease, ease-in;
            transition-delay: 0s, 1.3s;
          }

          & i {
            color: @blue;
            padding-right: 0px;
            padding-left: 10px;
            left: auto;
            right: 0;
          }
        }
      }

      & .center {
        text-align: center;
        flex: 0 0 150px;
        .font(800);
        color: @black;
        font-size: 17px;
        letter-spacing: 1px;

        & .divider {
          color: @blue;
        }
      }
    }

    & div.timer {
      position: absolute;
      bottom: 43px;
      left: 0;
      height: 2px;
      background: @red;
      z-index: 2000;
      animation: heroTimer 7s linear;
    }
  }
}

main {
  .grid;

  & div.header-spacer {
    height: 80px;
  }

  & div.process-home {
    position: relative;

    & .details {
      position: absolute;
      left: 0;
      bottom: 0;
      .padBox;
      @media @medium {
        position: static;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 50px;
        padding-top: 50px;
      }
      @media @xsmall {
        width: 100%;
        position: static;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 50px;
        padding-top: 50px;
      }

      & ul {
        list-style: disc inside; /* Keeps bullets inside the frame */
        padding: 0 10px; /* Adds some space inside */
        & li {
          padding-left: 20px;
          text-indent: -20px; /* Creates the hanging indent */
        }
      }
    }

    & h1 {
      padding-right: 30%;
      @media @medium {
        padding-right: 0;
        margin-top: 50px !important;
        margin-bottom: 20px;
      }
      @media @xsmall {
        padding-right: 0;
        margin-top: 50px !important;
        margin-bottom: 20px;
      }
    }
  }

  & div.services {
    & div.services-intro {
      text-align: center;

      & .top,
      & .bottom {
        color: @mediumgrey;
        .font(800);
        font-size: 20px;
        letter-spacing: 1px;
        margin: 20px 0;
      }

      & .middle {
        position: relative;
        .font(300);
        font-size: 80px;
        letter-spacing: 2px;
        color: black;
        overflow: hidden;
        @media @medium {
          font-size: 60px;
        }
        @media @xsmall {
          font-size: 40px;
        }

        & .word {
          position: absolute;
          left: 0;
          width: 100%;
          height: 100%;
          text-align: center;
          opacity: 0;
          .transition(all 0.6s ease);

          &.active {
            top: 0;
            opacity: 1;
          }

          &.parent {
            top: -100%;
            opacity: 0;
          }

          &.waiting {
            top: 100%;
            opacity: 0;
          }
        }

        & .measure {
          color: transparent;
        }
      }
    }

    & div.services-list {
      & .process-service {
        text-decoration: none;

        &:hover {
          & .box img {
            .scale(1.1);
          }
          & .title {
            color: @blue;
            .font(600);
          }
        }

        & .box {
          aspect-ratio: 1 / 1;
          overflow: hidden;

          & img {
            .transition(all 0.5s ease);
          }
        }
      }

      & .title {
        color: black;
        .font(400);
        font-size: 19px;
        margin-top: 20px;
        .transition(all 0.3s ease);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  & div.simple-article {
    padding: 130px 20% 100px;
    @media @medium {
      padding: 130px 10% 100px;
    }
    @media @xsmall {
      padding: 30px 20px 100px;
    }

    & div.process-share {
      margin-top: -80px;
      float: right !important;
    }
  }

  & div.clients-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 80px;
    @media @medium {
      grid-template-columns: repeat(4, 1fr);
      gap: 60px;
    }
    @media @xsmall {
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
    }
    & > div {
      width: 100%;
      height: 100%;

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

& div.grid {
  .grid;
}

footer {
  background-color: @black;
  color: white;
  .grid;

  & .col {
    border: none;
  }

  & moto {
    display: flex;
    align-items: center;
    gap: 10px;
    .transition(all 0.4s ease);
    .noselect;
    justify-content: center;
    grid-column-start: 1;
    grid-column-end: 13;
    margin-top: 50px;

    & img {
      height: 45px;
      width: auto;
    }

    & .item {
      .font(400);
      font-size: 17px;
      color: @lightgrey;
    }
  }

  & h2 {
    text-align: center;
    .font(300);
    color: @lightgrey;
    grid-column-start: 1;
    grid-column-end: 13;
    padding: 30px 0;
    margin: 40px 0;
    background: black;
  }

  & .footer-menu {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 40px;
    @media @xsmall {
      flex-direction: column;
      gap: 20px;
    }
    & .nav-item {
      flex: 1;
      &.footer-item {
        & > a {
          display: block;
          color: @lightgrey;
          margin: 0 0 20px;
          .font(600);
          text-decoration: none;
          .transition;
          &:hover {
            color: white;
          }
          @media @xsmall {
            margin: 1cap 0 20px;
            font-size: 20px;
          }
        }
        & .mod-menu__sub {
          & a {
            color: @lightgrey;
            text-decoration: none;
            .transition;
            .font(400);
            font-size: 15px;
            margin: 0 0 10px;
            &:hover {
              color: white;
            }
            @media @xsmall {
              font-size: 18px;
            }
          }
        }
      }
      &.contact {
        & h4 {
          color: @lightgrey;
          margin: 0 0 20px;
          .font(600);
        }
        & .point {
          display: flex;
          gap: 10px;
          align-items: flex-start;
          margin-bottom: 10px;
          & i {
            color: @lightgrey;
            margin-top: 4px;
          }
          & a {
            color: @lightgrey;
            text-decoration: none;
            .transition;
            .font(400);
            font-size: 15px;
            &:hover {
              color: white;
            }
          }
        }
      }
    }
  }
}

#contactModule {
  .grid;

  & .col {
    border-top: none;
  }

  & .map {
    @media @xsmall {
      width: 100%;
      aspect-ratio: 1/1;
    }
  }

  & .map-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  & .details {
    .typography;
    position: relative;
    @media @xsmall {
      padding-bottom: 110px;
    }

    & .point {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 20px;
      margin-bottom: 8px;

      & a {
        color: black;
        text-decoration: none;
        .font(400);
        font-size: 15px;
        .transition;

        &:hover {
          color: @blue;
          .font(600);
        }
      }

      & joomla-hidden-mail {
        text-decoration: none;
      }

      & i {
        &::before {
          color: @red;
          font-size: 20px;
        }
      }

      & + h2 {
        margin-top: 30px;
        @media @medium {
          margin-top: 60px;
        }
      }
    }

    & form {
      @media @medium {
        padding-bottom: 60px;
      }
      & input {
        .font(400);
        font-size: 15px;
        padding: 10px;
        &.mapbutton {
          cursor: pointer;
          .font(600);
        }
      }
    }
  }

  & .linked {
    position: absolute;
    left: 30px;
    bottom: 30px;
  }
}

div.process-map {
  height: 0;
  overflow: hidden;
  .transition(height 0.5s ease);

  &.active {
    height: 600px;
  }

  & #map {
    height: 100%;
  }
}

div.country-clients {
  & ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;

    & li {
      border: thin solid @lightgrey;
      padding: 10px;
      .transition;

      &:hover {
        padding: 5px;
      }

      & img {
        width: 100%;
        height: 100%;
        object-position: center;
        object-fit: contain;
      }
    }
  }

  & + h1 {
    margin-top: 60px !important;
  }
}

div.process-share {
  display: flex;
  align-items: center;
  gap: 10px;
  float: right;

  & label {
    .font(400);
    font-size: 14px;
  }

  & a {
    color: @mediumgrey;
    .transition;

    &:hover {
      color: @blue;
    }
  }

  & div.red {
    color: red;
    .font(400);
    font-size: 14px;
    & i {
      margin-right: 8px;
    }
  }
}

div.clients-module {
  padding: 30px;
  @media @medium {
    padding: 60px 30px;
  }
  & h1 {
    text-align: center;
    @media @medium {
      margin: 20px 0 40px;
    }
  }
  & .slick-slide {
    aspect-ratio: 1/1;
    margin-right: 20px;

    & img {
      object-fit: contain;
      object-position: center;
      width: 100%;
      height: 100%;
    }
  }
}

div.lazy-container {
  position: relative;

  &.loaded {
    &::before {
      opacity: 0;
    }
    &::after {
      display: none;
    }
  }

  &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    border: 4px solid @red;
    border-radius: 50%;
    opacity: 1;
    animation: lazyAnimation 0.7s ease-in-out infinite;
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: @lightgrey;
    opacity: 1;
    .transition(opacity 0.3s ease);
  }
}

@keyframes lazyAnimation {
  0% {
    width: 5px;
    height: 5px;
    border-width: 4px;
    opacity: 1;
  }
  100% {
    width: 50px;
    height: 50px;
    border-width: 1px;
    opacity: 0;
  }
}

#cookie_darling {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  .alpha(50,0,0,0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20000;

  & .inner {
    background-color: white;
    .shadow;
    .typography;
    padding: 50px;
    width: 50%;
    @media @xsmall {
      width: 90%;
      padding: 30px;
    }

    & div.buttons {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-top: 30px;
      gap: 20px;

      & div.button {
        .font(400);
        font-size: 17px;
        padding: 10px;
        background: black;
        color: white;
        cursor: pointer;
        .transition(all 0.2s ease);

        &:hover {
          .scale(1.1);
        }

        &.red {
          background: @red;
        }
      }
    }
  }
}

#digested-cookie {
  display: flex;
  align-items: center;
  background: white;
  .shadow;
  @media @xsmall {
    text-align: center;
    padding: 0;
    flex-direction: column;
    gap: 20px;
  }

  & div.title {
    background: black;
    color: white;
    padding: 10px 20px;
    white-space: nowrap;
    .font(400);
    font-size: 15px;
    @media @xsmall {
      padding: 20px 20px;
      font-size: 16px;
      width: 100%;
    }
  }

  & #spit-the-cookie,
  & #think-again-cookie {
    background: black;
    color: white;
    padding: 10px 20px;
    white-space: nowrap;
    .font(400);
    font-size: 15px;
    background: @red;
    cursor: pointer;
    @media @xsmall {
      font-size: 16px;
      padding: 20px 20px;
      width: 100%;
    }
  }

  & p {
    width: 100%;
    padding: 0 20px;
    .font(400);
    font-size: 15px;
    margin: 0;
    @media @xsmall {
      font-size: 16px;
    }
  }

  & div.acceptance {
    white-space: nowrap;
    padding: 0 20px;
    .font(400);
    font-size: 15px;
    @media @xsmall {
      font-size: 16px;
    }

    &.warning {
      color: @red;
    }
  }
}

div.newsletter-row {
  & .typography {
    padding-right: 20%;
    @media @xsmall {
      padding-right: 30px;
      padding-bottom: 130px;
    }
  }
  #mc-embedded-subscribe-form {
    margin: 30px 0 0 !important;

    & img {
      object-fit: contain;
    }
  }
}

& div.personnel-intro {
  & div.process-share {
    float: none;
  }
}

& div.person {
  & .cv {
    text-align: right;
    padding-left: 30%;
    min-height: 200px;
    @media @medium {
      padding-left: @boxPadding;
    }
    @media @xsmall {
      padding-left: 20px;
      padding-right: 20px;
    }
  }
  & .intro {
    text-align: left;
    & h1 {
      margin: 3px 0 4px;
      color: @blue;
      .font(700,80);
      font-size: 28px;
    }
    & .degree {
      font-size: 19px;
      .font(600);
      color: #5d5d5d;
      margin-bottom: 12px;
    }
    & .position {
      font-style: italic;
    }
  }
  &:nth-child(even) {
    & .cv {
      padding-right: 30%;
      text-align: left;
      padding-left: 30px;
      @media @medium {
        padding-right: @boxPadding;
      }
      @media @xsmall {
        padding-right: 20px;
        padding-left: 20px;
      }
    }
    & .intro {
      text-align: right;
    }
  }
}

& div.process-category-articles {
  & h1.xlarge {
    text-align: right;
    font-size: 43px !important;
    line-height: 55px !important;
    @media @xsmall {
      font-size: 30px !important;
      line-height: 40px !important;
      text-align: left;
    }
  }

  & a.title {
    text-decoration: none;
    color: black;
    .transition;
    &:hover {
      color: red;
    }
  }

  & a.image {
    position: relative;
    &::after {
      content: "+";
      color: white;
      font-size: 100px;
      text-shadow: 0px 0px 5px black;
      font-weight: 300;
      .transition(all 0.3s ease);
      position: absolute;
      top: 50%;
      left: 50%;
      .translate(-50%,-50%,0);
      opacity: 0;
    }
    &:hover {
      & img {
        opacity: 0.8;
      }
      &::after {
        opacity: 1;
      }
    }
    & img {
      .transition(opacity 0.3s ease);
    }
  }

  & .article-description {
    position: relative;
    .noselect;
    @media @xsmall {
      padding: 40px 20px 140px;
    }

    & a.more {
      position: absolute;
      text-decoration: none;
      font-size: 60px;
      font-weight: 300;
      color: @mediumgrey;
      right: @boxPadding;
      bottom: @boxPadding;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      .transition(all 0.3s ease);
      .origin(100%,100%);
      &:hover {
        color: @red;
        .scale(1.2);
      }
    }
  }

  &.master-category {
    & .col.box {
      @media @medium {
        aspect-ratio: 3/2;
      }
    }
    & .sub-category {
      & .card {
        position: relative;
        overflow: hidden;
        height: 100%;

        & .card1 {
          position: absolute;
          width: 100%;
          .transition(all 0.3s ease);
          opacity: 1;
          @media @xsmall {
            position: static;
          }
        }

        & .card2 {
          position: absolute;
          width: 100%;
          height: 0;
          overflow: hidden;
          .transition(all 0.3s ease 0.3s);
          & ul {
            margin: 0;
            padding: 0;
            list-style: none;
            width: 100%;
            & li {
              opacity: 0;
              .translate(0,-100%,0);
              .transition(all 0.2s ease);
              & a {
                & i {
                  &::before {
                    .transition;
                    color: black;
                  }
                }
                display: flex;
                align-items: center;
                padding: 8px 0;
                .font(500);
                font-size: 15px;
                gap: 10px;
                text-decoration: none;
                color: @mediumgrey;
                .transition;
              }

              &:hover {
                & a {
                  & i {
                    &::before {
                      color: @red;
                    }
                  }
                  color: black;
                }
              }
            }
          }
        }

        &:hover {
          & .card1 {
            opacity: 0;
            .transition(all 0.3s ease);
          }
          & .card2 {
            height: 100%;
            .transition(all 0.3s ease);
            & ul {
              & li {
                transition: all 0.1s ease-in-out;
                .loop(@i) when (@i <= 10) {
                  &:nth-child(@{i}) {
                    transition-delay: (0.03s * @i);
                  }
                  .loop(@i + 1);
                }
                .loop(1);
                opacity: 1;
                .translate(0,0,0);
              }
            }
          }
        }
      }

      &.article {
        padding-right: 20%;
        @media @medium {
          padding-right: @boxPadding;
        }
        @media @xsmall {
          padding-right: 20px;
        }
        & a.readmore {
          text-decoration: none;
          color: @black;
          .font(600);
          font-size: 18px;
          margin-top: 20px;
          display: flex;
          position: relative;
          padding-bottom: 5px;
          max-width: 70%;
          align-items: flex-start;
          gap: 10px;
          @media @xsmall {
            max-width: 100%;
            margin-top: 30px;
          }
          & i {
            .transition;
            margin-top: 4px;
          }
          &:hover {
            color: @blue;
            & i {
              color: @red;
            }
          }
        }
      }
    }
  }
}

& div.service-article {
  padding-right: 30%;
  border-left: thin solid @lightgrey;
  @media @medium {
    padding-right: @boxPadding;
    border-left: none;
  }
  @media @xsmall {
    padding-right: 20px;
    border-left: none;
  }

  & .process-share {
    margin-bottom: 90px;
    @media @medium {
      margin-bottom: 40px;
    }
    @media @xsmall {
      margin-bottom: 30px;
    }
  }
}

& img.service-image {
  border-right: none;
}

& div.breadcrumb {
  .font(400);
  font-size: 14px;
  .noselect;
  & ul {
    margin: 0 0 40px 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    @media @xsmall {
      margin-bottom: 20px;
    }
    & li {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      & a,
      span {
        color: @black;
        text-decoration: none;
        .transition;
        border-bottom: thin solid white;
        &:hover {
          color: @blue;
          border-bottom: thin solid @black;
        }
      }

      & > span {
        color: @black!important;
        border-bottom: none !important;
      }

      & i {
        color: @blue;
      }
    }
  }
}

div.process-search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 10100;
  @media @xsmall {
    position: absolute;
  }
  & .master {
    height: 0;
    // overflow: hidden;
    background: @blue;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    .transition;
    &.active {
      padding: 0 @boxPadding;
      height: 80px;
      & form {
        .translate(0,0,0);
      }
    }
    & form {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      .font(400);
      font-size: 17px;
      .transition;
      .translate(0,-200px,0);
      & label {
        color: white;
        @media @xsmall {
          display: none;
        }
      }
      & .awesomplete > ul {
        z-index: 2;
      }
      & .input-group {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        .font(400);
        & input {
          padding: 10px;
          border: none;
          border-radius: 5px;
          width: 300px;
          &::placeholder {
            color: @lightgrey;
          }
          @media @xsmall {
            width: 200px;
          }
        }
        & button {
          padding: 10px 20px;
          background: @red;
          color: white;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          .transition;
          &:hover {
            background: black;
          }
        }
      }
    }
  }
  & .trigger {
    position: absolute;
    top: 100%;
    left: 50%;
    .translate(-50%,0,0);
    background: @blue;
    padding: 10px 20px;
    color: white;
    cursor: pointer;
    @media @medium {
      left: 100%;
      .translate(-113px,0,0);
    }
    @media @xsmall {
      left: 100%;
      .translate(-113px,0,0);
      background: none;
      color: @mediumgrey;
    }
    &.active {
      @media @xsmall {
        background: @blue;
        color: white;
      }
    }
  }
}

& div.process-finder {
  & #search-form {
    & form {
      & fieldset {
        border: none;
        & .form-inline {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 20px;
          font-size: 17px;
          & .input-group {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            font-size: 17px;
            & input {
              padding: 10px;
              border: thin solid black;
              border-radius: 5px;
              width: 400px;
              font-size: 17px;
              &::placeholder {
                color: @lightgrey;
              }
            }
            & button {
              padding: 10px 20px;
              background: @red;
              color: white;
              border: none;
              border-radius: 5px;
              cursor: pointer;
              .transition;
              &:hover {
                background: black;
              }
            }
          }
        }
      }
    }
  }
  & #search-results {
    margin-top: 0;
    padding-top: @boxPadding;
  }
}