/*
Theme Name: Cheers Marketing
Template: hello-elementor
Author: Webreach
Author URI: https://www.webreach.co.il/
Version: 1.0
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/
.menu-hover-colors .elementor-nav-menu a:hover,
.menu-hover-colors .elementor-nav-menu a.elementor-item-active,
.menu-hover-colors .elementor-nav-menu .current-menu-item > a,
.menu-hover-colors .elementor-nav-menu .current_page_item > a {
	background: linear-gradient(
		90deg,
		#f73e76 0%,
		#f33990 14%,
		#e83da9 29%,
		#d748c2 43%,
		#bf55db 57%,
		#9f63ea 71%,
		#746ff8 86%,
		#2979ff 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: all 0.4s ease;
}
.menu-hover-colors .sub-menu .elementor-sub-item {
	display: inline-block;
	position: relative;
	&:hover::before {
		content: '';
		display: block;
		width: 100%;
		height: 36px;
		background-color: var(--e-global-color-f9c5dcb);
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		z-index: -1;
		border-radius: 30px;
	}
}
.hp-tabs-pagination {
	display: flex;
	justify-content: center;
	gap: 12px;
	padding-top: 40px;
}
.hp-tabs-bullet {
	border-radius: 100%;
	background-color: #E0E0E0;
	width: 12px;
	height: 12px;
	border: none;
	padding: 0;
	transition: .3s background-color;
	&:hover, &.is-active {
		background-color: var(--e-global-color-3608986);
	}
}
.gradient-titles {
	background: linear-gradient(90deg, 
		#F73E76 0%, 
		#F33990 14%, 
		#E83DA9 29%, 
		#D748C2 43%, 
		#BF55D8 57%, 
		#9F63EA 71%, 
		#746FF8 86%, 
		#2979FF 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ======= גרדיאנט טאבים עמוד הבית ======= */
.colors-tabs .e-n-tabs__control,
.colors-tabs .e-n-tabs [role="tablist"] {
	position: relative;
	gap: 8px;
	padding: 2px;
	border-radius: 100px;
	margin: 0 auto;
}

.colors-tabs .e-n-tabs__control::before,
.colors-tabs .e-n-tabs [role="tablist"]::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg,
		#F73E76 0%,
		#F33990 14%,
		#E83DA9 29%,
		#D748C2 43%,
		#BF55D8 57%,
		#9F63EA 71%,
		#746FF8 86%,
		#2979FF 100%);
	}

.colors-tabs .e-n-tabs__tab,
.colors-tabs .e-n-tabs [role="tab"] {
	flex: 0 0 auto;
	text-align: center;
}
/* ======= סוף גרדיאנט טאבים עמוד הבית ======= */


/* ======= אייקון עליון קטן בכפתורים ======= */
.btn-with-icon svg {
	height: 0.5em;
	align-self: flex-start;
	transition: transform 0.2s ease;
}

.btn-with-icon:hover svg {
	transform: translate(2px, -2px);
}
/* ======= סוף אייקון עליון קטן בכפתורים ======= */

.elementor-shortcode:has(.scrolling-gallery-wrapper) {
	background-image: url('/wp-content/uploads/2025/10/hp-gallery.webp'), url('/wp-content/uploads/2025/10/hp-gallery.webp');
	background-position: left center, right center;
}

.scrolling-gallery-wrapper {
	--gallery-item-size: 200px;
	--gallery-row-height: 200px; /* Match item size exactly */
	--gallery-gap: 40px;
	--gallery-padding: 58px; /* Adjusted to achieve 570px total height (includes border) */
	--gallery-item-padding: 15px;
	--gallery-nav-width: 20px;
	--gallery-nav-height: 400px;
	--gallery-nav-thumb-width: 10px;
	--gallery-nav-padding: 5px;
	--gallery-border-radius: 50px;
	--gallery-border-width: 7px;
	--gallery-wrapper-offset: 18px;
	
	max-width: 940px;
	margin: 0 auto;
	position: relative;
}

.scrolling-gallery-wrapper::after {
	content: "";
	position: absolute;
	top: calc(-1 * var(--gallery-wrapper-offset));
	left: calc(-1 * var(--gallery-wrapper-offset));
	right: calc(-1 * var(--gallery-wrapper-offset));
	bottom: calc(-1 * var(--gallery-wrapper-offset));
	border: var(--gallery-border-width) solid #1F3E93;
	border-radius: var(--gallery-border-radius) var(--gallery-border-radius) 0 0;
	pointer-events: none;
}

.scrolling-gallery-container {
	/* With box-sizing: border-box, height includes padding and border */
	/* Visible content area (inside padding) = 2 rows + gap = 440px */
	/* Total height = content + padding + border = 440 + 116 + 14 = 570px */
	/* But to prevent third row peek, we reduce by a small amount */
	height: calc(var(--gallery-row-height) * 2 + var(--gallery-gap) + var(--gallery-padding) * 2 + var(--gallery-border-width) * 2 - 1px);
	position: relative;
	overflow: hidden;
	border-radius: var(--gallery-border-radius);
	background-color: #9EC7FF;
	backdrop-filter: blur(10px);
	border: var(--gallery-border-width) solid #1F3E93;
	padding-block: var(--gallery-padding);
}

.scrolling-gallery-nav {
	position: absolute;
	right: 20px;
	top: 15%;
	width: var(--gallery-nav-width);
	height: var(--gallery-nav-height);
	background-color: #7AB1FF;
	border-radius: 10px;
	z-index: 10;
}

.scrolling-gallery-nav-thumb {
	position: absolute;
	top: var(--gallery-nav-padding);
	left: 50%;
	transform: translateX(-50%);
	width: var(--gallery-nav-thumb-width);
	/* Thumb height = half of track height minus padding */
	height: calc((var(--gallery-nav-height) / 2) - var(--gallery-nav-padding) * 2);
	background-color: white;
	border-radius: 5px;
	transition: top 0.3s ease;
	animation: navThumbMove 8s infinite ease-in-out;
}

@keyframes navThumbMove {
	0% {
		top: var(--gallery-nav-padding);
	}
	25% {
		top: var(--gallery-nav-padding);
	}
	50% {
		/* Move down half the track height */
		top: calc((var(--gallery-nav-height) / 2) + var(--gallery-nav-padding));
	}
	75% {
		top: calc((var(--gallery-nav-height) / 2) + var(--gallery-nav-padding));
	}
	100% {
		top: var(--gallery-nav-padding);
	}
}

.scrolling-gallery-grid {
	display: flex;
	flex-direction: column;
	/* 3 rows + 2 gaps */
	height: calc(var(--gallery-row-height) * 3 + var(--gallery-gap) * 2);
	gap: var(--gallery-gap);
	animation: scrollImages 8s infinite ease-in-out;
}

.scrolling-gallery-row {
	display: flex;
	height: var(--gallery-row-height);
	gap: var(--gallery-gap);
	justify-content: center;
	align-items: center;
}

.scrolling-gallery-item {
	width: var(--gallery-item-size);
	height: var(--gallery-item-size);
	flex-shrink: 0;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0px 1.4px 4.2px rgba(49, 92, 234, 0.12), 0px 1.4px 1.4px rgba(49, 92, 234, 0.14), 0px 2.8px 1.4px -1.4px rgba(49, 92, 234, 0.2);
	transition: transform 0.3s ease;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
	padding: var(--gallery-item-padding);
	box-sizing: border-box;
}
.scrolling-gallery-item:hover {
	transform: scale(1.05);
}

.scrolling-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@keyframes scrollImages {
	0% {
		transform: translateY(0);
	}
	25% {
		transform: translateY(0);
	}
	50% {
		/* Move down exactly one row + gap */
		transform: translateY(calc(-1 * var(--gallery-row-height) - var(--gallery-gap)));
	}
	75% {
		transform: translateY(calc(-1 * var(--gallery-row-height) - var(--gallery-gap)));
	}
	100% {
		transform: translateY(0);
	}
}

/* Responsive styles for scrolling gallery */
@media (max-width: 1366px) {
	.scrolling-gallery-wrapper {
		--gallery-item-size: 160px;
		--gallery-row-height: 160px;
		--gallery-gap: 30px;
		--gallery-padding: 50px;
		--gallery-nav-width: 15px;
		--gallery-nav-thumb-width: 8px;
		padding-inline: 20px;
	}
	
	.scrolling-gallery-nav {
		right: 15px;
	}
}

@media (max-width: 1024px) {
	.scrolling-gallery-wrapper {
		--gallery-item-size: 160px;
		--gallery-row-height: 160px; /* Match item size exactly */
		--gallery-gap: 30px;
		--gallery-padding: 60px;
		--gallery-item-padding: 12px;
		--gallery-nav-width: 18px;
		--gallery-nav-height: 350px;
		--gallery-nav-thumb-width: 9px;
		--gallery-border-radius: 40px;
		--gallery-border-width: 6px;
		--gallery-wrapper-offset: 15px;
		
		max-width: 90%;
	}
	
	.scrolling-gallery-nav {
		right: 15px;
	}
}

@media (max-width: 767px) {
	.scrolling-gallery-wrapper {
		--gallery-item-size: 120px;
		--gallery-row-height: 120px; /* Match item size exactly */
		--gallery-gap: 20px;
		--gallery-padding: 40px;
		--gallery-item-padding: 10px;
		--gallery-nav-width: 15px;
		--gallery-nav-height: 280px;
		--gallery-nav-thumb-width: 8px;
		--gallery-nav-padding: 4px;
		--gallery-border-radius: 30px;
		--gallery-border-width: 5px;
		--gallery-wrapper-offset: 12px;
		
		max-width: 95%;
	}
	
	.scrolling-gallery-nav {
		right: 10px;
		top: 12%;
	}
	
	.scrolling-gallery-item {
		border-radius: 12px;
	}
}

@media (max-width: 640px) {
	.scrolling-gallery-wrapper {
		--gallery-item-size: 70px;
		--gallery-row-height: 70px; /* Match item size exactly */
		--gallery-gap: 12px;
		--gallery-padding: 25px;
		--gallery-item-padding: 6px;
		--gallery-nav-width: 10px;
		--gallery-nav-height: 180px;
		--gallery-nav-thumb-width: 5px;
		--gallery-nav-padding: 3px;
		--gallery-border-radius: 20px;
		--gallery-border-width: 3px;
		--gallery-wrapper-offset: 8px;
	}
	
	.scrolling-gallery-nav {
		right: 8px;
		top: 10%;
	}
	
	.scrolling-gallery-item {
		border-radius: 8px;
	}
}

@media(max-width: 767px) {
	.hp-tabs .e-n-tabs-heading {
		display: none;
	}
	.e-con>.elementor-element.mobile-absolute.elementor-absolute {
		position: relative;
	}
}