body {
    width: 1440px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    place-items: center;
}

.container-top-half {
    /* width: 1200px; */
    display: grid;
    grid-template-columns: repeat(8, minmax (min-content, auto));
    grid-template-rows: repeat(10, minmax(min-content, auto));
    gap: 5px;
    grid-template-areas:

        ". top-row-nav top-row-nav top-row-nav top-row-nav top-row-nav top-row-nav ."
        "top-img-left . . top-row-header top-row-header . . ."
        "top-img-left . . top-row-header top-row-header . . ."
        ". . . top-row-btn top-row-btn . . top-img-right"
        ". . . top-row-btn top-row-btn . . top-img-right"
        ". . . top-img-center top-img-center . . ."
        ". . . top-img-center top-img-center . . ."
        ". . . . . . . ."
        ". mid-row-text mid-row-text mid-row-text mid-row-text mid-row-text mid-row-text ."
        ". mid-row-text mid-row-text mid-row-text mid-row-text mid-row-text mid-row-text .";
}

.top-row-nav {
    grid-area: top-row-nav;
    width: 1200px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-family: 'manrope', sans-serif;
}

.top-row-header {
    grid-area: top-row-header;
    display: flex;
    justify-content: center;
    font-family: 'fraunces', sans-serif;
    font-size: 40px;
    text-align: center;
}

.top-row-btn {
    grid-area: top-row-btn;
    display: flex;
    justify-content: center;
    font-family: 'manrope', sans-serif;
    font-size: 17px;
    font-weight: 800;
}

.top-row-btn p {
    color: hsl(291, 35%, 15%);
    background-color: hsl(150, 100%, 63%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    width: 150px;
}

.top-img-left {
    grid-area: top-img-left;
}

.top-img-center {
    grid-area: top-img-center;
    width: 550px;
}

.top-mobile-hero {
    width: 100%;
}

.top-img-right {
    grid-area: top-img-right;
    transform: translateX(35px);
}

.mid-row-text {
    grid-area: mid-row-text;
    display: grid;
    grid-auto-flow: column;
    padding: 30px;
    gap: 70px;
    text-align: center;
}

.numerical {
    color: hsl(291, 35%, 15%);
    font-family: 'fraunces', sans-serif;
    font-size: 18px;
    border: 1px solid black;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateX(165px);
}

.heading {
    color: hsl(291, 35%, 15%);
    font-family: 'fraunces', sans-serif;
}

.paragraph {
    color: hsl(291, 35%, 15%);
    font-family: 'manrope', sans-serif;
}

.container-bottom-half {
    display: grid;
    grid-template-columns: repeat(5, minmax(min-content, auto));
    grid-template-rows: repeat(7, minmax(min-content, auto));
    gap: 5px;
    grid-template-areas:
        ". . . . ."
        ". . lower-row-image lower-row-image ."
        ". . lower-row-image lower-row-image ."
        ". . bottom-row-container bottom-row-container ."
        ". . bottom-row-container bottom-row-container ."
        ". . footer-text . ."
        ". . footer-icons . .";
}

.lower-row-image {
    grid-area: lower-row-image;
    display: flex;
    flex-direction: row;
    justify-content: center;
    transform: translateX(-150px) translateY(200px);
}

.bottom-row-container {
    grid-area: bottom-row-container;
}

.bottom-text-container {
    color: white;
    background-color: hsl(291, 35%, 15%);
    width: 460px;
    height: 270px;
    transform: translateX(200px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 30px;
}

.bottom-text-container h1 {
    font-family: 'fraunces', sans-serif;
    transform: translateY(-20px);
}

.bottom-text-container p {
    font-family: 'manrope', sans-serif;
    transform: translateY(-45px);
}

.green-btn {
    font-family: 'manrope', sans-serif;
    font-weight: 700;
    width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(225px) translateY(-80px);
    background-color: hsl(150, 100%, 63%);
}

.profile-pic img {
    width: 400px;
}

.box-image {
    transform: translateX(320px) translateY(-150px);
}

.footer-text {
    color: hsl(291, 35%, 15%);
    font-family: 'manrope', sans-serif;
    font-size: 25px;
    font-weight: 700;
    grid-area: footer-text;
    transform: translateX(300px);
}

.footer-icons {
    grid-area: footer-icons;
    transform: translateX(290px);
    width: 100px;
    height: 25px;
    display: flex;
    flex-direction: row;
    align-content: space-between;
    justify-content: space-between;
}