@import url("https://fonts.googleapis.com/css2?family=Averia+Sans+Libre:wght@300;400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap");

:root {
  --redgate: #aa0404;
  --redgate_opa20: #aa040433; /* redgate, opacity 20% */
  --redgate_opa50: #aa040480; /* redgate, opacity 50% */
  --redgate_dark25: #7f0303; /* redgate 25% darker */
  --redgate_light66: #fc8f8f; /* redgate 66% lighter */
  --redgate_light90: #fedede; /* redgate 90% lighter */
  --cornflower: #6495ed;
  --cornflower_dark25: #1a62e2; /* cornflower 25% darker */
  --cornflower_dark42: #144caf; /* cornflower 42% darker */
  --cornflower_dark66_opa40: #0c2c6766; /* cornflower 66% darker, opacity 40% */
  --cornflower_dark66: #0c2c67; /* cornflower 66% darker */
  --cornflower_dark75: #09214b; /* cornflower 75% darker */
  --cornflower_dark75_opa20: #09214b33; /* cornflower 75% darker, opacity 20% */
	--cornflower_dark80: #071a3c; /* cornflower 80% darker */
  --cornflower_dark80_opa88: #071a3ce0; /* cornflower 80% darker, opacity 88% */
  --cornflower_light10: #73a0ef; /* cornflower 10% lighter */
  --cornflower_light50: #b1caf6; /* cornflower 56% lighter */
  --cornflower_light50_opa50: #b1caf680; /* cornflower 80% darker, opacity 50% */
  --cornflower_light75: #d8e4fa; /* cornflower 75% lighter */
  --cornflower_light80: #e0eafb;  /* cornflower 80% lighter */
  --cornflower_light90: #eff4fd; /* cornflower 90% lighter */
  --whatsapp: #25d366 /* green whatsapp */
}

* {
	font-family: "Atkinson Hyperlegible", cursive;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none;
	border: none;
	text-decoration: none;
	transition: all .4s linear;
	vertical-align: baseline;
}
*::selection {
  background-color: var(--redgate);
  color: var(--cornflower_light90);
}

html {
  font-size: 6.25%;
  overflow-x: hidden;
  scroll-padding-top: 60rem;
  scroll-behavior: smooth;
  background-color: var(--cornflower_light80);
}

body.is-preload #knowUs {
	transform: translateY(48rem);
}

body.content-active #main:not(#knowUs),
body.content-active #header {
	filter: blur(8px);
}

body.is-preload #main .entrance {
	opacity: 0;
}

::-webkit-scrollbar {
  width: 0px;
}

/* header */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64rem;
  padding: 0 8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--cornflower_dark80);
  transform: translateY(-100%);
  transition: transform .8s ease;
  z-index: 999;
}
header.animate {
  transform: translateY(0);
}
header img {
  height: 24rem;
  padding-right: 8rem;
}
header p {
  font-size: 12rem;
}
header .logo {
  font-family: "Averia Sans Libre", cursive;
  font-size: 24rem;
  font-weight: bolder;
  color: var(--cornflower_dark80);
  text-transform: uppercase;
  padding: 4rem;
}
header .logo span {
  font-size: 150%;
  color: var(--redgate);
}
header .navbar a {
  color: var(--cornflower_dark80);
  font-size: 16rem;
  text-transform: uppercase;
  padding: 4rem 8rem;
  border-radius: 16rem;
}
header .navbar a:hover {
  color: var(--cornflower_light80);
  background-color: var(--redgate);
}

header #menu-bar {
  color: var(--cornflower_dark80);
  border: 1.6rem solid var(--cornflower_dark80);
  border-radius: 4rem;
  font-size: 28rem;
  padding: 4rem 12rem;
  cursor: pointer;
  display: none;
}

/* main knowUs section */
#knowUs {
  position: fixed;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  line-height: 32rem;
  margin: 0 !important;
  padding: 0 !important;
	font-size: 12rem;
  z-index: 10002;
}
#knowUs a {
  padding: 0 8rem;
	text-transform: uppercase;
  letter-spacing: 1.2rem;
  color: var(--cornflower_light80);
  background-color: var(--redgate);
  font-weight: bold;
  border-radius: 64rem;
}
#knowUs a:hover {
  color: var(--cornflower_light80) !important;
  background-color: var(--redgate) !important;
}

/* main banner section */
#banner {
  height: 64rem;
}

/* main hero section*/
section.hero {
  padding: 0 148rem;
  margin-bottom: 44rem;
}

section.hero .heading {
  text-align: center;
  padding: 20rem 0 48rem 0;
}
section.hero .heading span {
  font-family: "Averia Sans Libre", cursive;
  font-size: 28rem;
  background: var(--redgate_opa20);
  color: var(--redgate);
  border-radius: 12rem;
  padding: 8rem 8rem;
  text-transform: uppercase;
}
section.hero .heading span.space {
  background: none;
}

/* footer */
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-height: calc(80vh - 4rem);
	position: fixed;
	bottom: 0;
	padding: 16rem 8%;
	overflow-y: auto;
	transform: translateY(100vh);
	transition: transform 1.2s ease;
	background-color: var(--cornflower_dark80);
}
footer h2 {
  margin-bottom: 4rem;
  color: var(--cornflower_light90);
  font-size: 16rem;
	font-weight: 400;
	letter-spacing: 4rem;
	text-transform: uppercase;
}
footer p {
  font-size: 13.6rem;
  color: var(--cornflower_light50);
  text-align: justify;
}
footer a {
	border-bottom: dotted .8rem;
	color: var(--cornflower_light90);
	text-decoration: none;
}
footer a:hover {
	border-bottom-color: transparent;
	color: var(--redgate_light66) !important;
}

footer span {
	color: var(--redgate);
	font-weight: bolder;
	font-size: 160%;
}
footer strong {
	color: var(--cornflower_light90);
	font-weight: 800;
	font-size: 120%;
}

footer.active {
	transform: translateY(0);
}

footer .panels {
  display: flex;
  flex-direction: row;
}
footer .panels > div {
	width: 50%;
}
footer .panels .panel {
  display: flex;
  flex-direction: column;
}
footer .panels .leftish {
	margin-right: 16rem;
  margin-top: 4rem;
}
footer .panels .rightish {
	margin-left: 16rem;
}

footer .leftish p {
	margin-bottom: 16rem;
}

/* Stile del pop-up (nascosto di default) */
footer .popup {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 960rem;
  min-height: 280rem;
  background-color: var(--cornflower_dark80);
  padding: 8rem 4rem 0rem 4rem;
  border: 4rem solid var(--cornflower);
  border-radius: 16rem;
  z-index: 1000;
  flex-direction: row;
}
/* Sfondo scuro dietro il pop-up */
footer .popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--cornflower_dark80_opa88);
  z-index: 999;
}
/* Contenitore immagine e testo divisi in due parti */
footer .popup img {
  width: 25%; /* La foto occupa il 50% della larghezza */
  height: 100%;
  object-fit: cover; /* Ritaglia l'immagine se necessario per riempire lo spazio */
  position: relative;
  border-radius: 48%;
  top: 16rem;
}
footer .popup .popup-content {
  width: 75%; /* Il testo occupa il 50% della larghezza */
  padding: 4rem 8rem;
  box-sizing: border-box;
}
footer .popup .popup-content em {
  font-family: "Averia Sans Libre", cursive;
  font-size: 12rem;
}
/* Bottone per chiudere il pop-up */
footer .close-btn {
  float: right;
  position: relative;
  top: -16rem;
  font-size: 20rem;
  cursor: pointer;
  color: var(--cornflower_light50);
}

footer .icons {
	margin-bottom: 16rem;
}
footer .icons a {
  margin-top: 4rem;
	padding-right: 12rem;
	font-size: 17.6rem;
}
footer .icons a.icon {
	color: var(--cornflower_light10);
}

footer .icon {
	font-family: "Font Awesome 5 Brands";
	border-bottom-color: transparent;
}
footer .icon .label {
	display: none;
}

footer .tcpp {
  display: inline;
  font-size: 12rem;
  position: relative;
  left: -4rem;
}
footer .tcpp a {
  margin: 4rem;
}
footer .panels .rightish h2 {
  text-align: center;
	font-weight: bold;
	border-radius: 16rem 16rem 0 0;
  padding-bottom: 4rem;
  margin-bottom: 0;
	color: var(--cornflower_dark80);
  background-color: var(--cornflower_light80);
}
footer .panels .rightish .reasons {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
footer .panels .rightish .reasons input[type="radio"] {
  display: none;
}
footer .panels .rightish .reasons .reasons-labels {
  width: 100%;
  background-color: var(--cornflower_light80);
  padding: 8rem;
  display: flex;
  justify-content: space-between;
  position: relative; /* SERVE PER IL GLIDER */
}
footer .panels .rightish .reasons .reasons-labels label {
  width: calc(25% - 8rem);
  height: 32rem;
  padding: 0 4rem;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: var(--cornflower_dark25);
  border-radius: 48rem;
}
footer .panels .rightish .reasons .reasons-labels label p {
  color: var(--cornflower_light80);
  z-index: 4;
}
footer .panels .rightish .reasons .reasons-labels label:hover {
  background-color: var(--cornflower_light10);
}
footer .panels .rightish .reasons .reasons-labels label p:hover {
  color: var(--redgate);
}
footer .panels .rightish .reasons .reasons-labels .glider {
  position: absolute;
  top: 8rem;
  left: 8rem;
  background-color: var(--cornflower_dark80);
  width: calc(25% - 8rem);
  height: 32rem;
  border-radius: 48rem;
  transition: ease-in-out .4s;
  z-index: 3;
}

footer #innovation:checked ~ .reasons-labels label[for="innovation"] p,
footer #passion:checked ~ .reasons-labels label[for="passion"] p,
footer #quality:checked ~ .reasons-labels label[for="quality"] p,
footer #sustainability:checked ~ .reasons-labels label[for="sustainability"] p {
  color: var(--cornflower_light80) !important;
}

footer #passion:checked ~ .reasons-labels .glider {
  transform: translateX(calc(100% + 8rem));
}
footer #quality:checked ~ .reasons-labels .glider {
  transform: translateX(calc(200% + 12rem));
}
footer #sustainability:checked ~ .reasons-labels .glider {
  transform: translateX(calc(300% + 16rem));
}

footer #innovation:checked ~ .reasons-content .innovation,
footer #passion:checked ~ .reasons-content .passion,
footer #quality:checked ~ .reasons-content .quality,
footer #sustainability:checked ~ .reasons-content .sustainability {
  display: block;
}

footer .panels .rightish .reasons .reasons-content {
  min-height: 128rem;
  padding: 8rem;
  border-radius: 0 0 32rem 32rem;
  border: 4rem solid var(--cornflower_light80);
  color: var(--cornflower_dark80);
}
footer .panels .rightish .reasons .reasons-content > div {
  display: none;
}

footer .btn-container {
	display: flex;
  flex-direction: column;
  margin-top: 8rem;
}
footer .btn-container a {
  width: 100%;
  margin: 4rem auto;
  color: var(--cornflower_light90);
  background-color: var(--cornflower_dark25);
  border-color: var(--cornflower_dark25);
  font-size: 16rem;
	text-transform: uppercase;
  text-align: center;
}
footer .btn-container a:hover {
  color: var(--cornflower_dark25) !important;
}

footer .copyright {
  text-align: center;
  padding-top: 16rem;
}

footer .closer {
  transition: opacity 0.4s ease-in-out;
  background-image: url("../images/default/close.svg");
  background-size: 32em;
  background-position: 75% 25%;
  background-repeat: no-repeat;
  cursor: pointer;
  width: 64rem;
  height: 64rem;
  opacity: 0.32;
  position: absolute;
  right: 0;
  top: 0;
}
footer > .closer:hover {
  opacity: 1.0;
}

/* BUTTONS */

.btn, .neon {
  position: relative;
  display: inline-block;
  margin-top: 12rem;
  padding: 8rem 32rem;
  color: var(--cornflower_light75);
  border: 1rem solid var(--redgate);
  border-radius: 8px;
  cursor: pointer;
  font-size: 17.2rem;
  text-transform: uppercase;
  overflow: hidden;
}
.btn {
  background: var(--redgate);
}
.btn:hover {
  color: var(--redgate);
  background: var(--redgate_opa20);
}

.neon {
  background: var(--redgate_opa50);
}
.neon:hover {
  color: var(--redgate);
  background: var(--cornflower_light75);
  box-shadow: 0 0 10px var(--cornflower_light75), 0 0 40px var(--cornflower_light75), 0 0 80px var(--cornflower_light75);
  transition-delay: .8s;
  border-color: var(--cornflower_light75);
  opacity: 100%;
}
.neon span {
  position: absolute;
  display: block;
}
.neon span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg,transparent,var(--cornflower_light75));
}
.neon:hover span:nth-child(1) {
  left: 100%;
  transition: .4s;
}
.neon span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg,transparent,var(--cornflower_light75));
}
.neon:hover span:nth-child(2) {
  top: 100%;
  transition: .4s;
  transition-delay: 0.25s;
}
.neon span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 4px;
  background: linear-gradient(270deg,transparent,var(--cornflower_light75));
}
.neon:hover span:nth-child(3) {
  right: 100%;
  transition: .4s;
  transition-delay: 0.5s;
}
.neon span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg,transparent,var(--cornflower_light75));
}
.neon:hover span:nth-child(4) {
  bottom: 100%;
  transition: .4s;
  transition-delay: 0.75s;
}

/* button hero section */
.cta-button {
  background-color: var(--cornflower_light50);
  color: var(--redgate);
  padding: 8rem 20rem;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 8rem;
  display: inline-block;
  margin-top: 12rem;
  transition: background-color 0.4s ease;
  font-size: 16rem;
}
.cta-button:hover {
  background-color: var(--redgate);
  color: var(--cornflower_light75);
}