/* ==========================================
   RESET GENERAL
========================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Asegura que el padding y el border no aumenten el tamaño del elemento */
}

/* ==========================================
   CUERPO DEL DOCUMENTO
========================================== */
body {
  font-family: "Poppins", sans-serif; /* Fuente principal */
  background-color: #f0f2f5; /* Fondo suave gris */
  color: #222; /* Texto principal oscuro */
  line-height: 1.6; /* Altura de línea legible */
}

/* ==========================================
   ENCABEZADO PRINCIPAL (HEADER)
========================================== */
.encabezado {
  background-color: #ffffff; /* Fondo blanco */
  padding: 20px 20px; /* Espaciado interno */
  display: flex; /* Distribución horizontal */
  justify-content: space-between; /* Elementos separados */
  align-items: center; /* Centrado vertical */
  color: #fff; /* Aunque no se usa, está definido */
  position: sticky; /* Se queda arriba al hacer scroll */
  top: 0;
  z-index: 1000; /* Siempre encima */
  height: 90px;
  border-bottom: 2px solid #a6a6a6; /* Línea inferior para separación */
}

.header-arriba {
  width: 1300px;
}

/* ==========================================
   LOGO
========================================== */
.logo {
  height: 95px;
  width: 105px;
  margin-left: 20px;
  object-fit: contain; /* Asegura que el logo se ajuste sin distorsión */
  background-color: #fff; /* Solo útil si el logo tiene fondo transparente */
}

/* ==========================================
   BUSCADOR Y BARRA DE BÚSQUEDA
========================================== */
.buscador {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Espacio entre input y botón */
  margin-top: 5px;
}

.buscador input {
  padding: 12px 24px;
  border: 1px solid #8f8f8f;
  border-radius: 50px;
  width: 580px;
  font-size: 16px;
  background: #fcfcfc;
  color: #333;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  outline: none;
}

.buscador input::placeholder {
  color: #b0b0b0;
  font-style: italic;
}

.buscador input:focus {
  border-color: #4c8bf5;
  box-shadow: 0 4px 20px rgba(76, 139, 245, 0.3);
}

/* ==========================================
   BOTÓN DE BÚSQUEDA
========================================== */
.btn-buscar {
  background: rgba(76, 139, 245, 0.9);
  backdrop-filter: blur(6px); /* efecto glassmorphism */
  border: none;
  padding: 15px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.3s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  margin-left: 10px;
  text-decoration: none;
}

.btn-buscar i {
  color: #fff;
  font-size: 20px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.btn-buscar:hover {
  transform: translateY(-3px);
  background: rgba(60, 111, 224, 1);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
}

.btn-buscar:active {
  transform: scale(0.96);
}

/* ==========================================
   ÍCONO DE LOGIN
========================================== */
.icono-login {
  background: rgba(76, 139, 245, 0.9);
  backdrop-filter: blur(6px); /* efecto glassmorphism */
  border: none;
  padding: 14px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.3s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  margin-left: 10px;
  text-decoration: none;
}

.icono-login i {
  color: #fff;
  font-size: 24px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.icono-login:hover {
  transform: translateY(-3px);
  background: rgba(60, 111, 224, 1);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
}

.icono-login:active {
  transform: scale(0.96);
}

/* Estilo para el ícono de hamburguesa */
.hamburger {
  display: none; /* El ícono de hamburguesa estará oculto en pantallas grandes */
  font-size: 30px;
  cursor: pointer;
  color: #797979; /* Ícono de hamburguesa en color negro */
}

.menu {
  display: none;
  justify-content: space-between;
  align-items: center;
}

.menu ul {
  display: flex;
  list-style: none;
}

.menu ul li {
  margin-left: 20px;
}

.menu ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
  padding: 10px 15px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.menu ul li a:hover {
  background-color: #4c92d8;
}

/* 🎛 Estilo para el filtro de motores */
.filtro-motor {
  padding: 12px 20px; /* Espaciado interno cómodo */
  border-radius: 50px; /* Bordes redondeados estilo "pill" */
  color: #333; /* Color de texto oscuro */
  font-size: 16px; /* Tamaño de texto legible */
  font-family: "Inter", sans-serif; /* Fuente moderna y clara */
  margin: 5px 70px 0 20px; /* Margen superior, derecho, inferior e izquierdo */
  width: 200px; /* Ancho fijo */
  background-color: transparent; /* Fondo transparente para mantener estética limpia */
  transition: all 0.3s ease-in-out; /* Transición suave al interactuar */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); /* Sombra sutil para profundidad */
}

/* 🔵 Estilo cuando el filtro está enfocado */
.filtro-motor:focus {
  outline: none; /* Elimina borde predeterminado del navegador */
  color: #2563eb; /* Color azul profesional al enfocar */
  box-shadow: 0 0 15px rgba(34, 97, 231, 0.2); /* Resalta el campo con sombra azul suave */
}

/* 🟦 Estilo cuando el ratón pasa sobre el filtro */
.filtro-motor:hover {
  color: #0648d8; /* Azul más brillante al pasar el mouse */
  box-shadow: 0 0 15px rgba(37, 99, 235, 0.3); /* Sombra más visible en hover */
}

/* 💬 Estilo del texto placeholder */
.filtro-motor::placeholder {
  color: #b0b0b0; /* Color gris claro para no competir con el texto */
  opacity: 1; /* Asegura visibilidad completa */
  font-style: italic; /* Estilo elegante y sutil */
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 10px;
}

.nav-links {
  display: none;
  gap: 20px;
}

.nav-links a {
  text-decoration: none;
  font-weight: bold;
  color: #121212;
}

/* 📱 Barra de redes sociales flotante */
.social-bar {
  position: fixed; /* Siempre visible mientras se hace scroll */
  top: 50%; /* Centrada verticalmente */
  right: 30px; /* Alineada a la derecha con separación */
  transform: translateY(-50%); /* Corrección para centrar */
  display: flex;
  flex-direction: column; /* Los botones uno debajo del otro */
  gap: 18px; /* Espacio entre botones */
  z-index: 1000; /* Superposición por encima de otros elementos */
}

/* 🔘 Botones de redes sociales */
.social-btn {
  width: 50px; /* Tamaño moderado para los íconos */
  height: 50px;
  border-radius: 50%; /* Forma circular para los botones */
  background-color: #333; /* Fondo oscuro y serio */
  color: #181414; /* Íconos blancos y visibles */
  font-size: 24px; /* Tamaño adecuado para íconos */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none; /* Eliminar subrayado si es enlace */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra sutil para destacar */
  opacity: 0.95; /* Levelemente transparente para un efecto más suave */
  transition: transform 0.2s ease, background-color 0.3s ease,
    box-shadow 0.3s ease; /* Transiciones refinadas */
}

/* 🎯 Estilo individual para cada red social */
.social-btn.wsp {
  background-color: #25d366; /* WhatsApp */
}

.social-btn.fb {
  background-color: #1877f2; /* Facebook */
}

.social-btn.ig {
  background-color: #e1306c; /* Instagram */
}

/* 🗨️ Tooltip personalizado que aparece al hacer hover */
.social-btn::after {
  content: attr(title); /* Toma el contenido del atributo title */
  position: absolute;
  top: -35px;
  right: 50%;
  transform: translateX(50%);
  background-color: #333;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease; /* Transición suave para el tooltip */
}

/* ✨ Efecto de hover: sutil cambio de tamaño y sombra */
.social-btn:hover {
  transform: scale(1.08); /* Ligera ampliación para indicar interactividad */
  background-color: #444; /* Fondo ligeramente más claro para interacción */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); /* Sombra más suave para resaltar el botón */
}

/* 👆 Efecto de clic (pulsación) */
.social-btn:active {
  transform: scale(0.98); /* Ligera reducción al hacer clic */
  background-color: rgba(0, 0, 0, 0.2); /* Fondo más oscuro al hacer clic */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); /* Sombra más suave durante el clic */
}

/* 🗨️ Mostrar tooltip al pasar el mouse */
.social-btn:hover::after {
  opacity: 1; /* Mostrar el tooltip con animación */
}

/* ================================
   BANNER Y VIDEO DE FONDO
================================ */

/* Canvas para partículas (si se usa una librería JS como tsParticles) */
#particles-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -5;
}

/* Luz suave que sigue al cursor */
.banner::before {
  content: "";
  position: absolute;
  top: var(--mouse-y, 50%);
  left: var(--mouse-x, 50%);
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    rgba(0, 132, 255, 0.3) 0%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  transition: top 0.1s ease, left 0.1s ease;
}

/* Resplandor pulsante en el overlay */
.banner-overlay::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(0, 132, 255, 0.1),
    transparent 70%
  );
  animation: pulseGlow 5s ease-in-out infinite;
  z-index: -1;
}

@keyframes pulseGlow {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

/* Imagen del banner */
.banner img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  margin-bottom: 20px;
  border-bottom: 4px solid #2563eb;
}

/* Contenedor del banner */
.banner {
  position: relative;
  height: 45vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 5%;
}

/* Video de fondo */
.video-fondo {
  position: absolute;
  width: 120%;
  height: 120%;
  top: -10%;
  left: -10%;
  object-fit: cover;
  z-index: -3;
  filter: brightness(0.4) blur(1px);
  clip-path: ellipse(150% 100% at 50% 50%);
  animation: zoomIn 20s ease-in-out infinite alternate;
}

/* Animación de zoom para video de fondo */
@keyframes zoomIn {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

/* Overlay oscuro con gradiente */
.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(27, 29, 49, 0.6) 0%,
    rgba(0, 0, 0, 0.9) 100%
  );
  z-index: -2;
}

/* Contenido centrado del banner */
.banner-contenido {
  text-align: center;
  color: white;
  z-index: 2;
  animation: fadeInUp 1s ease-out forwards;
  opacity: 0;
  transform: translateY(30px);
  max-width: 900px;
}

/* Título animado */
.titulo-animado {
  font-size: 3.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: "Poppins", sans-serif;
  margin-bottom: 1rem;
  background: linear-gradient(90deg, #fff, #c9d6ff, #ffffff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s linear infinite;
}

/* Animación de brillo para texto */
@keyframes shine {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

/* Subtítulo animado */
.subtitulo-animado {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeIn 1.5s ease-out 1s forwards;
}

/* Botón del banner */
.btn-banner {
  position: relative;
  background: #0f2a64;
  padding: 15px 38px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 50px;
  color: white;
  text-decoration: none;
  border: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  animation: fadeInUp 1.2s ease-out 2s forwards;
  opacity: 0;
  overflow: hidden;
}

/* Efecto de brillo en botón */
.btn-banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 150%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: skewX(-20deg);
  animation: move-glow 2.5s infinite linear;
}

@keyframes move-glow {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}

.btn-banner:hover {
  background-color: #0147a8;
  transform: translateY(-3px);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5);
}

/* Fade ins genéricos */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* ==============================
   CATÁLOGO GENERAL
   ============================== */

/* Estilo para el contenedor del catálogo general */
.catalogo-general {
  padding: 40px 20px; /* Espaciado alrededor */
  text-align: center; /* Centrado del texto */
  background-color: #f0f2f5; /* Color de fondo claro */
}

/* Estilo para el título del catálogo */
.catalogo-general h2 {
  font-size: 3em; /* Tamaño grande */
  margin-bottom: 50px; /* Espaciado inferior */
  color: #111; /* Color del texto */
  font-weight: 700; /* Negrita */
  text-align: center; /* Centrado del texto */
  text-transform: uppercase; /* Mayúsculas */
  letter-spacing: 2px; /* Espaciado entre letras */
  font-family: "Segoe UI", "Roboto Condensed", sans-serif; /* Fuente */
  position: relative; /* Posición relativa para el pseudoelemento */
  padding-bottom: 20px; /* Espaciado inferior */
  transition: color 0.3s ease; /* Transición suave para el cambio de color */
}

/* Estilo para el pseudoelemento después del título (línea animada) */
.catalogo-general h2::after {
  content: ""; /* No hay contenido, solo se usa para el estilo */
  position: absolute; /* Posicionamiento absoluto */
  bottom: 0; /* Alineación al fondo */
  left: 50%; /* Centrado horizontal */
  transform: translateX(-50%); /* Centrado exacto */
  width: 0; /* Inicialmente, la línea está oculta */
  height: 4px; /* Altura de la línea */
  background: linear-gradient(
    90deg,
    #0a0a0a,
    #007acc,
    #0a0a0a
  ); /* Gradiente de la línea */
  border-radius: 2px; /* Bordes redondeados */
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Animación suave para el crecimiento */
}

/* Estilo al hacer hover sobre el título */
.catalogo-general h2:hover::after {
  width: 250px; /* Expande la línea */
}

/* Cambiar el color del título al hacer hover */
.catalogo-general h2:hover {
  color: #007acc; /* Cambia el color del texto */
}

/* ==============================
   CATÁLOGO GRID
   ============================== */

/* Estilo para el contenedor del grid de productos */
.catalogo-grid {
  display: grid; /* Usamos grid para organizar los productos */
  grid-template-columns: repeat(
    auto-fill,
    minmax(280px, 1fr)
  ); /* Define un grid flexible */
  gap: 25px; /* Espaciado entre los elementos del grid */
  max-width: 1300px; /* Ancho máximo */
  margin: 0 auto; /* Centrado del grid */
  padding: 0 20px; /* Espaciado alrededor */
}

/* ==============================
   CARD DE REPUESTO
   ============================== */

/* Estilo para las tarjetas de los repuestos */
.card-repuesto {
  background-color: #fff; /* Fondo blanco */
  border-radius: 15px; /* Bordes redondeados */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); /* Sombra suave */
  padding: 20px; /* Espaciado interno */
  transition: transform 0.3s, box-shadow 0.3s; /* Transiciones suaves */
  display: flex; /* Usamos flex para la disposición interna */
  flex-direction: column; /* Dirección vertical */
  align-items: center; /* Centrado de los elementos */
  text-align: center; /* Centrado del texto */
}

/* Efecto hover para las tarjetas */
.card-repuesto:hover {
  transform: translateY(-8px); /* Eleva la tarjeta al hacer hover */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1); /* Sombra más pronunciada */
}

/* Estilo para las imágenes dentro de las tarjetas */
.card-repuesto img {
  width: 100%; /* Ancho completo */
  height: 180px; /* Altura fija */
  object-fit: contain; /* Ajuste de imagen */
  margin-bottom: 20px; /* Espaciado inferior */
  background: #f9fafb; /* Fondo gris claro */
  border-radius: 10px; /* Bordes redondeados */
}

/* Estilo para el título dentro de las tarjetas */
.card-repuesto h3 {
  font-size: 1.2em; /* Tamaño de fuente */
  color: #2563eb; /* Color azul */
  margin-bottom: 10px; /* Espaciado inferior */
}

/* Estilo para la descripción dentro de las tarjetas */
.card-repuesto p {
  font-size: 14px; /* Tamaño de fuente más pequeño */
  color: #555; /* Color gris oscuro */
  margin-bottom: 10px; /* Espaciado inferior */
}

/* Estilo para el enlace dentro de las tarjetas */
.card-repuesto a {
  margin-top: auto; /* Empuja el enlace al final de la tarjeta */
  padding: 10px 25px; /* Espaciado dentro del botón */
  background-color: #2563eb; /* Color de fondo azul */
  color: white; /* Color del texto blanco */
  border-radius: 30px; /* Bordes redondeados */
  text-decoration: none; /* Sin subrayado */
  transition: background 0.3s; /* Transición suave para el fondo */
}

/* Efecto hover para el enlace */
.card-repuesto a:hover {
  background-color: #1d4ed8; /* Cambia el fondo al hacer hover */
}

/* ================================
   RESPONSIVE
================================ */

@media (max-width: 768px) {
  .header-medio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex: 1;
  }

  .logo {
    max-width: 100px;
    margin-left: 2px;
  }

  .logo img {
    height: 60px;
    border-radius: 6px;
  }

  /* Nuevo contenedor para buscador y menú hamburguesa */
  .buscador {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 15px;
  }

  .buscador {
    display: flex;
    background-color: #fff;
    border-radius: 8px;
    margin: 0;
  }

  .buscador input {
    flex: 1;
    padding: 5px 10px;
    font-size: 13px;
    border: none;
    outline: none;
    width: 170px;
  }

  .btn-buscar,
  .icono-login,
  .filtro-motor {
    display: none;
  }

  .menu-toggle {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
  }

  .banner {
    height: 50vh;
  }

  .titulo-animado {
    font-size: 2.5rem;
  }

  .subtitulo-animado {
    font-size: 1.1rem;
  }

  .btn-banner {
    font-size: 1rem;
    padding: 12px 28px;
  }

  .catalogo-general h2 {
    font-size: 1.5em;
  }

  .card-repuesto img {
    width: 100%;
    height: auto;
  }

  .hamburger {
    display: block; /* Mostrar el ícono de hamburguesa en pantallas pequeñas */
  }

  .menu {
    display: none; /* El menú estará oculto inicialmente */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #f1f1f1; /* Fondo oscuro para el menú */
    padding: 20px;
    z-index: 555;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Sombra suave para el menú */
  }

  .menu.active {
    display: block; /* Mostrar el menú cuando se activa */
  }

  .menu ul {
    flex-direction: column;
    width: 100%;
    padding: 0;
  }

  .menu ul li {
    margin: 10px 0;
  }

  .menu ul li a {
    text-align: center;
    width: 100%;
    font-size: 18px;
  }

  /* Estilo del filtro en el menú */
  #filtro-motor-menu {
    width: 100%;
    padding: 12px 20px;
    margin-top: 24px;
    font-size: 16px;
    font-weight: 500;
    color: #1f2937; /* Gris oscuro profesional */
    background-color: #f9fafb; /* Fondo claro */
    border: 2px solid #e5e7eb; /* Borde gris claro */
    border-radius: 12px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    appearance: none;
    transition: all 0.25s ease;
    background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%236B7280' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.2rem;
    margin-left: 10px;
  }

  #filtro-motor-menu:hover {
    background-color: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  }

  #filtro-motor-menu:focus {
    outline: none;
    border-color: #3b82f6; /* Azul dinámico */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
    background-color: #ffffff;
  }

  /* Estilo del botón de login */
  .icono-login {
    background: rgba(76, 139, 245, 0.9);
    backdrop-filter: blur(6px); /* efecto glassmorphism */
    border: none;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease,
      background 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    margin-left: 10px;
    text-decoration: none;
    margin-right: 30px;
  }

  .icono-login:hover {
    transform: translateY(-3px);
    background: rgba(60, 111, 224, 1);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
  }

  /* Estilo del botón "Salir" */
  .boton-salir {
    margin-top: 10px;
    display: block;
    text-align: center;
    background-color: rgba(76, 139, 245, 0.9);
    padding: 10px 20px;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
    margin-left: 10px;
  }
}