@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    font-family:  verdana;
}

html {
    overflow-x: hidden;
}

.container-fluid {
	
	background-color: rgb(100,110,98);
}

.cf-color-pt {
	
	background-color: rgb(56,56,56);
}

.navbar {
    margin-bottom: 0px;
	margin-top: 0px;
	background-color: rgb(100,110,98);
}

.nb-color-pt {
 
	background-color: rgb(56,56,56);

}

.nav-item-home {
    position: relative;
    left: 8px;
}

.navbar {
    position: relative;
	
}

.h1-home {
	
    padding-top: 8%;
    color: white;
	font-size: 45px;

}

.p1-home {
    color: white;
    width: 500px;
	font-size: 18px;
	font-weight: italic;
}

.imgLogo_footer {
    width: 70%;
    height: 70%;
}

.font-grote {
    font-size: 20px;
}

.font-middel {
    font-size:16px;
}

.cmLink{
	font-size:16px;
	color: white;
	text-decoration: none;
}	
.cmLink:hover {
	color: rgb(192,216,143);
}

.Robotnik {
		display: none;
}


.contact {
    position: relative;
    background-color: rgb(100,110,98);
    width: 40%;
    height: 40rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.6);
    top: 4em;

    border-radius: 5px;
    padding: 20px;
}

.textarea {
  width: 300px;
  height: 150px;
}

.contact1 {
    position: relative;
    top: 5%;
}

.intake {
    position: relative;
    background-color: rgb(100,110,98);
    width: 75%;
    height: 350rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.6);
    top: 4em;

    border-radius: 5px;
    padding: 20px;
}

.intake1 {
    position: relative;
    top: 5%;
}

/* Floating column for labels: 25% width */
.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
  }
  
  /* Floating column for inputs: 75% width */
  .col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
  }

  /* Style inputs, select elements and textareas */
input[type=text], select, textarea{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
  }

  input[type="checkbox"] {
    width: 2em;
    height: 2rem;
    accent-color: green;
  }
  
  
  /* Style the label to display next to the inputs */
  label {
    padding: 12px 12px 12px 0;
    display: inline-block;
  }

.row {
    text-align: left;
}
  /* Clear floats after the columns */
.row:after {
    
    content: "";
    display: table;
    clear: both;
  }



.popup {
    width: 50%;
    background: rgb(43, 48, 53);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-50%) scale(0.1);
    text-align: center;
    padding: 0 30px 30px;
    color: white;
    visibility: hidden;
    transition: transform 0.4s, top 0.4s;
}

.popup-vrouw {
    width: 50%;
    background: rgb(43, 48, 53);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-50%) scale(0.1);
    text-align: center;
    padding: 0 30px 30px;
    color: white;
    visibility: hidden;
    transition: transform 0.4s, top 0.4s;
}

.open-popup {
    visibility: visible;
    top: 50%;
    transform: translate(-50%,-50%) scale(1);
}

.footer {
    position: absolute;
    width: 100%;
    left: 0;
    background-color: rgb(100, 110, 98);
    color: rgb(100, 110, 98);
    text-align: center;
	margin-top: auto;
}

.footer-pt {
    position: absolute;
    width: 100%;
    left: 0;
    background-color: rgb(56, 56, 56);
    color: rgb(56, 56, 56);
    text-align: center;
	margin-top: auto;
}

.facebook-logo {
    width: 5%;
    position: relative;
    float: left;
}

.text-white {
    background-color: rgb(100, 110, 98);
}

.text-white-pt {
    background-color: rgb(56, 56, 56);
    color: white;
}

.google-map {
    position: relative;
    width: 50%;
    height: 450px;
    top: 5rem;
}

/* tablet */
@media screen and (min-width:768px) and (max-width:1203px) {}

/* desktop */
@media screen and (min-width:1024px) {}

@media screen and (max-width:767px) {
	


	.p1-home {
        width: 300px;
    }

    .navbar-logo {
        position: relative;
        left: 0;
    }
   
    .h1-man {
        position: relative;
    }
			
    .contact {
        width: 85%;
        height: 45rem;
        top: 64px;
    }
	
    .intake {
        height: 440rem;
    }

	.foot {
        visibility: hidden;
    }
	
	.google-map {
        width: 80%;
    }

	.text-white {
		background-color: rgb(100, 110, 98);
	}

    .text-white-pt {
		background-color: rgb(56, 56, 56);
        color: white;
	}
	
}

@media screen and (max-width:1264px) {
    .navbar-logo {
        position: relative;
        left:0px;
    }

    .contact {
        width: 40%;
    }

    .intake {
        height: 395rem;
    }
    
}

@media screen and (max-width:991px) {
    .navbar-logo {
        position: relative;
        left: 0px;
    }

    .intake {
        height: 440rem;
    }
}

@media screen and (max-width:799px) {
    .contact {
        width: 90%;
    }
}

@media screen and (max-height:740px) {
    .contact {
        height: 40rem;
        top: 1rem;
    }


}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .col-25, .col-75, input[type=submit] {
      width: 100%;
      margin-top: 0;
    }

    .intake {
        height: 470rem;
    }
  }

  @media screen and (max-width: 425px) {
    .col-25, .col-75, input[type=submit] {
      width: 100%;
      margin-top: 0;
    }

    .intake {
        height: 445rem;
    }
  }

  @media screen and (max-width: 375px) {
    .col-25, .col-75, input[type=submit] {
      width: 100%;
      margin-top: 0;
    }

    .intake {
        height: 470rem;
    }
  }

  @media screen and (max-width: 375px) {
    .col-25, .col-75, input[type=submit] {
      width: 100%;
      margin-top: 0;
    }

    .intake {
        height: 495rem;
    }
  }


  




/* ==========================
   GLOBAL
   ========================== */

body.body {
    background-color: rgb(100,110,98);
    max-width: 1440px;
    margin: 0 auto;
}

body.body-pt {
    background-color: rgb(56,56,56);
    max-width: 1440px;
    margin: 0 auto;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Buttons */
.cm-btn,
.cm-btn-pt {
    display: inline-block;
    padding: 12px 22px;
    border: 2px solid #fff;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    transition: 0.2s;
}
.cm-btn:hover {
    color: rgb(192,216,143);
    border-color: rgb(192,216,143);
}

.cm-btn-pt:hover {
    color: rgb(56,56,56);
    border-color: rgb(56,56,56);
}

.cm-btn-inverse {
    display: inline-block;
    padding: 12px 22px;
    border: 2px solid  rgb(100,110,98);
    color:  rgb(100,110,98);
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    transition: 0.2s;
}

.cm-btn-inverse:hover {
    color: rgb(192,216,143);
    border-color: rgb(192,216,143);
}


.map-responsive {
    overflow: hidden;
    position: relative;
    border-radius: 12px;
}

.map-responsive iframe {
    width: 100%;
    height: 350px;
    border-radius: 12px;
}

/* === BASISCARD === */
.highlight-card {
    border-radius: 14px;
    padding: 24px;
    border: 2px solid transparent;
    transition: 0.2s ease;
}


.highlight-line {
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    font-style: italic;

    
opacity: 0;
    transform: translateY(8px);
    animation: fadeSlideIn 0.8s ease forwards;

   
}

.highlight-line strong {
    color: #f2e8d5; /* warme lichte tint */
}


@keyframes fadeSlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===========================================
   1. LICHTE KAART — voor donkere pagina's  
   bv. overmij, home, werkwijze (donkere achtergrond)
   =========================================== */
.highlight-card-light {
    background-color: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: white;
}

.highlight-card-light h4,
.highlight-card-light h5 {
    color: white;
    font-weight: 600;
}

/* Hover */
.highlight-card-light:hover {
    border-color: rgba(255,255,255,0.4);
    background-color: rgba(255,255,255,0.15);
}


/* ===========================================
   2. DONKERE KAART — voor lichte pagina’s  
   bv. achtergrond #f5f1eb of witte secties
   =========================================== */
.highlight-card-dark {
    background-color: #646E62;
    border-color: #646E62;
    color: white;
}

.highlight-card-dark h4,
.highlight-card-dark h5 {
    color: white;
    font-weight: 600;
}

.highlight-card-dark:hover {
    background-color: #778376;
    border-color: #778376;
}


/* ===========================================
   3. INVERSE (groen op lichte achtergrond)
   Perfect voor jouw holistische-massage highlight cards
   =========================================== */
.highlight-card-inverse {
    background-color: transparent;
    border-color: #646E62;      /* jouw groene huisstijl */
    color: #646E62;             /* tekst ook groen */
}

.highlight-card-inverse h4,
.highlight-card-inverse h5 {
    color: #646E62;
    font-weight: 600;
}

.highlight-card-inverse:hover {
    background-color: rgba(100,110,98,0.1); /* subtiele groene waas */
    border-color: #646E62;
}

.highlight-card-inverse-pt {
    background-color: transparent;
    border-color: rgb(56,56,56);      /* jouw groene huisstijl */
    color:  rgb(56,56,56);             /* tekst ook groen */
}

.highlight-card-inverse-pt h4,
.highlight-card-inverse-pt h5 {
    color:  rgb(56,56,56);
    font-weight: 600;
}

.highlight-card-inverse-pt:hover {
    background-color: rgba(100,110,98,0.1); /* subtiele groene waas */
    border-color: #646E62;
}


/* ==========================
   HERO SECTION
   ========================== */


.body-contact {

    background-image: url("images/home.jpg"); /* fallback */
    background-image: image-set(
        url("images/home.webp") type("image/webp"),
        url("images/home.jpg") type("image/jpeg")
    );
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646;
	max-width: 1440px; 
	margin: 0 auto !important; 
	float: none !important; 
}

#hero {
    background-image: url("images/home_foto1.jpg"); /* fallback */
    background-image: image-set(
        url("images/home_foto1.webp") type("image/webp"),
        url("images/home_foto1.jpg") type("image/jpeg")
    );
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 60vh;
    display: flex;
    align-items: center;

}

#hero_massage {
    background-image: url("images/home.jpg"); /* fallback */
    background-image: image-set(
        url("images/home.webp") type("image/webp"),
        url("images/home.jpg") type("image/jpeg")
    );
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 60vh;
    display: flex;
    align-items: center;
}

/* ==========================
   ONS DOEL SECTION
   ========================== */

   
.highlight-card {
    background-color: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    color: white;
}
.highlight-card h5 {
    font-weight: 600;
}


.list-bullets li {
    margin-bottom: 8px;
    line-height: 1.6;
}


#ons-doel h2,
#ons-doel p {
    color: #fff;
}

/* Afbeelding – NIET uitrekken */
.ons-doel-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 6px;
}

/* ==========================
   OVER MIJ – SCHONE RESPONSIVE VERSIE
   ========================== */

#overmij {
    color: #fff;
}

/* Titel */
.h1-overmij {
    text-align: center;
    margin-bottom: 20px;
}

/* Afbeelding – NIET uitrekken */
.overmij-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 6px;
}





/* ==========================
   FOOTER (modern & responsive)
   ========================== */

#footer {
    background-color: rgb(100,110,98);
    color: #fff;
}

#footer-pt {
    background-color: rgb(56,56,56);
    color: #fff;
}

/* ---------- LOGO ---------- */

/* Desktop: logo links uitlijnen */
.footer-col-logo {
    text-align: left;
}

/* Mobiel: logo automatisch centreren */
@media (max-width: 767px) {
    .footer-col-logo {
        text-align: center;
    }
}

.footer-logo {
    width: 200px;
    height: auto;
    display: inline-block;
}


/* ---------- SOCIAL ICONS (altijd gecentreerd) ---------- */

.footer-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

.footer-social img {
    width: 42px;
    height: auto;
    transition: .2s;
}

.footer-social img:hover {
    transform: scale(1.12);
}


/* ---------- FOOTER LINKS ---------- */

.footer-links a,
.footer-links-pt a {
    color: #fff;
    text-decoration: none;
    transition: .2s;
}

.footer-links a:hover {
    color: rgb(192,216,143);
}

.footer-links-pt a:hover {
    color: rgb(2,111,229);
}

.footer-links li {
    margin-bottom: 6px;
}

/* ---------- Navigatie menu ---------- */

.nav-submenu {
    background-color: #646E62;
    border: none;
}

/* ==========================
   Tarieven – SCHONE RESPONSIVE VERSIE
   ========================== */

#tarieven {
    color: #fff;
}

/* Titel */
.h1-tarieven {
    text-align: center;
    margin-bottom: 20px;
}

/* Afbeelding – NIET uitrekken */
.tarieven-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 6px;
}

.tarieven-list {
    display: grid;
    gap: 12px;
}

.tarief-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}

.tarief-naam {
    font-weight: 500;
}

.tarief-prijs {
    font-weight: 600;
    margin-left: 20px;
}

.tarief-duur {
    color: #555;
    margin-left: 20px;
    white-space: nowrap;
}

/* ⭐ Mobiel layout */
@media (max-width: 767px) {
    .tarief-item {
        grid-template-columns: 1fr;
    }
    .tarief-prijs,
    .tarief-duur {
        margin-left: 0;
    }
}

/* ==========================
   Ervaringen – SCHONE RESPONSIVE VERSIE
   ========================== */

#ervaringen {
    color: #fff;
}

/* Titel */
.h1-ervaringen {
    text-align: center;
    margin-bottom: 20px;
}

/* Afbeelding – NIET uitrekken */
.ervaringen-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 6px;
}

.sara-review-container {
    width: 100%;
    height: 650px;
    overflow: hidden;
    border-radius: 14px;
    background-color: #f5f1eb; /* zachte achtergrond */
    border: 2px solid #646E62; /* jouw groene Mink kleur */
}

.sara-review-iframe {
    width: 100%;
    height: 100%;
    border: none;
}


/* ==========================
   holistische-massage – SCHONE RESPONSIVE VERSIE
   ========================== */

#holistische-massage {
    color: #fff;
}

/* Titel */
.h1-holistische-massage {
    text-align: center;
    margin-bottom: 20px;
}

.h2-holistische-massage {
    text-align: center;
    margin-bottom: 15px;
}

/* Afbeelding – NIET uitrekken */
.holistische-massage-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 6px;
}

/* ==========================
   Personal-training – SCHONE RESPONSIVE VERSIE
   ========================== */

#pt {
    color: #fff;
}

/* Titel */
.h1-pt {
    text-align: center;
    margin-bottom: 20px;
}

.h2-pt {
    text-align: center;
    margin-bottom: 15px;
}

/* Afbeelding – NIET uitrekken */
.pt-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 6px;
}

/* ==========================
   Tarieven – SCHONE RESPONSIVE VERSIE
   ========================== */

#werkwijze {
    color: #fff;
}

/* Titel */
.h1-werkwijze {
    text-align: center;
    margin-bottom: 20px;
}

.h2-werkwijze {
    text-align: center;
    margin-bottom: 15px;
}

/* Afbeelding – NIET uitrekken */
.werkwijze-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 6px;
}

/* ==========================
   Menu – SCHONE RESPONSIVE VERSIE
   ========================== */

/* Verwijder agressieve default outlines */
.navbar .nav-link:focus,
.navbar .dropdown-toggle:focus,
.navbar .dropdown-item:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Subtiele, huisstijl focus (toegankelijk) */
.navbar .nav-link:focus-visible,
.navbar .dropdown-toggle:focus-visible,
.navbar .dropdown-item:focus-visible {
  outline: 2px solid #646E62;     /* jouw groene */
  outline-offset: 2px;
  border-radius: 6px;
}

/* Mobiel: verwijder blauwe tap highlight */
.navbar .nav-link,
.navbar .dropdown-item,
.navbar-brand {
  -webkit-tap-highlight-color: transparent;
}

/* Dropdown menu volledig in jouw stijl */
.navbar .dropdown-menu {
  background-color: #646E62; /* zelfde als hoofdmenu */
  /*background-color: rgb(2,11,229);  zelfde als hoofdmenu */
  border: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18); /* zachte schaduw */
  padding: 8px 0;
}

.navbar .nb-bg {
    background-color: rgb(56,56,56);
}

.navbar .dropdown-item {
  color: #fff;
  padding: 10px 16px;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus-visible {
  background-color: rgb(192,216,143); /* jouw hoverkleur */
  color: #fff;
  font-weight: 700;
}


/* Hoofdmenu links */
.navbar .nav-link {
  color: #fff;
  padding: 12px 16px;
}

.navbar .nav-link:hover {
  /*background-color: #555;  subtiele hover */
  color: #fff;
  font-weight: 700;
}

/* Active link duidelijk maar niet schreeuwerig */
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
  /*background-color: #555;*/
  color: #fff;
  border-radius: 6px;
  font-weight: 700;
}

/* Vergroot klik-gebied caret van dropdown (comfort op mobiel) */
.navbar .dropdown-toggle::after {
  margin-left: .35rem; /* ruimte tussen label en caret */
}

/* Submenu diepte (zodat het niet onder andere elementen valt) */
.navbar .dropdown-menu {
  z-index: 1050;
  min-width: 220px;
}

.navbar-logo {
  height: 75px; /* of wat past */
  width: auto;
}

.navbar .nav-link img {
  display: block;
  height: 30px;
  width: 30px;
  object-fit: contain;
}


.construction-card {
    background-color: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 16px;
    color: white;
    padding: 40px;
}

.construction-icon {
    font-size: 4rem;
    color: rgb(192,216,143);
    margin-bottom: 20px;
}

.construction-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.construction-subtitle {
    font-size: 1.3rem;
    margin-bottom: 30px;
    opacity: 0.95;
}

.construction-text {
    font-size: 1.1rem;
    line-height: 1.8;
}

@media (max-width: 768px) {

    .construction-title {
        font-size: 2rem;
    }

    .construction-card {
        padding: 25px;
    }
}

/* QUICK RAIL – ultracompact linkbalk */
.quick-rail {
  margin-top: 2rem;
  border-top: 1px solid rgba(100,110,98,0.15);
  padding-top: 0.8rem;
}
.quick-rail__list,
.quick-rail__list-pt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.quick-rail__list a {
  color: rgb(192,216,143); /* #2f4f3f; */
  font-weight: 600;
  text-decoration: none;
}
.quick-rail__list-pt a {
  color: rgb(2,111,229);
  font-weight: 600;
  text-decoration: none;
}
.quick-rail__list a:hover,
.quick-rail__list-pt a:hover { text-decoration: underline; }