.maincontent {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    border: none;
}

/* h1, h2, h3 {
text-wrap: balance;
} */

.bold-text {
font-weight: 600;
}

.italic-text {
font-style: italic;
}

:root {  
    --primary-color: #6c6d6f;  
    --secondary-color: #8bc53f;  
    --blackish: #2b2b2b;  
    --font: "Poppins", "Montserrat", sans-serif;
    --accent-color: #8bc53f;
    --accent-color-alpha: #1a1a1a;
    --red-color: #eb2e1e;
    --border-color: #dadada;
    --cta-red:  #ff0021;
    --cta-green:#5cdb5c;
    --cta-yellow:#ffff00;
    --cta-orange:#ffa500;
    --cta-gold: #e3ba13;
    
}

p {
    color: #2f2f2f;
}

.center-content {
    text-align: center;
}


.square-button {  
    display: inline-block;  
    padding: 16px;  
    margin-top: 20px;  
    background: #ffffff;  
    border-radius: 3px;
    border: 3px solid var(--accent-color);
    box-shadow: 0 4px 5px -3px #333;  
    font-weight: bold;  
    color: var(--accent-color);  
    text-decoration: none;  
    text-transform: uppercase;  
    transition: ease-out 0.4s;
}

.square-button:hover {  
    opacity: 0.6;  
    color: white;  
    text-decoration: none;
}


.content-wrapper {
    max-width: 94%;
    width: 100%;
    margin: 5px auto;
    padding-block: 20px;
}



.intro-list {
list-style:none;
text-align: start;
color: #ffffff;
margin: 35px auto ;
}

.intro-list li {
margin-block: 10px;
font-size: 1.4rem;
font-weight: 700;
text-shadow: 2px 3px 7px #000000d9;
padding-block: 5px;
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.intro-list i {
color:var(--accent-color);
margin-right:12px;
vertical-align: middle;
font-weight: 800;
font-size: 1.48rem;
border-radius: 50%;
padding: 5px;
border: 3px solid #fff;
}




    /******* Intro Cards *******/

    .lp-intro-content {
        background: #f7f7f7;
        text-align: center;
    }

    .lp-intro-content h2 {
        color: #000000;
    }


    .intro-row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
        align-content: stretch;
        justify-content: center;
        margin-inline: auto;
        text-align: center;
        max-width: 100%;
        }
        
        .intro-card {
        position: relative;
        width: 31.5%;
        align-content: stretch;
        text-align: center;
        padding: 10px;
        margin: 16px auto;
        background-color: #fff;
        }

        
        .ic-image {
            position: relative;
            max-width: 280px;
            width: 100%;
            height: 280px;
            text-align: center;
            margin-inline: auto;
        }
        .intro-card img {
            width: 100%;
            border-radius: 50%;
            height: 100%;
            margin-inline: auto;
            border: 5px solid #e3e3e3;
        }

          .intro-card .description {
            padding: 5px;
          }

        .intro-card h3 {
            font-size: clamp(.4rem, .25vw + 1rem, 1.7rem);
            color: var(--accent-color);

        }

        .description p {
            color: #575757;
            margin-inline: auto;
            font-weight: 600;
            font-size: clamp(.4rem, .25vw + .8rem, 1.27rem);

        }

        .description ul {
            text-align: start;
            font-size: clamp(.85rem, .25vw + .7rem, 1.127rem);
        }
        


    .flex-row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 30px;
        align-items: center;
        padding-block: 45px;
        text-align: center;
    }

    .flex-row.fr-reverse {
        flex-direction: row-reverse;
    }

    .flex-row-text{
        flex-basis: 680px;
        flex-grow: 2;
    }

    .flex-row.fr-reverse .flex-row-text {
        position: relative;
        right: 0;
    }

    .flex-row-text p {
        text-align: start;
        width: 85%;
        margin-inline:auto;
    }

    
    .flex-row-image{
        flex-basis: 680px;
        flex-grow: 1;
text-align: center;
    }

    .flex-row-image img {
        max-width: 960px;
        width: 100%;
        margin-inline: auto;
    }

    /****** Landing Page Content *****/

    .h1-title {
        color: var(--accent-color);
        text-align: center;
        font-size: 2em;
font-weight: 600;
    }

    .h2-title {
        color: #000000;
        font-weight: 600;
    }

    .keyword-link {
        text-decoration: none;
        color: inherit;
    }

    .green-text{
        color: var(--accent-color)!important;
    }

    .why-hero-content {
        background-image: linear-gradient(120deg, #ffffff 30%, #ffffffcf 100%), url(/imageserver/UserMedia/MTRenovations/great-falls-bg.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
  padding: 40px 15px;
  margin-top: -20px;
  }


  .why-hero-content h2{
  text-align: center;
  font-weight: 200!important;
  }
  
  .why-hero-content p{
  max-width: 92ch;
  margin: auto;
  }


    .rs-bottom .global-row {
        max-width: 98.3%;
        width: 100%;
        margin-inline: auto;
    }

    .why-section1-content .global-row, 
    .why-section2-content .global-row {
        padding-block: 50px;
        justify-content: center;
        margin-inline: auto;
    }

    .why-section1-content {
        background-color: #ffffff;
        color: #000000;
    }

    .why-section1-content h1{
        font-size: 2.95em;
        margin-bottom: 15px;
        color: var(--accent-color);
}

    .why-section2-content h2
    .why-section3-content h2{
        font-size: 2.8em;
        margin-bottom: 15px;
        color: var(--accent-color);
        font-weight: 600;
    }

.home-svc-section h2,
.process-section-content h2,
.why-hero-content h2  {
        font-size: 1.4em;
        margin-bottom: 15px;
        color: #000;
        font-weight: 600;
}

    .why-section1-content h3:first-child {
        color: var(#494949);
    }

    .why-section2-content h3,
    .process-section-content h3{
        color: #000000;
    }


    .why-section2-content {
        background-color: var(--primary-color);
        color: #ffffff;
    }

.why-section2-content p {
color: #ffffff!important;
}

.why-section2-content .bold-text {
color: var(--accent-color);
}





/**** SERVICES CONTENT ******/

.home-svc-section {
    padding:35px 0px 60px;
    position: relative;
background: #eaeaea;
text-align: center;
}


.home-svc-title {
    text-align: center;
    padding: 40px 5px 20px;
}

.home-svc-title p {
    max-width: 88%;
    margin-left: auto;
    margin-right: auto;
    text-align: start;
}

.svc-text .underline-multi {
    margin: auto;
}

.svc-cards-home {
    max-width: 90%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    margin: auto;
    gap: 25px;
}

.svc-card {
    transition: all .4s cubic-bezier(0.175, 0.885, 0, 1);
    background-color: #fff;
    width: 88%;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 13px 10px -7px rgba(0, 0, 0,0.1);
margin-inline: auto;
}

.svc-card:hover {
  box-shadow: 0px 30px 18px -8px rgba(0, 0, 0,0.1);
transform: translateY(-8px);
}


.sc-1 .sc-img, .sc-1 .sc-img-hover {
    background-image: url('/imageserver/UserMedia/creativecontractors/roofing-service.jpg');
}

.sc-2 .sc-img, .sc-2 .sc-img-hover {
    background-image: url('/imageserver/UserMedia/creativecontractors/siding-green.jpg');
}

.sc-3 .sc-img, .sc-3 .sc-img-hover {
    background-image: url('/imageserver/UserMedia/creativecontractors/windows-service.jpg');
}

.sc-4 .sc-img, .sc-4 .sc-img-hover {
    background-image: url('/imageserver/UserMedia/creativecontractors/gutter-service.jpg');
}



.sc-img {
  visibility: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 235px;
  border-top-left-radius: 12px;
border-top-right-radius: 12px;
  
}


.sc-img-hover {
  transition: 0.2s all ease-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    position: absolute;
    height: 235px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    top: 0;
  
}

.sc-info {
z-index: 2;
  background-color: #fff;
  border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
   padding: 16px 24px 24px 24px;
}

.sc-text {
  color: #868686;
}

.sc-title {
    margin-top: 5px;
    margin-bottom: 10px;
}

.sc-title a {
color: #8bc53f;
text-decoration: none;
}

.sc-title a:hover {
color: #6c6d6f;
text-decoration: underline;
}

.sc-title span {
vertical-align: middle;
}


.svc-card .site_button {
    display: block;
    margin: auto;
    width: 140px;
    position: absolute;
    bottom: 7px;
    left: 120px;
}

.svc-card .site_button span {
    display: inline;
    max-width: 100%;
    margin: 10px auto 0px;
    font-size: 18px;
    text-align: center;
    border: none;
    border-radius: 0;
    color: #ffffff;
    background-color: transparent;
    padding: 3px;
}





/******Process Section ******/

.process-section-content {
    text-align: center;
    padding-block: 30px;
}

.process-section-content h2 {
    color: #000;
    font-weight: 600;
}

.process-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-block: 20px;
    position: relative;
    margin-inline: auto;
}

.process-item {
  padding: 15px;
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  transition: all 0.35s ease-in-out;
background: #fafafa;
border-radius: 10px;
}


.process-item .process-icon span {
    background: #fff;
    border-radius: 50%;
    border: 7px solid #000;
    color: #6d6e70;
    font-size: 75px;
    font-weight: 600;
    position: relative;
    text-align: center;
    transition: all 0.35s ease-in-out;
    margin: auto;
    padding: 8px;
}


.process-item .process-text h3 {
    margin: 5px auto;
    transition: all 0.35s ease-in-out;
    color: #ffffff;
background: #8bc53f;
padding: 4px 7px;
border-radius: 50%;
width: fit-content;
margin-inline: auto;
}

.process-item .process-text span {
    font-size: 55px;
    font-weight: 600;
    color: #ffffff;
    transition: transform all 0.25s ease-in-out;

}

.napw-info p {
text-align: center!important;
}

.napw-content a {
display: block;
text-decoration: none;
color: #5d5d5d;
}

/*********** Footer **********/


.footer_bottom_row {
    display: flex;
    flex-wrap: wrap;
    padding: 15px 20px;
    background: var(--accent-color);
}
.footer_bottom_row h4 {
    width: 33.3333333333%;
    text-align: center;
    color: #fff;
    font-weight: 600;
    margin: 0;
    padding: 15px 5px;
}
.footer_bottom_row h4 a {
    color: #fff;
}




/* 
@media (max-width: 1300px) {
    .intro-card h3 {
        font-size: 1.57vw;
    }

    .description p {
        font-size: 1.25vw;
    }

    .description ul {
        font-size: 1.26vw;
    }
    
}

@media (max-width: 1100px) {
    .intro-card h3 {
        font-size: 1.7vw;
    }

    .description p {
        font-size: 1.25vw;
    }

    .description ul {
        font-size: 1.42vw;
    }
    
} */


@media (max-width: 981px) {
.svc-cards-home,
.process-row  {
    grid-template-columns: 1fr!important;
}
}


@media (max-width: 680px) {

    .intro-card {
        width: 88.5%;
    }

    .process-row {
        grid-template-columns: repeat(2, 1fr)!important;
    }
        

}

@media (max-width: 490px) {


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

}

.orange-button {
background: #6d6e70!important;
}

.white-button:hover {
  opacity: 1!important;
  color: #000!important;
  text-decoration: none;
}

.white-button:hover a {
  color: #000!important;
  text-decoration: none;
}

.orange-button a {
    color: #ffffff!important;
}

.orange-button:hover {
  opacity: 1!important;
  color: #ffffff!important;
  text-decoration: none;
}

a:hover, a:focus {
    color: inherit;
    text-decoration: none;
}