.hero-container { display: flex; flex-direction: column; justify-content: start; align-items: start; width: 100%; } .hero-profile-container { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; width: 100%; } .hero-banner-image { width: 100%; height: 150px; object-fit: cover; background-color: rebeccapurple; } .hero-profile-picture-container { display: flex; justify-content: center; align-items: center; width: 130px; height: 130px; border-radius: 100%; border: 3px solid white; background-color: blue; margin-top: -65px; } .hero-profile-picture { object-fit: cover; } .hero-name { font-size: 20px; font-weight: 800; color: #26306B; } .hero-title { font-size: 14px; font-weight: 200; color: #26306B; } .hero-about-me-container { display: flex; flex-direction: column; justify-content: start; align-items: start; gap: 10px; margin: 0px 20px; margin-top: 40px; } .hero-about-me-title { font-size: 28px; font-weight: 800; color: #26306B; font-family: Ubuntu; } .hero-about-me-body { font-size: 13px; font-weight: 300; text-align: justify; line-height: 15px; }