@media (max-width: 576px) {
    .hero-area .hero-icons li:first-child {
        left: -7vw;
        top: -7vh;
        background: #21759b;
        transform: rotate(14deg);
    }
    .hero-area .hero-icons li:nth-child(2) {
        right: -24px;
        top: -15px;
        background: #fff;
        transform: rotate(-8deg);
    }
    .hero-area .hero-icons li:nth-child(3) {
        left: -10px;
        bottom: -30px;
        /* background: #7ac143; */
        background: #fff;
        transform: rotate(-7deg);
    }
    .hero-area .hero-icons li:nth-child(4) {
        right: -24px;
        bottom: -36px;
        background: #fff;
        transform: rotate(12deg);
    }
    .hero-area .hero-icons li {
        background: #fff;
        position: absolute;
        display: inline-block;
        padding: 6px 6px;
        text-align: left;
        box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        color: #fff;
        font-size: 60px;
        line-height: 0.8;
        transition: 0.4s;
    }
    .hero-area .hero-icons li img {
        width: 40px !important;
    }
}