/* Main info */
.main-info{
    background: url("../images/fotoprincipal.jpg");
    background-size: cover; /* La imagen cubre toda la sección */
    background-position: center; /* Centra la imagen */
    height: 55vh; /* La altura de la sección será el 100% de la altura de la ventana */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    color: white; /* Color del texto */
    text-align: center; /* Centra el texto */
}
.main-info-content{
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente para mejorar la legibilidad del texto */
    border-radius: 10px; /* Bordes redondeados */
}
.main-info-content h1 {
    font-size: 35px;
}
.main-info-content p{
    font-size: 17px;
}


/* Estilos para la sección principal de servicios */
.main-services {
    background-color: #fff;
    text-align: center;
}
.main-services h2 {
    margin: 0;
    padding: 20px;
    font-size: 2rem;
    color: #333;
}

/* Contenedor principal que tiene la imagen y el texto */
.main-services-content {
    display: flex;
    justify-content: space-between; /* Coloca la imagen a la izquierda y el texto a la derecha */
    align-items: center; /* Centra verticalmente la imagen y el texto */
    gap: 30px; /* Espacio entre la imagen y el texto */
    flex-wrap: wrap; /* Permite que el contenido se acomode en pantallas pequeñas */
    padding: 0 20px 20px 20px;
}

/* Estilo para la imagen */
.main-services-content img{
    width: 45%; /* La imagen ocupará el 50% del ancho */
    height: auto;
    border-radius: 10px; /* Bordes redondeados para la imagen */
    object-fit: cover; /* Asegura que la imagen mantenga proporción sin deformarse */
}

/* Estilo para el texto */
.main-services-text {
    width: 50%; /* El texto ocupará el 50% restante del ancho */
    text-align: left; /* Alinea el texto a la izquierda */
    font-size: 1.2rem;
    color: #555;
    line-height: 1.6;
}

/* Marcas */
.marcas h2{
    margin: 0;
    padding: 20px;
    text-align: center;
    font-size: 30px;
}
.marcas{
    background: #fff;
}
.marcas-content{
    display: flex;
    justify-content: space-around; /* Coloca las marcas a la izquierda y el mapa a la derecha */
    align-items: center; /* Centra verticalmente las marcas y el mapa */
    gap: 20px; /* Espacio entre las marcas y el mapa */
    padding: 0 20px 20px 20px;
}
.marcas-content img{
    width: 250px;;
}
#daiken{
    width: 400px;
}

@media screen and (max-width: 980px){
    .marcas-content img{
        width: 150px;
    }
} 


@media screen and (max-width: 850px) {
    .main-services-content {
        flex-direction: column; /* Coloca la imagen y el texto uno debajo del otro */
        align-items: center;
        text-align: center; /* Centra el texto */
    }

    .main-services-content img {
        width: 75%; /* Hace la imagen más pequeña en pantallas pequeñas */
        margin-bottom: 20px; /* Añade un espacio debajo de la imagen */
    }

    .main-services-text {
        width: 90%; /* Hace el texto más ancho */
        font-size: 1rem; /* Reduce el tamaño del texto en pantallas pequeñas */
    }
}

@media screen and (max-width: 768px) {
    .marcas-content{
        flex-direction: column;
        gap: 40px;
    }
    #daiken{
        width: 300px;
    }
}