/*==============
GENERALI
==============*/
body {
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
	background-color: white;
	/* Il colore di sfondo del tuo contenuto centrale */
	padding: 0;
	box-shadow: 0px 0px 24px rgba(0,0,0,.2);
	/* Rimuovi padding di default del body */
}

/* Per assicurare che le bande laterali siano bianche */
html {
	background-color: white;
	/* Il colore di sfondo dell'intera pagina / delle bande laterali */
}

body {
	background-color: #fff;
	font-family: "azo-sans-web", sans-serif;
	font-weight: 400;
	font-size: 18px;
}

.row {
	margin-right: 0px !important;
	margin-left: 0px !important;
}

.text-cerulean {
	color: #19b1e9;
}

.text-black {
	color: #000 !important;
}
.text-bolder {
	font-weight: 900!important;
}
strong {
	font-weight: 900!important;
}
.underlined {
	text-decoration: underline;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline !important;
}

.icone_ict {
	max-width: 40% !important;
	height: auto;
}

.background-white {
	background-color: #fff;
	;
}

.text-decoration-none {
	text-decoration: none !important;
}

a.text-decoration-none:hover {
	text-decoration: none !important;
}

/*==============
MENU
==============*/
.navbar {
	border-bottom:1px solid #dedede;
	max-width: 1920px;
}
.bg-transparent,
.navbar-dark {
	background-color: transparent !important;
}

.navbar-dark .navbar-toggler {
	border: 0px solid transparent !important;
}

.off-canvas-blur {
	/*	background: rgba(0,0,0,.3);*/
	background: rgba(0, 0, 0, .8);
	-webkit-backdrop-filter: blur(10px) grayscale(10%);
	-moz-backdrop-filter: blur(10px) grayscale(10%);
	-o-backdrop-filter: blur(10px) grayscale(10%);
	backdrop-filter: blur(10px) grayscale(10%);
	color: #fff;
	width: 100% !important;
}

.off-canvas-blur .btn-close {
	/*-webkit-filter: invert(100%);
	filter: invert(100%);*/
}

.off-canvas-blur a {
	color: #fff;
	text-decoration: none !important;
	filter: grayscale(3%);
}

.off-canvas-blur a:hover {
	filter: grayscale(0%);
}

.off-canvas-blur a img,
.off-canvas-blur a img {
	display: block;
	position: relative;
}

.menu_span {
	color: #fff;
	background-color: #19b1e9;
	padding: 5px 15px;
	border-radius: 100px;
	margin-top: -55px;
	box-shadow: 0px 0px 4px rgba(0, 0, 0, .5);
	display: block;
	position: relative;
	z-index: 1000000;
	max-width: 300px;
	margin-top: -40px;
	border-bottom: 0px solid transparent;
	font-size: 14px;
	position: absolute;
	min-width: 80%;
	bottom: 10%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.img-menu-home {
	border-radius: 20px;
}

#logo_menu {
	max-width: 200px;
}

#ul_menu_laterale li {
	list-style-type: none;
	float: left;
	width: 100%;
	padding: 15px 10px;
	border-bottom: 1px solid #000;
	background-color: rgba(255, 255, 255, 0);
	transition: 1s;
}

#ul_menu_laterale li:hover {
	list-style-type: none;
	float: left;
	width: 100%;
	padding: 15px 10px;
	border-bottom: 1px solid #000;
	background-color: rgba(255, 255, 255, .2);
	transition: 1s;
	border-radius: 0px 0px 15px 0px;
	box-shadow: 0px 6px 6px rgba(0, 0, 0, .1);
}

#ul_menu_laterale li a {
	text-decoration: none;
	font-size: 20px;
	color: #000;
}

#ul_menu_laterale li a:hover {
	text-decoration: none;
	font-size: 20px;
	font-weight: bold;
}

.invert {
	filter: invert(1);
}

.white_bg {
	background-color: rgba(255, 255, 255, 1) !important;
	border-radius: 5;
	padding: 15px;
	-webkit-backdrop-filter: blur(12px) grayscale(0%);
	-moz-backdrop-filter: blur(12px) grayscale(0%);
	-o-backdrop-filter: blur(12px) grayscale(0%);
	backdrop-filter: blur(12px) grayscale(0%);
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/*==============
HOME
==============*/
#down {
	z-index: 80000000;
	position: relative;
}

#carosello_home {
	position: relative;
	background-color: transparent !important;
	overflow: hidden;
	width: 100%;
	height: 100vh;
}

#carosello_home video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}


#carosello_home::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.0);
	z-index: 0;
}


#carosello_home .container {
	position: relative;
	z-index: 1;
}



#carosello_home .carousel-inner .carousel-item {
	position: relative;
}

#carouselHome .carousel-item .row.h-100 {
	/* Target the specific row */
	display: flex;
	/* Enable flexbox on the row */
	align-items: center;
	/* Vertically center the content */
	height: 100%;
	/* Ensure row takes full carousel item height */
}

#carouselHome .carousel-item h2 {
	font-weight: 900;
	color: #ffff;
	font-size: 80px;
	text-align: center;
	margin-bottom: 10vh;
}

#carouselHome .carousel-item h6 {
	font-weight: 900;
	color: #ffff;
	font-size: 24px;
	text-align: center;
}

@media screen and (max-width:768px) {
	#carouselHome .carousel-item h2 {
		font-weight: 900;
		color: #ffff;
		font-size: 50px;
		text-align: center;
		margin-bottom: 10vh;
	}

	#carouselHome .carousel-item h6 {
		font-weight: 900;
		color: #ffff;
		font-size: 20px;
		text-align: center;
	}
}

.sfocati {
	background-image: url('../img/sfondo_data_analysis.png');
	background-position: center;
	background-size: cover;
	background-attachment: scroll;
}

.a-fuoco {
	background-image: url('../img/sfondo_direct_consumer.png');
	background-position: center;
	background-size: cover;
	background-attachment: scroll;
}

/* Vertically center indicators on the right */
.carousel-indicators-home {
	position: absolute;
	left: 50%;
	bottom: 6%;
	transform: translateY(-50%);
	transform: translateX(-50%);
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	z-index: 100000 !important;
	width: 40px;
	margin-right: 0px;
	margin-left: 0px;
	transform: rotate(-90deg);
}

/* Style indicators as dots */
.carousel-indicators-home button {
	width: 10px;
	height: 10px;
	background-color: #ccc;
	border-radius: 50%;
	border: none;
	opacity: 0.7;
}

.carousel-indicators-home [data-bs-target] {
	width: 11px;
	height: 11px;
	opacity: 1 !important;
}

/* Active indicator styling */
.carousel-indicators-home .active {
	width: 12px;
	height: 12px;
	background-color: #007bff;
	/* Active dot color */
	opacity: 1;
}

#carosello_home.animated .carousel-indicators-home {
	transform: rotate(-90deg) scale(0.9) translateY(-50%) !important;
	position: fixed;
	left: 16%;
	bottom: 3%;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	z-index: 100000 !important;
	width: 40px;
	margin-right: 0px;
	margin-left: 0px;
}


.h-100 {
	min-height: 100vh;
}

.h-50 {
	min-height: 50vh;
}

@media screen and (max-width: 768px) {
	#argomento1.h-100 {
		min-height: 50vh;
	}

	#argomento2.h-100 {
		min-height: 50vh;
	}

	#argomento3.h-100 {
		min-height: 50vh;
	}
}

#argomenti {
	background-image: url('../img/home_background_fumato.jpg');
	background-size: cover;
	background-position: center;
	background-attachment: scroll;
	position: relative;
	border-top: 3px solid #19b1e9;
}



#argomento1 .row,
#argomento2 .row,
#argomento3 .row {
	position: absolute;
	bottom: 8vh;
}

#argomento1 .row .col-12 h2,
#argomento2 .row .col-12 h2,
#argomento3 .row .col-12 h2 {
	color: #fff;
	font-weight: 900;
	text-align: center;
	font-size: 36px;
	;
}

#argomento1 .row .col-12 h6,
#argomento2 .row .col-12 h6,
#argomento3 .row .col-12 h6 {
	color: #fff;
	font-weight: 500;
	text-align: center;
	font-size: 20px;
}

@media screen and (max-width:768px) {

	#argomento1 .row .col-12 h2,
	#argomento2 .row .col-12 h2,
	#argomento3 .row .col-12 h2 {
		color: #fff;
		font-weight: 900;
		text-align: center;
		font-size: 20px;
		;
	}

	#argomento1 .row .col-12 h6,
	#argomento2 .row .col-12 h6,
	#argomento3 .row .col-12 h6 {
		color: #fff;
		font-weight: 500;
		text-align: center;
		font-size: 14px;
	}
}

#argomento1 {
	background-image: url('../img/persona_1.png');
	background-position: bottom center;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
	z-index: 1000;
	border-top: 3px solid #19b1e9;
}

#argomento2 {
	background-image: url('../img/persona_2.png');
	background-position: bottom center;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
	z-index: 1000;
	border-top: 3px solid #19b1e9;
}

#argomento3 {
	background-image: url('../img/persona_3.png');
	background-position: bottom center;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
	z-index: 1000;
}

.gray {
	filter: grayscale(100%) blur(1px);
}

@media screen and (max-width:768px) {
	.gray {
		filter: grayscale(0%);
		filter: blur(0px);
	}
}

.gray_backdrop {
	backdrop-filter: blur(1px) grayscale(100%);
}

.text-shadow {
	text-shadow: 0px 0px 6px rgba(0, 0, 0, .6);
}

/*==============
PAGINE 
==============*/
/*---GENERALI---*/
#content {
	position: relative;
	z-index: 2;
	/* top: -100px; */
	padding: 20px;
	border-radius: 20px 20px 0px 0px;
}

#banner {
	background-color: #fff;
	position: relative;
	width: 100%;
	z-index: 100;
	min-height: 750px;
	/* max-height: 90vh; */
	box-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
	overflow: hidden;
}


#banner video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}


#banner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2);
	z-index: 0;
}


#banner .container {
	position: relative;
	z-index: 1;
}

#banner_container_text {
	position: absolute;
	top:90%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}



#content {
	position: relative;
	z-index: 2;
	background: #fff;
	padding: 50px 0;
	position: relative;
	z-index: 2;

}

#banner_title,  .banner_title {
	color: #fff;
	font-weight: bold;
	/* text-transform: uppercase; */
	position: relative;
	font-size: 60px;
	line-height: 80px!important;
}
.text-bigger {
	font-size: 1.8em;
}
hr.hr-cerulean {
	border-top: 4px solid #0aa1d6;
	max-width: 60%;
	opacity: 100%;
}

#banner_sub_title {
	color: #ffffff;
	font-weight: bold;
}

#banner_text {
	color: #ffffff;
	font-weight: 300;
}

.bg-lightgray {
	background-color: #f2f2f2;
	border-radius: 10px;
}

.bg-lightgray2 {
	background-color: #f2f2f2;
	border-radius: 10px;
}

.bg-cerulean {
	background: rgb(133, 222, 255);
	background: linear-gradient(90deg, rgba(133, 222, 255, 1) 0%, rgba(109, 213, 252, 1) 100%);
	transition: 2s;
	box-shadow: 0px -5px 10px rgba(0, 0, 0, .1);
}

.bg-cerulean.bg_analysis {
	background-image: linear-gradient(90deg, rgba(133, 222, 255, 1) 0%, rgba(109, 213, 252, 1) 100%), url('../img/bg_analysis.png');
	background-blend-mode: overlay;
	/* Optional: blends the image and gradient */
	position: relative;
	transition: 2s;
	box-shadow: 0px -5px 10px rgba(0, 0, 0, .1);
	overflow-y: hidden;
}

.bg_analysis:after {
	content: url('../img/overlay_analysis.png');
	position: absolute;
	bottom: -5%;
	left: 50%;
	transform: translateX(-50%);
	display: block;
}

.bg-cerulean.divover {
	border-radius: 10px 10px 0px 0px;
	transition: 2s;
}

.leaf-box {
	border-radius: 10px;
	overflow: hidden;
	background-color: #fff;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, .1);
}

.leaf-box-2 {
	border: 1px solid #000;
	border-radius: 50px 0px 50px 0px;
	overflow: hidden;
	background-color: #fff;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, .1);
}

.leaf-box-title {
	color: #000;
	font-size: 24px;
	font-weight: 900;
}

.bg-gray {
	background-color: #e9e7e7;
}

.btn_scopri {
	max-width: 40%;
	margin-top: 15px;
}

.ict_list {
	padding-left: 5rem;
	columns: 2;
	-webkit-columns: 2;
	-moz-columns: 2;
}

.ict_list li {
	list-style-image: url(../img/dot.png);
	padding-inline-start: 1ch;
	padding-bottom: 15px;

}

.ict_list h6 {
	font-weight: 900;
}

#chatbot {
	margin-top: -10vh;
}

.no-shadow {
	box-shadow: 0px 0px 0px transparent !important;
}

.padding-x {
	padding: 0px 8rem;
	transition: 1s;
}

.button_scopri {
	background: rgb(0, 168, 231);
	color: #fff;
	border-radius: 100px;
	padding: 5px 10px;
	display: block;
	text-decoration: none;
}

@media screen and (max-width: 768px) {
	#chatbot {
		margin-top: 0vh;
	}
}

ul.bullet {
	list-style: none;
	padding-left: 20px;
	-webkit-padding-start: 0px;
	-moz-padding-start: 0px;
	-o-padding-start: 0px;
	padding-start: 0px;
}

ul.bullet li {
	background-image: url("../img/bullet.png");
	background-repeat: no-repeat;
	background-position: 6px 5px;
	padding-left: 25px;
	margin-bottom: 15px;
	padding-top: 0px;
}

#carouselChiSiamo .carousel-indicators {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
}

#carouselChiSiamo .carousel-indicators button {
	width: 12px;
	height: 12px;
	margin: 0 5px;
	border-radius: 50%;
	background-color: white;
	opacity: 0.9;
	border: none;
	cursor: pointer;
	transition: background-color 0.3s ease, opacity 0.3s ease;
}

#carouselChiSiamo .carousel-indicators .active {
	background-color: #19b1e9;
	opacity: 1;
}

#carouselChiSiamo .carousel-indicators button:focus {
	outline: none;
	box-shadow: none;
}

#chitty_img {
	margin-top: -100px !important;
}

.ico_piattaforme {
	max-width: 60%;
}

.tab-content {
	background-color: #fff;
	border-radius: .5rem;
}

.nav-item img {
	max-width: 50px;
}

.nav-link,
.nav-link:hover {
	color: #000;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
	background-color: rgba(255, 255, 255, 1);
	box-shadow: 0px -3px 6px rgba(0, 0, 0, .2);
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link {
	background-color: rgba(255, 255, 255, 0);
	transition: .5s;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link:hover {
	background-color: rgba(255, 255, 255, .8);
	transition: 1s;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active:hover {
	background-color: rgba(255, 255, 255, 1);
}

/* ANIMAZIONE FRAMEWORK */
.hidden {
	opacity: 0;
	/* Initially hidden */
}

.image-transition {
	transition: opacity 1s ease, transform 1s ease;
	/* Smooth transitions */
}

/* Position images absolutely within the container */
#laptop_animation_container {
	overflow-x: hidden;

}

.col-12.position-relative img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}

#immagine_top {
	z-index: 2000;
}

#immagine_2,
#immagine_4 {
	transform: translateX(-100%);

}

#immagine_3,
#immagine_5 {
	transform: translateX(100%);

}

#immagine_2.image-transition,
#immagine_4.image-transition {
	transform: translateX(0);

}

#immagine_3.image-transition,
#immagine_5.image-transition {
	transform: translateX(0);

}

#bg_laptop_engagement {
	background-image: url('../img/bg_engagement.jpg');
	background-size: cover;
	overflow: hidden;
	animation: backgroundScroll 15s linear infinite alternate;
}

#bg_laptop_analisys {
	background-image: url('../img/bg_analysis.jpg');
	background-size: 80%;
	background-position: center;
	overflow: hidden;
	animation: backgroundScrollVertical 15s linear infinite alternate;
}

#bg_laptop_retention {
	background-image: url('../img/bg_retention.jpg');
	background-size: cover;
	overflow: hidden;
	animation: backgroundScroll 15s ease-in-out infinite alternate;
}

#bg_laptop_engagement,
#bg_laptop_analisys,
#bg_laptop_retention {
	overflow: hidden;
}

@keyframes backgroundScroll {
	0% {
		background-position: 0% 50%;
		/* Inizia a sinistra */
	}

	100% {
		background-position: 100% 50%;
		/* Termina a destra */
	}
}

@keyframes backgroundScrollVertical {
	0% {
		background-position: 50% 0%;
		/* Inizia a sinistra */
	}

	100% {
		background-position: 50% 100%;
		/* Termina a destra */
	}
}

#bg_laptop_retention {
	position: relative;
	
	overflow: hidden;
	/* height: 500px; */

}

#bg_laptop_retention::before,
#bg_laptop_retention::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

#bg_laptop_retention::before {
	background-image: url('../img/bg_retention_1.png');
	animation-name: zoomIn;
}

#bg_laptop_retention::after {
	background-image: url('../img/bg_retention_2.png');
	animation-name: zoomOut;
}

@keyframes zoomIn {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(1.2);
	}
}

@keyframes zoomOut {
	0% {
		transform: scale(1.5);
	}

	100% {
		transform: scale(1);
	}
}

.nav-pills .nav-link.active {
	background-color: #15A3DD;
	color: white;
	
}

.nav-pills .nav-link:not(.active) {
	background-color: #dedede;
	color: #333;
	
}

.nav-pills .nav-link {
	border-radius: 0.25rem;
	
	margin-bottom: 5px;
	
}
/* =============
TEST LISTE
==============*/
ol.lista_1 {
	list-style: none;
	padding: 0;
}

ol.lista_1 li+li {
	margin-top: 1rem;
}

ol.lista_1 li {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: #f2f2f2;
	padding: 1.5rem;
	border-radius: 1rem;
	width: calc(100% - 2rem);
	box-shadow: 0.25rem 0.25rem 0.25rem rgb(0 0 0 / 0.1);
	position: relative;
	/* Needed for absolute positioning of ::before */

}

ol.lista_1 li::before {
	counter-increment: list-item;
	content: counter(list-item);
	font-size: 2rem;
	font-weight: 700;
	width: 1.5em;
	height: 1.5em;
	background: #19b1e9;
	flex: 0 0 auto;
	border-radius: 50%;
	color: #000;
	display: flex;
	justify-content: center;
	align-items: center;
	animation: sizeChange 5s linear infinite;
	/* Animation properties */
}

ol.lista_1 li:nth-child(even) {
	/* flex-direction: row-reverse; */
	background: #dedede;
	margin-right: -2rem;
	margin-left: 2rem;
}

ol.lista_1 li h6 {
	font-weight: bold !important;
}




ol.lista_2 {
	list-style: none;
	padding: 0;
}

ol.lista_2 li+li {
	margin-top: 1rem;
}

ol.lista_2 li {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: #f2f2f2;
	padding: 1.5rem;
	border-radius: 1rem;
	width: calc(100% - 2rem);
	box-shadow: 0.25rem 0.25rem 0.25rem rgb(0 0 0 / 0.1);
	position: relative;
	/* Needed for absolute positioning of ::before */

}

ol.lista_2 li::before {
	counter-increment: list-item;
	content: counter(list-item);
	font-size: 2rem;
	font-weight: 700;
	width: 1.5em;
	height: 1.5em;
	background: #19b1e9;
	flex: 0 0 auto;
	border-radius: 50%;
	color: #000;
	display: flex;
	justify-content: center;
	align-items: center;
	animation: sizeChange 5s linear infinite;
	/* Animation properties */
}

ol.lista_2 li:nth-child(even) {
	/* flex-direction: row-reverse; */
	background: #dedede;
	margin-right: -2rem;
	margin-left: 2rem;
}

ol.lista_2 li h6 {
	font-weight: bold !important;
}

ol.lista_1 li:nth-child(even)::before {
	width: 1.7em;
	height: 1.7em;
}

ol.lista_1 li:nth-child(even)::before {
	width: 1.7em;
	height: 1.7em;
}

ol.lista_1 li:nth-child(even)::before {
	animation: sizeChangeReverse 20s linear infinite;
}

ol.lista_2 li:nth-child(even)::before {
	animation: sizeChangeReverse 20s linear infinite;
}

.lista_1 li {
	opacity: 0;
	/* Initially hidden */
	transition: opacity 0.5s ease;
	/* Adjust duration as needed */
}

.lista_1 li.fadeIn {
	opacity: 1;
}

.lista_2 li {
	opacity: 0;
	/* Initially hidden */
	transition: opacity 0.5s ease;
	/* Adjust duration as needed */
}

.lista_2 li.fadeIn {
	opacity: 1;
}

ol {
	-webkit-column-count: 2;
	/* Chrome/Opera, Safari */
	-moz-column-count: 2;
	/* Mozilla Firefox */
	column-count: 2;

	/* Properties below are optional: */
	-webkit-column-gap: 10px;
	/* Chrome/Opera, Safari */
	-moz-column-gap: 10px;
	/* Mozilla Firefox */
	column-gap: 10px;

	-webkit-column-rule: 1px single grey;
	/* Chrome/Opera, Safari */
	-moz-column-rule: 1px single grey;
	/* Mozilla Firefox */
	column-rule: 1px single grey;
}

ol.single-col {
	-webkit-column-count: 1;
	/* Chrome/Opera, Safari */
	-moz-column-count: 1;
	/* Mozilla Firefox */
	column-count: 1;

	/* Properties below are optional: */
	-webkit-column-gap: 10px;
	/* Chrome/Opera, Safari */
	-moz-column-gap: 10px;
	/* Mozilla Firefox */
	column-gap: 10px;

	-webkit-column-rule: 1px single grey;
	/* Chrome/Opera, Safari */
	-moz-column-rule: 1px single #808080;
	/* Mozilla Firefox */
	column-rule: 1px single grey;
}

/* CHAT LIST*/
ol.lista_1.single-col.chat-list {
	list-style: none;
	padding: 0;
}

ol.lista_1.single-col.chat-list li {
	position: relative;
	padding: 1em;
	margin-bottom: 1em;
	background: white;
}

ol.lista_1.single-col.chat-list li::after {
	content: "";
	position: absolute;
	top: 1em;
	right: -15px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 25px 0 25px 25px;
	border-color: transparent transparent transparent white;
}

ol.lista_1.single-col.chat-list li:nth-child(even) {
	background: #dedede;
	margin-left: 2em;
	margin-right: 0;
}

ol.lista_1.single-col.chat-list li:nth-child(even)::after {
	left: -15px;
	right: auto;
	border-width: 25px 25px 25px 0;
	border-color: transparent #dedede transparent transparent;
}

ol.lista_1.single-col.chat-list li::before {
	counter-increment: list-item;
	content: counter(list-item);
	font-size: 2rem;
	font-weight: 700;
	width: 1.5em;
	height: 1.5em;
	background: #19b1e9;
	flex: 0 0 auto;
	border-radius: 50%;
	color: #000;
	display: flex;
	justify-content: center;
	align-items: center;
	animation: sizeChange 5s linear infinite;
	position: absolute;
	right: -0.5em;
	bottom: -0.2em;
	display: none;
}

ol.lista_1.single-col.chat-list li:nth-child(even)::before {
	left: auto;
	right: -0.5em;
	display: none;
}

/* Optional: Adjust spacing for the row and col classes */
ol.lista_1.single-col.chat-list li .row {
	margin-left: 0;
	margin-right: 0;
}

ol.lista_1.single-col.chat-list li .col-12 {
	padding-left: 0;
	padding-right: 0;
}

ol.lista_1.single-col.chat-list li h6 {
	margin-bottom: 0.5em;
	/* Add some space below the h6 */
}

/*==============
FOOTER
==============*/
footer {
	background-color: #000;
	color: #fff;
	font-weight: 400;
}

footer a {
	color: #fff;
}

footer h1 {
	font-weight: 800;
	font-size: 36px;
}

.btn-link-footer {
	background-color: #3e3e3e;
	border-radius: 0px;
	color: #fff;
	text-decoration: none;
}

.btn-link-footer:hover {
	background-color: #000;
	border-radius: 0px;
	color: #fff;
	text-decoration: none;
}

.form-control {
	background-color: transparent;
	color: #fff;
	border-style: solid;
	border-color: #fff;
	border-radius: 0px;
	border-width: 0px;
	border-bottom-width: 1px;
	min-height: 50px;
}

textarea.form-control {
	background-color: transparent;
	color: #fff;
	border-style: solid;
	border-color: #fff;
	border-radius: 0px;
	border-width: 1x;
}



#carouselIMG .carousel-indicators button {
	width: 130px!important;
	height: auto;
	margin: 23px 50px;
	/* 75px su ciascun lato per un totale di 150px tra gli indicatori */
	border: none;
	background-color: transparent;
	/* Rende lo sfondo trasparente */
	padding: 0;
	/* Rimuove il padding predefinito */
}
#carouselIMG2 .carousel-indicators button {
	width: 130px!important;
	height: auto;
	margin: 23px 50px;
	/* 75px su ciascun lato per un totale di 150px tra gli indicatori */
	border: none;
	background-color: transparent;
	/* Rende lo sfondo trasparente */
	padding: 0;
	/* Rimuove il padding predefinito */
}
#carouselIMG3 .carousel-indicators button {
	width: 130px!important;
	height: auto;
	margin: 23px 50px;
	/* 75px su ciascun lato per un totale di 150px tra gli indicatori */
	border: none;
	background-color: transparent;
	/* Rende lo sfondo trasparente */
	padding: 0;
	/* Rimuove il padding predefinito */
}

#carouselIMG .carousel-indicators button img {
	width: 180px!important;
	margin-bottom: 40px;
	/* Assicura che l'immagine riempia il pulsante */
	height: auto;
	display: block;
	/* Rimuove eventuali spazi indesiderati intorno all'immagine */
	transition: .5s;
}
#carouselIMG2 .carousel-indicators button img {
	width: 180px!important;
	margin-bottom: 40px;
	/* Assicura che l'immagine riempia il pulsante */
	height: auto;
	display: block;
	/* Rimuove eventuali spazi indesiderati intorno all'immagine */
	transition: .5s;
}

#carouselIMG3 .carousel-indicators button img {
	width: 180px!important;
	margin-bottom: 40px;
	/* Assicura che l'immagine riempia il pulsante */
	height: auto;
	display: block;
	/* Rimuove eventuali spazi indesiderati intorno all'immagine */
	transition: .5s;
}


#carouselIMG .carousel-indicators button.active img {
	width: 220px !important;
	margin-bottom: 0px;
	/* Assicura che l'immagine riempia il pulsante */
	height: auto;
	display: block;
	/* Rimuove eventuali spazi indesiderati intorno all'immagine */
	transition: 1s;
}
#carouselIMG2 .carousel-indicators button.active img {
	width: 220px !important;
	margin-bottom: 0px;
	/* Assicura che l'immagine riempia il pulsante */
	height: auto;
	display: block;
	/* Rimuove eventuali spazi indesiderati intorno all'immagine */
	transition: 1s;
}
#carouselIMG3 .carousel-indicators button.active img {
	width: 220px !important;
	margin-bottom: 0px;
	/* Assicura che l'immagine riempia il pulsante */
	height: auto;
	display: block;
	/* Rimuove eventuali spazi indesiderati intorno all'immagine */
	transition: 1s;
}
#carouselIMG .carousel-indicators button.active {
	position: relative;
	/* Necessario per posizionare il :before */
	
}
#carouselIMG2 .carousel-indicators button.active {
	position: relative;
	/* Necessario per posizionare il :before */
	
}
#carouselIMG3 .carousel-indicators button.active {
	position: relative;
	/* Necessario per posizionare il :before */
	
}

#carouselIMG .carousel-indicators button.active:before {
	content: "";
	position: absolute;
	top: -23px;
	/* Posiziona il triangolo sotto l'indicatore */
	left: 83%;
	/* Centra orizzontalmente il triangolo */
	transform: translateX(-50%);
	/* Centra orizzontalmente il triangolo */
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #19b1e9;
	/* Triangolo blu */
	
}
#carouselIMG2 .carousel-indicators button.active:before {
	content: "";
	position: absolute;
	top: -23px;
	/* Posiziona il triangolo sotto l'indicatore */
	left: 83%;
	/* Centra orizzontalmente il triangolo */
	transform: translateX(-50%);
	/* Centra orizzontalmente il triangolo */
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #19b1e9;
	/* Triangolo blu */
	
}
#carouselIMG3 .carousel-indicators button.active:before {
	content: "";
	position: absolute;
	top: -23px;
	/* Posiziona il triangolo sotto l'indicatore */
	left: 83%;
	/* Centra orizzontalmente il triangolo */
	transform: translateX(-50%);
	/* Centra orizzontalmente il triangolo */
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #19b1e9;
	/* Triangolo blu */
	
}

#carouselIMG .carousel-indicators {
	position: static;
	text-align: center;
}
#carouselIMG2 .carousel-indicators {
	position: static;
	text-align: center;
}
#carouselIMG3 .carousel-indicators {
	position: static;
	text-align: center;
}

#carouselIMG .carousel-indicators [data-bs-target] {
	border-radius: 0;
	/* Rimuove il bordo arrotondato predefinito */
}
#carouselIMG2 .carousel-indicators [data-bs-target] {
	border-radius: 0;
	/* Rimuove il bordo arrotondato predefinito */
}
#carouselIMG3 .carousel-indicators [data-bs-target] {
	border-radius: 0;
	/* Rimuove il bordo arrotondato predefinito */
}

#carouselIMG .carousel-inner {
	background-color: #19b1e9;
	border-radius: 20px;
	padding:2rem;
	color: #fff;
	width: 110%;
}

#carouselIMG2 .carousel-inner {
	background-color: #19b1e9;
	border-radius: 20px;
	padding:2rem;
	color: #fff;
	width: 110%;
}

#carouselIMG3 .carousel-inner {
	background-color: #19b1e9;
	border-radius: 20px;
	padding:2rem;
	color: #fff;
	width: 110%;
}

.gray-100 {
	filter: grayscale(100%);
}

.gray-80 {
	filter: grayscale(80%);
}

.gray-60 {
	filter: grayscale(60%);
}

.gray-40 {
	filter: grayscale(40%);
}

.gray-20 {
	filter: grayscale(20%);
}


/* TIMELINE */

#timeline-container {
	width: 80%;
	margin: 0px auto 150px auto;
	position: relative;
}

#timeline-line {
	width: 100%;
	height: 2px;
	background-color: #ccc;
	position: relative;
}

.timeline-point {
	width: 20px;
	height: 20px;
	background-color: #3498db;
	border-radius: 50%;
	position: absolute;
	top: -7.5px;
	transform: translateX(-50%);
	transition: transform 0.5s ease;
	/* Aggiunta transizione */
}

#timeline-image {
	position: absolute;
	top: -220px;
	left: 0;
	transform: translateX(-50%);
	width: 200px;
	height: 200px;
	transition: left 2s linear;
	border: 3px solid #3498db;
	display: none;
}

.caption_timeline {
	position: absolute;
	bottom: -60px;
	left: 50%;
	transform: translateX(-50%);
	opacity: 1;
	transition: opacity 0.5s ease;
	white-space: nowrap;
	padding-top: 20px;
	text-align: center;
}

#discover-button {
	display: none;
	text-align: center;
	margin-top: 20px;
}

#discover-button button {
	background-color: #3498db;
	color: #fff;
	border-radius: 100px;
	border: 0px solid transparent !important;
	padding: 5px 15px;
	margin-top: 20px;
}

#discover-button button a {
	color: #fff;
	text-decoration: none;
}

.card-title {
	font-weight: 900;
}


/* SWIPER SLIDER */
#logo-slider img {
	max-height: 100px;
	/* Adjust as needed */
	width: auto;
}


.btn-download {
	background-color: #3498db;
	color: #fff;
	border-radius: 200px;
	padding:5px 15px;
	border:0px solid transparent!important;
	text-decoration: none;
}

.btn-download:hover {
	background-color: #3498db;
	color: #fff;
	border-radius: 200px;
	padding: 5px 15px;
	border: 0px solid transparent !important;
	text-decoration: none;
	box-shadow: 0px 0px 4px rgba(0,0,0,.3);
}

/* B2B/B2C */
.pricing_design {
	position: relative;
	margin: 0px 15px;
}

.pricing_design .single-pricing {
	background: #0aa1d6;
	padding: 60px 40px;
	border-radius: 30px;
	box-shadow: 0 10px 40px -10px rgba(0, 64, 128, .2);
	position: relative;
	z-index: 1;
}

.pricing_design .single-pricing:before {
	content: "";
	background-color: #fff;
	width: 100%;
	height: 100%;
	border-radius: 18px 18px 190px 18px;
	border: 1px solid #eee;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: -1;
}

.price-head {}

.price-head h2 {
	margin-bottom: 10px;
	font-size: 26px;
	font-weight: 600;
}

.price-head h1 {
	font-weight: 600;
	margin-top: 0px;
	margin-bottom: 30px;
}

.price-head span {}

.single-pricing ul {
	margin-top: 30px;
}

.single-pricing ul li {
	line-height: 36px;
}

.single-pricing ul li i {
	background: #0aa1d6;
	color: #fff;
	width: 20px;
	height: 20px;
	border-radius: 30px;
	font-size: 11px;
	text-align: center;
	line-height: 20px;
	margin-right: 6px;
}

.pricing-price {}

.price_btn {
	background: #0aa1d6;
	padding: 10px 30px;
	color: #fff;
	display: inline-block;
	margin-top: 20px;
	border-radius: 2px;
	-webkit-transition: 0.3s;
	transition: 0.3s;
}

.price_btn:hover {
	background: #0aa1d6;
}

a {
	text-decoration: none;
}

.section-title {
	margin-bottom: 60px;
}

.text-center {
	text-align: center !important;
}

.section-title h2 {
	font-size: 45px;
	font-weight: 600;
	margin-top: 0;
	position: relative;
	text-transform: capitalize;
}



/* SEZIONI AGGIUNTE - PULSE E TECNOLOGIE */

/* Stile per il cerchio con il cuore */
.card-cuore,  .card-cash {
	background-color: #0aa1d6;
	color: #fff;
}
.card-cuore .text-white, .card-cash .text-white {
	color: #fff!important;
}
.heart-badge {
	width: 60px;
	/* Dimensione del cerchio */
	height: 60px;
	background-color: #fff;
	/* Colore richiesto */
	border-radius: 50%;
	/* Rende il div un cerchio */
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	/* Ombra per farlo risaltare */
	z-index: 10;
	transform: translate(-50%, 50%)!important;
	/* Per assicurare che sia sopra la scheda */
	/* Posizionamento gestito in HTML con position-absolute */
}

/* Stile per l'icona del cuore all'interno del cerchio */
.heart-badge i {
	font-size: 1.5rem;
	/* Dimensione del cuore */
	color: #0aa1d6;
	/* Colore bianco richiesto */
}

/* PAGINAZIONE */


.pagination .page-item.pagination, .page-item.active .page-link,
.pagination .page-item:hover .page-link {
	background-color: #0aa1d6 !important;
	color: white !important;
	border-color: transparent !important;
	text-decoration: none!important;
}


.pagination .page-item:not(.active) .page-link {
	color: #0aa1d6;
	text-decoration: none!important;
}

.pagination .page-item:not(.active) .page-link:hover {
	background-color: #0aa1d6;
	color: white;
	border-color: transparent;
	text-decoration: none!important;
}

.page-link {
	border: 0px solid transparent;
	border-radius: 5px;
}