/*
Theme Name: HH Concrete
Theme URI: http://hh-concrete.com/
Author: Robert Guajardo
Author URI: http://robertguajardo.com/
Description: A custom WordPress theme for Always Be Seasoning, including a customizable footer and dynamic options via the WordPress Customizer.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hh-concrete
Tags: custom-footer, responsive, flexible, modern
*/

/* temporary */

.footer-menus > div:first-of-type .footer-menu-list {
    display: none;
}

/* hero button display none */

#about .hero-buttons, #contact-us .hero-buttons{
	display:none;
}
.hero-content.text-center {
  margin-bottom: 50px;
}
/* Global Styles */
* {
    box-sizing: border-box;
}

.icon{display:none;}
p {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 18px; 
    line-height: 1.6;
    color: #000000;
	
}

h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
	color:#da5403;
}
body {
    font-family: 'Roboto', sans-serif;
}



/* Ensure the footer stays at the bottom of the page */
html, body {
    height: 100%; /* Ensures the body takes up full height */
    margin: 0;
    display: flex;
    flex-direction: column; /* Aligns the content and footer vertically */
}

.site-content {
    flex: 1; /* Pushes the footer to the bottom if content is short */
}

/* Top Bar Menu */
.topbar {
  position:absolute;
  top:0;
  right:0;
  background: transparent; /* Cream tone */
  font-size: 14px;
  padding: 10px 0;
 /*  border-bottom: 1px solid #ddd; */
}

.topbar-inner {
  max-width: 1200px;
  margin: 0 auto; /* Centers the inner content */
  padding: 0 20px; /* Adds spacing on left/right */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.topbar-phone {
  color: #fff!important;
}
.topbar-left .topbar-phone {
  color: #ffffff!important;
  text-decoration: none!important;
  font-weight: bold;
}
.topbar-phone:visited{
	color:#ffffff!important;
}
.topbar-menu {
  display: flex;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topbar-menu li a {
  text-decoration: none;
  font-weight: 600;
  color:#FFFFFF;
}

.topbar-menu li a:hover {
  color: #FFFFFF;
}

@media (max-width: 768px) {
  .topbar-inner {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

/* Header Container */
.site-header .container {
    display: flex;
    justify-content: space-between; /
    align-items: center; 
    width: 100%; 
    padding: 10px 20px; 
    box-sizing: border-box;
}
.custom-logo{
	width: 300px;
	
height: auto;
}
/* Transparent Header */
.header-transparent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    z-index: 10;
    padding: 1rem 2rem; /* Adjust padding as needed */
    box-shadow: none;
    transition: background-color 0.3s ease-in-out;
}

.header-transparent .header-logo a,
.header-transparent .primary-navigation a {
    color: #fff; /* White text for visibility over the hero background */
    transition: color 0.3s ease-in-out;
}

.header-transparent .header-logo a:hover,
.header-transparent .primary-navigation a:hover {
    color: #ddd; /* Slightly dimmed text color on hover */
}

/* Sticky Header Scroll Effect (Optional) */
.header-transparent.scrolled {
    background: rgba(0, 0, 0, 0.8); /* Add a semi-transparent background on scroll */
    padding: 0.5rem 2rem;
}

.header-transparent.scrolled .header-logo a,
.header-transparent.scrolled .primary-navigation a {
    color: #fff;
}

.section-title, .content h2 {
  text-shadow: 2px 2px 2px #000;
}

/* General Styles */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
	
}
#home .site-header{
	background-color: rgba(0,0,0,.3);
}
.header-logo {
    flex: 1;
}

.primary-navigation {
    display: flex;
    align-items: center;
    flex: 2;
    justify-content: flex-end; /* Position the menu to the right */
}

.primary-navigation ul {
    display: flex;
    gap: 25px; /* Space between menu items */
    list-style: none;
    margin: 0;
    padding: 0;
}

.primary-navigation a {
    text-decoration: none;
    color: #fff; /* Adjust color based on your design */
    font-size: 30px;
}

/* Mobile Toggle Button */
.mobile-menu-toggle {
    display: none; /* Hidden by default */
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #fff; /* Adjust based on your design */
}

/* Hamburger Icon */
.mobile-menu-toggle::before {
    content: "\2630"; /* Unicode for hamburger icon */
    display: inline-block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.mobile-menu-toggle[aria-expanded="true"]::before {
    content: "\2715"; /* Unicode for X icon */
    transform: rotate(90deg);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .primary-navigation {
        display: none; /* Hide the menu by default on small screens */
        flex-direction: column;
        position: absolute;
        right: 0;
        background: #000; /* Adjust to match your design */
        width: 100%;
        padding: 20px;
		z-index:2;
    }
	#home .primary-navigation{
		top: 80%; /* Below the header */
	}
	
	.primary-navigation{
		top: 25%; /* Below the header */
		z-index:2;
	}
    .primary-navigation ul {
        flex-direction: column;
        gap: 25px; /* Space between menu items */
    }

    .primary-navigation.open {
        display: flex;
    }

    .mobile-menu-toggle {
        display: block; /* Show toggle button on small screens */
    }
}

/* Accessibility Focus State */
.mobile-menu-toggle:focus {
    outline: 2px solid #fff; /* Highlight for accessibility */
}

/* Hero Section */

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}
.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh; /* Adjust height as needed */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center; /* Center text alignment */
}

/* Row 1: Hero Background and Main Image */
.hero-row-image {
    position: relative;
    width: 100%;
    height: 75vh; /* Adjust height as needed */
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.hero-main-image {
    position: absolute;
    bottom: 5%; /* Space from the bottom */
    right: 5%; /* Space from the right */
    width: 500px; /* Main image size */
    max-width: 90%; /* Ensure it scales on smaller screens */
    height: auto; /* Maintain aspect ratio */
    box-shadow: 0 4px 10px #FFF; /* Optional: Add shadow for emphasis */
    border-radius: 8px; /* Optional rounded corners */
}
.hero-main-image img{
    width: 500px;
    height:auto;
}


.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem; /* Space between elements */
    color: #000; /* Adjust text color for contrast */
}

h1.hero-headline {
	max-width:800px;
    font-size: 3rem;
    font-weight: bold;
    margin: 0;
    line-height: 1.2;
    color: #fff; /* Adjust for better contrast */
	text-shadow: 2px 2px 2px #000;
}
.hero-content h1{
	text-shadow: 2px 2px 2px #000000;
	font-size: 3rem
}

.hero-content p {
    font-size: 18px;
    line-height: 1.6;
    color: #fff; /* Slightly dimmed for secondary text */
	text-shadow: 2px 2px 2px #000;
    margin: 0;
    max-width: 600px; /* Optional: limit text width */
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem; /* Space between buttons */
}

.hero-buttons .btn {
    padding: 0.75rem 1.5rem;
    border: 2px solid #fff;
    background: #da5403;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
}

.hero-buttons .btn:hover {
    background: #90d42e;
    color: #000;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
	.topbar-right {
  margin-top: -15%;
}
    .hero {
        height: 100vh;
    }
	.hero-content-wrapper {
	  margin-top: 25%;
	}
    .hero-content-left h1 {
        font-size: 2rem;
    }

    .hero-content-left p {
        font-size: 0.9rem;
    }

    .hero-buttons .btn {
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) {
	
.hero-content h1 {
  text-shadow: 2px 2px 2px #000000;
  font-size: 2rem;
}
    .hero-content-left h1 {
        font-size: 1.75rem;
    }

    .hero-content-left p {
        font-size: 0.85rem;
    }

    .hero-buttons {
        flex-direction: column; /* Stack buttons vertically */
    }

    .hero-buttons .btn {
        width: 100%; /* Full-width buttons */
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero-content-left h1 {
        font-size: 1.5rem;
    }

    .hero-content-left p {
        font-size: 0.75rem;
    }
}

/* Our Key Services Section */

.key-services {
  text-align: center;
  padding: 60px 20px;
  background-color: #f8f8f8;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.key-services .section-small-title {
  font-size: 14px;
  color: #999;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.key-services .section-title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 10px;
}

.key-services .section-subtitle {
  font-size: 18px;
  color: #666;
  margin-bottom: 40px;
}

.key-services .services-cards {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 20px;
}

.key-services .service-card {
  background: #fff;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
  width: 300px;
}

.key-services .service-media img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}

.key-services .service-card .service-media img {
  max-width: 70px; /* Icons */
}

.key-services .service-card .service-media img[alt*="Image"] {
  max-width: 100%; /* Full-width for images */
  border-radius: 8px; /* Optional: Add rounded corners for images */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for a polished look */
}

.key-services .service-card .service-small-title {
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.key-services .service-card .service-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.key-services .service-card .service-description {
  font-size: 14px;
  color: #555;
  margin-bottom: 15px;
}

.key-services .service-card .learn-more {
  font-size: 14px;
  text-decoration: none;
  color: #007BFF;
}

.key-services .service-card .learn-more:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .key-services .services-cards {
	flex-wrap: wrap;
    flex-direction: column;
    gap: 20px;
  }

  .key-services .service-card {
    width: 100%;
  }
}

@media (min-width: 1920px) {
  .key-services .service-card {
    width: 400px;
  }
}

/* About Section - Home */

  .about-section {
    padding: 40px 20px;
    background-color: #f9f9f9; /* was #f9f9f9 */
	background-size: cover;
  	background-position: center;
  	background-repeat: no-repeat;
  }

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

  .about-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
  }

  .about-image {
    flex: 1;
    max-width: 500px;
  }

  .about-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    background-color: #ddd;
  }

  .about-text {
    flex: 1;
  }

  .about-text h2 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .about-text p {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .about-highlights {
    display: flex;
    gap: 20px;
  }

  .highlight {
    flex: 1;
  }

  .highlight h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .highlight p {
    font-size: 16px;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .about-content {
      flex-direction: column;
    }

    .about-highlights {
      flex-direction: column;
    }
  }

  @media (min-width: 1920px) {
    .about-section {
      padding: 60px 40px;
    }

    .about-text h2 {
      font-size: 36px;
    }

    .highlight h3 {
      font-size: 24px;
    }

    .highlight p {
      font-size: 18px;
    }
  }


/* Request Quote Section */ 
.request-quote-section {
	background-size: cover;
  	background-position: center;
 	background-repeat: no-repeat;
}
.request-quote-section > .container {
 	margin: 100px auto;
    max-width: 1200px;
    margin: 100px auto;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    background-color: #fff; /* Ensure it has a white background */
}

.request-quote-content {
	border: 3px solid #000; /* Add border around the container */
	padding-left:20px;
	display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 1rem; /* Adds spacing between text and image */
}

.text-content {
    flex: 1;
    max-width: 45%; /* Keeps the left section proportional */
    text-align: left;
}

.text-content h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.text-content p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.buttons {
    display: flex;
    gap: 1rem;
}

.button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
}

.request-btn {
    background-color: #000;
    color: #fff;
    border: none;
}

.learn-more-btn {
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
}

.image-content {
    flex: 1;
    max-width: 45%; /* Keeps the right section proportional */
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-content img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0; /* Optional for smoother edges */
}

.placeholder-image {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e5e5e5;
    color: #aaa;
    font-size: 1rem;
    text-align: center;
}

@media (max-width: 768px) {
    .request-quote-content {
        flex-direction: column;
    }

    .text-content, .image-content {
        max-width: 100%;
    }

    .image-content img, .placeholder-image {
        height: auto;
    }
}



/* Shared Styles for All Two-Column Sections */
.home .two-columns h2, .home .two-columns h3 {
	text-shadow: 2px 2px 2px #000000;
}


.two-column-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 150px 50px;
    background-color: #d9cbac;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.two-column-container {
    display: flex;
    flex-wrap: nowrap;
    max-width: 1200px;
    width: 100%;
    gap: 20px;
}

/* Two-Column-Left-Specific */
.two-column-section.left .two-column-container {
    flex-direction: row; /* Text on the left, image on the right */
}

/* Two-Column-Right-Specific */
body .two-column-section.right {
    flex-direction: row-reverse;
}

/* Shared Content Styles */
.two-column-content {
    flex: 1 1 50%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.two-column-content h2 {
    font-size: 2em;
    color: #333;
    margin-bottom: 10px;
}

.two-column-content p {
    font-size: 1.1em;
    color: #000000;
    line-height: 1.6;
}

/* Shared Image Styles */
.two-column-image {
    flex: 1 1 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.two-column-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .two-column-container {
        flex-wrap: wrap;
        flex-direction: column;
    }

	.two-column-content,
    .two-column-image {
        flex: 1 1 100%;
        text-align: center;
    }

    .two-column-image img {
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    .two-column-content h2 {
        font-size: 1.5em;
    }

    .two-column-content p {
        font-size: 18px;
    }
}

@media (max-width: 1024px) {
	section.two-columns{
		background-position: 20% 16%;
	}

}


main section:nth-of-type(1) h2{
	color:#CB9700!important;
}

#home main section:nth-of-type(1) p{
	color:#fff!important;
}

main section:nth-of-type(1) .content .columns{
	display:none;
}





/* General Two Columns Styles */
section.two-columns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: 100%;
    background: #fff;
    padding: 20px;
    position: relative;
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Switch columns based on class */
section.two-columns.switch-columns {
    flex-direction: row-reverse;
	padding:5% 0;
}
section.two-columns{
	padding: 5% 0;
}
.content, .image {
    flex: 1;
}
/*
.content {
    padding-right: 20px;
}

*/
.two-columns  .content {
	padding: 0 6% 0 11%; /* was 5% */
}

.two-columns  .image {
	padding: 0 5% 0 0%;  /* was 0 5% */
}
@media (max-width: 1800px){
	section.two-columns{
		padding: 5%;
	}

.two-columns  .content {
	padding: 0 5% 0 0; /* was 5% */
}

.two-columns  .image {
	padding: 0;  /* was 0 5% */
}

}
.two-columns.switch-columns .content {
	padding: 5% 13% 5% 5%;
	width: 100%;
	max-width: 50%;
}

.two-columns.switch-columns .image {
	padding: 0 0 0 5%; /* was  0 6% 0 15% */
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 616px;
    max-width: 50%; /* Ensures consistent sizing was 600px */
    height: 640px; /* Set uniform height */
}


.content h2, .content h1 {
    margin: 0 0 10px;
}

.columns {
    display: flex;
    margin-top: 20px;
}

.column {
    flex: 1;
    padding-right: 10px;
}

section.two-columns .buttons {
    margin-top: 20px;
}



.buttons a:nth-of-type(2) {
    display: none;
}


/* Media Section */
.image img, .image video, .embedded-video iframe, .two-columns-slider .slide img, .two-columns-switch .image img {
    max-width: 100%;
   /* width: 616px; */ /* was 100% */
    height: 600px; /* 100% Ensures uniform height */
    object-fit: cover; /* Ensures proper scaling without stretching */
}

.embedded-video {
    width: 100%;
    height: 400px; /* Match uniform height */
    position: relative;
    overflow: hidden;
}

.embedded-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.two-columns-slider {
    width: 100%;
    max-width: 600px; /* Adjust to match image/video size */
    display: block;
    position: relative;
    overflow: hidden;
    height: 400px; /* Ensure consistent height */
}

.two-columns-slider .slide {
    width: 100%;
    max-width: 600px; /* Ensures consistent size */
    height: 400px; /* Maintain uniform height */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Responsive Adjustments */
@media (max-width: 991px){
	
	.two-columns .content {
		padding: 0;
		margin-bottom: 10%;
		max-width: 100%;
	}

	.two-columns .image {
		padding: 0;  
		max-width: 100%; 
	}
}
/* Responsive for Switched Columns */
@media (max-width: 990px){

	.two-columns.switch-columns .content {
	    padding: 0;
	    margin-bottom: 10%;
		max-width: 75%;
		margin-top: 15%;
	}
	.two-columns.switch-columns .image {
	    padding: 0;
		max-width: 75%;
		margin-top:100px;
	}
	
	.two-columns .content {
	    padding: 0;
	    margin-bottom: 10%;
		max-width: 75%;
		margin-top: 15%;
		
	}
	.two-columns .image {
	    padding: 0;
		max-width: 75%;
	}

}
@media (max-width: 768px){
    .two-columns.switch-columns .content {
        margin-top: 0!important;    
    }
}

@media (min-width: 769px) and (max-width: 1024px){
	
	
	#about-us .two-col-nested-three.bg-image {
		background-position: 20% 16%!important;
	}

	#about-us .row.top-row  .col-left {
		margin-top:100px;
		padding: 100px;
	}

	#about-us .row.top-row .col-right {
    	margin-top: 10%;
	}

}
@media (max-width: 1024px) { /* was 768xp  then  991px adjusted and tested to 1024px */ 
    section.two-columns {
        flex-direction: column !important;
    }
	#about-us section.two-columns {
		background-position: 50% 16%!important;
	}
	#about-us > main.content > section.two-columns > div.content {
		margin-top:0;
		width:100%!important;
		
	}
	#about-us section.two-columns .image{
		padding:0!important;
	}
	#about-us > main.content > section.two-columns > div.image > img {
		/* margin-top:100px; */
		width:100%!important;
		
	}
  section.two-columns  .content {
        order: 1;
    }
    
    .image {
        order: 2;
    }

    .columns {
        flex-direction: column;
    }

    .column {
        padding-right: 0;
        margin-bottom: 20px;
    }

    .two-columns .image, .two-columns-slider, .embedded-video {
        max-width: 75%;
        height: 300px; /* Adjusted for smaller screens */
		margin-top: 50px;
    }
}

/* Default size for desktop */
.embedded-video iframe {
    width: 75%;
    height: 100%;
}

/* For tablets (screens between 768px and 1024px) */
@media (max-width: 1024px) {
    .embedded-video iframe {
        width: 100%;
        height: 375px;
    }
}

/* For mobile devices (screens 768px or smaller) */
@media (max-width: 768px) {
    .embedded-video iframe {
        width: 75%;
        height: 300px; /* Keeps the aspect ratio */
    }
	#about-us .row.top-row  .col-left {
		margin-top:200px;

	}	
	#about-us .row.top-row .col-right {
    	margin-top: 25%;
	}
}












/* Call To Action - Section */

.cta-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
	background-color: #da5403;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff; /* Ensure text remains readable over the background image */
}


.cta-section .inner-container {
    max-width: 1200px;
    text-align: center;
    border: 1px solid #000;
	margin: 150px 50px;
    padding: 50px 300px;
    background-color: #d9cbac;
}

.cta-section .cta-heading {
    font-size: 2rem;
    font-weight: bold;
    color: #000;
    margin-bottom: 10px;
}

.cta-section .cta-subheading {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 20px;
}

.cta-section .cta-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.cta-section .cta-button {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 1rem;
    border: 1px solid #000;
    transition: all 0.3s ease-in-out;
}

.cta-section .cta-button.primary {
    background-color: #000;
    color: #fff;
}

.cta-section .cta-button.primary:hover {
    background-color: #d9cbac;
	color: #000000;
}

.cta-section .cta-button.secondary {
    background-color: #da5403;
    color: #000;
}

.cta-section .cta-button.secondary:hover {
    background-color: #000000;
	color: #FFFFFF;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .cta-section .cta-heading {
        font-size: 1.5rem;
    }

    .cta-section .cta-subheading {
        font-size: 1rem;
    }

    .cta-section .cta-buttons {
        flex-direction: column;
        gap: 10px;
    }
}

/* Featured Section */
.featured-section {
    padding: 50px 20px;
    background-color: #da5403;
    text-align: center;
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.featured-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.featured-section .featured-heading {
    font-size: 36px;
    color: #000000;
	text-shadow: #daccad 3px 3px 3px;
    margin-bottom: 40px;
}

.featured-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between; /* Spreads items evenly */
}

.featured-column {
    flex: 1 1 calc(33.333% - 20px); /* Default: 3 columns */
	
    background-color: #000000;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    text-align: left;
    transition: transform 0.3s ease-in-out;
    box-sizing: border-box;
}

.featured-column:hover {
    transform: translateY(-10px);
}



.featured-image img {
    width: 100%; /* Responsive image */
    max-width: 400px; /* Limit size */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px;
    margin-bottom: 15px;
}

.featured-title {
    font-size: 24px;
    color: #da5403;
    margin-bottom: 10px;
}

.featured-subtitle {
    font-size: 16px;
    color: #58595B;
    margin-bottom: 20px;
}

.featured-column p{
	color: #d9cbac;
}
.featured-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #da5403;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.featured-button:hover {
    background-color: #d9cbac;
	color: #000000;
}

/* Responsive Design */

/* Tablets: Two columns */
@media (max-width: 1024px) {
    .featured-column {
        flex: 1 1 calc(50% - 20px); /* Two columns on tablets */
    }
	.cta-section .inner-container {
		margin:0;
		padding:50px;
	}
}

/* Mobile: Single column */
@media (max-width: 768px) {
    .featured-row {
        flex-direction: column;
        gap: 20px;
    }

    .featured-column {
        flex: 1 1 100%; /* Full width on mobile */
    }
	.cta-section .inner-container {
		margin:0;
		padding:50px;
	}
}


/* *********************************
 * 
 * === FLEXIBLE HERO SECTION === 
 * 
 *  ******************************/

.flexible-hero-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; /* Default center, overridden by hero alignment */
    color: white; /* Default text color */
    padding: 0 15px;
}

/* Hero Height Options */
.hero-full {
    height: 100vh;
    min-height: 700px;
}

.hero-half {
    height: 50vh;
    min-height: 350px;
}

/* Background Image */
.flexible-hero-section .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Background Video */
.flexible-hero-section .hero-background video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: -1;
}

/* Embedded Video */
.flexible-hero-section .hero-background iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    z-index: -1;
    border: none;
}

/* Background Slider */
.flexible-hero-section .background-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.flexible-hero-section .background-slider .slider-item {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.flexible-hero-section .background-slider .slider-item.active {
    opacity: 1;
}

/* Hero Content */
.flexible-hero-section .hero-content {
    position: relative;
    z-index: 2;
    text-align: inherit;
    max-width: 80%;
}

.flexible-hero-section .hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
    text-transform: none;
    letter-spacing: normal;
}

.flexible-hero-section .hero-content p {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* Subheadline Slider */
.hero-subheadline-slider {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    overflow: hidden;
}

.hero-subheadline-slider p {
    opacity: 0;
    position: absolute;
    width: 100%;
    text-align: center;
    transition: opacity 1s ease-in-out;
}

.hero-subheadline-slider p.active {
    opacity: 1;
}

/* Buttons */
.flexible-hero-section .hero-buttons {
    margin-top: 20px;
}

.flexible-hero-section .hero-buttons a {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #CB9700;
    color: #0C2340;
    background-color: #CB9700;
    text-decoration: none;
    font-weight: 400;
    margin: 5px;
    transition: background 0.3s ease, color 0.3s ease;
}

.flexible-hero-section .hero-buttons a:hover {
    background-color: #eef1f3;
    color: #0C2340;
	font-weight:700;
}

/* Hero Alignment */
.text-left {
    text-align: left;
}

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

.text-right {
    text-align: right;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .flexible-hero-section .hero-content h1 {
        font-size: 2.5rem;
    }

    .flexible-hero-section .hero-content p {
        font-size: 1.2rem;
    }

    .flexible-hero-section {
        padding: 30px;
    }
}


/* ************************************************
 * 
 * ====== 2 COLUMN 3 NESTED COLUMN SECTION ======
 * 
 *  ******************************************** */
.two-col-nested-three.bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; /* Prevents the image from repeating */
}

.two-col-nested-three {
    padding: 60px 0;
    color: #0C2340; /* Dark Blue */
    position: relative;
    background-color: #ffffff; /* Ensure white background */
}

/* Container */
.two-col-nested-three .container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 5%;
}

/* ====== Two Main Columns Layout ====== */
.two-col-nested-three .row {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 40px;
}

/* Left Column (Text) */
.two-col-nested-three .col-left {
    flex: 1.2; /* Make text section slightly wider */
}

/* Subheadline */
.two-col-nested-three .subheadline {
    font-size: 1.2rem;
    color: #005EB8; /* Media Blue */
    margin-bottom: 10px;
    font-weight: bold;
}

/* Headline */
.two-col-nested-three .headline {
    font-size: 2.8rem;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Paragraph Text */
.two-col-nested-three .main-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 20px;
}

/* Right Column (Image) */
.two-col-nested-three .col-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.two-col-nested-three .col-right img {
    max-width: 100%;
    height: auto;
    border-radius: 0;
}

/* ====== Nested Columns Layout ====== */
.two-col-nested-three .nested-columns {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    text-align: center;
    padding-top: 20px;
}

/* Individual Nested Column */
.two-col-nested-three .nested-columns .col {
    flex: 1;
    max-width: 30%;
}

/* Icons in Nested Columns */
.two-col-nested-three .nested-columns .col img {
    max-width: 60px;
    height: auto;
    margin-bottom: 15px;
}

/* Nested Column Headings */
.two-col-nested-three .nested-columns .col .column-heading {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #0C2340; /* Dark Blue */
}

/* Nested Column Text */
.two-col-nested-three .nested-columns .col .column-text {

    color: #666;
    line-height: 1.5;
}

/* ====== RESPONSIVE STYLES ====== */

/* Tablet View (1024px and below) */
@media (max-width: 1024px) {
    /* Stack columns */
    .two-col-nested-three .row {
        flex-direction: column;
        text-align: center;
    }

    .two-col-nested-three .col-left,
    .two-col-nested-three .col-right {
        flex: 100%;
    }

    .two-col-nested-three .col-right img {
        max-width: 80%;
    }

    /* Stack nested columns */
    .two-col-nested-three .nested-columns {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .two-col-nested-three .nested-columns .col {
        max-width: 80%;
        margin-bottom: 20px;
    }
}

/* Mobile View (768px and below) */
@media (max-width: 768px) {
    /* Adjust padding */
    .two-col-nested-three {
        padding: 40px 0;
    }

    .two-col-nested-three .headline {
        font-size: 2.2rem;
    }

    .two-col-nested-three .subheadline {
        font-size: 1rem;
    }

    .two-col-nested-three .main-text {
        font-size: 0.95rem;
    }

    .two-col-nested-three .col-right img {
        max-width: 100%;
    }

    /* Nested columns full width */
    .two-col-nested-three .nested-columns .col {
        max-width: 100%;
    }
}

/* Small Mobile View (480px and below) */
@media (max-width: 480px) {

	#our-services .hero-content.text-left {
        max-width: 90%;
	}
	
	
    #our-services > main > section.hero-section > .hero-content > h1 {
        font-size: 1.5rem !important;
        padding-bottom: 0 !important;
    }
    #our-services > main > section.hero-section > .hero-content > p {
        font-size: .875rem !important;
        padding-bottom: 0 !important;
        margin-bottom: 0!important;
    }

    .two-col-nested-three {
        padding: 30px 0;
    }

    .two-col-nested-three .headline {
        font-size: 2rem;
    }

    .two-col-nested-three .subheadline {
        font-size: 0.9rem;
    }

    .two-col-nested-three .main-text {
        font-size: 0.9rem;
    }

    .two-col-nested-three .col-right img {
        max-width: 100%;
    }

    /* Nested Columns - Full Width */
    .two-col-nested-three .nested-columns .col {
        max-width: 100%;
        margin-bottom: 15px;
    }
	
	
}

/*  *****************************************
 *  
 *  ==== 1 Column Section ======= 
 * 
 * *****************************************/ 
/* ==========================================================================
   One Column Section - General Styling
   ========================================================================== */
.one-column-section {
  width: 100%;
  min-height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px;
  position: relative;
  /* Fallback background properties */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Content Container */
.one-column-section .content {
  max-width: 84%;
  margin: 0 auto;
}


/* Target the third one-column-section */
.one-column-section.has-bg-image.map {
	padding: 150px;
}
/* ==========================================================================
   Typography & Spacing
   ========================================================================== */
.one-column-section h3,
.one-column-section h2 {
  margin: 0;
  padding: 0;
}

.one-column-section h2 {
  font-size: 2.5rem;
  font-weight: bold;
}

.one-column-section h3 {
  font-size: 2rem;
  font-weight: normal;
}

.one-column-section p {
  line-height: 1.6;
  margin: 0;
  padding: 0;
	
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.one-column-section .buttons {
  margin-top: 20px;
}

.one-column-section .btn {
  display: inline-block;
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  margin: 5px;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.one-column-section .btn:hover,
.one-column-section .btn:focus {
  background-color: #555;
  color: #fff;
}

/* ==========================================================================
   Background Modifiers
   ========================================================================== */
.one-column-section.has-bg-image {
  /* Inline style handles the image, ensure background color does not override */
  background-color: transparent;
}

.one-column-section.has-bg-color {
  /* Ensure no background image is displayed */
  background-image: none;
}


p.sq-ft{
	width: 200px!important;

}
/* ==========================================================================
   Responsive Styles
   ========================================================================== */

/* Medium devices (tablets, up to 1024px) */
@media screen and (max-width: 1024px) {
  .one-column-section {
    padding: 60px 15px;
    min-height: 400px;
  }
  
  .one-column-section h2 {
    font-size: 2rem;
  }
  
  .one-column-section h3 {
    font-size: 1.75rem;
  }
  
  .one-column-section p {
    font-size: 18px;
  }
  .one-column-section .short-info p {
    font-size: 24px;
  } 
}

/* Small devices (landscape phones, up to 768px) */
@media screen and (max-width: 768px) {
  .one-column-section {
    padding: 40px 10px;
    min-height: auto;
    /* flex-direction: column; */
  }
  
  .one-column-section .content {
    padding: 10px;
  }
  
  .one-column-section h2 {
    font-size: 1.75rem;
  }
  
  .one-column-section h3 {
    font-size: 1.5rem;
  }
  
  .one-column-section p {
    font-size: 18px;
  }
  .one-column-section .short-info p {
    font-size: 24px;
  }  
  .one-column-section .btn {
    padding: 8px 16px;
    margin: 4px;
  }
}

/* Extra small devices (portrait phones, up to 480px) */
@media screen and (max-width: 480px) {
  .one-column-section {
    padding: 30px 10px;
  }
  
  .one-column-section h2 {
    font-size: 1.5rem;
  }
  
  .one-column-section h3 {
    font-size: 1.25rem;
  }
  
  .one-column-section p {
    font-size: 18px;
  }

  .one-column-section .btn {
    padding: 6px 12px;
    margin: 3px;
    
  }
  .one-column-section a.button.blue-btn{
    font-size: 0.85rem!important;
  }

}

/* ****************************
 * 
 *  Contact Form *
 * 
**************************** */
/* RG CUSTOM FORM */

/* Contact Form Styling */
.form-container {
    background-color: #bebebe;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 900px;
    margin: 0 auto;
}

.rgcf-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.form-row > div {
    flex: 1;
    min-width: 200px;
}

.rgcf-form label {
    font-weight: bold;
    color: #000;
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
}

.rgcf-form input[type="text"],
.rgcf-form input[type="email"],
.rgcf-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: #fff;
    color: #333;
}

.rgcf-form textarea {
    height: 150px;
    resize: vertical;
}

.rgcf-form button[type="submit"] {
    padding: 14px 24px;
    background-color: #000000;
    color: #fff;
	text-decoration:none;
	border:2px solid #fff;
	border-radius:4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-self: flex-start;
}

.rgcf-form button[type="submit"]:hover {
    background-color: #ffffff;
	color: #000;
}


/* ****************************
 * 
 *  Footer Hero *
 * 
**************************** */
.footer-main {
    background-color: #000; /* Set background color to black */
    color: #fff; /* Set text color to white */
    padding: 50px 40px;
    font-family: Arial, sans-serif;
}

.footer-main a {
    color: #fff;
    text-decoration: none;
}

.footer-main ul {
    list-style: none;
}

.footer-hero {
    text-align: center;
    margin-bottom: 30px;
}

.footer-headline {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #da5403; /* Texas logo color */
}

.footer-subheadline {
    font-size: 16px;
    margin-bottom: 20px;
    color: #ccc; /* Slightly lighter white for subheadline */
}

.footer-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.footer-button {
    padding: 10px 15px;
    font-size: 14px;
    text-decoration: none;
    border: 2px solid #fff; /* White border */
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
    color: #fff; /* White text */
}

.footer-button-1 {
    background-color: #da5403; /* Orange background */
    color: #000; /* Black text */
}

.footer-button-1:hover {
    background-color: #90d42e; /* Green background on hover */
    color: #000; /* Black text */
}

.footer-button-2 {
    background-color: #90d42e; /* Green background */
    color: #000; /* Black text */
}

.footer-button-2:hover {
    background-color: #da5403; /* Orange background on hover */
    color: #000; /* Black text */
}

/* Footer Content */
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 20px;
    border-bottom: 1px solid #fff;
}

.footer-content p {
    color: #fff;
}

/* Footer Info Section */
.footer-info {
    display: flex;
    flex-direction: column;
    align-items: left; /* Centers the logo */
    text-align: left; /* Left-aligns Address and Contact */
    font-size: 14px;
    margin-bottom: 30px; /* Adds space between info and other elements */
}

.footer-logo {
    margin-bottom: 15px; /* Adds space below the logo */
}

.footer-logo img {
    max-width: 200px; /* Adjusts logo size */
}

/* Address and Contact Styling */
.footer-address-contact {
    margin-top: 15px; /* Adds spacing above Address and Contact */
}

.footer-address,
.footer-contact {
    margin: 10px 0; /* Adds spacing between Address and Contact */
}

/* Footer Menus */
.footer-menus {
    display: flex;
    justify-content: center; /* Centers the menu sections */
    gap: 50px;
    flex-wrap: wrap; /* Makes it responsive */
}

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

.footer-menu-list li {
    margin-bottom: 45px;
}

.footer-menu-list li a {
    text-decoration: none;
    color: #fff; /* Matches other links */
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-menu-list li a:hover {
    color: #ccc; /* Light gray hover effect */
}

/* Footer Social Icons */
.footer-social {
    margin: 20px 0; /* Add margin around the social icons */
    text-align: left; /* Align the content to the left */
}

ul.footer-social {
    display: flex; /* Ensures the icons are laid out inline */
    gap: 10px; /* Adds spacing between the icons */
    list-style: none; /* Removes default list styles */
    padding: 0;
    margin: 0;
    justify-content: flex-start; /* Aligns icons to the left */
}

.footer-social ul li {
    display: inline-block; /* Ensures each list item behaves like an inline element */
}

.footer-social ul li a {
    display: flex; /* Centers the icon within the link */
    justify-content: center;
    align-items: center;
    font-size: 18px; /* Icon size */
    color: #fff; /* White icon color */
    width: 40px; /* Fixed width for icons */
    height: 40px; /* Fixed height for icons */
    border-radius: 50%; /* Circular icon background */
    background-color: #333; /* Dark gray background */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.footer-social ul li a:hover {
    background-color: #555; /* Light gray background on hover */
    color: #fff; /* Keeps icon color white */
}


/* Footer Bottom Section */
.footer-bottom {
    display: flex;
    justify-content: space-between; /* Aligns copyright and links */
    align-items: center;
    padding: 15px 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
    border-top: 1px solid #fff; /* Divider line */
}

.footer-bottom p {
    margin: 0;
    font-size: 14px;
    color: #fff;
}

.footer-links {
    list-style: none;
    display: flex;
    gap: 15px; /* Reduces spacing between links */
    padding: 0;
    margin: 0;
}

.footer-links li a {
    text-decoration: none;
    color: #fff; /* White text for links */
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-links li a:hover {
    color: #ccc; /* Light gray on hover */
}

/* Responsive Styling */
@media (max-width: 768px) {
.footer-menu-list ul,  ul.footer-links {
  list-style: none;       
  padding: 0;         
  margin: 0 auto!important;         
  text-align: center!important;    
}

.footer-menu-list ul li, ul.footer-links {
  display: block!important;         /* Stacks the list items vertically */
  margin: 10px 0!important;          /* Optional: spacing between items */
}


	
	
	
    .footer-hero {
        text-align: center;
    }

    .footer-content {
		
        display:block;
        text-align: center;
        gap: 20px;
    }

    .footer-info {
        text-align: center;
    }

    .footer-menus {
        flex-direction: column;
        gap: 15px;
    }

    .footer-bottom {
        flex-direction: column; /* Stack copyright and links vertically */
        gap: 10px;
    }
}