.homepage {
	/* home page style starts */

	.hero-mod {
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: 0;
	}

	.hero-mod .banner {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 150px 0;

		& picture {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: block;
			clear: both;

			& > *,
			& img {
				width: 100%;
				max-width: none;
				height: 100%;
				object-fit: cover;
				object-position: center;
			}
		}

		& picture:after {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background: #62833a;
			content: "";
			opacity: 0.7;
		}

		@supports (mix-blend-mode: multiply) {
			& picture:after {
				background-color: #62833a;
				opacity: 1;
				mix-blend-mode: hard-light;
				mix-blend-mode: multiply;
			}
		}

		.content {
			position: relative;
			z-index: 1;
			max-width: 500px;
			text-align: center;
			letter-spacing: 0;
			color: var(--white);

			& h1 {
				display: block;
				max-width: max-content;
				font-size: 1.3rem;
				line-height: 1;
				letter-spacing: 3px;
				margin: 0;
				color: #d2ff9c;
				font-weight: 300;
				text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
				font-family: var(--font-sans-serif);

				& span {
					display: block;
					clear: both;
					font-size: 5.5rem;
					line-height: 1;
					text-transform: uppercase;
					letter-spacing: -2px;
					font-weight: 200;
					margin: 12px auto 15px;
					color: var(--white);
					font-family: var(--font-sans-serif-secondary);
				}
				& b {
					font-weight: 700;
				}
			}

			& p {
				margin: 0;
			}
		}
	}

	.hero-mod .featuresList {
		position: relative;
		background-color: var(--lgreen);
		box-shadow: 0px -20px 20px -20px #000;

		& ul {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0;
			padding: 40px 0;
			color: #fff;
			gap: 30px;
			position: relative;
			z-index: 1;



			& li {
				display: flex;
				align-items: center;
				flex: 0 1 320px;

				& h3 {
					font-size: 1.1rem;
					line-height: 1.2;
					margin: 0;
					color: var(--white);
					font-weight: 400;
					font-family: var(--font-regular);
					font-style: italic;
				}

				& img {
					filter: invert(100%) sepia(0%) saturate(7465%) hue-rotate(161deg)
						brightness(109%) contrast(92%);
					height: 65px;
				}
			}

			& li:nth-child(1) {
				gap: 15px;
			}
			& li:nth-child(2) {
				gap: 5px;
			}
			& li:nth-child(3) {
				gap: 10px;
			}

		}
	}

	.hero-mod .featuresList:before,
	.hero-mod .featuresList:after {
		position: absolute;
		top: 0;
		width: 450px;
		height: 100%;
		content: "";
		background-image: url(../../../../../images/pagine/home/dots-connected.png);
		background-size: cover;
		/*   mix-blend-mode: hard-light; */
		mix-blend-mode: multiply;
		opacity: 0.3;
	}

	.hero-mod .featuresList:before {
		transform: rotate(180deg);
		background-position: left center;
		right: 0;
	}
	.hero-mod .featuresList:after {
		left: 0;
		background-position: left center;
	}






	@media (max-width:979px){


		.hero-mod .banner {
			align-items: center;
			justify-content: center;
			padding:0;
			flex-direction: column;
	
			& picture {
			/* 	position: relative; */
				width: 100%;
			/* 	height: auto; */
				aspect-ratio: 4 / 2;
				}
	
	
			.content {
				position: relative;
				z-index: 1;
				max-width: none;
				width: 100%;
				text-align: center;
				letter-spacing: 0;
				color: var(--white);
		/* 		background-color: var(--lgreen); */
				padding: 60px 30px;
				max-width: 450px;
	
				& h1 {
					font-size: 1rem;
					line-height: 1;
					letter-spacing: 0px;
					margin: 0 auto;
					letter-spacing: 0.3px;
	
					& span {
						font-size: 2.6rem;
						line-height: 1;
						letter-spacing: 0px;
					}
				}
	
				& p {
					margin: 0;
					font-size: 0.9rem;
				}
			}
		}
	













		.hero-mod .featuresList {
			padding:0px 30px;
		& ul {
/* 			flex-direction: column; */
			& li{
				flex: 1 1 auto;
				flex-direction: column;
				gap: 15px!important;
				& img {
					height: 40px;
			}
			& h3 {
				font-size: 1rem;
				line-height: 1.2;
				text-align: center;
		}
			}
	}
	}
	
	
	.hero-mod .featuresList:before{
		width: 100%;
		height: 100%;
	}

	.hero-mod .featuresList:after{
		display: none;
	}







	
	}













	@media (max-width:550px){


.hero-mod .featuresList {
& ul {
align-items: flex-start;
gap: 15px;
& li{
& h3 {
font-size: 0.8rem;
line-height: 1.2;
}
}
}
}
	


}











} /* home page style ends */