/* ---------- HOMEPAGE ---------- */
.hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-medium);

  margin-bottom: var(--space-sections);

  .hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-inner);
    text-align: center;
    justify-content: center;
    align-items: center;

    p {
      width: 75%;
    }
  }

  .hero-carousel {
    img {
      object-fit: cover;
      width: 20%;
    }
  }
}

.featured-half {
  display: flex;
  flex-direction: column;
  gap: var(--space-medium);

  margin-bottom: var(--space-sections);

  .featured-half-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-inner);
  }
}

.website-principles {
  display: flex;
  flex-direction: column;
  gap: var(--space-medium);
  justify-content: center;

  margin-bottom: var(--space-sections);

  h2 {
    text-align: center;

    svg {
      width: 1.5em;
      height: 1.5em;
      fill: currentColor;
      transform: rotate(-40deg);
      margin-left: -5px;
    }
  }
}

.featured-projects {
  display: flex;
  flex-direction: column;
  gap: var(--space-inner);

  margin-bottom: var(--space-sections);

  .featured-projects-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-tiny);
    margin-bottom: var(--space-inner);
  }

  .featured-projects-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-medium);

    .single-featured-project {
      display: flex;
      flex-direction: column;
      gap: var(--space-inner);
      height: 100%;

      .featured-project-content {
        display: flex;
        flex-direction: column;
        gap: var(--space-tiny);
      }
    }
  }
}

/* ---------- ABOUT PAGE ---------- */
.about {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3fr;
  gap: var(--space-inner);

  margin-bottom: var(--space-sections);

  p {
    width: 80%;
  }

  .about-col-02 {
    display: flex;
    flex-direction: column;
    gap: var(--space-inner);
  }
}

.quote {
  max-width: 95%;
  margin: auto;

  margin-bottom: var(--space-sections);

  p {
    text-align: center;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    line-height: clamp(2rem, 3vw, 2.25rem);
  }
}

.tech-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-inner);

  margin-bottom: var(--space-sections);

  .tech-stack-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-inner);
  }

  .single-tech-stack {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-tiny);

    .tech-stack-tags {
      display: flex;
      flex-direction: row;
      gap: var(--space-tiny);
    }
  }
}

/* ---------- PROJECTS PAGE ---------- */
.page-title {
  .btn.link {
    align-items: baseline;
    svg {
      transform: rotate(-40deg);
    }
  }
}

.single-project-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-inner);

  margin-bottom: var(--space-sections);

  .top {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-inner);

    p {
      width: 80%;
    }
  }
  .single-project-cover {
    height: 400px;
  }
}

.single-project-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-medium);

  margin-bottom: var(--space-sections);

  h2 {
    text-align: center;
  }

  .single-project-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);

    .single-project-details-item {
      display: flex;
      flex-direction: column;
      gap: var(--space-inner);
      padding: 0;
    }
  }
}

.single-project-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-inner);

  margin-bottom: var(--space-sections);
}

.projects-navigation {
  display: flex;
  flex-direction: column;
  gap: var(--space-inner);

  h2 {
    text-align: center;
  }

  .projects-navigation-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-inner);

    margin-bottom: var(--space-sections);
  }
}

/* ---------- CONTACT PAGE ---------- */
.featured-half {
  .links {
    display: flex;
    flex-direction: row;
    gap: var(--space-inner);
  }
}