/*

--- 01 TYPOGRAPHY SYSTEM

- Font family: Montserrat, Lora

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

- Font weights
Deafult: 
Medium: 
Semi-bold: 
Bold: 

- Line heigts:
Default: 
Small: 
Medium: 
Paragraph-default: 
Large: 

- Letter spacing


--- 02 COLORS

- Primary: #fbf6f0, #4a2c2a, #B87333, #355e3b 
- Tints: 
- 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: 62.5%;
  scroll-behavior: smooth;
}

body {
  background-color: #fbf6f0;
  font-family: "Lora", serif;
}

header,
footer {
  max-width: 100%;
}

.container {
  max-width: 130rem;
  margin: 16.1em auto 0 auto;
}

/************
*           *
*   Fonts   *
*           *
************/

.lora {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

h1 {
  font-family: "Montserrat", sans-serif;
  color: #3c1e14;
  font-size: 3.6rem;
  text-align: center;
  margin: auto;
  padding: 1.2rem 2.4rem;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  opacity: 0;
  letter-spacing: 0.15em; /* Adjust as needed */
  animation: typing 2.5s steps(33, end) 1s forwards;
}

/* The typing effect */
@keyframes typing {
  0% {
    width: 0;
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 1;
  }
}

h2,
h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 3rem;
  font-weight: 600;
  margin: 1.2rem auto;
  border-radius: 15px;
  padding: 1.2rem 2.4rem;
  text-align: center;
  width: 50%;
}

h2 {
  color: #355e3b;
  color: #ead5c2;
  background-color: #b87333;
}

.green-text {
  color: #355e3b;
}

h3 {
  font-size: 3rem;
  padding: 0.8rem 1.6rem;
  width: 40%;
  margin: 1.2rem auto;
  max-width: 90%;
  width: 90%;
  color: #3c1e14;
}

h4 {
  font-size: 2.4rem;
  text-align: center;
  margin: 2.4rem auto 2.4rem auto;
  max-width: 80%;
  letter-spacing: 1.5px;
  line-height: 1.5;
  color: #3c1e14;
  color: #ead5c2;
}

/*******************
*                  *
*   Top menu bar   *
*                  *
*******************/

.logo-img-box {
  display: flex;
  background-color: #fbf6f0;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  animation: move 1s ease-out forwards;
  animation-delay: 0.3s;
  align-content: center;
  z-index: 9999;
}

.logo-img {
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: auto;
}

@keyframes move {
  to {
    width: 26rem;
    height: 8rem;
    left: 50%;
    transform: translateX(-50%);
    /* top: 8rem; */
    /* left: 2.4rem; */
    /* padding: 0 2.4rem; */
  }
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;
  height: 8rem;
  padding: 0 2.4rem 0 2.4rem;
  margin: 0 auto;
  background-color: #fbf6f0;
  /* border-radius: 12px; */
  z-index: 5;
}

.menu-list {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8rem;
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
  height: 8rem;
  max-width: 130rem;
  width: 100%;
  /* background-color: #fff; */
  /* -webkit-backdrop-filter: blur(20px); */
  backdrop-filter: blur(50px);
  padding: 1.2rem 2.4rem;
  border-radius: 15px;
}

.menu-list .nav-open {
  list-style: none;
  justify-content: center;
  align-content: center;
  height: 5rem;
  gap: 3rem;
}

.menu-item {
  font-family: "Montserrat", sans-serif;
  font-size: 2rem;
  font-weight: 500;
  background-color: #b87333;
  margin: auto;
  border-radius: 15px;
  padding: 1.2rem;
  text-align: center;
  transition: all 0.3s ease-out;
}

.menu-item:hover {
  transform: scale(1.15);
}

.menu-list a:link,
.menu-list a:active,
.menu-list a:hover,
.menu-list a:visited {
  text-decoration: none;
  color: #ead5c2;
}

.cta {
  background-color: #355e3b;
  color: #ead5c2;
  background-color: #4a2c2a;
  color: #aebfb1;
}

/* .cta a:link,
.cta a:hover,
.cta a:active,
.cta a:visited {
  color: #b87333;
} */

.mobile-nav-icon {
  display: none;
  position: fixed;
  top: 0.8rem;
  left: 0.8rem;
  height: 4.8rem;
  width: 4.8rem;
  border-radius: 50px;
  font-size: 24px;
  border: none;
  cursor: pointer;
  z-index: 6;
  background-color: #b87333;
  color: #ead5c2;
}
.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: 56px;
  visibility: hidden;
  z-index: 4;
  background-color: #b87333;
  color: #ead5c2;
  border-radius: 50%;
}
.sticky .up-icon {
  visibility: visible;
}

/*******************
*                  *
*   HERO section   *
*                  *
*******************/
.hero {
  max-width: 100%;
  width: 100%;
  /* height: 95vh; */
  min-height: 56rem;
  height: calc(100vh - 160px);
  padding: 4.8rem 2.4rem;
  border-radius: 15px;
  background-color: #f7f0e2;
}

.hero-box {
  display: flex;
  flex-direction: column;
  margin: auto;
  height: 100%;
}

.hero-flex {
  display: flex;
  gap: 3.6rem;
  margin-bottom: 2.4rem;
}

.hero-img {
  transform: translateY(-200vh);
  max-width: 50%;
  border-radius: 15px;
  animation: move-hero-img 1s ease-out 2.5s forwards;
}

@keyframes move-hero-img {
  0% {
    transform: translateY(-200vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.hero-text-box {
  transform: scale(0);
  margin: auto;
  animation: move-hero-text-box 1s ease-out 3.5s forwards;
}

@keyframes move-hero-text-box {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.hero-title {
  min-height: 4.8rem;
}
.hero-text {
  color: #3c1e14;
  font-size: 3rem;
  text-align: center;
  margin: auto;
  padding: 1.2rem 2.4rem;
}

/******************************
*                             *
*   Common section elements   *
*                             *
******************************/

.section-content {
  /* display: flex; */
  /* gap: 4.8rem; */
  margin: auto 2.4rem auto 2.4rem;
  justify-content: space-around;
  max-width: 130rem;
}

.content-box {
  max-width: 130rem;
  margin: auto;
}

.section-text {
  /* font-family: "Montserrat", sans-serif; */
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: 1.5px;
  padding: 1.2rem;
  /* max-width: 50vw; */
  text-align: justify;
  line-height: 1.5;
  color: #3c1e14;
}

.img-box {
  display: flex;
  align-items: center;
  padding: 1.2rem 2.4rem;
  width: 100%;
  height: fit-content;
}

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

.img-left,
.img-profile {
  margin: 3.6rem;
  float: left;
  display: block;
  max-width: 25%;
  /* height: auto; */
  border-radius: 15px;
  margin-right: 3.6rem;
}

.img-left {
  aspect-ratio: 1 / 1;
  max-width: 50%;
}

.img-profile {
  margin-top: 0;
}

/***************************
*                          *
*   Introduction section   *
*                          *
***************************/

.intro-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  background-color: #355e3b;
  width: 100vw;
  min-height: 100vh;
  /* height: calc(100vh - 160px); */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding-top: 16rem;
}

.intro-section .section-text {
  margin-top: 4.8rem;
  color: #ead5c2;
}

/************************
*                       *
*   Technichs section   *
*                       *
************************/

.technichs-section {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 2.4rem;
  background-color: #f7f0e2;
  grid-template-columns: repeat(2, 1fr);
  /* padding-top: 16rem; */
  padding: 16rem 1.2rem 1.2rem 1.2rem;
  margin: auto 2.4rem auto 2.4rem;
  min-height: 100vh;
}

.technichs-section h2,
.technichs-section h3 {
  grid-column: 1 / -1;
  /* margin-top: 0; */
}

.technichs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.6rem;
  /* margin-bottom: 2.4rem; */
  /* margin: auto 2.4rem auto 2.4rem; */
}

.technics-icon {
  font-size: 3.6rem;
  color: #355e3b;
}

/*************************
*                        *
*   Advantages section   *
*                        *
*************************/
.advantages-section {
  display: grid;
  gap: 2.4rem;
  background-color: #f7f0e2;
  background-color: #355e3b;
  grid-template-columns: repeat(2, 1fr);
  /* padding-top: 16rem;
  padding-left: 1.2rem;
  padding-right: 1.2rem; */
  min-height: 100vh;
  padding: 16rem 1.2rem 1.2rem 1.2rem;
  margin: auto 2.4rem auto 2.4rem;
}

.advantages-section h2,
.advantages-section h3 {
  grid-column: 1 / -1;
  width: 75%;
}

.advantages-section .section-text {
  color: #ead5c2;
}

.advantage-icon {
  font-size: 3.6rem;
  color: #3c1e14;
  color: #ead5c2;
}

/**********************
*                     *
*   Process section   *
*                     *
**********************/

.process-section {
  /* padding-top: 16rem; */
  padding: 16rem 1.2rem 1.2rem 1.2rem;
  margin: auto 2.4rem auto 2.4rem;
  min-height: 100vh;
  background-color: #f7f0e2;
}

.process-section h3 {
  max-width: 90%;
  width: 90%;
}

.process-map {
  padding: 2.4rem 2.4rem;
  display: grid;
  /* grid-template-columns: 1fr 1fr 1fr; */
  gap: 5em;
  align-items: center;
  justify-items: center;
}

.process-cell {
  opacity: 0;
  transform: scale(0.1);
  transition: all 1s ease-out;
}

.process-cell::after {
  content: "";
  position: absolute;
  width: 2rem;
  height: 2rem;
  border-right: 4px solid #3c1e14;
  border-bottom: 4px solid #3c1e14;
  transform: rotate(-45deg);
  right: -3rem;
  top: 50%;
  transform-origin: center;
}

/* utolsó elemnél ne jelenjen meg */
.process-cell:last-child::after {
  content: none;
}

.process-cell:nth-child(1) {
  transition-delay: 0s;
  grid-area: s1;
}

.process-cell:nth-child(2) {
  transition-delay: 1s;
  grid-area: s2;
}

.process-cell:nth-child(3) {
  transition-delay: 2s;
  grid-area: s3;
}

.process-cell:nth-child(4) {
  transition-delay: 3s;
  grid-area: s4;
}

.process-cell:nth-child(5) {
  transition-delay: 4s;
  grid-area: s5;
}

.process-cell:nth-child(6) {
  transition-delay: 5s;
  grid-area: s6;
}

.process-cell:nth-child(7) {
  transition-delay: 6s;
  grid-area: s7;
}

.process-cell:nth-child(8) {
  transition-delay: 7s;
  grid-area: s8;
}

.process-cell:nth-child(9) {
  transition-delay: 8s;
  grid-area: s9;
}

.process-cell.show {
  opacity: 1;
  transform: scale(1);
}

.process-stage {
  border: 1px solid #3c1e14;
  width: fit-content;
  /* max-width: 40em; */
}

.process-stage:hover {
  transform: scale(1.05);
}

.process-stage-title {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: space-around;
  height: 12rem;
  font-family: "Montserrat", sans-serif;
  border-bottom: 1px solid #3c1e14;
  font-size: 2rem;
  font-weight: 600;
  background-color: #4a2c2a;
  background-color: #b87333;
  margin: auto;
  padding: 1.2rem;
  color: #3c1e14;
}

.process-stage-text {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 13rem;
  margin: 1.2rem;
  font-size: 1.6rem;
  text-align: center;
  color: #3c1e14;
}

/*************************
*                        *
*   References section   *
*                        *
*************************/
.references-section {
  /* padding-top: 16rem; */
  /* padding-bottom: 3.6rem; */
  padding: 16rem 1.2rem 1.2rem 1.2rem;
  margin: auto 2.4rem auto 2.4rem;
  background-color: #355e3b;
  /* display: grid; */
  /* row-gap: 4.8rem; */
  /* grid-template-columns: repeat(3, 1fr); */
  min-height: 100vh;
}

.references-section h2,
.references-section h3 {
  grid-column: 1 / -1;
  color: #ead5c2;
}

.references-section h3 {
  margin-bottom: 9.6rem;
}

.references-section .section-text {
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #ead5c2;
}

.references-section a:link,
.references-section a:active,
.references-section a:hover,
.references-section a:visited {
  text-decoration: none;
  color: #b87333;
}

.reference-row-img-left {
  display: grid;
  grid-template-columns: 2fr 1fr;
  /* margin-top: 9.6rem; */
  margin: 9.6rem 3.6rem 3.6rem 3.6rem;
  /* height: 90vh; */
  vertical-align: middle;
  transition: all 0.5s ease-out;
}

.reference-row-img-right {
  display: grid;
  grid-template-columns: 1fr 2fr;
  /* margin-top: 9.6rem; */
  margin: 9.6rem 3.6rem 3.6rem 3.6rem;
  /* height: 90vh; */
  vertical-align: middle;
  transition: all 0.3s ease-out;
}

.reference-row-img-left:hover,
.reference-row-img-right:hover {
  transform: scale(1.1);
}

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

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

.references-icon {
  font-size: 4.8rem;
  color: #b87333;
  color: #ead5c2;
}

/* .references-section.img-box {
  height: fit-content;
} */

/**********************
*                     *
*   Contact section   *
*                     *
**********************/
.contact-section {
  display: flex;
  flex-direction: column;
  background-color: #f7f0e2;
  /* padding-top: 16rem; */
  padding: 16rem 1.2rem 1.2rem 1.2rem;
  margin: auto 2.4rem auto 2.4rem;
}

.contact-section h4 {
  color: #3c1e14;
}

.map-box {
  width: 80%;
  /* height: fit-content; */
  aspect-ratio: 60 / 50;
  position: relative;
  margin: auto;
}

.map-box iframe {
  /* position: absolute;
  top: 0;
  left: 0; */
  display: flex;
  width: 100%;
  height: 90%;
  border: 0;
  margin-top: 2.4rem;
  margin-left: auto;
  margin-right: auto;
}

.form-box {
  display: flex;
  flex-direction: column;
  margin: 3.6rem auto;
}

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

.form-button {
  width: 36rem;
  margin: auto;
  font-size: 2.4rem;
  padding: 0.8rem;
  color: #3c1e14;
}

.contact-section h3 a:link,
.contact-section h3 a:active,
.contact-section h3 a:hover,
.contact-section h3 a:visited {
  text-decoration: none;
  color: #3c1e14;
}

/*************
*            *
*   FOOTER   *
*            *
*************/
.footer {
  display: flex;
  background-color: #355e3b;
  color: #b87333;
  justify-content: space-between;
  padding: 1.2rem;
}

.footer-text {
  font-family: "Montserrat", sans-serif;
  font-size: 2rem;
  letter-spacing: 1.5px;
  font-weight: 700;
}

.footer-text a:link,
.footer-text a:active,
.footer-text a:hover,
.footer-text a:visited {
  text-decoration: none;
  color: #b87333;
}