/* Sustainability Main Page */ 
.sustain-header-text {
        padding-right: 10px; 
        padding-bottom: 4px;
        color:white;
        font-weight: 900;
        font-size: 45px;        
    }
    .sustain-header-subtext {
        display: block;         
        padding-right: 10px;         
        color:white;        
        font-size: 34px;
               
    }    



    @media screen and (max-width: 992px) {
        .sustain-header-text{
            font-size: 35px;
        }
        .sustain-header-subtext {
            font-size: 25px;
        }
    }
 

    /* Sections Sustinability */

        .section-main {
        display:flex;
        flex-direction: row;
        gap: 1.5rem;
        padding: 2rem 0px;
    }
    
    .section-image-container{
        display: grid;
        max-width: 100%;
        grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));     
        gap:20px;        
    }

    .section-title {
        color: #004F5D;
        font-size: 2.6rem;        
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;     
        font-weight: 100;
        margin: 20px 0px;
    }

    .section-text {
        color: #707070;
        font-size: 25px;  
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;      
        margin-top: 0px;
        font-weight: 100;
        text-align: justify;
    }

    .section-img {
        width: 50%;
        object-fit: cover;
        object-position: top;
    }
    
    .icon-img{
        padding-top: 0.5rem;
    }
    

    .section-reverse{
        flex-direction: row-reverse;
    }

    .section-text-container {
        display:flex;
        flex-direction: column;        
        justify-content: space-between;
        max-width: 100%;
    }

    .report-container-text {
        display: flex; 
        flex-direction: column;
        flex:50%; 
        padding: 10px;
    }

    .report-image {
        flex:50%; 
        height: 100%;
        padding-top: 100px;
    }

    .report-btn {
        padding: 10px; 
        background-color: rgb(0, 76, 91); 
        color: white; 
        text-decoration: none;  
        font-size: 1.3em;
        font-weight: 100;
        transition: color 0.3s ease-out;
        width: fit-content; 
        margin-bottom: 1em;
    }
    .gray-bg{
        color:white;
        background-color: #a7a9ac;
        margin-bottom: 3.5em; 
        width: fit-content; 
    }

    #report{
        display: flex; 
        align-items:normal; 
        padding: 2em 1.5em;
        margin-bottom: 4.5em; 
    }

    #scrollBtn{                       
        position: fixed;            
        bottom: -100px;
        right: 80px;
        z-index: 99;
        border-radius: 60px;
        background-color: #fff;
        border-color: transparent;
        box-shadow: 0 2px 4px 3px rgba(0,0,0,.15);   
        cursor:pointer;   
        padding:5px;
        transition: bottom 0.5s ease-in-out;
        width: 50px;
    }

    #fixedBtn{
        /* Style must be the same as scrollBtn. Only position can change */
        position: absolute;                
        top: -60px; 
        right: 80px;                           
        z-index: 99;
        border-radius: 60px;
        background-color: #fff;
        border-color: transparent;
        box-shadow: 0 2px 4px 3px rgba(0,0,0,.15);   
        cursor:pointer;   
        padding:5px;        
        width: 50px;        
    }

    #scrollBtn.show {
        bottom:40px;
    }

    #scrollBtn:hover, #fixedBtn:hover{
        box-shadow: 0 2px 12px 3px rgba(0,0,0,.15);   
    }    

    @media screen and (max-width: 460px) {
        
        #scrollBtn.show {
            bottom:20px;
        }  
        #scrollBtn, #fixedBtn{
            right: 20px;   
            width: 35px;            
        }        
        
        .div-1080-center {
            padding: 2em 1.5em;
        }
        .icon-img {
            width: 80px;
        }
        .section-image-container {
            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));  
        }
    }

    @media screen and (max-width: 760px) {
        .section-main {
            flex-direction: column;
            padding: 2em 1.5em;
        }
        .section-img {
            width: 100%;
        }

        .section-reverse{
            flex-direction: column;
        }
        .section-image-container{
            justify-content: space-between;
            gap: 0px;
        }
        #report {
            flex-direction: column;
        }

        .report-image{
            order: 1;
        }

        .report-container-text {
            order: 2;
        }

        .report-btn {
            margin: 0 auto;
        }
    }   

    @media screen and (min-width: 1280px) {
      

    }