/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.12,
* Autoprefixer: v10.4.4
* Browsers: last 4 version
*/

@font-face {
    font-family: "Overpass";
    src: url("../fonts/Overpass-VariableFont_wght.ttf");
}
@font-face {
    font-family: "Ubuntu";
    src: url("../fonts/Ubuntu-Regular.ttf");
}
:root{
    --var-cta-text-light-red: hsl(356, 100%, 66%);
    --var-cta-hover-very-light-red: hsl(355, 100%, 74%);
    --var-headings-very-dark-blue: hsl(208, 49%, 24%);
    --var-headings-very-dark-blue-trans: hsla(208, 49%, 24%, 80%);
    --var-text-white: hsl(0, 0%, 100%);
    --var-text-white-transparent: hsla(0, 0%, 100%, 68%);
    --var-footer-text-grayish-blue: hsl(240, 2%, 79%);
    --var-footer-text-grayish-blue-trans: hsla(240, 2%, 79%, 50%);
    --var-body-copy-very-dark-grayish-blue: hsl(207, 13%, 34%);
    --var-footer-background-very-dark-black-blue: hsl(240, 10%, 16%);
    --var-gradient-cta-very-light-red: hsl(13, 100%, 72%);
    --var-gradient-cta-light-red: hsl(353, 100%, 62%);
    --var-gradient-body-very-dark-gray-blue: hsl(237, 17%, 21%);
    --var-gradient-body-very-dark-desaturated-blue: hsl(237, 23%, 32%);
    --var-margin-desktop: 12vw;
    --var-margin-mobile: 6vw;
}
*, *::before, *::after{
    -webkit-box-sizing: inherit;
            box-sizing: inherit;
}
html{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
body{
    font-family: Overpass;
    font-size: 16px;
}
.container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
}
header{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-left: var(--var-margin-desktop);
    padding-right: var(--var-margin-desktop);
    background:url(../images/bg-pattern-intro-desktop.svg), -webkit-gradient(linear, left top, right top, from(var(--var-gradient-cta-very-light-red)), to(var(--var-gradient-cta-light-red)));
    background:url(../images/bg-pattern-intro-desktop.svg), -o-linear-gradient(left, var(--var-gradient-cta-very-light-red), var(--var-gradient-cta-light-red));
    background:url(../images/bg-pattern-intro-desktop.svg), linear-gradient(to right, var(--var-gradient-cta-very-light-red), var(--var-gradient-cta-light-red));
    background-repeat: no-repeat;
    background-position: 25%;
    border-radius: 0 0 0 5rem;
}
.navbar{
    width: 100%;
}
.burger-menu{
    display: none;
}
.nav-items{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 1.5rem;
    color: var(--var-text-white);
}
.nav-item{
    position: relative;
    font-size: 0.8rem;
    font-weight:700;
    font-family: Ubuntu;
    color: var(--var-text-white-transparent);
}
.nav-item img{
    margin-left: 4px;
}
.link{
    text-decoration: none;
    color: var(--var-text-white-transparent);
}
.nav-item-dropdown{
    display: none;
}
.links{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    row-gap: 1.1rem;
    width: 155px;
    background-color: var(--var-text-white);
    color: hsl(0, 0%, 0%);
    padding: 2rem 1.2rem;
    border-radius: 0.5rem;
    -webkit-box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
            box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
}
.links a{
    font-size: 0.9rem;
    font-weight: 400;
    text-decoration: none;
}
.register{
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 0.5rem;
}
.button-register{
    padding: 0 2rem;
    border-radius: 1.5rem;
}
.banner{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-bottom: 10rem;
    gap: 3rem;
}
.banner-text{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: var(--var-text-white);
    gap: 0.5rem;
}
.banner-buttons{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 1rem;
}
button{
    font-family: Ubuntu;
    border: transparent;
    background-color: transparent;
}
.button-white{
    background-color: var(--var-text-white);
    color: var(--var-cta-text-light-red);
    border: 0 solid transparent;
    text-align: center;
    font-weight: 600;
}
.button-white:hover{
    background-color: var(--var-cta-hover-very-light-red);
    color: var(--var-text-white);
}
.button-simple{
    background-color: transparent;
    color: var(--var-text-white)
}
.button-banner{
    padding: 0.8rem 1rem;
    border-radius: 1.6rem;
}
.button-banner.button-simple{
    border: 1px solid var(--var-text-white-transparent);
}
.button-banner.button-simple:hover{
    color: var(--var-cta-text-light-red);
    background-color: var(--var-text-white);
    border: 1px solid var(--var-text-white);
}
main{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 3rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.attributes{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4rem;
}
.attribute{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1.5rem;
}
.attribute-heading, .attributes-heading{
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--var-headings-very-dark-blue);
}
.attribute-description{
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--var-body-copy-very-dark-grayish-blue);
    line-height: 1.9rem;
}
.bloc-2{
    position: relative;
    overflow: visible;
    padding-top: 7rem;
    padding-bottom: 7rem;
    border-radius: 0 6rem 0 8rem;
    overflow: visible !important;
}
.bloc-2 .attribute-heading{
    font-size: 2.4rem;
    color: var(--var-text-white);
}
.bloc-2 .attribute-description{
    color: var(--var-text-white);
}
.footer{
    width: 100%;
    background-color: var(--var-footer-background-very-dark-black-blue);
    padding-left: var(--var-margin-desktop);
    padding-top: 6rem;
    padding-bottom: 7rem;
    border-radius: 0 6rem 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-column-gap: 12rem;
       -moz-column-gap: 12rem;
            column-gap: 12rem;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.footer-navbar{
    padding-top: 0.8rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 12rem;
}
.footer-nav{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 3.5rem;
}
.footer-nav ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1rem;
}
.footer-nav-item{
    font-size: 1rem;
    color: var(--var-text-white);
}
.footer-nav-link{
    text-decoration: none;
    color: var(--var-footer-text-grayish-blue);
}
.footer-nav-link:hover{
    text-decoration: underline;
}
@media screen and (min-width: 668px) and (max-width: 1366px) {
    .bloc-2 .attribute-heading{
        font-size: 2.2rem !important;
    }
}
@media screen and (min-width: 668px) {
    .navbar{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        gap: 3.5rem;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        padding-bottom: 8rem;
        padding-top: 5rem;
        z-index: 3;
    }
    .navigation{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-item-align: stretch;
            -ms-grid-row-align: stretch;
            align-self: stretch;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        width: 100%;
    }
    .nav-item:hover>.link{
        color: var(--var-text-white);
        text-decoration: underline;
        font-weight: 700;
    }
    .nav-item:hover picture img{
        -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
                transform: rotate(180deg);
    }
    .nav-item:hover .nav-item-dropdown{
        position: absolute;
        display: block;
        -webkit-transform: translateX(-1.5rem);
            -ms-transform: translateX(-1.5rem);
                transform: translateX(-1.5rem);
        background-color: transparent;
        padding-top: 1.6rem;
    }
    .links li:hover a{
        font-weight: 700;
    }
    .button-register.button-simple{
        font-size: 1rem;
        font-weight: 700;
        color: var(--var-text-white-transparent);
    }
    .button-register.button-white{
        width: 7.5rem;
        font-size: 0.9rem;
        font-weight: 600;
    }
    .banner-text-heading{
        font-size: 3.8rem;
        font-weight: 500;
    }
    .banner-text-description{
        font-size: 1.2rem;
        font-weight: 400;
        color: var(--var-text-white-transparent);
    }
    .attributes-bloc{
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 50% 50%;
        grid-template-columns: 50% 50%;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        overflow: hidden;
    }
    .bloc-1{
        position: relative;
    }
    .attributes-heading{
        position: absolute;
        font-size: 2rem;
        left: 50%;
        top: 8%;
        -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
                transform: translateX(-50%);
    }
    .bloc-1 .attributes{
        padding-left: var(--var-margin-desktop);
    }
    .illustration-1{
        -webkit-transform: translateX(8%);
            -ms-transform: translateX(8%);
                transform: translateX(8%); 
    }
    .bloc-2{
        background: url(../images/bg-pattern-circles.svg), -o-linear-gradient(50deg, var(--var-gradient-body-very-dark-gray-blue), var(--var-gradient-body-very-dark-desaturated-blue));
        background: url(../images/bg-pattern-circles.svg), linear-gradient(40deg, var(--var-gradient-body-very-dark-gray-blue), var(--var-gradient-body-very-dark-desaturated-blue));;
        background-repeat: no-repeat;
        background-position: -52% 85%;
    }
    .bloc-2 .attributes{
        padding-right: var(--var-margin-desktop);
    }
    .illustration-2{
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        height: 100%;
        overflow: visible;
    }
    .phones{
        margin-left: 12vw;
        -webkit-transform: translateX(-40px) translateY(-30%);
            -ms-transform: translateX(-40px) translateY(-30%);
                transform: translateX(-40px) translateY(-30%);
        position: absolute;
        width: 552px;
        height: 579px;
    }
    .illustration-3{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
    }
    .bloc-3 .attributes{
        padding-right: var(--var-margin-desktop);
    }
    .illustration-3 img{
        -webkit-transform: translateX(-28.5%);
            -ms-transform: translateX(-28.5%);
                transform: translateX(-28.5%);
    }
}
@media screen and (max-width: 667px) {
    header{
        padding-right: var(--var-margin-mobile);
        padding-left: var(--var-margin-mobile);
        background:url(../images/bg-pattern-intro-mobile.svg), -webkit-gradient(linear, left top, left bottom, from(var(--var-gradient-cta-very-light-red)), to(var(--var-gradient-cta-light-red)));
        background:url(../images/bg-pattern-intro-mobile.svg), -o-linear-gradient(top, var(--var-gradient-cta-very-light-red), var(--var-gradient-cta-light-red));
        background:url(../images/bg-pattern-intro-mobile.svg), linear-gradient(to bottom, var(--var-gradient-cta-very-light-red), var(--var-gradient-cta-light-red));
        background-repeat: no-repeat;
        background-position: 34% 34%;
    }
    .navbar{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        padding-top: 4rem;
        padding-bottom: 6rem;
        position: relative;
    }
    .navbar-mobile{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
    .burger-menu{
        display: inherit;
    }
    .navigation{
        display: none;
    }
    .navigation.opened{
        position:absolute;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        width: 100%;
        background-color: var(--var-text-white);
        padding: 6vw;
        gap: 2rem;
        -webkit-transform: translateY(5rem);
            -ms-transform: translateY(5rem);
                transform: translateY(5rem);
        -webkit-box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
                box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
    }
    nav, .nav-items, .nav-item, .nav-item-dropdown{
        width: 100%;
    }
    .nav-items{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 2rem;
    }
    .nav-item{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .link{
        color: var(--var-headings-very-dark-blue);
        font-size: 1.1rem;
    }
    .nav-item.opened>.link{
        color: var(--var-headings-very-dark-blue-trans);
    }
    .nav-item.opened picture img{
        -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
                transform: rotate(180deg);
    }
    .nav-item-dropdown ul{
        background-color: var(--var-footer-text-grayish-blue-trans);
        width: 100%;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-shadow: none;
                box-shadow: none;
    }
    .nav-item.opened .nav-item-dropdown{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: inherit;
        padding-top: 1.5rem;
    }
    .links a{
        font-size: 1rem;
        font-weight: 700;
        color: var(--var-headings-very-dark-blue-trans);
    }
    .register{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        border-top: 1px solid var(--var-footer-text-grayish-blue);
        padding-top: 1.2rem;
        padding-bottom: 0.5rem;
    }
    .button-register.button-simple{
        font-size: 1.1rem;
        color: var(--var-gradient-body-very-dark-desaturated-blue) !important;
        padding: 0.8rem;
        font-weight: 600;
        color: var(--var-text-white-transparent);
    }
    .button-register.button-white{
        color: var(--var-text-white);
        width: 7.5rem;
        font-size: 1rem;
        font-weight: 600;
        padding: 0.8rem;
        background: -webkit-gradient(linear, left top, right bottom, from(var(--var-gradient-cta-very-light-red)), to(var(--var-gradient-cta-light-red)));
        background: -o-linear-gradient(top left, var(--var-gradient-cta-very-light-red), var(--var-gradient-cta-light-red));
        background: linear-gradient(to bottom right, var(--var-gradient-cta-very-light-red), var(--var-gradient-cta-light-red));
    }
    .banner-text{
        gap: 1.5rem;
    }
    .attributes{
        gap: 3rem;
    }
    .attributes-heading{
        -webkit-box-ordinal-group: -2;
            -ms-flex-order: -3;
                order: -3;
        text-align: center;
    }
    .banner-text-heading{
        font-size: 2.3rem;
        font-weight: 500;
        text-align: center;
    }
    .banner-text-description{
        font-size: 1.2rem;
        font-weight: 400;
        color: var(--var-text-white-transparent);
        text-align: center;
    }
    .attributes-bloc{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        overflow: hidden;
        padding-left: var(--var-margin-mobile);
        padding-right: var(--var-margin-mobile);
        gap: 2rem;
    }
    .attribute-heading{
        text-align: center;
    }
    .attribute-description{
        text-align: center;
    }
    .illustration{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-ordinal-group: -1;
            -ms-flex-order: -2;
                order: -2;
    }
    .bloc-2{
        margin-top: 50%;
        background: url(../images/bg-pattern-circles.svg), -webkit-gradient(linear, left top, left bottom, from(var(--var-gradient-body-very-dark-gray-blue)), to(var(--var-gradient-body-very-dark-desaturated-blue)));
        background: url(../images/bg-pattern-circles.svg), -o-linear-gradient(top, var(--var-gradient-body-very-dark-gray-blue), var(--var-gradient-body-very-dark-desaturated-blue));
        background: url(../images/bg-pattern-circles.svg), linear-gradient(to bottom, var(--var-gradient-body-very-dark-gray-blue), var(--var-gradient-body-very-dark-desaturated-blue));;
        background-repeat: no-repeat;
        background-size: 590px;
        background-position: 50% -900%;
    }
    .bloc-2 .attributes{
        padding-top: 5rem;
    }
    .phones{
        position: absolute;
        width: 100vw;
        height: auto;
        left: 50%;
        top: 0;
        -webkit-transform: translateX(-50%) translateY(-45%);
            -ms-transform: translateX(-50%) translateY(-45%);
                transform: translateX(-50%) translateY(-45%);
    }
    .footer{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        padding-left: 0;
        gap: 4rem;
    }
    .footer-navbar{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 3rem;
    }
    .footer-nav{
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 2rem;
    }
    .footer-nav ul{
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
}