.image-with-content {
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
}

.img_cont_blocks_cont.subheading-second {
    display: flex;
    flex-direction: column;
}

.img_cont_blocks_cont.subheading-second h2.title.title3 {
    order: -1;
}

.img_cont_blocks_cont.subheading-second p.desc.body1 {
    margin-bottom: 10px;
}


.image-with-content {
    .image-with-content_main {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
    }

    .img_cont_blocks_image {
        width: 100%;
    }

    .img_cont_blocks_image img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
        transition: all .3s ease-out;
    }

    .img_cont_blocks_cont {
        position: absolute;
        bottom: 20px;
        padding: 20px 50px;
    }

    .img_cont_blocks {
        position: relative;
        flex: 0 0 50%;
        max-width: 50%;
        overflow: hidden;
    }

    .title {
        color: var(--color);
        line-height: 1.2;
    }

    .title.title3 {
        font-size: 30px;
        margin: 0 0 10px 0;
    }

    .desc {
        color: var(--desc-color);
        margin: 0;
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 6px;
    }

    a.button {
        color: var(--btn-color);
        background: var(--btn-bg);
        border-radius: 30px;
        padding: 7px 32px;
        font-size: 18px;
        font-weight: 400;
        line-height: 1.3;
        text-transform: capitalize;
        position: relative;
        overflow: hidden;
    }

    a.button::after,
    a.button::before {
        content: unset;
    }

    a.button span.top-text,
    a.button span.top-text {
        transform: translateY(0%);
        transition: all 0.3s ease;
    }

    a.button span.bottom-text,
    a.button span.bottom-text {
        position: absolute;
        transform: translateY(200%);
        transition: all 0.3s ease;
    }

    a.button:hover span.top-text,
    a.button:hover span.top-text {
        transform: translateY(-200%);
        transition: all 0.3s ease;
    }

    a.button:hover span.bottom-text,
    a.button:hover span.bottom-text {
        transform: translateY(0%);
        transition: all 0.3s ease;
        color: #000;
    }

    @media (max-width:749px) {
        .img_cont_blocks {
            flex: 0 0 100%;
            max-width: 100%;
        }

        .title.title3 {
            font-size: 20px;
            margin: 0 0 5px 0;
        }

        .desc {
            font-size: 12px;
            margin-top: 0;
            margin-bottom: 5px;
        }

        a.button {
            padding: 8px 30px;
            font-size: 14px;
        }

        .img_cont_blocks_cont {
            padding: 18px 20px;
            bottom: 0;
        }

        .image-with-content {
            padding-top: var(--padding-top-mobile);
            padding-bottom: var(--padding-bottom-mobile);
        }
    }
}


@media(min-width:1440px) {
    .image-with-content {
        height: 90vh;
    }

    .image-with-content_main {
        overflow: hidden;
        height: 100%;
    }

    .img_cont_blocks {
        height: 100%;
    }

    .img_cont_blocks_image {
        height: 100%;
    }

    .img_cont_blocks_image img {
        height: 100%;
    }
}

.img_cont_blocks_cont.center {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    left: 50%;
}

.img_cont_blocks_cont.left-top {
    top: 20px;
    left: 0;
    bottom: auto;
}

.img_cont_blocks_cont.top {
    top: 20px;
    left: 50%;
    bottom: auto;
    transform: translateX(-50%);
}

.img_cont_blocks_cont.right-top {
    top: 20px;
    left: auto;
    bottom: auto;
    right: 20px;
}

.img_cont_blocks_cont.left {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    left: 0;
}

.img_cont_blocks_cont.right {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    left: auto;
    right: 20px;
}

.img_cont_blocks_cont.left-bottom {
    top: auto;
    bottom: 20px;
    transform: unset;
    left: 0;
    right: auto;
}

.img_cont_blocks_cont.bottom {
    top: auto;
    bottom: 20px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.img_cont_blocks_cont.right-bottom {
    top: auto;
    bottom: 20px;
    left: auto;
    right: 20px;
    transform: unset;
}

.img_cont_blocks_cont.text-align-center {
    text-align: center;
}

.img_cont_blocks_cont.text-align-right {
    text-align: end;
}

@media(max-width: 749px) {
    .img_cont_blocks_cont.mobile-center {
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
        left: 50%;
    }

    .img_cont_blocks_cont.mobile-left-top {
        top: 20px;
        left: 0;
        bottom: auto;
    }

    .img_cont_blocks_cont.mobile-top {
        top: 20px;
        left: 50%;
        bottom: auto;
        transform: translateX(-50%);
    }

    .img_cont_blocks_cont.mobile-right-top {
        top: 20px;
        left: auto;
        bottom: auto;
        right: 20px;
    }

    .img_cont_blocks_cont.mobile-left {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        left: 0;
    }

    .img_cont_blocks_cont.mobile-right {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        left: auto;
        right: 20px;
    }

    .img_cont_blocks_cont.mobile-left-bottom {
        top: auto;
        bottom: 20px;
        transform: unset;
        left: 0;
        right: auto;
    }

    .img_cont_blocks_cont.mobile-bottom {
        top: auto;
        bottom: 20px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .img_cont_blocks_cont.mobile-right-bottom {
        top: auto;
        bottom: 20px;
        left: auto;
        right: 20px;
        transform: unset;
    }
}