:root {
  --bg: #efefef;
  --sand: #cba173;
  --maroon: #7f453f;
  --text: #f5d3a7;
  --radius-xl: 48px;
  --radius-lg: 36px;
  --content-width: 1480px;
  --section-space: clamp(56px, 10vw, 160px);
  --nav-menu-x: 0px;
  --nav-menu-y: 0px;
  --nav-gallery-x: 0px;
  --nav-gallery-y: 0px;
  --nav-contact-x: 0px;
  --nav-contact-y: 0px;
  --gallery-link-x: 0px;
  --gallery-link-y: 0px;
  --nav-menu-height: 25px;
  --nav-gallery-height: 30px;
  --nav-contact-height: 20px;
  --nav-menu-width: 75px;
  --nav-gallery-width: 160px;
  --nav-contact-width: 160px;
  --nav-gap: 55px;
  --logo-width: 120px;
  --logo-x: 0px;
  --logo-y: 0px;
  --topbar-pad-x: clamp(16px, 3vw, 34px);
  --topbar-pad-y: clamp(12px, 2vw, 22px);
  --gallery-overlay-offset: clamp(-770px, -50vw, -120px);
  --gallery-arrow-size: clamp(44px, 5vw, 64px);
  --contact-icon-size: clamp(10px, -5vw, 28px);
  --contact-instagram-x: -50px;
  --contact-instagram-y: -72px;
  --contact-phone-x: -645px;
  --contact-phone-y: -45px;
  --contact-location-x: -670px;
  --contact-location-y: -110px;
  --contact-phone-2-x: 285px;
  --contact-phone-2-y: 162px;
  --contact-location-2-x: 288px;
  --contact-location-2-y: 105px;
  --hero-bg-scale: 1;
  --hero-bg-x: 0px;
  --hero-bg-y: 0px;
  --hero-bg-max-height: none;
  --menu-img-scale: 1;
  --menu-img-x: 0px;
  --menu-img-y: 0px;
  --menu-img-max-height: none;
  --gallery-header-scale: 1;
  --gallery-header-x: 0px;
  --gallery-header-y: 0px;
  --gallery-header-max-height: none;
  --gallery-slide-scale: 0.98;
  --gallery-slide-x: 0px;
  --gallery-slide-y: 0px;
  --gallery-slide-max-height: min(30vh, 820px);
  --gallery-slider-y: 0px;
  --gallery-slider-pad-top: 0px;
  --gallery-slider-pad-bottom: 0px;
  --gallery-arrow-x: 0px;
  --gallery-arrow-y: 0px;
  --contact-img-scale: 1;
  --contact-img-x: 0px;
  --contact-img-y: 0px;
  --contact-img-max-height: none;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Trebuchet MS", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg);
  color: var(--maroon);
  overflow-x: hidden;
  background-image: url("images/Background.png");
  background-size: cover;
  background-position: center top;
  background-attachment: scroll;
}

.page-bg {
  position: fixed;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(183, 95, 84, 0.34), rgba(165, 80, 73, 0.28)),
    url("images/Background.png") center top / cover no-repeat;
  z-index: -2;
  opacity: 0.78;
}



.hero {
  position: relative;
  width: min(94%, var(--content-width));
  margin: 18px auto 0;
  border-radius: 28px;
  min-height: 0;
  display: block;
  overflow: hidden;
  box-shadow: none;
}

.hero-bg-image {
  width: 100%;
  height: auto;
  display: block;
  max-height: var(--hero-bg-max-height);
  object-fit: cover;
  transform: translate(var(--hero-bg-x), var(--hero-bg-y)) scale(var(--hero-bg-scale));
  transform-origin: center;
}

.hero-overlay-content {
  position: absolute;
  inset: 0;
  display: grid;
 
 
  
}

.topbar {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: clamp(18px, 11vw, 80px);
  padding: var(--topbar-pad-y) var(--topbar-pad-x) 12px;
  background: linear-gradient(180deg, rgba(121, 67, 73, 0.36), rgba(68, 31, 27, 0));
}

.logo {
  width: var(--logo-width);
  flex: 0 0 auto;
  position: relative;
  transform: translate(var(--logo-x), var(--logo-y));
}

.nav {
  display: flex;
  gap: var(--nav-gap);
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  flex: 1 1 320px;
  min-width: 0;
}

.nav a {
  --nav-offset-x: 0px;
  --nav-offset-y: 0px;
  --nav-hover-shift: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding: 0;
  text-decoration: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform: translate(var(--nav-offset-x), calc(var(--nav-offset-y) + var(--nav-hover-shift)));
}

.nav-link-menu,
.nav-link-gallery,
.nav-link-contact {
  position: relative;
  flex: 0 0 auto;
}

.nav a img {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  object-fit: contain;
}

.nav-link-menu img {
  width: var(--nav-menu-width) !important;
  max-width: var(--nav-menu-width) !important;
  height: var(--nav-menu-height) !important;
  max-height: var(--nav-menu-height) !important;
}

.nav-link-menu {
  --nav-offset-x: var(--nav-menu-x);
  --nav-offset-y: var(--nav-menu-y);
}

.nav-link-gallery img {
  width: var(--nav-gallery-width) !important;
  max-width: var(--nav-gallery-width) !important;
  height: var(--nav-gallery-height) !important;
  max-height: var(--nav-gallery-height) !important;
}

.nav-link-gallery {
  --nav-offset-x: calc(var(--nav-gallery-x) + var(--gallery-link-x));
  --nav-offset-y: calc(var(--nav-gallery-y) + var(--gallery-link-y));
}

.nav-link-contact img {
  width: var(--nav-contact-width) !important;
  max-width: var(--nav-contact-width) !important;
  height: var(--nav-contact-height) !important;
  max-height: var(--nav-contact-height) !important;
}

.nav-link-contact {
  --nav-offset-x: var(--nav-contact-x);
  --nav-offset-y: var(--nav-contact-y);
}

.nav a:hover,
.nav a.active {
  --nav-hover-shift: -1px;
  opacity: 0.92;
}

.hero-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 24px;
}

.hero-emblem {
  width: clamp(90px, 10vw, 150px);
  opacity: 0.92;
}

.hero-bottom {
  display: flex;
  justify-content: center;
  padding: 0 20px 10px;
}

.hero-bottom img {
  width: min(96%, 980px);
  height: auto;
  object-fit: contain;
  filter: none;
}

.section {
  margin-top: var(--section-space);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: transparent;
  width: min(96%, var(--content-width));
  margin-left: auto;
  margin-right: auto;
  scroll-margin-top: 20px;
}

.menu-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  max-height: var(--menu-img-max-height);
  transform: translate(var(--menu-img-x), var(--menu-img-y)) scale(var(--menu-img-scale));
  transform-origin: center;
}

.menu-btn-wrap {
  margin-top: 18px;
  margin-bottom: clamp(72px, 12vw, 180px);
  display: flex;
  justify-content: center;
}

.menu-btn {
  display: inline-flex;
  width: min(96%, 720px);
  border-radius: 999px;
  overflow: hidden;
  transition: transform 0.25s ease;
}

.menu-btn:hover {
  transform: translateY(-2px);
}

.menu-btn img {
  width: 100%;
  display: block;
}

.gallery {
  margin-top: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  width: min(96%, var(--content-width));
  margin-left: auto;
  margin-right: auto;
  scroll-margin-top: 20px;
  position: relative;
  z-index: 2;
}

.gallery-header-wrap {
  border-radius: 0;
  overflow: visible;
  max-height: none;
  margin-bottom: 20px;
}

.gallery-header {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: top center;
  max-height: var(--gallery-header-max-height);
  transform: translate(var(--gallery-header-x), var(--gallery-header-y)) scale(var(--gallery-header-scale));
  transform-origin: center;
}

.gallery-slider {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  margin-top: var(--gallery-overlay-offset);
  transform: translateY(var(--gallery-slider-y));
  position: relative;
  z-index: 5;
}

.gallery-arrow {
  width: var(--gallery-arrow-size);
  height: var(--gallery-arrow-size);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
  display: grid;
  place-items: center;
  padding: 0;
  position: relative;
  z-index: 8;
  pointer-events: auto;
  transform: translate(var(--gallery-arrow-x), var(--gallery-arrow-y));
}

.gallery-arrow:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.gallery-arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.gallery-viewport {
  overflow: hidden;
  overflow-x: auto;
  border-radius: 0;
  width: 100%;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: var(--gallery-slider-pad-top) 0 var(--gallery-slider-pad-bottom);
}

.gallery-viewport::-webkit-scrollbar {
  display: none;
}

.gallery-track {
  display: flex;
}

.gallery-slide {
  flex: 0 0 calc(100% / 3);
  display: grid;
  place-items: center;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  padding: 0;
}

.gallery-slide img {
  width: 100%;
  max-height: var(--gallery-slide-max-height);
  object-fit: contain;
  display: block;
  border-radius: 0;
  box-shadow: none;
  transform: translate(var(--gallery-slide-x), var(--gallery-slide-y)) scale(var(--gallery-slide-scale));
  transform-origin: center;
}

.contact {
  margin: var(--section-space) 0 0;
  width: min(96%, var(--content-width));
  margin-left: auto;
  margin-right: auto;
  scroll-margin-top: 20px;
  position: relative;
}

.contact img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
  object-fit: contain;
  box-shadow: none;
  max-height: var(--contact-img-max-height);
  transform: translate(var(--contact-img-x), var(--contact-img-y)) scale(var(--contact-img-scale));
  transform-origin: center;
}

.contact-icons {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 2vw, 18px);
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 5vw, 72px);
  transform: translateX(-50%);
  z-index: 2;
  width: min(90%, 420px);
}

.contact-icons a,
.contact-icons span {
  width: var(--contact-icon-size);
  height: var(--contact-icon-size);
  display: grid;
  place-items: center;
  transition: transform 0.2s ease;
}

.contact-icon-instagram,
.contact-icon-phone,
.contact-icon-location {
  position: relative;
}

.contact-icon-instagram {
  transform: translate(var(--contact-instagram-x), var(--contact-instagram-y));
}

.contact-icon-phone {
  transform: translate(var(--contact-phone-x), var(--contact-phone-y));
}

.contact-icon-location {
  transform: translate(var(--contact-location-x), var(--contact-location-y));
}

.contact-icons a:hover,
.contact-icons span:hover {
  opacity: 0.92;
}

.contact-icons-extra a:hover,
.contact-icons-extra span:hover {
  opacity: 0.92;
}

.contact-icons img {
  width: clamp(22px, 2.5vw, 28px);
  height: clamp(22px, 2.5vw, 28px);
  border-radius: 0;
  box-shadow: none;
}

.contact-icons-extra {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.contact-icons-extra a,
.contact-icons-extra span {
  width: var(--contact-icon-size);
  height: var(--contact-icon-size);
  display: grid;
  place-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: auto;
  transition: transform 0.2s ease;
}

.contact-icons-extra img {
  width: clamp(22px, 2.5vw, 28px);
  height: clamp(22px, 2.5vw, 28px);
  border-radius: 0;
  box-shadow: none;
}

.contact-icon-phone-2 {
  transform: translate(-50%, -50%) translate(var(--contact-phone-2-x), var(--contact-phone-2-y));
}

.contact-icon-location-2 {
  transform: translate(-50%, -50%) translate(var(--contact-location-2-x), var(--contact-location-2-y));
}

@media (max-width: 920px) {
  :root {
    --tablet-logo-width: var(--logo-width);
    --tablet-logo-x: var(--logo-x);
    --tablet-logo-y: var(--logo-y);
    --tablet-nav-menu-x: var(--nav-menu-x);
    --tablet-nav-menu-y: var(--nav-menu-y);
    --tablet-nav-gallery-x: var(--nav-gallery-x);
    --tablet-nav-gallery-y: var(--nav-gallery-y);
    --tablet-gallery-link-x: var(--gallery-link-x);
    --tablet-gallery-link-y: var(--gallery-link-y);
    --tablet-nav-contact-x: var(--nav-contact-x);
    --tablet-nav-contact-y: var(--nav-contact-y);
    --tablet-nav-menu-width: var(--nav-menu-width);
    --tablet-nav-menu-height: var(--nav-menu-height);
    --tablet-nav-gallery-width: var(--nav-gallery-width);
    --tablet-nav-gallery-height: var(--nav-gallery-height);
    --tablet-nav-contact-width: var(--nav-contact-width);
    --tablet-nav-contact-height: var(--nav-contact-height);
    --tablet-nav-gap: clamp(10px, 3vw, 18px);
    --tablet-contact-icon-size: var(--contact-icon-size);
    --tablet-contact-instagram-x: var(--contact-instagram-x);
    --tablet-contact-instagram-y: var(--contact-instagram-y);
    --tablet-contact-phone-x: var(--contact-phone-x);
    --tablet-contact-phone-y: var(--contact-phone-y);
    --tablet-contact-location-x: var(--contact-location-x);
    --tablet-contact-location-y: var(--contact-location-y);
    --tablet-contact-phone-2-x: var(--contact-phone-2-x);
    --tablet-contact-phone-2-y: var(--contact-phone-2-y);
    --tablet-contact-location-2-x: var(--contact-location-2-x);
    --tablet-contact-location-2-y: var(--contact-location-2-y);
    --tablet-hero-bg-scale: var(--hero-bg-scale);
    --tablet-hero-bg-x: var(--hero-bg-x);
    --tablet-hero-bg-y: var(--hero-bg-y);
    --tablet-hero-bg-max-height: var(--hero-bg-max-height);
    --tablet-menu-img-scale: var(--menu-img-scale);
    --tablet-menu-img-x: var(--menu-img-x);
    --tablet-menu-img-y: var(--menu-img-y);
    --tablet-menu-img-max-height: var(--menu-img-max-height);
    --tablet-gallery-header-scale: var(--gallery-header-scale);
    --tablet-gallery-header-x: var(--gallery-header-x);
    --tablet-gallery-header-y: var(--gallery-header-y);
    --tablet-gallery-header-max-height: var(--gallery-header-max-height);
    --tablet-gallery-slide-scale: var(--gallery-slide-scale);
    --tablet-gallery-slide-x: var(--gallery-slide-x);
    --tablet-gallery-slide-y: var(--gallery-slide-y);
    --tablet-gallery-slide-max-height: var(--gallery-slide-max-height);
    --tablet-contact-img-scale: var(--contact-img-scale);
    --tablet-contact-img-x: var(--contact-img-x);
    --tablet-contact-img-y: var(--contact-img-y);
    --tablet-contact-img-max-height: var(--contact-img-max-height);
  }

  .topbar {
    justify-content: center;
    padding: 12px 12px 8px;
  }

  .hero,
  .section,
  .gallery,
  .contact {
    width: 100vw;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    margin-top: 48px;
  }

  .menu-btn {
    width: 100%;
    border-radius: 0;
  }

  .logo {
    width: var(--tablet-logo-width);
    transform: translate(var(--tablet-logo-x), var(--tablet-logo-y));
  }

  .nav {
    justify-content: center;
    gap: var(--tablet-nav-gap);
    flex: 0 1 auto;
  }

  .nav-link-menu {
    --nav-offset-x: var(--tablet-nav-menu-x);
    --nav-offset-y: var(--tablet-nav-menu-y);
  }

  .nav-link-menu img {
    width: var(--tablet-nav-menu-width) !important;
    max-width: var(--tablet-nav-menu-width) !important;
    height: var(--tablet-nav-menu-height) !important;
    max-height: var(--tablet-nav-menu-height) !important;
  }

  .nav-link-gallery {
    --nav-offset-x: calc(var(--tablet-nav-gallery-x) + var(--tablet-gallery-link-x));
    --nav-offset-y: calc(var(--tablet-nav-gallery-y) + var(--tablet-gallery-link-y));
  }

  .nav-link-gallery img {
    width: var(--tablet-nav-gallery-width) !important;
    max-width: var(--tablet-nav-gallery-width) !important;
    height: var(--tablet-nav-gallery-height) !important;
    max-height: var(--tablet-nav-gallery-height) !important;
  }

  .nav-link-contact {
    --nav-offset-x: var(--tablet-nav-contact-x);
    --nav-offset-y: var(--tablet-nav-contact-y);
  }

  .nav-link-contact img {
    width: var(--tablet-nav-contact-width) !important;
    max-width: var(--tablet-nav-contact-width) !important;
    height: var(--tablet-nav-contact-height) !important;
    max-height: var(--tablet-nav-contact-height) !important;
  }

  .hero {
    min-height: 0;
  }

  .hero-bg-image {
    max-height: var(--tablet-hero-bg-max-height);
    transform: translate(var(--tablet-hero-bg-x), var(--tablet-hero-bg-y)) scale(var(--tablet-hero-bg-scale));
  }

  .hero-bottom img {
    width: min(96%, 680px);
  }

  .hero-mid {
    padding-top: 132px;
  }

  .gallery-header-wrap {
    max-height: none;
    position: relative;
    z-index: 1;
  }

  .gallery-slider {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: clamp(-220px, -28vw, -120px);
    z-index: 3;
    position: relative;
  }

  .gallery-slide {
    flex-basis: 100%;
  }

  .menu-img {
    max-height: var(--tablet-menu-img-max-height);
    transform: translate(var(--tablet-menu-img-x), var(--tablet-menu-img-y)) scale(var(--tablet-menu-img-scale));
  }

  .gallery-header {
    max-height: var(--tablet-gallery-header-max-height);
    transform: translate(var(--tablet-gallery-header-x), var(--tablet-gallery-header-y)) scale(var(--tablet-gallery-header-scale));
  }

  .gallery-slide img {
    max-height: var(--tablet-gallery-slide-max-height);
    transform: translate(var(--tablet-gallery-slide-x), var(--tablet-gallery-slide-y)) scale(var(--tablet-gallery-slide-scale));
  }

  .contact img {
    max-height: var(--tablet-contact-img-max-height);
    transform: translate(var(--tablet-contact-img-x), var(--tablet-contact-img-y)) scale(var(--tablet-contact-img-scale));
  }

  .gallery-viewport {
    order: 2;
    width: 100%;
  }

  .gallery-arrow {
    width: clamp(40px, 10vw, 48px);
    height: clamp(40px, 10vw, 48px);
    position: absolute;
    top: 50%;
    z-index: 6;
  }

  .gallery-arrow-left {
    transform: translate(
      var(--mobile-gallery-arrow-left-x),
      calc(-50% + var(--mobile-gallery-arrow-left-y))
    );
    left: 0;
  }

  .gallery-arrow-right {
    transform: translate(
      var(--mobile-gallery-arrow-right-x),
      calc(-50% + var(--mobile-gallery-arrow-right-y))
    );
    right: 0;
  }

  .gallery-arrow-left:hover,
  .gallery-arrow-left:active,
  .gallery-arrow-left:focus-visible {
    transform: translate(
      var(--mobile-gallery-arrow-left-x),
      calc(-50% + var(--mobile-gallery-arrow-left-y))
    );
  }

  .gallery-arrow-right:hover,
  .gallery-arrow-right:active,
  .gallery-arrow-right:focus-visible {
    transform: translate(
      var(--mobile-gallery-arrow-right-x),
      calc(-50% + var(--mobile-gallery-arrow-right-y))
    );
  }

  .contact-icons a,
  .contact-icons span,
  .contact-icons-extra a,
  .contact-icons-extra span {
    width: var(--tablet-contact-icon-size);
    height: var(--tablet-contact-icon-size);
  }

  .contact-icon-instagram {
    transform: translate(var(--tablet-contact-instagram-x), var(--tablet-contact-instagram-y));
  }

  .contact-icon-phone {
    transform: translate(var(--tablet-contact-phone-x), var(--tablet-contact-phone-y));
  }

  .contact-icon-location {
    transform: translate(var(--tablet-contact-location-x), var(--tablet-contact-location-y));
  }

  .contact-icon-phone-2 {
    transform: translate(-50%, -50%) translate(var(--tablet-contact-phone-2-x), var(--tablet-contact-phone-2-y));
  }

  .contact-icon-location-2 {
    transform: translate(-50%, -50%) translate(var(--tablet-contact-location-2-x), var(--tablet-contact-location-2-y));
  }
}

@media (max-width: 640px) {
  :root {
    --radius-xl: 24px;
    --radius-lg: 24px;
    --section-space: 48px;
    --mobile-logo-width: var(--logo-width);
    --mobile-logo-x: var(--logo-x);
    --mobile-logo-y: var(--logo-y);
    --mobile-nav-menu-x: var(--nav-menu-x);
    --mobile-nav-menu-y: var(--nav-menu-y);
    --mobile-nav-gallery-x: var(--nav-gallery-x);
    --mobile-nav-gallery-y: var(--nav-gallery-y);
    --mobile-gallery-link-x: var(--gallery-link-x);
    --mobile-gallery-link-y: var(--gallery-link-y);
    --mobile-nav-contact-x: var(--nav-contact-x);
    --mobile-nav-contact-y: var(--nav-contact-y);
    --mobile-nav-menu-width: clamp(56px, 17vw, 68px);
    --mobile-nav-menu-height: clamp(18px, 5.7vw, 23px);
    --mobile-nav-gallery-width: clamp(94px, 28vw, 118px);
    --mobile-nav-gallery-height: clamp(18px, 5.3vw, 24px);
    --mobile-nav-contact-width: clamp(96px, 30vw, 122px);
    --mobile-nav-contact-height: clamp(12px, 3.8vw, 17px);
    --mobile-nav-gap: 6px;
    --mobile-contact-icon-size: var(--contact-icon-size);
    --mobile-contact-icons-width: min(92%, 320px);
    --mobile-contact-icons-bottom: 28px;
    --mobile-contact-instagram-x: 130px;
    --mobile-contact-instagram-y: -92px;
    --mobile-contact-phone-x: -158px;
    --mobile-contact-phone-y: -85px;
    --mobile-contact-location-x: -313px;
    --mobile-contact-location-y: -100px;
    --mobile-contact-extra-anchor-x: 50%;
    --mobile-contact-extra-anchor-y: 50%;
    --mobile-contact-phone-2-x: 70px;
    --mobile-contact-phone-2-y: -10px;
    --mobile-contact-location-2-x: 69px;
    --mobile-contact-location-2-y: -27px;
    --mobile-hero-bg-scale: var(--hero-bg-scale);
    --mobile-hero-bg-x: var(--hero-bg-x);
    --mobile-hero-bg-y: var(--hero-bg-y);
    --mobile-hero-bg-max-height: var(--hero-bg-max-height);
    --mobile-menu-img-scale: var(--menu-img-scale);
    --mobile-menu-img-x: var(--menu-img-x);
    --mobile-menu-img-y: var(--menu-img-y);
    --mobile-menu-img-max-height: var(--menu-img-max-height);
    --mobile-gallery-header-scale: var(--gallery-header-scale);
    --mobile-gallery-header-x: var(--gallery-header-x);
    --mobile-gallery-header-y: var(--gallery-header-y);
    --mobile-gallery-header-max-height: var(--gallery-header-max-height);
    --mobile-gallery-slide-scale: var(--gallery-slide-scale);
    --mobile-gallery-slide-x: var(--gallery-slide-x);
    --mobile-gallery-slide-y: -250px;
    --mobile-gallery-slide-max-height: var(--gallery-slide-max-height);
    --mobile-gallery-slider-y: -250px;
    --mobile-gallery-slider-pad-top: 320px;
    --mobile-gallery-slider-pad-bottom: 80px;
    --mobile-gallery-arrow-x: 0px;
    --mobile-gallery-arrow-y: var(--mobile-gallery-slider-y);
    --mobile-gallery-arrow-left-x: 0px;
    --mobile-gallery-arrow-left-y: -100px;
    --mobile-gallery-arrow-right-x: 0px;
    --mobile-gallery-arrow-right-y: -100px;
    --mobile-contact-img-scale: var(--contact-img-scale);
    --mobile-contact-img-x: var(--contact-img-x);
    --mobile-contact-img-y: var(--contact-img-y);
    --mobile-contact-img-max-height: var(--contact-img-max-height);
  }

  .topbar {
    row-gap: 8px;
  }

  .logo {
    width: var(--mobile-logo-width);
    transform: translate(var(--mobile-logo-x), var(--mobile-logo-y));
  }

  .nav {
    width: 100%;
    gap: var(--mobile-nav-gap);
  }

  .nav-link-menu {
    --nav-offset-x: var(--mobile-nav-menu-x);
    --nav-offset-y: var(--mobile-nav-menu-y);
  }

  .nav-link-menu img {
    width: var(--mobile-nav-menu-width) !important;
    max-width: var(--mobile-nav-menu-width) !important;
    height: var(--mobile-nav-menu-height) !important;
    max-height: var(--mobile-nav-menu-height) !important;
  }

  .nav-link-gallery {
    --nav-offset-x: calc(var(--mobile-nav-gallery-x) + var(--mobile-gallery-link-x));
    --nav-offset-y: calc(var(--mobile-nav-gallery-y) + var(--mobile-gallery-link-y));
  }

  .nav-link-gallery img {
    width: var(--mobile-nav-gallery-width) !important;
    max-width: var(--mobile-nav-gallery-width) !important;
    height: var(--mobile-nav-gallery-height) !important;
    max-height: var(--mobile-nav-gallery-height) !important;
  }

  .nav-link-contact {
    --nav-offset-x: var(--mobile-nav-contact-x);
    --nav-offset-y: var(--mobile-nav-contact-y);
  }

  .nav-link-contact img {
    width: var(--mobile-nav-contact-width) !important;
    max-width: var(--mobile-nav-contact-width) !important;
    height: var(--mobile-nav-contact-height) !important;
    max-height: var(--mobile-nav-contact-height) !important;
  }

  .hero-bottom {
    padding-bottom: 24px;
  }

  .hero-bottom img {
    width: 100%;
  }

  .hero-bg-image {
    max-height: var(--mobile-hero-bg-max-height);
    transform: translate(var(--mobile-hero-bg-x), var(--mobile-hero-bg-y)) scale(var(--mobile-hero-bg-scale));
  }

  .hero,
  .section,
  .gallery,
  .contact {
    width: 100vw;
    margin-left: 0;
    margin-right: 0;
  }

  .hero-bg-image,
  .hero-bottom img,
  .menu-img,
  .gallery-header,
  .gallery-slide img,
  .contact img {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
  }

  .gallery-slider {
    margin-top: clamp(-72px, -12vw, -24px);
    transform: translateY(var(--mobile-gallery-slider-y));
  }

  .gallery-viewport {
    padding: var(--mobile-gallery-slider-pad-top) 0 var(--mobile-gallery-slider-pad-bottom);
  }

  .menu-img {
    max-height: var(--mobile-menu-img-max-height);
    transform: translate(var(--mobile-menu-img-x), var(--mobile-menu-img-y)) scale(var(--mobile-menu-img-scale));
  }

  .gallery-header {
    max-height: var(--mobile-gallery-header-max-height);
    transform: translate(var(--mobile-gallery-header-x), var(--mobile-gallery-header-y)) scale(var(--mobile-gallery-header-scale));
  }

  .gallery-slide img {
    max-height: var(--mobile-gallery-slide-max-height);
    transform: translate(var(--mobile-gallery-slide-x), var(--mobile-gallery-slide-y)) scale(var(--mobile-gallery-slide-scale));
  }

  .contact img {
    max-height: var(--mobile-contact-img-max-height);
    transform: translate(var(--mobile-contact-img-x), var(--mobile-contact-img-y)) scale(var(--mobile-contact-img-scale));
  }

  .contact {
    margin-top: 40px;
    padding-bottom: 84px;
  }

  .contact-icons {
    bottom: var(--mobile-contact-icons-bottom);
    position: absolute;
    width: var(--mobile-contact-icons-width);
    left: 50%;
    transform: translateX(-50%);
    justify-content: space-between;
    gap: 0;
  }

  .contact-icons a,
  .contact-icons span,
  .contact-icons-extra a,
  .contact-icons-extra span {
    width: var(--mobile-contact-icon-size);
    height: var(--mobile-contact-icon-size);
  }

  .contact-icons-extra a,
  .contact-icons-extra span {
    left: var(--mobile-contact-extra-anchor-x);
    top: var(--mobile-contact-extra-anchor-y);
  }

  .contact-icon-instagram {
    transform: translate(var(--mobile-contact-instagram-x), var(--mobile-contact-instagram-y));
  }

  .contact-icon-phone {
    transform: translate(var(--mobile-contact-phone-x), var(--mobile-contact-phone-y));
  }

  .contact-icon-location {
    transform: translate(var(--mobile-contact-location-x), var(--mobile-contact-location-y));
  }

  .contact-icon-phone-2 {
    transform: translate(-50%, -50%) translate(var(--mobile-contact-phone-2-x), var(--mobile-contact-phone-2-y));
  }

  .contact-icon-location-2 {
    transform: translate(-50%, -50%) translate(var(--mobile-contact-location-2-x), var(--mobile-contact-location-2-y));
  }
}

@media (max-width: 1200px) {
  .gallery-slide {
    flex: 0 0 50%;
  }
}

@media (max-width: 780px) {
  .gallery-slide {
    flex: 0 0 100%;
  }
}



@media (min-width: 1440px) {
  .gallery-slide img {
    max-height: 820px;
  }
}

@supports (-webkit-touch-callout: none) {
  body {
    background-attachment: scroll;
  }
}