/*-------------------------------------*/
/*-----  RESETS  ----------------------*/
/*-------------------------------------*/


* { margin: 0; }
*, *::before, *::after { box-sizing: border-box; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul { list-style: none; padding: 0; }
a { text-decoration: none; }
a:visited { text-decoration: none; color: inherit; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }


/*-------------------------------------*/
/*-----  FONTS  -----------------------*/
/*-------------------------------------*/


@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 100 900;
  src: url(/static/font/roboto-slab.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/*-------------------------------------*/
/*-----  GLOBALS  ---------------------*/
/*-------------------------------------*/


:root {
  --gray: #4c5166;
  --gray-light: #858a9f;
  --teal: #25afb4;
  --white: #ffffff;
  --off-white: #f8f8f8;
  --btn-bg-color: var(--gray);
  --btn-bg-color-active: var(--teal);
  --btn-bg-color-hover: var(--teal);
  --btn-text-color: var(--white);
  --btn-sm-padding: 9px 20px;
  --btn-sm-line-height: 14px;
  --btn-sm-font-size: 12px;
  --btn-lg-padding: 13px 29px;
  --btn-lg-line-height: 17px;
  --btn-lg-font-size: 14px;
  --btn-xl-padding: 17px 40px;
  --btn-xl-line-height: 21px;
  --btn-xl-font-size: 18px;
  --footer-bg-color: var(--gray);
  --footer-text-color: var(--gray-light);
  --footer-text-size: 14px;
  --footer-border-color: #5a617a;
  --footer-border-size: 20px;
  --icon-color: var(--teal);
  --letter-spacing-base: 1px;
  --letter-spacing-lg: 1.5px;
  --letter-spacing-xl: 2px;
  --menu-text-color: var(--gray);
  --menu-text-color-active: var(--teal);
  --menu-text-color-hover: var(--teal);
  --nav-header-height: 100px;
}

html {
  font-family: 'Roboto Slab', system-ui;
  scroll-behavior: smooth;
}
i { color: var(--icon-color); }

.btn {
  display: inline-block;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  border: none;
  background-color: var(--btn-bg-color);
  color: var(--btn-text-color) !important;
  letter-spacing: var(--letter-spacing-base);
  transition: background-color 0.15s ease;

  &:focus-visible {
    outline: 1px auto #000000;
    outline-offset: 1px;
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover { background-color: var(--btn-bg-color-hover); }
  }
}

.btn-sm {
  padding: var(--btn-sm-padding);
  line-height: var(--btn-sm-line-height);
  font-size: var(--btn-sm-font-size);
}

.btn-lg {
  padding: var(--btn-lg-padding);
  line-height: var(--btn-lg-line-height);
  font-size: var(--btn-lg-font-size);
}

.btn-xl {
  padding: var(--btn-xl-padding);
  line-height: var(--btn-xl-line-height);
  font-size: var(--btn-xl-font-size);
}

.btn-lg-xl {
  padding: var(--btn-xl-padding);
  line-height: var(--btn-xl-line-height);
  font-size: var(--btn-xl-font-size);
}

@media (max-width: 1024px) {
  .btn-lg-xl {
    padding: var(--btn-lg-padding);
    line-height: var(--btn-lg-line-height);
    font-size: var(--btn-lg-font-size);
  }
}


/*-------------------------------------*/
/*-----  NAV / MENU  ------------------*/
/*-------------------------------------*/


nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1;
  height: var(--nav-header-height);
  padding: 0px 60px;
  background-color: var(--white);
  box-shadow: rgba(0, 0, 0, .117647) 0 1px 3px;

  .logo { margin-bottom: 10px; }

  #menu {
    ul {
      display: flex;
      column-gap: 65px;
      align-items: center;
      position: static;
      font-size: 15px;
      letter-spacing: var(--letter-spacing-base);

      li {
        &.active {
          a { color: var(--menu-text-color-active); }
          a.btn { background-color: var(--btn-bg-color-active); }
        }

        &.contact {
          a:not(.btn) { display: none; }
          a.btn { text-transform: uppercase; }
        }

        a {
          display: inline-block;
          color: var(--menu-text-color);

          @media (hover: hover) and (pointer: fine) {
            &:hover { color: var(--menu-text-color-hover); }
          }
        }
      }
    }
  }

  #menu-icon {
    display: none;
    font-size: 24px;

    i {
      display: none;
      cursor: pointer;
    }
  }

  @media (max-width: 1170px) {
    position: static;
    padding: 0px 50px 0px 30px;

    .logo img { max-width: 80%; }

    #menu {
      position: absolute;
      left: 0px;
      top: 100px;
      width: 100%;
      z-index: 1;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      pointer-events: none;
      transition: opacity 100ms ease, transform 160ms ease;

      &.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
      }

      ul {
        flex-direction: column;
        background-color: var(--white);

        li {
          width: 100%;
          border-top: 1px solid #dddddd;

          &:last-child {
            border-bottom: 1px solid #dddddd;
          }

          &.contact {
            a.btn { display: none; }
            a:not(.btn) { display: inline-block; }
          }

          a {
            display: inline-block;
            width: 100%;
            padding: 15px 0;
            text-align: center;

            @media (hover: hover) and (pointer: fine) {
              &:hover { background-color: #f6f6f6; }
            }
          }
        }
      }
    }

    #menu-icon {
      display: block;

      i.show { display: block; }
    }
  }
}

/*-------------------------------------*/
/*-----  HOME PAGE  -------------------*/
/*-------------------------------------*/

#home {
  div#landing {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: var(--nav-header-height);
    height: calc(100vh - var(--nav-header-height));
    width: 100%;
    padding: 0 30px;
    background-image: url("/static/img/home-bg-1.jpg");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;

    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--white);
      text-align: center;

      .title {
        line-height: clamp(60px, 8vw, 135px);
        font-size: clamp(2.5rem, 8vw, 7rem);
        font-weight: 700;
        letter-spacing: var(--letter-spacing-xl);
      }

      .caption {
        max-width: 1024px;
        line-height: 48px;
        font-size: 1.5rem;
        font-weight: 300;
        letter-spacing: var(--letter-spacing-base);
        text-wrap: balance;
        margin-top: 25px;
      }

      .links {
        display: flex;
        column-gap: 30px;
        margin-top: 40px;
      }
    }

    @media (max-width: 1170px) {
      position: static;
    }
  }

  main {
    position: relative;
    background-color: var(--white);

    #approach {
      display: flex;

      & > div {
        min-width: 0;
        max-width: 50%;
      }

      .content {
        display: flex;
        flex-direction: column;
        row-gap: 20px;
        padding: 100px 3%;

        .title {
          line-height: clamp(37px, 6vw, 54px);
          font-size: clamp(28px, 6vw, 40px);
          font-weight: 700;
          letter-spacing: var(--letter-spacing-xl);
          color: var(--gray);
        }

        .separator {
          width: 100px;
          border-top: 2px solid var(--teal);
          margin: 5px 0;
        }

        .text,
        .caption {
          line-height: 34px;
          font-size: 16px;
          font-weight: 300;
          color: var(--gray-light);
        }

        ul {
          display: flex;
          flex-direction: column;
          row-gap: 15px;

          li {
            display: flex;
            column-gap: 15px;
            align-items: center;

            span { color: var(--gray-light); }
          }
        }

        .link { margin-top: 25px }
      }

      .image {
        display: flex;
        align-items: center;
      }

      @media (max-width: 1024px) {
        flex-direction: column;

        & > div { width: 100%; max-width: 100%; }

        .content { padding: 100px 6%; }

        @media (max-width: 640px) {
          .image { display: none; }
        }
      }
    }

    #services {
      display: flex;
      flex-direction: column;
      row-gap: 100px;
      padding: 90px 3%;
      background-color: var(--off-white);

      .row {
        display: flex;
        column-gap: 105px;

        @media (max-width: 1024px) {
          flex-direction: column;
          row-gap: 100px;
        }

        & > div {
          flex: 1;
          display: flex;
          flex-direction: column;
          row-gap: 25px;
          align-items: center;
          padding: 0 20px;

          .title {
            line-height: clamp(37px, 4vw, 54px);
            font-size: clamp(30px, 2vw, 40px);
            font-weight: 700;
            letter-spacing: var(--letter-spacing-xl);
            color: var(--gray);
          }

          .caption {
            line-height: 34px;
            font-size: 16px;
            font-weight: 300;
            color: var(--gray-light);
          }

          .title,
          .caption {
            text-align: center;
          }
        }
      }
    }

    #testimonials {
      display: flex;

      & > div {
        min-width: 0;
        max-width: 50%;
      }

      .featured {
        display: flex;
        flex-direction: column;
        row-gap: 50px;
        align-items: center;
        justify-content: center;
        background-image: url("/static/img/testimonial/bg.jpg");
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 100px 6%;

        .quote {
          line-height: 30px;
          font-size: 18px;
          font-weight: 300;
          letter-spacing: var(--letter-spacing-xl);
          color: var(--white);
          font-style: italic;
        }

        .source {
          line-height: 34px;
          font-size: 18px;
          font-weight: 300;
          letter-spacing: var(--letter-spacing-xl);
          color: var(--white);
        }

        .quote,
        .source {
          text-align: center;
        }
      }

      .clients {
        display: flex;
        flex-direction: column;
        row-gap: 50px;
        padding: 100px 3% 100px 6%;

        .title {
          line-height: clamp(37px, 6vw, 54px);
          font-size: clamp(30px, 6vw, 40px);
          font-weight: 700;
          letter-spacing: var(--letter-spacing-xl);
          color: var(--gray);
        }

        .caption {
          line-height: 34px;
          font-size: 16px;
          font-weight: 300;
          color: var(--gray-light);
        }

        .carousel {
          overflow: hidden;

          .carousel-track {
            display: flex;
            column-gap: 40px;
            transition: transform 0.6s ease;

            img {
              height: 125px;
              width: 100px;
            }
          }
        }
      }

      @media (max-width: 1024px) {
        flex-direction: column;

        & > div { width: 100%; max-width: 100%; }

        .clients { padding: 100px 6%; }
      }
    }

    #discover {
      display: flex;
      flex-direction: column;
      row-gap: 20px;
      align-items: center;
      padding: 80px 30px 60px;
      background-image: url("/static/img/home-bg-2.jpg");
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-size: cover;

      .title {
        line-height: clamp(44px, 6vw, 78px);
        font-size: clamp(34px, 6vw, 60px);
        font-weight: 700;
        letter-spacing: var(--letter-spacing-xl);
        color: var(--white);
      }

      .link {
        a {
          background-color: transparent;
          border: 1px solid var(--white);
          text-transform: uppercase;

          &:hover { background-color: var(--teal); }
        }
      }
    }
  }
}


/*-------------------------------------*/
/*-----  CAREERS PAGE  ----------------*/
/*-------------------------------------*/

/*
#careers {
  div.banner {
    display: flex;
    align-items: center;
    height: 100px;
    padding: 0 60px;
    background-image: url("/static/img/banner-bg-1.jpg");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;

    .title {
      line-height: clamp(45px, 6vw, 66px);
      font-size: clamp(30px, 6vw, 45px);
      font-weight: 400;
      letter-spacing: var(--letter-spacing-xl);
      color: var(--white);
    }
  }

  main {
    background-color: var(--white);

    #heading {
      display: flex;

      & > div {
        min-width: 0;
        max-width: 50%;
      }

      .content {
        display: flex;
        flex-direction: column;
        row-gap: 30px;
        padding: 70px 3% 100px;

        .title {
          line-height: clamp(37px, 6vw, 54px);
          font-size: clamp(28px, 6vw, 40px);
          font-weight: 700;
          letter-spacing: var(--letter-spacing-xl);
          color: var(--gray);
        }

        .separator {
          width: 100px;
          border-top: 2px solid var(--teal);
          margin: 5px 0;
        }

        .text {
          line-height: 34px;
          font-size: 16px;
          font-weight: 300;
          color: var(--gray-light);
        }
      }

      .image {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;

        img {
          max-height: 400px;
          border-radius: 20px;
          box-shadow: 0 0 7px #000000;
        }
      }

      @media (max-width: 1024px) {
        flex-direction: column;

        & > div { width: 100%; max-width: 100%; }

        .content { padding: 70px 6%; }

        .image { display: none; }
      }
    }

    #workspace {
      display: flex;
      flex-direction: column;
      row-gap: 60px;
      padding: 60px 3% 120px;
      background-color: var(--off-white);

      .title {
        line-height: clamp(37px, 6vw, 54px);
        font-size: clamp(28px, 6vw, 40px);
        font-weight: 700;
        letter-spacing: var(--letter-spacing-xl);
        color: var(--gray);
      }

      .photos {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 65px;
        column-gap: 75px;

        img {
          max-width: 600px;
          border-radius: 20px;
          box-shadow: 0 0 7px #000000;
        }

        @media (max-width: 1370px) {
          row-gap: 50px;

          img {
            max-width: 75%;

            @media (max-width: 768px) {
              max-width: 90%;
            }
          }
        }
      }
    }

    #join {
      display: flex;
      flex-direction: column;
      row-gap: 20px;
      align-items: center;
      padding: 60px 35px;
      background-image: url("/static/img/careers-bg-1.jpg");
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-size: cover;

      .title {
        line-height: clamp(44px, 6vw, 78px);
        font-size: clamp(34px, 6vw, 60px);
        font-weight: 700;
        letter-spacing: var(--letter-spacing-xl);
        color: var(--white);
      }

      .caption {
        line-height: 36px;
        font-size: 25px;
        font-weight: 300;
        color: var(--white);
      }

      .title,
      .caption {
        text-align: center;
      }

      .link {
        a {
          background-color: transparent;
          border: 1px solid var(--white);
          text-transform: uppercase;

          &:hover { background-color: var(--teal); }
        }
      }
    }
  }
}
*/

/*-------------------------------------*/
/*-----  ABOUT PAGE  ------------------*/
/*-------------------------------------*/


#about {
  div.banner {
    display: flex;
    align-items: center;
    height: 100px;
    padding: 0 60px;
    background-image: url("/static/img/banner-bg-1.jpg");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;

    .title {
      line-height: clamp(45px, 6vw, 66px);
      font-size: clamp(30px, 6vw, 45px);
      font-weight: 400;
      letter-spacing: var(--letter-spacing-xl);
      color: var(--white);
    }
  }

  main {
    background-color: var(--white);

    #section-1 .image {
      background-image: url("/static/img/about-bg-1.jpg");
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-size: cover;
    }

    #section-2 .image {
      background-image: url("/static/img/about-bg-2.jpg");
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-size: cover;
    }

    @media (max-width: 1024px) {
      #section-2 {
        .content { order: 1; }
        .image {
          order: 2;
          margin-bottom: 60px;
        }
      }
    }

    .section {
      display: flex;

      & > div {
        min-width: 0;
        max-width: 50%;
        width: 50%;
      }

      .content {
        display: flex;
        flex-direction: column;
        row-gap: 20px;
        padding: 100px 3%;

        .title {
          line-height: clamp(37px, 6vw, 54px);
          font-size: clamp(28px, 6vw, 40px);
          font-weight: 700;
          letter-spacing: var(--letter-spacing-xl);
          color: var(--gray);
        }

        .separator {
          width: 100px;
          border-top: 2px solid var(--teal);
          margin: 5px 0;
        }

        .text,
        .caption {
          line-height: 34px;
          font-size: 16px;
          font-weight: 300;
          color: var(--gray-light);
        }

        ul {
          display: flex;
          flex-direction: column;
          row-gap: 15px;

          li {
            display: flex;
            column-gap: 15px;
            align-items: center;

            span {
              color: var(--gray-light);

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

      .image {
        min-height: 500px;
      }

      @media (max-width: 1024px) {
        flex-direction: column;

        & > div { width: 100%; max-width: 100%; }

        .content { padding: 100px 6%; }
      }
    }

    #discover {
      display: flex;
      flex-direction: column;
      row-gap: 20px;
      align-items: center;
      padding: 80px 30px 60px;
      background-image: url("/static/img/about-bg-3.jpg");
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-size: cover;

      .title {
        line-height: clamp(44px, 6vw, 78px);
        font-size: clamp(34px, 6vw, 60px);
        font-weight: 700;
        letter-spacing: var(--letter-spacing-xl);
        color: var(--white);
      }

      .link {
        a {
          /*background-color: transparent;
          border: 1px solid var(--white);*/
          text-transform: uppercase;

          /*&:hover { background-color: var(--teal); }*/
        }
      }
    }
  }
}


/*-------------------------------------*/
/*-----  CONTACT PAGE  ----------------*/
/*-------------------------------------*/


#contact {
  div.banner {
    display: flex;
    align-items: center;
    height: 100px;
    padding: 0 60px;
    background-image: url("/static/img/banner-bg-1.jpg");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;

    .title {
      line-height: clamp(45px, 6vw, 66px);
      font-size: clamp(30px, 6vw, 45px);
      font-weight: 400;
      letter-spacing: var(--letter-spacing-xl);
      color: var(--white);
    }
  }

  main {
    background-color: var(--white);

    .section {
      display: flex;

      & > div {
        min-width: 0;
        max-width: 50%;
      }

      .content {
        display: flex;
        flex-direction: column;
        row-gap: 20px;
        padding: 100px 3% 270px;

        .title {
          line-height: clamp(37px, 6vw, 54px);
          font-size: clamp(28px, 6vw, 40px);
          font-weight: 700;
          letter-spacing: var(--letter-spacing-xl);
          color: var(--gray);
        }

        .separator {
          width: 100px;
          border-top: 2px solid var(--teal);
          margin: 5px 0;
        }

        .text {
          line-height: 34px;
          font-size: 16px;
          font-weight: 300;
          color: var(--gray-light);
          margin-top: 40px;

          a { color: var(--teal); }
        }

        .sub-heading,
        .highlight {
          color: var(--gray);
          line-height: 30px;
          font-size: 20px;
        }

        .sub-heading { margin-top: 40px; }
      }

      @media (max-width: 1600px) {
        .content { padding: 100px 3% 170px; }
      }

      @media (max-width: 1024px) {
        flex-direction: column;

        & > div { width: 100%; max-width: 100%; }

        .content {
          padding: 100px 6%;

          .text { margin-top: 0; }

          .sub-heading,
          .highlight {
            text-align: center;
          }
        }
      }
    }
  }
}


/*-------------------------------------*/
/*-----  FOOTER  ----------------------*/
/*-------------------------------------*/


footer {
  position: relative;
  padding: 40px 30px 60px;
  background-color: var(--footer-bg-color);
  color: var(--footer-text-color);
  border-top: var(--footer-border-size) solid var(--footer-border-color);

  .content {
    display: flex;
    flex-direction: column;
    row-gap: 25px;
    align-items: center;
    justify-content: center;

    .info {
      display: flex;
      column-gap: 10px;
      font-size: var(--footer-text-size);
    }

    .links {
      display: flex;
      column-gap: 15px;
      align-items: center;

      a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 45px;
        width: 45px;
        border-radius: 50%;
        background-color: var(--footer-border-color);

        i { color: var(--footer-text-color) }

        @media (hover: hover) and (pointer: fine) {
          &:hover {
            i { color: var(--icon-color); }
          }
        }
      }
    }
  }
}