:root{
    --accent: #6c8389;
    --accent-light: #c4d6e0;
    --page: #FFFDF8;         
    --text: #26383D;   
    --contrast: #fffdf1;
    --heading-main: #9D4934;  
    --heading: #2E4A52;
}

body{
    margin: 0;
    background-image: url("assets/bg.png");
    background-color: var(--contrast);
}

.menu-panel {
    background-color: var(--accent);
    width: 100%;
    min-height: 88px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    box-sizing: border-box;
    font-size: 20px;
}

.menu-panel img{
    height: 67px;
    width: auto;
    display: block;
}

.menu-panel nav{
    margin-left: auto;
    display: flex;
    gap: 24px;
}

.menu-panel a{
    text-decoration: none;
    color: var(--page);
}

.nav-toggle {
    display: none;
}

.page{
    width: min(1160px, 100vw);
    background-color: var(--page);
    min-height: 100dvh;
    overflow-x: auto;
    overflow-y: auto;
    margin: 0 auto;
    font-family: "Nunito", sans-serif;
}

.content-section {
    display: grid;
    grid-template-columns: minmax(0, 65ch) minmax(220px, 300px);
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.project-section {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 24px 0;
}

.project-section h2{
    margin: 0 0 8px;
}

.project-section h2:hover{
    color: var(--accent-light);
}

.project-section p {
    margin: 0;
}

.hero-img, .project-logo {
    width: 100%;
    height: auto;
}

.content-panel{
    max-width: 1100px;
    max-width: 125ch;
    margin: 0 auto;
    padding: 48px 48px;
    box-sizing: border-box;
}

.contact-section{
    display: flex;
    justify-content: center;
    margin-top: 24px ;
}

.news-content{
    display: flex;
    align-items: center;
    gap: 12px;
}

.news-content p{
    margin: 0;
}

.news-content img{
    flex-shrink: 0;
}

.icon{
    padding: 8px;
}

.icon{
    width: 32px;
    height: 32px;
    fill: var(--accent);
}

a{
    text-decoration: none;
    color: var(--accent);
}

a:hover{

    color: var(--accent-light);
}

h1{
    color: var(--heading-main);
    font-weight: bold;
    font-size: 50px;
}

h2, h3{
    color: var(--heading);
    font-weight: bold;
}

p{
    font-size: 20px;
    color: var(--text);
}

hr{
    border: 1px dashed var(--accent)
}

.more-next{
    display: block;
    width: 220px;
    max-width: calc(100% - 48px);
    height: auto;
    margin: 48px auto;
}

.footer-icon{
    display: block;
    width: 100px;
    height: auto;
    cursor: pointer;
    transform-origin: center;
}

.footer-area{
    width: 230px;
    height: 230px;
    margin: -32px auto 32px;
    display: grid;
    place-items: center;
    overflow: clip;
}

@media (max-width: 800px) {
    .content-section, .project-section {
        grid-template-columns: 1fr;
    }

    .project-section > a{
        display: flex;
        justify-content: center;
    }

    .project-logo {
        display: block;
    }

    .hero-img, .project-logo {
        width: min(280px, 100%);
        height: auto;
        justify-self: center;
    }

    .page-title{
        text-align: center;
    }

    .sub-title{
        font-size: 32px;
    }

    .content-panel p, h2, h3{
        text-align: center;
    }

    h1{
        font-size: 42px;
    }
}

@media (max-width: 700px){
    .menu-panel{
        position: relative;
    }

    .nav-toggle {
        display: grid;
        gap: 5px;
        margin-left: auto;
        padding: 8px;
        border: 0;
        background: transparent;
        color: var(--page);
        cursor: pointer;
    }

    .nav-toggle span {
        width: 24px;
        height: 2px;
        background: currentColor;
    }

    .menu-panel nav{
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin: 0;
        padding: 16px 24px;
        flex-direction: column;
        background-color: var(--accent);
        align-items: center;
    }

    .menu-panel nav.is-open{
        display: flex;
    }

    .menu-panel a{
        font-size: 24px;
    }
}