* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

html{
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

@font-face {
    font-family: 'Montserrat';
    src: url(fonts/montserrat/Montserrat-VariableFont_wght.ttf);
}

@font-face{
        font-family: 'Londrina Solid';
    src: url(fonts/londrinasolid/LondrinaSolid-Regular.ttf);
}

img, svg{
    display: block;
    width: 100%;
    height: auto;
}

body{
    background-color: #F9FAFB;
}


/* cores */

 :root{
    --preto: #091825;
    --amarelo: #FFC100;
    --azul: #0092D0;
    --azulclr: #A8E1FF;
    --azulesc: #1B4E77;
    --branco: #F9FAFB;
    --verde: #00D058;
}

.grid{
    width: 100%;
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    padding-left: 28px;
    padding-right: 28px;
    margin-left: auto;
    margin-right: auto;
}

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


.logopreto{
    grid-column: 1/3;
    height: 52px;
    width: auto;
    justify-self: start;
    align-self: center;
}


.redes{
    height: 26px;
    width: auto;
    fill: var(--preto);
    transition: .3s;
}

.redes:hover{
    fill: var(--azul);
    transition: .3s;
}

.iredesmenu{
    height: 35px;
    width: auto;
    fill: var(--preto);
    transition: .3s;
}

.iredesmenu:hover{
    fill: var(--branco);
    transition: .3s;
}


#hamburguer{
    stroke: var(--preto);
    transition: .3s;
    grid-column: 11/13;
    align-self: center;
    width: 45px;
    justify-self: right;
    display: none;
    transition: .3s;
}



#hamburguer:hover{
    stroke: var(--azul);
    transition: .3s;
}
 


.logobranco{
    grid-column: 1/13;
    height: 52px;
    width: auto;
    justify-self: start;
}

.redesf{
    height: 26px;
    width: auto;
    fill: var(--preto);
    transition: .3s;
}

.redesf:hover{
    fill: var(--branco);
    transition: .3s;
}


header{
height: 94px;
}


.menuh{
    display: flex;
    justify-content: space-between;
    grid-column: 6/11;
    margin-top: auto;
    margin-bottom: auto;
}

.menuredesh{
    display: flex;
    justify-content: space-between;
    padding-left: 30%;
    grid-column: 11/13;
    align-self: center;
}


footer{
    background-image: url(imagens/footer.svg);
    background-size: cover;
    padding-top: 112px;
    padding-bottom: 60px;
}

.footerconteiner{
    margin-top: 45px;
    grid-column: 1/13;
}


.footer1{
    grid-column: 1/4;
}

.footer2{
    grid-column: 4/7;
}

.footer3{
    grid-column: 7/10;
}

.footer4{
    grid-column: 11/13;
}

.redesfooter{
    padding-left: 30%;
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    margin-bottom: auto;
}

.subfooter{
    background-color: var(--azulesc);
    padding-top: 26px;
    padding-bottom: 26px;
}


.menu{
    color: var(--preto);
    font-size: 18px;
    font-family: "Londrina Solid";
    text-align: center;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: .3s;
}

.menu:hover{
    color: var(--azul);
}

p{
    color: var(--preto);
    font-size: 16px;
    font-family: "Montserrat";
    font-weight: 500;
    line-height: 26px;
}

h1{
    color: var(--azul);
    font-size: 40px;
    font-family: "Londrina Solid";
    text-align: left;
    font-weight: 900;
    letter-spacing: 2px;
    grid-column: 1/7;
}

h2{
    color: var(--preto);
    font-size: 24px;
    font-family: "Montserrat";
    font-weight: 700;
    line-height: 26px;
}

h3{
    color: var(--branco);
    font-size: 16px;
    font-family: "Montserrat";
    font-weight: 700;
    line-height: 26px;
}

h4{
    color: var(--preto);
    font-size: 16px;
    font-family: "Montserrat";
    font-weight: 700;
    line-height: 26px;
}

.txtaright{
    text-align: right;
}

.cr{
    color: var(--branco);
    font-size: 12px;
    font-family: "Montserrat";
    font-weight: 400;
    grid-column: 1/10;
}

.db{
    color: var(--branco);
    font-size: 12px;
    font-family: "Montserrat";
    font-weight: 400;
    grid-column: 10/13;
    text-align: right;
}



.mt160{
    margin-top: 160px;
}

.mt130{
    margin-top: 130px;
}

.mt83{
    margin-top: 83px;
}

.mt45{
    margin-top: 45px;
}

.mt24{
    margin-top: 24px;
}

.mt12{
    margin-top: 12px;
}

.pt110{
    padding-top: 110px;
}

.pb110{
    padding-bottom: 110px;
}


#hambmenu{
    background-color: var(--amarelo);
    overflow: hidden;
    height: 100vh;
    width: 100%;
    position: fixed;
    top: -120%;
    left: 0;
    z-index: 1000000;
    grid-template-rows: 10% 45% 10%;
      transition: top 0.3s ease-in-out;

}



#hambdentro{
    width: 45px;
    stroke: var(--preto);
    align-self: center;
    transition: .3s;
    justify-self: end;
    grid-column: 11/13;
    grid-row: 1;
}

#hambdentro:hover{
    transition: .3s;
    stroke: var(--branco);
}

.hamblogopreto{
    height: 52px;
    width: auto;
    grid-column: 1/3;
    align-self: center;
}

#hambmenu nav h1{
    color: var(--preto);
    text-align: right;
    margin-top: 36px;
    transition: .3s;
}

#hambmenu nav h1:hover{
    color: var(--branco);
    transition: .3s;
}


nav{
    grid-column: 6/13;
    margin-top: 20%;
}

.menuline{
    background-image: url(imagens/menuline.svg);
    grid-column: 1/13;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    max-width: 600px;
    height: 30px;
    margin-top: 40px;
}

.redesmenu{
    display: flex;
    grid-column: 9/13;
    justify-content: space-between;
}


.ilsobre{
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.txt1{
    grid-column: 1/8;
}

.img1{
    grid-column: 9/12;
    align-self: center;
}

.img2{
    grid-column: 1/6;
    border-radius: 4px;
}

.txt2{
    grid-column: 7/13;
}


.gc17{
    grid-column: 1/7;
}

.gc713{
    grid-column: 7/13;
}

.img3{
    grid-column: 1/7;
    border-radius: 4px;
}

.img4{
    grid-column: 7/13;
    border-radius: 4px;
}



@media(max-width: 900px){

    .footer3{
        grid-column: 8/11;
    }

    .footer2{
        grid-column: 4/8;
    }

    .redesfooter{
        padding-left: 10%;
    }

    .menuredesh{
        padding-left: 10%;
    }

    .menuh{
        grid-column: 4/10;
    }

}




@media (max-width: 760px){

    .menuh{
        grid-column: 3/10;
    }

    .menuredesh{
        grid-column: 10/13;
        padding-left: 20%;
    }

   .footer2{
        grid-column: 5/10;
    }

    .footer3{
        grid-column: 5/10;
    }

    .footer3 .mt83{
        margin-top: 4px;
    }

    .footer4{
        grid-column: 10/13;
        grid-row: 2;
    }

    .redesfooter{
        padding-left: 20%;
    }
}



@media (max-width: 600px){

    #hamburguer{
        display: block;
    }

    .menuh{
        display: none;
    }

    .menuredesh{
        display: none;
    }

    .footer1{
        grid-column: 1/6;
    }

    .footer2{
        grid-column: 6/13;
    }

    .footer3{
        grid-column: 6/13;
    }

    .footer4{
        grid-column: 1/6;
        grid-row: 3;
    }

    .redesfooter{
        padding-left: 0;
        padding-right: 20%;
    }

    .txtaright{
        text-align: left;
    }

    
    .txt1{
        grid-column: 1/13;
    }

    .img1{
        grid-column: 5/9;
        margin-top: 130px;
    }

    .txt2{
        grid-column: 1/13;
    }

    .img2{
        grid-column: 2/12;
        grid-row: 2;
        margin-top: 80px;
    }

    .gc17{
        grid-column: 1/13;
    }

    .gc713{
        grid-column: 1/13;
    }

    .img3{
        grid-column: 2/12;
    }

    .img4{
        grid-column: 2/12;
        margin-top: 45px;
    }


}


@media (max-width: 430px){

    .redesmenu{
        grid-column: 7/13;
    }

    .footer1{
        grid-column: 2/12;
        grid-row: 2;
    }

    .footer2{
        grid-column: 2/12;
        grid-row: 3;
    }

    .footer3{
        grid-column: 2/12;
        grid-row: 4;
    }

    .footer4{
        grid-column: 2/10;
        grid-row: 5;
    }

    .img1{
        grid-column: 3/11;
    }

    .img2{
        grid-column: 1/13;
    }

    .img3{
        grid-column: 1/13;
    }

    .img4{
        grid-column: 1/13;
    }
}