body {
    --green-1: #69FD9D;
    --green-2: #46D986;
    --green-3: #23B66E;
    --green-4: #009257;
    --green-5: #026D48;
    --green-6: #054939;
    --green-7: #07242A;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Mulish', sans-serif;
}

p, a, li, input, textarea, button {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 20px;
}

strong {
    color: var(--green-1);
}


h1 {
    font-size: 48px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 30px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 22px;
}

h6 {
    font-size: 20px;
}

.fpsect {
    overflow: hidden;
    margin: 30vh 0; 
    padding: 32px;
    background-color: #07242AAA;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #FFF;
    z-index: 0;
}

.fpsect h1, .fpsect h2, .fpsect h3, .fpsect h4, .fpsect h5, .fpsect h6 {
    margin-top: 0;
} 

#dest {
    height: 33vh;
    overflow-y: visible;
    z-index: 5;
    position: relative;
}

#dLogo {
    position: absolute;
    background-color: var(--green-7);
    padding: 4px;
    box-shadow: 0 0 8px 8px var(--green-7);
}

.content {
    max-width: 1024px;
    margin: auto;
}

#mnfs {
    transition: 0.5s;
    opacity: 0;
}

#mnfs .content {
    display: flex;
    flex-wrap: wrap;
}

#mnfs .content img.mLogo {
    width: 100%;
    padding: 64px;
}

#mnfs .content p {
    width: 100%;
}

#areas .content ul {
    list-style-type: none;
    padding: 0;
    width: 100%;
}

#areas .content ul li {
    transition: 0.5s;
    padding: 8px;
    border-bottom: solid 1px #69FD9D66;
}

#areas .content ul li::before {
    height: 24px;
    margin-right: 8px;
    position: relative;
    top: 4px;
}

#areas .content ul li h3 {
    font-weight: bold;
    font-style: italic;
    font-family: 'Mulish', sans-serif;
    display: inline;
    font-size: 24px;
    margin: 0;
    color: #FFF;
    transition: 0.5s ;
}

#areas .content ul li.const::before {
    content: url("assets/icons/const.svg");
}

#areas .content ul li.urb::before {
    content: url("assets/icons/urb.svg");
}

#areas .content ul li.imb::before {
    content: url("assets/icons/imb.svg");
}

#areas .content ul li.amb::before {
    content: url("assets/icons/amb.svg");
}

#areas .content ul li.contr::before {
    content: url("assets/icons/contr.svg");
}

#areas .content ul li.soc::before {
    content: url("assets/icons/soc.svg");
}

#areas .content ul li.emp::before {
    content: url("assets/icons/emp.svg");
}

#areas .content ul li.tech::before {
    content: url("assets/icons/tech.svg");
}

#areas .content ul li:hover {
    background-color: #07242AAA;
}

#areas .content ul li:hover h3 {
    color: var(--green-1);
}

#areas .content ul li .desc {
    display: none;
    position: absolute;
    overflow: hidden;
    padding: 0 32px 0 8px;
    width: inherit;
    box-sizing: border-box;
}

#areas .content ul li:hover .desc {
    display: block;
}

#areas .content ul li .desc p {
    margin: 0 0 16px;
    padding: 16px 24px 0 0;
}

#areas .content ul li .desc .serv {
    position: relative;
}

#areas .content ul li .desc .serv a {
    font-size: 16px;
    background-color: var(--green-5);
    color: #FFF;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    padding: 2px 6px;
    margin: 2px 0;
    display: inline-block;
    
}

#areas .content #acc {
    position: absolute;
    z-index: -1;
    background-color: #07242AAA;
    border-bottom: solid 1px #69FD9D66;
    display: none;
}

#sobre .content {
    display: flex;
    flex-wrap: wrap;
}

#sobre .content .sImg {
    width: 100%;
    padding: 0 0 64px;
}

#sobre .content .sTxt {
    width: 100%;
}

#ctto {
    margin-bottom: 0;
    background-color: #0000;
    background-image: linear-gradient(to bottom, #07242AAA, #07242AFF);
}

#ctto form {
    width: 100%;
    margin: auto; 
}

#ctto form input[type="text"], #ctto form input[type="email"], #ctto form textarea {
    color: #FFF;
    background: transparent;
    display: block;
    border: none;
    border-bottom: solid 1px #69FD9D88;
    margin: 8px 0;
    width: 100%;

}

#ctto form input[placeholder], #ctto form textarea[placeholder] {
    color: var(--green-1);
    transition: 0.5s;
}

#ctto form input[placeholder]:focus-within, #ctto form textarea[placeholder]:focus-within {
    color: #FFF;
}

#ctto form input[type="submit"] {
    padding: 6px 10px;
    font-weight: bold;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    margin: auto;
    width: 100%;
}

#ctto form input[type="submit"]#submit-email {
    background-color: var(--green-7);
    color: var(--green-1);
    border: solid 0.66px var(--green-1);

}

#ctto form input[type="submit"]#submit-wpp {
    background-color: var(--green-1);
    color: var(--green-7);
    
}

#bkgd {
    position: relative;
    z-index: -20;
}

#bkgd img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: opacity 0.5s;
}

#wrng {
    position: fixed;
    bottom: 0;
    z-index: 10;
    width: 100%;
}

#wrng .content {
    background-color: #FFF;
    padding: 16px;
    box-shadow: 0 0 16px;
}

#wrng .content p, #wrng .content button {
    font-size: 12px;
    margin: 0;
}

#wrng .content button {
    float: none;
    display: block;
    margin: 4px 0;
    width: 100%;
    border: solid 1px var(--green-7);
    border-radius: 3px;
    padding: 3px 6px;
}


#wrng .content button#conc{
    margin-top: 12px;
    background-color: var(--green-7);
    color: var(--green-1);
    transition: 0.2s;
}

#wrng .content button#conc:hover{
    opacity: 0.75;
}

#wrng .content button#disc{
    background-color: #FFF;
    color: var(--green-7);
}

footer {
    background-color: var(--green-7);
    padding: 48px 0;
    color: #FFF;
}

footer p, footer a {
    font-size: 16px;
    text-align: center;
    margin: 4px 0;
}

footer a {
    color: #FFF;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

footer img.flogo {
    display: block;
    width: 33%;
    margin: auto;
}

footer .scl {
    width: 75%;
    margin: 36px auto;
    display: flex;
    justify-content: space-around;
}

footer .scl img {
    height: 24px;
}

footer .fmenu {
    width: 100%;
    margin: 36px auto;
    display: flex;
    justify-content: space-around;
}

@media only screen and (min-width: 768px) {
    #mnfs .content {
        flex-wrap: nowrap;
    }
    
    #mnfs .content img.mLogo {
        width: 25%;
        align-self: center;
    }
    
    #mnfs .content p {
        width: 75%;
        align-self: center;
    }

    #areas .content ul {
        min-width: 300px;
        width: 40%;
    }

    #areas .content ul li {
        transition: 0.5s ;
    }

    #areas .content ul li .desc {
        padding: 16px 32px;
        width: auto;
    }

    #areas .content ul li .desc p {
        padding: 0;
    }

    #areas .content ul li .desc .serv {
        position: absolute;
        bottom: 6px;
    }

    #areas .content #acc {
        display: block;
    }
    

    #sobre .content {
        flex-wrap: nowrap;
    }
    
    #sobre .content .sImg {
        width: 25%;
        align-self: start;
        padding: 0 48px 0 0;
    }
    
    #sobre .content .sTxt {
        width: 75%;
        align-self: center;
    }

    #ctto form {
        width: 50%;
    }

    #wrng .content button {
        float: right;
        display: inline;
        margin: 0 2px;
        width: auto;
        position: relative;
        top: -3px;
    }

    #wrng .content button#conc{
        margin-top: 0;
    }

    footer img.flogo {
        width: 12.5%;
    }

    footer .scl {
        width: 33.33%;
    }

    footer .fmenu {
        width: 50%;
    }

    #bkgd img {
        width: 100%;
        height: auto;
    }

}