.box5{background:#444;position:relative}
.box5:after,.box5:before{width:50px;height:50px;border-radius:50%;background:#10a5b8;position:absolute;top:-80px;left:15px;opacity:0;z-index:1;transition:all .35s ease}
.box5:after{top:auto;left:auto;bottom:-80px;right:15px}
.box5:hover:after,.box5:hover:before{opacity:.75;transform:scale(8);transition-delay:.15s}
.box5 img{width:100%;height:auto;transition:all .35s ease-out 0s}
.box5:hover img{opacity:.4}
.box5 .icon{margin:0;position:absolute;bottom:15px;right:15px;z-index:2;transform:scale(0);transition:all .35s ease-out}
.box5:hover .icon{transform:scale(1);transition-delay:.15s}
.box5 .icon li a{display:block;width:35px;height:35px;line-height:35px;background:#fff;font-size:18px;color:#444;margin-right:10px;position:relative;transition:all .5s ease 0s}
.box5 .icon li a:hover{background:#444;color:#fff}
.box5 .box-content{padding:20px 15px;position:absolute;top:0;left:0;z-index:1}
.box5 .title{font-size:20px;font-weight:800;color:#fff;margin:0 0 5px;opacity:0;transform:translate(-20px,-20px);transition:all .35s ease-out}
.box5:hover .title{opacity:1;transform:translate(0,0);transition-delay:.15s}
.box5 .post{display:inline-block;font-size:16px;color:#fff;opacity:0;transform:translate(-20px,-20px);transition:all .35s ease-out}
.box5:hover .post{opacity:1;transform:translate(0,0);transition-delay:.15s}
.box6 .title,.box6 img,.box6:after{transition:all .35s ease 0s}
@media only screen and (max-width:990px){.box5{margin-bottom:30px}
}
.view_project_btn{
    padding: 10px;
    border-radius: 5px;
    letter-spacing: 0.5px;
    font-weight: 600;
    background: #8bc34a;
}
.banner-area {
    background: rgba(0, 0, 0, 0) url(../images/background/CSRActivitiesbanner.jpg) no-repeat scroll center center / cover;
    position: relative;
    width: 100%;
    z-index: 1;
}
.banner-content {
    padding: 112px 0 193px;
}
.banner-content h2 {
    color: white;
    text-align: center;
   
    position: absolute;
    top: 50%;
   
   
}
.banner-breadcrumb{
    padding-left: 10%;
    text-align: left;   
}
.banner-content-wrapper{
    height: 60vh;
}
.banner-bottom {
    background: rgba(0, 0, 0, 28%);
}
.banner-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    content: "";
    background: rgba(0, 0, 0, 0.15);
    z-index: 9;
    
}
.banner-breadcrumb ul li a, .banner-breadcrumb ul li {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
    text-transform: capitalize;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.banner-breadcrumb ul li {
    display: inline-block;
    padding: 30px 0;
}
.btn:focus, .btn:active, button:focus, button:active {
    outline: none !important;
    box-shadow: none !important;
  }
  
  #image-gallery .modal-footer{
    display: block;
  }
  
  .thumb{
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .thumb img{
    height:100%;
  }
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
}
.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
   
}
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    width: 100vw;
    height: 100vh;
    background-color: #000;
}
section {
    background-color: var(--global--color-white);
    padding: 30px 0;
    overflow: hidden;
}