@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;500&display=swap");
* {
  box-sizing: border-box;
}

html, body {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.8);
  line-height: 160%;
  background: #EAEAEA;
  width: 100%;
  height: 100%;
}

h1, h2, h3 {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.5);
  line-height: 150%;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.container {
  max-width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.875em;
  position: relative;
  overflow-y: auto;
}

#preview {
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.9);
  padding: 1.5rem;
  display: none;
}
#preview #overlay {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
#preview #overlay #preview-box {
  padding: 1rem;
  background: white;
  border-radius: 5px;
  opacity: 0;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
}
#preview #overlay #preview-box .pb-row {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#preview #overlay #preview-box .pb-row #pb-title {
  color: rgba(0, 0, 0, 0.4);
  padding-bottom: 0.5rem;
}
#preview #overlay #preview-box .pb-row .fa-xmark {
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

header {
  width: 100%;
  height: auto;
}
header nav {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
header nav img {
  max-width: 4.0625em;
}
header nav ul {
  list-style: none;
  padding: 0px;
  margin: 0;
}
header nav a {
  display: block;
  text-decoration: none;
  font-weight: 500;
  color: white;
  background: #422D82;
  padding: 0.3125em 0.625em;
  border-radius: 0.3125em;
  box-shadow: 0em 0.12em 0.25em rgba(0, 0, 0, 0.25);
}

main {
  height: auto;
  max-width: 100%;
  min-width: 100%;
  position: relative;
}
main #introduction {
  height: 90vh;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
main #introduction #intro-photo {
  max-width: 9.625em;
  height: auto;
  padding: 0.9375em 0;
  margin: auto;
}
main #introduction #intro-photo img {
  border-radius: 60%;
  box-shadow: 0 0.3125em 0.1875em 0em rgba(0, 0, 0, 0.1);
}
main #introduction h1 {
  font-size: 2.25em;
  color: #08AADC;
  text-align: center;
}
main #introduction h2 {
  font-size: 1.25em;
  text-align: center;
}
main #introduction p {
  padding: 0.9375em 1.25em;
  text-align: center;
}
main #introduction p a {
  font-weight: 500;
  text-decoration: none;
  color: #422D82;
}
main #introduction ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  gap: 1.5625em;
  padding: 1.5625em 0 0 0;
  margin: 0;
}
main #introduction ul li {
  display: block;
  font-size: 1.5em;
  padding: 0.5em;
  background: #D9D9D9;
  border-radius: 50%;
}
main #introduction ul li a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.4);
}
@media screen and (min-width: 40em) {
  main #introduction #intro-photo {
    max-width: 12.5em;
  }
  main #introduction p {
    font-size: 1.125em;
    padding: 0.9375em 2.5em;
  }
}
@media screen and (min-width: 56.25em) {
  main #introduction h2 {
    font-size: 1.5625em;
  }
  main #introduction p {
    max-width: 25em;
    font-size: 1.25em;
  }
}
main #services {
  padding: 0 1.25em 1.25em 1.25em;
}
main #services h3 {
  font-size: 1.25em;
  text-align: center;
}
main #services p {
  line-height: 150%;
  padding: 0.625em 0;
  text-align: center;
}
main #services .card {
  padding: 0.625em;
  margin: 1.25em 0;
  background-color: white;
  border-radius: 0.9375em;
  box-shadow: 0 0.3125em 0.1875em 0em rgba(0, 0, 0, 0.1);
}
main #services .card img {
  max-width: 5.875em;
  margin: auto;
}
main #services .card h3 {
  color: #08AADC;
}
main #services .card h4 {
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
  padding: 0.3125em 0 0 0;
}
main #services .card p {
  padding: 0 0.625em;
}
main #services .card ul {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0.3125em 0 0.625em 0;
  color: rgba(0, 0, 0, 0.5);
}
@media screen and (min-width: 40em) {
  main #services .card p {
    padding: 0 2.5em;
  }
}
@media screen and (min-width: 56.25em) {
  main #services p {
    max-width: 28.125em;
    margin: auto;
  }
  main #services .card-wrap {
    display: flex;
    flex-direction: row;
    gap: 0.625em;
    justify-content: center;
  }
}
@media screen and (min-width: 65.625em) {
  main #services .card-wrap {
    max-width: 59.375em;
    margin: auto;
    gap: 1.25em;
  }
}
main #work h3 {
  text-align: center;
}
main #work .work-wrap {
  margin-top: 0.9375em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0.9375em;
}
main #work .work-wrap img {
  cursor: pointer;
  max-width: 100%;
  height: auto;
  border-radius: 0.3125em;
  box-shadow: 0 0.3125em 0.1875em 0em rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 48em) {
  main #work .work-wrap img {
    max-width: 31.25em;
  }
}
@media screen and (min-width: 56.25em) {
  main #work .work-wrap {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  main #work .work-wrap img {
    box-shadow: none;
    margin-top: -0.625em;
  }
  main #work .work-wrap div {
    max-width: 23.125em;
    max-height: 11.875em;
    overflow-y: hidden;
    border-radius: 0.3125em;
  }
}
@media screen and (min-width: 65.625em) {
  main #work .work-wrap div {
    max-width: 31.25em;
    max-height: 100%;
    align-self: flex-start;
  }
}
@media screen and (min-width: 65.625em) {
  main #services {
    min-height: 90vh;
    padding: 9.375em 0 9.375em 0;
  }
}

footer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0 0 0.625em 0;
}
footer ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  gap: 1.5625em;
  padding: 1.5625em 0 0 0;
  margin: 0;
}
footer ul li {
  display: block;
  font-size: 1.125em;
  padding: 0.3125em 0.625em;
  background: #D9D9D9;
  border-radius: 50%;
}
footer ul li a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.4);
}
@media screen and (min-width: 40em) {
  footer ul li {
    font-size: 1.375em;
    padding: 0.625em;
  }
}/*# sourceMappingURL=style.css.map */