:root {
  --background-color: #ffdb36;

  --color-brown: #79522a;
  --color-brown-light: #ad5a05;
  --color-brown-dark: #461c02;
  --color-red: #f45045;
  --color-beige: #ffee9f;
  --color-white: #fffdf3;
  --color-yellow: #ffc620;

  --spacing-unit: 0.5rem;
  --navbar-height: 245px;
}

body {
  font-family: "Bungee", sans-serif;
  background-image: url("/eggtruck_templates/assets/img/background.svg");
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--color-brown) !important;
}

section {
  padding: 3rem 0;
}

section:has(footer) {
  padding-bottom: 1rem;
}

.sticky-wrapper {
  position: sticky;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Bungee", sans-serif;
  color: var(--color-brown-light) !important;
}

@media (min-width: 768px) {
  h2 {
    font-size: 5rem;
  }

  section {
    padding: 5rem 0;
  }

  section:has(footer) {
    padding-bottom: 1rem;
  }
}

p {
  font-family: "Inter", sans-serif;
  color: var(--color-brown-dark) !important;
}

h2.section--title.center {
  text-align: center;
}

h2.section--title {
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  h2.section--title {
    font-size: 5rem;
    margin-bottom: 1.5rem;
  }
}

/* buttons */
.btn-outline-primary {
  --bs-btn-padding-x: 2.5rem;
  --bs-btn-padding-y: 1rem;
  --bs-btn-color: var(--text-color);
  --bs-btn-border-color: var(--accent-color);
  --bs-btn-hover-color: var(--text-accent-color);
  --bs-btn-hover-bg: var(--accent-color);
  --bs-btn-hover-border-color: var(--accent-color);
  --bs-btn-active-color: var(--text-accent-color);
  --bs-btn-active-bg: var(--accent-color);
  --bs-btn-active-border-color: var(--accent-color);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--accent-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--accent-color);
  border-width: 2px;
}

.btn-primary {
  --bs-btn-padding-x: 2.5rem;
  --bs-btn-padding-y: 1rem;
  --bs-btn-color: var(--text-accent-color);
  --bs-btn-bg: var(--accent-color);
  --bs-btn-border-color: var(--accent-color);
  --bs-btn-hover-color: var(--text-accent-color);
  --bs-btn-hover-bg: var(--accent-color);
  --bs-btn-hover-border-color: var(--accent-color);
  --bs-btn-active-color: var(--text-accent-color);
  --bs-btn-active-bg: var(--accent-color);
  --bs-btn-active-border-color: var(--accent-color);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--accent-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--accent-color);
  border-width: 2px;
}

/* sections */

.background--brown {
  --background-color: var(--color-brown-light);
  --text-color: var(--color-beige);
  --text-accent-color: var(--color-brown-dark);
  --accent-color: var(--color-beige);
}

.background--yellow {
  --background-color: var(--background-color);
  --text-color: var(--color-brown);
  --text-accent-color: var(--color-beige);
  --accent-color: var(--color-brown);

  position: relative;
}

.background--yellow::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background-color);
  z-index: -1;
  border-top-left-radius: calc(var(--spacing-unit) * 4);
  border-top-right-radius: calc(var(--spacing-unit) * 4);
}

.background--red {
  --background-color: var(--color-red);
  --text-color: #fff;
  --text-accent-color: var(--color-red);
  --accent-color: #fff;
}

.background--red::before {
  background-image: url("/eggtruck_templates/assets/img/eggs-red.svg") !important;
  background-size: cover !important;
}

.background--white {
  --background-color: var(--color-white);
  --text-color: var(--color-red);
  --text-accent-color: var(--color-white);
  --accent-color: var(--color-brown);
}

.background--yellow-brown {
  --background-color: var(--color-brown);
  --text-color: var(--color-yellow);
  --text-color-secondary: #fff;
  --text-accent-color: var(--color-brown);
  --accent-color: var(--color-yellow);
}

.background--yellow-brown::before {
  background-image: url("/eggtruck_templates/assets/img/eggs-brown.svg") !important;
  background-size: cover !important;
}

.sticky-wrapper h2,
.sticky-wrapper h4 {
  color: var(--text-color) !important;
}

.sticky-wrapper p {
  color: var(--text-color-secondary, var(--text-color)) !important;
}

.sticky-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background-color);
  z-index: -1;
  border-top-left-radius: calc(var(--spacing-unit) * 4);
  border-top-right-radius: calc(var(--spacing-unit) * 4);
}

/* images */
.img-fluid {
  border-radius: calc(var(--spacing-unit) * 4);
  margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .img-fluid {
    margin-bottom: 0;
  }
}

.image--with-accent {
  position: relative;
  margin-bottom: 2rem;
}

.image--with-accent img {
  z-index: 2;
  position: relative;
}

.image--with-accent .accent {
  position: absolute;
  bottom: -0.5rem;
  left: -0.5rem;
  width: 100%;
  height: 100%;
  background-color: var(--color-brown-light);
  z-index: 1;
  border-radius: calc(var(--spacing-unit) * 4);
}

@media (min-width: 768px) {
  .image--with-accent {
    margin-bottom: 0;
  }

  .image--with-accent .accent {
    bottom: -1rem;
    left: -1rem;
  }
}

/* navbar */
.navbar .phone-cta {
  border: 2px dashed var(--color-brown);
  border-radius: var(--spacing-unit);
  padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 3) !important;
}

@media (min-width: 768px) {
    .navbar .phone-cta {
      padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 6) !important;
    }
}

.navbar a {
    cursor: pointer;
}

.navbar.navbar-lower {
  --bs-nav-link-padding-y: 1rem;
}

.navbar.navbar-lower ul {
  width: 100%;
  gap: 1rem;
  align-items: stretch;
}

.navbar.navbar-lower ul li {
  width: 100%;
  text-align: center;
  padding-top: 1rem;
}

.navbar.navbar-lower li a, .navbar.navbar-lower li button {
  border: 2px solid var(--color-brown);
  border-radius: var(--spacing-unit);
  padding-top: 1rem;
  padding-bottom: 1rem;
  width: 100%;
}

.navbar.navbar-lower li a:hover, .navbar.navbar-lower li button:hover {
  background-color: var(--color-red);
  color: var(--color-beige);
  border-color: var(--color-red);
}

.navbar.navbar-lower .nav-item.cta a {
  background-color: var(--color-red);
  border: 2px solid var(--color-red);
  color: var(--color-beige);
}

/* intro-visual */
.intro-visual {
  height: calc(100vh - var(--navbar-height));
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.intro-visual h1 {
  text-align: center;
}

.intro-visual p {
    text-align: center;
}

@media (min-width: 768px) {
  .intro-visual h1 {
    font-size: 5rem;
  }
}

/* benefits */
.benefits {
  margin-top: 2rem;
}

.benefits h4,
.benefits p {
  text-align: center;
}

.benefits h4 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/* use cases */
.use_case-card {
  border: 2px dashed var(--color-white);
  border-radius: calc(var(--spacing-unit));
  margin-bottom: 1.5rem;
  height: calc(100% - 1.5rem);
  padding: 1rem 0.75rem;
}

.use_case-card h4 {
  margin-bottom: 1rem;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.use_case-card p {
  font-family: "Bungee";
  margin-bottom: 0;
}

/* our work */
.work-card {
  border-radius: calc(var(--spacing-unit) * 4);
  overflow: hidden;
  position: relative;
  margin-bottom: 1rem;
}

.work-card .overlay {
  background: linear-gradient(
    0deg,
    rgba(121, 82, 42, 1) 0%,
    rgba(121, 82, 42, 0) 100%
  );
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: calc(var(--spacing-unit) * 2);
  display: flex;
  justify-content: end;
  flex-direction: column;
}

.work-card .overlay h4 {
  color: var(--color-yellow) !important;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.work-card .overlay p {
  color: var(--color-white) !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  font-family: "Bungee", sans-serif;
}

/* contact */
.contact-form {
  padding: calc(var(--spacing-unit) * 2);
  border-radius: calc(var(--spacing-unit) * 2);
  border: 2px dashed var(--accent-color);
  margin-top: 2rem;
}

.contact-form label {
  color: #fff;
}

.contact-form .form-control {
  border-radius: var(--spacing-unit);
  padding: 1rem;
  box-shadow: none;
  border: 2px solid var(--color-white);
  background-color: var(--color-white);
  font-family: "Inter";
}

.contact-form .form-control:focus {
  border: 2px solid var(--color-yellow);
}

.contact-form button {
  width: 100%;
}

/* footer */
footer {
  margin-top: 2rem;
}

footer p,
footer a {
  color: var(--text-color) !important;
  font-family: "Inter";
  text-decoration: none;
  margin-bottom: 0;
}

footer a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-yellow);
}

footer hr {
  border: none;
  border-top: 1px solid var(--color-yellow);
  opacity: 1;
}

.grecaptcha-badge {
    z-index: 10;
}

.klaro .cookie-notice:not(.cookie-modal-notice) {
    --green1: var(--color-red);
    --dark2: var(--color-brown);
    background-color: var(--color-yellow) !important;
    box-shadow: 10px 10px 70px 8px rgba(0,0,0,0.25) !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
    font-family: "Inter";
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more {
    font-family: "Inter";
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
    font-family: "Bungee", sans-serif;
    color: var(--color-brown-light) !important;
    font-size: 1.125rem;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p .small {
    font-family: "Inter";
    color: var(--color-brown-dark) !important;
    
    font-size: 0.875rem;
}

.klaro .cookie-modal .cm-modal.cm-klaro {
    --dark1: var(--color-yellow) !important;
    --green1: var(--color-red);
}

.klaro .cookie-modal .cm-modal .cm-header p {
   color: var(--color-brown-dark) !important; 
}

.klaro .cookie-modal .cm-modal .cm-header h1.title {
    color: var(--color-brown-light) !important;
}

.klaro .cookie-modal a, .klaro .context-notice a, .klaro .cookie-notice a {
    color: var(--color-red) !important;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-list-title {
    color: var(--color-brown-light);
    font-size: 1rem;
}

.klaro .cookie-modal .cm-modal .cm-body span {
    color: var(--color-brown-dark);
}

.klaro .cookie-modal .cm-modal .hide svg {
    stroke: var(--color-brown-dark) !important;
}

.klaro .cookie-modal .cm-btn {
    --dark2: var(--color-brown);
    --blue1: var(--color-brown-dark);
}


.klaro .cookie-modal a span {
    color: var(--color-brown-light);
}


#huurformulier{
    height: 1450px;
}


@media (min-width: 992px){
    #huurformulier{
        height: 800px;
    }
}

@keyframes CookiepreferenceWidgetFadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

#CookiepreferenceWidget {
    word-wrap: break-word;
    left: 10px;
    bottom: 10px;
    animation: CookiepreferenceWidgetFadeIn .3s ease-in;
    background-color: #141414;
    border-radius: 40px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.5;
    min-height: 48px;
    min-width: 48px;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: all .2s ease-in;
    word-break: break-word;
    z-index: 2147483631
}

#CookiepreferenceWidget,
#CookiepreferenceWidget * {
    background: transparent;
    box-sizing: border-box;
    color: #FFFFFF;
    font-size: 15px;
    letter-spacing: .1px;
    margin: 0;
    outline: 0;
    padding: 0
}

#CookiepreferenceWidget * {
    font-family: inherit
}

#CookiepreferenceWidget button,
#CookiepreferenceWidget li,
#CookiepreferenceWidget strong,
#CookiepreferenceWidget svg,
#CookiepreferenceWidget ul {
    border: none;
    cursor: inherit;
    font-weight: inherit;
    line-height: 1.5
}

#CookiepreferenceWidget {
    opacity: 1;
    pointer-events: all;
    transition: opacity .3s ease-in, border-radius .2s ease-in
}

#CookiepreferenceWidget:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, .3)
}

#CookiepreferenceWidget .CookiepreferenceWidget-logo {
    cursor: pointer
}

#CookiepreferenceWidget .CookiepreferenceWidget-logo {
    display: block;
    transition: opacity .3s, transform .3s
}

#CookiepreferenceWidget .CookiepreferenceWidget-logo svg {
    display: block;
    height: 44px;
    transition: all .3s;
    width: 44px
}

#CookiepreferenceWidget button.CookiepreferenceWidget-logo svg {
    height: 48px;
    transition: all 0s ease;
    transition-delay: .2s;
    width: 48px
}

#CookiepreferenceWidget .CookiepreferenceWidget-logo svg circle {
    fill: #141414
}

#CookiepreferenceWidget {
    display: flex;
    max-height: 0;
    max-width: 0;
    overflow: hidden;
    transition: all .2s ease-in
}

/* 
.NnBn8c{
    visibility: hidden;
} */