/* Styles specific to About Us page - image/text mixed layout */

/* Load local fonts from fonts/ directory */
@font-face{
  font-family: 'shouyi_text';
  src: url('../fonts/1.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'shouyi_italic';
  src: url('../fonts/3.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'shouyi_title';
  src: url('../fonts/4.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


.left_profile_card{
    flex:0 0 60%
}
.left_history_card{
    flex: 0 0 64%;
}
.left_story_card{
    flex:0 0 70%
}


.flex-box{
    display:flex;
    gap:34px;
    align-items:start;
    max-width:var(--max-width);
    margin:0 auto;
    flex-wrap:nowrap
}
.story-box{
    line-height: 30px;
    padding-left: 40px;
}
.story-bold {
  font-weight: 700;
   font-family: shouyi_text, auto;
}
.story-content{
    font-family: shouyi_text, auto;
}
.story-italic{
    font-family: shouyi_italic, auto;
}

.story_box {
    margin-bottom: 40px;
}

/* Apply requested font-family to Company Profile content */
.about-title {
    font-family: shouyi_title, auto;
    line-height: 32px;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    list-style-type: none;
    font-size: 32px;
    font-weight: 400;
    color: rgb(0, 0, 0);
    font-kerning: none;
    text-decoration-line: none;
    text-decoration-thickness: initial;
    text-decoration-style: initial;
}
.about-content{
    font-family: shouyi_text, auto;
    font-size: 17.33px;
    line-height: 30px;
    
}

.about-sub-title {
  font-size: 26px;
}

.story-board {
    padding: 40px;
}

.about-image img{
    width:100%;
    height:auto;
}
.about-content li::before {
    content: "•"; /* 使用Unicode字符创建一个黑点 */
    color: black; /* 设置黑点的颜色为黑色 */
    display: inline-block; /* 确保黑点显示为一行 */
    width: 1em; /* 设置黑点的宽度 */
    margin-left: -1em; /* 将黑点向左移动，使其正好位于文本左侧 */
    margin-right: 0px;
}

.about-content ol{list-style:none;padding:0;margin:0}
.about-content li{display:flex;gap:0px;padding:14px 0;border-bottom:1px dashed #f0f4f8;align-items:flex-start}
.about-content .year::after{content: ":";margin-left:6px}
.about-content .desc{flex:1;font-size:1rem;color:var(--text-color);line-height:1.6}

.media-block{display:flex;gap:32px;align-items:center;flex-wrap:nowrap}

.media-block .media-img img{width:auto;height:auto;max-width:none;object-fit:none;border-radius:10px;box-shadow:0 10px 24px rgba(2,6,23,0.06)}
.media-block .media-content h3{margin:0 0 12px;font-size:1.4rem;font-weight:700}
.media-block .media-content p{margin:0;color:var(--text-color);line-height:1.65;font-size:1rem}
.media-block.reverse{flex-direction:row-reverse}

.card{padding:26px;border-radius:14px;border:1px solid #eef4fb;background:#fff}
.mt-12{margin-top:16px}
.muted{color:#64748b}

/* Development block: image left, timeline right */
.development-block{display:flex;gap:28px;align-items:start;max-width:1200px;margin:0 auto;flex-wrap:nowrap}

.development-block .dev-image img{width:auto;height:auto;max-width:none;object-fit:none;border-radius:12px;box-shadow:0 12px 30px rgba(2,6,23,0.06)}
.development-block .timeline .year{min-width:100px}
.development-block .timeline .year{min-width:100px}


@media (max-width:900px){
  .about-hero{flex-direction:column;gap:18px}
  .about-image img{height:auto}
  .media-block{flex-direction:column;gap:18px}
  .media-block.reverse{flex-direction:column}
  .about-hero-content h1{font-size:1.8rem}

  /* On small screens, stack the two-column flex areas vertically and make children full-width */
  .flex-box{flex-direction:column;gap:18px}
  .flex-box > .left_max_card,
  .flex-box > .left_min_card,
  .flex-box > .left_histroy_card,
  .flex-box > .about-image,
  .flex-box > .about-content{flex:0 0 100%;width:100%}

    /* For the story board, move the second story's text block before the image on mobile */
    .story-board .flex-box.story_box:nth-of-type(2) .left_story_card{order:-1}
    .story-board .flex-box.story_box:nth-of-type(2) .about-image{order:0}

    /* Remove left padding on story-board and story-box on mobile */
    .story-board{padding-left:0 !important}
    .story-box{padding-left:0 !important}
}