:root {
    --custom-white: #FFFFFF;
    --custom-black: #000000;
    --custom-grey: #333333;
    --custom-red: #B71C1C;
    --custom-gold: #B8860B;

    --revlt-grey_1: 212,212,212;
    --revlt-grey_2: 186, 186, 186;
    --revlt-black: 0,0,0;
    --revlt-white: 247,249,252;
    --revlt-darkgrey: 129, 122, 122;
    --revlt-blue: 0, 60, 158;
    --revlt-blue-hover: 0, 43, 91;

    --revlt-brightred: 255, 96, 96;
    --revlt-darkred: 159, 0, 0;

    /* GRELHA DE ESPAÇAMENTO */
    --space-xxs: 4px;     /* micro (ícones, linhas) */
    --space-xs: 8px;      /* pequeno (gap entre textos ou ícones) */
    --space-sm: 12px;     /* curto (margens leves) */
    --space-md: 16px;     /* médio (padding geral) */
    --space-lg: 24px;     /* largo (entre secções pequenas) */
    --space-xl: 32px;     /* grande (secções principais) */
    --space-xxl: 48px;    /* muito grande (hero, banners) */
    --space-xxxl: 64px;   /* máximo (footers, separadores) */
    
    /* TAMANHOS DE TEXTO */
    --font-xxs: 0.625rem; /* 10px — microlabels, ícones */
    --font-xs: 0.75rem;   /* 12px — labels, botões pequenos */
    --font-sm: 0.875rem;  /* 14px — texto secundário */
    --font-md: 1rem;      /* 16px — texto normal, corpo */
    --font-lg: 1.25rem;   /* 20px — destaque leve, subtítulo */
    --font-xl: 1.5rem;    /* 24px — headings pequenos */
    --font-xxl: 2rem;     /* 32px — headings médios */
    --font-xxxl: 3rem;    /* 48px — headings grandes */
    --font-display: 4rem; /* 64px — títulos hero, impacto visual */
}

body {
    font-family: 'Söhne', sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    background: rgb(var(--revlt-white));
}

#bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(var(--revlt-white));
    z-index: 1;
}

#content {
    position: relative;
    z-index: 10;
    color: rgb(var(--revlt-black));
    mix-blend-mode: normal;
}


header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

#header-image {
    transition: all 0.3s ease; /* Smooth transition */
}

.header-left,
.header-right {
    display: flex;
    flex-direction: column; /* This stacks children vertically */
    z-index: 20;
}

.header-right{
    align-items: right;
    margin-top: var(--space-md);
}

.header-left{
    align-items: left;
}
.header-right a {
    text-decoration: none;
}


#content h1 {
    font-size: var(--font-xxl);
    margin: 0 0 var(--space-lg) 0;
}

#content p {
    font-size: var(--font-md);
    line-height: 1.5;
}

button{
    font-family: Helvetica, Arial, sans-serif;
}

.nav-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px 10px 20px;
    font-size: var(--font-xs);
    font-weight: 500;
    border: 1px solid rgba(var(--revlt-blue), 1);
    border-radius: 6px;
    color: rgb(var(--revlt-white));
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    background: rgb(var(--revlt-blue));
    margin-right: 5px;
    text-transform: capitalize;
}

.nav-button:hover{
    background: rgb(var(--revlt-blue-hover));
}

#microdata-overlay {
    display: none;
    position: relative;
    margin-top: calc(-1 * var(--space-xxl));
    margin-bottom: var(--space-sm);
    font-size: var(--font-xxs);
    line-height: 0;
    color: rgba(var(--revlt-black), 0.08);
    user-select: none;
    white-space: pre;
    text-shadow: 0 0 2px rgba(var(--revlt-black), 0.2);
    z-index: 3;
    text-align: right;
    margin-right: var(--space-xl);
}

.topMenu{
    position: relative;
    z-index: 2;
    text-align: center;
}

.lineContent{
    display: flex;
    flex-direction: row;
}

.smallScreen{
    width: 200px !important; 
    height: 200px !important; 
    margin-left: var(--font-xxxl);
}

@media (max-width: 480px) {
    .lineContent {
        flex-direction: column;
    }
    .smallScreen{
        margin: auto;
    }
}

.aboutText{
    text-align: justify;
    font-size: var(--font-sm) !important;
    margin-bottom: var(--space-md);
}

/*
888888  dP"Yb   dP"Yb  888888 888888 88""Yb
88__   dP   Yb dP   Yb   88   88__   88__dP
88""   Yb   dP Yb   dP   88   88""   88"Yb
88      YbodP   YbodP    88   888888 88  Yb
*/

footer {
    color: rgb(var(--revlt-white));
    text-align: center;
    margin-top: auto;
    font-size: var(--font-sm);
    position: relative;
    z-index: 1;
    background-color: rgba(var(--revlt-blue-hover), 1);
}


.footer-container p, .footer-container a {
    color: rgb(var(--revlt-white));
    text-decoration: none;
    line-height: 2;
    z-index: 200;
}

.footer-container a:hover {
    color: rgb(var(--revlt-white));
    text-decoration: underline;
    z-index: 200;
}

.footer-container {
    flex-direction: row;
    text-align: center;
    z-index: 200;
}

.footer-container div {
    width: 100%; /* Full width to utilize space */
    margin-bottom: var(--space-lg);
    z-index: 200;
}

.footerTopSection {
    background-color: rgba(var(--revlt-blue-hover),1);
    color: rgb(var(--revlt-white));
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-lg);
    position: relative;
    height: 60px;
    z-index: 2; /* Ensure this section is above others */
}

.footerTopSection .logo-container {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-lg);
    transition: transform 0.5s ease, top 0.5s ease, left 0.5s ease;
    margin: var(--space-sm);
    z-index: 3; /* Ensure the logo is above the footerTopSection */
    display: none;
}

.footerTopSection .logo {
    display: flex;
    align-items: center;
    transition: transform 0.5s ease;
}

.footerTopSection .logo svg {
    max-height: var(--space-xxl);
    margin-right: var(--space-sm);
}

.footerTopSection .name {
    font-size: var(--font-lg);
    margin-left: auto;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 var(--space-lg);
    flex-wrap: wrap;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: var(--space-lg);
    flex: 1;
}

.footer-column h4 {
    margin-bottom: var(--space-sm);
}

.footer-column p, .footer-column a {
    margin: var(--space-xxs) 0;
    text-align: left;
}

.footer-column a {
    color: rgb(var(--revlt-white));
    text-decoration: none;
}

.footer-column a:hover {
    text-decoration: underline;
}

.social-links {
    display: flex;
    justify-content: flex-start;
}

.social-links a {
    margin-right: var(--space-sm);
}

.animation-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    margin: auto;
}

.footer-bottom {
    text-align: center;
    position: relative;
    z-index: 1;
    padding-bottom: var(--space-sm);
}

video {
    max-width: 100%;
    height: auto;
}


/* Hide the video on mobile devices */
@media (max-width: 600px) {
    .animation-logo {
        display: none;
    }
}








/*
.dP"Y8 888888    db    888888 88   88 .dP"Y8     88""Yb    db    88b 88 888888 88
`Ybo."   88     dPYb     88   88   88 `Ybo."     88__dP   dPYb   88Yb88 88__   88
o.`Y8b   88    dP__Yb    88   Y8   8P o.`Y8b     88"""   dP__Yb  88 Y88 88""   88  .o
8bodP'   88   dP""""Yb   88   `YbodP' 8bodP'     88     dP""""Yb 88  Y8 888888 88ood8
*/
.panel {
    border: 1px solid rgba(var(--revlt-black), 0.5);; /* Borda preta */
    border-radius: var(--space-xs);
    color: rgb(var(--revlt-darkgrey));
    margin-top: var(--space-xl);
    font-family: Helvetica, Arial, sans-serif;
    background: linear-gradient(145deg, rgba(var(--revlt-white), 0.2), rgba(var(--revlt-grey_2), 0.3)); /* Fundo com gradiente */
    width: 200px;
    margin: var(--space-md);
}

.panel h2 {
    text-align: center;
    font-size: var(--font-sm);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(var(--revlt-black), 0.5);; /* Linha preta */
    padding-bottom: var(--space-xxs); /* Espaço entre o texto e a linha */
    margin-top: var(--space-xs);
}

.panel p {
    margin: 10px 0;
    font-size: var(--font-xxs) !important;
}

.direction {
    font-weight: bold;
}

.direction-icon {
    margin-left: var(--space-xxs);
}

.navFooterButton{
    /*display: inline;*/
    display: block;
    margin: var(--space-xs);
    padding: 12px 20px 10px 20px;
    font-size: var(--font-xs);
    border-radius: var(--space-xs);
    font-family: Helvetica, Arial, sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    background-color: transparent;
    border: 1px solid rgba(var(--revlt-black), 0.5);
    color: rgb(var(--revlt-white));
}

.navFooterButton:hover {
    background-color: rgba(var(--revlt-grey_2), 0.8);
}

/*
  dP88   dP"Yb    dP88      88""Yb    db     dP""b8 888888
 dP 88  dP   Yb  dP 88      88__dP   dPYb   dP   `" 88__
d888888 Yb   dP d888888     88"""   dP__Yb  Yb  "88 88""
    88   YbodP      88      88     dP""""Yb  YboodP 888888
*/

/* Estilo para o objeto de alumínio */
#display-container {
    position: relative;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    }

/* Tela do vídeo */
#screen {
    width: 90%;
    height: 90%;
    background: rgb(var(--revlt-black));
    border-radius: var(--font-xxs);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Estilo para o vídeo */
#screen video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--font-xxs);
}

/* Define the blink animation */
@keyframes blinkBorder {
    0% {
        border-color: rgba(var(--revlt-black), 0.5);
    }
    50% {
        border-color: rgb(var(--revlt-brightred));
        box-shadow:  0 0 10px rgb(var(--revlt-darkred));
    }
    100% {
        border-color: rgba(var(--revlt-black), 0.5);
    }
}

/* Apply the blink animation to the button */
.goBackButton {
    display: flex;
    margin: auto;
    margin-top: var(--space-xxs);
    margin-bottom: var(--space-xs);
    padding: 12px 20px 10px 20px; /* Padding superior menor, inferior maior */
    font-size: var(--font-xs);
    background-color: rgba(var(--revlt-white), 0.2); /* Fundo suave */
    border: 1px solid rgba(var(--revlt-black), 0.8); /* Borda suave e metálica */
    border-radius: var(--space-xs);
    color: var(--revlt-darkgrey);
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;

    /* Efeito de brilho nas bordas (metálico) */
    background: linear-gradient(145deg, rgba(var(--revlt-white), 0.2), rgba(var(--revlt-grey_2), 0.3));

    /* Apply blinking border animation */
    animation: blinkBorder 1s infinite; /* Blinks every second */
}

.goBackButton:hover {
    /* Add more hover effects here if needed */
}

.goHomeButton {
    display: flex;
    margin: auto;
    margin-top: var(--space-xxs);
    margin-bottom: var(--space-xs);
    padding: 12px 20px 10px 20px; /* Padding superior menor, inferior maior */
    font-size: var(--font-xs);
    background-color: rgba(var(--revlt-white), 0.2); /* Fundo suave */
    border: 1px solid rgba(var(--revlt-black), 0.8); /* Borda suave e metálica */
    border-radius: var(--space-xs);
    color: var(--revlt-darkgrey);
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;

    /* Efeito de brilho nas bordas (metálico) */
    background: linear-gradient(145deg, rgba(var(--revlt-white), 0.2), rgba(var(--revlt-grey_2), 0.3));

    /* Apply blinking border animation */
    animation: blinkBorderSubmit 3s ease-in-out infinite; /* Blinks every second */
}

.goHomeButton:hover {
    /* Add more hover effects here if needed */
}


/*
.dP"Y8 88 8888b.  888888     8b    d8 888888 88b 88 88   88
`Ybo." 88  8I  Yb 88__       88b  d88 88__   88Yb88 88   88
o.`Y8b 88  8I  dY 88""       88YbdP88 88""   88 Y88 Y8   8P
8bodP' 88 8888Y"  888888     88 YY 88 888888 88  Y8 `YbodP'
*/

.menu-icon {
    cursor: pointer;
    font-size: var(--font-xl);
    color: rgb(var(--revlt-darkgrey));
    background: none;
    outline: none;
    border-radius: var(--space-lg);
    padding: var(--space-xxs);
    padding-left: 9px;
    padding-right: 9px;
    padding-top: 5px;
    padding-bottom: 7px;
    border: 1px solid rgba(var(--revlt-blue), 0.5);
}

.text {
    font-size: var(--font-display);
}

.menu-icon.hidden {
    display: none;
}

.menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    max-width: 70%;
    background-color: rgb(var(--revlt-black));
    background-color: rgba(var(--revlt-blue),0.85);
    color: rgb(var(--revlt-white));
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: var(--space-md);
    box-shadow: -4px 0 8px rgba(var(--revlt-white), 0.2);
}

.menu.open {
    transform: translateX(0);
}

.menu .close-btn {
    align-self: flex-end;
    font-size: var(--font-xl);
    cursor: pointer;
    background: none;
    border: none;
    color: rgb(var(--revlt-white));
    outline: none;
}

.menu .close-btn:hover {
    color: rgb(var(--revlt-brightred));
}

.menu a {
    color: rgb(var(--revlt-white));
    text-decoration: none;
    font-size: var(--font-xl);
    font-weight: 700;
    position: relative;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    overflow: hidden;
}


.menu a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background-color: rgb(var(--revlt-white));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.6s ease, background-color 0.6s ease;
}

/* LED Style */
.led {
    width: var(--space-sm);
    height: var(--space-sm);
    border-radius: 50%;
    background-color: rgb(var(--revlt-white)); /* LED verde */
    margin-right: var(--space-md);
    animation: ledPulseGreen 1.5s infinite;
    margin-left: var(--space-xl);
}

/* Pulsação do LED quando não está em hover (verde) */
@keyframes ledPulseGreen {
    0% {
        box-shadow: 0 0 10px rgba(var(--revlt-white), 0.6);
    }
    50% {
        box-shadow: 0 0 20px rgba(var(--revlt-white), 1);
    }
    100% {
        box-shadow: 0 0 10px rgba(var(--revlt-white), 0.6);
    }
}

/* Efeito de hover no item do menu */
.menu-item:hover .led {
    background-color: rgb(var(--revlt-darkred)); /* Muda a cor do LED para vermelho */
    box-shadow: 0 0 15px rgba(var(--revlt-darkred), 0.7); /* Brilho do LED em vermelho */
    animation: ledPulseRed 1.5s infinite; /* Mudar para animação de pulsação vermelha */
}

/* Pulsação do LED quando em hover (vermelho) */
@keyframes ledPulseRed {
    0% {
        box-shadow: 0 0 10px rgba(var(--revlt-brightred), 0.6);
    }
    50% {
        box-shadow: 0 0 20px rgba(var(--revlt-brightred), 1);
    }
    100% {
        box-shadow: 0 0 10px rgba(var(--revlt-brightred), 0.6);
    }
}

.menu.open .menu-item::after {
    animation: lineGrow 0.6s forwards;
}

.menu a:hover::after {
    background-color: rgb(var(--revlt-white));
    transform: scaleX(1);
}

.menu a .arrow {
    position: absolute;
    right: calc(-1 * var(--space-xxl));
    opacity: 0;
    transition: opacity 0.3s ease, right 0.3s ease;
    color: rgb(var(--revlt-white));
}

.menu a:hover .arrow {
    right: var(--space-sm);
    opacity: 1;
}

.menu-item {
    position: relative;
}

.menu-item span {
    display: inline-block;
    opacity: 0;
    transform: translateY(var(--space-lg));
}

.menu.open .menu-item span {
    animation: slideIn 0.6s forwards;
}

@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes lineGrow {
    to {
        transform: scaleX(1);
    }
}

@media (max-width: 768px) {
    .menu {
        width: 100%;
        max-width: 90%;
    }
    .text {
        font-size: var(--font-xxxl);
    }
    .menu a {
        font-size: var(--font-lg);
    }
    .menu-item .number {
        font-size: var(--font-sm);
    }
}

@media (max-width: 480px) {
    .text {
        font-size: var(--font-xxl);
    }
    .menu a {
        font-size: var(--font-md);
    }
    .menu-item .number {
        font-size: var(--font-xs);
    }
}

/*
888888 888888 888888 8888b.  88""Yb    db     dP""b8 88  dP     88 88b 88 88""Yb 88   88 888888
88__   88__   88__    8I  Yb 88__dP   dPYb   dP   `" 88odP      88 88Yb88 88__dP 88   88   88
88""   88""   88""    8I  dY 88""Yb  dP__Yb  Yb      88"Yb      88 88 Y88 88"""  Y8   8P   88
88     888888 888888 8888Y"  88oodP dP""""Yb  YboodP 88  Yb     88 88  Y8 88     `YbodP'   88
*/
.inputTerminal {
  width: 100%;
  min-height: 140px;
  background-color: rgb(var(--revlt-black));
  border: 1px solid rgba(var(--revlt-black), 0.6);
  border-radius: var(--space-xs);
  padding: var(--space-xs);
  color: rgb(var(--revlt-white));

  font-size: var(--font-md);
  white-space: pre-wrap;
  overflow-y: auto;
  caret-color: rgb(var(--revlt-white));
}

.inputTerminal:empty::before {
  content: attr(data-placeholder);
  color: rgba(--revlt-white, 0.2);
  pointer-events: none;
}


@keyframes blink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.submitButton{
    padding: 10px 20px 10px 20px; /* Padding superior menor, inferior maior */
    font-size: var(--font-xs);
    border: 1px solid rgba(var(--revlt-black), 0.5); /* Borda suave e metálica */
    border-radius: var(--space-xs);
    color: rgb(var(--revlt-white));
    font-family: Helvetica, Arial, sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;

    background: rgb(var(--revlt-blue));
    margin-top: var(--space-xs);
    animation: blinkBorderSubmit 3s ease-in-out infinite; /* Blinks every second */
}

.submitButton:hover{
    background: rgb(var(--revlt-blue-hover));
    transform: scale(1.02);
}

@keyframes blinkBorderSubmit {
    0% {
        border-color: rgba(var(--revlt-black), 0.5);
    }
    50% {
        border-color: rgb(var(--revlt-white));
        box-shadow:  0 0 10px rgb(var(--revlt-white));
    }
    100% {
        border-color: rgba(var(--revlt-black), 0.5);
    }
}

/*
 dP""b8  dP"Yb  88b 88 888888    db     dP""b8 888888     888888  dP"Yb  88""Yb 8b    d8
dP   `" dP   Yb 88Yb88   88     dPYb   dP   `"   88       88__   dP   Yb 88__dP 88b  d88
Yb      Yb   dP 88 Y88   88    dP__Yb  Yb        88       88""   Yb   dP 88"Yb  88YbdP88
 YboodP  YbodP  88  Y8   88   dP""""Yb  YboodP   88       88      YbodP  88  Yb 88 YY 88
*/

/* Estilo para o campo de input */
.form-input-container {
    position: relative;
    width: 100%;
    margin: var(--space-xs);

}

.form-label {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: absolute;
    top: -10px;
    left: 0;
    color: rgba(var(--revlt-black), 0.8);
}

.form-input {
    border: none; /* Remover bordas padrão */
    border-bottom: 2px solid rgb(var(--revlt-black)); /* Apenas underline */
    width: 100%; /* Garantir que o input ocupe toda a largura do container */
    padding: var(--space-xxs) 0; /* Ajuste de padding */
    text-align: left; /* Alinha o texto à esquerda */
    font-weight: 500;
    font-size: var(--font-md);
    margin-top: var(--space-xs);
    padding: var(--space-xxs);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    background-color: rgb(var(--revlt-white));
}

/* Ajustes para os campos à esquerda e à direita */
.form-row {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Para garantir que os inputs fiquem alinhados verticalmente */
}

.form-input.half.left {
    text-align: left;
}

.form-input.half.right {
    text-align: left;
    margin-left: auto; /* Isso força o campo à direita a se alinhar com a borda direita */
}


textarea.form-input.full {
    width: 100%;
    height: 100px;
}


#successMessage {
    display: block;
    color: rgba(var(--revlt-black), 0.7);
    font-size: var(--font-md);
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
}

@media (max-width: 480px) {
    .form-row{
        flex-direction: column;
    }

    .nav-button{
        padding: 3px 9px 3px 9px;
        margin-right: 0px;
    }
}

.infoTerms{
    font-size: var(--font-xxs) !important;
}