@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
  --text-primary-40: rgb(128, 128, 128, 0.4);
  --bg-primary-40: rgb(128, 128, 128, 0.4);
  --text-primary: rgba(63, 93, 141, 1);
  --bg-primary: rgba(63, 93, 141, 1);
  --text-secondary: rgb(212, 175, 055);
  --bg-secondary: aqua;
  --text-dark: #203b5d;
  --bg-dark: #203b5d;
  --text-white: #ffffff;
  --bg-white: #ffffff;
  --text-black: #000000;
  --bg-black: #000000;
  --text-gray: #999999;
  --bg-gray: #999999;
  --text-gray-1: #c0c6c8;
  --bg-gray-1: #c0c6c8;
  --primary-gradient: linear-gradient(rgba(32, 59, 93, 1), rgba(117, 151, 222, 1) 100%);
  --primary-gradient: linear-gradient(rgba(32, 59, 93, 1), rgba(117, 151, 222, 1) 100%);
  --secondary-gradient: linear-gradient(to right, #cb9b51 0, #f6e27a 45%, #f6f2c0 50%, #f6e27a 55%, #cb9b51 100%);
  --header-height: 87px;
}

.preloader {
  position: fixed;
  z-index: 1050;
  background-color: #ffffff;
  left: 0;
  top: 0;
  right: 0px;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader img {}

.preloader span:nth-child(1) {
  content: '';
  border: 4px solid transparent;
  border-left-color: var(--bg-secondary);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  animation: logo-transform 0.5s ease-in-out infinite forwards;
}

.preloader span:nth-child(2) {
  content: '';
  border: 4px solid transparent;
  border-right-color: var(--bg-secondary);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  animation: logo-transform 0.5s ease-in-out infinite forwards;
}

.preloader span:nth-child(3) {
  content: '';
  border: 4px solid transparent;
  border-top-color: var(--bg-primary);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  animation: logo-transform 1s ease-in-out infinite forwards;
}

.preloader span:nth-child(4) {
  content: '';
  border: 4px solid transparent;
  border-bottom-color: var(--bg-primary);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  animation: logo-transform 1s ease-in-out infinite forwards;
}

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

.opacity_hide {
  opacity: 0;
  visibility: hidden;
  transition: 1s;
}

.opacity_show {
  opacity: 1;
  visibility: visible;
  transition: .5s;
}

.loaded .preloader {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out;
}

.text-primary-40 { color: var(--text-primary-40) !important; }
.bg-primary-40 { background-color: var(--bg-primary-40) !important; }
.text-primary { color: var(--text-primary) !important; }
.bg-primary { background-color: var(--bg-primary) !important; }
.text-dark { color: var(--text-dark) !important; }
.bg-dark { background-color: var(--bg-dark) !important; }
.text-gray { color: var(--text-gray) !important; }
.bg-gray { background-color: var(--bg-gray) !important; }

.text-primary-gradient {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-secondary-gradient {
  background: var(--secondary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bg-primary-gradient { background: var(--primary-gradient);}
.bg-secondary-gradient { background: var(--secondary-gradient);}

body { font-family: 'Poppins', sans-serif; overflow-x: hidden; }

.navbar {
  padding: 5px 0;
  height: var(--header-height);
  background-color: var(--text-primary-40);
}
.navbar.nav-fixed {
  background-color: var(--text-primary);
}
.navbar .navbar-nav { gap: 20px; }
.navbar .nav-item {}
.navbar .nav-item .nav-link {
  font-size: 17px;
  border-radius: 50px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 6px 16px;
  position: relative;
  transition: color .1s .2s;
}
.navbar .nav-item .nav-link:hover {
  /* background-color: #fff; */
  color: #000;
}
/* Maak de dropdown exact zoals de rest van de navbar */
.navbar .dropdown-menu {
  background-color: var(--bg-primary);
  border: none;
  border-radius: 0;
  min-width: 200px;
  box-shadow: none;
}
/* Maak de dropdown exact zoals de rest van de navbar */
.navbar .dropdown-menu {
  background-color: var(--bg-primary);
  border: none;
  border-radius: 20px;
  min-width: 200px;
  box-shadow: 5px 8px 8px #000;
}
.navbar .dropdown-item {
  color: var(--text-gray-1);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 1px;
  padding: 12px 24px;
  border-radius: 20px;
  background: none;
  transition: 0.2s;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: rgba(255,255,255,0.08); /* lichte highlight */
  color: #fff;
}
.navbar .dropdown-toggle {
  color: var(--text-gray-1) !important;
  font-weight: 600;
}
/* Optioneel - maak de pijl wit/blauw ipv standaard zwart */
.navbar .dropdown-toggle::after { border-top-color: #c0c6c8; }

.navbar .nav-item .nav-link:before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: #fff;
  border-radius: 50px;
  z-index: -1;
  transform: scale(0);
  opacity: 0;
  transition: 0.5s;
}
.navbar .nav-item .nav-link:hover:before {
  transform: scale(1);
  opacity: 1;
}
.navbar .nav-item .nav-link.active {
  background-color: #fff;
  color: #000;
}

main { /* padding-top: var(--header-height); */ }

.hero-section {
  position: relative;
  background: var(--primary-gradient);
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-section .scrolling-text {
  text-align: center;
  color: #1b283a;
  text-shadow: 2px 4px 5px #f9f9ff;
  z-index: 10;
  position: relative;
  font-weight: 600;
  position: relative;
}

.hero-section img { object-fit: contain; }
.navbar-toggler { border: 0; padding: 0; }
.navbar-toggler svg { width: 40px; color: #fff; }

#grond {
  position: absolute;
  max-width: 100%;
  height: 100%;
  bottom: -890px;
  z-index: 3;
  object-fit: fill;
}
.hero-section img { width: 100%; }

#wolken {
  position: absolute;
  max-width: 100%;
  max-height: 750px;
  top: 20%;
  right: 0%;
  object-fit: cover;
}
@media screen and (max-width: 1200px) {
  #wolken { max-width: none; min-width: 600px; }
}
img#akerk {
  position: absolute;
  bottom: 1%;
  left: -12px;
  max-width: 20%;
  object-fit: cover;
  pointer-events: none;
  z-index: 4;
  transform: translateX(0);
}
@media screen and (max-width: 1200px) {
  img#akerk { width: 25%; max-width: none; min-width: 120px; }
}
img#toren {
  position: absolute;
  bottom: 1%;
  max-width: 17%;
  right: 0%;
  pointer-events: none;
  z-index: 4;
  transform: translateX(00);
}
@media screen and (max-width: 1200px) {
  img#toren { width: 25%; max-width: none; min-width: 120px; max-height: 60vh; }
}
img#kraan {
  position: absolute;
  left: 12%;
  bottom: 20px;
  max-width: 40%;
  z-index: 2;
}
.crane-contaienr {
  position: absolute;
  bottom: 20px;
  width: 100%;
  height: 75vh;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 1200px) {
  .crane-contaienr { height: 65vh; }
}
.crane-contaienr-inner {
  height: 100%;
  aspect-ratio: 730 / 654;
  margin-right: 70vh;
  position: relative;
}
@media screen and (max-width: 1200px) {
  .crane-contaienr-inner { margin-right: 50vh; }
}
.crane-contaienr .crane-image { width: 100%; height: 100%; object-fit: cover; }
.crane-contaienr .crane-wire-container { position: absolute; right: 9.5%; width: 20px; top: 23%; }
.crane-contaienr .crane-wire-container-inner { width: 100%; overflow: hidden; }
.crane-contaienr .crane-wire { width: 100%; }
.crane-contaienr .crane-hook { width: 100%; }

img#station {
  position: absolute;
  left: 17%;
  bottom: 0%;
  max-width: 40%;
  z-index: 5;
}
@media screen and (max-width: 1200px) {
  img#station { width: 60%; max-width: none; min-width: 300px; left: 10%; }
}

img#museum {
  position: absolute;
  right: 10%;
  bottom: 1%;
  max-width: 31%;
  z-index: 4;
  pointer-events: none;
  transform: translateX(00);
}
@media screen and (max-width: 1200px) {
  img#museum { display: none; }
}

img#gemeente {
  position: absolute;
  left: 47%;
  bottom: -1.5%;
  max-width: 14%;
  z-index: 7;
  transform: translateX(0);
}
@media screen and (max-width: 1200px) {
  img#gemeente { width: 25%; max-width: none; min-width: 120px; left: 60%; }
}

.laptop-scroll-images {}

.hero-section .scrolling-text {}

.mobile-img {}

.mobile-img img {
  height: 400px;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: var(--header-height);
}

.text-section {
  z-index: 1;
  position: relative;
  color: var(--text-white);
  padding: 120px 0 60px 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)), url(../imgs/home-page/grond-strip-bottom.webp);
  margin-top: -2.4%;
}
.text-section:after {
  content: '';
  position: absolute;left: 0;top: 0;
  width: 100%;height: 70px;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)), url(../imgs/home-page/grond-strip.webp);
  background-size: 100% 70px;
  background-repeat: no-repeat;
}

.text-section .container{position: relative;z-index: 2;}
.text-section h2 { font-weight: 600; }
.text-section h3 { font-weight: 600; }
.text-section p { font-size: 20px; }

@media(min-width:1200.1px) { .mobile-img { display: none; } }
@media(max-width:1200px) {
  .navbar { background-color: var(--bg-primary); }
  .navbar-nav {
    background-color: var(--bg-primary);
    border-radius: 20px;
    padding: 15px;
  }
}

@media(max-width:1200px) {
  .hero-section {
    height: 80vh;
    overflow: hidden;
  }
}

footer { padding: 10px 0; background-color: var(--bg-dark); }
footer a { color: var(--text-white); }

.box-style-1 {
  border: 4px solid black;
  box-shadow: 5px 8px 8px #000;
  border-radius: 10px;
  padding: 20px;
  background: rgba(128, 128, 128, 0.3);
  color: var(--text-gray-1);
  max-width: 500px;
}

[class*=-page] {
  padding-top: calc(var(--header-height) + 40px);
  padding-bottom: 50px;
}

.diensten-page h2 {
  margin-bottom: 30px;
  text-align: center;
  text-transform: uppercase;
}
.diensten-page h2:after {
  content: "";
  display: block;
  width: 50%;
  height: 1px;
  background: #fff;
  margin: 20px auto -5px auto;
}
.diensten-page h4 {
  display: block;
  font-size: 15px;
  text-transform: lowercase;
  text-align: justify;
}
.diensten-page .mt-40 {}

@media(min-width:1600px) {
  .diensten-page .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
  }
}
@media(max-width:1600px) and (min-width:1400px) {
  .diensten-page .col-xxl-auto {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
}
@media(max-width:1200px) { .box-style-1 { max-width: 100%; } }

.projecten-page { overflow: hidden; }
.projecten-item { position: relative; }
.projecten-item img { transition: .7s; border-radius: 10px; width: 100%; }
.projecten-page h1{ color: #fff; font-weight: bold; padding-top: 40px; font-size: 2rem; }

.delfzijl-inner-page h1,
.bellingwolde-inner-page h1,
.leeuwarden-inner-page h1,
.assen-inner-page h1,
.adorp-inner-page h1 {
  color: #c0c6c8;
  font-weight: bold;
  font-size: 2.1rem;
  padding-top: 40px;
}
.delfzijl-inner-page h2,
.bellingwolde-inner-page h2,
.leeuwarden-inner-page h2,
.assen-inner-page h2,
.adorp-inner-page h2 {
  color: #c0c6c8;
  font-weight: bold;
  font-size: 1.6rem;
}
.delfzijl-inner-page h3,
.bellingwolde-inner-page h3,
.leeuwarden-inner-page h3,
.assen-inner-page h3,
.adorp-inner-page h3 {
  color: #c0c6c8;
  font-weight: bold;
  font-size: 1.2rem;
  padding-top: 30px;
}

h1{
	font-family: 'Poppins', sans-serif;
	color: #c0c6c8;
    font-size: 2.3rem;
}

.projecten-item:hover img { transform: scale(1.05); }
.projecten-item a h2 { color: var(--text-white); font-weight: bold; text-transform: uppercase; }
.projecten-item a h3 { color: var(--text-secondary); text-transform: capitalize; }
.projecten-item a {
  position: absolute;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: 0.6s;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  transform: scale(1.05);
}
.projecten-item:hover a {
  opacity: 1;
  visibility: visible;
}

.pdf-box {
  border: 2px solid #000;
  border-radius: 5px;
  box-shadow: 5px 8px 8px #000;
  padding: 20px;
  background: rgba(128, 128, 128, 0.3);
  cursor: pointer;
  display: flex;
  gap: 20px;
  align-items: center;
}

.projecten-item h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  background: linear-gradient(to right, #cb9b51 0, #f6e27a 45%, #f6f2c0 50%, #f6e27a 55%, #cb9b51 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #cb9b51;
}
@media (max-width: 991px) {
  .inner-text h1 { font-size: 1.4rem; }
}
.bellingwolde-inner-page {}

[class*=-inner-page] { padding-top: calc(var(--header-height) + 0px); padding-bottom: 0px;}
[class*=-inner-page] .bg-dark { border-right: 2px solid #ffffff; padding: 40px;}
[class*=-inner-page] .bg-dark .inner-carousel .item,
[class*=-inner-page] .bg-dark [class*=-flex]>div { border-radius: 10px; overflow: hidden;}
[class*=-inner-page] .bg-dark img { object-fit: contain; width: 100%;}

.privacy-inner-page,
.inner-text { color: var(--text-gray-1);}
.privacy-inner-page a { color: var(--text-secondary); word-wrap: break-word;}
.privacy-inner-page p { margin-bottom: 0px;}
.privacy-inner-page h2 { margin-bottom: 10px;}
.privacy-inner-page h3 { margin-bottom: 10px; margin-top: 30px;}
.inner-text { padding: 40px;}
.inner-text h5.d-flex { gap: 20px;}
.inner-text h5.d-flex u { min-width: 250px;}
.inner-text h3,
.inner-text h4,
.inner-text h5 { text-transform: capitalize;}
.inner-text p { margin-bottom: 0px;}
.inner-text a { color: var(--text-secondary);}
.contact-image { box-shadow: 5px 8px 8px #333; border-radius: 10px;}
.contact-inner-page {}

@media(min-width:1200px) { .projecten-item img { min-height: 270px; } }
@media(max-width:1200px) {
  .text-section { margin-top: -3.9%; }
  .items { border-radius: 10px; overflow: hidden; }
  .items img { min-height: 194px; }
  .projecten-item img { min-height: 200px; }
  [class*=-page] { padding-top: calc(var(--header-height) + 20px); padding-bottom: 30px;}
  [class*=-inner-page] { padding-top: calc(var(--header-height) + 0px); padding-bottom: 0px;}
  [class*=-inner-page] .row>div { padding: 20px 15px;}
  [class*=-inner-page] .row>div:last-child { padding: 20px 5px;}
  .projecten-item img { transform: scale(1) !important;}
  .projecten-item a { opacity: 0.6; visibility: visible; transform: scale(1);}
  [class*=-inner-page] .bg-dark { padding: 0px 20px 20px 20px; border-right: 0;}
  .inner-text { padding: 0px 10px;}
  .inner-text h5.d-flex { gap: 05px; justify-content: space-between;}
  .inner-text h5.d-flex * { flex: 1; word-wrap: break-word;}
  .inner-text h5.d-flex span { text-align: right;}
  .inner-text h5.d-flex u { min-width: unset;}
}

.projecten-content h1 {
  background: var(--secondary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #cb9b51; /* fallback kleur */
}

@media(max-width:768px) {
  .inner-text h5.d-flex { font-size: 16px; }
  .contact-inner-page a { display: block;}
  .text-section { margin-top: -5%; }
}
@media(max-width:576px) {
  .text-section { margin-top: -9%; }