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

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #111;
    color: #222;
}

/* HEADER */

.champion-header,
.champion-header * {
    box-sizing: border-box;
}

.champion-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    z-index: 9999;
    background:rgba(255, 255, 255, 1);
    overflow: visible;
    pointer-events: auto;
}

.champion-logo-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 310px;
    height: 136px;
    background: #ffffff;
    clip-path: polygon(0 0, 100% 0, 58% 100%, 0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0px;
    z-index: 5;
}

.champion-logo-panel img {
    width: 320px;
    height: auto;
    display: block;
    margin-right: 40px;
}

.champion-nav {
    position: relative;
    height: 100%;
    padding-left: 380px;
    padding-right: 360px;
    display: flex;
    align-items: flex-start;
}

.champion-menu {
    list-style: none;
    margin: 56px 0 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, max-content);
    column-gap: 22px;
    row-gap: 20px;
    align-items: center;
}

.champion-menu > li:nth-child(1) {
    transform: translateY(-3px);
}

.champion-menu > li:nth-child(2) {
    margin-left: 8px;
    margin-top: -10px;
}


.champion-menu > li:nth-child(7) {
    grid-column: 4;
   transform: translateY(-7px);

}

.champion-menu > li:nth-child(3) {
    margin-top: -8px;
}

.champion-menu > li:nth-child(4) {
    margin-top: -0px;
}

.champion-menu > li:nth-child(5) {
    margin-top: -6px;
}

.champion-menu > li:nth-child(6) {
    margin-top: -5px;
}

.champion-menu > li:nth-child(7) {
    margin-top: -1px;
   margin-left: -80px; 
}

.champion-menu > li:nth-child(8) {
    margin-top: -7px;
    margin-left: -50px; 
}

.champion-menu > li:nth-child(9) {
    margin-top: -7px;
    margin-left: -40px; 
}


.champion-menu > li {
    position: relative;

}

    .has-dropdown {
    position: relative;
}


.champion-menu > li > a {
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 3px;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.champion-menu > li > a.active,
.champion-menu > li > a.active span {
    color: #00ff3c !important;
}

.champion-menu > li > a:hover,
.champion-menu > li > a:hover span,
.champion-menu > li > a:focus,
.champion-menu > li > a:focus span {
    color: #00ff3c;
}

.champion-menu span {
    font-size: 22px;
    margin-left: 8px;
    position: relative;
    top: 2px;
}

/* PHONE BUTTON */

.champion-phone {
    position: absolute;
    top: 65px;
    right: 22px;
    background: #ffffff;
    color: #4d4d4d;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 8px 18px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.champion-phone:hover {
    background: #00ff3c;
    color: #ffffff;
}

/* =========================
   DROPDOWN MENU
========================= */

.has-dropdown {
    position: relative;
}

.roofing-dropdown {

    position: absolute;

    top: 100%;

    left: -28px;

    padding-top: 14px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 999999;

    transition: 0.25s ease;
}

/* SHOW MAIN DROPDOWN */

.has-dropdown:hover .roofing-dropdown,
.has-dropdown:focus-within .roofing-dropdown {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}

/* LEFT COLUMN */

.dropdown-left {

    position: relative;

    width: 220px;

    margin: 0;

    padding: 0;

    list-style: none;

    background: rgba(80, 80, 80, 0.96);
}

/* RIGHT COLUMN */

.dropdown-right {

    position: absolute;

    top: 0;

    left: 100%;

    width: 240px;

    margin: 0;

    padding: 0;

    list-style: none;

    background: rgba(80, 80, 80, 0.96);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: 0.2s ease;

    z-index: 999999;
}

/* SHOW SUBMENU */

.has-submenu:hover > .dropdown-right,
.has-submenu:focus-within > .dropdown-right {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}

/* LIST ITEMS */

.dropdown-left li,
.dropdown-right li {

    position: relative;
}

/* LINKS */

.dropdown-left li a,
.dropdown-right li a {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px 34px;

    color: #ffffff;

    text-decoration: none;

    text-transform: uppercase;

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

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1px;

    line-height: 1.0;

    transition: 0.2s ease;
}

/* HOVER */

.dropdown-left li a:hover,
.dropdown-right li a:hover {
    color: #00ff3c;
}

/* ACTIVE */

.dropdown-left li a.active-submenu,
.dropdown-right li a.active-submenu {
    color: #00ff3c !important;
}

/* ARROWS */

.dropdown-left li a span {

    margin-left: 12px;

    font-size: 18px;

    line-height: 1;
}





/* INDEX HTML HERO */

.home-hero {
    min-height: 100vh;
    padding-top: 120px;
    background:
        linear-gradient(rgba(5, 20, 35, 0.12), rgba(5, 20, 35, 0.30)),
        url("../images/roof-hero.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-attachment: fixed;
}

.hero-center {
    text-align: center;
    color: #ffffff;
    max-width: 1050px;
    padding: 20px;
}

.hero-center h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 35px;
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 0.95;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.hero-center h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 36px;
    text-transform: uppercase;
}

.estimate-btn {
    display: inline-block;
    background: #ff4b32;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;

    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 1px;

    padding: 18px 20px  !important;

    width: fit-content !important;

    text-align: center;
    white-space: nowrap;

    transition: 0.3s ease;
}

.estimate-btn:hover {
    background: #00ff48;
    color: #ffffff;
}

.estimate-btn:active {
    background: #00ff48;
}


/* IMAGE SERVICE CARDS */

.service-image-row {
    background-image:
        linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)),
        url("../images/dark-carbon-fiber.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-top: 5px solid #00ff48;
    border-bottom: 5px solid #00ff48;
    display: grid;
    place-items: center;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
    padding: 40px 4% 90px 4%;
}

.image-card {
    height: 280px;
    width: 425px;
    margin-top: -150px;
    border: 2px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.5s ease;
}

.image-card:hover {
    transform: translateY(-15px);
}

.image-card:active {
    border: 2px solid #00ff48;
}

.image-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 1;
    transition: background 0.3s ease;
}

.image-card:hover::before {
    background: rgba(0, 255, 72, 0.22);
}

.image-card span {
    position: relative;
    z-index: 2;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
}

.residential-card {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.08)),
        url("../images/residential-roofing.png");
}

.commercial-card {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.08)),
        url("../images/commercial-roofing.png");
}

.federal-card {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.08)),
        url("../images/federal contracting.png");
}

.image-card {
    position: relative;
}

.card-text {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 100%;

    text-align: center;
}

.card-text h3 {
    color: #ffffff;

    font-size:22px;

    font-weight: 150;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-family: Impact, Haettenschweiler, 'Arial Narrow', sans-serifelvetica, sans-serifs-serif;

    margin: 0;
}

/* BADGES */

.badge-section {
    background:
        linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
        url("../images/roof-hero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 90px 4%;
    color: #ffffff;
    text-align: center;
}

.badge-section h2 {
    font-size: 25px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 70px;
}

.badge-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    flex-wrap: nowrap;
}

.badge-item {
    width: 190px;
    height: 190px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.88;
    transition: 0.3s ease;
}

.badge-item:hover {
    opacity: 1;
    transform: translateY(-6px);
}

.badge-family {
    background-image: url("../images/owner-family operated.png");
}

.badge-damage {
    background-image: url("../images/free-damage consultations.png");
}

.badge-financing {
    background-image: url("../images/financing-available.png");
}

.badge-community {
    background-image: url("../images/community-focused.png");
}

.badge-emergency {
    background-image: url("../images/24 emergency service.png");
}

.badge-insurance {
    background-image: url("../images/dedicated insurance liaison.png");
}

/* INTRO */

.intro-section {
    background: #ffffff;
    padding: 45px 7%;
}

.intro-box {
    max-width: 1000px;
    margin: auto;
    border: 1px solid #333333;
    padding: 40px 40px;
    text-align: center;
    background:
        linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)),
        url("../images/logo-2.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 420px;
}

.intro-box h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 25px;
    line-height: 1.1;
    color: #111111;
}

.intro-box h3 {
    font-size: 22px;
    color: #ff4b22;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.intro-box p {
    font-size: 18px;
    line-height: 1.6;
    color: #666666;
    margin-bottom: 18px;
    text-align: left;
}

.green-btn {
    display: inline-block;
    background: #00ff40;
    color: #111111;
    text-decoration: none;
    padding: 18px 60px;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-top: 18px;
    transition: 0.3s ease;
}

.green-btn:hover,
.green-btn:active {
    background: #ff4b22;
    color: #ffffff;
}

/* OTHER SERVICES */

.other-services {
    background: #ffffff;
    text-align: center;
    padding-top: 50px;
}

.other-services h2 {
    color: #ff4b22;
    font-size: 40px;
    text-transform: uppercase;
    margin-bottom: 50px;
}

.other-service-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.other-card {
    height: 240px;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.other-card span {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
}

.other-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.05);
}

.painting-card {
    background-image: url("../images/painting.jpg");
}

.siding-card {
    background-image: url("../images/siding.jpg");
}

.windows-card {
    background-image: url("../images/windows-doors.jpg");
}

.gutters-card {
    background-image: url("../images/gutters.jpg");
}

/* AFFILIATIONS SECTION */

.affiliations-section {
    background: #f4f4f4;
    padding:  40px 20px 50px;
    text-align: center;
}

.affiliations-section h2 {
    color: #ff432f;
    font-size: 42px;
    font-weight: 300px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 45px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.affiliations-grid {
    max-width: 1500px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 40px;
    row-gap: 35px;

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

.affiliations-grid img {
    max-width: 150px;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;

     mix-blend-mode: multiply;
}

.affiliations-grid img:hover {
    transform: translateY(-6px);
    transition: 0.3s ease;
}

/* TABLET */

@media (max-width: 992px) {
    .affiliations-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 50px;
    }

    .affiliations-section h2 {
        font-size: 36px;
    }
}

/* MOBILE */

@media (max-width: 600px) {
    .affiliations-section {
        padding: 50px 20px 60px;
    }

    .affiliations-grid {
        grid-template-columns: 1fr;
        row-gap: 45px;
    }

    .affiliations-section h2 {
        font-size: 30px;
        margin-bottom: 45px;
    }

    .affiliations-grid img {
        max-width: 220px;
    }
}

/* FINANCING SECTION */

.financing-section {

    background-image:
        linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)),
        url("../images/bg-3.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: repeat;

    text-align: center;

    padding: 140px 20px;

    border-top: 6px solid #00ff4c;

    border-bottom: 6px solid #00ff4c;
}

.financing-section h2 {
    color: #ffffff;
    font-size: 26px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 40px;
    letter-spacing: 1px;
    font-family: Arial, sans-serif;
}

.financing-button {
    display: inline-block;
    background: #ff4b2b;
    color: #ffffff;
    padding: 18px 40px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.financing-button:hover {
    background: #e63c1e;
}

/* FINANCING HERO */

.financing-hero {
     background: linear-gradient(
rgba(255,255,255,0.18),
rgba(255,255,255,0.18)),
        url("../images/financing.jpg");
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    height: 760px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
}

.financing-hero-content {
    position: relative;
    z-index: 2;
    margin-top: 70px;
}

.financing-hero-content h1 {
    font-family: "Teko", sans-serif;
    font-size: 60px;
    font-weight: 600;
    color: white;
    letter-spacing: 2px;
    margin-bottom: 35px;
    line-height: 1;
}

.financing-estimate-btn {
    display: inline-block;
    background: #ff4d22;
    color: white;
    text-decoration: none;
    padding: 13px 38px;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.financing-estimate-btn:hover {
    background: #00ff3c;
    transform: translateY(-3px);
}

.financing-estimate-btn:active {

    background: #00ff3c;
}

/* RELENTLESS SECTION */

.financing-intro-section {

    background: #f5f5f5;

    text-align: center;

    padding: 90px 40px;

}


.financing-intro-section h2 {

    color: #222222;
    font-size: 42px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.financing-intro-section h3 {

    color: #666666;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.0;
    text-transform: uppercase;
    margin-bottom: 70px;
    display: inline-block;
    padding-bottom: 35px;
   border-bottom: 1px solid #d8d8d8;

    
}

.financing-icon-row {

    display: flex;
    justify-content: center;
    gap: 90px;
    flex-wrap: wrap;
}

.financing-icon-box {

    max-width: 250px;
}

.financing-icon-box img {

    width: 150px;
    margin-bottom: 30px;
}

.financing-icon-box p {

    color: #666666;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

/* APPLY SECTION */

.financing-apply-section {

    background: #ffffff;
    padding: 100px 6%;
}

.financing-apply-section h2 {

    text-align: center;
    color: #ff4b2b;
    font-size: 38px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 80px;
}

.financing-apply-container {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.financing-apply-text h3 {

    color: #666666;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.0;
    text-transform: uppercase;
    margin-bottom: 35px;
}

.financing-apply-text p {

    color: #666666;
    font-size: 17px;
    line-height: 1.0;
    margin-bottom: 22px;
}

.financing-apply-image img {

    width: 90%;

    display: block;
}

/* HEARTH SECTION */

.hearth-section {

    background: #f5f5f5;

    padding: 40px 120px 20px;

    text-align: left;
}

.hearth-section h3 {

    color: #6b6b6b;

    font-size: 20px;

    font-weight: 500;

    line-height: 1.0;

    text-transform: uppercase;

    margin-bottom: 28px;

    font-family: Arial, sans-serif;
}

.hearth-section ul {

    margin-left: 35px;

    margin-bottom: 35px;
}

.hearth-section li {

    color: #6b6b6b;

    font-size: 15px;

    line-height: 1.5;

    font-family: Arial, sans-serif;
}

.hearth-section p {

    color: #6b6b6b;

    font-size: 16px;

    line-height: 1.3;

    max-width: 1600px;

    font-family: Arial, sans-serif;
}

/* LOAN PROCESS */

.loan-process-section {

    background: #ffffff;

    text-align: center;

    padding: 100px 40px;
}

.loan-process-section h2 {

    color: #6b6b6b;

    font-size: 32px;

    font-weight: 600;

    line-height: 1.0;

    text-transform: uppercase;

    margin-bottom: 20px;
}

.loan-process-grid {

    display: flex;

    justify-content: center;

    gap: 30px;

    flex-wrap: wrap;
}

.loan-process-box {

    background: transparent;

    padding: 50px 30px;
}

.loan-process-box img {

    width: 90px;

    margin-bottom: 20px;
}

.loan-process-box h3 {

    color: #666666;

    font-size: 18px;

    line-height: 1.2;

    text-transform: uppercase;
}

/* FAQ SECTION */

.faq-section {

    background: #f5f5f5;

    padding: 100px 5%;
}

/* FAQ TITLE */

.faq-section h2 {

    color: #1f1f1f;

    font-size: 52px;

    font-weight: 300;

    line-height: 1.1;

    text-transform: uppercase;

    margin-bottom: 70px;

    font-family: Arial, sans-serif;

    text-align: center;

    max-width: 1400px;

    margin-left: auto;

    margin-right: auto;
}

/* FAQ BOX */

.faq-box {

    width: 92%;

    margin: 0 auto 24px;

    background: #ffffff;

    border: 1px solid #ececec;

    box-shadow: 0px 5px 14px rgba(255, 75, 43, 0.28);

    overflow: hidden;

    display: flex;

    flex-direction: column;
}

.faq-box:hover {

    transform: translateY(-2px);
}

/* FAQ SECTION */

.faq-section {

    background: #ffffff;
}

/* QUESTION AREA */

.faq-question {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 30px 42px;

    cursor: pointer;

    width: 100%;
}

.faq-question p {

    color: #2d2d2d;

    font-size: 20px;

    font-weight: 400;

    line-height: 1.4;

    margin: 0;

    font-family: Arial, sans-serif;
}

.faq-question span {

    color: #8b8b8b;

    font-size: 36px;

    font-weight: 300;

    line-height: 1;

    margin-left: 35px;
}

/* ANSWER AREA */

.faq-answer {

    display: none;

    padding: 0 70px 38px;

    width: 100%;
}

.faq-answer p,
.faq-answer li {

    color: #7a7a7a;

    font-size: 18px;

    line-height: 1.8;

    font-family: Arial, sans-serif;
}

.faq-answer ol,
.faq-answer ul {

    padding-left: 40px;

    margin-top: 10px;
}

/* CHECKLIST */

.financing-checklist-section {

    background:  #ffffff;

    padding: 70px 90px 90px;


}

/* MAIN WRAPPER */

.financing-checklist-wrapper {

    max-width: 1500px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-top: -115px;

    margin-left: 40px;
}

/* LEFT TEXT */

.financing-checklist {

    width: 48%;

    padding-top: 10px;
}

.financing-checklist p {

    color: #2d2d2d;

    font-size: 20px;

    font-weight: 600;

    line-height: 1.45;

    margin-bottom: 22px;

    font-family: Arial, sans-serif;
}

/* RIGHT SIDE LOGOS */

.financing-logo-grid {

    width: 43%;

    display: grid;

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

    column-gap: 18px;

    row-gap: 18px;

    justify-items: center;

    align-items: center;

    margin-right: 70px;

    overflow: visible;

    position: relative;
}

/* ALL LOGOS */

.financing-logo-grid img {

    width: 100%;

    height: auto;

    object-fit: contain;

    display: block;

    background: transparent;

    cursor: pointer;

    position: relative;

    z-index: 1;

    transition: transform 0.35s ease;
}

/* HOVER EFFECT */

.financing-logo-grid img:hover {

    transform: scale(1.45);

    z-index: 999;
}

/* APSP */

.financing-logo-grid img:nth-child(1) {

    max-width: 360px;
}

/* NKBA */

.financing-logo-grid img:nth-child(2) {

    max-width: 300px;
}

/* HBAM */

.financing-logo-grid img:nth-child(3) {

    max-width: 320px;

    margin-top: -6px;
}

/* SECURE */

.financing-logo-grid img:nth-child(4) {

    max-width: 320px;

    margin-top: 6px;
}

/* ALLOW HOVER OVERFLOW */

.financing-checklist-section,
.financing-checklist-wrapper,
.financing-logo-grid {

    overflow: visible;
}



/* APSP */

.financing-logo-grid img:nth-child(1) {

    max-width: 260px;
}

/* NKBA */

.financing-logo-grid img:nth-child(2) {

    max-width: 280px;
}

/* HBAM */

.financing-logo-grid img:nth-child(3) {

    max-width: 280px;

    margin-top: -8px;
}

/* SECURE */

.financing-logo-grid img:nth-child(4) {

    max-width: 480px;

    margin-top: 8px;
}

/* PROFESSIONAL ROOFING SERVICES */

.roofing-services-section {

    background-image: url("../images/map-bg.png");

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

    background-color: #f5f5f5;

    padding: 40px 90px 70px;

    position: relative;

    overflow: hidden;

    min-height: 1200px;

    width: 100%;

    margin-left: 0;
}

.roofing-services-box {

    width: 480px;

    margin-left: 90px;

    background: rgba(255,255,255,0.58);

    border: 2px solid rgba(0,0,0,0.55);

    border-radius: 12px;

    padding: 32px 38px;

    position: relative;

    z-index: 2;

    text-align: center;

    animation: floatUp 4s ease forwards;            
}


@keyframes floatUp {

    from {

        transform: translateY(80px);

        opacity: 0;
    }

    to {

        transform: translateY(0);

        opacity: 1;
    }
}


.roofing-services-box h2 {

    font-size: 26px;

    font-weight: 800;

    text-transform: uppercase;

    text-align: center;

    line-height: 1.0;

    letter-spacing: 1px;

    margin-bottom: 38px;

    color: #111111;

    font-family: Arial, sans-serif;
}

.roofing-services-box h3 {

    color: #ff4b2b;

    font-size: 18px;

    font-weight: 800;

    text-transform: uppercase;

    line-height: 1.2;

    margin-top: 34px;

    margin-bottom: 20px;

    font-family: Arial, sans-serif;
}

.roofing-services-box p {

    color: #666666;

    font-size: 15px;

    line-height: 1.6;

    margin-bottom: 24px;

    font-family: Arial, sans-serif;
}

.roofing-services-btn {

    display: inline-block;

    background: #00ff40;

    color: #000000;

    text-decoration: none;

    padding: 18px 45px;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

    margin-top: 20px;

    transition: 0.3s ease;

}

.roofing-services-btn:hover {

    background: #ff4b2b;

    color: #ffffff;
}

.roofing-services-btn:active {

    background: #ff4b2b;

    color: #ffffff;
}

/* MOBILE */

@media (max-width: 992px) {

    .roofing-services-section {

        background-size: cover;

        background-position: center;

        padding: 50px 20px;

        min-height: auto;
    }

    .roofing-services-box {

        width: 100%;

        margin-left: 0;

        padding: 35px;
    }

    .roofing-services-box h2 {

        font-size: 36px;
    }

    .roofing-services-box h3 {

        font-size: 20px;
    }

    .roofing-services-box p {

        font-size: 16px;
    }
}


/* FOOTER */

.main-footer {
    background: #4a4a4a;
    color: #ffffff;

    display: grid;
    grid-template-columns: 360px 1fr;

    gap: 15px;

    padding: 30px 40px;

    margin-top: 0 !important;
   
}

.footer-logo img {
    width: 340px;

    display: block;
}

.footer-info {
    width: 100%;
}

.footer-nav {
    display: flex;

    gap: 40px;

    border-bottom: 1px solid #7a7a7a;

    padding-bottom: 28px;

    margin-bottom: 35px;
}

.footer-nav a {
    color: #ffffff;

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-weight: 700;

    font-size: 15px;
}

.footer-nav a:hover {
    color: #00ff40;
}

.footer-nav a.active {
    color: #00ff40;
}

.footer-columns {
    display: flex;

    gap: 180px;

    justify-content: flex-start;

    align-items: flex-start;
}

.footer-columns h3 {
    font-size: 17px;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 18px;

    font-weight: 700;
}

.footer-columns p {
    font-size: 15px;

    line-height: 1.0;

    margin-bottom: 10px;

    color: #f1f1f1;
}

.footer-address a.directions-link,
.footer-address a.directions-link:visited {

    color: #ffffff !important;

    text-decoration: none !important;
}

.footer-address a.directions-link:hover,
.footer-address a.directions-link:active {

    color: #bfbfbf !important;

    text-decoration: underline !important;
}


.footer-nav a {
    color: #ffffff !important;
}

.footer-nav a.active {
    color: #00ff40 !important;
}



.copyright {
    background: #8a8a8a;

    color: #ffffff;

    text-align: center;

    padding: 16px;

    font-size: 14px;
}



/* RESIDENTIAL HERO HTML PAGE */

.residential-hero {

    position: relative;

    height: 720px;

    padding-top: 120px;

    background:
        linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
        url("../images/black background.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    border-bottom: 6px solid #00ff48;
}

.residential-content {

    position: relative;
    z-index: 2;
    margin-top: -70px;
}

.residential-content h1 {

    color: #ffffff;

    font-size: 38px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-bottom: 25px;

    font-family: 'Anton', sans-serif;
}

.residential-btn {

    display: inline-block;

    background: #ff4b32;

    color: #ffffff;

    text-decoration: none;

    text-transform: uppercase;

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

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 2px;

    padding: 18px 34px;

    transition: 0.3s ease;
}

.residential-btn:hover {

    background: #00ff48;

    color: #ffffff;
}

/* ROOF REPLACEMENT PAGE */

.roof-replacement-hero {

    min-height: 100vh;

    background-image:
        linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
        url("../images/roof-replacement.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 120px 20px;
}

.roof-replacement-content {

    color: #ffffff;
}

.roof-replacement-content h1 {

    font-size: 78px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-bottom: 25px;
}

.roof-replacement-content h2 {

    font-size: 32px;

    font-weight: 700;

    text-transform: uppercase;

    margin-bottom: 45px;

    line-height: 1.3;
}

.roof-buttons {

    display: flex;

    justify-content: center;

    gap: 40px;

    flex-wrap: wrap;
}

.roof-btn {

    display: inline-block;

    background: #ff4b2b;

    color: #ffffff;

    text-decoration: none;

    text-transform: uppercase;

    padding: 22px 70px;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 3px;

    transition: 0.3s ease;
}

.roof-btn:hover {

    background: #00ff40;

    color: #111111;
}

/* QUALITY SECTION */

.quality-section {

    background: #f3f3f3;

    padding: 110px 60px;

    text-align: center;
}

.quality-section h2 {

    font-family: 'Anton', sans-serif;

    font-size: 48px;

    letter-spacing: 1px;

    color: #3a3a3a;

    text-transform: uppercase;

    margin-bottom: 20px;
}

.quality-subtext {

    color: #7a7a7a;

    font-size: 14px;

    letter-spacing: 1px;

    margin-bottom: 70px;

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

.quality-icons {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 28px;

    flex-wrap: wrap;
}

.quality-item img {

    width: 170px;

    height: auto;

    opacity: 0.95;

    transition: 0.3s ease;
}

.quality-item img:hover {

    opacity: 1;

    transform: none;
}


/* RESIDENTIAL INFO SECTION */

.residential-info-section {

    background: #f3f3f3;

    padding: 40px 0 90px 0;
}

.residential-info-container {

    width: 85%;

    max-width: 1450px;

    margin: 0 auto;

    margin-top: -40px;

    padding-left: 90px;
}

.residential-info-container h2 {

    font-family: 'Anton', sans-serif;

    font-size: 28px;

    letter-spacing: 1px;

    line-height: 1.1;

    color: #6f6f6f;

    text-transform: uppercase;

    margin-bottom: 10px;
}

.residential-info-container p {

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

    font-size: 18px;

    line-height: 1.0;

    color: #7d7d7d;

    margin-bottom: 0;

}

.contact-spacing {

    margin-top: 28px;
}

.quote-btn {

    display: table;

    margin: 70px auto 0 auto;

    background: #111111;

    color: #ffffff;

    text-decoration: none;

    text-transform: uppercase;

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

    font-size: 15px;

    letter-spacing: 1px;

    padding: 15px 40px;

    transition: 0.3s ease;
}

.quote-btn:hover {

    background: #2b2b2b;

    color: #ffffff;
}


/* ROOFING OPTIONS SECTION */

.roofing-options-section {
    background: #f3f3f3;
    padding: 30px 0 110px;
}

.roofing-options-container {
    width: 85%;
    max-width: 1500px;
    margin: 0 auto;
    padding-left: 91px;
}

.roofing-options-container h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 300;
    text-transform: uppercase;
    color: #707070;
    margin-bottom: 18px;
    
}

.roofing-options-container p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.0;
    color: #707070;
    margin-bottom: 35px;
}

.services-title {
    margin-top: 35px;
}

.roofing-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 45px;
    margin-top: 35px;
    text-align: center;
}

.roofing-service-item img {
    width: 90px;
    height: auto;
    margin-bottom: 35px;
}

.roofing-service-item h3 {
    font-size: 18px;
    font-weight: 300;
    color: #707070;
    text-transform: uppercase;
    line-height: 1.3;
    margin-bottom: 25px;
}

.roofing-service-item p {
    font-size: 16px;
    line-height: 1.0;
    color: #707070;
}

/* BEST ROOFERS SECTION */

.best-roofers-section {
    background: #f3f3f3;
    padding: 80px 0 120px;
    padding-left: 90px;
    margin-top: -120px;
}

.best-roofers-container {
    width: 85%;
    max-width: 1600px;
    margin: 0 auto;
}

.best-roofers-container h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 300;
    text-transform: uppercase;
    color: #707070;
    margin-bottom: 28px;
}

.best-roofers-container p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.0;
    color: #707070;
    margin-bottom: 35px;
}

.financing-title {
    margin-top: 60px;
}

.financing-title strong {
    font-weight: 700;
}

.financing-btn-wrapper {
    text-align: center;
    margin-top: 70px;
}

.financing-btn {
    display: inline-block;
    background: #111111;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    padding: 18px 30px;
    transition: 0.3s ease;
}

.financing-btn:hover {
    background: #2b2b2b;
}


/* RESPONSIVE */

@media (max-width: 1550px) {
    .logo-box {
        width: 340px;
        height: 160px;
        padding-left: 48px;
    }

    .logo-box img {
        width: 130px;
    }

    .nav-area {
        width: calc(100% - 340px);
    }

    .top-nav-row {
        gap: 24px;
    }

    .top-nav-row a,
    .bottom-nav-row a,
    .drop-link {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .bottom-nav-row {
        margin-right: 210px;
        gap: 42px;
    }

    .phone-box {
        font-size: 12px !important;
        padding: 10px 20px;
    }
}

@media (max-width: 1200px) {
    .main-header {
        padding: 14px 18px 0 0;
    }

    .logo-box {
        width: 260px;
        height: 125px;
        padding-left: 38px;
    }

    .logo-box img {
        width: 105px;
    }

    .nav-area {
        width: calc(100% - 260px);
        padding-top: 34px;
    }

    .top-nav-row {
        gap: 16px;
    }

    .top-nav-row a,
    .bottom-nav-row a,
    .drop-link {
        font-size: 10px;
        letter-spacing: 1.4px;
    }

    .bottom-nav-row {
        margin-top: 26px;
        margin-right: 145px;
        gap: 28px;
    }

    .phone-box {
        font-size: 10px !important;
        padding: 8px 13px;
    }
}

@media (max-width: 900px) {
    .main-header {
        position: relative;
        background: #111111;
        display: block;
        padding: 20px;
    }

    .logo-box {
        width: 100%;
        height: auto;
        clip-path: none;
        padding: 18px 0;
        text-align: center;
        margin-bottom: 20px;
    }

    .logo-box img {
        width: 120px;
        margin: auto;
    }

    .nav-area {
        width: 100%;
        align-items: center;
        padding-top: 0;
    }

    .top-nav-row,
    .bottom-nav-row {
        display: block;
        text-align: center;
        margin: 0;
    }

    .top-nav-row a,
    .bottom-nav-row a,
    .drop-link {
        display: block;
        margin: 16px 0;
        font-size: 18px;
        letter-spacing: 3px;
    }

    .phone-box {
        display: inline-block !important;
        margin-top: 12px !important;
        font-size: 16px !important;
    }

    .dropdown-menu,
    .submenu {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
    }

    .dropdown-menu a,
    .submenu a {
        font-size: 16px;
        letter-spacing: 2px;
    }

    .service-image-row,
    .other-service-row,
    .affiliations-grid {
        grid-template-columns: 1fr;
    }

    .badge-row {
        flex-wrap: wrap;
    }

    .main-footer {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-nav {
        justify-content: center;
        flex-wrap: wrap;
    }

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

    .hero-center h1 {
        font-size: 38px;
    }

    .hero-center h2 {
        font-size: 20px;
    }

    .intro-box h2 {
        font-size: 32px;
    }

    .intro-box {
        padding: 40px 25px;
    }

    .image-card {
        width: 100%;
        margin-top: 0;
    }
}

@media (max-width: 600px) {
    .badge-row {
        flex-direction: column;
    }
}


/* FINAL LOGO FIX */

.main-header .logo-box {
    width: 300px !important;
    height: 150px !important;
    background: #ffffff !important;
    clip-path: polygon(0 0, 100% 0, 68% 100%, 0 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.main-header .logo-box img {
    width: 230px !important;
    height: auto !important;
    display: block !important;
    transform: scale(1.45) !important;
    transform-origin: center center !important;
}

.main-header .nav-area {
    width: calc(100% - 300px) !important;
}


/* CONTACT PAGE */

.estimate-contact-section {
    background:
        linear-gradient(rgba(245,245,245,0.88),
        rgba(245,245,245,0.88)),
        url("../images/roof-hero.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    padding: 220px 5% 120px;
}

.estimate-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr;
    gap: 32px;
    align-items: start;
}

/* LEFT */

.estimate-left {
    width: 100%;
}


.call-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    background: #ff4b2b;

    color: #ffffff;

    text-decoration: none;

    width: 380px;

    height: 58px;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 22px;

    margin-left: auto;

    margin-right: auto;

    transition: 0.3s ease;
}


.call-btn:hover {
    background: #00ff40;
    color: #111111;
}

.info-box {
    background: #1f1f1f;
    color: #ffffff;
    padding: 48px 36px;
    text-align: center;
}

.info-box h2 {
    color: #00ff40;
    font-size: 25px;
    font-weight: 900;
    margin-bottom: 34px;
    line-height: 1;
}

.info-box p {
    font-size: 15px;
    line-height: 1.0;
    margin-bottom: 10px;
}

.info-box a {
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
}

.info-box a:hover {
    color: #00ff40;
}

.info-box hr {
    border: none;
    border-top: 1px solid #7d7d7d;
    margin: 36px 0;
}

/* MAP */

.map-box { background: #1f1f1f; 
    padding: 20px; 
    height: 100%; 
}

.map-box iframe {
    width: 100%;
    height: 840px;
    border: none;
}

/* FORM */

.form-box {
    background: #1f1f1f;
    padding: 65px 55px;
    color: #ffffff;
}

.form-box h3 {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.0;
    margin-bottom: 65px;
}

.form-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-top: 38px;
    margin-bottom: 10px;
}

.form-title span {
    color: #ff2f00;
    font-style: italic;
    font-size: 13px;
    font-weight: 400;
}

.form-line {
    width: 100%;
    height: 1px;
    background: #d3d3d3;
    margin-bottom: 22px;
}

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

.form-row input {
    width: 100%;
}

.form-split {
    display: flex;
    gap: 28px;
    margin-top: 28px;
}

.split-box {
    width: 100%;
}

.form-box input[type="text"],
.form-box input[type="email"],
.form-box input[type="tel"] {

    width: 100%;

    max-width: 280px;

    height: 56px;

    border: none;

    background: #efefef;

    border-radius: 6px;

    padding: 0 20px;

    font-size: 15px;
}

.form-box input::placeholder {
    color: #b7b7b7;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
}

.checkbox-group label {

    display: flex;

    align-items: center;

    font-size: 13px;

    font-weight: 700;
}

.checkbox-group input {
    width: 22px;
    height: 22px;
    margin-right: 10px;
}

.form-box textarea {
    width: 100%;
    height: 330px;
    border: none;
    background: #efefef;
    border-radius: 6px;
    margin-top: 24px;
    padding: 22px;
    font-size: 18px;
    resize: vertical;
}

.big-question {
    margin-top: 55px;
    line-height: 1.5;
}

.yes-no {
    margin-top: 24px;
}

.form-box button {

    width: 320px;

    height: 58px;

    border: none;

    background: #00ff40;

    color: #111111;

    font-size: 18px;

    font-weight: 500;

    margin-top: 45px;

    cursor: pointer;

    transition: 0.3s ease;

    display: block;

    margin-left: auto;

    margin-right: auto;
}


.form-box button:hover {
    background: #ff4b2b;
    color: #ffffff;
}

.form-box button:active {
    background: #ff4b2b;
}

/* RESPONSIVE */

@media (max-width: 1450px) {

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

    .map-box iframe {
        height: 600px;
    }
}



/* CONTACT PAGE HEADER ALIGNMENT FIX */

body.contact-page .champion-nav {
    padding-left: 360px;
    padding-right: 330px;
}

body.contact-page .champion-menu {

    column-gap: 34px;
    row-gap: 20px;
}

/* MENU TEXT */

body.contact-page .champion-menu > li > a {

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;
}

/* MENU ARROWS */

body.contact-page .champion-menu span {

    font-size: 25px;

    font-weight: 900;

    margin-left: 8px;

    position: relative;

    top: 2px;
}

/* 1 HOME */

body.contact-page .champion-menu > li:nth-child(1) {

    margin-left: 0;

    margin-top: -15px;
}

/* 2 ROOFING */

body.contact-page .champion-menu > li:nth-child(2) {

    margin-left: 8px;

    margin-top: -28px;
}

/* 3 PAINTING & SIDING */

body.contact-page .champion-menu > li:nth-child(3) {

    margin-left: 8px;

    margin-top: -25px;
}

/* 4 WINDOWS & DOORS */

body.contact-page .champion-menu > li:nth-child(4) {

    margin-left: 8px;

    margin-top: -14px;
}

/* 5 GUTTERS */

body.contact-page .champion-menu > li:nth-child(5) {

    margin-left: 8px;

    margin-top: -18px;
}

/* 6 WHY US */

body.contact-page .champion-menu > li:nth-child(6) {

    margin-left: 8px;

    margin-top: -15px;
}

/* 7 AREAS WE SERVE */

body.contact-page .champion-menu > li:nth-child(7) {

    grid-column: 4;

    margin-left: -60px;

    margin-top: 0px;

    margin-right: 1px;
}

/* 8 FINANCING */
body.contact-page .champion-menu > li:nth-child(8) {

    position: relative;

    left: -30px;

    top: 0px;
}


/* 9 CONTACT US */

body.contact-page .champion-menu > li:nth-child(9) {

    position: relative;

    margin-left: -8px;

    margin-top: -1px;
}

/* PHONE BUTTON */

body.contact-page .champion-phone {

    top: 68px;

    right: 12px;

    padding: 3px 8px;

    font-size: 12px;

    font-weight: 800;

}


.directions-link,
.directions-link:visited,
.footer-directions,
.footer-directions:visited {

    color: #ffffff !important;

    text-decoration: none !important;

    transition: 0.3s ease;
}

.directions-link:hover,
.directions-link:active,
.footer-directions:hover,
.footer-directions:active {

    color: #bfbfbf !important;

    text-decoration: none !important;
}



/* =========================
   COMMERCIAL HERO SECTION
========================= */

.commercial-hero {

    background:
        linear-gradient(
            rgba(0,0,0,0.40),
            rgba(0,0,0,0.40)
        ),
        url("../images/commercial-roofing-roof.jpg");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    width: 100%;

    height: 920px;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    position: relative;

    overflow: hidden;

    border-bottom: 10px solid #00ff4c;
}



/* DARK OVERLAY */

.commercial-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0,0,0,0.18);

    z-index: 1;
}



/* HERO CONTENT */

.commercial-hero-content {

    position: relative;

    z-index: 2;

    margin-top: 80px;
}



/* MAIN TITLE */

.commercial-hero-content h1 {

    font-family: "Teko", sans-serif;

    font-size: 50px;

    font-weight: 600;

    letter-spacing: 1px;

    color: #ffffff;

    line-height: 1.0;

    margin: 0;
}


/* COMMERCIAL BUTTON */

.commercial-estimate-btn {

    display: inline-block;

    margin-top: 40px;

    background: #ff4b22;

    color: #ffffff;

    text-decoration: none;

    font-family: Arial, sans-serif;

    font-size: 16px;

    font-weight: 600;

    letter-spacing: 1px;

    padding: 16px 28px;

    transition: 0.3s ease;

    text-transform: uppercase;
}



/* HOVER EFFECT */

.commercial-estimate-btn:hover {

    background: #00ff4c;

    color: #000000;
}



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

.commercial-services-section {

    background: #ffffff !important;

    width: 100%;

    padding: 110px 90px 90px;
}



.commercial-services-container {

    max-width: 1500px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 120px;

    background: #ffffff !important;
}



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

.commercial-services-text {

    flex: 1.35;
}



/* MAIN TITLE */

.commercial-services-text h2 {

    font-family: Arial, sans-serif;

    font-size: 32px;

    font-weight: 700;

    line-height: 1.30;

    color: #2c2c2c;

    margin-bottom: 20px;

    text-transform: uppercase;

     max-width: 1200px;
}



/* SECONDARY TITLES */

.commercial-services-text h3 {

    font-family: Arial, sans-serif;

    font-size: 25px;

    font-weight: 600;

    line-height: 1.30;

    color: #2c2c2c;

    margin-top: 35px;

    margin-bottom: 28px;

    text-transform: uppercase;
}



/* PARAGRAPHS */

.commercial-services-text p {

    font-family: Arial, sans-serif;

    font-size: 17px;

    line-height: 1.5;

    color: #666666;

    margin-bottom: 15px;

    max-width: 1450px;
}



/* LIST */

.commercial-services-text ul {

    padding-left: 35px;

    margin-top: 8px;

    margin-bottom: 50px;
}



.commercial-services-text li {

    font-family: Arial, sans-serif;

    font-size: 16px;

    line-height: 1.30;

    color: #5f5f5f;
}





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

.commercial-services-images {

    flex: 0.9;

    display: flex;

    justify-content: center;

    align-items: flex-start;
}



.commercial-services-images img {

    width: 100%;

    max-width: 370px;

    height: auto;

    display: block;
}


/* BOTTOM UNDERLINE */

.commercial-services-container {

    border-bottom: 1px solid #d9d9d9;

    padding-bottom: 20px;

}



/* =========================================================
   COMMERCIAL TYPES SECTION
========================================================= */

.commercial-types-section {

    background: #ffffff;

    padding: 1px 90px 100px;
}



.commercial-types-container {

    max-width: 1650px;

    margin: 0 auto;


}



/* MAIN TITLE */

.commercial-types-container h2 {

    font-family: Arial, sans-serif;

    font-size: 32px;

    font-weight: 600;

    line-height: 1.30;

    color: #2d2d2d;

    text-transform: uppercase;

    margin-top: -60px !important;

    margin-bottom: 30px;

    padding-top: 0 !important;

    max-width: 1500px;
}


/* EACH ITEM */

.commercial-type-item {

    margin-bottom: 35px;
}



/* SMALL TITLES */

.commercial-type-item h3 {

    font-family: Arial, sans-serif;

    font-size: 25px;

    font-weight: 700;

    color: #2d2d2d;

    margin-bottom: 24px;

    text-transform: uppercase;
}



/* PARAGRAPHS */

.commercial-type-item p {

    font-family: Arial, sans-serif;

    font-size: 17px;

    line-height: 1.50;

    color: #6a6a6a;

    max-width: 1550px;
}



/* BUTTON */

.commercial-type-btn {

    display: inline-block;

    margin-top: 30px;

    background: #ff4b22;

    color: #ffffff;

    text-decoration: none;

    padding: 18px 22px;

    font-size: 15px;

    font-weight: 500;

    letter-spacing: 1px;

    transition: 0.3s ease;
}



.commercial-type-btn:hover {

    background: #00ff4c;

    color: #000000;
}


/* BOTTOM LINE */

.commercial-bottom-line {

    width: 100%;

    height: 1px;

    background: #d9d9d9;

    margin-top: -15px !important;
}

/* =========================
   FINAL COMMERCIAL SECTION
========================= */

.commercial-final-section {

    background: #ffffff;

    padding: 10px 90px 120px !important;

    margin-top: -80px !important;
}



.commercial-final-container {

    max-width: 1700px;

    margin: 0 auto;
}



.commercial-final-container h2 {

    font-family: Arial, sans-serif;

    font-size: 32px;

    font-weight: 700;

    color: #2d2d2d;

    text-transform: uppercase;

    margin-bottom: 35px;
}



.commercial-final-container h3 {

    font-family: Arial, sans-serif;

    font-size: 25px;

    font-weight: 600;

    color: #2d2d2d;

    text-transform: uppercase;

    margin-bottom: 15px;
}



.commercial-final-container p {

    font-family: Arial, sans-serif;

    font-size: 17px;

    line-height: 1.50;

    color: #666666;

    margin-bottom: 10px;
}



.commercial-final-container ul {

    padding-left: 35px;

    margin-bottom: 30px;
}



.commercial-final-container li {

    font-family: Arial, sans-serif;

    font-size: 17px;

    line-height: 1.50;

    color: #666666;

    margin-bottom: 10px;
}



.commercial-final-buttons {

    display: flex;

    gap: 8px;

    margin-top: 30px;
}



.commercial-final-btn {

    display: inline-block;

    background: #ff4b22;

    color: #ffffff;

    text-decoration: none;

    font-family: Arial, sans-serif;

    font-size: 15px;

    font-weight: 500;

    letter-spacing: 1px;

    padding: 18px 32px;

    text-transform: uppercase;

    transition: 0.3s ease;

    width: auto;
}



.commercial-final-btn:hover {

    background: #00ff4c;

    color: #000000;
}


/* =========================
   COMMERCIAL CONTACT SECTION
========================= */

.commercial-contact-section {

    position: relative;

    background-image: url("../images/map-bg.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    padding: 70px 0;

    display: flex;

    justify-content: center;

    align-items: center;
}



/* LIGHT OVERLAY */

.commercial-contact-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(255,255,255,0.05);
}



/* FORM BOX */

.commercial-contact-box {

    position: relative;

    z-index: 2;

    width: 550px;

    background: rgba(255,255,255,0.15);

    border: 1px solid rgba(0,0,0,0.45);

    padding: 85px 85px 90px;

    backdrop-filter: blur(0px);

    -webkit-backdrop-filter: blur(0px);

    margin-left: -600px !important;

}


/* TITLE */

.commercial-contact-box h2 {

    font-family: "Teko", sans-serif;

    font-size: 28px;

    font-weight: 600;

    line-height: 1.5;

    text-align: center;

    color: #1d1d1d;

    margin-bottom: 45px;

    margin-top: -40px !important;

}



/* FORM */

.commercial-contact-form {

    width: 100%;
}



/* ROW */

.form-row {

    display: flex;

    gap: 40px;

    margin-bottom: 30px;

    margin-bottom: 30px;
}



/* GROUP */

.form-group {

    flex: 1;

    margin-bottom: 35px;

    margin-top: 0px;
}



/* LABEL */

.form-group > label {

    display: block;

    font-family: Arial, sans-serif;

    font-size: 16px;

    font-weight: 600;

    color: #333333;

    margin-bottom: 14px;

    padding-bottom: 12px;

    border-bottom: 1px solid #d9d9d9;
}



/* REQUIRED */

.form-group span {

    color: #f04a23;

    font-style: italic;

    font-weight: 500;

    font-size: 13px;

    font-family: Arial, sans-serif;
}


/* INPUTS */

.form-group input,
.form-group textarea {

    width: 100%;

    background: #ffffff;

    border: 1px solid #d9d9d9;

    padding: 12px 16px;

    font-size: 16px;

    font-family: Arial, sans-serif;

    outline: none;
}



/* NAME ROW */

.name-row {

    display: flex;

    gap: 20px;
}



/* TEXTAREA */

.form-group textarea {

    width: 100%;

    height: 180px;

    resize: none;

    border-radius: 0px;
}


/* CHECKBOX */

.checkbox-group {

    display: flex;

    flex-direction: column;

    gap: 14px;
}



.checkbox-group label {

    display: flex;

    align-items: center;

    gap: 2px;

    font-size: 14px;

    font-weight: 600;

    color: #5c5c5c;

    margin-bottom: 0;
}



/* CHECKBOX SIZE */

.checkbox-group input {

    width: 18px;

    height: 18px;

    border-radius: 2px;
}



/* BUTTON */

.commercial-submit-btn {

    width: 100%;

    background: #00ff22;

    border: none;

    padding: 15px;

    font-size: 16px;

    font-family: Arial, sans-serif;

    cursor: pointer;

    margin-top: -30px;

    transition: 0.3s ease;
}



.commercial-submit-btn:hover {

    background: #ff4b22;

    color: #ffffff;
}

.commercial-contact-section {

    overflow: hidden;
}




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

@media (max-width: 991px) {

    .commercial-services-container {

        flex-direction: column;

        gap: 60px;
    }

    .commercial-services-text h2 {

        font-size: 44px;
    }

    .commercial-services-text h3 {

        font-size: 38px;
    }

    .commercial-services-section {

        padding: 90px 35px;
    }

    .commercial-services-images img {

        max-width: 100%;
    }
}



/* =========================
   ROOF REPLACEMENT HTML
========================= */

.roof-replacement-hero {

    position: relative;

    height: 20px;

    background-image: url("../images/roof-replacement.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    background-attachment: fixed;

    padding-bottom: 220px !important;
}



/* DARK OVERLAY */

.roof-replacement-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background:  rgba(31, 31, 31, 0.28) !important;

    z-index: 1;
}



/* CONTENT */

.roof-replacement-content {

    position: relative;

    z-index: 2;

    margin-top: 70px;
}

/* TITLE */

.roof-replacement-content h1 {

    color: #ffffff;

    font-family: "Teko", sans-serif;

    font-size: 48px;

    font-weight: 700;

    line-height: 1;

    margin-bottom: 24px;

    text-transform: uppercase;

    letter-spacing: 0.1px;
}

/* SUBTEXT */

.roof-replacement-content p {

    color: #ffffff;

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

    font-size: 30px;

    font-weight: 600;

    letter-spacing: 0.1px;

    margin-bottom: 42px;

    text-transform: uppercase;
}

/* BUTTON WRAPPER */

.roof-replacement-buttons {

    display: flex;

    justify-content: center;

    gap: 34px;

    flex-wrap: wrap;
}

/* BUTTONS */

.roof-btn {

    width: 410px;

    padding: 18px 45px;

    background: #ff4e1f;

    color: #ffffff;

    text-decoration: none;

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

    font-size: 16px;

    font-weight: 400;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    transition: 0.25s ease;
}

.roof-btn:hover {

    background: #00ff3c;

    color: #111111;
}

/* =========================
   ROOF SERVICE AREA BAR
========================= */

.roof-service-area {

    position: relative;

    background: transparent;

    padding: 0;

    margin-top: -155px;

    z-index: 10;
}


.roof-service-overlay {

    background: #00ff2a;

    max-width: 100%;

    padding: 35px 75px;

    text-align: center;
}

.roof-service-overlay h2 {

    color: #222222;

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

    font-size: 26px;

    font-weight: 500;

    line-height: 1.50;

    text-transform: uppercase;

    margin: 0;
}

/* =========================
   ROOF ICONS SECTION
========================= */

.roof-icons-section {

    position: relative !important;

    margin-top: 0 !important;

    padding-top: 40px !important;

    padding-bottom: 40px !important;

    background: #373636 !important;

    z-index: 20 !important;
}

.roof-icons-container {

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    gap: 55px !important;

    flex-wrap: wrap !important;

    background: transparent !important;

    padding: 0 18px !important;
}

/* ICON BOX */

.roof-icon-box {

    background: transparent !important;
}

/* ICON IMAGES */

.roof-icon-box img {

    width: 140px !important;

    height: auto !important;

    opacity: 0.55 !important;

    transition: opacity 0.3s ease !important;

    transform: none !important;
}

/* HOVER ONLY */

.roof-icon-box img:hover {

    opacity: 1 !important;

    transform: none !important;
}

.roof-replacement-info {

    margin-top: 0px !important;

    position: relative !important;

    z-index: 30 !important;

    background: #1f1f1f !important;
}

/* =========================
   ROOF REPLACEMENT INFO
========================= */

.roof-replacement-info {

    background: #1f1f1f;

    padding: 40px 90px;

    position: relative;
}

.roof-replacement-info-container {

    max-width: 1250px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    flex-wrap: wrap;
}

/* LEFT IMAGE */

.roof-replacement-image {

    flex: 1;

    min-width: 500px;
}

.roof-replacement-image img {

    width: 85%;

    max-width: 480px;

    display: block;

    top: -40px;

    position: relative;

    transform: translateX(120px);
}

/* RIGHT CONTENT */

.roof-replacement-text {

    flex: 1;

    min-width: 500px;

    padding-left: 30px;

    top: 150px;

    padding-bottom: 40px;

    min-height: 720px;

     position: relative;
}

.roof-replacement-text::before {

    content: "";

    position: absolute;

    left: 0;

    top: -95px;

    width: 5px;

    height: 88%;

    background: #ffffff;
}

.roof-replacement-text h2 {

    color: #ff5a1f;

    font-family: "Teko", sans-serif;

    font-size: 30px;

    font-weight: 500;

    line-height: 1.5;

    margin-bottom: 25px;

    text-transform: uppercase;
}

.roof-replacement-text p {

    color: #ffffff;

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

    font-size: 16px;

    line-height: 1.2;

    margin-bottom: 23px;
}

/* BUTTON */

.roof-connect-btn {

    display: inline-block;

    background: #00ff2a;

    color: #111111;

    text-decoration: none;

    padding: 16px 38px;

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

    font-size: 12px;

    letter-spacing: 1.3px;

    text-transform: uppercase;

    transition: 0.3s ease;
}

.roof-connect-btn:hover {

    background: #ff5a1f;

    color: #ffffff;
}


/* =========================
   ROOF MATERIALS SECTION
========================= */

.roof-materials-section {

    background: #fb5025;

    padding: 60px 0;
}

.roof-materials-container {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    padding-left: 220px;
}

.roof-materials-container h2 {

    color: #ffffff;

    font-family: "Teko", sans-serif;

    font-size: 32px;

    font-weight: 500;

    margin-bottom: 30px;

    margin-top: -15px;

    line-height: 1;
}

.roof-materials-container ul {

    margin-bottom: 60px;

    padding-left: 30px;
}

.roof-materials-container li {

    color: #111111;

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

    font-size: 16px;

    line-height: 1.5;
}

.roof-materials-btn {

    display: inline-block;

    background: #00ff2a;

    color: #111111;

    text-decoration: none;

    padding: 12px 20px;

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

    font-size: 16px;

    letter-spacing: 1.3px;

    text-transform: uppercase;

    transition: 0.3s ease;

    margin-top: -60px;
}

.roof-materials-btn:hover {

    background: #111111;

    color: #ffffff;
}


/* =========================
   ROOF SIGNS SECTION
========================= */

.roof-signs-section {

    background-image: url("../images/roof-replacement3.png");

    background-repeat: repeat;

    background-size: 520px;

    background-position: center;

    padding: 120px 0;

     border: none;

    box-shadow: none;

    outline: none;

}

/* WHITE BOX */

.roof-signs-box {

    background: #f3f3f3;

    max-width: 1100px;

    margin: 0 auto;

    padding: 80px 120px 60px;

    margin-top: -60px;
}

/* TITLE */

.roof-signs-box h2 {

    color: #222222;

    font-family: "Teko", sans-serif;

    font-size: 32px;

    font-weight: 600;

    text-align: center;

    margin-bottom: 30px;

    text-transform: uppercase;

    margin-top: -20px;
}

/* INTRO */

.roof-signs-intro {

    color: #222222;

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

    font-size: 16px;

    line-height: 1.6;

    text-align: center;

    max-width: 1200px;

    margin: 0 auto 90px;
}

/* EACH ITEM */

.roof-sign-item {

    text-align: center;

    margin-bottom: 120px;
}

/* ICON IMAGE */

.roof-sign-item img {

    width: 130px;

    height: auto;

    margin-bottom: 45px;

    margin-top: -60px;
}

/* ITEM TITLE */

.roof-sign-item h3 {

    color: #222222;

    font-family: "Teko", sans-serif;

    font-size: 25px;

    font-weight: 600;

    text-transform: uppercase;

    margin-bottom: 35px;
}

/* TEXT */

.roof-sign-item p {

    color: #222222;

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

    font-size: 16px;

    line-height: 1.5;

    max-width: 1350px;

    margin: 0 auto 35px;

    margin-top: -25px;
}


/* =========================
   ROOF INSPECTION SECTION
========================= */

.roof-inspection-section {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    background: linear-gradient(
        to right,
        transparent 50%,
        #3d3d3d 50%
    );

    overflow: hidden;

    padding: 0;

    padding-top: 0;

    padding-bottom: 0;

    padding-left: 0;

    padding-right: 0;
}



/* LEFT IMAGE */

.roof-inspection-image {

    width: 68%;

    height: 700px;

    overflow: hidden;

    position: relative;
}

.roof-inspection-image img {

    width: 85%;

    height: 100%;

    object-fit: cover;

    object-position: left center;

    display: block;
}



/* WHITE CONTENT BOX */

.roof-inspection-box {

    position: absolute;

    width: 600px;

    background: #efefef;

    padding: 30px 55px;

    border-left: 26px solid #ff5a1f;

    z-index: 5;

    margin-left: 750px;

    margin-top: -600px;
}


/* TITLE */

.roof-inspection-box h2 {

    font-family: "Teko", sans-serif;

    font-size: 32px;

    line-height: 1.50;

    font-weight: 500;

    color: #1d1d1d;

    margin-bottom: 25px;
}



/* TEXT */

.roof-inspection-box p {

    font-size: 16px;

    line-height: 1.15;

    color: #222;

    margin-bottom: 28px;
}



/* BUTTON */

.roof-inspection-btn {

    display: block;

    width: fit-content;

    background: #00ff38;

    color: #111;

    text-decoration: none;

    font-size: 14px;

    letter-spacing: 1.15px;

    line-height: 1.5;

    padding: 16px 18px;

    margin-top: 15px;

    margin-left: auto;

    margin-right: auto;

    transition: 0.3s ease;
}

.roof-inspection-btn:hover {

    background: #ff5a1f;

    color: #ffffff;
}

/* =========================
   ROOF REPLACEMENT CONTACT SECTION
========================= */

.roof-replacement-contact-section {

    position: relative;

    background-image: url("../images/map-bg.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    padding: 120px 20px;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;
}



/* DARK OVERLAY */

.roof-replacement-contact-overlay {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.45);

    z-index: 1;
}



/* CONTACT BOX */

.roof-replacement-contact-box {

    position: relative;

    width: 100%;

    max-width: 1100px;

    background: #efefef;

    padding: 60px 70px;

    border-left: 14px solid #ff5a1f;

    z-index: 5;

    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}



/* TITLE */

.roof-replacement-contact-box h2 {

    font-family: "Teko", sans-serif;

    font-size: 42px;

    font-weight: 500;

    line-height: 1.2;

    color: #1d1d1d;

    text-align: center;

    margin-bottom: 45px;
}



/* FORM */

.roof-replacement-contact-form {

    width: 100%;
}



/* ROWS */

.form-row {

    display: flex;

    gap: 30px;

    margin-bottom: 28px;
}

.name-row {

    display: flex;

    gap: 30px;
}



/* FORM GROUP */

.form-group {

    flex: 1;

    margin-bottom: 30px;
}

.full-width {

    width: 100%;
}



/* LABELS */

.form-group label {

    display: block;

    font-size: 15px;

    font-weight: 600;

    color: #1d1d1d;

    margin-bottom: 12px;
}

.form-group label span {

    color: #ff5a1f;
}



/* INPUTS */

.form-group input,
.form-group textarea {

    width: 100%;

    background: #ffffff;

    border: 1px solid #d5d5d5;

    padding: 16px 18px;

    font-size: 15px;

    color: #222;

    outline: none;

    transition: 0.3s ease;
}



/* INPUT FOCUS */

.form-group input:focus,
.form-group textarea:focus {

    border-color: #00ff38;
}



/* TEXTAREA */

.form-group textarea {

    height: 180px;

    resize: vertical;
}



/* CHECKBOXES */

.checkbox-group {

    display: flex;

    flex-wrap: wrap;

    gap: 18px;
}

.checkbox-group label {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 15px;

    font-weight: 400;

    margin-bottom: 0;
}



/* BUTTON */

.roof-replacement-submit-btn {

    display: block;

    margin: 40px auto 0;

    background: #00ff38;

    color: #111;

    border: none;

    padding: 18px 45px;

    font-size: 15px;

    letter-spacing: 1px;

    cursor: pointer;

    transition: 0.3s ease;
}

.roof-replacement-submit-btn:hover {

    background: #ff5a1f;

    color: #ffffff;
}



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

.main-footer {

    background: #4a4a4a;

    color: #ffffff;

    display: grid;

    grid-template-columns: 420px 1fr;

    gap: 30px;

    padding: 55px 7% 45px;

    align-items: start;
}


/* LOGO */

.footer-logo img {

    width: 320px;

    height: auto;

    display: block;
}


/* RIGHT SIDE */

.footer-info {

    width: 100%;
}

/* TOP NAV */

.footer-nav {

    display: flex;

    gap: 38px;

    border-bottom: 1px solid rgba(255,255,255,0.22);

    padding-bottom: 26px;

    margin-bottom: 40px;

    align-items: center;
}

.footer-nav a {

    color: #ffffff;

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-weight: 700;

    font-size: 13px;

    font-family: Arial, sans-serif;

    transition: 0.3s ease;
}

.footer-nav a:hover,
.footer-nav a:first-child {

    color: #00ff40;
}

/* ADDRESS + HOURS */

.footer-columns {

    display: flex;

    gap: 130px;

    justify-content: flex-start;

    align-items: flex-start;
}

/* TITLES */

.footer-columns h3 {

    font-size: 18px;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 20px;

    font-weight: 500;

    color: #ffffff;

    font-family: Arial, sans-serif;
}

/* TEXT */

.footer-columns p {

    font-size: 14px;

    line-height: 1.8;

    margin-bottom: 0;

    color: #f1f1f1;

    font-family: Arial, sans-serif;
}

/* DIRECTIONS */

.footer-address a.directions-link,
.footer-address a.directions-link:visited {

    color: #ffffff !important;

    text-decoration: none !important;
}

.footer-address a.directions-link:hover,
.footer-address a.directions-link:active {

    color: #bfbfbf !important;

    text-decoration: underline !important;
}

/* COPYRIGHT */

.copyright {

    background: #8a8a8a;

    color: #ffffff;

    text-align: center;

    padding: 18px 20px;

    font-size: 14px;

    font-family: Arial, sans-serif;
}


/* =========================
   ROOFING HTML PAGE
========================= */

.roofing-hero {

    position: relative;

    background-image:
        linear-gradient(rgba(0,0,0,0.10), rgba(0,0,0,0.10)),
        url("../images/roofing.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-bottom: 10px solid #00ff2a;
}


/* CONTENT */

.roofing-hero-content {

    position: relative;

    z-index: 2;

    margin-top: 80px;
}


/* TITLE */

.roofing-hero-content h1 {

    color: #ffffff;

    font-family: "Teko", sans-serif;

    font-size: 52px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 40px;
}


/* ORANGE BUTTON */

.roofing-estimate-btn {

    display: inline-block;

    background: #ff4b22;

    color: #ffffff;

    text-decoration: none;

    font-family: Arial, sans-serif;

    font-size: 15px;

    font-weight: 600;

    letter-spacing: 2px;

    padding: 22px 70px;

    text-transform: uppercase;

    transition: 0.3s ease;
}


/* HOVER GREEN */

.roofing-estimate-btn:hover {

    background: #00ff4c;

    color: #111111;
}


/* =========================
   QUALITY ROOFING SECTION
========================= */

.quality-roofing-section {

    background: #f3f3f3;

    padding: 90px 40px 110px;
}


.quality-roofing-container {

    max-width: 1400px;

    margin: 0 auto;

    text-align: center;
}


/* TITLE */

.quality-roofing-container h2 {

    font-family: "Teko", sans-serif;

    font-size: 52px;

    font-weight: 700;

    color: #222222;

    margin-bottom: 10px;
}


/* SUBTITLE */

.quality-subtitle {

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

    font-size: 18px;

    color: #6d6d6d;

    letter-spacing: 0.5px;

    margin-bottom: 30px;
}


/* ICONS */

.quality-icons {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 35px;

    flex-wrap: wrap;

    margin-bottom: 110px;
}


.quality-icons img {

    width: 180px;

    opacity: 0.95;
}


/* TEXT SECTION */

.quality-text {

    max-width: 1150px;

    margin: 0 auto;

    text-align: left;
}


.quality-text h3 {

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

    font-size: 28px;

    font-weight: 500;

    color: #111111;

    margin-bottom: 20px;
}


.quality-text h4 {

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

    font-size: 18px;

    font-weight: 500;

    margin-bottom: 20px;

    color: #222222;
}


.quality-text p {

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

    font-size: 18px;

    line-height: 1.0;

    color: #222222;

    margin-bottom: 15px;
}


/* BUTTON */

.quality-btn-wrapper {

    text-align: center;

    margin-top: 70px;
}


.quality-btn {

    display: inline-block;

    background: #222222;

    color: #ffffff;

    text-decoration: none;

    padding: 12px 25px;

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

    font-size: 16px;

    letter-spacing: 1px;

    text-transform: uppercase;

    transition: 0.3s ease;
}


.quality-btn:hover {

    background: #00ff2a;

    color: #111111;
}


/* =======================================
   ROOF DETAILS SECTION FOR ROOFING HTML
========================================= */

.roof-details-section {

    background: #f3f3f3;

    padding: 0px 40px 120px;
}


.roof-details-container {

    max-width: 1500px;

    margin: 0 auto;

    padding-left: 153px;
}


/* MAIN TITLE */

.roof-details-container h2 {

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

    font-size: 28px;

    font-weight: 700;

    line-height: 0.5;

    color: #2a2a2a;

    margin-bottom: 25px;

    text-transform: uppercase;

    letter-spacing: -2px;

}


/* PARAGRAPHS */

.roof-details-container p {

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

    font-size: 20px;

    line-height: 1.5;

    color: #5c5c5c;

    margin-bottom: 10px;

    max-width: 1500px;

    letter-spacing: -1px;
}


/* SECOND TITLE */

.roof-details-container h3 {

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

    font-size: 28px;

    font-weight: 700;

    line-height: 1.5;

    color: #2a2a2a;

    margin-top: 30px;

    margin-bottom: 10px;

    text-transform: uppercase;

    letter-spacing: -2px;
}


/* BUTTONS */

.roof-details-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 28px;

    margin-top: 50px;

    margin-bottom: 90px;

    flex-wrap: wrap;
}


.roof-detail-btn {

    display: inline-block;

    background: #232323;

    color: #ffffff;

    text-decoration: none;

    padding: 12px 20px;

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

    font-size: 16px;

    text-transform: uppercase;

    transition: 0.3s ease;

    width: 220px;

    text-align: center;
}


.roof-detail-btn:hover {

    background: #00ff2a;

    color: #111111;
}


/* LOWER TITLE */

.roof-details-container h4 {

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

    font-size: 35px;

    font-weight: 600;

    line-height: 1.0;

    color: #2a2a2a;

    text-transform: uppercase;

    margin-bottom: 50px;

    letter-spacing: -1px;

}


/* ICONS */

.roof-detail-icons {

    display: flex;

    justify-content: flex-start;

    gap: 220px;

    flex-wrap: wrap;

    align-items: center;

    padding-left: 140px;
}


.roof-icon-item img {

    width: 110px;
}


/* =========================
   DETAIL TEXTS
========================= */

.roof-detail-texts {

    display: flex;

    justify-content: center;

    align-items: flex-start;

    gap: 70px;

    margin-top: 30px;

    margin-bottom: 120px;

    flex-wrap: wrap;

}


/* TEXT BOX */

.roof-detail-text-box {

    width: 360px;
}


/* TITLES */

.roof-detail-text-box h5 {

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

    font-size: 28px;

    font-weight: 700;

    text-transform: uppercase;

    margin-bottom: 25px;

    color: #2a2a2a;

    letter-spacing: -1px;

    margin-top: -8px;
}


/* PARAGRAPHS */

.roof-detail-text-box p {

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

    font-size: 16px;

    line-height: 1.7;

    color: #666666;

    letter-spacing: -0.3px;
}


/* =========================
   LOWER CONTENT for ROOF HTML
============================= */

.roof-lower-content {

    background: #f3f3f3;

    padding: 40px 0 120px;
}


/* CONTAINER */

.roof-lower-container {

    width: 88%;

    max-width: 1650px;

    margin: 0 auto;
}


/* TITLES */

.roof-lower-container h2,
.roof-lower-container h3 {

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

    font-size: 30px;

    font-weight: 700;

    text-transform: uppercase;

    color: #2a2a2a;

    letter-spacing: -2px;

    line-height: 1.2;

    margin-bottom: 20px;

    margin-top: -90px;
}


/* SECOND TITLE SPACING */

.roof-lower-container h3 {

    margin-top: 40px;
}


/* PARAGRAPHS */

.roof-lower-container p {

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

    font-size: 16px;

    line-height: 1.7;

    color: #666666;

    letter-spacing: -0.3px;

    margin-bottom: 26px;

    max-width: 1800px;
}



/* ==============================
   COMMERCIAL ROOFING SYSTEMS HTML
================================= */

.commercial-roofing-hero {

    position: relative;

    height: 100vh;

    background-image: url("../images/commercial roofing systems.png");

    background-size: cover;

    background-position: left center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    border-bottom: 6px solid #00c853;
}



/* DARK OVERLAY */

.commercial-roofing-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.01);

    z-index: 1;
}



/* CONTENT */

.commercial-roofing-content {

    position: relative;

    z-index: 2;

    text-align: center;

    margin-top: 60px;
}



/* TITLE */

.commercial-roofing-content h1 {

    font-family: "Teko", sans-serif;

    font-size: 38px;

    font-weight: 700;

    color: #ffffff;

    line-height: 1;

    margin-bottom: 25px;

    letter-spacing: 1px;
}



/* SUBTITLE */

.commercial-roofing-content p {

    font-family: Arial, sans-serif;

    font-size: 26px;

    font-weight: 700;

    color: #ffffff;

    margin-bottom: 45px;

    letter-spacing: 1px;
}



/* BUTTON ROW */

.commercial-roofing-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 35px;

    flex-wrap: wrap;
}



/* BUTTONS */

.commercial-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    background: #ff5a1f;

    color: #ffffff;

    text-decoration: none;

    font-family: Arial, sans-serif;

    font-size: 16px;

    padding: 15px 45px;

    font-weight: 700;

    letter-spacing: 1.25px;

    transition: 0.3s ease;
}


/* BUTTON HOVER */

.commercial-btn:hover {

    background: #00c853;

    color: #ffffff;
}



/* BUTTON CLICK */

.commercial-btn:active {

    background: #00c853;

    color: #ffffff;
}


/* ================================
   COMMERCIAL ROOFING TYPES SECTION
=================================== */

.commercial-info-section {

    position: relative;

    background: #f3f3f3;

    padding: 55px 120px 40px;

    overflow: hidden;
}



/* FAINT BACKGROUND LOGO */

.commercial-info-section::before {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 900px;

    height: 900px;

    background-image: url("../images/logo-3.png");

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    opacity: 0.04;

    pointer-events: none;
}



/* MAIN CONTAINER */

.commercial-info-container {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 40px;
}





/* LEFT SIDE */

.commercial-info-text {

    display: flex;

    align-items: flex-start;

    gap: 30px;

    flex: 1;
}


/* VERTICAL LINE */

.commercial-line {

    width: 7px;

    height: 520px;

    background: #555555;

    margin-top: 0;
}

.commercial-text-content {

    padding-top: 90px;
}


/* TEXT AREA */

.commercial-text-content h2 {

    font-family: "Teko", sans-serif;

    font-size: 25px;

    font-weight: 600;

    line-height: 1.25;

    color: #ff5a1f;

    margin-bottom: 20px;

    max-width: 680px;
}



.commercial-text-content p {

    font-family: Arial, sans-serif;

    font-size: 16px;

    line-height: 1.5;

    color: #6b6b6b;

    margin-bottom: 45px;

    max-width: 700px;
}



/* GREEN BUTTON */

.commercial-systems-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    padding: 20px 24px;

    background: #00ff2a;

    color: #000000;

    text-decoration: none;

    font-family: Arial, sans-serif;

    font-size: 15px;

    font-weight: 500;

    letter-spacing: 1.5px;

    transition: 0.3s ease;

    margin-top: -50px;;
}

/* HOVER */

.commercial-systems-btn:hover {

    background: #ff5a1f;

    color: #ffffff;
}



/* CLICK */

.commercial-systems-btn:active {

    background: #ff5a1f;

    color: #ffffff;
}




/* RIGHT IMAGE */

.commercial-image-wrapper {

    position: relative;

    width: 320px;

    flex-shrink: 0;
}


/* IMAGE */

.commercial-image-wrapper {

    position: relative;

    width: 220px;

    flex-shrink: 0;

    margin-top: 25px;

     transform: translateX(-300px);

    background: transparent;

    padding: 0;

    
}


/* ================================
   COMMERCIAL ROOFING RIGHT SUBMENU
=================================== */

.commercial-right-dropdown {

    position: absolute;

    top: 0;

    left: 100%;

    width: 230px;

    background: #666666;

    list-style: none;

    padding: 28px 0;

    margin-bottom: 10px;

    opacity: 0;

    visibility: hidden;

    transition: 0.3s ease;

    z-index: 999;
}



/* SHOW DROPDOWN */

.has-submenu:hover .commercial-right-dropdown {

    opacity: 1;

    visibility: visible;
}



/* LINKS */

.commercial-right-dropdown li a {

    display: block;

    padding: 18px 22px;

    color: #ffffff;

    text-decoration: none;

    font-family: Arial, sans-serif;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    transition: 0.3s ease;
}



/* HOVER */

.commercial-right-dropdown li a:hover {

    color: #00ff2a;
}


/* ===================================
   TYPES OF COMMERCIAL ROOFING SYSTEMS
====================================== */

.commercial-roofing-systems {

    position: relative;

    width: 100%;

    height: 240px;

    background-image: url("../images/mixed-black-background.png");

    background-size: contain;

    background-position: center;

    background-repeat: repeat;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    border-bottom: 18px solid #ff4713;
}



/* DARK OVERLAY */

.commercial-roofing-types-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0);

    z-index: 1;
}



/* CONTENT */

.commercial-roofing-types-content {

    position: relative;

    z-index: 2;

    text-align: center;
}



/* TITLE */

.commercial-roofing-types-content h2 {

    font-family: "Teko", sans-serif;

    font-size: 34px;

    font-weight: 700;

    color: #ffffff;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    line-height: 1;

    margin: 0;
}


/* ===================================
   COMMERCIAL ROOF TYPES SECTION
====================================== */

.commercial-roof-types-section {

    position: relative;

    background: #efefef;

    padding: 0 0 45px 0;

    overflow: hidden;

    margin-top: -25px;

    z-index: 2;

}



/* ORANGE SIDE BACKGROUND */

.commercial-roof-types-section::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 33%;

    height: calc(100% + 130px);

    background: #ff4713;

    z-index: 1;


}



/* =========================
   METAL CARD
========================= */

.commercial-roof-card {

    position: relative;

    z-index: 2;

    width: 72%;

    margin: 70px auto 26px auto;

    background: #dfdfdf;

    display: flex;

    align-items: center;

    gap: 70px;

    padding: 35px 60px;

    box-sizing: border-box;
}



/* =========================
   SPF CARD
========================= */

.commercial-roof-spf-card {
   
    position: relative;

    z-index: 2;

    width: 72%;

    margin: 25px auto 26px auto;

    background: #dfdfdf;

    display: flex;

    align-items: center;

    gap: 70px;

    padding: 35px 60px;

    box-sizing: border-box;
}
    



/* =========================
   EPDM CARD
========================= */

.commercial-roof-epdm-card {

    position: relative;

    z-index: 2;

    width: 72%;

    margin: 25px auto 26px auto;

    background: #dfdfdf;

    display: flex;

    align-items: center;

    gap: 70px;

    padding: 35px 60px;

    box-sizing: border-box;
}


/* =========================
   IMAGES
========================= */

.commercial-roof-image {

    flex-shrink: 0;
}



/* CIRCLE IMAGE */

.commercial-roof-image img {

    width: 290px;

    height: 290px;

    object-fit: cover;

    border-radius: 50%;

    border: 12px solid #666666;

    display: block;
}



/* =========================
   METAL TEXT
========================= */

.commercial-roof-metal-text {

    flex: 1;
}

.commercial-roof-metal-text h2 {

    font-family: "Teko", sans-serif;

    font-size: 32px;

    font-weight: 550;

    color: #ff4713;

    margin-bottom: 20px;

    line-height: 1;
}

.commercial-roof-metal-text p {

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

    font-size: 16px;

    line-height: 1.5;

    color:  #1f1f1f;
}



/* =========================
   GENERAL TEXT
========================= */

.commercial-roof-text {

    flex: 1;
}

.commercial-roof-text h2 {

    font-family: "Teko", sans-serif;

    font-size: 30px;

    font-weight: 550;

    color: #ff4713;

    margin-bottom: 20px;

    line-height: 1;
}

.commercial-roof-text p {

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

    font-size: 16px;

    line-height: 1.5;

    color: #444444;
}


/* ===================================
   DARK COMMERCIAL ROOFING SECTION
====================================== */

.commercial-dark-roofing-section {

    position: relative;

    background: #1f1f1f;

    padding: 70px 0 40px 0;

    overflow: hidden;
}



/* ORANGE RIGHT SIDE */

.commercial-dark-roofing-section::before {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    width: 33%;

    height: 100%;

    background: #ff4713;

    z-index: 1;
}



/* CARD */

.commercial-dark-roof-card {

    position: relative;

    z-index: 2;

    width: 72%;

    margin: 0 auto 26px auto;

    background: #e3e3e3;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 90px;

    padding: 35px 60px;

    box-sizing: border-box;
}



/* TEXT */

.commercial-dark-roof-text {

    flex: 1;
}



/* TITLE */

.commercial-dark-roof-text h2 {

    font-family: "Teko", sans-serif;

    font-size: 32px;

    font-weight: 600;

    color: #ff4713;

    line-height: 1;

    margin-bottom: 22px;
}



/* PARAGRAPH */

.commercial-dark-roof-text p {

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

    font-size: 16px;

    line-height: 1.2;

    color: #2f2f2f;
}



/* IMAGE */

.commercial-dark-roof-image {

    flex-shrink: 0;
}



/* CIRCLE IMAGE */

.commercial-dark-roof-image img {

    width: 290px;

    height: 290px;

    object-fit: cover;

    border-radius: 50%;

    border: 12px solid #666666;

    display: block;
}


/* ===================================
   COMMERCIAL ROOF CHOICE SECTION
====================================== */

.commercial-roof-choice-section {

    position: relative;

    width: 100%;

    min-height: 980px;

    background-image:
        url("../images/roof-choice.png"),
        url("../images/commercial-roof.png");

    background-position:
        left top,
        right top;

    background-size:
        40% 70%,
        65% 115%;

    background-repeat:
        no-repeat,
        no-repeat;

    background-attachment:
        scroll,
        fixed;

    background-color: #1f1f1f;

    overflow: hidden;
}


/* LEFT INFO BOX */

.commercial-roof-choice-box {

    position: absolute;

    top: 85px;

    left: 50%;

    transform: translateX(-100%);

    width: 560px;

    background-color: #ececec;

    padding-top: 42px;

    padding-bottom: 48px;

    padding-left: 55px;

    padding-right: 55px;

    border-left: 12px solid #ff4713;

    box-shadow: 0 0 18px rgba(59, 58, 58, 0.18);

    z-index: 5;
}



/* MAIN TITLE */

.commercial-roof-choice-box h2 {

    font-family: "Teko", sans-serif;

    font-size: 25px;

    font-weight: 600;

    color: #ff4713;

    line-height: 1;

    margin-bottom: 20px;
}



/* SUB TITLES */

.commercial-roof-choice-box h3 {

    font-family: "Teko", sans-serif;

    font-size: 20px;

    font-weight: 600;

    color: #ff4713;

    line-height: 0.5;

    margin-top: 24px;

    margin-bottom: 16px;
}



/* PARAGRAPHS */

.commercial-roof-choice-box p {

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

    font-size: 14px;

    line-height: 1.3;

    color: #2f2f2f;

    margin-bottom: 15px;
}



/* BUTTON */

.commercial-roof-choice-btn {

    display: inline-block;

    margin-top: 18px;

    background: #00ff2a;

    color: #111111;

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

    font-size: 14px;

    letter-spacing: 1.5px;

    text-decoration: none;

    padding-top: 15px;

    padding-bottom: 15px;

    padding-left: 38px;

    padding-right: 38px;

    transition: 0.3s ease;
}



/* BUTTON HOVER */

.commercial-roof-choice-btn:hover {

    background: #ff4713;

    color: #ffffff;
}


/* ===================================
   COMMERCIAL FREE ESTIMATE SECTION
====================================== */

.commercial-free-estimate-section {

    position: relative;

    width: 100%;

    margin-top: -300px;

    padding-top: 50px;

    padding-bottom: 50px;

    background-image: url("../images/mixed-black-background.png");

    background-size: contain;

    background-position: center top;

    background-repeat: repeat;

    overflow: hidden;
}



.commercial-free-estimate-section::before {

    content: "";

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 8px;

    height: 100%;

    background: #111;

    opacity: 0.35;

    pointer-events: none;

    z-index: 1;
}



/* CONTENT */

.commercial-free-estimate-content {

    position: relative;

    z-index: 2;

    width: 72%;

    margin: 0 auto;

     text-align: center;
}



/* TITLE */

.commercial-free-estimate-content h2 {

    font-family: "Teko", sans-serif;

    font-size: 30px;

    font-weight: 700;

    color: #ffffff;

    line-height: 1;

    margin-bottom: 34px;

    text-transform: uppercase;
}



/* PARAGRAPH */

.commercial-free-estimate-content p {

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

    font-size: 18px;

    line-height: 1.5;

    color: #ffffff;

    width: 78%;

    margin: 0 auto 42px auto;
}



/* BUTTON */

.commercial-free-estimate-btn {

    display: inline-block;

    background: #ff4713;

    color: #ffffff;

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

    font-size: 16px;

    letter-spacing: 1.5px;

    text-decoration: none;

    padding: 14px 25px;

    transition: 0.3s ease;
}



/* HOVER */

.commercial-free-estimate-btn:hover {

    background: #00ff3c;

    color: #111111;
}


/* ===================================
   COMMERCIAL WRONG CHOICE SECTION
=================================== */

.commercial-roof-wrong-choice-section {

    position: relative;

    width: 100%;

    min-height: 700px;

    background-image:
        url("../images/roof-choice.png"),
        url("../images/commercial-wrong-type.png");

    background-position:
        right center,
        left center;

    background-size:
        38% 100%,
        70% 120%;

    background-repeat:
        no-repeat,
        no-repeat;

    background-attachment:
        scroll,
        fixed;

    overflow: visible;
}



/* ===================================
   CONTENT BOX
=================================== */

.commercial-roof-wrong-choice-box {

    position: absolute;

    top: 72px;

    left: 50%;

    transform: none;

    right: 290px;

    width: 580px;

    background: #ececec;

    padding-top: 28px;

    padding-bottom: 40px;

    padding-left: 70px;

    padding-right: 70px;

    border-left: 30px solid #ff4713;

    z-index: 5;

    box-shadow: 0 0 18px rgba(0,0,0,0.18);
}



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

.commercial-roof-wrong-choice-box h2 {

    font-family: "Teko", sans-serif;

    font-size: 25px;

    line-height: 1;

    font-weight: 600;

    color: #ff4713;

    margin-bottom: 18px;

    max-width: 530px;
}



/* ===================================
   PARAGRAPHS
=================================== */

.commercial-roof-wrong-choice-box p {

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

    font-size: 15px;

    line-height: 1.3;

    color: #333;

    margin-bottom: 16px;

    max-width: 560px;
}


/* ===================================
   BUTTON
=================================== */

.commercial-roof-wrong-choice-btn {

    display: inline-block;

    margin-top: 12px;

    background: #00ff2a;

    color: #111111;

    text-decoration: none;

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

    font-size: 15px;

    font-weight: 500;

    letter-spacing: 3px;

    text-transform: uppercase;

    padding-top: 18px;

    padding-bottom: 18px;

    padding-left: 42px;

    padding-right: 42px;

    transition: 0.3s ease;
}



/* HOVER */

.commercial-roof-wrong-choice-btn:hover {

    background: #ff4713;

    color: #ffffff;
}


/* ===================================
   COMMERCIAL ROOFING CTA SECTION
====================================== */

.commercial-roofing-cta-section {

    position: relative;

    width: 100%;

    background: #ececec;

    padding-top: 50px;

    padding-bottom: 50px;

    overflow: hidden;

    text-align: center;
}



/* BACKGROUND LOGO */

.commercial-roofing-cta-overlay {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 700px;

    height: 700px;

    background-image: url("../images/champion-watermark.png");

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

    opacity: 0.05;

    z-index: 1;
}



/* CONTENT */

.commercial-roofing-cta-content {

    position: relative;

    z-index: 2;

    width: 78%;

    margin: 0 auto;
}



/* TITLE */

.commercial-roofing-cta-content h2 {

    font-family: "Teko", sans-serif;

    font-size: 23px;

    font-weight: 550;

    line-height: 1;

    color: #ff4713;

    margin-bottom: 28px;
}



/* PARAGRAPHS */

.commercial-roofing-cta-content p {

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

    font-size: 17px;

    line-height: 1.5;

    color: #2a2a2a;

    width: 82%;

    margin: 0 auto 24px auto;
}



/* BUTTON */

.commercial-roofing-cta-btn {

    display: inline-block;

    margin-top: 18px;

    background: #00ff2a;

    color: #111111;

    text-decoration: none;

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

    font-size: 15px;

    letter-spacing: 1.5px;

    padding: 13px 22px;

    transition: 0.3s ease;
}



/* BUTTON HOVER */

.commercial-roofing-cta-btn:hover,
.commercial-roofing-cta-btn:active {

    background: #ff4713;

    color: #000000;
}


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

.commercial-button-services-section {

    position: relative;

    width: 100%;

    padding: 75px 40px;

    background-image: url("../images/mixed-black-background.png");

    background-size: contain;

    background-position: center;

    background-repeat: repeat;

    overflow: hidden;

    isolation: isolate;

    border-bottom: 6px solid #ff5a1f;
}



/* SERVICES CONTAINER */

.commercial-button-services-container {

    max-width: 1500px;

    margin: 0 auto;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    gap: 55px;

    flex-wrap: wrap;
}



/* SERVICE BOX */

.commercial-button-service-box {

    width: 185px;

    text-align: center;
}



/* ICON */

.commercial-button-service-box img {

    width: 150px;

    height: 150px;

    object-fit: contain;

    clip-path: circle(50%);

    background: transparent;
}



/* HOVER */

.commercial-button-service-box:hover img {

    transform: translateY(-6px);
}



/* TITLE */

.commercial-button-service-box h3 {

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

    font-size: 20px;

    font-weight: 700;

    line-height: 1.15;

    color: #00ff2a;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}




/* ===================================
   ROOF MAINTENANCE HTML
====================================== */

.roof-maintenance-hero {

    position: relative;

    width: 100%;

    min-height: 880px;

    background-image: url("../images/roof-maintenance-hero.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    overflow: hidden;
}



/* DARK OVERLAY */

.roof-maintenance-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.32);

    z-index: 1;
}



/* CONTENT */

.roof-maintenance-content {

    position: relative;

    z-index: 2;

    margin-top: 90px;
}



/* TITLE */

.roof-maintenance-content h1 {

    font-family: "Teko", sans-serif;

    font-size: 38px;

    font-weight: 700;

    line-height: 0.95;

    color: #ffffff;

    margin-bottom: 24px;

    text-transform: uppercase;

    text-shadow: 0 3px 10px rgba(0,0,0,0.35);
}



/* SUBTITLE */

.roof-maintenance-content p {

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

    font-size: 26px;

    font-weight: 700;

    color: #ffffff;

    margin-bottom: 38px;

    letter-spacing: 0.5px;
}



/* BUTTONS */

.roof-maintenance-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 42px;

    flex-wrap: wrap;
}



/* BUTTON */

.roof-maintenance-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 430px;

    height: 48px;

    background: #ff4713;

    color: #ffffff;

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

    font-size: 16px;

    font-weight: 500;

    letter-spacing: 1.5px;

    text-decoration: none;

    text-transform: uppercase;

    transition: 0.3s ease;
}



/* HOVER + CLICK */

.roof-maintenance-btn:hover,
.roof-maintenance-btn:focus,
.roof-maintenance-btn:active {

    background: #00ff2a;

    color: #1f1f1f;
}


/* HOVER */

.roof-maintenance-btn:hover {

    background: #00ff2a;

    color: #1f1f1f;
}



/* CLICK */

.roof-maintenance-btn:active {

    background: #ff4713;

    color: #ffffff;
}



/* ===================================
   GREEN SERVICE BAR
====================================== */

.roof-maintenance-service-bar {

    width: 100%;

    background: #00ff2a;

    text-align: center;

    padding-top: 30px;

    padding-bottom: 22px;
}



/* TEXT */

.roof-maintenance-service-bar h2 {

    font-family: "Teko", sans-serif;

    font-size: 30px;

    font-weight: 600;

    color: #2f2f2f;

    line-height: 1.5;

    text-transform: uppercase;

    margin-top: -10px;
}

/* ===================================
   ROOF MAINTENANCE ICONS SECTION
====================================== */

.roof-maintenance-icons-section {

    position: relative;

    width: 100%;

    padding-top: 95px;

    padding-bottom: 95px;

    background-image: url("../images/roof-maintenance-hero.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    overflow: hidden;
}



/* DARK OVERLAY */

.roof-maintenance-icons-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.45);

    z-index: 1;
}



/* ICON CONTAINER */

.roof-maintenance-icons-container {

    position: relative;

    z-index: 2;

    width: 82%;

    margin: 0 auto;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 40px;

    flex-wrap: wrap;
}



/* ICON */

.roof-maintenance-icon img {

    width: 140px;

    height: auto;

    display: block;

    opacity: 0.92;

    transition: 0.3s ease;
}



/* HOVER */

.roof-maintenance-icon img:hover {

    transform: scale(1.05);

    opacity: 1;
}


/* ===================================
   ROOF MAINTENANCE INFO SECTION
====================================== */

.roof-maintenance-info-section {

    position: relative;

    width: 100%;

    background: #1f1f1f;

    padding-top: 85px;

    padding-bottom: 85px;

    overflow: hidden;
}



/* CONTENT */

.roof-maintenance-info-content {

    width: 72%;

    margin: 0 auto;
}



/* TITLE */

.roof-maintenance-info-content h2 {

    font-family: "Teko", sans-serif;

    font-size: 34px;

    font-weight: 500;

    line-height: 1.5;

    color: #ff4713;

    max-width: 1120px;

    margin-bottom: 34px;

    text-transform: uppercase;
}



/* PARAGRAPHS */

.roof-maintenance-info-content p {

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

    font-size: 16px;

    line-height: 1.55;

    color: #ffffff;

    max-width: 1450px;

    margin-bottom: 22px;
}



/* BUTTON */

.roof-maintenance-connect-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 230px;

    height: 48px;

    margin-top: 18px;

    background: #00ff2a;

    color: #1f1f1f;

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

    font-size: 16px;

    font-weight: 500;

    letter-spacing: 1.5px;

    text-decoration: none;

    text-transform: uppercase;

    transition: 0.3s ease;
}



/* HOVER */

.roof-maintenance-connect-btn:hover {

    background: #ff4713;

    color: #ffffff;
}



/* CLICK */

.roof-maintenance-connect-btn:active {

    background: #00ff2a;

    color: #1f1f1f;
}


/* ===================================
   ROOF DAMAGE SECTION
====================================== */

.roof-damage-section {

    position: relative;

    width: 100%;

    background: #ff4713;

    padding-top: 50px;

    padding-bottom: 50px;

    overflow: hidden;
}



/* CONTENT */

.roof-damage-content {

    width: 72%;

    margin: 0 auto;

    display: flex;

    justify-content: flex-end;
}



/* RIGHT SIDE */

.roof-damage-right {

    width: 48%;
}



/* TITLE */

.roof-damage-right h2 {

    font-family: "Teko", sans-serif;

    font-size: 28px;

    font-weight: 500;

    line-height: 1;

    color: #ffffff;

    margin-bottom: 28px;

    text-transform: uppercase;
}



/* LIST */

.roof-damage-right ul {

    padding-left: 32px;
}



/* LIST ITEMS */

.roof-damage-right ul li {

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

    font-size: 16px;

    line-height: 1.5;

    color: #1f1f1f;
}


/* ===================================
   ROOF EMERGENCY SECTION
====================================== */

.roof-emergency-section {

    position: relative;

    width: 100%;

    min-height: 780px;

    background-image: url("../images/roof-maintenance-1.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    overflow: hidden;
}



/* DARK LEFT SIDE */

.roof-emergency-section::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 40%;

    height: 100%;

    background: #3a3a3a;

    z-index: 1;
}



/* WHITE BOX */

.roof-emergency-box {

    position: relative;

    z-index: 2;

    width: 610px;

    background: #ececec;

    border-left: 18px solid #ff4713;

    padding-top: 30px;

    padding-bottom: 45px;

    padding-left: 58px;

    padding-right: 58px;

    margin-left: 220px;

    margin-top: 80px;

    box-shadow: 0 0 22px rgba(0, 0, 0, 0.18);
}



/* TITLE */

.roof-emergency-box h2 {

    font-family: "Teko", sans-serif;

    font-size: 30px;

    font-weight: 500;

    line-height: 1.5;

    color: #1f1f1f;

    margin-bottom: 20px;

    text-transform: uppercase;
}



/* PARAGRAPHS */

.roof-emergency-box p {

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

    font-size: 16px;

    line-height: 1.5;

    color: #2b2b2b;

    margin-bottom: 25px;
}



/* BUTTON */

.roof-emergency-btn {

    display: inline-block;

    margin-top: 18px;

    background: #00ff2a;

    color: #111111;

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

    font-size: 16px;

    letter-spacing: 1.5px;

    text-decoration: none;

    padding: 15px 22px;

    transition: 0.3s ease;
}



/* HOVER + CLICK */

.roof-emergency-btn:hover,
.roof-emergency-btn:active {

    background: #ff4713;

    color: #ffffff;
}


/* ===================================
   ROOF MAINTENANCE BENEFITS SECTION
====================================== */

.roof-maintenance-benefits-section {

    position: relative;

    width: 100%;

    background-image: url("../images/roof-maintenance-11.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    padding-top: 80px;

    padding-bottom: 80px;

    overflow: hidden;
}



/* WHITE BOX */

.roof-maintenance-benefits-box {

    width: 72%;

    margin: 0 auto;

    background: #ececec;

    padding-top: 70px;

    padding-bottom: 70px;

    padding-left: 85px;

    padding-right: 85px;

    text-align: center;
}



/* MAIN TITLE */

.roof-maintenance-benefits-box h2 {

    font-family: "Teko", sans-serif;

    font-size: 28px;

    font-weight: 550;

    color: #1f1f1f;

    line-height: 1.3;

    margin-bottom: 35px;

    text-transform: uppercase;
}



/* TOP PARAGRAPHS */

.roof-maintenance-benefits-box > p {

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

    font-size: 16px;

    line-height: 1.3;

    color: #2a2a2a;

    margin-bottom: 20px;
}



/* BENEFIT ITEMS */

.roof-maintenance-benefit-item {

    margin-top: 60px;
}



/* ICONS */

.roof-maintenance-benefit-item img {

    width: 120px;

    height: 120px;

    object-fit: contain;

    margin-bottom: 35px;
}



/* BENEFIT TITLES */

.roof-maintenance-benefit-item h3 {

    font-family: "Teko", sans-serif;

    font-size: 22px;

    font-weight: 600;

    color: #1f1f1f;

    line-height: 1.3;

    margin-bottom: 20px;

    text-transform: uppercase;
}



/* BENEFIT PARAGRAPHS */

.roof-maintenance-benefit-item p {

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

    font-size: 16px;

    line-height: 1.5;

    color: #2a2a2a;

    margin-bottom: 22px;
}


/* ===================================
   ROOF REPAIR INFO SECTION
====================================== */

.roof-repair-info-section {

    position: relative;

    width: 100%;

    padding: 90px 0;

    background-image: url("../images/roof-maintenance-11.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    overflow: hidden;

    display: flex;

    justify-content: center;
}



/* WHITE BOX */

.roof-repair-info-box {

    position: relative;

    width: 100%;

    background: #e9e9e9;

    padding: 90px 240px;

    margin-top: -140px;

    box-sizing: border-box;
}


/* ORANGE LINE */

.roof-repair-orange-line {

    position: absolute;

    top: 80px;

    left: 200px;

    width: 16px;

    height: 78%;

    background: #ff4713;
}

/* CONTENT */

.roof-repair-info-content {

    width: 100%;
}



/* TITLE */

.roof-repair-info-content h2 {

    font-family: "Teko", sans-serif;

    font-size: 28px;

    font-weight: 600;

    line-height: 1;

    color: #1f1f1f;

    margin-bottom: 18px;

    text-transform: uppercase;
}



/* TEXT */

.roof-repair-info-content p {

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

    font-size: 16px;

    line-height: 1.5;

    color: #2b2b2b;

    margin-bottom: 18px;
}



/* LIST */

.roof-repair-info-content ul {

    margin-left: 35px;

    margin-bottom: 30px;
}

.roof-repair-info-content li {

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

    font-size: 16px;

    line-height: 1.5;

    color: #2b2b2b;
}


/* ===================================
   DO YOU REALLY NEED ROOF REPAIR
====================================== */

.roof-repair-needed-section {

    position: relative;

    width: 100%;

    background-image: url("../images/roof-maintenance-11.png");

    background-size: contain;

    background-position: center;

    background-repeat: repeat;

    padding: 90px 0;

    overflow: hidden;

    margin-top: -92px;
}



/* CONTENT */

.roof-repair-needed-content {

    position: relative;

    z-index: 2;

    width: 70%;

    margin: 0 auto;

    color: #ffffff;

    margin-top: -10px;
}



/* TITLE */

.roof-repair-needed-content h2 {

    font-family: "Teko", sans-serif;

    font-size: 32px;

    font-weight: 600;

    line-height: 1;

    text-align: center;

    color: #ff5a1f;

    margin-bottom: 25px;
}



/* PARAGRAPHS */

.roof-repair-needed-content p {

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

    font-size: 16px;

    line-height: 1.3;

    font-weight: 400;

    color: #ffffff;

    margin-bottom: 25px;
}



/* LIST */

.roof-repair-needed-content ul {

    margin-left: 45px;

    margin-bottom: 25px;
}

.roof-repair-needed-content li {

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

    font-size: 16px;

    line-height: 1.3;

    color: #ffffff;
}


/* ===================================
   WHY CHAMPION ROOFING SECTION
====================================== */

.roof-repair-company-section {

    position: relative;

    width: 100%;

    background: #00ff2a;

    padding: 90px 0;

    overflow: hidden;
}



/* CONTENT */

.roof-repair-company-content {

    width: 72%;

    margin: 0 auto;
}



/* TITLE */

.roof-repair-company-content h2 {

    font-family: "Teko", sans-serif;

    font-size: 28px;

    font-weight: 600;

    line-height: 1;

    color: #1b1b1b;

    text-align: center;

    margin-bottom: 25px;

    margin-top: -30px;
}



/* LIST */

.roof-repair-company-content ul {

    margin-left: 45px;

    margin-bottom: 25px;
}

.roof-repair-company-content li {

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

    font-size: 17px;

    line-height: 1.5;

    color: #1b1b1b;
}



/* PARAGRAPHS */

.roof-repair-company-content p {

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

    font-size: 17px;

    line-height: 1.5;

    color: #1b1b1b;

    margin-bottom: 25px;
}


/* ===================================
   EXPERT ROOF REPAIR SECTION
====================================== */

.expert-roof-repair-section {

    position: relative;

    width: 100%;

    min-height: 810px;

    background-image: url("../images/roof-maintenance.png");

    background-size: cover;

    background-position: left center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    overflow: hidden;
}



/* RIGHT DARK AREA */

.expert-roof-repair-right {

    position: absolute;

    top: 0;

    right: 0;

    width: 42%;

    height: 100%;

    background: #444444;
}



/* WHITE BOX */

.expert-roof-repair-box {

    position: relative;

    z-index: 2;

    width: 600px;

    background: #e9e9e9;

    padding: 50px 58px;

    margin-left: auto;

    margin-right: 240px;

    margin-top: 70px;

    border-left: 28px solid #ff5a1f;

    box-sizing: border-box;
}



/* TITLE */

.expert-roof-repair-box h2 {

    font-family: "Teko", sans-serif;

    font-size: 30px;

    font-weight: 550;

    line-height: 1.2;

    color: #1e1e1e;

    margin-bottom: 18px;
}



/* PARAGRAPHS */

.expert-roof-repair-box p {

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

    font-size: 17px;

    line-height: 1.5;

    color: #222222;

    margin-bottom: 18px;
}



/* BUTTON */

.expert-roof-repair-btn {

    display: inline-block;

    background: #00ff2a;

    color: #111111;

    text-decoration: none;

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

    font-size: 16px;

    letter-spacing: 1.5px;

    padding: 14px 22px;

    margin-top: 18px;

    transition: 0.3s ease;
}



/* HOVER */

.expert-roof-repair-btn:hover,
.expert-roof-repair-btn:active {

    background: #ff5a1f;

    color: #ffffff;
}


/* ===================================
   CONTACT CONSULTATION SECTION
====================================== */

.contact-consultation-section {

    position: relative;

    width: 100%;

    background-image: url("../images/map-bg.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    overflow: hidden;

    padding: 70px 0;
}



/* LIGHT OVERLAY */

.contact-consultation-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(255,255,255,0.05);

    z-index: 1;
}



/* CONTENT WRAPPER */

.contact-consultation-wrapper {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

    padding: 0 40px;
}



/* WHITE FORM BOX */

.contact-consultation-box {

    position: relative;

    width: 600px;

    background: #ececec;

    padding: 55px 55px 50px;

    box-shadow: 0 8px 24px rgba(0,0,0,0.22);

    animation: consultationFloat 4s ease-in-out infinite;
}


/* TITLE */

.contact-consultation-box h2 {

    font-size: 30px;

    line-height: 1.2;

    font-weight: 600;

    color: #222;

    margin-bottom: 35px;

    text-transform: uppercase;
}



/* LABELS */

.contact-consultation-box label {

    display: block;

    font-size: 15px;

    color: #333;

    margin-bottom: 10px;
}



/* REQUIRED */

.required-text {

    color: #ff5a1f;

    font-style: italic;
}



/* ROW */

.contact-form-row {

    display: flex;

    gap: 18px;

    margin-bottom: 28px;
}



/* INPUTS */

.contact-form-row input,
.contact-consultation-box textarea {

    width: 100%;

    background: #f5f5f5;

    border: 1px solid #d7d7d7;

    padding: 16px 18px;

    font-size: 15px;

    outline: none;
}



/* TEXTAREA */

.contact-consultation-box textarea {

    min-height: 230px;

    resize: none;

    margin-bottom: 28px;
}



/* CHECKBOX AREA */

.contact-checkbox-group {

    margin-bottom: 28px;
}



/* CHECKBOX ITEMS */

.contact-checkbox-group label {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;

    font-size: 15px;
}



/* SUBMIT BUTTON */

.contact-submit-btn {

    width: 100%;

    border: none;

    background: #ff5a1f;

    color: #ffffff;

    padding: 14px;

    font-size: 15px;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.3s ease;
}



/* HOVER */

.contact-submit-btn:hover,
.contact-submit-btn:active {

    background: #00ff2a;

    color: #111111;
}



/* ==============================
   EMERGENCY ROOF REPAIR HTML
================================= */

.emergency-roof-hero {

    position: relative;

    width: 100%;

    min-height: 980px;

    background-image:
        linear-gradient(
            rgba(0,0,0,0.45),
            rgba(0,0,0,0.45)
        ),
        url("../images/emergency-roof-repair-12.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    padding-top: 240px;
}



/* HERO CONTENT */

.emergency-roof-content {

    position: relative;

    z-index: 2;

    text-align: center;

    width: 100%;
}



.emergency-roof-content h1 {

    font-family: "Teko", sans-serif;

    font-size: 36px;

    line-height: 1;

    font-weight: 750;

    color: #ffffff;

    margin-bottom: 28px;

    text-transform: uppercase;

    letter-spacing: 2px;
}



.emergency-roof-content h2 {

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

    font-size: 25px;

    font-weight: 700;

    color: #ffffff;

    text-transform: uppercase;

    margin-bottom: 42px;

    letter-spacing: 1px;
}



/* BUTTON */

.emergency-roof-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 400px;

    height: 48px;

    background: #ff5a1f;

    color: #ffffff;

    text-decoration: none;

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

    font-size: 18px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    transition: 0.3s ease;
}



.emergency-roof-btn:hover,

.emergency-roof-btn:focus,

.emergency-roof-btn:active {

    background: #00ff2a;

    color: #111111;
}



/* =========================
   EMERGENCY ROOF REPAIR ICONS
========================= */

.emergency-roof-icons {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1450px;

    margin-top: 95px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 35px;

    flex-wrap: wrap;
}



/* EACH ICON */

.emergency-roof-icon {

    width: 165px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: transparent !important;
}



/* ICON IMAGE */

.emergency-roof-icon img {

    width: 90%;

    height: auto;

    display: block;

    object-fit: contain;

    opacity: 4;
}



/* ===================================
   EMERGENCY REPAIR CONTENT
====================================== */

.emergency-repair-content-section {

    position: relative;

    width: 100%;

    padding: 60px 120px;

    overflow: hidden;

    background-image: url("../images/champion-watermark.png");

    background-repeat: no-repeat;

    background-position: center;

    background-size: cover;
}



/* WRAPPER */

.emergency-repair-content-wrapper {

    position: relative;

    z-index: 2;

    max-width: 1500px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 120px;
}



/* LEFT SIDE */

.emergency-repair-left {

    display: flex;

    align-items: stretch;

    flex: 1;
}



/* VERTICAL LINE */

.emergency-repair-line {

    width: 8px;

    background: #5e5e5e;

    margin-right: 38px;
}



/* TEXT */

.emergency-repair-text h2 {

    font-size: 20px;

    line-height: 1.2;

    font-weight: 600;

    text-transform: uppercase;

    color: #ff5a1f;

    margin-bottom: 18px;

    max-width: 920px;
}



.emergency-repair-text p {

    font-size: 16px;

    line-height: 1.5;

    color: #707070;

    margin-bottom: 18px;

    max-width: 980px;
}



/* RIGHT SIDE */

.emergency-repair-right {

    position: relative;

    width: 320px;

    height: 320px;

    flex-shrink: 0;

    margin-left: -80px;
}



/* IMAGE */

.emergency-repair-right img {

    position: relative;

    z-index: 2;

    width: 100%;

    height: 100%;

    object-fit: cover;

    box-shadow: 0 10px 35px rgba(0,0,0,0.18);

    display: block;
}


/* ===================================
   EMERGENCY REPAIR CTA SECTION
=================================== */

.emergency-repair-cta-section {

    position: relative;

    width: 100%;

    min-height: 680px;

    overflow: hidden;

    display: flex;

    justify-content: flex-end;

    align-items: center;

    padding-right: 240px;

    background-image: url("../images/emergency-roof-repair-19.png");

    background-size: cover;

    background-position: 60% center;

    background-repeat: no-repeat;

    background-attachment: fixed;
}


/* WHITE BOX */

.emergency-repair-cta-box {

    position: relative;

    z-index: 3;

    width: 600px;

    background: #f2f2f2;

    padding: 65px 60px;

    box-sizing: border-box;

    border-left: 28px solid #ff5a1f;

    box-shadow: 0 10px 35px rgba(0,0,0,0.18);
}



/* TEXT */

.emergency-repair-cta-box p {

    font-size: 16px;

    line-height: 1.2;

    color: #2f2f2f;

    margin-bottom: 22px;
}



/* BOLD TEXT */

.emergency-repair-cta-box h3 {

    font-size: 18px;

    line-height: 1.5;

    font-weight: 600;

    color: #1f1f1f;

    text-transform: uppercase;

    margin-top: 10px;

    margin-bottom: 22px;
}



/* BUTTON */

.emergency-repair-cta-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 380px;

    height: 42px;

    background: #00ff2a;

    color: #000000;

    text-decoration: none;

    font-size: 16px;

    letter-spacing: 1.2px;

    font-weight: 500;

    transition: all 0.3s ease;
}



/* HOVER + CLICK */

.emergency-repair-cta-btn:hover,
.emergency-repair-cta-btn:active {

    background: #ff5a1f;

    color: #ffffff;
}



/* ===================================
   COMMON CAUSES SECTION
=================================== */

.emergency-common-causes-section {

    position: relative;

    width: 100%;

    min-height: 620px;

    display: flex;

    align-items: center;

    padding-left: 240px;

    overflow: hidden;

    background-image: url("../images/emergency-roof-repair-20.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;
}



/* WHITE BOX */

.emergency-common-causes-box {

    position: relative;

    width: 580px;

    background: #f3f3f3;

    padding: 30px 48px;

    border-left: 28px solid #ff5a1f;

    box-shadow: 0 12px 35px rgba(0,0,0,0.18);

    z-index: 2;
}



/* TITLE */

.emergency-common-causes-box h2 {

    font-size: 20px;

    line-height: 1.2;

    font-weight: 700;

    text-transform: uppercase;

    color: #ff5a1f;

    margin-bottom:18px;
}



/* LIST */

.emergency-common-causes-box ul {

    padding-left: 28px;

    margin-bottom: 28px;
}



.emergency-common-causes-box li {

    font-size: 16px;

    line-height: 1.2;

    color: #2f2f2f;

    margin-bottom: 10px;
}



/* PARAGRAPH */

.emergency-common-causes-box p {

    font-size: 16px;

    line-height: 1.2;

    color: #2f2f2f;

    margin-bottom: 25px;
}



/* BUTTON */

.emergency-common-causes-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 295px;

    height: 55px;

    background: #00ff2a;

    color: #000000;

    text-decoration: none;

    font-size: 16px;

    letter-spacing: 1.2px;

    font-weight: 500;

    transition: all 0.3s ease;
}



/* HOVER + CLICK */

.emergency-common-causes-btn:hover,
.emergency-common-causes-btn:active {

    background: #ff5a1f;

    color: #ffffff;
}



/* ===================================
   ROOF EMERGENCY TIPS SECTION
=================================== */

.roof-emergency-tips-section {

    position: relative;

    width: 100%;

    background-image: url("../images/roof-maintenance-11.png");

    background-size: cover;

    background-position: center -40px;

    background-repeat: repeat;

    overflow: hidden;

    padding-bottom: 140px;
}




/* MAIN WHITE BOX */

.roof-emergency-tips-box {

    width: 72%;

    margin: 0 auto;

    background: #f3f3f3;

    padding: 75px 120px;

     position: relative;

    top: 80px;
}



/* TITLE */

.roof-emergency-tips-box h2 {

    font-size: 28px;

    line-height: 1.2;

    font-weight: 600;

    text-transform: uppercase;

    color: #1f1f1f;

    text-align: center;

    margin-bottom: 20px;
}



/* INTRO */

.roof-emergency-intro {

    font-size: 18px;

    line-height: 1.3;

    color: #2e2e2e;

    text-align: center;

    margin-bottom: 20px;
}



/* EACH ITEM */

.roof-emergency-tip-item {

    text-align: center;

    margin-bottom: 20px;
}



.roof-emergency-tip-item:last-child {

    margin-bottom: 0;
}



/* ICON */

.roof-emergency-tip-icon {

    width: 120px;

    height: 120px;

    margin: 0 auto 36px;

    display: flex;

    justify-content: center;

    align-items: center;
}



.roof-emergency-tip-icon img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;
}



/* HEADINGS */

.roof-emergency-tip-item h3 {

    font-size: 18px;

    line-height: 1.3;

    font-weight: 600;

    text-transform: uppercase;

    color: #1f1f1f;

    margin-bottom: 18px;
}



/* TEXT */

.roof-emergency-tip-item p {

    max-width: 1200px;

    margin: 0 auto;

    font-size: 16px;

    line-height: 1.3;

    color: #2e2e2e;
}


/* ===================================
   SPEEDY STORM DAMAGE ROOF REPAIR
=================================== */

.speedy-storm-repair-section {

    position: relative;

    width: 100%;

    min-height: 600px;

    background-image: url("../images/emergency-roof-repair-25.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    overflow: hidden;

    display: flex;

    justify-content: flex-end;

    align-items: center;

    padding-right: 320px;
}



/* WHITE BOX */

.speedy-storm-repair-box {

    position: relative;

    width: 610px;

    background: #f3f3f3;

    padding: 20px 32px;

    border-left: 28px solid #ff5a1f;

    box-shadow: 0 10px 35px rgba(0,0,0,0.18);

    box-sizing: border-box;
}



/* TITLE */

.speedy-storm-repair-box h2 {

    font-size: 25px;

    line-height: 1.3;

    font-weight: 600;

    text-transform: uppercase;

    color: #ff5a1f;

    margin-bottom: 18px;
}



/* TEXT */

.speedy-storm-repair-box p {

    font-size: 16px;

    line-height: 1.5;

    color: #2f2f2f;

    margin-bottom: 18px;
}



/* BUTTON */

.speedy-storm-repair-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 330px;

    height: 42px;

    background: #00ff2a;

    color: #000000;

    text-decoration: none;

    font-size: 14px;

    letter-spacing: 1.3px;

    font-weight: 500;

    transition: all 0.3s ease;
}



.speedy-storm-repair-btn:hover,
.speedy-storm-repair-btn:active {

    background: #ff5a1f;

    color: #ffffff;
}



/* ===================================
   LOCAL ROOF EMERGENCY EXPERT SECTION
=================================== */

.local-emergency-expert-section {

    position: relative;

    width: 100%;

    min-height: 900px;

    background-image: url("../images/emergency-roof-repair-26.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    padding-left: 250px;
}



/* WHITE BOX */

.local-emergency-expert-box {

    position: relative;

    width: 600px;

    background: #f3f3f3;

    padding: 40px 48px;

    border-left: 28px solid #ff5a1f;

    box-shadow: 0 10px 35px rgba(0,0,0,0.18);

    box-sizing: border-box;
}



/* TITLE */

.local-emergency-expert-box h2 {

    font-size: 30px;

    line-height: 1.15;

    font-weight: 500;

    text-transform: uppercase;

    color: #ff5a1f;

    margin-bottom: 18px;
}



/* PARAGRAPHS */

.local-emergency-expert-box p {

    font-size: 16px;

    line-height: 1.3;

    color: #2f2f2f;

    margin-bottom: 18px;
}



.local-emergency-expert-box strong {

    font-weight: 700;
}



/* BUTTON */

.local-emergency-expert-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 360px;

    height: 42px;

    background: #00ff2a;

    color: #000000;

    text-decoration: none;

    font-size: 16px;

    letter-spacing: 1.3px;

    font-weight: 500;

    margin-top: 18px;

    transition: all 0.3s ease;
}



/* HOVER + CLICK */

.local-emergency-expert-btn:hover,
.local-emergency-expert-btn:active {

    background: #ff5a1f;

    color: #ffffff;
}


 /* ===================================
   ROOF ASSOCIATION SECTION
=================================== */

.roof-association-section {

    position: relative;

    width: 100%;

    background-image: url("../images/champion-watermark.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    padding: 90px 40px 90px;

    border-bottom: 12px solid #ff5a1f;

    overflow: hidden;
}



/* CONTENT */

.roof-association-content {

    max-width: 1650px;

    margin: 0 auto;

    text-align: center;
}



/* TEXT */

.roof-association-content p {

    max-width: 1000px;

    margin: 0 auto 42px;

    font-size: 16px;

    line-height: 1.4;

    color: #2f2f2f;

    text-align: center;
}



/* BOLD */

.roof-association-content strong {

    font-weight: 700;

    color: #1f1f1f;
}



/* BUTTON */

.roof-association-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 360px;

    height: 42px;

    background: #00ff2a;

    color: #111;

    font-size: 14px;

    letter-spacing: 1.3px;

    text-transform: uppercase;

    text-decoration: none;

    transition: 0.3s ease;
}



.roof-association-btn:hover {

    background: #ff5a1f;

    color: #fff;
}



/* =========================
   ROOF VENT HERO SECTION HTML
========================= */

.roof-vent-hero {

    position: relative;

    width: 100%;

    min-height: 620px;

    background-image: url("../images/roof-vent-hero.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    overflow: hidden;
}



/* DARK OVERLAY */

.roof-vent-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.42);

    z-index: 1;
}



/* CONTENT */

.roof-vent-content {

    position: relative;

    z-index: 2;

    max-width: 1500px;

    padding: 0 20px;

    margin-top: 60px;
}



/* TITLE */

.roof-vent-content h1 {

    font-family: "Teko", sans-serif;

    font-size: 50px;

    font-weight: 700;

    line-height: 1;

    color: #ffffff;

    text-transform: uppercase;

    margin-bottom: 20px;

    letter-spacing: 0.5px;
}



/* SUBTITLE */

.roof-vent-content p {

    font-size: 25px;

    font-weight: 600;

    color: #ffffff;

    text-transform: uppercase;

    line-height: 1.4;

    margin-bottom: 45px;

    letter-spacing: 1px;
}



/* BUTTON WRAPPER */

.roof-vent-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 28px;

    flex-wrap: wrap;
}



/* BUTTONS */

.roof-vent-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    background: #ff5a1f;

    color: #ffffff;

    text-decoration: none;

    padding: 15px 36px;

    font-size: 16px;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    transition: all 0.3s ease;

    border: 2px solid #ff5a1f;
}



/* HOVER + CLICK */

.roof-vent-btn:hover,
.roof-vent-btn:focus,
.roof-vent-btn:active {

    background: #00c853;

    border-color: #00c853;

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 1200px) {

    .roof-vent-content h1 {

        font-size: 80px;
    }

    .roof-vent-content p {

        font-size: 16px;
    }
}



@media (max-width: 768px) {

    .roof-vent-hero {

        min-height: 760px;
    }

    .roof-vent-content h1 {

        font-size: 54px;
    }

    .roof-vent-content p {

        font-size: 20px;
    }

    .roof-vent-btn {

        width: 100%;

        max-width: 650px;

        font-size: 16px;

        padding: 18px 20px;
    }
}


/* =========================
   GREEN SERVICE ROOF VENT
========================= */

.roof-vent-service-area {

    position: relative;

    width: 100%;

    background: #00ff38;

    padding: 48px 25px;

    margin-top: 0px;

    z-index: 10;

    display: flex;

    justify-content: center;

    align-items: center;
}



/* CONTENT */

.roof-vent-service-overlay {

    width: 100%;

    max-width: 1800px;

    margin: 0 auto;
}



/* TEXT */

.roof-vent-service-overlay h2 {

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

    font-size: 30px;

    font-weight: 600;

    line-height: 1.2;

    text-align: center;

    text-transform: uppercase;

    color: #111111;

    letter-spacing: 0.5px;

    margin: 0 auto;

    max-width: 1700px;
}



/* RESPONSIVE */

@media (max-width: 1200px) {

    .roof-vent-service-overlay h2 {

        font-size: 28px;
    }
}



@media (max-width: 768px) {

    .roof-vent-service-area {

        padding: 35px 20px;

        margin-top: -120px;
    }

    .roof-vent-service-overlay h2 {

        font-size: 20px;

        line-height: 1.5;
    }
}


/* =========================
   ROOF VENT ICONS SECTION
========================= */

.roof-vent-icons-section {

    width: 100%;

    background: #f3f3f3;

    padding: 90px 40px;

    display: flex;

    justify-content: center;

    align-items: center;
}



/* CONTAINER */

.roof-vent-icons-container {

    width: 100%;

    max-width: 1500px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 35px;

    flex-wrap: wrap;
}



/* ICON BOX */

.roof-vent-icon-box {

    display: flex;

    justify-content: center;

    align-items: center;
}



/* ICON IMAGE */

.roof-vent-icon-box img {

    width: 140px;

    height: auto;

    opacity: 0.95;

    transition: all 0.3s ease;
}



/* HOVER */

.roof-vent-icon-box img:hover {

    opacity: 1;
}



/* RESPONSIVE */

@media (max-width: 1200px) {

    .roof-vent-icons-container {

        gap: 45px;
    }

    .roof-vent-icon-box img {

        width: 150px;
    }
}



@media (max-width: 768px) {

    .roof-vent-icons-section {

        padding: 60px 20px;
    }

    .roof-vent-icons-container {

        gap: 30px;
    }

    .roof-vent-icon-box img {

        width: 120px;
    }
}



/* =========================
   ROOF VENT INFO SECTION
========================= */

.roof-vent-info-section {

    width: 100%;

    background: #222222;

    padding: 90px 40px;

    display: flex;

    justify-content: center;

    align-items: center;
}



/* CONTAINER */

.roof-vent-info-container {

    width: 100%;

    max-width: 1400px;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 90px;

    flex-wrap: wrap;
}



/* LEFT CONTENT */

.roof-vent-info-content {

    flex: 1;

    min-width: 320px;

    max-width: 620px;

    margin-left: auto;

    padding-left: 190px;
}



/* TITLE */

.roof-vent-info-content h2 {

    font-family: "Teko", sans-serif;

    font-size: 28px;

    font-weight: 500;

    line-height: 1.2;

    text-transform: uppercase;

    color: #ff5a1f;

    margin-bottom: 18px;
}



/* PARAGRAPHS */

.roof-vent-info-content p {

    font-size: 16px;

    line-height: 1.2;

    color: #ffffff;

    margin-bottom: 18px;
}



/* BUTTON */

.roof-vent-connect-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    background: #00ff38;

    color: #111111;

    text-decoration: none;

    padding: 14px 32px;

    font-size: 16px;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 1.3px;

    transition: all 0.3s ease;

    border: 2px solid #00ff38;

    margin-top: 20px;
}



/* HOVER + CLICK */

.roof-vent-connect-btn:hover,
.roof-vent-connect-btn:focus,
.roof-vent-connect-btn:active {

    background: #ff5a1f;

    border-color: #ff5a1f;

    color: #ffffff;
}



/* RIGHT IMAGE */

.roof-vent-info-image {

    flex: 1;

    min-width: 220px;

    display: flex;

    justify-content: flex-start;

    align-items: center;
}



/* IMAGE */

.roof-vent-info-image img {

    width: 100%;

    max-width: 520px;

    height: auto;

    display: block;
}



/* RESPONSIVE */

@media (max-width: 1200px) {

    .roof-vent-info-content h2 {

        font-size: 34px;
    }
}



@media (max-width: 768px) {

    .roof-vent-info-section {

        padding: 70px 20px;
    }

    .roof-vent-info-container {

        gap: 50px;
    }

    .roof-vent-info-content h2 {

        font-size: 16px;
    }

    .roof-vent-info-content p {

        font-size: 16px;
    }

    .roof-vent-connect-btn {

        width: 100%;
    }
}


/* =========================
   ROOF VENT ORANGE SECTION
========================= */

.roof-vent-orange-section {

    width: 100%;

    background: #ff5a1f;

    padding: 90px 30px;

    display: flex;

    justify-content: center;

    align-items: center;
}



/* CONTAINER */

.roof-vent-orange-container {

    width: 100%;

    max-width: 1050px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 80px;

    flex-wrap: wrap;
}



/* LEFT IMAGE */

.roof-vent-orange-image {

    flex: 1;

    min-width: 220px;

    display: flex;

    justify-content: flex-end;

    align-items: center;
}



/* IMAGE */

.roof-vent-orange-image img {

    width: 100%;

    max-width: 520px;

    height: auto;

    display: block;
}



/* RIGHT CONTENT */

.roof-vent-orange-content {

    flex: 1;

    min-width: 320px;

    max-width: 600px;
}



/* TITLE */

.roof-vent-orange-content h2 {

    font-family: "Teko", sans-serif;

    font-size: 25px;

    font-weight: 550;

    line-height: 1.75;

    text-transform: uppercase;

    color: #ffffff;

    margin: 0;
}



/* RESPONSIVE */

@media (max-width: 1200px) {

    .roof-vent-orange-content h2 {

        font-size: 54px;
    }
}



@media (max-width: 768px) {

    .roof-vent-orange-section {

        padding: 70px 20px;
    }

    .roof-vent-orange-container {

        gap: 50px;
    }

    .roof-vent-orange-content h2 {

        font-size: 40px;

        text-align: center;
    }

    .roof-vent-orange-image {

        justify-content: center;
    }
}



/* =========================
   ROOF VENT TYPES SECTION
========================= */

.roof-vent-types-section {

    position: relative;

    width: 100%;

    background-image: url("../images/bg-3.jpg");

    background-size: auto;

    background-repeat: repeat;

    background-position: center;

    background-attachment: fixed;

    padding: 90px 30px;
}



/* WHITE CONTAINER */

.roof-vent-types-overlay {

    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

    background: #f2f2f2;

    padding: 90px 90px;
}



/* CONTENT CONTAINER */

.roof-vent-types-container {

    width: 100%;

    text-align: center;
}



/* TITLE */

.roof-vent-types-container h2 {

    font-family: "Teko", sans-serif;

    font-size: 34px;

    font-weight: 550;

    color: #222222;

    margin-bottom: 22px;

    text-transform: uppercase;
}



/* TOP TEXT */

.roof-vent-top-text {

    font-size: 16px;

    line-height: 1.3;

    color: #333333;

    max-width: 1200px;

    margin: 0 auto 28px auto;
}



/* TYPE BOX */

.roof-vent-type-box {

    margin-top: 40px;
}



/* ICON */

.roof-vent-type-box img {

    width: 140px;

    height: auto;

    display: block;

    margin: 0 auto 35px auto;
}



/* HEADINGS */

.roof-vent-type-box h3 {

    font-family: "Teko", sans-serif;

    font-size: 20px;

    font-weight: 550;

    color: #222222;

    margin-bottom: 18px;

    text-transform: uppercase;
}



/* PARAGRAPHS */

.roof-vent-type-box p {

    font-size: 16px;

    line-height: 1.3;

    color: #333333;

    max-width: 1250px;

    margin: 0 auto 22px auto;
}



/* RESPONSIVE */

@media (max-width: 1200px) {

    .roof-vent-types-overlay {

        padding: 70px 50px;
    }

    .roof-vent-types-container h2 {

        font-size: 52px;
    }

    .roof-vent-type-box h3 {

        font-size: 42px;
    }
}



@media (max-width: 768px) {

    .roof-vent-types-section {

        padding: 50px 15px;
    }

    .roof-vent-types-overlay {

        padding: 50px 25px;
    }

    .roof-vent-types-container h2 {

        font-size: 38px;
    }

    .roof-vent-top-text,
    .roof-vent-type-box p {

        font-size: 17px;
    }

    .roof-vent-type-box img {

        width: 120px;
    }

    .roof-vent-type-box h3 {

        font-size: 34px;
    }
}


/* =========================
   ROOF VENT LONG LASTING SECTION
========================= */

.roof-vent-long-lasting-section {

    width: 100%;

    background: #f2f2f2;

    padding: 90px 40px;
}



/* CONTAINER */

.roof-vent-long-lasting-container {

    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

    display: flex;

    align-items: flex-start;

    gap: 45px;
}



/* ORANGE LINE */

.roof-vent-long-lasting-line {

    width: 28px;

    min-width: 28px;

    height: 360px;

    background: #ff5a1f;
}



/* TITLE */

.roof-vent-long-lasting-content h2 {

    font-family: "Teko", sans-serif;

    font-size: 28px;

    font-weight: 600;

    line-height: 1.2;

    text-transform: uppercase;

    color: #222222;

    margin-bottom: 20px;

}



/* PARAGRAPHS */

.roof-vent-long-lasting-content p {

    font-size: 17px;

    line-height: 1.3;

    color: #333333;

    margin-bottom: 20px;

    max-width: 1450px;
}



/* BUTTON */

.roof-vent-long-lasting-btn {

    display: flex;

    justify-content: center;

    align-items: center;

    background: #ff5a1f;

    color: #ffffff;

    text-decoration: none;

    padding: 13px 25px;

    font-size: 16px;

    font-weight: 500;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    border: 2px solid #ff5a1f;

    transition: all 0.3s ease;

    margin-top: 50px;

    width: fit-content;

  margin-left: auto;

  margin-right: auto;
}



/* HOVER + CLICK */

.roof-vent-long-lasting-btn:hover,
.roof-vent-long-lasting-btn:focus,
.roof-vent-long-lasting-btn:active {

    background: #00ff38;

    border-color: #00ff38;

    color: #111111;
}



/* RESPONSIVE */

@media (max-width: 1200px) {

    .roof-vent-long-lasting-content h2 {

        font-size: 32px;
    }
}



@media (max-width: 768px) {

    .roof-vent-long-lasting-section {

        padding: 60px 20px;
    }

    .roof-vent-long-lasting-container {

        gap: 25px;
    }

    .roof-vent-long-lasting-line {

        width: 18px;

        min-width: 18px;

        height: 380px;
    }

    .roof-vent-long-lasting-content h2 {

        font-size: 25px;
    }

    .roof-vent-long-lasting-content p {

        font-size: 17px;
    }

    .roof-vent-long-lasting-btn {

        width: 100%;
    }
}



/* =========================
   HAIL DAMAGE HERO SECTION HTML
========================= */

.hail-damage-hero {

    position: relative;

    width: 100%;

    min-height: 720px;

    background-image: url("../images/hail-damage-hero.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    overflow: hidden;
}



/* DARK OVERLAY */

.hail-damage-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.45);

    z-index: 1;
}



/* CONTENT */

.hail-damage-content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1400px;

    padding: 0 30px;

    margin-top: 80px;
}



/* TITLE */

.hail-damage-content h1 {

    font-family: "Teko", sans-serif;

    font-size: 35px;

    font-weight: 700;

    line-height: 1;

    text-transform: uppercase;

    color: #ffffff;

    margin-bottom: 20px;
}



/* SUBTITLE */

.hail-damage-content p {

    font-size: 22px;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

    color: #ffffff;

    margin-bottom: 45px;
}



/* BUTTON WRAP */

.hail-damage-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 35px;

    flex-wrap: wrap;
}



/* BUTTONS */

.hail-damage-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    background: #ff5a1f;

    color: #ffffff;

    text-decoration: none;

    padding: 12px 22px;

    font-size: 16px;

    font-weight: 500;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    border: 2px solid #ff5a1f;

    transition: all 0.3s ease;
}



/* HOVER + CLICK */

.hail-damage-btn:hover,
.hail-damage-btn:focus,
.hail-damage-btn:active {

    background: #00ff38;

    border-color: #00ff38;

    color: #111111;
}



/* ========================================
   GREEN SERVICE BAR FOR HAIL DAMAGE REPAIR
=========================================== */

.hail-damage-service-bar {

    width: 100%;

    background: #00ff2a;

    padding: 55px 20px;

    text-align: center;

    position: relative;

}



/* TEXT */

.hail-damage-service-bar h2 {

    font-family: "Teko", sans-serif;

    font-size: 28px;

    font-weight: 600;

    line-height: 1.2;

    text-transform: uppercase;

    color: #222222;

    max-width: 1600px;

    margin: 0 auto;
}



/* =========================
   HAIL DAMAGE ICONS SECTION
========================= */

.hail-damage-icons-section {

    position: relative;

    width: 100%;

    background-image: url("../images/hail-damage-hero.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    padding: 50px 20px;
}



/* DARK OVERLAY */

.hail-damage-icons-section::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.40);

    z-index: 1;
}



/* ICON CONTAINER */

.hail-damage-icons-container {

    position: relative;

    z-index: 2;

    width: 90%;

    max-width: 1500px;

    margin: 0 auto;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 35px;

    flex-wrap: wrap;
}



/* ICONS */

.hail-damage-icons-container img {

    width: 150px;

    height: auto;

    opacity: 0.95;

    transition: none;

    transform: none;
}



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

@media (max-width: 1200px) {

    .hail-damage-content h1 {

        font-size: 72px;
    }

    .hail-damage-service-bar h2 {

        font-size: 42px;
    }
}



@media (max-width: 768px) {

    .hail-damage-hero {

        min-height: 620px;
    }

    .hail-damage-content h1 {

        font-size: 52px;
    }

    .hail-damage-content p {

        font-size: 24px;
    }

    .hail-damage-btn {

        width: 100%;
    }

    .hail-damage-service-bar h2 {

        font-size: 34px;
    }

    .hail-damage-icons-container img {

        width: 120px;
    }
}



/* =========================
   HAIL DAMAGE ROOF REPAIR SECTION
========================= */

.hail-damage-roof-repair-section {

    position: relative;

    width: 100%;

    background: #1f1f1f;

    padding: 90px 0;

    overflow: hidden;
}



/* CONTAINER */

.hail-damage-roof-repair-container {

    width: 88%;

    max-width: 1150px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 90px;

    margin-right: 120px;
}



/* LEFT CONTENT */

.hail-damage-roof-repair-content {

    width: 42%;

    padding-top: 85px;
}



/* TITLE */

.hail-damage-roof-repair-content h2 {

    font-family: "Teko", sans-serif;

    font-size: 32px;

    line-height: 1.3;

    font-weight: 550;

    color: #ff5a1f;

    margin-bottom: 25px;

    text-transform: uppercase;
}



/* TEXT */

.hail-damage-roof-repair-content p {

    font-size: 16px;

    line-height: 1.3;

    color: #ffffff;

    margin-bottom: 25px;

    font-weight: 400;
}



/* BUTTON */

.hail-damage-roof-repair-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 220px;

    height: 45px;

    background: #00ff38;

    color: #000000;

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    font-size: 15px;

    font-weight: 500;

    transition: all 0.3s ease;
}



/* BUTTON HOVER */

.hail-damage-roof-repair-btn:hover,
.hail-damage-roof-repair-btn:active {

    background: #ff5a1f;

    color: #ffffff;
}



/* RIGHT GALLERY */

.hail-damage-roof-repair-gallery {

    width: 50%;

    background: #e9e9e9;

    padding: 32px;

    display: grid;

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

    gap: 22px;

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

    margin-left: -130px;

    margin-top: -110px;
}



/* IMAGES */

.hail-damage-roof-repair-gallery img {

    width: 100%;

    height: 155px;

    object-fit: cover;

    display: block;
}


/* =========================
   HAIL DAMAGE REPAIR CONTENT
========================= */

.hail-services-section {

    position: relative;

    width: 100%;

    background: #ff4b17;

    padding: 70px 90px;

    overflow: hidden;
}



/* CONTENT WRAPPER */

.hail-services-content {

    max-width: 700px;

    margin-left: auto;

    margin-right: -80px;
}



/* TITLE */

.hail-services-content h2 {

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

    font-size: 30px;

    font-weight: 600;

    line-height: 1.35;

    color: #ffffff;

    text-transform: uppercase;

    margin-bottom: 18px;

    max-width: 850px;
}



/* LIST */

.hail-services-content ul {

    padding-left: 38px;

}



/* LIST ITEMS */

.hail-services-content ul li {

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

    font-size: 16px;

    line-height: 1.3;

    color: #111111;

    margin-bottom: 18px;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .hail-services-section {

        padding: 80px 35px;
    }

    .hail-services-content {

        margin: 0 auto;
    }

    .hail-services-content h2 {

        font-size: 42px;
    }

    .hail-services-content ul li {

        font-size: 18px;
    }
}




/* =========================
   HAIL MATERIALS SECTION
========================= */

.hail-materials-section {

    position: relative;

    width: 100%;

    padding: 80px 0;

    background-image: url("../images/mixed-black-background.png");

    background-size: contain;

    background-position: center;

    background-repeat: repeat;

    background-attachment: fixed;

    overflow: hidden;
}



/* CONTAINER */

.hail-materials-container {

    width: 72%;

    margin: 0 auto;

    background: #ebebeb;

    padding: 75px 95px;
}



/* =========================
   TOP INTRO
========================= */

.hail-material-intro {

    text-align: left;

    margin-bottom: 80px;

    margin-left: 35px;
}



/* TOP TITLE */

.hail-material-intro h2 {

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

    font-size: 25px;

    font-weight: 600;

    line-height: 1.3;

    color: #222222;

    text-transform: uppercase;

    margin-bottom: 18px;
}



/* TOP TEXT */

.hail-material-intro p {

    max-width: 1250px;

    margin-top: 0;

    margin-bottom: 18px;

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

    font-size: 16px;

    font-weight: 400;

    line-height: 1.3;

    color: #2f2f2f;
}

.hail-material-intro p:last-child {

    margin-bottom: 0;
}



/* =========================
   BLOCK
========================= */

.hail-material-block {

    text-align: center;

    margin-bottom: 85px;
}

.hail-material-block:last-child {

    margin-bottom: 0;
}



/* ICON */

.hail-material-icon {

    width: 100%;

    text-align: center;

    margin-bottom: 15px;
}

.hail-material-icon img {

    width: 110px;

    height: 110px;

    object-fit: contain;

    display: inline-block;

    margin-top: -50px;
}



/* BLOCK TITLE */

.hail-material-block h3 {

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

    font-size: 18px;

    font-weight: 600;

    line-height: 1.3;

    color: #222222;

    text-transform: uppercase;

    margin-top: -5px;

    margin-bottom: 18px;
}



/* BLOCK TEXT */

.hail-material-block p {

    max-width: 1180px;

    margin-left: auto;

    margin-right: auto;

    margin-top: 0;

    margin-bottom: 18px;

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

    font-size: 16px;

    font-weight: 400;

    line-height: 1.3;

    color: #2f2f2f;
}

.hail-material-block p:last-child {

    margin-bottom: 0;
}



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

@media (max-width: 991px) {

    .hail-materials-section {

        padding: 55px 0;
    }

    .hail-materials-container {

        width: 92%;

        padding: 55px 35px;
    }

    .hail-material-intro {

        margin-left: 0;
    }

    .hail-material-intro h2 {

        font-size: 28px;
    }

    .hail-material-intro p {

        font-size: 17px;

        line-height: 1.5;
    }

    .hail-material-block {

        margin-bottom: 65px;
    }

    .hail-material-block h3 {

        font-size: 28px;
    }

    .hail-material-block p {

        font-size: 17px;

        line-height: 1.5;
    }

    .hail-material-icon img {

        width: 95px;

        height: 95px;
    }
}



/* =========================
   HAIL SPECIALISTS SECTION
========================= */

.hail-specialists-section {

    position: relative;

    width: 100%;

    background: #00ff1e;

    padding-top: 45px;

    padding-bottom: 20px;

    overflow: hidden;
}




/* CONTENT */

.hail-specialists-content {

    width: 75%;

    margin: 0 auto;
}



/* TITLE */

.hail-specialists-content h2 {

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

    font-size: 30px;

    font-weight: 600;

    line-height: 1.3;

    text-transform: uppercase;

    color: #222222;

    margin-bottom: 10px;
}



/* TEXT */

.hail-specialists-content p {

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

    font-size: 16px;

    font-weight: 400;

    line-height: 1.5;

    color: #1f1f1f;

    margin-bottom: 10px;

    max-width: 1180px;
}



/* LIST */

.hail-specialists-content ul {

    padding-left: 32px;

    margin-bottom: 5px;
}

.hail-specialists-content ul li {

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

    font-size: 16px;

    line-height: 1.5;

    color: #1f1f1f;

    margin-bottom: 10px;
}



/* BUTTON */

.hail-specialists-btn {

    display: table;

    margin: 0 auto;

    margin-top: 28px;

    padding: 14px 22px;

    background: #ff5a1f;

    color: #ffffff;

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

    font-size: 16px;

    font-weight: 500;

    letter-spacing: 1.3px;

    text-decoration: none;

    text-transform: uppercase;

    transition: 0.3s ease;
}



/* BUTTON HOVER */

.hail-specialists-btn:hover,
.hail-specialists-btn:focus,
.hail-specialists-btn:active {

    background: #00c61b; /* green on hover/click */

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .hail-specialists-section {

        padding: 60px 0;
    }

    .hail-specialists-content {

        width: 90%;
    }

    .hail-specialists-content h2 {

        font-size: 36px;
    }

    .hail-specialists-content p,
    .hail-specialists-content ul li {

        font-size: 17px;
    }

    .hail-specialists-btn {

        padding: 18px 34px;

        font-size: 15px;
    }
}



/* =========================
   HAIL PREVALENCE SECTION
========================= */

.hail-prevalence-section {

    position: relative;

    width: 100%;

    padding: 95px 0;

    background-image: url("../images/mixed-black-background.png");

    background-size: contain;

    background-position: center;

    background-repeat: repeat;

    background-attachment: fixed;

    overflow: hidden;
}



/* CONTENT */

.hail-prevalence-content {

    width: 72%;

    margin: 0 auto;

    text-align: center;
}



/* TITLE */

.hail-prevalence-content h2 {

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

    font-size: 30px;

    font-weight: 700;

    line-height: 1.2;

    text-transform: uppercase;

    color: #ff5a1f;

    margin-bottom: 30px;
}



/* TEXT */

.hail-prevalence-content p {

    max-width: 1350px;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 30px;

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

    font-size: 18px;

    font-weight: 400;

    line-height: 1.3;

    color: #f1f1f1;

    text-align: left;
}



/* BUTTON */

.hail-prevalence-btn {

    display: inline-block;

    margin-top: 18px;

    padding: 18px 15px;

    background: #00ff1e;

    color: #1d1d1d;

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

    font-size: 16px;

    font-weight: 500;

    letter-spacing: 1.3px;

    text-decoration: none;

    text-transform: uppercase;

    transition: 0.3s ease;
}



/* BUTTON HOVER */

.hail-prevalence-btn:hover,
.hail-prevalence-btn:focus,
.hail-prevalence-btn:active {

    background: #ff5a1f;

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .hail-prevalence-section {

        padding: 70px 0;
    }

    .hail-prevalence-content {

        width: 90%;
    }

    .hail-prevalence-content h2 {

        font-size: 38px;
    }

    .hail-prevalence-content p {

        font-size: 17px;

        line-height: 1.6;
    }

    .hail-prevalence-btn {

        padding: 20px 34px;

        font-size: 15px;
    }
}



/* =========================
   HAIL INSURANCE SECTION
========================= */

.hail-insurance-section {

    position: relative;

    width: 100%;

    background: #ececec;

    padding: 95px 0;

    overflow: hidden;
}



/* CONTENT WRAPPER */

.hail-insurance-content {

    width: 72%;

    margin: 0 auto;

    display: flex;

    align-items: flex-start;

    gap: 38px;
}



/* ORANGE LINE */

.hail-insurance-line {

    width: 24px;

    min-height: 410px;

    background: #ff5a1f;

    flex-shrink: 0;
}



/* TEXT AREA */

.hail-insurance-text {

    flex: 1;
}



/* TITLE */

.hail-insurance-text h2 {

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

    font-size: 30px;

    font-weight: 600;

    line-height: 1.2;

    text-transform: uppercase;

    color: #222222;

    margin-bottom: 28px;
}



/* PARAGRAPHS */

.hail-insurance-text p {

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

    font-size: 16px;

    font-weight: 400;

    line-height: 1.3;

    color: #333333;

    margin-bottom: 18px;
}

.hail-insurance-text p:last-child {

    margin-bottom: 0;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .hail-insurance-section {

        padding: 70px 0;
    }

    .hail-insurance-content {

        width: 90%;

        gap: 22px;
    }

    .hail-insurance-line {

        width: 18px;

        min-height: 100%;
    }

    .hail-insurance-text h2 {

        font-size: 34px;
    }

    .hail-insurance-text p {

        font-size: 17px;

        line-height: 1.6;
    }
}



/* =========================
   QUICK HAIL RESPONSE SECTION
========================= */

.hail-response-section {

    position: relative;

    width: 100%;

    min-height: 920px;

    background-image: url("../images/hail-damage-repair-21.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    overflow: hidden;
}



/* RIGHT BOX */

.hail-response-box {

    position: absolute;

    top: 50%;

    right: 13%;

    transform: translateY(-50%);

    width: 640px;

    background: #ececec;

    display: flex;

    align-items: stretch;

    z-index: 2;
}



/* ORANGE LINE */

.hail-response-line {

    width: 28px;

    background: #ff5a1f;

    flex-shrink: 0;
}



/* CONTENT */

.hail-response-content {

    padding: 62px 58px;
}



/* TITLE */

.hail-response-content h2 {

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

    font-size: 28px;

    font-weight: 600;

    line-height: 1.3;

    text-transform: uppercase;

    color: #222222;

    margin-bottom: 18px;
}



/* TEXT */

.hail-response-content p {

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

    font-size: 16px;

    font-weight: 400;

    line-height: 1.3;

    color: #333333;

    margin-bottom: 18px;
}



/* BOLD TEXT */

.hail-response-content h3 {

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

    font-size: 17px;

    font-weight: 600;

    line-height: 1.3;

    text-transform: uppercase;

    color: #222222;

    margin-bottom: 38px;
}



/* BUTTON */

.hail-response-btn {

    display: table;

    margin-left: auto;

    margin-right: auto;

    padding: 14px 22px;

    background: #00ff1e;

    color: #1d1d1d;

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

    font-size: 16px;

    font-weight: 500;

    letter-spacing: 1px;

    text-decoration: none;

    text-transform: uppercase;

    transition: 0.3s ease;
}



/* BUTTON HOVER */

.hail-response-btn:hover,
.hail-response-btn:focus,
.hail-response-btn:active {

    background: #ff5a1f;

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .hail-response-section {

        min-height: auto;

        padding: 80px 0;
    }

    .hail-response-box {

        position: relative;

        top: auto;

        right: auto;

        transform: none;

        width: 92%;

        margin: 0 auto;
    }

    .hail-response-content {

        padding: 45px 30px;
    }

    .hail-response-content h2 {

        font-size: 36px;
    }

    .hail-response-content p {

        font-size: 17px;

        line-height: 1.6;
    }

    .hail-response-content h3 {

        font-size: 18px;
    }

    .hail-response-btn {

        width: 100%;

        text-align: center;

        padding: 20px 25px;
    }
}



/* =========================
   HAIL CTA SECTION
========================= */

.hail-cta-section {

    position: relative;

    width: 100%;

    background: #00ff1e;

    padding: 60px 0;

    overflow: hidden;
}



/* CONTENT */

.hail-cta-content {

    width: 78%;

    max-width: 1500px;

    margin: 0 auto;

    text-align: center;
}



/* TITLE */

.hail-cta-content h2 {

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

    font-size: 30px;

    font-weight: 600;

    line-height: 1.35;

    text-transform: uppercase;

    color: #1d1d1d;

    max-width: 1450px;

    margin: 0 auto 35px auto;
}



/* TEXT */

.hail-cta-content p {

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

    font-size: 17px;

    font-weight: 400;

    line-height: 1.3;

    color: #222222;

    max-width: 1450px;

    margin: 0 auto 50px auto;
}



/* BUTTON */

.hail-cta-btn {

    display: block;

    width: fit-content;

    margin-left: auto;

    margin-right: auto;

    background: #ff4b22;

    color: #ffffff;

    text-decoration: none;

    text-transform: uppercase;

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

    font-size: 15px;

    font-weight: 500;

    letter-spacing: 3px;

    padding: 18px 50px;

    transition: 0.3s ease;
}



/* HOVER + ACTIVE */

.hail-cta-btn:hover,
.hail-cta-btn:active {

    background: #00ff3c;

    color: #111111;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .hail-cta-section {

        padding: 50px 25px;
    }

    .hail-cta-content {

        width: 100%;
    }

    .hail-cta-content h2 {

        font-size: 30px;

        line-height: 1.3;
    }

    .hail-cta-content p {

        font-size: 16px;

        line-height: 1.6;
    }

    .hail-cta-btn {

        width: 100%;

        max-width: 320px;

        text-align: center;
    }
}



/* ===============================
   RESIDENTIAL METAL HERO HTML PAGE
================================= */

.residential-metal-hero {

    position: relative;

    width: 100%;

    min-height: 100vh;

    background-image: url("../images/residential-metal-roofs-4.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    overflow: hidden;
}



/* DARK OVERLAY */

.residential-metal-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

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

    z-index: 1;
}



/* CONTENT */

.residential-metal-content {

    position: relative;

    z-index: 2;

    width: 90%;

    max-width: 1300px;

    margin: 0 auto;
}



/* TITLE */

.residential-metal-content h1 {

    font-family: "Teko", sans-serif;

    font-size: 55px;

    font-weight: 700;

    line-height: 1;

    color: #ffffff;

    text-transform: uppercase;

    margin-bottom: 18px;

    letter-spacing: 1px;
}



/* SUBTITLE */

.residential-metal-content p {

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

    font-size: 24px;

    font-weight: 500;

    line-height: 1.4;

    color: #ffffff;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 45px;
}



/* BUTTON WRAP */

.residential-metal-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 40px;

    flex-wrap: wrap;
}



/* BUTTON */

.residential-metal-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 400px;

    height: 54px;

    background: #ff5a1f;

    color: #ffffff;

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

    font-size: 20px;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 3px;

    text-decoration: none;

    transition: all 0.3s ease;
}



/* HOVER + CLICK */

.residential-metal-btn:hover,

.residential-metal-btn:focus,

.residential-metal-btn:active {

    background: #00ff2a;

    color: #111111;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .residential-metal-hero {

        min-height: 850px;

        background-attachment: scroll;
    }

    .residential-metal-content h1 {

        font-size: 72px;
    }

    .residential-metal-content p {

        font-size: 20px;

        margin-bottom: 35px;
    }

    .residential-metal-buttons {

        gap: 25px;
    }

    .residential-metal-btn {

        width: 100%;

        max-width: 420px;

        height: 68px;

        font-size: 22px;
    }
}


/* =========================
   METAL ROOF ICON SECTION
========================= */

.metal-roof-icons-section {

    position: relative;

    width: 100%;

    background: #1f1f1f;

    padding-top: 80px;

    padding-bottom: 85px;

    overflow: visible;
}



/* ICON CONTAINER */

.metal-roof-icons-container {

    width: 92%;

    max-width: 1450px;

    margin: 0 auto;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 35px;

    flex-wrap: wrap;
}



/* ICON */

.metal-roof-icon-box {

    display: flex;

    justify-content: center;

    align-items: center;
}

.metal-roof-icon-box img {

    width: 150px;

    height: auto;

    object-fit: contain;

    opacity: 0.9;
}



/* BUTTON WRAP */

.metal-roof-buttons-wrap {

    width: 92%;

    max-width: 1450px;

    margin: 55px auto -105px auto;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 90px;

    flex-wrap: wrap;

    position: relative;

    z-index: 10;
}



/* BUTTON */

.metal-roof-service-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    gap: 14px;

    width: 260px;

    height: 52px;

    background: #ff5a1f;

    border: 2px solid #111111;

    color: #ffffff;

    text-decoration: none;

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

    font-size: 16px;

    font-weight: 500;

    transition: all 0.3s ease;

    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.35);
}



/* ICON INSIDE BUTTON */

.metal-roof-service-btn span {

    font-size: 20px;

    line-height: 1;
}



/* HOVER + CLICK */

.metal-roof-service-btn:hover,

.metal-roof-service-btn:focus,

.metal-roof-service-btn:active {

    background: #5b5b5b;

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .metal-roof-icons-section {

        padding-top: 70px;

        padding-bottom: 80px;
    }

    .metal-roof-icons-container {

        gap: 35px;
    }

    .metal-roof-icon-box img {

        width: 140px;
    }

    .metal-roof-buttons-wrap {

        gap: 30px;

        margin-top: 45px;

        margin-bottom: -90px;
    }

    .metal-roof-service-btn {

        width: 100%;

        max-width: 360px;
    }
}



/* =========================
   METAL ROOF INFO SECTION
========================= */

.metal-roof-info-section {

    position: relative;

    width: 100%;

    background: #e9e9e9;

    padding: 140px 0 120px;

    overflow: hidden;
}



/* CONTAINER */

.metal-roof-info-container {

    width: 72%;

    margin: 0 auto;

    display: flex;

    align-items: flex-start;

    gap: 38px;
}



/* GREEN LINE */

.metal-roof-accent-line {

    width: 20px;

    min-width: 26px;

    height: 280px;

    background: #00ff2a;
}



/* CONTENT */

.metal-roof-info-content {

    flex: 1;
}



/* TITLE */

.metal-roof-info-content h2 {

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

    font-size: 25px;

    font-weight: 700;

    line-height: 1.3;

    color: #222222;

    text-transform: uppercase;

    margin-bottom: 18px;
}



/* TEXT */

.metal-roof-info-content p {

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

    font-size: 16px;

    font-weight: 400;

    line-height: 1.3;

    color: #333333;

    margin-bottom: 48px;

    max-width: 1320px;
}



/* BUTTON */

.metal-roof-info-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 280px;

    height: 48px;

    background: #2b2b2b;

    border: 2px solid #2b2b2b;

    color: #ffffff;

    text-decoration: none;

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

    font-size: 16px;

    font-weight: 500;

    transition: all 0.3s ease;
}



/* HOVER */

.metal-roof-info-btn:hover,
.metal-roof-info-btn:focus,
.metal-roof-info-btn:active {

    background: #ff5a1f;

    border-color: #ff5a1f;

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .metal-roof-info-section {

        padding: 90px 0;
    }

    .metal-roof-info-container {

        width: 90%;

        gap: 25px;
    }

    .metal-roof-accent-line {

        height: 320px;
    }

    .metal-roof-info-content h2 {

        font-size: 28px;
    }

    .metal-roof-info-content p {

        font-size: 16px;
    }

    .metal-roof-info-btn {

        width: 100%;
    }
}



/* =========================
   METAL ROOF BENEFITS SECTION
========================= */

.metal-benefits-section {

    position: relative;

    width: 100%;

    min-height: 280px;

    background-image: url("../images/residential-metal-roofs-1.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    display: flex;

    justify-content: flex-end;

    align-items: center;

    padding: 70px 8%;

    overflow: hidden;
}



/* CONTENT BOX */

.metal-benefits-box {

    position: relative;

    width: 640px;

    background: #ececec;

    padding: 55px 60px;

    z-index: 2;
}



/* TITLE */

.metal-benefits-box h2 {

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

    font-size: 20px;

    font-weight: 600;

    line-height: 1.5;

    color: #222222;

    text-transform: uppercase;

    margin-bottom: 30px;
}



/* TEXT */

.metal-benefits-box p {

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

    font-size: 16px;

    font-weight: 400;

    line-height: 1.3;

    color: #2f2f2f;

    margin-bottom: 18px;
}



/* LIST */

.metal-benefits-box ul {

    margin-left: 28px;

    margin-bottom: 40px;
}

.metal-benefits-box ul li {

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

    font-size: 16px;

    line-height: 1.3;

    color: #2f2f2f;

    margin-bottom: 8px;
}



/* BUTTON */

.metal-benefits-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 340px;

    height: 48px;

    background: #00ff2a;

    border: 2px solid #00ff2a;

    color: #111111;

    text-decoration: none;

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

    font-size: 16px;

    letter-spacing: 1.3px;

    transition: all 0.3s ease;
}



/* HOVER */

.metal-benefits-btn:hover,
.metal-benefits-btn:focus,
.metal-benefits-btn:active {

    background: #ff5a1f;

    border-color: #ff5a1f;

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .metal-benefits-section {

        justify-content: center;

        padding: 80px 5%;
    }

    .metal-benefits-box {

        width: 100%;

        padding: 40px 30px;
    }

    .metal-benefits-box h2 {

        font-size: 28px;
    }

    .metal-benefits-box p,
    .metal-benefits-box ul li {

        font-size: 16px;
    }

    .metal-benefits-btn {

        width: 100%;
    }
}



/* =========================
   METAL ROOF COMPARISON
========================= */

.metal-roof-comparison-section {

    position: relative;

    width: 100%;

    background: #efefef;

    overflow: hidden;

    padding-top: 90px;

    padding-bottom: 5px;
}



/* ORANGE SIDE */

.metal-roof-comparison-section::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 32%;

    height: 100%;

    background: #ff5a1f;

    z-index: 1;
}



/* CONTENT */

.metal-roof-comparison-content {

    position: relative;

    z-index: 2;

    width: 48%;

    max-width: 1250px;

    margin-left: auto;

    margin-right: 280px;

    text-align: center;

    text-align: right;

    margin-left: auto;

}



/* TITLE */

.metal-roof-comparison-content h2 {

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

    font-size: 20px;

    font-weight: 700;

    color: #222222;

    line-height: 1.3;

    margin-bottom: 18px;

    text-transform: uppercase;
}



/* TEXT */

.metal-roof-comparison-content p {

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

    font-size: 16px;

    line-height: 1.3;

    color: #2d2d2d;

    margin-bottom: 28px;

    width: 100%;
}



/* BUTTON */

.metal-comparison-btn {

    display: inline-flex;

    justify-content: flex-end;

    align-items: center;

    width: 305px;

    height: 50px;

    background: #ff5a1f;

    border: 2px solid #ff5a1f;

    color: #ffffff;

    text-decoration: none;

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

    font-size: 16px;

    letter-spacing: 1.3px;

    transition: all 0.3s ease;
}



/* HOVER */

.metal-comparison-btn:hover,
.metal-comparison-btn:focus,
.metal-comparison-btn:active {

    background: #00ff2a;

    border-color: #00ff2a;

    color: #111111;
}



/* =========================
   METAL PANEL SECTION
========================= */

.metal-panel-section {

    position: relative;

    width: 100%;

    background: #efefef;

    padding-top: 70px;

    padding-bottom: 70px;

    overflow: hidden;
}



/* ORANGE SIDE */

.metal-panel-section::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 32%;

    height: 100%;

    background: #ff5a1f;

    z-index: 1;
}



/* PANEL BOX */

.metal-panel-box {

    position: relative;

    z-index: 2;

    width: 62%;

    max-width: 1180px;

    margin: 0 auto 24px auto;

    background: #f4f4f4;

    display: flex;

    align-items: center;

    gap: 45px;

    padding: 32px 45px;

    box-sizing: border-box;
}



/* ICON */

.metal-panel-icon {

    flex-shrink: 0;
}

.metal-panel-icon img {

    width: 200px;

    display: block;
}



/* CONTENT */

.metal-panel-content {

    flex: 1;
}



/* TITLE */

.metal-panel-content h3 {

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

    font-size: 20px;

    font-weight: 700;

    color: #ff5a1f;

    margin-bottom: 14px;

    text-transform: uppercase;
}



/* TEXT */

.metal-panel-content p {

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

    font-size: 16px;

    line-height: 1.3;

    color: #333333;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .metal-roof-comparison-content {

        width: 92%;

        margin: 0 auto;
    }

    .metal-roof-comparison-content h2 {

        font-size: 24px;
    }

    .metal-roof-comparison-content p {

        font-size: 16px;
    }

    .metal-comparison-btn {

        width: 100%;
    }

    .metal-panel-box {

        width: 92%;

        flex-direction: column;

        text-align: center;

        padding: 35px 25px;
    }

    .metal-panel-icon img {

        width: 210px;
    }

    .metal-panel-content h3 {

        font-size: 22px;
    }

    .metal-panel-content p {

        font-size: 16px;
    }
}


/* =========================
   METAL FACTS SECTION
========================= */

.metal-facts-section {

    position: relative;

    width: 100%;

    min-height: 560px;

    background-image: url("../images/residential-metal-roofs-2.png");

    background-size: cover;

    background-position: right center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    overflow: hidden;
}



/* LEFT OVERLAY */

.metal-facts-overlay {

    width: 42%;

    min-height: 560px;

    background: rgba(45, 45, 45, 0.88);

    display: flex;

    justify-content: flex-end;

    align-items: center;

    padding: 60px 0;
}



/* WHITE BOX */

.metal-facts-box {

    width: 660px;

    background: #f3f3f3;

    padding: 48px 58px;

    margin-right: -155px;

    box-sizing: border-box;
}



/* TITLE */

.metal-facts-box h2 {

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

    font-size: 22px;

    font-weight: 700;

    line-height: 1.3;

    color: #1f1f1f;

    text-transform: uppercase;

    margin-bottom: 28px;
}



/* LIST */

.metal-facts-box ul {

    padding-left: 28px;

    margin-bottom: 42px;
}



/* LIST ITEMS */

.metal-facts-box li {

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

    font-size: 16px;

    line-height: 1.1;

    color: #2f2f2f;

    margin-bottom: 10px;
}



/* BUTTON */

.metal-facts-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 370px;

    height: 50px;

    background: #00ff2a;

    color: #111111;

    text-decoration: none;

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

    font-size: 15px;

    letter-spacing: 1.3px;

    transition: all 0.3s ease;
}



/* HOVER + CLICK */

.metal-facts-btn:hover,
.metal-facts-btn:focus,
.metal-facts-btn:active {

    background: #ff5a1f;

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .metal-facts-overlay {

        width: 100%;

        padding: 40px 20px;
    }

    .metal-facts-box {

        width: 100%;

        margin-right: 0;
    }

    .metal-facts-box h2 {

        font-size: 28px;
    }

    .metal-facts-box li {

        font-size: 16px;
    }

    .metal-facts-btn {

        width: 100%;
    }
}



/* =========================
   METAL ROOF TEXT SECTION
========================= */

.metal-roof-text-section {

    position: relative;

    width: 100%;

    background: #111111;

    overflow: hidden;
}



/* DARK AREA */

.metal-roof-text-overlay {

    width: 100%;

    padding-top: 50px;

    padding-bottom: 50px;
}



/* CONTENT */

.metal-roof-text-content {

    width: 72%;

    max-width: 1450px;

    margin: 0 auto;

    text-align: center;
}



/* TEXT */

.metal-roof-text-content p {

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

    font-size: 17px;

    line-height: 1.5;

    color: #ffffff;

    font-weight: 400;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .metal-roof-text-content {

        width: 92%;
    }

    .metal-roof-text-content p {

        font-size: 18px;

        line-height: 1.6;
    }
}



/* =========================
   METAL CONSIDERATION SECTION
========================= */

.metal-consideration-section {

    position: relative;

    width: 100%;

    min-height: 460px;

    overflow: hidden;

    background-image: url("../images/residential-metal-roofs-3.png");

    background-size: cover;

    background-position: left center;

    background-repeat: no-repeat;

    background-attachment: fixed;
}



/* CONTENT WRAP */

.metal-consideration-overlay {

    position: relative;

    width: 100%;

    min-height: 460px;

    display: flex;

    justify-content: flex-end;

    align-items: center;

    padding-right: 280px;

    box-sizing: border-box;
}



/* WHITE BOX */

.metal-consideration-box {

    width: 510px;

    background: #efefef;

    padding: 28px 30px;

    box-sizing: border-box;
}



/* TITLE */

.metal-consideration-box h2 {

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

    font-size: 25px;

    font-weight: 600;

    line-height: 1.45;

    color: #222222;

    text-transform: uppercase;

    margin-bottom: 34px;
}



/* TEXT */

.metal-consideration-box p {

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

    font-size: 16px;

    line-height: 1.5;

    color: #2f2f2f;

    margin-bottom: 42px;
}



/* BUTTON */

.metal-consideration-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 350px;

    height: 44px;

    background: #00ff2a;

    color: #111111;

    text-decoration: none;

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

    font-size: 15px;

    letter-spacing: 1.5px;

    transition: all 0.3s ease;
}



/* HOVER */

.metal-consideration-btn:hover,
.metal-consideration-btn:focus,
.metal-consideration-btn:active {

    background: #ff5a1f;

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .metal-consideration-overlay {

        justify-content: center;

        padding: 80px 20px;
    }

    .metal-consideration-box {

        width: 100%;

        padding: 40px 30px;
    }

    .metal-consideration-box h2 {

        font-size: 28px;
    }

    .metal-consideration-box p {

        font-size: 16px;
    }

    .metal-consideration-btn {

        width: 100%;
    }
}



/* =========================
   METAL ROOFS ICON SERVICES
========================= */

.metal-roofs-icons-services {

    position: relative;

    width: 100%;

    padding-top: 55px;

    padding-bottom: 55px;

    overflow: hidden;

    background-image: url("../images/mixed-black-background.png");

    background-size: contain;

    background-position: center;

    background-repeat: repeat;

    background-attachment: fixed;
}



/* OVERLAY */

.metal-roofs-icons-services-overlay {

    width: 90%;

    display: flex;

    justify-content: center;

    align-items: center;
}



/* WHITE BOX */

.metal-roofs-icons-services-box {

    width: 70%;

    max-width: 1450px;

    background: #efefef;

    padding: 18px 25px;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    gap: 75px;

    box-sizing: border-box;

}



/* ITEM */

.metal-roofs-icons-service-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    text-decoration: none;

    transition: 0.25s ease;
}


.metal-roofs-icons-service-item:hover img {

    transform: scale(1.05);
}

.metal-roofs-icons-service-item:hover h3 {

    color: #00ff2a;
}


/* ICON */

.metal-roofs-icons-service-item img {

    width: 100px;

    height: 100px;

    object-fit: cover;

    border-radius: 50%;

    background: #00ff2a;

    padding: 20px;

    margin-bottom: 28px;

    box-sizing: border-box;
}



/* TEXT */

.metal-roofs-icons-service-item h3 {

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

    font-size: 16px;

    font-weight: 500;

    letter-spacing: 1.3px;

    line-height: 1.3;

    color: #222222;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .metal-roofs-icons-services-box {

        width: 92%;

        flex-wrap: wrap;

        justify-content: center;

        gap: 45px;

        padding: 45px 25px;
    }

    .metal-roofs-icons-service-item img {

        width: 100px;

        height: 100px;
    }

    .metal-roofs-icons-service-item h3 {

        font-size: 16px;
    }
}



/* ===================================
   REASONS FOR A NEW ROOF HERO HTML PAGE
====================================== */

.reasons-new-roof-hero {

    position: relative;

    width: 100%;

    min-height: 100vh;

    background-image: url("../images/reasons-for-a-new-roof-1.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    overflow: hidden;
}



/* DARK OVERLAY */

.reasons-new-roof-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.42);

    z-index: 1;
}



/* CONTENT */

.reasons-new-roof-content {

    position: relative;

    z-index: 2;

    max-width: 1200px;

    padding: 0 20px;

    margin-top: 40px;
}



/* TITLE */

.reasons-new-roof-content h1 {

    font-family: "Teko", sans-serif;

    font-size: 55px;

    font-weight: 700;

    line-height: 1;

    color: #ffffff;

    text-transform: uppercase;

    margin-bottom: 18px;

    letter-spacing: 1px;
}



/* TEXT */

.reasons-new-roof-content p {

    font-size: 25px;

    font-weight: 400;

    color: #ffffff;

    letter-spacing: 1px;

    margin-bottom: 45px;

    text-transform: uppercase;
}

.reasons-new-roof-content p strong {

    font-weight: 700;
}



/* BUTTON */

.reasons-new-roof-btn {

    display: inline-block;

    background: #ff5a1f;

    color: #ffffff;

    text-decoration: none;

    padding: 17px 75px;

    font-size: 16px;

    font-weight: 500;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    transition: all 0.3s ease;
}



/* HOVER + CLICK */

.reasons-new-roof-btn:hover,

.reasons-new-roof-btn:focus,

.reasons-new-roof-btn:active {

    background: #00d84f;

    color: #ffffff;
}



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

@media (max-width: 991px) {

    .reasons-new-roof-content h1 {

        font-size: 75px;
    }

    .reasons-new-roof-content p {

        font-size: 22px;
    }

    .reasons-new-roof-btn {

        padding: 18px 55px;

        font-size: 16px;
    }
}



@media (max-width: 767px) {

    .reasons-new-roof-content h1 {

        font-size: 52px;

        line-height: 1;
    }

    .reasons-new-roof-content p {

        font-size: 17px;

        line-height: 1.5;
    }

    .reasons-new-roof-btn {

        width: 100%;

        max-width: 340px;

        padding: 18px 25px;

        font-size: 15px;
    }
}


/* ===================================
   REASONS FOR A NEW ROOF ICONS
====================================== */

.reasons-new-roof-icons-section {

    position: relative;

    width: 100%;

    background: #343434;

    padding-top: 60px;

    padding-bottom: 60px;

    overflow: hidden;
}



/* CONTAINER */

.reasons-new-roof-icons-container {

    width: 92%;

    max-width: 1100px;

    margin: 0 auto;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 75px;

    flex-wrap: nowrap;
}



/* ITEM */

.reasons-new-roof-icon-item {

    display: flex;

    justify-content: center;

    align-items: center;
}



/* ICON IMAGE */

.reasons-new-roof-icon-item img {

    width: 210px;

    height: auto;

    display: block;
}



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

@media (max-width: 1200px) {

    .reasons-new-roof-icons-container {

        gap: 55px;
    }

    .reasons-new-roof-icon-item img {

        width: 220px;
    }
}



@media (max-width: 991px) {

    .reasons-new-roof-icons-section {

        padding-top: 70px;

        padding-bottom: 70px;
    }

    .reasons-new-roof-icons-container {

        gap: 40px;
    }

    .reasons-new-roof-icon-item img {

        width: 190px;
    }
}



@media (max-width: 767px) {

    .reasons-new-roof-icons-container {

        flex-direction: column;

        gap: 45px;
    }

    .reasons-new-roof-icon-item img {

        width: 180px;
    }
}


/* ===================================
   REASONS FOR A NEW ROOF CONTENT
====================================== */

.reasons-new-roof-content-section {

    position: relative;

    width: 100%;

    background: #ececec;

    padding-top: 140px;

    padding-bottom: 90px;
}



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

.reasons-new-roof-top-buttons {

    position: absolute;

    top: -32px;

    left: 50%;

    transform: translateX(-50%);

    width: 72%;

    max-width: 1400px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 120px;

    z-index: 10;
}



/* BUTTON */

.reasons-new-roof-top-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    background: #ff5a1f;

    color: #ffffff;

    text-decoration: none;

    padding: 10px 28px;

    min-width: 260px;

    font-size: 16px;

    font-weight: 500;

    border-radius: 3px;

    border: 2px solid #2a2a2a;

    transition: all 0.3s ease;
}



/* ICON */

.reasons-new-roof-top-btn span {

    font-size: 22px;
}



/* HOVER */

.reasons-new-roof-top-btn:hover,

.reasons-new-roof-top-btn:focus,

.reasons-new-roof-top-btn:active {

    background: #00d84f;

    color: #ffffff;
}



/* ===================================
   INNER CONTENT
====================================== */

.reasons-new-roof-inner {

    width: 92%;

    max-width: 1350px;

    margin: 0 auto;

    display: flex;

    align-items: flex-start;

    gap: 40px;
}



/* GREEN BAR */

.reasons-new-roof-green-bar {

    width: 20px;

    min-height: 440px;

    background: #00ff2a;

    flex-shrink: 0;
}



/* TEXT AREA */

.reasons-new-roof-text {

    max-width: 1100px;

    padding-top: 45px;
}



/* TITLE */

.reasons-new-roof-text h2 {

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

    font-size: 25px;

    line-height: 1.1;

    font-weight: 600;

    color: #222222;

    text-transform: uppercase;

    margin-bottom: 40px;
}



/* PARAGRAPHS */

.reasons-new-roof-text p {

    font-size: 16px;

    line-height: 1.4;

    color: #333333;

    margin-bottom: 24px;
}



/* ESTIMATE BUTTON */

.reasons-new-roof-estimate-btn {

    display: inline-block;

    margin-top: 25px;

    background: #2d2d2d;

    color: #ffffff;

    text-decoration: none;

    padding: 14px 36px;

    font-size: 17px;

    font-weight: 500;

    border-radius: 3px;

    transition: all 0.3s ease;
}



/* HOVER */

.reasons-new-roof-estimate-btn:hover,

.reasons-new-roof-estimate-btn:focus,

.reasons-new-roof-estimate-btn:active {

    background: #ff5a1f;

    color: #ffffff;
}



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

@media (max-width: 1200px) {

    .reasons-new-roof-top-buttons {

        gap: 35px;
    }

    .reasons-new-roof-top-btn {

        min-width: 260px;

        font-size: 16px;
    }

    .reasons-new-roof-text h2 {

        font-size: 46px;
    }
}



@media (max-width: 991px) {

    .reasons-new-roof-top-buttons {

        flex-wrap: wrap;

        position: relative;

        top: 0;

        left: 0;

        transform: none;

        margin: 0 auto 50px auto;

        gap: 25px;
    }

    .reasons-new-roof-content-section {

        padding-top: 70px;
    }

    .reasons-new-roof-inner {

        flex-direction: column;

        gap: 30px;
    }

    .reasons-new-roof-green-bar {

        width: 100%;

        min-height: 18px;
    }

    .reasons-new-roof-text {

        padding-top: 0;
    }

    .reasons-new-roof-text h2 {

        font-size: 38px;
    }
}



@media (max-width: 767px) {

    .reasons-new-roof-top-buttons {

        flex-direction: column;

        align-items: center;
    }

    .reasons-new-roof-top-btn {

        width: 100%;

        max-width: 340px;

        min-width: unset;
    }

    .reasons-new-roof-text h2 {

        font-size: 30px;
    }

    .reasons-new-roof-text p {

        font-size: 17px;

        line-height: 1.7;
    }

    .reasons-new-roof-estimate-btn {

        width: 100%;

        max-width: 320px;

        text-align: center;
    }
}



/* ===================================
   REASONS FOR A NEW ROOF INFO SECTION
====================================== */

.reasons-new-roof-info-section {

    position: relative;

    width: 100%;

    min-height: 520px;

    background-image: url("../images/reasons-for-a-new-roof-3.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    display: flex;

    justify-content: flex-end;

    align-items: center;

    padding: 70px 170px 70px 0;

    overflow: hidden;
}



/* WHITE BOX */

.reasons-new-roof-info-box {

    width: 580px;

    min-height: 420px;

    background: #ffffff;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 65px 65px;

    position: relative;

    z-index: 5;
}



/* CONTENT */

.reasons-new-roof-info-content {

    width: 100%;

    max-width: 560px;
}



/* TEXT */

.reasons-new-roof-info-content p {

    font-size: 17px;

    line-height: 1.3;

    color: #111111;

    margin-bottom: 18px;
}



/* BUTTON */

.reasons-new-roof-info-btn {

    display: inline-block;

    margin-top: 14px;

    background: #ff4b22;

    color: #ffffff;

    text-decoration: none;

    padding: 13px 20px;

    font-size: 16px;

    font-weight: 500;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    transition: 0.3s ease;
}



.reasons-new-roof-info-btn:hover,

.reasons-new-roof-info-btn:focus,

.reasons-new-roof-info-btn:active {

    background: #00ff3c;

    color: #ffffff;
}



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

@media (max-width: 1200px) {

    .reasons-new-roof-info-section {

        background-size: cover;

        padding: 70px 60px;

        justify-content: center;
    }

    .reasons-new-roof-info-box {

        width: 680px;
    }
}



@media (max-width: 767px) {

    .reasons-new-roof-info-section {

        min-height: auto;

        background-attachment: scroll;

        padding: 60px 25px;
    }

    .reasons-new-roof-info-box {

        width: 100%;

        min-height: auto;

        padding: 45px 28px;
    }

    .reasons-new-roof-info-content p {

        font-size: 16px;

        line-height: 1.5;
    }

    .reasons-new-roof-info-btn {

        width: 100%;

        text-align: center;

        padding: 18px 20px;

        font-size: 14px;

        letter-spacing: 2px;
    }
}


/* ===================================
   TOP REASONS FOR A ROOF REPLACEMENT
====================================== */

.roof-replacement-reasons-section {
    position: relative;
    width: 100%;
    padding: 90px 0 110px;
    background-image: url("../images/mixed-black-background.png");
    background-size: auto;
    background-position: center top;
    background-repeat: repeat;
    background-attachment: fixed;
}

.roof-replacement-reasons-content {
    width: 80%;
    max-width: 1500px;
    margin: 0 auto;
    text-align: center;
}

.roof-replacement-reasons-content h2 {
    font-family: "Teko", Arial, sans-serif;
    font-size: 35px;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.roof-replacement-reasons-intro {
    max-width: 1350px;
    margin: 0 auto 38px;
    font-size: 17px;
    line-height: 1.5;
    color: #ffffff;
}

.roof-replacement-reasons-green {
    margin-bottom: 38px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: #00ff4c;
    text-transform: uppercase;
}

.roof-replacement-reasons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 28px;
}

.roof-replacement-reason-box {
    min-height: 410px;
    background: #d1d1d1;
    border: 4px solid #ffffff;
    border-radius: 4px;
    padding: 65px 55px 45px;
    text-align: center;
}

.roof-replacement-reason-box img {
    width: 95px;
    height: 95px;
    object-fit: contain;
    display: block;
    margin: 0 auto 35px;
    opacity: 0.55;
}

.roof-replacement-reason-box h3 {
    font-family: "Teko", Arial, sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    color: #222222;
    letter-spacing: 0.5px;
    margin-bottom: 18px;
}

.roof-replacement-reason-box p {
    max-width: 620px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.3;
    color: #222222;
}

/* RESPONSIVE */

@media (max-width: 991px) {
    .roof-replacement-reasons-content {
        width: 90%;
    }

    .roof-replacement-reasons-grid {
        grid-template-columns: 1fr;
    }

    .roof-replacement-reason-box {
        min-height: auto;
        padding: 55px 30px 40px;
    }
}

@media (max-width: 600px) {
    .roof-replacement-reasons-section {
        padding: 70px 0 80px;
        background-attachment: scroll;
    }

    .roof-replacement-reasons-content h2 {
        font-size: 38px;
    }

    .roof-replacement-reasons-intro,
    .roof-replacement-reasons-green {
        font-size: 15px;
    }

    .roof-replacement-reason-box p {
        font-size: 16px;
    }
}


/* ===================================
   SIGNS OF DAMAGED ROOFING
====================================== */

.damaged-roofing-signs-section {
    position: relative;
    width: 100%;
    padding: 90px 0 100px;
    background: #000000;
}

.damaged-roofing-signs-content {
    width: 94%;
    max-width: 1850px;
    margin: 0 auto;
    text-align: center;
}

.damaged-roofing-signs-content h2 {
    font-family: "Teko", Arial, sans-serif;
    font-size: 45px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;
    color: #ffffff;
    margin-bottom: 25px;
}

.damaged-roofing-signs-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 35px;
    align-items: start;
}

.damaged-roofing-sign-item {
    text-align: center;
}

.damaged-roofing-sign-item img {
    width: 180px;
    height: 220px;
    object-fit: contain;
    display: block;
    margin: 0 auto 25px;
}

.damaged-roofing-sign-item h3 {
    font-family: "Teko", Arial, sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 1.3px;
    color: #ffffff;
    text-transform: uppercase;
}

/* RESPONSIVE */

@media (max-width: 1200px) {
    .damaged-roofing-signs-grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 60px;
    }
}

@media (max-width: 700px) {
    .damaged-roofing-signs-section {
        padding: 70px 0 80px;
    }

    .damaged-roofing-signs-content h2 {
        font-size: 42px;
        margin-bottom: 45px;
    }

    .damaged-roofing-signs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 45px 20px;
    }

    .damaged-roofing-sign-item img {
        width: 140px;
        height: 140px;
        margin-bottom: 25px;
    }

    .damaged-roofing-sign-item h3 {
        font-size: 18px;
        letter-spacing: 2px;
    }
}



/* ===================================
   HOW CHAMPION ROOFING CAN HELP
====================================== */

.champion-help-section {
    position: relative;
    width: 100%;
    min-height: 600px;
    background-color: #3f3f3f;
    background-image: url("../images/reasons-for-a-new-roof-23.png");
    background-size: 100% 100%;
    background-position: right center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 75px 0 65px;
    overflow: hidden;
}

.champion-help-box {
    position: relative;
    width: 36%;
    max-width: 690px;
    margin-left: 13%;
    background-color: #ffffff;
    padding: 50px 65px 45px;
    z-index: 2;
}

.champion-help-box h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.15;
    color: #222222;
    margin-bottom: 22px;
}

.champion-help-box p {
    font-size: 16px;
    line-height: 1.3;
    color: #222222;
    margin-bottom: 28px;
}

.champion-help-btn {
    display: inline-block;
    width: 390px;
    max-width: 100%;
    padding: 14px 18px;
    background-color: #00ff38;
    color: #000000;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
    letter-spacing: 1.5px;
    font-weight: 400;
    transition: 0.25s ease;
}

.champion-help-btn:hover,
.champion-help-btn:active {
    background-color: #f28c00;
    color: #000000;
}

/* RESPONSIVE */

@media (max-width: 991px) {
    .champion-help-section {
        min-height: auto;
        background-size: cover;
        background-position: center;
        background-attachment: scroll;
        padding: 70px 0;
    }

    .champion-help-box {
        width: 82%;
        max-width: none;
        margin: 0 auto;
        padding: 45px 40px 45px;
    }
}

@media (max-width: 600px) {
    .champion-help-section {
        padding: 55px 0;
    }

    .champion-help-box {
        width: 90%;
        padding: 35px 25px 40px;
    }

    .champion-help-box h2 {
        font-size: 24px;
    }

    .champion-help-box p {
        font-size: 15px;
        line-height: 1.45;
        margin-bottom: 30px;
    }

    .champion-help-btn {
        width: 100%;
        font-size: 13px;
        letter-spacing: 2px;
    }
}



/* ===================================
   ADDITIONAL SERVICES
====================================== */

.roof-extra-services-section {
    position: relative;
    width: 100%;
    padding: 60px 0;
    background-image: url("../images/mixed-black-background.png");
    background-size: auto;
    background-position: center top;
    background-repeat: repeat;
    overflow: hidden;
}

.roof-extra-services-box {
    width: 73%;
    max-width: 1500px;
    margin: 0 auto;
    background-color: #f1f1f1;
    padding: 42px 55px 38px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.roof-extra-service-item {
    flex: 1;
    text-align: center;
    text-decoration: none;
}

.roof-extra-service-item img {
    width: 118px;
    height: 122px;
    object-fit: contain;
    display: block;
    margin: 0 auto 28px;
    transition: 0.25s ease;
    border-radius: 50%;
}

.roof-extra-service-item h3 {
    font-family: "Teko", Arial, sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 2px;
    color: #2a2a2a;
    transition: 0.25s ease;
}

.roof-extra-service-item:hover img {
    transform: scale(1.05);
}

.roof-extra-service-item:hover h3 {
    color: #00ff38;
}

/* RESPONSIVE */

@media (max-width: 1100px) {

    .roof-extra-services-box {
        flex-wrap: wrap;
        justify-content: center;
        gap: 45px;
    }

    .roof-extra-service-item {
        width: 30%;
        flex: unset;
    }
}

@media (max-width: 700px) {

    .roof-extra-services-section {
        padding: 70px 0;
    }

    .roof-extra-services-box {
        width: 90%;
        padding: 35px 25px;
        gap: 35px;
    }

    .roof-extra-service-item {
        width: 45%;
    }

    .roof-extra-service-item img {
        width: 95px;
        height: 95px;
        margin-bottom: 18px;
    }

    .roof-extra-service-item h3 {
        font-size: 18px;
        letter-spacing: 2px;
    }
}


/* ================================
   WINTER ROOF DAMAGE REPAIR HTML PAGE
================================ */

.winter-roof-hero {
    position: relative;
    width: 100%;
    min-height: 775px;
    background-image: url("../images/winter-roof-damage-repair-5.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.winter-roof-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 1;
}

.winter-roof-content {
    position: relative;
    z-index: 2;
    margin-top: 145px;
    width: 100%;
    padding: 0 20px;
}

.winter-roof-content h1 {
    font-family: "Teko", Arial, sans-serif;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffffff;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.winter-roof-content p {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 32px;
}

.winter-roof-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 58px;
}

.winter-roof-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 340px;
    height: 52px;
    background: #ff4b22;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    transition: background 0.25s ease;
}

.winter-roof-buttons .winter-roof-btn:last-child {
    min-width: 420px;
}

.winter-roof-btn:hover,
.winter-roof-btn:active {
    background: #00ff2a;
}


/* GREEN SERVICE AREA */

.winter-roof-service-area {
    width: 100%;
    min-height: 130px;
    background: #00ff2a;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.winter-roof-service-area h2 {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #2b2b2b;
    text-transform: uppercase;
    margin: 0;
    padding: 0 20px;
}


/* WINTER ROOF ICONS */

.winter-roof-icons-section {
    position: relative;
    width: 100%;
    min-height: 330px;
    background-image: url("../images/winter-roof-damage-repair-5.png");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.winter-roof-icons-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 1;
}

.winter-roof-icons-box {
    position: relative;
    z-index: 2;
    width: 82%;
    max-width: 1450px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 38px;
}

.winter-roof-icons-box img {
    width: 145px;
    height: 145px;
    object-fit: contain;
    opacity: 1.5;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .winter-roof-hero {
        min-height: 650px;
        background-attachment: scroll;
    }

    .winter-roof-content {
        margin-top: 80px;
    }

    .winter-roof-content h1 {
        font-size: 42px;
    }

    .winter-roof-content p {
        font-size: 22px;
    }

    .winter-roof-buttons {
        flex-direction: column;
        gap: 18px;
    }

    .winter-roof-btn {
        width: 90%;
        min-width: unset;
    }

    .winter-roof-icons-section {
        background-attachment: scroll;
        min-height: 420px;
    }

    .winter-roof-icons-box {
        width: 90%;
        flex-wrap: wrap;
        gap: 30px;
    }

    .winter-roof-icons-box img {
        width: 120px;
        height: 120px;
    }
}



/* =====================================
   WINTER DAMAGE INFO SECTION
===================================== */

.winter-damage-info-section {
    background: #1f1f1f;
    width: 100%;
    padding: 60px 70px 60px;
}

.winter-damage-info-container {
    max-width: 1420px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 95px;
}


/* LEFT TEXT */

.winter-damage-info-text {
    flex: 1;
    max-width: 620px;
    margin-top: 55px;
    padding-top: 42px;
}
  

.winter-damage-info-text h2 {
    color: #ff5a26;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: 550;
    line-height: 1.5;
    text-transform: uppercase;
    margin-bottom: 40px;
    margin-top: -90px;
    margin-left: 170px;

}

.winter-damage-info-text p {
    color: #f1f1f1;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 24px;
    margin-left: 170px;
}


/* BUTTON */

.winter-damage-info-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 52px;
    background: #00ff2a;
    color: #111111;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    margin-top: 18px;
    transition: 0.25s ease;
    margin-left: 170px;
}

.winter-damage-info-btn:hover,
.winter-damage-info-btn:active {
    background: #ff5a26;
    color: #ffffff;
}


/* RIGHT GALLERY */

.winter-damage-gallery-box {
    width: 500px;
    background: #efefef;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-content: start;
    margin-top: -12px;
    transform: translateX(-220px);
}

.winter-damage-gallery-box img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}


/* LAST IMAGE */

.winter-damage-gallery-box img:nth-child(4) {
    grid-column: 1;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .winter-damage-info-container {
        flex-direction: column;
        gap: 50px;
    }

    .winter-damage-gallery-box {
        width: 100%;
    }
}

@media (max-width: 800px) {

    .winter-damage-info-section {
        padding: 70px 25px 80px;
    }

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

    .winter-damage-gallery-box img {
        height: 170px;
    }

    .winter-damage-info-text h2 {
        font-size: 28px;
    }

    .winter-damage-info-text p {
        font-size: 17px;
    }
}



/* ====================================
   WINTER WHY CHOOSE US SECTION
==================================== */

.winter-why-us-section {
    width: 100%;
    padding: 80px 20px;
    background-image: url("../images/mixed-black-background.png");
    background-size: contain;
    background-position: center top;
    background-repeat: repeat;
    background-attachment: fixed;
}

.winter-why-us-box {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    background: #efefef;
    padding: 90px 110px 100px;
    text-align: center;
}

.winter-why-us-box h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: 600;
    color: #222222;
    text-transform: uppercase;
    margin-bottom: 70px;
}


/* ITEMS */

.winter-why-us-item {
    margin-bottom: 80px;
}

.winter-why-us-item:last-child {
    margin-bottom: 0;
}


/* ICON */

.winter-why-us-icon {
    width: 90px;
    height: 90px;
    background: #00ff2a;
    border-radius: 50%;
    margin: 0 auto 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.winter-why-us-icon img {
    width:110px;
    height: 110px;
    object-fit: contain;
}


/* TEXT */

.winter-why-us-item h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 23px;
    font-weight: 550;
    color: #222222;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.winter-why-us-item p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.5;
    color: #333333;
    max-width: 900px;
    margin: 0 auto;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .winter-why-us-box {
        padding: 70px 30px 80px;
    }

    .winter-why-us-box h2 {
        font-size: 24px;
        line-height: 1.5;
    }

    .winter-why-us-item h3 {
        font-size: 22px;
    }

    .winter-why-us-item p {
        font-size: 16px;
    }
}


/* =====================================
   WINTER ROOF DAMAGE ISSUES SECTION
===================================== */

.winter-roof-issues-section {
    width: 100%;
    background: #f4f4f4;
    padding: 45px 20px 75px;
}

.winter-roof-issues-container {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 90px;
}

.winter-roof-issues-container h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: 600;
    color: #2b2b2b;
    text-transform: uppercase;
    margin-bottom: 60px;
}

.winter-roof-issues-container h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: 500;
    color: #2b2b2b;
    text-transform: uppercase;
    margin-top: 35px;
    margin-bottom: 22px;
}

.winter-roof-issues-container p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.3;
    color: #2f2f2f;
    margin-bottom: 20px;
    max-width: 1180px;
}

.winter-roof-issues-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 260px;
    height: 46px;
    background: #ff4b22;
    color: #ffffff;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    margin-top: 25px;
    transition: 0.25s ease;
}

.winter-roof-issues-btn:hover,
.winter-roof-issues-btn:active {
    background: #00ff2a;
    color: #111111;
}



/* =====================================
   WINTER ICICLE FORMATION SECTION
===================================== */

.winter-icicle-formation-section {
    width: 100%;
    background: #f2f2f2;
    padding: 70px 20px 80px;
}

.winter-icicle-formation-container {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 70px;
    padding-left: 95px;
}

.winter-icicle-formation-text {
    width: 48%;
}

.winter-icicle-formation-text h2,
.winter-icicle-formation-text h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: 500;
    color: #2b2b2b;
    text-transform: uppercase;
    margin-bottom: 24px;
    margin-top: -30px;
}

.winter-icicle-formation-text h3 {
    margin-top: 42px;
}

.winter-icicle-formation-text p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.3;
    color: #2f2f2f;
    margin-bottom: 18px;
}

.winter-icicle-formation-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 260px;
    height: 46px;
    background: #ff4b22;
    color: #ffffff;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    margin-top: 22px;
    transition: 0.25s ease;
}

.winter-icicle-formation-btn:hover,
.winter-icicle-formation-btn:active {
    background: #00ff2a;
    color: #111111;
}

.winter-icicle-formation-image {
    width: 40%;
    border-right: 12px solid #ff4b22;
    border-bottom: 12px solid #ff4b22;
      transform: translateX(-95px);
}

.winter-icicle-formation-image img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    display: block;
   
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .winter-icicle-formation-container {
        flex-direction: column;
        gap: 45px;
    }

    .winter-icicle-formation-text,
    .winter-icicle-formation-image {
        width: 100%;
    }

    .winter-icicle-formation-image img {
        height: 420px;
    }
}


/* =====================================
   WINTER ATTIC CONDENSATION SECTION
===================================== */

.winter-attic-condensation-section {
    width: 100%;
    background: #ffffff;
    padding: 90px 20px 95px;
}

.winter-attic-condensation-container {
    max-width: 1330px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 48% 52%;
    align-items: center;
    column-gap: 55px;
}

.winter-attic-condensation-image {
    width: 75%;
    border-right: 12px solid #ff4b22;
    border-bottom: 12px solid #ff4b22;
    transform: translateX(95px);
}

.winter-attic-condensation-image img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    display: block;
    
}

.winter-attic-condensation-text {
    max-width: 620px;
    transform: translateX(-90px);
}

.winter-attic-condensation-text h2,
.winter-attic-condensation-text h3 {
    font-family: Arial, Helvetica, sans-serif;
    color: #2b2b2b;
    text-transform: uppercase;
    font-weight: 500;
}

.winter-attic-condensation-text h2 {
    font-size: 25px;
    margin-bottom: 22px;
}

.winter-attic-condensation-text h3 {
    font-size: 25px;
    margin-top: 34px;
    margin-bottom: 20px;
}

.winter-attic-condensation-text p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.3;
    color: #2f2f2f;
    margin-bottom: 18px;
}

.winter-attic-condensation-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 260px;
    height: 46px;
    background: #ff4b22;
    color: #ffffff;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    margin-top: 18px;
    transition: 0.25s ease;
}

.winter-attic-condensation-btn:hover,
.winter-attic-condensation-btn:active {
    background: #00ff2a;
    color: #111111;
}


/* =====================================
   WINTER HEAVY SNOW LOADS SECTION
===================================== */

.winter-heavy-snow-loads-section {
    width: 100%;
    background: #f2f2f2;
    padding: 70px 20px 85px;
}

.winter-heavy-snow-loads-container {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 48% 52%;
    align-items: center;
    column-gap: 50px;
}

.winter-heavy-snow-loads-text {
    max-width: 580px;
    transform: translateX(90px);
}

.winter-heavy-snow-loads-text h2,
.winter-heavy-snow-loads-text h3 {
    font-family: Arial, Helvetica, sans-serif;
    color: #2b2b2b;
    text-transform: uppercase;
    font-weight: 500;
}

.winter-heavy-snow-loads-text h2 {
    font-size: 25px;
    margin-bottom: 22px;
}

.winter-heavy-snow-loads-text h3 {
    font-size: 25px;
    margin-top: 36px;
    margin-bottom: 22px;
}

.winter-heavy-snow-loads-text p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.3;
    color: #2f2f2f;
    margin-bottom: 18px;
}

.winter-heavy-snow-loads-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 260px;
    height: 46px;
    background: #ff4b22;
    color: #ffffff;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    margin-top: 18px;
    transition: 0.25s ease;
}

.winter-heavy-snow-loads-btn:hover,
.winter-heavy-snow-loads-btn:active {
    background: #00ff2a;
    color: #111111;
}

.winter-heavy-snow-loads-image {
    width: 70%;
    border-right: 12px solid #ff4b22;
    border-bottom: 12px solid #ff4b22;
}

.winter-heavy-snow-loads-image img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    display: block;
}


/* =====================================
   WINTER RAPID TEMPERATURE CHANGES
===================================== */

.winter-temp-change-section {
    width: 100%;
    background: #ffffff;
    padding: 80px 20px 90px;
}

.winter-temp-change-container {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 48% 52%;
    align-items: center;
    column-gap: 55px;
}

.winter-temp-change-image {
    width: 75%;
    border-right: 12px solid #ff4b22;
    border-bottom: 12px solid #ff4b22;
    transform: translateX(95px);
}

.winter-temp-change-image img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    display: block;
}

.winter-temp-change-text {
    max-width: 620px;
    transform: translateX(-75px);
}

.winter-temp-change-text h2,
.winter-temp-change-text h3 {
    font-family: Arial, Helvetica, sans-serif;
    color: #2b2b2b;
    text-transform: uppercase;
    font-weight: 500;
}

.winter-temp-change-text h2 {
    font-size: 25px;
    margin-bottom: 22px;
}

.winter-temp-change-text h3 {
    font-size: 25px;
    margin-top: 36px;
    margin-bottom: 22px;
}

.winter-temp-change-text p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.3;
    color: #2f2f2f;
    margin-bottom: 18px;
}

.winter-temp-change-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 260px;
    height: 46px;
    background: #ff4b22;
    color: #ffffff;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    margin-top: 18px;
    transition: 0.25s ease;
}

.winter-temp-change-btn:hover,
.winter-temp-change-btn:active {
    background: #00ff2a;
    color: #111111;
}



/* =====================================
   WINTER CERTIFIED SPECIALISTS SECTION
===================================== */

.winter-certified-specialists-section {
    width: 100%;
    background: #f4f4f4;
    padding: 45px 20px 75px;
}

.winter-certified-specialists-container {
    max-width: 1380px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    gap: 28px;
    transform: translateX(120px);
}

.winter-certified-specialists-line {
    width: 18px;
    background: #ff4b22;
    flex-shrink: 0;
}

.winter-certified-specialists-content {
    padding: 50px 0 20px;
}

.winter-certified-specialists-content h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 35px;
    font-weight: 700;
    line-height: 1.45;
    color: #2b2b2b;
    text-transform: uppercase;
    margin-bottom: 18px;
    max-width: 980px;
}

.winter-certified-specialists-content p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.45;
    color: #2f2f2f;
    margin-bottom: 18px;
    max-width: 1090px;
}

.winter-certified-specialists-content ul {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.45;
    color: #2f2f2f;
    margin-left: 45px;
    margin-bottom: 18px;
}

.winter-certified-specialists-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 260px;
    height: 46px;
    background: #ff4b22;
    color: #ffffff;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    margin-top: 22px;
    transition: 0.25s ease;
}

.winter-certified-specialists-btn:hover,
.winter-certified-specialists-btn:active {
    background: #00ff2a;
    color: #111111;
}


/* =====================================
   WINTER COMMON ROOF ISSUES SECTION
===================================== */

.winter-common-issues-section {
    width: 100%;
    min-height: 1000px;
    display: grid;
    grid-template-columns: 52% 48%;
    overflow: hidden;
}

/* LEFT FIXED IMAGE */

.winter-common-issues-left {
    background-image: url("../images/winter-roof-damage-repair-6.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 900px;
}

/* RIGHT SCROLL IMAGE BACKGROUND */

.winter-common-issues-right {
    background-image: url("../images/winter-roof-damage-repair-6.png");
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    min-height: 900px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* WHITE CONTENT BOX */

.winter-common-issues-content {
    width: 550px;
    background: #f4f4f4;
    border-left: 18px solid #ff4b22;
    padding: 5px 65px 5px;
    margin-left: 0;
    padding-top: 50px;
    padding-bottom: 50px;
}

/* TITLE */

.winter-common-issues-content h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.5;
    color: #2b2b2b;
    text-transform: uppercase;
    margin-bottom: 28px;
}

/* LIST */

.winter-common-issues-content ul {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.3;
    color: #2f2f2f;
    margin-left: 28px;
    margin-bottom: 28px;
}

.winter-common-issues-content li {
    margin-bottom: 8px;
}

/* PARAGRAPHS */

.winter-common-issues-content p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.3;
    color: #2f2f2f;
    margin-bottom: 18px;
}

/* BUTTON */

.winter-common-issues-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 430px;
    min-height: 65px;
    background: #00ff2a;
    color: #111111;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.3px;
    line-height: 1.35;
    text-transform: uppercase;
    text-align: center;
    margin-top: 18px;
    transition: 0.25s ease;
}

.winter-common-issues-btn:hover,
.winter-common-issues-btn:active {
    background: #ff4b22;
    color: #ffffff;
}


/* ===================================
   WINTER ROOF REPAIR EXPERTS SECTION
=================================== */

.winter-contact-roof-repair-experts-section {

    width: 100%;

    background: #00ff26;

    padding-top: 65px;

    padding-bottom: 65px;

    text-align: center;
}



/* CONTENT */

.winter-contact-roof-repair-experts-content {

    width: 78%;

    max-width: 1000px;

    margin: 0 auto;
}



/* TITLE */

.winter-contact-roof-repair-experts-content h2 {

    font-size: 32px;

    font-weight: 600;

    color: #1f1f1f;

    margin-bottom: 34px;

    text-transform: uppercase;

    line-height: 1.1;
}



/* TEXT */

.winter-contact-roof-repair-experts-content p {

    font-size: 18px;

    line-height: 1.7;

    color: #111;

    max-width: 1000px;

    margin: 0 auto 55px auto;
}



/* BUTTON */

.winter-contact-roof-repair-experts-btn {

    display: inline-block;

    background: #ff4b22;

    color: #fff;

    text-decoration: none;

    padding: 15px 35px;

    font-size: 16px;

    letter-spacing: 1.3px;

    text-transform: uppercase;

    transition: 0.3s ease;
}



/* HOVER + CLICK */

.winter-contact-roof-repair-experts-btn:hover,
.winter-contact-roof-repair-experts-btn:active {

    background: #1f1f1f;

    color: #fff;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .winter-contact-roof-repair-experts-section {

        padding-top: 60px;

        padding-bottom: 70px;
    }

    .winter-contact-roof-repair-experts-content {

        width: 90%;
    }

    .winter-contact-roof-repair-experts-content h2 {

        font-size: 40px;
    }

    .winter-contact-roof-repair-experts-content p {

        font-size: 18px;

        line-height: 1.6;
    }

    .winter-contact-roof-repair-experts-btn {

        padding: 20px 60px;

        font-size: 18px;
    }
}





/* =========================
   TPO ROOFING HERO HTML PAGE
========================= */

.tpo-roofing-hero-section {
    position: relative;
    width: 100%;
    min-height: 700px;
    background-image: url("../images/tpo-roofing-1.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 8px solid #18ff4f;

}

.tpo-roofing-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.58);
    z-index: 1;
}

.tpo-roofing-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #ffffff;
    margin-top: 110px;
    padding: 0 25px;
}

.tpo-roofing-hero-content h1 {
    font-size: 56px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 28px;
    text-transform: uppercase;
}

.tpo-roofing-hero-content p {
    font-size: 25px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 35px;
    text-transform: uppercase;
}

.tpo-roofing-hero-buttons {
    display: flex;
    justify-content: center;
    gap: 50px;
}

.tpo-roofing-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 260px;
    height: 46px;
    background: #ff4b22;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.tpo-roofing-hero-btn:hover,
.tpo-roofing-hero-btn:active {
    background: #18ff4f;
    color: #ffffff;
}


/* =========================
   TPO COMMERCIAL INTRO SECTION
========================= */

.tpo-commercial-intro-section {
    position: relative;
    width: 100%;
    padding: 75px 0 60px;
    background-image: url("../images/champion-watermark.png");
    background-size: 760px auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #ffffff;
    overflow: hidden;
}

.tpo-commercial-intro-wrap {
    width: 73%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
}

.tpo-commercial-intro-text {
    width: 62%;
    border-left: 8px solid #555555;
    padding-left: 32px;
}

.tpo-commercial-intro-text h2 {
    color: #ff4b22;
    font-size: 25px;
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.tpo-commercial-intro-text p {
    color: #777777;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 400;
    margin-bottom: 20px;
}

.tpo-commercial-intro-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    width: 260px;
    height: 46px;
    background: #00ff40;
    color: #111111;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 1.3px;
    font-weight: 500;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.tpo-commercial-intro-btn:hover,
.tpo-commercial-intro-btn:active {
    background: #ff4b22;
    color: #ffffff;
}

.tpo-commercial-intro-image-area {
    position: relative;
    width: 400px;
    height: 405px;
    flex-shrink: 0;
}

.tpo-commercial-intro-image {
    position: relative;
    z-index: 2;
    width: 390px;
    height: 390px;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
}


/* =========================
   TPO MATERIAL COMPARISON SECTION
========================= */

.tpo-material-comparison-section {
    position: relative;
    width: 100%;
    min-height: 680px;
    background-image: url("../images/tpo-roofing-2.png");
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 50px 14% 50px 0;
    overflow: hidden;
}

.tpo-material-comparison-card {
    position: relative;
    width: 580px;
    background: #ffffff;
    padding: 40px 65px 40px;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.18);
}

.tpo-material-comparison-card::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 0;
    width: 26px;
    height: 100%;
    background: #ff4b22;
}

.tpo-material-comparison-card h2 {
    color: #ff4b22;
    font-size: 25px;
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.tpo-material-comparison-card p {
    color: #222222;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 400;
    margin-bottom: 18px;
}

.tpo-material-comparison-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    width: 400px;
    height: 50px;
    background: #00ff40;
    color: #111111;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 1.4px;
    font-weight: 500;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.tpo-material-comparison-btn:hover,
.tpo-material-comparison-btn:active {
    background: #ff4b22;
    color: #ffffff;
}



/* =========================
   TPO MATERIALS TEXT SECTION
========================= */

.tpo-materials-text-section {
    position: relative;
    width: 100%;
    padding: 35px 20px 35px;
    background-image: url("../images/mixed-black-background.png");
    background-size: contain;
    background-position: center center;
    background-repeat: repeat;
    overflow: hidden;
}

.tpo-materials-text-content {
    width: 72%;
    margin: 0 auto;
    text-align: center;
}

.tpo-materials-text-content h2 {
    color: #ffffff;
    font-size: 35px;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 34px;
    letter-spacing: 1px;
}

.tpo-materials-text-content p {
    color: #f1f1f1;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 400;
    max-width: 1300px;
    margin: 0 auto;
}



/* =========================
   TPO MATERIALS LIST SECTION
========================= */

.tpo-materials-list-section {
    position: relative;
    width: 100%;
    background: #efefef;
    overflow: hidden;
}

.tpo-materials-list-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 34%;
    height: 100%;
    background: #ff4b22;
    z-index: 1;
}

.tpo-materials-list-wrapper {
    position: relative;
    z-index: 2;
    width: 76%;
    margin: 0 auto;
    padding: 70px 0 90px;
}

.tpo-materials-list-item {
    display: flex;
    align-items: center;
    gap: 55px;
    background: #dddddd;
    padding: 52px 60px;
    margin-bottom: 28px;
}

.tpo-materials-list-image-box {
    flex-shrink: 0;
}

.tpo-materials-list-image {
    width: 185px;
    height: 185px;
    border-radius: 50%;
    object-fit: cover;
    border: 10px solid #666666;
}

.tpo-materials-list-text {
    flex: 1;
}

.tpo-materials-list-text h3 {
    color: #ff4b22;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 550;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.tpo-materials-list-text p {
    color: #444444;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 400;
}

.tpo-materials-list-button-wrap {
    text-align: center;
    margin-top: 65px;
}

.tpo-materials-list-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 46px;
    background: #00ff33;
    color: #111111;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 1.2px;
    font-weight: 500;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.tpo-materials-list-button:hover,
.tpo-materials-list-button:active {
    background: #ff4b22;
    color: #ffffff;
}


/* =========================
   TPO BENEFITS SECTION
========================= */

.tpo-benefits-icons-section {
    position: relative;
    width: 100%;
    padding: 60px 30px 75px;
    background-image: url("../images/mixed-black-background.png");
    background-size: 420px auto;
    background-position: center center;
    background-repeat: repeat;
    overflow: hidden;
}

.tpo-benefits-icons-content {
    width: 88%;
    margin: 0 auto;
    text-align: center;
}

.tpo-benefits-icons-content h2 {
    color: #ff4b22;
    font-size: 34px;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 85px;
    letter-spacing: 1px;
}

.tpo-benefits-icons-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    flex-wrap: nowrap;
}

.tpo-benefits-icons-item {
    width: 215px;
    text-align: center;
    margin-top: -50px;
}

.tpo-benefits-icons-item img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    margin-bottom: 26px;
}

.tpo-benefits-icons-item h3 {
    color: #ff4b22;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 550;
}


/* =========================
   TPO ESTIMATE CTA SECTION
========================= */

.tpo-estimate-cta-section {
    position: relative;
    width: 100%;
    padding: 65px 30px 70px;
    background-image: url("../images/champion-watermark.png");
    background-size: auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #f3f3f3;
    overflow: hidden;
}

.tpo-estimate-cta-content {
    width: 78%;
    margin: 0 auto;
    text-align: center;
}

.tpo-estimate-cta-content h2 {
    color: #ff4b22;
    font-size: 25px;
    line-height: 1.1;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 38px;
}

.tpo-estimate-cta-content p {
    color: #333333;
    font-size: 17px;
    line-height: 1.2;
    margin-bottom: 22px;
}

.tpo-estimate-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-top: 48px;
    flex-wrap: wrap;
}

.tpo-estimate-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 380px;
    height: 48px;
    background: #00ff33;
    color: #111111;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 1.3px;
    font-weight: 500;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.tpo-estimate-cta-btn:hover,
.tpo-estimate-cta-btn:active {
    background: #ff4b22;
    color: #ffffff;
}


/* =========================
   TPO SERVICES ICON SECTION
========================= */

.tpo-services-icon-section {
    position: relative;
    width: 100%;
    padding: 45px 30px 85px;
    background-image: url("../images/mixed-black-background.png");
    background-size: contain;
    background-position: center center;
    background-repeat: repeat;
    border-bottom: 10px solid #ff4b22;
    overflow: hidden;
}

.tpo-services-icon-wrapper {
    width: 78%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 85px;
}

.tpo-services-icon-item {
    width: 170px;
    text-align: center;
    text-decoration: none;
}

.tpo-services-icon-circle {
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    border-radius: 50%;
    background: #00ff33;
    border: 6px solid #ff4b22;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 9px 0 rgba(0, 0, 0, 0.55);
    transition: 0.25s ease;
}

.tpo-services-icon-circle img {
    width: 82px;
    height: 82px;
    object-fit: contain;
}

.tpo-services-icon-item h3 {
    color: #00ff33;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 550;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.tpo-services-icon-item:hover .tpo-services-icon-circle,
.tpo-services-icon-item:active .tpo-services-icon-circle {
    background: #ff4b22;
    border-color: #00ff33;
}

.tpo-services-icon-item:hover h3,
.tpo-services-icon-item:active h3 {
    color: #ff4b22;
}




/* ==================================
   EPDM ROOFING HERO HTML PAGE SECTION
====================================== */

.epdm-roofing-hero-section {
    position: relative;
    width: 100%;
    min-height: 800px;
    background-image: url("../images/epdm-roofing-1.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.epdm-roofing-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 1;
}

.epdm-roofing-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #ffffff;
    margin-top: 120px;
    padding: 0 30px;
}

.epdm-roofing-hero-content h1 {
    font-size: 58px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 28px;
    text-transform: uppercase;
}

.epdm-roofing-hero-content p {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 42px;
    text-transform: uppercase;
}

.epdm-roofing-hero-buttons {
    display: flex;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
}

.epdm-roofing-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 380px;
    height: 48px;
    background: #ff4b22;
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    letter-spacing: 1.3px;
    font-weight: 500;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.epdm-roofing-hero-btn:hover,
.epdm-roofing-hero-btn:active {
    background: #00ff33;
    color: #111111;
}



/* =========================
   EPDM TRUST ICONS SECTION
========================= */

.epdm-trust-icons-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.epdm-trust-icons-topbar {
    width: 100%;
    background: #00ff33;
    padding: 38px 30px;
    text-align: center;
}

.epdm-trust-icons-topbar h2 {
    color: #222222;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.epdm-trust-icons-topbar h2 span {
    font-weight: 800;
}

.epdm-trust-icons-content {
    width: 100%;
    background: #1f1f1f;
    padding: 35px 30px 55px;
}

.epdm-trust-icons-wrapper {
    width: 72%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    flex-wrap: nowrap;
}

.epdm-trust-icons-item {
    text-align: center;
}

.epdm-trust-icons-item img {
    width: 150px;
    height: auto;
    object-fit: contain;
    opacity: 0.88;
    transition: 0.25s ease;
}

.epdm-trust-icons-item:hover img {
    opacity: 1;
    transform: translateY(-6px);
}


/* =========================
   EPDM CONSULTATION SECTION
========================= */

.epdm-consultation-section {
    position: relative;
    width: 100%;
    background: #ffffff;
    padding: 0;
    overflow: hidden;
}

.epdm-consultation-wrapper {
    position: relative;
    width: 100%;
    max-width: 1850px;
    min-height: 980px;
    margin: 0 auto;
    background-image: url("../images/epdm-roofing-3.png");
    background-size: auto 110%;
    background-position: -5px top;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

/* LEFT TEXT */

.epdm-consultation-left {
    width: 48%;
    padding: 230px 0 0 250px;
}

.epdm-consultation-left-content {
    max-width: 660px;
    color: #ffffff;
}

.epdm-consultation-left-content h2 {
    font-size: 25px;
    line-height: 1.1;
    margin-bottom: 30px;
    font-weight: 600;
    text-transform: uppercase;
}

.epdm-consultation-left-content p {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 26px;
    color: #ffffff;
}

.epdm-consultation-green-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 360px;
    height: 48px;
    background: #00ff33;
    color: #111111;
    text-decoration: none;
    font-size: 17px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    margin-top: 10px;
    transition: 0.25s ease;
}

.epdm-consultation-green-btn:hover,
.epdm-consultation-green-btn:active {
    background: #ff4b22;
    color: #ffffff;
}

/* RIGHT FORM */

.epdm-consultation-form-box {
    width: 40%;
    background: #ffffff;
    padding: 10px 38px 32px;
    margin-top: 90px;
    margin-left: 28px;
}

.epdm-consultation-form-box h2 {
    font-size: 25px;
    line-height: 1;
    margin-bottom: 28px;
    font-weight: 550;
    color: #222222;
    text-transform: uppercase;
}

.epdm-consultation-form-group {
    margin-bottom: 22px;
}

.epdm-consultation-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #222222;
}

.epdm-consultation-form-group label span {
    color: #ff4b22;
    font-style: italic;
    font-weight: 400;
}

.epdm-consultation-name-row,
.epdm-consultation-contact-row {
    display: flex;
    gap: 12px;
}

.epdm-consultation-name-row input,
.epdm-consultation-contact-row input,
.epdm-consultation-form textarea {
    width: 100%;
    border: 1px solid #d2d2d2;
    background: #f8f8f8;
    padding: 12px 14px;
    font-size: 15px;
    outline: none;
}

.epdm-consultation-form textarea {
    height: 220px;
    resize: none;
}

.epdm-consultation-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.epdm-consultation-checkboxes label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 600;
}

.epdm-consultation-checkboxes input {
    width: 15px;
    height: 15px;
}

.epdm-consultation-orange-btn {
    width: 100%;
    height: 48px;
    border: none;
    background: #ff4b22;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    transition: 0.25s ease;
}

.epdm-consultation-orange-btn:hover,
.epdm-consultation-orange-btn:active {
    background: #00ff33;
    color: #111111;
}



/* =========================
   EPDM BENEFITS SECTION
========================= */

.epdm-benefits-section {
    position: relative;
    width: 100%;
    background: #ffffff;
    padding: 70px 0 90px;
    overflow: hidden;
}



/* WRAPPER */

.epdm-benefits-wrapper {
    position: relative;
    width: 100%;
    max-width: 1920px;
    min-height: 760px;
    margin: 0 auto;
    background-image: url("../images/epdm-roofing-2.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}



/* REMOVE OLD IMAGE */

.epdm-benefits-image {
    display: none;
}



/* WHITE CONTENT BOX */

.epdm-benefits-content-box {

    position: absolute;

    top: 85px;

    right: 13%;

    width: 47%;

    background: #f5f5f5;

    padding: 48px 52px 44px;

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

    z-index: 2;
}



/* TITLE */

.epdm-benefits-content-box h2 {

    font-size: 22px;

    font-weight: 600;

    line-height: 1.1;

    color: #1f1f1f;

    text-transform: uppercase;

    margin-bottom: 24px;
}



/* PARAGRAPH */

.epdm-benefits-content-box p {

    font-size: 17px;

    line-height: 1.3;

    color: #555555;

    margin-bottom: 18px;
}



/* LIST */

.epdm-benefits-content-box ul {

    padding-left: 28px;

    margin-bottom: 34px;
}

.epdm-benefits-content-box ul li {

    font-size: 16px;

    line-height: 1.2;

    color: #555555;

    margin-bottom: 5px;
}



/* GREEN BUTTON */

.epdm-benefits-green-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 380px;

    height: 48px;

    background: #00ff33;

    color: #111111;

    text-decoration: none;

    font-size: 16px;

    letter-spacing: 1.3px;

    text-transform: uppercase;

    transition: all 0.25s ease;
}



/* HOVER */

.epdm-benefits-green-btn:hover,
.epdm-benefits-green-btn:active {

    background: #ff4b22;

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .epdm-benefits-section {

        padding: 40px 0 50px;
    }

    .epdm-benefits-wrapper {

        min-height: auto;

        background-position: center top;

        padding: 40px 20px;
    }

    .epdm-benefits-content-box {

        position: relative;

        top: auto;

        right: auto;

        width: 100%;

        padding: 35px 28px;
    }

    .epdm-benefits-content-box h2 {

        font-size: 24px;
    }

    .epdm-benefits-green-btn {

        width: 100%;
    }
}



/* =========================
   EPDM COMPARISON TEXT SECTION
========================= */

.epdm-comparison-text-section {

    position: relative;

    width: 100%;

    background: #ffffff;

    padding-top: 50px;

    padding-bottom: 50px;

    overflow: hidden;
    margin-top: -80px;
}





/* CONTENT WRAPPER */

.epdm-comparison-text-wrapper {

    position: relative;

    width: 74%;

    max-width: 1450px;

    margin: 0 auto;

    padding-left: 55px;

    align-items: center;
}





/* GREEN VERTICAL BAR */

.epdm-comparison-text-wrapper::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 18px;

    height: 130%;

    background: #00ff33;
    top: -25px;
}





/* TEXT CONTENT */

.epdm-comparison-text-content {

    width: 100%;
}





/* TITLE */

.epdm-comparison-text-content h2 {

    font-size: 22px;

    line-height: 1.1;

    font-weight: 600;

    text-transform: uppercase;

    color: #222222;

    margin-bottom: 30px;
}





/* PARAGRAPHS */

.epdm-comparison-text-content p {

    font-size: 15px;

    line-height: 1.3;

    color: #2f2f2f;

    margin-bottom: 20px;

    max-width: 1450px;
}





/* REMOVE LAST MARGIN */

.epdm-comparison-text-content p:last-child {

    margin-bottom: 0;
}





/* RESPONSIVE */

@media (max-width: 991px) {

    .epdm-comparison-text-section {

        padding-top: 80px;

        padding-bottom: 80px;
    }

    .epdm-comparison-text-wrapper {

        width: 90%;

        padding-left: 38px;
    }

    .epdm-comparison-text-wrapper::before {

        width: 18px;
    }

    .epdm-comparison-text-content h2 {

        font-size: 28px;
    }

    .epdm-comparison-text-content p {

        font-size: 18px;

        line-height: 1.5;
    }
}




/* =========================
   EPDM MATERIALS LIST SECTION
========================= */

.epdm-materials-list-section {
    position: relative;
    width: 100%;
    background: #eeeeee;
    overflow: hidden;
}

.epdm-materials-list-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 33%;
    height: 100%;
    background: #ff4b22;
    z-index: 1;
}

.epdm-materials-list-wrapper {
    position: relative;
    z-index: 2;
    width: 74%;
    margin: 0 auto;
    padding: 90px 0 105px;
}

.epdm-materials-list-intro {
    text-align: right;
    margin-bottom: 70px;
    margin-left: auto;
    padding-left: 620px;
}

.epdm-materials-list-intro h2 {
    color: #222222;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.epdm-materials-list-intro p {
    color: #333333;
    font-size: 16px;
    line-height: 1.3;
    max-width: 500px;
    margin: 0 auto 28px;
}

.epdm-materials-list-top-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 380px;
    height: 46px;
    background: #ff4b22;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.epdm-materials-list-top-btn:hover,
.epdm-materials-list-top-btn:active {
    background: #00ff33;
    color: #111111;
}

.epdm-materials-list-item {
    display: flex;
    align-items: center;
    gap: 50px;
    background: #ffffff;
    padding: 55px 60px;
    margin-bottom: 28px;
}

.epdm-materials-list-icon {

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background: #222222;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;
}



.epdm-materials-list-icon img {

    width: 90px;

    height: 92px;

    object-fit: cover;
    border-radius: 50%;
}

.epdm-materials-list-text h3 {
    color: #ff4b22;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.epdm-materials-list-text p {
    color: #555555;
    font-size: 17px;
    line-height: 1.3;
}


/* =========================
   EPDM SERVICE ICONS SECTION
========================= */

.epdm-service-icons-section {

    position: relative;

    width: 100%;

    padding-top: 35px;

    padding-bottom: 35px;

    background-image: url("../images/mixed-black-background.png");

    background-size: contain;

    background-position: center;

    background-repeat: repeat;

    overflow: hidden;
}



/* OVERLAY */

.epdm-service-icons-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.28);

    z-index: 1;
}



/* WHITE BOX */

.epdm-service-icons-box {

    position: relative;

    z-index: 2;

    width: 72%;

    max-width: 1350px;

    margin: 0 auto;

    background: #f4f4f4;

    padding: 28px 45px;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;
}



/* EACH ITEM */

.epdm-service-icons-item {

    width: 170px;

    text-align: center;

    text-decoration: none;
}



/* GREEN CIRCLE */

.epdm-service-icons-circle {

    width: 110px;
    height: 110px;
    margin: 0 auto 30px;
    border-radius: 50%;
    background: #00ff2f;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
}



/* ICON */

.epdm-service-icons-circle img {

    width: 58px;
    height: 58px;
    object-fit: contain;
    border-radius: 50%;
}



/* HOVER */

.epdm-service-icons-item:hover .epdm-service-icons-circle {

    background: #ff4b1f;
}



/* TEXT */

.epdm-service-icons-item h3 {

    color: #333333;
    font-size: 17px;
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .epdm-service-icons-box {

        width: 92%;

        flex-wrap: wrap;

        justify-content: center;

        gap: 40px;
    }

    .epdm-service-icons-item {

        width: 160px;
    }
}



/* =========================
   EPDM FINAL CTA TEXT SECTION
========================= */

.epdm-final-text-section {
    width: 100%;
    background: #ffffff;
    padding: 70px 0 100px;
    overflow: hidden;
}

.epdm-final-text-wrapper {
    position: relative;
    width: 74%;
    max-width: 1450px;
    margin: 0 auto;
    padding-left: 68px;
}

.epdm-final-text-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 110%;
    background: #ff4b22;
}

.epdm-final-text-content h2 {
    color: #222222;
    font-size: 20px;
    line-height: 1.15;
    font-weight: 550;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.epdm-final-text-content p {
    color: #222222;
    font-size: 17px;
    line-height: 1.2;
    margin-bottom: 22px;
}

.epdm-final-text-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 45px;
    margin-top: 10px;
    background: #ff4b22;
    color: #ffffff;
    text-decoration: none;
    font-size: 17px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.epdm-final-text-btn:hover,
.epdm-final-text-btn:active {
    background: #00ff33;
    color: #111111;
}




/* =========================
   EPDM CTA BANNER SECTION
========================= */

.epdm-cta-banner-section {

    position: relative;

    width: 100%;

    padding-top: 80px;

    padding-bottom: 80px;

}



/* DARK OVERLAY */

.epdm-cta-banner-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(18, 18, 18, 0.05);

    z-index: 1;
}



/* CONTENT */

.epdm-cta-banner-content {

    position: relative;

    z-index: 2;

    width: 74%;

    max-width: 1150px;

    margin: 0 auto;

    text-align: center;
}



/* TITLE */

.epdm-cta-banner-content h2 {

    color: #ffffff;

    font-size: 30px;

    line-height: 1.1;

    font-weight: 500;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    margin-bottom: 42px;
}



/* TEXT */

.epdm-cta-banner-content p {

    color: #ffffff;

    font-size: 17px;

    line-height: 1.3;

    margin-bottom: 30px;

    font-weight: 400;
}



/* BUTTON WRAPPER */

.epdm-cta-banner-buttons {

    margin-top: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 34px;
}



/* BUTTONS */

.epdm-cta-banner-btn-orange,
.epdm-cta-banner-btn-green {

    width: 300px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    font-size: 17px;

    letter-spacing: 1px;

    text-transform: uppercase;

    transition: 0.3s ease;
}



/* ORANGE BUTTON */

.epdm-cta-banner-btn-orange {

    background: #ff4b1f;

    color: #ffffff;
}



/* GREEN BUTTON */

.epdm-cta-banner-btn-green {

    background: #00ff2f;

    color: #111111;
}



/* HOVER */

.epdm-cta-banner-btn-orange:hover {

    background: #00ff2f;

    color: #111111;
}

.epdm-cta-banner-btn-green:hover {

    background: #ff4b1f;

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .epdm-cta-banner-content {

        width: 90%;
    }

    .epdm-cta-banner-content h2 {

        font-size: 34px;

        letter-spacing: 4px;
    }

    .epdm-cta-banner-content p {

        font-size: 18px;
    }

    .epdm-cta-banner-buttons {

        flex-direction: column;

        gap: 22px;
    }

    .epdm-cta-banner-btn-orange,
    .epdm-cta-banner-btn-green {

        width: 100%;
    }
}



/* ===================================
   ELASTOMERIC COATINGS HERO HTML PAGE
=================================== */

.elastomeric-coatings-hero {
    position: relative;
    width: 100%;
    min-height: 800px;
    background-image: url("../images/elastomeric-coatings-1.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.elastomeric-coatings-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    z-index: 1;
}

.elastomeric-coatings-content {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1250px;
    margin-top: 105px;
}

.elastomeric-coatings-content h1 {
    color: #ffffff;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 22px;
}

.elastomeric-coatings-content h2 {
    color: #ffffff;
    font-size: 19px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 38px;
}

.elastomeric-coatings-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 45px;
}

.elastomeric-coatings-btn {
    width: 390px;
    height: 50px;
    background: #ff4b1f;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.5px;
    transition: 0.25s ease;
}

.elastomeric-coatings-btn:hover,
.elastomeric-coatings-btn:active {
    background: #19d719;
    color: #ffffff;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .elastomeric-coatings-hero {
        min-height: 720px;
        background-attachment: scroll;
    }

    .elastomeric-coatings-content h1 {
        font-size: 38px;
    }

    .elastomeric-coatings-content h2 {
        font-size: 19px;
    }

    .elastomeric-coatings-buttons {
        flex-direction: column;
        gap: 18px;
    }

    .elastomeric-coatings-btn {
        width: 90%;
        max-width: 430px;
    }
}

@media (max-width: 600px) {
    .elastomeric-coatings-hero {
        min-height: 650px;
    }

    .elastomeric-coatings-content {
        margin-top: 70px;
    }

    .elastomeric-coatings-content h1 {
        font-size: 30px;
    }

    .elastomeric-coatings-content h2 {
        font-size: 16px;
    }
}



/* =========================
   ELASTOMERIC COATINGS BADGES
========================= */

.elastomeric-coatings-badges-section {
    width: 100%;
    background: #222222;
}

.elastomeric-coatings-service-bar {
    width: 100%;
    background: #00f035;
    padding: 38px 20px;
    text-align: center;
}

.elastomeric-coatings-service-bar p {
    margin: 0;
    color: #22313a;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.elastomeric-coatings-service-bar strong {
    font-weight: 900;
}

.elastomeric-coatings-badges-area {
    width: 100%;
    background: #252525;
    padding: 100px 20px 100px;
}

.elastomeric-coatings-badges-row {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
}

.elastomeric-coatings-badges-row img {
    width: 165px;
    height: 165px;
    object-fit: contain;
    opacity: 0.82;
}


/* RESPONSIVE */

@media (max-width: 1100px) {
    .elastomeric-coatings-badges-row {
        flex-wrap: wrap;
        gap: 45px;
    }
}

@media (max-width: 700px) {
    .elastomeric-coatings-service-bar {
        padding: 38px 18px;
    }

    .elastomeric-coatings-service-bar p {
        font-size: 20px;
        line-height: 1.4;
    }

    .elastomeric-coatings-badges-area {
        padding: 65px 20px;
    }

    .elastomeric-coatings-badges-row img {
        width: 135px;
        height: 135px;
    }
}



/* =========================
   ELASTOMERIC INFO + FORM
========================= */

.elastomeric-info-form-section {
    width: 100%;
    background: #f3f3f3;
    padding: 90px 20px 115px;
}

.elastomeric-info-form-wrap {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: 65px;
    align-items: start;
}

.elastomeric-info-left {
    padding-top: 70px;
}

.elastomeric-info-left h2 {
    color: #ff4b1f;
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.elastomeric-info-left p {
    color: #4b4b4b;
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 10px;
}

.elastomeric-info-text-link {
    display: inline-block;
    color: #ff4b1f;
    font-size: 18px;
    text-decoration: none;
    margin-top: 1.3px;
    margin-bottom: 34px;
}

.elastomeric-info-text-link:hover {
    color: #00f035;
}

.elastomeric-info-green-btn {
    width: 100%;
    height: 58px;
    background: #00f035;
    color: #101010;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 1.3px;
    margin-bottom: 34px;
    transition: 0.25s ease;
}

.elastomeric-info-green-btn:hover,
.elastomeric-info-green-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}

.elastomeric-benefits-card {
    background: #ffffff;
    padding: 42px 42px 50px;
}

.elastomeric-benefits-card img {
    width: 100%;
    display: block;
    margin-bottom: 34px;
}

.elastomeric-benefits-card h3 {
    color: #ff4b1f;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 28px;
}

.elastomeric-benefits-card p {
    font-size: 16px;
    line-height: 1.3;
    color: #4b4b4b;
}

.elastomeric-consultation-form {
    background: #252525;
    padding: 85px 48px 55px;
    color: #ffffff;
}

.elastomeric-consultation-form h2 {
    font-size: 25px;
    line-height: 1.1;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 35px;
}

.elastomeric-consultation-form label {
    display: block;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 8px;
}

.elastomeric-consultation-form label span {
    color: #ff4b1f;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
}

.elastomeric-consultation-form input,
.elastomeric-consultation-form textarea {
    background: #ffffff;
    border: none;
    outline: none;
    border-radius: 4px;
    font-size: 15px;
    padding: 12px;
}

.elastomeric-name-row,
.elastomeric-contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 42px;
}

.elastomeric-name-row input {
    width: 100%;
    height: 52px;
}

.elastomeric-contact-row input {
    width: 145px;
    height: 52px;
}

.elastomeric-check-list {
    border-top: 1px solid #999999;
    padding-top: 14px;
    margin-bottom: 28px;
}

.elastomeric-check-list label,
.elastomeric-email-options label {
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 600;
}

.elastomeric-check-list input,
.elastomeric-email-options input {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}

.elastomeric-consultation-form textarea {
    width: 100%;
    height: 220px;
    resize: vertical;
    margin-top: 8px;
    margin-bottom: 24px;
}

.elastomeric-email-options {
    border-top: 1px solid #999999;
    padding-top: 12px;
    margin-bottom: 28px;
}

.elastomeric-submit-btn {
    width: 100%;
    height: 48px;
    border: none;
    background: #ff4b1f;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    transition: 0.25s ease;
}

.elastomeric-submit-btn:hover,
.elastomeric-submit-btn:active {
    background: #00f035;
    color: #101010;
}


/* RESPONSIVE */

@media (max-width: 1000px) {
    .elastomeric-info-form-wrap {
        grid-template-columns: 1fr;
    }

    .elastomeric-info-left {
        padding-top: 0;
    }
}

@media (max-width: 650px) {
    .elastomeric-info-form-section {
        padding: 60px 18px;
    }

    .elastomeric-info-left h2,
    .elastomeric-benefits-card h3,
    .elastomeric-consultation-form h2 {
        font-size: 25px;
    }

    .elastomeric-info-left p {
        font-size: 17px;
    }

    .elastomeric-info-green-btn {
        height: auto;
        min-height: 60px;
        padding: 14px;
        font-size: 14px;
        letter-spacing: 3px;
        text-align: center;
    }

    .elastomeric-benefits-card {
        padding: 28px;
    }

    .elastomeric-consultation-form {
        padding: 45px 25px;
    }

    .elastomeric-name-row,
    .elastomeric-contact-row {
        grid-template-columns: 1fr;
    }

    .elastomeric-contact-row input {
        width: 100%;
    }
}


/* =========================
   ELASTOMERIC BENEFITS LIST
========================= */

.elastomeric-benefits-list-section {
    position: relative;
    width: 100%;
    background: #ffffff;
    padding: 85px 0 80px;
    overflow: hidden;
}

.elastomeric-benefits-orange-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 33%;
    height: 100%;
    background: #ff4b1f;
    z-index: 1;
}

.elastomeric-benefits-list-content {
    position: relative;
    z-index: 2;
    width: 71%;
    max-width: 1360px;
    margin-left: 13.8%;
}

.elastomeric-benefits-list-content > h2 {
    color: #252525;
    text-align: center;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 48px;
    padding-left: 500px;
}

.elastomeric-benefit-row {
    width: 100%;
    min-height: 230px;
    background: #f4f4f4;
    display: grid;
    grid-template-columns: 260px 1fr;
    align-items: center;
    column-gap: 45px;
    padding: 45px 55px;
    margin-bottom: 26px;
}

.elastomeric-benefit-row img {
    width: 185px;
    height: 185px;
    border-radius: 50%;
    object-fit: cover;
    justify-self: center;
}

.elastomeric-benefit-text h3 {
    color: #ff4b1f;
    font-size: 20px;
    line-height: 1.15;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px;
}

.elastomeric-benefit-text p {
    color: #4b4b4b;
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 18px;
}

.elastomeric-benefit-text strong {
    font-weight: 800;
}


/* RESPONSIVE */

@media (max-width: 900px) {
    .elastomeric-benefits-orange-block {
        width: 22%;
    }

    .elastomeric-benefit-row {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 42px 28px;
    }

    .elastomeric-benefit-row img {
        margin-bottom: 24px;
    }
}

@media (max-width: 600px) {
    .elastomeric-benefits-list-section {
        padding: 75px 16px 50px;
    }

    .elastomeric-benefits-list-content > h2 {
        font-size: 22px;
    }

    .elastomeric-benefit-text h3 {
        font-size: 22px;
    }

    .elastomeric-benefit-text p {
        font-size: 17px;
    }

    .elastomeric-benefit-row img {
        width: 145px;
        height: 145px;
    }
}


/* =========================
   ELASTOMERIC FREE ESTIMATE
========================= */

.elastomeric-free-estimate-strip {
    width: 100%;
    background: #232323;
    padding: 55px 20px;
}

.elastomeric-free-estimate-content {
    max-width: 1450px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    padding-right: 200px;
}

.elastomeric-free-estimate-content h2 {
    color: #ffffff;
    font-size: 28px;
    font-weight: 300;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    margin: 0;
    padding-left: 180px;
}

.elastomeric-free-estimate-btn {
    width: 280px;
    height: 46px;
    background: #00f035;
    color: #111111;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.elastomeric-free-estimate-btn:hover,
.elastomeric-free-estimate-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .elastomeric-free-estimate-content {
        flex-direction: column;
        text-align: center;
    }

    .elastomeric-free-estimate-content h2 {
        font-size: 30px;
        letter-spacing: 5px;
    }
}

@media (max-width: 600px) {

    .elastomeric-free-estimate-strip {
        padding: 45px 18px;
    }

    .elastomeric-free-estimate-content h2 {
        font-size: 23px;
        letter-spacing: 3px;
    }

    .elastomeric-free-estimate-btn {
        width: 100%;
        max-width: 320px;
    }
}



/* =========================
   ELASTOMERIC COATING TYPES
========================= */

.elastomeric-coating-types-section {
    width: 100%;
    background-image: url("../images/mixed-black-background.png");
    background-size: auto;
    background-position: center center;
    background-repeat: repeat;
    background-attachment: fixed;
    padding: 110px 20px;
}

.elastomeric-coating-types-box {
    max-width: 1250px;
    margin: 0 auto;
    background: #ffffff;
    padding: 80px 65px 90px;
    text-align: center;
}

.elastomeric-coating-types-box h2 {
    color: #252525;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.elastomeric-coating-types-intro {
    max-width: 820px;
    margin: 0 auto 68px;
    color: #444444;
    font-size: 16px;
    line-height: 1.3;
}

.elastomeric-coating-types-intro span {
    color: #00f035;
}

.elastomeric-coating-types-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 42px;
}

.elastomeric-coating-type-item {
    text-align: center;
}

.elastomeric-coating-type-icon {
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: #00f035;
    margin: 0 auto 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.elastomeric-coating-type-icon img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    display: block;
}

.elastomeric-coating-type-item h3 {
    color: #252525;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.elastomeric-coating-type-item p {
    color: #444444;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
}


/* RESPONSIVE */

@media (max-width: 1050px) {
    .elastomeric-coating-types-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 55px 45px;
    }
}

@media (max-width: 650px) {
    .elastomeric-coating-types-section {
        background-attachment: scroll;
        padding: 70px 16px;
    }

    .elastomeric-coating-types-box {
        padding: 55px 25px;
    }

    .elastomeric-coating-types-grid {
        grid-template-columns: 1fr;
    }
}



/* =========================
   ELASTOMERIC COMMERCIAL SYSTEMS
========================= */

.elastomeric-commercial-systems-section {
    width: 100%;
    background: #ffffff;
    padding: 95px 20px;
}

.elastomeric-commercial-systems-wrap {
    width: 88%;
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 40px;
    align-items: stretch;
    margin-left: 120px;
}

.elastomeric-commercial-systems-line {
    width: 20px;
    height: 100%;
    background: #ff4b1f;
}

.elastomeric-commercial-systems-content {
    padding-top: 15px;
    max-width: 1350px;
}

.elastomeric-commercial-systems-content h2 {
    color: #252525;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.elastomeric-commercial-systems-content p {
    color: #2f2f2f;
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 18px;
}

.elastomeric-commercial-systems-btn {
    width: 240px;
    height: 46px;
    background: #00f035;
    color: #111111;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    font-size: 18px;
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.elastomeric-commercial-systems-btn:hover,
.elastomeric-commercial-systems-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}


/* =========================
   ELASTOMERIC PROTECT ROOF
========================= */

.elastomeric-protect-roof-section {
    width: 100%;
    min-height: 320px;
    background-image: url("../images/elastomeric-coatings-3.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 80px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.elastomeric-protect-roof-box {
    width: 82%;
    max-width: 1300px;
    background: #ffffff;
    padding: 75px 55px 90px;
}

.elastomeric-protect-roof-box h2 {
    color: #252525;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.elastomeric-protect-roof-box p {
    color: #444444;
    font-size: 17px;
    line-height: 1.4;
    margin-bottom: 18px;
}

.elastomeric-protect-roof-text-link {
    color: #ff4b1f;
    text-decoration: none;
}

.elastomeric-protect-roof-text-link:hover {
    color: #00f035;
}

.elastomeric-protect-roof-buttons {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-top: 40px;
}

.elastomeric-protect-roof-green-btn,
.elastomeric-protect-roof-orange-btn {
    width: 320px;
    height: 46px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.elastomeric-protect-roof-green-btn {
    background: #00f035;
    color: #111111;
}

.elastomeric-protect-roof-green-btn:hover,
.elastomeric-protect-roof-green-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}

.elastomeric-protect-roof-orange-btn {
    background: #ff4b1f;
    color: #ffffff;
}

.elastomeric-protect-roof-orange-btn:hover,
.elastomeric-protect-roof-orange-btn:active {
    background: #00f035;
    color: #111111;
}


/* RESPONSIVE */

@media (max-width: 900px) {
    .elastomeric-protect-roof-section {
        background-attachment: scroll;
        padding: 70px 20px;
    }

    .elastomeric-protect-roof-box {
        width: 92%;
        padding: 55px 30px;
    }

    .elastomeric-protect-roof-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .elastomeric-protect-roof-green-btn,
    .elastomeric-protect-roof-orange-btn {
        width: 100%;
        max-width: 420px;
    }
}



/* =========================
   ELASTOMERIC AFFILIATIONS
========================= */

.elastomeric-affiliations-section {
    width: 100%;
    background: #f3f3f3;
    padding: 20px 20px 40px;
}

.elastomeric-affiliations-container {
    max-width: 1300px;
    margin: 0 auto;
    text-align: center;
}

.elastomeric-affiliations-container h2 {
    color: #252525;
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 55px;
    margin-top: 20px;
}

.elastomeric-affiliations-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.elastomeric-affiliations-logos img {
    max-height: 55px;
    width: auto;
    object-fit: contain;
    display: block;
    background: transparent;
     mix-blend-mode: multiply;
}

.elastomeric-affiliations-logos img:hover,
.elastomeric-affiliations-logos img:active {
    background: #ffffff;
    transform: scale(1.08);
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .elastomeric-affiliations-logos {
        gap: 22px;
    }

    .elastomeric-affiliations-logos img {
        max-height: 75px;
    }
}

@media (max-width: 600px) {

    .elastomeric-affiliations-section {
        padding: 55px 15px 70px;
    }

    .elastomeric-affiliations-container h2 {
        font-size: 25px;
        margin-bottom: 40px;
    }

    .elastomeric-affiliations-logos {
        gap: 18px;
    }

    .elastomeric-affiliations-logos img {
        max-height: 60px;
    }
}






/* ===================================
   COMMERCIAL METAL ROOFING HERO HTML PAGE
=================================== */

.commercial-metal-roofing-hero {

    position: relative;

    width: 100%;

    min-height: 700px;

    background-image: url("../images/commercial-metal-roofing-1.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;
}



/* DARK OVERLAY */

.commercial-metal-roofing-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.48);

    z-index: 1;
}



/* CONTENT */

.commercial-metal-roofing-content {

    position: relative;

    z-index: 2;

    text-align: center;

    padding: 0 20px;

    margin-top: 40px;
}



/* MAIN TITLE */

.commercial-metal-roofing-content h1 {

    font-size: 42px;

    font-weight: 800;

    color: #ffffff;

    text-transform: uppercase;

    margin-bottom: 28px;

    line-height: 1;

    letter-spacing: 1px;
}



/* SUBTITLE */

.commercial-metal-roofing-content h2 {

    font-size: 30px;

    font-weight: 600;

    color: #ffffff;

    text-transform: uppercase;

    margin-bottom: 52px;

    letter-spacing: 1px;
}



/* BUTTON WRAPPER */

.commercial-metal-roofing-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 42px;

    flex-wrap: wrap;
}



/* BUTTON STYLE */

.commercial-metal-roofing-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 275px;

    height: 48px;

    background: #ff4b1f;

    color: #ffffff;

    text-decoration: none;

    text-transform: uppercase;

    font-size: 17px;

    font-weight: 500;

    letter-spacing: 1px;

    transition: all 0.3s ease;
}



/* HOVER + CLICK */

.commercial-metal-roofing-btn:hover,
.commercial-metal-roofing-btn:focus,
.commercial-metal-roofing-btn:active {

    background: #00ff2a;

    color: #111111;
}



/* GREEN LINE */

.commercial-metal-roofing-green-line {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 9px;

    background: #00ff2a;

    z-index: 3;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .commercial-metal-roofing-hero {

        min-height: 760px;

        background-attachment: scroll;
    }

    .commercial-metal-roofing-content h1 {

        font-size: 56px;
    }

    .commercial-metal-roofing-content h2 {

        font-size: 26px;
    }

    .commercial-metal-roofing-btn {

        width: 250px;

        height: 72px;

        font-size: 24px;
    }
}



@media (max-width: 767px) {

    .commercial-metal-roofing-hero {

        min-height: 680px;
    }

    .commercial-metal-roofing-content h1 {

        font-size: 42px;

        line-height: 1.1;
    }

    .commercial-metal-roofing-content h2 {

        font-size: 20px;

        line-height: 1.4;
    }

    .commercial-metal-roofing-buttons {

        gap: 22px;
    }

    .commercial-metal-roofing-btn {

        width: 100%;

        max-width: 320px;

        height: 68px;

        font-size: 21px;
    }
}



/* ===================================
   COMMERCIAL METAL PROTECTION SECTION
=================================== */

.commercial-metal-protection-section {
    width: 100%;
    background-image: url("../images/champion-watermark.png");
    background-size: auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    padding: 45px 55px;
    overflow: hidden;
}

.commercial-metal-protection-container {
    max-width: 1150px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 90px;
}

.commercial-metal-protection-text {
    display: flex;
    align-items: stretch;
    gap: 30px;
    flex: 1.2;
}

.commercial-metal-protection-line {
    width: 10px;
    background: #6d6d6d;
    min-height: 400px;
}

.commercial-metal-protection-content {
    padding-top: 40px;
}

.commercial-metal-protection-content h2 {
    color: #ff4b22;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    max-width: 900px;
    margin-bottom: 34px;
}

.commercial-metal-protection-content p {
    color: #707070;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.2;
    margin-bottom: 18px;
    max-width: 920px;
}

.commercial-metal-protection-btn {
    display: inline-block;
    margin-top: 18px;
    background: #00ff2a;
    color: #111111;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    padding: 18px 32px;
    transition: 0.3s ease;
}

.commercial-metal-protection-btn:hover,
.commercial-metal-protection-btn:active {
    background: #ff4b22;
    color: #ffffff;
}

.commercial-metal-protection-image-wrap {
    position: relative;
    width: 340px;
    height: 340px;
    flex-shrink: 0;
}

.commercial-metal-protection-image-wrap img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    background: transparent;

    box-shadow: none;
    margin-left: -40px;
}

/* remove orange box */
.commercial-metal-protection-orange-box {
    display: none;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .commercial-metal-protection-section {
        padding: 70px 25px;
        background-size: 90%;
    }

    .commercial-metal-protection-container {
        flex-direction: column;
        gap: 70px;
    }

    .commercial-metal-protection-text {
        width: 100%;
    }

    .commercial-metal-protection-image-wrap {
        width: 100%;
        max-width: 420px;
        height: auto;
    }

    .commercial-metal-protection-image-wrap img {
        height: auto;
    }

    .commercial-metal-protection-content h2 {
        font-size: 28px;
    }
}




/* ===================================
   COMMERCIAL METAL BENEFITS SECTION
=================================== */

.commercial-metal-benefits-section {
    position: relative;
    width: 100%;
    min-height: 980px;
    background-image: url("../images/commercial-metal-roofing-2.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: hidden;
    padding: 0;
}

.commercial-metal-benefits-left {
    display: none;
}

.commercial-metal-benefits-right {
    display: none;
}

.commercial-metal-benefits-card {
    position: relative;
    z-index: 2;
    width: 560px;
    min-height: 680px;
    background: #ffffff;
    border-left: 22px solid #ff4b1f;
    padding: 18px 55px 30px;
    margin-left: 50%;
    margin-top: 65px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.commercial-metal-benefits-card h2 {
    color: #ff4b1f;
    font-size: 22px;
    line-height: 1.05;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.commercial-metal-benefits-card p,
.commercial-metal-benefits-card li {
    color: #252525;
    font-size: 16px;
    line-height: 1.2;
}

.commercial-metal-benefits-card p {
    margin-bottom: 18px;

}

.commercial-metal-benefits-card ul {
    padding-left: 28px;
    margin-bottom: 24px;
}

.commercial-metal-benefits-card li {
    margin-bottom: 8px;
}

.commercial-metal-benefits-btn {
    width: 280px;
    height: 48px;
    background: #00f035;
    color: #111111;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
    font-size: 17px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.commercial-metal-benefits-btn:hover,
.commercial-metal-benefits-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}


/* RESPONSIVE */

@media (max-width: 900px) {
    .commercial-metal-benefits-section {
        background-attachment: scroll;
        padding: 60px 20px;
    }

    .commercial-metal-benefits-card {
        width: 100%;
        min-height: auto;
        margin-left: 0;
        padding: 38px 32px 50px;
    }

    .commercial-metal-benefits-btn {
        width: 100%;
        max-width: 340px;
    }
}




/* ===================================
   COMMERCIAL METAL MATERIALS SECTION
=================================== */

.commercial-metal-materials-section {
    position: relative;
    width: 100%;
    min-height: 180px;
    background-image: url("../images/commercial-metal-roofing-3.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 90px 0;
    overflow: hidden;
}

.commercial-metal-materials-card {
    width: 550px;
    background: #ffffff;
    border-left: 22px solid #ff4b1f;
    padding: 15px 58px 22px;
    margin-left: 13%;
    margin-top: 0;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
}

.commercial-metal-materials-card h2 {
    color: #ff4b1f;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 32px;
}

.commercial-metal-materials-card p {
    color: #252525;
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 0;
}

.commercial-metal-materials-btn {
    width: 240px;
    height: 46px;
    background: #00f035;
    color: #111111;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 34px;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.commercial-metal-materials-btn:hover,
.commercial-metal-materials-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}


/* RESPONSIVE */

@media (max-width: 900px) {
    .commercial-metal-materials-section {
        background-attachment: scroll;
        padding: 60px 20px;
    }

    .commercial-metal-materials-card {
        width: 100%;
        margin-left: 0;
        padding: 42px 32px 50px;
    }

    .commercial-metal-materials-card h2 {
        font-size: 26px;
    }

    .commercial-metal-materials-card p {
        font-size: 17px;
    }

    .commercial-metal-materials-btn {
        width: 100%;
        max-width: 320px;
    }
}



/* ===================================
   COMMERCIAL METAL MUELLER SECTION
=================================== */

.commercial-metal-mueller-section {
    width: 100%;
    background-image: url("../images/mixed-black-background.png");
    background-size: contain;
    background-position: center center;
    background-repeat: repeat;
    padding: 60px 20px 70px;
    text-align: center;
}

.commercial-metal-mueller-content {
    max-width: 1250px;
    margin: 0 auto;
}

.commercial-metal-mueller-content h2 {
    color: #ffffff;
    font-size: 40px;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 32px;
}

.commercial-metal-mueller-content p {
    color: #ffffff;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 400;
    max-width: 1000px;
    margin: 0 auto;
}


/* RESPONSIVE */

@media (max-width: 900px) {
    .commercial-metal-mueller-section {
        padding: 85px 20px;
    }

    .commercial-metal-mueller-content h2 {
        font-size: 38px;
    }

    .commercial-metal-mueller-content p {
        font-size: 19px;
    }
}



/* ===================================
   COMMERCIAL METAL PANEL OPTIONS
=================================== */

.commercial-metal-panel-options-section {
    position: relative;
    width: 100%;
    background: #ffffff;
    padding: 100px 20px 105px;
    overflow: hidden;
}

.commercial-metal-panel-orange-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 33%;
    height: 100%;
    background: #ff4b1f;
    z-index: 1;
}

.commercial-metal-panel-options-wrap {
    position: relative;
    z-index: 2;
    width: 72%;
    max-width: 1420px;
    margin-left: 13.5%;
}

.commercial-metal-panel-option-row {
    width: 100%;
    min-height: 225px;
    background: #f4f4f4;
    display: grid;
    grid-template-columns: 380px 1fr;
    align-items: center;
    column-gap: 55px;
    padding: 42px 70px;
    margin-bottom: 26px;
}

.commercial-metal-panel-option-row img {
    width: 295px;
    height: auto;
    object-fit: contain;
    justify-self: center;
    display: block;
     background: transparent;
}

.commercial-metal-panel-option-text h3 {
    color: #ff4b1f;
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.commercial-metal-panel-option-text p {
    color: #4b4b4b;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
}


/* RESPONSIVE */

@media (max-width: 900px) {
    .commercial-metal-panel-orange-bg {
        width: 22%;
    }

    .commercial-metal-panel-options-wrap {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .commercial-metal-panel-option-row {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 38px 28px;
    }

    .commercial-metal-panel-option-row img {
        margin-bottom: 25px;
    }
}



/* ===================================
   COMMERCIAL METAL FINAL CTA
=================================== */

.commercial-metal-final-cta-section {

    position: relative;

    width: 100%;

    padding: 45px 20px 60px;

    background-image: url("../images/mixed-black-background.png");

    background-size: contain;

    background-position: center;

    background-repeat: repeat;

    overflow: hidden;
}



/* DARK OVERLAY */

.commercial-metal-final-cta-overlay {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.18);
}



/* CONTENT */

.commercial-metal-final-cta-content {

    position: relative;

    z-index: 2;

    max-width: 1320px;

    margin: 0 auto;

    text-align: center;
    padding-top:  25px;
}



/* TEXT */

.commercial-metal-final-cta-content p {

    color: #ffffff;

    font-size: 18px;

    line-height: 1.3;

    font-weight: 400;

    max-width: 1100px;

    margin: 0 auto 42px;
}



/* BUTTON */

.commercial-metal-final-cta-btn {

    width: 280px;

    height: 46px;

    margin: 0 auto;

    background: #ff4b1f;

    color: #ffffff;

    text-decoration: none;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;

    letter-spacing: 1.3px;

    text-transform: uppercase;

    transition: 0.25s ease;
}



/* HOVER */

.commercial-metal-final-cta-btn:hover,
.commercial-metal-final-cta-btn:active {

    background: #00f035;

    color: #111111;
}



/* RESPONSIVE */

@media (max-width: 768px) {

    .commercial-metal-final-cta-section {

        padding: 75px 20px 100px;
    }

    .commercial-metal-final-cta-content p {

        font-size: 18px;

        line-height: 1.55;
    }

    .commercial-metal-final-cta-btn {

        width: 100%;

        max-width: 420px;
    }
}



/* ========================================
   COMMERCIAL METAL FINAL ESTIMATE SECTION
======================================== */

.commercial-metal-final-estimate-section {

    position: relative;

    width: 100%;

    padding: 30px 20px 70px;

    overflow: hidden;

    background-color: #ececec;

    background-image: url("../images/champion-watermark.png");

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;
}



/* OVERLAY */

.commercial-metal-final-estimate-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(255, 255, 255, 0.72);

    z-index: 1;
}



/* CONTENT */

.commercial-metal-final-estimate-content {

    position: relative;

    z-index: 2;

    max-width: 1180px;

    margin: 0 auto;

    text-align: center;
    padding-top: 25px;
}



/* TITLE */

.commercial-metal-final-estimate-content h2 {

    font-size: 28px;

    font-weight: 550;

    line-height: 1.1;

    color: #ff4b1f;

    text-transform: uppercase;

    margin-bottom: 38px;
}



/* TEXT */

.commercial-metal-final-estimate-content p {

    max-width: 1150px;

    margin: 0 auto;

    font-size: 16px;

    line-height: 1.4;

    color: #2d2d2d;

    margin-bottom: 35px;
}



/* BUTTON */

.commercial-metal-final-estimate-btn {

    display: inline-block;

    background: #00ff2a;

    color: #000000;

    text-decoration: none;

    font-size: 16px;

    font-weight: 500;

    letter-spacing: 1px;

    text-transform: uppercase;

    padding: 15px 30px;

    transition: all 0.3s ease;
}



/* HOVER + CLICK */

.commercial-metal-final-estimate-btn:hover,

.commercial-metal-final-estimate-btn:active {

    background: #ff4b1f;

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .commercial-metal-final-estimate-section {

        padding: 90px 25px 100px;

        background-size: cover;

        background-attachment: scroll;
    }

    .commercial-metal-final-estimate-content h2 {

        font-size: 38px;
    }

    .commercial-metal-final-estimate-content p {

        font-size: 18px;

        line-height: 1.6;
    }

    .commercial-metal-final-estimate-btn {

        width: 100%;

        max-width: 520px;

        font-size: 17px;

        padding: 24px 20px;
    }
}



/* ===================================
   COMMERCIAL METAL SERVICE ICONS
=================================== */

.commercial-metal-service-icons-section {

    width: 100%;

    background-image: url("../images/mixed-black-background.png");

    background-size: contain;

    background-position: center;

    background-repeat: repeat;

    padding: 45px 20px 65px;

    border-bottom: 8px solid #ff4b1f;
}



/* WRAP */

.commercial-metal-service-icons-wrap {

    max-width: 1220px;

    margin: 0 auto;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    gap: 80px;
}



/* EACH ITEM */

.commercial-metal-service-icon-item {

    text-decoration: none;

    text-align: center;

    display: block;

    transition: 0.25s ease;
}



/* CIRCLE */

.commercial-metal-service-icon-circle {

    width: 130px;

    height: 130px;

    border-radius: 50%;

    background: #00f035;

    border: 5px solid #ff4b1f;

    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.45);

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 15px;

    transition: 0.25s ease;
}



/* ICON */

.commercial-metal-service-icon-circle img {

    width: 72px;

    height: 72px;

    object-fit: contain;

    display: block;
}



/* TEXT */

.commercial-metal-service-icon-item h3 {

    color: #00f035;

    font-size: 18px;

    line-height: 1.25;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin: 0;
}



/* HOVER */

.commercial-metal-service-icon-item:hover .commercial-metal-service-icon-circle,

.commercial-metal-service-icon-item:active .commercial-metal-service-icon-circle {

    background: #ff4b1f;

    border-color: #00f035;
}



.commercial-metal-service-icon-item:hover h3,

.commercial-metal-service-icon-item:active h3 {

    color: #ff4b1f;
}



/* RESPONSIVE */

@media (max-width: 1000px) {

    .commercial-metal-service-icons-wrap {

        flex-wrap: wrap;

        gap: 55px;
    }
}



@media (max-width: 600px) {

    .commercial-metal-service-icons-section {

        padding: 70px 20px;
    }

    .commercial-metal-service-icon-circle {

        width: 125px;

        height: 125px;
    }

    .commercial-metal-service-icon-circle img {

        width: 60px;

        height: 60px;
    }

    .commercial-metal-service-icon-item h3 {

        font-size: 22px;
    }
}




/* ===================================
   COMMERCIAL SHINGLE ROOFING HERO HTML PAGE
====================================== */

.commercial-shingle-hero {
    position: relative;
    width: 100%;
    min-height: 820px;
    background-image: url("../images/commercial-shingle-roofing-1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    border-bottom: 6px solid #15b53f;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.commercial-shingle-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.58);
    z-index: 1;
}

.commercial-shingle-content {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1300px;
    text-align: center;
    color: #ffffff;
    padding-top: 120px;
}

.commercial-shingle-content h1 {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: #ffffff;
}

.commercial-shingle-content h2 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 32px;
    color: #ffffff;
}

.commercial-shingle-buttons {
    display: flex;
    justify-content: center;
    gap: 35px;
    margin-bottom: 45px;
}

.commercial-shingle-buttons a {
    width: 260px;
    padding: 16px 20px;
    background: #ff4a1c;
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    transition: 0.3s ease;
}

.commercial-shingle-buttons a:hover,
.commercial-shingle-buttons a:active {
    background: #15b53f;
}

.commercial-shingle-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}

.commercial-shingle-icons img {
    width: 145px;
    height: auto;
    object-fit: contain;
    opacity: 0.98;
}

/* RESPONSIVE */

@media (max-width: 991px) {
    .commercial-shingle-hero {
        min-height: 680px;
        background-attachment: scroll;
    }

    .commercial-shingle-content {
        padding-top: 80px;
    }

    .commercial-shingle-content h1 {
        font-size: 40px;
    }

    .commercial-shingle-content h2 {
        font-size: 24px;
    }

    .commercial-shingle-buttons {
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    .commercial-shingle-icons {
        gap: 30px;
    }

    .commercial-shingle-icons img {
        width: 115px;
    }
}


/* ===================================
   COMMERCIAL SHINGLE SAVE SECTION
====================================== */

.commercial-shingle-save-section {
    position: relative;
    width: 100%;
    padding: 70px 0 80px;
    background-image: url("../images/champion-watermark.png");
    background-size: 720px auto;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #ffffff;
    overflow: hidden;
}

.commercial-shingle-save-content {
    width: 73%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
}

.commercial-shingle-save-text {
    flex: 1;
    border-left: 8px solid #5c5c5c;
    padding-left: 32px;
}

.commercial-shingle-save-text h2 {
    font-size: 20px;
    font-weight: 700;
    color: #ff4a1c;
    letter-spacing: 1px;
    margin-bottom: 28px;
}

.commercial-shingle-save-text p {
    font-size: 16px;
    line-height: 1.3;
    color: #777777;
    margin-bottom: 20px;
}

.commercial-shingle-save-image-wrap {
    position: relative;
    width: 330px;
    flex-shrink: 0;
}

.commercial-shingle-save-image-wrap img {
    position: relative;
    z-index: 2;
    width: 100%;
    display: block;
    background: transparent;
}

/* RESPONSIVE */

@media (max-width: 991px) {
    .commercial-shingle-save-content {
        width: 90%;
        flex-direction: column;
        gap: 40px;
    }

    .commercial-shingle-save-text {
        padding-left: 24px;
    }

    .commercial-shingle-save-text h2 {
        font-size: 28px;
    }

    .commercial-shingle-save-text p {
        font-size: 18px;
    }

    .commercial-shingle-save-image-wrap {
        width: 90%;
        max-width: 420px;
    }
}




/* ===================================
   COMMERCIAL SHINGLE BENEFITS SECTION
====================================== */

.commercial-shingle-benefits-section {

    position: relative;

    width: 100%;

    padding: 40px 20px 45px;

    background-image: url("../images/mixed-black-background.png");

    background-size: contain;

    background-position: center;

    background-repeat: repeat;

    overflow: hidden;
}



/* CONTAINER */

.commercial-shingle-benefits-container {

    width: 78%;

    max-width: 1400px;

    margin: 0 auto;

    text-align: center;
}



/* TITLE */

.commercial-shingle-benefits-container h2 {

    font-size: 30px;

    font-weight: 800;

    color: #ffffff;

    line-height: 1;

    margin-bottom: 34px;

    letter-spacing: 1px;
}



/* PARAGRAPH */

.commercial-shingle-benefits-container p {

    width: 92%;

    margin: 0 auto;

    font-size: 16px;

    line-height: 1.4;

    color: #ffffff;

    font-weight: 400;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .commercial-shingle-benefits-container {

        width: 92%;
    }

    .commercial-shingle-benefits-container h2 {

        font-size: 42px;

        margin-bottom: 24px;
    }

    .commercial-shingle-benefits-container p {

        width: 100%;

        font-size: 19px;

        line-height: 1.5;
    }
}



/* ===================================
   COMMERCIAL SHINGLE ROOFING FEATURES
====================================== */

.commercial-shingle-roofing-feature-section {

    position: relative;

    width: 100%;

    padding:80px 0 80px;

    background: #efefef;

    overflow: hidden;
}



/* LEFT ORANGE AREA */

.commercial-shingle-roofing-feature-section::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 33%;

    height: 100%;

    background: #ff4a1c;

    z-index: 1;
}



/* WRAPPER */

.commercial-shingle-roofing-feature-wrapper {

    position: relative;

    z-index: 2;

    width: 70%;

    max-width: 1300px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 26px;
}



/* CARD */

.commercial-shingle-roofing-feature-card {

    background: #f4f4f4;

    display: flex;

    align-items: center;

    gap: 90px;

    padding: 25px 50px;

    position: relative;
}



/* IMAGE AREA */

.commercial-shingle-roofing-feature-image {

    width: 240px;

    height: 240px;

    border-radius: 50%;

    border: 14px solid #666666;

    overflow: hidden;

    flex-shrink: 0;
}



/* IMAGE */

.commercial-shingle-roofing-feature-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}



/* CONTENT */

.commercial-shingle-roofing-feature-content {

    flex: 1;
}



/* TITLE */

.commercial-shingle-roofing-feature-content h2 {

    font-size: 28px;

    line-height: 1.2;

    color: #ff4a1c;

    font-weight: 700;

    margin-bottom: 24px;
}



/* PARAGRAPH */

.commercial-shingle-roofing-feature-content p {

    font-size: 17px;

    line-height: 1.3;

    color: #444444;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .commercial-shingle-roofing-feature-section::before {

        width: 100%;
    }

    .commercial-shingle-roofing-feature-wrapper {

        width: 92%;
    }

    .commercial-shingle-roofing-feature-card {

        flex-direction: column;

        text-align: center;

        gap: 40px;

        padding: 45px 25px;
    }

    .commercial-shingle-roofing-feature-image {

        width: 220px;

        height: 220px;
    }

    .commercial-shingle-roofing-feature-content h2 {

        font-size: 34px;
    }

    .commercial-shingle-roofing-feature-content p {

        font-size: 18px;
    }
}


/* ===================================
   COMMERCIAL SHINGLE ESTIMATE BANNER
====================================== */

.commercial-shingle-estimate-banner-section {

    position: relative;

    width: 100%;

    padding: 65px 20px;

    background-image: url("../images/mixed-black-background.png");

    background-size: contain;

    background-position: center;

    background-repeat: repeat;

    overflow: hidden;
}



/* CONTAINER */

.commercial-shingle-estimate-banner-container {

    width: 90%;

    max-width: 1400px;

    margin: 0 auto;

    text-align: center;
}



/* TEXT */

.commercial-shingle-estimate-banner-container p {

    font-size: 22px;

    color: #ffffff;

    margin-bottom: 34px;

    line-height: 1.5;
}



/* BUTTON */

.commercial-shingle-estimate-banner-container a {

    display: inline-block;

    padding: 14px 25px;

    background: #ff4a1c;

    color: #ffffff;

    text-decoration: none;

    font-size: 17px;

    font-weight: 500;

    letter-spacing: 1.5px;

    transition: 0.3s ease;
}



/* HOVER */

.commercial-shingle-estimate-banner-container a:hover,
.commercial-shingle-estimate-banner-container a:active {

    background: #16b347;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .commercial-shingle-estimate-banner-container p {

        font-size: 20px;
    }

    .commercial-shingle-estimate-banner-container a {

        width: 100%;

        max-width: 420px;

        padding: 20px 25px;

        font-size: 18px;
    }
}



/* ===================================
   COMMERCIAL SHINGLE POLYMER SECTION
====================================== */

.commercial-shingle-polymer-section {

    position: relative;

    width: 100%;

    min-height: 720px;

    overflow: hidden;
}



/* LEFT IMAGE - FIXED */

.commercial-shingle-polymer-image-side {

    position: absolute;

    top: 0;

    left: 0;

    width: 60%;

    height: 100%;

    background-image: url("../images/commercial-shingle-roofing-2.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    z-index: 1;
}



/* RIGHT IMAGE - SCROLL */

.commercial-shingle-polymer-pattern-side {

    position: absolute;

    top: 0;

    right: 0;

    width: 40%;

    height: 100%;

    background-image: url("../images/commercial-shingle-roofing-2.png");

    background-size: cover;

    background-position: right center;

    background-repeat: no-repeat;

    background-attachment: scroll;

    z-index: 1;
}



/* CARD */

.commercial-shingle-polymer-card {

    position: relative;

    z-index: 2;

    width: 610px;

    margin-left: 50%;

    top: 88px;

    background: #ffffff;

    border-left: 25px solid #ff4a1c;

    padding: 38px 62px 68px;

    box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
}



/* TITLE */

.commercial-shingle-polymer-card h2 {

    font-size: 28px;

    line-height: 1.1;

    color: #ff4a1c;

    font-weight: 600;

    margin-bottom: 30px;
}



/* TEXT */

.commercial-shingle-polymer-card p {

    font-size: 17px;

    line-height: 1.3;

    color: #2f2f2f;

    margin-bottom: 30px;
}



/* BUTTON */

.commercial-shingle-polymer-card a {

    display: inline-block;

    margin-top: 4px;

    padding: 16px 40px;

    background: #00ff35;

    color: #111111;

    text-decoration: none;

    font-size: 16px;

    letter-spacing: 4px;

    transition: 0.3s ease;
}



.commercial-shingle-polymer-card a:hover,
.commercial-shingle-polymer-card a:active {

    background: #ff4a1c;

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .commercial-shingle-polymer-section {

        min-height: auto;

        padding: 70px 0;
    }

    .commercial-shingle-polymer-image-side,
    .commercial-shingle-polymer-pattern-side {

        width: 100%;

        background-attachment: scroll;
    }

    .commercial-shingle-polymer-pattern-side {

        display: none;
    }

    .commercial-shingle-polymer-card {

        width: 88%;

        margin: 0 auto;

        top: 0;

        padding: 38px 30px 42px;

        border-left: 18px solid #ff4a1c;
    }

    .commercial-shingle-polymer-card h2 {

        font-size: 28px;
    }

    .commercial-shingle-polymer-card p {

        font-size: 17px;
    }
}



/* ===================================
   COMMERCIAL SHINGLE QUOTE SECTION
====================================== */

.commercial-shingle-quote-section {

    position: relative;

    width: 100%;

    min-height: 760px;

    overflow: hidden;
}



/* LEFT IMAGE - SCROLL */

.commercial-shingle-quote-left-side {

    position: absolute;

    top: 0;

    left: 0;

    width: 42%;

    height: 100%;

    background-image: url("../images/commercial-shingle-roofing-3.png");

    background-size: cover;

    background-position: left center;

    background-repeat: no-repeat;

    background-attachment: scroll;

    z-index: 1;
}



/* RIGHT IMAGE - FIXED */

.commercial-shingle-quote-right-side {

    position: absolute;

    top: 0;

    right: 0;

    width: 58%;

    height: 100%;

    background-image: url("../images/commercial-shingle-roofing-3.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    z-index: 1;
}



/* CARD */

.commercial-shingle-quote-card {

    position: relative;

    z-index: 2;

    width: 620px;

    background: #f3f3f3;

    margin-left: 13%;

    top: 86px;

    padding: 52px 62px 62px;

    border-left: 24px solid #ff4a1c;

    box-shadow: 0 0 14px rgba(0, 0, 0, 0.35);
}



/* TITLE */

.commercial-shingle-quote-card h2 {

    font-size: 28px;

    line-height: 1.1;

    color: #ff4a1c;

    font-weight: 700;

    margin-bottom: 30px;
}



/* TEXT */

.commercial-shingle-quote-card p {

    font-size: 17px;

    line-height: 1.4;

    color: #2f2f2f;

    margin-bottom: 22px;
}



/* BUTTON */

.commercial-shingle-quote-card a {

    display: inline-block;

    margin-top: 8px;

    padding: 18px 32px;

    background: #00ff2a;

    color: #111111;

    text-decoration: none;

    font-size: 16px;

    letter-spacing: 2px;

    transition: 0.3s ease;
}



/* HOVER */

.commercial-shingle-quote-card a:hover,
.commercial-shingle-quote-card a:active {

    background: #ff4a1c;

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .commercial-shingle-quote-section {

        min-height: auto;

        padding: 70px 0;
    }

    .commercial-shingle-quote-left-side,
    .commercial-shingle-quote-right-side {

        width: 100%;

        background-attachment: scroll;
    }

    .commercial-shingle-quote-left-side {

        display: none;
    }

    .commercial-shingle-quote-card {

        width: 90%;

        margin: 0 auto;

        top: 0;

        padding: 38px 28px 42px;

        border-left: 18px solid #ff4a1c;
    }

    .commercial-shingle-quote-card h2 {

        font-size: 28px;
    }

    .commercial-shingle-quote-card p {

        font-size: 17px;
    }
}



/* ===================================
   COMMERCIAL SHINGLE FINAL CTA
====================================== */

.commercial-shingle-final-cta-section {

    position: relative;

    width: 100%;

    padding: 70px 20px 70px;

    background-image: url("../images/champion-watermark.png");

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    background-color: #f3f3f3;

    overflow: hidden;
}



/* CONTAINER */

.commercial-shingle-final-cta-container {

    width: 78%;

    max-width: 1300px;

    margin: 0 auto;

    text-align: center;
}



/* TITLE */

.commercial-shingle-final-cta-container h2 {

    font-size: 30px;

    line-height: 1.12;

    color: #ff4a1c;

    font-weight: 700;

    margin-bottom: 34px;
}



/* TEXT */

.commercial-shingle-final-cta-container p {

    width: 92%;

    margin: 0 auto 46px;

    font-size: 18px;

    line-height: 1.4;

    color: #2f2f2f;
}



/* BUTTON */

.commercial-shingle-final-cta-container a {

    display: inline-block;

    padding: 16px 30px;

    background: #00ff2f;

    color: #111111;

    text-decoration: none;

    font-size: 17px;

    letter-spacing: 1.5px;

    transition: 0.3s ease;
}



/* HOVER */

.commercial-shingle-final-cta-container a:hover,
.commercial-shingle-final-cta-container a:active {

    background: #ff4a1c;

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .commercial-shingle-final-cta-container {

        width: 92%;
    }

    .commercial-shingle-final-cta-container h2 {

        font-size: 28px;
    }

    .commercial-shingle-final-cta-container p {

        width: 100%;

        font-size: 18px;
    }

    .commercial-shingle-final-cta-container a {

        width: 100%;

        max-width: 420px;

        padding: 20px 24px;

        font-size: 16px;
    }
}




/* ===================================
   COMMERCIAL SHINGLE NAV ICONS
====================================== */

.commercial-shingle-nav-icons-section {

    position: relative;

    width: 100%;

    padding: 65px 20px 65px;

    background-image: url("../images/mixed-black-background.png");

    background-size: contain;

    background-position: center;

    background-repeat: repeat;

    border-bottom: 8px solid #ff4a1c;

    overflow: hidden;
}



/* CONTAINER */

.commercial-shingle-nav-icons-container {

    width: 72%;

    max-width: 1400px;

    margin: 0 auto;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    gap: 75px;
}



/* ITEM */

.commercial-shingle-nav-icons-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    text-decoration: none;

    color: #00ff2f;

    transition: 0.3s ease;
}



/* ICON */

.commercial-shingle-nav-icons-item img {

    width: 145px;

    height: 145px;

    object-fit: contain;

    display: block;

    margin-bottom: 26px;
}



/* TEXT */

.commercial-shingle-nav-icons-item span {

    font-size: 20px;

    line-height: 1.25;

    font-weight: 600;

    color: #00ff2f;
}



/* HOVER */

.commercial-shingle-nav-icons-item:hover {

    transform: translateY(-5px);
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .commercial-shingle-nav-icons-container {

        width: 95%;

        flex-wrap: wrap;

        gap: 45px;
    }

    .commercial-shingle-nav-icons-item img {

        width: 120px;

        height: 120px;
    }

    .commercial-shingle-nav-icons-item span {

        font-size: 22px;
    }
}



/* ===================================
   MULTI-FAMILY ROOFING MAIN HERO HTML PAGE
====================================== */

.multi-family-roofing-main-hero {

    position: relative;

    width: 100%;

    min-height: 730px;

    background-image: url("../images/multi-family-roofing-1.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    border-bottom: 7px solid #00ff2f;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;
}



/* DARK OVERLAY */

.multi-family-roofing-main-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.58);

    z-index: 1;
}



/* CONTENT */

.multi-family-roofing-main-content {

    position: relative;

    z-index: 2;

    width: 90%;

    max-width: 1100px;

    text-align: center;

    color: #ffffff;

    padding-top: 120px;
}



/* TITLE */

.multi-family-roofing-main-content h1 {

    font-size:35px;

    line-height: 1.1;

    color: #ffffff;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 24px;
}



/* SUBTITLE */

.multi-family-roofing-main-content h2 {

    font-size: 25px;

    line-height: 1.2;

    color: #ffffff;

    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 34px;
}



/* BUTTONS */

.multi-family-roofing-main-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 35px;
}



.multi-family-roofing-main-buttons a {

    display: inline-block;

    width: 260px;

    padding: 16px 16px;

    background: #ff4a1c;

    color: #ffffff;

    text-decoration: none;

    font-size: 16px;

    font-weight: 500;

    letter-spacing: 1.3px;

    transition: 0.3s ease;
}



/* HOVER */

.multi-family-roofing-main-buttons a:hover,
.multi-family-roofing-main-buttons a:active {

    background: #00ff2f;

    color: #111111;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .multi-family-roofing-main-hero {

        min-height: 680px;

        background-attachment: scroll;
    }

    .multi-family-roofing-main-content {

        padding-top: 70px;
    }

    .multi-family-roofing-main-content h1 {

        font-size: 38px;
    }

    .multi-family-roofing-main-content h2 {

        font-size: 24px;
    }

    .multi-family-roofing-main-buttons {

        flex-direction: column;

        gap: 18px;
    }

    .multi-family-roofing-main-buttons a {

        width: 100%;

        max-width: 320px;
    }
}



/* ===================================
   MULTI-FAMILY SERVICE AREA SECTION
====================================== */

.multi-family-service-area-section {

    position: relative;

    width: 100%;

    padding: 65px 20px;

    background-image: url("../images/mixed-black-background.png");

    background-size: contain;

    background-position: center;

    background-repeat: repeat;

    overflow: hidden;
}



/* CONTENT */

.multi-family-service-area-content {

    width: 100%;

    max-width: 1300px;

    margin: 0 auto;

    text-align: center;
}



/* TITLE */

.multi-family-service-area-content h2 {

    font-size: 25px;

    line-height: 1;

    font-weight: 600;

    color: #ffffff;

    letter-spacing: 1px;

    text-transform: uppercase;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .multi-family-service-area-section {

        padding: 65px 20px;
    }

    .multi-family-service-area-content h2 {

        font-size: 28px;

        line-height: 1.35;
    }
}



/* ===================================
   MULTI-FAMILY ROOFING INFO SECTION
====================================== */

.multi-family-roofing-info-section {

    position: relative;

    width: 100%;

    padding: 55px 20px 75px;

    background-image: url("../images/champion-watermark.png");

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    background-color: #f4f4f4;

    overflow: hidden;
}



/* CONTAINER */

.multi-family-roofing-info-container {

    width: 74%;

    max-width: 1450px;

    margin: 0 auto;
}



/* TEXT */

.multi-family-roofing-info-text {

    border-left: 8px solid #5c5c5c;

    padding-left: 32px;
}



/* TITLE */

.multi-family-roofing-info-text h2 {

    font-size: 30px;

    color: #ff4a1c;

    font-weight: 600;

    margin-bottom: 28px;

    letter-spacing: 1px;
}



/* PARAGRAPH */

.multi-family-roofing-info-text p {

    font-size: 16px;

    line-height: 1.3;

    color: #777777;

    margin-bottom: 12px;
}



/* BUTTON */

.multi-family-roofing-info-text a {

    display: inline-block;

    margin-top: 28px;

    padding: 15px 20px;

    background: #00ff2f;

    color: #111111;

    text-decoration: none;

    font-size: 15px;

    letter-spacing: 1px;

    transition: 0.3s ease;
}



/* HOVER */

.multi-family-roofing-info-text a:hover,
.multi-family-roofing-info-text a:active {

    background: #ff4a1c;

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .multi-family-roofing-info-container {

        width: 90%;
    }

    .multi-family-roofing-info-text {

        padding-left: 24px;
    }

    .multi-family-roofing-info-text h2 {

        font-size: 28px;
    }

    .multi-family-roofing-info-text p {

        font-size: 18px;
    }

    .multi-family-roofing-info-text a {

        width: 100%;

        max-width: 420px;

        text-align: center;

        padding: 18px 25px;
    }
}



/* ===================================
   MULTI-FAMILY NEW ROOF SECTION
====================================== */

.multi-family-new-roof-section {

    position: relative;

    width: 100%;

    min-height: 820px;

    overflow: hidden;
}



/* LEFT IMAGE - FIXED */

.multi-family-new-roof-left-image {

    position: absolute;

    top: 0;

    left: 0;

    width: 60%;

    height: 100%;

    background-image: url("../images/multi-family-roofing-2.png");

    background-size: cover;

    background-position: left center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    z-index: 1;
}



/* RIGHT IMAGE - SCROLL */

.multi-family-new-roof-right-image {

    position: absolute;

    top: 0;

    right: 0;

    width: 40%;

    height: 100%;

    background-image: url("../images/multi-family-roofing-2.png");

    background-size: cover;

    background-position: right center;

    background-repeat: no-repeat;

    background-attachment: scroll;

    z-index: 1;
}



/* CARD */

.multi-family-new-roof-card {

    position: relative;

    z-index: 2;

    width: 600px;

    margin-left: 50%;

    top: 76px;

    background: #ffffff;

    border-left: 24px solid #ff4a1c;

    padding: 30px 48px 66px;

    box-shadow: 0 0 14px rgba(0, 0, 0, 0.35);
}



/* TITLE */

.multi-family-new-roof-card h2 {

    font-size: 25px;

    line-height: 1.1;

    color: #ff4a1c;

    font-weight: 600;

    margin-bottom: 38px;
}



/* TEXT */

.multi-family-new-roof-card p {

    font-size: 17px;

    line-height: 1.4;

    color: #2f2f2f;

    margin-bottom: 40px;
}



/* BUTTON */

.multi-family-new-roof-card a {

    display: inline-block;

    margin-top: 8px;

    padding: 17px 26px;

    background: #00ff2f;

    color: #111111;

    text-decoration: none;

    font-size: 16px;

    letter-spacing: 1px;

    transition: 0.3s ease;
}



/* HOVER */

.multi-family-new-roof-card a:hover,
.multi-family-new-roof-card a:active {

    background: #ff4a1c;

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .multi-family-new-roof-section {

        min-height: auto;

        padding: 70px 0;
    }

    .multi-family-new-roof-left-image,
    .multi-family-new-roof-right-image {

        width: 100%;

        background-attachment: scroll;
    }

    .multi-family-new-roof-right-image {

        display: none;
    }

    .multi-family-new-roof-card {

        width: 88%;

        margin: 0 auto;

        top: 0;

        padding: 38px 30px 42px;

        border-left: 18px solid #ff4a1c;
    }

    .multi-family-new-roof-card h2 {

        font-size: 27px;
    }

    .multi-family-new-roof-card p {

        font-size: 17px;
    }
}



/* ===================================
   MULTI-FAMILY SERVICES BANNER
====================================== */

.multi-family-services-banner-section {

    position: relative;

    width: 100%;

    padding: 65px 20px 65px;

    background-image: url("../images/mixed-black-background.png");

    background-size: contain;

    background-position: center;

    background-repeat: repeat;

    overflow: hidden;
}



/* CONTENT */

.multi-family-services-banner-overlay {

    max-width: 1250px;

    margin: 0 auto;

    text-align: center;
}



/* TITLE */

.multi-family-services-banner-overlay h2 {

    font-size: 35px;

    line-height: 1.05;

    color: #ffffff;

    font-weight: 700;

    text-transform: uppercase;

    margin-bottom: 34px;
}



/* TEXT */

.multi-family-services-banner-overlay p {

    max-width: 1000px;

    margin: 0 auto 40px;

    font-size: 20px;

    line-height: 1.4;

    color: #ffffff;

    font-weight: 600;

    text-transform: uppercase;
}



/* BUTTON */

.multi-family-services-banner-overlay a {

    display: inline-block;

    padding: 16px 50px;

    background: #ff4a1c;

    color: #ffffff;

    text-decoration: none;

    font-size: 16px;

    letter-spacing: 1px;

    transition: 0.3s ease;
}



/* HOVER */

.multi-family-services-banner-overlay a:hover,
.multi-family-services-banner-overlay a:active {

    background: #00ff2f;

    color: #111111;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .multi-family-services-banner-section {

        padding: 70px 20px 85px;
    }

    .multi-family-services-banner-overlay h2 {

        font-size: 42px;
    }

    .multi-family-services-banner-overlay p {

        font-size: 22px;
    }

    .multi-family-services-banner-overlay a {

        padding: 18px 50px;

        font-size: 17px;
    }
}



@media (max-width: 600px) {

    .multi-family-services-banner-overlay h2 {

        font-size: 30px;
    }

    .multi-family-services-banner-overlay p {

        font-size: 18px;

        line-height: 1.5;
    }

    .multi-family-services-banner-overlay a {

        width: 100%;

        max-width: 330px;

        padding: 17px 20px;
    }
}



/* ===================================
   MULTI-FAMILY INSPECTION SECTION
====================================== */

.multi-family-inspection-section {

    position: relative;

    width: 100%;

    min-height: 880px;

    overflow: hidden;
}



/* LEFT IMAGE - SCROLL */

.multi-family-inspection-left-image {

    position: absolute;

    top: 0;

    left: 0;

    width: 40%;

    height: 100%;

    background-image: url("../images/multi-family-roofing-3.png");

    background-size: cover;

    background-position: left center;

    background-repeat: no-repeat;

    background-attachment: scroll;

    z-index: 1;
}



/* RIGHT IMAGE - FIXED */

.multi-family-inspection-right-image {

    position: absolute;

    top: 0;

    right: 0;

    width: 60%;

    height: 100%;

    background-image: url("../images/multi-family-roofing-3.png");

    background-size: cover;

    background-position: right center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    z-index: 1;
}



/* CARD */

.multi-family-inspection-card {

    position: relative;

    z-index: 2;

    width: 625px;

    margin-left: 14%;

    top: 88px;

    background: #ffffff;

    border-left: 24px solid #ff4a1c;

    padding: 44px 58px 56px;

    box-shadow: 0 0 14px rgba(0, 0, 0, 0.35);
}



/* TITLE */

.multi-family-inspection-card h2 {

    font-size: 28px;

    line-height: 1.1;

    color: #ff4a1c;

    font-weight: 550;

    margin-bottom: 28px;
}



/* TEXT */

.multi-family-inspection-card p {

    font-size: 16px;

    line-height: 1.4;

    color: #2f2f2f;

    margin-bottom: 16px;
}



/* LIST */

.multi-family-inspection-card ul {

    margin: 10px 0 18px 35px;

    padding: 0;
}



.multi-family-inspection-card li {

    font-size: 16px;

    line-height: 1.4;

    color: #2f2f2f;
}



/* BUTTON */

.multi-family-inspection-card a {

    display: inline-block;

    margin-top: 8px;

    padding: 18px 44px;

    background: #00ff2f;

    color: #111111;

    text-decoration: none;

    font-size: 16px;

    letter-spacing: 3px;

    transition: 0.3s ease;
}



/* HOVER */

.multi-family-inspection-card a:hover,
.multi-family-inspection-card a:active {

    background: #ff4a1c;

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .multi-family-inspection-section {

        min-height: auto;

        padding: 70px 0;
    }

    .multi-family-inspection-left-image,
    .multi-family-inspection-right-image {

        width: 100%;

        background-attachment: scroll;
    }

    .multi-family-inspection-left-image {

        display: none;
    }

    .multi-family-inspection-card {

        width: 88%;

        margin: 0 auto;

        top: 0;

        padding: 38px 30px 42px;

        border-left: 18px solid #ff4a1c;
    }

    .multi-family-inspection-card h2 {

        font-size: 27px;
    }

    .multi-family-inspection-card p,
    .multi-family-inspection-card li {

        font-size: 17px;
    }
}



/* ===================================
   MULTI-FAMILY APART SECTION
====================================== */

.multi-family-apart-section {

    position: relative;

    width: 100%;

    padding: 50px 20px 50px;

    background-image: url("../images/mixed-black-background.png");

    background-size: contain;

    background-position: center;

    background-repeat: repeat;

    overflow: hidden;
}



/* CONTAINER */

.multi-family-apart-container {

    width: 72%;

    max-width: 1450px;

    margin: 0 auto;

    text-align: left;
}



/* TITLE */

.multi-family-apart-container h2 {

    font-size: 30px;

    line-height: 1.2;

    color: #00ff2f;

    font-weight: 550;

    margin-bottom: 32px;

    text-transform: uppercase;
}



/* TEXT */

.multi-family-apart-container p {

    font-size: 17px;

    line-height: 1.3;

    color: #ffffff;

    margin-bottom: 24px;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .multi-family-apart-container {

        width: 90%;
    }

    .multi-family-apart-container h2 {

        font-size: 28px;
    }

    .multi-family-apart-container p {

        font-size: 18px;
    }
}



/* ===================================
   MULTI-FAMILY HAPPY TENANTS SECTION
====================================== */

.multi-family-happy-tenants-section {

    position: relative;

    width: 100%;

    min-height: 980px;

    overflow: hidden;
}



/* LEFT IMAGE - FIXED */

.multi-family-happy-tenants-left-image {

    position: absolute;

    top: 0;

    left: 0;

    width: 60%;

    height: 100%;

    background-image: url("../images/multi-family-roofing-4.png");

    background-size: cover;

    background-position: left center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    z-index: 1;
}



/* RIGHT IMAGE - SCROLL */

.multi-family-happy-tenants-right-image {

    position: absolute;

    top: 0;

    right: 0;

    width: 40%;

    height: 100%;

    background-image: url("../images/multi-family-roofing-4.png");

    background-size: cover;

    background-position: right center;

    background-repeat: no-repeat;

    background-attachment: scroll;

    z-index: 1;
}



/* CARD */

.multi-family-happy-tenants-card {

    position: relative;

    z-index: 2;

    width: 580px;

    margin-left: 50%;

    top: 78px;

    background: #ffffff;

    border-left: 24px solid #ff4a1c;

    padding: 44px 58px 44px;

    box-shadow: 0 0 14px rgba(0, 0, 0, 0.35);
}



/* TITLE */

.multi-family-happy-tenants-card h2 {

    font-size: 30px;

    line-height: 1.1;

    color: #ff4a1c;

    font-weight: 600;

    margin-bottom: 28px;
}



/* TEXT */

.multi-family-happy-tenants-card p {

    font-size: 16px;

    line-height: 1.3;

    color: #2f2f2f;

    margin-bottom: 38px;
}



/* BUTTON */

.multi-family-happy-tenants-card a {

    display: inline-block;

    margin-top: 10px;

    padding: 16px 38px;

    background: #00ff2f;

    color: #111111;

    text-decoration: none;

    font-size: 16px;

    letter-spacing: 1.5px;

    transition: 0.3s ease;
}



/* HOVER */

.multi-family-happy-tenants-card a:hover,
.multi-family-happy-tenants-card a:active {

    background: #ff4a1c;

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .multi-family-happy-tenants-section {

        min-height: auto;

        padding: 70px 0;
    }

    .multi-family-happy-tenants-left-image,
    .multi-family-happy-tenants-right-image {

        width: 100%;

        background-attachment: scroll;
    }

    .multi-family-happy-tenants-right-image {

        display: none;
    }

    .multi-family-happy-tenants-card {

        width: 88%;

        margin: 0 auto;

        top: 0;

        padding: 38px 30px 42px;

        border-left: 18px solid #ff4a1c;
    }

    .multi-family-happy-tenants-card h2 {

        font-size: 27px;
    }

    .multi-family-happy-tenants-card p {

        font-size: 17px;
    }
}



/* ===================================
   MULTI-FAMILY REPAIR SECTION
====================================== */

.multi-family-repair-section {

    position: relative;

    width: 100%;

    padding: 70px 0 70px;

    background: #f3f3f3;

    overflow: hidden;
}



/* LEFT ORANGE AREA */

.multi-family-repair-background {

    position: absolute;

    top: 0;

    left: 0;

    width: 33%;

    height: 100%;

    background: #ff4a1c;

    z-index: 1;
}



/* WRAPPER */

.multi-family-repair-wrapper {

    position: relative;

    z-index: 2;

    width: 76%;

    max-width: 1350px;

    margin: 0 auto;

    background: #ececec;

    padding: 70px 80px;

    display: flex;

    align-items: center;

    gap: 70px;
}



/* IMAGE AREA */

.multi-family-repair-image-area {

    position: relative;

    flex-shrink: 0;
}



/* IMAGE */

.multi-family-repair-image-area img {

    width: 330px;

    height: auto;

    display: block;

    position: relative;

    z-index: 2;

    background: transparent;
}



/* CONTENT */

.multi-family-repair-content {

    flex: 1;
}



/* TITLE */

.multi-family-repair-content h2 {

    font-size: 25px;

    line-height: 1.1;

    color: #ff4a1c;

    font-weight: 600;

    margin-bottom: 30px;
}



/* TEXT */

.multi-family-repair-content p {

    font-size: 16px;

    line-height: 1.4;

    color: #444444;

    margin-bottom: 22px;
}



/* BUTTON */

.multi-family-repair-content a {

    display: inline-block;

    margin-top: 12px;

    padding: 16px 28px;

    background: #00ff2f;

    color: #111111;

    text-decoration: none;

    font-size: 16px;

    letter-spacing: 1.4px;

    transition: 0.3s ease;
}



/* HOVER */

.multi-family-repair-content a:hover,
.multi-family-repair-content a:active {

    background: #ff4a1c;

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .multi-family-repair-wrapper {

        width: 90%;

        flex-direction: column;

        padding: 50px 30px;

        gap: 45px;
    }

    .multi-family-repair-background {

        width: 100%;
    }

    .multi-family-repair-image-area img {

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

    .multi-family-repair-content h2 {

        font-size: 28px;
    }

    .multi-family-repair-content p {

        font-size: 17px;
    }
}



/* ===================================
   MULTI-FAMILY ROOFING ICON LINKS
====================================== */

.multi-family-roofing-icon-links-section {

    position: relative;

    width: 100%;

    padding: 50px 20px 50px;

    background-image: url("../images/mixed-black-background.png");

    background-size: contain;

    background-position: center;

    background-repeat: repeat;

    overflow: hidden;
}



/* CONTAINER */

.multi-family-roofing-icon-links-container {

    width: 72%;

    max-width: 1400px;

    margin: 0 auto;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    gap: 95px;
}



/* ITEM */

.multi-family-roofing-icon-link-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    text-decoration: none;

    color: #00ff2f;

    transition: 0.3s ease;
}



/* ICON */

.multi-family-roofing-icon-link-item img {

    width: 125px;

    height: 125px;

    object-fit: contain;

    display: block;

    margin-bottom: 26px;
}



/* TEXT */

.multi-family-roofing-icon-link-item span {

    font-size: 20px;

    line-height: 1.25;

    font-weight: 550;

    color: #00ff2f;
}



/* HOVER */

.multi-family-roofing-icon-link-item:hover {

    transform: translateY(-5px);
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .multi-family-roofing-icon-links-container {

        width: 95%;

        flex-wrap: wrap;

        gap: 45px;
    }

    .multi-family-roofing-icon-link-item img {

        width: 120px;

        height: 120px;
    }

    .multi-family-roofing-icon-link-item span {

        font-size: 22px;
    }
}



/* ===================================
   MULTI-FAMILY AFFILIATIONS SECTION
====================================== */

.multi-family-affiliations-section {

    position: relative;

    width: 100%;

    padding: 65px 20px 65px;

    background: #ffffff;

    border-bottom: 8px solid #ff4a1c;

    overflow: hidden;
}



.multi-family-affiliations-container {

    width: 70%;

    max-width: 1300px;

    margin: 0 auto;

    text-align: center;
}



.multi-family-affiliations-container h2 {

    font-size: 30px;

    font-weight: 550;

    color: #ff4a1c;

    letter-spacing: 1px;

    margin-bottom: 55px;
}



.multi-family-affiliations-grid {

    display: grid;

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

    align-items: center;

    justify-items: center;

    column-gap: 45px;

    row-gap: 35px;
}



.multi-family-affiliations-grid img {

    max-width: 180px;

    max-height: 75px;

    width: 100%;

    height: auto;

    object-fit: contain;

    display: block;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .multi-family-affiliations-container {

        width: 90%;
    }

    .multi-family-affiliations-grid {

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

        column-gap: 35px;

        row-gap: 45px;
    }

    .multi-family-affiliations-grid img {

        max-width: 190px;
    }
}




/* =========================================
   TYPES OF ROOFING HERO SECTION HTML PAGE
========================================= */

.types-roofing-hero-section {

    position: relative;

    width: 100%;

    min-height: 720px;

    background-image: url("../images/types-of-roofing-1.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    overflow: hidden;

    border-bottom: 8px solid #00ff2a;
}



/* DARK OVERLAY */

.types-roofing-hero-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.45);

    z-index: 1;
}



/* CONTENT */

.types-roofing-hero-content {

    position: relative;

    z-index: 2;

    width: 92%;

    max-width: 1600px;

    margin-top: 80px;
}



/* MAIN TITLE */

.types-roofing-hero-content h1 {

    font-size: 50px;

    font-weight: 600;

    color: #ffffff;

    line-height: 1;

    margin-bottom: 28px;

    text-transform: uppercase;

    letter-spacing: 1px;
}



/* SUBTITLE */

.types-roofing-hero-content h2 {

    font-size: 25px;

    font-weight: 600;

    color: #ffffff;

    line-height: 1.3;

    margin-bottom: 55px;

    text-transform: uppercase;
}



/* BUTTON AREA */

.types-roofing-hero-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 45px;

    flex-wrap: wrap;
}



/* BUTTONS */

.types-roofing-estimate-btn,
.types-roofing-phone-btn {

    width: 290px;

    height: 46px;

    background: #ff5a1f;

    color: #ffffff;

    text-decoration: none;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 18px;

    font-weight: 500;

    letter-spacing: 2px;

    text-transform: uppercase;

    transition: 0.3s ease;
}



/* HOVER + CLICK */

.types-roofing-estimate-btn:hover,
.types-roofing-phone-btn:hover,

.types-roofing-estimate-btn:active,
.types-roofing-phone-btn:active {

    background: #00ff2a;

    color: #111111;
}



/* RESPONSIVE */

@media (max-width: 1200px) {

    .types-roofing-hero-content h1 {

        font-size: 72px;
    }

    .types-roofing-hero-content h2 {

        font-size: 28px;
    }
}



@media (max-width: 768px) {

    .types-roofing-hero-section {

        min-height: 760px;

        background-attachment: scroll;
    }

    .types-roofing-hero-content h1 {

        font-size: 52px;
    }

    .types-roofing-hero-content h2 {

        font-size: 22px;

        margin-bottom: 40px;
    }

    .types-roofing-estimate-btn,
    .types-roofing-phone-btn {

        width: 250px;

        height: 70px;

        font-size: 20px;
    }

    .types-roofing-hero-buttons {

        gap: 25px;
    }
}




/* =========================================
   TYPES OF ROOFING CITIES SECTION
========================================= */

.types-roofing-cities-section {

    width: 100%;

    padding: 85px 40px;

    background-image: url("../images/mixed-black-background.png");

    background-size: contain;

    background-repeat: repeat;

    background-position: center;

    text-align: center;
}



/* CONTENT */

.types-roofing-cities-content {

    max-width: 1800px;

    margin: 0 auto;
}



/* TITLE */

.types-roofing-cities-content h2 {

    color: #ffffff;

    font-size: 25px;

    font-weight: 550;

    line-height: 1.3;

    text-transform: uppercase;

    letter-spacing: 1px;
}



/* RESPONSIVE */

@media (max-width: 1200px) {

    .types-roofing-cities-content h2 {

        font-size: 42px;
    }
}



@media (max-width: 768px) {

    .types-roofing-cities-section {

        padding: 60px 25px;
    }

    .types-roofing-cities-content h2 {

        font-size: 28px;

        line-height: 1.5;
    }
}



/* =========================================
   TYPES OF ROOFING VALUE SECTION
========================================= */

.types-roofing-value-section {

    width: 100%;

    padding: 90px 40px;

    background-color: #efefef;

    background-image: url("../images/champion-watermark.png");

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    background-attachment: fixed;

    overflow: hidden;
}



/* CONTAINER */

.types-roofing-value-container {

    max-width: 1100px;

    margin: 0 auto;

    display: flex;

    align-items: flex-start;

    gap: 35px;
}



/* LEFT LINE */

.types-roofing-value-line {

    width: 10px;

    min-height: 300px;

    background: #666666;

    flex-shrink: 0;
}



/* CONTENT */

.types-roofing-value-content {

    width: 100%;
}



/* TITLE */

.types-roofing-value-content h2 {

    font-size: 20px;

    line-height: 1.2;

    font-weight: 600;

    color: #ff5a1f;

    text-transform: uppercase;

    margin-bottom: 35px;
}



/* PARAGRAPHS */

.types-roofing-value-content p {

    font-size: 17px;

    line-height: 1.3;

    color: #666666;

    margin-bottom: 28px;
}



/* BUTTON */

.types-roofing-value-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 280px;

    height: 46px;

    background: #00ff2a;

    color: #111111;

    text-decoration: none;

    font-size: 16px;

    font-weight: 500;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    transition: 0.3s ease;
}



/* HOVER + CLICK */

.types-roofing-value-btn:hover,
.types-roofing-value-btn:active {

    background: #ff5a1f;

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 1200px) {

    .types-roofing-value-content h2 {

        font-size: 42px;
    }

    .types-roofing-value-content p {

        font-size: 20px;
    }
}



@media (max-width: 768px) {

    .types-roofing-value-section {

        padding: 70px 25px;

        background-attachment: scroll;
    }

    .types-roofing-value-container {

        flex-direction: column;

        gap: 25px;
    }

    .types-roofing-value-line {

        width: 100%;

        min-height: 8px;
    }

    .types-roofing-value-content h2 {

        font-size: 32px;
    }

    .types-roofing-value-content p {

        font-size: 18px;

        line-height: 1.6;
    }

    .types-roofing-value-btn {

        width: 100%;

        max-width: 360px;

        height: 72px;

        font-size: 18px;
    }
}



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

.types-roofing-services-section {

    position: relative;

    width: 100%;

    min-height: 580px;

    overflow: hidden;
}



/* LEFT IMAGE - FIXED */

.types-roofing-services-left-image {

    position: absolute;

    top: 0;

    left: 0;

    width: 80%;

    height: 100%;

    background-image: url("../images/types-of-roofing-3.png");

    background-size: auto;

    background-position: left center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    z-index: 1;
}



/* RIGHT IMAGE - SCROLL */

.types-roofing-services-right-image {

    position: absolute;

    top: 0;

    right: 0;

    width: 20%;

    height: 100%;

    background-image: url("../images/types-of-roofing-3.png");

    background-size: cover;

    background-position: right center;

    background-repeat: no-repeat;

    background-attachment: scroll;

    z-index: 1;
}



/* CARD */

.types-roofing-services-card {

    position: relative;

    z-index: 2;

    width: 590px;

    margin-left: 50%;

    top: 100px;

    background: #ffffff;

    border-left: 24px solid #ff4a1c;

    padding: 60px 52px 60px;

    box-shadow: 0 0 14px rgba(0, 0, 0, 0.35);
}



/* TITLE */

.types-roofing-services-card h2 {

    font-size: 25px;

    line-height: 1.1;

    color: #ff4a1c;

    font-weight: 600;

    margin-bottom: 30px;
}



/* LIST */

.types-roofing-services-card ul {

    margin: 0 0 34px 34px;

    padding: 0;
}



.types-roofing-services-card li {

    font-size: 17px;

    line-height: 1.4;

    color: #2f2f2f;
}



/* BUTTON */

.types-roofing-services-card a {

    display: inline-block;

    padding: 16px 28px;

    background: #00ff2f;

    color: #111111;

    text-decoration: none;

    font-size: 17px;

    letter-spacing: 1.3px;

    transition: 0.3s ease;
}



.types-roofing-services-card a:hover,
.types-roofing-services-card a:active {

    background: #ff4a1c;

    color: #ffffff;
}



/* ===================================
   TYPES ROOFING MATERIALS SECTION
====================================== */

.types-roofing-materials-section {

    position: relative;

    width: 100%;

    padding: 50px 20px 50px;

    background: #ffffff;

    overflow: hidden;
}



/* LEFT ORANGE BACKGROUND */

.types-roofing-materials-background {

    position: absolute;

    top: 0;

    left: 0;

    width: 33%;

    height: 100%;

    background: #ff4a1c;

    z-index: 1;
}



/* WRAPPER */

.types-roofing-materials-wrapper {

    position: relative;

    z-index: 2;

    width: 78%;

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 32px;
}



/* EACH BOX */

.types-roofing-materials-card {

    background: #f2f2f2;

    display: flex;

    align-items: center;

    gap: 80px;

    padding: 50px 50px;

    min-height: 350px;
}



/* LEFT IMAGE AREA */

.types-roofing-materials-image-area {

    width: 340px;

    flex-shrink: 0;

    text-align: center;
}



/* CIRCLE IMAGE */

.types-roofing-materials-image-area img {

    width: 250px;

    height: 250px;

    border-radius: 50%;

    border: 14px solid #5c5c5c;

    object-fit: cover;

    display: block;

    margin: 0 auto 22px;
}



/* IMAGE CAPTION */

.types-roofing-materials-image-area p {

    max-width: 320px;

    margin: 0 auto;

    font-size: 16px;

    line-height: 1.3;

    color: #777777;

    text-align: center;
}



/* RIGHT TEXT AREA */

.types-roofing-materials-content {

    flex: 1;
}



/* TITLE */

.types-roofing-materials-content h2 {

    font-size: 25px;

    line-height: 1.1;

    color: #ff4a1c;

    font-weight: 600;

    margin-bottom: 24px;

    text-transform: uppercase;
}



/* PARAGRAPHS */

.types-roofing-materials-content p {

    font-size: 16px;

    line-height: 1.3;

    color: #555555;

    margin-bottom: 20px;
}



/* BUTTON */

.types-roofing-materials-content a {

    display: inline-block;

    margin-top: 10px;

    padding: 16px 28px;

    background: #00ff2f;

    color: #111111;

    text-decoration: none;

    font-size: 17px;

    letter-spacing: 1.4px;

    transition: 0.3s ease;
}



/* HOVER */

.types-roofing-materials-content a:hover,
.types-roofing-materials-content a:active {

    background: #ff4a1c;

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .types-roofing-materials-background {

        width: 100%;
    }

    .types-roofing-materials-wrapper {

        width: 92%;

        gap: 28px;
    }

    .types-roofing-materials-card {

        flex-direction: column;

        text-align: center;

        gap: 35px;

        padding: 50px 28px;
    }

    .types-roofing-materials-image-area {

        width: 100%;
    }

    .types-roofing-materials-image-area img {

        width: 220px;

        height: 220px;
    }

    .types-roofing-materials-content h2 {

        font-size: 30px;
    }

    .types-roofing-materials-content p {

        font-size: 18px;
    }
}



/* ===================================
   TYPES ROOFING EXTRA MATERIALS
====================================== */

.types-roofing-extra-materials-section {

    position: relative;

    width: 100%;

    padding: 75px 0 90px;

    background: #222222;

    overflow: hidden;
}



/* LEFT DARK BACKGROUND */

.types-roofing-extra-materials-dark {

    position: absolute;

    top: 0;

    left: 0;

    width: 67%;

    height: 100%;

    background: #222222;

    z-index: 1;
}



/* RIGHT ORANGE BACKGROUND */

.types-roofing-extra-materials-orange {

    position: absolute;

    top: 0;

    right: 0;

    width: 33%;

    height: 100%;

    background: #ff4a1c;

    z-index: 1;
}



/* WRAPPER */

.types-roofing-extra-materials-wrapper {

    position: relative;

    z-index: 2;

    width: 70%;

    max-width: 1450px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 35px;

      width: 75%;
}



/* CARD */

.types-roofing-extra-materials-card {

    background: #f3f3f3;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 70px;

    padding: 65px 72px;

    min-height: 450px;
}



/* CONTENT */

.types-roofing-extra-materials-content {

    flex: 1;
}



.types-roofing-extra-materials-content h2 {

    font-size: 25px;

    line-height: 1.1;

    color: #ff4a1c;

    font-weight: 600;

    margin-bottom: 24px;
}



.types-roofing-extra-materials-content p {

    font-size: 16px;

    line-height: 1.3;

    color: #444444;

    margin-bottom: 20px;
}



/* IMAGE AREA */

.types-roofing-extra-materials-image-area {

    width: 330px;

    flex-shrink: 0;

    text-align: center;
}



.types-roofing-extra-materials-image-area img {

    width: 250px;

    height: 250px;

    border-radius: 50%;

    border: 14px solid #5c5c5c;

    object-fit: cover;

    display: block;

    margin: 0 auto 22px;
}



.types-roofing-extra-materials-image-area p {

    max-width: 320px;

    margin: 0 auto;

    font-size: 16px;

    line-height: 1.35;

    color: #777777;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .types-roofing-extra-materials-dark,
    .types-roofing-extra-materials-orange {

        width: 100%;
    }

    .types-roofing-extra-materials-wrapper {

        width: 92%;
    }

    .types-roofing-extra-materials-card {

        flex-direction: column;

        text-align: center;

        padding: 50px 28px;

        gap: 35px;
    }

    .types-roofing-extra-materials-content h2 {

        font-size: 30px;
    }

    .types-roofing-extra-materials-content p {

        font-size: 18px;
    }

    .types-roofing-extra-materials-image-area {

        width: 100%;
    }
}



/* ===================================
   TYPES ROOFING TOP RATED SECTION
====================================== */

.types-roofing-top-rated-section {

    position: relative;

    width: 100%;

    min-height: 700px;

    overflow: hidden;
}



/* LEFT IMAGE - SCROLL */

.types-roofing-top-rated-left-image {

    position: absolute;

    top: 0;

    left: 0;

    width: 30%;

    height: 100%;

    background-image: url("../images/types-of-roofing-2.png");

    background-size: cover;

    background-position: left center;

    background-repeat: no-repeat;

    background-attachment: scroll;

    z-index: 1;
}



/* RIGHT IMAGE - FIXED */

.types-roofing-top-rated-right-image {

    position: absolute;

    top: 0;

    right: 0;

    width: 70%;

    height: 100%;

    background-image: url("../images/types-of-roofing-2.png");

    background-size: cover;

    background-position: right center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    z-index: 1;
}



/* CARD */

.types-roofing-top-rated-card {

    position: relative;

    z-index: 2;

    width: 610px;

    margin-left: 13%;

    top: 75px;

    background: #ffffff;

    border-left: 24px solid #ff4a1c;

    padding: 42px 58px 56px;

    box-shadow: 0 0 14px rgba(0, 0, 0, 0.35);
}



/* TITLE */

.types-roofing-top-rated-card h2 {

    font-size: 25px;

    line-height: 1.1;

    color: #ff4a1c;

    font-weight: 600;

    margin-bottom: 28px;
}



/* TEXT */

.types-roofing-top-rated-card p {

    font-size: 17px;

    line-height: 1.4;

    color: #2f2f2f;

    margin-bottom: 18px;
}


/* RESPONSIVE */

@media (max-width: 991px) {

    .types-roofing-top-rated-section {

        min-height: auto;

        padding: 70px 0;
    }

    .types-roofing-top-rated-left-image,
    .types-roofing-top-rated-right-image {

        width: 100%;

        background-attachment: scroll;
    }

    .types-roofing-top-rated-left-image {

        display: none;
    }

    .types-roofing-top-rated-card {

        width: 88%;

        margin: 0 auto;

        top: 0;

        padding: 38px 30px 42px;

        border-left: 18px solid #ff4a1c;
    }

    .types-roofing-top-rated-card h2 {

        font-size: 24px;
    }

    .types-roofing-top-rated-card p {

        font-size: 16px;
    }
}


/* ===================================
   TYPES ROOFING QUALITY SECTION
====================================== */

.types-roofing-quality-section {

    position: relative;

    width: 100%;

    padding: 50px 20px 50px;

    background-image: url("../images/champion-watermark.png");

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    background-color: #f3f3f3;

    overflow: hidden;
}



/* OVERLAY */

.types-roofing-quality-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(255,255,255,0.28);

    z-index: 1;
}



/* CONTENT */

.types-roofing-quality-content {

    position: relative;

    z-index: 2;

    max-width: 1300px;

    margin: 0 auto;

    text-align: center;
}



/* TITLE */

.types-roofing-quality-content h2 {

    max-width: 1300px;

    margin: 0 auto 32px;

    font-size: 26px;

    line-height: 1.08;

    font-weight: 600;

    color: #ff4a1c;

    text-transform: uppercase;
}



/* TEXT */

.types-roofing-quality-content p {

    max-width: 1150px;

    margin: 0 auto 36px;

    font-size: 17px;

    line-height: 1.4;

    color: #2d2d2d;
}



/* BUTTON */

.types-roofing-quality-btn {

    display: inline-block;

    margin-top: 18px;

    padding: 18px 38px;

    background: #00ff2a;

    color: #111111;

    font-size: 16px;

    font-weight: 500;

    letter-spacing: 1.4px;

    text-decoration: none;

    transition: 0.3s ease;
}



/* HOVER + ACTIVE */

.types-roofing-quality-btn:hover,
.types-roofing-quality-btn:active {

    background: #ff4a1c;

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .types-roofing-quality-section {

        padding: 80px 20px 90px;
    }

    .types-roofing-quality-content h2 {

        font-size: 34px;
    }

    .types-roofing-quality-content p {

        font-size: 18px;
    }

    .types-roofing-quality-btn {

        padding: 20px 36px;

        font-size: 16px;

        letter-spacing: 2px;
    }
}



/* ===================================
   TYPES ROOFING SERVICES ICONS
====================================== */

.types-roofing-services-icons-section {

    position: relative;

    width: 100%;

    padding: 80px 20px 75px;

    background-image: url("../images/mixed-black-background.png");

    background-size: contain;

    background-repeat: repeat;

    background-position: center;

    border-bottom: 8px solid #ff4a1c;

    overflow: hidden;
}



/* CONTAINER */

.types-roofing-services-icons-container {

    max-width: 1450px;

    margin: 0 auto;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    gap: 95px;

    flex-wrap: wrap;
}



/* ITEM */

.types-roofing-services-icons-item {

    text-decoration: none;

    text-align: center;

    transition: 0.3s ease;
}



/* ICON */

.types-roofing-services-icons-circle img {

    width: 110px;

    height: 110px;

    object-fit: contain;
}



/* TITLE */

.types-roofing-services-icons-item h3 {

    font-size: 18px;

    line-height: 1.5;

    font-weight: 550;

    color: #00ff2a;

    letter-spacing: 1px;
}



/* HOVER */

.types-roofing-services-icons-item:hover
.types-roofing-services-icons-circle {

    transform: translateY(-6px);

    box-shadow: 0 0 22px rgba(0,0,0,0.7);
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .types-roofing-services-icons-container {

        gap: 45px;
    }

    .types-roofing-services-icons-circle {

        width: 135px;

        height: 135px;
    }

    .types-roofing-services-icons-circle img {

        width: 60px;

        height: 60px;
    }

    .types-roofing-services-icons-item h3 {

        font-size: 20px;
    }
}



/* ROOFING BRANDS SIDE SUBMENU */

.roofing-menu-item {
    position: relative;
}

.roofing-menu-item > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.roofing-menu-item > a span {
    font-size: 16px;
    line-height: 1;
}

.roofing-menu-item:hover > a {
    color: #00ff3c;
}

.roofing-brand-submenu {
    position: absolute;
    top: 0;
    left: 100%;

    width: 210px;
    min-height: 180px;

    background: #5f5f5f;

    list-style: none;
    padding: 22px 0;
    margin: 0;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    z-index: 9999;
}

.roofing-menu-item:hover .roofing-brand-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.roofing-brand-submenu li a {
    display: block;

    padding: 18px 18px;

    color: white;
    text-decoration: none;

    font-size: 16px;
    font-weight: 550;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.roofing-brand-submenu li a:hover {
    color: #00ff3c;
}


.roofing-brand-submenu li a.active-brand {
    color: #00ff3c;
}


/* RESPONSIVE - ROOFING BRANDS SIDE SUBMENU */

@media (max-width: 991px) {

    .roofing-brand-submenu {
        position: static;
        width: 100%;
        min-height: auto;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        padding: 0;
        margin-top: 10px;

        background: #4f4f4f;
    }

    .roofing-brand-submenu li a {
        padding: 14px 30px;
        font-size: 14px;
        letter-spacing: 1px;
    }

    .roofing-menu-item > a span {
        font-size: 18px;
    }
}




/* ===================================
   DECRA BRAND HERO SECTION HTML PAGE
=================================== */

.decra-brand-hero-section {
    position: relative;
    width: 100%;
    min-height: 720px;

    background-image:
        linear-gradient(rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.58)),
        url("../images/roofing-brands-decra-hero.jpeg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    overflow: hidden;
}

.decra-brand-hero-content {
    position: relative;
    z-index: 2;
    margin-top: 110px;
}

.decra-brand-logo-box {
    width: 340px;
    height: 130px;
    background: #ffffff;

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

    margin: 0 auto 45px;
}

.decra-brand-logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.decra-brand-hero-content h1 {
    color: #ffffff;

    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 48px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;

    margin-bottom: 25px;
}

.decra-brand-hero-content h2 {
    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 26px;
    font-weight: 550;

    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;

    margin-bottom: 40px;
}

.decra-brand-hero-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}

.decra-brand-estimate-btn,
.decra-brand-call-btn {
    display: inline-block;

    width: 380px;
    padding: 18px 20px;

    color: #111111;
    text-decoration: none;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;

    letter-spacing: 1.4px;
    text-transform: uppercase;

    transition: 0.3s ease;
}

.decra-brand-estimate-btn {
    background: #00ff3c;
}

.decra-brand-estimate-btn:hover,
.decra-brand-estimate-btn:active {
    background: #ff4b22;
    color: #ffffff;
}

.decra-brand-call-btn {
    background: #ff4b22;
    color: #ffffff;
}

.decra-brand-call-btn:hover,
.decra-brand-call-btn:active {
    background: #00ff3c;
    color: #111111;
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .decra-brand-hero-section {
        min-height: 720px;
        background-attachment: scroll;
        padding: 160px 25px 90px;
    }

    .decra-brand-hero-content {
        margin-top: 0;
    }

    .decra-brand-logo-box {
        width: 300px;
        height: 120px;
    }

    .decra-brand-hero-content h1 {
        font-size: 38px;
    }

    .decra-brand-hero-content h2 {
        font-size: 24px;
        line-height: 1.2;
    }

    .decra-brand-estimate-btn,
    .decra-brand-call-btn {
        width: 100%;
        max-width: 420px;
        font-size: 14px;
        letter-spacing: 2px;
    }
}



/* ===================================
   DECRA QUICK LINKS SECTION
=================================== */

.decra-brand-quick-links-section {
    position: relative;
    width: 100%;
    background: #00ff3c;
    padding: 0 0 50px;
    text-align: center;
}

.decra-brand-quick-links-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 55px;

    position: relative;
    top: -30px;
}

.decra-brand-quick-link-btn {
    display: inline-block;

    width: 350px;
    padding: 18px 20px;

    background: #ff4b22;
    color: #ffffff;

    text-decoration: none;
    text-transform: uppercase;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;

    letter-spacing: 1.5px;

    transition: 0.3s ease;
}

.decra-brand-quick-link-btn:hover,
.decra-brand-quick-link-btn:active {
    background: #00ff3c;
    color: #111111;
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .decra-brand-quick-links-section {
        padding: 50px 25px 70px;
    }

    .decra-brand-quick-links-row {
        flex-direction: column;
        gap: 25px;
        top: 0;
    }

    .decra-brand-quick-link-btn {
        width: 100%;
        max-width: 440px;
        font-size: 14px;
        letter-spacing: 2px;
    }
}


/* ===================================
   DECRA INFO AND CONTACT SECTION
=================================== */

.decra-info-contact-section {
    background: #222222;
    border-top: 4px solid #00ff3c;
    padding: 55px 0 95px;
}

.decra-info-contact-wrapper {
    width: 72%;
    max-width: 1380px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.9fr 1.05fr;
    gap: 75px;
    align-items: start;
}

.decra-info-left {
    color: #ffffff;
}

.decra-info-main-img {
    width: 100%;
    max-width: 540px;
    display: block;
    margin-bottom: 28px;
}

.decra-info-left h2 {
    color: #00ff3c;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.45;
    margin-bottom: 18px;
}

.decra-info-left p {
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 20px;
}

.decra-info-left p strong {
    font-weight: 900;
}

.decra-info-left p a {
    color: #ff4b22;
    text-decoration: none;
}

.decra-info-left p a:hover {
    color: #00ff3c;
}

.decra-info-logo-wrap {
    width: 340px;
    background: #ffffff;
    margin: 55px auto 25px;
    padding: 18px 25px;
}

.decra-info-logo-wrap img {
    width: 100%;
    display: block;
}

.decra-info-line {
    width: 100%;
    max-width: 520px;
    height: 1px;
    background: #8a8a8a;
    margin: 0 auto 28px;
}

.decra-info-icons-grid {
    max-width: 560px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 32px;
    row-gap: 36px;

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

.decra-info-icons-grid img {
    width: 145px;
    height: 145px;
    object-fit: contain;
    opacity: 0.72;
}

.decra-info-form-box {
    background: #ffffff;
    border: 5px solid #00ff3c;
    padding: 34px 28px 48px;
    color: #333333;
}

.decra-info-form-box h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: 550;
    line-height: 1.45;
    text-transform: uppercase;
    color: #333333;
    margin-bottom: 22px;
}

.decra-info-form label {
    display: block;
    color: #555555;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    margin-bottom: 10px;
}

.decra-info-form label span {
    color: #ff2f00;
    font-style: italic;
    font-size: 12px;
}

.decra-info-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 28px;
}

.decra-info-form input[type="text"],
.decra-info-form input[type="email"],
.decra-info-form input[type="tel"] {
    width: 100%;
    height: 55px;
    border: 1px solid #eeeeee;
    padding: 0 15px;
    font-size: 14px;
    color: #333333;
}

.decra-info-form input::placeholder {
    color: #dddddd;
}

.decra-info-small-row input {
    max-width: 145px;
}

.decra-info-checkboxes {
    margin-bottom: 28px;
}

.decra-info-checkboxes label,
.decra-info-radio label {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    color: #777777;
}

.decra-info-checkboxes input,
.decra-info-radio input {
    margin-right: 6px;
}

.decra-info-form textarea {
    width: 100%;
    height: 220px;
    border: 1px solid #eeeeee;
    resize: vertical;
    margin-bottom: 24px;
    padding: 15px;
    font-size: 16px;
}

.decra-info-radio {
    margin: 12px 0 28px;
}

.decra-info-form button {
    width: 100%;
    height: 44px;
    border: none;
    background: #ff4b22;
    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    cursor: pointer;

    transition: 0.3s ease;
}

.decra-info-form button:hover,
.decra-info-form button:active {
    background: #00ff3c;
    color: #111111;
}

/* RESPONSIVE */

@media (max-width: 1100px) {

    .decra-info-contact-wrapper {
        width: 90%;
        grid-template-columns: 1fr;
    }

    .decra-info-main-img {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 650px) {

    .decra-info-contact-section {
        padding: 45px 0 70px;
    }

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

    .decra-info-form-box h2 {
        font-size: 26px;
    }

    .decra-info-logo-wrap {
        width: 280px;
    }

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

    .decra-info-icons-grid img {
        width: 115px;
        height: 115px;
    }
}


/* ===================================
   DECRA PRODUCTS TEXT SECTION
=================================== */

.decra-products-text-section {
    position: relative;
    width: 100%;

    background-image:
        linear-gradient(rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.18)),
        url("../images/mixed-black-background.png");

    background-size: contain;
    background-position: center top;
    background-repeat: repeat;
    background-attachment: fixed;

    padding: 65px 0 65px;
}

.decra-products-text-box {
    width: 72%;
    max-width: 1370px;
    margin: 0 auto;

    background: rgba(0, 0, 0, 0.42);

    padding: 42px 70px 45px;
}

.decra-products-text-box h2 {
    color: #00ff3c;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1px;

    margin-bottom: 35px;
}

.decra-products-text-box p {
    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.3;

    margin-bottom: 22px;
}

.decra-products-text-btn {
    display: inline-block;

    margin-top: 20px;

    background: #ff4b22;
    color: #ffffff;

    text-decoration: none;
    text-transform: uppercase;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;

    letter-spacing: 1.4px;

    padding: 15px 28px;

    transition: 0.3s ease;
}

.decra-products-text-btn:hover,
.decra-products-text-btn:active {
    background: #00ff3c;
    color: #111111;
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .decra-products-text-section {
        background-attachment: scroll;
        padding: 80px 20px;
    }

    .decra-products-text-box {
        width: 100%;
        padding: 40px 28px 50px;
    }

    .decra-products-text-box h2 {
        font-size: 28px;
    }

    .decra-products-text-box p {
        font-size: 16px;
    }

    .decra-products-text-btn {
        width: 100%;
        text-align: center;
        font-size: 14px;
        letter-spacing: 2px;
        padding: 18px 20px;
    }
}



/* ===================================
   DECRA PRODUCTS SHOWCASE SECTION
=================================== */

.decra-showcase-products-section {
    position: relative;
    width: 100%;

    background: #3f3f3f;

    padding: 60px 0 60px;

    overflow: hidden;
}

/* RIGHT IMAGE ONLY INSIDE THIS SECTION */

.decra-showcase-products-section::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 50%;
    height: 100%;

    background-image: url("../images/roofing-brands-decra-17.png");

    background-size: contain;
    background-position: right center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    z-index: 0;
}

.decra-showcase-products-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
}


/* WHITE BOX */

.decra-showcase-products-box {
    width: 770px;

    background: #ffffff;

    margin-left: 260px;
    margin-right: auto;

    padding: 70px 85px 70px;

    border-left: 26px solid #ff4b22;
    border-right: none;
}

/* TITLE */

.decra-showcase-products-box h2 {
    color: #222222;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: 600;

    text-transform: uppercase;

    margin-bottom: 60px;
}

/* PRODUCT ITEM */

.decra-showcase-product-item {
    display: flex;

    align-items: flex-start;

    gap: 48px;

    margin-bottom: 35px;
}

/* IMAGE */

.decra-showcase-product-item img {
    width: 200px;
    height: 200px;

    object-fit: cover;

    flex-shrink: 0;
}

/* TEXT */

.decra-showcase-product-text h3 {
    color: #333333;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 550;

    text-transform: uppercase;

    margin-bottom: 18px;
}

.decra-showcase-product-text p {
    color: #333333;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;

    line-height: 1.3;
}

/* GREEN DIVIDER */

.decra-showcase-divider {
    width: 100%;
    height: 3px;

    background: #00ff3c;

    margin: 35px 0 28px;
}

/* BUTTON */

.decra-showcase-contact-btn {
    display: block;

    width: 100%;

    margin-top: 25px;

    background: #ff4b22;
    color: #ffffff;

    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;

    letter-spacing: 1.4px;

    padding: 18px 20px;

    transition: 0.3s ease;
}

.decra-showcase-contact-btn:hover,
.decra-showcase-contact-btn:active {
    background: #00ff3c;
    color: #111111;
}

/* RESPONSIVE */

@media (max-width: 1200px) {

    .decra-showcase-products-box {
        width: 90%;

        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 991px) {

    .decra-showcase-products-section {
        padding: 70px 20px 80px;
    }

    .decra-showcase-products-section::before {
        background-attachment: scroll;
    }

    .decra-showcase-products-box {
        width: 100%;

        padding: 50px 28px;

        border-right: 12px solid #ff4b22;
    }

    .decra-showcase-product-item {
        flex-direction: column;
    }

    .decra-showcase-product-item img {
        width: 100%;
        height: auto;
    }

    .decra-showcase-products-box h2 {
        font-size: 28px;
    }

    .decra-showcase-product-text h3 {
        font-size: 24px;
    }

    .decra-showcase-product-text p {
        font-size: 16px;
    }

    .decra-showcase-contact-btn {
        font-size: 14px;

        letter-spacing: 2px;
    }
}



/* ===================================
   DECRA TOP RATED ROOFERS SECTION
=================================== */

.decra-top-rated-roofers-section {
    position: relative;
    width: 100%;
    min-height: 520px;

    background:  #3f3f3f;

    padding: 90px 0;

    overflow: hidden;
}

.decra-top-rated-roofers-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    bottom: 0;
    background-image: url("../images/roofing-brands-decra-16.png");
    background-size: cover;
    background-position: left bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: 1;
}

.decra-top-rated-roofers-card {
    position: relative;
    z-index: 2;

    width: 52%;
    max-width: 1040px;

    margin-left: 35%;
    margin-right: auto;

    background: #ffffff;

    padding: 35px 60px 30px;

    border-left: 26px solid #ff4b22;
}

.decra-top-rated-roofers-card h2 {
    color: #222222;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: 550;

    text-transform: uppercase;
    letter-spacing: 1px;

    margin-bottom: 32px;
}

.decra-top-rated-roofers-card p {
    color: #222222;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.3;

    margin-bottom: 42px;
}

.decra-top-rated-roofers-btn {
    display: inline-block;

    background: #00ff3c;
    color: #111111;

    text-decoration: none;
    text-transform: uppercase;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;

    letter-spacing: 1.3px;

    padding: 16px 24px;

    transition: 0.3s ease;
}

.decra-top-rated-roofers-btn:hover,
.decra-top-rated-roofers-btn:active {
    background: #ff4b22;
    color: #ffffff;
}

/* RESPONSIVE */

@media (max-width: 1100px) {

    .decra-top-rated-roofers-section {
        padding: 70px 25px;
    }

    .decra-top-rated-roofers-image {
        width: 100%;
        opacity: 0.35;
    }

    .decra-top-rated-roofers-card {
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 650px) {

    .decra-top-rated-roofers-card {
        padding: 45px 28px;
        border-left: 12px solid #ff4b22;
    }

    .decra-top-rated-roofers-card h2 {
        font-size: 28px;
    }

    .decra-top-rated-roofers-card p {
        font-size: 16px;
    }

    .decra-top-rated-roofers-btn {
        width: 100%;
        text-align: center;
        font-size: 14px;
        letter-spacing: 2px;
        padding: 18px 20px;
    }
}



/* ===================================
   GAF BRAND HERO SECTION HTML PAGE
=================================== */

.gaf-brand-hero-section {
    position: relative;
    width: 100%;
    min-height: 850px;
    background-image: url("../images/roofing-brands-gaf-hero.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    border-bottom: 8px solid #00ff3c;
}

.gaf-brand-hero-content {
    position: relative;
    z-index: 2;
    margin-top: 115px;
}

.gaf-brand-logo-box {
    width: 260px;
    height: 260px;
    margin: 0 auto 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gaf-brand-logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gaf-brand-hero-content h1 {
    color: #ffffff;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 52px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;

    margin-bottom: 25px;
}

.gaf-brand-hero-content h2 {
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 34px;
    font-weight: 550;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
    margin-bottom: 36px;
}

.gaf-brand-hero-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 45px;
    flex-wrap: wrap;
}

.gaf-brand-estimate-btn,
.gaf-brand-call-btn {
    display: inline-block;

    width: 390px;
    padding: 18px 20px;

    text-decoration: none;
    text-transform: uppercase;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 500;

    letter-spacing: 1.5px;

    transition: 0.3s ease;
}

.gaf-brand-estimate-btn {
    background: #00ff3c;
    color: #111111;
}

.gaf-brand-estimate-btn:hover,
.gaf-brand-estimate-btn:active {
    background: #ff4b22;
    color: #ffffff;
}

.gaf-brand-call-btn {
    background: #ff4b22;
    color: #ffffff;
}

.gaf-brand-call-btn:hover,
.gaf-brand-call-btn:active {
    background: #00ff3c;
    color: #111111;
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .gaf-brand-hero-section {
        min-height: 720px;
        background-attachment: scroll;
        padding: 160px 25px 90px;
    }

    .gaf-brand-hero-content {
        margin-top: 0;
    }

    .gaf-brand-logo-box {
        width: 210px;
        height: 210px;
    }

    .gaf-brand-hero-content h1 {
        font-size: 38px;
    }

    .gaf-brand-hero-content h2 {
        font-size: 24px;
        line-height: 1.2;
    }

    .gaf-brand-estimate-btn,
    .gaf-brand-call-btn {
        width: 100%;
        max-width: 430px;
        font-size: 13px;
        letter-spacing: 2px;
    }
}



/* ===================================
   GAF INFO AND CONTACT SECTION
=================================== */

.gaf-info-contact-section {
    background: #222222;
    padding: 45px 0 75px;
}

.gaf-info-contact-wrapper {
    width: 72%;
    max-width: 1380px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.9fr 1.05fr;
    gap: 75px;
    align-items: start;
}

.gaf-info-left {
    color: #ffffff;
}

.gaf-info-main-img {
    width: 100%;
    max-width: 560px;
    display: block;
    margin-bottom: 28px;
}

.gaf-info-left h2 {
    color: #00ff3c;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.45;
    margin-bottom: 20px;
}

.gaf-info-text-logo-row {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 35px;
    align-items: center;
}

.gaf-info-text p {
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 18px;
}

.gaf-info-text strong {
    font-weight: 800;
}

.gaf-info-text a {
    color: #ff4b22;
    text-decoration: none;
}

.gaf-info-text a:hover {
    color: #00ff3c;
}

.gaf-info-logo-img {
    width: 180px;
    height: 180px;
    object-fit: contain;
    display: block;
}

.gaf-info-line {
    width: 100%;
    height: 1px;
    background: #8a8a8a;
    margin: 35px 0 40px;
}

.gaf-info-icons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    row-gap: 0px;

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

.gaf-info-icons-grid img {
    width: 165px;
    height: 165px;
    object-fit: contain;
    opacity: 0.92;
}

/* FORM */

.gaf-info-form-box {
    background: #ffffff;
    border: 5px solid #00ff3c;
    padding: 44px 28px 48px;
    color: #333333;
}

.gaf-info-form-box h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.45;
    text-transform: uppercase;
    color: #333333;
    margin-bottom: 22px;
}

.gaf-info-form label {
    display: block;
    color: #555555;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    margin-bottom: 10px;
}

.gaf-info-form label span {
    color: #ff2f00;
    font-style: italic;
    font-size: 12px;
}

.gaf-info-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 28px;
}

.gaf-info-form input[type="text"],
.gaf-info-form input[type="email"],
.gaf-info-form input[type="tel"] {
    width: 100%;
    height: 55px;
    border: 1px solid #eeeeee;
    padding: 0 15px;
    font-size: 13px;
    color: #333333;
}

.gaf-info-form input::placeholder {
    color: #dddddd;
}

.gaf-info-small-row input {
    max-width: 145px;
}

.gaf-info-checkboxes {
    margin-bottom: 28px;
}

.gaf-info-checkboxes label,
.gaf-info-radio label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    color: #777777;
}

.gaf-info-checkboxes input,
.gaf-info-radio input {
    margin-right: 6px;
}

.gaf-info-form textarea {
    width: 100%;
    height: 220px;
    border: 1px solid #eeeeee;
    resize: vertical;
    margin-bottom: 24px;
    padding: 15px;
    font-size: 13px;
}

.gaf-info-radio {
    margin: 12px 0 28px;
}

.gaf-info-form button {
    width: 100%;
    height: 44px;
    border: none;
    background: #ff4b22;
    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    cursor: pointer;

    transition: 0.3s ease;
}

.gaf-info-form button:hover,
.gaf-info-form button:active {
    background: #00ff3c;
    color: #111111;
}


/* RESPONSIVE - GAF INFO AND CONTACT SECTION */

@media (max-width: 1100px) {

    .gaf-info-contact-wrapper {
        width: 90%;
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .gaf-info-main-img {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .gaf-info-text-logo-row {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .gaf-info-logo-img {
        margin: 10px auto 0;
    }
}

@media (max-width: 650px) {

    .gaf-info-contact-section {
        padding: 40px 0 60px;
    }

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

    .gaf-info-small-row input {
        max-width: 100%;
    }

    .gaf-info-form-box {
        padding: 35px 22px 40px;
    }

    .gaf-info-form-box h2 {
        font-size: 22px;
    }

    .gaf-info-icons-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px;
    }

    .gaf-info-icons-grid img {
        width: 125px;
        height: 125px;
    }
}


/* ===================================
   GAF FEATURED SHINGLES SECTION
=================================== */

.gaf-featured-shingles-section {
    background: #ffffff;
    padding: 60px 55px 60px;
    text-align: center;
}

.gaf-featured-shingles-section h2 {
    color: #222222;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 31px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1px;

    margin-bottom: 32px;
}

.gaf-featured-shingles-btn {
    display: inline-block;

    background: #00ff3c;
    color: #111111;

    text-decoration: none;
    text-transform: uppercase;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 500;

    letter-spacing: 2.5px;

    padding: 16px 35px;

    margin-bottom: 70px;

    transition: 0.3s ease;
}

.gaf-featured-shingles-btn:hover,
.gaf-featured-shingles-btn:active {
    background: #ff4b22;
    color: #ffffff;
}

.gaf-featured-shingles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 62px;

    text-align: left;
}

.gaf-featured-shingle-card {
    border-left: 20px solid #ff4b22;
    padding-left: 62px;
}

.gaf-featured-shingle-card img {
    width: 100%;
    height: 215px;

    object-fit: cover;

    display: block;

    margin-bottom: 32px;
}

.gaf-featured-shingle-card h3 {
    color: #222222;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: 550;

    text-transform: uppercase;

    margin-bottom: 10px;
}

.gaf-featured-shingle-line {
    width: 28px;
    height: 1px;

    background: #222222;

    margin-bottom: 15px;
}

.gaf-featured-shingle-card p {
    color: #222222;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
}

/* RESPONSIVE */

@media (max-width: 1200px) {

    .gaf-featured-shingles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 55px;
    }
}

@media (max-width: 650px) {

    .gaf-featured-shingles-section {
        padding: 70px 25px;
    }

    .gaf-featured-shingles-grid {
        grid-template-columns: 1fr;
    }

    .gaf-featured-shingle-card {
        padding-left: 35px;
        border-left: 14px solid #ff4b22;
    }

    .gaf-featured-shingle-card img {
        height: auto;
    }

    .gaf-featured-shingles-btn {
        width: 100%;
        font-size: 13px;
        letter-spacing: 2px;
        padding: 18px 20px;
    }
}



/* ===================================
   GAF RESIDENTIAL ROOFING SECTION
=================================== */

.gaf-residential-text-section {
    position: relative;
    width: 100%;

    background-image:
        linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
        url("../images/mixed-black-background.png");

    background-size: contain;
    background-position: center top;
    background-repeat: repeat;
    background-attachment: fixed;

    padding: 55px 0 55px;
}

.gaf-residential-text-box {
    width: 72%;
    max-width: 1380px;

    margin: 0 auto;

    background: rgba(0, 0, 0, 0.48);

    padding: 42px 70px 45px;
}

.gaf-residential-text-box h2 {
    color: #00ff3c;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1px;

    margin-bottom: 35px;
}

.gaf-residential-text-box p {
    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.4;

    margin-bottom: 22px;
}

.gaf-residential-text-btn {
    display: inline-block;

    margin-top: 20px;

    background: #ff4b22;
    color: #ffffff;

    text-decoration: none;
    text-transform: uppercase;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;

    letter-spacing: 1.4px;

    padding: 16px 28px;

    transition: 0.3s ease;
}

.gaf-residential-text-btn:hover,
.gaf-residential-text-btn:active {
    background: #00ff3c;
    color: #111111;
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .gaf-residential-text-section {
        background-attachment: scroll;
        padding: 80px 20px;
    }

    .gaf-residential-text-box {
        width: 100%;

        padding: 40px 28px 50px;
    }

    .gaf-residential-text-box h2 {
        font-size: 28px;
    }

    .gaf-residential-text-box p {
        font-size: 16px;
    }

    .gaf-residential-text-btn {
        width: 100%;

        text-align: center;

        font-size: 14px;

        letter-spacing: 2px;

        padding: 18px 20px;
    }
}


/* ===================================
   GAF PRODUCTS SHOWCASE SECTION
=================================== */

.gaf-products-showcase-section {
    position: relative;
    width: 100%;

    background: #3f3f3f;

    padding: 90px 0 70px;

    overflow: hidden;
}

/* RIGHT FIXED BACKGROUND IMAGE */

.gaf-products-showcase-section::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 50%;
    height: 100%;

    background-image: url("../images/roofing-brands-gaf-23.png");

    background-size: contain;

    background-position: right top;

    background-repeat: no-repeat;

    background-attachment: fixed;

    z-index: 0;
}


/* CONTENT WRAPPER */

.gaf-products-showcase-wrapper {
    position: relative;
    z-index: 2;

    width: 100%;
}

/* WHITE CARD */

.gaf-products-showcase-card {
    width: 850px;

    background: #ffffff;

    margin-left: 260px;
    margin-right: auto;

    padding: 55px 65px 70px;

    border-left: 26px solid #ff4b22;
}

/* TITLE */

.gaf-products-showcase-card h2 {
    color: #222222;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1px;

    margin-bottom: 55px;
}

/* ITEM */

.gaf-products-showcase-item {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 48px;
    align-items: flex-start;
}

.gaf-products-showcase-item img {
    width: 210px;
    height: 210px;

    object-fit: cover;
    display: block;
}

/* TEXT */

.gaf-products-showcase-text h3 {
    color: #333333;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: 550;

    text-transform: uppercase;
    letter-spacing: 1px;

    margin-bottom: 18px;
}

.gaf-products-showcase-text p,
.gaf-products-showcase-text li {
    color: #333333;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.25;
}

.gaf-products-showcase-text ul {
    margin: 16px 0 18px 28px;
}

.gaf-products-showcase-text li {
    margin-bottom: 12px;
}

/* GREEN LINES */

.gaf-products-showcase-line {
    width: 100%;
    height: 3px;

    background: #00ff3c;

    margin: 42px 0 42px;
}

/* BUTTON */

.gaf-products-showcase-btn {
    display: block;

    width: 100%;

    margin-top: 40px;

    background: #ff4b22;
    color: #ffffff;

    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 500;

    letter-spacing: 2px;

    padding: 20px 20px;

    transition: 0.3s ease;
}

.gaf-products-showcase-btn:hover,
.gaf-products-showcase-btn:active {
    background: #00ff3c;
    color: #111111;
}

/* RESPONSIVE */

@media (max-width: 1200px) {

    .gaf-products-showcase-card {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .gaf-products-showcase-section::before {
        width: 100%;
        opacity: 0.25;
    }
}

@media (max-width: 750px) {

    .gaf-products-showcase-section {
        padding: 65px 20px;
    }

    .gaf-products-showcase-card {
        width: 100%;
        padding: 45px 28px;
        border-left: 12px solid #ff4b22;
    }

    .gaf-products-showcase-card h2 {
        font-size: 27px;
    }

    .gaf-products-showcase-item {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .gaf-products-showcase-item img {
        width: 100%;
        height: auto;
    }

    .gaf-products-showcase-text h3 {
        font-size: 23px;
    }

    .gaf-products-showcase-text p,
    .gaf-products-showcase-text li {
        font-size: 15px;
    }

    .gaf-products-showcase-btn {
        font-size: 13px;
        letter-spacing: 2px;
    }
}


/* ===================================
   GAF SERVICES BUTTONS
=================================== */

.gaf-services-buttons-section {
    position: relative;

    width: 100%;

    background: #00ff26;

    padding: 0 0 45px;
}

.gaf-services-buttons-wrapper {
    width: 72%;
    max-width: 1400px;

    margin: 0 auto;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 55px;

    position: relative;
    top: -25px;
}

.gaf-services-button-box {
    display: flex;

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

    width: 300px;
    height: 48px;

    background: #ff4b22;
    color: #ffffff;

    text-decoration: none;
    text-transform: uppercase;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;

    letter-spacing: 1px;

    transition: 0.3s ease;
}

.gaf-services-button-box:hover,
.gaf-services-button-box:active {
    background: #00ff26;
    color: #111111;
}

/* RESPONSIVE */

@media (max-width: 1200px) {

    .gaf-services-buttons-wrapper {
        width: 92%;

        gap: 25px;
    }

    .gaf-services-button-box {
        width: 100%;
        font-size: 15px;
        letter-spacing: 2px;
    }
}

@media (max-width: 850px) {

    .gaf-services-buttons-section {
        padding-bottom: 55px;
    }

    .gaf-services-buttons-wrapper {
        flex-direction: column;

        top: -30px;
    }

    .gaf-services-button-box {
        height: 68px;
    }
}


/* ===================================
   GAF ROOF MANUFACTURER SECTION
=================================== */

.gaf-manufacturer-section {
    position: relative;
    width: 100%;
    min-height: 720px;

    background: #3f3f3f;

    padding: 90px 0;

    overflow: hidden;
}

.gaf-manufacturer-image {
    position: absolute;
    top: 0;
    left: 0;

    width: 50%;
    height: 100%;

    background-image: url("../images/roofing-brands-gaf-5.png");
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    z-index: 1;
}

.gaf-manufacturer-card {
    position: relative;
    z-index: 2;

    width: 52%;
    max-width: 960px;

    margin-left: 35%;
    margin-right: auto;

    background: #ffffff;

    padding: 35px 45px 35px;

    border-left: 26px solid #ff4b22;
}

.gaf-manufacturer-card h2 {
    color: #222222;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: 550;

    text-transform: uppercase;
    line-height: 1.35;

    margin-bottom: 35px;
}

.gaf-manufacturer-card p {
    color: #222222;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.3;

    margin-bottom: 22px;
}

.gaf-manufacturer-btn {
    display: inline-block;

    margin-top: 16px;

    background: #00ff3c;
    color: #111111;

    text-decoration: none;
    text-transform: uppercase;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 500;

    letter-spacing: 4px;

    padding: 19px 48px;

    transition: 0.3s ease;
}

.gaf-manufacturer-btn:hover,
.gaf-manufacturer-btn:active {
    background: #ff4b22;
    color: #ffffff;
}

/* RESPONSIVE */

@media (max-width: 1100px) {

    .gaf-manufacturer-section {
        padding: 70px 25px;
    }

    .gaf-manufacturer-image {
        width: 100%;
        opacity: 0.35;
        background-attachment: scroll;
    }

    .gaf-manufacturer-card {
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 650px) {

    .gaf-manufacturer-card {
        padding: 45px 28px;
        border-left: 12px solid #ff4b22;
    }

    .gaf-manufacturer-card h2 {
        font-size: 26px;
    }

    .gaf-manufacturer-card p {
        font-size: 15px;
    }

    .gaf-manufacturer-btn {
        width: 100%;
        text-align: center;
        font-size: 13px;
        letter-spacing: 2px;
    }
}



/* ===================================
   GAF FINAL ROOFERS SECTION
=================================== */

.gaf-final-roofers-section {
    position: relative;
    width: 100%;
    min-height: 460px;

    background: #3f3f3f;

    padding: 90px 0;

    overflow: hidden;
}

.gaf-final-roofers-section::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    width: 70%;
    height: 100%;
    background-image: url("../images/roofing-brands-gaf-6.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: 1;
}

.gaf-final-roofers-card {
    position: relative;
    z-index: 2;

    width: 53%;
    max-width: 1000px;

    margin-left: 16%;
    margin-right: auto;

    background: #ffffff;

    padding: 45px 70px 45px;

    border-left: 26px solid #ff4b22;
}

.gaf-final-roofers-card h2 {
    color: #222222;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1px;

    margin-bottom: 35px;
}

.gaf-final-roofers-card p {
    color: #222222;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.3;

    margin-bottom: 42px;
}

.gaf-final-roofers-btn {
    display: inline-block;

    background: #00ff3c;
    color: #111111;

    text-decoration: none;
    text-transform: uppercase;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;

    letter-spacing: 2px;

    padding: 16px 40px;

    transition: 0.3s ease;
}

.gaf-final-roofers-btn:hover,
.gaf-final-roofers-btn:active {
    background: #ff4b22;
    color: #ffffff;
}

/* RESPONSIVE */

@media (max-width: 1100px) {

    .gaf-final-roofers-section {
        padding: 70px 25px;
    }

    .gaf-final-roofers-section::before {
        width: 100%;
        opacity: 0.35;
        background-attachment: scroll;
    }

    .gaf-final-roofers-card {
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 650px) {

    .gaf-final-roofers-card {
        padding: 45px 28px;
        border-left: 12px solid #ff4b22;
    }

    .gaf-final-roofers-card h2 {
        font-size: 27px;
    }

    .gaf-final-roofers-card p {
        font-size: 16px;
    }

    .gaf-final-roofers-btn {
        width: 100%;
        text-align: center;
        font-size: 13px;
        letter-spacing: 2px;
        padding: 18px 20px;
    }
}



/* ===================================
   OWENS CORNING HERO SECTION HTML PAGE
=================================== */

.owenscorning-brand-hero-section {
    position: relative;
    width: 100%;
    min-height: 980px;

    background-image:
        linear-gradient(rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.58)),
        url("../images/roofing-brands-owenscorning-hero.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    border-bottom: 8px solid #00ff3c;
    overflow: hidden;
}

.owenscorning-brand-hero-content {
    position: relative;
    z-index: 2;
    margin-top: 120px;
}

.owenscorning-brand-logo-box {
    width: 280px;
    margin: 0 auto 45px;
}

.owenscorning-brand-logo-box img {
    width: 100%;
    height: auto;
    display: block;
}

.owenscorning-brand-hero-content h1 {
    color: #ffffff;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 54px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 22px;
}

.owenscorning-brand-hero-content h2 {
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 35px;
}

.owenscorning-brand-estimate-btn {
    display: inline-block;
    background: #ff4b22;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.3px;
    padding: 17px 25px;
    transition: 0.3s ease;
}

.owenscorning-brand-estimate-btn:hover,
.owenscorning-brand-estimate-btn:active {
    background: #00ff3c;
    color: #111111;
}


/* ===================================
   OWENS CORNING ICON STRIP
=================================== */

.owenscorning-icon-strip-section {
    position: relative;
    width: 100%;

    background-image:
        linear-gradient(rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.62)),
        url("../images/roofing-brands-owenscorning-hero.png");

    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;

    padding: 40px 0 45px;
    overflow: hidden;
}

.owenscorning-icon-strip-row {
    width: 70%;
    max-width: 1350px;
    margin: 0 auto;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
}

.owenscorning-icon-strip-row img {
    width: 135px;
    height: 135px;
    object-fit: contain;
    opacity: 0.92;
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .owenscorning-icon-strip-section {
        background-attachment: scroll;
        padding: 50px 20px;
    }

    .owenscorning-icon-strip-row {
        width: 100%;
        flex-wrap: wrap;
        gap: 35px;
    }

    .owenscorning-icon-strip-row img {
        width: 115px;
        height: 115px;
    }
}


/* ===================================
   OWENS CORNING SERVICE BUTTONS
=================================== */

.owenscorning-service-buttons-section {

    position: relative;

    width: 100%;

    background: #00ff1e;

    padding-bottom: 50px;
}

.owenscorning-service-buttons-row {

    width: 72%;

    max-width: 1350px;

    margin: 0 auto;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 55px;

    position: relative;

    top: -25px;
}

.owenscorning-service-btn {

    width: 290px;

    height: 48px;

    background: #ff4b22;

    color: #ffffff;

    text-decoration: none;

    display: flex;

    justify-content: center;

    align-items: center;

    text-transform: uppercase;

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

    font-size: 16px;

    letter-spacing: 1px;

    transition: 0.3s ease;

    cursor: pointer;
}

.owenscorning-service-btn:hover,
.owenscorning-service-btn:active {

    background: #00ff1e;

    color: #111111;
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .owenscorning-service-buttons-section {

        padding: 35px 20px 60px;
    }

    .owenscorning-service-buttons-row {

        width: 100%;

        flex-direction: column;

        gap: 25px;

        top: 0;
    }

    .owenscorning-service-btn {

        width: 100%;

        max-width: 500px;

        height: 72px;

        font-size: 15px;

        letter-spacing: 2px;
    }
}



/* ===================================
   OWENS CORNING INFO SECTION
=================================== */

.owenscorning-brand-info-section {

    width: 100%;

    background: #222222;

    padding: 60px 0 60px;
}

.owenscorning-brand-info-content {

    width: 70%;

    max-width: 1400px;

    margin-left: 270px;
}

.owenscorning-brand-info-content h2 {

    color: #ff4b22;

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

    font-size: 30px;

    font-weight: 600;

    text-transform: uppercase;

    margin-bottom: 38px;
}

.owenscorning-brand-info-content p {

    color: #ffffff;

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

    font-size: 16px;

    line-height: 1.4;

    margin-bottom: 28px;

    max-width: 1450px;
}

.owenscorning-brand-info-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 360px;

    height: 46px;

    background: #00ff2a;

    color: #111111;

    text-decoration: none;

    text-transform: uppercase;

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

    font-size: 16px;

    letter-spacing: 2px;

    transition: 0.3s ease;
}

.owenscorning-brand-info-btn:hover,
.owenscorning-brand-info-btn:active {

    background: #ff4b22;

    color: #ffffff;
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .owenscorning-brand-info-section {

        padding: 55px 20px 75px;
    }

    .owenscorning-brand-info-content {

        width: 100%;
    }

    .owenscorning-brand-info-content h2 {

        font-size: 34px;

        line-height: 1.25;
    }

    .owenscorning-brand-info-content p {

        font-size: 17px;

        line-height: 1.6;
    }

    .owenscorning-brand-info-btn {

        width: 100%;

        max-width: 430px;

        height: 72px;

        font-size: 14px;

        letter-spacing: 3px;
    }
}


/* ===================================
   OWENS CORNING FEATURED SHINGLES
=================================== */

.owenscorning-featured-shingles-section {
    background: #ffffff;
    padding: 75px 55px 75px;
    text-align: center;
}

.owenscorning-featured-shingles-section h2 {
    color: #222222;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 31px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1px;

    margin-bottom: 32px;
}

.owenscorning-featured-shingles-btn {
    display: inline-block;

    background: #00ff3c;
    color: #111111;

    text-decoration: none;
    text-transform: uppercase;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 500;

    letter-spacing: 2px;

    padding: 16px 38px;

    margin-bottom: 70px;

    transition: 0.3s ease;
}

.owenscorning-featured-shingles-btn:hover,
.owenscorning-featured-shingles-btn:active {
    background: #ff4b22;
    color: #ffffff;
}

.owenscorning-featured-shingles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 62px;

    text-align: left;
}

.owenscorning-featured-shingle-card {
    border-left: 18px solid #ff4b22;
    padding-left: 62px;
}

.owenscorning-featured-shingle-card img {
    width: 100%;
    height: 230px;

    object-fit: cover;
    display: block;

    margin-bottom: 32px;
}

.owenscorning-featured-shingle-card h3 {
    color: #222222;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 600;

    text-transform: uppercase;

    margin-bottom: 10px;
}

.owenscorning-featured-shingle-line {
    width: 38px;
    height: 1px;

    background: #222222;

    margin-bottom: 15px;
}

.owenscorning-featured-shingle-card p {
    color: #222222;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
}

/* RESPONSIVE */

@media (max-width: 1200px) {

    .owenscorning-featured-shingles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 55px;
    }
}

@media (max-width: 650px) {

    .owenscorning-featured-shingles-section {
        padding: 70px 25px;
    }

    .owenscorning-featured-shingles-grid {
        grid-template-columns: 1fr;
    }

    .owenscorning-featured-shingle-card {
        padding-left: 35px;
        border-left: 14px solid #ff4b22;
    }

    .owenscorning-featured-shingle-card img {
        height: auto;
    }

    .owenscorning-featured-shingles-btn {
        width: 100%;
        font-size: 13px;
        letter-spacing: 2px;
        padding: 18px 20px;
    }
}



/* ===================================
   OWENS CORNING RESIDENTIAL TEXT SECTION
=================================== */

.owenscorning-residential-text-section {
    position: relative;
    width: 100%;

    background-image:
        linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
        url("../images/mixed-black-background.png");

    background-size: contain;
    background-position: center top;
    background-repeat: repeat;
    background-attachment: fixed;

    padding: 75px 0 75px;
}

.owenscorning-residential-text-box {
    width: 72%;
    max-width: 1450px;

    margin: 0 auto;

    background: rgba(0, 0, 0, 0.55);

    padding: 72px 70px 75px;
}

.owenscorning-residential-text-box h2 {
    color: #00ff3c;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: 550;

    text-transform: uppercase;
    letter-spacing: 1px;

    margin-bottom: 35px;
}

.owenscorning-residential-text-box p {
    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.5;
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .owenscorning-residential-text-section {
        background-attachment: scroll;
        padding: 70px 20px;
    }

    .owenscorning-residential-text-box {
        width: 100%;
        padding: 45px 28px 50px;
    }

    .owenscorning-residential-text-box h2 {
        font-size: 26px;
        line-height: 1.3;
    }

    .owenscorning-residential-text-box p {
        font-size: 16px;
    }
}


/* ===================================
   OWENS CORNING PRODUCTS SHOWCASE
=================================== */

.owenscorning-products-showcase-section {
    position: relative;
    width: 100%;

    background-image: url("../images/roofing-brands-owenscorning-1.png");
    background-size: contain;
    background-position: right top;
    background-repeat: no-repeat;
    background-attachment: fixed;

    padding: 80px 0 85px;

    overflow: hidden;
}

.owenscorning-products-showcase-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 40%;
    height: 100%;

    background: #3f3f3f;

    z-index: 0;
}

.owenscorning-products-showcase-card {
    position: relative;
    z-index: 2;

    width: 760px;

    margin-left: 215px;
    margin-right: auto;

    background: #ffffff;

    padding: 52px 65px 60px;

    border-left: 26px solid #ff4b22;
}

.owenscorning-products-showcase-card h2 {
    color: #222222;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1px;

    margin-bottom: 22px;
}

.owenscorning-products-top-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    min-width: 340px;
    height: 46px;

    background: #00ff3c;
    color: #111111;

    text-decoration: none;
    text-transform: uppercase;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    letter-spacing: 1.5px;

    margin-bottom: 60px;

    transition: 0.3s ease;
}

.owenscorning-products-top-btn:hover,
.owenscorning-products-top-btn:active {
    background: #ff4b22;
    color: #ffffff;
}

.owenscorning-products-item {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 48px;

    align-items: center;

    margin-bottom: 85px;
}

.owenscorning-products-item:last-of-type {
    margin-bottom: 0;
}

.owenscorning-products-item img {
    width: 230px;
    height: 230px;

    object-fit: cover;

    display: block;
}

.owenscorning-products-text h3 {
    color: #222222;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 550;

    text-transform: uppercase;

    margin-bottom: 16px;
}

.owenscorning-products-text p {
    color: #111111;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.25;

    margin-bottom: 35px;
}

.owenscorning-products-learn-btn {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 46px;

    background: #ff4b22;
    color: #ffffff;

    text-decoration: none;
    text-transform: uppercase;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    letter-spacing: 2px;

    transition: 0.3s ease;
}

.owenscorning-products-learn-btn:hover,
.owenscorning-products-learn-btn:active {
    background: #00ff3c;
    color: #111111;
}

/* RESPONSIVE */

@media (max-width: 1200px) {

    .owenscorning-products-showcase-section {
        background-size: cover;
        background-position: center;
        background-attachment: scroll;
        padding: 70px 20px;
    }

    .owenscorning-products-showcase-section::before {
        width: 100%;
        background: rgba(63, 63, 63, 0.7);
    }

    .owenscorning-products-showcase-card {
        width: 100%;
        max-width: 900px;

        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 750px) {

    .owenscorning-products-showcase-card {
        padding: 45px 28px;
        border-left: 12px solid #ff4b22;
    }

    .owenscorning-products-showcase-card h2 {
        font-size: 27px;
    }

    .owenscorning-products-top-btn {
        min-width: 100%;
        font-size: 13px;
        letter-spacing: 2px;
    }

    .owenscorning-products-item {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 65px;
    }

    .owenscorning-products-item img {
        width: 100%;
        height: auto;
    }

    .owenscorning-products-text p {
        font-size: 16px;
    }

    .owenscorning-products-learn-btn {
        font-size: 13px;
        letter-spacing: 2px;
    }
}



/* ===================================
   OWENS CORNING BENEFITS SECTION
=================================== */

.owenscorning-benefits-section {
    position: relative;
    width: 100%;
    min-height: 630px;

    background-image: url("../images/roofing-brands-owenscorning-3.png");
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    padding: 50px 0;

    overflow: hidden;
}

.owenscorning-benefits-card {
    position: relative;
    z-index: 2;

    width: 50%;
    max-width: 850px;

    margin-left: 40%;
    margin-right: auto;

    background: #ffffff;

    padding: 32px 65px 32px;

    border-left: 26px solid #ff4b22;
}

.owenscorning-benefits-card h2 {
    color: #222222;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: 600;

    text-transform: uppercase;
    line-height: 1.35;

    margin-bottom: 35px;
}

.owenscorning-benefits-card ul {
    margin: 0 0 35px 28px;
    padding: 0;
}

.owenscorning-benefits-card li {
    color: #222222;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.3;

    margin-bottom: 12px;
}

.owenscorning-benefits-card li strong {
    font-weight: 750;
}

.owenscorning-benefits-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: 340px;
    height: 46px;

    background: #00ff3c;
    color: #111111;

    text-decoration: none;
    text-transform: uppercase;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    letter-spacing: 2px;

    transition: 0.3s ease;
}

.owenscorning-benefits-btn:hover,
.owenscorning-benefits-btn:active {
    background: #ff4b22;
    color: #ffffff;
}

/* RESPONSIVE */

@media (max-width: 1100px) {

    .owenscorning-benefits-section {
        background-size: cover;
        background-position: center;
        background-attachment: scroll;

        padding: 70px 25px;
    }

    .owenscorning-benefits-card {
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 650px) {

    .owenscorning-benefits-card {
        padding: 42px 28px;
        border-left: 12px solid #ff4b22;
    }

    .owenscorning-benefits-card h2 {
        font-size: 26px;
    }

    .owenscorning-benefits-card li {
        font-size: 15px;
    }

    .owenscorning-benefits-btn {
        width: 100%;
        font-size: 13px;
        letter-spacing: 2px;
    }
}



/* ===================================
   OWENS CORNING FINAL ROOFERS SECTION
=================================== */

.owenscorning-final-roofers-section {
    position: relative;
    width: 100%;
    min-height: 620px;

    background-image: url("../images/roofing-brands-owenscorning-2.png");
    background-size: contain;
    background-position: right center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    padding: 90px 0;

    overflow: hidden;
}

.owenscorning-final-roofers-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 50%;
    height: 100%;

    background: #3f3f3f;

    z-index: 0;
}

.owenscorning-final-roofers-card {
    position: relative;
    z-index: 2;

    width: 48%;
    max-width: 1000px;

    margin-left: 15%;
    margin-right: auto;

    background: #ffffff;

    padding: 45px 70px 55px;

    border-left: 26px solid #ff4b22;
}

.owenscorning-final-roofers-card h2 {
    color: #222222;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 35px;
}

.owenscorning-final-roofers-card p {
    color: #222222;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 22px;
}

.owenscorning-final-roofers-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    margin-top: 20px;

    width: 380px;
    height:46px;

    background: #00ff3c;
    color: #111111;

    text-decoration: none;
    text-transform: uppercase;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    letter-spacing: 2px;

    transition: 0.3s ease;
}

.owenscorning-final-roofers-btn:hover,
.owenscorning-final-roofers-btn:active {
    background: #ff4b22;
    color: #ffffff;
}





/* ===================================
   MALARKEY BRAND HERO SECTION HTML PAGE
====================================== */

.malarkey-brand-hero-section {
    position: relative;
    width: 100%;
    min-height: 1200px;
    background-image: url("../images/roofing-brands-malarkey-hero1.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -180px;
    overflow: hidden;
   
}

.malarkey-brand-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    z-index: 1;
}

.malarkey-brand-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1250px;
    text-align: center;
    padding: 170px 20px 70px;
}

.malarkey-brand-logo {
    width: 400px;
    max-width: 90%;
    display: block;
    margin: 0 auto 35px;
}

.malarkey-brand-hero-content h1 {
    font-size: 50px;
    line-height: 1.1;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 22px;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}

.malarkey-brand-hero-content h2 {
    font-size: 28px;
    line-height: 1.2;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 35px;
    font-family: Arial, Helvetica, sans-serif;
}

.malarkey-brand-hero-btn {
    display: inline-block;
    background: #ff4b1f;
    color: #ffffff;
    text-decoration: none;
    padding: 16px 28px;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.malarkey-brand-hero-btn:hover,
.malarkey-brand-hero-btn:active {
    background: #18b82f;
    color: #ffffff;
}

.malarkey-brand-icons-row {
    margin: 58px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
    flex-wrap: nowrap;
}

.malarkey-brand-icons-row img {
    width: 150px;
    height: auto;
    opacity: 0.98;
    display: block;
}

/* RESPONSIVE */

@media (max-width: 1200px) {
    .malarkey-brand-icons-row {
        gap: 35px;
    }

    .malarkey-brand-icons-row img {
        width: 130px;
    }
}

@media (max-width: 900px) {
    .malarkey-brand-hero-section {
        min-height: 820px;
        background-attachment: scroll;
    }

    .malarkey-brand-hero-content {
        padding-top: 140px;
    }

    .malarkey-brand-logo {
        width: 390px;
    }

    .malarkey-brand-hero-content h1 {
        font-size: 40px;
    }

    .malarkey-brand-hero-content h2 {
        font-size: 24px;
    }

    .malarkey-brand-icons-row {
        flex-wrap: wrap;
        gap: 30px;
    }

    .malarkey-brand-icons-row img {
        width: 120px;
    }
}

@media (max-width: 600px) {
    .malarkey-brand-hero-content h1 {
        font-size: 32px;
    }

    .malarkey-brand-hero-content h2 {
        font-size: 19px;
    }

    .malarkey-brand-hero-btn {
        padding: 16px 28px;
        font-size: 14px;
        letter-spacing: 2px;
    }

    .malarkey-brand-icons-row img {
        width: 100px;
    }
}



/* ===================================
   MALARKEY SERVICES CARDS SECTION
====================================== */

.malarkey-services-cards-section {
    position: relative;
    width: 100%;
    padding: 175px 0 75px;
    background-image: url("../images/roofing-brands-malarkey-19.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 10px solid #00ff1e;
    border-bottom: 5px solid #00ff1e;
    overflow: visible;
     z-index: 5;
    
}

.malarkey-services-cards-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: -290px auto 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 100px;
    
}

.malarkey-services-card {
    width: 360px;
    height: 250px;
    display: block;
    overflow: hidden;
    border: 2px solid #ffffff;
    
  
   
}

.malarkey-services-card img {
    width: 100%;
    height: auto;
    display: block;
    
    
}

.malarkey-services-card:hover img,
.malarkey-services-card:active img {
    transform: scale(1.03);
}




/* RESPONSIVE */

@media (max-width: 1700px) {

    .malarkey-services-cards-wrapper {
        gap: 55px;
    }

    .malarkey-services-card {
        width: 480px;
    }
}

@media (max-width: 1450px) {

    .malarkey-services-cards-wrapper {
        gap: 35px;
    }

    .malarkey-services-card {
        width: 420px;
    }
}

@media (max-width: 1200px) {

    .malarkey-services-cards-wrapper {
        flex-wrap: wrap;
        align-items: center;
        gap: 40px;
    }

    .malarkey-services-card {
        width: 85%;
        max-width: 650px;
    }
}

@media (max-width: 768px) {

    .malarkey-services-cards-section {
        padding: 35px 20px 50px;
    }

    .malarkey-services-card {
        width: 100%;
    }
}



/* ===================================
   MALARKEY PRODUCT INFO + SHINGLES
====================================== */

.malarkey-product-info-section {
    position: relative;
    width: 100%;
    background-color: #ffffff;
    background-image: url("../images/champion-watermark.png");
    background-size: 850px;
    background-position: center top 10px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 90px 40px 100px;
    overflow: hidden;
    border-bottom: 8px solid #00ff1e;
}

.malarkey-product-info-inner {
    position: relative;
    z-index: 2;
    max-width: 1350px;
    margin: 0 auto 90px;
    padding-left: 150px;
    display: grid;
    grid-template-columns: 1.6fr 0.8fr;
    align-items: center;
    gap: 80px;
}

.malarkey-product-info-left {
    border-left: 8px solid #565656;
    padding-left: 35px;
}

.malarkey-product-info-left h2 {
    color: #ff4b1f;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 28px;
    font-family: Arial, Helvetica, sans-serif;
}

.malarkey-product-info-left p {
    max-width: 890px;
    color: #606060;
    font-size: 16px;
    line-height: 1.1;
    margin: 0 0 22px;
    font-family: Arial, Helvetica, sans-serif;
}

.malarkey-product-info-btn,
.malarkey-featured-shingles-btn {
    display: inline-block;
    background: #ff4b1f;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 16px;
    font-weight: 500;
    padding: 16px 20px;
    margin-top: 25px;
    transition: 0.3s ease;
}

.malarkey-product-info-btn:hover,
.malarkey-product-info-btn:active,
.malarkey-featured-shingles-btn:hover,
.malarkey-featured-shingles-btn:active {
    background: #18b82f;
    color: #ffffff;
}

.malarkey-product-info-right {
    position: relative;
    text-align: center;
}

.malarkey-product-info-right img {
    width: 350px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-left: -70px;
   
}

.malarkey-featured-shingles-wrap {
    position: relative;
    z-index: 2;
    max-width: 1350px;
    margin: 0 auto;
    text-align: center;
}

.malarkey-featured-shingles-wrap h2 {
    font-size: 40px;
    line-height: 1.1;
    color: #333333;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin: 0 0 60px;
    font-family: Arial, Helvetica, sans-serif;
}

.malarkey-featured-shingles-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 48px;
}

.malarkey-shingle-item {
    width: 285px;
    text-align: center;
}

.malarkey-shingle-item img {
    width: 245px;
    height: 245px;
    object-fit: cover;
    display: block;
    margin: 0 auto 28px;
}

.malarkey-shingle-item h3 {
    color: #3f3f3f;
    font-size: 20px;
    line-height: 1.05;
    font-weight: 550;
    text-transform: uppercase;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.malarkey-shingle-item span {
    width: 135px;
    height: 2px;
    background: #cfcfcf;
    display: block;
    margin: 8px auto 6px;
}

.malarkey-shingle-item p {
    color: #666666;
    font-size: 18px;
    line-height: 1.2;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.malarkey-featured-shingles-btn {
    margin-top: 65px;
    margin-bottom: 60px;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
    .malarkey-product-info-inner {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .malarkey-featured-shingles-row {
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    .malarkey-product-info-section {
        padding: 60px 20px 80px;
        background-attachment: scroll;
        background-size: 600px;
    }

    .malarkey-product-info-left h2,
    .malarkey-featured-shingles-wrap h2 {
        font-size: 32px;
    }

    .malarkey-product-info-left p {
        font-size: 17px;
    }

    .malarkey-product-info-btn,
    .malarkey-featured-shingles-btn {
        padding: 17px 25px;
        font-size: 14px;
        letter-spacing: 2px;
    }
}



/* ===================================
   MALARKEY ORANGE RESIDENTIAL SECTION
====================================== */

.malarkey-orange-residential-section {
    position: relative;
    width: 100%;
    padding: 0px 50px 65px;
    background-image: url("../images/roofing-brands-malarkey-19.png");
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
    border-top: 2px solid #00ff1e;
    border-bottom: 4px solid #00ff1e;
}

.malarkey-orange-residential-box {
    width: 100%;
    max-width: 1250px;
    margin: -55px auto 0;
    background: #ff4b1f;
    padding: 32px 60px;
    color: #ffffff;
}

.malarkey-orange-residential-box h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 550;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 28px;
}

.malarkey-orange-residential-box p {
    max-width: 1250px;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 400;
    color: #ffffff;
}

/* RESPONSIVE */

@media (max-width: 900px) {
    .malarkey-orange-residential-section {
        padding: 0 20px 65px;
    }

    .malarkey-orange-residential-box {
        margin-top: -35px;
        padding: 55px 30px;
    }

    .malarkey-orange-residential-box h2 {
        font-size: 32px;
    }

    .malarkey-orange-residential-box p {
        font-size: 18px;
    }
}



/* ===================================
   MALARKEY HIGHLANDER SECTION
====================================== */

.malarkey-highlander-section {
    position: relative;
    width: 100%;
    min-height: 460px;
    display: flex;
    background-image: url("../images/roofing-brands-malarkey-highlander.jpg");
    background-size: 60% 100%;
    background-position: right center;
    background-repeat: no-repeat;
    background-attachment: fixed; 
    overflow: hidden;
}

.malarkey-highlander-left {
    position: relative;
    width: 40%;
    min-height: 760px;
    background: #ffffff;
    padding: 120px 0 80px 75px;
    z-index: 2;
}

.malarkey-highlander-left h2 {
    color: #444444;
    font-size: 30px;
    line-height: 1.45;
    font-weight: 650;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin: 0 0 35px;
    font-family: Arial, Helvetica, sans-serif;
}

.malarkey-highlander-card {
    position: relative;
    width: 800px;
    min-height: 360px;
    background: #484848;
    border-left: 26px solid #ff4b1f;
    display: flex;
    align-items: center;
    gap: 55px;
    padding: 55px 60px;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.25);
    z-index: 5;
}

.malarkey-highlander-card-text {
    width: 58%;
}

.malarkey-highlander-card-text h3 {
    color: #00ff1e;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 25px;
    font-family: Arial, Helvetica, sans-serif;
}

.malarkey-highlander-card-text p {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 35px;
    font-family: Arial, Helvetica, sans-serif;
}

.malarkey-highlander-btn {
    display: inline-block;
    background: #00ff1e;
    color: #111111;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-size: 15px;
    font-weight: 500;
    padding: 17px 32px;
    transition: 0.3s ease;
}

.malarkey-highlander-btn:hover,
.malarkey-highlander-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}

.malarkey-highlander-card-image {
    width: 220px;
    flex-shrink: 0;
}

.malarkey-highlander-card-image img {
    width: 220px;
    height: 190px;
    object-fit: cover;
    border: 1px solid #ffffff;
    display: block;
}

.malarkey-highlander-right {
    width: 60%;
}

/* RESPONSIVE */

@media (max-width: 1200px) {
    .malarkey-highlander-section {
        flex-direction: column;
        background-size: cover;
        background-position: center;
        background-attachment: scroll;
    }

    .malarkey-highlander-left {
        width: 100%;
        padding: 80px 30px;
        min-height: auto;
    }

    .malarkey-highlander-card {
        width: 100%;
        max-width: 900px;
    }

    .malarkey-highlander-right {
        display: none;
    }
}

@media (max-width: 768px) {
    .malarkey-highlander-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 45px 30px;
    }

    .malarkey-highlander-card-text {
        width: 100%;
    }

    .malarkey-highlander-left h2 {
        font-size: 34px;
    }
}



/* ===================================
   MALARKEY VISTA SECTION
====================================== */

.malarkey-vista-section {
    position: relative;
    width: 100%;
    min-height: 500px;
    background-image: url("../images/roofing-brands-malarkey-vista.jpg");
    background-size: 60% 100%;
    background-position: left center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    overflow: hidden;
}

.malarkey-vista-left {
    width: 55%;
    min-height: 500px;
}

.malarkey-vista-right {
    width: 45%;
    min-height: 600px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.malarkey-vista-card {
    width: 800px;
    min-height: 355px;
    margin-left: -230px;
    background: #484848;
    border-left: 26px solid #ff4b1f;
    display: flex;
    align-items: center;
    gap: 65px;
    padding: 65px 75px;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.malarkey-vista-text {
    width: 62%;
}

.malarkey-vista-text h3 {
    color: #00ff1e;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 550;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 28px;
    font-family: Arial, Helvetica, sans-serif;
}

.malarkey-vista-text p {
    color: #ffffff;
    font-size: 17px;
    line-height: 1.4;
    margin: 0 0 40px;
    font-family: Arial, Helvetica, sans-serif;
}

.malarkey-vista-btn {
    display: inline-block;
    background: #00ff1e;
    color: #111111;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 15px;
    font-weight: 500;
    padding: 16px 22px;
    transition: 0.3s ease;
}

.malarkey-vista-btn:hover,
.malarkey-vista-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}

.malarkey-vista-image {
    width: 230px;
    flex-shrink: 0;
}

.malarkey-vista-image img {
    width: 230px;
    height: 230px;
    object-fit: cover;
    border: 1px solid #ffffff;
    display: block;
}

/* RESPONSIVE */

@media (max-width: 1200px) {
    .malarkey-vista-section {
        flex-direction: column;
        background-size: cover;
        background-position: center;
        background-attachment: scroll;
    }

    .malarkey-vista-left {
        width: 100%;
        min-height: 420px;
    }

    .malarkey-vista-right {
        width: 100%;
        min-height: auto;
        padding: 60px 30px;
    }

    .malarkey-vista-card {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .malarkey-vista-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 45px 30px;
    }

    .malarkey-vista-text {
        width: 100%;
    }
}



/* ===================================
   MALARKEY LEGACY SECTION
====================================== */

.malarkey-legacy-section {
    position: relative;
    width: 100%;
    min-height: 560px;
    background-image: url("../images/roofing-brands-malarkey-legacy.jpg");
    background-size: 60% 100%;
    background-position: right center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.malarkey-legacy-left {
    width: 45%;
    min-height: 560px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.malarkey-legacy-card {
    width: 820px;
    min-height: 400px;
    margin-right: -220px;
    background: #484848;
    border-left: 26px solid #ff4b1f;
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 50px 60px;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

.malarkey-legacy-text {
    width: 62%;
}

.malarkey-legacy-text h3 {
    color: #00ff1e;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 550;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 28px;
    font-family: Arial, Helvetica, sans-serif;
}

.malarkey-legacy-text p {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 40px;
    font-family: Arial, Helvetica, sans-serif;
}

.malarkey-legacy-btn {
    display: inline-block;
    background: #00ff1e;
    color: #111111;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-size: 15px;
    font-weight: 500;
    padding: 16px 22px;
    transition: 0.3s ease;
}

.malarkey-legacy-btn:hover,
.malarkey-legacy-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}

.malarkey-legacy-image {
    width: 230px;
    flex-shrink: 0;
}

.malarkey-legacy-image img {
    width: 230px;
    height: 230px;
    object-fit: cover;
    border: 1px solid #ffffff;
    display: block;
}

.malarkey-legacy-right {
    width: 55%;
    min-height: 560px;
}

/* RESPONSIVE */

@media (max-width: 1200px) {
    .malarkey-legacy-section {
        flex-direction: column;
        background-size: cover;
        background-position: center;
        background-attachment: scroll;
    }

    .malarkey-legacy-left {
        width: 100%;
        min-height: auto;
        padding: 60px 30px;
        justify-content: center;
    }

    .malarkey-legacy-card {
        width: 100%;
        margin-right: 0;
    }

    .malarkey-legacy-right {
        display: none;
    }
}

@media (max-width: 768px) {
    .malarkey-legacy-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 45px 30px;
    }

    .malarkey-legacy-text {
        width: 100%;
    }
}



/* ===================================
   MALARKEY WINDSOR SECTION
====================================== */

.malarkey-windsor-section {
    position: relative;
    width: 100%;
    min-height: 560px;
    background-image: url("../images/roofing-brands-malarkey-windsor.jpg");
    background-size: 60% 100%;
    background-position: left center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    overflow: hidden;
    border-bottom: 4px solid #ff4b1f;
}

.malarkey-windsor-left {
    width: 55%;
    min-height: 560px;
}

.malarkey-windsor-right {
    width: 45%;
    min-height: 560px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.malarkey-windsor-card {
    width: 820px;
    min-height: 400px;
    margin-left: -230px;
    background: #484848;
    border-left: 26px solid #ff4b1f;
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 50px 60px;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28);
    z-index: 2;
}

.malarkey-windsor-text {
    width: 63%;
}

.malarkey-windsor-text h3 {
    color: #00ff1e;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 550;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 28px;
    font-family: Arial, Helvetica, sans-serif;
}

.malarkey-windsor-text p {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 40px;
    font-family: Arial, Helvetica, sans-serif;
}

.malarkey-windsor-btn {
    display: inline-block;
    background: #00ff1e;
    color: #111111;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 15px;
    font-weight: 500;
    padding: 16px 22px;
    transition: 0.3s ease;
}

.malarkey-windsor-btn:hover,
.malarkey-windsor-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}

.malarkey-windsor-image {
    width: 220px;
    flex-shrink: 0;
}

.malarkey-windsor-image img {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border: 1px solid #ffffff;
    display: block;
}

/* RESPONSIVE */

@media (max-width: 1200px) {
    .malarkey-windsor-section {
        flex-direction: column;
        background-size: cover;
        background-position: center;
        background-attachment: scroll;
    }

    .malarkey-windsor-left {
        width: 100%;
        min-height: 420px;
    }

    .malarkey-windsor-right {
        width: 100%;
        min-height: auto;
        padding: 60px 30px;
    }

    .malarkey-windsor-card {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .malarkey-windsor-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 45px 30px;
    }

    .malarkey-windsor-text {
        width: 100%;
    }
}



/* ===================================
   MALARKEY MATERIALS INFO SECTION
====================================== */

.malarkey-materials-info-section {
    position: relative;
    width: 100%;
    min-height: 820px;
    background-image: url("../images/roofing-brands-malarkey-hero.jpg");
    background-size: 62% 100%;
    background-position: right center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.malarkey-materials-info-left {
    width: 40%;
    min-height: 820px;
    background: #4c4c4c;
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.malarkey-materials-info-card {
    width: 600px;
    background: #ffffff;
    border-left: 24px solid #ff4b1f;
    padding: 44px 58px 55px;
    margin-right: -170px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    position: relative;
    z-index: 2;
}

.malarkey-materials-info-card h2 {
    color: #ff4b1f;
    font-size: 25px;
    line-height: 1.3;
    font-weight: 550;
    text-transform: uppercase;
    margin: 0 0 25px;
    font-family: Arial, Helvetica, sans-serif;
}

.malarkey-materials-info-card ul {
    margin: 0 0 34px 22px;
    padding: 0;
}

.malarkey-materials-info-card li {
    color: #111111;
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 6px;
    font-family: Arial, Helvetica, sans-serif;
}

.malarkey-materials-info-card strong {
    font-weight: 700;
}

.malarkey-materials-info-btn {
    display: inline-block;
    background: #00ff1e;
    color: #111111;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 15px;
    font-weight: 500;
    padding: 16px 22px;
    transition: 0.3s ease;
}

.malarkey-materials-info-btn:hover,
.malarkey-materials-info-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}

.malarkey-materials-info-right {
    width: 60%;
    min-height: 820px;
}

/* RESPONSIVE */

@media (max-width: 1200px) {
    .malarkey-materials-info-section {
        flex-direction: column;
        background-size: cover;
        background-position: center;
        background-attachment: scroll;
    }

    .malarkey-materials-info-left {
        width: 100%;
        min-height: auto;
        padding: 70px 25px;
        justify-content: center;
    }

    .malarkey-materials-info-card {
        width: 100%;
        max-width: 700px;
        margin-right: 0;
    }

    .malarkey-materials-info-right {
        display: none;
    }
}

@media (max-width: 600px) {
    .malarkey-materials-info-card {
        padding: 35px 28px 40px;
    }

    .malarkey-materials-info-card h2 {
        font-size: 24px;
    }

    .malarkey-materials-info-card li {
        font-size: 15px;
    }

    .malarkey-materials-info-btn {
        padding: 16px 25px;
        font-size: 13px;
    }
}



/* ===================================
   MALARKEY FINAL CTA SECTION
====================================== */

.malarkey-final-cta-section {
    position: relative;
    width: 100%;
    padding: 50px 40px 50px;
    overflow: visible;
    border-bottom: 10px solid #ff4b1f;

    background-image: url("../images/champion-watermark.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #f3f3f3;
}

.malarkey-final-cta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.22);
    z-index: 1;
}

.malarkey-final-cta-content {
    position: relative;
    z-index: 2;
    max-width: 1450px;
    margin: 0 auto;
    text-align: center;
}

.malarkey-final-cta-content h2 {
    color: #ff4b1f;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 550;
    text-transform: uppercase;
    margin-bottom: 30px;
    font-family: Arial, Helvetica, sans-serif;
}

.malarkey-final-cta-content p {
    max-width: 1100px;
    margin: 0 auto 24px;
    color: #111111;
    font-size: 16px;
    line-height: 1.5;
    font-family: Arial, Helvetica, sans-serif;
}

.malarkey-final-cta-btn {
    display: inline-block;
    margin-top: 28px;
    padding: 16px 22px;
    background: #00ff1e;
    color: #111111;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-size: 15px;
    font-weight: 500;
    transition: 0.3s ease;
    margin-bottom: 100px;
}

.malarkey-final-cta-btn:hover,
.malarkey-final-cta-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .malarkey-final-cta-section {
        padding: 70px 25px 90px;
        background-size: 620px;
        background-attachment: scroll;
    }

    .malarkey-final-cta-content h2 {
        font-size: 30px;
    }

    .malarkey-final-cta-content p {
        font-size: 17px;
    }

    .malarkey-final-cta-btn {
        padding: 18px 30px;
        font-size: 13px;
        letter-spacing: 2px;
        
    }
}




/* ===================================
   MALARKEY CONTACT FORM SECTION
====================================== */

.malarkey-contact-form-section {
    width: 100%;
    padding: 0 40px 50px;
    background-image: url("../images/mixed-black-background.png");
    background-size: auto;
    background-position: center;
    background-repeat: repeat;
    border-top: 2px solid #ff4b1f;
}

.malarkey-contact-form-box {
    max-width: 1100px;
    margin: -70px auto 0;
    background: #ffffff;
    padding: 50px 28px 50px;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.45);
    transform: translateY(-10px);
}

.malarkey-contact-form-box h2 {
    color: #ff4b1f;
    text-align: center;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 70px;
    padding-top: 65px;
    font-family: Arial, Helvetica, sans-serif;
}

.malarkey-contact-form {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
}

.malarkey-contact-form label {
    display: block;
    color: #333333;
    font-size: 17px;
    margin-bottom: 10px;
}

.malarkey-contact-form label span {
    color: #ff4b1f;
    font-style: italic;
    font-size: 14px;
}

.malarkey-contact-name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 28px;
}

.malarkey-contact-two-row {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 28px;
}

.malarkey-contact-email-box {
    width: 28%;
}

.malarkey-contact-phone-box {
    width: 28%;
    margin-left: 220px;
}

.malarkey-contact-form input[type="text"],
.malarkey-contact-form input[type="email"],
.malarkey-contact-form input[type="tel"] {
    width: 100%;
    height: 45px;
    border: 1px solid #eeeeee;
    padding: 0 15px;
    font-size: 16px;
}

.malarkey-contact-form input::placeholder {
    color: #d8d8d8;
}

.malarkey-contact-checks {
    margin: 12px 0 28px;
}

.malarkey-contact-checks label {
    margin-bottom: 7px;
    color: #6a6a6a;
    font-size: 16px;
}

.malarkey-contact-checks input {
    margin-right: 6px;
}

.malarkey-contact-form textarea {
    width: 100%;
    height: 260px;
    border: 1px solid #eeeeee;
    resize: vertical;
    padding: 15px;
    font-size: 16px;
    margin-bottom: 28px;
}

.malarkey-contact-form button {
    width: 100%;
    background: #ff4b1f;
    color: #ffffff;
    border: none;
    padding: 13px 20px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 4px;
    transition: 0.3s ease;
}

.malarkey-contact-form button:hover,
.malarkey-contact-form button:active {
    background: #00ff1e;
    color: #111111;
}

/* RESPONSIVE */

@media (max-width: 768px) {
    .malarkey-contact-form-section {
        padding: 0 20px 70px;
    }

    .malarkey-contact-form-box {
        margin-top: -40px;
        padding: 45px 22px;
    }

    .malarkey-contact-form-box h2 {
        font-size: 30px;
        margin-bottom: 45px;
    }

    .malarkey-contact-name-row,
    .malarkey-contact-two-row {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}



/* ===================================
   CERTAINTEED HERO SECTION HTM PAGE
====================================== */

.certainteed-hero-section {
    position: relative;
    width: 100%;
    min-height: 1050px;
    background-image: url("../images/roofing-brands-certainteed-hero.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: -90px;
    
}

.certainteed-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.05);
    z-index: 1;
}

.certainteed-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 130px 35px 60px;
    text-align: center;
}

.certainteed-hero-logo {
    width: 400px;
    max-width: 90%;
    height: auto;
    display: block;
    margin: 0 auto 45px;
}

.certainteed-hero-content h1 {
    color: #ffffff;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.1;
    margin: 0 0 20px;
    text-transform: uppercase;
}

.certainteed-hero-content h2 {
    color: #ffffff;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1.2;
    margin: 0 0 34px;
    text-transform: uppercase;
}

.certainteed-hero-btn {
    display: inline-block;
    background: #ff4b1f;
    color: #ffffff;
    padding: 16px 22px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.certainteed-hero-btn:hover,
.certainteed-hero-btn:active {
    background: #21b14b;
    color: #ffffff;
}

.certainteed-hero-icons {
    width: 100%;
    max-width: 1100px;
    margin: 55px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 55px;
}

.certainteed-hero-icons img {
    width: 145px;
    height: auto;
    opacity: 0.92;
    display: block;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
    .certainteed-hero-icons {
        gap: 30px;
        flex-wrap: wrap;
    }

    .certainteed-hero-icons img {
        width: 125px;
    }
}

@media (max-width: 768px) {
    .certainteed-hero-section {
        min-height: 760px;
        background-attachment: scroll;
    }

    .certainteed-hero-content {
        padding: 100px 22px 50px;
    }

    .certainteed-hero-logo {
        width: 360px;
        margin-bottom: 35px;
    }

    .certainteed-hero-content h1 {
        font-size: 30px;
    }

    .certainteed-hero-content h2 {
        font-size: 22px;
    }

    .certainteed-hero-btn {
        padding: 17px 28px;
        font-size: 14px;
        letter-spacing: 3px;
    }

    .certainteed-hero-icons {
        gap: 25px;
        margin-top: 45px;
    }

    .certainteed-hero-icons img {
        width: 105px;
    }
}




/* ===================================
   CERTAINTEED SERVICES CARDS SECTION
====================================== */

.certainteed-services-cards-section {
    position: relative;
    width: 100%;
    padding: 160px 0 55px;
    background-image: url("../images/roofing-brands-malarkey-19.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 10px solid #00ff1e;
    border-bottom: 5px solid #00ff1e;
    overflow: visible;
    z-index: 5;
}

.certainteed-services-cards-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: -290px auto 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 100px;
}

.certainteed-services-card {
    width: 360px;
    height: 250px;
    display: block;
    overflow: hidden;
    border: 2px solid #ffffff;
}

.certainteed-services-card img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.certainteed-services-card:hover img,
.certainteed-services-card:active img {
    transform: scale(1.03);
}

/* RESPONSIVE */

@media (max-width: 1700px) {

    .certainteed-services-cards-wrapper {
        gap: 55px;
    }

    .certainteed-services-card {
        width: 480px;
    }
}

@media (max-width: 1450px) {

    .certainteed-services-cards-wrapper {
        gap: 35px;
    }

    .certainteed-services-card {
        width: 420px;
    }
}

@media (max-width: 1200px) {

    .certainteed-services-cards-wrapper {
        flex-wrap: wrap;
        align-items: center;
        gap: 40px;
    }

    .certainteed-services-card {
        width: 85%;
        max-width: 650px;
    }
}

@media (max-width: 768px) {

    .certainteed-services-cards-section {
        padding: 35px 20px 50px;
    }

    .certainteed-services-card {
        width: 100%;
    }
}



/* ===================================
   CERTAINTEED PRODUCTS SECTION
====================================== */

.certainteed-products-section {
    position: relative;
    width: 100%;
    padding: 90px 40px 145px;
    background-image: url("../images/champion-watermark.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: hidden;
}

.certainteed-products-top {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto 75px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 85px;
}

.certainteed-products-text {
    position: relative;
    width: 62%;
    padding-left: 35px;
    border-left: 8px solid #555555;
}

.certainteed-products-text h2 {
    color: #ff4b1f;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.2;
    margin: 0 0 28px;
    text-transform: uppercase;
}

.certainteed-products-text p {
    color: #707070;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 18px;
    max-width: 900px;
}

.certainteed-products-btn,
.certainteed-shingles-btn {
    display: inline-block;
    margin-top: 28px;
    background: #ff4b1f;
    color: #ffffff;
    padding: 15px 22px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.certainteed-products-btn:hover,
.certainteed-products-btn:active,
.certainteed-shingles-btn:hover,
.certainteed-shingles-btn:active {
    background: #21b14b;
    color: #ffffff;
}

.certainteed-products-image-box {
    position: relative;
    width: 330px;
    flex-shrink: 0;
    margin-right: 70px;
   
}

.certainteed-products-image-box img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    display: block;
    margin-left: -70px;
}



/* FEATURED SHINGLES */

.certainteed-shingles-area {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    text-align: center;
}

.certainteed-shingles-area h2 {
    color: #333333;
    font-size: 35px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.1;
    margin: 0 0 55px;
    text-transform: uppercase;
    margin-top: 120px;
}

.certainteed-shingles-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
    align-items: start;
}

.certainteed-shingle-item {
    text-align: center;
}

.certainteed-shingle-item img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block;
    margin-bottom: 30px;
}

.certainteed-shingle-item h3 {
    color: #444444;
    font-size: 25px;
    font-weight: 550;
    letter-spacing: 1px;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
}

.certainteed-shingle-item span {
    position: relative;
    display: inline-block;
    color: #777777;
    font-size: 16px;
    line-height: 1.2;
    margin-top: 7px;
    padding-top: 7px;
   margin-bottom: 30px;
}

.certainteed-shingle-item span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 170px;
    height: 2px;
    background: #d5d5d5;
    transform: translateX(-50%);
 
}

/* RESPONSIVE */

@media (max-width: 1200px) {

    .certainteed-products-top {
        flex-direction: column;
        gap: 55px;
    }

    .certainteed-products-text {
        width: 100%;
    }

    .certainteed-products-image-box {
        margin-right: 0;
    }

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

@media (max-width: 768px) {

    .certainteed-products-section {
        padding: 65px 22px;
        background-attachment: scroll;
    }

    .certainteed-products-text {
        padding-left: 22px;
        border-left: 5px solid #555555;
    }

    .certainteed-products-text h2 {
        font-size: 25px;
    }

    .certainteed-products-text p {
        font-size: 17px;
    }

    .certainteed-products-image-box {
        width: 85%;
    }

    .certainteed-shingles-area h2 {
        font-size: 34px;
    }

    .certainteed-shingles-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .certainteed-products-btn,
    .certainteed-shingles-btn {
        padding: 17px 28px;
        font-size: 14px;
        letter-spacing: 3px;
    }
}



/* ===================================
   CERTAINTEED ORANGE INFO SECTION
====================================== */

.certainteed-orange-info-section {
    position: relative;
    width: 100%;
    padding: 0px 40px 55px;
    background-image: url("../images/dark-carbon-fiber.png");
    background-size: auto;
    background-position: center;
    background-repeat: repeat;
    border-top: 5px solid #00ff1e;
    border-bottom: 5px solid #00ff1e;
    overflow: visible;
}

.certainteed-orange-info-box {
    width: 72%;
    max-width: 1480px;
    margin: -40px auto 0;
    background: #ff4b1f;
    padding: 40px 60px 45px;
    color: #ffffff;
}

.certainteed-orange-info-box h2 {
    color: #ffffff;
    text-align: center;
    font-size: 35px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.1;
    margin: 0 0 28px;
    text-transform: uppercase;
}

.certainteed-orange-info-box p {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 400;
    margin: 0 0 18px;
}

.certainteed-orange-info-box p:last-child {
    margin-bottom: 0;
}

/* RESPONSIVE */

@media (max-width: 1200px) {
    .certainteed-orange-info-box {
        width: 86%;
        padding: 60px 45px;
    }
}

@media (max-width: 768px) {
    .certainteed-orange-info-section {
        padding: 0 22px 65px;
    }

    .certainteed-orange-info-box {
        width: 100%;
        margin: -35px auto 0;
        padding: 45px 28px;
    }

    .certainteed-orange-info-box h2 {
        font-size: 34px;
    }

    .certainteed-orange-info-box p {
        font-size: 17px;
    }
}


/* ===================================
   CERTAINTEED SHINGLE FEATURE SECTION
====================================== */

.certainteed-shingle-feature-section {
    position: relative;
    width: 100%;
    min-height: 750px;
    display: flex;
    overflow: hidden;
}

.certainteed-shingle-feature-left {
    position: relative;
    width: 40%;
    min-height: 850px;
    padding: 70px 0 70px 65px;
    background-image: url("../images/roofing-brands-certainteed-13.png");
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    z-index: 2;
}

.certainteed-shingle-feature-right {
    position: relative;
    width: 60%;
    min-height: 850px;
    background-image: url("../images/roofing-brands-certainteed-13.png");
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.certainteed-shingle-feature-left h2 {
    color: #3f3f3f;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 1.5px;
    line-height: 1.35;
    margin: 0 0 35px;
    text-transform: uppercase;
    max-width: 610px;
}

.certainteed-shingle-feature-card {
    position: relative;
    width: 700px;
    min-height: 590px;
    background: #444444;
    border-left: 24px solid #ff4b1f;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.25);
    padding: 45px 55px 48px;
    display: flex;
    align-items: center;
    gap: 45px;
    z-index: 5;
}

.certainteed-shingle-feature-text {
    width: 58%;
}

.certainteed-shingle-feature-text h3 {
    color: #00ff1e;
    font-size: 22px;
    font-weight: 550;
    letter-spacing: 1px;
    line-height: 1.15;
    margin: 0 0 25px;
    text-transform: uppercase;
}

.certainteed-shingle-feature-text p {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.3;
    margin: 0 0 16px;
}

.certainteed-shingle-feature-sample {
    width: 190px;
    flex-shrink: 0;
    margin-top: 90px;
}

.certainteed-shingle-feature-sample img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #ffffff;
}

.certainteed-shingle-feature-btn {
    display: inline-block;
    margin-top: 18px;
    background: #00ff1e;
    color: #000000;
    padding: 16px 26px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.3px;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.certainteed-shingle-feature-btn:hover,
.certainteed-shingle-feature-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}

/* RESPONSIVE */

@media (max-width: 1200px) {

    .certainteed-shingle-feature-section {
        flex-direction: column;
    }

    .certainteed-shingle-feature-left,
    .certainteed-shingle-feature-right {
        width: 100%;
        min-height: auto;
    }

    .certainteed-shingle-feature-right {
        min-height: 420px;
        background-attachment: scroll;
    }

    .certainteed-shingle-feature-card {
        width: 92%;
    }
}

@media (max-width: 768px) {

    .certainteed-shingle-feature-left {
        padding: 50px 22px;
    }

    .certainteed-shingle-feature-left h2 {
        font-size: 32px;
    }

    .certainteed-shingle-feature-card {
        width: 100%;
        padding: 38px 28px;
        border-left: 14px solid #ff4b1f;
        flex-direction: column;
        align-items: flex-start;
    }

    .certainteed-shingle-feature-text {
        width: 100%;
    }

    .certainteed-shingle-feature-sample {
        width: 190px;
        margin-top: 10px;
    }

    .certainteed-shingle-feature-btn {
        padding: 16px 28px;
        font-size: 13px;
        letter-spacing: 3px;
    }
}


/* ===================================
   CERTAINTEED INFO SPLIT SECTION
====================================== */

.certainteed-info-split-section {
    position: relative;
    width: 100%;
    min-height: 720px;
    display: flex;
    overflow: hidden;
}

.certainteed-info-split-left {
    width: 60%;
    min-height: 720px;
    background-image: url("../images/roofing-brands-certainteed-15.png");
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.certainteed-info-split-right {
    width: 40%;
    min-height: 820px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 0;
    background-image: url("../images/roofing-brands-certainteed-15.png");
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

.certainteed-info-card {
    width: 600px;
    background: #efefef;
    border-left: 22px solid #ff4b1f;
    padding: 45px 55px 45px;
    margin-left: -170px;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.22);
}

.certainteed-info-card h2 {
    color: #ff4b1f;
    font-size: 25px;
    font-weight: 550;
    line-height: 1.15;
    letter-spacing: 1px;
    margin: 0 0 28px;
    text-transform: uppercase;
}

.certainteed-info-card ul {
    margin: 0;
    padding-left: 28px;
}

.certainteed-info-card li {
    color: #333333;
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 16px;
}

.certainteed-info-card li strong {
    font-weight: 800;
}

.certainteed-info-card-btn {
    display: inline-block;
    margin-top: 18px;
    background: #00ff1e;
    color: #000000;
    padding: 16px 22px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2px;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.certainteed-info-card-btn:hover,
.certainteed-info-card-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}

/* RESPONSIVE */

@media (max-width: 1200px) {

    .certainteed-info-split-section {
        flex-direction: column;
    }

    .certainteed-info-split-left,
    .certainteed-info-split-right {
        width: 100%;
    }

    .certainteed-info-split-left {
        min-height: 500px;
        background-attachment: scroll;
    }

    .certainteed-info-split-right {
        min-height: auto;
        padding: 60px 22px;
        justify-content: center;
    }

    .certainteed-info-card {
        margin-left: 0;
        width: 100%;
        max-width: 700px;
    }
}

@media (max-width: 768px) {

    .certainteed-info-card {
        border-left: 12px solid #ff4b1f;
        padding: 35px 28px 40px;
    }

    .certainteed-info-card h2 {
        font-size: 27px;
    }

    .certainteed-info-card li {
        font-size: 16px;
    }

    .certainteed-info-card-btn {
        padding: 16px 26px;
        font-size: 13px;
        letter-spacing: 3px;
    }
}



/* ===================================
   CERTAINTEED CALL SECTION
====================================== */

.certainteed-call-section {
    position: relative;
    width: 100%;
    min-height: 740px;
    display: flex;
    overflow: hidden;
}

.certainteed-call-left {
    width: 40%;
    min-height: 740px;
    background-image: url("../images/roofing-brands-certainteed-16.png");
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0;
    z-index: 2;
}

.certainteed-call-right {
    width: 60%;
    min-height: 740px;
    background-image: url("../images/roofing-brands-certainteed-16.png");
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.certainteed-call-card {
    width: 600px;
    background: #efefef;
    border-left: 24px solid #ff4b1f;
    padding: 48px 55px 58px;
    margin-right: -180px;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.22);
    z-index: 5;
}

.certainteed-call-card h2 {
    color: #ff4b1f;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 1px;
    margin: 0 0 28px;
    text-transform: uppercase;
}

.certainteed-call-card p {
    color: #333333;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 18px;
}

.certainteed-call-btn {
    display: inline-block;
    margin-top: 16px;
    background: #00ff1e;
    color: #000000;
    padding: 16px 22px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2px;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.certainteed-call-btn:hover,
.certainteed-call-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}

/* RESPONSIVE */

@media (max-width: 1200px) {

    .certainteed-call-section {
        flex-direction: column;
    }

    .certainteed-call-left,
    .certainteed-call-right {
        width: 100%;
    }

    .certainteed-call-left {
        justify-content: center;
        padding: 60px 22px;
    }

    .certainteed-call-right {
        min-height: 450px;
        background-attachment: scroll;
    }

    .certainteed-call-card {
        width: 100%;
        max-width: 720px;
        margin-right: 0;
    }
}

@media (max-width: 768px) {

    .certainteed-call-card {
        border-left: 12px solid #ff4b1f;
        padding: 35px 28px 40px;
    }

    .certainteed-call-card h2 {
        font-size: 28px;
    }

    .certainteed-call-card p {
        font-size: 16px;
    }

    .certainteed-call-btn {
        padding: 16px 26px;
        font-size: 13px;
        letter-spacing: 3px;
    }
}


/* ===================================
   CERTAINTEED TEXT CTA SECTION
====================================== */

.certainteed-text-cta-section {
    width: 100%;
    padding: 55px 40px 55px;
    background-image: url("../images/champion-watermark.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    border-bottom: 6px solid #ff4b1f;
    overflow: hidden;
}

.certainteed-text-cta-content {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    text-align: center;
}

.certainteed-text-cta-content p {
    color: #333333;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 400;
    max-width: 1420px;
    margin: 0 auto 55px;
}

.certainteed-text-cta-content p strong {
    font-weight: 800;
}

.certainteed-text-cta-btn {
    display: inline-block;
    background: #00ff1e;
    color: #000000;
    padding: 18px 38px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2px;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.25s ease;
    margin-bottom: 120px;
}

.certainteed-text-cta-btn:hover,
.certainteed-text-cta-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}

/* RESPONSIVE */

@media (max-width: 768px) {

    .certainteed-text-cta-section {
        padding: 65px 22px 80px;
    }

    .certainteed-text-cta-content p {
        font-size: 17px;
        line-height: 1.45;
        margin-bottom: 40px;
    }

    .certainteed-text-cta-btn {
        padding: 16px 28px;
        font-size: 13px;
        letter-spacing: 3px;
    }
}



/* ===================================
   CERTAINTEED CONTACT FORM SECTION
====================================== */

.certainteed-contact-form-section {
    width: 100%;
    padding: 0 40px 50px;
    background-image: url("../images/mixed-black-background.png");
    background-size: auto;
    background-position: center;
    background-repeat: repeat;
    border-top: 2px solid #ff4b1f;
}

.certainteed-contact-form-box {
    max-width: 1100px;
    margin: -70px auto 0;
    background: #ffffff;
    padding: 50px 28px 50px;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.45);
    transform: translateY(-10px);
}

.certainteed-contact-form-box h2 {
    color: #ff4b1f;
    text-align: center;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 70px;
    padding-top: 65px;
    font-family: Arial, Helvetica, sans-serif;
}

.certainteed-contact-form {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
}

.certainteed-contact-form label {
    display: block;
    color: #333333;
    font-size: 17px;
    margin-bottom: 10px;
}

.certainteed-contact-form label span {
    color: #ff4b1f;
    font-style: italic;
    font-size: 14px;
}

.certainteed-contact-name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 28px;
}

.certainteed-contact-two-row {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 28px;
}

.certainteed-contact-email-box {
    width: 28%;
}

.certainteed-contact-phone-box {
    width: 28%;
    margin-left: 220px;
}

.certainteed-contact-form input[type="text"],
.certainteed-contact-form input[type="email"],
.certainteed-contact-form input[type="tel"] {
    width: 100%;
    height: 45px;
    border: 1px solid #eeeeee;
    padding: 0 15px;
    font-size: 16px;
}

.certainteed-contact-form input::placeholder {
    color: #d8d8d8;
}

.certainteed-contact-checks {
    margin: 12px 0 28px;
}

.certainteed-contact-checks label {
    margin-bottom: 7px;
    color: #6a6a6a;
    font-size: 16px;
}

.certainteed-contact-checks input {
    margin-right: 6px;
}

.certainteed-contact-form textarea {
    width: 100%;
    height: 260px;
    border: 1px solid #eeeeee;
    resize: vertical;
    padding: 15px;
    font-size: 16px;
    margin-bottom: 28px;
}

.certainteed-contact-form button {
    width: 100%;
    background: #ff4b1f;
    color: #ffffff;
    border: none;
    padding: 13px 20px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 4px;
    transition: 0.3s ease;
}

.certainteed-contact-form button:hover,
.certainteed-contact-form button:active {
    background: #00ff1e;
    color: #111111;
}

/* RESPONSIVE */

@media (max-width: 768px) {
    .certainteed-contact-form-section {
        padding: 0 20px 70px;
    }

    .certainteed-contact-form-box {
        margin-top: -40px;
        padding: 45px 22px;
    }

    .certainteed-contact-form-box h2 {
        font-size: 30px;
        margin-bottom: 45px;
    }

    .certainteed-contact-name-row,
    .certainteed-contact-two-row {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .certainteed-contact-email-box,
    .certainteed-contact-phone-box {
        width: 100%;
        margin-left: 0;
    }
}



/* ===================================
   PHOTO GALLERY HERO SECTION HTML PAGE
====================================== */

.photo-gallery-hero-section {
    position: relative;
    width: 100%;
    min-height: 700px;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 4px solid #00ff1e;
}

.photo-gallery-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 1;
}

.photo-gallery-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 40px;
}

.photo-gallery-hero-content h1 {
    color: #ffffff;
    font-size: 65px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 45px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.photo-gallery-hero-btn {
    display: inline-block;
    background: #ff4b1f;
    color: #ffffff;
    padding: 16px 22px;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 2px;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.3s ease;
    font-family: Arial, Helvetica, sans-serif;
}

.photo-gallery-hero-btn:hover,
.photo-gallery-hero-btn:active {
    background: #00ff1e;
    color: #111111;
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .photo-gallery-hero-content h1 {
        font-size: 56px;
    }
}

@media (max-width: 768px) {

    .photo-gallery-hero-section {
        min-height: 700px;
        padding: 0 20px;
    }

    .photo-gallery-hero-content h1 {
        font-size: 42px;
        margin-bottom: 35px;
    }

    .photo-gallery-hero-btn {
        padding: 16px 30px;
        font-size: 14px;
        letter-spacing: 3px;
    }
}



/* ===================================
   PHOTO GALLERY GRID SECTION
====================================== */

.photo-gallery-grid-section {
    width: 100%;
    padding: 70px 40px 80px;
    background: #ffffff;
}

.photo-gallery-grid-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 305px);
    justify-content: center;
    column-gap: 55px;
    row-gap: 32px;
}

.photo-gallery-item {
    text-align: center;
}

.photo-gallery-item img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    display: block;
    margin: 0 auto 12px;
}

.photo-gallery-item p {
    color: #777777;
    font-size: 13px;
    line-height: 1.3;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.photo-gallery-last-item {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 85px;
}

.photo-gallery-last-item img {
    width: 250px;
    height: 250px;
    margin-left: -330px;
    margin-top: -70px;
}

.photo-gallery-last-item p {
    font-size: 13px;
    line-height: 1.3;
    left: -340px;
    position: relative;
    
}

/* RESPONSIVE */

@media (max-width: 1200px) {
    .photo-gallery-grid-wrapper {
        grid-template-columns: repeat(2, 305px);
        column-gap: 80px;
    }
}

@media (max-width: 768px) {
    .photo-gallery-grid-section {
        padding: 50px 20px 70px;
    }

    .photo-gallery-grid-wrapper {
        grid-template-columns: 1fr;
        row-gap: 45px;
    }

    .photo-gallery-item img {
        width: 100%;
        max-width: 305px;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .photo-gallery-last-item {
        margin-top: 35px;
    }

    .photo-gallery-last-item img {
        width: 100%;
        max-width: 625px;
        height: auto;
    }

    .photo-gallery-last-item p {
        font-size: 24px;
    }
}



/* ===================================
   PAINTING DROPDOWN
====================================== */

.painting-dropdown {
    width: 175px;
    background: #5f5f5f;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0;
    display: none;
    z-index: 999;
}

.painting-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.painting-dropdown li {
    width: 100%;
}

.painting-dropdown a {
    display: block;
    padding: 14px 30px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    transition: 0.3s ease;
}

.painting-dropdown a:hover {
    background: #4d4d4d;
    color: #00ff1e;
}


/* ACTIVE SUBMENU */

.painting-dropdown a.active-submenu {
    color: #00ff1e;
}

/* SHOW DROPDOWN */

.has-dropdown:hover .painting-dropdown {
    display: block;
}




/* ===================================
   PAINTING AND SIDING HERO SECTION HTML PAGE
====================================== */

.painting-siding-hero-section {
    position: relative;
    width: 100%;
    min-height: 700px;
    background-image: url("../images/painting-and-siding-hero.png");
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 6px solid #00ff1e;
    overflow: hidden;
}

.painting-siding-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.10);
    z-index: 1;
}

.painting-siding-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 40px;
}

.painting-siding-hero-content h1 {
    color: #ffffff;
    font-size: 50px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 35px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.painting-siding-hero-btn {
    display: inline-block;
    background: #ff4b1f;
    color: #ffffff;
    padding: 16px 22px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.painting-siding-hero-btn:hover,
.painting-siding-hero-btn:active {
    background: #00ff1e;
    color: #111111;
}



/* ===================================
   PAINTING SIDING CONTENT SECTION
====================================== */

.painting-siding-content-section {
    width: 100%;
    background: #ffffff;
    padding: 65px 40px 60px;
    font-family: Arial, Helvetica, sans-serif;
}

.painting-siding-content-intro {
    text-align: center;
    max-width: 1600px;
    margin: 0 auto 70px;
}

.painting-siding-content-intro h2 {
    color: #333333;
    font-size: 50px;
    font-weight: 500;
    line-height: 1.1;
    margin: 0 0 45px;
    text-transform: uppercase;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.painting-siding-content-intro h3 {
    color: #333333;
    font-size: 36px;
    font-weight: 500;
    margin: 0 0 45px;
    text-transform: uppercase;
}

.painting-siding-icons-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 45px;
}

.painting-siding-icons-row img {
    width: 160px;
    height: auto;
    opacity: 0.95;
}

.painting-siding-main-row {
    max-width: 1700px;
    margin: 0 auto 75px;
    display: flex;
    align-items: flex-start;
    gap: 85px;
}

.painting-siding-main-image {
    width: 43%;
}

.painting-siding-main-image img {
    width: 100%;
    height: auto;
    display: block;
}

.painting-siding-main-text {
    width: 57%;
}

.painting-siding-main-text h2 {
    color: #333333;
    font-size: 50px;
    font-weight: 500;
    margin: 0 0 35px;
    padding-bottom: 35px;
    border-bottom: 1px solid #dddddd;
    text-transform: uppercase;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.painting-siding-main-text h3 {
    color: #333333;
    font-size: 26px;
    line-height: 1.45;
    font-weight: 550;
    margin: 0 0 20px;
    text-transform: uppercase;
}

.painting-siding-main-text p,
.painting-siding-long-text p,
.painting-siding-long-text li {
    color: #777777;
    font-size: 16px;
    line-height: 1.4;
}

.painting-siding-main-text p {
    margin: 0 0 18px;
}

.painting-siding-long-text {
    max-width: 1800px;
    margin: 0 auto;
    border-bottom: 1px solid #d4d4d4;
    padding-bottom: 55px;
}

.painting-siding-long-text h2 {
    color: #333333;
    font-size: 50px;
    font-weight: 500;
    margin: 0 0 28px;
    text-transform: uppercase;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.painting-siding-long-text h3 {
    color: #777777;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.3;
    margin: 32px 0 14px;
    text-transform: uppercase;
}

.painting-siding-long-text ul,
.painting-siding-long-text ol {
    margin: 0 0 25px 35px;
    padding-left: 25px;
}

.painting-siding-long-text p {
    margin: 0 0 18px;
}

.painting-siding-long-text strong {
    font-weight: 800;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
    .painting-siding-main-row {
        flex-direction: column;
    }

    .painting-siding-main-image,
    .painting-siding-main-text {
        width: 100%;
    }

    .painting-siding-icons-row {
        flex-wrap: wrap;
        gap: 35px;
    }
}

@media (max-width: 768px) {
    .painting-siding-content-section {
        padding: 55px 22px;
    }

    .painting-siding-content-intro h2,
    .painting-siding-main-text h2,
    .painting-siding-long-text h2 {
        font-size: 38px;
    }

    .painting-siding-content-intro h3,
    .painting-siding-main-text h3 {
        font-size: 26px;
    }

    .painting-siding-icons-row img {
        width: 120px;
    }

    .painting-siding-main-text p,
    .painting-siding-long-text p,
    .painting-siding-long-text li {
        font-size: 17px;
    }
}



/* ===================================
   PAINTING SIDING OPTIONS SECTION
====================================== */

.painting-siding-options-section {
    width: 100%;
    background: #ffffff;
    padding: 42px 50px 70px;
    font-family: Arial, Helvetica, sans-serif;
}

.painting-siding-options-header {
    width: 100%;
    max-width: 1760px;
    margin: 0 auto 90px;
}

.painting-siding-options-header h2 {
    color: #333333;
    font-size: 50px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: 1px;
    margin: 0 0 30px;
    text-transform: uppercase;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.painting-siding-options-header p {
    color: #777777;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    max-width: 1700px;
}

.painting-siding-options-content {
    width: 100%;
    max-width: 1580px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 90px;
}

.painting-siding-options-text {
    width: 48%;
    padding-left: 65px;
}

.painting-siding-options-text h3 {
    color: #333333;
    font-size: 26px;
    font-weight: 550;
    line-height: 1.2;
    margin: 0 0 22px;
    text-transform: uppercase;
}

.painting-siding-options-text h3:not(:first-child) {
    margin-top: 42px;
}

.painting-siding-options-text ul {
    margin: 0 0 20px 28px;
    padding-left: 18px;
}

.painting-siding-options-text li,
.painting-siding-options-text p {
    color: #777777;
    font-size: 16px;
    line-height: 1.4;
}

.painting-siding-options-text p {
    max-width: 620px;
    margin: 0;
}

.painting-siding-options-image {
    width: 42%;
    padding-top: 38px;
}

.painting-siding-options-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
    .painting-siding-options-content {
        flex-direction: column;
        gap: 50px;
    }

    .painting-siding-options-text,
    .painting-siding-options-image {
        width: 100%;
        padding-left: 0;
    }
}

@media (max-width: 768px) {
    .painting-siding-options-section {
        padding: 38px 22px 55px;
    }

    .painting-siding-options-header h2 {
        font-size: 38px;
    }

    .painting-siding-options-text h3 {
        font-size: 28px;
    }

    .painting-siding-options-header p,
    .painting-siding-options-text li,
    .painting-siding-options-text p {
        font-size: 16px;
    }
}



/* ===================================
   STUCCO HERO SECTION HTML PAGE
====================================== */

.stucco-hero-section {
    position: relative;
    width: 100%;
    min-height: 720px;
    background-image: url("../images/stucco-hero.png");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 4px solid #00ff1e;
    overflow: hidden;
}

.stucco-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.05);
    z-index: 1;
}

.stucco-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 70px;
    text-align: center;
}

.stucco-hero-content h1 {
    color: #ffffff;
    font-size: 80px;
    line-height: 1;
    letter-spacing: 2px;
    margin: 0 0 35px;
    text-transform: uppercase;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.stucco-hero-button {
    display: inline-block;
    background: #ff4b1f;
    color: #ffffff;
    text-decoration: none;
    padding: 16px 26px;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: 0.3s ease;
    font-family: Arial, Helvetica, sans-serif;
}

.stucco-hero-button:hover,
.stucco-hero-button:active {
    background: #00ff1e;
    color: #111111;
}

/* RESPONSIVE */

@media (max-width: 991px) {

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

    .stucco-hero-content h1 {
        font-size: 64px;
    }

    .stucco-hero-button {
        padding: 22px 40px;
        font-size: 16px;
    }
}

@media (max-width: 768px) {

    .stucco-hero-section,
    .stucco-hero-content {
        min-height: 620px;
    }

    .stucco-hero-content h1 {
        font-size: 50px;
    }

    .stucco-hero-button {
        width: 88%;
        max-width: 420px;
        padding: 20px 25px;
        font-size: 15px;
        letter-spacing: 2px;
    }
}




/* ===================================
   STUCCO CONTENT SECTION
====================================== */

.stucco-content-section {
    width: 100%;
    background: #ffffff;
    padding: 70px 40px 70px;
    font-family: Arial, Helvetica, sans-serif;
}

.stucco-content-intro {
    text-align: center;
    max-width: 1400px;
    margin: 0 auto 115px;
}

.stucco-content-intro h2 {
    color: #333333;
    font-size: 50px;
    font-weight: 500;
    line-height: 1.05;
    margin: 0 0 35px;
    text-transform: uppercase;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.stucco-content-intro h3 {
    color: #333333;
    font-size: 30px;
    font-weight: 600;
    margin: 0 0 35px;
    text-transform: uppercase;
}

.stucco-icons-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
}

.stucco-icons-row img {
    width: 175px;
    height: auto;
    opacity: 0.92;
}

.stucco-shop-title {
    max-width: 1400px;
    margin: 0 auto 75px;
    text-align: center;
    border-bottom: 1px solid #d5d5d5;
    padding-bottom: 70px;
}

.stucco-shop-title h2 {
    color: #333333;
    font-size: 30px;
    font-weight: 550;
    letter-spacing: 1.5px;
    margin: 0;
    text-transform: uppercase;
}

.stucco-main-row {
    max-width: 1250px;
    margin: 0 auto 90px;
    display: flex;
    align-items: flex-start;
    gap: 55px;
}

.stucco-main-image {
    width: 52%;
}

.stucco-main-image img {
    width: 90%;
    height: auto;
    display: block;
}

.stucco-main-text {
    width: 48%;
    margin-left: -80px;
}

.stucco-main-text h2,
.stucco-long-text h2 {
    color: #333333;
    font-size: 40px;
    font-weight: 100;
    line-height: 1.05;
    margin: 0 0 45px;
    text-transform: uppercase;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.stucco-main-text h3,
.stucco-long-text h3 {
    color: #333333;
    font-size: 22px;
    font-weight: 550;
    line-height: 1.4;
    margin: 0 0 22px;
    text-transform: uppercase;
}

.stucco-main-text p,
.stucco-long-text p {
    color: #777777;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 22px;
}

.stucco-main-text strong {
    font-weight: 800;
}

.stucco-long-text {
    max-width: 1250px;
    margin: 0 auto;
}

.stucco-long-text h2 {
    margin-top: 45px;
    margin-bottom: 25px;
}

.stucco-long-text h3 {
    font-size: 22px;
    line-height: 1.25;
}

.stucco-long-text hr {
    border: none;
    border-top: 1px solid #dddddd;
    margin: 30px 0 40px;
}

.stucco-financing-btn-wrap {
    text-align: center;
    margin-top: 70px;
}

.stucco-financing-btn {
    display: inline-block;
    background: #111111;
    color: #ffffff;
    padding: 16px 30px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.3s ease;
}

.stucco-financing-btn:hover,
.stucco-financing-btn:active {
    background: #555555;
    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 1100px) {

    .stucco-content-section {
        padding: 60px 28px 70px;
    }

    .stucco-content-intro h2 {
        font-size: 42px;
    }

    .stucco-icons-row {
        flex-wrap: wrap;
        gap: 28px;
    }

    .stucco-icons-row img {
        width: 140px;
    }

    .stucco-main-row {
        flex-direction: column;
        gap: 45px;
    }

    .stucco-main-image,
    .stucco-main-text {
        width: 100%;
    }

    .stucco-main-image img {
        width: 100%;
    }
}

@media (max-width: 768px) {

    .stucco-content-section {
        padding: 45px 20px 60px;
    }

    .stucco-content-intro {
        margin-bottom: 70px;
    }

    .stucco-content-intro h2,
    .stucco-main-text h2,
    .stucco-long-text h2 {
        font-size: 34px;
    }

    .stucco-content-intro h3,
    .stucco-main-text h3,
    .stucco-long-text h3 {
        font-size: 22px;
    }

    .stucco-icons-row img {
        width: 115px;
    }

    .stucco-shop-title {
        margin-bottom: 50px;
        padding-bottom: 45px;
    }

    .stucco-shop-title h2 {
        font-size: 24px;
    }

    .stucco-main-text p,
    .stucco-long-text p {
        font-size: 15px;
    }

    .stucco-financing-btn {
        width: 100%;
        max-width: 420px;
        padding: 15px 20px;
        font-size: 14px;
    }
}



/* ===================================
   WINDOWS AND DOORS HERO SECTION HTML PAGE
====================================== */

.windows-doors-hero-section {
    position: relative;
    width: 100%;
    min-height: 700px;
    background-image: url("../images/windows-and-doors-hero.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 4px solid #00ff1e;
}

.windows-doors-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.08);
    z-index: 1;
}

.windows-doors-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 70px;
}

.windows-doors-hero-content h1 {
    color: #ffffff;
    font-size: 55px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 35px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.windows-doors-hero-btn {
    display: inline-block;
    background: #ff4b1f;
    color: #ffffff;
    padding: 16px 30px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.windows-doors-hero-btn:hover,
.windows-doors-hero-btn:active {
    background: #00ff1e;
    color: #111111;
}


/* RESPONSIVE */

@media (max-width: 991px) {

    .windows-doors-hero-section {
        min-height: 700px;
        background-attachment: scroll;
    }

    .windows-doors-hero-content h1 {
        font-size: 50px;
    }

    .windows-doors-hero-btn {
        padding: 18px 36px;
        font-size: 15px;
        letter-spacing: 3px;
    }
}

@media (max-width: 768px) {

    .windows-doors-hero-section {
        min-height: 620px;
        padding: 0 20px;
    }

    .windows-doors-hero-content {
        margin-top: 40px;
    }

    .windows-doors-hero-content h1 {
        font-size: 40px;
        margin-bottom: 28px;
    }

    .windows-doors-hero-btn {
        width: 90%;
        max-width: 420px;
        padding: 17px 24px;
        font-size: 14px;
        letter-spacing: 2px;
    }
}


/* ===================================
   WINDOWS AND DOORS CONTENT SECTION
====================================== */

.windows-doors-content-section {
    width: 100%;
    background: #ffffff;
    padding: 75px 40px 90px;
    font-family: Arial, Helvetica, sans-serif;
}

.windows-doors-intro {
    max-width: 1300px;
    margin: 0 auto 95px;
    text-align: center;
    border-bottom: 1px solid #d5d5d5;
    padding-bottom: 95px;
}

.windows-doors-intro h2 {
    color: #333333;
    font-size: 50px;
    font-weight: 400;
    line-height: 1.05;
    margin: 0 0 45px;
    text-transform: uppercase;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.windows-doors-intro h3 {
    color: #333333;
    font-size: 30px;
    font-weight: 600;
    margin: 0 0 45px;
    text-transform: uppercase;
}

.windows-doors-icons-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.windows-doors-icons-row img {
    width: 165px;
    height: auto;
    opacity: 0.95;
}

.windows-doors-text-block,
.windows-doors-long-text,
.windows-doors-affiliates {
    max-width: 1200px;
    margin: 0 auto;
}

.windows-doors-text-block h2 {
    color: #333333;
    font-size: 50px;
    font-weight: 400;
    margin: 0 0 35px;
    text-transform: uppercase;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.windows-doors-text-block h3,
.windows-doors-benefits-text h3,
.windows-doors-long-text h3 {
    color: #333333;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 18px;
    text-transform: uppercase;
}

.windows-doors-text-block p,
.windows-doors-benefits-text p,
.windows-doors-long-text p,
.windows-doors-long-text li {
    color: #777777;
    font-size: 16px;
    line-height: 1.4;
}

.windows-doors-text-block p,
.windows-doors-benefits-text p,
.windows-doors-long-text p {
    margin: 0 0 20px;
}

.windows-doors-benefits-title {
    max-width: 1300px;
    margin: 70px auto 60px;
    text-align: center;
}

.windows-doors-benefits-title h2 {
    color: #333333;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

.windows-doors-benefits-row {
    max-width: 1300px;
    margin: 0 auto 75px;
    display: flex;
    align-items: flex-start;
    gap: 65px;
}

.windows-doors-benefits-image {
    width: 52%;
    margin-left: 50px;
}

.windows-doors-benefits-image img {
    width: 100%;
    display: block;
}

.windows-doors-benefits-text {
    width: 48%;
    padding-top: 25px;
}

.windows-doors-long-text ul {
    margin: 0 0 35px 40px;
    padding-left: 18px;
}

.windows-doors-financing-wrap {
    text-align: center;
    margin: 65px 0 85px;
    border-bottom: 1px solid #d5d5d5;
    padding-bottom: 55px;
}

.windows-doors-financing-btn {
    display: inline-block;
    background: #111111;
    color: #ffffff;
    padding: 16px 26px;
    font-size: 15px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.3s ease;
}

.windows-doors-financing-btn:hover,
.windows-doors-financing-btn:active {
    background: #555555;
}

.windows-doors-affiliates h2 {
    color: #333333;
    font-size: 40px;
    font-weight: 600;
    margin: 0 0 55px;
    text-transform: uppercase;
}

.windows-doors-affiliates-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 70px;
    row-gap: 45px;
    align-items: center;
}

.windows-doors-affiliates-grid img {
    width: 100%;
    max-width: 230px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* RESPONSIVE */

@media (max-width: 1100px) {

    .windows-doors-icons-row {
        flex-wrap: wrap;
        gap: 30px;
    }

    .windows-doors-icons-row img {
        width: 140px;
    }

    .windows-doors-benefits-row {
        flex-direction: column;
    }

    .windows-doors-benefits-image,
    .windows-doors-benefits-text {
        width: 100%;
    }

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

@media (max-width: 768px) {

    .windows-doors-content-section {
        padding: 55px 22px 70px;
    }

    .windows-doors-intro h2,
    .windows-doors-text-block h2 {
        font-size: 38px;
    }

    .windows-doors-intro h3 {
        font-size: 24px;
    }

    .windows-doors-icons-row img {
        width: 115px;
    }

    .windows-doors-text-block h3,
    .windows-doors-benefits-text h3,
    .windows-doors-long-text h3 {
        font-size: 23px;
    }

    .windows-doors-text-block p,
    .windows-doors-benefits-text p,
    .windows-doors-long-text p,
    .windows-doors-long-text li {
        font-size: 16px;
    }

    .windows-doors-benefits-title h2 {
        font-size: 26px;
    }

    .windows-doors-financing-btn {
        width: 100%;
        max-width: 420px;
        font-size: 13px;
        padding: 16px 20px;
    }

    .windows-doors-affiliates-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .windows-doors-affiliates h2 {
        font-size: 34px;
    }
}



/* ===================================
   GUTTERS DROPDOWN
====================================== */

.gutters-dropdown {
    width: 200px;
    background: #5f5f5f;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0;
    display: none;
    z-index: 999;
}

.gutters-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gutters-dropdown li {
    width: 100%;
}

.gutters-dropdown a {
    display: block;
    padding: 14px 20px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    transition: 0.3s ease;
}

.gutters-dropdown a:hover,
.gutters-dropdown a.active-submenu {
    background: #4d4d4d;
    color: #00ff1e;
}

.has-dropdown:hover .gutters-dropdown {
    display: block;
}




/* ===================================
   GUTTERS HERO SECTION
====================================== */

.gutters-hero-section {

    position: relative;

    width: 100%;

    min-height: 700px;

    background-image: url("../images/gutters-hero.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    border-bottom: 4px solid #00ff1e;

    overflow: hidden;
}



/* DARK OVERLAY */

.gutters-hero-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.12);

    z-index: 1;
}



/* CONTENT */

.gutters-hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

    min-height: 700px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 220px 20px 140px;
}



/* TITLE */

.gutters-hero-content h1 {

    color: #ffffff;

    font-size: 70px;

    font-weight: 500;

    line-height: 1;

    margin: 0 0 42px;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}



/* BUTTON */

.gutters-hero-button {

    display: inline-block;

    background: #ff5a1f;

    color: #ffffff;

    text-decoration: none;

    padding: 16px 22px;

    font-size: 17px;

    font-weight: 500;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    transition: 0.3s ease;
}



/* BUTTON HOVER */

.gutters-hero-button:hover,
.gutters-hero-button:active {

    background: #00ff1e;

    color: #ffffff;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .gutters-hero-section,
    .gutters-hero-content {

        min-height: 760px;
    }

    .gutters-hero-content h1 {

        font-size: 58px;
    }

    .gutters-hero-button {

        font-size: 17px;

        padding: 18px 40px;
    }
}



@media (max-width: 768px) {

    .gutters-hero-section {

        background-attachment: scroll;
    }

    .gutters-hero-section,
    .gutters-hero-content {

        min-height: 650px;
    }

    .gutters-hero-content {

        padding: 180px 20px 100px;
    }

    .gutters-hero-content h1 {

        font-size: 44px;

        margin-bottom: 28px;
    }

    .gutters-hero-button {

        width: 100%;

        max-width: 420px;

        font-size: 15px;

        padding: 16px 20px;
    }
}



/* ===================================
   GUTTERS CONTENT SECTION
====================================== */

.gutters-content-section {
    width: 100%;
    background: #ffffff;
    padding: 70px 40px 90px;
    font-family: Arial, Helvetica, sans-serif;
}

.gutters-content-intro {
    max-width: 1400px;
    margin: 0 auto 85px;
    text-align: center;
}

.gutters-content-intro h2 {
    color: #333333;
    font-size: 50px;
    font-weight: 500;
    line-height: 1.05;
    margin: 0 0 35px;
    text-transform: uppercase;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.gutters-content-intro h3 {
    color: #333333;
    font-size: 30px;
    font-weight: 600;
    margin: 0 0 32px;
    text-transform: uppercase;
}

.gutters-icons-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 42px;
}

.gutters-icons-row img {
    width: 175px;
    height: auto;
    opacity: 0.9;
}

.gutters-shop-title {
    max-width: 1250px;
    margin: 0 auto 70px;
    text-align: center;
    border-bottom: 1px solid #d5d5d5;
    padding-bottom: 65px;
}

.gutters-shop-title h2 {
    color: #333333;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
}

.gutters-main-row {
    max-width: 1250px;
    margin: 0 auto 75px;
    display: flex;
    align-items: flex-start;
    gap: 70px;
}

.gutters-main-text {
    width: 48%;
}

.gutters-main-image {
    width: 52%;
}

.gutters-main-image img {
    width: 100%;
    height: auto;
    display: block;
}

.gutters-main-text h2,
.gutters-repair-text h2,
.gutters-benefits-text h2,
.gutters-affiliates-section h2 {
    color: #333333;
    font-size: 40px;
    font-weight: 200;
    line-height: 1.15;
    margin: 0 0 30px;
    text-transform: uppercase;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.gutters-main-text h2 {
    margin-top: 45px;
}

.gutters-main-text p,
.gutters-repair-text p,
.gutters-benefits-text li {
    color: #777777;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 22px;
}

.gutters-repair-row {
    max-width: 1250px;
    margin: 0 auto 35px;
    display: flex;
    align-items: flex-start;
    gap: 90px;
}

.gutters-repair-text,
.gutters-benefits-text {
    width: 50%;
}

.gutters-benefits-text ul {
    margin: 0;
    padding-left: 35px;
}

.gutters-financing-wrap {
    max-width: 1250px;
    margin: 55px auto 90px;
    text-align: center;
    border-bottom: 1px solid #d5d5d5;
    padding-bottom: 80px;
}

.gutters-financing-btn {
    display: inline-block;
    background: #111111;
    color: #ffffff;
    padding: 16px 22px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.gutters-financing-btn:hover,
.gutters-financing-btn:active {
    background: #555555;
    color: #ffffff;
}

.gutters-affiliates-section {
    max-width: 1250px;
    margin: 0 auto;
}

.gutters-affiliates-section h2 {
    margin-bottom: 60px;
}

.gutters-affiliates-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 65px;
    row-gap: 35px;
    align-items: center;
}

.gutters-affiliates-grid img {
    width: 100%;
    max-width: 210px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* RESPONSIVE */

@media (max-width: 1100px) {

    .gutters-icons-row {
        flex-wrap: wrap;
        gap: 30px;
    }

    .gutters-icons-row img {
        width: 140px;
    }

    .gutters-main-row,
    .gutters-repair-row {
        flex-direction: column;
        gap: 45px;
    }

    .gutters-main-text,
    .gutters-main-image,
    .gutters-repair-text,
    .gutters-benefits-text {
        width: 100%;
    }

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

@media (max-width: 768px) {

    .gutters-content-section {
        padding: 55px 22px 70px;
    }

    .gutters-content-intro h2,
    .gutters-main-text h2,
    .gutters-repair-text h2,
    .gutters-benefits-text h2,
    .gutters-affiliates-section h2 {
        font-size: 36px;
    }

    .gutters-content-intro h3 {
        font-size: 24px;
    }

    .gutters-icons-row img {
        width: 115px;
    }

    .gutters-shop-title h2 {
        font-size: 28px;
    }

    .gutters-main-text p,
    .gutters-repair-text p,
    .gutters-benefits-text li {
        font-size: 16px;
    }

    .gutters-financing-btn {
        width: 100%;
        max-width: 420px;
        padding: 16px 20px;
        font-size: 13px;
        letter-spacing: 3px;
    }

    .gutters-affiliates-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}



/* ===================================
   GUTTER REPAIR HERO SECTION HTML PAGE
====================================== */

.gutter-repair-hero-section {
    position: relative;
    width: 100%;
    min-height: 680px;
    background-image: url("../images/gutter-repair-hero.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: hidden;
}

.gutter-repair-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.05);
    z-index: 1;
}

.gutter-repair-hero-content {
    position: relative;
    z-index: 2;
    min-height: 680px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 130px;
    text-align: center;
}

.gutter-repair-hero-content h1 {
    color: #ffffff;
    font-size: 50px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 1px;
    margin: 0 0 25px;
    text-transform: uppercase;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.gutter-repair-hero-content h2 {
    color: #ffffff;
    max-width: 1250px;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 1px;
    margin: 0 0 30px;
    text-transform: uppercase;
}

.gutter-repair-hero-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 55px;
}

.gutter-repair-hero-btn {
    display: inline-block;
    background: #ff4b1f;
    color: #ffffff;
    text-decoration: none;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.gutter-repair-hero-btn:hover,
.gutter-repair-hero-btn:active {
    background: #00ff1e;
    color: #111111;
}

.gutter-repair-service-bar {
    position: relative;
    z-index: 2;
    width: 100%;
    background: #00ff1e;
    color: #333333;
    text-align: center;
    padding: 38px 20px;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

/* RESPONSIVE */

@media (max-width: 991px) {
    .gutter-repair-hero-section {
        min-height: 760px;
        background-attachment: scroll;
    }

    .gutter-repair-hero-content {
        min-height: 660px;
        padding: 170px 22px 70px;
    }

    .gutter-repair-hero-content h1 {
        font-size: 46px;
    }

    .gutter-repair-hero-content h2 {
        font-size: 25px;
    }

    .gutter-repair-hero-buttons {
        flex-direction: column;
        gap: 22px;
    }

    .gutter-repair-service-bar {
        font-size: 23px;
    }
}

@media (max-width: 768px) {
    .gutter-repair-hero-content h1 {
        font-size: 38px;
    }

    .gutter-repair-hero-content h2 {
        font-size: 20px;
    }

    .gutter-repair-hero-btn {
        width: 100%;
        max-width: 420px;
        padding: 16px 22px;
        font-size: 14px;
        letter-spacing: 2px;
    }

    .gutter-repair-service-bar {
        font-size: 18px;
        padding: 28px 18px;
    }
}



/* ===================================
   GUTTER REPAIR WARNING SECTION
====================================== */

.gutter-repair-warning-section {
    width: 100%;
    background: #1f1f1f;
    padding: 45px 40px 45px;
}

.gutter-repair-warning-container {
    max-width: 1120px;
    margin: 0 auto;
}

.gutter-repair-warning-container h2 {
    color: #ff4b1f;
    font-size: 35px;
    line-height: 1.1;
    margin: 0 0 35px;
    text-transform: uppercase;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.gutter-repair-warning-container p {
    max-width: 1120px;
    color: #ffffff;
    font-size: 17px;
    line-height: 1.4;
    margin: 0 0 48px;
}

.gutter-repair-warning-buttons {
    display: flex;
    align-items: center;
    gap: 38px;
}

.gutter-repair-warning-call-btn,
.gutter-repair-warning-estimate-btn {
    display: inline-block;
    text-decoration: none;
    padding: 15px 25px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.gutter-repair-warning-call-btn {
    background: #00ff1e;
    color: #111111;
}

.gutter-repair-warning-call-btn:hover,
.gutter-repair-warning-call-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}

.gutter-repair-warning-estimate-btn {
    background: #ff4b1f;
    color: #ffffff;
}

.gutter-repair-warning-estimate-btn:hover,
.gutter-repair-warning-estimate-btn:active {
    background: #00ff1e;
    color: #111111;
}



/* ===================================
   GUTTER REPAIR SIGNS SECTION
====================================== */

.gutter-repair-signs-section {
    width: 100%;
    background: #ff4b1f;
    padding: 70px 40px;
}

.gutter-repair-signs-container {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 80px;
}

.gutter-repair-signs-image {
    width: 48%;
}

.gutter-repair-signs-image img {
    width: 100%;
    height: auto;
    display: block;
}

.gutter-repair-signs-text {
    width: 52%;
}

.gutter-repair-signs-text h2 {
    color: #ffffff;
    font-size: 35px;
    line-height: 1.08;
    margin: 0 0 35px;
    text-transform: uppercase;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.gutter-repair-signs-text p {
    color: #111111;
    font-size: 17px;
    line-height: 1.5;
    margin: 0 0 28px;
}

.gutter-repair-signs-text ul {
    padding-left: 35px;
    margin: 0;
}

.gutter-repair-signs-text li {
    color: #111111;
    font-size: 17px;
    line-height: 1.5;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .gutter-repair-warning-section,
    .gutter-repair-signs-section {
        padding-left: 25px;
        padding-right: 25px;
    }

    .gutter-repair-warning-container h2 {
        font-size: 42px;
    }

    .gutter-repair-warning-container p {
        font-size: 18px;
    }

    .gutter-repair-warning-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .gutter-repair-signs-container {
        flex-direction: column;
        gap: 55px;
    }

    .gutter-repair-signs-image,
    .gutter-repair-signs-text {
        width: 100%;
    }

    .gutter-repair-signs-text h2 {
        font-size: 44px;
    }

    .gutter-repair-signs-text p,
    .gutter-repair-signs-text li {
        font-size: 18px;
    }
}

@media (max-width: 768px) {

    .gutter-repair-warning-container h2 {
        font-size: 34px;
    }

    .gutter-repair-warning-container p {
        font-size: 16px;
        line-height: 1.7;
    }

    .gutter-repair-warning-call-btn,
    .gutter-repair-warning-estimate-btn {
        width: 100%;
        text-align: center;
        padding: 18px 20px;
        font-size: 14px;
        letter-spacing: 2px;
    }

    .gutter-repair-signs-section {
        padding-top: 85px;
        padding-bottom: 85px;
    }

    .gutter-repair-signs-text h2 {
        font-size: 34px;
    }

    .gutter-repair-signs-text p,
    .gutter-repair-signs-text li {
        font-size: 16px;
        line-height: 1.7;
    }
}



/* ===================================
   GUTTER REPAIR DIY SECTION
====================================== */

.gutter-repair-diy-section {
    width: 100%;
    padding: 70px 40px;
    background-image: url("../images/mixed-black-background.png");
    background-size: contain;
    background-position: center;
    background-repeat: repeat;
    background-attachment: fixed;
}

.gutter-repair-diy-box {
    max-width: 1120px;
    margin: 0 auto;
    background: #ffffff;
    padding: 70px 90px 75px;
    text-align: center;
}

.gutter-repair-diy-box h2 {
    color: #222222;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 1.4px;
    margin: 0 0 38px;
    text-transform: uppercase;
}

.gutter-repair-diy-box p {
    color: #222222;
    font-size: 16px;
    line-height: 1.3;
    margin: 0 auto 22px;
    max-width: 1120px;
}

/* ===================================
   GUTTER REPAIR PROFESSIONAL SECTION
====================================== */

.gutter-repair-professional-section {
    width: 100%;
    background: #ffffff;
    padding: 70px 40px 75px;
}

.gutter-repair-professional-box {
    max-width: 1120px;
    margin: 0 auto;
    border-left: 26px solid #ff4b1f;
    padding: 10px 0 25px 28px;
}

.gutter-repair-professional-box h2 {
    color: #222222;
    font-size: 33px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 1px;
    margin: 0 0 35px;
    text-transform: uppercase;
}

.gutter-repair-professional-box p {
    color: #222222;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 35px;
}

.gutter-repair-professional-btn {
    display: inline-block;
    background: #00ff1e;
    color: #111111;
    text-decoration: none;
    padding: 16px 26px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.gutter-repair-professional-btn:hover,
.gutter-repair-professional-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .gutter-repair-diy-box {
        padding: 65px 35px;
    }

    .gutter-repair-diy-box h2,
    .gutter-repair-professional-box h2 {
        font-size: 32px;
    }

    .gutter-repair-diy-box p,
    .gutter-repair-professional-box p {
        font-size: 17px;
    }
}

@media (max-width: 768px) {

    .gutter-repair-diy-section,
    .gutter-repair-professional-section {
        padding: 60px 20px;
    }

    .gutter-repair-diy-section {
        background-attachment: scroll;
    }

    .gutter-repair-professional-box {
        border-left: 14px solid #ff4b1f;
        padding-left: 22px;
    }

    .gutter-repair-professional-btn {
        width: 100%;
        text-align: center;
        padding: 17px 18px;
        font-size: 14px;
        letter-spacing: 2px;
    }
}



/* ===================================
   GUTTER REPAIR HIRE SECTION
====================================== */

.gutter-repair-hire-section {
    position: relative;
    width: 100%;
    min-height: 540px;
    display: flex;
    overflow: hidden;
}

.gutter-repair-hire-left {
    width: 57%;
    min-height: 540px;
    background-image: url("../images/gutter-repair-2.png");
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.gutter-repair-hire-right {
    width: 43%;
    min-height: 540px;
    background-image: url("../images/gutter-repair-2.png");
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.gutter-repair-hire-card {
    width: 600px;
    background: #ffffff;
    border-left: 24px solid #ff4b1f;
    padding: 48px 60px 58px;
    margin-left: -140px;
}

.gutter-repair-hire-card h2 {
    color: #2f2f2f;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 1.5px;
    margin: 0 0 32px;
    text-transform: uppercase;
}

.gutter-repair-hire-card p {
    color: #111111;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 35px;
}

.gutter-repair-hire-btn {
    display: inline-block;
    background: #00ff1e;
    color: #111111;
    text-decoration: none;
    padding: 16px 22px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.gutter-repair-hire-btn:hover,
.gutter-repair-hire-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}

/* RESPONSIVE */

@media (max-width: 1100px) {

    .gutter-repair-hire-section {
        flex-direction: column;
    }

    .gutter-repair-hire-left,
    .gutter-repair-hire-right {
        width: 100%;
    }

    .gutter-repair-hire-left {
        min-height: 500px;
        background-attachment: scroll;
    }

    .gutter-repair-hire-right {
        min-height: auto;
        padding: 60px 22px;
        justify-content: center;
    }

    .gutter-repair-hire-card {
        width: 100%;
        max-width: 720px;
        margin-left: 0;
    }
}

@media (max-width: 768px) {

    .gutter-repair-hire-card {
        border-left: 14px solid #ff4b1f;
        padding: 38px 28px 42px;
    }

    .gutter-repair-hire-card h2 {
        font-size: 28px;
        line-height: 1.35;
    }

    .gutter-repair-hire-card p {
        font-size: 16px;
    }

    .gutter-repair-hire-btn {
        width: 100%;
        text-align: center;
        padding: 16px 18px;
        font-size: 14px;
        letter-spacing: 2px;
    }
}



/* ===================================
   GUTTER INSTALLATION HERO SECTION HTML PAGE
====================================== */

.gutter-installation-hero-section {
    position: relative;
    width: 100%;
    min-height: 700px;
    background-image: url("../images/gutter-installation-hero.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: hidden;
}

.gutter-installation-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.08);
    z-index: 1;
}

.gutter-installation-hero-content {
    position: relative;
    z-index: 2;
    min-height: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 135px;
    text-align: center;
}

.gutter-installation-hero-content h1 {
    color: #ffffff;
    font-size: 50px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 1.4px;
    margin: 0 0 25px;
    text-transform: uppercase;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.gutter-installation-hero-content h2 {
    color: #ffffff;
    max-width: 1200px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.5px;
    margin: 0 0 30px;
    text-transform: uppercase;
}

.gutter-installation-hero-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 55px;
}

.gutter-installation-hero-btn {
    display: inline-block;
    background: #ff4b1f;
    color: #ffffff;
    text-decoration: none;
    padding: 16px 26px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.gutter-installation-hero-btn:hover,
.gutter-installation-hero-btn:active {
    background: #00ff1e;
    color: #111111;
}

.gutter-installation-service-bar {
    position: relative;
    z-index: 2;
    width: 100%;
    background: #00ff1e;
    color: #333333;
    text-align: center;
    padding: 38px 20px;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

/* RESPONSIVE */

@media (max-width: 991px) {
    .gutter-installation-hero-section {
        min-height: 760px;
        background-attachment: scroll;
    }

    .gutter-installation-hero-content {
        min-height: 660px;
        padding: 170px 22px 70px;
    }

    .gutter-installation-hero-content h1 {
        font-size: 46px;
    }

    .gutter-installation-hero-content h2 {
        font-size: 25px;
    }

    .gutter-installation-hero-buttons {
        flex-direction: column;
        gap: 22px;
    }

    .gutter-installation-service-bar {
        font-size: 23px;
    }
}

@media (max-width: 768px) {
    .gutter-installation-hero-content h1 {
        font-size: 38px;
    }

    .gutter-installation-hero-content h2 {
        font-size: 20px;
    }

    .gutter-installation-hero-btn {
        width: 100%;
        max-width: 420px;
        padding: 16px 22px;
        font-size: 14px;
        letter-spacing: 2px;
    }

    .gutter-installation-service-bar {
        font-size: 18px;
        padding: 28px 18px;
    }
}




/* ===================================
   GUTTER INSTALLATION DECISION SECTION
====================================== */

.gutter-installation-decision-section {
    width: 100%;
    background: #1f1f1f;
    padding: 58px 40px 55px;
}

.gutter-installation-decision-container {
    max-width: 1120px;
    margin: 0 auto;
}

.gutter-installation-decision-container h2 {
    color: #ff4b1f;
    font-size: 35px;
    line-height: 1.1;
    margin: 0 0 35px;
    text-transform: uppercase;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.gutter-installation-decision-container p {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 48px;
}

.gutter-installation-decision-buttons {
    display: flex;
    align-items: center;
    gap: 55px;
}

.gutter-installation-decision-call,
.gutter-installation-decision-estimate {
    display: inline-block;
    text-decoration: none;
    padding: 16px 28px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.gutter-installation-decision-call {
    background: #00ff1e;
    color: #111111;
}

.gutter-installation-decision-call:hover,
.gutter-installation-decision-call:active {
    background: #ff4b1f;
    color: #ffffff;
}

.gutter-installation-decision-estimate {
    background: #ff4b1f;
    color: #ffffff;
}

.gutter-installation-decision-estimate:hover,
.gutter-installation-decision-estimate:active {
    background: #00ff1e;
    color: #111111;
}


/* ===================================
   GUTTER INSTALLATION INFO SECTION
====================================== */

.gutter-installation-info-section {
    width: 100%;
    background: #ff4b1f;
    padding: 50px 40px 50px;
}

.gutter-installation-info-container {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 70px;
}

.gutter-installation-info-image {
    width: 48%;
}

.gutter-installation-info-image img {
    width: 100%;
    height: auto;
    display: block;
}

.gutter-installation-info-text {
    width: 52%;
}

.gutter-installation-info-text h2 {
    color: #ffffff;
    font-size: 35px;
    line-height: 1.25;
    margin: 0 0 35px;
    text-transform: uppercase;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.gutter-installation-info-text p {
    color: #111111;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 42px;
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .gutter-installation-decision-container h2,
    .gutter-installation-info-text h2 {
        font-size: 38px;
    }

    .gutter-installation-decision-container p,
    .gutter-installation-info-text p {
        font-size: 17px;
    }

    .gutter-installation-decision-buttons {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }

    .gutter-installation-info-container {
        flex-direction: column;
        gap: 50px;
    }

    .gutter-installation-info-image,
    .gutter-installation-info-text {
        width: 100%;
    }
}

@media (max-width: 768px) {

    .gutter-installation-decision-section,
    .gutter-installation-info-section {
        padding-left: 22px;
        padding-right: 22px;
    }

    .gutter-installation-decision-container h2,
    .gutter-installation-info-text h2 {
        font-size: 32px;
    }

    .gutter-installation-decision-call,
    .gutter-installation-decision-estimate {
        width: 100%;
        text-align: center;
        padding: 17px 18px;
        font-size: 14px;
        letter-spacing: 2px;
    }
}



/* ===================================
   GUTTER INSTALLATION VALUE SECTION
====================================== */

.gutter-installation-value-section {
    width: 100%;
    padding: 50px 40px;
    background-image: url("../images/mixed-black-background.png");
    background-size: contain;
    background-position: center;
    background-repeat: repeat;
    background-attachment: fixed;
}

.gutter-installation-value-box {
    max-width: 1120px;
    margin: 0 auto;
    background: #ffffff;
    padding: 55px 95px 55px;
    text-align: center;
}

.gutter-installation-value-box h2 {
    color: #222222;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 1.5px;
    margin: 0 0 35px;
    text-transform: uppercase;
}

.gutter-installation-value-box p {
    color: #222222;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 auto 22px;
    max-width: 1200px;
}

/* ===================================
   GUTTER INSTALLATION CTA SECTION
====================================== */

.gutter-installation-cta-section {
    width: 100%;
    background: #ffffff;
    padding: 50px 40px 55px;
}

.gutter-installation-cta-box {
    max-width: 1120px;
    margin: 0 auto;
    border-left: 26px solid #ff4b1f;
    padding: 10px 0 25px 28px;
}

.gutter-installation-cta-box h2 {
    color: #222222;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 1px;
    margin: 0 0 35px;
    text-transform: uppercase;
}

.gutter-installation-cta-box p {
    color: #222222;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 42px;
}

.gutter-installation-cta-btn {
    display: inline-block;
    background: #00ff1e;
    color: #111111;
    text-decoration: none;
    padding: 16px 26px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.gutter-installation-cta-btn:hover,
.gutter-installation-cta-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .gutter-installation-value-box {
        padding: 65px 35px;
    }

    .gutter-installation-value-box h2,
    .gutter-installation-cta-box h2 {
        font-size: 32px;
    }

    .gutter-installation-value-box p,
    .gutter-installation-cta-box p {
        font-size: 17px;
    }
}

@media (max-width: 768px) {

    .gutter-installation-value-section,
    .gutter-installation-cta-section {
        padding: 60px 20px;
    }

    .gutter-installation-value-section {
        background-attachment: scroll;
    }

    .gutter-installation-cta-box {
        border-left: 14px solid #ff4b1f;
        padding-left: 22px;
    }

    .gutter-installation-cta-btn {
        width: 100%;
        text-align: center;
        padding: 17px 18px;
        font-size: 14px;
        letter-spacing: 2px;
    }
}



/* ===================================
   GUTTER INSTALLATION HIRE SECTION
====================================== */

.gutter-installation-hire-section {
    position: relative;
    width: 100%;
    min-height: 700px;
    display: flex;
    overflow: hidden;
}

.gutter-installation-hire-left {
    width: 57%;
    min-height: 700px;
    background-image: url("../images/gutter-installation-4.png");
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.gutter-installation-hire-right {
    width: 43%;
    min-height: 700px;
    background-image: url("../images/gutter-installation-4.png");
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.gutter-installation-hire-card {
    width: 700px;
    background: #ffffff;
    border-left: 24px solid #ff4b1f;
    padding: 48px 60px 58px;
    margin-left: -140px;
}

.gutter-installation-hire-card h2 {
    color: #2f2f2f;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.48;
    letter-spacing: 1.4px;
    margin: 0 0 32px;
    text-transform: uppercase;
}

.gutter-installation-hire-card p {
    color: #111111;
    font-size: 16px;
    line-height: 1.45;
    margin: 0 0 35px;
}

.gutter-installation-hire-btn {
    display: inline-block;
    background: #00ff1e;
    color: #111111;
    text-decoration: none;
    padding: 16px 26px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.gutter-installation-hire-btn:hover,
.gutter-installation-hire-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}

/* RESPONSIVE */

@media (max-width: 1100px) {

    .gutter-installation-hire-section {
        flex-direction: column;
    }

    .gutter-installation-hire-left,
    .gutter-installation-hire-right {
        width: 100%;
    }

    .gutter-installation-hire-left {
        min-height: 500px;
        background-attachment: scroll;
    }

    .gutter-installation-hire-right {
        min-height: auto;
        padding: 60px 22px;
        justify-content: center;
    }

    .gutter-installation-hire-card {
        width: 100%;
        max-width: 720px;
        margin-left: 0;
    }
}

@media (max-width: 768px) {

    .gutter-installation-hire-card {
        border-left: 14px solid #ff4b1f;
        padding: 38px 28px 42px;
    }

    .gutter-installation-hire-card h2 {
        font-size: 28px;
        line-height: 1.35;
    }

    .gutter-installation-hire-card p {
        font-size: 16px;
    }

    .gutter-installation-hire-btn {
        width: 100%;
        text-align: center;
        padding: 16px 18px;
        font-size: 14px;
        letter-spacing: 2px;
    }
}



/* ===================================
   WHY US DROPDOWN
====================================== */

.why-us-dropdown {
    width: 210px;
    background: #5f5f5f;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0;
    display: none;
    z-index: 999;
}

.why-us-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.why-us-dropdown li {
    width: 100%;
}

.why-us-dropdown a {
    display: block;
    padding: 20px 30px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    line-height: 1;
    transition: 0.3s ease;
}

.why-us-dropdown a:hover,
.why-us-dropdown a.active-submenu {
    background: #4d4d4d;
    color: #00ff1e;
}

.has-dropdown:hover .why-us-dropdown {
    display: block;
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .why-us-dropdown {
        position: static;
        width: 100%;
        display: none;
    }

    .has-dropdown:hover .why-us-dropdown {
        display: block;
    }

    .why-us-dropdown a {
        padding: 14px 22px;
        font-size: 14px;
        letter-spacing: 1px;
    }
}




/* ===================================
   WHY US ABOUT HERO SECTION HTML PAGE
====================================== */

.why-us-about-hero-section {

    position: relative;

    width: 100%;

    min-height: 680px;

    background-image: url("../images/why-us-about-hero.png");

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-bottom: 6px solid #00ff1e;
}



/* DARK OVERLAY */

.why-us-about-hero-overlay {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.22);

    z-index: 1;
}



/* CONTENT */

.why-us-about-hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1200px;

    padding: 240px 30px 160px;

    text-align: center;
}



/* TITLE */

.why-us-about-hero-content h1 {

    color: #ffffff;

    font-size: 40px;

    font-weight: 600;

    line-height: 1;

    text-transform: uppercase;

    margin-bottom: 55px;

    letter-spacing: 1px;
}



/* BUTTON */

.why-us-about-hero-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 380px;

    height: 46px;

    background: #ff4b1f;

    color: #ffffff;

    font-size: 16px;

    font-weight: 600;

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    transition: 0.3s ease;
}



/* HOVER + ACTIVE */

.why-us-about-hero-button:hover,
.why-us-about-hero-button:active {

    background: #00ff1e;

    color: #111111;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .why-us-about-hero-section {

        min-height: 700px;

        background-attachment: scroll;
    }

    .why-us-about-hero-content {

        padding: 210px 25px 130px;
    }

    .why-us-about-hero-content h1 {

        font-size: 58px;

        margin-bottom: 45px;
    }

    .why-us-about-hero-button {

        width: 340px;

        height: 66px;

        font-size: 18px;
    }
}



@media (max-width: 767px) {

    .why-us-about-hero-section {

        min-height: 620px;
    }

    .why-us-about-hero-content {

        padding: 190px 20px 110px;
    }

    .why-us-about-hero-content h1 {

        font-size: 42px;

        line-height: 1.1;
    }

    .why-us-about-hero-button {

        width: 100%;

        max-width: 320px;

        height: 62px;

        font-size: 16px;

        letter-spacing: 2px;
    }
}



/* ===================================
   WHY US ABOUT CONTENT SECTION
====================================== */

.why-us-about-content-section {
    width: 100%;
    background: #ffffff;
    padding: 55px 40px 50px;
    font-family: Arial, Helvetica, sans-serif;
}

.why-us-about-content-wrap {
    max-width: 1150px;
    margin: 0 auto;
}

.why-us-about-content-wrap h2 {
    color: #333333;
    text-align: center;
    font-size: 50px;
    font-weight: 200;
    line-height: 1.05;
    margin: 0 0 40px;
    text-transform: uppercase;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.why-us-about-content-wrap h3 {
    color: #333333;
    text-align: center;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 90px;
    text-transform: uppercase;
}

.why-us-about-text-box {
    max-width: 1150px;
    margin: 0 auto;
}

.why-us-about-text-box p {
    color: #777777;
    font-size: 17px;
    line-height: 1.4;
    margin: 0 0 28px;
}

.why-us-about-text-box strong {
    color: #777777;
    font-weight: 700;
}

.why-us-about-text-box ul {
    margin: 0 0 25px 25px;
    padding: 0;
}

.why-us-about-text-box li {
    color: #777777;
    font-size: 17px;
    line-height: 1.4;
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .why-us-about-content-wrap h2 {
        font-size: 50px;
    }

    .why-us-about-content-wrap h3 {
        font-size: 28px;
        margin-bottom: 80px;
    }

    .why-us-about-text-box p,
    .why-us-about-text-box li {
        font-size: 17px;
    }
}

@media (max-width: 768px) {

    .why-us-about-content-section {
        padding: 55px 22px 70px;
    }

    .why-us-about-content-wrap h2 {
        font-size: 38px;
    }

    .why-us-about-content-wrap h3 {
        font-size: 22px;
        margin-bottom: 55px;
    }

    .why-us-about-text-box p,
    .why-us-about-text-box li {
        font-size: 16px;
    }
}



/* ===================================
   WHY US COMMUNITY HERO SECTION HTML PAGE
====================================== */

.why-us-community-hero-section {

    position: relative;

    width: 100%;

    min-height: 680px;

    background-image: url("../images/why-us-community-hero.png");

    background-size: auto;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-bottom: 6px solid #00ff1e;
}



/* OVERLAY */

.why-us-community-hero-overlay {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.18);

    z-index: 1;
}



/* CONTENT */

.why-us-community-hero-content {

    position: relative;

    z-index: 2;

    text-align: center;

    margin-top: 60px;
}



/* TITLE */

.why-us-community-hero-content h1 {

    color: #ffffff;

    font-size: 50px;

    font-weight: 700;

    text-transform: uppercase;

    line-height: 1;

    margin-bottom: 35px;

    letter-spacing: 1px;
}



/* BUTTON */

.why-us-community-hero-button {

    display: inline-block;

    background: #ff4b1f;

    color: #ffffff;

    text-decoration: none;

    text-transform: uppercase;

    font-size: 16px;

    font-weight: 500;

    letter-spacing: 1.5px;

    padding: 13px 26px;

    transition: 0.3s ease;
}

.why-us-community-hero-button:hover,
.why-us-community-hero-button:focus {

    background: #00ff1e;

    color: #000000;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .why-us-community-hero-section {

        min-height: 700px;

        background-attachment: scroll;
    }

    .why-us-community-hero-content h1 {

        font-size: 52px;
    }
}

@media (max-width: 767px) {

    .why-us-community-hero-section {

        min-height: 600px;
    }

    .why-us-community-hero-content h1 {

        font-size: 40px;
    }

    .why-us-community-hero-button {

        width: 90%;

        max-width: 380px;

        padding: 18px 20px;

        font-size: 15px;
    }
}



/* ===================================
   WHY US COMMUNITY CONTENT SECTION
====================================== */

.why-us-community-content-section {
    width: 100%;
    background: #ffffff;
    padding: 48px 40px 85px;
    font-family: Arial, Helvetica, sans-serif;
}

.why-us-community-content-wrap {
    max-width: 1150px;
    margin: 0 auto;
}

.why-us-community-intro-text {
    color: #777777;
    font-size: 17px;
    line-height: 1.4;
    margin: 0 0 50px;
}

.why-us-community-divider {
    width: 100%;
    height: 1px;
    background: #d6d6d6;
    margin-bottom: 75px;
}

.why-us-community-content-wrap h2 {
    color: #333333;
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 75px;
    text-transform: uppercase;
}

.why-us-community-charity-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: center;
    justify-items: center;
    column-gap: 5px;
    row-gap: 5px;
}

.why-us-community-charity-grid img {
    max-width: 100%;
    width: 100px;
    height: auto;
    display: block;
    object-fit: contain;
}

/* make a few wide logos closer to the screenshot */
.why-us-community-charity-grid img:nth-child(7),
.why-us-community-charity-grid img:nth-child(11),
.why-us-community-charity-grid img:nth-child(12),
.why-us-community-charity-grid img:nth-child(14) {
    width: 260px;
}

.why-us-community-charity-grid img:nth-child(4),
.why-us-community-charity-grid img:nth-child(15),
.why-us-community-charity-grid img:nth-child(17) {
    width: 210px;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
    .why-us-community-charity-grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 45px;
    }
}

@media (max-width: 768px) {
    .why-us-community-content-section {
        padding: 40px 22px 65px;
    }

    .why-us-community-intro-text {
        font-size: 16px;
        margin-bottom: 45px;
    }

    .why-us-community-divider {
        margin-bottom: 55px;
    }

    .why-us-community-content-wrap h2 {
        font-size: 38px;
        margin-bottom: 50px;
    }

    .why-us-community-charity-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 25px;
        row-gap: 35px;
    }

    .why-us-community-charity-grid img,
    .why-us-community-charity-grid img:nth-child(7),
    .why-us-community-charity-grid img:nth-child(11),
    .why-us-community-charity-grid img:nth-child(12),
    .why-us-community-charity-grid img:nth-child(14),
    .why-us-community-charity-grid img:nth-child(4),
    .why-us-community-charity-grid img:nth-child(15),
    .why-us-community-charity-grid img:nth-child(17) {
        width: 150px;
    }
}



/* ===================================
   WHY US TESTIMONIALS HERO SECTION HTML PAGE
====================================== */

.why-us-testimonials-hero-section {

    position: relative;

    width: 100%;

    min-height: 795px;

    background-image: url("../images/why-us-testimonials-hero.png");

    background-size: auto;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    border-bottom: 6px solid #00ff1e;
}



/* OVERLAY */

.why-us-testimonials-hero-overlay {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.12);

    z-index: 1;
}



/* CONTENT */

.why-us-testimonials-hero-content {

    position: relative;

    z-index: 2;

    text-align: center;

    margin-top: 70px;
}



/* TITLE */

.why-us-testimonials-hero-content h1 {

    color: #ffffff;

    font-size: 50px;

    font-weight: 700;

    text-transform: uppercase;

    line-height: 1;

    letter-spacing: 1px;

    margin-bottom: 40px;
}



/* BUTTON */

.why-us-testimonials-hero-button {

    display: inline-block;

    background: #ff4b1f;

    color: #ffffff;

    text-decoration: none;

    text-transform: uppercase;

    font-size: 16px;

    font-weight: 600;

    letter-spacing: 1.4px;

    padding: 16px 26px;

    transition: all 0.3s ease;
}

.why-us-testimonials-hero-button:hover,
.why-us-testimonials-hero-button:focus,
.why-us-testimonials-hero-button:active {

    background: #00ff1e;

    color: #000000;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .why-us-testimonials-hero-section {

        min-height: 700px;

        background-attachment: scroll;
    }

    .why-us-testimonials-hero-content h1 {

        font-size: 56px;
    }
}

@media (max-width: 767px) {

    .why-us-testimonials-hero-section {

        min-height: 600px;
    }

    .why-us-testimonials-hero-content h1 {

        font-size: 40px;
    }

    .why-us-testimonials-hero-button {

        width: 90%;

        max-width: 380px;

        font-size: 15px;

        padding: 18px 20px;
    }
}



/* ===================================
   WHY US TESTIMONIALS CONTENT SECTION
====================================== */

.why-us-testimonials-content-section {
    width: 100%;
    background: #ffffff;
    padding: 80px 40px 115px;
    font-family: Arial, Helvetica, sans-serif;
}

.why-us-testimonials-content-wrap {
    max-width: 1150px;
    margin: 0 auto;
    text-align: center;
}

.why-us-testimonials-content-wrap h2 {
    color: #333333;
    font-size: 45px;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 80px;
    text-transform: uppercase;
    text-align: left;
}

.why-us-testimonials-content-wrap p {
    color: #777777;
    font-size: 17px;
    line-height: 1.4;
    margin: 0 auto 38px;
    max-width: 1160px;
}

.why-us-testimonials-content-wrap h3 {
    color: #333333;
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .why-us-testimonials-content-section {
        padding: 100px 30px;
    }

    .why-us-testimonials-content-wrap h2 {
        font-size: 42px;
        margin-bottom: 55px;
    }

    .why-us-testimonials-content-wrap p {
        font-size: 18px;
    }

    .why-us-testimonials-content-wrap h3 {
        font-size: 34px;
    }
}

@media (max-width: 768px) {

    .why-us-testimonials-content-section {
        padding: 75px 22px;
    }

    .why-us-testimonials-content-wrap h2 {
        font-size: 36px;
        text-align: center;
    }

    .why-us-testimonials-content-wrap p {
        font-size: 16px;
    }

    .why-us-testimonials-content-wrap h3 {
        font-size: 28px;
    }
}




/* ===============================================
   WHY US AFFILIATIONS REWARDS HERO SECTION HTML PAGE
================================================== */

.why-us-affiliations-rewards-hero-section {
    position: relative;
    width: 100%;
    min-height: 720px;
    background-image: url("../images/why-us-about-hero.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 10px solid #00ff1e;
}

.why-us-affiliations-rewards-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    z-index: 1;
}

.why-us-affiliations-rewards-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 70px;
}

.why-us-affiliations-rewards-hero-content h1 {
    color: #ffffff;
    font-size: 40px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 1px;
    margin-bottom: 40px;
}

.why-us-affiliations-rewards-hero-button {
    display: inline-block;
    background: #ff4b1f;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.4px;
    padding: 16px 26px;
    transition: 0.3s ease;
}

.why-us-affiliations-rewards-hero-button:hover,
.why-us-affiliations-rewards-hero-button:active {
    background: #00ff1e;
    color: #000000;
}



/* ===================================
   WHY US AFFILIATIONS ASSOCIATIONS SECTION
====================================== */

.why-us-affiliations-associations-section {
    width: 100%;
    background: #ffffff;
    padding: 55px 40px 90px;
    font-family: Arial, Helvetica, sans-serif;
}

.why-us-affiliations-associations-wrap {
    max-width: 1150px;
    margin: 0 auto;
}

.why-us-affiliations-associations-wrap h2 {
    color: #333333;
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 55px;
    text-transform: uppercase;
}

.why-us-affiliations-associations-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    justify-items: center;
    column-gap: 5px;
    row-gap: 5px;
}

.why-us-affiliations-associations-grid img {
    width: 180px;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.why-us-affiliations-associations-grid img:nth-child(3) {
    width: 280px;
}

.why-us-affiliations-associations-grid img:nth-child(6) {
    width: 300px;
}

.why-us-affiliations-associations-grid img:nth-child(7) {
    width: 260px;
}

/* RESPONSIVE */

@media (max-width: 991px) {
    .why-us-affiliations-associations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .why-us-affiliations-associations-section {
        padding: 45px 22px 70px;
    }

    .why-us-affiliations-associations-wrap h2 {
        font-size: 38px;
        margin-bottom: 45px;
    }

    .why-us-affiliations-associations-grid {
        column-gap: 25px;
        row-gap: 40px;
    }

    .why-us-affiliations-associations-grid img,
    .why-us-affiliations-associations-grid img:nth-child(3),
    .why-us-affiliations-associations-grid img:nth-child(6),
    .why-us-affiliations-associations-grid img:nth-child(7) {
        width: 150px;
    }
}



/* =========================================
   WHY US BEFORE AFTER HERO SECTION HTML PAGE
=========================================== */

.why-us-before-after-hero-section {
    position: relative;
    width: 100%;
    min-height: 720px;
    background-image: url("../images/why-us-before and after-hero.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 6px solid #00ff1e;
}

.why-us-before-after-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.05);
    z-index: 1;
}

.why-us-before-after-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 70px;
}

.why-us-before-after-hero-content h1 {
    color: #ffffff;
    font-size: 50px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
    margin-bottom: 42px;
}

.why-us-before-after-hero-button {
    display: inline-block;
    background: #ff4b1f;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.5px;
    padding: 16px 26px;
    transition: all 0.3s ease;
}

.why-us-before-after-hero-button:hover,
.why-us-before-after-hero-button:active {
    background: #00ff1e;
    color: #000000;
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .why-us-before-after-hero-content h1 {
        font-size: 56px;
    }

    .why-us-before-after-hero-button {
        padding: 20px 40px;
    }
}

@media (max-width: 768px) {

    .why-us-before-after-hero-section {
        min-height: 650px;
        background-attachment: scroll;
    }

    .why-us-before-after-hero-content h1 {
        font-size: 42px;
    }

    .why-us-before-after-hero-button {
        font-size: 15px;
        padding: 18px 28px;
    }
}




/* ===================================
   WHY US BEFORE AFTER GALLERY SECTION
====================================== */

.why-us-before-after-gallery-section {
    width: 100%;
    background: #ffffff;
    padding: 70px 40px 55px;
    font-family: Arial, Helvetica, sans-serif;
}

.why-us-before-after-gallery-wrap {
    max-width: 1150px;
    margin: 0 auto;
}

.why-us-before-after-gallery-wrap h2 {
    color: #333333;
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.why-us-before-after-gallery-wrap h3 {
    color: #777777;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 32px;
    text-transform: uppercase;
}

.why-us-before-after-gallery-line,
.why-us-before-after-gallery-bottom-line {
    width: 100%;
    height: 1px;
    background: #e2e2e2;
}

.why-us-before-after-gallery-line {
    margin-bottom: 35px;
}

.why-us-before-after-gallery-wrap h4 {
    color: #333333;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 28px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.why-us-before-after-gallery-images {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    margin-bottom: 38px;
}

.why-us-before-after-gallery-images img {
    width: 310px;
    height: 300px;
    object-fit: cover;
    display: block;
}

.why-us-before-after-gallery-wrap p {
    color: #777777;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 28px;
    max-width: 1160px;
}

.why-us-before-after-gallery-bottom-line {
    margin-top: 22px;
}

/* RESPONSIVE */

@media (max-width: 768px) {

    .why-us-before-after-gallery-section {
        padding: 55px 22px 45px;
    }

    .why-us-before-after-gallery-wrap h2 {
        font-size: 34px;
    }

    .why-us-before-after-gallery-wrap h4 {
        font-size: 25px;
    }

    .why-us-before-after-gallery-images {
        flex-direction: column;
        gap: 22px;
    }

    .why-us-before-after-gallery-images img {
        width: 100%;
        height: auto;
    }

    .why-us-before-after-gallery-wrap p {
        font-size: 16px;
    }
}




/* ===================================
   WHY US BEFORE AFTER MORE PROJECTS
====================================== */

.why-us-before-after-more-projects-section {
    width: 100%;
    background: #ffffff;
    padding: 0 40px 70px;
    font-family: Arial, Helvetica, sans-serif;
}

.why-us-before-after-more-projects-wrap {
    max-width: 1150px;
    margin: 0 auto;
}

.why-us-before-after-project-item {
    border-bottom: 1px solid #e1e1e1;
    padding: 0 0 32px;
    margin-bottom: 38px;
}

.why-us-before-after-project-item h2 {
    color: #333333;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 28px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.why-us-before-after-project-images {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    margin-bottom: 38px;
}

.why-us-before-after-project-images img {
    width: 310px;
    height: 300px;
    object-fit: cover;
    display: block;
}

.why-us-before-after-project-item p {
    color: #777777;
    font-size: 16px;
    line-height: 1.45;
    margin: 0 0 18px;
    max-width: 1160px;
}

/* RESPONSIVE */

@media (max-width: 768px) {

    .why-us-before-after-more-projects-section {
        padding: 25px 22px 55px;
    }

    .why-us-before-after-project-item h2 {
        font-size: 28px;
    }

    .why-us-before-after-project-images {
        flex-direction: column;
        gap: 22px;
    }

    .why-us-before-after-project-images img {
        width: 100%;
        height: auto;
    }

    .why-us-before-after-project-item p {
        font-size: 16px;
    }
}



/* ===================================
   WHY US BEFORE AFTER EXTRA PROJECTS
====================================== */

.why-us-before-after-extra-projects-section {
    width: 100%;
    background: #ffffff;
    padding: 0 40px 80px;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: -70px;

}

.why-us-before-after-extra-projects-wrap {
    max-width: 1150px;
    margin: 0 auto;
}

.why-us-before-after-extra-item {
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 36px;
    margin-bottom: 22px;
}

.why-us-before-after-extra-item h2 {
    color: #333333;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 28px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.why-us-before-after-extra-images {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    margin-bottom: 36px;
}

.why-us-before-after-extra-images img {
    width: 310px;
    height: 300px;
    object-fit: cover;
    display: block;
}

.why-us-before-after-extra-item p {
    color: #777777;
    font-size: 16px;
    line-height: 1.45;
    margin: 0 0 18px;
    max-width: 1280px;
}

/* RESPONSIVE */

@media (max-width: 768px) {
    .why-us-before-after-extra-projects-section {
        padding: 20px 22px 60px;
    }

    .why-us-before-after-extra-item h2 {
        font-size: 28px;
    }

    .why-us-before-after-extra-images {
        flex-direction: column;
        gap: 22px;
    }

    .why-us-before-after-extra-images img {
        width: 100%;
        height: auto;
    }

    .why-us-before-after-extra-item p {
        font-size: 16px;
    }
}



/* ===================================
   AREAS WE SERVE DROPDOWN
====================================== */

.areas-dropdown {
    width: 255px;
    background: #5f5f5f;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0;
    display: none;
    z-index: 999;
}

.areas-dropdown a {
    display: block;
    padding: 18px 30px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    line-height: 1;
    transition: 0.3s ease;
}

.areas-dropdown a:hover,
.areas-dropdown a:active,
.areas-dropdown a.active-submenu {
    background: #4d4d4d;
    color: #00ff1e;
}

.has-dropdown:hover .areas-dropdown {
    display: block;
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .areas-dropdown {
        position: static;
        width: 100%;
        display: none;
    }

    .has-dropdown:hover .areas-dropdown {
        display: block;
    }

    .areas-dropdown a {
        padding: 16px 25px;
        font-size: 14px;
        letter-spacing: 1.5px;
    }
}

@media (max-width: 767px) {

    .areas-dropdown a {
        font-size: 13px;
        padding: 14px 22px;
    }
}



/* ===================================
   AURORA LOCATION HERO SECTION HTML PAGE
====================================== */

.aurora-location-hero-section {
    width: 100%;
    height: 520px;
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.42),
        rgba(0, 0, 0, 0.42)
    ), url("../images/aurora-hero.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aurora-location-hero-content {
    text-align: center;
    margin-top: 70px;
}

.aurora-location-hero-content h1 {
    color: #ffffff;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.aurora-location-hero-btn {
    display: inline-block;
    background: #ff4b1f;
    color: #ffffff;
    text-decoration: none;
    padding: 13px 26px;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.aurora-location-hero-btn:hover,
.aurora-location-hero-btn:active {
    background: #00d92f;
    color: #ffffff;
}


/* ===================================
   AURORA LOCATION BADGES SECTION
====================================== */

.aurora-location-badges-section {
    width: 100%;
    background: #202020;
    padding: 45px 30px 45px;
}

.aurora-location-badges-wrap {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
}

.aurora-location-badges-wrap img {
    width: 135px;
    height: auto;
    display: block;
    opacity: 0.95;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .aurora-location-hero-section {
        height: 460px;
        background-attachment: scroll;
    }

    .aurora-location-hero-content h1 {
        font-size: 42px;
    }

    .aurora-location-hero-btn {
        padding: 15px 30px;
        font-size: 14px;
        letter-spacing: 3px;
    }

    .aurora-location-badges-wrap {
        flex-wrap: wrap;
        gap: 35px;
    }

    .aurora-location-badges-wrap img {
        width: 115px;
    }
}

@media (max-width: 575px) {
    .aurora-location-hero-section {
        height: 390px;
    }

    .aurora-location-hero-content {
        margin-top: 30px;
        padding: 0 20px;
    }

    .aurora-location-hero-content h1 {
        font-size: 34px;
    }

    .aurora-location-badges-section {
        padding: 38px 20px;
    }

    .aurora-location-badges-wrap {
        gap: 26px;
    }

    .aurora-location-badges-wrap img {
        width: 95px;
    }
}



/* ===================================
   AURORA ONE STOP SECTION
====================================== */

.aurora-one-stop-section {
    width: 100%;
    background: #ffffff;
}

.aurora-one-stop-heading {
    width: 100%;
    background: #ff4b1f;
    padding: 50px 20px 50px;
    text-align: center;
}

.aurora-one-stop-heading h2 {
    color: #ffffff;
    font-size: 35px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 1.5px;
    margin: 0;
    text-transform: uppercase;
}

.aurora-one-stop-content {
    width: 100%;
    min-height: 520px;
    padding: 50px 11% 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 75px;
    background-image: url("../images/champion-watermark.png");
    background-size: 760px auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.aurora-one-stop-text-box {
    flex: 1;
    max-width: 730px;
    padding-left: 30px;
    border-left: 7px solid #777777;
}

.aurora-one-stop-text-box h3 {
    color: #ff4b1f;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1px;
    margin: 0 0 25px;
    text-transform: uppercase;
}

.aurora-one-stop-text-box p {
    color: #777777;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 20px;
}

.aurora-one-stop-btn {
    display: inline-block;
    margin-top: 18px;
    background: #252525;
    color: #ffffff;
    padding: 13px 26px;
    font-size: 16px;
    text-decoration: none;
    border-radius: 3px;
}

.aurora-one-stop-btn:hover,
.aurora-one-stop-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}

.aurora-one-stop-image-wrap {
    position: relative;
    width: 330px;
    flex-shrink: 0; 
}

.aurora-one-stop-image-wrap img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    display: block;
    margin-left: -95px;
}



/* RESPONSIVE */

@media (max-width: 991px) {
    .aurora-one-stop-heading h2 {
        font-size: 34px;
    }

    .aurora-one-stop-content {
        flex-direction: column;
        padding: 65px 7% 70px;
        background-attachment: scroll;
        gap: 55px;
    }

    .aurora-one-stop-text-box {
        max-width: 100%;
    }

    .aurora-one-stop-image-wrap {
        width: 360px;
    }
}

@media (max-width: 575px) {
    .aurora-one-stop-heading {
        padding: 42px 18px;
    }

    .aurora-one-stop-heading h2 {
        font-size: 27px;
    }

    .aurora-one-stop-content {
        padding: 50px 25px 60px;
        background-size: 430px auto;
    }

    .aurora-one-stop-text-box {
        padding-left: 20px;
        border-left-width: 5px;
    }

    .aurora-one-stop-text-box h3 {
        font-size: 24px;
    }

    .aurora-one-stop-text-box p {
        font-size: 16px;
    }

    .aurora-one-stop-image-wrap {
        width: 92%;
    }
}



/* ===================================
   AURORA PROFESSIONAL ROOF REPAIR
====================================== */

.aurora-roof-repair-feature-section {
    width: 100%;
    min-height: 500px;
    background-image: url("../images/aurora-15.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 70px 11% 70px 0;
}

.aurora-roof-repair-card {
    width: 600px;
    background: #ffffff;
    padding: 55px 70px 50px;
    border-left: 26px solid #ff4b1f;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.aurora-roof-repair-card h2 {
    color: #222222;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.aurora-roof-repair-card p {
    color: #222222;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 40px;
}

.aurora-roof-repair-btn {
    display: inline-block;
    background: #00f531;
    color: #000000;
    padding: 13px 26px;
    text-decoration: none;
    font-size: 18px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.aurora-roof-repair-btn:hover,
.aurora-roof-repair-btn:focus,
.aurora-roof-repair-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}


/* ===================================
   AURORA TOTAL ROOF REPLACEMENT
====================================== */

.aurora-total-replacement-section {
    width: 100%;
    min-height: 300px;
    background-image: url("../images/mixed-black-background.png");
    background-size: contain;
    background-position: center center;
    background-repeat: repeat;
    background-attachment: scroll;
    display: flex;
    align-items: center;
    padding: 70px 15%;
}

.aurora-total-replacement-content {
    max-width: 1200px;
}

.aurora-total-replacement-content h2 {
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 1px;
    margin: 0 0 22px;
    text-transform: uppercase;
}

.aurora-total-replacement-content p {
    color: #ffffff;
    font-size: 17px;
    line-height: 1.45;
    margin: 0;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .aurora-roof-repair-feature-section {
        min-height: 560px;
        background-attachment: scroll;
        justify-content: center;
        padding: 60px 30px;
    }

    .aurora-roof-repair-card {
        width: 90%;
        padding: 60px 45px;
        border-left-width: 18px;
    }

    .aurora-roof-repair-card h2,
    .aurora-total-replacement-content h2 {
        font-size: 32px;
    }

    .aurora-roof-repair-card p,
    .aurora-total-replacement-content p {
        font-size: 18px;
    }

    .aurora-total-replacement-section {
        padding: 60px 8%;
    }
}

@media (max-width: 575px) {
    .aurora-roof-repair-feature-section {
        min-height: 500px;
        padding: 45px 20px;
    }

    .aurora-roof-repair-card {
        width: 100%;
        padding: 45px 28px;
        border-left-width: 12px;
    }

    .aurora-roof-repair-card h2,
    .aurora-total-replacement-content h2 {
        font-size: 27px;
    }

    .aurora-roof-repair-card p,
    .aurora-total-replacement-content p {
        font-size: 16px;
    }

    .aurora-roof-repair-btn {
        width: 100%;
        text-align: center;
        padding: 16px 20px;
        font-size: 14px;
        letter-spacing: 3px;
    }

    .aurora-total-replacement-section {
        min-height: 300px;
        padding: 50px 25px;
    }
}



/* ===================================
   AURORA EMERGENCY ROOFING SERVICES
====================================== */

.aurora-emergency-roofing-section {
    width: 100%;
    min-height: 500px;
    background-image: url("../images/aurora-15.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 70px 0 70px 14%;
}

.aurora-emergency-roofing-card {
    width: 620px;
    background: #ffffff;
    padding: 52px 65px 62px;
    border-left: 26px solid #ff4b1f;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.aurora-emergency-roofing-card h2 {
    color: #ff4b1f;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 28px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.aurora-emergency-roofing-card p {
    color: #222222;
    font-size: 17px;
    line-height: 1.45;
    margin: 0 0 34px;
}

.aurora-emergency-roofing-btn {
    display: inline-block;
    background: #ff4b1f;
    color: #000000;
    padding: 13px 26px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.aurora-emergency-roofing-btn:hover,
.aurora-emergency-roofing-btn:focus,
.aurora-emergency-roofing-btn:active {
    background: #00f531;
    color: #000000;
}


/* ===================================
   AURORA TOP RATED CONTRACTORS
====================================== */

.aurora-top-rated-contractors-section {
    width: 100%;
    min-height: 320px;
    background-image: url("../images/mixed-black-background.png");
    background-size: contain;
    background-position: center center;
    background-repeat: repeat;
    background-attachment: scroll;
    display: flex;
    align-items: center;
    padding: 60px 15%;
}

.aurora-top-rated-contractors-content {
    max-width: 1200px;
}

.aurora-top-rated-contractors-content h2 {
    color: #ffffff;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 1px;
    margin: 0 0 25px;
    text-transform: uppercase;
}

.aurora-top-rated-contractors-content p {
    color: #ffffff;
    font-size: 17px;
    line-height: 1.45;
    margin: 0 0 18px;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .aurora-emergency-roofing-section {
        background-attachment: scroll;
        justify-content: center;
        padding: 60px 30px;
    }

    .aurora-emergency-roofing-card {
        width: 90%;
        padding: 50px 45px;
        border-left-width: 18px;
    }

    .aurora-emergency-roofing-card h2,
    .aurora-top-rated-contractors-content h2 {
        font-size: 32px;
    }

    .aurora-emergency-roofing-card p,
    .aurora-top-rated-contractors-content p {
        font-size: 18px;
    }

    .aurora-top-rated-contractors-section {
        padding: 60px 8%;
    }
}

@media (max-width: 575px) {
    .aurora-emergency-roofing-section {
        min-height: 520px;
        padding: 45px 20px;
    }

    .aurora-emergency-roofing-card {
        width: 100%;
        padding: 42px 28px;
        border-left-width: 12px;
    }

    .aurora-emergency-roofing-card h2,
    .aurora-top-rated-contractors-content h2 {
        font-size: 27px;
    }

    .aurora-emergency-roofing-card p,
    .aurora-top-rated-contractors-content p {
        font-size: 16px;
    }

    .aurora-emergency-roofing-btn {
        width: 100%;
        text-align: center;
        padding: 16px 18px;
        font-size: 13px;
        letter-spacing: 3px;
    }

    .aurora-top-rated-contractors-section {
        min-height: 350px;
        padding: 50px 25px;
    }
}



/* ===================================
   AURORA FREE ESTIMATE CTA
====================================== */

.aurora-free-estimate-cta-section {
    width: 100%;
    background: #ff4b1f;
    padding: 50px 20px 55px;
    text-align: center;
}

.aurora-free-estimate-cta-content {
    max-width: 1200px;
    margin: 0 auto;
}

.aurora-free-estimate-cta-content h2 {
    color: #ffffff;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 28px;
    text-transform: uppercase;
}

.aurora-free-estimate-cta-content p {
    color: #ffffff;
    font-size: 17px;
    line-height: 1.45;
    max-width: 1100px;
    margin: 0 auto 42px;
}

.aurora-free-estimate-cta-btn {
    display: inline-block;
    background: #00f531;
    color: #000000;
    padding: 13px 26px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.aurora-free-estimate-cta-btn:hover,
.aurora-free-estimate-cta-btn:focus,
.aurora-free-estimate-cta-btn:active {
    background: #ff4b1f;
    color: #ffffff;
    box-shadow: inset 0 0 0 2px #ffffff;
}


/* ===================================
   AURORA SERVICES CHECK SECTION
====================================== */

.aurora-services-check-section {
    width: 100%;
    background: #ffffff;
    padding: 45px 20px 28px;
    text-align: center;
    border-bottom: 8px solid #00f531;
}

.aurora-services-check-section h2 {
    color: #555555;
    font-size:30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 1px;
    margin: 0 0 58px;
    text-transform: uppercase;
}

.aurora-services-check-wrap {
    max-width: 1200px;
    margin: 0 auto 58px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 80px;
}

.aurora-services-check-item {
    width: 190px;
    text-align: center;
}

.aurora-services-check-item img {
    width: 120px;
    height: auto;
    display: block;
    margin: 0 auto 35px;
}

.aurora-services-check-item h3 {
    color: #555555;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
}

.aurora-services-check-section h4 {
    color: #ff4b1f;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .aurora-free-estimate-cta-content h2,
    .aurora-services-check-section h2 {
        font-size: 38px;
    }

    .aurora-free-estimate-cta-content p {
        font-size: 18px;
    }

    .aurora-services-check-wrap {
        flex-wrap: wrap;
        gap: 50px 35px;
    }

    .aurora-services-check-item {
        width: 230px;
    }

    .aurora-services-check-section h4 {
        font-size: 34px;
    }
}

@media (max-width: 575px) {
    .aurora-free-estimate-cta-section {
        padding: 65px 22px 75px;
    }

    .aurora-free-estimate-cta-content h2,
    .aurora-services-check-section h2 {
        font-size: 30px;
    }

    .aurora-free-estimate-cta-content p {
        font-size: 16px;
    }

    .aurora-free-estimate-cta-btn {
        width: 100%;
        padding: 16px 20px;
        font-size: 14px;
        letter-spacing: 3px;
    }

    .aurora-services-check-section {
        padding: 50px 20px 25px;
    }

    .aurora-services-check-wrap {
        gap: 45px;
        margin-bottom: 45px;
    }

    .aurora-services-check-item {
        width: 100%;
    }

    .aurora-services-check-item img {
        width: 115px;
        margin-bottom: 25px;
    }

    .aurora-services-check-item h3 {
        font-size: 23px;
    }

    .aurora-services-check-section h4 {
        font-size: 29px;
    }
}



/* ===================================
   AURORA SERVICES IMAGE LINKS
====================================== */

.aurora-services-image-links-section {
    width: 100%;
    padding: 55px 40px;
    background-image: url("../images/dark-carbon-fiber.png");
    background-size: auto;
    background-position: center;
    background-repeat: repeat;
    background-attachment: scroll;
    border-bottom: 6px solid #00f531;
}

.aurora-services-image-links-grid {
    max-width: 1650px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 85px;
}

.aurora-services-image-links-card {
    display: block;
    width: 520px;
    text-decoration: none;
    transition: 0.3s ease;
}

.aurora-services-image-links-card img {
    width: 100%;
    display: block;
    border: 3px solid #ffffff;
}

.aurora-services-image-links-card:hover {
    transform: translateY(-8px);
}

.aurora-services-image-links-card:hover img {
    box-shadow: 0 0 25px rgba(0, 245, 49, 0.45);
}


/* RESPONSIVE */

@media (max-width: 1200px) {

    .aurora-services-image-links-grid {
        gap: 40px;
    }

    .aurora-services-image-links-card {
        width: 31%;
    }
}

@media (max-width: 991px) {

    .aurora-services-image-links-grid {
        flex-direction: column;
        gap: 35px;
    }

    .aurora-services-image-links-card {
        width: 90%;
        max-width: 700px;
    }
}

@media (max-width: 575px) {

    .aurora-services-image-links-section {
        padding: 50px 20px;
    }

    .aurora-services-image-links-card {
        width: 100%;
    }
}



/* ===================================
   BOULDER LOCATION HERO SECTION HTML PAGE
====================================== */

.boulder-location-hero-section {
    width: 100%;
    height: 520px;
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.18),
        rgba(0, 0, 0, 0.18)
    ), url("../images/boulder-hero.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boulder-location-hero-content {
    text-align: center;
    margin-top: 95px;
}

.boulder-location-hero-content h1 {
    color: #ffffff;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.boulder-location-hero-btn {
    display: inline-block;
    background: #ff4b1f;
    color: #ffffff;
    text-decoration: none;
    padding: 13px 26px;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.boulder-location-hero-btn:hover,
.boulder-location-hero-btn:focus,
.boulder-location-hero-btn:active {
    background: #00f531;
    color: #ffffff;
}


/* ===================================
   BOULDER LOCATION BADGES SECTION
====================================== */

.boulder-location-badges-section {
    width: 100%;
    background: #202020;
    padding: 40px 20px 55px;
}

.boulder-location-badges-wrap {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 52px;
}

.boulder-location-badges-wrap img {
    width: 128px;
    height: auto;
    display: block;
    opacity: 0.95;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .boulder-location-hero-section {
        height: 460px;
        background-attachment: scroll;
    }

    .boulder-location-hero-content {
        margin-top: 45px;
    }

    .boulder-location-hero-content h1 {
        font-size: 42px;
    }

    .boulder-location-hero-btn {
        padding: 15px 30px;
        font-size: 14px;
        letter-spacing: 3px;
    }

    .boulder-location-badges-wrap {
        flex-wrap: wrap;
        gap: 35px;
    }

    .boulder-location-badges-wrap img {
        width: 115px;
    }
}

@media (max-width: 575px) {
    .boulder-location-hero-section {
        height: 390px;
    }

    .boulder-location-hero-content {
        margin-top: 30px;
        padding: 0 20px;
    }

    .boulder-location-hero-content h1 {
        font-size: 34px;
    }

    .boulder-location-badges-section {
        padding: 38px 20px;
    }

    .boulder-location-badges-wrap {
        gap: 26px;
    }

    .boulder-location-badges-wrap img {
        width: 95px;
    }
}



/* ===================================
   BOULDER ONE STOP SECTION
====================================== */

.boulder-one-stop-section {
    width: 100%;
    background: #ffffff;
}

.boulder-one-stop-heading {
    width: 100%;
    background: #ff4b1f;
    padding: 50px 20px 50px;
    text-align: center;
}

.boulder-one-stop-heading h2 {
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 1.5px;
    margin: 0;
    text-transform: uppercase;
}

.boulder-one-stop-content {
    width: 100%;
    min-height: 480px;
    padding: 50px 11% 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 75px;
    background-image: url("../images/champion-watermark.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.boulder-one-stop-text-box {
    flex: 1;
    max-width: 720px;
    padding-left: 30px;
    border-left: 7px solid #777777;
     margin-left: 90px;
}

.boulder-one-stop-text-box h3 {
    color: #ff4b1f;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1px;
    margin: 0 0 25px;
    text-transform: uppercase;
}

.boulder-one-stop-text-box p {
    color: #777777;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 20px;
}

.boulder-one-stop-btn {
    display: inline-block;
    margin-top: 18px;
    background: #252525;
    color: #ffffff;
    padding: 13px 26px;
    font-size: 16px;
    text-decoration: none;
    border-radius: 3px;
    transition: 0.3s ease;
}

.boulder-one-stop-btn:hover,
.boulder-one-stop-btn:focus,
.boulder-one-stop-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}

.boulder-one-stop-image-wrap {
    position: relative;
    width: 330px;
    flex-shrink: 0;
}

.boulder-one-stop-image-wrap img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    display: block;
    margin-left: -60px;
}



/* ===================================
   BOULDER RESIDENTIAL ROOFING SERVICES
====================================== */

.boulder-residential-roofing-section {
    width: 100%;
    min-height: 520px;
    background-image: url("../images/boulder-8.png");
    background-size: auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 70px 11% 70px 0;
}

.boulder-residential-roofing-card {
    width: 620px;
    background: #ffffff;
    padding: 55px 70px 55px;
    border-left: 26px solid #ff4b1f;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.boulder-residential-roofing-card h2 {
    color: #222222;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.boulder-residential-roofing-card p {
    color: #222222;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 40px;
}

.boulder-residential-roofing-btn {
    display: inline-block;
    background: #00f531;
    color: #000000;
    padding: 13px 26px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.boulder-residential-roofing-btn:hover,
.boulder-residential-roofing-btn:focus,
.boulder-residential-roofing-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .boulder-one-stop-heading h2 {
        font-size: 34px;
    }

    .boulder-one-stop-content {
        flex-direction: column;
        padding: 65px 7% 70px;
        background-attachment: scroll;
        gap: 55px;
    }

    .boulder-one-stop-text-box {
        max-width: 100%;
    }

    .boulder-one-stop-image-wrap {
        width: 360px;
    }

    .boulder-residential-roofing-section {
        background-attachment: scroll;
        justify-content: center;
        padding: 60px 30px;
    }

    .boulder-residential-roofing-card {
        width: 90%;
        padding: 60px 45px;
        border-left-width: 18px;
    }

    .boulder-residential-roofing-card h2 {
        font-size: 32px;
    }

    .boulder-residential-roofing-card p {
        font-size: 18px;
    }
}

@media (max-width: 575px) {
    .boulder-one-stop-heading {
        padding: 42px 18px;
    }

    .boulder-one-stop-heading h2 {
        font-size: 27px;
    }

    .boulder-one-stop-content {
        padding: 50px 25px 60px;
        background-size: 430px auto;
    }

    .boulder-one-stop-text-box {
        padding-left: 20px;
        border-left-width: 5px;
    }

    .boulder-one-stop-text-box h3 {
        font-size: 24px;
    }

    .boulder-one-stop-text-box p {
        font-size: 16px;
    }

    .boulder-one-stop-image-wrap {
        width: 92%;
    }

    .boulder-residential-roofing-section {
        min-height: 520px;
        padding: 45px 20px;
    }

    .boulder-residential-roofing-card {
        width: 100%;
        padding: 42px 28px;
        border-left-width: 12px;
    }

    .boulder-residential-roofing-card h2 {
        font-size: 27px;
    }

    .boulder-residential-roofing-card p {
        font-size: 16px;
    }

    .boulder-residential-roofing-btn {
        width: 100%;
        text-align: center;
        padding: 16px 18px;
        font-size: 13px;
        letter-spacing: 3px;
    }
}


/* ===================================
   BOULDER COMMERCIAL ROOFING SERVICES
====================================== */

.boulder-commercial-services-section {
    width: 100%;
    min-height: 290px;
    background-image: url("../images/mixed-black-background.png");
    background-size: contain;
    background-position: center;
    background-repeat: repeat;
    background-attachment: scroll;
    display: flex;
    align-items: center;
    padding: 70px 15%;
}

.boulder-commercial-services-content h2,
.boulder-roofing-maintenance-content h2 {
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 24px;
    text-transform: uppercase;
}

.boulder-commercial-services-content p,
.boulder-roofing-maintenance-content p {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.45;
    margin: 0 0 20px;
}


/* ===================================
   BOULDER ROOFING UPGRADES
====================================== */

.boulder-roofing-upgrades-section {
    width: 100%;
    min-height: 620px;
    background-image: url("../images/boulder-9.png");
    background-size: cover;
    background-position: center center ;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 15px 0 20px 15%;
}

.boulder-roofing-upgrades-card {
    width: 580px;
    background: #ffffff;
    padding: 52px 65px 62px;
    border-left: 26px solid #ff4b1f;
   
}

.boulder-roofing-upgrades-card h2 {
    color: #ff4b1f;
    font-size: 25px;
    font-weight: 700;
    margin: 0 0 28px;
    text-transform: uppercase;
}

.boulder-roofing-upgrades-card p {
    color: #222222;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 34px;
}

.boulder-roofing-upgrades-btn {
    display: inline-block;
    background: #00f531;
    color: #000000;
    padding: 13px 26px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.boulder-roofing-upgrades-btn:hover,
.boulder-roofing-upgrades-btn:focus,
.boulder-roofing-upgrades-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}


/* ===================================
   BOULDER ROOFING MAINTENANCE
====================================== */

.boulder-roofing-maintenance-section {
    width: 100%;
    min-height: 270px;
    background-image: url("../images/mixed-black-background.png");
    background-size: contain;
    background-position: center;
    background-repeat: repeat;
    background-attachment: scroll;
    display: flex;
    align-items: center;
    padding: 55px 15%;
}

.boulder-roofing-maintenance-content {
    max-width: 1450px;
}


/* ===================================
   BOULDER GET STARTED CTA
====================================== */

.boulder-get-started-cta-section {
    width: 100%;
    background: #ff4b1f;
    padding: 55px 20px 65px;
    text-align: center;
}

.boulder-get-started-cta-content {
    max-width: 1200px;
    margin: 0 auto;
}

.boulder-get-started-cta-content h2 {
    color: #ffffff;
    font-size: 40px;
    font-weight: 400;
    margin: 0 0 28px;
    text-transform: uppercase;
}

.boulder-get-started-cta-content p {
    color: #ffffff;
    font-size: 17px;
    line-height: 1.45;
    margin: 0 auto 42px;
    max-width: 1100px;
}

.boulder-get-started-cta-btn {
    display: inline-block;
    background: #00f531;
    color: #000000;
    padding: 13px 26px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.boulder-get-started-cta-btn:hover,
.boulder-get-started-cta-btn:focus,
.boulder-get-started-cta-btn:active {
    background: #ff4b1f;
    color: #ffffff;
    box-shadow: inset 0 0 0 2px #ffffff;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .boulder-commercial-services-section,
    .boulder-roofing-maintenance-section {
        padding: 60px 8%;
    }

    .boulder-commercial-services-content h2,
    .boulder-roofing-maintenance-content h2 {
        font-size: 32px;
    }

    .boulder-commercial-services-content p,
    .boulder-roofing-maintenance-content p {
        font-size: 18px;
    }

    .boulder-roofing-upgrades-section {
        background-attachment: scroll;
        justify-content: center;
        padding: 60px 30px;
    }

    .boulder-roofing-upgrades-card {
        width: 90%;
        padding: 50px 45px;
        border-left-width: 18px;
    }

    .boulder-roofing-upgrades-card h2 {
        font-size: 32px;
    }

    .boulder-roofing-upgrades-card p {
        font-size: 18px;
    }

    .boulder-get-started-cta-content h2 {
        font-size: 38px;
    }

    .boulder-get-started-cta-content p {
        font-size: 18px;
    }
}

@media (max-width: 575px) {
    .boulder-commercial-services-section,
    .boulder-roofing-maintenance-section {
        padding: 50px 25px;
        min-height: auto;
    }

    .boulder-commercial-services-content h2,
    .boulder-roofing-maintenance-content h2 {
        font-size: 27px;
    }

    .boulder-commercial-services-content p,
    .boulder-roofing-maintenance-content p {
        font-size: 16px;
    }

    .boulder-roofing-upgrades-section {
        min-height: 520px;
        padding: 45px 20px;
    }

    .boulder-roofing-upgrades-card {
        width: 100%;
        padding: 42px 28px;
        border-left-width: 12px;
    }

    .boulder-roofing-upgrades-card h2 {
        font-size: 27px;
    }

    .boulder-roofing-upgrades-card p {
        font-size: 16px;
    }

    .boulder-roofing-upgrades-btn,
    .boulder-get-started-cta-btn {
        width: 100%;
        text-align: center;
        padding: 16px 18px;
        font-size: 13px;
        letter-spacing: 3px;
    }

    .boulder-get-started-cta-section {
        padding: 65px 22px 75px;
    }

    .boulder-get-started-cta-content h2 {
        font-size: 30px;
    }

    .boulder-get-started-cta-content p {
        font-size: 16px;
    }
}



/* ===================================
   BOULDER SERVICES CHECK SECTION
====================================== */

.boulder-services-check-section {
    width: 100%;
    background: #ffffff;
    padding: 45px 20px 28px;
    text-align: center;
    border-bottom: 8px solid #00f531;
}

.boulder-services-check-section h2 {
    color: #555555;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 1px;
    margin: 0 0 58px;
    text-transform: uppercase;
}

.boulder-services-check-wrap {
    max-width: 1200px;
    margin: 0 auto 58px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 80px;
}

.boulder-services-check-item {
    width: 190px;
    text-align: center;
}

.boulder-services-check-item img {
    width: 120px;
    height: auto;
    display: block;
    margin: 0 auto 35px;
}

.boulder-services-check-item h3 {
    color: #555555;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
}

.boulder-services-check-section h4 {
    color: #ff4b1f;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
}


/* ===================================
   BOULDER SERVICES IMAGE LINKS
====================================== */

.boulder-services-image-links-section {
    width: 100%;
    padding: 55px 40px;
    background-image: url("../images/dark-carbon-fiber.png");
    background-size: auto;
    background-position: center;
    background-repeat: repeat;
    background-attachment: scroll;
    border-bottom: 6px solid #00f531;
}

.boulder-services-image-links-grid {
    max-width: 1650px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 85px;
}

.boulder-services-image-links-card {
    display: block;
    width: 520px;
    text-decoration: none;
    transition: 0.3s ease;
}

.boulder-services-image-links-card img {
    width: 100%;
    display: block;
    border: 3px solid #ffffff;
}

.boulder-services-image-links-card:hover {
    transform: translateY(-8px);
}

.boulder-services-image-links-card:hover img {
    box-shadow: 0 0 25px rgba(0, 245, 49, 0.45);
}


/* RESPONSIVE */

@media (max-width: 1200px) {
    .boulder-services-image-links-grid {
        gap: 40px;
    }

    .boulder-services-image-links-card {
        width: 31%;
    }
}

@media (max-width: 991px) {
    .boulder-services-check-section h2 {
        font-size: 38px;
    }

    .boulder-services-check-wrap {
        flex-wrap: wrap;
        gap: 50px 35px;
    }

    .boulder-services-check-item {
        width: 230px;
    }

    .boulder-services-check-section h4 {
        font-size: 34px;
    }

    .boulder-services-image-links-grid {
        flex-direction: column;
        gap: 35px;
    }

    .boulder-services-image-links-card {
        width: 90%;
        max-width: 700px;
    }
}

@media (max-width: 575px) {
    .boulder-services-check-section {
        padding: 50px 20px 25px;
    }

    .boulder-services-check-section h2 {
        font-size: 30px;
    }

    .boulder-services-check-wrap {
        gap: 45px;
        margin-bottom: 45px;
    }

    .boulder-services-check-item {
        width: 100%;
    }

    .boulder-services-check-item img {
        width: 115px;
        margin-bottom: 25px;
    }

    .boulder-services-check-item h3 {
        font-size: 23px;
    }

    .boulder-services-check-section h4 {
        font-size: 29px;
    }

    .boulder-services-image-links-section {
        padding: 50px 20px;
    }

    .boulder-services-image-links-card {
        width: 100%;
    }
}



/* ===================================
   CHEYENNE LOCATION HERO SECTION
====================================== */

.cheyenne-location-hero-section {
    width: 100%;
    height: 560px;
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.58),
        rgba(0, 0, 0, 0.58)
    ), url("../images/cheyenne-hero.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cheyenne-location-hero-content {
    text-align: center;
    margin-top: 80px;
}

.cheyenne-location-hero-content h1 {
    color: #ffffff;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cheyenne-location-hero-content h2 {
    color: #ffffff;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0 0 30px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cheyenne-location-hero-btn {
    display: inline-block;
    background: #ff4b1f;
    color: #ffffff;
    text-decoration: none;
    padding: 13px 26px;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.cheyenne-location-hero-btn:hover,
.cheyenne-location-hero-btn:focus,
.cheyenne-location-hero-btn:active {
    background: #00f531;
    color: #ffffff;
}


/* ===================================
   CHEYENNE LOCATION BADGES SECTION
====================================== */

.cheyenne-location-badges-section {
    width: 100%;
    background: #202020;
    padding: 50px 30px 50px;
}

.cheyenne-location-badges-wrap {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 42px;
}

.cheyenne-location-badges-wrap img {
    width: 138px;
    height: auto;
    display: block;
    opacity: 0.95;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .cheyenne-location-hero-section {
        height: 470px;
        background-attachment: scroll;
    }

    .cheyenne-location-hero-content {
        margin-top: 45px;
        padding: 0 20px;
    }

    .cheyenne-location-hero-content h1 {
        font-size: 40px;
    }

    .cheyenne-location-hero-content h2 {
        font-size: 25px;
    }

    .cheyenne-location-hero-btn {
        padding: 15px 30px;
        font-size: 14px;
        letter-spacing: 3px;
    }

    .cheyenne-location-badges-wrap {
        flex-wrap: wrap;
        gap: 35px;
    }

    .cheyenne-location-badges-wrap img {
        width: 115px;
    }
}

@media (max-width: 575px) {
    .cheyenne-location-hero-section {
        height: 400px;
    }

    .cheyenne-location-hero-content h1 {
        font-size: 33px;
    }

    .cheyenne-location-hero-content h2 {
        font-size: 20px;
    }

    .cheyenne-location-badges-section {
        padding: 38px 20px;
    }

    .cheyenne-location-badges-wrap {
        gap: 26px;
    }

    .cheyenne-location-badges-wrap img {
        width: 95px;
    }
}


/* ===================================
   CHEYENNE ONE STOP BANNER
====================================== */

.cheyenne-one-stop-banner-section {
    width: 100%;
    background: #ff4b1f;
    padding: 58px 20px 54px;
    text-align: center;
}

.cheyenne-one-stop-banner-content {
    max-width: 1200px;
    margin: 0 auto;
}

.cheyenne-one-stop-banner-content h2 {
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 1.5px;
    margin: 0;
    text-transform: uppercase;
}


/* ===================================
   CHEYENNE ROOF REPLACEMENT & REPAIR
====================================== */

.cheyenne-roof-replacement-section {
    width: 100%;
    background: #ffffff;
}

.cheyenne-roof-replacement-content {
    width: 100%;
    min-height: 585px;
    padding: 80px 11% 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 75px;
    background-image: url("../images/champion-watermark.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.cheyenne-roof-replacement-text {
    flex: 1;
    max-width: 900px;
    padding-left: 30px;
    border-left: 7px solid #777777;
}

.cheyenne-roof-replacement-text h2 {
    color: #ff4b1f;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 1px;
    margin: 0 0 26px;
    text-transform: uppercase;
}

.cheyenne-roof-replacement-text p {
    color: #777777;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 24px;
}

.cheyenne-roof-replacement-btn {
    display: inline-block;
    margin-top: 18px;
    background: #252525;
    color: #ffffff;
    padding: 13px 26px;
    font-size: 16px;
    text-decoration: none;
    border-radius: 1.5px;
    transition: 0.3s ease;
}

.cheyenne-roof-replacement-btn:hover,
.cheyenne-roof-replacement-btn:focus,
.cheyenne-roof-replacement-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}

.cheyenne-roof-replacement-image-wrap {
    position: relative;
    width: 330px;
    flex-shrink: 0;
}

.cheyenne-roof-replacement-image-wrap img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    display: block;
    margin-left: -60px;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .cheyenne-one-stop-banner-content h2 {
        font-size: 34px;
    }

    .cheyenne-roof-replacement-content {
        flex-direction: column;
        padding: 65px 7% 70px;
        background-attachment: scroll;
        gap: 55px;
    }

    .cheyenne-roof-replacement-text {
        max-width: 100%;
    }

    .cheyenne-roof-replacement-text h2 {
        font-size: 27px;
    }

    .cheyenne-roof-replacement-text p {
        font-size: 17px;
    }

    .cheyenne-roof-replacement-image-wrap {
        width: 360px;
    }
}

@media (max-width: 575px) {
    .cheyenne-one-stop-banner-section {
        padding: 42px 18px;
    }

    .cheyenne-one-stop-banner-content h2 {
        font-size: 27px;
    }

    .cheyenne-roof-replacement-content {
        padding: 50px 25px 60px;
        background-size: 430px auto;
    }

    .cheyenne-roof-replacement-text {
        padding-left: 20px;
        border-left-width: 5px;
    }

    .cheyenne-roof-replacement-text h2 {
        font-size: 23px;
    }

    .cheyenne-roof-replacement-text p {
        font-size: 16px;
    }

    .cheyenne-roof-replacement-image-wrap {
        width: 92%;
    }
}



/* ===================================
   CHEYENNE HIGH WIND ROOF REPAIR
====================================== */

.cheyenne-high-wind-repair-section {
    width: 100%;
    min-height: 660px;
    background-image: url("../images/cheyenne-1.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 70px 11% 70px 0;
}

.cheyenne-high-wind-repair-card {
    width: 620px;
    background: #ffffff;
    padding: 58px 65px 58px;
    border-left: 26px solid #ff4b1f;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.cheyenne-high-wind-repair-card h2 {
    color: #222222;
    font-size: 42px;
    font-weight: 400;
    line-height: 1.35;
    margin: 0 0 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cheyenne-high-wind-repair-card p {
    color: #222222;
    font-size: 16px;
    line-height: 1.42;
    margin: 0 0 34px;
}

.cheyenne-high-wind-repair-btn {
    display: inline-block;
    background: #00f531;
    color: #000000;
    padding: 16px 42px;
    text-decoration: none;
    font-size: 15px;
    letter-spacing: 4px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.cheyenne-high-wind-repair-btn:hover,
.cheyenne-high-wind-repair-btn:focus,
.cheyenne-high-wind-repair-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .cheyenne-high-wind-repair-section {
        background-attachment: scroll;
        justify-content: center;
        padding: 60px 30px;
    }

    .cheyenne-high-wind-repair-card {
        width: 90%;
        padding: 50px 45px;
        border-left-width: 18px;
    }

    .cheyenne-high-wind-repair-card h2 {
        font-size: 34px;
    }

    .cheyenne-high-wind-repair-card p {
        font-size: 15px;
    }
}

@media (max-width: 575px) {
    .cheyenne-high-wind-repair-section {
        min-height: 540px;
        padding: 45px 20px;
    }

    .cheyenne-high-wind-repair-card {
        width: 100%;
        padding: 42px 28px;
        border-left-width: 12px;
    }

    .cheyenne-high-wind-repair-card h2 {
        font-size: 28px;
    }

    .cheyenne-high-wind-repair-card p {
        font-size: 14px;
    }

    .cheyenne-high-wind-repair-btn {
        width: 100%;
        text-align: center;
        padding: 16px 18px;
        font-size: 13px;
        letter-spacing: 3px;
    }
}



/* ===================================
   CHEYENNE SERVICES CHECK SECTION
====================================== */

.cheyenne-services-check-section {
    width: 100%;
    background: #ffffff;
    padding: 45px 20px 28px;
    text-align: center;
    border-bottom: 8px solid #00f531;
}

.cheyenne-services-check-section h2 {
    color: #555555;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 1px;
    margin: 0 0 58px;
    text-transform: uppercase;
}

.cheyenne-services-check-wrap {
    max-width: 1200px;
    margin: 0 auto 58px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 80px;
}

.cheyenne-services-check-item {
    width: 190px;
    text-align: center;
}

.cheyenne-services-check-item img {
    width: 120px;
    height: auto;
    display: block;
    margin: 0 auto 35px;
}

.cheyenne-services-check-item h3 {
    color: #555555;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
}

.cheyenne-services-check-section h4 {
    color: #ff4b1f;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
}


/* ===================================
   CHEYENNE SERVICES IMAGE LINKS
====================================== */

.cheyenne-services-image-links-section {
    width: 100%;
    padding: 55px 40px;
    background-image: url("../images/dark-carbon-fiber.png");
    background-size: auto;
    background-position: center;
    background-repeat: repeat;
    background-attachment: scroll;
    border-bottom: 6px solid #00f531;
}

.cheyenne-services-image-links-grid {
    max-width: 1650px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 85px;
}

.cheyenne-services-image-links-card {
    display: block;
    width: 520px;
    text-decoration: none;
    transition: 0.3s ease;
}

.cheyenne-services-image-links-card img {
    width: 100%;
    display: block;
    border: 3px solid #ffffff;
}

.cheyenne-services-image-links-card:hover {
    transform: translateY(-8px);
}

.cheyenne-services-image-links-card:hover img {
    box-shadow: 0 0 25px rgba(0, 245, 49, 0.45);
}


/* RESPONSIVE */

@media (max-width: 1200px) {
    .cheyenne-services-image-links-grid {
        gap: 40px;
    }

    .cheyenne-services-image-links-card {
        width: 31%;
    }
}

@media (max-width: 991px) {
    .cheyenne-services-check-section h2 {
        font-size: 38px;
    }

    .cheyenne-services-check-wrap {
        flex-wrap: wrap;
        gap: 50px 35px;
    }

    .cheyenne-services-check-item {
        width: 230px;
    }

    .cheyenne-services-check-section h4 {
        font-size: 34px;
    }

    .cheyenne-services-image-links-grid {
        flex-direction: column;
        gap: 35px;
    }

    .cheyenne-services-image-links-card {
        width: 90%;
        max-width: 700px;
    }
}

@media (max-width: 575px) {
    .cheyenne-services-check-section {
        padding: 50px 20px 25px;
    }

    .cheyenne-services-check-section h2 {
        font-size: 30px;
    }

    .cheyenne-services-check-wrap {
        gap: 45px;
        margin-bottom: 45px;
    }

    .cheyenne-services-check-item {
        width: 100%;
    }

    .cheyenne-services-check-item img {
        width: 115px;
        margin-bottom: 25px;
    }

    .cheyenne-services-check-item h3 {
        font-size: 23px;
    }

    .cheyenne-services-check-section h4 {
        font-size: 29px;
    }

    .cheyenne-services-image-links-section {
        padding: 50px 20px;
    }

    .cheyenne-services-image-links-card {
        width: 100%;
    }
}



/* ===================================
   CHEYENNE ROOFING SERVICE LINKS
====================================== */

.cheyenne-roofing-service-links-section {
    width: 100%;
    background-image: url("../images/mixed-black-background.png");
    background-size: 350px auto;
    background-position: center;
    background-repeat: repeat;
    background-attachment: scroll;
    padding: 80px 15% 70px;
}

.cheyenne-roofing-service-links-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 80px;
}

.cheyenne-roofing-service-links-text {
    width: 46%;
}

.cheyenne-roofing-service-links-text h2 {
    color: #ffffff;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 28px;
    text-transform: uppercase;
}

.cheyenne-roofing-service-links-text p {
    color: #ffffff;
    font-size: 17px;
    line-height: 1.4;
    margin: 0 0 60px;
}

.cheyenne-roofing-service-links-buttons {
    width: 48%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cheyenne-roofing-service-links-buttons a {
    display: block;
    width: 100%;
    background: #ff4b1f;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    padding: 15px 25px;
    font-size: 16px;
    line-height: 1.2;
    border-radius: 4px;
    transition: 0.3s ease;
}

.cheyenne-roofing-service-links-buttons a:hover,
.cheyenne-roofing-service-links-buttons a:focus,
.cheyenne-roofing-service-links-buttons a:active {
    background: #555555;
    color: #ffffff;
}

.cheyenne-roofing-service-divider {
    width: 100%;
    height: 1px;
    background: #777777;
    margin: 12px 0 62px;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .cheyenne-roofing-service-links-section {
        padding: 60px 8%;
    }

    .cheyenne-roofing-service-links-row {
        flex-direction: column;
        gap: 35px;
    }

    .cheyenne-roofing-service-links-text,
    .cheyenne-roofing-service-links-buttons {
        width: 100%;
    }

    .cheyenne-roofing-service-links-text h2 {
        font-size: 32px;
    }

    .cheyenne-roofing-service-links-text p {
        font-size: 18px;
        margin-bottom: 25px;
    }

    .cheyenne-roofing-service-divider {
        margin: 45px 0;
    }
}

@media (max-width: 575px) {
    .cheyenne-roofing-service-links-section {
        padding: 50px 25px;
    }

    .cheyenne-roofing-service-links-text h2 {
        font-size: 27px;
    }

    .cheyenne-roofing-service-links-text p {
        font-size: 16px;
    }

    .cheyenne-roofing-service-links-buttons a {
        font-size: 16px;
        padding: 15px 18px;
    }
}



/* ===================================
   CHEYENNE FINAL ESTIMATE SECTION
====================================== */

.cheyenne-final-estimate-section {
    width: 100%;
    background-image: url("../images/champion-watermark.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #ffffff;
    padding: 60px 20px 60px;
    text-align: center;
    border-bottom: 8px solid #ff4b1f;
}

.cheyenne-final-estimate-content {
    max-width: 1100px;
    margin: 0 auto;
}

.cheyenne-final-estimate-content p {
    color: #222222;
    font-size: 18px;
    line-height: 1.45;
    margin: 0 auto 42px;
    max-width: 1320px;
}

.cheyenne-final-estimate-btn {
    display: inline-block;
    background: #00f531;
    color: #000000;
    padding: 13px 26px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.cheyenne-final-estimate-btn:hover,
.cheyenne-final-estimate-btn:focus,
.cheyenne-final-estimate-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .cheyenne-final-estimate-section {
        padding: 80px 35px;
        background-attachment: scroll;
        background-size: 520px auto;
    }

    .cheyenne-final-estimate-content p {
        font-size: 18px;
    }

    .cheyenne-final-estimate-btn {
        font-size: 15px;
        padding: 16px 35px;
        letter-spacing: 3px;
    }
}

@media (max-width: 575px) {
    .cheyenne-final-estimate-section {
        padding: 65px 22px;
        background-size: 400px auto;
    }

    .cheyenne-final-estimate-content p {
        font-size: 16px;
    }

    .cheyenne-final-estimate-btn {
        width: 100%;
        text-align: center;
        padding: 16px 18px;
        font-size: 13px;
        letter-spacing: 3px;
    }
}



/* ===================================
   DENVER LOCATION HERO SECTION
====================================== */

.denver-location-hero-section {
    width: 100%;
    height: 520px;
    background-image: linear-gradient(
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0)
    ), url("../images/denver-hero.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.denver-location-hero-content {
    text-align: center;
    margin-top: 95px;
}

.denver-location-hero-content h1 {
    color: #ffffff;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    margin: 0 0 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.denver-location-hero-btn {
    display: inline-block;
    background: #ff4b1f;
    color: #ffffff;
    text-decoration: none;
    padding: 13px 26px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.denver-location-hero-btn:hover,
.denver-location-hero-btn:focus,
.denver-location-hero-btn:active {
    background: #00f531;
    color: #ffffff;
}


/* ===================================
   DENVER LOCATION BADGES SECTION
====================================== */

.denver-location-badges-section {
    width: 100%;
    background: #202020;
    padding: 50px 30px 50px;
}

.denver-location-badges-wrap {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 52px;
}

.denver-location-badges-wrap img {
    width: 138px;
    height: auto;
    display: block;
    opacity: 0.95;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .denver-location-hero-section {
        height: 460px;
        background-attachment: scroll;
    }

    .denver-location-hero-content {
        margin-top: 45px;
        padding: 0 20px;
    }

    .denver-location-hero-content h1 {
        font-size: 40px;
    }

    .denver-location-hero-btn {
        padding: 15px 30px;
        font-size: 14px;
        letter-spacing: 3px;
    }

    .denver-location-badges-wrap {
        flex-wrap: wrap;
        gap: 35px;
    }

    .denver-location-badges-wrap img {
        width: 115px;
    }
}

@media (max-width: 575px) {
    .denver-location-hero-section {
        height: 390px;
    }

    .denver-location-hero-content h1 {
        font-size: 33px;
    }

    .denver-location-badges-section {
        padding: 38px 20px;
    }

    .denver-location-badges-wrap {
        gap: 26px;
    }

    .denver-location-badges-wrap img {
        width: 95px;
    }
}



/* ===================================
   DENVER ONE STOP BANNER
====================================== */

.denver-one-stop-banner-section {
    width: 100%;
    background: #ff4b1f;
    padding: 50px 20px 50px;
    text-align: center;
}

.denver-one-stop-banner-content {
    max-width: 1200px;
    margin: 0 auto;
}

.denver-one-stop-banner-content h2 {
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 2px;
    margin: 0;
    text-transform: uppercase;
}


/* ===================================
   DENVER ROOF REPLACEMENT & REPAIR
====================================== */

.denver-roof-replacement-section {
    width: 100%;
    background: #ffffff;
   
}

.denver-roof-replacement-content {
    width: 100%;
    min-height: 485px;
    padding: 30px 11% 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 75px;
    background-image: url("../images/champion-watermark.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
     margin-left: 90px;
     
}

.denver-roof-replacement-text {
    flex: 1;
    max-width: 680px;
    padding-left: 30px;
    border-left: 7px solid #777777;
}

.denver-roof-replacement-text h2 {
    color: #ff4b1f;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1px;
    margin: 0 0 26px;
    text-transform: uppercase;
}

.denver-roof-replacement-text p {
    color: #777777;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 24px;
}

.denver-roof-replacement-btn {
    display: inline-block;
    margin-top: 18px;
    background: #252525;
    color: #ffffff;
    padding: 13px 26px;
    font-size: 16px;
    text-decoration: none;
    border-radius: 3px;
    transition: 0.3s ease;
}

.denver-roof-replacement-btn:hover,
.denver-roof-replacement-btn:focus,
.denver-roof-replacement-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}

.denver-roof-replacement-image-wrap {
    position: relative;
    width: 340px;
    flex-shrink: 0;
}

.denver-roof-replacement-image-wrap img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    display: block;
    margin-left: -90px;
}




/* RESPONSIVE */

@media (max-width: 991px) {
    .denver-one-stop-banner-content h2 {
        font-size: 34px;
    }

    .denver-roof-replacement-content {
        flex-direction: column;
        padding: 65px 7% 70px;
        background-attachment: scroll;
        gap: 55px;
    }

    .denver-roof-replacement-text {
        max-width: 100%;
    }

    .denver-roof-replacement-text h2 {
        font-size: 27px;
    }

    .denver-roof-replacement-text p {
        font-size: 17px;
    }

    .denver-roof-replacement-image-wrap {
        width: 360px;
    }
}

@media (max-width: 575px) {
    .denver-one-stop-banner-section {
        padding: 42px 18px;
    }

    .denver-one-stop-banner-content h2 {
        font-size: 27px;
    }

    .denver-roof-replacement-content {
        padding: 50px 25px 60px;
        background-size: 430px auto;
    }

    .denver-roof-replacement-text {
        padding-left: 20px;
        border-left-width: 5px;
    }

    .denver-roof-replacement-text h2 {
        font-size: 23px;
    }

    .denver-roof-replacement-text p {
        font-size: 16px;
    }

    .denver-roof-replacement-image-wrap {
        width: 92%;
    }
}


/* ===================================
   DENVER ROOF REPAIR SERVICES
====================================== */

.denver-roof-repair-services-section {
    width: 100%;
    min-height: 520px;
    background-image: url("../images/denver-2.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 50px 12% 50px 0;
    overflow: hidden;
}

.denver-roof-repair-services-card {
    width: 600px;
    background: #ffffff;
    padding: 62px 65px;
    border-left: 26px solid #ff4b1f;
    margin-top: -10px;
}

.denver-roof-repair-services-card h2 {
    color: #222222;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 26px;
    text-transform: uppercase;
}

.denver-roof-repair-services-card p {
    color: #222222;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 38px;
}

.denver-roof-repair-services-btn {
    display: inline-block;
    background: #00f531;
    color: #000000;
    padding: 13px 26px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.denver-roof-repair-services-btn:hover,
.denver-roof-repair-services-btn:focus,
.denver-roof-repair-services-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .denver-roof-repair-services-section {
        background-attachment: scroll;
        justify-content: center;
        padding: 60px 30px;
    }

    .denver-roof-repair-services-card {
        width: 90%;
        padding: 50px 45px;
        border-left-width: 18px;
    }

    .denver-roof-repair-services-card h2 {
        font-size: 32px;
    }

    .denver-roof-repair-services-card p {
        font-size: 18px;
    }
}

@media (max-width: 575px) {
    .denver-roof-repair-services-section {
        min-height: 520px;
        padding: 45px 20px;
    }

    .denver-roof-repair-services-card {
        width: 100%;
        padding: 42px 28px;
        border-left-width: 12px;
    }

    .denver-roof-repair-services-card h2 {
        font-size: 27px;
    }

    .denver-roof-repair-services-card p {
        font-size: 16px;
    }

    .denver-roof-repair-services-btn {
        width: 100%;
        text-align: center;
        padding: 16px 18px;
        font-size: 13px;
        letter-spacing: 3px;
    }
}



/* ===================================
   DENVER COMPLETE ROOF REPLACEMENT
====================================== */

.denver-complete-roof-replacement-section {
    width: 100%;
    min-height: 130px;
    background-image: url("../images/mixed-black-background.png");
    background-size: contain;
    background-position: center;
    background-repeat: repeat;
    background-attachment: scroll;
    display: flex;
    align-items: center;
    padding: 70px 15%;
}

.denver-complete-roof-replacement-content {
    max-width: 1100px;
}

.denver-complete-roof-replacement-content h2 {
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 24px;
    text-transform: uppercase;
}

.denver-complete-roof-replacement-content p {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.45;
    margin: 0;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .denver-complete-roof-replacement-section {
        min-height: auto;
        padding: 60px 8%;
    }

    .denver-complete-roof-replacement-content h2 {
        font-size: 32px;
    }

    .denver-complete-roof-replacement-content p {
        font-size: 18px;
    }
}

@media (max-width: 575px) {
    .denver-complete-roof-replacement-section {
        padding: 50px 25px;
    }

    .denver-complete-roof-replacement-content h2 {
        font-size: 27px;
    }

    .denver-complete-roof-replacement-content p {
        font-size: 16px;
    }
}


/* ===================================
   DENVER EMERGENCY ROOFING
====================================== */

.denver-emergency-roofing-section {
    width: 100%;
    min-height: 530px;
    background-image: url("../images/denver-3.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 60px 0 60px 14%;
    overflow: hidden;
}

.denver-emergency-roofing-card {
    width: 560px;
    background: #ffffff;
    padding: 52px 65px 52px;
    border-left: 26px solid #ff4b1f;
}

.denver-emergency-roofing-card h2 {
    color: #ff4b1f;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 28px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.denver-emergency-roofing-card p {
    color: #222222;
    font-size: 16px;
    line-height: 1.45;
    margin: 0 0 34px;
}

.denver-emergency-roofing-btn {
    display: inline-block;
    background: #00f531;
    color: #000000;
    padding: 13px 26px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.denver-emergency-roofing-btn:hover,
.denver-emergency-roofing-btn:focus,
.denver-emergency-roofing-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .denver-emergency-roofing-section {
        background-attachment: scroll;
        justify-content: center;
        padding: 60px 30px;
    }

    .denver-emergency-roofing-card {
        width: 90%;
        padding: 50px 45px;
        border-left-width: 18px;
    }

    .denver-emergency-roofing-card h2 {
        font-size: 32px;
    }

    .denver-emergency-roofing-card p {
        font-size: 18px;
    }
}

@media (max-width: 575px) {
    .denver-emergency-roofing-section {
        min-height: 520px;
        padding: 45px 20px;
    }

    .denver-emergency-roofing-card {
        width: 100%;
        padding: 42px 28px;
        border-left-width: 12px;
    }

    .denver-emergency-roofing-card h2 {
        font-size: 27px;
    }

    .denver-emergency-roofing-card p {
        font-size: 16px;
    }

    .denver-emergency-roofing-btn {
        width: 100%;
        text-align: center;
        padding: 16px 18px;
        font-size: 13px;
        letter-spacing: 3px;
    }
}


/* ===================================
   DENVER TOP RATED ROOFERS
====================================== */

.denver-top-rated-roofers-section {
    width: 100%;
    min-height: 290px;
    background-image: url("../images/mixed-black-background.png");
    background-size: contain;
    background-position: center;
    background-repeat: repeat;
    background-attachment: scroll;
    display: flex;
    align-items: center;
    padding: 70px 15%;
}

.denver-top-rated-roofers-content {
    max-width: 1450px;
}

.denver-top-rated-roofers-content h2 {
    color: #ffffff;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 24px;
    text-transform: uppercase;
}

.denver-top-rated-roofers-content p {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.45;
    margin: 0;
}


/* ===================================
   DENVER GET STARTED CTA
====================================== */

.denver-get-started-services-section {
    width: 100%;
    background: #ff4b1f;
    padding: 60px 20px 60px;
    text-align: center;
}

.denver-get-started-services-content {
    max-width: 1100px;
    margin: 0 auto;
}

.denver-get-started-services-content h2 {
    color: #ffffff;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 28px;
    text-transform: uppercase;
}

.denver-get-started-services-content p {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.45;
    max-width: 1000px;
    margin: 0 auto 42px;
}

.denver-get-started-services-btn {
    display: inline-block;
    background: #00f531;
    color: #000000;
    padding: 13px 26px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.denver-get-started-services-btn:hover,
.denver-get-started-services-btn:focus,
.denver-get-started-services-btn:active {
    background: #ff4b1f;
    color: #ffffff;
    box-shadow: inset 0 0 0 2px #ffffff;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .denver-top-rated-roofers-section {
        min-height: auto;
        padding: 60px 8%;
    }

    .denver-top-rated-roofers-content h2 {
        font-size: 32px;
    }

    .denver-top-rated-roofers-content p {
        font-size: 18px;
    }

    .denver-get-started-services-content h2 {
        font-size: 38px;
    }

    .denver-get-started-services-content p {
        font-size: 18px;
    }
}

@media (max-width: 575px) {
    .denver-top-rated-roofers-section {
        padding: 50px 25px;
    }

    .denver-top-rated-roofers-content h2 {
        font-size: 27px;
    }

    .denver-top-rated-roofers-content p {
        font-size: 16px;
    }

    .denver-get-started-services-section {
        padding: 65px 22px 75px;
    }

    .denver-get-started-services-content h2 {
        font-size: 30px;
    }

    .denver-get-started-services-content p {
        font-size: 16px;
    }

    .denver-get-started-services-btn {
        width: 100%;
        text-align: center;
        padding: 16px 18px;
        font-size: 13px;
        letter-spacing: 3px;
    }
}


/* ===================================
   DENVER SERVICES CHECK SECTION
====================================== */

.denver-services-check-section {
    width: 100%;
    background: #ffffff;
    padding: 45px 20px 28px;
    text-align: center;
    border-bottom: 8px solid #00f531;
}

.denver-services-check-section h2 {
    color: #555555;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 1px;
    margin: 0 0 58px;
    text-transform: uppercase;
}

.denver-services-check-wrap {
    max-width: 1200px;
    margin: 0 auto 58px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 80px;
}

.denver-services-check-item {
    width: 190px;
    text-align: center;
}

.denver-services-check-item img {
    width: 120px;
    height: auto;
    display: block;
    margin: 0 auto 35px;
}

.denver-services-check-item h3 {
    color: #555555;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
}

.denver-services-check-section h4 {
    color: #ff4b1f;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
}


/* ===================================
   DENVER SERVICES IMAGE LINKS
====================================== */

.denver-services-image-links-section {
    width: 100%;
    padding: 55px 40px;
    background-image: url("../images/dark-carbon-fiber.png");
    background-size: auto;
    background-position: center;
    background-repeat: repeat;
    background-attachment: scroll;
    border-bottom: 6px solid #00f531;
}

.denver-services-image-links-grid {
    max-width: 1650px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 85px;
}

.denver-services-image-links-card {
    display: block;
    width: 520px;
    text-decoration: none;
    transition: 0.3s ease;
}

.denver-services-image-links-card img {
    width: 100%;
    display: block;
    border: 3px solid #ffffff;
}

.denver-services-image-links-card:hover {
    transform: translateY(-8px);
}

.denver-services-image-links-card:hover img {
    box-shadow: 0 0 25px rgba(0, 245, 49, 0.45);
}


/* RESPONSIVE */

@media (max-width: 1200px) {
    .denver-services-image-links-grid {
        gap: 40px;
    }

    .denver-services-image-links-card {
        width: 31%;
    }
}

@media (max-width: 991px) {
    .denver-services-check-section h2 {
        font-size: 38px;
    }

    .denver-services-check-wrap {
        flex-wrap: wrap;
        gap: 50px 35px;
    }

    .denver-services-check-item {
        width: 230px;
    }

    .denver-services-check-section h4 {
        font-size: 34px;
    }

    .denver-services-image-links-grid {
        flex-direction: column;
        gap: 35px;
    }

    .denver-services-image-links-card {
        width: 90%;
        max-width: 700px;
    }
}

@media (max-width: 575px) {
    .denver-services-check-section {
        padding: 50px 20px 25px;
    }

    .denver-services-check-section h2 {
        font-size: 30px;
    }

    .denver-services-check-wrap {
        gap: 45px;
        margin-bottom: 45px;
    }

    .denver-services-check-item {
        width: 100%;
    }

    .denver-services-check-item img {
        width: 115px;
        margin-bottom: 25px;
    }

    .denver-services-check-item h3 {
        font-size: 23px;
    }

    .denver-services-check-section h4 {
        font-size: 29px;
    }

    .denver-services-image-links-section {
        padding: 50px 20px;
    }

    .denver-services-image-links-card {
        width: 100%;
    }
}



/* ===================================
   FORT COLLINS LOCATION HERO SECTION HTML PAGE
====================================== */

.fort-collins-location-hero-section {
    width: 100%;
    height: 580px;
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.08),
        rgba(0, 0, 0, 0.08)
    ), url("../images/fort-collins-hero.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fort-collins-location-hero-content {
    text-align: center;
    margin-top: 95px;
}

.fort-collins-location-hero-content h1 {
    color: #ffffff;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.fort-collins-location-hero-content h2 {
    color: #ffffff;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 30px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.fort-collins-location-hero-btn {
    display: inline-block;
    background: #ff4b1f;
    color: #ffffff;
    text-decoration: none;
    padding: 13px 26px;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.fort-collins-location-hero-btn:hover,
.fort-collins-location-hero-btn:focus,
.fort-collins-location-hero-btn:active {
    background: #00f531;
    color: #ffffff;
}


/* ===================================
   FORT COLLINS LOCATION BADGES SECTION
====================================== */

.fort-collins-location-badges-section {
    width: 100%;
    background: #202020;
    padding: 50px 20px 50px;
}

.fort-collins-location-badges-wrap {
    max-width: 1220px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 42px;
}

.fort-collins-location-badges-wrap img {
    width: 148px;
    height: auto;
    display: block;
    opacity: 0.95;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .fort-collins-location-hero-section {
        height: 460px;
        background-attachment: scroll;
    }

    .fort-collins-location-hero-content {
        margin-top: 45px;
        padding: 0 20px;
    }

    .fort-collins-location-hero-content h1 {
        font-size: 40px;
    }

    .fort-collins-location-hero-content h2 {
        font-size: 25px;
    }

    .fort-collins-location-hero-btn {
        padding: 15px 30px;
        font-size: 14px;
        letter-spacing: 3px;
    }

    .fort-collins-location-badges-wrap {
        flex-wrap: wrap;
        gap: 35px;
    }

    .fort-collins-location-badges-wrap img {
        width: 115px;
    }
}

@media (max-width: 575px) {
    .fort-collins-location-hero-section {
        height: 390px;
    }

    .fort-collins-location-hero-content h1 {
        font-size: 33px;
    }

    .fort-collins-location-hero-content h2 {
        font-size: 20px;
    }

    .fort-collins-location-badges-section {
        padding: 38px 20px;
    }

    .fort-collins-location-badges-wrap {
        gap: 26px;
    }

    .fort-collins-location-badges-wrap img {
        width: 95px;
    }
}



/* ===================================
   FORT COLLINS ONE STOP SHOP
====================================== */

.fort-collins-one-stop-section {
    width: 100%;
    background-image: url("../images/champion-watermark.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #f2f2f2;
}

.fort-collins-one-stop-heading {
    background: #ff4b1f;
    text-align: center;
    padding: 42px 20px;
}

.fort-collins-one-stop-heading h2 {
    color: #ffffff;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 0;
}

.fort-collins-one-stop-content {
    max-width: 1150px;
    margin: 0 auto;
    padding: 65px 40px 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
}

.fort-collins-one-stop-left {
    flex: 1;
    display: flex;
    gap: 30px;
}

.fort-collins-one-stop-line {
    width: 8px;
    min-width: 8px;
    background: #707070;
}

.fort-collins-one-stop-text h3 {
    color: #ff4b1f;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0 0 28px;
}

.fort-collins-one-stop-text p {
    color: #6a6a6a;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 18px;
}

.fort-collins-one-stop-btn {
    display: inline-block;
    margin-top: 25px;
    padding: 13px 26px;
    background: #2b2b2b;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    transition: 0.3s ease;
}

.fort-collins-one-stop-btn:hover,
.fort-collins-one-stop-btn:focus,
.fort-collins-one-stop-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}

.fort-collins-one-stop-right {
    position: relative;
    width: 380px;
    flex-shrink: 0;
}

.fort-collins-one-stop-right img {
    position: relative;
    width: 100%;
    display: block;
    z-index: 2;
}


/* RESPONSIVE */

@media (max-width: 991px) {

    .fort-collins-one-stop-content {
        flex-direction: column;
        padding: 70px 25px;
    }

    .fort-collins-one-stop-right {
        width: 100%;
        max-width: 420px;
    }

    .fort-collins-one-stop-heading h2 {
        font-size: 32px;
    }

    .fort-collins-one-stop-text h3 {
        font-size: 26px;
    }
}

@media (max-width: 575px) {

    .fort-collins-one-stop-content {
        padding: 55px 20px;
    }

    .fort-collins-one-stop-left {
        gap: 20px;
    }

    .fort-collins-one-stop-heading h2 {
        font-size: 24px;
    }

    .fort-collins-one-stop-text h3 {
        font-size: 22px;
    }

    .fort-collins-one-stop-text p {
        font-size: 15px;
    }

    .fort-collins-one-stop-orange-box {
        width: 220px;
        height: 220px;
        right: -20px;
        bottom: -20px;
    }
}



/* ===================================
   FORT COLLINS HAIL DAMAGE REPAIR
====================================== */

.fort-collins-hail-damage-section {
    width: 100%;
    min-height: 690px;
    background-image: url("../images/fort-collins-2.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    padding: 60px 12% 60px 0;
    overflow: hidden;
}

.fort-collins-hail-damage-card {
    width: 600px;
    background: #ffffff;
    padding: 55px 58px 55px;
    border-left: 26px solid #ff4b1f;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.fort-collins-hail-damage-card h2 {
    color: #222222;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.15;
    margin: 0 0 22px;
    text-transform: uppercase;
}

.fort-collins-hail-damage-card h3 {
    color: #222222;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
    margin: 0 0 18px;
    text-transform: uppercase;
}

.fort-collins-hail-damage-card p {
    color: #222222;
    font-size: 15.5px;
    line-height: 1.55;
    margin: 0 0 34px;
}

.fort-collins-hail-damage-btn {
    display: inline-block;
    background: #00f531;
    color: #000000;
    padding: 13px 26px;
    text-decoration: none;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.fort-collins-hail-damage-btn:hover,
.fort-collins-hail-damage-btn:focus,
.fort-collins-hail-damage-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .fort-collins-hail-damage-section {
        background-attachment: scroll;
        justify-content: center;
        padding: 60px 30px;
    }

    .fort-collins-hail-damage-card {
        width: 90%;
        padding: 50px 45px;
        border-left-width: 18px;
    }

    .fort-collins-hail-damage-card h2 {
        font-size: 30px;
    }

    .fort-collins-hail-damage-card h3 {
        font-size: 17px;
    }

    .fort-collins-hail-damage-card p {
        font-size: 15px;
    }
}

@media (max-width: 575px) {
    .fort-collins-hail-damage-section {
        min-height: 560px;
        padding: 45px 20px;
    }

    .fort-collins-hail-damage-card {
        width: 100%;
        padding: 40px 28px;
        border-left-width: 12px;
    }

    .fort-collins-hail-damage-card h2 {
        font-size: 26px;
    }

    .fort-collins-hail-damage-card h3 {
        font-size: 15px;
    }

    .fort-collins-hail-damage-card p {
        font-size: 14px;
    }

    .fort-collins-hail-damage-btn {
        width: 100%;
        text-align: center;
        padding: 16px 18px;
        font-size: 13px;
        letter-spacing: 3px;
    }
}



/* ===================================
   FORT COLLINS SERVICES CHECK SECTION
====================================== */

.fort-collins-services-check-section {
    width: 100%;
    background: #ffffff;
    padding: 45px 20px 28px;
    text-align: center;
    border-bottom: 8px solid #00f531;
}

.fort-collins-services-check-section h2 {
    color: #555555;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 1px;
    margin: 0 0 58px;
    text-transform: uppercase;
}

.fort-collins-services-check-wrap {
    max-width: 1200px;
    margin: 0 auto 58px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 80px;
}

.fort-collins-services-check-item {
    width: 190px;
    text-align: center;
}

.fort-collins-services-check-item img {
    width: 120px;
    height: auto;
    display: block;
    margin: 0 auto 35px;
}

.fort-collins-services-check-item h3 {
    color: #555555;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
}

.fort-collins-services-check-section h4 {
    color: #ff4b1f;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
}


/* ===================================
   FORT COLLINS SERVICES IMAGE LINKS
====================================== */

.fort-collins-services-image-links-section {
    width: 100%;
    padding: 55px 40px;
    background-image: url("../images/dark-carbon-fiber.png");
    background-size: auto;
    background-position: center;
    background-repeat: repeat;
    background-attachment: scroll;
    border-bottom: 6px solid #00f531;
}

.fort-collins-services-image-links-grid {
    max-width: 1650px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 85px;
}

.fort-collins-services-image-links-card {
    display: block;
    width: 520px;
    text-decoration: none;
    transition: 0.3s ease;
}

.fort-collins-services-image-links-card img {
    width: 100%;
    display: block;
    border: 3px solid #ffffff;
}

.fort-collins-services-image-links-card:hover {
    transform: translateY(-8px);
}

.fort-collins-services-image-links-card:hover img {
    box-shadow: 0 0 25px rgba(0, 245, 49, 0.45);
}


/* ===================================
   FORT COLLINS ROOFING SERVICE LINKS
====================================== */

.fort-collins-roofing-service-links-section {
    width: 100%;
    background-image: url("../images/mixed-black-background.png");
    background-size: 350px auto;
    background-position: center;
    background-repeat: repeat;
    padding: 80px 15% 70px;
}

.fort-collins-roofing-service-links-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 80px;
}

.fort-collins-roofing-service-links-text {
    width: 46%;
}

.fort-collins-roofing-service-links-text h2 {
    color: #ffffff;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 28px;
    text-transform: uppercase;
}

.fort-collins-roofing-service-links-text p {
    color: #ffffff;
    font-size: 17px;
    line-height: 1.4;
    margin: 0 0 35px;
}

.fort-collins-roofing-service-links-buttons {
    width: 48%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.fort-collins-roofing-service-links-buttons a {
    display: block;
    width: 100%;
    background: #ff4b1f;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    padding: 15px 25px;
    font-size: 16px;
    line-height: 1.2;
    border-radius: 4px;
    transition: 0.3s ease;
}

.fort-collins-roofing-service-links-buttons a:hover,
.fort-collins-roofing-service-links-buttons a:focus,
.fort-collins-roofing-service-links-buttons a:active {
    background: #555555;
    color: #ffffff;
}

.fort-collins-roofing-service-divider {
    width: 100%;
    height: 1px;
    background: #777777;
    margin: 12px 0 62px;
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .fort-collins-roofing-service-links-section {
        padding: 60px 8%;
    }

    .fort-collins-roofing-service-links-row {
        flex-direction: column;
        gap: 35px;
    }

    .fort-collins-roofing-service-links-text,
    .fort-collins-roofing-service-links-buttons {
        width: 100%;
    }

    .fort-collins-roofing-service-links-text h2 {
        font-size: 32px;
    }

    .fort-collins-roofing-service-links-text p {
        font-size: 18px;
    }
}

@media (max-width: 575px) {

    .fort-collins-roofing-service-links-section {
        padding: 50px 25px;
    }

    .fort-collins-roofing-service-links-text h2 {
        font-size: 27px;
    }

    .fort-collins-roofing-service-links-text p {
        font-size: 16px;
    }

    .fort-collins-roofing-service-links-buttons a {
        font-size: 16px;
        padding: 15px 18px;
    }
}



/* ===================================
   GREELEY LOCATION HERO SECTION HTML PAGE
====================================== */

.greeley-location-hero-section {
    width: 100%;
    height: 590px;
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.05),
        rgba(0, 0, 0, 0.05)
    ), url("../images/greeley-hero.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.greeley-location-hero-content {
    text-align: center;
    margin-top: 90px;
    padding: 0 20px;
}

.greeley-location-hero-content h1 {
    color: #ffffff;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    margin: 0 0 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.greeley-location-hero-content h2 {
    color: #ffffff;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.15;
    margin: 0 0 30px;
    text-transform: uppercase;
}

.greeley-location-hero-btn {
    display: inline-block;
    background: #ff4b1f;
    color: #ffffff;
    text-decoration: none;
    padding: 13px 26px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.greeley-location-hero-btn:hover,
.greeley-location-hero-btn:focus,
.greeley-location-hero-btn:active {
    background: #00f531;
    color: #ffffff;
}


/* ===================================
   GREELEY LOCATION BADGES SECTION
====================================== */

.greeley-location-badges-section {
    width: 100%;
    background: #202020;
    padding: 50px 30px 50px;
}

.greeley-location-badges-wrap {
    max-width: 1220px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 45px;
}

.greeley-location-badges-wrap img {
    width: 138px;
    height: auto;
    display: block;
    opacity: 0.95;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .greeley-location-hero-section {
        height: 480px;
        background-attachment: scroll;
    }

    .greeley-location-hero-content {
        margin-top: 45px;
    }

    .greeley-location-hero-content h1 {
        font-size: 40px;
    }

    .greeley-location-hero-content h2 {
        font-size: 24px;
    }

    .greeley-location-hero-btn {
        padding: 15px 30px;
        font-size: 14px;
        letter-spacing: 3px;
    }

    .greeley-location-badges-wrap {
        flex-wrap: wrap;
        gap: 35px;
    }

    .greeley-location-badges-wrap img {
        width: 115px;
    }
}

@media (max-width: 575px) {
    .greeley-location-hero-section {
        height: 410px;
    }

    .greeley-location-hero-content h1 {
        font-size: 33px;
    }

    .greeley-location-hero-content h2 {
        font-size: 19px;
    }

    .greeley-location-badges-section {
        padding: 38px 20px;
    }

    .greeley-location-badges-wrap {
        gap: 26px;
    }

    .greeley-location-badges-wrap img {
        width: 95px;
    }
}



/* ===================================
   GREELEY ONE STOP BANNER
====================================== */

.greeley-one-stop-banner-section {
    width: 100%;
    background: #ff4b1f;
    padding: 50px 20px 50px;
    text-align: center;
}

.greeley-one-stop-banner-content {
    max-width: 1200px;
    margin: 0 auto;
}

.greeley-one-stop-banner-content h2 {
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 2px;
    margin: 0;
    text-transform: uppercase;
}


/* ===================================
   GREELEY ROOF REPLACEMENT SECTION
====================================== */

.greeley-roof-replacement-section {
    width: 100%;
    padding: 60px 40px 60px;
    background-color: #efefef;
    background-image: url("../images/champion-watermark.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    overflow: hidden;
}

.greeley-roof-replacement-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 70px;
}

.greeley-roof-replacement-left-border {
    width: 7px;
    min-height: 440px;
    background: #666666;
    flex-shrink: 0;
}

.greeley-roof-replacement-content {
    flex: 1;
    max-width: 850px;
}

.greeley-roof-replacement-content h2 {
    color: #ff4b1f;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 1px;
    margin: 0 0 26px;
    text-transform: uppercase;
    margin-left: -35px;
}

.greeley-roof-replacement-content p {
    color: #777777;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 38px;
    margin-left: -35px;
}

.greeley-roof-replacement-button {
    display: inline-block;
    background: #333333;
    color: #ffffff;
    padding: 13px 26px;
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: 0.3s ease;
    margin-left: -35px;
}

.greeley-roof-replacement-button:hover,
.greeley-roof-replacement-button:focus,
.greeley-roof-replacement-button:active {
    background: #ff4b1f;
    color: #ffffff;
}

.greeley-roof-replacement-image-area {
    position: relative;
    width: 330px;
    flex-shrink: 0;
}

.greeley-roof-replacement-image-area img {
    position: relative;
    z-index: 2;
    width: 100%;
    display: block;
    margin-left: -30px;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .greeley-one-stop-banner-content h2 {
        font-size: 34px;
    }

    .greeley-roof-replacement-section {
        padding: 65px 7% 70px;
        background-attachment: scroll;
        background-size: 430px auto;
    }

    .greeley-roof-replacement-container {
        flex-direction: column;
        gap: 55px;
    }

    .greeley-roof-replacement-left-border {
        display: none;
    }

    .greeley-roof-replacement-content {
        max-width: 100%;
    }

    .greeley-roof-replacement-content h2 {
        font-size: 27px;
    }

    .greeley-roof-replacement-content p {
        font-size: 17px;
    }

    .greeley-roof-replacement-image-area {
        width: 360px;
    }
}

@media (max-width: 575px) {
    .greeley-one-stop-banner-section {
        padding: 42px 18px;
    }

    .greeley-one-stop-banner-content h2 {
        font-size: 27px;
    }

    .greeley-roof-replacement-section {
        padding: 50px 25px 60px;
        background-size: 380px auto;
    }

    .greeley-roof-replacement-content h2 {
        font-size: 23px;
    }

    .greeley-roof-replacement-content p {
        font-size: 16px;
    }

    .greeley-roof-replacement-button {
        width: 100%;
        text-align: center;
    }

    .greeley-roof-replacement-image-area {
        width: 92%;
    }
}


/* ===================================
   GREELEY QUALITY PRODUCTS SECTION
====================================== */

.greeley-quality-products-section {
    width: 100%;
    min-height: 720px;
    background-image: url("../images/greeley-5.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    padding: 50px 12% 50px 0;
    overflow: hidden;
}

.greeley-quality-products-card {
    width: 650px;
    background: #ffffff;
    padding: 55px 62px 55px;
    border-left: 26px solid #ff4b1f;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.greeley-quality-products-card h3 {
    color: #ff4b1f;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 20px;
    text-transform: uppercase;
}

.greeley-quality-products-card h2 {
    color: #333333;
    font-size: 38px;
    font-weight: 750;
    line-height: 1.1;
    margin: 0 0 28px;
    text-transform: uppercase;
}

.greeley-quality-products-card p {
    color: #222222;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 36px;
}

.greeley-quality-products-btn {
    display: inline-block;
    background: #00f531;
    color: #000000;
    padding: 13px 26px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.greeley-quality-products-btn:hover,
.greeley-quality-products-btn:focus,
.greeley-quality-products-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .greeley-quality-products-section {
        background-attachment: scroll;
        justify-content: center;
        padding: 60px 30px;
    }

    .greeley-quality-products-card {
        width: 90%;
        padding: 50px 45px;
        border-left-width: 18px;
    }

    .greeley-quality-products-card h3 {
        font-size: 24px;
    }

    .greeley-quality-products-card h2 {
        font-size: 34px;
    }

    .greeley-quality-products-card p {
        font-size: 16px;
    }
}

@media (max-width: 575px) {
    .greeley-quality-products-section {
        min-height: 560px;
        padding: 45px 20px;
    }

    .greeley-quality-products-card {
        width: 100%;
        padding: 40px 28px;
        border-left-width: 12px;
    }

    .greeley-quality-products-card h3 {
        font-size: 20px;
    }

    .greeley-quality-products-card h2 {
        font-size: 29px;
    }

    .greeley-quality-products-card p {
        font-size: 14px;
    }

    .greeley-quality-products-btn {
        width: 100%;
        text-align: center;
        padding: 16px 18px;
        font-size: 13px;
        letter-spacing: 3px;
    }
}


/* ===================================
   GREELEY SERVICES CHECK SECTION
====================================== */

.greeley-services-check-section {
    width: 100%;
    background: #ffffff;
    padding: 45px 20px 28px;
    text-align: center;
    border-bottom: 8px solid #00f531;
}

.greeley-services-check-section h2 {
    color: #555555;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 1px;
    margin: 0 0 58px;
    text-transform: uppercase;
}

.greeley-services-check-wrap {
    max-width: 1200px;
    margin: 0 auto 58px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 80px;
}

.greeley-services-check-item {
    width: 190px;
    text-align: center;
}

.greeley-services-check-item img {
    width: 120px;
    height: auto;
    display: block;
    margin: 0 auto 35px;
}

.greeley-services-check-item h3 {
    color: #555555;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
}

.greeley-services-check-section h4 {
    color: #ff4b1f;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
}


/* ===================================
   GREELEY SERVICES IMAGE LINKS
====================================== */

.greeley-services-image-links-section {
    width: 100%;
    padding: 55px 40px;
    background-image: url("../images/dark-carbon-fiber.png");
    background-size: auto;
    background-position: center;
    background-repeat: repeat;
    background-attachment: scroll;
    border-bottom: 6px solid #00f531;
}

.greeley-services-image-links-grid {
    max-width: 1650px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 85px;
}

.greeley-services-image-links-card {
    display: block;
    width: 520px;
    text-decoration: none;
    transition: 0.3s ease;
}

.greeley-services-image-links-card img {
    width: 100%;
    display: block;
    border: 3px solid #ffffff;
}

.greeley-services-image-links-card:hover {
    transform: translateY(-8px);
}

.greeley-services-image-links-card:hover img {
    box-shadow: 0 0 25px rgba(0, 245, 49, 0.45);
}


/* RESPONSIVE */

@media (max-width: 1200px) {
    .greeley-services-image-links-grid {
        gap: 40px;
    }

    .greeley-services-image-links-card {
        width: 31%;
    }
}

@media (max-width: 991px) {
    .greeley-services-check-section h2 {
        font-size: 38px;
    }

    .greeley-services-check-wrap {
        flex-wrap: wrap;
        gap: 50px 35px;
    }

    .greeley-services-check-item {
        width: 230px;
    }

    .greeley-services-check-section h4 {
        font-size: 34px;
    }

    .greeley-services-image-links-grid {
        flex-direction: column;
        gap: 35px;
    }

    .greeley-services-image-links-card {
        width: 90%;
        max-width: 700px;
    }
}

@media (max-width: 575px) {
    .greeley-services-check-section {
        padding: 50px 20px 25px;
    }

    .greeley-services-check-section h2 {
        font-size: 30px;
    }

    .greeley-services-check-wrap {
        gap: 45px;
        margin-bottom: 45px;
    }

    .greeley-services-check-item {
        width: 100%;
    }

    .greeley-services-check-item img {
        width: 115px;
        margin-bottom: 25px;
    }

    .greeley-services-check-item h3 {
        font-size: 23px;
    }

    .greeley-services-check-section h4 {
        font-size: 29px;
    }

    .greeley-services-image-links-section {
        padding: 50px 20px;
    }

    .greeley-services-image-links-card {
        width: 100%;
    }
}



/* ===================================
   GREELEY ROOFING DETAILS SECTION
====================================== */

.greeley-roofing-details-section {
    width: 100%;
    background-image: url("../images/mixed-black-background.png");
    background-size: 350px auto;
    background-position: center;
    background-repeat: repeat;
    background-attachment: scroll;
    padding: 75px 15% 75px;
}


/* ROW 1 */

.greeley-hail-repair-row,
.greeley-roof-repairs-row,
.greeley-roof-replacement-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 85px;
}

.greeley-hail-repair-image-wrap,
.greeley-roof-repairs-image-wrap,
.greeley-roof-replacement-info-image-wrap {
    position: relative;
    width: 400px;
    flex-shrink: 0;
}

.greeley-hail-repair-image-wrap img,
.greeley-roof-repairs-image-wrap img,
.greeley-roof-replacement-info-image-wrap img {
    position: relative;
    z-index: 2;
    width: 100%;
    display: block;


}

.greeley-hail-repair-text,
.greeley-roof-repairs-text,
.greeley-roof-replacement-info-text {
    flex: 1;
    max-width: 680px;
}

.greeley-hail-repair-text h2,
.greeley-roof-repairs-text h2,
.greeley-roof-replacement-info-text h2 {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 24px;
    text-transform: uppercase;
}

.greeley-hail-repair-text p,
.greeley-roof-repairs-text p,
.greeley-roof-replacement-info-text p {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.45;
    margin: 0 0 22px;
}

.greeley-hail-repair-text span,
.greeley-roof-repairs-text span {
    color: #ff4b1f;
}


/* DIVIDER */

.greeley-roofing-details-divider {
    width: 100%;
    height: 1px;
    background: #777777;
    margin: 45px 0;
}


.greeley-roof-repairs-btn {
    display: inline-block;
    margin-top: 22px;
    background: #00f531;
    color: #000000;
    padding: 13px 26px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.greeley-roof-repairs-btn:hover,
.greeley-roof-repairs-btn:focus,
.greeley-roof-repairs-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}


/* ROW 3 */

.greeley-roof-replacement-row {
    align-items: center;
}


/* CTA */

.greeley-roof-replacement-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;

    margin-top: 85px;
    padding-top: 50px;
    border-top: 1px solid #777777;
}

.greeley-roof-replacement-cta h2 {
    color: #ffffff;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 18px;
    text-transform: uppercase;
}

.greeley-roof-replacement-cta p {
    color: #ffffff;
    font-size: 20px;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

.greeley-roof-replacement-cta-btn {
    display: inline-block;
    background: #ff4b1f;
    color: #ffffff;
    padding: 13px 26px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: 0.3s ease;
    white-space: nowrap;
}

.greeley-roof-replacement-cta-btn:hover,
.greeley-roof-replacement-cta-btn:focus,
.greeley-roof-replacement-cta-btn:active {
    background: #00f531;
    color: #000000;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .greeley-roofing-details-section {
        padding: 60px 8%;
    }

    .greeley-hail-repair-row,
    .greeley-roof-repairs-row,
    .greeley-roof-replacement-row,
    .greeley-roof-replacement-cta {
        flex-direction: column;
        gap: 50px;
    }

    .greeley-roof-repairs-row {
        flex-direction: column-reverse;
    }

    .greeley-hail-repair-image-wrap,
    .greeley-roof-repairs-image-wrap,
    .greeley-roof-replacement-info-image-wrap {
        width: 90%;
        max-width: 500px;
    }

    .greeley-hail-repair-text,
    .greeley-roof-repairs-text,
    .greeley-roof-replacement-info-text {
        max-width: 100%;
    }

    .greeley-roof-replacement-cta {
        align-items: flex-start;
    }

    .greeley-roof-replacement-cta-btn {
        white-space: normal;
        text-align: center;
    }
}

@media (max-width: 575px) {
    .greeley-roofing-details-section {
        padding: 50px 25px;
    }

    .greeley-hail-repair-text h2,
    .greeley-roof-repairs-text h2,
    .greeley-roof-replacement-info-text h2,
    .greeley-roof-replacement-cta h2 {
        font-size: 27px;
    }

    .greeley-hail-repair-text p,
    .greeley-roof-repairs-text p,
    .greeley-roof-replacement-info-text p {
        font-size: 16px;
    }

    .greeley-roof-replacement-cta p {
        font-size: 19px;
    }

    .greeley-roof-repairs-btn,
    .greeley-roof-replacement-cta-btn {
        width: 100%;
        text-align: center;
        padding: 16px 18px;
        font-size: 13px;
        letter-spacing: 3px;
    }

    .greeley-hail-repair-orange-box,
    .greeley-roof-repairs-green-box,
    .greeley-roof-replacement-info-orange-box {
        width: 80%;
        height: 75%;
        bottom: -28px;
    }
}


/* ===================================
   GREELEY ROOFING COMPANY CTA
====================================== */

.greeley-roofing-company-cta-section {
    width: 100%;
    min-height: 320px;
    background-color: #f7f7f7;
    background-image: url("../images/champion-watermark.png");
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    border-bottom: 6px solid #ff4b1f;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 55px 20px;
    text-align: center;
}

.greeley-roofing-company-cta-content {
    max-width: 1150px;
    margin: 0 auto;
}

.greeley-roofing-company-cta-content h2 {
    color: #222222;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 24px;
    text-transform: uppercase;
}

.greeley-roofing-company-cta-content p {
    color: #222222;
    font-size: 20px;
    line-height: 1.45;
    margin: 0 auto 42px;
    max-width: 1050px;
}

.greeley-roofing-company-cta-content p a {
    color: #ff4b1f;
    text-decoration: none;
}

.greeley-roofing-company-cta-content p a:hover {
    text-decoration: underline;
}

.greeley-roofing-company-cta-btn {
    display: inline-block;
    background: #00f531;
    color: #000000;
    padding: 13px 26px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.greeley-roofing-company-cta-btn:hover,
.greeley-roofing-company-cta-btn:focus,
.greeley-roofing-company-cta-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}


/* RESPONSIVE */

@media (max-width: 575px) {
    .greeley-roofing-company-cta-section {
        min-height: 360px;
        padding: 60px 20px;
        background-attachment: scroll;
        background-size: 420px auto;
    }

    .greeley-roofing-company-cta-content h2 {
        font-size: 28px;
    }

    .greeley-roofing-company-cta-content p {
        font-size: 16px;
    }

    .greeley-roofing-company-cta-btn {
        width: 100%;
        padding: 16px 18px;
        font-size: 13px;
        letter-spacing: 3px;
    }
}


/* =======================================
   LONGMONT LOCATION HERO SECTION HTML PAGE
========================================= */

.longmont-location-hero-section {
    width: 100%;
    height: 520px;
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.02),
        rgba(0, 0, 0, 0.02)
    ), url("../images/longmont-hero.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.longmont-location-hero-content {
    text-align: center;
    margin-top: 90px;
    padding: 0 20px;
}

.longmont-location-hero-content h1 {
    color: #ffffff;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.longmont-location-hero-btn {
    display: inline-block;
    background: #ff4b1f;
    color: #ffffff;
    text-decoration: none;
    padding: 13px 26px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.longmont-location-hero-btn:hover,
.longmont-location-hero-btn:focus,
.longmont-location-hero-btn:active {
    background: #00f531;
    color: #ffffff;
}


/* ===================================
   LONGMONT LOCATION BADGES SECTION
====================================== */

.longmont-location-badges-section {
    width: 100%;
    background: #202020;
    padding: 50px 30px 50px;
}

.longmont-location-badges-wrap {
    max-width: 1220px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 42px;
}

.longmont-location-badges-wrap img {
    width: 148px;
    height: auto;
    display: block;
    opacity: 0.95;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .longmont-location-hero-section {
        height: 460px;
        background-attachment: scroll;
    }

    .longmont-location-hero-content {
        margin-top: 45px;
    }

    .longmont-location-hero-content h1 {
        font-size: 40px;
    }

    .longmont-location-hero-btn {
        padding: 15px 30px;
        font-size: 14px;
        letter-spacing: 3px;
    }

    .longmont-location-badges-wrap {
        flex-wrap: wrap;
        gap: 35px;
    }

    .longmont-location-badges-wrap img {
        width: 115px;
    }
}

@media (max-width: 575px) {
    .longmont-location-hero-section {
        height: 390px;
    }

    .longmont-location-hero-content h1 {
        font-size: 33px;
    }

    .longmont-location-badges-section {
        padding: 38px 20px;
    }

    .longmont-location-badges-wrap {
        gap: 26px;
    }

    .longmont-location-badges-wrap img {
        width: 95px;
    }
}



/* ===================================
   LONGMONT ROOFING INTRO SECTION
====================================== */

.longmont-roofing-intro-section {
    width: 100%;
    background-color: #efefef;
    background-image: url("../images/champion-watermark.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


/* ORANGE TOP BANNER */

.longmont-roofing-intro-banner {
    width: 100%;
    background: #ff4b1f;
    padding: 34px 20px;
    text-align: center;
}

.longmont-roofing-intro-banner h2 {
    color: #ffffff;
    font-size: 30px;
    font-weight: 550;
    margin: 0;
    text-transform: uppercase;
}


/* MAIN CONTENT */

.longmont-roofing-intro-content {
    max-width: 1150px;
    margin: 0 auto;
    padding: 88px 40px 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 90px;
}


/* LEFT SIDE */

.longmont-roofing-intro-left {
    flex: 1;
    display: flex;
    align-items: stretch;
}

.longmont-roofing-intro-line {
    width: 60px;
    background: #666666;
    margin-right: 28px;
}

.longmont-roofing-intro-text h3 {
    color: #ff4b1f;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 28px;
    line-height: 1.2;
}

.longmont-roofing-intro-text p {
    color: #6a6a6a;
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 38px;
}

.longmont-roofing-intro-btn {
    display: inline-block;
    background: #333333;
    color: #ffffff;
    text-decoration: none;
    padding: 13px 26px;
    font-size: 16px;
    border-radius: 2px;
    transition: 0.3s ease;
}

.longmont-roofing-intro-btn:hover,
.longmont-roofing-intro-btn:focus,
.longmont-roofing-intro-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}


/* RIGHT SIDE */

.longmont-roofing-intro-right {
    position: relative;
    width: 380px;
    flex-shrink: 0;
}

.longmont-roofing-intro-right img {
    position: relative;
    width: 100%;
    display: block;
    z-index: 2;
    margin-left: -40px;
}


/* RESPONSIVE */

@media (max-width: 991px) {

    .longmont-roofing-intro-banner h2 {
        font-size: 28px;
    }

    .longmont-roofing-intro-content {
        flex-direction: column;
        gap: 60px;
        padding: 70px 25px;
    }

    .longmont-roofing-intro-right {
        width: 100%;
        max-width: 420px;
    }

    .longmont-roofing-intro-line {
        width: 7px;
    }

    .longmont-roofing-intro-text h3 {
        font-size: 28px;
    }

    .longmont-roofing-intro-text p {
        font-size: 17px;
    }
}

@media (max-width: 575px) {

    .longmont-roofing-intro-banner h2 {
        font-size: 22px;
        line-height: 1.4;
    }

    .longmont-roofing-intro-content {
        padding: 55px 20px;
    }

    .longmont-roofing-intro-text h3 {
        font-size: 24px;
    }

    .longmont-roofing-intro-text p {
        font-size: 16px;
        line-height: 1.6;
    }

    .longmont-roofing-intro-btn {
        width: 100%;
        text-align: center;
    }

    .longmont-roofing-intro-orange-box {
        width: 240px;
        height: 240px;
        bottom: -25px;
        right: -20px;
    }
}



/* ===================================
   LONGMONT RESIDENTIAL ROOFING SOLUTIONS
====================================== */

.longmont-residential-solutions-section {
    width: 100%;
    min-height: 620px;
    background-image: url("../images/longmont-2.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    padding: 60px 13% 60px 0;
    overflow: hidden;
}

.longmont-residential-solutions-card {
    width: 620px;
    background: #ffffff;
    padding: 50px 65px 50px;
    border-left: 26px solid #ff4b1f;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.longmont-residential-solutions-card h2 {
    color: #222222;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 28px;
    text-transform: uppercase;
}

.longmont-residential-solutions-card p {
    color: #222222;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 38px;
}

.longmont-residential-solutions-btn {
    display: inline-block;
    background: #00f531;
    color: #000000;
    padding: 13px 26px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.longmont-residential-solutions-btn:hover,
.longmont-residential-solutions-btn:focus,
.longmont-residential-solutions-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .longmont-residential-solutions-section {
        background-attachment: scroll;
        justify-content: center;
        padding: 60px 30px;
    }

    .longmont-residential-solutions-card {
        width: 90%;
        padding: 50px 45px;
        border-left-width: 18px;
    }

    .longmont-residential-solutions-card h2 {
        font-size: 30px;
    }

    .longmont-residential-solutions-card p {
        font-size: 16px;
    }
}

@media (max-width: 575px) {
    .longmont-residential-solutions-section {
        min-height: 540px;
        padding: 45px 20px;
    }

    .longmont-residential-solutions-card {
        width: 100%;
        padding: 40px 28px;
        border-left-width: 12px;
    }

    .longmont-residential-solutions-card h2 {
        font-size: 26px;
    }

    .longmont-residential-solutions-card p {
        font-size: 14px;
    }

    .longmont-residential-solutions-btn {
        width: 100%;
        text-align: center;
        padding: 16px 18px;
        font-size: 13px;
        letter-spacing: 3px;
    }
}



/* ===================================
   LONGMONT COMMERCIAL ROOFING SOLUTIONS
====================================== */

.longmont-commercial-solutions-section {
    width: 100%;
    min-height: 210px;
    background-image: url("../images/mixed-black-background.png");
    background-size: contain;
    background-position: center center;
    background-repeat: repeat;
    background-attachment: scroll;
    display: flex;
    align-items: center;
    padding: 70px 15%;
}

.longmont-commercial-solutions-content {
    max-width: 1120px;
}

.longmont-commercial-solutions-content h2 {
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 26px;
    text-transform: uppercase;
}

.longmont-commercial-solutions-content p {
    color: #ffffff;
    font-size: 17px;
    line-height: 1.4;
    margin: 0;
    max-width: 1120px;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .longmont-commercial-solutions-section {
        min-height: 330px;
        padding: 60px 8%;
    }

    .longmont-commercial-solutions-content h2 {
        font-size: 32px;
    }

    .longmont-commercial-solutions-content p {
        font-size: 18px;
    }
}

@media (max-width: 575px) {
    .longmont-commercial-solutions-section {
        min-height: 300px;
        padding: 50px 25px;
    }

    .longmont-commercial-solutions-content h2 {
        font-size: 27px;
    }

    .longmont-commercial-solutions-content p {
        font-size: 16px;
    }
}



/* ===================================
   LONGMONT UNIQUE ROOFING UPGRADES
====================================== */

.longmont-unique-upgrades-section {
    width: 100%;
    min-height: 520px;
    background-image: url("../images/longmont-3.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    padding: 55px 0 55px 14%;
    overflow: hidden;
}

.longmont-unique-upgrades-card {
    width: 620px;
    background: #ffffff;
    padding: 48px 62px 50px;
    border-left: 26px solid #ff4b1f;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.longmont-unique-upgrades-card h2 {
    color: #ff4b1f;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 28px;
    text-transform: uppercase;
}

.longmont-unique-upgrades-card p {
    color: #222222;
    font-size: 17px;
    line-height: 1.4;
    margin: 0 0 34px;
}

.longmont-unique-upgrades-btn {
    display: inline-block;
    background: #00f531;
    color: #000000;
    padding: 13px 26px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.longmont-unique-upgrades-btn:hover,
.longmont-unique-upgrades-btn:focus,
.longmont-unique-upgrades-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}


/* ===================================
   LONGMONT ROUTINE ROOF MAINTENANCE
====================================== */

.longmont-routine-maintenance-section {
    width: 100%;
    min-height: 280px;
    background-image: url("../images/mixed-black-background.png");
    background-size: contain;
    background-position: center center;
    background-repeat: repeat;
    background-attachment: scroll;

    display: flex;
    align-items: center;

    padding: 70px 15%;
}

.longmont-routine-maintenance-content {
    max-width: 1150px;
}

.longmont-routine-maintenance-content h2 {
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 26px;
    text-transform: uppercase;
}

.longmont-routine-maintenance-content p {
    color: #ffffff;
    font-size: 17px;
    line-height: 1.4;
    margin: 0;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .longmont-unique-upgrades-section {
        background-attachment: scroll;
        justify-content: center;
        padding: 60px 30px;
    }

    .longmont-unique-upgrades-card {
        width: 90%;
        padding: 45px 42px;
        border-left-width: 18px;
    }

    .longmont-routine-maintenance-section {
        min-height: 330px;
        padding: 60px 8%;
    }

    .longmont-routine-maintenance-content h2 {
        font-size: 32px;
    }

    .longmont-routine-maintenance-content p {
        font-size: 18px;
    }
}

@media (max-width: 575px) {
    .longmont-unique-upgrades-section {
        min-height: 500px;
        padding: 45px 20px;
    }

    .longmont-unique-upgrades-card {
        width: 100%;
        padding: 38px 28px;
        border-left-width: 12px;
    }

    .longmont-unique-upgrades-card h2 {
        font-size: 24px;
    }

    .longmont-unique-upgrades-card p {
        font-size: 15px;
    }

    .longmont-unique-upgrades-btn {
        width: 100%;
        text-align: center;
        padding: 16px 18px;
        font-size: 13px;
        letter-spacing: 3px;
    }

    .longmont-routine-maintenance-section {
        min-height: 300px;
        padding: 50px 25px;
    }

    .longmont-routine-maintenance-content h2 {
        font-size: 27px;
    }

    .longmont-routine-maintenance-content p {
        font-size: 16px;
    }
}


/* ===================================
   LONGMONT FREE QUOTE SECTION
====================================== */

.longmont-free-quote-section {
    width: 100%;
    background: #ff4b1f;
    padding: 55px 30px 60px;
    text-align: center;
}

.longmont-free-quote-content {
    max-width: 1100px;
    margin: 0 auto;
}

.longmont-free-quote-content h2 {
    color: #ffffff;
    font-size: 40px;
    font-weight: 300;
    line-height: 1.1;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.longmont-free-quote-content p {
    max-width: 1200px;
    margin: 0 auto 50px;
    color: #ffffff;
    font-size: 20px;
    line-height: 1.6;
}

.longmont-free-quote-button {
    display: inline-block;
    background: #00f531;
    color: #000000;
    text-decoration: none;
    padding: 13px 26px;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.longmont-free-quote-button:hover,
.longmont-free-quote-button:focus,
.longmont-free-quote-button:active {
    background: #ffffff;
    color: #ff4b1f;
}


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

@media (max-width: 991px) {

    .longmont-free-quote-section {
        padding: 80px 25px 90px;
    }

    .longmont-free-quote-content h2 {
        font-size: 46px;
    }

    .longmont-free-quote-content p {
        font-size: 18px;
    }
}

@media (max-width: 767px) {

    .longmont-free-quote-section {
        padding: 70px 20px 80px;
    }

    .longmont-free-quote-content h2 {
        font-size: 36px;
    }

    .longmont-free-quote-content p {
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 40px;
    }

    .longmont-free-quote-button {
        width: 100%;
        max-width: 340px;
        padding: 20px;
        font-size: 15px;
        letter-spacing: 3px;
    }
}



/* ===================================
   LONGMONT SERVICES CHECK SECTION
====================================== */

.longmont-services-check-section {
    width: 100%;
    background: #ffffff;
    padding: 45px 20px 28px;
    text-align: center;
    border-bottom: 8px solid #00f531;
}

.longmont-services-check-section h2 {
    color: #555555;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 1px;
    margin: 0 0 58px;
    text-transform: uppercase;
}

.longmont-services-check-wrap {
    max-width: 1200px;
    margin: 0 auto 58px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 80px;
}

.longmont-services-check-item {
    width: 190px;
    text-align: center;
}

.longmont-services-check-item img {
    width: 120px;
    height: auto;
    display: block;
    margin: 0 auto 35px;
}

.longmont-services-check-item h3 {
    color: #555555;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
}

.longmont-services-check-section h4 {
    color: #ff4b1f;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
}


/* ===================================
   LONGMONT SERVICES IMAGE LINKS
====================================== */

.longmont-services-image-links-section {
    width: 100%;
    padding: 55px 40px;
    background-image: url("../images/dark-carbon-fiber.png");
    background-size: auto;
    background-position: center;
    background-repeat: repeat;
    background-attachment: scroll;
    border-bottom: 6px solid #00f531;
}

.longmont-services-image-links-grid {
    max-width: 1650px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 85px;
}

.longmont-services-image-links-card {
    display: block;
    width: 520px;
    text-decoration: none;
    transition: 0.3s ease;
}

.longmont-services-image-links-card img {
    width: 100%;
    display: block;
    border: 3px solid #ffffff;
}

.longmont-services-image-links-card:hover {
    transform: translateY(-8px);
}

.longmont-services-image-links-card:hover img {
    box-shadow: 0 0 25px rgba(0, 245, 49, 0.45);
}


/* RESPONSIVE */

@media (max-width: 1200px) {
    .longmont-services-image-links-grid {
        gap: 40px;
    }

    .longmont-services-image-links-card {
        width: 31%;
    }
}

@media (max-width: 991px) {
    .longmont-services-check-section h2 {
        font-size: 38px;
    }

    .longmont-services-check-wrap {
        flex-wrap: wrap;
        gap: 50px 35px;
    }

    .longmont-services-check-item {
        width: 230px;
    }

    .longmont-services-check-section h4 {
        font-size: 34px;
    }

    .longmont-services-image-links-grid {
        flex-direction: column;
        gap: 35px;
    }

    .longmont-services-image-links-card {
        width: 90%;
        max-width: 700px;
    }
}

@media (max-width: 575px) {
    .longmont-services-check-section {
        padding: 50px 20px 25px;
    }

    .longmont-services-check-section h2 {
        font-size: 30px;
    }

    .longmont-services-check-wrap {
        gap: 45px;
        margin-bottom: 45px;
    }

    .longmont-services-check-item {
        width: 100%;
    }

    .longmont-services-check-item img {
        width: 115px;
        margin-bottom: 25px;
    }

    .longmont-services-check-item h3 {
        font-size: 23px;
    }

    .longmont-services-check-section h4 {
        font-size: 29px;
    }

    .longmont-services-image-links-section {
        padding: 50px 20px;
    }

    .longmont-services-image-links-card {
        width: 100%;
    }
}




/* ===================================
   LOVELAND LOCATION HERO SECTION HTML PAGE
====================================== */

.loveland-location-hero-section {
    width: 100%;
    height: 560px;
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.05),
        rgba(0, 0, 0, 0.05)
    ), url("../images/loveland-hero.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loveland-location-hero-content {
    text-align: center;
    margin-top: 90px;
    padding: 0 20px;
}

.loveland-location-hero-content h1 {
    color: #ffffff;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.loveland-location-hero-content h2 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 32px;
    text-transform: uppercase;
}

.loveland-location-hero-btn {
    display: inline-block;
    background: #ff4b1f;
    color: #ffffff;
    text-decoration: none;
    padding: 13px 26px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.loveland-location-hero-btn:hover,
.loveland-location-hero-btn:focus,
.loveland-location-hero-btn:active {
    background: #00f531;
    color: #ffffff;
}


/* ===================================
   LOVELAND LOCATION BADGES SECTION
====================================== */

.loveland-location-badges-section {
    width: 100%;
    background: #202020;
    padding: 40px 20px 48px;
}

.loveland-location-badges-wrap {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 42px;
}

.loveland-location-badges-wrap img {
    width: 138px;
    height: auto;
    display: block;
    opacity: 0.95;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .loveland-location-hero-section {
        height: 470px;
        background-attachment: scroll;
    }

    .loveland-location-hero-content {
        margin-top: 45px;
    }

    .loveland-location-hero-content h1 {
        font-size: 40px;
    }

    .loveland-location-hero-content h2 {
        font-size: 22px;
    }

    .loveland-location-hero-btn {
        padding: 15px 30px;
        font-size: 14px;
        letter-spacing: 3px;
    }

    .loveland-location-badges-wrap {
        flex-wrap: wrap;
        gap: 35px;
    }

    .loveland-location-badges-wrap img {
        width: 115px;
    }
}

@media (max-width: 575px) {
    .loveland-location-hero-section {
        height: 400px;
    }

    .loveland-location-hero-content h1 {
        font-size: 33px;
    }

    .loveland-location-hero-content h2 {
        font-size: 18px;
    }

    .loveland-location-badges-section {
        padding: 38px 20px;
    }

    .loveland-location-badges-wrap {
        gap: 26px;
    }

    .loveland-location-badges-wrap img {
        width: 95px;
    }
}



/* ===================================
   LOVELAND ONE STOP SHOP BAR
====================================== */

.loveland-onestop-bar-section {
    width: 100%;
    background: #ff4b1f;
    padding: 45px 20px;
}

.loveland-onestop-bar-content {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.loveland-onestop-bar-content h2 {
    color: #ffffff;
    font-size: 30px;
    font-weight: 550;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 0;
}



/* ===================================
   LOVELAND EXPERT ROOFING SECTION
====================================== */

.loveland-expert-roofing-section {
    position: relative;
    width: 100%;
    padding: 70px 40px;
    overflow: hidden;
    background: #efefef;
    background-image: url("../images/champion-watermark.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.loveland-expert-roofing-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.12);
}

.loveland-expert-roofing-container {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
}

.loveland-expert-roofing-left {
    flex: 1;
    display: flex;
    align-items: stretch;
    gap: 28px;
}

.loveland-expert-roofing-line {
    width: 10px;
    min-width: 10px;
    background: #6a6a6a;
}

.loveland-expert-roofing-text {
    max-width: 940px;
}

.loveland-expert-roofing-text h2 {
    color: #ff4b1f;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 28px;
    text-transform: uppercase;
}

.loveland-expert-roofing-text p {
    color: #666666;
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 12px;
}

.loveland-expert-roofing-btn {
    display: inline-block;
    margin-top: 30px;
    background: #2c2c2c;
    color: #ffffff;
    text-decoration: none;
    padding: 13px 26px;
    font-size: 16px;
    border-radius: 1.5px;
    transition: 0.3s ease;
}

.loveland-expert-roofing-btn:hover,
.loveland-expert-roofing-btn:focus,
.loveland-expert-roofing-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}

.loveland-expert-roofing-right {
    position: relative;
    width: 400px;
    flex-shrink: 0;
}

.loveland-expert-roofing-image-bg {
    position: absolute;
    width: 330px;
    height: 330px;
    right: -38px;
    bottom: -38px;
}

.loveland-expert-roofing-right img {
    position: relative;
    z-index: 2;
    width: 100%;
    display: block;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .loveland-onestop-bar-content h2 {
        font-size: 38px;
    }

    .loveland-expert-roofing-container {
        flex-direction: column;
    }

    .loveland-expert-roofing-right {
        width: 100%;
        max-width: 500px;
    }

    .loveland-expert-roofing-section {
        background-attachment: scroll;
    }
}

@media (max-width: 768px) {

    .loveland-onestop-bar-content h2 {
        font-size: 28px;
    }

    .loveland-expert-roofing-section {
        padding: 60px 20px;
    }

    .loveland-expert-roofing-text h2 {
        font-size: 28px;
    }

    .loveland-expert-roofing-text p {
        font-size: 16px;
    }

    .loveland-expert-roofing-image-bg {
        width: 85%;
        height: 85%;
        right: -20px;
        bottom: -20px;
    }
}


/* ===================================
   LOVELAND SERVICE ABOVE REST SECTION
====================================== */

.loveland-service-above-section {
    width: 100%;
    min-height: 620px;
    background-image: url("../images/loveland-2.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    padding: 70px 14% 70px 0;
    overflow: hidden;
}

.loveland-service-above-card {
    width: 640px;
    background: #ffffff;
    padding: 50px 58px 50px;
    border-left: 26px solid #ff4b1f;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.loveland-service-above-card h2 {
    color: #ff4b1f;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 28px;
    text-transform: uppercase;
}

.loveland-service-above-card p {
    color: #222222;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 22px;
}

.loveland-service-above-btn {
    display: inline-block;
    margin-top: 18px;
    background: #00f531;
    color: #000000;
    padding: 13px 26px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.loveland-service-above-btn:hover,
.loveland-service-above-btn:focus,
.loveland-service-above-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .loveland-service-above-section {
        background-attachment: scroll;
        justify-content: center;
        padding: 60px 30px;
    }

    .loveland-service-above-card {
        width: 90%;
        padding: 48px 42px;
        border-left-width: 18px;
    }

    .loveland-service-above-card h2 {
        font-size: 25px;
    }

    .loveland-service-above-card p {
        font-size: 16px;
    }
}

@media (max-width: 575px) {
    .loveland-service-above-section {
        min-height: 560px;
        padding: 45px 20px;
    }

    .loveland-service-above-card {
        width: 100%;
        padding: 38px 28px;
        border-left-width: 12px;
    }

    .loveland-service-above-card h2 {
        font-size: 22px;
    }

    .loveland-service-above-card p {
        font-size: 14px;
    }

    .loveland-service-above-btn {
        width: 100%;
        text-align: center;
        padding: 16px 18px;
        font-size: 13px;
        letter-spacing: 3px;
    }
}



/* ===================================
   LOVELAND SERVICES CHECK SECTION
====================================== */

.loveland-services-check-section {
    width: 100%;
    background: #ffffff;
    padding: 45px 20px 28px;
    text-align: center;
    border-bottom: 8px solid #00f531;
}

.loveland-services-check-section h2 {
    color: #555555;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 1px;
    margin: 0 0 58px;
    text-transform: uppercase;
}

.loveland-services-check-wrap {
    max-width: 1200px;
    margin: 0 auto 58px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 80px;
}

.loveland-services-check-item {
    width: 190px;
    text-align: center;
}

.loveland-services-check-item img {
    width: 120px;
    height: auto;
    display: block;
    margin: 0 auto 35px;
}

.loveland-services-check-item h3 {
    color: #555555;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
}

.loveland-services-check-section h4 {
    color: #ff4b1f;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
}


/* ===================================
   LOVELAND SERVICES IMAGE LINKS
====================================== */

.loveland-services-image-links-section {
    width: 100%;
    padding: 55px 40px;
    background-image: url("../images/dark-carbon-fiber.png");
    background-size: auto;
    background-position: center;
    background-repeat: repeat;
    background-attachment: scroll;
    border-bottom: 6px solid #00f531;
}

.loveland-services-image-links-grid {
    max-width: 1650px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 85px;
}

.loveland-services-image-links-card {
    display: block;
    width: 520px;
    text-decoration: none;
    transition: 0.3s ease;
}

.loveland-services-image-links-card img {
    width: 100%;
    display: block;
    border: 3px solid #ffffff;
}

.loveland-services-image-links-card:hover {
    transform: translateY(-8px);
}

.loveland-services-image-links-card:hover img {
    box-shadow: 0 0 25px rgba(0, 245, 49, 0.45);
}


/* RESPONSIVE */

@media (max-width: 1200px) {
    .loveland-services-image-links-grid {
        gap: 40px;
    }

    .loveland-services-image-links-card {
        width: 31%;
    }
}

@media (max-width: 991px) {
    .loveland-services-check-section h2 {
        font-size: 38px;
    }

    .loveland-services-check-wrap {
        flex-wrap: wrap;
        gap: 50px 35px;
    }

    .loveland-services-check-item {
        width: 230px;
    }

    .loveland-services-check-section h4 {
        font-size: 34px;
    }

    .loveland-services-image-links-grid {
        flex-direction: column;
        gap: 35px;
    }

    .loveland-services-image-links-card {
        width: 90%;
        max-width: 700px;
    }
}

@media (max-width: 575px) {
    .loveland-services-check-section {
        padding: 50px 20px 25px;
    }

    .loveland-services-check-section h2 {
        font-size: 30px;
    }

    .loveland-services-check-wrap {
        gap: 45px;
        margin-bottom: 45px;
    }

    .loveland-services-check-item {
        width: 100%;
    }

    .loveland-services-check-item img {
        width: 115px;
        margin-bottom: 25px;
    }

    .loveland-services-check-item h3 {
        font-size: 23px;
    }

    .loveland-services-check-section h4 {
        font-size: 29px;
    }

    .loveland-services-image-links-section {
        padding: 50px 20px;
    }

    .loveland-services-image-links-card {
        width: 100%;
    }
}



/* ===================================
   LOVELAND ROOFING SERVICES LINKS
====================================== */

.loveland-roofing-links-section {
    width: 100%;
    background-image: url("../images/mixed-black-background.png");
    background-size: 350px auto;
    background-position: center;
    background-repeat: repeat;
    background-attachment: scroll;
    padding: 70px 15% 80px;
}

.loveland-roofing-links-row {
    display: grid;
    grid-template-columns: 1.25fr 0.85fr;
    gap: 80px;
    align-items: start;
}

.loveland-roofing-links-text h2 {
    color: #ffffff;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 26px;
    text-transform: uppercase;
}

.loveland-roofing-links-text p {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 22px;
}

.loveland-roofing-links-text a {
    color: #00f531;
    text-decoration: none;
}

.loveland-roofing-links-text a:hover {
    color: #ff4b1f;
}

.loveland-roofing-links-buttons {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.loveland-roofing-links-buttons a {
    display: block;
    width: 100%;
    background: #ff4b1f;
    color: #ffffff;
    text-align: center;
    padding: 13px 26px;
    font-size: 16px;
    line-height: 1.2;
    text-decoration: none;
    border-radius: 3px;
    transition: 0.3s ease;
}

.loveland-roofing-links-buttons a:hover,
.loveland-roofing-links-buttons a:focus,
.loveland-roofing-links-buttons a:active {
    background: #5d5d5d;
    color: #ffffff;
}

.loveland-roofing-links-divider {
    width: 100%;
    height: 1px;
    background: #777777;
    margin: 42px 0;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .loveland-roofing-links-section {
        padding: 60px 8%;
    }

    .loveland-roofing-links-row {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .loveland-roofing-links-text h2 {
        font-size: 31px;
    }

    .loveland-roofing-links-text p {
        font-size: 17px;
    }
}

@media (max-width: 575px) {
    .loveland-roofing-links-section {
        padding: 50px 25px;
    }

    .loveland-roofing-links-text h2 {
        font-size: 26px;
    }

    .loveland-roofing-links-text p {
        font-size: 16px;
    }

    .loveland-roofing-links-buttons a {
        font-size: 16px;
        padding: 15px 14px;
    }
}


/* ===================================
   LOVELAND ROOFING COMPANY CTA
====================================== */

.loveland-roofing-company-cta-section {
    width: 100%;
    min-height: 320px;
    background-color: #f7f7f7;
    background-image: url("../images/champion-watermark.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    border-bottom: 6px solid #ff4b1f;

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

    padding: 80px 20px;
    text-align: center;
}

.loveland-roofing-company-cta-content {
    max-width: 1250px;
    margin: 0 auto;
}

.loveland-roofing-company-cta-content h2 {
    color: #222222;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 24px;
    text-transform: uppercase;
}

.loveland-roofing-company-cta-content p {
    color: #222222;
    font-size: 18px;
    line-height: 1.45;
    margin: 0 auto 42px;
    max-width: 1000px;
}

.loveland-roofing-company-cta-content p a {
    color: #ff4b1f;
    text-decoration: none;
}

.loveland-roofing-company-cta-content p a:hover {
    text-decoration: underline;
}

.loveland-roofing-company-cta-btn {
    display: inline-block;
    background: #00f531;
    color: #000000;
    padding: 13px 26px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.loveland-roofing-company-cta-btn:hover,
.loveland-roofing-company-cta-btn:focus,
.loveland-roofing-company-cta-btn:active {
    background: #ff4b1f;
    color: #ffffff;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .loveland-roofing-company-cta-section {
        min-height: 380px;
        padding: 70px 25px;
        background-attachment: scroll;
        background-size: 520px auto;
    }

    .loveland-roofing-company-cta-content h2 {
        font-size: 32px;
    }

    .loveland-roofing-company-cta-content p {
        font-size: 18px;
    }
}

@media (max-width: 575px) {
    .loveland-roofing-company-cta-section {
        min-height: 360px;
        padding: 60px 20px;
        background-size: 420px auto;
    }

    .loveland-roofing-company-cta-content h2 {
        font-size: 27px;
    }

    .loveland-roofing-company-cta-content p {
        font-size: 16px;
    }

    .loveland-roofing-company-cta-btn {
        width: 100%;
        padding: 16px 18px;
        font-size: 13px;
        letter-spacing: 3px;
    }
}



/* ===================================
   PRIVACY POLICY HERO SECTION
====================================== */

.privacy-policy-hero-section {

    position: relative;

    width: 100%;

    min-height: 700px;

    background-image: url("../images/private-policy-hero.png");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-bottom: 8px solid #00ff2a;
}



/* DARK OVERLAY */

.privacy-policy-hero-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.10);

    z-index: 1;
}



/* CONTENT */

.privacy-policy-hero-content {

    position: relative;

    z-index: 2;

    text-align: center;

    width: 90%;

    max-width: 1200px;
}



/* TITLE */

.privacy-policy-hero-content h1 {

    font-size: 40px;

    color: #ffffff;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-bottom: 45px;

    line-height: 1;
}



/* BUTTON */

.privacy-policy-hero-button {

    display: inline-block;

    background: #ff4b1f;

    color: #ffffff;

    text-decoration: none;

    padding: 13px 26px;

    font-size: 16px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    transition: all 0.3s ease;
}



/* HOVER + CLICK */

.privacy-policy-hero-button:hover,

.privacy-policy-hero-button:focus,

.privacy-policy-hero-button:active {

    background: #00ff2a;

    color: #111111;
}



/* RESPONSIVE */

@media (max-width: 991px) {

    .privacy-policy-hero-section {

        min-height: 700px;

        background-attachment: scroll;
    }

    .privacy-policy-hero-content h1 {

        font-size: 64px;
    }

    .privacy-policy-hero-button {

        font-size: 20px;

        padding: 18px 35px;
    }
}



@media (max-width: 767px) {

    .privacy-policy-hero-content h1 {

        font-size: 48px;
    }

    .privacy-policy-hero-button {

        width: 100%;

        max-width: 400px;

        font-size: 18px;
    }
}



/* ===================================
   PRIVACY POLICY PAGE 
====================================== */

.privacy-policy-content-section {
    width: 100%;
    background: #ffffff;
    padding: 80px 25px;
}

.privacy-policy-content-container {
    max-width: 1100px;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
    color: #333333;
}

/* MAIN TITLE */

.privacy-policy-content-container h2 {
    font-size: 30px;
    color: #222222;
    text-align: left;
    margin-bottom: 15px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.1;
}

.privacy-policy-last-updated {
    text-align: left;
    font-size: 16px;
    color: #666666;
    font-style: italic;
    margin-bottom: 50px;
}

/* SECTION TITLES */

.privacy-policy-content-container h3 {
    font-size: 20px;
    color: #222222;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 45px;
    margin-bottom: 18px;
    line-height: 1.2;
    border: none;
    padding-left: 0;
}

/* PARAGRAPHS */

.privacy-policy-content-container p {
    font-size: 16px;
    line-height: 1.2;
    color: #444444;
    margin-bottom: 5px;
}

/* LISTS */

.privacy-policy-list {
    margin: 0 0 28px 28px;
    padding: 0;
}

.privacy-policy-list li {
    font-size: 16px;
    line-height: 1.2;
    color: #444444;
    margin-bottom: 12px;
}

/* LINKS */

.privacy-policy-content-container a {
    color: #ff4b1f;
    text-decoration: none;
    font-weight: 600;
}

.privacy-policy-content-container a:hover {
    color: #2e7d32;
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .privacy-policy-content-container h2 {
        font-size: 42px;
    }

    .privacy-policy-content-container h3 {
        font-size: 26px;
    }

    .privacy-policy-content-container p,
    .privacy-policy-list li {
        font-size: 16px;
    }
}

@media (max-width: 768px) {

    .privacy-policy-content-section {
        padding: 50px 15px;
    }

    .privacy-policy-content-container h2 {
        font-size: 34px;
    }

    .privacy-policy-content-container h3 {
        font-size: 22px;
    }

    .privacy-policy-content-container p,
    .privacy-policy-list li {
        font-size: 15px;
        line-height: 1.7;
    }

    .privacy-policy-list {
        margin-left: 20px;
    }
}




/* ===================================
   BLOG HERO SECTION HTML PAGE
====================================== */

.blog-hero-section {

    position: relative;

    width: 100%;

    min-height: 520px;

    background-image: url("../images/dark-carbon-fiber.png");

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

    border-bottom: 8px solid #00ff22;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;
}



/* OVERLAY */

.blog-hero-overlay {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.15);
}



/* CONTENT */

.blog-hero-content {

    position: relative;

    z-index: 2;

    width: 90%;

    max-width: 1100px;

    text-align: center;
}



/* TITLE */

.blog-hero-content h1 {

    font-family: "Teko", sans-serif;

    font-size: 40px;

    font-weight: 700;

    line-height: 1.5;

    color: #ffffff;

    text-transform: uppercase;

    margin: 0;

    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.65);
}



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

@media (max-width: 1200px) {

    .blog-hero-content h1 {

        font-size: 85px;
    }
}

@media (max-width: 991px) {

    .blog-hero-section {

        min-height: 500px;
    }

    .blog-hero-content h1 {

        font-size: 65px;
    }
}

@media (max-width: 768px) {

    .blog-hero-section {

        min-height: 420px;

        padding: 40px 20px;
    }

    .blog-hero-content h1 {

        font-size: 48px;

        line-height: 1;
    }
}

@media (max-width: 480px) {

    .blog-hero-content h1 {

        font-size: 34px;
    }
}




/* ===================================
   BLOG POSTS GRID SECTION
====================================== */

.blog-posts-grid-section {
    width: 100%;
    background: #ffffff;
    padding: 65px 40px 70px;
}

.blog-posts-grid-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 380px);
    column-gap: 65px;
    row-gap: 68px;
    justify-content: center;
    align-items: start;
}

.blog-posts-card {
    width: 360px;
    background: #ffffff;
    border: 1px solid #dddddd;
    text-decoration: none;
}

.blog-posts-card-body {
    padding: 18px 26px 20px;
}

.blog-posts-card h2 {
    margin: 0 0 24px;
    color: #333333;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
}

.blog-posts-date {
    margin: 0 0 34px;
    color: #707070;
    font-size: 14px;
    line-height: 1.4;
}

.blog-posts-read-more {
    display: inline-block;
    color: #111111;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.25s ease;
}

.blog-posts-read-more:hover,
.blog-posts-read-more:active {
    color: #ff4b1f;
}

.blog-posts-card-featured img {
    width: 100%;
    height: 205px;
    display: block;
    object-fit: cover;
}

.blog-posts-card-news {
    grid-column: 1;
}

.blog-posts-excerpt {
    margin: 0 0 22px;
    color: #707070;
    font-size: 14px;
    line-height: 1.55;
}

/* RESPONSIVE */

@media (max-width: 1300px) {
    .blog-posts-grid-container {
        grid-template-columns: repeat(3, 320px);
        column-gap: 40px;
    }

    .blog-posts-card {
        width: 320px;
    }
}

@media (max-width: 991px) {
    .blog-posts-grid-container {
        grid-template-columns: repeat(2, 1fr);
        max-width: 760px;
        gap: 40px;
    }

    .blog-posts-card {
        width: 100%;
    }

    .blog-posts-card-news {
        grid-column: auto;
    }
}

@media (max-width: 620px) {
    .blog-posts-grid-section {
        padding: 55px 22px 70px;
    }

    .blog-posts-grid-container {
        grid-template-columns: 1fr;
    }

    .blog-posts-card h2 {
        font-size: 22px;
    }
}


/* ===================================
   FEDERAL ROOFING CONTRACTING HERO HTML PAGE
====================================== */

.federal-roofing-hero-section {
    width: 100%;
    min-height: 420px;
    background-image: url("../images/federal-hero.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
}

.federal-roofing-hero-overlay {
    width: 100%;
    min-height: 800px;
    background: rgba(0, 0, 0, 0.10);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
}

.federal-roofing-hero-content {
    max-width: 900px;
}

.federal-roofing-hero-content h1 {
    color: #ffffff;
    font-size: 48px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 35px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.45);
}

.federal-roofing-hero-btn {
    display: inline-block;
    background: #ff4b1f;
    color: #ffffff;
    text-decoration: none;
    padding: 13px 26px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.federal-roofing-hero-btn:hover,
.federal-roofing-hero-btn:focus,
.federal-roofing-hero-btn:active {
    background: #2e8b57;
    color: #ffffff;
    transform: translateY(-3px);
}

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

@media (max-width: 991px) {

    .federal-roofing-hero-section,
    .federal-roofing-hero-overlay {
        min-height: 600px;
    }

    .federal-roofing-hero-content h1 {
        font-size: 48px;
    }
}

@media (max-width: 767px) {

    .federal-roofing-hero-section,
    .federal-roofing-hero-overlay {
        min-height: 500px;
        background-attachment: scroll;
    }

    .federal-roofing-hero-content h1 {
        font-size: 34px;
    }

    .federal-roofing-hero-btn {
        padding: 15px 30px;
        font-size: 15px;
    }
}



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

.federal-services-section {
    width: 100%;
    padding: 85px 40px;
    background: #ffffff;
}

.federal-services-container {
    max-width: 1150px;
    margin: 0 auto;
    text-align: center;
}

.federal-services-container h2 {
    color: #ff4b1f;
    font-size: 38px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.federal-services-intro {
    max-width: 900px;
    margin: 0 auto 50px;
    color: #333333;
    font-size: 18px;
    line-height: 1.5;
}

.federal-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.federal-service-card {
    background: #f5f5f5;
    padding: 40px 28px;
    border-top: 6px solid #ff4b1f;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.federal-service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

.federal-service-card h3 {
    color: #222222;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
}

.federal-service-card p {
    color: #444444;
    font-size: 16px;
    line-height: 1.5;
}

/* RESPONSIVE */

@media (max-width: 991px) {

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

    .federal-services-container h2 {
        font-size: 33px;
    }
}

@media (max-width: 767px) {

    .federal-services-section {
        padding: 60px 22px;
    }

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

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

    .federal-services-intro {
        font-size: 16px;
    }
}


/* ===================================
   FEDERAL PROJECT GALLERY SECTION
====================================== */

.federal-project-gallery-section {
    width: 100%;
    padding: 50px 40px;
    background: #ffffff;
    border-top: 8px solid #4CAF50;
}

.federal-project-gallery-container {
    max-width: 1150px;
    margin: 0 auto;
}

.federal-gallery-divider {
    width: 120px;
    height: 5px;
    background: #ff4b1f;
    margin: 0 auto 40px;
}

.federal-project-gallery-heading {
    text-align: center;
    max-width: 950px;
    margin: 0 auto 50px;
}

.federal-project-gallery-heading h2 {
    color: #ff4b1f;
    font-size: 30px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px;
}

.federal-project-gallery-heading h3 {
    color: #222222;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 18px;
}

.federal-project-gallery-heading p {
    color: #444444;
    font-size: 16px;
    line-height: 1.5;
}

.federal-project-details-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 auto 65px;
    border: 1px solid #dddddd;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
}

.federal-project-detail-item {
    padding: 28px 22px;
    background: #f5f5f5;
    border-right: 1px solid #dddddd;
    text-align: center;
}

.federal-project-detail-item:last-child {
    border-right: none;
}

.federal-project-detail-item span {
    display: block;
    color: #ff4b1f;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.federal-project-detail-item p {
    color: #222222;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}

.federal-gallery-group {
    margin-top: 55px;
}

.federal-gallery-group h3 {
    color: #222222;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 28px;
    text-align: center;
}

.federal-gallery-group h3::after {
    content: "";
    display: block;
    width: 90px;
    height: 4px;
    background: #ff4b1f;
    margin: 12px auto 0;
}

.federal-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.federal-gallery-grid img {
    width: 90%;
    height: 200px;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.federal-gallery-grid img:hover {
    transform: scale(1.03);
}

.federal-gallery-after-group {
    margin-top: 75px;
}

.federal-gallery-after-grid {
    max-width: 950px;
    margin: 0 auto;
}

.federal-gallery-after-grid img {
    height: 310px;
}

/* RESPONSIVE */

@media (max-width: 991px) {

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

    .federal-project-detail-item {
        border-bottom: 1px solid #dddddd;
    }

    .federal-project-detail-item:nth-child(2) {
        border-right: none;
    }

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

    .federal-project-gallery-heading h2 {
        font-size: 34px;
    }
}

@media (max-width: 767px) {

    .federal-project-gallery-section {
        padding: 60px 20px;
    }

    .federal-gallery-divider {
        width: 110px;
        height: 4px;
        margin-bottom: 30px;
    }

    .federal-project-gallery-heading h2 {
        font-size: 29px;
    }

    .federal-project-gallery-heading h3 {
        font-size: 23px;
    }

    .federal-project-details-box,
    .federal-gallery-grid {
        grid-template-columns: 1fr;
    }

    .federal-project-detail-item {
        border-right: none;
    }

    .federal-gallery-grid img,
    .federal-gallery-after-grid img {
        height: 240px;
    }
}



/* ===================================
   FEDERAL WHY CHOOSE US SECTION
====================================== */

.federal-why-us-section {
    width: 100%;
    padding: 100px 40px;
    background-image: url("../images/mixed-black-background.png");
    background-size: 30% auto;
    background-repeat: repeat;
    background-position: center;
    background-attachment: fixed;
}

.federal-why-us-container {
    max-width: 1150px;
    margin: 0 auto;
}

.federal-why-us-container h2 {
    text-align: center;
    color: #ff4b1f;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.federal-why-us-intro {
    max-width: 900px;
    margin: 0 auto 70px;
    text-align: center;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.5;
}

.federal-why-us-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}

.federal-why-us-card {
    background: #ffffff;
    padding: 40px 30px;
    text-align: center;
    border-top: 5px solid #ff4b1f;
    transition: 0.3s ease;
}

.federal-why-us-card:hover {
    transform: translateY(-8px);
    border-top-color: #4caf50;
}

.federal-why-us-card h3 {
    font-size: 20px;
    color: #222222;
    margin-bottom: 20px;
}

.federal-why-us-card p {
    color: #555555;
    font-size: 16px;
    line-height: 1.5;
}

/* RESPONSIVE */

@media (max-width: 991px) {

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

    .federal-why-us-container h2 {
        font-size: 42px;
    }
}

@media (max-width: 768px) {

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

    .federal-why-us-section {
        padding: 80px 20px;
    }

    .federal-why-us-container h2 {
        font-size: 34px;
    }

    .federal-why-us-intro {
        font-size: 18px;
    }
}


@media (max-width: 768px) {

    .champion-nav {
        display: none;
    }

    .champion-logo-panel {
        width: 100%;
    }

    .champion-header {
        display: block;
    }
}

/* ===================================
   THANK YOU PAGE
====================================== */

.thank-you-page-section {
    width: 100%;
    min-height: 100vh;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.thank-you-page-content {
    width: 100%;
    max-width: 700px;
    text-align: center;
}

.thank-you-logo {
    margin-bottom: 20px;
}

.thank-you-logo img {
    width: 460px;
    max-width: 460px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.thank-you-page-container {
    background: #ffffff;
    border-top: 8px solid #ff4b1f;
    padding: 50px 35px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
}

.thank-you-page-container h1 {
    color: #ff4b1f;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 12px;
}

.thank-you-page-container h2 {
    color: #222222;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 25px;
}

.thank-you-page-container p {
    color: #555555;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 30px;
}

.thank-you-page-btn {
    display: inline-block;
    background: #ff4b1f;
    color: #ffffff;
    text-decoration: none;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.thank-you-page-btn:hover {
    background: #00b140;
    color: #ffffff;
}

@media (max-width: 768px) {

    .thank-you-page-section {
        padding: 25px 15px;
    }

    .thank-you-logo img {
        width: 60px;
        max-width: 60px;
    }

    .thank-you-page-container {
        padding: 40px 25px;
    }

    .thank-you-page-container h1 {
        font-size: 32px;
    }

    .thank-you-page-container h2 {
        font-size: 18px;
    }

    .thank-you-page-container p {
        font-size: 15px;
    }

    .thank-you-page-btn {
        width: 100%;
        max-width: 300px;
    }
}