@font-face {
  font-family: "EncodeSansNormalLight"; 
  src: url("/Marketing/Styling/font/EncodeSansNormal-300-Light.ttf");
}
@font-face {
  font-family: 'EncodeSansCondensed-SemiBold';
  src: url('/Marketing/Styling/font/EncodeSansCondensed-600-SemiBold.ttf') format('truetype');
  font-weight: 600; 
  font-style: normal;
}

body, html {
  width: 100%;
  margin: 0;
}


body { 
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh; 
  font-family: "EncodeSansNormalLight";
  background-color: #fff;
  box-sizing: border-box;
}

main {
  flex: 1;
}

.template-actions {
  display: flex;
  align-items: center; 

}

.Title-layout {
  display: flex;
  justify-content: space-between;
  align-items: center; 
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: #fff;
  font-family: "EncodeSansNormalSemiBold";
  box-shadow: 0px 10px 7px 0px rgba(0,0,0,0.17);
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  width: 100px;
  height: auto;
}

.logo-title {
  font-size: 24px;
  color: #000;
  margin-left: 10px;
}

.main-navigation ul {
  list-style: none;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

.main-navigation ul li {
  padding: 0 20px;
}

.main-navigation ul li a {
  text-decoration: none;
  color: #000;
  font-size: 16px;
}

.Title {
  color: #c09b57;
  font-size: 48px;
  margin: 15px;
}

.container-details {
  display: flex;
  padding: 10px;

}


.section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%; /* Make sure it's tall enough to push the button down */
}

.TitleKeuze {
  margin-bottom: 0.5em; /* Adjust as needed */
  font-size: 20px;
}

.section span {
  font-size: 14px; /* Adjust as needed */
  margin-bottom: 1em; /* Adjust as needed */
}

.button-details {
  align-self: flex-start;
}

.Title-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start; 
  margin-top: 20px;
  padding-left: 50px;

}

.section {
  width: calc(25% - 20px); /* Adjust the 20px to account for the gap you want */
  font-family: "EncodeSansNormalLight";
  margin: 10px; /* This should be half of the negative margin set on the .Title-layout */
  box-sizing: border-box; /* Include padding and borders in the element's total width and height */
  max-width: 300px;
}

.button-details {
  margin-top: auto; /* Push the button to the bottom */
  align-self: flex-start; /* Align button to the left */
}


.banner {
  background-image: url('/Marketing/Icon/Welkom/WelkomStock.jpg');
  background-size: cover; /* Cover the entire space of the banner */
  background-position: center;
  min-height: 190px;
  padding: 20px 0; /* Adjust the padding to ensure that your banner has the desired height */
  color: #fff; /* Set the text color to white or as needed */
  text-align: center; /* Center align the text */
}

@media (max-width: 768px) {
  header, .main-content, footer {
    padding-left: 10px;
    padding-right: 10px;
  }

  footer {
    flex-direction: column;
    text-align: center;
  }

  footer section {
    margin-bottom: 20px;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .site-header,
  .main-navigation ul,
  .container-details,
  .footer-content {
    flex-direction: column;
  }

  .main-navigation ul li,
  .social-media-links li {
    padding: 5px 0;
  }

  .logo-title {
    margin-left: 0;
  }

}

.button-details {
  position: relative;
  background-color: #4ecdc4; 
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden; 
  box-shadow: 2px 5px #a9a9a9;
  transition: background-color 0.3s;
  margin-right: 20px;
}


.button-details::after {
  content: ''; 
  position: absolute; 
  right: 0; 
  top: 0; 
  width: 15px; 
  height: 100%; 
  background-color: #0077c1; 
  border-radius: 0 4px 4px 0;
  transition: width 0.3s; 
}

.button-details:hover {
  background-color: #3da8a4; 
}

.line {
  width: 100%; 
  border: none; 
  border-top: 3px solid black;
}

.welcome-section {
  text-align: center; /* Center the text */
  margin: 20px 0; /* Add some vertical space above and below the text */
  padding: 10px; /* Optional padding */
}

.welcome-title {
  font-size: 24px; /* Large font size for the welcome title */
}

@media (max-width: 768px) {
  .welcome-section {
    padding: 10px; /* Adjust padding on smaller screens */
  }
}