body {

  margin: 0;

  font-size: 18px;

  overflow-x: hidden;



  /*&::before {

    content: "";

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    background: radial-gradient(circle at 70% 50%,

        rgba(0, 255, 100, 0.2),

        transparent 60%);

    z-index: -1;

    pointer-events: none;

  }*/



  --header-height: 90px;



  header {

    padding: 0 50px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

    height: var(--header-height);

    position: fixed;

    width: 100vw;

    background: linear-gradient(to bottom,

        rgba(0, 0, 0, 0.82) 0%,

        rgba(0, 0, 0, 0.5) 50%,

        rgba(0, 0, 0, 0.05) 94%,

        rgba(0, 0, 0, 0.01) 97%,

        rgba(0, 0, 0, 0) 100%);

    top: 0;

    z-index: 100;

    color: white;



    .logo {

      height: 50px;

      filter: invert(1);

    }



    nav {

      ul {

        display: flex;

        gap: 60px;



        li {

          transition: 300ms;

          padding: 3px 5px;



          &:hover {

            background-color: var(--primary);

            color: var(--on-primary);

          }

        }

      }

    }



    a {

      text-decoration: none;

    }



    #menu-toggler {

      display: none;

      height: 30px;

    }

  }



  main {

    margin-top: var(--header-height);



    #landing {

      height: calc(100vh - var(--header-height));

      display: flex;

      justify-content: center;

      align-items: center;

      flex-direction: column;

      color: var(--on-inversed-surface);



      h1 {

        font-size: 75px;

        font-weight: bolder;

        margin: 0;

        color: var(--primary);

      }



      p {

        font-size: 25px;

        max-width: 700px;

        color: var(--on-inversed-surface);

        margin: 0;

        text-align: center;

      }



      a {

        color: var(--on-inversed-surface);

      }



      &::before {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        width: 100vw;

        height: 100vh;

        /* background: radial-gradient(circle at 70% 50%, rgba(0, 255, 100, 0.2), transparent 100%); */

        background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../assets/images/landing_2.jpg");

        z-index: -1;

        pointer-events: none;

        background-size: cover;

        background-position: center;

      }

    }



    #about {

      #statements {

        hgroup {

          --border-radius: 20px;

          background-image: linear-gradient(to top, black, transparent 80%);

          border-radius: var(--border-radius);

          padding: 3px;

          transition: 300ms;

          margin-bottom: 40px;

          max-width: 60%;

          margin-right: auto;



          &:nth-child(even) {

            margin-left: auto;

            margin-right: 0;



            h3 {

              text-align: right;

            }

          }



          h3 {

            padding: 30px;

            padding-bottom: 20px;

            background-color: white;

            font-size: 30px;

          }



          p {

            padding: 30px;

            padding-top: 0;

            margin: 0;

            background-color: white;

            border-radius: 0 0 var(--border-radius) var(--border-radius);

            transition: 300ms;

            text-align: justify;

          }



          &:hover {

            --border-radius: 0px;

          }

        }

      }

    }



    #services {

      h2 {

        margin-bottom: 50px;

      }



      ul {

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 20px;



        li {

          aspect-ratio: 1;

          padding: 40px;

          display: flex;

          flex-direction: column;

          justify-content: end;

          border: 1px solid var(--surface);

          border-radius: 2px;

          transition: 500ms;



          &:first-child {

            grid-column: 2;

          }



          &:hover {

            border-radius: 50px;

          }



          * {

            font-size: 1em;

            text-align: left;

          }

        }

      }

    }



    #clients {

      .auto-scroll {

        --scrolling-duration: 30s;

        display: flex;

        margin-top: 80px;

        mask-image: linear-gradient(to right, transparent, black 25%, black 75%, transparent);



        ul {

          display: flex;

          list-style: none;

          height: 80px;

          margin: 0;

          padding: 0;



          &:first-child {

            animation: x-scroll-left var(--scrolling-duration) linear infinite;

          }



          &:last-child {

            animation: x-scroll-2-right var(--scrolling-duration) linear infinite;

          }



          img {

            height: 100%;

            user-select: none;

            margin: 0 30px;

            user-select: none;

            -moz-user-select: none;

            -webkit-user-drag: none;

            -webkit-user-select: none;

          }

        }

      }

    }



    #achievements {

      ul {

        display: flex;

        align-items: start;

        justify-content: space-between;



        li {

          text-align: center;

        }



        .metric {

          font-weight: bold;

          font-size: 85px;

          margin: 0 0 10px 0;



          &::after {

            content: "+";

            position: absolute;

            font-size: 0.5em;

            margin-top: 6px;

          }

        }



        .metric+* {

          margin: 0;

        }

      }

    }

  }



  footer {

    .footer-grid {

      display: flex;

      justify-content: space-between;

      align-items: start;

      padding: 80px 50px;



      .logo {

        filter: invert(1);

        height: 100px;

      }



      h4 {

        text-align: left;

        font-size: 25px;

        margin-bottom: 20px;

      }



      ul {

        li {

          margin-bottom: 10px;

          transition: 300ms;



          &:hover {

            color: var(--primary);

          }



          img {

            filter: invert(1);

            height: 1.1em;

            margin-bottom: -3px;

            margin-right: 5px;

          }

        }

      }

    }



    .copyright {

      border-top: 1px solid #4f4f4f;

      color: #4f4f4f;

      text-align: center;



      p {

        margin: 0;

        padding: 20px 40px;

      }

    }

  }

}



@media (max-width: 1200px) {}



@media (max-width: 992px) {

  #services {

    ul {

      grid-template-columns: repeat(2, 1fr) !important;



      li {

        aspect-ratio: unset !important;



        &:first-child {

          grid-column: 1 !important;

        }

      }

    }

  }

}



@media (max-width: 768px) {

  h2 {

    font-size: 35px !important;

  }



  #statements hgroup {

    max-width: 100% !important;

  }



  #achievements ul {

    flex-direction: column !important;

    justify-content: center !important;

    align-items: center !important;

    gap: 50px !important;

  }



  footer .footer-grid {

    flex-direction: column !important;

    align-items: center !important;

    gap: 50px !important;



    h4 {

      text-align: center !important;

    }

  }

}



@media (max-width: 576px) {

  body {

    --header-height: 90px;

  }



  header {

    padding: 10px 30px !important;



    #menu-toggler {

      display: inline !important;

      cursor: pointer;

    }



    nav {

      display: none !important;

    }



    &.expanded {

      background: #242424b8;



      nav {

        display: block !important;

        position: fixed;

        top: var(--header-height);

        background-color: inherit;

        width: 100vw;

        left: 0px;

        padding: 20px 10px;

        padding-top: 0;



        ul {

          gap: 10px;

          flex-direction: column;

          align-items: center;

        }

      }

    }

  }



  #services ul {

    grid-template-columns: repeat(1, 1fr) !important;

  }

}



@keyframes x-scroll-left {

  from {

    transform: translateX(0%);

  }



  to {

    transform: translateX(100%);

  }

}



@keyframes x-scroll-2-right {

  from {

    transform: translateX(-200%);

  }



  to {

    transform: translateX(-100%);

  }

}