/*

--- 01 TYPOGRAPHY SYSTEM

- Font sizes (px):
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font weights
Deafult: 400
Medium: 500
Semi-bold: 600
Bold: 700

- Line heigts:
Default: 1
Small: 1.05
Medium: 1.2
Paragraph-default: 1.6
Large: 1.8

- Letter spacing
0.5px
0.75px

--- 02 COLORS

- Primary: #574e49, #809b57
- Tints: 
  --- Green: #d9e1cd
  --- Brown: #463e3a
- Shades:
- Accents:
- Greys:


--- 03 IMAGES

--- 04 ICONS

--- 05 SHADOWS
box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);

--- 06 BORDER_RADIUS

default: 9px
medium: 11px


--- 07 WHITESPACE

- SPACING SYSTEM (px)
- 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128


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

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

  /* Does not work on Safari */
  scroll-behavior: smooth;
}

body {
  font-family: "EB Garamond", serif;
  font-weight: 400;
  /* color: #555; */
  /* overflow: hidden; */
}

h2 {
  font-size: 3rem;
}

a:link,
a:visited,
a:hover,
a:active {
  font-family: "EB Garamond", serif;
  text-decoration: none;
  color: #d9e1cd;
  transition: all 0.3s;
}

a:hover {
  color: #809b57;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 10px solid #574e49;
  border-radius: 100%;
  margin: auto;
  width: 50rem;
  max-width: 70%;
}

.center {
  text-align: center;
}

.section-hero {
  height: 100vh;
  background-image: url("../img/background.webp");
  background-size: cover;
}

.hero {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  margin: 0 2.4rem;
}

.hero-text-box {
  font-size: 3.6rem;
  /* color: #574e49;
  text-shadow: 2px 2px #809b57; */
  /* color: #809b57; */
  color: #d9e1cd;
  text-shadow: 3px 3px #574e49;
  margin-left: 3.6rem;
  margin-top: 3.6rem;
}

.hero-img-box {
  margin-top: 8rem;
  margin-left: 3.6rem;

  max-width: 444px;
  background-color: #d9e1cd;
  /* background-color: #463e3a; */
  border-radius: 20px;
  padding: 2.4rem;
}

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

.hero-enter {
  max-width: 30%;
  font-weight: 900;
  color: #342f2c;
  background-color: #d9e1cd;
  text-shadow: none;
  border-radius: 10px;
  padding: 2.4rem 1.2rem;
}

.container,
.preise-container,
.gallery-container {
  max-width: 144rem;
  margin: auto;
  margin-top: 6rem;
  background-color: #d9e1cd;
}

.gallery-container {
  padding-bottom: 2.4rem;
}

.btn {
  background-color: #463e3a;
  color: #d9e1cd;
  border-radius: 15px;
}

.btn-big,
.btn-mid {
  max-width: fit-content;
  font-size: 4.8rem;
  font-weight: 700;
  padding: 1.2rem 2.4rem;
}

.btn-mid {
  font-size: 3rem;
  font-weight: 400;
}

.eintreten {
  position: fixed;
  bottom: 4.8rem;
  right: 4.8rem;
}

/***********
*
*   MENU
*
*************/

.menu {
  position: fixed;
  top: 0;
  bottom: 0;

  left: 50%;
  transform: translateX(-50%); /* középre igazítás */
  width: 100%;
  max-width: 144rem;
  height: 6rem;
  padding: 0 2.4rem 0 2.4rem;
  /* border-radius: 12px; */
  z-index: 5;

  padding: 1.2rem;
  background-color: #463e3a;
  color: #d9e1cd;
}

.menu-list {
  display: flex;
  justify-content: space-around;
}

.menu-list .nav-open {
  list-style: none;
  display: flex;
  /* grid-template-columns: repeat(5, 1fr); */
  justify-content: center;
  align-content: center;
  height: 5rem;
  align-items: center;
  justify-items: center;
  gap: 3rem;
}

.menu-item-active,
.menu-item {
  font-size: 3rem;
  list-style: none;
  /* text-align: center; */
}

.menu-item-active {
  color: #5a6d3d;
}

.menu-img-box {
  max-height: 39px;
  max-width: 215px;
  background-color: #d9e1cd;
  border-radius: 5px;
  padding: 5px;
  align-content: center;
}

.menu-img {
  max-height: 100%;
  padding: 0 2rem;
}

.mobile-nav-icon {
  position: fixed;
  top: 0.8rem;
  left: 0.8rem;
  height: 4.8rem;
  width: 4.8rem;
  background: none;
  border-radius: 50px;
  display: none;
  font-size: 24px;
  border: none;
  cursor: pointer;
  z-index: 6;
  background-color: #463e3a;
  color: #d9e1cd;
}
.mobile-nav-icon[name="close-circle-outline"] {
  display: none;
}
.nav-open .mobile-nav-icon[name="close-circle-outline"] {
  display: none;
}
.nav-open .mobile-nav-icon[name="list-circle-outline"] {
  display: none;
}

.up-icon {
  width: 4.8rem;
  height: 4.8rem;
  position: fixed;
  right: 16px;
  bottom: 16px;
  visibility: hidden;
  z-index: 4;
  background-color: #463e3a;
  color: #d9e1cd;
  border-radius: 50%;
}
.sticky .up-icon {
  visibility: visible;
}

/****************
*
*   MAIN PAGE   *
*
******************/

.main-layout,
.gallery-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.6rem;
  padding: 3.6rem 7.2rem;
}

.grid-double-width-left {
  grid-column: 1 / 3;
}

.grid-double-width-right {
  grid-column: 2 / 4;
}

.grid-full-width {
  grid-column: 1 / -1;
}

.grid-2-cols {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3-cols {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4-cols {
  grid-template-columns: repeat(4, 1fr);
}

.main-text-box {
  line-height: 1.3;
  padding: 2.4rem 4.8rem;
  background-color: #fff;
  border-radius: 15px;
  text-align: justify;
  /* margin-left: 1.2rem; */
}

.green-contrast {
  background-color: #5a6d3d;
  color: #f2f5ee;
  font-weight: 500;
  font-size: 3.6rem;
}

.green-contrast .hr {
  height: 1px;
  border: 0;
  border-top: 10px solid #463e3a;
  border-radius: 100%;
  margin: auto;
  width: 50rem;
}

.main-text-title,
.main-text-sub-title,
.main-text-title-right {
  color: #463e3a;
  font-size: 4.4rem;
  font-weight: 900;
  margin: 2.4rem 1.2rem;
  max-width: 100%;
}

.main-text-sub-title {
  font-size: 3.6rem;
}

.main-text-title-right {
  text-align: right;
  justify-self: right;
}

.main-text,
.main-text-right {
  color: #463e3a;
  font-size: 2.4rem;
  margin: 4.8rem auto;
}

.main-text-right {
  text-align: right;
  justify-self: right;
  margin-right: 2.4rem;
}

.main-image-box {
  margin: auto;
}

.main-image,
.preise-image {
  border-radius: 15px;
  max-width: 100%;
}

.profile-image {
  border-radius: 15px;
  max-width: 100%;
  max-height: 500px;
}

.main-list {
  margin: 4.8rem 2.4rem;
}

.main-list-item {
  margin: 2.4rem 1.2rem;
  list-style: none;
}

.anbieten {
  background: url("../img/Faguszala-2024_2-800_2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 15px;
  /* font-size: 2.4rem; */
}

.anbieten .main-text-box {
  background-color: rgba(255, 255, 255, 0.1);
  margin: none;
  /* background: none; */
}

.anbieten .main-text-box .main-text-title,
.anbieten .main-text-box .main-text,
.anbieten .main-text-right,
.anbieten .main-text-title-right {
  max-width: fit-content;
  border-radius: 25px;
  padding: 1.2rem 2.4rem;
  background-color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  color: #463e3a;
}

.slides {
  max-width: 99%;
  width: 100%;
  align-content: center;
  margin: 2.4rem 1.2rem;
  background: url("../img/rudli.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 15px;
  /* background-blend-mode: lighten; */
}

.slides .main-text-title {
  margin: auto;
  padding: 2.4rem 1.2rem;
  /* font-size: 6rem; */
  max-width: fit-content;
  border-radius: 25px;
  padding: 1.2rem auto;
  background-color: rgba(255, 255, 255, 0.7);
}

.slides a:active,
.slides a:visited,
.slides a:link {
  color: #809b57;
  transition: all 0.3s;
}

.slides a:hover {
  /* background-color: #809b57; */
  color: #79716d;
}

.slides-box {
  background-color: rgba(255, 255, 255, 0.5);
  background-color: rgb(128, 155, 87, 0.4);
  background-color: rgb(217, 225, 205, 0.3);
  display: flex;
  flex-direction: row;
  vertical-align: middle;
  align-items: center;
  padding: 0 2.4rem;
  border-radius: 15px;
  justify-content: space-evenly;
}

.slides-img-box {
  align-content: center;
  justify-content: center;
  height: 70rem;
  padding: 2.4rem 1.2rem;
}

.slides-img {
  max-width: 100%;
  width: 80rem;
  /* max-height: 100%; */
  height: auto;
  display: block;
  margin: auto;
  align-self: center;
  border-radius: 15px;
  animation-name: fade;
  animation-duration: 3s;
  border: 6px solid #342f2c;
  border-radius: 15px;
}

@keyframes fade {
  from {
    opacity: 0.1;
  }
  to {
    opacity: 1;
  }
}

.prev,
.next {
  max-width: 6.4rem;
  width: 6.4rem;
  max-height: 6.4rem;
  height: 6.4rem;
  padding: 0;
  text-align: center;
}

.footer {
  display: flex;
  justify-content: space-between;
  background-color: #463e3a;
  height: fit-content;
  max-width: 144rem;
  margin: auto;
  padding: 1.2rem 2.4rem;
}

.footer-text {
  font-size: 3rem;
  color: #809b57;
}

/******************
*
*   PREISE PAGE   *
*
*******************/
.preise-container .main-layout {
  row-gap: 6.4rem;
}

.preise-container .main-text-box,
.preise-container .main-text-right {
  font-size: 2.4rem;
}

.preise-container .anbieten .rotwild {
  background-image: url("../img/Faguszala-2024_10-1024-1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 15px;
}

.preise-container .anbieten .rehwild {
  background-image: url("../img/banner-eredeti-képe-1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 15px;
  max-height: 100%;
  height: 100%;
}

.preise-table {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  font-size: 2rem;
  border-style: solid 1px #809b57;
  text-align: center;
}

.preise-cell {
  border: solid 1px #809b57;
  font-size: 2.4rem;
}

.tiles {
  margin: auto;
}

.tiles .main-layout {
  justify-content: space-evenly;
  gap: 0;
}

.kontakt-tile,
.tile {
  text-align: center;
  max-width: 100%;
  width: 100%;
  height: 40rem;
  margin: auto;
  border: solid 2px #463e3a;
  border-radius: 15px;
  background-color: #5a6d3d;
}

.contrast {
  background-color: #342f2c;
  color: #d9e1cd;
  height: 50rem;
}

.kontakt-tile {
  height: 35rem;
}

.kontakt-tile:hover,
.tile:hover {
  transform: translateY(-1.6rem);
  transition-behavior: normal;
  transition-delay: 0;
  transition-duration: 0.5s;
  transition-property: all;
  transition-timing-function: ease;
}

.tile-title {
  font-size: 3.6rem;
  margin: 6.4rem auto;
}

.tile-text {
  font-size: 2.4rem;
  margin: 3.2rem auto;
}

/********************
*                   *
*   GALLERIE PAGE   *
*                   *
********************/
.gallery-layout {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-column {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.gallery-img-box {
  padding: 0.3rem 0.3rem;
  max-width: 100%;
  margin: auto;
}

.gallery-img {
  max-width: 100%;
  border-radius: 15px;
  margin: auto;
}

.gallery-img-box:hover {
  cursor: pointer;
  transform: scale(1.1);
  transition-behavior: normal;
  transition-delay: 0;
  transition-duration: 0.5s;
  transition-property: all;
  transition-timing-function: ease;
}

/***
Images ower the page
***/

.lightbox-container {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  transform: translateX(-100%);
  transition: all, 2s;
  animation-timing-function: ease-in-out;

  align-items: center;
  justify-content: space-evenly;
  max-height: 100vh;
  max-width: 100vw;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgb(70, 62, 58, 0.9);
}

.lightbox {
  display: none;
  /* display: flex; */
  max-height: 95vh;
  max-width: 95vw;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.lightbox-img {
  max-width: 100%;
  padding: 3.2rem;
  margin: auto;
  border-radius: 50px;
  max-width: 92%;
  max-height: 92%;
}

.prev,
.next,
.close {
  cursor: pointer;
  /* position: absolute;
  top: 40%; */
  background-color: #5a6d3d;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 30px;
  /* border-radius: 0 3px 3px 0; */
  border-radius: 8px;
  user-select: none;
  -webkit-user-select: none;
}

.close {
  position: fixed;
  top: 4.8rem;
  /* left: 60rem; */
}

.prev:hover,
.next:hover,
.close:hover {
  background-color: #342f2c;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/*******************
*                  *
*   KONTAKT PAGE   *
*                  *
*******************/

.form-box .main-text {
  margin: 2.4rem auto;
  max-width: 90%;
  width: 90%;
}