.section-content {
    padding-top: 1.6vh;
    padding-bottom: 1.6vh
}

#hero {
    height: 74vh;
    display: flex;
    flex-direction: column;
    justify-content: end;
    margin-bottom: 4vmin;
}

#related-project-bttn {
    margin-bottom: 2rem;
    display: flex;
    align-items: left;
}

.hero-title-wrapper {
    display: flex;
    justify-content: space-between;
}

.hero-title, .hero-desc {
    width: 48%;
    overflow: hidden;
}

.hero-desc h4 {
    color: var(--color-text-30);
    font-weight: 400;
}

.hero-detail-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 4.5%;
    margin-top: 3rem;
    background-color: var(--color-background-secondary);
    border-radius: 1rem;
}

.hero-detail h4 {
    margin-bottom: 0.25rem;
}

.hero-detail img {
    margin-bottom: 0.6rem;
}

.hero-detail a h5 {
    text-decoration: underline;
}

#see-prototype-arrow {
    margin-left: 0.5rem;
    margin-bottom: 0rem;
}

.section-title {
    margin-top: 3rem;
    margin-bottom: 2.2rem;
}

.section-desc {
    font-weight: 400;
    text-indent: 2rem;
    color: var(--color-text-50);
}

#project-img {
    overflow: hidden;
    border-radius: 1rem;
    display: flex;
    margin-top: 2rem;
}

#project-img img {
    width: 80vw;
    height: 56vh;
    object-fit: cover;
    transition: transform 0.75s;
}

#project-img img:hover {
    transition: transform 0.75s;
    transform: scale(1.1);

}

#no-text-indent {
    text-indent: 0rem;
}

.process-wrapper {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 3rem
}

.process {
    background-color: var(--color-background-secondary);
    width: 19.6%;
    border-radius: 1rem;
    padding: 2.4%;
}

#process-darker {
    background-color: var(--color-brand-10);
}

.process h3 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.content-highlight {
    color: var(--color-brand-100);
    background-color: var(--color-brand-20);
    width: 2vw;
    height: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100rem;
    overflow: hidden;
}

.content-pill {
    padding-left: 1vmax;
    padding-right: 1vmax;
    padding-top: 0.5vmax;
    padding-bottom: 0.5vmax;
    border-radius: 100rem;
    background-color: var(--color-brand-20);
    color: var(--color-brand-100);
    margin-left: 1rem;
}

#requirements-title {
    display: flex;
    align-items: center;
    width: 100%;
}

.process-subtitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#requirements-wrapper {
    display: flex;
    justify-content: space-between;
}

.section-wrapper {
    margin-bottom: 3.8rem;
}

#last-section {
    margin-bottom: 2rem;
}

#requirements {
    padding: 2.4%;
    width: 44.5%;
    background-color: var(--color-brand-10);
    border-radius: 1rem;
}

#requirements h4 {
    margin-bottom: 1rem;
}

#comp-analysis-logo {
    width: 7%;
    border-radius: 1rem;
    border: 0.15rem solid var(--color-brand-20);
    display: flex;
    justify-content: center;
    align-items: center;
}

#comp-analysis-logo img {
    object-fit: cover;
    height: auto;
}

#comp-analysis-wrapper {
    margin-top: 2rem;
    padding: 2.4%;
    background-color: var(--color-brand-10);
    border-radius: 1rem;;
}

#comp-analysis-title h3 {
    width: 90%;
}

#comp-analysis-title h3 span h4 {
    margin-top: 0.2rem;
}

#comp-analysis-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#comp-analysis-content-wrapper {
margin-top: 2rem;
}

#comp-analysis-content {
    display: flex;
}

#comp-analysis-tag-content {
    width: 30vw;
}

#comp-analysis-tag {
    display: flex;
}

#comp-analysis-tag div {
    margin-right: 1rem;
    overflow: hidden;
}

#comp-analysis-tag-content h4 {
    margin-bottom: 1rem;
}

.section-img-middle {
    border-radius: 1rem;
    border: 0.1rem solid var(--color-brand-10);
    margin-top: 2rem;
    display: flex;
}

.section-img-middle img {
    width: 100%;
}

.section-img-left, .section-img-right {
    display: flex;
    padding: 2.4%;
    background-color: var(--color-brand-10);
    border-radius: 1rem;
    justify-content: space-between;
    align-items: center;
}

.section-img-left-img {
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34%;
}

.section-img-right-img {
    display: flex;
    width: 100%;
}

#section-img-left-img img, .section-img-right-img img {
    width: 100%;
    height: auto;
}

.section-img-left-content {
    display: flex;
    flex-direction: column;
    width: 56%;
    margin-right: 4%;
}

.section-img-left-content h4, .section-img-left-content h3 {
    margin-bottom: 1rem;
}

.section-img-left-content div {
    margin-right: auto;
}

.section-img-right h4{
    width: 20%;
}

.section-small {
    margin-bottom: 4rem;
}

.section-small-title {
    display: flex;
    justify-content: space-between;
}

.section-small-title h4 {
    width: 40vw;
}

.section-small-title div h4 span {
    display: block;
    height: 10px;
}

iframe {
    width: 100%;
    height: 60vh;
    border-radius: 1rem;
    border: none;
}

.iframe-wrapper {
    overflow:visible;
    margin-top: 2rem;
}

.persona-wrapper {
    padding: 2.4%;
    margin-top: 2rem;
    border-radius: 1rem;
    background-color: var(--color-background-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.persona-img {
    width: 30%;
    height: auto;
}

.persona-img img{
    width: 100%;
    height: auto;
}

.persona-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.persona-content {
    width: 66%;
}

.persona-desc{
    display: flex;
    align-items: center;
}

.persona-content h6 {
    margin-left: 2rem;
}

.persona-content h4 {
    margin-bottom: 1.5rem;
}

.persona-content h6 span {
    margin-right: 0.5rem;
}


/* --- */


.three-part-wrapper {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.three-part {
    padding: 2.4%;
    border-radius: 1rem;
    background-color: var(--color-background-secondary);
    width: 27.8%;
}

#three-part-darker {
    background-color: var(--color-brand-10);
}

.three-part h3, .three-part .section-desc {
    margin-bottom: 1rem;
}

#features-title h4 {
    width: 49%;
    margin-bottom: 2rem;
}

#features-title h3 {
    width: 30%;
}

#no-margin-top {
    margin-top: 0rem;
}

#no-margin-bottom {
    margin-bottom: 0rem;
}

#margin-bottom {
    margin-bottom: 2rem;
}

#margin-top {
    margin-top: 2rem;
}

#lv-initial-prototype div{
    margin-top: 0rem;
}

#lv-progress h4 span {
    display: block;
    margin-top: 0.5rem;
}

.section-double-img {
    display: flex;
    height: 52vh;
    border-radius: 1rem;
    background-color: #ffffff;
    padding-left: 4%;
    padding-right: 4%;
}

#un-survey-1, #un-survey-2 {
    height: 100%;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-right: 2%;
}

.section-double-img div img {
    width: 100%;
    height: auto;
}

#un-design-system-img {
    padding: 4%;
    background-color: var(--color-background-secondary);
}

.section-2-images, .section-2-images-labels {
    display: flex;
    justify-content: space-between;
}

.section-2-images img, .section-2-images-labels h4 {
    width: 49.5%;
    text-align: center;
    margin-bottom: 1rem;
}

#rv-design-system-img {
    padding: 4%;
    background-color: var(--color-background-secondary);
    background-color: var(--color-brand-10);
}

#message {
    margin-top: 2vw;
    margin-bottom: 2vw;
    width: 73vw;
    padding: 1.25rem;
    border-radius: 1.2rem;
    display: flex;
    background-color: var(--color-brand-10);
    border: 0.1rem solid var(--color-brand-20);
}

#message img {
    margin-right: 1.25rem;
}

#message-title h3 {
    color: var(--color-brand-100);
}

#message-title h4 {
    margin-top: 0.25rem;
    color: var(--color-brand-60);
    font-weight: 400;
}

#message-title h4 b {
    color: var(--color-brand-100);
}

#persona-darker {
    background-color: var(--color-brand-10);
}