h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5em !important;
    color: rgba(0,0,0,.85);
    font-weight: 500;
}

h4[data-v-3998d49f], h4[data-v-c646feda] {
    margin-bottom: 0 !important;
}

.nav-link.active {
	color: #fff !important;
	background-color: #ab2328 !important;
}

.delay-0 {
	transition-delay: 0s;
}

.delay-2 {
	transition-delay: .2s;
}

.delay-3 {
	transition-delay: .3s;
}

.delay-4 {
	transition-delay: .4s;
}

@media all and (max-width: 576px) {
	.client-icon {
		width: 33% !important;
	}
}

@media all and (min-width: 577px) {
	.client-icon {
		width: 20% !important;
	}
}

.accordion-button {
	color: rgba(0,0,0,.85) !important;
	background-color: #fafafa !important;
	padding: 12px 16px 12px 40px;
	
}

.accordion-button::after {
	position: absolute !important;
	left: 0.7rem;
    margin-left:0!important;
    margin-right:auto;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%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");
}

#pagination {
	--bs-pagination-border-width: 0px;
	--bs-pagination-active-bg: #fff;
	--bs-pagination-font-size: .8rem;
	max-width: 100%;
	flex-wrap: wrap;
}

#tablePaging {
	max-width: 100%;
}

#pagination a.page-link {
	color: rgba(0, 0, 0, 0.65) !important;
	margin-left: 0px;
}

#pagination a.page-link.active {
}

#pagination li.active a, #pagination li a:hover {
	color: #ab2328!important;
	border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
	border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important;
	border-radius: 10px !important;
}

#pagination li a {
	color: #ab2328!important;
	font-size: 14px;
	border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
	border-color: rgba(var(--bs-gray-400), var(--bs-border-opacity)) !important;
	border-radius: 10px !important;
	margin-right: 6px;
	margin-bottom: 6px;
}

.grecaptcha-badge {
	margin-bottom: 5rem !important;
}

@media (min-width: 993px) {
	
	.about-info h2[data-v-a6674bd6] {
	    font-size: 1.5em !important;
	}
}

figure {
	margin: 0em 40px
}
	
h4[data-v-65fe2eb1] {
    min-height: 42px;
}

@media (max-width: 770px) {

	.dashline_row3, .dashline_row4 {
		z-index: -1000;
	}
}

/*
 * Mobile page hero.
 *
 * The base theme lays the hero text over the banner with
 * "header .text-box { position: absolute; height: 100% }" on top of a
 * .banner-bg fixed at 350px below 900px. A longer heading (e.g.
 * /commercial-general-contractor, whose h1 wraps to three lines) then fills
 * that 350px edge to edge with no breathing room, and overflows it outright on
 * the narrowest phones.
 *
 * Below 900px, drive the hero's height from its content instead: the banner
 * image becomes a background layer and the text sits in normal flow with
 * vertical padding. min-height keeps short heroes looking like the original
 * banner. Selectors mirror the base file's own specificity (this file loads
 * after it, so equal specificity wins); both ids are the same hero component.
 */
@media (max-width: 900px) {

	header .banner-bg[data-v-9e4f27a2],
	header .banner-bg[data-v-2a97969c] {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	header .text-box[data-v-9e4f27a2],
	header .text-box[data-v-2a97969c] {
		position: relative;
		height: auto;
		min-height: 350px;
		padding: 2.5rem 0;
	}
}

/* Home page shopping centre wall (sites/jyconstruction.ca-jyconstruction/fragment/mall-wall.jsp): burgundy background, white
   titles and white logos (the logo files are already white on transparent, so they take no filter). .mw-wrap is as wide as the
   theme's .wrapper, like the sections around it. */
.mall-wall{background:#6f171b;padding:76px 0 64px;font-family:Montserrat,sans-serif}
.mall-wall .mw-wrap{width:85vw;max-width:1200px;margin:0 auto}
.mall-wall h2{color:#fff;font-size:28px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1.3;margin:0 0 10px}
.mall-wall .mw-sub{color:#f2c9cb;font-size:16px;font-weight:700;margin:0 0 12px}
.mall-wall .mw-desc{color:#e3c3c4;font-size:15px;line-height:1.75;max-width:860px;margin:0 0 36px}
.mall-wall .mw-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:center;padding:22px 0;border-top:1px solid rgba(255,255,255,.16)}
.mall-wall .mw-row.mw-more{align-items:start}
.mall-wall .mw-owner{display:flex;align-items:center;justify-content:flex-start}
.mall-wall .mw-owner img{display:block;width:auto;height:auto;max-width:150px;max-height:46px}
.mall-wall .mw-more .mw-owner{padding-top:22px}
.mall-wall h3{color:#f2c9cb;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;line-height:1.6;margin:0;max-width:160px}
.mall-wall ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px 18px}
.mall-wall ul li{margin:0;padding:0}
.mall-wall ul img{display:block;width:100%;height:auto;opacity:.92}
@media(max-width:767px){.mall-wall{padding:52px 0}.mall-wall h2{font-size:22px}.mall-wall .mw-row{grid-template-columns:1fr;gap:12px}.mall-wall ul{grid-template-columns:repeat(3,minmax(0,1fr))}.mall-wall .mw-owner img{max-width:130px;max-height:40px}.mall-wall .mw-more .mw-owner{padding-top:0}}

/* Blog sidebar "Contact Us" heading (fragment/contact-sidebar.jsp): an h2 since 2026-10-27 so the post title is the page's only h1;
   these are the values the base stylesheet gave it as .contact_wrap h1. */
.contact_wrap h2.contact_title[data-v-50d54d28]{font-size:20px;font-weight:700;color:#ab2328;text-align:center}

/* Award page banner (/award, /zh/award): one h1 holding two lines. The first line is fs-24 and keeps the .5em gap the separate h1
   had; the h1 itself is the second line's size - 16px on phones and 24px from 768px in English (the old fs-16 / fs-24 pair), fs-30
   in Chinese - so its .5em bottom margin is also what the old last h1 had. */
h1.award-title span{display:block}
h1.award-title .award-title-1{margin-bottom:.5em}
header h1.award-title-en{font-size:16px}
@media(min-width:768px){header h1.award-title-en{font-size:24px}}