/*
 * Scrolling Titcker CSS
 * */

.widget-scrolling-ticker {}

.scrolling-ticker{
	--gap: 100px;
	position: relative;
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
	align-items: center;
}

.scrolling-content{
	flex-shrink: 0;
	display: flex;
	gap: var(--gap);
	min-width: 100%;
	animation: scroll 30s linear infinite;
}

.scrolling-content .content-wrapper{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.scrolling-content .content-wrapper .ticker-icon,
.scrolling-content .content-wrapper .ticker-icon svg{
	width: 30px;
	height: 30px;
}

.scrolling-content .content-wrapper .ticker-icon svg{
	color: var(--white-color);
}

.scrolling-content .content-wrapper .ticker-icon svg path{
	fill: currentcolor;
}

.scrolling-content .content-wrapper .ticker-title{
	font-family: var(--e-global-typography-secondary-font-family);
	font-size: 30px;
	font-style: normal;
	font-weight: 700;
	line-height: 120%;
	letter-spacing: 1.8px;
	margin: 0;
	color: var(--white-color);
}

@keyframes scroll{
	from{
		transform: translateX(0);
	}

	to{
		transform: translateX(calc(-100% - var(--gap)));
	}
}

@media only screen and (max-width: 1024px){
	
	.scrolling-ticker{
		--gap: 50px;
	}
	
	.scrolling-content .content-wrapper .ticker-title{
		font-size: 26px;
	}
}


@media only screen and (max-width: 767px){

	.scrolling-ticker{
		--gap: 30px;
	}
	
	.scrolling-content .content-wrapper{
		gap: 10px;
	}
	
	.scrolling-content .content-wrapper .ticker-icon,
	.scrolling-content .content-wrapper .ticker-icon svg{
		width: 24px;
    	height: 24px;
	}
	
	 .scrolling-content .content-wrapper .ticker-title {
        font-size: 22px;
    }

}

/*
 * Collection Widget CSS
 * */

.dumplin-bag-collection-carousel-wrap{
/* 	overflow-x: clip; */
}

.dumplin-bag-collection-carousel .slick-slide{
	height: auto;
	margin: 0 15px;
}

.dumplin-bag-collection-carousel .slick-list{
	margin: 0 -15px;
}

.dumplin-bag-collection-carousel .slick-track{
    height: 100%;
    display: flex;
	flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
}

.dumplin-bag-collection-carousel .slick-slide .collection-box{
	height: 100%;
}

.collection-box .collection-image{
	text-align: center;
	margin-bottom: 20px;
}

.collection-box .collection-image img{
	width: 100%;
	aspect-ratio: 1 / 0.8;
	border-radius: 10px;
	object-fit: cover;
	margin: 0 auto;
}

.collection-content .collection-title h3{
	font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
	font-size: var(--e-global-typography-secondary-font-size);
	font-weight: var(--e-global-typography-secondary-font-weight);
	text-transform: var(--e-global-typography-secondary-text-transform);
	font-style: var(--e-global-typography-secondary-font-style);
	line-height: var(--e-global-typography-secondary-line-height);
	margin: 0 0 15px;
	color: var(--white-color);
}

.collection-content .collection-desc{
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    text-transform: var(--e-global-typography-text-text-transform);
    font-style: var(--e-global-typography-text-font-style);
    line-height: var(--e-global-typography-text-line-height);
    letter-spacing: var(--e-global-typography-text-letter-spacing);
	color: var(--white-color);
}

.dumplin-bag-collection-carousel .slick-arrow{
	--arrow-left-right: -100px;
	position: absolute;
	top: 50%;
	bottom: auto;
    background-color: var(--white-color);
	color: var(--purple-color);
	border: none;
	border-radius: 100%;
	width: 40px;
	height: 40px;
	padding: 0;
    transition: all 0.4s ease-in-out;	
	z-index: 10;
	transform: translateY(-50%);
}

.dumplin-bag-collection-carousel .slick-arrow:hover,
.dumplin-bag-collection-carousel .slick-arrow:focus{
	
}

.dumplin-bag-collection-carousel .slick-arrow.prev-arrow{
	left: var(--arrow-left-right);
}

.dumplin-bag-collection-carousel .slick-arrow.prev-arrow:before,
.dumplin-bag-collection-carousel .slick-arrow.next-arrow:before{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: currentcolor;
	mask-image: url("../images/left.svg");
	mask-position: center center;
	mask-repeat: no-repeat;
	mask-size: contain;
	width: 20px;
	height: 20px;
}

.dumplin-bag-collection-carousel .slick-arrow.next-arrow{
	right: var(--arrow-left-right);
}

.dumplin-bag-collection-carousel .slick-arrow.next-arrow:before{
	mask-image: url("../images/right.svg");
}

/* Disable Slider CSS */
.dumplin-bag-collection-disable-carousel{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.dumplin-bag-collection-disable-carousel .slick-slide{
	display: block;
}

.style-one .dumplin-bag-collection-disable-carousel .slick-slide{
	width: calc(33.33% - 20px);
}

.style-two .dumplin-bag-collection-disable-carousel .slick-slide{
	width: calc(20% - 24px);
	height: auto;
}

.collection-box.style-two{
	background-color: var(--white-color);
	height: 100%;
}

.collection-box.style-two .collection-image{
	margin-bottom: 0;
}

.collection-box.style-two .collection-image img{
	aspect-ratio: 1 / 0.66;
	object-fit: cover;
	border-radius: 0;
}

.collection-box.style-two .collection-content{
	padding: 20px;
}

.collection-box.style-two .collection-content .collection-title h3{
	color: var(--e-global-color-primary);
	margin: 0;
}

@media only screen and (max-width: 1490px){
	
	.dumplin-bag-collection-carousel .slick-arrow{
		--arrow-left-right: -60px;
	}
}

@media only screen and (max-width: 1410px){
	
	.dumplin-bag-collection-carousel.{
		padding-bottom: 100px;
	}
	
	.dumplin-bag-collection-carousel .slick-arrow{
		--arrow-left-right: calc(50% - 45px);
		top: auto;
		bottom: 0;
		transform: translateY(0);
	}
}


@media only screen and (max-width: 1024px){
	
	.dumplin-bag-collection-carousel{
		padding-bottom: 80px;
	}
	
	.collection-box .collection-image img{
		aspect-ratio: 1 / 0.8;
	}
	
	
	/* Disable Slider CSS */
	.dumplin-bag-collection-disable-carousel-wrap {
		overflow-x: clip;
	}
	
	.dumplin-bag-collection-disable-carousel{
		padding-bottom: 80px;
	}
	
	.dumplin-bag-collection-disable-carousel .slick-list{
		margin: 0 -15px;
	}
	
	.dumplin-bag-collection-disable-carousel .slick-slide{
		margin: 0 15px;
	}
	
	.dumplin-bag-collection-disable-carousel .slick-track{
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		align-items: stretch;
	}
	
	.collection-box.style-two .collection-content .collection-title h3{
		font-size: 18px;
	}
	
	.dumplin-bag-collection-disable-carousel .slick-arrow{
		--arrow-left-right: calc(50% - 45px);
		position: absolute;
		top: auto;
		bottom: 0;
		background-color: var(--white-color);
		color: var(--dark-green);
		border: none;
		border-radius: 100%;
		width: 40px;
		height: 40px;
		padding: 0;
		transition: all 0.4s ease-in-out;	
		z-index: 10;
	}

	.dumplin-bag-collection-disable-carousel .slick-arrow.prev-arrow{
		left: var(--arrow-left-right);
	}
	
	.dumplin-bag-collection-disable-carousel .slick-arrow.next-arrow{
		right: var(--arrow-left-right);
	}

	.dumplin-bag-collection-disable-carousel .slick-arrow.prev-arrow:before,
	.dumplin-bag-collection-disable-carousel .slick-arrow.next-arrow:before{
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: currentcolor;
		mask-image: url("../images/left.svg");
		mask-position: center center;
		mask-repeat: no-repeat;
		mask-size: contain;
		width: 20px;
		height: 20px;
	}

	.dumplin-bag-collection-disable-carousel .slick-arrow.next-arrow:before{
		mask-image: url("../images/right.svg");
	}
	
	
}

@media only screen and (max-width: 767px){
	
	.dumplin-bag-collection-carousel .slick-track,
	.dumplin-bag-collection-disable-carousel .slick-track{
		height: auto;
	}
	
	.dumplin-bag-collection-carousel .slick-slide,
	.style-two .dumplin-bag-collection-disable-carousel .slick-slide{
		height: 100%;
	}

	.dumplin-bag-collection-carousel .slick-slide .collection-box,
	.dumplin-bag-collection-disable-carousel .slick-slide .collection-box{
		height: auto;
	}

	
	.collection-content .collection-title h3{
		margin: 0 0 10px;
	}
	
	.dumplin-bag-collection-disable-carousel{
		padding-bottom: 60px;
	}
	
	.collection-box.style-two .collection-content .collection-title h3{
		margin: 0;
	}
	
}