*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
 
@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);

 body
 {
  font-family: "Noto Sans", sans-serif;
  text-align: center;
   margin: 0;
   padding: 0;
   color: black;
   overflow-x: hidden; 
 }

 h1 {
  font-size: 1vw;
 }

 a {
  color: black;
  text-decoration: none;
  font-family: "Noto Sans", sans-serif;
}
 a:hover {
  color: #006d8b;
}

.logobrunello:hover img {
  transform: scale(1.1);
}

 img {
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  transition: transform 0.3s ease;
  border-radius: 5px;
}

img:hover {
  transform: scale(1.05);
}



.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px; /* Adjust as needed */
  padding-bottom: 10px;
  box-sizing: border-box; /* Adjust as needed */
  position: relative; 
  z-index: 34;
  margin-top: 50px;

}

.grid-item {
  flex: 1 1 33.33%; /* 3 items per row */
  max-width: 33.33%;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  display: block;
  position: relative; 
  padding-bottom: 40px; 
} 
 
.grid-item img {
  width: 100%;
  height: auto;
  display: block;
}

.grid-item:hover img {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

@media screen and (max-width: 768px) {
  .grid-item {
    flex: 1 1 50%; /* 2 items per row */
    max-width: 50%;
  }
}

@media screen and (max-width: 480px) {
  .grid-item {
    flex: 1 1 100%; /* 1 item per row */
    max-width: 100%;
  }
}

.grid-item img {
  width: 100%; 
  height: auto;
  display: block;
  transition: transform 0.3s ease; /* Added transition property here */
}

.grid-item:hover img {
  transform: scale(1.05);
}

.grid-item img:not(:hover) {
  transform: scale(1); /* Added to smoothly scale back when not hovering */
}

b{
  width: 900px;
  display: inline-block;
}

.testoA{
  font-size: 15px;
  width: 80%;
  color:black;
  font-family: "Gotham-Light";
  margin:0 auto;
  padding-bottom: 20px;
}





.hero-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh; /* Ensure slider covers the entire viewport */
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease; /* Animation duration */
}

.slide.active {
  opacity: 1;
}

.logo-container {
  margin-left: 30px;
  margin-top: 30px;
}

.logo-main {
  max-width: 100%;
  height: auto;
  max-height: 450px;
}



.image-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Center the items */
  margin-bottom: 50px;
  position: relative; /* Add position relative */
  z-index: 1; /* Ensure the image section appears above the grid */
}

.image-wrapper {
  flex: 0 0 calc(33.33% - 20px); /* Initially, show three images in a row */
  margin-bottom: 50px;
  text-align: center;
  position: relative; /* Add position relative */
  height: 300px; /* Set taller height for image container */
  padding: 20px; /* Adjust as needed */
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Maintain aspect ratio and cover container */
  transition: transform 0.3s ease; /* Add transition for hovering effect */
  margin: 10px; /* Add margin for spacing between images */
}

.image-wrapper h5 {
  margin-top: 10px;
  color: black;
  transition: color 0.3s;
}

.image-wrapper h5:hover {
  color: #006d8b;
}

/* Add hovering effect */
.image-wrapper:hover img {
  transform: scale(1.05);
}

/* Adjust layout for smaller screens */
@media screen and (max-width: 1200px) {
  .image-wrapper {
    flex-basis: calc(33.33% - 20px);
  }
}

@media screen and (max-width: 768px) {
  .image-wrapper {
    flex-basis: calc(50% - 20px);
  }
}

@media screen and (max-width: 480px) {
  .image-wrapper {
    flex-basis: calc(100% - 20px);
  }
}



.footer {
  background-color: #f9f9f9;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

@media screen and (max-width: 600px) {
  .footer {
      flex-wrap: wrap;
      justify-content: center; /* Center items when screen is resized */
  }

  .social-icons a {
    margin-bottom: 10px;
  }

}

.footer-left, .footer-right {
  display: flex;
  flex-direction: column;
}

.logo-footer img {
  width: 200px; /* Adjust size as needed */
  margin-left: 20px;
}

.links {
  margin-bottom: auto; /* Pushes the links to the top of the container */
}

.links a {
  color: #333;
  text-decoration: none;
  margin-top: 20px;
  margin-bottom: 20px; 
  margin-left: 20px;
  transition: color 0.3s; 
}

.links a:hover {
  color: #006d8b;
}

.social-icons {
  margin-bottom: auto; /* Pushes the social icons to the top of the container */
  align-items: center;
  font-size: 30px;
  margin-right: 20px; 
}

.social-icons a:hover {
  color: #006d8b;
}

.social-icons a {
  color: #333;
  text-decoration: none;
  margin-bottom: 20px;
  padding-bottom: 20px;
  padding: 10px; 
  transition: color 0.3s; 
}

.copyright p {
  margin: 0;
  color: #666;
  margin-right: 20px;
  max-width: 100%;
  font-family: "Noto Sans", sans-serif;
}