/*!
Theme Name: Prime Roofing Services
Theme URI: https://www.webnotick.com/products/free-prime-roofing-services-theme
Author: Webnotick
Author URI: https://www.webnotick.com/
Description: Prime Roofing Services is a clean, responsive WordPress theme designed for roofing contractors, construction companies, and home improvement businesses. It provides a straightforward layout to present your services and projects professionally, featuring basic customization via the WordPress Customizer.
Version: 1.0.6
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: prime-roofing-services
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, rtl-language-support

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Prime Roofing Services is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

@font-face {
	font-family: 'Manrope Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Manrope Regular'), url('assets/fonts/manrope-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Manrope Bold';
	font-style: normal;
	font-weight: normal;
	src: local('Manrope Bold'), url('assets/fonts/manrope-bold.woff2') format('woff2');
}

@font-face {
	font-family: 'Work Sans Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Work Sans Regular'), url('assets/fonts/work-sans-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Work Sans Bold';
	font-style: normal;
	font-weight: normal;
	src: local('Work Sans Bold'), url('assets/fonts/work-sans-bold.woff2') format('woff2');
}

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body,
html {
	margin: 0;
	overflow-x: hidden;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

body.admin-bar .site-header {
	margin-top: 32px;
}

/* Grouping content
	========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: 'Work Sans Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: underline;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li>ul,
li>ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #000;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background-color: #a85f3a;
	color: #000;
	font-family: 'Work Sans Regular', sans-serif;
	height: 35px;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	width: auto;
}

.main-navigation ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
	display: block;
	background-color: #fff;
}

.main-navigation ul ul li:hover {
	background-color: #a85f3a;
}

.main-navigation ul ul li:hover a {
	color: #fff;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover>ul,
.main-navigation ul ul li.focus>ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover>ul,
.main-navigation ul li.focus>ul {
	left: auto;
}

.main-navigation li {
	position: relative;
	padding: 0 15px;
}

.main-navigation a {
	display: block;
	text-decoration: underline;
	padding: 10px;
	font-family: "Manrope Regular";
	color: #000;
	font-size: 16px;
	letter-spacing: 0.5px;
}

/* Submenu icon for items with children */
.main-navigation .submenu-icon {
	margin-left: 6px;
	font-size: 0.65em;
	vertical-align: middle;
	opacity: 0.85;
	transition: transform 0.2s ease;
}

.main-navigation li:hover>a .submenu-icon,
.main-navigation li.focus>a .submenu-icon {
	transform: rotate(180deg);
}

.main-navigation ul ul a .submenu-icon {
	opacity: 0.7;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: none;
}

.roofing-hero-slider{
	margin-top: 8%;
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
	font-family: 'Work Sans Regular';
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: underline;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.site-title a {
	font-size: 2rem !important;
}

.alignleft {
	float: left;
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {
	float: right;
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* .site-header {
	padding: 15px 0;
} */

.header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.nav-div {
	margin: 0 auto;
}

.header-nav-call {
	display: flex;
	align-items: center;
	gap: 10px;
}

.header-nav-icon i {
	font-size: 22px;
	/* adjust if needed */
	display: flex;
	color: #a85f3a;
}

.header-nav-text p {
	margin: 0;
	line-height: 1.2;
	/* keeps the two lines compact */
}

.header-nav-text .call-text {
	color: #7A7A7A;
	font-family: 'Work Sans Regular';
	font-size: 16px;
}

.header-nav-text p {
	color: #000;
	font-family: 'Work Sans Regular';
	font-size: 20px;
}

.custom-logo-link img {
	padding-top: 5px;
	height: 60px;
	width: auto;
}

/* ////////////////////////////////////Post/////////////////////// */
.post-container {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
	padding: 15px;
}

.post-container h2 a {
	color: #000;
	font-family: "Manrope Regular";
	word-wrap: break-word;
}

.post-container li,
.search-container p,
.page-content p {
	font-family: 'Work Sans Regular';
}

.post-container .entry-meta span {
	font-size: 12px;
	color: #a85f3a;
	font-family: sans-serif;
	padding-right: 25px;
	font-weight: 800;
}

.post-container .entry-meta span a {
	font-size: 14px;
	color: #a85f3a;
	font-family: sans-serif;
	padding-left: 5px;
	font-weight: 800;
}


/* /////////////////////// Sidebar (Design Match) ////////////////////////// */
.widget-area {
	display: flex;
	flex-direction: column;
}

.widget-area ul{
	margin: 0;
}

.widget-area ul li{
	padding: 5px 0px;
}

.widget-area .widget,
.default-sidebar-card,
.sidebar-card {
	background-color: #F8F6F0;
	border: 1px solid #EAE5DB;
	border-radius: 4px;
	padding: 24px 22px;
	margin-bottom: 24px;
	box-shadow: none;
	box-sizing: border-box;
}

.widget-area .widget:last-child,
.default-sidebar-card:last-child {
	margin-bottom: 0;
}

/* --- Search Widget --- */
.widget-area .widget_search,
.default-sidebar-card.widget_search {
	padding: 20px 22px;
}

.sidebar-search-box,
.widget-area .widget_search .search-form,
.widget-area .wp-block-search__inside-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	background: #ffffff;
	border: 1px solid #DCD5C9;
	border-radius: 3px;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-search-box:focus-within,
.widget-area .widget_search .search-form:focus-within,
.widget-area .wp-block-search__inside-wrapper:focus-within {
	border-color: #a85f3a;
	box-shadow: 0 0 0 1px #a85f3a;
}

.sidebar-search-box .search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: #6d6254;
	font-size: 13px;
	pointer-events: none;
	z-index: 2;
}

.sidebar-search-box .sidebar-search-field,
.widget-area .widget_search .search-field,
.widget-area .wp-block-search__input {
	width: 100%;
	height: 42px;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 0 14px 0 38px !important;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #1a1a1a;
	margin: 0 !important;
	line-height: 42px;
}

.sidebar-search-box .sidebar-search-field::placeholder,
.widget-area .widget_search .search-field::placeholder,
.widget-area .wp-block-search__input::placeholder {
	color: #9c9387;
	font-family: 'Inter', sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	opacity: 1;
}

.widget-area .wp-block-search__button {
	display: none;
}

.widget-area .wp-block-search__label {
	display: none;
}

/* --- Widget Title --- */
.widget-area .widget-title,
.widget-area .widget_block h2,
.default-sidebar-card .widget-title {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 800;
	color: #a85f3a;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 18px;
	padding: 0;
	border: none;
}

.widget-area .widget_block h2::after {
	content: none !important;
}

/* --- Categories & Archives List --- */
.sidebar-item-list,
.widget-area .widget_categories ul,
.widget-area .widget_archive ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
}

.sidebar-item-list li,
.widget-area .widget_categories ul li,
.widget-area .widget_archive ul li {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	text-indent: 0 !important;
	border-bottom: 1px solid #EAE5DB;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.widget-area .widget_categories ul.children {
	box-sizing: border-box;
	flex: 0 0 100%;
	width: 100%;
	padding-left: 16px !important;
}

.sidebar-item-list li::before,
.widget-area .widget_categories ul li::before,
.widget-area .widget_archive ul li::before {
	content: none !important;
}

.sidebar-item-list li:last-child,
.widget-area .widget_categories ul li:last-child,
.widget-area .widget_archive ul li:last-child {
	border-bottom: none;
}

.sidebar-item-link,
.widget-area .widget_categories ul li a,
.widget-area .widget_archive ul li a {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 10px 0 !important;
	font-family: 'Inter', sans-serif;
	text-decoration: none;
	color: #1a1a1a !important;
	transition: color 0.2s ease;
	width: fit-content;
}

.sidebar-item-left {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
}

.sidebar-item-icon {
	color: #a85f3a;
	font-size: 15px;
	width: 20px;
	text-align: center;
	flex-shrink: 0;
}

.sidebar-item-title {
	font-family: 'Inter', sans-serif;
	font-size: 13.5px;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.3;
}

.sidebar-item-count,
.widget-area .widget_categories ul li .count,
.widget-area .widget_archive ul li .count {
	font-family: 'Inter', sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	color: #8c8275;
	margin-left: 12px;
	flex-shrink: 0;
}

.sidebar-item-link:hover,
.sidebar-item-link:hover .sidebar-item-title,
.widget-area .widget_categories ul li a:hover,
.widget-area .widget_archive ul li a:hover {
	color: #a85f3a !important;
}

.sidebar-item-link:hover .sidebar-item-icon {
	color: #a85f3a;
}

/* --- Recent Posts --- */
.sidebar-recent-posts {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}

.sidebar-recent-post-item {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 13px 0;
	border-bottom: 1px solid #EAE5DB;
}

.sidebar-recent-post-item:first-child {
	padding-top: 0;
}

.sidebar-recent-post-item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.sidebar-post-thumb {
	width: 62px;
	height: 52px;
	flex-shrink: 0;
	border-radius: 3px;
	overflow: hidden;
	display: block;
	border: 1px solid #E0DAD0;
	background-color: #eee;
}

.sidebar-post-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.sidebar-recent-post-item:hover .sidebar-post-thumb img {
	transform: scale(1.06);
}

.sidebar-post-info {
	flex: 1;
	min-width: 0;
}

.sidebar-post-title {
	margin: 0 0 5px 0;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sidebar-post-title a {
	color: #1a1a1a !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.sidebar-post-title a:hover {
	color: #a85f3a !important;
}

.sidebar-post-date {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 11.5px;
	color: #8c8275;
	font-weight: 500;
	line-height: 1;
}

/* ///////////////////////////Single ////////////////////////////// */

.single .post-container .entry-content p {
	color: #000;
}

.single h1 {
	font-size: 28px;
}

/* //////////////////////////////// archive /////////////////////////// */
.archive .page-header h1 {
	font-size: 24px;
}

/* /////////////////////////////////////// Search ///////////////////// */
.search .page-header h1 {
	font-size: 24px;
	font-family: "Manrope Regular";
}

.search .search-container h2 {
	font-size: 28px;
}

.search .entry-title a {
	color: #000;
	font-family: "Manrope Regular";
}

.search .search-container {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
	padding: 30px;
}

.search .search-container .entry-meta a {
	color: #a85f3a;
	font-family: 'Manrope Regular', sans-serif;
}

/* ////////////////////////////// footer //////////////////////// */

footer .site-info {
	padding: 20px;
	background-color: #000;
	justify-content: center;
	display: flex;
}

footer .site-info a {
	color: #fff;
	padding-right: 10px;
}

footer .site-info p {
	color: #fff;
}

/* Custom Post Card Design */
.post-container.custom-post-card {
	box-shadow: none;
	padding: 0 0 40px 0;
	background: transparent;
	margin-bottom: 40px;
	border-bottom: 1px solid #E5E5E5;
}

.custom-meta {
	font-family: sans-serif;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 15px;
	letter-spacing: 0.5px;
}

.custom-meta .post-cat {
	color: #a85f3a;
}

.custom-meta .meta-sep {
	color: #7A7A7A;
	margin: 0 8px;
}

.custom-meta .post-date {
	color: #7A7A7A;
}

.post-container.custom-post-card .entry-title {
	font-family: 'Manrope Regular';
	text-transform: uppercase;
	font-size: 40px;
	line-height: 1.1;
	margin-bottom: 15px;
}

.post-container.custom-post-card .entry-title a {
	color: #000;
	text-decoration: none;
	word-wrap: break-word;
	font-family: 'Manrope Regular';
	text-decoration: underline;
}

.post-container.custom-post-card .entry-content p {
	color: #404040;
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 25px;
	font-family: 'Work Sans Regular';
	/* opacity: 0.7; */
}

.read-more-link {
	display: inline-flex;
	align-items: center;
	font-family: sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #000;
	text-transform: uppercase;
	text-decoration: none;
}

.read-more-link .arrow {
	color: #a85f3a;
	margin-left: 10px;
	font-size: 18px;
	font-weight: bolder;
}

.main-navigation ul ul li:hover>ul,
.main-navigation ul ul li.focus>ul {
	display: block;
	left: 13rem;
	top: .5rem;
}

.main-navigation ul ul li a {
	color: #000 !important;
}

#masthead {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
	background-color: #ffffff;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.site-branding .custom-logo {
	max-height: 55px;
	width: auto;
	display: block;
}

.nsc-slider {
	position: relative;
	width: 100%;
	min-height: 600px;
	background: #f4f3ef;
	overflow: hidden;
	font-family: sans-serif;
}

.nsc-slider-inner {
	position: relative;
	width: 100%;
	height: 600px;
	margin: 0 auto;
}

/* Watermark N in Background */
.nsc-watermark {
	position: absolute;
	left: 42%;
	top: 52%;
	transform: translate(-50%, -50%);
	font-family: sans-serif;
	font-size: 580px;
	font-weight: 900;
	color: rgba(0, 0, 0, 0.035);
	line-height: 1;
	user-select: none;
	pointer-events: none;
	z-index: 1;
}

.nsc-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 2;
}

.nsc-slide.active {
	display: flex !important;
	align-items: center;
}

/* Left Content Column */
.nsc-slide-content {
	position: relative;
	z-index: 10;
	width: 48%;
	padding-left: 8%;
	padding-top: 50px;
}

.nsc-location {
	display: block;
	font-family: monospace;
	font-size: 13px;
	letter-spacing: 2px;
	color: #7b7b75;
	margin-bottom: 24px;
	font-weight: 600;
	text-transform: uppercase;
}

.nsc-slide-content h1 {
	font-family: sans-serif;
	font-size: 105px;
	line-height: 0.88;
	font-weight: 900;
	color: #0f0f0f;
	text-transform: uppercase;
	margin: 0 0 20px 0;
	letter-spacing: -2px;
}

.nsc-slide-content h1 span.nsc-highlight {
	color: #c59b27;
	display: inline-block;
}

.nsc-divider {
	width: 40px;
	height: 2px;
	background: #0f0f0f;
	margin-bottom: 22px;
}

.nsc-description {
	color: #666660;
	font-size: 15px;
	line-height: 1.55;
	max-width: 260px;
	margin-bottom: 30px;
	font-weight: 400;
}

.nsc-discover {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	color: #0f0f0f;
	text-decoration: none;
	font-family: sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: all 0.3s ease;
}

.nsc-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1.5px solid #0f0f0f;
	border-radius: 50%;
	font-size: 18px;
	transition: all 0.3s ease;
}

.nsc-discover:hover {
	color: #0f0f0f;
}

.nsc-discover:hover .nsc-arrow {
	background: #0f0f0f;
	color: #c59b27;
	transform: translateX(4px);
}

/* Right Visual Wrapper */
.nsc-visual-wrapper {
	position: absolute;
	top: 0;
	right: 0;
	width: 58%;
	height: 100%;
	z-index: 3;
}

/* B&W Stadium Polygon Mask */
.nsc-stadium-polygon {
	position: absolute;
	top: 15px;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	/* clip-path: polygon(42% 0%, 100% 0%, 100% 100%, 62% 100%, 98% 48%, 50% 43%, 78% 16%); */
	clip-path: polygon(50% 6%, 66% 6%, 51% 37%, 93% 26%, 70% 100%, 5% 100%);
	overflow: hidden;
	background: #0d0d0d;
}

.nsc-stadium-polygon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%) brightness(0.65) contrast(1.35);
}

.nsc-green-slash {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: #c59b27;
	/* clip-path: polygon(39% 0%, 100% 0%, 100% 100%, 58% 100%, 95% 48%, 46% 43%, 78% 16%); */
	clip-path: polygon(71% 44%, 94% 48%, 78% 100%, 46% 99%);
}

/* Player Cutout Layer */
.nsc-player-container {
	position: absolute;
	top: 37px;
	right: auto;
	left: -20%;
	width: 71%;
	height: 100%;
	z-index: 5;
	display: flex;
	/* align-items: flex-end; */
	/* justify-content: center; */
	pointer-events: none;
}

.nsc-player-img {
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.35));
	height: 80%;
	position: relative;
	top: 14%;
}

/* Bottom Right Legacy Box */
.nsc-legacy-box {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 300px;
	background: #0d0d0d;
	color: #ffffff;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 24px;
	border-top-left-radius: 4px;
}

.nsc-trophy-ring {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	border: 1.5px solid #c59b27;
	border-radius: 50%;
	color: #ffffff;
	font-size: 18px;
}

.nsc-legacy-text span {
	display: block;
	font-family: sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: #ffffff;
	text-transform: uppercase;
	margin-bottom: 2px;
}

.nsc-legacy-text p {
	font-size: 12px;
	color: #888880;
	margin: 0;
	line-height: 1.35;
}

/* Navigation Buttons */
.nsc-prev,
.nsc-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 30;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(0, 0, 0, 0.1);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 20px;
	color: #0f0f0f;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.nsc-prev:hover,
.nsc-next:hover {
	background: #0f0f0f;
	color: #c59b27;
}

.nsc-prev {
	left: 24px;
}

.nsc-next {
	right: 320px;
}

@media (max-width: 1200px) {
	.nsc-slide-content h1 {
		font-size: 85px;
	}

	.nsc-next {
		right: 24px;
	}
}

@media (max-width: 992px) {
	.nsc-slider-inner {
		height: auto;
		min-height: 600px;
	}

	.nsc-slide-content {
		width: 55%;
		padding-left: 40px;
	}

	.nsc-slide-content h1 {
		font-size: 65px;
	}

	.nsc-visual-wrapper {
		width: 50%;
	}
}

@media (max-width: 768px) {
	.nsc-slider-inner {
		height: auto;
	}

	.nsc-slide.active {
		flex-direction: column;
		align-items: flex-start;
		position: relative;
	}

	.nsc-slide-content {
		width: 100%;
		padding: 40px 20px 20px 20px;
	}

	.nsc-slide-content h1 {
		font-size: 52px;
	}

	.nsc-visual-wrapper {
		position: relative;
		width: 100%;
		height: 350px;
	}

	.nsc-player-container {
		right: auto;
		left: 50%;
		transform: translateX(-50%);
		width: 80%;
	}

	.nsc-legacy-box {
		position: relative;
		width: 100%;
	}

	.nsc-next {
		right: 20px;
	}
}

/* ══════════════════════════════════════════════
	ABOUT SECTION  — nab = northside-about
══════════════════════════════════════════════ */
#about-section {
	background: #0c0d0e;
	position: relative;
}

@media (min-width: 768px) {
	.nab-social {
		position: absolute;
		right: 1rem;
		top: 20%;
	}
}

.nab-section {
	display: flex;
	align-items: stretch;
	width: 100%;
	min-height: 340px;
	color: #fff;
	overflow: hidden;
	font-family: -apple-system, sans-serif;
}

/* ─── LEFT PANEL ─── */
.nab-left {
	display: flex;
	align-items: stretch;
	width: 50%;
	flex-shrink: 0;
	position: relative;
	background: #0c0d0e;
}

/* Text column — dark left portion */
.nab-text-col {
	position: relative;
	z-index: 0;
	flex-shrink: 0;
	width: 52%;
	padding: 36px 24px 36px 36px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #0c0d0e;
}

/* Eyebrow */
.nab-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 2.5px;
	color: #c59b27;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.nab-eyebrow-line {
	display: block;
	width: 26px;
	height: 2px;
	background: #c59b27;
	flex-shrink: 0;
}

/* Heading */
.nab-heading {
	font-family: 'Manrope Regular', 'Impact', sans-serif;
	font-size: 65px;
	line-height: 0.9;
	color: #fff;
	margin: 0 0 16px 0;
	font-weight: 500;
	letter-spacing: 1px;
}

.nab-accent {
	color: #c59b27;
}

/* Description */
.nab-desc {
	font-size: 11.5px;
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.62);
	margin: 0 0 24px 0;
	max-width: 190px;
}

/* Button */
.nab-btn {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	color: #fff;
	text-decoration: none;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.nab-btn-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1.5px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	font-size: 14px;
	flex-shrink: 0;
	transition: border-color 0.25s, background 0.25s;
}

.nab-btn:hover .nab-btn-circle {
	border-color: #c59b27;
	background: rgba(168, 201, 54, 0.12);
}

.nab-btn:hover .nab-btn-label {
	color: #c59b27;
}

.nab-btn-label {
	transition: color 0.2s;
}

/* Image column — right portion of left panel */
.nab-img-col {
	flex: 1;
	position: relative;
	transform: rotate(12deg);
	height: 120%;
}

.nab-player-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	filter: brightness(0.85) contrast(1.05) saturate(0.7);
}

/* Left-to-dark gradient fade to blend with text column */
.nab-img-fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right,
			#0c0d0e 0%,
			rgba(12, 13, 14, 0.6) 30%,
			rgba(12, 13, 14, 0) 70%);
	z-index: 2;
}

/* thin diagonal separator line on the left edge of image col */
/* .nab-img-col::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(
		to bottom,
		transparent,
		rgba(168,201,54,0.55) 30%,
		rgba(168,201,54,0.55) 70%,
		transparent
	);
	z-index: 3;
} */

/* ─── VERTICAL DIVIDER ─── */
.nab-section>.nab-right {
	border-left: 1px solid rgba(255, 255, 255, 0.07);
}

/* ─── RIGHT PANEL ─── */
.nab-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 34px 55px 34px 100px;
	gap: 0;
	min-width: 0;
}

/* Shared label style */
.nab-section-label {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 2.5px;
	color: #c59b27;
	text-transform: uppercase;
	margin: 0 0 14px 0;
}

/* ─── Stats ─── */
.nab-stats {
	margin-bottom: 22px;
}

.nab-stats-row {
	display: flex;
	align-items: flex-start;
}

.nab-stat {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1;
}

.nab-sep {
	width: 1px;
	background: rgba(255, 255, 255, 0.09);
	align-self: stretch;
	margin: 0 18px;
	flex-shrink: 0;
}

.nab-stat-num {
	font-family: 'Work Sans Regular', 'Impact', sans-serif;
	font-size: 50px;
	line-height: 1;
	color: #fff;
	font-weight: 900;
}

.nab-stat-lbl {
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: 1px;
	color: rgba(255, 255, 255, 0.38);
	text-transform: uppercase;
	line-height: 1.45;
	max-width: 90px;
}

/* ─── H-Rule ─── */
.nab-hr {
	height: 1px;
	background: rgba(255, 255, 255, 0.08);
	margin-bottom: 20px;
}

/* ─── Match Box ─── */
.nab-match {
	display: flex;
	flex-direction: column;
	gap: 0px;
}

.nab-match-row {
	display: flex;
	align-items: center;
	gap: 35px;
	justify-content: space-between;
	width: fit-content;
	background-color: #5d5d5d50;
	padding: 9px 17px;
	border-radius: 2px;
}

.nab-team {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-shrink: 0;
}

.nab-crest {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.nab-crest img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.nab-team-info {
	/* display: flex; */
	/* flex-direction: column; */
	gap: 2px;
}

.nab-team-name {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: rgba(255, 255, 255, 0.75);
	text-transform: uppercase;
	line-height: 1.3;
	max-width: 90px;
}

.nab-vs {
	font-family: 'Work Sans Regular', sans-serif;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.22);
	letter-spacing: 2px;
	flex-shrink: 0;
}

.nab-match-meta {
	margin-left: auto;
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex-shrink: 0;
}

.nab-meta-date,
.nab-meta-venue {
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: 1px;
	color: rgba(255, 255, 255, 0.38);
	text-transform: uppercase;
}

.nab-meta-time {
	font-family: 'Work Sans Regular', sans-serif;
	font-size: 30px;
	color: #fff;
	line-height: 1;
	letter-spacing: 1px;
}

/* Fixtures button */
.nab-fix-btn {
	margin-top: 15px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	text-decoration: none;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: color 0.2s;
}

.nab-fix-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	font-size: 14px;
	transition: border-color 0.25s, background 0.25s;
}

.nab-fix-btn:hover {
	color: #c59b27;
}

.nab-fix-btn:hover .nab-fix-circle {
	border-color: #c59b27;
	background: rgba(168, 201, 54, 0.1);
}

/* ─── Social Rail ─── */
.nab-social {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 0 16px;
	border-left: 1px solid rgba(255, 255, 255, 0.07);
	flex-shrink: 0;
}

.nab-follow {
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 2.5px;
	color: rgba(255, 255, 255, 0.28);
	text-transform: uppercase;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.nab-social a {
	color: rgba(255, 255, 255, 0.38);
	font-size: 14px;
	text-decoration: none;
	transition: color 0.2s, transform 0.2s;
	display: flex;
	line-height: 1;
}

.nab-social a:hover {
	color: #c59b27;
	transform: scale(1.18);
}

/* ─── Responsive ─── */
@media (max-width: 1100px) {
	.nab-heading {
		font-size: 42px;
	}

	.nab-stat-num {
		font-size: 40px;
	}

	.nab-right {
		padding: 26px 20px;
	}

	.nab-text-col {
		padding: 26px 18px 26px 22px;
	}
}

@media (max-width: 768px) {
	.nab-section {
		flex-direction: column;
	}

	.nab-left {
		width: 100%;
		min-height: 280px;
	}

	.nab-text-col {
		width: 55%;
		z-index: 999;
		background-color: transparent !important;
	}

	.nab-img-col {
		position: static;
		transform: none;
		height: 120%;
	}

	.nab-right {
		padding: 24px 18px;
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.07);
	}

	.nab-sep {
		margin: 0 10px;
	}

	.nab-social {
		flex-direction: row;
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.07);
		padding: 14px 20px;
		justify-content: center;
	}

	.nab-follow {
		writing-mode: horizontal-tb;
		transform: none;
	}

	.nab-match-meta {
		text-align: left;
		margin-left: 0;
	}
}

@media (max-width: 480px) {
	.nab-heading {
		font-size: 36px;
	}

	.nab-match-row {
		flex-wrap: wrap;
		gap: 10px;
	}
}

@media (min-width: 768px) {
	.nab-img-col {
		flex: 1;
		position: relative;
		transform: rotate(12deg);
		height: 120%;
		top: -2.8rem;
	}
}

/* =========================================================
   CONTENT LINKS UNDERLINE (WordPress Accessibility Rule)
========================================================= */
.entry-content a,
.entry-summary a,
.page-content a,
.comment-content a,
.comment-body a,
.widget_text a,
.textwidget a,
.widget-area .widget p a,
.archive-description a,
.taxonomy-description a,
.author-bio a,
.author-description a {
	text-decoration: underline;
}

.entry-content a:hover,
.entry-content a:focus,
.entry-summary a:hover,
.entry-summary a:focus,
.page-content a:hover,
.page-content a:focus,
.comment-content a:hover,
.comment-content a:focus,
.comment-body a:hover,
.comment-body a:focus,
.widget_text a:hover,
.widget_text a:focus,
.textwidget a:hover,
.textwidget a:focus,
.widget-area .widget p a:hover,
.widget-area .widget p a:focus,
.archive-description a:hover,
.archive-description a:focus,
.taxonomy-description a:hover,
.taxonomy-description a:focus,
.author-bio a:hover,
.author-bio a:focus,
.author-description a:hover,
.author-description a:focus {
	text-decoration: none;
}

/* Exclude non-text/button/image links within content areas from underlines */
.entry-content a.button,
.entry-content a.button:hover,
.entry-content a.button:focus,
.entry-summary a.button,
.entry-summary a.button:hover,
.entry-summary a.button:focus,
.page-content a.button,
.page-content a.button:hover,
.page-content a.button:focus,
.comment-content a.button,
.comment-content a.button:hover,
.comment-content a.button:focus,
.entry-content a.wp-block-button__link,
.entry-content a.wp-block-button__link:hover,
.entry-content a.wp-block-button__link:focus,
.entry-summary a.wp-block-button__link,
.entry-summary a.wp-block-button__link:hover,
.entry-summary a.wp-block-button__link:focus,
.page-content a.wp-block-button__link,
.page-content a.wp-block-button__link:hover,
.page-content a.wp-block-button__link:focus,
.comment-content a.wp-block-button__link,
.comment-content a.wp-block-button__link:hover,
.comment-content a.wp-block-button__link:focus,
.entry-content .wp-block-file__button,
.entry-content .wp-block-file__button:hover,
.entry-content .wp-block-file__button:focus,
.entry-content a.read-more-link,
.entry-content a.read-more-link:hover,
.entry-content a.read-more-link:focus,
.entry-summary a.read-more-link,
.entry-summary a.read-more-link:hover,
.entry-summary a.read-more-link:focus,
.entry-content a:has(img),
.entry-summary a:has(img),
.page-content a:has(img),
.comment-content a:has(img),
.widget_text a:has(img),
.textwidget a:has(img),
.wp-block-image a {
	text-decoration: none;
}

/* =========================================================
   ROOFING HERO SLIDER
========================================================= */

.roofing-hero-slider {
	width: 100%;
	min-height: 680px;
	height: 100vh;
	max-height: 850px;
	position: relative;
	overflow: hidden;
	background: #f8f7f4;
}


/* =========================================================
   SLIDER INNER
========================================================= */

.roofing-slider-inner {
	width: 100%;
	height: 100%;
	min-height: 680px;
	position: relative;
}


/* =========================================================
   SLIDE
========================================================= */

.roofing-slide {
	width: 100%;
	height: 100%;
	min-height: 680px;
	position: absolute;
	inset: 0;

	display: flex;

	opacity: 0;
	visibility: hidden;

	transition:
		opacity 0.7s ease,
		visibility 0.7s ease;
}


.roofing-slide.active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.roofing-slide-left {
	width: 55%;
	height: 100%;
	min-height: 680px;
	background: #f8f7f4;
	position: relative;
	z-index: 5;
	clip-path: polygon(100% 0%, 77% 73%, 100% 100%, 0% 100%, 0% 0%);
	padding: 70px 55px 45px 5%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}



/* =========================================================
   SMALL NUMBER / BADGE
========================================================= */

.roofing-number {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	margin-bottom: 18px;
}


.roofing-number .number {
	font-family:
		Arial,
		sans-serif;
	font-size: 21px;
	font-weight: 600;
	color: #a85f3a;
}

.roofing-number .number-text {
	font-family:
		Arial,
		sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	color: #a85f3a;
	margin-bottom: 4px;
}


/* =========================================================
   MAIN HEADING
========================================================= */

.roofing-slide-title {
	margin: 0;

	max-width: 620px;

	font-size:
		clamp(45px,
			5.2vw,
			76px);

	line-height: 0.96;

	font-weight: 600;

	letter-spacing: -2px;

	text-transform: uppercase;

	color: #18202a;
}


/* =========================================================
   SCRIPT TITLE
========================================================= */

.roofing-script-title {
	margin-top: 10px;

	font-family:
		"Brush Script MT",
		"Segoe Script",
		cursive;

	font-size:
		clamp(38px,
			4vw,
			62px);

	line-height: 1;

	color: #a85f3a;

	transform: rotate(-2deg);

	transform-origin: left center;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.roofing-slide-description {
	max-width: 480px;

	margin:
		22px 0 0;

	font-family:
		Arial,
		Helvetica,
		sans-serif;

	font-size: 15px;

	line-height: 1.75;

	color: #4d5257;
}


/* =========================================================
   BUTTONS
========================================================= */

.roofing-slide-buttons {
	display: flex;
	align-items: center;

	gap: 24px;

	margin-top: 28px;
}


/* Primary */

.roofing-primary-button {
	display: inline-flex;

	align-items: center;
	justify-content: space-between;

	gap: 22px;

	min-width: 220px;

	padding:
		14px 18px 14px 20px;

	background: #a85f3a;

	color: #fff;

	text-decoration: none;

	font-family:
		Arial,
		sans-serif;

	font-size: 11px;

	font-weight: 700;

	letter-spacing: 0.3px;

	transition:
		background 0.3s ease,
		transform 0.3s ease;
}


.roofing-primary-button:hover {
	background: #824728;

	color: #fff;

	transform: translateY(-2px);
}


.button-arrow {
	font-size: 20px;
	line-height: 1;
}


/* Secondary */

.roofing-secondary-button {
	display: inline-flex;

	align-items: center;

	gap: 10px;

	color: #20262d;

	text-decoration: none;

	font-family:
		Arial,
		sans-serif;

	font-size: 11px;

	font-weight: 700;

	transition: 0.3s ease;
}


.roofing-secondary-button:hover {
	color: #a85f3a;
}


.circle-arrow {
	width: 32px;
	height: 32px;

	border: 1px solid #858585;

	border-radius: 50%;

	display: flex;

	align-items: center;
	justify-content: center;

	font-size: 17px;

	transition: 0.3s ease;
}


.roofing-secondary-button:hover .circle-arrow {
	background: #a85f3a;
	color: #fff;
	border-color: #a85f3a;
}


/* =========================================================
   STATISTICS
========================================================= */

.roofing-stats {
	display: flex;

	align-items: center;

	gap: 38px;

	margin-top: 42px;

	padding-top: 18px;
}


.roofing-stat {
	display: flex;
	gap: 10px;
}


.stat-icon {
	width: 28px;
	height: 28px;

	border: 1px solid #b77a5c;

	border-radius: 50%;

	display: flex;

	align-items: center;
	justify-content: center;

	color: #a85f3a;

	font-size: 12px;
}


.stat-content {
	display: flex;

	flex-direction: column;
}


.stat-content strong {
	font-family:
		Arial,
		sans-serif;

	font-size: 24px;

	line-height: 1.1;

	color: #20262d;
}


.stat-content span {
	margin-top: 3px;
	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #777;
	white-space: nowrap;
}


/* =========================================================
   RIGHT IMAGE
========================================================= */

.roofing-slide-right {
	width: 75%;
	position: absolute;
	height: 100%;
	top: 0;
	overflow: hidden;
	background: #ddd;
	right: 0;
}


/* =========================================================
   IMAGE
========================================================= */

.roofing-image-wrapper {
	position: absolute;

	inset: 0;

	overflow: hidden;
}


.roofing-main-image {
	width: 100%;
	height: 100%;

	object-fit: cover;

	object-position: center;

	display: block;

	transform: scale(1.02);

	transition:
		transform 7s ease;
}

.roofing-image-wrapper::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: linear-gradient(270deg, #06060640, #00000096);
	opacity: 1;
}


.roofing-slide.active .roofing-main-image {
	transform: scale(1.06);
}


/* =========================================================
   IMAGE DARK GRADIENT
========================================================= */

.roofing-slide-right::after {
	content: "";

	position: absolute;

	inset: 0;

	background:
		linear-gradient(90deg,
			rgba(0, 0, 0, 0.02),
			rgba(0, 0, 0, 0.05));

	pointer-events: none;

	z-index: 2;
}


/* =========================================================
   FEATURE BOX
========================================================= */

.roofing-feature-box {
	position: absolute;

	right: 2rem;
	bottom: 1rem;
	border-radius: 10px;

	width: 300px;

	padding:
		22px 25px;

	background:
		rgba(20,
			24,
			27,
			0.86);

	backdrop-filter: blur(5px);

	z-index: 10;
}


.roofing-feature-item {
	display: flex;

	align-items: center;

	gap: 12px;

	margin-bottom: 14px;

	color: #fff;

	font-family:
		Arial,
		sans-serif;

	font-size: 12px;

	font-weight: 500;
}


.roofing-feature-item:last-child {
	margin-bottom: 0;
}


.feature-check {
	width: 20px;
	height: 20px;

	border: 1px solid #c28b6e;

	border-radius: 50%;

	display: flex;

	align-items: center;
	justify-content: center;

	color: #fff;

	font-size: 11px;

	flex-shrink: 0;
}


/* =========================================================
   SLIDER ARROWS
========================================================= */

.roofing-slider-prev,
.roofing-slider-next {
	position: absolute;

	top: 50%;

	transform: translateY(-50%);

	width: 42px;
	height: 42px;

	border: 1px solid rgba(255,
			255,
			255,
			0.7);

	background:
		rgba(20,
			20,
			20,
			0.35);

	color: #fff;

	border-radius: 50%;

	cursor: pointer;

	z-index: 20;

	font-size: 18px;

	transition:
		background 0.3s ease,
		transform 0.3s ease;
}


.roofing-slider-prev {
	left: 20px;
}


.roofing-slider-next {
	right: 20px;
}


.roofing-slider-prev:hover,
.roofing-slider-next:hover {
	background: #a85f3a;

	border-color: #a85f3a;
}


/* =========================================================
   TABLET
========================================================= */


@media (max-width: 1100px) {


	.roofing-slide-left {
		width: 73%;
	}

	.roofing-slide-title {
		font-size: 54px;
	}


	.roofing-script-title {
		font-size: 46px;
	}


	.roofing-stats {
		gap: 18px;
	}


	.roofing-stat {
		gap: 6px;
	}


	.stat-content strong {
		font-size: 17px;
	}

}

@media (max-width: 890px) {
	.roofing-slide-left {
		width: 100%;
		clip-path: polygon(100% 0%, 100% 73%, 100% 100%, 0% 100%, 0% 0%);
		padding: 100px 55px 45px 5%;
	}

	.roofing-feature-box {
		display: none;
	}
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

	.roofing-hero-slider {
		height: auto;
		min-height: auto;
		max-height: none;
	}


	.roofing-slider-inner {
		min-height: 0;
		height: auto;
	}


	.roofing-slide {
		position: relative;

		min-height: 0;

		height: auto;

		display: flex;

		flex-direction: column;

		opacity: 0;

		visibility: hidden;

		display: none;
	}


	.roofing-slide.active {
		display: flex;

		opacity: 1;

		visibility: visible;
	}


	/* IMAGE FIRST ON MOBILE */

	.roofing-slide-right {
		order: 1;

		width: 100%;

		height: 430px;

		min-height: 430px;
	}


	.roofing-slide-left {
		order: 2;

		width: 100%;

		min-height: auto;

		height: auto;


		display: block;
	}



	.roofing-slide-title {
		font-size: 43px;

		letter-spacing: -1px;
	}


	.roofing-script-title {
		font-size: 42px;
	}


	.roofing-slide-description {
		font-size: 14px;

		line-height: 1.6;
	}


	.roofing-slide-buttons {
		flex-direction: column;

		align-items: flex-start;

		gap: 18px;
	}


	.roofing-primary-button {
		width: 100%;

		max-width: 280px;
	}


	.roofing-stats {
		display: grid;

		grid-template-columns:
			repeat(3,
				1fr);

		gap: 12px;

		margin-top: 30px;
	}


	.roofing-stat {
		flex-direction: column;

		align-items: flex-start;

		gap: 5px;
	}


	.stat-content strong {
		font-size: 17px;
	}


	.stat-content span {
		white-space: normal;

		font-size: 8px;
	}


	.roofing-feature-box {
		width: auto;

		left: 15px;

		right: 15px;

		bottom: 15px;

		padding:
			15px 18px;
	}


	.roofing-feature-item {
		font-size: 10px;

		margin-bottom: 8px;
	}


	.roofing-slider-prev {
		left: 10px;
	}


	.roofing-slider-next {
		right: 10px;
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

	.roofing-slide-right {
		height: 350px;

		min-height: 350px;
	}

	.roofing-slide-title {
		font-size: 37px;
	}


	.roofing-script-title {
		font-size: 36px;
	}


	.roofing-stats {
		gap: 8px;
	}


	.stat-content strong {
		font-size: 15px;
	}


	.stat-content span {
		font-size: 7px;
	}

}

/* =========================================================
   SERVICES SECTION
========================================================= */

.prime-roofing-services-section {
	width: 100%;
	background: #f8f7f4;
	padding: 55px 0;
}


.prime-roofing-services-container {
	width: 92%;
	max-width: 1400px;
	margin: 0 auto;

	display: grid;

	/*
	 * LEFT INTRO
	 * FEATURED IMAGE
	 * SERVICES
	 */
	grid-template-columns:
		320px 320px 1fr;

	grid-template-rows: auto;

	gap: 12px;

	align-items: stretch;
}


/* =========================================================
   LEFT INTRO
========================================================= */

.prime-roofing-services-intro {
	grid-column: 1;
	grid-row: 1;

	padding: 38px 10px 20px 0;

	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}


.prime-roofing-services-eyebrow {
	display: flex;
	align-items: flex-end;
	gap: 8px;

	margin-bottom: 24px;
}


.prime-roofing-services-number {
	font-size: 21px;
	font-weight: 600;
	color: #a85f3a;
	line-height: 1;
}


.prime-roofing-services-eyebrow-text {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .5px;
	color: #a85f3a;
	margin-bottom: 1px;
}


.prime-roofing-services-heading {
	margin: 0 0 18px;

	font-family:
		"Manrope Regular",
		"Arial Narrow",
		Arial,
		sans-serif;

	font-size: 36px;
	line-height: .98;
	font-weight: 700;

	color: #20242a;

	text-transform: uppercase;
}


.prime-roofing-services-description {
	margin: 0 0 28px;

	font-family: Arial, sans-serif;

	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;

	color: #555;

}


.prime-roofing-services-view-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	padding-bottom: 7px;
	border-bottom: 1px solid #c99a7d;
	color: #24282d;
	text-decoration: none;
	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
}


.prime-roofing-services-button-arrow {
	color: #a85f3a;

	font-size: 16px;

	line-height: 1;

	transition: transform .3s ease;
}


.prime-roofing-services-view-button:hover {
	color: #a85f3a;
}


.prime-roofing-services-view-button:hover .prime-roofing-services-button-arrow {
	transform: translateX(5px);
}


/* =========================================================
   FEATURED SERVICE IMAGE
========================================================= */

.roofing-featured-service {
	grid-column: 2;
	grid-row: 1;

	position: relative;

	width: 100%;
	height: 100%;

	overflow: hidden;

	background: #222;
}


.roofing-featured-link {
	position: relative;

	display: block;

	width: 100%;
	height: 100%;

	text-decoration: none;

	overflow: hidden;
}


.roofing-featured-image {
	width: 100%;
	height: 100%;

	display: block;

	object-fit: cover;

	object-position: center;

	transition: transform .6s ease;
}


.roofing-featured-link:hover .roofing-featured-image {
	transform: scale(1.05);
}


/* Dark gradient */

.roofing-featured-overlay {
	position: absolute;

	inset: 0;

	background:
		linear-gradient(to top,
			rgba(5, 10, 14, .92) 0%,
			rgba(5, 10, 14, .42) 48%,
			rgba(5, 10, 14, .05) 100%);

	z-index: 1;
}


/* Featured text */

.roofing-featured-content {
	position: absolute;

	left: 23px;
	right: 55px;
	bottom: 25px;

	z-index: 3;
}


.roofing-featured-content h3 {
	margin: 0 0 10px;

	color: #fff;

	font-family:
		"Manrope Regular",
		"Arial Narrow",
		Arial,
		sans-serif;

	font-size: 24px;

	line-height: 1;

	font-weight: 700;
}


.roofing-featured-content p {
	margin: 0;

	max-width: 200px;

	color: rgba(255, 255, 255, .9);

	font-size: 10px;

	line-height: 1.5;
}


/* Featured arrow */

.roofing-featured-arrow {
	position: absolute;

	right: 20px;
	bottom: 20px;

	width: 42px;
	height: 42px;

	display: flex;

	align-items: center;
	justify-content: center;

	border-radius: 50%;

	background: #b86d46;

	color: #fff;

	font-size: 21px;

	z-index: 5;

	transition:
		transform .3s ease,
		background .3s ease;
}


.roofing-featured-link:hover .roofing-featured-arrow {
	transform: translateX(4px);

	background: #97512f;
}


/* =========================================================
   SERVICES GRID
========================================================= */

.prime-roofing-services-grid {
	grid-column: 3;
	grid-row: 1;

	display: grid;

	grid-template-columns:
		repeat(6, 1fr);

	grid-template-rows:
		auto auto;

	gap: 12px;

	width: 100%;
	height: 100%;

	min-width: 0;

	align-items: stretch;
}


/* =========================================================
   SERVICE CARD
========================================================= */

.roofing-service-card {
	position: relative;

	background: #f5f4f0;

	border: 1px solid #ededed;

	padding: 22px 20px 32px 20px;

	text-decoration: none;

	overflow: hidden;

	display: flex;

	flex-direction: column;

	justify-content: flex-start;

	min-width: 0;

	height: 100%;

	box-sizing: border-box;

	transition:
		transform .3s ease,
		box-shadow .3s ease;
}

.roofing-service-card-1::after,
.roofing-service-card-2::after {
	display: none;
}

.roofing-service-card:hover {
	transform: translateY(-3px);

	box-shadow:
		0 12px 30px rgba(0, 0, 0, .08);
}


/* =========================================================
   TOP 2 CARDS
========================================================= */

.roofing-service-card-1,
.roofing-service-card-2 {
	grid-column: span 3;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 14px;
}


/* =========================================================
   BOTTOM 3 CARDS
========================================================= */

.roofing-service-card-3,
.roofing-service-card-4,
.roofing-service-card-5 {
	grid-column: span 2;

}


/* =========================================================
   ICON
========================================================= */

.roofing-service-icon {
	width: 38px;
	height: 38px;

	min-width: 38px;

	display: flex;

	align-items: center;
	justify-content: center;

	color: #1f252b;

	font-size: 24px;

	margin: 0;
}


.roofing-service-icon i {
	font-size: inherit;
}


/* =========================================================
   SERVICE CONTENT
========================================================= */

.roofing-service-content {
	min-width: 0;

	padding-right: 35px;
}


.roofing-service-content h3 {
	margin: 4px 0 10px;

	font-family:
		"Manrope Regular",
		"Arial Narrow",
		Arial,
		sans-serif;

	font-size: 19px;

	line-height: 1;

	font-weight: 700;

	color: #20262c;

	text-transform: uppercase;
}


.roofing-service-content p {
	margin: 0;

	font-family: Arial, sans-serif;

	font-size: 12px;

	font-weight: 600;

	line-height: 1.55;

	color: #656565;

	max-width: 220px;
}


/* =========================================================
   CARD ARROW
========================================================= */

.roofing-service-arrow {
	position: absolute;

	right: 15px;
	bottom: 15px;

	width: 32px;
	height: 32px;

	display: flex;

	align-items: center;
	justify-content: center;

	border: 1px solid #d7b19d;

	border-radius: 50%;

	color: #a85f3a;

	font-size: 16px;

	transition:
		background .3s ease,
		color .3s ease,
		transform .3s ease;
}


.roofing-service-card:hover .roofing-service-arrow {
	background: #a85f3a;

	color: #fff;

	transform: translateX(3px);
}


/* =========================================================
   BOTTOM LINE
========================================================= */

.roofing-service-card::after {
	content: "";

	position: absolute;

	left: 20px;
	bottom: 20px;

	width: 30px;
	height: 2px;

	background: #b86d46;

	transition: width .3s ease;
}


.roofing-service-card:hover::after {
	width: 55px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

	.prime-roofing-services-container {
		grid-template-columns:
			200px 250px 1fr;
	}


	.prime-roofing-services-heading {
		font-size: 31px;
	}


	.roofing-service-card {
		padding: 17px;
	}


	.roofing-service-content h3 {
		font-size: 16px;
	}


	.roofing-service-content p {
		font-size: 9px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

	.prime-roofing-services-section {
		padding: 50px 0;
	}


	.prime-roofing-services-container {
		width: 90%;

		display: flex;

		flex-direction: column;

		gap: 15px;
	}


	.prime-roofing-services-intro {
		padding: 0;
	}


	.prime-roofing-services-heading {
		font-size: 38px;

		max-width: 400px;
	}


	.prime-roofing-services-description {
		max-width: 450px;

		font-size: 13px;
	}


	.roofing-featured-service {
		width: 100%;
		height: 400px;
	}


	.prime-roofing-services-grid {
		width: 100%;

		display: grid;

		grid-template-columns: 1fr 1fr;

		grid-template-rows: auto;

		gap: 12px;

		height: auto;
	}


	.roofing-service-card-1,
	.roofing-service-card-2,
	.roofing-service-card-3,
	.roofing-service-card-4,
	.roofing-service-card-5 {

		grid-column: span 1;

		height: auto;

		min-height: 170px;
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

	.prime-roofing-services-grid {
		grid-template-columns: 1fr;
	}


	.roofing-service-card-1,
	.roofing-service-card-2,
	.roofing-service-card-3,
	.roofing-service-card-4,
	.roofing-service-card-5 {

		grid-column: 1;

		min-height: 150px;
	}


	.roofing-featured-service {
		height: 350px;
	}


	.prime-roofing-services-heading {
		font-size: 34px;
	}

}



/* =========================================================
   ROOFING FOOTER
========================================================= */

.roofing-footer {
	width: 100%;
	font-family: Arial, sans-serif;
}


/* =========================================================
   COMMON CONTAINER
========================================================= */

.roofing-footer-container {
	width: 92%;
	max-width: 1400px;
	margin: 0 auto;
}


/* =========================================================
   TRUST BAR
========================================================= */

.roofing-footer-trust {
	background: #182027;
	color: #fff;
	border-top: 3px solid #d6a07b;
}


.roofing-trust-grid {
	display: grid;

	grid-template-columns:
		1.5fr 1fr 1fr 1fr 1fr 1.3fr;

	min-height: 115px;
}


.roofing-trust-intro {
	padding: 18px 25px 15px 0;
}


.roofing-trust-label {
	display: flex;
	align-items: end;
	gap: 8px;

	font-size: 10px;
	font-weight: 700;
	letter-spacing: .8px;

	color: #d29a73;
}

.roofing-trust-label span {
	margin-bottom: 4px;
}

.roofing-trust-label span.roofing-trust-number {
	margin-bottom: 0px;
}

.roofing-trust-number {
	font-size: 21px;
}


.roofing-trust-intro h2 {
	margin: 5px 0 5px;

	font-family:
		"Manrope Regular",
		"Arial Narrow",
		Arial,
		sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1;

	color: #fff;
}


.roofing-trust-intro p {
	margin: 0;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.5;
	color: #d1d4d5;
}


/* =========================================================
   TRUST ITEMS
========================================================= */

.roofing-trust-item {
	border-left: 1px solid rgba(255, 255, 255, .08);
	padding: 20px 15px;
	position: relative;
	justify-items: center;
	text-align: center;
}


.roofing-trust-icon {
	width: 34px;
	height: 34px;
	border: 1px solid #a86d49;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #c78961;
}

.roofing-trust-icon i {
	font-size: 13px;
}

.roofing-trust-item h3 {
	margin: 7px 0 7px;
	font-family:
		"Manrope Regular",
		"Arial Narrow",
		Arial,
		sans-serif;

	font-size: 16px;
	font-weight: 700;
	color: #fff;
}


.roofing-trust-item p {
	margin: 0;

	font-size: 12px;
	font-weight: 600;
	line-height: 1.55;

	color: #c7cbcd;
}


/* =========================================================
   FINANCING
========================================================= */

.roofing-financing-box {
	background: #fff;

	color: #222;

	margin: 10px 0;

	padding: 12px 18px;

	border-radius: 5px;

	display: flex;
	flex-direction: column;
	justify-content: center;
}


.roofing-financing-box h3 {
	margin: 0 0 5px;

	font-family:
		"Manrope Regular",
		"Arial Narrow",
		Arial,
		sans-serif;

	font-size: 14px;
	font-weight: 700;
	color: #252a2e;
}


.roofing-financing-box p {
	margin: 0 0 6px;

	font-size: 12px;
	font-weight: 600;
	line-height: 1.45;

	color: #777;
}


.roofing-financing-link {
	display: inline-flex;

	align-items: center;

	gap: 8px;

	width: fit-content;

	text-decoration: none;

	font-size: 12px;

	font-weight: 800;

	color: #a76442;
}


.roofing-financing-link span:last-child {
	font-size: 15px;

	transition: transform .3s ease;
}


.roofing-financing-link:hover span:last-child {
	transform: translateX(4px);
}


/* =========================================================
   MAIN FOOTER
========================================================= */

.roofing-footer-main {
	background: #fff;

	padding: 25px 0 0;

	border-bottom: 1px solid #e8e8e8;
}


.roofing-footer-grid {
	display: grid;

	grid-template-columns:
		1.35fr 3fr 1.15fr;

	gap: 30px;
}


/* =========================================================
   BRAND
========================================================= */

.roofing-footer-brand {
	padding-right: 20px;
}


.roofing-footer-logo-wrap {
	display: flex;

	align-items: center;

	gap: 10px;
}


.roofing-footer-logo {
	width: 52px;
	height: auto;

	object-fit: contain;
}


.roofing-footer-logo-wrap h2 {
	margin: 0;

	font-family:
		"Manrope Regular",
		"Arial Narrow",
		Arial,
		sans-serif;

	font-size: 20px;

	line-height: 1;

	color: #272b2e;
}


.roofing-footer-logo-wrap span {
	display: block;

	margin-top: 3px;

	font-size: 6px;

	font-weight: 700;

	letter-spacing: .6px;

	color: #a86b4b;
}


.roofing-footer-brand-description {
	margin: 14px 0;
	font-weight: 600;
	font-size: 12px;
	max-width: 190px;
	line-height: 1.55;

	color: #666;
}


/* =========================================================
   SOCIAL
========================================================= */

.roofing-footer-socials {
	display: flex;

	align-items: center;

	gap: 7px;
}


.roofing-footer-socials a {
	width: 22px;
	height: 22px;

	display: flex;

	align-items: center;
	justify-content: center;

	border: 1px solid #ccc;

	border-radius: 50%;

	color: #555;

	text-decoration: none;

	font-size: 9px;

	transition:
		background .3s ease,
		color .3s ease,
		border-color .3s ease;
}


.roofing-footer-socials a:hover {
	background: #a86b4b;

	border-color: #a86b4b;

	color: #fff;
}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.roofing-footer-columns {
	display: grid;

	grid-template-columns:
		repeat(4, 1fr);

	gap: 20px;
}


.roofing-footer-column h3,
.roofing-footer-newsletter h3 {
	margin: 3px 0 12px;

	font-family:
		"Manrope Regular",
		"Arial Narrow",
		Arial,
		sans-serif;

	font-weight: 600;
	font-size: 16px;

	color: #a86b4b;

	letter-spacing: .4px;
}


.roofing-footer-column ul {
	list-style: none;
	padding: 0;
	margin: 0;
}


.roofing-footer-column a {
	color: #4f5355;
	text-decoration: none;
	font-weight: 600;
	font-size: 12px;
	transition:
		color .2s ease;
}

.roofing-footer-column a:hover {
	color: #a86b4b;
}


/* =========================================================
   NEWSLETTER
========================================================= */

.roofing-footer-newsletter {
	padding-left: 5px;
}


.roofing-footer-newsletter p {
	margin: 0 0 12px;
	font-weight: 600;
	font-size: 12px;
	line-height: 1.5;

	color: #666;
}


.roofing-newsletter-form {
	display: flex;

	width: 100%;

	border: 1px solid #ddd;

	height: 36px;
}


.roofing-newsletter-form input {
	flex: 1;

	min-width: 0;

	border: 0;
	padding: 0 9px;

	font-size: 12px;

	color: #333;

	background: #fff;
}


.roofing-newsletter-form button {
	width: 32px;

	border: 0;

	background: #a86b4b;

	color: #fff;

	font-size: 15px;

	cursor: pointer;

	transition:
		background .3s ease;
}


.roofing-newsletter-form button:hover {
	background: #875235;
}


/* =========================================================
   BOTTOM BAR
========================================================= */

.roofing-footer-bottom {
	margin-top: 25px;

	padding: 10px 0;

	border-top: 1px solid #eee;

	display: flex;

	align-items: center;
	justify-content: space-between;
}


.roofing-footer-copyright {
	font-size: 12px;

	color: #777;
}


.roofing-footer-legal {
	display: flex;

	align-items: center;

	gap: 9px;
}


.roofing-footer-legal a {
	font-size: 12px;

	color: #777;

	text-decoration: none;
}


.roofing-footer-legal a:hover {
	color: #a86b4b;
}


.roofing-footer-legal span {
	color: #ccc;

	font-size: 8px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

	.roofing-trust-grid {
		grid-template-columns:
			1.5fr 1fr 1fr 1fr;

		grid-template-rows:
			auto auto;
	}


	.roofing-trust-intro {
		grid-column: span 2;
	}


	.roofing-financing-box {
		grid-column: span 2;
	}


	.roofing-footer-grid {
		grid-template-columns:
			1fr;

		gap: 30px;
	}


	.roofing-footer-brand {
		padding-right: 0;
	}


	.roofing-footer-brand-description {
		max-width: 400px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

	.roofing-footer-container {
		width: 90%;
	}


	/* Trust */

	.roofing-trust-grid {
		display: grid;

		grid-template-columns: 1fr 1fr;
	}


	.roofing-trust-intro {
		grid-column: span 2;

		padding: 25px 0;
	}


	.roofing-trust-item {
		border-top: 1px solid rgba(255, 255, 255, .08);

		padding: 18px 8px 18px 0;
	}


	.roofing-financing-box {
		grid-column: span 2;

		margin: 15px 0 20px;
	}


	/* Footer */

	.roofing-footer-main {
		padding-top: 30px;
	}


	.roofing-footer-columns {
		grid-template-columns:
			1fr 1fr;

		gap: 25px;
	}


	.roofing-footer-newsletter {
		padding-left: 0;
	}


	.roofing-footer-bottom {
		flex-direction: column;

		align-items: flex-start;

		gap: 10px;
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

	.roofing-trust-grid {
		grid-template-columns: 1fr;
	}


	.roofing-trust-intro,
	.roofing-financing-box {
		grid-column: 1;
	}


	.roofing-footer-columns {
		grid-template-columns: 1fr;
	}


	.roofing-trust-item {
		border-left: 0;
	}


	.roofing-footer-legal {
		flex-wrap: wrap;
	}

}


/* =========================================================
   ROOFING HEADER
========================================================= */

.roofing-header {
	width: 100%;
	background: #fff;

	border-bottom: 1px solid #e8e8e8;

	position: relative;
	z-index: 999;
}

/* =========================================================
   TOP BAR
========================================================= */

.roofing-top-bar {
	background-color: #1a2024;
	color: #fff;
	padding: 10px 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 700;
}

.roofing-top-bar .top-bar-container {
	width: 92%;
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 15px;
}

.roofing-top-bar .top-bar-left,
.roofing-top-bar .top-bar-right {
	display: flex;
	align-items: center;
	gap: 15px;
	flex-wrap: wrap;
}

.roofing-top-bar .top-bar-badge {
	background-color: #aa6642;
	color: #fff;
	padding: 4px 10px;
	border-radius: 3px;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.5px;
}

.roofing-top-bar .top-bar-right {
	gap: 30px;
}

.roofing-top-bar .top-bar-info i,
.roofing-top-bar .top-bar-phone i {
	color: #aa6642;
	margin-right: 8px;
}

.roofing-top-bar .top-bar-phone {
	color: #fff;
	text-decoration: none;
	display: flex;
	align-items: center;
}

.roofing-top-bar .top-bar-phone:hover {
	color: #aa6642;
}

@media (max-width: 991px) {
	.roofing-top-bar {
		display: none;
	}
}

.roofing-header .header-container {
	width: 92%;
	max-width: 1400px;

	margin: 0 auto;

	min-height: 78px;

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 30px;
}


/* =========================================================
   LOGO
========================================================= */

.roofing-header-brand {
	display: flex;

	align-items: center;

	text-decoration: none;
}


.roofing-header-logo {
	width: 155px;
	max-height: 55px;

	object-fit: contain;

	display: block;
}


.roofing-default-logo {
	display: flex;

	align-items: center;

	gap: 10px;
}


.roofing-logo-mark {
	width: 45px;
	height: 45px;

	display: flex;

	align-items: center;
	justify-content: center;

	border: 2px solid #b56f47;

	color: #b56f47;

	font-size: 25px;

	font-weight: 700;
}


.roofing-logo-text {
	display: flex;

	flex-direction: column;
}


.roofing-logo-text strong {
	font-family:
		Arial,
		Helvetica,
		sans-serif;

	font-size: 21px;

	line-height: 1;

	font-weight: 700;

	color: #20252a;

	letter-spacing: .2px;
}


.roofing-logo-text small {
	margin-top: 4px;

	font-size: 7px;

	font-weight: 700;

	letter-spacing: .7px;

	color: #a96a48;
}

.site-branding,
.roofing-header-brand,
.roofing-default-logo,
.roofing-logo-text {
    min-width: 0;
    max-width: 100%;
}

.roofing-header-brand {
    display: block;
}

.roofing-logo-text {
    display: block;
}

.roofing-logo-text strong {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    max-width: 100%;
    line-height: 1.3;
}


/* =========================================================
   NAVIGATION
========================================================= */

.roofing-header .nav-div {
	width: 100%;
	justify-items: self-end;
}


.roofing-header .main-navigation {
	width: auto;
}


.roofing-header .main-navigation ul {
	margin: 0;

	padding: 0;

	list-style: none;

	display: flex;

	align-items: center;

	gap: 34px;
}

.roofing-header .main-navigation ul li ul {
	display: block;
	padding: 10px;
}

.roofing-header .main-navigation ul li {
	margin: 0;

	padding: 0;
}


.roofing-header .main-navigation ul li a {
	position: relative;

	display: inline-block;

	padding: 10px 0;

	color: #24282c;

	text-decoration: none;

	font-family:
		Arial,
		Helvetica,
		sans-serif;

	font-size: 12px;

	font-weight: 600;

	text-transform: uppercase;

	transition: color .25s ease;
}

.roofing-header .main-navigation ul li ul li a {
	padding: 10px;
}

.roofing-header .main-navigation ul li a::after {
	content: "";

	position: absolute;

	left: 0;

	bottom: 3px;

	width: 0;

	height: 1px;

	background: #aa6642;

	transition: width .25s ease;
}


.roofing-header .main-navigation ul li a:hover {
	color: #aa6642;
}


.roofing-header .main-navigation ul li a:hover::after {
	width: 100%;
}


/* =========================================================
   RIGHT ACTIONS
========================================================= */

.roofing-header-actions {
	display: flex;

	align-items: center;

	gap: 22px;

	flex: 0 0 auto;
}


/* =========================================================
   PHONE
========================================================= */

.roofing-header-phone {
	display: inline-flex;

	align-items: center;

	gap: 10px;

	text-decoration: none;

	color: #24282c;
}


.roofing-phone-icon {
	color: #ad6b49;

	font-size: 17px;
	transform: rotate(90deg);
	display: flex;

	align-items: center;
	justify-content: center;
}


.roofing-phone-number {
	font-family:
		Arial,
		Helvetica,
		sans-serif;

	font-size: 13px;

	font-weight: 700;

	white-space: nowrap;

	color: #292d31;
}


.roofing-header-phone:hover {
	color: #aa6642;
}


/* =========================================================
   GET A QUOTE
========================================================= */

.roofing-header-quote {
	display: inline-flex;

	align-items: center;

	justify-content: space-between;

	gap: 12px;

	min-width: 118px;

	padding: 13px 15px;

	background: #aa6642;

	color: #fff;

	text-decoration: none;

	font-family:
		Arial,
		Helvetica,
		sans-serif;

	font-size: 12px;
	border-radius: 5px;
	font-weight: 700;

	text-transform: uppercase;

	transition:
		background .25s ease,
		transform .25s ease;
}


.roofing-header-quote:hover {
	background: #895039;

	color: #fff;

	transform: translateY(-1px);
}


.roofing-quote-arrow {
	font-size: 17px;

	line-height: 1;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.roofing-header .menu-toggle {
	display: none;

	border: 0;

	background: transparent;

	padding: 5px;

	color: #222;

	cursor: pointer;
}


.roofing-header .mobile-nav-icon.close {
	display: none;
}

.roofing-header .main-navigation.toggled .menu-toggle .bars {
	display: none;
}

.roofing-header .main-navigation.toggled .menu-toggle .close {
	display: inline-block;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

	.roofing-header .main-navigation ul {
		gap: 19px;
	}


	.roofing-header-actions {
		gap: 12px;
	}


	.roofing-phone-number {
		font-size: 10px;
	}


	.roofing-header-quote {
		min-width: 105px;

		padding:
			12px 11px;

		font-size: 8px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

	.roofing-header .header-container {
		min-height: 70px;

		width: 92%;

		gap: 10px;
	}


	.roofing-header-logo {
		width: 130px;
		max-height: 48px;
	}


	.roofing-header .main-navigation {
		position: relative;
	}


	.roofing-header .menu-toggle {
		display: block;

		font-size: 21px;
	}


	.roofing-header .main-navigation ul {
		display: none;

		position: absolute;

		top: 48px;

		right: 0;

		width: 240px;

		padding: 15px;

		background: #fff;

		box-shadow:
			0 10px 30px rgba(0, 0, 0, .12);

		flex-direction: column;

		align-items: flex-start;

		gap: 0;
	}


	.roofing-header .main-navigation.toggled ul {
		display: flex;
	}


	.roofing-header .main-navigation ul li {
		width: 100%;
	}


	.roofing-header .main-navigation ul li a {
		width: 100%;

		padding: 12px 5px;

		font-size: 10px;
	}


	.roofing-header-actions {
		margin-left: auto;
		gap: 10px;
		order: 2;
	}

	.roofing-header .nav-div {
		order: 3;
		width: auto;
	}


	.roofing-header-phone {
		background-color: #fff;
		color: #000;
		padding: 8px 10px;
		border-radius: 4px;
	}

	.roofing-phone-number {
		display: block;
		font-size: 10px;
		color: #000;
	}


	.roofing-phone-icon {
		font-size: 17px;
	}


	.roofing-header-quote {
		min-width: auto;

		padding:
			10px 11px;

		gap: 8px;

		font-size: 8px;
		background-color: #fff;
		color: #000;
	}


	.roofing-quote-arrow {
		font-size: 15px;
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

	.roofing-header .header-container {
		width: 94%;
	}


	.roofing-header-logo {
		width: 110px;
	}


	.roofing-header-quote span:first-child {
		font-size: 7px;
	}


	.roofing-header-quote {
		padding:
			9px 8px;
	}

}

/* Custom Post Card Design */

.roofing-blog-card {
	background: #ffffff;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid #eef2f6;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
	margin-bottom: 30px;
	font-family: 'Roboto', sans-serif;
	color: #0b1f35;
}

.roofing-card-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.roofing-card-image {
	position: relative;
	width: 100%;
}

.roofing-card-image img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.roofing-card-category {
	position: absolute;
	top: 0;
	left: 0;
	background: #232a31;
	color: #ffffff;
	padding: 6px 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
}

.roofing-card-content {
	padding: 30px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.roofing-card-meta {
	color: #984e27;
	font-size: 14px;
	margin-bottom: 12px;
	font-weight: 500;
}

.roofing-card-meta .meta-sep {
	margin: 0 8px;
}

.roofing-card-title {
	font-size: 24px;
	line-height: 1.3;
	font-weight: 700;
	margin: 0 0 15px 0;
}

.roofing-card-title a {
	color: #0b1f35;
	text-decoration: underline;
}

.roofing-card-title a:hover {
	color: #2c6eb5;
}

.roofing-card-excerpt p {
	color: #5b6a7a;
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}

.roofing-card-excerpt {
	margin-bottom: 30px;
	flex-grow: 1;
}

.roofing-card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
}

.roofing-card-author {
	color: #243647;
	font-size: 15px;
	font-weight: 500;
}

.roofing-card-read-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: #e2e8f0;
	color: #0b1f35;
	border-radius: 4px;
	text-decoration: underline;
	transition: background 0.2s ease;
}

.roofing-card-read-more:hover {
	background: #cbd5e1;
}

/* Single Post Specific Adjustments */
.single .roofing-blog-card {
	border: none;
	box-shadow: none;
	border-radius: 0;
}

.single .roofing-card-content {
	padding: 30px 0;
}

/* Popular Posts Sidebar Design */
.sidebar-popular-posts {
	background: #ffffff;
	padding: 24px;
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
	border: 1px solid #eef2f6;
	margin-bottom: 30px;
	font-family: 'Roboto', sans-serif;
}

.popular-post-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 24px;
}

.popular-post-item:last-child {
	margin-bottom: 0;
}

.popular-post-number {
	font-size: 32px;
	font-weight: 800;
	color: #cbd5e1;
	line-height: 1.1;
	margin-right: 16px;
	min-width: 35px;
	letter-spacing: -1px;
}

.popular-post-content {
	flex-grow: 1;
}

.popular-post-title {
	font-size: 16px;
	font-weight: 700;
	color: #0b1f35;
	margin: 0 0 8px 0;
	line-height: 1.4;
}

.popular-post-title a {
	color: inherit;
	text-decoration: underline;
	transition: color 0.2s ease;
}

.popular-post-title a:hover {
	color: #2c6eb5;
}

.popular-post-meta {
	font-size: 13px;
	color: #64748b;
	display: flex;
	align-items: center;
	font-weight: 500;
}

.popular-post-meta svg {
	margin-right: 6px;
}

.popular-post-meta .meta-sep {
	margin: 0 6px;
	color: #64748b;
}

/* OFF-CANVAS MOBILE MENU FIX (FREE THEME) - Added by AI v2 */
@media (max-width: 991px) {

	.roofing-header .nav-div,
	.roofing-header .main-navigation {
		position: static !important;
		z-index: auto !important;
	}

	.roofing-header .main-navigation ul {
		display: block !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 80% !important;
		max-width: 320px !important;
		height: 100vh !important;
		background-color: #ffffff !important;
		box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2) !important;
		z-index: 99999 !important;
		padding: 80px 20px 200px 20px !important;
		transform: translateX(-100%);
		transition: transform 0.3s ease-in-out !important;
		overflow-y: auto !important;
		margin: 0 !important;
	}

	.roofing-header .main-navigation ul ul,
	.roofing-header .main-navigation ul ul ul {
		position: relative !important;
		height: auto !important;
	}

	.roofing-header .main-navigation.toggled ul {
		transform: translateX(0) !important;
	}

	.roofing-header .main-navigation ul li {
		border-bottom: none !important;
		text-align: left !important;
		display: block !important;
		width: 100% !important;
	}

	.roofing-header .main-navigation ul li a {
		color: #000000 !important;
		font-weight: 800 !important;
		text-transform: uppercase !important;
		padding: 15px 0 !important;
		font-size: 15px !important;
		display: block !important;
		text-decoration: none !important;
	}

	.roofing-header .main-navigation.toggled .menu-toggle {
		position: fixed !important;
		top: 20px !important;
		right: 20px !important;
		z-index: 100000 !important;
		background-color: #2c3338 !important;
		border-radius: 50% !important;
		width: 40px !important;
		height: 40px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 !important;
	}

	.roofing-header .main-navigation.toggled .menu-toggle .bars {
		display: none !important;
	}

	.roofing-header .main-navigation.toggled .menu-toggle .close {
		display: block !important;
		color: #fff !important;
		font-size: 20px !important;
	}

	.header-container:has(.main-navigation.toggled)::before {
		content: '';
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		background-color: rgba(0, 0, 0, 0.6) !important;
		z-index: 99998 !important;
	}

	.roofing-header-actions {
		position: fixed !important;
		bottom: 30px !important;
		left: 20px !important;
		width: calc(80% - 40px) !important;
		max-width: 280px !important;
		z-index: 100000 !important;
		flex-direction: column !important;
		gap: 15px !important;
		transform: translateX(-150vw);
		transition: transform 0.3s ease-in-out !important;
		display: flex !important;
		background-color: transparent !important;
		padding: 0 !important;
	}

	.header-container:has(.main-navigation.toggled) .roofing-header-actions {
		transform: translateX(0) !important;
	}

	.roofing-header-phone {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		padding: 10px 0 !important;
		background-color: transparent !important;
		color: #000000 !important;
		gap: 10px !important;
		border: none !important;
		text-decoration: none !important;
	}

	.roofing-phone-number {
		font-weight: 800 !important;
		font-size: 16px !important;
	}

	.roofing-phone-icon {
		color: #000000 !important;
		font-size: 18px !important;
	}

	.roofing-header-quote {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		background-color: #a38146 !important;
		color: #ffffff !important;
		border-radius: 30px !important;
		padding: 15px !important;
		text-transform: uppercase !important;
		font-weight: 800 !important;
		width: 100% !important;
		font-size: 14px !important;
		gap: 10px !important;
		text-decoration: none !important;
	}
}


/* =========================================================
   CUSTOM PRIME FOOTER
========================================================= */
.custom-prime-footer {
	background-color: #0f172a !important;
	/* Dark slate */
	color: #94a3b8 !important;
	padding: 80px 0 30px !important;
	font-family: sans-serif !important;
}

.custom-prime-container {
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 0 20px !important;
}

.custom-prime-grid {
	display: grid !important;
	grid-template-columns: 2fr 1fr 1fr !important;
	gap: 40px !important;
	margin-bottom: 60px !important;
}

@media (max-width: 768px) {
	.custom-prime-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Brand Column */
.custom-prime-logo-wrap {
	display: flex !important;
	align-items: center !important;
	gap: 15px !important;
	margin-bottom: 25px !important;
}

.custom-prime-icon {
	width: 45px !important;
	height: 45px !important;
	background-color: #ffffff !important;
	border-radius: 8px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.custom-prime-icon svg {
	width: 28px !important;
	height: 28px !important;
}

.custom-prime-logo-text {
	display: flex !important;
	flex-direction: column !important;
}

.custom-prime-logo-text strong {
	color: #ffffff !important;
	font-size: 22px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: 0.5px !important;
}

.custom-prime-logo-text span {
	color: #c2734b !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 2px !important;
	margin-top: 4px !important;
}

.custom-prime-desc {
	font-size: 15px !important;
	line-height: 1.8 !important;
	color: #94a3b8 !important;
	max-width: 90% !important;
	margin: 0 !important;
}

/* Headings */
.custom-prime-heading {
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 1px !important;
	margin-bottom: 25px !important;
	margin-top: 10px !important;
}

/* Links Column */
.custom-prime-links {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 15px !important;
}

.custom-prime-links li {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.custom-prime-links a {
	color: #94a3b8 !important;
	text-decoration: underline;
	font-size: 14px !important;
	transition: color 0.3s ease !important;
}

.custom-prime-links a:hover {
	color: #ffffff !important;
}

/* Contact Column */
.custom-prime-contact-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 15px !important;
	color: #94a3b8 !important;
	font-size: 14px !important;
}

.custom-prime-contact-list li {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

/* Bottom Bar */
.custom-prime-bottom {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding-top: 30px !important;
	border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
	font-size: 13px !important;
	color: #64748b !important;
}

@media (max-width: 768px) {
	.custom-prime-bottom {
		flex-direction: column !important;
		gap: 15px !important;
		text-align: center !important;
	}
}

.custom-prime-legal {
	display: flex !important;
	gap: 20px !important;
}

.custom-prime-legal a {
	color: #64748b !important;
	text-decoration: underline;
	transition: color 0.3s ease !important;
}

.custom-prime-legal a:hover {
	color: #94a3b8 !important;
}

/* Footer Extracted Styles */
.custom-prime-trust-bar {
	padding: 40px 20px;
	background: #f8f9fa;
	border-bottom: 1px solid #eee;
	text-align: center;
}

.trust-label {
	font-size: 12px;
	font-weight: bold;
	color: #c2734b;
	text-transform: uppercase;
}

.trust-heading {
	margin: 10px 0;
}

.trust-desc {
	max-width: 600px;
	margin: 0 auto 30px;
}

.trust-items-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	text-align: left;
}

.trust-item {
	flex: 1;
	min-width: 200px;
	padding: 10px;
}

.trust-item-title {
	margin-bottom: 5px;
	font-size: 16px;
}

.trust-item-text {
	font-size: 14px;
	margin: 0;
	color: #666;
}

.custom-prime-financing {
	padding: 40px 20px;
	background: #111;
	color: #fff;
	text-align: center;
}

.financing-title {
	color: #fff;
	margin-bottom: 10px;
}

.financing-text {
	margin-bottom: 20px;
	color: #ccc;
}

.financing-btn {
	display: inline-block;
	padding: 12px 24px;
	background: #c2734b;
	color: #fff;
	text-decoration: underline;
	font-weight: bold;
	border-radius: 4px;
}

.custom-prime-container.pt-40 {
	padding-top: 40px;
}

.footer-logo-img {
	max-width: 200px;
	max-height: 80px;
	margin-right: 15px;
}

.footer-socials {
	margin-top: 20px;
	display: flex;
	gap: 15px;
}

.newsletter-desc {
	margin-bottom: 15px;
	color: #666;
	font-size: 14px;
}

.newsletter-input {
	width: 100%;
	padding: 10px;
	margin-bottom: 10px;
	border: 1px solid #ccc;
}

.newsletter-btn {
	background: #c2734b;
	color: #fff;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
	width: 100%;
}

.contact-email {
	color: inherit;
	text-decoration: none;
}


/* ==========================================================================
   Footer Overrides (Matches Design)
   ========================================================================== */
.custom-prime-footer-new {
	background-color: #111111;
	color: #a3a3a3;
	font-family: "Manrope Regular", sans-serif;
	border-top: none;
}

.custom-prime-footer-new a {
	color: #a3a3a3;
	text-decoration: underline;
	transition: 0.3s;
}

.custom-prime-footer-new a:hover {
	color: #ffffff;
}

.footer-main {
	padding: 80px 0 60px;
}

.custom-prime-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 40px;
}

@media (max-width: 768px) {
	.footer-grid {
		grid-template-columns: 1fr;
	}
}

.footer-brand {
	margin-bottom: 25px;
}

.footer-logo-placeholder {
	display: flex;
	align-items: center;
	gap: 15px;
}

.footer-logo-placeholder .icon {
	background: #ffffff;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
}

.footer-logo-placeholder .text strong {
	display: block;
	color: #ffffff;
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: 0.5px;
	font-weight: 800;
}

.footer-logo-placeholder .text span {
	color: #c2734b;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 700;
}

.footer-desc {
	font-size: 15px;
	line-height: 1.7;
	margin-bottom: 30px;
	max-width: 420px;
}

.footer-socials-new {
	display: flex;
	gap: 12px;
}

.footer-socials-new a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid #333333;
	border-radius: 50%;
	color: #a3a3a3;
	font-size: 15px;
}

.footer-socials-new a:hover {
	border-color: #c2734b;
	background: #c2734b;
	color: #ffffff;
}

.footer-heading {
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 30px;
}

.footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-links li {
	margin-bottom: 15px;
}

.footer-links a {
	font-size: 15px;
}

.footer-contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-contact-list li {
	font-size: 15px;
	margin-bottom: 18px;
	display: flex;
	align-items: center;
}

.footer-bottom {
	border-top: 1px solid #222222;
	padding: 30px 0;
	font-size: 13px;
}

.bottom-flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}

.legal-links {
	display: flex;
	gap: 25px;
}