/* =====================================================
   UFFIZIO HOME STYLESHEET (Optimized & Organized)
   Author: Uffizio
   
   1. HERO SECTION

====================================================== */
#hero_bg {
	width: 100%;
	height: 100vh;
	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;
	}
}

/* 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(../../../uffizio/assets/images/cta_arrow.svg) !important;
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	position: absolute;
	width: 164px;
	height: 100px !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;

	}
}