:root {
    --body-margin: 2rem;

    --light: #f7f7f7;
    --dark: #141414;
    color-scheme: light dark;
}






body {
    height: auto !important;
    margin: var(--body-margin) !important;
    font-family: "Peignot", sans-serif;
    background-color: light-dark(var(--dark), var(--light));
    color: var(--color);
    line-height: 1;
    font-size: 2rem;
    color: light-dark(var(--dark), var(--light));
    background-color: light-dark(var(--light), Var(--dark));
}

a {
    display: inline-block;
}

a,
li {
    transition: all 0.2s ease-in-out;

}

a:hover,
ul.expertise li:hover,
section.action__area:hover {
    transform: scale(1.02);
    box-shadow: 2px 47px 96px 0px rgba(245, 223, 77, 0.56);
    -webkit-box-shadow: 2px 47px 96px 0px rgba(245, 223, 77, 0.56);
    -moz-box-shadow: 2px 47px 96px 0px rgba(245, 223, 77, 0.56);

    background-color: rgba(255, 255, 255, 0.1);
}

ul.clients li:hover {

    box-shadow: 0px 19px 40px -10px rgba(245, 223, 77, 0.56);
    -webkit-box-shadow: 0px 19px 40px -10px rgba(245, 223, 77, 0.56);
    -moz-box-shadow: 0px 19px 40px -10px rgba(245, 223, 77, 0.56);

}

a:active {

    transform: scale(0.9);
    box-shadow: 2px 47px 96px 0px rgba(255, 223, 19, 0.81);
    -webkit-box-shadow: 2px 47px 96px 0px rgba(255, 223, 19, 0.81);
    -moz-box-shadow: 2px 47px 96px 0px rgba(255, 223, 19, 0.81);
}

address *:hover {}

header.logotype {
    position: sticky;
    top: var(--body-margin);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    z-index: 10;

}

/* header.animated {
    animation: logo 2.5s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

header.animated>svg {
    animation: svgLogo 2.5s forwards cubic-bezier(0.16, 1, 0.3, 1);
    width: 30vw;

} */


/* 
@keyframes logo {
    from {

        top: calc(50dvh - var(--body-margin));
    }

    70% {

        top: calc(50dvh - var(--body-margin));
        transform: translateY(0);

    }

    100% {
        scale: 1;
        top: var(--body-margin);
    }
}

@keyframes svgLogo {
    0% {
        width: 30vw;

    }

    40% {
        width: 30vw;

    }

    to {
        width: 10vw;
        opacity: 1;
    }

} */

header.logotype svg {
    width: 14vw;
    height: auto;
    max-width: 100%;

    margin-bottom: 4rem;

    >* {
        fill: light-dark(var(--dark), var(--light)) !important;
    }
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    font-weight: 800;
    text-transform: uppercase;
    color: light-dark(var(--dark), var(--light));
    margin: 0;
    padding: 0;
}


h2 {
    text-decoration: underline;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

ul.expertise li.animated {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s cubic-bezier(0.66, 0, 0.157, 1.274) forwards;
    box-shadow: rgba(245, 223, 77, 0.3)
}

@keyframes fadeInUp {
    90% {}

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

    }
}


h1.introduction {
    font-size: 2rem;
    margin: auto;
    width: clamp(100%, 50%, 90%);
    opacity: 0;
}

ul.expertise {
    list-style: none;
    padding: 0;
    margin: .2rem auto;
    width: clamp(100%, 50%, 90%);
    display: flex;
    text-transform: uppercase;
    gap: .4rem;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 1.5rem;
    align-items: center;

}


ul.expertise li {
    border-bottom: 1px solid light-dark(var(--dark), var(--light));

    opacity: 0;
    padding: .5rem .8rem .2rem .8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: light-dark(var(--light), var(--dark));
}

/* section.action__area {
    margin: 2rem auto;
    padding: 1rem;
    border-radius: 100%;
    border: 1px solid light-dark(var(--dark), var(--light));
    width: 15%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    transition: all .3s ease;

} */

section.contacts {
    margin: auto;
    width: clamp(50%, 89%, 100%);
    text-align: center;
    text-transform: uppercase;
    margin: 7rem auto
}


.contacts {
    opacity: 0;
    transform: translateY(20px);
}

.contacts.animated {
    animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
        transform: translate(0);
    }
}

section.contacts address,
section.socials {

    margin: 1rem 0 .5rem 0;
    padding: 0;
}

section.contacts a,
section.socials a.button {
    border: 1px solid light-dark(var(--dark), var(--light));
    padding: .5rem .8rem .2rem .8rem;
    text-decoration: none;
    color: light-dark(var(--dark), var(--light));
    margin: 2rem;


}






.scroller {
    max-width: 100%;
    font-size: 1.5rem;

}

.scroller.mobile {
    display: none;
    visibility: hidden
}

.scroller:last-of-type {
    padding: 0 0 2rem 0;
}

.scroller_inner {
    padding-block: .5rem 5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

@media (width<768px) {
    .scroller_inner {
        padding-block: .5rem .5rem;
    }

}

ul.clients li {
    border-bottom: 1px solid light-dark(var(--dark), var(--light));
    padding: .5rem .8rem .2rem .8rem;
    text-transform: uppercase;
}


section.clients {
    opacity: 0;

}

.clients.animated {
    animation: fadeIn 0.5s forwards;
}


.scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg,
            transparent,
            light-dark(var(--light), var(--dark)) 20%,
            light-dark(var(--light), var(--dark)) 80%,
            transparent);
    mask: linear-gradient(90deg, transparent, light-dark(var(--light), var(--dark)) 20%, light-dark(var(--light), var(--dark)) 80%, transparent);
}

.scroller[data-animated="true"] .scroller_inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
    transition: transform 0.3s linear;
}

.scroller[data-direction="right"] {
    --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
    --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
    --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
    --_animation-duration: 150s;
}

.scroller:hover .scroller_inner {
    animation-play-state: paused;
}

@keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.5rem));
    }
}



.reasons-button {
    font-family: inherit;
    font-size: 100%;
    display: inline-block;
    position: relative;
    overflow: hidden;
    height: 3.5rem;


    width: 100%;

    border: none;
    background: transparent;
    /* border: 1px solid light-dark(var(--dark), var(--light)); */



}

.reasons-container {

    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    transition: transform 0.8s cubic-bezier(0.304, 1.363, 0.64, 1);
}

ul.reasons-container li {
    padding: .5rem .8rem .2rem .8rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;

}

main {
    min-height: 100vh;
    background-color: light-dark(var(--light), Var(--dark));
    ;
    /* Needed to obscure the footer behind it */
    position: relative;
    /* Needed to make z-index work */
    z-index: 1;
    box-shadow: 0px 51px 60px -71px rgba(0, 0, 0, 0.17);
    -webkit-box-shadow: 0px 51px 60px -71px rgba(0, 0, 0, 0.17);
    -moz-box-shadow: 0px 51px 60px -71px rgba(0, 0, 0, 0.17);
    /* Make sure the content is on top of the footer */
}

footer {
    display: flex;
    height: 20vh;
    background-color: light-dark(var(--light), Var(--dark));

    position: sticky;
    bottom: 0;
    left: 0;
}

section.socials {
    margin: auto;
    width: 100%;
    text-align: center;
    text-transform: uppercase;

    ul {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        justify-content: center;
    }

}



@media (width <=780px) {
    main {
        box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
    }

    header.logotype>svg {
        width: 30vw;

    }

    .scroller[data-speed="slow"] {
        --_animation-duration: 150s;
    }

    .scroller.mobile {
        display: block;
        visibility: visible;
    }

    .scroller[data-animated="true"] {
        overflow: hidden;
        -webkit-mask: linear-gradient(90deg,
                transparent,
                light-dark(var(--light), var(--dark)) 20%,
                light-dark(var(--light), var(--dark)) 80%,
                transparent);
        mask: none
    }

    .scroller nav.logotype svg {
        width: 15vw;
    }

    html,
    body {

        height: 100%;
        margin: 0 !important;
        /* scroll-snap-type: y mandatory; */
        overflow-y: scroll;
    }

    body {
        display: flex;
        height: auto;
        flex-direction: column;
        justify-content: space-around;

    }

    div.introduction,
    section.contacts,
    section.clients>h2 {
        margin: var(--body-margin) !important;
    }

    div.introduction {
        padding-block: 1rem;

        scroll-snap-align: center;
        order: 1;



        ul.expertise {
            font-size: 4vw;
            position: sticky;
            top: var(--body-margin);
            flex-direction: row;
            justify-content: space-around;
            flex-wrap: wrap;
        }
    }

    div.introduction h1,
    section.contacts,
    h2 {
        font-size: 6vw;
    }

    section.clients {
        order: 3;
        scroll-snap-align: center;
        height: auto;
        padding-block: 1rem;
    }

    section.contacts {
        width: calc(100% - var(--body-margin) * 2);
        order: 2;
        scroll-snap-align: center;
        height: auto;
        padding-block: 1rem;
        /* position: fixed; */

        address {
            display: flex;
            flex-direction: row;


            gap: 1rem;
            align-items: center;
            justify-content: center;
            margin: 1rem;
        }

        a {
            margin: 0rem;
        }
    }

    footer {
        height: 10dvh;
    }

    section.socials {
        font-size: 6vw;
        width: 100%;

        a.button {
            margin: 0rem;
        }
    }
}