/* #78A22E   rgba(120,162, 46, 1)*/


body,
html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size:18px;
    font-family: "Poppins", sans-serif;
}
.space{
    height:50vh;
}
.maincontent {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.maincontent_wrapper {
    padding-top: 0;
}

#reusable img {
    width: 100%;
}

#reusable h1{
    font-size:clamp(26px, 3.5vw, 52px);
}
#reusable h2{
    font-size:clamp(20px, 3vw, 36px);
}
#reusable h4{
    font-size:clamp(14px, 2vw, 18px);
    margin-bottom:0;
}
#reusable p{
    margin-top:0;
}
.thin{
    font-weight:200;
}
.highlight{
    color:#78A22E;
}
.ital{
    font-style:italic;
    font-family: "Josefin Sans", sans-serif;
}
.brush{
    position: relative;
    z-index:5;
}
.brush::before{
    position: absolute;
    content:"";
    background-image: url('/imageserver/Reusable/provia/provia-windows/brush.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    height:25px;
    width:100%;
    bottom:-5px;
    left:0;
    z-index:-1;
    opacity:.5;
}
h2 .brush::before{
    bottom:-20%;
}
.title{
    font-size:1.2rem;
    font-weight:700;
}

  .r-hr{
    margin:0 auto;
    max-width:50%;
    border: 0; 
    height: 2px; 
    background-image: -webkit-linear-gradient(left, #fff, #78A22E, #fff);
    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:1400px;
    padding-inline:3%;
    margin:0 auto;
}

.r-header{
    max-width:1000px;
    padding:2%;
    margin:0 auto;
    text-align: center;
}
.thick{
    font-weight:700;
}
.uppercase{
    text-transform: uppercase;
}

.docs:hover{
    color:#23527C;
    transition: .3s;
}

  .section2{
      padding:0 5%;
      position: relative;
  }
  .sec2-title-top{
      background-color:#78A22E;
      position: absolute;
      top:-5%;
      left:5%;
      min-height:75px;
      width:45%;
      color:#FFF6E6;
      padding:15px 0 15px 35px;
      z-index:5;
  }
  .sec2-title-btm{
    background-color:#286090;
    position: absolute;
    bottom:-15%;
    right:20%;
    min-height:75px;
    width:40%;
    color:#fcf8e3;
    padding:15px 0 15px 35px;
}
  .sec2-grid{
      max-width:1600px;
      margin:0 auto 5% ;
      display:grid;
      gap:30px;
      grid-template-columns:repeat(2, 49%);
  }
  .sec2-grid-img{
      text-align:center;
  }
  #main-img{
    max-width:500px;
    filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.4));
  }
  .main-img-thumb{
      display:flex;
      flex-direction:row;
      justify-content:space-evenly;
      flex-wrap:wrap;
      padding:0 40px;
  }
  .main-img-thumb-item{
      max-width:100px;
      margin:10px;
      cursor:pointer;
      border:1px solid #000;
  }
 
  .details-list-title{
      font-weight:700;
      position: relative;
      display:inline-block;
      margin-top:20px;
      text-transform: uppercase;
      /* margin-left:20px; */
  }
  .details-list-title::before{
      position: absolute;
      content:"";
      top:50%;
      right:-25px;
      height:2px;
      width:20px;
      background:#78A22E;
  }
  .sec2-grid-text p{
      margin-left:8px;
  }
  #window-options{
    margin-bottom:4%;
  }
  #colors{
    background-image: linear-gradient(to bottom, #fff, rgba(236,236,236,0.7), #fff);
    margin-bottom:6%;
  }
  #styles{
    background-image: linear-gradient(to bottom, #fff, rgba(236,236,236,0.7), #fff);
  }
  #color-list{
    /* min-height:400px; */
  }
  .flex-group{
    display:flex;
    flex-direction:row;
    justify-content: space-evenly;
    flex-wrap:wrap;
  }
.color-btn{
    background-color:#414042;
    padding:3% 2%;
    color:#fff;
    border-radius:50px;
    transition:.3s;
    white-space: nowrap;
    width:clamp(200px, 14vw, 500px);
    text-align: center;
    cursor:pointer;
}
.color-btn:hover{
    background-color:#78A22E ;
    transition:.3s;
}
#endure-btn .color-btn{
    width:clamp(255px, 16vw, 500px);
}
.arrow{
    margin-left:10px;
    font-size:1.2rem;
    font-weight:800;
    color:#78A22E;
}
.color-btn:hover .arrow{
    color:#fff;
}
.color-image{
    max-width:125px;
    border-radius:50%;
    transition:.5s;
    filter: drop-shadow(0px 3px 3px rgba(0,0,0,.5));
}
.paint-box{
    width:125px;
    height:125px;
    border-radius:50%;
    filter: drop-shadow(0px 3px 3px rgba(0,0,0,.5));
}
.targetDiv{
    margin-top:25px;
}
.color-flex-item{
    position: relative;
    margin:5px;
    transition:.5s;
}
.targetDiv .flex-group{
    justify-content: flex-start;
}
.color-name{
    position: absolute;
    display:inline-block;
    width: 130%;
    bottom:0;
    left: 50%;
    transform: translate(-50%, 50%);
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 25px;
    padding:4% 1%;
    text-align: center;
    color: #ececec;
    font-size:.8rem;
    opacity:0;
    transition:.5s;
}
.color-flex-item:hover .color-name{
    opacity:1;
    transform: translate(-50%, 0);
    transition:.5s;
}
.color-flex-item:hover{
    transition:.5s;
    transform:scale(1.03);
}
.style-flex-item{
    text-align: center;
}
.style-btn{
    background-color:#78A22E;
    padding:3% 2%;
    color:#fff;
    border-radius:50px;
    white-space: nowrap;
    width: clamp(225px, 35vw, 272px);
    text-align: center;
    margin:0 auto;
}
.style-image{
    max-width:250px;
}
#features{
    margin-bottom:6%;
}
#window_detail{
    max-width:500px;
}
#r_grid{
    display:grid;
    grid-template-columns: repeat(2, 49%);
}
#grid_left{
    grid-column: 1/2;
    position: relative;
}
.detail-number{
    max-width:clamp(25px, 5vw, 40px);
}
#grid_right{
    grid-column: 2/3;
}
.detail-item{
    display:flex;
    flex-direction: row;
    align-items: flex-start;
    margin-block:20px;
}

.detail-item-content{
    display:inline;
}
.detail-item h3{
    margin-top:0;
}
@media screen and (max-width:992px) {
    .sec2-grid, #r_grid{
        display:block;
    }
    .brush::before{
        display:none;
    }
    body,
html {
    font-size:16px;
}
}
@media screen and (max-width:600px) {
    .targetDiv .flex-group {
        justify-content: space-evenly;
    }
    body,
html {
    font-size:14px;
}
.title{
    font-size:1rem;
}
}