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

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f5f5f5;
    color:#222;
    line-height:1.6;
}

header{
    background:#111;
    color:white;
    padding:20px 0;
}

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* LOGO */
.logo{
    width:120px;
    height:auto;
}

/* TITLE */
h1{
    font-size:28px;
}

/* MENU */
nav a{
    color:white;
    text-decoration:none;
    margin-left:25px;
    transition:.3s;
}

nav a:hover{
    color:#e30613;
}


/* HERO */
.hero{
    background:linear-gradient(135deg,#111,#333);
    color:white;
    text-align:center;
    padding:120px 20px;
}

.hero h2{
    font-size:50px;
    margin-bottom:20px;
}

.hero p{
    font-size:20px;
    max-width:700px;
    margin:auto;
}

.btn{
    display:inline-block;
    margin-top:40px;
    background:#e30613;
    color:white;
    padding:15px 35px;
    text-decoration:none;
    border-radius:6px;
    transition:.3s;
}

.btn:hover{
    background:#b5000c;
}


/* SECTIONS */
section{
    padding:80px 10%;
}

section h2{
    text-align:center;
    margin-bottom:40px;
    font-size:38px;
}


/* CARDS */
.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.card{
    background:white;
    padding:30px;
    border-radius:10px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.3s;
}

.card:hover{
    transform:translateY(-8px);
}


/* FOOTER */
footer{
    background:#111;
    color:white;
    text-align:center;
    padding:30px;
}


/* MOBILE */
@media(max-width:768px){

.container{
    flex-direction:column;
}

.logo{
    margin-bottom:10px;
}

nav{
    margin-top:15px;
}

nav a{
    margin:0 10px;
}

.hero h2{
    font-size:34px;
}

}

/* ---- SFONDI ME VIDEO ---- */
html, body { min-height: 100%; }
body { background: transparent; color: #fff; }

.video-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: -1; }

header { background: rgba(17,17,17,.85); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; }
.hero { background: transparent; text-shadow: 0 2px 12px rgba(0,0,0,.8); }
section { background: transparent; }
section h2 { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.85); }
#about p { color: #f1f1f1; text-shadow: 0 2px 10px rgba(0,0,0,.8); max-width: 800px; margin: auto; text-align: center; }
#contact p { color: #fff; text-align: center; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.card { background: rgba(255,255,255,.92); backdrop-filter: blur(6px); color: #222; }
footer { background: rgba(17,17,17,.85); }