.page-clubpro {
	padding-bottom: var(--block-padding-bottom);
	overflow: hidden;
}

.animate-text__wrapper--h1 {
	margin-bottom: -14px;
}

.breadcrumbs__link, .breadcrumbs__current, .breadcrumbs__separator {
	color: var(--white-color);
}

.content-layout__clubpro {    
    background: url(/assets/image/clubpro-top.webp);
    background-repeat: no-repeat;
    background-size: cover;
	margin-bottom: 18px;
}

.content-layout__clubpro::before {
    bottom: -32px;
    height: 64px;
}


/* Benefits */
.clubpro-benefits {
	padding-bottom: var(--block-padding-bottom);
}

.clubpro-benefits__list {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 20px;
}

.clubpro-benefits__item {
	position: relative;
}

.clubpro-benefits__img {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: 22px;
}

.clubpro-benefits__content {
	position: absolute;
	left: 40px;
	bottom: 24px;
	width: 100%;
	max-width: 257px;
	gap: 8px;
}

.clubpro-benefits__item-title {
	font-weight: 600;
	font-size: 22px;
	line-height: 28px;
	letter-spacing: 2%;
	text-transform: uppercase;
	color: var(--white-color);
}

.clubpro-benefits__item-subtitle {
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0%;
	color: var(--white-color);
}

.clubpro-benefits__item:nth-child(2) .clubpro-benefits__item-title br {
	display: none;
}


@media(max-width: 1279px) {
	.content-layout__clubpro {    
		background: url(/assets/image/clubpro-top-tablet.webp);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.clubpro-benefits__content {
		left: 24px;
		bottom: 14px;
		max-width: 242px;
	}

	.clubpro-benefits__item-title {
		font-size: 16px;
		line-height: 24px;
		letter-spacing: 1%;
	}

	.clubpro-benefits__item-subtitle {
		font-size: 16px;
		line-height: 24px;
		letter-spacing: 0%;
	}

	.clubpro-benefits__content {
		gap: 5px;
	}

	.clubpro-benefits__img {
		border-radius: 14px;
	}

	.clubpro-benefits__list {
		overflow-x: scroll;
        display: flex;
        width: calc(100% + 60px);
        position: relative;
        left: -30px;
        padding: 0 30px 5px 30px;
    }

	.clubpro-benefits__list::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}

	.clubpro-benefits__item {
		min-width: 50%;
	}
	.content-layout__clubpro::before {
		bottom: -20px;
		height: 40px;
	}

}

@media(max-width: 767px) {	

	.clubpro-benefits__list::-webkit-scrollbar {
		width: 4px;
		height: 4px;
	}

	.clubpro-benefits__item {
        min-width: 80%;
    }

}

@media(max-width: 600px) {
	.content-layout__clubpro {    
		background: url(/assets/image/clubpro-top-mv.webp);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.clubpro-benefits__list {
		overflow-x: unset;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        left: unset;
        padding: 0;
	}

	.clubpro-benefits__item {
		min-width: unset;
	}

	.clubpro-benefits__content {
		left: 20px;
		bottom: 20px;
	}

	.clubpro-benefits__item-title {
		font-size: 16px;
		line-height: 24px;
		letter-spacing: 1%;
	}

	.clubpro-benefits__item-subtitle {
		font-size: 16px;
		line-height: 24px;
		letter-spacing: 0%;
	}

	.clubpro-benefits__item:nth-child(2) .clubpro-benefits__item-title br {
		display: block;
	}

	.content-layout__clubpro {
		margin-bottom: 5px;
		padding-bottom: 40px;
	}

}
/* Benefits */


/* Benefits */
.title--xl {
	color: var(--primary-color);
	margin-bottom: 24px;
}
.clubpro-cashback {
	padding-bottom: var(--block-padding-bottom);
}

.clubpro-cashback__list {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 40px;
}

.clubpro-cashback__item {
	gap: 20px;
}

.clubpro-cashback__legal {
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0%;
	color: var(--color-dark-grey);
	opacity: 0;
	transform: translateY(-100%);
	transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.clubpro-cashback__count {
	font-weight: 700;
	font-style: Bold;
	font-size: 72px;
	line-height: 64px;
	letter-spacing: 0%;
	vertical-align: bottom;
	color: #D73031;
	margin: 8px 0 0 0;
	opacity: 0;
	transform: translateY(-100%);
	transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.clubpro-cashback__text {
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0%;
	color: var(--primary-color);
	opacity: 0;
	transform: translateY(-100%);
	transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.clubpro-cashback__item.active .clubpro-cashback__legal, .clubpro-cashback__item.active .clubpro-cashback__count, .clubpro-cashback__item.active .clubpro-cashback__text {
	opacity: 1;
    transform: translateY(0%);
}

.clubpro-cashback__text--bold {
	font-weight: 600;
}

.clubpro-cashback__footer {
	gap: 4px;
}

@media(max-width: 1279px) {
	.title--xl {
		font-size: 22px;
		line-height: 28px;
		letter-spacing: 0.44px;
		margin-bottom: 20px;
	}

	.clubpro-cashback__item {
		gap: 14px;
	}

	.clubpro-cashback__list {
		gap: 20px;
	}

	
}

@media(max-width: 600px) {
	.title--xl {
		margin-bottom: 16px;
	}
	
	.clubpro-cashback__list {
		grid-template-columns: 1fr;
	}

	.clubpro-cashback__item {
		gap: 10px;
	}
}
/* Benefits */

/* Northland & SM */
.clubpro-sm {
	padding-bottom: var(--block-padding-bottom);
}

.clubpro-sm__box {
	display: flex;
	flex-direction: row;
	gap: 47px;
}

.clubpro-sm__image {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: 25px;
}

.clubpro-sm__content {
	padding-top: 37px;
}

.clubpro-sm__list {
	gap: 24px;
}

.clubpro-sm__list {
	padding-left: 21px;
}

.clubpro-sm__item {
	position: relative;
	list-style-type: none;
	gap: 8px;
}

.clubpro-sm__item::before {
	content: "";
	position: absolute;
	left: -18px;
	top: 10px;
	border-radius: 50%;
	background: #D73031;
	width: 6px;
	height: 6px;
}

.clubpro-sm__item-title {
	font-weight: 600;
	font-size: 22px;
	line-height: 28px;
	letter-spacing: 2%;
	text-transform: uppercase;
	color: var(--primary-color);
}

.clubpro-sm__item-subtitle {
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0%;
	color: var(--color-dark-grey);
}

@media(max-width: 1279px) {
	.clubpro-sm__image {
		border-radius: 15px;
		height: 100%;
	}

	.clubpro-sm__box {
		display: grid;
		grid-template-columns: 54% auto;
		gap: 33px;
	}

	.clubpro-sm__item-title {
		font-size: 16px;
		line-height: 24px;
		letter-spacing: 1%;
	}

	.clubpro-sm__item-subtitle {
		font-size: 16px;
		line-height: 24px;
		letter-spacing: 0%;
	}

	.clubpro-sm__content {
		padding-top: 0;
	}

}

@media(max-width: 600px) {
	.clubpro-sm__box {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.clubpro-sm__image {
		height: unset;
		border-radius: 12px;
	}

	.clubpro-sm__item {
		gap: 4px;
	}

	.clubpro-sm__item::before {
		top: 8px;
	}
}
/* Northland & SM */

/* Steps */
.clubpro-steps {
	padding-bottom: var(--block-padding-bottom);
}

.clubpro-steps__list {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 33px;
}

.clubpro-steps__item {
	flex-direction: row;
	gap: 24px;
}

.clubpro-steps__item-text {
	gap: 8px;
}

.clubpro-steps__item-title {
	color: var(--primary-color);
	font-size: 22px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: 0.44px;
	text-transform: uppercase;
	transform: translateY(-100%);
    opacity: 0;
    transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.clubpro-steps__item-subtitle {
	color: var(--color-dark-grey);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
	transform: translateY(-100%);
    opacity: 0;
    transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.clubpro-steps__item.active .clubpro-steps__item-title, .clubpro-steps__item.active .clubpro-steps__item-subtitle {
	opacity: 1;
    transform: translateY(0%);
}

.clubpro-steps__item-number {
	opacity: 0;
	position: relative;
}

.clubpro-steps__item.active .clubpro-steps__item-number.svg_animate {
	opacity: 1;
}

.clubpro-steps__item.active .clubpro-steps__item-number path.animation {
	stroke: #D73031;
	stroke-width: 1.5;
	stroke-dasharray: 1000; 
	stroke-dashoffset: 1000;
	fill: transparent;
	animation: drawOutline 3s ease forwards;
}

.clubpro-steps__item.active .clubpro-steps__item-number.svg_animate path.animation {
	animation: drawOutline 3s ease forwards;
}

@keyframes drawOutline {
	to {
		stroke-dashoffset: 0;
	}
}

@media(max-width: 1279px) {
	.clubpro-steps__item {
		flex-direction: column;
		gap: 14px;
	}

	.clubpro-steps__item-title {
		font-size: 16px;
		line-height: 24px;
		letter-spacing: 0.16px;
	}

	.clubpro-steps__item-number {
		width: 100%;
		height: unset;
	}

	.clubpro-steps__item:nth-child(1) .clubpro-steps__figure {
		width: 35px;
	}

	.clubpro-steps__item:nth-child(2) .clubpro-steps__figure {
		width: 54px;
	}

	.clubpro-steps__item:nth-child(3) .clubpro-steps__figure {
		width: 54px;
	}
}

@media(max-width: 767px) {
	.breadcrumbs__icon path {
		fill: var(--white-color);
	}
	
	.clubpro-steps__item {
		min-width: 61%;
	}

	.clubpro-steps__list {
		overflow-x: scroll;
		display: flex;
		width: calc(100% + 40px);
		position: relative;
		left: -20px;
		padding: 0 20px 5px 20px;
		gap: 20px;
	}

	.clubpro-steps__list::-webkit-scrollbar {
		width: 4px;
		height: 4px;
	}
}

@media(max-width: 600px) {
	.clubpro-steps__item {
		min-width: 78%;
	}
}
/* Steps */