.asset-carousel-wrapper {
	max-width: 1046px;
	z-index: 1;
	top: 55%;
	left: 50%;
	transform: translate(-50%, 50%);
}

@media (min-width: 1024px) {
	.asset-carousel-wrapper {
		width: 90%;
		top: 62%;
	}
}

@media (min-width: 1250px) {
	.asset-carousel-wrapper {
		width: 70%;
	}
}

.asset-carousel .i-slider {
	display: flex;
}

body[dir=rtl] .asset-carousel .i-slider {
	flex-direction: row-reverse;
}

body[dir=rtl] .asset-carousel__slide {
    padding: 32px 24px 40px;
}

i-slider.asset-carousel:not([axis]) .i-slide:not([skip-items-offset='true']),
i-slider.asset-carousel[axis='horizontal'] .i-slide:not([skip-items-offset='true']) {
	padding: 0 8px;
}

@media (min-width: 1024px) {
	i-slider.asset-carousel:not([axis]) .i-slide:not([skip-items-offset='true']),
	i-slider.asset-carousel[axis='horizontal'] .i-slide:not([skip-items-offset='true']) {
		padding: 0 16px;
	}
}

.asset-carousel__slide {
	justify-content: flex-start;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.15);
}

.asset-carousel__slide-number {
	height: 48px;
	width: 48px;
	color: #b40024;
	font-family: var(--font-book, 'Gotham SSm book A', 'Gotham SSm book B', Helvetica, Arial, sans-serif);
	font-size: 30px;
	font-style: normal;
	font-weight: 400;
	line-height: 44px;
	border: 2px solid #b40024;
	border-radius: 25px;
}

/*
Added different line-height for RTL for mobile devices in order to center slide number vertically
*/
body[dir=rtl] .asset-carousel__slide-number {
	font-size: 36px;
	line-height: 54px;
}

@media (min-width: 1024px) {
	body[dir=rtl] .asset-carousel__slide-number {
		line-height: 44px;
	}
}

.asset-carousel__slide-text {
	color: #333;
	font-family: var(--font-book, 'Gotham SSm book A', 'Gotham SSm book B', Helvetica, Arial, sans-serif);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 145%;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

body[dir=rtl] .asset-carousel__slide-text {
	font-size: 17px;
	line-height: 150%;
}

.asset-carousel-wrapper--selling-samples {
	top: unset;
	transform: translate(-50%, 5%);
}

@media (min-width: 631px) {
	.asset-carousel-wrapper--selling-samples {
		top: unset;
		transform: translate(-50%, 40%);
	}
}

@media (min-width: 1024px) {
	.asset-carousel-wrapper--selling-samples {
		top: unset;
		transform: translate(-50%, -20%);
	}
}

body[dir=rtl] .asset-carousel-wrapper--selling-samples {
	transform: translate(-50%, 5%);
}
.circle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
}
 
.circle {
    width: 48px;
    height: 48px;
    border: 2px solid #b40024;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.circle-number {
    font-size: 30px;
    color: #b40024;
}
 
body[dir=rtl] .circle-number {
    font-size: 36px;
    color: #b40024;
    line-height: 54px;
}
 
/* Apply styles only for Safari to center circle with number element
    padding-top is necessary to fix issue with font-family: Tajawal on RTL for Safari,
    where number is not centered in the circle
*/
@supports (-webkit-appearance: -apple-pay-button) {
    body[dir=rtl] .circle-number {
        padding-top: 12px;
    }
}
 
.custom-padding-rendering {
    padding-top: 12px;
}