body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    overflow-x: hidden; /* Oldalsó görgetés letiltom jo */
}

header {
    background-color: #333;
    padding: 10px 0;
    text-align: center;
}

.logo {
    width: 150px;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding: 10px 20px;
}

nav ul li a:hover {
    background-color: #555;
    border-radius: 5px;
}

/* Képgaléria */
.image-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding-top: 20px;
}

.image-gallery img {
    width: 200px; /* Az alapértelmezett szélesség minden képre */
    height: auto; /* Automatikus magasság a képarány megtartásához */
    border-radius: 8px;
    border: 1px solid #ccc;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

/* Hover hatás (kép nagyítása és elforgatása) */
.image-gallery img:hover {
    transform: scale(1.2) rotate(5deg);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Nagyított kép kattintásra */
.zoomable.zoomed {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(5) rotateX(0deg) rotateY(0deg); /* Kezdő forgatás */
    max-width: 90vw; /* Maximális szélesség a kijelző 90%-a */
    max-height: 90vh; /* Maximális magasság a kijelző 90%-a */
    z-index: 1000;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    background-color: white;
    cursor: grab; /* Grab kurzor */
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

/* Hover hatás kikapcsolása nagyított állapotban */
.zoomable.zoomed:hover {
    transform: translate(-50%, -50%) scale(5); /* Hover nem befolyásolja a nagyítást */
}

/* Forgatás közben aktív kurzor */
.zoomable.zoomed:active {
    cursor: grabbing; /* Grabbing kurzor */
}

/* Alapértelmezett kurzor a képeken */
.zoomable {
    cursor: pointer;
}

/* Nagyított kép kurzora */
.zoomable.zoomed {
    cursor: grab;
}

/* Forgatás közben */
.zoomable.zoomed:active {
    cursor: grabbing;
}
/* Nagyított kép stílusai */
.zoomable.zoomed {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Középre helyezés */
    max-width: 90vw; /* A kép maximális szélessége a képernyő 90%-a */
    max-height: 90vh; /* A kép maximális magassága a képernyő 90%-a */
    z-index: 1000; /* Mindig a tetején legyen */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    background-color: white; /* Fehér háttér a jobb megjelenésért */
    cursor: grab; /* Forgatható kurzor */
    border-radius: 10px; /* Kerekített sarkok */
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}
/* Nagyított kép stílusai */
.zoomable.zoomed {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(5) rotateX(0deg) rotateY(0deg); /* Alap forgatás */
    max-width: 90vw; /* Maximális szélesség a kijelző 90%-a */
    max-height: 90vh; /* Maximális magasság a kijelző 90%-a */
    z-index: 1000;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    background-color: white;
    cursor: grab; /* Forgatható kurzor */
    border-radius: 10px; /* Kerekített sarkok */
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

/* Forgatás közben */
.zoomable.zoomed:active {
    cursor: grabbing; /* Forgatás aktív állapota */
}
/* Képek konténerének formázása */
.image-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
}

/* Árak stílusa */
.price {
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-align: center;
}
.image-gallery {
    display: flex; /* Flexbox elrendezés */
    flex-wrap: wrap; /* Tördelés több sorba */
    justify-content: center; /* Középre igazítás */
    gap: 20px; /* Távolság a képek között */
    padding: 20px; /* Margó a galéria körül */
}

.image-item {
    display: flex;
    flex-direction: column; /* Kép és ár egymás alatt */
    align-items: center; /* Középre igazítás */
    max-width: 200px; /* Maximális szélesség */
}

.image-item img {
    width: 100%; /* Kép igazítása a konténer szélességéhez */
    height: auto; /* Magasság automatikus igazítása */
    border-radius: 8px; /* Kerekített sarkok */
    border: 1px solid #ccc; /* Finom keret */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover animáció */
}

.image-item img:hover {
    transform: scale(1.2); /* Hover hatás: nagyítás */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Árnyék hover esetén */
}

.price {
    margin-top: 10px; /* Távolság a kép alatt */
    font-size: 16px; /* Betűméret */
    font-weight: bold; /* Kiemelt szöveg */
    color: #333; /* Szöveg színe */
    text-align: center; /* Középre igazítás */
}
/* Képgaléria konténer */
.image-gallery {
    display: flex; /* Flexbox elrendezés */
    flex-wrap: wrap; /* Több sorba tördelés */
    justify-content: center; /* Képek középre igazítása */
    gap: 20px; /* Távolság a képek között */
    padding: 20px; /* Térköz a galéria körül */
}

/* Kép és ár konténere */
.image-item {
    display: flex;
    flex-direction: column; /* Kép és ár egymás alatt */
    align-items: center; /* Középre igazítás */
    max-width: 150px; /* Maximális szélesség a konténerhez */
    text-align: center;
}

/* Kép alapértelmezett stílusa */
.image-item img {
    width: 100%; /* Teljes szélesség a konténerhez igazítva */
    height: auto; /* Automatikus magasság a képarány megtartásához */
    border-radius: 8px; /* Kerekített sarkok */
    border: 1px solid #ccc; /* Finom keret */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover animáció */
}

/* Hover hatás */
.image-item img:hover {
    transform: scale(1.2); /* Enyhe nagyítás hover esetén */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Árnyék hover esetén */
}

/* Nagyított kép (zoomolt állapot) */
.zoomable.zoomed {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(2.5); /* Nagyítás méretének csökkentése */
    max-width: 600px; /* Maximális szélesség */
    max-height: 600px; /* Maximális magasság */
    z-index: 1000; /* Legfelül helyezkedjen el */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Árnyék nagyításnál */
    border-radius: 10px; /* Kerekített sarkok */
    background-color: white; /* Fehér háttér */
    transition: transform 0.2s ease, box-shadow 0.3s ease; /* Sima animáció */
}

/* Hover kikapcsolása nagyított állapotban */
.zoomable.zoomed:hover {
    transform: translate(-50%, -50%) scale(2.5); /* Hover ne változtassa a nagyítást */
}

/* Árak stílusa */
.price {
    margin-top: 10px; /* Távolság a kép alatt */
    font-size: 16px; /* Betűméret */
    font-weight: bold; /* Kiemelt szöveg */
    color: #333; /* Szöveg színe */
    text-align: center; /* Középre igazítás */
}

/* Címek és leírások középre helyezése */
.content-section h2 {
    text-align: center; /* Szöveg középre igazítása */
    font-size: 24px; /* Cím betűmérete */
    color: #333; /* Szöveg színe */
    margin-bottom: 10px; /* Térköz a cím alatt */
}

.content-section p {
    text-align: center; /* Leírás középre igazítása */
    font-size: 18px; /* Leírás betűmérete */
    color: #555; /* Szöveg színe */
    margin-bottom: 20px; /* Térköz a leírás alatt */
}