/*
 * Main content section
 */
main {
  margin-top: 114px; /* space to move it from under the header */
  min-height: 55rem;
}

body {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  line-height: 1.8;
}

#icon-sun, #icon-moon {
  display: none; /* Initially hide both icons */
}

/*
 * Navbar CSS
 */

/* Custom CSS for active nav item */
.navbar {
  --bs-navbar-active-color: #2355a0;
}

/* Blue band */
#blue-band {
  background-color: #2355a0;
  height: 2.9rem;
  z-index: 1035;
  position: fixed;
}

/* Move logo above blue band */
.navbar-brand {
  z-index: 1035;
}

@media (min-width: 992px) {
  .centered-navbar {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-grow: 1;
    align-items: end;
  }
}

/* Add green arrow in front of active navbar item */
.nav-link.active::before {
  content: '>';
  color: #a3c141;      /* Sets the color of the arrow */
  margin-right: 5px; /* Space between the arrow and the link text */
  font-weight: bold; /* Make the arrow thicker */
}

/*
 * Navbar Toggler CSS
 */
.navbar-toggler {
  background-color: #a3c141;
  border: none;
}
/* TODO check easier solution by adding color variable */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='%23FFFFFF' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

/*
 * Footer
 */
footer {
  background-color: #a3c141;
}

html {
  height: 100%;
}

.custom-background {
  background-color: #2355a0; /* Adjust the color to match your exact blue */
  color: white;
}
.custom-padding {
  padding: 20px 40px; /* Adjust padding to match your design */
}
.checkmark {
  color: #a3c141; /* Adjust for the correct shade of green */
  font-size: 50px; /* Adjust size as needed */
}

/* Leistungen */
/* Example of additional styling */
.leistungen-ul {
  list-style-type: none; /* Removes bullet points if desired */
  padding: 0;
  list-style-position: outside;
}

.leistungen-ul li {
  position: relative; /* Sets positioning context for the pseudo-element */
  padding-left: 20px; /* Space for the custom bullet */
  margin-bottom: 10px; /* Optional spacing between items */
  line-height: 1.5;
}

.leistungen-ul li::before {
  content: "✔"; /* Custom bullet point */
  color: #9dc422; /* Color of bullet point */
  position: absolute; /* Takes it out of normal flow, positioning it within the li */
  left: 0; /* Aligns the bullet to the left of the text */
  top: 0; /* Aligns the bullet at the top of the line */
}

.leistungen-h3 {
  color: #2355a0;
  font-weight: 500;
}

.lead {
  font-size: 1.5rem; /* Larger text for better readability */
  color: #333; /* Optional: Dark grey color for better visibility */
}

.blue-box-container {
  background-color: #2355a0;
  position: relative; /* Needed for absolute positioning of the image */
  display: flex; /* Enable flexbox layout */
  align-items: center; /* Vertically center all items */
  color: #FFF;
  overflow: hidden;
  word-break: break-word;
}

/* Line distance for blue box text */
.blue-box-container h3 {
  line-height: 1.5;
}

.checkmark-icon-blue-box {
  position: absolute;
  left: 40px; /* Align to the left edge of the container */
  transform: translateX(-100%); /* Move it to the left by its own width */
  width: 60px; /* Set image width */
  height: 60px; /* Set image height */

}

/* heading-blau */
.heading-blau {
  color: #2355a0;
  line-height: 1.5;
}

.background-image {
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 23rem;
  position: absolute;
  top: 114px;
  left: 0;
  z-index: 0;
}

.background-image-margin {
  /* Default margin for extra small devices (<576px) */
  margin-bottom: 4rem !important;
}

/* Small devices only (≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .background-image-margin {
    margin-bottom: 5rem !important;
  }
}

/* Medium devices only (≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .background-image-margin {
    margin-bottom: 6rem !important;
  }
}

/* Large devices only (≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .background-image-margin {
    margin-bottom: 5rem !important;
  }
}

/* Extra large devices only (≥1200px and <1400px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .background-image-margin {
    margin-bottom: 5rem !important;
  }
}

/* Extra extra large devices only (≥1400px) */
@media (min-width: 1400px) {
  .background-image-margin {
    margin-bottom: 8rem !important;
  }
}