/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
html, body {overflow-x: hidden; width: 100%;}
.foot-nav-title, .hhs-foot-rss h5, .hhs-foot-nav-col h5{font-family: Roboto; font-size: 21px; font-weight: 400; }
.hhs-foot-copyright, .hhs-foot-base-nav .hs-menu-wrapper.hs-menu-flow-horizontal>ul li {font-family: Roboto; font-size: 14px; font-weight: 400; }
html, body {overflow-x: hidden; width: 100%;}
.cta-five, .cta-tertiary, .cta-primary{margin-right: 20px;}

a[aria-label="Linkedin"]{
  display: inline-flex; /* keeps icon centered */
  align-items: center;
  justify-content: center;
  /*background-color: #0077b5; /* LinkedIn blue */
  padding: 8px !important;
  border-radius: 32px; /* optional: makes rounded corners */
  color: white; /* ensures SVG or text inside inherits white */
  text-decoration: none;
}

 a[aria-label="Visit us on Linkedin"] {
  display: inline-flex; /* keeps icon centered */
  align-items: center;
  justify-content: center;
  /*background-color: #0077b5; /* LinkedIn blue */
  padding: 8px !important;
  border-radius: 32px; /* optional: makes rounded corners */
  color: #fff !important; /* ensures SVG or text inside inherits white */
  text-decoration: none;
}

a[aria-label="Linkedin"] svg, a[aria-label="Visit us on Linkedin"] svg {
  fill: currentColor; /* makes the SVG use the anchor’s text color */
  width: 24px;
  height: 24px;
}
*/
/* Matches Safari because only it understands this proprietary font value */
@supports (font: -apple-system-body) {
  #hs_cos_wrapper_module_17519584263104 .clean-base {
    margin-top: 4%;
  }
}
.hhs-card-flip-con .tile .back .contents {padding-top: 24px !important; border-radius: 24px !important;}
.header__container{ padding: 0% !important;}
.img_txt{padding-left: 8% !important;} 
.hs-search-field.is-open .hs-search-field__bar{max-width: 14vw !important; left: -14vw !important;}
.dnd-section{background-color: #fff;}
.hhs-nav-grid__menu{margin-left: 9% !important;}
a {font-weight: 700; text-underline-offset: 4px;}

.front, .back{border-radius: 8px !important;}
/* Keep LI structure inline and prevent wrapping */
.hhs-top-bar .mega-menu .hs-menu-wrapper.hs-menu-flow-horizontal > ul li {white-space: nowrap;}
.hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li {white-space: nowrap;}
/* Apply styling to the anchor inside the li */
.hhs-top-bar .mega-menu .hs-menu-wrapper.hs-menu-flow-horizontal > ul li > a {display: inline-flex; align-items: center; text-decoration: none; }
.hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li > a {display: inline-flex; align-items: center; text-decoration: none; }
/* Underline and arrow on hover */
#mx:hover, .hhs-top-bar.hhs-alt-nav .hs-menu-wrapper.hs-menu-flow-horizontal ul.hhs-nav-links ul .hs-menu-item a:hover{text-decoration: underline !important;}
.hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li:hover{text-decoration: underline !important;}
#mx:hover:after, .hhs-top-bar.hhs-alt-nav .hs-menu-wrapper.hs-menu-flow-horizontal ul.hhs-nav-links ul .hs-menu-item a:hover:after{content: '\00a0\00a0→'; transition: all 0.3s ease;}


@media (min-width:800px){
  #h1-mobile{display: none;}
}
.c-quote-icon-3 {
    background-image: url('https://comm.magister.nl/hubfs/Huisstijl%20merken/Schoologica/Rectangle%2050.png');
    background-repeat: no-repeat;
    background-size: cover; /* or 'contain', depending on the effect you want */
    background-position: center;
    display: inline-flex; /* Ensures it wraps around its SVG content nicely */
    padding: 20px; /* Adjust as needed for spacing */
    border-radius: 50%; /* Optional: force a circular shape if desired */
    top: -19px !important;
}
#img_txt_element {
  position: relative;
}

#img_txt_element::after {
  content: "";
  position: absolute;
  bottom: -124px; /* controls how far it overflows */
  left: 0;
  width: 120px; /* adjust width as needed */
  height: 250px; /* or use auto with aspect-ratio if supported */
  background-image: url("https://comm.magister.nl/hubfs/Huisstijl%20merken/Schoologica/Rectangle%2045.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left bottom;
  z-index: 10;
  pointer-events: none;
}





@media (max-width: 768px){  
  .hs-search-field.is-open .hs-search-field__bar{max-width: 50vw !important; left: -32vw !important;}
  .hhs-side-menu .top-bar-search{display: none;}
  .hhs-nav-grid__extras .top-bar-search, .hhs-nav-grid__extras .hhs-lang-switch{display: block !important;}
  .hamburger-icon .line{background: #000; vertical-align: super;}

.mobile_dark{color: #fff !important;}
.hs-form-frame
.dark_bg::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #C7EAFE80; 
    z-index: 2;
    pointer-events: none; /* allows clicks to pass through */
  }
  .dark_bg2::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #EDF0F680; 
    z-index: 2;
    pointer-events: none; /* allows clicks to pass through */
  }
  .dark_bg3::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #1167AD80; 
    z-index: 2;
    pointer-events: none; /* allows clicks to pass through */
  }
  .service-grid {grid-template-columns: repeat(2, 1fr) !important;}
  .hhs-menu-toggle {display: flex;}
  .img_txt{padding-left: 0 !important;}
  .foot-nav-title, .hhs-foot-rss h5, .hhs-foot-nav-col h5{ font-size: 20px; font-weight: 700; text-transform: none;}
  .foot-nav-title,
.hhs-foot-rss h5,
.hhs-foot-nav-col h5 {
  text-transform: none !important;
  font-variant: normal !important;
  -webkit-text-transform: none !important; /* sometimes needed for Safari */
  }
}