.swing {
    animation: swing ease-in-out 1s infinite alternate;
    transform-origin: center -20px;
    /* float:left; */
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
    /* position: absolute;   */
    /* top:0; */
    /* right: 0; */
    
}
.swing img {
    border: 5px solid #f8f8f8;
    display: block;
}
/* Responsive Styles for Different Screen Sizes */
@media only screen and (max-width: 768px) {
    .swing {
        display: flex;
        position: relative; /* Change to relative positioning on smaller screens */
        float: left; /* Remove float on smaller screens */
        /* margin-bottom: 20px;  */
        /* width:50%; */
    }
}
.swing:after{
    content: '';
    position: absolute;  
    width: 20px; height: 20px;  
    border: 1px solid #999;
    top: -10px; left: 50%;
    z-index: 0;
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
}
/* nail */
.swing:before{
    content: '';
    position: absolute;
    width: 5px; height: 5px;
    top: -14px;left: 54%;
    z-index: 5;
    border-radius: 50% 50%;
    background: #000;
}
 
@keyframes swing {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}

.hero-text{
    margin-top: 10%;
}

@media only screen and (max-width: 768px) {
    .hero-text{
        margin: 0;
    }
    
}