* {
  padding: 0;
  margin: 0;
}

:root {
  scroll-behavior: smooth;
}

/* Huis van de Rust - CSS file */

/* Special styles that go first */
.form-check.off-ramp {
  position: absolute;
  left: -10000px;
}

.hidden {
  display: none;
}

/* @Group Spinner Loader */
.spinner-wrapper {
  background: #e0eafc !important;
  /* fallback for old browsers */
  /* background: -webkit-linear-gradient(to right, #FFFFFF, #e0eafc, #cfdef3)!important;   */
  background: -webkit-linear-gradient(to right,
    #ffffff,
    /*  #eff1f7 */
    #eff1f7
    /* #e0eafc, */
    #edf2f9
    /* #e0eafc */
    ) !important;
  /* Chrome 10-25, Safari 5.1-6 */
  /* background: linear-gradient(to right, #FFFFFF, #e0eafc, #cfdef3)!important;  */
  background: linear-gradient(to right, hsl(0, 0%, 100%), #eff1f7, #edf2f9) !important;
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  /* transition: all 0.5s; */
}

.spinner-border {
  height: 60px;
  width: 60px;
  color: deepskyblue;
}

/* @End Spinner Loader */

/* @Group UIGRADIENTS  */
.gradient01 {
  /* https://uigradients.com/#Wiretap */
  background: #8a2387;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #f27121, #e94057, #8a2387);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(225deg,
    #f27121,
    #e94057,
    #8a2387);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.gradient02 {
  /* https://uigradients.com/#Ohhappiness */
  background: #00b09b;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #96c93d, #00b09b);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top,
    #96c93d,
    #00b09b);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/* @End UIGRADIENTS  */

/* End of Special styles that go first */

body {
  /* height: 5000px;
    overflow: hidden; */
  /* background-color: rgba(248, 248, 255, 0.4); */
  /* background-color: #f8f9fa !important; */
  background: #e0eafc !important;
  /* fallback for old browsers */
  /* background: -webkit-linear-gradient(to right, #FFFFFF, #e0eafc, #cfdef3)!important;   */
  background: -webkit-linear-gradient(to right,
    #ffffff,
    /*  #eff1f7 */
    #eff1f7
    /* #e0eafc, */
    #edf2f9
    /* #e0eafc */
    ) !important;
  /* Chrome 10-25, Safari 5.1-6 */
  /* background: linear-gradient(to right, #FFFFFF, #e0eafc, #cfdef3)!important;  */
  background: linear-gradient(to right, hsl(0, 0%, 100%), #eff1f7, #edf2f9) !important;
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  /* color: #212529; */
  color: rgba(0, 0, 0, 0.8) !important;
}

/* @group Proposed Colours to use */

/* Colour #1 (Main Colour)
  Usage: 
  - 
  - 
  - 
  -
  */
.colour-01 {
  /* Magnolia - via Chatbolt.ai // Coolors.co */
  color: #fcf7ff;
  color: aliceblue;
}

/* Colour #2: (Secondary Colour)
  Usage: 
  - 
  - 
  - 
  -
  */
.colour-02 {
  /* Fluorescent Cyan - via Chatbolt.ai // Coolors.co */
  color: #54f2f2;
  /* color: aqua; */
}

/* Colour #3: (Tertiary Colour)
  Usage: 
  - 
  - 
  - 
  -
  */
.colour-03 {
  /* True Blue - via Chatbolt.ai // Coolors.co */
  color: #5171a5;
  /* color: gold; */
}

/* Colour #4: (Quartiary Colour)
  Usage: 
  - 
  - 
  - 
  -
  */
.colour-04 {
  /* Oxford Blue - via Chatbolt.ai // Coolors.co */
  color: #000022;
  /* color: gold; */
}

/* Colour #5: (Quartiary Colour)
  Usage: 
  - 
  - 
  - 
  -
  */
.colour-05 {
  /* Tiffany Blue - via Chatbolt.ai // Coolors.co */
  color: #7fd1b9;
  /* color: gold; */
}

/* @end Proposed Colours to use */

h2>span.special-body-text-01 {
  color: aqua;
}

section.divider {
  padding: 100px 0;
  border-bottom: 1px solid gainsboro;
  /* border-top: 1px solid #00000080; */
}

section.divider.even {
  background-color: aliceblue;
}

section.divider.odd {
  background-color: rgba(255, 255, 255, 0.2);
}

h1 {
  font-size: 64px;
  font-weight: 400;
  line-height: 76px;
  letter-spacing: normal;
}

h2.title,
.container>h2,
section>h2 {
  text-align: center;
  padding-bottom: 50px;
}

.section-title {
  padding: 100px 0 30px;
  position: relative;
  text-align: center;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  /* margin-bottom: 20px; */
  /* padding-bottom: 20px; */
  text-transform: uppercase;
  position: relative;
}

mark {
  background-color: aliceblue;
}

/* Block Quotes */

body.dr-Els-Pieters {
  /* background: #f5f5f5; */
}

.container {}

blockquote {
  font-size: 1.1em;
  line-height: 1.6em;
  padding: 20px 20px 20px 40px;
  border-left: none;
  position: relative;
  text-indent: -19px;
}

blockquote p {
  font-size: 1em;
}

blockquote:before,
blockquote:after {
  font-family: Arial, serif;
  font-size: 2.5em;
  vertical-align: middle;
  line-height: 0;
}

blockquote:before {
  content: open-quote;
  margin-right: 4px;
}

blockquote:after {
  content: close-quote;
  margin-left: 3px;
}

blockquote.blockstyle,
blockquote.style2 {
  background: #fff;
  font-style: italic;
}

blockquote.blockstyle p,
blockquote.style2 p {
  display: inline;
}

blockquote.blockstyle {
  border-left: 3px solid #f0715f;
  position: relative;
}

blockquote.blockstyle>span.triangle:before {
  text-indent: 0;
  content: "\f0da";
  font-family: FontAwesome;
  color: #f0715f;
  position: absolute;
  left: -1px;
  top: 50%;
  margin-top: -11px;
  font-style: normal;
}

blockquote.blockstyle:before,
blockquote.blockstyle:after {
  color: #f0715f;
}

blockquote.blockstyle.border-color-blue {
  border-color: #01b7f2;
}

blockquote.blockstyle.border-color-blue>span.triangle:before {
  color: #01b7f2;
}

blockquote.blockstyle.border-color-yellow {
  border-color: #fdb714;
}

blockquote.blockstyle.border-color-yellow>span.triangle:before {
  color: #fdb714;
}

/* @Group TOASTS */
.toast-container.fade {
  /* This supposed to fade all toasts in 1s instead of 0.15s but it doesn't work */
  /* transition: opacity 1s linear !important; */
}

/* @End TOASTS */

/* @Group Settings Off Canvas */
a#webdev,
a#showOffCanvas1 {
  border: 2px solid #000;
  border-radius: 6px;
  color: #000;
  /* background-color: aqua; */
}

a#webdev:hover,
a#showOffCanvas1:hover {
  color: aliceblue;
  border: 2px solid transparent;
  background-color: deepskyblue;
}

/* @Group Carousel Play Buttons */
.play-buttons {
  /* bottom: 65px;
  left: 10px; */
  height: 50px;
}

.play-button,
.pause-button {
  width: 50px;
  height: 50px;
  font-size: 35px;
  line-height: 35px;
  text-align: center;
  color: #000;
  border: 2px solid #000;
  border-radius: 6px;
  background-color: aliceblue;
  padding: 0;
  margin: 0;
}

.pause-button {}

.play-button:hover,
.pause-button:hover,
.play-button:active,
.pause-button:active {
  /* background-color: rgba(220, 220, 220, 0.3); */
  /* background-color: indianred; */
  /* padding: 0 !important; */
  /* margin: 0 !important; */
  color: deepskyblue;
  border: 2px solid deepskyblue;
  border-radius: 6px;
}

@media (min-width: 768px) {

  .play-button,
  .pause-button {
    /* bottom: 25%; */
    /* top: auto; */
  }
}

.heroCarousel-control-next,
.heroCarousel-control-prev {
  height: 50px;
  padding: 0;
  color: #000;
  font-size: 35px;
  line-height: 35px;
  font-weight: bold;
  text-align: center;
  background-color: #000;
  border: 2px solid #000;
  border-radius: 6px;
  width: 50px;
}

.heroCarousel-control-next:hover,
.heroCarousel-control-prev:hover {
  height: 50px;
  padding: 0;
  color: #000;
  font-size: 35px;
  line-height: 35px;
  font-weight: bold;
  text-align: center;
  background-color: aliceblue;
  border: 2px solid deepskyblue;
  border-radius: 6px;
  width: 50px;
}

/* @End Carousel Play Buttons */

/* NAVBAR */
.navbar {
  /* color: whitesmoke; */
  /* background: rgba(0, 0, 0, 0.8); */
  transition: all 0.5s;
}

.navbar {
  background-color: transparent;
  /* Transparent by default */
  transition: background-color 0.3s ease;
  /* Smooth transition for background color */
}

/* choose which one you like */
body.scrolled .navbar,
body.active-navbar .navbar {
  background-color: rgba(0, 0, 0, 0.7);
  /* background-color: aliceblue; */
  /* background-image: -webkit-linear-gradient(35deg, #191970 10%, #00bfff 90%); */
  /* background-image: linear-gradient(35deg, #191970 10%, #00bfff 90%); */
  background-image: radial-gradient(circle at bottom left, rgba(25, 25, 112, 0.5) 10%, rgba(0, 191, 255, 0.5) 90%);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
}

.navbar .navbar-brand,
.navbar .navbar-nav .nav-item>a.nav-link>span.the-link {
  color: whitesmoke;
  /* filter: drop-shadow(-3px 0px 4px rgba(0, 0, 0, 0.4)); */
  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.4));
}

button.navbar-toggler {
  /* border-color: whitesmoke; */
}

nav.navbar.navbar-light {
  /* border-bottom: 1px solid rgb(215, 212, 212); */
  background-color: rgba(220, 220, 220, 0.3);
  background-color: rgba(240, 248, 255, 0.7);
  /* background-color: transparent; */
  color: dodgerblue;
}

nav.navbar.navbar-dark {
  background-color: rgba(0, 0, 0, 0.8);
  color: crimson;
}

a.nav-link {
  box-shadow: none !important;
}

a.nav-link.active {
  font-weight: bold;
  text-transform: uppercase;
  /* Test 1 */
  /* background: darkturquoise; */
  border-bottom: 2px solid darkorange;
  /* Test 2 */
  /* background: darkred;
  border-bottom: 2px solid crimson; */
  /* Test 3 */
  /* background-color: deepskyblue;
  border-bottom: 2px solid orange; */
  box-shadow: none !important;
}

a.nav-link:hover {
  /* font-weight: bold; */
  /* Test 1 */
  /* background: darkcyan; */
  /* background-color: deeppink; */
  background-color: deepskyblue;
  /* border-bottom: 2px solid darkturquoise; */
  border-bottom: 2px solid deepskyblue;
  /* border-bottom: 2px solid darkorange; */
  /* Test 2 */
  /* background: darkred;
  border-bottom: 2px solid crimson; */
  /* Test 3 */
  /* background: orange;
  border-bottom: 2px solid deepskyblue; */

  /* transition: 0.3s; */
  box-shadow: none !important;
  transition: border-color 0.3s ease-out;
  transition: background-color 0.3s ease-out;
}

a.nav-link.active:hover {
  border-bottom: 2px solid darkorange;
}

/* Custom Colours - Toggler Icon */
.toggler-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28245, 245, 245, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.1));
}

.toggler-light.navbar-toggler {
  /* border-color: dodgerblue; */
  border-color: whitesmoke;
  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.1));
}

.toggler-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.toggler-dark.navbar-toggler {
  /* border-color: crimson; */
  border-color: black;
}

/* HERO CAROUSEL */

section.hero-carousel {
  /* height: 100vh; */
  border-bottom: 2px solid gainsboro;
}

@media (min-width: 992px) {
  section.hero-carousel {
    /* height: 100vh; */
  }
}

/* Carousel  */
#heroCarousel {
  z-index: -1;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.carousel-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-car-item {
  height: 100%;
}

.hero-car-img-bg {
  height: 100%;
  min-height: initial;
  /* place it in the center */
  object-position: 50% 60%;
  object-fit: cover;
}

@media (max-width: 992px) {
  .hero-car-img-bg {
    height: 100%;
  }
}

/* change transition duration to control the speed of fade effect */
#heroCarousel .carousel-item {
  transition-duration: 5s;
  /* Adjust the duration as needed */
  transition-timing-function: ease-in-out;
}

#heroCarousel .carousel-fade .active.carousel-item-start,
#heroCarousel .carousel-fade .active.carousel-item-end {
  transition: opacity 0s 7s;
}

/* Overlay Brightness Filters */
.brightness-9 {
  filter: brightness(0.9);
}

.brightness-8 {
  filter: brightness(0.8);
}

.brightness-7 {
  filter: brightness(0.7);
}

.brightness-6 {
  filter: brightness(0.6);
}

.brightness-5 {
  filter: brightness(0.5);
}

.brightness-4 {
  filter: brightness(0.4);
}

.brightness-3 {
  filter: brightness(0.3);
}

.brightness-2 {
  filter: brightness(0.2);
}

.brightness-1 {
  filter: brightness(0.1);
}

/* HEADER STYLES */

header {
  /* height: 100vh; */
}

.slogan {
  filter: drop-shadow(-3px 0px 4px rgba(0, 0, 0, 0.4));
}

.lead-slogan {
  filter: drop-shadow(-3px 0px 4px rgba(0, 0, 0, 0.4));
}

/* 
.
.
.
.
.
.
declutter space start
.
.
.
.
.
.
.
*/

/* HEADER ICONS */

a.icon-box,
a.icon-box:link,
a.icon-box:hover,
a.icon-box:active,
a.icon-box:focus,
a.icon-box:visited {
  position: relative;
  text-decoration: none;
  color: inherit;
  /* height: 170px; */
  /* width: 150px; */
  height: auto;
  width: auto;
}

/* @Group Default Styles */

.hero-cards .header-icon {
  /*  */
}

.icon-img {
  border-radius: 0.75rem;
  /* shade of aqua */
  /* background-color: rgba(0, 255, 255, 0.3); */
  /* border: 1px solid aquamarine; */
  border: 1px solid transparent;
  width: 100px;
  height: 100px;
}

/* @Group Card Lift Styles */
.card-lift {
  border-radius: 0.75rem;
  transition: all 0.2s ease-in-out;
  position: relative;
  /* Important for context of absolute positioning */
  z-index: 1;
  /* Ensure the card appears above other elements */
}

a.icon-box:hover {
  & .card-lift {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-0.25rem);
    /* border: 1px solid floralwhite; */
    /* On hover, position absolutely */
    /* position: absolute;  */
    /* Align to the top of its parent */
    /* top: 0;  */
    /* Align to the left of its parent */
    /* left: 0;  */
  }
}

.card-lift-no-shadow {
  border-radius: 0.75rem;
  transition: all 0.2s ease-in-out;
  position: relative;
  /* Important for context of absolute positioning */
  z-index: 1;
  /* Ensure the card appears above other elements */
}

a.icon-box:hover {
  & .card-lift-no-shadow {
    /* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; */
    transform: translateY(-0.25rem);
    /* border: 1px solid floralwhite; */
    /* On hover, position absolutely */
    /* position: absolute;  */
    /* Align to the top of its parent */
    /* top: 0;  */
    /* Align to the left of its parent */
    /* left: 0;  */
  }

  & .card-lift-no-shadow>svg {
    /* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; */
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
  }
}

/* @End Card Lift Styles */

.svg-full-colour {
  /* fill: black; */
}

.icon-box.svg-outlines-only svg path.svg-path-outlines {
  fill: floralwhite;
}

.icon-title {
  color: floralwhite;
  filter: drop-shadow(-3px 0px 4px rgba(0, 0, 0, 0.4));
}

.icon-footer {
  color: floralwhite;
}

/* @End Default Styles */

/* @Group SVGs in header icons */
svg.header-icons {
  /* height: 15vh;
  object-fit: fill;
  border: none; */
}

/* Icon Box - Hover BGs - Default Definitions */

.hoverbg-01,
.hoverbg-02,
.hoverbg-03 {
  position: relative;
  /* importante: otherwise we see a slight shift in position */
  /* border: 1px solid transparent; */
}

/* Icon Box - Hover Borders - Default Definitions */
.hoverborder-0 {
  border: 1px solid transparent !important;
}

/* Icon Box - SVG path colours and strokes - Defaults */
.lotus-flower-path {
  /* fill: aqua; */
  fill: aliceblue;
}

.puzzle-head-path {
  /* fill: gainsboro; */
  fill: aliceblue;
}

.heart-pulse-path {
  /* fill: cornflowerblue; */
  fill: aliceblue;
}

/* @Group HOVER ICON SETS */
a.icon-set-01.icon-box:hover {
  color: aqua;

  & .icon-img {
    border: 1px solid aqua;
    border-radius: 0.75rem;
  }

  & .lotus-flower-path,
  .puzzle-head-path,
  .heart-pulse-path {
    fill: aqua;
  }
}

a.icon-set-02.icon-box:hover {
  color: gold;

  & .icon-img {
    border: 1px solid gold;
    border-radius: 0.75rem;
  }

  & .lotus-flower-path,
  .puzzle-head-path,
  .heart-pulse-path {
    fill: gold;
  }
}

a.icon-set-03.icon-box:hover {
  color: deeppink;

  & .icon-img {
    border: 1px solid deeppink;
    border-radius: 0.75rem;
  }

  & .lotus-flower-path,
  .puzzle-head-path,
  .heart-pulse-path {
    fill: deeppink;
  }
}

/* @End HOVER ICON SETS */

/* @Group ICONS HIDDEN or SHOWN */

/* default settings */

/* a.icon-box.svg-full-colour  */
/* a.icon-box.svg-outlines-only */
/* @End ICONS HIDDEN or SHOWN */

/* START /////========> ICON OVERRIDES <========///// */
/* Icon Box - Text Colour overrides */

/* @Group Icon Box - Icon BG overrides */
a.icon-box:hover {
  & .hoverbg-01 {
    /* Gradient border */
    /* background-color: #0093e9; */
    /* fallback for old browsers */
    background-image: -webkit-linear-gradient(35deg, #0093e9 0%, #80d0c7 65%);
    /* Chrome 10-25, Safari 5.1-6 */
    background-image: linear-gradient(35deg, #0093e9 0%, #80d0c7 65%);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }

  & .hoverbg-02 {
    /* https://uigradients.com/#Ohhappiness */
    /* background: #00b09b;  */
    /* fallback for old browsers */
    background: -webkit-linear-gradient(35deg, #96c93d, #00b09b);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(35deg,
      #96c93d,
      #00b09b);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }

  & .hoverbg-03 {
    /* https://uigradients.com/#Wiretap */
    /* background: #8a2387;  */
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #f27121, #e94057, #8a2387);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(225deg,
      #f27121,
      #e94057,
      #8a2387);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
}

/* @End Icon Box - Icon BG overrides */

/* @Group Icon Box - SVG Fill overrides */
a.svg-outlines-only.icon-box:hover {

  .svg-fill-01 .lotus-flower-path,
  .svg-fill-01 .heart-pulse-path,
  .svg-fill-01 .puzzle-head-path {
    fill: aquamarine !important;
  }

  .svg-fill-02 .lotus-flower-path,
  .svg-fill-02 .heart-pulse-path,
  .svg-fill-02 .puzzle-head-path {
    fill: gold !important;
  }

  .svg-fill-03 .lotus-flower-path,
  .svg-fill-03 .heart-pulse-path,
  .svg-fill-03 .puzzle-head-path {
    fill: deeppink !important;
  }
}

/* @End Icon Box - SVG Fill overrides */

/* @Group Icon Box - SVG SWAPS overrides */
a.svg-full-colour.icon-box:hover {
  svg.black-outlines.svgs {
    fill: black;
  }

  .svg-fill-01 .lotus-flower-path,
  .svg-fill-02 .heart-pulse-path,
  .svg-fill-02 .puzzle-head-path {
    fill: aquamarine !important;
  }

  .svg-fill-02 .lotus-flower-path,
  .svg-fill-02 .heart-pulse-path,
  .svg-fill-02 .puzzle-head-path {
    fill: gold !important;
  }

  .svg-fill-03 .lotus-flower-path,
  .svg-fill-02 .heart-pulse-path,
  .svg-fill-02 .puzzle-head-path {
    fill: deeppink !important;
  }
}

/* @End Icon Box - SVG SWAPS overrides */

/* @Group Icon Box - Icon Border overrides */
a.icon-box:hover {
  & .hoverborder-01 {
    border: 1px solid aqua !important;
    border-radius: 0.75rem;
    color: aqua;
  }

  & .hoverborder-02 {
    border: 1px solid gold !important;
    border-radius: 0.75rem;
    color: gold;
  }

  & .hoverborder-03 {
    border: 1px solid deeppink !important;
    border-radius: 0.75rem;
    color: deeppink;
  }
}

/* @End Icon Box - Icon Border overrides */

/* @Group Icon Box - Title Colour overrides */
a.icon-box:hover {
  & .icon-title-colour-01 {
    color: #00ffff;
  }

  & .icon-title-colour-02 {
    color: gold;
  }

  & .icon-title-colour-03 {
    color: deeppink;
  }
}

/* @End Icon Box - Title Colour overrides */

/* END /////========> ICON OVERRIDES <========///// */

/* @End Group SVGs in header icons */

/* 
.
.
.
.
.
.
declutter space end 
.
.
.
.
.
.
.
*/

img.header-icons {
  height: 15vh;
  object-fit: fill;
  /* border: 1px solid aqua; */
  border: 1px solid #00ffff;
  border-radius: 0.75rem;
  /* filter: drop-shadow(-3px 0px 4px rgba(0, 0, 0, 0.1)); */
  /* transition: transform 0.7s ease-in-out, border-color 0.7s ease-in-out, background-color 0.7s ease-in-out,
    box-shadow 0.7s ease-in-out; */
}

img.header-icons:hover {
  filter: drop-shadow(-3px 0px 8px rgba(0, 0, 0, 0.2));
  /* transition: transform 0.7s ease-in-out, border-color 0.7s ease-in-out, background-color 0.7s ease-in-out,
    box-shadow 0.7s ease-in-out; */
}

.header-icons.img-fluid.imgs {
  position: absolute;
  opacity: 0;
}

.header-icons.img-fluid.imgs:hover {
  opacity: 1;
  /* transition: 200ms; */
}

.header-icons.img-fluid.svgs:hover {
  /* We are using nesting here */
  /* & .lotus-flower-path { */
  /* fill: aqua; */
  /* fill: aliceblue; */
  /* } */
  /* opacity: 0; */
  /* transition: 200ms; */
}

header .header-container {
  padding-top: 200px;
  min-height: 90vh;
}

@media (max-width: 576px) {
  header .header-container {
    /* this is been kicked out because it pushes the header down */
    /* margin-top: 150px; */
    /* padding-top: 150px; */
  }

  img.header-icons {
    /* height: 10vh; */
  }
}

.hero-cards .my-card {
  /* shade of aqua */
  /* background-color: rgba(0, 255, 255, 0.3); */
}

.hero-cards .my-card.black {
  /* display: none; */
}

.hero-cards .my-card.coloured {
  /* display: none; */
}

.gradient-box {
  display: flex;
  align-items: center;
  /* width: 90%; */
  margin: auto;
  /* max-width: 22em; */
  position: relative;
  /* padding: 30% 2em; */
  box-sizing: border-box;
  /* color: #fff; */
  /* background: #000; */
  background-clip: padding-box;
  /* !importanté */
  border: solid 4px transparent;
  /* !importanté */
  border-radius: 1em;
  /* background: transparent; */
}

.gradient-box::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: -3px;
  /* !importanté */
  border-radius: inherit;
  /* !importanté */
  background: linear-gradient(54deg, #0093e9 0%, #80d0c7 100%);
  /* background: linear-gradient(to right, red, orange); */
  /* background: linear-gradient(to right, red, purple); */
}

/* Icons */

.card-img-top.hero-icon {
  width: 50px;
}

i#user-doctor,
i#puzzle-piece,
i#yin-yang {
  text-shadow: 1px 1px 1px #ccc;
  font-size: 3em;
}

.accordion-body {}

.accordion-body img {
  height: 300px;
  object-fit: cover;
}

/* Screen Width Box */

.screen-width {
  position: absolute;
  font-size: 45px;
  font-weight: bold;
  color: black;
  /* padding: 5px; */
  text-align: center;
  /* background-color: rgba(245, 245, 220, 0.6); */
  background-color: rgba(220, 220, 220, 0.8);
  width: auto;
  height: auto;
  bottom: 45px;
  right: 45px;
  margin: auto 25px 25px auto;
  border: 1px solid #eee;
  border-radius: 5px;
  z-index: 1000;
  display: inline-block;
}

.screen-width-breakpoint {
  font-size: 20px;
  font-size: 1rem;
}

.screen-width-in-px {}

/* Features Gallery */

.features.container {
  /* max-width: 1224px;
    width: 90%;
    margin: auto;
    padding: 40px 0; */
}

.title {
  margin-bottom: 2rem;
}

.photo-gallery {
  gap: 9px;
}

.column {
  flex-direction: column;
  width: 32%;
}

img.photo-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: 5px;
  box-shadow: 1px;
  flex: 1 1 0px;
}

@media (min-width: 576px) {
  img.photo-item {
    margin-bottom: 0px;
  }
}

.photo.landscape {
  /* height: 24%; */
  /* width: 300px; */
  /* width: 100%; */
  /* height: 100%; */
  /* object-fit: cover; */
  /* gap: 20px; */

  /* height: 300px; */
}

.photo.portrait {
  /* height: 48%; */
  /* width: 300px; */
  /* width: 100%; */
  /* height: 100%; */
  /* object-fit: cover; */
  /* gap: 20px; */

  /* height: 600px; */
}

/* photo gallery lightbox */

/* @Group Photo Gallery Masonry */
.grid-wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(autofit, minmax(100px, 1fr));
  /* grid-auto-rows: 50px; */
  /* grid-auto-flow: dense; */
}

.grid-wrapper-random {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 65px;
  grid-auto-flow: dense;
}

@media screen and (min-width: 768px) {
  .grid-wrapper-random {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    grid-auto-rows: 80px;
    grid-auto-flow: dense;
  }
}

@media screen and (min-width: 992px) {
  .grid-wrapper-random {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: 80px;
    grid-auto-flow: dense;
  }
}

.grid-wrapper-squares {
  display: grid;
  grid-gap: 10px;
  grid-auto-rows: 100px;
  grid-auto-flow: dense;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid-wrapper .wide {
  grid-column: span 4;
  grid-row: span 4;
}

.grid-wrapper .tall {
  grid-row: span 4;
}

.grid-wrapper .big {
  grid-column: span 2;
  grid-row: span 2;
}

.grid-wrapper .half {
  grid-column: span 1;
  grid-row: span 2;
}

.grid-wrapper-random .wide {
  grid-column: span 4;
  grid-row: span 4;
}

.grid-wrapper-random .tall {
  grid-row: span 4;
}

.grid-wrapper-random .big {
  grid-column: span 2;
  grid-row: span 2;
}

.grid-wrapper-random .half {
  grid-column: span 1;
  grid-row: span 2;
}

.grid-wrapper>.grid-inner img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
}

.grid-wrapper-random>.grid-inner img,
.grid-wrapper-squares>.grid-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.halfBox,
.bigBox,
.tallBox,
.wideBox {
  background-color: darkorange;
  border-radius: 6px;
  border: 3px solid black;
  text-align: center;
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
  margin: 10px;
  z-index: 100;
}

.photoSizeDisplayed {
  font-size: 2rem;
  color: black;
  padding: 10px;
  margin: 10px;
}

/* @End Photo Gallery Masonry */

.lightbox-carousel .carousel-item.active div.ratio {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

figure>.feature-img {
  width: 500px;
  height: 500px;
  object-fit: cover;
}

.bg-blue-gradient-bottom {
  background: #000046;
  background: -webkit-linear-gradient(to right, #1cb5e0, #000046);
  background: linear-gradient(to bottom, #1cb5e0, #000046);
}

.bg-blur {
  /* content: "something"; */
  height: 100%;
  width: 100%;
  /* background-color: seagreen; */
  background-image: url("../assets/images/photos/interior/md/max-van-den-oetelaar-heaO-oWVT_g-unsplash-md.jpeg");
  /* background-image: url("../assets/images/photos/team/avatar-lead-marketer.png"); */
  object-fit: cover;
  backdrop-filter: blur(5px);
  /* position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; */
}

.bg-image {
  background-image: url("../assets/images/photos/interior/md/max-van-den-oetelaar-heaO-oWVT_g-unsplash-md.jpeg");
  width: 100%;
  height: 100%;
}

/* @Group SimpleLightBox */
.sl-overlay {
  background-color: #000;
}

.sl-wrapper .sl-close,
.sl-wrapper .sl-counter,
.sl-wrapper .sl-navigation button {
  color: rgba(240, 248, 255, 0.6);
  font-size: 2rem;
}

.sl-wrapper .sl-close {
  font-size: 4rem;
  font-family: inherit;
  font-weight: lighter;
}

.sl-wrapper .sl-counter {
  position: fixed;
  top: 25px;
  left: 25px;
}

@media (min-width: 35.5em) {

  .sl-wrapper .sl-navigation button.sl-prev,
  .sl-wrapper .sl-navigation button.sl-next {
    font-size: 6rem;
  }
}

/* @End SimpleLightBox */

/* Cookie banner */

.cookie-consent {
  position: fixed;
  bottom: 0px;
  width: 100%;

  height: 45px;
  color: #fff;
  line-height: 20px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 14px;
  background: #292929;
  z-index: 120;
  cursor: pointer;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-header {
  background-color: aliceblue;
}

.allow-button {
  height: 20px;
  width: 104px;
  color: #fff;
  font-size: 12px;
  line-height: 10px;
  border-radius: 3px;
  border: 1px solid green;
  background-color: green;
}

section.google-form>iframe {
  /* width: 100vw; */
  width: 90%;
  margin: 0px auto;
  height: 100%;
}

#intakeGForm1 iframe,
#intakeGForm2 iframe {
  min-width: 100%;
  min-height: 100%;
}

section.google-map>iframe {
  height: 100vh;
  width: 100%;
  margin: 0px auto;
}

@media (min-width: 768px) {
  section.google-map>iframe {
    height: 400px;
  }
}

/* Features */

.feature {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
  width: 4rem;
  font-size: 2rem;
}

/* Settings  */

.setting {
  padding: 20px;
  background-color: whitesmoke;
  margin: 0 0 20px 0;
  border-radius: 6px;
}

/* Numbers */
.give-a-number {
  position: relative;
}

.number,
.number-bottom {
  display: none;
  line-height: 10px;
}

figure .give-a-number span.number,
.form-group.give-a-number span.number,
.photo.give-a-number span.number {
  position: absolute;
  top: 0;
  right: 0;
}

.number-bottom {
  top: auto;
  bottom: 30px;
}

.setting>.form-check {
  padding: 5px 10px 5px 30px;
  background-color: rgba(220, 220, 220, 0.5);
  margin: 0 0 2rem 0;
}

.setting .fontShown {
  background-color: rgba(220, 220, 220, 0.5);
}

#showNumbers {
  font-size: 14px;
}

/* End Numbers */


footer,
.cookie-consent {
  position: relative;
}


/* Under Construction Page */

.form-signin {
  max-width: 330px;
}

/* Modal styles */

.modal-sensitivo .modal-body,
.modal-sensitivo .modal-body>div {
  height: 200px;
}

.modal-sensitivo .modal-body>div {
  display: none;
}

a#belOns.btn,
div.phony button.btn {
  /* background-color: #007aff; */
  background: #007aff;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #2f80ed, #007aff);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right,
    #2f80ed,
    #007aff);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: white;
}

a#belOns.btn,
a#sendE-m.btn {
  animation: breathe 3s infinite ease-in-out;
}

@keyframes breathe {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.03);
  }

  100% {
    transform: scale(1);
  }
}

/* Contact Form Layout */
#contact .info-item {
  background-color: none;
  flex: 1;
}

@media (max-width: 767px) {
  .info-item {
    /* width: 30%; */
    background-color: rgba(240, 248, 255, 0.3);
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(240, 248, 255, 0.3);
  }
}

#contact i.bi {
  background-color: rgba(240, 248, 255, 0.3);
  border-radius: 5px;
  border: 1px solid rgba(240, 248, 255, 0.6);
}

/* Scroll to top */
.scroll-top {
  position: fixed;
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: deepskyblue;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.3s;
}

.scroll-top i {
  font-size: 24px;
  /* color: var(--contrast-color); */
  color: aliceblue;
  line-height: 0;
}

.scroll-top:hover {
  cursor: pointer;
  background-color: orange;
}

.scroll-top.show {
  opacity: 0.7;
  visibility: visible;
}

/* Team section */
.team-1,
#team-1 {
  /* background-color: rgb(45, 78, 168); */
  /* background-image: radial-gradient(circle, #0575e6, #274592); */
}

.team-2,
#team-2 {
  /* background-color: rgb(45, 78, 168); */
  background-image: radial-gradient(circle, #0575e6, #274592);
}

div.team-member {
  background-color: white;
  border-radius: 15px;
}

/* img.avatar is for Dokter Els Pieters.be website !!! */
img.avatar {
  /* background-color: rgb(250, 252, 252); */
  background-image: radial-gradient(circle at 52%, #00ffff, #fff0 63%);
  margin-top: -50px;
  max-width: 200px;
}

.team-member i.bi::before {
  color: rgba(0, 0, 0, 0.8);
}

.team-item {
  /* width: 33%; */
}

@media (max-width: 768px) {
  .team-item {
    width: 45%;
  }
}

@media (max-width: 576px) {
  .team-item {
    width: 85%;
  }
}

.team-pic-frame-1 {
  background-color: var(--white);
  background-image: radial-gradient(circle at 50%, #dbfdff, #ffffff03 65%);
  background-color: whitesmoke;
  margin-top: -50px;
}

.team-pic-frame-2 {
  background: deepskyblue;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top right, #0575e6 20%, deepskyblue);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top right,
    #0575e6 20%,
    deepskyblue);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  margin-top: -50px;
}

.team-pic-frame-3 {
  /* global 92%+ browsers support */
  background: radial-gradient(circle at 50% 50%, rgba(132, 132, 132, 1) 0%, rgba(0, 0, 0, 1) 81%);
  margin-top: -50px;
}

img.team-pic-1 {
  /* background-image: radial-gradient(circle at 50%, #dbfdff, transparent 65%); */
  /* background-image: radial-gradient(circle at 45%, skyblue 6%, transparent 61%); */
  /* background-image: radial-gradient(circle at 48%, #00ffff 10%, #fff0 59%); */
  background-image: radial-gradient(circle at 48%, rgba(0, 255, 255, 0.2) 10%, rgba(255, 255, 255, 0) 59%);
  /* Dark drop shadow */
  filter: drop-shadow(1px 14px 14px rgba(0, 0, 0, 0.3));
}

img.team-pic-2 {
  background-image: radial-gradient(circle at bottom left, midnightblue 10%, transparent 90%);
  /* filter: drop-shadow(0px 4px 4px rgba(0, 191, 255, 0.2)); */
  filter: drop-shadow(1px 7px 15px rgba(0, 191, 255, 0.2));
}

img.team-pic-3 {
  /* background-image: radial-gradient(circle at bottom left, midnightblue 10%, transparent 90%); */
  /* filter: drop-shadow(0px 4px 4px rgba(0, 191, 255, 0.2)); */
  filter: drop-shadow(1px 7px 15px rgba(0, 191, 255, 0.2));
}

@media (min-width: 768px) {
  img.team-pic-2 {
    /* darkblue card */
    background-image: radial-gradient(circle at bottom left, midnightblue 10%, transparent 90%);
    /* the faint aqua halo */
    /* background-image: radial-gradient(
      circle at 48%, 
      #e4fdfd 1%, 
      transparent 57%
      ); */
    /* blueviolet drop shadow */
    /* filter: drop-shadow(1px 14px 14px rgba(0, 191, 255, 0.7)); */
    /* white drop shadow */
    /* filter: drop-shadow(1px 7px 35px rgba(255, 255, 255, 0.4)); */
    /* deepskyblue dropshadow */
    /* filter: drop-shadow(1px 7px 35px rgba(0, 191, 255, 0.4)); */
    /* deepskyblue dropshadow */

    filter: drop-shadow(1px 7px 15px rgba(0, 191, 255, 0.2));
  }
}

.icon-image {
  width: 20%;
  color: #00bfff;
  /* filter: invert(64%) sepia(22%) saturate(2913%) hue-rotate(0deg)
    brightness(104%) contrast(101%); */
  /* filter: invert(100%) sepia(19%) saturate(6833%) hue-rotate(178deg)
    brightness(103%) contrast(114%); */
  filter: invert(58%) sepia(60%) saturate(2781%) hue-rotate(159deg) brightness(101%) contrast(106%);
}

.my-shadow {
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    /* 0 100px 80px rgba(0, 0, 0, 0.12) */
    0 5px 8px rgba(0, 0, 0, 0.12);
}

.subtle-shadow {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.colorTextStandout01 {
  color: dodgerblue;
}

.filter-brightness-06 {
  filter: brightness(0.6);
}

.font-type {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.85rem;
}

section.odd-even:nth-child(odd),
.odd {
  /* background-color: rgb(248, 249, 250); */
  /* color: #333; */
  border-bottom: 1px solid rgb(233, 236, 239);
  padding: 100px 0;
}

section.odd-even:nth-child(even),
.even {
  background-color: aliceblue;
  /* color: #333; */
  border-bottom: 1px solid rgb(173, 181, 189);
  padding: 100px 0;
}

@media (max-width: 576px) {
  .odd {
    padding: 100px 0;
  }

  .even {
    padding: 100px 0;
  }
}

.aliceblue {
  background-color: aliceblue;
}

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

.fonts-section {
  text-align: center;
}

@media (min-width: 576px) {

  #fonts4Headings .container,
  #fonts4Text .container {
    padding: 25px;
    border: 1px solid gainsboro;
    border-radius: 6px;
  }
}

@media (min-width: 992px) {

  #fonts4Headings .row.allow-scroll-lg,
  #fonts4Text .row.allow-scroll-lg {
    height: 70vh;
    overflow: scroll;
    /* background-color: gainsboro; */
    padding: 0 0 20px 0;
  }
}

.dropcap {
  float: left;
  font-size: 5em;
  /* Adjust the font size as needed */
  line-height: 1;
  margin-right: 10px;
  /* Adjust the margin as needed */
}

.dropcap+p {
  text-indent: 0;
}

section.test-font-accordion .tiny-img {
  height: 100px;
  width: 200px;
  object-fit: cover;
  border-radius: 6px;
  float: right;
  margin: 5px;
}

/* Icons for Feature Sections (Service Section) */
.icon-xl {
  width: 50px;
  height: 50px;
  padding: 10px;
}

figure>figcaption.figure-caption {
  font-size: 1rem;
  font-weight: 600;
  font-style: italic;
  color: rgba(0, 0, 0, 0.8);
}

/* Wellness Centrum - Specific Styles */

.wellness-booking .download-btn {}

/* parallax effect only on desktop or laptop */
#dr-Els-Pieters-challenge {
  color: floralwhite;
  /* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.8), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  border-bottom: 0;
}

.bg-holder::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* z-index: -1; */
  height: 100%;
  width: 100%;
  background-image: url("../../../assets/images/photos/interior/lg/zingevingscoaching-interieur-locatie--huis-van-de-rust-lg.jpeg");
  object-fit: cover;
  background-size: cover;
  background-position: 0% 50%;
  background-attachment: fixed;
  filter: brightness(0.6);
}

@media (max-width: 768px) {
  .bg-holder::before {
    background-attachment: scroll;
    /* or initial/inherit */
  }
}