@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    --color1: #219bac;
    --color2: #64cbfb;
    --color3: #9e9e9e;
    --color4: #e9f8ff;
    --color5: #d9e8ee;
    --color6: #ada81e;
    --color7: #b0c5f6;
    --color8: #00113a;
    --color9: #d4c92e;
    --color10: #1d006d;
    --color11: #888307;
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Lora", serif;
    text-decoration: none;
}

body{
    background-color: var(--color4);
}

.container{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 30px;
    grid-template-areas:
        'header     header      header      header      header      header'
        'header     header      header      header      header      header'
        'beneficio  beneficio   beneficio   beneficio   beneficio   beneficio'
        'titulo     titulo      titulo      titulo      titulo      titulo'
        'titulo     titulo      titulo      titulo      titulo      titulo'
        'titulo     titulo      titulo      titulo      titulo      titulo'
        'imagem     imagem      imagem      ambiental   ambiental   ambiental'
        'imagem     imagem      imagem      ambiental   ambiental   ambiental'
        'imagem     imagem      imagem      ambiental   ambiental   ambiental'
        'imagem     imagem      imagem      ambiental   ambiental   ambiental'
        'imagem     imagem      imagem      ambiental   ambiental   ambiental'
        'imagem     imagem      imagem      tech        tech        tech'
        'imagem     imagem      imagem      tech        tech        tech'
        'imagem     imagem      imagem      tech        tech        tech'
        'imagem     imagem      imagem      tech        tech        tech'
        'imagem     imagem      imagem      tech        tech        tech'
        'imagem     imagem      imagem      economico   economico   economico'
        'imagem     imagem      imagem      economico   economico   economico'
        'imagem     imagem      imagem      economico   economico   economico'
        'imagem     imagem      imagem      economico   economico   economico'
        'imagem     imagem      imagem      economico   economico   economico'
        'imagem     imagem      imagem      economico   economico   economico'
        'imagem     imagem      imagem      economico   economico   economico'
        'rodape     rodape      rodape      rodape      rodape      rodape' 
        'rodape     rodape      rodape      rodape      rodape      rodape' 
    ;
}

.header{
    grid-area: header;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 60px;
    background-color: var(--color8);
}

.header .atalho{
    display: flex;
    font-family: "PT Serif", serif;
    font-weight: 700;
    font-size: 18px;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}

#menu{
    display: block;
    position: absolute;
    width: 350px;
    top: 60px;
    left: 0px;
    list-style: none;
    background-color: var(--color8);
    transition: .6s;
    z-index: 1000;
    height: 0px;
    visibility: hidden;
    overflow-y: hidden;
}

#nav.active #menu{
    height: calc(100vh - 60px);
    visibility: visible;
    overflow-y: auto;
}

#menu a{
    display: block;
    padding: 1rem 1rem;
    margin: 0 1rem;
    color: white;
    border-top: 2px solid rgba(255, 255, 255, 0.07);
}

#menu #selecionado{
    color: #454de1;
    font-size: 22px;
    font-weight: bold;
}

#btn-menu{
    display: flex;
    padding: .5rem 1rem;
    font-family: "PT Serif", serif;
    font-weight: 700;
    font-size: 22px;
    border: none;
    background: none;
    color: white;
    cursor: pointer;
    gap: .5rem;
}

#hamburger{
    margin-top: 7px;
    border-top: 3px solid;
    width: 24px;
}

#hamburger::after, #hamburger::before {
    content: '';
    display: block;
    width: 24px;
    height: 2.5px;
    background: currentColor;
    margin-top: 5px;
    transition: .3s;
    position: relative;
}

#nav.active #hamburger{
    border-top-color: transparent;
}

#nav.active #hamburger::before{
    transform: rotate(135deg);
}

#nav.active #hamburger::after{
    transform: rotate(-135deg);
    top: -7px;
}

li a:hover{
    background-color: rgba(255, 255, 255, 0.421);
}

.header .titulo{
    grid-column: 2/5;
    grid-row: 1/2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.titulo h1{
    font-family: 'Bookman Old Style';
    font-size: 40px;
    color: var(--color1);
    margin-right: 20px;
}

.titulo img{
    width: 45px;
    height: 45px;
}

.header .login{
    grid-column: 5/6;
    grid-row: 1/2;
    display: flex;
    align-items: center;
    justify-content: right;
    margin-right: 15px;
}

.login #login_btn{
    padding: 6px 18px;
    border: none;
    border-radius: 35px;
    cursor: pointer;
    transition: all 0.9s ease 0s;
    font-family: "PT Serif", serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--color10);   
}

.login #login_btn:hover{
    background-color: var(--color2);
    color: white;
}

.beneficios{
    grid-area: beneficio;
    display: flex;
    justify-content: center;
    align-items: top;
    font-size: 10px;
    font-family: "PT Serif", serif;
    font-weight: 700;
    font-style: italic;
    color: var(--color3);
}

.tema-principal{
    grid-area: titulo;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: top;
}

.tema-principal h1{
    font-size: 48px;
    font-family: 'Bookman Old Style';
    font-weight: bold;

    color: var(--color6);
    text-shadow: 1px 1px 27px var(--color3);
}

.tema-principal h2{
    font-size: 24px;
    font-style: italic;
    color: var(--color11);
}

/*--Estilizacao para o SlideShow--*/
.slideshow-container{
    grid-area: imagem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    max-width: 800px;
    height: 480px;
    margin: 20px 15px 20px 35px;
}

.mySlides {
    display: none;
    width: 100%;
    height: 100%;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

.ambiental{
    grid-area: ambiental;
    background-color: var(--color5);
    border-radius: 10px;
    margin: 20px 25px 10px 10px;
}

.ambiental .ben-ambiental{
    display: flex;
}

.ben-ambiental h3{
    font-size: 22px;
    font-family: 'Bookman Old Style';
    font-weight: bold;
    color: var(--color9);
    margin: 8px 15px 0px 20px;
}

.ben-ambiental img{
    max-width: 45px;
    height: 45px;
    margin: 2px 20px 0px 0px;
}

.ambiental .ben-amb{
    margin: 0px 20px 5px 40px;
    text-indent: 20px;
    text-align: justify;
    font-size: 16px;
    font-family: "PT Serif", serif;  
}

.tecnologico{
    grid-area: tech;
    background-color: var(--color5);
    border-radius: 10px;
    margin: 10px 25px 10px 10px;
}

.tecnologico .ben-tecnologico{
    display: flex;
}

.ben-tecnologico h3{
    font-size: 22px;
    font-family: 'Bookman Old Style';
    font-weight: bold;
    color: var(--color9);
    margin: 10px 10px 0px 20px;
}

.ben-tecnologico img{
    max-width: 47px;
    height: 47px;
    margin: 0px 20px 0px 5px;
}

.tecnologico .ben-tec{
    margin: 5px 20px 5px 40px;
    text-indent: 20px;
    text-align: justify;
    font-size: 16px;
    font-family: "PT Serif", serif; 
}

.economicos{
    grid-area: economico;
    background-color: var(--color5);
    border-radius: 10px;
    margin: 10px 25px 10px 10px;
}

.economicos .ben-economico{
    display: flex; 
}

.ben-economico h3{
    font-size: 22px;
    font-family: 'Bookman Old Style';
    font-weight: bold;
    color: var(--color9);
    margin: 10px 10px 0px 20px;
} 

.ben-economico img{
    max-width: 45px;
    height: 45px;
    gap: 10px;
    margin: 2px 15px 0px 0px;
}

.economicos .ben-eco{
    margin: 4px 20px 10px 40px;
    text-indent: 20px;
    text-align: justify;
    font-size: 17px;
    font-family: "PT Serif", serif; 
}

.rodape{
    grid-area: rodape;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: white;
    background-color: var(--color8);
    font-size: 18px;
    font-family: "PT Serif", serif;
    font-weight: 700;
    font-style: italic;
}

@media screen and (max-width: 980px){
    
    .container{
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 30px;
        grid-template-areas:
            'header     header      header      header      header      header'
            'header     header      header      header      header      header'
            'beneficio  beneficio   beneficio   beneficio   beneficio   beneficio'
            'titulo     titulo      titulo      titulo      titulo      titulo'
            'titulo     titulo      titulo      titulo      titulo      titulo'
            'titulo     titulo      titulo      titulo      titulo      titulo'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'ambiental  ambiental   ambiental   ambiental   ambiental   ambiental'
            'ambiental  ambiental   ambiental   ambiental   ambiental   ambiental'
            'ambiental  ambiental   ambiental   ambiental   ambiental   ambiental'
            'ambiental  ambiental   ambiental   ambiental   ambiental   ambiental'
            'ambiental  ambiental   ambiental   ambiental   ambiental   ambiental'
            'tech       tech        tech        tech        tech        tech'
            'tech       tech        tech        tech        tech        tech'
            'tech       tech        tech        tech        tech        tech'
            'tech       tech        tech        tech        tech        tech'
            'tech       tech        tech        tech        tech        tech'
            'economico  economico   economico   economico   economico   economico'
            'economico  economico   economico   economico   economico   economico'
            'economico  economico   economico   economico   economico   economico'
            'economico  economico   economico   economico   economico   economico'
            'economico  economico   economico   economico   economico   economico'
            'rodape     rodape      rodape      rodape      rodape      rodape' 
            'rodape     rodape      rodape      rodape      rodape      rodape' 
        ;
    }

    .slideshow-container{
        max-width: 720px;
        height: 490px;
        margin: 15px auto;
    }

    .ambiental{
        margin: 15px 25px 10px 25px;
    }
    
    .ben-ambiental img{
        max-width: 44px;
        height: 44px;
    }
    
    .ambiental .ben-amb{
        margin: 0px 20px 5px 40px;
        font-size: 15px; 
    }
    
    .tecnologico{
        margin: 10px 25px;
    }
    
    .ben-tecnologico img{
        max-width: 45px;
        height: 45px;
        margin: 0px 20px 0px 5px;
    }
    
    .tecnologico .ben-tec{
        margin: 5px 20px 5px 40px;
        font-size: 15px;
    }
    
    .economicos{
        margin: 10px 25px 20px 25px;
    }
    
    .ben-economico h3{
        font-size: 21px;
    } 
    
    .ben-economico img{
        max-width: 45px;
        height: 45px;
    }
    
    .economicos .ben-eco{
        margin: 0px 20px 0px 40px;
        font-size: 16px;
    }
}

@media screen and (max-width: 750px){

    .container{
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 30px;
        grid-template-areas:
            'header     header      header      header      header      header'
            'header     header      header      header      header      header'
            'beneficio  beneficio   beneficio   beneficio   beneficio   beneficio'
            'titulo     titulo      titulo      titulo      titulo      titulo'
            'titulo     titulo      titulo      titulo      titulo      titulo'
            'titulo     titulo      titulo      titulo      titulo      titulo'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'ambiental  ambiental   ambiental   ambiental   ambiental   ambiental'
            'ambiental  ambiental   ambiental   ambiental   ambiental   ambiental'
            'ambiental  ambiental   ambiental   ambiental   ambiental   ambiental'
            'ambiental  ambiental   ambiental   ambiental   ambiental   ambiental'
            'ambiental  ambiental   ambiental   ambiental   ambiental   ambiental'
            'tech       tech        tech        tech        tech        tech'
            'tech       tech        tech        tech        tech        tech'
            'tech       tech        tech        tech        tech        tech'
            'tech       tech        tech        tech        tech        tech'
            'tech       tech        tech        tech        tech        tech'
            'economico  economico   economico   economico   economico   economico'
            'economico  economico   economico   economico   economico   economico'
            'economico  economico   economico   economico   economico   economico'
            'economico  economico   economico   economico   economico   economico'
            'economico  economico   economico   economico   economico   economico'
            'economico  economico   economico   economico   economico   economico'
            'economico  economico   economico   economico   economico   economico'
            'rodape     rodape      rodape      rodape      rodape      rodape' 
            'rodape     rodape      rodape      rodape      rodape      rodape' 
        ;
    }

    .titulo h1{
        font-size: 30px;
        color: var(--color1);
        margin-right: 10px;
    }
    
    .titulo img{
        width: 40px;
        height: 40px;
    }

    .beneficios{
        font-size: 9px;
    }

    .tema-principal h1{
        font-size: 35px;
    }
    
    .tema-principal h2{
        font-size: 21px;
        font-style: italic;
        color: var(--color11);
    }

    .slideshow-container{
        max-width: 480px;
    }
}