.elementor-378 .elementor-element.elementor-element-932c223{--display:flex;--min-height:100vh;--justify-content:center;--overflow:hidden;}.elementor-378 .elementor-element.elementor-element-932c223:not(.elementor-motion-effects-element-type-background), .elementor-378 .elementor-element.elementor-element-932c223 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-76189d3 );}.elementor-378 .elementor-element.elementor-element-6a55490{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}#elementor-popup-modal-378{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-378 .dialog-message{width:640px;height:auto;}#elementor-popup-modal-378 .dialog-close-button{display:flex;}#elementor-popup-modal-378 .dialog-widget-content{box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}/* Start custom CSS for html, class: .elementor-element-6a55490 *//* Scrollbar weg in popup */
.elementor-popup-modal,
.dialog-widget-content,
.dialog-message {
  overflow: hidden !important;
}

/* Wrapper: verticaal en horizontaal centreren */
.tm-hero-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 20px;
  box-sizing: border-box;
}

/* Logo's in 1 rij */
.tm-hero-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

/* Logo basis */
.tm-logo {
  display: block;
  max-width: 180px;
  height: auto;
}

/* Animaties */
.tm-logo-main {
  opacity: 0;
  animation: tmMainFadeIn 1.2s ease-out forwards;
}

.tm-logo-side {
  opacity: 0;
}

/* Pet van links */
.tm-logo-pet {
  transform: translateX(-60px);
  animation: tmSlideInLeft 1s ease-out forwards;
  animation-delay: 1.2s;
}

/* Co van rechts */
.tm-logo-co {
  transform: translateX(60px);
  animation: tmSlideInRight 1s ease-out forwards;
  animation-delay: 1.2s;
}

/* Enter knop (verschijnt na animatie) */
.tm-enter-wrap {
  opacity: 0;
  animation: tmEnterFade 0.6s ease-out forwards;
  animation-delay: 2.6s;
}

.tm-enter-btn {
  display: inline-block;
  padding: 12px 22px;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.85);
  color: #111;
  font-weight: 600;
}

/* Popup: geen horizontale scrollbar */
.elementor-popup-modal,
.dialog-widget-content,
.dialog-message {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

/* Wrapper blijft gecentreerd */
.tm-hero-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
}

/* Logo's: mogen wrappen en blijven binnen scherm */
.tm-hero-logos {
  display: flex;
  flex-wrap: wrap;              /* <-- belangrijk */
  align-items: center;
  justify-content: center;
  gap: 24px;                    /* iets kleiner dan 40 */
  max-width: 100%;
}

/* Logo's schalen mee met schermbreedte */
.tm-logo {
  display: block;
  width: clamp(140px, 22vw, 180px);
  height: auto;
  max-width: 100%;
}


.tm-enter-btn:hover {
  background: rgba(255,255,255,1);
}

/* Keyframes */
@keyframes tmMainFadeIn {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes tmSlideInLeft {
  0% { opacity: 0; transform: translateX(-60px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes tmSlideInRight {
  0% { opacity: 0; transform: translateX(60px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes tmEnterFade {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Mobiel */
@media (max-width: 768px) {
  .tm-hero-logos {
    flex-direction: column;
    gap: 20px;
  }
  .tm-logo {
    max-width: 160px;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-932c223 *//* Popup: voorkom scrollbars */
.elementor-popup-modal,
.dialog-widget-content,
.dialog-message {
  overflow: hidden !important;
}

/* Zorg dat jouw hero geen extra scroll veroorzaakt */
.tm-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;

  min-height: 100vh;
  margin: 0 auto;          /* GEEN grote top/bottom margins */
  padding: 20px;
  box-sizing: border-box;
}

/* Enter knop onderaan, zonder extra hoogte-issues */
.tm-enter-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* Knop styling */
.tm-enter-btn {
  display: inline-block;
  padding: 12px 22px;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.85);
  color: #111;
  font-weight: 600;
}

/* Hover */
.tm-enter-btn:hover {
  background: rgba(255,255,255,1);
}/* End custom CSS */