.bg-hero-pang-1.bg-hero-pang-gunung::before {
    opacity: 1;
    background: linear-gradient(180deg, #000 0%, transparent 15%), linear-gradient(00deg, #000 0%, transparent 15%), url("../images/bg1-2560-gunung-ru.webp") no-repeat center center / cover;
    transition: opacity 0.8s ease-in-out, background 0.5s;
}

.bg-hero-pang-1.bg-hero-pang-pantai::before {
    opacity: 1;
    background: linear-gradient(180deg, #ffffff 0%, transparent 15%), linear-gradient(0deg, #f4ddcb 0%, transparent 10%), url("../images/bg1-2560-ru.webp") no-repeat center center / cover;
    transition: opacity 0.8s ease-in-out, background 0.5s;
}

@media (max-width: 1440px) {
    .bg-hero-pang-1 {
        background: linear-gradient(to bottom, rgb(255 255 255 / 0%) 0% 10%, rgb(255 255 255 / 0%) 100%), url(../images/bg1-2560.webp) no-repeat calc(50% + 110px) bottom / cover;
    }
}

@media (max-width: 991px) {
    .bg-hero-pang-1.bg-hero-pang-gunung::before {
        background: linear-gradient(180deg, #000 0%, transparent 15%), linear-gradient(00deg, #000 0%, transparent 15%), url("../images/bg1-991-gunung.webp") no-repeat center center / cover;
    }

    .bg-hero-pang-1 {
        background: url("../images/bg1-991.webp") no-repeat bottom center / cover, #e0ffef;
        /* background-attachment: fixed; */
    }
}

@media (min-width: 1921px) {
    .bg-hero-pang-1 {
        background: url("../images/bg1-2560.webp") no-repeat bottom center / cover;
        /* background-attachment: fixed; */
        /* -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%); */
    }
}

@media (max-width: 992px) {
    .bg-hero-pang-1.bg-hero-pang-pantai::before {
        background: linear-gradient(180deg, #ffffff 0%, transparent 15%), linear-gradient(0deg, #f4ddcb 0%, transparent 10%), url("../images/bg1-991.webp") no-repeat center center / cover;
    }
}