/* =========================================================
DUNCAN CONCRETE LLC
MAIN WEBSITE STYLES
PART 1 OF 3
========================================================= */


/* =========================================================
1. VARIABLES
========================================================= */

:root {
--orange: #f28c00;
--orange-dark: #d87500;

--black: #111111;
--dark: #191919;
--dark-gray: #252525;

--white: #ffffff;
--off-white: #f7f7f5;
--light-gray: #eeeeee;
--gray: #6f6f6f;
--border: #dddddd;

--max-width: 1200px;

--shadow:
0 15px 40px rgba(0, 0, 0, 0.10);

--transition:
all 0.3s ease;
}


/* =========================================================
2. RESET
========================================================= */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
margin: 0;

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

color: var(--black);

background: var(--white);

line-height: 1.7;

overflow-x: hidden;
}

img {
display: block;

width: 100%;
max-width: 100%;
}

a {
color: inherit;

text-decoration: none;
}

button,
input,
textarea,
select {
font: inherit;
}

.container {
width: min(1200px, 92%);

margin: 0 auto;
}


/* =========================================================
3. TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4 {
line-height: 1.15;
}

h1 {
font-size:
clamp(
3rem,
7vw,
6.5rem
);

font-weight: 900;

letter-spacing: -2px;
}

h2 {
font-size:
clamp(
2.2rem,
5vw,
4rem
);

font-weight: 800;

letter-spacing: -1px;
}

h3 {
font-size: 1.35rem;

font-weight: 800;
}

p {
color: var(--gray);
}


/* =========================================================
4. GLOBAL HEADER
========================================================= */

.site-header {
width: 100%;

position: relative;

top: auto;
left: auto;

z-index: 1000;

background: #111111;

border-bottom:
1px solid #2b2b2b;
}


/* SUPPORTS BOTH OLD AND NEW HEADER CLASSES */

.header-container,
.nav-container {
width: min(1200px, 92%);

min-height: 80px;

margin: 0 auto;

display: flex;

align-items: center;

justify-content: space-between;

gap: 30px;
}


/* =========================================================
5. LOGO
========================================================= */

.logo {
display: inline-block;

flex-shrink: 0;

color: #ffffff;

font-size: 22px;

font-weight: 900;

line-height: 1.1;

letter-spacing: 1px;

white-space: nowrap;
}

.logo span {
color: var(--orange);
}


/* OLD LOGO SUPPORT */

.logo-main {
display: block;

color: #ffffff;

font-size: 1.55rem;

font-weight: 900;

letter-spacing: 2px;
}

.logo-sub {
display: block;

margin-top: 5px;

color: var(--orange);

font-size: 0.62rem;

font-weight: 800;

letter-spacing: 3px;
}


/* =========================================================
6. NAVIGATION
========================================================= */

/* SUPPORTS NEW .main-nav AND OLD .main-navigation */

.main-nav,
.main-navigation {
display: flex;

flex-direction: row;

align-items: center;

justify-content: flex-end;

gap: 26px;

width: auto;

height: auto;

position: static;

margin: 0;

padding: 0;

background: transparent;
}


.main-nav a,
.main-navigation a {
display: inline-flex;

align-items: center;

justify-content: center;

position: relative;

color: #ffffff;

font-size: 14px;

font-weight: 700;

line-height: 1.2;

white-space: nowrap;

transition: var(--transition);
}


.main-nav a:hover,
.main-navigation a:hover,
.main-nav a.active,
.main-navigation a.active {
color: var(--orange);
}


/* REMOVE OLD UNDERLINE EFFECT */

.main-nav a::after,
.main-navigation a::after {
display: none;
}


/* FREE ESTIMATE BUTTON */

.main-nav .nav-button,
.main-navigation .nav-estimate {
padding: 12px 20px;

background: var(--orange);

color: #ffffff;

border-radius: 6px;
}


.main-nav .nav-button:hover,
.main-navigation .nav-estimate:hover {
background: var(--orange-dark);

color: #ffffff;

transform: translateY(-1px);
}


/* OLD MOBILE TOGGLE NOT USED */

.menu-toggle {
display: none;
}


/* =========================================================
7. GENERAL BUTTONS
========================================================= */

.btn {
display: inline-flex;

align-items: center;

justify-content: center;

min-height: 54px;

padding: 0 28px;

border: 2px solid transparent;

cursor: pointer;

font-size: 0.8rem;

font-weight: 900;

letter-spacing: 0.8px;

transition: var(--transition);
}

.btn-primary {
background: var(--orange);

color: #ffffff;
}

.btn-primary:hover {
background: var(--orange-dark);

transform: translateY(-2px);
}

.btn-dark {
background: var(--black);

color: #ffffff;
}

.btn-dark:hover {
background: var(--orange);
}

.btn-outline {
border-color:
rgba(255,255,255,.8);

color: #ffffff;

background: transparent;
}

.btn-outline:hover {
background: #ffffff;

color: var(--black);
}


/* =========================================================
8. HOME HERO
========================================================= */

.hero-section {
min-height: 760px;

position: relative;

display: flex;

align-items: center;

color: #ffffff;

background:
linear-gradient(
rgba(0,0,0,.58),
rgba(0,0,0,.75)
),
url("../images/concrete-project.jpg")
center / cover no-repeat;
}

.hero-overlay {
position: absolute;

inset: 0;

background:
linear-gradient(
90deg,
rgba(0,0,0,.60),
rgba(0,0,0,.10)
);
}

.hero-content {
position: relative;

z-index: 2;

width: min(1200px, 92%);

margin: 0 auto;

padding: 100px 0;
}

.hero-label {
display: flex;

align-items: center;

gap: 12px;

margin-bottom: 22px;

color: var(--orange);

font-size: 0.75rem;

font-weight: 900;

letter-spacing: 3px;
}

.hero-label span {
width: 35px;

height: 2px;

background: var(--orange);
}

.hero-content h1 {
max-width: 950px;

color: #ffffff;
}

.hero-content h1 span {
color: var(--orange);
}

.hero-description {
max-width: 650px;

margin-top: 28px;

color: #e2e2e2;

font-size: 1.05rem;
}

.hero-buttons {
display: flex;

flex-wrap: wrap;

gap: 15px;

margin-top: 32px;
}


/* =========================================================
9. HOME TRUST
========================================================= */

.hero-trust {
display: flex;

align-items: center;

flex-wrap: wrap;

gap: 24px;

margin-top: 55px;
}

.trust-item {
display: flex;

flex-direction: column;
}

.trust-item strong {
color: #ffffff;

font-size: 0.75rem;

letter-spacing: 1.3px;
}

.trust-item span {
color: #aaaaaa;

font-size: 0.6rem;

letter-spacing: 1px;
}

.trust-divider {
width: 1px;

height: 34px;

background:
rgba(255,255,255,.25);
}


/* =========================================================
10. SECTION BASICS
========================================================= */

.intro-section,
.services-preview,
.values-section,
.commitment-section,
.projects-section {
padding: 100px 0;
}

.section-label {
display: inline-block;

margin-bottom: 14px;

color: var(--orange);

font-size: 0.72rem;

font-weight: 900;

letter-spacing: 2.5px;
}

.section-heading {
max-width: 750px;

margin-bottom: 55px;
}

.section-heading.centered {
margin-left: auto;

margin-right: auto;

text-align: center;
}

.section-heading p {
margin-top: 18px;

font-size: 1rem;
}

.section-heading h2 span {
color: var(--orange);
}


/* =========================================================
11. HOME INTRO
========================================================= */

.intro-grid {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 80px;

align-items: center;
}

.intro-heading h2 span {
color: var(--orange);
}

.intro-text p {
max-width: 550px;

font-size: 1.04rem;
}

.text-link {
display: inline-flex;

align-items: center;

gap: 10px;

margin-top: 24px;

color: var(--black);

font-size: 0.8rem;

font-weight: 900;
}

.text-link span {
color: var(--orange);

font-size: 1.2rem;
}


/* =========================================================
12. FEATURE PHOTO
========================================================= */

.feature-photo {
height: 600px;

position: relative;

overflow: hidden;
}

.feature-photo img {
width: 100%;

height: 100%;

object-fit: cover;
}

.feature-photo-overlay {
position: absolute;

inset: 0;

background:
linear-gradient(
90deg,
rgba(0,0,0,.70),
rgba(0,0,0,.05)
);
}

.feature-photo-content {
position: absolute;

left: 8%;

bottom: 12%;

z-index: 2;

color: #ffffff;
}

.feature-photo-content span {
color: var(--orange);

font-size: 0.7rem;

font-weight: 900;

letter-spacing: 3px;
}

.feature-photo-content h2 {
margin-top: 15px;

color: #ffffff;
}


/* =========================================================
13. HOME SERVICES
========================================================= */

.services-preview {
background: var(--off-white);
}

.services-grid {
display: grid;

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

gap: 20px;
}

.service-card {
overflow: hidden;

background: #ffffff;

border: 1px solid #e8e8e8;

transition: var(--transition);
}

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

box-shadow: var(--shadow);
}

.service-image {
height: 250px;

overflow: hidden;
}

.service-image img {
width: 100%;

height: 100%;

object-fit: cover;

transition:
transform .5s ease;
}

.service-card:hover .service-image img {
transform: scale(1.05);
}

.service-content {
padding: 28px;
}

.service-number {
color: var(--orange);

font-size: .72rem;

font-weight: 900;
}

.service-content h3 {
margin: 12px 0;
}

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

.service-link {
display: inline-block;

margin-top: 18px;

color: var(--black);

font-size: .75rem;

font-weight: 900;
}

.services-button,
.projects-button {
margin-top: 45px;

text-align: center;
}


/* =========================================================
14. VALUES
========================================================= */

.values-grid {
display: grid;

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

gap: 20px;
}

.value-card {
padding: 38px 28px;

background: #ffffff;

border: 1px solid var(--border);

transition: var(--transition);
}

.value-card:hover {
background: var(--black);

color: #ffffff;

transform: translateY(-4px);
}

.value-card:hover p {
color: #aaaaaa;
}

.value-number {
margin-bottom: 22px;

color: var(--orange);

font-size: .72rem;

font-weight: 900;
}

.value-card h3 {
margin-bottom: 12px;
}


/* =========================================================
15. COMMITMENT
========================================================= */

.commitment-section {
background: var(--off-white);
}

.commitment-grid {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 80px;

align-items: center;
}

.commitment-image {
height: 560px;

overflow: hidden;
}

.commitment-image img {
width: 100%;

height: 100%;

object-fit: cover;
}

.commitment-content h2 span {
color: var(--orange);
}

.commitment-content p {
max-width: 550px;

margin-top: 18px;
}


/* =========================================================
16. PROJECT GRID
========================================================= */

.projects-grid {
display: grid;

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

grid-auto-rows: 260px;

gap: 15px;
}

.project-image {
position: relative;

overflow: hidden;
}

.project-image img {
width: 100%;

height: 100%;

object-fit: cover;

transition:
transform .5s ease;
}

.project-image:hover img {
transform: scale(1.05);
}

.project-large {
grid-row: span 2;
}


/* =========================================================
17. GENERIC FINAL CTA
========================================================= */

.final-cta {
min-height: 560px;

position: relative;

display: flex;

align-items: center;

justify-content: center;

text-align: center;

color: #ffffff;

background:
linear-gradient(
rgba(0,0,0,.72),
rgba(0,0,0,.78)
),
url("../images/dump-trailer.jpg")
center / cover no-repeat;
}

.final-cta-overlay {
position: absolute;

inset: 0;

background:
rgba(0,0,0,.20);
}

.final-cta-content {
position: relative;

z-index: 2;

width: min(850px, 92%);

margin: 0 auto;
}

.final-cta-content h2 {
color: #ffffff;
}

.final-cta-content h2 span {
color: var(--orange);
}

.final-cta-content p {
max-width: 650px;

margin: 22px auto 30px;

color: #dddddd;
}
/* =========================================================
DUNCAN CONCRETE LLC
MAIN WEBSITE STYLES
PART 2 OF 3
========================================================= */


/* =========================================================
18. STANDARD INNER-PAGE HERO
========================================================= */

.page-hero {
min-height: 520px;

position: relative;

display: flex;

align-items: center;

color: #ffffff;

background:
linear-gradient(
rgba(0,0,0,.63),
rgba(0,0,0,.77)
),
url("../images/dump-trailer.jpg")
center / cover no-repeat;
}

.page-hero-content {
position: relative;

z-index: 2;

width: min(1200px, 92%);

margin: 0 auto;

padding: 80px 0;
}

.page-hero-content h1 {
max-width: 900px;

color: #ffffff;
}

.page-hero-content h1 span {
color: var(--orange);
}

.page-hero-content p {
max-width: 650px;

margin-top: 22px;

color: #dddddd;

font-size: 1.05rem;
}


/* =========================================================
19. ABOUT PAGE
========================================================= */

.about-story {
padding: 100px 0;
}

.about-grid {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 80px;

align-items: center;
}

.about-image {
height: 560px;

overflow: hidden;
}

.about-image img {
width: 100%;

height: 100%;

object-fit: cover;
}

.about-content h2 span {
color: var(--orange);
}

.about-content p {
max-width: 560px;

margin-top: 18px;
}


/* MISSION */

.mission-section {
padding: 110px 0;

background: var(--black);

color: #ffffff;
}

.mission-content {
width: min(850px, 92%);

margin: 0 auto;

text-align: center;
}

.mission-content h2 {
color: #ffffff;
}

.mission-content h2 span {
color: var(--orange);
}

.mission-content p {
max-width: 700px;

margin: 22px auto 0;

color: #aaaaaa;
}


/* ABOUT VALUES */

.about-values {
padding: 100px 0;

background: var(--off-white);
}

.about-values-grid {
display: grid;

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

gap: 20px;
}

.about-value {
padding: 38px 30px;

background: #ffffff;

border: 1px solid var(--border);

transition: var(--transition);
}

.about-value:hover {
background: var(--black);

color: #ffffff;

transform: translateY(-4px);
}

.about-value:hover p {
color: #aaaaaa;
}

.about-value-number {
margin-bottom: 22px;

color: var(--orange);

font-size: .72rem;

font-weight: 900;
}

.about-value h3 {
margin-bottom: 12px;
}


/* CUSTOMER COMMITMENT */

.customer-commitment {
padding: 100px 0;
}

.commitment-layout {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 80px;

align-items: center;
}

.commitment-text h2 span {
color: var(--orange);
}

.commitment-text p {
max-width: 560px;

margin-top: 18px;
}

.commitment-photo {
height: 560px;

overflow: hidden;
}

.commitment-photo img {
width: 100%;

height: 100%;

object-fit: cover;
}


/* QUALITY */

.quality-section {
padding: 100px 0;

background: var(--off-white);
}

.quality-grid {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 80px;
}

.quality-grid h2 span {
color: var(--orange);
}

.quality-grid p {
margin-bottom: 18px;
}


/* ABOUT CTA */

.about-cta {
padding: 110px 20px;

text-align: center;

color: #ffffff;

background:
linear-gradient(
rgba(0,0,0,.72),
rgba(0,0,0,.80)
),
url("../images/dump-trailer.jpg")
center / cover no-repeat;
}

.about-cta-content {
max-width: 800px;

margin: 0 auto;
}

.about-cta h2 {
color: #ffffff;
}

.about-cta h2 span {
color: var(--orange);
}

.about-cta p {
max-width: 620px;

margin: 22px auto 30px;

color: #dddddd;
}


/* =========================================================
20. SERVICES PAGE
========================================================= */

.services-hero {
min-height: 520px;

display: flex;

align-items: center;

color: #ffffff;

background:
linear-gradient(
rgba(0,0,0,.63),
rgba(0,0,0,.77)
),
url("../images/concrete-project.jpg")
center / cover no-repeat;
}

.services-intro {
padding: 100px 0;
}

.services-intro-grid {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 80px;

align-items: center;
}

.services-intro h2 span {
color: var(--orange);
}

.services-intro-grid p {
max-width: 560px;

margin-bottom: 18px;
}


/* SERVICE DETAIL */

.service-detail {
padding: 100px 0;
}

.service-detail-dark {
background: var(--black);

color: #ffffff;
}

.service-detail-grid {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 75px;

align-items: center;
}

.service-detail-grid.reverse
.service-detail-image {
order: 2;
}

.service-detail-grid.reverse
.service-detail-content {
order: 1;
}

.service-detail-image {
height: 560px;

overflow: hidden;
}

.service-detail-image img {
width: 100%;

height: 100%;

object-fit: cover;
}

.service-detail-content h2 {
margin: 12px 0 22px;
}

.service-detail-content p {
max-width: 560px;

margin-bottom: 17px;
}

.service-detail-dark
.service-detail-content p {
color: #aaaaaa;
}

.service-detail-content h3 {
margin-top: 28px;

margin-bottom: 12px;
}

.service-list {
list-style: none;

margin-bottom: 30px;
}

.service-list li {
position: relative;

padding: 7px 0 7px 22px;

font-size: .92rem;
}

.service-list li::before {
content: "✓";

position: absolute;

left: 0;

color: var(--orange);

font-weight: 900;
}


/* ADDITIONAL SERVICES */

.additional-services {
padding: 100px 0;

background: var(--off-white);
}

.additional-services-grid {
display: grid;

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

gap: 20px;
}

.additional-card {
padding: 32px 28px;

background: #ffffff;

border: 1px solid var(--border);

transition: var(--transition);
}

.additional-card:hover {
transform: translateY(-5px);

box-shadow: var(--shadow);
}

.additional-card > span {
color: var(--orange);

font-size: .7rem;

font-weight: 900;
}

.additional-card h3 {
margin: 14px 0;
}

.additional-card p {
font-size: .88rem;
}


/* WHY US */

.why-us-section {
padding: 100px 0;
}

.why-us-grid {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 80px;
}

.why-us-grid h2 span {
color: var(--orange);
}

.why-us-points {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 35px;
}

.why-us-point {
padding-top: 18px;

border-top: 2px solid var(--orange);
}

.why-us-point strong {
display: block;

margin-bottom: 8px;
}

.why-us-point p {
font-size: .88rem;
}


/* SERVICES CTA */

.services-cta {
padding: 110px 20px;

text-align: center;

color: #ffffff;

background:
linear-gradient(
rgba(0,0,0,.72),
rgba(0,0,0,.80)
),
url("../images/dump-trailer.jpg")
center / cover no-repeat;
}

.services-cta-content {
max-width: 800px;

margin: 0 auto;
}

.services-cta h2 {
color: #ffffff;
}

.services-cta h2 span {
color: var(--orange);
}

.services-cta p {
max-width: 650px;

margin: 22px auto 30px;

color: #dddddd;
}


/* =========================================================
21. GALLERY PAGE GLOBAL FALLBACKS
========================================================= */

.gallery-hero {
min-height: 520px;

color: #ffffff;

background:
linear-gradient(
rgba(0,0,0,.62),
rgba(0,0,0,.78)
),
url("../images/driveway-after.jpg")
center / cover no-repeat;
}

.gallery-intro {
padding: 90px 20px 55px;
}

.gallery-intro h2 span {
color: var(--orange);
}

.gallery-intro p {
max-width: 700px;

margin: 18px auto 0;
}


/* OLD GALLERY SUPPORT */

.gallery-section {
padding: 30px 0 100px;
}

.gallery-filters {
display: flex;

justify-content: center;

flex-wrap: wrap;

gap: 10px;

margin-bottom: 40px;
}

.gallery-filter {
padding: 11px 20px;

border: 1px solid var(--border);

background: #ffffff;

cursor: pointer;

font-size: .75rem;

font-weight: 800;
}

.gallery-filter:hover,
.gallery-filter.active {
background: var(--black);

color: #ffffff;
}

.project-gallery {
display: grid;

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

gap: 28px;
}

.gallery-image-link {
display: block;

height: 340px;

overflow: hidden;

background: #dddddd;
}

.gallery-image-link img {
width: 100%;

height: 100%;

object-fit: cover;
}


/* =========================================================
22. REVIEWS PAGE
========================================================= */

.reviews-hero {
min-height: 520px;

display: flex;

align-items: center;

color: #ffffff;

background:
linear-gradient(
rgba(0,0,0,.66),
rgba(0,0,0,.80)
),
url("../images/driveway-after.jpg")
center / cover no-repeat;
}

.reviews-intro {
padding: 100px 0;
}

.reviews-intro .section-heading {
max-width: 760px;

margin:
0 auto 60px;

text-align: center;
}

.customer-promise {
display: grid;

grid-template-columns:
90px 1fr;

gap: 30px;

padding: 30px 0;

border-top:
1px solid var(--border);
}

.customer-promise:last-child {
border-bottom:
1px solid var(--border);
}

.promise-number {
color: var(--orange);

font-size: .8rem;

font-weight: 900;
}

.promise-content h3 {
margin-bottom: 8px;
}


/* TESTIMONIALS */

.testimonials-section {
padding: 100px 0;
}

.testimonials-grid {
display: grid;

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

gap: 24px;

margin-top: 50px;
}

.testimonial-card {
padding: 36px 32px;

background: var(--off-white);

border: 1px solid var(--border);
}

.testimonial-stars {
margin-bottom: 20px;

color: var(--orange);

letter-spacing: 3px;
}

.testimonial-card blockquote {
margin-bottom: 25px;

line-height: 1.9;

font-style: italic;
}

.testimonial-author {
display: flex;

flex-direction: column;

gap: 4px;

padding-top: 18px;

border-top:
1px solid var(--border);
}


/* CUSTOMER PHOTO */

.customer-photo-section {
padding: 100px 0;

background: var(--black);

color: #ffffff;
}

.customer-photo-grid {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 65px;

align-items: center;
}

.customer-photo {
height: 520px;

overflow: hidden;
}

.customer-photo img {
width: 100%;

height: 100%;

object-fit: cover;
}

.customer-photo-content h2 {
color: #ffffff;
}

.customer-photo-content h2 span {
color: var(--orange);
}

.customer-photo-content p {
max-width: 560px;

margin-top: 20px;

color: #cccccc;
}


/* LEAVE REVIEW */

.leave-review-section {
padding: 90px 0;

text-align: center;

background: var(--off-white);
}

.leave-review-content {
max-width: 720px;

margin: 0 auto;
}


/* REVIEWS CTA */

.reviews-cta {
padding: 110px 20px;

text-align: center;

color: #ffffff;

background:
linear-gradient(
rgba(0,0,0,.72),
rgba(0,0,0,.80)
),
url("../images/dump-trailer.jpg")
center / cover no-repeat;
}

.reviews-cta-content {
max-width: 800px;

margin: 0 auto;
}

.reviews-cta h2 {
color: #ffffff;
}

.reviews-cta h2 span {
color: var(--orange);
}

.reviews-cta p {
max-width: 650px;

margin: 20px auto 30px;

color: #dddddd;
}
/* =========================================================
DUNCAN CONCRETE LLC
MAIN WEBSITE STYLES
PART 3 OF 3
========================================================= */


/* =========================================================
23. CONTACT PAGE
========================================================= */

.contact-hero {
min-height: 520px;

display: flex;

align-items: center;

color: #ffffff;

background:
linear-gradient(
rgba(0,0,0,.66),
rgba(0,0,0,.80)
),
url("../images/dump-trailer.jpg")
center / cover no-repeat;
}

.contact-section {
padding: 100px 0;
}

.contact-grid {
display: grid;

grid-template-columns:
.9fr 1.1fr;

gap: 70px;

align-items: start;
}

.contact-info h2 span {
color: var(--orange);
}

.contact-info > p {
max-width: 560px;

margin-top: 18px;
}

.contact-details {
margin-top: 38px;
}

.contact-detail {
display: flex;

align-items: center;

gap: 18px;

padding: 20px 0;

border-top:
1px solid var(--border);
}

.contact-icon {
width: 46px;

height: 46px;

flex-shrink: 0;

display: flex;

align-items: center;

justify-content: center;

background: var(--black);

color: var(--orange);
}

.contact-detail > div:last-child {
display: flex;

flex-direction: column;

gap: 4px;
}

.contact-detail span {
color: var(--gray);

font-size: .65rem;

font-weight: 900;

letter-spacing: 1px;
}

.contact-detail a,
.contact-detail strong {
color: var(--black);

font-size: .9rem;
}


/* CONTACT FORM */

.contact-form-wrapper {
padding: 40px;

background: var(--off-white);

border: 1px solid var(--border);
}

.form-heading h3 {
margin-top: 10px;
}

.form-heading p {
margin-top: 8px;
}

.contact-form {
margin-top: 28px;
}

.form-row {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 17px;
}

.form-group {
margin-bottom: 18px;
}

.form-group label {
display: block;

margin-bottom: 7px;

color: var(--black);

font-size: .72rem;

font-weight: 900;

text-transform: uppercase;
}

.form-group input,
.form-group select,
.form-group textarea {
width: 100%;

padding: 14px;

border: 1px solid #d5d5d5;

background: #ffffff;

outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--orange);
}

.form-group textarea {
resize: vertical;
}

.form-submit {
width: 100%;

border: 0;

cursor: pointer;
}

.form-note {
margin-top: 12px;

text-align: center;

color: var(--gray);

font-size: .72rem;
}


/* CONTACT PHOTO */

.contact-photo-section {
padding: 100px 0;

background: var(--black);

color: #ffffff;
}

.contact-photo-grid {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 65px;

align-items: center;
}

.contact-photo {
height: 500px;

overflow: hidden;
}

.contact-photo img {
width: 100%;

height: 100%;

object-fit: cover;
}

.contact-photo-content h2 {
color: #ffffff;
}

.contact-photo-content h2 span {
color: var(--orange);
}

.contact-photo-content p {
max-width: 560px;

margin-top: 18px;

color: #cccccc;
}


/* CONTACT FAQ */

.contact-faq {
padding: 100px 0;

background: var(--off-white);
}

.faq-grid {
display: grid;

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

gap: 20px;

margin-top: 45px;
}

.faq-card {
padding: 30px;

background: #ffffff;

border: 1px solid var(--border);
}

.faq-card h3 {
margin-bottom: 10px;

font-size: 1rem;
}

.faq-card p {
font-size: .88rem;
}


/* CONTACT CTA */

.contact-cta {
padding: 110px 20px;

text-align: center;

color: #ffffff;

background:
linear-gradient(
rgba(0,0,0,.72),
rgba(0,0,0,.82)
),
url("../images/dump-trailer.jpg")
center / cover no-repeat;
}

.contact-cta-content {
max-width: 800px;

margin: 0 auto;
}

.contact-cta h2 {
color: #ffffff;
}

.contact-cta h2 span {
color: var(--orange);
}

.contact-cta p {
max-width: 650px;

margin: 20px auto 30px;

color: #dddddd;
}

.cta-buttons {
display: flex;

justify-content: center;

flex-wrap: wrap;

gap: 14px;
}


/* =========================================================
24. FREE ESTIMATE PAGE
========================================================= */

.estimate-hero {
min-height: 520px;

display: flex;

align-items: center;

color: #ffffff;

background:
linear-gradient(
rgba(0,0,0,.66),
rgba(0,0,0,.82)
),
url("../images/concrete-project.jpg")
center / cover no-repeat;
}

.estimate-intro {
padding: 100px 0;
}

.estimate-intro .section-heading {
max-width: 760px;

margin: 0 auto;

text-align: center;
}

.estimate-steps {
display: grid;

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

gap: 22px;

margin-top: 55px;
}

.estimate-step {
padding: 35px 28px;

background: #ffffff;

border: 1px solid var(--border);
}

.estimate-step > span {
display: block;

margin-bottom: 20px;

color: var(--orange);

font-size: .72rem;

font-weight: 900;
}

.estimate-step h3 {
margin-bottom: 12px;

font-size: 1.05rem;
}

.estimate-step p {
font-size: .88rem;
}


/* ESTIMATE FORM AREA */

.estimate-form-section {
padding: 100px 0;

background: var(--off-white);
}

.estimate-grid {
display: grid;

grid-template-columns:
.85fr 1.15fr;

gap: 65px;

align-items: start;
}

.estimate-side h2 span {
color: var(--orange);
}

.estimate-side > p {
max-width: 550px;

margin-top: 18px;
}

.estimate-checklist {
margin-top: 30px;
}

.estimate-checklist > div {
display: flex;

align-items: center;

gap: 10px;

padding: 10px 0;
}

.estimate-checklist strong {
color: var(--orange);
}

.estimate-callout {
display: flex;

justify-content: space-between;

align-items: center;

gap: 20px;

margin-top: 30px;

padding: 22px;

background: var(--black);

color: #ffffff;
}

.estimate-callout a {
color: var(--orange);

font-weight: 900;
}

.estimate-form-wrapper {
padding: 40px;

background: #ffffff;

border: 1px solid var(--border);

box-shadow: var(--shadow);
}

.estimate-form {
margin-top: 25px;
}

.estimate-form small {
display: block;

margin-top: 7px;

color: var(--gray);

font-size: .72rem;
}

.estimate-form input[type="file"] {
padding: 11px;

background: var(--off-white);
}


/* ESTIMATE PHOTO */

.estimate-photo-section {
padding: 100px 0;

background: var(--black);

color: #ffffff;
}

.estimate-photo {
height: 480px;

overflow: hidden;
}

.estimate-photo img {
width: 100%;

height: 100%;

object-fit: cover;
}

.estimate-photo-content {
max-width: 700px;

margin: 45px auto 0;

text-align: center;
}

.estimate-photo-content h2 {
color: #ffffff;
}

.estimate-photo-content h2 span {
color: var(--orange);
}

.estimate-photo-content p {
max-width: 600px;

margin: 18px auto 28px;

color: #cccccc;
}


/* ESTIMATE CTA */

.estimate-cta {
padding: 110px 20px;

text-align: center;

color: #ffffff;

background:
linear-gradient(
rgba(0,0,0,.72),
rgba(0,0,0,.82)
),
url("../images/dump-trailer.jpg")
center / cover no-repeat;
}

.estimate-cta-content {
max-width: 800px;

margin: 0 auto;
}

.estimate-cta h2 {
color: #ffffff;
}

.estimate-cta h2 span {
color: var(--orange);
}

.estimate-cta p {
max-width: 650px;

margin: 20px auto 30px;

color: #dddddd;
}


/* =========================================================
25. GLOBAL FOOTER
========================================================= */

.site-footer {
width: 100%;

background: #0b0b0b;

color: #ffffff;

border-top:
1px solid #252525;
}


/* NEW FOOTER */

.footer-container {
width: min(1200px, 92%);

min-height: 110px;

margin: 0 auto;

display: flex;

align-items: center;

justify-content: space-between;

gap: 30px;
}

.footer-container strong {
display: block;

margin-bottom: 6px;

color: #ffffff;

font-size: 16px;

font-weight: 900;

letter-spacing: 1px;
}

.footer-container strong::after {
content: "";

display: block;

width: 38px;

height: 3px;

margin-top: 7px;

background: var(--orange);
}

.footer-container p {
margin: 0;

color: #999999;

font-size: 14px;
}

.footer-container > div:last-child {
text-align: right;
}


/* OLD FOOTER SUPPORT */

.footer-grid {
width: min(1200px, 92%);

margin: 0 auto;

display: grid;

grid-template-columns:
2fr 1fr 1fr 1.2fr;

gap: 50px;

padding: 65px 0;
}

.footer-company p {
max-width: 350px;

margin-top: 20px;

color: #999999;
}

.footer-links,
.footer-contact {
display: flex;

flex-direction: column;

gap: 9px;
}

.footer-links h3,
.footer-contact h3 {
margin-bottom: 10px;

color: #ffffff;

font-size: .9rem;
}

.footer-links a,
.footer-contact a {
color: #999999;

font-size: .85rem;
}

.footer-links a:hover,
.footer-contact a:hover {
color: var(--orange);
}

.footer-bottom {
padding: 20px 0;

border-top:
1px solid #292929;
}

.footer-bottom p {
text-align: center;

color: #666666;

font-size: .75rem;
}


/* =========================================================
26. TABLET
========================================================= */

@media (max-width: 1000px) {

.header-container,
.nav-container {
width: 95%;

gap: 18px;
}

.main-nav,
.main-navigation {
gap: 16px;
}

.main-nav a,
.main-navigation a {
font-size: 13px;
}

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

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

.testimonials-grid {
grid-template-columns: 1fr;
}

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

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


/* =========================================================
27. MOBILE
========================================================= */

@media (max-width: 800px) {

/* HEADER */

.site-header {
position: relative;
}

.header-container,
.nav-container {
width: 94%;

min-height: auto;

padding: 15px 0;

flex-direction: column;

justify-content: center;

gap: 14px;
}

.logo {
font-size: 21px;
}

.main-nav,
.main-navigation {
width: 100%;

height: auto;

position: static;

flex-direction: row;

justify-content: center;

flex-wrap: wrap;

gap: 10px 16px;

padding: 0;

background: transparent;
}

.main-nav a,
.main-navigation a {
font-size: 13px;
}

.main-nav .nav-button,
.main-navigation .nav-estimate {
padding: 9px 14px;
}


/* HERO */

.hero-section {
min-height: 700px;
}

.hero-content {
padding: 75px 0;
}

.hero-content h1 {
font-size:
clamp(
2.8rem,
12vw,
5rem
);
}

.hero-buttons {
flex-direction: column;

max-width: 350px;
}

.hero-buttons .btn {
width: 100%;
}

.hero-trust {
margin-top: 40px;
}


/* GRIDS */

.intro-grid,
.commitment-grid,
.about-grid,
.commitment-layout,
.quality-grid,
.services-intro-grid,
.service-detail-grid,
.why-us-grid,
.customer-photo-grid,
.contact-grid,
.contact-photo-grid,
.estimate-grid {
grid-template-columns: 1fr;

gap: 45px;
}


.service-detail-grid.reverse
.service-detail-image {
order: 1;
}

.service-detail-grid.reverse
.service-detail-content {
order: 2;
}


.services-grid,
.values-grid,
.about-values-grid,
.additional-services-grid,
.project-gallery,
.faq-grid,
.estimate-steps {
grid-template-columns: 1fr;
}


.why-us-points {
grid-template-columns: 1fr;
}


/* IMAGE HEIGHTS */

.feature-photo {
height: 450px;
}

.commitment-image,
.about-image,
.commitment-photo,
.service-detail-image,
.customer-photo,
.contact-photo {
height: 420px;
}


/* SPACING */

.intro-section,
.services-preview,
.values-section,
.commitment-section,
.projects-section,
.about-story,
.about-values,
.customer-commitment,
.quality-section,
.services-intro,
.service-detail,
.additional-services,
.why-us-section,
.reviews-intro,
.testimonials-section,
.customer-photo-section,
.contact-section,
.contact-photo-section,
.contact-faq,
.estimate-intro,
.estimate-form-section,
.estimate-photo-section {
padding-top: 70px;

padding-bottom: 70px;
}


/* FORMS */

.form-row {
grid-template-columns: 1fr;
}

.contact-form-wrapper,
.estimate-form-wrapper {
padding: 28px 22px;
}


/* FOOTER */

.footer-container {
min-height: auto;

padding: 28px 0;

flex-direction: column;

align-items: flex-start;

gap: 16px;
}

.footer-container > div:last-child {
text-align: left;
}

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


/* =========================================================
28. SMALL PHONES
========================================================= */

@media (max-width: 500px) {

.container {
width: 92%;
}

.logo {
font-size: 19px;
}

.main-nav,
.main-navigation {
gap: 8px 11px;
}

.main-nav a,
.main-navigation a {
font-size: 12px;
}

.main-nav .nav-button,
.main-navigation .nav-estimate {
padding: 8px 11px;
}

.hero-trust {
display: none;
}

.hero-section {
min-height: 640px;
}

.feature-photo {
height: 380px;
}

.page-hero,
.services-hero,
.gallery-hero,
.reviews-hero,
.contact-hero,
.estimate-hero {
min-height: 420px;
}

.about-image,
.commitment-image,
.commitment-photo,
.service-detail-image,
.customer-photo,
.contact-photo {
height: 340px;
}

.estimate-photo {
height: 320px;
}

.estimate-callout {
flex-direction: column;

align-items: flex-start;
}
}


/* =========================================================
29. SIMPLE ANIMATIONS
========================================================= */

.scroll-reveal {
opacity: 0;

transform:
translateY(25px);

transition:
opacity .6s ease,
transform .6s ease;
}

.scroll-reveal.visible {
opacity: 1;

transform:
translateY(0);
}


/* =========================================================
END OF DUNCAN CONCRETE CSS
DO NOT ADD OLD HEADER CSS BELOW THIS POINT
========================================================= */