:root{
	--primary:#1F3C88; /* Navy */
	--mint:#8FE3CF;    /* Mint */
	--bg:#F4F6F8;      /* Light gray */
	--accent:#C9A227;  /* Gold accent */
	--dark-accent:#93643f; /* Dark gold */
	--dark:#2B2E34;    /* Dark slate */
	--max:1600px;    /* Max width for container */
	--nav-height:72px; /* default safe nav height */
	--font-heading: 'Fredoka', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	--font-body: 'Quicksand', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
body{font-family:var(--font-body);line-height:1.45;color:var(--dark);background:var(--bg);margin:0}
.site-header .navbar.fixed-top{box-shadow:0 6px 20px rgba(43,46,52,0.06)}

/* Reserve space for fixed navbar so content isn't hidden */
body{font-family:var(--font-body);line-height:1.45;color:var(--dark);background:var(--bg);margin:0;padding-top:var(--nav-height)}
.container{max-width:var(--max);margin:0 auto;padding:0rem}
.site-header{border-bottom:1px solid rgba(43,46,52,0.06);background:#fff}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1.5rem}
.header-inner{gap:1.25rem;display:flex;align-items:center;width:100%}
.brand{display:flex;align-items:center;gap:0.75rem;font-size:1.25rem;margin:0;color:var(--primary);text-decoration:none}
.logo{height:48px;width:auto;display:block}
.brand-text{font-weight:800;font-size:1.125rem}
.brand-text, h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);}
.nav{display:flex;align-items:center;gap:1rem}
.nav a{color:var(--dark);text-decoration:none;padding:0.5rem 0.75rem;border-radius:6px;font-size:1rem}
.nav a.cta{background:var(--accent);color:#fff;padding:0.65rem 1rem;border-radius:10px;text-decoration:none;font-weight:700}
.hero{height:100vh;min-height:520px;padding:0;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.35)),url("assets/image-1.png");background-size:cover;background-position:center center;color:#fff}
.hero .container{padding:3rem 1rem;text-align:center}
.hero h2{margin:0 0 1rem;font-size:3.2rem;line-height:1.02;text-shadow:0 4px 18px rgba(0,0,0,0.75);letter-spacing:-0.5px}
.hero p{font-size:1.25rem;line-height:1.45;margin:0 0 1.25rem;max-width:64ch;margin-left:auto;margin-right:auto;color:rgba(255,255,255,0.95)}
.hero-stats{margin-top:1.75rem}
.hero-stats .stat{background:rgba(255,255,255,0.08);padding:0.9rem 1.25rem;border-radius:12px;min-width:140px;backdrop-filter:blur(4px)}
.hero-stats .stat-value{font-size:1.6rem;font-weight:800;color:#fff}
.hero-stats .stat-label{font-size:0.95rem;color:rgba(255,255,255,0.95)}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:0.75rem  1.3rem;border-radius:12px;text-decoration:none;font-size:1.125rem;font-weight:700}
.price{margin:0.5rem 0 1rem;color:rgba(43,46,52,0.7)}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;padding:1.25rem 0}
.services ul{padding-left:1.125rem}
.site-footer{
	/* Dark, brand-aligned footer */
	background: var(--accent);
	color: #fff;
	padding:1.25rem 0;
	margin-top:2rem;
}

.site-footer .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:0 1rem}
.site-footer p{margin:0;font-size:0.95rem;opacity:0.95}
.site-footer a{color:var(--mint);font-weight:600;text-decoration:none}
.ite-footer a:hover,.site-footer a:hover{text-decoration:underline;opacity:1}

@media(max-width:719px){
	.site-footer .container{justify-content:center;text-align:center}
	.site-footer p{font-size:0.95rem}
}

/* Mobile-friendly overrides */
@media(max-width:719px){
	/* add comfortable horizontal padding for small screens */
	.container{padding:0 1rem}

	/* reduce hero height and scale typography for phones */
	.hero{min-height:60vh; background-position:top center}
	.hero h2{font-size:1.9rem}
	.hero p{font-size:1rem; max-width:44ch}
	.hero-stats .stat{min-width:100px;padding:0.6rem 0.9rem}

	/* slightly smaller CTAs on phones */
	.btn{padding:0.6rem 1rem;font-size:1rem}

	/* ensure nav overlays above content and has comfortable spacing */
	.nav{right:.5rem;left:auto;z-index:1050}
	.site-header .container{padding:0.5rem 1rem}

	/* reduce map height to avoid large vertical scroll on mobile */
	#map{height:220px}

	/* make testimonial cards slightly more compact */
	.testimonial{padding:0.85rem}
	.testimonial::before{font-size:34px;left:10px;top:6px}

	/* image overlay text should wrap earlier on small screens */
	.why-image .overlay-text{max-width:34ch;font-size:0.9rem}

	/* ensure read-more buttons are tappable and full-width */
	.read-more{padding:0.6rem;border-radius:10px}

	/* footer spacing tweaks */
	.site-footer .footer-top .container{padding-left:1rem;padding-right:1rem}
	.footer-bottom{flex-direction:column;gap:0.5rem;align-items:center}
}

/* Extra small screens (very small phones) */
@media(max-width:420px){
	.hero h2{font-size:1.6rem}
	.hero p{font-size:0.95rem}
	.brand-text{font-size:1rem}
	.logo{height:32px}
	.hero-stats .stat-value{font-size:1.2rem}
	.btn{padding:0.5rem 0.85rem}
}

/* Testimonials: make cards stack nicely on small screens */
@media(max-width:719px){
	.testimonials .row > [class*="col-"]{display:block;width:100%;}
	/* add comfortable outer and inner padding on small screens */
	.testimonials{padding:1.25rem 1rem}
	.testimonial{align-items:center;text-align:center;padding:1.25rem;margin-bottom:1.1rem}
	.testimonial blockquote{font-size:0.98rem;line-height:1.4}
	.testimonial .fw-bold{margin-top:0.6rem}
	.testimonial-avatar{width:84px;height:84px;margin-bottom:0.75rem;border-width:3px}
	.testimonial::before{display:none}
	.rating{justify-content:center}
}

/* Medium screens: ensure testimonials remain balanced */
@media(min-width:720px) and (max-width:991px){
	.testimonials .row > [class*="col-"]{display:flex}
	.testimonial{padding:1rem}
	.testimonial-avatar{width:64px;height:64px}
}

/* Targeted device-specific tweaks for 430x932 (common phone viewport) */
@media only screen and (min-width:428px) and (max-width:432px) and (min-height:920px) and (max-height:940px){
	/* Slightly reduce hero and tighten vertical spacing */
	.hero{min-height:55vh}
	.hero h2{font-size:2.1rem}
	.hero p{font-size:1.02rem}

	/* Navbar padding and brand scaling for this viewport */
	.site-header .container{padding:0.5rem 0.75rem}
	.brand-text{font-size:1.05rem}

	/* Map slightly taller here to make tappable */
	#map{height:240px}

	/* Testimonials: keep them stacked and comfortable for thumbs */
	.testimonials .row > [class*="col-"]{display:block;width:100%}
	.testimonial{padding:1rem;margin-bottom:1.1rem}
	.testimonial-avatar{width:88px;height:88px}

	/* Contact form: increase touch target and reduce horizontal gutters */
	.contact-page .card .card-body{padding:1rem}
	.contact-page .btn-lg{padding:0.8rem 1.25rem}

	/* Footer: slightly larger tap targets for links */
	.footer-links li{margin-bottom:0.65rem}
	.footer-bottom a{padding:6px 4px}
}
/* Contact page */
.contact-page{max-width:var(--max)}
/* Center the contact page heading and intro paragraph */
.contact-page > h2, .contact-page > p {text-align:center}
label{display:block;margin-top:0.75rem;font-weight:600;color:var(--dark)}
input[type=text],input[type=email],textarea{width:100%;padding:0.6rem;border:1px solid #e6e6e6;border-radius:6px;margin-top:0.25rem}
.btn{border:none;cursor:pointer}

/* Responsive tweaks */
@media(min-width:720px){.hero{min-height:100vh}.hero h2{font-size:3.6rem}.hero p{font-size:1.125rem} .row{padding:0 1rem}}

/* Mobile nav styles */
.nav-toggle{background:none;border:0;color:var(--dark);display:inline-flex;padding:0.45rem;align-items:center;justify-content:center;font-size:0}
.nav-toggle svg{display:block;width:28px;height:28px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Remove default border and focus ring for the mobile nav toggle */
#navToggle, .navbar-toggler{
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
}
#navToggle:focus, .navbar-toggler:focus, #navToggle:focus-visible, .navbar-toggler:focus-visible{
	outline: none !important;
	box-shadow: none !important;
}

@media(max-width:719px){
	.nav{position:absolute;top:60px;right:1rem;background:#fff;border:1px solid rgba(43,46,52,0.06);box-shadow:0 8px 24px rgba(43,46,52,0.06);flex-direction:column;padding:0.5rem;border-radius:8px;display:none;min-width:200px}
	.nav.open{display:flex}
	.nav a{padding:0.5rem 0.75rem}
	.nav .cta{margin-top:0.25rem}
	.header-inner{justify-content:space-between}

	/* smaller logo on mobile */
		.logo{height:36px}

	/* adjust nav height for mobile to match compact layout */
	:root{--nav-height:56px}
}

/* Accessibility */
a:focus,a:hover{opacity:0.95}

	@media(max-width:719px){
		/* Off-canvas sliding nav for small screens */
		.nav{
			position:fixed;
			top:0;
			right:0;
			bottom:0;
			width:280px;
			max-width:80vw;
			background:#fff;
			border-left:1px solid rgba(43,46,52,0.06);
			box-shadow:-10px 0 30px rgba(43,46,52,0.12);
			/* Much higher z-index to guarantee the panel sits above overlays */
			z-index:99999;
			flex-direction:column;
			padding:1rem;
			display:flex;
			transform:translateX(100%);
			transition:transform .28s ease;
			border-radius:0 8px 8px 0;
		}
		.nav.open{transform:translateX(0);pointer-events:auto}
		.nav:not(.open){pointer-events:none}
		.nav a{padding:0.6rem 0.75rem}

		/* Page overlay while nav is open */
		.nav-overlay{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,0.34);z-index:99990}
		body.nav-open{overflow:hidden}
	}

/* Sliding nav interior styling: header, close control, link layout */
@media(max-width:719px){
	.nav .nav-header{padding-bottom:0.5rem;border-bottom:1px solid rgba(43,46,52,0.04);}
	.nav .nav-header .navbar-brand{gap:0.5rem;align-items:center;color:var(--primary);text-decoration:none}
	.nav .nav-header .navbar-brand img{height:36px}
	.nav .nav-close{background:transparent;border:0;color:var(--dark);font-size:1.05rem;padding:0.25rem}

	.nav .navbar-nav{margin-top:0.75rem;display:flex;flex-direction:column;gap:0.25rem}
	.nav .nav-link{padding:0.85rem 0.75rem;border-radius:10px;color:var(--dark);font-weight:600}
	.nav .nav-link:focus,.nav .nav-link:hover{background:rgba(31,60,136,0.04);color:var(--primary);outline:none}

	/* Make CTA inside the nav full-width and prominent */
	.nav .btn-warning{width:100%;display:inline-flex;justify-content:center;padding:0.85rem;border-radius:10px;font-weight:800}

	/* Ensure links are easier to tap */
	.nav .nav-item{width:100%}
}
/* Testimonials */
.testimonials{margin:3rem auto;text-align:center}
.testimonials h2{margin-top:0}
.testimonials .muted{color:rgba(43,46,52,0.6);text-align:center;margin-top:0.25rem}

/* Make columns match height and let testimonial cards stretch */
.testimonials .row > [class*="col-"]{display:flex;align-items:stretch}
.testimonial{position:relative;background:#fff;border-radius:12px;padding:1.25rem;box-shadow:0 8px 24px rgba(43,46,52,0.04);border-left:6px solid var(--accent);transition:transform 180ms ease,box-shadow 180ms ease;display:flex;flex-direction:column}
.testimonial blockquote{margin:0 0 0.75rem;color:var(--dark);font-style:normal;font-size:1rem;line-height:1.4}
.testimonial .fw-bold{color:var(--primary);margin-top:auto}
.testimonial .text-muted{color:rgba(43,46,52,0.6)}

/* decorative large quote mark */
.testimonial::before{content:"“";position:absolute;left:14px;top:8px;font-size:48px;color:var(--mint);opacity:0.12}

.testimonial:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(43,46,52,0.08)}

@media(max-width:991px){
	.testimonial{padding:1rem}
	.testimonial::before{left:12px;top:6px;font-size:40px}
}

/* Avatar inside testimonial */
.testimonial-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 0.75rem;border:3px solid rgba(255,255,255,0.6)}
@media(max-width:719px){.testimonial-avatar{width:52px;height:52px;margin-bottom:0.5rem}}

/* Real Stories: center text and use larger avatar images */
.real-stories .testimonial{align-items:center;text-align:center}
.real-stories .testimonial .testimonial-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;margin:0 0 0.9rem;border:4px solid rgba(255,255,255,0.6)}
.real-stories .testimonial .fw-bold{margin-top:0}
@media(min-width:992px){.real-stories .testimonial .testimonial-avatar{width:120px;height:120px}}

/* Rating stars under avatar */
.rating{display:flex;gap:6px;justify-content:center;margin-bottom:0.5rem}
.rating .star{color:var(--accent);font-size:16px;line-height:1}
@media(max-width:719px){.rating .star{font-size:14px}}

/* Hero adjacent stats */
.stats{margin:2.5rem 0}
.stats-row{gap:1rem}
.stat{background:#fff;border-radius:12px;padding:0.85rem 1.25rem;min-width:120px;box-shadow:0 8px 24px rgba(43,46,52,0.04)}
.stat-value{font-size:1.4rem;font-weight:800;color:var(--primary)}
.stat-label{font-size:0.875rem;color:var(--dark);opacity:0.9}
.stat .star{color:var(--accent);font-size:1rem;margin-left:6px}
@media(max-width:719px){.stats{margin:1.5rem 0}.stat{min-width:100px;padding:0.6rem 0.9rem}}

/* Services section styling */
.services{margin:3rem auto;max-width:var(--max);background:transparent}
.services h2{margin-bottom:0.5rem;color:var(--primary);font-size:1.6rem;text-align:center}
.services p{margin-bottom:1rem;color:rgba(43,46,52,0.85);max-width:72ch;margin-left:auto;margin-right:auto;text-align:center}

/* visual for Why Choose area */
.services-visual{max-width:980px;margin-left:auto;margin-right:auto}
.services-visual-img{width:100%;max-width:980px;height:auto;border-radius:12px;object-fit:cover;box-shadow:0 14px 40px rgba(43,46,52,0.08)}
@media(min-width:992px){.services-visual-img{max-width:1100px}} 

/* Why-choose two-column layout */
.why-choose-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:center;margin-top:1rem;}
.why-image{display:flex;align-items:center;justify-content:center}
.why-image .services-visual-img{max-width:520px;border-radius:12px;border-width:3px}

/* Image overlay shown on hover with descriptive copy */
.why-image .image-wrap{position:relative;display:block;border-radius:12px;overflow:hidden;border:4px solid rgba(255,255,255,0.6)}
.why-image .image-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.25rem;background:rgba(11,20,40,0.6);color:#fff;border-radius:inherit;opacity:0;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease;text-align:center;z-index:2;cursor: pointer;}
.why-image .image-overlay::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--accent);border-bottom-left-radius:12px;border-bottom-right-radius:12px}
.why-image .overlay-title{margin:0 0 0.5rem;font-size:1.125rem;font-weight:800;text-align:center;width:100%}
.why-image .overlay-text{margin:0 auto;color:rgba(255,255,255,0.95);max-width:44ch;font-size:0.95rem;line-height:1.4}
.why-image .image-wrap:hover .image-overlay,.why-image .image-wrap:focus-within .image-overlay{opacity:1;transform:none}
.why-content{padding:0 0.25rem}
.why-content h3{margin-top:0;color:var(--primary);text-align:left}

/* reuse card-style for the why-list but keep content left-aligned */
.why-list{list-style:none;padding:0;margin:0;display:block;max-width:680px}
.services-why-list li{padding:1.5rem 1.5rem}
.why-list li{background:#fff;border-radius:10px;padding:1.5rem 1.5rem !important;display:flex;align-items:center !important;gap:0.75rem;box-shadow:0 18px 48px rgba(43,46,52,0.10);border-left:4px solid var(--accent);border:1px solid rgba(43,46,52,0.06);font-size:0.975rem;color:var(--dark);margin-bottom:0.75rem;min-height:64px;transition:transform 220ms ease,box-shadow 220ms ease}
.why-list li::before{content:"";flex:0 0 44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border-radius:8px;font-weight:700;font-size:1.05rem}

/* When using an inline Bootstrap Icon, hide the pseudo-icon and style the inline icon */
.why-list li.has-icon::before{display:none !important}
.why-list li.has-icon > .bi{
	flex:0 0 44px;
	width:44px;
	height:44px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:transparent;
	color:var(--accent);
	border:2px solid var(--accent);
	border-radius:8px;
	font-weight:700;
	font-size:1.05rem;
	margin-right:0.75rem;
	font-family: "bootstrap-icons";
	line-height:1;
	text-align:center;
}

/* Emoji badges per item for friendly icons (fallback to check if emoji unsupported) */
.why-list li:nth-child(1)::before{content:"✓"}
.why-list li:nth-child(2)::before{content:"✿"}
.why-list li:nth-child(3)::before{content:"☺"}
.why-list li:nth-child(4)::before{content:"⌚"}

/* Card-like container */
.why-choose-row{background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);padding:1.25rem;border-radius:14px;box-shadow:0 18px 40px rgba(43,46,52,0.06)}
.why-image .services-visual-img{max-width:460px;transform:translateY(-4px);display:block}
.why-content{padding:0 1.25rem}
.why-content h3{font-size:1.35rem}

@media(max-width:991px){
	.why-choose-row{grid-template-columns:1fr;gap:1rem}
	.why-image .services-visual-img{max-width:100%;height:auto}
	.why-content h3{text-align:center}
	.why-list{max-width:100%}
	.why-list li{padding:1rem}
	.why-list li::before{width:36px;height:36px}
/* Hover / focus state to make cards pop */
.why-list li:hover, .why-list li:focus-within{transform:translateY(-8px);box-shadow:0 30px 80px rgba(43,46,52,0.14)}
}

.services-list{counter-reset:services;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.services-list li{counter-increment:services;background:#fff;border-radius:14px;padding:1.25rem 1.25rem 1.25rem 96px;box-shadow:0 10px 30px rgba(43,46,52,0.04);position:relative;min-height:140px;display:flex;flex-direction:column;justify-content:flex-start;border-right:4px solid transparent;transition:transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease}
.services-list li::before{
	content:counter(services);
	position:absolute;
	left:20px;
	top:20px;
	background:transparent;
	color:var(--accent);
	border:2px solid var(--accent);
	font-weight:700;
	width:56px;
	height:56px;
	border-radius:12px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:1.125rem;
}
.services-list h3{margin:0 0 0.35rem 0;font-size:1.225rem;color:var(--dark)}
.services-list p{margin:0;color:var(--dark);opacity:0.9;text-align:left}
.services-list li:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(43,46,52,0.08);border-right:4px solid var(--accent)}

.services .mt-3{margin-top:0.75rem}

.services ul{padding-left:1.125rem;margin-top:0.75rem}
.services ul li{margin-bottom:0.5rem}
.services ul li::before{content:"•";color:var(--mint);display:inline-block;width:1rem;margin-left:-1rem;margin-right:0.5rem}

/* "Why Choose" list design: responsive grid cards with icon badges */
.services h3 + ul{list-style:none;padding:0;margin:1rem auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0.75rem;max-width:980px}
.services h3 + ul li{background:#fff;border-radius:10px;padding:0.9rem 1rem;display:flex;align-items:flex-start;gap:0.75rem;box-shadow:0 10px 30px rgba(43,46,52,0.04);border-left:4px solid rgba(143,227,207,0.35)}
.services h3 + ul li::before{content:"✓";flex:0 0 40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;border-radius:8px;font-weight:700;font-size:1rem}
.services h3 + ul li{font-size:0.975rem;color:var(--dark)}

/* Hide the duplicated brand inside the off-canvas nav on non-mobile (desktop/tablet) */
@media (min-width:720px) {
	/* nav-header is only needed for the mobile/off-canvas panel — hide it on larger viewports */
	.nav .nav-header { display: none !important; }
}

@media(max-width:719px){
	.services h3 + ul{grid-template-columns:1fr}
	.services h3 + ul li{padding:0.8rem}
	.services h3 + ul li::before{width:36px;height:36px;font-size:0.95rem}
}

/* Override: ensure `.why-list` displays as a single stacked column (not grid) */
.services .why-list{display:block !important;grid-template-columns:none !important;max-width:680px;margin:0}
.services .why-list li{width:100%;}

/* Ensure `.why-list` items use the accent color for the left border */
.why-list li{border-left:4px solid var(--accent) !important}

@media(min-width:992px){
	.services{padding:3rem 0rem}
	.services-list{grid-template-columns:repeat(2,minmax(300px,1fr))}
	.services-list li{padding:1.5rem 1.5rem 1.5rem 110px}
	.services-list li::before{width:72px;height:72px;left:24px;top:24px;border-radius:14px;font-size:1.25rem}
}

.real-stories{max-width:var(--max);margin:5rem auto;background:transparent}
/* Center heading and intro paragraph in Real Stories section */
.real-stories h2, .real-stories p {text-align:center}

/* Center Blog heading and intro paragraph */
.blog > h2, .blog > p {text-align:center}

/* Add larger vertical spacing for the blog section */
.blog{margin:5rem auto}
@media(min-width:992px){.blog{margin:5rem auto}}

/* Blog cards: remove default Bootstrap border so cards look cleaner */
.blog .card{
	border:none;
	box-shadow:0 12px 32px rgba(43,46,52,0.06);
	transition:transform .18s ease,box-shadow .18s ease;
}
.blog .card:hover{
	transform:translateY(-6px);
	box-shadow:0 20px 48px rgba(43,46,52,0.10);
}

/* Center Visit Our Location heading and intro paragraph */
.visit-location > h2, .visit-location > p {text-align:center}

/* Contact form card and spacing */
.contact-page .card{border-radius:12px;box-shadow:0 18px 40px rgba(43,46,52,0.06);background:#fff}
.contact-page .card .card-body{padding:1.25rem}
.contact-page .form-label{font-weight:600;color:var(--dark)}
.contact-page .form-control,.contact-page .form-select{border-radius:8px}
.contact-page .btn-lg{padding:0.75rem 1.5rem;border-radius:10px}
.contact-page .text-muted{color:rgba(43,46,52,0.65)}

/* Read More button on blog cards */
.read-more{font-weight:700;border-radius:10px;padding:0.3rem 0.7rem;transition:transform 140ms ease,box-shadow 140ms ease;background:transparent;border:1px solid var(--primary);color:var(--primary);text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.view-all-articles{font-weight:700;border-radius:10px;padding:0.5rem 1rem;transition:transform 140ms ease,box-shadow 140ms ease;background:transparent;border:1px solid var(--primary);color:var(--primary);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;margin-top:1.5rem}
.read-more:hover,.view-all-articles:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(31,60,136,0.08);background:transparent;border-color:var(--dark-accent);color:var(--dark)}
.card .card-body .read-more i{font-size:0.95rem}

/* Blog cards: center content and make read-more full width */
.blog .card .card-body{text-align:center}
.blog .card .card-body .read-more{display:block;width:100%;align-self:stretch}
.blog .card .card-body .read-more i{margin-left:0.5rem}

/* Map container styling for Leaflet */
#map{width:100%;height:300px;border-radius:8px;overflow:hidden;background:#eef7f3}

/* Add an accent left border to the contact card for visual emphasis */
.contact-card,.contact-map{border-left:6px solid var(--accent);padding-left:0.85rem;border-top:none;border-bottom: none;border-right: none;border-radius: 10px;}

.contact-card .contact-icon{display:inline-flex;align-items:center;justify-content:center;padding:0;margin-right:0.75rem;background:transparent;color:var(--primary);border:none;border-radius:8px;font-size:0.95rem;line-height:1}

/* Phone and email links styled as pill CTAs */
.contact-card a[href^="tel"], .contact-card a[href^="mailto"]{
	display:inline;
	padding:0;
	border-radius:0;
	background:transparent;
	color:var(--primary);
	font-weight:500;
	text-decoration:none;
	transition:color .12s ease;
}
.contact-card a[href^="tel"]:hover,
.contact-card a[href^="mailto"]:hover{
	text-decoration:underline;
}

.contact-card .contact-hours li,.contact-card .contact-access li{margin-bottom:0.5rem;display:flex;align-items:center}
.contact-card .contact-hours i{display:none} /* hide decorative clock icons — show colored text instead */
.contact-card .contact-hours strong{color:var(--primary);margin-right:0.45rem}
.contact-card .contact-access i{font-size:1rem}

/* Color headings and address/labels inside contact card to match icons */
.contact-card h3, .contact-card address, .contact-card strong, .contact-card .contact-access li, .contact-card .contact-hours li{color:var(--primary)}

/* Contact row design */
.contact-card .contact-row{padding:0.5rem 0;border-radius:8px;align-items:center}
.contact-card .contact-row + .contact-row{margin-top:0.25rem}
.contact-card .contact-row:hover{background:linear-gradient(90deg,rgba(201,162,39,0.05),rgba(201,162,39,0.03))}
.contact-card .contact-row .contact-icon{width:44px;height:44px;flex:0 0 44px;border-radius:10px;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.125rem;box-shadow:0 8px 18px rgba(43,46,52,0.06);margin-right:0.75rem}
.contact-card .contact-row h3{margin:0;font-size:1rem;color:var(--primary)}
.contact-card .contact-row address{margin:0;color:var(--dark);font-weight:500}
.contact-card .contact-row a{color:var(--primary);font-weight:600;text-decoration:none}
.contact-card .contact-row a:hover{text-decoration:underline}
/* Make contact-row links slightly lighter for visual balance */
.contact-card .contact-row a{font-weight:400}

/* Footer: multi-column layout, subtle accents and readable links */
.site-footer{background:linear-gradient(180deg,var(--accent),var(--dark-accent));color:#fff;padding:1.5rem 0;margin-top:2rem}
.site-footer .footer-top{padding-top:1.5rem;padding-bottom:1.5rem;max-width: var(--max);}
.site-footer .brand-text{color:#fff}
.site-footer .text-muted-ll{color:rgba(255,255,255,0.9);margin-top:0.5rem}
.footer-links{padding-left:0}
.footer-links li{margin-bottom:0.45rem}
.footer-links a{color:rgba(255,255,255,0.95);text-decoration:none;opacity:0.95;font-weight:600}
.footer-links a:hover{text-decoration:underline;color:#fff;opacity:1}
.site-footer .btn-outline-light{border-color:rgba(255,255,255,0.18);color:#fff}
.site-footer .btn-outline-light i{font-size:1rem}
.site-footer .btn-outline-light:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.35)}
.footer-bottom{border-top-color:rgba(255,255,255,0.08)}
.footer-bottom small{color:rgba(255,255,255,0.9)}
.footer-bottom a{color:rgba(255,255,255,0.9);text-decoration:none;margin-left:0.5rem}
.footer-bottom a:hover{text-decoration:underline;color:#fff}

@media(max-width:719px){
	.site-footer .footer-top .row > [class*="col-"]{text-align:center}
	.footer-bottom{flex-direction:column;gap:0.5rem;align-items:center}
	.footer-bottom .d-flex{justify-content:center}

	/* Ensure footer column contents are centered and stacked on small screens */
	.site-footer .footer-top .row > [class*="col-"] h5,
	.site-footer .footer-top .row > [class*="col-"] p,
	.site-footer .footer-top .row > [class*="col-"] .brand-text,
	.site-footer .footer-top .row > [class*="col-"] address,
	.site-footer .footer-top .row > [class*="col-"] .footer-links{ text-align:center; }

	.site-footer .footer-top .row > [class*="col-"] .footer-links{ display:block; }
	.site-footer .footer-top .row > [class*="col-"] .footer-links li{ display:block;margin:0.45rem 0 }
	.site-footer .footer-top .row > [class*="col-"] address{margin:0 auto;display:block;max-width:300px}
	.site-footer .footer-top .row > [class*="col-"] .mt-3.d-flex{justify-content:center}

	/* Ensure footer intro paragraph centers when constrained by max-width */
	.site-footer .footer-top .row > [class*="col-"] p{margin:0 auto;max-width:36ch}

	/* Center the brand block and its logo image on small screens — override Bootstrap utility */
	.site-footer .footer-top .row > [class*="col-"] .navbar-brand{
		display:flex !important;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		gap:0.25rem;
		text-align:center;
		margin:0 auto;
		padding:0;
	}
	.site-footer .footer-top .row > [class*="col-"] .navbar-brand .logo{
		margin:0;
		display:block;
		height:36px;
		margin-right:0 !important;
	}
	.site-footer .footer-top .row > [class*="col-"] .brand-text{display:block}
}

/* Ensure the footer-top uses regular block container so Bootstrap grid gutters apply correctly */
.site-footer .footer-top .container{display:block;max-width:100%;width:100%;padding-left:2rem;padding-right:2rem}
/* Keep footer-bottom container as flex for layout */
.site-footer .footer-bottom.container{display:flex;align-items:center;justify-content:space-between}

/* Improve horizontal spacing inside the footer columns */
@media(min-width:768px){
	.footer-top .col-md-4{
		padding-left:2rem;
		padding-right:2rem;
	}
	/* inner two-column list in Explore: add slight gutter so items breathe */
	.footer-top .col-md-4 .row > .col-6{padding-left:0.75rem;padding-right:0.75rem}
}

/* Ensure footer columns are evenly spaced and equal width on medium+ */
@media(min-width:768px){
	.footer-top .row{justify-content:space-between;align-items:flex-start}
	.footer-top .col-md-4{flex:0 0 33.333333%;max-width:33.333333%}
}

/* Cookie consent panel (bottom-left) */
.cookie-consent{
	position:fixed;
	left:1rem;
	bottom:1rem;
	z-index:1100;
	max-width:420px;
	background:#fff;
	color:var(--dark);
	border-radius:12px;
	box-shadow:0 18px 40px rgba(31,60,136,0.12);
	padding:0.85rem;
	display:grid;
	grid-template-columns:48px 1fr;
	gap:0.75rem;
	align-items:start;
	transition:transform .22s ease,opacity .22s ease;
}
.cookie-consent.hidden{transform:translateY(12px);opacity:0;pointer-events:none}
.cookie-consent .cookie-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:linear-gradient(180deg,var(--mint),rgba(143,227,207,0.25));flex-shrink:0}
.cookie-consent .cookie-icon i{font-size:1.25rem;color:#fff;line-height:1;display:inline-block}

/* Blog full-article reveal */
.full-article{display:none}
.full-article.open{display:block}

/* Card-level Read full article link — pill CTA */
.card .btn-link{
	display:inline-flex;
	align-items:center;
	gap:0.5rem;
	padding:0.5rem 0.85rem;
	border-radius:8px;
	background:var(--accent);
	color:#fff;
	border:1px solid var(--accent);
	font-weight:700;
	text-decoration:none;
	transition:background .14s ease,transform .12s ease,color .14s ease,border-color .14s ease;
}
.card .btn-link i{font-size:0.95rem}
.card .btn-link:hover{background:var(--dark-accent);color:#fff;border-color:var(--dark-accent);transform:translateY(-2px);text-decoration:none}
.card .btn-link:focus{outline:3px solid rgba(201,162,39,0.14);outline-offset:3px}
.cookie-consent .cookie-body{display:block}
.cookie-consent .cookie-title{font-weight:700;margin:0 0 0.25rem;color:var(--primary);font-size:1rem}
.cookie-consent .cookie-text{margin:0;font-size:0.95rem;color:rgba(43,46,52,0.85);line-height:1.25}
.cookie-consent .cookie-actions{display:flex;gap:0.5rem;margin-top:0.6rem}
.cookie-consent .btn-accept{background:var(--accent);border:none;color:#fff;padding:0.45rem 0.8rem;border-radius:8px;font-weight:700}
.cookie-consent .btn-dismiss{background:transparent;border:1px solid rgba(43,46,52,0.06);color:var(--dark);padding:0.35rem 0.6rem;border-radius:8px}

@media(max-width:520px){
	.cookie-consent{left:0.5rem;right:0.5rem;max-width:calc(100% - 1rem);padding:0.75rem}
}

@media(prefers-reduced-motion:reduce){
	.cookie-consent{transition:none}
}

/* Small utility for the Privacy link in the cookie panel */
.cookie-privacy-link{font-size:0.9rem;color:var(--primary);text-decoration:underline}
.cookie-privacy-link:focus{outline:2px solid rgba(31,60,136,0.14);outline-offset:3px}

@media(max-width:767px){
	.footer-top .col-md-4{padding-left:1rem;padding-right:1rem}
}




/* Real Stories: responsive padding and stacking on small screens */
@media(max-width:719px){
	.real-stories{padding:1.25rem 1rem}
	.real-stories .row > [class*="col-"]{display:block;width:100%}
	.real-stories .testimonial{padding:1.15rem;margin-bottom:1rem;text-align:center}
	.real-stories .testimonial-avatar{width:88px;height:88px;display:block;margin:0 auto 0.75rem}
	.real-stories h3{font-size:1.05rem;margin-top:0.5rem}
}

/* Remove left accent border on contact cards for small screens to improve layout */
@media(max-width:719px){
    .contact-card, .contact-map{border-left:none !important; padding-left:0.75rem}
}

/* Blog list header: center title and intro paragraph */
.blog-list h2,
.blog-list p{ text-align:center; margin-left:auto; margin-right:auto; }