/* CEO Greeting Page Styles */
.greeting-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 100px 20px;
}

.greeting-text {
    flex: 1;
    max-width: 800px;
}

.greeting-text h2 {
    font-size: 50px;
    font-weight: 800;
    color: #1f448e;
    line-height: 1.2;
    margin-bottom: 50px;
    letter-spacing: -2px;
    font-family: 'Pretendard', sans-serif;
}

.greeting-text h2 span {
    display: block;
}

.greeting-text .desc {
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.7;
    color: #000;
    font-weight: 300;
    font-family: 'Pretendard', sans-serif;
    letter-spacing: -0.5px;
}

.greeting-text .desc p {
    margin-bottom: 30px;
    word-break: keep-all;
}

.greeting-text .desc strong {
    font-weight: 700;
}

.greeting-image {
    flex: 0 0 50%;
    max-width: 656px;
    position: relative;
    padding-left: 45px;
}

.greeting-image img {
    width: 100%;
    height: auto;
    display: block;
    /* border-radius: 20px; Optional: if needed based on visual preference */ 
}

/* Vision & Mission Page Styles (sub1_2.php) */
.vision-wrap {
    max-width: 1500px;
    margin: 0 auto;
    padding: 60px 20px 100px;
}

.vision-banner {
    width: 100%;
    height: 300px;
    border-radius: 23px;
    overflow: hidden;
    position: relative;
    margin-bottom: 80px;
    background-color: #000; /* Fallback */
}

.vision-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.vision-banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    width: 100%;
    padding: 0 20px;
}

.vision-banner-text h2 {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.6px;
    font-family: 'Pretendard', sans-serif;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.vision-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    margin-bottom: 100px;
}

.vision-section:last-child {
    margin-bottom: 0;
}

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

.vision-text {
    flex: 1;
}

.vision-text h3 {
    font-size: 50px;
    font-weight: 800;
    color: #000;
    line-height: 1.3;
    margin-bottom: 30px;
    letter-spacing: -1px;
    font-family: 'Pretendard', sans-serif;
}

.vision-text .desc {
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.5;
    color: #000;
    font-weight: 400;
    font-family: 'Pretendard', sans-serif;
    word-break: keep-all;
}

.vision-text .desc p {
    margin-bottom: 20px;
}

.vision-text .desc strong {
    font-weight: 700;
}

.vision-image {
    flex: 0 0 48%;
    max-width: 760px; /* Based on Figma aspect approx */
}

.vision-image img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 1200px) {
    .greeting-container {
        padding: 80px 20px;
    }
    .greeting-text h2 {
        font-size: 40px;
    }
    .vision-text h3 {
        font-size: 32px;
    }
}

@media (max-width: 960px) {
    .greeting-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 60px;
        padding: 60px 20px;
    }

    .greeting-image {
        flex: auto;
        width: 100%;
        max-width: 100%;
        padding-left: 0;
    }
    
    .greeting-text {
        max-width: 100%;
    }

    .greeting-text h2 {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .greeting-text .desc {
        text-align: justify;
    }
    
    /* Vision Mobile */
    .vision-wrap {
        padding: 40px 20px 80px;
    }
    
    .vision-banner {
        height: 200px;
        margin-bottom: 50px;
    }
    
    .vision-banner-text h2 {
        font-size: 20px;
    }
    
    .vision-section {
        flex-direction: column;
        
        gap: 40px;
        margin-bottom: 60px;
    }
    
    .vision-section.reverse {
        flex-direction: column;
    }
    
    .vision-image {
        max-width: 100%;
        width: 100%;
    }
    
    .vision-text h3 {
        font-size: 28px;
        text-align: center;
        margin-bottom: 20px;
    }
    
    .vision-text .desc {
        text-align: justify;
    }
}

/* History Page Styles (sub1_3.php) */
.history-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 clamp(10px, 5vw, 20px);
}

.history-item {
    display: flex;
    align-items: center;
    padding: 30px 100px;
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    background: #fff;
    gap: 80px;
}

.history-item.highlight {
    /* background: linear-gradient(
90deg, rgba(0, 212, 255, 0.18) 0%, rgba(0, 212, 255, 0.09) 100%); */
    border-color: #b6f2ff;
}

.history-year {
    flex: 0 0 120px;
    font-size: 40px;
    font-weight: 800; /* Black weight in Figma roughly corresponds to 800-900 */
    font-family: 'Pretendard', sans-serif;
    color: #000;
}

.history-content {
    flex: 1;
    display: flex;
    width: 100%;
}

.history-content .col-left{
    flex: 0 1 55%;
    display: flex;
    align-items: center;
}
.history-content .col-right {
    flex: 0 1 45%; 
}

.history-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.history-content ul li {
    font-size: 22px;
    font-weight: 700; /* Bold */
    color: #000;
    line-height: 1.6;
    margin-bottom: 5px;
    position: relative;
    padding-left: 20px;
}

.history-content ul li:before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
}

/* Right column in history item content (if applicable, though Figma screenshot shows somewhat split content for 2025) */
.history-content .col-right ul li {
    font-weight: 400; /* Regular */
}

@media (max-width: 960px) {
    .history-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 30px;
    }
    
    .history-year {
        font-size: 32px;
        flex: auto;
    }
    
    .history-content {
        flex-direction: column;
        gap: 20px;
    }
    
    .history-content ul li {
        font-size: 18px;
    }
    }


/* Organization Chart Page Styles (sub1_4.php) */
.org-chart-wrap {
    max-width: 1500px;
    margin: 0 auto;
    padding: 60px 20px 100px;
}

.org-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.org-ceo {
    width: 361px;
    height: 361px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    padding-bottom: 0px; 
}

.org-ceo-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.org-ceo-logo {
    margin: 0 auto;
    position: relative;
}

.org-ceo-logo::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%)translateY(-50%);
    width: 23px;
    height: 23px;
    background: url('../img/sub/sub1_4_line_01.png') no-repeat center;
    background-size: contain;
}

.org-ceo-logo::before {
    content: '';
    position: absolute;
    top: calc(100% + 23px);
    left: 50%;
    transform: translateX(-50%)translateY(-50%);
    width: 1px;
    height: 57px;
    background: #d1d5db;
}

.org-ceo-logo img {
    width: 100%;
    height: auto;
}

.org-ceo-name {
    background: #e8ebf1;
    color: #1f448e;
    font-size: 26px;
    font-weight: 800;
    padding: 9px 21px;
    border-radius: 10px;
    display: inline-block;
    letter-spacing: -1px;
}

/* Org Tree Layout */
.org-tree-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-top: 40px; /* Space for lines from CEO */
}

/* Connecting line from CEO to Middle/Depts */
.org-tree-container::before {
    content: '';
    position: absolute;
    top: -40px; /* Connect to CEO bottom */
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 120px; /* Extended to reach down to Depts Row */
    background: #d1d5db; /* Gray Line */
    z-index: 0;
}

/* Level 2: Middle Branch (Quality Dept) */
.org-middle-branch {
    position: absolute;
    top: -20px; /* Position on the vertical line (between CEO and Depts) */
    right: 50%; /* Start from center */
    margin-right: -40%; /* Extend to right */
    width: 40%;
    display: flex;
    justify-content: flex-start; /* Align left (close to line) */
    align-items: center;
    padding-left: 0;
}

.org-middle-branch::before {
    /* Horizontal Line to Quality */
    content: '';
    position: absolute;
    top: 50%;
    left: 0; /* Start from center vertical line */
    width: 80px; /* Fixed length to the box */
    height: 1px;
    background: #d1d5db;
    transform: translateY(-50%);
}

.org-node.type-quality {
    background: linear-gradient(92.91deg, #38B2D1 2.93%, #1F448E 119.78%);
    padding: 44px 0; /* Figma: py-[44px] */
    border-radius: 10px;
    color: #fff;
    font-size: 30px; /* Figma: 30px */
    font-weight: 700;
    letter-spacing: -1.2px; /* Figma: -1.2px */
    position: relative;
    z-index: 2;
    min-width: 250px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin-left: 80px; /* Space for the line */
}

/* Level 3: Departments Row */
.org-departments-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
    position: relative;
    margin-top: 80px; /* Space for Quality Branch */
    padding-top: 40px; /* Space for horizontal bus line */
}

/* Horizontal Bus Line */
.org-departments-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12.5%; /* Start middle of first item approx */
    right: 12.5%; /* End middle of last item approx */
    height: 1px;
    background: #d1d5db;
}

/* Connector from Bus Line to Center Line */
.org-departments-row::after {
    content: '';
    position: absolute;
    top: -40px; /* Reach up to vertical line end */
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 40px;
    background: #d1d5db;
}

/* Group (Department Column) */
.org-group {
    flex: 1;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    padding: 20px;
    background: #eef1f7;
    border-radius: 16px;
    align-items: center;
}

/* Connector from Bus Line to Group */
.org-group::before {
    content: '';
    position: absolute;
    top: -40px; /* Go up to bus line */
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 40px;
    background: #d1d5db;
}

/* Dept Node */
.org-node.type-dept {
    background: #1f448e; /* Figma: #1f448e */
    color: #fff;
    width: 100%;
    padding: 30px 10px;
    border-radius: 10px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
}

/* Specific styling for 2nd (Sales) and 4th (Tech) Departments */
.org-group:nth-child(2) .type-dept,
.org-group:nth-child(4) .type-dept {
    background: rgba(31, 68, 142, 0.80);
    border-radius: 10px;
}

/* Sub List (Teams) */
.org-sub-list {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: center;
}

/* Team Node */
.org-node.type-team {
    background: #2f394c;
    color: #fff;
    flex: 1;
    padding: 25px 10px;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

.org-node.type-team.full-width {
    width: 100%;
    flex: none;
}

@media (max-width: 1200px) {
    .org-departments-row {
        flex-wrap: wrap;
        margin-top: 40px; /* Reduce spacing */
    }
    
    .org-departments-row::before {
        /* Hide Horizontal Bus Line on wrap */
        display: none;
    }
    .org-departments-row::after {
        display: none;
    }

    .org-group {
        flex: 0 0 45%; /* 2 cols */
        max-width: 45%;
        margin-bottom: 20px;
    }

    .org-group::before {
        display: none; /* Hide vertical connectors above groups */
    }
    
    .org-middle-branch {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        margin: 20px auto;
        width: 100%;
        justify-content: center;
        padding-left: 0;
        margin-right: 0; /* Reset margins */
    }
    
    .org-node.type-quality {
        margin-left: 0;
        min-width: 200px;
    }
    
    .org-middle-branch::before {
        /* Hide side connector */
        display: none;
    }
    
    .org-tree-container::before {
        /* Vertical line from CEO */
        height: 40px; /* Shorten to just point down to next element */
    }
}

@media (max-width: 768px) {
    .org-tree-container {
        padding-top: 20px;
    }

    .org-ceo {
        width: 150px;
        height: 150px;
        /* Adjust CEO circle size if needed, layout seems image based */
    }
    
    .org-group {
        flex: 0 0 100%; /* 1 col */
        max-width: 100%;
    }
    
    .org-node.type-dept {
        font-size: 20px;
        padding: 20px 10px;
    }
    
    .org-node.type-team {
        font-size: 16px;
        padding: 15px 10px;
        min-height: 60px;
    }

    .org-node.type-quality {
        width: 100%;
        max-width: 360px; /* Match standard box width */
    }
}

/* Location Page Styles (sub1_6.php) */
.location-wrap {
    max-width: 1500px;
    margin: 0 auto;
    padding: 60px 20px 100px;
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.location-item {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.location-title {
    color: #000;
    font-size: 30px;
    font-weight: 700;
    position: relative;
    padding-left: 20px;
}

.location-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #1f448e;
    border-radius: 50%;
}

.location-info {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 16px;
    padding: 20px 40px;
    gap: 40px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.info-group {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 1;
}

.info-icon {
    width: 80px;
    height: 80px;
    background-color: #f0f4fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1f448e;
}

.info-icon.icon-address {
    background: #f0f4fa url('../img/sub/sub1_6_icon_01.png') no-repeat center;
}

.info-icon.icon-phone {
    background: #f0f4fa url('../img/sub/sub1_6_icon_02.png') no-repeat center;
}

.info-label {
    font-weight: 700;
    color: #000;
    font-size: 18px;
}

.info-value {
    color: #333;
    font-size: 18px;
}

.info-divider {
    width: 1px;
    height: 20px;
    background: #e1e1e1;
}

.location-visual {
    display: grid;
    grid-template-columns: 1fr auto;
}

.visual-map, .visual-photo {
    height: 617px;
    overflow: hidden;
    background: #f5f5f5;
}

.visual-map .img-box, .visual-photo .img-box {
    width: 100%;
    height: 100%;
}

.visual-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Daum Map Responsive */
.root_daum_roughmap {
    width: 100% !important;
    height: 100% !important;
}

.root_daum_roughmap .wrap_map {
    width: 100% !important;
    height: 100% !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .location-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    .info-divider {
        display: none;
    }

    .location-visual {
        grid-template-columns: 1fr;
    }
}

/* Certificate Page Styles (sub1_5.php) */
.cert-wrap {
    max-width: 1500px;
    margin: 0 auto;
    padding: 60px 20px 100px;
}

.cert-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.cert-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cert-img-box {
    width: 100%;
    background: #fff;
    border-radius: 11px; /* Figma: 11.296px */
    box-shadow: 0 0 11px rgba(0, 70, 82, 0.2); /* Figma exact shadow */
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #eee;
    transition: transform 0.3s ease;
}

.cert-img-box:hover {
    transform: translateY(-5px);
}

.cert-img-box img {
    width: 100%;
    height: auto;
    display: block;
}

.cert-title-box {
    width: 100%;
    background: var(--Linear, linear-gradient(96deg, var(--Color, #38B2D1) -54.57%, #1F448E 96.32%));
    padding: 15px 10px;
    text-align: center;
    border-radius: 7.047px; /* Figma: 7.047px */
    min-height: 68px; /* Figma Height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.cert-title-box span {
    color: #fff;
    font-size: 20px; /* Figma: 20px */
    font-weight: 500; /* Medium */
    display: block;
    word-break: keep-all;
    letter-spacing: -0.8px;
}

/* Responsive */
@media (max-width: 1200px) {
    .cert-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

@media (max-width: 900px) {
    .cert-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .cert-list {
        grid-template-columns: 1fr;
    }
}

/* Core Values Page Styles (sub1_7.php) */
.core-values-wrap {
    max-width: 1500px;
    margin: 0 auto;
    padding: clamp(50px, 5vw, 100px) 20px clamp(50px, 5vw, 100px);
}

.core-values-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px;
    width: 100%;
}

.core-values-row {
    display: none; /* Deprecated/Removed from HTML */
}

.value-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 56px;
    flex: 0 1 calc(100% / 3 - 60px); /* Max width for item base */
}

.value-circle {
    width: 360px;
    height: 360px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    /* aspect-ratio: 1/1; */ /* Fallback width/height is better for older browsers if needed, but modern ok */
}

.value-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.value-item:hover .value-circle img {
    transform: scale(1.1);
}

.value-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
}

.value-overlay span {
    color: #fff;
    font-size: 30px; 
    font-weight: 800; /* ExtraBold */
    font-family: 'Montserrat', 'Pretendard', sans-serif;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* Figma shadow: 0px 4px 4px rgba(0,0,0,0.5) */
}

.value-text {
    display: flex;
    flex-direction: column;
    gap: 34px; /* Figma gap */
    align-items: center;
    width: 100%;
}

.value-title {
    color: #172d59; /* Figma: #172d59 */
    font-size: 50px; /* Figma: 50px */
    font-weight: 900; /* Figma: Black */
    letter-spacing: -2px; /* Figma: -2px */
    margin: 0;
    line-height: 36px;
}

.value-desc {
    color: #000; /* Figma: Black */
    font-size: 22px; /* Figma: 22px */
    line-height: 34px; /* Figma: 34px */
    word-break: keep-all;
    font-weight: 400; /* Figma: Light */
    letter-spacing: -0.88px; /* Figma: -0.88px */
}

/* Responsive */
@media (max-width: 1200px) {
    .value-circle {
        width: 280px;
        height: 280px;
    }
    .value-title {
        font-size: 40px; /* Scaled down slightly */
    }
    .value-desc {
        font-size: 20px;
    }
}

@media (max-width: 900px) {
    .core-values-row {
        gap: 40px;
    }
    
    .value-item {
        flex: 0 1 45%;
    }
    
    .value-circle {
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
    }
}

@media (max-width: 600px) {
    .core-values-row {
        flex-direction: column;
        align-items: center;
        gap: 60px;
    }
    
    .value-item {
        flex: 0 0 auto;
        width: 100%;
        max-width: 300px;
    }
}

/* History Growth Graph Styles (sub1_3_1.php) */
.history-growth-wrap {
    max-width: 100%;
    margin: 0 auto;
    padding: 0; /* No padding at all for full-width image */
    /* Specific Gradient: Left #291e51, Right #164675 */
    background: linear-gradient(90deg, #291e51 20%, #164675 76%);
    color: #fff;
    overflow: hidden;
}

.history-header {
    text-align: left;
    max-width: 1500px;
    margin: 0 auto 60px;
    padding: 0 20px;
}

.history-header h2 {
    font-size: 30px;
    line-height: 1.4;
    font-weight: 700;
}

/* Visibility Utilities */
.history-mobile-only { display: none; }
.history-pc-only { display: block; }

/* Limit max width */
.history-graph-container {
    width: 100%;
    max-width: 1920px; /* Restored max-width */
    margin: 0 auto;
    height: auto; /* Auto height for image */
    position: relative;
    padding: 0; /* Remove side padding if image is full width */
}

/* Vignette / Edge Blending Effect */
.history-graph-container.history-pc-only::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Subtle inner shadow to blend image edges into the dark blue background - Left/Right only */
    /* Left side blends to #291e51, Right side blends to #164675 */
    box-shadow: inset 80px 0 60px -20px #291e51, inset -80px 0 60px -20px #164675;
    pointer-events: none;
    z-index: 10;
}

.pc-history-img img {
    width: 100%;
    height: auto;
    display: block;
}

.graph-line-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Old CSS simulation removed */
.history-graph-container::before {
    display: none;
}

.grow-item {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20px; /* Anchor point size */
    height: 20px;
}

.grow-circle {
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #1f448e;
    font-size: 24px;
    font-weight: 800;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    position: absolute;
    transform: translate(-50%, -50%); /* Center on anchor */
    z-index: 10; /* Ensure Circle is above content lines/boxes */
    border: 5px solid rgba(255,255,255,0.3); /* Outer glow effect */
    background-clip: padding-box;
}

.grow-circle .sub-year {
    font-size: 16px;
    font-weight: 600;
    color: #38B2D1;
}

.grow-circle.big {
    width: 130px;
    height: 130px;
    font-size: 30px;
    border-width: 8px;
}

.grow-content {
    position: absolute;
    width: 320px; /* Slightly wider */
    z-index: 5; /* Lower than circle */
}

.grow-content.pos-top {
    bottom: 85px; /* Increased from 70px to clear circle */
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 30px; /* Space for line */
    text-align: center;
}

.grow-content.pos-bottom {
    top: 85px; /* Increased from 70px */
    left: 50%;
    transform: translateX(-50%);
    padding-top: 30px;
    text-align: center;
}

.grow-content.pos-left-big {
    right: 90px; /* Increased clearance */
    top: 50%; /* Center vertically relative to anchor */
    transform: translateY(-50%);
    text-align: right;
    width: 400px;
}

/* Connector Lines */
.grow-content.pos-top::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 30px; /* Match padding */
    background: rgba(255,255,255,0.5);
}

.grow-content.pos-bottom::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 30px; /* Match padding */
    background: rgba(255,255,255,0.5);
}

.content-box {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 15px;
    border-radius: 8px;
    backdrop-filter: blur(5px);
    color: #fff;
    text-align: left; /* Text align inside box */
}

.content-box h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #fff;
}

.content-box ul li {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255,255,255,0.9);
    list-style: none; /* Can add dots if needed */
    position: relative;
    padding-left: 10px;
}

.content-box ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #38B2D1;
}

/* Responsive Styles */
@media (max-width: 1200px) {
    /* Toggle Visibility */
    .history-pc-only { display: none !important; }
    .history-mobile-only { display: block !important; }
    
    .history-growth-wrap {
        background: #172d59; /* Fallback or keep image if desired, but user asked for img_01_m on mobile */
        /* For mobile, we might want to reset the wrapper background if the image implies it covers everything, 
           or keep the dark blue. Assuming Dark Blue to match the 'existing history' style. */
        padding: 0; /* Removed padding for full width mobile */
    }
    
    .mobile-history-img {
        width: 100%;
        max-width: 100%; /* Changed from 600px to 100% */
        margin: 0 auto 40px;
        padding: 0; /* Removed side padding */
    }
    
    .mobile-history-img img {
        width: 100%;
        height: auto;
        display: block;
    }
    
    /* Ensure history-list (original) is styled correctly here if needed */
    /* It inherits from previous styles */
    .history-graph-container {
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 40px 20px;
        align-items: flex-start;
    }
    
    .history-graph-container::before {
        /* Vertical Line */
        left: 40px;
        top: 0;
        bottom: 0;
        width: 2px;
        height: 100%;
        background: rgba(255,255,255,0.3);
        transform: none;
    }
    
    .grow-item {
        position: relative;
        left: auto !important;
        bottom: auto !important;
        width: 100%;
        height: auto;
        margin-bottom: 60px;
        padding-left: 100px; /* Space for circle */
    }
    
    .grow-circle {
        position: absolute;
        left: 41px; /* Center on vertical line */
        top: 0;
        transform: translate(-50%, 0);
        width: 80px;
        height: 80px;
        font-size: 20px;
    }
    
    .grow-circle.big {
        width: 90px;
        height: 90px;
        font-size: 24px;
    }
    
    .grow-content {
        position: relative;
        width: 100%;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        padding: 0;
        text-align: left;
    }
    
    .grow-content::after {
        display: none;
    }
    
    .grow-content.pos-left-big {
        width: 100%;
        text-align: left;
    }
}