* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: "Kumbh Sans", sans-serif;
}
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.navbar
{
    background: #131313;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    
}
.navbar__container {
    display: flex;
    justify-content: space-between;
    height: 80px;
    z-index: 1;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 50px;
}
#navbar__logo{
    background-color: #ff8177;
    background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-decoration-color: transparent;
    display: flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    font-size: 2rem;
}
.fa-code {
    margin-right: 0.5rem;
}
.navbar__menu {
    display: flex;
    align-items: center;
    list-style: none;
    text-align: center;
}
.navbar__item {
    height: 80px;
}
.navbar__links {
    color: #ffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0 1rem;
    height: 100%;
}
.navbar__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    width: 100%;
}
.button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 10px 20px;
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
    border-radius: 4px;
    background-color: #f77062;
    color: #ffff;
}

.button:hover {
    background: #4837ff;
    transition: all 0.3s ease;

}
.navbar__links:hover {
    color: #f77062;
    transition: all 0.3s ease;
}

@media screen and (max-width: 960px) {
    .navbar__container {
        display: flex;
        justify-content: space-between;
        height: 80px;
        z-index: 1;
        width: 100%;
        max-width: 1300px;
        padding: 0;

}
.navbar__menu {
    display: grid;
    grid-template-columns: auto;
    margin: 0;
    width: 100%;
    position: absolute;
    top: -1000px; 
    opacity: 1;
    transition: all 0.5s ease;
    height: 50vh;
    z-index: -1;
    background: #131313;
}
.navbar__menu.active {
    background: #131313;
    top: 100%;
    opacity: 1;
    transition: all 0.5s ease;
    z-index: 99;
    height:  80vh;
    font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
    background: #ffff;
}
.navbar__item {
    width: 100%;
}
.navbar__links {
    text-align: center;
    padding: 2rem;
    width: 100%;
    display: table;

}
#mobile-menu {
    position: absolute;
    top: 20%;
    right: 5%;
    transform: translate(5%, 20%);
}
.navbar__btn {
padding-bottom: 2rem;
}
.button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 80px;
    margin: 0;
}


.navbar__toggle .bar {
    display: block;
    cursor: pointer;
}

#mobile-menu.is-active .bar:nth-child(2) 
{
    opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1)
 {
    transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) 
{
    transform: translateY(-8px) rotate(-45deg);
}
}
/* Hero Section CSS */
.main {
    background-color: #141414;
}
.main__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-self: center;
    margin: 0 auto;
    height: 90vh;
    background-color: #141414;
    z-index: 1;
    width: 100%;
    max-width: 1300px;
    padding: 0 50px;
}
.main__content h1 
{
    font-size: 4rem;
    background-color: #ff8177;
    background-image: linear-gradient(to top, #ff0844 0%,#ffb199 100%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-decoration-color: transparent;

}
.main__content div
{
    font-size: 3rem;
    background-color: #ff8177;
    background-image: linear-gradient(to top, #b721ff 0%,#21d4fd 100%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-decoration-color: transparent;
}

.main__content p {

    cursor: pointer;
    margin: 2rem;
    font-size: 2rem;
    font-weight: 700;
    color: #ffff;
    margin-left: 3px;

}
.main__btn {
    font-size: 1rem;
    background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
    padding: 14px 32px;
    border: none;
    border-radius: 4px;
    color: #ffff;
    cursor: pointer;
    position: relative;
    transition: all 0.35s;
    outline: none;
}
.main__btn a {
    position: relative;
    z-index: 2;
    color: #ffff;
    text-decoration: none;
    

}
.main__btn:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #4837ff;
    transition: all 0.35s;
    border-radius: 4px;
}
.main__btn:hover 
{
    color: #ffff;
    
}
.main__btn:hover:after
{
    width: 100%;
}
.main__img--container {
    text-align: center;

}
#main__img {
    height: 80%;
    width: 80%;
    border-radius: 50%;
    object-fit: cover;
    
}
/* Animation of text */
.text-animation{
    font-size: 34px;
    font-weight: 600;
    min-width: 280px;
}
.text-animation span{
    position: relative;
}
.text-animation span::before{
    content: "Cyber security";
    color:#21d4fd;
    animation: words 20s infinite;
}
.text-animation span::after
{
    margin-top: 1px;
    content: "";
    background-color: #131313;
    position: absolute;
    width: calc(100% + 8px);
    height: 100%;
    border-left: 4px solid #21d4fd;
    right: -8px;
    animation: cursor 0.6s infinite, typing 20s steps(14) infinite;
}
@keyframes cursor{
    to{
        border-left: 2px solid #21d4fd;
    }
}
@keyframes words{
    0%,
    20%{
        content: "Frontend";
    }
    21%,
    40%{
        content: "Backend";
    }
    41%,
    60%{
        content: "Cyber Security";
    }
    61%,
    80%{
        content: "Web Development";
    }
    81%,
    100%{
        content: "Ethical Hacking";
    }
    
}
@keyframes typing{
    10%,
    15%,
    30%,
    35%,
    50%,
    55%,
    70%,
    75%,
    90%,
    95%{
        width: 0;
    }
    5%,
    20%,
    25%,
    40%,
    45%,
    60%,
    65%,
    80%,
    85%{
        width: calc(100% + 8px);
    }
}
@media screen and (max-width: 1930px) { 
    .main__container {
       height: 70vh;  
    }
    .main__img--container {
    text-align: center;

}
#main__img {
    height: 70%;
    width: 70%;
    border-radius: 50%;
    object-fit: cover;
    
}
}
/* Mobile Responsive */
@media screen and (max-width: 768px) {
    .main__container {
        display: inline;
        grid-template-columns: auto;
        align-items: center;
        justify-self: center;
        width: 100%;
        margin: 0 auto;
        height: 90vh;
    }
    .main__content 
    {
        text-align: center;
        margin-bottom: 4rem;
    }
    .main__content h1
    {
        font-size: 2.5rem;
        margin-top: 1rem;
    }
    .main__content h2 
    {
        
        font-size: 2.7rem;
    }
    .main__content p 
    {
        margin-left: 4rem;
        margin-top: 1rem;
        font-size: 1.5rem;
    }
      
}
@media screen and (max-width: 480px) {
    .main__content h1 
    {
        font-size: 2rem;
        
    }
    .main__content h2 {
        font-size: 2rem;
        
    }
    .main__content p {
        margin-top: 1rem;
        font-size: 1.5rem;
        
    }
    .main__btn {
        padding: 12px 36px;
        margin: 2.5rem 0;
        
    }
}
/* Services Section CSS */
.services {
    background: #141414;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    margin-top: 10rem;
    margin-bottom: 10rem;
    
}

#services_name {
    text-align: center;
    background-color: #ff8177;
    background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
    background-size: 100%;
    margin-bottom: 1rem;
    font-size: 4.5rem;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-decoration-color: transparent;
}

.services__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    
    
}
.services__card {
    width: 350px;
    height: 525px;
    margin: 1rem;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    color: #fff;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.5rem;
    transition: transform 0.2s ease-in;
}
.services__card {
    position: relative;
    overflow: hidden; /* fontos! */
    
}

/* Átlátszó sötét réteg hoverre */
.services__card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* félig áttetsző fekete */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Felirat konténer */
.services__card .card-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.6rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* Hover hatás */
.services__card:hover::after,
.services__card:hover .card-overlay {
    opacity: 1;
}
.card-overlay a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
}
.services__card:hover {
    transform: scale(1.075);
    cursor: pointer;
}

.services h2 {
    position: absolute;
    top: 350px;
    left: 30px;
    font-size: 2rem;
}

.services__card p {
    position: absolute;
    top: 390px;
    left: 30px;
    font-size: 1.2rem;
}

.services__card button {
    color: #ffff;
    padding: 10px 20px;
    border: none;
    outline: none;
    border-radius: 4px;
    background: #f77062;
    position: absolute;
    top: 430px;
    left: 30px;
    font-size: 1rem;
    cursor: pointer;
}

/* Mobile Responsive */

@media screen and (max-width: 1300px) {
    
    .services {
        height: auto;
        
    }

    .services__container {
        justify-content: center;
    }

    .services h1 {
        font-size: 3.8rem;
    }
}

@media screen and (max-width: 480px) {
    .services__card {
        width: 100%; /* A kártyák kisebbek */
        height:27rem;
    }
    .services h1 {
        font-size: 4rem;
    }
    .services__card span {
        font-size: 1.2rem;
    }
}
/* Footer CSS */
.footer__container {
    background-color: #141414;
    padding: 5rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#footer__logo {
    color: #fff;
    display: flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    font-size: 2rem;
}
.footer__links {
    width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: center;
}
.footer__link--wrapper {
    display: flex;
}
.footer__link--items {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 16px;
    text-align: left;
    width: 160px;
    box-sizing: border-box;
}
.footer__link--items h2 {
    margin-bottom: 16px;

}
.footer__link--items > h2 {
    color: #fff;
}
.footer__link--items a {
    color: #fff;
    text-decoration: none;
    margin-bottom: 0.5rem;

}
.footer__link--items a:hover {
    color: #e9e9e9;
    transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
    color: #fff;
    font-size: 24px;
}
.social__media {
    max-width: 1300px;
    width: 200%;
}
.social__media--wrap {
    max-width: 1000px;
    width: 100%;
}
.social__media--wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    max-width: 1000px;
    margin: 40px auto 0 auto;
}
.social__icons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 240px;
}
.social__logo {
    color: #fff;
    justify-self: flex-start;
    margin-left: 20px;
    cursor: pointer;
    text-decoration: none;
    font-size: 2rem;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}
.website__rights {
    color: #fff;
}
@media screen and (max-width: 820px) 
{
.footer__links {
    padding-top: 2rem;
}    
#footer__logo {
    margin-bottom: 2rem;
}
.website__rights {
    margin-bottom: 2rem;
}
.footer__link--wrapper {
    flex-direction: column;
}
.social__media--wrap {
    flex-direction: column;
}
}
@media  screen and (max-width: 480px) {
    .footer__link--items {
        margin: 0;
        padding: 10px;
        width: 100%;
    }
    
}
/* Scrolling */
::-webkit-scrollbar {
    width: 10px;

}
::-webkit-scrollbar-thumb {
    background-color: #ff0844;
}
::-webkit-scrollbar-track{
    background-color: #141414;
}
/* Contact */
.contact{
    background-color: #141414;
    padding-bottom: 3rem;
    padding-top: 1rem;
}
.contact h2{
    margin-top: 4rem;
    margin-bottom: 3rem;
    color: #ff0844;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;

}
.contact form{
    display:flex;
    align-items:center;
    justify-content: center;
    gap: 3rem;
    margin: 5rem 0;
    text-align: center;

}


.contact form .input-box input,.contact form textarea{
    width: 100%;
    padding: 2.5rem;
    font-size: 1.2rem;
    color: white;
    background-color: #131313;
    border-radius: 2rem;
    border: 5px solid #ff0844;
    margin: 0.5rem;
}
@media screen and (max-width: 820px) 
{
    .contact form
    {
        
      flex-direction: column;
      padding: 0 2rem;
    }
    .contact form .input-box input,.contact form textarea{
        padding: 0rem;
        font-size: 0.5rem;
    }

    
    
}
@media  screen and (max-width: 1200px) {
  .contact form
  {
   padding: 0rem 3rem;
  }

}
@media screen and (max-width: 1900px) {
    .contact form 
    {
        padding: 0rem 2rem;
    }
    .contact form .input-box input,.contact form textarea{
        padding: 1rem;
        font-size: 1rem;
    }
    
}
.btn_contact
{
    display: inline-block;
    text-decoration: none;
    padding: 10px 20px;
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
    border-radius: 4px;
    background-color: #f77062;
    color: #ffff;
    cursor: pointer;
    font-size: 2rem;
    border-radius: 10px;
}

.btn_contact:hover {
    background: #4837ff;
    transition: all 0.3s ease;
}

/* Time Line */
/* Alap stílusok - heading */
.heading {
    font-size: 6rem;
    text-align: center;
    margin: 5rem 0;
}

/* Education rész */
.education {
    padding: 100px 15px;
    background-color: #131313;
}

.education h2 {
    margin-bottom: 5rem;
    color: #f77062;
    background-color: #ff8177;
    background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
    background-size: 100%;
    font-size: 4rem;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-decoration-color: transparent;
}

/* Timeline Items */
.timeline-items {
    max-width: 1200px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin-bottom: 10rem;
}

/* Left-aligned timeline line */
.timeline-items::before {
    content: "";
    position: absolute;
    width: 5px;
    height: 100%;
    background-color: #b12a5b;
    left: calc(50% - 1px);
}
#RightBit {
    text-align: left;
}

/* Timeline Item */
.timeline-item {
    margin-bottom: 40px;
    width: 100%;
    position: relative;
}

/* Styling for last item */
.timeline-item:last-child {
    margin-bottom: 0;
}

/* Styling for even items */
.timeline-item:nth-child(even) {
    padding-right: calc(50% + 30px);
    text-align: right;
}

/* Styling for odd items */
.timeline-item:nth-child(odd) {
    padding-left: calc(50% + 30px);
}

/* Timeline dot */
.timeline-dot {
    height: 21px;
    width: 21px;
    background-color: #f99185;
    box-shadow: 0 0 25px #f99185, 0 0 50px #f99185;
    position: absolute;
    left: calc(50% - 8px);
    border-radius: 50%;
    top: 100px;
}

/* Timeline Date */
.timeline-date {
    font-size: 20px;
    font-weight: 800;
    color: white;
    margin: 6px 0 15px;
}

/* Timeline Content */
.timeline-content {
    background-color: #131313;
    border: 3px solid #ff0844;
    padding: 30px 50px;
    border-radius: 4rem;
    box-shadow: 0 0 10px #f77062;
    cursor: pointer;
   
}

.timeline-content:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px #ff0844;
}

.timeline-content h3 {
    font-size: 20px;
    color: white;
    margin: 0 0 10px;
    font-weight: 500;
}

.timeline-content p {
    color: white;
    font-size: 16px;
    font-weight: 300;
    line-height: 22px;
}


/* Média lekérdezés kisebb képernyőkhöz */
@media(max-width: 991px) {
    .heading {
        font-size: 3rem; /* Csökkentett betűméret */
    }

    .education h2 {
        font-size: 2.5rem; /* Csökkentett betűméret */
    }

    section {
        padding: 10rem 3% 2rem;
    }

    .timeline-items::before {
        left: 7px;
    }

    .timeline-item:nth-child(odd) {
        padding-right: 0;
        text-align: left;
    }

    .timeline-item:nth-child(even) {
        padding-right: 0;
        text-align: left;
    }

    .timeline-item:nth-child(odd), .timeline-item:nth-child(even) {
        padding-left: 37px;
    }

    .timeline-dot {
        left: 0;
    }
}

/* Még kisebb képernyők (pl. mobiltelefonok) */
@media(max-width: 480px) {
    .heading {
        font-size: 2rem; /* További csökkentés */
    }

    .education h2 {
        font-size: 2rem; /* Még kisebb betűméret */
    }

    .timeline-items {
        margin-bottom: 5rem;
    }

    .timeline-content {
        padding: 20px 30px; /* Kisebb padding mobilon */
    }

    .timeline-content h3 {
        font-size: 18px; /* Csökkentett méret */
    }

    .timeline-content p {
        font-size: 14px; /* Csökkentett méret */
    }
}
@media(max-width: 1930px) {
    .heading {
        font-size: 4rem; /* További csökkentés */
    }

    .education h2 {
        font-size: 2rem; /* Még kisebb betűméret */
    }

    .timeline-items {
        margin-bottom: 5rem;
    }

    .timeline-content {
        padding: 20px 30px; /* Kisebb padding mobilon */
    }

    .timeline-content h3 {
        font-size: 18px; /* Csökkentett méret */
    }

    .timeline-content p {
        font-size: 13px; /* Csökkentett méret */
    }
}

/* CV */
/* Alapstílusok */
body {

    background-color: #141414;
    color: white;
  }
  .cv-wrapper ul li::before {
    content: '•';
    color: #ff3c3c;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
  }
  
  .cv-wrapper {
    max-width: 900px;
    margin: auto;
    padding: 2rem;
    background-color: #131313;
    border-left: 5px solid #ff3c3c;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin-top: 10rem;
    margin-bottom: 10rem;
  }
  
  #full-name {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 2rem;
    color: #fff;
  }
  
  /* Szekció címek */
  .heading-title {
    border-bottom: 2px solid white;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: #ff3c3c;
  }
  
  /* Lista stílusok */
  ul {
    list-style: none;
    padding-left: 0;
  }

  .personal-info-list i,
  .language-skills i,
  .skills-list i {
    margin-right: 0.5rem;
    color: #ff3c3c;
  }
  
  .personal-info-list li,
  .language-skills li,
  .skills-list li {
    margin-bottom: 0.5rem;
  }
  @media (max-width: 1930px) {
    .cv-wrapper {
      padding: 1.5rem;
      max-width: 50%;
      max-height: 50%;
    }
  
    #full-name {
      font-size: 2.5rem;
    }
  
    .heading-title {
      font-size: 1.25rem;
    }
  
    ul li {
      font-size: 0.8rem;
    }
  }
  /* Kisebb képernyők (pl. tablet) */

  @media (max-width: 768px) {
    .cv-wrapper {
      padding: 1.5rem;
      max-width: 100%;
    }
  
    #full-name {
      font-size: 2.5rem;
    }
  
    .heading-title {
      font-size: 1.25rem;
    }
  
    ul li {
      font-size: 1rem;
    }
  }
  
  /* Mobiltelefonokra (max. 480px) */
  @media (max-width: 480px) {
    .cv-wrapper {
      padding: 1rem;
    }
  
    #full-name {
      font-size: 2rem;
    }
  
    .heading-title {
      font-size: 1.1rem;
    }
  
    ul li {
      font-size: 0.8rem;
    }
  
    .personal-info-list li,
    .language-skills li,
    .skills-list li {
      font-size: 0.8rem;
      text-align: left;
    }
  }
  
  /* Extra kis képernyők (pl. okostelefonok) */
  @media (max-width: 320px) {
    .cv-wrapper {
      padding: 0.8rem;
    }
  
    #full-name {
      font-size: 1.8rem;
    }
  
    .heading-title {
      font-size: 1rem;
    }
  
    ul li {
      font-size: 0.85rem;
    }
  
    .personal-info-list li,
    .language-skills li,
    .skills-list li {
      font-size: 0.85rem;
    }
  }
  /* About me */
  /* General style for the page */
/* body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #131313;
  }
   */
  /* Container for the intro content */
 /* Általános stílusok */
.intro-container {
    margin-top: auto;
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    background: #131313;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
    border-radius: 8px;
}

/* Animációk */
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.intro-container, .fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInAnimation 1s forwards;
    animation-delay: 0.3s; /* Kis késleltetés az elemek között */
}

/* Fejléc stílusok */
.intro-container h2 {
    text-align: center;
    color: #fff;
    font-size: 2.5rem;
    margin-bottom: 20px;
}

/* Bejegyzések stílusok */
.intro-container p {
    text-align: left;
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.8;
}

/* Bejegyzések hover effekt */
.intro-container p:hover {
    color: #ff3c3c;
    transition: color 0.3s ease-in-out;
}

/* Alap szakasz stílusok */
section {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 100vh;
}

/* Elrejtett elemek */
.hidden {
    opacity: 0;
    transition: all 3s;
    filter: blur(5px);
    transform: translateY(40%);
}

.show {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* CV Wrapper stílusok */
.cv-wrapper span i {
    float: right;
    color: white;
}

.cv-wrapper i:hover {
    color: blue;
}

.cv-wrapper img {
    width: 10rem;
}

/* Személyes információk */
.personal-info-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6rem;
    flex-wrap: wrap;
    
}

.info-text {
    flex: 1 1 300px;
    text-align: left;
}

.info-image img {
    max-width: 250px;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    margin-top: 1px;
}

@media (max-width: 1930px) {
    .intro-container h1 {
        font-size: 1rem; /* Csökkentett betűméret */
    }

    .intro-container p {
        font-size: 0.7rem; /* Csökkentett betűméret */
    }

}
/* 768px alatt - mobil és táblagépek */
@media (max-width: 768px) {
    .intro-container h1 {
        font-size: 1rem; /* Csökkentett betűméret */
    }

    .intro-container p {
        font-size: 0.8rem; /* Csökkentett betűméret */
    }

    .personal-info-container {
        flex-direction: column;
        align-items: center;
        gap: 2rem; /* Kisebb távolság a kép és a szöveg között */
    }

    .info-text {
        text-align: center;
    }
    .info-image {
    display: flex;
    justify-content: center;
  }

}
/* 480px alatt - mobiltelefonok */
@media (max-width: 480px) {
    .intro-container h1 {
        font-size: 1.5rem; /* Még kisebb betűméret */
    }

    .intro-container p {
        font-size: 0.9rem; /* Még kisebb betűméret */
    }

    .personal-info-container {
        gap: 1.5rem;
        
    }

    .info-image img {
        width: 100%;
        max-width: 200px;
    }
   .hidden {
    opacity: 0;
    transition: all 3s;
    filter: blur(5px);
    transform: translateY(10%);
}

.show {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}
.services__card h2{
    font-size: 1.2rem;
}
.services__card p
{
    font-size: 0.8rem;
}
}
.navbar__hu{
    text-align: right;
}
.zaszlo {
    height: 20px;
    width: 30px;
      background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-radius: 6px;
  
}
.zaszlo:hover {
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.zaszlo:active {
  transform: scale(0.95);
}
#TopS {
    text-decoration: none;
}
.card-title
{
    color: white;
    font-size: 1.5rem;
    text-decoration: none;
    padding: 2rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
}
.social__icons__top
{
    margin-top: 100px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    
}
.services__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}



/* Nagy képernyő (pl. desktop, nagy laptop) — 4 oszlop */
@media screen and (min-width: 1300px) {
    .services__card {
        width: calc((100% / 4) - 2rem); /* 4 kártya + margó */
        max-width: none; /* max szélesség levéve, hogy kitöltse */
    }
}

/* Közepes képernyő (közepes laptop) — 3 oszlop */
@media screen and (min-width: 900px) and (max-width: 1299px) {
    .services__card {
        width: calc((100% / 3) - 2rem); /* 3 kártya + margó */
        max-width: none;
    }
}

/* Kis laptop, nagy tablet — 2 oszlop */
@media screen and (min-width: 600px) and (max-width: 899px) {
    .services__card {
        width: calc((100% / 2) - 2rem); /* 2 kártya + margó */
        max-width: none;
    }
}

/* Mobil — 1 oszlop */
@media screen and (max-width: 599px) {
    .services__card {
        width: 100%;
        max-width: none;
        height: 25rem; /* mobilra kisebb magasság */
    }
    body, html {
    overflow-x: hidden;
  }
}

@media (max-width: 600px) {
  .main__container {
    padding: 1rem;
  }

  .button {
    width: 65%; /* hogy a gomb ne legyen túl széles */
    margin: 0 auto; /* középre */
  }
}


/* Professional portfolio refresh */
:root {
  --portfolio-bg: #0b1020;
  --portfolio-surface: #111827;
  --portfolio-surface-2: #172033;
  --portfolio-text: #f8fafc;
  --portfolio-muted: #a7b0c0;
  --portfolio-line: rgba(255,255,255,.12);
  --portfolio-primary: #38bdf8;
  --portfolio-accent: #f97316;
  --portfolio-card: rgba(255,255,255,.06);
  --portfolio-shadow: 0 22px 70px rgba(0,0,0,.35);
}
html { scroll-behavior: smooth; }
body { background: var(--portfolio-bg); color: var(--portfolio-text); }
.portfolio-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.portfolio-nav { backdrop-filter: blur(14px); background: rgba(10, 15, 30, .9) !important; border-bottom: 1px solid var(--portfolio-line); }
.portfolio-nav .navbar__container { max-width: 1180px; }
.portfolio-nav .navbar__links { color: #e5e7eb; font-size: .96rem; }
.zaszlo { width: 34px; height: 24px; object-fit: cover; border-radius: 5px; margin-left: 10px; border: 1px solid var(--portfolio-line); }
.portfolio-hero { min-height: 100vh; padding: 130px 0 70px; background: radial-gradient(circle at 15% 15%, rgba(56,189,248,.2), transparent 36%), radial-gradient(circle at 85% 20%, rgba(249,115,22,.16), transparent 32%), linear-gradient(180deg, #0b1020 0%, #111827 100%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) 380px; gap: 48px; align-items: center; }
.eyebrow { color: var(--portfolio-primary); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 800; margin-bottom: 12px; }
.hero-copy h1, .section-heading h2, .about-grid h2, .contact-card h2 { color: var(--portfolio-text); line-height: 1.05; letter-spacing: -.04em; }
.hero-copy h1 { font-size: clamp(2.4rem, 6vw, 5rem); max-width: 880px; }
.hero-lead { color: #dbe4f0; font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.75; max-width: 760px; margin-top: 20px; }
.muted-light { color: var(--portfolio-muted); margin-top: 10px; }
.hero-actions, .about-actions, .contact-actions, .project-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-actions { margin-top: 28px; }
.button { width: auto; height: auto; min-height: 46px; border-radius: 999px; padding: 12px 20px; margin: 0; text-decoration: none; font-size: 1rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.button-primary { background: linear-gradient(135deg, #38bdf8, #2563eb); color: white; box-shadow: 0 12px 30px rgba(37, 99, 235, .28); }
.button-secondary { background: rgba(255,255,255,.09); color: var(--portfolio-text); border: 1px solid var(--portfolio-line); }
.button-disabled { background: rgba(255,255,255,.05); color: var(--portfolio-muted); border: 1px dashed var(--portfolio-line); cursor: not-allowed; }
.small-button { min-height: 38px; padding: 9px 14px; font-size: .88rem; }
.hero-badges, .tech-list { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-badges { margin-top: 26px; }
.hero-badges span, .tech-list span { border: 1px solid var(--portfolio-line); background: rgba(255,255,255,.08); color: #e5e7eb; border-radius: 999px; padding: 7px 10px; font-size: .86rem; font-weight: 700; }
.hero-card { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.045)); border: 1px solid var(--portfolio-line); border-radius: 28px; padding: 18px; box-shadow: var(--portfolio-shadow); }
.hero-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 22px; display: block; }
.hero-card-body { padding: 16px 6px 4px; display: grid; gap: 8px; }
.hero-card-body strong { font-size: 1.4rem; }
.hero-card-body span { color: var(--portfolio-muted); }
.hero-socials, .footer-socials { display: flex; gap: 10px; margin-top: 8px; }
.hero-socials a, .footer-socials a { width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); color: var(--portfolio-text); border: 1px solid var(--portfolio-line); text-decoration: none; }
.portfolio-section { padding: 82px 0; background: #111827; }
.portfolio-section:nth-of-type(even) { background: #0f172a; }
.section-heading { max-width: 780px; margin-bottom: 30px; }
.section-heading h2, .about-grid h2, .contact-card h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 12px; }
.section-heading p, .about-grid p, .contact-card p { color: var(--portfolio-muted); line-height: 1.75; font-size: 1.03rem; }
.split-heading { max-width: none; display: flex; justify-content: space-between; gap: 20px; align-items: end; }
.service-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.info-card, .demo-card, .about-card, .contact-card, .portfolio-project-card, .timeline-lite article { background: var(--portfolio-card); border: 1px solid var(--portfolio-line); border-radius: 22px; box-shadow: var(--portfolio-shadow); }
.info-card { padding: 22px; min-height: 230px; }
.info-card i { color: var(--portfolio-primary); font-size: 1.8rem; margin-bottom: 18px; }
.info-card h3, .demo-card h3, .portfolio-project-card h3, .about-card h3, .timeline-lite h3 { color: var(--portfolio-text); margin-bottom: 10px; }
.info-card p, .demo-card p, .portfolio-project-card p, .timeline-lite p, .about-card li { color: var(--portfolio-muted); line-height: 1.65; }
.portfolio-project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.portfolio-project-card { overflow: hidden; display: grid; grid-template-rows: 220px auto; }
.project-image { position: relative; background-size: cover; background-position: center; padding: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.project-category, .project-status, .status-pill { background: rgba(15,23,42,.78); color: #f8fafc; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 7px 10px; font-size: .78rem; font-weight: 800; backdrop-filter: blur(8px); }
.project-content { padding: 22px; display: grid; gap: 14px; }
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.case-grid div { background: rgba(255,255,255,.045); border: 1px solid var(--portfolio-line); border-radius: 14px; padding: 12px; }
.case-grid strong { display: block; color: var(--portfolio-primary); margin-bottom: 6px; font-size: .85rem; }
.case-grid span { color: var(--portfolio-muted); line-height: 1.55; font-size: .92rem; }
.demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.demo-card { padding: 24px; display: grid; gap: 12px; }
.status-pill.soon { width: fit-content; background: rgba(249,115,22,.16); color: #fed7aa; border-color: rgba(249,115,22,.28); }
.about-grid { display: grid; grid-template-columns: 1fr 420px; gap: 28px; align-items: start; }
.about-card { padding: 26px; }
.about-card ul { display: grid; gap: 12px; padding-left: 20px; }
.about-actions { margin-top: 24px; }
.timeline-lite { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.timeline-lite article { padding: 22px; }
.timeline-lite span { display: inline-flex; color: var(--portfolio-primary); font-weight: 800; margin-bottom: 10px; }
.contact-card { padding: 34px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.contact-actions { justify-content: flex-end; }
.portfolio-footer { background: #080c18; border-top: 1px solid var(--portfolio-line); padding: 26px 0; }
.footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--portfolio-muted); }
#footer__logo { color: var(--portfolio-text); text-decoration: none; font-weight: 900; font-size: 1.25rem; }
.hidden { opacity: 0; transform: translateY(26px); transition: all .8s ease; }
.show { opacity: 1; transform: translateY(0); }
.project-load-error { color: #fecaca; }
@media screen and (max-width: 1100px) { .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hero-grid, .about-grid, .contact-card { grid-template-columns: 1fr; } .hero-card { max-width: 460px; } .contact-actions { justify-content: flex-start; } }
@media screen and (max-width: 820px) { .portfolio-shell { width: min(100% - 24px, 1180px); } .portfolio-hero { padding-top: 112px; } .portfolio-project-grid, .demo-grid, .timeline-lite { grid-template-columns: 1fr; } .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split-heading { display: grid; } .case-grid { grid-template-columns: 1fr; } .footer-grid { display: grid; text-align: center; justify-items: center; } .navbar__menu.active { height: auto; padding: 18px 0; } .navbar__links { padding: 1rem; } }
@media screen and (max-width: 560px) { .service-grid { grid-template-columns: 1fr; } .hero-copy h1 { font-size: 2.35rem; } .portfolio-section { padding: 58px 0; } .hero-card { padding: 12px; border-radius: 20px; } .contact-card { padding: 22px; } .button { width: 100%; } .hero-actions, .contact-actions, .about-actions { width: 100%; } }


/* Hardware-adjacent / cybersecurity background section */
.tech-background-section {
  position: relative;
}

.tech-background-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}

.tech-card {
  min-height: 245px;
}

.tech-card i {
  color: var(--portfolio-accent);
}

.tech-highlight-card,
.tech-story-card {
  background: linear-gradient(135deg, rgba(56, 189, 248, .12), rgba(139, 92, 246, .10));
  border: 1px solid var(--portfolio-line);
  border-radius: 22px;
  box-shadow: var(--portfolio-shadow);
}

.tech-highlight-card {
  min-width: 270px;
  padding: 22px;
  display: grid;
  gap: 8px;
  align-content: center;
}

.tech-highlight-card span {
  color: var(--portfolio-muted);
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.tech-highlight-card strong {
  color: var(--portfolio-text);
  font-size: 1.25rem;
  line-height: 1.25;
}

.tech-story-card {
  margin-top: 18px;
  padding: 24px;
}

.tech-story-card h3 {
  color: var(--portfolio-text);
  margin-bottom: 10px;
}

.tech-story-card p {
  color: var(--portfolio-muted);
  line-height: 1.75;
  margin: 0;
}

@media screen and (max-width: 1100px) {
  .tech-background-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tech-highlight-card {
    min-width: 0;
  }
}

@media screen and (max-width: 560px) {
  .tech-background-grid {
    grid-template-columns: 1fr;
  }

  .tech-card {
    min-height: auto;
  }

  .tech-story-card,
  .tech-highlight-card {
    padding: 18px;
  }
}

/* Laptop layout compact fix
   Keeps the portfolio readable on common laptop resolutions without changing page content. */
.portfolio-section {
  min-height: auto;
  display: block;
}

@media screen and (min-width: 961px) and (max-width: 1600px) {
  .navbar,
  .navbar__container,
  .navbar__item {
    height: 68px;
  }

  .navbar__container {
    max-width: 1120px;
    padding: 0 28px;
  }

  #navbar__logo {
    font-size: 1.55rem;
  }

  .portfolio-nav .navbar__links {
    font-size: .88rem;
  }

  .navbar__links {
    padding: 0 .65rem;
  }

  .portfolio-shell {
    width: min(1080px, calc(100% - 48px));
  }

  .portfolio-hero {
    min-height: auto;
    padding: 105px 0 48px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.15fr) 320px;
    gap: 34px;
  }

  .hero-copy h1 {
    font-size: clamp(2.25rem, 4.4vw, 3.65rem);
    max-width: 700px;
  }

  .hero-lead {
    font-size: 1rem;
    line-height: 1.62;
    max-width: 650px;
    margin-top: 14px;
  }

  .hero-actions {
    margin-top: 20px;
  }

  .hero-badges {
    margin-top: 18px;
    gap: 6px;
  }

  .hero-badges span,
  .tech-list span {
    font-size: .78rem;
    padding: 6px 9px;
  }

  .button {
    min-height: 40px;
    padding: 10px 16px;
    font-size: .9rem;
  }

  .small-button {
    min-height: 34px;
    padding: 8px 12px;
    font-size: .82rem;
  }

  .hero-card {
    border-radius: 22px;
    padding: 14px;
  }

  .hero-card img {
    border-radius: 18px;
  }

  .hero-card-body strong {
    font-size: 1.1rem;
  }

  .hero-card-body span,
  .muted-light {
    font-size: .9rem;
  }

  .portfolio-section {
    padding: 52px 0;
  }

  .section-heading {
    margin-bottom: 22px;
  }

  .section-heading h2,
  .about-grid h2,
  .contact-card h2 {
    font-size: clamp(1.75rem, 3vw, 2.45rem);
    margin-bottom: 9px;
  }

  .section-heading p,
  .about-grid p,
  .contact-card p {
    font-size: .94rem;
    line-height: 1.62;
  }

  .service-grid,
  .tech-background-grid,
  .demo-grid,
  .timeline-lite {
    gap: 12px;
  }

  .info-card,
  .demo-card,
  .timeline-lite article {
    padding: 18px;
    min-height: auto;
    border-radius: 18px;
  }

  .info-card i {
    font-size: 1.45rem;
    margin-bottom: 12px;
  }

  .info-card h3,
  .demo-card h3,
  .portfolio-project-card h3,
  .about-card h3,
  .timeline-lite h3 {
    font-size: 1rem;
    margin-bottom: 8px;
  }

  .info-card p,
  .demo-card p,
  .portfolio-project-card p,
  .timeline-lite p,
  .about-card li {
    font-size: .88rem;
    line-height: 1.5;
  }

  .portfolio-project-grid {
    gap: 14px;
  }

  .portfolio-project-card {
    grid-template-rows: 170px auto;
    border-radius: 18px;
  }

  .project-content {
    padding: 18px;
    gap: 11px;
  }

  .case-grid div {
    padding: 10px;
  }

  .case-grid span {
    font-size: .84rem;
    line-height: 1.45;
  }

  .project-category,
  .project-status,
  .status-pill {
    font-size: .7rem;
    padding: 6px 8px;
  }

  .about-grid {
    grid-template-columns: 1fr 350px;
    gap: 20px;
  }

  .about-card,
  .tech-story-card,
  .tech-highlight-card {
    padding: 18px;
    border-radius: 18px;
  }

  .tech-card {
    min-height: auto;
  }

  .timeline-lite span {
    font-size: .85rem;
  }

  .contact-card {
    padding: 24px;
    gap: 18px;
    border-radius: 18px;
  }

  .portfolio-footer {
    padding: 20px 0;
  }
}

@media screen and (min-width: 961px) and (max-width: 1280px) {
  .service-grid,
  .tech-background-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .demo-grid,
  .timeline-lite {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  .portfolio-project-card {
    grid-template-rows: 150px auto;
  }
}