@font-face{
	font-family: "Montserrat";
	src: url(../fonts/Montserrat-Regular.ttf);
}

@font-face{
	font-family: "Montserrat-Light";
	src: url(../fonts/Montserrat-Light.ttf);
}

@font-face{
	font-family: "Montserrat-Bold";
	src: url(../fonts/Montserrat-Bold.ttf);
}

@font-face{
	font-family: "Montserrat-ExtraBold";
	src: url(../fonts/Montserrat-ExtraBold.ttf);
}

body{
	font-family: "Montserrat", sans-serif;		
	--color-rosa: /*#C50E51;*/	#C50B4F;
	--color-grigio: #E7E3DD;
	--color-nero: #0F0F0F;
	background-color: #F6F1ED;	
	color: #000;
	font-size: 18px;
	text-align: justify;
}

header{
	background-color: #F6F1ED;
	padding: 0.7em 0;
}

/* stili titolo e vari */
h1{
	font-family: "Montserrat-ExtraBold";
	font-size: clamp(2em, 5vw, 5em);
	background: -webkit-linear-gradient(4deg, #3D88C1, #C50B4F 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
	text-align: left;
	line-height: 1.1em;
}

a{
	color: #000;
	text-decoration: none;
}

a:hover, a:active{
	text-decoration: underline;
}

@media (min-width: 1500px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1280px;
    }
}

@media (min-width: 1900px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1500px;
    }
}

@media (max-width: 768px){
	body{
		font-size: 18px;
		text-align: left;
	}
}


/* header e menu */
#logo{
	width: 350px;
}

.testata > div:nth-child(2){
	display: flex;
	justify-content: center;
}

@media (max-width: 768px) {
	#logo{
		display: inline-block;
		width: auto;
		height: 75px;
		vertical-align: middle;
	}
	
	#navbarSupportedContent > ul > li:first-child{
		margin-top: 1em;
		border-top: 1px solid;
	}
	
	.testata{
		flex-direction: column-reverse;
	}
	
	.testata img{
		max-width: 90%;
	}
}

nav{
	font-size: 0.9em;
	font-family: "Montserrat-Light";
	font-weight: bold;
}

main > div > div:nth-of-type(2){
	margin-top: 4em;
}

@media (max-width: 768px){
	main > div > div:nth-of-type(2){
		margin-top: 3em;
	}
}

.dropdown-menu{
	/*background-color: #F6F1ED;*/
}

/* modifico i margin e padding predefiniti sui nav-link per avere la linea rosa di bordo larga quanto il testo */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
		padding-right: 0;
		padding-left: 0;
        margin-right: var(--bs-navbar-nav-link-padding-x);
        margin-left: var(--bs-navbar-nav-link-padding-x);
    }
}

/* modifico il colore testo menu predefinito impostandolo nero come il resto del corpo */
.nav-link{
	color: #000;
}

.nav-link.active, .nav-link:hover{
	border-bottom: 3px solid var(--color-rosa);
	text-decoration: none;
	color: #000;
}

.nav-item {
	padding-left: 5px;
	padding-right: 5px;
}

.navbar > div{
	padding: 0;
}


/* classe per gli elementi titolo, anche se non sono hx */
.title{
	font-family: "Montserrat-ExtraBold";
	font-size: 2em;
	line-height: 1.2em;
	text-align: left;
	margin-bottom: 1em;
}

/* testi di colore bianco */
.white{
	color: #fff;
}

/* bandone grigio più marcato */
.bck_grey{
	background-color: var(--color-grigio);
	margin: 3em auto;
	padding: 3em 0;
}

/* bandone nero per pagina sviluppo */
.bck_nero{
	background-color: var(--color-nero);/*var(--color-rosa);*/
	margin: 3em auto;
	padding: 3em 0;
}


.sottotitolo{
	margin-top: 2em;
	font-family: "Montserrat-Bold";
	font-size: 1.1em;
}

@media (max-width: 768px) {
	h1{
		font-size: 2.5em;
		margin-top: 1.1em;
	}
	
	.title{
		font-size: 1.9em;
	}
}

/* elenchi con punto elenco a immagine e font di base bold */
main ul {
	font-family: "Montserrat-Bold";
	padding-left: 0;
}

main ul li{
	margin-top: 0.3em;
	list-style: none;
	background-image: url('../img/img_list.svg');
	background-repeat: no-repeat;
	background-size: 1.3em;
	padding-left: 1.7em;
}

/* linea di separazione tra titolo e contenuto */
hr{	
	all: unset;
	width: 200px;
	display: block;
	height: 5px;
	border: 0px;
	/*border-top: 4px solid #000;*/
	background-image: url(../img/linea.png);
	background-position: right;
}

@media (max-width: 768px){
	hr{
		margin: 20px auto 0px auto;
	}
}


/* fascia con sfondo a immagine sfumata */
.bck_color{
	color: #fff;
	background-image: url(../img/BandoneHome_desktop.png);
	background-size: cover;
	background-position: center;
	padding: 3em 0;
	margin: 4em 0;
}

@media (max-width: 768px){
	.bck_color{
		padding: 2.5em 0;
		margin: 2em 0;
	}
}

/* bandone in home page */
#bnd_home .row > div{
	width: 90%;
}

#bnd_home span:first-child{
	font-size: clamp(2.4em, 3vw, 3.2em);
	font-family: "Montserrat-Bold";
}

#bnd_home span:last-child{
	font-family: "Montserrat-Light";
	font-size: clamp(2em, 2.6vw, 2.8em);
	margin-left: 15%;
}

@media (max-width: 768px){
	
	#bnd_home{
		padding: 2em 0;
		margin: 2em 0;
		background-image: url(../img/BandoneHome_mobile.png);
	}
	
	#bnd_home span:first-child{
		font-size: 2.2em;
		line-height: 1.2em;
	}
	
	#bnd_home span:last-child{
		font-size: 1.9em;
		margin-left: 0;
		line-height: 1.2em;
	}
	
}

/* blocco servizi in home page */
#servizi > div > div {
	display: flex;
	justify-content: space-between;
}

@media (max-width: 768px){
	#servizi > div > div {
		display: block;
	}
}

/* box grigi con bordo arrotondato */
.box{
	background-color: #E8E2DD;
	border-radius: 25px;
	padding: 35px 30px;
	width: 47%;
	display: flex;
	flex-direction: column;
	color: #000;
	text-align: left;
}

@media (max-width: 768px){
	.box{
		width: 100%;
		height: auto;
		margin-top: 2em;
	}
}

/* la sezione con i servizi in home page */

#servizi .box > div{
	display: flex;
	justify-content: space-between;
}

#servizi .box img{
	max-width: 15%;
	height: auto;
	object-fit: contain;
}

#servizi .box ul{
	padding-bottom: 50px;
}

#servizi .box li{
	margin-bottom: 1.5em;
}

#servizi .box ul p:first-of-type{
	margin-bottom: 0;
}

#servizi .box ul p:last-of-type{
	font-family: "Montserrat";
}


@media (max-width: 768px){
	#servizi .box > div{
		flex-direction: column-reverse;
		text-align: center;
	}
	
	#servizi .box img{
		max-width: 25%;
		margin: auto auto 2em auto;
	}
	
	#servizi .box ul{
		list-style: none;
		padding-bottom: 0;
	}
	
	#servizi .box li{
		background-image: none;
		padding-left: 0;
	}
	
	#servizi .box .title{
		text-align: center;
	}
	
	#servizi .box ul p:first-of-type{
		margin-top: 1em;
		font-size: 1.1em;
	}


}

/* bottoni rosa */
.btn,a.btn:hover, a.btn:active{
	display: block;
	background-color: var(--color-rosa);
	color: #fff;
	border-radius: 40px;
	padding: 5px 20px;
	font-size: 1.1em;
	min-width: 30%;
}

.box .btn{
	margin-top: auto !important;
}


/* footer */
footer{
	margin-top: 3em;
	padding: 3em 0;
	background-color: var(--color-nero);
	font-size: 0.8em;
	line-height: 1.5em;
}

footer p, footer a, footer a:hover, footer a:active{
	color: #fff;
}


footer > div > div > div > div:first-child{
	display: flex;
	align-items: flex-start;
}

footer > div > div > div{
	display: flex;
	justify-content: space-between;
}

footer img{
	width: 14%;
	height: auto;
	object-fit: contain;
	margin-right: 20px;
}

@media (max-width: 768px){
	
	footer img{
		margin-right: 0px;
		display: none;
	}
	
	footer > div > div div {
		display: block !important;
	}
	
}

/* griglia di 3 elementi per riga */
.grid{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.grid > *{
	width: 30%;
}

@media (max-width: 768px){
	.grid > *{
		width: 100%;
		margin-bottom: 1.5em;
	}
}

/* PAGINA CORSI */

/* certificato MOS in pagina corsi */
#mos{
	max-width: 70%;
	margin-bottom: -5em;
}

/* riquadri in pagina corsi */
.corsi{	
	font-family: "Montserrat-Bold";
	justify-content: center;
}

.corsi .title{
	font-size: 1.6em;
	margin-bottom: 0.8em;
}

.corsi .box{
	height: auto;
	margin: 1em;
	cursor: pointer;
	padding: 25px 30px;
}

.corsi .box > div:last-child{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 1em;
}

.corsi .box > div:last-child p{
	margin-bottom: 0;
}

.corsi .box > div:last-child p:first-of-type{
	color: var(--color-rosa);
	font-size: 1.4em;
}

.corsi .box > div:last-child p:last-of-type{
	font-size: 1.1em;
}

.corsi img{
	margin-left: -30px;
	margin-right: -30px;
}

@media (max-width: 768px){
	.corsi .box{
		width: 100%;
		padding-top: 22px;
		padding-bottom: 22px
	}
	
	#mos{
		margin-bottom: 2em;
	}
}

p.numeri{
	font-size: 6em;
	color: var(--color-rosa);
	margin-bottom: 0;
}

@media (max-width: 768px){
	p.numeri{
		font-size: 3em;
		font-weight: bold;
	}
}

/* ritorno a capo visibile solo da mobile 
.mobile-break {
  display: none;
}

@media (max-width: 768px) {
  .mobile-break {
    display: block;
    width: 100%;
    height: 0;
    margin: 0;
  }
}*/


/* elenco progetti */
#progetti{
	margin: 2em auto;
}

#progetti img{
	border: 1px solid var(--color-grigio);
}

#progetti p{
	font-size: 0.8em;
	text-align: left;
}

#progetti > div{
	margin-bottom: 4em;
	display: flex;
	flex-direction: column;
}

#progetti > div > p:first-of-type{
	font-family: "Montserrat-Bold";
	font-size: 1.2em;
	margin-top: 1.2em;
}

#progetti > div > p:last-of-type{
	border-top: 1px solid;
	border-bottom: 1px solid;
	margin-top: auto;
	padding: 0.4em 0;
}

#tag{
}

#tag p{
	display: inline-block;
	margin: auto 0.3em;
	background-color: var(--color-grigio);
	border-radius: 10px;
	padding: 0.2em 0.8em;
	font-size: 0.7em;
}

@media (min-width: 768px){
	#tag p:first-child{
		margin-left: 0;
	}
}


/* riquadri skills */
.skill{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	border-radius: 50%;
	background-color: #F6F1EE;
	margin: 9px;
}

.skill img{
	width: 80px;
}

@media (max-width: 768px){
	.skill {
		margin: 4px;
	}
	
	.skill img{
		width: 40px;
	}
}


/* pagina corsi singoli */
.programma ul{
	font-family: Montserrat;
}
.programma > div > div > p{
	font-weight: bold;
	margin-top: 1.4em;
	color: var(--color-rosa);
	font-size: 1.1em;
}

.programma .title{
	margin-top: 2.3em;
	margin-bottom: 1em;
}

/* pagina contatti */

#contatti > div{
	display: flex;
	align-items: center;
	justify-content: left;
	margin-bottom: 3em;
}

#contatti p{
	margin-bottom: 0;
}

#contatti i{
	background-color: var(--color-nero);
    color: #fff;
    border-radius: 30px;
    margin-right: 1.2em;
    font-size: 1.1em;
}

#contatti > div:first-of-type i{
	padding: 13px 16px;
}

#contatti > div:last-of-type i{
	padding: 14px 16px;
}

#contatti > div:nth-of-type(2) i, #contatti > div:nth-of-type(3) i{
	padding: 14px 14px;
}

@media (max-width: 768px) {
	
	#contatti > div{
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}
	
	#contatti > div > div{
		width: 100%;
		margin-bottom: 1em;
	}
	
	#contatti i{
		margin-right: 0;
	}
	
}

/* dicono di me */
.vignetta {
  position: relative;
  width: 90%;
  padding: 50px 40px 30px 70px;
  background: #fff;
  background-image: url('../img/virgolette_rosa.png');
  background-size: auto;
  background-position: 10px 10px;
  background-repeat: no-repeat;
  border-radius: 25px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
  margin: 60px auto;
}

#recensioni > div:nth-child(3n-2) .vignetta{
	background-image: url('../img/virgolette_azzurro.png');
}


.vignetta::before {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 60px;
  width: 70px;
  height: 40px;
  background: rgba(0,0,0,0.1);
  clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
  filter: blur(5px);
  z-index: 0;
}

.vignetta::after {
  content: "";
  position: absolute;
  bottom: -38px;
  left: 60px;
  width: 70px;
  height: 38px;
  background: #fff;
  clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
  z-index: 1;
}

.vignetta p{
	margin-bottom: 0;
	font-family: Montserrat-Bold;
	/*font-size: 1.1em;*/
	text-align: left;
}

.vignetta p:last-of-type{
	display: flex;
	justify-content: space-between;
	margin-top: 1.5em;
}

.vignetta p:last-of-type span:first-child{
	color: #3D88C1;
	font-size: 0.9em;
}

.vignetta p:last-of-type span:last-child{
	color: var(--color-rosa);
}

@media (max-width: 768px){
	.vignetta{
		padding: 80px 20px 20px 20px;
		margin: 40px auto;
	}
	
	.vignetta p:last-of-type{
		flex-wrap: wrap;
		justify-content: left;
		flex-direction: column-reverse;
		margin-top: 1.3em;
	}
	
	.vignetta p:last-of-type span{
		margin-bottom: 0.3em;
	}
	
}


#privacy .title{
	font-size: 1.8em;
	margin-top: 1.8em;
	margin-bottom: 0.5em;
}

#privacy ul{
	font-family: Montserrat;
}

#privacy > div > div p:nth-child(even){
	margin-top: 1.6em;
	margin-bottom: 0.5em;
}

.refname{
	display: block;
    position: relative;
    top: -240px;
    visibility: hidden;
}