@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1400px;
    }
}

body {
     font-family: 'Poppins', sans-serif;
}

section.home-banner{
     background-image: var(--banner-image);
     padding: 300px 0px 250px;
     background-size: cover;
}

.section-heading h1 {
    color: #FFFFFF;
    font-size: 60px;
    font-weight: 400;
    margin-bottom: 20px;
}

.section-heading h1 span {
    display: block;
    color: #B08D57;
}

section.home-banner p {
    color: #C4C4C4;
}

.section-heading p {
    font-size: 18px;
    line-height: 32px;
    margin-bottom: 30px;
    color: #5B5B5B;
}

.section-heading h5 {
    color: #C4C4C4;
    font-weight: 600;
    font-size: 26px;
    max-width: 500px;
    line-height: 38px;
    margin-bottom: 20px;
}

.btn-wrapper {
    display: flex;
    gap: 15px;
}

.btn-white {
    background: linear-gradient(
  90deg,
  #959598 0%,
  #EDEDED 50%,
  #78777C 100%
);
    border-radius: 50px;
    color: #28282B;
    font-weight: 500;
    padding: 12px 40px;
    font-size: 16px;
}

.btn-transparent {
    background-color: transparent;
    border-radius: 50px;
    color: #FFFFFF;
    font-weight: 500;
    padding: 12px 40px;
    font-size: 16px;
    border: 1px solid white;
}

a.navbar-brand {
    padding: 0;
    margin: 0;
}

header {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    top: 30px;
    z-index: 1;
}

ul.navbar-nav {
    background: linear-gradient(90deg, #959598 0%, #EDEDED 50%, #78777C 100%);
    border-radius: 50px;
    padding: 15px 30px;
    gap: 4px;
}

.navbar-light .navbar-nav .nav-link {
    color: #000000;
    font-weight: 500;
    border-radius: 50px;
    padding: 10px 15px;
    font-size: 15px;
}

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link.active {
    background-color: black;
    color: white;
}

.section-heading h6 {
    color: #969696;
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 15px;
}

.section-heading h2 {
    color: #020E2C;
    font-size: 50px;
    font-weight: 400;
    line-height: 64px;
    text-transform: capitalize;
}

.section-heading h2 span {
    color: #B08D57;
}

.btn-black {
    background: #000000;
    border-radius: 50px;
    color: white;
    font-weight: 500;
    padding: 12px 40px;
    font-size: 16px;
}

section.pillar {
    margin-top: -42px;
    background-color: white;
    padding: 100px 0px;
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    background-image: url(../img/pillar-bg.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}
.services-pillar {
    background: linear-gradient(180deg, #FFFFFF 40%, #F1E4D4 100%) !important;
}

.pillar-cards-row {
    margin-top: 60px;
    row-gap: 30px;
}
.pillar-card {
    background: #F6F6F6;
    border-radius: 40px;
    padding: 35px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    padding-bottom: 0;
    overflow: hidden;
}
.pillar-card:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}
.pillar-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}
.pillar-tags {
    display: flex;
    gap: 8px;
}
.pillar-tags .tag {
    background: linear-gradient(  90deg,  #959598 0%,  #EDEDED 50%,  #78777C 100%);
    color: #000000;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 17px;
    border-radius: 50px;
}
.services-pillar .pillar-tags .tag {
    background: #fff;
    color: #000000;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 17px;
    border-radius: 50px;
}
.pillar-arrow {
    width: 40px;
    height: 40px;
    min-width: 32px;
    background-color: #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    padding: 8px;
}
.pillar-arrow:hover {
    background-color: #B08D57;
}
.pillar-card h4 {
    font-size: 30px;
    font-weight: 400;
    color: #000000;
    margin-bottom: 12px;
    line-height: 38px;
}
.pillar-card p {
    font-size: 15px;
    line-height: 22px;
    color: #5B5B5B;
    margin-bottom: 20px;
    flex-grow: 1;
}
.pillar-img {
    border-radius: 16px;
    overflow: hidden;
    height: 280px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.pillar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pillar-arrow img {
    width: 65%;
    height: auto;
}

.pillar-card:hover a.pillar-arrow {
    background-color: white;
}

.pillar-card:hover a.pillar-arrow img {
    filter: invert(1);
}

section.clinical-services {
    background-color: #000000;
    padding: 100px 0;
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    margin: 0px 15px;
}
.clinical-services .section-heading h6 {
    color: #969696 !important;
}
.section-heading h6.eyebrow-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: black;
}
.clinical-services .section-heading h2 {
    color: #FFFFFF;
    max-width: 100%;
}

.clinical-services .section-heading h2 span {
    color: #B08D57;
}
.clinical-services .section-heading p {
    color: #C4C4C4;
    /* max-width: 420px; */
}
.clinical-services .col-lg-5 .section-heading {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.service-cards-row {
    margin-top: 60px;
    row-gap: 25px;
}
.service-card {
    background-color: #262626;
    border-radius: 12px;
    padding: 40px 45px;
    height: 100%;
}
.service-card:hover {
    background-color: #242424;
}
.service-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: #515151;
    color: #FFFFFF;
    font-size: 25px;
    font-weight: 400;
    border-radius: 50%;
    margin-bottom: 25px;
}
.service-card h4 {
    font-size: 28px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 35px;
    margin-bottom: 15px;
}
.service-card p {
    font-size: 15px;
    line-height: 25px;
    color: #FFFFFF;
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .clinical-services .col-lg-5 .section-heading {
        text-align: left;
        align-items: flex-start;
        margin-top: 30px;
    }
    .clinical-services .section-heading p {
        margin-left: 0;
    }
}

section.reta-peptide {
    padding: 100px 0;
    position: relative;
    min-height: 1050px;
    display: flex;
    align-items: center;
}
.reta-img {
    width: 100%;
}
.reta-img img {
    width: 100%;
    height: auto;
    display: block;
}
.reta-peptide .section-heading {
    padding-left: 60px;
}
.reta-peptide .section-heading h2 {
    max-width: 560px;
    font-weight: 400;
}
.reta-peptide .section-heading p {
    max-width: 460px;
}

@media (max-width: 991px) {
    .reta-peptide .section-heading {
        padding-left: 0;
        margin-top: 40px;
    }
}

.reta-peptide-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

.reta-peptide-img img {
    width: 100%;
    height: 100%;
}

section.reta-peptide .container {
    position: relative;
}

section.quality-healthcare {
    background: linear-gradient(180deg, #FFFFFF 0%, #F1E4D4 100%);
    padding: 80px 0 60px;
}
.quality-healthcare .section-heading h2 {
    max-width: 100%;
    font-weight: 400;
    line-height: 54px;
    margin-bottom: 30px;
}
.qh-divider {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    margin-bottom: 50px;
}
.qh-features-row {
    row-gap: 30px;
}
.qh-arrow {
    display: inline-flex;
    margin-bottom: 20px;
}
.qh-feature h5 {
    font-size: 20px;
    font-weight: 500;
    color: #222222;
    margin-bottom: 15px;
}
.qh-feature p {
    font-size: 15px;
    line-height: 21px;
    color: #54514A;
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .quality-healthcare .section-heading h2 {
        font-size: 38px;
        line-height: 46px;
    }
}

section.weight-loss {
    background-color: #000000;
    position: relative;
    overflow: hidden;
    padding: 150px 0 80px;
    border-radius: 50px;
    margin: 20px 15px 0px;
}
.wl-bg-image {
    position: absolute;
    top: 60px;
    right: 0;
    height: 100%;
    width: 45%;
    z-index: 0;
}
.wl-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: grayscale(100%);
}
.wl-bg-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0) 70%);
}
.weight-loss .container {
    position: relative;
    z-index: 1;
}
.section-heading h1.wl-heading {
    color: #FFFFFF;
    font-size: 100px;
    font-weight: 400;
    margin-bottom: 50px;
}
.section-heading h1.wl-heading span {
    color: #B08D57;
    display: inline;
}
.section-heading p.wl-desc {
    color: #FFFFFF;
    font-size: 16px;
    line-height: 28px;
    max-width: 800px;
    margin-bottom: 0;
}

.wl-slider-wrapper {
    margin-top: 60px;
}
.wl-swiper {
    overflow: visible;
    padding-bottom: 5px;
}
.wl-card {
    background: linear-gradient(  90deg,  #959598 0%,  #EDEDED 50%,  #78777C 100%);
    border-radius: 10px;
    padding: 25px 25px 20px;
}
.wl-card-top h5 {
    font-size: 20px;
    font-weight: 500;
    color: #222222;
    margin-bottom: 7px;
}
.wl-card-top h5 sup {
    font-size: 12px;
    font-weight: 500;
    color: #222222;
    margin-left: 2px;
    top: -0.7em;
}
.wl-card-top p {
    font-size: 14px;
    color: black;
    margin-bottom: 0;
}
.wl-card-img {
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0;
    border-bottom: 1px solid white;
    padding-bottom: 20px;
}
.wl-card-img img {
    height: 100%;
    width: auto;
    object-fit: contain;
}
.wl-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.btn-black-sm {
    background-color: #000000;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 50px;
    white-space: nowrap;
}
.wl-learn-more,a {
    font-size: 14px;
    font-weight: 500;
    color: #1A1A1A;
    text-decoration: none;
    white-space: nowrap;
}
.wl-safety-info {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    font-size: 13px;
    text-align: center;
    padding: 10px 15px;
    border-radius: 0;
    text-decoration: none;
    margin: 0 auto;
    width: auto;
    margin-top: 15px;
}

.wl-nav {
    display: flex;
    gap: 10px;
    margin-top: 60px;
    align-items: center;
    justify-content: center;
}
.wl-nav-btn {
    width: 60px;
    height: 40px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.wl-prev {
    background-color: #333333;
    color: #FFFFFF;
}
.wl-prev:hover {
    background-color: #3A3A3A;
}
.wl-next {
    background-color: #FFFFFF;
    color: #000000;
}
.wl-next:hover {
    background-color: #B08D57;
    color: #FFFFFF;
}
.wl-nav-btn.swiper-button-disabled {
    opacity: 1;
    cursor: not-allowed;
}

@media (max-width: 991px) {
    .wl-bg-image {
        width: 100%;
        opacity: 0.3;
    }
    .wl-heading {
        font-size: 56px;
    }
}

section.reach-goals {
    background-color: #FFFFFF;
    padding: 80px 0 0;
}
.reach-goals .section-heading h2 {
    max-width: 100%;
    font-weight: 400;
}
.reach-goals .section-heading p {
    margin-bottom: 20px;
}
.rg-explore-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    text-decoration: none;
}
.rg-divider {
    border: none;
    border-top: 1px solid #D6D6D6;
    margin: 20px 0 25px;
}

section.trusted-customers {
    background-image: url(../img/trusted-customers-bg.png);
    padding: 80px 0;
    position: relative;
    margin: 80px 0px 0;
    background-position: top;
    background-size: cover;
}

.tc-collage {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.tc-img {
    border-radius: 14px;
    overflow: hidden;
}
.tc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tc-img-1 {
    width: 35%;
    height: 260px;
    margin-top: 40px;
}
.tc-img-2 {
    width: 65%;
    height: 320px;
}

.section-heading h2.tc-heading {
    font-weight: 400;
    max-width: 100%;
    align-items: center;
    gap: 0 10px;
    font-size: 42px;
    margin-top: 50px;
}
.tc-avatars {
    display: inline-flex;
    align-items: center;
}
.tc-avatars img {
}
.tc-avatars img:first-child {
    margin-left: 0;
    position: relative;
    top: 15px;
}

.tc-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 40px;
    justify-content: center;
}
.tc-rating-label {
    font-size: 14px;
    font-weight: 600;
    color: #1A1A1A;
}
.tc-stars {
}
.tc-review-count {
    font-size: 14px;
    color: #5B5B5B;
}
.tc-review-count a {
    color: #191919;
    text-decoration: underline;
}
.tc-trustpilot {
    font-size: 14px;
    font-weight: 600;
    color: #1A1A1A;
}

.tc-collage-right {
}
.tc-img-3 {
    width: 55%;
    height: 300px;
}
.tc-img-4 {
    width: 45%;
    height: 220px;
    align-self: flex-end;
}

@media (max-width: 991px) {
    .tc-collage {
        margin-bottom: 40px;
    }
    .tc-collage-right {
        flex-wrap: wrap;
    }
    .tc-img-3, .tc-img-4 {
        width: 48%;
        height: 220px;
    }
}

.trust-left {
    position: absolute;
    left: 15px;
    width: 45%;
}

.trust-left img {
    width: 100%;
}

.tc-collage-right img {
    width: 100%;
}

section.healthcare-way {
    background-image: url(../img/healthcare-way-img.png);
    padding: 80px 0;
    background-size: 100% 100%;
    position: relative;
    min-height: 900px;
    overflow: hidden;
}
.healthcare-way .section-heading h2 {
    max-width: 100%;
    font-weight: 400;
}
.hw-subhead {
    color: #1A1A1A !important;
    font-weight: 500;
    font-size: 20px !important;
    max-width: 100% !important;
    line-height: 28px !important;
    margin-bottom: 15px !important;
}
.healthcare-way .section-heading p {
    max-width: 100%;
}
.hw-img {
    width: 100%;
}
.hw-img img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 991px) {
    .hw-img {
        margin-top: 40px;
    }
}

.hw-img {
    position: absolute;
    right: 10%;
    bottom: 0;
    width: 50%;
}

.hw-img img {
    width: 100%;
}

section.membership-plans {
    background-color: #000000;
    padding: 100px 0;
    border-radius: 50px;
    margin: 0px 15px 0;
}
.membership-plans .section-heading h2 {
    color: #FFFFFF;
    max-width: 100%;
    font-weight: 500;
    line-height: 56px;
}
.membership-plans .col-lg-6:last-child .section-heading p {
    color: white;
    max-width: 100%;
}

.mp-cards-row {
    margin-top: 80px;
    row-gap: 25px;
}
.mp-card {
    background-color: #262626;
    border-radius: 30px;
    padding: 60px 35px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}
.mp-card-featured {
    background: linear-gradient(180deg, #C79A5D 0%, #B08D57 100%);
    /* padding-top: 55px; */
}
.mp-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #000000;
    color: #B08D57;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 8px;
    white-space: nowrap;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.mp-card h4 {
    font-size: 24px;
    font-weight: 500;
    color: #FFFFFF;
    margin-bottom: 6px;
}
.mp-tagline {
    font-size: 15px;
    color: #FFFFFF;
    margin-bottom: 25px;
}
.mp-card-featured .mp-tagline {
    color: white;
}
.mp-price {
    font-size: 15px;
    font-weight: 400;
    color: #FFFFFF99;
    margin-bottom: 20px;
}
.mp-card-featured .mp-price {
    color: #FFFFFF99;
}
.mp-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    flex-grow: 1;
}
.mp-features li {
    font-size: 14px;
    color: #FFFFFF;
    line-height: 24px;
    padding-left: 24px;
    position: relative;
    margin-bottom: 4px;
}
.mp-card-featured .mp-features li {
    color: white;
}
.mp-features li::before {
    content: "\f00c";
    position: absolute;
    left: 0;
    top: 0;
    color: #FFFFFF;
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
}

.mp-card-featured .mp-features li::before {
    color: #FFFFFF;
}
.mp-btn {
    align-self: flex-start;
    padding: 10px 30px;
    font-size: 14px;
}

section.membership-plans .section-heading h6.eyebrow-link {
    color: white;
}

section.faq-section {
    background: linear-gradient(180deg, #FFFFFF 0%, #F1E4D4 100%);
    padding: 80px 0 0;
    overflow: hidden;
}
.faq-section .section-heading h2 {
    max-width: 100%;
    line-height: 56px;
}
.section-heading .faq-desc p {
    font-size: 16px !important;
    line-height: 24px !important;
    color: #5B5B5B;
    max-width: 300px;
    margin-bottom: 40px !important;
    margin-left: auto;
    margin-top: 25px;
}
.faq-img {
    max-width: 140px;
    text-align: center;
    margin: 0 auto;
}
.faq-img img {
    width: 100%;
    height: auto;
    display: block;
}

.faq-accordion {
    margin-top: 150px;
}
.faq-accordion .accordion-item {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0;
}
.faq-accordion .accordion-button {
    background-color: transparent;
    color: #1A1A1A;
    font-size: 17px;
    font-weight: 500;
    padding: 22px 0;
    box-shadow: none;
    border-radius: 0 !important;
}
.faq-accordion .accordion-button:not(.collapsed) {
    color: #B08D57;
    box-shadow: none;
}
.faq-accordion .accordion-button::after {
    background-image: none;
    content: '⌄';
    font-size: 22px;
    font-weight: 700;
    color: #1A1A1A;
    line-height: 1;
    transition: transform 0.2s ease;
}
.faq-accordion .accordion-button:not(.collapsed)::after {
    color: #B08D57;
    transform: rotate(180deg);
}
.faq-accordion .accordion-body {
    padding: 0 0 25px;
    font-size: 15px;
    line-height: 24px;
    color: #5B5B5B;
}

@media (max-width: 991px) {
    .faq-img {
        max-width: 200px;
        margin: 0 auto;
    }
}

.faq-accordion .accordion-button {
    background-color: transparent;
    color: #000000;
    font-size: 18px;
    font-weight: 400;
    padding: 18px 0;
    box-shadow: none;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}
.faq-accordion .accordion-button:not(.collapsed) {
    color: #B08D57;
    box-shadow: none;
}
.faq-accordion .accordion-button::after {
    display: none;
}
.faq-icon {
    font-size: 14px;
    color: #1A1A1A;
    transition: transform 0.2s ease, color 0.2s ease;
}
.faq-accordion .accordion-button:not(.collapsed) .faq-icon {
    color: #B08D57;
    transform: rotate(180deg);
}

.site-footer {
    background-color: #000000;
    padding: 60px 0 30px;
    border-radius: 50px;
    margin: 0 15px 20px;
}
.footer-logo {
    display: inline-block;
    margin-bottom: 20px;
}
.footer-logo img {
    height: 80px;
    width: auto;
}
.footer-tagline {
    font-size: 15px;
    color: white;
    max-width: 100%;
    margin-bottom: 0;
}
.footer-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 35px 0;
}

.footer-cols h5 {
    font-size: 20px;
    font-weight: 500;
    color: #FFFFFF;
    margin-bottom: 25px;
}
.footer-links-grid {
    display: flex;
    gap: 40px;
}
.footer-links-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links-grid li {
    margin-bottom: 10px;
}
.footer-links-grid a {
    font-size: 16px;
    color: #FFFFFF;
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-links-grid a:hover {
    color: #B08D57;
}

.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
    font-size: 16px;
    color: white;
    line-height: 20px;
}
.footer-contact i {
    color: #B08D57;
    font-size: 14px;
    width: 16px;
    margin-top: 3px;
}

.footer-copyright {
    font-size: 15px;
    color: white;
    margin-bottom: 0;
}
.footer-social {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}
.footer-social span {
    font-size: 13px;
    color: white;
    margin-right: 5px;
}
.footer-social a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #262626;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background-color 0.2s ease;
    text-decoration: none;
}
.footer-social a:hover {
    background-color: #B08D57;
}

@media (max-width: 767px) {
    .footer-links-grid {
        gap: 20px;
    }
    .footer-social {
        justify-content: flex-start;
        margin-top: 20px;
    }
}


/* Buttons — box-shadow/background-color/color only; transform is GSAP-driven (see animation.js hoverLift) */
.btn-white, .btn-black, .btn-transparent, .btn-black-sm, .rg-explore-link, .wl-learn-more {
    transition: box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.btn-white:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.btn-black:hover, .btn-black-sm:hover {
    background-color: #B08D57;
    box-shadow: 0 10px 20px rgba(176, 141, 87, 0.3);
}
.btn-transparent:hover {
    background-color: #FFFFFF;
    color: #000000;
}
.rg-explore-link:hover, .wl-learn-more:hover {
    color: #B08D57;
    gap: 12px;
}

.mp-card {
    transition: box-shadow 0.3s ease;
}
.mp-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.wl-card {
    transition: box-shadow 0.3s ease;
}
.wl-card:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
}

.navbar-light .navbar-nav .nav-link {
    transition: background-color 0.25s ease, color 0.25s ease;
}

.footer-links-grid a {
    position: relative;
}

section.inner-banner {
    padding: 300px 0px 250px;
    background-size: cover;
        background-image: var(--banner-image);
}
section.refill-sec {
    
    padding: 200px 0px 200px;
    background-size: cover;
    background-image: url(../img/refill-banner.png) !important;
        border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    margin-top: -42px;
}

.refill-sec h2{
    max-width: 100%;}
.section-heading-h2-100 h2{
    max-width: 100%;
}

section.journey {
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    margin-top: -42px;
    background-color: white;
    padding: 100px 0px;
}

.inner-banner .section-heading p{
    color: #C4C4C4;
}

.refill-sec  .section-heading p{
    color: #5B5B5B;
}

section.steps-section {
    background: linear-gradient(180deg, #FFFFFF 0%, #F1E4D4 100%);
    padding: 40px 0 100px;
}
.steps-list {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.step-card {
    background: #FFFFFF;
    border-radius: 24px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    display: flex;
    width: 100%;
    padding: 18px;
    align-items: center;
    transform: rotate(-5deg);
    margin: 250px 0px;
}
.step-card:not(:first-child) {
    margin-top: -40px;
}
.step-card:nth-child(even) {
    margin-left: auto;
    margin-right: 0;
    transform: rotate(5deg);
}
.step-card:nth-child(odd):not(:first-child) {
    /* transform: translateX(-20px); */
}
.step-card-img {
    position: relative;
    height: 400px;
    border-radius: 24px;
    overflow: hidden;
    flex: 0 0 400px;
}
.step-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.step-card-body {
    position: relative;
    padding: 0px 30px 0;
}
.step-number {
    width: 50px;
    height: 50px;
    background-color: #000000;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}
.step-card-body h4 {
    font-size: 28px;
    font-weight: 400;
    color: black;
    margin-bottom: 15px;
}
ul.step-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.step-list li {
    font-size: 16px;
    line-height: 23px;
    color: #5B5B5B;
    padding-left: 18px;
    position: relative;
    margin-bottom: 8px;
}
ul.step-list li::before {
    content: "";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 8px;
    font-size: 11px;
    color: #B08D57;
    width: 8px;
    height: 8px;
    background-color: #B08D57;
    border-radius: 050px;
}
@media (max-width: 767px) {
    .step-card:nth-child(even),
    .step-card:nth-child(odd):not(:first-child) {
        transform: none;
    }
    .step-card:not(:first-child) {
        margin-top: 15px;
    }
}

.step-card-body p {
    color: #5B5B5B;
    font-size: 16px;
    line-height: 26px;
}

.step-card:first-child {
    margin-top: 60px;
}
.step-card:last-child {
    transform: none;
    margin-bottom: 80px;
}

section.patient-timeline {
    background-color: #000000;
    padding: 90px 0 150px;
    border-radius: 50px;
    margin: 0px 15px;
}
.patient-timeline .section-heading h6 {
    color: #FFFFFF;
}
.patient-timeline .section-heading h2 {
    color: #FFFFFF;
    max-width: 100%;
    margin: 0 auto;
}
.patient-timeline .section-heading h2 span {
    color: #B08D57;
}
.timeline-row {
    margin-top: 80px;
    row-gap: 40px;
}
.timeline-col {
    padding: 0;
    margin: 0;
}
.timeline-number {
    margin-bottom: 15px;
    color: white;
    font-size: 50px;
}
.timeline-col h4 {
    font-size: 23px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 36px;
    margin-bottom: 15px;
    letter-spacing: -0.32px;
}
.timeline-col p {
    font-size: 15px;
    line-height: 25px;
    color: white;
    margin-bottom: 0;
}
@media (max-width: 991px) {
    .timeline-row {
        row-gap: 30px;
    }
    .timeline-col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media (max-width: 575px) {
    .timeline-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.quality-healthcare .section-heading h2 {
    text-align: left;
}
.qh-arrow i {
    font-size: 20px;
    color: #B08D57;
}

section.quality-healthcare.inner-quality-healthcare {
    background: #fffefe;
}

/* =========================================================
   NEW PAGE SECTIONS BELOW — added on top of existing styles.
   Nothing above this line has been modified.
   All font sizes / weights / colors reused from the rules
   already defined above; only new layout-specific rules
   (that don't already exist anywhere in the file) were added.
   ========================================================= */

/* ---- Member dashboard intro (login) section ---- */
section.member-login-section {
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    margin-top: -42px;
    background-color: white;
    padding: 100px 0px;
}

/* h1 in this section sits on a white background, so it reuses the
   same size/weight/margin as .section-heading h1 but with the dark
   heading color already used for h2 elsewhere (#020E2C) instead of
   white — the same kind of per-section color override already used
   throughout this file (e.g. .clinical-services .section-heading h2). */
.member-login-section .section-heading h1 {
    color: #020E2C;
}

.member-login-section .section-heading p {
    max-width: 480px;
}

.login-card {
    background-color: #F6F6F6;
    border-radius: 24px;
    padding: 45px 45px 40px;
}

/* Card title size/weight matches .mp-card h4 (24px / 500), only the
   color is switched from white to dark since this card sits on a
   light background. */
.login-card h5 {
    font-size: 24px;
    font-weight: 500;
    color: #020E2C;
    margin-bottom: 30px;
}

/* Field labels reuse the 14px / 600 / #1A1A1A treatment already used
   for .tc-rating-label. */
.login-card .form-label {
    font-size: 18px;
    font-weight: 400;
    color: #1A1A1A;
    margin-bottom: 8px;
    display: block;
}

.login-card .form-control {
    background-color: #FFFFFF;
    border: 1px solid #E3E3E3;
    border-radius: 50px;
    padding: 14px 22px;
    font-size: 15px;
    color: #1A1A1A;
    margin-bottom: 25px;
    width: 100%;
}

.login-card .form-control::placeholder {
    color: #9A9A9A;
}

.login-card .form-control:focus {
    outline: none;
    border-color: #B08D57;
    box-shadow: none;
}

/* Log In button reuses .btn-black exactly. */
.login-card .btn-black {
    border: none;
    margin-bottom: 20px;
    display: inline-block;
}

/* Helper links reuse the muted eyebrow gray already used for
   .section-heading h6 (#969696). */
.login-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.login-card-footer a {
    font-size: 14px;
    color: #969696;
    text-decoration: none;
}
.login-card-footer a:hover {
    color: #B08D57;
}

/* ---- Feature grid: "Everything your care touches" ---- */
section.care-features {
       background: linear-gradient(180deg, #FFFFFF 80%, #F1E4D4 100%);
    padding: 100px 0 120px;
}
.care-features .section-heading h2 {
    max-width: 100%;
}
.care-features-divider {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    margin: 40px 0 50px;
}
.care-features-row {
    row-gap: 50px;
}
.care-feature-arrow {
    color: #B08D57;
    font-size: 18px;
    display: inline-block;
    margin-bottom: 18px;
}

/* Heading/paragraph inside each feature block reuse the exact same
   values already used for .qh-feature h5 / .qh-feature p. */
.care-feature h5 {
    font-size: 20px;
    font-weight: 500;
    color: #222222;
    margin-bottom: 15px;
}
.care-feature p {
    font-size: 15px;
    line-height: 21px;
    color: #54514A;
    margin-bottom: 0;
}

/* ---- "Three steps. No friction." black section ---- */
section.three-steps {
    background-color: #000000;
    padding: 100px 0;
    border-radius: 50px;
    margin: 0px 15px;
}
.three-steps .section-heading h2 {
    color: #FFFFFF;
    max-width: 100%;
}
.three-steps .section-heading h2 span {
    color: #B08D57;
}
.three-steps-row {
    margin-top: 80px;
    row-gap: 0;
    column-gap: 0;
    gap: 0;
}

/* Big step numbers reuse the same gold accent color used site-wide
   (#B08D57) and the same 400 weight used for other large numerals
   such as .service-number, scaled up for this hero-style callout. */
.three-step-number {
    font-size: 64px;
    font-weight: 400;
    color: #B08D57;
    line-height: 1;
    margin-bottom: 25px;
}

/* Divider reuses .footer-divider's white/low-opacity treatment,
   which is the only divider style already defined for dark backgrounds. */
.three-step-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 25px;
}

/* Step title reuses .footer-cols h5 (20px / 500 / white). */
section.three-steps.three-steps-portal .three-step-col h5 {
    font-size: 24px;
    font-weight: 400;
    color: #FFFFFF;
    margin-bottom: 15px;
    letter-spacing: -0.32px;
}

/* Step paragraph reuses .timeline-col p (15px / 25 / white). */
.three-step-col p {
    font-size: 15px;
    line-height: 25px;
    color: #FFFFFF;
    margin-bottom: 0;
}

/* ---- FAQ section extras (accordion itself reuses .faq-accordion) ---- */
.faq-section .faq-intro-text {
    font-size: 16px;
    line-height: 24px;
    color: #5B5B5B;
}

/* =========================================================
   SERVICES PAGE SECTIONS BELOW — appended on top of everything
   above (including the previous page's additions). Nothing above
   this line has been modified. All sizes / weights / colors below
   are reused from rules already defined earlier in this file;
   only new layout-only rules were added where no existing class
   already covered that layout.
   ========================================================= */

/* ---- Hero: "Treatment Is Not One Size Fits All." ---- */
/* Structure/pattern copied from section.weight-loss (rounded black
   section with an absolutely-positioned bg image + dark gradient
   overlay + z-indexed content) since that is the only existing
   pattern for an image-behind-dark-content rounded hero. */
section.services-hero {
    background: url(../img/services.png);
    background-size: cover;
    position: relative;
    overflow: hidden;
    height: 1332px;
    border-radius: 50px;
    margin: 0px 15px 0px;
    display: flex;
    align-items: center;
}

.services-hero .container {
    position: relative;
    z-index: 1;
}
.services-hero-img {
    width: 100%;
}
.services-hero-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* Eyebrow text reuses .section-heading h6 values, just recolored to
   the accent gold already used across the file (same override
   pattern as section.membership-plans h6.eyebrow-link { color: white }). */
.services-hero .section-heading h6 {
    color: #B08D57;
}

/* h2 here reuses the exact .clinical-services .section-heading h2
   treatment: white heading on black, gold span, unrestricted width. */
.services-hero .section-heading h2 {
    color: #FFFFFF;
    max-width: 70%;
}
.services-hero .section-heading h2 span {
    color: #B08D57;
}

/* Paragraph reuses .clinical-services .section-heading p (#C4C4C4 on
   black) exactly. */
.services-hero .section-heading p {
    color: #C4C4C4;
    /* max-width: 460px; */
}

@media (max-width: 991px) {
    section.services-hero {
        padding: 60px 20px;
    }
    .services-hero-img {
        margin-bottom: 40px;
    }
}

/* ---- "A standard of care that does not drift." (01–05 columns) ---- */
section.care-standard {
    background-color: #FFFFFF;
    padding: 100px 0;
}
.care-standard .section-heading h2 {
    max-width: 100%;
}
.care-standard-row {
    margin-top: 60px;
    row-gap: 40px;
}



/* Number reuses the exact same treatment as .three-step-number
   (64px / 400 / gold) already defined above for the previous page. */
.care-standard-number {
    font-size: 64px;
    font-weight: 400;
    color: #B08D57;
    line-height: 1;
}

/* Divider under each number reuses .qh-divider (light-bg thin gray
   line), just without the larger bottom margin used in that section. */
.care-standard-col hr {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    margin: 20px 0;
}

/* Heading/paragraph reuse the exact .qh-feature h5 / .qh-feature p
   values already defined above. */
.care-standard-col h5 {
    font-size: 20px;
    font-weight: 500;
    color: #222222;
    margin-bottom: 15px;
}
.care-standard-col p {
    font-size: 15px;
    line-height: 21px;
    color: #54514A;
    margin-bottom: 0;
}

/* ---- "Member Voices" testimonial (black rounded section) ---- */
/* Reuses the same rounded-black-section pattern already used for
   section.three-steps / section.patient-timeline above. */
section.member-voices {
    background-color: #000000;
    padding: 100px 60px;
    border-radius: 50px;
    margin: 0px 15px 20px;
    text-align: center;
}

/* Eyebrow reuses .section-heading h6 values, recolored gold using
   the same override convention used for .services-hero h6 above. */
.member-voices .section-heading h6 {
    color: #B08D57;
    text-align: center;
}

.member-voices .section-heading h5 {
    color: #B08D57;
    font-weight: 400;
    font-size: 26px;
    max-width: 100% !important;
}

/* Quote reuses the exact size/weight already defined for
   .section-heading h2.tc-heading (42px / 400), only recolored white
   and italicised for the quote treatment, plus centered. */
.member-voices-quote {
    font-size: 36px;
    font-weight: 400;
    font-style: italic;
    color: #FFFFFF;
    line-height: 1.4;
    max-width: 900px;
    margin: 0 auto 35px;
}

/* Member name reuses .footer-cols h5 (20px / 500 / white). */
.member-voices-name {
    font-size: 25px;
    font-weight: 400;
    color: #B08D57;
    margin-bottom: 5px;
}

/* Member role reuses the same muted semi-transparent white already
   defined for .mp-price (#FFFFFF99) — the only existing token for
   secondary text on a dark background. */
.member-voices-role {
    font-size: 15px;
    color: #fff;
}

@media (max-width: 767px) {
    section.member-voices {
        padding: 60px 20px;
    }
    .member-voices-quote {
        font-size: 26px;
    }
}

/* =========================================================
   RESOURCES PAGE SECTIONS BELOW — appended on top of everything
   above (including all previous pages' additions). Nothing above
   this line has been modified. All colors / font-sizes / weights /
   line-heights below are reused from rules already defined earlier
   in this file; only new layout-only rules were added where no
   existing class already covered that layout.
   ========================================================= */

/* ---- Hero: "Peptides: Separating Mechanism From Marketing" ---- */
/* Light background hero — closest existing pattern is the rounded
   top-of-page section (e.g. section.pillar / section.journey /
   member-login-section) that sits directly under the header, so
   the same 50px corner radius + white base is reused here. */
section.resources-hero {
    background: url("../img/vgrf.png");
    padding: 220px 0px 120px;
    border-top-right-radius: 50px;
        margin-top: -42px;

    background-size: cover !important;
}

/* h1 reuses .section-heading h1 exactly (60px / 400 / 20px bottom
   margin) but recolored dark since this hero sits on a light
   background — same override convention already used for
   .member-login-section .section-heading h1 { color: #020E2C; }
   against the white/default .section-heading h1 (#FFFFFF). */
.resources-hero .section-heading h1 {
    color: #020E2C;
}

/* span keeps the exact same treatment already defined on
   .section-heading h1 span (display:block, color:#B08D57) —
   no override needed, values are identical on light or dark bg. */

/* Paragraph reuses the base .section-heading p as-is (18px /
   32px line-height / 30px bottom margin / #5B5B5B) since that is
   already the light-background version used in sections such as
   reta-peptide and quality-healthcare. */

.resources-hero-img {
    width: 100%;
}
.resources-hero-img img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 991px) {
    section.resources-hero {
        padding: 160px 0 60px;
    }
    .resources-hero-img {
        margin-top: 40px;
    }
}

section.resources-cards {
    padding: 100px 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #EFE8DD 100%);
}

.resources-filter-list {
    display: inline-flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 40px 0 60px;
    padding: 18px 24px;
    border-radius: 50px;
    border: 1px solid black;
}
.resources-filter-link {
    display: inline-block;
    color: #000000;
    font-weight: 500;
    font-size: 16px;
    border-radius: 50px;
    padding: 11px 30px;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease;
    background-color: transparent;
    border: 0;
}
.resources-filter-link:hover,
.resources-filter-link.active {
    background-color: #000000;
    color: #FFFFFF;
}

.resources-cards-row {
    row-gap: 30px;
}

.resource-card {
    background: #F6F6F6;
    border-radius: 40px;
    padding: 35px 20px 0 20px ;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}
.resource-card:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* Eyebrow tag reuses .tc-review-count (14px / #5B5B5B) — the only
   existing small muted label style already defined for this kind
   of secondary text on a light background. */
.resource-card-tag {
    font-size: 14px;
    color: #5B5B5B;
    margin-bottom: 15px;
    display: block;
}

/* Heading reuses .qh-feature h5 / .care-feature h5 exactly
   (20px / 500 / #222222). */
.resource-card h4 {
    font-size: 20px;
    font-weight: 500;
    color: #222222;
    margin-bottom: 15px;
    line-height: 28px;
}

/* Paragraph reuses .qh-feature p / .care-feature p exactly
   (15px / line-height 21px / #54514A). */
.resource-card p {
    font-size: 15px;
    line-height: 21px;
    color: #54514A;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* "Read More" link reuses the 14px/500 sizing already defined on
   .wl-learn-more, recolored to the gold accent (#B08D57) already
   used across the file (h1 span, mp-badge, three-step-number, etc.) */
.resource-card-link {
    font-size: 18px;
    font-weight: 400;
    color: #B08D57;
    text-decoration: none;
    margin-bottom: 25px;
    display: inline-block;

}
.resource-card-link:hover, a:hover {
    text-decoration: none !important;
}

/* Image block reuses the exact radius/overflow treatment already
   defined on .pillar-img (16px radius, overflow hidden, object-fit
   cover) and the 180px height already used there too. */
.resource-card-img {
    border-radius: 16px;
    overflow: hidden;
    height: 250px;
}
.resource-card-img img {
    width: 100%;
    height: 250px !important;
    display: block;
    object-fit: cover;
}

@media (max-width: 767px) {
    .resources-filter-list {
        padding: 10px 15px;
    }
    .resources-filter-link {
        font-size: 14px;
        padding: 8px 12px;
    }
}

/* ---- "The Men's Optimization Field Manual." CTA ---- */
/* Structure/pattern copied from section.weight-loss + .wl-bg-image
   (rounded black section, absolutely positioned grayscale photo on
   the right with a dark gradient overlay) — the only existing
   pattern for an image-behind-dark-content rounded block. */
section.resources-cta {
    background-image: url(../img/men.png);
    padding: 120px 0px 120px;
    background-size: cover;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    border-radius: 50px;
    margin: 0px 15px 20px;
}


.resources-cta-img {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 45%;
    z-index: 0;
}
.resources-cta-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: grayscale(100%);
}

.resources-cta .section-heading h2 {
    color: #FFFFFF;
    margin-bottom: 20px;
}
.resources-cta .section-heading h2 span {
    color: #B08D57;
}

/* Paragraph reuses .clinical-services .section-heading p exactly
   (#C4C4C4 on black). */
.resources-cta .section-heading p {
    color: #C4C4C4;
}

/* Buttons reuse .btn-white and .btn-transparent exactly as already
   defined — no new button styles introduced. */

@media (max-width: 991px) {
    section.resources-cta {
        padding: 60px 20px;
    }
    .resources-cta-img {
        width: 100%;
        opacity: 0.3;
    }
}

/* =========================================================
   SHOP PAGE SECTIONS BELOW — appended on top of everything
   above (including all previous pages' additions). Nothing above
   this line has been modified. All colors / font-sizes / weights /
   line-heights below are reused from rules already defined earlier
   in this file; only new layout-only rules were added where no
   existing class already covered that layout.
   ========================================================= */

/* Hero reuses section.home-banner exactly as-is (same dark banner
   image + h1/span/p + btn-white/btn-transparent pattern) — no new
   hero rules needed, just apply the existing class in the markup. */

/* ---- "The Essentials." — featured products grid ---- */
/* White rounded container reuses the exact same values already
   defined on section.pillar (margin-top -42px, white bg, 100px 0
   padding, 50px top corners) minus the background-image, since no
   equivalent image-free white rounded wrapper already exists. */
section.shop-products {
    margin-top: -42px;
    background-color: #FFFFFF;
    padding: 100px 0;
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
}

/* Filter pill list reuses .resources-filter-list / .resources-filter-link
   exactly as already defined for the resources page — same gradient
   pill bar, same active/hover states. No overrides needed. */

.shop-products-row {
    margin-top: 60px;
    row-gap: 80px;
}

/* Product card reuses the exact .pillar-card treatment (bg #F6F6F6,
   40px radius, 35px padding, shadow, flex column, overflow hidden)
   since that is the only existing "image on top, text below" card
   pattern in the file. */
.shop-product-card {
    background: #F6F6F6;
    border-radius: 15px;
    padding: 35px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}
.shop-product-card:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* Image block reuses the same 16px-radius / overflow-hidden / cover
   treatment already used on .pillar-img and .resource-card-img. */
.shop-product-img {
    border-radius: 16px;
    overflow: hidden;
    height: 220px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}
.shop-product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Title/description reuse the exact .resource-card h4 / p values
   (20px/500/#222222 and 15px/21px/#54514A) already defined above,
   since the product title/description sit at the same visual
   weight as a resource card's title/description. */
.shop-product-card h4 {
    font-size: 20px;
    font-weight: 500;
    color: #222222;
    margin-bottom: 12px;
    line-height: 28px;
}
.shop-product-card p {
    font-size: 15px;
    line-height: 21px;
    color: #54514A;
    margin-bottom: 20px;
    flex-grow: 1;
}

.shop-product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.shop-product-price {
    font-size: 20px;
    font-weight: 500;
    color: #222222;
}

.shop-safety-info {
    display: block;
    text-align: center;
    background-color: #F1E4D4;
    color: #B08D57;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 50px;
    margin-top: 25px;
    text-decoration: none;
}

section.stack-cta {
    background-color: #000000;
    padding: 90px 0;
    border-radius: 50px;
    margin: 0px 15px;
    text-align: center;
}
.stack-cta .section-heading {
    max-width: 700px;
    margin: 0 auto;
}

/* h2 reuses the exact .clinical-services .section-heading h2
   treatment (white, gold span, unrestricted width), centered to
   match this block's centered layout. */
.stack-cta .section-heading h2 {
    color: #FFFFFF;
    max-width: 100%;
    text-align: center;
}
.stack-cta .section-heading h2 span {
    color: #B08D57;
}

/* Paragraph reuses .clinical-services .section-heading p exactly
   (#C4C4C4 on black), centered. */
.stack-cta .section-heading p {
    color: #C4C4C4;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.stack-cta .btn-wrapper {
    justify-content: center;
}

section.vetted-features {
    background-color: #FFFFFF;
    padding: 90px 0;
    text-align: center;
}
.vetted-features .section-heading {
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
}
.vetted-features .section-heading h2 {
    max-width: 100%;
    text-align: center;
}
.vetted-features-row {
    margin-top: 60px;
    row-gap: 30px;
}

.vetted-card {
    background: #F6F6F6;
    border-radius: 16px;
    padding: 40px 30px;
    height: 100%;
    text-align: left;
}

.vetted-card h5 {
    font-size: 24px;
    font-weight: 400;
    color: #222222;
    margin-bottom: 12px;
    min-height: 70px;
}
.vetted-card p {
    font-size: 16px;
    line-height: 24px;
    color: black;
    margin-bottom: 0;
}

section.peptide-fundamentals {
    margin-top: -42px;
    background-color: #FFFFFF;
    padding: 100px 0;
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    background-image: url(../img/peptide-vial.png);
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
}
.peptide-fundamentals .section-heading {
    padding-right: 0;
}
.peptide-fundamentals .section-heading h2 {
    font-weight: 400;
    margin-bottom: 20px;
}
.peptide-fundamentals .section-heading p {
    max-width: 100%;
}
@media (max-width: 991px) {
    .peptide-fundamentals .section-heading {
        padding-right: 0;
    }
}

/* Vial image reuses the exact .reta-img treatment (100% width,
   auto height, block display). */
.peptide-fundamentals-img {
    width: 100%;
}
.peptide-fundamentals-img img {
    width: 100%;
    height: auto;
    display: block;
}

.peptide-stats-row {
    display: flex;
    gap: 40px;
    margin-top: 40px;
    border-top: 1px solid #00000073;
    padding-top: 35px;
}

.peptide-stat h6 {
    font-size: 22px;
    font-weight: 500;
    color: #B08D57;
    margin-bottom: 6px;
}

.peptide-stat span {
    font-size: 16px;
    color: black;
}

.care-standard-number-alt {
    font-size: 64px;
    font-weight: 400;
    color: white;
    line-height: 1;
    margin-bottom: 25px;
}

section.peptide-considered {
    background-color: #FFFFFF;
    padding: 90px 0;
}
.peptide-considered-row {
    margin-top: 50px;
    row-gap: 30px;
}
.peptide-considered-card {
    background: #F6F6F6;
    border-radius: 16px;
    padding: 35px;
    height: 100%;
}
.peptide-considered-card h5 {
    font-size: 20px;
    font-weight: 500;
    color: #222222;
    margin-bottom: 30px;
}
.peptide-considered-card p {
    font-size: 15px;
    line-height: 21px;
    color: #54514A;
    margin-bottom: 0;
}

section.safety-oversight {
    padding: 90px 0;
}
.safety-oversight .section-heading h2 {
    max-width: 460px;
    margin-bottom: 250px;
}
.safety-item {
    padding: 22px 0;
    border-top: 1px solid black;
}
.safety-item:last-child {
    padding-bottom: 0;
}
.safety-item .section-heading h6.eyebrow-link {
    justify-content: space-between;
    margin-bottom: 20px;
    font-size: 20px;
}
.safety-item .section-heading p {
    margin-bottom: 0;
    max-width: 100%;
    color: black;
    font-size: 16px;
    max-width: 450px;
}

section.care-comparison {
    background-color: #FFFFFF;
    padding: 90px 0;
}

.care-comparison .section-heading {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 50px;
}
.care-comparison .section-heading h2 {
    max-width: 100%;
    text-align: center;
}

.comparison-table {
    max-width: 720px;
    margin: 0 auto;
}
.comparison-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px 15px;
}

.comparison-header span {
    font-size: 14px;
    font-weight: 600;
    color: #1A1A1A;
}
.comparison-header span:first-child {
    font-weight: 400;
    color: #969696;
}
.comparison-header .comparison-check,
.comparison-header .comparison-cross {
    width: 130px;
    text-align: center;
}

.comparison-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50px;
    padding: 16px 30px;
    margin-bottom: 12px;
}

/* Row label reuses the same body-copy gray already used site-wide
   for paragraph text on white backgrounds (#5B5B5B). */
.comparison-row span.comparison-label {
    font-size: 15px;
    color: #5B5B5B;
}
.comparison-row .comparison-check,
.comparison-row .comparison-cross {
    width: 130px;
    text-align: center;
    font-size: 15px;
}

.comparison-check {
    color: #000000;
}

.comparison-cross {
    color: #B08D57;
}

@media (max-width: 767px) {
    .comparison-header span:first-child,
    .comparison-row span.comparison-label {
        max-width: 150px;
    }
    .comparison-header,
    .comparison-row {
        padding: 12px 18px;
    }
    .comparison-header .comparison-check,
    .comparison-header .comparison-cross,
    .comparison-row .comparison-check,
    .comparison-row .comparison-cross {
        width: 70px;
    }
}

.three-step-col {
    background-color: #141414;
    padding: 40px 30px;
    border-right: 1px solid #ffffff5e;
}

.row.three-steps-row > div {
    gap: 0;
    padding: 0;
}

.three-steps .section-heading h2 span {
    display: block;
}

section#considered .section-heading p {
    max-width: 800px;
}

.safety-oversight .safety-item:first-child {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.timeline-row-cricle .timeline-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #333333;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 400;
    border-radius: 50%;
    margin-bottom: 25px;
}

.timeline-row-cricle .timeline-col h4{
    font-size: 28px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 36px;
    margin-bottom: 15px;
}

.timeline-row-cricle .timeline-col {
    padding: 0 15px;
    margin: 0 15px;
}

.three-steps-portal.three-steps .section-heading h2 span{
    display: inline-block;
}

section.three-steps.three-steps-portal .three-step-col {
    background-color: transparent;
    border: 0;
    padding: 20px 30px;
}

section.three-steps.three-steps-portal .three-step-number {
    margin-bottom: 0;
}

section.three-steps.three-steps-portal .three-step-col h5 {
    font-size: 20px;
}

section.three-steps.three-steps-portal .three-step-divider {
    border-color: white;
}

section.inner-banner.blog-detail-inner-banner {
    position: relative;
    height: 550px;
    display: flex;
    align-items: center;
    padding: 150px 0px 0;
    background-position: center center;
}

section.inner-banner.blog-detail-inner-banner:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000000d9;
    top: 0;
    left: 0;
}

section.inner-banner.blog-detail-inner-banner span.resource-card-tag {
    color: white !important;
    position: relative;
    margin: 0;
}

section.blog-detail-content {
    padding: 80px 0px 0;
}

.blog-detail-body p {
    font-size: 18px;
    line-height: 32px;
    margin-bottom: 30px;
    color: #5B5B5B;
}