/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

/* Navbar */
.navbar {
  background-color: rgba(0, 0, 0, 0.9) !important;
}

/* Navbar Links */
.navbar-dark .navbar-nav .nav-link {
  color: #ffffff !important;
}

/* Navbar Link Hover - Fluorescent Blue */
.navbar-dark .navbar-nav .nav-link:hover {
  color: #00f7ff !important;
}

/* Navbar Active Link */
.navbar-dark .navbar-nav .nav-link.active {
  color: #ffffff !important;
}

.hero-text {
  text-align: center;
  color: white;
  position: absolute;
  top: 50%;
  left: 5%;  /* Add padding on both sides */
  right: 5%; /* Ensure text doesn't get cut off */
  width: 90%;
  padding: 30px;
  background: rgba(0, 0, 0, 0.75);
  transform: translateY(-50%);
  font-family: 'Playfair Display', serif;
}

.hero-text h1 {
  font-size: 3rem;
  color: #00FFFF
}

.hero-text p {
  font-size: 1.5rem;
}

/* General styling for both hero sections */
#hero-desktop, #hero-mobile {
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  width: 100vw;
  position: relative;
  overflow: hidden;
}

/* Show only desktop section on large screens */
@media (min-width: 769px) {
  #hero-desktop {
    display: block; /* Show desktop section */
  }
  #hero-mobile {
    display: none; /* Hide mobile section */
  }

  /* Parallax effect for desktop */
  .parallax-window {
    background-attachment: fixed;
  }
}

/* Show only mobile section on small screens */
@media (max-width: 768px) {
  #hero-desktop {
    display: none; /* Hide desktop section */
  }
  #hero-mobile {
    display: block; /* Show mobile section */
  }

  /* Ensure mobile hero section has normal background scroll behavior */
  #hero-mobile {
    background-attachment: scroll;
    background-size: cover;
    background-position: center;
  }
}
/* Responsive Font Adjustments for Hero Section */
@media (max-width: 768px) {
  .hero-text h1 {
    font-size: 2.2rem;  /* Reduce font size on tablets */
    line-height: 1.2;   /* Adjust line height for better readability */
  }
  .hero-text p {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .hero-text h1 {
    font-size: 1.8rem;  /* Further reduce font size for smaller screens */
    line-height: 1.2;
  }
  .hero-text p {
    font-size: 1rem;
  }
}

/* Service Sections */
.service-section {
  min-height: 500px;
  background-size: cover;
  background-position: center;
  width: 100vw;
  position: relative;
}

.service-text {
  text-align: center;
  color: white;
  position: absolute;
  top: 50%;
  left: 5%;  /* Add padding on both sides */
  right: 5%;
  width: 90%;
  padding: 30px;
  background: rgba(0, 0, 0, 0.75);
  transform: translateY(-50%);
  font-family: 'Playfair Display', serif;
  box-sizing: border-box; /* Ensures padding is part of the width */
  max-width: 100%; /* Prevents it from exceeding the screen width */
  word-wrap: break-word; /* Ensures long words break */
}

.service-text h2 {
  font-size: 3.5rem;
  max-width: 100%; /* Prevent heading from overflowing */
  color: #00FFFF;
}

.service-text p {
  font-size: 1.5rem;
}

/* Responsive Font Adjustments for Service Sections */
@media (max-width: 768px) {
  .service-text h2 {
    font-size: 2.5rem;
    max-width: 100%; /* Ensure it doesn't overflow */
  }
  .service-text p {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .service-text h2 {
    font-size: 1.6rem;
    max-width: 100%; /* Further ensure no overflow */
  }
  .service-text p {
    font-size: 1rem;
  }
}

/* Reviews Section */
blockquote {
  font-size: 1.2rem;
  font-family: 'Playfair Display', serif;
}

cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  color: #888;
}

/* Star Button */
.star-review {
  font-size: 1.5rem;
  text-decoration: none;
  color: black;
  font-family: 'Montserrat', sans-serif;
}

.star {
  display: inline-block;
  font-size: 2rem;
  color: #ffcc00;
  animation: star-bounce 1.5s infinite;
}

@keyframes star-bounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* Footer */
footer {
  background-color: #333;
  color: #fff;
  padding: 2px 0;
  text-align: center;
}

footer p {
  margin: 0;
}

@media (max-width: 768px) {
  footer p {
    font-size: 0.9rem;
  }
}

/* Ensure the brand text and logo fit within the available space */
.navbar-brand {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

/* Responsive text */
.brand-text {
  font-size: 1.5rem; /* Default size for larger screens */
  white-space: nowrap; /* Prevent text wrapping */
  overflow: hidden;
  text-overflow: ellipsis; /* Add ellipsis if text overflows */
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
  .brand-text {
    font-size: 0.65rem; /* Reduce text size on smaller screens */
    max-width: 100%; /* Limit text width to ensure it doesn't overlap */
  }

  .navbar-brand img {
    max-height: 20px; /* Reduce logo size */
  }
}

@media (max-width: 576px) {
  .brand-text {
    font-size: 0.65rem; /* Further reduce text size for very small screens */
    max-width: 100%; /* Further limit text width */
  }

  .navbar-brand img {
    max-height: 20px; /* Further reduce logo size */
  }
}

/* Button styles */
.btn-navy {
  background-color: blue;
  color: white;
}

.btn-navy:hover {
  background-color: #00FFFF;
  color: black;
}

/* Add padding to compensate for fixed navbar */
#services {
  margin-top: 100px; /* Adjust this value based on your navbar height */
}

/* Make "Bewertung schreiben" stand out more as a clickable link */
.clickable-link {
  font-weight: bold;
  font-size: 1.2rem; /* Make it larger to stand out */
  color: navy; /* Navy blue for the link */
  text-decoration: underline; /* Add underline to emphasize it's a clickable link */
  font-family: 'Montserrat', sans-serif; /* Change font */
}

.clickable-link:hover {
  color: darkorange; /* Change color on hover for better UX */
  text-decoration: none; /* Remove underline on hover */
}

/* Style the "Kundenbewertungen" header */
.review-header {
  font-weight: bold;
  color: #1005ed; /* Navy blue color */
  font-family: 'Playfair Display', serif; /* Different font for a distinguished look */
  font-size: 1.5rem; /* Adjust font size */
  text-decoration: underline;
}

.clickable-link:hover {
	transform: scale(1.1); /* Grows the link slightly */
}