/* ---------- GLOBAL ---------- */
body{
  font-family: 'Arial', sans-serif;
  margin:0;
  color:#333;
  background: linear-gradient(135deg, #00bfff, #ff7f50);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  min-height:100vh;
}

/* animazione gradiente */
@keyframes gradientBG {
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* ---------- HEADER ---------- */
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 40px;
  background:rgba(0,0,0,0.8);
  color:white;
  position:sticky;
  top:0;
  z-index:100;
}
header .logo a{
  text-decoration:none;
  color:white;
  font-weight:bold;
  font-size:22px;
}
nav{
  display:flex;
  gap:25px;
}
nav a{
  color:white;
  text-decoration:none;
  font-weight:bold;
  transition:color 0.3s;
}
nav a:hover{
  color:#ffec00;
}
.menu-toggle{
  display:none;
  font-size:28px;
  cursor:pointer;
}

/* ---------- SEZIONE CONTATTI ---------- */
.contacts{
  max-width:1200px;
  margin:80px auto;
  padding:0 20px 60px 20px;
}
.contacts h1{
  text-align:center;
  margin-bottom:15px;
  font-size:36px;
  color:white;
  text-shadow:1px 1px 4px rgba(0,0,0,0.5);
}
.contacts .intro{
  text-align:center;
  font-size:18px;
  margin-bottom:50px;
  color:#f0f0f0;
}

/* Grid cards */
.contacts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px;
}

/* Card contatti */
.contact-card{
  background:rgba(255,255,255,0.95);
  padding:25px;
  border-radius:15px;
  text-align:center;
  box-shadow:0 8px 25px rgba(0,0,0,0.2);
  transition: transform 0.4s, box-shadow 0.4s, background 0.4s, color 0.4s;
  backdrop-filter: blur(5px);
  opacity:0;
  transform: translateY(20px);
  animation: fadeSlideIn 0.8s forwards;
}
.contact-card:nth-child(1){animation-delay:0.1s;}
.contact-card:nth-child(2){animation-delay:0.2s;}
.contact-card:nth-child(3){animation-delay:0.3s;}
.contact-card:nth-child(4){animation-delay:0.4s;}

@keyframes fadeSlideIn{
  to {opacity:1; transform: translateY(0);}
}

/* Hover più dinamico */
.contact-card:hover{
  transform: translateY(-8px) scale(1.03);
  box-shadow:0 14px 35px rgba(0,0,0,0.3);
  background:rgba(255,255,255,1);
}

/* Titoli con icone */
.contact-card h3{
  font-size:22px;
  margin-bottom:10px;
  color:#222;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.contact-card h3::before{
  content:"📧"; /* default icona */
}
.contact-card:nth-child(2) h3::before{content:"📞";}
.contact-card:nth-child(3) h3::before{content:"📍";}
.contact-card:nth-child(4) h3::before{content:"🌐";}

.contact-card p{
  font-size:16px;
  color:#555;
}
.contact-card a{
  color:#00bfff;
  text-decoration:none;
  font-weight:bold;
  transition: color 0.3s;
}
.contact-card a:hover{
  color:#ff7f50;
  text-decoration:underline;
}

/* ---------- FOOTER ---------- */
footer{
  background:rgba(0,0,0,0.85);
  color:white;
  padding:40px 10%;
}
footer .footer-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
}
footer h3{
  margin-bottom:10px;
}
footer p{
  font-size:14px;
  line-height:1.5;
}
footer a{
  color:#00bfff;
  text-decoration:none;
}
footer a:hover{
  text-decoration:underline;
}
footer .copyright{
  text-align:center;
  margin-top:30px;
  font-size:14px;
}

/* ---------- MOBILE ---------- */
@media(max-width:768px){
  header { padding:10px 14px; }

  nav{
    display:none;
    flex-direction:column;
    position:absolute;
    top:56px; left:0; right:0;
    background:rgba(0,0,0,.97);
    padding:12px 18px;
    border-radius:0 0 12px 12px;
    z-index:200; gap:2px;
  }
  nav.open { display:flex; }
  nav a { padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:13px; width:100%; }
  .menu-toggle{ display:block; color:white; font-size:24px; }

  .contacts { margin:24px 8px; padding:0 0 28px; }
  .contacts h1 { font-size:22px; }
  .contacts .intro { font-size:13px; margin-bottom:20px; }

  /* 2 colonne per le card contatti */
  .contacts-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .contact-card { padding:14px; border-radius:10px; }
  .contact-card h3 { font-size:14px; }
  .contact-card p { font-size:12px; }
  .contact-card a { font-size:12px; }

  footer { padding:20px 4%; }
  .footer-container { grid-template-columns:1fr 1fr; gap:12px; }
  footer h3 { font-size:13px; }
  footer p { font-size:11px; }
}
@media(max-width:380px){
  .contacts-grid { grid-template-columns:1fr; }
  .contacts h1 { font-size:18px; }
}