/* ========================= 
   BAOJIA CUSTOMIZATION PAGE 
   SECTION 01 - HERO 
========================= */ 
 
.baojia-custom-hero { 
  width: 100%; 
  background: #f7f7f5; 
  padding: 64px 24px; 
  box-sizing: border-box; 
  font-family: Arial, Helvetica, sans-serif; 
} 
 
.baojia-custom-hero * { 
  box-sizing: border-box; 
} 
 
.baojia-custom-hero .custom-hero-inner { 
  width: 100%; 
  max-width: 1360px; 
  margin: 0 auto; 
  display: grid; 
  grid-template-columns: 0.9fr 1.1fr; 
  align-items: center; 
  gap: 62px; 
} 
 
 
/* ========================= 
   LEFT CONTENT 
========================= */ 
 
.baojia-custom-hero .custom-content { 
  width: 100%; 
  max-width: 580px; 
} 
 
.baojia-custom-hero .custom-eyebrow { 
  display: block; 
  margin-bottom: 16px; 
  color: #2475df; 
  font-size: 17px; 
  line-height: 1.2; 
  font-weight: 700; 
  letter-spacing: 1.5px; 
  text-transform: uppercase; 
} 
 
.baojia-custom-hero .custom-title { 
  margin: 0 0 20px 0 !important; 
  padding: 0 !important; 
  color: #0b2345 !important; 
  font-size: 32px !important; 
  line-height: 1.22 !important; 
  font-weight: 700 !important; 
  letter-spacing: -0.5px !important; 
} 
 
.baojia-custom-hero .custom-description { 
  max-width: 550px; 
  margin: 0; 
  color: #626f7e; 
  font-size: 16px; 
  line-height: 1.75; 
} 
 
 
/* ========================= 
   FEATURE LINE 
========================= */ 
 
.baojia-custom-hero .custom-features { 
  display: flex; 
  align-items: center; 
  flex-wrap: wrap; 
  gap: 9px; 
  margin-top: 25px; 
} 
 
.baojia-custom-hero .custom-features span { 
  color: #0b2345; 
  font-size: 13px; 
  line-height: 1.4; 
  font-weight: 600; 
} 
 
.baojia-custom-hero .custom-features i { 
  color: #a5afba; 
  font-size: 12px; 
  font-style: normal; 
} 
 
 
/* ========================= 
   BUTTONS 
========================= */ 
 
.baojia-custom-hero .custom-actions { 
  display: flex; 
  align-items: center; 
  flex-wrap: wrap; 
  gap: 12px; 
  margin-top: 30px; 
} 
 
.baojia-custom-hero .custom-btn { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  min-height: 44px; 
  padding: 0 22px; 
  border-radius: 4px; 
  font-size: 13px; 
  line-height: 1; 
  font-weight: 600; 
  text-decoration: none !important; 
  transition: all 0.2s ease; 
} 
 
.baojia-custom-hero .custom-btn-primary { 
  background: #0b2345; 
  border: 1px solid #0b2345; 
  color: #ffffff !important; 
} 
 
.baojia-custom-hero .custom-btn-primary:hover { 
  background: #17365f; 
  border-color: #17365f; 
} 
 
.baojia-custom-hero .custom-btn-secondary { 
  background: transparent; 
  border: 1px solid #c5ced8; 
  color: #0b2345 !important; 
} 
 
.baojia-custom-hero .custom-btn-secondary:hover { 
  border-color: #0b2345; 
} 
 
 
/* ========================= 
   RIGHT IMAGE 
========================= */ 
 
.baojia-custom-hero .custom-image { 
  position: relative; 
  width: 100%; 
} 
 
.baojia-custom-hero .custom-image-main { 
  width: 100%; 
  overflow: hidden; 
  border-radius: 10px; 
  background: #e9edf1; 
} 
 
.baojia-custom-hero .custom-image-main img { 
  display: block; 
  width: 100%; 
  aspect-ratio: 16 / 10; 
  object-fit: cover; 
  object-position: center; 
} 
 
 
/* SMALL IMAGE LABEL */ 
 
.baojia-custom-hero .custom-image-label { 
  position: absolute; 
  left: 20px; 
  bottom: 20px; 
  padding: 10px 14px; 
  background: rgba(11, 35, 69, 0.92); 
  border-radius: 4px; 
  color: #ffffff; 
  font-size: 11px; 
  line-height: 1.3; 
  font-weight: 600; 
  letter-spacing: 0.4px; 
} 
 
 
/* ========================= 
   TABLET 
========================= */ 
 
@media screen and (max-width: 992px) { 
 
  .baojia-custom-hero { 
    padding: 54px 22px; 
  } 
 
  .baojia-custom-hero .custom-hero-inner { 
    grid-template-columns: 1fr; 
    gap: 38px; 
  } 
 
  .baojia-custom-hero .custom-content { 
    max-width: 720px; 
  } 
 
  .baojia-custom-hero .custom-title { 
    font-size: 28px !important; 
  } 
 
  .baojia-custom-hero .custom-image-main img { 
    aspect-ratio: 16 / 9; 
  } 
} 
 
 
/* ========================= 
   MOBILE 
========================= */ 
 
@media screen and (max-width: 640px) { 
 
  .baojia-custom-hero { 
    padding: 42px 18px 48px; 
  } 
 
  .baojia-custom-hero .custom-hero-inner { 
    gap: 30px; 
  } 
 
  .baojia-custom-hero .custom-eyebrow { 
    margin-bottom: 13px; 
    font-size: 14px; 
  } 
 
  .baojia-custom-hero .custom-title { 
    margin-bottom: 17px !important; 
    font-size: 24px !important; 
    line-height: 1.3 !important; 
  } 
 
  .baojia-custom-hero .custom-description { 
    font-size: 14px; 
    line-height: 1.7; 
  } 
 
  .baojia-custom-hero .custom-features { 
    margin-top: 21px; 
  } 
 
  .baojia-custom-hero .custom-features span { 
    font-size: 12px; 
  } 
 
  .baojia-custom-hero .custom-actions { 
    margin-top: 25px; 
  } 
 
  .baojia-custom-hero .custom-btn { 
    min-height: 42px; 
    padding: 0 18px; 
    font-size: 12px; 
  } 
 
  .baojia-custom-hero .custom-image-main { 
    border-radius: 8px; 
  } 
 
  .baojia-custom-hero .custom-image-main img { 
    aspect-ratio: 4 / 3; 
  } 
 
  .baojia-custom-hero .custom-image-label { 
    left: 14px; 
    bottom: 14px; 
    padding: 8px 11px; 
    font-size: 10px; 
  } 
}