:root {
    --color-primary: #FF4200;
    --color-secondary: #161d25;
    --color-text: #4f4f4f;
    --color-white: #ffffff;
    --color-offset: #fafafa;
}

html,
body {
    overflow-x: hidden;
    background-color: #161d25;
    color: var(--color-text);
}

a {
    text-decoration: none;
    font-weight: 700;
    color: var(--color-primary);
}

a:hover {
    color: var(--color-text);
}

span {
    font-weight: bold;
    color: var(--color-primary);
}

h1 {
    color: var(--color-white);
}

h2,
h3 {
	color: var(--color-primary) !important;
}

h4 {
    color: var(--color-white);
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background-color: #cd3701;
    border-color: #cd3701;
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-white);
    border-color: var(--color-white);
}

.btn-secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn-mercadolivre {
    background-color: var(--color-white);
    border: var(--color-white);
    border: 1.5px solid var(--color-white);
}

.btn-mercadolivre:hover {
    background-color: var(--color-white);
    border: var(--color-white);
    border: 1.5px solid var(--color-white);
}

.btn-redessociais {
    border: 1px solid var(--color-text);
    color: var(--color-white);
    background-color: transparent;
}

.btn-redessociais:hover {
    border-color: var(--color-text);
    color: var(--color-primary);
    background-color: transparent;
}

main#primary {
    min-height: 80vh;
}

.principal {
    max-width: 560px;
}

.logo img {
    border-radius: 50px;
}

/* Botão WhatsApp */
.whatsapp-float {
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 20px;
    right: 20px;
    text-align: center;
    z-index: 1000;
    animation: float 3s ease-in-out infinite;
    transition: transform 0.3s ease-in-out;
}

/* Animação flutuante */
@keyframes float {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(0, -15px);
    }
}

/* Efeito de hover aumentando o botão */
.whatsapp-float:hover {
    animation-play-state: paused;
    /* Pausa a animação de flutuação quando o mouse está em cima */
}