.site-branding p {
    font-size: 1.3rem;
    font-weight: 800;padding-top: 7px;
    margin-bottom: 0px;
}
.main-banner .slick-slide {padding: 0 0px;}
.main-banner {
    position: relative;
    background-color: #e9e9e9;
    overflow: hidden;
    padding-bottom: 110px;
}

/* Banner Slider Item */
.main-banner .banner-slider {
    position: relative;
    width: 100%;
}

.main-banner .banner-slide-item {
    position: relative;
    width: 100%;
    outline: none;
}
.site-branding small {font-size: 11px;}
.main-banner .banner-slide-bg {
    position: relative;
    width: 100%;
    height: 540px;
    min-height: 540px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-start;
    padding-top: 25px;
    padding-bottom: 220px;
}

/* Overlay for text legibility */
.main-banner .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.1) 100%);
    z-index: 1;
}

.main-banner .banner-content {
    position: relative;
    z-index: 2;
    padding-left: 20px;
    max-width: 580px !important;
    width: 100%;
    margin-top: 0;
    text-align: left !important;
}

.main-banner .banner-content .sub {
    margin-bottom: 10px;
}

.main-banner .banner-title {
    font-size: clamp(1.8rem, 2.5vw, 2.35rem) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.22 !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.02em !important;
    max-width: 540px !important;
    width: 100%;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
    text-align: left !important;
}

.main-banner .banner-desc {
    font-size: 0.86rem !important;
    color: rgba(255, 255, 255, 0.92) !important;
    line-height: 1.55 !important;
    margin: 0 0 16px 0 !important;
    font-weight: 400 !important;
    max-width: 380px !important;
    width: 100%;
    text-align: left !important;
}

.banner-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
    margin-top: 16px !important;
    margin-bottom: 0px !important;
    max-width: 540px !important;
    width: 100%;
    text-align: left !important;
}

.banner-buttons a.ttm-btn {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 9px 18px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    line-height: 1 !important;
    border-radius: 6px !important;
}

.banner-buttons a.ttm-btn i {
    font-size: 12px !important;
    margin-left: 0 !important;
}

/* 4 Image Boxes Section */
.main-banner .banner-boxes-wrapper {
    position: relative;
    margin-top: -155px !important;
    z-index: 10;
}

.main-banner .banner-nav-card {
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid transparent;
    height: 100%;border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.main-banner .banner-nav-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.main-banner .banner-nav-card.active {
    border-color: #556847;
    box-shadow: 0 8px 20px rgba(85, 104, 71, 0.18);
}

/* Card Image */
.main-banner .card-img-wrap {
    position: relative;
    width: 100%;
    height: 150px;
    overflow: hidden;
}

.main-banner .card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.main-banner .banner-nav-card:hover .card-img-wrap img {
    transform: scale(1.04);
}

/* Card Body Content */
.main-banner .card-body-content {
    padding: 16px 18px 20px;
    background-color: #fff;
    display: flex;
    align-items: center;
    gap: 14px;min-height: 103px;
    border-radius: 0 0 14px 14px;
    position: relative;
}

/* Icon badge */
.main-banner .card-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #556847;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

.main-banner .card-icon-box svg,
.main-banner .card-icon-box i {
    width: 24px;
    height: 24px;
    font-size: 22px;
    color: #ffffff;
    fill: currentColor;
}

.main-banner .banner-nav-card.active .card-icon-box {
    background-color: var(--gold);
}

/* Text Content */
.main-banner .card-text-box {
    flex-grow: 1;
    min-width: 0;
}

.main-banner .card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #2b2b2b;
    margin: 0 0 4px 0;
    line-height: 1.25;
}

.main-banner .card-desc {
    font-size: 0.85rem;
    color: #666666;
    margin: 0;
    line-height: 1.35;
}

/* Card Arrow */
.main-banner .card-arrow {
    color: #555555;
    font-size: 0.95rem;
    transition: transform 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
}

.main-banner .banner-nav-card:hover .card-arrow,
.main-banner .banner-nav-card.active .card-arrow {
    transform: translateX(4px);
    color: #556847;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .main-banner .banner-slide-bg {
    position: relative;
    width: 100%;
    height: 540px;
    min-height: 540px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-start;
    padding-top: 25px;
    padding-bottom: 220px;
}
    .main-banner .banner-title {
        font-size: clamp(1.85rem, 3.2vw, 2.5rem) !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        line-height: 1.18 !important;
        margin-bottom: 10px !important;
        letter-spacing: -0.02em !important;
        max-width: 600px !important;
        width: 100%;
        white-space: normal !important;
    }
    .main-banner .card-img-wrap {
        height: 180px;
    }
}

@media (max-width: 575px) {
    .main-banner .banner-slide-bg {
        position: relative;
        width: 100%;
        height: 540px;
        min-height: 540px;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        display: flex;
        align-items: flex-start;
        padding-top: 25px;
        padding-bottom: 220px;
    }
    .main-banner .banner-title {
        font-size: clamp(1.6rem, 5vw, 2.1rem) !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
        letter-spacing: -0.02em !important;
        max-width: 100% !important;
        white-space: normal !important;
    }
    .main-banner .banner-desc {
        font-size: 0.84rem !important;
        color: rgba(255, 255, 255, 0.92) !important;
        line-height: 1.5 !important;
        margin: 0 0 16px 0 !important;
        font-weight: 400 !important;
        max-width: 100% !important;
    }
    .main-banner .card-body-content {
        padding: 14px;
        gap: 10px;
    }
    .main-banner .card-icon-box {
        width: 42px;
        height: 42px;
    }
}
.sub {
    background-color: rgba(224, 138, 69, 0.15);
    color: #d97638;
    border: 1px solid rgba(224, 138, 69, 0.35);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 12px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.main-banner .banner-content .sub {
    background: rgba(255, 165, 94, 0.22);
    border: 1px solid rgba(255, 165, 94, 0.45);
    color: #ffffff;
}
.lain {
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, var(--skin-color), #c76c25);
    border-radius: 4px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}

.lain.center {
    margin-left: auto;
    margin-right: auto;
}

.lain::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #ffffff, transparent);
    animation: dividerShimmer 2.5s infinite;
}

@keyframes dividerShimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}
/* ==========================================================================
   FOOTER CTA ("Personalized Integrative Healing") RESPONSIVE SYSTEM
   ========================================================================== */
.footer-cta-section {
    margin-top: 70px;
    margin-bottom: -60px;
    position: relative;
    z-index: 5;
}

.footer-cta {
    padding: 44px 48px 64px;
    background: linear-gradient(115deg, #005550 0%, #895124 52%, #FFA55E 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 14px 40px rgba(0, 43, 40, 0.25) !important;
    border-radius: 24px !important;
    z-index: 1;
    position: relative;
    overflow: visible;
}

.footer-cta-title,
.footer-cta h4 {
    color: #FFFFFF !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
    font-family: 'Playfair Display', Georgia, serif !important;
}

.footer-cta-desc,
.footer-cta p {
    font-size: 0.95rem !important;
    color: rgba(255, 255, 255, 0.94) !important;
    line-height: 1.65 !important;
    max-width: 820px;
    margin-bottom: 0;
}

.footer-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-cta:after {
    content: "";
    position: absolute;
    right: 80px;
    top: -7px;
    width: 320px;
    height: 280px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 0 70px rgba(255, 255, 255, 0.035), 0 0 0 140px rgba(255, 255, 255, 0.02);
    z-index: -1;
    pointer-events: none;
}

.footer-icon {
    position: absolute;
    width: 120px;
    height: 120px;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.6) !important;
    border-radius: 50%;
    z-index: 99;
    background: transparent;
}

.footer-icon img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: 50%;
}

@media (max-width: 991.98px) {
    .footer-cta-section {
        margin-top: 50px !important;
        margin-bottom: -45px !important;
    }

    .footer-cta {
        padding: 34px 28px 52px !important;
        border-radius: 20px !important;
    }

    .footer-cta-title,
    .footer-cta h4 {
        font-size: 1.65rem !important;
    }

    .footer-cta:after {
        display: none;
    }

    .footer-icon {
        width: 90px !important;
        height: 90px !important;
        bottom: -45px !important;
        box-shadow: 0px 0px 22px rgba(255, 255, 255, 0.5) !important;
    }

    .footer-icon img {
        width: 90px !important;
        height: 90px !important;
    }
}

@media (max-width: 767.98px) {
    .footer-cta-section {
        margin-top: 36px !important;
        margin-bottom: -35px !important;
        padding: 0 10px !important;
    }

    .footer-cta {
        padding: 24px 18px 46px !important;
        border-radius: 18px !important;
    }

    .footer-cta-title,
    .footer-cta h4 {
        font-size: 1.35rem !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }

    .footer-cta-desc,
    .footer-cta p {
        font-size: 0.84rem !important;
        line-height: 1.55 !important;
    }

    .footer-cta-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .footer-cta-actions .btn {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 0.88rem !important;
    }

    .footer-icon {
        width: 70px !important;
        height: 70px !important;
        bottom: -35px !important;
        box-shadow: 0px 0px 18px rgba(255, 255, 255, 0.45) !important;
    }

    .footer-icon img {
        width: 70px !important;
        height: 70px !important;
    }
}
.brand-copy {
    color: #fff;
    font-size: 28px;
}
.brand-copy small {
    font-size: 14px;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #d97638;
    background: rgba(224, 138, 69, 0.12);
    border: 1px solid rgba(224, 138, 69, 0.35);
    padding: 6px 18px;
    border-radius: 12px !important;
    margin-bottom: 12px;
}
.eyebrow::before {
    display: none;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 22px;
    border-radius: 12px !important;
    font-weight: 600;
    border: 1.5px solid transparent;
    transition: all .25s ease;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none !important;
}
.btn-gold {
    background: linear-gradient(135deg, #FFA55E 0%, #E67E22 100%) !important;
    color: #fff !important;
    border-color: #FFA55E !important;
}
.btn-green {
    background: linear-gradient(135deg, #005550 0%, #003834 100%) !important;
    color: #fff !important;
    border-color: #005550 !important;
}
.btn-outline {
    border: 2px solid #005550 !important;
    color: #005550 !important;
    background: #fff !important;
}
.btn-gold:hover {
    background: linear-gradient(135deg, #005550 0%, #003834 100%) !important;
    border-color: #005550 !important;
    transform: translateY(-2px);
    color: #fff !important;
}
.btn-green:hover {
    background: linear-gradient(135deg, #FFA55E 0%, #E67E22 100%) !important;
    border-color: #FFA55E !important;
    transform: translateY(-2px);
    color: #fff !important;
}
.btn-outline:hover {
    background: linear-gradient(135deg, #005550 0%, #003834 100%) !important;
    border-color: #005550 !important;
    transform: translateY(-2px);
    color: #fff !important;
}
.booking-intro::after {
    content: '';
    border-right: 1px solid #ffa55e;
    position: absolute;
    right: 22px;
    height: 100%;
    top: 0;
}
@media (max-width: 1100px) {
    .hero-grid, .about-grid, .why-grid, .treatment-layout, .closing-grid {
        grid-template-columns: 1fr !important;
    }
}
.soft {background: #e9e9e9;}
.featured-icon-box.style17 .featured-icon img {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    box-shadow: 0 0 12px 0 rgba(75,77,117,.2);
    object-fit: cover;
}
.featured-icon-box {
    position: relative;
    margin: 15px 0 !important;
}
.featured-icon-box.style17 .featured-title h5 {
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 0;
}
.featured-icon-box.style17 .featured-desc p {
    font-size: 14px;
    line-height: 23px;
}
.bg-gold{background: var(--gold);padding: 60px 0}
.bg-gold span, .bg-gold h2, .bg-gold p{ color:#fff }
.bg-gold .eyebrow::before {
    background: #ffffff;
}

.bg-gold h3{
    color: #fff;font-size: 22px;
    line-height: 1.15;
    margin: 0 0 14px;
}
.booking-card {
    grid-column: 1/-1;
    background: #fff;
    margin-top: -55px;
    border: 1px solid #dfe8e3;
    border-radius: 12px;
    padding: 35px 18px;
    display: grid;
    grid-template-columns: 1.1fr repeat(3,1fr) auto;
    gap: 12px;
    align-items: end;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgb(0 0 0 / 27%) 0px 30px 60px -30px, rgb(10 37 64 / 8%) 0px -2px 6px 0px inset;
    margin-bottom: 90px;
}
.booking-intro{padding: 5px 30px 5px 9px;position: relative;}
.booking-intro strong{font-size:16px}
.form-field label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:#6c7872;margin:0 0 7px}
.form-field select,.form-field input{
  width:100%;border:1px solid #dce7e2;border-radius:12px;background:#fbfdfd;color:#1f2b27;
  padding:12px 13px;outline:none
}
.form-field select:focus,.form-field input:focus{border-color:#22a794;box-shadow:0 0 0 3px rgba(34,167,148,.08)}
.photo-stack{
  position:relative;
  min-height:580px;
  height: 100%;
}
.photo-main{
  position:absolute;
  inset:0 40px 10px 0;
  border-radius:28px;
  background-size:cover;
  background-position:center top;
  box-shadow:var(--shadow);
}
.photo-small{
  position:absolute;
  right:0;
  bottom:0px;
  width:240px;
  height:265px;
  border:5px solid #fff;
  border-radius:20px;
  background-size:cover;
  background-position:center;
  box-shadow:var(--shadow-sm);
  z-index: 2;
}
.stat-bubble{
  position:absolute;
  left:-12px;
  bottom:25px;
  background:var(--teal);
  color:#fff;
  padding:16px 22px;
  border-radius:12px !important;
  box-shadow:var(--shadow);
  z-index: 3;
}
.stat-bubble strong{font-size:30px;display:block}
.bullet-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 16px;margin:22px 0 24px}
.bullet{display:flex;gap:10px;font-size:15px;color:#53625b;align-items: center;}
.bullet i{color:var(--gold);margin-top:3px;font-size: 20px;}

.treatment-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:start}
.sticky-copy{position:-webkit-sticky;position:sticky;top:116px;align-self:start;z-index:2}
@media(max-width:1100px){.sticky-copy{position:static;top:auto}}
.treatment-list{display:grid;gap:12px}
.treatment-item{
  display:grid;grid-template-columns:58px 1fr auto;gap:16px;align-items:center;
  border:1px solid var(--line);border-radius:18px;background:#fff;padding:16px 17px;transition:.2s
}
.treatment-item:hover{box-shadow:var(--shadow-sm);transform:translateX(5px)}
.treatment-icon{width:58px;height:58px;border-radius:16px;background:var(--peach);display:grid;place-items:center;color: var(--gold);font-size:23px}
.treatment-item p{margin:3px 0 0;font-size:14px;color:var(--muted)}
.treatment-item .arrow{color:var(--teal);font-size:22px;transform: rotate(300deg);}
.process-step h3 {
    font-size: 22px;
    line-height: 1.15;
    margin-bottom: 0;
}
.treatment-item h3{
    font-size: 22px;
    line-height: 1.15;
    margin-bottom: 0;
}
.process-wrap{position:relative}
.process-line{position:absolute;left:10%;right:10%;top:54px;height:2px;background:linear-gradient(90deg,var(--teal),#c8dedb,var(--gold));z-index:0}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative;z-index:1}
.process-step{text-align:center;padding:0 14px}
.step-icon{width:106px;height:106px;border-radius:50%;background:#fff;border:none;box-shadow:var(--shadow-sm);display:grid;place-items:center;margin:0 auto 20px;position:relative}
.step-icon i{font-size:31px;color:var(--teal)}
.step-no{position:absolute;right:0;top:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#fff;font-size:12px;font-weight:800}
.process-step p{font-size:14px;margin-top: 10px}
.split-panels{display:grid;grid-template-columns:repeat(3,1fr);}
.big-panel{padding:34px;min-height:380px;position:relative;overflow:hidden;background-position: center !important;background-size: cover !important;}
.big-panel:first-child{background:linear-gradient(#0055507a), url('../img/img1.jpg');color:#fff}
.big-panel:last-child{background:linear-gradient(#0055507a), url('../img/img2.jpg');color:#fff}
.big-panel::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;border:1px solid rgba(255,255,255,.12);right:-70px;bottom:-70px}
.big-panel p{color: #ffffff;font-weight: 600;line-height: 20px;}
.check-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 14px;margin:20px 0 26px;font-size:13px}
.check-list span::before{content:"✓";margin-right:8px;color:#ffa55e;font-weight:900}
.big-panel h2{color: #fff;font-size: 24px;line-height: 1.3;}
.check-list span {
    background: #005550a8;
    padding: 0px 12px;
    border-radius: 5px;
}
.closing-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:34px}
.faq-list{display:grid;gap:10px}
.faq{border:1px solid var(--line);border-radius:15px;background:#fff;overflow:hidden}
.faq button{width:100%;border:0;background:#fff;padding:17px 18px;text-align:left;display:flex;justify-content:space-between;gap:15px;font-weight:800;color:var(--ink);cursor:pointer}
.faq .answer{display:none;padding:0 18px 17px;color:var(--muted);font-size:14px}
.faq.open .answer{display:block}
.faq.open button i{transform:rotate(45deg)}
.faq button i{transition:.2s}
.contact-card{background-image:linear-gradient(#00000075), url('../home/female-hands-with-tray-spa-products-green-reeds-river.webp');color:#fff;border-radius:28px;padding:30px;background-size: cover;background-position: center;}
.contact-row{display:flex;gap:14px;align-items:flex-start;margin:16px 0}
.contact-row i {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    border-radius: 8px;
    background: var(--gold);
    color: #ffffff;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 0 !important;
    margin: 2px 0 0 0;
}
.contact-row strong{display:block;font-size:16px;line-height:1.3;color:#ffffff}
.contact-row small{color:#d5e1dc;font-size: 14px;display:block;margin-top:2px;line-height:1.4;}
.newsletter{margin-top:22px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.newsletter-row{display:flex;gap:8px}
.newsletter input{flex:1;min-width:0;border:0;border-radius:11px;padding:12px 13px}

.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.info-card{
  background:#fff;border:1px solid var(--line);border-radius:15px;transition:.2s ease;position:relative;overflow:hidden
}
.info-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm);border-color:#cce3dc}
.info-card .icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--gold);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 26px;
    margin-top: -40px;
    margin-bottom: 15px;
    z-index: 1;
    position: relative;
}
.info-card h3{font-size:18px;line-height: 1.15;margin: 0 0 14px;}
.info-card p{font-size: 14px;line-height: 20px;min-height:62px}
.card-link{font-size:14px;font-weight:800;color:var(--teal)}
.card-link i{margin-left:5px}
.section-head {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: end;
    margin-bottom: 30px;
}
.info-card img {
    height: 200px;
    object-fit: cover;
    object-position: center;
    width: 100%;
}
.belo{padding:15px;}

.step-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 1px; /* ye border ki thickness hai */
    background: linear-gradient(to right, #ffa55e, #ffa55ea6, transparent);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.journey-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:18px}
 .journey-card{
   min-height:360px;border-radius:24px;overflow:hidden;position:relative;background:#21433d;color:#fff;
   box-shadow:var(--shadow-sm)
 }
 .journey-card:nth-child(1){background:linear-gradient(0deg,rgba(8,33,40,.78),rgba(8,33,40,.08)),url('../home/patient-journey.webp') center/cover}
 .journey-card:nth-child(2){background:linear-gradient(0deg,rgba(8,33,40,.78),rgba(8,33,40,.08)),url('../home/patient-journey-1.webp') center/cover}
 .journey-card:nth-child(3){background:linear-gradient(0deg,rgba(8,33,40,.78),rgba(8,33,40,.08)),url('../home/patient-journey-2.webp') center/cover}
 .journey-content{position:absolute;left:0;right:0;bottom:0;padding:24px}
 .play{width:45px;height:45px;border-radius:50%;background:#fff;color:var(--teal);display:grid;place-items:center;margin-bottom:18px}
 .journey-content p{font-size:14px;color:#e2ece8}
 .journey-content .tag{
    background: rgba(255, 165, 94, 0.85);
    color: #fff;
    padding: 6px 14px;
    border-radius: 12px !important;
    font-size: 12px;
    font-weight: 700;
 }
.notice {
    margin-top: 20px;
    padding: 14px 18px;
    border-radius: 12px !important;
    background: #fff3eb;
    border: 1px solid #f3cfba;
    font-size: 12.5px;
    color: #8a553d;
}

@media only screen and (max-width: 768px) {
    nav.main-menu .mega-menu-item.megamenu-fw > .mega-submenu {
        left: 0 !important;
        width: 100% !important;
    }
}

.mega-featured-card {
    background-size: cover;
    background-position: center;
}
.insight-grid{display:grid;grid-template-columns:1.15fr .85fr .85fr;gap:18px}
.insight-feature,.insight-stack-card{
  border-radius:24px;overflow:hidden;border:1px solid var(--line);background:#fff
}
.insight-feature .media{
  height:290px;background:url('https://images.unsplash.com/photo-1579154204601-01588f351e67?auto=format&fit=crop&w=1100&q=85') center/cover
}
.insight-content{padding:22px}
.insight-content h3{font-size:22px}
.insight-content p{font-size:14px;color:var(--muted)}
.insight-stack{display:grid;gap:18px}
.insight-stack-card{padding:20px}
.insight-stack-card .mini-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px !important;
    background: var(--gold);
    display: grid;
    place-items: center;
    color: #fff;
    margin-bottom: 18px;
    font-size: 22px;
}
.tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 12px !important;
    font-size: 12px;
    font-weight: 800;
    background: #e8f3ee;
    color: #165a5a;
}
.insight-stack-card h3 {font-size: 18px;margin-bottom: 0;}
.insight-categories,
.insight-categories-list {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 48px;
}
.insight-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 50px;
  background: #ffffff;
  border: 1px solid #e0dbd3;
  color: #123832;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
  transition: all 0.25s ease;
}
.insight-cat-pill:hover {
  background: #005550;
  color: #ffffff !important;
  border-color: #005550;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,85,80,0.22);
}
.insight-cat-pill:hover i {
  color: #FFA55E !important;
}

/* Media */
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
@media (max-width: 991px) {
  .media-grid{grid-template-columns:1fr;gap:20px}
}
.media-card{border:1px solid var(--line);border-radius:24px;background:#fff;overflow:hidden;display:flex;flex-direction:column;height:100%;transition:transform .25s ease,box-shadow .25s ease}
.media-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.08)}
.media-thumb{height:220px;position:relative;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#002b28}
.media-thumb .play{position:absolute;left:18px;bottom:18px;margin:0;width:52px;height:52px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--brand);box-shadow:0 10px 20px rgba(0,0,0,.15);text-decoration:none;transition:transform .2s ease}
.media-thumb .play:hover{transform:scale(1.08)}
.media-body{padding:22px;display:flex;flex-direction:column;flex-grow:1}
.media-body h3 {font-size: 18px;line-height: 1.35;color:var(--brand);font-weight:700;margin-bottom:10px}
.media-body p{color:var(--muted);font-size:14px;line-height:1.55;margin-bottom:16px}
.media-body .card-link{display:inline-flex;align-items:center;gap:8px;color:var(--brand);font-weight:700;font-size:14px;text-decoration:none}
.meta {
    font-size: 12px;
    color: #fff;
    margin-bottom: 8px;
    background: var(--gold);
    width: fit-content;
    padding: 3px 12px;
    border-radius: 12px !important;
}

/* ===================================================
   ABOUT MEGA MENU — SCREENSHOT EXACT MATCH
=================================================== */
.about-megamenu-content {
  padding: 30px 32px 28px !important;
}

.about-mega-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
  align-items: stretch;
}

.about-mega-col-left {
  flex: 0 0 28%;
  max-width: 28%;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.about-mega-col-center {
  flex: 0 0 44%;
  max-width: 44%;
  padding: 0 15px;
}

.about-mega-col-right {
  flex: 0 0 28%;
  max-width: 28%;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cond-mega-col-left {
  flex: 0 0 22%;
  max-width: 22%;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cond-mega-col-center {
  flex: 0 0 52%;
  max-width: 52%;
  padding: 0 15px;
}

.cond-mega-col-right {
  flex: 0 0 26%;
  max-width: 26%;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.insights-mega-col-left {
  flex: 0 0 26%;
  max-width: 26%;
  padding: 0 15px;
}

.insights-mega-col-mid {
  flex: 0 0 26%;
  max-width: 26%;
  padding: 0 15px;
}

.insights-mega-col-right {
  flex: 0 0 48%;
  max-width: 48%;
  padding: 0 15px;
}

.about-mega-heading {
    font-size: 18px;
    font-weight: 700;
    color: #252a2a !important;
    margin: 0;
    line-height: 1.25;
}

.about-mega-dash {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  margin-bottom: 22px;
}
.about-mega-dash span {
  height: 3px;
  background: var(--gold, #ffa55e);
  border-radius: 2px;
  display: inline-block;
}
.about-mega-dash span:nth-child(1) { width: 26px; }
.about-mega-dash span:nth-child(2) { width: 8px; }
.about-mega-dash span:nth-child(3) { width: 6px; }
.about-mega-dash span:nth-child(4) { width: 4px; }

.about-mega-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 22px;
}

.about-mega-link {
  display: flex;
  align-items: center;
  text-decoration: none !important;
  transition: all 0.22s ease;
  padding: 4px 0;
}
.about-mega-link:hover {
  transform: translateX(4px);
}

.about-mega-diamond,
.about-mega-icon-box {
  width: 36px;
  height: 36px;
  background: var(--gold);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 4px 14px 4px 0;
  transform: none !important;
  transition: all 0.25s ease;
  box-shadow: 0 3px 8px rgba(18, 56, 50, 0.12);
}
.about-mega-diamond i,
.about-mega-diamond svg,
.about-mega-icon-box i,
.about-mega-icon-box svg {
  font-family: 'FontAwesome' !important;
  font-style: normal;
  font-weight: normal;
  transform: none !important;
  color: #fff;
  font-size: 15px;
  transition: all 0.25s ease;
  display: inline-block;
  line-height: 1;
  text-align: center;
}
.about-mega-link:hover .about-mega-diamond,
.about-mega-link:hover .about-mega-icon-box {
  background: var(--teal);
  box-shadow: 0 5px 14px rgba(0, 85, 80, 0.28);
  transform: translateY(-2px) !important;
}
.about-mega-link:hover .about-mega-diamond i,
.about-mega-link:hover .about-mega-diamond svg,
.about-mega-link:hover .about-mega-icon-box i,
.about-mega-link:hover .about-mega-icon-box svg {
  color: #fff;
}

.about-mega-text {
    font-size: 16px;
    font-weight: 600;
    color: #1f2b27 !important;
  line-height: 1.35;
  transition: color 0.2s ease;
}
.about-mega-link:hover .about-mega-text {
  color: var(--gold, #c76c25);
}

.about-mega-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--gold);
  border-radius: 12px;
  padding: 6px 6px 6px 20px;
  text-decoration: none !important;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2px;
  transition: all 0.28s ease;
  box-shadow: 0 4px 14px rgba(18, 56, 50, 0.18);
  margin-top: auto;
}
.about-mega-btn:hover {
  background: var(--teal-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(18, 56, 50, 0.28);
}
.about-mega-btn .about-btn-arrow {
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  transition: transform 0.25s ease, background 0.25s ease;
}
.about-mega-btn .about-btn-arrow svg,
.about-mega-btn .about-btn-arrow i {
  color: #123832;
  font-size: 15px;
}
.about-mega-btn:hover .about-btn-arrow {
  transform: translateX(2px);
  background: #ffb877;
}

.about-mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.about-mega-card {
  position: relative;
  height: 124px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 16px 16px;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}
.about-mega-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 50, 40, 0.2);
}
.about-mega-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
  z-index: 1;
}
.about-mega-card:hover img {
  transform: scale(1.08);
}
.about-mega-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, rgba(18, 56, 50, 0.82) 100%);
  z-index: 2;
  transition: background 0.3s ease;
}
.about-mega-card:hover .about-mega-card-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(18, 56, 50, 0.9) 100%);
}
.about-mega-card-title {
  position: relative;
  z-index: 3;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* ===================================================
   CONDITIONS MEGA MENU — 3 VERTICAL PORTRAIT CARDS
=================================================== */
.condition-mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.condition-card-v {
  position: relative;
  height: 220px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 14px 8px;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.condition-card-v:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 50, 40, 0.2);
}

.condition-card-v img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
  z-index: 1;
}

.condition-card-v:hover img {
  transform: scale(1.08);
}

.condition-card-v-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(18, 56, 50, 0.65) 100%);
  z-index: 2;
  transition: background 0.3s ease;
}

.condition-card-v:hover .condition-card-v-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(18, 56, 50, 0.8) 100%);
}

.condition-pill-badge {
  position: relative;
  z-index: 3;
  background: #ffffff;
  color: #123832 !important;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 14px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  text-align: center;
  white-space: nowrap;
  transition: all 0.25s ease;
  overflow: hidden;
  text-overflow: ellipsis;
}

.condition-card-v:hover .condition-pill-badge {
  background: var(--gold, #ffa55e);
  color: #ffffff !important;
  transform: scale(1.04);
}

.about-mega-link.active-item {
  background: #f1f6f4;
  border-radius: 8px;
  padding-left: 6px;
}

@media (max-width: 991px) {
  .about-mega-col-left, .about-mega-col-center, .about-mega-col-right,
  .cond-mega-col-left, .cond-mega-col-center, .cond-mega-col-right,
  .insights-mega-col-left, .insights-mega-col-mid, .insights-mega-col-right {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 24px;
  }
}

@media (max-width: 767px) {
  .condition-mega-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .condition-card-v {
    height: 180px;
  }
}
  .eco-card{
    background:var(--gold);
    border-radius:18px;
    padding:20px;
  }
  .eco-card h3{
    font-weight:700;
    color:#fff;
    margin-bottom:10px;
  }
  .eco-card p{
    color:#fff;
    font-size:15px;
    margin-bottom:0;
  }
  .eco-icon{
    width:56px;height:56px;
    background:#4a3220;
    border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .eco-icon svg{ width:26px;height:26px; }

/* =========================================================================
   UNIVERSAL THEME BUTTON SYSTEM (Border Radius: 12px & Theme Colors)
   ========================================================================= */

/* 1. Global 12px Radius on ALL buttons across the entire website */
.btn,
.ttm-btn,
button.btn,
a.btn,
input[type="submit"].btn,
input[type="button"].btn,
.btn-primary-gradient,
.btn-gold,
.btn-green,
.btn-outline,
.btn-outline-teal,
.btn-outline-dark,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-light,
.btn-light-subtle,
.btn-card,
.about-mega-btn,
.header_btn a,
.btn-inline,
.rounded-pill.btn,
.btn.rounded-pill,
.btn-sm,
.btn-lg {
  border-radius: 12px !important;
}

.btn.rounded-circle,
.btn-circle,
.btn-icon-circle {
  border-radius: 50% !important;
}

/* 2. Base Button Standard */
.btn {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 0.95rem;
  line-height: 1.4;
}

/* 3. Primary Gradient / Solid Teal Theme Button */
.btn-primary,
.btn-primary-gradient,
.btn-green,
.btn-brand-primary {
  background: linear-gradient(135deg, #005550 0%, #003834 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #005550 !important;
  box-shadow: 0 4px 14px rgba(0, 85, 80, 0.22);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary-gradient:hover,
.btn-primary-gradient:focus,
.btn-primary-gradient:active,
.btn-green:hover,
.btn-brand-primary:hover {
  background: linear-gradient(135deg, #FFA55E 0%, #E67E22 100%) !important;
  color: #ffffff !important;
  border-color: #FFA55E !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(255, 165, 94, 0.4);
}

.btn-primary-gradient i,
.btn-primary-gradient svg,
.btn-primary i,
.btn-primary svg {
  color: #ffffff !important;
  font-size: 1.05em;
  margin-right: 4px;
}

/* 4. Warm Gold / Peach Accent Button */
.btn-gold,
.btn-accent,
.ttm-btn-color-skincolor,
.btn-warning {
  background: linear-gradient(135deg, #FFA55E 0%, #E67E22 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #FFA55E !important;
  box-shadow: 0 4px 14px rgba(255, 165, 94, 0.25);
}

.btn-gold:hover,
.btn-gold:focus,
.btn-gold:active,
.btn-accent:hover,
.ttm-btn-color-skincolor:hover,
.btn-warning:hover {
  background: linear-gradient(135deg, #005550 0%, #003834 100%) !important;
  color: #ffffff !important;
  border-color: #005550 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 85, 80, 0.35);
}

/* 5. Theme Outline Teal Button */
.btn-outline,
.btn-outline-teal,
.btn-outline-dark,
.btn-outline-primary,
.btn-outline-secondary {
  background-color: #ffffff !important;
  color: #005550 !important;
  border: 2px solid #005550 !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 85, 80, 0.08);
}

.btn-outline:hover,
.btn-outline-teal:hover,
.btn-outline-dark:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  background: linear-gradient(135deg, #005550 0%, #003834 100%) !important;
  color: #ffffff !important;
  border-color: #005550 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 85, 80, 0.3);
}

/* 6. Theme Outline Gold Button */
.btn-outline-gold,
.btn-outline-warning {
  background-color: #ffffff !important;
  color: #E67E22 !important;
  border: 2px solid #FFA55E !important;
  font-weight: 600;
}

.btn-outline-gold:hover,
.btn-outline-warning:hover {
  background: linear-gradient(135deg, #FFA55E 0%, #E67E22 100%) !important;
  color: #ffffff !important;
  border-color: #FFA55E !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 165, 94, 0.35);
}

/* 7. Theme Light Button */
.btn-light,
.btn-light-subtle {
  background: #FAF8F5 !important;
  color: #005550 !important;
  border: 1.5px solid #E2DBD2 !important;
  font-weight: 600;
}

.btn-light:hover,
.btn-light:focus,
.btn-light-subtle:hover {
  background: #005550 !important;
  color: #ffffff !important;
  border-color: #005550 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 85, 80, 0.25);
}

/* 8. Success / Social Buttons */
.btn-outline-success {
  background-color: #ffffff !important;
  color: #198754 !important;
  border: 1.5px solid #198754 !important;
}

.btn-outline-success:hover {
  background: #198754 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* 9. TTM Button System Consistency */
.ttm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: 12px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor {
  background: linear-gradient(135deg, #FFA55E 0%, #E67E22 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #FFA55E !important;
  border-radius: 12px !important;
}

.ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor:hover {
  background: linear-gradient(135deg, #005550 0%, #003834 100%) !important;
  color: #ffffff !important;
  border-color: #005550 !important;
}

.ttm-btn.ttm-btn-style-border.ttm-btn-color-white {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 12px !important;
}

.ttm-btn.ttm-btn-style-border.ttm-btn-color-white:hover {
  background: #FFA55E !important;
  color: #123832 !important;
  border-color: #FFA55E !important;
  box-shadow: 0 4px 14px rgba(255, 165, 94, 0.38) !important;
}

/* ==========================================================================
   Header Login & User Account Dropdown System
   ========================================================================== */
.header-login-btn {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 7.5px 16px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  transition: all 0.22s ease !important;
  line-height: 1.2 !important;
}

.header-login-btn:hover,
.header-login-btn:focus {
  background: #FFA55E !important;
  border-color: #FFA55E !important;
  color: #123832 !important;
  box-shadow: 0 4px 14px rgba(255, 165, 94, 0.4) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

.header-login-btn:hover i,
.header-login-btn:focus i {
  color: #123832 !important;
}

.header-user-dropdown {
  position: relative !important;
  display: inline-block !important;
}

.header-user-btn {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.32) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 7px 14px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
  line-height: 1.2 !important;
}

.header-user-btn:hover,
.header-user-btn:focus,
.header-user-btn.show {
  background: #FFA55E !important;
  border-color: #FFA55E !important;
  color: #123832 !important;
  box-shadow: 0 4px 14px rgba(255, 165, 94, 0.35) !important;
}

.header-user-btn:hover i,
.header-user-btn:focus i,
.header-user-btn.show i {
  color: #123832 !important;
}

.header-user-btn.show i.fa-angle-down {
  transform: rotate(180deg) !important;
}

.header-admin-btn {
  background: rgba(217, 119, 6, 0.2) !important;
  border-color: rgba(217, 119, 6, 0.45) !important;
}

.header-user-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  min-width: 235px !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  border: 1px solid rgba(0, 85, 80, 0.12) !important;
  box-shadow: 0 12px 36px rgba(0, 30, 26, 0.22) !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  z-index: 999999 !important;
  display: none !important;
  animation: fadeInDown 0.2s ease forwards;
}

.header-user-dropdown-menu.show {
  display: block !important;
}

.header-user-dropdown-menu .dropdown-item {
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #2D3748 !important;
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
}

.header-user-dropdown-menu .dropdown-item:hover {
  background-color: rgba(0, 85, 80, 0.08) !important;
  color: #005550 !important;
  padding-left: 22px !important;
}

.header-user-dropdown-menu .dropdown-item.text-danger:hover {
  background-color: rgba(220, 53, 69, 0.08) !important;
  color: #dc3545 !important;
}

.header-user-dropdown-menu hr.dropdown-divider {
  margin: 4px 0 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Fractional Spacing & Bootstrap Utility Extensions */
.m-1\.5, .m-1-5 { margin: 0.375rem !important; }
.m-2\.5, .m-2-5 { margin: 0.625rem !important; }
.m-3\.5, .m-3-5 { margin: 0.875rem !important; }
.m-4\.5, .m-4-5 { margin: 1.25rem !important; }

.mt-1\.5, .mt-1-5 { margin-top: 0.375rem !important; }
.mt-2\.5, .mt-2-5 { margin-top: 0.625rem !important; }
.mt-3\.5, .mt-3-5 { margin-top: 0.875rem !important; }
.mt-4\.5, .mt-4-5 { margin-top: 1.25rem !important; }

.mb-1\.5, .mb-1-5 { margin-bottom: 0.375rem !important; }
.mb-2\.5, .mb-2-5 { margin-bottom: 0.625rem !important; }
.mb-3\.5, .mb-3-5 { margin-bottom: 0.875rem !important; }
.mb-4\.5, .mb-4-5 { margin-bottom: 1.25rem !important; }

.my-1\.5, .my-1-5 { margin-top: 0.375rem !important; margin-bottom: 0.375rem !important; }
.my-2\.5, .my-2-5 { margin-top: 0.625rem !important; margin-bottom: 0.625rem !important; }
.my-3\.5, .my-3-5 { margin-top: 0.875rem !important; margin-bottom: 0.875rem !important; }

.mx-1\.5, .mx-1-5 { margin-left: 0.375rem !important; margin-right: 0.375rem !important; }
.mx-2\.5, .mx-2-5 { margin-left: 0.625rem !important; margin-right: 0.625rem !important; }
.mx-3\.5, .mx-3-5 { margin-left: 0.875rem !important; margin-right: 0.875rem !important; }

.me-1\.5, .me-1-5 { margin-right: 0.375rem !important; }
.me-2\.5, .me-2-5 { margin-right: 0.625rem !important; }
.ms-1\.5, .ms-1-5 { margin-left: 0.375rem !important; }
.ms-2\.5, .ms-2-5 { margin-left: 0.625rem !important; }

.p-1\.5, .p-1-5 { padding: 0.375rem !important; }
.p-2\.5, .p-2-5 { padding: 0.625rem !important; }
.p-3\.5, .p-3-5 { padding: 0.875rem !important; }
.p-4\.5, .p-4-5 { padding: 1.25rem !important; }

.pt-1\.5, .pt-1-5 { padding-top: 0.375rem !important; }
.pt-2\.5, .pt-2-5 { padding-top: 0.625rem !important; }
.pt-3\.5, .pt-3-5 { padding-top: 0.875rem !important; }

.pb-1\.5, .pb-1-5 { padding-bottom: 0.375rem !important; }
.pb-2\.5, .pb-2-5 { padding-bottom: 0.625rem !important; }
.pb-3\.5, .pb-3-5 { padding-bottom: 0.875rem !important; }

.pe-1\.5, .pe-1-5 { padding-right: 0.375rem !important; }
.pe-2\.5, .pe-2-5 { padding-right: 0.625rem !important; }
.ps-1\.5, .ps-1-5 { padding-left: 0.375rem !important; }
.ps-2\.5, .ps-2-5 { padding-left: 0.625rem !important; }

.py-1\.5, .py-1-5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
.py-2\.5, .py-2-5 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
.py-3\.5, .py-3-5 { padding-top: 0.875rem !important; padding-bottom: 0.875rem !important; }

.px-1\.5, .px-1-5 { padding-left: 0.375rem !important; padding-right: 0.375rem !important; }
.px-2\.5, .px-2-5 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
.px-3\.5, .px-3-5 { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }

.gap-1\.5, .gap-1-5 { gap: 0.375rem !important; }
.gap-2\.5, .gap-2-5 { gap: 0.625rem !important; }
.gap-3\.5, .gap-3-5 { gap: 0.875rem !important; }
.gap-4\.5, .gap-4-5 { gap: 1.25rem !important; }

/* Global Button Stacking & Margin Protection */
.btn-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.btn-group-responsive {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Global Icon & Text Spacing Fixes - Prevents any icon sticking/overlapping */
i.bi, i.fa, i[class*="bi-"], i[class*="fa-"], [class^="bi-"], [class^="fa-"] {
  display: inline-block;
  line-height: 1;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

.share-publication-label,
.share-bar-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.share-bar-label i,
.share-publication-label i {
  font-size: 1.1rem;
  margin-right: 6px;
}

/* ==========================================================================
   Universal Badge & Breadcrumb Pill Padding System
   ========================================================================== */
.breadcrumb-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  padding: 8px 22px !important;
  border-radius: 9999px !important;
  background: rgba(0, 43, 40, 0.68) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 165, 94, 0.35) !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
  max-width: 96% !important;
}

.breadcrumb-wrapper > span {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

.breadcrumb-wrapper .ttm-bread-sep {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 4px !important;
  font-size: 0.85em !important;
  opacity: 0.85 !important;
}

/* Universal Badge Spacing & Padding */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0.35rem 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  box-sizing: border-box;
}

.badge.rounded-pill,
.rounded-pill.badge,
[class*="badge"][class*="rounded-pill"] {
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
}

.badge-sm, .badge.badge-sm, .sidebar-badge, .sidebar-category-pill {
  padding: 2px 8px !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.badge-hero, .badge-lg, .badge.badge-lg {
  padding: 0.5rem 1.2rem !important;
  font-size: 0.85rem !important;
}

.badge i, .badge svg {
  display: inline-block;
  vertical-align: middle;
  margin-right: 2px;
}

/* Sidebar Clinical Items */
.sidebar-item-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  background-color: #FFFFFF !important;
  border: 1px solid #EAE5DF !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  margin-bottom: 8px !important;
  transition: all 0.2s ease !important;
}

.sidebar-item-row:last-child {
  margin-bottom: 0 !important;
}

.sidebar-item-row:hover {
  background-color: #F8FAF9 !important;
  border-color: rgba(0, 85, 80, 0.3) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.sidebar-thumb-box {
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  background-color: #F5F1EB !important;
  border: 1px solid #EAE5DF !important;
}

.sidebar-thumb-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.sidebar-item-content {
  flex-grow: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.sidebar-item-title {
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #1A202C !important;
  margin: 0 0 3px 0 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sidebar-item-arrow {
  color: #9CA3AF !important;
  font-size: 0.85rem !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}

.sidebar-item-row:hover .sidebar-item-arrow {
  color: #005550 !important;
  transform: translateX(2px);
}

/* ==========================================================================
   Header & Sticky Navigation Z-Index Integrity System
   ========================================================================== */
#masthead,
.header,
.header.ttm-header-style-01,
.site-header-menu,
.site-header-menu-inner,
.ttm-stickable-header,
.ttm-stickable-header.fixed-header,
.fixed-header {
  z-index: 1050 !important;
  position: relative;
}

.ttm-stickable-header.fixed-header,
.fixed-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1050 !important;
  background-color: #005550 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

@media (max-width: 1199.98px) {
  #site-header-menu .container-fluid {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .site-header-menu-inner,
  .site-header-menu-inner.ttm-stickable-header,
  .site-header-menu-inner.ttm-stickable-header.fixed-header {
    background-color: #005550 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    transition: all 0.25s ease-in-out !important;
  }

  .site-navigation {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 56px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-nav-left {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-branding {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
  }

  .site-branding img,
  .site-branding img#logo-img,
  .site-header-menu-inner.ttm-stickable-header.fixed-header .site-branding img,
  .site-header-menu-inner.ttm-stickable-header.fixed-header #logo-img {
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }

  .site-branding-text .site-brand-title,
  .site-branding p {
    font-size: 1.22rem !important;
    margin-bottom: 1px !important;
  }

  .site-branding-text .site-brand-sub,
  .site-branding small {
    font-size: 10.5px !important;
  }

  .btn-show-menu-mobile,
  .site-header-menu-inner.ttm-stickable-header.fixed-header .btn-show-menu-mobile {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    position: relative !important;
    right: 0 !important;
  }
}

@media (max-width: 380px) {
  #site-header-menu .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .site-branding img,
  .site-branding img#logo-img {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }

  .site-branding-text .site-brand-title,
  .site-branding p {
    font-size: 1.1rem !important;
  }

  .site-branding-text .site-brand-sub,
  .site-branding small {
    font-size: 9.5px !important;
  }
}

/* Ensure Sticky Sidebars never overlap header and remain responsive */
.sticky-top,
.sticky-copy {
  z-index: 10 !important;
}

@media (max-width: 991.98px) {
  .sticky-top,
  .sticky-copy {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }
}

/* ==========================================================================
   BUTTON HOVER & ACTIVE COLOR PRESERVATION RULE
   Ensure buttons do not change background-color or text color on hover or click
   ========================================================================== */

/* 1. Primary Gradient & Orange / Gold Buttons */
.btn-primary-gradient,
.btn-primary-gradient:hover,
.btn-primary-gradient:active,
.btn-primary-gradient:focus,
.btn-primary-gradient:focus-visible,
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-gold,
.btn-gold:hover,
.btn-gold:active,
.btn-gold:focus,
.btn-gold:focus-visible,
.dtl-btn,
.dtl-btn:hover,
.dtl-btn:active,
.dtl-btn:focus,
.btn-choose,
.btn-choose:hover,
.btn-choose:active,
.btn-choose:focus,
.ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor,
.ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor:hover,
.ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor:active,
.ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor:focus {
  background: #FF8F49 !important;
  background-color: #FF8F49 !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 2. Deep Teal & Dark Buttons */
.btn-dark,
.btn-dark:hover,
.btn-dark:active,
.btn-dark:focus,
.btn-dark:focus-visible,
.btn-trust-cta,
.btn-trust-cta:hover,
.btn-trust-cta:active,
.btn-trust-cta:focus,
.learn-more-btn,
.learn-more-btn:hover,
.learn-more-btn:active,
.learn-more-btn:focus {
  background: #005550 !important;
  background-color: #005550 !important;
  color: #FFFFFF !important;
  border-color: #005550 !important;
  box-shadow: none !important;
}

/* 3. Outline Teal Buttons */
.btn-outline-teal,
.btn-outline-teal:hover,
.btn-outline-teal:active,
.btn-outline-teal:focus,
.btn-outline-teal:focus-visible,
.btn-outline-dark,
.btn-outline-dark:hover,
.btn-outline-dark:active,
.btn-outline-dark:focus,
.btn-outline-dark:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  color: #005550 !important;
  border: 1.5px solid #005550 !important;
  box-shadow: none !important;
}

/* 4. Outline Light & Border Buttons */
.btn-outline-light,
.btn-outline-light:hover,
.btn-outline-light:active,
.btn-outline-light:focus,
.btn-outline-light:focus-visible,
.ttm-btn.ttm-btn-style-border.ttm-btn-color-white,
.ttm-btn.ttm-btn-style-border.ttm-btn-color-white:hover,
.ttm-btn.ttm-btn-style-border.ttm-btn-color-white:active,
.ttm-btn.ttm-btn-style-border.ttm-btn-color-white:focus {
  background: transparent !important;
  background-color: transparent !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: none !important;
}

/* 5. Light Buttons */
.btn-light,
.btn-light:hover,
.btn-light:active,
.btn-light:focus,
.btn-light:focus-visible {
  background: #F8F9FA !important;
  background-color: #F8F9FA !important;
  color: #495057 !important;
  border-color: #DEE2E6 !important;
  box-shadow: none !important;
}

/* 6. General Button Stability */
.btn:hover,
.btn:active,
.btn:focus,
.btn:focus-visible,
button:hover,
button:active,
button:focus,
.ttm-btn:hover,
.ttm-btn:active,
.ttm-btn:focus,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:active,
input[type="button"]:focus {
  transition: none !important;
}

/* ==========================================================================
   CLINICAL PAGES TYPOGRAPHY, SPACING & PADDING SYSTEM
   ========================================================================== */
.clinical-body-content {
  color: #374151 !important;
  font-size: 0.98rem !important;
  line-height: 1.78 !important;
}

.clinical-body-content p {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  line-height: 1.78 !important;
}

.clinical-body-content p:last-child {
  margin-bottom: 0 !important;
}

.clinical-body-content ul,
.clinical-body-content ol {
  margin-top: 0.5rem !important;
  margin-bottom: 1rem !important;
  padding-left: 1.5rem !important;
}

.clinical-body-content ul:last-child,
.clinical-body-content ol:last-child {
  margin-bottom: 0 !important;
}

.clinical-body-content li {
  margin-bottom: 0.55rem !important;
  line-height: 1.68 !important;
}

.clinical-body-content li:last-child {
  margin-bottom: 0 !important;
}

.clinical-body-content h4,
.clinical-body-content h5 {
  color: #005550 !important;
  margin-top: 1.25rem !important;
  margin-bottom: 0.65rem !important;
  font-weight: 700 !important;
}

/* Card & Section Spacing Polish */
.treatment-section-card {
  padding: 24px 28px !important;
  border-radius: 14px !important;
  background-color: #FFFFFF;
  border: 1px solid #EAE5DF !important;
  margin-bottom: 24px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

@media (max-width: 767.98px) {
  .treatment-section-card {
    padding: 18px 18px !important;
    margin-bottom: 18px !important;
  }
}

.treatment-sticky-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 90px;
  z-index: 9;
}

@media (max-width: 991.98px) {
  .treatment-sticky-sidebar {
    position: static !important;
    top: auto !important;
  }
}

.hover-shadow {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.hover-shadow:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 85, 80, 0.3) !important;
}

/* ==========================================================================
   CARE & BOOKING JOURNEY (RESTORED TIMELINE WITH ENLARGED IMAGE CIRCLES)
   ========================================================================== */
.cbj-wrap {
    background:
      radial-gradient(ellipse 60% 50% at 12% 8%, rgba(224,138,69,0.08), transparent 60%),
      radial-gradient(ellipse 55% 45% at 90% 90%, rgba(76,125,104,0.10), transparent 60%),
      #fbf7ef;
    padding: 70px 0;
    position: relative;
    overflow: hidden;
    color: #5c6660;
}

.cbj-leaf {
    position: absolute;
    opacity: 0.06;
    pointer-events: none;
}
.cbj-leaf svg { width: 100%; height: 100%; }
.cbj-leaf.leaf-1 { top: -60px; left: -80px; width: 320px; height: 320px; transform: rotate(-18deg); }
.cbj-leaf.leaf-2 { bottom: -90px; right: -70px; width: 380px; height: 380px; transform: rotate(200deg); }

.cbj-eyebrow,
.section-eyebrow-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    margin-bottom: 12px !important;
}

.cbj-title {
    font-weight: 700;
    color: #123832;
    font-size: clamp(28px, 3.4vw, 40px);
    letter-spacing: -0.01em;
    margin-top: 8px;
    line-height: 1.22;
}

.cbj-sub {
    color: #5c6660;
    font-size: 15.5px;
    max-width: 650px;
    margin: 14px auto 0;
    line-height: 1.65;
}

.cbj-timeline {
    position: relative;
    margin-top: 65px;
}

.cbj-track {
    position: absolute;
    top: 82px;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 0;
}
.cbj-track svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cbj-track path {
    fill: none;
    stroke: url(#cbjGradient);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    transition: stroke-dashoffset 1.6s cubic-bezier(.22,.9,.3,1);
}
.cbj-timeline.in-view .cbj-track path { stroke-dashoffset: 0; }

.cbj-step {
    position: relative;
    z-index: 1;
    text-align: center;
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,.9,.3,1);
}
.cbj-timeline.in-view .cbj-step { opacity: 1; transform: translateY(0); }
.cbj-timeline.in-view .cbj-step:nth-child(1) { transition-delay: .05s; }
.cbj-timeline.in-view .cbj-step:nth-child(2) { transition-delay: .22s; }
.cbj-timeline.in-view .cbj-step:nth-child(3) { transition-delay: .39s; }
.cbj-timeline.in-view .cbj-step:nth-child(4) { transition-delay: .56s; }

/* ENLARGED CIRCLE MEDALLION (165px) WITH IMAGES */
.cbj-medallion {
    position: relative;
    width: 165px;
    height: 165px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px -10px rgba(18,56,50,0.25), 0 4px 10px rgba(18,56,50,0.06);
    border: 3px solid #e4dccb;
    transition: box-shadow .45s ease, border-color .45s ease, transform .45s ease;
    animation: cbjFloat 4.2s ease-in-out infinite;
}

.cbj-timeline .row > div:nth-child(1) .cbj-medallion { animation-delay: 0s; }
.cbj-timeline .row > div:nth-child(2) .cbj-medallion { animation-delay: .35s; }
.cbj-timeline .row > div:nth-child(3) .cbj-medallion { animation-delay: .7s; }
.cbj-timeline .row > div:nth-child(4) .cbj-medallion { animation-delay: 1.05s; }

.cbj-medallion::after {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 2px dashed rgba(224,138,69,0.45);
    opacity: .6;
    animation: cbjSpin 14s linear infinite;
    pointer-events: none;
}

.cbj-medallion .cbj-circle-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    display: block;
    border: 4px solid #ffffff;
    transition: transform .45s cubic-bezier(.22,.9,.3,1);
}

.cbj-step:hover .cbj-medallion {
    border-color: var(--gold);
    box-shadow: 0 22px 36px -12px rgba(224,138,69,0.4), 0 6px 14px rgba(18,56,50,0.1);
    transform: translateY(-4px);
}
.cbj-step:hover .cbj-medallion::after {
    opacity: 1;
    border-color: var(--gold);
}
.cbj-step:hover .cbj-medallion .cbj-circle-img {
    transform: scale(1.08);
}

.cbj-num {
    position: absolute;
    top: -4px;
    right: 2px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--gold), #d97638);
    color: #ffffff;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px -3px rgba(224,138,69,0.6);
    border: 2.5px solid #fbf7ef;
    z-index: 5;
    transition: transform .45s cubic-bezier(.22,.9,.3,1);
}
.cbj-step:hover .cbj-num { transform: scale(1.15) rotate(-8deg); }

/* Bottom Icon Badge (Supports Image Icon from public/home) */
.cbj-bottom-icon {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(18, 56, 50, 0.22);
    border: 2px solid #e4dccb;
    z-index: 6;
    transition: transform .35s cubic-bezier(.22,.9,.3,1), border-color .35s ease, box-shadow .35s ease;
    overflow: hidden;
    padding: 7px;
}
.cbj-bottom-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.cbj-bottom-icon i {
    font-size: 16px;
    color: #1c4f45;
}
.cbj-step:hover .cbj-bottom-icon {
    border-color: var(--gold);
    transform: translateX(-50%) scale(1.15);
    box-shadow: 0 6px 18px rgba(224, 138, 69, 0.4);
}

.cbj-step h4 {
    font-weight: 700;
    color: #123832;
    font-size: 18px;
    line-height: 1.3;
    margin-bottom: 8px;
    padding: 0 4px;
}
.cbj-step p {
    font-size: 14px;
    color: #5c6660;
    line-height: 1.55;
    max-width: 240px;
    margin: 0 auto;
}

@media (max-width: 767.98px) {
    .cbj-track { display: none; }
    .cbj-timeline .row { row-gap: 30px; }
    .cbj-step { padding-bottom: 20px; }
}

/* ==========================================================================
   INSIGHTS HUB IMAGE-ORIENTED CARDS WITH DARK OVERLAY
   ========================================================================== */
.insight-grid-v2 {
    display: grid;
    grid-template-columns: 1.15fr 0.9fr 0.9fr;
    gap: 20px;
}

.insight-image-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    text-decoration: none !important;
}

.insight-image-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(0, 50, 45, 0.22);
}

.insight-image-card .insight-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 38, 34, 0.42) 0%, rgba(10, 28, 25, 0.88) 60%, rgba(8, 22, 20, 0.96) 100%);
    transition: background 0.35s ease;
}

.insight-image-card:hover .insight-overlay {
    background: linear-gradient(180deg, rgba(14, 38, 34, 0.3) 0%, rgba(0, 65, 60, 0.88) 60%, rgba(0, 45, 42, 0.96) 100%);
}

.insight-image-card.featured-card {
    min-height: 440px;
    padding: 32px 28px;
}

.insight-image-card.standard-card {
    min-height: 210px;
    padding: 22px;
}

.insight-card-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.insight-top-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.insight-mini-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--gold);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.insight-tag {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.insight-image-card h3 {
    color: #ffffff;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 8px 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.insight-image-card.featured-card h3 {
    font-size: 24px;
}

.insight-image-card.standard-card h3 {
    font-size: 17px;
}

.insight-image-card p {
    color: rgba(255, 255, 255, 0.88);
    font-size: 13.5px;
    line-height: 1.45;
    margin: 0 0 14px 0;
}

.insight-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gold) !important;
    font-weight: 700;
    font-size: 13.5px;
    transition: all 0.25s ease;
    text-decoration: none !important;
    margin-top: auto;
}

.insight-link-btn i {
    transition: transform 0.25s ease;
}

.insight-image-card:hover .insight-link-btn {
    color: #ffbe88 !important;
}

.insight-image-card:hover .insight-link-btn i {
    transform: translateX(4px);
}

.insight-categories-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 26px;
}

.insight-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 12px !important;
    font-size: 12.5px;
    font-weight: 600;
    background: #ffffff;
    border: 1.5px solid #dce7e2;
    color: #123832;
    transition: all 0.22s ease;
    text-decoration: none !important;
}

.insight-cat-pill:hover {
    background: #005550;
    border-color: #005550;
    color: #ffffff !important;
    transform: translateY(-2px);
}

@media (max-width: 991px) {
    .insight-grid-v2 {
        grid-template-columns: 1fr;
    }
    .insight-image-card.featured-card {
        min-height: 320px;
    }
}

/* ==========================================================================
   OUTSTATION & PROFESSIONALS SOLID #005550 2-COLUMN SECTION
   ========================================================================== */
.section-outstation-dark {
    background-color: #005550;
    padding: 70px 0;
    position: relative;
}

.outstation-card-v2 {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 38px 34px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.outstation-card-v2:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 165, 94, 0.4);
    background: rgba(255, 255, 255, 0.08);
}

.outstation-card-v2 .sub {
    background-color: rgba(255, 165, 94, 0.22);
    color: #ffa55e;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 165, 94, 0.45);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.outstation-card-v2 h2 {
    color: #ffffff;
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 700;
    line-height: 1.3;
    margin-top: 14px;
    margin-bottom: 12px;
}

.outstation-card-v2 p {
    color: rgba(255, 255, 255, 0.88);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.check-list-grid-v2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 14px;
    margin-bottom: 28px;
}

.check-list-grid-v2 span {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 12px !important;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.check-list-grid-v2 span::before {
    content: "✓";
    margin-right: 8px;
    color: #ffa55e;
    font-weight: 900;
}

@media (max-width: 767px) {
    .check-list-grid-v2 {
        grid-template-columns: 1fr;
    }
    .outstation-card-v2 {
        padding: 26px 20px;
    }
}

/* ==========================================================================
   BLOG CARDS CLEAN DESIGN & RATIO
   ========================================================================== */
.blog-card-v3 {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e8e3d9;
    background: #ffffff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card-v3:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 85, 80, 0.12);
}

.blog-card-v3 .blog-thumb-wrap {
    height: 220px;
    position: relative;
    overflow: hidden;
}

.blog-card-v3 .blog-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card-v3:hover .blog-thumb-wrap img {
    transform: scale(1.06);
}

.blog-date-badge-clean {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: #005550;
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 12px !important;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.blog-card-v3 .blog-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.blog-card-v3 .blog-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: #123832;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 48px;
}

.blog-card-v3 .blog-title a {
    color: #123832;
    text-decoration: none;
    transition: color 0.25s ease;
}

.blog-card-v3 .blog-title a:hover {
    color: var(--gold);
}

.blog-card-v3 .blog-excerpt {
    font-size: 13.5px;
    color: #5c6660;
    line-height: 1.55;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 60px;
}

.blog-card-v3 .blog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid #f0ebe1;
    font-size: 12.5px;
    color: #7b8882;
}

.blog-cat-badge {
    background: #eef6f3;
    color: #005550;
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 12px !important;
}

/* ==========================================================================
   BOOK-STYLE TESTIMONIALS SECTION (ABOVE FOOTER - LUXURY REALISTIC DESIGN)
   ========================================================================== */
.book-testimonials-section {
    background: radial-gradient(ellipse at 50% 30%, #153c35 0%, #0c231f 70%, #081714 100%);
    padding: 95px 0 140px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    color: #ffffff;
}

.book-testimonials-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: 0 0, 16px 16px;
    pointer-events: none;
}

.book-header {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    z-index: 2;
}

.book-header .eyebrow {
    color: var(--gold);
    background: rgba(255, 165, 94, 0.15);
    padding: 6px 18px;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 165, 94, 0.35);
}

.book-header h2 {
    color: #ffffff;
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* 3D Open Hardcover Book Container */
.open-book-container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
    perspective: 1200px;
}

.open-book {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fdfaf3;
    border-radius: 18px;
    box-shadow: 
        0 35px 80px rgba(0, 0, 0, 0.65),
        0 12px 32px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.8),
        0 0 0 10px #0e2721,
        0 0 0 13px #c79a5b,
        0 0 0 16px #0b1f1a;
    position: relative;
    overflow: hidden;
    min-height: 500px;
}

/* Luxury Bookmark Ribbon */
.open-book::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 75px;
    background: linear-gradient(180deg, #d97638 0%, #FFA55E 70%, #d97638 100%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
    z-index: 15;
}

/* Center Book Spine Crease, Stitches & Gradient Depth */
.open-book::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 44px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, 
        rgba(0, 0, 0, 0.22) 0%, 
        rgba(0, 0, 0, 0.05) 35%, 
        rgba(0, 0, 0, 0.3) 50%, 
        rgba(0, 0, 0, 0.05) 65%, 
        rgba(0, 0, 0, 0.22) 100%
    );
    z-index: 10;
    pointer-events: none;
}

/* Left Page - Video Testimonial */
.book-left-page {
    padding: 42px 46px 38px 50px;
    background: linear-gradient(135deg, #fffdf8 0%, #f4eee2 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
}

.book-page-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #b55d1c;
    background: rgba(224, 138, 69, 0.12);
    border: 1px solid rgba(224, 138, 69, 0.3);
    padding: 4px 12px;
    border-radius: 12px !important;
    margin-bottom: 14px;
    width: fit-content;
}

.book-video-wrap {
    position: relative;
    width: 100%;
    height: 260px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
    border: 3px solid #ffffff;
    background: #000000;
}

.book-video-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.book-video-wrap:hover img {
    transform: scale(1.05);
}

.book-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFA55E 0%, #e06d1b 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 0 0 8px rgba(255, 165, 94, 0.38), 0 8px 24px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    padding-left: 4px;
}

.book-video-wrap:hover .book-video-play {
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: 0 0 0 16px rgba(255, 165, 94, 0.45), 0 10px 30px rgba(0,0,0,0.4);
}

.book-video-caption {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.book-video-caption h5 {
    font-size: 15.5px;
    font-weight: 700;
    color: #123832;
    margin: 0;
}

.book-video-caption span {
    font-size: 12.5px;
    color: #697872;
    font-weight: 500;
}

/* High Contrast Watch Button */
.book-watch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #005550;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 12px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 85, 80, 0.25);
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.book-watch-btn:hover {
    background: var(--gold);
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(224, 138, 69, 0.4);
}

/* Right Page - Message / Written Testimonial */
.book-right-page {
    padding: 42px 50px 38px 46px;
    background: linear-gradient(225deg, #fffdf8 0%, #f4eee2 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.book-stars {
    color: #e67e22;
    font-size: 20px;
    letter-spacing: 3px;
}

.book-quote-icon {
    font-size: 38px;
    color: rgba(199, 108, 37, 0.28);
    line-height: 1;
    margin-bottom: 6px;
}

.book-quote-text {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 16.5px;
    line-height: 1.8;
    color: #1f3630;
    font-style: italic;
    font-weight: 400;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
}

.book-author-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 18px;
    border-top: 1px dashed rgba(18, 56, 50, 0.2);
}

.book-author-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1c4f45 0%, #123832 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 2px solid #c79a5b;
}

.book-author-info h4 {
    font-size: 17px;
    font-weight: 700;
    color: #123832;
    margin: 0 0 3px 0;
}

.book-author-info p {
    font-size: 13px;
    color: #5c6660;
    margin: 0;
}

.book-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: #1c4f45;
    background: rgba(28, 79, 69, 0.09);
    padding: 4px 10px;
    border-radius: 12px !important;
    margin-top: 6px;
}

/* Book Controls & Slider Navigation (border-radius: 12px) */
.book-slider-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

.book-nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.1);
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4px);
}

.book-nav-btn:hover {
    background: linear-gradient(135deg, #FFA55E 0%, #e67e22 100%);
    border-color: transparent;
    color: #ffffff;
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 8px 24px rgba(230, 126, 34, 0.5);
}

@media (max-width: 991px) {
    .open-book {
        grid-template-columns: 1fr;
    }
    .open-book::before,
    .open-book::after {
        display: none;
    }
    .book-left-page {
        border-right: none;
        border-bottom: 1px dashed rgba(0,0,0,0.15);
        padding: 32px 24px;
    }
    .book-right-page {
        padding: 32px 24px;
    }
}

/* ==========================================================================
   GLOBAL HOME PAGE UNIFIED SECTION STYLING & TYPOGRAPHY RATIO SYSTEM
   ========================================================================== */

/* Universal Eyebrow Badge Pill (border-radius: 12px) */
.section-eyebrow-pill,
.cbj-eyebrow,
.dtl-eyebrow,
.book-header .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #d97638;
    background: rgba(224, 138, 69, 0.12);
    border: 1px solid rgba(224, 138, 69, 0.35);
    padding: 6px 18px;
    border-radius: 12px !important;
    margin-bottom: 12px;
}

.section-eyebrow-pill i,
.cbj-eyebrow i,
.dtl-eyebrow i {
    font-size: 14px;
    color: inherit;
}

/* Light / Translucent Eyebrow Pill on Dark & Gold Backgrounds */
.ttm-bgcolor-darkgrey .section-eyebrow-pill,
.section-outstation-dark .section-eyebrow-pill,
.dtl-navy-panel .section-eyebrow-pill,
.dtl-navy-panel .dtl-eyebrow,
.book-testimonials-section .section-eyebrow-pill,
.book-header .eyebrow,
.bg-gold .section-eyebrow-pill,
.contact-card .section-eyebrow-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    margin-bottom: 12px !important;
}

/* Standardized Section Titles (h2) Across Entire Home Page */
.section-title .title,
.section-title h2,
.section-title2,
.dtl-title,
.cbj-title,
.book-header h2,
.section-head h2,
.treatment-layout .sticky-copy h2,
.closing-grid h2,
.soft h2,
.blog-section .section-title .title {
    font-size: clamp(28px, 3.2vw, 38px) !important;
    font-weight: 700 !important;
    line-height: 1.22 !important;
    color: #123832;
    margin-top: 6px;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

/* White Section Titles for Dark / Navy / Teal Backgrounds */
.ttm-bgcolor-darkgrey .section-title .title,
.dtl-navy-panel .dtl-title,
.book-header h2,
.section-outstation-dark h2,
.contact-card h2,
.bg-gold h2 {
    color: #ffffff !important;
}

/* Standardized Section Lead / Subtitle Descriptions */
.section-sub,
.section-title .title-desc p,
.section-head .copy p,
.lead,
.muted,
.cbj-sub,
.dtl-desc,
.treatment-layout .sticky-copy .lead,
.treatment-layout .sticky-copy .muted {
    font-size: 15.5px !important;
    line-height: 1.65 !important;
    color: #5c6660;
    font-weight: 400;
}

.ttm-bgcolor-darkgrey .title-desc p,
.dtl-desc,
.book-header p,
.section-outstation-dark p,
.bg-gold p,
.contact-card p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Standardized Card Titles (h3 / h4) */
.cardTitle,
.info-card h3,
.treatment-item h3,
.blog-card-v3 .blog-title,
.media-body h3,
.insight-image-card h3,
.cbj-step h4,
.dtl-stat h5,
.journey-card h3 {
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* Standardized Card Body Text */
.card-desc,
.info-card p,
.treatment-item p,
.blog-excerpt,
.media-body p,
.insight-image-card p,
.cbj-step p,
.dtl-stat p,
.journey-card p {
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* Standardized 12px Border Radius for All Badges, Chips, and Buttons */
.chip,
.badge,
.tag,
.meta,
.btn,
.dtl-btn,
.btn-gold,
.btn-green,
.btn-outline,
.btn-choose,
.btn-verify,
.insight-cat-pill,
.insight-tag,
.blog-cat-badge,
.blog-date-badge-clean,
.book-page-tag,
.book-verified-badge,
.book-watch-btn,
.check-list-grid-v2 span,
.stat-bubble,
.contact-row i,
.banner-nav-card {
    border-radius: 12px !important;
}

/* ==========================================================================
   DHI AMRUTAM THEME: GLOBAL PAGINATION SYSTEM
   Harmonized with Emerald Forest Green (#005550), Warm Amber/Gold (#FFA55E)
   ========================================================================== */
.dhi-pagination-nav {
    margin-top: 30px !important;
    margin-bottom: 20px !important;
    padding-top: 10px !important;
    width: 100% !important;
}

.pagination {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 15px auto !important;
    list-style: none !important;
}

.pagination .page-item {
    margin: 0 !important;
}

.pagination .page-item .page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
    font-family: 'Plus Jakarta Sans', 'Jost', -apple-system, sans-serif !important;
    font-size: 0.90rem !important;
    font-weight: 600 !important;
    color: #1D3534 !important;
    background-color: #FFFFFF !important;
    border: 1.5px solid #E5DFD7 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 6px rgba(0, 85, 80, 0.04) !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
    user-select: none !important;
}

.pagination .page-item:not(.active):not(.disabled) .page-link:hover {
    color: #005550 !important;
    background-color: #FFF9F3 !important;
    border-color: #FFA55E !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(255, 165, 94, 0.22) !important;
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #005550 0%, #003834 100%) !important;
    border-color: #005550 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 14px rgba(0, 85, 80, 0.3) !important;
    cursor: default !important;
}

.pagination .page-item.disabled .page-link {
    background-color: #F8F6F2 !important;
    border-color: #EFEAE5 !important;
    color: #B5AEA7 !important;
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

@media (max-width: 575.98px) {
    .pagination {
        gap: 5px !important;
        flex-wrap: wrap !important;
    }
    .pagination .page-item .page-link {
        min-width: 34px !important;
        height: 34px !important;
        padding: 0 10px !important;
        font-size: 0.82rem !important;
        border-radius: 8px !important;
    }
}

/* ==========================================================================
   DHI AMRUTAM THEME: PATIENT CARE HUB DESIGN SYSTEM
   ========================================================================== */
.patient-care-sidebar-card {
    background: #FFFFFF !important;
    border: 1px solid #EFEAE5 !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 32px rgba(0, 85, 80, 0.04) !important;
}

.patient-care-nav-link {
    padding: 11px 15px !important;
    border-radius: 12px !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    color: #2D3E3C !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.22s ease !important;
    border: 1px solid transparent !important;
    background: transparent;
}

.patient-care-nav-link:hover {
    background: #F4F8F7 !important;
    color: #005550 !important;
    border-color: #D3E8E4 !important;
    transform: translateX(3px) !important;
}

.patient-care-nav-link.active {
    background: linear-gradient(135deg, #005550 0%, #003834 100%) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border-color: #005550 !important;
    box-shadow: 0 4px 14px rgba(0, 85, 80, 0.22) !important;
    transform: none !important;
}

.patient-care-nav-link .nav-icon {
    color: #005550;
    font-size: 1rem;
    width: 22px;
    transition: color 0.2s ease;
}

.patient-care-nav-link.active .nav-icon {
    color: #FFA55E !important;
}

.patient-care-nav-link .nav-arrow {
    color: #A0B0AD;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.patient-care-nav-link:hover .nav-arrow {
    color: #005550;
    transform: translateX(2px);
}

.patient-care-nav-link.active .nav-arrow {
    color: #FFA55E !important;
    opacity: 1 !important;
}

.patient-care-help-box {
    background: linear-gradient(135deg, #FFF9F3 0%, #FAF0E6 100%) !important;
    border: 1px solid #F3DFCC !important;
    border-radius: 14px !important;
    padding: 16px !important;
}

.patient-care-feature-card {
    background: #FFFFFF !important;
    border: 1px solid #EFEAE5 !important;
    border-radius: 16px !important;
    padding: 24px !important;
    transition: all 0.28s ease !important;
    height: 100%;
}

.patient-care-feature-card:hover {
    transform: translateY(-4px) !important;
    border-color: #FFA55E !important;
    box-shadow: 0 12px 30px rgba(0, 85, 80, 0.08) !important;
}

.patient-care-timeline-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px;
    border-radius: 14px;
    border: 1px solid #EFEAE5;
    background: #FFFFFF;
    transition: all 0.22s ease;
}

.patient-care-timeline-step:hover {
    border-color: #005550;
    box-shadow: 0 4px 16px rgba(0, 85, 80, 0.05);
}

.patient-care-step-num {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #005550 0%, #003834 100%);
    color: #FFA55E;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(0, 85, 80, 0.2);
}

.patient-care-badge-theme {
    background: rgba(0, 85, 80, 0.09) !important;
    color: #005550 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    display: inline-block;
}

.patient-care-badge-amber {
    background: rgba(255, 165, 94, 0.18) !important;
    color: #B55B0A !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    display: inline-block;
}

.patient-care-badge-teal {
    background: rgba(34, 167, 148, 0.14) !important;
    color: #126357 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    display: inline-block;
}

.patient-care-faq-item {
    border: 1px solid #EFEAE5 !important;
    border-radius: 14px !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
}

.patient-care-faq-item:hover {
    border-color: #CBDDD9 !important;
}

.patient-care-faq-item.open {
    border-color: #005550 !important;
    box-shadow: 0 4px 16px rgba(0, 85, 80, 0.06) !important;
}

.patient-care-faq-btn {
    width: 100%;
    text-align: left;
    padding: 18px 20px;
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #005550;
    font-size: 1.02rem;
    transition: color 0.2s ease;
    cursor: pointer;
}

.patient-care-faq-btn:hover {
    color: #FFA55E;
}

.patient-care-faq-item.open .patient-care-faq-btn {
    color: #005550;
}

.patient-care-faq-answer {
    padding: 0 20px 20px 20px;
    color: #556664;
    line-height: 1.75;
    font-size: 0.94rem;
}

/* Emerald & Clinical Color Helpers */
.text-emerald {
    color: #005550 !important;
}

.text-emerald-emphasis {
    color: #003834 !important;
}

.bg-emerald {
    background-color: #005550 !important;
    color: #FFFFFF !important;
}

.bg-emerald-subtle {
    background-color: #E8F4F2 !important;
}

.border-emerald-subtle {
    border-color: #B8DDD7 !important;
}

.badge.text-emerald,
.badge.bg-white.text-emerald {
    color: #005550 !important;
}

/* ==========================================================================
   DHI AMRUTAM TOPBAR, HEADER & NAVIGATION (60PX GAP & POLISHED)
   ========================================================================== */
/* Site Top Header Bar */
.site-topbar {
    background-color: #004440 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 7px 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    position: relative;
    z-index: 100;
}

.site-topbar .topbar-inner {
    min-height: 26px;
}

.topbar-tagline {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    letter-spacing: 0.2px;
}

.topbar-contact-item {
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.topbar-contact-item:hover {
    color: #FFA55E !important;
}

.topbar-sep {
    color: rgba(255, 255, 255, 0.3);
    font-size: 11px;
}

#site-header-menu,
.site-header-menu.ttm-bgcolor-darkgrey,
#site-header-menu .site-header-menu-inner,
.site-header-menu-inner {
    background-color: #005550 !important; /* Theme Emerald Green #005550 */
}

.site-navigation {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    min-height: 72px !important;
}

/* Group Logo and Navigation Menu on the Left with 60px Gap */
.site-nav-left {
    display: flex !important;
    align-items: center !important;
    gap: 60px !important;
}

/* ==========================================================================
   Site Branding / Logo (Round Emblem + 2-Line Vertically Stacked Text)
   ========================================================================== */
.site-branding {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    left: auto !important;
}

.site-branding .home-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    padding: 2px 0 !important;
}

.site-branding img#logo-img,
.site-branding img.logo-img,
.site-branding img {
    display: block !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    left: auto !important;
    margin: 0 !important;
    transform: none !important;
}

.site-branding-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-branding-text .site-brand-title,
.site-branding p {
    display: block !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 1.32rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    line-height: 1.15 !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    letter-spacing: -0.01em !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.site-branding-text .site-brand-sub,
.site-branding small {
    display: block !important;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    letter-spacing: 0.25px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

/* Header Navigation Menu List & Links */
nav.main-menu {
    flex-shrink: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

nav.main-menu ul.menu {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
    list-style: none !important;
}

#site-header-menu .site-navigation ul.menu > li > a {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    padding: 24px 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transition: color 0.2s ease !important;
}

#site-header-menu .site-navigation ul.menu > li.active > a,
#site-header-menu .site-navigation ul.menu > li:hover > a {
    color: #FFA55E !important;
}

/* Subtle dropdown down-arrow */
nav.main-menu ul.menu > li.mega-menu-item > a.mega-menu-link:after {
    font-size: 9.5px !important;
    margin-left: 3px !important;
}

@media (min-width: 1400px) {
    #site-header-menu .site-navigation ul.menu > li > a {
        padding: 24px 16px !important;
        font-size: 13px !important;
    }
}

@media (min-width: 1600px) {
    #site-header-menu .site-navigation ul.menu > li > a {
        padding: 26px 18px !important;
        font-size: 13.5px !important;
    }
}

/* Header Right Actions */
.header_extra {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    margin-left: 10px !important;
    gap: 7px !important;
}

.header-login-btn,
.header-user-btn {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 7px 15px !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   FLOATING VERTICAL "BOOK AN APPOINTMENT" CTA (RIGHT CENTER)
   ========================================================================== */
.floating-appointment-wrapper {
    position: fixed;
    right: 0 !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    pointer-events: auto;
}

.floating-appointment-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #FFA55E 0%, #E08A45 100%);
    color: #123832 !important;
    text-decoration: none !important;
    padding: 9px 8px;
    border-radius: 0px !important;
    box-shadow: -2px 3px 14px rgba(0, 0, 0, 0.22);
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.3px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-right: none;
}

.floating-appointment-btn .floating-btn-icon {
    font-size: 13px;
    transform: rotate(90deg);
    display: inline-block;
    color: #123832;
    transition: transform 0.25s ease;
}

.floating-appointment-btn:hover {
    background: linear-gradient(135deg, #FFB677 0%, #FFA55E 100%);
    box-shadow: -4px 5px 18px rgba(224, 138, 69, 0.5);
    transform: rotate(180deg) translateX(2px);
    color: #0b2420 !important;
}

.floating-appointment-btn:hover .floating-btn-icon {
    transform: rotate(90deg) scale(1.15);
}

/* ==========================================================================
   BANNER VERTICAL SLIDE NUMBER NAVIGATION (01, 02, 03, 04)
   ========================================================================== */
.banner-vertical-nav {
    position: absolute;
    right: 68px;
    top: 20%;
    transform: translateY(-50%);
    z-index: 15;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.banner-vertical-nav .v-nav-num {
    width: 32px;
    height: 27px;
    border-radius: 5px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(20, 20, 20, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    outline: none;
    padding: 0;
}

.banner-vertical-nav .v-nav-num:hover:not(.active) {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff;
    transform: translateX(-2px);
}

.banner-vertical-nav .v-nav-num.active {
    background: #ffffff !important;
    color: #4a1525 !important; /* Rich contrast tone matching screenshot reference */
    border-color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28) !important;
    transform: scale(1.05);
    font-weight: 800;
}

@media (max-width: 991px) {
    .site-nav-left {
        gap: 20px !important;
    }
    .banner-vertical-nav {
        right: 48px;
        top: 18%;
        gap: 5px;
    }
    .banner-vertical-nav .v-nav-num {
        width: 28px;
        height: 24px;
        font-size: 10.5px;
        border-radius: 4px;
    }
}

@media (max-width: 767px) {
    .site-topbar .topbar-tagline {
        font-size: 11px;
    }
    .site-topbar .topbar-contact-item {
        font-size: 11px;
    }
    .banner-vertical-nav {
        right: 38px;
        top: 18%;
        gap: 4px;
    }
    .banner-vertical-nav .v-nav-num {
        width: 25px;
        height: 21px;
        font-size: 10px;
        border-radius: 4px;
    }
    .floating-appointment-btn {
        padding: 8px 6px;
        font-size: 11px;
    }
}

/* ==========================================================================
   GLOBAL BREADCRUMB BANNER & PAGE TITLE CONTRAST & LEGIBILITY ENGINE
   Ensures 100% crisp visibility on ALL images (white, photographic, or dark)
   ========================================================================== */
.ttm-page-title-row {
    position: relative !important;
    background-position: center center !important;
    background-size: cover !important;
    overflow: hidden !important;
    color: #FFFFFF !important;
    z-index: 1 !important;
}

.ttm-page-title-row::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0, 28, 25, 0.38) 0%, rgba(0, 16, 14, 0.52) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.ttm-page-title-row > .container,
.ttm-page-title-row > .container-fluid,
.ttm-page-title-row .container,
.ttm-page-title-row .ttm-page-title-row-inner,
.ttm-page-title-row * {
    position: relative;
    z-index: 2;
}

/* Breadcrumb Wrapper Styling */
.ttm-page-title-row .breadcrumb-wrapper {
    background: rgba(0, 30, 25, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 50px !important;
    padding: 8px 24px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ttm-page-title-row .breadcrumb-wrapper span,
.ttm-page-title-row .breadcrumb-wrapper a {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

.ttm-page-title-row .breadcrumb-wrapper a {
    color: #FFA55E !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.ttm-page-title-row .breadcrumb-wrapper a:hover {
    color: #FFC599 !important;
    text-decoration: underline !important;
}

.ttm-page-title-row .breadcrumb-wrapper .ttm-bread-sep {
    color: rgba(255, 165, 94, 0.85) !important;
    margin: 0 8px !important;
}

.ttm-page-title-row .breadcrumb-wrapper span:last-child {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

/* Page Title Headings */
.ttm-page-title-row h1,
.ttm-page-title-row h2,
.ttm-page-title-row .page-title-heading h2 {
    color: #FFFFFF !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9), 0 4px 25px rgba(0, 0, 0, 0.7) !important;
    font-family: 'Playfair Display', Georgia, serif !important;
}

/* Highlight text */
.ttm-page-title-row h1 span,
.ttm-page-title-row .highlight,
.ttm-page-title-row .skincolor {
    color: #FFA55E !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
}

/* Paragraphs & Descriptions */
.ttm-page-title-row p,
.ttm-page-title-row .lead {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85), 0 2px 16px rgba(0, 0, 0, 0.65) !important;
    font-weight: 400 !important;
}

/* Category Badges */
.ttm-page-title-row .badge,
.ttm-page-title-row .category-badge {
    background: rgba(0, 30, 25, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 165, 94, 0.5) !important;
    color: #FFA55E !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35) !important;
    text-shadow: none !important;
}

@media only screen and (max-width: 991px) {
    .topbar-left, .floating-appointment-wrapper, .banner-boxes-wrapper {display: none !important;}
    .section-eyebrow-pill, .cbj-eyebrow, .dtl-eyebrow, .book-header .eyebrow {font-size: 10px;padding: 2px 10px;}
    .main-banner .banner-content {padding-left: 0;}
    .banner-vertical-nav {left: 13px;top: 94% !important;flex-direction: row !important;}
    .banner-buttons {flex-direction: column;align-items: start !important;}
    .main-banner .banner-slide-bg {height: 420px;min-height: 420px;padding-top: 5px;}
    form.booking-card, .card-grid, .journey-grid {grid-template-columns: 1fr;}
    .banner-buttons a.ttm-btn {padding: 5px 13px !important;}
    .booking-intro::after {border-bottom: 1px solid #ffa55e;right: 0;border-right: 0;height: 100%;width: 100%;top: 3px;}
    .booking-intro {padding: 5px 5px 5px 9px;text-align: center;}
    .section-head {flex-direction: column;align-items: center;gap: 5px;}
    .dtl-media img {margin-top: 50px;}
    .first-footer.ttm-bg.ttm-bgimage-yes.ttm-bgcolor-darkgrey.widget-footer.bg-layer-equal-height {padding-top: 105px;}
    .brand-copy {display: flex;flex-direction: column;gap: 10px;}
    .photo-stack {margin-top: -70px;}
    nav.main-menu ul.menu {align-items: start !important;flex-direction: column;}
    #site-header-menu .site-navigation ul.menu > li > a {padding: 12px 13px !important;color: #000000 !important;}
    .about-megamenu-content {padding: 10px !important;}
    .mega-submenu.megamenu-content.about-megamenu-content, .mega-submenu.megamenu-content {display: none;}
    li.mega-menu-item.megamenu-fw {width: -webkit-fill-available;}
    .mega-menu-item .mega-menu-link.active + .mega-submenu, .mega-menu-item:has(.mega-menu-link.active) .mega-submenu {display: block;}
    .mega-menu-header {flex-direction: column;}
    .treat-mega-row {flex-direction: column !important;padding: 0 10px;}
    nav.main-menu.show,
    nav.main-menu.menu-mobile.show {
        height: auto !important;
        max-height: calc(100vh - 75px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 0 0 16px 16px !important;
        box-shadow: 0 14px 36px rgba(0, 43, 40, 0.28) !important;
    }
    .mega-submenu {height: 345px;overflow: hidden;overflow-y: scroll;}
    body:has(.main-menu.menu-mobile.show.open) {overflow-y: auto;}
}

/* ==========================================================================
   UNIVERSAL MOBILE RESPONSIVE ENGINE FOR ALL INNER PAGES
   (Fluid layouts, zero horizontal overflow, touch target scaling & typography)
   ========================================================================== */

/* 1. Global Viewport & Container Safeguards */
html, body {
  overflow-x: clip !important;
  max-width: 100vw !important;
}

.page, #page, .site-main, .ttm-row, main, section {
  overflow-x: clip;
  max-width: 100%;
}

img, video, iframe, embed, object, svg {
  max-width: 100%;
  height: auto;
}

/* 2. Responsive Clinical & Rich Content Typography */
.clinical-body-content,
.rich-content,
.editorial-article-body,
.policy-content,
.customer-story-prose,
.download-prose {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
}

.clinical-body-content img,
.rich-content img,
.editorial-article-body img,
.policy-content img,
.customer-story-prose img,
.download-prose img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 12px;
  display: block;
}

.clinical-body-content table,
.rich-content table,
.editorial-article-body table,
.policy-content table,
.customer-story-prose table,
.table-responsive table {
  display: block;
  width: 100% !important;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.25rem;
}

/* 3. Tablet & Mobile Responsive Breakpoints (< 992px) */
@media (max-width: 991.98px) {
  /* Treatment & Condition Details Sidebar Stacking */
  .treatment-sticky-sidebar,
  .sticky-top,
  .sticky-copy,
  .d-flex.flex-column.gap-4.sticky-top {
    position: static !important;
    top: auto !important;
    z-index: 1 !important;
    margin-top: 24px !important;
  }

  /* Breadcrumb Hero Banner Spacing */
  .ttm-page-title-row {
    padding: 55px 0 45px 0 !important;
  }

  /* Key Metric Grids in Case Studies & Insights */
  .narrative-block {
    padding: 22px 18px !important;
    border-radius: 16px !important;
  }

  .treatment-section-card {
    padding: 22px 18px !important;
    border-radius: 16px !important;
    margin-bottom: 20px !important;
  }
}

/* 4. Mobile Screen Optimization (< 768px) */
@media (max-width: 767.98px) {
  /* Heading Scaling */
  h1, .h1, .ttm-page-title-row h1 {
    font-size: clamp(1.65rem, 6vw, 2.35rem) !important;
    line-height: 1.25 !important;
    overflow-wrap: break-word;
  }

  h2, .h2, .section-title h2.title {
    font-size: clamp(1.4rem, 5vw, 1.95rem) !important;
    line-height: 1.3 !important;
    overflow-wrap: break-word;
  }

  h3, .h3 {
    font-size: clamp(1.2rem, 4.2vw, 1.55rem) !important;
    line-height: 1.35 !important;
  }

  /* Breadcrumb Pill Wrap & Padding */
  .breadcrumb-wrapper {
    padding: 6px 14px !important;
    font-size: 0.78rem !important;
    gap: 4px !important;
    border-radius: 20px !important;
    max-width: 100%;
  }

  .breadcrumb-wrapper > span {
    white-space: normal !important;
    font-size: 0.78rem !important;
  }

  .breadcrumb-wrapper .ttm-bread-sep {
    margin: 0 4px !important;
  }

  /* Touch Target Safeguards */
  .btn,
  .ttm-btn,
  button.btn,
  a.btn,
  .about-subnav-link,
  .patient-care-nav-link {
    min-height: 44px;
    padding: 8px 18px;
  }

  /* iOS Auto-Zoom Prevention */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="search"],
  select,
  textarea,
  .form-control,
  .form-select {
    font-size: 16px !important;
  }

  /* Social Sharing Bars */
  .social-sharing-bar,
  .d-flex:has(a[href*="whatsapp.com"]) {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Card padding on mobile */
  .card, .booking-feature-box, .auth-form-card {
    border-radius: 14px !important;
  }

  /* Modals on mobile */
  .story-modal-dialog,
  .video-modal-dialog {
    max-width: 95vw !important;
    padding: 20px 16px !important;
    margin: 10px auto !important;
    border-radius: 16px !important;
  }

  .story-modal-close {
    top: 10px !important;
    right: 14px !important;
  }

  .video-modal-close {
    top: -38px !important;
    right: 4px !important;
    font-size: 28px !important;
  }

  /* Video Aspect Ratios */
  .video-modal-iframe-wrap {
    padding-top: 56.25% !important;
  }
}

/* 5. Small Mobile Screens (< 576px) */
@media (max-width: 575.98px) {
  /* Buttons in forms full width */
  form button[type="submit"]:not(.btn-sm),
  form input[type="submit"]:not(.btn-sm) {
    width: 100% !important;
  }

  /* Form padding */
  .p-4.p-md-5,
  .p-5 {
    padding: 20px 16px !important;
  }

  /* Section padding */
  .py-5 {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  /* Filter bars */
  .input-group {
    flex-wrap: nowrap !important;
  }

  /* Step badges */
  .step-badge {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   FOOTER SOCIAL ICONS & SCROLL-TO-TOP STYLING (12PX BORDER RADIUS, 10PX PADDING, BOX GAP)
   ========================================================================== */
.footer .social-icons ul.list-inline,
.first-footer .social-icons ul.list-inline,
.widget-text .social-icons ul.list-inline {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 16px 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.footer .social-icons li,
.first-footer .social-icons li,
.widget-text .social-icons li {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  line-height: normal !important;
  box-shadow: none !important;
}

.footer .social-icons li a,
.first-footer .social-icons li a,
.social-icons.social-hover li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 10px !important;
  border-radius: 12px !important;
  background: #FFA55E !important;
  background-color: #FFA55E !important;
  color: #FFFFFF !important;
  font-size: 18px !important;
  line-height: 1 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease !important;
  text-decoration: none !important;
  border: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.footer .social-icons li a i,
.first-footer .social-icons li a i,
.social-icons.social-hover li a i {
  color: #FFFFFF !important;
  font-size: 18px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.footer .social-icons li a:hover,
.first-footer .social-icons li a:hover,
.social-icons.social-hover li a:hover {
  background: #E08A45 !important;
  background-color: #E08A45 !important;
  color: #FFFFFF !important;
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 6px 16px rgba(255, 165, 94, 0.45) !important;
}

/* ==========================================================================
   FOOTER BOTTOM LEGAL LINKS (SINGLE UNBROKEN ROW ON ALL SCREENS)
   ========================================================================== */
.footer-legal-links {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.footer-legal-links li {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.footer-legal-links li:after {
  display: none !important;
  content: none !important;
}

.footer-legal-links li a {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  white-space: nowrap !important;
}

.footer-legal-links li a:hover {
  color: #FFA55E !important;
}

.footer-legal-sep {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 12px !important;
  user-select: none !important;
  padding: 0 2px !important;
}

.footer-copy-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

/* Scroll-To-Top Button (#totop) Refinement */
#totop {
  position: fixed !important;
  right: 24px !important;
  bottom: 28px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  background: #FFA55E !important;
  background-color: #FFA55E !important;
  color: #FFFFFF !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 44px !important;
  font-size: 20px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22) !important;
  z-index: 998 !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

#totop.top-visible {
  display: inline-flex !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  animation: none !important;
}

#totop:hover {
  background: #E08A45 !important;
  background-color: #E08A45 !important;
  color: #FFFFFF !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(255, 165, 94, 0.5) !important;
}

#totop i {
  color: #FFFFFF !important;
  font-size: 20px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

@media (max-width: 767.98px) {
  .footer .social-icons ul.list-inline,
  .first-footer .social-icons ul.list-inline,
  .widget-text .social-icons ul.list-inline {
    gap: 10px !important;
    justify-content: flex-start !important;
  }

  .footer .social-icons li a,
  .first-footer .social-icons li a {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
  }

  .footer-copy-text {
    font-size: 12px !important;
    text-align: center !important;
  }

  .footer-legal-links {
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .footer-legal-links li a {
    font-size: 11.5px !important;
    white-space: nowrap !important;
  }

  .footer-legal-sep {
    font-size: 10px !important;
  }

  #totop {
    right: 14px !important;
    bottom: 20px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
    line-height: 38px !important;
    font-size: 17px !important;
  }

  #totop.top-visible {
    border-radius: 12px !important;
  }
}

@media (max-width: 400px) {
  .footer-legal-links {
    gap: 5px !important;
  }

  .footer-legal-links li a {
    font-size: 10.5px !important;
  }

  .footer-legal-sep {
    font-size: 9px !important;
    padding: 0 1px !important;
  }
}

/* ==========================================================================
   MOBILE AUTH & USER ACCOUNT NAVIGATION DRAWER STYLING
   ========================================================================== */
@media (min-width: 1200px) {
  .mobile-auth-menu-item {
    display: none !important;
  }
}

@media (max-width: 1199.98px) {
  nav.main-menu,
  nav.main-menu.menu-mobile,
  nav.main-menu.show,
  nav.main-menu.menu-mobile.show {
    height: auto !important;
    max-height: calc(100vh - 75px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 14px 36px rgba(0, 43, 40, 0.28) !important;
    padding-bottom: 12px !important;
  }

  .mobile-auth-menu-item {
    width: 100% !important;
    margin-top: 12px !important;
    margin-bottom: 4px !important;
    border-top: 1px solid rgba(0, 85, 80, 0.12) !important;
    padding-top: 14px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    list-style: none !important;
    display: block !important;
  }

  .mobile-auth-wrapper {
    width: 100% !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
  }

  /* Guest Box */
  .mobile-guest-box {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .mobile-login-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 48px !important;
    background: linear-gradient(135deg, #005550 0%, #003632 100%) !important;
    color: #ffffff !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(0, 85, 80, 0.28) !important;
    transition: all 0.25s ease !important;
  }

  .mobile-login-btn span {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-transform: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .mobile-login-btn i {
    font-size: 18px !important;
    color: #FFA55E !important;
    transition: color 0.25s ease !important;
  }

  .mobile-login-btn:hover,
  .mobile-login-btn:active {
    background: #FFA55E !important;
    color: #123832 !important;
    box-shadow: 0 4px 16px rgba(255, 165, 94, 0.4) !important;
  }

  .mobile-login-btn:hover span,
  .mobile-login-btn:active span,
  .mobile-login-btn:hover i,
  .mobile-login-btn:active i {
    color: #123832 !important;
  }

  /* Logged-In User Card */
  #site-header-menu .site-navigation .mobile-user-card,
  nav.main-menu .mobile-user-card,
  .mobile-user-card {
    background: #ffffff !important;
    border: 1.5px solid #d4e3e0 !important;
    border-radius: 14px !important;
    padding: 16px 14px !important;
    box-shadow: 0 4px 18px rgba(0, 85, 80, 0.08) !important;
  }

  #site-header-menu .site-navigation .mobile-user-card.mobile-admin-card,
  nav.main-menu .mobile-user-card.mobile-admin-card,
  .mobile-user-card.mobile-admin-card {
    border-color: rgba(192, 57, 43, 0.25) !important;
  }

  .mobile-user-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #005550, #003632) !important;
    color: #FFA55E !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 85, 80, 0.2) !important;
  }

  .mobile-user-avatar i {
    color: #FFA55E !important;
    font-size: 22px !important;
  }

  .mobile-user-avatar.admin-avatar {
    background: linear-gradient(135deg, #2c3e50, #1a252f) !important;
    color: #FFA55E !important;
  }

  .mobile-user-info {
    flex: 1 !important;
    min-width: 0 !important;
  }

  #site-header-menu .site-navigation .mobile-user-name,
  nav.main-menu .mobile-user-name,
  .mobile-user-name {
    display: block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #123832 !important;
    margin-bottom: 3px !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-transform: none !important;
  }

  #site-header-menu .site-navigation .mobile-user-badge,
  nav.main-menu .mobile-user-badge,
  .mobile-user-badge {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #005550 !important;
    background: #e6f3f2 !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0, 85, 80, 0.18) !important;
    text-transform: none !important;
  }

  #site-header-menu .site-navigation .mobile-user-badge i,
  nav.main-menu .mobile-user-badge i,
  .mobile-user-badge i {
    color: #005550 !important;
  }

  #site-header-menu .site-navigation .mobile-user-badge.admin-badge,
  nav.main-menu .mobile-user-badge.admin-badge,
  .mobile-user-badge.admin-badge {
    color: #c0392b !important;
    background: #fdf2f2 !important;
    border-color: rgba(192, 57, 43, 0.18) !important;
  }

  #site-header-menu .site-navigation .mobile-user-badge.admin-badge i,
  nav.main-menu .mobile-user-badge.admin-badge i,
  .mobile-user-badge.admin-badge i {
    color: #c0392b !important;
  }

  .mobile-user-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 14px !important;
    border-top: 1px solid rgba(0, 85, 80, 0.1) !important;
    padding-top: 12px !important;
  }

  #site-header-menu .site-navigation ul.menu li .mobile-user-link,
  nav.main-menu ul.menu li .mobile-user-link,
  .mobile-user-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 11px 14px !important;
    border-radius: 10px !important;
    background: #f4f8f7 !important;
    border: 1px solid #dce8e6 !important;
    color: #123832 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  }

  #site-header-menu .site-navigation ul.menu li .mobile-user-link span,
  nav.main-menu ul.menu li .mobile-user-link span,
  .mobile-user-link span {
    color: #123832 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  #site-header-menu .site-navigation ul.menu li .mobile-user-link span:before,
  nav.main-menu ul.menu li .mobile-user-link span:before,
  .mobile-user-link span:before {
    display: none !important;
    content: none !important;
  }

  #site-header-menu .site-navigation ul.menu li .mobile-user-link i.fa,
  nav.main-menu ul.menu li .mobile-user-link i.fa,
  .mobile-user-link i.fa {
    font-size: 15px !important;
    width: 20px !important;
    text-align: center !important;
    display: inline-block !important;
    opacity: 1 !important;
  }

  .mobile-user-link i.fa-tachometer { color: #005550 !important; }
  .mobile-user-link i.fa-calendar-check-o,
  .mobile-user-link i.fa-calendar { color: #0284c7 !important; }
  .mobile-user-link i.fa-plus-circle { color: #16a34a !important; }
  .mobile-user-link i.fa-user-o { color: #d97706 !important; }
  .mobile-user-link i.fa-medkit { color: #8b5cf6 !important; }

  #site-header-menu .site-navigation ul.menu li .mobile-user-link i.fa-angle-right,
  nav.main-menu ul.menu li .mobile-user-link i.fa-angle-right,
  .mobile-user-link i.fa-angle-right {
    font-size: 15px !important;
    color: #8fa3a0 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    width: auto !important;
  }

  #site-header-menu .site-navigation ul.menu li .mobile-user-link:hover,
  #site-header-menu .site-navigation ul.menu li .mobile-user-link:active,
  nav.main-menu ul.menu li .mobile-user-link:hover,
  nav.main-menu ul.menu li .mobile-user-link:active,
  .mobile-user-link:hover,
  .mobile-user-link:active {
    background: #005550 !important;
    color: #ffffff !important;
    border-color: #005550 !important;
  }

  #site-header-menu .site-navigation ul.menu li .mobile-user-link:hover span,
  #site-header-menu .site-navigation ul.menu li .mobile-user-link:active span,
  nav.main-menu ul.menu li .mobile-user-link:hover span,
  nav.main-menu ul.menu li .mobile-user-link:active span,
  .mobile-user-link:hover span,
  .mobile-user-link:active span {
    color: #ffffff !important;
  }

  #site-header-menu .site-navigation ul.menu li .mobile-user-link:hover i.fa,
  #site-header-menu .site-navigation ul.menu li .mobile-user-link:active i.fa,
  nav.main-menu ul.menu li .mobile-user-link:hover i.fa,
  nav.main-menu ul.menu li .mobile-user-link:active i.fa,
  .mobile-user-link:hover i.fa,
  .mobile-user-link:active i.fa {
    color: #ffffff !important;
  }

  /* Logout Button */
  #site-header-menu .site-navigation .mobile-logout-btn,
  nav.main-menu .mobile-logout-btn,
  .mobile-logout-btn {
    width: 100% !important;
    min-height: 44px !important;
    padding: 11px 16px !important;
    border: 1.5px solid #fecaca !important;
    background: #fef2f2 !important;
    color: #dc2626 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-transform: none !important;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.08) !important;
  }

  #site-header-menu .site-navigation .mobile-logout-btn span,
  nav.main-menu .mobile-logout-btn span,
  .mobile-logout-btn span {
    color: #dc2626 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #site-header-menu .site-navigation .mobile-logout-btn i.fa,
  nav.main-menu .mobile-logout-btn i.fa,
  .mobile-logout-btn i.fa {
    color: #dc2626 !important;
    font-size: 16px !important;
    display: inline-block !important;
  }

  #site-header-menu .site-navigation .mobile-logout-btn:hover,
  #site-header-menu .site-navigation .mobile-logout-btn:active,
  nav.main-menu .mobile-logout-btn:hover,
  nav.main-menu .mobile-logout-btn:active,
  .mobile-logout-btn:hover,
  .mobile-logout-btn:active {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
  }

  #site-header-menu .site-navigation .mobile-logout-btn:hover span,
  #site-header-menu .site-navigation .mobile-logout-btn:active span,
  nav.main-menu .mobile-logout-btn:hover span,
  nav.main-menu .mobile-logout-btn:active span,
  .mobile-logout-btn:hover span,
  .mobile-logout-btn:active span {
    color: #ffffff !important;
  }

  #site-header-menu .site-navigation .mobile-logout-btn:hover i.fa,
  #site-header-menu .site-navigation .mobile-logout-btn:active i.fa,
  nav.main-menu .mobile-logout-btn:hover i.fa,
  nav.main-menu .mobile-logout-btn:active i.fa,
  .mobile-logout-btn:hover i.fa,
  .mobile-logout-btn:active i.fa {
    color: #ffffff !important;
  }
}

/* ==========================================================================
   Global Mobile Responsiveness & Layout Protection System
   ========================================================================== */
@media (max-width: 767.98px) {
  /* Prevent horizontal scroll on mobile viewport */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Page title banners & breadcrumb bars */
  .ttm-page-title-row {
    padding: 40px 0 30px 0 !important;
  }
  .breadcrumb-wrapper {
    flex-wrap: wrap !important;
    font-size: 0.76rem !important;
    padding: 6px 14px !important;
    max-width: 96% !important;
    line-height: 1.4 !important;
    gap: 3px !important;
    border-radius: 14px !important;
  }
  .breadcrumb-wrapper .ttm-bread-sep {
    margin: 0 2px !important;
    font-size: 0.75em !important;
  }

  /* General typography scaling */
  h1, .ttm-page-title-row h1 {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
  }
  h2, .about-heading {
    font-size: 1.55rem !important;
    line-height: 1.3 !important;
  }
  h3 {
    font-size: 1.35rem !important;
  }

  /* Media & image protection across all inner pages */
  .clinical-body-content img,
  .treatment-hero-card img,
  .about-hero-media-wrapper img,
  .ancient-modern-img-box img,
  .dimension-img-box img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* Dimension & Category Cards */
  .dimension-card-v2,
  .ancient-modern-card,
  .about-step-card-v2,
  .pillar-card-v2 {
    margin-bottom: 20px !important;
  }

  /* Timeline & Stepper responsive guarantee */
  .about-timeline-content {
    min-width: 0 !important;
    word-break: break-word !important;
  }
}

/* ==========================================================================
   UNIVERSAL META STRIP & BADGE WRAP SAFETY (PREVENTS VERTICAL WORD CHOPPING)
   ========================================================================== */
.dhi-meta-strip,
.post-meta,
.card-meta,
.article-meta,
.wp-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  row-gap: 6px !important;
}

.dhi-meta-item,
.text-nowrap,
.badge-nowrap,
span.text-danger:has(i.bi-file-earmark-pdf),
span:has(i.bi-clock),
span:has(i.fa-clock-o),
span:has(i.bi-calendar-event) {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Long Button Wrapping & Responsive Fluid Touch Targets */
.btn-primary-gradient,
.btn-outline-teal,
.btn-trust-cta {
  white-space: normal !important;
  word-break: normal !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

@media (max-width: 767.98px) {
  .btn-primary-gradient,
  .btn-outline-teal {
    max-width: 100% !important;
    word-break: normal !important;
    white-space: normal !important;
  }
  
  /* Prevent horizontal card blowout */
  .card, .dhi-whitepaper-card, .patient-card, .consultation-mode-card {
    max-width: 100% !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  /* Universal Flex Wrap & Overflow Guard for Badge/Price/Meta Strips */
  .consultation-meta-strip,
  .consultation-meta-strip > div,
  div[style*="dashed"] > .d-flex,
  div[style*="dashed"] .d-flex,
  div[style*="border: 1px dashed"] > .d-flex,
  .patient-care-timeline-step .d-flex,
  .patient-care-feature-card .d-flex,
  .booking-feature-box .d-flex,
  .card .d-flex.justify-content-between:not(.no-wrap-mobile),
  .d-flex:has(> .badge),
  .d-flex:has(> [class*="badge"]),
  .d-flex:has(> .patient-care-badge-theme),
  .d-flex:has(> .patient-care-badge-amber),
  .d-flex:has(> .patient-care-badge-teal) {
    flex-wrap: wrap !important;
    gap: 8px !important;
    row-gap: 8px !important;
  }

  /* Badge and pill responsive wrapping */
  .badge,
  .patient-care-badge-theme,
  .patient-care-badge-amber,
  .patient-care-badge-teal,
  .step-badge,
  .pill-badge {
    white-space: normal !important;
    max-width: 100% !important;
    line-height: 1.35 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Dashed meta info boxes on mobile */
  div[style*="dashed"] {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
  }

  /* Timeline step padding on mobile */
  .patient-care-timeline-step {
    padding: 14px 14px !important;
    gap: 12px !important;
  }

  .patient-care-step-num {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 0.85rem !important;
  }
}