/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts moved to assets/css/variables.css */

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
/* Global color variables moved to assets/css/variables.css */

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
/* Nav-specific variables moved to assets/css/variables.css */

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */
.light-background {
  --background-color: #f5f5f0;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #1d3a54;
  --default-color: #f5f5f0;
  --heading-color: #f5f5f0;
  --surface-color: #2a4a64;
  --contrast-color: #f5f5f0;
}

/* Smooth scroll behaviour set in variables.css */

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

/* Make all non-heading page text a consistent 18px while leaving
   headings (h1-h6), header/nav and other UI elements untouched. We
   scope this to the main content area so sidebar/header fonts stay
   as originally designed. */
main p,
main li,
main ul,
main ol,
main a,
main span,
main small,
main label,
main .lead-text,
main .section-text p,
main .section-text li,
main .contact-row,
.pv-section .section-text p,
.pv-section .section-text li,
.container p,
.container li {
  font-size: 18px;
  line-height: var(--lh-normal);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/*-----------------------------------------------------------------
  Non-heading typography
  Ensure all non-heading text uses the same font family, weight and
  basic typographic settings. Headings (h1-h6) are intentionally
  excluded so their styles remain as configured.
-----------------------------------------------------------------*/
p,
ul,
ol,
li,
a,
span,
.lead-text,
.contact-row,
.section p,
.pv-section .section-text p,
.pv-section .section-text ul,
.pv-section .section-text li,
.container p,
.container ul,
  /* Locaties: remove default bullets and left-indent for lists inside the
     locations section only. This keeps link behavior, hover and typography
     unchanged while making the list text start flush with the text block. */
  #locaties .section-text ul,
  #locaties .section-text ul li {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.container ol,
.container li {
  font-family: var(--default-font);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  line-height: var(--lh-normal);
  /* unified non-heading font size */
  font-size: var(--fs-md);
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}
.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}
.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}
.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  background-color: var(--background-color);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0 15px;
  width: 300px;
  transition: all ease-in-out 0.3s;
  overflow-y: auto;
  z-index: 997;
  border-right: 1px solid
    color-mix(in srgb, var(--default-color), transparent 90%);

  /* Ensure consistent vertical spacing between direct children of the
     sidebar (profile img, logo, social links, nav). Using gap keeps
     spacing predictable across breakpoints. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.header .profile-img img {
  margin: 18px auto;
  display: block;
  /* Larger, responsive avatar so it is more visible in the sidebar */
  width: 180px;
  max-width: 85%;
  height: auto;
  border-radius: 50%;
  border: 10px solid color-mix(in srgb, var(--default-color), transparent 85%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.header .logo {
  line-height: 1;
  margin-bottom: 15px;
}
.header .logo img {
  max-height: 32px;
  margin-right: 8px;
}
.header .logo h1 {
  font-size: 24px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}
.header .social-links {
  margin: 0 0 20px 0;
}
.header .social-links a {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--default-color);
  margin: 0 2px;
  border-radius: 50%;
  text-align: center;
  width: 40px;
  height: 40px;
  transition: 0.3s;
}
.header .social-links a:hover {
  color: var(--contrast-color);
  background: var(--accent-color);
}
@media (min-width: 1200px) {
  .header ~ main,
  .header ~ #footer {
    margin-left: 300px;
  }
}

/* Slightly increase avatar size on large viewports where the sidebar
   has more horizontal space (sidebar width is 300px). */
@media (min-width: 1200px) {
  .header .profile-img img {
    width: 210px;
    max-width: 90%;
  }
}
@media (max-width: 1199px) {
  .header {
    left: -100%;
  }
}
.header.header-show {
  left: 0;
}
.header .header-toggle {
  color: var(--contrast-color);
  background-color: var(--accent-color);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 9999;
  transition: background-color 0.3s;
}
.header .header-toggle:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color) 90%, white 15%);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
.mobile-nav-toggle {
  display: none;
}

.navmenu {
  padding: 0;
  z-index: 9997;
}
.navmenu ul {
  list-style: none;
  padding: 0 0 20px 0;
  margin: 0;
}
.navmenu a,
.navmenu a:focus {
  color: var(--nav-color);
  padding: 15px 10px;
  font-family: var(--nav-font);
  font-size: 16px;
  font-weight: 400;
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: 0.3s;
  width: 100%;
}
.navmenu a .navicon,
.navmenu a:focus .navicon {
  font-size: 20px;
  margin-right: 10px;
}
.navmenu a .toggle-dropdown,
.navmenu a:focus .toggle-dropdown {
  font-size: 12px;
  line-height: 0;
  margin-left: auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: 0.3s;
  flex-shrink: 0;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
}
.navmenu a .toggle-dropdown:hover,
.navmenu a:focus .toggle-dropdown:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}
.navmenu a:hover,
.navmenu .active,
.navmenu .active:focus {
  color: var(--nav-hover-color);
}
.navmenu a:hover .navicon,
.navmenu .active .navicon,
.navmenu .active:focus .navicon {
  color: var(--accent-color);
}
.navmenu .active .toggle-dropdown,
.navmenu .active:focus .toggle-dropdown {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: rotate(180deg);
}
.navmenu .dropdown {
  display: block;
}
.navmenu .dropdown a,
.navmenu .dropdown a:focus {
  color: --nav-dropdown-color;
}
.navmenu .dropdown a:hover,
.navmenu .dropdown .active,
.navmenu .dropdown .active:focus {
  color: var(--nav-dropdown-hover-color);
}
.navmenu .dropdown ul {
  position: static;
  display: none;
  z-index: 99;
  padding: 5px 10px;
  margin: 5px 10px;
  background-color: var(--nav-dropdown-background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  box-shadow: none;
  transition: all 0.5s ease-in-out;
}
.navmenu .dropdown ul ul {
  background-color: rgba(33, 37, 41, 0.1);
}
.navmenu .dropdown > .dropdown-active {
  display: block;
  background-color: rgba(33, 37, 41, 0.03);
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding: 40px 0;
  position: relative;
  border-top: 1px solid
    color-mix(in srgb, var(--default-color), transparent 90%);
}
.footer .copyright p {
  margin-bottom: 0;
}
.footer .credits {
  margin-top: 4px;
  font-size: 13px;
  text-align: center;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}
#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}
.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}
.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}
.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}
/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 25px 0;
  position: relative;
}
.page-title h1 {
  font-size: 24px;
  font-weight: 700;
}
.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}
.page-title .breadcrumbs ol li + li {
  padding-left: 10px;
}
.page-title .breadcrumbs ol li + li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  overflow: clip;
}

/* Reduce vertical padding for specific content sections to tighten
   the spacing between their content blocks. This only targets the
   named sections and leaves other sections at the global spacing. */
#over-mij.section,
#lessen.section,
#tarieven.section,
#locaties.section,
#bedrijven.section,
#contact.section {
  padding-top: 32px;
  padding-bottom: 32px;
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  padding-bottom: 60px;
  position: relative;
}
.container.section-title {
  /* tighten the wrapper spacing so the title sits closer to section content
     without touching heading styles or inner content margins */
  margin-bottom: 4px;
  padding-bottom: 4px;
}
.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  /* reduced vertical gap between the section title and its content */
  margin-bottom: 8px;
  padding-bottom: 8px;
  position: relative;
}
.section-title h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  bottom: 0;
}
.section-title p {
  margin-bottom: 0;
}

/*-----------------------------------------------------------------
  Heading typography: use the same font as the logo and improve
  visual hierarchy slightly. Only affects h2/h3/h4 (section titles
  and subheadings). Body text and other structural spacing are
  intentionally left unchanged.
-----------------------------------------------------------------*/
h2,
.h2-section {
  font-family: "Avenir Next LT Pro", "Avenir Next", var(--heading-font);
}

.section-title h2 {
  /* small increase from 32px to 36px for clearer hierarchy */
  font-size: 36px;
}

/* keep the inline .h2-section behaviour but nudge sizes up a touch */
.h2-section {
  font-size: clamp(1.9rem, 3vw, 2.4rem);
}

h3 {
  font-family: "Avenir Next LT Pro", "Avenir Next", var(--heading-font);
  /* slight increase to lift subheadings above body text */
  font-size: calc(1.35rem + 0.6vw);
}

h4 {
  font-family: "Avenir Next LT Pro", "Avenir Next", var(--heading-font);
  font-size: calc(1.325rem + 0.3vw);
}

/*-----------------------------------------------------------------
  Content alignment: ensure paragraphs and list text inside
  section/content blocks are left-aligned while leaving headings
  and overall layout untouched.
  This uses selectors more specific than the general .container rule
  so it overrides the page-level centering without changing sizes.
-----------------------------------------------------------------*/
.section p,
.section .lead-text,
.section ul,
.section ol,
.section li,
.pv-section p,
.pv-section .lead-text,
.pv-section ul,
.pv-section ol,
.pv-section li,
section .container p,
section .container ul,
section .container ol,
section .container li,
.pv-section .section-text p,
.pv-section .section-text ul,
.pv-section .section-text ol {
  text-align: left;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 80px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.hero:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 70%);
  position: absolute;
  inset: 0;
  z-index: 2;
}
.hero .container {
  position: relative;
  z-index: 3;
}
.hero h2 {
  margin: 0;
  font-size: 64px;
  font-weight: 700;
}
.hero p {
  margin: 5px 0 0 0;
  font-size: 26px;
}
.hero p span {
  letter-spacing: 1px;
  border-bottom: 2px solid var(--accent-color);
}
.hero .social-links {
  margin-top: 25px;
}
.hero .social-links a {
  font-size: 24px;
  display: inline-block;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  line-height: 1;
  margin-right: 20px;
  transition: 0.3s;
}
.hero .social-links a:hover {
  color: var(--accent-color);
}
@media (max-width: 768px) {
  .hero h2 {
    font-size: 32px;
  }
  .hero p {
    font-size: 20px;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h2 {
  font-weight: 700;
  font-size: 24px;
}
.about .content ul {
  list-style: none;
  padding: 0;
}
.about .content ul li {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.about .content ul strong {
  margin-right: 10px;
}
.about .content ul i {
  font-size: 16px;
  margin-right: 5px;
  color: var(--accent-color);
  line-height: 0;
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item {
  padding: 30px;
  width: 100%;
}
.stats .stats-item i {
  color: var(--accent-color);
  display: block;
  font-size: 44px;
  float: left;
  line-height: 0;
}
.stats .stats-item .purecounter {
  /* ensure rounded corners actually clip the visible image */
  border-radius: 12px;
  overflow: hidden;
  /* make sure the background is clipped to the element's border */
  background-clip: border-box;
  color: var(--heading-color);
  font-size: 48px;
  line-height: 40px;
  display: block;
  font-weight: 700;
  margin-left: 60px;
}
.stats .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 15px 0 0 0;
  margin: 0 0 0 60px;
  font-family: var(--heading-font);
  font-size: 14px;
}

/*--------------------------------------------------------------
# Skills Section
--------------------------------------------------------------*/
.skills .progress {
  height: 60px;
  display: block;
  background: none;
  border-radius: 0;
}
.skills .progress .skill {
  color: var(--heading-color);
  padding: 0;
  margin: 0 0 6px 0;
  text-transform: uppercase;
  display: block;
  font-weight: 600;
  font-family: var(--heading-font);
}
.skills .progress .skill .val {
  float: right;
  font-style: normal;
}
.skills .progress-bar-wrap {
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  height: 10px;
}
.skills .progress-bar {
  width: 1px;
  height: 10px;
  transition: 0.9s;
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Resume Section
--------------------------------------------------------------*/
.resume .resume-title {
  color: var(--heading-color);
  font-size: 26px;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 20px;
}
.resume .resume-item {
  padding: 0 0 20px 20px;
  margin-top: -2px;
  border-left: 2px solid var(--accent-color);
  position: relative;
}
.resume .resume-item h4 {
  line-height: 18px;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 10px;
}
.resume .resume-item h5 {
  font-size: 16px;
  padding: 5px 15px;
  display: inline-block;
  font-weight: 600;
  margin-bottom: 10px;
}
.resume .resume-item ul {
  padding-left: 20px;
}
.resume .resume-item ul li {
  padding-bottom: 10px;
}
.resume .resume-item:last-child {
  padding-bottom: 0;
}
.resume .resume-item::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50px;
  left: -9px;
  top: 0;
  background: var(--background-color);
  border: 2px solid var(--accent-color);
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}
.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  margin: 0 10px;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 10px;
  transition: all 0.3s ease-in-out;
}
.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--accent-color);
}
.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}
.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}
@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 5px;
  }
}
.portfolio .portfolio-content {
  position: relative;
  overflow: hidden;
}
.portfolio .portfolio-content img {
  transition: 0.3s;
}
.portfolio .portfolio-content .portfolio-info {
  opacity: 0;
  position: absolute;
  inset: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  background: rgba(0, 0, 0, 0.6);
  padding: 15px;
}
.portfolio .portfolio-content .portfolio-info h4 {
  font-size: 14px;
  padding: 5px 10px;
  font-weight: 400;
  color: #ffffff;
  display: inline-block;
  background-color: var(--accent-color);
}
.portfolio .portfolio-content .portfolio-info p {
  position: absolute;
  bottom: 10px;
  text-align: center;
  display: inline-block;
  left: 0;
  right: 0;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}
.portfolio .portfolio-content .portfolio-info .preview-link,
.portfolio .portfolio-content .portfolio-info .details-link {
  position: absolute;
  left: calc(50% - 40px);
  font-size: 26px;
  top: calc(50% - 14px);
  color: #fff;
  transition: 0.3s;
  line-height: 1.2;
}
.portfolio .portfolio-content .portfolio-info .preview-link:hover,
.portfolio .portfolio-content .portfolio-info .details-link:hover {
  color: var(--accent-color);
}
.portfolio .portfolio-content .portfolio-info .details-link {
  left: 50%;
  font-size: 34px;
  line-height: 0;
}
.portfolio .portfolio-content:hover .portfolio-info {
  opacity: 1;
}
.portfolio .portfolio-content:hover img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  position: relative;
}
.services .service-item .icon {
  background: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  transition: 0.5s;
  border: 1px solid var(--accent-color);
  margin-right: 20px;
}
.services .service-item .icon i {
  color: var(--contrast-color);
  font-size: 24px;
  line-height: 0;
}
.services .service-item:hover .icon {
  background: var(--surface-color);
}
.services .service-item:hover .icon i {
  color: var(--accent-color);
}
.services .service-item .title {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
}
.services .service-item .title a {
  color: var(--heading-color);
}
.services .service-item .title a:hover {
  color: var(--accent-color);
}
.services .service-item .description {
  line-height: 24px;
  font-size: 14px;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}
.testimonials .testimonial-item {
  box-sizing: content-box;
  text-align: center;
  min-height: 320px;
}
.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50%;
  margin: 0 auto;
}
.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}
.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
}
.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 40%);
  font-size: 26px;
  line-height: 0;
}
.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}
.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}
.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 15px 15px 15px;
  padding: 20px;
  background-color: var(--surface-color);
  position: relative;
  margin-bottom: 35px;
  border-radius: 6px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}
.testimonials .testimonial-item p::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid var(--surface-color);
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 20px);
}
.testimonials .swiper-wrapper {
  height: auto;
}
.testimonials .swiper-pagination {
  margin-top: 40px;
  position: relative;
}
.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: var(--background-color);
  opacity: 1;
  border: 1px solid var(--accent-color);
}
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-wrap {
  background-color: var(--surface-color);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  padding: 30px;
}
@media (max-width: 575px) {
  .contact .info-wrap {
    padding: 20px;
  }
}
.contact .info-item {
  margin-bottom: 40px;
}
.contact .info-item i {
  font-size: 20px;
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}
.contact .info-item h3 {
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}
.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}
.contact .info-item:hover i {
  background: var(--accent-color);
  color: var(--contrast-color);
}
.contact .php-email-form {
  background-color: var(--surface-color);
  height: 100%;
  padding: 30px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}
@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 20px;
  }
}
.contact .php-email-form input[type="text"],
.contact .php-email-form input[type="email"],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: var(--surface-color);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}
.contact .php-email-form input[type="text"]:focus,
.contact .php-email-form input[type="email"]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}
.contact .php-email-form input[type="text"]::placeholder,
.contact .php-email-form input[type="email"]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}
.contact .php-email-form button[type="submit"] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}
.contact .php-email-form button[type="submit"]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 25%);
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}
.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}
.portfolio-details
  .portfolio-details-slider
  .swiper-pagination
  .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}
.portfolio-details
  .portfolio-details-slider
  .swiper-pagination
  .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}
.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
}
.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid
    color-mix(in srgb, var(--default-color), transparent 85%);
}
.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}
.portfolio-details .portfolio-info ul li + li {
  margin-top: 10px;
}
.portfolio-details .portfolio-description {
  padding-top: 30px;
}
.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}
.portfolio-details .portfolio-description p {
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
  padding: 10px 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
}
.service-details .services-list a {
  display: block;
  line-height: 1;
  padding: 8px 0 8px 15px;
  border-left: 3px solid
    color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 20px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}
.service-details .services-list a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}
.service-details .services-list a:hover {
  border-color: var(--accent-color);
}
.service-details .services-img {
  margin-bottom: 20px;
}
.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}
.service-details h4 {
  font-size: 20px;
  font-weight: 700;
}
.service-details p {
  font-size: 15px;
}
.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}
.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}
.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
/* .starter-section { */
/* Add your styles here */
/* } */

/* Page-specific layout overrides (moved from inline style in index.html)
   These provide a single, maintainable source for header height, scroll
   offsets and minimal body layout used by the landing page. Values are
   intentionally conservative — they only control layout/offsets, not
   typography or content styles. */

:root {
  --pv-header-height: 84px;
}

html {
  scroll-behavior: smooth;
  /* Use header height as a single source of truth for anchor offsets so
     in-page jumps land below the sticky header consistently across browsers. */
  scroll-padding-top: var(--pv-header-height);
}

/* Body: keep layout-related properties centralized here. Visual
   appearance (colors/gradients) remain controlled by the page CSS so
   this block intentionally only contains layout/flow rules. */
body {
  display: block;
  min-height: 100vh;
  position: relative;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* Normal page flow: keep a small default top padding so content breathes */
  padding: 20px 16px 20px 16px;
}

/* Top header (transparent/sticky). Kept here so header layout and
   offsets share the same source of truth as the body padding */
.pv-top-header {
  /* Keep header in document flow so it scrolls away with the page */
  position: static;
  /* top/left/right are not needed for static positioning, but keep height/layout */
  top: auto;
  left: auto;
  right: auto;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  background-image: none;
  background-color: transparent;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  z-index: 9999;
}

.pv-top-header .pv-top-inner {
  width: 100%;
  max-width: 1200px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Center the logo horizontally within the site's content area (i.e. from
   the hamburger toggle to the right edge). Use a 3-column grid so the
   toggle sits in the first column, the logo is perfectly centered in the
   middle column, and the third column reserves space on the right. This
   keeps the logo visually centered relative to the page content without
   changing markup or the header height. */
.pv-top-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: 100%;
  gap: 12px;
}

.pv-top-inner .pv-top-logo {
  justify-self: center;
  grid-column: 2; /* place logo in center column */
  max-height: 56px;
}

.pv-top-inner .header-toggle {
  justify-self: start;
  grid-column: 1; /* hamburger stays on the left column */
}

/* On wide screens where the left sidebar (300px) is visible, reserve
   that space so the top header's inner content (logo) is centered
   relative to the page's main content area (not the full viewport). */
@media (min-width: 1200px) {
  .pv-top-header {
    /* keep header in flow but offset the inner area by the sidebar width */
    padding-left: 300px;
    padding-right: 0;
  }

  .pv-top-inner {
    max-width: 1100px; /* match main content width */
    margin: 0 auto; /* center within the reduced header area */
    padding-left: 32px;
    padding-right: 32px;
    grid-template-columns: auto 1fr auto; /* ensure grid layout remains */
  }
}

.pv-top-header .pv-top-logo {
  max-height: 56px;
  width: auto;
  display: block;
}

/* Header and section centering so layout is consistent across files */
header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  margin: 0 auto;
  /* ensure anchor jumps leave the right space for the fixed header */
  scroll-margin-top: var(--pv-header-height);
}

/* Contact section: make the section wrap its content (do not force
   full-viewport height) and reduce vertical padding so the section is
   compact. Keep layout and alignment but do NOT change the visual
   styling of the photo or buttons (those are controlled by inline
   attributes and the global .btn rule). */
#contact {
  /* let the content determine height */
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  /* slightly reduced breathing room */
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Keep inner containers left/top aligned but visually centered as a block */
#contact .container,
#contact .pv-section-inner {
  align-items: center;
}

/* Keep the grid vertically centered so photo and buttons form a single
   visual block, but respect the existing inline column widths (don't
   force a larger photo column). */
#contact .contact-grid {
  align-items: center; /* vertical centering of photo vs buttons */
  gap: 1.5rem;
  grid-template-columns: minmax(260px, 360px) 1fr; /* match inline layout */
}

/* Revert any previous forced overrides for photo and buttons so their
   original inline styles and global .btn rules remain authoritative. */
#contact .contact-photo img {
  /* Respect inline attributes: width:100%, aspect-ratio, object-fit, max-height */
  max-height: 420px !important;
  box-shadow: none !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}

#contact .contact-content .btn {
  /* revert to global .btn sizing to avoid further visual changes */
  padding: 0.9rem 2.2rem !important;
  font-size: 1rem !important;
  min-width: auto !important;
}

/* Mobile overrides for Contact section: force a robust flex, column layout
   that works around mobile/grid quirks (minmax/aspect-ratio) and ensures
   CTAs never overflow. Uses !important to override inline styles where
   needed; desktop/tablet layout is unchanged because these rules are
   scoped to <=768px. */
@media (max-width: 768px) {
  /* Prevent any horizontal overflow originating inside contact */
  #contact {
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Replace grid with a simple vertical flex stack to avoid mobile
     browsers misinterpreting grid/minmax/aspect-ratio */
  #contact .contact-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* center content horizontally */
    justify-content: flex-start !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Ensure photo appears above the content regardless of DOM order */
  #contact .contact-photo {
    order: -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* Image constraints for mobile: scale responsively and cap height */
  #contact .contact-photo img {
    width: 100% !important;
    height: auto !important;
    max-height: 240px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 10px !important;
  }

  /* Content column should fill width and stack its children */
  #contact .contact-content {
    order: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }

  /* Buttons must never overflow; allow wrapping and make them full-width */
  #contact .contact-content .btn,
  #contact .contact-content .contact-option,
  #contact .contact-content a.contact-option {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* If buttons are grouped, stack them vertically */
  #contact .contact-content .btn-group,
  #contact .contact-content .btn-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Make sure container padding doesn't create extra width */
  #contact .container,
  #contact .pv-section-inner {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* Defensive: ensure no child uses large fixed widths that force overflow */
  #contact * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/*--------------------------------------------------------------
# Over mij photo: responsive, proportional image that never exceeds
# the text column height and remains fully visible.
# Principles:
# - No fixed heights, no JS, no HTML changes
# - Image keeps its aspect ratio and is never cropped (fully visible)
# - On desktop: side-by-side, photo column stretches to match text height
# - On mobile: stacked, image uses natural height and full width
--------------------------------------------------------------*/
#over-mij .over-photo {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  /* center the image inside the rounded container */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0; /* allow proper flex behavior */
}

#over-mij .over-photo::before,
#over-mij .over-photo::after {
  background: none !important;
}

/* Default (mobile-first): image fills available width, keeps aspect ratio
   and is fully visible (no cropping). */
#over-mij .over-photo .over-photo-img {
  display: block;
  width: 100%; /* full width on stacked/mobile layout */
  height: auto; /* natural height, preserves aspect ratio */
  max-width: 100%;
  object-fit: contain; /* ensure whole image is visible */
  object-position: center;
}

/* Prevent flex children from forcing overflow in some browsers */
#over-mij .over-text,
#over-mij .over-photo {
  min-height: 0;
}

/* Desktop: make the layout side-by-side and ensure the photo column
   stretches to the same height as the text column. The image scales
   by height (max-height:100%) and width adjusts automatically, so
   there are no fixed heights and no crops. */
@media (min-width: 768px) {
  #over-mij .over-mij-content {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: stretch; /* columns match height */
  }

  /* Text column grows to take main space */
  #over-mij .over-mij-content > .over-text {
    flex: 1 1 60%;
    min-height: 0;
  }

  /* Photo column: fixed basis percentage but stretches vertically */
  #over-mij .over-mij-content > .over-photo {
    flex: 0 0 38%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
  }

  /* Image scales by height up to the photo column height, width adjusts
     to preserve aspect ratio (so image will never be taller than text). */
  #over-mij .over-photo .over-photo-img {
    max-height: 100%;
    height: auto;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
  }
}

/*--------------------------------------------------------------
# Z-index normalization (minimal safety refactor)
# Defines a clear stacking order for header, sidebar/navigation and overlays
# without changing layout, spacing or visual appearance. Excludes #scroll-top
# which must remain untouched.
--------------------------------------------------------------*/
:root {
  --z-overlay: 999999; /* topmost overlays (preloader) */
  --z-glightbox: 99999; /* lightbox/modal overlays */
  --z-sidebar: 2000; /* sidebar / navigation */
  --z-header: 1500; /* top header */
}

/* Sidebar / navigation should sit above the header to avoid header
   intercepting clicks when the sidebar is active */
.header {
  z-index: var(--z-sidebar) !important;
}

/* Top header sits above normal content but below the sidebar and overlays */
.pv-top-header {
  z-index: var(--z-header) !important;
}

/* Overlays (preloader, lightbox/goverlay) must remain above everything */
#preloader {
  z-index: var(--z-overlay) !important;
}
.goverlay,
.glightbox-container,
.glightbox-open .goverlay {
  z-index: var(--z-glightbox) !important;
}

/* Navigation controls inside lightboxes (close/next/prev) should sit
   above the main lightbox overlay */
.gclose,
.gnext,
.gprev {
  z-index: calc(var(--z-glightbox) + 1) !important;
}

/*-----------------------------------------------------------------
  Locaties links: scoped link styles for the Locaties section only.
-----------------------------------------------------------------*/
#locaties .section-text ul {
  text-align: left;
  padding-left: 1rem; /* keep list indentation consistent */
}
#locaties .section-text ul li a {
  color: inherit;
  text-decoration: underline; /* always underlined by default */
  transition: color 0.15s ease; /* subtle transition only for color */
}
#locaties .section-text ul li a:hover,
#locaties .section-text ul li a:focus {
  color: var(--pv-accent); /* only change color on hover/focus */
  /* do not change underline on hover */
}
#locaties .section-text ul li a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pv-accent) 15%, transparent);
  outline-offset: 2px;
}

/*# sourceMappingURL=main.css.map */

/*
  Hide the small visual "×" icon that appears inside the sidebar
  close button without changing the button itself, its aria-labels
  or its click/focus behaviour. This is intentionally scoped to the
  sidebar header context so no other icons are affected.
*/
#header.header.dark-background .sidebar-close-button > i.bi.bi-x {
  display: none !important;
  visibility: hidden !important;
}

/* Also guard against icons injected via pseudo-elements on that button */
#header.header.dark-background .sidebar-close-button::before,
#header.header.dark-background .sidebar-close-button::after {
  display: none !important;
  content: none !important;
}

/* Remove any remaining visual artefacts (dot/marker/pseudo) for the
   sidebar close button while keeping the element, events and aria
   unchanged. This is scoped to the header/sidebar dark context so
   other buttons/icons are not affected. */
#header.header.dark-background .sidebar-close-button::before,
#header.header.dark-background .sidebar-close-button::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#header.header.dark-background .sidebar-close-button {
  /* remove any list/marker behaviour in case it was styled as a list item */
  list-style: none !important;
  background-image: none !important;
  background: transparent !important;
}

/* hide marker glyphs in browsers that render ::marker for certain elements */
#header.header.dark-background .sidebar-close-button::marker {
  content: none !important;
  display: none !important;
}

/* ensure any inner icon remains hidden (defensive) but keep the button itself interactive */
#header.header.dark-background .sidebar-close-button > i,
#header.header.dark-background .sidebar-close-button i {
  display: none !important;
  visibility: hidden !important;
}

@media (max-width: 767px) {
  /* ...existing code... */

  body.sidebar-open-mobile #scroll-top {/* Lines 960-961 omitted */}

  /* Optionally hide the top header to avoid overlap; the sidebar
     contains its own close toggle so users can still close the nav. */
  /* Keep the header's layout space but hide it visually and make it
     non-interactive when the mobile sidebar is open. This prevents
     the sidebar from shifting upward on mobile (iOS/Android/Chrome/Edge).
     We avoid changing HTML or relying on JS; only CSS changes here. */
  body.sidebar-open-mobile .pv-top-header {
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  /* Ensure the sidebar's own toggle remains visible so users can close it */
  body.sidebar-open-mobile #header .header-toggle {/* Lines 971-972 omitted */}

  /* ...existing code... */
}