a {
    text-decoration: none;
}




.hero-text h2 {
    z-index: 4;
   font: 900 24px Lato;
    letter-spacing: 0;
    
  font-weight: bold;
  line-height: 1.5;
    padding-bottom: 30px;
}
.hero h2 {
    
}


      .hero {
        display: flex;
        height:100%;
       align-items: center;
        justify-content: center;
        margin: 0 auto;
        transition: background-color 2s ease 100ms;
        position: relative;
        z-index: 0;
        cursor: pointer;
        color: #002f5f;
         background-color:white;
        border-radius: 10px;
    -webkit-box-shadow: 0 0 6px 3px rgb(120 185 232 / 20%);
      box-shadow: 0 0 6px 3px rgb(120 185 232 / 20%);
        
       
      }

@media screen and (min-width: 900px) {

      .hero:hover, .hero h2:hover {
        
        color:white !important;
         
       
      }
 .hero:focus, .hero h2:focus {
        
        color:white !important;
         
       
      }
.hero:active, .hero h2:active {
        
        color:white !important;
         
       
      }
.hero:hover h2 {
 color:white !important;

}
}




      .hero i.icon-arrow-right2 {
       font-size: 65px;
   
        width: 80px;
        height: 80px; 
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(-50%, -50%);
        display: none;
        z-index: 1;
        
       
      }
      .hero-text {
       align-items: center;
        justify-content: center;
       flex: 0 40%;
       
    letter-spacing: 0;
        padding:6%;
        z-index: 1;
        line-height: 1.5;
        
    padding-bottom: 0px;
    
         
        
      }
      
      .hero::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 51%;
        height: 100%;
        background:#ff7a59;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 300ms ease-in;
        border-radius: 10px 0px 0px 10px;
       
        
        
        
      }
      .hero:hover::after,
      .hero:focus::after {
        transform: scaleX(1);
        
      
      
      }
      .hero:hover i.icon-arrow-right2 {
        display: block;
       
        
      }
      
     .hero h2:hover::after,
      .hero h2:focus::after {
        color:white;
        
        
      
      
      }
      .hero-text:hover::after,
      .hero-text:focus::after{
        
        
     
    } 

.hero h2::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 51%;
    height: 100%;
    background: rgba(0, 47, 95, 1);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease-in;
}


.hero:hover .datat {
 color:white !important;

}


.lamor-image  {
  width: 55%;
 background-size: cover !important;
    background-position: center bottom !important;
    height: 349px;
  border-radius: 0 10px 10px 0px;
}

     .hero img {
        flex: 55%;
       max-height: 349px;
      }


@media screen and (max-width: 900px) {
  .hero::after {
    display:none;
    
}
 svg.hero-icon path {
  
         display:none;
        
       
      } 
  .lamor-image  {
  width: 100%;
 
}
 .hero-text {
       
       flex: 0 100%;
       font: 18px/18px NeoSansPro-Regular;
   
        padding:3%;
        z-index: 1;
         
        
      } 
  
  .hero {
    display: block;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: background-color 2s ease-out 100ms;
    position: relative;
    z-index: 0;
    cursor: pointer;
    color: #002f5f;
    background-color: #f3f3f3;
}
 .hero:hover i.icon-arrow-right2 {
        display:none;
       
        
      }
  .hero:hover .datat {
    color: #002f5f!important;
}
}

.post-listing >div:first-child {
    display: none;