#hero {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    height: 93vh;
}

.hero_texte {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    gap: 55px;
    top: 0;
}


#stagiaire-text {
    position: relative;
    z-index: 1;
}

.roles {
    position: absolute;
    top: 75%;
    left: 42%;
    transform: translateY(-50%);
    transition: transform 0.5s ease;
    z-index: 2;
    width: 50%;
    height: 80%;
}

.role {
    position: absolute;
    transition: top 0.5s ease, left 0.5s ease;
}

.ui_designer {
    top: 13%;
    left: 22%;
    width: 50%;
    z-index: 5;
}

.ux_designer {
    top: 45%;
    left: -4%;
    width: 50%;
    z-index: 3;
}

.brand_designer {
    top: 39%;
    left: 43%;
    width: 60%;
    z-index: 4;

}

.graphic_designer {
    top: 72%;
    left: 15%;
    width: 60%;
    z-index: 2;
}

#photo_shaima_stirling {
    /*max-width: 300px;*/
	height: 87vh;
}

.vector_haut_hero {
    position: absolute;
    top: 0%;
    left: 3%;
    width: 292px;
}

.vector_bas_hero {
    position: absolute;
    bottom: 0;
    left: 38%;
	width: 325px;
	z-index: 1;
}

#dernieres_creation {
    display: flex;
    flex-direction: column;
    align-items: baseline;
	margin-top: 14%
}



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

	#dernieres_creation {
		margin-top: 20%; 
	}

    .vector_haut_hero {
        position: absolute;
        top: 0%;
        left: 3%;
    	width: 292px;
    }

	.vector_bas_hero {
   		position: absolute;
		bottom: -20px;
    	left: 38%;
}
	.hero_texte {
    	margin-top: 13%;
}

/*
    #h2_dernieres_creation {
        font-size: 175%;
    }
}*/