/* from index.html */
body .text-white {
color: #fff !important;
}
/* =============================================
HERO BANNER
============================================= */
.hero-banner {
position: relative;
min-height: 620px;
display: flex;
align-items: center;
overflow: hidden;
background-color: #0d1b2a;
}
.hero-banner::before {
content: "";
position: absolute;
inset: 0;
background-image: url("img/carousel-1.jpg");
background-size: cover;
background-position: center;
filter: brightness(0.55);
z-index: 0;
}
.hero-banner::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.30) 55%, rgba(0,0,0,0.05) 100%);
z-index: 1;
}
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero-text { max-width: 560px; }
.hero-text .hero-eyebrow {
display: inline-block;
letter-spacing: 4px;
font-size: 0.78rem;
text-transform: uppercase;
font-weight: 700;
color: #fff;
background: var(--bs-primary, #0d6efd);
padding: 6px 18px;
border-radius: 50px;
margin-bottom: 1.4rem;
}
.hero-text h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.2rem, 4.5vw, 3rem);
font-weight: 600;
line-height: 1.15;
color: #ffffff !important;
margin-bottom: 1.25rem;
}
.hero-text p {
font-size: 1.05rem;
color: rgba(255,255,255,0.82);
line-height: 1.75;
margin-bottom: 2rem;
max-width: 480px;
}
.hero-cta-card {
background: rgba(255,255,255,0.10);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.22);
border-radius: 20px;
padding: 40px 36px;
text-align: center;
max-width: 340px;
margin-left: auto;
}
.hero-cta-card .cta-icon {
width: 64px; height: 64px;
background: var(--bs-primary, #0d6efd);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 1.25rem;
}
.hero-cta-card .cta-icon i { font-size: 1.6rem; color: #fff; }
.hero-cta-card h3 { font-family: 'Playfair Display', serif; font-size: 1.45rem; color: #fff !important; margin-bottom: 0.65rem; }
.hero-cta-card p { font-size: 0.9rem; color: rgba(255,255,255,0.76); margin-bottom: 1.5rem; line-height: 1.65; }
.hero-cta-card .btn-book {
display: block;
background: #fff;
color: var(--bs-primary, #0d6efd);
font-weight: 700;
padding: 13px 28px;
border-radius: 50px;
font-size: 0.95rem;
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
text-decoration: none;
}
.hero-cta-card .btn-book:hover { background: var(--bs-primary, #0d6efd); color: #fff; transform: translateY(-2px); }
.hero-stats {
position: relative; z-index: 2;
background: rgba(255,255,255,0.07);
border-top: 1px solid rgba(255,255,255,0.15);
padding: 20px 0;
}
.hero-stats .stat-item { text-align: center; color: #fff; padding: 0 20px; }
.hero-stats .stat-item .stat-number { font-family: 'Playfair Display', serif; font-size: 1.9rem; font-weight: 600; color: #fff; line-height: 1; }
.hero-stats .stat-item .stat-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.65); margin-top: 4px; }
.hero-stats .stat-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.2); align-self: center; }
@media (max-width: 991.98px) {
.hero-banner { min-height: auto; padding: 80px 0 40px; }
.hero-cta-card { margin: 40px auto 0; max-width: 100%; }
.hero-text h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
}
@media (max-width: 575.98px) { .hero-stats .stat-divider { display: none; } }
/* =============================================
PATH TO RECOVERY SECTION
============================================= */
.recovery-section {
position: relative;
background: #eef4f3;
overflow: hidden;
}
.recovery-section::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 55% 60% at 5% 15%, rgba(13,110,253,.06) 0%, transparent 65%),
radial-gradient(ellipse 45% 55% at 95% 85%, rgba(13,110,253,.05) 0%, transparent 65%);
pointer-events: none;
}
/* eyebrow matching site style */
.recovery-section .sub-style { display: flex; justify-content: flex-start; }
.recovery-section .rec-eyebrow {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: .10em;
text-transform: uppercase;
color: var(--bs-primary, #0d6efd);
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.recovery-section .rec-eyebrow::before {
content: '';
display: inline-block;
width: 24px; height: 2px;
background: var(--bs-primary, #0d6efd);
border-radius: 2px;
}
.recovery-section .rec-heading {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 600;
line-height: 1.2;
color: #1a2e3b;
margin-bottom: 0;
}
.recovery-section .rec-desc {
font-size: 0.95rem;
line-height: 1.8;
color: #6c757d;
border-left: 3px solid var(--bs-primary, #0d6efd);
padding-left: 16px;
}
/* Steps track */
.rec-steps-wrapper { position: relative; }
/* dashed connector */
.rec-connector {
position: absolute;
top: 50px;
left: calc(10% + 40px);
right: calc(10% + 40px);
height: 2px;
background: repeating-linear-gradient(
90deg,
#b8d8f5 0, #b8d8f5 8px,
transparent 8px, transparent 18px
);
z-index: 0;
pointer-events: none;
}
@media (max-width: 767px) { .rec-connector { display: none; } }
/* Step card */
.rec-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
z-index: 1;
padding: 0 8px;
}
/* ghost number */
.rec-step-num {
font-family: 'Playfair Display', serif;
font-size: 3rem;
font-weight: 600;
color: rgba(13,110,253,.15);
line-height: 1;
margin-bottom: -14px;
position: relative;
z-index: 2;
user-select: none;
transition: color .3s;
}
.rec-step:hover .rec-step-num { color: rgba(13,110,253,.30); }
/* icon box */
.rec-icon-box {
width: 76px; height: 76px;
border-radius: 18px;
background: linear-gradient(145deg, var(--bs-primary, #0d6efd), #0a58ca);
display: flex; align-items: center; justify-content: center;
position: relative; z-index: 2;
box-shadow: 0 8px 28px rgba(13,110,253,.30), 0 2px 6px rgba(0,0,0,.08);
transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
}
.rec-step:hover .rec-icon-box {
transform: translateY(-6px) scale(1.07);
box-shadow: 0 18px 40px rgba(13,110,253,.40), 0 4px 12px rgba(0,0,0,.10);
}
.rec-step.rec-active .rec-icon-box {
background: linear-gradient(145deg, #3d8ef8, var(--bs-primary, #0d6efd));
box-shadow: 0 10px 36px rgba(13,110,253,.50), 0 0 0 6px rgba(13,110,253,.12);
}
.rec-icon-box svg {
width: 34px; height: 34px;
fill: none; stroke: #fff;
stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
}
/* text */
.rec-step-body { margin-top: 18px; }
.rec-step-title {
font-size: 13px;
font-weight: 600;
color: var(--bs-primary, #0d6efd);
line-height: 1.4;
margin-bottom: 6px;
}
.rec-step-desc {
font-size: 12px;
line-height: 1.7;
color: #6c757d;
margin-bottom: 0;
}
/* entrance animations */
@keyframes recFadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.rec-header-left { animation: recFadeUp .65s ease both; }
.rec-header-right { animation: recFadeUp .65s .15s ease both; }
.rec-step { animation: recFadeUp .55s ease both; opacity: 0; }
.rec-step:nth-child(1) { animation-delay: .2s; }
.rec-step:nth-child(2) { animation-delay: .33s; }
.rec-step:nth-child(3) { animation-delay: .46s; }
.rec-step:nth-child(4) { animation-delay: .59s; }
.rec-step:nth-child(5) { animation-delay: .72s; }
/* from about.html */
.recovery-section {
position: relative;
background: #eef4f3;
overflow: hidden;
}
.recovery-section::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 55% 60% at 5% 15%, rgba(13,110,253,.06) 0%, transparent 65%),
radial-gradient(ellipse 45% 55% at 95% 85%, rgba(13,110,253,.05) 0%, transparent 65%);
pointer-events: none;
}
/* eyebrow matching site style */
.recovery-section .sub-style { display: flex; justify-content: flex-start; }
.recovery-section .rec-eyebrow {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: .10em;
text-transform: uppercase;
color: var(--bs-primary, #0d6efd);
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.recovery-section .rec-eyebrow::before {
content: '';
display: inline-block;
width: 24px; height: 2px;
background: var(--bs-primary, #0d6efd);
border-radius: 2px;
}
.recovery-section .rec-heading {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 600;
line-height: 1.2;
color: #1a2e3b;
margin-bottom: 0;
}
.recovery-section .rec-desc {
font-size: 0.95rem;
line-height: 1.8;
color: #6c757d;
border-left: 3px solid var(--bs-primary, #0d6efd);
padding-left: 16px;
}
/* Steps track */
.rec-steps-wrapper { position: relative; }
/* dashed connector */
.rec-connector {
position: absolute;
top: 50px;
left: calc(10% + 40px);
right: calc(10% + 40px);
height: 2px;
background: repeating-linear-gradient(
90deg,
#b8d8f5 0, #b8d8f5 8px,
transparent 8px, transparent 18px
);
z-index: 0;
pointer-events: none;
}
@media (max-width: 767px) { .rec-connector { display: none; } }
/* Step card */
.rec-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
z-index: 1;
padding: 0 8px;
}
/* ghost number */
.rec-step-num {
font-family: 'Playfair Display', serif;
font-size: 3rem;
font-weight: 600;
color: rgba(13,110,253,.15);
line-height: 1;
margin-bottom: -14px;
position: relative;
z-index: 2;
user-select: none;
transition: color .3s;
}
.rec-step:hover .rec-step-num { color: rgba(13,110,253,.30); }
/* icon box */
.rec-icon-box {
width: 76px; height: 76px;
border-radius: 18px;
background: linear-gradient(145deg, var(--bs-primary, #0d6efd), #0a58ca);
display: flex; align-items: center; justify-content: center;
position: relative; z-index: 2;
box-shadow: 0 8px 28px rgba(13,110,253,.30), 0 2px 6px rgba(0,0,0,.08);
transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
}
.rec-step:hover .rec-icon-box {
transform: translateY(-6px) scale(1.07);
box-shadow: 0 18px 40px rgba(13,110,253,.40), 0 4px 12px rgba(0,0,0,.10);
}
.rec-step.rec-active .rec-icon-box {
background: linear-gradient(145deg, #3d8ef8, var(--bs-primary, #0d6efd));
box-shadow: 0 10px 36px rgba(13,110,253,.50), 0 0 0 6px rgba(13,110,253,.12);
}
.rec-icon-box svg {
width: 34px; height: 34px;
fill: none; stroke: #fff;
stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
}
/* text */
.rec-step-body { margin-top: 18px; }
.rec-step-title {
font-size: 13px;
font-weight: 600;
color: var(--bs-primary, #0d6efd);
line-height: 1.4;
margin-bottom: 6px;
}
.rec-step-desc {
font-size: 12px;
line-height: 1.7;
color: #6c757d;
margin-bottom: 0;
}
/* entrance animations */
@keyframes recFadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.rec-header-left { animation: recFadeUp .65s ease both; }
.rec-header-right { animation: recFadeUp .65s .15s ease both; }
.rec-step { animation: recFadeUp .55s ease both; opacity: 0; }
.rec-step:nth-child(1) { animation-delay: .2s; }
.rec-step:nth-child(2) { animation-delay: .33s; }
.rec-step:nth-child(3) { animation-delay: .46s; }
.rec-step:nth-child(4) { animation-delay: .59s; }
.rec-step:nth-child(5) { animation-delay: .72s; }
/* from blog_post.html */
/* ---------- Premium Typography Overrides ---------- */
body, p, a, span, li, ul {
font-family: 'Inter', sans-serif !important;
color: #334155;
}
h1, h2, h3, h4, h5, h6, .display-3, .display-4, .navbar-brand {
font-family: 'Marcellus', serif !important;
color: #0f172a !important;
}
:root {
--ink: #0f172a;
--bs-primary: #15b9d9;
--bs-primary-rgb: 21, 185, 217;
}
/* ---------- Separated Standalone Hero Image Section ---------- */
.hero-image-section {
width: 100%;
max-width: 1200px;
margin: 40px auto 20px auto;
padding: 0 15px;
box-sizing: border-box;
overflow: hidden;
}
.hero-image-wrapper {
width: 100%;
overflow: hidden;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
background-color: #f1f5f9;
}
.hero-image-wrapper img.hover-zoom {
width: 100%;
height: auto;
max-height: 520px;
object-fit: cover;
display: block;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-image-wrapper:hover img.hover-zoom {
transform: scale(1.035);
}
/* ---------- Breadcrumb Header Block Below Hero ---------- */
.article-header-container {
max-width: 1100px;
margin: 0 auto;
padding: 20px 15px 10px 15px;
}
.article-header-container .crumb {
font-size: 13.5px;
color: #64748b;
margin-bottom: 12px;
}
.article-header-container .crumb a {
color: var(--bs-primary, #15b9d9);
text-decoration: none;
font-weight: 500;
}
.article-header-container .tag-pill {
display: inline-block;
background-color: #ecfeff;
border: 1px solid #cffafe;
color: var(--bs-primary, #15b9d9);
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 6px 16px;
border-radius: 50px;
margin-bottom: 16px;
}
.article-header-container h1 {
font-size: clamp(1.8rem, 4.5vw, 2.8rem) !important;
font-weight: 600;
line-height: 1.25;
margin-bottom: 20px;
}
.article-header-container .byline {
font-size: 14px;
color: #64748b;
display: flex;
align-items: center;
gap: 10px;
}
.article-header-container .byline img {
width: 38px;
height: 38px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #fff;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
/* ---------- Two-column layout: sticky TOC + content ---------- */
.article-grid {
display: grid;
grid-template-columns: 260px 1fr;
gap: 50px;
max-width: 1100px;
margin: 0 auto;
}
@media (max-width: 991px) {
.article-grid { grid-template-columns: 1fr; }
.toc-col { display: none; }
}
.toc-col .toc-box {
position: sticky;
top: 100px;
border-left: 2px solid #e2e8f0;
padding-left: 18px;
}
.toc-box span {
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #94a3b8;
font-weight: 700;
}
.toc-box ul {
list-style: none;
padding: 0;
margin: 14px 0 0;
}
.toc-box li {
margin-bottom: 12px;
}
.toc-box a {
color: #475569;
font-size: 14px;
text-decoration: none;
transition: .2s;
}
.toc-box a:hover {
color: var(--bs-primary, #15b9d9);
padding-left: 4px;
}
.content-col p {
line-height: 1.85;
font-size: 1.05rem;
margin-bottom: 18px;
color: #334155;
}
.content-col h2 {
color: var(--ink) !important;
font-size: 1.75rem !important;
margin-top: 48px;
margin-bottom: 16px;
scroll-margin-top: 120px;
border-left: 4px solid var(--bs-primary, #15b9d9);
padding-left: 14px;
}
.content-col img.inline-img {
width: 100%;
border-radius: 12px;
margin: 10px 0 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.img-cap {
font-size: 12.5px;
color: #64748b;
text-align: center;
margin-bottom: 24px;
}
/* ---------- Key-takeaways highlight ---------- */
.takeaway-panel {
background: #0f172a;
border-radius: 16px;
padding: 30px 28px;
color: #fff;
margin: 36px 0;
}
.takeaway-panel h3 {
font-size: 1.25rem !important;
font-weight: 500;
margin-bottom: 18px;
color: #fff !important;
}
.takeaway-panel h3 i {
color: var(--bs-primary, #15b9d9);
margin-right: 8px;
}
.takeaway-panel ul {
margin: 0;
padding: 0;
list-style: none;
}
.takeaway-panel li {
padding-left: 26px;
position: relative;
margin-bottom: 11px;
font-size: .95rem;
color: #94a3b8;
}
.takeaway-panel li:before {
content: "\f178";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
left: 0;
top: 1px;
color: var(--bs-primary, #15b9d9);
font-size: 13px;
}
/* ---------- Technique cards grid ---------- */
.technique-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
margin: 10px 0 30px;
}
@media (max-width: 576px) {
.technique-grid { grid-template-columns: 1fr; }
}
.technique-card {
border: 1px solid #f1f5f9;
border-radius: 14px;
padding: 22px 20px;
background-color: #fff;
transition: .25s;
}
.technique-card:hover {
box-shadow: 0 10px 25px rgba(21, 185, 217, 0.08);
border-color: rgba(21, 185, 217, 0.2);
transform: translateY(-3px);
}
.technique-card .num {
width: 34px;
height: 34px;
border-radius: 50%;
background: #ecfeff;
color: var(--bs-primary, #15b9d9);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
margin-bottom: 12px;
}
.technique-card h4 {
font-size: 1.1rem !important;
color: var(--ink) !important;
font-weight: 500;
margin-bottom: 8px;
}
.technique-card p {
font-size: .9rem;
color: #64748b;
margin: 0;
line-height: 1.7;
}
/* ---------- Pull-quote ribbon ---------- */
.ribbon-quote {
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
padding: 24px 15px;
margin: 32px 0;
font-style: italic;
font-size: 1.3rem;
color: var(--ink);
text-align: center;
line-height: 1.5;
}
/* ---------- FAQ accordion ---------- */
.faq-acc .faq-item {
border-bottom: 1px solid #e2e8f0;
}
.faq-acc .faq-q {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 0;
font-weight: 600;
color: var(--ink);
font-size: 1rem;
transition: color 0.2s ease;
}
.faq-acc .faq-q:hover {
color: var(--bs-primary, #15b9d9);
}
.faq-acc .faq-q i {
color: var(--bs-primary, #15b9d9);
transition: .25s;
}
.faq-acc .faq-a {
max-height: 0;
overflow: hidden;
transition: max-height .3s ease-out, padding .3s ease-out;
font-size: .95rem;
color: #475569;
line-height: 1.8;
}
.faq-acc .faq-item.open .faq-a {
max-height: 250px;
padding-bottom: 18px;
}
.faq-acc .faq-item.open .faq-q i {
transform: rotate(45deg);
}
/* ---------- Share + author dock ---------- */
.share-dock {
display: flex;
gap: 10px;
margin: 30px 0;
}
.share-dock a {
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #ecfeff;
color: var(--bs-primary, #15b9d9);
transition: .2s;
text-decoration: none;
}
.share-dock a:hover {
background: var(--bs-primary, #15b9d9);
color: #fff;
}
.author-card {
display: flex;
gap: 16px;
align-items: center;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 20px;
margin: 40px 0;
}
.author-card img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
}
.author-card h5 {
margin: 0 0 3px;
color: var(--ink);
font-size: 1rem;
}
.author-card p {
margin: 0;
font-size: .85rem;
color: #64748b;
}
/* ---------- Sticky CTA card inside sidebar ---------- */
.toc-cta {
margin-top: 40px;
background: linear-gradient(150deg, var(--bs-primary, #15b9d9), #0f172a);
border-radius: 14px;
padding: 20px;
color: #fff;
text-align: center;
}
.toc-cta p {
font-size: .85rem;
margin-bottom: 12px;
color: #e2e8f0;
}
.toc-cta a {
background: #fff;
color: #0f172a;
font-weight: 600;
border-radius: 50px;
padding: 8px 20px;
font-size: .85rem;
display: inline-block;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease;
}
.toc-cta a:hover {
background: var(--bs-primary, #15b9d9);
color: #fff;
}
.forminator-field textarea,
.forminator-field input {
padding: 15px !important;
border-radius: 10px !important;
}
.forminator-row {
margin-bottom: 10px !important;
}
button.forminator-button.forminator-button-submit {
/*background-color: #15b9d9;*/
border-color: #15b9d9;
font-weight: 600;
/*color: #fff;*/
}
button.forminator-button.forminator-button-submit {
font-weight: 600 !important;
/*color: #fff;*/
border-radius: 10px !important;
width: 100% !important;
}
/* Services */
.page-template-page-services .service-item {
display: flex;
gap: 20px;
justify-content: space-between;
}
.page-template-page-services .service-content,
.page-template-page-services .service-img {
flex: 50%;
}
.page-template-page-services .service .wow:nth-child(odd) .service-item {
flex-direction: row;
}
.page-template-page-services .service .wow:nth-child(even) .service-item {
flex-direction: row-reverse;
}