:root {
    --alt-section-bg: #f7f7f7; /* light red tint */
}


/* ===== RESET ===== */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

body {
    padding-top: 120px; /* adjust to header height */
}


/* Prevent horizontal overflow on mobile */
* {
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}


/* ===== STICKY HEADER ===== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    background: #fff;
}

.site-header,
.top-bar,
.main-nav {
    overflow: visible;
}

/* ===== TOP BAR ===== */
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    padding: 10px 30px;
    border-bottom: 1px solid #ffffff;
}

.logo {
    height: 60px;
    width: auto;
    object-fit: contain;
}

.call-now {
    color: #bb0000;
    font-size: 22px;
}

.call-now i {
    margin-right: 6px;
}

.call-now a {
    color: #bb0000;       /* same red as Call Now */
    text-decoration: none;
    font-weight: inherit;
}

.call-now a:hover {
    color: #9a0000;       /* darker red on hover */
}


.btn-estimate {
    background: #bb0000;
    color: #fff;
    padding: 10px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
}

.btn-estimate:hover {
    background: #9a0000;
}

/* ===== NAV BAR ===== */
.main-nav {
    width: 100%;
    background: linear-gradient(to bottom, #c40000, #a30000);
}

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

.main-nav li {
    flex: 1;
}

.main-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 0;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}

.main-nav i {
    font-size: 18px;
    margin-bottom: 4px;
}

.main-nav a:hover {
    background: rgba(255,255,255,0.15);
}
/* ===== SERVICES DROPDOWN ===== */
/* ===== SERVICES DROPDOWN ===== */
.nav-dropdown {
    position: relative;
}

.nav-dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    min-width: 287px;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    border-radius: 4px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    display: none;
    z-index: 9999;
}

.nav-dropdown .dropdown-menu li a {
    display: block;
    padding: 10px 18px;
    color: #111;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
}

.nav-dropdown .dropdown-menu li a:hover {
    background: #f2f2f2;
    color: #bb0000;
}

/* ===== DROPDOWN (CLICK ONLY) ===== */
.nav-dropdown {
    position: relative;
}

.nav-dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    min-width: 287px;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    border-radius: 4px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    display: none; /* hidden by default */
    z-index: 9999;
}

.nav-dropdown .dropdown-menu li a {
    display: block;
    padding: 10px 18px;
    color: #111;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
}

.nav-dropdown .dropdown-menu li a:hover {
    background: #f2f2f2;
    color: #bb0000;
}

/* SHOW DROPDOWN WHEN CLICKED */
.nav-dropdown.open .dropdown-menu {
    display: block;
}

/* ===== Home Page Estimate Split Section ===== */
.home-estimate{
  padding: 80px 20px;
  background: #fff;
}

.home-estimate__inner{
  max-width: 1150px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 26px;
  align-items: start;
}

/* LEFT SIDE */
/* LEFT SIDE – NO BOX */
.home-estimate__left{
  padding: 10px 0;
  text-align: left;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}


.home-estimate__title{
  font-size: 26px;
  font-weight: 900;
  color: #111;
  margin: 0 0 12px;
  text-align: center;
}

.home-estimate__divider{
  width: min(410px, 95%);
  height: 4px;
  background: #bb0000;
  margin: 20px 0 40px 0;
  border-radius: 999px;

}

.home-estimate__divider1{
  width: min(400px, 95%);
  height: 4px;
  background: #bb0000;
  margin: 20px auto 40px ;
  

}

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


.home-estimate__divider--center{
  margin: 0 auto 18px;
}

.home-estimate__call{
  margin: 0 0 8px;
  color: #444;
  font-weight: 800;
  text-align: center;
}

.home-estimate__phone{
  display: inline-block;
  font-size: 1.35rem;
  font-weight: 900;
  color: #bb0000;
  text-decoration: none;
  margin-bottom: 10px;
  text-align: center;
}

.home-estimate__phone{
  display: block;
  margin: 0 auto 10px;
  font-size: 1.35rem;
  font-weight: 900;
  color: #bb0000;
  text-decoration: none;
}


.home-estimate__phone:hover{
  text-decoration: underline;
}

.home-estimate__or{
  margin: 0 0 10px;
  color: #444;
  font-weight: 800;
  text-align: center;
}

.home-estimate__service{
  margin: 0 0 18px;
  color: #555;
  line-height: 1.6;
  text-align: center;
}

.home-estimate__image{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #eee;
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}

.home-estimate__image img{
  width: 100%;
  height: 435px;
  object-fit: cover;
  display: block;
}


.home-estimate__map{
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0,0,0,0.15);
  border: 1px solid #eee;
}

.home-estimate__map iframe{
  width: 100%;
  height: 450px; /* adjust if needed */
  border: 0;
  display: block;
}


/* RIGHT SIDE */
.home-estimate__right{
  text-align: center;
}

.home-estimate__formhead h2{
  font-size: clamp(26px, 2.7vw, 34px);
  font-weight: 900;
  color: #111;
  margin: 0 0 12px;
}

/* Responsive */
@media (max-width: 980px){
  .home-estimate__inner{
    grid-template-columns: 1fr;
  }

  .home-estimate__image img{
    height: 220px;
  }
}





/* ===== HERO SECTION ===== */
.hero {
    background: #ffffff;
    padding: 60px 20px;
}


.hero-form {
    background: #222;
    padding: 45px;
    border-radius: 6px;
    max-width: 550px;
    width: 100%;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.08);
}

.hero-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 50px;
}

/* LEFT TEXT */
.hero-text {
    flex: 1;
    margin-top: 40px;
}

.hero-text h1 {
    font-size: 44px;
    margin-bottom: 10px;
}

.hero-text p {
    font-size: 18px;
    color: #555;
}

.hero-title {
    position: relative;
    display: inline-block;
    padding-bottom: 18px;
}

.hero-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 550px;
    height: 4px;
    background-color: #bb0000; /*  red */
    border-radius: 2px;
}

.hero-intro {
    margin-bottom: 35px;
    max-width: 600px;
}

.estimate-text{
    color: #bb0000;
}

.hero-callout {
    font-size: 20px;
    font-weight: 600;
    margin: 20px 0 8px;
    color: #b00;
}

.hero-callout a {
    color: #bb0000;
    text-decoration: none;
    font-size: 26px;
    font-weight: 700;
}

.hero-callout a:hover {
    text-decoration: underline;
}

.hero-subtext {
    font-size: 16px;
    color: #b00;
    margin-bottom: 14px;
}

.hero-area {
    font-size: 16px;
    color: #777;
}

.hero-cta{
    text-align: center;
    margin: 20px 0;
}

.hero-image-box {
    margin-top: 100x 50px;
    width: 100%;
    max-width: 675px;
    border-radius: 8px;
    overflow: hidden;
    background: #eaeaea;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.hero-image-box img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

/* ===== HERO FORM ===== */
.hero-form label {
    display: block;
    font-size: 14px;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}
.hero-form h2 {
    text-align: center;
    font-size: 22px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #c40000;
}

.hero-form label {
    display: block;
    font-size: 14px;
    margin-top: 18px;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

/* FORM FIELDS */
.hero-form input,
.hero-form select,
.hero-form textarea {
    width: 100%;
    padding: 16px;
    background: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    color: #000;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
    margin-bottom: 14px;
    box-sizing: border-box;
}

.hero-form textarea {
    height: 130px;
    resize: none;
}

.hero-form input:focus,
.hero-form select:focus,
.hero-form textarea:focus {
    outline: none;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.35),
        0 0 0 2px rgba(196,0,0,0.3);
}

/* SUBMIT BUTTON */
.hero-form button {
    margin-top: 20px;
    width: 100%;
    padding: 16px;
    background: linear-gradient(to bottom, #d00000, #a80000);
    color: #fff;
    border: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 1px;
}

.hero-form button:hover {
    opacity: 0.95;
}

/* How our free  works  Section */
.quote-steps {
    padding: 80px 40px;
    text-align: center;
    background:#f7f7f7;
}

/* ===== TITLE ===== */
.section-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 50px;
    color: #111;
}

.quote-steps-divider {
    width: min(425px, 80%);
    height: 4px;
    background: #bb0000;
    margin: 0px auto 40px;
}

.quote-steps .section-title {
    margin-bottom: 12px; /* tight space above divider */
}



/* ===== STEPS GRID ===== */
.steps-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 50px;
}

/* ===== CARD ===== */
.step-card {
    background: #fff;
    padding: 35px 30px;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    text-align: left;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

/* ===== NUMBER CIRCLE ===== */
.step-number {
    width: 42px;
    height: 42px;
    background: #d00000;
    color: #fff;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 18px;
}

/* ===== TEXT ===== */
.step-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #111;
}

.step-card p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 10px;
    color: #555;
}

.step-note {
    font-size: 14px;
    color: #d00000;
    font-weight: 500;
}

/* ===== CTA BUTTON ===== */
.cta-button {
    display: inline-block;
    background: #d00000;
    color: #fff;
    padding: 16px 36px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: background 0.3s ease, transform 0.3s ease;
}

.cta-button:hover {
    background: #a80000;
    transform: translateY(-2px);
}

/* ===== MOBILE ===== */
@media (max-width: 600px) {
    .section-title {
        font-size: 26px;
    }

    .step-card {
        padding: 30px 24px;
    }
}



/* =========================
   HOME ABOUT SECTION
   ========================= */

.home-about{
  padding: 90px 20px;
  background: #ffffff;
}

.home-about__inner{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.home-about__kicker{
  color: #bb0000;
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.home-about h2{
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 900;
  color: #111;
  margin-bottom: 14px;
}

.home-about__divider{
  width: 120px;
  height: 4px;
  background: #bb0000;
  margin: 0 auto 30px;
}

.home-about p{
  color: #444;
  line-height: 1.7;
  margin-bottom: 18px;
  font-size: 17px;
}

.home-about__btn{
  display: inline-block;
  margin-top: 20px;
  padding: 14px 28px;
  background: #bb0000;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  border-radius: 10px;
  transition: 0.3s ease;
  box-shadow: 0 10px 25px rgba(187,0,0,0.2);
}

.home-about__btn:hover{
  background: #990000;
  transform: translateY(-3px);
}








/* ===== WHY MDC SECTION ===== */
.why-mdc {
    background: #f7f7f7;
    padding: 90px 40px;
}

.section-header{
  display: flex;
  flex-direction: column; /* stack children vertically */
  align-items: center;    /* center them horizontally */
  text-align: center;
  gap: 12px;              /* small gap between title and divider */
  margin-bottom: 8px;     /* space before the grid */
}

.section-header h2{
  margin: 0 0 12px;   /* small space between title and divider */
}

.why-divider{
  width: min(450px, 80%);
  height: 4px;
  background: #bb0000;
  margin: 0 auto;     /* centered, no extra gap */
  border-radius: 999px;
}

/* optional: control space above the grid */
.why-grid{
  margin-top: 32px;
}


.why-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* IMAGE */
.why-image {
    flex: 1;
}

.why-image img {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

/* CONTENT */
.why-content {
    flex: 1;
}

.why-content h2 {
    font-size: 36px;
    margin-bottom: 20px;
    color: #111;
    border-bottom: 3px solid #bb0000;
    display: inline-block;
    padding-bottom: 10px;
}

.why-content p {
    font-size: 18px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 25px;
}

/* LIST */
.why-list {
    list-style: none;
    padding: 0;
}

.why-list li {
    font-size: 16px;
    margin-bottom: 12px;
    color: #333;
    font-weight: 500;
}

/* ===== WHY MDC SECTION ===== */
.why-mdc {
  padding: 80px 30px;
  background: #f7f7f7;
  text-align: center;
}

.why-mdc h2 {
  font-size: 36px;
  margin-bottom: 50px;
  color: #000;
}

.why-mdc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
}

.why-card {
  background: #ffffff;
  padding: 35px 25px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
}

.why-card i {
  font-size: 34px;
  margin-bottom: 18px;
  color: #000;
}

.why-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
  color: #000;
}

.why-card p {
  font-size: 15px;
  line-height: 1.6;
  color: #000;
  margin-top: auto;
}

/* ===== MOBILE ===== */
@media (max-width: 600px) {
  .why-mdc h2 {
    font-size: 28px;
  }
}


/* ===== MOBILE ===== */
@media (max-width: 900px) {
    .why-container {
        flex-direction: column;
        text-align: center;
    }

    .why-content h2 {
        font-size: 30px;
    }

    .why-list li {
        text-align: left;
        display: inline-block;
    }
}


/* Our Services Section */
.services {
    background-color: #f7f7f7;
    text-align: center;
    padding: 80px 50px;
}

.services h2 {
    font-size: 36px;
    color: #111;
    font-weight: bold;
    margin-bottom: 60px;
    border-bottom: 4px solid #b00;
    display: inline-block;
    padding-bottom: 10px;
}

.service-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 75px;
}

.service-card {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 250px;
    padding: 0 0 25px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.service-icon {
    font-size: 28px;
    color: #b00;
    margin-top: 15px;
}

.service-card h3 {
    font-size: 20px;
    color: #111;
    margin: 10px 0;
}

.service-card p {
    font-size: 15px;
    color: #555;
    padding: 0 15px;
    margin-bottom: 20px;
}

.service-card .btn {
    background-color: #b00;
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 3px;
    transition: background 0.3s;
}

.service-card .btn:hover {
    background-color: #900;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

/* Footer */

/* ===== FOOTER ===== */
/* ===== FOOTER ===== */
.site-footer {
    background: #1f1f1f;
    color: #ffffff;
    padding-top: 60px;
    font-size: 14px;
}

/* GRID */
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
}

/* HEADINGS */
.footer-column h4 {
    color: #d00000;
    font-size: 18px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

/* LINKS */
.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column a {
    color: #ffffff;
    text-decoration: none;
}

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

/* COMPANY INFO */
.footer-column p {
    line-height: 1.6;
    margin-bottom: 12px;
}

/* SOCIAL */
.footer-social {
    text-align: center;
    margin: 60px 0 30px;
}

.footer-social h4 {
    color: #d00000;
    margin-bottom: 15px;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 22px;
}

.social-icons i {
    font-size: 26px;
    color: #ffffff;
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-icons i:hover {
    transform: scale(1.2);
    color: #d00000;
}

/* COPYRIGHT */
/* COPYRIGHT */
.footer-bottom {
    text-align: center;
    padding: 20px;
    background: #151515;
    font-size: 13px;
    color: #ffffff;
}


.copyright {
    text-align: center;
    font-size: 14px;
    color: #aaa;
    gap: 20px;
}

.copyright {
    display: flex;
    justify-content: center; /* center everything */
    align-items: center;
    gap: 12px; /* spacing between each item */
    font-size: 14px;
    flex-wrap: wrap; /* makes it responsive on mobile */
}



.seperator {
    display: inline-block;
    margin: 0 16px;
    color: #555;
}

/* ===== FOOTER BOTTOM INFO ===== */
.footer-bottom-info {
    background: #151515;
    text-align: center;
    padding: 25px 15px;
    font-size: 16px;
    color: #aaa;
}

.footer-bottom-info p {
    margin: 6px 0;
}


.footer-bottom-info a {
    color: #ccc;
    text-decoration: none;
    font-weight: 500;
}

.footer-bottom-info a:hover {
    color: #d00000;
}

.business-hours strong {
    color: #ffffff;
}




/* MOBILE */
@media (max-width: 600px) {
    .footer-container {
        text-align: center;
    }
}

/* ===== MOBILE ===== */
@media (max-width: 900px) {
  .hero-container {
    flex-direction: column;
  }

  .hero-text {
    margin-top: 0;
  }

  .hero-form {
    max-width: 100%;
  }
}

/* ===== RED SERVICE AREA SECTION ===== */
.service-areas{
  padding: 80px 20px;
  background: radial-gradient(circle at top, #8d0000 0%, #6e0000 35%, #520000 100%);
  color: #fff;
  text-align: center;
}

.service-areas__inner{
  max-width: 900px;
  margin: 0 auto;
}

.service-areas h2{
  font-size: 2.2rem;
  margin-bottom: 12px;
  font-weight: 800;
}

.service-areas__divider{
  width: 250px;
  height: 4px;
  background: #ffffff;
  margin: 0 auto 25px;
  border-radius: 2px;
  opacity: 0.9;
}

.service-areas__text{
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 30px;
  opacity: 0.95;
}

.service-areas__btn{
  display: inline-block;
  background: #ffffff;
  color: #bb0000;
  font-weight: 800;
  padding: 14px 30px;
  border-radius: 14px;
  text-decoration: none;
  transition: 0.3s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.service-areas__btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.35);
}

.back-top-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 35px;
  font-weight: 700;
  text-decoration: none;
  color: #ffffff;
  transition: 0.3s ease;
}

.back-top-link i{
  font-size: 14px;
}

.back-top-link:hover{
  transform: translateY(-2px);
  color: #990000;
}


/* ===== REVIEWS SECTION ===== */
.reviews{
  padding: 80px 20px;
  background: #fff;
  text-align: center;
}

.reviews__inner{
  max-width: 1100px;
  margin: 0 auto;
}

.reviews h2{
  font-size: 2.2rem;
  margin-bottom: 12px;
  font-weight: 800;
}

.reviews__divider{
  width: 250px;
  height: 4px;
  background: #bb0000;
  margin: 0 auto 40px;
  border-radius: 2px;
}

.reviews__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.review-card{
  background: #f8f8f8;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  text-align: left;
}

.review-stars{
  color: #f4b400;
  font-size: 1.3rem;
  margin-bottom: 15px;
  letter-spacing: 3px;
}

.review-text{
  line-height: 1.6;
  color: #333;
  margin-bottom: 15px;
}

.review-meta{
  display: flex;
  justify-content: space-between;
  font-weight: 700;
}

.review-name{
  color: #bb0000;
}

.review-location{
  color: #555;
}

.reviews__note{
  margin-top: 40px;
  color: #666;
  font-style: italic;
}


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


/* About Us Page */
/* ===== ABOUT & VALUES SECTIONS ===== */
.about-section,
.values-section {
    padding: 60px 20px;
}

.about-section {
    background: #ffffff;
}

.values-section {
    background: #f7f7f7;
}

.about-container,
.values-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* TEXT */
.about-text h2,
.values-text h2 {
    font-size: 32px;
    margin-bottom: 20px;
    color: #111;
    border-bottom: 3px solid #bb0000;
    display: inline-block;
    padding-bottom: 6px;
}

.about-text p {
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 18px;
}

.values-text p {
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 18px;
}

.values-text ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.values-text li {
    font-size: 16px;
    color: #444;
    margin-bottom: 14px;
    padding-left: 22px;
    position: relative;
}

.values-text li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #bb0000;
    font-weight: bold;
}

/* IMAGES */
.about-image img,
.values-image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

/* MOBILE */
@media (max-width: 900px) {
    .about-container,
    .values-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .values-text li {
        text-align: left;
        max-width: 400px;
        margin: 0 auto 12px;
    }

    .about-image img,
    .values-image img {
        height: 280px;
    }
}

/* Services Page */
/* Roofing Services Page */

/* Roof Age Sticky Bubble */
.roof-age-bubble {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 260px;
  background: #ffffff;
  padding: 18px;
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.25);
  z-index: 999;
  transition: all 0.3s ease;
}



.roof-age-bubble p {
  font-size: 14px;
  color: #333;
  margin-bottom: 12px;
  line-height: 1.5;
}

.roof-age-btn {
  display: inline-block;
  background: #bb0000; /* your brand red */
  color: #fff;
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
  margin: 0 auto;
}

.roof-age-btn:hover {
  background: #b5000d;
}

/* Hide when inactive */
.roof-age-bubble.hide {
  opacity: 0;
  pointer-events: none;
}

.roof-age-bubble .roof-age-btn {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.roof-age-bubble {
  text-align: center !important;
}

.roof-age-bubble p,
.roof-age-bubble strong,
.roof-age-mini {
  text-align: center !important;
}

.roof-age-bubble.hide {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}





.mdc-roofing-hero {
    position: relative;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top, #8d0000 0%, #6e0000 35%, #520000 100%);
    overflow: hidden;
}

.mdc-roofing-hero__content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 0 25px;
    text-align: center;
}

.mdc-roofing-hero__label {
    display: inline-block;
    margin-bottom: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    color: lightgray;
}

.mdc-roofing-hero__title {
    font-size: clamp(2.2rem, 5vw, 3.3rem);
    line-height: 1.2;
    margin-bottom: 20px;
    color: #ffffff;
}

.mdc-roofing-hero__title span {
    color: #bb0000;
}

.mdc-roofing-hero__text {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 35px;
    color: #e6e6e6;
}

.mdc-roofing-hero__btn {
    display: inline-block;
    padding: 14px 32px;
    background: #bb0000;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    transition: transform 0.2s ease, background 0.2s ease;
}

.mdc-roofing-hero__btn:hover {
    background: #990000;
    transform: translateY(-2px);
}

.mdc-final-estimate__inner {
    background: #f7f7f7 !important;
}

/* Make the whole strip gray */
.mdc-final-estimate{
  background: #f7f7f7;
}

/* Remove inner “box” background so it blends in */
.mdc-final-estimate__inner{
  background: transparent;
}

.mdc-final-estimate{
  background: #f7f7f7 !important;
}



/* =====================================
   MDC – IMPORTANCE OF ROOFING REPAIRS
   (ISOLATED SECTION)
===================================== */

.mdc-roofing-importance {
    background: #fff;
    padding: 80px 20px;
}

.mdc-roofing-importance__inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

/* Title */
.mdc-roofing-importance__title {
    font-size: 2rem;
    margin-bottom: 12px;
    color: #222;
}

/* Red divider line */
.mdc-roofing-importance__divider {
    width: 350px;
    height: 4px;
    background: #bb0000;
    margin: 0 auto 25px;
}

.mdc-roofing-importance__divider1 {
    width: 350px;
    height: 4px;
    background: #bb0000;
    margin: 12px auto 40px;
}

/* Divider under "Ready for a Better Roof?" */
.estimate-divider1 {
    width: 425px;            /* short, clean accent line */
    height: 4px;
    background: #bb0000;
    margin: 12px 0 12px;     /* tight under title, space before text */
}






/* Paragraph */
.mdc-roofing-importance__text {
    max-width: 800px;
    margin: 0 auto 45px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #555;
}

/* Images container */
.mdc-roofing-importance__images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* Images */
.mdc-roofing-importance__images img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}

/* Mobile */
@media (max-width: 900px) {
    .mdc-roofing-importance__images {
        grid-template-columns: 1fr;
    }

    .mdc-roofing-importance__images img {
        height: 220px;
    }
}

/* Caption under roofing images */
.mdc-roofing-importance__caption {
    margin-top: 25px;
    font-size: 0.95rem;
    color: #666;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    font-style: italic;
}

/* Roofing damage cards */
.mdc-roofing-importance__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

/* Individual card */
.mdc-roofing-importance__card {
    text-align: center;
}

/* Image styling */
.mdc-roofing-importance__card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    margin-bottom: 18px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* Title under image */
.mdc-roofing-importance__card h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: #222;
}

/* Description text */
.mdc-roofing-importance__card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    max-width: 300px;
    margin: 0 auto;
}

/* Mobile layout */
@media (max-width: 900px) {
    .mdc-roofing-importance__cards {
        grid-template-columns: 1fr;
    }

    .mdc-roofing-importance__card img {
        height: 220px;
    }
}

/* =====================================
   MDC – ROOF TYPES SPLIT LAYOUT (FINAL)
===================================== */

.mdc-roof-types-split {
    background: #ffffff;
    padding: 90px 20px;
}

.mdc-roof-types-split__inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* =========================
   TITLE + DIVIDER
========================= */

.mdc-roof-types-split__title {
    font-size: 2rem;
    color: #222;
    margin-bottom: 12px;
}

.mdc-roof-types-split__divider {
    width: 485px;
    height: 4px;
    background: #bb0000;
    margin-bottom: 60px;
}

/* =========================
   ROW LAYOUT
========================= */

.mdc-roof-types-split__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: stretch;
    margin-bottom: 70px;
    min-height: 320px;
}

/* Reverse layout */
.mdc-roof-types-split__row.reverse {
    direction: rtl;
}

.mdc-roof-types-split__row.reverse > * {
    direction: ltr;
}

/* =========================
   WHITE TEXT BOX
========================= */

.mdc-roof-types-split__text {
    background: #ffffff;
    padding: 35px 40px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 2;

    /* Equal height + vertical centering */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Pull box toward image */
.mdc-roof-types-split__row:not(.reverse)
.mdc-roof-types-split__text {
    margin-right: -60px;
}

.mdc-roof-types-split__row.reverse
.mdc-roof-types-split__text {
    margin-left: -60px;
}

/* Text styles */
.mdc-roof-types-split__text h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #222;
}

.mdc-roof-types-split__text p {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
}

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

.mdc-roof-types-split__image {
    height: 350px;
    display: flex;
}

.mdc-roof-types-split__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

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

@media (max-width: 900px) {
    .mdc-roof-types-split__row {
        grid-template-columns: 1fr;
        gap: 25px;
        min-height: auto;
    }

    .mdc-roof-types-split__row.reverse {
        direction: ltr;
    }

    .mdc-roof-types-split__text {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 30px;
    }
}





/* =====================================
   MDC – SIMPLE ROOFING REPAIR PROCESS
===================================== */

.mdc-simple-roofing {
    background: #f7f7f7;
    padding: 80px 20px;
}

.mdc-simple-roofing__inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* Left-aligned title */
.mdc-simple-roofing__title {
    font-size: 2rem;
    color: #222;
    margin-bottom: 12px;
}

/* Red line under title */
.mdc-simple-roofing__divider {
    width: 600px;
    height: 4px;
    background: #bb0000;
    margin-bottom: 40px;
}

/* Steps list */
.mdc-simple-roofing__steps {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0;
}

/* Individual step */
.mdc-simple-roofing__steps li {
    display: flex;
    gap: 25px;
    margin-bottom: 35px;
}

/* Number circle */
.mdc-simple-roofing__steps li::before {
    counter-increment: step;
    content: counter(step);
    min-width: 48px;
    height: 48px;
    background: #bb0000;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Step title */
.mdc-simple-roofing__steps h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    color: #222;
}

/* Step description */
.mdc-simple-roofing__steps p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    max-width: 700px;
}

/* Gutter Installation Service Page */
/* =====================================
   MDC – IMPORTANCE OF RAIN GUTTER INSTALLATION
===================================== */

.mdc-gutter-install-importance {
    background: #ffffff;
    padding: 80px 20px;
}

.mdc-gutter-install-importance__inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

/* Title */
.mdc-gutter-install-importance__title {
    font-size: 2rem;
    color: #222;
    margin-bottom: 12px;
}

/* Red divider */
.mdc-gutter-install-importance__divider {
    width: 620px;
    height: 4px;
    background: #bb0000;
    margin: 0 auto 30px;
}

/* Paragraph */
.mdc-gutter-install-importance__text {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #555;
}


/* =====================================
   MDC – IMPORTANCE OF GUTTER CARE
===================================== */

.mdc-gutter-importance {
    background: #ffffff;
    padding: 80px 20px;
}

.mdc-gutter-importance__inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

/* Title */
.mdc-gutter-importance__title {
    font-size: 2rem;
    color: #222;
    margin-bottom: 12px;
}

/* Red divider */
.mdc-gutter-importance__divider {
    width: 600px;
    height: 4px;
    background: #bb0000;
    margin: 0 auto 30px;
}

/* Paragraph */
.mdc-gutter-importance__text {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #555;
}

/* =====================================
   MDC – GUTTER SYSTEMS GRID
===================================== */

.mdc-gutter-services {
  background: #f7f7f7;
  padding: 90px 20px;
}

.mdc-gutter-services__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* INTRO */
.mdc-gutter-services__intro {
  max-width: 520px;
  margin: 0 auto 50px; /* centers the whole block */
  text-align: center;
}

.mdc-gutter-services__intro h2 {
  font-size: 2.1rem;
  color: #222;
  margin-bottom: 12px;
}

.mdc-gutter-services__divider {
  width: 350px;
  height: 4px;
  background: #bb0000;
  margin: 0 auto 20px; /* centers the red line */
}

@media (max-width: 768px) {
    .mdc-gutter-services__divider {
        width: 200px;
    }
    }


.mdc-gutter-services__intro p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #555;
}

/* GRID */
.mdc-gutter-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* CARD */
.gutter-card {
  position: relative;
  height: 260px;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.gutter-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* OVERLAY */
.gutter-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(187, 0, 0, 0.85);
  color: #fff;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gutter-card__overlay h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.gutter-card__overlay p {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* HOVER */
.gutter-card:hover .gutter-card__overlay {
  opacity: 1;
}

.gutter-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gutter-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}





/* ===== iPad 2-column row highlight ===== */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Shared highlight style */
  .mdc-gutter-card:target,
  .mdc-gutter-card:target + .mdc-gutter-card,
  .mdc-gutter-card:has(+ .mdc-gutter-card:target) {
    
    box-shadow: 0 0 0 4px #bb0000;
    border-radius: 18px;
    transition: all 0.3s ease;
    animation: rowHighlightPop 0.35s ease;
  }

  @keyframes rowHighlightPop {
    0%   { transform: scale(0.98); }
    60%  { transform: scale(1.02); }
    100% { transform: scale(1); }
  }

}




/* ================================
   GUTTER DETAIL CARDS
================================ */

.mdc-gutter-details {
  background: #fff;
  padding: 90px 20px;
}

.mdc-gutter-details__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Title */
.mdc-gutter-details__title {
  text-align: center;
  font-size: 2.2rem;
  color: #222;
  margin-bottom: 12px;
}

.mdc-gutter-details__divider {
  width: 350px;
  height: 4px;
  background: #bb0000;
  margin: 0 auto 60px;
}

@media (max-width: 768px) {
    .mdc-gutter-details__divider {
        width: 280px;
    }
    }

/* Card */
.mdc-gutter-card {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 50px;
  align-items: center;
  margin-bottom: 80px;
}

.mdc-gutter-card.reverse {
  direction: rtl;
}

.mdc-gutter-card.reverse > * {
  direction: ltr;
}

/* Image */
.mdc-gutter-card__image img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

/* Content */
.mdc-gutter-card__content h3 {
  font-size: 1.6rem;
  color: #222;
  margin-bottom: 15px;
}

.mdc-gutter-card__content p {
  font-size: 1rem;
  line-height: 1.7;
  color: #555;
  margin-bottom: 18px;
}

.mdc-gutter-card__content ul {
  padding-left: 20px;
}

.mdc-gutter-card__content li {
  font-size: 0.95rem;
  margin-bottom: 10px;
  color: #333;
}

html {
  scroll-behavior: smooth;
}

/* =====================================
   MDC – SIMPLE GUTTER PROCESS
===================================== */

.mdc-simple-gutter{
  background: #f7f7f7;
  padding: 80px 20px;
}

.mdc-simple-gutter__inner{
  max-width: 1100px;
  margin: 0 auto;
}

/* Title */
.mdc-simple-gutter__title{
  font-size: 2.2rem;
  font-weight: 900;
  color: #111;
  margin: 0 0 12px;
}

/* Divider (responsive, not a fixed 745px) */
.mdc-simple-gutter__divider{
  width: min(820px, 100%);
  height: 4px;
  background: #bb0000;
  margin: 0 0 42px;
  border-radius: 2px;
}

/* Steps list */
.mdc-simple-gutter__steps{
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
}

/* Each step row */
.mdc-simple-gutter__steps li{
  display: grid;
  grid-template-columns: 56px 1fr; /* circle column + text */
  gap: 22px;
  align-items: start;
  position: relative;
  margin-bottom: 34px;
  padding-bottom: 34px;
}

/* Remove extra spacing on last item */
.mdc-simple-gutter__steps li:last-child{
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Number circle */
.mdc-simple-gutter__steps li::before{
  counter-increment: step;
  content: counter(step);

  width: 48px;
  height: 48px;

  background: #bb0000;
  color: #fff;

  font-weight: 900;
  font-size: 1.05rem;

  border-radius: 50%;
  display: grid;
  place-items: center;

  /* IMPORTANT: aligns the circle with the title line */
  margin-top: 2px;
}

/* Optional: vertical connector line (looks more professional) */
.mdc-simple-gutter__steps li::after{
  content: "";
  position: absolute;
  left: 24px;              /* center of the 48px circle */
  top: 56px;               /* start just under the circle */
  bottom: 0;
  width: 2px;
  background: rgba(187, 0, 0, 0.18);
}

.mdc-simple-gutter__steps li:last-child::after{
  display: none;
}

/* Text block */
.mdc-simple-gutter__steps .step-content{
  min-width: 0;
}

/* Step title */
.mdc-simple-gutter__steps h3{
  margin: 0 0 8px;
  font-size: 1.18rem;
  font-weight: 900;
  color: #111;
  line-height: 1.2;
}

/* Step description */
.mdc-simple-gutter__steps p{
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: #444;
  max-width: 720px;
}

/* Mobile */
@media (max-width: 650px){
  .mdc-simple-gutter__title{
    font-size: 1.8rem;
  }

  .mdc-simple-gutter__steps li{
    grid-template-columns: 48px 1fr;
    gap: 16px;
  }

  .mdc-simple-gutter__steps li::before{
    width: 42px;
    height: 42px;
    font-size: 1rem;
  }

  .mdc-simple-gutter__steps li::after{
    left: 21px;
    top: 50px;
  }
}


/* =====================================
   MDC – FINAL GUTTER FORM SECTION
===================================== */

.mdc-gutter-final {
  background: #ffffff;
  padding: 90px 20px;
}

.mdc-gutter-final__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* LEFT CONTENT */
.mdc-gutter-final__content h2 {
  font-size: 2.3rem;
  color: #222;
  margin-bottom: 14px;
}

.mdc-gutter-final__divider {
  width: 515px;
  height: 4px;
  background: #bb0000;
  margin-bottom: 25px;
}

.mdc-commercial-final__divider {
  width: 395px;
  height: 4px;
  background: #bb0000;
  margin-bottom: 25px;
}

.mdc-gutter-final__content p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #555;
  max-width: 480px;
  margin-bottom: 15px;
}

/* FORM HOLDER */
.mdc-gutter-final__form {
  display: flex;
  justify-content: center;
}

/* ===== SECTION HEADER ===== */
.section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 60px;
}

.section-header h2 {
    color: #000000;
    font-size: 32px;
    text-align: center;
    margin: 0;
}

.section-divider {
    width: 700px;
    height: 4px;
    background: #bb0000;
    margin-bottom: 40px;
}

.section-divider-orange {
    width: min(350px, 80%);
    height: 4px;
    background: #bb0000;
    margin: 0 auto 40px;
}


.section-divider-LA {
    width: min(350px, 80%);
    height: 4px;
    background: #bb0000;
    margin: 0 auto 40px;
}


.section-divider-riverside {
    width: min(350px, 80%);
    height: 4px;
    background: #bb0000;
    margin: 0 auto 40px;
}


/* ===== COMMERCIAL ROOFING PAGE ===== */

/* ===== COMMERCIAL IMPORTANCE SECTION ===== */

/* ===== COMMERCIAL PROBLEM SECTION ===== */

.commercial-importance {
  padding: 80px 30px;
  text-align: center;
  background: #ffffff;
}

.commercial-intro {
  max-width: 800px;
  margin: 0 auto 50px auto;
  font-size: 16px;
  line-height: 1.7;
  color: #555;
}

/* GRID */
.commercial-problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto 50px auto;
}

/* CARDS */

/* ===== COMMERCIAL CTA BUTTON ===== */

.mdc-roofing-importance__button-wrap {
    margin-top: 30px;
    text-align: center;
}

.mdc-commercial-btn {
    display: inline-block;
    background: #bb0000;
    color: #ffffff;
    padding: 14px 30px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s ease;
}

.mdc-commercial-btn:hover {
    background: #8f0000;
}


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

.commercial-services-section {
  padding: 80px 30px;
  background: #f7f7f7;
}

.commercial-services-section h2 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 10px;
}

.commercial-service-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto 70px auto;
}

.commercial-service-box.reverse {
  direction: rtl;
}

.commercial-service-box.reverse * {
  direction: ltr;
}

.commercial-service-text h3 {
  font-size: 24px;
  margin-bottom: 15px;
}

.commercial-service-text p {
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 15px;
}

.commercial-service-image img {
  width: 100%;
  border-radius: 8px;
  height: 350px;
}

/* MOBILE */
@media (max-width: 768px) {
  .commercial-service-box {
    grid-template-columns: 1fr;
  }
}

/* ===== WHY CHOOSE MDC COMMERCIAL ===== */

.mdc-commercial-why {
    padding: 80px 30px;
    background: #f7f7f7;
}

.mdc-commercial-why__inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.mdc-commercial-why__title {
    font-size: 36px;
    margin-bottom: 10px;
}

.mdc-commercial-why__divider {
    width: 80px;
    height: 4px;
    background: #bb0000;
    margin: 15px auto 40px;
}

.mdc-commercial-why__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.mdc-commercial-why__card {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.mdc-commercial-why__card h3 {
    margin-bottom: 12px;
}

.mdc-commercial-why__card p {
    color: #555;
    line-height: 1.6;
}

/* ===== COMMERCIAL PROTECTION ===== */

.mdc-commercial-protection {
    padding: 80px 30px;
    background: #ffffff;
}

.mdc-commercial-protection__inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.mdc-commercial-protection__title {
    font-size: 34px;
}

.mdc-commercial-protection__divider {
    width: 80px;
    height: 4px;
    background: #bb0000;
    margin: 15px auto 35px;
}

.mdc-commercial-protection__text {
    max-width: 750px;
    margin: 0 auto 45px;
    color: #555;
    line-height: 1.7;
}

.mdc-commercial-protection__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
}

.mdc-commercial-protection__card {
    padding: 25px;
    background: #f7f7f7;
    border-radius: 8px;
}



/* ===== SERVICE WITH IMAGE ===== */
.service-with-image {
    display: flex;
    align-items: center;
    gap: 40px;
}

.service-with-image.reverse {
    flex-direction: row-reverse;
}

.service-image {
    flex: 1;
}

.service-image img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.service-content {
    flex: 1;
}

.service-content h3 {
    color: #b30000;
    font-size: 26px;
    margin-bottom: 10px;
}

/* ===== WHY CHOOSE US ===== */
.commercial-why {
    background: #f7f7f7;
    padding: 80px 20px;
}

.why-grid {
    max-width: 1100px;
    margin: 60px auto 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
}

.why-item {
    background-color: #ffffff;
    text-align: center;
    padding: 30px 20px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.why-item i {
    font-size: 34px;
    color: #b30000;
    margin-bottom: 15px;
}

.why-item h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

/* ===== Locations ===== */
/* ===== ORANGE COUNTY HERO (matches Roofing hero style) ===== */
.oc-hero{
    padding: 200px 20px;
    background: radial-gradient(circle at top, #8d0000 0%, #6e0000 35%, #520000 100%);
    color: #fff;
    text-align: center;
}

.oc-hero-inner{
    max-width: 900px;
    margin: 0 auto;
}

.oc-hero-kicker{
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    margin-bottom: 14px;
    text-transform: uppercase;
}

.oc-hero-title{
    margin: 0;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.12;
    font-weight: 800;
}

.oc-hero-title span{
    color: #bb0000; /* your brand red */
    font-weight: 900;
}

.oc-hero-sub{
    margin: 18px auto 26px;
    max-width: 720px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,0.88);
}

.oc-hero-btn{
    display: inline-block;
    background: #bb0000;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 6px;
    border: 2px solid #bb0000;
    transition: 0.2s ease;
}

.oc-hero-btn:hover{
    background: transparent;
    color: #fff;
    border-color: #fff;
}

/* Mobile spacing */
@media (max-width: 768px){
  .oc-hero{
    padding: 60px 16px;
  }
}

/* ===== ORANGE COUNTY CITIES (CLEAN RESTART) ===== */
.oc-cities{
    padding: 70px 0;
    background: #ffffff;
}

.oc-cities__inner{
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 20px;
}

.oc-cities__title{
    text-align: center;
    font-size: 28px;
    font-weight: 900;
    color: #111;
    margin: 0;
}

.oc-cities__divider{
    width: 85px;
    height: 4px;
    background: #bb0000;
    margin: 14px auto 26px;
    border-radius: 999px;
}

/* The list itself */
.oc-cities__list{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 14px;
}

/* Minimal “tag” style (not chunky boxes) */
.oc-cities__list span{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #ededed;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
}

/* small red dot bullet */
.oc-cities__list span::before{
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #bb0000;
    flex: 0 0 8px;
}

/* Hover is subtle */
.oc-cities__list span:hover{
    border-color: #d9d9d9;
}

/* Responsive */
@media (max-width: 950px){
  .oc-cities__list{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px){
  .oc-cities{
    padding: 55px 0;
  }
  .oc-cities__title{
    font-size: 22px;
  }
  .oc-cities__list{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .oc-cities__list span{
    padding: 10px 10px;
    font-size: 13.5px;
  }
}

/* ===== Contact US ===== */
/* ===== CONTACT INTRO – RED VERSION ===== */
.contact-intro{
  padding: 250px 20px;
  background: radial-gradient(circle at top, #8d0000 0%, #6e0000 35%, #520000 100%);
  text-align: center;
  color: #ffffff;
}

.contact-intro-inner{
  max-width: 850px;
  margin: 0 auto;
}

.contact-intro h1{
  font-size: 38px;
  font-weight: 900;
  margin-bottom: 14px;
  color: #ffffff;
}

.contact-intro p{
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
  margin-bottom: 28px;
}

.contact-intro-actions{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.contact-call-btn{
  padding: 12px 22px;
  font-weight: 800;
  text-decoration: none;
  border-radius: 8px;
  border: 2px solid #ffffff;
  color: #ffffff;
}

.contact-estimate-btn{
  padding: 12px 22px;
  font-weight: 800;
  text-decoration: none;
  border-radius: 8px;
  background: #ffffff;
  color: #bb0000;
}

.contact-call-btn:hover,
.contact-estimate-btn:hover{
  opacity: 0.9;
}

/* Mobile */
@media (max-width: 600px){
  .contact-intro{
    padding: 65px 16px;
  }

  .contact-intro h1{
    font-size: 30px;
  }
}

/* ===== CONTACT SECTION #2: INFO + FORM ===== */
.contact-two{
  padding: 70px 0;
  background: #ffffff;
}

.contact-two__field textarea{
  min-height: 120px; /* set the height you want */
  resize: none;      /* 🚫 prevents resizing */
}


.contact-two__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}

.contact-two h2{
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  color: #111;
}

.contact-two__divider{
  width: 500px;
  height: 4px;
  background: #bb0000;
  margin: 12px 0 18px;
  border-radius: 999px;
}

.contact-two__divider2{
  width: 145px;
  height: 4px;
  background: #bb0000;
  margin: 12px 0 18px;
  border-radius: 999px;
}

/* LEFT CARD */
.contact-two__card{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}

.contact-two__row{
  display: flex;
  gap: 14px;
  padding: 12px 0;
}

.contact-two__row + .contact-two__row{
  border-top: 1px solid #f0f0f0;
}

.contact-two__row i{
  color: #bb0000;
  font-size: 18px;
  margin-top: 3px;
}

.contact-two__label{
  margin: 0;
  font-weight: 900;
  color: #111;
  font-size: 14px;
}

.contact-two__text{
  margin: 4px 0 0;
  color: #444;
  line-height: 1.5;
  font-size: 14px;
}

.contact-two__small{
  margin: 6px 0 0;
  color: #666;
  font-size: 12.5px;
  line-height: 1.5;
}

.contact-two__link{
  display: inline-block;
  margin-top: 4px;
  font-weight: 900;
  color: #bb0000;
  text-decoration: none;
}

.contact-two__link:hover{
  text-decoration: underline;
}

/* TRUST PILLS */
.contact-two__trust{
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.contact-two__trust-item{
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff6f6;
  border: 1px solid #ffe0e0;
  border-radius: 12px;
  padding: 12px;
  font-weight: 900;
  color: #111;
}

.contact-two__trust-item i{
  color: #bb0000;
}

/* RIGHT FORM */
.contact-two__form{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}

.contact-two__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.contact-two__field{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-two__field--full{
  grid-column: 1 / -1;
}

.contact-two__field label{
  font-weight: 900;
  color: #111;
  font-size: 13px;
}

.contact-two__field input,
.contact-two__field select,
.contact-two__field textarea{
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 12px 12px;
  font-size: 14px;
  outline: none;
  background: #fff;
}

.contact-two__field input:focus,
.contact-two__field select:focus,
.contact-two__field textarea:focus{
  border-color: #bb0000;
  box-shadow: 0 0 0 3px rgba(187,0,0,0.12);
}

.contact-two__submit{
  margin-top: 14px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: #bb0000;
  color: #fff;
  font-weight: 900;
  padding: 13px 16px;
  cursor: pointer;
}

.contact-two__submit:hover{
  opacity: 0.95;
}

.contact-two__note{
  margin: 10px 0 0;
  color: #666;
  font-size: 12.5px;
  line-height: 1.5;
}

/* RESPONSIVE */
@media (max-width: 900px){
  .contact-two__inner{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px){
  .contact-two{
    padding: 55px 0;
  }
  .contact-two__grid{
    grid-template-columns: 1fr;
  }
  .contact-two__trust{
    grid-template-columns: 1fr;
  }
}

/* ===== HERO FORM – MATCH CONTACT-TWO STYLE ===== */
.contact-two .hero-form{
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}

/* Form title */
.contact-two .hero-form h2{
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 900;
  color: #111; /* same as contact-two headings */
  text-align: center;
}

/* Labels */
.contact-two .hero-form label{
  display: block;
  margin-top: 14px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 900;
  color: #111;
}

/* Inputs */
.contact-two .hero-form input,
.contact-two .hero-form select,
.contact-two .hero-form textarea{
  width: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 12px 12px;
  font-size: 14px;
  background: #ffffff;
  color: #111;
  outline: none;
  box-sizing: border-box;
}

/* Focus = same red as rest of contact section */
.contact-two .hero-form input:focus,
.contact-two .hero-form select:focus,
.contact-two .hero-form textarea:focus{
  border-color: #bb0000;
  box-shadow: 0 0 0 3px rgba(187,0,0,0.12);
}

/* Textarea height */
.contact-two .hero-form textarea{
  min-height: 120px;
  resize: vertical;
}

/* Submit button – identical vibe to rest of site */
.contact-two .hero-form button{
  margin-top: 18px;
  width: 100%;
  background: #bb0000;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.contact-two .hero-form button:hover{
  opacity: 0.95;
}

/* Mobile */
@media (max-width: 600px){
  .contact-two .hero-form{
    padding: 20px;
  }

  .contact-two .hero-form h2{
    font-size: 20px;
  }
}

.contact-two__form h2{
  text-align: center;
}

/* =========================================
   CONTACT TWO (Info + Form) - MOBILE
   ========================================= */
@media (max-width: 980px){

  /* Stack the two columns */
  .contact-two__inner{
    display: flex !important;
    flex-direction: column !important;
    gap: 34px;
  }

  /* Make both sides full width */
  .contact-two__info,
  .contact-two__form{
    width: 100%;
  }

  /* Center headings + dividers on mobile */
  .contact-two__info h2,
  .contact-two__form h2{
    text-align: center;
  }

  .contact-two__divider2,
  .contact-two__divider{
    margin: 14px auto 24px;
    width: 300px; /* centers divider + controls spacing */
  }

  /* Card spacing */
  .contact-two__card{
    padding: 18px;
  }

  /* Rows (icon + text) */
  .contact-two__row{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
  }

  .contact-two__row i{
    font-size: 20px;
    margin-top: 4px;
  }

  /* Trust items become a 2x2 grid */
  .contact-two__trust{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
  }

  .contact-two__trust-item{
    justify-content: center;
    text-align: center;
    padding: 12px 10px;
  }

  /* Form grid -> single column */
  .contact-two__grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* Full width fields */
  .contact-two__field,
  .contact-two__field--full{
    width: 100%;
  }

  .contact-two__field input,
  .contact-two__field select,
  .contact-two__field textarea{
    width: 100%;
    font-size: 16px; /* prevents iPhone zoom */
    padding: 12px 12px;
    box-sizing: border-box;
  }

  /* Submit button full width */
  .contact-two__submit{
    width: 100%;
    padding: 16px;
    font-size: 16px;
  }
}

/* Extra small phones */
@media (max-width: 520px){

  .contact-two{
    padding: 55px 16px;
  }

  .contact-two__trust{
    grid-template-columns: 1fr; /* stack trust items */
  }
}


/* ===== CONTACT MAP SECTION ===== */
.contact-map{
  padding: 70px 0;
  background: #f7f7f7;
}

.contact-map__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.contact-map h2{
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  color: #111;
}

.contact-map__divider{
  width: 350px;
  height: 4px;
  background: #bb0000;
  margin: 14px auto 18px;
  border-radius: 999px;
}

@media (max-width: 600px){
  .contact-map__divider{
    width: 300px;
  }
}

.contact-map__text{
  max-width: 820px;
  margin: 0 auto 26px;
  font-size: 15px;
  line-height: 1.6;
  color: #444;
}

.contact-map__embed{
  width: 100%;
  height: 420px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e6e6e6;
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}

.contact-map__embed iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

/* Mobile */
@media (max-width: 600px){
  .contact-map{
    padding: 55px 0;
  }

  .contact-map__embed{
    height: 300px;
  }
}

/* Free Estimate Page */
/* ===== ESTIMATE HERO ===== */
.estimate-hero{
  padding: 175px 20px;
  background: radial-gradient(circle at top, #8d0000 0%, #6e0000 35%, #520000 100%);
  color: #fff;
  text-align: center;
}

.estimate-hero__inner{
  max-width: 980px;
  margin: 0 auto;
}

.estimate-hero__kicker{
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}

.estimate-hero__title{
  margin: 0;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.12;
  font-weight: 900;
}

.estimate-hero__title span{
  color: #ff0000;
}

.estimate-hero__sub{
  margin: 18px auto 22px;
  max-width: 780px;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
}

/* Trust pills */
.estimate-hero__trust{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.estimate-hero__trust span{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  font-weight: 900;
  font-size: 13px;
  color: #fff;
}

.estimate-hero__trust i{
  color: #fff;
}

/* Buttons */
.estimate-hero__actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.estimate-hero__btn{
  display: inline-block;
  padding: 13px 18px;
  border-radius: 12px;
  font-weight: 900;
  text-decoration: none;
  border: 2px solid #fff;
  transition: 0.2s ease;
  white-space: nowrap;
}

.estimate-hero__btn--primary{
  background: #bb0000;
  border-color: #bb0000;
  color: #fff;
}

.estimate-hero__btn--secondary{
  background: transparent;
  color: #fff;
}

.estimate-hero__btn:hover{
  opacity: 0.92;
}

/* Mobile */
@media (max-width: 600px){
  .estimate-hero{
    padding: 70px 16px;
  }

  .estimate-hero__btn{
    width: 100%;
    text-align: center;
  }
}

/* ===== Estimate Page: Quick Reassurance ===== */
.estimate-reassurance{
  padding: 70px 20px;
  background: #fff;
}

.estimate-reassurance__inner{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.estimate-reassurance__inner h2{
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  color: #111;
  margin-bottom: 12px;
}

.estimate-reassurance__divider{
  width: min(350px, 80%);
  height: 4px;
  background: #bb0000;
  margin: 0 auto 22px;
  border-radius: 99px;
}

.estimate-reassurance__sub{
  max-width: 820px;
  margin: 0 auto 38px;
  font-size: 1.06rem;
  line-height: 1.6;
  color: #444;
}

.estimate-reassurance__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 10px;
}

.estimate-reassurance__card{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 22px 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.estimate-reassurance__card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}

.estimate-reassurance__card i{
  font-size: 34px;
  color: #bb0000;
  margin-bottom: 12px;
}

.estimate-reassurance__card h3{
  font-size: 1.05rem;
  font-weight: 800;
  color: #111;
  margin: 6px 0 8px;
}

.estimate-reassurance__card p{
  font-size: 0.98rem;
  line-height: 1.55;
  color: #555;
  margin: 0;
}

/* Responsive */
@media (max-width: 1000px){
  .estimate-reassurance__grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px){
  .estimate-reassurance{
    padding: 55px 16px;
  }

  .estimate-reassurance__grid{
    grid-template-columns: 1fr;
  }

  .estimate-reassurance__card{
    padding: 20px 16px;
  }
}

/* Featured Card (Free Estimates) */
.estimate-reassurance__card--featured{
  border: 2px solid #bb0000;
  box-shadow: 0 14px 34px rgba(187, 0, 0, 0.15);
  position: relative;
}

.estimate-reassurance__card--featured:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(187, 0, 0, 0.22);
}

.estimate-reassurance__badge{
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #bb0000;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 50px;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

/* ===== Estimate Form Section ===== */
.estimate-form{
  padding: 80px 20px;
  background: #f7f7f7; /* light red tint */
}

.estimate-form__inner{
  max-width: 1150px;
  margin: 0 auto;
}

.estimate-form__header{
  text-align: center;
  margin-bottom: 34px;
}

.estimate-form__header h2{
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 900;
  color: #111;
  margin-bottom: 12px;
}

.estimate-form__divider{
  width: min(350px, 80%);
  height: 4px;
  background: #bb0000;
  margin: 0 auto 18px;
  border-radius: 999px;
}

.estimate-form__header p{
  max-width: 820px;
  margin: 0 auto;
  color: #444;
  line-height: 1.65;
  font-size: 1.05rem;
}

.estimate-form__wrap{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 24px;
  align-items: start;
}

.estimate-form__info{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 18px;
  padding: 26px 22px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

.estimate-form__info h3{
  font-size: 1.25rem;
  font-weight: 900;
  margin: 0 0 14px;
  color: #111;
}

.estimate-form__list{
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
}

.estimate-form__list li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #333;
  line-height: 1.5;
  font-size: 1rem;
}

.estimate-form__list i{
  color: #bb0000;
  margin-top: 3px;
  font-size: 1rem;
}

.estimate-form__callbox{
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.estimate-form__calltext{
  margin: 0 0 10px;
  color: #444;
  font-weight: 700;
}

.estimate-form__callbtn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #bb0000;
  color: #fff;
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(187,0,0,0.18);
}

.estimate-form__callbtn:hover{
  transform: translateY(-1px);
}

.estimate-form__note{
  margin: 16px 0 0;
  font-size: 0.92rem;
  color: #666;
  line-height: 1.5;
}

/* Form Card */
.estimate-form__card{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 18px;
  padding: 26px 22px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

.estimate-form__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field{
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field--full{
  grid-column: 1 / -1;
}

.field label{
  font-weight: 800;
  color: #222;
  font-size: 0.95rem;
}

.field input,
.field select,
.field textarea{
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 12px 12px;
  font-size: 1rem;
  outline: none;
  background: #fff;
}

.field textarea{
  resize: vertical;
  min-height: 130px;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: #bb0000;
  box-shadow: 0 0 0 4px rgba(187,0,0,0.10);
}

.field__hint{
  display: block;
  margin-top: 6px;
  color: #666;
  font-size: 0.9rem;
  line-height: 1.35;
}

.estimate-form__submit{
  width: 100%;
  margin-top: 14px;
  background: #bb0000;
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(187,0,0,0.18);
}

.estimate-form__submit:hover{
  transform: translateY(-1px);
}

.estimate-form__mini{
  margin: 12px 0 0;
  text-align: center;
  color: #666;
  font-size: 0.92rem;
}

/* Responsive */
@media (max-width: 980px){
  .estimate-form__wrap{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px){
  .estimate-form{
    padding: 60px 16px;
  }

  .estimate-form__grid{
    grid-template-columns: 1fr;
  }

  .estimate-form__info,
  .estimate-form__card{
    padding: 22px 16px;
  }
}

/* ===== How Our Free Quote Works ===== */
.quote-steps{
  padding: 80px 20px;
  background: #fff;
}

.quote-steps1{
  padding: 80px 20px;
  background: #f7f7f7;
}

.quote-steps__inner{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.quote-steps__kicker{
  font-weight: 900;
  letter-spacing: 2px;
  color: #bb0000;
  font-size: 0.85rem;
  margin: 0 0 10px;
}

.quote-steps__title{
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 900;
  margin: 0 0 12px;
  color: #111;
}

.quote-steps__divider{
  width: min(350px, 80%);
  height: 4px;
  background: #bb0000;
  margin: 0 auto 40px;
  border-radius: 999px;
}

.quote-steps__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.quote-step{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 18px;
  padding: 26px 20px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quote-step:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.12);
}

.quote-step__icon{
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: #fff3f3;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border: 1px solid #f2dede;
}

.quote-step__icon i{
  font-size: 28px;
  color: #bb0000;
}

.quote-step h3{
  font-size: 1.1rem;
  font-weight: 900;
  margin: 10px 0 10px;
  color: #111;
}

.quote-step p{
  margin: 0;
  color: #555;
  line-height: 1.6;
  font-size: 1rem;
}

.quote-steps__cta{
  margin-top: 28px;
}

.quote-steps__btn{
  display: inline-block;
  background: #bb0000;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  padding: 14px 20px;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(187,0,0,0.18);
}

.quote-steps__btn:hover{
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 980px){
  .quote-steps__grid{
    grid-template-columns: 1fr;
  }
}






:root{
  --mdc-red: #bb0000;
  --text: #1f1f1f;
  --muted: #666;
  --border: #e6e6e6;
  --shadow: 0 10px 25px rgba(0,0,0,0.08);
  --shadowHover: 0 14px 35px rgba(0,0,0,0.14);
  --radius: 16px;
  --max: 1100px;
}

*{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: #fff;
}

/* HERO (like your Services pages) */
.locations-hero{
  padding: 70px 0 55px;
  background: #ffffff;
}

.locations-hero__inner{
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  text-align: center;
}

.locations-hero h1{
  margin: 0;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: 0.2px;
}

.locations-hero__divider{
  width: 90px;
  height: 4px;
  background: var(--mdc-red);
  margin: 14px auto 30px;
  border-radius: 999px;
}

/* 3 CLICKABLE BOXES */
.locations-tabs{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: min(900px, 100%);
  margin: 0 auto;
}

.locations-tab{
  text-decoration: none;
  border: 2px solid var(--border);
  background: #fff;
  border-radius: 14px;
  padding: 18px 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text);
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.locations-tab:hover{
  background: var(--mdc-red);
  border-color: var(--mdc-red);
  color: #fff;
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadowHover);
}

/* SECTION */
.locations-section{
  padding: 55px 0 70px;
}

.locations-section__inner{
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

/* makes scrolling land correctly if you have sticky header */
.locations-section{
  scroll-margin-top: 130px;
}

.locations-section h2{
  margin: 0 0 10px;
  text-align: center;
  font-size: clamp(20px, 2.4vw, 30px);
}

.section-divider{
  width: 110px;
  height: 4px;
  background: var(--mdc-red);
  border-radius: 999px;
  margin: 0 auto 26px;
}

/* MAP BOX */
.locations-map{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fff;
}

.locations-map iframe{
  width: 100%;
  height: 360px;
  border: 0;
  display: block;
}

/* CITIES */
.locations-cities{
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 12px;
  box-shadow: var(--shadow);
  background: #fff;
}

.locations-cities h3{
  margin: 0 0 14px;
  font-size: 16px;
}

.cities-grid{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 16px;
}

.cities-grid li{
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8f8f8;
  border: 1px solid #f0f0f0;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.cities-grid li:hover{
  background: #fff3f3;
  border-color: #e6b3b3;
  transform: translateY(-1px);
}

/* placeholders */
.locations-section--placeholder .placeholder-text{
  text-align: center;
  color: var(--muted);
  margin: 0;
}

/* MOBILE */
@media (max-width: 900px){
  .locations-tabs{
    grid-template-columns: 1fr;
  }

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

  .locations-map iframe{
    height: 300px;
  }
}

.locations-cta {
    padding: 80px 20px;
    text-align: center;
    color: #ffffff;
    background: radial-gradient(
        circle at top,
        #8d0000 0%,
        #6e0000 35%,
        #520000 100%
  );
}

.locations-cta h3 {
    margin-bottom: 12px;
    font-size: 26px;
}

.locations-cta p {
    max-width: 600px;
    margin: 0 auto 30px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.locations-cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* PRIMARY: Contact Us */
.btn-contact {
    background: #ffffff;
    color: #bb0000;
    padding: 14px 32px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 800;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-contact:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* SECONDARY: Call Now */
.btn-call {
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 12px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 800;
    transition: background 0.2s ease, color 0.2s ease;
}

.btn-call:hover {
    background: #ffffff;
    color: #bb0000;
}

/* ===== Ready for a Better Roof Section ===== */
.home-roof-cta{
  padding: 80px 20px;
  background: #ffffff;
}

.home-roof-cta1{
  padding: 80px 20px;
  background: #f7f7f7;
}

.home-roof-cta2{
  padding: 80px 20px;
  background: #ffffff;
}


.home-roof-cta__inner{
  max-width: 1250px; /* slightly wider overall */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.4fr; /* form gets much more space */
  gap: 50px;
  align-items: center;
}


/* LEFT SIDE (no box) */
.home-roof-cta__left h2{
  font-size: clamp(34px, 3.5vw, 38px);
  font-weight: 900;
  margin: 0;
  color: #111;
  line-height: 1.1;
}

.home-roof-cta__left1 h2{
  font-size: clamp(34px, 3.5vw, 40px);
  font-weight: 900;
  margin: 0;
  color: #111;
  line-height: 1.1;
}

.home-roof-cta__divider{
  width: min(500px, 90%);
  height: 4px;
  background: #bb0000;
  margin: 20px 0 30px 0;
  border-radius: 999px;
}

.home-roof-cta__left p{
  font-size: 18px;
  line-height: 1.7;
  color: #555;
  margin: 0;
}

.home-roof-cta__left1 p{
  font-size: 1.1rem;
  line-height: 1.7;
  color: #555;
  margin: 0;
}

.home-roof-cta__left2 h2{
  font-size: clamp(32px, 3.5vw, 32px);
  line-height: 1.7;
  color: #000000;
  margin: 0;
}

.home-roof-cta__left p{
  margin-bottom: 18px;  /* adjust this number if you want more/less space */
  line-height: 1.7;
}


.home-roof-cta__left1 p{
  margin-bottom: 18px;  /* adjust this number if you want more/less space */
  line-height: 1.7;
}

.home-roof-cta__left2 p{
  margin-bottom: 18px;  /* adjust this number if you want more/less space */
  line-height: 1.7;
}






/* RIGHT SIDE keeps your existing form styling */
.home-roof-cta__right{
  display: flex;
  justify-content: center;
}

.home-roof-cta__right .estimate-form__card{
  width: 100%;
  max-width: 720px; /* increase from default */
}

.field input,
.field select,
.field textarea{
  padding: 14px 14px;
  font-size: 1.05rem;
}




/* Responsive */
@media (max-width: 980px){
  .home-roof-cta__inner{
    grid-template-columns: 1fr;
  }

  .home-roof-cta__left{
    text-align: center;
  }

  .home-roof-cta__divider{
    margin: 20px auto 30px;
  }
}

/* ===== MDC SIMPLE ROOFING STEPS (PRO STYLE) ===== */
.mdc-simple-roofing{
  background: #f7f7f7;
  padding: 80px 20px;
}

.mdc-simple-roofing__inner{
  max-width: 1100px;
  margin: 0 auto;
}

/* Title */
.mdc-simple-roofing__title{
  font-size: 2.2rem;
  font-weight: 900;
  color: #111;
  margin: 0 0 12px;
}

/* Divider (responsive) */
.mdc-simple-roofing__divider{
  width: min(0px, 100%);
  height: 4px;
  background: #bb0000;
  margin: 0 0 42px;
  border-radius: 2px;
}

/* Steps list */
.mdc-simple-roofing__steps{
  margin: 0;
  padding: 0;
  list-style: none;          /* we'll draw numbers ourselves */
  counter-reset: step;
}

/* Each step row */
.mdc-simple-roofing__steps li{
  display: grid;
  grid-template-columns: 56px 1fr; /* circle + text */
  gap: 22px;
  align-items: start;
  position: relative;
  margin-bottom: 34px;
  padding-bottom: 34px;
}

/* Remove extra spacing on last */
.mdc-simple-roofing__steps li:last-child{
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Number circle */
.mdc-simple-roofing__steps li::before{
  counter-increment: step;
  content: counter(step);

  width: 48px;
  height: 48px;

  background: #bb0000;
  color: #f7f7f7;

  font-weight: 900;
  font-size: 1.05rem;

  border-radius: 50%;
  display: grid;
  place-items: center;

  /* aligns circle with the title line */
  margin-top: 2px;
}

/* Optional connector line (looks premium) */
.mdc-simple-roofing__steps li::after{
  content: "";
  position: absolute;
  left: 24px;               /* center of 48px circle */
  top: 56px;                /* just under circle */
  bottom: 0;
  width: 2px;
  background: rgba(187, 0, 0, 0.18);
}

.mdc-simple-roofing__steps li:last-child::after{
  display: none;
}

/* Text block */
.mdc-simple-roofing__steps .step-content{
  min-width: 0;
}

/* Step title */
.mdc-simple-roofing__steps h3{
  margin: 0 0 8px;
  font-size: 1.18rem;
  font-weight: 900;
  color: #111;
  line-height: 1.2;
}

/* Step description */
.mdc-simple-roofing__steps p{
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: #444;
  max-width: 720px;
}

/* Mobile */
@media (max-width: 650px){
  .mdc-simple-roofing__title{
    font-size: 1.8rem;
  }

  .mdc-simple-roofing__steps li{
    grid-template-columns: 48px 1fr;
    gap: 16px;
  }

  .mdc-simple-roofing__steps li::before{
    width: 42px;
    height: 42px;
    font-size: 1rem;
  }

  .mdc-simple-roofing__steps li::after{
    left: 21px;
    top: 50px;
  }
}

/* =========================
   COMMERCIAL ROOFING PROCESS
   ========================= */

.mdc-commercial-process{
  background: #ffffff;
  padding: 90px 20px;
}

.mdc-commercial-process__inner{
  max-width: 1100px;
  margin: 0 auto;
}

.mdc-commercial-process__title{
  font-size: 2.2rem;
  font-weight: 900;
  color: #111;
  margin: 0 0 12px;
}

@media (max-width: 500px){
  .mdc-commercial-process__title{
    font-size: 1.0rem;
  }
}

.mdc-commercial-process__divider{
  width: min(585px, 100%);
  height: 4px;
  background: #bb0000;
  margin: 0 0 45px;
  border-radius: 2px;
}

/* Steps list */
.mdc-commercial-process__steps{
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

/* Step layout */
.mdc-commercial-process__steps li{
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  align-items: start;
  position: relative;
  margin-bottom: 36px;
  padding-bottom: 36px;
}

/* Remove spacing on last */
.mdc-commercial-process__steps li:last-child{
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Number Circle */
.mdc-commercial-process__steps li::before{
  counter-increment: step;
  content: counter(step);

  width: 50px;
  height: 50px;

  background: #bb0000;
  color: #ffffff;

  font-weight: 900;
  font-size: 1.1rem;

  border-radius: 50%;
  display: grid;
  place-items: center;

  margin-top: 3px;
}

/* Vertical Connector Line */
.mdc-commercial-process__steps li::after{
  content: "";
  position: absolute;
  left: 25px;
  top: 58px;
  bottom: 0;
  width: 2px;
  background: rgba(187, 0, 0, 0.2);
}

.mdc-commercial-process__steps li:last-child::after{
  display: none;
}

/* Text Content */
.mdc-commercial-process__steps h3{
  margin: 0 0 8px;
  font-size: 1.2rem;
  font-weight: 900;
  color: #111;
}

.mdc-commercial-process__steps p{
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: #444;
  max-width: 750px;
}

/* Responsive */
@media (max-width: 700px){
  .mdc-commercial-process__steps li{
    grid-template-columns: 50px 1fr;
    gap: 18px;
  }

  .mdc-commercial-process__steps li::before{
    width: 42px;
    height: 42px;
    font-size: 1rem;
  }

  .mdc-commercial-process__steps li::after{
    left: 21px;
    top: 50px;
  }
}


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

.roofing-services-section{
  padding: 90px 30px;
  background: #f7f7f7;
}

.roofing-services-inner{
  max-width: 1100px;
  margin: 0 auto;
}

.roofing-services-title{
  text-align: center;
  font-size: 36px;
  font-weight: 900;
  color: #111;
  margin-bottom: 10px;
}

.roofing-services-divider{
  width: 350px;
  height: 4px;
  background: #bb0000;
  margin: 0 auto 60px auto;
  border-radius: 2px;
}

/* Layout */
.roofing-service-box{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  margin-bottom: 80px;
}

.roofing-service-box.reverse{
  direction: rtl;
}

.roofing-service-box.reverse *{
  direction: ltr;
}

/* Text */
.roofing-service-text h3{
  font-size: 26px;
  font-weight: 900;
  margin-bottom: 15px;
  color: #111;
}

.roofing-service-text p{
  font-size: 16px;
  line-height: 1.75;
  color: #555;
  margin-bottom: 15px;
}

/* Image */
.roofing-service-image img{
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* MOBILE */
@media (max-width: 768px){
  .roofing-service-box{
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 60px;
  }

  .roofing-service-image img{
    height: 280px;
  }

  .roofing-services-title{
    font-size: 28px;
  }
}