/* hero.css — Sufi Magazine hero component v2 */

.home-hero{

    position:relative;
    width:100%;
    min-height:50vh;      /* minimaal schermhoogte */
    height:auto;          /* mag groeien */
    display:flex;
    align-items:center;
    padding:6rem 8vw;
    overflow:hidden;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    background-color:#f8f4ec;
}

.home-hero-fader{
    position:absolute;
    inset:0;
    background:#000;
    opacity:0;
    transition:opacity 2.5s ease;
    pointer-events:none;
    z-index:1;
}

.home-hero-content{
    position:relative;
    z-index:2;
    max-width:620px;
    padding:2.5rem;
}

.home-hero-content, .home-hero-content h2, .home-hero-content h3 {
	text-shadow: 2px 2px 3px rgba(0,0,0,0.48);
	color: white;
	max-width: 90vh;
}

.button-hero {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

@media (max-width:768px){

    .home-hero{
        min-height:20vh;
        padding:3rem 2rem;
        align-items:flex-end;
    }

    .home-hero-content{
        max-width:none;
        width:100%;
        padding:1.8rem;
    }

}