/* ----------------------------------------GENERAL---------------------------------------- */
h1 {
  margin: 0;
}

h2 {
  color: #333;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  margin: 0;
}

h3 {
  color: #333;
  font-size: 30px;
  font-weight: bold;
  margin: 0 0 10px;
  text-align: center;
}

body {
  font-family: 'Montserrat', Arial, sans-serif;
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  margin: 0px 20px;
}

section {
  margin-bottom: 40px;
}

.section-title {
  background: #f3f5f6;
  width: auto;
  margin-left: -20px;
  margin-right: -20px;
  padding: 40px 5%;
  text-align: center;
  margin-bottom: 30px;
  box-sizing: border-box;
}

/* Op team.html staat de balk buiten <main> en is er dus geen zijmarge
   te compenseren; de negatieve marges zouden hem buiten beeld duwen. */
body > .section-title {
  margin-left: 0;
  margin-right: 0;
}

.section-title h2 {
  font-family: 'Montserrat', sans-serif;
  color: rgb(96, 123, 142);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}

/* Platte sectie-intro zonder kader (bv. "Bikefit voor") */
.section-intro {
  text-align: center;
  margin: 40px 0 30px;
}

.section-intro h2 {
  font-family: 'Montserrat', sans-serif;
  color: rgb(96, 123, 142);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* CATEGORIE-FOTO'S (racefiets / tijdritfiets / mountainbike) */
.category-photos {
  display: flex;
  gap: 24px;
  max-width: 1140px;
  margin: 0 auto;
  justify-content: center;
  flex-wrap: wrap;
}

.category-photo-item {
  flex: 1;
  min-width: 220px;
  max-width: 260px;
  text-align: center;
}

.category-photo-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-photo-item:hover img {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15);
}

.category-photo-item h3 {
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-top: 16px;
  text-align: center;
}

footer {
  background-color: #333;
  color: #aaa;
  padding: 46px 5% 22px;
  margin-top: auto;
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
  max-width: 1140px;
  margin: 0 auto 30px;
}

.footer-col h4 {
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 14px;
}

.footer-col p,
.footer-col a {
  display: block;
  font-size: 13px;
  line-height: 2;
  color: #aaa;
  margin: 0; /* standaard <p>-marges weg, zelfde ritme als osteo/kine */
}

.footer-col a:hover { color: rgb(118, 197, 191); }

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.footer-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.footer-social a:hover { background: rgb(118, 197, 191); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 18px;
  text-align: center;
  font-size: 12.5px;
}

footer a { color: rgb(118, 197, 191); }
footer a:hover { text-decoration: underline; }

div {
  display: block;
}

a {
  text-decoration: none;
}

/* ----------------------------------------NAVIGATION BAR---------------------------------------- */
.navbar {
	padding: 1% 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-container {
  text-align: left;
  float: left;
  box-sizing: border-box;
}

.logo {
  float: left;
  width: 230px;
  min-height: 50px;
  cursor: pointer;
}

.logo img {
  height: 52px;
  width: auto;
}

.hamburger-lines {
  display: none;
}

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  float: right;
}

.menu li {
  list-style: none;
}

.menu li a.nav-item {
  color: rgb(96, 123, 142);
  transition: color 0.2s;
  position: relative;
  padding: 10px 0;
  margin: 0 25px;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  box-sizing: border-box;
}

.menu li a:hover {
  color: rgb(118, 197, 191);
}

.menu li a.active {
  background-color: #ddd;
  color: #333;
}

.menu li a.current-nav-item {
  position: relative;
  color: rgb(118, 197, 191);
}

.menu li a.current-nav-item::after {
  content: "";
  background: rgb(118, 197, 191);
  height: 2px;
  width: 100%;
  bottom: 0;
  left: 0;
  position: absolute;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown .dropbtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dropdown .dropdown-icon {
  margin-top: 5px;
  margin-left: 5px;
  font-size: 11px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 140px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: rgb(96, 123, 142);
  font-size: 16px;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}



/* ----------------------------------------HERO---------------------------------------- */

/* Volle-breedte fotostrook met zwevende knop, zelfde look &amp; feel
   als osteopathiepraktijkgoossens.be en de osteopathie/hub-site */
.hero {
  position: relative;
  width: auto;
  margin-left: -20px;
  margin-right: -20px;
}

.hero-video {
  display: block;
  width: 100%;
  height: 65vh;
  min-height: 380px;
  max-height: 620px;
  object-fit: cover;
  background-color: #2b2b2b; /* fallback-kleur tijdens laden */
}

.hero-text-container {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

.hero-button {
  display: inline-block;
  background-color: rgb(118, 197, 191);
  color: #fff;
  border: 0;
  border-radius: 40px;
  padding: 16px 24px;
  box-shadow: 0px 4px 58.8px 1.2px rgba(0, 0, 0, 0.24);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

.hero-button:hover {
  background-color: rgb(96, 123, 142);
}

/* ----------------------------------------BIKEFIT SECTION---------------------------------------- */

.bikefit-content {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.bikefit-item:nth-child(1) {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  width: 100%;
}

.bikefit-item:nth-child(2), .bikefit-item:nth-child(3), .bikefit-item:nth-child(4) {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  margin-top: 30px;
  width: 100%;
}

.bikefit-item:nth-child(5) {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  width: 100%;
}

.bikefit-image {
  display: flex;
  justify-content: center;
  margin: 0 20px;
  width: 500px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.bikefit-text {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  margin: 0 20px;
  padding: 20px;
  width: 500px;
  height: 100%;
}

.bikefit-text h3 {
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
  color: rgb(96, 123, 142);
  text-align: center;
  margin: 0 0 10px;
}

.bikefit-text p {
  font-size: 15.5px;
  line-height: 1.75;
  color: #444;
}

/* ----------------------------------------PRIJZEN SECTION---------------------------------------- */

.pricing-table {
  display: flex;

}

.pricing-item {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  margin: 0 10px 40px 10px;
  padding: 20px;
  text-align: center;
  flex: 1;
}

.pricing-item h3 {
  font-family: Arial, sans-serif;
  font-size: 24px;
  margin: 0 0 10px;
  color: rgb(96, 123, 142);
}

.pricing-item .second-header {
  font-family: Arial, sans-serif;
  font-size: 24px;
  margin: 30px 0 10px;
}

.pricing-item .price {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 20px;
  color: rgb(96, 123, 142);
}

.pricing-item .price-change {
  font-size: 18px;
  font-style: italic;
}

.pricing-item ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pricing-item li {
  font-size: 18px;
  line-height: 1.5;
  color: #333;
}

.pricing-item .included:before {
  content: '\2713';
  display: inline-block;
  color: green;
  padding: 0 6px 0 0;
}

.pricing-item .optional {
  font-size: 18px;
  line-height: 1.5;
  padding-top: 10px;
}

/* ----------------------------------------CADEAUBON SECTION---------------------------------------- */

.cadeaubon-content {
  padding: 0 30px;
  padding-bottom: 30px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cadeaubon-image {
  width: 48%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  display: block;
}

.cadeaubon-text-button {
  margin: 0 auto;
}

.cadeaubon-text {
  width: 80%;
  margin: 0 40px;
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  padding: 0 20px;
}

.cadeaubon-text p {
  font-size: 15.5px;
  line-height: 1.75;
  color: #444;
}

.cadeaubon-content button {
  background-color: rgb(118, 197, 191);
  cursor: pointer;
  color: #fff;
  border: 0;
  border-radius: 40px;
  padding: 16px 24px;
  box-shadow: 0px 4px 58.8px 1.2px rgba(0, 0, 0, 0.24);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 1px;
  margin-top: 40px;
}

.cadeaubon-content button:hover {
  background-color: rgb(96, 123, 142);
}

/* ----------------------------------------FAQ SECTION---------------------------------------- */

.faq-container {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px 8px;
  box-sizing: border-box; /* anders telt de padding bovenop 100% en steekt het blok uit */
}

.faq-item {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 8px;
  padding: 16px 20px;
  cursor: pointer;
  position: relative;
}

.faq-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question {
  text-align: left;
  color: rgb(96, 123, 142);
  font-size: 22px;
  font-weight: bold;
  font-family: Arial, sans-serif;
}

.faq-arrow {
  font-size: 18px;
  transition: transform 0.3s ease;
  padding-left: 10px;
}

.faq-item.open .faq-arrow i {
  transform: rotate(90deg);
}

.faq-answer {
  display: none;
  color: #666;
  font-size: 16px;
  line-height: 1.7;
  margin-top: 10px;
}

.faq-picture {
  border-radius: 10px; /* Round the corners of the Over picture */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow to the Over picture */
  margin-top: 20px;
  height: auto;
  width: 90%;
}

.faq-answer a {
  color: rgb(118, 197, 191); /* Change the link color */
  text-decoration: none; /* Remove the underline from the link */
}

.faq-answer a:hover {
  color: rgb(96, 123, 142); /* Change the link color on hover */
  text-decoration: underline; /* Add an underline to the link on hover */
}

.contact-prompt {
  text-align: center;
  margin-top: 30px;
}

.contact-prompt p {
  font-size: 24px; /* Bigger font for the first sentence */
  color: rgb(96, 123, 142); /* Specific color for the first sentence */
  margin-bottom: 10px; /* Space between the sentences */
}

.contact-prompt .contact-instruction {
  font-size: 20px; /* Smaller font for the second sentence */
  color: #333; /* Darker color for the second sentence */
  margin-bottom: 20px;
}

.contact-button {
  background-color: rgb(118, 197, 191);
  cursor: pointer;
  color: #fff;
  border: 0;
  border-radius: 40px;
  padding: 16px 24px;
  box-shadow: 0px 4px 58.8px 1.2px rgba(0, 0, 0, 0.24);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 1px;
  margin-top: 0;
  display: inline-block;
}

.contact-button:hover {
  background-color: rgb(96, 123, 142);
}

/* ----------------------------------------NIEUWE FIETS SECTION---------------------------------------- */

.nieuwe-fiets-content {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0px 70px;
}

.nieuwe-fiets-item:nth-child(1) {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 30px;
}

.nieuwe-fiets-item:nth-child(2), .nieuwe-fiets-item:nth-child(3) {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 30px;
  margin-top: 30px;
}

.nieuwe-fiets-text {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  margin: 0 30px;
  padding: 20px;
  width: 700px;
  height: 100%;
  font-size: 15.5px;
  line-height: 1.75;
  color: #444;
}

.nieuwe-fiets-text h3 {
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
  color: rgb(96, 123, 142);
  text-align: center;
  margin: 0 0 10px;
}

.nieuwe-fiets-text a {
  color: rgb(118, 197, 191); /* Change the link color */
  text-decoration: none; /* Remove the underline from the link */
}

.nieuwe-fiets-text a:hover {
  color: rgb(96, 123, 142); /* Change the link color on hover */
  text-decoration: underline; /* Add an underline to the link on hover */
}

.nieuwe-fiets-image {
  display: flex;
  justify-content: center;
  margin: 0 30px;
  width: 500px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.nieuwe-fiets-pricing {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 30px;
}

.nieuwe-fiets-pricing-item {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  margin: 0 30px;
  padding: 20px 20px 4px 20px;
  text-align: center;
  width: 218px;
  height: 100%;
}

.nieuwe-fiets-pricing-item h3 {
  font-family: Arial, sans-serif;
  font-size: 24px;
}

.nieuwe-fiets-pricing-item h4 {
  font-family: Arial, sans-serif;
  font-size: 20px;
  margin: 0 0 10px;
}

.nieuwe-fiets-contact-button {
  background-color: rgb(118, 197, 191);
  cursor: pointer;
  color: #fff;
  border: 0;
  border-radius: 40px;
  padding: 16px 24px;
  box-shadow: 0px 4px 58.8px 1.2px rgba(0, 0, 0, 0.24);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 1px;
  margin: 0 30px;
  margin-top: 40px;
  width: fit-content;
}

.nieuwe-fiets-contact-button:hover {
  background-color: rgb(96, 123, 142);
}

/* ----------------------------------------OVER SECTION---------------------------------------- */

.over-content {
  padding: 0 30px; /* Add padding to the left and right of the Over section */
  padding-bottom: 30px;
  text-align: center; /* Center the text in the Over section */
  display: flex; /* Display the Over content as a flex container */
  justify-content: center; /* Center the Over content horizontally */
  align-items: center; /* Align the Over content vertically */
}

.over-picture {
  width: 458px; /* Set the width of the Over picture */
  height: auto; /* Set the height of the Over picture to auto */
  border-radius: 10px; /* Round the corners of the Over picture */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow to the Over picture */
  margin: 0 auto; /* Center the Over picture horizontally */
  display: block; /* Display the Over picture as a block element */
}

.over-text {
  width: 80%; /* Set the width of the Over text */
  margin: 0 40px; /* Center the Over text horizontally */
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  padding: 0 20px;
}

.over-text p {
  font-size: 15.5px;
  line-height: 1.75;
  color: #444;
}

/* ----------------------------------------TEAM SECTIE (homepage)---------------------------------------- */
.team-bar {
  display: block;
  background: #f4f4f4;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 52px 5%;
  text-align: center;
  margin-left: -20px;
  margin-right: -20px;
  width: auto;
  box-sizing: border-box;
}

.team-bar h2 {
  font-family: Arial, sans-serif;
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 40px;
  color: #333;
}

.team-members {
  display: flex;
  gap: 52px;
  justify-content: center;
  flex-wrap: wrap;
}

.team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.team-avatar {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 4px solid #fff;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.11);
  display: block;
}

.team-member .name {
  font-weight: 700;
  font-size: 16px;
  color: #333;
}

.team-member .role {
  font-size: 18px;
  color: rgb(118, 197, 191);
  font-weight: 700;
}

.team-bar-cta {
  display: inline-block;
  margin-top: 34px;
  font-size: 14px;
  font-weight: 700;
  color: rgb(96, 123, 142);
  transition: color 0.2s ease;
}

.team-bar-cta:hover { color: rgb(118, 197, 191); text-decoration: underline; }

/* ----------------------------------------TEAM-PAGINA---------------------------------------- */
.team-page-list {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 5% 20px;
  display: flex;
  flex-direction: column;
  gap: 54px;
}

.team-row {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  align-items: flex-start;
}

.team-photo-col {
  flex: 0 0 260px;
  text-align: center;
}

.team-photo-col .team-page-avatar {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  object-fit: cover;
  border: 6px solid rgb(96, 123, 142);
  margin: 0 auto 20px;
  display: block;
}

.team-photo-col .name {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: rgb(96, 123, 142);
}

.team-photo-col .role {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: rgb(118, 197, 191);
  margin-top: 14px;
}

.team-cv-col {
  flex: 1;
  min-width: 320px;
  padding-top: 6px;
}

.bio-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bio-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  text-align: left;
}

.bio-year {
  flex-shrink: 0;
  min-width: 42px;
  font-size: 18px;
  font-weight: 700;
  color: #666;
}

.bio-text {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  text-align: left;
}

.team-cv-col .bio-year,
.team-cv-col .bio-text {
  color: rgb(96, 123, 142);
}

.team-cv-col .bio-text {
  font-size: 17px;
  line-height: 1.6;
}

.team-cv-col .bio-list {
  gap: 24px;
}

.team-about-box {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-top: 30px;
}

.team-about-box p {
  font-size: 15px;
  line-height: 1.75;
  color: #444;
  margin-bottom: 14px;
}

.team-about-box p:last-child { margin-bottom: 0; }

@media (max-width: 650px) {
  .team-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .team-cv-col .bio-row { justify-content: center; }
}

/* ----------------------------------------AFSPRAAK-BLOK---------------------------------------- */
.afspraak-intro {
  max-width: 760px;
  margin: 0 auto 50px;
  padding: 0 20px;
  text-align: center;
  box-sizing: border-box;
}

.afspraak-intro h3 {
  font-family: Arial, sans-serif;
  font-size: 28px;
  font-weight: bold;
  color: rgb(96, 123, 142);
  text-align: center;
  margin: 0 0 12px;
}

.afspraak-intro p {
  font-size: 16px;
  line-height: 1.7;
  color: #666;
  margin: 0 0 24px;
}

.afspraak-button {
  display: inline-block;
  background-color: rgb(118, 197, 191);
  color: #fff;
  border: 0;
  border-radius: 40px;
  padding: 16px 24px;
  box-shadow: 0px 4px 58.8px 1.2px rgba(0, 0, 0, 0.24);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

.afspraak-button:hover { background-color: rgb(96, 123, 142); }

.afspraak-voorwaarden {
  margin: 28px 0 0;
  padding-left: 22px;
  text-align: left;
}

.afspraak-voorwaarden li {
  font-size: 15.5px;
  line-height: 1.7;
  color: #666;
  margin-bottom: 10px;
}

/* 2de en 3de puntje springen verder in: ze verduidelijken het 1ste puntje */
.afspraak-voorwaarden li:nth-child(n+2) {
  margin-left: 24px;
}

/* Zelfde blok binnen een opengeklapt FAQ-antwoord.
   .faq-answer a kleurt links teal; voor de knop moet de tekst wit blijven. */
.faq-answer p { margin: 0 0 16px; }
.faq-answer .afspraak-voorwaarden { margin-top: 18px; margin-bottom: 18px; }
.faq-answer a.afspraak-button {
  display: table;
  margin: 0 auto;
  color: #fff;
}
.faq-answer a.afspraak-button:hover { color: #fff; text-decoration: none; }

/* ----------------------------------------CONTACT SECTION---------------------------------------- */
.contact-content {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.contact-form {
  padding: 10px 30px;
  width: 45%;
  clear: both;
  margin-left: 0;
  float: left;
  margin-bottom: 50px;
}

.contact-form p {
  font-size: 28px;
  text-align: center;
  color: rgb(96, 123, 142);
  margin-top: 5px;
}

.contact-form label,
.contact-form input,
.contact-form textarea {
  display: block;
  margin-bottom: 10px;
  width: 100%;
  padding-right: 16px;
}

.contact-form input,
.contact-form textarea {
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background-color: #f5f5f5;
  font-size: 20px;
}

.contact-form textarea {
  width: 100%;
  height: 320px;
}

.contact-form label,
.contact-form input,
.contact-form textarea,
.contact-form button {
  margin-bottom: 20px;
}

.contact-form button {
  background-color: rgb(118, 197, 191);
  cursor: pointer;
  color: #fff;
  border: 0;
  border-radius: 40px;
  padding: 16px 24px;
  box-shadow: 0px 4px 58.8px 1.2px rgba(0, 0, 0, 0.24);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 1px;
  margin-top: 20px;
}

.contact-form button:hover {
  background-color: rgb(96, 123, 142);
}

.contact-info {
  padding: 10px 30px;
  width: 42%;
  float: left;
  margin-left: 2.5%;
  margin-top: 20px;
}

.contact-items {
  margin: 0 auto;
}

.contact-item {
  display: flex; /* Display the Contact items as flex containers */
  align-items: center; /* Align the Contact items vertically */
  margin-bottom: 18px;
}

.contact-item i {
  font-size: 1.5em; /* Set the font size of the Contact icons */
  margin: 0 15px; /* Add margin to the left and right of the Contact icons */
  color: rgb(118, 197, 191); /* Set the color of the Contact icons */
}

.contact-item p {
  font-size: 1.2em; /* Set the font size of the Contact text */
  color: #666; /* Set the text color of the Contact text */
  margin: 0; /* standaard <p>-marges weg, zelfde ritme als osteo/kine */
}

.contact-item a {
  color: rgb(118, 197, 191); /* Change the link color */
  font-size: 18px; /* Increase the font size */
  text-decoration: none; /* Remove the underline from the link */
}

.contact-item a:hover {
  color: rgb(96, 123, 142); /* Change the link color on hover */
  text-decoration: underline; /* Add an underline to the link on hover */
}

.contact-item address {
  color: #666; /* Change the address color */
  font-size: 18px; /* Increase the font size */
  font-style: normal; /* Remove the italic style from the address */
}

/* Lange e-mailadressen mogen afbreken i.p.v. buiten beeld lopen (mobiel) */
.contact-item p,
.contact-item a,
.contact-item address {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* ----------------------------------------1380px---------------------------------------- */
@media (max-width: 1380px) {
  /* ----------------------------------------nieuwe-fiets---------------------------------------- */
  .nieuwe-fiets-content {
    margin: 0px 30px;
  }
  
  .nieuwe-fiets-item:nth-child(1), .nieuwe-fiets-item:nth-child(3) {
    flex-direction: column-reverse;
  }

  .nieuwe-fiets-item:nth-child(2) {
    flex-direction: column;
  }

  .nieuwe-fiets-image {
    margin-top: 20px;
    width: 80%;
  }

  .nieuwe-fiets-text {
    width: 80%;
  }
}

/* ----------------------------------------1172px---------------------------------------- */
@media (max-width: 1172px) {  
  /* ----------------------------------------contact---------------------------------------- */
  .contact-form {
    width: 40%
  }

  .contact-info {
    width: 40%
  }
}

/* ----------------------------------------1073px---------------------------------------- */
@media (max-width: 1073px) {
  /* ----------------------------------------cadeaubon---------------------------------------- */
  .cadeaubon-content {
    flex-direction: column;
  }

  .cadeaubon-image {
    width: 90%;
  }

  .cadeaubon-text-button {
    margin-top: 30px;
  }

  .cadeaubon-text {
    margin-bottom: 0px;
    margin-top: 30px;
    width: auto;
  }

  .cadeaubon-content button {
    margin-top: 20px;
  }
}

/* ----------------------------------------986px---------------------------------------- */
@media (max-width: 986px) {
  /* ----------------------------------------bikefit---------------------------------------- */
  .bikefit-item:nth-child(1), .bikefit-item:nth-child(3), .bikefit-item:nth-child(5) {
    flex-direction: column-reverse;
  }

  .bikefit-item:nth-child(2), .bikefit-item:nth-child(4) {
    flex-direction: column;
  }

  .bikefit-image {
    margin-top: 20px;
    width: 90%;
  }

  .bikefit-text {
    width: 90%;
  }

  /* ----------------------------------------over---------------------------------------- */
  .over-content {
    flex-direction: column;
  }

  .over-picture {
    width: 90%;
  }

  .over-text {
    margin-bottom: 20px;
    margin-top: 30px;
    width: 90%;
  }
}

/* ----------------------------------------892px---------------------------------------- */

@media (max-width: 1350px) {
  /* ----------------------------------------navbar---------------------------------------- */
  .navbar {
    flex-direction: column;
  }

  .top-navbar {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }

  .menu {
    display: none;
    width: 100%;
    text-align: center;
    padding-left: 0;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
  }

  .menu.active {
    display: block;
  }

  .menu li a {
    color: rgb(96, 123, 142);
    transition: color 0.2s;
    position: relative;
    padding: 20px 0;
    padding-bottom: 10px;
    margin: 0 30px;
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    box-sizing: border-box;
  }

  .menu li a:hover {
    color: rgb(118, 197, 191);
  }

  .menu li a.active {
    background-color: #ddd;
    color: #333;
  }

  .menu li a.current-nav-item {
    position: relative;
    color: rgb(118, 197, 191);
  }

  .menu li a.current-nav-item::after {
    content: "";
    background: rgb(118, 197, 191);
    height: 2px;
    width: 100%;
    bottom: 0;
    left: 0;
    position: absolute;
  }

  .hamburger-lines {
    display: block;
    cursor: pointer;
    height: 26px;
    width: 32px;
  }

  .bar {
    display: block;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: rgb(96, 123, 142);
    height: 4px;
  }

  .hamburger-lines.active .bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger-lines.active .bar:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
  }

  .hamburger-lines.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .hero-video {
    height: 340px;
  }

  .hero-text-container { bottom: 24px; }

  /* ----------------------------------------prijzen---------------------------------------- */
  .pricing-table {
    flex-direction: column;
  }

  /* ----------------------------------------FAQ---------------------------------------- */
  .faq-question {
    font-size: 18px;
  }

  .faq-arrow {
    font-size: 16px;
  }

  /* ----------------------------------------contact---------------------------------------- */
  .contact-form {
    width: 80%
  }

  .contact-info {
    width: 80%;
    margin-bottom: 50px;
  }
}