

.brand {
    padding-left: 22px;
}

/**/

.user-representative-scene {
    background-color: #002536;
    height: 600px;
    position: relative;
    display: flex;
    justify-content: center;
}

.representative-scene {
    width: 100%;
    height: 85%;
    position: absolute;
}

.user-img-background {
    position: relative;
    background: #002536;
    border-radius: 24px;
}

.user-img-background-svg {
    width: 24px;
    border-right: solid;
    border-bottom: solid;
    border-width: 8px;
    border-color: #002536;
    fill: #002536;
}

.user-img-background-svg-right {
    border-right: none;
    border-bottom: solid;
    border-left: solid;
    border-width: 8px;
}

.svg-border {
    display: flex;
    width: 15px;
    position: relative;
}

.svg-border svg {
    width: 15px;
    position: absolute;
    bottom: 50%;
}

.svg-border path {
    fill: #002536;
}

.user-img-padding {
    padding: 15px;
}

.user-img {
    position: absolute;
    bottom: 0;
}

.user-img img {
    width: 160px;
}

.user-name {
    font-weight: 600;
    font-size: 23px;
    margin-bottom: 0;
    color: #ffffffcf;
}

.user-desc {
    margin: 0;
}

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

.user-location {
    color: #9a9a9a;
    font-size: 14px;
    margin-bottom: 0;
}

.user-detail {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 22px ;
    padding-right: 22px ;
    /*max-width: 1650px;*/
}



.user-detail-parent {
    /*padding-top: 15px;*/
    box-shadow: 0px 1px 6px #0000001f;
}

.posted-follow {
    display: flex;
    flex-direction: row;
    text-align: center;
    width: 100%;
}
.scene-posted {
    opacity: 0.8;
    margin-right: 80px;
    display: flex;
}

.scene-posted > div {
    margin-right: 20px;
}
.follower {
    margin-right: 80px;
}
.following {
    margin-right: 80px;
}
.user-detail-text {

    margin: 10px 0px 10px 0px;
}

.detail-text {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 600;
    color: #00fff6;
}

.highlight-line {
    width: 100%;
    height: 3px;
    background-color: #11FFF7;
}


.scene-parent {
    padding-top: 50px;
}


.profile-avatar-container {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 10px;
}

.profile-avatar {
    width: 70px;
    height: 70px;
}

.img-tuto {
    width:100%;
    border-radius: 15px;
    border: 2px solid #00ffffb8;
    opacity: 0.8;
    transition: all 0.4s;
}

.img-tuto:hover {
    opacity: 1.0;
    box-shadow: 0px 0px 15px 6px #266268;
}

.img-fusion:hover {
    opacity: 1.0;
    box-shadow: 0px 0px 15px 6px #26684a;
}

.padding-img {
    padding: 0px 20px 20px 20px;
}

@media (max-width: 920px) {
    #img-tutorial {
        padding: 40px 0px !important;
        /* flex-direction: column;
        align-items: center; */
    }
    /* .img-tuto {
        max-width: 520px;
    } */
}

@media (max-width: 815px) {
    #wrapper-tutorial{
        flex-direction: column;
        align-items: center;
        gap: 55px;
    }
    .wrapper-tuto {
        width: 80% !important;
    }
}

@media (max-width: 540px) {
    #header-tuto {
        font-size: 18px!important;
    }
    .wrapper-tuto {
        width: 95% !important;
    }
}

@media (max-width: 460px) {
    .button-download {
        font-size: 14px!important;
        padding: 12px 24px !important;
    }
    .wrapper-tuto {
        width: 100% !important;
    }
    .padding-img {
        padding: 0px 6px 20px !important;
    }
}

@media (max-width: 1024px) {
    .user-representative-scene {
        height: 450px;
    }

    .representative-scene {
        height: 80%;
    }

    .user-img-padding {
        padding: 13px;
    }

    .user-name {
        font-size: 20px;
    }


    .parent-img {
        height: 186px;
    }

    .card-title-parent {
        padding: 10px;
    }

    .scene-title {
        font-size: 12px;
    }

    .user-name-parent {
        font-size: 10px;
    }

    .user-desc {
        font-size: 13px;
        max-width: 540px;
    }
}


@media (max-width: 768px) {
    .user-name {
        padding-top: 0px;
    }
    /*.cta-scene svg {
        width: 14px;
    }
    .cta-scene span {
        font-size: 11px;
    }*/
    .user-representative-scene {
        height: 380px;
    }

    .representative-scene {
        height: 79%;
    }
    .user-avatar {
        width: 130px;
    }
}


@media (max-width: 600px) {
    .svg-border {
        width: 14px;
    }

    .svg-border svg {
        width: 14px;
    }
    /*.cta svg {
        width: 15px;
    }
    .cta span {
        padding: 5px 1px;
    }*/
    .user-desc {
        font-size: 12px;
        max-width: 360px;
    }
    .user-representative-scene {
        height: 350px;
    }

    .representative-scene {
        height: 80%;
    }
    .user-avatar {
        width: 110px;
    }
}

