/* forside.css */

/* Generelle stilarter */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Main image sektion */

.sektion1 {
    position: relative; 
    height: 90vh; /* Gør sektionen fuld højde */;
    display: flex;
    position: relative;
    align-items: center; /* Centrerer indholdet vertikalt */
    justify-content: center; /* Centrerer indholdet horisontalt */
    overflow: hidden;

} 

.overlay {
    position: absolute; /* Gør at billedet kan placeres bag teksten */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Skjuler eventuelle overflødige dele af billedet */
    background-color: rgba(0, 0, 0, 0.4); /* lys grå med let gennemsigtighed */
    z-index: 1; /* Sørger for at containeren er ovenpå baggrundsbilledet */
    pointer-events: none; /* Gør at overlayet ikke forstyrrer klik på knapper */

}

.image-container,
.sektion1-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Sørger for at billedet er bag teksten */
}

.sektion1-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Sørger for, at billedet dækker hele området */
    display: block; /* Fjerner eventuelle mellemrum under billedet */
}

.container-sektion1 {
    left: 0%; /* Justerer containeren til venstre */
    display: flex;
    flex-direction: column; /* Gør containeren til en kolonne */
    
    align-items: center; 
    justify-content: center; /* Centrerer indholdet vertikalt */
    align-self: stretch; /* Gør at containeren strækker sig over hele bredden */
    padding: 112px 120px;/* Tilføjer luft i top og højre */
    z-index: 2; /* Sørger for at containeren er ovenpå baggrundsbilledet */
    position: relative; /* Gør at containeren kan placeres ovenpå billedet */
    
    
}

.container-sektion1 h1 {
    line-height: 60px; /* Justerer linjehøjden for bedre læsbarhed */
    text-align: center;
    margin-bottom: 0.5rem;;

    
}

.container-sektion1 p {
    line-height: 30px; /* Justerer linjehøjden for bedre læsbarhed */
    text-align: center;
    max-width: 800px; /* Begrænser bredden af teksten for bedre læsbarhed */
}

/* Sektion 2 */

.sektion2 {
    min-height: 70vh;
    width: 100%;
    align-items: center;
   
    text-align: center;
    padding: 112px 120px;
    gap: 2rem;
    flex-wrap: wrap; /* indholdet kan tilpasse sig mindre skærme */

}

.container-sektion2 {
    display: flex;
    max-width: 1200px; /* Begrænser bredden af containeren */
    height: 80vh;
    flex-direction: row; /* Gør at indholdet er i en række */
    align-items: center;
    justify-content: space-between;
    padding-left: 80px;
    gap: 100px; /* Tilføjer mellemrum mellem tekst og billede */
}

.text-content2 h1 {
    margin-bottom: 0.5rem;
    line-height: 60px;
}

.text-content2 p {
    line-height: 30px;
    margin-bottom: 1.5rem;
}

.text-content2{
    display: column;
    text-align: left; /* Justerer tekst til venstre */
    flex: 1; /* Gør at tekstindholdet kan strække sig */
    max-width: 500px; /* Begrænser bredden af tekstindholdet */
}

.image-content2 {
    flex: 1; /* Gør at billedet kan strække sig */
    text-align: right; /* Justerer billedet til højre */
    padding-right: 0px;

}

.image-content2 img {
    max-width: 100%; /* Begrænser bredden af billedet */ 
    height: 100%; /* Bevarer billedets proportioner */
    padding-left: 40px;
  
}

/* Sektion 3 - 3 grids */

.sektion3 {
    background-color: var(--tertiary-color); /* Lysere beige baggrund */
    
    min-height: 70vh;
    width: 100%;
    
    align-items: center;
    text-align: left;
    padding: 112px 120px;
    gap: 2rem;
    flex-wrap: wrap; /* indholdet kan tilpasse sig mindre skærme*/

}

.container-sektion3 {
    display: flex;
    max-width: 1200px; /* Begrænser bredden af containeren */
    height: 100%;
    flex-direction: row; /* Gør at indholdet er i en række */
    align-items: center;
    justify-content: space-between;
    padding-left: 80px;
  
}

.text-content3 {
    padding-left: 80px;
}

.text-content3 h1 {
    margin-bottom: 0.5rem;
}

.content-images3 {
    display: flex;
    flex-direction: row; /* Gør at billederne er i en række */
    padding-top: 20px;
    gap: 48px; /* Tilføjer mellemrum mellem tekst og billede */
}

.image1 img, .image2 img, .image3 img {
    max-width: 100%; /* Begrænser bredden af billederne */
    height: 220px; /* Bevarer billedets proportioner */
}

.højre-margen {
   display: inline-block;
   margin-left: 13rem; /* Tilføjer margen til højre */
   margin-top: 2rem;
}

/* Sektion 4 - hvidvin fordele */

.sektion4 {
    min-height: 80vh;
    width: 100%;
    align-items: center;
   
    text-align: center;
    padding: 112px 120px;
    gap: 2rem;
    flex-wrap: wrap; /* indholdet kan tilpasse sig mindre skærme */

}

.container-sektion4 {
    display: flex;
    max-width: 1200px; /* Begrænser bredden af containeren */
    height: 80vh;
    flex-direction: row; /* Gør at indholdet er i en række */
    align-items: center;
    justify-content: space-between;
    padding-left: 80px;
}

.imag-content4 {
    flex: 1; /* Gør at billedet kan strække sig */

}

.img-content4 img {
    max-width: 100%; /* Begrænser bredden af billedet */ 
    height: 600px; /* Bevarer billedets proportioner */
  
}

.text-content4 {
    display: column;
    text-align: left; /* Justerer tekst til venstre */
    flex: 1; /* Gør at tekstindholdet kan strække sig */
    max-width: 500px; /* Begrænser bredden af tekstindholdet */
}

.text-content4 h1 {
    margin-bottom: 0.5rem;
    line-height: 60px;
}

/* sektion 5 - vores vine */
.sektion5 {
    background-color: var(--tertiary-color); /* Lysere beige baggrund */
    
    min-height: 70vh;
    width: 100%;
    
    align-items: center;
    text-align: left;
    padding: 112px 120px;
    gap: 2rem;
    flex-wrap: wrap; /* indholdet kan tilpasse sig mindre skærme*/

}

.container-sektion5 {
    display: flex;
    max-width: 1200px; /* Begrænser bredden af containeren */
    height: 100%;
    flex-direction: row; /* Gør at indholdet er i en række */
    align-items: center;
    justify-content: space-between;
    
  
}

.text-content5 {
    padding-left: 80px;
}

.content-images5 {
    display: flex;
    flex-direction: row; /* Gør at billederne er i en række */
    padding-top: 20px;
    padding-left: 80px;
    gap: 100px; /* Tilføjer mellemrum mellem tekst og billede */
}

.img1 img, .img2 img, .img3 img {
    max-width: 100%; /* Begrænser bredden af billederne */
    height: 400px; /* Bevarer billedets proportioner */

}

.højre-margen1 {
    display: inline-block;
   margin-left: 11rem; /* Tilføjer margen til højre */
   margin-top: 2rem;
}

/* Sektion 6 - nyhedsbrev */
.sektion6 {
    background-color: #7D9A6C; /* Mørkegrøn*/
    max-height: 50vh;
    width: 100%;
    align-items: center;
   
    text-align: center;
    padding: 80px 64px;
    flex-wrap: wrap; /* indholdet kan tilpasse sig mindre skærme */

}

.text-content6 h1{
    margin-bottom: 0.5rem;
}

.btn-content6 {
    display: flex;
    justify-content: center; /* Centrerer knapperne */
    gap: 16px; /* Tilføjer mellemrum mellem knapperne */
}

/* Responsive design */

@media (max-width: 768px) {

h1 {
    font-size: 38px;
  }
  
h2 {
    font-size: 20px;
  }
  
p, ul, li, a {
    font-size: 16px;
  }

.sektion1{
    text-align: left;
    padding: 2rem;
}

.sektion2,
.sektion3,
.sektion4,
.sektion5,
.sektion6 {
    padding: 4rem 3rem;
    gap: 1rem;
    text-align: left;
    margin: 0 auto;
  }

.container-sektion1,
.container-sektion2,
.container-sektion3,
.container-sektion4,
.container-sektion5 {
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 1rem;
    max-width: 100%;
    height: 100%;
  }


.text-content2,
.text-content3,
.text-content4,
.text-content5,
.image-content2,
.img-content4 {
    max-width: 100%;
    text-align: left;
    padding: 1rem;
  }

.image-content2 img,
.img-content4 img,
.img1 img, .img2 img, .img3 img {
    max-width: 100%;
    height: 450px;
    padding: 0;
  }

.content-images5,
.content-images3 {
    flex-direction: column;
    gap: 3rem;
    padding: 0;
  }

.højre-margen,
.højre-margen1,
.text-content3,
.text-content5 {
    margin-left: 0;
    padding-left: 0;
  }


}