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

body{
    font-family:'Montserrat',sans-serif;
    background:#f4f4f4;
}

/* HEADER */

.header{

    background:linear-gradient(
        90deg,
        #0b2341 0%,
        #0b2341 70%,
        #8b0015 100%
    );

    color:white;
}

/* CONTENITORE HEADER */

.header-container{

    max-width:1200px;

    margin:0 auto;

    display:grid;

    grid-template-columns:100px 1fr 100px;

    align-items:center;

    gap:15px;

    padding:10px 15px;
}

/* LOGHI */

.logo-left,
.logo-right{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;
}

.logo-left img,
.logo-right img{

    max-width:70px;

    max-height:70px;

    width:auto;

    height:auto;

    display:block;
}

/* TESTI */

.header-center{

    text-align:center;
}

.header-center h1{

    font-size:1.5rem;

    font-weight:700;

    margin-bottom:5px;
}

.header-center h2{

    font-size:1rem;

    color:#d4af37;

    font-weight:600;
}

/* MENU */

.navbar{

    background:rgba(0,0,0,0.15);
}

.navbar ul{

    list-style:none;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;
}

.navbar li{

    margin:0;
}

.navbar a{

    display:block;

    padding:12px 18px;

    color:white;

    text-decoration:none;

    font-weight:600;
}

.navbar a:hover{

    background:rgba(255,255,255,0.15);
}

/* TRICOLORE */

.tricolore{

    display:flex;

    height:8px;
}

.verde{
    flex:1;
    background:#009246;
}

.bianco{
    flex:1;
    background:#ffffff;
}

.rosso{
    flex:1;
    background:#ce2b37;
}

/* HERO */

.hero{

    min-height:500px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:#ececec;
}

.hero-content{

    padding:40px;
}

.hero-content h2{

    font-size:2.2rem;

    color:#0b2341;

    margin-bottom:20px;
}

.hero-content p{

    font-size:1.1rem;
}

/* SMARTPHONE */

@media(max-width:768px){

    .header-container{

        grid-template-columns:1fr;

        text-align:center;
    }

    .logo-left,
    .logo-right{

        margin:auto;
    }

    .navbar ul{

        flex-direction:column;
    }

    .navbar a{

        width:100%;
    }

    .header-center h1{

        font-size:1.1rem;
    }

    .header-center h2{

        font-size:0.9rem;
    }
}