/* 
	Autore: Mutart
	Cliente: ECP Cappuccio
*/

:root {
	--fucsia: #D3307A;
	--giallo: #FDCC68;
}


html {
	scroll-behavior: smooth;
}

/* html, body {
  overflow-x: hidden;
} */

body {
	font-family: "Kumbh Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "YOPQ" 300;
	color: #222;
	font-size: 18px;
	-webkit-animation: caricamento 1.5s ease-in-out forwards;
	-moz-animation: caricamento 1.5s ease-in-out forwards;
	-o-animation: caricamento 1.5s ease-in-out forwards;
	animation: caricamento 1.5s ease-in-out forwards;
}

@keyframes caricamento {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@-webkit-keyframes caricamento {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@-moz-keyframes caricamento {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

*:focus, *:hover {
	outline: none;
	outline-offset: unset;
}

* {
	box-sizing: border-box;
}

a {
	text-decoration: none;
	color: inherit;
	transition: .3s ease-in-out;
}

a:hover {
	text-decoration: none;
	color: var(--fucsia);
}

a.iubenda-tp-btn.iubenda-cs-preferences-link {
	display: none !important;
}

button.iubenda-tp-btn.iubenda-cs-preferences-link {
	display: none !important;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
}

.content {
	position: relative;
	max-width: 1500px;
	margin: 0 auto;
	padding: 0 30px;
}

.header {
	padding: 30px 0px;
	background: rgb(211,48,122);
	background: -moz-linear-gradient(90deg, rgba(211,48,122,1) 0%, #000 100%);
	background: -webkit-linear-gradient(90deg, rgba(211,48,122,1) 0%, #000 100%);
	background: linear-gradient(90deg, rgba(211,48,122,1) 0%, #000 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d3307a",endColorstr="#d3307a",GradientType=1);
}

.header .content {
	position: relative;
}

.logo img {
	max-width: 300px;
	width: 100%;
	margin-bottom: 30px;
}

.header .title {
	color: #fff;
}

.header h1 {
	font-weight: 600;
	margin-bottom: 30px;
	font-size: 50px;
}

.header .title span {
	display: block;
	font-size: 24px;
	line-height: 1.2;
}

.header .title .claim {
	font-size: 30px;
	font-weight: 700;
	color: var(--giallo);
}

form {
	width: 100%;
	max-width: 500px;
	position: absolute;
	right: 50px;
	top: 50px;
	background: #fff;
	padding: 20px 15px 30px;
	box-shadow: 0px 0px 7px 1px #bbb;
	border-radius: 5px;
	z-index: 1;
}

form .intro-form {
	text-align: center;
}

form .intro-form h4 {
	color: #222;
	font-size: 32px;
	line-height: 1.2;
	font-weight: 800;
}

form .intro-form span {
	display: block;
	margin-bottom: 20px;
}

.form-group {
	padding: 0px 30px;
}

.form-check {
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 300;
	column-gap: 10px;
	margin-top: 20px;
}

.form-check input[type="radio"], .form-check input[type="checkbox"] {
	margin: 0;
}

.form-check label {
	margin: 0;
	font-size: 14px;
	font-weight: 300;
}

.form-check label a {
	text-decoration: underline;
}

form .custom-submit {
	border: none;
	background: var(--fucsia);
	color: #fff;
	text-transform: uppercase;
	padding: 8px 16px;
	border-radius: 5px;
	width: 100%;
	font-weight: 700;
	max-width: 260px;
	margin-top: 10px;
	transition: all .3s ease-in-out;
}

form .custom-submit:hover {
	background: var(--giallo);
	color: #222;
}

.form-control {
	border-radius: 5px;
	height: 42px;
	font-size: 16px;
}

.main {
	padding: 30px 0px 40px;
	background: #fff;
}

.main h2 {
	color: var(--fucsia);
	font-size: 40px;
	line-height: 1.2;
	font-weight: 800;
}

.main .description {
	max-width: 50%;
}

.main .loghi {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	column-gap: 50px;
	margin-top: 15px;
}

.main .loghi img {
	width: 140px;
	object-fit: contain;
}

.main .loghi img:nth-child(3) {
	width: 160px;
}

.reviews {
	background: #fff;
	padding: 40px 0px 60px;
}

.reviews h3 {
	text-align: center;
	margin-bottom: 10px;
	font-size: 30px;
	color: var(--fucsia);
	text-transform: uppercase;
	font-weight: 800;
}

.slide_review div div div {
	position: relative;
	background: #fff;
	border-radius: 5px;
	margin: 20px;
	padding: 15px 20px;
	min-height: 420px;
	border: 5px solid var(--fucsia);
	display: flex !important;
	flex-direction: column;
	justify-content: space-between;
}

.slide_review .author {
	font-weight: 600;
	display: flex;
	justify-content: flex-end;
}

.slide_review div div div:before {
	content: '';
	position: absolute;
	bottom: 10px;
	left: 20px;
	background: url('../img/star.png');
	background-size: contain;
	background-repeat: no-repeat;
	width: 110px;
	height: 30px;
	z-index: 1;
}

.reviews h3 ~ span {
	display: block;
	text-align: center;
	max-width: 700px;
	margin: 0 auto 30px;
}

.advantages {
	padding: 60px 0px;
	background: #f5f5f5;
}

.advantages h3 {
	text-align: center;
	margin-bottom: 10px;
	font-size: 30px;
	color: var(--fucsia);
	text-transform: uppercase;
	font-weight: 800;
}

.advantages h3 ~ span {
	display: block;
	text-align: center;
	max-width: 700px;
	margin: 0 auto 30px;
}

.container-advantages {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	justify-content: space-between;
}

.col-advantages {
	margin: 30px 40px;
	text-align: center;
	display: flex;
	flex-direction: column;
	row-gap: 20px;
}

.col-advantages .title {
	font-weight: 700;
	text-transform: uppercase;
	color: var(--fucsia);
	letter-spacing: 0.5px;
	font-size: 20px;
}

.col-advantages img {
	width: 90px;
	margin: 0 auto 10px;
	object-fit: contain;
}

.cta {
	padding: 50px 0px;
	background: var(--fucsia);
}

.cta .contact {
	background: #fff;
	border-radius: 5px;
	display: flex;
	align-items: center;
	padding: 40px 30px;
	justify-content: center;
}

.cta .desc {
	max-width: 50%;
	padding-right: 100px;
}

.cta .desc .title {
	display: block;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 10px;
	color: var(--fucsia);
	font-size: 26px;
}

.cta .wa {
	color: #29a71a;
	background: #fff;
	padding: 14px 30px;
	border-radius: 5px;
	box-shadow: 0px 0px 7px 1px #bbb;
	display: flex;
	align-items: center;
	column-gap: 20px;
	transition: all .3s ease-in-out;
	animation: animate-pulse-button 3s linear infinite;
}

@keyframes animate-pulse-button {
  0% {
    box-shadow: 0 0 0 0 #29a71acc,  0 0 0 0 #29a71acc;
  }
  40% {
    box-shadow: 0 0 0 20px rgba(255,109,74,0.0),  0 0 0 0 #29a71acc;
  }
  80% {
    box-shadow: 0 0 0 20px rgba(255,109,74,0.0),  0 0 0 20px rgba(255,109,74,0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255,109,74,0.0),  0 0 0 20px rgba(255,109,74,0);
  }
}

.wa img {
	width: 60px;
}

.wa span {
	font-size: 24px;
	text-transform: uppercase;
	font-weight: 700;
}

.numbers {
	padding: 60px 0px;
}

.numbers h3 {
	text-align: center;
	margin-bottom: 10px;
	font-size: 30px;
	color: var(--fucsia);
	text-transform: uppercase;
	font-weight: 800;
}

.numbers h3 ~ span {
	display: block;
	text-align: center;
	max-width: 700px;
	margin: 0 auto 30px;
}

.container-numbers {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	justify-content: space-between;
}

.col-numbers {
	background: #f5f5f5;
	margin: 20px 15px;
	padding: 40px;
	text-align: center;
	display: flex;
	flex-direction: column;
	row-gap: 20px;
}

.col-numbers img {
	width: 120px;
	margin: 0 auto;
}

.footer {
	background: var(--giallo);
	padding: 10px 0px;
}

.footer .copy {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
}

.ty-page .header {
	height: 96vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.ty-page .header h1 {
	text-transform: uppercase;
	font-weight: 800;
	margin-bottom: 30px;
	font-size: 40px;
}

.ty-page .header .title a {
	margin-top: 40px;
	display: block;
	text-decoration: underline;
}

.ty-page .header .title a:hover {
	color: var(--giallo);
}

.ty-page .footer {
	height: 4vh;
}

@media (max-width: 767px) {

	.header {
    padding: 15px 0px;
		background: -moz-linear-gradient(180deg, rgba(211, 48, 122, 1) 0%, #000 100%);
		background: -webkit-linear-gradient(180deg, rgba(211, 48, 122, 1) 0%, #000 100%);
		background: linear-gradient(180deg, rgba(211, 48, 122, 1) 0%, #000 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d3307a", endColorstr="#d3307a", GradientType=1);
	}

	.logo {
    text-align: center;
	}

	.logo img {
    max-width: 280px;
    margin-bottom: 20px;
	}

	.header h1 {
    margin-bottom: 20px;
    font-size: 32px;
		text-align: center;
	}

	.header .title span {
    font-size: 22px;
		text-align: center;
	}

	.header .title .claim {
    font-size: 26px;
		text-align: center;
	}

	form {
		margin-top: 30px;
		position: relative;
		right: 0;
		top: 0px;
		padding: 10px 10px 30px;
	}

	form .intro-form h4 {
    font-size: 30px;
	}

	form .intro-form span {
    font-size: 16px;
	}
	
	.form-group {
    padding: 0px 10px;
	}

	.form-check label {
    font-size: 13px;
	}

	.main {
    padding: 10px 0px 15px;
	}

	.main h2 {
    font-size: 32px;
		text-align: center;
	}

	.main .description {
		text-align: center;
	}

	.main .loghi {
    flex-direction: column;;
	}

	.main .description {
    max-width: 100%;
	}

	.main .loghi img:nth-child(1) {
    margin-bottom: 5px;
	}

	.advantages {
    padding: 10px 0px;
	}

	.advantages h3 {
		font-size: 28px;
	}

	.container-advantages {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
	}

	.col-advantages {
    margin: 30px 10px;
    row-gap: 10px;
	}

	.col-advantages img {
    width: 70px;
		margin: 0 auto 5px;
	}

	.cta {
    padding: 20px 0px;
	}

	.cta .contact {
		flex-direction: column;
		text-align: center;
		padding: 20px 15px;
		row-gap: 20px;
	}

	.cta .desc {
    max-width: 100%;
    padding-right: 0px;
	}

	.cta .desc .title {
    line-height: 1.2;
	}

	.cta .wa {
    padding: 10px 20px;
    box-shadow: 0px 0px 4px 1px #bbb;
    column-gap: 15px;
	}

	.wa img {
    width: 50px;
	}

	.wa span {
    font-size: 22px;
	}

	@keyframes animate-pulse-button {
		0% {
			box-shadow: 0 0 0 0 #29a71acc,  0 0 0 0 #29a71acc;
		}
		40% {
			box-shadow: 0 0 0 10px rgba(255,109,74,0.0),  0 0 0 0 #29a71acc;
		}
		80% {
			box-shadow: 0 0 0 10px rgba(255,109,74,0.0),  0 0 0 10px rgba(255,109,74,0);
		}
		100% {
			box-shadow: 0 0 0 0 rgba(255,109,74,0.0),  0 0 0 10px rgba(255,109,74,0);
		}
	}

	.reviews {
    padding: 10px 0px 20px;
	}

	.reviews h3 {
		font-size: 28px;
	}

	.reviews h3 ~ span {
    margin: 0 auto 10px;
	}

	.slide_review div div div {
    margin: 10px;
    padding: 15px;
    min-height: 340px;
	}

	.slide_review div div div p {
    font-size: 16px;
	}

	.footer .copy {
		flex-direction: column;
	}

	.ty-page .header {
		height: 93vh;
	}

	.ty-page .footer {
		height: 7vh;
	}

}