body{margin:0;font-family:Inter,system-ui;background:#0f1724;color:#e6eef6}




.logo{height:40px;margin-right:10px;vertical-align:middle}
.brand{font-weight:800;font-size:20px;display:flex;align-items:center;gap:8px}
nav a{
  color:#e6eef6;
  text-decoration:none;
  padding:8px 12px;
  border-radius:8px;
  font-weight: bold;
}

nav a:hover, .active{
  background:rgba(255,255,255,0.1);
  border-radius:8px;
}
main{max-width:1000px;margin:40px auto;padding:0 20px}
h1{font-size:32px;margin-bottom:12px}
ul{line-height:1.8}
.services-list { list-style:none; padding:0; margin:0; }
.services-list li { margin:12px 0; }
.services-list li a {
  display:block; padding:10px 15px; border-radius:8px; text-decoration:none;
  color:#e6eef6; background:rgba(255,255,255,0.03); transition: all 0.3s ease;
}
.services-list li a:hover {
  background: linear-gradient(90deg,#ff9800,#4CAF50);
  color:#072027;
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.btn{background:linear-gradient(90deg,#ff9800,#4CAF50);color:#072027;padding:12px 16px;border-radius:10px;border:0;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{opacity:0.9}
footer{text-align:center;padding:20px 0;color:#9aa6b2;font-size:13px;margin-top:40px;border-top:1px solid rgba(255,255,255,0.06)}
.contact-person{margin-bottom:25px}
.contact-person h2{font-size:24px;margin-bottom:8px}
.contact-name {
  font-size: 24px; /* nagyobb betűméret */
  font-weight: 700; /* vastagabb kiemelés */
  margin-bottom: 6px;

}

.contact-person a{
  text-decoration: none; /* Eltávolítja az aláhúzást */
  color: inherit;        /* Átveszi a szülő elem színét (pl. fekete marad) */
  cursor: pointer;     /* Biztosítja, hogy az egér mutatója kéz alakú maradjon felette */
  font-weight: bold;
}
 
.namelogo{
  text-decoration: none; /* Eltávolítja az aláhúzást */
  color: inherit;        /* Átveszi a szülő elem színét (pl. fekete marad) */
  cursor: pointer;     /* Biztosítja, hogy az egér mutatója kéz alakú maradjon felette */
  font-weight: bold;
}

header {
  display: flex;
  flex-direction: row;      /* Alapból egymás mellett (Asztali) */
  align-items: center;      /* Függőlegesen középre igazítja a logót és a szlogent */
  justify-content: space-between; /* Széthúzza őket, vagy használj flex-start-ot */
  flex-wrap: wrap;          /* Engedi a törést, ha nem férnek el */
  padding: 10px 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;                /* Távolság a logó kép és a szöveg között */
}

#szlogen {
  background: linear-gradient(90deg, #ff9800, #4CAF50);
  font-weight: 800;
  font-size: 24px;
  padding: 10px 15px;
  border-radius: 8px;
  color: black;
  text-align: center;
  margin: 0 15px;           /* Margó asztali nézetben */
}

/* Telefonos nézet (768px alatt) */
@media (max-width: 768px) {
  header {
    flex-direction: column; /* Mobilon egymás alá kényszeríti őket */
    gap: 15px;
  }

  #szlogen {
    width: 100%;           /* Mobilon kitölti a szélességet */
    margin: 10px 0;
    box-sizing: border-box;
    font-size: 20px;
  }

  nav {
  
  display: flex;  
  flex-wrap: wrap;         /* Ez teszi egymás mellé a linkeket */
  flex-direction: row;     /* Ez az alapértelmezett: vízszintes sor */
  gap: 0px;               /* Így tudsz távolságot tenni a gombok közé */
  justify-content: center; /* Ha középre akarod igazítani a menüt */
  }

  nav a{
    
    
  }
}

.slider-container {
    width: 100%;
    max-width: 100%;
    max-height: 200px;
    margin: 0px auto;
    position: relative; /* Ez kell, hogy a gombokhoz képest tájoljunk */
    overflow: hidden;
    border-radius: 12px;
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slider img {
    width: 100%;
    height: auto;       /* Engedi, hogy a kép arányos maradjon */
    max-height: 200px;  /* De ne legyen óriási asztali gépen */
    object-fit: cover;
    flex-shrink: 0;
}

/* Gombok stílusa a képen belül */
.prev-button, .next-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.3); /* Félig átlátszó fehér */
    color: white;
    border: none;
    padding: 16px;
    cursor: pointer;
    font-size: 24px;
    border-radius: 50%; /* Kerek gombok */
    transition: background-color 0.3s, scale 0.2s;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
}

.prev-button:hover, .next-button:hover {
    background-color: rgba(255, 255, 255, 0.6);
    scale: 1.1;
}

.prev-button { left: 15px; }
.next-button { right: 15px; }

/* Pöttyök a kép alján belül */
.dots-container {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
}

.dot.active {
    background-color: white;
    transform: scale(1.2);
}