@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
  --black: #171616;
  --gray: #5c5c5c;
  --lightgray: #bfbfbf;
  --accent: #d2ff2e;
  --white: #ffffff;
  --gap: 3rem;
  --section-padding: 6.25rem;
}
.red {
  border: 1px solid red;
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  margin: 0;
  padding: 0 1rem 0 1rem;
}
.block {
  display: block;
}
.hidden {
  visibility: hidden;
}
.none {
  display: none;
}
.h-full {
  max-height: 100%;
}
.h-fit {
  max-height: fit-content;
}
.h-25 {
  height: 25rem;
}
.h-0 {
  max-height: 0;
}
.self-end {
  margin-left: auto;
}
h1,
h2,
h3,
h4,
h5,
h6,
a,
.DM-sans,
.btn-text {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  margin: 0;
}
p {
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
a {
  color: var(--black);
  text-decoration: none;
}
h1 {
  font-size: 3.5rem;
  line-height: 3.5rem;
}
.h2 {
  font-size: 2.813rem;
  line-height: 2.9rem;
}
#featured-btns {
  flex-direction: column;
}

.featured-btns-top {
  display: none;
}
#featured-headings {
  text-align: center;
}
.h3 {
  font-size: 2.188rem;
  line-height: 2.5rem;
}
h4 {
  text-transform: uppercase;
  font-size: 1.125rem;
  letter-spacing: 0.1rem;
}
.h5 {
  font-size: 1.563rem;
}
h6 {
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
  padding: 0;
}
.link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--lightgray);
}
.contact-item p {
  margin: 0;
  padding: 0;
}
.subheadline {
  text-transform: uppercase;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.3rem;
}
#logo {
  white-space: nowrap;
  display: flex;
  justify-content: center;
}
.txt-white {
  color: var(--white);
}
.txt-black {
  color: var(--black);
}
.txt-gray {
  color: var(--gray);
}
.txt-lightgray {
  color: var(--lightgray);
}
.body-bold {
  font-weight: 700;
}
.body-italic {
  font-style: italic;
}
.body-light {
  font-weight: 300;
}
.body-big {
  font-size: 1.375rem;
  line-height: 2rem;
}
.body-txt {
  font-size: 1.25rem;
  line-height: 1.8rem;
}
.body-sm {
  font-size: 0.875rem;
}
section {
  justify-content: center;
  align-items: center;
}
.btn {
  font-size: 1.125rem;
  font-weight: 700;
  padding: 1rem 2.5rem 1rem 2rem;
  border: none;
  border-radius: 2rem;
  gap: 0.5rem;
  white-space: nowrap;
}
.btn-main {
  background-color: var(--accent);
  align-items: center;
  gap: 1rem;
  position: relative;
  transition: all 0.4s ease-in-out;
  border-radius: 100px;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
  z-index: 1;
  backdrop-filter: blur(8px);
}
.btn-main::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, #00ffff, #ff00ff, #00ffff);
  opacity: 0;
  z-index: -2;
  animation: unrotate 3s linear;
}
.btn-main::after {
  content: "";
  position: absolute;
  inset: 2px;
  background-color: var(--accent);
  border-radius: inherit;
  z-index: -1;
}
.btn-main:hover,
.btn-secondary-outer:hover {
  cursor: pointer;
}
.btn-main:hover::before {
  opacity: 1;
  animation: rotate 2s linear;
}
.btn-main > img {
  width: 1rem;
}
.btn-secondary-outer {
  background-color: transparent;
}
.btn-secondary {
  border-bottom: 1px solid var(--gray);
  padding-bottom: 5px;
  gap: 1rem;
  transition: all 0.5s ease-in-out;
}
.btn-secondary:hover .btn-img {
  transform: translateX(6px);
  transition: all 0.5s ease-in-out;
}
.btn-main:hover .btn-img {
  transform: translate(2px, -2px);
  transition: all 0.5s ease-in-out;
}
.btn-main:hover .btn-img-down {
  transform: translateY(4px);
  transition: all 0.5s ease-in-out;
}
.btn-img,
.btn-img-down {
  transition: transform 0.3s ease-in-out;
}
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}
nav {
  width: 100%;
  justify-content: space-between;
  padding: 1rem 0 1rem 0;
  align-items: center;
}
nav > ul {
  list-style: none;
  width: 100%;
  display: none;
  justify-content: flex-end;
  gap: 2rem;
  padding: 0;
}
nav > a {
  width: 100%;
}
ul {
  list-style: none;
  padding: 0;
  font-family: "Inter", sans-serif;
}
#hero {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 3rem 0 3rem 0;
  width: 100%;
  gap: 1rem;
}
#hero > h1,
#hero > p {
  width: 100%;
}
#featured-content {
  padding: 1rem 0 3rem 0;
  flex-direction: column;
  gap: 1rem;
}
#featured-headings {
  gap: 2rem;
}
#featured-img {
  width: 100%;
  height: auto;
}
#featured-content,
#featured-headings,
#featured-body {
  width: 100%;
}
#featured-body {
  text-align: center;
}
.featured-btns-bottom {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
}
.featured-btns-bottom > a,
.featured-btns-bottom > a > div,
.btn-mobile {
  font-size: 1.5rem;
  justify-content: center;
  padding: 1.5rem 1rem 1.5rem 1rem;
}
.featured-btns-bottom .btn-img,
.btn-mobile > .btn-img {
  scale: 1.2;
}
#works {
  background-color: var(--black);
  padding: 5rem;
  margin: 0 -5rem 0 -5rem;
  border: none;
}
#contact {
  background-color: var(--black);
  padding: 3rem 2rem 3rem 2rem;
  margin: 0 -1rem 0 -1rem;
  border: none;
  /* width: 100%; */
}
#works-heading {
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  padding-bottom: 2.5rem;
  text-align: center;
}
#works-heading > h3 {
  width: 100%;
}
#articles {
  width: 100%;
}
.article-work {
  flex-direction: column;
  width: 100%;
  justify-content: center;
  padding: 0;
  height: 10rem;
  overflow: hidden;
}
.article-work.open {
  animation: expand 0.6s ease forwards;
}
.article-work > img {
  width: 100%;
  height: auto;
}

#work-content {
  width: 100%;
  justify-content: space-between;
  border-top: 1px solid var(--white);
  padding-top: 1rem;
  box-sizing: border-box;
  flex-direction: column;
  height: fit-content;
}
#work-content-last {
  width: 50rem;
  justify-content: space-between;
  align-items: center;
  height: 25rem;
  border-top: 1px solid var(--white);
  padding-top: 3rem;
  box-sizing: border-box;
}
.work-tools > span {
  padding-bottom: 0;
  padding-top: 2rem;
}
.work-tools > span:hover {
  cursor: default;
}
.work-title:hover {
  cursor: pointer;
}
.work-copy {
  flex-direction: column;
  justify-content: center;
  width: 100%;
  gap: 2rem;
}
.work-btns {
  flex-direction: column;
}
.work-tools > ul {
  gap: 1rem;
  cursor: default;
  display: none;
}
.work-tools > ul > li:hover {
  color: var(--lightgray);
  cursor: default;
}
#services {
  padding: var(--section-padding) 0 var(--section-padding) 0;
}
#services-heading {
  text-align: center;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding-bottom: 4rem;
}
#services > div > h2 {
  width: 70%;
}
#services > div > h3 {
  width: 100%;
}
.services-items {
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  gap: 2rem;
}
.services-items > article {
  text-align: left;
}
.services-items > article > span {
  display: block;
  padding-bottom: 1rem;
}
.services-items > article > div {
  width: 100%;
}
.service-copy {
  flex-direction: column;
}
#about {
  flex-direction: column;
  padding-bottom: var(--section-padding);
}
#about-upper {
  flex-direction: column;
  width: 100%;
  gap: 1rem;
}
.about-content {
  flex-direction: column;
}
#about-upper > h5 {
  width: 100;
}
#about-lower {
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 2rem;
  gap: 3rem;
}
#about-lower-content {
  gap: 2rem;
}
#about-lower-content > p {
  margin: 0;
}
#about-btns {
  flex-direction: column;
  width: 100%;
  gap: 1rem;
}
footer {
  background-color: var(--black);
  box-sizing: border-box;
}
#contact {
  flex-direction: column;
  justify-content: space-between;
}
#contact-content {
  padding-top: 3rem;
  flex-direction: column;
  gap: 3rem;
  padding-bottom: 2rem;
}
.social-links {
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
  height: fit-content;
}
.socials-item {
  gap: 1rem;
}
.social-item-last {
  margin-top: -2rem;
}
#contact-info,
#socials {
  gap: 1rem;
}
.social-links {
  gap: 4rem;
}
#contact-copy {
  flex-direction: column;
  width: 100%;
}
.contact-item {
  margin: 0;
}
#copyright {
  justify-content: space-between;
}
.stack {
  gap: 5em;
  height: 3em;
  width: auto;
  padding: 0.9em 0;
  opacity: 0.7;
  animation: marquee 120s linear infinite;
}
.stack:hover {
  animation-play-state: paused;
}
.img-stack {
  padding: 0 4rem 0 4rem;
}
#tools-logos {
  padding-bottom: 3rem;
}

/* animations */
@keyframes fadeInUp {
  from {
    transform: translate3d(0, 40px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@-webkit-keyframes fadeInUp {
  from {
    transform: translate3d(0, 40px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
}

.animatedFadeInUp {
  opacity: 0;
}

.fadeInUp {
  opacity: 0;
  animation-name: fadeInUp;
  -webkit-animation-name: fadeInUp;
}

.scroll-down,
.scroll-top {
  border-radius: 20rem;
  transition: all 1s ease-out;
}
.scroll-down {
  border: 1px solid var(--black);
  padding: 1rem;
}
.scroll-down:hover {
  padding: 2rem 1rem;
  border-radius: 10rem;
  transition: all 0.5s ease-out;
}

.scroll-top {
  border: 1px solid var(--white);
  padding: 0.5rem;
}

.scroll-top:hover {
  padding: 1rem 0.5rem;
  transition: all 0.5s ease-out;
}

@keyframes expand {
  from {
    height: 0rem;
  }
  to {
    height: 75rem;
  }
}

@keyframes close {
  from {
    max-height: 25rem;
  }
  to {
    max-height: 10rem;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes unrotate {
  0% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes marquee {
  0% {
    transform: translateX(-10%);
  }
  50% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(-10%);
  }
}

/* breakpoints--------- */

/* big mobile */
@media only screen and (min-width: 430px) {
  body {
    padding: 0 2rem 0 2rem;
  }
  #contact {
    padding: 3rem 3rem 3rem 3rem;
    margin: 0 -2rem 0rem -2rem;
  }
  #featured-img {
    width: 110%;
  }
}

/* ipad */
@media only screen and (min-width: 768px) {
  body {
    padding: 0 2rem 0 2rem;
  }
  #contact {
    padding: 3rem 3rem 3rem 3rem;
    margin: 0 0 2rem 0rem;
    border-radius: 2rem;
  }
  nav > ul {
    display: flex;
  }
  #hero > h1 {
    width: 90%;
  }
  #hero > p {
    width: 80%;
  }
  #hero {
    padding: 4rem 0 2.5rem 0;
  }
  #logo {
    justify-content: flex-start;
  }
  h1 {
    font-size: 4.2rem;
    line-height: 4.2rem;
  }
  .h2 {
    font-size: 3rem;
    line-height: 3.2rem;
  }
  #featured-headings {
    text-align: left;
    width: 50%;
  }
  .featured-btns-top {
    gap: 1rem;
  }
  #featured-content {
    flex-direction: row;
    gap: 4rem;
    padding: 1rem 0 4rem 0;
  }
  .featured-btns-top {
    display: flex;
  }
  .featured-btns-bottom {
    display: none;
  }
  #featured-body {
    text-align: left;
  }
  #works-heading {
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 2.5rem;
    text-align: left;
    gap: 3rem;
    width: 100%;
  }
  #works-heading > div {
    width: 30rem;
  }
  #works-heading > h3 {
    width: 50rem;
  }
  #work-content {
    justify-content: center;
    align-items: flex-start;
    padding-top: 1rem;
    height: fit-content;
    width: 50rem;
  }

  .article-work {
    flex-direction: row;
    justify-content: space-between;
    height: 10rem;
    gap: 3rem;
  }
  .article-work > img {
    width: auto;
    height: 25rem;
  }

  .article-work.open {
    animation: expand2 0.6s ease forwards;
  }

  @keyframes expand2 {
    from {
      height: 0rem;
    }
    to {
      height: 35rem;
    }
  }
  .work-copy {
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
  }
  .work-tools {
    flex-direction: column;
    justify-content: space-between;
  }
  #services > div > h3 {
    width: 60%;
  }
  .service-copy {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
  .service-copy > span {
    width: 40%;
    font-size: 3rem;
  }
  .service-copy > div {
    width: 50%;
  }
  .services-items {
    justify-content: space-between;
    width: 100%;
  }
  #about-upper {
    gap: 0.5rem;
  }
  #about-btns {
    flex-direction: row;
    justify-content: flex-start;
    height: 5rem;
    gap: 3rem;
  }
  #about-btns > button {
    padding: 0 4em 0 4.5rem;
  }
  #about-btns > a {
    padding: 0;
  }
  #contact-copy {
    flex-direction: row;
    width: 100%;
    text-align: left;
    justify-content: space-between;
    align-items: center;
  }
  #contact-copy > p {
    width: 50%;
  }
  #contact-content {
    gap: 2rem;
    padding-bottom: 2rem;
  }
  .social-links {
    flex-direction: row;
    gap: 3rem;
    padding: 0;
    margin: 0;
    align-items: end;
    justify-content: space-between;
  }
  #contact-content {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ipad pro */
@media only screen and (min-width: 1024px) {
  body {
    padding: 0 4rem 0 4rem;
  }
  #contact {
    padding: 3rem 3rem 3rem 3rem;
    margin: 0 0 2rem 0rem;
    width: 100%;
  }
  #contact-copy {
    justify-content: center;
    align-items: start;
    width: 35%;
  }
  .body-txt {
    font-size: 1rem;
    line-height: 1.6rem;
  }
  nav > ul {
    gap: 5rem;
  }

  h1 {
    font-size: 5.313rem;
    line-height: 5.4rem;
  }
  #hero {
    padding: 5rem 0 2.5rem 0;
  }
  #featured-img {
    width: 90%;
    height: auto;
  }
  .h2 {
    font-size: 4.063rem;
    line-height: 4.3rem;
  }
  #featured-content {
    padding: 1rem 0 var(--section-padding) 0;
  }
  #featured-btns {
    flex-direction: row;
  }
  .featured-btns-top {
    gap: 0;
  }
  #work-content {
    flex-direction: row;
    justify-content: space-between;
    height: 100%;
    width: 65%;
    padding: 4rem 0 4rem 0;
    gap: 4rem;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
  }

  .work-tools {
    height: 100%;
    width: fit-content;
    white-space: nowrap;
  }
  .work-tools > ul {
    display: flex;
    white-space: nowrap;
    opacity: 0;
  }
  .work-tools > ul.open {
    animation: fade 0.6s ease forwards;
  }
  @keyframes fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .work-tools > span {
    padding-top: 0;
  }
  .work-copy {
    justify-content: space-between;
    height: 100%;
    width: 100%;
  }
  .btn-mobile > .btn-img {
    scale: 1;
  }
  .btn-mobile {
    font-size: 1.125rem;
    justify-content: center;
    padding: 0;
  }

  #works-heading > div {
    width: 29rem;
  }
  #works-heading > h3 {
    width: 60rem;
  }

  .work-btns {
    flex-direction: row;
    width: 100%;
    gap: 0.2rem;
  }
  .article-work {
    align-items: center;
  }
  .article-work > img {
    height: 28rem;
  }
  .article-work.open {
    animation: expand3 0.6s ease forwards;
  }

  @keyframes expand3 {
    from {
      height: 0rem;
    }
    to {
      height: 28rem;
    }
  }
  .btn-secondary {
    padding-bottom: 5px;
  }
  .services-items {
    flex-direction: row;
    height: auto;
    width: 100%;
    justify-content: space-between;
  }
  .service-copy > span {
    font-size: 2.188rem;
    padding-bottom: 3rem;
    display: block;
  }
  .services-items > article > div {
    width: 100%;
  }
  .service-copy {
    flex-direction: column;
    width: 100%;
  }
  .service-copy > div {
    padding-top: 3rem;
  }
  .services-items {
    gap: 5rem;
  }
  #about-upper {
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    gap: 6rem;
    align-items: center;
  }
  .about-content {
    flex-direction: column;
    width: 50%;
  }
  #about-upper > h5 {
    width: 45%;
  }
  #about-lower {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    padding-top: 2rem;
    gap: 5rem;
    height: 100%;
  }
  #about-btns {
    flex-direction: column;
    justify-content: center;
    height: fit-content;
    width: fit-content;
    align-items: center;
  }

  .btn-main {
    padding: 0.3rem 2.5rem 0.3rem 2rem;
    height: 4rem;
  }
  .btn-secondary {
    padding: 0;
    width: fit-content;
    padding-bottom: 0.5rem;
  }
  #contact {
    flex-direction: row;
    justify-content: space-between;
  }
  #contact-copy {
    flex-direction: column;
  }
  #contact-copy > p {
    width: 100%;
  }
}

/* desktop */
@media only screen and (min-width: 1440px) {
  body {
    padding: 0 7.5rem 0 7.5rem;
  }
  #works {
    border-radius: 2rem;
  }
  #contact {
    padding: 3rem 5rem 3rem 5rem;
    margin: 0 -5rem 2rem -5rem;
    width: calc(100% + 10em);
    gap: 7rem;
  }
  #socials {
    width: 100%;
    justify-content: flex-start;
    align-items: start;
  }
  #contact-content {
    gap: 7rem;
  }
  .social-links {
    gap: 5rem;
  }
  #contact-copy {
    justify-content: center;
    align-items: start;
    width: 50%;
  }
  #hero > h1,
  #hero > p {
    width: 70%;
  }
  .body-txt {
    font-size: 1rem;
    line-height: 1.8rem;
  }
  #featured-headings {
    width: 90%;
  }
  #featured-content {
    padding: 1rem 0 6rem 0;
  }
  #works-heading > div {
    width: 20rem;
  }
  #works-heading {
    gap: 6rem;
  }
  #works-heading > h3 {
    width: 50rem;
  }
  .service-copy {
    flex-direction: row;
  }
  .service-copy > div {
    padding-top: 0;
  }
  #main-contact-content {
    width: 100%;
  }
}