@import url('https://fonts.googleapis.com/css2?family=Livvic:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap');
/*
font-family: 'Livvic', sans-serif;
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
/*
font-family: 'Playfair Display', serif;
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
/*
font-family: 'DM Sans', sans-serif;
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/*
font-family: 'Poppins', sans-serif;
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/*
font-family: 'Roboto', sans-serif;
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
/*
font-family: 'Open sans', sans-serif;
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');
/*
font-family: 'Fraunces', serif;
*/

@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&display=swap');
/*
font-family: 'Albert sans', sans-serif;
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/*
font-family: 'Montserrat', sans-serif;
*/


:root{
    --primaryColor: #FB8E51;
	/* --primaryLight: #51BEFB; */
	--primaryLight: #70A0CC;
    --bgColor: #191919;
	/* --bgLight: #F3F6FA; */
	--bgLight: #F2F2F1;
    --textColor: #E8E8E8;
	--textLight: #222;
	--disabled: #B6B6B6;
    --font: 'Livvic', sans-serif;
	--transition: all .3s ease;
	--scrollbarThumbColor: #FB8E51;
	--scrollbarThumbHoverColor: #545655;
}


html, body{
	scroll-behavior: smooth;
	overflow-y: auto;
	height: auto;
	overflow-x: hidden;

}

html{
	font-size: 10px;
	cursor: url("/assets/img/cursore-dark.svg") 22 22, auto;
}
html.light{
	cursor: url("/assets/img/cursore-light.svg") 22 22, auto;
}

body{
	background-color: var(--bgColor);
	color: var(--textColor);
}
body.light{
	background-color: var(--bgLight);
}

a[href^="tel"] {
  text-decoration: inherit;
  color: inherit;
}

h1, h2, h3, h4, p{
	font-family: var(--font);
}

h1{
	font-size: 4rem;
	line-height: 1.2em;
	font-weight: 700;
	color: var(--primaryColor);
}
h1.light{
	color: var(--primaryLight);
}
h2{
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.2em;
	color: var(--primaryColor);
}	
h2.light{
	color: var(--primaryLight);
}
.h2Hero{
	color: var(--textColor);
}
.h2Hero.light{
	color: var(--textLight);
}
/* .h2SuDiMe{
	color: var(--primaryColor);
	font-size: 2.4rem;
	line-height: 1.5em;
}
.h2SuDiMe.light{
	color: var(--primaryLight);
	font-size: 2.4rem;
	line-height: 1.5em;
} */
h3{
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--textColor);
}	
h3.light{
	color: var(--textLight);
}
h4{
	font-size: 1.8rem;
	font-weight: 500;
}
h4.light{
	color: var(--textLight);
}	
p{
	font-size: 1.6rem;
	line-height: 1.7em;
	font-weight: 500;
}
p.light{
	color: var(--textLight);
}

.btn{
	border-radius: 8px;
	background-color: none;
	outline: 2px solid var(--primaryColor);
	color: var(--textColor);
	font-family: var(--font);
	font-weight: 700;
	font-size: 1.4rem;
	padding: 1.2rem 2.4rem;
	border: none;
	justify-content: center;
	max-width: auto;
}
.btn:hover{
	background-color: var(--primaryColor);
	color: var(--textLight);
	outline: none;
	cursor: url("/assets/img/cursore-dark-click.svg") 22 22, auto;
}
.btn.light{
	background-color: none;
	outline: 2px solid var(--primaryLight);
	color: var(--textLight);
}
.btn.light:hover{
	background-color:var(--primaryLight);
	outline: none;
	color: var(--textColor);
	cursor: url("/assets/img/cursore-light-click.svg") 22 22, auto;
}

.btnDark{
	border-radius: 8px;
	padding: 12px 24px;
	color: var(--primaryColor);
}	
.btnDark:hover{
	border-radius: 8px;
	padding: 12px 24px;
	background-color: #B8693D;
}	

#backToTop {
    position: fixed;
    left: 3rem;
    bottom: 3rem;
    width: 5rem;
    height: 5rem;
    border: none;
    border-radius: 50%;
    background-color: var(--primaryColor);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}
#backToTop.light{
	background-color: var(--primaryLight);
}
#backToTop.visible {
    opacity: 1;
    visibility: visible;
}

/* #backToTop img {
    width: 2rem;
    height: auto;
} */

.sezione{
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.6s ease-out;
}
.sezione.visible{
    opacity: 1;
    transform: translateY(0);
}

/* @keyframes fadeIn {
    to { opacity: 1; }
} */


/*  start header  */

.header{
	padding: 1rem 3.2rem;
	top: 0;
	left: 0;
	position: sticky;
	z-index: 10000;
}
/* #logoSM{
	color: var(--primaryColor);
} */
#logo img{
	height: 120px;
}
#logo a{
	cursor: url("/assets/img/cursore-dark-click.svg") 22 22, auto;
}
#logo a.light{
	cursor: url("/assets/img/cursore-light-click.svg") 22 22, auto;
}


.vociHeader{
    display: none;
}
.btnNavbar{
	color: #FFF;
	font-size: 1.6rem;
	font-family: var(--font);
	font-weight: 700;
	padding: 1rem 2rem;
}
.btnNavbar:hover{
	border-bottom: 3px solid var(--primaryColor);
	/* cursor: pointer; */
	cursor: url("/assets/img/cursore-dark-click.svg") 22 22, auto;
}
.btnNavbar.light{
	color: var(--textLight);
	font-size: 1.6rem;
	font-family: var(--font);
	font-weight: 700;
	padding: 1rem 2rem;
}
.btnNavbar:hover.light{
	border-bottom: 3px solid var(--primaryLight);
	cursor: url("/assets/img/cursore-light-click.svg") 22 22, auto;
}

#btnSwitch img{
	cursor: url("/assets/img/cursore-dark-click.svg") 22 22, auto;
}
#btnSwitch img.light{
	cursor: url("/assets/img/cursore-light-click.svg") 22 22, auto;
}
/*#btnSwitch{
	 width: 60px;
	height: 33px; */
	/* flex-shrink: 0; */
	/* border-radius: 100px;
	background: var(--primaryColor);
	margin-left: 20px;
	position: relative;
} */
/* #btnSwitch2{
	position: absolute;
	height: 16px;
	width: 16px;
	color: white;
	right: 5px;
} */

/*  start Menu mobile  */


#hamMenu{
	width: 3rem;
	height: 3rem;
	position: relative;
	/* margin-top: 1rem;
	margin-right: 1.5rem; */
	/* cursor: pointer; */
	cursor: url("/assets/img/cursore-dark-click.svg") 22 22, auto;
	/* z-index: 9999; */
}
#hamMenu.light{
	cursor: url("/assets/img/cursore-light-click.svg") 22 22, auto;
}
#hamMenu span{
	position: absolute;
	width: 100%;
	top: 50%;
	left: 0;
	height: 0.4rem;
	background-color: white;
	/* transform-origin: left; */
	transform-origin: center; 
	transition: var(--transition);
}
#hamMenu span.light{
	background-color: var(--textLight);
}
#hamMenu span:nth-of-type(1){
	transform: translateY(-0.5rem);
}
#hamMenu span:nth-of-type(2){
	/* top: 0.4rem; */
	transform: translateY(0.5rem);
}

#hamMenu.open span:nth-of-type(1){
    transform: rotate(45deg) translateY(0);
}
#hamMenu.open span:nth-of-type(2){
    transform: rotate(-45deg) translateY(0);
}


.no-scroll{
	overflow: hidden;
}
#menuMobile{
	position: fixed;
/*	display: none;*/
	z-index: 9;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100vh;
	background-color: var(--bgColor);
	transition: var(--transition);
}
#menuMobile.light{
	background-color: var(--bgLight);
}
#wrapperMenuMobile{
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	padding: 2.4rem;
    text-decoration: none;
}
#wrapperMenuMobile nav ul{
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}
#wrapperMenuMobile nav ul li{
    list-style-type: none;
    padding-left: 0;
}
#wrapperMenuMobile nav ul li a{
	font-family: var(--font);
	color: var(--textColor);
    text-decoration: none;
	font-size: 3rem;
    font-weight: 700;
	gap: 2.4rem;
}
#wrapperMenuMobile nav ul li a.light{
	font-family: var(--font);
	color: var(--textLight);
    text-decoration: none;
	font-size: 3rem;
    font-weight: 700;
	gap: 2.4rem;
}
.wrapperInfo{
	/* margin-top: 35rem; */
	display: flex;
    flex-direction: column;
    gap: 2rem;
}
.social{
    display: flex;
	flex-direction: row;
    gap: 2.5rem;
	padding: 0 3rem 0;
}
.social a{
	color: var(--textColor);

}
.social a.light{
	color: var(--textLight);
}
.social .fa-linkedin{
    font-size: 3rem; 
}

.social .fa-instagram{
    font-size: 3rem;
}

.social .fa-envelope{
    font-size: 3rem;
}

/* fine Menu mobile */
/*  fine header  */


/* inizio hero */
#hero{
	gap: 1.6rem;
	height: calc(100vh - 142px);
	padding: 0 3rem 0rem;
}
.fa-chevron-down{
	margin-top: 4rem;
	font-size: 4.5rem;
	color: var(--primaryColor);
}
.fa-chevron-down.light{
	color: var(--primaryLight);
}
/* fine hero */


/* inizio parte centrale */


#suDiMe{
	padding: 9rem 2.5rem;
	gap: 6rem;
}

#fotoPersonale{
	width: 100%;
}
#fotoPersonaleLight{
	width: 100%;
}
#testoSuDiMe{
	/* display: flex;
	flex-direction: column; */
	gap: 6rem;
}


/* .riga-1 {
	animation: scorri-sx 25s linear infinite !important;
	width: max-content !important;
	gap: 6rem;
}
  .riga-2 {
	animation: scorri-dx 25s linear infinite !important;
	width: max-content !important;
	gap: 6rem;
}
@keyframes scorri-sx {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
  
  @keyframes scorri-dx {
	0% { transform: translateX(-50%); }
	100% { transform: translateX(0); }
}
   */

.riga-1, .riga-2 {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: 6rem;

    will-change: transform;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

.riga-1 {
    animation: scorri-sx 25s linear infinite;
}

.riga-2 {
    animation: scorri-dx 25s linear infinite;
}

#competenze{
	padding: 9rem 2.5rem;
	gap: 3rem;
}
#filtriCompetenze{
	gap: 1.2rem;
}
@keyframes scorri-sx {
    from { transform: translate3d(0,0,0); }
    to   { transform: translate3d(-50%,0,0); }
}

@keyframes scorri-dx {
    from { transform: translate3d(-50%,0,0); }
    to   { transform: translate3d(0,0,0); }
}

/* #portfolio{
	padding: 9rem 3rem 30rem; 
	gap: 4.4rem;
	/* margin-bottom: 100px;
} */
#progetti{
	padding: 9rem 0;
	gap: 3rem;
}
.slider-container{
	padding-bottom: 3rem;
}
#anteprimaProgetti{
	display: flex;
	flex-direction: column;
}
#anteprimaProgetti img{
	width: 100%;
}
#anteprimaProgetti a:hover {
	cursor: url("/assets/img/cursore-dark-click.svg") 22 22, auto;
}
#anteprimaProgetti a:hover.light{
	cursor: url("/assets/img/cursore-light-click.svg") 22 22, auto;
}

.scrollMenu {
	display: flex;        
	gap: 2rem;
  }  
.scrollMenu a {
	flex: 0 0 50%; 
	scroll-snap-align: start;
	display: inline-block; 
}

/* Nasconde scrollbar (opzionale) */
.slider::-webkit-scrollbar {
	display: none;
  }
.slide {
	flex: 0 0 80%;
	scroll-snap-align: start;
  }  
/* fine parte centrale  */


/* scrollbar */

::-webkit-scrollbar {
    width: 9px;
}
/* 
::-webkit-scrollbar-thumb {
    background-color: var(--primaryColor);
}
body.dark-mode ::-webkit-scrollbar-thumb {
    background-color: var(--primaryColor);
}
::-webkit-scrollbar-thumb:hover {
    background-color: #B8693D;
}

body.light-mode ::-webkit-scrollbar-thumb {
    background-color: var(--primaryLight);
}

body.light-mode ::-webkit-scrollbar-thumb {
    background-color: #3D81A7;
} */

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbarThumbColor);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbarThumbHoverColor);
}
/* scrollbar */

/* preloader */


#preloader{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 10001;
    background-color: var(--bgColor);
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader{
	width: 40px;
	height: 60px;
	position: relative;
  }
  .loader::before,
  .loader::after{
	content: "";
	position: absolute;
	inset: 0;
	background: var(--primaryColor);
	clip-path: polygon(0 0,100% 0, 100% 67%,50% 67%,50% 34%,0 34%);
	animation: sp7 2s infinite;
  }
  .loader::after{
	--s:-1,-1;
  }
  @keyframes sp7{
	  0%,
	  10%  {transform:scale(var(--s,1)) translate(0,0)        rotate(0deg)}
	  33%  {transform:scale(var(--s,1)) translate(0,-20px)    rotate(0deg)}
	  66%  {transform:scale(var(--s,1)) translate(10px,-20px) rotate(-90deg)}
	  90%,
	  100% {transform:scale(var(--s,1)) translate(10px,-10px) rotate(-90deg)}
  }

/* preloader */


/* inizio pagina lavori */

.heroProgetto{
	padding: 6rem 3rem 9rem;
	width: 100%;
	background-color: var(--bgColor);
}
.heroProgetto.light{
	background-color: var(--bgLight);
}
.heroProgetto h3{
	color: var(--primaryColor);
}
.heroProgetto h3.light{
	color: var(--primaryLight);
}
.heroProgetto h1{
	color: var(--textColor);
}
.heroProgetto h1.light{
	color: var(--textLight);
}
#lineaPortfolio{
	border-top: 2px solid; border-image: linear-gradient(to right,#191919,#FB8E51 20%,#FB8E51 60%,#191919) 1;
}
#lineaPortfolio.light{
	border-top: 2px solid; border-image: linear-gradient(to right,#F2F2F1,#70A0CC 20%,#70A0CC 60%,#F2F2F1) 1;
}


/* .hero-text {
	position: relative;    
	text-align: center;      
	font-size: 2rem;
	font-weight: 700;
	color:  var(--primaryColor);  
}
  
.hero-text::before {
	content: '';            
	position: absolute;      
	top: -10px;             
	left: 50%;               
	transform: translateX(-50%); 
	width: 20rem;           
	height: 0.4rem;            
	background-color: var(--primaryColor);  
} */

  
/* .heroProgetto img{
	width: 80%;
	box-shadow: 1rem 1rem 0 0 var(--primaryColor);
}
.heroProgetto img.light{
	box-shadow: 1rem 1rem 0 0 var(--primaryLight);
} */
.copertinaProgetto img{
	width: 100%;
	height: auto;
	/* object-fit: cover; */
}
.infoProgetto{
	display: flex;
	padding: 9rem 2.5rem; 
	justify-content: center;
	gap: 10rem;
}
.infoProgetto h3{
	color: var(--primaryColor);
}
.infoProgetto h3.light{
	color: var(--primaryLight);
}


.sezioneFoto{
	padding: 0rem 2.5rem 9rem;
}
#altrePagine{
	gap: 3rem;
}
.fotoSito{
	padding: 9rem 0;
}
.fotoSito img{
	width: 90%;
	height: auto;
	/* object-fit: cover; */
}
.h4Progetto{
	color: var(--primaryColor)
}
.h4Progetto.light{
	color: var(--primaryLight);
}
.altriProgetti{
	/* padding: 9rem 3rem 30rem; */
	gap: 3rem;
	/* margin-bottom: 100px; */
}


.paletteSito{
	margin-top: 6rem;
}
.colorBox{
	width: auto;
	min-width: 22rem;
	height: 16.9rem;
	/* margin-top: 6rem; */
	border-radius: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: var(--font);
	font-size: 2.2rem;
	color: rgba(0, 0, 0, 0);
	font-weight: 600;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
}
.colorBox:hover{
	color: var(--textColor);
	transition: var(--transition);
}

.galleriaProgetto{
	gap: 8rem;
	padding: 16rem 3rem;
	margin-bottom: 100px;
}
.fotoGalleria{
	width: 60%;
	box-shadow: 0.8rem 0.8rem 0 0 var(--primaryColor);
}
.fotoGalleria.light{
	box-shadow: 0.8rem 0.8rem 0 0 var(--primaryLight);
}
.bannerFinale{
	background-color: var(--primaryColor);
	border-radius: 3rem;
	width: 100%;
	color: var(--textLight);
	padding: 6rem 3rem;
}
.bannerFinale h1, .bannerFinale h2, .bannerFinale h3{
	color: var(--textLight);
}
.bannerFinale h3{
	line-height: 2.6rem;
}
.bannerFinale.light{
	background-color: var(--primaryLight);
}
.altriProgetti{
	padding: 9rem 0rem;
}
/* fine pagina lavori */


/* ---- inizio filtri conoscenze ---- */

/* ---- button ---- */

.button {
	display: inline-block;
	padding: 8px 16px;
	margin-bottom: 10px;
	border: none;
	background: none;
	color: var(--textColor);
	font-family: 'Livvic', sans-serif;
	font-weight: 700;
	font-size: 16px;
	text-transform: capitalize;
	/* cursor: pointer; */
	cursor: url("/assets/img/cursore-dark-click.svg") 22 22, auto;
}
.button:hover{
	  text-decoration: underline;
	  text-decoration-color: var(--primaryColor);
	  text-decoration-thickness: 3px;
	  /* cursor: pointer; */
	  cursor: url("/assets/img/cursore-dark-click.svg") 22 22, auto;
	  transition: var(--transition);
}
.button.light{
	color: var(--textLight);
	cursor: url("/assets/img/cursore-light-click.svg") 22 22, auto;
}
.button:hover.light{
	text-decoration-color: var(--primaryLight);
	cursor: url("/assets/img/cursore-light-click.svg") 22 22, auto;
}
  
/* .button:active,
  .button.is-checked {
} */
  
.button.is-checked{
	color: var(--primaryColor);
}
.button.is-checked.light{
	color: var(--primaryLight);
}

.button:active {
	box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}
  
  /* ---- button-group ---- */

.button-group{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.button-group:after {
	content: '';
	display: block;
	clear: both;
}
  
.button-group .button {
	float: left;
	border-radius: 0;
	margin-left: 0;
	margin-right: 1px;
}
  
.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
  button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }
  
/* ---- isotope ---- */
  
/*.grid{
	padding: 9rem 3rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center; 
}*/
/* clear fix */

.grid{
	border: 1px solid white;
}
.grid:after {
	content: '';
	display: block;
	clear: both;
}
  
/* ---- .element-item ---- */

.element-item {
	/* position: relative;
	float: left; */
	width: 100px;
	height: 100px;
	/* margin: 5px;*/
	padding: 10px;
	display: flex;
	align-items: center; 
	justify-content: center;
	/* color: #262524; */
}
  
.element-item > * {
	margin: 0;
	padding: 0;
}
  
.element-item .symbol {
	display: flex;
	justify-content: center;
	align-items: center;
	/* font-size: 42px;
	font-weight: 700;
	color: white; */
}
.element-item .symbol img{
	max-width: 100%;
	max-height: 100%;
}
	/* ---- fine .element-item ---- */
  
  /* elementi */
  /* .element-item.video         { background: #F00; background: hsl(   0, 100%, 50%); }
  .element-item.lanthanoid      { background: #FF0; background: hsl(  72, 100%, 50%); }
  .element-item.actinoid        { background: #0F0; background: hsl( 108, 100%, 50%); }
  .element-item.grafica     { background: #0F8; background: hsl( 144, 100%, 50%); }
  .element-item.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
  .element-item.metalloid       { background: #08F; background: hsl( 216, 100%, 50%); }
  .element-item.diatomic        { background: #00F; background: hsl( 252, 100%, 50%); }
  .element-item.halogen         { background: #F0F; background: hsl( 288, 100%, 50%); }
  .element-item.noble-gas       { background: #F08; background: hsl( 324, 100%, 50%); } */
  
  /* ---- fine filtri competenze ---- */


/* ---- inizio form ---- */

#formContatto{
	width: 80%;
	margin: 0 auto;
	/* margin-top: 20px; */
	/* padding: 20px; */
	/* background-color: #1A1919; */
	/* border: 1px solid rgb(162, 195, 224); */
	/* border-radius: 5px;
	box-shadow: 0 0 3px 0 rgba(0,0,0,0.4);
	color: rgb(65, 105, 139); */
}
input#nome, input#email, input#numero, textarea#messaggio{
	padding: 5px;
	background: none;
	/* border-radius: 5px; */
	font-family: var(--font);
	border: none;
	border-bottom: 3px solid var(--primaryColor);
	color: white;
	font-size: 16px;
	font-weight: 500;
	width: 100%;
}
input#nome.light, input#email.light, input#numero.light, textarea#messaggio.light{
	color: var(--textLight);
	border-bottom: 3px solid var(--primaryLight);
}

textarea#messaggio{
	min-height: 60px;
	resize: none;
}
::placeholder{
	color: var(--textColor);
}
input.light::placeholder, textarea.light::placeholder{
	color: var(--textLight);
}
#formContatto label{
	display: block;
	/* margin-top: 10px; */
}
/* input#inviaMessaggio{
	background-color: rgb(65, 105, 139);
	border-radius: 5px;
	border: 1px solid rgb(65, 105, 139);
	padding: 6px 10px;
	color: white;
}
input#inviaMessaggio:hover{
	background-color: rgba(65, 105, 139.0);
	border: 1px solid rgb(65, 105, 139);
	color: rgb(65, 105, 139);
	cursor: pointer;
} */
.h1Form{
	font-family: var(--font);
	font-weight: 700;
	font-size: 3.6rem;
	color: var(--textColor);
}
.btnForm{
	border-radius: 8px;
	background-color: var(--primaryColor);
	color: var(--textLight);
	font-family: var(--font);
	font-weight: 700;
	font-size: 1.4rem;
	padding: 1.2rem 2.4rem;
	border: none;
	justify-content: center;
	max-width: auto;
}
.btnForm:hover{
	background-color: #B8693D;
	cursor: url("/assets/img/cursore-dark-click.svg") 22 22, auto;
}
.btnForm.light{
	background-color: var(--primaryLight);
	color: var(--bgLight);
}
.btnForm.light:hover{
	background-color: #3D81A7;
	cursor: url("/assets/img/cursore-light-click.svg") 22 22, auto;
}


/* checkbox */

input[type="checkbox"]{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	cursor: pointer;
	position: relative;
	outline: none;
	background-color: #FFF;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

input[type="checkbox"]:checked{
	background-color: var(--primaryColor); 
	border-color: var(--primaryColor);
	/* appearance: checkbox; */
}

input[type="checkbox"]:checked::after{
	content: '\2713';
	font-size: 16px;
	color: #FFF; 
	position: absolute;
	top: -2px;
	left: 3px;
}

input[type="checkbox"]:hover{
	background-color: #ABB5BE; 
	border-color: #ABB5BE;
}

input[type="checkbox"]:checked:hover{
	background-color: #B8693D;
	border-color: var(--primaryColor);
}


input[type="checkbox"].light {
    border-color: grey;
}
input[type="checkbox"].light:hover {
    background-color: #333; /* Colore all'hover in modalità light */
    border-color: #333;
}
input[type="checkbox"].light:checked {
    background-color: var(--primaryLight);
    border-color: var(--primaryLight);
}
input[type="checkbox"].light:checked::after {
    color: white;
}
/* fine checkbox */

/* ---- fine form ---- */


/* inizio footer */

.gabbiaFooter{
	gap: 9rem;
}
/* #logoFooter{
	width: 100px;
	height: 189px;
} */
.logoEsocial{
	gap: 6rem;
}
footer{
	background-color: var(--bgColor);
	border-top: 2px solid;
	border-image: linear-gradient(to right,#191919,#FB8E51 20%,#FB8E51 60%,#191919) 1;
	/* background-color: #0F0F0F !important; */
	/* background-color: #1A1919; */  /* da usare dopo ts particles */
	padding: 9rem 2.5rem;
}
footer.light{
	/* background-color: #E0EAF8 !important; */
	background-color: var(--bgLight);
	border-top: 2px solid;
	border-image: linear-gradient(to right,#F2F2F1,#70A0CC 20%,#70A0CC 60%,#F2F2F1) 1;
}
.socialFooter a{
	color: var(--primaryColor) !important;
}
.socialBanner{
	gap: 2.5rem;
}
.socialBanner a{
	color: var(--textLight) !important;
}
.socialBanner .fa-linkedin, .fa-instagram, .fa-envelope {
    font-size: 3rem; 
}

.socialFooter a.light{
	color: var(--primaryLight) !important;
}
.socialFooter{
	gap: 2.5rem;
}
.socialFooter .fa-linkedin, .fa-instagram, .fa-envelope{
    font-size: 3rem; 
}
/* .socialFooter .fa-instagram, .fa-instagram{
    font-size: 3rem;
}
.socialFooter .fa-envelope, .fa-envelope{
    font-size: 3rem;
} */

#subfooter{
	/* background-color: #0F0F0F; */
	/* border-top: 2px solid var(--primaryColor); */
	width: 100%;
	padding: 1rem;
}
#subfooter p{
	padding: 2rem;
	font-size: 1.6rem;
	align-content: center;
}
#subfooter a{
	color: var(--textColor);
	font-size: 1.6rem;
}
#subfooter a:hover{
	text-decoration: underline;
}

#subfooter.light{
	/* background-color: #E0EAF8; */
	/* border-top: 2px solid var(--primaryLight); */
	color: var(--bgColor);
}

#subfooter.light p,
#subfooter.light a {
    color: var(--bgColor);
}

/* fine footer */


/* inizio breakpoint */

@media(min-width:576px){
	#fotoPersonale{
		width: 40rem;
		height: 50rem;
	}
	#fotoPersonaleLight{
		width: 40rem;
		height: 50rem;
	}
	#suDiMe{
		padding: 9rem 3rem;
	}
	#competenze{
		padding: 9rem 3rem;
	}
	.infoProgetto{
		padding: 9rem 3rem;
	}
	#altrePagine{
		padding: 9rem 3rem;
	}
	.sezioneFoto{
		padding: 0 3rem 9rem;
	}
	.fotoSito{
		padding: 9rem 3rem;
	}
	#progetti{
		padding: 9rem 3rem;
	}
	.heroProgetto{
		padding: 9rem 3rem;
	}
	/* #anteprimaProgetti img{
		width: 36rem;
		height: 36rem;
	} */
}


@media(min-width:768px){
	h1{
		font-size: 5.5rem;
	}
	h2{
		font-size: 3.5rem;
	}
	/* .h2SuDiMe{
		font-size: 3.5rem;
		line-height: 5.5rem;
	} */
	h3{
		font-size: 2.8rem;
	}
	p{
		font-size: 1.8rem;
	}
	.header{
		padding: 1rem 6rem;
	}
	#logo{
		flex-grow: 1;
	}
	/* #hero{
		padding: 12rem;
	} */
	
	.socialFissi{
		/* display: flex;
		flex-direction: column; */
		gap: 1.6rem;
		position: fixed;
		z-index: 1;
		top: 200px;
		left: 40px;
	}
	.socialFissi a{
		color: var(--primaryColor);
		cursor: url("/assets/img/cursore-dark.svg") 22 22, auto;
	}
	.socialFissi a:hover{
		cursor: url("/assets/img/cursore-dark-click.svg") 22 22, auto;
	}
	.socialFissi a.light{
		color: var(--primaryLight);
		cursor: url("/assets/img/cursore-light.svg") 22 22, auto;
	}
	.socialFissi a:hover.light{
		cursor: url("/assets/img/cursore-light-click.svg") 22 22, auto;
	}
	.socialFissi .fa-linkedin{
		font-size: 3rem;
	}
	.socialFissi .fa-instagram{
		font-size: 3rem;
	}
	.socialFissi .fa-envelope{
		font-size: 3rem;
	}
	#suDiMe{
		padding: 9rem 6rem;
	}
	#progetti{
		padding: 9rem 6rem;
	}
	/* .heroProgetto{
		margin-top: 8rem;
	} */
	/* .heroProgetto img{
		width: 70%;
		box-shadow: 2rem 2rem 0 0 var(--primaryColor);
	}
	.heroProgetto img.light{
		box-shadow: 2rem 2rem 0 0 var(--primaryLight);
	} */
	/* #portfolio{
		padding: 9rem 3rem;
	} */
	/* #altrePagine{
		padding: 6rem;
	}
	.slide {
		flex: 0 0 45%;
	} */
	
	.infoProgetto{
		padding: 9rem 6rem;
	}
	.sezioneFoto{
		padding: 0 6rem 6rem;
	}
	.altriProgetti{
		padding: 6rem;
	}
	#competenze{
		padding: 9rem 6rem;
		/* gap: 4.4rem; */
	}
	.slider-container{
		padding-bottom: 6rem;
	}
	.grid{
		padding: 0 6rem;
	}
	.heroProgetto{
		padding: 6rem;
	}
	.fotoSito{
		padding: 6rem;
	}
	footer{
		padding: 12rem 3rem;
	}
}
@media(min-width:992px){
	p{
		font-size: 2rem;
	}.header{
		padding: 1rem 9rem;
	}
	.vociHeader{
        display: flex;
   }
   	#hamMenu{
		display: none;
	}
	#menuDesktop{
		flex-grow: 2;
		display: flex;
	}
	#hamMenu{
        display: none;
    }
	/* #hero{
		height: 100vh;
		padding: 32rem 16rem; 
	} */
	.fa-chevron-down{
		margin-top: 9rem;
	}
	#suDiMe{
		padding: 9rem;
	}
	#competenze{
		padding: 0 9rem 9rem;
	}
	#progetti{
		padding: 9rem;
	}
	#anteprimaProgetti{
		gap: 3.6rem;
	}
	.fotoGalleria{
		width: 321px;
		height: 100%;
	}
	.heroProgetto{
		padding: 9rem;
	}
	.infoProgetto{
		padding: 9rem;
	}
	.colorBox{
		width: 30rem;
		height: 23rem;
	}
	#altrePagine{
		padding: 9rem;
	}
	.fotoSito{
		padding: 9rem;
	}
	.fotoSito img{
		width: 80%;
		height: auto;
		/* object-fit: cover; */
	}
	.bannerFinale{
		padding: 9rem;
	}
	.sezioneFoto{
		padding: 0 9rem 9rem;
	}
	.altriProgetti{
		padding: 9rem;
	}
	footer{
		padding: 6.4rem 20rem 5.4rem;
	}
	.gabbiaFooter{
		padding: 0rem 20rem;
	}
	#formContatto{
		width: 500px;
		margin: 0 auto;
		/* margin-top: 20px; */
		/* padding: 20px; */
		/* background-color: #1A1919; */
		/* border: 1px solid rgb(162, 195, 224); */
		/* border-radius: 5px;
		box-shadow: 0 0 3px 0 rgba(0,0,0,0.4);
		color: rgb(65, 105, 139); */
	}
}
@media(min-width:1200px){
	/* #testoSuDiMe{
		padding: 10rem;
	} */
	#suDiMe{
		padding: 12rem;
	}
	h1{
		font-size: 7rem;
	}
	h2{
		font-size: 4.5rem;
	}
	h3{
		font-size: 3.2rem;
	}
	h4{
		font-size: 2rem;
	}
	.socialFissi{
		left: 80px;
	}
	/* #fotoPersonale{
		width: 75%;
		height: auto;
	} */
	#fotoPersonale{
		width: 30%;
		height: auto;
	}
	#competenze{
		padding: 12rem;
	}
	.slider-container{
		padding-bottom: 12rem;
	}
	.image-container{
		position: relative;
		display: inline-block;
		overflow: hidden;
    	line-height: 0;
	}
	.image-container img{
		display: block; 
		width: 50%;
		height: auto;

		transition: transform 0.4s ease;
	}
	.image-container:hover img{
		transform: scale(1.3);
	}

	.image-container a{
		display: block; 
		width: fit-content;
		line-height: 0;  
	}
	.scrollMenu a {
		flex: 0 0 700px; /* larghezza fissa delle slide */
		scroll-snap-align: start;
		display: inline-block; 
	}
	/* .overlay{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0; 
		transition: var(--transition);
	}
	.image-container:hover .overlay{
		opacity: 1;
	} */

	/* .slide {
		flex: 0 0 30%;
	}
	 */
	/* .heroProgetto{
		gap: 12rem;
	} */
	.heroProgetto{
		padding: 12rem;
	}
	.infoProgetto{
		padding: 12rem;
		display: flex;
		/* gap: 24rem; */
	}
	#altrePagine{
		padding: 12rem;
	}
	.sezioneFoto{
		padding: 0 12rem 12rem;
	}
	.altriProgetti{
		padding: 12rem;
	}
	.grid{
		padding: 0 15rem;
	}
	.fotoSito{
		padding: 12rem;
	}
	
@media(min-width:1400px){
	#testoSuDiMe{
		max-width: 1200px;
	}
	.heroProgetto{
		padding: 0 15rem 18rem; 
		padding-top: calc(18rem - 80px);
	}

	/* .h2SuDiMe{
		font-size: 4rem;
		line-height: 5.2rem;
		max-width: 1200px;
	}
	.h2SuDiMe.light{
		font-size: 4rem;
		line-height: 5.2rem;
		max-width: 1200px;
	} */
	#competenze{
		padding: 15rem 28rem 30rem;
		/* max-width: 1200px;
		margin: 0 auto; */
	}
	.slider-container{
		padding-bottom: 28rem;
	}
	#anteprimaProgetti{
		padding: 0rem;
	}
	.gabbiaFooter{
		gap: 30rem;
	}
	#progetti{
		padding: 12rem 24rem 12rem;
		/* max-width: 1200px;
		margin: 0 auto; */
	}
	.infoProgetto{
		padding: 15rem 24rem;
	}
	.colorBox{
		width: 22rem;
		height: 17.31rem;
	}
	#altrePagine{
		padding: 12rem 24rem;
	}
	.fotoSito{
		padding: 12rem 24rem;
	}
	.sezioneFoto{
		padding: 0 24rem 12rem;
	}
	.altriProgetti{
		padding: 24rem 12rem;
	}
}
@media(min-width:1500px){
	.colorBox{
		width: 24rem;
		height: 18rem;
	}
}
@media(min-width:1600px){
	.heroProgetto{
		padding: 0 18rem 18rem; 
		padding-top: calc(18rem - 80px);
	}
	
	.colorBox{
		width: 28rem;
		height: 22rem;
	}
}

}
/* fine breakpoint */