/* ==========================================================================
OCC section styles — all homepage patterns.
Section padding, max-widths and tokens consistent across.
========================================================================== */
/* Reset Gutenberg constrained-layout auto margins */
:root :where(.is-layout-constrained) > * {
margin-top: 0;
}
/* Shared section defaults — applied to every .occ-* section */
section.occ-certs,
section.occ-why,
section.occ-find,
section.occ-procs,
section.occ-expect,
section.occ-stories,
section.occ-docs,
section.occ-diabetes,
section.occ-safe,
section.occ-features,
section.occ-video-stats,
section.occ-diff,
section.occ-packages,
section.occ-vid-test,
section.occ-press,
section.occ-reviews,
section.occ-news,
section.occ-facility,
section.occ-faq,
section.occ-cta,section.occ-doctor-specialist {
width: 100%;
max-width: none !important;
padding: 48px 16px;
}
.occ-bariatric-content section.occ-expect{padding: 0;}
.occ-bariatric-content section.occ-stories{padding-left: 0; padding-right: 0;}
@media (min-width: 768px) {
section.occ-certs,
section.occ-why,
section.occ-find,
section.occ-procs,
section.occ-expect,
section.occ-stories,
section.occ-docs,
section.occ-diabetes,
section.occ-safe,
section.occ-features,
section.occ-video-stats,
section.occ-diff,
section.occ-packages,
section.occ-vid-test,
section.occ-press,
section.occ-reviews,
section.occ-news,
section.occ-facility,
section.occ-faq,
section.occ-cta,section.occ-doctor-specialist { padding: 64px 40px; }
.occ-bariatric-content section.occ-expect{padding: 0;}
.occ-bariatric-content section.occ-stories{padding-left: 0; padding-right: 0;}
}
@media (min-width: 1024px) {
section.occ-certs,
section.occ-why,
section.occ-find,
section.occ-procs,
section.occ-expect,
section.occ-stories,
section.occ-docs,
section.occ-diabetes,
section.occ-safe,
section.occ-features,
section.occ-video-stats,
section.occ-diff,
section.occ-packages,
section.occ-vid-test,
section.occ-press,
section.occ-reviews,
section.occ-news,
section.occ-facility,
section.occ-faq,
section.occ-cta,section.occ-doctor-specialist { padding: 80px 32px; }
.occ-bariatric-content section.occ-expect{padding: 0;}
.occ-bariatric-content section.occ-stories{padding-left: 0; padding-right: 0;}
}
section.occ-press.occ-press--about { padding-top: 0 !important; padding-bottom: 0 !important; }
/* Find Your Procedure — no top padding on all viewports */
section.occ-find,section.occ-doctor-specialist { padding-top: 0 !important; }
/* OCC Features — no top or bottom padding on all viewports */
section.occ-features { padding-top: 0 !important; padding-bottom: 0 !important; }
/* Control Your Diabetes Through Surgery — no top or bottom padding on all viewports */
section.occ-diabetes { padding-top: 0 !important; padding-bottom: 0 !important; }
/* OCC Patient Testimonials — no top or bottom padding on all viewports */
section.occ-vid-test { padding-top: 0 !important; padding-bottom: 0 !important; }
/* Our Facility, Located in Tijuana, Mexico — no top or bottom padding on all viewports */
section.occ-facility { padding-top: 0 !important; padding-bottom: 0 !important; }
/* FAQ — no top or bottom padding on all viewports */
section.occ-faq { padding-top: 0 !important; padding-bottom: 0 !important; }
/* Inner wrapper helper — content width is 1376px to align with hero card edges */
/* Default section content width — 1200px for all sections */
section.occ-certs > *,
section.occ-why > *,
section.occ-find > *,
section.occ-procs > *,
section.occ-expect > *,
section.occ-stories > *,
section.occ-docs > *,
section.occ-diabetes > *,
section.occ-safe > *,
section.occ-features > *,
section.occ-diff > *,
section.occ-packages > *,
section.occ-vid-test > *,
section.occ-press > *,
section.occ-reviews > *,
section.occ-news > *,
section.occ-facility > *,
section.occ-faq > *,
section.occ-cta > * {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* Video Stats stays at 1376px (full-width-ish video panel) */
section.occ-video-stats > * {
margin-left: auto;
margin-right: auto;
}
/* Common heading style */
.occ-why__heading,
.occ-find__heading,
.occ-procs__heading,
.occ-expect__heading,
.occ-expect__step-heading,
.occ-stories__heading,
.occ-docs__heading,
.occ-diabetes__heading,
.occ-safe__heading,
.occ-diff__heading,
.occ-reviews__heading,
.occ-facility__heading {
color: #0052a3!important;
font-weight: 800;
font-size: clamp(28px, 3.5vw, 36px);
line-height: 1.3;
margin: 0 0 16px;
}
.occ-cta__heading {
font-weight: 800;
font-size: clamp(28px, 3.5vw, 36px);
line-height: 1.3;
margin: 0 0 16px;
}
/* ==========================================================================
Certifications strip — heading+CTA left, 4 badges right (matches Figma)
========================================================================== */
section.occ-certs {
border-bottom: 1px solid #d2d2d2;
padding-top: 24px !important;
padding-bottom: 24px !important;
}
.postid-406 .occ-preop-text-img.wp-block-group,.postid-406 .occ-preop-dr-video.wp-block-group,.postid-406 .occ-preop-video,.occ-bariatric-igs-cards.pt-0 {
padding-top: 0 !important;
}
.postid-406 .occ-preop-img-text.wp-block-group.pt-80{
padding-top:80px !important;
}
.postid-406 .occ-preop-cards.wp-block-group.pb-0{
padding-bottom:0 !important;
}
.display-grid.occ-bariatric-why-choose__cards{
display:grid !important;
}
.occ-schedule-cta__arrow:hover{
--occ-arrow-bg: #0066CC;
--occ-arrow-fg: #ffffff;
}
.bariatric_surgery-template-default .occ-faq-videos{
background-color:transparent;
}
p.occ-bariatric-intro__text:not(:last-child) {
margin-bottom: 20px;
}
.grid-four-block .occ-bariatric-vs__grid.wp-block-columns{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max(min(300px, 100%), (100% - (24px * (2 - 1))) / 2), 1fr));
}
section.occ-diabetes.ptb-80 {
padding-top: 80px !important;
padding-bottom: 80px !important;
}
.occ-cost-section.pt-0 {
padding-top: 0;
}
.occ-wcu-medtech__img-wrap.h-auto,
.occ-about-more__img-wrap.h-auto{
height:auto;
}
@media(max-width:1199px){
.postid-406 .occ-preop-img-text.wp-block-group.pt-80{
padding-top:64px !important;
}
section.occ-diabetes.ptb-80 {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
.surgical_option_section{
padding-top: 60px !important;
}
}
@media(max-width:991px){
.postid-406 .occ-preop-why-us.wp-block-group{
padding-bottom:48px !important;
padding-top: 0 !important;
}
.postid-406 .occ-preop-text-img > .wp-block-columns{
flex-direction:column-reverse;
}
.postid-406 .occ-preop-img-text.wp-block-group{
padding-bottom:48px !important;
}
.postid-406 .occ-preop-why-us.wp-block-group.pb {
padding-bottom: 0 !important;
padding-top: 48px !important;
}
.postid-406 .occ-preop-text-img.wp-block-group.pb-0{
padding-bottom: 0 !important;
}
.postid-353 .occ-occ-diff,
.postid-353 .occ-faq-section.wp-block-group,
.postid-349 .occ-faq-section.wp-block-group,
.occ-bariatric-conditions.pb-80,
.postid-352 .occ-faq-section.wp-block-group,
.occ-bariatric-calorie.pt-80
{
padding-top:64px !important;
}
.occ-occ-diff.pb-80 {
padding-bottom: 44px !important;
}
section.wp-block-group.occ-wcu-medtech.pb-80
{
padding-bottom:64px !important;
}
}
@media(max-width:767px){
.postid-406 .occ-preop-img-text.wp-block-group.pt-80{
padding-top:48px !important;
}
.postid-353 .occ-occ-diff,
.postid-353 .occ-faq-section.wp-block-group,
.postid-349 .occ-faq-section.wp-block-group{
padding-top:48px !important;
}
section.occ-diabetes.ptb-80 {
padding-top: 48px !important;
padding-bottom: 48px !important;
}
.surgical_option_section,.postid-352 .occ-faq-section.wp-block-group{
padding-top: 48px !important;
}
.occ-occ-diff.pb-80 {
padding-bottom: 48px !important;
}
section.wp-block-group.occ-wcu-medtech.pb-80{
padding-bottom:48px !important;
}
.postid-350 .occ-bariatric-journey,
.occ-bariatric-conditions.pb-80,
.occ-bariatric-calorie.pt-80{
padding-top:48px !important;
}
.postid-350 .wp-block-group.occ-certs{
padding-top:0 !important;
}
.bariatric_surgery-template-default.postid-4157 .occ-occ-diff {
padding-top: 0px !important;
}
}
@media (min-width: 768px) {
section.occ-certs { padding-top: 24px !important; padding-bottom: 24px !important; }
}
@media (min-width: 1024px) {
section.occ-certs { padding-top: 24px !important; padding-bottom: 24px !important; }
}
section.wp-block-group.occ-referral-about-section.patient_info_p0.has-global-padding{
padding-bottom:0 !important;
}
/* Desktop: grid with title+button stacked on left, badges on right */
.occ-certs__inner {
display: grid;
grid-template-columns: minmax(0, 384px) 1fr;
grid-template-areas:
"title list"
"btn list";
column-gap: 32px;
row-gap: 16px;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.occ-certs__title { grid-area: title; align-self: end; }
.occ-certs__btn { grid-area: btn; align-self: start; justify-self: start; }
.occ-certs__list,
.occ-certs__slider-wrap { grid-area: list; min-width: 0; }
.occ-certs__slider-wrap { width: 100%; }
.occ-certs__swiper { width: 100%; }
.occ-certs__swiper .swiper-slide { height: auto; }
.occ-certs__title {
font-size: 24px;
font-weight: 700;
line-height: 31.2px;
color: var(--wp--preset--color--text-dark);
margin: 0;
white-space: nowrap;
}
.occ-certs__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
background: var(--wp--preset--color--background);
color: var(--wp--preset--color--primary);
border: 1px solid var(--wp--preset--color--primary);
border-radius: 8px;
font-size: 14px;
font-weight: 700;
line-height: 22.4px;
text-decoration: none;
transition: all 0.2s ease;
}
.occ-certs__btn:hover {
background: var(--wp--preset--color--primary);
color: #ffffff;
text-decoration: none;
}
.occ-certs__list {
display: flex;
gap: 32px;
align-items: flex-start;
flex-wrap: nowrap;
justify-content: flex-end;
flex: 1 1 auto;
min-width: 0;
}
.occ-certs__item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px;
flex: 0 0 auto;
min-width: 0;
text-align: center;
}
.occ-certs__badge {
width: 90px;
height: 90px;
object-fit: contain;
display: block;
margin: 0 auto !important;
}
.occ-certs__caption {
font-size: 14px;
font-weight: 400;
line-height: 22.4px;
color: var(--wp--preset--color--text-secondary);
width: 140px;
max-width: 100%;
text-align: center;
margin: 0 auto !important;
}
.occ-certs__caption--wide { width: 200px; }
@media (max-width: 1199px) {
.occ-certs__list { gap: 20px; }
.occ-certs__caption { width: 120px; }
.occ-certs__caption--wide { width: 180px; }
}
@media (max-width: 991px) {
.occ-certs__inner {
grid-template-columns: 1fr;
grid-template-areas:
"title"
"list"
"btn";
row-gap: 20px;
}
.wp-block-group.occ-bariatric-what-is.mb {
margin-bottom: 64px !important;
}
.occ-certs__title { text-align: center; align-self: center; white-space: normal; }
.occ-certs__btn { justify-self: center; }
.occ-certs__list {
justify-content: center !important;
flex-wrap: wrap !important;
}
.occ-certs__caption,
.occ-certs__caption--wide { width: auto; max-width: 160px; }
}
@media (max-width: 767px) {
/* Mobile: title 20px, badges Swiper slider, button below */
.occ-certs__title {
font-size: 20px !important;
line-height: 26px !important;
font-weight: 700 !important;
}
.occ-certs__caption,
.occ-certs__caption--wide {
width: auto !important;
max-width: 150px !important;
font-size: 13px !important;
line-height: 20.8px !important;
}
.bariatric_surgery-template-default .occ-occ-diff{
padding-top:48px !important;
}
.wp-block-group.occ-bariatric-what-is.mb {
margin-bottom: 48px !important;
}
}
/* ==========================================================================
Why Patients Choose OCC — image collage left, content right (matches Figma)
========================================================================== */
.occ-why__inner {
display: flex;
align-items: center;
justify-content: center;
gap: 62px;
max-width: 1200px;
margin: 0 auto;
}
/* LEFT: 550 × 496 image collage — top image + bottom 2-column (image + stat) */
.occ-why__images {
position: relative;
flex: 0 0 550px;
width: 550px;
height: 496px;
}
.page-id-4029 .occ-why__images{
height:auto;
}
.page-id-4029 .occ-why__img--top{
height:auto;
position:relative;
}
.page-id-4029 .occ-preop-img-text.wp-block-group{
padding-top:80px !important;
}
.after-before-imge img{
width:100%;
}
.after-before-imge{
padding:0px 32px 80px;
}
.page-id-4029 section.wp-block-group.occ-doctor-text{
padding-top:0;
}
section.wp-block-group.occ-certs.d-block {
padding-bottom: 80px !important;
border-bottom:0;
}
.d-block .occ-certs__badge{
width:auto;
height:100%;
object-fit:cover;
}
@media(max-width:991px){
.page-id-4029 .occ-preop-img-text.wp-block-group{
padding-top:64px !important;
}
.after-before-imge{
padding:0px 16px 64px;
}
section.wp-block-group.occ-certs.d-block {
padding-bottom: 64px !important;
}
}
@media(max-width:767px){
.page-id-4029 .occ-preop-img-text.wp-block-group{
padding-top:48px !important;
}
.after-before-imge{
padding:0px 16px 48px;
}
section.wp-block-group.occ-certs.d-block {
padding-bottom: 0px !important;
}
}
.occ-why__img {
display: block;
border-radius: 20px;
object-fit: cover;
position: absolute;
}
.postid-347 .occ-why__img{
position:relative;
}
.occ-why__img--top {
top: 0;
left: 0;
width: 550px;
height: 320px;
}
.occ-why__img--bottom {
top: 336px;
left: 0;
width: 295px;
height: 160px;
}
.occ-why__stat {
position: absolute;
top: 336px;
right: 0;
width: 240px;
height: 160px;
background: var(--wp--preset--color--primary-light);
border-radius: 20px;
padding: 24px 28px;
display: flex;
flex-direction: column;
gap: 4px;
justify-content: center;
align-items: flex-start;
box-sizing: border-box;
}
.occ-why__stat-num {
font-size: 56px;
font-weight: 800;
line-height: 1.1;
color: var(--wp--preset--color--primary-hover);
}
.occ-why__stat-label {
font-size: 14px;
font-weight: 600;
line-height: 1.4;
color: var(--wp--preset--color--text-dark);
}
/* RIGHT: 588px content column */
.occ-why__content {
flex: 0 0 588px;
width: 588px;
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
}
.occ-why__heading {
font-size: 36px;
font-weight: 800;
line-height: 46.8px;
color: var(--wp--preset--color--primary-hover);
margin: 0;
}
.occ-why__subheading {
font-size: 20px;
font-weight: 700;
line-height: 26px;
color: var(--wp--preset--color--text-dark);
margin: 0;
}
.occ-why__body {
font-size: 16px;
line-height: 25.6px;
color: var(--wp--preset--color--text-secondary);
margin: 0;
}
.occ-why__body a { color: var(--wp--preset--color--text-secondary); text-decoration: underline; }
.occ-why__signals-title {
font-size: 16px;
font-weight: 700;
line-height: 20.8px;
color: var(--wp--preset--color--text-dark);
margin: 0;
}
.occ-why__signals {
display: flex;
flex-wrap: wrap;
gap: 10px;
width: 100%;
}
.occ-why__signal {
background: var(--wp--preset--color--primary-light);
border-radius: 8px;
padding: 8px 12px;
display: inline-flex;
gap: 12px;
align-items: center;
font-size: 14px;
line-height: 22.4px;
color: var(--wp--preset--color--text-dark);
width: 289px;
}
.occ-why__signal-check {
color: var(--wp--preset--color--primary);
font-weight: 700;
font-size: 20px;
line-height: 26px;
flex-shrink: 0;
}
.occ-why__signal strong { font-weight: 700; }
.occ-why__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
background: var(--wp--preset--color--primary);
color: #ffffff;
border: 1px solid var(--wp--preset--color--primary);
border-radius: 8px;
font-size: 14px;
font-weight: 700;
line-height: 22.4px;
text-decoration: none;
transition: all 0.2s ease;
margin-top: 8px;
}
.occ-why__btn:hover {
background: var(--wp--preset--color--primary-hover);
color: #ffffff;
text-decoration: none;
}
@media (max-width: 1199px) {
.occ-why__inner { gap: 40px; }
.occ-why__images { flex-basis: 45%; width: 45%; height: auto; aspect-ratio: 550 / 496; }
/* Percentage-based positioning so children scale with the container */
.occ-why__img--top {
top: 0;
left: 0;
width: 100%;
height: 64.5%;
}
.occ-why__img--bottom {
top: 67.7%;
left: 0;
width: 58%;
height: 32.3%;
}
.occ-why__stat {
top: 67.7%;
right: 0;
left: auto;
width: 40%;
height: 32.3%;
padding: clamp(12px, 1.6vw, 24px) clamp(14px, 2vw, 28px);
}
.occ-why__stat-num {
font-size: clamp(32px, 4.5vw, 56px);
}
.occ-why__stat-label {
font-size: clamp(11px, 1vw, 14px);
}
.occ-why__content { flex: 1 1 auto; width: auto; }
.occ-why__signal { width: calc(50% - 5px); }
}
@media (max-width: 767px) {
.occ-why__inner { flex-direction: column; gap: 32px; }
.occ-why__images { flex: 1 1 100%; width: 100%; }
.occ-why__signal { width: 100%; }
}
/* ==========================================================================
Find Your Perfect Procedure — Swiper slider (mobile-first)
========================================================================== */
.occ-find__heading {
text-align: center;
margin: 0 auto 20px !important;
}
.occ-find__slider-wrap { width: 100%; }
.occ-find__swiper {
width: 100%;
overflow: hidden;
position: relative;
}
.occ-find__swiper .swiper-slide {
height: auto;
box-sizing: border-box;
}
.occ-find__card {
background: var(--wp--preset--color--background);
border: 1px solid var(--wp--preset--color--border-light);
border-radius: 12px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 170px;
height: 100%;
box-sizing: border-box;
}
.occ-find__card-title {
font-size: 18px;
font-weight: 700;
line-height: 28.8px;
color: var(--wp--preset--color--text-dark);
margin: 0;
}
.occ-find__card-text {
font-size: 12px;
line-height: 19.2px;
color: var(--wp--preset--color--text-secondary);
margin: 0;
}
.occ-find__card-meta {
font-size: 11px;
font-weight: 700;
line-height: 17.6px;
color: var(--wp--preset--color--text-dark);
margin: auto 0 0 !important;
}
@media (min-width: 992px) {
.occ-find__card { padding: 20px; }
.occ-find__card-title { font-size: 20px; line-height: 26px; }
.occ-find__card-text { font-size: 13px; line-height: 20.8px; }
.occ-find__card-meta { font-size: 12px; line-height: 19.2px; }
.occ-find__heading { margin: 0 auto 30px !important; }
}
/* ==========================================================================
Bariatric Surgery Procedures — Swiper carousel
========================================================================== */
.occ-procs__heading {
text-align: center;
margin: 0 auto 20px !important;
}
.occ-procs__slider-wrap { width: 100%; margin-bottom: 24px; }
.occ-procs__swiper { width: 100%; overflow: hidden; }
.occ-procs__swiper .swiper-slide { height: auto; box-sizing: border-box; }
.occ-procs__card {
background: var(--wp--preset--color--background);
border: 1px solid var(--wp--preset--color--border-light);
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 4px 9.2px rgba(0, 0, 0, 0.1);
height: 100%;
box-sizing: border-box;
}
.occ-procs__img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
margin: 0;
flex-shrink: 0;
}
.occ-procs__card-body {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
flex: 1 1 auto;
justify-content: space-between;
}
.occ-procs__card-text-wrap {
display: flex;
flex-direction: column;
gap: 8px;
}
.occ-procs__card-title {
font-size: 18px;
font-weight: 700;
color: var(--wp--preset--color--primary);
margin: 0;
line-height: 28.8px;
}
.occ-procs__card-text {
font-size: 12px;
line-height: 19.2px;
color: var(--wp--preset--color--text-secondary);
margin: 0;
}
.occ-procs__bestfor {
background: var(--wp--preset--color--primary-light);
border-left: 2px solid var(--wp--preset--color--primary);
border-radius: 8px;
padding: 8px 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.occ-procs__bestfor-label {
font-size: 11px;
font-weight: 700;
color: var(--wp--preset--color--primary-hover);
margin: 0;
line-height: 17.6px;
}
.occ-procs__bestfor-text {
font-size: 11px;
color: var(--wp--preset--color--text-dark);
margin: 0;
line-height: 17.6px;
}
.occ-procs__btn-outline {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background: var(--wp--preset--color--background);
color: var(--wp--preset--color--primary) !important;
border: 1px solid var(--wp--preset--color--primary);
border-radius: 8px;
padding: 12px 24px;
font-size: 14px;
font-weight: 700;
line-height: 22.4px;
text-decoration: none;
transition: all 0.2s ease;
}
.occ-procs__btn-outline:hover {
background: var(--wp--preset--color--primary);
color: #ffffff !important;
text-decoration: none;
}
.occ-procs__btn-primary {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
margin: 0 auto;
padding: 12px 24px;
background: var(--wp--preset--color--primary);
color: #ffffff !important;
border: 1px solid var(--wp--preset--color--primary);
border-radius: 8px;
font-size: 14px;
font-weight: 700;
line-height: 22.4px;
text-decoration: none;
transition: all 0.2s ease;
}
.occ-procs__btn-primary:hover {
background: var(--wp--preset--color--primary-hover);
color: #ffffff !important;
text-decoration: none;
}
@media (min-width: 992px) {
.occ-procs__heading { margin: 0 auto 30px !important; }
.occ-procs__card-body { padding: 20px; gap: 12px; }
.occ-procs__card-title { font-size: 20px; line-height: 26px; }
.occ-procs__card-text { font-size: 13px; line-height: 20.8px; }
.occ-procs__bestfor-label,
.occ-procs__bestfor-text { font-size: 12px; line-height: 19.2px; }
}
/* ==========================================================================
What to Expect — horizontal stepper with arrows + featured step
========================================================================== */
.occ-expect {
display: flex;
flex-direction: column;
gap: 20px;
}
.occ-expect__heading {
text-align: center;
margin: 0 auto !important;
}
/* Stepper row — full-width with continuous connecting line */
.occ-expect__stepper-wrap {
width: 100%;
margin: 0;
position: relative;
}
/* Continuous horizontal line behind circles */
.occ-expect__stepper-wrap::before {
content: '';
position: absolute;
top: 21px; /* half of 43px circle */
left: 0;
right: 0;
height: 1px;
background: #d0d5dd;
z-index: 0;
pointer-events: none;
}
.occ-expect__stepper {
width: 100%;
overflow: visible;
position: relative;
z-index: 1;
}
.occ-expect__stepper .swiper-wrapper {
display: flex !important;
align-items: flex-start;
justify-content: space-between;
}
.occ-expect__arrow { display: none !important; }
/* Each slide — equal flex share, centered content, no padding gap */
.occ-expect__slide {
flex: 1 1 0 !important;
width: auto !important;
display: flex !important;
align-items: flex-start;
justify-content: center;
padding: 0;
position: relative;
}
.occ-expect__step {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
font-family: inherit;
transition: opacity 0.2s ease;
position: relative;
z-index: 1;
}
.occ-expect__step:hover { opacity: 0.85; }
.occ-expect__step:hover .occ-expect__circle {
border-color: var(--wp--preset--color--primary-hover);
color: var(--wp--preset--color--primary-hover);
}
.occ-expect__step--active:hover .occ-expect__circle {
background: var(--wp--preset--color--primary-hover);
border-color: var(--wp--preset--color--primary-hover);
color: #ffffff;
}
/* Panel switching */
.occ-expect__panels { position: relative; width: 100%; }
.occ-expect__featured {
display: none;
}
.occ-expect__featured--active {
display: flex;
animation: occ-expect-fade 0.3s ease;
}
@keyframes occ-expect-fade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.occ-expect__circle {
width: 43px;
height: 43px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--wp--preset--color--background);
border: 1px solid var(--wp--preset--color--primary);
color: var(--wp--preset--color--primary);
font-weight: 700;
font-size: 20px;
line-height: 26px;
flex-shrink: 0;
}
.occ-expect__step--active .occ-expect__circle {
background: var(--wp--preset--color--primary);
color: #ffffff;
border-color: var(--wp--preset--color--primary);
}
.occ-expect__step-label {
font-size: 16px;
font-weight: 700;
line-height: 1.3;
color: var(--wp--preset--color--text-dark);
text-align: center;
margin: 0;
max-width: 150px;
white-space: normal;
}
@media (min-width: 768px) {
.occ-expect__step-label { font-size: 18px; max-width: 180px; }
}
@media (min-width: 1024px) {
.occ-expect__step-label { font-size: 20px; max-width: 216px; }
}
/* Featured step — image + content (only --active is visible) */
.occ-expect__featured {
flex-direction: column;
gap: 20px;
width: 100%;
}
.occ-expect__media { display: flex; width: 100%; }
.occ-expect__img {
width: 100%;
border-radius: 20px;
aspect-ratio: 550 / 440;
object-fit: cover;
display: block;
margin: 0;
}
@media (min-width: 768px) {
.occ-expect__img { max-width: 550px; }
}
.occ-expect__content {
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
width: 100%;
}
.occ-expect__step-heading {
font-size: 28px;
font-weight: 800;
line-height: 36.4px;
color: var(--wp--preset--color--primary-hover);
margin: 0;
}
.occ-expect__step-body {
font-size: 14px;
line-height: 22.4px;
color: var(--wp--preset--color--text-secondary);
margin: 0;
}
.occ-expect__btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--wp--preset--color--primary);
color: #ffffff !important;
border: 1px solid var(--wp--preset--color--primary);
border-radius: 8px;
padding: 12px 24px;
font-size: 14px;
font-weight: 700;
line-height: 22.4px;
text-decoration: none;
transition: all 0.2s ease;
}
.occ-expect__btn:hover {
background: var(--wp--preset--color--primary-hover);
color: #ffffff !important;
text-decoration: none;
}
/* Mobile: fixed-width slides, horizontal scroll */
@media (max-width: 767px) {
.occ-expect__slide {
flex: 0 0 140px !important;
width: 140px !important;
}
/* Extend the line across the full scrollable track */
.occ-expect__stepper-wrap::before {
left: 0;
right: 0;
}
}
@media (min-width: 768px) {
.occ-expect { gap: 30px; }
/* On tablet/desktop: slides fill full width equally */
.occ-expect__slide {
flex: 1 1 0 !important;
width: auto !important;
}
.occ-expect__featured {
flex-direction: row;
gap: 32px;
align-items: center;
}
.occ-expect__media { flex: 1 1 50%; }
.occ-expect__content { flex: 1 1 50%; }
.occ-expect__step-heading { font-size: 32px; line-height: 1.3; }
.occ-expect__step-body { font-size: 16px; line-height: 25.6px; }
}
@media (min-width: 1024px) {
.occ-expect__featured { gap: 62px; }
.occ-expect__step-heading { font-size: 36px; line-height: 46.8px; }
}
/* ==========================================================================
Doctors (#9)
========================================================================== */
.occ-docs__heading { text-align: center; }
.occ-docs__intro {
text-align: center;
color: var(--wp--preset--color--text-secondary);
font-size: 16px;
line-height: 25.6px;
margin: 0 0 30px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.occ-docs__swiper { width: 100%; overflow: hidden; }
.occ-docs__swiper .swiper-slide { height: auto; box-sizing: border-box; }
.occ-docs__cards { gap: 30px !important; }
.occ-docs__card {
position: relative;
border-radius: 20px;
overflow: hidden;
min-height: 480px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 16px;
box-sizing: border-box;
height: 100%;
}
.occ-docs__img {
margin: 0;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
}
.occ-docs__info {
position: relative;
z-index: 2;
background: #ffffff;
border-bottom: 5px solid var(--wp--preset--color--primary);
border-radius: 16px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.occ-docs__name {
font-size: 24px;
font-weight: 700;
color: var(--wp--preset--color--primary);
margin: 0;
line-height: 31.2px;
}
.occ-docs__credentials {
font-size: 16px;
font-weight: 700;
color: var(--wp--preset--color--text-dark);
margin: 0;
line-height: 20.8px;
}
.occ-docs__role {
font-size: 14px;
font-weight: 700;
color: var(--wp--preset--color--text-dark);
margin: 0;
line-height: 22.4px;
}
.occ-docs__link a {
color: var(--wp--preset--color--primary);
font-size: 14px;
font-weight: 700;
text-decoration: underline;
}
/* ==========================================================================
Diabetes CTA (#11)
========================================================================== */
.occ-diabetes__inner { gap: 62px !important; align-items: center; }
.occ-diabetes__content { display: flex; flex-direction: column; gap: 16px; }
.occ-diabetes__body {
font-size: 16px;
line-height: 25.6px;
color: var(--wp--preset--color--text-secondary);
margin: 0;
}
.occ-diabetes__signals { gap: 10px !important; }
.occ-diabetes__signal {
background: var(--wp--preset--color--primary-light);
border-radius: 8px;
padding: 8px 12px;
display: inline-flex;
gap: 12px;
align-items: flex-start;
font-size: 14px;
color: var(--wp--preset--color--text-dark);
margin: 0;
flex: 1 1 calc(50% - 5px);
min-width: 0;
}
.occ-diabetes__check {
color: var(--wp--preset--color--primary);
font-weight: 700;
font-size: 20px;
flex-shrink: 0;
}
.occ-diabetes__media { position: relative; }
.occ-diabetes__image-wrap {
position: relative;
border-radius: 20px;
overflow: hidden;
}
.occ-diabetes__img {
margin: 0 !important;
border-radius: 20px;
overflow: hidden;
}
.occ-diabetes__img img {
width: 100%;
border-radius: 20px !important;
aspect-ratio: 550 / 496;
object-fit: cover;
display: block;
}
@media (max-width: 767px) {
.occ-diabetes__img img,
.occ-diabetes__img,
.occ-diabetes__image-wrap { border-radius: 16px; }
}
.occ-diabetes__stat {
position: absolute;
bottom: 0;
right: 0;
background: var(--wp--preset--color--primary-light);
border-radius: 20px;
padding: 16px 20px;
display: flex !important;
gap: 15px !important;
align-items: center !important;
}
.occ-diabetes__stat-num {
font-size: 48px;
font-weight: 800;
color: var(--wp--preset--color--primary);
margin: 0;
line-height: 62.4px;
}
.occ-diabetes__stat-label {
font-size: 16px;
font-weight: 700;
color: var(--wp--preset--color--text-secondary);
margin: 0;
line-height: 20.8px;
}
@media (max-width: 991px) {
.occ-diabetes__inner { gap: 32px !important; }
.occ-diabetes__signal { flex: 1 1 100%; }
/* What-to-Expect — vertical step (circle top, label below) on tablet/mobile */
.occ-expect__step {
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
}
.occ-expect__step-label {
font-size: 14px;
line-height: 1.3;
text-align: center;
max-width: 140px;
white-space: normal;
}
.occ-expect__slide { align-items: flex-start !important; }
}
/* Mobile/tablet (<992px) — pin line to circle vertical center (not slide center) */
@media (max-width: 991px) {
.occ-expect__slide::after {
top: 22px !important;
bottom: auto !important;
margin-top: 0 !important;
transform: translateY(-50%) !important;
}
}
/* ==========================================================================
Safe Weight Loss (#12) — image+text top + 4 feature cards below
========================================================================== */
.occ-safe__top {
display: flex;
flex-direction: column;
gap: 24px;
margin-bottom: 30px;
align-items: stretch;
}
@media (min-width: 768px) {
.occ-safe__top {
flex-direction: row;
gap: 40px;
align-items: center;
}
.occ-safe__media { flex: 1 1 50%; }
.occ-safe__content { flex: 1 1 50%; }
}
@media (min-width: 1024px) {
.occ-safe__top { gap: 62px; }
}
.occ-safe__media { display: flex; border-radius: 20px; overflow: hidden; }
.occ-safe__img {
margin: 0 !important;
flex: 1 1 auto;
border-radius: 20px;
overflow: hidden;
}
.occ-safe__img img {
border-radius: 20px !important;
width: 100%;
aspect-ratio: 550 / 290;
object-fit: cover;
display: block;
}
@media (max-width: 767px) {
.occ-safe__media,
.occ-safe__img,
.occ-safe__img img { border-radius: 16px !important; }
}
.occ-safe__content { display: flex; flex-direction: column; gap: 16px; }
.occ-safe__body {
font-size: 16px;
line-height: 25.6px;
color: var(--wp--preset--color--text-secondary);
margin: 0;
}
.occ-safe__body a { color: var(--wp--preset--color--primary); text-decoration: underline; }
.occ-safe__swiper { width: 100%; overflow: hidden; margin-top: 24px; }
.occ-safe__swiper .swiper-slide { height: auto; box-sizing: border-box; }
.occ-safe__cards { gap: 24px !important; }
.occ-safe__card {
background: var(--wp--preset--color--background);
border: 1px solid var(--wp--preset--color--border-light);
border-radius: 12px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 8px;
height: 100%;
box-sizing: border-box;
}
.occ-safe__card-title {
font-size: 20px;
font-weight: 700;
line-height: 26px;
color: var(--wp--preset--color--text-dark);
margin: 0;
}
.occ-safe__card-text {
font-size: 13px;
line-height: 20.8px;
color: var(--wp--preset--color--text-secondary);
margin: 0;
}
@media (max-width: 991px) { .occ-safe__top { gap: 32px !important; } }
/* ==========================================================================
OCC Difference (#13) — OCC vs Other Centers comparison with center "Vs" badge
========================================================================== */
.occ-diff__heading { text-align: center; margin-bottom: 30px !important; }
.occ-diff__compare {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 1000px;
margin: 0 auto;
}
.occ-diff__col {
border-radius: 20px;
padding: 40px;
display: flex;
flex-direction: column;
gap: 20px;
}
.occ-diff__col--occ {
background: linear-gradient(180deg, #e8f0ff 0%, rgba(232, 240, 255, 0) 100%);
}
.occ-diff__col--others {
background: linear-gradient(180deg, #f3f3f3 0%, rgba(243, 243, 243, 0) 100%);
}
.occ-diff__col-title {
font-size: 24px;
font-weight: 700;
line-height: 31.2px;
margin: 0;
text-align: center;
}
.occ-diff__col--occ .occ-diff__col-title { color: var(--wp--preset--color--primary); }
.occ-diff__col--others .occ-diff__col-title { color: var(--wp--preset--color--text-dark); }
.occ-diff__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.occ-diff__list li {
display: flex;
gap: 12px;
align-items: center;
padding: 8px 12px;
border-radius: 8px;
font-size: 14px;
line-height: 22.4px;
}
.occ-diff__col--occ li { color: var(--wp--preset--color--text-dark); font-weight: 700; }
.occ-diff__col--others li { color: var(--wp--preset--color--text-secondary); font-weight: 400; }
.occ-diff__check {
color: var(--wp--preset--color--primary);
font-weight: 700;
font-size: 20px;
flex-shrink: 0;
}
.occ-diff__cross {
color: #e02b2b;
font-weight: 700;
font-size: 18px;
flex-shrink: 0;
}
.occ-diff__vs {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: var(--wp--preset--color--primary-hover);
color: #ffffff;
border: 2px solid #ffffff;
border-radius: 9999px;
width: 68px;
height: 68px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.occ-diff__vs span {
font-size: 24px;
font-weight: 700;
line-height: 1;
}
@media (max-width: 767px) {
.occ-diff__compare { grid-template-columns: 1fr; gap: 60px; }
.occ-diff__vs {
left: 50%;
top: auto;
bottom: auto;
}
/* Place Vs between the two stacked columns */
.occ-diff__col--occ { position: relative; }
.occ-diff__col--occ::after {
content: "Vs";
position: absolute;
left: 50%;
bottom: -45px;
transform: translateX(-50%);
background: var(--wp--preset--color--primary-hover);
color: #ffffff;
border: 2px solid #ffffff;
border-radius: 9999px;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 700;
z-index: 3;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* Hide the original absolute-positioned Vs badge on mobile */
.occ-diff__compare > .occ-diff__vs { display: none; }
}
/* ==========================================================================
Patient Success Stories — featured before/after + dark blue text card
========================================================================== */
.occ-stories__heading { text-align: center; }
.occ-stories__subtitle {
text-align: center;
color: var(--wp--preset--color--text-secondary);
font-size: 16px;
margin: 0 0 30px;
}
/* Carousel is 1320px max (wider than 1200 swiper) so arrows sit outside the slides */
.occ-stories__carousel {
position: relative;
max-width: 1320px !important;
width: 100%;
margin: 0 auto 30px !important;
}
.occ-stories__swiper {
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
}
.occ-stories__swiper .swiper-slide { height: auto; }
.occ-stories__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 43px;
height: 43px;
background: transparent;
border: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 5;
--occ-arrow-bg: #F1F1F1;
--occ-arrow-fg: #1A1A1A;
transition: --occ-arrow-bg 0.2s ease, --occ-arrow-fg 0.2s ease;
}
.occ-stories__arrow svg { width: 43px; height: 43px; display: block; }
.occ-stories__arrow:hover {
--occ-arrow-bg: #0066CC;
--occ-arrow-fg: #ffffff;
}
.occ-stories__arrow--prev { left: 37px; }
.occ-stories__arrow--next { right: 37px; }
@media (max-width: 1023px) {
.occ-stories__arrow--prev { left: 4px; }
.occ-stories__arrow--next { right: 4px; }
}
.occ-stories__arrow--disabled {
opacity: 0;
pointer-events: none;
visibility: hidden;
}
@media (max-width: 767px) {
/* Hide side arrows on mobile — show mobile-nav row instead */
.occ-stories__arrow { display: none !important; }
}
/* Mobile nav arrows (Patient Stories) — grey prev + blue next below the card */
.occ-stories__mobile-nav {
display: none;
gap: 16px;
justify-content: center;
align-items: center;
margin: 8px 0 0;
}
.occ-stories__mnav-prev,
.occ-stories__mnav-next {
width: 43px; height: 43px;
background: transparent;
border: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
--occ-arrow-bg: #F1F1F1;
--occ-arrow-fg: #1A1A1A;
}
.occ-stories__mnav-prev svg,
.occ-stories__mnav-next svg { width: 43px; height: 43px; display: block; }
.occ-stories__mnav-prev:hover,
.occ-stories__mnav-next:hover,
.occ-stories__mnav-prev:active,
.occ-stories__mnav-next:active,
.occ-stories__mnav-prev:focus-visible,
.occ-stories__mnav-next:focus-visible {
--occ-arrow-bg: #0066CC;
--occ-arrow-fg: #ffffff;
}
.occ-stories__mnav-prev.is-inactive,
.occ-stories__mnav-next.is-inactive {
opacity: 0.45;
pointer-events: none;
}
@media (max-width: 767px) {
.occ-stories__mobile-nav { display: flex; }
}
.occ-stories__featured {
display: grid;
grid-template-columns: 550px 1fr;
gap: 30px;
align-items: stretch;
}
.occ-stories__photo {
position: relative;
aspect-ratio: 550 / 496;
border-radius: 20px;
overflow: hidden;
background: #1a1a1a;
}
.occ-stories__half {
position: absolute;
top: 0;
height: 100%;
width: 50%;
object-fit: cover;
object-position: center top;
}
.occ-stories__half--before { right: 0; }
.occ-stories__half--after { left: 0; }
.occ-stories__divider {
position: absolute;
top: 0; bottom: 0;
left: 50%;
width: 4px;
background: #ffffff;
transform: translateX(-50%);
z-index: 2;
}
.occ-stories__label {
position: absolute;
bottom: 24px;
color: #ffffff;
font-weight: 700;
font-size: 20px;
z-index: 3;
}
.occ-stories__label--before { right: 25%; transform: translateX(50%); }
.occ-stories__label--after { left: 25%; transform: translateX(-50%); }
.occ-stories__lbs {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 104px;
height: 104px;
border-radius: 50%;
background: var(--wp--preset--color--primary-hover);
border: 2px solid #ffffff;
color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 4;
}
.occ-stories__lbs-num { font-size: 36px; font-weight: 800; line-height: 1; }
.occ-stories__lbs-unit { font-size: 20px; font-weight: 700; color: var(--wp--preset--color--primary-light); }
.occ-stories__card {
background: var(--wp--preset--color--primary-dark);
border-radius: 20px;
padding: 32px;
color: #ffffff;
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
overflow: hidden;
}
.occ-stories__quote {
color: #ffffff;
font-size: 24px;
font-weight: 700;
line-height: 31.2px;
margin: 0;
}
.occ-stories__author { display: flex; flex-direction: column; gap: 8px; color: #ffffff; }
.occ-stories__author strong { font-size: 20px; line-height: 26px; }
.occ-stories__author span { font-size: 14px; line-height: 22.4px; }
.occ-stories__body {
color: #ffffff;
font-size: 14px;
line-height: 22.4px;
margin: 0;
}
.occ-stories__body a { color: #ffffff; text-decoration: underline; }
.occ-stories__link {
color: #ffffff;
text-decoration: underline;
font-weight: 700;
font-size: 14px;
}
@media (max-width: 991px) {
.occ-stories__featured { grid-template-columns: 1fr; }
}
/* ==========================================================================
Press / As Seen On (#15) — heading + 6 press logos in a row
========================================================================== */
.occ-press {
background: var(--wp--preset--color--background);
padding-top: 48px !important;
padding-bottom: 48px !important;
}
.occ-press__heading {
text-align: center;
font-size: clamp(28px, 3.5vw, 36px);
color: var(--wp--preset--color--primary-hover);
font-weight: 800;
line-height: 46.8px;
margin: 0 0 30px;
}
.occ-press__swiper { width: 100%; overflow: hidden; }
.occ-press__swiper .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
height: auto;
box-sizing: border-box;
}
.occ-press__logos {
gap: 24px !important;
flex-wrap: wrap;
width: 100%;
}
.occ-press__logo {
margin: 0 !important;
max-width: 100%;
max-height: 50px;
width: auto;
height: 50px;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.85;
transition: filter 0.3s ease, opacity 0.3s ease;
display: block;
}
.occ-press__logo:hover {
filter: grayscale(0%);
opacity: 1;
}
@media (max-width: 767px) {
.occ-press { padding: 24px 16px !important; }
.occ-press__heading { margin: 0 0 20px; font-size: 24px !important; line-height: 31.2px !important; }
.occ-press__logo { height: 40px; max-height: 40px; }
}
@media (max-width: 991px) {
.occ-press__logos { gap: 20px !important; justify-content: center !important; }
.occ-press__logo { flex: 0 0 calc(33.333% - 14px); }
}
@media (max-width: 599px) {
.occ-press__logo { flex: 0 0 calc(50% - 10px); height: 70px; }
}
/* About OCC — occ-press modifier: blue heading, extra padding, Browse Media CTA */
.occ-press--about {
padding-top: 80px !important;
padding-bottom: 80px !important;
}
.occ-press--about .occ-press__heading {
color: #0052a3;
font-size: 36px !important;
font-weight: 800;
line-height: 1.3 !important;
}
.occ-press__cta {
text-align: center;
margin-top: 30px;
}
.occ-press__btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--wp--preset--color--primary, #0066cc);
color: #fff;
font-size: 14px;
font-weight: 700;
line-height: 22.4px;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
white-space: nowrap;
transition: background 0.2s;
}
.occ-press__btn:hover { background: #0052a3; color: #fff; }
@media (max-width: 767px) {
.occ-press--about { padding-top: 48px !important; padding-bottom: 48px !important; }
.occ-press--about .occ-press__heading{font-size: 28px !important; margin-bottom: 20px !important;}
}
/* ==========================================================================
Reviews (#17)
========================================================================== */
.occ-reviews__heading { text-align: center; }
.occ-reviews__intro {
text-align: center;
color: var(--wp--preset--color--text-secondary);
margin: 0 0 30px;
}
.occ-reviews__swiper { width: 100%; overflow: hidden; }
.occ-reviews__swiper .swiper-slide { height: auto; box-sizing: border-box; }
.occ-reviews__cards { gap: 24px !important; }
.occ-reviews__card {
background: var(--wp--preset--color--primary-tint);
border-radius: 16px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
box-sizing: border-box;
}
.occ-reviews__stars {
color: #FFC107;
font-size: 20px;
letter-spacing: 2px;
margin: 0;
}
.occ-reviews__quote {
font-style: italic;
color: var(--wp--preset--color--text-dark);
margin: 0;
line-height: 1.6;
}
.occ-reviews__author {
color: var(--wp--preset--color--text-secondary);
font-size: 14px;
font-weight: 700;
margin: 0;
}
/* ==========================================================================
Facility (#18)
========================================================================== */
.occ-facility__inner { gap: 62px !important; align-items: center; }
.occ-facility__media { display: flex; }
.occ-facility__img { margin: 0 !important; flex: 1 1 auto; }
.occ-facility__img img {
border-radius: 20px;
width: 100%;
aspect-ratio: 550 / 496;
object-fit: cover;
}
.occ-facility__content { display: flex; flex-direction: column; gap: 16px; }
.occ-facility__body {
font-size: 16px;
line-height: 25.6px;
color: var(--wp--preset--color--text-secondary);
margin: 0;
}
@media (max-width: 991px) { .occ-facility__inner { gap: 32px !important; } }
/* ==========================================================================
Footer CTA (#19)
========================================================================== */
.occ-cta__panel {
position: relative;
border-radius: 20px;
overflow: hidden;
padding: 64px 48px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.occ-cta__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.occ-cta__overlay {
position: absolute;
inset: 0;
background: rgba(38, 38, 38, 0.85);
z-index: 2;
}
.occ-cta__content {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
width: 100%;
}
.occ-cta__heading {
color: #ffffff;
margin: 0;
font-size: clamp(28px, 3.5vw, 36px);
}
.occ-cta__body {
color: #ffffff;
font-size: 16px;
margin: 0;
}
.occ-cta__content .wp-block-buttons { display: flex !important; gap: 16px !important; flex-wrap: wrap; justify-content: center; align-items: center; }
.occ-cta__content .is-style-outline > .wp-block-button__link {
background: #ffffff !important;
color: var(--wp--preset--color--primary);
border: 1px solid var(--wp--preset--color--primary);
}
.occ-cta__content .is-style-outline > .wp-block-button__link:hover {
background: var(--wp--preset--color--primary) !important;
color: #ffffff;
}
@media (max-width: 599px) {
.occ-cta__panel { padding: 40px 24px; border-radius: 16px; }
}
/* ── CTA panel (Gutenberg group-based, no wp:cover) ── */
.occ-accred-cta-panel {
position: relative;
border-radius: 20px;
overflow: hidden;
padding: 64px 48px;
text-align: center;
background-image: url('https://obesity.aliansoftware.net/wp-content/uploads/2026/05/about-occ-cta-bg.jpg');
background-size: cover;
background-position: center;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 20px !important;
width: 100% !important;
}
.occ-accred-cta-panel::before {
content: '';
position: absolute;
inset: 0;
background: rgba(38, 38, 38, 0.85);
z-index: 0;
border-radius: 20px;
}
.occ-accred-cta-panel > .wp-block-group {
position: relative;
z-index: 1;
width: 100%;
}
/* Heading — match occ-cta__heading size */
.occ-accred-cta-panel .wp-block-heading {
color: #ffffff !important;
font-size: clamp(28px, 3.5vw, 36px) !important;
font-weight: 800 !important;
line-height: 1.3 !important;
margin: 0 !important;
width: 100% !important;
}
/* Content group — centre cross-axis so max-width paragraph is horizontally centred */
.occ-accred-cta-panel .occ-cta__content {
align-items: center !important;
width: 100% !important;
}
/* Paragraph */
.occ-accred-cta-panel .occ-cta__body {
color: #ffffff !important;
font-size: 16px !important;
line-height: 1.6 !important;
margin: 0 auto !important;
max-width: none !important;
width: 100% !important;
}
/* Primary button hover */
.occ-accred-cta-panel .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
background-color: #0055bb !important;
}
/* Outline button */
.occ-accred-cta-panel .is-style-outline .wp-block-button__link {
background: #ffffff !important;
color: #0066cc !important;
border: 1px solid #0066cc !important;
}
.occ-accred-cta-panel .is-style-outline .wp-block-button__link:hover {
background: #0066cc !important;
color: #ffffff !important;
}
@media (max-width: 599px) {
.occ-accred-cta-panel { padding: 40px 24px; border-radius: 16px; }
}
/* ==========================================================================
OCC Features — Swiper carousel
========================================================================== */
.occ-features { background: var(--wp--preset--color--background); }
.occ-features__swiper { width: 100%; overflow: hidden; }
.occ-features__swiper .swiper-slide { height: auto; box-sizing: border-box; }
/* Desktop: skip Swiper, show all 6 in a 3-column grid */
@media (min-width: 992px) {
.occ-features__swiper { overflow: visible !important; }
.occ-features__swiper .swiper-wrapper {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
transform: none !important;
flex-wrap: wrap;
height: auto !important;
}
.occ-features__swiper .swiper-slide {
width: auto !important;
margin: 0 !important;
height: auto !important;
}
}
.occ-features__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.occ-features__card {
background: linear-gradient(180deg, #e8f0ff 0%, rgba(232, 240, 255, 0) 100%);
border-radius: 16px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
box-sizing: border-box;
}
.occ-features__icon {
color: var(--wp--preset--color--primary);
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.occ-features__icon img {
width: 32px;
height: 32px;
display: block;
object-fit: contain;
}
.occ-features__title {
color: var(--wp--preset--color--primary-hover);
font-size: 20px;
font-weight: 700;
line-height: 26px;
margin: 0;
}
.occ-features__text {
color: var(--wp--preset--color--text-secondary);
font-size: 14px;
line-height: 22.4px;
margin: 0;
}
.occ-features__text a { color: var(--wp--preset--color--primary); text-decoration: underline; }
@media (max-width: 991px) { .occ-features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .occ-features__grid { grid-template-columns: 1fr; } }
/* ==========================================================================
Video Stats — full-width video + auto-scrolling marquee stats strip
========================================================================== */
section.occ-video-stats {
padding: 0 !important;
max-width: none !important;
width: 100vw;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
box-sizing: border-box;
overflow: hidden;
}
.occ-video-stats__video {
position: relative;
width: 100%;
aspect-ratio: 16 / 7;
background: #000;
overflow: hidden;
}
.occ-video-stats__thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.occ-video-stats__play-btn {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 80px; height: 80px;
background: rgba(255,255,255,0.95);
color: var(--wp--preset--color--primary);
border-radius: 50%;
border: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
padding: 0;
z-index: 2;
}
.occ-video-stats__play-btn:hover {
background: #ffffff;
transform: translate(-50%, -50%) scale(1.08);
}
.occ-video-stats__video iframe,
.occ-video-stats__video video {
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* Video popup modal — opens when user clicks the play button on video-stats */
.occ-video-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
}
.occ-video-modal.is-open { display: flex; }
.occ-video-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.8);
cursor: pointer;
}
.occ-video-modal__dialog {
position: relative;
z-index: 1;
width: 90vw;
max-width: 960px;
background: #000;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.occ-video-modal__frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
}
.occ-video-modal__frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.occ-video-modal__close {
position: absolute;
top: -42px;
right: 0;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
border: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease;
z-index: 2;
}
.occ-video-modal__close:hover { background: rgba(255, 255, 255, 0.3); }
@media (max-width: 767px) {
.occ-video-modal__dialog { width: 94vw; }
.occ-video-modal__close { top: -38px; right: 0; }
}
/* Stats strip — JS clones tracks for guaranteed seamless infinite scroll */
.occ-video-stats__bar {
background: var(--wp--preset--color--primary);
color: #ffffff;
padding: 16px 0;
overflow: hidden;
width: 100%;
}
.occ-video-stats__marquee {
display: flex;
width: max-content;
will-change: transform;
}
.occ-video-stats__marquee.is-running {
animation: occ-vs-marquee var(--occ-marquee-duration, 30s) linear infinite;
}
.occ-video-stats__track {
display: flex;
align-items: center;
gap: 48px;
padding-right: 48px;
flex-shrink: 0;
}
@keyframes occ-vs-marquee {
from { transform: translateX(0); }
to { transform: translateX(var(--occ-marquee-translate, -50%)); }
}
.occ-video-stats__stat {
display: inline-flex;
align-items: center;
gap: 12px;
color: #ffffff;
white-space: nowrap;
flex: 0 0 auto;
}
.occ-video-stats__icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff;
flex: 0 0 auto;
opacity: 0.85;
}
.occ-video-stats__icon svg { display: block; }
.occ-video-stats__text {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-size: 14px;
color: #ffffff;
}
.occ-video-stats__text strong { font-size: 16px; font-weight: 700; }
@media (max-width: 767px) {
.occ-video-stats__video { aspect-ratio: 16 / 10; }
.occ-video-stats__play-btn { width: 56px; height: 56px; }
.occ-video-stats__play-btn svg { width: 22px; height: 22px; }
.occ-video-stats__set { gap: 32px; padding-right: 32px; }
.occ-video-stats__stat strong { font-size: 15px; }
.occ-video-stats__stat span { font-size: 12px; }
.occ-video-stats__bar { padding: 12px 0; }
}
.occ-video-stats__divider { width: 1px; height: 40px; background: rgba(255,255,255,0.3); }
@media (max-width: 767px) {
.occ-video-stats__bar { padding: 16px; gap: 12px; }
.occ-video-stats__stat strong { font-size: 18px; }
.occ-video-stats__stat span { font-size: 11px; }
.occ-video-stats__divider { display: none; }
}
/* ==========================================================================
All-Inclusive Packages
========================================================================== */
.occ-packages { background: var(--wp--preset--color--primary-tint); }
.occ-packages__grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 40px;
align-items: start;
}
.occ-packages__lead { display: flex; flex-direction: column; gap: 16px; grid-column: 1; grid-row: 1; }
.occ-packages__swiper { grid-column: 2; grid-row: 1 / 3; }
.occ-packages__quote { grid-column: 1; grid-row: 2; }
.occ-packages__heading {
color: var(--wp--preset--color--primary-hover);
font-size: clamp(28px, 3.5vw, 36px);
font-weight: 800;
line-height: 1.3;
margin: 0;
}
.occ-packages__intro {
color: var(--wp--preset--color--text-secondary);
font-size: 16px;
line-height: 1.6;
margin: 0;
}
.occ-packages__quote {
background: var(--wp--preset--color--primary-light);
border-radius: 16px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.occ-packages__quote h4 {
color: var(--wp--preset--color--primary-hover);
font-size: 20px;
font-weight: 700;
margin: 0;
}
.occ-packages__quote p {
color: var(--wp--preset--color--text-secondary);
font-size: 14px;
line-height: 22.4px;
margin: 0;
}
.occ-packages__quote-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.occ-packages__btn-primary {
background: var(--wp--preset--color--primary);
color: #ffffff;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
border: 1px solid var(--wp--preset--color--primary);
}
.occ-packages__btn-primary:hover { background: var(--wp--preset--color--primary-hover); color: #ffffff; }
.occ-packages__phone {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--wp--preset--color--primary);
font-size: 14px;
font-weight: 700;
text-decoration: none;
}
.occ-packages__phone svg {
flex-shrink: 0;
}
.occ-packages__cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.occ-packages__swiper { width: 100%; overflow: hidden; }
.occ-packages__swiper .swiper-slide { height: auto; box-sizing: border-box; }
/* Desktop: force the swiper-wrapper into a 2-col grid; override Swiper's flex/transform */
@media (min-width: 768px) {
.occ-packages__swiper { overflow: visible !important; }
.occ-packages__swiper .swiper-wrapper {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
transform: none !important;
flex-wrap: wrap;
height: auto !important;
}
.occ-packages__swiper .swiper-slide {
width: auto !important;
margin: 0 !important;
height: auto !important;
}
}
.occ-packages__card {
background: var(--wp--preset--color--background);
border: 1px solid var(--wp--preset--color--border-light);
border-radius: 12px;
padding: 16px;
display: flex;
gap: 12px;
align-items: flex-start;
height: 100%;
box-sizing: border-box;
}
.occ-packages__card .occ-packages__icon {
width: 40px; height: 40px;
background: var(--wp--preset--color--primary-light);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--wp--preset--color--primary);
flex-shrink: 0;
}
.occ-packages__card .occ-packages__icon img {
width: 24px;
height: 24px;
display: block;
object-fit: contain;
}
.occ-packages__card h4 {
font-size: 16px;
font-weight: 700;
color: var(--wp--preset--color--text-dark);
margin: 0 0 4px;
}
@media (min-width: 768px) {
.occ-packages__card h4 { font-size: 20px; }
}
.occ-packages__card p {
font-size: 13px;
color: var(--wp--preset--color--text-secondary);
line-height: 18.2px;
margin: 0;
}
@media (max-width: 991px) { .occ-packages__grid { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .occ-packages__cards { grid-template-columns: 1fr; } }
/* ==========================================================================
Latest News (3 blog cards)
========================================================================== */
.occ-news__heading {
text-align: center;
color: var(--wp--preset--color--primary);
font-size: clamp(24px, 3vw, 32px);
font-weight: 800;
margin: 0 0 20px;
}
@media (max-width: 767px) {
.occ-news__heading { margin: 0 0 16px; font-size: 24px; line-height: 31.2px; }
}
.occ-news__swiper { width: 100%; overflow: hidden; }
.occ-news__swiper .swiper-slide { height: auto; box-sizing: border-box; }
.occ-news__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.occ-news__card {
background: var(--wp--preset--color--background);
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
}
.occ-news__media {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 12px;
}
.occ-news__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.occ-news__media:hover img { transform: scale(1.03); }
.occ-news__body {
padding: 16px 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.occ-news__meta {
display: flex;
gap: 12px;
align-items: center;
font-size: 12px;
}
.occ-news__cat {
background: var(--wp--preset--color--primary-light);
color: var(--wp--preset--color--primary);
padding: 4px 12px;
border-radius: 9999px;
font-weight: 700;
}
.occ-news__author { color: var(--wp--preset--color--text-muted); }
.occ-news__title {
font-size: 18px;
font-weight: 700;
line-height: 1.3;
color: var(--wp--preset--color--text-dark);
margin: 0;
}
.occ-news__title a { color: var(--wp--preset--color--text-dark); text-decoration: none; }
.occ-news__title a:hover { color: var(--wp--preset--color--primary); }
.occ-news__more {
color: var(--wp--preset--color--primary);
font-weight: 700;
font-size: 14px;
text-decoration: none;
margin-top: 4px;
}
.occ-news__more:hover { text-decoration: underline; }
@media (max-width: 991px) { .occ-news__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .occ-news__grid { grid-template-columns: 1fr; } }
/* ==========================================================================
FAQ accordion — 996px content width per Figma
========================================================================== */
.occ-faq > * {
max-width: 996px !important;
}
.occ-faq__heading {
text-align: center;
color: var(--wp--preset--color--primary-hover);
font-size: 36px;
font-weight: 800;
line-height: 46.8px;
margin: 0 0 30px;
letter-spacing: 0;
}
.occ-faq__list {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 996px;
margin: 0 auto;
}
.occ-faq__item {
background: var(--wp--preset--color--background);
border: 1px solid var(--wp--preset--color--border-light);
border-radius: 10px;
overflow: hidden;
transition: box-shadow 0.2s ease;
}
.occ-faq__item[open] {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}
.occ-faq__q {
padding: 20px 28px;
font-size: 16px;
font-weight: 700;
line-height: 20.8px;
color: var(--wp--preset--color--text-dark);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
text-align: left;
}
.occ-faq__q::-webkit-details-marker { display: none; }
.occ-faq__q::after {
content: "";
width: 16px;
height: 9px;
margin-left: 16px;
flex-shrink: 0;
background-image: url("data:image/svg+xml;utf8, — icon comes from item::before instead */
.occ-bariatric-igs-cards__check,
.occ-bariatric-igs-cards__check.wp-block-paragraph {
display: none !important;
}
/* SVG check icon on the item wrapper (a
, immune to Gutenberg flex-child rules) */
.occ-bariatric-igs-cards__item::before,
.wp-block-group.occ-bariatric-igs-cards__item::before {
content: '';
display: block;
width: 20px;
min-width: 20px;
height: 20px;
flex-shrink: 0;
align-self: flex-start;
margin-top: 2px;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 9L7 14.5L17.5 4.5' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.occ-bariatric-igs-cards__item-text.wp-block-paragraph {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #1a1a1a !important;
margin: 0 !important;
flex: 1 1 0 !important;
}
.occ-bariatric-igs-cards__item-text strong {
font-weight: 700 !important;
color: #1a1a1a !important;
}
@media (max-width: 767px) {
.occ-bariatric-igs-cards { padding: 48px 0; }
.occ-bariatric-igs-cards__grid.wp-block-columns { flex-direction: column !important; }
.occ-bariatric-igs-cards__title.wp-block-heading { font-size: 20px !important; }
}
/* ── Bariatric Patient Success Stories — CTA button centred ── */
.occ-bariatric-stories .occ-stories__cta,
.occ-bariatric-stories .wp-block-buttons.occ-stories__cta {
display: flex !important;
justify-content: center !important;
width: 100% !important;
}
/* ============================================================
Surgery Details Section (543:4196) — text left + image right
============================================================ */
.occ-bariatric-surgery-details {
padding: 0 0;
background: #ffffff;
box-sizing: border-box;
overflow: hidden;
}
.occ-bariatric-surgery-details__inner,
.wp-block-group.occ-bariatric-surgery-details__inner {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 62px !important;
align-items: center !important;
width: 100% !important;
box-sizing: border-box !important;
}
.occ-bariatric-surgery-details__content,
.wp-block-group.occ-bariatric-surgery-details__content {
flex: 0 0 588px !important;
max-width: 588px !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
.occ-bariatric-surgery-details__title.wp-block-heading {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 !important;
}
.occ-bariatric-surgery-details__body.wp-block-paragraph {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 !important;
}
.occ-bariatric-surgery-details__image.wp-block-image {
flex: 1 1 0 !important;
min-width: 0 !important;
margin: 0 !important;
}
.occ-bariatric-surgery-details__image img {
width: 100% !important;
height: 509px !important;
object-fit: cover !important;
border-radius: 20px !important;
display: block !important;
}
/* Tablet: content col too wide to hold fixed 588px */
@media (max-width: 1100px) {
.occ-bariatric-surgery-details__content,
.wp-block-group.occ-bariatric-surgery-details__content {
flex: 1 1 0 !important;
max-width: 55% !important;
}
.occ-bariatric-surgery-details__inner,
.wp-block-group.occ-bariatric-surgery-details__inner { gap: 36px !important; }
.occ-bariatric-surgery-details__title.wp-block-heading { font-size: 28px !important; }
.occ-bariatric-surgery-details__image img { height: 400px !important; }
}
@media (max-width: 767px) {
.occ-bariatric-surgery-details { padding: 48px 0 0 0; }
.occ-bariatric-surgery-details__inner,
.wp-block-group.occ-bariatric-surgery-details__inner { flex-direction: column !important; gap: 32px !important; }
.occ-bariatric-surgery-details__content,
.wp-block-group.occ-bariatric-surgery-details__content { flex: 1 1 auto !important; max-width: 100% !important; }
.occ-bariatric-surgery-details__title.wp-block-heading { font-size: 26px !important; }
.occ-bariatric-surgery-details__image.wp-block-image { width: 100% !important; }
.occ-bariatric-surgery-details__image img { height: 260px !important; }
}
/* ============================================================
IGS Comparison Section (543:4204)
Centered header + 4 feature cards + info box
============================================================ */
.occ-bariatric-comparison {
padding: 80px 0;
box-sizing: border-box;
overflow: hidden;
background: #ffffff;
}
/* ── Header ── */
.occ-bariatric-comparison__header,
.wp-block-group.occ-bariatric-comparison__header {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 16px !important;
text-align: center !important;
margin-bottom: 30px !important;
}
.occ-bariatric-comparison__title.wp-block-heading {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
text-align: center !important;
margin: 0 !important;
}
.occ-bariatric-comparison__subtitle.wp-block-paragraph {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
text-align: center !important;
margin: 0 !important;
max-width: 900px !important;
}
/* ── 4-column cards ── */
.occ-bariatric-comparison__grid.wp-block-columns {
gap: 24px !important;
align-items: stretch !important;
margin-bottom: 30px !important;
flex-wrap: wrap !important;
}
.occ-bariatric-comparison__card.wp-block-column {
background: #ffffff !important;
border: 1px solid #e5e5e3 !important;
border-radius: 12px !important;
padding: 32px !important;
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
box-sizing: border-box !important;
min-width: 0 !important;
}
.occ-bariatric-comparison__card-title.wp-block-heading {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #0066cc !important;
margin: 0 !important;
}
.occ-bariatric-comparison__card-body.wp-block-paragraph {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 !important;
}
/* ── Info box ── */
.occ-bariatric-comparison__infobox,
.wp-block-group.occ-bariatric-comparison__infobox {
background: #e8f0ff !important;
border-left: 2px solid #0066cc !important;
border-radius: 12px !important;
padding: 20px 24px !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 18px !important;
width: 100% !important;
}
.occ-bariatric-comparison__icon.wp-block-image {
flex: 0 0 40px !important;
width: 40px !important;
margin: 0 !important;
}
.occ-bariatric-comparison__icon img {
width: 40px !important;
height: 40px !important;
object-fit: contain !important;
display: block !important;
}
/* Vertical divider line between icon and text */
.occ-bariatric-comparison__infobox-divider {
width: 1px;
align-self: stretch;
background: rgba(0, 102, 204, 0.25);
flex-shrink: 0;
}
.occ-bariatric-comparison__infobox-text.wp-block-paragraph {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #1a1a1a !important;
margin: 0 !important;
flex: 1 1 0 !important;
}
.occ-bariatric-comparison__infobox-text strong {
font-weight: 700 !important;
color: #0066cc !important;
}
/* ── Tablet: 4-col → 2×2 grid ── */
@media (max-width: 1024px) {
.occ-bariatric-comparison { padding: 60px 0; }
.occ-bariatric-comparison__title.wp-block-heading { font-size: 28px !important; }
.occ-bariatric-comparison__card.wp-block-column {
flex: 0 0 calc(50% - 12px) !important;
max-width: calc(50% - 12px) !important;
}
}
/* ── Mobile: single column ── */
@media (max-width: 767px) {
.occ-bariatric-comparison { padding: 48px 0; }
.occ-bariatric-comparison__title.wp-block-heading { font-size: 24px !important; }
.occ-bariatric-comparison__card.wp-block-column {
flex: 0 0 100% !important;
max-width: 100% !important;
padding: 24px !important;
}
.occ-bariatric-comparison__infobox,
.wp-block-group.occ-bariatric-comparison__infobox {
flex-direction: column !important;
align-items: flex-start !important;
}
.occ-bariatric-comparison__infobox-divider { width: 100% !important; height: 1px !important; align-self: auto; }
}
/* ============================================================
VS Cards Section (543:4233) — full-width #f4f9ff bg, 2 white cards
============================================================ */
.occ-bariatric-vs {
/* Full-width background breakout */
position: relative;
width: 100vw !important;
max-width: 100vw !important;
left: 50%;
margin-left: -50vw !important;
background: #f4f9ff;
padding: 80px 0;
}
.occ-bariatric-vs__grid.wp-block-columns {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
gap: 24px !important;
align-items: stretch !important;
}
.occ-bariatric-vs__card.wp-block-column {
background: #ffffff !important;
border: 1px solid #e5e5e3 !important;
border-radius: 12px !important;
padding: 32px !important;
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
.occ-bariatric-vs__card-title.wp-block-heading {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 !important;
}
.occ-bariatric-vs__card-body.wp-block-paragraph {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 !important;
}
@media (max-width: 1024px) {.occ-bariatric-vs { padding: 80px 24px; }}
@media (max-width: 767px) {
.occ-bariatric-vs { padding: 48px 16px; }
.occ-bariatric-vs__grid.wp-block-columns { flex-direction: column !important; }
.occ-bariatric-vs__card-title.wp-block-heading { font-size: 20px !important; }
}
/* ============================================================
Final CTA Section (543:4158) — bg image + dark overlay, centred content
============================================================ */
.occ-bariatric-final-cta {
padding: 0;
background: #ffffff;
}
/* Card: bg image + rgba(38,38,38,0.85) overlay via ::before */
.occ-bariatric-final-cta__card,
.wp-block-group.occ-bariatric-final-cta__card {
position: relative !important;
border-radius: 20px !important;
overflow: hidden !important;
padding: 64px 48px !important;
background-image: url('https://obesity.aliansoftware.net/wp-content/uploads/2026/05/bariatric-final-cta-bg.jpg') !important;
background-size: cover !important;
background-position: center !important;
}
.occ-bariatric-final-cta__card::before,
.wp-block-group.occ-bariatric-final-cta__card::before {
content: '';
position: absolute;
inset: 0;
background: rgba(38, 38, 38, 0.85);
z-index: 0;
border-radius: 20px;
}
.occ-bariatric-final-cta__content,
.wp-block-group.occ-bariatric-final-cta__content {
position: relative !important;
z-index: 1 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 20px !important;
width: 100% !important;
}
.occ-bariatric-final-cta__title.wp-block-heading {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #ffffff !important;
text-align: center !important;
margin: 0 !important;
}
.occ-bariatric-final-cta__subtitle,
.occ-bariatric-final-cta__subtitle.wp-block-paragraph,
.occ-bariatric-final-cta__content .occ-bariatric-final-cta__subtitle {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #ffffff !important;
text-align: center !important;
margin: 0 !important;
}
/* Force all text inside card to white */
.occ-bariatric-final-cta__content *,
.wp-block-group.occ-bariatric-final-cta__content * {
color: #ffffff !important;
}
.occ-bariatric-final-cta__buttons.wp-block-buttons {
display: flex !important;
flex-direction: row !important;
gap: 16px !important;
justify-content: center !important;
flex-wrap: nowrap !important;
}
/* Primary button: #0066cc bg, white text */
.occ-bariatric-final-cta__buttons .occ-bariatric-final-cta__btn--primary .wp-block-button__link {
background: #0066cc !important;
color: #ffffff !important;
border: none !important;
border-radius: 8px !important;
padding: 12px 24px !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.6 !important;
text-decoration: none !important;
}
.occ-bariatric-final-cta__buttons .occ-bariatric-final-cta__btn--primary .wp-block-button__link:hover {
background: #0052a3 !important;
}
/* Secondary button: white bg, #0066cc border + text */
.occ-bariatric-final-cta__buttons .occ-bariatric-final-cta__btn--secondary .wp-block-button__link {
background: #ffffff !important;
color: #0066cc !important;
border: 1px solid #0066cc !important;
border-radius: 8px !important;
padding: 12px 24px !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.6 !important;
text-decoration: none !important;
}
.occ-bariatric-final-cta__buttons .occ-bariatric-final-cta__btn--secondary .wp-block-button__link:hover {
background: #e8f0ff !important;
}
@media (max-width: 767px) {
.occ-bariatric-final-cta { padding:0 0 48px 0; }
.occ-bariatric-final-cta__card { padding: 48px 16px !important; }
.occ-bariatric-final-cta__title.wp-block-heading { font-size: 26px !important; }
.occ-bariatric-final-cta__buttons.wp-block-buttons { flex-direction: column !important; align-items: center !important; }
}
/* ============================================================
Before & After Videos (543:4241) — Swiper slider + YouTube popup
============================================================ */
.occ-bariatric-videos {
background: #ffffff;
padding: 80px 0;
}
.occ-bariatric-videos__title.wp-block-heading {
font-size: 24px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
text-align: center !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 40px !important;
}
/* Slider wrap — arrows sit outside the swiper via negative offsets */
.occ-bariatric-videos__slider-wrap {
position: relative;
overflow: visible;
}
.occ-bariatric-videos__swiper {
overflow: hidden;
}
/* Each slide link */
.occ-bariatric-videos__thumb-link {
display: block;
text-decoration: none;
color: inherit;
cursor: pointer;
}
/* Swiper-section play button: SVG already has its own circle, strip the CSS one */
.occ-bariatric-videos__slider-wrap .occ-bariatric-videos__play {
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* Thumbnail container — 16:9, rounded, no overflow clip so shadow shows */
.occ-bariatric-videos__thumb-wrap {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 20px;
overflow: hidden;
margin-bottom: 20px;
}
.occ-bariatric-videos__thumb-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.occ-bariatric-videos__thumb-link:hover .occ-bariatric-videos__thumb-wrap img {
transform: scale(1.04);
}
/* Play button — white circle with shadow, centered over thumbnail */
.occ-bariatric-videos__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90px;
height: 90px;
pointer-events: none;
transition: transform 0.2s ease;
}
.occ-bariatric-videos__play svg {
filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.28));
}
.occ-bariatric-videos__thumb-link:hover .occ-bariatric-videos__play {
transform: translate(-50%, -50%) scale(1.08);
}
/* Caption */
.occ-bariatric-videos__caption {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #474747 !important;
text-align: center !important;
margin: 0 !important;
}
/* Navigation arrows — centered on thumbnail midpoint, 22px outside content edges */
.occ-bariatric-videos__nav {
position: absolute;
top: 40%;
transform: translateY(-50%);
z-index: 10;
background: none;
border: none;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s ease;
line-height: 0;
}
.occ-bariatric-videos__nav--prev { left: -22px; }
.occ-bariatric-videos__nav--next { right: -22px; }
.occ-bariatric-videos__nav--disabled {
opacity: 0.35;
pointer-events: none;
}
/* ---- YouTube Modal ---- */
.occ-video-modal {
display: none;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 999999 !important;
align-items: center;
justify-content: center;
transform: none !important;
}
.occ-video-modal.is-open {
display: flex;
}
.occ-video-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.85);
}
.occ-video-modal__inner {
position: relative;
z-index: 1;
width: 90vw;
max-width: 920px;
aspect-ratio: 16 / 9;
}
.occ-video-modal__iframe {
width: 100%;
height: 100%;
border: none;
border-radius: 10px;
display: block;
}
.occ-video-modal__close {
position: absolute;
top: -46px;
right: 0;
background: none;
border: none;
color: #ffffff;
font-size: 36px;
line-height: 1;
cursor: pointer;
padding: 4px 8px;
transition: opacity 0.2s ease;
}
.occ-video-modal__close:hover { opacity: 0.75; }
@media (max-width: 767px) {
.occ-bariatric-videos { padding: 48px 0; }
.occ-bariatric-videos__title.wp-block-heading { font-size: 22px !important; margin: 0 0 28px !important;}
.occ-bariatric-videos__nav--prev { left: -12px; }
.occ-bariatric-videos__nav--next { right: -12px; }
.occ-bariatric-videos__caption { font-size: 16px !important; }
.occ-video-modal__inner { width: 95vw; }
}
/* ============================================================
Calorie Absorption — image left + text right (543:4262)
============================================================ */
.occ-bariatric-calorie {
padding: 0 0 80px 0;
background: #ffffff;
}
.occ-bariatric-calorie__cols.wp-block-columns {
gap: 62px !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
.occ-bariatric-calorie__img-col.wp-block-column {
flex: 0 0 550px !important;
max-width: 550px !important;
}
.occ-bariatric-calorie__img.wp-block-image {
margin: 0 !important;
}
.occ-bariatric-calorie__img.wp-block-image img {
border-radius: 20px !important;
height: 509px !important;
width: 100% !important;
object-fit: cover !important;
display: block !important;
}
.occ-bariatric-calorie__text-col.wp-block-column {
flex: 1 1 0 !important;
min-width: 0 !important;
}
.occ-bariatric-calorie__title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 0 16px !important;
}
.occ-bariatric-calorie__body.wp-block-paragraph {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 0 16px !important;
}
.occ-bariatric-calorie__body.wp-block-paragraph:last-child {
margin-bottom: 0 !important;
}
.occ-bariatric-calorie__body a {
color: #474747 !important;
text-decoration: underline !important;
}
.occ-bariatric-calorie__body a:hover {
color: #0052a3 !important;
}
@media (max-width: 767px) {
.occ-bariatric-calorie { padding: 0 0 48px 0; }
.occ-bariatric-calorie__cols.wp-block-columns { flex-wrap: wrap !important; gap: 32px !important; }
.occ-bariatric-calorie__img-col.wp-block-column { flex: 0 0 100% !important; max-width: 100% !important; }
.occ-bariatric-calorie__img.wp-block-image img { height: auto !important; aspect-ratio: 16/9 !important; }
.occ-bariatric-calorie__title.wp-block-heading { font-size: 26px !important; }
}
/* ============================================================
Additional References (543:4270) — 2-col link card grid
============================================================ */
.occ-bariatric-refs {
background: #f4f9ff;
padding: 80px 0;
}
.occ-bariatric-refs__inner {
/* constrained layout handles 1200px */
}
.occ-bariatric-refs__title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
text-align: center !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 24px !important;
}
.occ-bariatric-refs__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 24px;
row-gap: 16px;
}
.occ-bariatric-refs__card {
display: flex;
align-items: center;
gap: 12px;
background: #ffffff;
border: 1px solid #e5e5e3;
border-radius: 8px;
padding: 12px 20px;
text-decoration: none;
color: inherit;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
min-height: 48px;
}
.occ-bariatric-refs__card:hover {
border-color: #0066cc;
box-shadow: 0 2px 8px rgba(0, 102, 204, 0.12);
}
.occ-bariatric-refs__card--empty {
background: transparent;
border-color: transparent;
pointer-events: none;
}
.occ-bariatric-refs__card-title {
flex: 1 0 0;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.6;
color: #1a1a1a;
}
.occ-bariatric-refs__card-arrow {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 6px;
height: 12px;
}
@media (max-width: 1245px) {
.occ-bariatric-refs { padding: 80px 16px; }
}
@media (max-width: 767px) {
.occ-bariatric-refs { padding: 48px 16px; }
.occ-bariatric-refs__title.wp-block-heading { font-size: 24px !important; }
.occ-bariatric-refs__grid { grid-template-columns: 1fr; }
.occ-bariatric-refs__card--empty { display: none; }
}
/* ============================================================
Weight Loss Journey at OCC (543:4335) — dark blue card + watermark
============================================================ */
.occ-bariatric-journey {
padding: 80px 0;
background: #ffffff;
}
.occ-bariatric-journey__card {
position: relative;
background: #0c497e;
border-radius: 20px;
padding: 80px 64px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
overflow: hidden;
width: 100%;
box-sizing: border-box;
}
.occ-bariatric-journey__symbol {
position: absolute;
right: -40px;
top: -40px;
width: 174px;
height: 174px;
opacity: 0.05;
object-fit: contain;
object-position: bottom;
pointer-events: none;
user-select: none;
}
.occ-bariatric-journey__content {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
width: 100%;
position: relative;
z-index: 1;
}
.occ-bariatric-journey__title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 36px;
font-weight: 800;
line-height: 1.3;
color: #ffffff;
text-align: center;
margin: 0;
}
.occ-bariatric-journey__body {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #e8f0ff;
text-align: center;
margin: 0;
max-width: 780px;
}
@media (max-width: 767px) {
.occ-bariatric-journey { padding: 48px 0; }
.occ-bariatric-journey__card { padding: 48px 24px; }
.occ-bariatric-journey__title { font-size: 26px; }
}
/* ============================================================
Technique Info Cards (543:4427) — light blue bg, 3-col cards
============================================================ */
.occ-bariatric-technique {
background: #f4f9ff;
padding: 80px 0;
}
/* Force inner container to respect 1200px — prevents heading overflow */
.occ-bariatric-technique__inner.wp-block-group {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box !important;
width: 100% !important;
}
.occ-bariatric-technique__title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
text-align: center !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 16px !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
}
.occ-bariatric-technique__intro.wp-block-paragraph {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
text-align: center !important;
margin: 0 !important;
}
.occ-bariatric-technique__cards.wp-block-columns {
gap: 24px !important;
align-items: stretch !important;
margin-top: 24px !important;
}
.occ-bariatric-technique__card.wp-block-column {
background: #ffffff !important;
border: 1px solid #e5e5e3 !important;
border-radius: 12px !important;
padding: 32px !important;
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
.occ-bariatric-technique__card-title.wp-block-heading {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 !important;
}
.occ-bariatric-technique__card-subtitle.wp-block-paragraph {
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 !important;
}
.occ-bariatric-technique__card-body.wp-block-paragraph {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 !important;
}
@media (max-width: 767px) {
.occ-bariatric-technique { padding: 48px 0; }
.occ-bariatric-technique__title.wp-block-heading { font-size: 26px !important; }
.occ-bariatric-technique__cards.wp-block-columns { flex-direction: column !important; }
.occ-bariatric-technique__card.wp-block-column { flex-basis: 100% !important; }
}
/* ============================================================
IGS Video Section (543:4443) — video left + text right
============================================================ */
.occ-igs-video-section {
background: #ffffff;
padding: 80px 0;
}
.occ-igs-video-section__cols.wp-block-columns {
gap: 62px !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
.occ-igs-video-section__thumb-col.wp-block-column {
flex: 1 0 0 !important;
min-width: 0 !important;
}
.occ-igs-video-section__thumb-link {
display: block;
text-decoration: none;
cursor: pointer;
}
.occ-igs-video-section__thumb-wrap {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 20px;
overflow: hidden;
}
.occ-igs-video-section__thumb-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.occ-igs-video-section__thumb-link:hover .occ-igs-video-section__thumb-wrap img {
transform: scale(1.04);
}
.occ-igs-video-section__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90px;
height: 90px;
pointer-events: none;
transition: transform 0.2s ease;
}
.occ-igs-video-section__play svg {
filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.28));
}
.occ-igs-video-section__thumb-link:hover .occ-igs-video-section__play {
transform: translate(-50%, -50%) scale(1.08);
}
.occ-igs-video-section__text-col.wp-block-column {
flex: 0 0 588px !important;
max-width: 588px !important;
}
.occ-igs-video-section__title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 0 16px !important;
}
.occ-igs-video-section__body.wp-block-paragraph {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 !important;
}
@media (max-width: 767px) {
.occ-igs-video-section { padding: 48px 0; }
.occ-igs-video-section__cols.wp-block-columns { flex-wrap: wrap !important; gap: 32px !important; }
.occ-igs-video-section__thumb-col.wp-block-column { flex: 0 0 100% !important; }
.occ-igs-video-section__text-col.wp-block-column { flex: 0 0 100% !important; max-width: 100% !important; }
.occ-igs-video-section__title.wp-block-heading { font-size: 26px !important; }
}
/* ============================================================
OCC Difference (543:4453) — title left + checkmark list right
============================================================ */
.occ-occ-diff {
background: #ffffff;
padding: 0;
}
.occ-occ-diff__cols.wp-block-columns {
gap: 24px !important;
align-items: flex-start !important;
flex-wrap: nowrap !important;
}
/* Left column — 384px fixed */
.occ-occ-diff__left-col.wp-block-column {
flex: 0 0 384px !important;
max-width: 384px !important;
}
.occ-occ-diff__title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 0 16px !important;
}
.occ-occ-diff__intro.wp-block-paragraph {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 0 16px !important;
}
.occ-occ-diff__intro.wp-block-paragraph:last-child { margin-bottom: 0 !important; }
/* Right column — flex fill */
.occ-occ-diff__right-col.wp-block-column {
flex: 1 0 0 !important;
min-width: 0 !important;
}
/* List of items */
.occ-occ-diff__list {
display: flex;
flex-direction: column;
gap: 16px;
}
.occ-occ-diff__item {
background: #e8f0ff;
border-radius: 8px;
padding: 16px 12px;
display: flex;
gap: 12px;
align-items: flex-start;
overflow: hidden;
}
.occ-occ-diff__check {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.3;
color: #0066cc;
flex-shrink: 0;
white-space: nowrap;
}
.occ-occ-diff__text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #1a1a1a;
flex: 1 0 0;
min-width: 0;
margin: 0;
}
@media (max-width: 767px) {
.occ-occ-diff { padding: 0; }
.occ-occ-diff__cols.wp-block-columns { flex-wrap: wrap !important; }
.occ-occ-diff__left-col.wp-block-column { flex: 0 0 100% !important; max-width: 100% !important; }
.occ-occ-diff__title.wp-block-heading { font-size: 26px !important; }
}
/* ============================================================
Cost Section (543:4476) — text + infobox left, image right
============================================================ */
.occ-cost-section {
background: #ffffff;
padding: 80px 0;
}
.occ-cost-section__cols.wp-block-columns {
gap: 62px !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
/* Left column */
.occ-cost-section__text-col.wp-block-column {
flex: 0 0 588px !important;
max-width: 588px !important;
display: flex !important;
flex-direction: column !important;
gap: 30px !important;
}
.occ-cost-section__title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 !important;
}
.occ-cost-section__body.wp-block-paragraph {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 !important;
}
/* Infobox — left blue border callout */
.occ-cost-section__infobox {
background: #e8f0ff;
border-left: 2px solid #0066cc;
border-radius: 12px;
padding: 12px 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.occ-cost-section__infobox-label {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.6;
color: #1a1a1a;
margin: 0;
}
.occ-cost-section__infobox-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.3;
color: #0052a3;
margin: 0;
}
.occ-cost-section__infobox-body {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.6;
color: #1a1a1a;
margin: 0;
}
/* Right column — 550px image */
.occ-cost-section__img-col.wp-block-column {
flex: 0 0 550px !important;
max-width: 550px !important;
}
.occ-cost-section__img.wp-block-image {
margin: 0 !important;
}
.occ-cost-section__img.wp-block-image img {
border-radius: 20px !important;
width: 100% !important;
height: 509px !important;
object-fit: cover !important;
object-position: center top !important;
display: block !important;
}
@media (max-width: 767px) {
.occ-cost-section { padding: 48px 0; }
.occ-cost-section__cols.wp-block-columns { flex-wrap: wrap !important; gap: 32px !important; }
.occ-cost-section__text-col.wp-block-column { flex: 0 0 100% !important; max-width: 100% !important; }
.occ-cost-section__img-col.wp-block-column { flex: 0 0 100% !important; max-width: 100% !important; }
.occ-cost-section__img.wp-block-image img { height: auto !important; aspect-ratio: 4/3 !important; }
.occ-cost-section__title.wp-block-heading { font-size: 26px !important; }
}
/* ============================================================
WHAT WE OFFER IN OUR PROGRAMS (543:4488)
============================================================ */
.occ-what-offer {
background: #f4f9ff;
padding: 80px 0;
}
.occ-what-offer__inner.wp-block-group {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
gap: 40px !important;
}
.occ-what-offer__title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
color: #0052a3 !important;
text-align: center !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.occ-what-offer__subtitle.wp-block-heading {
font-size: 20px !important;
font-weight: 700 !important;
color: #0052a3 !important;
text-align: center !important;
width: 100% !important;
max-width: 100% !important;
margin: -20px 0 0 !important;
}
.occ-what-offer__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.occ-what-offer__card {
background: #ffffff;
border: 1px solid #e5e5e3;
border-radius: 8px;
padding: 16px 20px;
display: flex;
align-items: flex-start;
gap: 12px;
}
.occ-what-offer__check {
font-size: 20px;
font-weight: 700;
color: #0066cc;
flex-shrink: 0;
line-height: 1.4;
}
.occ-what-offer__card-text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 700;
color: #1a1a1a;
line-height: 1.5;
margin: 0;
}
.occ-what-offer__footer.wp-block-paragraph {
font-size: 16px !important;
font-weight: 400 !important;
color: #474747 !important;
text-align: center !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
@media (max-width: 900px) {
.occ-what-offer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.occ-what-offer {
padding: 48px 0;
}
.occ-what-offer__grid {
grid-template-columns: 1fr;
}
.occ-what-offer__title.wp-block-heading {
font-size: 26px !important;
}
}
/* ============================================================
BARIATRIC SURGERY FAQ VIDEOS (543:4513)
============================================================ */
.occ-faq-videos.wp-block-group {
padding: 80px 0; /* extra side room so absolute arrows don't clip */
}
.occ-faq-videos__heading {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 36px;
font-weight: 800;
color: #0052a3;
text-align: center;
margin: 0 0 40px;
line-height: 1.3;
}
/* ---- carousel wrapper: relative container, arrows float outside ---- */
.occ-faq-videos__carousel {
position: relative;
overflow: visible;
display: block;
}
.occ-faq-videos__swiper {
width: 100%;
min-width: 0;
overflow: hidden;
}
/* ---- arrows: absolutely positioned outside the swiper ---- */
.occ-faq-videos__arrow {
position: absolute;
top: 38%;
transform: translateY(-50%);
z-index: 10;
background: none;
border: none;
padding: 0;
cursor: pointer;
line-height: 0;
transition: opacity 0.2s;
}
.occ-faq-videos__arrow--prev { left: -22px; }
.occ-faq-videos__arrow--next { right: -22px; }
.occ-faq-videos__arrow--disabled {
opacity: 0.35;
pointer-events: none;
}
/* ---- card ---- */
.occ-faq-videos__card {
display: flex;
flex-direction: column;
gap: 16px;
text-decoration: none;
cursor: pointer;
}
.occ-faq-videos__card:hover .occ-faq-videos__thumb img {
transform: scale(1.03);
}
.occ-faq-videos__thumb {
position: relative;
aspect-ratio: 16/9;
border-radius: 20px;
overflow: hidden;
}
.occ-faq-videos__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.occ-faq-videos__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
border-radius: 50%;
background: #e8f0ff;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
transition: transform 0.2s ease, box-shadow 0.2s ease;
pointer-events: none;
}
.occ-faq-videos__play svg {
width: 24px;
height: 28px;
display: block;
margin-left: 3px; /* optical centering for play triangle */
}
.occ-faq-videos__card:hover .occ-faq-videos__play {
transform: translate(-50%, -50%) scale(1.08);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.occ-faq-videos__caption {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 20px;
font-weight: 700;
color: #474747;
text-align: center;
margin: 0;
line-height: 1.4;
}
/* ---- mobile nav (below carousel, hidden desktop) ---- */
.occ-faq-videos__mobile-nav {
display: none;
justify-content: center;
gap: 16px;
margin-top: 20px;
}
.occ-faq-videos__mobile-nav button {
background: none;
border: none;
padding: 0;
cursor: pointer;
line-height: 0;
position: relative;
top: inherit;
transform: none;
}
}
.occ-faq-videos__mobile-nav button.is-inactive {
opacity: 0.35;
pointer-events: none;
}
@media (max-width: 900px) {
.occ-faq-videos.wp-block-group {
padding: 60px 0;
}
}
@media (max-width: 767px) {
.occ-faq-videos.wp-block-group {
padding: 48px 0;
}
.occ-faq-videos__heading {
font-size: 26px;
margin-bottom: 28px;
}
.occ-faq-videos__mobile-nav {
display: flex;
}
.occ-faq-videos__caption {
font-size: 16px;
}
}
/* ============================================================
FAQ ACCORDION (543:4534)
============================================================ */
.occ-faq-section.wp-block-group {
background: #ffffff;
padding: 0;
}
.occ-faq-section__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.occ-faq-section__title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 36px;
font-weight: 800;
color: #0052a3;
text-align: center;
margin: 0;
line-height: 1.3;
}
/* ---- Tabs ---- */
.occ-faq-section__tabs {
display: flex;
align-items: stretch;
width: 100%;
}
.occ-faq-section__tab {
flex: 1 1 0;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.6;
padding: 12px 24px;
border: none;
cursor: pointer;
background: #e8f0ff;
color: #0066cc;
transition: background 0.2s, color 0.2s;
text-align: center;
}
.occ-faq-section__tab:first-child {
border-radius: 8px 0 0 8px;
}
.occ-faq-section__tab:last-child {
border-radius: 0 8px 8px 0;
}
.occ-faq-section__tab.is-active {
background: #0066cc;
color: #ffffff;
}
.occ-faq-section__tab:hover:not(.is-active) {
background: #d0e4ff;
}
/* ---- Panels ---- */
.occ-faq-section__panel {
display: none;
flex-direction: column;
gap: 20px;
width: 100%;
}
.occ-faq-section__panel.is-active {
display: flex;
}
/* ---- Accordion item ---- */
.occ-faq-item {
background: #ffffff;
border: 1px solid #e5e5e3;
border-radius: 10px;
overflow: hidden;
transition: box-shadow 0.2s;
}
.occ-faq-item.is-open {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}
.occ-faq-item__header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 28px;
background: none;
border: none;
cursor: pointer;
text-align: left;
}
.occ-faq-item__question {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 700;
color: #1a1a1a;
line-height: 1.4;
flex: 1 0 0;
}
.occ-faq-item__icon {
flex-shrink: 0;
line-height: 0;
transition: transform 0.25s ease;
}
.occ-faq-item.is-open .occ-faq-item__icon {
transform: rotate(180deg);
}
/* ---- Animated body ---- */
.occ-faq-item__body {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.occ-faq-item__divider {
height: 1px;
background: #e5e5e3;
margin: 0 28px;
}
.occ-faq-item__answer {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 400;
color: #474747;
line-height: 1.6;
padding: 16px 28px 20px;
}
.occ-faq-item__answer br {
display: block;
margin-top: 10px;
content: '';
}
.occ-faq-item__list {
margin: 0;
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.occ-faq-item__list li {
line-height: 1.6;
}
/* ============================================================
SCHEDULE CTA — FACILITY SLIDER (543:4565)
============================================================ */
.occ-schedule-cta {
background: #ffffff;
padding: 80px 0 0 0;
}
.occ-schedule-cta__constrained.wp-block-group {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.occ-schedule-cta__inner {
display: flex;
align-items: center;
gap: 24px;
}
/* ---- Left text column ---- */
.occ-schedule-cta__text {
flex: 1 0 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 24px;
}
.occ-schedule-cta__title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 36px;
font-weight: 800;
color: #0052a3;
line-height: 1.3;
margin: 0;
}
.occ-schedule-cta__body {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 400;
color: #474747;
line-height: 1.6;
margin: 0;
}
/* ---- Right slider column ---- */
.occ-schedule-cta__slider-col {
flex: 1 0 0;
min-width: 0;
padding: 0 22px;
}
.occ-schedule-cta__slider-wrap {
position: relative;
}
.occ-schedule-cta__swiper {
width: 100%;
overflow: hidden;
}
.occ-schedule-cta__img {
width: 100%;
height: 274px;
object-fit: cover;
border-radius: 20px;
display: block;
}
/* Arrows absolutely centred on image height, at outer edges */
.occ-schedule-cta__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
background: none;
border: none;
padding: 0;
cursor: pointer;
line-height: 0;
transition: opacity 0.2s;
}
.occ-schedule-cta__arrow--prev {
left: -22px;
}
.occ-schedule-cta__arrow--next {
right: -22px;
}
.occ-schedule-cta__arrow--disabled {
opacity: 0.35;
pointer-events: none;
}
@media (max-width: 900px) {
.occ-schedule-cta__inner {
flex-direction: column;
gap: 40px;
}
.occ-schedule-cta__text,
.occ-schedule-cta__slider-col {
flex: 0 0 100%;
width: 100%;
}
.occ-schedule-cta__title {
font-size: 26px;
}
.occ-schedule-cta__img {
height: 200px;
}
}
@media (max-width: 767px) {
.occ-faq-section.wp-block-group {
padding: 0;
}
.occ-schedule-cta {
background: #ffffff;
padding: 48px 0 0 0;
}
.occ-faq-section__title {
font-size: 26px;
}
.occ-faq-section__tabs {
flex-direction: column;
}
.occ-faq-section__tab:first-child {
border-radius: 8px 8px 0 0;
}
.occ-faq-section__tab:last-child {
border-radius: 0 0 8px 8px;
}
.occ-faq-item__header {
padding: 16px 20px;
}
.occ-faq-item__answer {
padding: 12px 20px 16px;
}
.occ-faq-item__divider {
margin: 0 20px;
}
.occ-faq-item__question {
font-size: 14px;
}
}
/* ============================================================
Bariatric Surgery Archive — /bariatric-surgery/ listing page
Figma node 551-8627
============================================================ */
.occ-bariatric-archive__listing {
padding: 80px 24px;
box-sizing: border-box;
}
/* 3-column card grid */
.occ-bariatric-archive__grid.wp-block-post-template {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 32px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Individual card */
.occ-bariatric-archive__card {
background: #ffffff !important;
border: 1px solid #e5e5e3 !important;
border-radius: 16px !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.occ-bariatric-archive__card:hover {
box-shadow: 0 8px 32px rgba(0, 82, 163, 0.12) !important;
transform: translateY(-3px);
}
/* Featured image */
.occ-bariatric-archive__card-img.wp-block-post-featured-image {
width: 100% !important;
margin: 0 !important;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.occ-bariatric-archive__card-img.wp-block-post-featured-image img,
.occ-bariatric-archive__card-img.wp-block-post-featured-image a {
width: 100% !important;
height: 100% !important;
display: block !important;
}
.occ-bariatric-archive__card-img.wp-block-post-featured-image img {
object-fit: cover !important;
transition: transform 0.35s ease;
}
.occ-bariatric-archive__card:hover .occ-bariatric-archive__card-img img {
transform: scale(1.04);
}
/* Card title */
.occ-bariatric-archive__card-title.wp-block-post-title {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 20px 24px 12px !important;
}
.occ-bariatric-archive__card-title a {
color: inherit !important;
text-decoration: none !important;
}
.occ-bariatric-archive__card-title a:hover {
color: #0066cc !important;
}
/* Excerpt */
.occ-bariatric-archive__card-excerpt.wp-block-post-excerpt {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 24px 0 !important;
flex: 1 1 auto !important;
}
.occ-bariatric-archive__card-excerpt .wp-block-post-excerpt__more-link {
display: inline-flex !important;
align-items: center !important;
margin-top: 16px !important;
margin-bottom: 24px !important;
padding: 10px 20px !important;
background: #0052a3 !important;
color: #ffffff !important;
font-weight: 600 !important;
font-size: 14px !important;
border-radius: 8px !important;
text-decoration: none !important;
transition: background 0.2s ease !important;
}
.occ-bariatric-archive__card-excerpt .wp-block-post-excerpt__more-link:hover {
background: #0066cc !important;
}
/* Empty state */
.occ-bariatric-archive__empty {
text-align: center;
color: #474747;
font-family: 'Plus Jakarta Sans', sans-serif;
padding: 40px 0;
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.occ-bariatric-archive__grid.wp-block-post-template {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 600px) {
.occ-bariatric-archive__listing { padding: 48px 20px; }
.occ-bariatric-archive__grid.wp-block-post-template {
grid-template-columns: 1fr !important;
}
}
/* ── Bariatric Archive — Procedures Grid ── */
.occ-bariatric-procedures {
width: 100%;
background: #f4f9ff;
padding: 80px 120px;
box-sizing: border-box;
}
.occ-bariatric-procedures__inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 30px;
}
.occ-bariatric-procedures__title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(26px, 2.5vw, 36px);
font-weight: 800;
line-height: 1.3;
color: #0052a3;
text-align: center;
margin: 0;
}
.occ-bariatric-procedures__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.occ-bariatric-procedures__card {
background: #ffffff;
border: 1px solid #e5e5e3;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
text-decoration: none;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.occ-bariatric-procedures__card:hover {
box-shadow: 0 8px 24px rgba(0, 82, 163, 0.12);
transform: translateY(-3px);
}
.occ-bariatric-procedures__card-img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
flex-shrink: 0;
}
.occ-bariatric-procedures__card-body {
display: flex;
flex-direction: column;
gap: 12px;
padding: 20px;
flex: 1;
}
.occ-bariatric-procedures__card-info {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.occ-bariatric-procedures__card-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.3;
color: #1a1a1a;
margin: 0;
}
.occ-bariatric-procedures__card-desc {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.6;
color: #474747;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.occ-bariatric-procedures__card-link {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.6;
color: #0066cc;
text-decoration: underline;
display: inline-block;
margin-top: auto;
}
.occ-bariatric-procedures__card:hover .occ-bariatric-procedures__card-link {
color: #0052a3;
}
@media (max-width: 1199px) {
.occ-bariatric-procedures { padding: 64px 40px; }
}
@media (max-width: 991px) {
.occ-bariatric-procedures__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
.occ-bariatric-procedures { padding: 48px 16px; }
.occ-bariatric-procedures__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.occ-bariatric-procedures__card-title { font-size: 17px; }
}
@media (max-width: 480px) {
.occ-bariatric-procedures__grid { grid-template-columns: 1fr; }
}
/* ── Bariatric Archive — Tagline (Personalized Treatment Plan) ── */
.occ-bariatric-tagline {
width: 100%;
background: #ffffff;
padding: 0 120px 80px;
box-sizing: border-box;
text-align: center;
}
.occ-bariatric-tagline__inner {
max-width: 996px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.occ-bariatric-tagline__title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(26px, 2.5vw, 36px);
font-weight: 800;
line-height: 1.3;
color: #0052a3;
margin: 0;
}
.occ-bariatric-tagline__body {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #474747;
margin: 0;
}
@media (max-width: 1199px) {
.occ-bariatric-tagline { padding: 0 40px 64px; }
}
@media (max-width: 600px) {
.occ-bariatric-tagline { padding: 0 16px 48px; }
.occ-bariatric-tagline__title { font-size: 24px; }
}
/* ── Bariatric Archive — Intro (30,000+ section) ── */
.occ-bariatric-intro {
width: 100%;
background: #ffffff;
padding: 80px 120px;
box-sizing: border-box;
}
.occ-bariatric-intro__inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 62px;
}
.occ-bariatric-intro__img-wrap {
flex: 0 0 550px;
height: 393px;
border-radius: 20px;
overflow: hidden;
}
.occ-bariatric-intro__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.occ-bariatric-intro__content {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.occ-bariatric-intro__title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(28px, 2.5vw, 36px);
font-weight: 800;
line-height: 1.3;
color: #0052a3;
margin: 0;
}
.occ-bariatric-intro__body {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #474747;
margin: 0;
}
.occ-bariatric-intro__btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: #0066cc;
color: #ffffff;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.6;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
transition: background 0.2s ease;
align-self: flex-start;
}
.occ-bariatric-intro__btn:hover {
background: #0052a3;
color: #ffffff;
}
@media (max-width: 1199px) {
.occ-bariatric-intro { padding: 64px 40px; }
.occ-bariatric-intro__img-wrap { flex: 0 0 420px; height: 320px; }
}
@media (max-width: 991px) {
.occ-bariatric-intro__inner { flex-direction: column; gap: 40px; }
.occ-bariatric-intro__img-wrap { flex: none; width: 100%; height: 300px; }
.occ-bariatric-intro__btn { align-self: stretch; text-align: center; }
}
@media (max-width: 600px) {
.occ-bariatric-intro { padding: 48px 16px; }
.occ-bariatric-intro__img-wrap { height: 240px; border-radius: 14px; }
.occ-bariatric-intro__title { font-size: 26px; }
}
/* ── Bariatric Archive — Dare to Compare ── */
.occ-dare-compare {
width: 100%;
background: #ffffff;
padding: 80px 120px 0;
box-sizing: border-box;
}
.occ-dare-compare__inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 30px;
}
.occ-dare-compare__title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(26px, 2.5vw, 36px);
font-weight: 800;
line-height: 1.3;
color: #0052a3;
text-align: center;
margin: 0;
}
.occ-dare-compare__wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.occ-dare-compare__table {
display: grid;
grid-template-columns: 171px repeat(6, 1fr);
min-width: 900px;
width: 100%;
}
.occ-dare-compare__row {
display: contents;
}
.occ-dare-compare__cell {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 24px;
border-bottom: 1px solid #c9c9c9;
text-align: center;
gap: 8px;
min-height: 76px;
box-sizing: border-box;
}
.occ-dare-compare__cell--label {
align-items: flex-start;
text-align: left;
background: #ffffff;
}
.occ-dare-compare__cell--hl {
background: #f4f9ff;
}
.occ-dare-compare__col-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.3;
color: #0c497e;
display: block;
}
.occ-dare-compare__col-sub {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.6;
color: #474747;
display: block;
white-space: nowrap;
}
.occ-dare-compare__col-sub--blue {
color: #0052a3;
}
.occ-dare-compare__row-label {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #0c497e;
margin: 0;
}
.occ-dare-compare__stars {
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
}
.occ-dare-compare__star {
width: 18px;
height: 18px;
fill: #f59e0b;
flex-shrink: 0;
}
.occ-dare-compare__na {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.6;
color: #999999;
}
@media (max-width: 1199px) {
.occ-dare-compare { padding: 64px 40px 0; }
}
@media (max-width: 767px) {
.occ-dare-compare { padding: 48px 16px 0; }
.occ-dare-compare__title { font-size: 26px; }
.occ-dare-compare__table { min-width: 700px; }
.occ-dare-compare__cell { padding: 14px 12px; }
.occ-dare-compare__col-title { font-size: 16px; }
}
/* ── Bariatric Archive — True Partner in Weight Loss ── */
.occ-partner.wp-block-group {
width: 100%;
max-width: none !important;
background: #ffffff;
padding: 80px 120px !important;
box-sizing: border-box;
}
/* Force columns to align vertically centered */
.occ-partner .wp-block-columns.is-vcentered {
align-items: center;
}
/* Left text column — gap between heading + paragraph */
.occ-partner .wp-block-column .wp-block-heading {
margin-bottom: 16px;
}
/* Right image column — fill height, rounded */
.occ-partner .wp-block-image img {
width: 100%;
height: 440px;
object-fit: cover;
display: block;
border-radius: 20px !important;
}
.occ-partner .wp-block-image figure,
.occ-partner .wp-block-image {
margin: 0;
border-radius: 20px;
overflow: hidden;
}
/* Inline link colour inside the paragraph */
.occ-partner .wp-block-paragraph a {
color: #0066cc;
text-decoration: underline;
}
@media (max-width: 1199px) {
.occ-partner.wp-block-group { padding: 64px 40px !important; }
}
@media (max-width: 767px) {
.occ-partner.wp-block-group { padding: 48px 16px !important; }
.occ-partner .wp-block-image img { height: 280px; }
}
/* ── Bariatric Archive — Three Phases of Weight Loss ── */
.occ-weight-phases.wp-block-group {
width: 100%;
max-width: none !important;
padding: 80px 120px !important;
box-sizing: border-box;
}
/* Equal-height cards */
.occ-weight-phases .wp-block-columns {
align-items: stretch;
}
.occ-weight-phases .wp-block-column {
display: flex;
flex-direction: column;
}
.occ-weight-phases .wp-block-column > .wp-block-group {
flex: 1;
}
/* Gap between heading and paragraph inside each card */
.occ-weight-phases .wp-block-column .wp-block-heading {
margin-bottom: 0;
}
/* Gap between section title and subtitle */
.occ-weight-phases > .wp-block-heading {
margin-bottom: 24px;
}
.occ-weight-phases > p {
margin-bottom: 24px;
}
@media (max-width: 1199px) {
.occ-weight-phases.wp-block-group { padding: 64px 40px !important; }
}
@media (max-width: 767px) {
.occ-weight-phases.wp-block-group { padding: 48px 16px !important; }
}
/* ── Bariatric Archive — Nutrition & Lifestyle ── */
.occ-nutrition.wp-block-group {
width: 100%;
max-width: none !important;
background: #ffffff;
padding: 80px 120px !important;
box-sizing: border-box;
}
.occ-nutrition .wp-block-columns.is-vcentered {
align-items: center;
}
/* Image: fill height, rounded corners */
.occ-nutrition .wp-block-image img {
width: 100%;
height: 400px;
object-fit: cover;
display: block;
border-radius: 20px !important;
}
.occ-nutrition .wp-block-image,
.occ-nutrition .wp-block-image figure {
margin: 0;
border-radius: 20px;
overflow: hidden;
}
/* Gap between heading and paragraph */
.occ-nutrition .wp-block-column .wp-block-heading {
margin-bottom: 16px;
}
/* Gap between paragraph and button */
.occ-nutrition .wp-block-column .wp-block-paragraph {
margin-bottom: 16px;
}
/* CTA button */
.occ-nutrition .wp-block-button__link {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.6 !important;
background-color: #0066cc !important;
color: #ffffff !important;
border-radius: 8px !important;
padding: 12px 24px !important;
text-decoration: none !important;
transition: background 0.2s ease !important;
box-shadow: none !important;
}
.occ-nutrition .wp-block-button__link:hover {
background-color: #0052a3 !important;
}
@media (max-width: 1199px) {
.occ-nutrition.wp-block-group { padding: 64px 40px !important; }
}
@media (max-width: 767px) {
.occ-nutrition.wp-block-group { padding: 48px 16px !important; }
.occ-nutrition .wp-block-image img { height: 280px; }
}
/* ============================================================
OCC NUTRITIONAL COUNSELING SUPPORT (551-8867)
============================================================ */
/* Outer section */
.occ-counseling.wp-block-group {
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 120px !important;
padding-right: 120px !important;
background-color: #ffffff !important;
}
/* Dark hero card */
.occ-counseling__hero.wp-block-group {
position: relative !important;
overflow: hidden !important;
}
.occ-counseling__hero .wp-block-heading,
.occ-counseling__hero .wp-block-paragraph {
position: relative;
z-index: 1;
max-width: 820px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.occ-counseling__hero .wp-block-paragraph {
margin-top: 20px !important;
}
/* Info cards — equal height columns */
.occ-counseling .wp-block-columns {
align-items: stretch !important;
}
.occ-counseling .wp-block-column {
display: flex !important;
flex-direction: column !important;
align-self: stretch !important;
}
.occ-counseling__card.wp-block-group {
flex: 1 1 auto !important;
height: 100% !important;
box-sizing: border-box !important;
}
.occ-counseling__card .wp-block-heading {
margin-bottom: 16px !important;
}
/* Tablet */
@media (max-width: 1199px) {
.occ-counseling.wp-block-group {
padding: 0 40px !important;
}
.occ-counseling__hero.wp-block-group {
padding: 48px 40px !important;
}
}
/* Mobile */
@media (max-width: 767px) {
.occ-counseling.wp-block-group {
padding: 0 16px !important;
}
.occ-counseling__hero.wp-block-group {
padding: 48px 16px !important;
}
.occ-counseling__hero .wp-block-heading {
font-size: 26px !important;
}
.occ-counseling .wp-block-columns {
flex-direction: column !important;
}
}
/* ============================================================
OCC VIDEO SECTION — Meet Dr. Ariel Ortiz (551-8883)
============================================================ */
.occ-video-section {
background-color: #ffffff;
padding-top: 80px;
padding-bottom: 80px;
}
.occ-video-section__inner {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 120px;
padding-right: 120px;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.occ-video-section__title {
font-size: 36px;
font-weight: 800;
line-height: 1.3;
color: #0052a3;
text-align: center;
margin: 0;
}
/* Thumbnail wrapper */
.occ-video-section__thumb-wrap {
position: relative;
width: 100%;
border-radius: 20px;
overflow: hidden;
aspect-ratio: 836 / 470;
cursor: pointer;
}
.occ-video-section__thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 20px;
transition: transform 0.4s ease;
}
.occ-video-section__thumb-wrap:hover .occ-video-section__thumb {
transform: scale(1.03);
}
/* Play button */
.occ-video-section__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90px;
height: 90px;
background: none;
border: none;
padding: 0;
cursor: pointer;
z-index: 2;
transition: transform 0.2s ease;
}
.occ-video-section__play:hover {
transform: translate(-50%, -50%) scale(1.1);
}
.occ-video-section__play-icon {
width: 90px;
height: 90px;
filter: drop-shadow(0 4px 16px rgba(0,0,0,0.25));
}
/* ── Video Lightbox Modal — scoped to bariatric archive only ── */
.occ-bs-video-modal {
display: none;
position: fixed;
inset: 0;
z-index: 99999;
align-items: center;
justify-content: center;
}
.occ-bs-video-modal.is-open {
display: flex;
}
.occ-bs-video-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.85);
cursor: pointer;
}
.occ-bs-video-modal__container {
position: relative;
z-index: 1;
width: 90vw;
max-width: 960px;
}
.occ-bs-video-modal__close {
position: absolute;
top: -44px;
right: 0;
background: none;
border: none;
cursor: pointer;
padding: 8px;
line-height: 1;
opacity: 0.85;
transition: opacity 0.2s;
}
.occ-bs-video-modal__close:hover {
opacity: 1;
}
.occ-bs-video-modal__iframe-wrap {
position: relative;
padding-bottom: 56.25%;
height: 0;
border-radius: 12px;
overflow: hidden;
background: #000;
}
.occ-bs-video-modal__iframe-wrap iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
}
/* Lock body scroll when modal open */
body.occ-bs-modal-open {
overflow: hidden !important;
}
/* Tablet */
@media (max-width: 1199px) {
.occ-video-section__inner {
padding-left: 40px;
padding-right: 40px;
}
}
/* Mobile */
@media (max-width: 767px) {
.occ-video-section {
padding-top: 48px;
padding-bottom: 48px;
}
.occ-video-section__inner {
padding-left: 16px;
padding-right: 16px;
gap: 20px;
}
.occ-video-section__title {
font-size: 24px;
}
.occ-video-section__play {
width: 64px;
height: 64px;
}
.occ-video-section__play-icon {
width: 64px;
height: 64px;
}
.occ-bs-video-modal__container {
width: 95vw;
}
}
/* ============================================================
OCC ADDITIONAL REFERENCES (551-8890)
============================================================ */
/* Outer wp:group — full width, no max-width override (same pattern as occ-weight-phases) */
.occ-references.wp-block-group {
width: 100%;
max-width: none !important;
padding: 80px 120px !important;
box-sizing: border-box;
}
/* Heading — Gutenberg renders this, just enforce margin */
.occ-references > .wp-block-heading {
margin-bottom: 8px !important;
}
/* 2-column grid */
.occ-references__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px 24px;
width: 100%;
}
/* Link card */
.occ-references__card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background-color: #ffffff;
border: 1px solid #e5e5e3;
border-radius: 8px;
padding: 12px 20px;
text-decoration: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.occ-references__card:hover {
border-color: #0066cc;
box-shadow: 0 2px 12px rgba(0, 102, 204, 0.12);
}
.occ-references__card-text {
font-size: 14px;
font-weight: 700;
line-height: 1.6;
color: #1a1a1a;
flex: 1 0 0;
min-width: 0;
}
.occ-references__card:hover .occ-references__card-text {
color: #0052a3;
}
/* Chevron — rotated upward from Figma, displayed as right-pointing */
.occ-references__chevron {
flex-shrink: 0;
transform: rotate(90deg);
transition: transform 0.2s ease;
}
.occ-references__card:hover .occ-references__chevron {
transform: rotate(90deg) translateX(-2px);
}
/* Tablet */
@media (max-width: 1199px) {
.occ-references.wp-block-group { padding: 64px 40px !important; }
}
/* Mobile */
@media (max-width: 767px) {
.occ-references.wp-block-group { padding: 48px 16px !important; }
.occ-references__grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
PATIENT INFO ARCHIVE — Intro Section (Figma 951-4575)
============================================================ */
/* Section — full-width with constrained inner columns */
.occ-patient-info-intro.wp-block-group {
padding: 80px 120px !important;
box-sizing: border-box;
}
/* Columns block inside intro: enforce gap and vertical center */
.occ-patient-info-intro .wp-block-columns {
gap: 62px !important;
align-items: center !important;
}
/* Intro image */
.occ-patient-info-intro__img.wp-block-image {
margin: 0 !important;
line-height: 0;
max-width: none !important;
}
.occ-patient-info-intro__img.wp-block-image img {
width: 100%;
height: auto;
display: block;
border-radius: 20px;
margin: 0 !important;
}
@media (max-width: 1199px) {
.occ-patient-info-intro.wp-block-group { padding: 64px 40px !important; }
}
@media (max-width: 767px) {
.occ-patient-info-intro.wp-block-group { padding: 48px 16px !important; }
.occ-patient-info-intro .wp-block-columns { gap: 32px !important; }
}
/* ============================================================
PATIENT INFO ARCHIVE — Cards Grid (Figma 951-4501)
Specs: 3-col, card 384x425px, img 262px, gap col 24px / row 30px
Body padding 20px, gap 12px | Title 20px/700 | Desc 14px/2-line
============================================================ */
/* ── Section wrapper ──────────────────────────────────────── */
/* contentSize:1200px in block attrs handles centering.
We only set vertical padding here; no horizontal padding needed. */
.occ-pi-section.wp-block-group {
padding: 0 120px;
}
/* ── Grid wrapper ─────────────────────────────────────────── */
/* Override Gutenberg is-layout-flow. contentSize:1200px on parent
already constrains this to max-width:1200px + margin:auto. */
.occ-pi-cards-wrap.wp-block-group {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
column-gap: 24px !important;
row-gap: 30px !important;
padding: 0 !important;
/* Explicit constraint to match Figma 1200px content width */
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
box-sizing: border-box;
}
/* Kill Gutenberg is-layout-flow margin-block-start on every grid child */
.occ-pi-cards-wrap.wp-block-group > * {
margin-block-start: 0 !important;
margin-block-end: 0 !important;
/* Do NOT set margin-left/right auto here — grid handles placement */
margin-left: 0 !important;
margin-right: 0 !important;
/* Do NOT override max-width here — 1fr column width handles sizing */
width: 100% !important;
box-sizing: border-box;
}
/* ── Individual card ──────────────────────────────────────── */
.occ-pi-card.wp-block-group {
display: flex !important;
flex-direction: column !important;
background-color: #ffffff !important;
border: 1px solid #e5e5e3 !important;
border-radius: 20px !important;
overflow: hidden !important;
/* min-height so single-line-title cards aren't too short;
height is auto so 2-line titles don't crush the description.
CSS grid stretch ensures all cards in a row stay equal height. */
height: auto !important;
min-height: 425px !important;
padding: 0 !important;
box-sizing: border-box;
gap:0;
}
/* ── Card image ───────────────────────────────────────────── */
.occ-pi-card__image.wp-block-image {
flex-shrink: 0 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0;
display: block !important;
max-width: none !important;
width: 100% !important;
}
.occ-pi-card__image.wp-block-image img {
width: 100% !important;
height: 262px !important;
object-fit: cover !important;
object-position: center top !important;
display: block !important;
border-radius: 0 !important;
margin: 0 !important;
}
/* ── Card body ────────────────────────────────────────────── */
.occ-pi-card__body.wp-block-group {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
padding: 20px !important;
gap: 12px !important;
max-width: none !important;
width: 100% !important;
/* overflow: visible so 2-line titles don't clip the description */
overflow: visible !important;
box-sizing: border-box;
}
/* Kill flow margins inside card body */
.occ-pi-card__body.wp-block-group > * {
margin-block-start: 0 !important;
margin-block-end: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: none !important;
width: 100% !important;
}
/* ── Card title ───────────────────────────────────────────── */
.occ-pi-card__title.wp-block-heading {
font-size: 20px !important;
font-weight: 700 !important;
color: #1a1a1a !important;
line-height: 1.3 !important;
margin: 0 !important;
padding: 0 !important;
}
/* ── Card description — 2-line clamp ─────────────────────── */
.occ-pi-card__desc {
font-size: 14px !important;
font-weight: 400 !important;
color: #474747 !important;
line-height: 22.4px !important;
margin: 0 !important;
padding: 0 !important;
/* No fixed height — let the line-clamp decide the height.
A fixed height was clipping the description when the title
wrapped to 2 lines (title took extra space, desc had ~25px left).
flex-shrink: 0 keeps the description from being squeezed further. */
flex-shrink: 0 !important;
overflow: hidden !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
}
/* ── Know More ────────────────────────────────────────────── */
.occ-pi-card__know-more {
margin-top: auto !important;
margin-bottom: 0 !important;
padding: 0 !important;
line-height: 0;
flex-shrink: 0;
}
.occ-pi-card__know-more a {
font-size: 14px !important;
font-weight: 700 !important;
color: #0066cc !important;
text-decoration: underline !important;
text-decoration-color: #0066cc !important;
text-underline-offset: 2px;
line-height: 22.4px !important;
display: inline-block;
transition: color 0.2s;
}
.occ-pi-card__know-more a:hover {
color: #0052a3 !important;
}
/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1199px) {
.occ-pi-section.wp-block-group {
padding: 0 40px;
}
}
@media (max-width: 1024px) {
.occ-pi-cards-wrap.wp-block-group {
grid-template-columns: repeat(2, 1fr) !important;
}
.occ-pi-card.wp-block-group {
height: auto !important;
min-height: 400px;
}
}
@media (max-width: 767px) {
.occ-pi-section.wp-block-group {
padding: 0 16px;
}
}
@media (max-width: 600px) {
.occ-pi-section.wp-block-group {
padding: 0 16px;
}
.occ-pi-cards-wrap.wp-block-group {
grid-template-columns: 1fr !important;
row-gap: 20px !important;
}
.occ-pi-card.wp-block-group {
height: auto !important;
min-height: unset;
}
.occ-pi-card__image.wp-block-image img {
height: 200px !important;
}
.occ-pi-card.wp-block-group{min-height: unset !important;}
}
/* ══════════════════════════════════════════════════════════════
FINANCING DETAIL PAGE — Payment Options Section
Figma node 978-5000 — "Choose What Works for You"
3-column payment card grid: Card Pay | US Bank Transfer | Financing
══════════════════════════════════════════════════════════════ */
/* ── Section wrapper — full-width, matches listing page rhythm ── */
.occ-fin-section.wp-block-group {
padding: 80px 120px !important;
box-sizing: border-box;
width: 100%;
}
/* ── Header: title + subtitle, center-aligned ─────────────── */
.occ-fin-header.wp-block-group {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 16px !important;
margin-bottom: 30px !important;
width: 100% !important;
max-width: none !important;
}
.occ-fin-header.wp-block-group > * {
margin-block-start: 0 !important;
margin-block-end: 0 !important;
max-width: none !important;
}
.occ-fin-title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
text-align: center !important;
margin: 0 !important;
padding: 0 !important;
}
.occ-fin-subtitle {
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #474747 !important;
text-align: center !important;
margin: 0 !important;
padding: 0 !important;
}
/* ── Cards columns container ───────────────────────────────── */
.occ-fin-cards.wp-block-columns {
gap: 24px !important;
align-items: stretch !important;
margin-block-start: 0 !important;
margin-block-end: 0 !important;
flex-wrap: nowrap !important;
}
/* ── Individual card (wp:column) ───────────────────────────── */
.occ-fin-card.wp-block-column {
background: #fefefe !important;
border: 1px solid #e5e5e3 !important;
border-radius: 20px !important;
padding: 24px !important;
box-shadow: 0 0 20px rgba(26, 26, 26, 0.10) !important;
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
flex: 1 1 0 !important;
box-sizing: border-box;
overflow: hidden !important;
}
.occ-fin-card.wp-block-column > * {
margin-block-start: 0 !important;
margin-block-end: 0 !important;
}
/* ── Featured card (3rd — blue bg) ────────────────────────── */
.occ-fin-card--featured.wp-block-column {
background: #0052a3 !important;
border: none !important;
box-shadow: none !important;
}
/* ── Card icon (50×50) ─────────────────────────────────────── */
.occ-fin-card__icon.wp-block-image {
flex-shrink: 0 !important;
margin: 0 !important;
line-height: 0;
max-width: none !important;
width: 50px !important;
}
.occ-fin-card__icon.wp-block-image img {
width: 50px !important;
height: 50px !important;
object-fit: contain !important;
display: block !important;
margin: 0 !important;
}
/* ── Card text group (title + description, gap 12px) ───────── */
.occ-fin-card__text.wp-block-group {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
max-width: none !important;
width: 100% !important;
}
.occ-fin-card__text.wp-block-group > * {
margin-block-start: 0 !important;
margin-block-end: 0 !important;
max-width: none !important;
}
/* ── Card title (h3) ───────────────────────────────────────── */
.occ-fin-card__title.wp-block-heading {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 !important;
padding: 0 !important;
}
.occ-fin-card--featured .occ-fin-card__title.wp-block-heading {
color: #f4f9ff !important;
}
/* ── Card description ──────────────────────────────────────── */
.occ-fin-card__desc {
font-size: 14px !important;
font-weight: 400 !important;
line-height: 22.4px !important;
color: #474747 !important;
margin: 0 !important;
padding: 0 !important;
}
.occ-fin-card--featured .occ-fin-card__desc {
color: #e8f0ff !important;
}
/* ── Checklist (wp:list) ───────────────────────────────────── */
.occ-fin-card__list.wp-block-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.occ-fin-card__list.wp-block-list li {
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 22.4px !important;
color: #1a1a1a !important;
list-style: none !important;
padding-left: 0 !important;
margin: 0 !important;
}
.occ-fin-card__list.wp-block-list li::before {
content: "✓";
color: #0066cc !important;
font-weight: 700 !important;
font-size: 20px !important;
line-height: 26px !important;
flex-shrink: 0 !important;
}
.occ-fin-card--featured .occ-fin-card__list.wp-block-list li {
color: #ffffff !important;
}
.occ-fin-card--featured .occ-fin-card__list.wp-block-list li::before {
color: #e8f0ff !important;
}
/* ── Responsive — mirrors listing page breakpoints ─────────── */
@media (max-width: 1199px) {
.occ-fin-section.wp-block-group { padding: 64px 40px !important; }
.occ-fin-cards.wp-block-columns { gap: 20px !important; }
}
@media (max-width: 767px) {
.occ-fin-section.wp-block-group { padding: 48px 16px !important; }
.occ-fin-cards.wp-block-columns { flex-direction: column !important; gap: 16px !important; }
.occ-fin-card.wp-block-column { flex: none !important; width: 100% !important; }
.occ-fin-title.wp-block-heading { font-size: 28px !important; }
}
/* ══════════════════════════════════════════════════════════════
Heva Store iframe section — Financing detail page
(Figma node 979-13646)
══════════════════════════════════════════════════════════════ */
.occ-heva-section.wp-block-group {
padding: 0 120px !important;
box-sizing: border-box;
width: 100%;
max-width: none !important;
}
/* ── Header row: title+subtitle left, "Open in New Tab" right ── */
.occ-heva-header.wp-block-group {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: space-between !important;
align-items: flex-end !important;
margin-bottom: 24px !important;
width: 100% !important;
gap: 16px !important;
}
/* Gutenberg injects is-layout-flex wrappers — neutralise inner flow */
.occ-heva-header.wp-block-group > .wp-block-group {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
margin: 0 !important;
}
.occ-heva-title.wp-block-heading {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #1a1a1a !important;
margin: 0 !important;
}
.occ-heva-subtitle {
font-size: 14px !important;
font-weight: 400 !important;
color: #474747 !important;
margin: 0 !important;
line-height: 1.6 !important;
}
.occ-heva-newtab {
font-size: 14px !important;
font-weight: 700 !important;
margin: 0 !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
}
.occ-heva-newtab a {
color: #0066cc !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
}
.occ-heva-newtab a:hover {
color: #0052a3 !important;
}
/* ── Iframe container ── */
.occ-heva-iframe-wrap {
width: 100%;
border-radius: 22px;
border: 1px solid #c9c9c9;
overflow: hidden;
background: #ffffff;
box-sizing: border-box;
}
.occ-heva-iframe-wrap iframe {
display: block;
width: 100%;
height: 813px;
border: none;
}
/* ── Responsive ── */
@media (max-width: 1199px) {
.occ-heva-section.wp-block-group { padding: 0 40px !important; }
}
@media (max-width: 767px) {
.occ-heva-section.wp-block-group { padding: 0 16px !important; }
.occ-heva-header.wp-block-group { flex-wrap: wrap !important; gap: 12px !important; }
.occ-heva-iframe-wrap iframe { height: 800px; }
}
/* ══════════════════════════════════════════════════════════════
Loved Ones detail page — intro paragraph section
(Figma node 987-5683)
══════════════════════════════════════════════════════════════ */
.occ-loved-intro.wp-block-group {
padding: 80px 120px !important;
box-sizing: border-box;
width: 100%;
max-width: none !important;
}
.occ-loved-intro__text {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
text-align: center !important;
max-width: 996px !important;
margin-left: auto !important;
margin-right: auto !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
@media (max-width: 1199px) {
.occ-loved-intro.wp-block-group { padding: 64px 40px !important; }
}
@media (max-width: 767px) {
.occ-loved-intro.wp-block-group { padding: 48px 16px !important; }
.occ-loved-intro__text { text-align: left !important; }
}
/* ══════════════════════════════════════════════════════════════
Loved Ones — Image + Text "Helping Your Loved One" section
(Figma node 988-6947)
══════════════════════════════════════════════════════════════ */
.occ-loved-helping-section.wp-block-group,
.occ-loved-helping-section.wp-block-group.has-global-padding {
padding: 0 120px 0 !important;
box-sizing: border-box;
width: 100%;
max-width: none !important;
margin-top: 0 !important;
}
/* columns row: 62px gap, vertically centred */
.occ-loved-helping-cols.wp-block-columns {
gap: 62px !important;
align-items: center !important;
flex-wrap: nowrap !important;
margin: 0 auto;
}
/* image column */
.occ-loved-helping-img-col.wp-block-column {
flex: 0 0 46% !important;
max-width: 46% !important;
}
.occ-loved-helping-img.wp-block-image {
margin: 0 !important;
line-height: 0 !important;
}
.occ-loved-helping-img.wp-block-image img {
width: 100% !important;
height: 393px !important;
object-fit: cover !important;
border-radius: 20px !important;
display: block !important;
}
/* text column */
.occ-loved-helping-text-col.wp-block-column {
max-width: 52% !important;
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
justify-content: center !important;
}
.occ-loved-helping-title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 !important;
}
.occ-loved-helping-text {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 !important;
}
/* ── Responsive ── */
@media (max-width: 1199px) {
.occ-loved-helping-section.wp-block-group { padding: 0 40px 0 !important; }
.occ-loved-helping-cols.wp-block-columns { gap: 40px !important; }
.occ-loved-helping-section.wp-block-group,
.occ-loved-helping-section.wp-block-group.has-global-padding {
padding: 0 40px 0 !important;
}
}
@media (max-width: 767px) {
.occ-loved-helping-section.wp-block-group { padding: 0 16px 0 !important; }
.occ-loved-helping-cols.wp-block-columns { flex-wrap: wrap !important; gap: 24px !important; }
.occ-loved-helping-img-col.wp-block-column,
.occ-loved-helping-text-col.wp-block-column { flex: none !important; max-width: 100% !important; width: 100% !important; }
.occ-loved-helping-img.wp-block-image img { height: 260px !important; }
.occ-loved-helping-title.wp-block-heading { font-size: 26px !important; }
.occ-loved-helping-section.wp-block-group,
.occ-loved-helping-section.wp-block-group.has-global-padding {
padding: 0 16px 0 !important;
}
}
/* ══════════════════════════════════════════════════════════════
Loved Ones — Compassion & Respect dark card section
(Figma node 988-6955)
══════════════════════════════════════════════════════════════ */
/* outer section: horizontal gutters only, no vertical padding
(the card's own py-80 provides the breathing room) */
.occ-compassion-section.wp-block-group {
padding: 0 120px 80px !important;
box-sizing: border-box;
width: 100%;
max-width: none !important;
}
/* dark blue card — overflow: visible so symbol can peek out of the corner */
.occ-compassion-card.wp-block-group {
position: relative !important;
background: #0c497e !important;
border-radius: 20px !important;
padding: 80px 64px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 24px !important;
overflow: visible !important;
width: 100% !important;
max-width: 1200px !important;
margin: 0 auto;
box-sizing: border-box !important;
}
/* let all content children use the full card width — no extra max-width */
.occ-compassion-card.wp-block-group > * {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* decorative watermark symbol — top-right, overflows card corner at -40px */
.occ-compassion-card__symbol {
position: absolute !important;
top: -40px !important;
right: -40px !important;
width: 174px !important;
height: 174px !important;
object-fit: contain !important;
opacity: 0.05 !important;
pointer-events: none !important;
/* take out of width/margin inheritance */
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.occ-compassion-title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #ffffff !important;
text-align: center !important;
margin: 0 0 8px !important;
width: 100% !important;
}
.occ-compassion-text {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #e8f0ff !important;
text-align: center !important;
margin: 0 !important;
width: 100% !important;
}
/* ── Responsive ── */
@media (max-width: 1199px) {
.occ-compassion-section.wp-block-group { padding: 0 40px 64px !important; }
.occ-compassion-card.wp-block-group { padding: 64px 40px !important; }
}
@media (max-width: 767px) {
.occ-compassion-section.wp-block-group { padding: 0 16px 48px !important; }
.occ-compassion-card.wp-block-group { padding: 48px 24px !important; }
.occ-compassion-title.wp-block-heading { font-size: 26px !important; text-align: center !important; }
.occ-compassion-text { text-align: center !important; }
.occ-compassion-card__symbol { width: 100px !important; height: 100px !important; top: -20px !important; right: -20px !important; }
}
/* ══════════════════════════════════════════════════════════════
Loved Ones — 2-column info cards section
(Figma node 988-6983)
══════════════════════════════════════════════════════════════ */
.occ-loved-tips-section.wp-block-group,
.occ-loved-tips-section.wp-block-group.has-global-padding {
padding: 80px 120px 80px !important;
box-sizing: border-box;
width: 100%;
max-width: none !important;
}
/* neutralise Gutenberg auto top-margin between sections */
.occ-loved-tips-section.wp-block-group {
margin-top: 0 !important;
}
/* two equal columns, 24px gap, equal height */
.occ-loved-tips-cols.wp-block-columns {
gap: 24px !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
}
/* each card */
.occ-loved-tip-card.wp-block-column {
background: #f4f9ff !important;
border-radius: 20px !important;
padding: 32px !important;
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
flex: 1 1 0 !important;
}
.occ-loved-tip-card__title.wp-block-heading {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #1a1a1a !important;
margin: 0 !important;
}
.occ-loved-tip-card__text {
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 !important;
}
.occ-loved-tip-card__text a {
color: #474747 !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
}
/* ── Responsive ── */
@media (max-width: 1199px) {
.occ-loved-tips-section.wp-block-group { padding: 64px 40px !important; }
.occ-loved-tips-section.wp-block-group,
.occ-loved-tips-section.wp-block-group.has-global-padding {
padding: 64px 40px 64px !important;
}
}
@media (max-width: 767px) {
.occ-loved-tips-section.wp-block-group { padding: 48px 16px !important; }
.occ-loved-tips-cols.wp-block-columns { flex-wrap: wrap !important; }
.occ-loved-tip-card.wp-block-column { flex: none !important; width: 100% !important; }
.occ-loved-tip-card__title.wp-block-heading { font-size: 20px !important; }
.occ-loved-tips-section.wp-block-group,
.occ-loved-tips-section.wp-block-group.has-global-padding { padding: 48px 16px !important; }
}
/* ══════════════════════════════════════════════════════════════
Loved Ones — Emotional impact section
(Figma node 988-7032)
Reference: same container pattern as occ-loved-intro
px-120px py-80px, constrained 1200px
══════════════════════════════════════════════════════════════ */
/* ── matches occ-loved-intro exactly ── */
.occ-loved-emotional-section.wp-block-group,
.occ-loved-emotional-section.wp-block-group.has-global-padding {
padding: 0 120px !important;
box-sizing: border-box;
width: 100%;
max-width: 1440px !important;
margin: 0 auto!important;
}
.occ-loved-emotional-title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 0 16px !important;
}
.occ-loved-emotional-text {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #3b4344 !important;
margin: 0 !important;
}
@media (max-width: 1199px) {
.occ-loved-emotional-section.wp-block-group,
.occ-loved-emotional-section.wp-block-group.has-global-padding { padding: 0 40px !important; }
}
@media (max-width: 767px) {
.occ-loved-emotional-section.wp-block-group,
.occ-loved-emotional-section.wp-block-group.has-global-padding { padding: 0 16px !important; }
.occ-loved-emotional-title.wp-block-heading { font-size: 26px !important; }
}
/* ══════════════════════════════════════════════════════════════
Loved Ones — Dos & Don'ts dark card section
(Figma node 988-7553)
Outer container: identical to occ-loved-emotional-section
══════════════════════════════════════════════════════════════ */
.occ-loved-dos-section.wp-block-group,
.occ-loved-dos-section.wp-block-group.has-global-padding {
padding: 80px 120px !important;
box-sizing: border-box;
width: 100%;
max-width: none !important;
margin-top: 0 !important;
}
.occ-loved-dos-card.wp-block-group {
background: #0c497e !important;
border-radius: 20px !important;
padding: 40px !important;
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.occ-loved-dos-header.wp-block-group {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 16px !important;
width: 100% !important;
}
.occ-loved-dos-title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #ffffff !important;
text-align: center !important;
margin: 0 !important;
width: 100% !important;
}
.occ-loved-dos-subtitle {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #e8f0ff !important;
text-align: center !important;
margin: 0 !important;
}
.occ-loved-dos-row.wp-block-columns {
gap: 24px !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
margin: 0 !important;
}
.occ-loved-dos-item.wp-block-column {
background: rgba(255, 255, 255, 0.10) !important;
border: 2px solid rgba(255, 255, 255, 0.25) !important;
border-radius: 16px !important;
padding: 20px !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
flex: 1 1 0 !important;
}
.occ-loved-dos-item__title.wp-block-heading {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #ffffff !important;
margin: 0 !important;
}
.occ-loved-dos-item__text {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #f9f9f7 !important;
margin: 0 !important;
}
@media (max-width: 1199px) {
.occ-loved-dos-section.wp-block-group,
.occ-loved-dos-section.wp-block-group.has-global-padding { padding: 64px 40px !important; }
.occ-loved-dos-card.wp-block-group { padding: 32px !important; }
}
@media (max-width: 767px) {
.occ-loved-dos-section.wp-block-group,
.occ-loved-dos-section.wp-block-group.has-global-padding { padding: 48px 16px !important; }
.occ-loved-dos-card.wp-block-group { padding: 24px !important; }
.occ-loved-dos-row.wp-block-columns { flex-wrap: wrap !important; }
.occ-loved-dos-item.wp-block-column { flex: none !important; width: 100% !important; }
.occ-loved-dos-title.wp-block-heading { font-size: 26px !important; }
.occ-loved-dos-item__title.wp-block-heading { font-size: 20px !important; }
}
/* ==========================================================================
occ-loved-support-section — Supporting Your Loved One (Figma 988-7263)
Mirrors occ-loved-helping-section: image left 46% / text right 52%, gap 62px
========================================================================== */
.occ-loved-support-section.wp-block-group,
.occ-loved-support-section.wp-block-group.has-global-padding {
padding: 0 120px !important;
width: 100% !important;
max-width: none !important;
margin-top: 0 !important;
box-sizing: border-box;
}
.occ-loved-support-cols.wp-block-columns {
gap: 62px !important;
align-items: center !important;
flex-wrap: nowrap !important;
margin: 0 auto !important;
}
/* Image column — fixed width, no shrink (same as helping section) */
.occ-loved-support-img-col.wp-block-column {
flex: 0 0 46% !important;
max-width: 46% !important;
}
.occ-loved-support-img.wp-block-image {
margin: 0 !important;
line-height: 0 !important;
}
.occ-loved-support-img.wp-block-image img {
width: 100% !important;
height: 393px !important;
object-fit: cover !important;
border-radius: 20px !important;
display: block !important;
}
/* Text column — flexible, fills remaining space */
.occ-loved-support-text-col.wp-block-column {
max-width: 52% !important;
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
justify-content: center !important;
}
.occ-loved-support-title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 !important;
}
.occ-loved-support-text {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 !important;
}
@media (max-width: 1199px) {
.occ-loved-support-section.wp-block-group,
.occ-loved-support-section.wp-block-group.has-global-padding { padding: 0 40px !important; }
.occ-loved-support-cols.wp-block-columns { gap: 40px !important; }
.occ-loved-support-img.wp-block-image img { height: 320px !important; }
}
@media (max-width: 767px) {
.occ-loved-support-section.wp-block-group,
.occ-loved-support-section.wp-block-group.has-global-padding { padding: 0 16px !important; }
.occ-loved-support-cols.wp-block-columns { flex-wrap: wrap !important; gap: 24px !important; }
.occ-loved-support-img-col.wp-block-column,
.occ-loved-support-text-col.wp-block-column { flex: none !important; max-width: 100% !important; width: 100% !important; }
.occ-loved-support-img.wp-block-image img { height: 240px !important; }
.occ-loved-support-title.wp-block-heading { font-size: 26px !important; }
}
/* ==========================================================================
occ-supportive-section — Be Supportive (Figma 988-7292)
Dark-blue card, centred title + body, same structure as occ-compassion-section
========================================================================== */
.occ-supportive-section.wp-block-group {
padding: 80px 120px !important;
width: 100% !important;
max-width: none !important;
margin-top: 0 !important;
box-sizing: border-box;
}
.occ-supportive-card.wp-block-group {
background: #0c497e !important;
border-radius: 20px !important;
padding: 80px 64px !important;
position: relative !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 16px !important;
max-width: 1200px;
width: 100% !important;
margin: 0 auto;
box-sizing: border-box !important;
}
/* Decorative watermark — absolute top-right, 5 % opacity */
.occ-supportive-card__symbol.wp-block-image {
position: absolute !important;
top: -40px !important;
right: -40px !important;
width: 174px !important;
height: 174px !important;
margin: 0 !important;
line-height: 0 !important;
pointer-events: none !important;
}
.occ-supportive-card__symbol.wp-block-image img {
width: 174px !important;
height: 174px !important;
object-fit: cover !important;
opacity: 0.05 !important;
display: block !important;
}
.occ-supportive-title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #ffffff !important;
text-align: center !important;
margin: 0 !important;
}
.occ-supportive-text {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #e8f0ff !important;
text-align: center !important;
margin: 0 auto !important;
}
@media (max-width: 1199px) {
.occ-supportive-section.wp-block-group { padding: 64px 40px !important; }
.occ-supportive-card.wp-block-group { padding: 64px 40px !important; }
}
@media (max-width: 767px) {
.occ-supportive-section.wp-block-group { padding: 48px 16px !important; }
.occ-supportive-card.wp-block-group { padding: 48px 16px !important; gap: 12px !important; }
.occ-supportive-card__symbol.wp-block-image { display: none !important; }
.occ-supportive-title.wp-block-heading { font-size: 26px !important; }
}
/* ==========================================================================
occ-loved-team-section — Get Help from Our Team at OCC (Figma 988-7353)
Light-blue bg, text-left / image-right row + callout box below
Container reference: occ-loved-dos-section (constrained/1200px, 80px 120px)
========================================================================== */
.occ-loved-team-section.wp-block-group,
.occ-loved-team-section.wp-block-group.has-global-padding {
padding: 80px 120px !important;
width: 100% !important;
max-width: none !important;
margin-top: 0 !important;
box-sizing: border-box;
background: #f4f9ff !important;
}
/* ── Top row: text left + image right ── */
.occ-loved-team-cols.wp-block-columns {
gap: 62px !important;
align-items: center !important;
flex-wrap: nowrap !important;
margin: 0 auto !important;
}
/* Text column — grows to fill remaining space */
.occ-loved-team-text-col.wp-block-column {
flex: 1 1 0 !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
justify-content: center !important;
}
.occ-loved-team-title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 !important;
}
.occ-loved-team-intro {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #3b4344 !important;
margin: 0 !important;
}
/* Image column — fixed 550px wide */
.occ-loved-team-img-col.wp-block-column {
flex: 0 0 550px !important;
max-width: 550px !important;
min-width: 0 !important;
}
.occ-loved-team-img.wp-block-image {
margin: 0 !important;
line-height: 0 !important;
}
.occ-loved-team-img.wp-block-image img {
width: 100% !important;
height: 350px !important;
object-fit: cover !important;
border-radius: 20px !important;
display: block !important;
}
/* ── Callout box ── */
.occ-loved-team-callout.wp-block-group {
background: #e8f0ff !important;
border-left: 3px solid #006cc0 !important;
border-radius: 12px !important;
padding: 32px !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
width: 100% !important;
box-sizing: border-box !important;
margin-top: 50px !important;
}
.occ-loved-team-callout__title.wp-block-heading {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 !important;
}
.occ-loved-team-callout__text {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #3b4344 !important;
margin: 0 !important;
}
/* ── Responsive ── */
@media (max-width: 1199px) {
.occ-loved-team-section.wp-block-group,
.occ-loved-team-section.wp-block-group.has-global-padding { padding: 64px 40px !important; }
.occ-loved-team-img-col.wp-block-column { flex: 0 0 420px !important; max-width: 420px !important; }
.occ-loved-team-img.wp-block-image img { height: 280px !important; }
.occ-loved-team-cols.wp-block-columns { gap: 40px !important; }
}
@media (max-width: 767px) {
.occ-loved-team-section.wp-block-group,
.occ-loved-team-section.wp-block-group.has-global-padding { padding: 48px 16px !important; }
.occ-loved-team-cols.wp-block-columns { flex-wrap: wrap !important; gap: 24px !important; }
.occ-loved-team-text-col.wp-block-column,
.occ-loved-team-img-col.wp-block-column { flex: none !important; max-width: 100% !important; width: 100% !important; }
.occ-loved-team-img.wp-block-image img { height: 240px !important; }
.occ-loved-team-callout.wp-block-group { padding: 24px !important; margin-top: 32px !important; }
.occ-loved-team-title.wp-block-heading { font-size: 26px !important; }
.occ-loved-team-callout__title.wp-block-heading { font-size: 20px !important; }
}
/* ==========================================================================
occ-loved-record-section — Two info cards (Figma 988-7391)
Two equal cards, gap 24px, light bg + border — same container as dos-section
Figma: pt-80px, px-120px, no bottom padding (footer-cta provides spacing)
========================================================================== */
.occ-loved-record-section.wp-block-group,
.occ-loved-record-section.wp-block-group.has-global-padding {
padding: 80px 120px 0 !important;
width: 100% !important;
max-width: none !important;
margin-top: 0 !important;
box-sizing: border-box;
}
/* Columns row — equal width, 24px gap, stretch height */
.occ-loved-record-cols.wp-block-columns {
gap: 24px !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
margin: 0 auto !important;
}
/* Each card column — align-self:stretch overrides Gutenberg's is-vertically-aligned-top */
.occ-loved-record-card.wp-block-column,
.occ-loved-record-card.wp-block-column.is-vertically-aligned-top {
flex: 1 1 0 !important;
min-width: 0 !important;
align-self: stretch !important;
background: #f9f9f7 !important;
border: 1px solid #e5e5e3 !important;
border-radius: 20px !important;
padding: 32px !important;
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
box-sizing: border-box !important;
}
.occ-loved-record-card__title.wp-block-heading {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #1a1a1a !important;
margin: 0 !important;
}
.occ-loved-record-card__text {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 !important;
}
/* ── Responsive ── */
@media (max-width: 1199px) {
.occ-loved-record-section.wp-block-group,
.occ-loved-record-section.wp-block-group.has-global-padding { padding: 64px 40px 0 !important; }
}
@media (max-width: 767px) {
.occ-loved-record-section.wp-block-group,
.occ-loved-record-section.wp-block-group.has-global-padding { padding: 48px 16px 0 !important; }
.occ-loved-record-cols.wp-block-columns { flex-wrap: wrap !important; flex-direction: column; }
.occ-loved-record-card.wp-block-column { flex: none !important; width: 100% !important; }
.occ-loved-record-card__title.wp-block-heading { font-size: 20px !important; }
}
/* ==========================================================================
occ-referral-intro-section — The OCC "Tell a Friend" Program (Figma 1040-8723)
Image left 550px / text right — same container as occ-loved-dos-section
========================================================================== */
.occ-referral-intro-section.wp-block-group,
.occ-referral-intro-section.wp-block-group.has-global-padding {
padding: 80px 120px !important;
width: 100% !important;
max-width: none !important;
margin-top: 0 !important;
box-sizing: border-box;
}
/* Columns row */
.occ-referral-intro-cols.wp-block-columns {
gap: 62px !important;
align-items: center !important;
flex-wrap: nowrap !important;
margin: 0 auto !important;
}
/* Image column — fixed 550px, no shrink */
.occ-referral-intro-img-col.wp-block-column {
flex: 0 0 550px !important;
max-width: 550px !important;
min-width: 0 !important;
}
.occ-referral-intro-img.wp-block-image {
margin: 0 !important;
line-height: 0 !important;
}
.occ-referral-intro-img.wp-block-image img {
width: 100% !important;
height: 440px !important;
object-fit: cover !important;
border-radius: 20px !important;
display: block !important;
}
/* Text column — fills remaining space */
.occ-referral-intro-text-col.wp-block-column {
flex: 1 1 0 !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
justify-content: center !important;
}
.occ-referral-intro-title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 !important;
}
.occ-referral-intro-text {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 !important;
}
/* Button */
.occ-referral-intro-btns.wp-block-buttons {
margin: 4px 0 0 !important;
}
.occ-referral-intro-btn .wp-block-button__link {
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.6 !important;
background-color: #006cc0 !important;
color: #ffffff !important;
border-radius: 8px !important;
padding: 12px 24px !important;
text-decoration: none !important;
display: inline-block !important;
transition: background-color 0.2s ease !important;
}
.occ-referral-intro-btn .wp-block-button__link:hover {
background-color: #0052a3 !important;
}
/* ── Responsive ── */
@media (max-width: 1199px) {
.occ-referral-intro-section.wp-block-group,
.occ-referral-intro-section.wp-block-group.has-global-padding { padding: 64px 40px !important; }
.occ-referral-intro-img-col.wp-block-column { flex: 0 0 420px !important; max-width: 50% !important; }
.occ-referral-intro-img.wp-block-image img { height: 360px !important; }
.occ-referral-intro-cols.wp-block-columns { gap: 40px !important; }
.occ-referral-intro-title.wp-block-heading,.occ-referral-about-title.wp-block-heading{font-size: 30px !important;}
}
@media (max-width: 767px) {
.occ-referral-intro-section.wp-block-group,
.occ-referral-intro-section.wp-block-group.has-global-padding { padding: 48px 16px !important; }
.occ-referral-intro-cols.wp-block-columns { flex-wrap: wrap !important; gap: 24px !important; }
.occ-referral-intro-img-col.wp-block-column,
.occ-referral-intro-text-col.wp-block-column { flex: none !important; max-width: 100% !important; width: 100% !important; }
.occ-referral-intro-img.wp-block-image img { height: 260px !important; }
.occ-referral-intro-title.wp-block-heading { font-size: 26px !important; }
}
/* ==========================================================================
occ-referral-about-section — Our Referral Program at OCC (Figma 1040-8230)
Text left (title + subtitle + body) / Image right 550×431px
Container: same as occ-referral-intro-section (80px 120px, constrained/1200px)
========================================================================== */
.occ-referral-about-section.wp-block-group,
.occ-referral-about-section.wp-block-group.has-global-padding {
padding: 0 120px 80px !important;
width: 100% !important;
max-width: none !important;
margin-top: 0 !important;
box-sizing: border-box;
}
/* Columns row */
.occ-referral-about-cols.wp-block-columns {
gap: 62px !important;
align-items: center !important;
flex-wrap: nowrap !important;
margin: 0 auto !important;
}
/* Text column — fills remaining space */
.occ-referral-about-text-col.wp-block-column {
flex: 1 1 0 !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
justify-content: center !important;
}
.occ-referral-about-title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 !important;
}
.occ-referral-about-subtitle.wp-block-heading {
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #1a1a1a !important;
margin: 0 !important;
}
.occ-referral-about-text {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 !important;
}
/* Image column — fixed 550px, no shrink */
.occ-referral-about-img-col.wp-block-column {
flex: 0 0 550px !important;
max-width: 550px !important;
min-width: 0 !important;
}
.occ-referral-about-img.wp-block-image {
margin: 0 !important;
line-height: 0 !important;
}
.occ-referral-about-img.wp-block-image img {
width: 100% !important;
height: 431px !important;
object-fit: cover !important;
border-radius: 20px !important;
display: block !important;
}
/* ── Responsive ── */
@media (max-width: 1199px) {
.occ-referral-about-section.wp-block-group,
.occ-referral-about-section.wp-block-group.has-global-padding { padding: 0 40px 64px !important; }
.occ-referral-about-img-col.wp-block-column { flex: 0 0 420px !important; max-width: 50% !important; }
.occ-referral-about-img.wp-block-image img { height: 340px !important; }
.occ-referral-about-cols.wp-block-columns { gap: 40px !important; }
.occ-referral-about-title.wp-block-heading { font-size: 30px !important; }
}
@media (max-width: 767px) {
.occ-referral-about-section.wp-block-group,
.occ-referral-about-section.wp-block-group.has-global-padding { padding: 0 16px 48px !important; }
.occ-referral-about-cols.wp-block-columns { flex-wrap: wrap !important; gap: 24px !important; }
.occ-referral-about-text-col.wp-block-column,
.occ-referral-about-img-col.wp-block-column { flex: none !important; max-width: 100% !important; width: 100% !important; }
.occ-referral-about-img.wp-block-image img { height: 260px !important; }
.occ-referral-about-title.wp-block-heading { font-size: 26px !important; }
.occ-referral-about-subtitle.wp-block-heading { font-size: 18px !important; }
.wp-block-columns.occ-referral-about-cols.mobile-reverse.is-layout-flex { flex-direction: column-reverse;}
}
/* ==========================================================================
occ-referral-inner-section — Inner Circle Program (Figma 1040-8817)
Dark-blue card, centred title + body + watermark — same pattern as
occ-supportive-section. Outer section: px-120px only, card handles py.
========================================================================== */
.occ-referral-inner-section.wp-block-group {
padding: 0 120px 80px !important;
width: 100% !important;
max-width: none !important;
margin-top: 0 !important;
box-sizing: border-box;
}
.occ-referral-inner-card.wp-block-group {
background: #0c497e !important;
border-radius: 20px !important;
padding: 80px 64px !important;
position: relative !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 16px !important;
max-width: 1200px;
width: 100% !important;
margin: 0 auto;
box-sizing: border-box !important;
}
/* Watermark symbol — absolute top-right, 5% opacity */
.occ-referral-inner-card__symbol.wp-block-image {
position: absolute !important;
top: -40px !important;
right: -40px !important;
width: 174px !important;
height: 174px !important;
margin: 0 !important;
line-height: 0 !important;
pointer-events: none !important;
}
.occ-referral-inner-card__symbol.wp-block-image img {
width: 174px !important;
height: 174px !important;
object-fit: cover !important;
opacity: 0.05 !important;
display: block !important;
}
.occ-referral-inner-title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #ffffff !important;
text-align: center !important;
margin: 0 !important;
}
.occ-referral-inner-text {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #e8f0ff !important;
text-align: center !important;
margin: 0 auto !important;
}
/* ── Responsive ── */
@media (max-width: 1199px) {
.occ-referral-inner-section.wp-block-group { padding: 0 40px 64px !important; }
.occ-referral-inner-card.wp-block-group { padding: 64px 40px !important; }
}
@media (max-width: 767px) {
.occ-referral-inner-section.wp-block-group { padding: 0 16px 48px !important; }
.occ-referral-inner-card.wp-block-group { padding: 40px 24px !important; gap: 12px !important; }
.occ-referral-inner-card__symbol.wp-block-image { display: none !important; }
.occ-referral-inner-title.wp-block-heading { font-size: 26px !important; }
}
/* ==========================================================================
occ-referral-instructions-section — Detailed Instructions (Figma 1040-8826)
Image left 550×496 / Text right: title + 2×2 check grid + button
========================================================================== */
.occ-referral-instructions-section.wp-block-group,
.occ-referral-instructions-section.wp-block-group.has-global-padding {
padding: 0 120px !important;
width: 100% !important;
max-width: none !important;
margin-top: 0 !important;
box-sizing: border-box;
}
/* Columns */
.occ-referral-instructions-cols.wp-block-columns {
gap: 62px !important;
align-items: center !important;
flex-wrap: nowrap !important;
margin: 0 auto !important;
}
/* Image column — fixed 550px */
.occ-referral-instructions-img-col.wp-block-column {
flex: 0 0 550px !important;
max-width: 550px !important;
min-width: 0 !important;
}
.occ-referral-instructions-img.wp-block-image {
margin: 0 !important;
line-height: 0 !important;
}
.occ-referral-instructions-img.wp-block-image img {
width: 100% !important;
height: 496px !important;
object-fit: cover !important;
border-radius: 20px !important;
display: block !important;
}
/* Text column — fills remaining space */
.occ-referral-instructions-text-col.wp-block-column {
flex: 1 1 0 !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
justify-content: center !important;
}
.occ-referral-instructions-title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 !important;
}
/* 2×2 check-item grid */
.occ-referral-instructions-grid.wp-block-group {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
width: 100% !important;
}
.occ-referral-instructions-item.wp-block-group {
background: #e8f0ff !important;
border-radius: 8px !important;
padding: 8px 12px !important;
flex: 0 0 calc(50% - 5px) !important;
max-width: calc(50% - 5px) !important;
gap: 12px !important;
align-items: flex-start !important;
box-sizing: border-box !important;
min-height: 90px !important;
}
.occ-referral-instructions-check {
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #0066cc !important;
flex-shrink: 0 !important;
margin: 0 !important;
}
.occ-referral-instructions-text {
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #1a1a1a !important;
margin: 0 !important;
flex: 1 !important;
}
/* Button */
.occ-referral-instructions-btns.wp-block-buttons {
margin: 4px 0 0 !important;
}
.occ-referral-instructions-btn .wp-block-button__link {
font-size: 14px !important;
font-weight: 700 !important;
background-color: #006cc0 !important;
color: #ffffff !important;
border-radius: 8px !important;
padding: 12px 24px !important;
text-decoration: none !important;
white-space: nowrap !important;
transition: background-color 0.2s ease !important;
}
.occ-referral-instructions-btn .wp-block-button__link:hover {
background-color: #0052a3 !important;
}
/* ── Responsive ── */
@media (max-width: 1199px) {
.occ-referral-instructions-section.wp-block-group,
.occ-referral-instructions-section.wp-block-group.has-global-padding { padding: 0 40px !important; }
.occ-referral-instructions-img-col.wp-block-column { flex: 0 0 420px !important; max-width: 420px !important; }
.occ-referral-instructions-img.wp-block-image img { height: 380px !important; }
.occ-referral-instructions-cols.wp-block-columns { gap: 40px !important; }
}
@media (max-width: 767px) {
.occ-referral-instructions-section.wp-block-group,
.occ-referral-instructions-section.wp-block-group.has-global-padding { padding: 0 16px !important; }
.occ-referral-instructions-cols.wp-block-columns { flex-wrap: wrap !important; gap: 24px !important; }
.occ-referral-instructions-img-col.wp-block-column,
.occ-referral-instructions-text-col.wp-block-column { flex: none !important; max-width: 100% !important; width: 100% !important; }
.occ-referral-instructions-img.wp-block-image img { height: 260px !important; }
.occ-referral-instructions-title.wp-block-heading { font-size: 26px !important; }
.occ-referral-instructions-item.wp-block-group { flex: 0 0 100% !important; max-width: 100% !important; }
.occ-referral-instructions-btn .wp-block-button__link { white-space: normal !important; }
}
/* ==========================================================================
occ-referral-privacy-section — Privacy Policy Statement (Figma 1040-8879)
Text intro block + 2 dark-blue equal cards, gap 40px between parts
========================================================================== */
.occ-referral-privacy-section.wp-block-group,
.occ-referral-privacy-section.wp-block-group.has-global-padding {
padding: 80px 120px 0 !important;
width: 100% !important;
max-width: none !important;
margin-top: 0 !important;
box-sizing: border-box;
}
/* ── Part 1: Intro text block ── */
.occ-referral-privacy-intro.wp-block-group {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
width: 100% !important;
}
.occ-referral-privacy-title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 !important;
}
.occ-referral-privacy-intro-text {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #3b4344 !important;
margin: 0 !important;
}
.occ-referral-privacy-subtitle.wp-block-heading {
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #1a1a1a !important;
margin: 0 !important;
}
.occ-referral-privacy-body {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 !important;
}
/* ── Part 2: Dark-blue cards row ── */
.occ-referral-privacy-cards.wp-block-columns {
gap: 24px !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
margin: 24px auto 0 !important; /* 40px gap from intro block */
}
/* Each dark-blue card — align-self:stretch overrides is-vertically-aligned-top */
.occ-referral-privacy-card.wp-block-column,
.occ-referral-privacy-card.wp-block-column.is-vertically-aligned-top {
flex: 1 1 0 !important;
min-width: 0 !important;
align-self: stretch !important;
background: #0c497e !important;
border-radius: 20px !important;
padding: 32px !important;
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
box-sizing: border-box !important;
}
.occ-referral-privacy-card__title.wp-block-heading {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #ffffff !important;
margin: 0 !important;
}
.occ-referral-privacy-card__text {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #f9f9f7 !important;
margin: 0 !important;
}
/* ── Responsive ── */
@media (max-width: 1199px) {
.occ-referral-privacy-section.wp-block-group,
.occ-referral-privacy-section.wp-block-group.has-global-padding { padding: 64px 40px 0 !important; }
}
@media (max-width: 767px) {
.occ-referral-privacy-section.wp-block-group,
.occ-referral-privacy-section.wp-block-group.has-global-padding { padding: 48px 16px 0 !important; }
.occ-referral-privacy-cards.wp-block-columns { flex-wrap: wrap !important; }
.occ-referral-privacy-card.wp-block-column,
.occ-referral-privacy-card.wp-block-column.is-vertically-aligned-top { flex: none !important; width: 100% !important; }
.occ-referral-privacy-title.wp-block-heading { font-size: 26px !important; }
.occ-referral-privacy-card__title.wp-block-heading { font-size: 20px !important; }
}
/* ==========================================================================
occ-next-steps-price-section — All-Inclusive Price (Figma 1039-5717)
Centered title + subtitle + 3-column check-item grid (17 items)
========================================================================== */
.occ-next-steps-price-section.wp-block-group,
.occ-next-steps-price-section.wp-block-group.has-global-padding {
padding: 80px 120px !important;
width: 100% !important;
max-width: none !important;
margin-top: 0 !important;
box-sizing: border-box;
}
/* Header — centred title + subtitle, 16px gap, 30px below */
.occ-next-steps-price-header.wp-block-group {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 16px !important;
width: 100% !important;
margin-bottom: 30px !important;
}
.occ-next-steps-price-title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
text-align: center !important;
margin: 0 !important;
}
.occ-next-steps-price-subtitle {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
text-align: center !important;
margin: 0 !important;
}
/* 3-column flex-wrap grid, 24px gap */
.occ-next-steps-price-grid.wp-block-group {
display: flex !important;
flex-wrap: wrap !important;
gap: 24px !important;
width: 100% !important;
align-items: stretch !important;
}
/* Each check item — 3 per row */
.occ-next-steps-price-item.wp-block-group {
background: #e8f0ff !important;
border-radius: 8px !important;
padding: 12px !important;
flex: 0 0 calc(33.333% - 16px) !important;
max-width: calc(33.333% - 16px) !important;
gap: 12px !important;
align-items: center !important;
box-sizing: border-box !important;
min-height: 50px !important;
}
.occ-next-steps-price-check {
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #0066cc !important;
flex-shrink: 0 !important;
margin: 0 !important;
white-space: nowrap !important;
}
.occ-next-steps-price-text {
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.6 !important;
color: #1a1a1a !important;
margin: 0 !important;
flex: 1 !important;
}
/* ── Responsive ── */
@media (max-width: 1199px) {
.occ-next-steps-price-section.wp-block-group,
.occ-next-steps-price-section.wp-block-group.has-global-padding { padding: 64px 40px !important; }
.occ-next-steps-price-item.wp-block-group { flex: 0 0 calc(50% - 12px) !important; max-width: calc(50% - 12px) !important; }
}
@media (max-width: 767px) {
.occ-next-steps-price-section.wp-block-group,
.occ-next-steps-price-section.wp-block-group.has-global-padding { padding: 48px 16px !important; }
.occ-next-steps-price-item.wp-block-group { flex: 0 0 100% !important; max-width: 100% !important; }
.occ-next-steps-price-title.wp-block-heading { font-size: 26px !important; }
}
/* ==========================================================================
occ-next-steps-passport-section — Do I Need a Passport? (Figma 1040-6557)
Light-blue bg; Row1: text+image; Row2: body paras; Row3: 3 price cards
========================================================================== */
.occ-next-steps-passport-section.wp-block-group,
.occ-next-steps-passport-section.wp-block-group.has-global-padding {
padding: 80px 120px !important;
width: 100% !important;
max-width: none !important;
margin-top: 0 !important;
background: #f4f9ff !important;
box-sizing: border-box;
}
/* ── Row 1: Columns ── */
.occ-next-steps-passport-cols.wp-block-columns {
gap: 62px !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
margin: 0 auto !important;
}
/* Text column — fills space, flex col gap 30px */
.occ-next-steps-passport-text-col.wp-block-column {
flex: 1 1 0 !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 30px !important;
}
.occ-next-steps-passport-title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 !important;
}
.occ-next-steps-passport-body-text {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 !important;
}
.occ-next-steps-passport-body-text a { color: #0052a3 !important; text-decoration: underline !important; }
/* Callout box — left blue border */
.occ-next-steps-passport-callout.wp-block-group {
background: #e8f0ff !important;
border-left: 2px solid #0066cc !important;
border-radius: 12px !important;
padding: 12px 20px !important;
width: 100% !important;
}
.occ-next-steps-passport-callout__text {
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 !important;
}
/* Image column — fixed 550px, stretches full height */
.occ-next-steps-passport-img-col.wp-block-column {
flex: 0 0 550px !important;
max-width: 550px !important;
min-width: 0 !important;
align-self: stretch !important;
}
.occ-next-steps-passport-img.wp-block-image {
margin: 0 !important;
line-height: 0 !important;
height: 100% !important;
}
.occ-next-steps-passport-img.wp-block-image img {
width: 100% !important;
height: 100% !important;
min-height: 420px !important;
object-fit: cover !important;
border-radius: 20px !important;
display: block !important;
}
/* ── Row 2: Info paragraphs ── */
.occ-next-steps-passport-info.wp-block-group {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
width: 100% !important;
margin-top: 50px !important;
}
.occ-next-steps-passport-info-text {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 !important;
}
.occ-next-steps-passport-info-text a { color: #0052a3 !important; text-decoration: underline !important; }
/* ── Row 3: Passport price cards ── */
.occ-next-steps-passport-cards.wp-block-columns {
gap: 24px !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
width: 100% !important;
margin: 50px auto 0 !important;
}
.occ-next-steps-passport-card.wp-block-column,
.occ-next-steps-passport-card.wp-block-column.is-vertically-aligned-top {
flex: 1 1 0 !important;
min-width: 0 !important;
align-self: stretch !important;
background: #ffffff !important;
border: 1px solid #e5e5e3 !important;
border-radius: 12px !important;
padding: 16px !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
box-sizing: border-box !important;
}
/* Card header: name left / price right */
.occ-next-steps-passport-card__header.wp-block-group {
width: 100% !important;
justify-content: space-between !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap;
}
.occ-next-steps-passport-card__name {
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #1a1a1a !important;
margin: 0 !important;
white-space: nowrap !important;
}
.occ-next-steps-passport-card__price {
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 !important;
white-space: nowrap !important;
}
.occ-next-steps-passport-card__desc {
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 !important;
}
/* ── Responsive ── */
@media (max-width: 1199px) {
.occ-next-steps-passport-section.wp-block-group,
.occ-next-steps-passport-section.wp-block-group.has-global-padding { padding: 64px 40px !important; }
.occ-next-steps-passport-img-col.wp-block-column { flex: 0 0 420px !important; max-width: 420px !important; }
.occ-next-steps-passport-cols.wp-block-columns { gap: 40px !important; }
.occ-next-steps-passport-info.wp-block-group { margin-top: 40px !important; }
.occ-next-steps-passport-cards.wp-block-columns { margin-top: 40px !important; }
}
@media (max-width: 767px) {
.occ-next-steps-passport-section.wp-block-group,
.occ-next-steps-passport-section.wp-block-group.has-global-padding { padding: 48px 16px !important; }
.occ-next-steps-passport-cols.wp-block-columns { flex-wrap: wrap !important; gap: 24px !important; }
.occ-next-steps-passport-text-col.wp-block-column,
.occ-next-steps-passport-img-col.wp-block-column { flex: none !important; max-width: 100% !important; width: 100% !important; }
.occ-next-steps-passport-img.wp-block-image img { min-height: 260px !important; height: 260px !important; }
.occ-next-steps-passport-info.wp-block-group { margin-top: 32px !important; }
.occ-next-steps-passport-cards.wp-block-columns { flex-wrap: wrap !important; margin-top: 32px !important; }
.occ-next-steps-passport-card.wp-block-column,
.occ-next-steps-passport-card.wp-block-column.is-vertically-aligned-top { flex: none !important; width: 100% !important; }
.occ-next-steps-passport-title.wp-block-heading { font-size: 26px !important; }
.occ-next-steps-passport-callout__text { font-size: 16px !important; }
}
/* ==========================================================================
occ-financing-section — Our Financing Process (Figma 1040-6721)
Centered title + big #f9f9f7 card > intro para + 3 white cards + disclaimer
========================================================================== */
.occ-financing-section.wp-block-group,
.occ-financing-section.wp-block-group.has-global-padding {
padding: 80px 120px 0 !important;
width: 100% !important;
max-width: none !important;
}
.occ-financing-section-title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
text-align: center !important;
margin: 0 auto !important;
}
/* ── Outer card ── */
.occ-financing-outer-card.wp-block-group {
background: #f9f9f7 !important;
border: 1px solid #ffffff !important;
border-radius: 20px !important;
padding: 40px !important;
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
margin-top: 30px !important;
box-sizing: border-box !important;
width: 100% !important;
}
/* Intro paragraph — centered */
.occ-financing-intro {
font-size: 16px !important;
line-height: 1.6 !important;
color: #474747 !important;
text-align: center !important;
margin: 0 !important;
}
/* ── 3 info cards row ── */
.occ-financing-cards.wp-block-columns {
gap: 24px !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
width: 100% !important;
margin: 0 !important;
}
.occ-financing-card.wp-block-column,
.occ-financing-card.wp-block-column.is-vertically-aligned-top {
flex: 1 1 0 !important;
min-width: 0 !important;
align-self: stretch !important;
background: #ffffff !important;
border: 1px solid #e5e5e3 !important;
border-radius: 12px !important;
padding: 32px !important;
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
box-sizing: border-box !important;
}
/* Card 1 — full blue bold call text */
.occ-financing-card__calltext {
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 !important;
}
/* Card 2 — "Please Note" heading */
.occ-financing-card__title.wp-block-heading {
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 !important;
}
/* Cards 2 & 3 — regular body text */
.occ-financing-card__text {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 !important;
}
/* Card 3 — small bold note */
.occ-financing-card__bold-text {
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 !important;
}
/* ── Disclaimer text block ── */
.occ-financing-disclaimer.wp-block-group {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
width: 100% !important;
}
.occ-financing-disclaimer-text {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
text-align: center !important;
margin: 0 !important;
}
/* ── Responsive ── */
@media (max-width: 1199px) {
.occ-financing-section.wp-block-group,
.occ-financing-section.wp-block-group.has-global-padding { padding: 64px 40px 0 !important; }
.occ-financing-outer-card.wp-block-group { padding: 32px !important; }
}
@media (max-width: 767px) {
.occ-financing-section.wp-block-group,
.occ-financing-section.wp-block-group.has-global-padding { padding: 48px 16px 0 !important; }
.occ-financing-outer-card.wp-block-group { padding: 24px !important; }
.occ-financing-cards.wp-block-columns { flex-wrap: wrap !important; gap: 16px !important; }
.occ-financing-card.wp-block-column,
.occ-financing-card.wp-block-column.is-vertically-aligned-top { flex: none !important; width: 100% !important; }
.occ-financing-section-title.wp-block-heading { font-size: 26px !important; }
.occ-financing-card__calltext { font-size: 16px !important; }
.occ-financing-card__title.wp-block-heading { font-size: 16px !important; }
}
@media(max-width: 375px){
.occ-next-steps-passport-card__header.wp-block-group{flex-direction: column; align-items: start !important;}
}
/* ==========================================================================
occ-medicard-section — Medicard (Figma 1040-6867)
Image left 550×428px + Text right: title / subtitle / body / button
========================================================================== */
.occ-medicard-section.wp-block-group,
.occ-medicard-section.wp-block-group.has-global-padding {
padding: 80px 120px !important;
width: 100% !important;
max-width: none !important;
}
.occ-medicard-cols.wp-block-columns {
gap: 62px !important;
align-items: center !important;
flex-wrap: nowrap !important;
margin: 0 auto !important;
}
/* Image column — fixed 550px */
.occ-medicard-img-col.wp-block-column {
flex: 0 0 550px !important;
max-width: 550px !important;
min-width: 0 !important;
}
.occ-medicard-img.wp-block-image {
margin: 0 !important;
line-height: 0 !important;
}
.occ-medicard-img.wp-block-image img {
width: 100% !important;
height: 428px !important;
object-fit: cover !important;
border-radius: 20px !important;
display: block !important;
}
/* Text column — fills remaining space */
.occ-medicard-text-col.wp-block-column {
flex: 1 1 0 !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
justify-content: center !important;
}
.occ-medicard-title.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 !important;
}
.occ-medicard-subtitle.wp-block-heading {
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #1a1a1a !important;
margin: 0 !important;
}
.occ-medicard-body {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 !important;
}
.occ-medicard-body a {
color: #474747 !important;
text-decoration: underline !important;
}
.occ-medicard-btn .wp-block-button__link {
background-color: #0066cc !important;
color: #ffffff !important;
border-radius: 8px !important;
padding: 12px 24px !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.6 !important;
text-decoration: none !important;
border: none !important;
}
.occ-medicard-btn .wp-block-button__link:hover {
background-color: #0052a3 !important;
}
/* ── Responsive ── */
@media (max-width: 1199px) {
.occ-medicard-section.wp-block-group,
.occ-medicard-section.wp-block-group.has-global-padding { padding: 64px 40px !important; }
.occ-medicard-img-col.wp-block-column { flex: 0 0 420px !important; max-width: 420px !important; }
.occ-medicard-cols.wp-block-columns { gap: 40px !important; }
}
@media (max-width: 767px) {
.occ-medicard-section.wp-block-group,
.occ-medicard-section.wp-block-group.has-global-padding { padding: 48px 16px !important; }
.occ-medicard-cols.wp-block-columns { flex-wrap: wrap !important; gap: 32px !important; }
.occ-medicard-img-col.wp-block-column { flex: none !important; max-width: 100% !important; width: 100% !important; }
.occ-medicard-img.wp-block-image img { height: 260px !important; }
.occ-medicard-title.wp-block-heading { font-size: 26px !important; }
.occ-medicard-subtitle.wp-block-heading { font-size: 16px !important; }
}
/* ==========================================================================
occ-payment-cards-section — Payment Option Cards V2 (Figma 1040-7042)
4 equal cards: #f1f1f1 bg, white logo box, provider name, outline button
========================================================================== */
.occ-payment-cards-section.wp-block-group,
.occ-payment-cards-section.wp-block-group.has-global-padding {
padding: 0 120px 0 !important;
width: 100% !important;
max-width: none !important;
}
/* 4-card columns row */
.occ-payment-cards-cols.wp-block-columns {
gap: 24px !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
margin: 0 auto !important;
width: 100% !important;
}
/* Individual card column */
.occ-payment-card-col.wp-block-column,
.occ-payment-card-col.wp-block-column.is-vertically-aligned-top {
flex: 1 1 0 !important;
min-width: 0 !important;
align-self: stretch !important;
background: #f1f1f1 !important;
border-radius: 20px !important;
padding: 24px !important;
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
align-items: center !important;
box-sizing: border-box !important;
}
/* White logo container */
.occ-payment-logo-box.wp-block-group {
background: #ffffff !important;
border-radius: 8px !important;
height: 120px !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 4px !important;
box-sizing: border-box !important;
}
.occ-payment-logo-box.wp-block-group .wp-block-image {
margin: 0 !important;
line-height: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.occ-payment-logo-box.wp-block-group .wp-block-image img {
max-height: 60px !important;
width: auto !important;
max-width: 100% !important;
object-fit: contain !important;
display: block !important;
}
/* Provider name */
.occ-payment-card-name {
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #1a1a1a !important;
text-align: center !important;
margin: 0 !important;
width: 100% !important;
}
/* Outline "Learn More" button — full width */
.occ-payment-card-btn.wp-block-buttons {
width: 100% !important;
margin-top: auto !important;
}
.occ-payment-card-btn .wp-block-button {
width: 100% !important;
}
.occ-payment-card-btn .wp-block-button__link {
background: #ffffff !important;
color: #0066cc !important;
border: 1px solid #0066cc !important;
border-radius: 8px !important;
padding: 12px 24px !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.6 !important;
text-align: center !important;
text-decoration: none !important;
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
.occ-payment-card-btn .wp-block-button__link:hover {
background: #0066cc !important;
color: #ffffff !important;
}
/* ── Responsive ── */
@media (max-width: 1199px) {
.occ-payment-cards-section.wp-block-group,
.occ-payment-cards-section.wp-block-group.has-global-padding { padding: 0 40px 0 !important; }
.occ-payment-cards-cols.wp-block-columns { gap: 16px !important; }
}
@media (max-width: 767px) {
.occ-payment-cards-section.wp-block-group,
.occ-payment-cards-section.wp-block-group.has-global-padding { padding: 0 16px 0 !important; }
.occ-payment-cards-cols.wp-block-columns { flex-wrap: wrap !important; gap: 16px !important; }
.occ-payment-card-col.wp-block-column,
.occ-payment-card-col.wp-block-column.is-vertically-aligned-top { flex: 0 0 calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; }
}
@media (max-width: 480px) {
.occ-payment-card-col.wp-block-column,
.occ-payment-card-col.wp-block-column.is-vertically-aligned-top { flex: none !important; width: 100% !important; max-width: 100% !important; }
}
/* ══════════════════════════════════════════════════════════
Pre-Op Care — Intro Text (node 989-5655)
Centred paragraph · max-width 996px · padding 80px 120px
══════════════════════════════════════════════════════════ */
.occ-preop-intro.wp-block-group {
padding: 80px 120px !important;
max-width: none !important;
width: 100%;
}
.occ-preop-intro__inner.wp-block-group {
max-width: 996px !important;
margin: 0 auto !important;
width: 100% !important;
}
.occ-preop-intro__inner > .wp-block-paragraph {
font-size: 16px !important;
font-weight: 400 !important;
color: #474747 !important;
line-height: 1.6 !important;
text-align: center !important;
margin: 0 !important;
}
@media (max-width: 1199px) {
.occ-preop-intro.wp-block-group { padding: 64px 40px !important; }
}
@media (max-width: 767px) {
.occ-preop-intro.wp-block-group { padding: 48px 16px !important; }
}
/* ══════════════════════════════════════════════════════════
Pre-Op Care — Image + Text (node 989-5659)
Image-left 550px + text-right 588px · 62px gap
No top padding — flows directly under .occ-preop-intro
══════════════════════════════════════════════════════════ */
.occ-preop-img-text.wp-block-group {
padding: 0 120px 80px !important;
max-width: none !important;
width: 100%;
box-sizing: border-box;
}
.occ-preop-img-text > .wp-block-columns {
gap: 62px !important;
align-items: center !important;
flex-wrap: nowrap !important;
max-width: 1200px;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
}
.occ-preop-img-text__img-col.wp-block-column {
flex: 0 0 550px !important;
width: 550px !important;
max-width: 550px !important;
}
.occ-preop-img-text__img.wp-block-image {
margin: 0 !important;
line-height: 0;
max-width: none !important;
}
.occ-preop-img-text__img.wp-block-image img {
width: 100%;
height: 393px;
object-fit: cover;
display: block;
border-radius: 20px;
margin: 0 !important;
}
.occ-preop-img-text__content.wp-block-column {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
.occ-preop-img-text__content .occ-preop-img-text__heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 !important;
}
.occ-preop-img-text__content .occ-preop-img-text__body {
font-size: 16px !important;
font-weight: 400 !important;
color: #474747 !important;
line-height: 1.6 !important;
margin: 0 !important;
}
.occ-doctor-text__inner.text-left p {
text-align: left;
margin-bottom: 10px;
}
.occ-doctor-text__inner.text-left span{
text-align:left;
}
@media (max-width: 1199px) {
.occ-preop-img-text.wp-block-group { padding: 0 40px 64px !important; }
.occ-preop-img-text__img-col.wp-block-column { flex: 0 0 380px !important; width: 380px !important; max-width: 380px !important; }
}
@media (max-width: 767px) {
.occ-preop-img-text.wp-block-group { padding: 0 16px 48px !important; }
.occ-preop-img-text > .wp-block-columns { flex-wrap: wrap !important; gap: 32px !important; }
.occ-preop-img-text__img-col.wp-block-column { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; }
.occ-preop-img-text__img.wp-block-image img { height: auto; aspect-ratio: 550 / 393; }
.occ-doctor-specialist{padding-bottom:48px !important;}
}
/* ══════════════════════════════════════════════════════════
Pre-Op Care — Why Choose Us (node 989-5668)
Dark blue card · centred text · decorative symbol top-right
No top padding — flows directly under .occ-preop-img-text
══════════════════════════════════════════════════════════ */
.occ-preop-why-us.wp-block-group {
padding: 0 120px 80px !important;
max-width: none !important;
width: 100%;
box-sizing: border-box;
}
.occ-preop-why-us__card.wp-block-group {
background: #0c497e !important;
border-radius: 20px !important;
padding: 80px 64px !important;
width: 100% !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
position: relative !important;
overflow: hidden !important;
box-sizing: border-box;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 24px !important;
}
/* Decorative OCC symbol — top-right corner, 5% opacity */
.occ-preop-why-us__card.wp-block-group::after {
content: '';
position: absolute;
right: -40px;
top: -40px;
width: 174px;
height: 174px;
background-image: url('https://obesity.aliansoftware.net/wp-content/uploads/2026/05/occ-symbol-decoration.png');
background-size: contain;
background-repeat: no-repeat;
opacity: 0.05;
pointer-events: none;
}
.occ-preop-why-us__heading.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #ffffff !important;
text-align: center !important;
margin: 0 !important;
}
.occ-preop-why-us__body.wp-block-group {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
width: 100% !important;
max-width: none !important;
}
.occ-preop-why-us__body > .wp-block-paragraph {
font-size: 16px !important;
font-weight: 400 !important;
color: #e8f0ff !important;
line-height: 1.6 !important;
text-align: center !important;
margin: 0 !important;
}
.occ-preop-why-us__body > .wp-block-paragraph strong {
font-weight: 700 !important;
color: #e8f0ff !important;
}
@media (max-width: 1199px) {
.occ-preop-why-us.wp-block-group { padding: 0 40px 64px !important; }
.occ-preop-why-us__card.wp-block-group { padding: 64px 48px !important; }
}
@media (max-width: 767px) {
.occ-preop-why-us.wp-block-group { padding: 0 16px 48px !important; }
.occ-preop-why-us__card.wp-block-group { padding: 48px 16px !important; }
.occ-preop-why-us__heading.wp-block-heading { font-size: 28px !important; }
}
/* ══════════════════════════════════════════════════════════
Pre-Op Care — Info Cards (node 989-5679)
Two equal light-blue cards · gap 24px · padding 32px each
No top padding — flows under .occ-preop-why-us
══════════════════════════════════════════════════════════ */
.occ-preop-cards.wp-block-group {
padding: 0 120px 80px !important;
max-width: none !important;
width: 100%;
box-sizing: border-box;
}
.occ-preop-cards > .wp-block-columns {
gap: 24px !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
max-width: 1200px;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
}
.occ-preop-cards__card.wp-block-column {
background: #f4f9ff !important;
border-radius: 20px !important;
padding: 32px !important;
flex: 1 0 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
min-width: 0 !important;
}
.occ-preop-cards__card-title {
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #1a1a1a !important;
margin: 0 !important;
}
.occ-preop-cards__card-body.wp-block-list {
font-size: 14px !important;
font-weight: 400 !important;
color: #474747 !important;
line-height: 1.6 !important;
margin: 0 !important;
padding-left: 20px !important;
}
.occ-preop-cards__card-body.wp-block-list > li {
font-size: 14px !important;
font-weight: 400 !important;
color: #474747 !important;
line-height: 1.6 !important;
list-style-type: disc !important;
margin: 0 !important;
padding: 0 !important;
}
@media (max-width: 1199px) {
.occ-preop-cards.wp-block-group { padding: 0 40px 64px !important; }
}
@media (max-width: 767px) {
.occ-preop-cards.wp-block-group { padding: 0 16px 48px !important; }
.occ-preop-cards > .wp-block-columns { flex-wrap: wrap !important; gap: 16px !important; }
.occ-preop-cards__card.wp-block-column { flex: 0 0 100% !important; }
}
/* === occ-preop-text-img (node 989:5739) === */
.occ-preop-text-img.wp-block-group { padding: 80px 120px !important; max-width: none !important; width: 100%; box-sizing: border-box; }
.occ-preop-text-img > .wp-block-columns { gap: 62px !important; align-items: center !important; flex-wrap: nowrap !important; max-width: 1200px; margin-left: auto !important; margin-right: auto !important; width: 100% !important; }
.occ-preop-text-img__content.wp-block-column { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 16px !important; }
.occ-preop-text-img__content .occ-preop-text-img__heading { font-size: 36px !important; font-weight: 800 !important; line-height: 1.3 !important; color: #0052a3 !important; margin: 0 !important; }
.occ-preop-text-img__content .occ-preop-text-img__body { font-size: 16px !important; font-weight: 400 !important; color: #474747 !important; line-height: 1.6 !important; margin: 0 !important; }
.occ-preop-text-img__img-col.wp-block-column { flex: 0 1 550px !important; width: auto !important; max-width: 550px !important; min-width: 0 !important; align-self: center !important; position: relative !important; padding: 0 !important; height: 400px !important; }
.occ-preop-text-img__img.wp-block-image { width: 100% !important; height: 400px !important; margin: 0 !important; display: block !important; }
.occ-preop-text-img__img.wp-block-image img { width: 100% !important; height: 400px !important; object-fit: cover !important; object-position: center 87% !important; display: block !important; border-radius: 20px !important; margin: 0 !important; }
@media (max-width: 1199px) {
.occ-preop-text-img.wp-block-group { padding: 64px 40px !important; }
.occ-preop-text-img__content.wp-block-column { flex: 1 !important; width: auto !important; max-width: none !important; }
.occ-preop-text-img__img-col.wp-block-column { flex: 0 0 380px !important; width: 380px !important; max-width: 380px !important; }
}
@media (max-width: 767px) {
.occ-preop-text-img > .wp-block-columns { flex-wrap: wrap !important; }
.occ-preop-text-img__content.wp-block-column { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; }
.occ-preop-text-img__img-col.wp-block-column { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; align-self: auto !important; }
.occ-preop-text-img__img.wp-block-image img { height: 280px !important; min-height: unset !important; }
}
/* === occ-preop-pillars (node 989:5750) === */
.occ-preop-pillars.wp-block-group { padding: 80px 120px !important; max-width: none !important; width: 100%; box-sizing: border-box; background: #f4f9ff !important; display: flex !important; flex-direction: column !important; gap: 30px !important; align-items: center !important; }
.occ-preop-pillars__header.wp-block-group { display: flex !important; flex-direction: column !important; gap: 16px !important; align-items: center !important; max-width: 996px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
.occ-preop-pillars__header .occ-preop-pillars__heading { font-size: 36px !important; font-weight: 800 !important; line-height: 1.3 !important; color: #0052a3 !important; text-align: center !important; margin: 0 !important; }
.occ-preop-pillars__header .occ-preop-pillars__subtitle { font-size: 16px !important; font-weight: 400 !important; line-height: 1.6 !important; color: #474747 !important; text-align: center !important; margin: 0 !important; }
.occ-preop-pillars__cards.wp-block-columns { gap: 24px !important; align-items: stretch !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 1200px !important; margin: 0 !important; }
.occ-preop-pillars__card.wp-block-column { background: #ffffff !important; border: 1px solid #e5e5e3 !important; border-radius: 12px !important; padding: 32px !important; flex: 1 0 0 !important; display: flex !important; flex-direction: column !important; gap: 20px !important; min-width: 0 !important; }
.occ-preop-pillars__card .occ-preop-pillars__card-title { font-size: 24px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #0066cc !important; margin: 0 !important; }
.occ-preop-pillars__card .occ-preop-pillars__card-body { font-size: 16px !important; font-weight: 400 !important; line-height: 1.6 !important; color: #474747 !important; margin: 0 !important; }
@media (max-width: 1199px) {
.occ-preop-pillars.wp-block-group { padding: 64px 40px !important; }
}
@media (max-width: 767px) {
.occ-preop-pillars.wp-block-group { padding: 48px 16px !important; }
.occ-preop-pillars__cards.wp-block-columns { flex-wrap: wrap !important; }
.occ-preop-pillars__card.wp-block-column { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; }
}
/* === occ-preop-video (node 989:5856) === */
.occ-preop-video { padding: 80px 120px; box-sizing: border-box; background: #ffffff; }
.occ-preop-video__inner { max-width: 1200px; margin: 0 auto; display: flex; gap: 62px; align-items: center; }
.occ-preop-video__thumb-wrap { flex: 1 0 0; min-width: 0; position: relative; border-radius: 20px; overflow: hidden; cursor: pointer; aspect-ratio: 16/9; }
.occ-preop-video__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.occ-preop-video__play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90px; height: 90px; transition: transform 0.2s ease; pointer-events: none; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.35)); }
.occ-preop-video__thumb-wrap:hover .occ-preop-video__play-btn { transform: translate(-50%, -50%) scale(1.1); }
.occ-preop-video__content { flex: 0 1 588px; width: auto; max-width: 588px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.occ-preop-video__heading { font-size: 36px !important; font-weight: 800 !important; line-height: 1.3 !important; color: #0052a3 !important; margin: 0 !important; }
.occ-preop-video__body { font-size: 16px !important; font-weight: 400 !important; line-height: 1.6 !important; color: #474747 !important; margin: 0 !important; }
/* Modal */
.occ-preop-video__modal { position: fixed; inset: 0; z-index: 99999; align-items: center; justify-content: center; }
.occ-preop-video__modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.85); cursor: pointer; }
.occ-preop-video__modal-wrap { position: relative; z-index: 1; width: 90%; max-width: 960px; }
.occ-preop-video__modal-close { position: absolute; top: -48px; right: 0; background: none; border: none; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; padding: 4px 10px; opacity: 0.9; }
.occ-preop-video__modal-close:hover { opacity: 1; }
.occ-preop-video__iframe-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; background: #000; }
.occ-preop-video__iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 1199px) {
.occ-preop-video { padding: 64px 40px; }
.occ-preop-video__content { flex: 1 0 0; width: auto; }
}
@media (max-width: 767px) {
.occ-preop-video { padding: 48px 20px; }
.occ-preop-video__inner { flex-direction: column; gap: 30px; }
.occ-preop-video__content { width: 100%; }
}
/* === occ-preop-checklist (node 989:5868) === */
.occ-preop-checklist.wp-block-group { padding: 80px 120px !important; max-width: none !important; width: 100%; box-sizing: border-box; background: #f4f9ff !important; display: flex !important; flex-direction: column !important; gap: 24px !important; align-items: center !important; }
.occ-preop-checklist__header.wp-block-group { display: flex !important; flex-direction: column !important; gap: 16px !important; width: 100% !important; max-width: 1200px !important; margin: 0 !important; padding: 0 !important; }
.occ-preop-checklist__header .occ-preop-checklist__heading { font-size: 36px !important; font-weight: 800 !important; line-height: 1.3 !important; color: #0052a3 !important; text-align: center !important; margin: 0 !important; }
.occ-preop-checklist__header .occ-preop-checklist__subtitle { font-size: 16px !important; font-weight: 400 !important; line-height: 1.6 !important; color: #474747 !important; text-align: center !important; margin: 0 !important; }
.occ-preop-checklist__grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; width: 100% !important; max-width: 1200px !important; }
.occ-preop-checklist__item { background: #ffffff !important; border: 1px solid #e5e5e3 !important; border-radius: 8px !important; padding: 12px !important; display: flex !important; gap: 12px !important; align-items: flex-start !important; }
.occ-preop-checklist__check { font-size: 20px !important; font-weight: 700 !important; line-height: 26px !important; color: #0066cc !important; flex-shrink: 0 !important; white-space: nowrap !important; }
.occ-preop-checklist__item-text { font-size: 14px !important; font-weight: 700 !important; line-height: 1.6 !important; color: #1a1a1a !important; flex: 1 0 0 !important; min-width: 0 !important; margin: 0 !important; }
@media (max-width: 1199px) {
.occ-preop-checklist.wp-block-group { padding: 64px 40px !important; }
.occ-preop-checklist__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}
@media (max-width: 767px) {
.occ-preop-checklist.wp-block-group { padding: 48px 16px !important; }
.occ-preop-checklist__grid { grid-template-columns: 1fr !important; gap: 12px !important; }
}
/* occ-preop-callout (node 989:5910) */
.occ-preop-callout.wp-block-group { padding: 80px 120px !important; max-width: none !important; width: 100%; box-sizing: border-box; background: #ffffff !important; }
.occ-preop-callout__card.wp-block-group { background: #0c497e !important; border-radius: 20px !important; padding: 80px 64px !important; display: flex !important; flex-direction: column !important; gap: 24px !important; align-items: center !important; width: 100% !important; position: relative !important; overflow: hidden !important; box-sizing: border-box !important; }
.occ-preop-callout__card.wp-block-group::after { content: ''; position: absolute; top: -40px; right: -40px; width: 174px; height: 174px; background-image: url('https://obesity.aliansoftware.net/wp-content/uploads/2026/05/preop-callout-symbol.png'); background-size: cover; background-repeat: no-repeat; opacity: 0.05; pointer-events: none; }
.occ-preop-callout__card .occ-preop-callout__heading { font-size: 36px !important; font-weight: 800 !important; line-height: 1.3 !important; color: #ffffff !important; text-align: center !important; margin: 0 !important; }
.occ-preop-callout__card .occ-preop-callout__body { font-size: 16px !important; font-weight: 400 !important; line-height: 1.6 !important; color: #e8f0ff !important; text-align: center !important; margin: 0 !important; }
@media (max-width: 1199px) { .occ-preop-callout.wp-block-group { padding: 64px 40px !important; } .occ-preop-callout__card.wp-block-group { padding: 64px 40px !important; } }
@media (max-width: 767px) { .occ-preop-callout.wp-block-group { padding: 48px 16px !important; } .occ-preop-callout__card.wp-block-group { padding: 48px 16px !important; } }
/* occ-preop-join (node 989:5919) */
.occ-preop-join.wp-block-group { padding: 0px 120px !important; max-width: none !important; width: 100%; box-sizing: border-box; background: #ffffff !important; }
.occ-preop-join__cols.wp-block-columns { gap: 62px !important; align-items: center !important; flex-wrap: nowrap !important; max-width: 1200px; margin-left: auto !important; margin-right: auto !important; width: 100% !important; }
.occ-preop-join__content.wp-block-column { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 16px !important; }
.occ-preop-join__content .occ-preop-join__heading { font-size: 36px !important; font-weight: 800 !important; line-height: 1.3 !important; color: #0052a3 !important; margin: 0 !important; }
.occ-preop-join__content .occ-preop-join__subtitle { font-size: 20px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #474747 !important; margin: 0 !important; }
.occ-preop-join__content .occ-preop-join__body { font-size: 16px !important; font-weight: 400 !important; line-height: 1.6 !important; color: #474747 !important; margin: 0 !important; }
.occ-preop-join__img-col.wp-block-column { flex: 0 1 550px !important; width: auto !important; max-width: 550px !important; min-width: 0 !important; align-self: center !important; position: relative !important; padding: 0 !important; aspect-ratio: 550 / 509; height: auto !important; }
.occ-preop-join__img.wp-block-image { width: 100% !important; height: 100% !important; margin: 0 !important; display: block !important; }
.occ-preop-join__img.wp-block-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; border-radius: 20px !important; margin: 0 !important; }
@media (max-width: 1199px) { .occ-preop-join.wp-block-group { padding: 0px 40px !important; } .occ-preop-join__cols.wp-block-columns { flex-wrap: wrap !important; } .occ-preop-join__content.wp-block-column, .occ-preop-join__img-col.wp-block-column { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; } .occ-preop-join__img-col.wp-block-column { height: 400px !important; } .occ-preop-join__img.wp-block-image, .occ-preop-join__img.wp-block-image img { height: 400px !important; } }
@media (max-width: 767px) { .occ-preop-join.wp-block-group { padding: 0px 16px !important; } .occ-preop-join__img-col.wp-block-column { height: 280px !important; } .occ-preop-join__img.wp-block-image, .occ-preop-join__img.wp-block-image img { height: 280px !important; } }
/* occ-preop-dr-video (node 989:5928) */
.occ-preop-dr-video.wp-block-group { padding: 80px 222px !important; max-width: none !important; width: 100%; box-sizing: border-box; background: #ffffff !important; display: flex !important; flex-direction: column !important; gap: 16px !important; align-items: center !important; }
.occ-preop-dr-video__heading { font-size: 36px !important; font-weight: 800 !important; line-height: 1.3 !important; color: #0052a3 !important; text-align: center !important; margin: 0 !important; width: 100% !important; }
.occ-preop-dr-video__thumb-wrap { position: relative; width: 100%; border-radius: 20px; overflow: hidden; cursor: pointer; aspect-ratio: 836 / 470.25; }
.occ-preop-dr-video__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.occ-preop-dr-video__play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90px; height: 90px; pointer-events: none; transition: transform 0.2s ease; }
.occ-preop-dr-video__thumb-wrap:hover .occ-preop-dr-video__play-btn { transform: translate(-50%, -50%) scale(1.1); }
.occ-preop-dr-video__modal { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; }
.occ-preop-dr-video__modal.is-open { display: flex; }
.occ-preop-dr-video__modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.85); cursor: pointer; }
.occ-preop-dr-video__modal-wrap { position: relative; z-index: 1; width: 90%; max-width: 960px; }
.occ-preop-dr-video__modal-close { position: absolute; top: -48px; right: 0; background: none; border: none; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; padding: 4px 10px; }
.occ-preop-dr-video__iframe-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; background: #000; }
.occ-preop-dr-video__iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 1199px) { .occ-preop-dr-video.wp-block-group { padding: 64px 80px !important; } }
@media (max-width: 767px) { .occ-preop-dr-video.wp-block-group { padding: 48px 16px !important; } }
/* occ-preop-info-cards (node 989:6033) */
.occ-preop-info-cards.wp-block-group { padding: 0px 120px !important; max-width: none !important; width: 100%; box-sizing: border-box; background: #ffffff !important; }
.occ-preop-info-cards__cols.wp-block-columns { gap: 24px !important; align-items: stretch !important; flex-wrap: nowrap !important; max-width: 1200px; margin-left: auto !important; margin-right: auto !important; width: 100% !important; }
.occ-preop-info-cards__card.wp-block-column { background: #f9f9f7 !important; border: 1px solid #e5e5e3 !important; border-radius: 20px !important; padding: 32px !important; flex: 1 0 0 !important; display: flex !important; flex-direction: column !important; gap: 20px !important; min-width: 0 !important; }
.occ-preop-info-cards__card .occ-preop-info-cards__card-title { font-size: 24px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #1a1a1a !important; margin: 0 !important; }
.occ-preop-info-cards__card .occ-preop-info-cards__card-body { font-size: 16px !important; font-weight: 400 !important; line-height: 1.6 !important; color: #474747 !important; margin: 0 !important; }
@media (max-width: 1199px) { .occ-preop-info-cards.wp-block-group { padding: 0px 40px !important; } .occ-preop-info-cards__cols.wp-block-columns { flex-wrap: wrap !important; } .occ-preop-info-cards__card.wp-block-column { flex: 0 0 100% !important; } }
@media (max-width: 767px) { .occ-preop-info-cards.wp-block-group { padding: 0px 16px !important; } }
@media (max-width: 1440px) {.occ-preop-join__img-col.wp-block-column {
flex: 0 0 auto !important;
width: auto !important;
height: auto !important;
}}
/* ══════════════════════════════════════════════════════════════
Pre-Op Care: Comprehensive Responsive Override
Fixes 1199px/991px/767px for all occ-preop-* sections
══════════════════════════════════════════════════════════════ */
/* ── 1199px: Two-col stays side-by-side, reduce padding/image sizes ── */
@media (max-width: 1199px) {
.occ-preop-text-img.wp-block-group { padding: 64px 40px !important; }
.occ-preop-text-img > .wp-block-columns { flex-wrap: nowrap !important; gap: 40px !important; }
.occ-preop-text-img__content.wp-block-column { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; }
.occ-preop-text-img__img-col.wp-block-column { flex: 0 1 420px !important; width: auto !important; max-width: 420px !important; min-width: 200px !important; height: 360px !important; }
.occ-preop-text-img__img.wp-block-image { height: 360px !important; }
.occ-preop-text-img__img.wp-block-image img { height: 360px !important; }
.occ-preop-pillars.wp-block-group { padding: 64px 40px !important; }
.occ-preop-video { padding: 64px 40px !important; }
.occ-preop-video__inner { gap: 40px !important; }
.occ-preop-video__content { flex: 0 1 440px !important; width: auto !important; }
.occ-preop-checklist.wp-block-group { padding: 64px 40px !important; }
.occ-preop-checklist__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
.occ-preop-callout.wp-block-group { padding: 64px 40px !important; }
.occ-preop-callout__card.wp-block-group { padding: 64px 40px !important; }
.occ-preop-join.wp-block-group { padding: 0px 40px !important; }
.occ-preop-join__cols.wp-block-columns { flex-wrap: nowrap !important; gap: 40px !important; }
.occ-preop-join__content.wp-block-column { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; }
.occ-preop-join__img-col.wp-block-column { flex: 0 1 420px !important; width: auto !important; max-width: 420px !important; min-width: 200px !important; height: auto !important; aspect-ratio: 550/509; }
.occ-preop-dr-video.wp-block-group { padding: 64px 80px !important; }
.occ-preop-info-cards.wp-block-group { padding: 64px 40px !important; }
.occ-preop-info-cards__cols.wp-block-columns { flex-wrap: nowrap !important; }
.occ-preop-info-cards__card.wp-block-column { flex: 1 0 0 !important; min-width: 0 !important; }
}
/* ── 991px: Stack two-col layouts, reduce padding, reduce headings ── */
@media (max-width: 991px) {
.occ-preop-text-img.wp-block-group { padding: 48px 24px !important; }
.occ-preop-text-img > .wp-block-columns { flex-wrap: wrap !important; gap: 24px !important; }
.occ-preop-text-img__content.wp-block-column { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; }
.occ-preop-text-img__img-col.wp-block-column { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 300px !important; }
.occ-preop-text-img__img.wp-block-image { height: 300px !important; }
.occ-preop-text-img__img.wp-block-image img { height: 300px !important; }
.occ-preop-text-img__content .occ-preop-text-img__heading { font-size: 28px !important; }
.occ-preop-pillars.wp-block-group { padding: 48px 24px !important; }
.occ-preop-pillars__header .occ-preop-pillars__heading { font-size: 28px !important; }
.occ-preop-pillars__cards.wp-block-columns { flex-wrap: wrap !important; }
.occ-preop-pillars__card.wp-block-column { flex: 0 0 calc(50% - 12px) !important; min-width: calc(50% - 12px) !important; max-width: calc(50% - 12px) !important; }
.occ-preop-video { padding: 48px 24px !important; }
.occ-preop-video__inner { flex-direction: column !important; gap: 24px !important; }
.occ-preop-video__thumb-wrap { flex: none !important; width: 100% !important; }
.occ-preop-video__content { flex: none !important; width: 100% !important; }
.occ-preop-video__heading { font-size: 28px !important; }
.occ-preop-checklist.wp-block-group { padding: 48px 24px !important; }
.occ-preop-checklist__header .occ-preop-checklist__heading { font-size: 28px !important; }
.occ-preop-callout.wp-block-group { padding: 48px 24px !important; }
.occ-preop-callout__card.wp-block-group { padding: 48px 32px !important; }
.occ-preop-callout__card .occ-preop-callout__heading { font-size: 28px !important; }
.occ-preop-join.wp-block-group { padding: 0px 24px !important; }
.occ-preop-join__cols.wp-block-columns { flex-wrap: wrap !important; gap: 24px !important; }
.occ-preop-join__content.wp-block-column { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; }
.occ-preop-join__img-col.wp-block-column { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 300px !important; aspect-ratio: auto !important; }
.occ-preop-join__img.wp-block-image { height: 300px !important; }
.occ-preop-join__img.wp-block-image img { height: 300px !important; }
.occ-preop-join__content .occ-preop-join__heading { font-size: 28px !important; }
.occ-preop-dr-video.wp-block-group { padding: 48px 40px !important; }
.occ-preop-dr-video__heading { font-size: 28px !important; }
.occ-preop-info-cards.wp-block-group { padding: 48px 24px !important; }
.occ-preop-info-cards__cols.wp-block-columns { flex-wrap: wrap !important; }
.occ-preop-info-cards__card.wp-block-column { flex: 0 0 100% !important; min-width: 100% !important; max-width: 100% !important; }
}
/* ── 767px: Mobile, compact padding + small font sizes ── */
@media (max-width: 767px) {
.occ-preop-text-img.wp-block-group { padding: 40px 16px !important; }
.occ-preop-text-img__img-col.wp-block-column { height: 240px !important; }
.occ-preop-text-img__img.wp-block-image { height: 240px !important; }
.occ-preop-text-img__img.wp-block-image img { height: 240px !important; }
.occ-preop-text-img__content .occ-preop-text-img__heading { font-size: 24px !important; }
.occ-preop-pillars.wp-block-group { padding: 48px 16px !important; }
.occ-preop-pillars__cards.wp-block-columns { flex-wrap: wrap !important; }
.occ-preop-pillars__card.wp-block-column { flex: 0 0 100% !important; min-width: 100% !important; max-width: 100% !important; }
.occ-preop-pillars__header .occ-preop-pillars__heading { font-size: 24px !important; }
.occ-preop-video { padding: 48px 16px !important; }
.occ-preop-video__heading { font-size: 24px !important; }
.occ-preop-checklist.wp-block-group { padding: 48px 16px !important; }
.occ-preop-checklist__header .occ-preop-checklist__heading { font-size: 24px !important; }
.occ-preop-checklist__grid { grid-template-columns: 1fr !important; }
.occ-preop-callout.wp-block-group { padding: 48px 16px !important; }
.occ-preop-callout__card.wp-block-group { padding: 48px 16px !important; }
.occ-preop-callout__card .occ-preop-callout__heading { font-size: 24px !important; }
.occ-preop-join.wp-block-group { padding: 0px 16px !important; }
.occ-preop-join__img-col.wp-block-column { height: 240px !important; aspect-ratio: auto !important; }
.occ-preop-join__img.wp-block-image { height: 240px !important; }
.occ-preop-join__img.wp-block-image img { height: 240px !important; }
.occ-preop-join__content .occ-preop-join__heading { font-size: 24px !important; }
.occ-preop-dr-video.wp-block-group { padding: 48px 16px !important; }
.occ-preop-dr-video__heading { font-size: 24px !important; }
.occ-preop-info-cards.wp-block-group { padding: 0px 16px !important; }
}
/* ══════════════════════════════════════════════════════════════
Pre-Op Care: Previous-session sections 991px fix
occ-preop-img-text, occ-preop-cards, occ-preop-why-us
══════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
/* img-text: flex shrinkable (not fixed 550px) to avoid overflow */
.occ-preop-img-text__img-col.wp-block-column { flex: 0 1 380px !important; width: auto !important; max-width: 380px !important; min-width: 0 !important; }
.occ-preop-img-text__content.wp-block-column { flex: 1 1 0 !important; min-width: 0 !important; }
}
@media (max-width: 991px) {
/* img-text: stack image above text at 991px */
.occ-preop-img-text.wp-block-group { padding: 0px 24px !important; }
.occ-preop-img-text > .wp-block-columns { flex-wrap: wrap !important; flex-direction: column !important; gap: 24px !important; }
.occ-preop-img-text__img-col.wp-block-column { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
.occ-preop-img-text__img.wp-block-image img { height: 300px !important; border-radius: 16px !important; }
.occ-preop-img-text__content.wp-block-column { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; }
.occ-preop-img-text__content .occ-preop-img-text__heading { font-size: 28px !important; }
/* cards: stack at 991px */
.occ-preop-cards.wp-block-group { padding: 48px 24px !important; }
.occ-preop-cards > .wp-block-columns { flex-wrap: wrap !important; }
.occ-preop-cards__card.wp-block-column { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; }
/* why-us */
.occ-preop-why-us.wp-block-group { padding: 48px 24px 0px !important; }
.occ-preop-why-us__card.wp-block-group { padding: 40px 32px !important; }
.occ-preop-why-us__heading.wp-block-heading { font-size: 28px !important; }
}
@media (max-width: 767px) {
.occ-preop-img-text.wp-block-group { padding: 0px 16px!important; }
.occ-preop-img-text__img.wp-block-image img { height: 240px !important; }
.occ-preop-img-text__content .occ-preop-img-text__heading { font-size: 24px !important; }
.occ-preop-cards.wp-block-group { padding: 48px 16px 0px !important; }
.occ-preop-why-us.wp-block-group { padding: 48px 16px 0px !important; }
.occ-preop-why-us__heading.wp-block-heading { font-size: 24px !important; }
}
/* =============================================
occ-preop-schedule (989:5936)
============================================= */
.occ-preop-schedule.wp-block-group { padding: 80px 120px 0px !important; max-width: none !important; width: 100%; box-sizing: border-box; background: #ffffff !important; }
.occ-preop-schedule__inner { display: flex !important; flex-direction: row !important; gap: 24px !important; align-items: center !important; max-width: 1200px; margin-left: auto !important; margin-right: auto !important; width: 100% !important; }
.occ-preop-schedule__content { flex: 1 0 0 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 24px !important; }
.occ-preop-schedule__heading { font-size: 36px !important; font-weight: 800 !important; line-height: 1.3 !important; color: #0052a3 !important; margin: 0 !important; }
.occ-preop-schedule__body { font-size: 16px !important; font-weight: 400 !important; line-height: 1.6 !important; color: #474747 !important; margin: 0 !important; }
.occ-preop-schedule__slider-col { flex: 1 0 0 !important; min-width: 0 !important; }
.occ-preop-schedule__slider-wrap { position: relative !important; overflow: visible !important; }
.occ-preop-schedule__swiper { overflow: hidden !important; border-radius: 20px !important; }
.occ-preop-schedule__swiper .swiper-slide { height: 274px !important; border-radius: 20px !important; overflow: hidden !important; }
.occ-preop-schedule__swiper .swiper-slide img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; border-radius: 20px !important; }
.occ-preop-schedule__arrow { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 10 !important; width: 43px !important; height: 43px !important; padding: 0 !important; border: none !important; background: none !important; cursor: pointer !important; }
.occ-preop-schedule__arrow--prev { left: -22px !important; }
.occ-preop-schedule__arrow--next { right: -22px !important; }
.occ-preop-schedule__arrow svg { width: 43px !important; height: 43px !important; display: block !important; }
@media (max-width: 1199px) {
.occ-preop-schedule.wp-block-group { padding: 0px 40px !important; }
}
@media (max-width: 991px) {
.occ-preop-schedule.wp-block-group { padding: 0px 24px !important; }
.occ-preop-schedule__inner { flex-direction: column !important; }
.occ-preop-schedule__content { flex: none !important; width: 100% !important; }
.occ-preop-schedule__slider-col { flex: none !important; width: 100% !important; }
.occ-preop-schedule__swiper .swiper-slide { height: 220px !important; }
.occ-preop-schedule__heading { font-size: 28px !important; }
}
@media (max-width: 767px) {
.occ-preop-schedule.wp-block-group { padding: 48px 16px !important; }
.occ-preop-schedule__swiper .swiper-slide { height: 180px !important; }
.occ-preop-schedule__heading { font-size: 24px !important; }
}
/* =============================================
occ-travel-hero (1078:9086)
============================================= */
.occ-travel-hero.wp-block-group { padding: 80px 120px !important; max-width: none !important; width: 100%; box-sizing: border-box; background: #ffffff !important; }
.occ-travel-hero__cols.wp-block-columns { gap: 62px !important; align-items: center !important; flex-wrap: nowrap !important; max-width: 1200px; margin-left: auto !important; margin-right: auto !important; width: 100% !important; }
.occ-travel-hero__img-col.wp-block-column { flex: 0 1 550px !important; width: auto !important; max-width: 550px !important; min-width: 0 !important; }
.occ-travel-hero__img.wp-block-image { margin: 0 !important; }
.occ-travel-hero__img.wp-block-image img { width: 100% !important; height: 440px !important; object-fit: cover !important; object-position: center center !important; border-radius: 20px !important; display: block !important; }
.occ-travel-hero__content.wp-block-column { flex: 1 1 0 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 16px !important; }
.occ-travel-hero__heading.wp-block-heading { font-size: 36px !important; font-weight: 800 !important; line-height: 1.3 !important; color: #0052a3 !important; margin: 0 !important; }
.occ-travel-hero__body { font-size: 16px !important; font-weight: 400 !important; line-height: 1.6 !important; color: #474747 !important; margin: 0 !important; }
@media (max-width: 1199px) {
.occ-travel-hero.wp-block-group { padding: 64px 40px !important; }
.occ-travel-hero__cols.wp-block-columns { gap: 40px !important; }
}
@media (max-width: 991px) {
.occ-travel-hero.wp-block-group { padding: 48px 24px !important; }
.occ-travel-hero__cols.wp-block-columns { flex-wrap: wrap !important; }
.occ-travel-hero__img-col.wp-block-column { flex: none !important; width: 100% !important; max-width: 100% !important; }
.occ-travel-hero__img.wp-block-image img { height: 300px !important; }
.occ-travel-hero__content.wp-block-column { flex: none !important; width: 100% !important; }
.occ-travel-hero__heading.wp-block-heading { font-size: 28px !important; }
}
@media (max-width: 767px) {
.occ-travel-hero.wp-block-group { padding: 48px 16px !important; }
.occ-travel-hero__img.wp-block-image img { height: 240px !important; }
.occ-travel-hero__heading.wp-block-heading { font-size: 24px !important; }
}
/* =============================================
occ-travel-cards (1078:9425)
============================================= */
.occ-travel-cards.wp-block-group { padding: 0px 120px !important; max-width: none !important; width: 100%; box-sizing: border-box; background: #ffffff !important; }
.occ-travel-cards__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; }
.occ-travel-cards__row { display: flex; gap: 24px; align-items: flex-start; }
.occ-travel-cards__card { background: #ffffff; border: 1px solid #e5e5e3; border-radius: 20px; overflow: hidden; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.occ-travel-cards__row--single .occ-travel-cards__card { flex: 0 0 calc((100% - 48px) / 3); max-width: calc((100% - 48px) / 3); }
.occ-travel-cards__card-img { width: 100%; height: 262px; overflow: hidden; position: relative; flex-shrink: 0; }
.occ-travel-cards__card-img img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }
.occ-travel-cards__card-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.occ-travel-cards__card-title { font-size: 20px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #1a1a1a !important; margin: 0 !important; }
.occ-travel-cards__card-desc { font-size: 14px !important; font-weight: 400 !important; line-height: 1.6 !important; color: #474747 !important; margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.occ-travel-cards__card-link { font-size: 14px !important; font-weight: 700 !important; color: #0066cc !important; text-decoration: underline !important; line-height: 1.6 !important; }
.occ-travel-cards__card-link:hover { color: #0052a3 !important; }
@media (max-width: 1199px) {
.occ-travel-cards.wp-block-group { padding: 0px 40px !important; }
}
@media (max-width: 991px) {
.occ-travel-cards.wp-block-group { padding: 0px 24px !important; }
.occ-travel-cards__row { flex-wrap: wrap; }
.occ-travel-cards__card { flex: 0 0 calc(50% - 12px); max-width: calc(50% - 12px); }
.occ-travel-cards__row--single .occ-travel-cards__card { flex: 0 0 calc(50% - 12px); max-width: calc(50% - 12px); }
}
@media (max-width: 767px) {
.occ-travel-cards.wp-block-group { padding: 0px 16px !important; }
.occ-travel-cards__card { flex: 0 0 100%; max-width: 100%; }
.occ-travel-cards__row--single .occ-travel-cards__card { flex: 0 0 100%; max-width: 100%; }
.occ-travel-cards__card-img { height: 220px; }
}
.occ-doctor-awards__card svg {
flex: none;
}
/* ── Post-Op Care — Intro Text Section (node 989-6050) ──────────────────── */
.occ-postop-intro {
padding: 80px 120px;
display: flex;
align-items: center;
justify-content: center;
}
.occ-postop-intro__text {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: #474747;
text-align: center;
max-width: 996px;
margin: 0 auto;
}
@media (max-width: 1024px) {
.occ-postop-intro {
padding: 64px 48px;
}
}
@media (max-width: 768px) {
.occ-postop-intro {
padding: 48px 24px;
}
.occ-postop-intro__text {
font-size: 15px;
}
}
/* ── Post-Op Care — Weight Loss Management (node 989-6140) ─────────────── */
.occ-postop-wlm {
padding: 0 0 80px;
}
.occ-postop-wlm__inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 120px;
display: flex;
align-items: center;
gap: 62px;
}
.occ-postop-wlm__image {
flex: 0 0 550px;
width: 550px;
height: 393px;
border-radius: 20px;
overflow: hidden;
}
.occ-postop-wlm__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.occ-postop-wlm__content {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
}
.occ-postop-wlm__title {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 800;
font-size: 36px;
line-height: 1.3;
color: #0052a3;
margin: 0;
}
.occ-postop-wlm__body {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: #474747;
margin: 0;
}
@media (max-width: 1200px) {
.occ-postop-wlm { padding: 0 0 64px; }
.occ-postop-wlm__inner { padding: 0 48px; }
.occ-postop-wlm__inner { gap: 40px; }
.occ-postop-wlm__image { flex: 0 0 380px; width: 380px; height: 272px; }
}
@media (max-width: 768px) {
.occ-postop-wlm { padding: 0 0 48px; }
.occ-postop-wlm__inner { padding: 0 24px; }
.occ-postop-wlm__inner { flex-direction: column; gap: 32px; }
.occ-postop-wlm__image { flex: none; width: 100%; height: 260px; }
.occ-postop-wlm__content { width: 100%; }
.occ-postop-wlm__title { font-size: 28px; }
}
/* ── Post-Op Care — Phases of Post-Op Nutritional Support (node 989-6637) ── */
.occ-postop-nutrition {
max-width: 1440px;
margin: 0 auto;
padding: 0 120px;
}
.occ-postop-nutrition__card {
background: #0c497e;
border-radius: 20px;
padding: 40px;
display: flex;
flex-direction: column;
gap: 40px;
}
.occ-postop-nutrition__header {
display: flex;
gap: 40px;
align-items: center;
width: 100%;
}
.occ-postop-nutrition__title {
flex: 1;
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 800;
font-size: 36px;
line-height: 1.3;
color: #ffffff !important;
margin: 0;
}
.occ-postop-nutrition__desc {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
}
.occ-postop-nutrition__desc-text {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: #f1f1f1;
margin: 0;
}
.occ-postop-nutrition__desc-bold {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 1.3;
color: #f1f1f1;
margin: 0;
}
.occ-postop-nutrition__phases {
display: flex;
gap: 43px;
align-items: stretch;
}
.occ-postop-nutrition__phase {
flex: 1;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(122, 192, 235, 0.5);
border-radius: 16px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
justify-content: center;
}
.occ-postop-nutrition__check {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 1.3;
color: #ffffff;
margin: 0;
text-align: center;
}
.occ-postop-nutrition__phase-text {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: #ffffff;
margin: 0;
text-align: center;
}
@media (max-width: 1200px) {
.occ-postop-nutrition { padding: 0 48px; }
.occ-postop-nutrition__phases { gap: 24px; }
}
@media (max-width: 768px) {
.occ-postop-nutrition { padding: 0 24px; }
.occ-postop-nutrition__header { flex-direction: column; gap: 24px; }
.occ-postop-nutrition__phases { flex-direction: column; gap: 16px; }
.occ-postop-nutrition__title { font-size: 28px; }
}
/* ── Post-Op Care — 5 Years of Support / Stage Cards (node 1043-5506) ── */
.occ-postop-stages {
background: #f4f9ff;
}
.occ-postop-stages__inner {
max-width: 1440px;
margin: 0 auto;
padding: 80px 120px;
display: flex;
flex-direction: column;
gap: 30px;
}
.occ-postop-stages__header {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
}
.occ-postop-stages__title {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 800;
font-size: 36px;
line-height: 1.3;
color: #0052a3 !important;
margin: 0;
}
.occ-postop-stages__subtitle {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: #474747;
margin: 0;
}
.occ-postop-stages__card {
background: #ffffff;
border: 1px solid #e5e5e3;
border-radius: 12px;
padding: 32px;
display: flex;
flex-direction: column;
gap: 16px;
}
.occ-postop-stages__card-title {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 1.3;
color: #0052a3 !important;
margin: 0;
}
.occ-postop-stages__card-body {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: #474747;
margin: 0;
}
@media (max-width: 1200px) {
.occ-postop-stages__inner { padding: 64px 48px; }
}
@media (max-width: 768px) {
.occ-postop-stages__inner { padding: 48px 24px; gap: 20px; }
.occ-postop-stages__title { font-size: 28px; }
.occ-postop-stages__card { padding: 24px; }
}
/* ── Post-Op Care — Nutrition and Chronic Diseases (node 1048-5510) ── */
.occ-postop-chronic {
max-width: 1440px;
margin: 0 auto;
padding: 80px 120px 0;
display: flex;
gap: 24px;
align-items: flex-start;
}
.occ-postop-chronic__title {
flex: 0 0 384px;
width: 384px;
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 800;
font-size: 36px;
line-height: 1.3;
color: #0052a3 !important;
margin: 0;
}
.occ-postop-chronic__body {
flex: 1;
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: #474747;
margin: 0;
}
@media (max-width: 1200px) {
.occ-postop-chronic { padding: 64px 48px 0; }
.occ-postop-chronic__title { flex: 0 0 300px; width: 300px; }
}
@media (max-width: 768px) {
.occ-postop-chronic { padding: 48px 24px 0; flex-direction: column; gap: 16px; }
.occ-postop-chronic__title { flex: none; width: 100%; font-size: 28px; }
}
/* ── Post-Op Care — Nutrition and Support for Life (node 1048-5517) ── */
.occ-postop-life {
max-width: 1440px;
margin: 0 auto;
padding: 80px 120px;
display: flex;
gap: 62px;
align-items: center;
}
.occ-postop-life__content {
flex: 0 0 588px;
width: 588px;
display: flex;
flex-direction: column;
gap: 16px;
}
.occ-postop-life__title {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 800;
font-size: 36px;
line-height: 1.3;
color: #0052a3 !important;
margin: 0;
}
.occ-postop-life__body {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: #474747;
margin: 0;
}
.occ-postop-life__body strong {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 1.3;
color: #0c497e;
}
.occ-postop-life__image {
flex: 0 0 550px;
width: 550px;
height: 375px;
border-radius: 20px;
overflow: hidden;
}
.occ-postop-life__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 1200px) {
.occ-postop-life { padding: 64px 48px; gap: 40px; }
.occ-postop-life__content { flex: 1; min-width: 0; }
.occ-postop-life__image { flex: 0 0 380px; width: 380px; height: 272px; }
}
@media (max-width: 768px) {
.occ-postop-life { padding: 48px 24px; flex-direction: column; gap: 32px; }
.occ-postop-life__content { flex: none; width: 100%; }
.occ-postop-life__image { flex: none; width: 100%; height: 260px; }
.occ-postop-life__title { font-size: 28px; }
}
/* ── Post-Op Care — Two Info Cards (node 1048-5532) ── */
.occ-postop-twocards {
max-width: 1440px;
margin: 0 auto;
padding: 0 120px;
display: flex;
gap: 24px;
align-items: stretch;
}
.occ-postop-twocards__card {
flex: 1;
background: #f9f9f7;
border: 1px solid #e5e5e3;
border-radius: 20px;
padding: 32px;
display: flex;
flex-direction: column;
gap: 20px;
}
.occ-postop-twocards__card-title {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 1.3;
color: #1a1a1a !important;
margin: 0;
}
.occ-postop-twocards__card-body {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: #474747;
margin: 0;
}
@media (max-width: 1200px) {
.occ-postop-twocards { padding: 0 48px; }
}
@media (max-width: 768px) {
.occ-postop-twocards { padding: 0 24px; flex-direction: column; }
.occ-postop-twocards__card-title { font-size: 20px; }
}
/* ── Post-Op Care — Video + Text (node 1048-5572) ── */
.occ-postop-video {
max-width: 1440px;
margin: 0 auto;
padding: 80px 120px;
display: flex;
gap: 62px;
align-items: center;
}
.occ-postop-video__thumb-wrap {
flex: 1;
position: relative;
aspect-ratio: 16 / 9;
border-radius: 20px;
overflow: hidden;
cursor: pointer;
}
.occ-postop-video__thumb-wrap .wp-block-image {
position: absolute;
inset: 0;
margin: 0;
width: 100%;
height: 100%;
}
.occ-postop-video__thumb-wrap .wp-block-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.occ-postop-video__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90px;
height: 90px;
background: rgba(255, 255, 255, 0.92);
border-radius: 50%;
pointer-events: none;
transition: transform 0.2s ease, background 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.occ-postop-video__play::after {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 14px 0 14px 24px;
border-color: transparent transparent transparent #0052a3;
margin-left: 5px;
}
.occ-postop-video__play p { display: none; }
.occ-postop-video__thumb-wrap:hover .occ-postop-video__play {
transform: translate(-50%, -50%) scale(1.1);
background: #ffffff;
}
.occ-postop-video__content {
flex: 0 0 588px;
width: 588px;
display: flex;
flex-direction: column;
gap: 16px;
}
.occ-postop-video__title {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 800;
font-size: 36px;
line-height: 1.3;
color: #0052a3 !important;
margin: 0;
}
.occ-postop-video__body {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: #474747;
margin: 0;
}
/* Video popup modal */
.occ-video-modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
z-index: 99999;
align-items: center;
justify-content: center;
}
.occ-video-modal.is-open { display: flex; }
.occ-video-modal__inner {
position: relative;
width: 90%;
max-width: 960px;
aspect-ratio: 16 / 9;
}
.occ-video-modal__iframe {
width: 100%;
height: 100%;
border: 0;
border-radius: 8px;
}
.occ-video-modal__close {
position: absolute;
top: -44px;
right: 0;
background: none;
border: none;
color: #ffffff;
font-size: 36px;
cursor: pointer;
line-height: 1;
padding: 4px;
}
@media (max-width: 1200px) {
.occ-postop-video { padding: 64px 48px; gap: 40px; }
.occ-postop-video__content { flex: 1; min-width: 0; }
}
@media (max-width: 768px) {
.occ-postop-video { padding: 48px 24px; flex-direction: column; gap: 32px; }
.occ-postop-video__content { flex: none; width: 100%; }
.occ-postop-video__title { font-size: 28px; }
}
/* ── Post-Op Care — Replenishing Vitamins and Minerals (node 1048-5584) ── */
.occ-postop-vitamins {
max-width: 1440px;
margin: 0 auto;
padding: 0 120px;
display: flex;
flex-direction: column;
gap: 40px;
}
.occ-postop-vitamins__header {
display: flex;
flex-direction: column;
gap: 16px;
}
.occ-postop-vitamins__title {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 800;
font-size: 36px;
line-height: 1.3;
color: #0052a3 !important;
margin: 0;
}
.occ-postop-vitamins__body {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: #3b4344;
margin: 0;
}
.occ-postop-vitamins__cards {
display: flex;
gap: 24px;
align-items: stretch;
}
.occ-postop-vitamins__card {
flex: 1;
background: #f4f9ff;
border-radius: 20px;
padding: 32px;
display: flex;
flex-direction: column;
gap: 20px;
}
.occ-postop-vitamins__card-title {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 1.3;
color: #1a1a1a !important;
margin: 0;
}
.occ-postop-vitamins__card-list {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.6;
color: #474747;
margin: 0;
padding-left: 20px;
}
.occ-postop-vitamins__card-list li { list-style: disc; }
@media (max-width: 1200px) {
.occ-postop-vitamins { padding: 0 48px; }
}
@media (max-width: 768px) {
.occ-postop-vitamins { padding: 0 24px; gap: 24px; }
.occ-postop-vitamins__cards { flex-direction: column; }
.occ-postop-vitamins__title { font-size: 28px; }
}
/* ── Post-Op Care — Weight Loss Program Video (node 1048-5599) ── */
.occ-postop-wlp { max-width: 1440px; margin: 0 auto; padding: 80px 120px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.occ-postop-wlp__title { font-weight: 800; font-size: 36px; color: #0052a3 !important; text-align: center; width: 100%; }
.occ-postop-wlp__video-wrap { position: relative; width: 100%; border-radius: 20px; overflow: hidden; cursor: pointer; }
.occ-postop-wlp__video-wrap img { width: 100%; display: block; aspect-ratio: 836/470; object-fit: cover; border-radius: 20px; }
.occ-postop-wlp__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90px; height: 90px; background: rgba(255,255,255,0.92); border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.occ-postop-wlp__play::after { content: ''; display: block; border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent #0052a3; margin-left: 5px; }
@media (max-width: 1200px) {
.occ-postop-wlp { padding: 64px 48px; }
}
@media (max-width: 768px) {
.occ-postop-wlp { padding: 48px 24px; align-items: stretch; }
.occ-postop-wlp__title { font-size: 28px; text-align: center; }
.occ-postop-wlp__video-wrap { width: 100%; align-self: stretch; }
}
/* ── Post-Op Care — Five-Year Follow-up / Patient Testimonials (node 1048-5608) ── */
.occ-postop-followup { max-width: 1440px; margin: 0 auto; padding: 0 120px 80px; display: flex; flex-direction: column; gap: 30px; align-items: center; }
.occ-postop-followup__header { display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; width: 100%; }
.occ-postop-followup__title { font-weight: 800; font-size: 36px; color: #0052a3 !important; text-align: center; }
.occ-postop-followup__body { font-size: 16px; color: #474747; text-align: center; line-height: 1.6; }
.occ-postop-followup__videos { display: flex; gap: 24px; align-items: flex-start; width: 100%; }
.occ-postop-followup__video-card { flex: 1; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.occ-postop-followup__thumb { position: relative; width: 100%; border-radius: 20px; overflow: hidden; cursor: pointer; aspect-ratio: 16/9; }
.occ-postop-followup__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 20px; }
.occ-postop-followup__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90px; height: 90px; background: rgba(255,255,255,0.92); border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.occ-postop-followup__play::after { content: ''; display: block; border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent #0052a3; margin-left: 5px; }
.occ-postop-followup__caption { font-weight: 700; font-size: 20px; color: #474747 !important; text-align: center; line-height: 1.3; }
@media (max-width: 1200px) {
.occ-postop-followup { padding: 0 48px 64px; }
}
@media (max-width: 768px) {
.occ-postop-followup { padding: 0 24px 48px; }
.occ-postop-followup__title { font-size: 28px; }
.occ-postop-followup__videos { flex-direction: column; }
.occ-postop-followup__caption { font-size: 16px; }
}
/* ── Post-Op Care — Additional References (node 1048-5635) ── */
.occ-postop-refs { background: #f4f9ff; }
.occ-postop-refs__inner { max-width: 1440px; margin: 0 auto; padding: 80px 120px; display: flex; flex-direction: column; gap: 24px; align-items: center; }
.occ-postop-refs__title { font-weight: 800; font-size: 36px; color: #0052a3 !important; text-align: center; }
.occ-postop-refs__card { background: #ffffff; border: 1px solid #e5e5e3; border-radius: 8px; padding: 12px 20px; width: 588px; max-width: 100%; display: flex; align-items: center; gap: 12px; transition: box-shadow 0.2s; }
.occ-postop-refs__card:hover { box-shadow: 0 2px 12px rgba(0,82,163,0.1); }
.occ-postop-refs__card p { flex: 1; margin: 0; }
.occ-postop-refs__card a { font-weight: 700; font-size: 14px; color: #1a1a1a !important; text-decoration: none; line-height: 1.6; display: block; }
.occ-postop-refs__card a:hover { color: #0052a3 !important; }
.occ-postop-refs__card::after { content: ''; display: block; width: 8px; height: 8px; border-right: 2px solid #0052a3; border-top: 2px solid #0052a3; transform: rotate(45deg); flex-shrink: 0; margin-right: 2px; }
@media (max-width: 1200px) {
.occ-postop-refs__inner { padding: 64px 48px; }
.occ-postop-refs__card { width: 100%; }
}
@media (max-width: 768px) {
.occ-postop-refs__inner { padding: 48px 24px; }
.occ-postop-refs__title { font-size: 28px; }
}
/* ── Post-Op Care — Learn More Team Slider (node 989-6726) ── */
.occ-postop-team { max-width: 1440px; margin: 0 auto; padding: 80px 120px; display: flex; flex-direction: column; gap: 30px; align-items: center; }
.occ-postop-team__title { font-weight: 800; font-size: 36px; color: #0052a3 !important; text-align: center; width: 100%; }
.occ-postop-team__carousel { position: relative; width: 100%; }
.occ-postop-team__swiper { overflow: hidden; }
.occ-postop-team__slide { display: flex; flex-direction: column; gap: 16px; height: auto; }
.occ-postop-team__thumb { position: relative; width: 100%; border-radius: 20px; overflow: hidden; cursor: pointer; aspect-ratio: 16/9; }
.occ-postop-team__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.occ-postop-team__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; background: rgba(255,255,255,0.95); border-radius: 50%; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' width='32' height='32' fill='%230066cc' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center center; }
.occ-postop-team__play::after { display: none; }
.occ-postop-team__caption { font-weight: 700; font-size: 20px; color: #474747 !important; text-align: center; line-height: 1.3; margin: 0; padding-top:20px; }
.occ-postop-team__arrow { position: absolute; top: 42%; transform: translateY(-50%); z-index: 10; width: 43px; height: 43px; cursor: pointer; background: transparent none; border: none; padding: 0; transition: opacity 0.2s; }
.occ-postop-team__arrow > * { display: none; }
.occ-postop-team__arrow--prev { left: -22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='43' viewBox='0 0 43 43' fill='none'%3E%3Crect width='43' height='43' rx='21.5' transform='matrix(-1 0 0 1 43 0)' fill='%23F1F1F1'/%3E%3Cpath d='M17.5859 22.4375H29V20.5625H17.5859L22.8359 15.3125L21.5 14L14 21.5L21.5 29L22.8359 27.6875L17.5859 22.4375Z' fill='%231A1A1A'/%3E%3C/svg%3E"); background-size: cover; }
.occ-postop-team__arrow--prev::after { display: none !important; }
.occ-postop-team__arrow--next { right: -22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='43' viewBox='0 0 43 43' fill='none'%3E%3Crect width='43' height='43' rx='21.5' fill='%23F1F1F1'/%3E%3Cpath d='M25.4141 22.4375H14V20.5625H25.4141L20.1641 15.3125L21.5 14L29 21.5L21.5 29L20.1641 27.6875L25.4141 22.4375Z' fill='%231A1A1A'/%3E%3C/svg%3E"); background-size: cover; }
.occ-postop-team__arrow--next::after { display: none !important; }
.occ-postop-team__arrow.swiper-button-disabled { opacity: 0.35; pointer-events: none; }
@media (max-width: 1200px) { .occ-postop-team { padding: 60px 60px; } }
@media (max-width: 768px) { .occ-postop-team { padding: 48px 24px; } .occ-postop-team__title { font-size: 28px; } .occ-postop-team__arrow--prev { left: -10px; } .occ-postop-team__arrow--next { right: -10px; } .occ-postop-team__caption { font-size: 16px; } }
/* ── Mobile overflow guard ── */
@media (max-width: 768px) {
.entry-content, .wp-block-post-content { overflow-x: hidden; }
}
/* ── Mobile play icon size (56x56) ── */
@media (max-width: 768px) {
.occ-postop-video__play,
.occ-postop-wlp__play,
.occ-postop-followup__play,
.occ-postop-team__play { width: 56px !important; height: 56px !important; }
}
/* ═══════════════════════════════════════════════════════
SHARE YOUR STORY PAGE (occ-share-*)
═══════════════════════════════════════════════════════ */
/* ── 1. Intro paragraph ─────────────────────────────── */
.occ-share-intro {
padding: 80px 120px;
text-align: center;
}
.occ-share-intro__text {
font-size: 16px;
line-height: 1.6;
color: #474747;
max-width: 996px;
margin: 0 auto;
}
/* ── 2. We Want to See (image left, text right) ──────── */
.occ-share-wantsee {
padding: 0 120px 80px;
}
.occ-share-wantsee .wp-block-columns {
gap: 62px;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.occ-share-wantsee__col-img { flex: 0 0 550px; max-width: 550px; }
.occ-share-wantsee__col-text { flex: 0 0 588px; max-width: 588px; }
.occ-share-wantsee figure.wp-block-image {
border-radius: 20px; overflow: hidden; height: 393px; margin: 0;
}
.occ-share-wantsee figure.wp-block-image img {
height: 100%; width: 100%; object-fit: cover; border-radius: 20px;
}
.occ-share-wantsee__heading {
font-size: 36px; font-weight: 800; line-height: 1.3; color: #0052a3; margin-bottom: 16px;
}
.occ-share-wantsee__text { font-size: 16px; line-height: 1.6; color: #474747; }
/* ── 3. Share Your Weight Loss Story (Form) ─────────── */
.occ-share-form { background-color: #f4f9ff; padding: 80px 120px; }
.occ-share-form__heading {
font-size: 36px; font-weight: 800; line-height: 1.3; color: #0052a3;
text-align: center; margin-bottom: 30px;
}
.occ-share-form .wpcf7-form {
background: #fefefe; border: 1px solid #c9c9c9; border-radius: 20px;
padding: 48px; box-shadow: 0 0 10px rgba(26,26,26,0.1);
max-width: 1200px; margin: 0 auto;
}
.occ-share-form .wpcf7-form p { margin-bottom: 20px; }
.occ-share-form .wpcf7-text,
.occ-share-form .wpcf7-email,
.occ-share-form .wpcf7-tel,
.occ-share-form .wpcf7-number,
.occ-share-form .wpcf7-select,
.occ-share-form .wpcf7-textarea {
width: 100%; background: #fff; border: 1px solid #c9c9c9;
border-radius: 8px; padding: 12px 16px; font-size: 14px; color: #474747; font-family: inherit;
}
.occ-share-form .wpcf7-textarea { height: 88px; resize: vertical; }
.occ-share-form .wpcf7-submit {
width: 100%; background: #0066cc; color: #fff; border: none;
border-radius: 8px; padding: 12px 24px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.occ-share-form .wpcf7-submit:hover { background: #0052a3; }
.occ-share-form .wpcf7-acceptance span { font-size: 14px; color: #999; }
.occ-share-form .wpcf7-file {
background: #f4f9ff; border: 1px dashed #0066cc; border-radius: 8px; padding: 16px; width: 100%;
}
/* ── 4. Physical Changes are Inspiring (text left, image right) ── */
.occ-share-inspiring { padding: 80px 120px 0; }
.occ-share-inspiring .wp-block-columns {
gap: 62px; align-items: center; max-width: 1200px; margin: 0 auto;
}
.occ-share-inspiring__col-text { flex: 0 0 588px; max-width: 588px; }
.occ-share-inspiring__col-img { flex: 0 0 550px; max-width: 550px; }
.occ-share-inspiring figure.wp-block-image {
border-radius: 20px; overflow: hidden; height: 375px; margin: 0;
}
.occ-share-inspiring figure.wp-block-image img {
height: 100%; width: 100%; object-fit: cover; border-radius: 20px;
}
.occ-share-inspiring__heading {
font-size: 36px; font-weight: 800; line-height: 1.3; color: #0052a3; margin-bottom: 16px;
}
.occ-share-inspiring__text { font-size: 16px; line-height: 1.6; color: #474747; }
/* ── 5. Actual Patient Testimonials ─────────────────── */
.occ-share-testimonials { padding: 80px 120px; background: #fff; }
.occ-share-testimonials__heading {
font-size: 36px; font-weight: 800; line-height: 1.3; color: #0052a3;
text-align: center; margin-bottom: 30px;
}
.occ-share-testimonials .wp-block-columns { gap: 24px; max-width: 1200px; margin: 0 auto; }
.occ-share-testimonials__card { display: flex; flex-direction: column; gap: 20px; }
.occ-share-testimonials__thumb figure.wp-block-image { border-radius: 20px; overflow: hidden; margin: 0; }
.occ-share-testimonials__thumb figure.wp-block-image img {
width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 20px; display: block;
}
.occ-share-testimonials__title {
font-size: 20px; font-weight: 700; color: #474747; text-align: center; margin: 0;
}
/* ── 6. Upload Images of Your Transformation ─────────── */
.occ-share-upload { padding: 0 120px 80px; }
.occ-share-upload .wp-block-columns {
gap: 62px; align-items: center; max-width: 1200px; margin: 0 auto;
}
.occ-share-upload__col-text { flex: 0 0 588px; max-width: 588px; }
.occ-share-upload__col-img { flex: 0 0 550px; max-width: 550px; }
.occ-share-upload figure.wp-block-image {
border-radius: 20px; overflow: hidden; margin: 0; min-height: 400px;
}
.occ-share-upload figure.wp-block-image img {
width: 100%; min-height: 400px; object-fit: cover; border-radius: 20px; display: block;
}
.occ-share-upload__heading {
font-size: 36px; font-weight: 800; line-height: 1.3; color: #0052a3; margin-bottom: 16px;
}
.occ-share-upload__text { font-size: 16px; line-height: 1.6; color: #474747; margin-bottom: 30px; }
.occ-share-upload__checklist { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.occ-share-upload__check-item {
background: #e8f0ff; border-radius: 8px; padding: 8px 12px;
font-size: 14px; color: #1a1a1a; line-height: 1.6; margin: 0 !important;
}
.occ-share-upload__check-mark { color: #0066cc; font-size: 20px; font-weight: 700; line-height: 1.3; }
.occ-share-upload__closing { font-size: 14px; font-weight: 700; color: #474747; margin: 0 !important; }
/* ── 7. CTA – Ready to Transform Your Life ───────────── */
.occ-share-cta { padding: 80px 120px; }
.occ-share-cta .wp-block-group.occ-share-cta {
border-radius: 20px; overflow: hidden; padding: 64px 48px;
background-color: #262626; text-align: center; max-width: 1200px; margin: 0 auto;
}
.occ-share-cta__heading {
font-size: 36px; font-weight: 800; color: #fff; text-align: center; margin-bottom: 20px;
}
.occ-share-cta__text { font-size: 16px; color: #fff; text-align: center; margin-bottom: 20px; }
.occ-share-cta__buttons { justify-content: center !important; gap: 16px; }
.occ-share-cta__btn-primary .wp-block-button__link {
background: #0066cc !important; color: #fff !important;
border-radius: 8px; padding: 12px 24px; font-size: 14px; font-weight: 700;
border: none; text-decoration: none;
}
.occ-share-cta__btn-primary .wp-block-button__link:hover { background: #0052a3 !important; }
.occ-share-cta__btn-secondary .wp-block-button__link {
background: #fff !important; color: #0066cc !important;
border-radius: 8px; padding: 12px 24px; font-size: 14px; font-weight: 700;
border: 1px solid #0066cc; text-decoration: none;
}
.occ-share-cta__btn-secondary .wp-block-button__link:hover { background: #f4f9ff !important; }
/* ── Share Your Story Responsive ────────────────────── */
@media (max-width: 1200px) {
.occ-share-intro,
.occ-share-wantsee,
.occ-share-form,
.occ-share-inspiring,
.occ-share-testimonials,
.occ-share-upload,
.occ-share-cta { padding-left: 40px; padding-right: 40px; }
.occ-share-wantsee__col-img,.occ-share-wantsee__col-text,
.occ-share-inspiring__col-text,.occ-share-inspiring__col-img,
.occ-share-upload__col-text,.occ-share-upload__col-img { flex: 1 1 auto; max-width: 100%; }
}
@media (max-width: 768px) {
.occ-share-intro,
.occ-share-form,
.occ-share-inspiring,
.occ-share-testimonials,
.occ-share-upload,
.occ-share-cta { padding-left: 20px; padding-right: 20px; padding-top: 48px; padding-bottom: 48px; }
.occ-share-wantsee { padding-left: 20px; padding-right: 20px; padding-top: 0px; padding-bottom: 48px; }
.occ-share-wantsee .wp-block-columns,
.occ-share-inspiring .wp-block-columns,
.occ-share-upload .wp-block-columns { flex-direction: column; gap: 32px; }
.occ-share-wantsee__col-img,.occ-share-wantsee__col-text,
.occ-share-inspiring__col-text,.occ-share-inspiring__col-img,
.occ-share-upload__col-text,.occ-share-upload__col-img { flex: 1 1 100%; max-width: 100%; }
.occ-share-wantsee figure.wp-block-image,
.occ-share-inspiring figure.wp-block-image { height: 260px; }
.occ-share-wantsee__heading,.occ-share-inspiring__heading,
.occ-share-upload__heading,.occ-share-form__heading,
.occ-share-testimonials__heading,.occ-share-cta__heading { font-size: 28px; }
.occ-share-testimonials .wp-block-columns { flex-direction: column; gap: 32px; }
.occ-share-form .wpcf7-form { padding: 24px 20px; }
.occ-share-cta__buttons { flex-direction: column; align-items: center; }
}
/* ── occ-share-wantsee alignment fix ──────────────────────────── */
.occ-share-wantsee .wp-block-columns {
align-items: center !important;
}
.occ-share-wantsee__col-text {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 16px !important;
}
.occ-share-wantsee__col-text .wp-block-heading,
.occ-share-wantsee__col-text p {
margin-bottom: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════
occ-share-form — Share Your Weight Loss Story section
Figma node 1061-5992
═══════════════════════════════════════════════════════════════ */
/* ── Section wrapper ────────────────────────────────────────── */
.occ-share-form {
background: #f4f9ff;
padding: 80px 0;
box-sizing: border-box;
}
/* ── Inner container (max-width centred) ────────────────────── */
.occ-share-form__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
box-sizing: border-box;
}
/* ── Heading ────────────────────────────────────────────────── */
.occ-share-form__heading {
font-size: 36px !important;
font-weight: 800 !important;
color: #0052a3 !important;
text-align: center;
line-height: 1.3;
margin-bottom: 30px !important;
}
/* ── CF7 card ───────────────────────────────────────────────── */
.occ-share-form .wpcf7 {
background: #fefefe;
border: 1px solid #c9c9c9;
box-shadow: 0 0 10px rgba(26,26,26,0.1);
border-radius: 20px;
padding: 48px;
box-sizing: border-box;
max-width: 1200px;
margin: 0 auto;
}
/* Reset inner wpcf7-form (theme may add card styles to form element) */
.occ-share-form .wpcf7-form {
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
margin: 0 !important;
}
/* Remove CF7 auto-generated br/p spacing */
.occ-share-form .wpcf7 br { display: none; }
.occ-share-form .wpcf7 p { margin: 0; padding: 0; }
/* ── 2-column rows ──────────────────────────────────────────── */
.occ-story-form__row {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.occ-story-form__row > p {
display: flex;
gap: 20px;
width: 100%;
margin: 0;
padding: 0;
}
.occ-story-form__row > p > br { display: none; }
.occ-story-form__row .wpcf7-form-control-wrap {
flex: 1;
min-width: 0;
display: block;
}
/* ── Full-width fields ──────────────────────────────────────── */
.occ-story-form__field-full {
margin-bottom: 20px;
}
.occ-story-form__field-full > p {
margin: 0;
padding: 0;
display: block;
}
.occ-story-form__field-full .wpcf7-form-control-wrap {
display: block;
width: 100%;
}
/* ── All inputs / select / textarea ────────────────────────── */
.occ-share-form .wpcf7-form-control.wpcf7-text,
.occ-share-form .wpcf7-form-control.wpcf7-tel,
.occ-share-form .wpcf7-form-control.wpcf7-email,
.occ-share-form .wpcf7-form-control.wpcf7-select,
.occ-share-form .wpcf7-form-control.wpcf7-textarea {
width: 100%;
background: #fff;
border: 1px solid #c9c9c9;
border-radius: 8px;
padding: 12px 16px;
font-size: 14px;
font-family: 'Plus Jakarta Sans', sans-serif;
color: #474747;
box-sizing: border-box;
outline: none;
line-height: 1.6;
height: 47px;
transition: border-color 0.2s;
display: block;
}
.occ-share-form .wpcf7-form-control.wpcf7-text:focus,
.occ-share-form .wpcf7-form-control.wpcf7-tel:focus,
.occ-share-form .wpcf7-form-control.wpcf7-email:focus,
.occ-share-form .wpcf7-form-control.wpcf7-select:focus,
.occ-share-form .wpcf7-form-control.wpcf7-textarea:focus {
border-color: #0066cc;
outline: none;
}
.occ-share-form .wpcf7-form-control.wpcf7-textarea {
height: 88px;
resize: vertical;
}
/* Select — custom chevron */
.occ-share-form .wpcf7-form-control.wpcf7-select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23474747' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
cursor: pointer;
}
/* ── Acceptance checkboxes ──────────────────────────────────── */
.occ-story-form__check {
margin-bottom: 20px;
}
.occ-story-form__check > p { margin: 0; padding: 0; }
.occ-story-form__check .wpcf7-acceptance { display: block; }
.occ-story-form__check .wpcf7-acceptance label {
display: flex;
align-items: flex-start;
gap: 8px;
cursor: pointer;
}
.occ-story-form__check .wpcf7-acceptance input[type="checkbox"] {
width: 18px;
height: 18px;
min-width: 18px;
border: 1.3px solid #999;
border-radius: 3px;
margin-top: 3px;
cursor: pointer;
accent-color: #0066cc;
flex-shrink: 0;
}
.occ-story-form__check .wpcf7-list-item-label {
font-size: 14px;
font-family: 'Plus Jakarta Sans', sans-serif;
color: #999;
line-height: 1.6;
}
/* ── Upload boxes ───────────────────────────────────────────── */
.occ-story-form__uploads {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.occ-story-form__upload-box {
flex: 1;
min-width: 0;
background: #fff;
border: 1px solid #c9c9c9;
border-radius: 8px;
padding: 12px 16px;
box-sizing: border-box;
}
.occ-story-form__upload-label {
font-size: 14px !important;
font-weight: 700 !important;
color: #3b4344 !important;
text-align: center;
margin: 0 0 10px !important;
padding: 0 !important;
font-family: 'Plus Jakarta Sans', sans-serif;
display: block;
}
.occ-story-form__upload-area {
background: #f4f9ff;
border: 1.5px dashed #0066cc;
border-radius: 8px;
padding: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
cursor: pointer;
min-height: 150px;
box-sizing: border-box;
}
.occ-story-form__upload-area > p {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin: 0;
padding: 0;
width: 100%;
position: relative;
}
.occ-story-form__upload-area > p > br { display: none; }
.occ-story-form__upload-icon {
width: 38px;
height: 30px;
display: block;
pointer-events: none;
}
.occ-story-form__upload-text {
font-size: 14px;
font-weight: 700;
color: #474747;
font-family: 'Plus Jakarta Sans', sans-serif;
text-align: center;
pointer-events: none;
}
.occ-story-form__upload-hint {
font-size: 13px;
color: #474747;
font-family: 'Plus Jakarta Sans', sans-serif;
text-align: center;
pointer-events: none;
}
/* File input overlays entire upload area */
.occ-story-form__upload-area .wpcf7-form-control-wrap {
position: absolute !important;
top: 0 !important; left: 0 !important;
right: 0 !important; bottom: 0 !important;
opacity: 0 !important;
z-index: 2 !important;
margin: 0 !important;
width: 100% !important;
height: 100% !important;
cursor: pointer;
}
.occ-story-form__upload-area .wpcf7-form-control-wrap input[type="file"] {
width: 100% !important;
height: 100% !important;
cursor: pointer;
display: block;
}
.occ-story-form__browse-btn {
background: #fff;
border: 1px solid #0066cc;
border-radius: 8px;
padding: 7px 24px;
font-size: 14px;
font-weight: 700;
color: #0066cc;
font-family: 'Plus Jakarta Sans', sans-serif;
cursor: pointer;
pointer-events: none;
line-height: 1.6;
position: relative;
z-index: 1;
}
/* ── Submit button ──────────────────────────────────────────── */
.occ-share-form .occ-story-form__submit,
.occ-share-form input[type="submit"] {
width: 100%;
background: #0066cc !important;
color: #fff !important;
border: none;
border-radius: 8px;
padding: 12px 24px;
font-size: 14px;
font-weight: 700;
font-family: 'Plus Jakarta Sans', sans-serif;
cursor: pointer;
height: 47px;
transition: background 0.2s;
display: block;
box-sizing: border-box;
}
.occ-share-form .occ-story-form__submit:hover,
.occ-share-form input[type="submit"]:hover {
background: #0052a3 !important;
}
/* Validation */
.occ-share-form .wpcf7-not-valid-tip {
font-size: 12px;
color: #e53935;
margin-top: 4px;
display: block;
}
.occ-share-form .wpcf7-not-valid {
border-color: #e53935 !important;
}
/* ══════════════════════════════════════════════════════════════
RESPONSIVE — occ-share-form
══════════════════════════════════════════════════════════════ */
/* ── Tablet (≤ 1024px) ──────────────────────────────────────── */
@media (max-width: 1024px) {
.occ-share-form {
padding: 60px 0;
}
.occ-share-form__inner {
padding: 0 40px;
}
.occ-share-form .wpcf7 {
padding: 36px;
}
}
/* ── Mobile (≤ 768px) ───────────────────────────────────────── */
@media (max-width: 768px) {
.occ-share-form {
padding: 48px 0;
}
.occ-share-form__inner {
padding: 0 20px;
}
.occ-share-form__heading {
font-size: 26px !important;
margin-bottom: 24px !important;
}
.occ-share-form .wpcf7 {
padding: 24px 20px;
border-radius: 16px;
}
/* Stack 2-col rows into 1 col */
.occ-story-form__row {
flex-direction: column;
gap: 16px;
}
.occ-story-form__row > p {
flex-direction: column;
gap: 16px;
}
.occ-story-form__row,
.occ-story-form__field-full {
margin-bottom: 16px;
}
/* Stack upload boxes */
.occ-story-form__uploads {
flex-direction: column;
gap: 16px;
margin-bottom: 16px;
}
.occ-story-form__upload-box {
width: 100%;
}
.occ-story-form__upload-area {
min-height: 130px;
}
.occ-story-form__check {
margin-bottom: 16px;
}
/* Tighten inputs */
.occ-share-form .wpcf7-form-control.wpcf7-text,
.occ-share-form .wpcf7-form-control.wpcf7-tel,
.occ-share-form .wpcf7-form-control.wpcf7-email,
.occ-share-form .wpcf7-form-control.wpcf7-select,
.occ-share-form .wpcf7-form-control.wpcf7-textarea {
font-size: 16px; /* prevent iOS zoom */
}
.occ-share-form .occ-story-form__submit,
.occ-share-form input[type="submit"] {
height: 50px;
font-size: 16px;
}
}
/* ── Small mobile (≤ 480px) ─────────────────────────────────── */
@media (max-width: 480px) {
.occ-share-form__inner {
padding: 0 16px;
}
.occ-share-form .wpcf7 {
padding: 20px 16px;
}
}
/* occ-share-inspire section */
.occ-share-inspire { padding: 80px 120px 0; }
.occ-share-inspire .wp-block-columns { gap: 62px; align-items: center !important; max-width: 1200px; margin: 0 auto; }
.occ-share-inspire__col-text { display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 16px !important; }
.occ-share-inspire__col-text .wp-block-heading,
.occ-share-inspire__col-text p { margin-bottom: 0 !important; }
.occ-share-inspire__heading { font-size: 36px !important; font-weight: 800 !important; color: #0052a3 !important; line-height: 1.3; }
.occ-share-inspire__text { font-size: 16px; line-height: 1.6; color: #474747; }
.occ-share-inspire figure.wp-block-image { border-radius: 20px; overflow: hidden; height: 375px; margin: 0; }
.occ-share-inspire figure.wp-block-image img { height: 100%; width: 100%; object-fit: cover; border-radius: 20px; }
@media (max-width: 1200px) { .occ-share-inspire { padding: 60px 40px 0; } }
@media (max-width: 768px) {
.occ-share-inspire { padding: 48px 20px 0; }
.occ-share-inspire .wp-block-columns { flex-direction: column !important; gap: 32px !important; }
.occ-share-inspire__col-text,
.occ-share-inspire__col-img { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
.occ-share-inspire figure.wp-block-image { height: 280px; }
.occ-share-inspire__heading { font-size: 28px !important; }
}
/* ── occ-vid-test: next arrow restores to grey-default per Figma ── */
/* ── occ-vid-test video modal: center when frame is direct child of modal root ── */
#occ-video-modal > .occ-video-modal__frame {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10001;
width: 90vw;
max-width: 960px;
aspect-ratio: 16 / 9;
background: #000;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 24px 80px rgba(0,0,0,0.7);
}
#occ-video-modal > .occ-video-modal__frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* ── occ-vid-test block: padding (block renders as div, section rule doesn't apply) ── */
div.occ-vid-test {
padding: 48px 20px !important;
}
@media (min-width: 768px) {
div.occ-vid-test {
padding: 60px 40px !important;
}
}
@media (min-width: 1200px) {
div.occ-vid-test {
padding: 80px 120px !important;
}
}
/* ── occ-vid-test: heading bottom margin (gap between title and carousel) ── */
.occ-vid-test .occ-vid-test__heading {
margin-bottom: 40px !important;
color: #0052a3 !important;
}
/* ── occ-vid-test: caption style ── */
.occ-vid-test .occ-vid-test__caption {
font-size: 16px !important;
font-weight: 600 !important;
color: #474747 !important;
margin-top: 14px !important;
line-height: 1.4 !important;
}
/* ═══════════════════════════════════════════════════════
occ-share-upload — Upload Images of Your Transformation
Figma node 1061-6706
═══════════════════════════════════════════════════════ */
.occ-share-upload {
padding: 0px 120px;
}
.occ-share-upload__inner {
display: flex;
gap: 40px;
align-items: center;
max-width: 1200px !important;
width: 100%;
margin: 0 auto;
}
.occ-share-upload__content {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 30px;
}
.occ-share-upload__heading.wp-block-heading {
font-size: 36px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0052a3 !important;
margin: 0 !important;
}
.occ-share-upload__body {
font-size: 16px !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 !important;
}
.occ-share-upload__checklist {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
.occ-share-upload__check-item {
display: flex !important;
gap: 12px;
align-items: flex-start;
background: #e8f0ff;
border-radius: 8px;
padding: 8px 12px;
}
.occ-share-upload__check-icon {
font-size: 20px !important;
font-weight: 700 !important;
color: #0066cc !important;
line-height: 1.3 !important;
margin: 0 !important;
flex-shrink: 0;
min-width: 20px;
}
.occ-share-upload__check-text {
font-size: 14px !important;
line-height: 1.6 !important;
color: #1a1a1a !important;
margin: 0 !important;
flex: 1;
}
.occ-share-upload__check-text a,
.occ-share-upload__check-text strong a {
color: #0052a3 !important;
font-weight: 700 !important;
text-decoration: none;
}
.occ-share-upload__footer {
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.6 !important;
color: #474747 !important;
margin: 0 !important;
}
.occ-share-upload__image {
flex: 1 1 0;
min-width: 0;
align-self: stretch;
margin: 0 !important;
}
.occ-share-upload__image img {
border-radius: 20px !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block;
}
@media (max-width: 1440px) {
.occ-share-form{padding-left:20px; padding-right:20px;}
}
@media (max-width: 1199px) {
.occ-share-upload {
padding: 0px 40px;
}
.occ-share-upload__inner {
gap: 40px;
}
.occ-share-upload__content {
flex: 1 1 0;
min-width: 0;
}
.occ-share-upload__image {
flex: 1 1 0;
min-width: 0;
}
}
@media (max-width: 767px) {
.occ-share-upload {
padding:0px 20px;
}
.occ-share-upload__inner {
flex-direction: column;
gap: 32px;
}
.occ-share-upload__content {
flex: 0 0 auto;
max-width: 100%;
}
.occ-share-upload__image {
flex: 0 0 auto;
max-width: 100%;
width: 100%;
align-self: auto;
}
}
/* ── Mobile: image-first ordering ────────────────────────────────────────── */
/* "Your Physical Changes are Inspiring!" — WP columns stack at 782px */
@media (max-width: 782px) {
.occ-share-inspire__col-img {
order: -1 !important;
}
.occ-share-inspire__col-text {
order: 1 !important;
}
}
/* "Upload Images of Your Transformation" — custom flex stacks at 767px */
@media (max-width: 767px) {
.occ-share-upload__image {
order: -1 !important;
}
.occ-share-upload__content {
order: 1 !important;
}
.occ-share-upload__heading.wp-block-heading{
font-size:28px !important;
}
.occ-share-upload__checklist{
margin-bottom:0;
}
}
/* ── occ-vid-test: fix double gap (Gutenberg is-layout-flow gap:24px + Swiper margin-right:24px = 48px)
Zero out the flex gap so only Swiper's own spaceBetween spacing applies ── */
.occ-vid-test__swiper .swiper-wrapper {
gap: 0 !important;
}
/* ── occ-postop-team: carousel arrow hover → blue (Figma) ── */
.occ-postop-team__arrow {
cursor: pointer;
}
.occ-postop-team__arrow--prev:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='43' viewBox='0 0 43 43' fill='none'%3E%3Crect width='43' height='43' rx='21.5' transform='matrix(-1 0 0 1 43 0)' fill='%230066CC'/%3E%3Cpath d='M17.5859 22.4375H29V20.5625H17.5859L22.8359 15.3125L21.5 14L14 21.5L21.5 29L22.8359 27.6875L17.5859 22.4375Z' fill='%23FFFFFF'/%3E%3C/svg%3E") !important;
}
.occ-postop-team__arrow--next:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='43' viewBox='0 0 43 43' fill='none'%3E%3Crect width='43' height='43' rx='21.5' fill='%230066CC'/%3E%3Cpath d='M25.4141 22.4375H14V20.5625H25.4141L20.1641 15.3125L21.5 14L29 21.5L21.5 29L20.1641 27.6875L25.4141 22.4375Z' fill='%23FFFFFF'/%3E%3C/svg%3E") !important;
}
.occ-postop-team__arrow.swiper-button-disabled {
opacity: 0.35;
pointer-events: none;
cursor: default;
}
/* ── occ-referral-inner-card: fix flex overflow on mobile (align-items:center causes text to stretch beyond card) ── */
@media (max-width: 767px) {
.occ-referral-inner-card.wp-block-group {
align-items: stretch !important;
}
.occ-referral-inner-text {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
}
.occ-referral-inner-title {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
}
/* ── occ-about-videos: desktop arrows — show mnav absolutely at slider sides ── */
.occ-about-videos {
position: relative;
}
@media (min-width: 768px) {
.occ-about-videos__mnav {
display: flex !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1244px;
justify-content: space-between;
align-items: center;
margin: 0 !important;
pointer-events: none;
z-index: 5;
gap: 0 !important;
}
.occ-about-videos__mnav-prev,
.occ-about-videos__mnav-next {
pointer-events: all;
}
.occ-about-videos__mnav-prev:hover svg circle,
.occ-about-videos__mnav-next:hover svg circle,
.occ-about-videos__mnav-prev:hover svg rect,
.occ-about-videos__mnav-next:hover svg rect {
fill: #0066CC !important;
}
.occ-about-videos__mnav-prev:hover svg path,
.occ-about-videos__mnav-next:hover svg path,
.occ-about-videos__mnav-prev:hover svg polyline,
.occ-about-videos__mnav-next:hover svg polyline {
stroke: #ffffff !important;
fill: #ffffff !important;
}
}
/* ════════════════════════════════════════════════════════════════════
ABOUT OCC — 7 issue fixes (2026-05-30)
════════════════════════════════════════════════════════════════════ */
/* Issue 1: Mobile intro — ensure image column shows above text */
@media (max-width: 767px) {
.occ-about-intro__img-wrap {
display: block !important;
width: 100% !important;
height: 260px !important;
flex: 0 0 100% !important;
border-radius: 16px !important;
overflow: hidden !important;
min-width: 0 !important;
}
}
/* Issue 2: Override WP core align-items:normal on wp-block-columns */
.wp-block-columns {
align-items: center !important;
}
/* Issue 3: Image border-radius preserved on mobile */
.occ-about-intro__img-wrap,
.occ-about-more__img-wrap,
.occ-about-medical__img-wrap {
border-radius: 20px !important;
overflow: hidden !important;
}
@media (max-width: 767px) {
.occ-about-intro__img-wrap,
.occ-about-more__img-wrap,
.occ-about-medical__img-wrap {
border-radius: 16px !important;
}
}
/* Issue 4: Mobile section headings → 28px */
@media (max-width: 767px) {
.occ-about-intro__title,
.occ-about-more__title,
.occ-about-medical__title,
.occ-about-highlights__title {
font-size: 28px !important;
line-height: 1.3 !important;
}
}
/* Issue 5: More about OCC — align content flush left */
.occ-about-more__inner {
justify-content: flex-start !important;
}
/* Issue 6: vtabs arrows — grey default (desaturate SVG image), blue on hover */
.occ-about-vtabs__prev img,
.occ-about-vtabs__next img {
filter: grayscale(100%) brightness(0.85) !important;
}
.occ-about-vtabs__prev:hover img,
.occ-about-vtabs__next:hover img {
filter: none !important;
}
/* Disabled prev arrow on first slide */
.occ-about-vtabs__prev.is-inactive,
.occ-about-vtabs__mnav-prev.is-inactive {
opacity: 0.35 !important;
pointer-events: none !important;
cursor: default !important;
}
/* Issue 7: Video slider — prev arrow disabled state + center arrows on video area */
.occ-about-videos__mnav-prev.is-inactive {
opacity: 0.35 !important;
pointer-events: none !important;
cursor: default !important;
}
@media (min-width: 768px) {
/* Center arrows on video thumbs not full section height */
.occ-about-videos__mnav {
top: 38% !important;
}
}
/* ════════════════════════════════════════════════════════════════
5-issue batch fix (2026-05-30 v2)
════════════════════════════════════════════════════════════════ */
/* Issue 1: Remove vertical padding from occ-about-more everywhere */
.occ-about-more,
.occ-about-page .occ-about-more {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Issue 2: Hide video slider arrows on desktop (only 2 slides) */
@media (min-width: 768px) {
.occ-about-videos__mnav {
display: none !important;
}
}
/* Issue 3: Fix Medical Tourism image — object-fit: cover */
.occ-about-medical__img {
object-fit: cover !important;
width: 100% !important;
height: 100% !important;
}
/* Issue 4: vtabs arrows — Figma colors + hover effect + SVG styling */
.occ-about-vtabs__prev,
.occ-about-vtabs__next {
background: transparent !important;
border: none !important;
padding: 0 !important;
cursor: pointer !important;
}
.occ-about-vtabs__prev img,
.occ-about-vtabs__next img {
display: none !important;
}
.occ-about-vtabs__prev svg rect,
.occ-about-vtabs__next svg rect {
fill: #F1F1F1;
transition: fill 0.2s ease;
}
.occ-about-vtabs__prev svg path,
.occ-about-vtabs__next svg path {
fill: #999999;
transition: fill 0.2s ease;
}
.occ-about-vtabs__prev:hover svg rect,
.occ-about-vtabs__next:hover svg rect {
fill: #0066CC !important;
}
.occ-about-vtabs__prev:hover svg path,
.occ-about-vtabs__next:hover svg path {
fill: #ffffff !important;
}
/* Arrow position: slightly inside the slide (overlapping) */
.occ-about-vtabs__prev {
left: -22px !important;
}
.occ-about-vtabs__next {
right: -22px !important;
}
/* Issue 5: Mobile intro — ensure columns stack and image shows */
@media (max-width: 767px) {
.occ-about-intro__inner.wp-block-columns,
.wp-block-columns.occ-about-intro__inner {
flex-wrap: wrap !important;
flex-direction: column !important;
}
.wp-block-column.occ-about-intro__img-wrap {
width: 100% !important;
flex: 0 0 100% !important;
height: 260px !important;
border-radius: 16px !important;
overflow: hidden !important;
}
.wp-block-column.occ-about-intro__content {
width: 100% !important;
flex: 0 0 100% !important;
}
.occ-about-intro__img-wrap .wp-block-image,
.occ-about-intro__img-wrap .wp-block-image figure,
.occ-about-intro__img-wrap img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
}
/* ── Fix: Intro + Medical images below 991px — add height so image doesn't collapse ── */
@media (max-width: 991px) {
/* Intro: img-wrap needs explicit height when columns stack */
.occ-about-intro__img-wrap {
height: 300px !important;
}
/* Medical: stack at 991px + give img a height */
.occ-about-medical__inner {
flex-direction: column !important;
gap: 32px !important;
}
.occ-about-medical__img-wrap {
width: 100% !important;
height: 340px !important;
flex: 0 0 100% !important;
}
.occ-about-medical__col-text {
width: 100% !important;
flex: 0 0 100% !important;
}
}
/* ── Fix: vtabs tab buttons — center horizontally ── */
.occ-about-vtabs__tabs {
justify-content: center !important;
}
/* ── Fix: More about OCC mobile — reduce gap around image ── */
@media (max-width: 767px) {
.occ-about-more__inner {
gap: 24px !important;
flex-direction: column !important;
}
.occ-about-more__img-wrap {
width: 100% !important;
height: 220px !important;
}
.occ-about-more__content {
width: 100% !important;
}
}
/* ── Fix: Intro image — figure + img must fill the wrap with object-fit:cover ── */
.occ-about-intro__img-wrap .wp-block-image,
.occ-about-intro__img.wp-block-image {
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
}
.occ-about-intro__img-wrap .wp-block-image img,
.occ-about-intro__img.wp-block-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
}
/* Same fix for medical tourism */
.occ-about-medical__img-wrap .wp-block-image {
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
}
.occ-about-medical__img-wrap .wp-block-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
}
/* ── Fix: Mobile highlights subtitle font-size → 22px ── */
@media (max-width: 767px) {
.occ-about-highlights__subtitle {
font-size: 22px !important;
line-height: 1.3 !important;
}
}
/* ── Fix: Mobile tabs — allow scroll/wrap to prevent cut-off ── */
@media (max-width: 767px) {
.occ-about-vtabs__tabs {
justify-content: flex-start !important;
overflow-x: auto !important;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
padding-bottom: 4px !important;
}
.occ-about-vtabs__tabs::-webkit-scrollbar {
display: none !important;
}
.occ-about-vtabs__tab {
flex-shrink: 0 !important;
}
}
/* ── Fix 1: Remove padding-bottom from occ-about-more__inner on mobile ── */
@media (max-width: 767px) {
.occ-about-more__inner {
padding-bottom: 0 !important;
}
}
/* ── Fix 2: Mobile intro image — explicit px heights to ensure visibility ── */
@media (max-width: 767px) {
/* Column itself */
.occ-about-intro__img-wrap,
.wp-block-column.occ-about-intro__img-wrap {
display: block !important;
width: 100% !important;
height: 260px !important;
min-height: 260px !important;
flex: 0 0 100% !important;
overflow: hidden !important;
border-radius: 16px !important;
}
/* Figure — explicit 260px not 100% */
.occ-about-intro__img,
.wp-block-image.occ-about-intro__img,
.occ-about-intro__img-wrap figure {
display: block !important;
width: 100% !important;
height: 260px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Image itself */
.occ-about-intro__img img,
.occ-about-intro__img-wrap img {
width: 100% !important;
height: 260px !important;
object-fit: cover !important;
object-position: center top !important;
display: block !important;
}
}
/* ── Fix 3: OCC Difference heading + all section headings → 28px mobile ── */
@media (max-width: 767px) {
.occ-diff__heading,
.occ-diff h2,
.occ-diff h3,
.occ-about-story h2,
.occ-about-vtabs h2,
.occ-about-highlights h2,
.occ-about-facility h2, .occ-about-financing__title {
font-size: 28px !important;
line-height: 1.3 !important;
}
}
/* ════════════════════════════════════════════════════════════════════
FOOTER — Responsive + Accordion fixes
════════════════════════════════════════════════════════════════════ */
/* ── Footer: responsive typography ≤ 991px ── */
@media (max-width: 991px) {
.occ-footer__heading {
font-size: 16px !important;
}
.occ-footer__middle {
padding-top: 16px !important;
}
.occ-footer__links a,
.occ-footer__contact {
font-size: 14px !important;
}
.occ-footer__middle{margin-top:0px;}
}
/* ── Footer: desktop ≥ 992px — headings NOT clickable, content always visible ── */
@media (min-width: 992px) {
details.occ-footer__col > .occ-footer__links,
details.occ-footer__col > ul {
display: block !important;
}
details.occ-footer__col > summary.occ-footer__heading {
cursor: default !important;
pointer-events: none !important;
list-style: none !important;
}
details.occ-footer__col > summary.occ-footer__heading::marker,
details.occ-footer__col > summary.occ-footer__heading::-webkit-details-marker {
display: none !important;
}
}
/* ── Footer payment icons — exact Figma specs (node 464:2359) ── */
/* Container for all 3 icons */
.occ-footer__payments {
display: flex !important;
flex-direction: row !important;
gap: 11px !important;
align-items: center !important;
}
/* Each payment icon card: 48×30px, rounded 5px */
.occ-footer__payment {
width: 48px !important;
height: 30px !important;
border-radius: 5px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
position: relative !important;
}
/* Afterpay: mint #b2fce5 bg + drop shadow */
.occ-footer__payment--afterpay {
background: #b2fce5 !important;
box-shadow: 0 0 10px rgba(0,0,0,0.07) !important;
}
/* PayPal: white bg + drop shadow */
.occ-footer__payment--paypal {
background: #ffffff !important;
box-shadow: 0 0 10px rgba(0,0,0,0.07) !important;
}
/* Image inside each card: inner logo sizing */
.occ-footer__payment img {
height: 16px !important;
width: auto !important;
max-width: 35px !important;
object-fit: contain !important;
display: block !important;
position: relative !important;
z-index: 1 !important;
}
/* Bottom bar: gap 20px between payment-group, separator, Made By Alian */
.occ-footer__bottom-right {
gap: 20px !important;
}
.occ-footer__payment-group {
gap: 11px !important;
}
/* Separator line */
.occ-footer__sep {
height: 30px !important;
width: 0.5px !important;
background: rgba(255,255,255,0.4) !important;
display: block !important;
}
.occ-footer__payment.occ-footer__payment--klarna img {
height: 30px !important;
width: 48px !important;
max-width: 48px !important;
}
/* ====================================================
OCC Hospital Page – All Sections CSS
==================================================== */
/* ── State-of-the-Art Weight Loss Surgery Center */
.occ-hospital-section {
width:100%;max-width:1440px;margin:0 auto;padding:80px 120px 0;box-sizing:border-box;
display:flex;align-items:center;gap:60px;
}
.occ-hospital-section__img-col{flex:0 0 50%;max-width:50%;min-width:0;}
.occ-hospital-section__img{margin:0!important;overflow:hidden;border-radius:12px;display:block;}
.occ-hospital-section__img img{width:100%!important;height:auto!important;object-fit:cover!important;display:block!important;border-radius:12px!important;}
.occ-hospital-section__content{flex:0 0 50%;max-width:50%;min-width:0;display:flex;flex-direction:column;gap:16px;}
.occ-hospital-section__title{font-size:36px!important;font-weight:800!important;color:#0052a3!important;line-height:1.3!important;margin:0!important;}
.occ-hospital-section__text{font-size:16px!important;color:#3b4344!important;line-height:1.6!important;margin:0!important;}
/* ── Hospital Safety Standards Slider */
.occ-hospital-standards{width:100%;max-width:1440px;margin:0 auto;padding:80px 120px;box-sizing:border-box;background:#fff;display:flex;align-items:center;gap:24px;}
.occ-hospital-standards__content{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:24px;}
.occ-hospital-standards__title{font-size:36px!important;font-weight:800!important;color:#0052a3!important;line-height:1.3!important;margin:0!important;}
.occ-hospital-standards__body{font-size:16px!important;font-weight:400!important;color:#474747!important;line-height:1.6!important;margin:0!important;}
.occ-hospital-standards__slider-col{flex:1 0 0;min-width:0;}
.occ-hospital-standards__root{position:relative;width:100%;}
.occ-hospital-standards__slider-wrap{position:relative;width:100%;box-sizing:border-box;}
.occ-hospital-standards__swiper{width:100%;overflow:hidden;}
.occ-hospital-standards__swiper .swiper-slide{height:274px;border-radius:20px;overflow:hidden;}
.occ-hospital-standards__swiper .swiper-slide img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;}
.occ-hospital-standards__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;cursor:pointer;background:none;border:none;padding:0;width:43px;height:43px;}
.occ-hospital-standards__arrow--prev{left:-22px;}
.occ-hospital-standards__arrow--next{right:-22px;}
.occ-hospital-standards__arrow svg{width:43px;height:43px;display:block;}
/* ── 5 Cards Section */
.occ-hospital-cards{width:100%!important;background:#f4f9ff!important;padding:80px 0!important;box-sizing:border-box;display:flex!important;flex-direction:column!important;gap:0!important;}
.occ-hospital-cards__row--3.wp-block-columns,.occ-hospital-cards__row--2.wp-block-columns{max-width:1440px!important;margin-left:auto!important;margin-right:auto!important;padding-left:120px!important;padding-right:120px!important;box-sizing:border-box!important;display:grid!important;gap:24px!important;align-items:stretch!important;width:100%!important;}
.occ-hospital-cards__row--3.wp-block-columns{grid-template-columns:repeat(3,1fr)!important;}
.occ-hospital-cards__row--2.wp-block-columns{grid-template-columns:repeat(3,1fr)!important;margin-top:24px!important;}
.occ-hospital-cards .wp-block-column{display:flex!important;flex-direction:column!important;min-width:0!important;width:auto!important;flex-basis:unset!important;margin:0!important;}
.occ-hospital-cards__card{background:#fff!important;border:1px solid #e5e5e3!important;border-radius:12px!important;padding:32px!important;display:flex!important;flex-direction:column!important;gap:20px!important;flex:1!important;box-sizing:border-box!important;}
.occ-hospital-cards__card-title{font-size:24px!important;font-weight:700!important;color:#0052a3!important;line-height:1.3!important;margin:0!important;}
.occ-hospital-cards__card-body{font-size:16px!important;color:#474747!important;line-height:1.6!important;margin:0!important;}
/* ── Blue Boxes (Why choose OCC + Hospital Cyntar) */
.occ-hospital-blue-boxes{background:#fff;padding:80px 0;width:100%;box-sizing:border-box;}
.occ-hospital-blue-boxes__inner{max-width:1440px;margin:0 auto;padding:0 120px;box-sizing:border-box;}
.occ-hospital-blue-boxes__card{background:#0c497e;border-radius:20px;padding:40px;display:flex;gap:40px;align-items:stretch;position:relative;overflow:hidden;}
.occ-hospital-blue-boxes__decor{position:absolute;top:-40px;right:-40px;width:174px;height:174px;opacity:0.08;pointer-events:none;}
.occ-hospital-blue-boxes__box{background:rgba(255,255,255,0.1);border:2px solid rgba(122,192,235,0.15);border-radius:16px;padding:20px;flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:10px;}
.occ-hospital-blue-boxes__box-title{font-size:20px!important;font-weight:700!important;color:#ffffff!important;line-height:1.3!important;margin:0!important;}
.occ-hospital-blue-boxes__box-body{font-size:14px!important;font-weight:400!important;color:#f9f9f7!important;line-height:1.6!important;margin:0!important;}
.occ-journey-section.occ-hospital-journey {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* ── Global H2/H3 consistent sizes at ≤991px */
@media(max-width:991px){
.occ-hospital-section__title,.occ-private-section__title,.occ-hospital-standards__title,.occ-practice-tour__title,.occ-location-section__title,.occ-safe-surgery-section__title{font-size:28px!important;}
.occ-hospital-cards__card-title,.occ-hospital-blue-boxes__box-title,.occ-vid-cards__caption{font-size:18px!important;}
}
/* ── Practice Tour Video */
.occ-practice-tour{width:100%;padding:0px;background:#fff;box-sizing:border-box;}
.occ-practice-tour__inner{max-width:1440px;margin:0 auto;padding:0 222px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;align-items:center;}
.occ-practice-tour__title{font-size:36px!important;font-weight:800!important;color:#0052a3!important;line-height:1.3!important;text-align:center!important;margin:0!important;width:100%;}
.occ-practice-tour__video-wrap{position:relative;width:100%;aspect-ratio:836/470.25;border-radius:20px;overflow:hidden;cursor:pointer;display:block;}
.occ-practice-tour__thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.3s ease;}
.occ-practice-tour__video-wrap:hover .occ-practice-tour__thumb{transform:scale(1.02);}
.occ-practice-tour__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90px;height:90px;background:none;border:none;padding:0;cursor:pointer;transition:transform 0.2s ease;}
.occ-practice-tour__play:hover{transform:translate(-50%,-50%) scale(1.1);}
.occ-practice-tour__play svg{width:90px;height:90px;display:block;filter:drop-shadow(0 4px 16px rgba(0,0,0,0.3));}
.occ-practice-tour__modal{display:none;position:fixed;inset:0;z-index:99999;align-items:center;justify-content:center;}
.occ-practice-tour__modal.is-open{display:flex;}
.occ-practice-tour__modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.88);cursor:pointer;}
.occ-practice-tour__modal-content{position:relative;z-index:1;width:90vw;max-width:1000px;border-radius:12px;overflow:hidden;}
.occ-practice-tour__modal-close{position:absolute;top:-44px;right:0;background:none;border:none;color:#fff;font-size:36px;line-height:1;cursor:pointer;padding:4px 10px;}
.occ-practice-tour__modal-iframe-wrap{position:relative;aspect-ratio:16/9;background:#000;}
.occ-practice-tour__modal-iframe-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
/* ── Video Cards */
.occ-vid-cards{width:100%;padding:80px 0;background:#fff;box-sizing:border-box;}
.occ-vid-cards__inner{max-width:1440px;margin:0 auto;padding:0 120px;box-sizing:border-box;display:flex;gap:24px;align-items:flex-start;}
.occ-vid-cards__card{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:20px;cursor:pointer;}
.occ-vid-cards__thumb-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;}
.occ-vid-cards__thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.3s ease;}
.occ-vid-cards__card:hover .occ-vid-cards__thumb{transform:scale(1.03);}
.occ-vid-cards__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90px;height:90px;background:none;border:none;padding:0;cursor:pointer;transition:transform 0.2s ease;pointer-events:none;}
.occ-vid-cards__play svg{width:90px;height:90px;display:block;filter:drop-shadow(0 4px 16px rgba(0,0,0,0.3));}
.occ-vid-cards__card:hover .occ-vid-cards__play{transform:translate(-50%,-50%) scale(1.1);}
.occ-vid-cards__caption{font-size:24px!important;font-weight:700!important;color:#0066cc!important;line-height:1.3!important;text-align:center!important;margin:0!important;}
.occ-vid-cards__modal{display:none;position:fixed;inset:0;z-index:99999;align-items:center;justify-content:center;}
.occ-vid-cards__modal.is-open{display:flex;}
.occ-vid-cards__overlay{position:absolute;inset:0;background:rgba(0,0,0,0.88);cursor:pointer;}
.occ-vid-cards__modal-box{position:relative;z-index:1;width:90vw;max-width:1000px;border-radius:12px;overflow:hidden;}
.occ-vid-cards__close{position:absolute;top:-44px;right:0;background:none;border:none;color:#fff;font-size:36px;line-height:1;cursor:pointer;padding:4px 10px;}
.occ-vid-cards__iframe-wrap{position:relative;aspect-ratio:16/9;background:#000;}
.occ-vid-cards__iframe-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
/* ── Private Section */
.occ-private-section{width:100%!important;max-width:1440px!important;margin:0 auto!important;padding:0px 120px!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;gap:60px!important;}
.occ-private-section__img-col{flex:0 0 50%!important;max-width:50%!important;min-width:0;}
.occ-private-section__img{margin:0!important;overflow:hidden;border-radius:12px;display:block;}
.occ-private-section__img img{width:100%!important;height:auto!important;object-fit:cover!important;display:block!important;border-radius:12px!important;}
.occ-private-section__content{flex:0 0 50%!important;max-width:50%!important;min-width:0;display:flex!important;flex-direction:column!important;gap:16px!important;}
.occ-private-section__title{font-size:36px!important;font-weight:800!important;color:#0052a3!important;line-height:1.3!important;margin:0!important;}
.occ-private-section__text{font-size:16px!important;color:#3b4344!important;line-height:1.6!important;margin:0!important;}
/* ── Location Section */
.occ-location-section{width:100%!important;max-width:1440px!important;margin:0 auto!important;padding:0px 120px!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;gap:62px!important;}
.occ-location-section__img-col{flex:0 0 50%!important;max-width:50%!important;min-width:0;}
.occ-location-section__img{margin:0!important;overflow:hidden;border-radius:20px;display:block;}
.occ-location-section__img img{width:100%!important;height:auto!important;object-fit:cover!important;display:block!important;border-radius:20px!important;}
.occ-location-section__content{flex:0 0 50%!important;max-width:50%!important;min-width:0;display:flex!important;flex-direction:column!important;gap:16px!important;}
.occ-location-section__title{font-size:36px!important;font-weight:800!important;color:#0052a3!important;line-height:1.3!important;margin:0!important;}
.occ-location-section__text{font-size:16px!important;color:#474747!important;line-height:1.6!important;margin:0!important;}
/* ── Safe Surgery Section (dark blue card, centered) */
/* reuses occ-journey-section CSS */
/* ── Journey Section (dark blue centered card) */
.occ-journey-section{width:100%;background:#fff;padding:80px 120px;max-width:1440px;margin:0 auto;box-sizing:border-box;}
.occ-journey-card{background:#0c497e!important;border-radius:20px!important;padding:80px 64px!important;width:100%!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:16px!important;position:relative;overflow:hidden;box-sizing:border-box;}
.occ-journey-card::before{content:"";position:absolute;top:-40px;right:-40px;width:174px;height:174px;border-radius:50%;border:40px solid rgba(255,255,255,0.06);pointer-events:none;}
.occ-journey-card__title{font-size:36px!important;font-weight:800!important;color:#ffffff!important;line-height:1.3!important;margin:0!important;text-align:center!important;}
.occ-journey-card__text{font-size:16px!important;font-weight:400!important;color:#e8f0ff!important;line-height:1.6!important;margin:0!important;text-align:center!important;max-width:780px;}
.occ-journey-card__text a{color:#7ac0eb!important;text-decoration:underline!important;}
/* ── Safe Surgery Dark Blue Card (reuses journey classes) */
.occ-safe-surgery-section__title{font-size:36px!important;font-weight:800!important;color:#0052a3!important;line-height:1.3!important;margin:0!important;}
.occ-safe-surgery-section__text{font-size:16px!important;color:#474747!important;line-height:1.6!important;margin:0!important;}
.occ-safe-surgery-section__text a{color:#0066cc;text-decoration:underline;}
/* ── Terms & Conditions Page */
.occ-terms-page .occ-terms{padding:80px 20px;display:flex!important;flex-direction:column!important;gap:32px!important;box-sizing:border-box;}
.occ-terms .occ-terms__section{display:flex!important;flex-direction:column!important;gap:16px!important;width:100%!important;}
.occ-terms .occ-terms__section>*{margin:0!important;max-width:100%!important;}
.occ-terms .occ-terms__title{font-size:36px!important;font-weight:800!important;color:#2a2a2a!important;line-height:1.3!important;}
.occ-terms .occ-terms__section-heading{font-size:24px!important;font-weight:700!important;color:#2a2a2a!important;line-height:1.3!important;}
.occ-terms p.wp-block-paragraph,.occ-terms .occ-terms__body{font-size:16px!important;color:#3b4344!important;line-height:1.6!important;margin:0!important;}
.occ-terms hr.wp-block-separator,.occ-terms hr.wp-block-separator.has-css-opacity,.occ-terms .occ-terms__divider{height:1px!important;background-color:#e0e0e0!important;border:none!important;margin:0!important;opacity:1!important;max-width:100%!important;width:100%!important;color:transparent!important;}
.occ-terms ul.wp-block-list,.occ-terms .occ-terms__list{font-size:16px!important;color:#3b4344!important;line-height:1.6!important;padding-left:24px!important;margin:0!important;list-style:disc!important;}
.occ-terms ul.wp-block-list li{margin-bottom:4px!important;}
.occ-terms>.occ-terms__section>*,.occ-terms .occ-terms__section>*{margin-left:0!important;margin-right:0!important;max-width:100%!important;}
/* ── Responsive: All two-column sections */
@media(max-width:1199px){
.occ-hospital-section,.occ-private-section,.occ-hospital-blue-boxes{padding:60px 80px!important;gap:40px!important;}
.occ-hospital-section{padding:60px 80px 0!important;}
.occ-private-section{padding-top:0 !important; padding-bottom:0 !important;}
.occ-location-section{padding:0px 80px!important;gap:40px!important;}
.occ-hospital-section__title,.occ-private-section__title,.occ-location-section__title{font-size:28px!important;}
.occ-hospital-blue-boxes__card{gap:24px;padding:32px;}
.occ-journey-section{padding:60px 80px;}
.occ-journey-card{padding:60px 48px!important;}
.occ-practice-tour__inner{padding:0 120px;}
.occ-vid-cards__inner{padding:0 80px;}
.occ-hospital-cards__row--3.wp-block-columns,.occ-hospital-cards__row--2.wp-block-columns{padding-left:80px!important;padding-right:80px!important;}
.occ-hospital-cards__card-title{font-size:20px!important;}
.occ-terms-page .occ-terms{padding:60px 120px;}
.occ-terms .occ-terms__title{font-size:28px!important;}
.occ-terms .occ-terms__section-heading{font-size:20px!important;}
.occ-hospital-blue-boxes__inner{padding:0 !important;}
}
@media(max-width:991px){
.occ-hospital-section,.occ-private-section,.occ-hospital-blue-boxes{flex-direction:column!important;padding:50px 40px!important;gap:32px!important;}
.occ-hospital-section{padding:50px 40px 0!important;}
.occ-private-section{padding-top:0 !important; padding-bottom:0 !important;}
.occ-hospital-section__img-col,.occ-hospital-section__content,.occ-private-section__img-col,.occ-private-section__content{flex:0 0 100%!important;max-width:100%!important;}
.occ-hospital-section__title,.occ-private-section__title{font-size:26px!important;}
.occ-location-section{flex-direction:column!important;padding:0px 40px!important;gap:32px!important;}
.occ-location-section__img-col,.occ-location-section__content{flex:0 0 100%!important;max-width:100%!important;}
.occ-hospital-standards{padding:50px 40px!important;flex-direction:column!important;gap:32px!important;}
.occ-hospital-standards__slider-col{width:100%;flex:0 0 auto;}
.occ-hospital-standards__swiper .swiper-slide{height:240px;border-radius:16px;}
.occ-hospital-standards__arrow--prev{left:-18px;}
.occ-hospital-standards__arrow--next{right:-18px;}
.occ-hospital-blue-boxes__card{flex-direction:column;gap:16px;padding:24px;border-radius:16px;}
.occ-journey-section{padding:50px 40px;}
.occ-journey-card{padding:50px 40px!important;border-radius:16px!important;}
.occ-practice-tour__inner{padding:0 120px;}
.occ-vid-cards__inner{flex-direction:column;padding:0 40px;}
.occ-hospital-cards{padding:50px 0!important;}
.occ-hospital-cards__row--3.wp-block-columns,.occ-hospital-cards__row--2.wp-block-columns{grid-template-columns:1fr!important;align-items:unset!important;padding-left:40px!important;padding-right:40px!important;gap:16px!important;}
.occ-hospital-cards__row--2.wp-block-columns{margin-top:16px!important;}
.occ-hospital-cards .wp-block-column{height:auto!important;}
.occ-hospital-cards__card{flex:none!important;height:auto!important;}
.occ-practice-tour__play,.occ-vid-cards__play{width: 58px; height: 58px;}
}
@media(max-width:767px){
.occ-hospital-section,.occ-private-section,.occ-hospital-blue-boxes{padding:48px 16px!important;gap:24px!important;}
.occ-hospital-section{padding:48px 16px 0!important;}
.occ-private-section{padding-top:0 !important; padding-bottom:0 !important;}
.occ-hospital-section__title,.occ-private-section__title{font-size:28px!important;}
.occ-hospital-section__text,.occ-private-section__text{font-size:15px!important;}
.occ-location-section{padding:0px 16px!important;gap:24px!important;}
.occ-location-section__title{font-size:22px!important;}
.occ-hospital-standards{padding:48px 16px!important;}
.occ-hospital-standards__swiper .swiper-slide{height:220px;border-radius:14px;}
.occ-journey-section{padding:48px 16px;}
.occ-journey-card{padding:48px 16px!important;border-radius:14px!important;}
.occ-journey-card__title{font-size:22px!important;}
.occ-journey-card__text{font-size:15px!important;}
.occ-practice-tour{padding:0;}
.occ-practice-tour__inner{padding:0 16px;}
.occ-practice-tour__title{font-size:28px!important;}
.occ-practice-tour__video-wrap{border-radius:14px;}
.occ-vid-cards{padding:48px 0;}
.occ-vid-cards__inner{padding:0 16px;}
.occ-vid-cards__modal-box{width:95vw;}
.occ-hospital-cards{padding:48px 0!important;}
.occ-hospital-cards__row--3.wp-block-columns,.occ-hospital-cards__row--2.wp-block-columns{padding-left:16px!important;padding-right:16px!important;gap:12px!important;}
.occ-hospital-cards__card{padding:24px!important;}
.occ-hospital-cards__card-title{font-size:18px!important;}
.occ-terms-page .occ-terms{padding:48px 16px;}
.occ-terms .occ-terms__title{font-size:24px!important;}
.occ-terms .occ-terms__section-heading{font-size:18px!important;}
}
/* ── Videos Page Intro Section */
.occ-videos-intro{width:100%;padding:80px 120px 0;max-width:1440px;margin:0 auto;box-sizing:border-box;}
.occ-videos-intro .wp-block-columns{align-items:center;gap:60px;}
.occ-videos-intro__title{font-size:36px!important;font-weight:800!important;color:#0052a3!important;line-height:1.3!important;margin:0!important;}
/* Content column: flex column with 16px gap matching hospital section */
.occ-videos-intro .wp-block-column:last-child{display:flex!important;flex-direction:column!important;gap:16px!important;justify-content:center;}
.occ-videos-intro__body{font-size:16px!important;color:#474747!important;line-height:1.6!important;margin:0!important;}
/* Responsive — H2=28px, H3=22px below 991px */
@media(max-width:1199px){.occ-videos-intro{padding:60px 80px 0;}}
@media(max-width:991px){.occ-videos-intro{padding:50px 40px 0;}.occ-videos-intro .wp-block-columns{flex-direction:column!important;gap:32px!important;}.occ-videos-intro .wp-block-column{flex:0 0 100%!important;max-width:100%!important;}.occ-videos-intro__title{font-size:28px!important;}.occ-videos-intro h3{font-size:22px!important;}}
@media(max-width:767px){.occ-videos-intro{padding:48px 16px 0;}.occ-videos-intro__title{font-size:28px!important;}.occ-videos-intro h3{font-size:22px!important;}.occ-videos-intro__body{font-size:15px!important;}}
/* ── International Videos Section */
.occ-intl-videos{width:100%;background:#fff;padding:80px 0;box-sizing:border-box;}
.occ-intl-videos__inner{max-width:1440px;margin:0 auto;padding:0 120px;box-sizing:border-box;display:flex;flex-direction:column;gap:30px;}
.occ-intl-videos__header{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;}
.occ-intl-videos__title{font-size:36px!important;font-weight:800!important;color:#0052a3!important;line-height:1.3!important;margin:0!important;}
.occ-intl-videos__slider-wrap{position:relative;}
.occ-intl-videos__swiper{width:100%;overflow:hidden;}
.occ-intl-videos__card{display:flex;flex-direction:column;gap:20px;cursor:pointer;}
.occ-intl-videos__thumb-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;}
.occ-intl-videos__thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.3s;}
.occ-intl-videos__card:hover .occ-intl-videos__thumb{transform:scale(1.03);}
.occ-intl-videos__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90px;height:90px;background:none;border:none;padding:0;cursor:pointer;transition:transform 0.2s;pointer-events:none;}
.occ-intl-videos__play svg{width:90px;height:90px;display:block;filter:drop-shadow(0 4px 16px rgba(0,0,0,0.3));}
.occ-intl-videos__card:hover .occ-intl-videos__play{transform:translate(-50%,-50%) scale(1.1);}
.occ-intl-videos__caption{font-size:20px!important;font-weight:700!important;color:#474747!important;text-align:center!important;margin:0!important;line-height:1.3!important;}
/* Arrows — grey bg default, blue on hover (matches occ-stories__arrow pattern) */
.occ-intl-videos__arrow{--occ-arrow-bg:#F1F1F1;--occ-arrow-fg:#1a1a1a;position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:none;border:none;padding:0;cursor:pointer;width:43px;height:43px;transition:--occ-arrow-bg 0.2s;}
.occ-intl-videos__arrow:hover{--occ-arrow-bg:#0066cc;--occ-arrow-fg:#ffffff;}
.occ-intl-videos__arrow--prev{left:-22px;}
.occ-intl-videos__arrow--next{right:-22px;}
.occ-intl-videos__arrow svg{width:43px;height:43px;display:block;}
/* Responsive */
@media(max-width:1199px){.occ-intl-videos__inner{padding:0 80px;}.occ-intl-videos__title{font-size:30px!important;}}
@media(max-width:991px){.occ-intl-videos__inner{padding:0 40px;}.occ-intl-videos{padding:50px 0;}.occ-intl-videos__title{font-size:28px!important;}.occ-intl-videos__caption{font-size:18px!important;}.occ-intl-videos__play{width:64px;height:64px;}.occ-intl-videos__play svg{width:64px;height:64px;}}
@media(max-width:767px){.occ-intl-videos__inner{padding:0 16px;}.occ-intl-videos{padding:48px 0;}.occ-intl-videos__title{font-size:28px!important;}.occ-intl-videos__caption{font-size:18px!important;}}
/* ── Real Patient Experiences Videos Section */
.occ-rpe-videos{width:100%;background:#f8f9fb;padding:80px 0;box-sizing:border-box;}
.occ-rpe-videos__inner{max-width:1440px;margin:0 auto;padding:0 120px;box-sizing:border-box;display:flex;flex-direction:column;gap:30px;}
.occ-rpe-videos__header{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;}
.occ-rpe-videos__title{font-size:36px!important;font-weight:800!important;color:#0052a3!important;line-height:1.3!important;margin:0!important;}
.occ-rpe-videos__subtitle{font-size:16px!important;color:#474747!important;line-height:1.6!important;margin:0!important;max-width:780px;}
.occ-rpe-videos__slider-wrap{position:relative;}
.occ-rpe-videos__swiper{width:100%;overflow:hidden;}
.occ-rpe-videos__card{display:flex;flex-direction:column;gap:16px;cursor:pointer;}
.occ-rpe-videos__thumb-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;}
.occ-rpe-videos__thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.3s;}
.occ-rpe-videos__card:hover .occ-rpe-videos__thumb{transform:scale(1.03);}
.occ-rpe-videos__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:none;border:none;padding:0;cursor:pointer;transition:transform 0.2s;}
.occ-rpe-videos__card:hover .occ-rpe-videos__play{transform:translate(-50%,-50%) scale(1.1);}
.occ-rpe-videos__play svg{width:72px;height:72px;display:block;}
.occ-rpe-videos__caption{font-size:15px!important;font-weight:600!important;color:#1a1a1a!important;line-height:1.4!important;margin:0!important;text-align:left;}
/* Arrows */
.occ-rpe-videos__arrow{--occ-arrow-bg:#F1F1F1;--occ-arrow-fg:#1a1a1a;position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:none;border:none;padding:0;cursor:pointer;width:43px;height:43px;}
.occ-rpe-videos__arrow:hover{--occ-arrow-bg:#0066cc;--occ-arrow-fg:#ffffff;}
.occ-rpe-videos__arrow--prev{left:-22px;}
.occ-rpe-videos__arrow--next{right:-22px;}
.occ-rpe-videos__arrow svg{width:43px;height:43px;display:block;}
/* Caption spacing — add breathing room below thumbnail for both sections */
.occ-intl-videos__card{gap:24px!important;}
.occ-rpe-videos__card{gap:24px!important;}
/* Responsive */
@media(max-width:1199px){.occ-rpe-videos__inner{padding:0 80px;}}
@media(max-width:991px){.occ-rpe-videos{padding:60px 0;}.occ-rpe-videos__inner{padding:0 40px;}.occ-rpe-videos__title{font-size:28px!important;}}
@media(max-width:767px){.occ-rpe-videos{padding:50px 0;}.occ-rpe-videos__inner{padding:0 20px;}.occ-rpe-videos__subtitle{font-size:14px!important;}}
/* ── Video Modal */
.occ-vid-modal{display:none;position:fixed;inset:0;z-index:99999;align-items:center;justify-content:center;}
.occ-vid-modal.is-open{display:flex;}
.occ-vid-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.85);cursor:pointer;}
.occ-vid-modal__box{position:relative;width:90vw;max-width:960px;aspect-ratio:16/9;z-index:1;}
.occ-vid-modal__iframe{width:100%;height:100%;border:none;display:block;}
.occ-vid-modal__close{position:absolute;top:-44px;right:0;background:none;border:none;color:#fff;font-size:36px;line-height:1;cursor:pointer;padding:4px 8px;opacity:0.9;}
.occ-vid-modal__close:hover{opacity:1;}
/* ── Caption fix: both sections same style, center-aligned, 15px gap */
.occ-intl-videos__card{gap:15px!important;}
.occ-rpe-videos__card{gap:15px!important;}
.occ-intl-videos__caption{font-size:20px!important;font-weight:700!important;color:#474747!important;text-align:center!important;margin:0!important;}
.occ-rpe-videos__caption{font-size:20px!important;font-weight:700!important;color:#474747!important;text-align:center!important;margin:0!important;}
/* ── Patient Stories After Weight Loss Surgery Section */
.occ-psaw-videos{width:100%;background:#fff;padding:80px 0;box-sizing:border-box;}
.occ-psaw-videos__inner{max-width:1440px;margin:0 auto;padding:0 120px;box-sizing:border-box;display:flex;flex-direction:column;gap:30px;}
.occ-psaw-videos__header{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;}
.occ-psaw-videos__title{font-size:36px!important;font-weight:800!important;color:#0052a3!important;line-height:1.3!important;margin:0!important;}
.occ-psaw-videos__subtitle{font-size:16px!important;color:#474747!important;line-height:1.6!important;margin:0!important;max-width:780px;}
.occ-psaw-videos__slider-wrap{position:relative;}
.occ-psaw-videos__swiper{width:100%;overflow:hidden;}
.occ-psaw-videos__card{display:flex;flex-direction:column;gap:15px;cursor:pointer;}
.occ-psaw-videos__thumb-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;}
.occ-psaw-videos__thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.3s;}
.occ-psaw-videos__card:hover .occ-psaw-videos__thumb{transform:scale(1.03);}
.occ-psaw-videos__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:none;border:none;padding:0;cursor:pointer;transition:transform 0.2s;}
.occ-psaw-videos__card:hover .occ-psaw-videos__play{transform:translate(-50%,-50%) scale(1.1);}
.occ-psaw-videos__play svg{width:72px;height:72px;display:block;}
.occ-psaw-videos__caption{font-size:20px!important;font-weight:700!important;color:#474747!important;text-align:center!important;margin:0!important;}
.occ-psaw-videos__arrow{--occ-arrow-bg:#F1F1F1;--occ-arrow-fg:#1a1a1a;position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:none;border:none;padding:0;cursor:pointer;width:43px;height:43px;}
.occ-psaw-videos__arrow:hover{--occ-arrow-bg:#0066cc;--occ-arrow-fg:#ffffff;}
.occ-psaw-videos__arrow--prev{left:-22px;}
.occ-psaw-videos__arrow--next{right:-22px;}
.occ-psaw-videos__arrow svg{width:43px;height:43px;display:block;}
@media(max-width:1199px){.occ-psaw-videos__inner{padding:0 80px;}}
@media(max-width:991px){.occ-psaw-videos{padding:60px 0;}.occ-psaw-videos__inner{padding:0 40px;}.occ-psaw-videos__title{font-size:28px!important;}}
@media(max-width:767px){.occ-psaw-videos{padding:50px 0;}.occ-psaw-videos__inner{padding:0 20px;}.occ-psaw-videos__subtitle{font-size:14px!important;}}
/* ── Weight Loss Surgery FAQs Section */
.occ-faq-videos{width:100%;background:#f8f9fb;padding:80px 0;box-sizing:border-box;}
.occ-faq-videos__inner{max-width:1440px;margin:0 auto;padding:0 120px;box-sizing:border-box;display:flex;flex-direction:column;gap:30px;}
.occ-faq-videos__header{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;}
.occ-faq-videos__title{font-size:36px!important;font-weight:800!important;color:#0052a3!important;line-height:1.3!important;margin:0!important;}
.occ-faq-videos__subtitle{font-size:16px!important;color:#474747!important;line-height:1.6!important;margin:0!important;max-width:780px;}
.occ-faq-videos__slider-wrap{position:relative;}
.occ-faq-videos__swiper{width:100%;overflow:hidden;}
.occ-faq-videos__card{display:flex;flex-direction:column;gap:15px;cursor:pointer;}
.occ-faq-videos__thumb-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;}
.occ-faq-videos__thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.3s;}
.occ-faq-videos__card:hover .occ-faq-videos__thumb{transform:scale(1.03);}
.occ-faq-videos__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:none;padding:0;cursor:pointer;transition:transform 0.2s;}
.occ-faq-videos__card:hover .occ-faq-videos__play{transform:translate(-50%,-50%) scale(1.1);}
/* .occ-faq-videos__play svg{width:72px;height:72px;display:block;} */
.occ-faq-videos__caption{font-size:20px!important;font-weight:700!important;color:#474747!important;text-align:center!important;margin:0!important;}
.occ-faq-videos__arrow{--occ-arrow-bg:#F1F1F1;--occ-arrow-fg:#1a1a1a;position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:none;border:none;padding:0;cursor:pointer;width:43px;height:43px;}
.occ-faq-videos__arrow:hover{--occ-arrow-bg:#0066cc;--occ-arrow-fg:#ffffff;}
.occ-faq-videos__arrow--prev{left:-22px;}
.occ-faq-videos__arrow--next{right:-22px;}
.occ-faq-videos__arrow svg{width:43px;height:43px;display:block;}
@media(max-width:1199px){.occ-faq-videos__inner{padding:0 80px;}}
@media(max-width:991px){.occ-faq-videos{padding:60px 0;}.occ-faq-videos__inner{padding:0 40px;}.occ-faq-videos__title{font-size:28px!important;}}
@media(max-width:767px){.occ-faq-videos{padding:50px 0;}.occ-faq-videos__inner{padding:0 20px;}.occ-faq-videos__subtitle{font-size:14px!important;}}
/* ── Wondering If This Could Be You — CTA */
.occ-wondering{width:100%;padding:80px 0 0;box-sizing:border-box;}
.occ-wondering__panel{max-width:1200px;margin:0 auto;position:relative;border-radius:20px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:280px;padding:80px 64px;}
.occ-wondering__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.occ-wondering__overlay{position:absolute;inset:0;background:rgba(12,73,126,0.87);}
.occ-wondering__content{position:relative;z-index:1;text-align:center;max-width:680px;}
.occ-wondering__heading{font-size:36px!important;font-weight:800!important;color:#fff!important;line-height:1.3!important;margin:0 0 14px 0!important;}
.occ-wondering__body{font-size:16px!important;color:#e8f0ff!important;margin:0 0 32px 0!important;line-height:1.6!important;}
.occ-wondering .wp-block-buttons{display:flex!important;justify-content:center!important;gap:16px!important;margin:0!important;}
.occ-wondering .wp-block-button__link{background:#fff!important;color:#0066cc!important;border:1px solid #0066cc!important;font-weight:700!important;font-size:14px!important;padding:12px 24px!important;border-radius:8px!important;transition:all 0.2s!important;}
.occ-wondering .wp-block-button__link:hover{background:#0066cc!important;color:#fff!important;}
@media(max-width:1199px){.occ-wondering{padding:60px 40px 0;}}
@media(max-width:991px){.occ-wondering{padding:50px 24px 0;}.occ-wondering__heading{font-size:28px!important;}}
@media(max-width:767px){.occ-wondering{padding:40px 16px 0;}.occ-wondering__panel{padding:56px 28px;}.occ-wondering__body{font-size:14px!important;}}
.occ-intl-videos__card {
gap: 15px !important;
display: flex !important;
flex-direction: column;
}
@media(max-width:767px){
.occ-intl-videos__caption,.occ-rpe-videos__caption,.occ-psaw-videos__caption,.occ-psaw-videos__caption{font-size:18px !important;}
}
/* ── Doctor Group Taxonomy — Figma card grid */
.occ-doctor-grid-section{width:100%;padding:60px 0;box-sizing:border-box;}
.occ-doctor-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;max-width:1200px;margin:0 auto;box-sizing:border-box;}
.occ-doctor-card{position:relative;height:496px;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;text-decoration:none;color:inherit;}
.occ-doctor-card__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:20px;}
.occ-doctor-card__bg--placeholder{background:#b0c4d8;}
.occ-doctor-card__body{position:relative;z-index:1;background:#fff;border-bottom:5px solid #0066cc;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;width:100%;}
.occ-doctor-card__name{font-size:24px!important;font-weight:700!important;color:#0066cc!important;line-height:1.3!important;margin:0!important;}
.occ-doctor-card__credentials{font-size:16px!important;font-weight:700!important;color:#1a1a1a!important;line-height:1.3!important;margin:0!important;}
.occ-doctor-card__subtitle{font-size:14px!important;font-weight:700!important;color:#1a1a1a!important;line-height:1.6!important;margin:0!important;}
.occ-doctor-card__link{font-size:14px!important;font-weight:700!important;color:#0066cc!important;text-decoration:underline!important;line-height:1.6!important;display:block;}
.occ-doctor-card:hover .occ-doctor-card__bg{transform:scale(1.03);transition:transform 0.3s;}
@media(max-width:991px){.occ-doctor-grid-section{padding:50px 0;}.occ-doctor-grid{grid-template-columns:1fr;}.occ-doctor-card{height:380px;}}
@media(max-width:767px){.occ-doctor-card{height:340px;}}
/* Video sliders: mobile arrow fix */
@media(max-width:767px){.occ-intl-videos__arrow--prev,.occ-rpe-videos__arrow--prev,.occ-psaw-videos__arrow--prev,.occ-faq-videos__arrow--prev{left:8px!important;}.occ-intl-videos__arrow--next,.occ-rpe-videos__arrow--next,.occ-psaw-videos__arrow--next,.occ-faq-videos__arrow--next{right:8px!important;}}
/* ── Mega Menu: divider full height + featured doctors styles */
.occ-megamenu__body{align-items:stretch!important;}
.occ-megamenu__divider{align-self:stretch!important;flex-shrink:0;}
.occ-megamenu__featured-doctors{margin-bottom:4px!important;}
.occ-megamenu__item--featured > .occ-megamenu__link{font-weight:400!important;}
/* ── Mega Menu — border-radius, shadow, border (Figma: radius/xl=12px) */
.occ-megamenu{border-radius:12px!important;box-shadow:0px 4px 24px 0px rgba(0,0,0,0.15)!important;border:1px solid #e5e5e3!important;overflow:hidden!important;}
/* ── How We Can Help mega menu — match occ-megamenu border-radius (Figma: 12px) */
.occ-mm-help{border-radius:12px!important;overflow:hidden!important;box-shadow:0px 4px 24px 0px rgba(0,0,0,0.15)!important;border:1px solid #e5e5e3!important;}
.occ-mm-help__inner{border:none!important;box-shadow:none!important;border-radius:0!important;}
.plastic-videos-intro{padding:0 120px !important;}
.plastic-loved-emotional-section.wp-block-group.has-global-padding{padding-top:80px !important;}
.plastic-wondering__content .occ-wondering__content{max-width:100%;}
.plastic-preop-img-text .info-sub-title,.ivf-videos-intro h3,.additional-image-text { font-size: 22px;}
.ivf-videos-intro h3,.additional-image-text{text-transform:capitalize;}
.occ-wondering.ivf-wondering{padding: 0 0 80px;}
.ivf-content-blue .occ-wcu-edu__title { white-space: normal;}
.occ-loved-dos-section h3{ color:#fff; font-size:22px; text-transform:capitalize;}
.additional-image-text .occ-diabetes__signal{flex:1 1 100%;}
.wp-block-group.occ-bariatric-igs-cards__item.nested_items {
flex-wrap: wrap !important;
}
.metabolic-intro{padding-bottom:80px;}
.additional-meet-main{padding:80px 120px 0 !important;}
.additionlink {font-size: 22px;color: #0c497e;text-align: center;padding-top: 20px;}
.wp-block-group.occ-bariatric-igs-cards__item.nested_items .wp-block-group.occ-bariatric-igs-cards__item{padding:0 15px !important;}
.occ-diabetes.comp-focus,.occ-diabetes.comp-focus-last { padding-top: 80px !important;}
.occ-diabetes.comp-infection { text-align: center;}
.occ-diabetes.comp-infection .occ-diabetes__img img,.occ-diabetes.comp-focus-last .occ-diabetes__img img{aspect-ratio: revert-layer;}
.occ-diabetes.comp-infection { padding-bottom: 80px !important;}
.occ-preop-intro.comp-preop-intro{padding-bottom:0 !important;}
.no-padding-section {padding-top: 0 !important;padding-bottom: 0 !important;}
.image-auto{height: auto !important;}
:root :where(.is-layout-flow) > p{margin-block-start: 10px !important;}
.occ-wcu-innovation__content h3,.occ-bariatric-testimonial__inner h3{ font-size: 20px; text-transform: uppercase; color: #0052a3;}
.two-images {margin-top: 15px !important;}
.additional-meet-main .additionlink {padding-bottom: 30px;}
.additional-meet-main.no-padding-section,.occ-loved-dos-section.wp-block-group.has-global-padding.no-padding-section{padding-top: 0 !important;padding-bottom: 0 !important;}
.bottom-padding-section{padding-bottom:0 !important;}
@media(max-width:1440px){.media-first-video{padding-left:120px; padding-right:120px;}}
@media(max-width:1199px){.plastic-videos-intro{padding:0px 40px !important;}.plastic-loved-emotional-section.wp-block-group.has-global-padding{padding-top:60px !important;}.plastic-videos-intro-last{padding: 60px 40px 0;} .occ-about-page section.plastic-cta {padding: 60px 40px !important; } .occ-wondering.ivf-wondering { padding: 0 40px 60px;}.occ-bariatric-igs-cards,.occ-bariatric-final-cta,.occ-schedule-cta{padding-left:40px; padding-right:40px;} .metabolic-intro{padding-bottom:60px;} .additional-meet-main{padding:60px 40px 0 !important;} .occ-diabetes.comp-focus,.occ-diabetes.comp-focus-last { padding-top: 60px !important;} .occ-diabetes.comp-infection { padding-bottom: 60px !important;} .media-first-video{padding-left:40px; padding-right:40px;}}
@media(max-width:991px){.plastic-loved-emotional-section.wp-block-group.has-global-padding{padding-top:50px !important;} .plastic-preop-img-text.wp-block-group{padding:0px 24px 50px !important;}.plastic-videos-intro{padding:0px 24px !important;} .plastic-preop-img-text .occ-preop-img-text__content { order: 2;} .plastic-preop-img-text{display: flex; flex-direction: column;}.plastic-videos-intro-last{padding: 50px 24px 0;} .occ-about-page section.plastic-cta{padding: 50px 24px !important;} .plastic-preop-img-text .info-sub-title,.ivf-videos-intro h3,.additional-image-text { font-size: 16px;} .occ-loved-dos-section h3{ font-size:16px; } .occ-bariatric-igs-cards, .occ-bariatric-final-cta,.occ-schedule-cta{padding-left:24px; padding-right:24px;} .metabolic-intro{padding-bottom:50px;} .additional-meet-main{padding:50px 24px 0 !important;} .occ-diabetes.comp-focus,.occ-diabetes.comp-focus-last { padding-top: 50px !important;}.occ-diabetes.comp-infection { padding-bottom: 50px !important;} .media-first-video{padding-left:24px; padding-right:24px;} .occ-wcu-innovation__content h3,.occ-bariatric-testimonial__inner h3 { font-size: 16px; }}
@media(max-width:767px){.plastic-loved-emotional-section.wp-block-group.has-global-padding{padding-top:48px !important;} .plastic-preop-img-text.wp-block-group{padding:0px 16px 48px !important;}.plastic-videos-intro{padding:0px 16px !important;} .plastic-videos-intro-last{padding: 48px 16px 0;} .occ-about-page section.plastic-cta {padding: 48px 16px !important;} .occ-bariatric-final-cta{padding-left:16px; padding-right:16px;} .occ-bariatric-final-cta__card, .ivf-final-cta .wp-block-group.occ-bariatric-final-cta__card{padding: 48px 16px !important;} .ivf-final-cta{padding-bottom:0 !important;} .additional-meet h2{ font-size:28px !important;} .occ-wondering.ivf-wondering { padding: 0 16px 48px; } .occ-bariatric-igs-cards, .occ-bariatric-final-cta,.occ-schedule-cta{padding-left:16px; padding-right:16px;} .additional-image-text { flex-direction: column; display: flex;} .additional-image-text .occ-diabetes__content { order: 2;} .additional-image-text .occ-diabetes__media { order: 1;} .metabolic-intro{padding-bottom:48px;} .additional-meet-main{padding:48px 16px 0 !important;} .additionlink {font-size: 16px;}.occ-pbanner__crumbs{flex-wrap:wrap;} .occ-diabetes.comp-focus,.occ-diabetes.comp-focus-last { padding-top: 48px !important;}.occ-diabetes.comp-infection { padding-bottom: 48px !important;} .media-first-video{padding-left:16px; padding-right:16px;}.additional-meet-main.no-padding-section .wp-block-columns{gap:0 !important;}}
/* ── Bibliographic References page */
.occ-references-section{width:100%;padding:80px 0;box-sizing:border-box;}
.occ-references-section__inner{max-width:1200px;margin:0 auto;padding:0 120px;box-sizing:border-box;}
.occ-references-section .item p{line-height:1.8;color:#474747;margin-bottom:1.5em;font-size:15px;}
.occ-references-section .item p strong{display:block;font-size:18px;font-weight:700;color:#0052a3;margin-bottom:0.5em;margin-top:2em;}
.occ-references-section .item p:first-child strong{margin-top:0;}
.occ-references-section .item a{color:#0066cc;text-decoration:underline;}
.occ-references-section .item a:hover{color:#0052a3;}
@media(max-width:1199px){.occ-references-section__inner{padding:0 80px;}}
@media(max-width:991px){.occ-references-section{padding:60px 0;}.occ-references-section__inner{padding:0 40px;}}
@media(max-width:767px){.occ-references-section__inner{padding:0 20px;}}
/* ── 404 Page */
.occ-404-hero{position:relative;width:100%;min-height:calc(100vh - 140px);display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,#0052a3 0%,#003d7a 60%,#001e3c 100%);box-sizing:border-box;}
.occ-404-hero::before,.occ-404-hero::after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,0.04);}
.occ-404-hero::before{width:600px;height:600px;top:-200px;right:-150px;}
.occ-404-hero::after{width:400px;height:400px;bottom:-150px;left:-100px;}
.occ-404-hero__content{position:relative;z-index:1;text-align:center;padding:60px 24px;max-width:680px;}
.occ-404-hero__number{
font-size:180px;
font-weight:800;
color:rgba(255,255,255,0.1);
line-height:0.9;
margin:0 0 -50px;
display:block;
letter-spacing:-8px;
}
.occ-404-hero__title{font-size:42px;font-weight:800;color:#fff;margin:0 0 20px;line-height:1.2;}
.occ-404-hero__body{font-size:18px;color:rgba(255,255,255,0.82);margin:0 0 44px;line-height:1.7;}
.occ-404-hero__btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.occ-404-hero__btn{padding:14px 36px;border-radius:8px;font-weight:700;font-size:15px;text-decoration:none;transition:all 0.2s;display:inline-block;}
.occ-404-hero__btn--primary{background:#fff;color:#0052a3;}
.occ-404-hero__btn--primary:hover{background:#e8f0ff;}
.occ-404-hero__btn--outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.55);}
.occ-404-hero__btn--outline:hover{border-color:#fff;background:rgba(255,255,255,0.1);}
@media(max-width:991px){.occ-404-hero__number{font-size:120px;margin-bottom:-30px;}.occ-404-hero__title{font-size:32px;}}
@media(max-width:767px){.occ-404-hero__number{font-size:90px;}.occ-404-hero__title{font-size:26px;}.occ-404-hero__body{font-size:16px;}}
/* ── occ-schedule-cta slider arrow fix: default #F1F1F1, hover #0066cc */
.occ-schedule-cta__arrow{--occ-arrow-bg:#F1F1F1;--occ-arrow-fg:#1a1a1a;}
.occ-schedule-cta__arrow:not([disabled]):not(.occ-schedule-cta__arrow--disabled):hover{--occ-arrow-bg:#0066cc;--occ-arrow-fg:#ffffff;}
/* Override hardcoded SVG fill attribute with CSS property */
.occ-schedule-cta__arrow rect{fill:var(--occ-arrow-bg,#F1F1F1)!important;}
.occ-schedule-cta__arrow path{fill:var(--occ-arrow-fg,#1a1a1a)!important;}
/* Restore border-radius on slide images */
.occ-schedule-cta__slide-img{border-radius:20px;width:100%;height:100%;object-fit:cover;display:block;}
.occ-schedule-cta .swiper-slide{overflow:hidden;border-radius:20px;}
/* ── Aftercare archive bio cards (Figma 543-4051) */
.occ-bio-cards{background:#f4f9ff!important;padding:80px 24px!important;}
.occ-bio-cards__grid{gap:24px!important;align-items:stretch!important;}
.occ-bio-cards__card{background:#fff;border:1px solid #e5e5e3;border-radius:12px;padding:32px;display:flex;flex-direction:column;gap:20px;}
.occ-bio-cards__title{font-size:24px!important;font-weight:700!important;color:#0066cc!important;line-height:1.3!important;margin:0!important;}
.occ-bio-cards__body{font-size:16px!important;color:#474747!important;line-height:1.6!important;margin:0!important;}
@media(max-width:991px){.occ-bio-cards{padding:60px 24px!important;}.occ-bio-cards__grid{flex-wrap:wrap!important;}.occ-bio-cards__card{flex-basis:calc(50% - 12px)!important;flex-grow:0!important;}}
@media(max-width:767px){.occ-bio-cards{padding:50px 16px!important;}.occ-bio-cards__card{flex-basis:100%!important;}}
/* ── Fellowship archive content */
.occ-fellowship-intro{padding:80px 24px 40px!important;}
.occ-fellowship-intro p{font-size:18px!important;color:#474747!important;line-height:1.7!important;max-width:680px;margin:0 auto 24px!important;}
.occ-fellowship-intro p:last-child{margin-bottom:0!important;}
.occ-fellowship-intro a{color:#0066cc!important;text-decoration:underline;}
.occ-fellowship-apply{padding:0 24px 80px!important;}
.occ-fellowship-box{background:#0C497E;border-radius:20px;padding:56px 64px;max-width:1000px;margin:0 auto;}
.occ-fellowship-box h2{font-size:20px!important;font-weight:700!important;color:#fff!important;margin:0 0 28px!important;}
.occ-fellowship-box ol{color:#fff!important;font-size:16px!important;line-height:1.9!important;margin:0!important;padding-left:22px!important;}
.occ-fellowship-box li{color:#fff!important;margin-bottom:8px;}
@media(max-width:991px){.occ-fellowship-intro p{font-size:16px!important;}.occ-fellowship-box h2{font-size:18px!important;}}
@media(max-width:767px){.occ-fellowship-intro{padding:50px 16px 30px!important;}.occ-fellowship-intro p{font-size:15px!important;}.occ-fellowship-apply{padding:0 16px 50px!important;}.occ-fellowship-box{padding:40px 24px;}.occ-fellowship-box h2{font-size:17px!important;}.occ-fellowship-box ol{font-size:15px!important;}.occ-fellowship-box li{font-size:15px!important;}}
/* ── Results archive (CPT + procedure terms) */
.occ-results-archive{width:100%;background:#fff;padding:80px 24px;box-sizing:border-box;}
.occ-results-archive__inner{max-width:1200px;margin:0 auto;}
.occ-results-archive__pills{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:48px;}
.occ-results-archive__pill{display:inline-block;padding:10px 24px;border-radius:999px;border:1px solid #e5e5e3;background:#fff;color:#474747;font-size:15px;font-weight:600;text-decoration:none;transition:all 0.2s;}
.occ-results-archive__pill:hover{border-color:#0066cc;color:#0066cc;}
.occ-results-archive__pill--active{background:#0066cc;border-color:#0066cc;color:#fff;}
.occ-results-archive__pill--active:hover{color:#fff;}
.occ-results-archive__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.occ-results-archive__card{display:block;border:1px solid #e5e5e3;border-radius:20px;overflow:hidden;text-decoration:none;background:#fff;transition:box-shadow 0.2s,transform 0.2s;}
.occ-results-archive__card:hover{box-shadow:0 8px 24px rgba(0,82,163,0.12);transform:translateY(-2px);}
.occ-results-archive__media{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:100%;aspect-ratio:4/3;overflow:hidden;}
.occ-results-archive__img{width:100%;height:100%;min-height:0;min-width:0;object-fit:cover;display:block;}
.occ-results-archive__img--empty{background:#e8eef4;display:block;}
.occ-results-archive__label{position:absolute;bottom:10px;background:rgba(26,26,26,0.85);color:#fff;font-size:12px;font-weight:600;padding:4px 12px;border-radius:6px;}
.occ-results-archive__label--before{left:10px;}
.occ-results-archive__label--after{right:10px;}
.occ-results-archive__lbs{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:#0066cc;border:3px solid #fff;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;}
.occ-results-archive__lbs-num{font-size:17px;font-weight:700;}
.occ-results-archive__lbs-unit{font-size:11px;}
.occ-results-archive__body{padding:18px 20px;}
.occ-results-archive__name{font-size:20px!important;font-weight:700!important;color:#0066cc!important;margin:0!important;line-height:1.3!important;}
.occ-results-archive__meta{font-size:14px!important;color:#474747!important;margin:6px 0 0!important;line-height:1.5!important;}
.occ-results-archive__pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:48px;}
.occ-results-archive__pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 8px;border:1px solid #e5e5e3;border-radius:8px;color:#474747;font-size:15px;text-decoration:none;background:#fff;}
.occ-results-archive__pagination .page-numbers:hover{border-color:#0066cc;color:#0066cc;}
.occ-results-archive__pagination .page-numbers.current{background:#0066cc;border-color:#0066cc;color:#fff;}
.occ-results-archive__pagination .page-numbers.dots{border:none;}
@media(max-width:991px){.occ-results-archive{padding:60px 24px;}.occ-results-archive__grid{grid-template-columns:repeat(2,1fr);}.occ-results-archive__name{font-size:18px!important;}}
@media(max-width:767px){.occ-results-archive{padding:50px 16px;}.occ-results-archive__grid{grid-template-columns:1fr;}.occ-results-archive__pills{display:none!important;}.occ-results-archive__meta{font-size:13px!important;}}
/* ─────────────────────────────────────────────
SEARCH RESULTS PAGE
───────────────────────────────────────────── */
.occ-search-results{background:#fff;padding:80px 20px;}
.occ-search-results__inner{max-width:860px;margin:0 auto;}
.occ-search-results__form{display:flex;gap:12px;margin:0 0 28px;}
.occ-search-results__input{flex:1;height:48px;padding:0 18px;font-size:15px;color:#1d1d1b;background:#fff;border:1px solid #e5e5e3;border-radius:8px;outline:none;transition:border-color .2s ease;}
.occ-search-results__input:focus{border-color:#0066cc;}
.occ-search-results__btn{display:inline-flex;align-items:center;justify-content:center;width:52px;height:48px;flex:0 0 52px;background:#0066cc;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .2s ease;}
.occ-search-results__btn:hover{background:#0c447c;}
.occ-search-results__count{font-size:15px;color:#474747;margin:0 0 24px;}
.occ-search-results__list{display:flex;flex-direction:column;gap:20px;}
.occ-search-results__card{display:block;padding:24px 28px;background:#fff;border:1px solid #e5e5e3;border-radius:12px;text-decoration:none;transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease;}
.occ-search-results__card:hover{border-color:transparent;box-shadow:0 12px 32px rgba(13,38,76,.12);transform:translateY(-2px);}
.occ-search-results__badge{display:inline-block;font-size:12px;font-weight:600;line-height:1;padding:6px 12px;border-radius:999px;margin:0 0 12px;}
.occ-search-results__badge--post{background:#e6f1fb;color:#0c447c;}
.occ-search-results__badge--page{background:#e1f5ee;color:#085041;}
.occ-search-results__badge--result{background:#faeeda;color:#633806;}
.occ-search-results__badge--doctor{background:#eeedfe;color:#3c3489;}
.occ-search-results__title{font-size:20px;font-weight:700;line-height:1.35;color:#0066cc;margin:0 0 10px;}
.occ-search-results__card:hover .occ-search-results__title{text-decoration:underline;}
.occ-search-results__excerpt{font-size:15px;line-height:1.7;color:#474747;margin:0 0 14px;}
.occ-search-results__more{font-size:14px;font-weight:600;color:#0066cc;text-decoration:underline;text-underline-offset:3px;}
.occ-search-results__pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin:48px 0 0;flex-wrap:wrap;}
.occ-search-results__pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 8px;font-size:15px;font-weight:600;color:#1d1d1b;background:#fff;border:1px solid #e5e5e3;border-radius:8px;text-decoration:none;transition:all .2s ease;}
.occ-search-results__pagination .page-numbers:hover{border-color:#0066cc;color:#0066cc;}
.occ-search-results__pagination .page-numbers.current{background:#0066cc;border-color:#0066cc;color:#fff;}
.occ-search-results__pagination .page-numbers.dots{border:none;}
.occ-search-results__empty{text-align:center;padding:24px 0 8px;}
.occ-search-results__empty-title{font-size:26px;font-weight:700;color:#1d1d1b;margin:0 0 12px;}
.occ-search-results__empty-text{font-size:15px;line-height:1.7;color:#474747;margin:0 0 24px;}
.occ-search-results__quick-links{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
.occ-search-results__quick-links a{display:inline-flex;align-items:center;padding:12px 22px;font-size:14px;font-weight:600;color:#0066cc;background:#fff;border:1px solid #e5e5e3;border-radius:999px;text-decoration:none;transition:all .25s ease;}
.occ-search-results__quick-links a:hover{border-color:#0066cc;box-shadow:0 8px 20px rgba(13,38,76,.1);}
@media(max-width:991px){
.occ-search-results{padding:64px 20px;}
.occ-search-results__title{font-size:18px;}
.occ-search-results__empty-title{font-size:23px;}
}
@media(max-width:767px){
.occ-search-results{padding:48px 16px;}
.occ-search-results__card{padding:20px;}
.occ-search-results__title{font-size:17px;}
.occ-search-results__excerpt{font-size:14px;}
.occ-search-results__count{font-size:14px;}
.occ-search-results__empty-title{font-size:20px;}
.occ-search-results__pagination .page-numbers{min-width:38px;height:38px;font-size:14px;}
}
/* ─────────────────────────────────────────────
BMI CALCULATOR PAGE
───────────────────────────────────────────── */
.occ-bmi{background:#f7f7f5;padding:80px 20px;}
.occ-bmi__panel{max-width:640px;margin:0 auto;background:#fff;border:1px solid #e5e5e3;border-radius:12px;padding:48px 40px;box-shadow:0 10px 30px rgba(13,38,76,.06);}
.occ-bmi__form{display:block;}
.occ-bmi__step{display:none;}
.occ-bmi__step.is-active{display:block;animation:occBmiIn .35s ease;}
@keyframes occBmiIn{from{opacity:0;transform:translateX(24px);}to{opacity:1;transform:translateX(0);}}
.occ-bmi__question{font-size:22px;font-weight:700;color:#1d1d1b;margin:0 0 24px;}
.occ-bmi__inputs{display:flex;gap:28px;flex-wrap:wrap;margin:0 0 24px;}
.occ-bmi__input-block{display:flex;align-items:center;gap:10px;}
.occ-bmi__input-block span{font-size:15px;font-weight:600;color:#474747;}
.occ-bmi__input{width:110px;height:48px;padding:0 14px;font-size:16px;color:#1d1d1b;background:#fff;border:1px solid #e5e5e3;border-radius:8px;outline:none;transition:border-color .2s ease;-moz-appearance:textfield;}
.occ-bmi__input::-webkit-outer-spin-button,.occ-bmi__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.occ-bmi__input:focus{border-color:#0066cc;}
.occ-bmi__input--error{border-color:#d63638!important;border-width:2px!important;}
.occ-bmi__error{font-size:13px;color:#d63638;margin:-12px 0 18px;}
.occ-bmi__btn{display:inline-flex;align-items:center;justify-content:center;min-width:160px;height:50px;padding:0 32px;font-size:15px;font-weight:600;color:#fff;background:#0066cc;border:2px solid #0066cc;border-radius:999px;cursor:pointer;transition:background .2s ease,border-color .2s ease;}
.occ-bmi__btn:hover{background:#0c447c;border-color:#0c447c;}
.occ-bmi__btn--outline{background:transparent;color:#0066cc;}
.occ-bmi__btn--outline:hover{background:#0066cc;color:#fff;}
.occ-bmi__result-heading{font-size:24px;font-weight:700;color:#1d1d1b;margin:0 0 16px;}
.occ-bmi__number{color:#0066cc;font-size:32px;}
.occ-bmi__details{font-size:15px;line-height:1.7;color:#474747;margin:0 0 24px;}
.occ-bmi__details a{color:#0066cc;text-decoration:underline;text-underline-offset:3px;}
.occ-bmi__note{max-width:640px;margin:24px auto 0;font-size:13px;line-height:1.6;color:#474747;text-align:center;}
.occ-bmi__panel .occ-bmi__note{margin:28px 0 0;padding-top:24px;border-top:1px solid #e5e5e3;text-align:left;}
@media(max-width:991px){
.occ-bmi{padding:64px 20px;}
.occ-bmi__panel{padding:40px 32px;}
.occ-bmi__question{font-size:20px;}
.occ-bmi__result-heading{font-size:22px;}
}
@media(max-width:767px){
.occ-bmi{padding:48px 16px;}
.occ-bmi__panel{padding:28px 20px;}
.occ-bmi__question{font-size:18px;}
.occ-bmi__inputs{gap:16px;}
.occ-bmi__input{width:90px;height:44px;}
.occ-bmi__btn{width:100%;}
.occ-bmi__result-heading{font-size:20px;}
.occ-bmi__number{font-size:26px;}
}
/* ─────────────────────────────────────────────
HTML SITEMAP PAGE
───────────────────────────────────────────── */
.occ-sitemap{background:#fff;padding:80px 20px;}
.occ-sitemap__grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:48px 40px;align-items:start;}
.occ-sitemap__group h2{font-size:20px;font-weight:700;color:#1d1d1b;margin:0 0 8px;padding-bottom:12px;position:relative;}
.occ-sitemap__group h2::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:3px;background:#0066cc;border-radius:2px;}
.occ-sitemap__group ul{list-style:none;margin:16px 0 0;padding:0;}
.occ-sitemap__group li{margin:0 0 10px;}
.occ-sitemap__group a{font-size:15px;line-height:1.5;color:#474747;text-decoration:none;transition:color .2s ease;}
.occ-sitemap__group a:hover{color:#0066cc;text-decoration:underline;text-underline-offset:3px;}
.occ-sitemap__group ul ul,
.occ-sitemap__group .children{margin:8px 0 4px;padding-left:18px;border-left:2px solid #e5e5e3;}
.occ-sitemap__group ul ul a,
.occ-sitemap__group .children a{font-size:14px;color:#6b6b6b;}
.occ-sitemap__group ul ul a:hover,
.occ-sitemap__group .children a:hover{color:#0066cc;}
.occ-sitemap__group .page_item{margin:0 0 10px;}
@media(max-width:991px){
.occ-sitemap{padding:64px 20px;}
.occ-sitemap__grid{gap:40px 32px;}
}
@media(max-width:767px){
.occ-sitemap{padding:48px 16px;}
.occ-sitemap__grid{grid-template-columns:1fr;gap:36px;}
.occ-sitemap__group h2{font-size:18px;}
}
/* ─────────────────────────────────────────────
THANK YOU PAGE
───────────────────────────────────────────── */
.occ-thankyou{background:#f7f7f5;padding:80px 20px;}
.occ-thankyou__panel{max-width:640px;margin:0 auto;background:#fff;border:1px solid #e5e5e3;border-radius:12px;padding:56px 40px;text-align:center;box-shadow:0 10px 30px rgba(13,38,76,.06);}
.occ-thankyou__icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:#e1f5ee;color:#0a7a55;margin:0 0 20px;}
.occ-thankyou__heading{font-size:28px;font-weight:700;color:#1d1d1b;margin:0 0 12px;}
.occ-thankyou__message{font-size:16px;line-height:1.7;color:#474747;margin:0 0 28px;}
.occ-thankyou__buttons{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
.occ-thankyou__btn{display:inline-flex;align-items:center;justify-content:center;min-width:170px;height:50px;padding:0 28px;font-size:15px;font-weight:600;color:#fff;background:#0066cc;border:2px solid #0066cc;border-radius:999px;text-decoration:none;transition:background .2s ease,border-color .2s ease,color .2s ease;}
.occ-thankyou__btn:hover{background:#0c447c;border-color:#0c447c;color:#fff;}
.occ-thankyou__btn--outline{background:transparent;color:#0066cc;}
.occ-thankyou__btn--outline:hover{background:#0066cc;color:#fff;}
@media(max-width:991px){
.occ-thankyou{padding:64px 20px;}
.occ-thankyou__panel{padding:48px 32px;}
.occ-thankyou__heading{font-size:24px;}
}
@media(max-width:767px){
.occ-thankyou{padding:48px 16px;}
.occ-thankyou__panel{padding:36px 20px;}
.occ-thankyou__heading{font-size:22px;}
.occ-thankyou__message{font-size:15px;}
.occ-thankyou__btn{width:100%;}
}
/* ─────────────────────────────────────────────
REFER A FRIEND PAGE
───────────────────────────────────────────── */
.occ-refer{background:#f7f7f5;padding:80px 20px;}
.occ-refer__panel{max-width:760px;margin:0 auto;background:#fff;border:1px solid #e5e5e3;border-radius:12px;padding:48px 40px;box-shadow:0 10px 30px rgba(13,38,76,.06);}
.occ-refer__intro{font-size:16px;line-height:1.7;color:#474747;margin:0 0 28px;}
.occ-refer__subhead{font-size:18px;font-weight:700;color:#1d1d1b;margin:28px 0 18px;padding-bottom:10px;position:relative;}
.occ-refer__subhead::after{content:"";position:absolute;left:0;bottom:0;width:38px;height:3px;background:#0066cc;border-radius:2px;}
.occ-refer__formwrap .occ-refer__subhead:first-child{margin-top:0;}
.occ-refer__row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 20px;}
.occ-refer__field{display:flex;flex-direction:column;}
.occ-refer__field--full{grid-column:1 / -1;}
.occ-refer__field label{font-size:14px;font-weight:600;color:#1d1d1b;margin:0 0 8px;}
.occ-refer__field .wpcf7-form-control-wrap{display:block;}
.occ-refer__field input[type="text"],
.occ-refer__field input[type="email"]{width:100%;height:48px;padding:0 14px;font-size:15px;color:#1d1d1b;background:#fff;border:1px solid #e5e5e3;border-radius:8px;outline:none;transition:border-color .2s ease;box-sizing:border-box;}
.occ-refer__field input:focus{border-color:#0066cc;}
.occ-refer__field input.wpcf7-not-valid{border-color:#d63638;border-width:2px;}
.occ-refer .wpcf7-not-valid-tip{font-size:13px;color:#d63638;margin-top:6px;}
.occ-refer__submit{margin-top:8px;}
.occ-refer__submit input[type="submit"]{display:inline-flex;align-items:center;justify-content:center;min-width:180px;height:50px;padding:0 32px;font-size:15px;font-weight:600;color:#fff;background:#0066cc;border:2px solid #0066cc;border-radius:999px;cursor:pointer;transition:background .2s ease,border-color .2s ease;}
.occ-refer__submit input[type="submit"]:hover{background:#0c447c;border-color:#0c447c;}
.occ-refer .wpcf7-spinner{margin-left:12px;}
.occ-refer .wpcf7-response-output{margin:20px 0 0;padding:12px 16px;border:1px solid #d63638;border-radius:8px;font-size:14px;color:#d63638;}
.occ-refer form.sent .wpcf7-response-output{border-color:#0a7a55;color:#0a7a55;}
@media(max-width:991px){
.occ-refer{padding:64px 20px;}
.occ-refer__panel{padding:40px 32px;}
}
@media(max-width:767px){
.occ-refer{padding:48px 16px;}
.occ-refer__panel{padding:28px 20px;}
.occ-refer__row{grid-template-columns:1fr;gap:16px;margin-bottom:16px;}
.occ-refer__subhead{font-size:16px;}
.occ-refer__submit input[type="submit"]{width:100%;}
}
/* ─────────────────────────────────────────────
LANGUAGE SWITCHER (GTranslate) + cleanup
───────────────────────────────────────────── */
.occ-lang-wrap{position:relative;}
.occ-lang-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:9999;min-width:160px;background:#fff;border:1px solid #e5e5e3;border-radius:8px;box-shadow:0 12px 32px rgba(13,38,76,.16);overflow:hidden;}
.occ-lang-menu.is-open{display:block;}
.occ-lang-menu button{display:block;width:100%;padding:12px 18px;font-size:14px;font-weight:600;color:#1d1d1b;background:#fff;border:none;text-align:left;cursor:pointer;transition:background .15s ease,color .15s ease;}
.occ-lang-menu button:hover{background:#e6f1fb;color:#0066cc;}
.occ-lang-menu button + button{border-top:1px solid #f0f0ee;}
.occ-drawer .occ-lang-menu{position:static;margin-top:8px;box-shadow:none;}
/* Google Translate layout protection — keep design intact */
html{top:0 !important;}
body{top:0 !important;position:static !important;}
.skiptranslate iframe,
iframe.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-text-highlight{display:none !important;visibility:hidden !important;}
.goog-text-highlight{background:none !important;box-shadow:none !important;}
font{background:inherit !important;box-shadow:none !important;}
/* ─────────────────────────────────────────────
ACCESSIBILITY WIDGET (OneTap) — match Figma
───────────────────────────────────────────── */
body .onetap-container-toggle .onetap-toggle img.design-size2{width:54px !important;height:54px !important;box-shadow:0 6px 18px rgba(13,38,76,.25);transition:transform .2s ease;}
.onetap-toggle:hover img.design-size2{transform:scale(1.05);}
.onetap-toggle{outline-offset:3px;}
/* ─────────────────────────────────────────────
CONTACT PAGE — small-screen fixes (≤480px)
───────────────────────────────────────────── */
@media(max-width:480px){
/* 1. Office Hours row: wrap, stack day/time */
.occ-contact-section__card-row{flex-wrap:wrap;row-gap:6px;}
.occ-contact-section__card-row .occ-contact-section__hours-day{flex:1 1 auto;min-width:0;}
.occ-contact-section__card-row .occ-contact-section__hours-time{flex:1 1 100%;padding-left:34px;font-size:15px;}
/* 2. Phone/Text cards: single column so numbers stay on one line */
.occ-contact-section__contact-grid{grid-template-columns:1fr !important;}
.occ-contact-section__contact-item{width:100%;}
/* 3. OCC Journey button: full width, never cut */
.occ-traveling-section__btn{display:flex;width:100%;max-width:100%;justify-content:center;text-align:center;white-space:normal;box-sizing:border-box;padding-left:16px;padding-right:16px;}
}