:root {
    --primaria-color: #E9751E;
    --primaria-color-hover: #F18D2F;

    --secundaria-color: #183F5A;
    --secundaria-color-hover: #2A5B7C;

    --preto-color: black;
    --preto-color-hover: #333333;

    --branco-color: white;
    --branco-color-hover: #F2F2F2;

    --platina-color: #F0F0F0;
    --platina-color-hover: #E6E6E6;

    --cinzaclaro-color: #D9D9D9;
    --cinzaclaro-color-hover: #F2F2F2;

    --cinza-um-color: #333333;
    --cinza-um-color-hover: #555555;

    --titulo-um: 34px;
    --titulo-dois: 16px;

    --texto-um: 16px;
    --texto-dois: 18px;
}

@media (max-width: 768px) {
    :root {
        --titulo-um: 28px;
        --titulo-dois: 14px;
        
        --texto-um: 14px;
        --texto-dois: 16px;
    }
}

@keyframes rotacaoy {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }  
}

* {
    font-family: "Mukta", serif;
}

section {
    padding-bottom: 70px;
    padding-top: 70px;
}

h1 {
    font-size: var(--titulo-um);
    font-weight: 600;
}

h2 {
    font-size: var(--titulo-dois);
    font-weight: 600;
}

a {
    text-decoration: none;
    color: inherit;
}

p {
    font-size: var(--texto-um) !important;
    margin-bottom: 14px;
}

button.botao-primario {
    background-color: var(--primaria-color);
    border: 2px solid var(--branco-color);
    border-radius: 4px;
    color: var(--branco-color);
    font-size: 12px;
    font-weight: 600;
    min-width: 180px;
    padding: 15px 30px;
    letter-spacing: 2px;
    transition: all 0.5s ease-in-out;
}
button.botao-primario:hover {
    background-color: var(--primaria-color-hover);
    border: 2px solid var(--branco-color-hover);
    color: var(--branco-color-hover);
}
button.botao-secundario {
    background-color: var(--secundaria-color);
    border: 2px solid var(--branco-color);
    border-radius: 4px;
    color: var(--branco-color);
    font-size: 12px;
    font-weight: 600;
    min-width: 180px;
    padding: 15px 30px;
    letter-spacing: 2px;
    transition: all 0.5s ease-in-out;
}
button.botao-secundario:hover {
    background-color: var(--secundaria-color-hover);
    border: 2px solid var(--branco-color-hover);
    color: var(--branco-color-hover);
}
a.botao-transparente,
button.botao-transparente {
    background-color: transparent;
    border: 2px solid var(--branco-color);
    border-radius: 4px;
    color: var(--branco-color);
    font-size: 12px;
    font-weight: 600;
    padding: 15px 30px;
    letter-spacing: 2px;
    transition: all 0.5s ease-in-out;
}
a.botao-transparente:hover,
button.botao-transparente:hover {
    background-color: var(--secundaria-color-hover);
    border: 2px solid var(--branco-color-hover);
    color: var(--branco-color-hover);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    animation: shine 4s ease infinite;
    background: linear-gradient(0deg, #E9751E, #F1A71F, #F58B2B, #E88B3C);
    border-radius: 10px;
    border: 2px solid var(--branco-color-hover);
}

.floating-button {
    bottom: 20px;
    border-radius: 50%;
    position: fixed;
    right: 20px;
    z-index: 1000;
}

.floating-button-top {
    bottom: 80px;
    border-radius: 50%;
    position: fixed;
    right: 20px;
    z-index: 1000;
    display: none;
}

#newsletter-button {
    background-color: var(--primaria-color);
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-family: "Mukta", serif;
    padding: 30px 10px;
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-lr;
    transform: translateY(-50%) rotate(180deg);
}

#newsletter-button i {
    transform: rotate(90deg);
    margin-bottom: 5px;
}

.close-right {
    margin-left: auto;
    margin-right: 0;
}

.cursive-letter {
    font-family: "Caveat", serif !important;
    font-size: 20px !important;
}

@media (max-width: 768px) {
    section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    #newsletter-button {
        padding: 10px;
        font-size: 12px;
    }

    .cursive-letter {
        font-size: 18px !important;
    }
}