/****************************************************************************************
                                        HEADER
****************************************************************************************/

.container_1 {
    width: 100%;
    margin-top: 20px;
    padding: 0px;
}

.logo_container {
    display: flex;
    align-items: center;
    background-color: #DA70D6;
    height: 170px; 
    padding: 10px;
}

.logo_container h1 {
    display: inline-block;
    color: white;
    margin-left: 15px;
    font-size: 3em;
    font-weight: 100;
}

.row_1 {
    background-color: #DA70D6;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between; /* Zet het logo links en de navbar rechts */
    padding: 10px 50px; /* Geeft wat ruimte aan de zijkanten */
}

.menu  {
    display: flex;
    flex-direction: row;
    max-width: 600px;
    list-style-type: none;
    margin-top: 85px;
    padding-right: 30px;
}

.menu a {
    color: white;
    text-decoration: none;
    padding-left: 30px;
}

.off-screen-menu    {
    background-color: rgb(34, 37, 49);
    height: 100vh;
    width: 100%;
    max-width: 450px;
    position: fixed;
    top: 0;
    right: -450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 3rem;
    transition: .3s ease;
}

.off-screen-menu.active {
    right: 0;
}

.ham-menu   {
    height: 50px;
    width: 50px;
    margin-left: auto;
    position: relative;
}

.ham-menu span {
    height: 5px;
    width: 100%;
    background-color: white;
    border-radius: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .3s ease; 
}

.ham-menu span:nth-child(1) {
    top: 25%;
}

.ham-menu span:nth-child(3) {
    top: 75%;
}

#logo {
    height: 150px; 
    width: auto;
}

.header_image img {
    width: 100%;
    filter: grayscale(45%);
    max-height: 800px;
}

/*************************************************************************************
                            Blok 2 WAT WIJ DOEN
**************************************************************************************/

body    {
    margin: 0;
    font-family: sans-serif, Montserrat;
    font-weight: 100;
}

.container {
    max-width: 1200px; 
    margin-top: 20px;
    margin-left: auto;  
    margin-right: auto; 
    padding: 0 20px;
}

.row_2  {
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: start; /* Zorgt dat tekst en beeld verticaal mooi uitlijnen */
    padding-top: 60px;
    width: 100%;
    gap: 60px;
}

.tekstvak_2 {
    max-width: 600px; 
    max-height: 630px;
    line-height: 1.6;
    font-weight: 100;
    color: white;
    margin-left: 40px;
    background-color: #DA70D6;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 5px;
}

.tekstvak_2 h1 {
    font-weight: 100;
    margin-top: 0;
    margin-bottom: 21.440;
    color: white;
}

.tekstvak_2 a {
    color: white;
}

.tekstvak_1 {
    height: 400px;
    font-weight: 100;
    line-height: 1.6;
    color: white;
    margin-left: 40px;
    background-color: #DA70D6;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 5px;
}

.tekstvak_1 h1 {
    font-weight: 100;
    margin-top: 0;
    margin-bottom: 21.440;
    color: white;
}

.tekstvak_1 a   {
    color: white;
}

.tekstvak_1 button  {
    border-radius: 5px; 
    padding: 8px;
    margin-left: 210px;
    background-color:  #DA70D6;
}

.image_container_1 {
    display: flex;
    justify-content: center;
}

.image_container_1 img  {
    object-fit: cover;
    width: 100%;
    height: 630px;
}

#client_begeleider  {
    border-radius: 5px 5px 5px 5px;
}

/**********************************************************************************************
                                Blok 3 Aanbod activiteiten
**********************************************************************************************/

.tekstvak_3 {
    height: 500px;
    font-weight: 100;
    line-height: 1.6;
    color: white;
    margin-left: 40px;
    background-color: #DA70D6;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 5px;
}

.tekstvak_3 h2 {
    font-weight: 100;
    margin-top: 0;
    margin-bottom: 21.440;
    color: white;
}

.titel_tekstvak {
    width: 100%;
}

.titel_activiteiten h2  {
    font-weight: 100;
}

.image_container_2 {
    display: flex;
    flex: 1;
    justify-content: center;
}

.image_container_2 img  {
    object-fit: cover;
    width: 100%;
    height: 400px;
    border-radius: 0px 0px 0px 5px;
}

.image_container_3 {
    display: flex;
    flex: 1;
    justify-content: center;
}

.image_container_3 img  {
    object-fit: cover;
    width: 100%;
    height: 400px;
    border-radius: 0px 0px 5px 0px;
}

.button     {
    color: black;
    text-decoration: none;
}

.titel_activiteiten   {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    background-color: #DA70D6;
    color: white;
    border-radius: 5px 5px 0px 0px;
}

.images   {
    display: flex;
}

.tekstvak_4 {
    height: 500px;
    font-weight: 100;
    line-height: 1.6;
    color: white;
    margin-left: 40px;
    background-color: #DA70D6;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 5px;
}

.tekstvak_4 h1 {
    font-weight: 100;
    margin-top: 0;
    margin-bottom: 21.440;
    color: white;
}    

.logo_container_2 {
    display: flex;
    align-items: center;
    background-color: #DA70D6;
    height: 170px; 
    padding: 10px;
}

#logo_2  {
    height: 150px; 
    width: auto;
    margin-left: 50px;
}

.footer_vak  {
    margin-top: 60px;
    background-color: #DA70D6;
    color: white;
    display:grid;
    grid-template-columns: 10% 20% 20% 20% 20% 10%;
    width: 1920px;
}

.footer_tekst    {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 200px;
    font-family: sans-serif, Montserrat;
}

#adres  {
    line-height: .8;
    padding-left: 40px;
    font-size: 14px;
    padding-top: 15px;
}

/***********************************************************************************************
                                    Over ons pagina
************************************************************************************************/

.row_3  {
    display: grid;
    align-items: start; /* Zorgt dat tekst en beeld verticaal mooi uitlijnen */
    padding-top: 60px;
    max-width: 100%;
    gap: 60px;
}

.tekstvak_5 {
    display: flex;
    justify-content: center;
    line-height: 1.6;
    font-weight: 100;
    color: white;
    margin-left: 40px;
    background-color: #DA70D6;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 5px;
}

.tekstkader_5   {
    max-width: 800px;
    padding-top: 20px;
    padding-right: 50px;
    padding-bottom: 20px;
    padding-left: 50px;
}

.tekstkader_5  h1  {
    font-weight: 100;
}

.tekstkader_5  p {
    font-weight: 100;
    font-size: 15px;
}

.tekstvak_6 {
    display: flex;
    justify-content: center;
    line-height: 1.6;
    font-weight: 100;
    color: white;
    margin-left: 40px;
    background-color: #DA70D6;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 5px;
}

.tekstkader_6  p {
    font-weight: 100;
    font-size: 15px;
}

.header_image_2 {
    display: block;
    background-image: url("../images/header_2b.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: grayscale(20%);
    height: auto;
    max-width: 100%;
    aspect-ratio: 16/9;
}

.form_vak {
    display: flex;
    justify-content: center;
    line-height: 1.6;
    font-weight: 100;
    color: white;
    margin-left: 40px;
    background-color: #DA70D6;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 5px;
}

form label, input, textarea    {
    width: 200px;
}

/*********************************************************************************************
                                    reviews
*********************************************************************************************/

.row_4  {
    background-image: url("../images/regio_Amsterdam_2.jpg");
    background-repeat: no-repeat;
    height:800px;
}

.cirkel {
  width: 15px;
  height: 15px;
  background-color: #ec2a11; /* Mooi blauw kleurtje */
  border-radius: 50%;        /* Dit maakt het een cirkel */
  position: absolute;
  top: 82%;
  left: 30%;
  cursor: pointer;           /* Zorgt voor een handje als je erover hoovert */
}

/* De tekst standaard verbergen */
.tekst {
  display: none;
  margin-top: 10px;
  font-family: sans-serif;
}

.tekst.actief {
  display: block;
}

/*********************************************************************************************
                                    formulier
**********************************************************************************************/
.row_3 .form_vak   {
    padding-top: 60px;
    padding-bottom: 60px;
}


.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    max-width: 400px; /* Optioneel: hiermee voorkom je dat de velden super breed worden */
}

/* Zorg dat de checkbox juist NAAST de tekst staat, maar wel strak uitgelijnd */
.checkbox-group {
    flex-direction: row-reverse; /* Zet het vakje links en de tekst rechts */
    justify-content: flex-end;
    align-items: center;
    gap: 10px; /* Ruimte tussen het vierkantje en de tekst */
}

/* Optioneel: styling voor de textvelden om het modern te maken */
input[type="text"], input[type="email"], textarea {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#indicatie_PGB  {
    position: relative;
    right: 25%;
}

#indicatie_WLZ  {
    position: relative;
    right: 25%;
}

.hp-field {
    position: absolute;
    left: -5000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/**********************************************************************************************
                                    activiteiten pagina
***********************************************************************************************/
























/**********************************************************************************************
                                    media queries
***********************************************************************************************/

@media (max-width:1170px)   {
    
    .menu   {
    flex-direction: column;
    margin-top: 10px;
    }


    .menu a {
    padding-top: 20px;
    }

    }

@media (max-width:992px)    {
    
    .row_2, .row_3  {
        display: flex;
        flex-direction: column;
    }

    .tekstvak_2 {
        max-width: 500px;
    }

     .tekstvak_2 h1 {
        font-size: 18px;
    }

    .tekstvak_2 p, li {
        font-size: 14px;
    }

     .tekstvak_3 {
        max-width: 500px;
    }

    .titel_activiteiten {
        max-width: 500px;
    }


    .image_container_1  {
    width: 500px;
    height: 400px;
    margin-left: 40px;
    padding:0%;
    }

    .image_container_1 img  {
    object-fit: cover;
    width: 100%;
    height: 400px;
    }

    .image_container_2 img  {
    object-fit: cover;
    max-width: 250px;
    height: 400px;
    border-radius: 0px 0px 0px 5px;
}
    .image_container_3 img  {
    object-fit: cover;
    max-width: 250px;
    height: 400px;
    border-radius: 0px 0px 0px 5px;
}


    .column_2   {
    margin-left: 40px;
    }

}

@media (max-width:770px)   {
    
    .menu   {
    flex-direction: column;
    margin-top: 10px;
    max-width: 150px;
    }
    .logo_container h1  {
        font-size: 25px;
    }
}


@media (max-width:770px)   {
    
    .menu   {
    flex-direction: column;
    margin-top: 10px;
    max-width: 150px;
    }

    .menu a  {
    font-size: 12px;    
    }
    
    .logo_container h1  {
        font-size: 18px;
    }
}

@media (max-width:500px)   {
    
     
    .logo_container h1  {
        display: none;
    }
}