/* Reset generale e impostazioni base */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  transition: all 0.3s ease;

}



body {

  background-color: #E0E1DD; /* Light background from image 3 */

  font-family: 'Nunito Sans', sans-serif;

  overflow-x: hidden;

}



/* ===== HEADER E MENU PRINCIPALE ===== */

.logo {

  text-align: center;

  width: 100%;

  padding: 15px 0;

  background: linear-gradient(135deg, #CAD2C5 0%, #84A98C 100%); /* Gradient from image 1 */

  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);

  position: relative;

  z-index: 100;

}



.logo h3 {

  font-weight: 800;

  font-family: "Kanit", sans-serif;

  font-size: 2.8rem;

  letter-spacing: 1px;

  color: #1B263B; /* Dark color from image 2 */

  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);

  animation: fadeIn 1.2s ease-out;

}



.logo::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  height: 3px;

  width: 100%;

  background: linear-gradient(90deg, #52796F, #354F52, #52796F); /* Colors from image 1 */

  background-size: 200% 100%;

  animation: gradientBorder 3s linear infinite;

}



/* Navbar principale */

.navbar {

  background-color: #1B263B; /* Dark navy from image 2 */

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  position: sticky;

  top: 0;

  z-index: 99;

}



.navbar-nav {

  margin: auto;

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: transparent;

}



.nav-item {

  position: relative;

  margin: 0 2px;

}



.nav-link {

  color: #E0E1DD !important; /* Light color from image 3 */

  font-weight: 600;

  font-size: 1.1rem;

  padding: 12px 20px !important;

  position: relative;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  overflow: hidden;

}



.nav-link::before {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 3px;

  background-color: #52796F; /* Teal from image 1 */

  transform: scaleX(0);

  transform-origin: right;

  transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);

}



.nav-link:hover {

  color: #84A98C !important; /* Medium green from image 1 */

  transform: translateY(-2px);

}



.nav-link:hover::before {

  transform: scaleX(1);

  transform-origin: left;

}



/* Hamburger Toggle Button */

.navbar-toggler {

  display: none;

  background-color: transparent;

  border: none;

  width: 40px;

  height: 40px;

  position: relative;

  z-index: 1001;

  margin-right: 15px;

}



.navbar-toggler:focus {

  outline: none;

  box-shadow: none;

}



/* ===== MAIN CONTENT ===== */

.main-content {

  width: 100%;

  height: 90vh;

  background-image: url(../images/jpg/immagine\ principale\ pc.jpg);

  background-size: cover;

  background-position: center;

  position: relative;

  animation: fadeIn 1.5s ease-out;

}



@media (max-width: 1024px) {

  .main-content {

    background-position: center top;

    background-size: cover;

    height: 70vh; /* Riduce l’altezza su schermi più piccoli */

  }



  .content {

    margin-top: 100px;

    margin-left: 20px;

    margin-right: 20px;

    text-align: center;

  }



  .content h1 {

    font-size: 2rem;

  }

  .content p {

    font-size: 1rem;

    max-width: 90%;

    margin-left: auto;

    margin-right: auto;

  }



  #btn1 {

    display: flex;

    justify-content: center;

  }

}



.content {

  position: relative;

  margin-top: 150px;

  margin-left: 60px;

  color: white;

  z-index: 2;

  animation: slideUp 1.2s ease-out;

}



.content h1 {

  font-size: 3rem;

  font-weight: 800;

  margin-bottom: 20px;

  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

}



.content p {

  font-size: 1.2rem;

  margin-bottom: 30px;

  max-width: 600px;

}



/* Call to action button */

#btn1 button {

  width: 180px;

  height: 45px;

  background: transparent;

  border: 2px solid #52796F; /* Teal from image 1 */

  border-radius: 30px;

  font-size: 1rem;

  font-weight: 600;

  letter-spacing: 2px;

  color: white;

  overflow: hidden;

  position: relative;

  z-index: 1;

  cursor: pointer;

}



#btn1 button::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 0%;

  height: 100%;

  background-color: #52796F; /* Teal from image 1 */

  z-index: -1;

  transition: width 0.4s cubic-bezier(0.86, 0, 0.07, 1);

}



#btn1 button:hover::before {

  width: 100%;

}



#btn1 button:hover {

  color: white;

  transform: translateY(-3px);

  box-shadow: 0 10px 20px rgba(82, 121, 111, 0.3); /* Teal shadow from image 1 */

}



.buy-now a {

  color: white;

  text-decoration: none;

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* ===== SEZIONE SERVIZI ===== */

.container h3.text-center {

  margin-top: 60px;

  margin-bottom: 20px;

  font-size: 2.2rem;

  font-weight: 700;

  color: #1B263B; /* Dark navy from image 2 */

  position: relative;

  display: inline-block;

  left: 50%;

  transform: translateX(-50%);

}



.container h3.text-center::after {

  content: '';

  position: absolute;

  bottom: -10px;

  width: 60px;

  height: 3px;

  background: #52796F; /* Teal from image 1 */

  left: 50%;

  transform: translateX(-50%);

  transition: width 0.3s ease;

}



.container h3.text-center:hover::after {

  width: 120px;

}



.card {

  border-radius: 12px;

  overflow: hidden;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

  transition: transform 0.4s ease, box-shadow 0.4s ease;

  margin-bottom: 25px;

  border: none;

}



.card:hover {

  transform: translateY(-10px);

  box-shadow: 0 15px 30px rgba(82, 121, 111, 0.2); /* Teal shadow from image 1 */

}



.card-body {

  padding: 20px;

}



.card-titel {

  font-weight: 700;

  color: #1B263B; /* Dark navy from image 2 */

  margin-bottom: 15px;

}



.card-text {

  color: #6C757D; /* Medium gray from image 3 */

}



#btn3 {

  display: flex;

  justify-content: center;

  margin-top: 20px;

}



#btn3 button {

  width: 160px;

  height: 40px;

  background: transparent;

  border: 2px solid #1B263B; /* Dark navy from image 2 */

  border-radius: 5px;

  font-weight: 600;

  color: #1B263B; /* Dark navy from image 2 */

  transition: all 0.3s ease;

  cursor: pointer;

}



#btn3 button:hover {

  background-color: #1B263B; /* Dark navy from image 2 */

  color: white;

  box-shadow: 0 5px 15px rgba(27, 38, 59, 0.3); /* Dark navy shadow from image 2 */

}



/* ===== SEZIONE PRODOTTI CON TAB ===== */

.product-tabs {

  display: flex;

  justify-content: center;

  margin-top: 60px;

  margin-bottom: 40px;

}



.tab-btn {

  padding: 12px 25px;

  margin: 0 10px;

  font-size: 1rem;

  font-weight: 600;

  background: transparent;

  border: 2px solid #1B263B; /* Dark navy from image 2 */

  border-radius: 30px;

  cursor: pointer;

  color: #1B263B; /* Dark navy from image 2 */

  transition: all 0.3s ease;

  position: relative;

  overflow: hidden;

}



.tab-btn::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(82, 121, 111, 0.2), transparent); /* Teal from image 1 with opacity */

  transition: left 0.5s ease;

}



.tab-btn:hover::before {

  left: 100%;

}



.tab-btn:hover {

  border-color: #52796F; /* Teal from image 1 */

  color: #52796F; /* Teal from image 1 */

  transform: translateY(-3px);

}



.tab-btn.active {

  background-color: #52796F; /* Teal from image 1 */

  color: white;

  border-color: #52796F; /* Teal from image 1 */

  box-shadow: 0 5px 15px rgba(82, 121, 111, 0.4); /* Teal shadow from image 1 */

}



.product-section {

  display: none;

  animation: fadeIn 0.6s ease;

}



.product-section.active {

  display: block;

}



/* ===== CONTATTACI BANNER ===== */

.computerpage-contact {

  background: linear-gradient(135deg, #415A77, #52796F); /* Gradient from image 2 */

  padding: 60px 30px;

  text-align: center;

  color: white;

  margin: 60px 0;

  border-radius: 10px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

}



.computerpage-contact h3 {

  font-size: 2rem;

  font-weight: 700;

  margin-bottom: 20px;

}



.computerpage-contact p {

  font-size: 1.2rem;

  margin-bottom: 30px;

  max-width: 700px;

  margin-left: auto;

  margin-right: auto;

  color: #ffffff;

}



.preventivo-button:hover a {

  color: #E8E6E6; /* Medium blue from image 2 */

}



/* ===== FOOTER ===== */

footer {

  background: linear-gradient(135deg, #1B263B 0%, #212529 100%); /* Dark gradient from images 2 and 3 */

  color: #fff;

  padding: 80px 0 30px;

  position: relative;

  overflow: hidden;

}



footer::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 4px;

  background: linear-gradient(90deg, #52796F, #354F52, #52796F); /* Gradient from image 1 */

  background-size: 200% 100%;

  animation: gradientBorder 3s linear infinite;

}



@keyframes gradientBorder {

  0% { background-position: 0% 50%; }

  50% { background-position: 100% 50%; }

  100% { background-position: 0% 50%; }

}



.footer-container {

  width: 90%;

  max-width: 1200px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 40px;

}



.footer-section h3 {

  font-size: 1.4rem;

  margin-bottom: 25px;

  position: relative;

  display: inline-block;

  color: #E0E1DD; /* Light color from image 3 */

}



.footer-section h3::after {

  content: '';

  position: absolute;

  bottom: -10px;

  left: 0;

  width: 40px;

  height: 3px;

  background: #52796F; /* Teal from image 1 */

  transition: width 0.3s ease;

}



.footer-section:hover h3::after {

  width: 100%;

}



.footer-links {

  list-style: none;

}



.footer-links li {

  margin-bottom: 15px;

  position: relative;

  padding-left: 0;

  transition: all 0.3s ease;

}



.footer-links li::before {

  content: '→';

  position: absolute;

  left: -15px;

  opacity: 0;

  transition: all 0.3s ease;

  color: #52796F; /* Teal from image 1 */

}



.footer-links li:hover {

  padding-left: 12px;

}



.footer-links li:hover::before {

  left: 0;

  opacity: 1;

}



.footer-links a, .contatti-info a {

  color: #ADB5BD; /* Light gray from image 3 */

  text-decoration: none;

  transition: color 0.3s ease;

  font-size: 1rem;

}



.footer-links a:hover, .contatti-info a:hover {

  color: #84A98C; /* Medium green from image 1 */

}



.social-icons {

  display: flex;

  gap: 15px;

  margin-top: 25px;

}



.social-icon {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background-color: rgba(255, 255, 255, 0.1);

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.3s ease;

  cursor: pointer;

  position: relative;

  overflow: hidden;

}



.social-icon::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(135deg, #52796F, #354F52); /* Gradient from image 1 */

  opacity: 0;

  transition: opacity 0.3s ease;

  z-index: 1;

}



.social-icon:hover::before {

  opacity: 1;

}



.social-icon:hover {

  transform: translateY(-5px) rotate(360deg);

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}



.social-icon i {

  color: #fff;

  font-size: 1.2rem;

  position: relative;

  z-index: 2;

}



.contatti-info {

  margin-top: 20px;

}



.contatti-info p {

  display: flex;

  align-items: center;

  margin-bottom: 15px;

  color: #ADB5BD; /* Light gray from image 3 */

}



.contatti-info i {

  margin-right: 15px;

  color: #52796F; /* Teal from image 1 */

  width: 18px;

}



.copyright-bar {

  margin-top: 60px;

  padding-top: 20px;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  color: #6C757D; /* Medium gray from image 3 */

  font-size: 0.9rem;

  width: 90%;

  max-width: 1200px;

  margin-left: auto;

  margin-right: auto;

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 20px;

}



.company-info {

  display: flex;

  gap: 5px;

}



.company-info p {

  margin: 0;

}



.copyright {

  color: #6C757D; /* Medium gray from image 3 */

  font-size: 0.9rem;

}



.copyright a {

  color: #ADB5BD; /* Light gray from image 3 */

  text-decoration: none;

  transition: color 0.3s ease;

}



.copyright a:hover {

  color: #52796F; /* Teal from image 1 */

}



/* ===== COOKIE CONSENT ===== */

.wrapper {

  position: fixed;

  bottom: 30px;

  left: 30px;

  max-width: 365px;

  background: #fff;

  border-radius: 15px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);

  z-index: 9999;

  padding: 25px 25px 30px;

  display: none; /* Will be shown via JS */

  animation: slideUp 0.5s forwards;

}



.wrapper.show {

  display: block;

}



.wrapper header {

  display: flex;

  align-items: center;

  column-gap: 15px;

}



header i {

  font-size: 32px;

  color: #52796F; /* Teal from image 1 */

}



header h2 {

  font-size: 1.5rem;

  font-weight: 600;

  color: #1B263B; /* Dark navy from image 2 */

}



.wrapper .data {

  margin-top: 16px;

}



.wrapper .data p {

  font-size: 1rem;

  color: #6C757D; /* Medium gray from image 3 */

}



.wrapper .buttons {

  margin-top: 20px;

  display: flex;

  gap: 10px;

}



.buttons button {

  padding: 10px 20px;

  border: none;

  border-radius: 30px;

  font-size: 1rem;

  font-weight: 500;

  cursor: pointer;

  transition: all 0.3s ease;

}



#acceptBtn {

  background-color: #52796F; /* Teal from image 1 */

  color: #fff;

}



#acceptBtn:hover {

  background-color: #354F52; /* Darker teal from image 1 */

}



#declineBtn {

  background-color: #E0E1DD; /* Light color from image 3 */

  color: #1B263B; /* Dark navy from image 2 */

}



#declineBtn:hover {

  background-color: #CED4DA; /* Lighter gray from image 3 */

}



/* ===== KEYFRAMES ANIMATIONS ===== */

@keyframes fadeIn {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}



@keyframes slideUp {

  from {

    opacity: 0;

    transform: translateY(30px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes bounce {

  0%, 100% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-5px);

  }

}



/* ===== SCROLLBAR STYLING ===== */

::-webkit-scrollbar {

  width: 12px;

}



::-webkit-scrollbar-track {

  background: #E0E1DD; /* Light color from image 3 */

  border-radius: 10px;

}



::-webkit-scrollbar-thumb {

  background: linear-gradient(180deg, #52796F, #354F52); /* Gradient from image 1 */

  border-radius: 10px;

  border: 3px solid #E0E1DD; /* Light color from image 3 */

}



::-webkit-scrollbar-thumb:hover {

  background: linear-gradient(180deg, #354F52, #2F3E46); /* Darker gradient from image 1 */

}



/* ===== MEDIA QUERIES ===== */

@media screen and (max-width: 1024px) {

  .logo h3 {

    font-size: 2.2rem;

  }

  

  .nav-link {

    font-size: 0.95rem;

    padding: 10px 15px !important;

  }

  

  .content h1 {

    font-size: 2.5rem;

  }

  

  .content p {

    font-size: 1.1rem;

  }

}



@media screen and (max-width: 768px) {

  /* Menu hamburger */

  .navbar-toggler {

    display: block;

    position: absolute;

    top: 15px;

    right: 20px;

    padding: 10px;

    z-index: 1001;

    cursor: pointer;

  }

  

  .navbar-toggler::before,

  .navbar-toggler::after {

    content: '';

    display: block;

    width: 30px;

    height: 3px;

    background-color: #E0E1DD; /* Light color from image 3 */

    transition: all 0.3s ease;

  }

  

  .navbar-toggler::before {

    transform: translateY(-8px);

  }

  

  .navbar-toggler::after {

    transform: translateY(5px);

  }

  

  .navbar-toggler.active::before {

    transform: translateY(0) rotate(45deg);

  }

  

  .navbar-toggler.active::after {

    transform: translateY(-3px) rotate(-45deg);

  }

  

  /* Menu mobile */

  .navbar-collapse {

    display: none;

    position: fixed;

    top: 0;

    right: -100%;

    width: 70%;

    height: 100vh;

    background-color: #1B263B; /* Dark navy from image 2 */

    padding: 80px 20px 20px;

    transition: right 0.4s ease;

    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);

    overflow-y: auto;

    z-index: 1000;

  }

  

  .navbar-collapse.active {

    display: block;

    right: 0;

  }

  

  .navbar-nav {

    flex-direction: column;

    align-items: flex-start;

  }

  

  .nav-item {

    width: 100%;

    margin: 0;

  }

  

  .nav-link {

    display: block;

    width: 100%;

    padding: 15px 20px !important;

    font-size: 1.1rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  }

  

  .nav-link::before {

    display: none;

  }

  

  .nav-link:hover {

    background-color: rgba(255, 255, 255, 0.1);

    transform: translateY(0);

  }

  

  /* Content */

  .content {

    margin-left: 20px;

    margin-top: 100px;

  }

  

  .content h1 {

    font-size: 2rem;

  }

  

  /* Footer */

  .footer-container {

    grid-template-columns: repeat(2, 1fr);

  }

  

  /* Product tabs */

  .product-tabs {

    flex-direction: column;

    align-items: center;

    gap: 10px;

  }

  

  .tab-btn {

    width: 80%;

    text-align: center;

  }

}



@media screen and (max-width: 576px) {

  .logo h3 {

    font-size: 1.8rem;

  }

  

  .content {

    margin-left: 15px;

    margin-top: 80px;

  }

  

  .content h1 {

    font-size: 1.7rem;

  }

  

  .content p {

    font-size: 1rem;

  }

  

  #btn1 button {

    width: 150px;

    height: 40px;

    font-size: 0.9rem;

  }

  

  .container h3.text-center {

    font-size: 1.8rem;

  }

  

  .footer-container {

    grid-template-columns: 1fr;

  }

  

  .computerpage-contact h3 {

    font-size: 1.5rem;

  }

  

  .computerpage-contact p {

    font-size: 1rem;

  }

  

  .wrapper {

    left: 15px;

    right: 15px;

    max-width: none;

  }

  

  /* Navbar collapse width */

  .navbar-collapse {

    width: 85%;

  }

}









/* Animazione: luce in movimento */

@keyframes glowScroll {

  0% {

    background: linear-gradient(180deg, #222, #444, #666, #999);

  }

  50% {

    background: linear-gradient(180deg, #000, #333, #555, #aaa);

  }

  100% {

    background: linear-gradient(180deg, #111, #444, #777, #ccc);

  }

}



/* Dark mode responsive */

@media (prefers-color-scheme: dark) {

  ::-webkit-scrollbar-track {

    background: #111;

  }



  ::-webkit-scrollbar-thumb {

    background: linear-gradient(180deg, #444, #666, #999);

  }



  * {

    scrollbar-color: #666 #111;

  }

}





/* Responsive */

@media (max-width: 767px) {

  .footer-col {

      width: 50%;

      margin-bottom: 30px;

  }

}



@media (max-width: 574px) {

  .footer-col {

      width: 100%;

  }

}



/* Mobile layout */

@media screen and (max-width: 768px) {

  .product-tabs {

    flex-direction: column;

    align-items: center;

  }



  .tab-btn {

    width: 80%;

    margin-bottom: 10px;

    font-size: 18px;

  }

}



 #btn2, #btn3, #btn4 {

  display: flex;

  justify-content: center; /* allinea i contenuti al centro */

  align-items: center; /* allinea gli oggetti al centro */

}



 #btn2 button, #btn3 button, #btn4 button {

  width: 200px; /* Puoi aumentare o ridurre la larghezza */

  height: 40px; /* altezza */

  font-weight: bold; /* font in grasetto */

  text-align: center;

}



/* pagina contattaci */

.hero {

  position: relative; /* Per posizionamento elementi interni */

  height: 500px; /* Altezza fissa */

  display: flex; /* Layout flessibile */

  flex-direction: column; /* Disposizione in colonna */

  justify-content: center; /* Centramento verticale */

  align-items: flex-start; /* Allineamento a sinistra */

  text-align: left; /* Testo allineato a sinistra */

  padding: 0 5%; /* Padding laterale */

  opacity: 0; /* Inizialmente invisibile */

  transform: translateY(-20px); /* Spostamento iniziale verso l'alto */

  animation: fadeInUp 1s ease-out forwards; /* Animazione di entrata */

  overflow: hidden; /* Nasconde il contenuto che esce dal contenitore */

}



/* Contenitore del video */

.video-container {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: -1; /* Posiziona il video dietro al contenuto */

}



/* Stile del video */

#hero-video {

  width: 100%;

  height: 100%;

  object-fit: cover; /* Copre l'intera area mantenendo le proporzioni */

}



/* Animazione di entrata dal basso */

@keyframes fadeInUp {

  from {

      opacity: 0; /* Inizio invisibile */

      transform: translateY(-20px); /* Spostato verso l'alto */

  }

  to {

      opacity: 1; /* Fine visibile */

      transform: translateY(0); /* Posizione naturale */

  }

}



/* Contenuto della sezione hero */

.hero-content {

  z-index: 1; /* Sopra l'overlay */

  margin-left: 5%; /* Margine sinistro */

}



/* Animazione di entrata da sinistra */

@keyframes fadeInLeft {

  from {

      opacity: 0; /* Inizio invisibile */

      transform: translateX(-20px); /* Spostato a sinistra */

  }

  to {

      opacity: 1; /* Fine visibile */

      transform: translateX(0); /* Posizione naturale */

  }

}



/* Titolo hero principale */

.hero-title {

  font-family: 'Nunito Sans', sans-serif; /* Font specifico */

  font-weight: bold; /* Font in grassetto */

  font-size: 45px; /* Dimensione grande */

  opacity: 0; /* Inizialmente invisibile */

  animation: fadeInRight 1s ease-out forwards 0.7s; /* Animazione da destra */

  color: white; /* colore bianco */

}



/* Sottotitolo hero */

.hero-subtitle {

  font-family: 'Nunito Sans', sans-serif; /* Font specifico */

  font-weight: bold; /* Font in grassetto */

  text-align: left; /* Allineamento a sinistra */

  font-size: 30px; /* Dimensione media */

  opacity: 0; /* Inizialmente invisibile */

  animation: fadeInRight 1s ease-out forwards 0.9s; /* Animazione da destra */

  color: white; /* colore bianco */

}



.work-title {

  color: white;

}



/* Animazione di entrata da destra */

@keyframes fadeInRight {

  from {

      opacity: 0; /* Inizio invisibile */

      transform: translateX(20px); /* Spostato a destra */

  }

  to {

      opacity: 1; /* Fine visibile */

      transform: translateX(0); /* Posizione naturale */

  }

}



/* Sezione contatti */

.contact-section {

  display: flex; /* Layout flessibile */

  flex-wrap: wrap; /* Permette il wrap */

  justify-content: space-between; /* Spazio tra elementi */

  padding: 50px; /* Padding uniforme */

  background-color: #a5a2a0; /* Sfondo grigio */

  opacity: 0; /* Inizialmente invisibile */

  animation: fadeIn 1.5s ease-in-out forwards 1s; /* Animazione di comparsa */

}



/* Animazione di comparsa graduale */

@keyframes fadeIn {

  from {

      opacity: 0; /* Inizio invisibile */

  }

  to {

      opacity: 1; /* Fine visibile */

  }

}



/* Informazioni di contatto */

.contact-info {

  width: 40%; /* Larghezza del 40% */

}



/* Contenitore della mappa */

.map-container {

  margin-top: 20px;

  width: 100%;

  border-radius: 8px;

  overflow: hidden;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}



/* Titoli delle sezioni contatti */

.contact-info h3,

.contact-form h3 {

  font-size: 30px; /* Dimensione grande */

  font-family: 'Nunito Sans', sans-serif; /* Font specifico */

  font-weight: bold; /* Font in grassetto */

  opacity: 0; /* Inizialmente invisibile */

  animation: fadeInUp 1s ease-out forwards 1.2s; /* Animazione di entrata */

}



/* Form di contatto */

.contact-form {

  width: 50%; /* Larghezza del 50% */

}



/* Etichette del form */

form label {

  display: block; /* Visualizzazione a blocco */

  margin-bottom: 10px; /* Margine inferiore */

  font-weight: bold; /* Font in grassetto */

  font-family: 'Nunito Sans', sans-serif; /* Font specifico */

  color: #6e6868; /* Colore grigio */

}



/* Input e textarea del form */

form input,

form textarea {

  width: 100%; /* Larghezza piena */

  padding: 10px; /* Padding uniforme */

  margin-bottom: 20px; /* Margine inferiore */

  background: #313131; /* Sfondo grigio scuro */

  border: none; /* Nessun bordo */

  border-radius: 5px; /* Angoli arrotondati */

  color: #fff; /* Testo bianco */

  font-size: 16px; /* Dimensione testo */

  transition: all 0.3s ease-in-out; /* Transizione fluida */

}



/* Area di testo del form */

form textarea {

  height: 250px; /* Altezza fissa */

  padding: 15px; /* Padding maggiore */

}



/* Stato focus degli input */

form input:focus,

form textarea:focus {

  background: #a79595; /* Sfondo più chiaro */

  transform: scale(1.02); /* Leggero ingrandimento */

}



/* Pulsante del form */

form button {

  width: 100%; /* Larghezza piena */

  padding: 10px; /* Padding uniforme */

  background: #fff; /* Sfondo bianco */

  color: #000; /* Testo nero */

  border: none; /* Nessun bordo */

  font-weight: bold; /* Font in grassetto */

  cursor: pointer; /* Cursore puntatore */

  transition: background 0.3s, transform 0.2s; /* Transizioni multiple */

  font-family: 'Nunito Sans', sans-serif; /* Font specifico */

}



/* Hover del pulsante */

form button:hover {

  background: #ddd; /* Sfondo più scuro */

  transform: scale(1.05); /* Ingrandimento */

}



/* Responsive Design */

@media screen and (max-width: 1024px) {

  .hero {

    height: 400px;

  }



  .hero-title {

    font-size: 35px;

  }



  .hero-subtitle {

    font-size: 25px;

  }



  .contact-info,

  .contact-form {

    width: 100%;

  }



  .contact-section {

    flex-direction: column; /* direzione di orientamento in colonna */

    align-items: center; /* allinea gli oggetti al centro */

    text-align: center; /* testo centrato */

  }

  

  .map-container {

    margin-bottom: 30px;

  }

}



@media screen and (max-width: 768px) {

  .hero {

    height: 350px;

  }



  .hero-title {

    font-size: 28px;

  }



  .hero-subtitle {

    font-size: 20px;

  }



  .contact-section {

    padding: 30px;

  }



  form input,

  form textarea {

    font-size: 14px;

  }



  form button {

    font-size: 14px;

  }

}



/* pagina pc fissi */

/* Sezione Computer */

.computerpage-header {

  text-align: center; /* allinea al centro */

  padding: 50px 0 20px 0; /* padding */

  animation: fadeIn 1.5s ease-in-out; /* animazione */

}



.computerpage-header h2 {

  font-weight: bold; /* Font in grassetto */

  color: #22223b; /* Testo blu scuro */

  margin-bottom: 20px; /* margine sotto */

}



.computerpage-header p {

  color: #555; /* Testo grigio */

  max-width: 800px; /* larghezza massima */

  margin: 0 auto; /* margine 0 auto */

}



.computerpage-products {

  padding: 30px 0;

}



.computerpage-card {

  background-color: white; /* Sfondo bianco */

  border-radius: 10px; /* bordo leggermente rotondo */

  box-shadow: 0 5px 15px rgba(0,0,0,0.1);

  margin-bottom: 30px; /* margine sotto */

  transition: all 0.5s ease;

  animation: fadeIn 1.8s ease-in-out;

  overflow: hidden;

}



.computerpage-card:hover {

  transform: translateY(-10px);

  box-shadow: 0 15px 30px rgba(0,0,0,0.2);

}



.computerpage-card img {

  width: 100%; /* Larghezza piena */

  height: 200px; /* altezza 200px */

  object-fit: cover; 

  border-top-left-radius: 10px; /* bordo sinistro leggermente rotondo */

  border-top-right-radius: 10px; /* bordo destro leggermente rotondo */

}



.computerpage-card-body {

  padding: 20px; /* padding intermedio */

}



.computerpage-card-title {

  font-weight: bold;

  font-size: 1.2rem; /* grandezza del font */

  color: #22223b; /* testo blu scuro */

  margin-bottom: 10px; /* margine sotto */

  text-align: center; /* allinea al centro */

}



.computerpage-card-price {

  font-size: 1.3rem; /* Dimensione piccolo/medio */

  font-weight: bold; /* font in grasetto */

  color: #22223b; /* Testo blu scuro */

  margin: 15px 0; /* margine */

  text-align: center; /* allinea al centro */

}



.computerpage-card-button {

  text-align: center; /* allinea al centro */

}



.computerpage-card-button button {

  background-color: transparent; /* Sfondo trasparente */

  border: 2px solid #22223b; /* bordo solido blu scuro */

  color: #22223b; /* bottone blu scuro */

  padding: 8px 20px; /* padding intermedio */

  font-weight: bold; /* Font in grassetto */

  border-radius: 5px; /* bordo leggermente rotondo */

  transition: all 0.3s ease;

  cursor: pointer; /* il cursore diventa un pointer */

}



.computerpage-card-button button:hover {

  background-color: #22223b; /* Sfondo blu scuro */

  color: white; /* bottone bianco alla comparsa */

  transform: scale(1.05); /* Leggero ingrandimento */

}



.computerpage-contact h3 {

  font-weight: bold; /* Font in grassetto */

  margin-bottom: 15px; /* margine sotto */

}



.computerpage-contact p {

  color: #fff; /* Testo grigio */

  margin-bottom: 20px; /* margine sotto */

}



.computerpage-contact button {

  background-color: #22223b; /* Sfondo blu scuro */

  color: white; /* bottone bianco */

  border: none; /* nessun bordo */

  padding: 10px 25px; /* padding intermedio */

  font-weight: bold; /* font in grosetto */

  border-radius: 5px; /* bordo leggermente rotondo */

  transition: all 0.3s ease;

  cursor: pointer; /* il cursore diventa un pointer */

}



.computerpage-contact button:hover {

  background-color: #38385e; /* Sfondo blu chiaro */

  transform: scale(1.05); /* Leggero ingrandimento */

} 



.wrapper {

  position: fixed;

  bottom: 9px;

  right: -10px;

  width: 100%;

  height: 190px;

  background: #9E9999;

  z-index: 99;

  border-radius: 8px;

  padding: 15px 25px 22px;

  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);

}

.wrapper.show {

  right: 20px;

}

.wrapper header {

  display: flex;

  align-items: center;

  column-gap: 15px;

}

header i {

  color: #4070f4;

  font-size: 32px;

}

header h2 {

  color: #4070f4;

  font-weight: 500;

}

.wrapper .data {

  margin-top: 16px;

}

.wrapper .data p {

  color: #333;

  font-size: 16px;

}

.data p a {

  color: #4070f4;

  text-decoration: none;

}

.data p a:hover {

  text-decoration: underline;

}

.wrapper .buttons {

  margin-top: 16px;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.wrapper.hidden {

  opacity: 0;

  visibility: hidden;

}



.buttons .button {

  border: none;

  color: #fff;

  padding: 8px 0;

  border-radius: 4px;

  background: #4070f4;

  cursor: pointer;

  width: calc(100% / 2 - 10px);

  transition: all 0.2s ease;

}

.buttons #acceptBtn:hover {

  background-color: #034bf1;

}

#declineBtn {

  border: 2px solid #4070f4;

  background-color: #fff;

  color: #4070f4;

}

#declineBtn:hover {

  background-color: #4070f4;

  color: #fff;

}



.privacy-container {

  width: 100%;

  margin: 0 auto;

  background-color: #fff;

  box-shadow: 0 0 10px rgba(0,0,0,0.1);

}

.privacy-header {

  text-align: center;

  padding: 20px 0;

  border-bottom: 1px solid #eee;

}

h1 {

  color: #444;

  margin: 0;

  padding: 0;

}

.privacy-content {

  padding: 20px 0;

}

h2 {

  color: #555;

  margin-top: 20px;

}

.privacy-footer {

  text-align: center;

  padding: 20px 0;

  border-top: 1px solid #eee;

  margin-top: 20px;

}

.privacy-section {

  margin-bottom: 25px;

}



.container {

	width: 100%

}