@import url(myfonts.css);

* {
  -webkit-text-size-adjust: none;
}

html, body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	overflow-x: hidden;
	max-width:100%;
	width:100%;
	color: #707070;
	font-family: 'Perpetua', Helvetica;
	font-style: normal;
	font-weight: 400;
	font-size: 30px;
	line-height: 40px;
}

/* stato globale per bloccare lo scroll quando l'hero è visibile */
body.no-scroll{
  overflow: hidden;
  height: 100vh;
}

/* Blocca solo lo scroll verticale (consentendo lo scroll orizzontale nei contenitori dedicati) */
body.no-vertical{
  overflow-y: hidden;
}

b, strong {
	font-family: 'Perpetua-Bold', Helvetica;
	font-weight: 700;
}


article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}



/* DESKTOP */

.panorama-wrapper {
	display:none;
}



.headerContainer{
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	height: 60px;
	z-index: 1;
}
	.headerContainer > .myheader {
		z-index: 1;
		background-color: #fff;
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		border: 1px solid #333;
		height: 60px;
	}
		.headerContainer > .myheader div {
			display: inline-block;
			height: 100%;
			padding: 7px 0;
		}
			.headerContainer > .myheader .mymenu > div > span {
				font-family: 'segoeui', Helvetica;
				font-size: 19px;
				cursor: pointer;
				background-color: transparent;
				padding: 0 10px;
				line-height: 20px;
				vertical-align: top;
			}	
			.headerContainer > .myheader .mymenu > div > span.headerVoiceFocus {
				font-family: 'segoeui', Helvetica;
				font-weight: 700;
			}
	.headerContainer > .myheader .mylogo {
		float: left;
		margin: 0 20px;
	}
		.headerContainer > .myheader .mylogo > img {
			height: 45px;
			display: inline-block;
			cursor: pointer;
		}
		.headerContainer > .myheader .mylogo > span {
			font-family: 'segoeui', Helvetica;
			font-size: 22px;
			cursor: pointer;
			height: 38px;
			margin-left: 10px;
			display: inline-block;
			vertical-align: top;
		}
	.headerContainer > .myheader .mymenu {
		float: right;
		margin: 0 20px;
	}
	
	.headerContainer > .myheader .menuMobileIcon{
		display: none;
		float: right;
		margin: 10px 20px;
	}
	.headerContainer > .myheader .menuMobileIcon > img{
		width: 30px;
	}
	
	
	
	
	/* ************************************************  */
	
	.hero-full {
	 position: relative;     /* per ancorare il ::before */
  width: 100vw;
  height: 100vh;
  background: url("../images/immagine-principale.png") center/cover no-repeat; /* fallback visivo */
  /* rimuovi anche: background-size: cover; */
  overflow: hidden;
	}
	
	/* L'immagine sta nel layer ::before che possiamo trasformare */
	.hero-full::before{
	  content: "";
	  position: absolute;
	  inset: 0;
	  background: url("../images/immagine-principale.png") center/cover no-repeat;

	  /* stato iniziale: ZOOM IN */
	  transform: scale(2);           /* quanto vuoi �zoomata� all�avvio */
	  transition: transform 1.8s ease;  /* animazione zoom */
	  will-change: transform;
	}
	
	/* al click metteremo questa classe ? ZOOM OUT */
	.hero-full.is-zoomed-out::before{
		transform: scale(1);
	}
	
	.chevronDown{
	  position: fixed;
	  /* bottom/right con rispetto del notch */
	  inset: auto
			 max(16px, env(safe-area-inset-right))
			 max(16px, env(safe-area-inset-bottom))
			 auto;

	  width:  clamp(44px, 5vw, 56px);  /* dimensione fluida */
	  height: clamp(44px, 5vw, 56px);

	  background-image: url("../images/circle-96.png");
	  background-repeat: no-repeat;
	  background-size: 100% 100%;
	  background-position: center;

	  z-index: 1000;
	  cursor: pointer;

	  background-color: transparent; /* niente colore sotto */
      border: none;  
	  
	  opacity: 0;               /* nascosta all'inizio */
	pointer-events: none;     /* non cliccabile */
	transition: opacity .6s ease;  /* fade-in quando la mostri */
	}
	
	
	/* Aggiungi nuova regola */
.chevronDown.is-visible{
  opacity: 1;
  pointer-events: auto;
}
	
	
.hero-full.swipe-up {
  background: none !important;
}

.hero-full.swipe-up::before {
  transform: translateY(-100%); /* sposta l�immagine fuori dallo schermo */                /* sfumata */
  transition: transform 1s ease, opacity 1s ease;
}

.hero-full.is-gone {
  display: none;
}


/* **************************************** */


.mobile-panorama-overlay{
	/* nascosto di default su desktop */
	display: none;
}

@media (max-width: 899px){
  .mobile-panorama-overlay{
    position: fixed;
    left: 0;
    right: 0;
    top: 60px; /* sotto l'header fisso */
    bottom: 0;
    background: #fff; /* fondo bianco durante la transizione */
    display: none; /* diventa block quando .is-visible */
    z-index: 1000; /* sopra tutto */
    overflow: hidden;
    cursor: pointer;
    touch-action: none;           /* evita scroll gestuale della pagina */
    overscroll-behavior: contain; /* blocca rubber-banding su mobile */
    border-top: 1px solid #333; /* mantieni la linea nera sotto l'header */
  }
  .mobile-panorama-overlay.is-visible{ display: block; }
  .mobile-panorama-overlay img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(2.0); /* centrato */
    transform-origin: 46.5% center; /* zooom centrato */
    width: auto;
    height: calc(100vh - 60px); /* copre l'area sotto l'header */
    object-fit: cover;
    transition: transform 3s ease, height 3s ease; /* anima anche l'altezza */
    will-change: transform;
  }
  /* stato zoom-out su click */
  .mobile-panorama-overlay.is-zooming-out img{
    transform: translate(-50%, -50%) scale(1);
    height: 250px; /* porta all'altezza della strip panoramica */
  }
}

.intro-frame{
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: clamp(16px, 3vw, 32px);
}

/* visibilità per intro-frame */
.intro-frame.is-hidden{ display:none; }
.intro-frame.is-visible{ display:flex; }

/* evita overflow verticale sulla quarta */
#fourth.intro-frame{ padding: 0; }

/* visibilità/flow per intro-frame */
.intro-frame.is-hidden{ display:none; }
.intro-frame.is-visible{ display:flex; }

/* la quarta schermata non aggiunge padding per evitare overflow verticale */
#fourth.intro-frame{
  padding: 0;
}

/* animazione swipe-left per la seconda schermata */
.intro-frame.swipe-left{
  transform: translateX(-100%);
  opacity: 0.8;
  transition: transform .8s ease, opacity .8s ease;
}

.intro-frame.is-gone{
  display: none;
}

/* Terza schermata: layout e animazioni */
.video-frame{
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: clamp(16px, 3vw, 32px);
  margin-top: 60px; /* evita che finisca sotto l'header fisso */
}

.video-frame.swipe-left{
  transform: translateX(-100%);
  opacity: 0.8;
  transition: transform .8s ease, opacity .8s ease;
}
.video-frame.is-visible{ display:flex; }
.video-frame.is-gone{ display:none; }

.video-frame.is-hidden{ display:none; }


.video-grid{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr; /* titolo sopra, video sotto */
  gap: clamp(12px, 2.2vw, 28px);
  align-items: center;
  justify-items: center;
}

.video-box{
  width: min(1200px, 96vw);
  margin: 0 auto;
}

.video-box video{
  width: 100%;
  height: auto;
  max-height: calc(100dvh - 60px - 110px); /* header + titolo/padding */
  display: block;
  cursor: pointer;
}

.video-text h2{
  margin: 8px 0 0 0;
  
  text-transform: uppercase;
  font-size: clamp(18px, 3.2vw, 44px);

  font-family: 'Perpetua Bold', Helvetica;
  font-style: normal;

  color: #707070;
  text-align: center;
}

.video-text{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.video-text h5{
	text-align: center;
	margin-top:20px;

	font-family: 'Perpetua Bold', Helvetica;
  font-style: normal;
  font-size: clamp(18px, 3.2vw, 20px);
}


/* Stati iniziali fuori dallo schermo */
.enter-from-right{
  transform: translateX(30%);
  opacity: 0;
}
.enter-from-left{
  transform: translateX(-30%);
  opacity: 0;
}

/* Stato visibile con transizione */
.is-in-view{
  transform: translateX(0);
  opacity: 1;
  transition: transform .8s ease, opacity .8s ease;
}



/* riquadro interno con sottile bordo grigio */
.intro-border{
  /*width: min(1200px, 100%);*/
  border: clamp(10px, 1.2vw, 16px) solid #138BE3; /* rettangolo azzurro */
  background: #fff;
  padding: clamp(16px, 3vw, 32px);
  /*margin: 0 auto; /* centrato */
  box-sizing: border-box;
}


/* versione grigia per la quarta schermata */
.intro-border.intro-gray{
  background: #707070;
}


/* griglia contenuti */
.intro-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 48px);
  align-items: center;
}

/* immagine sinistra */
.intro-photo img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  max-height: 70vh; /* evita che �sfori� in verticale */
}

/* testo grande a destra */
.intro-text h2{
  margin: 0;
  font-family: 'Perpetua Bold', Helvetica;
  font-size: 43px;
  font-style: normal;
  line-height: 1.15;
  /* grande ma fluido */
  
  text-align: right;
  color: #707070;
}


	

/* stile per la quarta: bordo azzurro, fondo grigio e testo bianco centrato */
#fourth .intro-border.intro-gray{ background:#707070; }
#fourth .intro-text h2{ color:#000; text-align:center; }
#fourth .intro-grid{ align-items:center; }

/* spaziatura superiore responsiva del riquadro della quarta rispetto alla barra */
#fourth .intro-border{ margin-top: clamp(12px, 2.5vh, 32px); }

/* ripristina un padding sensato nella quarta per evitare layout troppo compresso */
#fourth.intro-frame{ padding: clamp(12px, 3vw, 28px); }




/* Quinta schermata: layout responsive ispirato a index-old */
.final-frame{ background:#fff; }
.final-frame.is-hidden{ display:none; }
.final-frame.is-visible{ display:block; }

.final-white{
  background:#fff;
  padding: clamp(12px,3vw,28px);
}
.final-grid{
  display:grid;
  grid-template-columns: 480px 1fr;
  gap: clamp(16px,3vw,48px);
  align-items:center;
  /*min-height: 600px;*/
}
.final-image{
  background: url('../images/selezionata-6.png') center/cover no-repeat;
  width: 100%;
  height: 600px;
}
.final-text h2{
  font-family: 'Perpetua-Bold', Helvetica;
  font-size: clamp(34px,4.6vw,72px);
  line-height: 1.05;
  color: #030303;
  text-align: center;
  margin: 0;
}

.final-footer{
  background:#0055ff;
  border: 1px solid #707070;
  position: relative;
  min-height: 250px;
}
.final-footer-logo{
  background-image: url('../images/logo-principale.png');
  background-size: cover;
  position: absolute;
  width: 214px;
  height: 205px;
  bottom: 26px;
  left: 42px;
  cursor: pointer;
}
.final-footer-info{
  position: absolute;
  top: 60px;
  left: 276px;
  width: 816px;
  color: #030303;
  font-size: 30px;
  line-height: 30px;
  text-align: left;
}
.final-footer-right{
  position: absolute;
  top: 60px;
  right: 50px;
  width: 473px;
  text-align: right;
  color: #030303;
  font-size: 30px;
  line-height: 30px;
}
.final-footer span{ font-weight:700; font-size:38px; line-height:38px; }
.final-footer-btn{
  position: absolute;
  right: 100px;
  bottom: 60px;
  color: #030303;
  font-size: 36px;
  line-height: 36px;
  background: none;
  border: none;
  cursor: pointer;
}
.final-footer-btn img{ width: 50px; position: absolute; right:-52px; bottom:3px; }



.footerContainer{
	display: block;
	width: 100%;
	margin-top:20px;
	padding-top: 20px;
}

.footerContainer > .footer{
	background-color: #0055ff;
	border: 1px solid #707070;
	position: absolute;
	left: 0px;
	right: 0px;
	height: 250px;
}

.footerContainer > .footer > .footerLogo{
	background-image: url(../images/logo-principale.png);
	background-size: cover;
	position: absolute;
	width: 214px;
	bottom: 26px;
	left: 42px;
	height: 205px;
	cursor: pointer;
}

.footerContainer > .footer > .footerTesto1{
	background-color: transparent;
	top: 60px;
	color: #030303;
	height: 137px;
	left: 276px;
	font-size: 30px;
	line-height: 30px;
	position: absolute;
	text-align: left;
	text-wrap: wrap;
	width: 816px;
}

.footerContainer > .footer > .footerTesto2{
	background-color: transparent;
	top: 60px;
	color: #030303;
	font-size: 30px;
	height: 45px;
	line-height: 30px;
	position: absolute;
	right: 50px;
	text-align: right;
	text-wrap: wrap;
	width: 473px;
}

.footerContainer > .footer span {
	font-weight: 700;
	font-size: 38px;
	line-height: 38px;
}


/* Ottimizzazioni specifiche per la quinta schermata */
#fifth .final-white{ margin-top: 0; }
#fifth .final-image{ margin-left: clamp(8px, 4vw, 60px); }

/* Spazio superiore tra schermata 5 e barra menu */
#fifth{ margin-top: clamp(68px, 12vh, 120px); }


@media (max-height: 750px){
	/* su viewport bassi riduci l'altezza immagine per evitare overflow verticale */
	#fourth .intro-photo img{ max-height: 40vh; }
	#fourth .intro-grid{ gap: 12px; }
  }




@media (max-width: 899px){
	/* Solo la prima chevron (sotto la panoramica) */
	.chevronDown.chevron-under-pano{
		position: absolute; /* dentro il wrapper, sopra l'immagine */
		right: 8px;         /* angolo destro */
		bottom: 8px;        /* dentro l'immagine */
		z-index: 11;        /* sopra le frecce */
	}

	.hero-full {
		display:none;
	}




	.panorama-wrapper {
		display:flex;
		align-items: center;
		justify-content: center;
		width: 90%;
		max-width: 500px;
		margin: 0 auto; /* centra il contenitore */
		position: relative;
		box-sizing: border-box;
		min-height: calc(100vh - 140px); /* centra verticalmente nel viewport */
	}

	.panorama-scroll {
		width: 100%;
		margin: 0 auto;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-x; /* abilita pan orizzontale con il dito */
		display: inline-block;
	}

	/* Allinea l'effetto all'implementazione di shooting: immagine alta 250px, scorrevole */
	.panorama-scroll img{
		height: 250px;
		width: auto;
		display: inline-block;
	}

	.arrow {
		display: flex;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background: rgba(0,0,0,0.5);
		color: #fff;
		border: none;
		font-size: 30px;
		cursor: pointer;
		padding: 10px;
		z-index: 10;
	}

	.arrow.left {
		left: 10px;
	}

	.arrow:disabled {
		opacity: .4;
		pointer-events: none;
	}

	.arrow.right {
		right: 10px;
	}







	.final-grid{ grid-template-columns: 1fr; }
	.final-image{ height: 300px; background-size: contain; }
	.final-text h2{ font-size: clamp(28px,6vw,40px); }
	.final-footer{ min-height: 250px; }
	.final-footer-logo{ width:100px; height:96px; top:20px; bottom:auto; left:10px; }
	.final-footer-info, .final-footer-right{ left:10px; right:auto; top:120px; width:100%; font-size:20px; line-height:20px; text-align:left; }
	.final-footer span{ font-size:23px; line-height:23px; }
	.final-footer-btn{ left:10px; right:auto; bottom:10px; font-size:24px; line-height:24px; }
	.final-footer-btn img{ right:20px; bottom:15px; }

	#fifth .final-image{ margin-left: 0; }
	#fifth .final-white{ margin-top: 0; }


	#fourth .intro-grid{ grid-template-columns: 1fr; }
	#fourth .intro-border{ margin-top: clamp(12px, 2.5vh, 32px); }
	#fourth .intro-text h2{ text-align: center; }
	#fourth .intro-photo img{ width: min(560px, 100%); max-height: 42vh; margin: 0 auto; }

	.footerContainer > .footer > .footerLogo{
		width: 100px;
		height: 96px;
		bottom: unset;
		top: 20px;
		left: 10px;
	}
	.footerContainer > .footer > .footerTesto1, .footerContainer > .footer > .footerTesto2{
		font-size: 20px;
		line-height: 20px;
		width: 100%;
	}
	.footerContainer > .footer span {
	font-size: 23px;
	line-height: 23px;
	}
	.footerContainer > .footer > .footerTesto1{
		left: 10px;
		top: 120px;
		height: unset;
	}
	.footerContainer > .footer > .footerTesto2{
		left: 120px;
		top: 20px;
		height: unset;
		max-width: 100px;
	}



	.headerContainer > .myheader .mymenu {
		display: none;
		background-color: rgb(51, 51, 51);
		width: 100%;
		margin: 0px;
		color: rgb(255, 255, 255);
		text-align: center;
		border: 1px solid #fff;
	}
	.headerContainer > .myheader .mylogo {
		padding: 7px 0 0 0;
		margin: 0 20px 0 5px
	}
	.headerContainer > .myheader div {
		height: unset;
		padding: 0;
	}
	.headerContainer > .myheader .mymenu > div {
		display: block;
		border-bottom: 1px solid #fff;
		padding: 3px;
	}
	.headerContainer > .myheader .mymenu > div > span {
		vertical-align: unset;
		width: 100%;
		display: inline-block;
		height: 30px;
	}
	.headerContainer > .myheader .menuMobileIcon{
		display: block;
		position: absolute;
		right: 5px;
		margin: 0;
		top: 12px;
	}
	
	
	.footerContainer > .footer > .footerLogo{
		width: 100px;
		height: 96px;
		bottom: unset;
		top: 20px;
		left: 10px;
	}
	.footerContainer > .footer > .footerTesto1, .footerContainer > .footer > .footerTesto2{
		font-size: 20px;
		line-height: 20px;
		width: 100%;
	}
	.footerContainer > .footer span {
	  font-size: 23px;
	  line-height: 23px;
	}
	.footerContainer > .footer > .footerTesto1{
		left: 10px;
		top: 120px;
		height: unset;
	}
	.footerContainer > .footer > .footerTesto2{
		left: 120px;
		top: 20px;
		height: unset;
		max-width: 100px;
	}
	


	
	 .intro-grid{
    grid-template-columns: 1fr;  /* stack */
    text-align: center;
  }
  .intro-text h2{
    text-align: center;
    font-size: clamp(20px, 4.6vw, 34px);
  }
  .intro-photo img{
    max-height: 40vh;
    margin: 0 auto;
    width: min(560px, 100%);
  }

	/* video frame responsive */
	.video-grid{
		grid-template-columns: 1fr;
		text-align: center;
	}
	.video-text h2{ font-size: clamp(18px, 4.6vw, 30px); }
	.video-box{ width: 100%; }
	.video-box video{ width: 100%; }
	


	.video-text{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
	.video-text h2, .video-text h5{
		display: block;
		margin: 0;
		text-align: center;
	}

}



/* Viewport bassi: assicura che titolo+video stiano in pagina - correggo larghezze per evitare overflow */
@media (max-height: 750px){
  .video-frame{
    align-items: flex-start;
    padding: 12px;
    padding-top: 72px; /* assicura spazio sotto la barra (60px) + aria */
    margin-top: 60px; /* rispetta l'header fisso anche su viewport bassi */
  }
  .video-grid{ 
    gap: 12px; 
    grid-template-rows: min-content 1fr; /* titolo sopra, video prende il resto */
    justify-items: center; /* centra gli elementi nella griglia */
  }
  .video-text{
    min-height: 72px; /* riserva spazio fisso per il titolo */
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky; /* resta visibile sotto l'header */
    top: 60px;
    z-index: 1;
    background: #fff;
  }
  .video-text h2{
    font-size: clamp(14px, 2.8vh, 24px);
    margin: 6px 0 8px 0;
  }
  .video-box{ width: 100%; } /* prima 100vw: causava spinta a destra con padding */
  .video-box video{
    width: 100%; /* prima 100vw */
    max-height: calc(100dvh - 60px - 120px); /* header + titolo + padding top */
    height: auto;
    object-fit: contain;
    display: block;
  }
}
  
  /* Desktop larghi: più aria sopra il titolo della terza schermata */
  @media (min-width: 1250px){
	.video-frame .video-text h2{
	  margin-top: 28px;
	}
  }

/* ruota la chevron verso l'alto quando deve indicare scroll-up/fine */
.chevronDown.is-up{
	transform: rotate(180deg);
}




/* Animazione seconda schermata (intro): bordo da destra, poi riempimento bianco, poi contenuti */
.intro-frame .intro-border{ position: relative; overflow: hidden; }
.intro-frame .intro-border.enter-from-right{ transform: translateX(100%); opacity: 0; }
.intro-frame .intro-border.is-in-view{ transform: translateX(0); opacity: 1; transition: transform .8s ease, opacity .8s ease; }

/* pannello bianco che scorre sopra il bordo azzurro */
.intro-frame .intro-border::after{
	content: "";
	position: absolute;
	inset: clamp(16px, 3vw, 32px);
	background: #fff;
	transform: translateX(100%);
	transition: transform .6s ease .2s;
	display: none;
}
.intro-frame .intro-border.white-in::after{ transform: translateX(0); }

/* contenuti (immagine + testo) insieme */
.intro-frame .intro-grid.enter-in{ opacity: 0; transform: translateY(20px); }
.intro-frame .intro-grid.is-in-view{ opacity: 1; transform: translateY(0); transition: transform .6s ease, opacity .6s ease; }

/* assicurare che i contenuti (immagine+testo) stiano sopra il riempimento bianco */
.intro-frame .intro-border{ position: relative; overflow: hidden; }
.intro-frame .intro-border::after{ z-index: 0; }
.intro-frame .intro-grid{ position: relative; z-index: 0; }


/* Terza schermata: testo (h2+h5) da destra, video da sinistra */
.video-frame .video-text.enter-from-right{ transform: translateX(30%); opacity: 0; }
.video-frame .video-text.enter-from-right.is-in-view{ transform: translateX(0); opacity: 1; transition: transform .8s ease, opacity .8s ease; }

.video-frame .video-box.enter-from-left{ transform: translateX(-30%); opacity: 0; }
.video-frame .video-box.enter-from-left.is-in-view{ transform: translateX(0); opacity: 1; transition: transform .8s ease, opacity .8s ease; }

/* Popup informativo chevron */
.chevron-popup{
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.chevron-popup.is-visible{
	opacity: 1;
	pointer-events: auto;
}
.chevron-popup-content{
	background: #fff;
	padding: clamp(20px, 4vw, 32px);
	border-radius: 12px;
	max-width: min(90vw, 500px);
	position: relative;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	text-align: center;
}
.chevron-popup-content p{
	margin: 0;
	margin-top: 10px; /* spostato 10px più in basso */
	font-family: 'Perpetua', Helvetica;
	font-size: clamp(18px, 3vw, 24px);
	color: #707070;
	line-height: 1.4;
}
.chevron-popup-close{
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	color: #707070;
	font-size: 24px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background 0.2s ease;
}
.chevron-popup-close:hover{
	background: rgba(0, 0, 0, 0.1);
}