:root {
  --color-primary:#EECB8A;
  --color-primary-dark:#C7A55C;
  --color-dark:#1F2520;
  --color-light:#fff;
  --color-muted:#7D7F7A;
  --color-accent:#D98C6B;
  --overlay-color:rgba(31,37,32,.7);
  --font-heading:"Didact Gothic",sans-serif;
  --font-main:"Didact Gothic",sans-serif;
  --background-color-header:linear-gradient(to bottom,rgba(31,37,32,.85),rgba(31,37,32,.65));
  --hamburger-color:#F8F1E9;
  --logo-background-color:rgba(0,0,0,.5);
  --hero-overaly-background-color:linear-gradient(to bottom,rgba(31,37,32,.7),rgb(31 37 32/65%));
  --hero-title-text-shadow:0 3px 12px rgba(0,0,0,.4);
  --hero-subtitle-text-color:#F2E8D5;
  --hero-subtitle-text-shadow:0 2px 8px rgba(0,0,0,.3);
  --hero-hours-container-background:rgba(31,37,32,.75);
  --hero-hours-text-color:#D1D5DB;
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  scroll-behavior:smooth;
}

body {
  font-family:var(--font-main);
  background-color:var(--color-light);
  color:var(--color-dark);
}

.header {
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  z-index:40;
  transition:background .3s ease;
}

.header-background {
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  background:var(--background-color-header);
}

.header__inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}

.navbar {
  width:100%;
  padding:1rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}

.navbar__menu {
  display:flex;
  list-style:none;
  gap:1.5rem;
}

.navbar__link {
  color:#fff;
  text-decoration:none;
  font-size:1rem;
  padding:.5rem;
}

.logo {
  width:100%;
  display:flex;
  position:relative;
  z-index:2;
  padding-left:25px;
  padding-top:70px;
  position:absolute;
}

.logo img {
  margin-top:80px;
  margin-left:30px;
  width:180px;
  height:auto;
  border-radius:25px;
}

.hero {
  position:relative;
  width:100%;
  height:100vh;
  color:var(--color-light);
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.hero__overlay {
  position:absolute;
  inset:0;
  background:var(--hero-overaly-background-color);
  z-index:1;
}

.hero__container {
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  height:100vh;
  max-width:1200px;
  margin:0 auto;
  flex-direction:column;
}

.hero__content {
  position:relative;
  z-index:2;
  max-width:900px;
  padding:2rem;
  display:flex;
  flex-direction:column;
}

.hero__title {
  font-family:var(--font-heading);
  font-size:3.5rem;
  font-weight:700;
  margin-bottom:1.5rem;
  text-shadow:var(--hero-title-text-shadow);
}

.hero__subtitle {
  font-size:1.6rem;
  font-weight:400;
  margin-bottom:2.5rem;
  color:var(--hero-subtitle-text-color);
  text-shadow:var(--hero-subtitle-text-shadow);
}

.hero__hours {
  flex: 1 1 350px;
}

.hero__hours {
  position: absolute;
  right: 25px;
  background: var(--hero-hours-container-background);
  border-radius: 25px;
  bottom: 25px;
  padding: 10px;
  z-index: 20;
}

.hero__hours-container {
  display: flex;
  flex-direction: column;
}

.hero__info-text {
  display:inline-block;
  color:var(--hero-hours-text-color);
  font-style:italic;
  font-size:18px;
  padding:5px;
}

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  color: var(--color-light);
  overflow: hidden;
  background-size: cover;      
  background-position: center;  
  background-repeat: no-repeat;
  width: 100%;
  /* height: calc(100vh - 180px);   */
  transition: background-image 1s ease-in-out; 
   transition: opacity 1s ease-in-out;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  /* animation: fade 0.5s ease-in-out infinite alternate; */
   transition: opacity 0.5s ease-in-out;
}

/* .hero img:nth-of-type(1) {
  animation-delay: 0s;
}

.hero img:nth-of-type(2) {
  animation-delay: 3s;
}

.hero img:nth-of-type(3) {
  animation-delay: 6s;
} */


.hero img.active {
  opacity: 1;
  z-index: 1;
}

#loader-overlay {
  position: fixed;
  inset: 0;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
  flex-direction: column;
}

#loader-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

.loader {
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 0 var(--color-primary-dark);
  animation: l2 1.5s infinite linear;
  position: relative;
  margin-top: 80px;
}

.loader:before,
.loader:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--color-primary-dark);
  animation: inherit;
  animation-delay: -0.5s;
}

.loader:after {
  animation-delay: -1s;
}

@keyframes l2 {
  100% {
    box-shadow: 0 0 0 40px transparent;
  }
}


@media (max-width:768px) {
  .navbar__toggle { display:block; }
  .nav_border { border:0; }
  .navbar__menu { display:none; width:100%; flex-direction:column; align-items:center; padding:1rem 0; }
  .navbar__menu--active { display:flex; }
  .navbar__item { margin:.5rem 0; }
  .navbar__dropdown-menu { position:static; background-color:#555; width:100%; text-align:center; }
  .navbar__flag { margin-right:1rem; }
  .nav_border:hover { background:transparent; }
  .header__inner { gap:1rem; }
}