/*
Theme Name: Unqice
Theme URI: http://demo.casethemes.net/stotage
Description: Child theme of Stotage built for the Unqice project. Place all customizations here so the parent theme can be updated safely.
Author: Unqice
Author URI: https://casethemes.net/
Template: stotage
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: unqice
Tags: child-theme, elementor, finance, fintech, multipurpose, responsive
*/

/* ==========================================================================
   Add your custom styles below this line.
   ========================================================================== */

/* Mobile menu submenu chevron: theme uses background: var(--primary-color)
   which is white on this site, so the white Caseicon arrow disappears. */
@media screen and (max-width: 1200px) {
	#pxl-header-elementor #pxl-header-mobile .pxl-menu-toggle,
	#pxl-header-mobile .pxl-menu-toggle {
		background-color: rgba(255, 255, 255, 0.14) !important;
		color: #fff !important;
	}

	#pxl-header-elementor #pxl-header-mobile .pxl-menu-toggle.active,
	#pxl-header-mobile .pxl-menu-toggle.active {
		background-color: rgba(255, 255, 255, 0.28) !important;
		color: #fff !important;
	}
}

/* WPML language switcher in the Primary menu: keep it in the mobile drawer only.
   Desktop header already has its own switcher / should not duplicate this item. */
@media screen and (min-width: 1201px) {
	li.wpml-ls-item,
	li.menu-item-type-wpml_ls_menu_item {
		display: none !important;
	}
}

/* Hero: place "Buy Tickets" and "Watch Online" buttons side-by-side */
.elementor-element-51fbd7f {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 15px !important;
	align-items: center !important;
}

.elementor-element-51fbd7f > .elementor-widget-pxl_text_editor {
	width: 100% !important;
	flex: 0 0 100% !important;
}

.elementor-element-51fbd7f > .elementor-widget-pxl_button {
	width: auto !important;
	margin: 0 !important;
}
.elementor-element-a07facb .elementor-widget-container{
   margin-top: 0 !important;
}

/* ==========================================================================
   "Foto" section (#foto): make the two background "UNIQUE ICE SHOW" text
   rows scroll automatically in the direction OPPOSITE to the photos.
   The photo carousel auto-scrolls leftwards, so both text rows are forced to
   drift rightwards (pxl_text_slide_r), a bit slower than the photos.
   Tweak the animation-duration below to fine-tune how slow the text moves
   (higher = slower).
   ========================================================================== */
@-webkit-keyframes unqice_text_center_to_right {
	0%   { -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); }
	100% { -webkit-transform: translate(-30%, 0%); transform: translate(-30%, 0%); }
}
@keyframes unqice_text_center_to_right {
	0%   { -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); }
	100% { -webkit-transform: translate(-30%, 0%); transform: translate(-30%, 0%); }
}

#foto .pxl-text-slip1 .pxl-item--inner {
	-webkit-animation-name: unqice_text_center_to_right !important;
	animation-name: unqice_text_center_to_right !important;
	-webkit-animation-duration: 46s !important;
	animation-duration: 46s !important;
	-webkit-animation-timing-function: linear !important;
	animation-timing-function: linear !important;
}

/* Make the photo carousel glide at a constant speed instead of easing in/out
   on every autoplay step. Swiper moves exactly one slide per step over a fixed
   duration, so a linear timing function chains the steps into one smooth,
   continuous, non-stop motion. */
#foto .pxl-swiper-wrapper {
	-webkit-transition-timing-function: linear !important;
	-o-transition-timing-function: linear !important;
	transition-timing-function: linear !important;
}

/* ==========================================================================
   Description block (".image-hv" text widgets): on top of the parent theme's
   reveal effect (the photo slides in between the words on row hover), the photo
   should grow further when the visitor hovers DIRECTLY on it, so it is clearly
   visible. The links are neutralised via assets/js/desc-block.js.

   Note: the source photos are only 120x58px, so the zoom is intentionally kept
   modest -- a larger scale would look blurry. Re-upload higher-resolution
   images if a bigger, sharp preview is needed.
   ========================================================================== */
.pxl-text-editor.image-hv img {
	position: relative;
	z-index: 1;
	border-radius: 4px;
	-webkit-transform-origin: center center;
	transform-origin: center center;
}

/* Pin the revealed (base) photo size so the zoom result is predictable no
   matter how large the uploaded source image is. Tweak --unqice-photo-w to
   change the base size. */
.pxl-text-editor.image-hv p:hover img {
	cursor: zoom-in;
	width: var(--unqice-photo-w, 120px);
	max-width: var(--unqice-photo-w, 120px) !important;
	height: auto;
}

/* Hovering directly on the photo enlarges it by --unqice-photo-zoom (default
   2.5x). With a 120px base that caps the zoomed photo at ~300px wide. */
.pxl-text-editor.image-hv p:hover img:hover {
	z-index: 999;
	-webkit-transform: scale(var(--unqice-photo-zoom, 2.5));
	transform: scale(var(--unqice-photo-zoom, 2.5));
	-webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

/* Mobile: hide the photo until tap/hover (parent theme forces max-width:inherit
   under 767px). Tap toggles .is-active via assets/js/desc-block.js. Tune size
   with --unqice-photo-mobile-w. */
@media (max-width: 767px) {
	.pxl-text-editor.image-hv p {
		cursor: pointer;
	}

	/* Stack word → image → word when open. */
	.pxl-text-editor.image-hv a {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		row-gap: 0;
		column-gap: 0 !important;
	}

	.pxl-text-editor.image-hv p.is-active a {
		row-gap: 8px;
	}

	.pxl-text-editor.image-hv img {
		width: var(--unqice-photo-mobile-w, 160px) !important;
		max-width: 0 !important;
		height: auto !important;
		margin: 0 !important;
		opacity: 0 !important;
		overflow: hidden;
		pointer-events: none;
		cursor: default;
		z-index: 1 !important;
		-webkit-transform: none !important;
		transform: none !important;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
		-webkit-transition: max-width 0.35s cubic-bezier(0.645, 0.045, 0.355, 1),
			opacity 0.35s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
		transition: max-width 0.35s cubic-bezier(0.645, 0.045, 0.355, 1),
			opacity 0.35s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
	}

	/* Override desktop hover reveal (sticky :hover after tap). Keep specificity
	   equal to desktop p:hover img, but do not include img:hover here — that
	   selector is more specific and would block .is-active. */
	.pxl-text-editor.image-hv p:hover img {
		max-width: 0 !important;
		opacity: 0 !important;
		-webkit-transform: none !important;
		transform: none !important;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
	}

	.pxl-text-editor.image-hv p:hover img:hover {
		-webkit-transform: none !important;
		transform: none !important;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
	}

	/* Tap-only reveal — must follow the p:hover overrides above. */
	.pxl-text-editor.image-hv p.is-active img {
		max-width: var(--unqice-photo-mobile-w, 160px) !important;
		opacity: 1 !important;
		pointer-events: auto;
	}
}

/* ==========================================================================
   Elementor buttons: override Elementor's default green with a black button +
   white text (the theme's --primary-color is #fff, which disappears on white
   backgrounds). Applies to every Elementor button widget and centers it.
   ========================================================================== */
.elementor-widget-button {
	text-align: center;
}

.elementor-widget-button .elementor-button {
	background-color: #000000;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	padding: 20px 54px !important;
	font-size: 18px !important;
	line-height: 1.2;
	-webkit-transition: background-color 0.25s ease;
	transition: background-color 0.25s ease;
}

.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus {
	background-color: #333333;
	color: #ffffff;
}

/* Keep it large but a touch tighter on phones so it doesn't overflow. */
@media (max-width: 767px) {
	.elementor-widget-button .elementor-button {
		padding: 15px 36px;
		font-size: 16px;
	}
}

/* ==========================================================================
   Reusable "light" pxl_button (btn-style-2): white button with a black
   ::before (the arrow box that expands to fill on hover). Text is black and
   turns white on hover; the arrow icon stays white so it's visible on the
   black box. Used for buttons like "Buy Tickets" and "Watch Full Show".

   USAGE: add the CSS class "unqice-btn-light" to the pxl_button or
   pxl_pricing widget in Elementor (Advanced > CSS Classes).
   ========================================================================== */
/* Hug content — ignore Elementor "Full" size / custom widget width. */
.unqice-btn-light {
	width: auto !important;
	max-width: 100%;
}

.unqice-btn-light .elementor-widget-container,
.unqice-btn-light .pxl-button {
	width: auto;
}

.unqice-btn-light .btn.btn-style-2 {
	background-color: #ffffff !important;
	border-color: rgba(0, 0, 0, 0.15) !important;
	width: auto !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: flex-start !important;
	column-gap: 0 !important;
	/* left: square (5+42) + gap before label */
	padding: 0 26px 0 62px !important;
}

.unqice-btn-light .btn.btn-style-2::before {
	background-color: #000000 !important;
}

.unqice-btn-light .btn.btn-style-2 .pxl--btn-text {
	color: #000000 !important;
	margin: 0 !important;
	-webkit-transition: color 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: color 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Pin arrow in the black square (theme ::before is 42×42 at 5,5). */
.unqice-btn-light .btn.btn-style-2 i {
	color: #ffffff !important;
	position: absolute !important;
	left: 5px;
	top: 5px;
	width: 42px;
	height: 42px;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1 !important;
	font-size: 16px;
	z-index: 1;
}

.unqice-btn-light .btn.btn-style-2 i:before {
	color: #ffffff !important;
	line-height: 1 !important;
	display: block;
}

.unqice-btn-light .btn.btn-style-2 svg {
	position: absolute !important;
	left: 5px;
	top: 5px;
	width: 42px;
	height: 42px;
	margin: 0 !important;
	padding: 12px;
	box-sizing: border-box;
	z-index: 1;
}

.unqice-btn-light .btn.btn-style-2 svg path {
	fill: #ffffff !important;
}

.unqice-btn-light .btn.btn-style-2:hover .pxl--btn-text {
	color: #ffffff !important;
}

/* Same light treatment for pxl_pricing CTA (popup "Watch Online" etc.).
   Add "unqice-btn-light" on the pxl_pricing widget in Elementor. */
.unqice-btn-light .pxl-pricing1 .content-inner-right .pxl-item--button {
	background-color: #ffffff !important;
	border-color: rgba(0, 0, 0, 0.15) !important;
	color: #000000 !important;
	-webkit-transition: color 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: color 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.unqice-btn-light .pxl-pricing1 .content-inner-right .pxl-item--button::before {
	background-color: #000000 !important;
}
.unqice-btn-light .pxl-pricing1 .content-inner-right .pxl-item--button svg path {
	fill: #ffffff !important;
}
.unqice-btn-light .pxl-pricing1 .content-inner-right .pxl-item--button:hover {
	color: #ffffff !important;
}

/* ==========================================================================
   Reusable "dark" pxl_button (btn-style-2): inverted unqice-btn-light.
   Black button with a white ::before (arrow box). Text is white and turns
   black on hover; the arrow icon stays black on the white box.

   USAGE: add the CSS class "unqice-btn-dark" to the pxl_button widget in
   Elementor (Advanced > CSS Classes).
   ========================================================================== */
.unqice-btn-dark {
	width: auto !important;
	max-width: 100%;
}

.unqice-btn-dark .elementor-widget-container,
.unqice-btn-dark .pxl-button {
	width: auto;
}

.unqice-btn-dark .btn.btn-style-2 {
	background-color: #000000 !important;
	border-color: rgba(255, 255, 255, 0.15) !important;
	width: auto !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: flex-start !important;
	column-gap: 0 !important;
	padding: 0 26px 0 62px !important;
}

.unqice-btn-dark .btn.btn-style-2::before {
	background-color: #ffffff !important;
}

.unqice-btn-dark .btn.btn-style-2 .pxl--btn-text {
	color: #ffffff !important;
	margin: 0 !important;
	-webkit-transition: color 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: color 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.unqice-btn-dark .btn.btn-style-2 i {
	color: #000000 !important;
	position: absolute !important;
	left: 5px;
	top: 5px;
	width: 42px;
	height: 42px;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1 !important;
	font-size: 16px;
	z-index: 1;
}

.unqice-btn-dark .btn.btn-style-2 i:before {
	color: #000000 !important;
	line-height: 1 !important;
	display: block;
}

.unqice-btn-dark .btn.btn-style-2 svg {
	position: absolute !important;
	left: 5px;
	top: 5px;
	width: 42px;
	height: 42px;
	margin: 0 !important;
	padding: 12px;
	box-sizing: border-box;
	z-index: 1;
}

.unqice-btn-dark .btn.btn-style-2 svg path {
	fill: #000000 !important;
}

.unqice-btn-dark .btn.btn-style-2:hover .pxl--btn-text {
	color: #000000 !important;
}

/* ==========================================================================
   Contact Form 7 submit (wrap-ctf1/2): white ::before expands on hover.
   The theme sets black text for .submit-form a.btn:hover but not button.
   ========================================================================== */
.pxl-contact-form .wrap-ctf1 button.wpcf7-submit,
.pxl-contact-form .wrap-ctf2 button.wpcf7-submit {
	-webkit-transition: color 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: color 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Arrow sits on the white ::before box — keep it black (inline fill="white" hides it). */
.pxl-contact-form .wrap-ctf1 button.wpcf7-submit .icon svg path,
.pxl-contact-form .wrap-ctf2 button.wpcf7-submit .icon svg path,
.pxl-contact-form .wrap-ctf1 button.wpcf7-submit svg path,
.pxl-contact-form .wrap-ctf2 button.wpcf7-submit svg path {
	fill: #000000 !important;
	-webkit-transition: fill 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: fill 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.pxl-contact-form .wrap-ctf1 button.wpcf7-submit:hover,
.pxl-contact-form .wrap-ctf1 button.wpcf7-submit:focus,
.pxl-contact-form .wrap-ctf2 button.wpcf7-submit:hover,
.pxl-contact-form .wrap-ctf2 button.wpcf7-submit:focus {
	color: #000000 !important;
}

/* ==========================================================================
   Reusable "compact" team carousel styling.

   The parent theme spaces the slides 60px apart (padding: 0 30px) and uses
   chunky card padding + large text, which looks loose on narrow cards. These
   rules tighten the gap, trim the card padding, scale the text down and make
   all cards equal height for a cleaner look ("apdailinti graziau").

   USAGE: add the CSS class "unqice-team-compact" to the pxl_team_carousel
   widget in Elementor (Advanced > CSS Classes). Works on any number of blocks.
   ========================================================================== */
.unqice-team-compact .pxl-team-carousel1 .pxl-swiper-slide {
	padding: 0 8px;
	height: auto;
}

.unqice-team-compact .pxl-team-carousel1 .pxl-swiper-wrapper {
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}

.unqice-team-compact .pxl-team-carousel1 .pxl-swiper-container {
	margin: 0 -8px;
}

/* Make every card fill the (stretched) slide height so all cards are equal
   height regardless of whether the name wraps to one or two lines. */
.unqice-team-compact .pxl-team-carousel1 .pxl-item--inner {
	padding: 10px 10px 14px 10px;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.unqice-team-compact .pxl-team-carousel1 .pxl-item--holder {
	margin-top: 14px;
	padding: 0 4px;
}

.unqice-team-compact .pxl-team-carousel1 .pxl-item--position {
	font-size: 12px;
	margin-bottom: 5px;
}

.unqice-team-compact .pxl-team-carousel1 .pxl-item--title,
.unqice-team-compact .pxl-team-carousel1 .pxl-item--title a {
	font-size: 16px;
	line-height: 1.3;
}

.unqice-team-compact .pxl-team-carousel1 .pxl-social a {
	font-size: 13px;
}

/* Compact side arrows in tight gutters beside the slides (not over cards). */
.unqice-team-compact .pxl-team-carousel1,
.unqice-team-compact .pxl-team-carousel1 .pxl-carousel-inner {
	position: relative;
}

.unqice-team-compact .pxl-team-carousel1 .pxl-carousel-inner {
	/* Just enough for the 22px arrows + 4px gap. */
	padding-left: 26px;
	padding-right: 26px;
}

.unqice-team-compact .pxl-team-carousel1 .pxl-swiper-arrow-wrap.style-1 {
	left: 0;
	right: 0;
	z-index: 3;
	pointer-events: none;
}

.unqice-team-compact .pxl-team-carousel1 .pxl-swiper-arrow-wrap.style-1 .pxl-swiper-arrow {
	pointer-events: auto;
	width: 22px !important;
	height: 22px !important;
	border-radius: 6px;
	border-color: rgba(255, 255, 255, 0.22);
	background-color: rgba(0, 0, 0, 0.4);
	opacity: 1;
}

.unqice-team-compact .pxl-team-carousel1 .pxl-swiper-arrow-wrap.style-1 .pxl-swiper-arrow svg {
	width: 6px;
	height: 10px;
	display: block;
}

.unqice-team-compact .pxl-team-carousel1 .pxl-swiper-arrow-wrap.style-1 .pxl-swiper-arrow:hover {
	background-color: rgba(0, 0, 0, 0.65);
}

/* ==========================================================================
   Reusable scattered photo collage (pxl_image widgets).

   Problem: when the chosen display size doesn't match a registered WordPress
   image size, Elementor serves a small thumbnail (e.g. 160x100) that gets
   upscaled -> blurry. Fix: in each image widget pick a LARGER image size
   (e.g. "Full" or a 600x600 size) so there are enough pixels, then let these
   classes cap the on-screen size and crop with object-fit so it stays sharp.

   USAGE (Elementor > Advanced > CSS Classes):
     - add "unqice-collage" to the CONTAINER that wraps the photos
       (sizes every photo to 180x140 by default).
     - add "unqice-collage-center" to the centre image widget
       (overrides it to 160x160).
   Tweak sizes via the --collage-w / --collage-h variables if needed.

   Interactive shuffle: any "unqice-collage" container automatically gets a
   click-to-shuffle interaction (assets/js/collage-shuffle.js) — clicking any
   photo reshuffles which image sits in which slot, with a fade/pop swap. No
   extra class needed; the hover/focus styles below just hint clickability.
   ========================================================================== */
.unqice-collage .pxl-image-single .pxl-item--image img {
	width: var(--collage-w, 170px);
	height: var(--collage-h, 140px);
	max-width: none;
	-o-object-fit: cover;
	object-fit: cover;
	display: block;
	cursor: pointer;
	transition: transform 0.25s ease, opacity 0.22s ease, box-shadow 0.25s ease;
}

.unqice-collage-center .pxl-image-single .pxl-item--image img {
	width: var(--collage-center-w, 180px);
	height: var(--collage-center-h, 180px);
	max-width: none;
	-o-object-fit: cover;
	object-fit: cover;
	display: block;
	cursor: pointer;
	transition: transform 0.25s ease, opacity 0.22s ease, box-shadow 0.25s ease;
}

.unqice-collage .pxl-image-single .pxl-item--image img:hover {
	transform: scale(1.05);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.unqice-collage .pxl-image-single .pxl-item--image img:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.8);
	outline-offset: 3px;
}

/* ==========================================================================
   Cap pxl_image at 300px while using a larger/Full WP image size for quality.

   Elementor's "300" size serves a soft 300px file; "Full" is sharp but blows
   up to container width. Use Full (or another large size), then this class
   caps only the <img> — Elementor absolute/flex positioning is left alone.

   USAGE: add "unqice-img-300" to the CONTAINER wrapping the images, or to
   each pxl_image widget (Advanced > CSS Classes).
   Override size: --unqice-img-size (default 300px).
   ========================================================================== */
.unqice-img-300 .pxl-image-single .pxl-item--image img,
.elementor-widget-pxl_image.unqice-img-300 .pxl-image-single .pxl-item--image img {
	width: var(--unqice-img-size, 300px);
	height: var(--unqice-img-size, 300px);
	max-width: none;
	-o-object-fit: cover;
	object-fit: cover;
	/* inline-block so Elementor text-align (left/center/right) still applies
	   when the widget is wider than the capped image */
	display: inline-block;
	vertical-align: top;
}

/* Stars collage (.unqice-img-300): desktop keeps absolute/offset layout;
   on mobile stack all images vertically with no overlap. */
@media (max-width: 767px) {
	.unqice-img-300 {
		--position: relative !important;
		position: relative !important;
		inset: auto !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}

	.unqice-img-300.pxl-column-sticky,
	.unqice-img-300.pxl-sticky-custom {
		position: relative !important;
		top: auto !important;
	}

	.unqice-img-300 > .e-con-inner {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 16px !important;
		width: 100% !important;
	}

	.unqice-img-300 > .e-con-inner > .elementor-element,
	.unqice-img-300 .elementor-absolute {
		position: relative !important;
		inset: auto !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		transform: none !important;
	}

	.unqice-img-300 .elementor-widget-container {
		margin: 0 !important;
		width: 100% !important;
	}

	.unqice-img-300 .pxl-image-single,
	.unqice-img-300 .pxl-item--inner,
	.unqice-img-300 .pxl-item--image {
		transform: none !important;
		text-align: center !important;
	}

	.unqice-img-300 .pxl-image-single .pxl-item--image img {
		width: min(100%, var(--unqice-img-size, 280px)) !important;
		height: auto !important;
		max-height: none !important;
		aspect-ratio: 1;
		-o-object-fit: cover;
		object-fit: cover;
	}
}

/* ==========================================================================
   Reusable "photo columns" (pxl-icon-box2): make the columns much shorter and
   show each person's name horizontally in the collapsed column instead of {N}.
   The name swap is done in assets/js/team-columns.js.

   USAGE: add the CSS class "unqice-team-columns" to the pxl_icon_box widget
   in Elementor (Advanced > CSS Classes).
   ========================================================================== */
.unqice-team-columns .pxl-icon-box2 {
	height: var(--team-columns-h, 480px);
}

@media (max-width: 1200px) {
	.unqice-team-columns .pxl-icon-box2 {
		height: 408px;
	}
}

@media (max-width: 1024px) {
	.unqice-team-columns .pxl-icon-box2 {
		height: 360px;
	}
}

@media (max-width: 575px) {
	.unqice-team-columns .pxl-icon-box2 {
		height: auto;
	}

	.unqice-team-columns .pxl-icon-box2 .pxl-item {
		min-height: 264px;
	}
}

/* Horizontal name in the collapsed column; wraps to a few lines if needed. */
.unqice-team-columns .pxl-icon-box2 .pxl-item .count {
	display: block;
	font-size: 12px;
	line-height: 1.3;
	max-width: calc(100% - 16px);
	text-align: center;
	transform: translate(-50%, -50%);
	white-space: normal;
	word-break: break-word;
}

/* ==========================================================================
   Reusable news post carousel (pxl-post-carousel1): the title/meta sit in a
   near-transparent frosted-glass box, so white text becomes unreadable over
   light photos. Give the box a dark translucent background (keeping the blur)
   so text is always legible, and make the cards taller.

   USAGE: add the CSS class "unqice-news-carousel" to the pxl_post_carousel
   widget in Elementor (Advanced > CSS Classes). Tune image height via
   --unqice-news-card-ratio (shared with the news grid).
   ========================================================================== */
.unqice-news-carousel .pxl-post-carousel1 .pxl-swiper-slide .pxl-post--inner .pxl-holder {
	background-color: rgba(0, 0, 0, 0.5);
	border-color: rgba(255, 255, 255, 0.25);
}

.pxl-post-carousel1 .pxl-swiper-slide .pxl-post--inner > .pxl-post--featured {
	aspect-ratio: var(--unqice-news-card-ratio, 4 / 5);
	overflow: hidden;
}

.pxl-post-carousel1 .pxl-swiper-slide .pxl-post--inner > .pxl-post--featured a {
	display: block;
	height: 100%;
}

.pxl-post-carousel1 .pxl-swiper-slide .pxl-post--inner > .pxl-post--featured img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* ==========================================================================
   Reusable news post grid (pxl-blog-grid-layout1): same frosted-glass issue as
   the carousel — the text box is nearly transparent, so white text disappears
   over light photos. Darken the overlay (keeping the blur) for legibility.

   USAGE: add the CSS class "unqice-news-grid" to the pxl_post_grid widget in
   Elementor (Advanced > CSS Classes). Tune via --unqice-news-overlay (0-1) and
   --unqice-news-card-ratio (e.g. 4 / 5 for a taller image; shared with carousel).
   ========================================================================== */
.unqice-news-grid .pxl-blog-grid-layout1 .pxl-grid-item .pxl-post--inner .pxl-post--inner {
	background-color: rgba(0, 0, 0, var(--unqice-news-overlay, 0.5));
	border-color: rgba(255, 255, 255, 0.25);
}

.pxl-blog-grid-layout1 .pxl-grid-item > .pxl-post--inner > .pxl-post--featured {
	aspect-ratio: var(--unqice-news-card-ratio, 4 / 5);
	overflow: hidden;
}

.pxl-blog-grid-layout1 .pxl-grid-item > .pxl-post--inner > .pxl-post--featured a {
	display: block;
	height: 100%;
}

.pxl-blog-grid-layout1 .pxl-grid-item > .pxl-post--inner > .pxl-post--featured img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* ==========================================================================
   Container "Background Video" (theme Layout > Background Video option).
   The theme renders it as a position:fixed, full-viewport layer (height:100vh,
   width:100vw, z-index:-1), so the video sits behind the WHOLE document while
   scrolling. Confine it to its own container so it only shows within that
   section/hero instead of across the entire page.
   ========================================================================== */
.pxl-container-video-background-on .pxl-video-brg-fixed {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 0 !important;
}

/* Keep the section's actual content above the (now container-bound) video. */
.pxl-container-video-background-on > *:not(.pxl-video-brg-fixed) {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   Fancybox image grid (pxl-box-grid1): darken the background photos. This is a
   pure overlay over the .image-item layer (z-index 0-2), sitting BELOW the
   year/description items (z-index 3) so text stays fully legible. Because it's
   an overlay, the source images are untouched - no quality loss.

   USAGE: add the CSS class "unqice-darken-grid" to the pxl_fancybox_grid widget
   (or its container) in Elementor. Tune the photo darkness via
   --unqice-grid-darken and the text scrim via --unqice-grid-scrim (0-1).
   ========================================================================== */
.unqice-darken-grid .pxl-box-grid1 .bgr-list::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, var(--unqice-grid-darken, 0.45));
	z-index: 2;
	pointer-events: none;
}

/* The theme's holder scrim fades to var(--primary-color) (white on this site),
   which puts a white box behind the text. Flip it to a dark fade so the white
   title/description stays legible. Tune strength via --unqice-grid-scrim. */
.unqice-darken-grid .pxl-box-grid1 .pxl-grid-item .pxl-item--holder {
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) -2.73%,
		rgba(0, 0, 0, var(--unqice-grid-scrim, 0.85)) 100%
	);
}

/*
 * Mobile timeline stack: one shared background over the full grid height makes
 * each year look like a soft/muddy crop. Show each photo on its own row instead,
 * keep year/desc visible (theme defaults to opacity:0 until hover), and use a
 * lighter per-row darken so detail reads on phone screens.
 */
@media (max-width: 767px) {
	.pxl-box-grid1 .bgr-list {
		display: none;
	}

	.pxl-box-grid1 .pxl-grid-item {
		background-size: cover !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
		min-height: 22rem;
	}

	.pxl-box-grid1 .pxl-grid-item .pxl-item--holder,
	.pxl-box-grid1 .pxl-grid-item:hover .pxl-item--holder {
		opacity: 1 !important;
		filter: none !important;
	}

	.unqice-darken-grid .pxl-box-grid1 .pxl-grid-item::before {
		content: "";
		position: absolute;
		inset: 0;
		background-color: rgba(0, 0, 0, var(--unqice-grid-darken-mobile, 0.28));
		z-index: 1;
		pointer-events: none;
	}

	.unqice-darken-grid .pxl-box-grid1 .pxl-grid-item .pxl-item--holder {
		position: relative;
		z-index: 2;
		background: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0) 20%,
			rgba(0, 0, 0, var(--unqice-grid-scrim, 0.75)) 100%
		);
	}
}

/* ==========================================================================
   BR Team Grid / Carousel: flag + category on one row; uniform flag size.
   ========================================================================== */
.pxl-team-grid1 .unqice-team-meta,
.pxl-team-carousel1 .unqice-team-meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.pxl-team-grid1 .unqice-team-meta .unqice-team-flag,
.pxl-team-carousel1 .unqice-team-meta .unqice-team-flag {
	align-items: center;
	border-radius: 2px;
	display: flex;
	flex-shrink: 0;
	height: auto;
	justify-content: center;
	line-height: 0;
	overflow: hidden;
	pointer-events: none;
	width: 20px;
}

.pxl-team-grid1 .unqice-team-flag__img,
.pxl-team-carousel1 .unqice-team-flag__img {
	display: block;
	height: 100%;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	object-position: center;
	width: 100%;
}

.pxl-team-grid1 .unqice-team-meta .unqice-team-categories,
.pxl-team-carousel1 .unqice-team-meta .unqice-team-categories {
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

/* Compact carousel: slightly tighter meta under the position line. */
.unqice-team-compact .pxl-team-carousel1 .unqice-team-meta {
	gap: 6px;
	margin-bottom: 6px;
}

.unqice-team-compact .pxl-team-carousel1 .unqice-team-meta .unqice-team-flag {
	width: 16px;
}

.unqice-team-compact .pxl-team-carousel1 .unqice-team-meta .unqice-team-categories {
	font-size: 12px;
	line-height: 16px;
}

/* Team page: category filter trigger active state (data-team-filter buttons). */
[data-team-filter].is-team-filter-active {
	opacity: 0.75;
}

/* Show-all control: hidden until a category filter is active. */
.unqice-team-show-all-wrap,
[data-team-filter="*"] {
	display: none;
}

body.team-filter-active .unqice-team-show-all-wrap {
	display: block;
	margin-bottom: 24px;
	text-align: center;
}

body.team-filter-active [data-team-filter="*"] {
	display: inline-block;
}

.unqice-team-show-all {
	appearance: none;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font: inherit;
	letter-spacing: 0.04em;
	padding: 10px 22px;
	text-transform: uppercase;
	transition: opacity 0.2s ease;
}

.unqice-team-show-all:hover {
	opacity: 0.75;
}

.pxl-swiper-dots.style-1{
	margin-top: 0.5rem !important;	
}
.pxl-blog-grid-layout1 .pxl-grid-item .pxl-post--inner .pxl-post--inner, .pxl-post-carousel1 .pxl-swiper-slide .pxl-post--inner .pxl-holder{
	padding: 1rem;
}

/* Image carousel: layout 1 reuses the "next" icon for both arrows. */
.pxl-image-carousel1 .pxl-swiper-arrow-prev .flaticon-next {
	display: inline-block;
	transform: rotate(180deg);
}

.pxl-image-carousel1 .pxl-item--image img,
.pxl-image-carousel2 .pxl-item--image img {
	cursor: zoom-in;
}

/* ==========================================================================
   Uniform image carousel slides (pxl-image-carousel1).

   Portrait images would otherwise stretch the whole carousel height. Lock
   every slide to the same landscape frame and crop with object-fit:cover.
   Override ratio if needed: --unqice-image-carousel-ratio (default 3 / 2).
   ========================================================================== */
.pxl-image-carousel1 .pxl-item--image {
	aspect-ratio: var(--unqice-image-carousel-ratio, 3 / 2);
	overflow: hidden;
	width: 100%;
}

.pxl-image-carousel1 .pxl-item--image img {
	display: block;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
	width: 100%;
}

/* Opt out of the uniform crop + PhotoSwipe zoom: add "unqice-carousel-natural"
   on the Elementor widget (Advanced → CSS Classes). Images keep their native
   aspect ratio again (portrait slides can make the row taller). */
.unqice-carousel-natural .pxl-image-carousel1 .pxl-item--image,
.pxl-image-carousel1.unqice-carousel-natural .pxl-item--image {
	aspect-ratio: auto;
	overflow: visible;
}
.unqice-carousel-natural .pxl-image-carousel1 .pxl-item--image img,
.pxl-image-carousel1.unqice-carousel-natural .pxl-item--image img {
	height: auto;
	-o-object-fit: unset;
	object-fit: unset;
	-o-object-position: unset;
	object-position: unset;
	width: 100%;
	cursor: default;
}

@media (max-width: 767px) {
	.unqice-carousel-natural .pxl-image-carousel1 .pxl-item--image img,
	.pxl-image-carousel1.unqice-carousel-natural .pxl-item--image img {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	/* Theme default slide padding is 0 15px (30px between images). */
	.unqice-carousel-natural .pxl-swiper-slide,
	.unqice-carousel-natural .swiper-slide,
	.pxl-image-carousel1.unqice-carousel-natural .pxl-swiper-slide,
	.pxl-image-carousel1.unqice-carousel-natural .swiper-slide {
		padding-left: 4px;
		padding-right: 4px;
	}
}

/* ==========================================================================
   Image carousel lightbox (PhotoSwipe). Lock the page/slider while open.
   ========================================================================== */

html.unqice-zoom-open,
html.unqice-zoom-open body {
	overflow: hidden;
}

html.unqice-zoom-open .pxl-image-carousel1,
html.unqice-zoom-open .pxl-image-carousel2,
html.unqice-zoom-open .pxl-swiper-slider:has(.pxl-image-carousel1),
html.unqice-zoom-open .pxl-swiper-slider:has(.pxl-image-carousel2) {
	pointer-events: none !important;
}

/* Sit above Elementor sticky / overlays. */
.pswp {
	z-index: 100000;
}

/* ==========================================================================
   Feature heading swap (icon hover/tap → fade heading text;
   restores default when the pointer leaves the block)
   ========================================================================== */

.js-heading-swap__stack {
	position: relative !important;
	display: block !important;
	width: 100%;
}

/* Beat Elementor flex + WOW animate hiding inactive panels. */
.js-heading-swap__stack > .js-heading-swap__heading {
	width: 100%;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

.js-heading-swap__stack > .js-heading-swap__heading:not(.is-active) {
	position: absolute !important;
	left: 0;
	right: 0;
	top: 0;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	z-index: 0;
}

.js-heading-swap__stack > .js-heading-swap__heading.is-active {
	position: relative !important;
	opacity: 1 !important;
	visibility: visible !important;
	z-index: 1;
}

.js-heading-swap__trigger {
	cursor: pointer;
}

.js-heading-swap__trigger .pxl-icon-list,
.js-heading-swap__trigger .pxl-icon-list a,
.js-heading-swap__trigger .pxl-icon-list span {
	cursor: pointer;
}

/* ==========================================================================
   Endless marquee for pxl_text_slip.

   USAGE: add CSS class "unqice-marquee" to the widget in Elementor.
   One text item is enough; JS duplicates the track for a seamless loop.
   ========================================================================== */

/*
   Important: do NOT set overflow:hidden on .elementor-widget-container.
   This sticky slip uses a tiny Elementor height (e.g. 5px) + large margins so
   the text can overlap neighbouring sections. Clipping the widget container
   hides the marquee entirely.
*/
.unqice-marquee .pxl-item--container {
	/* overflow: hidden; */
	width: 100%;
	max-width: 100%;
}

.unqice-marquee .pxl-item--inner.unqice-marquee__track,
.unqice-marquee .unqice-marquee__track {
	display: flex !important;
	align-items: center;
	flex-wrap: nowrap !important;
	width: max-content !important;
	max-width: none !important;
	will-change: transform;
	-webkit-animation: unqice-marquee-left 30s linear infinite !important;
	animation: unqice-marquee-left 30s linear infinite !important;
}

.unqice-marquee .unqice-marquee__track.is-marquee-right {
	-webkit-animation-name: unqice-marquee-right !important;
	animation-name: unqice-marquee-right !important;
}

.unqice-marquee .unqice-marquee__group {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	flex-shrink: 0;
	column-gap: inherit;
}

.unqice-marquee .unqice-marquee__group .pxl-item--text {
	flex-shrink: 0;
	white-space: nowrap;
}

@-webkit-keyframes unqice-marquee-left {
	from {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	to {
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

@keyframes unqice-marquee-left {
	from {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	to {
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

@-webkit-keyframes unqice-marquee-right {
	from {
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	to {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

@keyframes unqice-marquee-right {
	from {
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	to {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.unqice-marquee .unqice-marquee__track {
		-webkit-animation-play-state: paused !important;
		animation-play-state: paused !important;
	}
}

.pxl-grid .pxl-pagination-links .page-numbers.current, .pxl-grid .pxl-pagination-links .page-numbers:hover{
	color: #000 !important;
}
.pxl-grid .pxl-pagination-links .page-numbers:hover svg path{
	fill: #000 !important;
}

/* ==========================================================================
   Footer Image Carousel (fade): prevent slides stacking into a huge gap when
   Elementor Swiper CSS isn’t loaded on the page (common on inner pages).
   ========================================================================== */
#pxl-footer-elementor .elementor-image-carousel-wrapper.swiper-fade {
	position: relative;
	overflow: hidden;
}

#pxl-footer-elementor .elementor-image-carousel-wrapper.swiper-fade .swiper-slide {
	position: absolute !important;
	left: 0;
	top: 0;
	width: 100% !important;
	pointer-events: none;
}

#pxl-footer-elementor .elementor-image-carousel-wrapper.swiper-fade .swiper-slide-active {
	position: relative !important;
	opacity: 1 !important;
	pointer-events: auto;
}
.pxl-team-grid1 .pxl-item--inner .pxl-social{
	gap: 0;
}
.elementor-element-f17ec83 .icon-check svg path{
	fill:#fff !important;
}

.pxl-swiper-arrow-wrap.style-1 .pxl-swiper-arrow:hover svg path{
	fill: transparent !important;
}

/* Header ticket / camera icon buttons (pxl_anchor widgets 79a531e + 25b1334).
   Elementor paints color on `.pxl-anchor-button` itself (Bootstrap Icons
   inherit that into ::before), and the parent theme fills the button with
   var(--primary-color) on hover. Keep the background transparent and match
   the header nav hover: white -> #b4b4b4.

   Tooltips sit at right: 100% even while opacity: 0, so the right icon's
   invisible label overlaps the left icon and steals :hover. pointer-events:
   none keeps hits on the icon only. */
.elementor-element-79a531e .pxl-anchor-button,
.elementor-element-25b1334 .pxl-anchor-button {
	background-color: transparent !important;
	color: #fff !important;
	transition: color 0.25s cubic-bezier(0.645, 0.045, 0.355, 1),
		background-color 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.elementor-element-79a531e .pxl-anchor-button:hover,
.elementor-element-25b1334 .pxl-anchor-button:hover {
	background-color: transparent !important;
	color: #b4b4b4 !important;
}
.elementor-element-79a531e .pxl-anchor-button .text-tooltip,
.elementor-element-25b1334 .pxl-anchor-button .text-tooltip {
	pointer-events: none;
	color: #fff;
	/* Parent theme parks tooltips to the left (right: 100%), so the camera
	   icon's label lands on top of the ticket icon. Sit them below instead. */
	top: calc(100% + 8px);
	bottom: auto;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	white-space: nowrap;
	text-align: center;
}
.elementor-element-79a531e .pxl-anchor-button:hover .text-tooltip,
.elementor-element-25b1334 .pxl-anchor-button:hover .text-tooltip {
	right: auto;
}
.post-content p, .post-content li{
	font-family: "Roboto", sans-serif !important;
}

.pxl-swiper-arrow-wrap.style-2 .pxl-swiper-arrow.pxl-swiper-arrow-prev, .pxl-swiper-arrow-wrap.style-2 .pxl-swiper-arrow{
	border: 1px solid #fff;
}
.pxl-swiper-arrow-wrap.style-2 .pxl-swiper-arrow.pxl-swiper-arrow-prev:hover path, .pxl-swiper-arrow-wrap.style-2 .pxl-swiper-arrow:hover path{
	fill: #000 !important;
}

/* ==========================================================================
   Page popup close button ("Watch Full Show" popup and similar).

   The parent theme renders a literal "x" character whose color can end up
   matching the circle's background (invisible close button). Hide the text
   glyph and draw a crisp icon instead with ::before/::after lines, whose
   background-color can't be hijacked by an inline color style on the div.
   ========================================================================== */
.pxl-page-popup .pxl-close-popup {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(17, 17, 18, 0.65);
	border: 1px solid rgba(255, 255, 255, 0.25);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pxl-page-popup .pxl-close-popup::before,
.pxl-page-popup .pxl-close-popup::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	background-color: #fff;
	border-radius: 2px;
}

.pxl-page-popup .pxl-close-popup::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.pxl-page-popup .pxl-close-popup::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.pxl-page-popup .pxl-close-popup:hover {
	/* Fixed dark color on purpose: --primary-color resolves to white on
	   this popup's context, which would hide both the circle and the icon. */
	background-color: #111112 !important;
	border-color: #111112 !important;
}
.pxl-breadcrumb path{
	fill: #fff !important;
}

/* ==========================================================================
   Pricing widget "Watch Online" button (pxl-pricing1, e.g. inside the
   "Watch Full Show" popup).

   On hover, ::before expands to cover the whole button using
   var(--primary-color) as its fill. On this popup that variable resolves to
   white, so the white text/icon disappear onto a white button (white on
   white). Pin the fill to a fixed dark color instead so it always contrasts
   with the white label + icon.
   ========================================================================== */
.pxl-pricing1 .content-inner-right .pxl-item--button::before {
	background-color: #111112 !important;
}
.pxl-pricing .extra-text{
	padding-left: 0 !important;
	pointer-events: none !important;
}
.pxl-pricing .extra-text:before, .pxl-pricing .extra-text:after{
	display: none !important;
}
@media (max-width: 768px) {
	.elementor-element-ea64fd4 .pxl-carousel-inner{
		overflow: visible !important;
	}
	.mobile-hidden{
		display: none !important;
	}
	.page-id-1606 .pxl-swiper-arrow-wrap{
		margin-top: 3rem;
	}
}

/*
 * Tilted image-scroll collage (pxl_image_scroll layout-1).
 * On mobile the default columns are too small inside 100vh, so centering leaves
 * a large empty band above the photos. Scale the collage up and keep the framed
 * section full-viewport so it reads closer to desktop.
 */
@media (max-width: 767px) {
	.e-con:has(> .elementor-widget-pxl_image_scroll.elementor-absolute) {
		--min-height: 100svh !important;
		min-height: 100svh !important;
		height: 100svh;
		overflow: hidden;
	}

	.e-con:has(> .elementor-widget-pxl_image_scroll.elementor-absolute)
		> .elementor-widget-pxl_image_scroll {
		inset: 0 !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
	}

	.pxl-image-list {
		min-height: 100% !important;
		height: 100% !important;
		min-width: 100% !important;
		width: 100% !important;
		overflow: hidden;
	}

	.pxl-image-list .pxl-image-list-content {
		width: 220%;
		column-gap: 8px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(-15deg) !important;
	}

	.pxl-image-list .list-image .wrap-image {
		gap: 8px;
	}

	.pxl-image-list .list-image img {
		border-radius: 8px;
	}
}
@media (min-width: 768px) {
	.mobile-only{
		display: none !important;
	}
}