.wrapperTpl.page {
    width: 100%;
}
.welcome-area.home {
    position: relative;
    height: 100vh;

    .welcome-bg{
        position: absolute;
        background-image: url('../../public/images/header/header-bg-2.jpg');
        background-size: cover;
        width: 100%;
        height: 100%;
        mask-image: url('../../public/images/header/header-shape2.svg');
        mask-size: cover;
        mask-repeat: no-repeat;
        -webkit-mask-image: url('../../public/images/header/header-shape2.svg');
        -webkit-mask-size: 100%;
        -webkit-mask-repeat: no-repeat;

        &:before{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0.95;
            background-image: var(--welcomeLinear);
            z-index: 3;
        }
    }

    .welcome-flex{
        position: relative;
        top: 34%;
        max-width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 9%;
        z-index: 11;

        .welcome-text{
            width: 57%;
            transition: all .3s;

            .welcome-typed{
                display: flex;
                flex-wrap: wrap;
                align-items: baseline;
                width: 200%;

                h1{
                    margin-right: 10px;
                }

                h1, .typed-header-title{
                    width: max-content;
                }
                
                .typed-header-title{
                    font-weight:bold;
                }
                h1,.typed-cursor{
                    margin-bottom: 0;
                }
            }

            p{
                color: var(--welcomeTextColor);
                margin-bottom: 2em;
                margin-top: 0.5em;
            }

            @media (max-width:820px){
                .welcome-typed{
                    width: 100% !important;
                }
            }
            @media (max-width:755px){
                .welcome-typed{
                    h1{
                        width: 100%;
                    }
                }
            }
        }
    }

    .welcome-illustration{
        width: 43%;
        transition: all .3s;
        margin-top: 50px;

        img{
            width: 100%;
            height: auto;
        }
    }
}

.welcome-area.single{
    position: relative;
    height: 500px;

    .welcome-bg{
        width: 100%;
        height: 100%;
        position: absolute;
        border-radius: 0 0 15px 15px;
        overflow: hidden;

        &:before{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0.5;
            background-image: linear-gradient(15deg, #e2e2e2 0%,#192831 100%);
            ;
            z-index: 3;
        }
    }
    .welcome-text{
        position: relative;
        top: 450px;
        max-width: max-content;
        margin: 0 8%;
        z-index: 11;
        border-radius: 15px;
        padding: 0 2em;
        background-color: var(--item-white-bg);
        box-shadow: var(--shadow);

        h1{
            width: 100%;
            color: var(--pColor);
            padding: 0.9em 0;
            font-size: 2.5em;
            margin: 0;

            @media (max-width:1024px) {
                font-size: 2em;
            }
            @media (max-width:820px) {
                font-size: 1.7em;
            }
        }

        .welcome-text-flags{
            position: absolute;
            top: 95%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: left;

            span{
                box-shadow: var(--shadow);
                background-color: var(--bodyBg);
                color: var(--pColor);
                border-radius: 10px;
                padding: 0.5em;
                margin: 0 5px 5px 0;
            }
        }
    }
}

.welcome-area.page{
    height: 65vh;
    position: relative;

    .welcome-bg{
        position: absolute;
        width: 100%;
        height: 100%;
        mask-image: url('../../public/images/header/header-shape-page.svg');
        mask-size: cover;
        mask-repeat: no-repeat;
        -webkit-mask-image: url('../../public/images/header/header-shape-page.svg');
        -webkit-mask-size: 100%;
        -webkit-mask-repeat: no-repeat;

        &:before{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0.95;
            background-image: var(--welcomeLinear);
            z-index: 3;
        }
    }
    .welcome-text{
        position: absolute;
        top: 50%;
        left: 10%;
        z-index: 11;

        h1{
            width: 100%;
            font-size: 3.5em;
        }
    }
}

// mentions legales
.legal-area{
    padding: 3em 10%;
    color: var(--pColor);

    h2{
       font-size: 1.5em; 
    }
}

@media (max-width:1200px) {
    .welcome-area.home .welcome-illustration{
        margin-top: 115px !important;
    }
}

@media (max-width:820px) {
    //welcome
    .welcome-area.home {
        height: 85vh;
        margin-bottom: 2.5em;

        .welcome-bg{
            position: absolute;
            width: 100%;
            height: 100%;
            mask-image: url('../../public/images/header/header-shape-sm2.svg');
            mask-size: cover;
            mask-repeat: no-repeat;
            -webkit-mask-image: url('../../public/images/header/header-shape-sm2.svg');
            -webkit-mask-size: 100%;
            -webkit-mask-repeat: no-repeat;
            
            &:before{
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                opacity: 0.95;
                background-image: var(--welcomeLinear);
                z-index: 3;
            }
        }

        .welcome-flex{
            display: inline-block;
            position: relative;
            top: 32%;
            
            .welcome-text{
                width: 90% !important;
            }
            .welcome-illustration{
                position: absolute;
                width: 300px !important;
                right: 7%;
                top: 85px;
            }

        }
    }
}

@media (max-width:770px) {
    .welcome-area.home .welcome-flex .welcome-illustration{
        top: 110px;
    }
}

@media(max-width:600px){
    //welcome
    .welcome-area.home {
        .welcome-bg{
            mask-image: url('../../public/images/header/header-shape-600.svg');
            mask-size: cover;
            mask-repeat: no-repeat;
            -webkit-mask-image: url('../../public/images/header/header-shape-600.svg');
            -webkit-mask-size: 100%;
            -webkit-mask-repeat: no-repeat;
        }
        .welcome-illustration{
            width: 315px !important;
            top: 150px;
        }
    }   

    .welcome-area.page{
        .welcome-bg{
            mask-image: url('../../public/images/header/header-shape-page-600.svg');
            -webkit-mask-image: url('../../public/images/header/header-shape-page-600.svg');
        }
    }
}

@media (max-width:500px) {
    // welcome
    .welcome-area.home .welcome-flex {

        .welcome-illustration {
            width: 240px !important;
            top: 170px;
        }

        .welcome-text{
            width: 100% !important;

            h1, .typed-header-title{
                font-size: 2rem;
            }
        }
    }
}

@media (max-width:400px) {
   // welcome
   .welcome-area.home .welcome-flex .welcome-illustration {
    width: 175px !important;
    right: 4%;
}
}