body { font-family: Optima; margin: 0; padding: 0; background-color: white;}
header { font-family: Optima; background-color: #2ea2cc; color: white; text-align: center; padding: 1px;}
section { font-family: Optima; padding: 0px; text-align: center;}
.benefici { font-family: Optima; background-color: white; color:black; padding: 20px; margin: 10px; border-radius: 8px; box-shadow: 0 0 10px rgb(255,255,255,0.1); }
.informazioni { font-family: Optima; background-color: white; color:black; padding: 20px; margin: 10px; border-radius: 8px; box-shadow: 0 0 10px rgb(255,255,255,0.1); }
.whatsapp { font-family: Optima; text-align: center; margin: 20px; }
/* .whatsapp a { background-color: #25d366; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none; font-size: 18px; } */
* {box-sizing: border-box}

body h1, h2, h3, h4 {
  color: #555;
}

span {
  color: white;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

.main {
  padding: 16px;
  margin-top: 65px;
  height: auto; /* Used in this example to enable scrolling */
}

/* Style tab links */
.tablink {
  background-color: #555;
  color: rgb(255, 255, 255);
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-family: Optima;
  width: 25%;
}

.linktab {
  background-color: #555;
  color: rgb(255, 255, 255);
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-family: Optima;
  width: 25%;
}

.tablink:hover {
  background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: rgb(0, 0, 0);
  display: none;
  padding: 100px 20px;
  height: 100%;
}

.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 30%;
  height: 300px;
}

.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

#Home {background-color: white; color:#2ea2cc; text-align: center;}
#Tecniche {background-color: white; color:#2ea2cc; text-align: center;}
#Contatti {background-color: white; color:#2ea2cc; text-align: center;}
#ChiSono {background-color: white; color:#2ea2cc; text-align: center;}
#RP {background-color: white; color:#2ea2cc; text-align: center;}
#AK {background-color: white; color:#2ea2cc; text-align: center;}
#MTC {background-color: white; color:#2ea2cc; text-align: center;}

.immagine {
  width: 200px;
  height: auto;
  object-fit: contain;
}

#minimenu {
  width:100%;
  display: flex;
  justify-content: center;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  /* width: 100%; */
  text-align: center; 
  justify-content: center;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
  padding: 2px 16px;
  color: #2ea2cc;
}

#griglia {
  padding: 0;
  margin: 0;
}

#griglia > li {
  display: inline-block;
  background-color: #ffffff;
  margin-bottom: 1%;
}

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #2ea2cc;
   color: white;
   text-align: center;
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 15px;
  z-index: 1000;
}

.cookie-banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cookie-banner button {
  background-color: #2ea2cc;
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.cookie-banner button:hover {
  background-color: #144a5d;
}

@media screen and (min-width: 280px) {
  body, header, section, .benefici, .informazioni, .whatsapp, .tablink, .linktab {
    font-size: 10px;
  }
}
@media screen and (min-width: 480px) {
  body, header, section, .benefici, .informazioni, .whatsapp, .tablink, .linktab {
    font-size: 12px;
  }
}
@media screen and (min-width: 768px) {
  body, header, section, .benefici, .informazioni, .whatsapp, .tablink, .linktab {
    font-size: 14px;
  }
}
@media screen and (min-width: 1024px) {
  body, header, section, .benefici, .informazioni, .whatsapp, .tablink, .linktab {
    font-size: 15px;
  }
}
@media screen and (min-width: 1200px) {
  body, header, section, .benefici, .informazioni, .whatsapp, .tablink, .linktab {
        font-size: 16px;

  }
}