/* ****************** */
/* HEADER SECTION */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4.8rem;

  /* Sticky */
  height: 9.6rem;
  padding: 0 4.8rem;
  position: relative;
}

.header img {
  width: 10rem;
  filter: brightness(0);
  opacity: 80%;
}

.main-nav-list {
  display: flex;
  gap: 1.2rem;
  list-style: none;
}

.main-nav {
  z-index: 10000;
}

.main-nav-link:link,
.main-nav-link:visited {
  text-decoration: none;
  padding: 0.8rem 2.4rem;
  border-radius: 2px;
  font-size: 1.6rem;
  transition: all 0.3s;
  color: #333;
  font-weight: 600;
}

.main-nav-link:active,
.main-nav-link:hover {
  /* color: #1b6f1b; */
  color: #874400;
}

.main-nav-link.nav-cta:link,
.main-nav-link.nav-cta:visited {
  /* background-color: #4ea24e; */
  background-color: #a15d1a;
  color: #fff;
}

.main-nav-link.nav-cta:active,
.main-nav-link.nav-cta:hover {
  /* background-color: #228b22; */
  background-color: #964b00;
  color: #fff;
}

/* STICKY NAVIGATION */

.sticky .header {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 8rem;
  padding-top: 0;
  padding-bottom: 0;
  background: linear-gradient(to top, #f5ede6bd, #c09366);
  z-index: 999;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);
}

.sticky .section-hero {
  margin-top: 9.6rem;
}

/* MOBILE MENU */

.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;
}

/* ****************** */
/* HERO SECTION */

.section-hero {
  /* background-color: #d1e7d1; */
  /* background: linear-gradient(to bottom right, #e1f0e1, #a4d0a4); */
  /* background-color: #d1e7d1; */
  background: linear-gradient(to bottom right, #f5ede6, #c09366);
  padding: 4.8rem 0 9.6rem 0;
  box-shadow: 0 2.5rem 2.5rem -2rem rgba(0, 0, 0, 0.2);
  margin-bottom: 12.8rem;
}

.hero {
  max-width: 140rem;
  margin: 0 auto;
  padding: 0 3.2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9.6rem;
  align-items: center;
}

.hero-image-box {
  overflow: hidden;
}

.hero-image-box img {
  width: 100%;
  transition: all 2s;
}

.hero-image-box img:hover {
  transform: scale(1.03);
}

.hero-quote {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.2rem;
  padding: 0.8rem;
  margin-bottom: 3.2rem;
  background-color: #ffffff41;
  border-radius: 2px;
  opacity: 70%;
  transition: all 0.3s;
  width: 100%;
}

.hero-quote:hover {
  background-color: #ffffff7e;
  opacity: 100%;
  transform: scale(1.1);
}

.hero-quote-img {
  width: 10%;
  border-radius: 2px;
}

.hero-quote-text {
  font-size: 1.4rem;
  font-weight: 200;
  font-style: italic;
  line-height: 1.2;
  color: #444;
}

.buttons {
  display: flex;
  gap: 1.6rem;
}
.btn,
.btn:link,
.btn:visited {
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 1.6rem 3.2rem;
  border-radius: 2px;
  transition: background-color 0.3s;
}

.btn--summer:link,
.btn--summer:visited {
  /* background-color: #4ea24e; */
  background-color: #a15d1a;
  color: #fff;
}

.btn--summer:active,
.btn--summer:hover {
  /* background-color: #228b22; */
  background-color: #964b00;
}

.btn--winter:link,
.btn--winter:visited {
  /* background-color: #e1f0e1; */
  background-color: #f5ede6;
  color: #444;
}

.btn--winter:active,
.btn--winter:hover {
  background-color: #fff;
  color: #333;
}

/* ****************** */
/* LEGENDS SECTION */

.section-legends {
  margin-bottom: 9.6rem;
}

.section-legends-introduction {
  margin-top: 3.2rem;
  margin-bottom: 9.6rem;
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  align-items: center;
}

.legends-container {
  padding: 2rem;
  /* background: linear-gradient(to right, #fff, #e1f0e138); */
  /* background: linear-gradient(to right, #fff, #f5ede638);
  border-radius: 2px 200px 400px 0px; */
}

.legends-box {
  max-width: 90rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 6.4rem;
  margin-bottom: 8rem;
  /* align-items: center; */
  transition: opacity 1s, transform 1s, filter 1s;
}

.legends-text-box {
  padding: 2rem;
  border-top: 2px solid #964b00;
  border-radius: 2px;
}

.legend-image {
  align-self: start;
  overflow: hidden;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
}

.legends-img {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  transition: all 2s;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
}

.legends-img:hover {
  transform: scale(1.03);
}

/* ****************** */
/* SUMMER SECTION */

.section-time-summer {
  position: relative;
  margin-bottom: 9.6rem;
}

.section-time-summer:after {
  content: "";
  background-image: url("/img/summer-background.webp");
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.7;
  filter: brightness(80%) blur(0.2rem);
  background-size: cover;
}

.summer-heading {
  color: #3c1e00;
}

/* ****************** */
/* TRIVIA SECTION */

.section-trivia {
  margin-bottom: 12.8rem;
}

.section-trivia-introduction {
  padding: 4.8rem;
  text-align: start;
}
.section-trivia-introduction h2 {
  margin-bottom: 3.2rem;
}

.trivia-box {
  padding: 3.2rem;
  display: flex;
  gap: 4.8rem;
}

.trivia-box-text {
  padding: 3.2rem;
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
  justify-content: space-between;
  position: relative;
}
.trivia-icon {
  width: 2.4rem !important;
  height: 2.4rem !important;
  color: #874400;
  background-color: #f5ede6;
  border-radius: 2px 2px 2px 50%;
  padding: 1.2rem;
}

.trivia-box-img {
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  width: 60%;
  height: 60%;
  border-radius: 2px;
}

.trivia-img {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
  transition: all 2s;
  opacity: 0.9;
}

.trivia-img:hover {
  transform: scale(1.03);
  opacity: 1;
}

.trivia-link:link,
.trivia-link:visited {
  width: 50%;
  text-decoration: none;
  color: #e0c9b3;
  font-size: 1.6rem;
  transition: all 0.3s;
  padding: 1.2rem 2.4rem;
}

.trivia-link:hover,
.trivia-link:active {
  color: #874400;
}

/* ****************** */
/* WINTER SECTION */

.section-time-winter {
  position: relative;
  margin-bottom: 9.6rem;
}

.section-time-winter:after {
  content: "";
  background-image: url("https://images.unsplash.com/photo-1553205050-36a7dc97c220?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2138&q=80");
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.7;
  filter: brightness(80%) blur(0.2rem);
  background-size: cover;
}

.winter-heading {
  color: #317dae;
}

/* ****************** */
/* MORE SECTION */

.section-more {
  margin-bottom: 9.6rem;
}

.section-more-content {
  padding: 4.8rem;
}

.more-box {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4.8rem;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  background: linear-gradient(to bottom right, #f5ede6, #c09366);
  overflow: hidden;
}

.more-img-box {
  background-image: linear-gradient(
      to bottom right,
      rgba(245, 237, 230, 0.342),
      rgba(192, 147, 102, 0.356)
    ),
    url("/img/more.webp");
  background-size: cover;
  background-position: center;
}

.more-text-box {
  padding: 3.2rem;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.more-text {
  font-size: 1.6rem;
  line-height: 1.05;
}

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

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

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

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

.btn--form {
  cursor: pointer;
  border: none;
  font-size: 1.8rem;
  align-self: end;
  padding: 1.8rem;
  background-color: #964b00;
  color: #fff;
  letter-spacing: -0.5px;
  text-transform: none;
}
.btn--form:hover {
  background-color: #874400;
}

.more *: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;
}

.footer-box {
  display: grid;
  grid-template-columns: 25fr 25fr 25fr 25fr;
  gap: 4.8rem;
}

.logo-col {
  grid-column: 2/3;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.footer img {
  width: 50%;
  border: 1px solid rgba(135, 67, 0, 0.267);
  border-radius: 2px;
}
.footer-icon {
  height: 3.2rem;
  width: 3.2rem;
  color: #964b00;
}

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

.footer-icon:hover,
.footer-icon:active {
  color: #a15d1a;
}

.adress-col,
.contacts {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.footer-heading {
  font-size: 1.8rem;
  font-weight: 500;
  padding-bottom: 1.2rem;
}
.footer-link:link,
.footer-link:visited {
  text-decoration: none;
  font-size: 1.6rem;
  color: #777;
}

.copyright {
  grid-row: 2 / 3;
  grid-column: 2 / 4;
  font-size: 1.2rem;
  justify-self: center;
}