@import url('https://fonts.googleapis.com/css2?family=Holtwood+One+SC&family=Montserrat:ital,wght@0,100;0,300;0,500;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
* {
    margin: 0;
    padding: 0;
    color: white;
    font-family: "Hind Kochi-Regular", Helvetica;
    font-weight: 400;
    font-size: 32px;
    text-align: center;
}
:root {
    --orange: #ff8322;
    --fuente: 'Holtwood One SC', serif;
    --subTitulos: 19px;
}

html, body {
    height: 100%;
    background-color: #020314;

    padding: 0%;
}

h2{
    font-family: var(--fuente);
    
    color: var(--orange);
}   

#certificaciones{
    font-family: var(--fuente);
    
    color: var(--orange);
}   

#certificaciones span{
    font-family: var(--fuente);
    
    color: var(--white);
}  
.container {
    background-color: #020314;
    width: 100%;
    max-width: none;
}


/*-------------------------------Header-----------------------------*/

nav {
    transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out;
    box-sizing: border-box; /* Incluye el relleno y el borde en el ancho/altura total */
    background-color: #020314;
    align-items: flex-end;

}
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-items: flex-end;  

}

.nav-links {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-links li {
    margin-right: 25px; /* Espacio entre los enlaces */
}
.nav-links a {
    text-decoration: none;
    color: white; /* Color del texto de los enlaces */
    font-size: 30px;
}
.nav-links a:hover {
    color: var(--orange); /* Cambia el color al pasar el mouse sobre el enlace */
}
.logo-container {
    display: flex;
    align-items: baseline;
    color: white; /* Color del texto del logo */
    margin: 0px;
    margin-top: 1%;
    margin-left: 6%;
    margin-right: 0;
}
.logo-container span {
    font-family: var(--fuente);
    font-size: 40px;
}
.logo-container .orangeText{
    color: var(--orange);
}
.logo-container img {
    width: 100%; /* Tamaño del logo */
    margin-right: 10px; /* Espacio entre el logotipo y el texto */
}

.sticky {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 1000; /* Ajusta según sea necesario */
    transition: top 0.8s ease-in-out;
}


/*-------------------------------------Banner animado---------------------------*/

.image-container1 {
    margin-top: 163px;
    display: flex;
    width: 100%;
  }
  
  .image-cell {
    
    flex: 1; /* Inicialmente todas las celdas tienen el mismo ancho */
    overflow: hidden; /* La imagen se recortará si la celda es más pequeña que la imagen */
    position: relative;
    transition: flex 1.2s ease; /* Anima el cambio de ancho */
    cursor: pointer;
    display: flex; /* Asegúrate de que el contenido interno se alinea correctamente */
    justify-content: center; /* Centra horizontalmente la imagen dentro de la celda */
    max-height: 17  00px;
  }
  
  .xd{
    display: none;
  }
  .image-cell img {
    max-width: 1000px; /* Cambiado a 100% para que la imagen se ajuste al ancho de la celda */
    max-height: 100%; /* Agregado para asegurar que la imagen no exceda la altura de la celda */
  }
  
  .overlay {
    position: absolute;
    transform: translate(-50%, -50%);
    background: rgba(3, 4, 29, 0.58);
    border-radius: 8px; /* Ajusta según sea necesario */
    color: white;
    transition: opacity 0.5s ease;
    opacity: 0; /* Inicialmente oculto */
  }

 .over-own-1{
    top: 77%;
    left: 32%;
    width: 55%; /* Asegúrate de que el overlay cubra toda la celda */
    padding: 2%;
    padding-bottom: 0px;
 }
 .over-own-2{
    top: 77%;
    left: 55%;
    width: 80%; /* Asegúrate de que el overlay cubra toda la celda */
    padding: 2%;
    padding-bottom: 0px;
 }
 .over-own-3 p{
    text-align: left;
 }
 .over-own-3{
    top: 70%;
    left: 36%;
    width: 65%; /* Asegúrate de que el overlay cubra toda la celda */
    padding: 2%;
    padding-bottom: 0px;
 }

 .over-own-4{
    top: 77%;
    left: 68%;
    width: 55%; /* Asegúrate de que el overlay cubra toda la celda */
    padding: 2%;
    padding-bottom: 0px;
 }
  
  .overlay h2 {
    font-size: 17px;
    color: white;
  }
  
  .overlay p {
    font-size: 14px;
  }
  
   .p{
    font-family: var(--fuente);
    font-size: 20px;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    padding: 10px;
}
  .image-cell.expanded {
    flex: 3; /* La celda expandida tendrá un ancho mayor */
  }

  .image-cell.expanded .overlay {
    opacity: 1; /* Muestra el overlay */
  }
 
/********MediaQuery*********/
@media (max-width: 1200px) {
    .image-cell.expanded {
        flex: 5; /* La celda expandida tendrá un ancho mayor */
      }
    .image-cell:not(.expanded) .overlay {
    display: none;
  }
  .image-cell:not(.expanded) .tit {
    display: block;
  }
  .image-cell:is(.expanded) .overlay {
    display: block;
  }
  .image-cell:is(.expanded) .tit {
    display: none;
  }
  }

/*---------------------------------------Contactanos----------------------------------*/
#slider-container {
    overflow: hidden;
    padding: 0px;
  }
  
  
  .slider-wrapper {
    display: flex;
    transition: transform 1s ease;

  }
  
  .slide {
    flex: 0 0 100%;
  }
  
    .about-container {  
    align-items: flex-start; /* Alinea los elementos en la parte superior */
    display: flex;
    justify-content: space-between;
    padding: 20px;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: 5%;
    margin-right: 5%;
}

.text-content {
width: 50%;
}

.text-content p{
    font-size: 25px;
    text-align: justify;
}

.text-content h2 {
    text-align: left;
    font-size: 36px;

}

.image-container {
width: 45%;
}

.image-container img {
width: 100%;
height: auto;
border-radius: 8px; /* Ajusta según sea necesario */
}


/*---------------------------------------Slider----------------------------------*/
.servicios-1{
    margin-bottom: 0px;

}
.servicios{
    margin-top: 3%;
    margin-bottom: 0px;

}

.servicios h2{
    font-size: 40px;
    text-align: right;
    color: white;
}
.servicios h2 span {
    font-size: 13px;
    color: var(--orange);
    font-family: var(--fuente);
}
.services{
    margin: 5%;
    margin-bottom: 0px;
    margin-top: 0%;
    display: flex;
}
.services .slider-content{
    margin: 0%;
}
.text-separation{
    margin: 5%;
}
.services h3{
    font-size: var(--subTitulos);    
    font-family:  var(--fuente);
    text-align: left;
}
.services h3 span{
    font-family: var(--fuente);
    font-size: 19px;
}

.services .suministros-img{
    width: 100%;
    margin-bottom: 6%;
}
.servicios-1{
    display: block;
}
.servicios-2{    
    display: none;
}
.servicios-3{
    display: none;
}
.servicios-4{
    display: none;
}

/*-------------------------------------Certificaciones-----------------------------------*/
.certificaciones_center h2{
    text-align: center;
    margin: 5%;
    font-size: 40px;
}
.certificaciones_center h2 span{
    color: white;
    font-size: 40px;
}
.certificaciones {
    display: flex;
    justify-content: center;
    margin: 5%;
}
.certificaciones-container {
    display: flex;
    justify-content: space-between; /* Espacio entre las imágenes */
    align-items: center;
    padding-left: 20%;
    padding-right: 20%;
    /*border: 2px solid red;*/
}
.certificaciones-image-1{
    width: 35%; /* Tamaño deseado en porcentaje para las imágenes */
}
.certificaciones-image-2 {
    width: 50%; /* Tamaño deseado en porcentaje para las imágenes */
}
/*-------------------------------------Marcas-----------------------------------*/
.brands_center h2{
    text-align: center;
    margin: 5%;
    font-size: 40px;
}
.brands {
    display: flex;
    justify-content: center;
    margin: 5%;
}
.brands-container {
    display: flex;
    justify-content: space-between; /* Espacio entre las imágenes */
    align-items: center;
    padding-left: 20%;
    padding-right: 20%;
    /*border: 2px solid red;*/
}
.brand-image-1{
    width: 30%; /* Tamaño deseado en porcentaje para las imágenes */
}
.brand-image-2 {
    width: 50%; /* Tamaño deseado en porcentaje para las imágenes */
}

/*------------------------------------contacto----------------------------------*/
.contactanos{
}

.contactanos h2{
    text-align: left;
    margin: 5%;
    font-size: 40px;
}
.contact-container {
    margin-left:  5%;
    margin-right: 5%;
    padding: 0px;
    /*border: 2px solid rgb(76, 0, 255);*/
    background-color: var(--orange);
    border-radius: 20px;
    display: flex;
}
/*--------No convinar los .form--------*/
.contact-container{
    padding: 5%;
}
.form {
    flex: 1;
    padding: 20px;
}
form {

    align-items: center;
    display: flex;
    flex-direction: column;
}
.form input,
button {
        padding: 2.5%;
        margin: 1% 0;
        border-radius: 10px;
        border: 1px solid white;
        color: black; /* Establece el color del texto en negro */
        width: 100%; /* Ocupa el 100% del ancho del contenedor */
        height: 80%;
        margin-left: 0px;
}
.form-image img {
    max-width: 90%;
    height: auto;
    margin-top: 7%;
    margin-right: 7%;
}


/*----------------------------------Mapa---------------------------*/

.map{
    margin-top: 100px;
    /*border: 2px solid red;*/
    width: 100%;
}

/*----------------------------------footer---------------------------*/
footer{
    background-color: #2c2d34;

}
.footer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: #2c2d34;
    padding: 5%;
    padding-bottom: 1%;
}   

.footer-item {
    padding: 10px;

}

.footer-item h2 {
    font-family: var(--fuente);
    font-size: 33px;
    color: var(--orange);
    text-align: left;
}

.footer-item .a {
    text-align: right;
    font-size: 25px;
    text-decoration: none; /* Quita la línea subrayada */
    color: white; /* Color de texto predeterminado */
    transition: color 0.1s; /* Agrega una transición de color */
}
.footer-item .a:hover {
    color: var(--orange); /* Cambia el color al pasar el mouse sobre el enlace */
}

footer ul {
    text-align: left;
    list-style: none;
    padding: 0;
}

footer li {
     text-align: left;
    margin-bottom: 10px;
}
.log-container {
    max-width: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}
.log-content {
    display: flex;
    align-items: center; /* Alinea verticalmente los elementos al centro */
}
        .log-content img {
            max-width: 100%;
            padding-left: 5%;
            height: auto;
            margin-left: 20px; /* Espacio entre el texto y la imagen */
            margin-right: 0px;
        }

.log-content .nero {
    color: white;
    font-size: 30px;
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    word-wrap: break-word;

}

.log img{
    width: 15%;
}


.nero:hover {
    color: var(--orange);
}
.swiper {
    width: 100%;
    height: 300px; /* Ajusta la altura según necesites */
}
  
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #37171700;
  
    /* Centra el contenido verticalmente */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
@media screen and (max-width: 5500px){
    .image-container1{
        margin-top: 4%;
    }
    .image-cell{
        max-height: 1000px;
    }
    .image-cell img{
    max-width: 8000px;
    }
     .image-cell.expanded {
        flex: 1; /* La celda expandida tendrá un ancho mayor */
      }
       .p{
    font-size: 50px;
    }
    .overlay p {
        font-size: 30px;
      }
       .overlay h2 {
        font-size: 30px;
      }
    .services .slider-content{
        margin: 10%;
    }
}

@media screen and (max-width: 5000px){
    .image-container1{
        margin-top: 4.5%;
    }
       .image-cell{
        max-height: 1600px;
    }
    .image-cell img{
    max-width: 8000px;
    }
    .image-cell.expanded {
        flex: 1.2; /* La celda expandida tendrá un ancho mayor */
      }
    .services .slider-content{
        margin: 10%;
    }
}

@media screen and (max-width: 4500px){
    .services .slider-content{
        margin: 10%;
    }
}

@media screen and (max-width: 4000px){
    .image-container1{
        margin-top: 5%;
    }
    .image-cell{
        max-height: 1600px;
    }
    .image-cell img{
    max-width: 8000px;
    }
    .image-cell.expanded {
        flex: 1.7; /* La celda expandida tendrá un ancho mayor */
      }
    .services .slider-content{
        margin: 9%;
    }
}
@media screen and (max-width: 3500px){
    .services .slider-content{
        margin: 8%;
    }
}
@media screen and (max-width: 3000px){
    .image-container1{
        margin-top: 5.5%;
    }
    .image-cell{
        max-height: 1600px;
    }
    .image-cell img{
    max-width: 8000px;
    }
    .p{
        font-size: 35px;
        }
        .overlay p {
            font-size: 20px;
          }
           .overlay h2 {
            font-size: 20px;
          }
    
    .servicios h2{
        margin-right: 5%;
    }
    .image-cell.expanded {
        flex: 2.5; /* La celda expandida tendrá un ancho mayor */
      }
    .services .slider-content{
        margin: 7%;
    }
}


@media screen and (max-width: 2500px){
    .image-container1{
        margin-top: 6%;
    }
    .image-cell img{
        max-width: 1000px;
    }
    .servicios h2{
        margin-right: 5%;
    }
    .services .slider-content{
        margin:5%;
    }
}

@media screen and (min-width: 2000px){
   
    .form{
        width: 500px;
    }
    form {
        width: 70%;
    }
     .form input,
    button {
            width: 700px;
            height: 70px;
            font-size: 25px;

    }
    .form-image img {
     max-width: 100%;
     height: auto;
     margin: 5%;
     margin-top: 5%;
 }
}
@media screen and (max-width: 2000px){
    .image-container1{
        margin-top: 7%;
    }
    .p{
        font-size: 25px;
        }
    .services{
        margin: 5%;
        margin-top: 0%;
        display: flex;
        padding: 2%;
    }
    .services .slider-content{
        margin: 2%;
    }
     .form input,
    button {
            width: 700px;
            height: 70px;
            font-size: 25px;
            margin-left: 15%;
    }
    .form-image img {
     max-width: 100%;
     height: auto;
     margin: 5%;
     margin-top: 5%;
 }
}

@media screen and (max-width: 1900px) {
    .form input,
    button {
            width: 450px;
            height: 65px;
            font-size: 25px;
            margin-right: 10%;

    }
    .form-image img {
     max-width: 90%;
     height: auto;
     margin: 5%;
     margin-top: 5%;
 }
}
@media screen and (max-width: 1800px) {
    .form input,
    button {
            width: 450px;
            height: 50px;
            font-size: 25px;
            margin-right: 10%;

    }
    button{
        height: 75px;
    }
    .form-image img {
     max-width: 90%;
     height: auto;
     margin: 5%;
     margin-top: 5%;
 }
}
@media screen and (max-width: 1600px)  {
    .form input,
    button {
            width: 450px;
            height: 50px;
            font-size: 25px;
            margin-right: 15%;
    }
    button{
        height: 70px;
    }
    .form-image img {
     max-width: 90%;
     height: auto;
     margin: 5%;
     margin-top: 5%;
 }
}

@media screen and (max-width: 1500px)  {
    .form input,
    button {
            width: 450px;
            height: 50px;
            font-size: 25px;
            margin-right: 15%;
    }
      
     button{
        height: 70px;
    }
    .form-image img {
     max-width: 90%;
     height: auto;
     margin: 5%;
     margin-top: 5%;
 }
}
@media screen and (max-width: 1400px){
    .image-container1{
        margin-top: 9%;
    }
    .form input,
       button {
               width: 450px;
               height: 50px;
               font-size: 25px;
        margin-left: 0px;
        margin-right: 0px;
       }
        button{
            height: 65px;
        }
       .form-image img {
        max-width: 90%;
        height: auto;
        margin: 5%;
        margin-top: 5%;
    }
}
@media screen and (max-width: 1300px) {
    .image-container1{
        margin-top: 7%;
    }
    .logo-container img{
        width: 33%;
    }
    .nav-links a{
        font-size: 30px;
    }
    .logo-container span{
        font-size: 45px;
    }
    .servicios h2{
        font-size: 34px;
    }
    .servicios h2 span{
        font-size: 36px;
    }
    .form input,
       button {
               width: 450px;
               height: 50px;
               font-size: 25px;
        margin-left: 0px;
        margin-right: 0px;
       }
    button{
        height: 60px;
    }
       .form-image img {
        max-width: 90%;
        height: auto;
        margin: 5%;
        margin-top: 5%;
    }
}
@media screen and (min-width: 1300px) {
    /* Estilos aplicados cuando el ancho de la pantalla es igual o menor a 1200px */
    
    .servicios h2{
        font-size: 34px;
    }
    .servicios h2 span{
        font-size: 36px;
    }
}

@media screen and (max-width: 1200px) {
    /* Estilos aplicados cuando el ancho de la pantalla es igual o menor a 1200px */
    .logo-container img{
        width: 30%;
    }
    .nav-links a{
        font-size: 20px;
    }
    .logo-container span{
        font-size: 30px;
    }
       .image-container1{
        margin-top: 10%;
    }
    .servicios h2{
        font-size: 32px;
    }
    .servicios h2 span{
        font-size: 32px;
    }
    .about-container{
        margin: 10%;    
    }
     .form input,
       button {
               width: 450px;
               height: 60px;
               font-size: 25px;
               margin-left: 0px;
               margin-right: 0px;
       }
       .form-image img {
        max-width: 90%;
        height: auto;
        margin: 5%;
        margin-top: 5%;
    }
}
@media screen and  (max-width: 1100px){
      .logo-container img{
        width: 33%;
    }
    .nav-links a{
        font-size: 20px;
    }
    .logo-container span{
        font-size: 35px;
    }
    .image-container1{
        margin-top: 10%;
    }
    .p{
    font-size: 18px;
    }
    .overlay p {
        font-size: 13px;
      }
    .over-own-1{
        top: 75%;
        left: 33%;
     }
     .over-own-2{
        top: 75%;
        left: 57%;
        width: 75%; /* Asegúrate de que el overlay cubra toda la celda */
     }
     .over-own-3{
        top: 68%;
        left: 38%;
        width: 65%; /* Asegúrate de que el overlay cubra toda la celda */
     }
     .over-own-4{
        top: 75%;
        left: 68%;
        width: 55%; /* Asegúrate de que el overlay cubra toda la celda */
     }
            .overlay h2 {
                font-size: 17px;
            }
      .overlay p {
        font-size: 14px;
      }
    .text-content h2{
        font-size: 29px;
    }
      .text-content p{
        font-size: 19px;
    }
    .servicios h2{
        font-size: 30px;
    }
     .servicios h2 span{
        font-size: 30px;
    }

       .form {
        margin-top: 1.7%;
        margin-bottom: 5;
    }
       .form input,
       button {
               width: 350px;
               height: 50px;
               font-size: 23px;
        margin-left: 0px;
        margin-right: 0px;

       }
       .form-image img {
        max-width: 80%;
        height: auto;
        margin: 5%;
        margin-top: 10%;
    }
}
@media screen and (min-width: 1100px){
    
    .servicios h2 span{
        font-size: 29px;
    }
  
}
@media screen and (max-width: 1000px) {
    .nav-links a{
        font-size: 18px;
    }
    .logo-container span{
        font-size: 28px;
    }
    .logo-container img{
        width: 29%;
    }
    .image-container1{
        margin-top: 11%;
    }
    .image-cell img {
            max-width: 730px; /* Cambiado a 100% para que la imagen se ajuste al ancho de la celda */
    }
        .p{
            font-size: 17px;
        }
        .overlay p {
            font-size: 12px;
          }
        .over-own-1{
            top: 75%;
            left: 33%;
         }
         .over-own-2{
            top: 75%;
            left: 57%;
            width: 75%; /* Asegúrate de que el overlay cubra toda la celda */
         }
         .over-own-3{
            top: 68%;
            left: 38%;
            width: 65%; /* Asegúrate de que el overlay cubra toda la celda */
         }
         .over-own-4{
            top: 75%;
            left: 68%;
            width: 55%; /* Asegúrate de que el overlay cubra toda la celda */
         }
          .overlay h2 {
            font-size: 14px;
          }
          .overlay p {
            font-size: 12px;
          } 
    .text-content h2{
        font-size: 26px;
    }
      .text-content p{
        font-size: 16px;
    }
    .servicios h2{
        font-size: 28px;
    }
    .servicios h2 span{
        font-size: 28px;
    }
    .services h3{
        font-size: 18px;    
        }
        .services h3 span{
            font-size: 18px;
        }
    
    .contactanos h2{
        margin: 5%;
        font-size: 35px;
    }   
    .certificaciones_center h2{
        margin: 5%;
        font-size: 34px;
    }     
    .certificaciones_center h2 span{
        font-size: 34px;
    }  
    .brands_center h2{
        margin: 5%;
        font-size: 35px;
    }  
    .form {
        margin-top: 1.7%;
        margin-bottom: 5;
    }
       .form input,
       button {
               width: 300px;
               height: 45px;
               font-size: 20px;
        margin-left: 0px;
        margin-right: 0px;
       }
       .form-image img {
        max-width: 85%;
        height: auto;
        margin: 5%;
        margin-top: 10%;
    }

    .footer {
        padding: 5%;
        padding-bottom: 1%;
    }   
    
    .footer-item {
        padding: 10px;

    }
    
    .footer-item h2 {
        font-size: 20px;
        text-align: center;
        padding-left: 0%;
       padding-right: 0%;

        }
    
    .footer-item p {
        text-align: center;
        font-size: 15px;
    }
    
    ul {
        list-style: none;
        padding: 0;
    }
    
    li {
        margin-bottom: 10px;
    
    }

    
}
@media screen and (max-width: 900px) {
    /* Estilos aplicados cuando el ancho de la pantalla es igual o menor a 1000px */
    .nav-links{
    display: flex;
    align-items: baseline;
        
    }
    /*--------------------------------------*/
    .nav-links a{
        font-size: 14.5px;
    }   
    .logo-container span{
        font-size: 21.5px;
    }
    .logo-container img{
        width: 25%;
    }
    .image-container1{
        margin-top: 11%;
    }
    .image-cell img {
        max-width: 700px; /* Cambiado a 100% para que la imagen se ajuste al ancho de la celda */
    }
    .image-cell.expanded {
    flex: 2.7; /* La celda expandida tendrá un ancho mayor */
  }
    .p{
        font-size: 15px;
    }
    .over-own-1{
        top: 75%;
        left: 33%;
     }
     .over-own-2{
        top: 75%;
        left: 57%;
        width: 75%; /* Asegúrate de que el overlay cubra toda la celda */
     }
     .over-own-3{
        top: 68%;
        left: 44%;
        width: 73%; /* Asegúrate de que el overlay cubra toda la celda */
     }
     .over-own-4{
        top: 75%;
        left: 68%;
        width: 55%; /* Asegúrate de que el overlay cubra toda la celda */
     }
      .overlay h2 {
        font-size: 12px;
      }
      .overlay p {
        font-size: 11px;
      } 
    .text-content h2{
        font-size: 27px;
    }
      .text-content p{
        font-size: 14px;
    }
    .servicios h2{
        font-size: 27px;
    }
    .servicios h2 span {
        font-size: px;
    }
    .services h3{
        font-size: 16px;    
        }
        .services h3 span{
            font-size: 16px;
        }

    .contactanos h2{
        margin: 5%;
        font-size: 35px;
    }

     .brands_center h2{
        margin: 5%;
        font-size: 35px;
    }  
    .form {
        margin-top: 1.7%;
        margin-bottom: 5;
    }
       .form input,
       button {
               width: 250px;
               height: 45px;
               font-size: 20px;
               margin-right: 0px;
               margin-left: 0px;
       }
       .form-image img {
        max-width: 90%;
        height: auto;
        margin: 5%;
        margin-top: 8%;
    }

    .footer {
        padding: 5%;
        padding-bottom: 1%;
    }   
    
    .footer-item h2 {
        font-size: 19px;
        text-align: center;
        padding-right: 0%;
        padding-left: 0%;
        }
    
    .footer-item p {
        text-align: center;
        font-size: 13px;
    }
   

}

@media screen and (max-width: 800px) {
    /* Estilos aplicados cuando el ancho de la pantalla es igual o menor a 1000px */
    .navbar {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 5%;
    }
    .nav-links {
        list-style: none;
        display: flex;
        margin: 0;
        padding: 0;
    }
    .nav-links li {
        margin-right: 25px; /* Espacio entre los enlaces */

    }
    
    .nav-links a {
        font-size: 20px;
    }
    .image-container1{
        margin-top: 18%;
    }
    .logo-container {
        display: flex;
        align-items: center;
        color: white; /* Color del texto del logo */
        margin: 1%;
        padding-left: 10%;

    }
    
    .logo-container span {
        font-size: 25px;
    }
    
    .logo-container .orangeText {
        color: var(--orange);
    }
    
    .logo-container img {
        width: 25%; /* Tamaño del logo */
        margin-right: 5%; /* Espacio entre el logotipo y el texto */
    }
    
    .image-cell.expanded {
        flex: 2.7; /* La celda expandida tendrá un ancho mayor */
      }
        .p{
            font-size: 13px;
        }
        .over-own-1{
            top: 78%;
            left: 33%;
         }
         .over-own-2{
            top: 77%;
            left: 57%;
            width: 75%; /* Asegúrate de que el overlay cubra toda la celda */
         }
         .over-own-3{    
            top: 73%;
            left: 46%;
            width: 78%; /* Asegúrate de que el overlay cubra toda la celda */
         }
         .over-own-4{
            top: 78%;
            left: 60%;
            width: 65%; /* Asegúrate de que el overlay cubra toda la celda */
         }
          .overlay h2 {
            font-size: 10px;
          }
          .overlay p {
            font-size: 10px;
          } 
    .text-content h2{
        font-size: 20px;
    }
      .text-content p{
        font-size: 11px;
    }
    .servicios h2{
        font-size: 24px;
    }
    .servicios h2 span {
        font-size: 24px;
    }
    .services h3{
    font-size: 15px;    
    }
    .services h3 span{
        font-size: 15px;
    }
     .contactanos h2{
        font-size: 30px;
    }
    .certificaciones_center h2{
        font-size: 30px;
    }   
    .certificaciones_center h2 span{
        font-size: 30px;
    }
    .brands_center h2{
        font-size: 30px;
    }  
   .form {
}
   .form input,
   button {
           padding: .5%;
           width: 250px;
           height: 40px;
           font-size: 20px;
               margin-right: 0px;
               margin-left: 0px;

   }
   .form-image img {
    max-width: 80%;
}
 .footer {
        grid-template-columns: repeat(2, 1fr); /* Cambia a una disposición de 2x2 */
        padding: 5px;
        padding-bottom: 0px;

    }
    
    .footer-item {
        padding: 1px;
   
    }

    .footer-item h2 {
        font-size: 23px;
        text-align: center;
        padding-left: 0%;
        padding-right: 0%;
    }

    footer li {
        height: 25px;
        margin-bottom: 1px;
        margin: auto;
     text-align: center;
    }
    .footer-item .a {
        text-align: center;
        font-size: 15px;
        padding-left: 5%;
        padding-right: 5%;
    }   
    .log img{
    width: 6%;
}
    

}
@media screen and (max-width: 750px){
    .text-content {
    font-size: 13px;
}
.servicios h2 span {
    font-size: 25px;
}
}
@media screen and (max-width: 700px){
    /* Estilos aplicados cuando el ancho de la pantalla es igual o menor a 1000px */
    .nav-links a{
        font-size: 17px;
    }
    .logo-container span{
        font-size: 24px;
    }
    .logo-container img{
        width: 25%;
    }
    .nav-links li{
        margin-right: 18px;
    }
    .image-container1{
        margin-top: 20%;
    }
     .image-cell img {
        max-width: 670px; /* Cambiado a 100% para que la imagen se ajuste al ancho de la celda */
    }
    .image-cell.expanded {
        flex: 2.7; /* La celda expandida tendrá un ancho mayor */
      }
        .p{
            font-size: 10px;
        }
        .over-own-1{
            top: 78%;
            left: 33%;
         }
         .over-own-2{
            top: 77%;
            left: 57%;
            width: 75%; /* Asegúrate de que el overlay cubra toda la celda */
         }
         .over-own-3{
            top: 71%;
            left: 46%;
            width: 78%; /* Asegúrate de que el overlay cubra toda la celda */
         }
         .over-own-4{
            top: 78%;
            left: 60%;
            width: 65%; /* Asegúrate de que el overlay cubra toda la celda */
         }
          .overlay h2 {
            font-size: 9px;
          }
          .overlay p {
            font-size: 9px;
          } 
    .text-content h2{
        font-size: 20px;
    }
      .text-content p{
        font-size: 11px;
    }
    .image-container{
        margin-top: 7%;
    }
    .servicios h2{
        font-size: 18px;
    }
    .servicios h2 span {
        font-size: 20px;
    }
    .services h3{
        font-size: 13px;    
        }
        .services h3 span{
            font-size: 13px;
        }

    .contactanos h2{
        font-size: 30px;
    }
    .brands_center h2{
        font-size: 30px;
    }  
   .form {
    margin-top: 1.7%;
    padding: 5px;
    margin-left: 3%;
}
   .form input,
   button {
           padding: .5%;
           width: 250px;
           height: 40px;
           font-size: 17px;
               margin-right: 0px;
               margin-left: 0px;

   }
   .form-image img {
    max-width: 100%;
    height: auto;
    margin: 5%;
}
.footer-item h2 {
    font-size: 22px;
}
footer li{
    text-align: center;
}
#af{
    font-size: 13px;
}
}
@media screen and (max-width: 650px){
    .servicios h2 span {
        font-size: 19px;
    }
      .form input,
   button {
           width: 200px;
           height: 30px;
           font-size: 17px;
        margin-left: 0px;

   }
   .form-image img {
    max-width: 90%;
    height: auto;
}
} 
@media screen and (max-width: 600px) {
    /* Estilos aplicados cuando el ancho de la pantalla es igual o menor a 1000px */
    .navbar{
        padding-bottom: 7.5%;
    }
    .logo-container span{
        font-size: 22px;
    }
     .logo-container img{
        width: 23%;
    }
    .image-container1{
        margin-top: 23%;
    }
    .image-cell img {
        max-width: 660px; /* Cambiado a 100% para que la imagen se ajuste al ancho de la celda */
    }
    .image-cell.expanded {
        flex: 2.7; /* La celda expandida tendrá un ancho mayor */
      }
        .p{
            font-size: 9px;
        }
        .over-own-1{
            top: 78%;
            left: 33%;
         }
         .over-own-2{
            top: 75%;
            left: 57%;
            width: 75%; /* Asegúrate de que el overlay cubra toda la celda */
         }
         .over-own-3{
            top: 71%;
            left: 46%;
            width: 78%; /* Asegúrate de que el overlay cubra toda la celda */
         }
         .over-own-4{
            top: 78%;
            left: 60%;
            width: 65%; /* Asegúrate de que el overlay cubra toda la celda */
         }
          .overlay h2 {
            font-size: 8px;
          }
          .overlay p {
            font-size: 8px;
          } 
   .text-content h2{
    font-size: 14x;
}
  .text-content p{
    font-size: 9px;
}
.image-container{
    margin-top: 5%;

}
   .servicios h2{
       font-size: 14px;
   }
   .servicios h2 span {
    font-size: 15px;
}
.services h3{
    font-size: 12px;    
    }
    .services h3 span{
        font-size: 12px;
    }

   .contact-container {
        margin-left:  5%;
        margin-right: 5%;
        padding: 0px;
    }
   .contactanos h2{
       font-size: 20px;
   }
   .certificaciones_center h2{
        font-size: 20px;
    }   
    .certificaciones_center h2 span{
        font-size: 20px;
    }
   .brands_center h2{
    font-size: 20px;
}  
   .form {
        margin-top: 1.7%;
        padding: 5px;
        margin-left: 3%;
    }
   .form input,
   button {
        width: 200px;
        height: 27px;
        font-size: 15px;
        margin-left: 0px;
   }
   .form-image img {
        max-width: 85%;
        height: auto;
    }
   
    .footer {
        grid-template-columns: repeat(2, 1fr); /* Cambia a una disposición de 2x2 */
        padding: 5px;
        padding-bottom: 0px;

    }
    
    .footer-item {
        padding: 1px;
    }

    .footer-item h2 {
        font-size: 20px;
        text-align: center;
        padding-left: 0%;
        padding-right: 0%;
    }

    footer li {
        text-align: center;
        height: 28px;
        margin-bottom: 1px;
        margin: auto;
    }
    .footer-item .a {
        text-align: center;
        font-size: 12px;
        padding-left: 5%;
        padding-right: 5%;
    }
    #af{
        font-size: 11px;
    }
}

@media screen and (max-width: 500px) {
    .navbar{
        padding-bottom: 7%;
    }
    .nav-links a{
        font-size: 13px;
    }
    .nav-links li {
    margin-right: 5px; /* Espacio entre los enlaces */
    }
    .logo-container span{
        font-size: 22px;
    }
    .logo-container img{
        width: 23%;
    }
    .nav-links li{
        margin-right: 18px;
    }
    .image-container1{
        margin-top: 26%;
    }
    .image-cell img {
        max-width: 600px; /* Cambiado a 100% para que la imagen se ajuste al ancho de la celda */
         max-height: 90%; /* Agregado para asegurar que la imagen no exceda la altura de la celda */
    }
    .image-cell.expanded {
        flex: 3; /* La celda expandida tendrá un ancho mayor */
      }
        .p{
            font-size: 7px;
            top: 70%;
        }
        .over-own-1{
            top: 69%;
            left: 33%;
         }
         .over-own-2{
            top: 67%;
            left: 57%;
            width: 75%; /* Asegúrate de que el overlay cubra toda la celda */
         }
         .over-own-3{
            top: 65%;
            left: 45%;
            width: 78%; /* Asegúrate de que el overlay cubra toda la celda */
         }
         .over-own-4{
            top: 70%;
            left: 60%;
            width: 65%; /* Asegúrate de que el overlay cubra toda la celda */
         }
          .overlay h2 {
            font-size: 6px;
          }
          .overlay p {
            font-size: 6px;
          } 
   .servicios h2{
        padding-right: 1px;
       font-size: 13px;
       text-align: center;
       margin-right: 5%;
       margin-left: 5%;
   }
   .about-container {
    flex-direction: column; /* Cambia la dirección de la columna */
    align-items: center; /* Centra los elementos en la columna */
    padding: 0px;
}
.text-content h2 {
    font-size: 17px;
    text-align: center;
}
.text-content p {
    font-size: 11px;
}
.text-content {
    width: 100%; /* Ocupa el ancho completo en dispositivos más pequeños */
    text-align: center; /* Centra el texto en dispositivos más pequeños */
}
.image-container {
    width: 70%;
    margin-top: 0px; /* Añade un poco de espacio entre el texto y la imagen */
}

   .services h3{
    font-size: 10px;    
    }
    .services h3 span{
        font-size: 10px;
    }
.map{
    margin-top: 60px;
    /*border: 2px solid red;*/
    width: 100%;    
}

   
.contactanos h2{
    font-size: 17px;
    text-align: center;
}
.certificaciones_center h2{
    font-size: 17px;
    text-align: center;
}   
.certificaciones_center h2 span{
    font-size: 17px;
    text-align: center;
}
.brands_center h2{
    font-size: 17px;
    text-align: center;
}  
.contact-container {
 display: flex;
 flex-direction: column; /* Apila los elementos en columna */
 align-items: center; /* Centra verticalmente el contenido */
 text-align: center; /* Centra horizontalmente el contenido */
}
.form{
 padding: 10%;
 padding-bottom: 1%;
 margin: auto;
}
.form input,
button {
     padding: 2.5%;
     margin: 3% 0;
     width: 80%; /* Ocupa el 100% del ancho del contenedor */
     height: 60%;
     font-size: 12px;
     margin-right: 0px;
     margin-left: 0px;
}
 .form, .form-image {
     width: 100%;
     text-align: center; /* Alinea el contenido al centro horizontalmente */
 }

 .form-image img {
     max-width: 50%;
     height: auto;
 }
 
    .footer {
        grid-template-columns: repeat(2, 1fr); /* Cambia a una disposición de 2x2 */
        padding: 5px;
        padding-bottom: 0px;
    }
    
    .footer-item {
        padding: 1px;

    }

    .footer-item h2 {
        font-size: 17px;
        padding-left: 0%;
       padding-right: 0%;
       text-align: center;

    }

    footer  li {
     text-align: center;
        height: 25px;
        margin-bottom: 1px;
        margin: auto;
    }
    .footer-item .a {
        text-align: center;
        font-size: 11px;
        padding-left: 5%;
        padding-right: 5%;
    }.log-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .log-content img {
        margin: 0; /* Resetear los márgenes de la imagen */
        width: 80%;
    }
    .log img{
        margin-top: 5%;
        width: 10%;
    }

    .log-content .nero {
        font-size: 20px; /* Ajustar el tamaño del texto */
    }
     .footer-item #af {
        text-align: left;
        font-size: 9px;
        padding-left: 0%;
        padding-right: 0%;
    }
    
}

@media screen and (max-width:450px){
    .footer-item #af {
        text-align: left;
        font-size: 8px;
        padding-left: 0%;
        padding-right: 0%;
    }
}
@media screen and (max-width: 400px) {
    /* Estilos aplicados cuando el ancho de la pantalla es igual o menor a 1000px */
    .navbar{
        display: flex;
        justify-content: center;
        align-items: center;
        align-items: center;
        margin-bottom: 3%;
    }
    .nav-links {
        list-style: none;
        display: flex;
        margin: 0;
        padding: 0;
}

    .nav-links a{
        font-size: 13px;
    }
    .nav-links li {
    margin-right: 5px; /* Espacio entre los enlaces */
    }
     .logo-container{
    margin-left: 1%;
   }
    .logo-container span{
        font-size: 20px;            
        text-align: center;
    }
   
    .logo-container img{
        width: 25%;
    }
    .nav-links li{
        margin-right: 18px;
    }
    .image-container1{
        margin-top: 30%;
    }
   .image-cell{
    max-height: 200px;
   }
    .image-cell img {
        max-width: 600px; /* Cambiado a 100% para que la imagen se ajuste al ancho de la celda */
         max-height: 100%; /* Agregado para asegurar que la imagen no exceda la altura de la celda */
    }
    .image-cell.expanded {
        flex: 3.5; /* La celda expandida tendrá un ancho mayor */
      }
        .p{
            font-size: 5px;
            top: 80%;
        }
        .over-own-1{
            top: 63%;
            left: 31%;
         }
         .over-own-2{
            top: 57%;
            left: 59%;
            width: 75%; /* Asegúrate de que el overlay cubra toda la celda */
         }
         .over-own-3{
            top: 51%;
            left: 45%;
            width: 78%; /* Asegúrate de que el overlay cubra toda la celda */
         }
         .over-own-4{
            top: 60%;
            left: 60%;
            width: 65%; /* Asegúrate de que el overlay cubra toda la celda */
         }
          .overlay h2 {
            font-size: 5px;
          }
          .overlay p {
            font-size: 6px;
          } 
          .about-container {
            flex-direction: column; /* Cambia la dirección de la columna */
            align-items: center; /* Centra los elementos en la columna */
            padding: 0px;
        }

.text-content {
    width: 90%; /* Ocupa el ancho completo en dispositivos más pequeños */
    text-align: center; /* Centra el texto en dispositivos más pequeños */
}
.image-container {
    width: 80%;
    margin-top: 0px; /* Añade un poco de espacio entre el texto y la imagen */
}

.text-content h2 {
    font-size: 17px;
    text-align: center;
}

.text-content p {
    font-size: 11px;
}
   .servicios h2{
       font-size: 13px;
       text-align: right;
       margin-left: 5%;

   }
   .services h3{
       font-size: 8px;    
   }
   .services h3 span{
        font-size: 8px;
    }
   .contactanos h2{
       font-size: 17px;
       text-align: center;
   }
   .certificaciones_center h2 span{
    font-size: 17px;
    text-align: center;
}
   .brands_center h2{
    font-size: 17px;
    text-align: center;
}  
   .contact-container {
    display: flex;
    flex-direction: column; /* Apila los elementos en columna */
    align-items: center; /* Centra verticalmente el contenido */
    text-align: center; /* Centra horizontalmente el contenido */
}
.form{
    padding: 10%;
    padding-bottom: 1%;
    margin: auto;
}
.form input,
button {
        padding: 2.5%;
        margin: 3% 0;
        width: 70%; /* Ocupa el 100% del ancho del contenedor */
        height: 60%;
        font-size: 12px;
               margin-right: 0px;
               margin-left: 0px
} 
    .form, .form-image {
        width: 100%;
        text-align: center; /* Alinea el contenido al centro horizontalmente */
    }

    .form-image img {
        max-width: 50%;
        height: auto;
    }
    
    .footer {
        grid-template-columns: repeat(2, 1fr); /* Cambia a una disposición de 2x2 */
        padding: 5px;
        padding-bottom: 0px;
    }
    
    .footer-item {
        padding: 1px;

    }

    .footer-item h2 {
        font-size: 17px;
        text-align: center;
        padding-left: 0%;
        padding-right: 0%;
    }
    li {

     text-align: center;
        height: 30px;
        margin-bottom: 1px;
        margin: auto;
    }
  
    .footer-item .a {
        text-align: center;
        font-size: 11px;
        padding-left: 5%;
        padding-right: 5%;
    }
    
    .footer-item #af {
        text-align: left;
        font-size: 8.8px;
        padding-left: 0%;
        padding-right: 0%;
    }
    .log-content img {
        width: 70%;
    }
    .log img{
        margin-top: 5%;
        width: 13%;
    }

    .log-content .nero {
        font-size: 15px; /* Ajustar el tamaño del texto */
    }
}
@media screen and (max-width: 350px){
    .logo-container span{
        font-size: 16px;            
        text-align: center;
    }
    .logo-container{
    margin-left: 0%;
   }
    .image-container1{
        margin-top: 45%;
    }
    .footer-item #af {
        text-align: left;
        font-size: 7px;
    }
}

@media screen and (max-width: 300px) {
    /* Estilos aplicados cuando el ancho de la pantalla es igual o menor a 1000px */
    .navbar{
        display: flex;
        justify-content: center;
        align-items: center;
        align-items: center;
        margin-bottom: 10%;
    }
    .nav-links {
        list-style: none;
        display: flex;
        margin: 0;
        padding: 0;
}
    .nav-links a{
        font-size: 12px;
        margin-left: 10px;
    }
    .nav-links li {
    margin-right: 5px; /* Espacio entre los enlaces */
    }
   .logo-container{
    margin-left: 1%;
   }
    .logo-container span{
        font-size: 15px;            
        text-align: center;
    }
    .logo-container img{
        width: 20%;
    }
    .nav-links li{
        margin-right: 18px;
    }
    .image-container1{
        margin-top: 34.5%;
    }
    .about-container {
        flex-direction: column; /* Cambia la dirección de la columna */
        align-items: center; /* Centra los elementos en la columna */
        padding: 0px;
    }
    .text-content{
        margin: 0px;
    }
   .text-content h2{
    text-align: center;
    font-size: 16px;
}
  .text-content p{
    font-size: 10px;
}
.servicios{
    margin-top: 5%;
    margin-bottom: 0px;
}
   .servicios h2{
        padding-right: 1px;
       font-size: 14.5px;
       text-align: center;
       margin-right: 5%;
       margin-left: 5%;
   }
   .services h3{
       font-size: 6px;    
   }
   .services h3 span{
    font-size: 6px;
}

   .contactanos h2{
       font-size: 15px;
       text-align: center;
   }
   .certificaciones_center h2{
    font-size: 15px;
    text-align: center;
}   
.certificaciones_center h2 span{
    font-size: 15px;
    text-align: center;
}
   .brands_center h2{
    font-size: 15px;
    text-align: center;
}  
   .about-container{
    margin-top: 0px;
    margin-bottom: 0px;
   }
   .contact-container {
    display: flex;
    flex-direction: column; /* Apila los elementos en columna */
    align-items: center; /* Centra verticalmente el contenido */
    text-align: center; /* Centra horizontalmente el contenido */
}

.image-container {
    width: 90%;
    margin-top: 10px; /* Añade un poco de espacio entre el texto y la imagen */
}
.certificaciones {
    margin-top: 7%;
    margin-bottom: 10%;
}
.brands{
    margin-top: 10%;
    margin-bottom: 10%;
}
.form{
    padding: 8%;
    padding-bottom: 1%;
    margin: auto;
}
.form input,
button {
    padding: 2.5%;
    margin: 3% 0;
    border-radius: 10px;
    border: 1px solid white;
    color: black; /* Establece el color del texto en negro */
    width: 80%; /* Ocupa el 100% del ancho del contenedor */
    max-width: 500px; /* Limita el ancho máximo del input */
    height: 80%;

}
    .form, .form-image {
        width: 100%;
        text-align: center; /* Alinea el contenido al centro horizontalmente */
    }

    .form-image img {
        max-width: 50%;
        height: auto;
    }
    
    .footer {
        grid-template-columns: repeat(2, 1fr); /* Cambia a una disposición de 2x2 */
        padding: 10px;
        padding-bottom: 0px;
    }
    
    .footer-item {
        padding: 1px;
    }

    .footer-item h2 {
        font-size: 15px;
        text-align: center;
        padding-left: 0%;
        padding-right: 0%;
    }

    li {
        height: 25px;
        margin-bottom: 1px;
        margin: auto;
    }
    .footer-item .a {
        text-align: center; 
        font-size: 8px;
    }
    .footer-item #af {
        text-align: left;
        font-size: 5px;
    }
    .log-content img {
        width: 50%;
    }
    .log img{
        margin-top: 5%;
        width: 13%;
    }
    .log-content .nero {
        font-size: 10px; /* Ajustar el tamaño del texto */
    }
}