.Cta-sp {
    .cta-wrap {
        background-color: var(--third);
        border-radius: 18px;

        .cta-img {
            position: relative;
            height: 100%;

            .image-box {
                width: 100%;
                height: calc(100% + 21px);
                position: absolute;
                bottom: 0;
                clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            }

            .w-animation {
                animation: rollFromLeft 1s ease-in-out forwards;
            }

            img {
                width: 100%;
                height: 100%;
            }
        }

        @keyframes rollFromLeft {
            from {
                clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            }

            to {
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }
        }
    }
    .cta-content {
        padding-block: 70px;
        padding-right: min(3.125em, 8%);
        .sub-heading {
            font-weight: 600;
        }
        .cta {
            padding-inline: 17px;
        }
    }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .Cta-sp {
        .cta-wrap {
            gap: 30px;
            .cta-content {
                padding-block: 50px;
            }
        }
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .Cta-sp {
        .cta-wrap {
            .cta-content {
                padding-block: 40px;
                .sub-heading {
                    font-size: 24px;
                    line-height: 34px;
                    font-weight: 600;
                }

                .desc {
                    font-size: 14px;
                    line-height: 22px;
                }
                .cta {
                    padding-inline: 17px;
                    font-size: 14px;
                    font-weight: 600;
                }
            }
        }
    }
}

@media only screen and (max-width: 767px) {
    .Cta-sp {
        .cta-wrap {
            background-color: var(--third);
            border-radius: 18px;
            display: flex;
            flex-direction: column-reverse;

            .cta-img {
                width: 100%;
                overflow: hidden;

                .image-box {
                    position: unset;
                    display: flex;
                    justify-content: end;
                    img {
                        width: 520px;
                    }
                }
            }
            .cta-content {
                padding-block: 40px;
                padding-inline: min(3.125em, 8%);
            }
        }
    }
}