/* =====================================================
   UFFIZIO HOME STYLESHEET (Optimized & Organized)
   Author: Uffizio
   
   1. HERO SECTION & BANNER
====================================================== */
#hero_bg,
.banner {
	width: 100%;
	/* min-height with lvh ensures the background doesn't shift when browser UI/inspector resizes the viewport */
	min-height: 100%;

	display: flex;
	/* Enforce flex layout here if Elementor doesn't apply it fast enough */
	align-items: center;
	/* Vertically center content */

	background:
		/* Grid pattern - very subtle white lines */
		linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
		linear-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px),

		/* Soft wave glows / highlights */
		radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.35) 0%, transparent 40%),
		radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.25) 0%, transparent 45%),
		radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.20) 0%, transparent 50%),

		/* Base sky-blue gradient (slightly brighter at top) */
		linear-gradient(to bottom, #c0e2ff 0%, #a0d4ff 40%, #80c8ff 100%);

	background-size:
		50px 50px,
		/* horizontal grid lines */
		50px 50px,
		/* vertical grid lines */
		800px 800px,
		/* wave 1 */
		900px 900px,
		/* wave 2 */
		700px 700px,
		/* wave 3 */
		cover;
	/* base gradient */

	background-position:
		0 0,
		0 0,
		center center,
		center center,
		center center,
		center;

	background-blend-mode:
		overlay,
		overlay,
		soft-light,
		soft-light,
		soft-light,
		normal;

	background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

@keyframes waveMove {
	from {
		background-position: 0 0, 0 0, 0 0;
	}

	to {
		background-position: 200px 200px, 400px 300px, 600px 450px;
	}
}

/* --- CLS & Layout Stabilization for .banner Children --- */

/* 
   By default, Elementor containers might collapse or stack before JS/CSS loads.
   The following forces a 50/50 split for the two main containers inside the banner 
   on desktop, which significantly reduces Layout Shift (CLS).
*/
@media (min-width: 1025px) {

	.banner>.e-con,
	.banner>.elementor-container>.elementor-column,
	#hero_bg>.e-con,
	#hero_bg>.elementor-container>.elementor-column {
		width: 50% !important;
		flex-basis: 50% !important;
		max-width: 50%;
	}
}

/* Image Stabilization */
.uffizio-image-container img.uffizio-image {
	width: 100%;
	height: auto;
	display: block;
	/* If you know the image is 16:9 or 4:3, adding aspect-ratio here is the #1 CLS fix */
	/* aspect-ratio: 16/9; */
}


/* --- Content Styling Inside Banner --- */

/* First Text Editor - Assuming it's the Main Title */
.banner .elementor-widget-text-editor:first-of-type h1,
.banner .elementor-widget-text-editor:first-of-type h2,
.banner .elementor-widget-text-editor:first-of-type {
	font-family: 'Antonio', sans-serif;
	/* Matching your title font */
	font-size: clamp(40px, 5vw, 65px);
	/* Responsive sizing */
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.1;
	color: #0e0e0e;
	margin-bottom: 20px;
}

/* Second Text Editor - Description */
.banner .elementor-widget-text-editor:nth-of-type(2) p,
.banner .elementor-widget-text-editor:nth-of-type(2) {
	font-size: 18px;
	line-height: 1.6;
	color: #333;
	margin-bottom: 30px;
	max-width: 90%;
	/* Readability */
}

/* Uffizio Button Tweaks within Banner */
.banner .uffizio-btn {
	margin-top: 10px;
	/* Ensure button doesn't jump */
	display: inline-block;
}


/* --- Existing Styles Preserved Below --- */

/* HOME page Counter section css start */
.uffizio-counter .elementor-counter-number-wrapper {
	position: relative;
}

.uffizio-counter .elementor-counter-number-wrapper::after {

	content: "";
	display: block;
	clear: both;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -15px;
	width: 90%;
	height: 1px;
	margin-top: 10px;
	background: linear-gradient(to right, #6fb8ff, #00488e);
}

/* HOME page Counter section css end */
.title-h1 {
	font-size: 60px;
	font-family: "Antonio", serif;
	font-weight: 700;
	text-transform: uppercase;
	color: #0e0e0e;
	padding-bottom: 20px;
}

.title-h1 span {
	color: var(--uffizio-color-accent);
}

.arrow_btn .uffizio-btn:before {
	content: '';
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='197' height='107' viewBox='0 0 197 107' fill='none'%3E%3Cpath d='M48.5004 1C29.0001 1 0.5 23 0.5 47.5C0.5 93 72.5001 81.5 79.5001 59.5C82.9572 48.6349 65.5879 46.1724 60.5001 55.5C54.5001 66.5 65.0002 96.5 150 85' stroke='url(%23g1)' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='6 6'/%3E%3Cpath d='M158.147 84.2541C158.303 84.0306 158.246 83.7137 158.023 83.5573L152.865 79.9483C152.639 79.7904 152.327 79.8458 152.17 80.0721C152.012 80.2984 152.067 80.6104 152.294 80.7683L157.042 84.0915L153.731 88.8484C153.573 89.0752 153.629 89.3867 153.855 89.5451C154.082 89.7031 154.393 89.6476 154.551 89.4214L158.147 84.2541Z' fill='url(%23g2)'/%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='99.7' y1='-23' x2='99.1' y2='85' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%235DA4E8'/%3E%3Cstop offset='1' stop-color='%231E90FF'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' x1='158.2' y1='83.8' x2='152.8' y2='84.8' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%231E90FF'/%3E%3Cstop offset='1' stop-color='%236FB8FF'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	position: absolute;
	width: 164px;
	height: 126px !important;
	left: 31% !important;
	top: -60px !important;

}

.logo_slider img {
	border-radius: 10px !important;
	--border-angle: 0deg;
	animation: 4s linear infinite border-angle-rotate;
	border: 1px solid transparent !important;
	position: relative;
	color: #fff;
	outline: 1px solid #dddddd99 !important;
}

.logo_slider img:hover {
	outline: 0px !important;
	background: linear-gradient(#6FB8FF, #00488E) padding-box,
		conic-gradient(from var(--border-angle), hsl(210 100% 28%) 50%, #6fb8ff) border-box;
}

/* 1. Define the variable type so CSS can animate it */
@property --border-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

.swiper-wrapper {
	transition-timing-function: linear !important;
}


@keyframes border-angle-rotate {
	from {
		--border-angle: 0deg;
	}

	to {
		--border-angle: 360deg;
	}
}

#logo_slider1 .swiper-slide {
	transform: translateZ(0);
	backface-visibility: hidden;
}

.trakzee_gsm_logo svg {
	width: 77%;
}

@media (max-width: 767px) {
	.arrow_btn .uffizio-btn:before {
		display: none;
	}

	/* Reset widths for mobile */
	.banner>.e-con,
	.banner>.elementor-container>.elementor-column,
	#hero_bg>.e-con,
	#hero_bg>.elementor-container>.elementor-column {
		width: 100% !important;
		flex-basis: 100% !important;
		max-width: 100%;
	}
}