.top-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: #111827;
}

.top-text-heading {
  font-size: 2.25rem;
  /* font-family: "Playfair Display", serif; */
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .top-text-heading {
    font-size: 3rem;
  }
}

.top-text-heading-under {
    font-size: 1.125rem; 
    color: #ffedd9; 
    max-width: 42rem; 
    margin-left: auto; 
    margin-right: auto; 
}

.custom-top-link1 {
  color: #caa05f;
  font-weight: 500;
}

.custom-hover-links {
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-hover-links:hover {
  color: #af8f5e;
}

.menu-navigation {
    position: sticky;
    top: 4rem;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    z-index: 40; 
  }

.menu-navigation-options {
    white-space: nowrap; 
    color: #4B5563; 
}

.menu-navigation-options:hover {
    color: #af8f5e; 
}

.menu-headlines {
    font-size: 1.875rem; /* text-3xl */
    font-family: 'Playfair Display', serif; /* font-playfair */
    font-weight: bold; /* font-bold */
    color: #af8f5e; /* text-amber-800 */
}

.sub-menu-headlines {
    font-size: 1.25rem; /* text-xl */
    font-family: 'Playfair Display', serif; /* font-playfair */
    font-weight: bold; /* font-bold */
    color: #af8f5e; /* text-amber-700 */
    margin-bottom: 1rem; /* mb-4 */
}

.price {
    padding-top: 1rem;    /* py-4 */
    padding-bottom: 1rem; /* py-4 */
    font-weight: bold;    /* font-bold */
    color: #af8f5e;       /* text-amber-700 */
}

.price-getränke {
    padding-top: 0.75rem;   /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
    font-weight: bold;       /* font-bold */
    color: #af8f5e;          /* text-amber-700 */
}
  
.footer-section {
    background-color: #111827; 
    color: white; 
    padding-top: 4rem; 
    padding-bottom: 2rem; 
}

.social-media-icons {
    color: #A0AEC0; /* Equivalent to text-gray-400 */
}

.social-media-icons:hover {
    color: #af8f5e; /* Equivalent to hover:text-amber-500 */
}

.links-container {
    border-top: 1px solid; /* border-t */
    border-color: #1F2937; /* border-gray-800 */
    margin-top: 3rem; /* mt-12 */
    padding-top: 2rem; /* pt-8 */
    text-align: left; /* text-center */
    color: #6B7280; /* text-gray-500 */
}

.links:hover {
    color: #af8f5e; /* Specific hex code for amber-500 */
}