/* #region Fonts */

@font-face {
  font-family: "Roobert";
  src: url("../fonts/roobert/Roobert-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roobert";
  src: url("../fonts/roobert/Roobert-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roobert";
  src: url("../fonts/roobert/Roobert-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ClashDisplay";
  src: url("../fonts/clashdisplay/ClashDisplay-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ClashDisplay";
  src: url("../fonts/clashdisplay/ClashDisplay-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ClashDisplay";
  src: url("../fonts/clashdisplay/ClashDisplay-Semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* #endregion Fonts */

/* #region Globals */

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: auto;
  }
}

:root {
  --palette-color-1: #ffc794;
  --palette-color-2: #4d3ff1;
  --palette-color-3: #332950;
  --palette-color-4: #221c34;
  --palette-color-5: #140d28;
  --palette-color-6: #ffffff;
  --palette-color-7: #f1f3ff;
  --palette-color-8: rgba(241, 243, 255, 0.8);
  --palette-color-9: rgba(20, 13, 40, 0.75);
  --palette-color-10: rgba(255, 255, 255, 0.8);
  --palette-color-11: #382f52;
  --palette-color-12: #140d28;
  --palette-color-13: #f1eefa;

  --bs-body-font-family: "Roobert", sans-serif;
  --bs-body-secondary-font-family: "ClashDisplay", sans-serif;
  --bs-body-font-size: clamp(1rem, 0.98rem + 0.09vw, 1.063rem);
  --bs-body-color: var(--palette-color-8);
  --bs-heading-color: var(--palette-color-6);
  --bs-border-radius: 1.25rem;
  --bs-border-radius-x2: 2.5rem;
  --bs-border-radius-pill: 6rem;

  --very-fast-transition: all 0.1s ease;
  --fast-transition: all 0.2s ease;
  --smooth-transition: all 0.3s ease;
  --slow-transition: all 0.4s ease;
  --very-slow-transition: all 0.5s ease;
}

body:not(.project-page) {
  background: var(--palette-color-5) url("../images/body-bg.png") repeat 0 0;
  background-size: contain;
}

:focus,
:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

::selection {
  background: var(--palette-color-2);
  color: var(--palette-color-6);
}

@media (min-width: 1500px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1438px;
  }
}

@media (max-width: 575px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: calc(100% - 1.5rem);
  }
}

.site-wrapper {
  overflow: hidden;
}

.main,
.footer {
  max-width: 1920px;
  margin: 0 auto;
}

.main {
  padding-top: 6rem;
}

.main > section:first-child {
  margin-top: -0.125rem;
}

@media (max-width: 991px) {
  .main {
    padding-top: 5rem;
  }
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: middle;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

svg:not(:root) {
  overflow: hidden;
}

a {
  transition: var(--smooth-transition);
}

hr {
  border-color: var(--palette-color-6);
  opacity: 0.2;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: 600;
  font-family: var(--bs-body-secondary-font-family);
}

h1,
.h1 {
  font-size: clamp(2rem, 0.776rem + 5.44vw, 5.875rem);
}

@media (min-width: 768px) {
  h1,
  .h1 {
    line-height: 1.1;
  }
}

h2,
.h2 {
  font-size: clamp(2rem, 1.408rem + 2.63vw, 3.875rem);
}

h3,
.h3 {
  font-size: clamp(1.5rem, 1.342rem + 0.7vw, 2rem);
}

h4,
.h4 {
  font-size: clamp(1.375rem, 1.257rem + 0.53vw, 1.75rem);
}

figure {
  margin: 0;
}

h2 span {
  display: inline-block;
  animation-duration: 0.25s;
  animation-fill-mode: both;
}

.parallax-heading {
  position: relative;
  transition: transform 0.1s ease-out;
}

@media (max-width: 991px) {
    .parallax-heading {
        transition: none !important;
        transform: none !important;
    }
}

/* #endregion Globals */

/* #region Lenis Smooth Scroll Recommended CSS */

html.lenis {
  height: auto;
}

/* .lenis.lenis-smooth {
  scroll-behavior: auto !important;
} */

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* #endregion Lenis Smooth Scroll Recommended CSS */

/* #region Animations */

.spin {
  animation: spin 5s linear infinite;
}

.spin-v2 {
  animation: spin 10s linear infinite;
}

.spin-v3 {
  animation: spin 15s linear infinite;
}

.spin-v4 {
  animation: spin 20s linear infinite;
}

.spin-v5 {
  animation: spin 30s linear infinite;
}

.spin-v6 {
  animation: spin 60s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.animated {
  animation-duration: 1.6s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.26, 0.1, 0.07, 1);
}

@keyframes fadeInUpHeading {
  0% {
    opacity: 0;
    transform: translateY(3rem) skew(-20deg);
    filter: blur(4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) skew(0);
    filter: blur(0px);
  }
}

.fadeInUpHeading {
  -webkit-animation-name: fadeInUpHeading;
  animation-name: fadeInUpHeading;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

/* #endregion Animations */

/* #region Helpers */

.lead {
  color: var(--palette-color-6);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.171rem + 0.35vw, 1.5rem);
}

.list-reset {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid currentColor;
  color: var(--palette-color-6);
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--bs-body-secondary-font-family);
  transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}

.link > span:nth-child(1),
.link > span:nth-child(2) {
  transition: transform 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.link > span:nth-child(1) {
  position: relative;
}

.link > span:nth-child(2) {
  position: absolute;
  transform: translateY(100%);
  transition-delay: 0s;
}

.link:hover > span:nth-child(1) {
  transform: translateY(-100%);
}

.link:hover > span:nth-child(2) {
  transform: translateY(0);
  transition-delay: 0.1s;
}

.link:hover,
.link:active {
  color: var(--palette-color-1);
  border-color: transparent;
}

.link.reversed {
  color: var(--palette-color-1);
}

.link.reversed:hover,
.link.reversed:active {
  color: var(--palette-color-6);
  border-color: transparent;
}

.pre-title {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(0.75rem, 0.671rem + 0.35vw, 1rem);
  font-weight: 600;
  font-family: var(--bs-body-secondary-font-family);
  line-height: 1;
  text-transform: uppercase;
}

.pre-title svg {
  animation: spin 5s linear infinite;
}

.section-gap {
  margin-bottom: clamp(4rem, 2.105rem + 8.42vw, 10rem);
}

.hidden {
  visibility: hidden;
}

.ratio {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  overflow: hidden;
  text-decoration: none !important;
  background: var(--palette-color-3);
  border-radius: var(--bs-border-radius);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}

.ratio.ratio-21-9 {
  padding-bottom: calc((9 / 21) * 100%);
}

.ratio.ratio-16-9 {
  padding-bottom: calc((9 / 16) * 100%);
}

.ratio.ratio-4-3 {
  padding-bottom: calc((3 / 4) * 100%);
}

.ratio.ratio-3-2 {
  padding-bottom: calc((2 / 3) * 100%);
}

.ratio.ratio-1-1 {
  padding-bottom: calc((1 / 1) * 100%);
}

.ratio.ratio-2-3 {
  padding-bottom: calc((3 / 2) * 100%);
}

.ratio.ratio-3-4 {
  padding-bottom: calc((4 / 3) * 100%);
}

.ratio.no-radius {
  border-radius: 0;
}

.ratio img,
.ratio video,
.ratio iframe {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-position: center center;
  object-fit: cover;
}

.palette-color-1 {
  color: var(--palette-color-1);
}

.palette-color-2 {
  color: var(--palette-color-2);
}

.palette-color-3 {
  color: var(--palette-color-3);
}

.palette-color-4 {
  color: var(--palette-color-4);
}

.palette-color-5 {
  color: var(--palette-color-5);
}

.palette-color-6 {
  color: var(--palette-color-6);
}

.palette-color-7 {
  color: var(--palette-color-7);
}

.palette-color-8 {
  color: var(--palette-color-8);
}

.palette-color-9 {
  color: var(--palette-color-9);
}

.ff-primary {
  font-family: var(--bs-body-font-family);
}

.ff-secondary {
  font-family: var(--bs-body-secondary-font-family);
}

.fw-300 {
  font-weight: 300;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fs-xs {
  font-size: 0.875rem;
}

.fs-s {
  font-size: 1rem;
}

.fs-m {
  font-size: clamp(1rem, 0.961rem + 0.18vw, 1.125rem);
}

.fs-l {
  font-size: clamp(1.125rem, 1.086rem + 0.18vw, 1.25rem);
}

.fs-xl {
  font-size: clamp(1.25rem, 1.211rem + 0.18vw, 1.375rem);
}

.fs-xxl {
  font-size: clamp(1.25rem, 1.171rem + 0.35vw, 1.5rem);
}

.fs-xxxl {
  font-size: clamp(1.5rem, 1.421rem + 0.35vw, 1.75rem);
}

/* #endregion Helpers */

/* #region Buttons */

.btn {
  --bs-btn-padding-x: 3rem;
  --bs-btn-padding-y: 1.25rem;
  --bs-btn-font-family: var(--bs-body-secondary-font-family);
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: 1.5;
  --bs-btn-border-width: 1px;
  --bs-btn-box-shadow: none;
  --bs-btn-focus-box-shadow: none;
  --bs-btn-border-radius: var(--bs-border-radius-pill);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: var(--slow-transition);
  overflow: hidden;
  text-decoration: none;
}

.btn-labels {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

.btn:after {
  content: "";
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(100%);
  background: var(--palette-color-1);
}

.btn::after,
.btn .btn-labels span {
  transition: transform 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.btn .btn-labels span:first-of-type {
  position: relative;
}

.btn .btn-labels span:last-of-type {
  z-index: 2;
  position: absolute;
  transform: translateY(100%);
  transition-delay: 0s;
}

.btn:hover .btn-labels span:first-of-type,
.btn:active .btn-labels span:first-of-type {
  position: absolute;
  transform: translateY(-100%);
}

.btn:hover .btn-labels span:last-of-type,
.btn:active .btn-labels span:last-of-type {
  position: relative;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.btn:hover:after,
.btn:active:after {
  transform: translateY(0);
}

.btn svg {
  z-index: 2;
  position: relative;
}

.btn-primary {
  --bs-btn-color: var(--palette-color-6);
  --bs-btn-bg: var(--palette-color-2);
  --bs-btn-border-color: var(--palette-color-2);
  --bs-btn-hover-color: var(--palette-color-5);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--palette-color-1);
  --bs-btn-focus-shadow-rgb: transparent;
  --bs-btn-active-color: var(--palette-color-5);
  --bs-btn-active-bg: var(--palette-color-1);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: transparent;
  --bs-btn-disabled-color: var(--palette-color-6);
  --bs-btn-disabled-bg: var(--palette-color-1);
  --bs-btn-disabled-border-color: transparent;
}

.btn-secondary {
  --bs-btn-color: var(--palette-color-2);
  --bs-btn-bg: var(--palette-color-6);
  --bs-btn-border-color: var(--palette-color-6);
  --bs-btn-hover-color: var(--palette-color-5);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--palette-color-1);
  --bs-btn-focus-shadow-rgb: transparent;
  --bs-btn-active-color: var(--palette-color-5);
  --bs-btn-active-bg: var(--palette-color-1);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: transparent;
  --bs-btn-disabled-color: var(--palette-color-6);
  --bs-btn-disabled-bg: var(--palette-color-1);
  --bs-btn-disabled-border-color: transparent;
}

.btn-dark {
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: 0.75rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-font-weight: 500;
  --bs-btn-color: var(--palette-color-10);
  --bs-btn-bg: var(--palette-color-11);
  --bs-btn-border-color: var(--palette-color-11);
  --bs-btn-hover-color: var(--palette-color-6);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--palette-color-2);
  --bs-btn-focus-shadow-rgb: transparent;
  --bs-btn-active-color: var(--palette-color-6);
  --bs-btn-active-bg: var(--palette-color-2);
  --bs-btn-active-border-color: var(--palette-color-2);
  --bs-btn-active-shadow: transparent;
  --bs-btn-disabled-color: var(--palette-color-6);
  --bs-btn-disabled-bg: var(--palette-color-1);
  --bs-btn-disabled-border-color: transparent;
}

.btn-light {
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: 0.75rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-font-weight: 500;
  --bs-btn-color: var(--palette-color-12);
  --bs-btn-bg: var(--palette-color-13);
  --bs-btn-border-color: var(--palette-color-13);
  --bs-btn-hover-color: var(--palette-color-6);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--palette-color-2);
  --bs-btn-focus-shadow-rgb: transparent;
  --bs-btn-active-color: var(--palette-color-6);
  --bs-btn-active-bg: var(--palette-color-2);
  --bs-btn-active-border-color: var(--palette-color-2);
  --bs-btn-active-shadow: transparent;
  --bs-btn-disabled-color: var(--palette-color-6);
  --bs-btn-disabled-bg: var(--palette-color-1);
  --bs-btn-disabled-border-color: transparent;
}

.btn-dark:after,
.btn-light:after {
  background: var(--palette-color-2);
}

@media (max-width: 575px) {
  .btn {
    width: 100%;
  }

  .btn-dark,
  .btn-light {
    --bs-btn-padding-y: 1rem;
  }
}

/* #endregion Buttons */

/* #region Header */

.header {
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: var(--smooth-transition);
}

.header.header-scrolled,
.header.has-background {
  background: var(--palette-color-9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.header .logo {
  min-width: 210px;
}

.header .navbar {
  --bs-navbar-padding-x: 0;
  --bs-navbar-padding-y: 1.5rem;
  --bs-navbar-color: var(--palette-color-6);
  --bs-navbar-hover-color: var(--palette-color-1);
  --bs-navbar-active-color: var(--palette-color-1);
  --bs-navbar-disabled-color: var(--palette-color-8);
  --bs-navbar-nav-link-padding-x: 1.5rem;
  --bs-nav-link-font-size: 1rem;
  --bs-nav-link-font-family: var(--bs-body-secondary-font-family);
  --bs-navbar-toggler-padding-y: 0;
  --bs-navbar-toggler-padding-x: 0;
  --bs-navbar-toggler-border-color: transparent;
  --bs-navbar-toggler-border-radius: 0;
  --bs-navbar-toggler-focus-width: 0;
}

@media (max-width: 575px) {
  .header .navbar {
    --bs-nav-link-font-size: 1.25rem;
  }
}

.header .navbar-nav {
  --bs-nav-link-font-weight: 500;
}

.header .nav-link {
  font-family: var(--bs-nav-link-font-family);
  font-weight: var(--bs-nav-link-font-weight);
  transition: var(--smooth-transition);
}

.header .cta {
  min-width: 210px;
}

.header .cta span {
  width: auto;
  min-width: 8.25rem;
}

.header .cta svg path {
  transition: var(--slow-transition);
}

.header .cta:hover svg path,
.header .cta:active svg path {
  fill-opacity: 1;
}

.header .cta-v1:hover svg path:nth-child(4),
.header .cta-v1:active svg path:nth-child(4),
.header .cta-v1:hover svg path:nth-child(5),
.header .cta-v1:active svg path:nth-child(5) {
  fill: var(--palette-color-2);
}

.header .cta-v2:hover svg path:nth-child(2),
.header .cta-v2:active svg path:nth-child(2) {
  fill: var(--palette-color-2);
}

.header .cta-v2:hover svg path:nth-child(1),
.header .cta-v2:active svg path:nth-child(1),
.header .cta-v2:hover svg path:nth-child(3),
.header .cta-v2:active svg path:nth-child(3),
.header .cta-v2:hover svg path:nth-child(5),
.header .cta-v2:active svg path:nth-child(5) {
  fill: var(--palette-color-6);
}

@media (min-width: 992px) and (max-width: 1199px) {
  .header .navbar {
    --bs-navbar-nav-link-padding-x: 0.75rem;
  }
}

@media (min-width: 576px) and (max-width: 991px) {
  .navbar-collapse {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 1.5rem;
  }

  .header .navbar-nav {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
    margin-top: 1.5rem;
  }

  .header .cta {
    margin-top: 1.5rem;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .header .navbar-nav {
    display: block;
    column-count: 3;
  }
}

@media (max-width: 991px) {
  .navbar-toggler {
    outline: 0 !important;
  }

  .navbar-toggler-icon-custom {
    position: relative;
    display: block;
    width: 26px;
    height: 21px;
    transform: rotate(0deg);
    transition: 0.5s ease-in-out;
    cursor: pointer;
  }

  .navbar-toggler-icon-custom span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: var(--palette-color-6);
    border-radius: 4px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: 0.25s ease-in-out;
  }

  .navbar-toggler-icon-custom span:nth-child(1) {
    top: 0px;
  }

  .navbar-toggler-icon-custom span:nth-child(2),
  .navbar-toggler-icon-custom span:nth-child(3) {
    top: 8px;
  }

  .navbar-toggler-icon-custom span:nth-child(4) {
    top: 16px;
  }

  .navbar-toggler.open .navbar-toggler-icon-custom span:nth-child(1) {
    top: 8px;
    width: 0%;
    left: 50%;
  }

  .navbar-toggler.open .navbar-toggler-icon-custom span:nth-child(2) {
    transform: rotate(45deg);
  }

  .navbar-toggler.open .navbar-toggler-icon-custom span:nth-child(3) {
    transform: rotate(-45deg);
  }

  .navbar-toggler.open .navbar-toggler-icon-custom span:nth-child(4) {
    top: 8px;
    width: 0%;
    left: 50%;
  }
}

@media (max-width: 575px) {
  .header .navbar-nav {
    margin-top: 1.5rem;
  }

  .header .cta {
    margin-top: 0.625rem;
  }
}

/* #endregion Header */

/* #region Hero */

.hero {
  margin-bottom: clamp(4rem, 3.053rem + 4.21vw, 7rem);
  padding-top: clamp(4rem, 3.053rem + 4.21vw, 7rem);
  padding-bottom: 13rem;
}

.hero .hero-background {
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
  background: url("/images/hero.jpg") no-repeat right 14% bottom;
  background-size: 1200px;
  pointer-events: none;
}

@media (max-width: 1699px) {
  .hero {
    padding-bottom: clamp(4rem, 3.053rem + 4.21vw, 7rem);
  }

  .hero .hero-background {
    background-position: right 0.5rem top 55%;
    background-size: 1000px;
  }
}

@media (max-width: 1499px) {
  .hero .hero-background {
    background-position: right 0.5rem bottom;
    background-size: 850px;
  }
}

@media (max-width: 1199px) {
  .hero .hero-background {
    background-size: 630px;
  }
}

@media (max-width: 991px) {
  .hero {
    margin-bottom: 0;
    padding-bottom: clamp(4rem, 2.105rem + 8.42vw, 10rem);
  }

  .hero .hero-background {
    background-position: center center;
    background-size: 95%;
    transform: none !important;
    filter: opacity(50%);
  }
}

.hero .title {
  max-width: 1075px;
}

.hero .actions .btn {
  min-width: 11.5rem;
}

.hero .actions .btn span {
  min-width: 5.5rem;
}

/* #endregion Hero */

/* #region Benefits */

.benefits-box {
  padding: 2rem;
}

.benefits-box::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
  background: var(--palette-color-3);
  opacity: 0.7;
  border-radius: var(--bs-border-radius);
}

@media (min-width: 768px) {
  .benefits-box .benefits-icon {
    min-height: 143px;
  }
}

@media (max-width: 767px) {
  .benefits-box .benefits-content {
    max-width: 400px;
  }
}

/* #endregion Benefits */

/* #region About */

@media (min-width: 992px) {
  .about {
    padding-bottom: clamp(4rem, 2.105rem + 8.42vw, 10rem);
  }
}

.about .about-img {
  z-index: -1;
  position: absolute;
  left: 3rem;
  top: -6rem;
  user-select: none;
}

@media (max-width: 1499px) {
    .about .about-img {
        left: 0;
    }
}

@media (max-width: 1399px) {
  .about .about-img {
    left: -10rem;
  }
}

@media (max-width: 991px) {
  .about .about-img {
    position: relative;
    top: 0;
    left: 0;
    margin-top: -12rem;
    margin-bottom: -3rem;
  }
}

@media (max-width: 767px) {
  .about .about-img {
    margin-top: -9rem;
    margin-bottom: -3rem;
  }
}

@media (max-width: 575px) {
  .about .about-img {
    margin-top: -20%;
    margin-bottom: -10%;
  }
}

.founder:hover,
.founder:active {
  color: var(--palette-color-6);
}

.founder .linkedin {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--palette-color-6);
  color: var(--palette-color-5);
}

.about .btn {
  min-width: 14.5rem;
}

.about .btn span {
  width: auto;
  min-width: 9.75rem;
}

/* #endregion About */

/* #region Projects */

.projects .project-image.has-border {
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.projects .project-content {
  max-width: 600px;
}

/* #endregion Projects */

/* #region Services */

@media (min-width: 576px) {
  .services .title-2 {
    max-width: 336px;
  }
}

.service-box {
  padding: 2rem;
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .service-box {
    padding: 2rem 1rem;
  }
}

.service-box::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
  background: var(--palette-color-3);
  opacity: 0.7;
  border-radius: var(--bs-border-radius);
}

@media (min-width: 410px) {
  .services .services-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

.services .services-list li {
  padding: 1rem 0;
  border-bottom: 1px solid #4e446b;
}

@media (min-width: 1200px) {
  .services .services-list li:nth-child(9),
  .services .services-list li:nth-child(10) {
    border-bottom: 0;
  }
}

.services .service-box-icon {
  width: 100px;
  height: 90px;
  margin-bottom: 4rem;
  margin-left: -1rem;
}

.services .service-box-icon.service-box-icon-3 {
  margin-left: -1.375rem;
}

.services .service-box-icon.service-box-icon-4 {
  margin-left: -0.75rem;
}

@media (max-width: 1399px) {
  .services .service-box-icon {
    margin-bottom: 3rem;
  }
}

@media (max-width: 480px) {
  .services .service-box-icon {
    margin-bottom: 2rem;
  }
}

.services .cta {
  min-width: 16.5rem;
}

/* #endregion Services */

/* #region Reviews */

.review-container {
  padding: 5rem;
  border: 2px solid var(--palette-color-6);
  border-radius: var(--bs-border-radius);
}

@media (max-width: 1399px) {
  .review-container {
    padding: 4rem;
  }
}

@media (max-width: 991px) {
  .review-container {
    padding: 3rem;
  }
}

@media (max-width: 575px) {
  .review-container {
    padding: 1.5rem;
    padding-top: 2rem;
  }
}

.review-container .review-content {
  max-width: 770px;
}

@media (min-width: 481px) and (max-width: 767px) {
  .review-container .review-project-logo {
    margin-bottom: 5px;
  }
}

@media (max-width: 480px) {
  .review-container .review-left {
    flex-direction: column !important;
  }

  .review-container .review-left .review-quotes svg {
    width: 5rem;
    height: auto;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .review-container .review-klingit-logo,
  .review-container .review-klingit-content {
    margin-bottom: 0;
  }
}

/* #endregion Reviews */

/* #region Pricing */

.pricing-box {
  padding: 3rem;
}

@media (max-width: 991px) {
  .pricing-box {
    padding: 2rem;
  }
}

@media (max-width: 575px) {
  .pricing-box {
    padding: 2rem 1.5rem;
  }
}

.pricing-box::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
}

.pricing .row > div:nth-child(1) .pricing-box::before,
.pricing .row > div:nth-child(2) .pricing-box::before,
.pricing .row > div:nth-child(4) .pricing-box::before,
.pricing .row > div:nth-child(5) .pricing-box::before {
  background: var(--palette-color-3);
  opacity: 0.7;
}

.pricing .row > div:nth-child(3) .pricing-box::before,
.pricing .row > div:nth-child(6) .pricing-box::before {
  background: var(--palette-color-4);
  opacity: 0.7;
}

@media (min-width: 1200px) {
  .pricing .row > div:nth-child(1) .pricing-box {
    border-top-left-radius: var(--bs-border-radius);
  }

  .pricing .row > div:nth-child(3) .pricing-box {
    border-top-right-radius: var(--bs-border-radius);
  }

  .pricing .row > div:nth-child(4) .pricing-box {
    border-bottom-left-radius: var(--bs-border-radius);
  }

  .pricing .row > div:nth-child(6) .pricing-box {
    border-bottom-right-radius: var(--bs-border-radius);
  }
}

@media (max-width: 767px) {
  .pricing .row > div:nth-child(1) .pricing-box {
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
  }

  .pricing .row > div:nth-child(6) .pricing-box {
    border-bottom-left-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .pricing .row > div:nth-child(1) .pricing-box {
    border-top-left-radius: var(--bs-border-radius);
  }

  .pricing .row > div:nth-child(4) .pricing-box {
    border-top-right-radius: var(--bs-border-radius);
  }

  .pricing .row > div:nth-child(3) .pricing-box {
    border-bottom-left-radius: var(--bs-border-radius);
  }

  .pricing .row > div:nth-child(6) .pricing-box {
    border-bottom-right-radius: var(--bs-border-radius);
  }
}

.pricing-box .pricing-price {
  font-size: clamp(2rem, 1.803rem + 0.88vw, 2.625rem);
}

.pricing-box .pricing-price span:last-child {
  opacity: 0.7;
}

.pricing-box .pricing-list li {
  display: flex;
}

.pricing-box .pricing-list li + li {
  margin-top: 0.5rem;
}

.pricing-box .pricing-list li.highlight {
  color: var(--palette-color-6);
  font-weight: bolder;
}

.pricing-box .pricing-list li::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.5rem;
  margin-right: 0.625rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTguNDc3NjcgMC40ODgwNjlDOC43NjAzIDAuNzUxODUyIDguNzc1NTcgMS4xOTQ4IDguNTExNzkgMS40Nzc0M0wzLjg0NTEyIDYuNDc3NDNDMy43MTI3NCA2LjYxOTI3IDMuNTI3NDEgNi42OTk4MSAzLjMzMzM4IDYuNjk5ODFDMy4xMzkzNiA2LjY5OTgxIDIuOTU0MDMgNi42MTkyNyAyLjgyMTY1IDYuNDc3NDNMMC40ODgzMTMgMy45Nzc0M0MwLjIyNDUyOSAzLjY5NDggMC4yMzk4MDMgMy4yNTE4NSAwLjUyMjQyOSAyLjk4ODA3QzAuODA1MDU0IDIuNzI0MjggMS4yNDgwMSAyLjczOTU2IDEuNTExNzkgMy4wMjIxOEwzLjMzMzM4IDQuOTczODlMNy40ODgzMSAwLjUyMjE4NUM3Ljc1MjEgMC4yMzk1NTkgOC4xOTUwNSAwLjIyNDI4NSA4LjQ3NzY3IDAuNDg4MDY5WiIgZmlsbD0iI0YxRjNGRiIgZmlsbC1vcGFjaXR5PSIwLjgiLz4KPC9zdmc+Cg==");
}

.pricing-box .pricing-list li.highlight::before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTguNDc3NjcgMC40ODgwNjlDOC43NjAzIDAuNzUxODUyIDguNzc1NTcgMS4xOTQ4IDguNTExNzkgMS40Nzc0M0wzLjg0NTEyIDYuNDc3NDNDMy43MTI3NCA2LjYxOTI3IDMuNTI3NDEgNi42OTk4MSAzLjMzMzM4IDYuNjk5ODFDMy4xMzkzNiA2LjY5OTgxIDIuOTU0MDMgNi42MTkyNyAyLjgyMTY1IDYuNDc3NDNMMC40ODgzMTMgMy45Nzc0M0MwLjIyNDUyOSAzLjY5NDggMC4yMzk4MDMgMy4yNTE4NSAwLjUyMjQyOSAyLjk4ODA3QzAuODA1MDU0IDIuNzI0MjggMS4yNDgwMSAyLjczOTU2IDEuNTExNzkgMy4wMjIxOEwzLjMzMzM4IDQuOTczODlMNy40ODgzMSAwLjUyMjE4NUM3Ljc1MjEgMC4yMzk1NTkgOC4xOTUwNSAwLjIyNDI4NSA4LjQ3NzY3IDAuNDg4MDY5WiIgZmlsbD0iI0ZGRkZGRiIgLz4KPC9zdmc+Cg==");
}

/* #endregion Pricing */

/* #region FAQ */

.faq .sub-title a {
  font-size: 1em;
}

.faq .accordion {
  --bs-accordion-color: var(--bs-body-color);
  --bs-accordion-bg: transparent;
  --bs-accordion-transition: color 0.15s ease-in-out,
    background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
  --bs-accordion-border-color: rgba(255, 255, 255, 0.35);
  --bs-accordion-border-width: var(--bs-border-width);
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 1.5rem;
  --bs-accordion-btn-color: var(--palette-color-1);
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
  --bs-accordion-btn-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDE1IDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOC4zMzczNiA4LjY0MDU0QzcuODc0OSA5LjExOTgyIDcuMTI1MSA5LjExOTgyIDYuNjYyNjQgOC42NDA1NEwwLjM0Njg0NyAyLjA5NTA5Qy0wLjExNTYxNiAxLjYxNTgxIC0wLjExNTYxNyAwLjgzODc0MiAwLjM0Njg0NyAwLjM1OTQ2MkMwLjgwOTMwOCAtMC4xMTk4MTggMS41NTkxMSAtMC4xMTk4MTggMi4wMjE1NyAwLjM1OTQ2Mkw3LjUgNi4wMzcxTDEyLjk3ODQgMC4zNTk0NkMxMy40NDA5IC0wLjExOTgyIDE0LjE5MDcgLTAuMTE5ODIgMTQuNjUzMiAwLjM1OTQ2QzE1LjExNTYgMC44Mzg3NCAxNS4xMTU2IDEuNjE1ODEgMTQuNjUzMiAyLjA5NTA5TDguMzM3MzYgOC42NDA1NFoiIGZpbGw9IiNGRkM3OTQiLz4KPC9zdmc+Cg==");
  --bs-accordion-btn-icon-width: 1.125rem;
  --bs-accordion-btn-icon-transform: rotate(-180deg);
  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
  --bs-accordion-btn-active-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDE1IDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOC4zMzczNiA4LjY0MDU0QzcuODc0OSA5LjExOTgyIDcuMTI1MSA5LjExOTgyIDYuNjYyNjQgOC42NDA1NEwwLjM0Njg0NyAyLjA5NTA5Qy0wLjExNTYxNiAxLjYxNTgxIC0wLjExNTYxNyAwLjgzODc0MiAwLjM0Njg0NyAwLjM1OTQ2MkMwLjgwOTMwOCAtMC4xMTk4MTggMS41NTkxMSAtMC4xMTk4MTggMi4wMjE1NyAwLjM1OTQ2Mkw3LjUgNi4wMzcxTDEyLjk3ODQgMC4zNTk0NkMxMy40NDA5IC0wLjExOTgyIDE0LjE5MDcgLTAuMTE5ODIgMTQuNjUzMiAwLjM1OTQ2QzE1LjExNTYgMC44Mzg3NCAxNS4xMTU2IDEuNjE1ODEgMTQuNjUzMiAyLjA5NTA5TDguMzM3MzYgOC42NDA1NFoiIGZpbGw9IiNGRkM3OTQiLz4KPC9zdmc+Cg==");
  --bs-accordion-btn-focus-border-color: var(--bs-accordion-border-color);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
  --bs-accordion-active-color: var(--bs-accordion-btn-color);
  --bs-accordion-active-bg: var(--bs-accordion-bg);
}

.faq .accordion .accordion-button:not(.collapsed) {
  box-shadow: none;
}

.faq .accordion .accordion-button {
  column-gap: 1rem;
  font-weight: 500;
  font-size: clamp(1.25rem, 1.211rem + 0.18vw, 1.375rem);
  font-family: var(--bs-body-secondary-font-family);
}

.faq .accordion .accordion-button::after {
  background-position: center;
}

.faq .accordion p {
  max-width: 1000px;
  margin-bottom: 2rem;
}

.faq .accordion .accordion-item:last-child {
  border-bottom: var(--bs-accordion-border-width) solid
    var(--bs-accordion-border-color);
}

/* #endregion FAQ */

/* #region Footer */

.footer .footer-background {
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
  background: url("/images/footer-bg.png") no-repeat center bottom;
  pointer-events: none;
}

@media (max-width: 991px) {
  .footer .footer-background {
    background-size: 100%;
  }
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
  background: var(--palette-color-5);
  opacity: 0.2;
  pointer-events: none;
}

.footer .title {
  color: var(--palette-color-6) !important;
}

.footer .top-content {
  max-width: 640px;
}

@media (min-width: 1400px) and (max-width: 1499px) {
  .footer .top-content {
    max-width: 545px;
  }
}

.footer .bottom-content {
  max-width: 360px;
}

.footer .social-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.footer .social-link::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  width: auto;
  height: 1px;
  background: var(--palette-color-1);
  transform: scaleX(0);
  transition: inherit;
}

.footer .social-link:hover::after,
.footer .social-link:active::after {
  transform: scaleX(1);
}

.footer .social-link .social-link-left {
  transition: var(--smooth-transition);
}

.footer .social-link:hover .social-link-left,
.footer .social-link:active .social-link-left {
  color: var(--palette-color-1);
}

@media (min-width: 481px) {
  .footer .social-link .social-link-left,
  .footer .social-link .social-link-right {
    min-width: 11.5rem;
  }
}

@media (max-width: 480px) {
  .footer .social-link .social-link-middle {
    display: none;
  }
}

.footer .footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 0.75rem;
}

@media (max-width: 480px) {
  .footer .footer-nav {
    grid-template-columns: repeat(2, 1fr);
  }
}

.footer .footer-nav a {
  font-weight: 400;
  font-family: var(--bs-body-font-family);
  font-size: inherit;
  border-color: transparent;
}

.footer .footer-nav a:hover,
.footer .footer-nav a:active {
  border-color: currentColor;
}

.project-page .footer {
  max-width: none;
  padding-top: clamp(3rem, 2.053rem + 4.21vw, 6rem);
  border-top-left-radius: clamp(1.25rem, -0.724rem + 8.77vw, 7.5rem);
  border-top-right-radius: clamp(1.25rem, -0.724rem + 8.77vw, 7.5rem);
  overflow: hidden;
}

.project-page .footer::after {
  content: "";
  z-index: -2;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
  background: var(--palette-color-5);
}

.project-page .footer .link {
  color: var(--palette-color-6);
}

.project-page .footer .link:hover,
.project-page .footer .link:active {
  color: var(--palette-color-1);
}

.project-page .footer .link.reversed {
  color: var(--palette-color-1);
}

.project-page .footer .link.reversed:hover,
.project-page .footer .link.reversed:active {
  color: var(--palette-color-6);
}

/* #endregion Footer */

/* #region Recent Work */

.recent-work-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(3rem, -2.77rem + 12.02vw, 8.5rem);
  row-gap: 3rem;
}

.recent-work-content {
  max-width: 600px;
}

@media (max-width: 767px) {
  .recent-work-container {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* #endregion Recent Work */

/* #region Entry Content */

.entry-section {
  padding-top: clamp(4rem, 2.895rem + 4.91vw, 7.5rem);
}

.entry-content {
  max-width: 41.5rem;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin-bottom: 1rem;
  margin-top: 2em;
}

.entry-content h1:last-child,
.entry-content h2:last-child,
.entry-content h3:last-child,
.entry-content h4:last-child,
.entry-content h5:last-child,
.entry-content h6:last-child,
.entry-content p:last-child,
.entry-content ul:last-child,
.entry-content ol:last-child,
.entry-content blockquote:last-child {
  margin-bottom: 0;
}

.entry-content .entry-content-title {
  margin-bottom: 1.5em;
  margin-top: 0;
}

.entry-content p a {
    font-size: 1em;
}

/* #endregion Entry Content */