/*
Theme Name: Haber Roofing
Theme URI: https://haberroofing.com
Template: bento
Author: HM
Author URI: https://haberroofing.com
Description: Custom theme for Haber Roofing.
Tags: one-column,two-columns,right-sidebar,left-sidebar,grid-layout,custom-background,custom-colors,custom-menu,custom-logo,featured-image-header,featured-images,footer-widgets,full-width-template,post-formats,sticky-post,theme-options,threaded-comments,translation-ready,blog,e-commerce,portfolio
Version: 1.0.1762025081
Updated: 2025-11-01 19:24:41
*/
body {
	font-family: Arial, sans-serif;
	font-size: 16px;
	font-size: 1.6em;
}
.habercontact {
padding: 5px 0;
background-color: #061b36;
}
#nav-primary {
	float: right;
	font-family: Arial, sans-serif;
	text-transform: uppercase;
	font-weight: 700;
}
.primary-menu > li.current-menu-item a
 {
color: #FFF !important;
text-decoration: underline;
  text-decoration-color: #b31942;
   text-decoration-thickness: 2px;
 text-underline-offset: 4px;
}
.primary-menu .sub-menu {
width: 320px;
width: 32rem;
font-size: 14px;
font-size: 1.4rem;
}
.primary-menu .sub-menu li a {
padding: 12px 14px;
padding: 1.zrem 1.4rem;
}
.mobile-menu-trigger-container,

.ham-menu-trigger-container {
width: 36px;
width: 3.6rem;
}
.mobile-menu-trigger-stick,
.ham-menu-trigger-stick {
height: 6px;
height: 0.6rem;
width: 36px;
width: 3.6rem;
margin-bottom: 6px;
margin-bottom: 0.6rem;
}
.mobile-menu-close:before,
.ham-menu-close:before {
font-size: 80px;
font-size: 8rem;
}
#nav-mobile {
font-family: Arial, sans-serif;
max-width: 80%;
padding: 10px 0 50px 0;
padding: 1rem 0 5rem 0;
}
.site-header {
border-top: 2px solid #b31942;
border-bottom: 2px solid #051d39;
}
.homepage-hero {
position: relative;
background-image: url('hero_bg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
min-height: 500px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}

.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(20, 25, 40, 0.6);
z-index: 0;
}

.hero-content {
position: relative;
z-index: 1;
text-align: center;
color: #fff;
padding: 60px 20px;
max-width: 760px;
margin: 0 auto;
}

.hero-content h1 {
font-size: 4rem; /* Bigger headline */
margin-bottom: 0.5em;
color: #fff;
}

.hero-subtext {
font-size: 2rem; /* Larger than before */
font-style: italic;
opacity: 0.95;
margin-bottom: 1.5em;
color: #fff;
}

.hero-button {
display: inline-block;
padding: 1em 2em;
background-color: #b3191a; /* Old Glory Red */
color: #fff !important;
text-decoration: none;
font-weight: bold;
border-radius: 4px;
text-transform: uppercase;
font-size: 1.6rem !important;
transition: background 0.3s ease;
}

.hero-button:hover {
background-color: #8e1414;
}
.services-section {
padding: 40px 0 0 0;
background-color: #fff; /* No section-wide background */
color: #fff;
}

.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* More flexible */
gap: 40px;
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
}

.service-card {
text-align: center;
text-decoration: none;
background-color: #0a3161; /* Card background only */
padding: 50px 30px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
color: #fff;
}

.service-card:hover {
transform: translateY(-6px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.service-icon {
font-size: 4rem;
color: #b3191a;
margin-bottom: 25px;
}

.service-card h3 {
font-size: 2.5rem;
margin-bottom: 20px;
color: #fff;
}

.service-card p {
font-size: 1.5rem;
line-height: 1.7;
color: #fff;
}
.areas-served {
padding: 60px 20px;
background-color: #fff;
}

.areas-container {
display: flex;
flex-wrap: wrap;
gap: 40px;
max-width: 1000px;
margin: 0 auto;
align-items: center;
}

.areas-text {
flex: 1 1 400px;
color: #111;
}

.areas-text h2 {
  font-size: 2.5rem;
  margin-bottom: 0.5em;
  color: #002183; /* Old Glory Blue */
  text-align: center;
  width: 100%;
}

.areas-text .subheadline {
font-size: 1.8rem !important;
font-style: italic;
margin-bottom: 1em;
color: #333;
}

.areas-text p {
font-size: 1.25rem;
line-height: 1.6;
color: #444;
}

.areas-map {
flex: 1 1 400px;
text-align: center;
}

.areas-map img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
body.home .site-content {
padding-top: 0 !important;
}
.site-content {
height: 100% !important;
}
hr {
	border-top: 2px solid #061b36 !important;
border-bottom: none;	
}
img.alignleft,
img.alignright {
max-width: 100%;
height: auto;
float: left;
}

img.alignright {
float: right;
}
label {
    font-size: 11px;
    font-size: 1.6rem;
    font-style: italic;
    color: #333 !important;
}
p, address, pre, hr, dl, dd, table, .entry-content ul, .entry-content ol
 {
margin-bottom: 1rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
clear: both;
font-weight: 700;
margin: 0 0 0.5em 0;
line-height: 1.3;
}
h1 {
font-size: 24px;
font-size: 2.4em;
}
h2 {
font-size: 22px;
font-size: 2.2rem;
}
h3 {
font-size: 18px;
font-size: 1.8rem;
}
h4 {
font-size: 16px;
font-size: 1.6rem;
}
h5,
h6 {
font-size: 15px;
font-size: 1.5rem;
}
blockquote {
border-left: 4px solid;
padding-left: 14px;
padding-left: 1.4rem;
margin-bottom: 16px;
margin-bottom: 1.6rem;
font-style: italic;
}
.wp-caption-text {
font-size: 14px !important;
font-size: 1.4rem !important;
font-style: italic !important;
text-align: center !important;
margin-top: 5px;
}
.gallery .gallery-item {
text-align: center !important;
}
.entry-title,
.page-title {
margin-bottom: 0.5em !important;
font-size: 20px;
font-size: 2em;
}
.post-thumbnail {
display:none !important;
}
.post-day {
display:none;
}
.post-month,
.post-year {
display:none;
}
.widget h3 {
font-size: 22px !important;
font-size: 2.2rem !important;
}

.bottom-footer {
	padding: 10px 0;
}
 /* This element defines the size the iframe will take.
 In this example we want to have a ratio of 25:14 */
.aspect-ratio {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56%; /* The height of the item will now be 56% of the width. */
margin-bottom: 20px;
}
/* Adjust the iframe so it's rendered in the outer-width and outer-height of it's parent */
.aspect-ratio iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
/* 
Responsive
-------------------------------------
*/
/* Smaller mobile screens */
@media screen and (min-width: 10em) {
	.logo img {
		width: auto;	
	}
	.logo-fullsize {
		display: none;
	}
	.logo-mobile {
		display: inline;
	}
	.mobile-menu-open {
		overflow: hidden;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
	.admin-bar.mobile-menu-open .site-wrapper,
	.admin-bar.mobile-menu-open #nav-mobile {
		top: 46px;
	}
	.header-menu {
		display: none;	
	}
	.novice-header-title {
		font-size: 20px;
		font-size: 2rem;
	}
	.novice-header-button {
		font-size: 16px;
		font-size: 1.6rem;
		width: 100%;
		margin: 0 0 20px 0;
		margin: 0 0 2rem 0;
	}
	.bnt-container {
		padding: 0 5%; 
	}
.habercontactinfo2 {
	display: block;
font-family: inherit;
color: white;
font-size: 20px;
font-weight: 600;
 text-align: center !important;
}
.habercontactinfo2 a {
color: white;
text-decoration: none;
}
.habercontactinfo2 a:hover {
color: #b31942;
text-decoration: underline;
}
.habercontactinfo {
	display: none;
}
	.post-header-title {
		padding: 20% 0;
	}
	.post-header-title h1 {
		font-size: 16px;
		font-size: 1.6rem;
	}
	.post-header-title br {
		display: none;
	}
	.post-header-cta a,
	.post-header-cta div {
		padding: 0.4em 0.9em;
		width: 100%;
		display: block;
	}
	.post-header-cta-secondary {
		margin: 30px 0 0 0;
		margin: 3rem 0 0 0;
	}
	.content,
	.sidebar {
		width: 100%;
		float: none;
		padding: 0;
	}
	.sidebar {
		padding-top: 30px;
		padding-top: 3rem;
	}
	.site-content {
		padding: 30px 0 10px 0 !important;
		padding: 3rem 0 1rem 0 !important;
	}
	.page-template-default .entry-content .panel-grid:last-child .siteorigin-panels-stretch:last-child {
		margin-bottom: -40px;
		margin-bottom: -4rem;
	}
	.so-widget-sow-features .sow-features-list {
		margin: 0 -5%;
	}
	.entry-content .panel-grid:first-of-type .siteorigin-panels-stretch {
		margin-top: -40px;
		margin-top: -4rem;
	}
	.comment .comment {
		padding-left: 0;	
	}
	.comment-form-field {
		width: 100%;	
		margin-bottom: 6px;
		margin-bottom: 0.6rem;
	padding: 0;
	}
	.woocommerce .woocommerce-ordering, 
	.woocommerce-page .woocommerce-ordering {
		float: left;
		margin-bottom: 30px;
		margin-bottom: 3rem;
	}
	.pagination .page-numbers.next,
	.pagination .page-numbers.prev,
	.woocommerce-pagination .page-numbers.next,
	.woocommerce-pagination .page-numbers.prev {
		display: inline-block;
	}
	.grid-columns {
		columns: 1;
	}
	.masonry-item-before {
		padding-top: 50%;
	}
	.masonry-item-content {
		padding: 5%;
		padding-bottom: 0;
		margin-bottom: 5%;
		height: 95%;
	}
	.column-2,
	.column-3,
	.column-4,
	.column-5,
	.column-6 {
		width: 100%;	
	}
	.widget-footer {
		padding-bottom: 30px;
		padding-bottom: 3rem;	
		margin-right: 0;
		float: none;
	}
	.widget-footer:last-child {
		padding-bottom: 0;	
	}
	.footer-menu li {
		margin-bottom: 10px;
		margin-bottom: 1rem;
	}
	.single-product-section-wrap {
		padding-top: 40px;
		padding-top: 4rem;
	}
	#order_review .woocommerce-checkout-review-order-table {
		width: 100%;
		table-layout: auto;	
	}
	.woocommerce form #customer_details .form-row-first, 
	.woocommerce form #customer_details .form-row-last, 
	.woocommerce-page form #customer_details .form-row-first, 
	.woocommerce-page form #customer_details .form-row-last {
		width: 100%;
	}
	.shop_table td.product-remove a {
		text-indent: 9999px;
	}
}
/* Exactly 768px */
@media screen and (width: 48em) {
	.woocommerce #content div.product div.images, 
	.woocommerce #content div.product div.summary, 
	.woocommerce div.product div.images, 
	.woocommerce div.product div.summary, 
	.woocommerce-page #content div.product div.images, 
	.woocommerce-page #content div.product div.summary, 
	.woocommerce-page div.product div.images, 
	.woocommerce-page div.product div.summary {
		width: 48%;
		float: left;
	}
}
/* Larger mobile screens - 768px and wider */
@media screen and (min-width: 64em) {
	.admin-bar.mobile-menu-open .site-wrapper,
	.admin-bar.mobile-menu-open #nav-mobile {
		top: 32px;
	}
	.header-side .novice-header {
		position: relative;
		z-index: 999;
		float: right;
		width: 80%;
	}

	.novice-header-title {
		font-size: 30px;
		font-size: 3rem;
	}
	.novice-header-button {
		width: auto;
		margin: 0 32px 0 0;
		margin: 0 3.2rem 0 0;
	}
	.has-sidebar .content {
		width: 70%;
	}
	.right-sidebar .content {
		float: left;	
	}
	.left-sidebar .content {
		float: right;	
	}
	.sidebar {
		width: 30%;
		padding-top: 20px;
		padding-top: 2rem;
	}
	.right-sidebar .sidebar {
		float: right;
		padding-left: 8%;
	}
	.left-sidebar .sidebar {
		float: left;
		padding-right: 8%;	
	}
	.page-template-default .entry-content .panel-grid:last-child .siteorigin-panels-stretch:last-child {
		margin-bottom: -120px;
		margin-bottom: -12rem;
	}
	.entry-content .panel-grid:first-of-type .siteorigin-panels-stretch {
		margin-top: -60px;
		margin-top: -6rem;
	}
	.post-header-title {
		max-width: 60%;
		padding: 10% 0;
	}
	.post-header-title h1 {
		font-size: 50px;
		font-size: 5rem;
	}
	.post-header-title br {
		display: initial;
	}
	.post-header-cta {
		margin-left: -10px;
		margin-left: -1rem;
	}
	.post-header-cta a,
	.post-header-cta div {
		display: inline-block;
		padding: 0.7em 1.2em;
		width: auto;
	}
	.post-header-cta-primary,
	.post-header-cta-secondary {
		margin: 10px;
		margin: 1rem;
	}
	.site-content {
		padding: 60px 0 120px 0;
		padding: 6rem 0 12rem 0;
	}
	.comment .comment {
		padding-left: 30px;
		padding-left: 3rem;	
	}
	.comment .comment .comment-nested {
		display: block;	
	}
	.comment-form-field {
		width: 50%;	
		margin-top: 0;
		margin-bottom: 10px;
	margin-bottom: 1rem;
		float: left;
	}
	.comment-form-author {
		padding-right: 16px;
		padding-right: 1.6rem;	
	}
	.grid-container {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.grid-columns {
		columns: 3;
	}
	.masonry-item-before {
		padding-top: 100%;
	}
	.grid-masonry .grid-item.tile-2x1 .masonry-item-before {
		padding-top: 50%;
	}
	.grid-masonry .grid-item.tile-1x2 .masonry-item-before {
		padding-top: 200%;
	}
	.grid-masonry .tile-1x2 {
		grid-row: auto / span 2;
	}
	.grid-masonry .tile-2x1 {
		grid-column: auto / span 2;
	}
	.grid-masonry .tile-2x2 {
		grid-column: auto / span 2;
		grid-row: auto / span 2;
	}
	.masonry-item-content {
		padding: 15%;
		padding-bottom: 0;
		margin-bottom: 15%;
		height: 85%;
	}
	.grid-masonry .entry-title {
		font-size: 18px;
		font-size: 1.8rem;
	}
	.grid-masonry .grid-item.tile-2x2 .entry-title {
		font-size: 28px;
		font-size: 2.8rem;
	}
	.column-2 {
		width: 47.5%;		
	}
	.column-3 {
		width: 30%;		
	}
	.column-4 {
		width: 21.25%;		
	}
	.column-5 {
		width: 16%;		
	}
	.column-6 {
		width: 12.5%;		
	}
	.widget-footer {
		padding-bottom: 0;
		margin-right: 5%;
		float: left;
	}
	.widget-footer.column-1 {
		float: none;
	}
	.footer-menu {
		float: left;
	}
	.footer-menu li {
		display: inline-block;
		margin-bottom: 0;
		margin-right: 20px;
		margin-right: 2rem;
	}
	.footer-copyright {
		float: right;
	}
	.single-product-section-wrap {
		float: right;
		width: 48%;
		padding-top: 0;
	}
	#order_review .woocommerce-checkout-review-order-table {
		width: auto;
	}
	.woocommerce form #customer_details .form-row-first, 
	.woocommerce form #customer_details .form-row-last, 
	.woocommerce-page form #customer_details .form-row-first, 
	.woocommerce-page form #customer_details .form-row-last {
		width: 47%;
	}
	.shop_table.cart .product-price,
	.shop_table.cart .product-quantity,
	.shop_table.cart .product-subtotal {
		padding-left: 4%;
		padding-right: 4%;
	}
	.shop_table td.product-remove a {
		text-indent: -9999px;
	}
	.cart .quantity .qty {
		float: left;
	}
	/* Side header */ 
	.header-side .site-header {
		float: left;
		width: 20% !important;
		background: none;
		padding: 30px;
		padding: 3rem;
		margin-right: -80%;	
	}
	.header-side .site-header {
		position: fixed;
	}
	.header-side .site-header .bnt-container,
	.header-side .header-menu,
	.header-side .header-menu li,
	.header-side .logo {
		display: block;
	}
	.header-side #nav-primary {
		float: none;
	}
	.header-side .primary-menu > li {
		margin: 0;
		border-top: 1px solid;
		border-color: #eee;
		padding: 10px 0;
		padding: 1rem 0;
	}
	.header-side .primary-menu > li:first-child {
		border-top: none;
		margin-top: 20px;
		margin-top: 2rem;
	}
	.header-side .primary-menu li a {
		line-height: 2;
	}
	.header-side .primary-menu .sub-menu li,
	.header-side .primary-menu .sub-menu li:hover {
		background-color: transparent !important;
	}
	.header-side .primary-menu .sub-menu {
		position: relative;
		margin: 10px 0 0 0 !important;
		width: 100%;
		padding: 0 0 0 20px;
		padding: 0 0 0 2rem;
		background-color: transparent !important;
	}
	.header-side .primary-menu > .current-menu-ancestor > .sub-menu,
	.header-side .primary-menu > .current-menu-ancestor .current-menu-parent > .sub-menu	{
		display: block;
	}
	.header-side .primary-menu .sub-menu .sub-menu > li:last-child > a:not(.opened-side-menu) {
		padding-bottom: 0;
	}
	.header-side .primary-menu .sub-menu li a {
		padding: 10px 0;
		padding: 1rem 0;
	}
	.header-side .primary-menu .sub-menu li a:hover {
		background-color: transparent !important;
	}
	.header-side .primary-menu .sub-menu .sub-menu {
		margin: 0 0 10px 0 !important;
		margin: 0 0 1rem 0 !important;
		top: 0;
		left: 0;
	}
	.header-side .primary-menu .sub-menu .menu-item-has-children > a:after {
		line-height: 42px;
		line-height: 4.2rem;
		content: "\f345";
		right: 0;
	}
	.header-side .primary-menu .sub-menu a {
		background: none !important;
	}
	.header-side .post-header,
	.header-side .site-content,
	.header-side .site-footer {
		float: right;
		max-width: 80%;
		width: 100%;
		margin-left: 20%;
	}
	.header-side .site-content {
		padding-left: 80px;
		padding-left: 8rem;
		padding-right: 80px;
		padding-right: 8rem;
	}
	.header-side .after-content {
		clear: both;
	}
	.header-side .mobile-menu-trigger {
		display: none;	
	}
	.header-side .sidebar-footer .bnt-container {
		padding: 0 5%;
	}
}
/* Laptops and medium screens - 1024px and wider */
@media screen and (min-width: 68em) {
	.mobile-menu {
		display: none;	
	}
	.logo img {
		max-height: none;
	max-width: 100%;	
	}
	.logo-fullsize {
		display: inline;
	}
	.logo-mobile {
		display: none;
	}
	.mobile-menu-trigger {
		display: none;	
	}
	.header-menu {
		display: table-cell;	
	}
	.bnt-container {
		max-width: 1080px;
		max-width: 108rem; 
	}
	
.habercontactinfo {
	display: block;
font-family: inherit;
color: white;
font-size: 20px;
font-weight: 600;
 text-align: right !important;
}
.habercontactinfo a {
color: white;
text-decoration: none;
}
.habercontactinfo a:hover {
color: #b31942;
text-decoration: underline;
}
.habercontactinfo2 {
display: none;
}
	.so-widget-sow-features .sow-features-list {
		margin: 0 -25px;
		margin: 0 -2.5rem;
	}
	.novice-header-title {
		font-size: 44px;
		font-size: 4.4rem;
	}
	.novice-header-button {
		font-size: 20px;
		font-size: 2rem;
	}
	/* Centered menu */
	.header-centered .site-header {
		padding-top: 20px;
		padding-top: 2rem;
	}
	.header-centered .site-header .bnt-container {
		display: block;
		text-align: center;
	}
	.header-centered .logo,
	.header-centered .logo a,
	.header-centered #nav-primary {
		float: none;
	}
	.header-centered .header-menu,
	.header-centered .logo {
		display: block;
	}
	.header-centered .primary-menu > li:first-child {
		margin-left: 0;
	}
	.header-centered .header-menu .sub-menu,
	.header-centered .mobile-menu {
		text-align: left;
	}
	.woocommerce .woocommerce-ordering, 
	.woocommerce-page .woocommerce-ordering {
		float: right;
	}
	.post-type-archive-product .page-title,
	.post-type-archive-product .page-description {
		float: left;
	}
}
/* Large screens - 1920px and wider */
@media screen and (min-width: 120em) {
	.bnt-container {
		max-width: 1440px;
		max-width: 144rem; 
	}
}

/ Mobile override: stack image above text /
@media (max-width: 1024px) {
img.alignleft,
img.alignright {
float: none;
display: block;
}
}