@charset "UTF-8";

/* Importando fonte do google fonts */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');

/*Variaveis*/
:root {
    --background: #0f0f0f;
    --branco: #fff;
    --amarelo: #e5b567;
    --azul: #9cdcfe;
    --azulEscuro: #05152b;
    --cinzaClaro: #d6d6d6;
    --cinza: #858585;
    --laranja: #e87d3e;
    --pink: #b05279;
    --roxo: #9e86c8;
    --verde: #b4d273;
    --preto:#000000;
}

/*CSS Reset (Compatibilizar em todos os navegadores) */
* {
    margin: 0;
    padding: 0;
    border: 0;
}

/*Layout*/

/* Rolagem suave */
html{
    scroll-behavior: smooth;
}

body {
    font-family: "Open Sans", sans-serif;
    font-size: 1em;
    /*1em = 100%(Tamanho padrão)*/
    background-color: var(--background);
}

.container {
    margin: 0 auto;
    /* centralizar o bloco */
    display: flex;
    justify-content: space-between;

}

.botao {
    text-decoration: none;
    color: var(--branco);
    border: 2px solid var(--branco);
    font-size: 1.3em;
    /* background-color: var(--laranja); */
    font-weight: 700;
    width: 200px;
    padding: 9px 100px;
    border-radius: 25px;
    align-self: center;
    margin-top: 2px;
}

/* Layout para 3 cartões */
.card {
    width: 338px;
    height: 520px;
    margin-top: 25px;
    background-color: var(--cinza);
    border: 5px solid var(--branco);
    border-radius: 25px;
    text-align: center;
}

.card img {
    border-radius: 25px 25px 0px 0px;
}

.card h3 {
    margin-top: 15px;
}

.card p {
    text-align: left;
    padding: 10px 30px 50px 30px;
}

.card a {
    padding: 10px 100px;
    border: 0;
    background-color: var(--branco);
    color: var(--preto);
}

#topo{
    position: fixed;
    right: 10px;
    bottom: 10px;
}

/*Smartphone Portrait>>>>>>>>>>>>>>>>>>>>>>*/

/*Cabeçalho*/
header {
    height: 80px;

}

#logo img {
    width: 76px;
    height: 76px;
    padding-top: 15px;

}

#check {
    display: none;
}

/* Efeito de deslizar o menu */
/* Se check estiver "ticado", criar um estlio para ul */
#check:checked~ul {
    right: 0;
}

label {
    font-size: 2em;
    top: 30px;
    right: 15px;
    position: fixed;
    color: #fff
}

nav ul {
    height: 100vh;
    /*100vh =  100% altura da tela*/
    background-color: #000;
    list-style: none;
    /*remove bullets*/
    width: 65%;
    position: fixed;
    top: 80.1px;
    right: -65%;
    transition: all 0.5s;
    color: #fff;
}

nav ul li {
    padding: 65px 20px 0px 0px;
    border-bottom: 1px solid var(--branco);
    text-align: right;
    color: #fff;

}

nav ul li a {
    color: #ffffff;
    text-decoration: none;
}

/* Banner */
main {
    height: 40vh;
    background: url(img/qualquer.gif);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

h1{
    color: white;
}
main h1,
h2 {
    color: white;
    text-shadow: #000000 0.05em 0.05em 0.05em;
    /* Sombra */

}

main h1 {
    font-size: 3em;
}

main iframe {
    justify-content: center;
    text-align: center;
}

/******* Destaque *******/
#destaque {
    background: url(img/background.png);
    background-size: cover;
    background-position: center;
    /* espaçamento interno para não encostar na borda da tela do dispositivo */
    padding: 50px 15px;
}

/* Atenção!!! Organizando o container após o destaque o estilo é aplicado apenas ao container da seção de destaque */
#destaque .container {
    flex-direction: column;
    align-items: center;
}

/* Para esconder a imagem usamos "display: none" no container da imagem | Para exibir novamente em telas maiores, usamos "display: block" */
/*
#imagemDestaque {
    display: none;
}
*/
#imagemDestaque img {
    width: 200px;
    height: 200px;
    /* arredondar uma imagem quadrada */
    border-radius: 50%;
}

#textoDestaque {
    color: var(--branco);
}

#textoDestaque h2 {
    margin-bottom: 20px;
}

/* Atenção !!! Detalhe do sinal ">" ref. ao elemento imediato */
#textoDestaque>p {
    margin-bottom: 15px;
}

.topicos {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.topicos img {
    margin-right: 10px;
}

.topicos p {
    font-weight: 600;
}

/*>>>>>>>>>>>>>>>>>> Sobre <<<<<<<<<<<<<<<<<<<*/
#sobre .container {
    flex-direction: column;

}

#sobre {
    padding: 50px 15px;
}

#sobre h2,
p {
    color: #fff;
}

#sobre h2 {
    margin-bottom: 20px;
}

#video iframe {
    width: 250px;
    height: 200px;
    margin-top: 0px;
}

#institucional {
    flex-direction: column;
}

/* Faixa de destaque */
#faixaDestaque {
    background: url(img/background.png);
    background-size: cover;
    background-position: center;
    flex-direction: column;
    padding-left: 8px;
    padding-bottom: 5px;
}

#faixaDestaque .container {
    flex-direction: column;
}

#imagemFaixa img {
    padding: 50px 15px;
    width: 256px;
    height: 256px;
    border-radius: 75px;
}

#textoFaixa h2 {
    color: var(--branco);
    margin-bottom: 10px;
}

#textoFaixa p {
    margin-bottom: 25px;
}

/****** Seção de conteúdo (cards) ******/
#conteudo {
    padding: 50px 0px;
}

#conteudo .container {
    flex-direction: column;
    align-items: center;
}

#conteudo h2 {
    color: var(--branco);
    margin-bottom: 25px;
}

#todos {
    color: var(--branco);
    margin-top: 50px;
    text-decoration: none;
    font-size: 1.25em;
    font-weight: 700;
}

.containerCards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
   
}

/* Contato e mapa */

address .container{
    flex-direction: column;
    
    justify-content: left;
    padding: 35px 10px 50px 10px;
}


address a {
    text-decoration: none;
    color: #fff;
}

address img {
    padding-top: 15px;
}

#mapinha{
    display: none;
}

#contato img{
    padding: 0;
}

#local{
    display: none;
}

address h2{
    padding-top:15px ;
}
#numero{
    padding-bottom: 15px;
}

/* Rodapé */
footer {
    padding: 50px 0px;
    background-color: #343538;
    font-size: 0.875em;
    color: #fff;
    text-align: center;
}
footer .container{
    flex-direction: column-reverse;
}


/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */

/* Smartphones Landscape >>>>>>>>>>>>>>>>>>>>>>>>>> */
@media (min-width: 576px) {

    /* Cabeçalho */
    #logo img {
        margin: 0px 0px 10px 0px;
    }

    /****** Cabeçalho ******/
    nav ul {
        right: -25%;
        width: 25%;
    }

    /****** Banner ******/
    main {
        height: 90vh;
    }

    main h1 {
        font-size: 3em;
    }

    /****** destaque ******/
    #destaque .container {
        flex-direction: row;
        height: 75vh;
    }

    #imagemDestaque {
        margin-right: 50px;
    }

    #imagemDestaque img {
        width: 256px;
        height: 256px;
    }

    .container {
        max-width: 540px;
        /* background-color: blueviolet; */
    }

    /* Layout para 3 cartões */
    
    #conteudo .container{
        flex-direction: column;
        align-items: center;
    }

    .containerCards {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .card {
        width: 338px;
        height: 520px;
        margin-top: 25px;
        background-color: var(--cinza);
        border: 1px solid var(--rosachoque);
        border-radius: 25px;
        text-align: center;
    }

    .card img {
        border-radius: 25px 25px 0px 0px;
    }

    .card h3 {
        font-size: 25px;
        margin-top: 15px;

    }

    .card p {
        text-align: justify;
        padding: 20px 30px 40px 30px;
        font-size: 18px;

    }

    .card a {
        padding: 10px 100px;
        border: 0;
        background-color: var(--branco);
        color: var(--preto);
    }

    /* Rodapé */
    
    footer .container{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    #social {
        margin: 0;
      }

}

    /* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */

    /* Tablet portrait >>>>>>>>>>>>>>>>>>>>>>>>>> */
    @media (min-width: 768px) {

        /* Cabeçalho */
        .container {
            max-width: 720px;
            /* background-color: crimson; */
        }

        /****** Banner ******/
        main {
            height: 80vh;
        }

        header {
            height: 110px;
        }

        #logo img {
            width: 100px;
            height: 100px;
        }

        /****** Destaque ******/
        #imagemDestaque img {
            width: 440px;
            height: 440px;
        }

       /****** Seção de conteúdo - cards ******/
        .card {
            margin: 25px 10px 0px 10px;
        }

    }

    /* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */

    /* Tablet Landscape >>>>>>>>>>>>>>>>>>>>>>>>>> */
    @media (min-width: 992px) {

        /* Cabeçalho */
        .container {
            max-width: 960px;
            /* background-color: gold; */
        }

        /****** Banner ******/
        main {
            height: 70vh;
        }
    }

    /* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */

    /* PCs / Notebooks >>>>>>>>>>>>>>>>>>>>>>>>>> */
    @media (min-width: 1200px) {

        /* Cabeçalho */
        .container {
            max-width: 1140px;
            /* background-color: fuchsia; */
        }

        /* Cabeçalho */
        header {
            height: 150px;
        }

        #logo img {
            
            width: 128px;
            height: 128px;
        }

        /* Transformação do menu */
        label {
            display: none;
        }

        nav ul {
            width: 100%;
            height: auto;
            position: static;
            background-color: transparent;
            /*Para deixar o fundo transparente*/
        }

        nav ul li {
            float: left;
            border: 0;
            color: #fff;
        }

        nav ul li a {
            color: #fff;
        }

        nav ul li a:hover {
            color: var(--vermelho);
        }


        /****** Destaque ******/
        #destaque {
            /* O código abaixo fixa o banner (efeito parallax) */
            background-attachment: fixed;
        }

        /* Sobre */
        #sobre .container {
            flex-direction: row;
            align-items: center;
        }

        #video iframe {
            width: 485px;
            height: 320px;
            margin: 0;
        }



        /* Faixa de destaque */

        #faixaDestaque {
            background-attachment: fixed;
        }

        #faixaDestaque .container {
            flex-direction: row-reverse;
            align-items: center;
        }

        #imagemFaixa img {
            width: 312px;
            height: 312px;
        }

        /* Contato */
        address {
            padding-top: 50px;
        }
        #flex6{
            flex-direction: column-reverse;
        }

        #mapinha{
            display: inline;
            display: block;
        }

        #mapao{
            display: none;
        }

        #local{
            display: inline;
            display: block;
            
        }
        
        #local iframe{
            width: 400px;
            height: 300px;
        }
       

        /* Rodapé */
        footer .container{
            flex-direction:row ;
        }

        #social img{
            padding-left: 5px;
            padding-right:5px ;
        }
    }

    /* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */

    /* Telas fullhd / 4K / smartTv >>>>>>>>>>>>>>>>>>>>>>>>>> */

    @media (min-width: 1400px) {

        /* Cabeçalho */
        .container {
            max-width: 1360px;

        }

        header {
            height: 200px;
        }

        #logo img {
            width: 176px;
            height: 176px;
        }
    }

    /* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */