/* Zebra táblázat - csak contentben */
.container table{
width:100%;
border-collapse:collapse;
margin-top:20px;
background:#1c1c1c;
border-radius:8px;
overflow:hidden;
}

/* fejléc */
.container th{
background:#111;
color:#ff6a00;
text-align:left;
padding:12px;
}

/* cellák */
.container td{
padding:12px;
border-bottom:1px solid #2a2a2a;
}

/* váltakozó sorok */
.container tbody tr:nth-child(even){
background:#181818;
}

.container tbody tr:nth-child(odd){
background:#202020;
}

/* hover */
.container tbody tr:hover{
background:#2a2a2a;
transition:.2s;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',Arial,sans-serif;
}

body{
background:#111;
color:#ddd;
line-height:1.7;
}

/* container */

.container{
width:90%;
max-width:1200px;
margin:auto;
padding:60px 0;
}

/* HEADER */

header{
background:#000;
border-bottom:3px solid #ff6a00;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 0;
}

.logo a{
font-size:24px;
font-weight:bold;
color:#ff6a00;
text-decoration:none;
}

nav a{
color:#ddd;
margin-left:25px;
text-decoration:none;
font-weight:500;
position:relative;
}

nav a::after{
content:"";
width:0;
height:2px;
background:#ff6a00;
position:absolute;
left:0;
bottom:-6px;
transition:.3s;
}

nav a:hover::after{
width:100%;
}

/* HERO */

.hero{
height:420px;
background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.7)),
url("https://images.unsplash.com/photo-1503376780353-7e6692767b70");
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

.hero h1{
font-size:50px;
margin-bottom:10px;
}

.hero p{
font-size:20px;
color:#bbb;
}

/* SECTION COLORS */

.section-dark{
background:#111;
}

.section-light{
background:#1b1b1b;
}

/* CONTENT BLOCK */

.content-box{
background:#1f1f1f;
padding:35px;
border-radius:10px;
margin-bottom:30px;
border-left:4px solid #ff6a00;
}

.content-box h2{
margin-bottom:10px;
color:#ff6a00;
}

.content-box p{
margin-bottom:15px;
}

/* SERVICES */

.services{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
margin-top:30px;
}

.service-card{
background:#1c1c1c;
padding:30px;
border-radius:10px;
border-top:3px solid #ff6a00;
text-decoration:none;
color:#ddd;
transition:.3s;
}

.service-card:hover{
transform:translateY(-8px);
box-shadow:0 10px 25px rgba(0,0,0,.6);
}

/* FORM */

.form{
max-width:600px;
margin-top:30px;
}

.input-group{
margin-bottom:20px;
}

label{
display:block;
margin-bottom:6px;
color:#aaa;
}

/* INPUTS */

input,
textarea,
select{
width:100%;
padding:12px 14px;
background:#1c1c1c;
border:1px solid #333;
border-radius:6px;
color:white;
font-size:14px;
transition:.3s;
}

textarea{
min-height:140px;
resize:vertical;
}

input:focus,
textarea:focus,
select:focus{
outline:none;
border-color:#ff6a00;
box-shadow:0 0 6px rgba(255,106,0,.5);
}

/* BUTTON */

button,
input[type=submit]{
background:#ff6a00;
border:none;
padding:14px 25px;
color:white;
font-weight:bold;
border-radius:6px;
cursor:pointer;
transition:.3s;
}

button:hover,
input[type=submit]:hover{
background:#ff8c00;
transform:translateY(-2px);
}

/* PAGE HEADER */

.page-header{
background:#1a1a1a;
padding:80px 0;
text-align:center;
}

.page-header h1{
font-size:42px;
}

/* FOOTER */

footer{
background:#000;
text-align:center;
padding:30px;
border-top:3px solid #ff6a00;
margin-top:60px;
color:#aaa;
}

/* ========================= */
/* CSAK CONTENT STYLING */
/* ========================= */

.container p{
color:#ccc;
margin-bottom:15px;
}

/* linkek CSAK contentben */
.container p a,
.container .content-box a,
.container .info-box a{
color:#ff6a00;
text-decoration:none;
font-weight:500;
transition:.25s;
}

.container p a:hover,
.container .content-box a:hover,
.container .info-box a:hover{
color:#ff8c00;
text-decoration:underline;
}

.container p a:visited,
.container .content-box a:visited,
.container .info-box a:visited{
color:#b04d00;
}

/* stat */
.container .stats{
font-size:14px;
color:#888;
margin-top:10px;
}

/* info box */
.container .info-box{
background:#1a1a1a;
padding:15px 20px;
border-radius:8px;
margin-top:15px;
border-left:3px solid #ff6a00;
}