/* ========================
   CSS per il Logo Animato
   ======================== */
   html {
    scroll-behavior: smooth;
  }
/* Impostazioni di base per centrare il logo all’interno del main-section */

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
  color: black;
  font-size: 5.5vh;
}

#tutto {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 30vh;
  margin: 0 auto;
}
#scritt{
  display: flex;
  align-items: baseline;
  justify-content: left;
}
header{
  background: linear-gradient(to right, #ffffff, /*#ffffff,*/ #fa3a3a, #ff1111, #fa3a3a, /*#ffffff,*/ #ffffff);
  height: 12.7vh;
  width: 99.9%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  box-shadow: 0vh 0.5vh 1vh rgba(0,0,0,0.3);
  position: fixed;
  top: 0;
  transition: top 0.3s;
  z-index: 1000;
}

main{
  padding-top: 8vh;
}

#dropbtn{
  background:none;
  border: none;
  cursor: pointer;
}

#dropdown{
  margin-left: 1vh;
  position: relative;
  display: inline-block;
}

#drop{
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  transition: opacity 1s ease, transform 1s ease;
  position: absolute;
  min-width: 40vh;
  box-shadow: 0vh 2vh 4vh rgba(0,0,0,0.3);
  z-index: 1;
  background-color: red;
  border: solid 1px white;
}

#drop a{
  color: white;
  border:solid 2px #fff;
  padding: 3vh;
  text-decoration: none; 
  display: block;
  font-size: medium;
}

#drop a:hover{
  background-color: rgb(214, 0, 0);
}

#dropdown:hover #drop{
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

#scrit{
  display: flex;
  margin-right: 1vh;
}

#scritt img{
width: 40vh;
}

#imm img{
  width: 15vh;
  display: flex;
  align-items: center;
  text-align: center;
}

.link_head{
  color: white;
  text-decoration: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 20pt;
  flex-grow: 1;
  font-weight: bolder;
}
p{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
h6{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: lighter;
  font-size: 22pt;
  color: white;
}
#termi{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 11pt;
  color: white;
}
hr{
  border:dashed 3px red;
  margin-left: 8%;
  margin-right: 8%;
}
#contenitore {
  position: relative;
  width: 82vh;
  text-align: center;  

}

#onde {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;      
}

.onda {
  position: absolute;
  margin-left: 5vh;
}

#onde1 {
  top: 0vh; 
  opacity: 0;
}
#onde2 {
  top: -8.2vh; 
  opacity: 0;
}
#onde3 {
  top: -17.8vh; 
  opacity: 0;
}
#onde4 {
  top: -30.1vh; 
  opacity: 0;
}

#onde img {
  max-width: 100%;
  /*height: auto;*/
}

#onde1 img {
  width: 60%;
}
#onde2 img {
  width: 60%;
}
#onde3 img {
  width: 65%;
}
#onde4 img {
  width: 90%;
}

#scritte {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8.2vh;
  position: relative;
}

#comm {
  height: 8.9vh;
  opacity: 0;
}

#comm, #ndly, #ja, #a {
  position: relative;
  display: inline-block;
  margin: 0;
}

#comm img, 
#ndly img, 
#a img, 
#ja img {
  max-width: 100%;
}

#comm {
  margin-right: -0.8vh;
  opacity: 0;
}

#ndly {
  margin-left: -4.1vh; 
  opacity: 0;
}

#ja {
  margin-left: -1.3vh;
  margin-top: 4.1vh;
  opacity: 0;
}

/* Animazioni */
#a {
  animation-name: a;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}

#comm {
  animation-name: sinistra;
  animation-duration: 0.6s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
}

#ndly {
  animation-name: destra;
  animation-duration: 0.6s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
}

#ja {
  animation-name: destra;
  animation-duration: 0.4s;
  animation-delay: 2.8s;
  animation-fill-mode: forwards;
}

#onde1 {
  animation-name: basso;
  animation-duration: 0.4s;
  animation-delay: 1.4s;
  animation-fill-mode: forwards;
}

#onde2 {
  animation-name: medioB;
  animation-duration: 0.4s;
  animation-delay: 1.8s;
  animation-fill-mode: forwards;
}

#onde3 {
  animation-name: medioA;
  animation-duration: 0.4s;
  animation-delay: 2.2s;
  animation-fill-mode: forwards;
}

#onde4 {
  animation-name: alto;
  animation-duration: 0.4s;
  animation-delay: 2.6s;
  animation-fill-mode: forwards;
}

@keyframes a {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes sinistra {
  0% { right: 0%; opacity: 0; }
  1% { right: 100%; }
  100% { right: 0%; opacity: 1; }
}

@keyframes destra {
  0% { left: 0%; opacity: 0; }
  1% { left: 100%; }
  100% { left: 0%; opacity: 1; }
}

@keyframes basso {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes medioB {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes medioA {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes alto {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@media (max-width: 82vh) {
  #contenitore { width: 95%; }
  #onde1 img { width: 60%; }
  #onde2 img { width: 70%; }
  #onde3 img { width: 80%; }
  #onde4 img { width: 90%; }
}

/*
  visualizzazione da telefono
*/

.mobileOnly
{
  display: none;
  width: 100%;
}
.mobileOnly img{
  width: 100%;
  margin-top: 0%;
}

.desktopOnly
{
  display: block;
}
#logo{
    width: 70%;
}
@media(max-width: 767px)
{
  .link_head{
    font-size: 14pt;

  }
  #scritt img{
    width: 15vh;
    }

  .mobileOnly
  {
    display: block;
  }
  .desktopOnly
  {
    display: none;
  }
  #back:nth-child(1){
    order:2;
  }
  .text-content:nth-child(2)
  {
    order: 1;
  }
  header{
    height: 70px;
  }
  .main-section {
    /* L’altezza è impostata su auto per contenere il logo animato */
    margin-top: 4vh;
    margin-bottom: 4vh;
  }
  h6{
    font-size: 8pt;
    
  }
  #termi{
    font-size: 8pt;
  }
}
@media(min-width:768px) and (max-width: 1024px)
{
  header{
    background: linear-gradient(to right, #ffffff, #ffffff, #ffffff,#fa3a3a, #ff1111, #fa3a3a,#ffffff, #ffffff, #ffffff);
  }
  .link_head{

    font-size: 14pt;

  }
  #scritt img{
    width: 16vh;
    }

  .mobileOnly
  {
    display: block;
  }
  .desktopOnly
  {
    display: none;
  }
  #back:nth-child(1){
    order:2;
  }
  .text-content:nth-child(2)
  {
    order: 1;

  }
  header{
    height: 80px;
  }
  .main-section {
    /* L’altezza è impostata su auto per contenere il logo animato */
    margin-top: 5vh;
    margin-bottom: 4vh;
  }
  h6{
    font-size: 8pt;

  }
  #termi{
    font-size: 8pt;
  }
}
/* ========================
    CSS della Pagina Home
 ======================== */

/* Impostazioni generali */
body {
  background-color: white;
  color: #333;
  font-family: 'Playfair Display', serif;
  margin: 0;
  padding: 0;
}

/* Main Section */
@media(min-width:1024px)
{
  .main-section{
    margin-top: 33vh;
    margin-bottom: 10vh;
  }
}
.main-section {
  /* L’altezza è impostata su auto per contenere il logo animato */
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3vh;
}

.section-text {
  text-align: center;
  font-size: 3vh;
  max-width: 70%;
}

.discover-button {
  width: 25vh;
  height: 7vh;
  padding: 10px 20px;
  background-color: red;
  color: white;
  font-size: 3vh;
  border: none;
  border-radius: 1vh;
  cursor: pointer;
  transition: background 0.3s;
}

.discover-button:hover {
  background-color: darkred;
}

/* Sezioni Chi Siamo e Servizi */
.about-section,
.services-section {
  display: flex;
  align-items: center;
  justify-content: center;
  /*padding: 5vh 0;*/
}

.about-section {
  margin-bottom: 5vh;
}

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 95%;
}

.section-image {
  width: 25%;
  border-radius: 2vh;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
}

.text-content {
  width: 60%;
  padding-left: 10vh;
  margin-bottom: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

}

.section-title {
  font-size: 7vh;
  font-weight: bold;
  color: red;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Footer */
.footer {
  background-color: rgb(255, 46, 46);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2vh;
  margin-top: 15vh;
}

.card {
  display: flex;
  gap: 3vh;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 2vh;
}

/* Social Containers */
.socialContainer {
  width: 8vh;
  height: 8vh;
  border-radius: 1.5vh;
  background-color: rgb(44, 44, 44);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, transform 0.2s ease-in-out;
  cursor: pointer;
}

.socialContainer:active {
  transform: scale(0.9);
}

/* Hover Colors per container */
.containerOne:hover { background-color: #d62976; }   /* Instagram */
.containerTwo:hover { background-color: #25f4ee; }   /* TikTok */
.containerThree:hover { background-color: #1877f2; } /* Facebook */
.containerFour:hover { background-color: #ffcc00; }  /* Email */

/* Icone */
.socialSvg {
  width: 50%;
  height: 50%;
  fill: #fff;
}

.emailSvg {
  width: 55%;
  height: 55%;
}

/* Animazione hover */
.socialContainer:hover .socialSvg {
  animation: slide-in-top 0.3s both;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-50%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Media Queries per dispositivi piccoli */
@media (max-width: 800px) {
  .about-section,
.services-section {
  display: flex;
  align-items: center;
  justify-content: center;
}

  .main-section { 
    height: auto; 
    padding: 5vh; 
  }
  .section-text { 
    font-size: 1rem;
  }
  .text-content { 
    text-align: center; 
    width: 95%; 
    padding-left: 0; 
    margin-bottom: 5vh; 
  }
  .section-image { 
    width: 50%; 
    margin-bottom: 2vh; 
  }
  .card { 
    gap: 2vh; 
    padding: 2vh; 
  }
  .socialContainer { 
    width: 6vh; 
    height: 6vh; 
  }
  h6{
    font-size: 8pt;

  }
  #termi{
    font-size: 8pt;
  }
}
#col
{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}





/*
#scritte span img {
  filter: drop-shadow(0 0 10px rgba(255, 0, 100, 0.5));
  transition: transform 0.3s ease;
}
#scritte span:hover img {
  transform: scale(1.05);
}
*/

/*
.about-section, .services-section {
  background: linear-gradient(135deg, #f9f9f9, #fff);
  border-radius: 2rem;
  padding: 2rem;
  margin: 3rem auto;
  box-shadow: 0 0 20px rgba(0,0,0,0.05);
  
}
.section-title {

  font-size: 2.5rem;
  color: #C70039;
}*/