/* Hero Blok CSS */
.hero-small {background-color: #333;background-image: url('/media/uxlnijmu/background-header-massagerij.png');background-size: cover;background-position: center;}
.hero-big {background-color: #333;background-image: url('/media/uqpb3y34/shutterstock_732336370.jpg');background-size: cover;background-position: center;background-blend-mode: overlay;}
.hero-big .shadow-image {border-radius: 500px; margin: 0 20px; box-shadow: 0 0 0 rgba(6,177,168, 0.8); animation: pulse 2s infinite;}
.hero-background{background-color: #333;background-size: cover;background-position: center;background-blend-mode: overlay;}
.navbar>div {background:#06b1a8; color:#fff;}
.hero-big h1 { font-weight: 700;color: #fff;text-shadow: 5px 5px 10px rgb(0 0 0 / 44%); }    
.hero-big .button-accent{background:#f87272}
.hero-big .button-primary-outline {border-color:#fff; color:#fff; }
.logo {height: 70px;width: 240px;}

/* Topbar */
.navbar>div {background:#06b1a8; color:#fff;}
.navbar>div a {color:#fff;}
.navbar>div a:hover {text-decoration: underline};

/*Navigatie */
.navbar nav.container {padding: 20px 0px;}

/* Basis elementen */
h1, h2, h3, h4, h5, h6 {font-weight:700;}
a:hover{ color: #057872;}
.border-accent {border-color: #057872;}
.button-accent:hover, .button-accent-outline:hover, .button-primary:hover, .button-primary-outline:hover, .button-secondary:hover, .button-secondary-outline:hover {color:#fff; background:#057872;border-color: #057872;}
.button-accent, .button-accent-outline, .button-primary, .button-primary-outline, .button-secondary, .button-secondary-outline {text-transform: uppercase;padding: 15px 40px;font-size: 14px; font-weight:bold; border-radius: 40px; letter-spacing: 1px;}
.button-accent {background: #f87272;}
.prose a{color:#06b1a8;}
.prose ul li{ margin:0;}


/* Diensten blokken CSS */
.ServiceBlocksComponent  {background:#f4f4f4;}
.ServiceBlocksComponent .h-32 {height: 300px;}
.ServiceBlocksComponent .shadow-card {background:#fff; border-radius: 22.5px;-webkit-box-shadow: 0 3px 3px rgba(32, 22, 53, .1);box-shadow: 0 3px 3px rgba(32, 22, 53, .1);}
.ServiceBlocksComponent .shadow-card h3.text-white{color:#06b1a8;}
.ServiceBlocksComponent .shadow-card p.text-white {color: #333;font-size: 14px;}
.ServiceBlocksComponent .shadow-card .button-primary {display:block;}

/* ContactButtonsComponent */
.ContactButtonsComponent span{display:none;}
.CallToActionComponent .shadow-card {background: #4f555e; border-radius:22.5px;}
.CallToActionComponent .shadow-card .button-accent:first-child {background:#06b1a8;}

/*ReviewsComponent */
.ReviewsComponent{background-image: url('/media/ojah0hvb/paral-1.jpg');background-size: cover;background-position: center; background-attachment:fixed;}
.ReviewsComponent .bg-base-200\/40.py-8.md\:py-16 { background-color: unset;}
.ReviewsComponent .fill-black { fill: #06b1a8;}
.ReviewsComponent .splide__pagination button {background: #fff;border-radius: 40px;}

/* pakketten component */
.BasicPlansComponent .text-lg {  font-size: 15px;}
.BasicPlansComponent .bg-base-200\/40.py-8.md\:py-16 { background-color: unset;}
.BasicPlansComponent {background-color: #333; background-image: url('/media/uqpb3y34/shutterstock_732336370.jpg'); background-size: cover;background-position: center; background-attachment:fixed; background-blend-mode: overlay;}

/* Formulieren */
.umbraco-forms-form input, .umbraco-forms-form select, .umbraco-forms-form textarea {border: 0 !important;border-radius: 4px; box-shadow: 1px 1px 6px 1px #d7d7d7; }
.umbraco-forms-label, .umbraco-forms-form legend {color: #057872;font-weight: 700;}
.umbraco-forms-form input[type=submit]{border-radius:40px; box-shadow:none;}
.umbraco-forms-form fieldset {margin:0 !important;}

/* Footer*/
footer {background: #4f555e;padding: 120px 0 0;gap: 50px 0;}
footer .prose-footer img {width:unset; max-width:unset;}
footer .prose-footer strong {color: unset;}
footer .text-xl {color: #06b1a8;}
footer p.container svg {fill: #fff;}
@media only screen and (max-width: 1200px) {
    .navbar>div a {color:#333;}
    .logo {padding-left:20px;}
    .ContactButtonsComponent {text-align:center;}
    .ContentImageComponentlight-grey figure img, .ContentImageComponent figure img{ border-radius:22.5px;}
    .CallToActionComponent .flex {display: inline-grid; justify-items: center;}
    footer, footer .flex.flex-col.gap-2{ display: inline-grid; justify-items: center; text-align:center;}
    nav button svg {fill:#06b1a8; stroke:#06b1a8;}
}
@media only screen and (min-width: 1027px) {
    .hero-big h1 {font-size:60px;}
}
    @-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3);
    box-shadow: 0 0 0 0 rgba(255,255,255, 0.3);   
  }
  70% {
      -webkit-box-shadow: 0 0 0 20px rgba(255,255,255, 0);
      box-shadow: 0 0 0 20px rgba(255,255,255, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0);
    }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3);
    box-shadow: 0 0 0 0 rgba(255,255,255, 0.3);
  }
  70% {
      -moz-box-shadow: 0 0 0 20px rgba(255,255,255, 0);
      box-shadow: 0 0 0 20px rgba(255,255,255, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
      box-shadow: 0 0 0 0 rgba(255,255,255, 0);
  }
}