/* Page-specific styles for the Cosmetics & Biotech industry page.
   Shared industry design system styles are provided by industry-common.css.
*/
.hero-title {
  white-space: nowrap;
  overflow-wrap: normal;
  font-family: 'Raleway', sans-serif;
  line-height: 1;
  margin-bottom: 0px;
}

.hero-sub{
  margin-bottom: 20px;
}

.s2-left{
  margin-top: 60px;
}

.hero-cta{
  margin-bottom: 19px;
}

.use-case-title,
.section-title,
.hero-title{
    font-family: 'Outfit', sans-serif;
}
.hero-title-break {
  display: block;
}
.hero-title-mobile {
  display: none;
}
.s3-intro{
    font-size: 18px;
}

/* Layout for section 2: keep feature-list and image side-by-side */
.s2-grid{
  display:flex;
  gap:28px;
  align-items:flex-start;
}
.s2-left{
  flex:1 1 360px;
}
.s2-img-wrap{
  flex:1 1 360px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.s2-img-wrap > div{
  width:100%;
  max-width:560px;
}
.feature-list{
  margin-top:0.75rem;
  padding-left:1.15rem;
}
.section-body{
  margin-bottom:1rem;
  line-height:1.5;
}

/* Page-specific section 2 layout and FAQ styling fixes */
.section-body {
  margin-bottom: 1.5rem;
}
.s2-left .section-body {
  margin-bottom: 1.5rem;
}
.feature-list {
  margin-top: 1rem;
}
.s3-intro {
  white-space: nowrap;
  overflow-wrap: normal;
}

@media (max-width: 768px) {
  #section2 {
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: -8px !important;
  }
  #section2 .section-body {
    margin-bottom: 0 !important;
  }
  #section2 .s2-left {
    margin: 0 !important;
    padding: 0 16px !important;
    margin-bottom: 0 !important;
  }
  #section2 .feature-list {
    margin: 0 !important;
    padding-left: 1.15rem !important;
  }
  #section2 .s2-grid {
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column;
  }
  #section2 .s2-img-wrap {
    display: block !important;
    height: auto !important;
    margin-top: -70px !important;
    0 !important;
    padding: 0 !important;
    order: 2;
  }
  #section2 .s2-img-wrap picture {
    display: block;
    margin-top: -70px !important;
    line-height: 0;
    margin: 0 !important;
    padding: 0 !important;
  }
  .s2-main-img {
    height: 200px !important;
    object-fit: cover !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #section3 {
    padding-top: 12px !important;
    margin-top: 0 !important;
  }
  #section3 h2 {
    margin-top: -130px !important;
    margin-bottom: 0.75rem !important;
  }

  .hero-title {
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: 0;
    margin-bottom: 12px;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    width: 100%;
    max-width: 100%;
  }
  .hero-title-break {
    display: inline;
  }
  .hero-title-desktop {
    display: none;
  }
  .hero-title-mobile {
    display: block;
    margin-bottom: 12px;
  }
  .hero-sub {
    font-size: 14px;
    margin-bottom: 0;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .s3-intro {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .s2-grid {
    flex-direction: column;
  }
  .s2-img-wrap {
    order: 2;
  }
  .s2-left {
    order: 1;
  }
}