header {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.icono {
  width: 16px; /* Ajusta el tamaño del ícono */
  height: 16px; /* Ajusta el tamaño del ícono */
  margin-left: 8px; /* Añade espacio entre el texto y el ícono */
}


/* Menú responsive */
@media (max-width: 768px) {
  .servicios{
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Secciones */
section {
  padding: 10% 0 10% 0;
  text-align: center;
}

/*PERSONALIZADO CONTACTO*/
header {
  position: relative;
  width: 100%;
  max-height: 50vh;
  display: flex;
  align-items: center; /* Centra verticalmente */
  justify-content: flex-start; /* Alinea a la izquierda */
  overflow: hidden; /* Evita cualquier desbordamiento del contenido */
}

.contact-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ajusta la imagen al contenedor sin distorsionarse */
  z-index: 1; /* Está por debajo del texto */
}


.eslogan {
    font-size: 3vw;
}

.texto-header {
  position: relative;
  z-index: 3; /* Se asegura de estar en la capa superior */
  color: white;
  padding-left: 40px; /* Margen a la izquierda para separarlo del borde */
  width: 50%; /* O puedes ajustar con vw si prefieres */
  text-align: left;
}

/* Estilo del degradado */
.header-degradado {
    position: absolute; /* Posicionar el degradado sobre la imagen */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(49, 70, 109, 0.75);
    z-index: 1; /* Por debajo del texto pero por encima de la imagen */
}

h2{
color: #31466d;
font-size: 2vw;
}


section {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
section p{
color: #31466d;
}

section div{
  padding: 5%;
width: 40%;
text-align: left;
}

section img {
width: 40%;
padding: 5%;
--color: #31466d; /* the border color */
--border: 10px;   /* the border thickness*/
--offset: 10px;   /* control the offset*/
--gap: 5px;       /* the gap on hover */

--_c: var(--color) var(--border), #0000 0 calc(100% - var(--border)),var(--color) 0;
--_o: calc(3*var(--offset));
padding: 
  calc(var(--gap) + var(--border))
  calc(var(--gap) + var(--border) + var(--offset))
  calc(var(--gap) + var(--border) + var(--offset))
  calc(var(--gap) + var(--border));
background: 
  linear-gradient(      var(--_c)) var(--_o) var(--_o), 
  linear-gradient(90deg,var(--_c)) var(--_o) var(--_o);
background-size: calc(100% - var(--_o)) calc(100% - var(--_o));
background-repeat: no-repeat;
filter: grayscale(.4);
transition: .5s;
}
.section-left {
flex-direction: row; /* Imagen a la izquierda, texto a la derecha */
}
/* Estilo para la segunda sección (imagen derecha) */
.section-right {
flex-direction: row-reverse; /* Imagen a la derecha, texto a la izquierda */
}

@media (max-width: 768px) {
.section-left {
  flex-direction: column-reverse; /* Imagen a la izquierda, texto a la derecha */
}
/* Estilo para la segunda sección (imagen derecha) */
.section-right {
  flex-direction: column; /* Imagen a la derecha, texto a la izquierda */
}

section div{
  width: 80%;
}

section img {
  width: 90%;
  padding: 5%;
}
}