* {
  box-sizing: border-box;
}


body {
  background: #F5F5F5;
  font-size: 1em;
  font-weight: 400;
  font-family: pf-grand-gothik-variable, sans-serif;
  font-variation-settings: "ital" 0, "wdth" 100, "wght" 300;
  margin: 0;
  padding: 0;
}

menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2em; 
  background-color: lightgray;
  height: 3em; 
  width: 100%; 
  padding: 0.5em 2em; 
  margin: 0;
}

menu a {
  font-variation-settings: "ital" 0, "wdth" 100, "wght" 400;
  text-decoration: none;
  color: black; 
  line-height: 2em; 
  display: inline-block; 
}

.right-links {
  display: flex;
  gap: 2em; /* Optional, adds space between the right-side links */
}

header {
  padding: 3em 1em;
}

h1 {
  font-size: 3.5em;
  text-align: center;
  font-variation-settings: "ital" 0, "wdth" 80, "wght" 800;
  color: #222;
}

h2 {
  font-size: 2em;
  text-align: center;
  font-variation-settings: "ital" 0, "wdth" 90, "wght" 600;
  color:#444;
}

.carousel-container {
  overflow: hidden;
  width: 100%;
  background-color: #AFAFAF;
  padding: 3em 0;
  margin-bottom: 4em;
  flex: 0 0 auto; /* Prevent shrinking */
}

.switching .carousel-container {
  background-color: #0b7b32;
}

.carousel {
  display: flex;
  height: auto;
  user-select: none;
  padding: 0 0 4px 0;
  gap: 2em; /* Space between items */
  overflow-x: scroll;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.carousel::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}

.carousel-item {
    flex: 0 0 auto; /* Prevent shrinking */
    min-width: 200px;
    margin: 0;
    border-radius: 0.5em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    user-select: none; /* Prevent image selection */
    -webkit-user-select: none;
}

.carousel-item:first-child {
  margin-left: 3em;
}

.carousel-item img {
  border-radius: 8px;
  display: block;
}

a img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none; /* For supported browsers */
}

footer {
  padding: 3em 0;
  width: 100%;
  display: flex;  /* Enables flexbox layout */
  flex-direction: column; /* Stacks children vertically */
  align-items: center; /* Optional: Center-align buttons */
}

button {
  position: relative;
  margin-bottom: 1em;
  display: block;
  background-color: #3498db;  /* Light blue */
  color: white;
  border: none;
  padding: .5em 1em .5em 1em;
  font-family: pf-grand-gothik-variable, sans-serif;
  font-variation-settings: "ital" 0, "wdth" 60, "wght" 800;
  font-size: 2.8em;
  border-radius: .5em;
  cursor: pointer;
  outline: none;
  box-shadow: 0 8px #1c598a; /* Darker blue */
  transition: all 0.2s ease;
}

button.cta:hover {
  box-shadow: 0 10px #0d2e49; /* Darker blue */
  background-color: #2372a7;
  font-variation-settings: "ital" 0, "wdth" 111, "wght" 1200;
}

button.cta:active {
  transform: translateY(3px); /* Move down on click */
  box-shadow: 0 2px #3498db; /* Darker blue */
}

.switch {
  background-color: #e0e0e0;  /* Light gray */
  color: #2c3e50;  /* Darker text color */
  font-size: 1.5em;
  font-variation-settings: "ital" 0, "wdth" 60, "wght" 600;
  border-radius: .5em;  /* Rounded corners */
  cursor: pointer;
  outline: none;
  transition: background-color 0.3s ease;
  box-shadow: 0 8px #8b8b8b; /* Darker blue */
}

button.switch:hover {
  background-color: #c5c5c5;  /* Slightly darker on hover */
}

button.switch:active {
  transform: translateY(3px); /* Move down on click */
  box-shadow: 0 2px #464646; /* Darker blue */
}

a {
  text-decoration: none;;
}

.optional {
  display: none;
}

.language {
  margin: 2em 0;
  width: 100%;
  text-align: center;
  font-size: 2em;
  padding-bottom: 2em;  
}

.language.top {
  margin: 1em 0;
  padding-bottom: 0;
}

@media (min-width: 768px) { /* Adjust the max width as needed for your case */
  .optional {
    display: inline;
  }
  footer {
    flex-direction: row;
    justify-content: center; /* Centers items horizontally */
    gap: 2em; 
  }
}

@media only screen and (max-width: 1000px) {
body {font-size: 12px;}
}

@media only screen and (max-width: 700px) {
  body {font-size: 9px;}
  button { font-size: 3em; }
  button.switch { font-size: 2em; }
}

@media only screen and (max-width: 400px) {
  body {font-size: 8px;}
}