@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
	font-family: 'TangoSans';
	src: url('assets/fonts/TangoSans.otf') format('opentype');
	/* Puoi specificare altri formati di file del font qui se necessario */
}


:root{
	--vp-white: #FFF;
	--vp-brown-light: #ffd9ad;
	--vp-brown-dark: #d8a263;
	--vp-red: #92374D;
	--vp-grey: #2B363F;
	--vp-black: #000000;

	--h1: 70px;
	--h2: 29px;
	--h3: 29px;

	--p: 16px;

	--vp-font-family: "Inter Tight", sans-serif;
	--vp-font-title: 'TangoSans', sans-serif;;
}

.ff-title{
	font-family: var(--vp-font-family);
}

body,html{
	overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6{
	font-family: var(--vp-font-family);
}

.h1{
	font-size: var(--h1);
	font-weight: 500;
	color: var(--vp-grey);
	font-family: var(--vp-font-title);
	line-height: 60px;
}
.h3{
	font-size: var(--h2);
	font-weight: 600;
	color: var(--vp-grey);
}

.h3{}

.center{
	text-align: center;
}

.p{
	letter-spacing: -0.001em;
	font-size: var(--p);
	font-family: var(--vp-font-family);
	line-height: 21px;
	color: var(--vp-grey);
}
.p-light{
	font-weight: 200;
	font-size: 13px;
	line-height: 15px;
}

.p-light strong{
	font-weight: 300;
}

.subtitle{
	color: var(--vp-grey);
}

.navbar{
	border-bottom: 1px solid var(--vp-brown-light);
}

.button{
	background-color: var(--vp-red);
	text-decoration: none;
	padding: 14px 24px;
	color: var(--vp-white);
	border: 1px solid var(--vp-red);
	font-size: var(--p);
	font-weight: 600;
	cursor: pointer;
	border-radius: 3px;
	font-family: var(--vp-font-family);
}
.button:hover{
	background-color: var(--vp-brown-light);
	color: var(--vp-grey);
}

.button-light{
	text-decoration: none;
	padding: 14px 24px;
	color: var(--vp-red);
	border: 1px solid var(--vp-red);
	font-weight: 600;
	cursor: pointer;
	border-radius: 3px;
	background-color: var(--vp-white);
	font-family: var(--vp-font-family);
}
.button-light:hover{
	background-color: var(--vp-red);
	color: var(--vp-white);
}

.button-white{
	text-decoration: none;
	background-color: var(--vp-red);
	color: var(--vp-white);
	padding: 14px 24px;
	border: none;
	font-size: var(--p);
	font-weight: 600;
	cursor: pointer;
	border-radius: 3px;
	font-family: var(--vp-font-family);
}
.button-white:hover{
	background-color: var(--vp-white);
	color: var(--vp-red);

}

.link{
	text-decoration: underline;
	color: var(--vp-grey);
	font-weight: 800;
}
.link:hover{
	color: var(--vp-grey);
	font-weight: 800;
}

.bg-brown{
	background-color: var(--vp-brown-light);
}

.bg-brown-dark{
	background-color: var(--vp-brown-light);color: var(--vp-grey);text-align: center;padding-top: 100px;padding-bottom: 25px;margin-top: 50px;
}

.privacy{
	text-decoration: none;
	color: var(--vp-grey);
	font-weight: 500;
}

.space-50{padding: 100px 0;}

.altezza-50{
	padding-top: 200px;
}
.base-50{
	padding-bottom: 300px;
}

.bg-half-brown{
	background: linear-gradient(to left,var(--vp-brown-light) 50%, var(--vp-white) 50%);
}

.bg-seventy-brown{
	background: linear-gradient(to right, var(--vp-brown-light) 70%, var(--vp-brown-light) 70%, var(--vp-white) 70%, var(--vp-white) 100%);
}

.w-70{
	width: 70%;
}

/*HERO*/
.height-hero{
	height: 80vh;
}

.video-guardiani{
	position: absolute;
	z-index: 0;
	right: 0;
	bottom: 0;
	top: 0;
	overflow: hidden;
}
.clipped-content-mask {
	float: right;
	-webkit-clip-path: url(#my-clip-path);
	clip-path: url(#my-clip-path);
	z-index: 0;
	margin-bottom: -6px;
	height: 100%;
}
.video-fire{
	height: 100%;
}


.video-hero-page{
	position: absolute;
	z-index: 0;
	right: 0;
}

.vh-70{
	height: 60vh!important
}

.image-partner-tecnico{
	width: 300px;
	margin-left: 45px;
}

.arrow-svg{
	position: absolute;
	right: -30px;
	top: 25%;
	transform: rotate(142deg);
}

/*FOOTER*/
.footer-image{
	position: absolute;
}

.video-hero-page{
	display: none;
}

@media (max-width:1350px){
	.clipped-content-mask{
		width: 80vh;
	}
}

@media (max-width:1100px){
	.clipped-content-mask{
		width: 50vh;
	}
}

@media (max-width:768px){

	.height-hero{
		height: 80vh;
	}
	body,html{
		overflow-x: hidden;
	}

	:root{
		--h1: 50px;
		--h2: 19px;
		--h3: 19px;

		--p: 16px;
	}

	.video-hero-page{
		display: block;
	}

	.clipped-content-mask {
		-webkit-clip-path: url(#my-clip-path-mobile);
		clip-path: url(#my-clip-path-mobile);
		z-index: 0;
		width: auto;
	}
	.svg-mask{
		position: absolute;
	}

	.video-guardiani{
		display: none;
	}

	.space-50{padding: 50px 0;}

	.w-70{
		width: 100%;
	}

	.altezza-50{
		padding-top: 50px;
	}
	.base-50{
		padding-bottom: 50px;
	}

	.bg-half-brown{
		background: linear-gradient(to bottom, var(--vp-brown-light) 0%, var(--vp-brown-light) 45%, var(--vp-white) 45%, var(--vp-white) 100%);
	}
	.bg-seventy-brown {
		background: linear-gradient(to bottom, var(--vp-brown-light) 70%, var(--vp-brown-light) 70%, var(--vp-white) 70%, var(--vp-white) 100%);
	}

	.bg-brown-dark{
		background-color: var(--vp-white);color: var(--vp-grey);text-align: center;padding-top: 25px;padding-bottom: 25px;
	}

	/*HERO*/
	.video-hero-page{
		width: 100%;
		position: relative;
	}

	.image-partner-tecnico{
		width: 200px;
		margin-left: 40px;
	}

	.arrow-svg{
		position: absolute;
		right: auto;
		left: 0;
		transform: rotate(52deg);
		z-index: 999;
		bottom: -20px;
		top: auto;
	}

	/*FOOTER*/
	.footer-image{
		position: relative;
		width: 100%;
	}

	.modal-content{
		background: #d9d9d9!important;
	}
	#popup-mattea.clipped-content-mask{
		padding: 50px 25px;
	}
}

@media (max-width:480px){
	.arrow-svg{
		bottom: -20px;
	}

	.button.contact-m:hover, .button-white.contact-m:hover{
		border: 1px solid var(--vp-red);
		color: var(--vp-red);
		background-color: transparent;
	}
}