@import url("//fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap");
* {
  padding: 0;
  margin: 0;
}

/* Overlay styles */
#overlay {
  position: fixed; /* Fixed position to cover the entire viewport */
  top: 0;
  left: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
  z-index: 10000; /* High z-index to ensure it covers all other content */
}

/* Container styling */
.container {
  width: 1600px;
  margin: auto;
}

.subcontainer {
  width: 85%;
  margin: auto;
}

/* Base styles for body and html to reset margins, paddings, and set default font */
body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Arial", sans-serif;
  background-image: url("https://africanorestaurant.no/Images&Icons/Injera&Mesob.jpg"); /* Background image for body */
  color: #f5f5f5; /* Light text color for contrast */
}

/* Flex container for .body to enable flex children layout */
.body {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
}

/* Centered container for content, now responsive using max-width and width in percentages */
.container,
.container .subcontainer {
  width: 85%;
  max-width: 1200px; /* This makes the container responsive */
  margin: auto;
  overflow: hidden;
}

/* Header styles */
.header {
  position: relative;
  text-align: center;
  color: #fff; /* White text for header */
}

.header::after {
  content: "";
  background: rgba(0, 0, 0, 0.1); /* Semi-transparent overlay */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Ensure it's above the header content */
}

/* Hero section styles */
.hero {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8vw 20px; /* Responsive padding based on viewport width */
  z-index: 10;
  overflow: hidden;
  filter: brightness(3);
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  z-index: -1;
}

.hero h1 {
  font-size: 3.5em;
  font-weight: bold;
  margin: 0;
  padding-top: 30px;
  position: relative;
  z-index: 2;
}

.hero p {
  font-size: 1.5em;
  font-weight: lighter;
  position: relative;
  z-index: 10;
}

/* Navbar styles */
.navbar {
  display: flex; /* Use flexbox for layout */
  align-items: center; /* Vertically center items */
  justify-content: space-between; /* Space out navbar items */
  padding: 0 20px; /* Padding on the sides */
}

/* Navbar logo styles */
.navbar-logo img {
  padding-top: 10px; /* Space above the logo */
  height: 60px; /* Set logo height */
  justify-content: space-around; /* Distribute space around items */
  filter: brightness(1.7); /* Increase brightness for visibility */
  margin-right: 30px; /* Space after the logo */
}

/* Navbar menu styles */
.menu {
  display: flex; /* Use flexbox for layout */
  list-style: none; /* Remove default list styling */
  padding: 10px; /* Remove default padding */
  border: 2px solid #fff; /* White border around the menu */
  gap: 1px; /* Minimal gap between menu items */
  border: white 0.5px solid;
  background-color: rgba(24, 24, 24, 0.859);
  border-radius: 15px;
  margin-left: -5%;
}

/* Individual menu item styles */
.menu-item {
  margin-right: 5px; /* Space between menu items */
}

.menu-item:last-child {
  margin-right: 0; /* Remove margin for the last item */
}

/* Menu item link styles */
.menu-item a {
  font-size: 1em; /* Smaller font size for links */
  color: rgb(221, 212, 195); /* Custom color for links */
  text-decoration: none; /* Remove underline from links */
  display: inline-block; /* Allow margins and paddings */
  padding: 5px 10px; /* Padding for larger click area */
  position: relative; /* Needed for z-index stacking */
  z-index: 2; /* Ensure links are above the overlay */
}

/* Social media and contact info styles */
.social-media,
.contact-info {
  display: flex; /* Use flexbox for layout */
  align-items: center; /* Vertically center items */
  gap: 10px; /* Space between items */
  pointer-events: auto; /* Ensure items are clickable */
  position: relative; /* Needed for z-index */
  z-index: 1000; /* High z-index to ensure visibility */
}

.social-media a,
.contact-info a {
  margin-right: 10px; /* Space between links */
  text-decoration: none; /* Remove underline */
  color: rgb(221, 212, 195); /* Custom link color */
  font-size: 15px; /* Larger font size for visibility */
}

/* Hover and focus styles for menu items */
.menu-item a:hover,
.menu-item a:focus {
  color: #daa520; /* Change color on hover/focus */
  text-decoration: none; /* Ensure underline does not reappear */
}

/* Social icons and phone number styles */
.social i,
.phone i {
  margin-right: 2px; /* Space between icon and text */
}

/* Phone container styles */
.phone {
  display: flex; /* Use flexbox for layout */
  align-items: center; /* Vertically center items */
}

/* Responsive design adjustments */
@media (max-width: 768px) {
  /* Adjustments for smaller devices */
  .contact-info,
  .gratitude p,
  .reviews-container,
  .main_container,
  .google-review,
  .tripadvisor-review,
  .restaurant-guru-review,
  .main_container,
  footer,
  .hero p {
    display: none; /* Hide elements not needed on small screens */
  }

  .hero {
    position: relative;
    display: flex;
    flex-direction: column;
    background-position: top center; /* Adjust background position */
    padding-top: 50px;
    padding-bottom: 50px;
    min-height: calc(
      100vh - 100px
    ); /* Ensure hero covers most of the viewport */
    background-size: cover; /* Cover the available area */
  }

  /* Adjust hero heading for smaller screens */
  .hero h1 {
    padding-top: 20%; /* Increase top padding */
    color: rgb(195, 185, 185); /* Adjust color for better visibility */
    font-size: 2.5em; /* Adjust font size */
  }

  /* Explicitly show the copyright container */
  footer.copyright-container {
    display: block; /* Ensures it's displayed */
    width: 100%;
    text-align: center;
    padding: 10px 0;
  }
}

/* Logo positioning and styling */
.logo {
  position: absolute; /* Fixed position relative to its nearest positioned ancestor */
  top: 20px; /* Distance from the top of its container */
  left: 10px; /* Distance from the left of its container */
  z-index: 3; /* Layering order */
}

/* Social icon container positioning and styling */
.social-icons {
  position: absolute; /* Fixed position relative to its nearest positioned ancestor */
  top: 20px; /* Distance from the top of its container */
  right: 20px; /* Distance from the right of its container */
  z-index: 3; /* Layering order */
}

/* Social icons styling */
.social-icons img {
  height: 30px; /* Height of social icons */
  margin-left: 10px; /* Space between icons */
  opacity: 0.7; /* Icon opacity for a subdued look */
  transition: opacity 0.3s ease; /* Smooth transition for opacity change */
}

/* Button styling */
.menu-button_front_page {
  background: transparent;
  color: wheat;
  padding: 15px 30px;
  font-size: 1em;
  cursor: pointer;
  transition: all 0.5s ease;
  min-width: 200px;
  height: 50px;
  border-radius: 5px;
  margin-top: 30px;
}

.menu-button_front_page a {
  text-decoration: none;
  background: goldenrod;
}

.menu-button_front_page span {
  display: block;
  font-size: 0.8em;
  margin-top: 5px;
}

.menu-button_front_page:hover {
  color: #201d1dc8;
  background-color: rgb(231, 211, 161);
}

/* Responsive styles */

/* Main container styling */
.main_container {
  display: flex; /* Use flexbox for layout */
  justify-content: space-around; /* Space items evenly */
  padding: 70px 0; /* Top and bottom padding */
}

/* Reviews container styling */
.reviews-container {
  display: flex; /* Use flexbox for layout */
  flex-direction: row; /* Items in a row */
  max-width: 1200px; /* Maximum width */
  margin: auto; /* Center the container */
  gap: 20px; /* Space between items */
}

/* Single review styling */
.review {
  flex-basis: 45%; /* Base width of each review */
  padding: 20px; /* Padding inside each review */
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  text-align: center; /* Center text */
  margin: 10px;
  background-color: #1e1919;
}

/* Review header and body styling */
.review-header,
.review-body {
  margin-bottom: 10px; /* Space below header/body */
  font-family: "Arial", sans-serif; /* Font for consistency */
  font-size: 0.8rem;
  color: white;
}

/* Star rating styling */
.stars {
  color: #e5a00d; /* Star color */
  font-size: 18px; /* Star size */
}

/* Review text link styling */
.review-text {
  display: block; /* Block display for links */
  margin-top: 10px; /* Space above the link */
  color: rgba(255, 255, 255, 0.808);
  text-decoration: none; /* No underline */
  font-family: "Quicksand", sans-serif;
}

/* Review icon styling */
.review-icon {
  height: 20px; /* Icon height */
  margin-right: 8px; /* Space to the right of the icon */
}

/* Ensures links within review headers do not underline */
.review-header a {
  text-decoration: none; /* Prevents text decoration to ensure visual consistency */
}

/* Hover effects for review sites */
.google-review:hover,
.tripadvisor-review:hover,
.restaurant-guru-review:hover {
  background-color: rgba(
    48,
    44,
    36,
    0.76
  ); /* Subtle darkening for hover effect */
  color: rgba(
    255,
    255,
    255,
    0.768
  ); /* Ensures text remains readable on hover */
}

/* Applies hover effect to links wrapping reviews, if used */
.review-link:hover {
  background-color: #1e1919; /* Ensures consistency in hover effect */
  font-family: "Quicksand", sans-serif;
}

/* Footer styling */
footer {
  background-color: #0b0b0b; /* Dark theme for footer for contrast */
  color: #8c8c8c; /* Light grey text for readability */
  text-align: center; /* Aligns footer content to the center */
  padding: 20px 0; /* Top and bottom padding */
  font-size: 8px; /* Small font size for less important text */
}

/* Footer text styling */
.footer-text {
  margin: 0; /* Removes default margin */
  padding: 20px 0; /* Ensures consistent padding */
  font-size: 6px; /* Very small text for less critical information */
}

/* Copyright container styling */
.copyright-container {
  padding: 20px 0px; /* Consistent padding for copyright section */
}

/* Mobile contact info visibility */
.hero .contact-info-mobile {
  text-align: center; /* Centers the contact info */
  display: none; /* Hidden by default, shown on smaller screens */
  margin-top: 60px; /* Spacing above the contact info */
  bottom: 10px; /* Positions the contact info near the bottom */
  font-size: 0.7rem; /* Smaller font size for compact appearance */
}

/* Contact info link styling */
.hero .contact-info-mobile a {
  display: inline-block; /* Allows for margin and padding */
  margin: 0 10px; /* Space between contact info items */
  font-size: 0.7rem; /* Readable font size */
  text-decoration: none; /* No underline for a cleaner look */
  color: #272727; /* Dark color for contrast */
}

/* Hover effect for contact info links */
.hero .contact-info-mobile a:hover {
  color: #daa520; /* Gold color on hover for emphasis */
  text-decoration: none; /* Maintains no underline on hover */
}

/* Footer content structure */
.footer-content {
  display: flex; /* Uses flexbox for layout */
  flex-wrap: wrap; /* Allows items to wrap to new line */
  justify-content: flex-start; /* Aligns content to the start */
  align-items: flex-start; /* Aligns items at the start vertically */
  padding: 100px 0; /* Padding for separation */
  background-color: #171717; /* Slightly lighter than footer for distinction */
  border-top: 2px solid #f9f0f0; /* Decorative border for visual separation */
}

/* Subscription and follow-us sections */
.subscribe-container,
.footer-follow-us {
  display: flex; /* Flex layout for alignment */
  align-items: flex-start; /* Aligns items at the start */
  margin: 0 0 10px 0; /* Margin for separation */
  flex: 0.5; /* Flex basis for responsive adjustment */
  padding-top: 60px; /* Padding for visual separation */
  box-sizing: border-box; /* Includes padding in the element's total width and height */
}

/* Continue with your existing styles */
.footer-contact-container {
  display: flex;
  flex-direction: column; /* Stack children vertically */
  justify-content: flex-start;
  font-size: 14px;
  padding: 60px 0 0 50px;
  width: 250px;
}

.footer-contact-container h1,
.footer-contact-container p:not(:last-child) {
  display: flex;
  justify-content: flex-start;
  padding-left: 20px;
  margin-bottom: 6px; /* Adjust the value to the space you want */
}

.footer-contact-container a {
  display: flex;
  justify-content: flex-start;
  padding-left: 20px;
  color: inherit; /* This makes the link have the same color as your paragraph text */
  text-decoration: none; /* This removes the underline typically associated with links */
  margin-bottom: 6px; /* Adjust the value to the space you want */
}

.footer-contact-container a:hover {
  display: flex;
  justify-content: flex-start;
  text-decoration: underline; /* Adds underline on hover for better user experience */
}

.footer-social-media-icon-container {
  padding-top: 10px;
  display: flex;
  justify-content: space-around;
  gap: 15px;
}

.footer-follow-us {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 60px;
  padding-right: 30px;
  padding-left: 20px;
  flex-direction: column; /* Stack children vertically */
  font-size: 10px;
  text-align: left;
  max-width: 300px;
  border-left: solid 1px #8b8585;
  height: 250px;
}

.footer-follow-us a {
  padding-top: 10px;
  color: wheat;
  font-size: 20px;
}

/* Email subscription styling */
.subscribe-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: 12px;
  text-align: left;
  max-width: 400px;
  border-left: solid 1px #8b8585;
  height: 250px;
  padding-left: 20px;
}

input[type="email"] {
  margin-top: 10px;
  width: calc(100% - 22px);
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  border-radius: 4px;
}

input[type="submit"] {
  width: 100%;
  padding: 10px;
  border: none;
  background-color: wheat;
  color: rgb(58, 58, 58);
  border-radius: 4px;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #daa520;
}

.footer-content h1 {
  font-size: 14px;
  color: #828181;
}

.footer-content p {
  font-size: 12px;
  color: #828181;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Global Responsive Adjustments */

/* Adjustments for Tablets and Smaller Devices */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column; /* Stack footer content vertically */
  }

  .footer-logo,
  .footer-text-content,
  .footer-links-wrapper {
    flex-basis: 100%; /* Full width for better readability */
    max-width: 100%;
  }

  .footer-text-content {
    font-size: 12px; /* Adjust font size for better visibility */
  }

  .footer-logo,
  .footer-follow-us {
    display: none; /* Hide elements not needed on smaller screens */
  }

  .hero .contact-info-mobile a {
    display: inline-block;
    margin: 0 10px;
    font-size: 1.5em; /* Increased font size for better readability */
    color: rgba(245, 245, 245, 0.533);
    font-family: "Oswald", sans-serif;
    font-weight: lighter;
  }
}

/* Adjustments for Mobile Phones */
@media (max-width: 480px) {
  .footer-text {
    font-size: 10px; /* Reduce footer text size for space efficiency */
  }
}

/* Enhanced Visibility for Contact Info on Narrow Screens */
@media (max-width: 870px) {
  .hero .contact-info-mobile,
  .copyright-container {
    display: block;
    text-align: center;
    margin-top: 40% !important; /* Ensure override with !important */
  }
}

/* Hide Contact Info on Wider Screens */
@media (min-width: 871px) {
  .hero .contact-info-mobile {
    display: none; /* Hide on wider screens */
  }
}

/* Adjustments for Very Small Screens */
@media (max-width: 280px) {
  .hero h1 {
    font-size: 2em; /* Adjust font size for ultra-small displays */
  }

  .footer-logo,
  .footer-follow-us {
    display: none; /* Hide to save space */
  }

  .hero .contact-info-mobile a {
    font-size: 2em; /* Suitable for very small screens */
    color: rgb(19, 17, 17);
  }
}

/* Form styling */
form[name="contact"] {
  max-width: 500px; /* Adjust as necessary */
  padding: 6px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

/* Email input and button container */
form[name="contact"] p {
  display: flex; /* Use flexbox to align items in a row */
  gap: 10px; /* Add space between input and button */
  align-items: center; /* Vertically align input and button */
  margin-bottom: 7px; /* Space below the paragraph */
}

/* Label styling */
form[name="contact"] label {
  display: block; /* Makes label a block element */
  margin-bottom: 3px; /* Space between label and input */
}

/* Input styling */
.input {
  flex-grow: 1; /* Input will fill the available space */
  height: 5px;
  padding: 7px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Button styling */
.submit-btn {
  padding: 5px 10px; /* Adjust padding to match input height */
  width: 50px;
  background-color: #d1dce7;
  color: rgb(51, 47, 47);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap; /* Prevent text wrapping inside button */
  margin-bottom: 20px;
}

/* Hover and focus styles for button */
.submit-btn:hover,
.submit-btn:focus {
  background-color: gold;
}

/* Cookie consent section */
#cookies {
  width: 100%;
  position: fixed;
  bottom: 0;
  color: black;
  background-color: rgba(251, 247, 247, 0.692);
  z-index: 10;
  display: block; /* Ensure it's displayed by default */
  font-size: 0.8rem;
}

#cookies.hidden {
  display: none; /* Hide when the hidden class is added */
}

#accept-cookies-btn,
#reject-cookies-btn {
  background: black;
  color: whitesmoke;
  border: none;
  border-radius: 5px;
  padding: 8px 12px 8px 12px;
  font-size: 0.7rem;
  font-family: inherit;
  cursor: pointer;
}

.cookies a {
  color: rgb(0, 0, 0);
  text-decoration: underline;
  font-weight: 500;
}

.cookies {
  min-height: 70px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 1600px) {
  .container {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .cookies {
    padding: 10px 0;
  }
}

/* Gratitude section styling */
.gratitude_invite_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 100px 10px 0 10px;
  background-color: rgba(24, 24, 24, 0.859);
  text-align: center;
  font-family: "Quicksand", sans-serif;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.768);
  font-weight: extra-light;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.gratitude {
  padding: 10px;
}

.gratitude p {
  padding: 20px;
  font-family: "Quicksand", sans-serif;
}

/* Animation styles */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.7s ease-out;
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}