:root {
   --black: #2a2a2a;
   --white: #ffffff;
   --darkgray: #4a4a4a;
   --whitesmoke: #f5f5f5;
   --lightblue: #dcefff;
   --medium-blue: #1a73e8;
}

body {
   max-width: 1400px;
   min-width: 320px;
   margin: auto;
   font-family: 'Inter', sans-serif;
   font-size: 16px;
   color: var(--darkgray);
}

article {
   padding: 20px 0;
   overflow-x: hidden;
}

header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
}

.logo {
   width: 50%;
   z-index: 9;
}

.menu {
   width: 50%;
   display: flex;
   justify-content: flex-end;
}

.toggle {
   display: none;
}

h1,
h2,
h3,
p b {
   color: var(--black);
}

h1{
   font-weight: 400;
}

/*h1 span {*/
/*   transform: translateY(50px);*/
/*   opacity: 0;*/
/*}*/

p span {
    opacity: 0;
}

figure {
   margin: 0;
   padding: 0;
   overflow: hidden;
}

img {
   width: 100%;
   height: auto;
   clip-path: polygon(15% 15%, 85% 15%, 85% 85%, 15% 85%);
   transform: scale(1.25);
   transition: 1s;
}

figure img {
   margin-bottom: -5px;
}

/* GENERIC CLASSES */
.set-padding {
   padding: 0 20px;
}

.small-margin {
   margin: 50px 0 0 0;
}

.medium-margin {
   margin: 100px 0 0 0;
}

.large-margin {
   margin: 150px 0 0 0;
}

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

.link::before,
.services-section h3 span::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 1px;
   background: currentColor;
   top: 100%;
   left: 0;
   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);
}

img.in-view {
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   transform: scale(1);
}

.h-style:hover img {
   transform: scale(1.25);
}

.h-style:hover h3 span::before {
   transform-origin: 0% 50%;
   transform: scale3d(1, 1, 1);
}

#overlay {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: var(--lightblue);
   z-index: 10;
   display: flex;
   align-items: center;
   justify-content: center;
}

#overlay p span {
   display: inline-block;
}

#overlay p span:first-child {
   animation: loading 2s ease-out infinite;
}
#overlay p span:nth-child(2) {
   animation: loading 2s ease-out .1s infinite;
}
#overlay p span:nth-child(3) {
   animation: loading 2s ease-out .2s infinite;
}
#overlay p span:nth-child(4) {
   animation: loading 2s ease-out .3s infinite;
}
#overlay p span:nth-child(5) {
   animation: loading 2s ease-out .4s infinite;
}
#overlay p span:nth-child(6) {
   animation: loading 2s ease-out .5s infinite;
}
#overlay p span:last-child {
   animation: loading 2s ease-out .6s infinite;
}

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

@media screen and (min-width: 320px) and (max-width: 768px) {
   .toggle {
      display: flex;
      flex-direction: column;
      padding: 7px 0;
      z-index: 9;
   }
   .toggle .top-bar,
   .toggle .bottom-bar {
      display: inline-block;
      width: 20px;
      height: 2px;
      background-color: var(--black);
      transition: .3s;
   }
   .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;
      top: 0;
      right: -28%;
      bottom: 0;
      left: 100%;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 75px 20px;
      background-color: var(--lightblue);
      z-index: 8;
      transition: 1s cubic-bezier(0.20, 1, 0.20, 1);
   }
   .toggle.visible + nav {
      right: 0;
      left: 0;
   }

   h1 {
      font-size: 30px;
      margin: 175px 0 100px 0;
   }
   h2 {
      font-size: 25px;
   }
   h3 {
      font-size: 20px;
   }

   .services-section {
      padding-bottom: 150px;
   }
   .services-section h3 {
      margin: 0;
      padding-top: 20px;
   }

   footer {
      padding-top: 150px;
      padding-bottom: 20px;
      background-color: var(--lightblue);
      margin-bottom: -20px;
   }
   .contact-info {
      display: flex;
      flex-direction: column;
      gap: 25px;
   }
   .copyright {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 50px;
   }
}