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 img {
    width: 100%;
}


#reusable h2{
    font-size:clamp(18px, 3vw, 36px);
}

.thin{
    font-weight:200;
}
.highlight{
    color:#78A22E;
}

  .r-hr{
    margin:75px auto;
    max-width:50%;
    border: 0; 
    height: 1px; 
    background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
  }
.r-container{
    max-width:1800px;
    padding-inline:3%;
    margin:0 auto;
}

.r-header{
    max-width:1200px;
    padding:0 2% 2%;
    margin:0 auto;
    text-align: center;
}
#reusable h2{
    margin-top:0;
    padding-top:0;
}

.r-hero{
    background-image: 
    linear-gradient(to bottom, rgba(255,255,255,0.5) 70%, rgba(255,255,255,1)),
    url('/imageserver/Reusable/provia/provia-windows/hero.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height:clamp(200px, 30vw, 600px);
    position: relative;
}
.r-hero-container{
    display:grid;
    place-content: center;
    height:100%;
    color:#000;
}
.r-hero-container h1{
    font-size:clamp(24px, 5vw, 60px);
    font-weight:700;
}
#r-hero-logo{
    max-width:clamp(100px, 15vw, 300px);
    position: absolute;
    top:5%;
    left:2%;
}
.svg-list{
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content: space-evenly;
}
.why-card{
    max-width:350px;
    text-align: center;
}


.sec3-grid{
    display:grid;
    grid-template-columns: 2fr 1fr 3fr;
    gap:25px;
    max-width:1500px;
    padding:0 4%;
    margin:0 auto;
}
.sec3-grid-left{
    grid-column: 1/3;
    grid-row:2/3;
}
.sec3-grid-right-text{
    grid-column: 3/4;
    grid-row:2/3;
    align-self:flex-start;
    justify-self: flex-end;
    max-width:700px;
    margin-top:35px;
}
.sec3-grid-right-icons{
    grid-column: 1/4;
    grid-row:1/2;
    align-self:flex-end;
    justify-self: flex-end;
    background:#fafafa;
    filter:drop-shadow(5px 5px 8px rgba(0,0,0,0.3));
    padding:1%;
    margin:0 0 -50px 0;
}
.sec3-grid-right-icons .menu{
    display:flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
    /* max-width:900px;
    min-width:800px; */
}
.showSingle{
    display:inline-block;
    width:150px;
    /* min-height:200px; */
    display:grid;
    justify-content: center;
    text-align:center;
    padding:10px 0;
    cursor:pointer;
    position: relative;
    color:#434E6E;
}
.product-image{
    position: relative;
}
.product-image::before{
    content:"";
    position: absolute;
    top:-25px;
    left:-25px;
    height:80%;
    width:40%;
    border:2px solid #78A22E;
}
.product-image::after{
    content:"";
    z-index:-1;
    position: absolute;
    bottom:-25px;
    right:55px;
    height:80%;
    width:40%;
    border:2px solid #2F3328;
}
#myImage{
    max-width:600px;
    filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.5));
}

.showSingle img{
    max-width:100px;
}
#picture::before{
    width:0px;
}
#corner::after{
    width:0px;
}
#specialty::after{
    width:0px;
}
#sliding::after{
    width:0px;
}
#single-hung::before,#single-hung::after{
    width:0px;
}
.product-cards{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-evenly
}
.card{
    position: relative;
    margin-block:20px;
    filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.4));
    transition:.3s;
}
.card:hover{
    transform:translateY(-2px) translateX(.5px);
    transition:.3s;
}
.card-title{
    position: absolute;
    bottom:0;
    left:50%;
    transform:translate(-50%, 0);
    font-size:2.5rem;
    color:#fff;
    background-color:#78A22E;
    padding:3% 8%;
    border-radius:10px;
}
.card-image{
    max-width:600px;
}

@media screen and (max-width:992px) {
    .sec3-grid-right-text{
        grid-column: 1/4;
        grid-row:3/4;
        align-self:flex-start;
        justify-self: center;
        text-align: center;
        max-width:700px;
        margin-top:35px;
    }
    .sec3-grid-right-icons{
        grid-column: 1/4;
        grid-row:1/2;
        align-self:flex-end;
        justify-self: flex-end;
        background:#fafafa;
        filter:drop-shadow(5px 5px 8px rgba(0,0,0,0.3));
        padding:1%;
        margin:0 0 -50px 0;
    }
    .sec3-grid-left{
        grid-column: 1/4;
        grid-row:2/3;
        text-align: center;
    }
    .product-image::before{
        display:none;
    }
    .product-image::after{
        display:none;
    }
}