body,
html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size:18px;
    font-family: "Poppins", sans-serif;
}

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

.maincontent_wrapper {
    padding-top: 0;
}
#reusable h1{
    font-size:48px;
}

#reusable img {
    width: 100%;
}
p{
    line-height:1.8rem;
}
.r-container{
    max-width:1400px;
    padding-inline:2%;
    padding-block:5%;
    margin:0 auto;
}

.r-header{
    max-width:1000px;
    padding:2%;
    margin:0 auto;
    text-align: center;
}
.heavy{
    font-weight:700;
    text-transform: uppercase;
}
.thin{
    font-weight:200;
    text-transform: uppercase;
}
.services-title{
    margin-left:-5%;
}
ul li{
    position: relative;
    list-style-type: none;
    line-height:1.8rem;
}
ul li::before{
    position: absolute;
    content:"";
    height: 8px;
    width: 8px;
    border: 1px solid #000;
    top: 12px;
    left: -15px;
    transform: rotate(45deg);
}
.r-hero{
    position: relative;
    max-height:100vh;
    overflow: hidden;
    display:grid;
}
.r-hero-bg{
    grid-column:1/2;
    grid-row:1/2;
}
.r-hero-content{
    grid-column:1/2;
    grid-row:1/2;
    position: relative;
    max-height:100vh;
}
#r-hero-logo{
    position: absolute;
    top:5%;
    left:5%;
    max-width:clamp(50px, 15vw, 400px);
}
#hero-text{
    top:35%;
    left:5%;
    position: absolute;
    color:#fff;
}
.title-box{
    overflow:hidden;
}
.subtitle-box{
    overflow:hidden;
}
.r-hero-title{
    text-transform: uppercase;
    font-weight:700;
    transform:translateY(110%);
    margin-top:0;
}
.subtitle{
    opacity:0;
    font-style:italic;
}
.main-text{
    max-width:600px;
}
.img-grid{
    display:grid;
    align-items: center;
    justify-content: center;
    height:100%;
}
#reusable #main-img{
    max-width:300px;
    opacity:0;
}
.r-section2{
    overflow:hidden;
}
#comm-services-img{
    margin-top:-300px;
    align-self:center;
    clip-path: polygon(10% 7%, 100% 0%, 100% 90%, 0% 90%);
    max-width:300px;
    opacity:0;
}
#comm-services-img-mobile{
    display:none;
}
.comm-services{
    max-width:700px;
    margin:0 auto;
    padding-inline:2%;
}
.res-services{
    max-width:700px;
    padding-inline:2%;
    margin:10% auto 0;
}
.r-section4{
    margin-top:5%;
}
#res-services-img{
    grid-column:1/2;
    grid-row:1/2;
    max-width:700px;
    align-self:center;
    clip-path: polygon(0% 0%, 100% 0%, 94% 82%, 0% 100%);
    max-width:300px;
    opacity:0;
}
#roof-img{
    max-width:300px;
    opacity:0;
}
#roof-services-img{
    grid-column:2/3;
    grid-row:1/2;
    align-self:center;
    clip-path: polygon(0% 0%, 4% 100%, 100% 100%, 100% 0%);
    max-width:300px;
    opacity:0;
}
#roof-services-img-mobile{
    display:none;
}
.roof-services{
    max-width:700px;
    margin:0 auto;
    padding-inline:2%;
}
.my-grid{
    display:grid;
}
@media screen and (max-width:992px) {
    #reusable h1{
        font-size:32px;
    }
    #reusable h2{
        font-size:24px;
    }
    .r-hero-title{
        text-transform: uppercase;
        font-weight:700;
        transform:translateY(25%); 
        margin-top:0;
    }
    .title-box{
        overflow:visible;
    }
    .subtitle-box{
        overflow:visible;
    }
    .main-text{
        text-align: center;
        margin:0 auto;
        padding-inline:2%;
    }
    .comm-services p{
        text-align: center;
    }
    .comm-services h2{
        text-align: center;
        margin-top:20px;
    }
    #comm-services-img{
        display:none;
    }
    #comm-services-img-mobile{
        display:block;
    }
    .res-services p{
        text-align: center;
    }
    .res-services h2{
        text-align: center;
    }
    #res-services-img{
        margin:0 auto;
        max-width:100%;
        clip-path: revert;
    }
    .roof-services p{
        text-align: center;
    }
    .roof-services h2{
        text-align: center;
    }
    #roof-services-img{
        display:none;
    }
    #roof-services-img-mobile{
        display:block;
    }
    
    ul li{
        display:inline;
        margin-block:5px;
        list-style-type: disc;
        text-align:center;
    }
    ul li::before{
        display:none;
    }
}
@media screen and (max-width:600px) {
    body,
html {
    font-size:14px;
}
    #reusable h1{
        font-size:1rem;
    }
    #reusable .subtitle-box h2{
        font-size:1rem;
        margin-top:0;
    }
}