.mobile-display{
    display: none;
}
.desktop-display{
    display: block;
}

/* Leadership Section */
    .leader-card.ken-section {
        width: 100%;
        height: 500px;
        position: relative;
    }
    .leader-card.denise-section {
        width: 100%;
        height: 450px;
        position: relative;
    }

    .leader-photo{
        position: absolute;
        z-index: 11;
    }

    .leader-photo .leader-image {
        width: 460px;
        height: auto;
        display: block;
    }

    .leader-content{
        position: absolute;
        z-index: 10;
        background-color: #e0f2cc;
        height: 350px;
    }
    .leader-quote{
        width: 52%;
        position: absolute;
        padding: 40px 0;
    }
    .leader-quote p{
        margin-bottom: 20px;
    }

    .leader-quote p::before {
        font-family: sans-serif;
        content: "“";
        position: absolute;
        left: -20%;
        top: -15%;
        font-size: 250px;
        line-height: 1;
    }

    .leader-name {
        font-weight: bold;
        margin-bottom: 5px;
        font-size: 1em;
    }

    .leader-title{
        font-size: 1em;
    }

    .leader-card.ken-section .leader-photo{
        left: 0;
        bottom: 0;
    }
    .leader-card.ken-section .leader-content{
        left: 18%;
        right: 2%;
        bottom: 0;
    }
    .leader-card.ken-section .leader-quote{
        right: 10%;
        top: 5%;
    }
    .leader-card.denise-section .leader-photo{
        right: 0;
        bottom: 0;
        text-align: right;
    }
    .leader-card.denise-section .leader-content{
        left: 2%;
        right: 15%;
        bottom: 0;
    }
    .leader-card.denise-section .leader-quote{
        left: 21%;
        top: 5%;
    }


/* SDG Section */
    .sdg-section{
        background: #efefef;
    }
    .sdg-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
        margin: 30px auto 0 auto;
    }

    .sdg-item {
        width: 140px;
        height: 140px;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .sdg-item:hover {
        transform: scale(1) translateY(-3px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    }

    .sdg-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: left 0.5s ease;
    }

    .sdg-item:hover::before {
        left: 100%;
    }

    .sdg-1 { background-image:url('/sites/zyxel/files/library/assets/esg/company_governance/Sustainable_Development_Goal_1.jpg');}
    .sdg-2 { background-image:url('/sites/zyxel/files/library/assets/esg/company_governance/Sustainable_Development_Goal_3.jpg'); }
    .sdg-3 { background-image:url('/sites/zyxel/files/library/assets/esg/company_governance/Sustainable_Development_Goal_4.jpg'); }
    .sdg-4 { background-image:url('/sites/zyxel/files/library/assets/esg/company_governance/Sustainable_Development_Goal_5.jpg'); }
    .sdg-5 { background-image:url('/sites/zyxel/files/library/assets/esg/company_governance/Sustainable_Development_Goal_6.jpg'); }
    .sdg-6 { background-image:url('/sites/zyxel/files/library/assets/esg/company_governance/Sustainable_Development_Goal_7.jpg'); }
    .sdg-7 { background-image:url('/sites/zyxel/files/library/assets/esg/company_governance/Sustainable_Development_Goal_8.jpg'); }
    .sdg-8 { background-image:url('/sites/zyxel/files/library/assets/esg/company_governance/Sustainable_Development_Goal_12.jpg'); }
    .sdg-9 { background-image:url('/sites/zyxel/files/library/assets/esg/company_governance/Sustainable_Development_Goal_13.jpg'); }
    .sdg-10 { background-image:url('/sites/zyxel/files/library/assets/esg/company_governance/Sustainable_Development_Goal_17.jpg'); }

/* Background Section */
    .background-section01,
    .background-section02 {
        background-position: bottom;
        background-size: cover;
        background-repeat: no-repeat;
        height: 220px;
    }
    .background-section01{
        background-image:url('/sites/zyxel/files/library/assets/esg/company_governance/03.jpg');
    }
    .background-section02{
        background-image:url('/sites/zyxel/files/library/assets/esg/company_governance/04.jpg');
    }

/* Governance Section */
    .governance-section {
        background: #e0f2cc;
    }

/* Sustainable packaging section */
    /* two columns style */
    .business-content,
    .safeguarding-content,
    .stakeholders-content{
        display: flex;
        align-items: center;
        gap: 50px;
        flex-direction: row;
    }
   
    .business-text,
    .business-image,
    .safeguarding-text,
    .safeguarding-image,
    .stakeholders-text,
    .stakeholders-image{
        width: 50%;
    }

    .business-image img,
    .safeguarding-image img,
    .stakeholders-image img{
        width: 100%;
        object-fit: cover;
        object-position: center;
    }

/* Navigating critical times */
    .navigating-section{
        background: #efefef;
    }
    .navigating-text{
        padding: 30px 0;
    }

/* Ensuring business Section */
    .ensuring-business-section .desktop-display{
        margin-top: 2%;

    }

/*==== Honors ====*/
    section.honors.section{
        background: #efefef;
        padding-bottom: 80px
    }
    .honors .section_title{
        text-align: center;
    }
    .honors .honors_slide{
        margin-top: 3%;
        padding: 0 40px;
    }
    .honors .honors_slide button.slick-prev:before{
        transform: rotate(-135deg);
    }
    .honors .honors_slide button.slick-next:before{
        transform: rotate(45deg);
    }
    .honors .honors_slide button.slick-arrow:before{
        content: "";
        border: 4px solid #a9a9a9;
        border-width: 4px 4px 0 0;
        width: 25px;
        height: 25px;
        display: block;
    }
    .honors .honors_slide .slick-dots li.slick-active button:before{
        background-color: #288719 !important;
    }
    .honors_small_teaser{
        position: relative;
        margin:0 10px;

    }
    .honors_slide .honors_small_teaser .honors_img{
        width: 100%;
        height: 100%;
        text-align: center;
    }
    .honors_slide .honors_small_teaser .honors_img img{
        width: 100%;
        height: auto;
    }

    .honors_slide .honors_small_teaser .overlay{
        position:absolute;
        bottom:0;
        left:0;
        right:0;
        background-color:#278719;
        overflow:hidden;
        width:100%;
        height:0;
        transition:.4s ease;
    }

    .honors_slide .honors_small_teaser:hover .overlay {
        height:100%;    
    }

    .honors_slide .honors_small_teaser .overlay .description {
        width: 80%;
        position:absolute;  
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%, -50%);
        -ms-transform:translate(-50%, -50%);
        transform:translate(-50%, -50%);    
    }
    .honors_slide .honors_small_teaser .overlay .description a{
        text-decoration: none;
    }
    .honors_slide .honors_small_teaser .overlay .description p{
        text-align:center;
        color:#ffffff; 
        margin: 0; 
    }
    .honors_slide .honors_small_teaser .overlay .description .description_title{
        font-weight: bold;
    }
    .honors .honors_slide ul.slick-dots{
        bottom: -60px;
        margin-left: -40px;
    }


/* Stakeholders Section */
    .stakeholders-text h3{
        font-size: 20px;
        margin: 30px 0 20px 0;
    }

    .open-close-button{
        cursor: pointer;
        border: none;
        background-color: transparent;
        font-size: 15px;
        margin: 10px 0 0 0;
        position: relative;
        padding-left: 0;
    }

    .open-close-button:after {
        font-family: FontAwesome;
        content: "\f107";
        font-size: 20px;
        top: -2px;
        color: #278719;
        margin-left: 10px;
        position: absolute;
        -webkit-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;
    }
    .open-close-button.active:after {
        -webkit-transform: rotate(180deg);
          -ms-transform: rotate(180deg);
          -o-transform: rotate(180deg);
          transform: rotate(180deg);
    }

    .expandable-content {
        max-height: 0;
        overflow: hidden;
        margin: 20px auto;
        transition: max-height 0.8s ease-in-out, opacity 0.6s ease-in-out;
    }

    .expandable-content.open {
        max-height: 2000px;
        opacity: 1;
    }
    .expandable-content .note{
        text-align: left;
    }
    .expandable-content .note a:hover{
        color: #4b9b3f;
    }

/* Table */
    .table-responsive {
            background: white;
            border-radius: 4px;
            overflow-x: auto;
            /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
        }
        
        .esg-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
            min-width: 800px;
        }
        .esg-table tr{
            border-bottom: 5px solid #ffffff;
        }
        .chapter-cell{
            border-left: 5px solid #ffffff;
        }
        .category-cell{
            border-right: 5px solid #ffffff;
        }
        
        .esg-table tr.th01{
            background-color: #cccccc;
        }
        .esg-table tr.th02{
            background-color: #efefef;
        }
        
        .esg-table th {
            font-weight: bold;
            padding: 12px 8px;
            text-align: center;
        }
        
        .esg-table td {
            padding: 8px;
            text-align: center;
            vertical-align: middle;
        }
        
        .esg-table tbody tr:nth-child(odd) {
            background-color: #f9f9f9;
        }
        
        .esg-table tbody tr:nth-child(even) {
            background-color: #ffffff;
        }
        
        .category-cell {
            background-color: #e6e6e6 !important;
            font-weight: bold;
            text-align: center;
            vertical-align: middle;
            /* writing-mode: vertical-lr; */
            text-orientation: mixed;
            width: 80px;
        }
        
        .governance-category {
            background-color: #e0f2cc !important;
        }
        
        .environment-category {
            background-color: #cde0b8 !important;
        }
        
        .society-category {
            background-color: #c1cdb3 !important;
        }
        
        .chapter-cell {
            background-color: #e6e6e6 !important;
            font-weight: bold;
            text-align: center;
            vertical-align: middle;
            width: 100px;
        }
        
        .issue-cell {
            background-color: inherit;
            text-align: left !important;
            padding: 8px 12px;
            font-weight: bold;
            width: 120px;
        }
        
        .gri-cell {
            background-color: inherit;
            text-align: left;
            padding: 8px 12px;
            width: 80px;
        }
        
        .impact-cell {
            background-color: inherit;
            text-align: center;
            padding: 8px;
            width: 80px;
        }
        
        .blue-dot {
            width: 13px;
            height: 13px;
            background-color: #5a931b;
            border-radius: 50%;
            display: inline-block;
        }
        
        .dark-blue-dot {
            width: 10px;
            height: 10px;
            background-color: #5a931b;
            border-radius: 50%;
            display: inline-block;
        }
        
        .esg-table tbody tr:hover {
            background-color: #f5ffeb !important;
        }
        
        .esg-table tbody tr:hover .category-cell.governance-category {
            background-color: #e0f2cc !important;
        }
        
        .esg-table tbody tr:hover .category-cell.environment-category {
            background-color: #cde0b8 !important;
        }
        
        .esg-table tbody tr:hover .category-cell.society-category {
            background-color: #c1cdb3 !important;
        }
        
        .esg-table tbody tr:hover .chapter-cell {
            background-color: #e6e6e6 !important;
        }

/* Dialog */
        #sdgDialog {
            max-width: 600px;
            width: 90%;
            padding: 0;
            border: none;
            border-radius: 5px;
            box-shadow: 0 10px 30px rgb(0 0 0 / 11%);
            background: white;
        }

        #sdgDialog::backdrop {
            background: rgb(0 0 0 / 32%);
            backdrop-filter: blur(5px);
        }

        #sdgDialog .dialog-header {
            background: #efefef;
            padding: 20px;
            border-radius: 5px 5px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #sdgDialog .dialog-title {
            font-size: 20px;
            font-weight: 600;
            margin: 0;
        }

        #sdgDialog .close-button {
            background: rgb(255 255 255 / 69%);
            border: 2px solid rgb(255 255 255 / 69%) !important;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease;
            font-weight: 500;
        }

        #sdgDialog .close-button:focus{
            border: 2px solid rgb(255 255 255 / 69%) !important;
        }

        #sdgDialog .close-button:hover {
            background: rgba(255,255,255,0.3);
            border: 2px solid rgb(255 255 255 / 69%) !important;
        }

        #sdgDialog .dialog-content {
            padding: 30px 40px 30px 50px;
        }

        .goals-list li {
            padding: 12px 0;
            position: relative;
            padding-left: 10px;
        }
        .goals-list li:not(:first-child){
            border-top: 1px solid #f0f0f0;
        }

        @media (max-width: 768px) {
           
            #sdgDialog {
                width: 95%;
            }
            
            .dialog-content {
                padding: 20px 20px 20px 40px;
            }
        }


/* RWD */
    @media screen and (max-width: 1024px){
        .leader-photo .leader-image{
            width: 400px;
        }
        .leader-card.ken-section .leader-quote{
            right: 6%;
        }
        .leader-card.denise-section .leader-quote{
            left: 15%;
        }
        .leader-card.ken-section .leader-content{
            right: 2%;
            left: 18%;
        }

    }

    @media screen and (max-width: 992px){
        .leader-content{
            height: 320px;
        }
        .leader-quote{
            width: 60%;
        }
        .leader-quote p::before{
            font-size: 180px;
            top: 0;
        }
        .leader-photo .leader-image{
            width: 350px;
        }
        .leader-card.ken-section .leader-content{
            right: 2%;
            left: 22%;
        }
        .leader-card.ken-section{
            height: 400px;
        }

        .honors .honors_slide button.slick-arrow:before{
            border: 3px solid #a9a9a9;
            border-width: 3px 3px 0 0;
            width: 20px;
            height: 20px;
        }
    }

    @media (max-width: 768px) {
        .risk-content,
        .stakeholder-content {
            flex-direction: column;
            gap: 40px;
        }

        .process-steps {
            flex-direction: column;
        }

        .sdg-grid {
            gap: 15px;
        }

        .sdg-item {
            width: 100px;
            height: 100px;
        }

        .business-content,
        .safeguarding-content,
        .stakeholders-content {
            grid-template-columns: 1fr;
            gap: 40px;
            flex-direction: column;
        }
        .business-text,
        .safeguarding-text, 
        .stakeholders-text{
            width: 100%;
        }
        .business-image,
        .safeguarding-image,
        .stakeholders-image{
             width: 80%;
        }

        .leader-card.ken-section{
            height: auto;
            display: flex;
            flex-direction: column;
        }
        .leader-card.denise-section{
            height: auto;
            display: flex;
            flex-direction: column-reverse;
        }
        .leader-card.ken-section{
            margin-bottom: 5%;
        }
        .leader-photo{
            position: relative;
        }
        .leader-photo .leader-image {
            width: 450px;
            display: inline;
        }
        .leader-card.ken-section .leader-content,
        .leader-card.denise-section .leader-content{
            position: relative;
            height: auto;
            right: 0;
            left: 0;
        }
        .leader-quote{
            position: relative;
            width: 100%;
            padding: 5%;
        }
        .leader-card.ken-section .leader-quote{
            right: 0;
        }
        .leader-card.denise-section .leader-quote{
            left: 0;
        }

        .leader-quote p::before {
            font-size: 80px;
            position: relative;
            left: 0;
            line-height: 0;
            top: 29px;
            margin-right: 5px;
        }
        .open-close-button.mobile-display{
            display: block;
        }
        .open-close-button.desktop-display{
            display: none;
        }


    }

    @media (max-width: 640px) {

        .mobile-display{
            display: block;
        }
        .desktop-display{
            display: none;
        }
        .honors .honors_slide{
            padding: 0 20px;
        }
        .honors .honors_slide ul.slick-dots{
            margin-left: -20px ;
        }
        .business-image,
        .safeguarding-image,
        .stakeholders-image{
             width: 100%;
        }
    }