:root {
    --primary-color: #37563e;
    --primary-color-100: hsl(140deg, 21%, 98%);
    --primary-color-200: #f9f9f9;
    --primary-color-300: #dee5df;
    --primary-color-500: #37563e;
    --primary-color-800: #314d37;
    --primary-color-900: #2b4331;
    --black: #000;
    --white: #fff;
    --gray-h: 20;
    --gray-s: 0%;
    --red: #ff2e35;
    --green: #3dc375;
    --yellow: #b68b1e;
    --success-100: #ecfef3;
    --success-500: #3adb76;
    --success-800: #1f944a;
    --warning-100: #fef6dc;
    --warning-500: #ffae00;
    --warning-800: #b54707;
    --error-500: #d7282f;
    --error-800: #d7282f;
    --gray-020: hsl(var(--gray-h) var(--gray-s) var(--gray-l-030, 98%));
    --gray-030: hsl(var(--gray-h) var(--gray-s) var(--gray-l-030, 97%));
    --gray-050: hsl(var(--gray-h) var(--gray-s) var(--gray-l-050, 95%));
    --gray-080: hsl(var(--gray-h) var(--gray-s) var(--gray-l-080, 92%));
    --gray-100: hsl(var(--gray-h) var(--gray-s) var(--gray-l-100, 90%));
    --gray-150: hsl(var(--gray-h) var(--gray-s) var(--gray-l-150, 85%));
    --gray-200: hsl(var(--gray-h) var(--gray-s) var(--gray-l-200, 80%));
    --gray-250: hsl(var(--gray-h) var(--gray-s) var(--gray-l-250, 75%));
    --gray-400: hsl(var(--gray-h) var(--gray-s) var(--gray-l-400, 60%));
    --gray-500: hsl(var(--gray-h) var(--gray-s) var(--gray-l-500, 50%));
    --gray-600: hsl(var(--gray-h) var(--gray-s) var(--gray-l-600, 40%));
    --gray-700: hsl(var(--gray-h) var(--gray-s) var(--gray-l-700, 30%));
    --gray-800: hsl(var(--gray-h) var(--gray-s) var(--gray-l-800, 20%));
    --gray-900: hsl(var(--gray-h) var(--gray-s) var(--gray-l-900, 10%));
    --default-padding: 1rem;
    --default-text-color: #000;
    --default-text-color-dark: #000;
    --default-text-color-light: #fff;
    --default-link-color: #2b4331;
    --default-link-hover-color: #37563e;
}

::selection {
  background-color:var(--primary-color);
  color: #fff;
}

.navbar svg{
fill:var(--primary-color-900);
max-width:300px;
margin-left:10%;
}

h1,h2,h3,h4,h5,h6{
    font-family: 'futura-pt', Verdana, sans-serif;
    font-weight: 400;
}
p{
    font-family: 'futura-pt', Verdana, sans-serif;
}
.header{
    background-color: #e8eef4;
}

.visual-1{
    height: 100px;
    overflow: hidden;
    backface-visibility: hidden;
    transform: translate3d(0,0,0);
    box-shadow: 0 4px 22px rgba(0,0,0,0,25);
}
.content{
    max-width: 800px;
    margin:auto;
    margin-bottom: 50px;
}
.footer-logos img{
    height: 35px;
    display: block;
}
.social-footer svg{
    height: 30px;
    display: block;
}
.btn-primary{
    background-color: var(--TL-primary-color);
    border-color: var(--TL-primary-color);
    border-radius: 30px;
    padding: 10px 30px;
}
.btn-primary:hover{
    background-color: var(--TL-primary-color);
    border-color: var(--TL-primary-color);
    opacity: 0.7;
}
.btn-primary:disabled,
.btn-primary[disabled],
.btn.disabled, 
.btn:disabled, 
fieldset:disabled .btn{
    background-color: var(--primary-color-300);
    border-color: var(--primary-color-300);
}

.btn-secondary{
    background-color:  #ffffff;
    border-color: var(--TL-primary-color);
    color: var(--TL-primary-color);
    border-radius: 30px;
    padding: 10px 30px;
}
.btn-secondary:hover{
    background-color: #ffffff;
    border-color: var(--TL-primary-color);
    opacity: 0.7;
}
  .form-group{
  margin-bottom:20px;
  }
  .navbar{
  background-color:#ffffff;
  }
footer{
  background-color:#f9f9f9 !important;
    color:#000000!important;
  }  
  .nav-link,.footer-column span.footer-title, .quick-links, .quick-links a{
  color:#000000!important;
  }
  .color {
    transition-property: all;
    transition-duration: 0.6s;
    background: #dc3545;
    /* opacity: 0.9;*/
}
.background-wrapper {
 <!---->
    background: var(--primary-color-100);
 <!---->
    background-position: center;
    border-radius: 1.25rem;
    padding: 70px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: calc(100vh - 350px);
}
 ul.social-buttons li a{
  color:#000000!important;
  }

  .feedback {
height: 100px;
width: 300px;
font-family: verdana;
font-size: 10pt;
color: black;
}
    .bg-image{
    min-width: 100%;
    background-image: url(https://image.email.travellegends.nl/lib/fe2d117…/m/1/578a0065-382f-41cb-8873-0d6caff11e12.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 30px;
}
     .btn-icon {
    flex-direction: column;
    align-items: center;
    width:150px;
    padding: 15px;
    margin: 10px 0px;
       font-size: 13px;
       display: inline-flex;
  }

  .btn-icon svg {
    margin-bottom: 4px; /* Aanpassen op basis van de gewenste spacing */
    fill:#37563e;
    max-width:50px;
  }
  .btn-icon svg:checked{
      fill:#ffffff;
    }
     .btn-icon svg:active, .btn-icon svg:selected{
    fill:#ffffff;
    } 
  .svg {
    max-width: 50px;
  }
  .btn-outline-primary {
    --bs-btn-color: #37563e;
    --bs-btn-border-color: #37563e;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #37563e;
    --bs-btn-hover-border-color: #37563e;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #37563e;
    --bs-btn-active-border-color: #37563e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #37563e;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #37563e;
    --bs-gradient: none;
    color:#37563e;
    border-color:#37563e;
    margin-bottom:2px;
}
  .btn-outline-primary:hover{
    border-color:#37563e;
    background-color:#37563e;
    color:#ffffff;
  }
  .btn-outline-primary:active{
    border-color:#37563e;
    background-color:#37563e;
    color:#ffffff;
  }
  .form{
  max-width:750px;
  }
.container-form {
            max-width: 850px !important;
            background-color: #ffffff;
            margin: 40px auto;
            margin-bottom:150px;
            padding: 40px !important;
            border-radius: 12px;
            box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1);
        }
  .svg-thanks{
    max-width:400px;
    margin:auto;
  }



@media screen and (max-width: 992px) {
.background-wrapper{
   padding: 20px;
  }
  .container-form{
    padding: 40px 20px !important;
  }
}
 

  :root {
    --primary-color-500: #37563e;
    --primary-color-100: #f7f8f7;
    --primary-color-200: #eaeeec;
    --primary-color-900: #0e2113;
    --default-link-color: var(--primary-color-900);
    --default-link-hover-color: var(--primary-color-900);
}
  body{
  max-width:100% !important;
  }

.subscribeText, 
.unsubscribeText,
.message{
margin: 30px 0px;
}

.navbar svg{
          fill: var(--TL-primary-color) !important;
    }