.bup-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin-bottom: -10px;
}

.bup-hero-slide {
	position:absolute;
    	inset:0;
    	background-size:cover;
    	background-position:center;
    	background-repeat:no-repeat;
    	opacity:0;
    	transition:opacity 0.1s ease;
}

.bup-hero-slide.active{
	opacity:1;
	z-index:2;
}

.bup-hero-content{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-end;
    padding-right:8vw;
    padding-left:2rem;
}

.bup-hero-content p {
        width: clamp(300px, 55vw, 400px);
        text-align: center;
    	margin:0;
    	padding:1.25rem;
    	text-align:left;
    	line-height:1.6;
		background:
                color-mix(
                in srgb,
                var(--menu-color) 80%,
                transparent
                ) !important;
    	backdrop-filter:blur(22px);
    		-webkit-backdrop-filter:blur(22px);
    	box-sizing:border-box;
}

.hero-button-row {
	display:flex;
    	justify-content:flex-end;
    	align-items:center;
        width: clamp(300px, 55vw, 400px);
        justify-content: center;
    	height:2rem;
    	margin-top:0;
	background-color: var(--bup-color);
}

.hero-btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:.75rem 2rem;
	text-transform: uppercase;
	text-decoration:none;
	font-size: 1rem;
	font-weight: 700;
	color: #FFF;
	transition:all .25s ease;
}

.hero-btn:hover {
    	transform: translateX(0.25rem);
}

.bup-hero-dots {
	position:absolute;
    left:50%;
    bottom:1.5rem;
    transform:translateX(-50%);
    display:flex;
    gap:.75rem;
    z-index:20;
}

.hero-dot {
    width:0.5rem;
    height:0.5rem;
   	border:none;
    border-radius:100%;
    cursor:pointer;
    background:rgba(255,255,255,.35);
    transition:.25s;
}

.hero-dot:hover {
    background:rgba(255,255,255,.7);
}

.hero-dot.active {
    background: var(--bup-color);
    transform: scale(1.25);
}
/* small phones */
@media (min-width: 320px) and (max-width: 480px) {
	.bup-hero {
		height: 50dvh;
	}
}
 /* large phones */ 
@media (min-width: 481px) and (max-width: 768px) {
	.bup-hero {
		height: 50dvh;
	}
	.bup-hero-content {
		align-items: center;
		padding: 1.5rem;
	}
}
/* tablets */
@media (min-width: 769px) and (max-width: 1024px) {
	.bup-hero {
		height: 50dvh;
	}
}
/* laptops */
@media (min-width: 1025px) and (max-width: 1440px) {  
	.bup-hero {
		height: 50dvh;
	}
}
/* desktop and wide screens */
@media (min-width: 1441px) { 
	.bup-hero {
		height: 50dvh;
	}
}