/*
 *{
 box-sizing: border-box;}
body {
    margin: 0;
} esse é um padrão que voce faz todas vezes que voce vai iniciar um novo arquivo em CSS*/

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Playwrite+NZ+Basic+Guides&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {

    box-sizing: border-box;
}

body {
    font-family: "Archivo Black", sans-serif;
    margin: 0;
}

/* rodapé ou menu de navegação */
.navbar {
    display: flex;
    flex-flow: row wrap;
    height: 100px;
    background-image: linear-gradient(180deg, rgb(1, 1, 117), #0F95E9);
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;

}

.marca {
    margin-left: 10%;
    flex: 20%;
    text-align: left;
}

/* .marca h1{} serviu para mudar a fonte do h1*/
.marca h1 {
    font-family: "Roboto", sans-serif;
    color: white;
    font-size: 34px;
}


.menu {
    flex: 70%;
    text-align: right;
    padding: 20px;


}

.menu a {
    text-decoration: none;
    color: azure;
    font-size: 20px;
    padding: 20px 16px;

}

.menu a:hover {
    color: rgb(1, 1, 117);
    border-top: 4px solid azure;
}

#botão {

    padding: 10px 25px;
    margin-right: 10%;
    margin-left: 5%;
}

/* header e headline */
.header {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    background: white;
    padding-top: 100px;

}

/* é importante voce sempre dx as div em 100%, sempre fazer o calculo da porcetagem em 100%*/
.headline {
    margin-left: 10%;
    flex: 40%;
}

/* o font-weight serviu para dx o texto mais forte como se fosse em negrito */
.headline h2 {
    font-weight: 900;
    font-size: 30px;
    color: rgb(1, 1, 117);
    padding: 0%;
    margin: 0%;
}

.headline p {
    color: black;
    text-align: center;
    margin-top: 80px;
}

.img-headline {
    flex: 40%;
    margin-right: 10%;
    /* border: solid yellow 2px; */
    text-align: center;
}

/* parte do botão */

.contato-btn {
    /* display: inline-block; só afeta ate onde vai o texto ou o  conteudo, ele não aceita crescer e nem diminuir ele só vai ate o onde esta o conteudo*/
    display: inline-block;
    background: #0F95E9;
    padding: 15px;
    margin-top: 80px;
    /* text-transform: uppercase; serviu para deixar as letras em maiúsculo e o text-transform tranforma o texto */
    text-transform: uppercase;
    border-radius: 5px;
    text-decoration: none;
    color: white;
    margin-left: 30%;
    /* foi usado para uma borda interior do elemento*/
    outline: 4px solid;
    outline-offset: -2px;

}


.contato-btn:hover {
    color: white;
    outline-color: rgb(1, 1, 117);

}

/* parte da section */
.section {
    display: inline-block;
    margin-top: 80px;
    margin-right: 5%;
    margin-left: 5%;
    /* border: black solid 1px; */
    text-align: center;
    padding: 5%;
    /* o width serviu para aumentar a largura do elemento para centralizar o texto do h2 no meio */
    width: 90%;

}

.section h2 {
    font-family: "Roboto", sans-serif;
    font-size: 50px;
    font-weight: bold;
    margin: 0;
    color: rgb(1, 1, 117);
}

/* parte do cards */
.viagem {
    display: inline-block;
    margin-top: 5%;
}

.card {
    display: inline-block;
    width: 30%;
    margin: 1%;
    border: double black 10px;
    cursor: pointer;
}


.card:hover {
    background: white;
    padding: 40px;
}

.card:hover h3 {
    color: rgb(1, 1, 117);


}


.card:hover .card-text {
    display: none;
}

.card-oculto {
    display: none;
}

.card:hover .card-oculto {
    display: block;
}


/*  imagem do card */
.imagem {
    width: 100%;
    height: 100%;
    margin: center;
    padding: 5%;
}

.imagem-oculta {
    width: 100%;
    height: 100%;
    margin: center;
    padding: 5%;

}

/* parte do card visivel  */
.icone {
    width: 80px;
    margin-top: 50px;
}

/* parte do card oculto */
.card:hover .icone {
    display: none;
}

/* botão no card oculto */
.card-oculto .valor-btn {
    background: black;
    padding: 20px;
    color: white;
    text-decoration: none;
}

.card-oculto .valor-btn:hover {
    background: rgb(1, 1, 117);

}

/* parte do rodapé */

footer {
    height: 400px;
    margin-top: 100px;
    text-align: center;
    color: white;
    background-image: linear-gradient(180deg, #0F95E9, rgb(1, 1, 117));
}

.rodapé {
    padding: 100px;
}












/* sempre bom usar um backgroud ou uma borda para
 ter uma vizualização de como esta ficando a pagina
 
  justify-content: ; alinha o main
    align-items: ; alinha o cross 

    align-items: center;      centraliza 
align-items: flex-start; topo ou esquerda
align-items: flex-end;  baixo ou direita 
align-items: stretch;   estica (padrão) 

justify-content: center;         centraliza 
justify-content: space-between; espaço entre os itens 
justify-content: space-around;  espaço ao redor 
justify-content: flex-start;    início 
justify-content: flex-end;      fim 
*/