/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* --- per-scene background wash ------------------------------------------- */
.e-con.product-ov.ov-finish::before {
	background: radial-gradient(circle at 14% 20%, rgba(61,205,255,.18), transparent 27%), radial-gradient(circle at 82% 22%, rgba(215,173,75,.31), transparent 30%), linear-gradient(128deg, #132643, #3b2c14 55%, #8a641d 120%) !important;
}
.e-con.product-ov.ov-protect::before {
	background: radial-gradient(circle at 82% 24%, rgba(57,200,238,.18), transparent 29%), linear-gradient(128deg, #03111d, #09243a 55%, #0f4a70 120%) !important;
}
.e-con.product-ov.ov-control::before {
	background: radial-gradient(circle at 15% 20%, rgba(49,87,246,.24), transparent 28%), radial-gradient(circle at 82% 24%, rgba(33,197,232,.20), transparent 28%), linear-gradient(128deg, #0a1731, #11285f 56%, #185c75 118%) !important;
}
.e-con.product-ov.ov-clarity::before {
	background: radial-gradient(circle at 18% 18%, rgba(118,223,239,.18), transparent 28%), radial-gradient(circle at 80% 26%, rgba(139,121,244,.29), transparent 29%), linear-gradient(128deg, #0c1635, #2d2762 58%, #205c72 120%) !important;
}
.e-con.product-ov.ov-repel::before {
	background: radial-gradient(circle at 16% 18%, rgba(23,185,213,.27), transparent 29%), radial-gradient(circle at 82% 24%, rgba(167,133,84,.16), transparent 27%), linear-gradient(128deg, #031722, #06354a 58%, #0d5b67 120%) !important;
}
.e-con.product-ov.ov-bio::before {
	background: radial-gradient(circle at 16% 20%, rgba(56,190,231,.15), transparent 29%), radial-gradient(circle at 80% 22%, rgba(232,92,155,.24), transparent 28%), linear-gradient(128deg, #0a2749, #273050 54%, #6e234e 118%) !important;
}
.e-con.product-ov.ov-sydro::before {
	background: radial-gradient(circle at 16% 18%, rgba(47,151,183,.24), transparent 29%), radial-gradient(circle at 84% 24%, rgba(19,41,170,.30), transparent 29%), linear-gradient(128deg, #07182a, #102b4b 56%, #173f70 118%) !important;
}
.e-con.ov-contact {
	position: relative;
}
.e-con.ov-contact::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 320px;
	width: auto;
	transform: translateY(-50%);
	background: linear-gradient(120deg, #EDF1F3, #C1CDD7);
	border-radius: 0;
	z-index: 0;
}
.e-con.ov-contact > * {
	position: relative;
	z-index: 1;
}
.e-con.cus-tab-1-cont {
	background: linear-gradient(135deg, rgba(7, 24, 43, 0.8), rgba(18, 53, 83, 0.75)), url(/wp-content/uploads/2025/12/Rectangle-1.png) center center / cover;
}
.e-con.cus-tab-right {
	background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.elementor-widget-n-tabs.cus-tab-1 .e-n-tab-title {
	justify-content: space-between;
}
.e-con.benefits {
	background: linear-gradient(135deg, rgb(237, 241, 243), rgb(193, 205, 215));
}
.e-con.exp-more {
	background: linear-gradient(135deg, rgb(10, 33, 58), rgb(13, 42, 71) 56%, rgb(18, 53, 83));
}
.e-con.gi-tab-section {
	background: radial-gradient(circle at 12% 10%, rgba(55, 192, 235, 0.18), transparent 24rem), radial-gradient(circle at 90% 20%, rgba(77, 135, 199, 0.22), transparent 22rem), linear-gradient(150deg, rgb(6, 21, 45) 0%, rgb(7, 26, 56) 48%, rgb(2, 6, 23) 100%);
}
.e-con.gi-tab-section .nested-tab > .e-n-tabs > .e-n-tabs-heading {
	position: relative;
    padding: 2px 3px;
	border-radius: 100px;
	background: #ffffff;
}
.e-con.gi-tab-section .nested-tab .e-n-tab-title {
	justify-content: center;
}


.scene-visual-coating img {
	aspect-ratio: 1 / 1;
}

/* --------------------------------------------------------------------------------------------
   Coating Equipment Overview [13110] - application cards: horizontal gallery <-> "View All Applications"
   Markup (Elementor): .nti-list-slider > .nti-list-slider-controls (html widget: .nls-arrows, Button
   widget .nti-list-slider-toggle) + grid container .nti-list-slider-track (the cards).
   Default = gallery, done in CSS so the 13 cards never flash in as a grid; the "all" view is
   .is-expanded on .nti-list-slider = Elementor's own grid. Never in the editor, so every card stays
   editable. JS: content.js wpLContent.appCardsToggle.gallery (paging, dots, auto-advance, toggle).
   -------------------------------------------------------------------------------------------- */
.e-con.nti-list-slider-track {
	--nls-visible: 3;   /* cards per page - keep in step with the grid's columns (3 / 2 / 1) */
	--nls-gap: 24px;
	--nls-offset: 0;    /* first card in view, set by the JS */
}
body:not(.elementor-editor-active) .e-con.nti-list-slider:not(.is-expanded) {
	overflow: hidden;
	overflow-x: clip;   /* clips the off-page cards without cutting card shadows or focus rings vertically */
	overflow-y: visible;
}
body:not(.elementor-editor-active) .e-con.nti-list-slider:not(.is-expanded) > .e-con.nti-list-slider-track {
	display: flex !important;
	flex-wrap: nowrap;
	gap: var(--nls-gap);
	transform: translateX(calc(var(--nls-offset) * -1 * (100% + var(--nls-gap)) / var(--nls-visible)));
	transition: transform .9s ease;
}
body:not(.elementor-editor-active) .e-con.nti-list-slider:not(.is-expanded) > .e-con.nti-list-slider-track > .e-con {
	flex: 0 0 calc((100% - var(--nls-gap) * (var(--nls-visible) - 1)) / var(--nls-visible));
	min-width: 0;
}
/* arrows (html widget) */
.e-con.nti-list-slider .nls-arrows {
	display: flex;
	align-items: center;
	gap: 12px;
}
.e-con.nti-list-slider .nls-arrows .nls-arrow,
.e-con.nti-list-slider .nls-arrows .nls-arrow:hover,
.e-con.nti-list-slider .nls-arrows .nls-arrow:focus {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(190deg, #37C0EB 0%, #0F366F 100%);
	color: #FFFFFF;
	box-shadow: none;
	cursor: pointer;
	opacity: 1;
	transition: .2s ease;
}
.e-con.nti-list-slider .nls-arrows .nls-arrow:disabled {
	opacity: .35;
	cursor: default;
}
.e-con.nti-list-slider .nls-arrows .nls-arrow:focus-visible {
	outline: 2px solid #0F366F;
	outline-offset: 3px;
}
.e-con.nti-list-slider .nls-arrow svg {
	display: block;
	transition: transform .2s ease;
}
.e-con.nti-list-slider .nls-arrow svg.flip { transform: scaleX(-1); }
.e-con.nti-list-slider .nls-arrow:not(:disabled):hover svg { transform: translateX(2px); }
.e-con.nti-list-slider .nls-arrow:not(:disabled):hover svg.flip { transform: scaleX(-1) translateX(2px); }
/* toggle button: after a mouse click the link keeps focus, and Elementor/the kit style :focus like :hover */
.e-con.nti-list-slider .nti-list-slider-toggle a.elementor-button:focus:not(:focus-visible):not(:hover) {
	background-color: transparent;
	background-image: linear-gradient(190deg, var(--e-global-color-accent) 0%, var(--e-global-color-primary) 100%);
	color: var(--e-global-color-7543a8e);
}
/* page dots (added by the JS after the track; hidden in the "all" view) */
.e-con.nti-list-slider .nls-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
}
.e-con.nti-list-slider.is-expanded .nls-dots { display: none; }
.e-con.nti-list-slider .nls-dots .nls-dot,
.e-con.nti-list-slider .nls-dots .nls-dot:hover,
.e-con.nti-list-slider .nls-dots .nls-dot:focus {
	width: 12px;
	height: 12px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: rgba(15, 54, 111, .3);
	box-shadow: none;
	cursor: pointer;
	transition: width .25s ease, background .25s ease;
}
.e-con.nti-list-slider .nls-dots .nls-dot.is-active {
	width: 42px;
	background: #0F366F;
}
.e-con.nti-list-slider .nls-dots .nls-dot:focus-visible {
	outline: 2px solid #0F366F;
	outline-offset: 2px;
}


.hc-top .hc-aside {
	width: 100%;
	max-width: 100%;
    margin-right: 0;
}
.hc-bars .hc-bar {
	display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--hc-line);
}
.hc-bars .hc-bar .hc-bar-label {
	width: 100%;
	max-width: 30%;
}
.hc-bars .hc-bar .hc-bar-track {
	width: 100%;
	max-width: 70%;
    margin: auto;
}


@media (max-width: 1024px) {
	.e-con.nti-list-slider-track { --nls-visible: 2; }
}
@media (max-width: 767px) {
	.e-con.nti-list-slider-track { --nls-visible: 1; }
	/* the contact band loses its fixed height once the row stacks */
	.e-con.ov-contact::before {
		height: 100%;
	}
	.e-con.gi-tab-section .mobile-dropdown .e-tabs-mobile-dropdown {
		padding: 0;
		margin: 0 0 24px 0;
	}
	.scene-visual-coating .scene-number {
		bottom: 0;
	}
	.scene-visual-coating img {
		aspect-ratio: 4 / 3;
	}
}
@media (prefers-reduced-motion: reduce) {
	body:not(.elementor-editor-active) .e-con.nti-list-slider:not(.is-expanded) > .e-con.nti-list-slider-track { transition: none; }
}