body {
  background-image: url('imagenes/ea.webp');
  background-size: cover; /* Ajusta la imagen para cubrir toda la pantalla */
  background-position: center; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-attachment: fixed; /* Fija la imagen para que no se desplace con el scroll */
}

.extra-info {
  display: none; /* Oculto por defecto */
}

.extra-info.visible {
  display: block; /* Visible cuando tiene la clase "visible" */
}

button {
  background-color: #007bff;
  color: white;
  padding: 8px 12px;
  border: none;
  cursor: pointer;
  margin-top: 10px;
}

button:hover {
  background-color: #0056b3;
}

.custom-border-text {
  -webkit-text-stroke: 1px rgb(0, 0, 0);
  font-size: 48px; /* Tamaño de texto aumentado */
}
.circular-icon {
  border-radius: 50%;  /* Esto hace que la imagen sea circular */
  object-fit: cover;  /* Esto asegura que la imagen se ajuste correctamente dentro del círculo */
} 
#inicio {
  transition: background-image 0.3s ease;
}
#inicio {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 100vh;
  flex-direction: column;
  text-align: center;
}
#inicio .container {
  padding-top: 100px; /* Ajusta este valor a tu gusto */
}

/* Estilo para el menú desplegable */
.navbar .dropdown-menu {
  background-color: #343a40; /* Fondo oscuro para coincidir con el navbar */
  border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil */
}

.navbar .dropdown-item {
  color: #ffffff; /* Texto blanco */
}

.navbar .dropdown-item:hover {
  background-color: #007bff; /* Color de fondo al pasar el mouse */
  color: #ffffff; /* Texto blanco */
}

/* Estilo base para todas las tarjetas */
.card {
  background-size: cover; /* Ajusta la imagen para cubrir la tarjeta */
  background-position: center; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  color: #ffffff; /* Color del texto claro para contrastar con el fondo oscuro */
  border: 1px solid rgb(255, 255, 255); /* Borde sutil */
  position: relative; /* Necesario para posicionar el fondo */
  overflow: hidden; /* Evita que el fondo se desborde */
  padding: 20px; /* Espaciado interno */
}

/* Estilo para el título y el texto */
.card .card-title {
  font-size: 1.5rem; /* Tamaño del título */
  margin-bottom: 10px; /* Espaciado inferior */
  padding: 5px; /* Espaciado interno */
  color: #ffffff; /* Color del título */
}

.card .card-text {
  font-size: 1rem; /* Tamaño del texto */
  color: #d8d6d6; /* Color del texto */
}

/* Estilo para el botón */
.card .btn {
  margin-top: 10px; /* Espaciado superior */
  background-color: #007bff; /* Color de fondo del botón */
  border: none; /* Sin borde */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Sombra para el botón */
  color: rgb(255, 255, 255); /* Color del texto del botón */
}

/* Estilos específicos para cada tarjeta */

/* Chip Tuning */
.chip-tuning-card {
  background-image: linear-gradient(
      rgba(8, 8, 8, 0.8), /* Fondo negro semitransparente */
      rgba(8, 8, 8, 0.8)
  ), url('imagenes/STAGE1.jpg'); /* Imagen de fondo */
}
/* Reparación de Centralitas de Motor */
.centralitas-card {
  background-image: linear-gradient(
      rgba(8, 8, 8, 0.8),
      rgba(8, 8, 8, 0.8)
  ), url('imagenes/ECU.webp'); /* Imagen de fondo */
}

/* DPF */
.dpf-card {
  background-image: linear-gradient(
      rgba(8, 8, 8, 0.8),
      rgba(8, 8, 8, 0.8)
  ), url('imagenes/dpf.jpg'); /* Imagen de fondo */
}

/* EGR */
.egr-card {
  background-image: linear-gradient(
      rgba(8, 8, 8, 0.8),
      rgba(8, 8, 8, 0.8)
  ), url('imagenes/egr.jpg'); /* Imagen de fondo */
}

/* Soluciones de AdBlue */
.adblue-card {
  background-image: linear-gradient(
      rgba(8, 8, 8, 0.8),
      rgba(8, 8, 8, 0.8)
  ), url('imagenes/adblue.jpg'); /* Imagen de fondo */
}

/* Solución de error de FRM */
.frm-card {
  background-image: linear-gradient(
      rgba(8, 8, 8, 0.8),
      rgba(8, 8, 8, 0.8)
  ), url('imagenes/frm.jpg'); /* Imagen de fondo */
}

/* Cancelación del límite de velocidad (Vmax) */
.limit-card {
  background-image: linear-gradient(
      rgba(8, 8, 8, 0.8),
      rgba(8, 8, 8, 0.8)
  ), url('imagenes/limit.jpg'); /* Imagen de fondo */
}

/* Reparación de centralitas de Airbag */
.airbag-card {
  background-image: linear-gradient(
      rgba(8, 8, 8, 0.8),
      rgba(8, 8, 8, 0.8)
  ), url('imagenes/airbag.jpg'); /* Imagen de fondo */
}

/* Reparación de cuadros de instrumentos */
.speed-card {
  background-image: linear-gradient(
      rgba(8, 8, 8, 0.8),
      rgba(8, 8, 8, 0.8)
  ), url('imagenes/speed.jpg'); /* Imagen de fondo */
}

/* Diagnóstico Especializado */
.diag-card {
  background-image: linear-gradient(
      rgba(8, 8, 8, 0.8),
      rgba(8, 8, 8, 0.8)
  ), url('imagenes/diag.jpg'); /* Imagen de fondo */
}

.neons {
  margin-top: 1rem;
  text-align: center;
}

.neons h1 {
  font-size: 4rem;
  text-align: center;
  font-weight: bold;
  -webkit-animation: glow 2s ease-in-out infinite alternate;
  -moz-animation: glow 2s ease-in-out infinite alternate;
  animation: glow 2s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    color: #fff;
    text-shadow: 0 0 10px #00fff2, 0 0 20px #00fff2, 0 0 30px #00fff2, 0 0 40px #00fff2, 0 0 50px #00fff2, 0 0 60px #00fff2, 0 0 70px #00fff2, 0 0 90px #00fff2;
  }
  to {
    color: rgb(255, 255, 255);
    text-shadow: 0 0 20px #00fff2, 0 0 30px #00fff2, 0 0 40px #00fff2, 0 0 50px #00fff2, 0 0 60px #00fff2, 0 0 70px #00fff2, 0 0 80px #00fff2, 0 1 90px #00fff2;
  }
}

/* Estilos para el botón de scroll hacia arriba */
.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none; /* Oculto por defecto */
  z-index: 1000;
  padding: 10px 15px;
  border-radius: 50%; /* Forma circular */
  font-size: 18px;
  background-color: #007bff; /* Color de fondo */
  color: white; /* Color del texto */
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
  transition: background-color 0.3s ease; /* Transición suave */
}

.scroll-to-top:hover {
  background-color: #0056b3; /* Cambio de color al pasar el mouse */
}

/* Estilo para el footer */
footer {
  width: 100%;
  padding: 1rem 0;
  background-color: #343a40; /* Color oscuro */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

footer h4 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: #ffffff;
  font-weight: bold;
}

footer ul {
  padding: 0;
  margin: 0;
}

footer ul li {
  display: inline-block;
  margin: 0 12px;
}

footer ul li a {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

footer ul li a:hover {
  transform: scale(1.2); /* Mayor efecto al pasar el mouse */
  opacity: 0.8;
}