@keyframes popup-point-pulse {
	0% {
		transform: scale(.5);
		opacity: .6;
	}
	
	100% {
		transform: scale(1.5);
		opacity: 0;
	}
}

:root {
	--popup-point-gradient: linear-gradient(45deg, #03c19b 21%, #08f 43%, #7e2cff 62%, #c0f 83%);
}

.popup-point-popover {
	border-radius: 15px;
	color: #fff;
	background: var(--blue-gradient);
	z-index: 1000;
	overflow: auto;
	padding: 40px 30px;
}

.popup-point-popover-close {
	position: absolute;
	top: 5px;
	right: 5px;
	border: none;
	background: "#fff";
	color: #000;
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	font-size: 20px;
}

.popup-point-trigger {
	height: 70px;
	width: 70px;
	border-radius: 50%;
	border: none;
	background: none;
	opacity: 0;
	transition: opacity 2s;
	position: absolute;
}

.popup-point-trigger.in {
	opacity: 1;
}

.popup-point-trigger:focus {
	outline: none !important;
}

.popup-point-trigger .inner-1 {
	height: 70px;
	width: 70px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: scale(.5);
	opacity: .1;
	background: var(--popup-point-gradient);
	animation: 2s infinite popup-point-pulse;
}

.popup-point-trigger .inner-2 {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 40px;
	width: 40px;
	border-radius: 50%;
	background: var(--popup-point-gradient);
	display: flex;
	justify-content: center;
	align-items: center;
	transform: translate(-50%, -50%);
}

.popup-point-trigger .inner-2 span {
	display: block;
	height: 24px;
	width: 24px;
	line-height: 24px;
	font-size: 24px;
	color: #fff;
	text-align: center;
}

.popup-point-slider .popup-point-slider-content {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.popup-point-slider .popup-point-slider-content img {
	width: 100%;
	height: auto;
}

.popup-point-slider-wrap .glide__slides {
	align-items: center;
}

.popup-point-slider-wrap .glide__bullets {
	background: #23272d;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px 0;
	gap: 10px;
	border-radius: 10px;
	width: 90%;
	margin: 20px auto 0;
	--nav-size: 7px;
	--nav-radius: 3.5px;
}

.popup-point-slider-wrap .glide__bullets button.glide__bullet {
	background: #71747a;
	border: none;
	width: var(--nav-size);
	height: var(--nav-size);
	border-radius: var(--nav-radius);
	transition: width .5s;
}

.popup-point-slider-wrap .glide__bullets button.glide__bullet.glide__bullet--active {
	background: #fff;
	width: calc(var(--nav-size) * 3);
}