html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Wrapper der holder alt indhold */
.main-container {
    flex: 1; /* Skubber footeren til bunden */
}

/* Grundlæggende container til indhold */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5px;
}

/* Rækker */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px; /* Giver plads mellem kolonnerne */
}

[class^="col-"] {
    padding: 15px;
    box-sizing: border-box;
}

.col-1  { flex: 0 0 8.33%;  max-width: 8.33%; }
.col-2  { flex: 0 0 16.66%; max-width: 16.66%; }
.col-3  { flex: 0 0 25%;    max-width: 25%; }
.col-4  { flex: 0 0 33.33%; max-width: 33.33%; }
.col-5  { flex: 0 0 41.66%; max-width: 41.66%; }
.col-6  { flex: 0 0 50%;    max-width: 50%; }
.col-7  { flex: 0 0 58.33%; max-width: 58.33%; }
.col-8  { flex: 0 0 66.66%; max-width: 66.66%; }
.col-9  { flex: 0 0 75%;    max-width: 75%; }
.col-10 { flex: 0 0 83.33%; max-width: 83.33%; }
.col-11 { flex: 0 0 91.66%; max-width: 91.66%; }
.col-12 { flex: 0 0 100%;   max-width: 100%; }

/* Gør header og footer fuld bredde */
header, footer {
    width: 100%;
    padding: 20px 0;
}

/* Header Styling */
header {
    background-color: white;
    text-align: center;
}

/* Footer Styling */
footer {
    text-align: center;
    background-color: #231F20;
    color: white;
    text-align: center;
    height: 150px;
    font-size: 14px;
}

/* Navigation */
nav {
    background-color: #231F20;
    padding: 20px 0;
}

nav ul {
    list-style: none;
    padding: 0;
    text-align: center;
    margin: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav a {
    color: #d3d3d388;
    text-decoration: none;
    font-size: 20px;
    padding: 10px;
}

nav a:hover {
    text-decoration: none;
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 50px;
    background-color: #90e0ef;
}

/* Info Section */
.info {
    text-align: center;
    padding: 40px;
    background-color: white;
}

/* Billeder slideshow */
.image-row {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height: 346px; /* Fast højde for slideshow */
    margin-top: 20px;
    position: relative;
}

/* Slideshow billeder */
.image-row img {
    position: absolute;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 2.3s ease-in-out; /* Smooth fade effekt */
}

.fade-image {
    width: 100%; /* Eller din ønskede størrelse */
    height: auto;
    transition: opacity 1s ease-in-out;
}

/* Responsiv tilpasning */
@media (max-width: 768px) {
    .image-row img {
        max-width: calc(100% / 2);
}

@media (max-width: 480px) {
    .image-row img {
        max-width: 100%;
    }
}

/* Responsiv tilstand */
@media (max-width: 768px) {
    [class^="col-"] {
        flex: 100%;
        max-width: 100%;
    }
}