* {
  font-family: "Urbanist", sans-serif;
  font-optical-sizing: auto;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

.page-max-width {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.semi-circle {
  width: 53%;
  height: 0;
  padding-bottom: 50%;
  background: linear-gradient(
    to bottom,
    var(--color-primary-gradient-1),
    var(--color-primary-gradient-2)
  );
  border-radius: 50%;
}

.hero-headline {
  font-size: clamp(1rem, 9.25vh, 6rem);
  line-height: 1.1;
}

.hero-hello {
  font-size: clamp(1rem, 2.5vh, 2.5rem);
}

.subtitle-text-1 {
  font-size: clamp(0.7rem, 4.15vh, 2.5rem);
  line-height: 1.4;
}

.cta-links-text {
  font-size: clamp(1rem, 2.65vh, 2.8rem);
}

.cta-links {
  padding: 0.625rem;
}

.cta-single-link {
  transition: padding 0.3s ease;
  padding-right: 1.25rem;
  padding-left: 1.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.active-cta-link {
  border: 1px solid #d0d5dd;
  background-color: var(--color-primary);
  padding-right: 2rem;
  padding-left: 2.5rem;
}

.why-me-image {
  width: auto;
  height: clamp(15rem, 57vh, 35rem);
}

.why-me-bg-block {
  width: 100%;
  height: clamp(10rem, 48vh, 30rem);
}

.why-me-halo {
  width: clamp(10rem, 48vh, 35rem);
  height: clamp(10rem, 48vh, 35rem);
}

.bg-work-experience-block {
  background-image: url("/images/landing/timeline-bg.webp");
  background-size: cover;
}

.point-gradient-overlay {
  mask-image: url("/images/landing/timeline-point.png");
  -webkit-mask-image: url("/images/landing/timeline-point.png");

  mask-size: contain;
  -webkit-mask-size: contain;

  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;

  mask-position: center;
  -webkit-mask-position: center;
}

.point-gradient {
  background: linear-gradient(
    to bottom,
    var(--color-primary-gradient-1),
    var(--color-primary-gradient-2)
  );
}

.active-portfolio-tab {
  background-color: var(--color-primary);
  color: var(--color-global-light);
}

.portfolio-project-card-overlay {
  background: linear-gradient(
    193deg,
    rgba(29, 41, 57, 0) 71.89%,
    rgba(29, 41, 57, 0.5) 97.95%
  );
}

.project-description-hidden {
  height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

.project-arrow-icon-hover > .icon-rect {
  fill: var(--color-primary) !important;
}

.project-arrow-icon-hover > .icon-arrow {
  fill: var(--color-global-light) !important;
}

.splide__pagination {
  bottom: -2em !important;
}

.splide__pagination li {
  margin: 0 0.4em !important;
}

.splide__pagination__page {
  width: 12px !important;
  height: 12px !important;
}

@media (max-width: 1200px) {
  .semi-circle {
    width: 52%;
    height: 0;
    padding-bottom: 50%;
    border-radius: 50%;
  }

  .hero-headline {
    font-size: clamp(1rem, 7.1vh, 5rem);
    line-height: 1.1;
  }

  .hero-hello {
    font-size: clamp(1rem, 2vh, 2.25rem);
  }

  .cta-links-text {
    font-size: clamp(1rem, 2.5vh, 2.6rem);
  }

  .subtitle-text-1 {
    font-size: clamp(0.7rem, 3.85vh, 1.8rem);
    line-height: 1.4;
  }

  .cta-single-link {
    padding-right: 0.75rem;
    padding-left: 1.25rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
  }

  .active-cta-link {
    padding-right: 1.75rem;
    padding-left: 2.25rem;
  }

  .cta-links {
    padding: 0.575rem;
  }
}

@media (max-width: 1100px) {
  .semi-circle {
    width: 52%;
    height: 0;
    padding-bottom: 50%;
    border-radius: 50%;
  }

  .hero-headline {
    font-size: clamp(1rem, 6.75vh, 4rem);
    line-height: 1.1;
  }

  .hero-hello {
    font-size: clamp(1rem, 1.8vh, 1.9rem);
  }

  .cta-links-text {
    font-size: clamp(1rem, 2.35vh, 2.4rem);
  }

  .subtitle-text-1 {
    font-size: clamp(0.7rem, 3.65vh, 1.7rem);
    line-height: 1.4;
  }

  .cta-single-link {
    padding-right: 0.5rem;
    padding-left: 1rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
  }

  .active-cta-link {
    padding-right: 1.25rem;
    padding-left: 1.75rem;
  }

  .cta-links {
    padding: 0.5rem;
  }
}

@media (max-width: 1024px) {
  .project-description-hidden {
    height: auto !important;
    padding: 0.5rem 1rem !important;
    margin: 0 !important;
    overflow: hidden;
  }

  .page-max-width {
    max-width: 100%;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  .semi-circle {
    width: 50%;
    padding-bottom: 50%;
    border-radius: 50%;
  }

  .hero-headline {
    font-size: clamp(1rem, 6.5vh, 3.25rem);
    line-height: 1.1;
  }
}

@media (max-width: 900px) {
  .semi-circle {
    width: 63%;
    padding-bottom: 63%;
    border-radius: 63%;
  }
}

@media (max-width: 768px) {
  .hero-headline {
    font-size: clamp(1rem, 6.3vh, 2.7rem);
    line-height: 1.1;
  }

  .semi-circle {
    width: 66%;
    padding-bottom: 66%;
    border-radius: 66%;
  }
}

@media (max-width: 640px) {
  .hero-headline {
    font-size: clamp(1rem, 5.5vw, 3rem);
    line-height: 1.1;
  }

  .subtitle-text-1 {
    font-size: clamp(0.7rem, 3.5vw, 1.7rem);
    line-height: 1.4;
  }

  .hero-hello {
    font-size: clamp(1rem, 1.8vw, 1.9rem);
  }

  .semi-circle {
    width: 75%;
    height: 0;
    padding-bottom: 75%;
    border-radius: 75%;
  }

  .why-me-image {
    height: clamp(15rem, 46vh, 35rem);
  }

  .why-me-bg-block {
    height: clamp(10rem, 40vh, 30rem);
  }
}

@media (max-width: 500px) {
  .semi-circle {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    border-radius: 100%;
  }
}

@media (max-width: 400px) {
  .why-me-image {
    height: clamp(15rem, 57vh, 35rem);
  }

  .why-me-bg-block {
    height: clamp(10rem, 48vh, 30rem);
  }

  .subtitle-text-1 {
    font-size: clamp(0.5rem, 3.5vw, 1.7rem);
    line-height: 1.4;
  }

  .hero-hello {
    font-size: clamp(0.8rem, 1.2vw, 1.9rem);
  }

  .semi-circle {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    border-radius: 100%;
  }
}