.banner-hero-content {
    position: relative;
}
.banner-hero-content>.content-sec {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
}
.banner-hero-content>.content-sec>.container {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 145px;
    padding-bottom: 80px;
    align-items: center;
    text-align: center;
    /* background-color: rgba(0,255,255,0.5); */
    z-index: 2;
}
.banner-hero-content>.content-sec>.container,
.banner-hero-content>.content-sec>.container a {
    color: rgba(var(--cpn-color-white),1);
    text-shadow: 2px 2px 2px rgba(var(--cpn-color-black-dark), 0.5);
}

.banner-hero-content>.content-sec>.container.y-align-top {
    justify-content: flex-start;    
}
.banner-hero-content>.content-sec>.container.y-align-center {
    justify-content: center;    
}
.banner-hero-content>.content-sec>.container.y-align-bottom {
    justify-content: flex-end;    
}

/* backdrop */
.banner-hero-content>.content-sec:before {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
    z-index: 1;
}
.banner-hero-content>.content-sec:before {
    background-color: rgba(var(--cpn-color-black-dark),1);
}
.banner-hero-content>.content-sec:before {
    opacity: 0.5;
    background: linear-gradient(to top, rgba(var(--cpn-color-black-dark),1),rgba(var(--cpn-color-black-dark),0));
}

/* xxl */
@media (min-width: 1400px) {}

/* xxl - 1 */
@media (min-width:1500px) and (max-width: 1599.98px) {}

/* xxl - 2 */
@media (min-width: 1400px) and (max-width: 1499.98px) {}

/* xl */
@media (min-width: 1200px) and (max-width: 1399.98px) {}

/* lg */
@media (min-width: 992px) and (max-width: 1199.98px) {}

/* md */
@media (min-width: 768px) and (max-width: 991.98px) {}

/* sm - xs */
@media (max-width: 767.98px) {

    .banner-hero-content>.content-sec>.container {
        padding: 40px 30px;
    }
}

/* sm */
@media (min-width: 576px) and (max-width: 767.98px) {}

/* xs */
@media (max-width: 575.98px) {}

/* xs custom */
@media (max-width: 399.98px) {}