/*----------------------*/
/*     Google Fonts     */
/*----------------------*/

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=League+Spartan:wght@100..900&display=swap');

/*-----------------------*/
/*       Variáveis       */
/*-----------------------*/

:root {
    --azul-claro: #A7D5F2;
    --azul-escuro: #007377;
    --rosa: #F2A9A2;
    --verde: #B8D973;
    --texto: #000000;
    --cinza: #979797;
    --primeira-font: 'Lato', sans-serif;
    --segunda-font: 'League Spartan', sans-serif;
}

/*-----------------------*/
/*   Seletor Universal   */
/*-----------------------*/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: var(--segunda-font)
} 

/*---------------------*/
/*      Cabeçalho      */
/*---------------------*/

header {
    width: 100%; /*Largura*/
    display: flex; /*Deixa os elementos na mesma linha*/
    justify-content: space-around;
    align-items: center;
    padding: 30px 0;
    position: fixed;
    background-color: #fff;
}

.container-logo{
    display: flex;
    align-items: center;
}

.container-logo a {
    text-decoration: none;
    color: black;
}

.menu li {
    display: inline-block;
    margin: 0 10px;
}

.menu li a {
    font-size: 18px;
    text-decoration: none;
    color: black;
    padding: 8px 10px;
}

.menu li a:hover {
    background-color: var(--azul-claro); 
    border-radius: 15px;
    transition: 0.10s;
}

/*------------------HOME-*/
/*       Principal       */
/*-----------------------*/

section {
    min-height: 80vh;
    padding: 5rem 8rem;
}

.home {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16rem;
}

.home-content {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    text-align: left;
    justify-content: center;
}

.home-content .home-primeira {
    font-family: var(--primeira-font);
    font-size: 15px;
}

.home-content .home-segunda {
    color: var(--texto);
    font-size: 30px;
    line-height: 40px;
}

.home-content .home-terceira {
    font-size: 35px;
    color: var(--azul-escuro);
}

.home-content p {
    color: var(--cinza);
    line-height: 30px;
    font-family: var(--primeira-font);
    font-size: 12px;
}
.home-img img {
    top: 3rem;
    width: 70vh;
    cursor: pointer;
    transition: 0.4s ease-in-out;
}

/*-------------------HOME-*/
/*       Categorias       */
/*------------------------*/

.index-category {
    width: 100%;
    padding: 0px 40px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    column-gap: 30px;
    flex-wrap: wrap;
}

.index-category h1 {
    font-family: var(--segunda-font);
    color: var(--azul-escuro);
    text-align: center;
    padding-bottom: 40px;
    flex-basis: 100%;
    font-size: 35px;
}

.index-category-box {
    width: 300px;
    height: 190px;
    background-color: #111;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
}

.index-category-box:hover {
    box-shadow: 0 0 20px var(--azul-escuro), 0 0 40px var(--azul-escuro), 0 0 60px var(--azul-escuro);
}

.index-category-box:nth-child(2) {
    background-image: linear-gradient(#00000080, #00000080), url(../img/home/norte.jpg);
}

.index-category-box:nth-child(3) {
    background-image: linear-gradient(#00000080, #00000080), url(../img/home/centro-oeste.jpg);
}

.index-category-box:nth-child(4) {
    background-image: linear-gradient(#00000080, #00000080), url(../img/home/nordeste.jpg);
}

.index-category-box:nth-child(5) {
    background-image: linear-gradient(#00000080, #00000080), url(../img/home/sul.jpg);
}

.index-category-box:nth-child(6) {
    background-image: linear-gradient(#00000080, #00000080), url(../img/home/sudeste.jpg);
}

.index-category-box h3 {
    font-family: var(--primeira-font);
    font-size: 18px;
    color: #fff;
    text-align: center;
    text-decoration: none;
}
