.hero, .hero .container { position: relative;}

.hero_img, .hero_img img { z-index: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center;}
.hero .container { z-index: 1; position: relative; display: flex; flex-direction: column;}
.hero .container, .hero_head * { transition: .25s ease-in-out;}

.hero_head { flex-grow: 1; color: var(--purple-medium);}
.hero_head small sup { top: -.195em; margin-left: -.15em;}
.hero_title.line-1 { font-size: var(--h1_hero-title); line-height: 1.1; font-weight: 600;}
.hero_title.line-2 { margin-top: -.1em; font-size: var(--h1_hero-title_light-type); line-height: 1.2; font-weight: 300;}
.hero_title.line-3, h3.hero_title.line-3 { margin-top: 3rem; color: currentColor;}


.hero_banner { padding: 1.9rem 3rem 1.9rem 2.6rem; border-radius: var(--brdrd); background: #fff; box-shadow: 0px 0px 8px 2px rgba(2, 124, 211, 0.4);}
.hero_banner .col-1 { font: 500 var(--call-out-copy)/1.2 var(--font-family-accent); color: var(--purple-medium);}
.hero_banner img { margin-left: 0; margin-right: 0;}


@media (max-width:767.98px) {
    .hero { margin-bottom: 16rem;}
    .hero .container { height: calc(42rem + 62vw);}
    .hero .container:before { z-index: 1; position: absolute; left: -116px; top: -121px; width: 460px; height: 460px; content: ""; background: url("/wp-content/themes/celcuity/assets-2025/img/swirl-hero-m.png") center / contain no-repeat;}

    .hero_img, .hero_img img { object-position: center bottom; object-fit: contain;}
    .hero_mg img { width: 100vw; height: 100%;}
    .hero_head { margin-top: 5rem;}

    .hero_banner { margin-bottom: -17rem;}
}
@media (min-width:768px) {
    .hero .container:before { z-index: 1; position: absolute; /*left: calc(1220px / 2 - 50vw - 140px);*/ left: -490px; top: -300px; width: 1307px; height: 1307px; content: ""; background: url("/wp-content/themes/celcuity/assets-2025/img/swirl-hero.png") center / contain no-repeat;}

    .hero_img, .hero_img img, .page-header_img, .page-header_img img { object-position: center;}
    .hero .container { padding-bottom: 5.2rem; height: 714px;}
    .hero .container * { z-index: 2; position: relative;}

    .hero_head { display: flex; flex-direction: column; justify-content: center;}

    .hero_banner { align-items: center;}
    .hero_banner .col-1 { flex-grow: 1;}
    .hero_banner .col-2 { flex: 0 0 203px;}
    .hero_banner .col-2 img { margin-top: -10px;}
    .hero_banner .col-3 { margin-left: 1.6rem;}
    .hero_banner .btn { white-space: nowrap;}

    .hero_title.line-3 { max-width: 656px;}
}
@media (min-width:1400px) {
    .hero_title.line-3 { max-width: 710px;}
}