/* header Css  */

.header____social {
	color: var(--extra-color-2);
	font-size: 16px;
	/* margin: 0px 6px; */
	background: transparent;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.site-header span.number {
	background: var(--extra-color-4);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	font-size: 8px;
	right: -8px;
	top: -5px;
}

.single-item {
	position: relative;
	overflow: visible !important;
}

.hover-icon {
	position: absolute;
	top: -30px;
	right: -20px;
	width: 32px;
	height: 32px;
	background: linear-gradient(135deg, #ff43c0, #8f2fff);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: white;
	box-shadow: 0 4px 15px rgba(255, 67, 192, 0.5);
	z-index: 100;
	pointer-events: none;
	font-weight: bold;
	top: 40px !important;
}

.hover-icon i {
	font-size: 14px;
}

.hover-icon img {
	width: 18px;
	height: 18px;
	border-radius: 50%;
}

.header-link .single-item {
	overflow: visible;
}

.header____social,
.icon-badge,
.exclusive-btn,
.link-here {
	transition: all 0.2s ease;
}

@media (min-width: 1400px) {
	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl,
	.container-xxl {
		max-width: 1140px;
	}
}

/* header Css  */

/* banner Css  */
.banner {
	background-image: url(../img/banner-bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	width: 100%;
	position: relative;
}

.banner::after {
	content: "";
	position: absolute;
	bottom: -34px;
	left: -5%;
	width: 110%;
	height: 80px;
	background: #fff;
	transform: rotate(-2deg);
	z-index: 1;
}

.banner____btn {
	background: var(--extra-color-2);
	color: var(--dark-color);
}

.popular___span {
	border-radius: 30px;
	background: #223752;
}

.banner_____image {
	position: relative;
	transform: scale(1.1);
	z-index: 999;
}

.banner_____image img {
	filter: drop-shadow(0 0 95px rgba(44, 201, 143, 0.7));
	animation: upDown 6s ease-in-out infinite;
	position: relative;
	top: -20px;
}

.promo-card {
	width: 100px;
	height: 100px;
	position: relative;
	border-radius: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	right: -10px;
}

.promo-card::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	padding: 10px;
	border-radius: 25px;
	background: url("../img/que-img.png") center/cover no-repeat;
	background-size: 100% 100%;
	height: 120px;
	width: 102px;
}

.promo-glow {
	width: 160px;
	height: 165px;
	background: url("../img/que-img1.png") center/cover no-repeat;
	backdrop-filter: blur(50px);
	border-radius: 30px;
	z-index: -1;
	transform: rotate(360deg);
	position: absolute;
	top: 20px;
	left: -19px;
	right: 0;
	bottom: 0;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: 100% 100%;
}

.promo____main {
	top: 80px;
	right: -30px;
}

.commas____left {
	left: -6px;
	font-size: 70px;
	top: -10px;
	height: fit-content;
	line-height: 1;
}

.commas____right {
	font-size: 70px;
	line-height: 1;
	z-index: 9;
	right: -10px;
	bottom: -42px;
	height: fit-content;
}

.banner____slider {
	z-index: 99;
}

/* banner Css  */

/* collector-section Css  */
.collector-section {
	background-image: url(../img/collector-bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-color: #121c23;
}

.collector-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--extra-color-8);
	mix-blend-mode: color;
	z-index: 1;
}

.collector-section > * {
	position: relative;
	z-index: 2;
}

.collector____slider {
	overflow: hidden;
	padding-bottom: 50px;
}

.collector____slider.slick-dotted.slick-slider {
	margin-bottom: 0px;
}

.collector____slider .collector___slide {
	width: 180px;
	margin-right: 20px;
	overflow: hidden;
}

.collector____slider .slick-list {
	overflow: visible;
}

.collector____slider .slick-dots {
	bottom: 5px;
}

.collector____slider .slick-dots li.slick-active {
	background: var(--body-color);
}

.collector____slider .slick-dots li {
	background: transparent;
	border-radius: 50%;
	width: 10px;
	height: 10px;
	border: 5px solid transparent;
	height: 10px;
	width: 10px;
	margin: 0 6px;
	border-radius: 50%;
	transition: 0.4s ease;
	outline: 2px solid #ffff;
	margin: 0px 10px;
}

.collector____slider .slick-dots button {
	display: none;
}

.collector____slider
	.collector___slide:hover
	.video-player
	.custom-controls
	button {
	opacity: 1;
}

/* collection-section Css  */
.collection-section {
	position: relative;
	overflow: hidden;
	padding-top: 90px;
}

.collection-section::before {
	content: "";
	position: absolute;
	top: -40px;
	left: -5%;
	width: 110%;
	height: 80px;
	background: #fff;
	/* page background color */
	transform: rotate(-2deg);
	z-index: 1;
}

.collection____slider {
	overflow: hidden;
	padding-bottom: 0px;
}

.collection____slider.slick-dotted.slick-slider {
	margin-bottom: 0px;
}

.collection____slider .collection____slide {
	width: 135px;
	margin-right: 10px;
	overflow: hidden;
}

.collection____slider .slick-list {
	overflow: visible;
}

.collection____image figure {
	width: fit-content;
	margin: auto;
	position: relative;
}

span.collection____circle {
	width: 12px;
	height: 12px;
	display: block;
	border-radius: 50%;
}

.owned____circle {
	background: #2eb867;
}

.wishlist____circle {
	background: #d4006a;
}

.miss____circle {
	background: var(--extra-color-3);
}

.collection____slider .collection____slide:hover .hover____image {
	transform: translateX(0px);
	opacity: 1;
}

.collection____slider .collection____slide:hover .collection___img {
	opacity: 0;
}

.collection____slider .collection____slide:hover .collection____wrap {
	transform: scale(1.1);
}

.collection____image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: auto;
}

/* collection-section Css  */

/* shop-section Css  */
.shop____wrapper {
	background: #eef2f8;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
	border: 1px solid #e4e4e7;
	height: 100%;
	overflow: hidden;
}

.shop____wrapper:hover {
	box-shadow: 0px 8px 30px 0px rgba(168, 58, 223, 0.15);
}

.shop___desc {
	opacity: 0;
}

.shop____wrapper:hover .shop___desc {
	opacity: 1;
}

.shop____wrapper:hover .shop___image .shop____img {
	opacity: 0;
}

.shop____wrapper:hover .shop___image .hover____image {
	opacity: 1;
	transform: translateX(0px);
	transform: scale(1.4);
}

.shop___image figure {
	position: relative;
}

.shop____wrapper .hover____image {
	transform: translateX(100px);
}

/* shop-section Css  */

/* set-section Css  */
.set___wrapper {
	border: 1px solid #e4e4e7;
	height: 100%;
}

.custom-progress {
	height: 10px;
	background: #ececec;
	border-radius: 50px;
	overflow: hidden;
}

.set-section .progress-fill {
	background: var(--extra-color-8);
	border-radius: 50px;
	transition: width 0.4s ease;
}

.icon-box {
	width: 42px;
	height: 42px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	cursor: pointer;
	transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.1);
	user-select: none;
}

.active-icon {
	background: #f2ebfa;
	border: 3px solid #e4e4e7;
	opacity: 1;
}

.locked-icon {
	border: 3px dashed #f0f0f1;
	color: #b9b9b9;
	background: #fbfbfb;
	opacity: 0.4;
}

.icon-box:hover {
	transform: translate(3px, 3px) scale(1.06);
}

.complete-btn {
	background: #2eb867;
}

.complete-btn:hover {
	transform: translateY(-2px);
}

/* set-section Css  */

/* mystery-section Css  */
.mystery-section {
	position: relative;
	background: url(../img/mystery-bg.png) no-repeat center / cover;
	position: relative;
	padding-top: 70px;
}

.banner____btn:hover img.img-fluid {
	filter: brightness(0) saturate(100%) invert(72%) sepia(60%) saturate(507%)
		hue-rotate(100deg) brightness(83%) contrast(92%);
}

.curve___section::after {
	content: "";
	position: absolute;
	top: -40px;
	left: -5%;
	width: 110%;
	height: 80px;
	background: #fff;
	/* page background color */
	transform: rotate(-2deg);
	z-index: 1;
}

.mystery____image {
	margin-top: -100px;
	padding-right: 60px;
}

.mystery____image figure img.img-fluid {
	border-radius: 30px;
	margin-bottom: 19px;
	width: 100%;
	height: 430px;
	object-fit: cover;
}

.mystery-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--extra-color-8);
	mix-blend-mode: color;
	z-index: 1;
}

.mystery-section > * {
	position: relative;
	z-index: 2;
}

.mystery_____content .popular___span {
	background: #f2ebfa;
}

/* mystery-section Css  */

/* experiecne-section Css  */
.experience___wrapper {
	border: 1px solid #e4e4e7;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.count___badge {
	background: #6f6f73;
	padding: 4px 7px;
	border-radius: 30px;
}

.experience____image {
	padding: 10px 0px;
}

.experience____image figure {
	display: flex;
	align-items: center;
	justify-content: center;
}

.experience___wrapper:hover {
	background: #c8c8ca;
}

.experience___wrapper:hover .video-player .custom-controls button {
	opacity: 1;
}

.experience___wrapper:hover .experience____image figure img.img-fluid {
	transform: scale(1.2);
}

/* experiecne-section Css  */

/* choose-section Css  */
.choose____wrapper {
	border: 1px solid #e4e4e7;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.choose___span {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	border-radius: 20px;
}

.package___span {
	background: #ebf2fa;
}

.shipping___span {
	background: #fcf7e8;
}

.verified___span {
	background: #ecf9f1;
}

.exclusive___span {
	background: #faebf2;
}

.choose____wrapper {
	overflow: visible;
}

.choose____icon,
.choose____content {
	opacity: 0;
}

/* choose-section Css  */

/* calendar-section Css  */
.calendar____date {
	width: 70px;
	height: 70px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
}

.icon____notify {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid #e4e4e7;
	border-radius: 16px;
	color: #2b8cee;
	font-size: 17px;
	transition:
		transform 0.3s ease,
		background 0.3s ease;
	transform-origin: right center;
}

.icon____notify:hover {
	background: #ebf2fa;
	transform: scale(1.1);
}

.collection____date {
	background: #2eb867;
}

.calendar____wrapper {
	border: 1px solid #e4e4e7;
	box-shadow: 0 4px 20px 0 rgba(23, 23, 28, 0.06);
	transition:
		box-shadow 0.4s ease,
		/* smooth shadow change */ transform 0.4s ease;
	/* smooth move */
}

.calendar____wrapper:hover {
	box-shadow: 0 8px 30px 0 rgba(168, 58, 223, 0.15);
	transform: translateY(-10px);
}

.edition____date {
	background: #2b8cee;
}

.wave____date {
	background: #f97a1f;
}

.exclusive____date {
	background: #a83adf;
}

.vault____date {
	background: #ef3994;
}

/* calendar-section Css  */

/* vibe-section Css  */
.curve___section {
	position: relative;
	padding-top: 70px;
}

.vibe___wrapper {
	background: #adb1b3;
	overflow: hidden;
	border: 1px solid #52585d;
	height: 100%;
	transition: 0.6s ease;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.vibe____image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.vibe___wrapper:hover {
	border-color: #e4e4e7;
}

.vibe____content {
	background: #353d43;
}

.vibe___wrapper:hover .main___image {
	opacity: 0;
}

.hover____image {
	/* display: none; */
	transition: 0.6s ease;
	transform: translateX(-100px);
	top: 0;
	bottom: 0;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	opacity: 0;
}

.vibe___wrapper figure {
	position: relative;
	overflow: hidden;
	height: 100%;
}

.vibe___wrapper figure img.img-fluid {
	height: 100%;
}

.vibe___wrapper:hover .hover____image {
	/* display: block; */
	transform: translateX(0px);
	opacity: 1;
}

/* vibe-section Css  */

/* vault-section Css  */
.vault-section {
	background-image: url(../img/vault-bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.vault____image .img-fluid {
	filter: drop-shadow(0px 10px 15px -3px rgba(0, 0, 0, 0.1))
		drop-shadow(0px 4px 6px -4px rgba(0, 0, 0, 0.1));
	border-radius: 20px;
}

.vault____image figure:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(transparent, #000);
	z-index: 1;
	transition: 0.6s cubic-bezier(0.92, -0.08, 0, 1.06);
}

.vault____image figure {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
}

.vault____image:hover figure:before {
	top: 0;
}

.vault____image {
	/* background: var(--body-color); */
	overflow: hidden;
}

.vault____image .animated___right___image {
	transform: translateX(100%);
}

/* vault-section Css  */

/* footer Css  */
.site-footer {
	background-image: url(../img/footer-bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #111b22;
	width: 100%;
	background-position: center;
	padding: 90px 0 10px;
	position: relative;
}

.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--extra-color-8);
	mix-blend-mode: color;
	z-index: 1;
}

.site-footer > * {
	position: relative;
	z-index: 2;
}

/* footer Css  */

.vault-products-section {
	/* background: #f4f4f4; */
	/* padding: 90px 0; */
	position: relative;
	overflow: hidden;
	z-index: 99;
}

.vault-heading {
	text-align: center;
	margin-bottom: 55px;
	position: relative;
	z-index: 2;
}

.vault-heading h2 {
	font-size: 42px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #17171c;
	font-family: "bangers-regular";
}

.vault-heading p {
	color: #777;
	margin-top: 10px;
	font-size: 15px;
}

.vault-card {
	border: none;
	border-radius: 20px;
	overflow: hidden;
	background: #fff;
	transition: 0.4s ease;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
	position: relative;
	z-index: 2;
	will-change: transform, box-shadow;
	padding: 17px 17px;
	border: 1px solid #e4e4e7;
}

.vault-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.vault-img-box {
	background: #f1f1f1;
	height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	border-radius: 20px;
}

.vault-img-box img {
	width: 150px;
	transition: 0.4s ease;
	will-change: transform;
}

.vault-card:hover .vault-img-box img {
	transform: scale(1.1) rotate(-3deg);
}

.vault-badge {
	position: absolute;
	top: 15px;
	left: 15px;
	padding: 5px 12px;
	border-radius: 30px;
	font-size: 12px;
	color: #fff;
	font-weight: 600;
	z-index: 2;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	font-family: "inter_28pt-bold";
}

.exclusive {
	background: #d4006a;
}

.new {
	background: #2eb867;
}

.limited {
	background: #a83adf;
}

.hot {
	background: #f97a1f;
}
.trading {
	background-color: #2b8cee;
}
.rare {
	background-color: #a83adf;
}
.fav {
	background-color: #e83030;
}

.vault-card-body {
	padding-top: 15px;
}

.vault-title {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 8px;
	color: #111;
}

.vault-rating {
	color: #7d7d7d;
	font-size: 13px;
	margin-bottom: 12px;
	font-family: "inter_28pt-medium";
}

.vault-price-cart {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.vault-price {
	font-size: 20px;
	font-weight: 800;
	color: #17171c;
	font-family: "space-bold";
}

.vault-cart-btn {
	background: #2cc98f;
	border: none;
	padding: 10px 16px;
	border-radius: 30px;
	color: #0b121f;
	font-weight: 600;
	font-size: 13px;
	transition: 0.3s;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: "inter_28pt-bold";
	text-transform: capitalize;
}

.vault-cart-btn i {
	font-size: 13px;
}

.vault-cart-btn:hover {
	background: #0ea768;
	transform: scale(1.05);
	color: #fff;
}

@media (max-width: 768px) {
	.vault-heading h2 {
		font-size: 30px;
	}

	.vault-img-box {
		height: 180px;
	}

	.vault-img-box img {
		width: 120px;
	}

	.vault-price {
		font-size: 18px;
	}

	.vault-cart-btn {
		padding: 7px 12px;
		font-size: 12px;
	}
}

.exclusive-drop-wrap {
	position: relative;
	overflow: hidden;
	padding: 110px 0;
	/* Only Background Image */
	background-image: url("../img/funko-bg.png");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.exclusive-drop-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			circle at top right,
			rgba(255, 0, 212, 0.18),
			transparent 40%
		),
		radial-gradient(
			circle at bottom left,
			rgba(0, 183, 255, 0.12),
			transparent 35%
		);

	z-index: 1;
}

.exclusive-container {
	position: relative;
	z-index: 2;
}

.exclusive-drop-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(
		rgba(255, 255, 255, 0.04) 2px,
		transparent 2px
	);
	background-size: 60px 60px;
	opacity: 0.3;
}

.exclusive____main::after {
	content: "";
	position: absolute;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, #ff00d42d 0%, transparent 70%);
	top: -120px;
	right: -100px;
	pointer-events: none;
}

.exclusive-container {
	position: relative;
	z-index: 2;
}

.exclusive-title {
	text-align: center;
	margin-bottom: 60px;
}

.exclusive-title h2 {
	color: #fff;
	font-size: 58px;
	font-weight: 800;
	letter-spacing: 1px;
}

.exclusive-title span {
	color: #ff43c0;
}

.exclusive-title p {
	color: #9aa4b2;
	margin-top: 10px;
	font-size: 15px;
}

.exclusive-character-box {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.exclusive-character-frame {
	/* width: 320px; */
	/* height: 470px; */
	border-radius: 210px;
	/* background: linear-gradient(180deg, #2b103f, #050816); */
	border: 8px solid rgba(255, 255, 255, 0.08);
	position: relative;
	overflow: hidden;
	box-shadow:
		0 0 40px rgba(255, 0, 221, 0.35),
		0 0 90px rgba(102, 0, 255, 0.25);
	padding: 0px;
}

.exclusive-character-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* padding: 0px; */
	animation: floaty 3s ease-in-out infinite;
	/* filter: drop-shadow(0 0 15px #8a2eff) drop-shadow(0 0 30px #ff00d4); */
}

@keyframes floaty {
	0% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-15px);
	}

	100% {
		transform: translateY(0px);
	}
}

.exclusive-content {
	padding-left: 40px;
}

.exclusive-badge {
	display: inline-block;
	padding: 8px 18px;
	background: #512d56;
	color: #ff47c2;
	border-radius: 40px;
	font-size: 13px;
	font-family: var(--primary-bold-font);
	font-weight: 700;
	margin-bottom: 18px;
	text-transform: uppercase;
}

.exclusive-heading {
	color: #fff;
	font-size: 34px;
	margin-bottom: 18px;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.exclusive-description {
	color: #9ba7b4;
	font-size: 15px;
	line-height: 1.8;
	margin-bottom: 30px;
	max-width: 500px;
}

.exclusive-counter {
	display: flex;
	gap: 15px;
	margin-bottom: 30px;
	flex-wrap: wrap;
}

.counter-box {
	width: 90px;
	height: 90px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	backdrop-filter: blur(10px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

.counter-box h3 {
	color: #ffd95a;
	font-size: 30px;
	font-weight: 800;
	margin-bottom: 0;
}

.counter-box span {
	color: #94a1af;
	font-size: 13px;
}

.exclusive-progress-area {
	margin-bottom: 25px;
}

.exclusive-progress-top {
	display: flex;
	justify-content: space-between;
	color: #fff;
	margin-bottom: 10px;
	font-size: 14px;
}

.exclusive-progress {
	width: 100%;
	height: 14px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 50px;
	overflow: hidden;
	position: relative;
}

.exclusive-progress-bar {
	width: 0;
	height: 100%;
	border-radius: 50px;
	background: linear-gradient(90deg, #ff2f92, #ffae00);
	position: relative;
	transition: width 3s ease;
	box-shadow: 0 0 20px rgba(255, 125, 0, 0.5);
}

.exclusive-progress-bar::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 80px;
	height: 100%;
	background: rgba(255, 255, 255, 0.35);
	filter: blur(10px);
}

.exclusive-bottom {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.exclusive-price {
	color: #ffd23f;
	font-size: 42px;
	font-weight: 900;
}

.exclusive-btn {
	border: none;
	padding: 14px 28px;
	border-radius: 14px;
	font-weight: 700;
	transition: 0.3s;
}

.btn-collect {
	background: linear-gradient(90deg, #c79f52, #f5df92);
	color: #402b00;
	text-transform: capitalize;
	font-family: var(--secondary-bold-font);
}

.btn-collect:hover {
	transform: translateY(-4px);
}

.btn-notify {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-notify:hover {
	background: #fff;
	color: #111;
}

@media (max-width: 991px) {
	.exclusive-content {
		padding-left: 0;
		margin-top: 50px;
		text-align: center;
	}

	.exclusive-counter {
		justify-content: center;
	}

	.exclusive-bottom {
		justify-content: center;
	}

	.exclusive-heading {
		font-size: 40px;
	}

	.exclusive-character-frame {
		width: 300px;
		height: 450px;
	}
}

@media (max-width: 576px) {
	.exclusive-title h2 {
		font-size: 38px;
	}

	.exclusive-heading {
		font-size: 30px;
	}

	.counter-box {
		width: 75px;
		height: 75px;
	}

	.counter-box h3 {
		font-size: 22px;
	}
}

.exclusive-drops {
	padding: 100px 0;
	background: url("../img/preminum-bg.png") center/cover no-repeat;
	overflow: hidden;
	background-size: 100% 100%;
}

.exclusive-drops > * {
	position: relative;
	z-index: 99;
}

.exclusive-drops::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--extra-color-8);
	mix-blend-mode: color;
	z-index: 1;
}

.related-item {
	cursor: pointer;
}

.related-img {
	display: inline-block;
	transition: all 0.3s ease;
}

/* Emoji styling with animation */
.hover-emoji {
	display: inline-block;
	font-size: 30px;
	animation: emojiBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transform-origin: center;
}

@keyframes emojiBounce {
	0% {
		transform: scale(0) rotate(-200deg);
		opacity: 0;
	}

	50% {
		transform: scale(1.3) rotate(10deg);
	}

	70% {
		transform: scale(0.95);
	}

	100% {
		transform: scale(1) rotate(0deg);
		opacity: 1;
	}
}

/* Image fade out animation */
.related-img.fade-out {
	animation: imageFadeOut 0.4s forwards;
}

@keyframes imageFadeOut {
	0% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(0.8);
		visibility: hidden;
		display: none;
	}
}

/* TITLE */
.section-title {
	color: #fff;
	font-size: 52px;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 10px;
	letter-spacing: 5px;
}

.section-subtitle {
	color: #a9b4c0;
	font-size: 15px;
}
.position-relative1111 {
	position: relative;
	z-index: 111111;
}
.countdown .expired {
	height: 68px;
	color: #e55d5d;
	font-family: "inter_28pt-medium";
	display: flex;
	justify-content: center;
}
.drop-card {
	background: #fff;
	border-radius: 24px;
	padding: 25px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	transition: 0.4s ease;

	opacity: 0;
	transform: translateY(80px);
}

.drop-card:hover {
	transform: translateY(-10px);
}

.product-images {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-bottom: 20px;
}

.toy-img {
	width: 69px;
	height: 76px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #fff;
}
.exclusive-progress-top span {
	color: #e55d5d;
}
.product-title {
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 10px;
}

.product-price {
	text-align: center;
	font-size: 34px;
	font-weight: 800;
	margin-bottom: 25px;
	font-family: var(--primary-bold-font);
	color: #7d7d7d;
}

.countdown {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-bottom: 25px;
}

.time-box {
	width: 58px;
	height: 68px;
	background: #f4f4f4;
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px solid #6d6d784d;
	justify-content: center;
}

.time-box span {
	font-size: 18px;
	font-weight: 700;
	font-family: "inter_28pt-bold";
}

.time-box small {
	color: #6d6d78;
	font-size: 11px;
	font-family: "inter_28pt-medium";
}

.stock-info {
	display: flex;
	justify-content: space-between;
	margin-bottom: 12px;
	font-size: 13px;
}

.stock-left {
	color: #6d6d78;
	font-family: "inter_28pt-regular";
}

.stock-right {
	color: #6d6d78;
	font-family: "inter_28pt-regular";
}

.custom-progress {
	width: 100%;
	height: 8px;
	background: #e8e8e8;
	border-radius: 50px;
	overflow: hidden;
	margin-bottom: 25px;
	position: relative;
}

.progress-fill {
	width: 0%;
	height: 100%;
	border-radius: 50px;
	background: linear-gradient(90deg, #7d7d7d, #7d7d7d);
	position: relative;
}

/* Glow Effect */

/* BUTTON WRAP */
.btn-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
}

.grab-btn {
	flex: 1;
	border: none;
	padding: 14px;
	border-radius: 50px;
	background: #2cc98f;
	color: #0b121f;
	font-weight: 700;
	transition: 0.3s;
	font-family: "inter_28pt-bold";
}

.grab-btn:hover {
	background: #1db77d;
	transform: translateY(-2px);
}

.bell-btn {
	width: 52px;
	height: 52px;
	border: none;
	border-radius: 50%;
	background: transparent;
	font-size: 20px;
	transition: 0.3s;
	border: 1px solid #e4e4e7;
}

.bell-btn:hover {
	background: #25d08f;
	color: #fff;
	transform: scale(1.1);
}

/* RESPONSIVE */
@media (max-width: 768px) {
	.section-title {
		font-size: 36px;
	}

	.product-price {
		font-size: 28px;
	}
}

.collection-story-mode-section {
	width: 100%;
	padding: 90px 0 50px;
	overflow: hidden;
	position: relative;
	font-family: "Poppins", sans-serif;
}

.collection-story-mode-heading {
	margin-bottom: 80px;
}

.collection-story-mode-timeline {
	max-width: 900px;
	margin: auto;
	position: relative;
	padding-left: 90px;
}

.collection-story-mode-timeline::before {
	content: "";
	position: absolute;
	left: 24px;
	top: 40px;
	width: 3px;
	height: 90%;
	background: #dddddd;
}

.collection-story-mode-item {
	position: relative;
	margin-bottom: 40px;
}

/* CARD STYLES */
.collection-story-mode-card {
	flex: 1;
	transition: all 0.2s ease;
}

/* Hover effect: when card is hovered, the sibling icon gets translate + scale animation */
.collection-story-mode-item:hover .collection-story-mode-icon {
	transform: translate(0px, -8px) scale(1.08) rotate(2deg);
	box-shadow:
		0 18px 28px -8px rgba(0, 0, 0, 0.5),
		0 0 0 2px rgba(237, 73, 86, 0.3);
}

/* Optional: subtle enhancement - icon image also scales gently on card hover */
.collection-story-mode-item:hover .collection-story-mode-icon img {
	transform: scale(1.02);
}

.collection-story-mode-icon {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #7d7d7d;
	position: absolute;
	left: -87px;
	top: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 16px;
	z-index: 2;
	box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}

.collection-story-mode-card {
	background: #fff;
	border: 1px solid #e4e4e7;
	border-radius: 20px;
	padding: 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
	transition: 0.4s;
}

.collection-story-mode-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.collection-story-mode-year {
	color: #7d7d7d;
	letter-spacing: 1px;
}

.collection-story-mode-related {
	margin-top: 70px;
}

.collection-story-mode-related h4 {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 1px;
	color: #6d6d78;
	margin-bottom: 30px;
	font-family: "inter_28pt-bold";
}

.collection-story-mode-related-icons {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}
.bell-btn i {
	color: #6d6d78;
}
.grab-btn img {
	width: 20px;
	height: 20px;
	object-fit: scale-down;
	margin-right: 9px;
}
.collection-story-mode-related-icons a {
	width: 68px;
	height: 68px;
	border-radius: 18px;
	background: #f2ebfa;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #232323;
	font-size: 28px;
	text-decoration: none;
	border: 4px solid #edebf1;
	overflow: hidden;
	transition: 0.6s ease;
}

.collection-story-mode-related-icons a:hover {
	transform: translateY(-6px);
	background: #dcc7ff;
}
.drag-items-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: auto;
	z-index: 20;
	overflow: hidden;
	border-radius: 48px;
}

.drag-img {
	position: absolute;
	width: 86px;
	height: 86px;
	cursor: grab;
	pointer-events: auto;
	filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.4));
	transition: filter 0.1s;
	z-index: 30;
	will-change: transform;
}

.drag-img:active {
	cursor: grabbing;
	filter: drop-shadow(0 4px 10px black);
}

.drag-img img {
	width: 100%;
	height: 100%;
	object-fit: scale-down;
	border-radius: 30% 70% 45% 55% / 55% 40% 60% 45%;
	/* border: 2.5px solid #ffdd99; */

	/* background: #1e2a36; */
	pointer-events: none;
}

@keyframes upDown {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-15px);
	}
	100% {
		transform: translateY(0px);
	}
}

/* bottom ambient glow only - no sparks */
.bottom-glow-area {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 80px;
	background: radial-gradient(
		ellipse at center,
		rgba(245, 197, 66, 0.35) 0%,
		rgba(245, 197, 66, 0) 85%
	);
	filter: blur(18px);
	pointer-events: none;
	z-index: 15;
	opacity: 0;
	transition: opacity 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.instruction-badge {
	position: absolute;
	bottom: 20px;
	right: 20px;
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(8px);
	padding: 8px 18px;
	border-radius: 40px;
	color: #ffdd99;
	font-size: 0.75rem;
	font-weight: 500;
	z-index: 25;
	font-family: monospace;
	pointer-events: none;
	letter-spacing: 0.5px;
	border-left: 3px solid #f5c542;
}

@media (max-width: 992px) {
	.col-lg-6 {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.banner_____image {
		transform: scale(1);
		margin-top: 2rem;
		text-align: center;
	}
	.target-heading {
		font-size: 2.5rem;
	}
	.drag-img {
		width: 70px;
		height: 70px;
	}
}
@media (max-width: 991px) {
	.collection-story-mode-heading h2 {
		font-size: 52px;
	}

	.collection-story-mode-card h3 {
		font-size: 28px;
	}
}

@media (max-width: 767px) {
	.collection-story-mode-section {
		padding: 70px 0;
	}

	.collection-story-mode-heading {
		margin-bottom: 55px;
	}

	.collection-story-mode-heading h2 {
		font-size: 38px;
	}

	.collection-story-mode-heading p {
		font-size: 15px;
	}

	.collection-story-mode-timeline {
		padding-left: 70px;
	}

	.collection-story-mode-icon {
		left: -67px;
		width: 36px;
		height: 36px;
		font-size: 14px;
	}

	.collection-story-mode-card {
		padding: 24px;
		border-radius: 22px;
	}

	.collection-story-mode-card h3 {
		font-size: 22px;
	}

	.collection-story-mode-card p {
		font-size: 15px;
	}

	.collection-story-mode-related h4 {
		font-size: 20px;
	}

	.collection-story-mode-related-icons a {
		width: 54px;
		height: 54px;
		font-size: 22px;
		border-radius: 14px;
	}
}