/* ----------------------------------------------------------------
	Custom CSS

	Added Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
:root {
	--primary-navy: #0D2B4E;
	--accent-gold: #C8A84B;
	--bg-offwhite: #F8F6F2;
	--text-charcoal: #1C1C1E;
	--text-grey: #6B7280;
	--text-body: #374151;
}

/* Reduce excessive section spacing (was 5rem per side) */
.py-6 {
	padding-top: 3.5rem !important;
	padding-bottom: 3.5rem !important;
}

body {
	font-family: 'DM Sans', sans-serif;
	color: var(--text-charcoal);
	background-color: var(--bg-offwhite);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Playfair Display', serif;
	color: var(--primary-navy);
}

.font-body {
	font-family: 'DM Sans', sans-serif;
}

#header,
#header-wrap {
	background: #fff;
}

#header-wrap {
	overflow: visible;
	height: var(--cnvs-header-height);
}

/* Mobile header row - logo left, hamburger right, no wrapping */
.primary-menu-trigger {
	margin-left: auto;
}

/* Hamburger menu icon - visible and properly sized on mobile */
.cnvs-hamburger {
	--cnvs-hamburger-size: 1.75rem;
	--cnvs-hamburger-width: 2.5px;
}

.cnvs-hamburger .cnvs-hamburger-inner,
.cnvs-hamburger .cnvs-hamburger-inner::before,
.cnvs-hamburger .cnvs-hamburger-inner::after {
	background-color: var(--primary-navy) !important;
}

/* CTA Button */
.menu-item-cta > .menu-link {
	background: var(--accent-gold);
	color: var(--primary-navy);
	border-radius: 4px;
}

/* Primary Menu */
.is-expanded-menu .menu-item:hover > .menu-link,
.is-expanded-menu .menu-item.current > .menu-link {
	color: #9c6006 !important;
}

.menu-item .menu-link {
	font-family: 'DM Sans', sans-serif;
	font-weight: 500;
	color: var(--primary-navy);
}

/* Submenu container top border: Canvas paints it with the global theme
   color, which medical.css sets to red (#DE6262). Hard override to theme
   navy with !important so no variable chain, file order, or stale
   intermediate stylesheet can bring the red back. Currently only the
   Services dropdown exists site-wide, so blast radius is that one menu. */
.is-expanded-menu .sub-menu-container {
	border-top: 2px solid var(--primary-navy) !important;
}

/* Dropdown item text: deep gold, natural case. Scoped to the submenu
   container only - main menu and everything else keep their styling.
   Deep gold (#8a6d1f) instead of accent gold for readable contrast on
   the white dropdown; hover shifts to navy as click feedback. */
.is-expanded-menu .sub-menu-container {
	--cnvs-primary-menu-submenu-color: #6e5600;
	--cnvs-primary-menu-submenu-tt: none;
	--cnvs-primary-menu-submenu-font-size: 13px;
	--cnvs-primary-menu-submenu-hover-color: var(--primary-navy);
}

/* Submenu arrow trigger (injected by Canvas JS). Desktop keeps core
   hover-open behavior untouched; on touch/collapsed menus the trigger
   is enlarged to a full 44px touch target in theme gold. */
body:not(.is-expanded-menu) .menu-item .sub-menu-trigger {
	top: 0;
	transform: none;
	width: 44px;
	height: 44px;
	font-size: 16px;
	line-height: 44px;
	color: var(--accent-gold);
	transition: transform 0.3s ease;
}

/* Open-state arrow: Canvas adds .icon-rotate-90 to the expanded
   trigger but ships no CSS for it, so nothing visibly changed.
   Rotating the right-chevron 90deg points it down when open. */
body:not(.is-expanded-menu) .menu-item .sub-menu-trigger.icon-rotate-90 {
	transform: rotate(90deg);
}

.menu-item:hover .menu-link,
.menu-item.current .menu-link {
	color: #9c6006;
}

/* Prevent sticky shrink effect */
.is-expanded-menu #header.sticky-header-shrink {
	--cnvs-sticky-header-height: var(--cnvs-header-height);
}

/* Override red color for active nav - use theme gold */
.is-expanded-menu .style-3 .menu-container > .menu-item.current > .menu-link {
	--cnvs-primary-menu-active-color: var(--primary-navy);
	background-color: var(--accent-gold);
	color: var(--primary-navy) !important;
}

/* Hero Section */
.hero-section {
	position: relative;
	background: var(--primary-navy);
	overflow: hidden;
}

.hero-section .hero-bg-pattern {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: radial-gradient(circle at 20% 50%, rgba(200, 168, 75, 0.08) 0%, transparent 50%),
					  radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 40%);
	pointer-events: none;
}

.hero-section h1 {
	font-family: 'Playfair Display', serif;
	font-size: 56px;
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
}

.hero-section .hero-subtitle {
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.85);
}

.hero-section .hero-role {
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--accent-gold);
	margin-bottom: 16px;
}

.hero-section .hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 8px;
}

.hero-section .hero-badge i {
	color: var(--accent-gold);
	font-size: 16px;
}

.btn-gold {
	background-color: var(--accent-gold);
	color: var(--primary-navy);
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	font-weight: 700;
	padding: 14px 32px;
	border: none;
	border-radius: 4px;
	transition: all 0.3s ease;
}

.btn-gold:hover {
	background-color: #b89a3e;
	color: var(--primary-navy);
}

.btn-outline-light {
	background-color: transparent;
	color: #fff;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	font-weight: 700;
	padding: 14px 32px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: 4px;
	transition: all 0.3s ease;
}

.btn-outline-light:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: #fff;
	border-color: #fff;
}

/* Theme-wide outline-primary: deep navy resting + hover. Global on
   purpose - any current or future .btn-outline-primary inherits the
   theme automatically. Verified the only present uses are the five
   "Learn More" buttons on services.php, so today's blast radius is
   unchanged by this move. */
.btn-outline-primary {
	--bs-btn-color: var(--primary-navy);
	--bs-btn-border-color: var(--primary-navy);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--primary-navy);
	--bs-btn-hover-border-color: var(--primary-navy);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--primary-navy);
	--bs-btn-active-border-color: var(--primary-navy);
}

/* Theme solid button: full btn-primary variable set in navy variants.
   Use as class="btn btn-theme-primary ..." wherever a solid navy
   button is needed. */
.btn-theme-primary {
	--bs-btn-font-weight: 700;
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--primary-navy);
	--bs-btn-border-color: var(--primary-navy);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #081d36;
	--bs-btn-hover-border-color: #081d36;
	--bs-btn-focus-shadow-rgb: 13, 43, 78;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #061627;
	--bs-btn-active-border-color: #061627;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--primary-navy);
	--bs-btn-disabled-border-color: var(--primary-navy);
}

.hero-image-wrap {
	position: relative;
}

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

/* Trust Counters */
.trust-section {
	background: linear-gradient(135deg, #f8f4ec 0%, #fdf9f2 50%, #faf5eb 100%);
	position: relative;
	overflow: hidden;
}

.trust-section::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -10%;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(200, 168, 75, 0.06) 0%, transparent 70%);
	pointer-events: none;
}

.trust-section::after {
	content: '';
	position: absolute;
	bottom: -30%;
	left: -5%;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(200, 168, 75, 0.04) 0%, transparent 70%);
	pointer-events: none;
}

.trust-item {
	text-align: center;
	padding: 36px 24px;
	height: 100%; /* equal-height cards: Bootstrap row stretches columns, card fills its column */
	background: rgba(13, 43, 78, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(200, 168, 75, 0.4);
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(13, 43, 78, 0.15);
	transition: all 0.3s ease;
	position: relative;
	z-index: 1;
}

/* Mobile menu background when expanded */
body:not(.is-expanded-menu) .menu-container {
	background-color: var(--cnvs-header-bg);
}

.trust-item:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 48px rgba(13, 43, 78, 0.25);
	border-color: var(--accent-gold);
	background: rgba(22, 58, 95, 0.9);
}

.trust-item .counter {
	font-family: 'Playfair Display', serif;
	font-size: clamp(1.75rem, 8vw, 3.25rem);
	font-weight: 700;
	color: var(--accent-gold);
	line-height: 1.1;
	overflow-wrap: break-word;
}

/* Tablet range (4-across narrow columns): viewport-based clamp would
   already hit the 52px cap here, so scale to column width instead and
   trim card side padding for extra room. Covers iPad Mini/Air
   portrait + landscape and small laptops. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.trust-item {
		padding-left: 16px;
		padding-right: 16px;
	}
	.trust-item .counter {
		font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	}
}

.trust-item .counter-label {
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.8);
	margin-top: 10px;
}

/* Section Titles */
.section-title {
	font-family: 'Playfair Display', serif;
	font-size: 36px;
	font-weight: 700;
	color: var(--primary-navy);
	margin-bottom: 16px;
}

.section-subtitle {
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--accent-gold);
	margin-bottom: 12px;
}

/* About Section */
.about-section {
	background: linear-gradient(135deg, #fcfaf7 0%, #ffffff 100%);
}


/* 1. Parent Row/Column Alignment */
.about-media-col {
	/* REMOVE align-self: stretch */
	/* Add this so the card floats perfectly centered next to the tall text */
	align-self: center; 
}

.about-card {
	border: 1px solid rgba(13, 43, 78, 0.12);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(13, 43, 78, 0.12);
	/* REMOVE height: 100% */
}

/* 2. The Aspect Ratio Lock (The Magic) */
.about-card-img-wrapper {
	width: 100%;
	/* Locks the container to a 4:5 portrait shape on EVERY device */
	aspect-ratio: 4 / 5; 
	overflow: hidden;
	position: relative;
}

.about-card-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover; /* Will barely crop because the wrapper is locked to 4:5 */
	object-position: top center;
}

/* 3. The CTA Block (Natural Height) */
.about-cta-block {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 14px;
	background: radial-gradient(circle at 85% 15%, rgba(200, 168, 75, 0.14) 0%, transparent 55%), var(--primary-navy);
	color: #fff;
	padding: 32px 28px;
	text-align: center;
}

/* --- RESTORED DECORATIVE TYPOGRAPHY RULES --- */
.about-cta-block .badge-years {
	font-family: 'Playfair Display', serif;
	font-size: 58px;
	font-weight: 700;
	color: var(--accent-gold);
	line-height: 1;
}

.about-cta-block .badge-text {
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.9);
}

.about-cta-block .about-cta-text {
	font-size: 16px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
	max-width: 420px;
}

.about-cta-block .btn-gold {
	text-decoration: none;
}

.about-text p {
	font-size: 17px;
	line-height: 1.8;
	color: var(--text-charcoal);
	margin-bottom: 20px;
}

/* Expertise Cards - uses fbox-bg.fbox-center with theme overrides */
.expertise-card-custom {
	--cnvs-featured-box-bg-light: rgba(13, 43, 78, 0.12);
	--cnvs-themecolor: var(--accent-gold);
	background-color: #fff;
	border-color: rgba(13, 43, 78, 0.2);
	margin-top: 0 !important;
	height: 100%;
	border-radius: 12px !important;
	padding: 2rem 1.75rem !important;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.expertise-card-custom:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(13, 43, 78, 0.12);
	border-color: var(--accent-gold);
}

/* About page expertise sections - override default spacing */
#surgical-expertise .expertise-card-custom,
#prostate-expertise .expertise-card-custom {
	padding: 1.5rem 1.25rem !important;
	border-color: rgba(13, 43, 78, 0.35);
}

#surgical-expertise .expertise-card-custom .fbox-content,
#prostate-expertise .expertise-card-custom .fbox-content {
	padding: 0;
}

#surgical-expertise .expertise-card-custom .fbox-content {
	text-align: left;
}

#prostate-expertise .expertise-card-custom .fbox-content {
	text-align: center;
}

#surgical-expertise .expertise-card-custom .fbox-icon,
#prostate-expertise .expertise-card-custom .fbox-icon {
	margin-bottom: 0.75rem !important;
}

#surgical-expertise .expertise-card-custom h3,
#prostate-expertise .expertise-card-custom h3 {
	margin-bottom: 8px;
}

#surgical-expertise .expertise-card-custom .fbox-content p,
#prostate-expertise .expertise-card-custom .fbox-content p {
	margin-top: 0;
}

#surgical-expertise .expertise-card-custom .expertise-list {
	margin-top: 8px;
}

.expertise-card-custom .fbox-icon {
	margin: 0 auto 1.25rem !important;
	position: relative;
	background: transparent;
}

.expertise-card-custom .fbox-icon i {
	color: #fff;
	font-size: 1.5rem;
	line-height: 4rem;
	background-color: var(--accent-gold) !important;
	border-radius: 50%;
	width: 4rem;
	height: 4rem;
	display: block;
	text-align: center;
}

/* Index page Areas of Special Expertise - simple card, no fbox classes */
#expertise .expertise-card-custom {
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 8px;
	padding: 40px 30px;
	box-shadow: 0 4px 24px rgba(13, 43, 78, 0.06);
	border: 1px solid rgba(13, 43, 78, 0.25);
	transition: all 0.3s ease;
	height: 100%;
	text-align: center;
}

#expertise .expertise-card-custom:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(13, 43, 78, 0.12);
	border-color: var(--accent-gold);
	background: rgba(255, 255, 255, 0.92);
}

#expertise .expertise-card-custom .card-icon {
	width: 60px;
	height: 60px;
	background: rgba(200, 168, 75, 0.12);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
}

#expertise .expertise-card-custom .card-icon i {
	font-size: 24px;
	color: var(--accent-gold);
}

#expertise .expertise-card-custom h3 {
	font-family: 'Playfair Display', serif;
	font-size: 22px;
	font-weight: 700;
	color: var(--primary-navy);
	margin-bottom: 12px;
}

#expertise .expertise-card-custom p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-body);
	margin-bottom: 0;
}

.expertise-card-custom h3 {
	font-family: 'Playfair Display', serif;
	font-size: 22px;
	font-weight: 700;
	color: var(--primary-navy);
	margin-bottom: 12px;
	text-align: center;
}

.expertise-card-custom p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-body);
	margin-bottom: 0;
}

/* Extra bottom padding utility */
.pb-7 {
	padding-bottom: 5rem !important;
}
.expertise-card-custom .expertise-list {
	text-align: left;
	margin: 14px 0 0;
}

.expertise-card-custom .expertise-list li {
	display: flex;
	align-items: flex-start;
	margin-bottom: 10px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--text-body);
}

.expertise-card-custom .expertise-list li:last-child {
	margin-bottom: 0;
}

.expertise-card-custom .expertise-list li i {
	color: var(--accent-gold);
	margin-top: 4px;
	margin-right: 10px;
	flex-shrink: 0;
	font-size: 14px;
}

/* Hospitals Section */
#hospitals {
	background: var(--bg-offwhite) !important;
}

/* Hospital Cards */
.hospital-card {
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 8px;
	padding: 36px 30px;
	box-shadow: 0 4px 24px rgba(13, 43, 78, 0.06);
	border: 1px solid rgba(13, 43, 78, 0.25);
	transition: all 0.3s ease;
	height: 100%;
	border-left: 4px solid var(--accent-gold);
}

.hospital-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(13, 43, 78, 0.12);
	background: rgba(255, 255, 255, 0.92);
	border-right-color: var(--accent-gold);
	border-top-color: var(--accent-gold);
	border-bottom-color: var(--accent-gold);
}

.hospital-card h3 {
	font-family: 'Playfair Display', serif;
	font-size: 22px;
	font-weight: 700;
	color: var(--primary-navy);
	margin-bottom: 8px;
}

.hospital-card .hospital-role {
	font-size: 14px;
	font-weight: 500;
	color: var(--accent-gold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 16px;
}

.hospital-card p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-body);
	margin-bottom: 0;
}

/* Academic Section */
.academic-section {
	background: var(--primary-navy);
	position: relative;
	overflow: hidden;
}

.academic-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: radial-gradient(circle at 10% 50%, rgba(200, 168, 75, 0.06) 0%, transparent 50%);
	pointer-events: none;
}

.academic-section h2 {
	color: #fff;
}

.academic-section p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 17px;
	line-height: 1.8;
}

.academic-section .academic-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 20px;
}

.academic-section .academic-item i {
	color: var(--accent-gold);
	font-size: 20px;
	margin-top: 2px;
	flex-shrink: 0;
}

.academic-section .academic-item span {
	color: rgba(255, 255, 255, 0.9);
	font-size: 16px;
	line-height: 1.6;
}

/* CTA Section */
.cta-section {
	background:
		radial-gradient(circle at 90% 0%, rgba(200, 168, 75, 0.12) 0%, transparent 60%),
		linear-gradient(135deg, var(--primary-navy) 0%, #163a5f 100%);
	position: relative;
	overflow: hidden;
}

.cta-section h2 {
	color: #fff;
	font-size: 36px;
}

.cta-section p {
	color: #F1F5F9;
	font-size: 17px;
}

/* Testimonials */
.testimonial-card {
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 8px;
	padding: 40px;
	box-shadow: 0 4px 24px rgba(13, 43, 78, 0.06);
	border: 1px solid rgba(13, 43, 78, 0.25);
	transition: all 0.3s ease;
}

.testimonial-card:hover {
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 8px 32px rgba(13, 43, 78, 0.1);
	border-color: var(--accent-gold);
}

.testimonial-card .testi-stars {
	color: var(--accent-gold);
	font-size: 14px;
	margin-bottom: 16px;
}

.testimonial-card p {
	font-size: 18px;
	line-height: 1.7;
	color: var(--text-charcoal);
	font-style: italic;
	margin-bottom: 24px;
}

.testimonial-card .testi-author {
	font-family: 'Playfair Display', serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--primary-navy);
	margin-bottom: 4px;
}

.testimonial-card .testi-role {
	font-size: 14px;
	color: var(--text-body);
}

.testi-toggle {
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--accent-gold);
	cursor: pointer;
}

.testi-toggle:hover {
	color: var(--primary-navy);
}

.testi-meta {
	font-size: 13px;
	color: var(--text-grey);
	margin-top: 4px;
}

/* Form result banners (success/error returned by FormHandler).
   Global on purpose - contact, appointment and home forms all use them. */
.form-alert {
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
	line-height: 1.6;
}

.form-alert.form-alert-success {
	background: #eaf7ee;
	border: 1px solid #b7e0c1;
	color: #1e6b3a;
}

.form-alert.form-alert-danger {
	background: #fdeeee;
	border: 1px solid #f5c2c2;
	color: #8f2b2b;
}

/* FAQ Section */
.faq-section {
	background: linear-gradient(180deg, #f8f6f2 0%, #ffffff 50%) !important;
}

.toggle {
	border-bottom: 1px solid rgba(13, 43, 78, 0.08);
	padding: 20px 0;
}

.toggle-header {
	display: flex;
	align-items: center;
	gap: 16px;
	cursor: pointer;
}

.toggle-title {
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	font-weight: 500;
	color: var(--primary-navy);
	flex: 1;
}

.toggle-icon i {
	color: var(--accent-gold);
	font-size: 18px;
}

.toggle-content {
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-body);
	padding-top: 12px;
	padding-left: 40px;
}

/* Override inline --text-grey in section intro descriptions */
.row.justify-content-center .col-lg-8.text-center p {
	color: var(--text-body) !important;
}

/* Exception: dark CTA bands match the same centered-column pattern, so
   without this the rule above forces dark body text onto navy (!important
   also beats inline styles). Higher specificity keeps light text legible
   here while leaving the intro override intact everywhere else. */
.cta-section .row.justify-content-center .col-lg-8.text-center p {
	color: #F1F5F9 !important;
}

/* Contact Section */
.contact-section {
	background: var(--bg-offwhite);
}

.contact-info-card {
	background: var(--primary-navy);
	border-radius: 8px;
	padding: 50px 40px;
	color: #fff;
	height: 100%;
}

.contact-info-card h3 {
	color: #fff;
	font-size: 28px;
	margin-bottom: 24px;
}

.contact-info-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 28px;
}

.contact-info-item i {
	color: var(--accent-gold);
	font-size: 20px;
	margin-top: 2px;
	flex-shrink: 0;
}

.contact-info-item h4 {
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 4px;
	font-family: 'DM Sans', sans-serif;
}

.contact-info-item p,
.contact-info-item a {
	color: #fff;
	font-size: 16px;
	margin-bottom: 0;
	font-family: 'DM Sans', sans-serif;
}

.contact-info-item a:hover {
	color: var(--accent-gold);
}

.contact-form-wrap {
	background: #fff;
	border-radius: 8px;
	padding: 50px 40px;
	box-shadow: 0 4px 24px rgba(13, 43, 78, 0.06);
	height: 100%;
}

.contact-form-wrap .form-control {
	background: var(--bg-offwhite);
	border: 1px solid rgba(13, 43, 78, 0.1);
	border-radius: 4px;
	padding: 14px 18px;
	font-size: 16px;
	color: var(--text-charcoal);
}

.contact-form-wrap .form-control:focus {
	border-color: var(--accent-gold);
	box-shadow: 0 0 0 3px rgba(200, 168, 75, 0.15);
}

/* Footer */
#footer {
	background: var(--primary-navy);
	color: rgba(255, 255, 255, 0.7);
	border-top: none;
	/* Override theme's `position: relative` (style.css). The footer
		does not need to be a positioned element; leaving it relative let it
		sit atop the CTA's lower edge in the stacking order, making the CTA
		appear tucked behind the footer. `static` keeps the footer in normal
		flow so the CTA renders in its true location. */
	position: static;
}

#footer h4 {
	color: #fff;
	font-family: 'Playfair Display', serif;
	font-size: 20px;
	margin-bottom: 24px;
}

#footer a {
	color: rgba(255, 255, 255, 0.7);
}

#footer a:hover {
	color: var(--accent-gold);
}

#footer .footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 30px;
	margin-top: 30px;
}

/* ---------------------------------------------------------------
   Shared Page Title Section
   Used by about.php, services.php, practice.php, contact.php.
   (Mirrors the block in about.css / services.css so pages that
   don't load those files still render a consistent title band.)
   --------------------------------------------------------------- */
.page-title-section {
    background: linear-gradient(135deg, #0a1628 0%, #132042 35%, #1a2d5a 65%, #162445 100%);
    padding: 32px 0 20px;
    color: #ffffff;
}

.page-title-section .breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0;
}

.page-title-section .breadcrumb-item {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.page-title-section .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.4);
}

.page-title-section .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
}

.page-title-section .breadcrumb-item a:hover {
    color: var(--accent-gold);
}

.page-title-section .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.55);
}

.page-title {
    font-family: "Playfair Display", serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
    background: none;
    padding: 0;
    border: none;
}

.page-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 700px;
    margin-bottom: 0;
}

.page-title-section .page-badge {
    background: linear-gradient(135deg, #e8d5a3 0%, #d4a843 100%);
    color: #0d2b4e;
    border-color: rgba(212, 168, 67, 0.6);
    box-shadow: 0 4px 18px rgba(212, 168, 67, 0.3);
}

.page-title-section .page-badge i {
    color: #0d2b4e;
}

.page-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(200,168,75,0.12) 0%, rgba(200,168,75,0.22) 100%);
    color: #a08830;
    padding: 10px 22px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid rgba(200, 168, 75, 0.35);
    box-shadow: 0 2px 8px rgba(200, 168, 75, 0.12);
}

@media (max-width: 767.98px) {
    .page-title {
        font-size: 2rem;
    }
}

/* ---------------------------------------------------------------
   FAQ Accordion (shared)
   NOTE: style.css (theme) targets the plain `.accordion-header`
   class with `margin: 0 -5px`, `padding: 0.75rem 0` and a dotted
   `border-top`, which made the FAQ headers stick out ~5px on the
   left/right and misalign with the accordion body. The header rule
   below explicitly resets those. Mirrored in services.css.
   --------------------------------------------------------------- */
.faq-accordion .accordion-item {
    margin-bottom: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.faq-accordion .accordion-header {
    background-color: rgba(248, 249, 250, 0.5);
    margin: 0;
    padding: 0;
    border-top: 0;
}

.faq-accordion .accordion-button {
    font-weight: 600;
    color: var(--primary-navy);
    padding: 1.25rem 1.5rem;
    text-align: left;
}

.faq-accordion .accordion-button:not(.collapsed) {
    background-color: var(--accent-gold);
    color: white;
}

.faq-accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.faq-accordion .accordion-button:not(.collapsed):after {
    transform: rotate(-180deg);
}

.faq-accordion .accordion-body {
    padding: 1.25rem 1.5rem;
    color: var(--text-body);
    line-height: 1.7;
}

.social-icon.si-small {
	width: 36px;
	height: 36px;
	font-size: 14px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	border-radius: 50%;
}

.social-icon.si-small:hover {
	background: var(--accent-gold);
	color: var(--primary-navy);
}

/* Hero height: fluid between a 600px floor and 900px cap, tracking
   90svh in between (viewport-relative, minus mobile browser chrome).
*/
.hero-section {
	min-height: clamp(600px, 90svh, 900px);
}

@supports not (height: 100svh) {
	.hero-section {
		min-height: clamp(600px, 90vh, 900px);
	}
}

/* Responsive */
@media (max-width: 991.98px) {
	.hero-section h1 {
		font-size: 40px;
	}
	.hero-image-wrap {
		min-height: 400px;
	}
	.section-title {
		font-size: 30px;
	}
}

@media (max-width: 767.98px) {
	.hero-section h1 {
		font-size: 32px;
	}
	.hero-section .hero-subtitle {
		font-size: 16px;
	}
	.about-cta-block {
		padding: 22px 20px;
	}
	.contact-info-card,
	.contact-form-wrap {
		padding: 30px 24px;
	}
}

/* Process Steps Icon Styling - Override default red theme */
.feature-box-border-horizontal .fbox-icon i,
.feature-box-border-horizontal .fbox-icon img {
	background-color: transparent !important;
	border-radius: 0 !important;
}

/* Process Steps */
.process-step-card {
	min-height: 100%;
	background: rgba(255, 255, 255, 0.78) !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(13, 43, 78, 0.25) !important;
}

.process-step-card p {
	color: var(--text-body) !important;
}

.process-step-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 32px rgba(13, 43, 78, 0.12);
	border-color: var(--accent-gold) !important;
	background: rgba(255, 255, 255, 0.92) !important;
}

.fbox-icon {
	transition: box-shadow 0.3s ease;
}

.process-step-card:hover .fbox-icon {
	box-shadow: 0 6px 20px rgba(200, 168, 75, 0.18);
}

/* Gallery */
.gallery-card {
	border: 1px solid rgba(13, 43, 78, 0.25);
}

.gallery-card .gallery-caption p {
	color: var(--text-body);
}

.gallery-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 16px 48px rgba(13, 43, 78, 0.15);
	border-color: var(--accent-gold);
}

.gallery-card:hover img {
	transform: scale(1.05);
}

/* Blog Section */
.blog-section {
	background: var(--bg-offwhite) !important;
}

/* Blog Card */
.blog-card {
	background: rgba(255, 255, 255, 0.78) !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-color: rgba(13, 43, 78, 0.25) !important;
}

.blog-card .blog-content {
	background: transparent !important;
}

.blog-card .blog-content p {
	color: var(--text-body) !important;
}

.blog-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 16px 48px rgba(13, 43, 78, 0.15);
	border-color: var(--accent-gold) !important;
	background: rgba(255, 255, 255, 0.92) !important;
}

.blog-card:hover .blog-image img {
	transform: scale(1.05);
}

.blog-card:hover .more-link {
	color: var(--primary-navy) !important;
}