body {
  font-family: 'Montserrat', sans-serif !important;
  background-color: #1A1F25 !important;
  color: #F3F3E9;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.responsive-small-text {
  font-size: clamp(13px, 1.5vw, 15px);
}

@font-face {
  font-family: 'MonumentExtended';
  src: url('/fonts/MonumentExtended-Regular.otf') format('opentype');
  font-style: normal;
}
@font-face {
  font-family: 'MonumentExtendedUltraBold';
  src: url('/fonts/MonumentExtended-Ultrabold.otf') format('opentype');
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;  /* ultrathin tot ultra bold */
  font-style: normal;
  font-display: swap;
}


.accent-color {
  color: #F5C252 !important;
}

.btn-accent-color {
  background-color: #F5C252 !important;
  color: #fff !important;
}

.btn-accent-color-send {
  background-color: #F5C252 !important;
  color: #fff !important;
  font-size: 1.6rem;
  font-family: 'MonumentExtended', sans-serif;
  width: 100%;
  padding: 10px 5px;;
}

.btn-accent-color:hover{
  background-color: #a58b52 !important;
  color: #fff !important;
}

.btn-accent-color-send:hover{
  background-color: #a58b52 !important;
  color: #fff !important;
}

/* Startpositie animaties */
.animate-left, .animate-right {
  opacity: 0;           /* start onzichtbaar */
  position: relative;    /* nodig voor transform */
}

.animate-left { transform: translateX(-50px); }
.animate-right { transform: translateX(50px); }


.container {
  width: 100%;
  padding-left: clamp(16px, 3vw, 50px);
  padding-right: clamp(16px, 3vw, 50px);
  margin-left: auto;
  margin-right: auto;
}

/* Mobile: geen max-width nodig, full width */
@media (min-width: 576px) {
  .container {
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 90vw;
  }
}

.text-white{
    color: #F3F3E9 !important; 
}

.thin-text{
      font-weight: 300;
}
.bold-font{
    font-family: 'MonumentExtended', sans-serif;
}

.bold{
  font-weight: 700;
}

.mid-text bold{
  font-weight: 800;
}
.mid-text {
  font-weight: 300;
  font-size: clamp(0.95rem, 1vw + 0.5rem, 1.4rem);
  line-height: 1.4;
}