@import "variables.css";

/* body */
	body {
		margin: 0;
		padding: 0;
		background-color: #ffffff;
		color: var(--darkerGray);
		font-family: "Poppins", sans-serif;
		overflow-x: hidden !important;
	}
	html {
		overflow-x: hidden;
	}
/* /body */
/* commons */
	.debug *{
		border: 1px solid red;
	}
	.border-clipper{
		padding: 15px;
		border: 1px solid var(--borders-gray);
		border-radius: 50%;
	}
	.border-clipper-bold{
		padding: 15px;
		border: 2px solid var(--borders-gray);
		border-radius: 50%;
	}
	/* selection */
		::-moz-selection { /* Code for Firefox */
			color: #ffffff;
			background: var(--lightOrange);
		}
		::selection {
			color: #ffffff;
			background: var(--lightOrange);
		}
		.is-active {
			color: white!important;
		}
	/* /selection */
	/* scrollbar */
		::-webkit-scrollbar {
			width: 12px;
		  }
		::-webkit-scrollbar-track {
			background: transparent;
		  }
		::-webkit-scrollbar-thumb {
			background-color: var(--darkerGray);
			border-radius: 0;
		}
	/* /scrollbar */
	/* paragraph */
		p:last-child {
			margin-bottom: 0;
		}
	/* /paragraph */
	/* backgrounds */
		.bg-orange {
			background-color: var(--orange);
		}
		.bg-light-orange {
			background-color: var(--lightOrange);
		}
		.bg-map {
			background: url(../media/layout_images/map.svg) no-repeat center top;
		}
		.bg-gray {
			background-color: var(--lightGray);
		}
		.bg-reticulate {
			background-image: url(../media/layout_images/BG_connections.svg);
			background-size: cover;
		}
		.bg-reticulate-flipped {
			background-image: url(../media/layout_images/BG_connections_flipped.svg);
			background-size: cover;
		}
		.bg-mosaic {
			background: url(../media/layout_images/mosaic_background.svg) no-repeat right 0;
			background-size: cover;
		}
		.bg-circuit {
			background-image: url(../media/layout_images/BG_circuit.svg);
			background-size: cover;
			background-position: center center;
		}
		.bg-white{
			background-color: white;
		}
	/* /backgrounds */
	/* typography */
	h1, h2, h4, h5, h6{
		font-weight: 600;
		line-height: 1.2;
	}
	h3 {
		font-size: 2rem;
	}
	.title-gray {
		color: var(--darkGray);
	}
	body {
		line-height: 1.9rem;
	}
	.justify {
		text-align: justify;
	}
	.lh-small {
		line-height: 25px;
	}
	.lh-smaller {
		line-height: 20px
	}
	/* /typography */
	/* sizing */
	.p-introduction {
		padding: 3rem;
	}
	.w-60 {
		width: 60%;
	}
	/* /sizing */
	/* buttons */
		button {
			outline: none;
		}
		button.btn, a.btn {
			width: fit-content;
			padding: 0px 10px;
			background-color: #ffffff;
			color: var(--orange);
			border: 1px solid var(--lightOrange);
			font-family: Arial, Helvetica, sans-serif;
			font-size: 0.71rem;
			font-weight: 600;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			overflow: hidden;
			position: relative;
			display: block;
			z-index: 1;
			min-width: 12rem;
			height: 45px;
			line-height: 44px;
			cursor: pointer;
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
			border-radius: 0;
		}
		button.btn:before, a.btn:before {
			content: "";
			display: block;
			position: absolute;
			-webkit-transform: skewX(-40deg);
			transform: skewX(-40deg);
			background: -webkit-gradient(linear, right top, left top, from(var(--darkOrange)), to(var(--lightOrange)));
			background: linear-gradient(270deg, var(--darkOrange), var(--lightOrange));
			width: 145%;
			height: 100%;
			top: 0;
			left: 120%;
			-webkit-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
			opacity: 0.4;
			z-index: -1;
		}
		button.btn:hover, a.btn:hover {
			color: #ffffff;
			border: none;
		}
		button.btn:hover::before, a.btn:hover::before{
			left: -20%;
			opacity: 1;
		}
		button.btn.inverted, a.btn.inverted {
			padding: 0px 10px;
			background-color: #ffffff;
			color: #ffffff;
			border: none;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 0.71rem;
			font-weight: 600;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			overflow: hidden;
			position: relative;
			display: block;
			z-index: 1;
			min-width: 12rem;
			height: 45px;
			line-height: 44px;
			cursor: pointer;
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
			border-radius: 0;
		}
		button.btn.inverted:before, a.btn.inverted:before {
			content: "";
			display: block;
			position: absolute;
			-webkit-transform: skewX(-40deg);
			transform: skewX(-40deg);
			background: -webkit-gradient(linear, right top, left top, from(var(--darkOrange)), to(var(--lightOrange)));
			background: linear-gradient(270deg, var(--darkOrange), var(--lightOrange));
			width: 145%;
			height: 100%;
			top: 0;
			left: -20%;
			-webkit-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
			opacity: 1;
			z-index: -1;
		}
		button.btn.inverted:hover, a.btn.inverted:hover{
			color: var(--orange);
			border: 1px solid var(--lightOrange);
		}
		button.btn.inverted:hover::before, a.btn.inverted:hover::before {
			left: 120%;
			opacity: 0.4;
		}
		button.btn-products {
			background-color: transparent;
			border: none;
			border-radius: 5px;
		}
		button.scroll-btn {
			position: fixed;
			bottom: 30px;
			right: 30px;
			color: white;
			font-size: 16px;
			background: linear-gradient(270deg, rgba(255, 48, 18, 0.8), rgba(255, 127, 39, 0.8));
			padding: 6px 8px;
			/* height: 25px;
			width: 25px;
			max-width: 25px;
			max-height: 25px; */
			border-radius: 50%;
			border: 1px solid #fff;
		}
	/* /buttons */
/* /commons */
/* header */
	.slider h2 {
		font-size: clamp(26px, 3vw, 40px)!important;
		line-height: clamp(32px, 4vw, 50px)!important;
	}
	/* marquee */
		header>div.marquee {
			width: 100%;
			overflow: hidden;
			background-color: var(--darkOrange);
			background-image: -webkit-gradient(linear, right top, left top, from(var(--darkOrange)), to(var(--lightOrange)));
			background-image: linear-gradient(270deg, var(--darkOrange), var(--lightOrange));
			height: 30px;
		}
		header>div.marquee a {
			font-size: 15px;
			line-height: 30px;
			text-align: center;
			color: #ffffff;
			text-decoration: none;
			display: none;
		}
	/* /marquee */
	/* hero */
		header>div.hero {
			background: url(../media/layout_images/hero_background.svg) no-repeat left top;
			background-size: cover;
			min-height: 45rem;
			max-height: calc(100vh - 30px);
		}
		header>nav {
			background: url(../media/layout_images/hero_background.svg) no-repeat left top;
			background-size: cover;
		}
		header>div.hero.blocks {
			background: url(../media/layout_images/hero_background_blocks.svg) no-repeat center top;
			background-size: 100%;
		}
		/* navigation */
			/* logo */
				header nav.navbar img.logo {
					height: 45px;
				}
			/* /logo */
			/* toggle */
				button.navbar-toggler {
					box-shadow: none !important;
					padding: 0 10px;
					height: 45px;
					border: none;
					color: #ffffff;
				}
				button.navbar-toggler>span.navbar-toggler-icon {
					background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
				}
			/* /toggle */
			/* nav */
				/* dropdown */
				.dropdown-navlink {
					background-color: transparent;
					border: none;
					line-height: 45px;
					height: auto;
					display: block;
					color: var(--beige);
					text-align: center;
					font-size: 13px;
					text-decoration: none;
					font-weight: 500;
					-webkit-transition: 0.3s;
					transition: 0.3s;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					font-stretch: expanded;
					letter-spacing: 0.4px;
				}
				.dropdown-navlink:hover{
					cursor: pointer;
					color: var(--red) !important;
					-webkit-transition: 0.3s;
					transition: 0.3s;
				}
				/* /dropdown */
				header nav.navbar ul.navbar-nav>li>a.nav-link {
					line-height: 45px;
					height: auto;
					display: block;
					color: var(--beige);
					text-align: center;
					font-size: 13px;
					text-decoration: none;
					font-weight: 500;
					-webkit-transition: 0.3s;
					transition: 0.3s;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					font-stretch: expanded;
					letter-spacing: 0.4px;
				}
				header>div.hero.blocks nav.navbar ul.navbar-nav>li>a.nav-link {
					color: rgba(0, 0, 0, 0.75);
				}
				header nav.navbar ul.navbar-nav>li>a.nav-link:hover {
					cursor: pointer;
					color: var(--red) !important;
					-webkit-transition: 0.3s;
					transition: 0.3s;
				}
				header>div.hero.blocks nav.navbar ul.navbar-nav>li>a.nav-link:hover {
					color: rgba(0, 0, 0, 1) !important;
				}
				header nav.navbar ul.navbar-nav>li>a.nav-link.dropdown-toggle {
					padding-right: calc(19px + 1rem) !important;
					-webkit-border-radius: 0;
					-moz-border-radius: 0;
					border-radius: 0;
				}
				header nav.navbar ul.navbar-nav>li>a.nav-link.dropdown-toggle:hover {
					background-color: var(--lightOrange);
				}
				header nav.navbar ul.navbar-nav>li>a.nav-link.dropdown-toggle::after {
					margin: 0 0 0 10px;
					vertical-align: middle;
					border: none;
					position: absolute;
					top: calc(50% - 4.5px);
					width: 9px;
					height: 45px;
					background: url(../media/layout_images/arrow_down_white.svg) no-repeat center top;
					background-size: 9px 9px;
				}
				header>div.hero.blocks nav.navbar ul.navbar-nav>li>a.nav-link.dropdown-toggle::after {
					background: url(../media/layout_images/arrow_down_dark.svg) no-repeat center top;
					background-size: 9px 9px;
				}
				header>div.hero.blocks nav.navbar ul.navbar-nav>li>a.nav-link.dropdown-toggle:hover::after {
					background: url(../media/layout_images/arrow_down_white.svg) no-repeat center top;
					background-size: 9px 9px;
				}
				.dropdown-menu small {
					line-height: 1;
				}
				header .dropdown-menu li {
					padding: 4px 0;
				}
			/* /nav */
		/* /navigation */
		/* slider */
			header>div.hero div.slider>div.carousel div.carousel-inner {
				padding: 5rem 7rem;
			}
			/* image */
				header>div.hero div.slider>div.carousel div.carousel-inner>div.carousel-item div.carousel-image>img {
					width: 100%;
					max-width: 415px;
				}
			/* /image */
			/* description */
				header>div.hero div.slider>div.carousel div.carousel-inner>div.carousel-item div.carousel-description>h2 {
					font-weight: 600;
					font-size: 46px;
					line-height: 52px;
				}
				header>div.hero div.slider>div.carousel div.carousel-inner>div.carousel-item div.carousel-description>p {
					font-weight: 400;
					font-size: 16px;
					line-height: 24px;
					letter-spacing: 0.5px;
				}
		/* /slider */
	/* /hero */
/* /header */
/* logos */
	section.logos {
		border-bottom: 1px solid var(--borders-gray);
	}
	section.logos div.marquee {
		overflow: hidden;
		white-space: nowrap;
	}
	section.logos div.marquee img {
		height: 30px;
	}
/* /logos */
/* welcome */
	section.welcome h3, section.logos h3, section.sectors-home h3, section.team h3 {
		font-size: 2rem;
		font-weight: 600;
		line-height: 1.2;
	}
/* /welcome */
/* btns */
	section.btns {
		border-top: 1px solid var(--borders-gray);
	}
	section.btns .btns-container{
		max-width: 900px;
		margin: auto;
	}
/* /btns */
/* featured */
	section.featured .nav-link{
		font-size: clamp(10px, 2vw, 16px)
	}
	section.featured ul.nav-tabs {
		border-bottom: 1px solid var(--borders-gray);
		flex-wrap: nowrap;
	}
	section.featured ul.nav-tabs>li.nav-item>a.nav-link {
		position: relative;
		font-weight: 500;
		color: var(--darkerGray);
	}
	section.featured ul.nav-tabs>li.nav-item>a.nav-link:hover {
		border: none;
	}
	section.featured ul.nav-tabs>li.nav-item>a.nav-link.active {
		border: none;
		border-bottom: 1px solid var(--lightOrange);
		color: white;
		background-image: -webkit-gradient(linear, right top, left top, from(var(--darkOrange)), to(var(--lightOrange)));
		background-image: linear-gradient(270deg, var(--darkOrange), var(--lightOrange));
	}
	section.featured ul.nav-tabs>li.nav-item>a.nav-link.active:after {
		display: block;
		content: "";
		position: absolute;
		bottom: -5px;
		left: 50%;
		border-top: 1px solid var(--lightOrange);
		border-left: 1px solid var(--lightOrange);
		-webkit-transform: translateX(-50%) rotate(45deg);
		transform: translateX(-50%) rotate(45deg);
		width: 10px;
		height: 10px;
		background: #fff;
	}
	section.featured div.tab-content>div.tab-pane>h4 {
		font-weight: 600;
	}
	section.featured .featured-container{
		max-width: 900px;
		margin: auto;
	}
/* /featured */
/* why */
	section.why h2 {
		font-weight: 600;
	}
	section.why p {
		font-weight: 400;
	}
	section.why div.row>div.col {
		border-right: 1px solid var(--lightOrange);
	}
	section.why div.row>div.col:last-child {
		border-right: none;
	}
	section.why div.row>div.col>h6 {
		font-size: 35px;
		line-height: 70px;
	}
	section.why div.row>div.col>h6>span.counter {
		font-size: clamp(35px, 6vw, 70px);
		font-weight: 600;
	}
/* /why */
/* sectors-home */
	section.sectors-home{
		border-top: 1px solid var(--borders-gray);
	}
/* /sectors-home */
/* customers */
	section.customers h2 {
		padding: 50px 0 50px 0;
		font-weight: 600;
	}
	section.customers h2:before {
		position: absolute;
		width: 130px;
		height: 130px;
		left: calc(50% - 65px);
		top: 0;
		content: "";
		background: url(../media/layout_images/quote.svg) no-repeat center top;
		background-size: 130px;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
		filter: alpha(opacity=20);
		-moz-opacity: 0.2;
		-khtml-opacity: 0.2;
		opacity: 0.2;
	}
	section.customers p {
		font-weight: 400;
	}
	section.customers div.carousel {
		margin-bottom: 3rem;
	}
	section.customers div.carousel>div.carousel-indicators {
		bottom: -4.5rem;
	}
	section.customers div.carousel button.carousel-control-prev,
	section.customers div.carousel button.carousel-control-next
	{
		top: calc(50% - 8px);
		width: clamp(40px, 5vw, 60px);
		height: clamp(40px, 5vw, 60px);
		font-size: 15px;
		text-align: center;
		border: 1px solid #ffffff;
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		border-radius: 100%;
		-webkit-transition: 0.3s;
		transition: 0.3s;
	}
	section.customers div.carousel button.carousel-control-prev {
		left: 12rem;
	}
	section.customers div.carousel button.carousel-control-next {
		right: 12rem;
	}
	section.customers div.carousel button.carousel-control-prev>span.carousel-control-prev-icon {
		background-image: none;
		line-height: 32px;
	}
	section.customers div.carousel button.carousel-control-next>span.carousel-control-next-icon {
		background-image: none;
		line-height: 32px;
	}
/* /customers */
/* team */
	section.team h3 {
		font-size: 2rem;
		font-weight: 600;
		line-height: 1.2;
	}
	section.team div.marquee {
		overflow: hidden;
		white-space: nowrap;
		border-top: 1px solid var(--borders-gray);
	}
	section.team div.marquee img {
		height: 100px;
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		border-radius: 100%;
	}
/* /team */
/* your_project */
	section.your_project h3 {
		font-size: 2rem;
		font-weight: 600;
		line-height: 1.2;
	}
/* /your_project */
/* breadcrumb */
	/* section.breadcrumb {
		border-bottom: 1px solid var(--borders-gray);
	} */
	/* section.breadcrumb nav>ol>li>a {
		color: var(--darkOrange);
	} */
	.breadcrumb a {
		color: var(--red);
	}
/* /breadcrumb */
/* mosaic */
	section.mosaic>div>div.row:first-child {
		border-top: none;
	}
	section.mosaic h3 {
		font-weight: 600;
		line-height: 1.2;
	}
	section.mosaic div.box {
		position: relative;
		box-shadow: 0 0 10px 4px rgb(31 66 135 / 10%);
		padding: 30px;
		background-color: #fff;
		border-radius: 10px;
		transition: all .5s;
		overflow: hidden;
		z-index: 9;

	}
	section.mosaic div.box:hover {
		background-color: var(--darkOrange);
		background-image: -webkit-gradient(linear, right top, left top, from(var(--darkOrange)), to(var(--lightOrange)));
		background-image: linear-gradient(270deg, var(--darkOrange), var(--lightOrange));
		color: #ffffff;
	}

	/* effect */
		section.mosaic div.box>div.effect {
			position: absolute;
			right: -150px;
			bottom: -150px;
			border-radius: 50%;
			transition: all .5s;
			height: 350px;
			width: 350px;
			background-color: rgba(255, 127, 39, 0.25);
			right: -100%;
			bottom: -100%;
			z-index: -1;
		}
		section.mosaic div.box:hover>div.effect {
			right: 0;
			bottom: 0;
		}
		section.mosaic div.box>div.effect:before {
			background-color: rgba(255, 127, 39, 0.5);
			height: 250px;
			width: 250px;
		}
		section.mosaic div.box>div.effect:after {
			background-color: var(--lightOrange);
			height: 150px;
			width: 150px;
		}
		section.mosaic div.box>div.effect:before,
		section.mosaic div.box>div.effect:after
		{
			content: "";
			border-radius: 50%;
			position: absolute;
			transition: all .5s;
			-webkit-transform: translate(-50%,-50%);
			transform: translate(-50%,-50%);
			top: 50%;
			left: 50%;
		}
	/* /effect */
	/* content */
		section.mosaic div.box>div.content>div.icon {
			margin-left: auto;
			margin-right: auto;
			width: 90px;
			height: 90px;
			padding: 20px;
			font-size: 30px;
			line-height: 70px;
			transition: all .5s;
			color: var(--lightOrange);
			background: linear-gradient(270deg, var(--darkOrange), var(--lightOrange));
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
			text-align: center;
			&>img{
				width: 100%;
				display: block;
			}
		}
		section.mosaic div.box:hover>div.content>div.icon {
			background: transparent;
			&>img{
				transition: all 0.5s ease;
				transform-origin: center;
				transform: scale(1.5);
			}
		}
		section.mosaic div.box>div.content>h4 {
			font-weight: 600;
			line-height: 1.2;
		}
	/* /content */
/* /mosaic */
/* strips */
	h3.strips-title{
		color: var(--lightOrange);
		font-weight: 650;
		font-size: 2rem;
	}
	section.smeup{
		background-color: var(--smeupRed);
	}
/* /strips */
/* workspace */
section.workspace {
	background-color:#fff;
	background-image: url(../media/layout_images/BG_connections.svg);
	background-size: cover;
}

section.workspace .owl>*+*{
	margin-top: 25px;
}

section.workspace img+img{
	margin-top: 25px;
}

section.workspace .owl>*{
	padding: 0 25px;
}

section.workspace .owl>h2{
	margin-bottom: 50px;
}

section.workspace .image-card {
	width: 100%;
	background-color: white;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 4px 2px var(--gray);
	&+.image-card {
		margin-top: 20px
	}
}
/* /workspace */
/* 404 */
	.title-404 {
		font-size: clamp(42px, 6vw, 74px);
		color: var(--orange);
	}
/* /404 */
/* common x2app */
	.subtitle-container {
		background: linear-gradient(270deg, rgba(255, 48, 18, 0.8), rgba(255, 127, 39, 0.8));
		padding: 30px;
		padding-left: 40px;
		width: 45%;
		position: absolute;
		right: 0;
		bottom: 25%;
	}
	.divider {
		width: 150px;
		height: 3px;
		border-radius: 25px;
		background-color: var(--gray);
	}
	.characteristics .owl>*+*, .advantages .owl>*+*{
		margin-top: 40px
	}
	.accordion-button{
		background: linear-gradient(270deg, var(--darkOrange), var(--lightOrange));
		color: white;
		font-weight: 500;
		font-size: 25px;
	}
	.accordion-button::after{
		filter: brightness(0%) invert(100%);
	}
	.accordion-button:focus {
		box-shadow:inherit;
		color: white;
	}
	.accordion-button:not(.collapsed) {
		color: white;
	}
	ul {
		list-style-type: disc;
	}
	.business-value ul {
		list-style-position: inside;
		padding-left: 0px;
	}
	img.title-icon{
		height: 100px;
	}
	img.sectors-icon{
		height: 200px;
	}
	section.evolution {
		background: url(../media/layout_images/BG_connections_flipped.svg) no-repeat right 0;
		background-size: cover;
	}
	section.evolution .evolution-boxes{
		background-color: #fff;
		border: 1px solid var(--gray);
		box-shadow: 0 0 4px 2px var(--gray);
		border-radius: 15px;
		padding: 20px;
		padding-left: 0px;
		height: 100%;
		& .check {
			height: 40px;
			width: 40px;
			background-color: var(--lightOrange);
			padding: 5px;
			border-radius: 50%;
			flex-shrink: 0;
			position: relative;
			translate: -70% 0;
			& i {
				font-size: 25px;
				color: white;
			}
		}
	}
	section.business-value ul.owl>*+*{
		margin-top: 10px
	}
	.sectors-container{
		max-width: 1200px;
		margin: auto;
	}
	section.clients div.marquee img {
		height: 50px;
	}
	section.products-show .owl>*+* {
		margin-left: 5px;
	}
	/* product show */
		.s2a-card, .c2a-card, .b2a-card, .allergeni-card{
			position: relative;
			border-radius: 25px;
		}
		/* [class*=card-hover]{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: color-mix(in srgb, #FFF 70%, transparent 30%);
			box-shadow: 0 0 4px 2px var(--gray);
			display: none;
			border-radius: 25px;
		}
		.s2a-card:hover .s2a-card-hover,
		.c2a-card:hover .c2a-card-hover,
		.b2a-card:hover .b2a-card-hover,
		.allergeni-card:hover .allergeni-card-hover{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		} */

		.all .text-container{
			height: 0%;
			overflow: hidden;
			transition: height 1s;
		}
		.all .img-container{
			height: 100%;
			transition: height 1s;
		}
		.all:hover{
			& .text-container{
				height: 80%;
			}
			& .img-container{
				height: 20%;
			}
		}
	/* /product show */
	a.mail-link{
		color: inherit;
		text-decoration: none;
	}
	section.lead input, section.lead textarea {
		border: 1px solid var(--gray);
	}
	section.lead input:focus, section.lead textarea:focus {
		outline: 2px solid var(--orange);
		outline-offset: -2px;
	}
	section.lead input::placeholder, section.lead textarea::placeholder{
		font-size: small;
	}
	section.lead .ms-check:checked{
		accent-color: var(--orange);
	}
	section.lead label[for="privacy"], section.lead label[for="news"] {
		margin: -2px 0 0 20px;
		font-size: 14px;
		line-height: 18px;
		color: var(--darkGray)
	}
	section.lead label[for="privacy"] a {
		color: var(--orange)
	}
	section.lead button {
		width: 100%;
	}
	section.lead input, section.lead textarea {
		border-radius: 20px;
	}
	section.lead form {
		background-color: #fff;
		border-radius: 40px;
		padding: 35px;
	}
	section.lead .form {
		font-size: 16px;
	}
	.h2-bigger{
		font-size: 45px;
		line-height: 60px;
	}
	section.lead .age{
		visibility: hidden;
	}
/* /common x2app */
/* sales2app */
	.s2a-hero .fa-arrow-down{
		color: var(--lightOrange);
	}
	.advantages-map {
		position: relative;
		right: 700px;
		bottom: 30px;
		z-index: 0;
	}
/* /sales2app */
/* credit2app */
	.c2a-hero .fa-arrow-down{
		color: var(--red);
	}
/* /credit2app */
/* business2app */
	.b2a-hero .fa-arrow-down{
		color: var(--azure);
	}
	.stack-title {
		background: linear-gradient(270deg, rgba(255, 48, 18, 0.8), rgba(255, 127, 39, 0.8));
		padding: 25px;
		width: 100%;
		position: absolute;
		right: 0;
		bottom: 40%;
	}
/* /business2app */
/* allergeni */
	.allergeni-hero .fa-arrow-down{
		color: var(--blue);
	}
/* /allergeni */
/* pagina prodotti */
	section.products .bigger {
		font-size: 20px;
	}
	.zoom {
		-webkit-transform: scale(1.3);
		-moz-transform: scale(1.3);
		-o-transform: scale(1.3);
		transform: scale(1.3);
	}
	.benefit-container {
		border: 1px solid var(--gray);
		border-radius: 20px;
		padding: 10px 25px;
		& ul {
			list-style: none;
			padding-left: 0;
		}
		& .check-dot {
			width: 20px;
			height: 20px;
			padding: 7px;
			margin-right: 5px;
			border-radius: 50%;
			position: relative;
			top: 5px;
			& i{
				position:absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%)
			}
			&.dot-s2a {
				background-color: var(--lightOrange)
			}
			&.dot-c2a {
				background-color: var(--red)
			}
			&.dot-allergeni {
				background-color: var(--blue)
			}
			&.dot-b2a {
				background-color: var(--azure);
			}
		}
	}
	/* flipcard */
	.flip-card {
		background-color: transparent;
		width: 100%;
		aspect-ratio: 2/3;
		perspective: 1000px;
	}

	.flip-card-inner {
		position: relative;
		width: 100%;
		height: 400px;
		text-align: center;
		transition: transform 0.8s;
		transform-style: preserve-3d;
	}

	.flip-card:hover .flip-card-inner {
		transform: rotateY(180deg);
	}

	.flip-card-front, .flip-card-back {
		position: absolute;
		width: 100%;
		height: 100%;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		border-radius: 20px;
	}

	.flip-card-front {
		&.flip-s2a {
			background-color: var(--lightOrange);
		}
		&.flip-allergeni {
			background-color: var(--blue);
		}
		&.flip-c2a {
			background-color: var(--red);
		}
	}

	.flip-card-back {
		background-color: var(--darkerGray);
		color: white;
		transform: rotateY(180deg);
	}
	/* Nasconde tutto quello che c'è dietro */
	.flip-card:hover .flip-card-front {
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease 0.4s, visibility 0s linear 0.2s;
  	}
	/* /flipcard */
/* /pagina prodotti */
/* contatti */
	#map1, #map2, #map3 {
		width: 100%;
		aspect-ratio: 1;
	}
	section.locations i {
		color: var(--lightOrange)
	}
/* /contatti */
/* mail ripetuta */
	section.repeated-mail .alert {
		max-width: 700px;
		& h1 {
			color: var(--orange);
		}
	}
/* /mail ripetuta */
/* errore mail */
	section.error-mail .alert {
		max-width: 700px;
		& h1 {
			color: var(--red);
		}
	}
/* /errore mail */
/* grazie mail */
	section.thanks-mail .alert {
		max-width: 700px;
		& h1 {
			color: var(--green);
		}
	}

/* /grazie mail */
/* login */
.login-container {
	max-width: 400px;
}
.login-square {
	padding: 20px;
	background: linear-gradient(270deg, rgba(255, 48, 18, 0.8), rgba(255, 127, 39, 0.8));
	border-radius: 25px;
}
/* /login */
/* footer */
	footer {
		font-size: 0.75rem;
	}
	footer .bigger {
		font-size: 1rem;
	}
	footer div.row.bordered {
		border-top: 1px solid rgba(255, 255, 255, 0.16);
		border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	}
	footer .text-dark {
		color: var(--red) !important;
	}
	footer a:hover {
		cursor: pointer;
		color: var(--red) !important;
		-webkit-transition: 0.3s;
		transition: 0.3s;
	}
	footer img.logo {
		height: 40px;
	}
	footer ul {
		list-style: none;
	}
	footer ul>li img {
		height: 40px;
	}
/* footer */