/* ==============================
   GENERELLE STILINDSTILLINGER
   ============================== */
body {
    font-family: 'Lato', sans-serif; /* Hovedfont */
    margin: 0;
    background-color: #efd9d1;       /* Lys rosa baggrund */
    color: #333;                     /* Standard tekstfarve */
    line-height: 1.6;                /* Bedre læsbarhed */
}

h1, h2, h3 {
    font-family: 'Playfair Display', serif; /* Overskrifter */
    margin-top: 0;                           /* Fjern topmargen */
}

/* ==============================
   HERO / COVERBILLEDE (RESPONSIV)
   ============================== */
.hero {
    width: 100%;
    height: 100vh;               /* Fylder hele vinduet */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    background-color: #efd9d1;   /* fallback baggrund */
}

.hero-svg {
    width: 100%;
    height: 100%;
    object-fit: contain;          /* Bevarer hele SVG uden at klippe */
    object-position: center;      /* Centrer billedet i containeren */
}



/* Justering på mobil */
@media (max-width: 768px) {
    .hero {
        height: 60vh;                     /* Mindre højde på mobil */
        min-height: 250px;                 /* Minimumshøjde på mobil */
        background-position: center top;   /* Viser vigtig del af billedet */
    }
}


/* Justering på mindre skærme */
@media (max-width: 768px) {
    .hero {
        height: 60vh;                  /* lidt mindre højde på mobil */
        background-size: contain;       /* Bevarer proportioner */
        background-position: center top; /* vigtig del af billedet øverst */
    }
}

/* Hvis du senere vil tilføje et overlay på coverbilledet */
/*
.hero::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.4);
}
*/

/* ==============================
   HERO CONTENT (TEKST/KNAP INDEN I HERO)
   ============================== */
.hero-content {
    position: relative;
    z-index: 1;
}


/* ==============================
   OM MIG SEKTION MED BILLEDE TIL HØJRE
   ============================== */
.about-container {
    display: flex;
    align-items: center;          /* Vertikal centering */
    justify-content: space-between;
    gap: 20px;                    /* afstand mellem tekst og billede */
    flex-wrap: wrap;              /* Gør sektionen responsiv på små skærme */
}

.about-text {
    flex: 1;                      /* Tekst fylder den resterende plads */
    min-width: 250px;             /* Mindste bredde */
}

.about-image {
    flex: 1;                      /* Billedet fylder resten af pladsen */
    text-align: right;             /* Billede til højre */
    min-width: 200px;
}

.about-image img {
    max-width: 100%;
    border-radius: 10px;
}

/* ==============================
   OM MIG SEKTION MED BILLEDE TIL HØJRE OG BOOK KNAP
   ============================== */
.about-container {
    display: flex;
    align-items: center;          /* Vertikal centering */
    justify-content: space-between;
    gap: 20px;                    /* afstand mellem tekst og billede */
    flex-wrap: wrap;              /* Gør sektionen responsiv på små skærme */
}

.about-text {
    flex: 1;                      /* Tekst fylder den resterende plads */
    min-width: 250px;             /* Mindste bredde */
}

/* CENTRER KNAPPEN UNDER TEKST */
.btn-container {
    text-align: center;           /* Centrerer knappen horisontalt */
    margin-top: 20px;             /* Luft til teksten */
}

.about-image {
    flex: 1;                      /* Billedet fylder den resterende plads */
    text-align: right;            /* Billede til højre */
    min-width: 250px;
}

.about-image img,
.about-image video {
    max-width: 100%;
    border-radius: 10px;
}

/* ==============================
   KNAPPER
   ============================== */
.btn {
    display: inline-block;
    background-color: #a80041c4;   /* Mørk pink med lidt gennemsigtighed */
    color: white;
    padding: 10px 20px;
    margin-top: 15px;
    text-decoration: none;
    border-radius: 25px;           /* Runde kanter */
    transition: background-color 0.3s ease; /* Blød hover effekt */
}

.btn:hover {
    background-color: #a80041c4;   /* Samme farve som standard (kan ændres) */
}

/* ==============================
   KNAP UNDER HERO
   ============================== */
.booking {
    text-align: center;    /* Centrer knappen */
    margin: 30px 0;        /* Luft mellem hero og knap */
}

/* ==============================
   SEKTIONER
   ============================== */
section {
    padding: 40px 20px;    /* Generel padding for sektioner */
    max-width: 1000px;     /* Begrænser bredden på indhold */
    margin: auto;          /* Centrer sektionen */
}

/* ==============================
   BEHANDLINGER / SERVICE LISTE
   ============================== */
.service-list {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center; /* Centrer kortene */
}

.service-card {
    background-color: white;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 20px;
    width: 250px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Lille skygge */
}

/* ==============================
   GALLERI
   ============================== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.gallery-grid img {
    width: 100%;
    border-radius: 10px; /* Runde hjørner på billeder */
}

/* ==============================
   FOOTER
   ============================== */
footer {
    text-align: center;
    padding: 20px;
    background-color: #efd9d1; /* Lys rosa baggrund */
}