/* Reset some basic styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Enable smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Import Google Font */
body {
    font-family: 'Poppins', sans-serif;
    color: #333;
    background-color: #f7f7f7d8;
    line-height: 1.7;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Navigation Menu */
header {
    background-color: #f4f6f8;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000; /* Ensures the menu is always on top */
    width: 100%;
    box-shadow: 0 4px 10px rgba(42, 72, 87, 0.1); /* Optional shadow for a nicer effect */
}

nav {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Social Media Icons */
.social-icons {
    display: flex;
    gap: 15px; /* Adds space between icons */
}

.social-icons a {
    color: rgb(143, 206, 231);
    font-size: 1.5rem; /* Size of the icons */
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #0e8bbd; /* Changes color on hover to match the theme */
}

ul.menu {
    display: flex;
    list-style: none;
    gap: 20px;
    justify-content: space-around;
}

ul.menu li a {
    color: rgb(193, 199, 201);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 600;
    transition: background 0.3s ease, color 0.3s ease;
}

.lang-hu ul.menu li a {
    font-size: 0.8rem;  /* Kleinere Schriftgröße */
    padding: 6px 8px;  /* Weniger Padding */
}

ul.menu li a:hover {
    background-color: #cdd9dd; /* Tomato color for hover */
    color: rgb(164, 173, 175);
}

.lang-switch button {
    background-color: #cbcfd1;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s ease;
}

.lang-switch button:hover {
    background-color: #d1d1d1;
}

/* Responsive Design - Menü auf Mobilgeräten */
@media (max-width: 768px) {
    ul.menu {
        flex-direction: wrap; /* Menü vertikal anordnen */
        gap: 10px; /* Geringerer Abstand zwischen den Menüpunkten */
        text-align: center; /* Zentriere die Menüpunkte */
    }

    ul.menu li a {
        padding: 10px 0; /* Weniger Padding, damit die Links besser passen */
        font-size: 1rem; /* Größere Schriftgröße auf mobilen Geräten */
    }
}



/* Burger-Menü für Mobilgeräte */
.burger {
    display: none;
    font-size: 2rem;
    cursor: pointer;
    color: white;
    padding: 10px;
}

@media (max-width: 768px) {
    .burger {
        display: block; /* Zeige das Burger-Icon auf kleinen Bildschirmen */
    }

    ul.menu {
        display: none; /* Menü wird ausgeblendet */
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    ul.menu.active {
        display: flex; /* Zeige das Menü an, wenn es aktiv ist */
    }

    ul.menu li {
        margin-bottom: 10px;
    }

    ul.menu li a {
        padding: 10px 0;
        font-size: 1rem;
    }
}

/* Main Content */
section {
    padding: 30px 10px 20px 10px; /* Adjust the top padding to match the height of your sticky menu */
    max-width: 1200px;
    margin: 0 auto;
    background-color:  #ffffffde;
    margin-bottom: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    scroll-margin-top: 60px;  /* 80px Platz über den Sektionen */
}

h1, h2 {
    color: #333;
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 2.5rem;
    text-align: center;
}

h4 {
    color: #333;
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 1.0rem;
    text-align: center;
}

p {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 10px;
    text-align: center;
}

/* Styling for the small informational text */
.small-text {
    font-size: 0.7rem; /* Smaller font size */
    color: #555; /* Light grey color for less emphasis */
    margin: 5px 0;
    text-align: center;
    line-height: 0.2;
}

/* Gallery Section - Grid Layout */
/* Grid layout for larger screens (Desktop and Tablet) */
.gallery-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    max-width: 1200px; /* Maximalbreite der Galerie */
    margin: 0 auto; /* Zentriere die Galerie */
    overflow: hidden; /* Verhindere Überlauf */
}

.gallery-images img {
    width: 100%;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.gallery-images img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Footer Styling */
footer {
    background-color: #333;
    color: white;
    padding: 20px;
    text-align: center;
}



/* Für sehr große Bildschirme (über 1600px) */
@media (min-width: 1600px) {
    .gallery-images {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Größere Spalten auf großen Bildschirmen */
        gap: 30px; /* Größerer Abstand zwischen den Bildern */
    }
}

/* Für Tablets und kleinere Geräte */
@media (max-width: 768px) {
    .gallery-images {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Kleinere Spalten auf kleineren Bildschirmen */
        gap: 10px; /* Weniger Abstand */
        max-width: 100%; /* Nutze die volle Breite */
    }
}

/* Für sehr kleine Bildschirme (Mobilgeräte) */
@media (max-width: 480px) {
    .gallery-images {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Noch kleinere Spalten auf sehr kleinen Bildschirmen */
        gap: 5px; /* Minimaler Abstand */
        max-width: 100%;
    }
}


/* Responsive Design */
@media (max-width: 768px) {
    ul.menu {
        flex-direction: column;
        text-align: center;
    }

    section {
        padding: 20px;
    }
}




/* Services Section */
#services {
    padding: 50px 20px;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

#services-heading {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

/* Cards Layout */
.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* Individual Card */
.card {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Full-width Card */
.full-width-card {
    grid-column: span 3; /* Make the card span all 3 columns */
    height: auto; /* Let the content dictate the height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 20px;
    background-color: white;
    border: 2px solid #ddd;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow-wrap: break-word; /* Prevent long words from overflowing */
    word-wrap: break-word; /* Legacy support */
    hyphens: auto; /* Allow automatic hyphenation */
}

/* Extra info text for full-width card */
.card-extra-info {
    font-size: 0.8rem;
    margin: 1px 0;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.card-title-extra {
    font-size: 1.0rem;
    margin-bottom: 10px;
}

.card-duration {
    font-size: 2rem;
    color: #555;
    margin-bottom: 10px;
    font-weight: bold; /* Makes the duration stand out */
}

.card-price {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 15px;
}

.card-description {
    font-size: 1rem;
    color: #666;
    margin-bottom: 10px;
}

.card-icon {
    font-size: 3rem;
    color: #a8bfca;
    margin-bottom: 10px;
}

/* Adjustments for laptops and desktops (max-width: 1200px) */
@media (max-width: 1200px) {
    .full-width-card {
        grid-column: span 2; /* Take up 2 columns on smaller screens */
    }
}

/* For smaller screens (Tablets and smaller devices) */
@media (max-width: 768px) {
    .cards-container {
        grid-template-columns: 1fr; /* One column on smaller screens */
        gap: 15px; /* Less gap on smaller screens */
    }

    .full-width-card {
        grid-column: 1 / -1; /* Full-width on mobile devices */
        padding: 15px; /* Reduce padding */
    }
}

/* For very small screens (e.g., mobile) */
@media (max-width: 480px) {
    .cards-container {
        grid-template-columns: 1fr; /* One column on small screens */
        gap: 10px;
    }

    .full-width-card {
        grid-column: 1 / -1; /* Full-width on small devices */
        padding: 10px; /* Less padding */
        font-size: 0.9rem;
    }
}



/* Styling für die Featurecards */
.feature-card-container #main-features {
    text-align: center;
    padding: 50px 20px;
}

.feature-card-container .feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    justify-content: center;
}

/* Karten-Container für die Drehung */
.feature-card-container .featurecard-container {
    perspective: 1000px;
}

.feature-card-container .featurecard {
    width: 100%;
    height: 300px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s ease-in-out;
}

.feature-card-container .featurecard-front, .feature-card-container .featurecard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Vorderseite der Featurecard */
.feature-card-container .featurecard-front {
    background-color: #f4f6f8;
    color: rgb(164, 173, 175);
    font-size: 1.5rem;
}

/* Rückseite der Featurecard */
.feature-card-container .featurecard-back {
    background-color: white;
    color: #333;
    transform: rotateY(180deg);
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Wenn die Featurecard gedreht ist */
.feature-card-container .featurecard.flipped {
    transform: rotateY(180deg);
}

/* Hover-Effekt für interaktive Karten */
.featurecard {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.featurecard:hover {
    transform: scale(1.15); /* Vergrößerung */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Tieferer Schatten */
}

/* Galerie-Bild-Container */
.gallery-image-container {
    position: relative;
    overflow: hidden; /* Verhindert, dass das vergrößerte Bild aus dem Container herausragt */
}

/* Galerie-Container */
.gallery-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* Bilder im Grid anzeigen */
/* Sicherstellen, dass das Grid nicht über den Bildschirm hinausragt */
.gallery-images {
    max-width: 100%; /* Verhindert, dass die Galerie breiter als der Bildschirm wird */
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px; /* Abstand zwischen den Bildern */
}

/* Für kleinere Bildschirme (Tablets und Mobile) */
@media (max-width: 768px) {
    .gallery-images {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Passe die Spaltengröße auf mobilen Geräten an */
        gap: 5px; /* Weniger Abstand zwischen den Bildern */
    }
}

/* Bilder in fester Größe */
.gallery-image {
    width: auto;        /* Automatische Breite */
    height: 300px;      /* Einheitliche Höhe für alle Bilder */
    max-width: 100%;    /* Verhindert, dass die Breite zu groß wird */
    object-fit: contain; /* Verhindert das Beschneiden von Inhalten */
    display: block;
    margin: auto;
    transition: transform 0.3s ease-in-out, z-index 0.3s ease-in-out, cursor 0.3s; /* Weiche Transition für Vergrößerung und Cursor-Änderung */
    cursor: zoom-out; /* Zeigt an, dass der Benutzer vergrößern kann */
}

/* Bild vergrößern, wenn der Benutzer mit der Maus darüber fährt */
/* Hinzufügen eines Schattens und Rand beim Hover */
.gallery-image:hover {
    transform: scale(1.2);
    z-index: 10;
    cursor: zoom-in;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Leichter Schatten beim Hover */
}

/* Pfeile zum Navigieren */
.gallery-arrow {
    position: absolute;
    top: 50%; /* Zentriere den Pfeil vertikal */
    transform: translateY(-50%); /* Zentriere den Pfeil */
    padding: 20px; /* Größere Pfeile */
    font-size: 40px; /* Vergrößere die Pfeile */
    color: white;
    background-color: rgba(0, 0, 0, 0.5); /* Leicht transparenter Hintergrund */
    border: none;
    cursor: pointer;
    z-index: 20; /* Stelle sicher, dass die Pfeile über den Bildern liegen */
}


/* Linker Pfeil */
.left-arrow {
    left: 10px; /* Halte den Pfeil 10px vom linken Rand entfernt */
}

/* Rechter Pfeil */
.right-arrow {
    right: 10px; /* Halte den Pfeil 10px vom rechten Rand entfernt */
}

/* Für kleinere Bildschirme */
@media (max-width: 768px) {
    .gallery-arrow {
        padding: 15px; /* Verkleinere die Pfeile auf kleineren Bildschirmen */
        font-size: 30px; /* Kleinere Pfeile auf mobilen Geräten */
    }

    .left-arrow {
        left: 5px; /* Halte den Pfeil näher am Rand auf kleinen Bildschirmen */
    }

    .right-arrow {
        right: 5px; /* Halte den Pfeil näher am Rand auf kleinen Bildschirmen */
    }
}

/* Modal für vergrößerte Bilder */
.modal {
    display: none; /* Versteckt das Modal, bis es geöffnet wird */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Halbtransparentes Schwarz */
    justify-content: center;
    align-items: center;
}

/* Modal-Bild */
.modal-content {
    max-width: 90%;
    max-height: 90%;
    margin: auto;
    display: block;
    object-fit: contain;
}

/* Schließen-Button */
.close {
    position: absolute;
    top: 10px;
    right: 25px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}

/* Kontaktformular-Container */
form {
    display: flex;
    flex-direction: column;
    max-width: 800px; /* Maximale Breite des Formulars */
    margin: 0 auto; /* Zentrieren */
    padding: 20px;
    gap: 15px; /* Abstand zwischen den Formularfeldern */
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f9f9f9;
}

/* Einzeilige Felder */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea {
    width: 100%; /* Nimmt die volle Breite des Containers */
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Bezieht Padding in die Breitenberechnung ein */
}

/* Flex-Box für mehrere Felder in einer Reihe */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Abstand zwischen den Feldern */
    align-items: center;
}

/* Gleiche Breite für jedes Feld */
.form-row > * {
    flex: 1; /* Lässt die Felder gleichmäßig wachsen */
    min-width: 150px; /* Mindestbreite, um Felder nicht zu klein zu machen */
}

/* Label-Ausrichtung */
label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block; /* Sicherstellen, dass das Label über dem Input steht */
}

/* Zusätzliche Button-Styling */
button {
    padding: 10px 20px;
    font-size: 1rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
}

button:hover {
    background-color: #0056b3;
}

footer {
    background-color: #4b4848;
    color: white;
    text-align: center;
    padding: 20px;
    position: relative;
    bottom: 0;
    width: 100%;
}

footer p {
    color: white;
    margin: 0;
    font-size: 0.9rem;
}

/* Allgemeines Styling für die Box */
.content-box {
    max-width: 90%; /* Breite passt sich der Bildschirmgröße an */
    width: 800px; /* Maximale Breite auf größeren Bildschirmen */
    margin: 40px auto; /* Zentriert die Box horizontal */
    padding: 10px;
    background-color: #f8f8f8;
    border: 2px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Titel (h1) im Content-Box */
.content-box h1 {
    text-align: center;
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 20px;
}

/* Text innerhalb der Box */
.content-box p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    text-align: center;
}

/* Responsive Anpassungen für kleinere Bildschirme */
@media (max-width: 768px) {
    .content-box {
        width: 100%; /* Box nimmt die gesamte Breite des Bildschirms ein */
        padding: 15px; /* Weniger Padding, um Platz zu sparen */
        margin: 20px auto; /* Weniger Abstand an den Rändern */
    }

    .content-box h1 {
        font-size: 1.5rem; /* Kleinere Schriftgröße für den Titel */
    }

    .content-box p {
        font-size: 0.9rem; /* Kleinere Schriftgröße für den Text */
    }
}

.button-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 400px;
    margin: 40px auto;
}

.button {
    display: block;
    width: 100%;

    padding: 15px;
    text-align: center;
    background-color: #c3d1e0;
    color: white;
    text-decoration: none;
    font-size: 18px;
    border-radius: 8px;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #7592b3;
}

ul {
    margin-left: 20px;
    list-style-type: disc;
}

li {
    margin: 5px 0;
}

/* Stil für die Links */
/* Stil für die Links */
.useful-links {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap; /* Flexibel für mobile Bildschirme */
    gap: 20px; /* Abstand zwischen den Links */
    justify-content: center; /* Zentriert die Links */
}

.useful-links li {
    margin: 0;
}

.useful-links a {
    text-decoration: none;
    color: #0056b3;
    transition: color 0.3s;
    font-size:  0.9rem;
}

.useful-links a:hover {
    color: #003366;
}

/* Anpassung für kleinere Bildschirme */
@media (max-width: 600px) {
    .useful-links {
        flex-direction: column; /* Links untereinander für kleine Bildschirme */
        gap: 10px; /* Kleinerer Abstand für mobile Ansicht */
    }
}

.image img {
    max-width: 150px; /* Beállít egy fix maximális szélességet */
    width: 100%;      /* Biztosítja, hogy kisebb képernyőkön a kép arányosan méreteződjön */
    height: auto;     /* Az arányok megőrzése érdekében */
    border-radius: 10px; /* Lekerekített sarkok, ha szeretnéd */
}

#kontakt {
    margin-top: 40px;
    text-align: center;
}

#kontakt img {
    margin-top: 10px;
    max-width: 100%;
    height: auto;
}