:root {
   --black: black;
   --white: white;
   --whitesmoke: whitesmoke;
   --lightgray: lightgray;
   --darkgray: #4a4a4a;
   --lightblue: #dcefff;
   --mediumblue: #7dc2fb;
   --blue: #1a73e8;
   --custom-ease-out: cubic-bezier(0.20, 1, 0.20, 1);
   --no-clip: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
   --small-clip: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%);
}

/* ---------- */

/* loading animation ----- */
#overlay {
   position: absolute;
   inset: 0;
   background-color: var(--lightblue);
   z-index: 10;
   display: grid;
   align-content: center;
   justify-content: center;
   opacity: 1;
   transition: opacity .3s;
}

#overlay.hide {
   opacity: 0;
}

#overlay p span {
   display: inline-block;
   animation: loading 2s var(--custom-ease-out) infinite;
}

#overlay p span:nth-child(2) { animation-delay: 50ms; }
#overlay p span:nth-child(3) { animation-delay: 100ms; }
#overlay p span:nth-child(4) { animation-delay: 150ms; }
#overlay p span:nth-child(5) { animation-delay: 200ms; }
#overlay p span:nth-child(6) { animation-delay: 250ms; }
#overlay p span:last-child { animation-delay: 300ms; }

@keyframes loading {
   0% {
      transform: translateY(5px);
      opacity: 0;
   }
   25% {
      transform: translateY(0px);
      opacity: 1;
   }
   75% {
      transform: translateY(0px);
      opacity: 1;
   }
   100% {
      transform: translateY(-5px);
      opacity: 0;
   }
}
/* ----- loading animation */

/* ---------- */

/* link underline effect ----- */
.link {
   position: relative;
   display: inline-block;
   color: var(--blue);
   text-decoration: none;
}

.link::before {
   content: '';
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   height: 1px;
   background: currentColor;
   transform-origin: 100% 50%;
   transform: scale3d(0, 1, 1);
   transition: transform 0.3s;
}

.link:hover::before {
   transform-origin: 0% 50%;
   transform: scale3d(1, 1, 1);
}
/* ----- link underline effect */

/* ---------- */

/* h1 animation ----- */
h1 span {
   display: inline-block;
   transform: translateY(50px);
   opacity: 0;
   transition-property: transform, opacity;
   transition-duration: 1s;
   transition-timing-function: cubic-bezier(0.165, 0.85, 0.45, 1);
   transition-delay: 300ms;
}

h1 span.reveal-line {
   transform: translateY(0px);
   opacity: 1;
}
/* ----- h1 animation */

/* ---------- */

/* slides reveal animation ----- */
.splide {
   transform: translateY(50px);
   opacity: 0;
   transition-property: transform, opacity;
   transition-duration: 1s;
   transition-timing-function: cubic-bezier(0.165, 0.85, 0.45, 1);
   transition-delay: 600ms;
}

.splide.reveal-slides {
   transform: translateY(0);
   opacity: 1;
}
/* ----- slides reveal animations */

/* ---------- */

/* acc. animations ----- */
.service .title {
   cursor: pointer;
}

.service .title h3 {
   transition: color 300ms;
}

.service .title svg {
   transition-property: color, transform;
   transition-duration: 300ms;
}

.service .content {
   transition: height 500ms var(--custom-ease-out);
}

.service.open .title h3 {
   color: var(--blue);
}

.service.open .title svg {
   color: var(--blue);
   transform: rotate(180deg);
}
/* ----- acc. animations */

/* ---------- */

/* generic classes ----- */
.f {
   display: flex;
}

.f-c {
   flex-direction: column;
}

.g-20 {
   gap: 20px;
}

.p-x {
   padding: 0 20px;
}

.btn {
   display: inline-block;
   padding: 10px 20px;
   color: var(--white);
   background-color: var(--blue);
   border: 1px solid var(--blue);
   text-decoration: none;
   transition-property: color, background-color;
   transition-duration: .3s;
}

.btn:active,
.btn:focus,
.btn:hover {
   color: var(--blue);
   background-color: transparent;
}
/* ----- generic classes */

/* ---------- */

@media screen and (min-width:0px) {
   body {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      color: var(--darkgray);
   }

   h1,
   h2,
   h3 {
      margin: 0;
      padding: 0;
      color: var(--black);
      font-weight: 600;
      letter-spacing: -0.05em;
   }

   p,
   ul {
      margin: 0;
      padding: 0;
      line-height: 1.5em;
   }

   figure {
      margin: 0;
      overflow: hidden;
   }
   figure img {
      margin-bottom: -5px;
   }

   img {
      width: 100%;
      height: auto;
   }

   /* header ----- */
   header {
      align-items: center;
      justify-content: space-between;
      padding: 20px 20px 0 20px;
   }

   .logo img {
      position: relative;
      width: 50px;
      z-index: 9;
   }

   .toggle {
      position: relative;
      z-index: 9;
   }

   .toggle .top-bar,
   .toggle .bottom-bar {
      display: inline-block;
      width: 20px;
      height: 2px;
      background-color: var(--black);
      transition: transform .3s var(--custom-ease-out);
   }

   .toggle .top-bar {
      transform: translateY(-2px);
   }
   .toggle .bottom-bar {
      transform: translateY(2px);
   }

   .toggle.visible .top-bar {
      transform: translateY(1px) rotate(-45deg);
   }
   .toggle.visible .bottom-bar {
      transform: translateY(-1px) rotate(45deg);
   }

   nav {
      position: fixed;
      inset: 0;
      overflow-y: auto;
      justify-content: space-between;
      padding: 100px 20px 20px 20px;
      background-color: var(--lightblue);
      z-index: 8;
      transform: translate3d(100%, 0, 0);
      transition: transform 1s var(--custom-ease-out);
   }
   .toggle.visible + nav {
      transform: translate3d(0, 0, 0);
   }

   nav .pages {
      font-size: 30px;
   }

   nav .pages a[href="#"]::after {
      content: '❮';
      margin-left: 20px;
      font-size: 15px;
      height: 100%;
      vertical-align: middle;
   }

   nav .contact-info {
      justify-content: space-between;
      flex-wrap: wrap;
      padding-top: 20px;
      font-weight: 600;
      border-top: 1px solid var(--mediumblue);
   }
   /* ----- header */

   /* hero section ----- */
   .hero-section {
      margin-top: 150px;
   }

   .hero-section h1 {
      font-size: 30px;
      font-weight: 400;
   }

   .hero-section .splide {
      margin: 100px 0 50px 0;
   }
   /* ----- hero section */

   /* about section ----- */
   .about-section h2 {
      font-size: 20px;
   }

   .about-section h3 {
      font-size: 50px;
      font-weight: 900;
   }

   .about-section > div {
      gap: 30px;
   }

   .about-section > div > div {
      gap: 15px;
   }

   .about-section .btn {
      margin-top: 50px;
   }
   /* ----- about section */

   /* services section ----- */
   .services-section {
      margin-top: 100px;
      padding-top: 100px;
      background-color: var(--lightblue);
   }

   .services-section h2 {
      font-size: 20px;
      margin-bottom: 50px;
   }

   .services-section .services {
      gap: 30px;
   }

   .services .title {
      display: inline-block;
   }

   .services-section h3 {
      display: inline-block;
      font-size: 18px;
      font-weight: 400;
   }

   .services .chevron-down {
      fill: var(--lightgray);
      width: 15px;
      margin-left: 5px;
   }

   .services .content {
      overflow: hidden;
   }

   .services .content .icon {
      fill: var(--darkgray);
      width: 25px;
      padding: 10px 0;
   }

   .service .content p {
      padding-bottom: 15px;
   }

   .services .content ul {
      padding-left: 20px;
      padding-top: 10px;
   }
   /* ----- services section */

   /* clients section ----- */
   .clients-section {
      background-color: var(--lightblue);
      padding: 50px 0 100px 0;
   }

   .clients {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 25px;
      row-gap: 50px;
      align-items: center;
      justify-items: center;
      margin-bottom: 50px;
   }

   .clients img {
      max-width: 100px;
   }
   /* ----- clients section */

   /* portfolio section ----- */
   .portfolio-section {
      margin: 100px 0;
   }

   .portfolio-item {
      box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
      border-radius: 5px;
      margin-bottom: 75px;
      transition: background-color 300ms;
   }

   .portfolio-item:active,
   .portfolio-item:focus,
   .portfolio-item:hover {
      background-color: var(--lightblue);
   }

   .portfolio-item:hover figure.in-view img {
      transform: scale(1.125);
   }

   .portfolio-item h3 {
      padding: 0 10px 10px 10px;
      font-size: 18px;
      font-weight: 900;
      letter-spacing: -0.025em;
   }

   .portfolio-item figure {
      border: 1px solid var(--lightblue);
      border-radius: 5px 5px 0 0;
   }

   .portfolio-item img {
      transform: scale(1.125);
      transition: transform 750ms;
   }

   .portfolio-item figure.in-view img {
      transform: scale(1);
   }

   .portfolio-item h3 {
      margin-top: 15px;
   }
   /* ----- portfolio section */

   /* footer ----- */
   footer {
      padding: 100px 0 20px 0;
      color: var(--whitesmoke);
      background-color: #212129;
   }

   footer h2 {
      font-size: 20px;
      color: var(--white);
   }

   footer .link {
      color: var(--mediumblue);
   }

   footer .arrow-forward {
      display: block;
      width: 25px;
      margin: -5px;
      align-self: flex-end;
      color: var(--white);
      transform: rotate(135deg);
   }

   footer hr {
      margin: 0;
      border: 0;
      border-top: 1px solid var(--lightgray);
   }

   footer .contact-info {
      padding: 50px 0;
   }

   footer .copyright {
      align-items: center;
      justify-content: space-between;
   }
   /* ----- footer */

   /* OTHER pages ----- */
   .clients-page main,
   .work-page main {
      margin: 100px 0;
   }

   .clients-page .clients-section {
      background-color: transparent;
      padding-bottom: 0;
   }

   .clients-page h1,
   .work-page h1 {
      font-size: 30px;
      font-weight: 900;
   }

   .clients-hero-section h1 {
      margin-bottom: 25px;
   }
   /* ----- OTHER pages */
}

/* ---------- */

@media screen and (min-width:480px) {
   .hero-section h1,
   .clients-page h1,
   .work-page h1 {
      font-size: 40px;
   }

   .hero-section .splide {
      padding: 0 20px;
   }

   .services-section h2,
   footer h2 {
      font-size: 22px;
   }

   .services h3,
   .portfolio-item h3 {
      font-size: 20px;
   }

   .clients {
      grid-template-columns: 1fr 1fr 1fr;
   }

   .clients-section > div > .f {
      justify-content: center;
   }
}

@media screen and (min-width:768px) {
   .toggle {
      display: none;
   }

   nav {
      position: inherit;
      overflow: hidden;
      padding: 0;
      background-color: transparent;
      transform: translate3d(0, 0, 0);
   }

   nav .pages {
      flex-direction: row;
      gap: 50px;
      padding: 0 0 1px 0;
      font-size: 1.125rem;
   }

   nav .pages a[href="#"]::after {
      display: none;
   }

   nav .contact-info {
      display: none;
   }

   .hero-section h1,
   .clients-page h1,
   .work-page h1 {
      font-size: 50px;
   }

   .hero-section {
      margin-top: 225px;
   }

   .hero-section .splide {
      margin-bottom: 100px;
   }

   .about-section > div {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
   }

   .about-section h2 {
      font-size: 24px;
   }

   .services-section > div {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
   }

   .services-section h2 {
      font-size: 24px;
      text-align: right;
   }

   .services h3 {
      font-size: 22px;
   }

   .clients {
      margin: 50px 0 75px 0;
   }

   .clients img {
      max-width: 125px;
   }

   .portfolio-section > div > .projects {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 50px;
      row-gap: 100px;
      align-items: center;
      justify-items: center;
   }

   .portfolio-section > div > .f {
      justify-content: center;
      margin-top: 75px;
   }

   .portfolio-item {
      margin: 0;
   }

   .portfolio-item[data-order="1"] {
      width: 70%;
   }

   .portfolio-item[data-order="1"]:nth-child(odd) {
      margin-top: 200px;
   }
   .portfolio-item[data-order="1"]:nth-child(even) {
      margin-top: -200px;
   }

   .portfolio-item[data-order="0"]:nth-child(odd) {
      margin-top: 200px;
   }
   .portfolio-item[data-order="0"]:nth-child(even) {
      margin-top: -200px;
   }

   footer h2 {
      font-size: 30px;
   }
   
   footer .contact-info {
      flex-direction: row;
      justify-content: space-between;
   }
}

/* ---------- */

@media screen and (min-width:1200px) {
   header,
   .hero-section > div,
   .clients-hero-section > div,
   .work-hero-section > div,
   .hero-section .splide,
   .about-section,
   .services-section > div,
   .clients-section > div,
   .portfolio-section > div,
   footer > div {
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
   }

   nav .pages {
      font-size: 1.25rem;
   }

   .hero-section h1,
   .clients-page h1,
   .work-page h1 {
      font-size: 60px;
   }

   .hero-section {
      margin-top: 300px;
   }

   .about-section h3 {
      font-size: 60px;
   }

   .services-section {
      margin-top: 150px;
      padding-top: 150px;
   }

   .services-section h3 {
      font-size: 24px;
   }

   .clients-section {
      padding-bottom: 150px;
   }

   .portfolio-section {
      margin: 150px 0;
   }

   .portfolio-section > div > .projects {
      row-gap: 150px;
   }

   .portfolio-item h3 {
      font-size: 22px;
   }

   footer {
      padding-top: 150px;
   }

   footer h2 {
      font-size: 40px;
   }

   /* OTHER pages ----- */
   .clients-page main,
   .work-page main {
      margin: 150px 0;
   }
   /* ----- OTHER pages */
}