body {
    font-family: 'Roboto';
    margin: 0;
}

* {
    box-sizing: border-box;
}

:root {
    --blue: #0768de;
    --grey: #F8F9FB;
    --light-grey: #FAFBFD;
    --h2-color: #293340;
    --subheader-color: #6d7784;
    --footer-color: #1b222b;
}

.header-nav {
    background: var(--blue);
    height: 70px;
    width: 100%;
    
}

.nav-container-title {
    width: 100%;
    height: 70px;
    position: absolute;
}

@media screen and (max-width: 900px) {
    .nav-container-title {
    width: 100%;
    height: 70px;
    position: unset;
}
    .header-nav {
        height: 140px;
    }
}

.nav-title {
    position: absolute;
    top: 22px;
    left: 30px;
    font-size: 23px;
    color: white;
}

.header-nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3ch;
    width: 100%;
    height: 70px;
    margin: 0;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
    padding: 0 1rem;
}

.header-nav li a{
    color: #9fc1ea;
    text-decoration: none;
    flex-shrink: 1;
}

.header-nav li a:hover{
    color: white;
}

.header-nav li a.active {
    color: white;
}



nav li{
    list-style-type: none;
}


header section {
    padding: 100px 30px;
    background: var(--blue);
    text-align: center;
}

h1 {
    font-size: 66px;
    line-height: 65px;
    font-weight: 200;
    color: white;
    max-width: 20ch;
    margin: 0 auto 2ch;
}

.button-white {
    border: none;
    border-radius: 27px;
    padding: 0 30px;
    font-size: 18px;
    background-color: white;
    color: var(--blue);
    text-align: center;
    width: 30ch;
    height: 5ch;
    font-weight: bold;
}

section {
    padding: 140px 30px;
    text-align: center;
}

h2 {
    font-size: 47px;
    color: var(--h2-color);
    font-weight: 200;
    line-height: 46px;
    margin: 0 auto 25px;
}

.subheader {
    font-size: 20px;
    font-weight: 400;
    color: var(--subheader-color);
    line-height: 26px;
    max-width: 60ch;
    margin: 0 auto 75px;
}

.noma-food-wrapper {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.frame-noma {
    max-width: 500px;
    flex: 1 1 320px;
}

.frame-noma-food {
    width: 100%;
    aspect-ratio: 25 / 13;
    background: var(--light-grey);
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 40px;
}

.noma-food-img {
    width: 100%;
    max-width: 380px;
    aspect-ratio: 19 / 9;
    object-fit: cover;
}

.frame-noma-text {
    width: 100%;
    aspect-ratio: 25 / 13;
    background: var(--grey);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 40px;
}

div.noma-text {
    max-width: 35ch;
}

.noma-text-header {
    color: var(--h2-color);
    font-size: 21px;
    font-weight: 600;
    margin: 0;
}

p.noma-text {
    color: var(--subheader-color);
    font-size: 16px;
    line-height: 22px;
    margin: 1ch 0 0;
}

.section-grey {
    background: var(--grey);
}

button {
    border-radius: 23px;
    padding: 0 30px;
    font-size: 16px;
    text-align: center;
    width: 30ch;
    height: 5ch;
    font-weight: bold;
}

.button-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 2ch;
}

.button-blue {
    border: none;
    background: var(--blue);
    color: white;
}

.button-grey {
   border: 1px solid #e2e4e6;
   color: var(--subheader-color);
   background: transparent;
}

.frame-noma-wrapper {
    display: flex;
    flex-wrap: wrap;
    max-width: 1030px;
    margin: 5rem auto 0;
    gap: 3rem;
    padding: 0 1rem;
    justify-content: center;
}

.frame-noma-location {
    flex: 1 1 215px;
    max-width: 300px;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.noma-location {
    width: 100%;
    min-width: 180px;
    aspect-ratio: 3 / 2;
}

strong {
    margin-top: 0.5rem;
}


footer {
    padding: 75px 30px;
    background: var(--footer-color);
}

.footer-nav {
    width: 50vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;

}

@media screen and (max-width: 800px) {
    .footer-nav {
        width: 80vw;
        display: flex;
}
}

.footer-nav ul {
    margin: 0;
    padding: 0 0.5rem;
}

.footer-nav li.footer-nav-start {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 2ch;
    color: white;
}

.footer-nav li {
    color: #888f99;
    font-size: 14px;
    margin-bottom: 1ch;
}



.footer-end {
    font-size: 15px;
    color: #888f99;
    border-top: 1px #888f99 solid;
    width: 85vw;
    margin: 10ch auto 0;
    padding-top: 3ch;
    text-align: center;
}