/* ------------------------------------------------------------------------------------------------------ */
:root {
--primary: #4A6549;
--secondary: #C1A875;
--accent: #73826A;
--nav-hover: #5C6F5C; /* <-- Custom hover shade */
--btn-hover: #B3955F;
--text-dark: #3A3A3A;
--bg-light: #FDFBF7;
}
.bg-soft {
background-color: var(--bg-light);
}
.bg-light-green {
background-color: #E6F4EA;
}
/* ------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------ */
body {
background-color: var(--bg-light);
color: var(--text-dark);
font-family: 'Helvetica Neue', sans-serif;
line-height: 1.6;
}
/* ------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------ */
.navbar {
background-color: var(--primary) !important;
padding: 0; /* removes spacing above/below links */
}
.navbar .navbar-brand,
.navbar .nav-link {
color: #ffffff !important;
}
.navbar .nav-link {
display: block;
padding: 1rem 1.5rem;
transition: background-color 0.3s ease;
}
/* Full background hover and active */
.navbar .nav-link.active {
background-color: var(--accent) !important;
color: #ffffff !important;
}
.navbar .nav-link:hover {
background-color: var(--nav-hover) !important;
color: #ffffff !important;
}
/* Add spacing between nav items */
.navbar .nav-item + .nav-item {
margin-left: 0.5rem;
}
.navbar .btn.btn-primary:hover {
background-color: var(--btn-hover) !important;
color: #fff !important;
}
/* ------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------ */
.hero-section {
display: flex;
align-items: center; /* vertical alignment */
justify-content: center; /* optional: horizontal centering */
text-align: center;
padding: 5rem 0;
min-height: 550px; /* or whatever value you want */
background: linear-gradient(rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.70)),
url('../img/1920/doc-016.webp') center center / cover no-repeat;
}
.hero-section.hero-how {
background: linear-gradient(rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.70)),
url('../img/bg-002.webp') center center / cover no-repeat;
}
.hero-section.hero-included {
background: linear-gradient(rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.70)),
url('../img/1920/doc-019.webp') center center / cover no-repeat;
}
.hero-section.hero-team {
background: linear-gradient(rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.70)),
url('../img/1920/doc-004.webp') center center / cover no-repeat;
}
.hero-section.hero-contact {
background: linear-gradient(rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.70)),
url('../img/1920/doc-017.webp') center center / cover no-repeat;
}
.hero-section h1 {
color: var(--primary);
}
.hero-section .btn-primary {
background-color: var(--secondary);
border-color: var(--secondary);
color: #fff;
}
.hero-section .btn-primary:hover {
background-color: var(--primary);
border-color: var(--primary);
}
/* ------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------> */
section.bg-light {
background-color: #f2f2f2 !important;
}
/* ------------------------------------------------------------------------------------------------------> */
/* ------------------------------------------------------------------------------------------------------ */
.step-box {
display: flex;
align-items: flex-start;
background-color: var(--bg-light);
padding: 1.5rem;
border-left: 4px solid var(--accent);
border-radius: 6px;
box-shadow: 0 3px 6px rgba(0,0,0,0.06);
}
.step-circle {
background-color: var(--accent);
color: #fff;
border-radius: 50%;
width: 42px;
height: 42px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.step-box h4 {
margin-bottom: 0.5rem;
color: var(--primary);
}
.step-box p {
margin-bottom: 0;
}
/* ------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------ */
.team-image {
/*max-height: 400px;*/
object-fit: cover;
}
/* ------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------ */
.promo-panel {
/* subtle band so it stands out from surrounding sections */
background: linear-gradient(180deg, #fff 0%, #fbf8f2 100%);
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.promo-panel--raised .promo-card {
background: #fff;
border: 1px solid #ececec;
border-radius: 16px;
box-shadow: 0 10px 28px rgba(0,0,0,.06);
}
/* Headline & price color on brand */
.promo-panel .promo-copy h2 { color: var(--text-dark); }
.promo-panel .promo-copy .text-primary { color: var(--primary) !important; }
/* Buttons themed to your palette */
.promo-panel .btn-primary {
background-color: var(--secondary);
border-color: var(--secondary);
color: #fff;
}
.promo-panel .btn-primary:hover {
background-color: var(--primary);
border-color: var(--primary);
}
.promo-panel .btn-outline-secondary {
color: var(--primary);
border-color: var(--accent);
background: #fff;
}
.promo-panel .btn-outline-secondary:hover {
color: #fff;
background: var(--primary);
border-color: var(--primary);
}
.promo-card { position: relative; }
.promo-card::before {
content:''; position:absolute; left:0; top:0; bottom:0; width:6px;
background: var(--accent); border-top-left-radius:16px; border-bottom-left-radius:16px;
}
/* ----- Starburst badge (fix text clipping) ----- */
.starburst-wrap { display: flex; justify-content: center; align-items: center; }
.starburst {
--burst-size: 300px; /* more room so text doesn't touch edges */
width: var(--burst-size);
height: var(--burst-size);
background: var(--secondary);
color: #fff;
position: relative;
margin: 0 auto;
clip-path: polygon(
50% 0%, 60% 14%, 78% 9%, 73% 27%,
91% 32%, 76% 44%, 90% 58%, 72% 60%,
78% 79%, 60% 69%, 50% 100%, 40% 69%,
22% 79%, 28% 60%, 10% 58%, 24% 44%,
9% 32%, 27% 27%, 22% 9%, 40% 14%
);
box-shadow: 0 8px 20px rgba(0,0,0,.08);
display: grid; place-items: center;
}
/* inner padding layer so clip-path spikes don't cut text */
.starburst-inner {
position: absolute; inset: 23%;
display: grid; place-items: center;
}
/* dashed inner border */
.starburst::after {
content: '';
position: absolute; inset: 8%;
border: 2px dashed rgba(255,255,255,.65);
clip-path: inherit;
}
/* scale text subtly so it always fits */
.starburst-text {
display: block;
text-align: center;
font-weight: 800;
line-height: 1.15;
letter-spacing: .2px;
text-transform: uppercase;
font-size: 0.98rem;
transform: scale(.92); /* prevents edge clipping */
transform-origin: center;
word-break: break-word;
}
/* Mobile tweaks + option to switch to a circle for readability */
@media (max-width: 576px) {
.starburst { --burst-size: 160px; }
.starburst-text { font-size: .9rem; transform: scale(.9); }
}
/* Uncomment to use a circle on narrow screens
@media (max-width: 420px) {
.starburst { clip-path: circle(50%); }
}
*/
/* ------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------ */
.included-image {
max-height: 420px;
object-fit: cover;
}
.list-group-item {
display: flex;
align-items: center;
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 0.5rem;
margin-bottom: 0.75rem;
padding: 1rem;
}
.list-group-item i {
font-size: 1.5rem;
margin-right: 1rem;
line-height: 1;
}
/* Force span to take remaining space and align properly */
.list-group-item span {
display: inline-block;
vertical-align: middle;
line-height: 1.3;
}
/* ------------------------------------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------------------------- */
.membership-cost {
background: linear-gradient(180deg, #fbf8f2 0%, #ffffff 100%);
border-top: 1px solid #eee;
}
.membership-cost .cost-card {
background: #fff;
border: 1px solid #ececec;
border-radius: 16px;
box-shadow: 0 10px 28px rgba(0,0,0,.06);
}
/* Price block */
.membership-cost .price-block {
background: #fff;
border: 1px solid #ececec;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
/* Icon color alignment */
.membership-cost i.bi {
color: var(--accent);
}
/* Buttons reuse site theme */
.membership-cost .btn-primary {
background-color: var(--secondary);
border-color: var(--secondary);
color: #fff;
}
.membership-cost .btn-primary:hover {
background-color: var(--primary);
border-color: var(--primary);
}
.membership-cost .btn-outline-secondary {
color: var(--primary);
border-color: var(--accent);
background: #fff;
}
.membership-cost .btn-outline-secondary:hover {
color: #fff;
background: var(--primary);
border-color: var(--primary);
}
@media (max-width: 576px) {
.membership-cost .display-5 { font-size: 2.4rem; }
}
/* ---------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------ */
.quote-block {
font-size: 1.1rem;
font-style: italic;
background-color: #f5fdf5; /* very light green for natural feel */
color: #2c3e50;
}
/* ------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------ */
.border {
border-color: var(--accent) !important;
}
/* ------------------------------------------------------------------------------------------------------ */
/* ----------------------------------------------------------------------------------------------------- */
.accordion .accordion-item {
border: 1px solid #e6e6e6;
border-radius: 10px;
overflow: hidden;
background: #fff;
margin-bottom: 10px;
}
/* Header button */
.accordion-button {
display: flex;
align-items: center;
font-weight: 500;
background: #fff;
color: var(--text-dark);
transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
/* Hover state (subtle, on-brand) */
.accordion-button:hover {
background-color: #E6F4EA; /* light green tint already used elsewhere */
color: var(--primary);
}
/* Leading icon + custom chevron color */
.accordion-button > i.bi { color: var(--primary); }
.accordion-button .accordion-icon i {
color: var(--primary);
opacity: .9;
}
/* Rotate our custom chevron when open */
.accordion-button .accordion-icon { transition: transform .25s ease; }
.accordion-button:not(.collapsed) .accordion-icon { transform: rotate(180deg); }
/* Open/active state (left accent + tint) */
.accordion-button:not(.collapsed) {
color: var(--primary);
background-color: #E6F4EA; /* soft brand tint */
box-shadow: inset 0 -1px 0 rgba(0,0,0,.03);
border-left: 4px solid var(--accent); /* on-brand accent bar */
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
/* Body text */
.accordion-body {
line-height: 1.6;
font-size: 1rem;
padding: 1rem 1.25rem 1.25rem;
}
/* Keep only our chevron (remove Bootstrap's default) */
.accordion-button::after { display: none !important; }
/* Accessible focus ring in brand colors */
.accordion-button:focus {
outline: none;
box-shadow: 0 0 0 .15rem rgba(193,168,117,.20), 0 0 0 .35rem rgba(74,101,73,.25); /* secondary + primary */
border-radius: 8px;
}
@media (max-width: 576px) {
.accordion .accordion-item { margin-bottom: 12px; }
.accordion-body { font-size: .985rem; }
}
/* ----------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------ */
.card {
border: none;
border-radius: 10px;
background-color: #ffffff;
}
.card h2 {
color: var(--primary);
}
.form-control {
border-radius: 6px;
border: 1px solid #ccc;
}
.form-control:focus {
border-color: var(--secondary);
box-shadow: 0 0 0 0.15rem rgba(193, 168, 117, 0.25);
}
.btn-primary {
background-color: var(--secondary);
border-color: var(--secondary);
color: #fff;
}
.btn-primary:hover {
background-color: var(--primary);
border-color: var(--primary);
}
/* ------------------------------------------------------------------------------------------------------ */
/* ---------------------------------------------------