* {
    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;
}

.bcamarelo{
    background-color: var(--amarelo);
}

/* fim cores */









/* grid */

.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;
}

.gridcta{
    grid-template-rows: 30% 25% 1fr;
}

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



/* fim grid */









/* imagens */

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

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

.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;
}



.ilust1{
    justify-self: end;
    grid-column: 9/13;
    margin-right: -28px;
    align-self: center;
}

.ilust2{
    height: auto;
    width: 100%;
    grid-column: 2/5;
    align-self: center;
}


.img1{
    grid-column: 1/6;
    height: 276px;
    background-color: var(--preto);
    grid-row: 1;
}

.img2{
    grid-column: 6/10;
    height: 276px;
    background-color: var(--preto);
    grid-row: 1;
}

.img3{
    grid-column: 10/13;
    height: 276px;
    background-color: var(--preto);
    grid-row: 1;
}

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

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

.img1{
    grid-column: 1/6;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.img2{
    grid-column: 6/9;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.img3{
    grid-column: 9/13;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.cta{
    background-image: url(imagens/ctaazul.svg);
    background-position: center;
    background-size: cover;
    height: 793px;
}

.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;
}

#txt{
    fill: var(--preto);
    transition: .3s;
}

#interior{
    fill: var(--amarelo);
    transition: .3s;
}

#stroke{
    stroke: var(--preto);
    stroke-width: 2px;
    transition: .3s;
}

.buttoncta{
    grid-column: 1/13;
    max-width: 170px;
    height: auto;
    cursor:pointer;
    justify-self: center;
}

.buttoncta:hover #stroke{
    stroke: var(--amarelo);
    transition: .3s;
}

.buttoncta:hover #interior{
    fill: var(--preto);
    transition: .3s;
}

.buttoncta:hover #txt{
    fill: var(--amarelo);
    transition: .3s;
}

.contrabaixista{
    grid-column: 2/5;
    align-self: center;
}

#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;
}
    

#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;
}


/* fim imagens */









/* tipografia */

.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);
}

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

h2{
    color: var(--branco);
    font-family: "Londrina Solid";
    letter-spacing: 2px;
    font-size: 38px;
    font-weight: 400;
    text-align: center;
    grid-column: 1/13;
    text-transform: uppercase;
    height: 40px;
}

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;
}


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

.pcta{
    color: var(--azulclr);
    text-align: center;
    grid-column: 1/13;
}

.legenda1{
    grid-column: 1/6;
    font-weight: 700;
}

.legenda2{
    grid-column: 6/9;
    font-weight: 700;
}

.legenda3{
    grid-column: 9/13;
    font-weight: 700;
}

.txt{
    margin-top: 44px;
}

.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;
}


/* fim tipografia */









/* divs */


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;
    margin-top: auto;
    margin-bottom: auto;
}


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

.txt1{
    margin-top: auto;
    margin-bottom: auto;
    grid-column: 2/8;
}

.txt2{
    align-self: center;
    grid-column: 6/12;
}

.descubramais{
    grid-column: 6/12;
    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;
}


/* fim divs */










/* margins */

.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;
}


/* fim margins */



@media (max-width: 900px){

    .ilust1{
        grid-column: 8/13;
    }

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

    .ilust2{
        grid-column: 1/5;
    }

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

    .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%;
    }

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

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

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

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

    .legenda1{
        grid-column: 3/11;
        grid-row: 2;
    }

    .img2{
        display: none;
    }

    .legenda2{
        display: none;
    }

    .img3{
        grid-column: 3/11;
        grid-row: 3;
    }

    .legenda3{
        grid-column: 3/11;
        grid-row: 4;
    }


    .contrabaixista{
        display: none;
    }

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

    .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;
    }

    .ilust1{
        display: none;
    }

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

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

    .txt2{
        grid-column: 1/13;
        grid-row: 2;
        margin-top: 130px;
    }


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

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

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

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

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

    .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;
    }

}

@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;
    }

}