/*================ GLOBAL ================*/
* {
    margin: 0;              /* fjerner standard-ydre afstand på alle elementer */
    padding: 0;             /* fjerner standard-indre afstand på alle elementer */
    box-sizing: border-box; /* inkluderer padding + border i elementets totale width/height */
}

a {
    text-decoration: none;  /* fjerner understregning fra links */
}

ul {
    list-style: none;       /* fjerner standard punkttegn i lister */
}

.active {
    color: #ffffff;               /* gør teksten hvid */
    text-decoration: underline;   /* giver understregning */
    font-weight: 500;             /* medium fed skrift */
    font-size: 1.15rem;           /* gør teksten en smule større */
    margin-left: 2.5rem;          /* tilføjer afstand til venstre */
}

body , html {
    overflow-x: hidden;           /* skjuler horisontal scroll hvis noget rager ud */
}


/*================ NAVBAR ================*/
.navbar {
    position: absolute;           /* placerer navbaren frit ovenpå siden */
    top: 0;                       /* sætter den helt øverst */
    left: 0;                      /* starter helt til venstre */
    display: flex;                /* gør den til en flex-container */
    width: 100%;                  /* fylder hele bredden */
    justify-content: space-between; /* placerer logo til venstre og links til højre */
    padding: 20px;                /* giver indvendig luft hele vejen rundt */
    color: #ffffff;               /* sætter tekstfarven til hvid */
    background: rgba(0, 0, 0, .2); /* gennemsigtig sort baggrund */
    font-family: "Zalando", sans-serif; /* skrifttype */
}

.nav-links {
    display: flex;                /* gør links til en række */
    align-items: center;          /* centrerer links lodret */
}

.nav-links li a {
    text-decoration: none;        /* ingen understregning på links */
    color: white;                 /* links er hvide */
}

.nav-links li a:hover {
    color: black;                 /* bliver sorte når musen er over */
}

.nav-links li {
    margin: 0 30px;               /* tilføjer afstand til højre og venstre mellem punkter */
}


/*================ HEADER ================*/
header {
    width: 100vw;                 /* fylder hele vinduets bredde */
    height: 100vh;                /* fylder hele vinduets højde */
    background-image: url(images/Kokos.jpg); /* baggrundsbillede */
    background-position: bottom;  /* viser bunden af billedet */
    background-size: cover;       /* billedet dækker hele området */
    display: flex;                /* flexbox layout */
    align-items: center;          /* centrerer indhold lodret */
    justify-content: center;      /* centrerer indhold horisontalt */
}

.header-content {
    margin-bottom: 150px;          /* rykker alt indhold længere op fra bunden */
    color: #ffffff;                /* hvid tekst */
    text-align: center;            /* centrerer tekst */
    font-family: "Zalando", sans-serif; /* skrifttype */
}

/*vmin gør tekst responsiv*/
.header-content h2 {
    font-size: 4vmin;              /* responsiv fontstørrelse baseret på viewport */
}

.line {
    width: 150px ;                 /* linjens bredde */
    height: 4px;                   /* linjens tykkelse */
    background: deeppink;          /* farve på linjen */
    margin: 10px auto;             /* 10px luft top/bund, centreret horisontalt */
    border-radius: 5px;            /* afrundede hjørner */
}

.header-content h1 {
    font-size: 7vmin;              /* stor, responsiv overskrift */
    margin-top: 50px;              /* luft over overskriften */
    margin-bottom: 30px;           /* luft under overskriften */
}

.ctn {
    padding: 8px 15px;             /* indvendig luft i knap */
    background: deeppink;          /* pink baggrund */
    border-radius: 30px;           /* rundede hjørner */
    color: #ffffff;                /* hvid tekst */
}

.ctn:hover {
    color: black;                  /* skifter tekstfarve til sort ved hover */
}

.menu-btn {
    position: absolute;            /* fast placering i forhold til navbar */
    top: 30px;                     /* 30px fra toppen */
    right: 30px;                   /* 30px fra højre */
    width: 40px;                   /* bredde på ikonet */
    cursor: pointer;               /* ændrer til hånd når man hover */
    display: none;                 /* skjules på desktop */
}

/*sektion 1*/
section {
    width: 80%;                    /* sektionen fylder 80% af bredden */
    margin: 80px auto;             /* 80px luft top/bund, centreret horisontalt */
}

.underside {
    width: 100%;                   /* fylder hele bredden */
    margin: 1px;                   /* lille luft */
}

.title {
    font-family: 'Zalando', serif; /* skrifttype */
    text-align: center;            /* centrerer tekst */
    font-size: 4vmin;              /* responsiv størrelse */
    color: #000000;                /* sort tekst */
}

.row {
    display: flex;                 /* bruger flexbox */
    align-items: center;           /* centrer lodret */
    width: 100%;                   /* fylder hele bredden */
    justify-content: space-between;/* fordeler plads mellem kolonner */
}

.row .col img {
    width: 90%;                    /* billeder fylder 90% af deres container */
    display: flex;                  /* flex layout */
    flex-direction: column;         /* indhold i kolonnen stables lodret */
    align-items: center;            /* centrerer indhold horisontalt */
    margin: auto;                   /* centrerer billedet */
}

.events .row {
    margin-top: 50px;               /* ekstra luft over events-rækker */
}

h4 {
    font-size: 3vmin;               /* responsiv størrelse */
    color: black;                   /* sort tekst */
    margin: 20px auto;              /* luft top/bund, centreret horisontalt */
    text-align: center;             /* centreret tekst */
}

p {
    color: black;                   /* sort tekst */
    padding: 10px 40px;             /* luft indvendigt (top/bund 10px, sider 40px) */
    margin: 0 20px;                 /* lidt luft i siderne */
    text-align: justify;            /* teksten justeres i begge sider */
}

.events .ctn {
    display: inline-block;          /* knap fylder kun tekstens bredde */
    margin: 20px auto 0;            /* 20px luft over, centreret */
    padding: 8px 15px;              /* indvendig luft */
    background: #6a6a6a;            /* grå baggrund */
    border-radius: 30px;            /* rundede hjørner */
    color: whitesmoke;              /* lys tekstfarve */
    text-align: center;             /* centreret tekst */
    justify-content: center;        /* centrer indhold */
}

.events:hover {
    color: black;                   /* ændrer tekstfarve når man hover over hele events */
}

.explore {
    width: 100%;                    /* fylder hele bredden */
    height: 70vh;                   /* fylder 70% af skærmhøjden */
    background-image: url("images/strand.jpg"); /* baggrundsbillede */
    background-position: center;    /* centrerer billedet */
    background-size: cover;         /* billedet strækkes til at dække */
    background-repeat: no-repeat;   /* gentager ikke billedet */
    display: flex;                  /* flex layout */
    align-items: center;            /* centrer lodret */
}

.explore-content {
    width: 50%;                     /* container fylder halvdelen af bredden */
    padding: 50px;                  /* indvendig luft */
    color: white;                   /* hvid tekst */
    display: flex;                  /* flex layout */
    align-items: center;            /* centrerer lodret */
    flex-direction: column;         /* stabler indhold lodret */
    text-align: center;             /* centrerer tekst */
}

.explore-content h1 {
    font-size: 7vmin;               /* responsiv størrelse */
    color: #ffffff;                 /* hvid tekst */
    font-family: "Zalando", sans-serif; /* skrifttype */
}

.explore-content .line {
    margin-bottom: 50px;            /* luft under linjen */
}

.explore-content p {
    color: #ffffff;                 /* hvid tekst */
    font-family: "Zalando", sans-serif; /* skrifttype */
    text-align: center;             /* centreret tekst */
}

.explore-content .ctn {
    margin-top: 40px;               /* luft over knap */
    background-color: deeppink;     /* pink baggrund */
    color: white;                   /* hvid tekst */
}

.explore-content .ctn:hover {
    color: black;                   /* ændrer tekstfarve til sort ved hover */
}

.content-col {
    width: 40%;                     /* venstre kolonne fylder 40% */
}

.image-col {
    width: 60%;                     /* højre kolonne fylder 60% */
}

.tours .image-gallery {
    display: grid;                  /* bruger grid layout */
    grid-template-columns: repeat(2, 1fr); /* 2 billeder pr række */
    gap: 10px;                      /* afstand mellem billeder */
    width: 100%;                    /* fylder hele containerens bredde */
    align-items: center;            /* centrer lodret */
    justify-content: start;         /* starter til venstre */
}

.tours p {
    text-align: left;               /* venstrejusteret tekst */
    padding: 15px;                  /* indvendig luft */
    line-height: 1.8;               /* større linjeafstand for læsbarhed */
    margin: 40px 20px 40%;          /* luft omkring teksten (meget luft i bunden) */
}

.image-gallery img {
    max-width: 300px;               /* billeder kan maks være 300px brede */
    height: auto;                   /* højde tilpasses automatisk */
    margin-left: 0;                 /* ingen venstremargin */
    margin-top: 10px;               /* 10px luft over billeder */
}

.content-col h1 {
    font-size: 7vmin;               /* stor, responsiv overskrift */
    color: black;                   /* sort tekst */
}

.content-col .line {
    width: 150px;                   /* linje bredde */
    height: 4px;                    /* linje højde */
    background: deeppink;           /* pink farve */
    margin-left: -1px;              /* rykker linjen lidt til venstre */
    margin-top: 10px;               /* luft over linjen */
    margin-bottom: 10px;            /* luft under linjen */
    border-radius: 5px;             /* rundede kanter */
}

.content-col p {
    padding: 0;                     /* ingen indvendig luft */
    margin: 30px 9% 30px auto;      /* luft top/bund, 9% fra venstre, auto højre */
    text-align: justify;            /* justeret tekst */
}

.content-col .ctn {
    margin-left: -100px;            /* flytter knappen til venstre */
}

.image-col{
    width: 60%;                  /* Kolonnen med billeder fylder 60% af rækken */
}

.tours .image-gallery {
    display: grid;                /* Bruger CSS grid til layout */
    grid-template-columns: repeat(2, 1fr); /* To kolonner af lige stor bredde */
    gap: 10px;                     /* Afstand mellem billederne */
    width: 100%;                   /* Fylder hele bredden af containeren */
    align-items: center;           /* Justerer billeder lodret i midten */
    justify-content: start;        /* Starter layout fra venstre */
}

.tours p {
    text-align: left;              /* Tekst justeret til venstre */
    padding: 15px;                 /* Indvendig luft i boksen */
    line-height: 1.8;              /* Øget linjeafstand for bedre læsbarhed */
    margin: 40px 20px 40%;         /* Top 40px, sider 20px, bund 40% luft */
}

.image-gallery img {
    max-width: 300px;              /* Maks bredde på billeder er 300px */
    height: auto;                  /* Højden tilpasses automatisk billedets proportion */
    margin-left: 0;                /* Ingen venstre margin */
    margin-top: 10px;              /* 10px afstand over billeder */
}

.content-col h1 {
    font-size: 7vmin;              /* Responsiv tekststørrelse (7% af viewport mindste side) */
    color: black;                  /* Sort tekst */
}

.content-col .line {
    width: 150px;                  /* Pink linje under overskrift */
    height: 4px;                   /* Tykkelse på linjen */
    background: deeppink;          /* Farve: pink */
    margin-left: -1px;             /* Rykker linjen lidt mod venstre */
    margin-top: 10px;              /* Afstand over linjen */
    margin-bottom: 10px;           /* Afstand under linjen */
    border-radius: 5px;            /* Rundede hjørner */
}

.content-col p {
    padding: 0;                    /* Ingen indre luft */
    margin: 30px 9% 30px auto;     /* Top/bund 30px, højre 9%, venstre auto */
    text-align: justify;           /* Teksten justeres til begge kanter */
}

.content-col .ctn {
    margin-left: -100px;           /* Rykker knappen 100px til venstre */
}

/* ==================== FOOTER ==================== */
.footer {
    width: 100%;                   /* Fylder hele bredden */
    min-height: 10px;              /* Mindste højde på 10px */
    padding: 20px 80px;            /* Luft: 20px top/bund, 80px sider */
    margin: 0;                     /* Ingen ydre luft */
    background: #e4e4e4;           /* Lys grå baggrund */
    display: flex;                 /* Flexbox layout */
    justify-content: center;       /* Centrerer indhold horisontalt */
    align-items: center;           /* Centrerer indhold lodret */
}

.footer p {
    color: #000000;                /* Sort tekst */
    margin: 0 auto;                /* Auto margen = centreret */
    padding: 0;                    /* Ingen indvendig luft */
    text-align: center;            /* Tekst centreret horisontalt */
    width: 100%;                   /* Fylder hele bredden */
}

/* ==================== UNDERSIDE ==================== */
div.scroll-container {
    background-color: #e4e4e4;     /* Lys grå baggrund */
    overflow: auto;                /* Tilføjer scrollbars om nødvendigt */
    white-space: nowrap;           /* Forhindrer linjeskift */
    padding: 8px;                  /* Indre luft */
    scroll-behavior: smooth;       /* Glidende scroll */
}

div.scroll-container img {
    padding: 2px;                  /* Luft omkring billeder */
    width: 30%;                    /* Billederne fylder 30% af containeren */
    height: auto;                  /* Højden justeres efter proportioner */
}

.cta-button-header:hover {
    text-decoration: underline;    /* Understregning ved hover */
}

.overskriftunderside {
    font-family: 'Zalando', serif; /* Skrifttype */
    text-align: center;            /* Tekst centreret */
    color: #000000;                /* Sort farve */
    margin-bottom: 40px;           /* Luft under */
}

.paragrafunderside {
    column-count: 2;               /* Deler tekst i 2 kolonner */
    column-gap: 50px;              /* Afstand mellem kolonner */
    background-color: white;       /* Hvid baggrund */
    text-align: center;            /* Tekst centreret */
}

/* Overskrift for undersiden */
.overskriftunderside {
    font-size: xx-large;           /* Ekstra stor tekst */
    font-family: 'Zalando', serif; /* Skrifttype */
    text-align: center;            /* Centreret tekst */
    justify-content: center;       /* Centreret indhold (hvis flex bruges) */
    color: #000000;                /* Sort farve */
    margin-bottom: 20px;           /* Luft under */
    letter-spacing: 1px;           /* Afstand mellem bogstaver */
    margin-top: 50px;              /* Luft over */
}

.paragrafunderside {
    font-family: "Zalando", sans-serif; /* Skrifttype */
    font-size: clamp(0.9rem, 2vw, 1.1rem); /* Responsiv skriftstørrelse */
    line-height: 1.7;               /* Linjeafstand */
    color: #000000;                 /* Sort tekst */
    text-align: justify;            /* Tekst justeret til begge kanter */
    max-width: 900px;               /* Maksimal bredde */
    margin: 0 auto 50px;            /* Centreret, med 50px bund-margin */
    padding: 10px 20px;             /* Indvendig luft */
}

/* Quote sektion */
.quote-section {
    width: 100%;                   /* Fylder hele bredden */
    min-height: 25vh;              /* Minimumshøjde: 25% af viewport-højden */
    background: #fbf6fa;           /* Lys lyserød baggrund */
    text-align: center;            /* Centreret tekst */
    display: flex;                 /* Flexbox layout */
    flex-direction: column;        /* Placerer elementer lodret */
    margin: 0;                     /* Ingen ydre luft */
}

.quote-section h4 {
    font-weight: normal;           /* Normal vægt (ikke fed) */
    font-size: 1.2rem;             /* Skriftstørrelse */
    font-style: italic;            /* Kursiv tekst */
    color: #555555;                /* Mørkegrå farve */
    margin-top: 10px;              /* Luft over */
}

/* Header på underside */
.header1 {
    width: 100vw;                  /* Fylder hele viewportens bredde */
    height: 60vh;                  /* 60% af viewportens højde */
    background-image: url("images/header-kopi.jpg"); /* Baggrundsbillede */
    background-position: bottom;   /* Placeres nederst */
    background-size: cover;        /* Strækkes så den dækker container */
    display: flex;                 /* Flexbox layout */
    align-items: center;           /* Centrerer lodret */
    justify-content: center;       /* Centrerer horisontalt */
    text-align: center;            /* Centrerer tekst */
}

.header-content1 {
    font-family: "Zalando", sans-serif; /* Skrifttype */
}

/* ==================== MOBILVERSION ==================== */
@media only screen and (max-width: 850px) {
    .menu-btn {
        display: block;             /* Viser burger-menuen */
    }

    .navbar {
        padding: 0;                 /* Fjerner indvendig luft */
    }

    .logo {
        position: absolute;         /* Logo fast i toppen */
        top: 30px;                  /* 30px ned fra toppen */
        left: 30px;                 /* 30px fra venstre */
    }

    .nav-links {
        flex-direction: column;     /* Menu-links stables lodret */
        width: 100%;                /* Fylder hele bredden */
        height: 100vh;              /* Fylder hele højden af skærmen */
        justify-content: center;    /* Centrerer links lodret */
        background: #1c1c1c;        /* Mørk baggrund */
        margin-top: -900px;         /* Skjuler menuen uden for skærmen */
        transition: all 0.5s ease;  /* Glidende animation når menuen åbnes */
    }

    .nav-links.mobile-menu {
        margin-top: 0;              /* Når klassen tilføjes, vises menuen */
    }

    .nav-links li {
        margin: 30px auto;          /* Luft omkring hvert menupunkt */
    }

    /* Event-sektion */
    .row {
        flex-direction: column;     /* Kolonner stables lodret */
    }

    .row .col {
        margin: 20px auto;          /* Luft mellem kolonner */
    }

    .col img {
        max-width: 90%;             /* Billeder fylder maks 90% */
    }
}