/* Basis */
body {
  margin: 0;
  font-family: 'Cormorant Garamond', sans-serif; /* Klassisk og elegant skrifttype for at matche brandets stil */
  background-color: #FAF8F3; /* Lys baggrund for at skabe en ren og indbydende følelse */
  color: #2b2b2b; /* Mørk tekstfarve for god kontrast og læsbarhed */
}
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant Garamond', serif;
  }
  
  .nav-links a.active {
    position: relative;
    color: #000; /* Fremhæv farven på det aktive link */
    font-weight: bold; /* Gør teksten fed for at fremhæve */
}
.nav-links a {
  font-family: 'Cormorant Garamond', serif; /* Behold skrifttypen for menupunkterne */
}

.nav-links a.active::after {
    content: ""; /* Tilføjer en streg under teksten */
    position: absolute;
    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; /* Farven på stregen */
}
p, li {
  font-family: 'Mulish', sans-serif; /* Sikrer Mulish på brødtekst */
  font-size: 1rem; /* Standard tekststørrelse */
  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 */
  .hero {
    position: relative; /* Gør det muligt at placere tekst oven på billedet */
    width: 100%; /* Sikrer, at hero-sektionen fylder hele bredden af skærmen */
    height: 500px; /* Giver hero-sektionen en fast højde for konsistens */
    overflow: hidden; /* Skjuler eventuelle dele af billedet, der går uden for containeren */
    margin-bottom: 60px; /* Tilføjer afstand under hero-sektionen for at adskille den fra resten af indholdet */
  }
  
  .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-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Tilføjer en skygge for bedre læsbarhed */
    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: 3rem; /* Standard fontstørrelse */
    font-weight: bold; /* Gør teksten mere fremtrædende */
    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 */
}
.kontakt-overskrift {
    text-align: center; /* Centrerer overskriften horisontalt */
    margin: 40px 0; /* Tilføjer afstand over og under overskriften */
}

.kontakt-overskrift h2 {
    font-family: 'Cormorant Garamond', serif; /* Matcher skrifttypen */
    font-size: 3rem; /* Gør overskriften større */
    font-weight: bold; /* Gør teksten fed */
    color: #2b2b2b; /* Matcher tekstfarven */
}
@media (max-width: 768px) {
    .hero-text h1.mobile-text {
        display: block; /* Vis mobilteksten på mindre skærme */
        font-size: 2rem; /* 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 */
    }
    .hero-text h1.desktop-text {
        display: none; /* Skjul desktopteksten på mindre skærme */
    }
    .hero {
        margin-bottom: 20px; /* Mindre afstand på små skærme */
    }
        .kontakt-container {
          flex-direction: column;
          padding: 0 20px; /* Reducer padding på små skærme */
        }
      
        .kontakt-form,
        .kontakt-map {
          flex: none;
          width: 100%;
        }
        .kontakt-overskrift h2 {
            font-size: 2rem; /* Reducer størrelsen på mindre skærme */
        }
      }
/* Kontakt sektion */
.kontakt-container {
    display: flex;
    gap: 60px; /* Øg afstanden mellem formularen og kortet */
    margin-top: 60px; /* Øg afstanden over kontaktsektionen */
    margin-bottom: 60px; /* Tilføj afstand under kontaktsektionen */
    padding: 0 40px; /* Tilføj padding til højre og venstre for indholdet */
    max-width: 1200px; /* Begræns bredden af indholdet */
    margin-left: auto; /* Centrer indholdet */
    margin-right: auto; /* Centrer indholdet */

  }
  
  .kontakt-form {
    flex: 1; /* Gør formularen fleksibel, så den fylder halvdelen af containeren */
  }
  
  .kontakt-form form {
    display: flex; /* Brug flexbox for nem justering af felter */
    flex-direction: column; /* Stabler felterne vertikalt */
    gap: 20px; /* Tilføjer afstand mellem felterne for bedre læsbarhed */
  }
  
  .kontakt-form input,
  .kontakt-form select,
  .kontakt-form textarea {
    width: 100%; /* Sørger for, at felterne fylder hele bredden af formularen */
    padding: 10px; /* Tilføjer indvendig afstand for bedre brugervenlighed */
    font-size: 1rem; /* Standard tekststørrelse for god læsbarhed */
    border: 1px solid #C2A476; /* Tilføjer en subtil kant for at matche designet */
    border-radius: 5px; /* Afrundede hjørner for et moderne udseende */
  }
  
  .kontakt-form textarea {
    height: 150px; /* Giver tekstområdet en passende højde */
    resize: none; /* Forhindrer brugeren i at ændre størrelsen på tekstområdet */
  }
  
  .send-knap {
    background-color: #C2A476; /* Brug en varm farve for at gøre knappen iøjnefaldende */
    color: rgb(12, 10, 10); /* Mørk tekstfarve for god kontrast */
    border: none; /* Fjern standard kant for et rent udseende */
    padding: 10px 20px; /* Tilføjer indvendig afstand for bedre klikområde */
    font-size: 1rem; /* Standard tekststørrelse for god læsbarhed */
    cursor: pointer; /* Gør det tydeligt, at knappen er klikbar */
    border-radius: 0px; /* Beholder et skarpt og minimalistisk design */
  }
  
  .send-knap:hover {
    background-color: #A88A63; /* Ændrer farven ved hover for at indikere interaktivitet */
  }
  
  /* Google Maps */
  .kontakt-map {
    flex: 1;
  }
  
  .kontakt-map iframe {
    width: 100%; /* Sørger for, at kortet fylder hele bredden af containeren */
    height: 400px; /* Giver kortet en passende højde */
    border: none; /* Fjern kantlinjer for et rent udseende */
  }