html,
body {
font-family:
Roboto,
system-ui,
-apple-system,
Segoe UI,
Helvetica,
Arial,
"Apple Color Emoji",
"Segoe UI Emoji";
font-display: swap;
}
/* ===== Migrated inline styles ===== */
/* Promo strip */
.promo-strip-bg {
background: #acf4a1;
}
.promo-strip-inner {
align-items: center;
justify-content: center;
font-family: "Poppins", sans-serif;
font-size: 16px;
height: 50px;
}
@media (max-width: 767px) {
.promo-strip-inner {
font-size: 15px;
height: auto;
}
.confidence-text {
font-family: "Inter";
font-size: 17px !important;
}
}
.promo-code-badge {
width: fit-content;
background: #000;
color: #fff;
padding: 5px 10px;
border-radius: 8px;
font-weight: 700;
font-family: "Inter", sans-serif;
}
.promo-limited {
width: fit-content;
}
/* Order buttons (shared) */
.order-btn {
display: inline-block;
text-decoration: none;
color: #333;
}
/* Stock indicator */
.stock-dot {
width: 10px;
height: 10px;
background: #adf4a1;
border-radius: 50%;
}
.stock-info {
font-size: 12px;
}
.stock-info-fit {
font-size: 12px;
width: fit-content;
}
/* Icon sizes */
.icon-sm {
width: 16px;
height: 16px;
}
.icon-check-cross {
width: 19px;
height: 19px;
}
/* Five star images */
.five-star-xs {
width: 77px;
height: auto;
}
.five-star-sm {
height: 16px;
}
/* Section containers */
.section-overflow {
overflow: hidden;
}
.section-container {
max-width: 1158px;
}
.section-container-lg {
max-width: 1160px;
}
.green-title-purple {
color: #7058ff;
}
.title-dark {
color: #221c44;
}
/* Background colors */
.bg-white {
background: #fff;
}
.bg-light-purple {
background-color: #ebe6fd;
}
.bg-lavender {
background: #f3f1fe;
}
/* Content columns */
.content-col-536 {
max-width: 519px;
}
.content-col-549 {
max-width: 545px;
margin-left: 12px;
}
@media (max-width: 1199px) {
.content-col-549 {
margin-left: auto !important;
margin-right: auto !important;
}
.pilates-video {
border-radius: 0 !important;
}
.low-impact-title {
font-size: 26px;
line-height: 32px;
}
.low-impact-text,
.low-impact-box-intro,
.low-impact-list-item {
font-size: 16px;
line-height: 24px;
}
.low-impact-box {
margin-left: -16px;
margin-right: -16px;
border-radius: 0;
padding: 16px;
}
}
.content-col-578 {
max-width: 578px;
}
@media (max-width: 1199px) {
.content-col-578 {
margin-left: auto !important;
margin-right: auto !important;
}
}
/* Media (images/videos) */
.media-fluid {
width: 100%;
max-width: 568px;
border-radius: 8px;
}
.media-fluid-sm {
width: 100%;
max-width: 420px;
border-radius: 8px;
}
.media-fluid-455 {
width: 455px;
max-width: 100%;
border-radius: 8px;
}
.media-fluid-525 {
width: 525px;
max-width: 100%;
border-radius: 8px;
}
.img-full {
max-width: 100%;
}
/* Mobile hero / carousel */
.carousel-auto {
height: auto;
}
.carousel-main-container {
max-width: 100%;
margin: 0 auto;
position: relative;
}
.carousel-badge-pos {
bottom: 80px;
right: 20px;
}
.carousel-nav-left {
position: absolute;
top: 45%;
left: 10px;
transform: translateY(-50%);
z-index: 10;
}
.carousel-nav-right {
position: absolute;
top: 45%;
right: 10px;
transform: translateY(-50%);
z-index: 10;
}
.carousel-img-flip {
transform: rotate(180deg);
}
.carousel-main-img {
width: 100%;
padding: 0;
margin: 0;
}
.carousel-thumbs {
max-width: 100%;
margin: 16px auto 0;
justify-content: center;
}
/* Instruction / app section */
.instruction-section-bg {
background: #f3f1fe;
padding: 50px 0 240px 0;
}
.instruction-container {
max-width: 924px;
}
.app-text-col-max {
max-width: 427px;
}
.instruction-col-max {
max-width: 467px;
}
.chelsea-section-max {
max-width: 924px;
}
.chelsea-col-max {
max-width: 456px;
padding: 16px 32px !important;
}
.chelsea-img {
max-width: 358px;
}
.chelsea-img-full {
width: 100%;
}
/* Comparison table */
.comparison-overflow {
overflow: visible !important;
}
.comparison-cell.comparison-overflow-v {
overflow: visible;
}
.comparison-stars-offset {
margin-top: -10px;
}
.comparison-stars-img {
margin-top: -30px;
}
.product-img-188 {
max-width: 188px;
}
.product-img-122 {
max-width: 122px;
}
.product-img-161 {
max-width: 161px;
}
/* Confidence / guarantee section */
.confidence-badge-size {
width: 99px;
border-radius: 8px;
}
.confidence-title-desktop {
font-family: "Outfit", sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 100%;
letter-spacing: 0;
text-transform: uppercase;
}
.confidence-title-mobile {
font-family: "Inter", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 100%;
letter-spacing: 0;
text-transform: uppercase;
}
.confidence-text {
font-family: "Inter", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
}
.confidence-text-desktop {
max-width: 539px;
}
.confidence-cta-desktop {
width: fit-content;
margin-top: -70px;
}
/* What's in the Box */
.whats-in-box-title-style {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 46px;
}
.box-row-max {
max-width: 980px;
margin: 0 auto;
}
.box-content-max {
max-width: 470px;
}
.whats-in-box-img {
max-width: 424px;
width: 100%;
height: auto;
margin-left: auto;
display: block;
}
@media (max-width: 1199px) {
.whats-in-box-img {
margin-left: 0;
}
}
.box-section-title-style {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 46px;
margin-bottom: 0;
}
.box-list-style {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 21px;
padding-left: 18px;
margin: 0;
}
.box-list-style li {
margin: 0px;
}
/* Bonus section */
.bonus-inner-style {
background: #ebe6fd;
border-radius: 8px;
padding: 24px 32px 32px;
max-width: 919px;
margin: 0 auto;
position: relative;
}
.bonus-value-badge {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
background: #fff8b1;
border-radius: 4px;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 1;
color: #000;
padding: 6px 19px;
width: fit-content;
margin: 0 auto 8px;
position: relative;
top: -42px;
margin-bottom: -26px;
}
.bonus-value-strike {
text-decoration: line-through;
text-decoration-color: #ff0000;
text-decoration-thickness: 3px;
}
.bonus-title-style {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 1.28;
margin-bottom: 16px;
}
.bonus-cards-row {
display: flex;
justify-content: center;
gap: 48px;
}
.bonus-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 0 1 176px;
max-width: 176px;
}
.bonus-card-img {
width: 130px;
height: 129px;
object-fit: contain;
margin-bottom: 6px;
}
.bonus-card-title {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 1.19;
color: #000;
margin: 4px 0 6px;
}
.bonus-card-desc {
font-family: "Inter", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.5;
color: #000;
margin: 0;
}
/* 150 Bonus Classes Section */
.bonus-classes-section {
background: transparent;
padding: 0;
position: relative;
}
.bonus-classes-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 80px;
background: #fffde2;
z-index: 0;
}
.bonus-classes-inner {
position: relative;
z-index: 1;
max-width: 1440px;
margin: 0 auto;
text-align: center;
padding: 52px 0 0;
}
.bonus-classes-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: #fff260;
border-radius: 4px;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 1;
color: #000;
padding: 6px 3px;
margin-bottom: 12px;
}
.bonus-classes-strike {
text-decoration: line-through;
text-decoration-color: #ff0000;
text-decoration-thickness: 3px;
}
.bonus-classes-title {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 1.17;
color: #000;
margin: 0 auto 32px;
max-width: 700px;
}
.bonus-classes-ipad-wrap {
max-width: 726px;
margin: 0 auto;
}
.bonus-classes-ipad-img {
width: 100%;
height: auto;
display: block;
}
@media (max-width: 991px) {
.bonus-classes-section {
padding: 16px 20px 30px;
}
.bonus-classes-inner {
padding-top: 24px;
}
.bonus-classes-badge {
font-size: 24px;
padding: 4px 14px;
}
.bonus-classes-title {
font-size: 26px;
margin-bottom: 24px;
}
}
/* Video Testimonials */
.video-testimonials-row {
display: flex;
justify-content: center;
gap: 28px;
margin-bottom: 32px;
max-width: 970px;
margin-left: auto;
margin-right: auto;
}
.video-testimonial-card {
width: 220px;
flex-shrink: 0;
border-radius: 8px;
overflow: hidden;
}
.video-testimonial-media {
position: relative;
width: 220px;
height: 293px;
border-radius: 8px 8px 0 0;
overflow: hidden;
cursor: pointer;
background: #000;
}
.video-testimonial-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.video-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: none;
border: none;
cursor: pointer;
padding: 0;
z-index: 2;
transition: opacity 0.2s ease;
}
.video-play-icon {
width: 74px;
height: 74px;
}
.video-testimonial-media.is-playing .video-play-btn {
opacity: 0;
pointer-events: none;
}
.video-testimonial-caption {
font-family: Poppins;
background: #ebe6fd;
border-radius: 0 0 8px 8px;
padding: 10px 10px;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.31;
text-align: center;
color: #000;
height: 72px;
display: table-cell;
vertical-align: middle;
width: 220px;
}
@media (max-width: 991px) {
.video-testimonials-row {
gap: 12px;
overflow-x: auto;
justify-content: flex-start;
padding: 0 16px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.video-testimonials-row::-webkit-scrollbar {
display: none;
}
.video-testimonial-card {
width: 220px;
min-width: 180px;
scroll-snap-align: start;
}
.video-testimonial-media {
width: 220px;
height: 292px;
}
.video-testimonial-caption {
font-size: 14px;
min-height: 60px;
}
}
/* Video testimonial dots (mobile) */
.video-testimonials-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 16px;
margin-bottom: 8px;
}
.video-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: #d9d9d9;
cursor: pointer;
transition: background 0.2s ease;
}
.video-dot.active {
background: #888;
}
/* Color section */
.color-title-style {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 46px;
}
.color-images-no-gap {
gap: 0;
}
.color-img-clip-first {
clip-path: inset(3px 2px 0 0);
}
.color-img-clip {
clip-path: inset(1px 1px 0 0);
}
.cta-wrapper-fit {
width: fit-content;
}
/* Reviews / ratings */
.rating-table-style {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 24px;
color: #111827;
}
.rating-big {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 70px;
text-align: center;
}
.rating-stars-85 {
max-width: 85px;
}
.trustpilot-logo {
width: 63px;
margin-top: 0px;
}
@media (max-width: 991px) {
.trustpilot-logo {
display: none;
}
}
.rating-subtitle {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 120%;
text-align: center;
}
/* Detailed reviews */
.detailed-reviews-container {
max-width: 1160px;
padding: 0;
}
@media (max-width: 1199px) {
.detailed-reviews-container {
padding-left: 16px;
padding-right: 16px;
}
}
.review-divider {
border-bottom: 1px solid #e5e5e5;
}
.reviewer-avatar {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: #e5e5e5;
}
.reviewer-verified-badge {
position: absolute;
bottom: 0;
right: 0;
width: 14px;
height: 14px;
background: #a472ea;
display: flex;
align-items: center;
justify-content: center;
}
.reviewer-name {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 14px;
color: #7c3aed;
}
.review-title-style {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 14px;
margin-bottom: 8px;
}
.review-title-underline {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 14px;
margin-bottom: 8px;
text-decoration: underline;
}
.review-text-style {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #333;
margin-bottom: 12px;
}
.review-thumb {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 4px;
}
/* Footer hero sections */
.footer-hero-img {
width: 100%;
height: 100%;
max-height: 650px;
display: block;
margin-left: auto;
}
.footer-hero-flex {
height: 100%;
display: flex;
justify-content: flex-end;
}
.footer-hero-overlay-tl {
position: absolute;
top: 18px;
left: 18px;
z-index: 10;
}
.footer-hero-overlay-tr {
position: absolute;
top: 18px;
right: 18px;
z-index: 10;
}
.footer-rating-badge {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 13px;
line-height: 100%;
display: flex;
align-items: center;
gap: 8px;
}
.footer-rating-badge-mobile {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 13px;
line-height: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 12px;
}
.footer-list-style {
display: flex;
flex-direction: column;
}
.footer-cta-mobile-full {
width: 100vw;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}
/* Meals section */
.meals-section-bg {
background: #ebe6fd6e;
padding: 60px 0;
}
.meals-top-title-style {
font-size: 28px;
margin-bottom: 24px;
}
.meals-main-title-style {
font-size: 36px;
}
.meals-subtitle-style {
max-width: 660px;
margin: 16px auto 0;
}
.meals-list-style {
padding-left: 24px;
margin-top: 16px;
}
.meals-list-item {
margin-bottom: 16px;
}
/* Footer */
.footer-logo {
max-width: 158px;
height: auto;
}
.footer-text {
font-family: "Inter", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 28px;
text-align: center;
color: #e6e6e67a;
}
.footer-link {
color: #e6e6e67a;
text-decoration: none;
}
.order-btn-lg {
font-size: 20px !important;
font-weight: 800;
}
/* Checkout inline image spacers */
.checkout-inline-spacer {
margin: 0;
}
.checkout-inline-spacer-v {
margin: 12px 0;
}
.checkout-inline-spacer-bottom {
margin: 0 0 12px;
}
.free-limited-badge {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 0;
text-align: center;
background: #fff8b1;
padding: 2px 8px;
}
.join-28fam-text {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0;
text-align: center;
}
/* ===== End migrated inline styles ===== */
/* Critical font fallbacks to prevent layout shift */
.main-title {
font-family:
Outfit,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
sans-serif;
}
.secondary-title {
font-family:
Outfit,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
sans-serif;
}
.card-title {
font-family:
Poppins,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
sans-serif;
}
.cc-custom {
padding-bottom: 60px;
}
.green-title {
font-family: Poppins;
font-weight: 600;
font-style: SemiBold;
font-size: 14px;
line-height: 14px;
letter-spacing: 0.1em;
text-align: center;
text-transform: uppercase;
color: #7058ff;
}
@media (max-width: 767px) {
.green-title {
font-size: 13px;
line-height: 13px;
}
.cell-video-wrapper {
max-height: 404px;
}
}
.secondary-title {
font-family: Poppins;
font-weight: 700;
font-style: Bold;
font-size: 36px;
line-height: 42px;
letter-spacing: 0%;
text-align: center;
}
@media (max-width: 767px) {
.secondary-title {
font-size: 28px;
line-height: 28px;
}
h4.secondary-title.fs-5.text-md-start.mb-2 {
line-height: 26px;
}
.card-title {
font-size: 18px !important;
}
}
.card-title {
font-family: Poppins;
font-weight: 700;
font-style: Bold;
font-size: 20px;
line-height: 24px;
letter-spacing: 0%;
}
.font-size-13 {
font-size: 13px;
font-family: Roboto;
}
.bg-beige {
background: #f5f4ff;
}
.list {
grid-row-gap: 0 !important;
}
.list__item {
font-family: Roboto;
font-weight: 700;
font-style: Bold;
font-size: 17px;
line-height: 31px;
letter-spacing: 0%;
}
.hero-section {
padding: 0;
margin: 0;
}
.main-title {
color: #000;
font-family: Poppins;
font-weight: 700;
font-size: 48px;
line-height: 53px;
letter-spacing: -0em;
margin-top: 8px;
}
@media (max-width: 767px) {
.main-title {
font-size: 40px;
line-height: 42px;
margin-bottom: 0;
}
}
.human-body-section {
background-color: #000;
color: #fff;
border-radius: 8px;
}
.subheadline {
max-width: 470px;
font-family: "Roboto";
font-weight: 400;
font-size: 17px;
line-height: 24px;
}
.brand-logo__be {
max-width: 158px;
height: auto;
}
@media (max-width: 991px) {
.brand-logo__be {
max-width: 120px;
}
}
.low-stock-note {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
}
.stock-bars {
display: inline-grid;
grid-auto-flow: column;
gap: 2px;
}
.stock-bar {
width: 10px;
height: 10px;
background: #d9d9d9;
}
.stock-levels-text {
font-family: Barlow;
font-weight: 400;
font-size: 11px;
line-height: 100%;
letter-spacing: 0%;
}
.stock-bar.is-red {
background: #d93c25;
}
.low-stock-text {
font-family: Inter;
font-size: 11px;
font-weight: 400;
color: #d93c25;
}
.logos-inline {
display: grid;
grid-auto-flow: column;
gap: 28px;
opacity: 0.8;
align-items: center;
justify-content: center;
}
.buy-with-confidence {
top: -90px;
position: relative;
z-index: 5;
background: #dbffa4;
border-radius: 8px;
padding: 24px 18px;
height: 100%;
max-width: 816px;
}
.font-size-17 {
font-family: Poppins;
font-size: 16px;
line-height: 26px;
}
.pilates-subtitle {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0;
text-align: center;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 767px) {
.grid-3 {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.reviews-section {
margin-top: -50px !important;
}
.row.row-cols-1.row-cols-md-4.g-3 {
--bs-gutter-y: -3rem;
}
}
.metric {
background: #fff;
border-radius: 8px;
padding: 28px 20px 20px 20px;
text-align: center;
}
.num {
font-family: Outfit, Roboto, sans-serif;
font-weight: 700;
font-size: 52px;
color: #739a38;
position: relative;
top: 35px;
width: fit-content;
}
.feature-card {
background: #f6f4f3;
border-radius: 8px;
padding: 18px;
height: 100%;
}
.feature-card h4 {
margin: 10px 0 6px;
}
.color-swatches {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
align-items: start;
}
.how-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
@media (max-width: 767px) {
.how-steps {
grid-template-columns: 1fr;
}
.heal-video {
border-radius: 8px !important;
margin-bottom: 0 !important;
height: 237px !important;
}
}
.heal-video {
width: 100%;
height: 385px;
object-fit: cover;
margin-bottom: 24px;
}
/* Comparison Table Styles */
.comparison-main-title {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 40px;
text-align: center;
color: #000;
}
.comparison-subtitle {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 16px;
text-align: center;
color: black;
}
.comparison-container {
background: #f5f4ff;
border-radius: 12px;
padding: 0;
overflow: visible !important;
padding-bottom: 120px;
margin: 0 auto;
max-width: 800px;
}
.product-image-row {
height: 100px;
overflow: visible !important;
border-bottom: none !important;
}
.product-image {
width: 186px;
position: absolute;
margin-top: -70px;
height: auto;
overflow: visible !important;
}
.product-image-row .comparison-cell.is-border-right .product-image,
.product-image-row .comparison-cell:nth-child(4) .product-image {
margin-top: -110px;
}
/* Larger screens */
@media (min-width: 1200px) {
.product-image {
width: 186px;
}
}
@media (max-width: 767px) {
.product-image {
width: 120px;
}
.bottom-row-metric {
margin-top: -20px;
}
}
.body-heal-section {
background: #f6f4f380;
padding-bottom: 150px;
}
.comparison-table {
width: 100%;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 100%;
overflow: visible;
padding-bottom: 40px;
color: #000;
}
.comparison-header {
display: grid;
grid-template-columns: 2fr 1.4fr 1.2fr 1.2fr;
gap: 0;
border-bottom: 1px solid #c6c0ff;
height: 45px;
align-items: center;
font-size: 16px;
overflow: visible;
}
.comparison-row {
display: grid;
grid-template-columns: 2fr 1.4fr 1.2fr 1.2fr;
gap: 0;
border-bottom: 1px solid #c6c0ff;
min-height: 50px;
align-items: center;
}
.comparison-row:last-child {
border-bottom: none;
overflow: visible;
position: relative;
}
.comparison-row:last-child::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: #c6c0ff;
z-index: 10;
}
.cost-price {
font-family: Poppins;
font-weight: 400;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.comparison-cell {
padding: 12px 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
justify-content: center;
font-family: Inter;
font-weight: 700;
font-style: Bold;
font-size: 17px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
align-items: center;
}
.comparison-cell:first-child {
justify-content: flex-start;
text-align: left;
padding-left: 24px;
white-space: normal;
font-size: 16px;
}
/* Column 2 - Highlighted (28 Pilates) */
.comparison-cell.bareearth {
background: #dedaff;
height: 100%;
}
/* Column 3 & 4 - Other columns */
.comparison-cell.is-border-right {
background: #ebe9fd;
height: 100%;
margin-left: 16px;
}
.product-image-row .comparison-cell:nth-child(4),
.comparison-header .comparison-cell:nth-child(4),
.comparison-row .comparison-cell:nth-child(4) {
background: #ebe9fd;
height: 100%;
margin-left: 16px;
}
/* Border radius for top row */
.product-image-row .comparison-cell.bareearth {
border-radius: 8px 8px 0 0;
}
.product-image-row .comparison-cell.is-border-right,
.product-image-row .comparison-cell:nth-child(4) {
border-radius: 8px 8px 0 0;
margin-top: 40px;
align-self: stretch;
}
/* Border radius for bottom row */
.comparison-table .comparison-row:last-child .comparison-cell.bareearth {
border-radius: 0;
position: relative;
overflow: visible !important;
}
.comparison-table .comparison-row:last-child .comparison-cell.bareearth::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 40px;
background: #dedaff;
border-radius: 0 0 8px 8px;
z-index: 5;
}
.comparison-table .comparison-row:last-child .comparison-cell.is-border-right,
.comparison-table .comparison-row:last-child .comparison-cell:nth-child(4) {
border-radius: 0;
position: relative;
overflow: visible !important;
}
.comparison-table
.comparison-row:last-child
.comparison-cell.is-border-right::after,
.comparison-table
.comparison-row:last-child
.comparison-cell:nth-child(4)::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 40px;
background: #ebe9fd;
border-radius: 0 0 8px 8px;
z-index: 5;
}
.comparison-cell .status-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px !important;
white-space: nowrap;
}
/* Medium screens (1025px - 1199px) */
@media (min-width: 1025px) and (max-width: 1199px) {
.comparison-container {
max-width: 95%;
margin: 0 auto;
}
.comparison-header,
.comparison-row {
grid-template-columns: 2fr 1.3fr 1.2fr 1.2fr;
}
.comparison-cell {
padding: 14px 16px;
font-size: 15px;
}
.comparison-cell:first-child {
font-size: 15px;
padding-left: 0px;
}
}
/* Larger screens */
@media (min-width: 1200px) {
.comparison-container {
max-width: 1000px;
margin-top: 80px;
}
.comparison-header {
grid-template-columns: 2fr 1.2fr 1.2fr 1.2fr;
font-size: 18px;
}
.comparison-row {
grid-template-columns: 2fr 1.2fr 1.2fr 1.2fr;
}
.comparison-cell {
padding: 16px 20px;
font-size: 16px;
}
.comparison-cell:first-child {
font-size: 16px;
padding-left: 0px;
}
}
@media (max-width: 767px) {
.comparison-container {
max-width: 100%;
margin: 0 8px;
padding-bottom: 100px;
}
.comparison-header,
.comparison-row {
grid-template-columns: 1.3fr 0.95fr 1fr 1fr;
gap: 4px;
min-height: auto;
}
.comparison-header {
font-size: 12px;
height: 35px;
}
.comparison-row {
min-height: 40px;
}
.comparison-cell {
padding: 6px 4px;
font-size: 13px;
line-height: 1.2;
white-space: normal;
text-overflow: clip;
}
.comparison-cell:first-child {
font-size: 13px;
padding-left: 0px;
line-height: 1.3;
}
.comparison-cell.comparison-title.is-border-right {
text-align: left;
justify-content: flex-start;
height: auto;
}
.comparison-cell.comparison-title {
text-align: left;
justify-content: flex-start;
}
.comparison-cell .status-item {
font-size: 10px;
gap: 3px;
padding-left: 14px;
}
.comparison-cell .status-item img {
width: 12px !important;
height: 12px !important;
}
.product-image {
width: 100px;
margin-top: -25px;
}
.product-image-row {
height: 40px;
}
.rating-text {
font-size: 12px !important;
white-space: nowrap;
}
.comparison-header .comparison-cell {
padding-bottom: 2px;
padding-top: 1px;
}
.comparison-cell.is-border-right {
height: 100%;
}
}
.comparison-cell.is-border-right {
border-right: none;
}
/* Status icons and text */
.status-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: "Inter", sans-serif;
font-weight: 700;
font-size: 17px;
color: #000000;
}
.body-video {
width: 100%;
border-radius: 8px;
height: 100%;
object-fit: cover;
}
@media (max-width: 767px) {
.body-video {
height: 282px;
position: relative;
bottom: -8px;
}
}
@media (max-width: 900px) {
.effortless-setup-section {
display: flex;
flex-direction: column-reverse;
}
.col-lg-8.mx-auto.pt-lg-5.d-flex.gap-3.gap-lg-5.effortless-setup-section {
display: flex;
flex-direction: column-reverse;
margin: 0 0 26px 0;
}
}
.status-icon {
width: 19px;
height: 19px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
}
.status-icon.check {
background: #375c31;
color: white;
}
.status-icon.cross {
background: #b30000;
color: white;
}
.status-icon.warning {
background: #b39200;
color: white;
}
/* Rating section */
.rating-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 20px;
}
.rating-stars {
display: flex;
gap: 1.67px;
}
.rating-star {
width: 15.16px;
height: 15.16px;
background: #1bba86;
border-radius: 2px;
position: relative;
}
.rating-star::after {
content: "★";
position: absolute;
color: white;
font-size: 11px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.rating-text {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #000000;
}
/* Reviews Section Styles */
.reviews-container {
margin: 0 auto;
}
/* Reviews Grid - Clean System */
.reviews-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin: 0 auto 30px auto;
max-width: 1200px;
padding: 0 20px;
}
.review-card {
width: 100%;
height: 592px;
background: #ffffff;
border: 1px solid #d3d3d3;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.review-image {
width: 100%;
height: 249px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.review-content {
padding: 20px;
height: calc(592px - 249px);
display: flex;
flex-direction: column;
gap: 15px;
}
.review-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.user-info {
display: flex;
align-items: center;
gap: 10px;
}
.user-avatar {
width: 50px;
height: 50px;
border-radius: 5px;
object-fit: cover;
}
.user-details {
display: flex;
flex-direction: row;
}
.user-name {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 1.43em;
letter-spacing: 3.57%;
color: #000000;
margin-bottom: 2px;
}
.verified-badge {
display: flex;
align-items: center;
gap: 4px;
width: 78px;
height: 20px;
}
.verified-text {
font-family: Poppins;
font-weight: 500;
font-style: Medium;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.5px;
vertical-align: middle;
color: #3ab890;
}
.verified-icon {
width: 14px;
height: 14px;
}
.review-date {
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 17px;
line-height: 1.2em;
color: #000000;
width: 187px;
}
/* old card divider — no longer used as standalone element */
.review-title {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 17px;
line-height: 1.2em;
color: #000000;
}
.review-text {
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 17px;
line-height: 1.62em;
color: #0f0f0f;
flex-grow: 1;
}
/* Tablet: 2 columns */
@media (max-width: 1199px) {
.reviews-row {
grid-template-columns: repeat(2, 1fr);
max-width: 900px;
gap: 25px;
padding: 0;
}
}
/* Mobile: 1 column */
@media (max-width: 767px) {
.reviews-row {
grid-template-columns: 1fr;
max-width: 400px;
gap: 20px;
}
.review-card {
height: auto;
min-height: 500px;
}
.review-image {
height: 200px;
}
}
.fomo {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 24px;
}
@media (max-width: 991px) {
.fomo {
grid-template-columns: 1fr;
}
}
.footer-mini {
background-color: #2a2248;
padding: 30px 0;
text-align: center;
font-size: 14px;
color: #ffffff;
margin-top: 200px;
}
.brand-bar {
background: #000;
padding: 16px 0;
}
.brand-logos {
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
flex-wrap: wrap;
}
.brand-logos img {
height: 26px;
width: auto;
opacity: 0.95;
filter: brightness(0) invert(1);
}
@media (max-width: 767px) {
.brand-logos img {
height: 19px;
}
}
.metrics-data-wrapper {
position: relative;
top: -70px;
}
.metrics-data-wrapper .col-12 {
display: flex;
flex-direction: column;
}
.metrics-data-wrapper .metric {
flex: 1;
display: flex;
}
.peer-review-text {
font-family: Roboto;
font-weight: 400;
font-size: 14px;
line-height: 24px;
letter-spacing: 0%;
text-align: center;
color: #9b9b9b;
position: relative;
top: -33px;
width: fit-content;
margin: 0 auto;
}
/* Mobile & small tablet slideshow (up to 900px) */
@media (max-width: 900px) {
.brand-bar {
overflow: hidden;
}
.brand-logos {
animation: slide 15s linear infinite;
gap: 60px;
flex-wrap: nowrap;
justify-content: flex-start;
width: calc(200%);
}
.brand-logos img {
flex-shrink: 0;
}
}
/* Mobile utility classes */
.hide-mobile {
display: block;
}
.flex-reverse-mobile {
display: flex;
flex-direction: row;
}
@media (max-width: 767px) {
.hide-mobile {
display: none !important;
}
.flex-reverse-mobile {
flex-direction: column-reverse !important;
}
}
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Custom Carousel Layout */
/* removed custom .container overrides to use Bootstrap container spacing */
.modern-navbar .container {
max-width: none;
padding-left: 0;
padding-right: 0;
}
/* Stacked carousel slides — all images pre-rendered, toggle via .active */
.carousel-slides {
position: relative;
width: 100%;
}
.carousel-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease-in-out;
}
.carousel-slide:first-child {
position: relative;
}
.carousel-slide.active {
opacity: 1;
z-index: 1;
pointer-events: auto;
}
video.carousel-slide {
object-fit: cover;
background: #000;
}
.user-avatar {
aspect-ratio: 1;
object-fit: cover;
background: #f5f5f5;
}
.carousel-thumb img {
aspect-ratio: 1;
object-fit: cover;
background: #f5f5f5;
}
/* Optimized thumbnail styling */
.carousel-thumb img {
transition: opacity 0.2s ease;
}
.carousel-thumb:hover img {
opacity: 0.8;
}
.heal-video {
width: 100%;
height: 385px;
object-fit: cover;
margin-bottom: 24px;
}
/* Image loading states */
img[loading="lazy"] {
transition: opacity 0.3s;
}
img[loading="lazy"]:not([src]) {
opacity: 0.5;
background: #f5f5f5;
}
/* Video optimization */
video {
transition: opacity 0.3s;
/* Prevent video from being paused on click */
pointer-events: none;
}
video:hover {
opacity: 0.9;
}
.custom-carousel {
position: relative;
width: 100%;
height: 100%;
}
.main-image-container {
position: relative;
max-width: 572px;
margin-left: auto;
}
.carousel-badge {
position: absolute;
bottom: 120px;
right: 40px;
width: 121px;
height: auto;
z-index: 10;
}
/* Mobile carousel badge - positioned above thumbnails */
@media (max-width: 991px) {
#carousel-badge-mobile {
bottom: 100px;
right: 20px;
width: 100px;
}
}
.rating-badge {
display: flex;
align-items: center;
gap: 8px;
font-family: "Poppins", sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 100%;
}
.rating-excellent {
font-weight: 700;
}
.rating-stars-img {
width: 85px;
height: auto;
}
.rating-reviews {
font-weight: 400;
}
.rating-trustpilot-img {
height: 16px;
width: auto;
vertical-align: middle;
margin-left: -4px;
}
@media (max-width: 991px) {
.rating-trustpilot-img {
display: none;
}
}
.highlight-yellow {
position: relative;
display: inline;
isolation: isolate;
}
.highlight-yellow::before {
content: "";
position: absolute;
left: 8px;
right: 8px;
bottom: 20%;
height: 60%;
background-color: #fff8b1;
z-index: -1;
}
/* Mobile highlight - use gradient for better line-break support */
@media (max-width: 991px) {
.highlight-yellow {
isolation: unset;
background: linear-gradient(to top, #fff8b1 80%, transparent 0%);
padding: 0 4px;
}
.highlight-yellow::before {
display: none;
}
}
.subheadline-pilates {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 27px;
}
.list-item-pilates {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 24px;
}
.list__item {
margin-bottom: 10px;
}
.list-pilates {
display: flex;
flex-direction: column;
gap: 8px !important;
}
.list-pilates .list__item {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}
.warranty-badge {
background: #f8f2fb;
border-radius: 8px;
padding: 16px 14px;
max-width: 487px;
}
.warranty-badge-top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.warranty-badge-inner {
display: flex;
align-items: flex-start;
gap: 12px;
}
.warranty-badge-inner .warranty-logo {
margin-top: 0px;
flex-shrink: 0;
}
.warranty-badge-inner .warranty-features {
margin-top: 4px;
flex-wrap: wrap;
}
.warranty-badge-inner .warranty-text {
margin-bottom: 0;
}
.warranty-logo {
width: 32px;
height: auto;
}
.warranty-text {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 25px;
line-height: 26px;
}
.warranty-bold {
font-weight: 700;
}
.warranty-features {
display: flex;
gap: 16px;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 16px;
text-align: center;
justify-content: space-between !important;
}
/* Mobile-only adjustments (max-width = mobile override, base = desktop) */
@media (max-width: 991px) {
.list-pilates {
padding: 0 42px !important;
}
.warranty-badge {
padding-top: 12px;
}
.warranty-badge-top {
gap: 4px !important;
letter-spacing: -0.02em !important;
}
.carousel-main-image {
margin: 0 auto !important;
}
.list-container {
display: flex !important;
justify-content: center !important;
width: 100%;
text-align: center;
}
.list-container .list-pilates {
margin: 0 auto !important;
text-align: left;
}
.as-seen-on-text {
font-size: 13px;
}
.logos-marquee-set img {
height: 25px;
width: auto;
}
.green-title {
font-size: 14px;
line-height: 18px;
}
.secondary-title {
font-size: 32px;
line-height: 36px;
}
.font-size-17 {
font-size: 16px;
}
.promo-code-badge {
padding: 0 8px;
}
.warranty-logo {
width: 26px;
}
.warranty-badge {
padding-left: 8px;
padding-right: 8px;
}
.warranty-text {
font-size: 18px;
line-height: 20px;
}
.warranty-features {
font-size: 10px;
line-height: 12px;
}
/* Full width media in studio section */
#features {
padding-left: 0 !important;
padding-right: 0 !important;
}
#features > div {
max-width: 100% !important;
}
/* Add padding to text content columns */
.effortless-setup-section > .col-12:not(:has(.image-wrapper)) {
padding-left: 16px !important;
padding-right: 16px !important;
}
.effortless-setup-section .image-wrapper {
width: 100vw;
margin-left: 0;
margin-right: 0;
position: relative;
left: 0;
}
.effortless-setup-section .image-wrapper img,
.effortless-setup-section .image-wrapper video,
#features .image-wrapper img,
#features .image-wrapper video,
img.studio-media,
video.studio-media {
width: 100% !important;
max-width: 568px !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
border-radius: 8px !important;
}
.effortless-setup-section {
justify-content: center !important;
}
.effortless-setup-section > .col-12 {
max-width: 536px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.effortless-setup-section .image-wrapper {
display: flex !important;
justify-content: center !important;
width: 100% !important;
}
.app-text-col {
margin-left: auto !important;
margin-right: auto !important;
}
.meals-text-col {
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (max-width: 767px) {
#features .image-wrapper,
#features .image-wrapper img,
#features .image-wrapper video {
border-radius: 0px !important;
}
}
/* Infinite scroll logos */
.brand-bar-pilates {
background: #edeaff;
padding: 4px 0 20px;
}
.as-seen-on-text {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 13px;
line-height: 26px;
color: #7869bf;
text-align: center;
margin-bottom: 4px;
}
.logos-marquee {
overflow: hidden;
display: flex;
}
.logos-marquee-set {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 60px;
padding-right: 60px;
animation: marqueeScroll 35s linear infinite;
}
.logos-marquee-set img {
flex-shrink: 0;
}
@keyframes marqueeScroll {
to {
transform: translateX(-100%);
}
}
.footer-cta-title {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 53px;
text-transform: capitalize;
}
@media (max-width: 991px) {
.footer-cta-title {
font-size: 36px;
line-height: 42px;
}
}
.cta-guarantee-text {
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 27px;
letter-spacing: 0;
text-align: center;
color: #333;
}
/* Community Carousel */
.community-carousel-container {
width: 100%;
overflow: hidden;
margin-top: 24px;
}
.community-carousel-track {
display: flex;
align-items: center;
animation: scrollCommunity 40s linear infinite;
width: max-content;
}
.community-carousel-track {
cursor: grab;
}
.community-carousel-track.is-dragging {
cursor: grabbing;
}
.community-carousel-set {
display: flex;
gap: 24px;
align-items: center;
padding-right: 24px;
}
.community-carousel-set img {
height: 432px;
width: auto;
max-width: 300px;
object-fit: contain;
border-radius: 8px;
flex-shrink: 0;
}
@keyframes scrollCommunity {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
@media (max-width: 991px) {
.community-carousel-set img {
height: 280px;
}
}
/* Testimonial Cards Carousel */
.testimonial-carousel-container {
width: 100%;
overflow: hidden;
margin-top: 8px;
padding: 16px 0;
}
.testimonial-carousel-track {
display: flex;
align-items: flex-start;
animation: scrollTestimonials 60s linear infinite;
width: max-content;
}
.testimonial-carousel-track {
cursor: grab;
}
.testimonial-carousel-track.is-dragging {
cursor: grabbing;
}
.testimonial-carousel-set {
display: flex;
gap: 12px;
align-items: flex-start;
padding-right: 12px;
}
.testimonial-card {
background: #fff;
border-radius: 8px;
width: 300px;
flex-shrink: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.testimonial-card-image {
width: 300px;
height: 300px;
}
.testimonial-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-card-content {
padding: 20px 16px;
text-align: center;
background: #faf9ff;
}
.testimonial-card-stars {
margin-bottom: 12px;
}
.testimonial-card-stars img {
width: 77px;
height: auto;
}
.testimonial-card-title {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: black;
margin-bottom: 12px;
}
.testimonial-card-text {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 13px;
line-height: 21px;
color: black;
margin-bottom: 12px;
}
.testimonial-card-text strong {
font-weight: 700;
}
.testimonial-card-author {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 10px;
line-height: 21px;
color: black;
}
@keyframes scrollTestimonials {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
@media (max-width: 991px) {
.testimonial-card {
width: 280px;
}
.testimonial-card-image {
width: 280px;
height: 280px;
}
}
.benefit-title-pilates {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 26px;
line-height: 42px;
text-align: left;
}
.benefit-text-pilates {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 26px;
}
.benefit-testimonial-pilates {
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 24px;
font-style: normal;
background: #edeaff;
border-radius: 4px;
padding: 16px 24px;
}
.low-impact-title {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 26px;
line-height: 42px;
letter-spacing: 0%;
margin-bottom: 16px;
}
.low-impact-text {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 26px;
letter-spacing: 0%;
}
.low-impact-box {
background: #edeaff;
border-radius: 8px;
padding: 12px;
}
.low-impact-box-intro {
display: flex;
align-items: flex-start;
gap: 12px;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 26px;
}
.low-impact-check {
width: 16px;
height: 16px;
margin-top: 5px;
flex-shrink: 0;
}
.low-impact-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.low-impact-list-item {
display: flex;
align-items: flex-start;
gap: 12px;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 26px;
}
/* World-Class Instruction Section */
.instruction-badge {
display: inline-block;
background: #fff8b1;
padding: 6px 2px;
border-radius: 4px;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 1em;
text-align: center;
}
.crossed-price {
position: relative;
display: inline-block;
}
.crossed-price::after {
content: "";
position: absolute;
left: -2px;
right: -2px;
top: 50%;
height: 3px;
background: #ff0000;
}
.instruction-main-title {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 28px;
line-height: 1.17em;
margin-bottom: 16px;
}
.instruction-subtitle {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 1.5em;
margin-bottom: 0;
}
.instruction-text {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.625em;
}
.instruction-text p {
margin-bottom: 24px;
}
.instruction-text p:last-child {
margin-bottom: 0;
}
.journey-title {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 1.17em;
margin-bottom: 16px;
}
.phase-content {
font-family: "Poppins", sans-serif;
}
.phase-title {
font-weight: 700;
font-size: 20px;
line-height: 26px;
margin-bottom: 12px;
}
.phase-description {
font-weight: 400;
font-size: 16px;
line-height: 26px;
padding-left: 20px;
margin: 0;
}
.phase-description li {
margin-bottom: 8px;
}
.phase-description li:last-child {
margin-bottom: 0;
}
.chelsea-section-wrapper {
margin-top: -200px;
position: relative;
z-index: 5;
}
.chelsea-section {
background: #7869bf;
border-radius: 8px;
overflow: hidden;
}
.chelsea-title {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 1.92em;
color: #ffffff;
margin-bottom: 16px;
}
.chelsea-text {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.625em;
color: #ffffff;
}
.chelsea-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
@media (max-width: 991px) {
.instruction-main-title {
font-size: 28px;
}
.instruction-subtitle {
font-size: 18px;
}
.instruction-text {
font-size: 16px;
}
.instruction-badge {
font-size: 24px;
}
.journey-title {
font-size: 32px;
line-height: 40px;
}
.phase-title {
font-size: 20px;
line-height: 26px;
}
.phase-description {
font-size: 16px;
line-height: 26px;
padding-left: 32px;
}
.phase-description li {
margin-bottom: 0;
}
.phase-video {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
border-radius: 0 !important;
}
.instruction-section {
padding-bottom: 40px !important;
}
.chelsea-section-wrapper {
margin-top: 0;
padding-left: 0 !important;
padding-right: 0 !important;
}
.chelsea-section {
border-radius: 0;
max-width: 100% !important;
}
/* ========== MOBILE COMPARISON TABLE ========== */
#comparison-mobile .comparison-main-title {
font-size: 32px;
}
#comparison-mobile .comparison-subtitle {
font-size: 16px;
color: #000;
}
.confidence-badge-img {
width: 91px !important;
}
.whats-in-box-title {
font-size: 32px !important;
}
.box-section-title {
font-size: 22px !important;
}
.box-list {
font-size: 14px !important;
}
.confidence-cta {
margin-top: -60px !important;
}
.box-content-col {
padding-left: 0 !important;
padding-right: 0 !important;
}
.bonus-container.container {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
}
.bonus-inner {
border-radius: 0 !important;
max-width: 100% !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
.bonus-title-style {
font-size: 24px !important;
line-height: 32px !important;
margin-bottom: 16px !important;
}
.bonus-value-badge {
font-size: 24px;
padding: 4px 12px;
}
.bonus-cards-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.bonus-card {
max-width: 100%;
flex: none;
}
.bonus-card-img {
width: 100px;
height: 108px;
}
.bonus-card-title {
font-size: 14px;
}
.bonus-card-desc {
font-size: 12px;
}
.color-title {
font-size: 32px !important;
line-height: 40px !important;
}
.color-img {
width: 164px !important;
height: auto !important;
}
.color-section {
margin-bottom: 40px;
}
.reviews-section .green-title {
font-size: 14px !important;
}
.reviews-section .secondary-title {
font-size: 32px !important;
line-height: 38px !important;
}
.rating-table {
width: 100% !important;
max-width: 100% !important;
}
.rating-table .blocks {
justify-content: space-between !important;
}
.rating-table .block {
font-size: 14px !important;
}
.testimonials-images {
padding-left: 16px !important;
padding-right: 16px !important;
}
/* Hide competitors column */
#comparison-mobile .is-border-right,
#comparison-mobile .competitors-col {
display: none !important;
}
/* Grid: 3 columns (label, 28 Pilates, Studio Reformer) */
#comparison-mobile .comparison-row,
#comparison-mobile .comparison-header {
grid-template-columns: 1.1fr 1fr 1fr !important;
}
/* All cells: allow text wrap */
#comparison-mobile .comparison-cell {
white-space: normal !important;
text-overflow: unset !important;
}
/* Column spacing */
#comparison-mobile .comparison-cell.bareearth,
#comparison-mobile .comparison-cell.studio-col {
margin-left: 0px;
}
/* ---- MOBILE HEADER (combined images + text) ---- */
#comparison-mobile .mobile-header {
height: auto;
overflow: visible !important;
border-bottom: 1px solid #c6c0ff;
align-items: flex-end;
}
#comparison-mobile .mobile-header .comparison-cell.bareearth {
align-self: stretch;
}
#comparison-mobile {
overflow: visible !important;
padding-top: 10px !important;
}
#comparison-mobile > div {
overflow: visible !important;
}
#comparison-mobile .comparison-container {
overflow: visible !important;
}
#comparison-mobile .comparison-table {
overflow: visible !important;
}
#comparison-mobile .mobile-header .comparison-cell.bareearth {
background: #dedaff;
border-radius: 0;
padding: 8px;
padding-top: 30px;
padding-bottom: 12px;
display: flex;
flex-direction: column !important;
align-items: center;
overflow: visible !important;
position: relative;
}
#comparison-mobile .mobile-header .comparison-cell.bareearth > div {
display: flex;
flex-direction: column !important;
align-items: center;
}
#comparison-mobile .mobile-header .comparison-cell.bareearth::before {
content: "";
position: absolute;
top: -50px;
left: 0;
right: 0;
bottom: 0;
background: #dedaff;
border-radius: 8px 8px 0 0;
z-index: -1;
}
#comparison-mobile .mobile-header .comparison-cell.studio-col {
background: transparent;
border-radius: 0;
padding: 8px;
padding-top: 48px;
display: flex;
flex-direction: column;
align-items: center;
overflow: visible !important;
position: relative;
isolation: isolate;
}
#comparison-mobile .mobile-header .comparison-cell.studio-col::after {
content: "";
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
background: #ebe9fd;
border-radius: 8px 8px 0 0;
z-index: -1;
}
#comparison-mobile
.mobile-header
.comparison-cell.studio-col
.mobile-product-img {
margin-bottom: -24px;
}
#comparison-mobile .mobile-product-img {
max-width: 80px;
margin-top: -50px;
margin-bottom: 0px;
position: static !important;
}
#comparison-mobile
.mobile-header
.comparison-cell.bareearth
.mobile-product-img {
max-width: 110px;
width: 110px;
position: relative;
z-index: 10;
margin-left: -15px;
margin-right: -15px;
}
#comparison-mobile .mobile-stars {
width: 77px;
height: auto;
margin-bottom: 4px;
}
#comparison-mobile .mobile-header .rating-text {
font-size: 12px;
line-height: 1.2;
}
/* ---- TABLE ROWS ---- */
#comparison-mobile .comparison-row {
min-height: 70px;
}
#comparison-mobile .comparison-row .comparison-cell:first-child {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 17px;
}
#comparison-mobile .comparison-row .comparison-cell.bareearth {
background: #dedaff;
}
#comparison-mobile .comparison-row .comparison-cell:nth-child(4) {
background: #ebe9fd;
margin-left: 0px;
}
#comparison-mobile .comparison-row .comparison-cell:nth-child(4) .cost-price {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 100%;
text-align: center;
}
#comparison-mobile .comparison-row .comparison-cell.bareearth strong {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 100%;
text-align: center;
}
/* ---- LAST ROW - extended background ---- */
#comparison-mobile
.comparison-table
.comparison-row:last-child
.comparison-cell.bareearth,
#comparison-mobile
.comparison-table
.comparison-row:last-child
.comparison-cell:nth-child(4) {
position: relative;
overflow: visible !important;
}
#comparison-mobile
.comparison-table
.comparison-row:last-child
.comparison-cell.bareearth::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 24px;
background: #dedaff;
border-radius: 0 0 8px 8px;
z-index: 5;
}
#comparison-mobile
.comparison-table
.comparison-row:last-child
.comparison-cell:nth-child(4)::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 24px;
background: #ebe9fd;
border-radius: 0 0 8px 8px;
z-index: 5;
}
}
@media (min-width: 992px) {
.hero-right-content {
padding-left: 48px !important;
justify-content: flex-start !important;
}
}
.carousel-thumbnails-wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 16px;
max-width: 572px;
margin-left: auto;
}
.carousel-thumbnails {
display: flex;
gap: 8px;
overflow-x: auto;
max-width: 508px;
/* 6 thumbs * 78px + 5 gaps * 8px = 508px */
scroll-behavior: smooth;
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Mobile carousel thumbnails - show 5 thumbs */
.mobile-carousel-thumbnails {
max-width: 360px;
/* 5 thumbs * 64px + 4 gaps * 8px = 352px, rounded up */
}
@media (max-width: 400px) {
.mobile-carousel-thumbnails {
max-width: 360px;
/* 4 thumbs * 64px + 3 gaps * 8px = 280px */
}
}
.carousel-thumbnails::-webkit-scrollbar {
display: none;
}
.thumb-nav {
width: 28px;
height: 28px;
border-radius: 50%;
background: #ffdc32;
border: 1px solid #d4b000;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: opacity 0.2s ease;
}
.thumb-nav:hover {
opacity: 0.8;
}
.thumb-nav img {
width: 12px;
height: 12px;
}
.thumb-nav-prev img {
transform: rotate(180deg);
}
.carousel-thumb {
width: 78px;
height: 78px;
min-width: 78px;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
border: 2px solid transparent;
opacity: 0.6;
transition: all 0.3s ease;
flex-shrink: 0;
}
.carousel-thumb:hover {
opacity: 1;
}
.carousel-thumb.active {
border-color: #333;
opacity: 1;
}
.carousel-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel-main-image {
max-width: 572px;
width: 100%;
height: auto;
display: block;
margin-left: auto;
}
.carousel-badges {
position: absolute;
top: 16px;
left: 16px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 10;
}
.carousel-badge {
}
@media screen and (max-width: 767px) {
.calming-effects-text {
font-size: 16px !important;
}
.benefit-title-pilates {
line-height: 33px;
}
}
.carousel-badge.green {
background: #739a38;
color: white;
}
.carousel-badge.yellow {
background: #ffd700;
color: #333;
}
.carousel-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: #0000005e;
border: none;
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.carousel-nav:hover {
background: #0000007e;
transform: translateY(-50%) scale(1.05);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.carousel-nav.prev {
left: 20px;
}
.carousel-nav.next {
right: 20px;
}
.carousel-nav .arrow-icon {
display: inline-block;
width: 8px;
height: 8px;
border-top: 2px solid white;
border-right: 2px solid white;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.carousel-nav .arrow-left {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.carousel-nav .arrow-right {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
/* Modern Navbar Styles */
.modern-navbar {
background: white;
padding: 3px 0;
border-bottom: 1px solid #e5e5e5;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0px 4px 4px 0px #00000005;
}
.navbar-wrapper {
display: grid;
grid-template-columns: 1fr 1.15fr;
align-items: center;
width: 100%;
}
.navbar-left {
display: flex;
align-items: center;
}
/* Match logo to hero main image: .main-image-container is 572px max, margin-left auto in col-lg-6.
navbar-left is 1fr in a 1fr/1.15fr grid = 1/2.15 of wrapper. Hero col is 50% of wrapper.
Scale factor: 0.5 / (1/2.15) = 1.075, so use 107.5% instead of 100%. */
@media (min-width: 992px) {
.modern-navbar .navbar-left {
padding-left: max(0px, calc(107.5% - 572px));
}
}
.navbar-right {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 16px;
}
.nav-links {
display: flex;
align-items: center;
margin-right: 32px;
}
.nav-link {
color: #202e3b;
padding: 8px 16px;
position: relative;
font-family: Roboto;
font-weight: 700;
font-style: Bold;
font-size: 17px;
line-height: 16px;
letter-spacing: 0%;
}
.nav-link.active {
color: #202e3b;
background: transparent;
font-weight: 700;
border-bottom: 3px solid #ffdc32;
}
.order-btn,
.sticky-watch {
background: #ffdc32;
color: #333;
border: none;
white-space: nowrap;
padding: 9.5px 27.5px;
border-radius: 8px;
font-family: "Roboto", sans-serif;
font-weight: 800;
font-size: 14px;
cursor: pointer;
box-shadow: 0px 3px 0px 0px #dedede;
border: 1px solid #d4b000;
}
.flag-icon {
display: flex;
align-items: center;
flex-shrink: 0;
}
.flag-icon-img {
display: block;
width: 32px;
height: 18px;
object-fit: contain;
}
/* Hamburger Menu Styles */
.hamburger-menu {
display: none;
flex-direction: column;
cursor: pointer;
padding: 8px;
z-index: 101;
}
.hamburger-line {
width: 24px;
height: 3px;
background: #333;
margin: 2px 0;
transition: all 0.3s ease;
border-radius: 2px;
}
.hamburger-menu.active .hamburger-line:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.hamburger-menu.active .hamburger-line:nth-child(2) {
opacity: 0;
}
.hamburger-menu.active .hamburger-line:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
.mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: fit-content;
background: white;
z-index: 102;
transform: translateY(-100%);
transition: transform 0.3s ease;
padding: 0;
visibility: hidden;
opacity: 0;
}
.mobile-menu.active {
transform: translateY(0);
visibility: visible;
opacity: 1;
}
.mobile-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 10px;
border-bottom: 1px solid #e5e5e5;
}
.mobile-menu-title {
font-family: Poppins;
font-weight: 700;
font-style: Bold;
font-size: 22px;
line-height: 44px;
letter-spacing: 0%;
}
.mobile-menu-close {
background: none;
border: none;
font-size: 24px;
color: #333;
cursor: pointer;
padding: 8px;
line-height: 1;
}
.mobile-nav-links {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
}
.mobile-nav-link {
font-family: "Roboto", sans-serif;
font-weight: 500;
font-size: 16px;
color: #333;
text-decoration: none;
padding: 10px;
border-bottom: 1px solid #f0f0f0;
transition: all 0.3s ease;
display: block;
}
.mobile-nav-link:last-child {
border-bottom: none;
}
.mobile-nav-link.active {
color: #000;
font-weight: 600;
background-color: #ffdc32;
}
/* Sticky Order Button for Mobile */
@media (max-width: 900px) {
.sticky-order-btn {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background: #fff;
padding: 0px 16px;
padding-bottom: 10px;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
border-top: 1px solid #e0e0e0;
display: block;
opacity: 0;
transform: translateY(100%);
transition: all 0.3s ease;
}
.sticky-order-btn.visible {
opacity: 1;
transform: translateY(0);
}
}
.marker-container {
background-color: #fff8d8;
}
/* Hero Section Improvements */
.hero-section {
padding: 0;
margin: 0;
grid-column-gap: 0 !important;
}
.main-hero {
width: 100%;
max-width: none;
padding: 32px 0;
}
.gray-text {
color: #b4b4b4;
}
.quote-text {
max-width: 385px;
font-family: Roboto;
font-weight: 400;
font-size: 12px;
line-height: 18px;
}
.before-after-wrapper {
background: black;
border-radius: 8px;
padding: 16px;
}
.text-gray {
color: #c7c7c7;
}
/* Doctor Carousel Styles */
.doctor-carousel-container {
position: relative;
margin: 0 auto;
}
.doctor-carousel {
position: relative;
overflow: hidden;
border-radius: 12px;
}
.doctor-slide {
display: none;
background-color: #fbf5ef;
border-radius: 12px;
padding: 0;
min-height: 400px;
}
.doctor-slide.active {
display: block;
}
.testimonial-content {
padding-right: 20px;
}
.stars {
font-size: 20px;
margin-bottom: 20px;
}
.doctor-quote {
font-family: "Roboto", sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 1.4;
color: #333;
margin: 0 0 15px 0;
font-style: italic;
}
.doctor-attribution {
font-family: "Roboto", sans-serif;
font-size: 14px;
font-weight: 700;
color: #333;
font-style: normal;
}
.doctor-bio {
font-family: "Roboto", sans-serif;
font-size: 14px;
line-height: 1.5;
color: #666;
margin-top: 20px;
}
.doctor-image {
text-align: center;
}
.doctor-image img {
width: 150px;
height: 180px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 15px;
}
.doctor-info h4 {
font-family: "Roboto", sans-serif;
font-size: 16px;
font-weight: 700;
color: #333;
margin: 0 0 5px 0;
}
.doctor-info p {
font-family: Roboto;
font-weight: 400;
font-style: Italic;
font-size: 14px;
line-height: 21px;
letter-spacing: 0%;
}
/* Carousel Navigation */
.doctor-carousel-container .carousel-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: #0000005e;
border: none;
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.doctor-carousel-container .carousel-nav:hover {
background: #0000007e;
transform: translateY(-50%) scale(1.05);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.doctor-carousel-container .carousel-nav.prev {
left: -12px;
}
.doctor-carousel-container .carousel-nav.next {
right: -12px;
}
.doctor-carousel-container .carousel-nav svg {
width: 20px;
height: 20px;
stroke: white;
stroke-width: 2;
fill: none;
}
/* Fallback: render chevrons via CSS background to ensure visibility on iOS Safari */
.carousel-nav::after {
content: "";
display: none;
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-position: center;
background-size: 20px 20px;
pointer-events: none;
}
@supports (-webkit-touch-callout: none) {
.carousel-nav::after {
display: none;
}
}
.carousel-nav.prev::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18L9 12l6-6' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.carousel-nav.next::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18l6-6-6-6' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Carousel Dots */
.carousel-dots {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 30px;
}
.carousel-dots .dot {
width: 12px;
height: 12px;
padding: 0;
margin: 0;
border: 0;
background: #d1d5db;
border-radius: 50%;
display: inline-block;
line-height: 0;
-webkit-appearance: none;
appearance: none;
box-sizing: content-box;
flex: 0 0 auto;
aspect-ratio: 1 / 1;
transition: background-color 0.2s ease;
}
@supports not (aspect-ratio: 1 / 1) {
.carousel-dots .dot {
width: 12px;
height: 12px;
}
}
.carousel-dots .dot.active {
background: #9ca3af;
}
.carousel-dots .dot:hover {
background: #9ca3af;
}
/* Mobile responsive */
@media (max-width: 768px) {
.doctor-carousel-container {
padding: 0px 10px;
}
.doctor-testimonial {
grid-template-columns: 1fr;
text-align: center;
padding: 30px 20px;
}
.testimonial-content {
padding-right: 0;
}
.doctor-quote {
font-size: 16px;
}
.doctor-carousel-container .carousel-nav {
width: 28px;
height: 28px;
}
.doctor-carousel-container .carousel-nav.prev {
left: 5px;
}
.doctor-carousel-container .carousel-nav.next {
right: 5px;
}
}
/* Feature Cards Carousel Styles */
.feature-carousel-container {
position: relative;
margin-top: -150px;
}
/* Unified carousel for both desktop and mobile */
.feature-carousel-desktop {
display: block;
overflow: hidden;
width: 100%;
cursor: grab;
user-select: none;
}
.feature-carousel-desktop.dragging {
cursor: grabbing;
}
.feature-cards-track {
display: flex;
gap: 18px;
width: fit-content;
transition: transform 0.1s ease-out;
}
.feature-card-item {
flex: 0 0 auto;
width: 280px;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.feature-cards-track {
padding: 0 20px;
}
.feature-card-item {
width: 280px;
}
}
@keyframes slideFeatures {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-2664px);
}
}
/* Mobile - Same structure as desktop */
.feature-carousel-mobile {
display: none;
overflow: hidden;
width: 100%;
cursor: grab;
user-select: none;
}
.feature-carousel-mobile.dragging {
cursor: grabbing;
}
.feature-slides-container {
display: flex;
gap: 18px;
padding: 0 20px;
width: fit-content;
transition: transform 0.1s ease-out;
}
.feature-slide {
flex: 0 0 280px;
}
.feature-carousel-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
}
.feature-carousel-nav.prev {
left: -25px;
}
.feature-carousel-nav.next {
right: -25px;
}
.feature-carousel-dots {
margin-top: 20px;
}
/* Accordion Styles */
.accordion {
background: transparent;
max-width: 922px;
margin: 0 auto;
}
.accordion__wrapper {
background: transparent;
}
.accordion__item {
background: #ffffff;
border: 1px solid #4f4f4f;
border-radius: 4px;
margin-bottom: 16px;
}
.accordion__item:last-child {
margin-bottom: 0;
}
.accordion__item-header {
width: 100%;
padding: 0px 16px;
background: none;
border: none;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
text-align: left;
}
.accordion_title {
font-family: Poppins;
font-weight: 700;
font-style: Bold;
font-size: 16px;
letter-spacing: 0%;
color: black;
}
.accordion_icon-wrapper {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.accordion_icon {
width: 30px;
height: 30px;
font-size: 20px;
color: black;
border: 1px solid black;
border-radius: 100%;
padding: 4px;
}
.accordion__item-wrapper {
display: none !important;
}
.accordion__item-wrapper.is-active {
margin-top: -20px;
display: block !important;
}
.accordion__item-body {
border: none;
padding: 0 16px;
}
.accordion__text {
font-family: Poppins;
font-weight: 400;
font-style: Regular;
font-size: 16px;
line-height: 26px;
letter-spacing: 0%;
color: black;
padding-top: 20px;
}
@media (max-width: 768px) {
.accordion__item {
padding: 0;
}
.accordion__item-header {
padding: 16px 20px;
}
.accordion_title {
font-size: 16px;
}
.accordion__item-body {
padding: 0 20px 16px 20px;
}
.accordion__text {
font-size: 14px;
padding-top: 16px;
}
}
/* Desktop - hide mobile menu completely */
@media (min-width: 769px) {
.mobile-menu {
display: none !important;
}
.hamburger-menu {
display: none !important;
}
}
@media (max-width: 768px) {
.promo-strip {
font-family: Poppins;
font-weight: 700;
font-style: Bold;
font-size: 16px;
line-height: 26px;
letter-spacing: 0%;
text-align: center;
}
.modern-navbar .container {
padding: 0 !important;
}
.navbar-wrapper {
display: flex !important;
justify-content: space-between;
align-items: center;
margin: 0 !important;
padding: 0 !important;
flex-wrap: nowrap !important;
}
.navbar-wrapper > * {
flex-basis: auto !important;
width: auto !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
.navbar-left {
display: flex !important;
align-items: center;
padding-left: 10px !important;
}
.navbar-right {
display: none !important;
}
.hamburger-menu {
display: flex !important;
padding-right: 10px !important;
}
.nav-links {
gap: 20px;
margin-right: 0;
}
.nav-link {
font-size: 14px;
padding: 6px 12px;
}
/* Feature Carousel Mobile - Use desktop carousel for both */
.feature-carousel-desktop {
display: block !important;
}
.feature-carousel-mobile {
display: none !important;
}
.feature-carousel-nav {
width: 28px;
height: 28px;
}
.feature-carousel-nav.prev {
left: -15px;
}
.feature-carousel-nav.next {
right: -15px;
}
/* Hide feature carousel arrows on mobile */
.feature-carousel-nav {
display: none !important;
}
/* 3 Steps Section - Horizontal Scroll on Mobile */
.how-steps-mobile {
display: flex;
overflow-x: auto;
gap: 20px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.how-steps-mobile .col {
flex: 0 0 300px;
scroll-snap-align: center;
}
.how-steps-mobile {
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE and Edge */
}
.how-steps-mobile::-webkit-scrollbar {
display: none;
/* Chrome, Safari and Opera */
}
.container {
padding-left: 20px !important;
padding-right: 20px !important;
}
.hero-section .col-12 {
padding: 14px !important;
}
.feature-card {
padding: 16px 16px !important;
}
.perks-card {
padding: 16px 4px !important;
}
.metric {
padding: 16px 6px !important;
}
.peer-review-text {
font-weight: 400;
font-style: Regular;
font-size: 12px;
text-align: center;
}
.comparison-container {
margin: 0 16px !important;
padding-bottom: 220px !important;
}
.buy-with-confidence {
margin-top: -100px !important;
padding: 16px !important;
margin-left: 20px !important;
margin-right: 20px !important;
}
/* Reduce excessive spacing */
.mt-lg-3,
.my-lg-3 {
margin-top: 1rem !important;
}
.mt-lg-5,
.my-lg-5 {
margin-top: 2rem !important;
}
.pt-lg-5 {
padding-top: 2rem !important;
}
.pb-lg-5 {
padding-bottom: 2rem !important;
}
/* Hero section mobile spacing */
.main-hero {
padding: 20px 0;
}
/* Doctor carousel mobile padding */
.doctor-slide .row > div {
padding: 20px !important;
}
/* Additional font size adjustments for 14px elements */
.order-btn {
font-family: Roboto;
font-weight: 800;
font-style: ExtraBold;
font-size: 20px;
line-height: 23px;
text-align: center;
padding: 12px 20px !important;
}
.font-size-13 {
font-size: 12px !important;
}
.font-size-17 {
font-size: 16px !important;
}
/* Review cards handled by main responsive breakpoints */
/* Better mobile spacing for list items */
.list__item {
font-size: 16px !important;
line-height: 28px !important;
margin-bottom: 8px;
}
/* Optimize carousel for mobile */
.custom-carousel img {
border-radius: 4px;
}
}
/* TABLET RESPONSIVE FIXES */
@media (min-width: 768px) and (max-width: 1024px) {
/* Container and section padding adjustments */
.container {
padding-left: 30px !important;
padding-right: 30px !important;
}
/* Navbar adjustments for tablet */
.navbar-left {
padding-left: 10px;
}
/* Grid adjustments */
.grid-3 {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
/* Reviews are now handled by main responsive breakpoints */
/* Color swatches - 2 columns on tablet */
.color-swatches {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
/* How steps - 2 columns instead of 3 */
.how-steps {
grid-template-columns: repeat(2, 1fr);
}
/* Feature cards grid - 2 columns for tablet */
.row-cols-md-3 {
--bs-gutter-x: 1.5rem;
}
.row-cols-md-3 > * {
flex: 0 0 auto;
width: 100%;
}
/* Comparison table adjustments */
.comparison-container {
max-width: 90%;
margin: 0 auto;
}
.comparison-header,
.comparison-row {
grid-template-columns: 1.8fr 1.3fr 1.1fr 1.1fr;
}
.comparison-cell {
padding: 12px 10px;
font-size: 15px;
}
.comparison-cell:first-child {
font-size: 15px;
padding-left: 0px;
}
/* Doctor carousel tablet adjustments */
.doctor-carousel-container {
padding: 20px;
}
.doctor-slide .row > div {
padding: 30px 20px;
}
/* Feature carousel adjustments */
.feature-card-item {
width: 300px;
}
/* Metrics section */
.metrics-data-wrapper {
top: -50px;
}
/* Hero section adjustments */
.main-title {
font-size: 38px;
line-height: 46px;
}
.secondary-title {
font-size: 32px;
line-height: 40px;
}
/* Better spacing for sections */
.p-3.p-md-0 {
padding: 2rem !important;
}
/* Buy with confidence section */
.buy-with-confidence {
margin-left: 30px;
margin-right: 30px;
padding: 24px;
}
/* Accordion adjustments */
.accordion__item-header {
padding: 20px;
}
.accordion__item-body {
padding: 0 20px 20px 20px;
}
/* Brand logos spacing */
.brand-logos {
gap: 40px;
}
/* Image grid for colors - better tablet layout */
.row.row-cols-1.row-cols-md-4 {
--bs-gutter-x: 1.5rem;
}
.row.row-cols-1.row-cols-md-4 > * {
flex: 0 0 auto;
width: 50%;
}
/* Features grid - 2 columns for 6 features */
.row.row-cols-2.row-cols-md-3 {
--bs-gutter-x: 2rem;
}
.row.row-cols-2.row-cols-md-3 > * {
flex: 0 0 auto;
width: 50%;
}
/* Heal video adjustments */
.heal-video {
height: 320px;
margin-bottom: 20px;
}
/* Body video adjustments */
.body-video {
height: 300px;
}
/* Better font sizes for tablet */
.font-size-17 {
font-size: 16px;
line-height: 24px;
}
/* Testimonial adjustments */
.doctor-quote {
font-size: 17px;
}
/* Order button tablet sizing */
.order-btn {
font-size: 16px;
padding: 12px 28px;
}
/* Product images in comparison */
.product-image {
width: 150px;
margin-top: -40px;
}
/* Quote text adjustments */
.quote-text {
font-size: 13px;
line-height: 19px;
}
/* List items better spacing */
.list__item {
font-size: 16px;
line-height: 30px;
}
/* Calming effects text sizing */
.calming-effects-text {
font-size: 16px;
}
/* Metric number positioning */
.num {
font-size: 48px;
top: 30px;
}
/* Status item font size */
.status-item {
font-size: 15px;
}
}
/* Additional tablet landscape adjustments */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.how-steps {
grid-template-columns: repeat(3, 1fr);
}
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
}
/* Make feature card titles left-aligned on all screen sizes */
.feature-card-item .secondary-title {
text-align: left !important;
}
img.cc-image {
width: 100%;
}
@media (max-width: 991px) {
.black-banner div {
width: 100%;
display: flex;
justify-content: center;
}
.col-12.col-lg-4.pt-lg-5.pe-lg-5 {
text-align: center;
}
.doctor-carousel-container .carousel-nav.next {
right: 20px;
}
.doctor-carousel-container .carousel-nav.prev {
left: 20px;
}
.cc-gap-2 {
gap: 10px;
}
}
@media screen and (max-width: 900px) {
.col-12.col-lg-8.p-5 {
width: 50%;
padding: 48px 24px 48px 76px !important;
}
.col-12.col-lg-4.pt-lg-5.pe-lg-5 {
width: 50%;
align-self: center;
}
.section.cc-custom.he01 .container {
padding-right: 20px !important;
margin-right: 0;
margin-left: 20px;
padding-left: 0px !important;
max-width: 100%;
}
.section.cc-custom.he01 .container .headline-component {
/* margin-right: auto; */
/* padding-right: 140px; */
}
.section.cc-custom.he01 .container .how-steps-mobile.d-md-none {
padding-right: 20px;
}
/* Feature Carousel Mobile - Use desktop carousel for both */
.feature-carousel-desktop {
display: block !important;
}
.feature-carousel-mobile {
display: none !important;
}
.feature-carousel-nav {
width: 28px;
height: 28px;
}
.feature-carousel-nav.prev {
left: -15px;
}
.feature-carousel-nav.next {
right: -15px;
}
/* Hide feature carousel arrows on mobile */
.feature-carousel-nav {
display: none !important;
}
/* 3 Steps Section - Horizontal Scroll on Mobile */
.how-steps-mobile {
display: flex;
overflow-x: auto;
gap: 20px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.how-steps-mobile .col {
flex: 0 0 280px;
scroll-snap-align: center;
}
.how-steps-mobile {
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE and Edge */
}
.how-steps-mobile::-webkit-scrollbar {
display: none;
/* Chrome, Safari and Opera */
}
.container {
padding-left: 20px !important;
padding-right: 20px !important;
}
.hero-section .col-12 {
padding: 16px !important;
}
.feature-card {
padding: 16px 16px !important;
}
.perks-card {
padding: 16px 4px !important;
}
.metric {
padding: 16px 6px !important;
}
.peer-review-text {
font-weight: 400;
font-style: Regular;
font-size: 12px;
text-align: center;
}
.comparison-container {
margin: 0 16px !important;
padding-bottom: 220px !important;
}
.buy-with-confidence {
margin-top: -100px !important;
padding: 16px !important;
margin-left: 20px !important;
margin-right: 20px !important;
}
/* Reduce excessive spacing */
.mt-lg-3,
.my-lg-3 {
margin-top: 1rem !important;
}
.mt-lg-5,
.my-lg-5 {
margin-top: 2rem !important;
}
.pt-lg-5 {
padding-top: 2rem !important;
}
.pb-lg-5 {
padding-bottom: 2rem !important;
}
/* Hero section mobile spacing */
.main-hero {
padding: 20px 0;
}
/* Doctor carousel mobile padding */
.doctor-slide .row > div {
padding: 20px !important;
}
/* Additional font size adjustments for 14px elements */
.order-btn {
font-family: Roboto;
font-weight: 800;
font-style: ExtraBold;
font-size: 20px;
line-height: 23px;
text-align: center;
padding: 12px 20px !important;
}
.font-size-13 {
font-size: 12px !important;
}
.font-size-17 {
font-size: 16px !important;
}
/* Review cards handled by main responsive breakpoints */
/* Better mobile spacing for list items */
.list__item {
font-size: 16px !important;
line-height: 28px !important;
margin-bottom: 8px;
}
/* Optimize carousel for mobile */
.custom-carousel img {
border-radius: 4px;
}
.marker-container.mt-3.d-md-flex.col-lg-10.mx-auto.mt-5 {
display: flex;
}
}
.testimonials-images {
padding-bottom: 20px;
max-width: 956px;
margin: 0 auto;
display: flex;
justify-content: space-between;
padding-top: 38px;
font-family: Poppins;
}
.rating-table .blocks {
display: flex;
border-bottom: 1px solid #e1e1e1;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
width: 320px;
}
.rating-table .blocks .block {
font-size: 14px;
color: #111827;
font-weight: 600;
display: flex;
align-items: center;
padding: 2px 0;
flex-wrap: nowrap;
/* font-family: 'Roboto', sans-serif; */
}
.middle-rating {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 20px;
}
.middle-rating strong {
font-size: 70px;
line-height: 1;
margin-bottom: 0px;
}
.middle-rating img {
}
.middle-rating p {
font-size: 16px;
max-width: 220px;
text-align: center;
line-height: 20px;
margin-bottom: 0;
margin-top: -8px;
}
.testimonials-images .images {
display: flex;
align-items: center;
}
.rating-table .blocks .block img {
margin-right: 20px;
max-width: 168px;
margin-block: 10px;
margin-top: 2px;
margin-bottom: 2px;
}
.testimonials-images .images ul {
margin-bottom: 0;
}
.testimonials-images ul {
display: grid;
grid-template-columns: repeat(4, 72px);
grid-auto-rows: 72px;
gap: 7px;
}
.testimonials-images ul {
list-style-type: none;
padding: 0;
}
.testimonials-images ul li {
margin: 0;
padding: 0;
}
.testimonials-images ul img {
width: 100%;
height: 100%;
object-fit: cover;
}
img.rating {
max-width: 85px;
height: 32px;
}
@media (max-width: 1024px) {
.testimonials-images {
padding-bottom: 0;
flex-direction: column;
align-items: center;
padding-top: 5px;
margin-bottom: 2rem;
gap: 24px;
}
.rating-table {
margin-bottom: 30px;
width: 100%;
}
.rating-table .blocks {
gap: 4px;
width: 100% !important;
max-width: 100% !important;
}
.rating-table .blocks .block:nth-child(1) {
max-width: none;
width: 40%;
flex: none;
min-width: 0;
font-size: 12px;
white-space: nowrap;
}
.rating-table .blocks .block + .block {
margin-left: 0;
width: 60%;
flex: none;
justify-content: flex-end;
font-size: 12px;
}
.rating-table .blocks .block span {
font-size: 16px;
}
.rating-table .blocks .block img {
width: calc(100% - 30px);
max-width: 85px;
margin-right: 4px;
}
.testimonials-images ul {
grid-template-columns: repeat(4, 80px);
grid-auto-rows: 80px;
}
/* 101 Fat-Burning Meals Section Mobile */
.meals-section-bg {
padding-top: 32px;
}
.meals-top-title {
font-size: 24px !important;
margin: 0px 32px !important;
margin-bottom: 8px !important;
}
.meals-badge {
font-size: 24px !important;
}
.meals-main-title {
font-size: 32px !important;
line-height: 42px !important;
}
.meals-subtitle {
font-size: 18px !important;
line-height: 26px !important;
margin: 0 10px !important;
}
.meals-intro {
font-size: 16px !important;
line-height: 24px !important;
}
.meals-why-title {
font-size: 18px !important;
}
.meals-list li {
font-size: 16px !important;
line-height: 24px !important;
}
.col-12.col-lg-8.p-5 {
width: 100%;
padding: 24px 24px 24px 24px !important;
}
.col-12.col-lg-4.pt-lg-5.pe-lg-5 {
width: 100%;
align-self: center;
}
.marker-container.mt-3.d-md-flex.col-lg-10.mx-auto.mt-5 {
display: block;
}
.d-lg-none.h-menu-wrapper {
display: flex;
align-items: center;
gap: 5px;
}
}