body { margin: 0 auto; text-align: center; background: #FAF0DB; font-family: "Montserrat", sans-serif; }
            ul, li { list-style: none; margin: 0; padding:0;}
            a {text-decoration: none;}
            h1 {font-family: "Roboto", sans-serif; font-weight: 700; color: #FAF0DB; font-size: 48px;}
            h2 {font-size: 32px; text-align: center; font-weight: normal; padding: 30px 50px;}
            h3 {font-family: "Roboto", sans-serif; font-weight: 700; font-size: 40px; text-align: left;}
            p {font-size: 18px; }
            .content { text-align: left;}
            .header{ background-color: #FAF0DB; position: sticky; top: 0; width: 100%; text-align: left; margin:30px 0;}
            .nav { width: 100%; height: 100%; position: fixed; background-color: #FAF0DB; overflow: hidden; text-align: left;}
            .menu a { display: block; padding: 20px; color: #3D382E; }
            .menu a:hover { background-color: #798070; color: #FAF0DB;}
            .nav { max-height: 0; transition: max-height .5s ease-out; }
            .hamb { cursor: pointer; float: right; padding: 40px 20px; }
            .hamb-line { background: #B8A98B; display: block; height: 2px; position: relative; width: 24px; }
            .hamb-line::before, .hamb-line::after { background: #B8A98B; content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%; }
            .hamb-line::before { top: 5px; }
            .hamb-line::after { top: -5px; }
            .side-menu { display: none; }
            .side-menu:checked ~ nav { max-height: 100%; }
            .side-menu:checked ~ .hamb .hamb-line { background: transparent; }
            .side-menu:checked ~ .hamb .hamb-line::before { transform: rotate(-45deg); top:0; }
            .side-menu:checked ~ .hamb .hamb-line::after { transform: rotate(45deg); top:0; }
            body:has(.side-menu:checked) { overflow: hidden; }
            .logo { margin: 30px;}
            #hero img {width: 100%;}
            #our_impact { background: #7B715D; }
            #about_us img { width: 100%; }
            #footer { clear: both; background: #A2AB95; height: 400px; }
            #footer li { height: 40px;}
            #footer a { color: #3D382E; line-height: 30px; padding: 10px; margin: 20px 0; }
            #footer a:hover { background-color: #3D382E; color: #FAF0DB;}
            .button { background: #F5CC53; padding: 20px; color:#3D382E;}
            .button:hover {background-color: #3D382E;color: #FAF0DB;}
            .flex-grid {  display: flex; flex-wrap: wrap; margin: 0 0 0 20px; position: relative;  color: #FAF0DB;}
            .flex-grid img { width:100% height: 100%; object-fit: cover; }
            .flex-grid .col { width: 40%;}
            .flex-grid > div {  flex: 1 1 40%; margin: 0 20px 20px 0;}
            .flex-grid-thirds {  display: flex; flex-wrap: wrap; }
            .flex-grid-thirds .col { width: 32%; text-align:center; }
            .container { position: absolute; width: 35%; margin: 50px;}
            .copy { padding: 0; font-size: 12px; color: #51554A; }
            .page { width: 70%; margin:0 auto; }
            .page_title { background: #7B715D; padding: 50px; text-align:center; }


            @media only screen and (max-width: 768px) {
                .flex-grid .col, .flex-grid-thirds .col { width: 100%;}
                .flex-grid > div, .flex-grid-thirds > div { flex: 100%; margin: 0 20px 20px 0;}
                .container { width: 80%; }
              
            }

            @media (min-width: 768px) { 
                .nav { max-height: none; top: 0; position: relative; float: right; width: fit-content; background-color: transparent; }
                .menu li { float: left; }
                .menu a:hover { background-color: transparent; color: #B8A98B; }
                .hamb { display: none; }
            }