@charset "UTF-8";
/* CSS Document */

body {
  margin: 0;
  font-family: 'DM Serif Display', serif;
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  background-color: black;
  overflow-x: hidden;
 -webkit-overflow-x: hidden;
	
}

::selection {
  color: white;
  background: #2A9A8C;
}
input {
  caret-color: #3eccb7;
}

/* INIZIO BARRA LATERALE SCROLL COLORATO */
::-webkit-scrollbar {
  width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #2A9D8F;
  border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ED1E79;
}
/* FINE BARRA LATERALE SCROLL COLORATO */

/* INIZIO TYPE TEXT */
#container {
  text-align: center;
  min-height: auto; /* Rimuove l'altezza fissa */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-top: -3px; /* Riduce lo spazio sopra il testo */
}

#text {
  font-family: 'DM Serif Display', serif;
  color: white;
  border-right: 3px solid #3eccb7;
  font-size: 12vw;
  line-height: 1.1;
  white-space: nowrap;
  min-width: 100px;
  margin-top: -5px; /* Riduce ulteriormente lo spazio */
	
}


@media (min-width: 578px) {
  #text {
    font-size: 4.5rem;
    line-height: 4rem;
    margin-top: 0; /* Reset per schermi più grandi */
  }
}
/* FINE TYPE TEXT */


/* INIZIO TYPE TEXT PAGINA CHI SONO */
.typed-out {
  overflow: hidden;
  white-space: nowrap;
  border-right: .11em solid #3ECCB7;
  animation: typing 1s steps(20, end) forwards, blinking .8s infinite;
  width: 0;
}
.typed-out h1 {
  font-family: 'DM Serif Display', serif;
  font-size: 4.375rem;
  line-height: 4.1rem;
  color: white;
}
@media (max-width:650px) {
  .typed-out h1 {
    font-size: 10vw;
    line-height: 49px;
  }
}
@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}
@keyframes blinking {
  from {
    border-color: transparent
  }
  to {
    border-color: #3ECCB7;
  }
}
/* FINE TYPE TEXT PAGINA CHI SONO */

/* FONT */
h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Serif Display', serif;
}
h1, h2 {
  font-size: 2.5rem;
}
h3, h4 {
  font-size: 2.5rem;
}
p {
  font-family: 'Urbanist', sans-serif;
  font-size: 1.2rem;
  color: #fff;
}
/*FINE FONT*/

/* INIZIO ICONA MENU FULLSCREEN */
.navbar-toggler {
  box-shadow: none;
  border: none;
}
.bar1, .bar2, .bar3 {
  width: 20px;
  height: 2px;
  background-color: white;
  margin: 5px 0;
  transition: 0.4s;
}
.change .bar1 {
  transform: rotate(-45deg) translate(0px, 10px);
}
.change .bar2 {
  opacity: 0;
}
.change .bar3 {
  transform: rotate(45deg) translate(0px, -10px);
}
#menu {
  border: none;
}
#menu:focus {
  box-shadow: none;
}
/* FINE ICONA MENU FULLSCREEN */

/* INIZIO MENU ATTIVO */
.active2 {
  text-decoration-line: underline;
  text-decoration-color: white;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  -webkit-text-decoration-line: underline;
  -webkit-text-decoration-color: #3ECCB7;
  -webkit-text-decoration-style: solid;
  -webkit-text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  -webkit-text-underline-offset: 5px;
}
.active2:hover {
  text-decoration-color: #3ECCB7;
}
/* FINE MENU ATTIVO */

/* MEDIA QUERY MENU NAVIGAZIONE */
@media (min-width: 992px) {
  #navigazione {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
    background: transparent;
    transition: background-color 0.3s ease-in-out;
	  
  }
  #navigazione .navbar-brand {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  #navigazione .navbar-nav .nav-link {
	  font-size: 1.1rem;
	 font-family: 'Dm Serif Display';
    color: #fff;
    padding-right: 2.5rem;
    font-weight: 300;
  }
  #navigazione .nav-link:hover {
    color: #3eccb7;
    transition: 0.3s;
  }
  #navigazione .nav-link:active {
    color: #fff;
  }
  #navigazione.navbar-shrink {
    background: black;
  }
  #navigazione.navbar-shrink .navbar-brand {
    color: #fff;
  }
  #navigazione.navbar-shrink .nav-link {
    color: #fff;
  }
  #navigazione.navbar-shrink .nav-link:hover {
    color: #3eccb7;
    transition: 0.3s;
  }
  #navigazione.navbar-shrink .nav-link:active {
    color: #3eccb7;
  }
}
/* FINE MEDIA QUERY MENU NAVIGAZIONE */

/* INIZIO MEDIA QUERY MENU NAVIGAZIONE FINO A 991.98PX + INIZIO MENU FULLSCREEN */
/* Inizio proprietà display applicata ad elementi menu fullscreen (icona logo e social) */
@media (min-width: 992px) {
  .scomparedalg {
    display: none
  }
}
/* Fine proprietà display*/

.navbar .navbar-toggler {
  z-index: 1000
}
@media (max-width: 991.98px) {
  #navigazione {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
    background: transparent;
    transition: background-color 0.3s ease-in-out;
  }
  #navigazione .navbar-brand {
    font-size: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  #navigazione .navbar-nav .nav-link {
    color: #fff;
    font-weight: 300;
  }
  #navigazione .nav-link:hover {
    color: #3eccb7;
    transition: 0.3s;
  }
  #navigazione .nav-link:active {
    color: #fff;
  }
  #navigazione.navbar-shrink {
    background: black;
  }
  #navigazione.navbar-shrink .navbar-brand {
    color: #fff;
  }
  #navigazione.navbar-shrink .nav-link {
    color: #fff;
  }
  #navigazione.navbar-shrink .nav-link:hover {
    color: #3eccb7;
    transition: 0.3s;
  }
  #navigazione.navbar-shrink .nav-link:active {
    color: #3eccb7;
  }
	
  /* Inizio Menu Fullscreen */
  .navbar .navbar-collapse {
    background: url("../img/bg-menu-fullscreen.png");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: opacity 0.35s ease;
    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center !important;
	 overflow-x: hidden;
	  overflow-y: scroll;
  }
  .navbar .navbar-collapse.collapse {
    display: none;
    opacity: 0;
    pointer-events: none;
  }
  .navbar .navbar-collapse.collapsing[style*="height"] {
    opacity: 1;
    height: 100vh !important;
  }
  .navbar .navbar-collapse.collapsing {
    opacity: 0;
    height: 100vh !important;
  }
  .navbar .navbar-collapse.collapse.show {
    display: flex;
    opacity: 1;
    pointer-events: auto;
  }
  .navbar .navbar-collapse .navbar-nav {
    margin-right: initial !important;
    margin-top: auto;
    margin-bottom: auto;
  }
  #navigazione .navbar-nav .nav-link {
    color: #fff;
    font-size: 3rem;
    text-transform: uppercase;
    font-family: 'DM Serif Display', serif;
    align-content: center;
  }
  #navigazione .navbar-nav .nav-link:hover {
    color: #3eccb7;
    transition: 0.3s;
  }
}
@media (max-width: 991.98px) {
  .navbar-nav {
    margin-left: initial !important;
  }
}
/* FINE MEDIA QUERY MENU NAVIGAZIONE FINO A 992PX + FINE MENU FULLSCREEN */

/* INIZIO PULSANTI */
.btn-fullcolor {
  color: #fff;
  background-color: #2a9d8f;
  border: 2px solid #2a9d8f;
  border-radius: 20px;
}
.btn-fullcolor:hover {
  background-color: transparent;
}

.btn-blog {
  color: #fff;
  background-color: #2a9d8f;
  border: 2px solid #2a9d8f;
  border-radius: 5px;
	 transition: 0.2s;
}
.btn-blog:hover {
	  color: #fff;
  background-color: transparent;
	 transition: 0.2s;
}
/* BTN effetto glow */
.btn-glow {
  background: #2a9d8f;
  color: white;
  border: 2px solid #2a9d8f;
  box-shadow: 0 0 10px #3ECCB7, 0 0 25px white, 0 0 20px #3ECCB7, 0 0 60px rgba(255, 255, 255, 0.5);
  transition: 0.3s;
  border-radius: 20px;
}
.btn-glow:hover {
color: white;
  box-shadow: none;
  transition: 0.3s;
}
.btn-semiglow {
  color: white;
  background-color: transparent;
  border: 2px solid #2a9d8f;
  border-radius: 20px;
  transition: 0.3s;
}
.btn-semiglow:hover {
	color: white;
  background: #2a9d8f;
  box-shadow: 0 0 10px #3ECCB7, 0 0 25px white, 0 0 20px #3ECCB7, 0 0 60px rgba(255, 255, 255, 0.5);
  transition: 0.3s;
}


.btn-semiglow2 {
  color: white;
  background-color: transparent;
  border: 2px solid #ed1e79;
  border-radius: 20px;
  transition: 0.3s;
}
.btn-semiglow2:hover {
	color: white;
  background: #ed1e79;
  box-shadow: 0 0 10px #ed1e79, 0 0 25px white, 0 0 20px #ed1e79, 0 0 60px rgba(255, 255, 255, 0.5);
  transition: 0.3s;
}


.btn-label {
  color: #fff;
  background-color: transparent;
  border: 2px solid #2a9d8f;
  border-radius: 1.25rem;
  opacity: 1;
  transition: .3s;
}
.btn-label:hover {
  background-color: #2a9d8f;
}
/* FINE PULSANTI */

/* INIZIO HOMEPAGE */
.bg-image {
  position: relative;
  min-height: 100vh;
  background-image: url("../img/bg-home-25.jpg");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1));
  z-index: 1;
}





/* Per assicurarti che il testo rimanga visibile sopra */
.bg-image * {
  position: relative;
  z-index: 2;
}

/* Per mobile, meno spazio */
@media (max-width: 400px) {
  .header {
    min-height: 400px; /* Ridotto per mobile */
  }
}

/* Altri breakpoint */
@media (min-width: 400px) {
  .header {
    min-height: 400px;
  }
}

@media (min-width: 576px) {
  .header {
    min-height: 450px;
  }
}

@media (min-width: 768px) {
  .header {
    min-height: 500px;
  }
}

@media (min-width: 992px) {
  .header {
    min-height: 550px;
  }
}


.header h1 {
  padding-top: 150px;
  font-size: 13vw;
  line-height: 13vw;
  color: white;
font-family: 'DM Serif Display', serif;
	
}


@media (min-width:578px) {
  .header h1 {
    font-size: 5rem;
    line-height: 4.5rem;
	 font-family: 'DM Serif Display', serif;
  }
}

.servizi-section ul {
  font-size: 1.3rem;
}
.servizi-section p {
  color: #3eccb7 !important; 
}
.servizi-section {
  min-height: 1300px;
}

@media (max-width: 992px) {
	.card3 {
	background: url("../img/particelle-992.jpg");
	background-size:contain;
	background-position: center;
		background-repeat: no-repeat;
}
}

@media (min-width:992px){
	.card3 {
	background: url("../img/particelle2.jpg");
	background-position: bottom;
	background-size: cover;
}
}


@media (max-width:768px) {
  .servizi-section h1, h3 {
    font-size: 2.5rem;
  }
}

.servizi-section h3 {
	font-size: 2.5rem;
}
.chisono-section {
  min-height: 400px;
}
.contatti-section {
  min-height: 550px;
}
.contatti-section h4 {
  font-size: 3rem;
}
@media (max-width:576px) {
  .contatti-section h1 {
    font-size: 2.5rem;
  }
}

@media (max-width: 576px) {
	.chisono-section h2 {
		font-size: 1.7rem;
	}
}
.footer-section p {
  font-size: 1rem;
}
.footer-section {
  min-height: 500px;
}

.bg-image-footer {
  min-height: 360px;
  background-image: url("../img/bg-footer.jpg");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
}
/* Inizio navbar footer */
.navbarfooter .nav-item {
  font-weight: 600;
}
.navbarfooter .nav-link {
  color: white;
}
.navbarfooter .nav-link:hover {
  color: #cccccc;
}
/* Fine navbar footer */

/* Inizio recapiti */
.recapiti a {
  text-align: center;
  text-decoration: none;
  line-height: 3rem;
  color: white;
}
.recapiti a:hover {
  color: #cccccc;
}
.recapiti a:active {
  color: #cccccc;
}
/* Fine recapiti */

/* Inizio social */
.social a {
  text-align: center;
  line-height: 3rem;
  color: white;
}
.social a:hover {
  color: #cccccc;
}
.social a:active {
  color: #CCCCCC;
}
/*Fine social */
/* FINE HOMEPAGE */

/* INIZIO PAGINA CHI SONO */
/* Icone tags non visibili */
@media (max-width: 992px) {
  .bg-header-chisono {
    min-height: 350px;
    max-height: 1200px;
    background: url("../img/bg-top.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
  }
}
/* Icone tags visibili */
@media (min-width: 992px) {
  .bg-header-chisono {
    min-height: 500px;
    max-height: 1200px;
    background: url("../img/tag-1-opacity.png"), url("../img/tag-2-opacity.png"), url("../img/tag-3-opacity.png"), url("../img/tag-4-opacity.png"), url("../img/bg-top.png");
    background-size: 80px, 60px, 50px, 35px, cover;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: right 200px top 130px, right 130px bottom 150px, right 220px bottom 60px, right 110px bottom 10px, top;
  }
}

@media (max-width: 992px) {
  .bg-header-portfolio2 {
    min-height: 350px;
    max-height: 1200px;
    background: url("../img/bg-top.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
  }
}
/* Icone tags visibili */
@media (min-width: 992px) {
  .bg-header-portfolio2 {
    min-height: 500px;
    max-height: 1200px;
    background: url("../img/bg-top.png");
    background-size: cover;
    background-position: top;
  }
}

@media (max-width: 992px) {
  .bg-header-servizi2 {
    min-height: 350px;
    max-height: 1200px;
    background: url("../img/bg-top.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
  }
}
/* Icone tags visibili */
@media (min-width: 992px) {
  .bg-header-servizi2 {
    min-height: 500px;
    max-height: 1200px;
    background: url("../img/bg-top.png");
    background-size: cover;
    background-position: top;
  }
}


@media (max-width: 992px) {
  .bg-header-contatti2 {
    min-height: 350px;
    max-height: 1000px;
    background: url("../img/bg-top.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
  }
}
/* Icone tags visibili */
@media (min-width: 992px) {
  .bg-header-contatti2 {
    min-height: 500px;
    max-height: 500px;
    background: url("../img/bg-top.png");
    background-size: cover;
    background-position: top;
  }
}

.header-chisono {
  padding-top: 50px;
}
@media (min-width: 576px) {
  .header-chisono h1 {
    line-height: 4.5rem;
  }
}
@media (max-width:768px) {
  .chisono-section h1 {
    font-size: 2.5rem;
  }
}
.portfolio-section {
  min-height: 500px;
}
@media (max-width:576px) {
  .portfolio-section h1 {
    font-size: 2.5rem;
  }
}
.chisono-description {
  min-height: 600px;
}
.chisono-description h2 {
  font-size: 1.8rem;
}



/* Inizio icone skill con hover colorato */
#ps:hover {
  -webkit-filter: drop-shadow(5px 5px 5px #31a8fe);
  filter: drop-shadow(5px 5px 5px #31a8fe);
}
#dw:hover {
  -webkit-filter: drop-shadow(5px 5px 5px #fa5ff3);
  filter: drop-shadow(5px 5px 5px #fa5ff3);
}
#xd:hover {
  -webkit-filter: drop-shadow(5px 5px 5px #fb61f6);
  filter: drop-shadow(5px 5px 5px #fb61f6);
}
#ai:hover {
  -webkit-filter: drop-shadow(5px 5px 5px #fe9a00);
  filter: drop-shadow(5px 5px 5px #fe9a00);
}
#html5:hover {
  -webkit-filter: drop-shadow(5px 5px 5px #e54d26);
  filter: drop-shadow(5px 5px 5px #e54d26);
}
#css3:hover {
  -webkit-filter: drop-shadow(5px 5px 5px #007db7);
  filter: drop-shadow(5px 5px 5px #007db7);
}
#js:hover {
  -webkit-filter: drop-shadow(5px 5px 5px #fa9c28);
  filter: drop-shadow(5px 5px 5px #fa9c28);
}
#bootstrap1:hover {
  -webkit-filter: drop-shadow(5px 5px 5px #6222b0);
  filter: drop-shadow(5px 5px 5px #6222b0);
}
#wordpress:hover {
  -webkit-filter: drop-shadow(5px 5px 5px #21759a);
  filter: drop-shadow(5px 5px 5px #21759a);
}

#shopify:hover {
  -webkit-filter: drop-shadow(5px 5px 5px #8DB442);
  filter: drop-shadow(5px 5px 5px #8DB442);
}

#woocommerce:hover {
  -webkit-filter: drop-shadow(5px 5px 5px #7F54B3);
  filter: drop-shadow(5px 5px 5px #7F54B3);
}
/* Fine icone skill con hover colorato */
/* FINE PAGINA CHI SONO */

/* INIZIO PAGINA SERVIZI */
.bg-header-servizi {
  min-height: 500px;
  background-image: url("../img/bg-top.png");
  background-position: top;
  background-repeat: no-repeat;
  background-size: center;
}
.bg-header-servizi h1 {
  font-family: 'DM Serif Display', serif;
  padding-top: 30px;
  font-size: 4.375rem;
  line-height: 3.5rem;
  color: white;
}
@media (max-width:576px) {
  .bg-header-servizi h1 {
    font-size: 3.5rem;
  }
}
@media (min-width: 576px) {
  .bg-header-servizi h1 {
    line-height: 4.5rem;
  }
}
.servizi h2 {
  font-size: 2.5rem;
}
.servizi h3 {
  font-size: 1.7rem;
}
.cta-contatti {
  min-height: 400px;
}
.cta-contatti h1 {
  font-size: 3rem;
}
.cta-contatti h4 {
  font-size: 2.5rem;
}
@media (max-width:576px) {
  .cta-contatti h1 {
    font-size: 2.5rem;
  }
}
/* FINE PAGINA SERVIZI */

/* INIZIO PAGINA PORTFOLIO */
.bg-header-portfolio {
  min-height: 200px;
  background-image: url("../img/bg-top.png");
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}
.bg-header-portfolio2 h1 {
  padding-top: 150px;
  font-family: 'DM Serif Display', serif;
  font-size: 4.375rem;
  line-height: 3.5rem;
  color: white;
}
@media (max-width:576px) {
  .bg-header-portfolio2 h1 {
    padding-top: 100px;
    font-size: 3.5rem;
  }
}
@media (min-width: 576px) {
  .bg-header-portfolio2 h1 {
    line-height: 4.5rem;
  }
}

.bg-header-servizi2 h1 {
  padding-top: 10px;
  font-family: 'DM Serif Display', serif;
  font-size: 4.375rem;
  line-height: 3.5rem;
  color: white;
}
@media (max-width:576px) {
  .bg-header-servizi2 h1 {
    padding-top: 10px;
    font-size: 3.5rem;
  }
}
@media (min-width: 576px) {
  .bg-header-servizi2 h1 {
    line-height: 4.5rem;
  }
}

.bg-header-servizi2 img {
	margin-top: 100px;
}

.bg-header-contatti2 h1 {
  padding-top: 0px;
  font-family: 'DM Serif Display', serif;
  font-size: 4.375rem;
  line-height: 3.5rem;
  color: white;
}
@media (max-width:576px) {
  .bg-header-contatti2 h1 {
    padding-top: 10px;
    font-size: 3.5rem;
  }
}
@media (min-width: 576px) {
  .bg-header-contatti2 h1 {
	  padding-top: 200px;
    line-height: 4.5rem;
  }
}

.bg-header-contatti2 img {
	margin-top: 10px;
}

/* Inizio media query per visibilità bg card */
/* fino a 576px*/
@media (max-width:576px) {
  .bgcard-1 {
    background-image: url("../img/bg-card-992-1.png");
    background-color: transparent;
    background-position: left top;
    background-size: 220px;
    background-repeat: no-repeat;
    padding: 45px 45px 45px 45px;
  }
  .bgcard-2 {
    background-image: url("../img/bg-card-992-2.png");
    background-color: transparent;
    background-position: right top;
    background-size: 220px;
    background-repeat: no-repeat;
    padding: 45px 45px 45px 45px;
  }
  .bgcard-3 {
    background-image: url("../img/bg-card-992-3.png");
    background-color: transparent;
    background-position: left bottom;
    background-size: 280px;
    background-repeat: no-repeat;
    padding: 45px 45px 45px 45px;
  }
  .bgcard-4 {
    background-image: url("../img/bg-card-992-4.png");
    background-color: transparent;
    background-position: right bottom;
    background-size: 280px;
    background-repeat: no-repeat;
    padding: 45px 45px 45px 45px;
  }
}
/* da 578px */
@media (min-width: 578px) {
  .bgcard-1 {
    background-image: url("../img/bg-card-1.png");
    background-color: transparent;
    background-position: left -50px top -50px;
    background-size: 550px;
    background-repeat: no-repeat;
    padding: 50px 50px 50px 50px;
  }
  .bgcard-2 {
    background-image: url("../img/bg-card-2.png");
    background-color: transparent;
    background-position: right -50px top -50px;
    background-size: 550px;
    background-repeat: no-repeat;
    padding: 50px 50px 50px 50px;
  }
  .bgcard-3 {
    background-image: url("../img/bg-card-3.png");
    background-color: transparent;
    background-size: 550px;
    background-position: left -50px bottom -50px;
    background-repeat: no-repeat;
    padding: 50px 50px 50px 50px;
  }
  .bgcard-4 {
    background-image: url("../img/bg-card-4.png");
    background-color: transparent;
    background-size: 550px;
    background-position: right -50px bottom -50px;
    background-repeat: no-repeat;
    padding: 50px 50px 50px 50px;
  }
}
/* da 992 px */
@media (min-width: 992px) {
  .bgcard-1 {
    background-image: url("../img/bg-card-992-1.png");
    background-position: right top;
    background-size: 320px;
    background-repeat: no-repeat;
    padding: 50px 40px 50px 40px;
  }
  .bgcard-2 {
    background-image: url("../img/bg-card-992-2.png");
    background-position: left top;
    background-size: 320px;
    background-repeat: no-repeat;
    padding: 50px 40px 50px 40px;
  }
  .bgcard-3 {
    background-image: url("../img/bg-card-992-3.png");
    background-position: left bottom;
    background-size: 250px;
    background-repeat: no-repeat;
    padding: 50px 40px 50px 40px;
  }
  .bgcard-4 {
    background-image: url("../img/bg-card-992-4.png");
    background-position: right bottom;
    background-size: 250px;
    background-repeat: no-repeat;
    padding: 50px 40px 50px 40px;
  }
}
/* da 1200 px */
@media (min-width: 1200px) {
  .bgcard-1 {
    background-image: url("../img/bg-card-992-1.png");
    background-position: left -25px top;
    background-repeat: no-repeat;
    padding: 60px 30px 60px 30px;
  }
  .bgcard-2 {
    background-image: url("../img/bg-card-992-2.png");
    background-position: right -25px top;
    background-repeat: no-repeat;
    padding: 60px 30px 60px 30px;
  }
  .bgcard-3 {
    background-image: url("../img/bg-card-992-3.png");
    background-position: left -25px bottom;
    background-repeat: no-repeat;
    padding: 60px 30px 60px 30px;
  }
  .bgcard-4 {
    background-image: url("../img/bg-card-992-4.png");
    background-position: right -25px bottom;
    background-repeat: no-repeat;
    padding: 60px 30px 60px 30px;
  }
}
/* da 1400 px */
@media (min-width: 1400px) {
  .bgcard-1 {
    background-image: url("../img/bg-card-1.png");
    background-color: transparent;
    background-size: 100%;
    background-position: right 38px top;
    background-repeat: no-repeat;
    padding: 70px 40px 70px 40px;
  }
  .bgcard-2 {
    background-image: url("../img/bg-card-2.png");
    background-color: transparent;
    background-size: 100%;
    background-position: left 38px top;
    background-repeat: no-repeat;
    padding: 70px 40px 70px 40px;
  }
  .bgcard-3 {
    background-image: url("../img/bg-card-3.png");
    background-color: transparent;
    background-size: 100%;
    background-position: right 38px bottom;
    background-repeat: no-repeat;
    padding: 70px 40px 70px 40px;
  }
  .bgcard-4 {
    background-image: url("../img/bg-card-4.png");
    background-color: transparent;
    background-size: 100%;
    background-position: left 38px bottom;
    background-repeat: no-repeat;
    padding: 70px 40px 70px 40px;
  }
}

.progetti a {
  text-decoration: none;
}
.card {
  border: none;
  border-radius: 26px;
}
.card-body {
  background-color: black;
  border-radius: 0px 0px 20px 20px;
}
.card-img-top {
  border-radius: 20px 20px 0px 0px;
}
.effettohover {
  opacity: .8;
	transition: 0.3  ease-in-out !important;

}
.effettohover:hover {
  opacity: 1;
	transition: 0.3s ease-in-out !important;
}
.effettohover:active {
  opacity: 1;

	
}
.effettohover:focus {
  opacity: 1;

}

/* FINE PAGINA PORTFOLIO */

/* INIZIO PAGINA PROGETTO */
.progetto-section {
  min-height: 640px;
}
@media (max-width:992px) {
  .progetto-section {
    min-height: 400px;
  }
}
.mfwebagency h1 {
  font-family: 'DM Serif Display', serif;
  font-size: 4.375rem;
  line-height: 3.5rem;
  color: white;
}
.mfwebagency {
  min-height: 280px;
}
@media (max-width:576px) {
  .mfwebagency h1 {
    font-size: 3.5rem;
  }
}
.backtoportfolio {
  min-height: 240px;
}
@media (max-width:768px) {
  .backtoportfolio {
    min-height: 160px;
  }
}

.testoprogetto h1 {
  font-size: 1.3rem;
  line-height: 1.5rem;
}
.testoprogetto p {
  font-size: 1.1rem;
  line-height: 1.5rem;
}
/* INIZIO ELEMENTI PROGETTO - PALETTE E FONT */
#rettangolo1 {
      width: 200px;
      height: 80px;
      background: #2a9d8f;
	margin: auto;
    }

#rettangolo2 {
      width: 200px;
      height: 80px;
      background: #3eccb7;
	margin: auto;
    }
#rettangolo3 {
      width: 200px;
      height: 80px;
      background: #ed1e79;
	margin: auto;
    }



.contenitore {
	height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

span.element {
font-family: 'DM Serif Display', serif;
  display: inline-block;
	color: #282727;
  font-size: 250px;
  position: relative;
}

.x1 {
  position: absolute;
  color: #d9d9d9;
  font-size: 35px;
  top: 175px;
  left: 20px;
	margin: auto;
}

span.element2 {
	font-family: 'Urbanist', sans-serif;
  display: inline-block;
	color: #282727;
  font-size: 250px;
  position: relative;
}

.x2 {
  position: absolute;
  color: #d9d9d9;
  font-size: 35px;
  top: 175px;
  left: 90px;
	margin: auto;
}
/* FINE ELEMENTI PROGETTO - PALETTE E FONT */

/*FINE PAGINA PROGETTO */
/* INIZIO PAGINA CONTATTI */
@keyframes neonBulb {
  0% { background-position: 50% 50%; transform: scale(1); }
  25% { background-position: 40% 60%; transform: scale(1.05); }
  50% { background-position: 60% 40%; transform: scale(1); }
  75% { background-position: 50% 70%; transform: scale(1.03); }
  100% { background-position: 50% 50%; transform: scale(1); }
}

.bg-header-neon {
  min-height: 300px;
  background: linear-gradient(to bottom, 
    rgba(0, 255, 255, 0.7) 0%,   /* Ciano brillante */
    rgba(255, 0, 150, 0.6) 40%,  /* Magenta cyberpunk */
    rgba(50, 0, 50, 0.8) 70%,    /* Viola scuro */
    black 95%,                   /* Nero assoluto */
    black 100%                   /* Assicura il nero finale */
  );
  background-color: black;
  background-size: 300% 300%;
  animation: neonBulb 8s ease-in-out infinite alternate;
}




.bg-header-contatti h1 {
  padding-top: 200px;
  font-family: 'DM Serif Display', serif;
  font-size: 4.375rem;
  line-height: 3.5rem;
  color: white;
}

@media (min-width:768px) {
  .contatti {
    min-height: 500px;
  }
}
.contatti p {
  font-family: 'Urbanist', sans-serif;
  font-weight: lighter;
  font-size: 1.25;
}
@media (max-width: 576px) {
  .bg-header-contatti h1 {
    font-size: 3.5rem;
    padding-top: 100px;
    line-height: 4.5rem;
  }
}
@media (max-width: 576px) {
  .bg-header-contatti h2 {
    font-size: 3rem;
    padding-top: 100px;
  }
}
@media (min-width: 576px) {
  .bg-header-contatti h1 {
    padding-top: 150px;
  }
}
.contatti h2 {
  font-size: 2.5rem;
}
@media (max-width:578px){
	.contatti h2 {
		font-size: 1.7rem;
	}
}
/* Inizio form */
.form-control {
  font-family: 'Urbanist', sans-serif;
  background: black;
  font-size: 1rem;
  font-style: italic;
  font-weight: 400;
  color: #fff;
  border-color: white;
  height: 40px;
  border-radius: 0;
  box-shadow: 1px 1px 10px white;
}
.form-control:focus {
  border-color: white;
 box-shadow: 0 0 10px #3ECCB7, 0 0 15px white, 0 0 5px #3ECCB7, 0 0 10px rgba(255, 255, 255, 0.5);
}

.form h2 {
  font-size: 1.5rem;
}
.messaggio {
  height: 200px;
}
.campiobbligatori p {
  font-size: 0.8rem;
}
.pre-form {
  font-size: 1.5rem;
  padding-bottom: 20px;
}
.btn-form {
  color: black;
  background-color: #3eccb7;
  border: 2px solid #3eccb7;
  border-radius: 0;
  transition: .3s;
  width: 100%;
}
.btn-form:hover {
  color: #3eccb7;
  background-color: transparent;
}
::placeholder {
  color: #fff;
  opacity: 1;
}
input:placeholder-shown {
  color: white;
}
textarea::-webkit-input-placeholder {
  color: #fff;
}
textarea:-moz-placeholder {
  color: #fff;
}
textarea::-moz-placeholder {
  color: #fff;
}
textarea:-ms-input-placeholder {
  color: #fff;
}
textarea::placeholder {
  color: #fff;
}
/* Fine form */
/* FINE PAGINA CONTATTI */

/* INIZIO PAGINA RINGRAZIAMENTO FORM */
.bg-header-form {
	min-height: 500px;
  background-image: url("../img/particelle2.jpg");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain;
	}
	



.bg-header-form h1 {
  padding-top: 3rem;
  font-family: 'DM Serif Display', serif;
  font-size: 4.375rem;
  color: white;
}
@media (max-width:576px) {
  .bg-header-form h1 {
    font-size: 3.5rem;
  }
}
/* FINE PAGINA RINGRAZIAMENTO FORM */


/* INIZIO PROGETTO FARINOSO */
.responsivedesign h3 {
	font-size: 3rem;
}

#ipadfarinoso {
	position: relative;
	bottom: 150px;
}

#ipadfarinoso2 {
	position: relative;
	bottom: 150px;
}

#rettangolo1f {
      width: 200px;
      height: 80px;
      background: #faaf3b;
	margin: auto;
    }

#rettangolo2f {
      width: 200px;
      height: 80px;
      background: #f3e4c0;
	margin: auto;
    }
#rettangolo3f {
      width: 200px;
      height: 80px;
      background: #4b8c6e;
	margin: auto;
    }

#rettangolo4f {
      width: 200px;
      height: 80px;
      background: #b8e0d2;
	margin: auto;
    }

#rettangolo1c {
      width: 200px;
      height: 80px;
      background: #6da7f1;
	margin: auto;
    }

#rettangolo2c {
      width: 200px;
      height: 80px;
      background: #416e7a;
	margin: auto;
    }
#rettangolo3c {
      width: 200px;
      height: 80px;
      background: #193a43;
	margin: auto;
    }

#rettangolo4c {
      width: 200px;
      height: 80px;
      background: #eff3f9;
	margin: auto;
    }


#rettangolo1vsimpianti {
      width: 200px;
      height: 80px;
      background: #1f2531;
	margin: auto;
    }

#rettangolo2vsimpianti {
      width: 200px;
      height: 80px;
      background: #2b3979;
	margin: auto;
    }
#rettangolo3vsimpianti {
      width: 200px;
      height: 80px;
      background: #3b6eb5;
	  margin: auto;
    }



.contenitoref {
	height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

span.elementf {
font-family: 'Raleway', sans-serif;
  display: inline-block;
	color: #282727;
  font-size: 250px;
  position: relative;
}

span.elementcosmenos {
font-family: 'Neutra Text TF', sans-serif;
  display: inline-block;
	color: #282727;
  font-size: 250px;
  position: relative;
}

span.elementvmes {
font-family: "Space Grotesk", sans-serif !important;
  display: inline-block;
	color: #282727;
  font-size: 250px;
  position: relative;
}

span.elementvmes2 {
font-family: "Be Vietnam Pro", sans-serif !important;
  display: inline-block;
	color: #282727;
  font-size: 250px;
  position: relative;
}

span.elementkinesofia {
font-family: "Lato", sans-serif !important;
  display: inline-block;
	color: #282727;
  font-size: 250px;
  position: relative;
}

span.elementkinesofia2 {
font-family: "Dm Sans", sans-serif !important;
  display: inline-block;
	color: #282727;
  font-size: 250px;
  position: relative;
}


.x1f {
  position: absolute;
  color: #d9d9d9;
  font-size: 35px;
  top: 175px;
  left: 90px;
	margin: auto;
}

.x1cosmenos {
  position: absolute;
  color: #d9d9d9;
  font-size: 30px;
  top: 175px;
  left: 55px;
	margin: auto;
}

.x1vmes {
  position: absolute;
  color: #d9d9d9;
  font-size: 30px;
  top: 175px;
  left: 55px;
	margin: auto;
}

.x1kinesofia {
  position: absolute;
  color: #d9d9d9;
  font-size: 30px;
  top: 175px;
  left: 55px;
	margin: auto;
}

.x1vsimpianti {
  position: absolute;
  color: #d9d9d9;
  font-size: 30px;
 font-family: "Manrope", sans-serif;
  top: 175px;
  left: 100px;
	margin: auto;
}

span.elementf2 {
	font-family: 'Urbanist', sans-serif;
  display: inline-block;
	color: #282727;
  font-size: 250px;
  position: relative;
}

.x2f {
  position: absolute;
  color: #d9d9d9;
  font-size: 35px;
  top: 175px;
  left: 90px;
	margin: auto;
}
/* FINE PROGETTO FARINOSO */

/* INIZIO COOKIE BANNER */
/*
#cookiePopup {
  background-color: black;
  position: fixed;
  font-size: 14px;
  width: 70vw;
  max-width: 42.85em;
  box-shadow: 0 0 2em rgba(5, 0, 31, 0.15);
font-family: 'Urbanist', sans-serif;
  text-align: justify;
  line-height: 1.8em;
  padding: 2em 1.4em;
  border-radius: 6px;
  transition: all 0.5s ease-in-out;
}
#cookiePopup img {
  display: block;
  width: 3.75em;
  transform: translateZ(0);
  position: relative;
  margin: auto;
}
#cookiePopup p {
	font-size:1rem;
	color: white;
  text-align: center;
  margin: 1.4em 0;
}
#cookiePopup button {
	 background: #2a9d8f;
  color: white;
  border: 2px solid #2a9d8f;
  font-size: 1.2em;
  padding: 5px 20px;
  display: block;
  position: relative;
  margin: auto;
}
#cookiePopup a {
  color: #3eccb7;
}
.hide {
  visibility: hidden;
  bottom: 0;
  right: 2em;
	
}
.show {
  visibility: visible;
  bottom: 2em;
  right: 2em;
}
@media only screen and (max-width: 37.5em) {
  #cookiePopup {
    width: 100%;
  }
  .hide {
    bottom: 2em;
    right: 0;
  }
  .show {
    right: 0;
    bottom: 0;
  }
}
*/
/* FINE COOKIE BANNER */

/* INIZIO ANIMAZIONI */
/* Inizio pulse - usato in SERVIZI e CONTATTI */
@keyframes pulse {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.1, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}
#zoom {
  animation: pulse 1s linear infinite;
}
.zoom {
  animation: pulse 1s linear infinite;
}
/* FINE PULSE - usato in pagina servizi e contatti */

/* INIZIO FADE IN */
@keyframes comparsa {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.compare {
  animation-name: comparsa;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  animation-delay: 0.8s;
}

#fadein {
  opacity: 0;
}
#fadein2 {
  opacity: 0;
}

/* FINE FADE IN */

.privaypolicy {
	padding-top: 100px;
}

.progetti h4 {
	font-size: 1.2rem;
}

.progetti {
	min-height: 700px;
}

.bg-header-portfolio h2 {
	padding-top: 20px;
	font-size: 1.5rem;
}

.navbar p {
	font-size: 0.8rem;
}

.comefunziona h4 {
	font-size: 2rem;
	color: #3eccb7;
}

.navbar a {
	font-family: 'DM Serif Display', serif;
}

@media (min-width:490px) {
  .navbar span {
    font-size: 1rem !important;
  }
}

@media (max-width:450px) {
  .navbar span {
    display: none;
  }
}

/* INIZIO GLASSMORPHISM SCHEDE SERVIZI IN HOME */

.container2 {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 1300px;
	flex-wrap: wrap;
	z-index: 1;
}

.container2 .card2 {
	position: relative;
	width: 300px;
	height: 435px;
      margin: 30px;
	box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
	border-radius: 20px;
background: rgb(237,30,121);
background: linear-gradient(310deg, rgba(237,30,121,0.1) 0%, rgba(62,204,183,0.1) 64%, rgba(0,0,0,0.1) 100%);
	justify-content: center;
	border-top: 1px solid rgba(255,255,255,0.5);
	border-left: 1px solid rgba(255,255,255,0.5);
	backdrop-filter: blur(5px);
}

.container2 .card2 .content2 {
	text-align: center;
	/*transform: translateY(100px);
	opacity: 0;*/
	transition: 0.5s;
}

/*.container .card .content:hover {
	transform: translateY(0px);
	opacity: 1;
}*/


.container2 .card2 .content2 h3 {
	font-size: 2.2em;
	color: #fff;
	z-index: 1;
}

.container2 .card2 .content2 p {
	font-size: 1em;
	color: #fff;
	font-weight: 300;
}

.container2 .card2 .content2 a {
	position: relative;
	display: inline-block;
	padding: 8px 30px;
	margin-top: 15px;
	background: #fff;
	color: white;
	background-color: transparent;
	border: 2px solid #2a9d8f;
	border-radius: 20px;
	transition: 0.3s;
	text-decoration: none;
	font-weight: 500;
	box-shadow: 0 5px 15px rgba(0,0,0,0.2);
	width: 170px;
}


.container2 .card2 .content2 a:hover {
	color: white;
  background: #2a9d8f;
  box-shadow: 0 0 10px #3ECCB7, 0 0 25px white, 0 0 20px #3ECCB7, 0 0 60px rgba(255, 255, 255, 0.5);
  transition: 0.3s;
}

.js-tilt-glare {
	border-radius: 20px;
}


/* pagina servizio web design siti web napoli*/

.bg-header-webdesign {
  min-height: 450px;
  background-image: url("../img/bg-top.png");
  background-position: top;
  background-repeat: no-repeat;
  background-size: center;
}
@media (min-width:576px) {
.bg-header-webdesign h2 {
  font-family: 'DM Serif Display', serif;
  padding-top: 90px;
  font-size: 4.375rem;
  line-height: 3.5rem;
	color: white;
}
	}
@media (max-width:576px) {
  .bg-header-webdesign h2 {
	  padding-top: 30px;
    font-size: 3.5rem;
	  line-height: 3.2rem;
  }
}


/* INIZIO PAGINA BLOG */
.bg-header-blog {
  min-height: 300px;
  background-image: url("../img/bg-top.png");
  background-position: top;
  background-repeat: no-repeat;
  background-size: center;
}
.bg-header-blog h1 {
  font-family: 'DM Serif Display', serif;
  padding-top: 30px;
  font-size: 3rem;
  line-height: 3.5rem;
  color: white;
}
@media (max-width:576px) {
  .bg-header-blog h1 {
    font-size: 3.5rem;
  }
}
@media (min-width: 576px) {
  .bg-header-blog h1 {
    line-height: 4.5rem;
  }
}


.glowing-circle {
  border-radius: 8%;
  background-color: black;
  -webkit-animation: glowing 1s ease-in-out infinite alternate;
  -moz-animation: glowing 1s ease-in-out infinite alternate;
  animation: glowing 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glowing {
  from {
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #3eccb7, 0 0 40px #0ff, 0 0 50px #3eccb7, 0 0 60px #3eccb7, 0 0 50px #3eccb7;
  }
  to {
    box-shadow: 0 0 20px #fff, 0 0 30px #3eccb7, 0 0 40px #3eccb7, 0 0 50px #3eccb7, 0 0 60px #3eccb7, 0 0 70px #3eccb7, 0 0 70px #3eccb7;
  }
}

.glowing-circle2 {
  border-radius: 8%;
  background-color: black;
  -webkit-animation: glowing2 1s ease-in-out infinite alternate;
  -moz-animation: glowing2 1s ease-in-out infinite alternate;
  animation: glowing2 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glowing2 {
  from {
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ed1e79, 0 0 40px #0ff, 0 0 50px #ed1e79, 0 0 60px #ed1e79, 0 0 50px #ed1e79;
  }
  to {
    box-shadow: 0 0 20px #fff, 0 0 30px #ed1e79, 0 0 40px #ed1e79, 0 0 50px #ed1e79, 0 0 60px #ed1e79, 0 0 70px #ed1e79, 0 0 70px #ed1e79;
  }
}

.card {
      border-radius: 15px;
      transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
      border: 1px solid #17a2b8; /* Colore del bordo della card */
    }

    .card:hover {
      box-shadow: 0 0 20px rgba(23, 162, 184, 0.8); /* Colore e intensità dell'ombra all'hover */
      border-radius: 15px;
    }

    .card-img-top {
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
      transition: border-radius 0.3s ease-in-out;
    }

    .card-body {
      border-bottom-left-radius: 15px;
      border-bottom-right-radius: 15px;
      transition: border-radius 0.3s ease-in-out;
    }

.card-title {
	font-size: 30px !important;
}

    .btn-portfolio {
      background-color: #17a2b8; /* Colore di sfondo del pulsante */
      border-color: #17a2b8; /* Colore del bordo del pulsante */
      color: #ffffff; /* Colore del testo del pulsante */
      transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
    }

    .btn-portfolio:hover {
		color: white;
		      box-shadow: 0 0 20px rgba(23, 162, 184, 0.8); /* Colore e intensità dell'effetto glow al passaggio del mouse */
      transition: 0.3s ease-in-out;

    }


#rettangolo1m {
      width: 200px;
      height: 80px;
      background: #514a4a;
	margin: auto;
    }

#rettangolo2m {
      width: 200px;
      height: 80px;
      background: #9a8e8d;
	margin: auto;
    }
#rettangolo3m {
      width: 200px;
      height: 80px;
      background: #353535;
	margin: auto;
    }

#rettangolo1vmes {
      width: 200px;
      height: 80px;
      background: #213446;
	margin: auto;
    }
#rettangolo2vmes {
      width: 200px;
      height: 80px;
      background: #233d62;
	margin: auto;
    }
#rettangolo3vmes {
      width: 200px;
      height: 80px;
      background: #5C6E80;
	margin: auto;
    }

#rettangolo1kinesofia {
      width: 200px;
      height: 80px;
      background: #70864C;
	margin: auto;
    }
#rettangolo2kinesofia {
      width: 200px;
      height: 80px;
      background: #839e56;
	margin: auto;
    }
#rettangolo3kinesofia {
      width: 200px;
      height: 80px;
      background: #B4CF82;
	margin: auto;
    }

   .work-in-progress {
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: #17a2b8; /* Colore del cartellino */
      color: #ffffff; /* Colore del testo del cartellino */
      padding: 5px 10px;
      border-radius: 5px;
      font-size: 12px;
    }

/* Rimuoviamo il contorno quando il menu è attivo */
.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

/* Hamburger icon */
.navbar-toggler .bar {
  width: 30px;
  height: 4px;
  background-color: white;
  margin: 5px 0;
  transition: all 0.3s ease;
}

/* Trasformazione da hamburger a X */
.navbar-toggler.change .bar:nth-child(1) {
  transform: rotate(45deg);
  position: relative;
  top: 9px;
}

.navbar-toggler.change .bar:nth-child(2) {
  opacity: 0;
}

.navbar-toggler.change .bar:nth-child(3) {
  transform: rotate(-45deg);
  position: relative;
  bottom: 9px;
}

/* Stile per il menu da mobile */
@media (max-width: 991px) { 
  .navbar-collapse {
    opacity: 0;
    max-height: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease, max-height 0.4s ease;
  }

  /* Quando il menu è aperto */
  .navbar-collapse.show {
    opacity: 1;
    max-height: 100vh;
    visibility: visible;
  }
}

/* Testo in maiuscolo per le voci del menu */
.navbar-nav .nav-link {
  text-transform: uppercase;
  font-weight: bold;
}

/* Navbar */
.navbar-toggler {
  border: none;
  outline: none;
  padding: 0;
  background: transparent;
}

/* Stile per l'icona hamburger */
.navbar-toggler .bar {
  display: block;
  width: 30px;
  height: 3px;
  margin: 6px auto;
  background-color: white;
  transition: all 0.3s ease-in-out;
}

/* nuovo css per dropdown menu */

/* Assicura che il dropdown funzioni correttamente */
@media (max-width: 991px) {
  .dropdown-menu {
    display: none;
    position: static;
    width: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.9);
  }
  .dropdown.show .dropdown-menu {
    display: block;
  }
  .dropdown-item {
    color: white;
  }
  .dropdown-item:hover {
    background: #444;
  }
}

@media (min-width: 992px) {
  .dropdown-menu {
    background-color: black !important; /* Sfondo nero */
  }
  .dropdown-item {
    color: white !important; /* Testo bianco */
  }
  .dropdown-item:hover,
  .dropdown-item:focus {
    background-color: black !important; /* Niente cambio colore in hover */
    color: white !important;
  }
}

@media (max-width: 991px) {
  .dropdown-menu {
    background-color: black !important; /* Sfondo nero */
    border: none; /* Rimuove eventuali bordi */
  }
  .dropdown-item {
    color: white !important; /* Testo bianco */
    font-size: 24px !important; /* Aumenta la dimensione del testo */
  }
  .dropdown-item:hover,
  .dropdown-item:focus {
    background-color: black !important; /* Nessun cambio colore */
    color: white !important;
  }
}

/* Rendi "Servizi" cliccabile e non cambiare colore al passaggio del mouse */
.nav-item.dropdown:hover > .dropdown-menu {
  display: block;
  z-index: 1;  /* Assicurati che il menu a tendina non copra il link */
}

.nav-item.dropdown > a {
  position: relative; /* Rende "Servizi" cliccabile sopra la tendina */
  z-index: 2; /* Fa sì che "Servizi" sia sopra il menu a tendina */
}

.nav-item > a:hover {
  color: white !important; /* Non cambia colore al passaggio sopra, per tutte le voci */
}

.nav-item > .dropdown-menu {
  display: none;
}



.accordion-item {
            background-color: transparent;
            border-radius: 15px;
            transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
        }
        .accordion-button {
			margin-top: 10px;
			font-size: 1.2rem;
            background-color: transparent!important;
            color: #ffffff !important;
            border-radius: 15px;
        }
        .accordion-button:not(.collapsed) {
            color: #ffffff !important;
            background-color: black;
        }
        .accordion-body {
			color: #ffffff !important;        }

.accordion-collapse {
	width: 90% !important;
}
/* Rimuovere il bordo blu alla selezione */
.accordion-button:focus {
    box-shadow: none !important; /* Rimuove il bordo blu */
    outline: none !important; /* Rimuove l'outline */
}

.accordion-button:not(.collapsed) { 
color: #ffffff !important;
}
.accordion-button::after {
    filter: invert(1); /* Inverte il colore della freccia */
}

.accordion-button:not(.collapsed)::after,
.accordion-button.collapsed::after {
    color: white !important;
}



.accordion-button::after {
    filter: brightness(0) invert(1); /* Trasforma il colore in bianco */
}




/* Animazione per la discesa della tendina */
.accordion-collapse {
  transition: height 0.4s ease-in-out;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.accordion-collapse.collapse.show {
  opacity: 1;
  height: auto;
  transition: height 0.2s ease-in-out, opacity 0.1s ease-in-out; /* Più veloce per la visibilità del testo */
}

/* test */


.accordion-button h3 {
	font-size: 1.3rem;
	width: 80%;
}