:root {
    --ff-outfit: 'Outfit', sans-serif;
    --ff-poppins: 'Poppins', sans-serif;

    --clr-neutral-500: hsl(226, 100%, 97%, .7);
    --clr-white: 0 0% 100%;
    --clr-neutral-300: #f1f5fe;
    --clr-neutral-200: #F9F9FF;
    --clr-neutral-150: #fefefe;
    --clr-neutral-100: #FDFDFD;
    --clr-neutral-900: #13111B;
    --clr-neutral-800: #1E1C23;
    --clr-neutral-700: #2F2F35;

    --clr-primary-700: #6E73F7;
    --clr-primary-400: #767EF8;
    --clr-primary-200: #99AFFE;

    --clr-accent-700: #C0F129;
    --clr-accent-600: #D0F951;
    --clr-accent-500: #DEFF7B;
    --clr-accent-400: #DBFF6B;

    --white-gradient: linear-gradient(109deg, #fff, var(--clr-neutral-200));
    --accent-gradient: linear-gradient(109deg, var(--clr-accent-400), var(--clr-accent-700));
    --primary-gradient: linear-gradient(109deg, var(--clr-primary-200), var(--clr-primary-700));
    --gap-100: 2rem;
    --gap-200: 3.375rem;
    --gap-300: 5.063rem;
    --gap-400: 6.938rem;
    --section-border-radius: 1.25rem;

    --fs-900: clamp(2.25rem, 5vw + 1rem, 3.625rem);
    --fs-800: 1.875rem;
    --fs-700: 1.25rem;
    --fs-500: 1.125rem;
    --fs-400: 1rem;
    --fs-300: 0.875rem;
    --fs-200: 0.75rem;

    --container: min(calc(100% - 2rem * 2), 65.25rem);
    --header-height: 72px;
}

@media(min-width: 35em) {
    :root {
        --section-border-radius: 2rem;

        --gap-100: 2.153rem;
        --gap-200: 3.75rem;
        --gap-300: 6rem;
        --gap-400: 8.75rem;

        --fs-900: 3rem;
        --fs-700: 1.55rem;
        --fs-500: 1.15rem;
        --fs-400: 1.05rem;
        --fs-300: .9rem;
        --fs-200: .8rem;

    }
}

@media(min-width: 51em) {
    :root {
        --header-height: 111px;
    }
}

@media(min-width: 56em) {
    :root {
        --section-border-radius: 2.625rem;

        --gap-100: 2.313rem;
        --gap-200: 4.25rem;
        --gap-300: 7.25rem;
        --gap-400: 10.75rem;

        --fs-800: 2.4rem;
        --fs-500: 1.25rem;
        --fs-400: 1.125rem;
        --fs-300: 1rem;
        --fs-200: 1rem;
    }
}

@media(min-width: 70em) {
    :root {
        --fs-900: clamp(2.25rem, 5vw + 1rem, 3.625rem);
        --fs-800: 3rem;
        --fs-700: 1.75rem;
    }
}

/* reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    font: inherit;
}

ul {
    list-style: none;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(3rem + var(--header-height));
}

a {
    text-decoration-skip-ink: auto;
    text-decoration: none;
    color: currentColor;
}

a:not(.button):not(.footer-nav__link):hover {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-decoration: underline;
}

img,
picture,
video {
    max-width: 100%;
    display: block;
}

body {
    min-height: 100vh;
    line-height: 1.5;
    font-family: var(--ff-poppins);
    background-color: var(--clr-neutral-100);
    color: var(--clr-neutral-900);
    font-size: var(--fs-400);
    position: relative;
    display: flex;
    flex-direction: column;
}


body::before {
    content: '';
    background-image: url('./assets/body-bg-1.svg'), url('./assets/body-bg-2.svg'), url('./assets/body-bg-2.svg');
    position: absolute;
    inset: 0;
    background-size: 2283px 2054px, 2283px 2054px, 2283px 2054px;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: -470px -319px, -470px 1354px, -470px 3092px;
    z-index: -1;
}

@media(min-width: 1045px) {
    body::before {
        background-position: -470px -849px, -470px 1020px, -420px 2845px;
    }

}

@media(min-width: 1445px) {
    body::before {
        background-position: center -875px, 0 1075px, 0 2845px;
    }

}

main,
body {
    overflow-x: hidden;
}

main {
    overflow-y: hidden;
}

/* utilities */
.flex-group {
    display: flex;
    align-items: center;
    gap: var(--gap, 1rem);
}

.justify-center {
    justify-content: center;
}

.grid {
    display: grid;
    gap: var(--gap, 1rem);
}

.uppercase {
    text-transform: uppercase;
}

.underline {
    text-decoration: underline;
}

.d-inline-block {
    display: inline-block;
}

.text-center {
    text-align: center;
}

.flow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.flow[data-spacing="small"] {
    gap: .5rem;
}

.flow[data-spacing="large"] {
    gap: 2.25rem;
}

.container {
    width: var(--container);
    margin-inline: auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-white {
    color: hsl(var(--clr-white));
}

.text-black {
    color: #000;
}

.text-neutral-900 {
    color: var(--clr-neutral-900);
}

.text-neutral-800 {
    color: var(--clr-neutral-800);
}

.text-neutral-700 {
    color: var(--clr-neutral-700);
}

.text-neutral-500 {
    color: var(--clr-neutral-500);
}

.text-neutral-300 {
    color: var(--clr-neutral-300);
}

.text-neutral-200 {
    color: var(--clr-neutral-200);
}

.text-neutral-100 {
    color: var(--clr-neutral-100);
}

.text-primary-700 {
    color: var(--clr-primary-700);
}

.text-primary-400 {
    color: var(--clr-primary-400);
}

.text-primary-200 {
    color: var(--clr-primary-200);
}

.text-accent-700 {
    color: var(--clr-accent-700);
}

.text-accent-500 {
    color: var(--clr-accent-500);
}

.text-accent-400 {
    color: var(--clr-accent-400);
}

.bg-white {
    background-color: hsl(var(--clr-white));
}

.bg-black {
    background-color: #000;
}

.bg-neutral-900 {
    background-color: var(--clr-neutral-900);
}

.bg-neutral-800 {
    background-color: var(--clr-neutral-800);
}

.bg-neutral-700 {
    background-color: var(--clr-neutral-700);
}

.text-neutral-500 {
    background-color: var(--clr-neutral-500);
}

.text-neutral-300 {
    background-color: var(--clr-neutral-300);
}

.bg-neutral-200 {
    background-color: var(--clr-neutral-200);
}

.bg-neutral-100 {
    background-color: var(--clr-neutral-100);
}

.bg-primary-400 {
    background-color: var(--clr-primary-400);
}

.bg-primary-200 {
    background-color: var(--clr-primary-200);
}

.bg-accent-700 {
    background-color: var(--clr-accent-700);
}

.bg-accent-500 {
    background-color: var(--clr-accent-500);
}

.bg-accent-400 {
    background-color: var(--clr-accent-400);
}

.bg-white-gradient {
    background: var(--white-gradient);
}

.bg-primary-gradient {
    background: var(--primary-gradient);
}

.bg-accent-gradient {
    background: var(--accent-gradient);
}

.section-margin-100 {
    margin-top: var(--gap-100);
}

.section-border-radius {
    border-radius: var(--section-border-radius);
}

.section-margin-200 {
    margin-top: var(--gap-200);
}

.section-margin-300 {
    margin-top: var(--gap-300);
}

.section-margin-400 {
    margin-top: var(--gap-400);
}

.fs-900 {
    font-size: var(--fs-900);
    line-height: 1.25;
}

.fs-800 {
    font-size: var(--fs-800);
}

.fs-700 {
    font-size: var(--fs-700);
}

.fs-500 {
    font-size: var(--fs-500);
}

.fs-400 {
    font-size: var(--fs-400);
}

.fs-300 {
    font-size: var(--fs-300);
}

.fs-200 {
    font-size: var(--fs-200);
}

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

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

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

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

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

.ff-poppins {
    font-family: var(--ff-poppins);
}

.ff-outfit {
    font-family: var(--ff-outfit);
}

/* general styles */
h2 {
    font-family: var(--ff-poppins);
    font-size: var(--fs-700);
    font-weight: 700;
    margin-bottom: .3rem;
    color: var(--clr-primary-700);
}

.large-subtitle {
    font-family: var(--ff-outfit);
    font-size: var(--fs-800);
    font-weight: 700;
    line-height: 1.25;
}

.button {
    cursor: pointer;
    border: 0;
    display: inline-block;
    border-radius: .5rem;
    font-family: var(--ff-outfit);
    font-size: var(--fs-500);
    font-weight: 600;
    background: var(--white-gradient);
    color: var(--clr-neutral-800);
    padding: calc(1.188rem - 3px) calc(2.188rem - 3px);
    box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.16);
    transition: .25s ease;
}

.button span {
    pointer-events: none;
    display: inline-block;
    transition: .25s ease;
}

.button:not(.button--rounded):hover {
    transform: scale(.97);
}

.button:not(.button--rounded):hover span {
    transform: scale(.98);
}

.button--rounded {
    display: grid;
    place-items: center;
    background: unset;
    width: 154px;
    line-height: 1.1;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--clr-primary-400);
    background-color: transparent;
    border: 2.5px solid var(--clr-primary-400);
    border-radius: 100vmax;
    padding: 0.813rem 1.9rem;
    box-shadow: none;
    transition: .25s ease;
}

.button--rounded:hover {
    font-weight: 700;
    background-color: var(--clr-primary-400);
    color: #fff;
}

.button--gradient {
    font-family: var(--ff-outfit);
    font-size: var(--fs-500);
    font-weight: 600;
    color: #fff;
    position: relative;
    border: double 2px transparent;
    background-image: var(--primary-gradient),
        var(--primary-gradient);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* main styles */
.header {
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: hsl(var(--clr-white) / .7);
    height: var(--header-height);
    display: flex;
    align-items: center;
    backdrop-filter: blur(2.5px);
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
}

.header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media(max-width: 51em) {
    .nav {
        background-color: #f1f1f1;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
        position: absolute;
        inset: 0;
        min-height: 100vh;
        text-align: center;
        padding-top: 7.688rem;
        padding-bottom: 3.438rem;
        font-size: 1.125rem;
        opacity: 0;
        pointer-events: none;
        transition: .3s ease-in-out;
        z-index: 5;
    }

    .nav__link--button {
        margin-inline: auto;
    }

    .nav[data-visible] {
        opacity: 1;
        pointer-events: all;
    }

    .nav__list {
        display: grid;
        gap: 3.125rem;
    }
}

.nav-toggle,
.header__logo {
    position: relative;
    z-index: 10;
}

.nav-toggle {
    cursor: pointer;
    border: 0;
    background-color: transparent;
    background-image: url('./assets/hamburger.svg');
    background-size: cover;
    width: 22px;
    height: 19px;
}

.nav-toggle[aria-expanded=true] {
    background-image: url('./assets/close.svg');
}

@media(min-width: 51em) {
    .nav-toggle {
        display: none;
    }

    .nav__list {
        display: flex;
        align-items: center;
        gap: clamp(1.5rem, 3vw + 1rem, 3.875rem);
    }
}

.even-cols {
    display: grid;
    gap: 1rem;
}

.even-cols-order-1 {
    order: 1;
}

.even-cols-order-2 {
    order: 2;
}

.even-cols-order-3 {
    order: 3;
}

.hero {
    padding-top: 1.75rem;
    padding-bottom: 3.063rem;
    position: relative;
    isolation: isolate;
}

.hero::before {
    content: '';
    background-image: url('./assets/hero-bg-mobile.svg');
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
}

@media(min-width: 56em) {
    .hero::before {
        content: '';
        background-image: url('./assets/hero-bg.svg');
        position: absolute;
        inset: 0;
        background-size: 100%;
        background-repeat: no-repeat;
        z-index: -1;
    }
}

.hero__text-content {
    padding-inline: 1.75rem;
}

.hero__img {
    justify-self: center;
}

.hero__button {
    justify-self: center;
}

@media(min-width: 56em) {
    .even-cols {
        grid-template-columns: 50% 1fr;
        grid-template-rows: min-content 1fr;
        gap: 0;
    }

    .hero {
        max-height: 538px;
        padding-top: min(5vw, 3.5rem);
        padding-left: min(5vw, 4.688rem);
        padding-bottom: 1.813rem;
        padding-right: 0;
    }

    .hero__text-content {
        padding: 0;
        max-width: 465px;
    }

    .hero__button {
        margin-top: 3rem;
        margin-bottom: 1rem;
        justify-self: start;
        align-self: end;
    }

    .even-cols__img {
        grid-row: 1/-1;
        grid-column: 2;
    }
}

@media(min-width: 70em) {

    .hero__img,
    .hero__img img {
        width: 550px;
    }
}

.testimonials {
    padding-top: 0.938rem;
    padding-bottom: 1.875rem;
    display: grid;
    gap: 1.813rem;
    text-align: center;
}

@media(min-width: 40em) {
    .testimonials {
        padding: 1.45rem 3.75rem;
        grid-template-columns: 1fr 1fr;
    }
}

@media(min-width: 60em) {
    .testimonials {
        padding: 1.625rem 5.75rem;
        display: flex;
        justify-content: space-between;
    }

    .testimonial {
        max-width: 140px;
    }
}

.testimonial {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

.testimonial__number {
    line-height: 1;
    font-size: 2.25rem;
}

@media(min-width: 40em) {
    .testimonial__number {
        font-size: 2.625rem;
    }
}

.about {
    text-align: center;
}

.about>div {
    padding-inline: 1.5rem;
    max-width: 550px;
    margin-inline: auto;
}

.about__img {
    justify-self: center;
}

.about__button {
    align-self: center;
}

@media(min-width: 40em) {
    .about {
        text-align: start;
    }
}

@media(min-width: 56em) {

    .about>div:nth-child(2) {
        margin-top: 1rem;
    }

    .about__button {
        align-self: flex-start;
    }
}

@media(min-width: 80em) {
    .about {
        grid-template-columns: 55% 1fr;
        width: var(--container);
        margin-inline: auto;
    }

    .about>div {
        padding: 0;
    }

    .about__img {
        align-self: center;
        width: 620px;
    }
}

.section-centered-button {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-centered-button .button {
    margin-top: 2.625rem;

}

.services__container {
    position: relative;
    isolation: isolate;
}

.services__container::before {
    content: '';
    background-image: url('./assets/services-bg-mobile.svg');
    position: absolute;
    inset: 0;
    background-size: 100%;
    background-position: 0 -35px;
    background-repeat: no-repeat;
    z-index: -1;
}

@media(min-width: 56em) {
    .services__container::before {
        background-image: url('./assets/services-bg.svg');
    }
}

.services__subtitle {
    max-width: 750px;
    margin-top: .5rem;
    margin-inline: auto;
}

.services__container {
    padding: 1.813rem;
    display: grid;
    gap: 2.2rem;
}

@media (min-width: 47em) {
    .services__container {
        grid-template-columns: 1fr 1fr;
    }
}

.service {
    background-color: hsl(var(--clr-white) / .9);
    border-radius: 0.75rem;
    text-align: center;
    padding: 1rem;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.service__title {
    line-height: 1.3;
}

.service__img {
    margin-top: -1.5rem;
    margin-inline: auto;
}

@media(min-width: 40em) {
    .services__container {
        padding: 3rem;
    }

    .service {
        border-radius: 1rem;
    }
}

@media (min-width: 65em) {
    .service {
        padding: 2.125rem 1.5rem 1.625rem 2.125rem;
        display: grid;
        grid-template-columns: 70px 1fr;
        grid-template-rows: min-content 1fr;
        text-align: start;
        align-items: center;
        row-gap: 0;
        column-gap: 2rem;
    }

    .service__subtitle {
        margin-top: .8rem;
    }

    .service__img {
        grid-row: 1/-1;
        margin: 0;
        justify-self: center;
        align-self: center;
    }

    .service__title,
    .service__subtitle {
        grid-column: 2;
    }
}

.process {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.process>div:first-child {
    text-align: center;
}

.process__subtitle {
    max-width: 720px;
    margin-inline: auto;
    margin-top: .6rem;
}

.process__container {
    margin-top: 1.688rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
}

.process-step {
    max-width: 336px;
    border-radius: var(--section-border-radius);
    padding: 1.25rem 1.875rem;
    gap: .5rem;
    position: relative;
    isolation: isolate;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(2.5px);
    background-color: hsl(226, 100%, 97%, .8);
}

.process-step.animate:nth-child(1) {
    animation: light-up 3s ease forwards;
}

.process-step.animate:nth-child(2) {
    animation: light-up 3s ease 2.5s forwards;
}

.process-step.animate:nth-child(3) {
    animation: light-up 3s ease 5s forwards;
}


.process-step:nth-child(1) .process-step__number.animate {
    animation: light-up-text 3s ease forwards;
}

.process-step:nth-child(2) .process-step__number.animate {
    animation: light-up-text 3s ease 2.5s forwards;
}

.process-step:nth-child(3) .process-step__number.animate {
    animation: light-up-text 3s ease 5s forwards;
}

@keyframes light-up {
    0% {
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
        backdrop-filter: blur(2.5px);
        background-color: hsl(226, 100%, 97%, .8);
    }

    20% {
        background-color: var(--clr-accent-600);
        box-shadow: none;
        backdrop-filter: blur(0);
    }

    90% {
        background-color: var(--clr-accent-600);
        box-shadow: none;
        backdrop-filter: blur(0);
    }

    100% {
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
        backdrop-filter: blur(2.5px);
        background-color: hsl(226, 100%, 97%, .8);
    }
}

.process-step__number {
    position: absolute;
    top: 0;
    left: 1rem;
    line-height: 1;
    color: var(--clr-accent-600);
    font-family: var(--ff-outfit);
    font-weight: 700;
    font-size: 6rem;
    z-index: -1;
    transition: .25s ease;
}

@keyframes light-up-text {
    0% {
        color: var(--clr-accent-600);
    }

    20% {
        color: #fff;
    }

    90% {
        color: #fff;
    }

    100% {
        color: var(--clr-accent-600);
    }
}

.process-step__title {
    text-align: center;
}

.process__button {
    align-self: center;
}

@media(min-width: 66em) {
    .process {
        align-items: flex-start;
    }

    .process>div:first-child {
        text-align: start;
    }

    .process__container {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        margin-top: 2.875rem;
        gap: 2.25rem;
    }

    .process-step {
        max-width: 324px;
        width: 100%;
        align-items: flex-start;
        padding: 1.688rem 0 3.313rem 2.5rem;
        gap: 1rem;
    }

    .process-step__subtitle {
        max-width: 230px;
    }

    .process-step__title {
        align-self: flex-start;
        text-align: start;
    }

    .process-step__number {
        position: relative;
        font-size: 3rem;
        left: 0;
    }
}

.contact {
    padding-bottom: 7rem;
}

.contact__content {
    padding: 2.125rem 1.813rem;
    position: relative;
    isolation: isolate;
}

.contact__content::before {
    content: '';
    background-image: url('./assets/contact-bg-mobile.svg');
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
}

.contact__paper {
    z-index: -1;
    position: absolute;
}

.contact__paper--top {
    top: -50px;
    right: -175px;
}

.contact__paper--bottom {
    bottom: -160px;
    left: -75px;
}

@media(min-width: 56em) {
    .contact__paper--top {
        top: 130px;
        right: -5%;
    }

    .contact__paper--bottom {
        bottom: 35px;
        left: -55px;
    }

    .contact__content::before {
        content: '';
        background-image: url('./assets/contact-bg.svg');
        position: absolute;
        inset: 0;
        background-size: 100%;
        background-repeat: no-repeat;
        z-index: -1;
    }
}

@media(min-width: 40em) {
    .contact__content {
        padding-top: 3rem;
        padding-bottom: 4rem;
    }
}

.contact label {
    margin-top: 1.125rem;
    margin-bottom: .4rem;
    display: inline-block;
    color: var(--clr-neutral-700);
    font-weight: 500;
}

.contact input,
.contact textarea {
    backdrop-filter: blur(2.5px);
    background-color: hsl(var(--clr-white) / .8);
    border: 0;
    border-radius: .5rem;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
    border: 2px solid transparent;
}

.contact input,
.contact textarea {
    padding-left: .8rem;
    min-height: 10px;
}

.contact input:focus,
.contact textarea:focus {
    border-color: var(--clr-accent-600);
    outline: none;
}

.contact-form {
    max-width: 465px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
}

.contact-form__button {
    align-self: center;
    margin-top: 2rem;
}

.contact textarea {
    resize: none;
    padding-top: .8rem;
    min-height: 160px;
}

.footer {
    margin-top: auto;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
    position: relative;
    isolation: isolate;
}

.footer::before {
    content: '';
    background-image: url('./assets/footer-bg-mobile.svg');
    position: absolute;
    inset: 0;
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: -1;
}

@media(min-width: 56em) {
    .footer::before {
        content: '';
        background-image: url('./assets/footer-bg.svg');
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: -50px 0;
        background-repeat: no-repeat;
        z-index: -1;
    }
}

.footer-nav__list {
    margin-block: 2.313rem;
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
    align-items: center;
}

.footer__logo {
    margin-inline: auto;
}

.footer-nav__link:hover {
    text-decoration: underline;
}

.footer__copyright {
    text-align: center;
}

@media(min-width: 40em) {
    .footer {
        padding-bottom: 3rem;
    }

    .footer__copyright {
        text-align: start;
    }

    .footer__logo {
        margin: unset;
    }

    .footer-nav__list {
        flex-direction: row;
        gap: 2.438rem;
    }

    .footer__flex-group {
        margin-bottom: 3.063rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.privacy-policy section:last-child {
    margin-bottom: 3.563rem;
}

.privacy-policy {
    padding-top: clamp(4.438rem, 10vw + 1rem, 7.25rem);
}