/* Neu-Tannenbusch 

Türkis: #11a8aa

*/

#page-content h1 {
  display: none;
}

#page-content p,
#page-content li {
  font-size: 120%;
  font-weight: 300;
}

#page-content h1,
#page-content h2,
#page-content h3,
#page-content h4,
#page-content h5,
#page-content h6 {
 font-weight: 600;
}

#page-content h3,
#page-content h2,
#page-content h5 {
  margin-top: 50px;
}

.card-text {
  font-size: 110%;
  font-weight: 300;
}

.card-title span{
  font-weight: 300;

}

input::placeholder {
  color: #666!important; 
}

.jumbotron {
  background-color: transparent!important;
}

.navbar {
  padding: 36px 0;
  border-bottom: 5px solid #11a8aa;
}

.fa-solid {
  color: #11a8aa;
}

.navbar-brand img {
  margin-right: 40px;
}

/* Color of menu toggler */
.navbar-toggler div,
.navbar-toggler::before,
.navbar-toggler::after {
    background-color: #11a8aa;
}

/* Spacer on top of item in mobile menu */
@media (max-width: 767px) {
  #nav-item-5 {
    border-top: 1px solid #dee2e6;
    margin-top: 15px;
    padding-top: 15px;
  }
}

/* Style the desktop menu in the navbar */
@media (min-width: 768px) {
  /* Hide some menu items */
  #nav-item-3, 
  #nav-item-4,
  #nav-item-5 {
    display: none;
  }
  
  /* Style the menu links */
  .nav-item a {
    color: #000!important;
    font-size: 120%!important; 
  }

  .nav-item .nav-link {
    margin: 0 10px;
    padding: 1px!important;  
  }

  .nav-item a.active {
    border-bottom: 5px solid #11a8aa;
    font-weight: 
  }
}

.card h3 {
  hyphens: auto;
}

.card-body .small  {
  text-align: left!important;
  margin-bottom: 10px!important;
}

.card-body .small > span  {
  :before{content: '\f073'};
}

.card-body .small > span :before  {
  font-family: 'Font Awesome 5 Free'; 
  color: #11a8aa;
}

.carousel-copyright {
  position: relative;
  top: -22px;
  font-size: 14px;
  color: #fff;
  text-align: right;
  height: 0!important;
  padding: 0 7.5px 0 0;
  display: inherit!important;
}

/* Hover on linked cards */ 
a.card {
  text-decoration: none;
}
/* Ensure the card element is positioned relatively for proper overlay control */
.card {
  position: relative;
  overflow: hidden; /* Prevent image from overflowing */
  background-color: #fff; /* Initial background color */
  transition: background-color 0.3s ease-in-out; /* Smooth transition for background color */
}
/* Animate the image smoothly */
.card img {
  transition: transform 0.3s ease-in-out; /* Smooth transition for scale effect */
}
/* Scale the image and change background color when hovering over the card */
.card:hover {
  background-color: #e5f9fd; /* Change background color on hover */
}
.card:hover img {
  transform: scale(1.1); /* Scale the image slightly */
}
/* Optional: Ensure the text doesn't trigger separate visual issues */
.card-body {
  z-index: 1; /* Ensure text remains on top */
}

.footer {
  padding-top: 50px!important;
}