/* Alapstílusok */
body {
    background-color: #fefefe;
    width: 100%;
    overflow-x: hidden;
}

::placeholder {
    color: #adadad;
    opacity: 1; /* Firefox */
  }
  
  ::-ms-input-placeholder { /* Edge 12 -18 */
    color: #adadad;
  }

/* Betűtípusok */
@font-face {
    font-family: 'Raleway-Regular';
    src: url('../fonts/Raleway-Regular.woff2') format('woff2'),
         url('../fonts/Raleway-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway-Bold';
    src: url('../fonts/Raleway-Bold.woff2') format('woff2'),
         url('../fonts/Raleway-Bold.woff') format('woff');
    font-weight: bold; /* Javítottam a font-weight-et */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway-Black';
    src: url('../fonts/Raleway-Black.woff2') format('woff2'),
         url('../fonts/Raleway-Black.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Muli-Regular';
    src: url('../fonts/Muli-Regular.woff2') format('woff2'),
         url('../fonts/Muli-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Muli-Bold';
    src: url('../fonts/Muli-Bold.woff2') format('woff2'),
         url('../fonts/Muli-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Muli-Black';
    src: url('../fonts/Muli-Black.woff2') format('woff2'),
         url('../fonts/Muli-Black.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Alapstílusok */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Box model kezelés */
}

#site {
    max-width: 1920px;
    margin: 0 auto;
}

#header {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#header img {
    display: block;
    max-height: 80px;
}

#header-image {
    background-image: url('../img/header.jpg');
    background-repeat: no-repeat;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-size: contain;
}
#header-image::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: white;
  opacity: 0.2;
  pointer-events: none; /* lets clicks pass through */
}

#header-text {
    margin-left: 300px; /* Baloldali margó 300px-re */
    z-index: 1;
}

h1 {
    font-family: 'Muli-Black';
}

h2 {
    font-family: 'Muli-Bold';
}

h3 {
    font-family: 'Muli-Bold';
}

#header-text p {
    font-family: 'Muli-Bold';
}

@media (min-width: 1024px) {
    section {
        padding: 5rem;
        text-align: center;
    }
    #header-image {
        background-position: center center;
        min-height: 1010px;
    }
    
    /* Fejléc stílusai */
    h1 {
        text-transform: uppercase;
        font-size: 50pt; /* Alapértelmezett méret */
        margin: 0; /* Margin beállítás */
    }

    h2 {
        text-transform: uppercase;
        font-size: 37pt; /* Alapértelmezett méret */
        margin: 0; /* Margin beállítás */
    }

    h3 {
        font-size: 23pt; /* Alapértelmezett méret */
        margin: 0; /* Margin beállítás */
    }

    #header-text p {
        font-size: 18pt; /* További csökkentés */
        margin: 0; /* Margin beállítás */
    }
}

/* Média lekérdezés a kisebb képernyőkhöz */
@media (max-width: 1024px) {
    section {
        padding: 2rem;
        text-align: center;
    }
    #header-image {
        background-position: bottom center;
        min-height: 680px;
    }

    #header-image {
        justify-content: center; /* Középre igazít a kisebb képernyőn */
    }

    #header-text {
        margin-left: 0; /* Eltávolítja a bal oldali margót */
        text-align: center; /* Középre igazítja a szöveget */
    }

    h1 {
        font-size: 40pt; /* Csökkentett betűméret */
        margin: 0; /* Margin beállítás */
    }

    h2 {
        font-size: 30pt; /* Csökkentett betűméret */
        margin: 0; /* Margin beállítás */
    }

    h3 {
        font-size: 20pt; /* Csökkentett betűméret */
        margin: 0; /* Margin beállítás */
    }

    #header-text p {
        font-size: 16pt; /* Csökkentett betűméret */
        margin: 0; /* Margin beállítás */
    }
}

@media (max-width: 767px) {
    h1 {
        font-size: 30pt; /* További csökkentés */
        margin: 0; /* Margin beállítás */
    }

    h2 {
        font-size: 25pt; /* További csökkentés */
        margin: 0; /* Margin beállítás */
    }

    h3 {
        font-size: 18pt; /* További csökkentés */
        margin: 0; /* Margin beállítás */
    }

    #header-text p {
        font-size: 14pt; /* További csökkentés */
        margin: 0; /* Margin beállítás */
    }
}



/* Alapértelmezett stílus 1024px felett - Flexbox használata */
#content table {
    width: 100%;
    max-width: 630px;
    display: block;
    margin: 0 auto;
    border: 0;
    margin-top: 60px;
    margin-bottom: 60px;
}

#content table tr {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}



#content table tr td input,
#content table tr td select {
    width: 100%;
    height: 70px;
    border: 1px solid #717171;
    border-radius: 35px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 20px 30px;
    font-size: 16pt;
    font-family: 'Muli-Regular';
    color: #adadad;
}

#content table tr td input[type="checkbox"] {
    width: 25px;
    height: 25px;
    border: 1px solid #717171;
    border-radius: 35px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 20px 30px;
    font-size: 16pt;
    font-family: 'Muli-Regular';
    color: #adadad;
}

#content table tr td input[type="submit"] {
    width: 100%;
    height: 70px;
    border: 1px solid #717171;
    border-radius: 35px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 20px 30px;
    font-size: 16pt;
    font-family: 'Muli-Black';
    color: #ffffff;
    cursor: pointer;
    background-color: #e1312a;
    text-transform: uppercase;
}

#content table tr td span {
    margin-top: 5px;
    margin-bottom: 5px;
    display: block;
    border-radius: 50px;
    border: 10px solid #f4f3f0;
    width: 100%; /* Biztosítjuk, hogy a span is 100% széles legyen */
}

/* 1024px alatti képernyőn */
@media (max-width: 1024px) {
    #content table tr {
        /* 1024px alatt minden td külön sorba kerül */
        width: 100%;
    }

    #content table tr td {
        width: 100%; /* Minden cella 100%-os szélességet kap, hogy kitöltse a sort */
    }

    /* Ha szükséges margó, különálló cellák között */
    #content table tr td:not(:first-child) {
        margin-top: 15px;
    }

    /* Padding és margók eltávolítása a cellák között 1024px alatt */
    #content table tr:first-child td {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width: 1024px) {
    #content table tr:first-child td {
        width: 50%; /* Az első sorban a két mező (Vezetéknév, Keresztnév) osztozik a soron 1024px felett */
    }
    
    #content table tr:not(:first-child) td {
        width: 100%; /* A többi sorban a cellák teljes szélességet kapnak */
    }
}

#products {
    display: flex;
    flex-wrap: wrap; /* Engedélyezi az elemek több sorba rendezését */
    justify-content: space-between; /* Egyenletes elosztás az elemek között */
    gap: 20px; /* Távolság az elemek között */
}

#products div {
    display: flex;
    flex-direction: column; /* A kép és szöveg vertikálisan egymás alatt */
    align-items: center; /* Középre igazítás */
    width: calc(25% - 20px); /* Alapértelmezés szerint 4 oszlopban */
    box-sizing: border-box;
}

#products div div:first-child {
    background-repeat: no-repeat;
    background-size: contain; /* A kép teljesen kitölti a hátteret */
    background-position: center;
    width: 100%; /* Kép 100% szélesség */
    height: 200px; /* Állítható magasság */
}

/* Szöveg stílus */
#products div div:last-child {
    color: #4f4f4f;
    font-size: 16px;
    text-align: center;
    padding: 10px;
    font-family: 'Muli-Bold';
}

/* 1024px alatt legyen 2 oszlopos */
@media (max-width: 1024px) {
    #products div {
        width: calc(50% - 20px); /* Két elem per sor */
        min-width: 300px; /* Minimalizált szélesség, hogy az elemek ne legyenek túl kicsik */
    }
}

/* 768px alatt legyen 1 oszlopos */
@media (max-width: 768px) {
    #products div {
        width: 100%; /* Egy elem per sor */
        min-width: 0; /* Minimalizált szélesség, ha szükséges */
    }
}

/* 1024px felett legyen a minimális szélesség 300px */
@media (min-width: 1024px) {
    #products div {
        min-width: 300px; /* Minimalizált szélesség, ha szükséges */
    }
}

.goproducts {
    margin-top: 40px;
}

.goproducts span {
    margin-top: 5px;
    margin-bottom: 5px;
    display: block;
    border-radius: 50px;
    border: 10px solid #f4f3f0;
    width: 100%; /* Biztosítjuk, hogy a span is 100% széles legyen */
    max-width: 360px;
    margin: 0 auto;
}

.goproducts span button {
    font-family: 'Muli-Black';
    width: 100%;
    color: #e1312a;
    height: 55px;
    text-transform: uppercase;
    border-radius: 25px 25px 25px 25px;
    border: 1px solid #e1312a;
    background-color: #ffffff;
    cursor: pointer;
}

/* Tartalom és lábléc */
#content {
    width: 100%;
    max-width: 1920px;
}

#footer {
    background-color:#e1312a;
    color:#ffffff;
    text-align: center;
    font-family: 'Muli-Black';
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#footer a {
    color:#ffffff;
    text-decoration: none;
}

.error {
    border: 1px solid red !important; /* Piros szegély a hibás mezőknek */
}

/* Rejtjük el az alap checkboxot */
.custom-checkbox input[type="checkbox"] {
    display: none; /* Eltünteti a standard checkboxot */
}

/* A checkbox stílusa */
.custom-checkbox {
    display: flex; /* A szöveget és a checkboxot egy sorban helyezi el */
    align-items: center; /* Középre igazítja a checkboxot és a szöveget */
    cursor: pointer; /* A kurzor mutatja, hogy kattintható */
}

/* A checkbox megjelenése */
.custom-checkbox span {
    position: relative; /* Pozicionálja a checkboxhoz */
    padding-left: 30px; /* Hozzáad egy kis távolságot a szöveghez */
}

/* A hamis checkbox */
.custom-checkbox span:before {
    content: ""; /* Létrehozza a hamis checkboxot */
    display: inline-block; /* Inline elem, így a szöveg mellett helyezkedik el */
    width: 20px; /* Checkbox szélessége */
    height: 20px; /* Checkbox magassága */
    border: 1px solid #717171; /* Alapértelmezett keret */
    border-radius: 3px; /* Lekerekített sarkok */
    position: absolute; /* Pozicionálja a checkboxot */
    left: 0; /* Balra igazítja */
    top: 50%; /* Függőlegesen középre helyezi */
    transform: translateY(-50%); /* Középre igazítja */
    transition: border-color 0.3s; /* Átmenet a keret színéhez */
}

/* Checkbox kiválasztásakor */
.custom-checkbox input[type="checkbox"]:checked + span:before {
    border-color: red; /* Piros keret, ha a checkbox be van jelölve */
    background-color: white; /* Háttérszín, amikor be van jelölve */
}

/* Fekete pipa a checkboxban */
.custom-checkbox input[type="checkbox"]:checked + span:after {
    content: "✔"; /* A pipa karakter */
    color: black; /* Pipa színe */
    font-size: 16px; /* Pipa mérete */
    position: absolute; /* Pozicionálja a pipát */
    left: 5px; /* Helyezd el a pipát */
    top: 50%; /* Függőlegesen középre helyezi */
    transform: translateY(-50%); /* Középre igazítja */
}

/* Hibás állapot stílus */
.custom-checkbox input[type="checkbox"].error + span:before {
    border-color: red; /* Piros keret a hiba esetén */
}

/* Alapértelmezett border szín */
.custom-checkbox span:before {
    border-color: #717171; /* Alapszín */
}

/* Ha az error class eltűnik, az alapértelmezett szín visszaáll */
.custom-checkbox input[type="checkbox"]:not(.error) + span:before {
    border-color: #717171; /* Alapszín hiba esetén */
}