@use '../utils' as *;

/*=============================
    Cta Area 1
===============================*/
.cta-wrap1 {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding-left: 30px;
    padding-right: 30px;
    &:after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(270deg, rgba(23, 35, 32, 0.4524) 0%, rgba(20, 39, 38, 0.6318) 51.63%, rgba(18, 44, 44, 0.2964) 100%);
        backdrop-filter: blur(7.5px);
        z-index: -1;
        mix-blend-mode: hard-light;
        background-color: var(--tg-heading-color);
    }
    .cta-bg-shape1-1 {
        position: absolute;
        inset: 0;
        mix-blend-mode: soft-light;
        background-size: cover;
        background-color: var(--tg-heading-color);
    }
}

/*=============================
    Cta Area 2
===============================*/
.cta-area-2 {
    @media #{$lg} {
        background-image: none !important;
    }
}
.cta-wrap2 {
    .title {
        font-size: 36px;
        font-weight: 700;
        margin-bottom: -0.3em;
    }
}

/*=============================
    Cta Area 3
===============================*/
.cta-wrap3 {
    margin: 0 40px;
    border-radius: 20px 20px 0 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
    .cta-wrap-bg {
        position: absolute;
        inset: 0;
        z-index: -1;
        img {
            filter: grayscale(1);
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    &:after {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--tg-theme-primary);
        mix-blend-mode: multiply;
        z-index: -1;
    }
    @media #{$xs} {
        margin: 0 15px;
    }
}