@import url('https://fonts.googleapis.com/css?family=Gruppo');

/* Reset de estilos para remover margens e preenchimentos padrão */
body, h1, h2, ul, li, p {
    margin: 0;
    padding: 10px;
}

/* Estilos gerais */
/* Estilo para todo o corpo da página */
body {
    margin: 0;
    padding: 0;
    font-family: 'Gruppo', sans-serif; /* Fonte padrão */
    font-size:20px;
    line-height: 1.2;
    min-height: 100vh; /* Defina uma altura mínima de 100% da altura da janela de visualização */
    display: flex;
    flex-direction: column;
    background-color: #000; /* Cor de fundo preto */
    color: #fff; /* Cor do texto branco */ 
     /* overflow: hidden;  Para evitar que a barra de rolagem apareça */
    background: url('img/f2-60.png') no-repeat fixed right bottom;
    background-size: cover; /* Para cobrir toda a área visível */  
    cursor: url('img/nave0.png') 16 16, auto;  
    

}


ul { list-style-type: "🢖"; }

h1 {
    font-size: 50px; /* Tamanho diferente para o elemento h1 */
    color: #c0ad86;
  }

h2 {
    font-size: 30px; /* Tamanho diferente para o elemento h2 */
    color: #ff6f00;
    margin-bottom: 10px;
  }

h3 {
    font-size: 26px; /* Tamanho diferente para o elemento h3 */
    color: #e30c0c;
  }

  h4 {
    font-size: 22px; /* Tamanho diferente para o elemento h3 */
    color: #e3690c;
  }

  h5 {
    font-size: 100px; /* Tamanho diferente para o elemento h3 */
    color: #e30c0c;
    margin: 0px;
    padding: 0px;
  }

/* Estilos para links âncora */
a {
    color: #cf6b00; /* Cor dos links */
    text-decoration: none;
    cursor: help;
    cursor: crosshair !important;
    pointer-events: none !important;
}

a:hover {
    color: #606060; /* Cor dos links quando passar o mouse */
    cursor: crosshair !important; /* Altere 'pointer' para o estilo de cursor desejado */
}

a:link {
    cursor: crosshair !important; 
}


/* Estilo para o conteúdo principal */
.conteudo {
    flex-grow: 1; /* Ocupa todo o espaço restante verticalmente */
    padding: 20px;
}

nav {

    background-image: url('img/f24_26.png');
    background-size: 1000px 100%; /* Ajusta a imagem ao tamanho do elemento */
    opacity: 1.0; /* Adjust the opacity level (0.0 to 1.0) */
    background-position: center; /* Centraliza a imagem vertical e horizontalmente */
    background-repeat: no-repeat;
    color: #fff;
    padding: 180px 0; /* jccc ajuda a defenir a altura da barra de navegaçao */
    position: sticky; /* Barra de navegação será fixa */
    top: -205px; /* Fixa a barra de navegação no topo */
    z-index: 100; /* Adicione uma elevada ordem de camada para evitar sobreposições */

}

nav ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
    padding: 10px 0px 0px 0px;
}

nav li {
    margin: 0px 2px 0px 2px;
    
}

nav a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    transition: color 0.3s;
}

nav a:hover {
    background-color: #cf6b00; 
    color: #fff;
}

main {
    max-width: 900px;
    margin: 2px auto;
    padding: 2px;
    background-color: rgba(0, 0, 0, 0.1);   /* Cor de fundo e opacidade */    
}

section {
    margin-bottom: 20px;
}


/* Estilo para o footer fixo */
footer {
    background-color: #333;
    background-image: url('img/base-rodape.png');
    background-position: center; /* Centraliza a imagem vertical e horizontalmente */
    background-repeat: no-repeat;
    background-size: 100% 100%; /* Ajusta a imagem ao tamanho do elemento */
    opacity: 0.9; /* Adjust the opacity level (0.0 to 1.0) */
    text-align: center;
    padding: 0px;
    background-color: #333;
    color: #fff;
    z-index: -2004;
    /*  position: fixed;  Fixa o footer na parte inferior */
    left: 0;
    bottom: 0;
    width: 96%; /* jccc passei a 96 porque aparecia barra de scrool em baixo com 100 */
}


/* Estilos do menu principal */
.menu {
    list-style-type: none;
    display: flex;
    top: -205px;
}

.menu li {
    position: relative;
    margin-top: 12px;
}

.menu a {
    text-decoration: none;
    padding: 8px;
    opacity: 0.8; /* Adjust the opacity level (0.0 to 1.0) */
    border-radius: 8px;
    background-color: #161616;  /* background-color: #323232; */
}

.menu a:hover {
    color: #ffffff;
}

/* Estilos do submenu */
.submenu-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #1b1b1b;
    border-radius: 8px;
    padding: 30px;

}

.submenu:hover .submenu-content {
    display: block;
}

.submenu-content li {
    padding: 10px;
    margin-top: 4px;
    width: 100%;

}

.submenu-content ul {

    width: 100%;
}


/* Estilo para o botão de voltar ao topo */
#btnVoltarAoTopo {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 30px 30px;
    background-color: #c36500;
    color: #fff;
    border: none;
    cursor: pointer;
    z-index: 1000;
    border-radius: 20px;
    opacity: 0.4;
}

#btnVoltarAoTopo:hover {
    background-color: #cf0000;
}

.logo-grande {
    font-size: 30px;
    vertical-align: -4px; /* alinhamento vertical */
}

.logo-grande:hover {

    background-color: #ff5500; 
    transform: scale(1.3); /* Efeito de destaque ao passar o mouse */
    color: #fff; /* Texto branco */
}

.icone-deslocado {
    font-size: 70px;
    color: #8f0202; /* Cor padrão */
    transition: transform 0.9s, color 0.9s; /* Efeito de transição suave para mudança de escala e cor */    
    margin-top: -4px;
    position: sticky;
}

.icone-deslocado:hover {
    color: #cf6b00; /* Cor vermelha quando o mouse passa por cima */
    transform: scale(1.1); /* Aumenta o tamanho quando o mouse passa por cima */

    /* transform: skew(60deg, 10deg) scaleY(.66667); */
}

/* Estilos para o cabeçalho */
.cabecalho {
    background-image: url('img/Fantasy-Colors-Wallpaper.jpg'); 
    background-size: cover; /* Ajusta a imagem ao tamanho do elemento */
    background-position: center; /* Centraliza a imagem vertical e horizontalmente */
    height: 320px; /* Altura do cabeçalho */
    color: #fff; /* Cor do texto no cabeçalho */
    text-align: center; /* Alinhamento do texto */
    padding: 10px; /* Espaçamento interno */
    z-index: 100;
    opacity: 0.3; /* Adjust the opacity level (0.0 to 1.0) */
}

.servicos {
    color: #cf6b00;
    opacity: 1; 
}

/* Estilos para a caixa2 */
.caixa2 {
    background-color: rgba(68, 70, 69, 0.2);
    border: 1px solid rgba(122, 119, 119, 0.4);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    color: #fff; /* Texto branco */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    margin: 20px;
    opacity: 1.0;
}

/* Estilos para o quarto da imagem */
.imagem-quarto2 {
    flex: 1;
    background-color: rgba(68, 70, 69, 0.2);
    background-image: url('img/3U5p.gif'); 
    background-position: center; /* Centraliza a imagem vertical e horizontalmente */
    background-repeat: no-repeat;
    background-size: 100% 100%; /* Ajusta a imagem ao tamanho do elemento */
    opacity: 0.5;
}

/* Estilos para a imagem dentro do quarto */
.imagem-quarto2 img {
    width: 100%;
    min-width: 610px;
    height: auto;
}

/* Estilos para os três quartos de texto */
.texto-quarto2 {
    flex: 3;
    padding: 20px;
    color: #f0f0f0; /* Texto preto */
}

/* Estilos para o botão de chamada para ação 1*/
.botao-cta {
    display: inline-block;
    padding: 15px 15px;
    margin: 10px;
    background-color: #ff6600; /* Cor de laranja */
    color: #fff; /* Texto branco */
    text-decoration: none;
    border-radius: 25px; /* Borda arredondada */
    transition: background-color 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
    opacity: 0.6;
}

.botao-cta:hover {
    background-color: #ff5500; /* Cor de laranja mais escura ao passar o mouse */
    transform: scale(1.3); /* Efeito de destaque ao passar o mouse */
    color: #fff; /* Texto branco */
}

.botao-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2); /* Destaque de fundo */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.botao-cta:hover::before {
    opacity: 1; /* Torna o destaque de fundo visível ao passar o mouse */
}

/* Estilos para o botão de chamada para ação 2*/
.botao-cta2 {
    display: inline-block;
    padding: 15px 15px;
    margin: 10px;
    background-color: #4285ac; /* Cor azul */
    color: #fff; /* Texto branco */
    text-decoration: none;
    border-radius: 25px; /* Borda arredondada */
    transition: background-color 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
    opacity: 0.6;
}

.botao-cta2:hover {
    background-color: #ff0000; /* Cor de laranja mais escura ao passar o mouse */
    transform: scale(1.3); /* Efeito de destaque ao passar o mouse */
    color: #fff; /* Texto branco */
}

.botao-cta2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2); /* Destaque de fundo */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.botao-cta2:hover::before {
    opacity: 1; /* Torna o destaque de fundo visível ao passar o mouse */
}

/* Estilos para o botão de chamada para ação 3*/
.botao-cta3 {
    display: inline-block;
    padding: 15px 15px;
    margin: 10px;
    background-color: #4dac42; /* Cor azul */
    color: #fff; /* Texto branco */
    text-decoration: none;
    border-radius: 25px; /* Borda arredondada */
    transition: background-color 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
    opacity: 0.6;
}

.botao-cta3:hover {
    background-color: #ff0000; /* Cor de laranja mais escura ao passar o mouse */
    transform: scale(1.3); /* Efeito de destaque ao passar o mouse */
    color: #fff; /* Texto branco */
}

.botao-cta3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2); /* Destaque de fundo */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.botao-cta3:hover::before {
    opacity: 1; /* Torna o destaque de fundo visível ao passar o mouse */
}

/* Estilos para o botão de chamada para ação 4*/
.botao-cta4 {
    display: inline-block;
    padding: 15px 15px;
    margin: 10px;
    background-color: #ac4260; /* Cor azul */
    color: #fff; /* Texto branco */
    text-decoration: none;
    border-radius: 25px; /* Borda arredondada */
    transition: background-color 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
    opacity: 0.6;
}

.botao-cta4:hover {
    background-color: #ff0000; /* Cor de laranja mais escura ao passar o mouse */
    transform: scale(1.3); /* Efeito de destaque ao passar o mouse */
    color: #fff; /* Texto branco */
}

.botao-cta4::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2); /* Destaque de fundo */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.botao-cta4:hover::before {
    opacity: 1; /* Torna o destaque de fundo visível ao passar o mouse */
}

/* Estilos personalizados para o botão on off*/

#toggleButton {
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.3s, color 0.3s; /* Adiciona transição de cores */
}

/* Estilo quando o botão está no estado "On" */
#toggleButton.on {
    background-color: #049129;
    color: #fff;
}

/* Estilo quando o botão está no estado "Off" */
#toggleButton.off {
    background-color: #ba0707;
    color: #fff;
}

  .destaque {
    padding: 10px;
    text-align: center;
    color: white;
    font-size: 20px;
    border: 2px solid black;
 
  }

  .logo-grande1 {
    font-size: 24px;
    vertical-align: -4px;

  }

  .logo-grande2 {
    font-size: 60px;
  }

  /* Estilo texto retratil */

  .collapsible .content {
    display: none;
    padding: 20px;
  }
  
  .collapsible .title {
    cursor: pointer;
  }
  
  .collapsible .title a {
    text-decoration: none;
  }

  /* Estilo personalizado para a caixa de verificação */
input[type="checkbox"] {
    transform: scale(2); /* Aumenta o tamanho da caixa de verificação */
    margin-right: 16px;
  }

  .paragrafo-direita {
    text-align: right;
  }

  .input-text {
    font-size: 20px;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 5px;
    background-color: #f7f7f7;
    color: #360;
    width: 360px;
    height: 200px;
    /* Outros estilos desejados */
}

.spacer {
    display: inline-block; /* Torna a div um elemento de bloco dentro de inline */
    height: 330px; /* Altura desejada */
}

/* scroll no pessoal */
.scrolling-container {
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflow content */
  }
  
  .scrolling-container p {
    animation: scroll-right 20s linear infinite; /* Adjust the animation duration as needed */
  }
  
  @keyframes scroll-right {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
  }

  #bola {
    opacity: 1.0; /* Sets the opacity */
    z-index: 100;

  }

  /* scrollbar Para navegadores baseados em WebKit (Chrome, Safari) */
::-webkit-scrollbar {
    width: 1px;

  }
  
  ::-webkit-scrollbar-track {
    background: #000000; /* Cor de fundo da barra de rolagem */
  }
  
  ::-webkit-scrollbar-thumb {
    background: #ff0000; /* Cor da alça da barra de rolagem */
    opacity: 0.1; /* Adjust the opacity level (0.0 to 1.0) */
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #ff0000; /* Cor da alça da barra de rolagem quando o mouse estiver sobre ela */
  }

  #statusButton {
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
}

.online {
    background-color: green;
    color: white;
}

.offline {
    background-color: red;
    color: white;
}

.glow-on-hover {
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/* -------------------------------------------- */

#progress-bar {
    width: 100%;
    height: 5px;
    background-color: #232323;
    position: relative;
    opacity: 0.6; 
    margin-top: -46px;
    z-index: 90;
  }

  #progress {
    height: 100%;
    width: 0;
    transition: width 1s ease-in-out;
    opacity: 0.6; 
  }

.radares {
    opacity: 0.4;
}


.radar-fixo {
    position: fixed;
    opacity: 0.2;
    width: 860px;
    margin-top: -686px;
    z-index: -2001;
}

/* ---------------------relogio----------------------- */
#clock-container {
    display: flex;
    justify-content: left;
    align-items: center;
    height: 100vh;
    margin: 0;
    position: fixed;
    /* top: -316px;    distância do topo em pixels */
   /*  left: -26px;   distância da esquerda em pixels */
   top: 44%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: -90;

  }

  #clock {
    width: 1260px;
    height: 200px;
    border: 1px solid #049129;
    border-radius: 50%;
    position: relative;
    opacity: 0.6;
  }

  .hand {
    position: absolute;
    transform-origin: 50% 100%;
    left: 50%;
    transform: translateX(-50%);
  }

  #hour {
    height: 9000px;
    opacity: 0.3;
    width: 10px;
    background: #00eb4e;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
  }

  #minute {
    height: 9000px;
    opacity: 0.5;
    width: 4px;
    background: #a38500;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
  }

  #second {
    height: 9000px;
    opacity: 0.7;
    width: 1px;
    background: #f00;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
/* ---------------------relogio-----fim------------------ */


.botao22 {
    padding: 10px 20px;
    margin: 4px;
    font-size: 14px;
    cursor: pointer;
    background-color: #d48f06;
    color: #fff;
    border: none;
    border-radius: 5px;
    outline: none;
    transition: background-color 0.3s ease;
    opacity: 0.7;
}

.botao22:hover {
    background-color: #b92929;
}

.bloco-centrado {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    opacity: 0.3;
}

.imagem-centralizada {
    text-align: center;
}

.modal  {
    z-index: 1900;
    /*   position: fixed;  Barra de navegação será fixa  */
    border-radius: 50%;
    opacity: 0.5;
    background: linear-gradient(60deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);  
    border-width: 0px;
    /* background-image: url('img/radar2.gif'); */
    background-size: cover;
    border-color: transparent;
    align-items: center; /* Alinha verticalmente no centro */
    margin-top: -8px; /* Ajuste a distância do topo conforme necessário */
}

.modal1 {
    font-size: 45px;
    color: rgb(255, 255, 255);
}

/* Estilo inicial da div */
#minhaDiv {
    background-color: #ff0000;
    margin: 0px;
    opacity: 0.8;
}

.elementoFixo {
    color: #ffffff;
    opacity: 0.2;
    padding: 10px;
    font-size: 35px;
    z-index: 98;
    /* Aplique a posição fixa */
    position: fixed;
    top: 0;
    right: 20px;
  }

  .elementoFixo_logo {
    opacity: 0.7;
    z-index: 99;
    position: fixed;
    font-size: 40px;
    color: #a1a1a1; /* Cor padrão */
    transition: transform 0.9s, color 0.9s; /* Efeito de transição suave para mudança de escala e cor */    
    top: 2px;
    left: 2px;
  }

  .stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* fundo transparente*/
    background: #00000000;
    z-index: -1;
}

.star {
    position: absolute;
    width: 3px;
    height: 15px;
    border-radius: 50%;
    animation: twinkle 1s infinite alternate;
    z-index: -1;
}

@keyframes twinkle {
    to {
        opacity: 0.5;
    }
}

canvas {
    display: block;
    position: fixed; /* Mantém o canvas fixo na página */
    top: 0;
    left: 0;
    z-index: -2;
}


/* Estilos padrão para as divs */


/* Media query para telas menores, como dispositivos móveis */
@media (max-width: 767px) {
    .caixa2 {
        flex-direction: column; /* Empilhar as divs verticalmente */
    }

    .imagem-quarto2,
    .texto-quarto2 {
        width: 100%; /* Ocupar toda a largura da tela em telas menores */
    }
}

#canvas24 {
    display: block;
    z-index: -2006;
    opacity: 0.08;

  }

 .galaxy24-1 {
    opacity: 0.5;
}

#rato {
    position: fixed;
    width: 200px;
    height: 200px;
    background-image: url('img/nave2.png');
    background-size: cover;
    transition: transform 0.5s ease; /* Tempo de transição para suavidade do efeito */
    pointer-events: none;
    z-index: 2006;
}