/* produkt.css */

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

/* produkt sektion */

.sektion1 {
    width: 100%;
    align-items: center;
    justify-content: center; 
    height: 210vh;

    text-align: center;
    padding-left: 150px; 
    flex-wrap: wrap; /* indholdet kan tilpasse sig mindre skærme */

} 

.nav-text {
    display: flex;
    padding-top: 80px;
    justify-content: left; 
    align-items: center; /* Centrerer teksten vertikalt */
}

.container1 {
    display: flex;
    max-width: 1200px;
    
    flex-direction: row; /* Gør at indholdet er i en række */
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px; /* Tilføjer mellemrum mellem tekst og billede */
}

.image-container {
    display: flex;
    flex-direction: row; /* Gør at billederne er i en række */
    gap: 16px; /* Tilføjer mellemrum mellem tekst og billede */
  }

.image-column {
    display: flex;
    flex-direction: column; /* Gør at billedet er i en kolonne */
    align-items: flex-start; /* Centrerer billedet horisontalt */
    flex: 1; /* Gør at billedet kan strække sig */
    gap: 16px;

    height: 540px;
    width: 80px;    
}

.image-column img {
    max-width: 100%; /* Begrænser bredden af billedet */
    align-self: stretch; /* Gør at billedet strækker sig over hele bredden af kolonnen */
    height: 100px; /* Bevarer billedets proportioner */
    object-fit: cover; /* Sørger for, at billedet dækker hele området */

}

.product-image img {
    height: 600px;
    width: 100%;
    
}

.text-container {
    display: flex;
    flex-direction: column; 
    align-items: left; /* Centrerer teksten vertikalt */
    justify-content: left;
    max-width: fit-content;
}

.text-content1 {
    align-items: left;
    text-align: left; /* Justerer tekst til venstre */
    flex: 1; /* Gør at tekstindholdet kan strække sig */
}

.text-content1 p {
  max-width: 500px;   /* God bredde på desktop */
  margin: 0;
  line-height: 1.6;
}

.button-container {
    display: flex;
    justify-content: left; /* Centrerer knapperne */
}

.small.txt {
    text-align: right;
}

.button-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    justify-content: flex-start; 
    gap: 0px; 

}

.button-container2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.info {
    display: flex;
    flex-direction: column; /* Gør at teksten er i en kolonne */
    width: 520px;
    align-items: left; /* Justerer teksten til venstre */
    justify-content: center; /* Centrerer teksten vertikalt */
    padding-top: 20px; /* Tilføjer luft i bunden og venstre */
    text-align: left;
}

.titel-ikon {
    display: flex;
    flex-direction: row; /* Gør at ikonet og teksten er i en række */
    align-items: center; /* Centrerer ikonet vertikalt */
    justify-content: space-between;
    margin-bottom: 10px; /* Tilføjer mellemrum under titlen */
}

.border-top {
    border-top: 1px solid var(--text-color); /* Tilføjer en topkant */
    width: 500px;
    margin-top: 16px; /* Tilføjer mellemrum over kanten */
    padding-top: 16px; /* Tilføjer luft under kanten */
}


/* sektion2 - citat */

.sektion2 {;
    background-color: var(--secondary-color);
    height: 40vh; 
    display: flex;
    position: relative;
    align-items: center; /* Centrerer indholdet vertikalt */
    justify-content: center; /* Centrerer indholdet horisontalt */
}

.container-sektion2 {
    width: 80%;
    max-width: 1200px;
    text-align: center; /* Centrerer teksten */
}

/* sektion3 - slider */
.sektion3 {
    background-color: var(--primary-color);

    min-height: 70vh; /* Gør sektionen fuld højde */;
    width: 100%;

    position: relative;
    align-items: center; /* Centrerer indholdet vertikalt */
    justify-content: center; /* Centrerer indholdet horisontalt */
    padding: 112px 120px;
    gap: 2rem;
    flex-wrap: wrap; /* indholdet kan tilpasse sig mindre skærme*/
}

.container-text3 {
    display: flex;
    flex-direction: column; /* Gør at teksten er i en kolonne */
    align-items: left; /* Justerer teksten til venstre */
    justify-content: center; /* Centrerer teksten vertikalt */
    padding: 0px 80px; /* Tilføjer luft i bunden og venstre */
}

.container-sektion3 {
    padding: 0px 80px; /* Tilføjer luft i bunden og venstre */
    display: flex;
        
}

.grid-items1 {
    display: flex;
    flex-direction: row; /* Gør at indholdet er i en række */
    justify-content: space-between; /* Fordeler pladsen mellem elementerne */
    margin-bottom: 0px; /* Tilføjer mellemrum mellem grid items */
    gap: 30px; /* Tilføjer mellemrum mellem elementerne i grid item */
    align-items: flex-start;
}

.item {
    flex: 1; /* Gør at hvert grid item kan strække sig */
    background-color: var(--tertiary-color); /* Mørkere beige baggrund */
    padding: 20px; /* Tilføjer luft inden i grid item */
    text-align: left;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Tilføjer en let skygge for dybde */
    transition: transform 0.3s ease;

}

.item:hover {
    transform: translateY(-5px); /* Giver en let hævning ved hover */
}

.item img {
    width: 100%; /* Gør at billedet fylder hele bredden af grid item */
    height: 400px; /* Bevarer billedets proportioner */
    object-fit: cover; /* Sørger for, at billedet dækker hele området */
    margin-bottom: 20px; /* Tilføjer mellemrum under billedet */
}

.produkt-navn {
    display: flex;
    flex-direction: row; /* Gør at indholdet er i en række */
    justify-content: space-between; /* Fordeler pladsen mellem elementerne */
    gap: 20px; /* Tilføjer mellemrum mellem elementerne*/
}



/* sektion4 - oplev hvidvin */
.sektion4 {
    height: 60vh; /* Gør sektionen fuld højde */;
    display: flex;
    position: relative;
    align-items: center; /* Centrerer indholdet vertikalt */
    justify-content: center; /* Centrerer indholdet horisontalt */

} 

.image-container4 {
    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 */
}


.container-sektion4 {
    position: relative; /* Gør at containeren kan placeres ovenpå billedet */
    height: 60vh;
    width: 100%;
    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 */
    background-color: rgba(0, 0, 0, 0.5); /* lys grå med let gennemsigtighed */

}

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

    
}

.container-sektion4 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 */
}


.sektion4-image {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.sektion4-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 */
}

.btn-content1 {
    display: flex;
    justify-content: center; /* Centrerer knapperne */
    gap: 16px; /* Tilføjer mellemrum mellem knapperne */
    padding: 0px 80px; /* Tilføjer luft i bunden og venstre */ 
    flex-wrap: wrap; /* Gør at knapperne kan brydes til næste linje, hvis der ikke er plads */
}

/* Responsive design */


@media (max-width: 768px) {
  h1 {
    font-size: 38px;
  }
  
h2 {
    font-size: 20px;
  }
  
p, ul, li, a {
    font-size: 16px;
  }
  
.sektion1 {
    padding-left: 0;
    height: auto;
    padding: 0rem 3rem;

}

.container1 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }

.image-container {
    flex-direction: column-reverse;
    width: 100%;
    justify-content: center;
    align-items: center;
  }

.image-column {
    flex-direction: row;
    justify-content: left;
    height: auto;
    width: 100%;
    align-items: flex-start;
    gap: 5px;
    margin-top: 1rem;
  }

.image-column img {
    height: 80px;
    width: 100%;
  }

.product-image {
    width: 100%
}

.product-image img {
    height: 550px;
    width: 100%;
  }

.text-container {
    max-width: 100%;
    align-items: center;
    text-align: center;
  }

  .info {
    width: 100%;
    max-width: 400px;
    margin: 1rem auto 0 auto;
    padding: 3rem 0;
    text-align: left;
    align-items: flex-start;
    box-sizing: border-box;

  }

.border-top {
    width: 100%;
    max-width: 100%;
    margin: 1rem 0;

}

.button-container,
.button-container2 {
    align-items: flex-start;
    justify-content: left;
    width: 100%;
    gap: 1rem;
  }

  .btn-blue-long1, #btn-long{
    max-width: 500px;
    width: 100%;
  }

.btn-content1 {
    flex-direction: row;
    gap: 8px;
    padding: 0 1rem;
    justify-content: center;
  }

.sektion3 {
    display: flex;
    padding: 4rem 0;
    width: 100%;
}

.grid-items1  {
    grid-template-columns: 1fr;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;

}


.container-sektion4 {
    padding: 2rem 1rem;
    height: auto;
  }

.sektion4 {
    display: flex;
    align-items: flex-start;
    min-height: 60vh;
    text-align: left;
  }
  

.container-sektion4 h1 {
    font-size: 1.5rem;
    line-height: 2rem;
  }

.container-sektion4 p {
    font-size: 1rem;
    line-height: 1.5rem;
    max-width: 100%;
  }
}