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

body {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color      : #333;
    padding-top: 60px
}

header {
    background-color: #fff;
    padding         : 0.7rem;
    display         : flex;
    justify-content : center;
    align-items     : center;
    box-shadow      : 0 2px 4px rgba(0, 0, 0, .1);
    position        : fixed;
    top             : 0;
    left            : 0;
    right           : 0;
    z-index         : 1000
}

.header-content {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    width          : 100%;
    max-width      : 800px
}

.content-box {
    box-sizing: border-box
}

.content-box ol li {
    margin-left    : 20px;
    list-style-type: disc
}

.fonts-light {
    font-weight: 400
}

.logo {
    max-width      : 300px;
    height         : auto;
    font-family    : "Lilita One", sans-serif;
    font-size      : 140%;
    display        : flex;
    align-content  : center;
    justify-content: center;
}

.logo img {
    height: 40px
}

.header-right {
    display    : flex;
    align-items: center
}

.service-text {
    font-weight : 700;
    margin-right: 1rem
}

.divider {
    height          : 20px;
    width           : 1px;
    background-color: #333;
    margin          : 0 1rem
}

.phone-cta {
    display    : flex;
    align-items: center
}

.phone-number {
    font-weight    : 700;
    font-size      : 1.2rem;
    margin-right   : .5rem;
    color          : inherit;
    text-decoration: none
}

.phone-link {
    color          : inherit;
    text-decoration: none;
    font-weight    : 800;
    border-bottom  : 2px solid #b32d2e;
    padding-bottom : 2px;
    transition     : border-bottom-color .3s ease
}

.phone-link:hover {
    border-bottom-color: orange
}

.operator-image {
    width           : 50px;
    height          : 50px;
    border-radius   : 50%;
    background-color: #ddd;
    background-image: url(../images/customer-support.webp);
    background-size : cover;
    border          : 2px solid #42f572
}

.hero {
    background-image   : url(../images/roofing-background.jpg);
    background-color   : #ccc;
    background-size    : cover;
    background-position: center;
    min-height         : 400px;
    padding            : 2rem 1rem;
    text-align         : center;
    color              : #fff;
    margin-bottom      : 1rem;
    padding-top        : 70px;
}

.hero-content {
    max-width    : 1200px;
    margin       : 0 auto;
    padding      : 2rem;
    border-radius: 10px
}

h1,
h3,
h4 {
    font-family: Roboto, sans-serif
}

h1 {
    font-size    : 3rem;
    margin-bottom: 1rem;
    font-weight  : 800
}

h3 {
    font-size    : 1.5rem;
    margin-bottom: 2rem;
    color        : #e6e6e6
}

.h3hero {
    color      : hsla(0, 0%, 100%, .8);
    font-weight: 500
}

h3 a {
    color          : #e6e6e6;
    text-decoration: underline
}

.cta-button {
    display         : inline-flex;
    align-items     : center;
    background-color: #b32d2e;
    color           : #fff;
    font-size       : 1.25rem;
    font-weight     : 700;
    text-decoration : none;
    padding         : 1rem 2rem;
    border-radius   : 50px;
    margin-bottom   : 2rem;
    transition      : background-color .3s ease
}

.cta-button:hover {
    background-color: #b32d2e
}

.cta-button .arrow {
    margin-left: .5rem;
    font-size  : 1.5rem
}

@keyframes slowBounce {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-3px)
    }
}

.hero .cta-button {
    display         : inline-flex;
    align-items     : center;
    background-color: #b32d2e;
    color           : #fff;
    font-size       : 1.5rem;
    font-weight     : 700;
    text-decoration : none;
    padding         : 1rem 2rem;
    border-radius   : 50px;
    margin-bottom   : 1.5rem;
    transition      : background-color .3s ease;
    animation       : slowBounce 2s ease-in-out infinite
}

.hero .cta-button:hover {
    background-color    : #b32d2e;
    animation-play-state: paused
}

.stars {
    color        : gold;
    font-size    : 2rem;
    margin-bottom: .5rem
}

h4 {
    font-size    : 1.25rem;
    margin-bottom: 2rem
}

.trust-signals {
    display        : flex;
    justify-content: space-between;
    flex-wrap      : wrap;
    gap            : 1rem
}

.trust-signal {
    flex-basis   : calc(25% - 1rem);
    display      : flex;
    align-items  : center;
    padding      : 1rem;
    border-radius: 8px;
    text-align   : left;
    font-weight  : 600;
    color        : hsla(0, 0%, 100%, .8)
}

.trust-signal .check {
    color       : #4caf50;
    margin-right: .7rem;
    font-size   : 2rem
}

.main-section {
    display  : flex;
    max-width: 1200px;
    margin   : 0 auto;
    padding  : 4rem 2rem
}

.mobile-top-image {
    display      : none;
    width        : 100%;
    max-width    : 344px;
    height       : auto;
    margin       : -50px auto 20px;
    border-radius: 8px;
    box-shadow   : 0 4px 6px rgba(0, 0, 0, .1)
}

.left-column {
    flex        : 0 0 340px;
    margin-right: 2rem
}

.sticky-box {
    width           : 340px;
    height          : 420px;
    background-color: #fff;
    box-shadow      : 0 0 10px rgba(0, 0, 0, .1);
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    position        : sticky;
    top             : 100px;
    overflow        : hidden
}

.sticky-box img {
    width     : 100%;
    height    : 200px;
    object-fit: cover
}

.bottom-text-uu {
    font-weight: 700;
    display    : block;
    padding-top: 40px;
    margin-top : 20px;
    border-top : 2px #c7c7c7 solid
}

.sticky-box h3 {
    font-size: 1.2rem;
    margin   : 1rem 0 .5rem;
    color    : #000
}

.sticky-box p {
    text-align   : center;
    margin-bottom: 1rem;
    padding      : 0 1rem
}

.diskl {
    display      : block;
    width        : 100%;
    border-bottom: 1px solid #d9d9d9;
    padding      : 5px;
    text-align   : left;
    margin-bottom: 15px
}

.diskl-text {
    display     : block;
    text-align  : left;
    padding-left: 300px
}

.sticky-box .cta-button {
    background-color: #b32d2e;
    color           : #fff;
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : .5rem 1rem;
    text-decoration : none;
    font-weight     : 700;
    border-radius   : 0;
    width           : 85%;
    margin-top      : auto;
    margin-bottom   : 1rem
}

.sticky-box .cta-button .phone-icon {
    margin-right: .5rem
}

.right-column {
    flex: 1
}

.content-box {
    margin-bottom: 2rem;
    font-size    : 16px
}

.content-box h2 {
    font-size    : 2.2rem;
    margin-bottom: 1rem;
    line-height  : 48px
}

.content-box h3 {
    font-size: 1.2rem;
    margin   : 1rem 0 1rem 0;
    color    : #333
}

.bullet-list {
    display        : flex;
    flex-wrap      : wrap;
    list-style-type: none;
    gap            : .3rem 3rem;
    margin         : 2.2rem 0 2.2rem 0;
    justify-content: flex-start
}

.text-block-colum {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-around;
    gap            : 15px
}

.text-block-colum p {
    display: block;
    width  : calc(50% - 10px)
}

.bullet-list li {
    display    : flex;
    flex-basis : calc(50% - 40px);
    max-width  : 100%;
    align-items: center
}

.bullet-list li .text {
    display      : flex;
    width        : 300px;
    border-bottom: #d9d9d9 solid 1px;
    padding      : .5rem
}

.bullet-list li span {
    border-bottom: #d9d9d9 solid 1px;
    padding      : .5rem .1rem .5rem .5rem
}

.bullet-list-2col {
    display        : flex;
    flex-wrap      : wrap;
    list-style-type: disc;
    padding-left   : 1.5rem;
    gap            : .3rem;
    margin         : 2.2rem 0 2.2rem 0
}

.bullet-list-2col li {
    flex-basis: calc(50% - 1rem);
    padding   : .5rem 0
}

.review-box {
    background-color: #f5f5f5;
    padding         : 1rem;
    border-radius   : 8px;
    margin-bottom   : 2rem
}

.review-box h3 {
    margin-bottom: .5rem;
    color        : #000;
    font-size    : 1rem
}

.review-text {
    font-style   : italic;
    margin-bottom: 1rem
}

.review-author {
    display    : flex;
    align-items: center
}

.author-image {
    width        : 40px;
    height       : 40px;
    border-radius: 50%;
    margin-right : 1rem
}

.author-name {
    flex-grow: 1
}

.review-stars {
    color: gold
}

footer {
    background-color: #18181b;
    color           : #fff;
    padding         : 4rem 2rem;
    text-align      : center
}

.footer-cta {
    max-width: 800px;
    margin   : 0 auto 2rem
}

.footer-cta h2 {
    font-size: 1.5rem
}

.footer-cta h3 {
    font-size    : 2rem;
    margin-bottom: 1rem
}

.footer-cta p {
    font-size    : 1.5rem;
    margin-bottom: 1rem
}

.footer-cta a {
    color          : #fff;
    font-weight    : 700;
    text-decoration: underline
}

.legal-links {
    margin-bottom: 2rem
}

.legal-links a {
    color          : #fff;
    text-decoration: none;
    margin         : 0 1rem
}

.disclaimer {
    font-size: .8rem;
    width    : 1200px;
    max-width: 100%;
    margin   : 0 auto;
    opacity  : .7
}

.mobile-sticky-cta-box {
    display: none
}

.popup {
    display         : none;
    position        : fixed;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background-color: rgba(0, 0, 0, .7);
    z-index         : 1000;
    overflow-y      : auto
}

.popup-content {
    background-color: #fff;
    margin          : 5% auto;
    padding         : 20px;
    width           : 80%;
    max-width       : 800px;
    border-radius   : 5px;
    position        : relative
}

.popup-content h2 {
    margin-bottom: 20px;
    color        : #000
}

.popup-content h3 {
    margin-top   : 20px;
    margin-bottom: 10px;
    color        : #000
}

.popup-content ul {
    padding-left : 20px;
    margin-bottom: 10px
}

.popup-content button {
    position        : sticky;
    bottom          : 20px;
    left            : 100%;
    background-color: #b32d2e;
    color           : #fff;
    border          : none;
    padding         : 10px 20px;
    cursor          : pointer;
    border-radius   : 5px
}

.popup-content button:hover {
    background-color: #b32d2e
}

.footer {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-between;
    padding        : 20px
}

.footer-column {
    width          : 100%;
    display        : flex;
    justify-content: center;
}

.footer-column h3 {
    margin-bottom: 10px;
    text-align   : left;
    font-size    : 1.2rem;
    font-weight  : 500
}

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

.footer-column ul li {
    margin-bottom: 8px;
    text-align   : left
}

.footer-column ul li a {
    font-weight    : 300;
    color          : inherit;
    text-decoration: none
}

@media (max-width:1100px) {
    .footer-column {

        width        : 100%;
        margin-bottom: 20px
    }
}

@media (max-width:860px) {
    .footer-column {
        width: 100%
    }

    .diskl-text {
        padding-left: 150px
    }
}

@media (max-width:768px) {
    body {
        padding-top: 60px
    }

    .mobile-sticky-cta-box {
        display         : none;
        position        : fixed;
        bottom          : -100%;
        left            : 0;
        right           : 0;
        background-color: #fff;
        box-shadow      : 0 -2px 10px rgba(0, 0, 0, .1);
        padding         : 15px;
        z-index         : 1000;
        transition      : bottom .3s ease-in-out
    }

    .mobile-sticky-cta-box.visible {
        bottom: 0
    }

    .mobile-sticky-cta-box .cta-button {
        display         : flex;
        justify-content : center;
        align-items     : center;
        width           : 100%;
        text-align      : center;
        background-color: #b32d2e;
        color           : #fff;
        font-size       : 1.25rem;
        font-weight     : 700;
        text-decoration : none;
        padding         : 1rem 2rem;
        border-radius   : 0;
        margin-bottom   : 10px
    }

    .mobile-sticky-cta-box .cta-button .arrow {
        margin-left: 10px
    }

    .sticky-bullet-points {
        display        : flex;
        justify-content: space-between;
        font-size      : .9rem
    }

    .header-content {
        justify-content: space-between
    }

    .divider,
    .operator-image,
    .service-text {
        display: none
    }

    .logo {
        order: 1
    }

    .logo img {
        height    : 30px;
        margin-top: 8px
    }

    header {
        padding: .5rem 1rem .5rem 1rem
    }

    .header-right {
        order: 2
    }

    .phone-number {
        font-size: 1rem
    }

    .hero {
        padding: 2rem 0;

        padding-top: 70px;
    }

    .hero-content {
        padding      : 1rem;
        border-radius: 0
    }

    h1 {
        font-size    : 2.5rem;
        margin-bottom: .5rem
    }

    h3 {
        font-size    : 1.1rem;
        margin-bottom: 1rem
    }

    .hero .cta-button {
        font-size      : 1.2rem;
        padding        : 1rem 2rem;
        width          : 94%;
        justify-content: center
    }

    .hero h1 {
        line-height: 52px
    }

    .stars {
        font-size    : 1.5rem;
        margin-bottom: .5rem
    }

    h4 {
        font-size    : 1rem;
        margin-bottom: 1rem
    }

    .trust-signal {
        flex-basis   : calc(50% - .5rem);
        font-size    : .8rem;
        padding      : .5rem;
        margin-bottom: 18px
    }

    .main-section {
        flex-direction: column;
        padding       : 2rem 1rem
    }

    .left-column {
        display: none
    }

    .bullet-list li {
        width: calc(50% - 20px)
    }

    .text-block-colum p {
        display: block;
        width  : 100%
    }

    .footer-cta h2 {
        font-size: 1rem
    }

    .bullet-list {
        gap: 15px
    }

    .footer-cta h1 {
        font-size: 2.1rem
    }

    .footer-cta p {
        font-size: 1.2rem
    }

    .mobile-top-image {
        display: block
    }

    .bullet-list-2col li {
        flex-basis: 100%
    }

    .bullet-list.exem li {
        font-size: 14px
    }

    .content-box h2 {
        font-size  : 1.6rem;
        line-height: 38px
    }

    .content-box h3 {
        font-size: 1.2rem
    }
}

@media (max-width:560px) {
    .bullet-list li {
        width     : 100%;
        flex-basis: 100%
    }

    .footer-column {
        width: 100%
    }

    .diskl-text {
        padding-left: 20px
    }
}

.geo-block {
    display         : inline-flex;
    padding         : 5px 15px;
    align-items     : flex-end;
    background-color: rgb(165 42 42 / 12%);
    border-radius   : 5px;
    border-bottom   : solid 2px rgb(165 42 42);
    gap             : 15px
}

.geo-block .icon {
    background-image   : url(../images/location_marker_5d12n9oqekd2.svg);
    background-repeat  : no-repeat;
    background-size    : contain;
    background-position: center center;
    width              : 30px;
    height             : 30px
}

body {
    font-family     : Roboto, sans-serif;
    background-color: #fff;
    padding         : 40px
}

.features-section {
    background-color: #fff;
    padding         : 3rem 1rem
}

.features {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-between;
    max-width      : 1000px;
    margin         : auto;
    gap            : 2rem
}

.feature {
    flex      : 1 1 calc(25% - 2rem);
    text-align: center;
    color     : #fff
}

.feature i {
    font-size    : 36px;
    margin-bottom: 10px
}

.feature .top-text {
    font-size     : 12px;
    text-transform: uppercase;
    font-weight   : 700;
    color         : #fff
}

.feature .bottom-text {
    font-size  : 20px;
    font-weight: 700
}

body {
    font-family     : 'Roboto', sans-serif;
    line-height     : 1.6;
    margin          : 0;
    padding         : 0;
    background-color: #fff;
    color           : #333;
}

.container {
    max-width: 800px;
    margin   : auto;
    padding  : 20px;

}

.cta-button {
    background-color: #007bff;
    color           : white;
    padding         : 12px 20px;
    border          : none;
    border-radius   : 5px;
    font-size       : 16px;
    text-decoration : none;
    display         : inline-block;
    margin-top      : 10px;
}

.section {
    margin-bottom: 40px;
}

ul {
    padding-left: 20px;
}

.testimonial-box {
    background-color: #f1f1f1;
    padding         : 20px;
    border-radius   : 8px;
    margin-bottom   : 20px;
}

.testimonial-title {
    font-weight  : 700;
    margin-bottom: 10px;
}

.testimonial-text {
    font-style   : italic;
    margin-bottom: 20px;
}

.testimonial-author {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
}

.testimonial-author img {
    width        : 40px;
    height       : 40px;
    border-radius: 50%;
    margin-right : 10px;
}

.author-name {
    font-weight: bold;
}

.stars {
    color    : #f7c948;
    font-size: 18px;
}

.author-info {
    display    : flex;
    align-items: center;
}

.sticky-cta {
    position      : fixed;
    bottom        : 0;
    width         : 100%;
    background    : #007bff;
    color         : white;
    text-align    : center;
    padding       : 12px;
    z-index       : 1000;
    display       : flex;
    flex-direction: column;
    align-items   : center;
}

.sticky-cta a {
    color          : white;
    font-weight    : bold;
    font-size      : 18px;
    text-decoration: none;
}

.sticky-points {
    font-size : 14px;
    margin-top: 6px;
}

.step-flow {
    border-left : 3px dashed #E6E7E8;
    padding-left: 20px;
    margin-left : 20px;
}

.step {
    margin-bottom: 40px;
    position     : relative;
}

.step:before {
    content          : "";
    position         : absolute;
    left             : -33px;
    top              : 0;
    width            : 30px;
    height           : 30px;
    background-size  : contain;
    background-repeat: no-repeat;

}

.step.call:before {
    background-image: url('../images/455705.png');
    /* Flat phone icon */
}

.step.schedule:before {
    background-image: url('../images/2886665.png');
    /* Flat calendar icon */
}

.step.resolve:before {

    background-image: url('../images/4071397.png');
}

.detail-section {
    background-color: #f5f9fc;
    padding         : 40px 20px;
}

.detail-section h2 {
    font-size    : 28px;
    font-weight  : 700;
    margin-bottom: 20px;
    color        : #1a1a1a;
}

.detail-section p {
    color        : #333;
    font-size    : 16px;
    line-height  : 1.6;
    margin-bottom: 15px;
}

.pest-grid {
    display              : grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap                  : 20px;
    margin-top           : 30px;
}

.pest-grid ul {
    list-style: none;
    padding   : 0;
    margin    : 0;
}

.pest-grid li {
    margin-bottom: 10px;
    font-size    : 15px;
    color        : #222;
}