/* HOMEPAGE */



/* Adjust scroll margins for sections */

#my-work,
#about-me,
#contacts {
    scroll-margin-top: var(--sz-15);
}



/* Custom styling of common classes */

.page-container {
    background-color: hsl(var(--clr-grape-35));
}



/* Hero Home Desktop */

.home-hero-dsk {
    background-color: hsl(var(--clr-grape-15));

    position: relative;

    overflow: hidden;

    display: none;

    @media screen and (min-width: 576px) {}

    @media screen and (min-width: 768px) {}

    @media screen and (min-width: 992px) {
        display: block;
        height: clamp(500px, 70vh, 600px);
    }

    @media screen and (min-width: 1200px) {
        display: block;
        height: clamp(550px, 70vh, 600px);
    }

    @media screen and (min-width: 1400px) {
        display: block;
        height: clamp(550px, 70vh, 600px);
    }
}

#home-hero-dsk__background-wave {
    position: absolute;
    bottom: 0;

    z-index: 1;

    fill: hsl(var(--clr-plump-purple-60));

    width: 100%;
    height: 337px;

    @media screen and (min-width: 576px) {}

    @media screen and (min-width: 768px) {
        height: 250px;
    }

    @media screen and (min-width: 992px) {
        height: 300px;
    }

    @media screen and (min-width: 1200px) {
        height: 337px;
    }

    @media screen and (min-width: 1400px) {
        height: 337px;
    }
}

#home-hero-dsk__foreground-wave {
    position: absolute;
    bottom: -2px;

    z-index: 3;

    width: 100%;

    fill: hsl(var(--clr-grape-35));

    width: 100%;
    height: 134px;

    @media screen and (min-width: 576px) {}

    @media screen and (min-width: 768px) {
        heigth: 100px;
    }

    @media screen and (min-width: 992px) {
        heigth: 100px;
    }

    @media screen and (min-width: 1200px) {
        height: 100px;
    }

    @media screen and (min-width: 1400px) {
        height: 134px;
    }
}

.home-hero-dsk__container {
    height: 100%;

    @media screen and (min-width: 576px) {}

    @media screen and (min-width: 768px) {}

    @media screen and (min-width: 992px) {
        padding: 0 0;
    }

    @media screen and (min-width: 1200px) {
        padding: 0 var(--sz-10);
    }

    @media screen and (min-width: 1400px) {
        padding: 0 var(--sz-15);
    }
}

.home-hero-dsk__content {
    z-index: 4;

    @media screen and (min-width: 576px) {}

    @media screen and (min-width: 768px) {}

    @media screen and (min-width: 992px) {}

    @media screen and (min-width: 1200px) {
        padding-bottom: 50px;
    }

    @media screen and (min-width: 1400px) {
        padding-bottom: 50px;
    }
}

.home-hero-dsk__image {
    align-self: end;
    z-index: 2
}



/* Hero Home Mobile */

.home-hero-mob {
    background-color: hsl(var(--clr-grape-15));

    position: relative;

    overflow: hidden;

    display: block;

    height: clamp(300px, 50vh, 440px);

    @media screen and (min-width: 365px) {
        height: clamp(300px, 50vh, 440px);
    }

    @media screen and (min-width: 576px) {
        height: clamp(200px, 50vh, 350px);
    }

    @media screen and (min-width: 768px) {
        height: initial;
    }

    @media screen and (min-width: 992px) {
        display: none;
    }
}

#home-hero-mob__background-wave {
    position: absolute;
    bottom: 6px;

    z-index: 1;

    fill: hsl(var(--clr-plump-purple-60));

    width: 100%;
    height: 40px;

    @media screen and (min-width: 350px) {
        height: 119px;        
    }

    @media screen and (min-width: 576px) {}

    @media screen and (min-width: 768px) {
        /* height: 250px; */
    }

    @media screen and (min-width: 992px) {
        /* height: 300px; */
    }

    @media screen and (min-width: 1200px) {}

    @media screen and (min-width: 1400px) {}
}

#home-hero-mob__foreground-wave {
    position: absolute;
    bottom: -2px;

    z-index: 3;

    width: 100%;

    fill: hsl(var(--clr-grape-35));

    width: 100%;
    height: 39px;
    
    

    @media screen and (min-width: 576px) {}

    @media screen and (min-width: 768px) {
        heigth: 100px;
    }

    @media screen and (min-width: 992px) {
        heigth: 100px;
    }

    @media screen and (min-width: 1200px) {
        height: 100px;
    }

    @media screen and (min-width: 1400px) {
        height: 134px;
    }
}

.home-hero-mob__container {
    height: 100%;

    margin-right: calc((-1)*(var(--sz-7)));

    @media screen and (min-width: 576px) {
        /* padding: 0 var(--sz-15); */
        margin: 0 auto;
    }

    @media screen and (min-width: 768px) {
        /* padding: 0 var(--sz-15); */
    }

    @media screen and (min-width: 992px) {}

    @media screen and (min-width: 1200px) {}

    @media screen and (min-width: 1400px) {}
}

.home-hero-mob__content {
    z-index: 4;

    @media screen and (max-width: 350px) {
        grid-column: span 12;
        margin-right: var(--sz-7);
    }

    @media screen and (min-width: 400px) {
        padding-bottom: 30px;
    }

    @media screen and (min-width: 576px) {}

    @media screen and (min-width: 768px) {}

    @media screen and (min-width: 992px) {}

    @media screen and (min-width: 1200px) {}

    @media screen and (min-width: 1400px) {}
}

.home-her-mob__picture {

    @media screen and (max-width: 350px) {
        display: none;
        grid-column: span 0;
    }
}

.home-hero-mob__custom-typography__display-text {
    font-family: var(--ff-serif-text, "DM Serif Text");
    font-size: var(--fs-lg, 24px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-md, 30px);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-color: hsl(var(--clr-bittersweet-60), 1);
    text-decoration-thickness: 10%;
    text-underline-offset: 9%;
    text-underline-position: from-font;

    @media screen and (min-width: 576px) {
        font-size: var(--fs-lg, 24px);
        line-height: var(--lh-lg, 32px);
    }

    @media screen and (min-width: 768px) {
        font-size: var(--fs-2xl, 32px);
        line-height: var(--lh-2xl, 40px);
    }
}

.home-hero-mob__custom-typography__body-medium {
    font-family: var(--ff-sans, "Funnel Sans");
    font-size: var(--fs-xs, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-xs, 20px);

    @media screen and (min-width: 576px) {
        font-size: var(--fs-sm, 16px);
        line-height: var(--lh-sm, 23px);
    }
}

.home-hero-mob__custom-typography__body-medium-e {
    font-family: var(--ff-sans, "Funnel Sans");
    font-size: var(--fs-xs, 14px);
    font-style: normal;
    font-weight: 700;
    line-height: var(--lh-xs, 20px);

    @media screen and (min-width: 576px) {
        font-size: var(--fs-sm, 16px);
        line-height: var(--lh-sm, 23px);
    }
}

.home-hero-mob__padding {
    @media screen and (min-width: 768px) {
        padding-top: var(--sz-3);
        padding-bottom: var(--sz-4);
    }
}

.home-hero-mob__image {
    align-self: end;
    z-index: 2;

    display: none;

    @media screen and (min-width: 576px) {
        display: initial;
    }
}

.home-hero-mob-xs__image {
    align-self: end;
    z-index: 2;

    display: initial;

    @media screen and (min-width: 300px) {
        display: initial;
    }

    @media screen and (min-width: 576px) {
        display: none;
    }
}

.home-hero-mob__button {
    @media screen and (min-width: 576px) {}

    @media screen and (min-width: 768px) {}

    @media screen and (min-width: 992px) {
        display: none;
    }

    @media screen and (min-width: 1200px) {
        display: none;
    }

    @media screen and (min-width: 1400px) {
        display: none;
    }
}



/* Social proof */

.social-proof__title {
    color: hsl(var(--clr-neutral-90));
}

.social-proof__carousel {
    display: block;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* border: 3px solid green; */
}

.social-proof__carousel::-webkit-scrollbar {
    display: none;
}

.social-proof__logo-container {
    display: inline-block;
    white-space: nowrap;

    padding-right: 35px;

    /* border: 3px solid red; */
    animation: spin 40s infinite linear;
}

.social-proof__logo {
    display: inline-block;
    white-space: nowrap;
    opacity: 0.8;
    width: 200px;
    margin-right: 35px;
}

.social-proof__logo>img {
    /* height: 100px; */
}

@keyframes spin {
    from {
        translate: 0;
    }

    to {
        translate: -100%;
    }
}

.about-me p {
    margin-bottom: var(--sz-5, 16px);
}

.about-me p:last-of-type {
    margin-bottom: initial;
}


.about-me__download-container {
    display: flex;

    justify-content: center;

    @media screen and (min-width: 992px) {
        justify-content: start;
    }
}

.contact-me__button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sz-7);
    justify-content: center;

    @media screen and (min-width: 992px) {
        flex-direction: row;
    }
}