/* ===============================
   OVER SECTION MET ACHTERGROND GLAS-EFFECT
================================= */
.over-section {
    position: relative; /* belangrijk voor overlay */
    padding: 5rem 2rem;

    background-image: url("images/Logo Frank achtergrond meisje zwart.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    color: #3A2A1A;
    border-radius: 12px;

    /* Schaduw voor hele sectie */
    box-shadow: 0 25px 50px rgba(0,0,0,0.85), 0 12px 30px rgba(0,0,0,0.65);
}

/* Overlay voor glas-effect */
.over-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(248, 231, 192, 0.35);
    border-radius: 12px;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: soft-light;
}

/* Content boven overlay */
.over-section > * {
    position: relative;
    z-index: 1;
}

/* ===============================
   LAYOUT AFBEELDING + TEKST
================================= */
.over-container {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    position: relative; 
}

/* Profielfoto */
.Profile-Frank-picture {
    width: 400px;
    height: auto;
    border-radius: 12px;
    object-fit: cover;

    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.6),
        0 5px 15px rgba(0, 0, 0, 0.4);
}

/* Tekst card */
.over-tekst {
    max-width: 900px;  
}

.over-tekst p {
    padding: 2rem;
    background: rgba(248, 231, 192, 0.85); /* lichte overlay */
  
    border-radius: 12px;

    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.65),
        0 5px 15px rgba(0, 0, 0, 0.45);
}

/* Mobiel */
@media (max-width: 850px) {
    .over-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .over-tekst {
        max-width: 100%;
    }
}