/* POPUP CONTAINER */

.hero-popup{
    position:fixed;
    inset:0;
    z-index:9999;

    opacity:0;
    visibility:hidden;

    transition:opacity .25s ease;
}

/* ACTIEVE POPUP */

.hero-popup.active{
    opacity:1;
    visibility:visible;
}

/* OVERLAY */

.hero-popup-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.6);
}

/* POPUP BOX */

.hero-popup-inner{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);

    background:#fff;
    max-width:900px;
    width:90%;

    position:relative;

    border-radius:6px;
    overflow:hidden;
}

/* CONTENT FLEX */

.hero-popup-content{
    display:flex;
    gap:40px;
}

/* AFBEELDING */

.hero-popup-image{
    width:45%;
    aspect-ratio:1;

    background-size:cover;
    background-position:center;
}

/* TEKST */

.hero-popup-text{
    width:55%;
    padding:40px;
}

/* KNOPPEN */

.hero-popup-buttons{
    margin-top:20px;
}

.hero-btn{
    display:inline-block;
    padding:12px 20px;
    text-decoration:none;
    font-weight:600;
}

/* PRIMARY BUTTON */

.hero-btn.primary{
    background:#617100;
    color:#fff;
}

/* SECONDARY BUTTON */

.hero-btn.secondary{
    background:#eee;
	color: #303030;
}

/* SLUITKNOP */

.hero-popup-close{
    position:absolute;
    top:15px;
    right:15px;

    font-size:26px;
    border:0;
    background:none;

    cursor:pointer;

    z-index:20;
    line-height:1;
}

/* MOBIEL */

@media (max-width:900px){

    .hero-popup-content{
        flex-direction:column;
    }

    .hero-popup-image{
        width:100%;
        aspect-ratio:1.2;
    }

    .hero-popup-text{
        width:85%;
        padding:25px;
    }

}