/*RESET SITE*/
*{
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
 }
 
 /*HEADER*/
 header{
     height: 100px;
     background: #1A5276; /* #4D4D5C; */
     padding: 0 50px;
     color: #fff;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 .left-section {
     display: flex;
     align-items: center;
 }
 .imagen-logo{
     height: 70px;
     width: 70px;
     margin-right: 10px; /* Add margin between logo and company name */
 }
 .nombre-empresa{
     text-transform: uppercase;
     color: #fff; /*#6cc091;*/
     font-weight: 400;
 }
 .menu {
     display: flex;
     align-items: center;
 }
 .menu a{
     color: #fff;
     text-transform: uppercase;
     text-decoration: none;
     padding: 0 10px;
     /*transition: 0.4s;*/
 }
 .mostrar-menu,
 .esconder-menu{
     font-size: 30px;
     cursor: pointer;
     display: none;
     transition: 0.4s;
 }
 .mostrar-menu{
     order: 1;
 }
 .menu a:hover,
 .mostrar-menu:hover,
 .esconder-menu:hover{
     color: #2980B9; /*#6cc091;*/
 }
 #check{
     display: none;
 }
 
 /*BANNER*/
 #banner{
     padding: 0 50px;
     background-image: url(./images/bannerempresa.jpg);
     height: 45vh;
     background-size: cover;
     background-position: center;    
 }
 #banner::before{
     content: '';
     background: rgba(77, 77, 92, 0.6);
     position: absolute;
     width: 100%;
     height: 45vh;
     left: 0;
 }
 .contenido-banner{
     position: relative;
     color: #fff;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 .contenido-banner h3 {
    font-size: 30px;
    font-weight: 400;
    padding: 10px 0px;
}

.contenido-banner h3 span:first-child {
    font-weight: 600;
}

.contenido-banner h3 span:nth-child(3) {
    font-size: 25px; /* Tamaño de fuente para el salto de línea */
  
}
 .boton-empezar{
     text-decoration: none;
     color: #fff;
     border: 1px solid #2980B9;/*#6cc091;*/
     padding: 20px 40px;
     align-self: baseline;
     transition: all 0.4s;
 }
 .boton-empezar:hover{
     background: #7FB3D5; /*#6cc09070;*/
 }

/*SERVICIOS*/
#servicios {
    padding: 50px 50px;
    display: flex;
    justify-content: center;
    text-align: center;
    /*flex-wrap: wrap;  Añadido para manejar múltiples líneas */
}
#servicios img{
    height: 100px;
    width: 100px;
    border-radius: 30%;
}
#servicios div {
    padding: 30px 30px;
    flex: 1;
    max-width: 300px; /* Añadido para limitar el ancho de los elementos */
}

#servicios div .boton-saber-mas {
    display: inline-block; /* Alinea el botón horizontalmente */
    margin-top: 15px; /* Coloca el botón al final del contenedor */
}

#servicios div h4 {
    color: #1A5276;
    font-size: 20px;
    margin: 15px 0px;
}

#servicios div p {
    color: #4d4d5c87;
    font-size: 18px;
}

.boton-saber-mas {
    text-decoration: none;
    color: #2980B9;
    padding: 10px 30px;
    border: 3px solid #2980B9;
    border-radius: 30px;
    margin-top: 15px;
    transition: all 0.4s;
    display: inline-block; /* Asegura que el botón se muestre en línea */
}

.boton-saber-mas:hover {
    background: #2980B9;
    color: #fff;
}
 
 /*ICONOS*/
 #iconos{
     padding: 0px 50px;
     background: #1A5276; /*rgba(77, 77, 92, 0.6);*/
 }
 .contenido-iconos{
     padding: 50px 50px 0px 50px;
     display: flex;
     justify-content: space-between;
     text-align: center;
 }
 .contenido-iconos div{
     flex: 1;
     margin: 20px 0px;
     border-right: 2px solid rgba(255, 255, 255, 0.2);
 }
 #icono-mobile{
     border: none;
 }
 .contenido-iconos div i{
     color: #1e279b; 
 }
 .contenido-iconos div h6{
     color: #fff;
     font-size: 20px;
     font-weight: 100;
     margin: 10px 0px;
 }
 .contenido-iconos div p{
     color: rgba(255, 255, 255, 0.55);
     font-size: 15px;
 }
 .boton-iconos{
     text-align: center;
     padding-bottom: 50px;
 }
 
 /*FORMULARIO*/
 #contacto{
     background: #1F618D ;/*#6cc091;*/
     padding: 50px 0px;
     color: #fff;
 }
 #contacto h4{
     text-align: center;
     font-size: 25px;
     margin-bottom: 20px;
 }
 #contacto form{
     max-width: 80%;
     margin: 0 auto;
 }
 .datos-form{
     display: flex;
 }
 .datos-form div{
     padding: 10px;
     flex: 1;
 }
 form label{
     display: block;
     margin-bottom: 10px;
 }
 form input,
 form textarea{
     background: #2980B9;/*#6cc091;*/
     border-radius: 10px;
     border: 2px solid #8dcca9;
     padding: 10px 5px;
     outline: 0;
     color:#fff;
     width: 100%;
 }
 form input:focus,
 form textarea:focus{
     border-color: #2980B9; /*#4bae77;*/
     box-shadow: 0 0 0 1px #2980B9; /*#4bae77;*/
 
 }
 form input::placeholder,
 form textarea::placeholder{
     color: #fff;
 }
 .mensaje{
     display: flex;
     flex-direction: column;
     padding: 10px;
 }
 .boton-formulario .boton-saber-mas{
     display: block;
     border: 1px solid #fff;
     color: #fff;
     text-align: center;
     transition: 0.4s;
 }
 .boton-formulario .boton-saber-mas:hover{
     background: #7FB3D5; /*#4fa776ad;*/
 }
 
 /*FOOTER*/
 footer{
     background: #1A5276; /*#4D4D5C;*/
     color: #cccccc4a;
     text-align: center;
     padding: 10px 0px;
 
 }
 
 /*RESPONSIVE*/
 @media(max-width: 768px){
     /*HEADER*/
     .mostrar-menu,
     .esconder-menu{
         display: block;
     }
     .menu{
         position: fixed;
         width: 100%;
         height: 100vh;
         background: #1A5276; /* #4D4D5C;*/
         right: -100%;
         top: 0;
         text-align: center;
         padding: 100px 0px;
         z-index: 100;
         transition: 0.8s;
         flex-direction: column;
     }
     .menu a{
         display: block;
         padding: 20px;
     }
     .esconder-menu{
         position: absolute;
         top: 40px;
         right: 40px;
     }
     #check:checked ~ .menu{
         right: 0;
     }
 
     /*SERVICIOS*/
     #servicios{
         flex-direction: column;
     }
 
     /*ICONOS*/
     .contenido-iconos{
         flex-direction: column;
     }
     .contenido-iconos div{
         border: none;
     }
 
     /*FORMULARIO*/
     .datos-form{
         flex-direction: column;
     }
 }