:root {
  --ginger: #c7bd9f;
  --midnight: #0d3b47;
  --kingfisher: #226176;
  --velvet: #d5d0bb;
  --pepper: #ebe8d8;
  --pepper-light: #f5f4ec;
  --green: #9ac32e;
  --border-radius: 0.5rem;
}

a {
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

div.white-bg a:hover {
  color: var(--midnight) !important;
}

i {
  color: var(--kingfisher);
}

i.fa-linkedin-square {
  color: white;
}

.list-group {
    --list-group-color: var(--kingfisher);
  }

.white {
  color: white !important;
}

.pepper-light-bg {
  background-color: var(--pepper-light);
}

.ginger-bg {
	background-color: var(--ginger);
}

.midnight-bg {
	background-color: var(--midnight);
}

.kingfisher-bg {
	background-color: var(--kingfisher);
}

.velvet-bg {
	background-color: var(--velvet);
}

.pepper-bg {
	background-color: var(--pepper);
}

.green-bg {
	background-color: var(--green);
}

.white-bg {
	background-color: white;
  color: var(--kingfisher);

}

.ginger {
	color: var(--ginger);
}

.midnight {
	color: var(--midnight);
}

.kingfisher {
	color: var(--kingfisher) !important;
}

.velvet {
	color: var(--velvet);
}

.pepper {
	color: var(--pepper);
}

.green {
	color: var(--green);
}


html {
	scroll-behavior: smooth;
}

p {
  color: var(--kingfisher);
}

ul {
  list-style: disc url("../../../../../images/css/list-ginger.png");
  color: var(--kingfisher);
  line-height: 1.8;
}

ul.midnight {
  list-style: disc url("../../../../../images/css/list-midnight.png");
}

ul.pepper {
  list-style: disc url("../../../../../images/css/list-pepper.png");
}

ul.kingfisher {
  list-style: disc url("../../../../../images/css/list-kingfisher.png");
}

h3 {
  color: var(--kingfisher);
}

h3.display-6 {
  color: var(--kingfisher) !important;
}

body.blog h3 {
/*  margin-top:2.5rem; */
  margin-bottom:1.5rem;
}

body.blog h1 {
/*  color: var(--kingfisher) !important;*/
  margin-bottom: 0rem !important;
}

.item-pagehome .col-md-5 {
  padding-left: 0px !important;
}

.ml-4 {
  margin-left: 1.5rem !important;
}

.w70 {
	width: 70%;
}

.topbar {
	height: 2rem;
	max-width: 1320px;
	background-color: var(--midnight);
	margin-left: auto;
	margin-right: auto;
}


header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: inherit;
}

.container-header {
	background: inherit !important;
}

.container-topbar {
	background-color: var(--midnight);
}

.page .wrapper-container-nav {
/*	background-image: url('../images/evolynx-beeldmerk-grey2.png'), url('../images/evolynx-gradient-customers.png');*/
	background-image: url('../images/evolynx-gradient-customers.png');
	background-repeat: no-repeat, no-repeat;
	background-size: auto, cover;
	background-position-x: 130%, right;
	background-position-y: center, bottom;
	padding-bottom: 150px;

}

.page main, .main-top {
	margin-top: -150px !important;
	z-index: 10;

	h1 {
/*		line-height: 150px;*/
		color: white; 
	}
}


div.com-content-article__body h1 {
	color: var(--kingfisher);
}


.page .page-header {
	height: 150px;
}

.page-header.blog {
	color: white !important;
	font-size: 2.5rem !important;
	font-weight: 300 !important;
	line-height: 1.2 !important;
}

.page-header.blog h1 {
	color: var(--kingfisher) !important;
}

.jobs .page-header h1 {
	color: white !important;
}

.border-1 {
	border-right: solid 1px var(--kingfisher);
}

.container-header .grid-child {
	padding-right: 0px;
	padding-left: 0px;
	border-bottom: var(--ginger) 1px solid;
/*	margin-bottom: 2rem;
	margin-top: 1.5rem;
*/}



.mod-languages,
.mod-languages ul,
.mod-languages li,
.mod-languages a {
  color: white;
	height: 2rem;
	line-height: 2rem;
	float: right;
	padding-top: 0rem !important;
	padding-bottom: 0rem !important;
}


.layout-evolynxcard {
	.row {
		margin-bottom: 50px;
	}
}


body.blog div.card div.row {
	margin-bottom: 0px !important;
}

div.mod-languages ul li.lang-active {
	background-color: var(--midnight);
	a {
		text-decoration: underline;
		background-color: var(--kingfisher);
	}
}


header ul.mod-menu.mod-list.nav {
	height: 2rem;
	line-height: 2rem;
	float: right;
	margin-right: 50px;
	li {
		padding-top: 0px;
		padding-bottom: 0px;
	}
}


.parallax {
  /* The image used */
	background-image: url('../images/evolynx-header.png');

  /* Full height */
  height: 100%;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


body.home {
	background-image: url('../images/evolynx-beeldmerk-grey2.png'), url('../images/evolynx-header.png');
	background-repeat: no-repeat, no-repeat;
	background-size: auto, cover;
	background-position-x: 130%, right;
	background-position-y: center, bottom;
	background-attachment: fixed;

	h1, h2 {
		color: white;
		margin-bottom: 1.5rem;
	}

	h2 {
		font-size: 1.5rem;
/*                font-variant: small-caps;*/
                font-weight: 400;
	}

	.site-grid {
	         grid-gap: 0 0em;
	}

	.com-content-article.item-page.home {
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		max-width: 1320px;
	}


}


footer.container-footer {
		margin-top: 0px !important;

}

.page {
	h2 {
/*		font-size: 1.5rem; */
		color: var(--kingfisher);
/*		font-weight: 500;*/
/*		font-size: calc(1.525rem + 3.3vw); */
		font-size: clamp(1.5rem,5vw,2.5rem);
		font-weight: 300;
		line-height: 1.2;
		margin-bottom: 2.5rem;
    margin-top: 1.5rem;
	}
}

.references {
  .card-body {
    text-align: left;
  }

  h3.card-title {
    margin-bottom: 0px !important;
    color: var(--kingfisher);
  }

  blockquote {
    color: var(--kingfisher);
  }

  .shadow {
      box-shadow: none !important;
  }
}

.btn {
	background-color: var(--green);
	border-color: var(--green);
	color: white;
	line-heignt: inherit;
	font-weight: 600;
}

.btn:hover, .btn:active, .btn:focus {
	color: white;
    	background-color: var(--green);
    	border-color: white;
}

.btn-blue {
	background-color: var(--kingfisher);
	border-color: var(--kingfisher);
	color: white;
	line-heignt: inherit;
/*	font-weight: 300;*/
}

.btn-blue:hover, .btn-blue:active, .btn-blue:focus {
	color: white;
    	background-color: var(--kingfisher);
    	border-color: white;
}

.btn-green {
	margin-bottom: 1.5rem;
}



.com-content-article {
	padding-left: 1rem;
	padding-right: 1rem;
}


body.wrapper-fluid .grid-child {
	max-width: 1320px;
}

footer .wrapper-fluid {
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
}


.card.h-100 {
	padding: 1rem;
}

img.card-icon {
	height: 90px;
	margin-bottom: 1rem;
}

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



a.midnight {
	text-decoration: none;
	font-weight: bolder;
}

a.kingfisher {
	text-decoration: none;
	font-weight: bolder;
}


/* module challenge-act-care */
#mod-custom117 {
	.card {
		margin-top: -100px !important;
	}
}

#challenge h3 {
  border-bottom: 1px solid;
  padding-bottom: 20px;
  width: 80px;
}

/* module our customers */
#mod-custom118, #mod-custom127 {
	background-image: url('../images/evolynx-beeldmerk-customers.png'), url('../images/evolynx-gradient-customers.png');
	/*background-size: auto, cover; */
  background-size: cover;

  h2.display-4 {
    padding-left: 10px;
  }

	.row {
		text-align: center;
/*		margin-bottom: 50px; */
	}

	img {
		vertical-align: middle;
		width: 135px;
	}
	.wrapper-fluid {
		padding-bottom: 40px;
	}
	h2 {
		color: white;
	}
	.container-component {
		padding-top: 0rem;
	}
}

.kemmel {
	background-image: url('../images/kemmelberg_landschap.jpg');
	background-position: center, center;
	background-size: cover;
	min-height: 400px;
}

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

footer {
	ul.bottom {
		float: inline-end;
		flex-direction: row;
		display: flex;
		li {
			padding: 0em 2em;
			line-height: 1.5;
			margin-top: auto;
			margin-bottom: auto;
		}
                margin-bottom: 2rem;
	/*	a {
			text-decoration: underline !important;
		}
*/
	}
	background: var(--kingfisher) !important;
}

footer.bottom {
	margin-top: 0px;
	background: var(--midnight);
	p {
		margin-top: 0px;
		margin-bottom: 0px;
		line-height: auto;
                color: white;
	}

        li {
            color: white !important;
        }

/*  .grid-child {
    align-items: start;
    justify-content: space-evenly;
  }
*/
}

#mod-custom137 .row {
	justify-content: start;
}

/* 3 kaarten */
div#mod-custom125, div#mod-custom137 {
    min-height: 300px;
    size: auto;
    background: white;
}


/* menu services bottom */
h3#mod-133 {
  color: white;
}

ul.services-bottom {
  /*font-weight: bold;*/

  li.nav-item.item-107 {
      list-style: none !important;
  }

  a.btn-blue {
    font-weight:initial;
      --btn-padding-x: 0px;
      --btn-padding-y: 0px;
      --btn-border-width: 0px;
  }
}




.float-left {
	float: left;
}

p.float-left {
	min-height: 100px;
	margin-top: auto;
	margin-bottom: auto;
	line-height: 100px;
	padding-left: 2em;
}




@media (max-width: 992px) {
	/* challenge-act-care */
	#mod-custom117 {
		.card {
			margin-top: 0px !important;
			margin-left: 0px !important;
			h-100 {
				padding: 0px !important;
			}

		}
	}
	nav.navbar.navbar-expand-lg {
		float: left;
		width: 100%;
	}

	.row {
		margin-right: 0px !important;
        	margin-left: 0px !important;
	}

	.footer .grid-child, .grid-child-tiles {
		padding: 2.5rem 2.5em;
                align-items: baseline;
                margin-bottom: 2.5rem;
	}

	ul.mod-menu mod-list nav bottom {
		padding-top: 30px;
	}
}

.display-4 {
	margin-bottom: 2.5rem;
}

.display-5 {
    font-size: 1.75rem !important;
    margin-left: 1rem;
}

.service {
	main.main-bottom.no-card {
		margin-top: 0px !important;
	}


	.page-header {
		height: 180px;
		max-width: 1320px;
     		margin: auto;
	}
}

.container-component {
	padding-top: 3rem;
	padding-bottom: 3rem;
}


.row.row-cols-1.row-cols-md-2.row-cols-lg-2.g-4 {
    margin-top: 4rem;
}


.overview {
	h3, h4 {
		padding: 1rem;
                color: var(--kingfisher);
	}

	p {
		padding-top: 1rem;
	}
}

.card.overview {
	margin-bottom: 1.5rem;
}


.vertical-center {
	display: grid;
        align-items: center;
/*        justify-content: center;*/
}


/* green arrow digital projects */
#concept, #blueprint, #implement, #rollout {
	.container-component {
		background-image: url("../../../../../images/services/digital/vertical-line.png");
		background-position-y: 0%;
		background-repeat: repeat-y;
	}
}

#golive .container-component {
	background-image: url("../../../../../images/services/digital/vertical-line.png"), url("../../../../../images/services/digital/arrow.png");
	background-position-y: 0%, 100%;
	background-repeat: no-repeat, no-repeat;
}

/* smartphone landscape or larger */
@media (width >= 768px) {
/*  .page .page-header {
    padding-left: 0.5em;
  }
*/
  .page .wrapper-container-nav {
    background-position-x: initial;
  }

	#concept, #blueprint, #implement, #rollout {
		.container-component {
			background-position-x: 9%;
		}
	}
	#golive .container-component {
		background-position-x: 9%, 9%;
	}

  /* 3 tegels omhoog schuiven op grote schermen */
  #mod-custom125, #mod-custom137 {
  	.card {
  		  margin-top: -70px !important;
  	}
  }

  footer {
  	ul.bottom {
  		flex-direction: column;


      li {
        padding: .25em 0;
        line-height: 1.5;
        margin-top: auto;
        margin-bottom: auto;
      }

      margin-bottom: 2rem;
    }


  }
}

/* smartphone recht */
@media (width < 768px) {
  .page .page-header {
    padding-left: 0.5em;
    height: 125px;
  }

  .page .wrapper-container-nav {
    background-position-x: initial;
  }

	#concept, #blueprint, #implement, #rollout {
		.container-component {
			background-image: none;
		}
	}

	#golive .container-component {
		background-image: none;
	}

  #mod-custom115 {
    padding-left: 10px !important;
  }


  body.wrapper-fluid .site-grid {
    grid-gap: 0rem;
  }

  .row>* {
        /*padding-left: 0px !important;*/
  }


  ul#topmenu {
  /*  display: flex !important;*/
    flex-direction: row;
    float: left !important;

    li {
      padding-left: 10px;
    }
  }


  .metismenu.mod-menu .metismenu-item {
    padding: 0em !important;

    #navbar110 .btn, .btn-blue {
      background-color: inherit;
      border: none;
      margin-bottom: 0px;

      ul {
        list-style: disc url("../../../../../images/css/list-ginger.png") !important;
      }
    }

    .container-header .mod-menu ul > li {
      list-style: disc url("../../../../../images/css/list-ginger.png") !important;
    }
  }

footer {
  ul.bottom {
    flex-direction: column;

    li {
      padding: .25em 0;
      line-height: 1.5;
      margin-top: auto;
      margin-bottom: auto;
    }
  }
}
}


  #mobile-menu-bottom, #mobile-menu-services-bottom {
    margin-bottom: 3rem;

    li.active>a {
      text-decoration: none !important;
    }
  }

footer.bottom .grid-child{
  margin-bottom: 0px;
  padding-bottom: 0px;
}


.movie {
  min-height: 340px !important;
}

.navbar-toggler {
  margin-left: 10px;
}


/* modules site: wat we doen, procesanalyse, ... */
#mod-custom125, #mod-custom137, #mod-custom147, .latest-blog-grid, .jobs {
	.card {
		min-height: 220px;
	}
}

h3.display-card {
	font-size: 1.5rem;
}

#mod-custom125, #mod-custom137, .latest-blog-grid, .jobs {
        h3.display-card {
	    font-size: 1.5rem !important;
	    font-weight: 300 !important;
        }
}

/*latest blog*/
div.latest-blog-grid {
    h2 {
      color: var(--kingfisher);
    }
    p {
      text-align: left;
    }
    .card-icon li {
      text-align: left;
    }

    .row {
       column-gap: 0.8rem;
    }
}

.latest-blog-grid .title-wrapper {
  width: 100%;
  text-align: left;
  margin-bottom: 3rem;
}


.latest-blog-grid .blog-card-row {
  align-items: stretch;
}

.latest-blog-grid .blog-card-row > [class*="col-"] {
  display: flex;
}

.latest-blog-grid .card-icon {
  width: 100%;
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
}

.latest-blog-grid .blog-card-content {
  flex: 1 1 auto;
}

.latest-blog-grid .read-more {
  margin-top: auto !important;
  padding-left: 0;
}

a.blog-title {
	font-weight: 300 !important;
	text-decoration: none !important;
} 

a:hover.blog-title {
	font-weight: 300 !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	text-decoration-thickness: 1px !important;
} 


/* menu on mobile-only */
summary {
  background-color: white;

  .btn-blue {
      background-color: white;
      color: var(--kingfisher);
      line-heignt: inherit;
      font-weight: 300;
      border: none !important;
  }

  .nav, .mod-list {
      padding-inline-start: revert !important;
      list-style: disc url(../../../../../images/css/list-ginger.png); !important;
  }

  li.nav-item.item-107 {
      list-style: none !important;
  }

}


/* jobs */
.jobs .com-content-category-blog__item.blog-item {
  display: table !important;
}

.jobs .masonry-3 {

  .blog-item {
    margin-right: 1rem;
    padding: 1rem;
  }
}




.linkedin {
  a {
    color: white !important;
  }
  p.lead {
    color: white !important;
    font-weight: bolder;
  }
}



.back-to-top-link, .back-to-top-link.visible {
  border: 1px solid var(--kingfisher);
  color: var(--kingfisher);
  background-color: white !important;
}

, .back-to-top-link.visible {
  background-color: var(--pepper) !important;
}

.back-to-top-link:hover, .back-to-top-link:focus {
    background-color: var(--pepper);
}



  h3.drop-cap:first-letter {
    font-size: xxx-large;
  }

  h2.drop-cap:first-letter {
    font-size: xxx-large;
  }



/* Kleuren blog desktop */
body.blog .row-cols-1 > div:nth-child(4n-3) div:nth-of-type(1),
body.blog .row-cols-1 > div:nth-child(4n) div:nth-of-type(1) {
    background-color: var(--pepper) !important; /* Applies to 1, 4, 5, 8, 9, ... */
}

body.blog .row-cols-1 > div:nth-child(4n-2) div:nth-of-type(1),
body.blog .row-cols-1 > div:nth-child(4n-1) div:nth-of-type(1) {
    background-color: var(--pepper-light) !important; /* Applies to 2, 3, 6, 7, 10, ... */
}

/* Kleuren blog smartphone */
@media (width < 768px) {
  body.blog .row-cols-1 > div:nth-child(odd) div:nth-of-type(1) {
      background-color: var(--pepper) !important;
    }
  body.blog .row-cols-1 > div:nth-child(even) div:nth-of-type(1) {
      background-color: var(--pepper-light) !important;
    }
  }


/* Layout herken je dit */
.recognition-section {
    background: #ffffff;
  }

  .recognition-kicker {
    color: #226176;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }

  .recognition-kicker::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    background: #9ac32e;
    border-radius: 999px;
    margin: 0.75rem auto 0;
  }

  .recognition-title {
    color: #0d3b47;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    margin-bottom: 1rem;
  }

  .recognition-intro {
    color: #3d5560;
    max-width: 720px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.6;
  }

  .recognition-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .recognition-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
    align-items: stretch;
    gap: 1rem;
  }

  .recognition-problem,
  .recognition-solution {
    border-radius: 18px;
    padding: 1.35rem 1.5rem;
  }

  .recognition-problem {
    background: var(--pepper-light);
    color: #0d3b47;
  }

  .recognition-solution {
    background: var(--kingfisher);
    color: #ffffff;
  }

  .recognition-problem span,
  .recognition-solution span {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.45rem;
  }

  .recognition-problem span {
    color: #8b7d57;
  }

  .recognition-solution span {
    color: #9ac32e;
  }

/*  .recognition-problem p,
  .recognition-solution p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.45;
  }
*/


  .recognition-problem p {
    font-weight: 600;
  }

  .recognition-solution p {
    font-size: 1.25rem;
  }

  .recognition-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ac32e;
    font-size: 1.8rem;
    font-weight: 500;
  }

  @media (max-width: 991.98px) {
    .recognition-row {
      grid-template-columns: 1fr;
      gap: 0.5rem;
    }

    .recognition-arrow {
      transform: rotate(90deg);
      height: 24px;
      font-size: 1.4rem;
    }

    .recognition-problem,
    .recognition-solution {
      padding: 1.2rem;
      font-size: 1.25rem;
    }
  }


.display-4 {
      font-size: 2.25rem !important;
}



/* Carrousel klanten */
.clients-kicker {
  display: inline-block;
  color: #226176;
  font-size: 0.85rem;
  font-weight:                         700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.clients-title {
  color: #0d3b47;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
}

.clients-link {
  color: #0d3b47;
  font-weight: 600;
  text-decoration: none;
}

.clients-link span {
  color: #9ac32e;
  margin-left: 0.35rem;
}

.clients-link:hover {
/*  color: #226176;*/
}

.client-logo-card {
  height: 130px;
  padding: 2rem;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.client-logo-card:hover {
/*  background: #f4f2ea; */
  transform: translateY(-3px);                                                                                                        
/*  box-shadow: 0 12px 30px rgba(13, 59, 71, 0.08);*/
}

.client-logo-card img {
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.78;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

/*.client-logo-card:hover img {
  filter: grayscale(0%);
  opacity: 1;
}*/

.clients-carousel-control {
  width: 42px;
  height: 42px;
  top: 55px;
  transform: translateY(-50%);
  background: #0d3b47;
  border-radius: 50%;
  opacity: 1;
}

.clients-carousel-control:hover {
  background: #226176;
}

.clients-carousel-control span {
  color: #ffffff;
  font-size: 2rem;
  line-height: 1;
  margin-top: -3px;
}

.carousel-control-prev.clients-carousel-control {
  left: -55px;
}

.carousel-control-next.clients-carousel-control {
  right: -55px;
}

.clients-carousel-indicators {
  position: static;
  margin-top: 2rem !important;
  margin-bottom: 0;
}

.clients-carousel-indicators button {
  width: 9px;
  height: 9px;
  border-radius: 0% !important;
  background-color: #c7bd9f;
  opacity: 1;
}

.clients-carousel-indicators .active {
  background-color: #9ac32e;             
}

@media (max-width: 1199.98px) {
  .carousel-control-prev.clients-carousel-control {
    left: -20px;
  }

  .carousel-control-next.clients-carousel-control {
    right: -20px;
  }
}

@media (max-width: 767.98px) {
  .client-logo-card {
    height: 110px;
    padding: 1.5rem;
  }

  .clients-carousel-control {
    display: none;
  }
}



/* procesanalyse stappenplan */
.process-step {
  position: relative;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 2rem;
  padding: 2.5rem 0;
}

.process-step:not(:last-child) {
  border-bottom: 1px solid rgba(13, 59, 71, 0.18);
}

.process-step-number {
  color: var(--green);
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.05em;
}

.process-step-content {
  max-width: 850px;
}

.process-step-content h3 {
  margin-bottom: 1rem;
  color: var(--kingfisher);
  font-weight: 600;
}

.process-step-content p {
  color: var(--kingfisher);
  line-height: 1.7;
}

.process-step-link {
  color: var(--midnight);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.process-step-link:hover,
.process-step-link:focus {
  color: #0d3b47;
}

@media (max-width: 767.98px) {
  .process-step {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 2rem 0;
  }

  .process-step-number {
    font-size: 3.5rem;
  }
}



/* over ons */
.about-hero,
.about-story,
.about-values {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.section-label {
  margin-bottom: 1rem;
  color: #9ac32e;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-hero h1 {
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 0.95;
}

.about-hero .display-4 {
  max-width: 850px;
}

.about-quote {
  position: relative;
  width: 100%;
  padding: 3rem;
  background: #ebe8d8;
  border-left: 5px solid #9ac32e;
}

.about-quote-icon {
  margin-bottom: 1.5rem;
  color: #9ac32e;
  font-size: 2rem;
}

.about-quote footer {
  margin-top: 2rem;
  color: #226176;
}

.about-video {
  overflow: hidden;
  min-height: 100%;
}

.about-video iframe {
  border: 0;
}

.about-value-card {
  position: relative;
  width: 100%;
  padding: 2.5rem;
  background: rgba(255, 255, 255, 0.07);
  border-top: 4px solid #9ac32e;
}

.about-value-number {
  margin-bottom: 2rem;
  color: #9ac32e;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.about-value-card h3 {
  margin-bottom: 1.5rem;
  font-size: 2rem;
}

.about-value-card .lead {
  margin-bottom: 1.5rem;
}

@media (max-width: 991.98px) {
  .about-hero,
  .about-story,
  .about-values {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .about-quote,
  .about-value-card {
    padding: 2rem;
  }
}