@charset "utf-8";

/* SUSTAINABILITY PAGE CSS */

.sustainability-page-wrap .section-padding { padding: 0 0 70px; }
.sustainability-page-wrap .brand-title { font-size:40px; font-weight: 600; color: #222; margin-bottom: 50px; letter-spacing: -1px; }


/* Section 1: Core Circles */
.sus-core-list { display: flex; justify-content:space-between; align-items: center; position: relative; }
.sus-core-list::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; height: 1px; border-top: 4px dotted var(--primary-color); z-index: 1; }

.core-item { position: relative; z-index: 2; flex: 1; max-width: 400px; }
.core-circle { width: 400px; height: 400px; border-radius: 50%; background: #f8f8f8; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: all 0.4s ease; border: 1px solid #f0f0f0; }
.core-circle img{margin-bottom:30px;}
.core-circle i { font-size: 40px; color: #222;  }
.core-circle h3 { font-size:34px; font-weight: 600; color: #222; margin-bottom: 5px; }
.core-circle p { font-size: 24px; color: #222; }

.core-item.active .core-circle { background: var(--primary-color); border-color: var(--primary-color); color: #fff; box-shadow: 0 0 0 30px rgba(195, 0, 47, 0.1); }
.core-item.active .core-circle i,
.core-item.active .core-circle h3,
.core-item.active .core-circle p { color: #fff; }

/* Section 2: Slogan */
.sus-slogan { text-align: center; background: #fff; }
.slogan-content p { font-size: 34px;font-weight: 400;}
.slogan-content h3 {font-weight: 600;font-size: 34px;}

/* Section 3: Forest Background */
.sus-forest .forest-bg-wrap { background-image: url('../images/sub/sub05_img01.png');padding:200px 0; background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; display: flex; align-items: center; justify-content: center; position: relative; }
.sus-forest .forest-bg-wrap::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); }

.forest-text { position: relative; z-index: 1; text-align: center; color: #fff; }
.forest-text p { font-size: 28px; line-height: 1.6; font-weight: 300; }
.forest-text p span { font-weight: 600; display: block; margin-top: 20px; font-size: 32px; }

/* Section 4: ESG Management */
.esg-list { display: flex; flex-direction: column; gap: 40px; }
.esg-item { display: flex; align-items: center; gap: 90px; padding-bottom: 60px; border-bottom: 1px solid #ddd; }
.esg-item:last-child { border-bottom: 0; }

.esg-icon { flex-shrink: 0; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; }
.esg-icon img { max-width: 100%; }

.esg-content { flex: 1; }
.esg-content h4 { font-size: 38px; font-weight: 600; color: var(--primary-color); margin-bottom: 20px; }
.esg-content .esg-desc { font-size: 18px; line-height: 1.8; margin-bottom: 25px; word-break: keep-all; }
.esg-tags { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }
.esg-tags li { background: #f5f5f5; padding: 15px 25px; border-radius: 30px; font-size: 18px; font-weight:500; }

/* Section 5: Our Promise */
.promise-img-box { height: 400px; background-image: url('../images/sub/sub05_img02.png'); background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 15px; position: relative; overflow: hidden; }
.promise-img-box::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); }

.promise-text-overlay { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; }
.promise-text-overlay .p-left,
.promise-text-overlay .p-right { flex: 1; padding: 0 40px; }

.promise-text-overlay p { font-size: 30px; font-weight: 300;}
.promise-text-overlay h4 { font-size: 30px; font-weight: 600; }

.p-icon-circle {position:relative;  border-radius: 50%;  display: flex; align-items: center; justify-content: center; font-size: 30px; padding:0 150px;}
.p-icon-circle::before{position:absolute;width:150px;height:1px;background-color:#fff;left:0;top:50%;transform:translateY(-50%);content:'';}
.p-icon-circle::after{position:absolute;width:150px;height:1px;background-color:#fff;right:0;top:50%;transform:translateY(-50%);content:'';}

/* Responsive */
/* Responsive */
@media (max-width: 1400px) {
    .sustainability-page-wrap .container-inner { padding: 0 5%; }
    .core-circle { width: 350px; height: 350px; }
    .core-item { max-width: 350px; }
    .core-circle h3 { font-size: 30px; }
    .core-circle p { font-size: 22px; }
    .core-circle img { margin-bottom: 25px; }
    .slogan-content p { font-size: 30px; }
    .slogan-content h3 { font-size: 30px; }
    .forest-text p { font-size: 26px; }
    .forest-text p span { font-size: 30px; }
    .esg-item { gap: 70px; }
    .esg-content h4 { font-size: 34px; }
    .esg-content .esg-desc { font-size: 17px; }
    .esg-tags li { font-size: 17px; padding: 14px 22px; }
    .promise-text-overlay p { font-size: 28px; }
    .promise-text-overlay h4 { font-size: 28px; }
    .p-icon-circle { padding: 0 130px; }
    .p-icon-circle::before, .p-icon-circle::after { width: 130px; }
}

@media (max-width: 1280px) {
    .sustainability-page-wrap .brand-title { font-size: 36px; margin-bottom: 40px; }
    .core-circle { width: 320px; height: 320px; }
    .core-item { max-width: 320px; }
    .core-circle h3 { font-size: 28px; }
    .core-circle p { font-size: 20px; }
    .core-circle img { max-width: 80px; margin-bottom: 20px; }
    .core-item.active .core-circle { box-shadow: 0 0 0 20px rgba(195, 0, 47, 0.1); }
    .slogan-content p { font-size: 28px; }
    .slogan-content h3 { font-size: 28px; }
    .sus-forest .forest-bg-wrap { padding: 160px 0; }
    .forest-text p { font-size: 24px; }
    .forest-text p span { font-size: 28px; margin-top: 15px; }
    .esg-item { gap: 60px; padding-bottom: 50px; }
    .esg-icon { width: 100px; height: 100px; }
    .esg-content h4 { font-size: 32px; margin-bottom: 18px; }
    .esg-content .esg-desc { font-size: 16px; margin-bottom: 20px; }
    .esg-tags li { font-size: 16px; padding: 13px 20px; }
    .promise-img-box { height: 360px; }
    .promise-text-overlay p { font-size: 26px; }
    .promise-text-overlay h4 { font-size: 26px; }
    .p-icon-circle { padding: 0 110px; }
    .p-icon-circle::before, .p-icon-circle::after { width: 110px; }
}

@media (max-width: 1024px) {
    .sustainability-page-wrap .section-padding { padding: 0 0 50px; }
    .sustainability-page-wrap .brand-title { font-size: 32px; margin-bottom: 35px; text-align: center; }
    .sus-core-list::before { width: 1px; height: 60%; top: 50%; left: 50%; border-top: none; border-left: 4px dotted var(--primary-color); }
    .sus-core-list { flex-direction: column; gap: 40px; }
    .core-circle { width: 280px; height: 280px; margin: 0 auto; }
    .core-item { max-width: 100%; }
    .core-circle h3 { font-size: 26px; }
    .core-circle p { font-size: 18px; }
    .core-circle img { max-width: 70px; margin-bottom: 18px; }
    .core-item.active .core-circle { box-shadow: 0 0 0 15px rgba(195, 0, 47, 0.1); }
    .slogan-content p { font-size: 24px; }
    .slogan-content h3 { font-size: 24px; }
    .sus-forest .forest-bg-wrap { padding: 120px 5%; background-attachment: scroll; }
    .forest-text p { font-size: 20px; }
    .forest-text p span { font-size: 24px; }
    .esg-item { flex-direction: column; gap: 30px; padding-bottom: 40px; text-align: center; }
    .esg-icon { width: 90px; height: 90px; }
    .esg-content h4 { font-size: 28px; margin-bottom: 15px; }
    .esg-content .esg-desc { font-size: 16px; }
    .esg-tags { justify-content: center; }
    .esg-tags li { font-size: 16px; padding: 12px 18px; }
    .promise-img-box { height: auto }
    .promise-text-overlay .p-left, .promise-text-overlay .p-right { padding: 0; }
    .promise-text-overlay p { font-size: 22px; }
    .promise-text-overlay h4 { font-size: 22px; }
    
}

@media (max-width: 768px) {
    .sustainability-page-wrap .container{padding:100px 5%;}
    .sustainability-page-wrap .section-padding { padding: 0 0 40px; }
    .sustainability-page-wrap .brand-title { font-size: 28px; margin-bottom: 30px; }
    .core-item{width:100%;}
    .core-circle { width: 100%; height: auto;padding:40px 20px; border-radius:100px;}
    .core-circle h3 { font-size: 22px; }
    .core-circle p { font-size: 16px; }
    .core-circle img { max-width: 60px; margin-bottom: 15px; }
    .core-item.active .core-circle { box-shadow: 0 0 0 12px rgba(195, 0, 47, 0.1); }
    .slogan-content p { font-size: 20px; }
    .slogan-content h3 { font-size: 20px; }
    .sus-forest .forest-bg-wrap { padding: 80px 5%; }
    .forest-text p { font-size: 18px; }
    .forest-text p span { font-size: 20px; margin-top: 12px; }
    .esg-icon { width: 80px; height: 80px; }
    .esg-content h4 { font-size: 24px; }
    .esg-content .esg-desc { font-size: 16px; line-height: 1.7; }
    .esg-tags li { font-size: 16px; padding: 10px 16px; }
    .promise-text-overlay p { font-size: 18px; display:inline-block;}
    .promise-text-overlay h4 { font-size: 18px; display:inline-block;}
    .p-icon-circle::before, .p-icon-circle::after { height: 50px; }
    .promise-text-overlay { flex-direction: column; gap: 30px; padding: 40px 20px; }
    .p-icon-circle { margin:30px 0; }
    .p-icon-circle::before, .p-icon-circle::after { width: 1px; height: 30px; left: 50%; right: auto; top: auto; transform: translateX(-50%); }
    .p-icon-circle::before { bottom: 100%; margin-bottom:0; }
    .p-icon-circle::after { top: 100%; margin-top:0 }
}

@media (max-width: 576px) {
    .sustainability-page-wrap .section-padding { padding: 0 0 30px; }
    .sustainability-page-wrap .brand-title { font-size: 24px; margin-bottom: 25px; }
    .sus-core-list { gap: 30px; }
    .core-circle h3 { font-size: 20px; }
    .core-circle p { font-size: 16px; }
    .core-circle img { max-width: 50px; margin-bottom: 12px; }
    .core-item.active .core-circle { box-shadow: 0 0 0 10px rgba(195, 0, 47, 0.1); }
    .slogan-content p { font-size: 17px; line-height: 1.5; }
    .slogan-content h3 { font-size: 17px; }
    .sus-forest .forest-bg-wrap { padding: 60px 5%; }
    .forest-text p { font-size: 16px; }
    .forest-text p br { display: none; }
    .forest-text p span { font-size: 17px; margin-top: 10px; }
    .esg-list { gap: 30px; }
    .esg-item { gap: 20px; padding-bottom: 30px; }
    .esg-icon { width: 70px; height: 70px; }
    .esg-content h4 { font-size: 20px; margin-bottom: 12px; }
    .esg-content .esg-desc { font-size: 14px; margin-bottom: 15px; }
    .esg-tags { gap: 8px; }
    .esg-tags li { font-size: 14px; padding: 9px 14px; width:100%;}
    .promise-img-box { border-radius: 10px; }
    .promise-text-overlay { gap: 20px; padding: 30px 15px; }
    .promise-text-overlay p { font-size: 16px; }
    .promise-text-overlay h4 { font-size: 16px; }
    .p-icon-circle::before, .p-icon-circle::after { height: 40px; }
    
}

@media (max-width: 400px) {
    .sustainability-page-wrap .brand-title { font-size: 22px; }
    .core-circle { padding:20px; }
    .core-circle img{max-width:40px;}
    .core-circle h3 { font-size: 18px; }
    .core-circle p { font-size: 14px; }
    .slogan-content p { font-size: 16px; }
    .slogan-content h3 { font-size: 16px; }
    .forest-text p { font-size: 16px; }
    .forest-text p span { font-size: 16px; }
    .esg-content h4 { font-size: 18px; }
    .promise-text-overlay p { font-size: 16px; }
    .promise-text-overlay h4 { font-size: 16px; }
}