/* Reset */
body, html {
    width: 100%;
    margin: 0;
    padding: 0;
}

/*main {
    flex-grow: 1;*/ /* This ensures that the main content section takes up available space */
/*}*/

.main-content {
    display: flex;
    width: 100%;
}

/* Full-width Header */
.header {
    display: flex;
    align-items: center;
    position: fixed; /* Makes the header fixed at the top */
    top: 0;
    left: 0;
    width: 100vw; /* Full viewport width */
    height: 75px; /* Header height */
    padding: 0 20px; /* Inner spacing for content */
    background-color: #f4f4f4; /* Background color */
    z-index: 1000; /* Ensures the header stays on top of other content */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Logo */
.logo img {
    max-height: 35px; /* Adjust logo size */
    height: auto;
    width: auto;
    margin: 40px;
}

/* Button Container */
.button-container {
    margin-left: auto; /* Pushes the button to the far right */
}
/* Button as Image */
.image-button-de {
    width: 40px; /* Button width */
    height: 40px; /* Button height */
    background-image: url('/assets/images/de-flag.png'); /* Path to the image */
    background-size: cover; /* Ensures the image covers the button fully */
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    border-radius: 5px; /* Optional: Adds rounded corners */
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}
/* Button as Image */
.image-button {
    width: 40px; /* Button width */
    height: 40px; /* Button height */
    background-image: url('/assets/images/uk-flag.png'); /* Path to the image */
    background-size: cover; /* Ensures the image covers the button fully */
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    border-radius: 5px; /* Optional: Adds rounded corners */
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

    .image-button:hover {
        transform: scale(1.1); /* Adds a hover effect */
    }


/* Slider gallery */
.slider-container {
    position: relative;
    width: 100%;
    height:35vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;

}

.slider {
    display: flex;
    position: relative;
    width: max-content; /* Allow it to be flexible */
    transition: transform 1s ease-in-out;
    margin-top:50px;
}

    .slider img {
        width: 15vw; /* Each image takes up 15% of the viewport width */
        height: 31vh; /* Set the height of the images */
        object-fit: cover;
        margin: 0 0.5vw; /* Space between images (5px on each side) */
        opacity: 0.7;
        transition: transform 1s ease-in-out, opacity 1s ease-in-out;
        flex-shrink: 0;
    }

        /* The middle image will be zoomed in */
        .slider img.middle {
            width: 15vw;
            height: 31vh;
            transform: scale(1.1);
            opacity: 1;
        }


/* End of Slider gallery*/

/* Table Styling */
.table-section {
    width: 100%;
    max-height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

table {
    width: 100%; /* Full width of the container */
    border-collapse: collapse; /* Ensures borders collapse into one */
    margin-top: 0px;
}

th, td {
    padding: 5px;
    text-align: left; /* Center align text */
    border: 0px solid #ddd; /* Light gray border */
}

th {
    background-color: #f4f4f4; /* Light gray background for headers */
}

tr:nth-child(even) {
    /*background-color: #f9f9f9;*/ /* Alternate row colors */
    background-color: #ffffff;
}

th:nth-child(1), td:nth-child(1) {
    width: 25%;
}

th:nth-child(2), td:nth-child(2) {
    width: 25%;
}

th:nth-child(3), td:nth-child(3) {
    width: 25%;
}

th:nth-child(4), td:nth-child(4) {
    width: 25%;
}

tr:hover {
    /*background-color: #f1f1f1;*/ /* Highlight row on hover */
    background-color: #ffffff;
}

/* Footer Styling */
.footer {
    background-color: #ffffff;
    color: gray;
    padding: 5px;
    text-align: right;
}

    .footer ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

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

            .footer ul li a {
                color: gray;
                text-decoration: none;
                font-size: 1rem;
            }

                .footer ul li a:hover {
                    text-decoration: underline; /* Underline links on hover */
                }

/* Styling the black button */
.black-button {
    position: relative; /* Absolutely position the button */
    /*top: 50%;*/ /* Vertically center the button relative to the content */
    /*right: 20%;*/ /* 20% margin from the right side */
    transform: translateY(-50%); /* Adjust for true vertical centering */
    background-color: black; /* Black background */
    color: white; /* White text */
    border: none;
    padding: 12px 20px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-top: 20px;
}

    .black-button:hover {
        background-color: #444; /* Darker shade of black when hovered */
    }
/* Make the image responsive */
.responsive-image {
    max-width: 78%; /* Ensures the image doesn't exceed the cell width */
    height: auto; /* Maintains the aspect ratio */
    margin-bottom: 10px;
    align-items: center;
}
.responsive-image-content {
    max-width: 78%; /* Ensures the image doesn't exceed the cell width */
    height: auto; /* Maintains the aspect ratio */
    margin-bottom: 5px;
    border-radius: 10px;
}

.linked-image {
    width: 100%; /* Make the image fill its container */
    max-width: 25px; /* Limit maximum size */
    height: auto; /* Maintain aspect ratio */
    border: none; /* Remove any default border (if present) */
    display: block; /* Removes inline space around the image */
    margin: 0 auto; /* Center the image */
}

.copyright {
    margin: 0; /* Remove margin from the paragraph */
    font-size: 14px; /* Font size for copyright */
    color: #333; /* Text color */
}

/* Styling for the list */
.social-links {
    display: flex; /* Align items horizontally */
    justify-content: center; /* Center horizontally */
    list-style: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    margin-top:40px;
}

    /* Styling for individual list items */
    .social-links li {
        margin: 0 10px; /* Add spacing between items */
    }

/* Optional: Make the images responsive */
.linked-image {
    width: 25px; /* Set image width */
    height: auto; /* Maintain aspect ratio */
}

.contact-section {
    max-width: 100%;
    height: 100%;
    margin: 10px 10px 10px 10px;
    padding: 40px;
    background-color: transparent;
    border-radius: 10px;
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
}

.logo-contact {
    text-align: center;
    margin-bottom: 5px;
}

    .logo-contact img {
        max-width: 280px;
        height: auto;
    }

.contact-details {
    text-align: center;
}

.contact-item {
    margin: 10px 0;
    font-size: 16px;
    color: white;
}

    .contact-item i {
        margin-right: 10px;
        color: whitesmoke;
    }

    .contact-item a {
        text-decoration: none;
        color: #333;
    }

        .contact-item a:hover {
            text-decoration: underline;
        }

.contact-item-pb {
    margin: 10px 0;
    font-size: 16px;
    color: #333;
}

    .contact-item-pb i {
        margin-right: 10px;
        color: #007bff;
    }

    .contact-item-pb a {
        text-decoration: none;
        color: #333;
    }

.countdown {
    font-size: 32px;
    color: #333;
}

.logo-contact-big {
    text-align: center;
    margin-bottom: 5px;
}

    .logo-contact-big img {
        max-width: 560px;
        height: auto;
    }

/* Responsive Design */
@media (max-width: 1560px) {
    .header {
        height: 70px; /* Adjust header height for smaller screens */
        padding: 0 15px;
    }

    .header-button {
        font-size: 14px; /* Slightly smaller button font size */
        padding: 8px 16px;
    }

    .full-width-image {
        position: relative;
        width: 100%; /* Full viewport width */
        height: 30vw; /* Full viewport height */
    }

    table {
        display: block; /* Treat the table as a block element */
        width: 100%; /* Full width of the container */
    }

    thead {
        display: none; /* Hide table headers */
    }

    tr {
        display: block; /* Treat each row as a block element */
        margin-bottom: 15px; /* Add spacing between rows */
        width: 100%; /* Ensure each row spans full width */
    }

    td {
        display: block; /* Make each cell a block element */
        width: 100%; /* Ensure each cell spans full width of the row */
        text-align: left; /* Align text to the left */
        padding: 10px; /* Add padding for spacing */
        border-bottom: 1px solid #ddd; /* Optional: Add a border for separation */
    }

        td:before {
            content: attr(data-label); /* Use the `data-label` attribute for labels */
            font-weight: bold;
            width: 100%;
            display: block; /* Ensure the label is on its own line */
            margin-bottom: 5px; /* Add spacing between the label and content */
        }

        th:nth-child(1), td:nth-child(1) {
            width: 100%;
        }

        th:nth-child(2), td:nth-child(2) {
            width: 100%;
            text-align: center;
        }

        th:nth-child(3), td:nth-child(3) {
            width: 100%;
            text-align: center;
        }

        th:nth-child(4), td:nth-child(4) {
            width: 100%;
            text-align: center;
        }
}
@media (max-width: 1300px) {
    .header {
        height: 70px; /* Adjust header height for smaller screens */
        padding: 0 15px;
    }

    .header-button {
        font-size: 14px; /* Slightly smaller button font size */
        padding: 8px 16px;
    }

    .full-width-image {
        position: relative;
        width: 100%; /* Full viewport width */
        height: 25vw; /* Full viewport height */
    }
    table {
        display: block; /* Treat the table as a block element */
        width: 100%; /* Full width of the container */
    }

    thead {
        display: none; /* Hide table headers */
    }

    tr {
        display: block; /* Treat each row as a block element */
        margin-bottom: 15px; /* Add spacing between rows */
        width: 100%; /* Ensure each row spans full width */
    }

    td {
        display: block; /* Make each cell a block element */
        width: 100%; /* Ensure each cell spans full width of the row */
        text-align: left; /* Align text to the left */
        padding: 10px; /* Add padding for spacing */
        border-bottom: 1px solid #ddd; /* Optional: Add a border for separation */
    }

        td:before {
            content: attr(data-label); /* Use the `data-label` attribute for labels */
            font-weight: bold;
            width: 100%;
            display: block; /* Ensure the label is on its own line */
            margin-bottom: 5px; /* Add spacing between the label and content */
        }
        th:nth-child(1), td:nth-child(1) {
            width: 100%;
        }

        th:nth-child(2), td:nth-child(2) {
            width: 100%;
            text-align: center;
        }

        th:nth-child(3), td:nth-child(3) {
            width: 100%;
            text-align: center;
        }

        th:nth-child(4), td:nth-child(4) {
            width: 100%;
            text-align: center;
        }
}
@media (max-width: 1150px) {
    .header {
        height: 70px; /* Adjust header height for smaller screens */
        padding: 0 15px;
    }

    .header-button {
        font-size: 14px; /* Slightly smaller button font size */
        padding: 8px 16px;
    }

    .full-width-image {
        position: relative;
        width: 100%; /* Full viewport width */
        height: 35vw; /* Full viewport height */
    }
    table {
        display: block; /* Treat the table as a block element */
        width: 100%; /* Full width of the container */
    }

    thead {
        display: none; /* Hide table headers */
    }

    tr {
        display: block; /* Treat each row as a block element */
        margin-bottom: 15px; /* Add spacing between rows */
        width: 100%; /* Ensure each row spans full width */
    }

    td {
        display: block; /* Make each cell a block element */
        width: 100%; /* Ensure each cell spans full width of the row */
        text-align: left; /* Align text to the left */
        padding: 10px; /* Add padding for spacing */
        border-bottom: 1px solid #ddd; /* Optional: Add a border for separation */
    }

        td:before {
            content: attr(data-label); /* Use the `data-label` attribute for labels */
            font-weight: bold;
            width: 100%;
            display: block; /* Ensure the label is on its own line */
            margin-bottom: 5px; /* Add spacing between the label and content */
        }

        th:nth-child(1), td:nth-child(1) {
            width: 100%;
        }

        th:nth-child(2), td:nth-child(2) {
            width: 100%;
            text-align: center;
        }

        th:nth-child(3), td:nth-child(3) {
            width: 100%;
            text-align: center;
        }

        th:nth-child(4), td:nth-child(4) {
            width: 100%;
            text-align: center;
        }
}
@media (max-width: 1120px) {
    .header {
        height: 70px; /* Adjust header height for smaller screens */
        padding: 0 15px;
    }

    .header-button {
        font-size: 14px; /* Slightly smaller button font size */
        padding: 8px 16px;
    }

    .full-width-image {
        position: relative;
        width: 100%; /* Full viewport width */
        height: 35vw; /* Full viewport height */
    }
        .full-width-image .content h1 {
            font-size: 4rem; /* Adjust size as needed */
            margin: 0;
            color: azure;
        }

        .full-width-image .content p {
            font-size: 2rem;
            color: azure;
        }
    table {
        display: block; /* Treat the table as a block element */
        width: 100%; /* Full width of the container */
    }

    thead {
        display: none; /* Hide table headers */
    }

    tr {
        display: block; /* Treat each row as a block element */
        margin-bottom: 15px; /* Add spacing between rows */
        width: 100%; /* Ensure each row spans full width */
    }

    td {
        display: block; /* Make each cell a block element */
        width: 100%; /* Ensure each cell spans full width of the row */
        text-align: left; /* Align text to the left */
        padding: 10px; /* Add padding for spacing */
        border-bottom: 1px solid #ddd; /* Optional: Add a border for separation */
    }

        td:before {
            content: attr(data-label); /* Use the `data-label` attribute for labels */
            font-weight: bold;
            width: 100%;
            display: block; /* Ensure the label is on its own line */
            margin-bottom: 5px; /* Add spacing between the label and content */
        }

        th:nth-child(1), td:nth-child(1) {
            width: 100%;
        }

        th:nth-child(2), td:nth-child(2) {
            width: 100%;
            text-align: center;
        }

        th:nth-child(3), td:nth-child(3) {
            width: 100%;
            text-align: center;
        }

        th:nth-child(4), td:nth-child(4) {
            width: 100%;
            text-align: center;
        }
}
@media (max-width: 860px) {
    .header {
        height: 70px; /* Adjust header height for smaller screens */
        padding: 0 15px;
    }

    .header-button {
        font-size: 14px; /* Slightly smaller button font size */
        padding: 8px 16px;
    }

    .full-width-image {
        position: relative;
        width: 100%; /* Full viewport width */
        height: 55vw; /* Full viewport height */
    }

        .full-width-image .content h1 {
            font-size: 3rem; /* Adjust size as needed */
            margin: 0;
            color: azure;
        }

        .full-width-image .content p {
            font-size: 1rem;
            color: azure;
        }
    table {
        display: block; /* Treat the table as a block element */
        width: 100%; /* Full width of the container */
    }

    thead {
        display: none; /* Hide table headers */
    }

    tr {
        display: block; /* Treat each row as a block element */
        margin-bottom: 15px; /* Add spacing between rows */
        width: 100%; /* Ensure each row spans full width */
    }

    td {
        display: block; /* Make each cell a block element */
        width: 100%; /* Ensure each cell spans full width of the row */
        text-align: left; /* Align text to the left */
        padding: 10px; /* Add padding for spacing */
        border-bottom: 1px solid #ddd; /* Optional: Add a border for separation */
    }

        td:before {
            content: attr(data-label); /* Use the `data-label` attribute for labels */
            font-weight: bold;
            width: 100%;
            display: block; /* Ensure the label is on its own line */
            margin-bottom: 5px; /* Add spacing between the label and content */
        }

        th:nth-child(1), td:nth-child(1) {
            width: 100%;
        }

        th:nth-child(2), td:nth-child(2) {
            width: 100%;
            text-align: center;
        }

        th:nth-child(3), td:nth-child(3) {
            width: 100%;
            text-align: center;
        }

        th:nth-child(4), td:nth-child(4) {
            width: 100%;
            text-align: center;
        }
}
@media (max-width: 768px) {
    .header {
        height: 70px; /* Adjust header height for smaller screens */
        padding: 0 15px;
    }

    .header-button {
        font-size: 14px; /* Slightly smaller button font size */
        padding: 8px 16px;
    }
    .full-width-image {
        position: relative;
        width: 100%; /* Full viewport width */
        height: 65vw; /* Full viewport height */
    }

        .full-width-image .content h1 {
            font-size: 3rem; /* Adjust size as needed */
            margin: 0;
            color: azure;
        }

        .full-width-image .content p {
            font-size: 1rem;
            color: azure;
        }
    table {
        display: block; /* Treat the table as a block element */
        width: 100%; /* Full width of the container */
    }

    thead {
        display: none; /* Hide table headers */
    }

    tr {
        display: block; /* Treat each row as a block element */
        margin-bottom: 15px; /* Add spacing between rows */
        width: 100%; /* Ensure each row spans full width */
    }

    td {
        display: block; /* Make each cell a block element */
        width: 100%; /* Ensure each cell spans full width of the row */
        text-align: left; /* Align text to the left */
        padding: 10px; /* Add padding for spacing */
        border-bottom: 1px solid #ddd; /* Optional: Add a border for separation */
    }

        td:before {
            content: attr(data-label); /* Use the `data-label` attribute for labels */
            font-weight: bold;
            width: 100%;
            display: block; /* Ensure the label is on its own line */
            margin-bottom: 5px; /* Add spacing between the label and content */
        }

        th:nth-child(1), td:nth-child(1) {
            width: 100%;
        }

        th:nth-child(2), td:nth-child(2) {
            width: 100%;
            text-align: center;
        }

        th:nth-child(3), td:nth-child(3) {
            width: 100%;
            text-align: center;
        }

        th:nth-child(4), td:nth-child(4) {
            width: 100%;
            text-align: center;
        }
}
@media screen and (max-width: 768px) {
    .header {
        height: 70px; /* Adjust header height for smaller screens */
        padding: 0 15px;
    }

    .header-button {
        font-size: 14px; /* Slightly smaller button font size */
        padding: 8px 16px;
    }

    .full-width-image {
        position: relative;
        width: 100%; /* Full viewport width */
        height: 65vw; /* Full viewport height */
    }

    h1 {
        font-size: 8px;
    }

    p {
        font-size: 6px;
    }

    table {
        display: block; /* Treat the table as a block element */
        width: 100%; /* Full width of the container */
    }

    thead {
        display: none; /* Hide table headers */
    }

    tr {
        display: block; /* Treat each row as a block element */
        margin-bottom: 15px; /* Add spacing between rows */
        width: 100%; /* Ensure each row spans full width */
    }

    td {
        display: block; /* Make each cell a block element */
        width: 100%; /* Ensure each cell spans full width of the row */
        text-align: left; /* Align text to the left */
        padding: 10px; /* Add padding for spacing */
        border-bottom: 1px solid #ddd; /* Optional: Add a border for separation */
    }

        td:before {
            content: attr(data-label); /* Use the `data-label` attribute for labels */
            font-weight: bold;
            width: 100%;
            display: block; /* Ensure the label is on its own line */
            margin-bottom: 5px; /* Add spacing between the label and content */
        }

        th:nth-child(1), td:nth-child(1) {
            width: 100%;
        }

        th:nth-child(2), td:nth-child(2) {
            width: 100%;
            text-align: center;
        }

        th:nth-child(3), td:nth-child(3) {
            width: 100%;
            text-align: center;
        }

        th:nth-child(4), td:nth-child(4) {
            width: 100%;
            text-align: center;
        }
}