/* Alapok */
* {margin:0; padding:0; box-sizing:border-box;}
body {
    font-family:'Roboto',sans-serif;
    line-height:1.6;
    color:#333;
    background-image: url('main.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;}
a {text-decoration:none; color:inherit;}
img {max-width:100%; display:block;}
.container {max-width:1200px; margin:0 auto; padding:20px;}
section {padding:60px 20px;}
.mainbox {background-color: #cccccc99; width: max-content; margin: 0 auto;}

/* Header & Footer */
header, footer {background:#1a1a1a; color:#fff; text-align:center; padding:20px 0;}
header nav a {margin:0 15px; font-weight:500; transition:0.3s;}
header nav a:hover {color:#f39c12;}

/* Hero */
.hero {background:#f7f7f7; text-align:center; padding:120px 20px;}
.hero h2 {font-size:2.5rem; margin-bottom:20px;}
.hero p {font-size:1.2rem; margin-bottom:30px;}
.hero .cta-btn {background:#f39c12; color:#fff; padding:15px 30px; border-radius:5px; font-weight:700; transition:0.3s;}
.hero .cta-btn:hover {background:#e67e22;}

/* Szolgáltatások */
.services h2, .pricing h2, .about h2, .calc h2{text-align:center; margin-bottom:40px; font-size:2rem;}
.service-items, .pricing-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:30px;}
.service-item, .pricing-card {padding:30px; padding: 20px; background-color: #f5f5f5; border-radius:8px; box-shadow:0 4px 6px rgba(0,0,0,0.1); text-align:center; transition:0.3s;}
.service-item:hover, .pricing-card:hover {transform:translateY(-5px);}
.service-item h3, .pricing-card h3 {margin-bottom:15px; font-size:1.3rem; color:#1a1a1a;}
.service-item p, .pricing-card p {color:#555;}
.price {font-size:1.5rem; font-weight:700; color:#f39c12; margin:15px 0;}

/* Referenciák */
.references h2 {text-align:center; margin-bottom:40px;}
.references-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:15px;}
.references-grid img {border-radius:8px; cursor:pointer; transition:0.3s;}
.references-grid img:hover {transform:scale(1.05);}

/* Lightbox / nagyítás */
#lightbox {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); justify-content:center; align-items:center; z-index:10000;}
#lightbox img {max-width:90%; max-height:80%; border-radius:10px;}

/* Kapcsolat */
.contact form {max-width:600px; margin:0 auto; display:flex; flex-direction:column; gap:15px;}
.contact input, .contact textarea {padding:15px; border:1px solid #ccc; border-radius:5px; font-size:1rem;}
.contact button {padding:15px; border:none; background:#f39c12; color:#fff; font-weight:700; border-radius:5px; cursor:pointer; transition:0.3s;}
.contact button:hover {background:#e67e22;}

/* Bemutatkozás */
.about {display:flex; flex-direction:column; align-items:center; gap:30px;}
.about img {border-radius:50%; width:200px; height:200px; object-fit:cover; box-shadow:0 4px 10px rgba(0,0,0,0.1);}
.about p {max-width:700px; text-align:center; line-height:1.7;}
.history {margin-top:40px;}
.history h3 {text-align:center; margin-bottom:20px; font-size:1.5rem;}
.history ul {list-style:none; padding-left:0;}
.history li {background:#f7f7f7; margin-bottom:10px; padding:15px; border-radius:5px; box-shadow:0 2px 4px rgba(0,0,0,0.05);}

/* Kalkulátor */
.calc {
    display: flex;
    justify-content: center;
}

.calc h2 {
    margin-bottom: 30px;
}

.pricing-card {
    width: 100%;
    max-width: 500px;
    display: grid;
    gap: 15px;
    text-align: left;
}

.pricing-card label {
    font-weight: 500;
}

.pricing-card input[type="number"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.pricing-card fieldset {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
}

.pricing-card legend {
    font-weight: 600;
    padding: 0 8px;
}

.pricing-card fieldset label {
    display: block;
    margin-top: 8px;
    font-weight: 400;
}

.pricing-card button {
    margin-top: 10px;
    padding: 15px;
    border: none;
    background: #f39c12;
    color: #fff;
    font-weight: 700;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.pricing-card button:hover {
    background: #e67e22;
}

#result {
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: #f39c12;
    margin-top: 10px;
}

.note {
    text-align: center;
    font-size: 0.9rem;
    color: #555;
}