/* navbar */

.dropdown-item:hover {
  color: #cfcfcf !important;
  /* Cor do texto */
  background-color: #0d6efd !important;
  /* Mantém o fundo azul ou pode mudar também */
}

.nav-link:hover {
  color: #cfcfcf !important;
}

@media (max-width: 768px) {
  .btn-central {
    margin-top: 20px;
  }

  .btn-centrall {
    margin-top: 30px;
    margin-bottom: 20px;
  }

}


/* velocimetro */

.bg-velocimetro {
  background-color: #060C22 !important;
  /* Exemplo: rosa */
}

#velocimetro .btn-close {
  background-color: #cfcfcf;
  /* Fundo transparente por padrão */
  border: none;
  /* Remove a borda padrão */
  opacity: 1;
  /* Um pouco de transparência por padrão */
  position: relative;
  width: 10px;
  /* Ajuste o tamanho */
  height: 10px;
  border-radius: 50%;
  /* Para criar o círculo */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  /* Cor do "X" branco por padrão */
  font-size: 0.8em;
  /* Ajuste o tamanho do "X" se necessário */
  text-decoration: none;
  /* Remove qualquer sublinhado */
  transition: background-color 0.2s ease, color 0.2s ease;
}

#velocimetro .btn-close:hover {
  background-color: red;
  /* Fundo vermelho ao passar o mouse */
  color: lightgray;
  /* Cor do "X" cinza claro ao passar o mouse */
  opacity: 1;
  /* Remove a transparência ao passar o mouse */
}

#velocimetro .btn-close:focus {
  outline: none;
  /* Remove a borda de foco padrão */
  box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25);
  /* Destaque de foco vermelho */
}

/* Carousel */

.carousel-caption h1 {
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 2.5em;
  color: #FFFFFF;
}

.carousel-caption p {
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 1.2em;
  color: #FFFFFF;
}

/* Planos */

.plano_titulo {
  color: #FFFFFF;
}

.planos {
  background: linear-gradient(to bottom, #0d6efd, #FFFFFF);
  /* Degradê suave */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centraliza o conteúdo horizontalmente */
  box-sizing: border-box;
  /* Garante que padding não afete a largura total */
}

.rowCard {
  width: 100%;
  max-width: 1200px;
  /* Largura máxima para o conteúdo interno (cards) */
  margin-top: 30px;
  margin-bottom: 30px;
  justify-content: center;
  /* Centraliza os cards em telas menores */
}

h1 {
  margin-top: 20px;
  text-align: center;
  /* Garante que o título fique centralizado dentro do row */
  width: 100%;
  /* Garante que o título ocupe a largura total do row */
  font-family: 'Montserrat', sans-serif;
  /* Aplicando a fonte Montserrat */
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  color: #333333;

}

.card {
  border: 1px solid #e0e0e0;
  box-shadow: 0px 3px 10px #464646;
}

.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}

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

@media (max-width: 768px) {

  /* Para telas menores que o breakpoint 'sm' do Bootstrap */
  .rowCard {
    display: flex;
    justify-content: center;
  }

  .colCard {
    flex-basis: 100%;
    /* Garante que cada card ocupe a largura total da linha */
    max-width: 100%;
  }
}

/* Sobre */

.cardSobre {
  box-shadow: 0px 3px 10px;
}

p.sobre {
  text-align: justify;
}

.sobre_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imagem-de-fundo {

  background-image: url('/imagens/MP1.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

/* Mapa */

.mapa {
  color: #FFFFFF;
  text-align: center;
  background: linear-gradient(to bottom, #0d6efd, #FFFFFF);
}

.mapa h3 {
  font-size: 2.3em;
}

.mapa iframe {
  width: 100%;
  height: 450px;
  box-shadow: 0px 0px 10px 3px #464646;
}

@media (max-width: 768px) {
  .mapa {
    color: #333333;
  }

  .mapa h3 {
    margin-top: 30px;
    margin-bottom: 0;
    font-size: 1.5em;
  }
}

/* Footer */

.footer_text {
  font-size: 0.8em;
}

.imagem-de-footer img {

  background-image: url('/imagens/footer.png');
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  position: absolute;
}

.footer-relative {
  position: relative;
  width: 100%;
  background-color: #0000CD;
}

.footer-texto {
  position: relative;
}

/* Remove a imagem de fundo em telas menores (máximo de 768px de largura) */
@media (max-width: 768px) {
  .imagem-de-footer img {
    display: none;
    /* Oculta a imagem */
  }

  .footer-relative {
    flex-direction: column;
    background: linear-gradient(#58a2f1, #03256C)
  }
}

.social-icons-container div {
  display: inline-block;
}

.icon-redes-sociais {
  animation: balanco-inclinado 0.7s linear infinite;
  transform-origin: center center;
  /* Garante que a rotação seja no centro */
}

@keyframes balanco-inclinado {
  0% {
    transform: translateX(3px) rotate(-5deg);
    /* Move para a esquerda e inclina */
  }

  50% {
    transform: translateX(-3px) rotate(5deg);
    /* Move para a direita e inclina para o outro lado */
  }

  100% {
    transform: translateX(3px) rotate(-5deg);
    /* Retorna à posição inicial */
  }
}

/* Watsapp */

.btn-wpp {
  position: fixed;
  z-index: 2;
  bottom: 80px;
  right: 80px;
}

.btn-wpp img {
  width: 70px;
  /* Tamanho padrão da imagem */
  height: auto;
  /* Mantém a proporção da imagem */
}

@media (max-width: 768px) {
  .btn-wpp {
    bottom: 30px;
    right: 30px;
  }

  .btn-wpp img {
    width: 50px;
    /* Tamanho da imagem em dispositivos móveis (ajuste conforme necessário) */
    height: auto;
  }
}


/* Seta home */

.home {
  visibility: hidden; /* Inicialmente oculto em todos os dispositivos */
  position: fixed;
  z-index: 2;
  top: 50px; /* Altere 'top' para 'bottom' para aparecer na parte inferior */
  right: 50px;
  color: #e0e0e0;
  opacity: 0; /* Começa com opacidade 0 para transição suave */
  transition: opacity 0.3s ease-in-out; /* Adiciona uma transição suave para a opacidade */
}

.home.visible {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 768px) {
  /* No modo mobile, a visibilidade inicial continua hidden,
     o JavaScript controlará quando tornar visível */
}

@media (min-width: 769px) {
  .home {
    display: none; /* Oculta completamente no desktop */
  }
}

/* Modals */

.modalHeader {
  background-color: #007bff;
}

.fibra-img {
  width: 300px;
  display: block;
  /* Faz a imagem se comportar como um bloco para aplicar as margens automáticas */
  margin: 0 auto;
  /* Define as margens esquerda e direita como automáticas, centralizando o bloco */
}

.roteador-img {
  width: 150px;
  display: block;
  /* Faz a imagem se comportar como um bloco para aplicar as margens automáticas */
  margin: 0 auto;
  /* Define as margens esquerda e direita como automáticas, centralizando o bloco */
}