abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
body div,
caption,
cite,
code,
dd,
del,
details,
dfn,
dl,
dt,
em,
fieldset,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: top;
  background: transparent;
}

article,
aside,
details,
figure,
footer,
header,
main,
nav,
section,
summary {
  display: block;
}

html {
  box-sizing: border-box;
}

*,
*:after,
*:before {
  box-sizing: inherit;
}

embed,
object {
  max-width: 100%;
}

html {
  overflow-y: scroll;
}

ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:after,
blockquote:before,
q:after,
q:before {
  content: "";
  content: none;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}

/* tables still need cellspacing="0" in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}

th {
  vertical-align: bottom;
}

td {
  vertical-align: top;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 15px;
  line-height: 1.1em;
}

input[type=radio] {
  vertical-align: text-bottom;
}

input[type=checkbox] {
  vertical-align: bottom;
}

.ie7 input[type=checkbox] {
  vertical-align: baseline;
}

.ie6 input {
  vertical-align: text-bottom;
}

td,
td img {
  vertical-align: top;
}

sub,
sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

code,
kbd,
pre,
samp {
  font-family: monospace, sans-serif;
}

.clickable,
button,
input[type=button],
input[type=file],
input[type=submit],
label {
  cursor: pointer;
}

button,
input,
select,
textarea {
  margin: 0;
}

button,
input[type=button] {
  width: auto;
  overflow: visible;
}

.ie7 img {
  -ms-interpolation-mode: bicubic;
}

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}

input[type=search] {
  -webkit-appearance: initial;
}

@font-face {
  font-family: "ben-en-simone-2";
  src: url("../fonts/ben-en-simone-2.eot");
  src: url("../fonts/ben-en-simone-2.eot?#iefix") format("embedded-opentype"), url("../fonts/ben-en-simone-2.woff") format("woff"), url("../fonts/ben-en-simone-2.ttf") format("truetype"), url("../fonts/ben-en-simone-2.svg#ben-en-simone-2") format("svg");
  font-weight: normal;
  font-style: normal;
}
[data-icon]:before {
  font-family: "ben-en-simone-2" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^=icon-]:before,
[class*=" icon-"]:before {
  font-family: "ben-en-simone-2" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-icoon-account:before {
  content: "a";
}

.icon-icoon-adres:before {
  content: "b";
}

.icon-icoon-mail:before {
  content: "c";
}

.icon-icoon-pijltje:before {
  content: "d";
}

.icon-icoon-winkelmandje:before {
  content: "e";
}

.icon-instagram:before {
  content: "f";
}

.icon-telefoon:before {
  content: "g";
}

.icon-times-circle:before {
  content: "h";
}

.icon-facebook:before {
  content: "i";
}

.icon-kruisje:before {
  content: "j";
}

.team-photo {
  width: 100%; /* Full width of the parent */
  height: 120px; /* Fixed height */
  object-fit: cover; /* Cover the area */
}

main ol,
main ul {
  margin: 0.5rem 0 1rem 0;
  padding-left: 0;
  line-height: 1.1em;
}
main ol li,
main ul li {
  margin-bottom: 0.3rem;
  position: relative;
}
main ol li::before,
main ul li::before {
  content: "";
  background-image: url("../img/icon-checkmark.png");
  width: 16px;
  height: 12px;
  display: inline-block;
  margin-right: 10px;
}

figure figcaption {
  font-size: 0.75rem;
  margin-top: 0;
}

picture {
  display: block;
  overflow: hidden;
}

img {
  display: block;
  position: relative;
  max-width: 100%;
  height: auto;
}
img:before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #dddddd;
  border-radius: 5px;
}
img:after {
  content: "x Broken Image of " attr(alt);
  display: block;
  font-size: 0.8rem;
  font-style: normal;
  color: #000000;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}
img + h1, img + h2, img + h3, img + h4, img + h5, img + h6 {
  margin-top: 3rem;
}

p img {
  display: block;
  box-sizing: content-box;
  margin-bottom: 1rem;
  max-width: 100%;
  max-height: 40vh;
  width: auto;
  height: auto;
}

.w-100 {
  width: 100%;
}

.w-75 {
  width: 75%;
}


.wp-block-image {
  margin: 1.5rem 0;
}
.wp-block-image figure.alignright {
  float: right;
  margin-left: 2rem;
}
.wp-block-image figure.alignleft {
  float: left;
  margin: 0 1.5rem 1rem 0;
}
.wp-block-image.is-style-rounded img {
  border-radius: 10px;
}
@media only screen and (max-width: 560px) {
  .wp-block-image {
    display: block;
    margin: 1rem 0;
  }
  .wp-block-image figure img {
    max-height: 400px;
    width: auto;
    display: table;
  }
  .wp-block-image figure.alignright {
    float: none;
    margin-left: 0;
  }
  .wp-block-image figure.alignleft {
    float: none;
    margin: 0;
  }
}

.wp-block-embed-youtube, .video {
  margin: 4rem 0;
}
.wp-block-embed-youtube .wp-block-embed__wrapper, .wp-block-embed-youtube .video-frame, .video .wp-block-embed__wrapper, .video .video-frame {
  padding: 56.25% 0 0;
  position: relative;
}
.wp-block-embed-youtube iframe, .video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.wp-block-embed-youtube figcaption, .video figcaption {
  font-size: 0.8rem;
  font-style: italic;
  padding: 0.5rem 0 0;
}

html {
  font-size: calc(18px + 2 * (100vw - 300px) / 1280);
}
@media screen and (min-width: 1580px) {
  html {
    font-size: 20px;
  }
}

body {
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-size: 1em;
  line-height: 1.3em;
  font-weight: 400;
  color: #474747;
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: unset;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
}

*::-moz-selection {
  color: #ffffff;
  background: rgba(0, 0, 0, 0.7);
}

*::selection {
  color: #ffffff;
  background: rgba(0, 0, 0, 0.7);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  display: block;
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-weight: 600;
  line-height: 1.2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
  color: #474747;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  text-decoration: none;
  font-family: inherit;
  font-size: inherit !important;
  text-decoration: underline;
  line-height: inherit;
}
h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {
  font-weight: inherit !important;
}
h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
  margin-top: 0.5rem;
}
h1 + ol, h1 + p, h1 + ul,
h2 + ol,
h2 + p,
h2 + ul,
h3 + ol,
h3 + p,
h3 + ul,
h4 + ol,
h4 + p,
h4 + ul,
h5 + ol,
h5 + p,
h5 + ul,
h6 + ol,
h6 + p,
h6 + ul {
  margin-top: 0.5rem;
}

h1 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
h2,
legend {
  font-size: 2rem;
  margin-bottom: 1.7rem;
}
@media only screen and (max-width: 560px) {
  h2,
legend {
    margin-bottom: 1.2rem;
  }
}
h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
h4 {
  font-size: 1rem;
}

input, li, p, a, address, td, th, ul, ol {
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: 0;
  color: #474747;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
}
input a, li a, p a, a a, address a, td a, th a, ul a, ol a {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
@media only screen and (min-width: 1025px) {
  input a:hover, li a:hover, p a:hover, a a:hover, address a:hover, td a:hover, th a:hover, ul a:hover, ol a:hover {
    color: #4f2070;
    border-color: #4f2070;
  }
}

span, i, address, em {
  display: inline;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

b, strong {
  font-weight: 700;
}

small {
  font-size: 0.75em;
}
small.gray {
  color: #dddddd;
}

a {
  font-weight: inherit;
  font-size: inherit;
  color: #ff7b15;
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

p + h2, p + hgroup h2, ul + h2, ul + hgroup h2, ol + h2, ol + hgroup h2, figure + h2, figure + hgroup h2 {
  margin-top: 2rem;
}
p + h3, p + hgroup h3, ul + h3, ul + hgroup h3, ol + h3, ol + hgroup h3, figure + h3, figure + hgroup h3 {
  margin-top: 2rem;
}
p + h4, p + hgroup h4, ul + h4, ul + hgroup h4, ol + h4, ol + hgroup h4, figure + h4, figure + hgroup h4 {
  margin-top: 2rem;
}

p {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
p + p {
  margin-top: 1.5rem;
}
p:last-of-type {
  margin-bottom: 0;
}

hr {
  margin: 3rem 0;
  border-top: 1px solid #000000;
}

em {
  font-style: normal;
  color: #ff7b15;
  font-weight: 600;
}

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

.align-left {
  text-align: left;
}
.align-left h1, .align-left h2, .align-left h3, .align-left h4, .align-left h5, .align-left p {
  text-align: inherit;
}

pre {
  padding: 1rem;
  background-color: #ffffff;
  border: 1px solid #ccc;
}

@media only screen and (max-width: 560px) {
  h1 br {
    display: none;
  }

  h1, h2 {
    font-size: 1.4rem;
  }
}
main {
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
  z-index: 2;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.drop {
  display: table;
  margin: 0 auto;
  position: relative;
  bottom: -36px;
  z-index: 1;
}

.hide {
  display: none !important;
}

.dummydiv {
  clear: both;
}

.floatLeft {
  float: left;
  display: inline-block;
}

.floatRight {
  float: right;
  display: inline-block;
}

@media screen and (min-width: 561px) {
  .showMobile {
    display: none !important;
  }
}

@media only screen and (max-width: 560px) {
  .hideMobile {
    display: none !important;
  }
}

@media screen and (min-width: 769px) {
  .showTablet {
    display: none !important;
  }
}

@media screen and (max-width: 769px) {
  .hideTablet {
    display: none !important;
  }
}

.toggled .toggleDropdown::before {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}
.toggled .dropdown {
  max-height: 1000px;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

.row {
  width: 100%;
  margin: 0 auto 0;
  padding: 0;
  position: relative;
}

.contentWrapper {
  max-width: 1660px;
  margin: 0 auto 8rem;
  padding: 0 80px;
  font-size: 0;
}
@media only screen and (max-width: 1024px) {
  .contentWrapper {
    margin-bottom: 4rem;
    padding: 0 40px;
  }
}
@media only screen and (max-width: 560px) {
  .contentWrapper {
    margin-bottom: 6rem;
    padding: 0 20px;
  }
}

.content {
  max-width: 1200px;
  margin: 0 auto;
  display: table;
  width: 100%;
}

.left, .right {
  display: table-cell;
  width: 50%;
  height: 100%;
  justify-content: center;
  vertical-align: middle;
}

.right img {
  float: right;
}

[class^=w-], [class*=w-] {
  padding: 0 1rem;
}

.no-padding {
  padding: 0;
}

.w-1\/2, .w-1\/3, .w-2\/3, .w-1\/4, .w-3\/4 {
  display: inline-block;
  vertical-align: top;
}

.w-1\/2 {
  width: 50%;
}

.w-1\/3 {
  width: 33.333333%;
}

.w-2\/3 {
  width: 66.666666%;
}

.w-1\/4 {
  width: 25%;
}

.w-3\/4 {
  width: 75%;
}

.w-1\/5, .w-2\/5, .w-3\/5, .w-4\/5 {
  display: inline-block;
  vertical-align: top;
}

.w-1\/5 {
  width: 20%;
}

.w-2\/5 {
  width: 40%;
}

.w-3\/5 {
  width: 60%;
}

.w-4\/5 {
  width: 80%;
}

.w-1\/12, .w-2\/12, .w-3\/12, .w-4\/12, .w-5\/12, .w-6\/12, .w-7\/12, .w-8\/12, .w-9\/12, .w-10\/12, .w-11\/12 {
  display: inline-block;
  vertical-align: top;
}

.w-1\/12 {
  width: 8.333333%;
}

.w-2\/12 {
  width: 16.666667%;
}

.w-3\/12 {
  width: 25%;
}

.w-4\/12 {
  width: 33.333333%;
}

.w-5\/12 {
  width: 41.666667%;
}

.w-6\/12 {
  width: 50%;
}

.w-7\/12 {
  width: 58.333333%;
}

.w-8\/12 {
  width: 66.666667%;
}

.w-9\/12 {
  width: 75%;
}

.w-10\/12 {
  width: 83.333333%;
}

.w-11\/12 {
  width: 91.666667%;
}

@media only screen and (max-width: 1024px) {
  .md\:w-1\/2, .md\:w-1\/3, .md\:w-2\/3, .md\:w-1\/4, .md\:w-1\/5 {
    display: inline-block;
    vertical-align: top;
  }

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:w-1\/3 {
    width: 33.333333%;
  }

  .md\:w-2\/3 {
    width: 66.666666%;
  }

  .md\:w-1\/4 {
    width: 25%;
  }

  .md\:w-1\/5 {
    width: 20%;
  }

  .md\:w-1\/12, .md\:w-2\/12, .md\:w-3\/12, .md\:w-4\/12, .md\:w-5\/12, .md\:w-6\/12, .md\:w-7\/12, .md\:w-8\/12, .md\:w-9\/12, .md\:w-10\/12, .md\:w-11\/12 {
    display: inline-block;
    vertical-align: top;
  }

  .md\:w-1\/12 {
    width: 8.333333%;
  }

  .md\:w-2\/12 {
    width: 16.666667%;
  }

  .md\:w-3\/12 {
    width: 25%;
  }

  .md\:w-4\/12 {
    width: 33.333333%;
  }

  .md\:w-5\/12 {
    width: 41.666667%;
  }

  .md\:w-6\/12 {
    width: 50%;
  }

  .md\:w-7\/12 {
    width: 58.333333%;
  }

  .md\:w-8\/12 {
    width: 66.666667%;
  }

  .md\:w-9\/12 {
    width: 75%;
  }

  .md\:w-10\/12 {
    width: 83.333333%;
  }

  .md\:w-11\/12 {
    width: 91.666667%;
  }
}
@media only screen and (max-width: 560px) {
  .sm\:w-1\/2, .sm\:w-1\/3, .sm\:w-2\/3, .sm\:w-1\/4, .sm\:w-1\/5 {
    display: inline-block;
    vertical-align: top;
  }

  .sm\:w-1\/2 {
    width: 50%;
  }

  .sm\:w-1\/3 {
    width: 33.333333%;
  }

  .sm\:w-2\/3 {
    width: 66.666666%;
  }

  .sm\:w-1\/4 {
    width: 25%;
  }

  .sm\:w-1\/5 {
    width: 20%;
  }

  .sm\:w-1\/12, .sm\:w-2\/12, .sm\:w-3\/12, .sm\:w-4\/12, .sm\:w-5\/12, .sm\:w-6\/12, .sm\:w-7\/12, .sm\:w-8\/12, .sm\:w-9\/12, .sm\:w-10\/12, .sm\:w-11\/12 {
    display: inline-block;
    vertical-align: top;
  }

  .sm\:w-1\/12 {
    width: 8.333333%;
  }

  .sm\:w-2\/12 {
    width: 16.666667%;
  }

  .sm\:w-3\/12 {
    width: 25%;
  }

  .sm\:w-4\/12 {
    width: 33.333333%;
  }

  .sm\:w-5\/12 {
    width: 41.666667%;
  }

  .sm\:w-6\/12 {
    width: 50%;
  }

  .sm\:w-7\/12 {
    width: 58.333333%;
  }

  .sm\:w-8\/12 {
    width: 66.666667%;
  }

  .sm\:w-9\/12 {
    width: 75%;
  }

  .sm\:w-10\/12 {
    width: 83.333333%;
  }

  .sm\:w-11\/12 {
    width: 91.666667%;
  }
}
.nav {
  height: 106px;
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 100;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); 
}
.nav .logo {
  position: relative;
  top: -20px;
}
.nav .content {
  display: block;
  height: 100%;
  position: relative;
}
.nav .navitems {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  height: 106px;
}
.nav .navitem {
  line-height: 106px;
  color: #474747;
  font-size: 1rem;
  padding: 0 0.8rem;
  display: inline-block;
}
.nav .navitem:hover {
  color: #ff7b15;
}
.nav div.navitem {
  color: #474747;
  margin-right: 10px;
  font-size: 1rem;
  position: relative;
  cursor: pointer;
  margin-right: 1.5rem;
}
.nav div.navitem p {
  height: 106px;
  line-height: 106px;
}
.nav div.navitem::after {
  content: "";
  background-image: url("../img/icon-dropdown.png");
  height: 8px;
  width: 16px;
  position: absolute;
  top: 50px;
  right: -10px;
}
.nav div.navitem:last-child::after {
  content: none; /* Set content to none to remove the pseudo-element */
}

.nav div.navitem:hover .dropdown {
  display: block;
}
.nav .dropdown {
  position: absolute;
  overflow: hidden;
  top: 76px;
  display: none;
  width: max-content;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); 
  z-index: 100;
  background-color: white;
  height: auto;
  max-height: 300px;
  box-shadow: 2px 5px 7px rgba(0, 0, 0, 0.1); 
  padding: 0.8rem;
}
.nav .dropdown a {
  height: 40px;
  line-height: 40px;
  width: 100%;
  color: #474747;
  display: block;
}

.nav div.navitem:hover .languageDropdown {
  max-height: 300px;
  border: 1px solid #474747;
}

/* TODO remove all .languageDropdown classes when language support is implemented */
.nav .languageDropdown {
  position: absolute;
  right: -10px;
  top: 76px;
  display: block;
  width: 60px;
  border: 1px solid transparent;
  z-index: 100;
  background-color: white;
  overflow: hidden;
  height: auto;
  max-height: 0;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  font-size: 0;
}
.nav .languageDropdown a {
  height: 60px;
  line-height: 60px;
  width: 100%;
  border-bottom: 1px solid #474747;
  text-align: center;
  display: block;
}
.nav .languageDropdown a:last-of-type {
  border-bottom: 0 !important;
}
.nav .languageDropdown a:hover {
  border-bottom: 1px solid #474747;
  background-color: #ff7b15;
  color: #ffffff;
}

.nav .dropdown a:hover {
  color: #ff7b15;
}

.video .contentWrapper {
  margin-bottom: 4rem;
  padding: 0;
  position: relative;
}
.video .contentWrapper .content {
  height: 70vh;
  position: relative;
}
.video .contentWrapper .enableSound {
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  width: 120px;
  height: 120px;
  font-size: 1rem;
  font-weight: 100;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  z-index: 100;
  opacity: 1;
  filter: alpha(opacity=100);
  position: absolute;
  top: calc(50% - 60px);
  left: 2rem;
  cursor: pointer;
}
.video .contentWrapper .enableSound:hover {
  background-color: rgb(255, 255, 255);
}
.video .contentWrapper .enableSound.hideBtn {
  opacity: 0;
  filter: alpha(opacity=0);
  visibility: hidden;
}
@media only screen and (max-width: 560px) {
  .video .contentWrapper .enableSound {
    width: 70px;
    height: 70px;
    top: calc(50% - 35px);
    font-size: 0.7rem;
    font-weight: 700;
    left: 1rem;
  }
}
.video .contentWrapper video {
  max-width: 100%;
}
@media only screen and (max-width: 560px) {
  .video {
    padding: 0 !important;
  }
}

.intro .contentWrapper {
  padding: 0;
}
@media only screen and (max-width: 1024px) {
  .intro .contentWrapper {
    padding-right: 40px;
  }
}
@media only screen and (max-width: 560px) {
  .intro .contentWrapper {
    padding-right: 20px;
  }
  .intro .contentWrapper .right {
    padding: 0 20px;
  }
  .intro .contentWrapper img {
    width: 100%;
  }
}

.storeIcon {
  display: inline-block;
  margin-top: 1.5rem;
  margin-right: 1rem;
  float: none !important;
  max-width: 45%;
}
.storeIcon:last-of-type {
  margin-right: 0;
}

#howItWorks .right img {
  position: relative;
  right: -25px;
}
#howItWorks h2 {
  margin-bottom: 1rem;
}
#howItWorks h2 + p {
  font-size: 1.1rem;
}
@media only screen and (max-width: 560px) {
  #howItWorks h2 + p {
    font-size: 1rem;
  }
}

.mb-1 {
    margin-bottom: 1rem;
}

.step {
  margin-bottom: 1.5rem;
}
.step:first-of-type {
  margin-top: 2.5rem;
}
@media only screen and (max-width: 560px) {
  .step:first-of-type {
    margin-top: 1.5rem;
  }
}
.step img {
  display: inline-block;
  margin-right: 1.5rem;
}
.step p {
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 700;
  color: #4f2070;
  line-height: 55px;
}

button.watchVideo {
  display: table;
  border: none;
  background-color: transparent;
  height: 34px;
  margin-top: 2.5rem;
  font-size: 1rem;
  color: #474747;
  font-weight: 600;
  line-height: 34px;
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  position: relative;
  left: 42px;
}
button.watchVideo::before {
  content: "";
  background-image: url("../img/icon-play.png");
  width: 34px;
  height: 34px;
  position: absolute;
  display: inline-block;
  left: -42px;
}
button.watchVideo:hover {
  text-decoration: underline;
}

#whyScudi .left img {
  position: relative;
  left: -25px;
}

#facts .left img {
  position: relative;
  left: -20px;
}

#whatIsScudi .left img {
    position: relative;
    left: -25px;
}

h2.hasLogo {
  height: 105px;
  line-height: 105px;
  margin-bottom: 2rem;
}
h2.hasLogo img {
  display: inline-block;
  margin-right: 5px;
  float: none;
}

.getInTouch .content {
  max-width: 700px;
  border: 4px solid #4f2070;
  border-radius: 20px;
  text-align: center;
  padding: 5rem 4rem;
}
.getInTouch .content h2 {
  color: #4f2070;
  line-height: 47px;
  position: relative;
  padding-left: 70px;
  display: table;
  margin: 0 auto 2rem;
}
.getInTouch .content h2::before {
  content: "";
  background-image: url("../img/icon-balloons.png");
  display: inline-block;
  width: 55px;
  height: 47px;
  position: absolute;
  left: 0;
}
.getInTouch .content p {
  margin-bottom: 2rem;
}
.getInTouch .content a {
  font-size: 1rem;
  color: #474747;
  font-weight: 600;
  padding-bottom: 4px;
  border-bottom: 5px solid #4f2070;
}
.getInTouch .content a:hover {
  border-bottom: 5px solid #ff7b15;
}

footer.row {
  margin-top: 3rem;
}
footer.row .contentWrapper {
  margin-bottom: 0;
}
/* Default styles for larger screens */
.footer.row .column {
  float: left;
  width: 25%;
}

/* Media query for screens with a maximum width of 1024px (tablet) */
@media only screen and (max-width: 1024px) {
  .footer {
    flex-flow: wrap;
  }
}


footer.row .column .logo {
  display: table;
  margin: 0 auto;
  position: relative;
  top: -40px;
}

.logo {
  width: 106px;
  height: 106px;
}

@media only screen and (max-width: 1024px) {
  .right.hasImage {
    padding-left: 5%;
  }

  .left.hasImage {
    padding-right: 5%;
  }

  .getInTouch .content {
    max-width: 560px;
    padding: 4rem 2rem;
  }

  .step img {
    margin-right: 1rem;
  }
  .step p {
    font-size: 1.1rem;
    line-height: 45px;
  }
}
button.toggleMenu {
  display: none;
}

@media screen and (max-width: 900px) {
  body {
    overflow: hidden;
  }

  .nav {
    height: 95px;
    position: relative;
  }
  .nav button.toggleMenu {
    display: block;
    position: absolute;
    right: 0;
    top: 20px;
    height: 55px;
    width: 55px;
    background-color: transparent;
    border: none;
    padding: 0;
  }
  .nav button.toggleMenu::after {
    content: "";
    background-image: url("../img/menu.png");
    background-size: contain;
    position: relative;
    top: 3px;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  .nav .logo {
    max-height: 75px;
    max-width: 75px;
    top: 10px;
  }
  .nav .navitems {
    position: absolute;
    left: 110%;
    top: 95px;
    z-index: 100;
    background-color: white;
    width: calc(100% + 40px);
    height: auto;
  }

  .nav .navitems .languageDropdown {
    position: relative;
    right: 0;
    top: 0;
    max-height: none;
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #474747;
    height: 60px;
  }
  .nav .navitems .languageDropdown .navitem {
    display: inline-block;
    width: 25%;
    border: none;
    border-right: 1px solid #474747;
  }
  .nav .navitems .languageDropdown .navitem:last-of-type {
    border-right: 0;
  }

  .nav.toggled .navitems {
    left: -20px;
  }
}
@media only screen and (max-width: 560px) {
  main .content {
    display: flex;
    flex-direction: column;
  }

  .left, .right {
    display: block;
    width: 100%;
    order: 2;
  }

  .hasImage {
    order: 1 !important;
    margin-bottom: 2rem;
    padding: 0 !important;
  }
  .hasImage img {
    right: 0 !important;
    left: 0 !important;
    margin: 0 auto;
    width: 90%;
    float: none;
  }

  .storeIcon {
    margin-top: 1rem;
  }

  .step {
    height: 45px;
  }
  .step img {
    max-height: 45px;
  }

  h2.hasLogo {
    height: 75px;
    line-height: 75px;
    margin-bottom: 2rem;
  }
  h2.hasLogo img {
    max-height: 75px;
    max-width: 75px;
  }

  .watchVideo {
    margin-top: 1.5rem !important;
    margin-bottom: 1rem;
  }

  .getInTouch .content {
    padding: 2rem 1.5rem;
    display: block;
  }
  .getInTouch .content h2 {
    margin-bottom: 1.5rem;
  }
  .getInTouch .content p {
    margin-bottom: 1.5rem;
  }

  footer.row .logo {
    max-height: 75px;
    max-width: 75px;
    top: -27px !important;
  }
}
.presentation {
  z-index: 999;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.presentation .banner {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  max-height: 90vh;
}
.presentation .video-container {
  margin: 0 auto;
  display: table;
  max-width: 90vw;
  max-height: 100%;
}
.presentation #secondVideo {
  max-width: 100%;
  max-height: 80vh;
}
.presentation .close {
  background-image: url("../img/close.png");
  background-color: transparent;
  border: none;
  display: table;
  width: 44px;
  height: 44px;
  position: absolute;
  top: 3rem;
  right: 3rem;
  cursor: pointer;
  z-index: 9999;
}
.presentation.visible {
  visibility: visible;
  opacity: 1;
  filter: alpha(opacity=100);
}
@media only screen and (max-width: 560px) {
  .presentation .close {
    background-size: contain;
    width: 36px;
    height: 36px;
    top: 1rem;
    right: 1rem;
  }
}

.team-cell {
    width: 110px;
    text-align: center;
    margin-left: 1rem;
    margin-right: 1rem;
}

.team-row {
    display: flex;
    flex-direction: row;
    max-width: 75%; 
    justify-content: center; 
    margin-top: 0.25rem;
}

.team-cell-link {
    margin-bottom: 1rem;
}

.what-is-scudi-img {
    width: 550px;
}

.plus-sign {
    margin-left: 5rem; 
    margin-right: 5rem; 
    width: 50px; 
    height: 50px;
}

@media only screen and (max-width: 560px) {
  .team-photo {
    height: 60px;
    width: 50px;
  }

  .team-cell {
    width: 55px;
    text-align: center;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }

  .team-cell p {
    font-size: 8px;
  }
}

.scudi-apps {
    display: flex; 
    padding: 2rem 0; 
    align-items: center; 
    justify-content: center;
    flex-direction: column;
    gap: 2rem;
}

.scudi-apps img {
  max-width: 75%; /* Limit the maximum width */
  max-height: 75%; /* Limit the maximum height */
  width: auto; /* Allow the width to adjust while maintaining aspect ratio */
  height: auto; /* Allow the height to adjust while maintaining aspect ratio */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.fs-12 {
    font-size: 12px;
}

.fs-14 {
    font-size: 14px;
}

.cms-image {
    height: 250px; 
    width: 400px;
}

.app-image {
    height: 250px; 
    width: 125px;
}

.center-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.primary-button {
  padding: 15px 25px; /* Adjust padding as needed */
  background-color: #E36531; /* Primary button color in Bootstrap */
  color: #fff; /* Text color for the button */
  border: none; /* Remove the default button border */
  border-radius: 25px; /* Rounded corners */
  cursor: pointer; /* Show a pointer cursor on hover */
  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

.primary-button:disabled {
  background-color: #cccccc; /* Lighter or gray color for disabled state */
  color: #666666; /* Dimmed text color */
  cursor: not-allowed; /* Cursor to indicate the button is disabled */
  /* Other styles as needed */
}

.primary-button:hover {
  background-color: #4f2070; /* Darker color on hover */
}

/* Style for the row container */
.row-flex {
  display: flex;
  justify-content: space-between;
  gap: 10px; /* Adjust the gap between inputs as needed */
  padding: 0;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 30%; /* Could be more or less, depending on screen size */
}

#contactForm label {
  display: block;
  margin-top: 10px;
  margin-bottom: 5px;
  color: #333;
}

/* Input field styling */
#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* To ensure padding doesn't affect overall width */
  max-width: 100%;
  max-height: 300px;
}

#contactForm textarea {
  height: 100px; /* Adjust height as needed */
}

/* reCAPTCHA placeholder styling */
.recaptcha {
  margin-bottom: 10px;
}

/* Close button styling */
.close-modal-btn {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close-modal-btn :hover,
.close-modal-btn :focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.confirm-modal {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Black with opacity */
  z-index: 1003; /* Above the overlay and the loader */
}

.confirm-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  width: -webkit-fill-available;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5); /* Black background with 50% opacity */
  z-index: 1001; /* Ensure it's above other items */
}

.loader {
  border: 20px solid #f3f3f3; 
  border-top: 20px solid #3498db; 
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1002; /* Ensure it's above the overlay */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* Programs */
.pricing-box {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 5px;
  background-color: #ffffff;
  width: 300px; /* Adjust width as needed */
}
.pricing-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.5rem;
}

.silver-color {
  color: #9B9997;
}

.gold-color {
  color: #FFCA0C;
}

.bronze-color {
  color: #DB6F2A;
}


.pricing-btn {
  width: 100%;
  margin: 1rem 0;
}

.pricing-box .price {
  color: #E36531;
  text-align: center;
  font-size: 2rem;
}

.pricing-box .monthly-price {
  text-align: center;
  font-size: 1rem;
  display: none;
}


.boxes-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.programs-slider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-direction: column;
  padding: 2rem;
}

.slider-container {
  position: relative;
  padding: 0;
  margin: 0;
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  background: #ddd;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  margin: 30px 0;
}

input[type=range]:hover {
  opacity: 1;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 40px; /* Size of the thumb */
  height: 40px; /* Size of the thumb */
  background: #4f2070;
  cursor: pointer;
  border-radius: 50%; /* Make it circular */
}

input[type=range]::-moz-range-thumb {
  width: 40px;
  height: 40px;
  background: #4f2070;
  cursor: pointer;
  border-radius: 50%;
}

input[type=range]::-ms-thumb {
  width: 40px;
  height: 40px;
  background: #4f2070;
  cursor: pointer;
  border-radius: 50%;
}

.slider-value {
  position: absolute;
  background: #4f2070;
  color: white;
  font-size: 16px;
  text-align: center;
  border-radius: 3px;
  padding: 5px;
  width: 50px;
  top: -40px;
}

.max-value-button {
  padding: 1rem;
  width: 100%;
  margin-top: 10px; /* Adjust as needed */
  background-color: #4f2070; /* Your desired button color */
  color: white; /* Text color */
  border: none; /* No border */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor on hover */
  display: none; /* Hidden by default */
  font-size: 0.75rem;
}

.max-value-button-contact-us {
  text-decoration: underline;
  color: #E36531;
}

.billing-toggle-container {
  display: inline-flex;
  align-items: center;
  position: relative; /* Needed for absolute positioning of the discount badge */
  font-size: 0.75rem;
  margin-bottom: 1rem;
}

.billing-option {
  margin: 0 10px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #4f2070;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.discount-badge {
  position: absolute;
  top: -40px; /* Adjust as necessary */
  right: 10px; /* Position to the right of the yearly option */
  background-color: #ff8c00;
  color: white;
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 0.8em;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Optional: Adds a shadow for better visibility */
}

.features-table {
  width: 75%;
  overflow: auto;
  margin-bottom: 5rem;
  border-collapse: collapse;
}

.features-table table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.features-table th,
.features-table td {
  padding: 10px;
  border: 1px solid #ddd;
  border-bottom: none; /* Remove horizontal borders */
  font-size: 0.9rem;
}


.features-table thead th:first-child,
.features-table tbody td:first-child {
  text-align: left !important;
  padding-left: 10px;
}
.features-table th {
  background-color: #f5f5f5;
  border: none;
}

.features-table td {
  border: none;
}

.features-table tr:nth-child(even) td {
  background-color: #f9f9f9; /* Light grey for even rows */
}

/* Use icons or text characters for check and cross */
.features-table td:empty::after {
  content: "—"; /* Placeholder for empty cells */
}

.features-table td:not(:empty) {
  font-size: 1rem;
}


.footer-content {
  display: flex;
  justify-content: center;
  gap: 2rem;
  align-items: flex-end;
  text-align: center;
  padding-right: 10rem;
}


.logo-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.footer-logo {
  margin-bottom: 20px; /* Adjust as needed */
}

footer .footer-column nav a {
    border-bottom-width: 1px;
    font-size: 0.9rem;
    border-bottom-style: solid;
}

footer .footer-column nav a:hover {
  color: #4f2070;
}

.footer-bottom {
  text-align: center;
  margin: 1rem;
}

/* Responsive adjustments if necessary */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    align-items: center;
    padding-right: 0;
  }
  .footer-column {
    margin-bottom: 20px; /* Adjust as needed */
  }

  .modal-content {
    width: 70%;
  }
}