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

body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #FFFFFF;
    color: #333333;
    }
   .topheading{
        background-color: #F5F0E1 ;
        color: #333333 ;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        border-bottom-color: #E0E0E0 !important;              
    }  
    .cim{
        font-weight: bold;;
    }

    #alapSzolgBody{
        gap:30px;
    }

    #faceLink{
        text-align: center;
    }

    .topheading .nav-link {
        color:#000000;
        font-weight: 600;     
        transition: all 0.3s ease;
        font-size: 15px;       
    }

    .nav-link:hover {
        color: #333333; 
    }   
    .container{
        background-color: #F5F5F5;
        padding: 2rem;
        border-radius: 20px;
        max-width: 1000px;
        max-width: 2000px;
        width: 70%; 
        color: #333333;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);   
        text-align: justify;   
        border-radius: 10px;
         margin-top: 3%;
         margin-bottom: 3%;
    }


    .lead {
        line-height: 1.8; 
        text-align:justify;
        color: #333333;
    }

    #mainpicture{
        border-radius: 30px;
      
    }

    #logo{
        border-radius: 20px;
        box-shadow: 8px 8px 5px #b8a88c;

    } 
    .footersec {
         margin-top: auto;
        background-color:#F5F0E1 ;
        color: #333333  ;
         font-family:  Source Sans Pr;
    }

    .footer {
     padding: 1rem 2rem;
    } 
    .footer .nav-link {
        color: #95A5A6;
        transition: color 0.3s ease;
    }  
    .footer .nav-link:hover {
        color: #3498DB;
     } 
    .footer .text-body-secondary {
        font-size: 0.975rem;
    }

    .title{
        text-align: center; 
    }

    .lowerTitle{
        margin-top: 30px;
        text-decoration: underline;
    }
    .law{
        margin-top: 3%; 
        margin-bottom: 3%;
    }


 .lawContent{
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin-top: 20px;
    text-align: justify;
    font-size: 1.2rem;
 }
    .ref{
        padding-top: 15px;
        font-style: italic;
    }

    .contact{display: flex;
		justify-content:  center;
		align-items: center;
		flex-wrap: wrap;
    }

    .loginContainer{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50vh;
    }

    p{
        text-align: justify;
    }

    .formCss{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 30vh;
    }

    .btncss{
        margin-top: 20px;
    }

    .labelMargin{
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .menuButton{
        border-radius: 15px;
        border-style: 2px;
        border-color: #333333;
        border-width: thin;
        box-shadow: 3px 3px 3px #b8a88c;
        max-height: 40px;
    
    }

    .fas{
        align-items: flex-start;
        text-align: left;
        margin-top: 3px;
        
    }
    .fab{
        font-size: 20px;
    }

    #menuHighLight
    {
        background-color: #E0D8C6   ;
    }

    #contactUsCont{
        display: flex;
        justify-content: center;

    }
    .contact-form{
      
        width: 70%;
    }


    .center{
        text-align: center;
    }

    #containerColorOff{
        background-color: white;
        box-shadow: none;
        
    }
 #contactDiv{
    border: none;
 }


 #fontcolor{
    display: flex;
    flex-direction: row;
    gap: 20px;
 }

 
.alapSzolgUl{
    font-style: italic;
    padding-left: 15px;
    line-height:180%;
}

.szolgaltatasok{
    font-size: 20px !important;
}

.szolgaltatasokAnchor{
    text-decoration: none;    
}

.szolgaltatasokAnchor :hover{
    text-decoration:underline;
    transform: scale(1.05);  
}

#főcim{
    text-align: center;
    padding-bottom: 10px;
}



/* 🌟 Akadálymentes ikon a fejléc jobb oldalán */
.accessibility-trigger {
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 24px;
    background: none;
    color: white;
    cursor: pointer;
  
}

.accessibility-trigger:hover {
    color: rgb(230, 92, 92);
    background-color: #db9823;
    border-radius: 15px;

}

/* 🌟 Akadálymentes mód választása (kezdetben rejtve, fejléc tetején középen) */
.accessibility-buttons {
    display: none; /* Kezdetben rejtve */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -120%);
   background-color: none;
    border-radius: 10px;
    text-align: center;
    z-index: 1000;
    display: flex;
    flex-direction: row;
    
  
}

/* 🌟 Gombok kisebbek, hogy jól illeszkedjenek */
.accessibility-buttons button {
    font-size: 14px;
    padding: 2px 5px;
    width: 150px;
}

/* 🌟 Amikor a menü látható */
.accessibility-buttons.active {
    display: flex;
    transform: translate(-50%, 20px);
}



/* 🌑 Fekete-fehér mód */
.bw-mode {
    background-color: #000 !important;
    color: #FFF !important;
}

.bw-mode .topheading {
    background-color: #222 !important;
    color: #FFF !important;
}

.bw-mode a, 
.bw-mode .nav-link, 
.bw-mode .menuButton {
    color: #FFF !important;
    background-color: #444 !important;
}

/* ⚡ Sárga kontrasztos mód (fekete háttér, sárga szöveg) */

.container, 
.container p, 
.container h1, 
.container ol, 
.container ul, 
.container li,
.footersec, 
.footer, 
.footer .text-body-secondary, 
.footer a {
    color: inherit !important;
}
.contrast-mode {
    background-color: black !important;
    color: yellow !important;
    font-size: 1.3em !important;
}

.contrast-mode .topheading {
    background-color: black !important;
    color: yellow !important;
}

.contrast-mode a, 
.contrast-mode .nav-link, 
.contrast-mode .menuButton {
    color: cyan !important;
    background-color: black !important;
}

/* 📦 Minden konténer, szöveg és gomb stílus módosítása */
.bw-mode .container, .contrast-mode .container {
    background-color: inherit !important;
    color: inherit !important;
}

.bw-mode .menuButton, .contrast-mode .menuButton {
    background-color: inherit !important;
    color: inherit !important;
    border: 1px solid white !important;
}

/* Fekete-fehér mód */
.bw-mode .container,
.bw-mode .footersec,
.bw-mode .footer {
    background-color: black !important;
    color: white !important;
}

/* Kontrasztos mód (sárga szöveg fekete háttéren) */
.contrast-mode .container,
.contrast-mode .footersec,
.contrast-mode .footer {
    background-color: black !important;
    color: yellow !important;
}

/* Linkek színe kontrasztos módban */
.contrast-mode .footer a {
    color: cyan !important;
}

/* Linkek színe fekete-fehér módban */
.bw-mode .footer a {
    color: white !important;
}

/* Fekete-fehér és kontrasztos mód: h1, h2, h3 hátterének eltávolítása */
.bw-mode h1, .bw-mode h2, .bw-mode h3,
.contrast-mode h1, .contrast-mode h2, .contrast-mode h3 {
    background: none !important;
    box-shadow: none !important;
}

/* Fekete-fehér és kontrasztos mód: div-ek hátterének eltávolítása, ha szöveg van előttük */
.bw-mode div, .contrast-mode div {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 🌑 Fekete-fehér mód */
.bw-mode h2,
.bw-mode .downloadContent #alcim {
    background-color: black !important;
    color: white !important;
}

/* ⚡ Sárga kontrasztos mód (fekete háttér, sárga szöveg) */
.contrast-mode h2,
.contrast-mode .downloadContent {
    background-color: black !important;
    color: yellow !important;
}

/* Linkek színe a kontrasztos módban */
.contrast-mode .downFiles  {
    color: cyan !important;
}

/* Linkek színe a fekete-fehér módban */
.bw-mode .downFiles  {
    color: white !important;
}


/* 🌑 Fekete-fehér mód */
.bw-mode #alcim {
    background: none !important;
    color: white !important;
}

/* ⚡ Sárga kontrasztos mód */
.contrast-mode #alcim {
    background: none !important;
    color: yellow !important;
}



/* 🌑 Fekete-fehér mód */
.bw-mode #alcim {
    background: none !important;
    color: white !important;
}

/* ⚡ Sárga kontrasztos mód */
.contrast-mode #alcim {
    background: none !important;
    color: yellow !important;
}

.contrast-mode .bwMode  {
    background: none !important;
    color: yellow !important;
}


.bw-mode .bwMode  {
    background: none !important;
    color: white !important;
}

.bw-mode .contact{
    background: none !important;
    background-color: black;
}

.contrast-mode .contact  {
    background: none !important;
    background: none !important;
    color: yellow !important;
}