body::before{
    display:block;
    content:'';
    height:70px;
}
body{
    background-color: #F8F9FA;
}
.custom-nav{
    background-color:#00DFC0;
    
}
.custom-menus{
    color:#042A37;
    text-transform: uppercase;
}
.custom-menus:hover{
    color:aliceblue;
}
.custom-menu-bar-button{
    background:#042A37;
}
.custom-list{
    margin: 0;
    padding: 0;
    list-style: none;
}
.custom-color{
    color:#00DFC0;
}
.custom-bg{
    background-color:#042A37;
}
.custom-bg-soft{
    background-color:#00DFC0;
}
.custom-font3{
    font-size:20px;
}
.custom-bg1{
    background-color:#00DFC0;
}
.custom-bg2{
    background-color: #E44D26;
}
.custom-color-bg{
    color: #042A37;
}
.portfolio {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
  }
  
  .portfolio .item {
    position: relative;
    width: 355px;
    height: 420px;
    margin: 8px;
    
  }
  
  .portfolio .item img {
    width: 100%;
    height: 100%;
  
  }
  
  .portfolio .item .action {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: 0.5s;
  }
  
  .portfolio .item:hover .action {
    opacity: 1;
  }
  
  .portfolio .item .action a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    border: 1px solid #fff;
    padding: 5px 15px;
  }
  .custom-btn{
    border: 2px solid #00DFC0;
  }
  .custom-btn:hover{
    background-color: aliceblue;
    color: #042A37;
    border: 2px solid #042A37;
  }
 

@media(max-width: 768px){
    .custom-h1{
        margin-top: 60px;
    }
}