@font-face {
  font-family: gistesy;
  src: url(fonts/Gistesy.ttf) format('truetype'); /* Import af håndskrevet font */
}

.hero-container {
  position: relative; /* Så tekst kan placeres ovenpå */
  width: 100%;
  height: 90vh; /* Hero-sektion fylder næsten hele viewport højden */
  background-image: url('images/Gaardbutik.jpg');
  background-size: cover; /* Billedet fylder hele containeren */
  background-position: center; /* Centrering af billedet */
  background-repeat: no-repeat;
}

.hero-image {
  width: 100%;
  height: auto;
  display: block; /* Gør billedet blok-element for bedre layout */
}

.hero-text {
  position: absolute; /* Placering ovenpå hero-container */
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centrerer teksten perfekt */
  color: #fff;
  text-align: center;
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5); /* Gør teksten mere læsbar på billedet */
  padding: 0 1em; /* Lidt luft til siderne */
}

.hero-text h1 {
  font-family: gistesy, sans-serif;
  font-weight: normal;
  font-size: 120px; /* Stor, tydelig overskrift */
  margin: 0;
}

.hero-text p {
  font-size: 28px;
  margin: 0px 0 0;
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5); /* Samme skygge som overskrift */
}

.gaardbutikken-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3em; /* Luft mellem billedet og teksten */
  padding: 4em 2em;
  max-width: 1600px;
  margin: 0 auto; /* Centrerer containeren horisontalt */
  flex-wrap: wrap; /* Gør layout responsivt ved at bryde til næste linje */
}

.gaardbutik-image {
  width: 500px;
  max-width: 100%; /* Sikrer at billedet ikke bliver større end container */
  height: 500px;
  object-fit: cover; /* Bevarer billedets proportioner og beskærer ved behov */
}

.gaardbutik-content {
  max-width: 500px;
  width: 100%; /* Fylder hele bredde på små skærme */
}

.gaardbutik-title {
  font-family: gistesy, sans-serif;
  font-weight: normal;
  text-align: center;
  font-size: 70px;
  color: #000000;
  margin-bottom: 0.5em;
}

.gaardbutik-text {
  font-family: lora, serif; /* En læsevenlig serif font til brødtekst */
  text-align: justify;
  font-size: 16px;
  line-height: 1.6;
  color: #572929;
}

@media screen and (max-width: 768px) {
  .hero-text h1 {
    font-size: 80px; /* Mindre overskrift på små skærme */
  }

  .hero-text p {
    font-size: 24px;
  }

  .gaardbutikken-flex {
    flex-direction: column; /* Skift til lodret layout */
    text-align: justify; /* Justeret tekst for bedre læsbarhed */
    padding: 2em 1em; /* Mindre padding på små skærme */
  }

  .gaardbutik-title {
    font-size: 50px; /* Tilpasset titelstørrelse */
  }

  .gaardbutik-text {
    font-size: 16px;
  }

  .gaardbutik-image {
    width: 100%; /* Billedet fylder bredde på små skærme */
    height: auto; /* Højde tilpasses automatisk */
  }
}