/* =========================================================
   McGuire Contracting Co., LLC - site-specific overrides
   Brand red: #841C0F   Dark: #222   Light grey: #f5f5f5
   ========================================================= */

/* ---- Header: red angled block behind the logo (like the original template) ---- */
.header { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
.header:after {
	display: block;
	width: calc(50% - 170px);
	margin-left: 0;
	background: #841C0F;
}
.header:before {
	display: block;
	left: calc(50% - 170px);
	margin-left: -30px;
	width: 60px;
	background: #841C0F;
	transform: skew(-23deg);
}
.logo a { padding: 26px 0; }
.logo img {
	max-height: 66px;
	width: auto;
	filter: brightness(0) invert(1);   /* renders the logo white on the red block */
}
.menu-bg .logo a { padding: 12px 0; }
.menu-bg .logo img { max-height: 50px; }
.navigation > ul > li > a:hover { color: #841C0F; }
.navigation > ul > li.nav-phone > a { color: #841C0F; font-weight: 700; }
.navigation > ul > li.nav-phone > a i { margin-right: 6px; }
.main-banner { margin-top: 118px; }

@media (min-width: 768px) {
	.navigation > ul > li > a { padding: 48px 14px; font-size: 13px; }
	.menu-bg .navigation > ul > li > a { padding: 26px 14px; }
	.navigation > ul > li.nav-phone > a { font-size: 14px; padding-right: 0; }
}
@media (min-width: 992px) and (max-width: 1199px) {
	.navigation > ul > li > a { padding-left: 9px; padding-right: 9px; }
	.navigation > ul > li.nav-phone > a { font-size: 13px; }
	.header:after { width: calc(50% - 90px); }
	.header:before { left: calc(50% - 90px); }
}
@media (min-width: 768px) and (max-width: 991px) {
	.logo img { max-height: 50px; }
	.menu-bg .logo img { max-height: 42px; }
	.navigation > ul > li > a { font-size: 12px; padding-left: 8px; padding-right: 8px; }
	.navigation > ul > li.nav-phone { display: none; }
	.header:after { width: calc(50% - 80px); }
	.header:before { left: calc(50% - 80px); }
}

/* ---- Mobile header ---- */
@media (max-width: 767px) {
	.header { background: #841C0F; }
	.header .nav-wrap { position: relative; }
	.header .row > div { position: static; }
	.logo a { padding: 18px 0 !important; }
	.logo img { max-height: 50px; }
	.menu { top: 50%; margin-top: -15px; right: 20px; }
	.main-banner { margin-top: 86px; }
	.navigation {
		top: 100%;
		left: 0;
		width: 100%;
		background: #6a1509;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
	}
	.navigation > ul > li > a { padding: 14px 24px; font-size: 13px; color: #fff; }
	.navigation ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
	.navigation ul li:last-child { border-bottom: 0; }
	.navigation ul li.nav-phone i { position: static; font-size: 13px; }
	.navigation > ul > li.nav-phone > a { color: #fff; font-weight: 700; }
}

/* ---- Hero slider (Owl Carousel) ---- */
.hero-slider .hero-slide {
	position: relative;
	min-height: 640px;
	background-size: cover;
	background-position: center center;
	display: flex;
	align-items: center;
}
.hero-slider .hero-overlay {
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	background: linear-gradient(90deg, rgba(20, 8, 5, 0.86) 0%, rgba(20, 8, 5, 0.62) 55%, rgba(20, 8, 5, 0.35) 100%);
}
.hero-slider .container { position: relative; z-index: 2; }
.hero-slider .banner-text { max-width: 680px; padding: 40px 0; }
.main-banner .banner-text span { color: #f1b9ae; }
.main-banner .banner-text h2, .main-banner .banner-text h2 span { color: #fff; font-size: 48px; }
.main-banner .banner-text p { font-size: 16px; }
.hero-slider .banner-text .btn-text {
	display: inline-block;
	background: #841C0F;
	margin: 10px 10px 0 0;
	line-height: 50px;
	padding: 0 28px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	transition: all 0.25s ease;
}
.hero-slider .banner-text .btn-text:hover { background: #fff; color: #841C0F; border-color: #fff; }
.hero-slider .banner-text .btn-text.btn-outline { background: transparent; border-color: #fff; }
.hero-slider .banner-text .btn-text.btn-outline:hover { background: #fff; color: #841C0F; }
.hero-slider .owl-controls { position: absolute; bottom: 26px; left: 0; width: 100%; z-index: 3; }
.hero-slider .owl-dots { text-align: center; }
.hero-slider .owl-dots .owl-dot {
	display: inline-block;
	width: 30px; height: 4px;
	margin: 0 4px;
	background: rgba(255, 255, 255, 0.45);
	transition: background 0.25s ease;
}
.hero-slider .owl-dots .owl-dot.active { background: #841C0F; }

/* ---- About ---- */
.about-left p { text-transform: none; }
.about-photo { border: 6px solid #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); }

/* ---- Services ---- */
.maine_box .items_picher img { height: 250px; object-fit: cover; }
.maine_box .event_detail i { font-size: 34px; }
.box_detail .datail_show a { color: #ffd6cf !important; font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; }
.box_detail .datail_show a:hover { color: #fff !important; text-decoration: underline; }

/* ---- Credentials band ---- */
.fact-counter-wrapper { background-image: url(../images/mcguire/hero/hero-concrete-slab.jpg); background-position: center 40%; }
.fact-counter-wrapper:before { background-color: rgba(132, 28, 15, 0.01); .fact-counter-wrapper:after { display: none; } }
@media (max-width: 991px) { .fact-counter-wrapper { background-attachment: scroll; } }
.single-fact .icon-boxed { color: #fff; }
.single-fact span { color: #fff !important; }
.single-fact p { color: #ffd6cf !important; font-weight: 600; letter-spacing: 0.5px; }

/* ---- Projects ---- */
.picher_doc img { height: 290px; object-fit: cover; }
.picher_doc .inner_text .btn-text { background: #841C0F; border-color: #841C0F; color: #fff; }
.picher_doc .inner_text .btn-text:hover { background: #fff; border-color: #fff; color: #841C0F; }

/* ---- Contact / quote ---- */
.quote-section { background: #841C0F; }
.quote-section .sec_hedding h2, .quote-section .sec_hedding h2 span, .quote-section p { color: #fff; }
.quote-section .b-line { background: #fff; }
.quote-section .call-now { font-size: 44px; font-weight: 700; line-height: 1.2; margin: 20px 0 8px; }
.quote-section .call-now a { color: #fff; text-decoration: none; }
.quote-section .call-now a:hover { color: #f1b9ae; }
.quote-form .form-full { background: #fff; border: 1px solid #fff; }
.quote-form .sent-but { background: #222; border-color: #222; cursor: pointer; }
.quote-form .sent-but:hover { background: #fff; color: #841C0F; border-color: #fff; }

/* ---- Footer ---- */
.footer address { margin-bottom: 8px; }
.footer .footer-247 { color: #fff; font-weight: 600; }
.footer .footer-license { font-size: 13px; color: #bbb; }

/* ---- Responsive (content) ---- */
@media (max-width: 991px) {
	.hero-slider .hero-slide { min-height: 540px; }
	.main-banner .banner-text h2, .main-banner .banner-text h2 span { font-size: 36px; }
}
@media (max-width: 767px) {
	.hero-slider .hero-slide { min-height: 480px; }
	.hero-slider .banner-text { padding-bottom: 80px; }
	.hero-slider .banner-text .btn-text { line-height: 46px; padding: 0 22px; }
	.main-banner .banner-text h2, .main-banner .banner-text h2 span { font-size: 28px; }
	.main-banner .banner-text p { font-size: 15px; line-height: 1.6; }
	.quote-section .call-now { font-size: 30px; }
}