/* !!! ÁLTALÁNOS STÍLUS ELEJE !!! */ 

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

:root {
    --szin: white;
    --barna: #81604B;
    --sarga: #F8D858;
    --sarga2: #FFFF00;
    --sotet: #205E61;
    --sotet2: #2C3333;
    --sotet3: #4D455D;
    --piros: #E0144C;
    --ibolya: #80489C;
    --zold: #0B8457;
    --zold2: #7FA998;
    --kek: #6096B4;
    --kek2: #4267B2;
    --kek3: #5584AC;
    --kek4: #7C83FD;
    --menuszin: #393E46;
    --transitionMode: ease-in-out 400ms;
    --popup-content-height : 80vh;
}

*,
html{
    margin: 0;
    padding: 0;
}

body {
    background-color: #A5F1E9;
    overflow-y: overlay;
    font-family: 'Quicksand';
    margin: 0;
    padding: 0;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    html,
    body {
        background: url("../img/all-bg2.svg");
        overflow-y: overlay;
        font-family: 'Quicksand';
        margin: 0;
        padding: 0;
    }
    html {
        background: #A5F1E9;;
    }
}


span {
    color: var(--sarga);
}

h1 {
    text-align: center;
    color: var(--sotet);
}

.space-on-top {
    margin-top: 20px;
}

.big-wrapper {
    overflow-x: hidden;
}

.border {
    width: 100%;
}

.hirdetmenytext {
    text-align: center; /* Center the text */
    padding: 20px;
}

.hirdetmenytext h3,
.hirdetmenytext p {
    font-size: x-large;
}

.hirdetmenytext a {
    color: var(--kek2);
}

.hirdetmenykep {
    display: block;
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: center;
}

.announcement-cont {
    display: block;
    width: 90%;
    margin: auto;
}

.announcement {
    display: block;
    margin-bottom: 50px;
}

.no_active_announces { 
    text-align: center;
    justify-content: center;
    align-items: center; 
    min-height: 70vh;
    font-size: x-large;
    font-weight: 600;
    color: var(--sotet);
}

.anno-hr {
    border: 3px solid var(--kek);
    border-radius: 5px;
    width: 70%;
    margin: auto;
  }

/* !!! ÁLTALÁNOS STÍLUS VÉGE !!! */ 
/* !!! COOKIE STÍLUS ELEJE !!! */

/* Basic styles for the cookie consent popup */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--kek);
    color: whitesmoke;
    padding: 15px;
    text-align: center;
    z-index: 99;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.5s ease, transform 0.5s ease;
    visibility: hidden;
}

.cookie-consent p {
    line-height: 200%;
    margin-bottom: 15px;
}

.cookie-consent.show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.cookie-consent button {
    border-radius: 10px;
    border: none;
    background: var(--piros);
    color: white;
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
}

.cookie-consent button:hover {
    background-color: var(--sarga);
}



/* !!! COOKIE STÍLUS VÉGE !!! */
/* !!! POPUP STÍLUS ELEJE !!! */
.popup-background {
    display: none; 
    position: fixed;
    z-index: 101;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); 
    backdrop-filter: blur(5px); 
    overflow: auto; 
}

.popup-content {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 5px;
    max-width: var(--popup-content-height);
    width: auto;
    min-height: 150px;
    max-height: 90%; 
    overflow: auto; 
    text-align: center;
    display: block;
}

.popup-content p {
    display: block;
    max-width: 80%;
    margin: auto;
}

.popup-content img {
    max-height: calc(var(--popup-content-height) - 160px);
}

.close {
    position: absolute;
    top: 5px; 
    right: 20px; 
    color: #aaa;
    font-size: 30px;
    font-weight: 500;
    cursor: pointer;
}

.confirm-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: calc(100% - 160px);
    width: 150px;
    height: 30px;
    padding: 10px;
    border-radius: 10px;
    border: none;
    background: var(--piros);
    color: white;
    cursor: pointer;
    font-family: 'Quicksand';
    font-size: large;
    font-weight: 500;
    transition: var(--transitionMode);
    opacity: 0.8;
}

.confirm-button:hover {
    opacity: 1;
    border: none;
}
/* !!! POPUP STÍLUS VÉGE !!! */

/* !!! BACKTOTOP BUTTON !!! */

#backToTopBtn {
    transform: translateY(200%);
    position: fixed; /* Rögzített pozíció */
    bottom: 20px; /* Az oldal aljától 20px-re */
    right: 20px; /* Az oldal jobb szélétől 20px-re */
    z-index: 100; /* Legyen minden más elem fölött */
    font-size: 20px; /* Betűméret */
    background-color: var(--kek2); /* Háttérszín */
    opacity: 0.8;
    color: white; /* Szöveg színe */
    border: none; /* Nincs keret */
    padding: 10px; /* Belső margó */
    border-radius: 4px; /* Lekerekített sarkok */
    cursor: pointer; /* Kéz kurzor */
    transition: var(--transitionMode);
    box-sizing: border-box;
}

#backToTopBtn:hover {
    background-color: var(--kek2); /* Sötétebb háttérszín hover esetén */
    opacity: 1;
}

/* !!! INDEX.PHP ELEJE !!! */
/* !! SECTIONS VONATKOZIK AZ INDEXRE ÉS AZ INFÓRA IS !! */
.sections {
    min-height: 65vh;
    display: flex;
    width: 100%;
    background: url(../img/all-bg.svg) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.section-col {
    display: flex;
    flex: 50%;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

/* !! SECTIONS VÉGE !! */
/* !! MINDEN OLDAL TETEJÉN HASONLÓ SZEKCIÓ VAN, ITT VANNAK EGY HELYEN !! */
.first {
    color: var(--sotet);
    background: url(../img/index-bg1.svg) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100%;
    min-height: 100vh;
}

.first2 {
    color: var(--sotet);
    background: url(../img/index-bg2.svg) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100%;
    min-height: 100vh;
}
.first3 {
    color: var(--sotet);
    background: url(../img/index-bg3.svg) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100%;
    min-height: 100vh;
}

#index-photo {
    width: 60%;
    height: auto;
}

.first h1,
.first2 h1,
.first3 h1 {
    font-size: 22px;
    width: 90%;
    text-align: center;
}

.sections .first p,
.sections .first2 p,
.sections .first3 p {
    font-size: 19px;
    color: var(--sotet);
    margin-top: 10px;
    font-weight: 600;
    line-height: 150%;
    text-align: center;
    bottom: 70px;
}

.informacio {
    color: var(--sotet2);
    font-weight: 600;
    font-size: 16px;
    position: absolute;
    bottom: 70px;
    display: flex;
    width: 80%;
    left: 10%;
    justify-content: center;
    text-align: center;
}

/* !! FIRST SZEKCIÓK VÉGE !! */

.h1out {
    margin-bottom: 30px;
    text-align: center;
    color: var(--sotet2);
    font-size: 30px;
}

/* ! BEMUTATKOZÁS RÉSZ ELEJE ! */
.section-col p {
    text-align: justify;
    justify-self:center;
    width: 90%;
    line-height: 150%;
    font-weight: 500;
    font-size: 18px;
}
/* ! BEMUTATKOZÁS RÉSZ VÉGE ! */

/* ! CSOPORTOK RÉSZ + BEMUTATKOZÁS KÉPEI RÉSZ ELEJE ! */
.grp-photo {
    width: 80%;
    height: auto;
    border-radius: 10px;
}

.grp {
    flex-direction: column;
}

.grp h2 {
    font-size: 32px;
    margin: 10px;
    color: var(--sotet2);
    text-align: left;
}

.grp h3 {
    font-size: 30px;
    margin: 10px;
    color: var(--sotet);
    font-weight: 700;
}

.grp h4 {
    font-size: 24px;
    font-weight: 600;
    color: var(--sotet);
    margin: 5px;
}
/* ! CSOPORTOK RÉSZ + BEMUTATKOZÁS KÉPEI RÉSZ VÉGE ! */
/* !!! INDEX.PHP ELEJE !!! */


/* !!! INFOS.PHP ELEJE !!!! */

.section-col-infos {
    display: flex;
    flex: 50%;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
}
.section-col-infos a {
    text-decoration: none;
    color: var(--kek);
    transition: var(--transitionMode);
}
.section-col-infos a:hover {
    color: var(--sotet);
}

.grp p {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: justify;
    justify-self:center;
    width: 90%;
    line-height: 150%;
    font-weight: 500;
    font-size: 18px;
}

strong {
    color: var(--kek3);
}

.small {
    min-height: 65vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: left;
    width: 100%;
    background: url(../img/all-bg.svg) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.small h2 {
    text-align: center;
}

.small a {
    text-decoration: none;
    color: var(--zold);
    font-weight: 700;
}

.small p {
    text-align: center;
}

.spacer {
    margin: 20px;
}

/* !!! INFOS.PHP VÉGE !!!! */
















/* ANIMATION */
.Lhidden {
    opacity: 0;
    transition: all 1s;
    transform: translateX(-10%);
}
.Rhidden {
    opacity: 0;
    transition: all 1s;
    transform: translateX(10%);
}

.show {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.3s;
}
/* ANIMATION END */

/* SCROLLBAR */
::-webkit-scrollbar {
    width: 10px;
}
  
::-webkit-scrollbar-track {
    background: transparent; 
}
   
::-webkit-scrollbar-thumb {
    background: var(--kek);
    border-radius: 10px;
}
  
::-webkit-scrollbar-thumb:hover {
    background: var(--kek3);
    opacity: 0.9;
}
/* SCROLLBAR END */