/* RESET */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
}

/* BODY */
body{
    min-height: 100vh;
    background: linear-gradient(
        180deg,
        #4B5FE2 0%,
        #394AE0 100%
    );

    color: white;
    display: flex;
    flex-direction: column;
}

/* HEADER */
.header{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.header::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background: linear-gradient(
        to right,
        transparent,
        #F98319,
        transparent
    );
}

/* LOGO */
.logo{
    width: 170px;
    height: auto;
}

/* CONTEÚDO */
.container{
    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;

    padding: 10px 20px;
}

.container h1{
    font-size: 2.3rem;
    margin-bottom: 10px;
}

.container p{
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: #CBD5F5;
}

/* DEPARTAMENTOS */
.departamentos{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 20px;

    margin-top: 45px;
}

.card{
    width: 220px;

    padding: 15px;

    background: rgba(255,255,255,.10);

    border-radius: 15px;

    transition: .3s;
}

.card:hover{
    transform: translateY(-8px);
    background: rgba(255,255,255,.20);
}

.card h2{
    margin-bottom: 10px;
}

.card p{
    margin-bottom: 0;
    font-size: 1rem;
}

/* REDES SOCIAIS */
.social{
    margin-bottom: 10px;
}

.social a{
    text-decoration: none;
    margin: 0 15px;
}

/* INSTAGRAM */
.instagram-link{
    color: #E4405F;
    font-weight: 600;
    transition: .3s;
}

.instagram-link:hover{
    color: white;
}

/* WHATSAPP */
.whatsapp-link{
    color: #F98319;
    font-weight: 600;
    transition: .3s;
}

.whatsapp-link:hover{
    color: white;
}

/* RODAPÉ */
.footer{
    text-align: center;
    padding: 10px;
    font-size: .9rem;
    color: white;
}

/* BOTÃO FLUTUANTE */
.whatsapp-float{
    position: fixed;

    right: 20px;
    bottom: 20px;

    z-index: 999;

    font-size: 65px;
    color: #F98319;

    animation: pulse-whatsapp 2s infinite;
}

/* ANIMAÇÃO */
@keyframes pulse-whatsapp{

    0%{
        transform: scale(1);
    }

    50%{
        transform: scale(1.12);
    }

    100%{
        transform: scale(1);
    }

}

/* RESPONSIVO */
@media (max-width: 768px){

    .logo{
        width: 150px;
    }

    .container h1{
        font-size: 2rem;
    }

    .container p{
        font-size: 1rem;
    }

    .departamentos{
        gap: 15px;
    }

    .card{
        width: 100%;
        max-width: 300px;
    }

    .social a{
        display: block;
        margin: 8px 0;
    }

    .whatsapp-float{
        font-size: 55px;
    }

}