.elementor-2090 .elementor-element.elementor-element-79e33ad{--display:flex;--min-height:245px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;}.elementor-2090 .elementor-element.elementor-element-023eeb0 .elementor-repeater-item-63f3022 .swiper-slide-bg{background-image:url(https://gitimehrtrade.ir/wp-content/uploads/2025/10/WhatsApp-Image-2025-10-17-at-21.04.23-1.jpeg);background-size:cover;}.elementor-2090 .elementor-element.elementor-element-023eeb0 .elementor-repeater-item-63f3022 .swiper-slide-inner{align-items:center;text-align:center;}.elementor-2090 .elementor-element.elementor-element-023eeb0 .elementor-repeater-item-250ce68 .swiper-slide-bg{background-color:#052649;background-image:url(https://gitimehrtrade.ir/wp-content/uploads/2025/10/WhatsApp-Image-2025-10-19-at-20.22.59.jpeg);background-size:cover;}.elementor-2090 .elementor-element.elementor-element-023eeb0 .elementor-repeater-item-250ce68 .swiper-slide-contents{margin-left:auto;}.elementor-2090 .elementor-element.elementor-element-023eeb0 .elementor-repeater-item-250ce68 .swiper-slide-inner{align-items:center;text-align:center;}.elementor-2090 .elementor-element.elementor-element-023eeb0 .elementor-repeater-item-fc9ccfa .swiper-slide-bg{background-color:var( --e-global-color-873ab76 );background-image:url(https://gitimehrtrade.ir/wp-content/uploads/2025/10/WhatsApp-Image-2025-10-24-at-21.08.00.jpeg);background-size:cover;}.elementor-2090 .elementor-element.elementor-element-023eeb0 .elementor-repeater-item-fc9ccfa .swiper-slide-contents{margin-left:auto;}.elementor-2090 .elementor-element.elementor-element-023eeb0 .elementor-repeater-item-fc9ccfa .swiper-slide-inner{align-items:center;text-align:center;}.elementor-2090 .elementor-element.elementor-element-023eeb0 .swiper-slide{transition-duration:calc(5000ms*1.2);height:415px;}.elementor-2090 .elementor-element.elementor-element-023eeb0 > .elementor-widget-container{margin:-7px -7px -7px -7px;padding:0px 0px 0px 0px;}.elementor-2090 .elementor-element.elementor-element-023eeb0 .swiper-slide-contents{max-width:66%;}.elementor-2090 .elementor-element.elementor-element-023eeb0 .swiper-slide-inner{padding:147px 147px 147px 147px;text-align:center;}.elementor-2090 .elementor-element.elementor-element-023eeb0 .elementor-slide-heading{color:var( --e-global-color-primary );}.elementor-2090 .elementor-element.elementor-element-023eeb0 .elementor-slide-description{color:var( --e-global-color-accent );font-size:20px;font-weight:700;}.elementor-2090 .elementor-element.elementor-element-023eeb0 .elementor-slide-button{border-width:2px;border-radius:86px;color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-2090 .elementor-element.elementor-element-1025f46{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2090 .elementor-element.elementor-element-89cdf03{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}@media(max-width:1024px){.elementor-2090 .elementor-element.elementor-element-023eeb0 .swiper-slide{height:350px;}.elementor-2090 .elementor-element.elementor-element-023eeb0 .swiper-slide-contents{max-width:39%;}.elementor-2090 .elementor-element.elementor-element-023eeb0 .swiper-slide-inner{padding:49px 49px 49px 49px;}}@media(min-width:768px){.elementor-2090 .elementor-element.elementor-element-79e33ad{--content-width:1600px;}}@media(max-width:767px){.elementor-2090 .elementor-element.elementor-element-79e33ad{--content-width:500px;}}/* Start custom CSS for html, class: .elementor-element-31930f4 */@import url(https://fonts.bunny.net/css?family=jura:300,500);

:root {
	--carousel-duration: 30s;
	--carousel-depth: 180px;
	--card-width: 80px;
	--card-height: 120px;
	--reflect-distance: 5px;

	@media (width > 600px) {
		--carousel-depth: 330px;
		--card-width: 120px;
		--card-height: 180px;
	}
	/* Original background color */
	--bg-dark: rgb(24, 24, 27); 
	--txt-dark: rgb(245, 245, 245);
}

body {
	perspective: 1000px;
	overflow: hidden;
	background-color: var(--bg-dark);
	color: var(--txt-dark);
	min-height: 100vh;
	margin: 0;
	padding: 1rem 2rem;
	font-size: 1rem;
	font-family: "Jura", sans-serif;
	line-height: 1.5;
	display: grid;
	place-content: center;
	gap: 1rem;
}

.carousel {
	--card-count: 9;
	transform-style: preserve-3d;
	position: absolute;
	inset: 0;
	margin: auto;
}

.carousel:has(.card:hover) .card {
	animation-play-state: paused;
}
.carousel:has(.card:hover) .card:not(:hover) > * {
	opacity: .25;
}

.card {
	--i: 0;

	&:nth-child(1) { --i: 1;}
	&:nth-child(2) { --i: 2;}
	&:nth-child(3) {--i: 3;}
	&:nth-child(4) { --i: 4;}
	&:nth-child(5) {  --i: 5;}
	&:nth-child(6) { --i: 6;}
	&:nth-child(7) { --i: 7;}
	&:nth-child(8) { --i: 8;}
	&:nth-child(9) { --i: 9;}
	
	--angle: calc((360deg / var(--card-count)) * var(--i));
	--delay: calc((-1 * var(--carousel-duration) / var(--card-count)) * var(--i));
	
	--hover-duration: 300ms;
	--hover-easing: linear(0, 0.708 15.2%, 0.927 23.6%, 1.067 33%, 1.12 41%, 1.13 50.2%, 1.019 83.2%, 1);

	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--card-width);
	height: var(--card-height);
	transform-style: preserve-3d;
	transform: translate(-50%, -50%) rotateY(var(--angle)) translateZ(var(--carousel-depth));
	opacity: 1;
	scale: 1;
	display: grid;
	place-content: end;
	perspective: 500px;

	animation-name: orbit-x;
	animation-duration: var(--carousel-duration);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-delay: var(--delay);
	
	transition: var(--hover-duration) var(--hover-easing) var(--hover-duration);
	
	-webkit-box-reflect: below var(--reflect-distance) linear-gradient(to top, rgba(0 0 0 / .15) 25%, transparent);
}

.card:hover > img {
	scale: 1.2;
}
	
.card > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale var(--hover-duration) var(--hover-easing);
}

.card[data-title="Hulk"] {
	place-content: center;
}
.card[data-title="Hulk"] > img {
	scale: 1.8;
	object-fit: contain;
}
.card[data-title="Hulk"] > img:hover {
	scale: 2.2;
}

.card::after {
	content: attr(data-title);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	color: white;
	font-size: .7rem;
	text-wrap: nowrap;
	opacity: 0;
	translate: 0 50px;
	padding: .25em .75em;
	background: rgba(255 255 255 / .15);
	border: 1px solid rgba(255 255 255 / .5);
	
	animation-name: orbit-x-labels;
	animation-duration: var(--carousel-duration);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-delay: var(--delay);
}

@keyframes orbit-x {
	0% {
		transform: translate(-50%, -50%) rotateY(0deg) translateZ(var(--carousel-depth));
		opacity: 1;
		scale: 1;
	}
	25%, 75% {
		opacity: 0.75;
		scale: 0.85;
	}
	50% {
		opacity: 0.4;
		scale: 0.75;
	}
	100% {
		transform: translate(-50%, -50%) rotateY(360deg) translateZ(var(--carousel-depth));
		opacity: 1;
		scale: 1;
	}
}

@keyframes orbit-x-labels {
	25%,75%{
		opacity: 0;
		translate: 0 20px;
	}
	100%,0% {
		opacity: 1;
		translate: 0 0;
	}
}/* End custom CSS */