.talim-hero {
    background-image: url('/images/conceptstep/hero-modern-learning.webp');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.talim-hero::before {
    background: linear-gradient(
        90deg,
        rgba(28, 39, 52, .82) 0%,
        rgba(28, 39, 52, .70) 36%,
        rgba(28, 39, 52, .40) 58%,
        rgba(28, 39, 52, .16) 78%,
        rgba(28, 39, 52, .08) 100%
    );
}

.breadcumb-area {
    background-image: url('/images/conceptstep/hero-modern-learning.webp');
    background-position: center 45%;
    background-size: cover;
    background-repeat: no-repeat;
}

.breadcumb-area::before {
    background: rgba(20, 34, 49, .58);
}

@media (max-width: 1024px) {
    .talim-hero {
        background-position: 58% center;
    }

    .talim-hero::before {
        background: linear-gradient(
            90deg,
            rgba(28, 39, 52, .84) 0%,
            rgba(28, 39, 52, .72) 48%,
            rgba(28, 39, 52, .34) 78%,
            rgba(28, 39, 52, .18) 100%
        );
    }

    .breadcumb-area {
        background-position: 58% center;
    }
}

@media (max-width: 767px) {
    .talim-hero {
        background-position: 66% center;
    }

    .talim-hero::before {
        background: linear-gradient(
            90deg,
            rgba(28, 39, 52, .86) 0%,
            rgba(28, 39, 52, .78) 62%,
            rgba(28, 39, 52, .52) 100%
        );
    }

    .breadcumb-area {
        background-position: 64% center;
    }

    .breadcumb-area::before {
        background: rgba(20, 34, 49, .66);
    }
}