/* ------------------------------------------------------------------
   Zacharie Pearson Painting & Decorating - site overrides
   Loaded last on every page. Put project tweaks here, not in the
   theme or skin files, so a template update doesn't wipe them.
   ------------------------------------------------------------------ */

/* Page header sits on --primary (#0C5C9C). The Porto template assumes a
   light primary and uses dark text there, which is unreadable on blue. */
.page-header.bg-primary h1,
.page-header.bg-primary .breadcrumb li,
.page-header.bg-primary .breadcrumb li a {
	color: #FFF !important;
}

.page-header.bg-primary .breadcrumb li a:hover {
	color: rgba(255, 255, 255, 0.75) !important;
}

/* Hero slide 1 also sits on --primary */
.hero-on-primary h1,
.hero-on-primary h4,
.hero-on-primary p {
	color: #FFF !important;
}

/* The page-header banner image is decorative and ends up only ~150px wide
   on a phone. Drop it below md and give the heading the full width. */
@media (max-width: 767px) {
	.page-header .col-4 {
		display: none;
	}

	.page-header .col-8 {
		width: 100%;
	}
}

/* Logo is 437x300 - hold its aspect ratio at every header size */
.header-logo img {
	width: auto;
	max-height: 62px;
}

@media (max-width: 991px) {
	.header-logo img {
		max-height: 52px;
	}
}

#offCanvasLogo img {
	max-width: 180px;
	height: auto;
}

/* The template's mobile menu button is disproportionately large next to
   the logo - bring it back to a normal tap target (still well over 44px). */
@media (max-width: 991px) {
	#header .header-btn-collapse-nav {
		padding: 0.65rem 0.85rem;
		font-size: 1.1rem;
		line-height: 1;
	}
}

/* ---------------------------- WhatsApp ---------------------------- */
.whatsapp-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1030;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	color: #FFF !important;
	font-size: 28px;
	line-height: 1;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, background 0.2s ease;
	text-decoration: none;
}

.whatsapp-float:hover,
.whatsapp-float:focus {
	background: #1FB855;
	color: #FFF !important;
	transform: scale(1.08);
}

@media (max-width: 575px) {
	.whatsapp-float {
		right: 14px;
		bottom: 14px;
		width: 50px;
		height: 50px;
		font-size: 25px;
	}
}

/* ------------------------- Service listings ------------------------ */
.service-card {
	display: block;
	height: 100%;
	padding: 0;
	overflow: hidden;
	background: #FFF;
	border-radius: var(--border-radius2x);
	box-shadow: 0 6px 24px rgba(10, 61, 107, 0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	text-decoration: none;
}

.service-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 34px rgba(10, 61, 107, 0.16);
}

.service-card img {
	width: 100%;
	height: 210px;
	object-fit: cover;
	display: block;
}

.service-card .service-card-body {
	padding: 1.5rem;
}

.service-card h3 {
	color: var(--tertiary);
	margin-bottom: 0.5rem;
}

.service-card p {
	color: #6d6d6d;
	margin-bottom: 0;
}

/* Keep the two-up images on service pages a consistent shape */
.service-media img {
	width: 100%;
	height: 320px;
	object-fit: cover;
	border-radius: var(--border-radius2x);
}

/* --------------------------- Gallery ------------------------------ */
.portfolio-item .thumb-info img {
	width: 100%;
	height: 280px;
	object-fit: cover;
}

/* ------------------------- Areas we cover -------------------------- */
.area-links a {
	color: var(--grey-1000);
	text-decoration: none;
}

.area-links a:hover {
	color: var(--primary);
}

/* --------------------------- Utilities ----------------------------- */
.bg-quaternary-soft {
	background-color: var(--quaternary);
}

.text-color-tertiary-dark {
	color: var(--tertiary) !important;
}