/* Generelle indstillinger */
body {
    margin: 0;
    background-color: #1a1a1a;
    color: white;
    text-align: center;
    font-family: "Oswald", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

html, body {
    overflow-x: hidden;
    width: 100%;
}

.container {
    max-width: 100%;
    overflow: hidden; /* Sikrer, at indholdet ikke kan gå udenfor */
}

img, iframe {
    max-width: 100%;
    height: auto;
    display: block;
}



/* Generelle billede-stylinger */
img {
    display: block;
    margin: 0 auto;
}


/* Generelle overskrift-stylinger */
h1, h2 {
    text-transform: uppercase;
}






a:hover {
    color: #d4a054
}




/* Navigation */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 40px;
    background-color: #1A1A1A;
}
header img {
    min-width: 40px;
    height: auto;
    padding-left: 20px;
    padding: 20px;
}
nav ul {
    padding-right: 100px;
    list-style: none;
    display: flex;
    gap: 10px;
}


nav ul li {
    display: flex;
    color: white;
    text-decoration: none;
    font-size: 18px;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Sørger for jævn afstand mellem links */
    flex-wrap: wrap; /* Sørger for at linkene går ned på næste linje hvis nødvendigt */
    max-width: 90%; /* Sørger for at det ikke går ud over skærmen */
    overflow: hidden; /* Forhindrer overlap */
}

nav ul li a {
    color: white; /* Sørger for at links altid er hvide */
    text-decoration: none; /* Fjerner evt. understregning */
}
nav ul li a:hover {
    color: #d4a054; /* Giver en gylden farve ved hover (tilpas efter behov) */
}
















/* Hero sektion */
.hero {
    height: 75vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.hero h1 {
    font-size: 60px;
    font-weight: bold;
}
.hero p {
    font-size: 20px;
    font-style: italic;
    color: #d4a054;
}

@media screen and (max-width: 768px) {
    .hero {
        background-image: url('images/vognen.png');
    }
    
    .hero {
        background-size: cover !important;
        background-position: center !important;
        background-attachment: scroll !important;
        
    }
    
}




/* CTA-knap */
.cta {
    background-color: #d4a054;
    color: #1A1A1A;
    padding: 15px 30px;
    text-decoration: none;
    text-align: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    margin-top: 40px;
}
.cta:hover {
    background-color: #b28342;
}



.specialiteter h2 {
    font-size: 45px;
}

.specialiteter h3 {
    color: #d4a054;
    font-size: 25px;
    text-align: center;
    font-family: "Great Vibes", serif;
    font-weight: 400;
    font-style: normal;
}

.specialiteter {
    padding: 50px;
}

.specialiteter .grid {
    display: flex;
    justify-content: center;
    gap: 50px; /* Mindre gap */
    flex-wrap: wrap; /* Gør det muligt for elementerne at bryde linjen */
}

.specialiteter .grid .item {
    width: 300px; /* Justér denne værdi efter behov */
    text-align: center;
}

.specialiteter .grid img {
    width: 100%;
    max-width: 300px;
    height: 230px; /* Sørger for at alle billeder har samme højde */
    object-fit: cover; /* Sikrer at billedet beskæres pænt */
    border-radius: 10px;
}

/* RESPONSIV DESIGN: Stack elementerne vertikalt på små skærme */
@media (max-width: 768px) {
    .specialiteter .grid {
        flex-direction: column;
        align-items: center;
    }

    .specialiteter .grid .item {
        width: 90%; /* Gør elementerne bredere på mobil */
        max-width: 400px; /* Begræns bredden */
    }

    .specialiteter .grid img {
        max-width: 100%; /* Billederne fylder containeren */
    }
}



.deluxe {
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 769px) {
    .deluxe h2 {
        width: 100%;
        font-size: 45px;
        text-align: center;
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .deluxe h2 {
        width: 90%;
        font-size: 28px;
        text-align: center;
        margin-bottom: 30px;
        margin: 10px;
        padding-right: 20px;
    }
}


.deluxe .content-wrapper {
    display: flex;
    align-items: center;
    gap: 60px; /* Matcher afstanden i Mageriet */
    max-width: 1000px;
    width: 100%;
    justify-content: center;
}

.deluxe .content-wrapper img {
    width: 55%; /* Gør billedet lidt større */
    max-width: 500px; /* Matcher størrelsen i Mageriet */
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

.deluxe .text-content {
    width: 45%; /* Lidt mindre bredde end billedet for balance */
    max-width: 500px;
    text-align: center; /* Matcher Mageriet */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.deluxe .text-content h3 {
    color: #d4a054;
    font-size: 25px;
    font-family: "Great Vibes", serif;
    font-weight: 400;
    font-style: normal;
    text-align: center; /* Matcher Mageriet */
}

.deluxe .text-content p {
    color: #ffffff;
    text-align: center;
    max-width: 500px;
}

.deluxe .text-content .grid {
    text-align: center;
    padding-top: 20px;
}

/* Centrerer på mobil */
@media (max-width: 900px) {
    .deluxe .content-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
    }

    .deluxe .content-wrapper img {
        width: 100%;
        max-width: 500px;
    }

    .deluxe .text-content {
        width: 100%;
        max-width: 600px;
        text-align: center;
    }

    .deluxe .text-content h3,
    .deluxe .text-content p,
    .deluxe .text-content .grid {
        text-align: center;
    }
}






.klassikere h2 {
    font-size: 45px;
}

.klassikere h3 {
    color: #d4a054;
    font-size: 25px;
    text-align: center;
    font-family: "Great Vibes", serif;
    font-weight: 400;
    font-style: normal;
}

.klassikere {
    padding: 50px;
}

.klassikere .grid {
    display: flex;
    justify-content: center;
    gap: 50px; /* Mindre gap */
    flex-wrap: wrap; /* Gør det muligt for elementerne at bryde linjen */
}

.klassikere .grid .item {
    width: 300px; /* Justér denne værdi efter behov */
    text-align: center;
}

.klassikere .grid img {
    width: 100%;
    max-width: 300px;
    height: 230px; /* Sørger for at alle billeder har samme højde */
    object-fit: cover; /* Sikrer at billedet beskæres pænt */
    border-radius: 10px;
}



/* RESPONSIV DESIGN: Stacker elementerne på mobil */
@media (max-width: 768px) {
    .klassikere .grid {
        flex-direction: column;
        align-items: center;
    }

    .klassikere .grid .item {
        width: 90%; /* Gør elementerne bredere på mobil */
        max-width: 400px; /* Begrænser bredden */
    }

    .klassikere .grid img {
        max-width: 100%; /* Gør billederne responsivt */
    }
}






/* Stil til hovedoverskriften */
.menu h2 {
    font-size: 45px;
    text-align: center;
}

/* Generelle styles til alle menu-sektioner */
.menu, .sigmenu, .menu2 {
    padding: 10px;
    max-width: 1200px; /* Holder layoutet centreret på store skærme */
    margin: 0 auto;
}

/* Sikrer, at sigmenu går ud til kanterne på PC */
.sigmenu {
    width: 100vw; /* Gør sektionen lige så bred som viewporten */
    max-width: none;
    padding: 20px 0;
}

/* Grid layout for menu-sektionerne */
.menu .grid, .menu2 .grid {
    display: flex;
    justify-content: center;
    gap: 10px; /* Afstand mellem elementer */
    flex-wrap: wrap; /* Tillader at elementerne bryder linjen */
    padding-bottom: 20px;
}

/* Standardbilleder - PC-visning */
.menu .grid img,
.menu2 .grid img {
    max-width: 280px; /* Standard bredde */
    height: auto; /* Bevarer proportioner */
    object-fit: contain;
}

.menu .item1 img {
    width: 88%; /* Får det til at fylde sektionen */
    max-width: 405px; /* Holder det centreret */
    height: auto;
    object-fit: contain;
}

.menu .item2 img {
    width: 80%; /* Får det til at fylde sektionen */
    max-width: 355px; /* Holder det centreret */
    height: auto;
    object-fit: contain;
    padding-right: 20px;
}

.menu .item3 img {
    width: 90%; /* Får det til at fylde sektionen */
    max-width: 360px; /* Holder det centreret */
    height: auto;
    object-fit: contain;
}



/* Signaturmenu billede - PC */
.sigmenu .item4 img {
    width: 90%; /* Får det til at fylde sektionen */
    max-width: 660px; /* Holder det centreret */
    height: auto;
    object-fit: contain;
    padding-bottom: 50px;
}



.menu2 .item5 img {
    width: 90%; /* Får det til at fylde sektionen */
    max-width: 330px; /* Holder det centreret */
    height: auto;
    object-fit: contain;
}

.menu2 .item6 img {
    width: 80%; /* Får det til at fylde sektionen */
    max-width: 300px; /* Holder det centreret */
    height: auto;
    object-fit: contain;
    padding-right: 20px;
}

.menu2 .item7 img {
    width: 90%; /* Får det til at fylde sektionen */
    max-width: 340px; /* Holder det centreret */
    height: auto;
    object-fit: contain;
}



/* Mobilvenlig layout */
@media (max-width: 768px) {
    /* Stacker elementerne vertikalt */
    .menu .grid, .menu2 .grid {
        flex-direction: column;
        align-items: center;
    }

    .sigmenu .item4 {
        text-align: center;
    }

    /* Tilpasser bredden pr. item - HER KAN DU JUSTERE */
    .menu .grid .item1 img { max-width: 320px; padding: 15px;}
    .menu .grid .item2 img { max-width: 260px; padding: 15px; }
    .menu .grid .item3 img { max-width: 280px; padding: 15px; }
    .menu2 .grid .item5 img { max-width: 255px; padding: 15px; }
    .menu2 .grid .item6 img { max-width: 270px; padding: 15px; }
    .menu2 .grid .item7 img { max-width: 280px; padding: 15px; }
    
    /* Signaturmenuen skal stadig være bredere */
    .sigmenu .item4 img {
        max-width: 440px; /* Juster dette, hvis den skal være større/mindre */
    }
}






/* Hero2 sektion */
.hero2 {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.hero2 h2 {
    font-size: 45px;
    font-weight: bold;
}
.hero2 p {
    font-size: 20px;
    font-weight: 300;
    font-style: italic;
    color: #ffffff;
    padding: 40px;
    padding-bottom: 35px;
}
.hero2 div {
    max-width: 800px

}
@media screen and (max-width: 768px) {
    .hero2 {
        background-image: url('images/vognen.png');
    }
    
    .hero2 {
        background-size: cover !important;
        background-position: center !important;
        background-attachment: scroll !important;
        
    }
    
}







.testimonials h2 {
    font-size: 45px;
}

/* Stjerner */
.stars {
    color: gold;
    font-size: 18px;
    margin-bottom: 10px;
}

/* Karusel knapper */
button.prev, button.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.493);
    color: white;
    border: none;
    padding: 10px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 5px;
}



/* knapper til testimonials*/

.testimonial-container {
    position: relative;
    max-width: 600px;
    margin: auto;
}




/* Testimonials sektion - standard styling til større skærme (780px og bredere) */
@media (min-width: 780px) {
    .testimonials {
        margin-bottom: 50px;
        background-color: #1A1A1A;
    }

    .testimonials {
        text-align: center;
        padding: 50px;
        background-color: #1a1a1a;
        color: white;
        position: relative;
    }

    .testimonial-container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column; /* Sikrer at boksen er under overskriften */
        height: 100%; /* Sørger for at bruge den fulde sektion */
        width: 100%;
    }    

    .testimonial-slide {
        display: none;
        background-color: white;
        color: #1a1a1a;
        padding: 20px;
        border-radius: 10px;
        width: 100%;
        text-align: center;
    }

    .testimonial-slide.active {
        display: block;
    }

}

/* Mobilvenlig styling til skærme SMALLERE end 780px */
@media (max-width: 779px) {
    .testimonials {
        text-align: center;
        padding: 30px;
        background-color: #1a1a1a;
        color: white;
        position: relative;
    }

    .testimonial-container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column; /* Sikrer at boksen er under overskriften */
        height: 100%; /* Sørger for at bruge den fulde sektion */
        width: 100%;
    }
    

    .testimonial-slide {
        display: none;
        background-color: white;
        color: #1a1a1a;
        padding: 15px;
        border-radius: 10px;
        width: 100%;
        text-align: center;
    }

    .testimonial-slide.active {
        display: block;
    }

    /* Stjerner */
    .stars {
        color: gold;
        font-size: 16px;
        margin-bottom: 10px;
    }

    /* Mindre knapper til mobil */
    button.prev, button.next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(255, 255, 255, 0.3);
        color: white;
        border: none;
        padding: 8px 12px;
        font-size: 16px;
        cursor: pointer;
        border-radius: 5px;
    }
}







.mageriet {
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 769px) {
    .mageriet h2 {
        width: 100%;
        font-size: 45px;
        text-align: center;
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .mageriet h2 {
        width: 90%;
        font-size: 28px;
        text-align: center;
        margin-bottom: 30px;
        margin: 10px;
        padding-right: 20px;
    }
}


.mageriet .content-wrapper {
    display: flex;
    align-items: center;
    gap: 60px; /* Matcher afstanden i Mageriet */
    max-width: 1000px;
    width: 100%;
    justify-content: center;
}

.mageriet .content-wrapper img {
    width: 55%; /* Gør billedet lidt større */
    max-width: 500px; /* Matcher størrelsen i Mageriet */
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

.mageriet .text-content {
    width: 45%; /* Lidt mindre bredde end billedet for balance */
    max-width: 500px;
    text-align: center; /* Matcher Mageriet */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mageriet .text-content h3 {
    color: #d4a054;
    font-size: 25px;
    font-family: "Great Vibes", serif;
    font-weight: 400;
    font-style: normal;
    text-align: center; /* Matcher Mageriet */
}

.mageriet .text-content p {
    color: #ffffff;
    text-align: center;
    max-width: 500px;
}

.mageriet .text-content .grid {
    text-align: center;
    padding-top: 20px;
}

/* Centrerer på mobil */
@media (max-width: 900px) {
    .mageriet .content-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
    }

    .mageriet .content-wrapper img {
        width: 100%;
        max-width: 500px;
    }

    .mageriet .text-content {
        width: 100%;
        max-width: 600px;
        text-align: center;
    }

    .mageriet .text-content h3,
    .mageriet .text-content p,
    .mageriet .text-content .grid {
        text-align: center;
    }
}













a:hover{
    color: #d4a054
}

/* Kontakt sektion */
.kontakt {
    width: 100%;
    background: white;
    color: black;
    padding: 50px 0;
    display: flex;
    justify-content: center; /* Centrerer sektionen */
}
.kontakt .info p {
    color: #1A1A1A;
}

/* Beholder til at centrere indholdet */
.kontakt .container {
    max-width: 1200px;
    width: 100%;
    margin: auto;
    padding: 0 20px;
}

/* Flex container til tekst & kort */
.kontakt .info-map-container {
    display: flex;
    justify-content: space-between; /* Placerer tekst til venstre, kort til højre */
    align-items: center;
    gap: 50px;
}

/* Kontaktinfo */
.kontakt .info {
    flex: 1;
    max-width: 500px;
    text-align: left;
}

/* Links styling */
.kontakt .info a {
    color: #1a1a1a;
    text-decoration: none;
}

.kontakt .info a:hover {
    color: #d4a054;
}

/* Google Maps container */
.kontakt .map {
    flex: 1;
    max-width: 500px; /* Sikrer, at Google Maps ikke bliver for bred */
    display: flex;
    justify-content: flex-start; /* Skubber Maps til højre */
}

/* Kortet er responsivt */
.gmap_canvas {
    width: 100%;
    height: 300px;
    border-radius: 8px;
    overflow: hidden;
}

.gmap_iframe {
    width: 100%;
    height: 300px;
    border: 0;
}

/* RESPONSIV DESIGN: Stacker elementerne på mobil */
@media screen and (max-width: 900px) {
    .kontakt .info-map-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .kontakt .info {
        max-width: 100%;
        text-align: center;
        padding-left: 0;
    }

    .kontakt .map {
        max-width: 100%;
        justify-content: center;
    }

    .gmap_canvas {
        max-width: 100%;
    }
}






/* Footer styling */
footer {
    background-color: #1a1a1a;
    color: white;
    text-align: center;
}

/* Wrapper til social ikoner og logo */
.footer-content {
    display: flex;
    justify-content: space-between; /* Placerer logo til venstre og sociale ikoner til højre */
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Social ikoner - til højre */
.socials {
    display: flex;
    flex-direction: row; /* Sørger for at de står på linje */
    gap: 20px; /* Afstand mellem ikoner */
    justify-content: flex-end;
    align-items: center;
}

/* Stil for sociale ikoner */
.socials a {
    display: inline-block;
}

.socials a img {
    width: 40px; /* Mindre størrelse */
    height: auto;
    display: block;
}

/* Logo - til venstre */
.logo img {
    width: 180px; /* Mindre størrelse */
    height: auto;
}

/* Copyright tekst - centreret */
footer p {
    text-align: center;
    font-size: 12px;
    margin-top: 10px;
}




/* Footer */
footer {
    padding: 20px;
    background: #1a1a1a;
    color: white;
}
footer .socials img {
    text-align: center;
    width: 30px;
    height: auto;
    margin: 10px;
}