/* 1 */
        .custom-container {
            background: #F2F2F2; /* White background for the container */
            padding: 10px 20px; /* Padding for spacing */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Enhanced shadow for depth */
            max-width: 100%; /* Max width */
            display: flex; /* Flex container for responsive layout */
            justify-content: space-between; /* Space between columns */
            align-items: center; /* Center items vertically */
        }

        /* Row Styles */
        .custom-row {
            display: flex;
            width: 100%; /* Full width */
            justify-content: space-between; /* Distribute space between columns */
            align-items: center; /* Center items vertically */
        }

        /* Column Styles */
        .custom-col-left,
        .custom-col-right {
            display: flex;
            align-items: center; /* Center items vertically */
        }

        /* Info Item Styles */
        .custom-info-item {
            display: flex;
            align-items: center;
            margin-right: 20px; /* Space between items */
            font-size: 16px; /* Font size for better readability */
            color: #333333; /* Dark gray color for text */
            line-height: 1.5; /* Improved line spacing */
        }

        .custom-info-item:last-child {
            margin-right: 0; /* Remove margin for the last item */
        }

        .custom-info-item small {
            margin-right: 8px; /* Space between icon and text */
        }

        /* Icon Styles */
        .custom-icon {
            font-size: 22px; /* Icon size */
            color: #1ea106; /* Primary color */
        }

        /* Specific Icons */
        .location-icon::before {
            content: "\f3c5"; /* Font Awesome map marker */
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
        }

        .clock-icon::before {
            content: "\f017"; /* Font Awesome clock */
            font-family: "Font Awesome 5 Free";
            font-weight: 400;
        }

        .phone-icon::before {
            content: "\f095"; /* Font Awesome phone */
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
        }

        /* Social Icons Styles */
        .custom-social-icons {
            display: flex;
            align-items: center;
        }

        .custom-social-icon {
            background: #ffffff; /* White background for icons */
            color: #1ea106; /* Primary color for icons */
            border-radius: 50%; /* Circular icons */
            width: 40px; /* Icon width */
            height: 40px; /* Icon height */
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-size: 18px; /* Icon font size */
            margin-left: 12px; /* Space between social icons */
            transition: background 0.3s, color 0.3s, transform 0.3s; /* Smooth transitions */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
        }

        .custom-social-icon:hover {
            background: #1ea106; /* Primary color on hover */
            color: #ffffff; /* White text on hover */
            transform: scale(1.2); /* Slightly enlarge icon on hover */
        }
        /* Media query para dispositivos móviles */
@media (max-width: 768px) {
    .custom-container {
        display: none; /* Oculta el contenedor en pantallas pequeñas */
    }
}



 /* 2 */
@keyframes smoothSlideInFromLeft {
    0% {
        transform: translateX(-100%) scale(1.05); /* Comienza fuera de vista a la izquierda con una ligera escala aumentada */
        opacity: 0; /* Inicialmente invisible */
    }
    100% {
        transform: translateX(0) scale(1); /* Posición final y escala normal */
        opacity: 1; /* Totalmente visible */
    }
}

/* Estilo general de la navbar */
.custom-navbar {
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0 20px;
    height: 80px; /* Ajusta la altura de la barra de navegación */
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: smoothSlideInFromLeft 0.6s ease-out; /* Aplica la animación suavizada */
}

/* Estilo adicional para el contenido del menú (opcional) */
.custom-navbar .menu-items {
    display: flex;
    align-items: center;
    height: 100%;
}

.custom-navbar .menu-items a {
    padding: 0 15px; /* Ajusta el espacio entre los elementos del menú */
    line-height: 80px; /* Alinea verticalmente el texto en el centro de la altura de la barra */
    text-decoration: none;
    color: #333;
    font-size: 16px;
}



/* Brand styling */
.custom-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.custom-title {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 1.5rem;
    color: #007bff;
}

.custom-title-text {
    margin-left: 10px;
}

.icon-container img {
    width: 40px; /* Ajusta el tamaño según sea necesario */
}

/* Toggler button */
.custom-toggler {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    display: none; /* Ocultar el botón en pantallas grandes */
}

.custom-toggler-icon {
    display: inline-block;
    width: 30px;
    height: 3px;
    background: #333;
    position: relative;
    transition: all 0.3s;
}

.custom-toggler-icon::before,
.custom-toggler-icon::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 3px;
    background: #333;
    transition: all 0.3s;
}

.custom-toggler-icon::before {
    top: -8px;
}

.custom-toggler-icon::after {
    top: 8px;
}

/* Navbar collapse styling */
.custom-navbar-collapse {
    display: flex;
    align-items: center;
}

.custom-nav {
    display: flex;
    align-items: center;
    margin-right: auto;
}

.custom-nav-item {
    margin: 0 15px;
}

.custom-nav-link {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    padding: 10px 15px;
    transition: color 0.3s, background-color 0.3s;
}

.custom-nav-link.active,
.custom-nav-link:hover {
    color: #1ea106;
background-color: rgb(76 189 19 / 10%);
    border-radius: 4px;
}

/* Dropdown menu */
.custom-dropdown {
    position: relative;
}

.custom-dropdown-toggle::after {
    content: "▼";
    margin-left: 5px;
    font-size: 0.8rem;
}

.custom-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 10px 0;
    border-radius: 4px;
}

.custom-dropdown:hover .custom-dropdown-menu {
    display: block;
}

.custom-dropdown-item {
    text-decoration: none;
    color: #333;
    padding: 10px 20px;
    display: block;
    transition: background-color 0.3s;
}

.custom-dropdown-item:hover {
    background-color: #1ea106;
}

/* Button styling */
.custom-btn {
    background-color: #1ea106;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.custom-btn:hover {
    background-color: #0056b3;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.custom-btn i {
    margin-left: 8px;
}

/* Responsive styling */
@media (max-width: 991px) {
    .custom-navbar-collapse {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 60px; /* Ajusta según la altura del navbar */
        left: 0;
        background: #f8f9fa;
        border-top: 1px solid #ddd;
        border-radius: 4px;
        overflow: hidden;
        z-index: 1000;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        animation: slideDown 0.3s ease-out;
    }

    .custom-toggler {
        display: block;
    }

    .custom-navbar-collapse.show {
        display: flex;
    }

    .custom-nav {
        flex-direction: column;
        width: 100%;
    }

    .custom-nav-item {
        margin: 0;
    }

    .custom-nav-link {
        padding: 15px;
        text-align: center;
        border-bottom: 1px solid #ddd;
    }

    .custom-nav-link:last-child {
        border-bottom: none;
    }

    .custom-btn {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }
}

/* Animation for mobile menu */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* 3 */

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.logo h1 {
    font-size: 28px;
    font-weight: bold;
    color: #e62d2d;
    letter-spacing: 2px;
    animation: textFadeIn 1.5s ease-in-out;
}

@keyframes textFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Navbar */
.navbar ul {
    list-style: none;
    display: flex;
    justify-content: flex-end;
}

.navbar ul li {
    margin: 0 15px;
}

.navbar ul li a {
    text-decoration: none;
    color: #333;
    font-size: 16px;
    transition: color 0.3s, transform 0.3s;
}

.navbar ul li a:hover {
    color: #e62d2d;
    transform: scale(1.1);
}

.menu-toggle {
    display: none;
    font-size: 30px;
    background: none;
    border: none;
    cursor: pointer;
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
        position: absolute;
        top: 15px;
        right: 15px;
    }

    .navbar ul {
        display: none;
        flex-direction: column;
        background-color: #fff;
        position: absolute;
        top: 60px;
        right: 0;
        width: 100%;
        padding: 20px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }

    .navbar.active ul {
        display: flex;
    }

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

    .navbar ul li a {
        font-size: 18px;
    }
}

/* Cart */
.cart {
    position: relative;
    animation: fadeInCart 1.5s ease forwards;
    opacity: 0;
}

@keyframes fadeInCart {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.cart img {
    width: 24px;
    height: 24px;
}

.cart span {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #1ea106;
    color: white;
    padding: 2px 5px;
    border-radius: 50%;
    font-size: 12px;
}

/* Carousel */
.carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 600px;
    background-color: #f5f5f5;
    animation: fadeInCarousel 2s ease;
}

@keyframes fadeInCarousel {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.slides {
    position: relative;
    height: 100%;
}

.slide {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px;
    opacity: 0;
    transition: all 1.2s ease-in-out;
}

.active {
    left: 0;
    opacity: 1;
    z-index: 1;
}

.car-info {
    max-width: 500px;
    animation: fadeInText 1.5s ease-in-out;
}

@keyframes fadeInText {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.car-info h1 {
    font-size: 48px;
    font-weight: bold;
    color: #000;
    position: relative;
}

.car-info h1 span {
    color: #1ea106;
    animation: highlightText 1s infinite alternate;
}

@keyframes highlightText {
    from {
        color: #1ea106;
    }
    to {
        color: #126d02;
    }
}

.order-btn {
    background-color: #1ea106;
    color: white;
    padding: 15px 30px;
    font-size: 18px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.order-btn:hover {
    background-color: darkred;
    transform: scale(1.05);
}

/* Carousel Controls */
.carousel-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 2;
}

.prev, .next {
    cursor: pointer;
    background-color: rgb(185 185 185 / 0%); /* Blanco más opaco */
    padding: 15px;
    color: black; /* Color del ícono de las flechas */
    font-size: 30px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra para dar más contraste */
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.prev:hover, .next:hover {
    background-color: rgba(0, 128, 0, 0.9); /* Verde */
    color: white; /* Cambiar color del ícono al hacer hover */
    transform: scale(1.2); /* Más grande en hover */
    box-shadow: 0 6px 12px rgba(0, 128, 0, 0.5); /* Sombra verde más pronunciada */
}



@keyframes fadeInFooter {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.spec {
    text-align: center;
}

.spec img {
    width: 40px;
    margin-bottom: 10px;
}

.spec p {
    font-size: 16px;
    font-weight: bold;
}

/* Media Queries */
@media (max-width: 768px) {
    .header {
        padding: 15px;
        flex-direction: column;
        text-align: center;
    }

    .navbar ul {
        flex-direction: column;
    }

    .carousel {
        height: 400px;
    }

    .car-image img {
        width: 200px;
        height: 200px;
    }

    .order-btn {
        font-size: 16px;
        padding: 10px 20px;
    }

    .footer {
        flex-direction: column;
    }

    .spec {
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .header {
        padding: 18px;
    }

    .logo h1 {
        font-size: 22px;
    }

    .navbar ul {
        font-size: 14px;
    }

    .carousel {
        height: 300px;
    }

    .car-info h1 {
        font-size: 32px;
    }

    .car-info p {
        font-size: 14px;
    }

    .footer {
        font-size: 14px;
    }
}
.slides {
    background-image: url('img/fondo.avif');
    background-repeat: no-repeat;
    background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
    background-position: center; /* Centra la imagen dentro del contenedor */
    width: 100%; /* Ajusta el ancho según sea necesario */
    height:  100vh; /* Puedes ajustar la altura según el diseño */
}


/* 4 */
/* General Styles */
/* Estilo para los canvases */
#particleCanvas,
#particleCanvas1,
#particleCanvas2 {
    width: 20%; /* Ajusta el ancho según tus necesidades */
    height: auto; /* Ajusta la altura automáticamente para mantener la relación de aspecto */
}
/* Animación personalizada para entrada desde abajo con desvanecimiento */
@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(100px) scale(0.9);
    }
    50% {
        opacity: 0.7;
        transform: translateY(-10px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Clase de animación */
.animate__slideUpFade {
    animation: slideUpFade 1s ease-out forwards;
}

/* Estilo básico para los elementos de servicio */
.service-item {
    opacity: 0; /* Ocultar inicialmente */
    transform: translateY(100px) scale(0.9); /* Ajuste inicial para el efecto de entrada */
}


/* Opcional: Agrega otros estilos necesarios para la presentación */

p{
     font-family: 'Poppins', sans-serif;
     
}

.services-container {
    padding: 5rem 0;
    background: #ffffff; /* Fondo blanco para el contenedor de servicios */
    position: relative;
    overflow: hidden;
}

.services-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.service-item {
    flex: 1 1 calc(33.333% - 2rem);
    min-width: 280px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    background: #ffffff; /* Fondo blanco para las tarjetas */
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    transition: transform 0.5s ease;
}

.service-item:hover .service-card {
    transform: scale(1.05);
}

.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 161, 6, 0.2); /* Overlay verde suave */
    z-index: 0;
    transition: opacity 0.5s ease;
    opacity: 0;
}

.service-item:hover .service-overlay {
    opacity: 1;
}

/* Individual Service Styles */
.service-card.quality {
    background: linear-gradient(135deg, #ffffff, #ffffff); /* Fondo blanco para consistencia */
}

.service-card.experts {
    background: linear-gradient(135deg, #ffffff, #ffffff); /* Fondo blanco para consistencia */
}

.service-card.modern {
    background: linear-gradient(135deg, #ffffff, #ffffff); /* Fondo blanco para consistencia */
}

.service-icon {
    font-size: 2.5rem;
    color: #1ea106; /* Verde para los iconos */
    margin-bottom: 1rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.service-card.quality .service-icon,
.service-card.experts .service-icon,
.service-card.modern .service-icon {
    color: #1ea106; /* Verde para todos los iconos */
}

.service-card:hover .service-icon {
    transform: rotate(15deg);
}

.service-content {
    z-index: 1;
    position: relative;
    text-align: center;
    color: #333;
}

.service-title {
    font-size: 1.6rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: #1ea106; /* Verde para el título */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.service-content p {
    color: #666;
    margin-bottom: 1.5rem;
}

.service-link {
    color: #1ea106; /* Verde para los enlaces */
    text-decoration: none;
    font-weight: 600;
    position: relative;
    padding-bottom: 2px;
}

.service-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #1ea106; /* Verde para la línea debajo del enlace */
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.service-link:hover::after {
    transform: scaleX(1);
}

/* 5 */


/* Define the keyframes for the animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Apply the animation to specific elements */
.imagen-principal {
    animation: fadeInUp 0.5s ease-out 0.5s;
}

.titulo-destacado, .descripcion, .caracteristicas {
    animation: fadeInUp 0.5s ease-out 1s;
}

/* Optional: Add a slight delay to individual features for staggered effect */
.item-caracteristica {
    animation: fadeInUp 0.5s ease-out 1.5s;
}

.seccion-sobre-nosotros {
  padding: 60px 0;
  background: #ffffff;
  color: #333333;
}

.contenedor {
  max-width: 1200px;
  margin: auto;
  padding: 0 15px;
}

.fila {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.columna-imagen,
.columna-texto {
  flex: 1;
  min-width: 300px;
  position: relative;
}

.imagen-fondo {
  position: relative;
  overflow: hidden;
  height: 110%;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.imagen-principal {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease;
}

.imagen-fondo:hover .imagen-principal {
  transform: scale(1.05);
  filter: brightness(1.1);
}
.capa-informacion {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%; /* Mayor altura para mejorar la visibilidad del texto */
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(30, 161, 6, 0.6)); /* Fondo degradado ajustado para mayor contraste */
  padding: 20px;
  color: #ffffff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0; /* Inicialmente invisible para animación */
  transform: translateY(30px) scale(0.95); /* Desplazamiento inicial y efecto de escala */
  animation: fadeInUpScale 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards; /* Aplicación de animación moderna */
  backdrop-filter: blur(10px); /* Efecto de desenfoque de fondo ajustado */
  border-radius: 0 0 20px 20px; /* Bordes redondeados en la parte inferior */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Sombra más intensa para un efecto de profundidad */
}

.capa-informacion h1 {
  margin: 0;
  font-size: 42px; /* Tamaño de fuente más grande para el texto principal */
  font-weight: 700; /* Negrita más pronunciada */
  line-height: 1.2; /* Mayor espacio entre líneas */
  animation: slideIn 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Sombra de texto para mayor contraste */
}

.capa-informacion .subtitulo {
  font-size: 24px; /* Tamaño de fuente del subtítulo aumentado */
  display: inline-block;
  margin-left: 8px;
  font-weight: 400; /* Peso de fuente ajustado para el subtítulo */
  opacity: 0; /* Oculto para animación */
  animation: fadeIn 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards 0.6s; /* Animación de entrada con retraso */
}

.capa-informacion h4 {
  margin: 0;
  font-size: 18px; /* Tamaño de fuente del texto secundario ajustado */
  font-weight: 300; /* Peso de fuente más ligero para el texto secundario */
  margin-top: 10px;
  opacity: 0; /* Oculto para animación */
  animation: fadeIn 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards 0.8s; /* Animación de entrada con retraso */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Sombra de texto ligera para mejorar la legibilidad */
}

/* Animaciones definidas */

@keyframes fadeInUpScale {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideIn {
  0% {
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.etiqueta {
  color: #1ea106;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.titulo-destacado {
  font-size: 28px;
  margin-bottom: 20px;
  color: #1ea106;
  line-height: 1.5;
}

.texto-destacado {
  color: #1ea106;
}

.descripcion {
  font-size: 16px;
  margin-bottom: 30px;
  color: #666666;
}

.caracteristicas {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 40px;
}

.item-caracteristica {
  display: flex;
  align-items: center;
  background: rgba(30, 161, 6, 0.1);
  padding: 15px;
  border-radius: 10px;
  transition: background 0.3s ease, transform 0.3s ease;
}

.item-caracteristica:hover {
  background: rgba(30, 161, 6, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.icono {
  background-color: #1ea106;
  color: #ffffff;
  font-weight: bold;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.detalle h6 {
  margin: 0;
  font-size: 18px;
  color: #333333;
}

.boton-mas-info {
  display: inline-block;
  padding: 12px 30px;
  background-color: #1ea106;
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.boton-mas-info:hover {
  background-color: #138a04;
  transform: scale(1.08);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
/* Define la animación de desvanecimiento y deslizamiento */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Aplica la animación a los elementos cuando se activa la clase 'animate' */
.animate {
    opacity: 0; /* Inicialmente invisible */
    transform: translateY(30px); /* Inicialmente desplazado hacia abajo */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate.visible {
    opacity: 1;
    transform: translateY(0);
    animation: fadeInUp 0.8s ease-out forwards;
}

/* 6 */
/* Animaciones con JS */
/* Efectos de entrada suave con rebote */
/* Para pantallas más grandes (por defecto) */
[data-aos] {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease-in-out, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

[data-aos].fade-up {
  opacity: 1;
  transform: translateY(0);
  animation: bounceInUp 0.8s ease-in-out;
}

[data-aos="fade-right"] {
  transform: translateX(50px);
  animation: slideInRight 0.8s ease-in-out;
}

[data-aos].fade-right {
  opacity: 1;
  transform: translateX(0);
}

[data-aos="fade-left"] {
  transform: translateX(-50px);
  animation: slideInLeft 0.8s ease-in-out;
}

[data-aos].fade-left {
  opacity: 1;
  transform: translateX(0);
}

[data-aos="zoom-in"] {
  transform: scale(0.8);
  animation: zoomIn 0.8s ease-out;
}

[data-aos].zoom-in {
  opacity: 1;
  transform: scale(1);
}

/* Rebote en las estadísticas */
.estadistica:hover {
  transform: scale(1.1) translateY(-5px);
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1.2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
  [data-aos] {
    transform: translateY(20px); /* Reduce el desplazamiento */
  }

  [data-aos="fade-right"] {
    transform: translateX(20px); /* Menos desplazamiento horizontal */
  }

  [data-aos="fade-left"] {
    transform: translateX(-20px); /* Menos desplazamiento horizontal */
  }

  [data-aos="zoom-in"] {
    transform: scale(0.9); /* Suaviza el zoom */
  }

  .estadistica:hover {
    transform: scale(1.05) translateY(-3px); /* Reduce el rebote */
  }
}

/* Variación en el rebote */
@keyframes bounceInUp {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  60% {
    transform: translateY(-10px);
    opacity: 1;
  }
  80% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Efecto de deslizamiento */
@keyframes slideInRight {
  0% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Zoom suave */
@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}


/* Testimonios - efecto rotación */
.testimonio {
  opacity: 0;
  transform: rotateY(20deg) translateZ(-100px);
  transition: opacity 0.8s ease-in-out, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.testimonio.appear {
  opacity: 1;
  transform: rotateY(0deg) translateZ(0);
}

    /* Sección de Estadísticas */
.seccion-estadisticas {
  padding: 80px 0;
  background: #f4f4f4;
  color: #333;
}

.titulo-seccion {
  text-align: center;
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 40px;
  color: #1ea106;
}

.estadisticas-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
}

.estadistica {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: calc(25% - 40px);
  padding: 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.estadistica:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.icono-estadistica {
  font-size: 48px;
  color: #1ea106;
  margin-bottom: 15px;
}

.numero-estadistica {
  font-size: 36px;
  font-weight: 700;
  margin: 10px 0;
  color: #333;
}

.descripcion-estadistica {
  font-size: 18px;
  color: #666;
}

/* Sección de Testimonios */
.seccion-testimonios {
  padding: 80px 0;
  background: #ffffff;
  color: #333;
}

.testimonios-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
}

.testimonio {
  background: #f4f4f4;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: calc(50% - 40px);
  padding: 30px;
}

.texto-testimonio {
  font-size: 18px;
  color: #666;
  margin-bottom: 20px;
  font-style: italic;
}

.nombre-cliente {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.empresa-cliente {
  font-size: 16px;
  color: #999;
}

@media (max-width: 768px) {
  .estadistica, .testimonio {
    width: 100%;
  }
}

/* 7 */
.seccion-donde-estamos {
    padding: 50px 15px;
    background-color: #f9f9f9;
}

.seccion-donde-estamos .contenedor {
    max-width: 1200px;
    margin: 0 auto;
}

.fila {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.columna-mapa, .columna-detalles {
    flex: 1;
    min-width: 300px; /* Ensures that columns stack on small screens */
}

.mapa {
    height: 400px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.columna-detalles {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.etiqueta {
    font-size: 16px;
    color: #007bff;
    margin-bottom: 10px;
}

.titulo-destacado {
    font-size: 32px;
    margin-bottom: 20px;
}

.descripcion {
    font-size: 18px;
    margin-bottom: 20px;
}

.direccion p {
    font-size: 16px;
    margin: 5px 0;
}

.boton-mas-info {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.3s, transform 0.3s;
}

.boton-mas-info:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

/* Responsive styles */
@media (max-width: 768px) {
    .fila {
        flex-direction: column;
    }

    .mapa {
        height: 300px;
    }

    .titulo-destacado {
        font-size: 28px;
    }

    .descripcion {
        font-size: 16px;
    }

    .direccion p {
        font-size: 14px;
    }

    .boton-mas-info {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .titulo-destacado {
        font-size: 24px;
    }

    .descripcion {
        font-size: 14px;
    }

    .direccion p {
        font-size: 12px;
    }

    .boton-mas-info {
        font-size: 12px;
        padding: 8px 16px;
    }
}

/*8  */
.seccion-servicios {
  padding: 60px 0;
  background: linear-gradient(180deg, #f8f9fa, #e9ecef);
  color: #333;
}

.titulo-seccion {
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 40px;
  color: #1ea106; /* Color verde destacado */
}

.servicios-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.servicio {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  padding: 20px;
  width: calc(50% - 30px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.servicio:hover {
  transform: translateY(-10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.icono-servicio {
  font-size: 40px;
  color: #1ea106;
  margin-bottom: 15px;
}

.icono-servicio i {
  transition: color 0.3s ease;
}

.servicio:hover .icono-servicio i {
  color: #138a04; /* Color verde más oscuro al pasar el cursor */
}

.servicio h3 {
  font-size: 24px;
  margin: 10px 0;
  color: #333;
}

.servicio p {
  font-size: 16px;
  color: #666;
}

@media (max-width: 768px) {
  .servicio {
    width: 100%;
  }
}


/* 9 */
  .seccion-proceso {
  padding: 60px 0;
  background: #f8f9fa;
  color: #333;
}

.titulo-seccion {
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 40px;
  color: #1ea106;
}

.proceso-pasos {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.paso {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: calc(25% - 30px);
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.icono-paso {
  font-size: 48px;
  color: #1ea106;
  background: #e9ecef;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  line-height: 80px;
  margin: 0 auto 15px;
}

.paso h3 {
  font-size: 24px;
  color: #333;
  margin: 10px 0;
}

.paso p {
  font-size: 16px;
  color: #666;
}

@media (max-width: 768px) {
  .paso {
    width: 100%;
  }
}

/* 9 */
 /* Estilos básicos para el pie de página */
.footer {
  background-color: #1b1b1b;
  color: #fff;
  padding: 60px 15px; /* Ajuste para que el contenido no se salga */
  text-align: left;
  box-sizing: border-box;
}

.footer-contenido {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1200px; /* Limitar el ancho máximo del contenido */
  margin: 0 auto; /* Centrar el contenido */
}

.footer-columna {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  box-sizing: border-box; /* Para que el padding no aumente el ancho */
}

.footer-titulo {
  font-size: 24px;
  margin-bottom: 20px;
  color: #1ea106;
}

.footer-contacto, .footer-enlaces {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contacto li, .footer-enlaces li {
  margin-bottom: 10px;
  font-size: 16px;
  color: #ddd;
  display: flex;
  align-items: center;
}

.footer-contacto i, .footer-enlaces i {
  margin-right: 10px;
  color: #1ea106;
}

.footer-redes {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.footer-icono {
  font-size: 24px;
  color: #fff;
  transition: color 0.3s ease;
}

.footer-icono:hover {
  color: #1ea106;
}

.footer-formulario {
  display: flex;
  gap: 10px;
  flex-wrap: wrap; /* Para que el formulario no se desborde en pantallas pequeñas */
}

.footer-input {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 5px;
  background-color: #333;
  color: #fff;
  font-size: 16px;
  box-sizing: border-box; /* Para evitar desbordes */
}

.footer-input::placeholder {
  color: #aaa;
}

.footer-boton {
  padding: 12px 20px;
  background-color: #1ea106;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.footer-boton:hover {
  background-color: #138a04;
}

.footer-copy {
  margin-top: 50px;
  padding-top: 20px;
  border-top: 1px solid #333;
  text-align: center;
  font-size: 14px;
  color: #aaa;
  max-width: 1200px; /* Asegura que el contenido no se salga */
  margin: 0 auto;
  padding: 0 15px; /* Añade un poco de padding para móviles */
  box-sizing: border-box;
}

.footer-copy a {
  color: #1ea106;
  text-decoration: none;
}

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

/* Responsividad */
@media (max-width: 1200px) {
  .footer-contenido {
    justify-content: space-around;
  }
}

@media (max-width: 768px) {
  .footer-contenido {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .footer-columna {
    max-width: 100%;
    text-align: center;
  }

  .footer-redes {
    justify-content: center;
  }

  .footer-formulario {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .footer-input {
    width: 100%;
  }

  .footer-boton {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .footer-titulo {
    font-size: 20px;
  }

  .footer-contacto li, .footer-enlaces li {
    font-size: 14px;
  }

  .footer-icono {
    font-size: 20px;
  }

  .footer-copy {
    font-size: 12px;
  }
}


/* 10 */
   /* Estilos para el botón flotante */
        .float {
            position: fixed;
            width: 60px;
            height: 60px;
            bottom: 30px;
            right: 30px;
            background: #1ea106; /* Gradiente verde oscuro */
            color: white;
            border-radius: 50%; /* Botón circular */
            text-align: center;
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); /* Sombra más intensa */
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            cursor: pointer;
            transition: all 0.3s ease; /* Transición general suave */
            animation: fadeInUp 1s ease-out; /* Animación de entrada */
        }

        .float:hover {
            background: linear-gradient(145deg, #1b3a2a, #2d6a4f); /* Gradiente invertido al pasar el cursor */
            transform: scale(1.05); /* Escala ligera al hacer hover */
            box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada en hover */
        }

        .my-float {
            width: 28px;
            height: 28px;
            transition: transform 0.3s ease;
        }

        .float:hover .my-float {
            transform: rotate(360deg); /* Rotación del ícono en hover */
        }

        /* Animación de entrada tipo desvanecimiento hacia arriba */
        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Responsivo para dispositivos pequeños */
        @media only screen and (max-width: 600px) {
            .float {
                width: 50px;
                height: 50px;
                bottom: 20px;
                right: 20px;
            }

            .my-float {
                width: 22px;
                height: 22px;
            }
        }