* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  /* font-family: "Rublik", sans-serif; */
}

html {
  /* font-size: 10px; */

  /* 10px / 16px = 0.625 = 62.5% */
  /* Percentage of user's browser font-size setting */
  font-size: 62.5%;
  overflow-x: hidden;

  /* Does NOT work on Safari */
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  display: grid;
  grid-template-rows: auto auto auto auto; /* Header, Hero, Main Content, Footer */
  grid-template-columns: minmax(1rem, 1fr) minmax(auto, 1200px) minmax(
      1rem,
      1fr
    ); /* Centered content */
  row-gap: 2rem; /* Spacing between rows */
  /* font-family: Arial, sans-serif; */
  /* font-family: "Roboto", sans-serif; */
  font-family: "Rubik", sans-serif;

  font-weight: 400;
  font-style: normal;

  /* background-color: rgb(219, 211, 199); */
  background-color: #f5f5f0;

  overflow: hidden;
  /* hides any content that is outside of the body (important for smooth scrolling while animations in the website happen, especially for the footer) */
}

body > * {
  grid-column: 2; /* Centered in the middle column */
}

header {
  grid-column: 1 / span 3;
  grid-row: 1;
  width: 100%;
  min-height: 100vh;
  /* background-size: cover; */
  /* background-position: center; */
  /* background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 1)
    ),
    url("img/hamburg-skyline-2.jpg"); */
  position: relative; /* Needed for z-index context */
  overflow: hidden; /* Prevents content spill */

  display: grid;
  /* grid-template-columns: repeat(3, 1fr); */
  grid-template-columns: subgrid;
  grid-template-rows: repeat(3, 1fr);
  z-index: 10;
  /* display: contents; */
}

/* Video Background */
.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  /* background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8)); */
  object-fit: cover; /* Ensures proper scaling of video */
  z-index: -1; /* Places the video behind the content */
}

.cover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  min-height: 100vh;
  /* background: linear-gradient(to bottom, transparent 70%, rgba(0, 0, 0, 0.8)); */
  /* background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0.8)
  ); */
  /* background: linear-gradient(to bottom, transparent 10%, rgb(219, 211, 199)); */

  z-index: 2; /* Above the video */

  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 0, 0, 0.5)
  ); /* Optional dark overlay */
  z-index: 0; /* Ensure this stays below the content but above the video */
}

.dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8));
  z-index: 2;
}

/**************************/
/* NAVIGATION */
/**************************/

.main-nav-container {
  position: fixed; /* Fixed position */
  top: 0; /* Align at the top */
  left: 0;
  right: 0;
  z-index: 100;
  /* background-color: rgba(0, 0, 0, 0.1); */
  display: flex;
  justify-content: center;

  background-color: transparent;
  transition: background-color 0.3s ease; /* Smooth transition for color change */
  /* color: rgba(255, 255, 255, 0.5); */
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding: 2.5rem 0rem; */
  padding: 1.5rem 0rem;
  /* 40rem */
  width: 1200px;
  /* grid-column: 1 / 2; */
}

.logo {
  /* height: 2.2rem; */
  height: 8rem;
}

.logo-text {
  font-size: 3rem;
  display: flex;
  align-items: center;
  color: #000;
  /* color: #e67e22; */
  text-transform: uppercase;
  font-weight: 500;
}
.main-nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 4.8rem;
}

.main-nav-link:link,
.main-nav-link:visited {
  display: inline-block;
  text-decoration: none;
  color: #333;
  color: white;
  font-weight: 500;
  font-size: 1.8rem;
  transition: all 0.3s;
}

.main-nav-link:hover,
.main-nav-link:active {
  color: #cf711f;
  color: #10363c;
  color: #ddd;
}

.main-nav-link.nav-cta:link,
.main-nav-link.nav-cta:visited {
  padding: 1.2rem 2.4rem;
  border-radius: 9px;
  color: #fff;
  background-color: #e67e22;
  /* background-color: #10363c; */
}

.main-nav-link.nav-cta:hover,
.main-nav-link.nav-cta:active {
  background-color: #cf711f;
  /* background-color: #091d20; */
}

.main-nav-link.active:link,
.main-nav-link.active:visited {
  color: #777;
}

.cover-img {
  width: 100%;
  margin: 0 auto;
  grid-area: cover;
  background-color: rgba(230, 126, 34, 0.01);
  /* background-color: #fdf2e9; */
}

/* MOBILE */
.btn-mobile-nav {
  border: none;
  background: none;
  cursor: pointer;

  display: none;
}

.icon-mobile-nav {
  height: 4.8rem;
  width: 4.8rem;
  color: #333;
}

.icon-mobile-nav[name="close-outline"] {
  display: none;
}

/* NEW */

/* Carousel Container */
/* .carousel-container */
.section-features-short {
  position: relative;
  width: 100%;
  /* max-width: 1200px; */
  margin: 0 auto;
  overflow: hidden;
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  display: grid;
  grid-template-columns: subgrid;

  grid-column: 1 / -1;
  grid-row: 3;
  background-color: rgba(0, 0, 0, 0.3);

  align-items: center;
  justify-content: center;
}

.features-container {
  grid-column: 2;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: min-content min-content;

  gap: 3rem;
}

/* TEST */

/* .section-features-short {
  grid-area: short-features;
  padding: 5rem 0 10rem 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: min-content min-content;

  gap: 3rem;
} */

.section-features-short div[class*="box"] {
  height: 10rem;
  /* border: #091d20 solid 0.5rem; */
  /* background-color: #e67e22; */
  display: flex;
  align-items: center;
  /* justify-content: center; */
  padding: 0 5rem;
  /* CENTER OT NO JUSTIFY CONTENT (JUST PADDING TO MAKE THE SPACE EQUAL ON ALL OF THE SIDES) */
  gap: 1.5rem;

  cursor: pointer;
  transition: all 0.5s;
}

.section-features-short div[class*="box"]:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.icon-background {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8rem; /* Adjust as needed */
  height: 8rem;
  background-color: #e67e22;
  border-radius: 50%;
}

.box-icon {
  display: inline-block;
  /* width: 3rem; Adjust the icon size to fit within the circle */
  /* height: 5rem; */
  height: 4rem;
  fill: white;
}
/* .icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
} */

.box-text {
  /* font-size: 2.5rem; */
  font-size: 2rem;
  /* color: #666 */
  /* color: black; */
  color: white;
}

/* Carousel Track */
/* .carousel {
  display: flex;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
} */

/* Carousel Item */
/* .carousel-item {
  min-width: 100%;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} */

/* .carousel-item h3 {
  font-size: 2rem;
  color: #10363c;
  margin-bottom: 1rem;
} */

/* .carousel-item p {
  font-size: 1.6rem;
  color: #555;
} */

/* Carousel Buttons */
/* .carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #10363c;
  color: #fff;
  border: none;
  padding: 1rem 2rem;
  cursor: pointer;
  border-radius: 50%;
  font-size: 2rem;
  z-index: 10;
} */

/* .carousel-btn.prev {
  left: 1rem;
} */

/* .carou'sel-btn.next {
  right: 1rem;
} */

/* .carousel-btn:hover {
  background-color: #e67e22;
} */

/* SECTION HOW */

.section-how {
  padding: 9.6rem 0;
}

.step-number {
  font-size: 8.6rem;
  font-weight: 600;
  color: #ddd;
  margin-bottom: 1.2rem;
}

.step-description {
  font-size: 1.8rem;
  line-height: 1.8;
}

.step-img-box {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  height: 100%;
}

.step-img {
  width: 40%;
  /* z-index: 10; */
}

/* SECTION REFERENCES */

.section-references {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;

  background-color: #eee;
  padding: 15rem 0;
}

.references-container {
  grid-column: 2;
}

.section-references .heading-secondary {
  margin-bottom: 5rem;
}

/**************************/
/* CTA SECTION */
/**************************/

.section-cta {
  /* top / right / bottom / left */
  /* padding: 9.6rem 0 12.8rem 0; */

  /* top / horizontal / left */
  padding: 4.8rem 0 12.8rem;
}

.cta {
  display: grid;
  /* 2/3 = 66.6% + 1/3 = 33.3% */
  grid-template-columns: 2fr 1.5fr;
  /* 2fr 1fr */
  /* background-color: #e67e22; */
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15);
  border-radius: 11px;

  background-image: linear-gradient(to right bottom, #eb984e, #e67e22);
  /* background-color: #e67e22; */
  overflow: hidden;
}

.cta-text-box {
  padding: 4.8rem 6.4rem 6.4rem 6.4rem;
  color: #45260a;
}

.cta .heading-secondary {
  /* color: #45260a; */
  color: inherit;
  margin-bottom: 3.2rem;
}

.cta-text {
  font-size: 1.8rem;
  line-height: 1.8;
  margin-bottom: 4.8rem;
}

.cta-img-box {
  background-image: linear-gradient(
      to right bottom,
      rgba(235, 151, 78, 0.35),
      rgba(230, 125, 34, 0.35)
    ),
    url("img/contact-1.jpg");
  /* background-image: linear-gradient(
      to right bottom,
      rgba(235, 151, 78, 0.35),
      rgba(230, 125, 34, 0.35)
    ),
    url("../img/eating.jpg"); */
  /* color: #e77e23 */
  background-size: cover;
  background-position: center;
}

.cta-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3.2rem;
  row-gap: 2.4rem;
}

.cta-form label {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 1.2rem;
}

.cta-form input,
.cta-form select {
  width: 100%;
  padding: 1.2rem;
  font-size: 1.8rem;
  font-family: inherit;
  color: inherit;
  border: none;
  background-color: #fdf2e9;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.cta-form input::placeholder {
  color: #aaa;
}

.cta *:focus {
  outline: none;
  box-shadow: 0 0 0 0.8rem rgba(253, 242, 233, 0.5);
}

/**************************/
/* FOOTER */
/**************************/

.footer {
  padding: 12.8rem 0;
  /* border-top: 1px solid #eee; */
  border-top: 1px solid #ccc;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;

  /* will-change: transform; */
  /* overflow: hidden; */
}

.grid--footer {
  grid-column: 2;
  grid-template-columns: 1.5fr 1.5fr 1fr 1fr;
  /* 1fr */
}

.logo-col {
  display: flex;
  flex-direction: column;
}

.footer-logo {
  display: block;
  margin-bottom: 3.2rem;
}

.social-links {
  list-style: none;
  display: flex;
  gap: 2.4rem;
}

.social-icon {
  height: 2.4rem;
  width: 2.4rem;
}

.copyright {
  font-size: 1.4rem;
  line-height: 1.6;
  color: #767676;
  margin-top: auto;
}

.footer-heading {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 4rem;
}

.contacts {
  font-style: normal;
  font-size: 1.6rem;
  line-height: 1.6;
}

.address {
  margin-bottom: 2.4rem;
}

.footer-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.footer-link:link,
.footer-link:visited {
  text-decoration: none;
  font-size: 1.6rem;
  color: #767676;
  transition: all 0.3s;
}

.footer-link:hover,
.footer-link:active {
  color: #555;
}

/**************************/
/* IMPRESSUM / IMPRESSUM.HTML */
/**************************/

.section-impressum {
  padding: 15rem 0 5rem 0;
}

.section-impressum .heading-secondary {
  margin-bottom: 5rem;
  /* color: #d68a59; */
  color: #666;
}

/************************************************** JAVASCRIPT NAVBAR CLASSES **************************************************/

/* Default navbar styles */
.default-navbar {
  background-color: transparent;
  transition: background-color 0.3s ease;
}

/* Scrolled navbar styles */
.scrolled-navbar {
  background-color: rgba(255, 255, 255, 1);
  /* 0.97 */
  transition: background-color 0.3s ease;
}

/* Default link styles */
.default-link {
  color: white;
  transition: color 0.3s ease;
}

/* Scrolled link styles */
.scrolled-link:link,
.scrolled-link:visited {
  color: black;
  transition: color 0.3s ease;
}

.scrolled-link:hover {
  color: #777;
  transition: color 0.3s ease;
}

/*************************************************** JAVASCRIPT ANIMATIONS ***************************************************/

/* Default hidden state */
.hidden {
  opacity: 0;
  transform: translateX(0);
  transition: all 0.6s ease-out;
}

/* Slide in from left */
.animate-left {
  animation: slideInLeft 1s ease-out forwards;
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-50%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Slide in from right */
.animate-right {
  animation: slideInRight 1s ease-out forwards;
}

@keyframes slideInRight {
  0% {
    transform: translateX(50%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Slide in from bottom */
.animate-up {
  animation: slideInUp 0.5s ease-out forwards;
}

@keyframes slideInUp {
  0% {
    transform: translateY(20%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.hidden {
  opacity: 0;
  /* transform: translateY(10px); Ensures elements start slightly out of view */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Optional styling for the feature boxes */
/* .features-container div {
  opacity: 0;
  visibility: hidden;
} */

.features-container div.animate-left,
.features-container div.animate-right,
.features-container div.animate-up {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* ERROR POPUP */

/* Popup container */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Popup content */
.popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.popup-content p {
  margin: 0 0 20px;
  font-size: 16px;
}

.popup-content button {
  background-color: #ff4c4c;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.popup-content button:hover {
  background-color: #e04141;
}

/* Hidden state */
.hide-popup {
  display: none;
}