.cntnr-scrollable-head-maincolor {
    position: sticky;
    height: 150px;
    margin-bottom: -150px;
    top: 0px;
    background: linear-gradient(180deg,#bc0c27ff 0%, #bc0c2700 100%);
    z-index: 2;
    width: 100%;
}

.cntnr-scrollable-bottom-maincolor {
    position: sticky;
    height: 150px;
    bottom: 0px;
    background: linear-gradient(0deg,#bc0c27ff 0%, #bc0c2700 100%);
    z-index: 2;
    width: 100%;
    height: 100px;
}

.cntnr-scrollable-head-light {
    position: absolute;
    top: 0px;
    background: linear-gradient(180deg, #f4f4f4ff 0%, #f4f4f400 100%);
    z-index: 2;
    height: 100px;
    margin-bottom: -100px;
    width: 100%;
}

.cntnr-scrollable-bottom-light {
    position: absolute;
    bottom: 0px;
    background: linear-gradient(0deg,#f4f4f4ff 0%, #f4f4f400 100%);
    z-index: 2;
    width: 100%;
    height: 100px;
}

.img-hero-prod {
    margin-top: -10vh;
    margin-bottom: -50%;
}