:root {
    --white: white;
    --blue: #0b0580;
    --green: #34861b;
    --dark-blue: #0e0a57;
    --title-gray: #686868;
    --off-white: whitesmoke;
    --black: black;
    --border-gray: #dbdbdb;
}

body {
    color: #333;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

a {
    text-decoration: underline;
}

.header-wrapper {
    flex-flow: column;
    justify-content: center;
    align-items: stretch;
    padding: 0;
    display: flex;
}

.container {
    width: 100%;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.container._1900 {
    max-width: 1900px;
}

.navigation {
    color: #0b0580;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 600px;
    font-weight: 700;
    display: flex;
}

.image {
    width: 100%;
    margin-right: auto;
}

.brand {
    width: 200px;
    padding-left: 0;
}

.navbar-v1 {
    background-color: rgba(255, 255, 255, 0);
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 0;
    display: flex;
}

.top-menu {
    background-color: #0a0380;
}

.container-wrapper {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px 20px;
    display: flex;
}

.sosial-div {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.phone {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    color: var(--white);
    justify-content: flex-end;
    align-items: center;
    text-decoration: none;
    transition: all .3s;
    display: flex;
}

.phone:hover {
    color: var(--green);
}

.nav-link {
    color: #0b0580;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 3rem;
    font-size: 16px;
    text-decoration: none;
    transition: all .2s ease-in-out;
    display: flex;
}

.nav-link:hover {
    color: #34861b;
    text-decoration: none;
}

.button-div {
    background-color: var(--green);
    color: var(--white);
    letter-spacing: 1px;
    flex-flow: wrap-reverse;
    justify-content: center;
    align-items: center;
    padding: 20px 26px;
    font-weight: 700;
    transition: all .3s;
    display: flex;
    position: static;
}

.phone-number-link {
    font-size: 17px;
    font-weight: 700;
}

.hours-of-operation {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    color: #fff;
    justify-content: center;
    align-items: center;
    display: flex;
}

.hop-indiciator {
    background-color: #1ef36b;
    border-radius: 20px;
    width: 8px;
    min-width: 8px;
    max-width: 8px;
    height: 8px;
    min-height: 8px;
    max-height: 8px;
}

.text-block {
    font-size: 14px;
    font-weight: 300;
}

.nav-underline {
    background-color: #34861b;
    width: 100%;
    height: 5px;
    display: none;
}

.nav-text {
    text-decoration: none;
}

.text-block-3 {
    font-size: 11px;
    font-weight: 300;
}

.container-wrapper-nav {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 20px;
    display: flex;
}

.dollar-icon {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
}

.div-block {
    border-right: 1px solid rgba(255, 255, 255, .36);
    margin-right: 15px;
    padding-right: 10px;
}

.div-block-dollar {
    border-right: 1px solid rgba(255, 255, 255, .36);
    margin-right: 15px;
    padding-right: 10px;
    display: flex;
}

.finance-message {
    color: #fff;
    background-color: #34861b;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    display: none;
}

.div-block-2 {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    display: flex;
}

.serving-areas-text-block {
    color: #fff;
    font-family: PT Serif, serif;
    font-size: 16px;
    font-style: italic;
}

.hero-section {
    background-image: linear-gradient(rgba(0, 0, 0, .44), rgba(179, 179, 179, .79)), url('../images/hero-image.jpg');
    background-position: 0 0, 50% 100%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    background-attachment: scroll, fixed;
    padding-top: 120px;
    padding-bottom: 120px;
}

.heading-h1 {
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 2px #000;
    width: 100%;
    max-width: 896px;
    margin-top: 0;
    margin-bottom: 0;
    font-family: Merriweather Sans, sans-serif;
    font-size: 64px;
    font-weight: 800;
    line-height: 1.2;
    position: relative;
}

.heading-h1.left {
    text-align: left;
    width: 100%;
    max-width: 1000px;
}

.container-wrapper-hero {
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    display: flex;
}

.hero-service-block {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 2rem;
    display: flex;
}

.service-button {
    grid-column-gap: .75rem;
    grid-row-gap: .75rem;
    color: #fff;
    background-color: #34861b;
    border-bottom: 2px solid #329757;
    justify-content: center;
    align-items: center;
    padding: .5rem 1.5rem;
    font-size: 16px;
    font-weight: 900;
    text-decoration: none;
    transition: all .3s;
    display: flex;
    transform: skew(-10deg);
}

.service-button:hover {
    background-color: #329757;
}

.service-button-text {
    color: var(--green);
    text-decoration: none;
    transform: skew(5deg)skew(10deg);
}

.hero-credential-block {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 30px;
    display: flex;
}

.hero-credential-block.left {
    justify-content: flex-start;
    align-items: center;
}

.service-icon {
    width: 25px;
    min-width: 25px;
    max-width: 25px;
    height: 25px;
    min-height: 25px;
    max-height: 25px;
    transform: skew(10deg);
}

.achievement-section {
    background-color: #34861b;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.container-wrapper-achievments {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    font-family: Merriweather, serif;
    display: flex;
}

.achievment-heading {
    color: #fff;
    font-family: Merriweather Sans, sans-serif;
    font-size: 46px;
    font-weight: 900;
    line-height: 1.2;
}

.achievment-subheading {
    color: #fff;
    margin-top: 5px;
    font-family: Merriweather Sans, sans-serif;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.2;
}

.achievment-block {
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px #000;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    display: flex;
}

.about-section {
    flex-flow: row;
    justify-content: space-between;
    align-items: stretch;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.about-hk-right {
    z-index: 3;
    -webkit-clip-path: polygon(5rem 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(5rem 0, 100% 0, 100% 100%, 0% 100%);
    background-color: #0b0580;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    width: 55%;
    height: 100%;
    display: flex;
    position: relative;
}

.about-content-right {
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 4rem 5rem 4rem 9rem;
    position: relative;
}

.heading-h2 {
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 2px #000;
    margin-top: 0;
    margin-bottom: 0;
    font-family: Merriweather, serif;
    font-size: 48px;
    font-weight: 900;
    line-height: 1.2;
    position: relative;
}

.heading-h2.dark {
    color: #686868;
    text-shadow: none;
    font-family: Merriweather Sans, sans-serif;
    font-weight: 800;
}

.heading-h2.dark.left {
    color: var(--title-gray);
    text-align: left;
    -webkit-text-stroke-color: #c0bebe;
}

.heading-h2.left {
    text-align: left;
    font-family: Merriweather Sans, sans-serif;
}

.about-content {
    color: #fff;
    margin-top: 1rem;
    font-size: 16px;
}

.left-abt {
    justify-content: center;
    align-items: center;
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 3rem;
    display: flex;
}

.left-abt.slider-side {
    object-fit: none;
    width: 60%;
    height: auto;
    margin-left: -59px;
    margin-right: -5rem;
    position: relative;
}

.about-button-div {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width: 100%;
    display: flex;
}

.about-button {
    grid-column-gap: .75rem;
    grid-row-gap: .75rem;
    color: #fff;
    text-transform: uppercase;
    -webkit-clip-path: polygon(1rem 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(1rem 0, 100% 0, 100% 100%, 0% 100%);
    background-color: #34861b;
    border-bottom: 2px solid #329757;
    justify-content: center;
    align-items: center;
    width: 50%;
    padding: 18px 10px;
    font-size: 16px;
    font-weight: 900;
    text-decoration: none;
    transition-property: all;
    transition-duration: .3s;
    transition-timing-function: ease;
    display: flex;
}

.about-button:hover {
    background-color: #329757;
}

.about-button-white {
    grid-column-gap: .75rem;
    grid-row-gap: .75rem;
    color: #34861b;
    text-transform: uppercase;
    background-color: #fff;
    border-bottom: 2px solid #329757;
    justify-content: center;
    align-items: center;
    width: 50%;
    padding: 18px 10px;
    font-size: 16px;
    font-weight: 900;
    text-decoration: none;
    transition: all .3s;
    display: flex;
    transform: skew(-15deg);
}

.about-button-white:hover {
    background-color: var(--off-white);
    color: var(--white);
}

.about-button-white.black {
    color: var(--black);
    border-left: 5px #329757;
}

.section {
    width: 100%;
    padding-top: 80px;
    padding-bottom: 80px;
}

.section.v2 {
    position: relative;
}

.section.bg-color {
    background-color: var(--off-white);
    position: relative;
}

.section.bg-image {
    background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url('../images/95257-1.jpg');
    background-position: 0 0, 0 0;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
}

.hide-v2 {
    display: none;
}

.roofing-services {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
}

.roofing-services-image-div {
    width: 100%;
    max-width: 600px;
    margin-bottom: 80px;
    transition: all .3s;
    display: block;
}

.roofing-services-image-div:hover {
    transform: scale(1.05)rotate(2deg);
}

.contant {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    display: flex;
}

.contant.left {
    justify-content: flex-start;
    align-items: flex-start;
}

.border {
    background-color: var(--border-gray);
    width: 138px;
    height: 8px;
    margin-top: 20px;
}

.border.green {
    background-color: var(--green);
}

.roofing-services-card-grid {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-top: 40px;
    display: grid;
}

.roofing-services-card {
    background-image: linear-gradient(180deg, var(--white) 30%, var(--off-white) 30%);
    padding: 0 17px;
}

.roofing-services-image-card-contant {
    -webkit-clip-path: polygon(50% 0%, 100% 14%, 100% 100%, 0% 100%, 0% 14%);
    clip-path: polygon(50% 0%, 100% 14%, 100% 100%, 0% 100%, 0% 14%);
    background-image: linear-gradient(#000, #fff);
    justify-content: center;
    align-items: center;
    height: 325px;
    padding: 30px 30px 16px;
    display: flex;
    position: relative;
    overflow: hidden;
}

.card-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

.services-heading {
    z-index: 2;
    color: var(--white);
    text-align: left;
    text-shadow: 1px 1px 2px var(--black);
    font-family: Merriweather Sans, sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    position: relative;
}

.services-card-contant {
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 15px;
    font-weight: 400;
}

.paragraph-card {
    margin-bottom: 0;
    font-size: 15px;
}

.learn-more-button {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    background-color: var(--blue);
    color: var(--white);
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all .3s;
    display: flex;
}

.learn-more-button:hover {
    background-color: var(--green);
}

.right-arrow {
    width: 18px;
}

.testimonial-card {
    background-color: var(--off-white);
    border-radius: 10px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 80px;
    padding: 50px;
    display: flex;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
    width: 100%;
}

._5-star {
    width: 235px;
}

.paragraph {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 24px;
}

.testi-name {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 700;
}

.cta {
    background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url('../images/617abfbdcf4b96b9fc779566_roof-replacement-p-500.webp');
    background-position: 0 0, 50%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
}

.cta-wrapper {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    display: flex;
}

.cta-contant {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 20px;
    display: flex;
}

.paragraph-2 {
    color: var(--white);
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 16px;
}

.cta-button-div {
    flex-flow: column;
    width: 30%;
    display: flex;
}

.button {
    grid-column-gap: .75rem;
    grid-row-gap: .75rem;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: var(--black);
    background-color: var(--green);
    color: #fff;
    text-transform: uppercase;
    -webkit-clip-path: polygon(2.5rem 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(2.5rem 0, 100% 0, 100% 100%, 0% 100%);
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50%;
    padding: 16px 16px 16px 40px;
    font-size: 16px;
    font-weight: 900;
    text-decoration: none;
    transition-property: all;
    transition-duration: .3s;
    transition-timing-function: ease;
    display: flex;
}

.button:hover {
    background-color: #329757;
}

.button-v2 {
    grid-column-gap: .75rem;
    grid-row-gap: .75rem;
    background-color: var(--off-white);
    color: #fff;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 2rem 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 2rem 100%);
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50%;
    padding: 16px 16px 16px 40px;
    font-size: 16px;
    font-weight: 900;
    text-decoration: none;
    transition-property: all;
    transition-duration: .3s;
    transition-timing-function: ease;
    display: flex;
}

.button-v2:hover {
    background-color: var(--white);
}

.button-v2.black {
    color: var(--green);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 2.5rem 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 2.5rem 100%);
    border-top: 1px solid #000;
}

.our-simple-process {
    width: 50%;
    margin-left: auto;
    padding-left: 20px;
}

._50 {
    background-image: linear-gradient(rgba(0, 0, 0, 0) 90%, #fff), linear-gradient(90deg, rgba(0, 0, 0, 0) 60%, #fff), url('../images/617ab74137daa16941f7d250_home-process-img.webp');
    background-position: 0 0, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat;
    background-size: auto, auto, cover;
    width: 50%;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: auto;
}

.simple-process-card-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    margin-top: 40px;
    display: flex;
}

.simple-process-card {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    border-bottom: 5px solid var(--green);
    background-color: var(--off-white);
    padding: 35px;
    display: flex;
}

.number-div {
    background-color: var(--green);
    color: var(--white);
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    width: 65px;
    min-width: 65px;
    height: 65px;
    min-height: 65px;
    font-family: Merriweather, serif;
    font-size: 33px;
    font-weight: 900;
    display: flex;
    position: relative;
}

.number {
    margin-top: 0;
    position: absolute;
    top: auto;
    bottom: 10px;
    left: auto;
    right: auto;
}

.card-heading {
    color: #686868;
    font-family: Merriweather Sans, sans-serif;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.2;
}

.paragraph-card-v2 {
    margin-top: 15px;
    margin-bottom: 0;
    font-size: 15px;
}

.map-card-wrapper {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-columns: 1.25fr 1fr;
    grid-auto-columns: 1fr;
    align-items: center;
    width: 100%;
    display: flex;
}

.map-card-contant {
    z-index: 1;
    background-color: var(--black);
    color: var(--white);
    -webkit-clip-path: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%);
    background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url('../images/617abfbdcf4b96b9fc779566_roof-replacement-p-500.webp');
    background-position: 0 0, 0 0;
    background-size: auto, auto;
    width: 60%;
    padding: 50px 70px 50px 50px;
    position: relative;
}

.card-heading-v2 {
    font-family: Merriweather, serif;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.2;
}

.faq {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1.5fr;
    grid-auto-columns: 1fr;
    margin-top: 80px;
    display: grid;
}

.faq-tittle-icon {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    word-break: normal;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    display: flex;
    position: relative;
}

.dropdown-list {
    background-color: rgba(221, 221, 221, 0);
    padding-left: 22px;
    padding-right: 22px;
    position: relative;
    overflow: hidden;
}

.dropdown-paragraph {
    color: var(--title-gray);
    letter-spacing: -.26px;
    margin-top: 5px;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    display: block;
}

.faq-dropdown {
    border: 2px solid var(--title-gray);
    background-color: var(--off-white);
    word-break: normal;
    flex-direction: column;
    width: 100%;
    display: flex;
}

.faq-icon {
    width: 16px;
    margin-top: 3px;
    position: relative;
}

.faq-tittle {
    color: var(--title-gray);
    white-space: normal;
    word-break: normal;
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2em;
}

.dropdown-toggle {
    color: #fff;
    word-break: normal;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-height: 60px;
    padding: 14px 22px;
    font-size: 48px;
    font-weight: 500;
    line-height: 1.1em;
    display: flex;
}

.faq-div {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    display: flex;
}

.testimonial-section {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100vh;
    display: flex;
    position: relative;
}

.slider-image-wrap {
    width: 50%;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: auto;
}

.slider-image-div {
    width: 100%;
    height: 100%;
}

.slide-nav {
    display: none;
}

.sliderr-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.slider-contant-wrap {
    background-color: var(--off-white);
    width: 50%;
    height: 100%;
    margin-left: auto;
    display: flex;
}

.testimonial-slider-image {
    width: 100%;
    height: 100%;
}

.testimonial-slider-contant {
    background-color: rgba(221, 221, 221, 0);
    width: 100%;
    height: 100%;
}

.slide-nav-2 {
    display: none;
}

.testimonial-card-v2 {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 50px 90px;
    display: flex;
}

.right-arrow-2 {
    color: var(--black);
    width: 50px;
    height: 60px;
    font-size: 35px;
    transition: all .3s;
    right: 20px;
}

.right-arrow-2:hover {
    color: var(--green);
}

.left-arrow {
    color: var(--black);
    width: 50px;
    height: 60px;
    font-size: 35px;
    transition: all .3s;
    left: 20px;
}

.left-arrow:hover {
    color: var(--green);
}

.right-arrow-3 {
    background-color: var(--blue);
    color: var(--white);
    width: 50px;
    height: 50px;
    font-size: 40px;
    transition: all .3s;
    top: auto;
    bottom: 0%;
    left: auto;
    right: 0%;
}

.right-arrow-3:hover {
    background-color: var(--white);
    color: var(--blue);
}

.left-arrow-2 {
    background-color: var(--blue);
    color: var(--white);
    width: 50px;
    height: 50px;
    transition: all .3s;
}

.left-arrow-2:hover {
    background-color: var(--white);
    color: var(--blue);
}

.left-arrow-2.left {
    font-size: 40px;
    top: auto;
    bottom: 0%;
    left: auto;
    right: 50px;
}

.footer-section {
    border-top: 4px solid var(--green);
    background-color: var(--dark-blue);
    padding-top: 60px;
    padding-bottom: 80px;
}

.footer {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-rows: auto;
    grid-template-columns: 1.25fr 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-bottom: 50px;
    display: grid;
}

.ft-tittle {
    color: var(--white);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.ft-link-div {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 20px;
    display: flex;
}

.ft-link {
    color: var(--white);
    text-decoration: none;
    transition: all .3s;
}

.ft-link:hover {
    color: var(--green);
}

.ft-border {
    background-color: var(--green);
    width: 45px;
    height: 8px;
    margin-top: 12px;
    transform: skew(-26deg);
}

.copyright-div {
    border-top: 1px solid rgba(255, 255, 255, .4);
    padding-top: 30px;
}

.copyright-text {
    color: var(--white);
    text-align: center;
}

.button-icon {
    width: 20px;
}

.aroow {
    color: var(--green);
    width: 27px;
    transform: skew(15deg);
}

.sosial {
    color: var(--white);
    transition: all .3s;
    overflow: hidden;
}

.sosial:hover {
    color: var(--green);
}

.sosial-icon {
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    display: flex;
}

.icon-2 {
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    display: flex;
    overflow: hidden;
}

.left-arrow-3,
.right-arrow-4,
.slide-nav-3 {
    display: none;
}

.about-slider-v2 {
    width: 100%;
    height: 100%;
    position: absolute;
}

.hero-wrapper-v2 {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    display: flex;
    position: relative;
}

.hero-section-v2 {
    border-bottom: 4px solid var(--green);
    padding-top: 130px;
    padding-bottom: 130px;
    position: relative;
}

.replacement-service {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    grid-template-rows: auto;
    grid-template-columns: 1.75fr 1fr;
    grid-auto-columns: 1fr;
    display: flex;
}

.replacement-service-contant {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
    height: 100%;
}

.text-block-4 {
    font-size: 14px;
}

.text-size-small {
    font-size: small;

    /* Adjust the font size as needed */
    white-space: normal;

    /* Ensures the text wraps */
    overflow-wrap: break-word;

    /* Breaks long words to fit within the container */
    word-wrap: break-word;

    /* Older specification for breaking long words */
    word-break: break-word;

    /* Ensures text breaks and wraps properly */
    hyphens: auto;

    /* Adds hyphens where applicable */
}

.paragraph-v3 {
    color: var(--title-gray);
    margin-top: 20px;
    margin-bottom: 0;
    font-family: Merriweather Sans, sans-serif;
    line-height: 1.8;
    font-weight: 100;
}

.paragraph-v4 {
    color: var(--title-gray);
    margin-bottom: 0;
    font-family: Inter, sans-serif;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 300;
}

.paragraph-v4 h2,
.paragraph-v4 h3 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 35px;
    font-weight: 800;
    line-height: 1.5;
    position: relative;
    margin-bottom: 3%;
}

.paragraph-v4 p {
    margin-bottom: 3%;
}

.heading-h3 {
    color: var(--title-gray);
    margin-top: 0;
    margin-bottom: 0;
    font-family: Merriweather Sans, sans-serif;
    font-size: 35px;
    font-weight: 800;
    line-height: 1.5;
    position: relative;
}

.services-form-contant {
    display: flex;
    overflow: visible;
}

.form-heading-contant {
    background-color: var(--green);
    -webkit-clip-path: polygon(50% 0%, 100% 30%, 100% 100%, 0% 100%, 0% 30%);
    clip-path: polygon(50% 0%, 100% 30%, 100% 100%, 0% 100%, 0% 30%);
    padding: 60px 16px 20px;
}

.form-heading {
    color: var(--white);
    text-align: center;
    font-family: Merriweather, serif;
    font-size: 24px;
    font-weight: 700;
}

.paragraph-form {
    color: var(--white);
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0;
}

.form-block {
    background-color: var(--white);
    margin-bottom: 0;
    padding: 18px;
    display: block;
}

.text-field {
    background-color: var(--off-white);
    color: #333;
    border: 1px solid rgba(0, 0, 0, .2);
    min-height: 36px;
}

.text-field::placeholder {
    color: #6f6e6e;
}

.select-field {
    color: #6f6e6e;
    border: 1px solid rgba(0, 0, 0, .2);
    min-height: 36px;
}

.textarea {
    background-color: var(--off-white);
    color: #333;
    border: 1px solid rgba(0, 0, 0, .2);
    min-height: 110px;
    margin-bottom: 15px;
}

.textarea::placeholder {
    color: #6f6e6e;
}

.submit-button {
    background-color: var(--green);
    text-transform: uppercase;
    width: 100%;
    min-height: 65px;
    font-size: 20px;
    font-weight: 700;
    transition: all .3s;
}

.submit-button:hover {
    background-color: #329757;
}

.services-form-block {
    margin-top: -254px;
    position: relative;
}

.why-choose-us-wrapper {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    align-items: start;
    margin-top: 90px;
    display: grid;
}

.image-div {
    width: 100%;
    height: 100%;
    margin-top: -45px;
}

.card-image-v2 {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.why-choose-us-contant {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    background-color: var(--black);
    background-image: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url('../images/617abfbdbe6493e7f9577403_emergency-roof-repair.webp');
    background-position: 0 0, 50%;
    background-size: auto, auto;
    flex-flow: column;
    margin-left: -66px;
    padding: 50px 40px;
    display: flex;
    position: relative;
}

.why-choose-us-card {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    display: flex;
}

.tick {
    width: 50px;
    min-width: 50px;
}

.card-heading-copy {
    color: var(--white);
    font-family: Merriweather, serif;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.2;
}

.paragraph-card-white {
    color: var(--white);
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 15px;
}

.warranties-financing {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    align-items: center;
    margin-top: 80px;
    display: grid;
}

.warranties-financing.margin-top-0 {
    margin-top: 0;
}

.warranties-financing-image-div {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    display: flex;
    position: -webkit-sticky;
    position: sticky;
    top: 40px;
}

.button-v3 {
    background-color: var(--green);
    color: var(--white);
    -webkit-clip-path: polygon(0% 0%, 92% 0%, 100% 50%, 92% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 92% 0%, 100% 50%, 92% 100%, 0% 100%);
    padding: 20px 40px 20px 27px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition-property: all;
    transition-duration: .3s;
    transition-timing-function: ease;
}

.button-v3:hover {
    background-color: var(--white);
}

.button-v3.margin-top {
    margin-top: 20px;
}

.button-v3.margin-top:hover {
    background-color: #329757;
}

.hero-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

.gradrient {
    background-image: linear-gradient(rgba(0, 0, 0, .44), rgba(245, 245, 245, .6));
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

.card-image-v3 {
    filter: hue-rotate(180deg);
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block;
}

.our-core-values-card-grid {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-top: 40px;
    display: grid;
}

.card-contant {
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: var(--blue);
    background-color: var(--off-white);
    -webkit-clip-path: polygon(0 1rem, 100% 0, 100% 100%, 0 100%, 0 0);
    clip-path: polygon(0 1rem, 100% 0, 100% 100%, 0 100%, 0 0);
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: -42px;
    padding: 65px 33px 33px;
    display: flex;
    position: relative;
}

.paragraph-3 {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 15px;
}

.about-card-logo-div {
    z-index: 1;
    background-color: var(--white);
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    margin-left: 13px;
    padding: 14px;
    display: flex;
    position: relative;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .11);
}

.hero-section-v3 {
    border-bottom: 4px solid var(--green);
    padding-top: 70px;
    padding-bottom: 70px;
    position: relative;
}

.span-link {
    color: var(--white);
    transition: all .3s;
}

.span-link:hover {
    color: var(--green);
}

.ft-text {
    color: var(--white);
}

.brand-ft {
    width: 270px;
    padding-left: 0;
}

.ft-logo-text-div {
    flex-flow: column;
    display: flex;
}

.ft-text-v2 {
    color: var(--white);
    width: 100%;
    max-width: 311px;
    margin-top: 20px;
}

.ft-tittle-v2 {
    color: var(--white);
    margin-top: 15px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.about-button-v2 {
    color: #fff;
    text-transform: uppercase;
    -webkit-clip-path: polygon(12% 0%, 100% 1%, 100% 100%, 12% 100%, 0% 50%);
    clip-path: polygon(12% 0%, 100% 1%, 100% 100%, 12% 100%, 0% 50%);
    background-color: #34861b;
    border-bottom: 2px solid #329757;
    justify-content: center;
    align-items: center;
    padding: 18px 26px 18px 28px;
    font-size: 16px;
    font-weight: 900;
    text-decoration: none;
    transition-property: all;
    transition-duration: .3s;
    transition-timing-function: ease;
    display: flex;
}

.buttom-banner {
    z-index: 9999;
    background-color: var(--blue);
    position: fixed;
    top: auto;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

.branner {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.branner-text {
    color: var(--white);
    font-weight: 500;
}

.button-buttom-div {
    grid-column-gap: 2px;
    grid-row-gap: 2px;
    display: flex;
}

.buttom-buttom {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    background-color: var(--green);
    color: var(--white);
    text-transform: uppercase;
    border-bottom: 2px solid #329757;
    justify-content: center;
    align-items: center;
    padding: 16px 25px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all .3s;
    display: flex;
    transform: none;
}

.buttom-buttom:hover {
    color: var(--white);
    background-color: #329757;
}

.buttom-buttom.white {
    background-color: var(--white);
    color: var(--black);
}

.buttom-buttom.white:hover {
    background-color: var(--off-white);
}

.aroow-v2 {
    color: var(--green);
    width: 25px;
    height: 25px;
}

.map {
    background-color: var(--off-white);
    width: 55%;
    height: 260px;
    margin-left: -102px;
    position: relative;
}

.success-message {
    background-color: var(--off-white);
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 16px;
}

.error-message {
    text-align: center;
    font-size: 16px;
}

.map-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: rgba(255, 255, 255, 0);

    /* Transparent background */
}

.blog1_list {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.padding-global {
    background-color: var(--off-white);
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.padding-global2 {
    background-color: var(--white);
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.padding-section-xlarge {
    padding: 4rem 0;
}

.padding-bottom {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

.blog_category-label {
    z-index: 2;
    color: #fff;
    background-color: #0b0580;
    padding: .25rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    position: relative;
}

.blog1_item {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
    width: 100%;
    max-width: 396px;
}

.container-large {
    width: 100%;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2rem;
}

.text-size-small {
    font-size: .875rem;
}

.blog3_item {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    transition: background-color .2s;
    max-width: 628px;
}

.blog3_image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-height: 32rem;
    transition: all .1s;
    display: block;
}

.blog3_image:hover {
    transform: scale(1.05);
}

.section_blog3 {
    background-color: var(--off-white);
}

.section_blog4 {
    background-color: var(--white);
}

.blog3_list {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.blog1_content {
    background-color: #fff;
    flex-direction: column;
    flex: 1;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 1.25rem;
    display: flex;
}

.blog1_image-wrapper {
    width: 100%;
}

.arrow-icon {
    justify-content: center;
    align-items: center;
    height: 1rem;
    display: flex;
}

.blog3_image-wrapper {
    z-index: 999;
    overflow: hidden;
}

.blog1_image {
    object-fit: cover;
    width: 100%;
    max-height: 16rem;
}

.blog1_item-link {
    z-index: 1;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

.blog3_content {
    background-color: var(--white);
    flex-direction: column;
    flex: 1;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 2rem;
    display: flex;
}

.blog1_content-wrapper {
    background-color: #262626;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    transition: background-color .1s;
    display: flex;
    position: relative;
}

.blog1_content-wrapper:hover {
    background-color: #2e2e2e;
}

.heading-style-h4 {
    font-family: Merriweather Sans, sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.4;
}

.blog3_content-wrapper {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    height: 100%;
    display: grid;
}

.icon-1x1-small {
    color: #0d0780;
    width: 20px;
    height: 20px;
    transition: all .3s;
}

.icon-1x1-small:hover {
    color: #4f52f4;
}

.pagination-wrapper {
    margin-top: 4rem;
}

.pagination-buttons {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.profile-block-header {
    z-index: 3;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    position: relative;
    gap: 15px;
    margin-bottom: 20px;
}

.profile-picture {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Ensures the image covers the div */
}

.profile-picture-wrapper {
    width: 50px;
    max-width: 50px;
    min-width: 50px;
    height: 50px;
    max-height: 50px;
    min-height: 50px;
    border-radius: 50%;

    /* Makes the div a circle */
    overflow: hidden;

    /* Ensures the image doesn't overflow the div */
    display: flex;

    /* Centers the image inside the div */
    align-items: center;

    /* Centers the image vertically */
    justify-content: center;

    /* Centers the image horizontally */
}

.title-small {
    color: #202146;
    margin-bottom: 4px;
    font-weight: 700;
}

.title-small.white {
    color: var(--title-gray);
}

.paragraph-detials-small {
    color: #9899ad;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 120%;
}

.paragraph-detials-small.white-50 {
    color: var(--title-gray);
}

.service-button-text-2 {
    text-decoration: none;
}

.service-button-banner-cta {
    padding-bottom: 0;
    text-decoration: none;
}

.service-button-banner-cta-2 {
    color: var(--green);
    text-decoration: none;
}

.achievement-value {
    font-family: Merriweather Sans, sans-serif;
}

.card-image-overlay {
    z-index: 1;
    object-fit: cover;
    background-color: rgba(11, 5, 128, .22);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

.aroow-2 {
    color: var(--white);
    width: 27px;
    transform: none;
}

.service-button-text-white {
    color: var(--white);
    text-decoration: none;
    transform: skew(10deg);
}

.blog-container {
    grid-column-gap: 29px;
    grid-row-gap: 29px;
    flex-flow: column;
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
}

.bold-text {
    font-size: 35px;
}

.text-block-5 {
    color: var(--title-gray);
    font-family: Merriweather Sans, sans-serif;
}

.replacement-service-page {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    grid-template-rows: auto;
    grid-template-columns: 1.75fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.flex {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    color: var(--title-gray);
    justify-content: center;
    align-items: center;
    display: flex;
}

.flex:hover {
    color: var(--green);
}

.content-area-contact-page {
    grid-column-gap: 23px;
    grid-row-gap: 23px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
}

.phone-text-contact-us {
    font-weight: 500;
    color: var(--green);
}

.service-form-card-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 50px;
}

.our-simple-process-finance {
    margin-left: auto;
    padding-left: 20px;
}

.simple-process-card-finance {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    border-bottom: 5px solid var(--green);
    background-color: var(--off-white);
    padding: 10px 35px;
    display: flex;
}

.button-v3-finance {
    background-color: var(--green);
    color: var(--white);
    padding: 20px 40px 20px 27px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: all .3s;
}

.button-v3-finance:hover {
    background-color: var(--white);
}

.button-v3-finance.margin-top {
    justify-content: center;
    align-items: center;
    width: auto;
    margin-top: 20px;
    display: flex;
}

.button-v3-finance.margin-top:hover {
    background-color: #329757;
}

.faq-finance {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1.5fr;
    grid-auto-columns: 1fr;
    margin-bottom: 80px;
    display: grid;
}

.heading-h2-finance {
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 2px #000;
    margin-top: 0;
    margin-bottom: 0;
    font-family: Merriweather, serif;
    font-size: 48px;
    font-weight: 900;
    line-height: 1.2;
    position: relative;
}

.heading-h2-finance.dark {
    color: #686868;
    text-shadow: none;
    font-family: Merriweather Sans, sans-serif;
    font-weight: 800;
}

.heading-h2-finance.dark.left {
    color: var(--title-gray);
    text-align: left;
    -webkit-text-stroke-color: #c0bebe;
    font-size: 33px;
}

.heading-h2-finance.left {
    text-align: left;
    font-family: Merriweather Sans, sans-serif;
}

.warranties-financing-grid {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    align-items: center;
    margin-top: 80px;
    display: grid;
}

.warranties-financing-grid.margin-top-0 {
    grid-template-columns: 1.75fr 1fr;
    margin-top: 0;
}

@media screen and (max-width: 991px) {
    .navigation {
        background-color: var(--white);
        max-width: 100%;
        padding-top: 10px;
        padding-bottom: 30px;
    }

    .menu-button {
        background-color: var(--blue);
        color: var(--white);
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        display: flex;
    }

    .menu-button.w--open {
        background-color: var(--green);
    }

    .brand {
        width: 180px;
    }

    .container-wrapper {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .button-div {
        padding-top: .7rem;
        padding-bottom: .7rem;
    }

    .dollar-icon {
        width: 30px;
        min-width: 30px;
        height: 30px;
        min-height: 30px;
        display: none;
    }

    .finance-message {
        display: flex;
    }

    .div-block-2 {
        justify-content: flex-start;
        align-items: center;
    }

    .hero-section {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .heading-h1 {
        font-size: 58px;
    }

    .hero-service-block {
        flex-flow: wrap;
    }

    .service-button {
        transition: all .3s;
    }

    .service-button:hover {
        background-color: #329757;
    }

    .service-button-text {
        transform: skew(15deg);
    }

    .hero-credential-block {
        flex-flow: wrap;
    }

    .achievment-heading {
        font-size: 40px;
    }

    .achievment-subheading {
        text-align: center;
        font-size: 27px;
    }

    .about-section {
        flex-flow: column;
    }

    .about-hk-right {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        width: 100%;
    }

    .about-content-right {
        padding-left: 4rem;
        padding-right: 4rem;
    }

    .heading-h2 {
        font-size: 44px;
    }

    .left-abt.slider-side {
        width: 100%;
        height: 500px;
        margin-left: 0;
        margin-right: 0;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0;
    }

    .about-button {
        width: 392px;
        transition: all .3s;
    }

    .about-button:hover {
        background-color: #329757;
    }

    .about-button-white {
        transition: all .3s;
    }

    .about-button-white.black {
        width: 50%;
        margin-left: -8px;
    }

    .section.v2 {
        grid-column-gap: 60px;
        grid-row-gap: 60px;
        flex-flow: column;
        padding-top: 0;
        display: flex;
    }

    .hide {
        display: none;
    }

    .hide-v2 {
        margin-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
        display: none;
    }

    .roofing-services {
        flex-flow: column;
        justify-content: flex-start;
        align-items: flex-start;
        display: flex;
    }

    .roofing-services-image-div {
        margin-bottom: 60px;
    }

    .roofing-services-card-grid {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 800px;
    }

    .roofing-services-image-card-contant {
        height: 300px;
    }

    .services-heading {
        font-size: 36px;
    }

    ._5-star {
        width: 170px;
    }

    .paragraph {
        font-size: 20px;
    }

    .cta-contant {
        max-width: 650px;
    }

    .cta-button-div {
        width: 50%;
    }

    .button,
    .button-v2 {
        transition: all .3s;
    }

    .our-simple-process {
        width: 100%;
        margin-left: 0;
        padding-left: 0;
    }

    ._50 {
        background-image: linear-gradient(rgba(0, 0, 0, 0) 76%, #fff), url('../images/617ab74137daa16941f7d250_home-process-img.webp');
        background-position: 0 0, 0 0;
        background-repeat: repeat, no-repeat;
        background-size: auto, cover;
        order: -1;
        width: 100%;
        height: 500px;
        position: relative;
        top: 0%;
        bottom: auto;
        left: 0%;
        right: 0%;
    }

    .map-card-contant {
        padding: 34px 52px 34px 34px;
    }

    .card-heading-v2 {
        font-size: 24px;
    }

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

    .testimonial-section {
        height: auto;
    }

    .testimonial-card-v2 {
        padding-left: 40px;
        padding-right: 40px;
    }

    .right-arrow-2 {
        right: 0;
    }

    .left-arrow {
        left: 0;
    }

    .slide-5 {
        width: 100%;
        height: 100%;
    }

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

    .hero-section-v2 {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .replacement-service {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .heading-h3 {
        display: block;
    }

    .form-heading-contant {
        width: 100%;
    }

    .services-form-block {
        width: 100%;
        max-width: 600px;
        margin-top: 0;
    }

    .tick {
        width: 30px;
        min-width: 30px;
    }

    .card-heading-copy {
        font-size: 22px;
    }

    .button-v3 {
        font-size: 20px;
    }

    .our-core-values-card-grid {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    .brand-ft {
        width: 220px;
    }

    .about-button-v2 {
        transition: all .3s;
    }

    .about-button-v2:hover {
        background-color: #329757;
    }

    .buttom-buttom {
        padding-left: 22px;
        padding-right: 22px;
        font-size: 14px;
        transition: all .3s;
    }

    .buttom-buttom:hover {
        background-color: #329757;
    }

    .aroow-v2 {
        width: 30px;
    }

    .map {
        margin-left: -82px;
    }

    .padding-bottom {
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
    }

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

    .blog3_content-wrapper {
        grid-column-gap: 0rem;
    }

    .service-button-text-white {
        transform: skew(10deg);
    }

    .replacement-service-page {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .service-form-card {
        flex-flow: column;
        justify-content: center;
        align-items: stretch;
        width: 100%;
        display: flex;
    }

    .text-block-6 {
        font-weight: 900;
    }

    .service-form-card-sticky {
        flex-flow: column;
        justify-content: center;
        align-items: stretch;
        width: 100%;
        display: flex;
    }

    .our-simple-process-finance {
        width: 100%;
        margin-left: 0;
        padding-left: 0;
    }

    .button-v3-finance {
        font-size: 20px;
    }

    .faq-finance {
        grid-template-columns: 1fr;
    }

    .heading-h2-finance {
        font-size: 44px;
    }

    .heading-h2-finance.dark.left {
        font-size: 35px;
    }

    .warranties-financing-grid.margin-top-0 {
        grid-template-columns: 2fr 1fr;
    }
}

@media screen and (max-width: 767px) {
    .container._1900 {
        padding-left: 0;
        padding-right: 0;
    }

    .menu-button {
        margin-top: 0;
        padding: 15px;
    }

    .brand {
        width: 160px;
    }

    .serving-areas-text-block {
        display: none;
    }

    .hero-section {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .heading-h1 {
        font-size: 44px;
    }

    .service-button-text {
        transform: none;
    }

    .hero-credential-block {
        grid-column-gap: 20px;
        grid-row-gap: 10px;
        margin-top: 20px;
    }

    .container-wrapper-achievments {
        grid-column-gap: 48px;
        grid-row-gap: 48px;
    }

    .achievment-heading {
        font-size: 34px;
    }

    .achievment-subheading {
        font-size: 20px;
    }

    .about-content-right {
        z-index: 3;
        padding: 2.5rem 2rem;
        overflow: visible;
    }

    .heading-h2 {
        font-size: 37px;
    }

    .heading-h2.left.center {
        text-align: center;
    }

    .left-abt.slider-side {
        height: 400px;
    }

    .about-button {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        width: 50%;
        font-size: 15px;
    }

    .about-button-white.black {
        margin-left: 0;
        font-size: 15px;
        transform: skew(0deg);
    }

    .section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .section.v2 {
        grid-column-gap: 40px;
        grid-row-gap: 40px;
    }

    .roofing-services-image-div {
        flex: 0 auto;
        margin-bottom: 40px;
        display: none;
    }

    .border {
        width: 100px;
        height: 6px;
        margin-top: 16px;
    }

    .roofing-services-image-card-contant {
        height: 270px;
        padding-bottom: 10px;
    }

    .services-heading {
        font-size: 35px;
    }

    .learn-more-button {
        padding-top: 17px;
        padding-bottom: 17px;
    }

    .testimonial-card {
        margin-top: 60px;
        padding: 40px 30px;
    }

    ._5-star {
        width: 140px;
    }

    .paragraph {
        font-size: 18px;
    }

    .cta-wrapper {
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        flex-flow: column;
    }

    .cta-contant {
        justify-content: flex-start;
        align-items: center;
        max-width: 100%;
        padding-right: 20px;
    }

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

    .cta-button-div {
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        flex-flow: row;
        width: 100%;
    }

    .button {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        border-bottom-style: none;
        padding-left: 16px;
        font-size: 15px;
    }

    .button-v2 {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        padding-left: 16px;
    }

    .button-v2.black {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        border-top-style: none;
        font-size: 15px;
    }

    ._50 {
        height: 400px;
    }

    .simple-process-card {
        padding-left: 25px;
        padding-right: 25px;
    }

    .number-div {
        width: 60px;
        min-width: 60px;
        height: 60px;
        min-height: 60px;
        font-size: 28px;
    }

    .card-heading {
        font-size: 22px;
    }

    .map-card-wrapper {
        flex-flow: column;
        grid-template-columns: 1fr;
    }

    .map-card-contant {
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%);
        width: 100%;
        padding: 30px;
    }

    .card-heading-v2 {
        font-size: 22px;
    }

    .faq {
        margin-top: 60px;
    }

    .dropdown-list {
        padding-left: 18px;
        padding-right: 18px;
    }

    .dropdown-paragraph {
        font-size: 15px;
    }

    .faq-icon {
        width: 14px;
        margin-top: 2px;
    }

    .faq-tittle {
        font-size: 16px;
    }

    .dropdown-toggle {
        min-height: 55px;
        padding: 10px 18px;
    }

    .faq-div {
        grid-column-gap: 18px;
        grid-row-gap: 18px;
    }

    .testimonial-section {
        flex-flow: column;
    }

    .slider-image-wrap {
        width: 100%;
        height: 400px;
        position: relative;
    }

    .slider-contant-wrap {
        width: 100%;
    }

    .testimonial-card-v2 {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .right-arrow-2,
    .left-arrow,
    .right-arrow-3 {
        width: 40px;
        height: 40px;
        font-size: 30px;
    }

    .left-arrow-2.left {
        width: 40px;
        height: 40px;
        font-size: 30px;
        right: 40px;
    }

    .footer-section {
        border-top-style: none;
    }

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

    .ft-tittle {
        font-size: 20px;
    }

    .ft-link-div {
        grid-column-gap: 8px;
        grid-row-gap: 8px;
    }

    .copyright-text {
        font-size: 15px;
    }

    .aroow {
        transform: none;
    }

    .hero-section-v2 {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .replacement-service {
        grid-column-gap: 40px;
        grid-row-gap: 40px;
    }

    .heading-h3 {
        font-size: 30px;
    }

    .form-heading {
        font-size: 22px;
    }

    .submit-button {
        min-height: 60px;
    }

    .why-choose-us-wrapper {
        grid-template-columns: 1fr;
        margin-top: 40px;
    }

    .image-div {
        height: 400px;
        margin-top: 0;
    }

    .why-choose-us-contant {
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        margin-left: 0;
        padding: 40px 30px;
    }

    .why-choose-us-card {
        grid-column-gap: 17px;
        grid-row-gap: 17px;
    }

    .card-heading-copy {
        font-size: 20px;
    }

    .warranties-financing {
        grid-template-columns: 1fr;
        margin-top: 60px;
    }

    .button-v3 {
        padding: 18px 30px 18px 22px;
        font-size: 18px;
    }

    .card-contant {
        padding-bottom: 30px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .about-card-logo-div {
        width: 70px;
        height: 70px;
    }

    .hero-section-v3 {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .brand-ft {
        width: 200px;
    }

    .ft-text-v2 {
        max-width: 100%;
    }

    .about-button-v2 {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        font-size: 15px;
    }

    .branner-text {
        display: none;
    }

    .button-buttom-div {
        width: 100%;
    }

    .buttom-buttom {
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        border-bottom-style: none;
        width: 50%;
        transform: skew(0deg);
    }

    .aroow-v2 {
        width: 16px;
    }

    .map {
        width: 100%;
        margin-left: 0;
    }

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

    .padding-global {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .padding-bottom {
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
    }

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

    .heading-style-h4 {
        font-size: 1rem;
    }

    .service-button-text-white {
        transform: none;
    }

    .replacement-service-page {
        grid-column-gap: 40px;
        grid-row-gap: 40px;
    }

    .simple-process-card-finance {
        padding-left: 25px;
        padding-right: 25px;
    }

    .button-v3-finance {
        padding: 18px 30px 18px 22px;
        font-size: 18px;
    }

    .faq-finance {
        margin-bottom: 60px;
    }

    .heading-h2-finance {
        font-size: 37px;
    }

    .warranties-financing-grid {
        grid-template-columns: 1fr;
        margin-top: 60px;
    }

    .warranties-financing-grid.margin-top-0 {
        grid-template-columns: 2fr;
    }
}

@media screen and (max-width: 479px) {
    .menu-button {
        color: #fff;
        background-color: #0b0580;
        border-radius: 50px;
        margin-top: 0;
    }

    .navbar-v1 {
        padding: 10px;
    }

    .container-wrapper {
        grid-column-gap: 5px;
        grid-row-gap: 5px;
        flex-flow: column;
        justify-content: center;
        align-items: center;
    }

    .sosial-div {
        display: none;
    }

    .phone {
        justify-content: center;
        align-items: center;
    }

    .container-wrapper-nav {
        grid-column-gap: 5px;
        grid-row-gap: 5px;
        flex-flow: row;
        justify-content: space-between;
        align-items: center;
        padding: 0;
    }

    .heading-h1 {
        font-size: 37px;
        line-height: 3rem;
    }

    .container-wrapper-hero {
        grid-column-gap: 5px;
        grid-row-gap: 5px;
        flex-flow: column;
        justify-content: center;
        align-items: center;
    }

    .service-button-text {
        transform: none;
    }

    .hero-credential-block {
        grid-column-gap: .5rem;
        grid-row-gap: .5rem;
        flex-flow: wrap;
    }

    .container-wrapper-achievments {
        grid-column-gap: 35px;
        grid-row-gap: 35px;
        flex-flow: column;
        justify-content: center;
        align-items: center;
    }

    .about-section {
        flex-flow: column;
    }

    .about-hk-right {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        width: 100%;
    }

    .about-content-right {
        padding-top: 2.1rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .heading-h2 {
        font-size: 32px;
    }

    .left-abt.slider-side {
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 300px;
        margin-left: 0;
        margin-right: 0;
    }

    .about-button-div {
        flex-flow: column;
    }

    .about-button,
    .about-button-white.black {
        width: 100%;
    }

    .roofing-services-image-div {
        display: none;
    }

    .roofing-services-image-card-contant {
        height: 250px;
    }

    .services-heading {
        font-size: 32px;
    }

    .cta-button-div {
        flex-flow: column;
    }

    ._50 {
        height: 320px;
    }

    .simple-process-card {
        grid-column-gap: 16px;
        grid-row-gap: 16px;
        padding: 26px 20px;
    }

    .number-div {
        width: 50px;
        min-width: 50px;
        height: 50px;
        min-height: 50px;
        font-size: 24px;
    }

    .number {
        bottom: 8px;
    }

    .slider-image-wrap {
        height: 300px;
    }

    .aroow {
        width: 18px;
    }

    .hero-wrapper-v2 {
        grid-column-gap: 5px;
        grid-row-gap: 5px;
        flex-flow: column;
        justify-content: center;
        align-items: center;
    }

    .hero-section-v2 {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .heading-h3 {
        font-size: 27px;
    }

    .image-div {
        height: 300px;
    }

    .why-choose-us-contant {
        padding-left: 20px;
        padding-right: 20px;
    }

    .tick {
        width: 20px;
        min-width: 20px;
    }

    .card-heading-copy {
        font-size: 18px;
    }

    .card-contant {
        padding: 60px 28px 28px;
    }

    .ft-text-v2 {
        max-width: 100%;
    }

    .about-button-v2 {
        width: 100%;
    }

    .buttom-buttom {
        grid-column-gap: 8px;
        grid-row-gap: 8px;
        padding: 14px 10px;
        font-size: 12px;
    }

    .aroow-v2 {
        width: 20px;
    }

    .padding-bottom {
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .blog3_list {
        grid-row-gap: 1.5rem;
    }

    .blog3_content {
        padding: 0;
    }

    .blog3_content-wrapper {
        grid-row-gap: 1rem;
        background-color: #fff;
        grid-template-columns: 1fr;
    }

    .blog-card_content {
        padding: 0 10px 11px;
    }

    .aroow-2 {
        width: 18px;
    }

    .service-button-text-white {
        transform: none;
    }

    .simple-process-card-finance {
        grid-column-gap: 16px;
        grid-row-gap: 16px;
        padding: 15px 20px;
    }

    .button-v3-finance.margin-top {
        width: 100%;
    }

    .heading-h2-finance {
        font-size: 32px;
    }
}

#w-node-c44b244e-11ba-f1b9-a455-618fb127db0e-cdef49f5 {
    align-self: start;
}

.h2-header-wrapper {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
}

/* **
Stars
** */
.stars {
    --percent: calc(var(--rating) / 5 * 100%);
    display: inline-block;
    font-size: 60px;
    font-family: Times;
    line-height: 1;
}

.stars::before {
    content: '★★★★★';
    letter-spacing: 2px;
    background: -webkit-gradient(linear, left top, right top, from(#fc0), to(#fff));
    background: linear-gradient(90deg, #fc0 var(--percent), #fff var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.warranties-financing-contant {
    height: 100%;
}

.map-contact-us-wrapper {
    position: relative;
    width: 100%;
    height: 350px;
}

.author-info-wrapper {
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    gap: 20px;
}

/* Custom About section styling */
.custom-row:before,
.custom-row:after {
    content: " ";
    display: table;
}

.custom-row:after {
    clear: both;
}

.custom-row {
    display: flex;
    flex-wrap: wrap;
}

.custom-column {
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

.custom-col-6 {
    width: 50%;
    padding-left: 10px;
    padding-right: 10px;
}

.custom-benefit {
    color: var(--white);
    background-image: url('../images/check_mark.svg');

    /* Corrected path */
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto 1em;
    margin-top: 2rem;
    padding-left: 3rem;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

@media (max-width: 767px) {
    .custom-col-6 {
        width: 100%;
    }
}

/* Zipcode label display */
.zip-display {
    margin-top: 10px;
    font-size: 16px;
}

.message-success {
    color: #5ac13b;

    /* green */
}

.message-error {
    color: #ff0000;

    /* red */
}