:root{
  --main-color:#154776;
  --secondary-color:#F9BA14;
}


body,html{
    box-sizing: border-box;
    margin:0;
    padding:0;
    font-size:18px;
}
.maincontent{
    max-width:100%;
    padding:0;
    margin:0;
}
.maincontent_wrapper{
    padding-top:0;
}
img{
  width:100%;
}
.my-header{
  text-align: center;
}
#overlay {
    mix-blend-mode: multiply;
    /* background-color: red; */
    width: 45%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
  }
  
  
  #section1 {
    background-color:#154776;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    background-image: linear-gradient(to right, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 70%), url('/imageserver/Reusable/wraproof23/5631-Saint-Charles-Avenue3-scaled-min.jpg');
  }
  
  #sectionPin {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-image: url('/imageserver/Reusable/wraproof23/5631-Saint-Charles-Avenue3-scaled-min.jpg');
  }
  
  .pin-wrap {
    /* background: pink; */
    height: 100vh;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  
  .pin-box {
    height: 100%;
    width: 100vw;
    background: green;
    border: 5px solid #fff;
    background-image: url('/imageserver/Reusable/wraproof23/5631-Saint-Charles-Avenue3-scaled-min.jpg');
  }
  
  
  #section3 {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    justify-content: space-around;
 
  }
  
 
  .hero-bg{
    transform:translateY(200px);
    font-size:20rem;
    writing-mode: vertical-lr;
    text-orientation: upright;
    font-family: 'Syncopate', sans-serif;
    color:var(--secondary-color);
    opacity:.3;
  }
  #box1 img{
    max-width:500px;
  }
  #box1{
    width:37%;
    position: absolute;
    /* z-index:50; */
    top:0;
    left:10%;
  }
 
  #logo{
    max-width:600px;
    height:auto;
    stroke:#000;
    stroke-width:4;
    stroke-miterlimit:10
  }
  .st0{
    fill:#750f1d;
  }
  #roof{
    fill:#fff;
  }
  .hero-title{
    font-size:2rem;
    color:#fff;
    font-weight:700;
  }
  #sec2-bg{
    background-image: url('/imageserver/Reusable/wraproof23/paperDiv.png');
    background-size:cover;
    background-repeat: no-repeat;
    padding:4rem 0;
    margin-top:-100px;
    z-index:10;
    width:100%;
  }
  #section2{
    position: relative;
    width:100%;
  }
  .div-list{
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    height:100%;
    flex-wrap:wrap;
  }
  .list-item{
    text-align: center;
    min-width:200px;
    max-width:300px;
  }
  .list-item h3{
    font-size:clamp(1.3rem, 2vw, 60px);
  }
  #box9{
    display:grid;
    grid-template-columns: 45% 10% 45%;
    height:100%;
    align-items: center;
  }
  #section4 {
    padding:0 10%;
    /* min-height: 50vh; */
    display: flex;
    justify-content: center;
    margin:0 auto;
    /* background-image: url('/imageserver/Reusable/wraproof23/Atrium-After3-min.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat; */
  }
  #box9 img{
    max-width:700px;
    object-fit:cover;
    grid-column:1/3;
    grid-row:1/2;
  }
  .sec4-content{
    background-color:#fff;
    padding:8%;
    box-shadow: 3px 3px 8px 3px rgba(0,0,0,0.5);
    grid-column:2/4;
    grid-row:1/2;
    margin-top:5rem;
    max-width:700px;
  }

  #section5{
    background-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.5) 100%), url('/imageserver/Reusable/wraproof23/5631-Saint-Charles-Avenue3-scaled-min.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height:100vh;
    margin-top:150px;
  }
  #section5-wrapper{
    max-width:1800px;
    padding:0 3%;
    margin:0 auto;
    text-align: center;
  }
  #section5-wrapper p{
    max-width:1200px;
    margin:0 auto 40px;
  }
  .flex-group{
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content: space-evenly;
    align-items: flex-start;
  }
  .flex-item{
    width: clamp(250px, 350px, 450px);
    margin:20px;
  }
  .img-box img{
    max-height:70px;
    max-width:75px;
  }
  @media screen and (max-width:992px) { 
    #box9{
      display:block;
      text-align: center;
      margin:0 auto;;
    }
  }