#cellphone {
    position: static;
    width: 80%;
    height: auto;
    margin: 2rem auto;
    z-index: auto;
    
    transform: none; 
}

@media (max-width: 767.98px) {
  .col-md-5 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
  }


}

@media (min-width: 768px) {
    #cellphone {
        position: absolute; 
        
        left: 0; 
        top: 0;
        
        transform: translateY(-35%) translateX(40%); 
        z-index: 10; 
        
        width: 296px; 
        height: 519px; 
        margin: 0;
    }
    #cellphone:hover {
        transform: scale(1.05) translateY(-35%) translateX(40%); 
    }


}

#hero-image {
  max-width: 420px;
  transform: translateY(-40px);
}