/* =========================
RESET
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

img{
max-width:100%;
height:auto;
display:block;
margin-left:auto;
margin-right:auto;
}

/* =========================
BODY
========================= */

body{

font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

background:linear-gradient(
180deg,
#e9f4ff 0%,
#dbeeff 40%,
#e9f4ff 100%
);

color:#ffffff;

line-height:1.6;

min-height:100vh;

}

/* =========================
GLOBAL CONTAINER
========================= */

header,
main,
footer{

max-width:960px;

margin-left:auto;
margin-right:auto;

width:100%;

padding-left:20px;
padding-right:20px;

}

/* =========================
HERO
========================= */

.hero{

margin-top:24px;
margin-bottom:24px;

padding:40px 20px;

background-image:url("banner.jpg");
background-size:cover;
background-position:center;

display:flex;
align-items:center;
justify-content:center;

border-radius:20px;

box-shadow:
0 16px 40px rgba(0,0,0,0.25);

}

/* =========================
HERO GLASS
========================= */

.hero-overlay{

background:rgba(255,255,255,0.25);

backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);

padding:26px 30px;

border-radius:18px;

max-width:620px;

text-align:center;

border:1px solid rgba(255,255,255,0.45);

}

/* =========================
HERO TEXT
========================= */

.hero h1{

font-size:clamp(1.8rem,4vw,2.4rem);

margin-bottom:12px;

text-shadow:0 4px 12px rgba(0,0,0,0.45);

}

.hero p{

font-size:1rem;

text-shadow:0 2px 8px rgba(0,0,0,0.35);

}

/* =========================
MAIN
========================= */

main{

margin-bottom:40px;

}

/* =========================
SECTION
========================= */

section{

background:#7a1f2b;

border-radius:16px;

padding:26px;

margin-bottom:32px;

border-left:5px solid #d4af37;

box-shadow:
0 10px 24px rgba(0,0,0,0.2);

}

/* =========================
HEADINGS
========================= */

h2{
margin-bottom:14px;
}

h3{
margin-top:18px;
margin-bottom:10px;
}

/* =========================
TEXT
========================= */

p{
margin-bottom:14px;
}

/* =========================
LIST
========================= */

/* biztosan legyen pont */
ul{
margin:14px 0 18px;
padding-left:24px;
list-style-type:disc !important;
list-style-position:outside;
}

/* minden li viselkedjen rendesen */
ul li{
margin:8px 0;
display:list-item;
}

/* ha link van a listában, legyen külön sorban */
ul li a{
display:inline;
}

/* =========================
HR
========================= */

hr{

margin:18px 0;

border:none;

border-top:1px solid rgba(255,255,255,0.35);

}

/* =========================
CONTACT IMAGE
========================= */

.contact-image{

width:150px;

margin-bottom:16px;

border-radius:12px;

box-shadow:0 8px 20px rgba(0,0,0,0.3);

}

/* =========================
LINKS
========================= */

/* linkek ne legyenek kövérek akkor sem ha <strong>-ben vannak */
a{
color:#ffd6d6;
text-decoration:none;
font-weight:normal !important;
}

/* strong-ben lévő link is normál */
strong a{
font-weight:normal !important;
}

a:hover{
color:#ffffff;
text-decoration:underline;
}

/* =========================
FOOTER
========================= */

footer{

text-align:center;

padding:20px;

font-size:0.9rem;

color:#5a1a22;

background:rgba(255,255,255,0.65);

border-top:1px solid rgba(0,0,0,0.1);

}

/* =========================
MOBILE
========================= */

@media (max-width:768px){

header,
main,
footer{
padding-left:16px;
padding-right:16px;
}

.hero{
padding:28px 16px;
}

.hero-overlay{
padding:20px;
}

section{
padding:20px;
}

}