/* =====================================================
   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: 70px 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_indices.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
===================================================== */

.platform-section{

    max-width:950px;

    margin:90px auto 40px;

    display:grid;

    grid-template-columns:40% 60%;

    column-gap:45px;

    align-items:start;

}

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

.page-text{

    width:100%;

}

.page-text h2 {

    font-size: 2rem;

    letter-spacing: .12em;

    text-transform: uppercase;

    color: #444;

    margin-bottom: 25px;
}

.page-text p{

    margin:0;

    font-size:1.15rem;

    line-height:1.8;

}


/* =====================================================
   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){

    .platform-section{

        grid-template-columns:1fr;

        row-gap:40px;

    }

    .platform-images{

        grid-template-columns:1fr 1fr;

    }

    .stress-layout{

        flex-direction:column;

    }

    .page-header-content h1{

        font-size:2.3rem;

    }

    .page-text{

        text-align:center;

    }

}

/* =====================================================
   TABLES
===================================================== */

.table-block{

    max-width:950px;

    margin:40px auto;

}

.table-block table{

    width:100%;

    border-collapse:collapse;

    font-size:1rem;

}

.table-block th{

    background:#4eb980;

    color:#fff;

    padding:16px 20px;

    text-align:left;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.table-block td{

    padding:16px 20px;

    border-bottom:1px solid #e5e5e5;

    vertical-align:middle;

}

.table-block tbody tr:nth-child(even){

    background:#fafafa;

}


/* =====================================================
   PLATFORM TABLE
===================================================== */

.platform-table{

    width:100%;

}
.platform-images{

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;

    margin-top: 115px;

}

.platform-card img{

    width:100%;

    display:block;

    border-radius:8px;

}


.platform-card{

    display:block;

    text-decoration:none;

    color:inherit;

    transition:.25s;

    cursor:pointer;

}

.platform-card:hover{

    transform:translateY(-5px);

}

.platform-card:hover img{

    box-shadow:0 10px 25px rgba(0,0,0,.15);

}
/* =====================================================
   VEGETATION TABLE
===================================================== */

.indices-table{

    width:100%;

}

.indices-table strong{

    display:block;

    margin-bottom:4px;

    font-size:1.05rem;

    color:#333;

}

.indices-table span{

    display:block;

    font-size:.86rem;

    line-height:1.4;

    color:#888;

}


/* =====================================================
   STRESS ASSESSMENT 
===================================================== */

.stress-layout{

    display:flex;

    align-items:flex-start;

    gap:40px;

    margin-top:40px;

}

.stress-image{

    flex:0 0 420px;

}

.stress-image img{

    width:100%;

    border-radius:8px;

}

.stress-text{

    flex:1;

}


/* =====================================================
   FROM INDICES TO STRESS MAPS 
===================================================== */

.summary-section{

    max-width:950px;

    margin:70px auto;

}

.summary-section .page-text {

    max-width: 950px;

    margin: 0 auto;
}

.summary-section h2 {

    margin-bottom: 25px;
}

.summary-image{

    margin:40px 0;

}

.summary-image img {

    width: 100%;

    max-width: 900px;

    height: auto;

    display: block;

    margin: 0 auto;

    border-radius: 8px;

    
}

.summary-section .page-text:last-child {

    margin-top: 40px;
}