/* 
 * Home page
 *
 * ============================= */

h1.homepage-heading {
   margin-top: 120px;
   width: 100%;
   text-align: center;
   text-transform: uppercase;
   color: var(--color-primary);
   font-weight: 600;
   /* line-height: 1.8; */
   line-height: 1.6;
   letter-spacing: 3.6px;
   font-size: 4.2rem;
   margin-bottom: 2rem;
}

p.homepage-sub-heading {
   text-align: center;
   text-transform: uppercase;
   color: var(--color-secondary);
   font-weight: 350;
   /* font-size: 3.2rem; */
   font-size: 2.8rem;
}

@media only screen and (max-width:560px) {
   h1.homepage-heading {
      font-size: 3.2rem;
   }

   p.homepage-sub-heading {
      font-size: 2.2rem;
   }
}

@media only screen and (max-width:420px) {
   h1.homepage-heading {
      font-size: 2.8rem;
   }

   p.homepage-sub-heading {
      font-size: 2rem;
   }
}

.home #primary {
   /* background-color: var(--color-background-dark); */
   background-color: transparent;
   position: relative;
}

.home .homepage-video-box {
   position: fixed;
   width: 100vw;
   height: 100vh;


}

.home .homepage-video-box video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}


.home .homepage-video-box .video-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(var(--color-background-dark-rba), 0.8);
   /* Of gewoon: rgba(0,0,0,0.4) */
   z-index: 1;
}

/*
 * Home page > Proposition
 *
 * ============================= */

section.section-proposition {
   margin-top: 120px;
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
}

.circle-wrap a.circle-item,
.circle-wrap a.circle-center,
.circle-wrap a.circle-item:hover,
.circle-wrap a.circle-center:hover {
   text-decoration: none;
}

.circle-wrap {
   position: relative;
   width: 90vmin;
   height: 90vmin;
   min-width: 320px;
   min-height: 320px;
   max-width: 100vw;
   max-height: 100vh;
   background: transparent;
}

.circle-svg {
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   z-index: 1;
   pointer-events: none;
}

.circle-center {
   position: absolute;
   left: 46%;
   /* left: 50%; */
   top: 50%;
   width: 25vmin;
   height: 25vmin;
   margin-left: -10vmin;
   margin-top: -10vmin;
   /* background: #fff; */
   background: transparent;
   /* border: 1.6vmin solid #f39c12; */
   border: 3px solid var(--color-primary);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 5vmin;
   /* color: #f39c12; */
   color: var(--color-primary);
   z-index: 3;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);
   /* transition: background 0.2s, color 0.2s; */
   transition: all 0.2s, color 0.2s;
   cursor: pointer;
}





.circle-item {
   position: absolute;
   /* left: 46%; */
   left: 42%;
   top: 46%;
   width: 25vmin;
   height: 25vmin;
   margin-left: -6vmin;
   margin-top: -6vmin;
   background: transparent;
   /* border: 3px solid var(--color-primary); */
   border: 3px solid var(--color-secondary);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 5vmin;
   color: var(--color-primary);
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
   z-index: 2;
   cursor: pointer;
   transition: all 0.2s, color 0.2s;
   overflow: hidden;
}

.circle-item i,
.circle-center i {
   font-size: 8vmin;
}

.circle-center:hover,
.circle-item:hover {
   color: var(--color-white);
   border: 6px solid var(--color-primary);
   background-color: var(--color-background-dark-darker);
   box-shadow: var(--box-shadow);
}



/* Cirkelverdeling met trigonometrie */
/* 6 ballen, 360/6 = 60 graden per stap */
.circle-item:nth-child(2) {
   --angle: 0deg;
}

.circle-item:nth-child(3) {
   --angle: 60deg;
}

.circle-item:nth-child(4) {
   --angle: 120deg;
}

.circle-item:nth-child(5) {
   --angle: 180deg;
}

.circle-item:nth-child(6) {
   --angle: 240deg;
}

.circle-item:nth-child(7) {
   --angle: 300deg;
}

.circle-item {
   /* Straal: 38vmin vanaf het midden */
   transform: rotate(var(--angle)) translateY(-38vmin);
}

.circle-center span.inner-circle,
.circle-item span.inner-circle {
   color: var(--color-secondary);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
   width: 100%;
   height: 100%;
   /* Draai het icoon terug */
   transform: rotate(calc(-1 * var(--angle, 0deg)));
}

.circle-center span.inner-circle {
   color: var(--color-primary);
}

.circle-center span.inner-circle-heading,
.circle-item span.inner-circle-heading {
   display: none;
}


.circle-center span.inner-circle-heading h2,
.circle-item span.inner-circle-heading h2 {
   text-align: center;
   font-size: 2rem;
   margin-bottom: 0;
   padding: 0 6px;
}


/* @media (max-width: 600px) { */
@media (max-width: 0px) {
   .circle-wrap {
      min-width: 0;
      min-height: 0;
      width: 98vw;
      height: 98vw;
   }

   .circle-center {
      width: 30vw;
      height: 30vw;
      margin-left: -15vw;
      margin-top: -15vw;
      font-size: 10vw;
      border-width: 2vw;
   }

   .circle-item {
      width: 18vw;
      height: 18vw;
      margin-left: -9vw;
      margin-top: -9vw;
      font-size: 6vw;
      border-width: 1.5vw;
   }

   .circle-item {
      transform: rotate(var(--angle)) translateY(-30vw);
   }
}



/* Animations  */

.mobile-proposition-headings {
   display: none;
}

@media only screen and (max-width:768px) {

   /* One active frame per circle within a shared 7s cycle */
   @keyframes pulse-1 {

      0%,
      14.28%,
      100% {
         border-width: 3px;
         background-color: transparent;
         box-shadow: none;
      }

      7.14% {
         border-width: 6px;
         background-color: var(--color-background-dark-darker);
         box-shadow: var(--box-shadow);
      }
   }

   @keyframes pulse-2 {

      14.28%,
      28.56%,
      100% {
         border-width: 3px;
         background-color: transparent;
         box-shadow: none;
         border-color: var(--color-secondary);
      }

      21.42% {
         border-width: 6px;
         background-color: var(--color-background-dark-darker);
         box-shadow: var(--box-shadow);
         border-color: var(--color-primary);
      }
   }

   @keyframes pulse-3 {

      28.56%,
      42.84%,
      100% {
         border-width: 3px;
         background-color: transparent;
         box-shadow: none;
         border-color: var(--color-secondary);
      }

      35.7% {
         border-width: 6px;
         background-color: var(--color-background-dark-darker);
         box-shadow: var(--box-shadow);
         border-color: var(--color-primary);
      }
   }

   @keyframes pulse-4 {

      42.84%,
      57.12%,
      100% {
         border-width: 3px;
         background-color: transparent;
         box-shadow: none;
         border-color: var(--color-secondary);
      }

      49.98% {
         border-width: 6px;
         background-color: var(--color-background-dark-darker);
         box-shadow: var(--box-shadow);
         border-color: var(--color-primary);
      }
   }

   @keyframes pulse-5 {

      57.12%,
      71.4%,
      100% {
         border-width: 3px;
         background-color: transparent;
         box-shadow: none;
         border-color: var(--color-secondary);
      }

      64.26% {
         border-width: 6px;
         background-color: var(--color-background-dark-darker);
         box-shadow: var(--box-shadow);
         border-color: var(--color-primary);
      }
   }

   @keyframes pulse-6 {

      71.4%,
      85.68%,
      100% {
         border-width: 3px;
         background-color: transparent;
         box-shadow: none;
         border-color: var(--color-secondary);
      }

      78.54% {
         border-width: 6px;
         background-color: var(--color-background-dark-darker);
         box-shadow: var(--box-shadow);
         border-color: var(--color-primary);
      }
   }

   @keyframes pulse-7 {

      85.68%,
      100% {
         border-width: 3px;
         background-color: transparent;
         box-shadow: none;
         border-color: var(--color-secondary);
      }

      92.82% {
         border-width: 6px;
         background-color: var(--color-background-dark-darker);
         box-shadow: var(--box-shadow);
         border-color: var(--color-primary);
      }
   }


   .pulse-1 {
      animation: pulse-1 14s linear infinite;
   }

   .pulse-2 {
      animation: pulse-2 14s linear infinite;
   }

   .pulse-3 {
      animation: pulse-3 14s linear infinite;
   }

   .pulse-4 {
      animation: pulse-4 14s linear infinite;
   }

   .pulse-5 {
      animation: pulse-5 14s linear infinite;
   }

   .pulse-6 {
      animation: pulse-6 14s linear infinite;
   }

   .pulse-7 {
      animation: pulse-7 14s linear infinite;
   }



   .mobile-proposition-headings {
      position: relative;
      margin-top: 160px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
   }

   .mobile-proposition-headings h2 {
      width: 100%;
      text-align: center;
      color: var(--color-primary);
      visibility: hidden;
      position: absolute;
      /* Dit zorgt ervoor dat ze op dezelfde plek blijven staan */
   }

   .proposition-heading-1 {
      animation: proposition-heading-1 14s linear infinite;
   }

   .proposition-heading-2 {
      animation: proposition-heading-2 14s linear infinite;
   }

   .proposition-heading-3 {
      animation: proposition-heading-3 14s linear infinite;
   }

   .proposition-heading-4 {
      animation: proposition-heading-4 14s linear infinite;
   }

   .proposition-heading-5 {
      animation: proposition-heading-5 14s linear infinite;
   }

   .proposition-heading-6 {
      animation: proposition-heading-6 14s linear infinite;
   }

   .proposition-heading-7 {
      animation: proposition-heading-7 14s linear infinite;
   }

   @keyframes proposition-heading-1 {

      0%,
      14.28%,
      100% {
         visibility: hidden;
      }

      7.14% {
         visibility: visible;
      }
   }

   @keyframes proposition-heading-2 {

      14.28%,
      28.56%,
      100% {
         visibility: hidden;
      }

      21.42% {
         visibility: visible;
      }
   }

   @keyframes proposition-heading-3 {

      28.56%,
      42.84%,
      100% {
         visibility: hidden;
      }

      35.7% {
         visibility: visible;
      }
   }

   @keyframes proposition-heading-4 {

      42.84%,
      57.12%,
      100% {
         visibility: hidden;
      }

      49.98% {
         visibility: visible;
      }
   }

   @keyframes proposition-heading-5 {

      57.12%,
      71.4%,
      100% {
         visibility: hidden;
      }

      64.26% {
         visibility: visible;
      }
   }

   @keyframes proposition-heading-6 {

      71.4%,
      85.68%,
      100% {
         visibility: hidden;
      }

      78.54% {
         visibility: visible;
      }
   }

   @keyframes proposition-heading-7 {

      85.68%,
      100% {
         visibility: hidden;
      }

      92.82% {
         visibility: visible;
      }
   }
}

/* 
 * Footer
 *
 * ============================= */

footer {
   position: relative;
   background-color: #222928;
   background-color: var(--color-background-dark-darker);
   color: var(--color-white);
   list-style: none;

   font-size: 14px;
   font-weight: 400;
   margin-top: 60px;
}

footer a {
   color: var(--color-primary);
}

.footer-bottom,
.footer-main {
   padding: 40px 120px 80px 120px;
   margin: auto;
   display: flex;
   justify-content: space-between;
   position: relative;
   gap: 20px;
}

.footer-main {
   margin-top: 28px;
}




.footer-left {
   max-width: 50%;
}

.footer-logo-box {

   position: relative;
   width: 450px;
   height: auto;
   padding: 0 0 38px 0;
   max-width: 100%;
}

.footer-logo-box img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}



.footer-bottom {
   padding: 10px 120px;
   background-color: var(--color-true-black);
}



ul.footer-slogan {

   list-style: none;
   font-size: 18px;
   font-weight: 500;
   line-height: 160%;
   /* 28.8px */
   letter-spacing: 1.26px;
}

.footer-socials {
   margin-top: 48px;
}

.footer-socials.small-screen {
   display: none;
}

.footer-socials a {
   font-size: 28px;
}

.footer-company-details {
   /* padding-top:34px; */
}

.footer-company-details p {
   color: var(--color-secondary);
   font-size: 20px;
   font-weight: 700;
   line-height: 160%;
   /* 32px */
   letter-spacing: 1.6px;
}

.footer-company-details ul {
   list-style: none;
   font-size: 18px;

   font-weight: 500;
   line-height: 160%;
   letter-spacing: 0.54px;
}

.footer-company-details ul li {
   margin-bottom: 0.8rem;
}

.contact-details a {
   text-decoration: none;
}

.contact-details .icon {
   display: inline-block;
   width: 20px;
   margin-right: 6px;
}

.contact-details i {
   color: var(--color-grey-60);


}

.footer-bottom p,
.footer-bottom ul {
   margin: 0;
}

.footer-bottom a {
   text-decoration: none;
}

.footer-bottom ul {
   display: flex;
   justify-content: space-between;
   gap: 24px;
   list-style: none;

}

@media only screen and (max-width:930px) {
   .footer-main {
      padding: 40px 60px 80px 60px;
   }

   .footer-bottom {
      padding: 10px 60px;
   }

}

@media only screen and (max-width:780px) {

   .footer-main {
      flex-direction: column;
   }

   .footer-left {
      width: 100%;
      max-width: 100%;
   }

   .footer-right {
      margin-top: 18px;
   }

   .footer-socials.small-screen {
      display: block;
   }

   .footer-socials.large-screen {
      display: none;
   }

}

@media only screen and (max-width:650px) {
   .footer-bottom {
      padding: 10px 30px;
      flex-direction: column;
      align-items: center;
      gap: 24px;
   }

   .footer-bottom nav {
      width: 100%;
   }

   .footer-bottom nav li {
      /* min-width: 150px; */
      text-align: center;
   }
}

@media only screen and (max-width:366px) {

   ul.footer-slogan,
   .footer-company-details ul {
      font-size: 16px;
   }

}

@media only screen and (max-width:460px) {
   .footer-main {
      padding: 40px 30px 60px 30px;
   }

   .footer-bottom {
      padding: 10px 30px;
   }
}

@media only screen and (max-width:390px) {
   .footer-main {
      padding: 40px 20px 60px 20px;
   }

   .footer-bottom {
      padding: 10px 20px;
   }
}

/*
@media only screen and (max-width: 680px) {
   .footer-logo-box {
      padding: 80px 60px 0 60px;
   }

   .footer-main {
      flex-direction: column-reverse;
      padding: 0 60px 0 60px;
   }

   .footer-left {
      margin-top: 80px;
      padding-bottom: 60px;
   }

   .footer-bottom {
      padding: 10px 60px;
      flex-direction: column;
      align-items: center;
      gap: 24px;
   }
}

@media only screen and (max-width: 440px) {
   .footer-logo-box {
      padding: 80px 30px 0 30px;
   }

   .footer-main {
      flex-direction: column-reverse;
      padding: 0 30px 0 30px;
   }

   .footer-left {
      margin-top: 80px;
      padding-bottom: 60px;
   }

   .footer-bottom {
      padding: 10px 30px;
      flex-direction: column;
      align-items: center;
      gap: 24px;
   }
}

*/

/* 
 * Footer Modal
 *
 * ============================= */
.global-modal {
   display: none;
   position: fixed;
   z-index: 10000;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, 0.5);
   align-items: center;
   justify-content: center;
}

.global-modal.active-modal {
   display: flex !important;
}

.global-modal-content {
   background: var(--color-grey-00);
   padding: 2rem 2.5rem;
   border-radius: 1.5rem;
   max-width: 90vw;
   max-height: 80vh;
   overflow-y: auto;
   /* box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18); */
   box-shadow: var(--box-shadow);
   position: relative;
   animation: modalIn 0.2s;
}

.global-modal-content h2 {
   color: var(--color-background-dark-darker);
}

#global-modal-inner {
   margin: 42px 0 20px 0;
}

@keyframes modalIn {
   from {
      transform: scale(0.9);
      opacity: 0;
   }

   to {
      transform: scale(1);
      opacity: 1;
   }
}

button.global-modal-close {
   position: absolute;
   top: 1rem;
   right: 1rem;
   background: none;
   border: none;
   font-size: 2.5rem;
   color: var(--color-background-dark-darker);
   cursor: pointer;
   line-height: 1;
}

button.global-modal-close:hover {
   background-color: var(--color-background-dark-darker);
   color: var(--color-white);
}

/* Forms  */

.wpcf7-list-item-label {
   font-weight: 300;
}

@media only screen and (max-width:600px) {
   .wpcf7-list-item-label {
      font-size: 16px;
   }
}