*{
	padding: 0;
	margin: 0;
}

.contendor-nuestro{
	padding: 0 0;
    width: 90%;
    max-width: 1200px;
    margin: auto;
   	overflow: hidden;
	color: #fff; 
	
}
.hero{
	width: 100%;
	height: 500px;
	position: relative;
	margin: 100px auto;
	margin-top: -10px;
	font-size: 18px;
	
}
.btn-box{
 	display: flex;
	border-bottom: 1px  solid #ccc;
	background: #021353;
	
}
.botones{
	background-color: #2e86de; /* Color de fondo del botón */
    color: white; /* Color del texto del botón */
    border: none; /* Quitamos el borde para un diseño más limpio */
    padding: 5px 10px; /* Ajustamos el espaciado interno */
    margin: 1px; /* Margen entre botones */
    cursor: pointer; /* Cambiamos el cursor al pasar sobre el botón */
}

.btn-box button{
	background: transparent;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	margin-right: 50px;
	font-size: 20px;
	font-weight: bold;
}

.btn-box button:hover{
	color: #ff7846;

}

.content-right img{
	max-width: 80%; /* Ancho máximo de 400 píxeles */
    max-height: 80%; /* Altura máxima de 400 píxeles */
    width: auto; /* Ajuste automático del ancho */
    height: auto; /* Ajuste automático de la altura */
	
    display: block;
    margin: 0 auto;

	
    border-radius: 15px;


}
.contenido{
	display: flex;
	justify-content: center;
	text-align: justify;
	margin: 0 auto ;
	position: absolute;
	transform: translateX(100%);
	transition: 0.3s;
	flex-wrap: wrap;
    justify-content: space-between;	
    background: #468189;
	/*
    background: #373B44;  /* fallback for old browsers */
	/*background: -webkit-linear-gradient(to right, #4286f4, #373B44);  /* Chrome 10-25, Safari 5.1-6 */
	/*background: linear-gradient(to right, #4286f4, #373B44); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    padding: 20px;
}


#contenido1{
	transform: translateX(0);
	
}
.content-left{
	flex-basis: 60%;
   
	
}
.content-right{
	flex-basis: 40%;
	text-align: center;
  
}


.content-left {
    flex: 1;
    padding: 0px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-y: auto; /* Habilitar scroll vertical cuando el contenido excede el contenedor */
    max-height: 500px; /* Altura máxima del contenedor para mostrar el scroll */
	
}
#contenido2 {
    /* ... otros estilos ... */
    display: grid;
    grid-template-columns: repeat(2, 1fr) ;
    grid-template-rows: repeat(2, 1fr) ;
	gap: 20px; /* Espacio entre las cajas */

    overflow-y: auto; /* Habilitar scroll vertical cuando el contenido excede el contenedor */
    max-height: 500px; /* Altura máxima del contenedor para mostrar el scroll */
  }

  #contenido3 {
    /* ... otros estilos ... */
    display: grid;
    grid-template-columns: repeat(2, 1fr) ;
    grid-template-rows: repeat(2, 1fr) ;
	gap: 20px; /* Espacio entre las cajas */

    overflow-y: auto; /* Habilitar scroll vertical cuando el contenido excede el contenedor */
    max-height: 500px; /* Altura máxima del contenedor para mostrar el scroll */
  }

.content-box {
    display: flex;
    flex-direction: column;
}

/* Media query para dispositivos móviles o pantallas pequeñas */
@media screen and (max-width: 768px) {
    #contenido2 {
        display: block; /* Cambia a un diseño de bloques */
    }

    .content-box {
        margin-bottom: 20px; /* Añade un margen entre las cajas */
    }
}