/*
GENERALE
*/
#sezioneSostenibilita2 {
    padding-top: 70px;
}

#sezioneSostenibilita2 h3 {
    margin-top: 0px !important;
}

.titolo_parte1 {
    color: var(--app-color-green-1);
    padding-right: 12px;
}

.titolo_parte2 {
    color: var(--app-color-green-3);
}

.sotto_titolo {
    color: var(--app-color-dark-5);
    margin-bottom: 30px;
}

.text {
    max-width: 785px;
    color: var(--app-color-dark-7);
    text-align: left;
    font: normal normal 17px 'Figtree';
    letter-spacing: 0px;
    height: 100%;
}


.less-margin {
    margin-top: -65px;
}

.less-margin-right-card {
    margin-top: 15px;
}

/*
Banner Pagina Sostenibilità (immagine in alto )
*/
.banner_item {
    position: relative;

}

#bannerSostenibilita1 {
    position: relative;
}


/* questo modifica il full-with-height appositamente per il banner sostenibilità*/
#bannerSostenibilita1 .full-width-height {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 800px;
    margin: 0 auto;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
    overflow: hidden;
}

#bannerSostenibilita1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#bannerSostenibilita1 .overlay {
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
}

#bannerSostenibilita1 h1 {
    font-size: 80px; 
}

#sezioneSostenibilita1_1_0 {
    padding-left: 35%;
}

/*
Prima Sezione Pagina Sostenibilità
*/
#sezioneSostenibilita1_1 .margin {
    margin-left: 50%;
}

#sezioneSostenibilita1_1 img {
    top: 893px;
    left: 0px;
    max-width: 380px;
    width: 100%;
    height: 100%;
    opacity: 1;
    padding-right: 10px;
    padding-top: 40px
}

#sezioneSostenibilita1_1 h2,
#sezioneSostenibilita1_1 h5 {
    color: var(--app-color-dark-5);
    text-align: left;
}

#sezioneSostenibilita1_1_1 {
    display: block;
}

/*
Sezione 1: Label Style matching Home
*/
.sezione label {
    color: var(--app-color-brand);
    text-transform: uppercase;
    font-size: 22px;
    font-weight: 800;
    display: block;
    margin-bottom: 20px;
}


#sezioneSostenibilita2_2 {
    margin-top: 40px;
    position: relative;
    justify-content: center;
}

#ss2Titolo,
#ss2SottoTitolo {
    padding-left: 5.76vw;
    max-width: 1360px;
}


/*
Terza Sezione Pagina Sostenibilità
*/



#sezioneSostenibilita3 {
    width: 100vw;
    max-height: 550px;
    overflow: hidden;
}

#sezione_3_img {
    opacity: 1;
}


/*
Quarta Sezione Pagina Sostenibilità
*/
#sezioneSostenibilita4 {
    padding-top: 70px;
    padding-bottom: 70px;
}

#sezioneSostenibilita4 .titolo_parte2 {
    margin-top: 0px !important;
}


#sezioneSostenibilita4_2 {
    margin-top: 80px;
}

/*
Sezione Generale
*/





/*
Background
*/

#sezione_1_Background,
#sezione_3_Background {}


/*
modifica colori card
*/

.cartaBianca h2 {
    color: var(--app-color-green-1);
    font-size: 30px;
}

.cartaBianca h5 {
    color: var(--app-color-green-3);
    text-transform: uppercase;
    font-size: 16px;
}

.cartaBianca p {
    color: var(--app-color-light-5);
    text-transform: uppercase;
}


.cartaVerde h2 {
    color: var(--app-color-green-1);
}

.cartaVerde h5 {
    color: var(--app-color-light);
    text-transform: uppercase;
}

.cartaVerde p {
    color: var(--app-color-green-1);
    text-transform: uppercase;
}


.cartaGialla h2 {
    color: var(--app-color-green-1);
}

.cartaGialla p {
    color: var(--app-color-light-5);
    text-transform: uppercase;
}

.cartaGialla h5 {
    color: var(--app-color-green-3);
    text-transform: uppercase;
}

.cartaBianca h2,
.cartaGialla h2,
.cartaVerde h2 {
    margin-top: 0px;
}

.cartaBianca h5,
.cartaGialla h5,
.cartaVerde h5 {
    margin-top: 0px;
    margin-bottom: 0px;
}

.cartaBianca p,
.cartaGialla p,
.cartaVerde p {
    margin-top: 13px;
    font: normal normal 16px 'Figtree';
}

/*
La successiva sezione gestisce solamente la call to action di questa pagina
*/
#callToActionSostenibilita {
    padding-top: 70px;
}

#callToActionSostenibilita h3 {
    color: var(--app-color-dark-5);
    text-align: center;
}

#callToActionBox1,
#callToActionBox2 {
    gap: 0;
    border: 4px solid var(--app-color-white);
}

#callToActionBox1 h5 {

    text-align: center;
    color: var(--app-color-green-1);
}

#callToActionBox1 p {
    color: var(--app-color-dark-7);
    text-align: center;
    font: normal normal 500 22px Figtree;

}

#callToActionBox2 h5 {
    text-align: center;
    color: var(--app-color-green-1);
}

#callToActionBox2 p {
    color: var(--app-color-dark-7);
    text-align: center;
    font: normal normal 500 22px Figtree;
}

/*
.buttonCta1{
	background: var(--app-color-brand) 0% 0% no-repeat padding-box;
    opacity: 1;
}

.buttonCta1:hover{
	background: var(--app-color-brand) 0% 0% no-repeat padding-box;
    border: 4px solid var(--app-color-brand-3);
}

.buttonCta1:active{
	background: var(--app-color-brand-3) 0% 0% no-repeat padding-box;
    border: 4px solid var(--app-color-brand-3);
}

.buttonCta2{
	background: var(--app-color-dark-5) 0% 0% no-repeat padding-box;
	background: #2C3133 0% 0% no-repeat padding-box;
    opacity: 1;
}

.buttonCta2:hover{
	background: var(--app-color-dark-5) 0% 0% no-repeat padding-box;
	background: #2C3133 0% 0% no-repeat padding-box;
    border: 4px solid var(--app-color-dark);
}

.buttonCta2:active{
	background: var(--app-color-dark) 0% 0% no-repeat padding-box;
    border: 4px solid var(--app-color-dark);
}
*/

/*
bottoni card svg
*/

.button1 {
    background-image: url("../../img/svg/Eye_GreenColour_Default.svg");
    position: relative;
}

/* Preload hover/active images to prevent flash on first hover */
.button1::after {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
    visibility: hidden;
    content: 
        url("../../img/svg/Eye_GreenColour_Hover.svg")
        url("../../img/svg/Eye_GreenColour_Active.svg");
}

.button1:hover {
    background-image: url("../../img/svg/Eye_GreenColour_Hover.svg");
}

.button1:active {
    background-image: url("../../img/svg/Eye_GreenColour_Active.svg");
}

.button2 {
    background-image: url("../../img/svg/Download_GreenColour_Default.svg");
    position: relative;
}

/* Preload hover/active images to prevent flash on first hover */
.button2::after {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
    visibility: hidden;
    content: 
        url("../../img/svg/Download_GreenColour_Hover.svg")
        url("../../img/svg/Download_GreenColour_Active.svg");
}

.button2:hover {
    background-image: url("../../img/svg/Download_GreenColour_Hover.svg");
}

.button2:active {
    background-image: url("../../img/svg/Download_GreenColour_Active.svg");
}



.ctaBox {
    background: var(--app-gradient-light-modified);
}



.boxCard {
    margin-left: auto;
    margin-right: auto;



}

.boxCard1 {
    max-width: 660px;
    display: flex;
    flex-direction: column;
}

#sezioneSostenibilita4_1 {
    padding-top: 0px;
}

/*
Sezione Sostenibilità Energetica
*/
#sezione_sostenibilita_energetica_Background {
    background-image: url("../../img/webp/background-sostenibilita-energetica-opera-smart-energy-italia-indovino-impresa.webp");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
}

#sezioneSostenibilitaEnergetica {
    padding-top: 70px;
    padding-bottom: 70px;
}

.cta-sostenibilita-energetica {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 440px;
    max-width: 440px;
    height: 130px;
    min-height: 130px;
    background-color: var(--app-color-green-1);
    border-radius: 0 40px 40px 40px;
    color: var(--app-color-light);
    font-size: 20px;
    font-weight: 800;
    font-family: 'Figtree', sans-serif;
    text-decoration: none;
    transition: background-color 0.3s ease;
    box-shadow: 3px 3px 16px #0000004D;
    padding: 22px;
}

.cta-sostenibilita-energetica:hover {
    color: var(--app-color-green-3);
}

.sezione-titoli-flex {
    display: flex;
    flex-wrap: wrap;
}

.sezione-energetica-bg {
    background-size: cover;
    background-position: center;
}

.flex-align-center-gap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.flex-align-center-flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.cta-link {
    text-decoration: none;
}

.cta-container-flex {
    display: flex;
    flex-direction: column;
}

.cta-boxes-container {
    display: flex;
    flex-direction: row;
    max-width: 1170px;
    width: stretch;
    margin-left: auto;
    margin-right: auto;
    gap: 60px;
}



.boxCard2 {

    max-width: 680px;
    display: flex;
    flex-direction: column;

}


@media (max-width: 500px) {

    #bannerSostenibilita1 h1 {
        font-size: 60px; 
    }
    #callToActionBox1 p,
    #callToActionBox2 p {
        font-size: 17px !important;
    }

    #bannerSostenibilita1 .full-width-height, #bannerSostenibilita1 .overlay {
        height: 500px;
    }

    .card {
        max-width: 100% !important;
        min-width: 0px !important;
        padding: 25px !important;
        box-sizing: border-box;
        border-radius: 0px 50px 50px 50px !important;
    }

    .cta-sostenibilita-energetica {
        width: 100%;
        max-width: 300px;
        height: 100px;
        font-size: 16px;
    }


}

@media (max-width: 500px) {
    #sezioneSostenibilita1_1 img {
        max-width: 250px;
        padding-left: 0;
        padding-right: 0;
    }

    /* Margini uguali a destra e sinistra per tutte le card su mobile */
    .card.left-card-margin,
    .card.right-card-margin,
    .w3-container.card.left-card-margin,
    .w3-container.card.right-card-margin,
    .ctaBox.left-card-margin,
    .ctaBox.right-card-margin {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
}

@media only screen and (max-width: 993px) {
    #sezioneSostenibilita1_1_0 {
        padding-left: 15px;
    }

    .boxCard2>:first-child {
        margin-top: 40px !important;
    }

    .boxCard2>:last-child {
        margin-bottom: 40px !important;
    }

    .boxCard2 {
        gap: 0px;
    }

    .boxRow {
        flex-direction: column;
        align-items: center;
    }

    .right-section-margin {
        padding-left: 5.76vw;
        margin-top: 30px;
    }

    .flex-align-center-flex-end {
        justify-content: center;
    }

    }

.card-grid {
    display: grid;
    grid-template-columns: repeat(4, 220px);
    gap: 30px;
    margin: 0 auto;
    justify-content: center;
    margin-top: 20px;
}

.card-grid .card {
    width: 100%;
    max-width: 220px;
}

.card-grid.card-grid--2 {
    grid-template-columns: repeat(2, 220px);
}

@media (max-width: 992px) {
    .card-grid {
        grid-template-columns: repeat(2, 220px);
    }
    
}

@media (max-width: 600px) {
    .card-grid, .card-grid.card-grid--2 {
        grid-template-columns: repeat(1, 220px);
    }

    .card-grid .card {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
}