:root {
       --bg-main: #CFEAE4;
       /* mintgroen */
       --bg-neutral: #FDFBF6;
       /* crèmewit */
       --accent: #E2BFA4;
       /* warm pastel oranje/roze */
       --accent-sec: #A5D1CA;
       /* zacht pastelblauw */
       --text-dark: #7C6651;
       /* zacht donkerbruin */
       --title: #4F7B74;
       /* donker pastelgroen/blauw */
       --alert: #F4A89D;
       /* licht koraal */
   }

   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   body {
       font-family: 'Arial', sans-serif;
       line-height: 1.6;
       color: var(--text-dark);
       background-color: var(--bg-main);
       overflow-x: hidden;

   }

   /* Header Styles */
   .header {
       background: var(--bg-neutral);
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
       padding: 1rem 2rem;
       position: sticky;
       top: 0;
       z-index: 1000;
   }

   .header-container {
       max-width: 1200px;
       margin: 0 auto;
       display: flex;
       align-items: center;
       justify-content: space-between;
   }

   .logo-container {
       display: flex;
       align-items: center;
       gap: 1rem;
   }

   .logo {
       height: 80px;
       width: auto;
       transition: transform 0.3s ease;
   }

   .logo:hover {
       transform: scale(1.05);
   }

   .practice-name {
       font-size: 1.2rem;
       font-weight: bold;
       color: var(--title);
   }

   /* Navigation */
   .nav-menu {
       display: flex;
       list-style: none;
       gap: 2rem;
   }

   .nav-item {
       position: relative;
   }

   .nav-link {
       text-decoration: none;
       color: var(--text-dark);
       font-weight: 500;
       padding: 0.5rem 0;
       transition: color 0.3s ease;
       position: relative;
   }

   .nav-link:hover {
       color: var(--accent);
   }

   .nav-link::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 0;
       width: 0;
       height: 2px;
       background: var(--accent);
       transition: width 0.3s ease;
   }

   .nav-link:hover::after {
       width: 100%;
   }

   /* Dropdown menu */
   .sub-menu {
       position: absolute;
       top: 100%;
       left: 0;
       background: #fff;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
       min-width: 200px;
       opacity: 0;
       visibility: hidden;
       transform: translateY(-10px);
       transition: all 0.3s ease;
       border-radius: 8px;
       z-index: 1000;
   }

   .nav-item:hover .sub-menu {
       opacity: 1;
       visibility: visible;
       transform: translateY(0);
   }

   .sub-menu li {
       padding: 0;
   }

   .sub-menu .nav-link {
       padding: 0.8rem 1rem;
       display: block;
       border-bottom: 1px solid #f0f0f0;
   }

   .sub-menu .nav-link:last-child {
       border-bottom: none;
   }

   /* Hero Section */
   .hero {
       background: var(--bg-main);
       padding: 4rem 2rem;
       text-align: center;
   }

   .hero-content {
       position: relative;
       padding-top: 2rem;
       z-index: 1;
       padding-bottom: 2rem;
       min-height: 300px;
   }

   .hero-content img {
       position: absolute;
       width: 15vw;
       /* schaalt mee met viewport-breedte */
       max-width: 180px;
       /* zodat ze niet te groot worden op grote schermen */
       height: auto;
       opacity: 0.95;
       z-index: -1;
       transition: transform 0.3s;
   }


   .hero-content img:hover {
       transform: scale(1.07) rotate(1deg);
   }

   .hero-content img:nth-child(1) {
       top: -5%;
       left: 15%;
       transform: rotate(-6deg);
   }

   .hero-content img:nth-child(2) {
       top: -8%;
       left: 55%;
       transform: rotate(8deg);
   }

   .hero-content img:nth-child(3) {
       top: 25%;
       left: 5%;
   }

   .hero-content img:nth-child(4) {
       top: 40%;
       left: 70%;
   }

   .hero-content img:nth-child(5) {
       width: 55vw;
       /* grote decoratieve shape → schaal als brede achtergrond */
       max-width: 700px;
       top: 35%;
       left: 20%;
   }

   .hero-content img:nth-child(6) {
       top: 0%;
       left: 90%;
       transform: rotate(-4deg);
   }




   .hero-title {
       font-size: 2.5rem;
       color: var(--title);
       margin-bottom: 1rem;
   }

   .hero-subtitle {
       font-size: 1.2rem;
       color: var(--text-dark);
       margin-bottom: 2rem;
   }

   /* Main Content */
   .main-content {
       max-width: 1200px;
       margin: 2rem auto;
       padding: 0 2rem;
   }

   .section {
       margin-bottom: 3rem;
   }

   .section-title {
       font-size: 2rem;
       color: #009fe3;
       text-align: center;
       margin-bottom: 2rem;
   }

   /* Therapist Profile */
   .therapist-profile {
       text-align: center;
       padding: 2rem;
   }

   .therapist-image {
       width: 150px;
       height: 150px;
       border-radius: 50%;
       object-fit: cover;
       margin: 0 auto 1rem;
       border: 4px solid #009fe3;
   }

   .therapist-name {
       font-size: 1.5rem;
       color: #333;
       margin-bottom: 0.5rem;
   }

   .therapist-role {
       color: #666;
       margin-bottom: 1rem;
   }

   /* Cookie Popup */
   #cookie-popup {
       position: fixed;
       bottom: 20px;
       left: 20px;
       right: 20px;
       background: var(--bg-neutral);
       border: 2px solid var(--accent);
       padding: 20px;
       box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
       display: none;
       z-index: 1000;
       border-radius: 15px;
       font-family: 'Arial', sans-serif;
       font-size: 16px;
       color: var(--text-dark);
       text-align: center;
   }

   #cookie-popup button {
       background: var(--accent);
       color: white;
       border: none;
       padding: 10px 20px;
       margin-left: 10px;
       cursor: pointer;
       border-radius: 5px;
       transition: background 0.3s;
   }

   #cookie-popup button:hover {
       background: var(--accent-sec);
   }

   #cookie-popup button#decline-cookies {
       background: #dc3545;
   }

   #cookie-popup button#decline-cookies:hover {
       background: #c82333;
   }

   /* Footer */
   .footer {
       background: var(--title);
       color: var(--bg-neutral);
       padding: 3rem 2rem;
       margin-top: 4rem;
   }

   .footer-content {
       max-width: 1200px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 2rem;
   }

   .footer-section h3 {
       color: var(--accent);
       margin-bottom: 1rem;
   }

   .footer-contact {
       line-height: 1.8;
   }

   .footer-links {
       list-style: none;
       line-height: 2;
   }

   .footer-links a {
       color: white;
       text-decoration: none;
   }

   .footer-links a:hover {
       color: var(--accent-sec);
   }

   .copyright {
       text-align: center;
       padding-top: 2rem;
       border-top: 1px solid #555;
       margin-top: 2rem;
   }

   .link2 {
       color: var(--accent-sec);
   }

   .container {
       max-width: 900px;
       margin: 3rem auto;
       background: var(--bg-neutral);
       border-radius: 12px;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   }

   /* Hamburger Menu Styles */

   /* Hamburger button */
   .menu-toggle {
       display: none;
       /* Hidden on desktop */
       width: 35px;
       height: 28px;
       position: relative;
       cursor: pointer;
       background: var(--bg-neutral);
       border: none;
       z-index: 1100;
       padding: 0;
       outline: none;
       /* Remove default outline for better styling */
       transition: transform 0.3s ease;
       color: #E2BFA4;
       /* Add subtle hover effect */
   }

   .menu-toggle:hover {
       transform: scale(1.1);
   }

   .menu-toggle:focus {
       outline: 2px solid var(--accent);
       /* Accessibility: focus indicator */
   }

   .menu-toggle span {
       position: absolute;
       height: 4px;
       width: 100%;
       background: var(--bg-main);
       border-radius: 4px;
       left: 0;
       transition: all 0.4s ease;
       /* Smooth transitions for all properties */
   }

   .menu-toggle span:nth-child(1) {
       top: 0;
   }

   .menu-toggle span:nth-child(2) {
       top: 12px;
   }

   .menu-toggle span:nth-child(3) {
       top: 24px;
   }

   /* Animation to X when active */
   .menu-toggle.active span:nth-child(1) {
       transform: translateY(12px) rotate(45deg);
       background: var(--accent);
       /* Change color for active state */
   }

   .menu-toggle.active span:nth-child(2) {
       opacity: 0;
   }

   .menu-toggle.active span:nth-child(3) {
       transform: translateY(-12px) rotate(-45deg);
       background: var(--accent);
       /* Change color for active state */
   }

   #wolkjes {
       position: absolute;
       left: 1400px;
   }

   @media (max-width: 360px) {
       .hero-content img:nth-child(1) {
           top: -3%;
           left: 8%;
       }

       .hero-content img:nth-child(2) {
           top: -5%;
           left: 55%;
       }

       .hero-content img:nth-child(3) {
           top: 22%;
           left: 3%;
       }

       .hero-content img:nth-child(4) {
           top: 38%;
           left: 65%;
       }

       .hero-content img:nth-child(5) {
           width: 75vw;
           top: 40%;
           left: 10%;
       }

       .hero-content img:nth-child(6) {
           left: 82%;
       }
   }

   @media (max-width: 390px) {
       .hero-content img:nth-child(1) {
           left: 10%;
       }

       .hero-content img:nth-child(2) {
           left: 58%;
       }

       .hero-content img:nth-child(3) {
           top: 24%;
           left: 4%;
       }

       .hero-content img:nth-child(4) {
           left: 68%;
       }

       .hero-content img:nth-child(5) {
           width: 65vw;
           top: 38%;
           left: 12%;
       }

       .hero-content img:nth-child(6) {
           left: 85%;
       }
   }

   @media (max-width: 430px) {
       .hero-content img:nth-child(1) {
           left: 12%;
       }

       .hero-content img:nth-child(2) {
           left: 60%;
       }

       .hero-content img:nth-child(3) {
           top: 26%;
       }

       .hero-content img:nth-child(4) {
           top: 42%;
           left: 72%;
       }

       .hero-content img:nth-child(5) {
           width: 60vw;
           left: 15%;
       }

       .hero-content img:nth-child(6) {
           left: 88%;
       }
   }



   /* Mobile navigation behavior */
   @media (max-width: 768px) {
       .menu-toggle {
           display: block;
           /* Show on mobile */
       }

       .nav-menu {
           position: absolute;
           /* Position absolutely for overlay effect */
           top: 100%;
           left: 0;
           right: 0;
           background: var(--bg-neutral);
           box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
           border-radius: 0 0 8px 8px;
           padding: 1rem;
           max-height: 0;
           opacity: 0;
           overflow: hidden;
           transition: max-height 0.4s ease, opacity 0.4s ease;
           flex-direction: column;
           gap: 1rem;
           z-index: 1000;
       }

       .nav-menu.active {
           max-height: 500px;
           /* Adjust based on content */
           opacity: 1;
       }

       .nav-item {
           width: 100%;
       }

       .nav-link {
           display: block;
           padding: 0.8rem 0;
           border-bottom: 1px solid rgba(0, 0, 0, 0.1);
       }

       .nav-link:last-child {
           border-bottom: none;
       }

       /* Adjust sub-menus for mobile if needed */
       .sub-menu {
           position: static;
           /* Change to static for mobile accordion */
           opacity: 1;
           visibility: visible;
           transform: none;
           box-shadow: none;
           background: transparent;
           padding-left: 1rem;
           display: none;
           /* Hidden by default, toggle with JS if needed */
       }

       .nav-item:hover .sub-menu,
       .nav-item.active .sub-menu {
           display: block;
       }
   }

   body {
       font-family: 'Arial', sans-serif;
       line-height: 1.8;
       color: var(--text-dark);
       background-color: var(--bg-main);
       margin: 0;
       padding: 0;
   }

   .container {
       max-width: 900px;
       height: 850px;
       margin: 3rem auto;
       padding: 0;
       background: var(--bg-neutral);
       border-radius: 12px;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   }

   #paramediimg {
       position: sticky;
       top: 200px;
       right: 100px;
   }

   .container1 {
       max-width: 900px;
       margin: 3rem auto;
       padding: 2rem;
       background: var(--bg-neutral);
       border-radius: 12px;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   }

   h1 {
       text-align: center;
       color: var(--title);
       margin-bottom: 2rem;
   }

   .profile {
       display: flex;
       flex-wrap: wrap;
       gap: 2rem;
       align-items: center;
       justify-content: center;
   }

   .profile img {
       width: 220px;
       height: 220px;
       border-radius: 50%;
       object-fit: cover;
       border: 4px solid var(--accent-sec);
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       top: 210px;
       position: absolute;
   }

   .profile-text {
       text-align: center;
       flex: 1;
       min-width: 250px;
       max-width: 600px;
       top: 200px;
       position: relative;
   }

   /* Responsive */