/* =====================================================
   GENERAL
===================================================== */

body {
    margin: 0;
    font-family: 'Source Sans Pro', sans-serif;
    background: #ffffff;
    color: #555;
}

.page-content {
    width: min(1300px, 92%);
    margin: 0 auto;
}

.section-divider {
    width: 75%;
    max-width: 1100px;
    height: 1px;
    margin: 60px auto;

    background: linear-gradient(to right,
            transparent,
            #dcdcdc 15%,
            #dcdcdc 85%,
            transparent);
}

/* =====================================================
   TOP & BOTTOM BANNER
===================================================== */

.page-banner {
    width: 100%;
    height: 120px;

    background-image: url("../../images/sfondo.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 72%;

    margin: 0 auto;
}

.page-footer {
    transform: rotate(180deg);
}


/* =====================================================
   PAGE TITLE
===================================================== */

.page-header-content {

    text-align: center;

    padding: 60px 0 30px 0;
}

.page-header-content h1 {

    font-size: 3rem;

    letter-spacing: .18em;

    text-transform: uppercase;

    color: #333;

    margin-bottom: .35em;
}

.page-header-content p {

    max-width: 900px;

    margin: 0 auto;

    font-size: 1.25rem;

    letter-spacing: .08em;

    color: #777;
}


/* =====================================================
   CONTENT SECTIONS
===================================================== */

.page-section{

    max-width:950px;

    margin:70px auto;

    display:flex;

    align-items:center;

    gap:50px;

}

.page-section.reverse {

    flex-direction: row-reverse;
}


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

.page-image{

    flex:0 0 48%;

}

.page-image img{

    width:100%;

    display:block;

    border-radius:8px;

}


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

.page-text{

    flex:0 0 52%;

}

.page-text h2 {

    font-size: 2rem;

    letter-spacing: .12em;

    text-transform: uppercase;

    color: #444;

    margin-bottom: 25px;
}

.page-text p {

    font-size: 1.15rem;

    line-height: 1.9;
}


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

.page-end {

    text-align: center;

    max-width: 900px;

    margin: 120px auto;
}

.page-end h2 {

    font-size: 2.2rem;

    letter-spacing: .12em;

    text-transform: uppercase;

    color: #333;

    margin-bottom: 25px;
}

.page-end p {

    font-size: 1.15rem;

    line-height: 1.8;

    margin-bottom: 40px;
}


/* =====================================================
   BUTTON
===================================================== */

.page-button {

    display: inline-block;

    padding: 18px 42px;

    background: #55505a;

    color: white;

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: .12em;

    border-radius: 5px;

    transition: .25s;
}

.page-button:hover {

    background: #4eb980;
}


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

@media (max-width: 900px) {

    .page-section,
    .page-section.reverse {

        flex-direction: column;
    }

    .page-header-content h1 {

        font-size: 2.3rem;
    }

    .page-text {

        text-align: center;
    }

}