@media (max-width: 991px) {
    .hero {
        padding-bottom: 150px;
    }

    .card-img {
        position: absolute;
        top: calc(100% + 70px);
        z-index: 99;
    }

    .hero .hero-image img {
        max-width: 60%;
    }
}

@media (max-width:640px) {
    .hero .hero-image {
        bottom: -30px;
    }
}

.hero:after {
    top: calc(100% - 82px);
}

.card-img {
    width: auto;
}

@media (min-width: 992px) {
    .hero {
        padding-bottom: 190px;
    }

    .hero.wrap {
        margin-bottom: 20px;
    }

    .hero .hero-image {
        top: 0px;
    }

    .hero .hero-image img {
        max-width: 85%;
    }
}

@media (min-width: 1080px) {
    .hero .hero-image {
        top: -70px;
    }
}

@media (min-width: 1200px) {
    .hero .hero-image {
        top: -90px;
        right: 10px;
    }
}

@media (min-width: 1440px) {
    .hero .hero-image {
        top: 55%;
        left: 45%;
        width: 62%;
    }
}

.hero .hero-text a.cta {
    background: #fff;
    border-color: transparent;
}