/* Alap stílusok, amik minden eszközön érvényesek lesznek */
body {
    font-family: 'Noto Sans', sans-serif;
    margin: 0;
    padding: 0;
    background: #f5f5f5;
    color: #333;
    font-size: 16px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

/* Mobil nézet specifikus stílusok */
/* Itt definiáljuk azokat a stílusokat, amik csak és kizárólag mobil nézeten lesznek láthatóak */
@media (max-width: 767px) {

    /* Például a menü gomb stílusa, ha mobil nézeten vagyunk */
    .menu-button {
        display: block;
        background: #007bff;
        color: white;
        padding: 10px;
        text-align: center;
    }

    /* Szövegek, címek stílusainak finomhangolása mobil nézetre */
    h1 {
        font-size: 24px;
        /* Kisebb címsorok mobil nézeten */
    }
}

/* Táblagép nézet specifikus stílusok */
@media (min-width: 768px) and (max-width: 991px) {
    /* Itt definiáljuk azokat a stílusokat, amik csak táblagép nézeten lesznek láthatóak */
}

/* Asztali számítógép nézet specifikus stílusok */
@media (min-width: 992px) {

    /* Itt definiáljuk azokat a stílusokat, amik csak asztali számítógép nézeten lesznek láthatóak */
    .container {
        width: 960px;
        margin: auto;
    }
}

/* Nagy asztali számítógép nézet specifikus stílusok */
@media (min-width: 1200px) {

    /* Itt definiáljuk azokat a stílusokat, amik csak nagy asztali számítógép nézeten lesznek láthatóak */
    .container {
        width: 1140px;
    }
}

/* Színséma */
:root {
    --primary-color: #164276;
    /* Kék */
    --secondary-color: #ca363f;
    /* Piros */
    --black: #000;
    --white: #f8f9fa;
    /* Enyhén eltérő fehér */
}


/* Footer specific styles */
.footer {
    background-color: var(--primary-color);
    color: var(--white);
}

.footer a {
    color: var(--white);
    text-decoration: underline;
}

.footer a:hover {
    color: var(--secondary-color);
    text-decoration: none;
}

/* Testreszabott Bootstrap komponensek színei */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

/* Fekete szöveg alapértelmezett */
body {
    color: var(--black);
}

/* Fejléc, lábléc, vagy egyéb elemek háttérszíne */
.header,
.footer {
    background-color: var(--primary-color);
    color: var(--white);
}

/* Szöveg kiemelés piros színnel */
.text-secondary {
    color: var(--secondary-color);
}

/* Háttér árnyalatának finomítása, ha nem szeretnénk tiszta fehéret */
.bg-soft-white {
    background-color: var(--white);
}

/* A Bootstrap elemek kiterjesztése */
.navbar-custom {
    background-color: var(--primary-color);
}

/* Egyéni margók, paddingok, és egyéb helymeghatározás */
.custom-margin {
    margin-top: 20px;
}

.custom-padding {
    padding: 15px;
}

/* Médialekérdezések */
@media (max-width: 768px) {
    .custom-mobile {
        text-align: center;
        padding: 10px;
    }
}


/*
*
*
* index.php
*
*/

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px;
    font-size: 20px;
    /* Növeld az ikon méretét */
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 50%;
    /* Kerek gombot csinálunk */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.back-to-top:hover {
    background-color: #0056b3;
}

/* Header */
.header-bottom-margin {
    margin-bottom: 7.0rem !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(88, 88, 88, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-toggler {
    border: 2px solid #585858;
    /* 2px vastag fehér keret */
    border-radius: 50%;
    /* kör alakú keret */
    padding: .25rem .25rem;
    /* A keret és az ikon közötti tér beállítása, szükség esetén módosítható */
}

.navbar-brand img {
    height: 70px;
    /* vagy bármilyen más méret, ami jónak tűnik */
    width: auto;
    /* hogy megőrizze az arányait */
}

.search-form {
    position: absolute;
    /* Keresőmező pozicionálása */
    right: 0;
    top: 100%;
    /* Helyezze a menüsor alá */
    background-color: white;
    /* Háttérszín beállítása */
    border: 1px solid #ddd;
    /* Keret hozzáadása */
    border-radius: 0.25rem;
    /* Keret lekerekítése */
    padding: 0.5rem;
    /* Padding beállítása */
    display: flex;
    /* Flexbox használata az elemek igazításához */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    /* Árnyék hozzáadása */
    z-index: 1000;
    /* Biztosítja, hogy a keresőmező a többi elem fölött jelenjen meg */
}

/* Opcionális stílusok */
.btn {
    margin-left: 10px;
}


/* Main */
.carousel-bottom-margin {
    margin-bottom: 1.6rem !important;
}


.h4-carousel-text {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 0.7em;
    color: white;
    /* Szöveg belső színe */
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    /* Körvonal színe és irányai */
}

.carousel-caption-fixed {
    position: absolute;
    top: 10%;
    width: 100%;
    text-align: center;
    z-index: 20;
    padding-left: 1.6em;
    padding-right: 1.6em;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 1.4em;
}

@media (min-width: 769px) {
    .carousel-caption-fixed {
        top: auto;
        /* Az "auto" megszünteti a "top" hatását */
        bottom: 0;
        /* Az alsó részhez igazítja a szöveget */
        padding-bottom: 1.6em;
        /* Alulról 1.6em padding */
    }
}

@media (max-width: 768px) {
    .carousel-item img {
        height: 400px;
        object-fit: cover;
    }

    .carousel-caption-fixed {
        top: auto;
        /* Kis képernyőn középre igazítja a szöveget */
        padding-top: 0.8em;
    }
}

.custom-badge {
    font-size: 1.0em;
    font-weight: 400;
    padding: 0.25em 0.4em;
    line-height: 1;
    height: 1.5em;
}

.custom-badge-position {
    position: absolute;
    top: 0.5em;
    /* Felfelé mozgatja a badge-et */
    right: 0.5em;
    /* Jobbra mozgatja a badge-et */
}

.custom-badge-position-content {
    position: relative;
    top: 1.0em;
    /* 1.0 em-el lejjebb */
    right: -1.0em;
    /* 1.0 em-el balra */
}

.image-container {
    text-align: center;
    /* Középre igazítja a képet és a képaláírást */
}

.image-caption {
    font-size: 0.8em;
    /* Kis betűméret */
    color: #666666;
    /* Halvány szín */
    margin-top: 0.5em;
    /* Kis térköz a kép és a képaláírás között */
}

.custom-link {
    text-decoration: none;
    /* Eltávolítja az aláhúzást */
    color: inherit;
    /* Megörzi az eredeti színt */
}

.custom-link:hover {
    color: red;
    /* Piros színűre változik hoverkor */
    text-decoration: none;
    /* Biztosítja, hogy ne legyen aláhúzva */
}

.custom-file-upload {
    border: 1px solid #ced4da;
    display: block;
    /* Módosítva inline-block-ról block-ra */
    padding: 6px 12px;
    cursor: pointer;
    border-radius: .25rem;
    background-color: #fff;
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Teljes szélesség */
    text-align: center;
    /* Középre igazítás */
}

.custom-file-upload input[type='file'] {
    display: none;
}

.custom-file-upload-label {
    display: inline-block;
    margin-bottom: 0;
}

.fa-cloud-upload-alt {
    margin-right: 8px;
}

.drop-area {
    padding: 10px;
    border: 2px dashed #ced4da;
    text-align: center;
    cursor: pointer;
}

.drop-area:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
}

.osnivaci-header {
    background-color: var(--primary-color) !important;
    color: var(--white);
}

.cir-lat-link-color {
    color: var(--secondary-color);
}