body {
   margin: 0;
   font-family: Arial, sans-serif;
   height: 100%;
 }

 .page-wrapper {
   padding: 20px;
   max-width: 1200px;
   margin: 0 auto;
 }

 h1 {
   color: #004080;
 }
 
     .article-carousel-container {
       position: relative;
       overflow: hidden;
     }

     .article-carousel {
       display: flex;
       overflow-x: auto;
       scroll-behavior: smooth;
       gap: 2rem;
       padding: 1rem 2rem;
     }

     .article-carousel::-webkit-scrollbar {
       display: none;
     }

     .card {
       flex: 0 0 300px;
       background-color: #fff;
       border-radius: 1rem;
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
       overflow: hidden;
       text-decoration: none;
       color: inherit;
       transition: box-shadow 0.3s ease;
     }

     .card:hover {
       box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
     }

     .card-img {
       width: 100%;
       height: 200px;
       object-fit: cover;
     }

     .card-body {
       padding: 1.5rem;
     }

     .card-title {
       font-size: 1.2rem;
       font-weight: bold;
       margin-bottom: 1rem;
       color: #111827;
     }

     .card-text {
       color: #4b5563;
       line-height: 1.5;
       max-height: 12em;
       overflow: hidden;
     }

     .lees-meer {
       display: inline-block;
       margin-top: 0.5rem;
       color: #004080;
       font-weight: bold;
       text-decoration: none;
     }

     .lees-meer:hover {
       text-decoration: underline;
     }

     .scroll-button {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       background-color: rgba(255, 255, 255, 0.8);
       border: none;
       font-size: 2rem;
       cursor: pointer;
       padding: 0.5rem 1rem;
       z-index: 10;
       border-radius: 50%;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
       transition: background-color 0.3s ease;
     }

     .scroll-button:hover {
       background-color: rgba(240, 240, 240, 1);
     }

     .scroll-button.left {
       left: 0.5rem;
     }

     .scroll-button.right {
       right: 0.5rem;
     }

     @media (max-width: 600px) {
       .card {
         flex: 0 0 90%;
       }

       .scroll-button {
         display: none;
       }
     }
     
     .datum {
         color: #aaa;
         font-size: 0.9em;
         margin-bottom: 20px;
         margin-bottom: 40px; /* extra ruimte onder h1 */
     }
     
     .hievn_info_container {
         background: white;
         padding: 30px;
         border-radius: 12px;
         box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
         width: 550px;
         text-align: left;
         position: relative;
         margin: 40px auto; /* ← dit voegt 100px ruimte bovenaan toe */
     }
     
     .submit_button{
       width: 100%;
       padding: 12px;
       background: #004080;
       color: white;
       border: none;
       border-radius: 6px;
       cursor: pointer;
       font-size: 16px;
       transition: background 0.3s ease;
     }
     
     
     
     .hievn_container {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-top: 5px;
     }
     .hievn_container select {
         width: 32%;
     }
     .hievn_wrapper {
         text-align: left;
         width: calc(100% - 20px);
         margin: 10px auto;
         margin-right: 10px;
     }
     .hievn_wrapper label {
         display: block;
         font-weight: bold;
         margin-bottom: 5px;
         color: #333;
     }
     
     .hievn_checkbox_label {
         font-size: 16px;
         color: #333;
         margin: 8px 0;
         display: flex;
         align-items: center;
         gap: 10px;
     }
     
     .hievn_checkbox_label input[type="checkbox"] {
         width: 18px;
         height: 18px;
         accent-color: #5a67d8;
         cursor: pointer;
     }
     
   
   
   
   
   
   /* Stijl voor de hero-vaccinatie sectie */
     .hero-vaccinatie {
         background: linear-gradient(145deg, #e0f2ff, #f0f8ff);
         border-radius: 1rem;
         box-shadow: 0 6px 18px rgba(0, 64, 128, 0.1);
         padding: 2rem 2.5rem;
         margin: 3rem auto;
         max-width: 900px;
         transition: transform 0.3s ease;
     }
     
     .hero-content h1 {
         color: #004080;
         font-size: 2rem;
         margin-bottom: 1rem;
     }
     
     .hero-content h2 {
         color: #004080;
         font-size: 1.2rem;
         margin-bottom: 1rem;
     }
     
     .hero-content p {
         font-size: 1.0rem;
         line-height: 1.7;
         color: #374151;
     }
     
     .hero-content .lees-meer {
         margin-top: 1rem;
         display: inline-block;
         color: #004080;
         background-color: #e6f0ff;
         padding: 0.6rem 0rem;
         border-radius: 0.5rem;
         font-weight: 600;
         text-decoration: none;
     }
     
     .hero-content .lees-meer:hover {
         background-color: #d0e8ff;
         text-decoration: underline;
     }
     
     @media (max-width: 768px) {
         .hero-vaccinatie {
             padding: 1.5rem;
             margin: 2rem 1rem;
         }
     
         .hero-content h1 {
             font-size: 1.5rem;
         }
         
         .hero-content h2 {
             font-size: 1.2rem;
         }
         
         .hero-content p {
         007ffont-size: 1rem;
         }
     }
   
   
   
.hievn_info_wrapper label {
     display: block;
     font-weight: bold;
     margin-bottom: 8px;
     color: #004080;
     font-size: 1rem;
 }
 
 .hievn_info_wrapper input[type="text"],
 .hievn_info_wrapper input[type="email"] {
     width: 100%;
     padding-left: 10px;
     padding-rigth: 20px;
     padding-top: 15px;
     padding-bottom: 15px;
     border: 1px solid #ccc;
     border-radius: 6px;
     font-size: 1rem;
     transition: border-color 0.3s ease;
     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
     
 }
 
 a{color:var(--link);text-decoration:none}
 a:hover{text-decoration:underline}
 .submit_button{background:#2563eb;color:#fff;padding:10px 18px;border:none;border-radius:8px;cursor:pointer;font-size:1rem}
 .submit_button:disabled{opacity:0.5;cursor:not-allowed}
 .badge{display:inline-block;padding:.2rem .5rem;border-radius:999px;background:#eef2ff;color:#3730a3;font-weight:600;font-size:.75rem}

 /* akkoord-sectie */
 .terms {
   border:1px solid #eef2f6;
   padding:16px;
   border-radius:10px;
   background:#fcfeff;
   margin-bottom:18px;
 }
 label.row{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;cursor:pointer}
 input[type="checkbox"]{width:18px;height:18px;flex:0 0 auto;margin-top:3px}
 .small{font-size:0.88rem;color:var(--muted)}
 .links{font-size:0.96rem;color:var(--muted)}
 .links a{color:var(--accent);text-decoration:none}
 .links a:hover{text-decoration:underline}
 #validationMsg{color:#b00;display:none;margin-top:8px}