/* Services Hero Section */
.services-heroM {
    position: relative;
    width: 100%;
    height: 45vh; /* Adjust based on preference */
    background-image: url('../img/Psicoanalisis.png'); /* Replace with the actual image path */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.services-overlayM {
    position: relative;
/*    background: rgba(0, 0, 0, 0.5);  Dark overlay for readability */
    color: white;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    max-width: 80%;
    font-size: 1.2rem;
    line-height: 1.5;
/*    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
}

.services-overlayM h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.4;
}








.featured-servicesM {
    padding: 50px 20px;
    background-color: #fff;
    text-align: center;
    width: 80%; /* Limitar el ancho total de la sección */
    margin: 0 auto; /* Centrar la sección */
}

.featured-servicesM h2 {
    font-size: 2.5rem;
    color: #315428;
    margin-bottom: 30px;
}

.service-rowM {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px; /* Reducir espacio entre filas */
    gap: 10px; /* Menor separación entre imagen y texto */
}

.service-imageM {
    flex: 1.5; /* Imagen más grande */
    max-width: 600px; /* Limitar ancho máximo */
}

.service-imageM img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.service-textM {
    flex: 1; /* Texto más estrecho */
    max-width: 400px; /* Limitar ancho máximo */
    text-align: left;
    margin: 0; /* Eliminar márgenes adicionales */
}

.service-textM h3 {
    font-size: 1.8rem;
    color: #315428;
    margin-bottom: 10px; /* Reducir espacio entre título y párrafo */
}

.service-textM p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 8px; /* Reducir espacio entre párrafos */
}












.how-we-workM {
    text-align: center;
    padding: 50px 20px;
    background-color: #f9f9f9;
}

.how-we-workM h2 {
    font-size: 2.5rem;
    color: #315428;
    margin-bottom: 30px;
}

.steps-containerM {
    display: flex;
    flex-wrap: wrap; /* Adaptable en pantallas pequeñas */
    justify-content: center;
    gap: 20px; /* Espacio entre pasos */
}

.stepM {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    max-width: 300px; /* Limitar ancho de cada tarjeta */
    text-align: center;
    flex: 1 1 300px; /* Adaptable al ancho disponible */
}

.stepM .iconM img {
    width: 90px;
    height: 90px;
    margin-bottom: 5px;
}

.stepM h3 {
    font-size: 1.5rem;
    color: #315428;
    margin-bottom: 10px;
}

.stepM p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
}
















/* Responsive Adjustments */
@media (max-width: 768px) {
    .services-heroM {
        height: 30vh; /* Adjust height for smaller devices */
    }

    .services-overlayM h2 {
        font-size: 1.5rem;
    }
	
	    .featured-servicesM {
        width: 95%; /* Ajustar el ancho en pantallas más pequeñas */
    }

    .service-rowM {
        flex-direction: column;
        text-align: center;
        margin-bottom: 20px; /* Ajustar espacio entre filas en móviles */
    }

    .service-imageM {
        max-width: 100%;
        margin-bottom: 10px; /* Separación mínima en móviles */
    }

    .service-textM {
        max-width: 100%;
        text-align: center;
    }
	
	    .featured-servicesM {
        width: 90%; /* Ajustar ancho al 90% en tablets */
        padding: 40px 15px; /* Reducir padding */
    }

    .featured-servicesM h2 {
        font-size: 2rem; /* Ajustar tamaño del título */
        margin-bottom: 25px;
    }

    .service-rowM {
        flex-direction: column; /* Columnar en pantallas más pequeñas */
        align-items: center;
        margin-bottom: 20px; /* Reducir espacio entre filas */
        gap: 15px; /* Ajustar espacio entre imagen y texto */
    }

    .service-imageM {
        max-width: 100%; /* Imagen ocupa todo el ancho */
        margin-bottom: 15px; /* Espacio entre imagen y texto */
    }

    .service-textM {
        max-width: 100%; /* Texto ocupa todo el ancho */
        text-align: center; /* Centrar texto */
    }

    .service-textM h3 {
        font-size: 1.5rem; /* Reducir tamaño del título */
        margin-bottom: 8px;
    }

    .service-textM p {
        font-size: 0.9rem; /* Reducir tamaño del párrafo */
        line-height: 1.5;
    }
	
	    .steps-containerM {
        gap: 10px; /* Ajustar espacio entre pasos */
    }

    .stepM {
        max-width: 300px; /* Ligeramente más ancho para tablets */
        padding: 20px; /* Mayor espacio interno */
    }

    .stepM .iconM img {
        width: 55px;
        height: 55px;
    }

    .stepM h3 {
        font-size: 1.4rem;
    }

    .stepM p {
        font-size: 1rem;
    }


	
}






@media (max-width: 428px) {
    .services-heroM {
        height: 25vh;
		margin-top: 90px
    }

    .services-overlayM h2 {
        font-size: 1.2rem;
    }
	
	
	    .featured-servicesM {
        width: 95%; /* Ajustar ancho al 95% en celulares */
        padding: 30px 10px; /* Reducir padding */
    }

    .featured-servicesM h2 {
        font-size: 1.8rem; /* Reducir tamaño del título */
        margin-bottom: 20px;
    }

    .service-rowM {
        flex-direction: column; /* Columnar en celulares */
        align-items: center;
        margin-bottom: 15px; /* Reducir espacio entre filas */
        gap: 10px; /* Ajustar espacio entre imagen y texto */
    }

    .service-imageM {
        max-width: 100%; /* Imagen ocupa todo el ancho */
        margin-bottom: 10px; /* Espacio entre imagen y texto */
    }

    .service-textM {
        max-width: 100%; /* Texto ocupa todo el ancho */
        text-align: center; /* Centrar texto */
    }

    .service-text h3 {
        font-size: 1.4rem; /* Reducir tamaño del título */
        margin-bottom: 6px;
    }

    .service-textM p {
        font-size: 0.85rem; /* Reducir tamaño del párrafo */
        line-height: 1.4;
    }
	
	 .how-we-workM h2 {
        font-size: 1.8rem; /* Reducir título general */
    }

    .steps-containerM {
        flex-direction: column; /* Apilar pasos verticalmente */
        align-items: center;
        gap: 15px;
    }

    .stepM {
        max-width: 100%; /* Ocupar todo el ancho disponible */
        padding: 15px;
    }

    .stepM .iconM img {
        width: 45px; /* Íconos más pequeños */
        height: 45px;
    }

    .stepM h3 {
        font-size: 1.2rem;
    }

    .stepM p {
        font-size: 0.9rem;
    }
}