*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
  }

body {
    font-family: "Montserrat", sans-serif;
    box-sizing: border-box;
}

nav{
    height: 80px;
    width: 100%;
    top: 0;
    z-index: 1000; /* Asegura que esté por encima del contenido */
   
}
#containerscroll{ 
    width: 100%;
    animation: enhace-header linear both;
    animation-timeline: scroll(root);
    animation-range: 0 500px;
    position: fixed;
    z-index: 2;
    

}

#containerscroll p{
    color: whitesmoke;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 1.5px;
    font-weight: 200;
}

@keyframes enhace-header {
 
    to {
        background: black;
        border-bottom: black solid 1px;
    }
}

.enlace{
    position: absolute;
    padding: 20px 50px;
}

.logo{
    height: 40px;
}

nav ul{
    float: right;
    margin-right: 20px;
}

nav ul li{
    display: inline-block;
    line-height: 80px;
    margin: 0 5px;
}

nav ul li a{
    color: #fff;
    padding: 7px 13px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 1px;
    
}

nav ul li a:hover {
    border-bottom: rgb(10, 122, 34) 2px solid;
    transform: scale(1.1);
}

nav a{
    margin: 0;
}


nav a:hover {
    transform: scale(1.1);
}

.checkbtn{
    font-size: 30px;
    color: #fff;
    float: right;
    line-height: 80px;
    margin-right: 40px;
    cursor: pointer;
    display: none;
   
}

#check{
    display: none;
}


@media (max-width: 952px){
    .enlace{
        padding-left: 20px;
    }
    nav ul li a{
        font-size: 16px;
    }
}

@media (max-width: 858px){
    .checkbtn{
        display: block;
    }
    ul{
        position: fixed;
        width: 100%;
        height: 100vh;
        background: #000000;
        top: 140px;
        left: -100%;
        text-align: center;
        transition: all .5s;
    }

    nav ul li{
        display: block;
        margin: 50px 0;
        line-height: 30px;
    }
    nav ul li a{
        font-size: 20px;
    }
    li a:hover, li a.active{
        background: none;
        color: rgb(12, 87, 28);
       
    }
    #check:checked ~ ul{
        left:0;
    }
}

#fondo{
   
    height: 100vh;
    min-height: 100vh; /* Asegura que abarque todo el alto de la pantalla */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden; /* Evita que el video se salga de los bordes */
    background-size: cover; /* La imagen o video cubre todo el área */
    background-position: center; /* Centra el video o la imagen */
    background-repeat: no-repeat; /* Evita que se repita */
}

#fondo video{
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1; /* El video queda en el fondo */
    transform: translate(-50%, -50%);
    object-fit: cover; /* El video cubrirá todo el área */
}

header {
    display: flex;
    flex-direction: column; /* Alinea los elementos verticalmente */
    align-items: center; /* Centra los elementos horizontalmente */
    justify-content: center; /* Centra los elementos verticalmente */
    height: 100vh; /* Altura completa de la ventana */
    text-align: center;
    padding-top: 120px;

     }

#slogan {  
    margin-bottom: 20px; /* Espacio entre el slogan y los íconos */
    justify-content: center;
    align-items: center;
    padding: 20px; /* Centra los elementos horizontalmente */
   
}
    
    #slogan h1 {
    
            font-size: 8vmin;
            color: white;
            letter-spacing: 1.4px;
           
            
        }

        @keyframes zoom {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.3);
            }
        }
    
    #slogan h3 {
        color: #bdbdbd;
        font-weight: normal;
        padding: 0 0 20px 0;
        letter-spacing: 3px;
        font-size: 5vmin;
    }

    #slogan p {
        
        font-size: 18px;
        color: #bdbdbd;
        line-height: 150%;
        letter-spacing: 1px; 
        padding-top: 10px;
        font-weight: 300;
    }
    
    .slogan-button {
        display: inline-block;
        margin: 40px 0;
        padding: 14px 50px 15px 50px;
        border-radius: 20px;
        border-width: 1px;
        background: linear-gradient(to right, #050505, #00bf63);
        
        color: white;
        font-size: 12px;
        font-weight: bold;
        cursor: pointer;
        text-decoration: none;
        animation: resplandor 1.5s infinite alternate;
    }

    @keyframes resplandor {
        0% {
            box-shadow: 0 0 10px rgb(55, 232, 55);
        }
        100% {
            box-shadow: 0 0 20px rgb(55, 232, 55);
        }
    }

    .slogan-button:hover {  
        background: linear-gradient(to right, #05050500, #0b632d00);
        color: whitesmoke;
        border: solid 1px rgba(255, 255, 255, 0.438);
     
    }

    #socialmedia {
        display: flex;
        gap: 10px;
        margin: 0 0 0 0px;
    }

    #socialmedia a{
        text-decoration: none;
        color: white;
        padding: 10px;
        border-radius: 50%;
        display: inline-block;
        font-size: 18px;
        }
    
        #socialmedia a:hover {
            transform: scale(1.1);
        }

        .icon-section {
            display: flex;
            justify-content: space-around;
            width: 80%;
            padding-left: 60px;
            padding-right: 60px;
        }
        
        .icon-container {
        
            text-align: center; 
        }

       
        .icon {
            width: 80px;
            margin-bottom: 10px;
        }
        
        .icon-container p {
            font-size: 16px;
            color: whitesmoke;
            transition: color 1s ease; /* Transición suave para el color */
        }
        @keyframes changeColor {
            0%, 20% { color: #00bf63; }  /* Verde */
            20%, 40% { color: #FFFFFF; } /* Blanco */
            40%, 60% { color: #00bf63; }  /* Verde */
            60%, 80% { color: #FFFFFF; } /* Blanco */
            80%, 100% { color: #00bf63; }  /* Verde */
        }
        
        /* Aplicar la animación a los <p> */
        .icon-container p {
            animation: changeColor 4s infinite; /* Duración de 4 segundos para un ciclo completo */
        }
        
        /* Asignar un retraso diferente a cada p */
        .icon-container:nth-child(1) p {
            animation-delay: 0s; /* Primer p sin retraso */
        }
        
        .icon-container:nth-child(2) p {
            animation-delay: 1s; /* Segundo p con 1 segundo de retraso */
        }
        
        .icon-container:nth-child(3) p {
            animation-delay: 2s; /* Tercer p con 2 segundos de retraso */
        }
        
        .icon-container:nth-child(4) p {
            animation-delay: 3s; /* Cuarto p con 3 segundos de retraso */
        }
       
        #caracteristicas {
        padding-top: 60px;
          background-color: black; 
          width: 100%;
          height: 200px;
          display: flex;
          justify-content: center;
          align-items: center;
         
        }
#numcontact {
    display: flex;
    height: 70px;
    justify-content: right;
    padding-right: 50px;
    align-items: center;
    border-bottom:solid 1px;
    border-color: #1ece61;
   
}

#numcontact img {
    width: 25px;
    height: 25px;
    margin-right: 30px;
}

#aboutus {
    background-color: #000000;
    justify-content: center;
    align-items: center;
    display: flex;
    height: 500px;
}

.imagensub img{
    width: 250px;
    height: 250px;
    margin-left: 110px;
}

span {
    color: #00bf63;
}

#aboutus h4 {
color: whitesmoke;
font-size: 4vmin;
padding-bottom: 40px;

}

#aboutus p {
    letter-spacing: 3px;  
    color: whitesmoke;
    font-weight: 200;
}

  
@media (max-width: 768px) {
    /* Cambia la disposición a vertical en móviles y centra los elementos */
    #aboutus {
        flex-direction: column;
        justify-content: center; /* Centra verticalmente */
        align-items: center; /* Centra horizontalmente */
        text-align: center; /* Asegura que el texto quede centrado */
        padding: 10px;
        padding-top: 100px;
    }

    /* Oculta el segundo div (imagensub) en móviles */
    .imagensub {
        display: none;
    }

    /* Ajusta el tamaño del título sin cambiar el estilo */
    .descripcion h4 {
        font-size: 14px; /* Ajusta el tamaño */
        padding-top: 50px;
        padding-bottom: 0;
    }

    /* Ajusta el tamaño del párrafo */
    .descripcion p {
        line-height: 1.5; /* Mejora la legibilidad */
        font-size: 15px;
        padding: 0px 10px 10px 10px;
        margin-top: 0;
    }

    /* Ajusta el tamaño del botón */
    .slogan-button {
        margin-top: 25px;
    }
}

@media (max-width: 768px) {
    /* Cambiar la disposición a grid en móviles */
    .icon-section {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 columnas de igual tamaño */
        grid-gap: 50px; /* Espacio entre los íconos */
        justify-items: center; /* Centra los íconos horizontalmente */
        max-width: 100%; /* Asegura que no se salga del contenedor */
        padding: 30px; /* Ajusta el padding para pantallas pequeñas */
        height: 100%;
        justify-content: center;
         align-items: center;
        
    }

    /* Mantener el tamaño de los íconos en móviles */
    .icon-container img {
        width: 60px; /* Ajusta ligeramente para móviles */
        height: auto;
    }

    /* Centra el texto de los íconos */
    .icon-container p {
        font-size: 0.7rem;
        margin-top: 5px;
        
       
    }

    #caracteristicas {
        padding-top: 20px;
    }
}

#serviciossolu {
    background: linear-gradient(to bottom, #000000, #042310);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.cards{

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
}
.productos-servicios {
    text-align: center;
    padding: 20px;
    
}

.card {
    width: 250px;
    height: 250px;
    border-radius: 10px;
    padding: 10px;
    color: #00ff80; /* Texto verde neón */
    border: 1px solid #00ff80; /* Borde verde neón */
    text-align: center;
    font-family: 'Arial', sans-serif;
    transition: transform 0.3s ease-in-out;
    margin: 20px 20px 10px 20px;
}


.card:hover {
    transform: translateY(-10px);
}

.icono img {
    width: 40px;
    height: 40px;
    margin: 20px 20px 10px 20px;
    animation: zoomIn 2s infinite;
}
@keyframes zoomIn {
    0% {
        transform: scale(1); /* Tamaño original */
    }
    50% {
        transform: scale(1.1); /* Aumentar tamaño al 120% */
    }
    100% {
        transform: scale(1); /* Regresar al tamaño original */
    }
}

/* Asignar un retraso diferente a cada icono */
.card:nth-child(1) .icono {
    animation-delay: 0s; /* Primer icono sin retraso */
}

.card:nth-child(2) .icono {
    animation-delay: 0.5s; /* Segundo icono con medio segundo de retraso */
}

.card:nth-child(3) .icono {
    animation-delay: 1s; /* Tercer icono con 1 segundo de retraso */
}

.card:nth-child(4) .icono {
    animation-delay: 1.5s; /* Cuarto icono con 1.5 segundos de retraso */
}

.card:nth-child(5) .icono {
    animation-delay: 2s; /* Quinto icono con 2 segundos de retraso */
}

.card:nth-child(6) .icono {
    animation-delay: 2.5s; /* Sexto icono con 2.5 segundos de retraso */
}

.productos-servicios h1 {
    font-size: 5.5vmin;
    margin-bottom: 30px;
}

.productos-servicios h2 {
    font-size: 16px;
    margin-bottom: 10px;
    color: #00ff80; /* Texto verde neón */
}

.card p {
    font-size: 13px;
    color: #cfcfcf; /* Color gris claro para el texto */
    letter-spacing: 2px;
    margin: 10px;
    text-align: left;
}

/* Estilo responsivo para pantallas pequeñas */
@media (max-width: 768px) {
    .cards {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas para tabletas */
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .cards {
        display: flex; /* Usamos flexbox para alinear las tarjetas verticalmente */
        flex-direction: column;
        align-items: center;
    }

    .salto {
        display: none;
        font-weight: 400;
    }

    #fondo video {
        display: none;
    }

    #fondo {
        background-image: url(portada.png);
    }

    .descripcion p {
    
        font-size: 13px;
        padding-right: 35px;
        padding-left: 35px;
    }
    
}
.productos-servicios a {
    color: #00ff80;
    margin-top: 30px;
}

#call-action {

    background-image: url(callaction.png);
    justify-content: center;
    width: 100%;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-size: cover; /* La imagen cubre todo el área del section */
    background-position: center; /* Centra la imagen en el section */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    animation: fadeIn 2s ease-out;
}

#call-action h2 {
    font-size: 5.5vmin;
    color: whitesmoke;
    padding-top: 20px;
    animation: slideUp 1.5s ease-out forwards;
    animation: zoom 2s infinite;
}



#call-action p {
    animation: fadeIn 2s ease forwards;
    color: whitesmoke;
    font-weight: 300;
}

#call-action a {
    display: inline-block;
    margin: 20px 0;
    padding: 14px 50px 14px 50px;
    border-radius: 20px;
    border-width: 1px;
    background:#0b632d;
    
    color: white;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    animation: bounceIn 2.5s ease-out forwards;
}

#call-action a:hover{
    background: linear-gradient(to right, #05050500, #0b632d00);
    color: whitesmoke;
    border: solid 1px rgba(255, 255, 255, 0.438);
}

@media (max-width: 768px) {
    #call-action a {
        padding: 12px 20px; /* Reducir el tamaño del botón */
        font-size: 12px; /* Ajustar el tamaño de fuente */
    }
}

/* Estilos para pantallas aún más pequeñas (menores a 480px) */
@media (max-width: 480px) {
    #call-action a {
        padding: 10px 18px; /* Reducir aún más el tamaño del botón */
        font-size: 10px; /* Ajustar más el tamaño de fuente */
    }
}

/* Animaciones */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes bounceIn {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}

.contact-container {
    background: linear-gradient(to bottom, #000000, #042310);
    padding: 60px;
    width: 400px;
    text-align: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.contact-container h2 {
    color: #00FF87;
    font-size: 2vmin;
    text-align: left;
}

.contact-container h3 {
    color: #FFFFFF;
    margin-bottom: 20px;
    text-align: left;
    font-weight: 500;
    font-size: 16px;
}

form {
    display: flex;
    flex-direction: column;
}

label {
    margin-bottom: 5px;
    color: whitesmoke;
    padding-bottom: 10px;
    font-size: 10px;
    text-align: left;
    font-weight: 500;
}

input, textarea {
    background: transparent; /* Sin fondo */
    border: 1px solid #00FF87;
    padding: 10px;
    margin-bottom: 15px;
    color: #ffffff;
    outline: none;
}

input::placeholder, textarea::placeholder {
    color: #999999;
}

button {
    background-color: #00FF87;
    color: #111111;
    padding: 10px;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

button:hover {
    background-color: #00E67B;
}

#CONTACTANOS {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 50px;
    background-color: #000000;
}

.contact-main-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alineación vertical de ambos elementos al inicio */
    width: 100%;
    max-width: 1200px; /* Pue ajustar este valor según el diseño */
    gap: 30px; /* Espacio entre los dos contenedores */
}

#titulo h2 {
    color: whitesmoke;
    font-size: 3vmin;
}

.info-item {
    display: flex;
    padding-top: 30px;
}

.info-item img {
    padding-top: 22px;
    width: 60px;
}

.info-item h3 {
    padding-top: 30px;
    color: whitesmoke;
    font-size: 14px;
    text-align: left;
}

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


.contact-section1 {
    padding: 60px;
    width: 350px;
}
.contact-section1 p{
padding-top: 10px ;
text-align: left;
font-size: 12px;
color: whitesmoke;
font-weight: 300;
}

.descrip {
    padding-left: 30px;
    padding-top: 15px;
   
}

.descrip p {
    color: whitesmoke;
    font-weight: 300;
}

.map-container {
    padding-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 250px;
    width: 960px;
}

iframe {
    border: 0;
    width: 82%;
    height: 100%;
}

@media (max-width: 768px) {
    .map-container {
        height: auto; /* Ajusta la altura a auto para pantallas pequeñas */
        width: 100%; /* Ancho completo en pantallas pequeñas */
    }

    iframe {
        width: 100%; /* Ancho completo del iframe en pantallas pequeñas */
        height: 100%; /* Alto completo del iframe */
    }
}



@media screen and (max-width: 768px) {
    .contact-main-container {
       
        flex-direction: column; /* En pantallas pequeñas, coloca las secciones una debajo de otra */
    }

    .contact-container, .contact-section1 {
        width: 100%; /* Aseguramos que ocupen todo el ancho del contenedor */
    }

    .contact-section1 {
        padding-top: 0px;
        padding-left: 30px;
        padding-bottom: 30px;

    }

}

footer {
    
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 50px 150px;
    
}

.footer-container {
    
    max-width: 1200px;
    margin: 0 auto; 
}


.footer-logo img {
    width: 250px;
    margin-right: 15px;
}


.footer-nav {
    display: flex;
    gap: 30px;
}

.footer-nav a {
    padding-top: 30px;
    text-decoration: none;
    color: #fff;
    font-size: 12px;
}

.footer-social {
    display: flex;
    gap: 15px;
}



.footer-contact h3 {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 300;
}

.footer-contact p {
    margin: 5px 0;
    display: flex;
    align-items: center;
    font-size: 12px;
}

.footer-contact p img {
    width: 20px;
    margin-right: 10px;
    
}
#piepag {
    background-image: url(footer.png);
    background-size: cover; /* La imagen cubre todo el área del section */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    align-items: center;
    justify-content: center;
}


/* Estilos para la parte inferior */
.footer-bottom {
    background-color: transparent;
    text-align: center;
    padding: 10px 20px;
    border-top: 1px solid #1b4d1b;

}

#boton a {
    display: inline-block;
    margin: 40px 0;
    padding: 14px 50px 15px 50px;
    border-radius: 20px;
    border-width: 1px;
    background: linear-gradient(to right, #050505, #00bf63);
    
    color: white;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    animation: resplandor 1.5s infinite alternate;
}

.footer-bottom p {
    margin: 5px 0;
    font-size: 14px;
    color: #bfbfbf;
}

.footer-social a {
    color: #00bf63;
}

/* Responsividad */
@media screen and (max-width: 600px) {
    footer {
        padding: 30px 0; /* Reduce el padding izquierdo y derecho */
        flex-direction: column; /* Cambia a disposición vertical */
        align-items: center; /* Centra los elementos */
    }


    .footer-logo img {
        width: 150px; /* Reduce el tamaño del logo */
    }

    .footer-social a {
        color: #00bf63;
    }



    .footer-nav a {
        font-size: 10px; /* Reduce el tamaño del texto de navegación */
    }

    .footer-contact h3 {
        padding-top: 20px;
        font-size: 13px; /* Reduce el tamaño del encabezado de contacto */
    }

    .footer-contact p {
        font-size: 10px; /* Reduce el tamaño del texto de contacto */
    }

    #boton a {
        padding: 10px 30px; /* Ajusta el tamaño del botón */
        font-size: 10px; /* Reduce el tamaño del texto del botón */
    }

    .footer-bottom p {
        font-size: 12px; /* Reduce el tamaño del texto en la parte inferior */
    }
}
 
#call-action video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    transform: translate(-50%, -50%);
    object-fit: cover;
}