/* Basis */
/* Standardindstillinger for hele siden */
body {
  margin: 0; /* Fjern standard margin for at sikre, at indholdet starter fra kanten */
  font-family: 'Cormorant Garamond', sans-serif; /* Klassisk skrifttype for at matche brandets stil */
  background-color: #FAF8F3; /* Lys baggrund for en ren og indbydende følelse */
  color: #2b2b2b; /* Mørk tekstfarve for god kontrast og læsbarhed */
}
 /* Overskrifter */
/* Ensartet skrifttype og stil for alle overskrifter */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', serif; /* Klassisk skrifttype for overskrifter */
}
 /* Navigation Links */
/* Styling for aktive links i navigationen */
.nav-links a.active {
  position: relative; /* Gør det muligt at tilføje en streg under teksten */
  color: #000; /* Fremhæv farven på det aktive link */
  font-weight: bold; /* Gør teksten fed for at fremhæve */
}

/* Tilføj en streg under det aktive link */
.nav-links a.active::after {
  content: ""; /* Tilføjer en dekorativ streg */
  position: absolute; /* Placerer stregen relativt til teksten */
  bottom: -5px; /* Placerer stregen lige under teksten */
  left: 0;
  width: 100%; /* Stregen fylder hele bredden af teksten */
  height: 0.5px; /* Tykkelsen af stregen */
  background-color: #000; /* Sort farve for stregen */
}

/* Standard styling for navigation links */
.nav-links a {
  font-family: 'Cormorant Garamond', serif; /* Behold skrifttypen for menupunkterne */
}
/* Brødtekst */
/* Styling for almindelig tekst og lister */
p, li {
  font-family: 'Mulish', sans-serif; /* Moderne skrifttype for brødtekst */
  font-size: 1rem; /* Standard tekststørrelse for god læsbarhed */
  margin-bottom: 1rem; /* Tilføjer afstand mellem tekstblokke */
}
/* Logo */
/* Standard: Vis kun det store logo */
.logo-desktop {
    display: block; /* Vis det store logo */
  }
  
  .logo-mobile {
    display: none; /* Skjul det lille logo */
  }
  
  /* På mindre skærme: Vis kun det lille logo */
  @media (max-width: 768px) {
    .logo-desktop {
      display: none; /* Skjul det store logo */
    }
  
    .logo-mobile {
      display: block; /* Vis det lille logo */
    }
  }
  /* Hero Sektion */
/* Styling for hero-billedet og teksten */
.hero {
  position: relative; /* Gør det muligt at placere tekst oven på billedet */
  width: 100%; /* Sørger for, at hero-sektionen fylder hele bredden af skærmen */
  height: 500px; /* Fast højde for konsistens */
  overflow: hidden; /* Skjuler eventuelle dele af billedet, der går uden for containeren */
  margin-bottom: 40px; /* Tilføjer afstand under hero-sektionen */
}

.hero-image {
  width: 100%; /* Sørger for, at billedet fylder hele bredden af hero-sektionen */
  height: 100%; /* Sørger for, at billedet fylder hele højden af hero-sektionen */
  object-fit: cover; /* Bevarer billedets proportioner og beskærer det for at fylde containeren */
}

.hero-text {
  position: absolute; /* Placerer teksten oven på billedet */
  top: 50%; /* Centrerer teksten vertikalt */
  left: 50%; /* Centrerer teksten horisontalt */
  transform: translate(-50%, -50%); /* Justerer teksten, så den er præcist centreret */
  color: #FFECCE; /* Lys tekstfarve for at skabe kontrast mod baggrunden */
  text-align: center; /* Centrerer teksten horisontalt */
  font-size: 2rem; /* Gør teksten stor nok til at være iøjnefaldende */
  font-weight: bold; /* Gør teksten mere fremtrædende */
}
  
  .hero-text h1 {
    font-size: 2rem; /* Standard fontstørrelse */
    text-align: center;
    margin: 0;
}

.hero-text h1.mobile-text {
    display: none; /* Skjul mobilteksten som standard */
}

.hero-text h1.desktop-text {
    display: block; /* Vis desktopteksten som standard */

}
@media (max-width: 768px) {
    .hero-text h1.mobile-text {
        display: block; /* Vis mobilteksten på mindre skærme */
        font-size: 3rem; /* Mindre fontstørrelse til mobil */
    }

    .hero-text h1.desktop-text {
        display: none; /* Skjul desktopteksten på mindre skærme */
    }
    .hero {
        height: 300px; /* Reducer højden på mindre skærme */
        margin-bottom: 20px; /* Mindre afstand på små skærme */
    }
  
    .naturlig-aroma {
        margin: 40px 0; /* Reducer marginen på mindre skærme */
    }

}
  
  /* Naturlig Aroma Sektion */
/* Styling for sektionen med naturlige aromaer */
.naturlig-aroma {
  text-align: center; /* Centrerer teksten og indholdet */
  margin: 100px 0; /* Tilføjer afstand over og under sektionen */
}

.naturlig-aroma h2 {
  font-size: 2rem; /* Gør overskriften fremtrædende */
  margin-bottom: 20px; /* Tilføjer afstand under overskriften */
}

.aroma-billeder {
  display: grid; /* Brug grid-layout til at arrangere billederne */
  grid-template-columns: repeat(3, 1fr); /* Tre kolonner med lige stor bredde */
  gap: 20px; /* Tilføjer afstand mellem billederne */
}

.aroma-billeder img {
  width: 100%; /* Sørger for, at billederne fylder hele kolonnen */
  height: auto; /* Bevarer billedets proportioner */
  border-radius: 0px; /* Ingen afrundede hjørner */
}
  
  /* Mere End Vin Sektion */
/* Styling for sektionen med vinikoner og tekst */
.mere-end-vin {
  display: flex; /* Brug flexbox til at arrangere ikoner og tekst side om side */
  gap: 40px; /* Tilføjer afstand mellem ikoner og tekst */
  margin: 40px 0; /* Tilføjer afstand over og under sektionen */
}
  
.vin-ikoner {
  display: grid; /* Brug grid-layout til at arrangere ikonerne */
  grid-template-columns: repeat(2, 1fr); /* To kolonner med lige stor bredde */
  gap: 20px; /* Tilføjer afstand mellem ikonerne */
  flex: 1; /* Gør ikonerne fleksible */
}
  
  .vin-ikoner .ikon {
    text-align: center;
  }
  
  .vin-ikoner img {
    width: 150px; /* Fast bredde for ikonerne */
    height: auto; /* Bevarer billedets proportioner */
}

.vin-tekst {
    flex: 2; /* Gør teksten dobbelt så bred som ikonerne */
    text-align: left; /* Sørger for, at teksten er venstrejusteret */
    max-width: 600px; /* Begræns bredden for at samle teksten */
    margin: 0 auto; /* Centrer teksten, hvis det er nødvendigt */
}
  
  
  .vin-tekst h2 {
    font-size: 2rem;
    margin-bottom: 20px;
  }
  
  .vin-tekst h3 {
    font-size: 1.5rem;
    margin-top: 20px;
  }
  
  .vin-tekst p {
    line-height: 1.6;
    margin-bottom: 20px;
  }
  
  .se-mere-knap {
    background-color: #C2A476;
    color: rgb(19, 18, 18);
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 0px;
  }
  
  .se-mere-knap:hover {
    background-color: #A88A63;
  }
  /* Responsiv Design */
/* Tilpas layoutet til mindre skærme */
@media (max-width: 768px) {
  .hero {
      height: 300px; /* Reducer højden på hero-sektionen for at spare plads */
      margin-bottom: 20px; /* Mindre afstand under hero-sektionen */
  }

  .aroma-billeder {
      grid-template-columns: repeat(2, 1fr); /* Reducer til to kolonner på mindre skærme */
  }

  .mere-end-vin {
      flex-direction: column; /* Stak ikoner og tekst vertikalt */
  }

  .vin-tekst {
      text-align: center; /* Centrer teksten på mindre skærme */
  }

  .vin-ikoner {
      grid-template-columns: repeat(1, 1fr); /* Reducer til én kolonne på mindre skærme */
  }
}