/* ============================================================
   Modern refresh layer — arrotondamenti, ombre, micro-animazioni.
   Non modifica colori, font o struttura del tema originale.
   ============================================================ */

* {
  -webkit-font-smoothing: antialiased;
}

html {
  scroll-behavior: smooth;
}

/* ---------- Transizioni globali morbide ---------- */
a, .btn, .card, .item, img, .nav-link, .navbar-toggler,
.card-img img, .item-img img {
  transition: all 0.25s ease;
}

/* ---------- Navbar ---------- */
.navbar {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  backdrop-filter: saturate(180%) blur(6px);
}

.nav-link {
  position: relative;
}

/* Uso ::before (non ::after) per non entrare in conflitto con la
   freccina dei menu a tendina, che Bootstrap disegna con ::after */
.nav-link.link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.55;
  transition: width 0.25s ease;
}

.nav-link.link:hover::before {
  width: 100%;
}

/* ---------- Bottoni ---------- */
.btn {
  border-radius: 8px !important;
  letter-spacing: 0.02em;
}

.btn-primary,
.btn-secondary,
.btn-info,
.btn-success,
.btn-white {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-info:hover,
.btn-success:hover,
.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16) !important;
}

.btn:active {
  transform: translateY(0);
}

/* ---------- Card / item generiche (prodotti, servizi, gallery) ----------
   Escludiamo gli item che contengono già una card a bordo giallo,
   che hanno un trattamento dedicato più sotto (per evitare di
   sommare due effetti hover sullo stesso elemento). */
.card:not(:has(.border-yellow)),
.item:not(:has(.border-yellow)) {
  border-radius: 14px;
  overflow: hidden;
}

.card:not(:has(.border-yellow)):hover,
.item:not(:has(.border-yellow)):hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.10);
}

.card:not(:has(.border-yellow)) .card-img,
.item:not(:has(.border-yellow)) .item-img {
  border-radius: 14px;
  overflow: hidden;
}

.card:not(:has(.border-yellow)) .card-img img,
.item:not(:has(.border-yellow)) .item-img img {
  border-radius: 14px;
  transition: transform 0.4s ease;
}

.card:not(:has(.border-yellow)):hover .card-img img,
.item:not(:has(.border-yellow)):hover .item-img img {
  transform: scale(1.06);
}

/* ---------- Card con bordo giallo (competenze, partner, chi siamo) ----------
   Il wrapper diventa una vera card: angoli arrotondati, ombra, hover.
   overflow:hidden sul wrapper fa sì che l'immagine interna segua
   sempre il bordo arrotondato, senza mai uscire dal contorno giallo. */
.item-wrapper.border-yellow {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.item-wrapper.border-yellow:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.30);
}

/* L'immagine non ha un proprio border-radius: è il wrapper (con
   overflow:hidden) a ritagliarla correttamente dentro il bordo giallo */
.item-wrapper.border-yellow .item-img img,
.item-wrapper.border-yellow .img-wrapper img {
  border-radius: 0 !important;
  transition: transform 0.4s ease;
}

.item-wrapper.border-yellow:hover .item-img img,
.item-wrapper.border-yellow:hover .img-wrapper img {
  transform: scale(1.06);
}

/* ---------- Card a bordo giallo con testo + immagine affiancati
   (generatori azoto, trattamenti aria) ---------- */
.content-wrapper.border-yellow {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-wrapper.border-yellow:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
}

/* ---------- Card dei contatti (telefono, mail, indirizzo, orari) ---------- */
.card-wrapper.border-yellow {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-wrapper.border-yellow:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
}

/* Icone di contatto trasformate in badge circolari */
.contacts2 .image-wrapper {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(244, 232, 57, 0.14);
  justify-content: center;
  margin-right: 1.25rem;
  transition: background 0.25s ease, transform 0.25s ease;
}

.contacts2 .card-wrapper:hover .image-wrapper {
  background: rgba(244, 232, 57, 0.24);
  transform: scale(1.06);
}

.contacts2 .mbr-iconfont {
  padding-right: 0 !important;
  font-size: 1.6rem;
}

/* ---------- Mappa Google: angoli arrotondati e ombra ---------- */
.google-map {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.20);
}

.google-map iframe {
  border: 0;
  display: block;
}

/* ---------- Gallery: foto ad angolo vivo (90°), niente arrotondamenti ----------
   Annulliamo il radius/overflow sia sul contenitore ".item" che su
   ".item-img" e sull'immagine stessa, altrimenti l'arrotondamento
   applicato a un livello più esterno "tornerebbe" a tagliare la foto. */
.gallery1 .item,
.gallery1 .item-wrapper,
.gallery1 .item-img,
.gallery1 .item-img img {
  border-radius: 0 !important;
  overflow: visible !important;
}

/* ---------- Chi siamo: le tre card della stessa altezza, senza
   tagliare il testo (basta "allungare" la card più corta) ---------- */
.cid-viDy9wBzNC .row {
  align-items: stretch !important;
}

.cid-viDy9wBzNC .item {
  display: flex;
}

.cid-viDy9wBzNC .item-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.cid-viDy9wBzNC .card-box {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ---------- Footer: orari degli uffici su una sola riga ---------- */
.hours-oneline {
  white-space: nowrap;
}

/* ---------- Immagini generiche nei contenuti ---------- */
.mbr-figure img,
.image_wrapper img,
.gallery-image img {
  border-radius: 12px;
}

/* ---------- Form ---------- */
.form-control {
  border-radius: 8px !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.form-control:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06) !important;
}

/* ---------- Chi siamo: titoli delle card allineati -----------
   Altezza minima uguale per tutti i titoli (anche a 2 righe),
   così il testo sotto parte sempre dalla stessa altezza. */
.cid-viDy9wBzNC .card-title {
  min-height: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Prodotti / Noleggio / Servizi: card di altezza uniforme ---------- */
.features7 .card-wrapper.border-yellow {
  min-height: 320px;
}

.features7 .card-wrapper.border-yellow .image-wrapper img {
  height: 320px;
  object-fit: cover;
}

/* ---------- Footer: link evidenziati al passaggio del mouse ---------- */
.footer4 a.text-primary {
  transition: color 0.2s ease, opacity 0.2s ease;
}

.footer4 a.text-primary:hover {
  text-decoration: underline;
  opacity: 0.75;
}

/* ---------- Footer ---------- */
.social-list a,
.socicon {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.social-list a:hover,
.socicon:hover {
  transform: translateY(-3px);
  opacity: 0.85;
}

/* ---------- Scrollbar (dettaglio moderno, discreto) ---------- */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* ---------- Riduzione motion per chi la preferisce ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   OTTIMIZZAZIONI PER CELLULARE / TOUCH
   Il tema è già responsive con breakpoint
   propri; qui aggiungiamo solo correzioni mirate per una resa
   migliore su smartphone, senza toccare layout o contenuti.
   ============================================================ */

/* ---- Niente "hover incollato" al tap: su touch i browser
   applicano lo stato :hover al primo tocco e lo tengono finché
   l'utente non tocca altrove, facendo restare card/bottoni
   "alzati" in modo innaturale. Su dispositivi touch annulliamo
   gli effetti di hover che spostano o scalano gli elementi. ---- */
@media (hover: none), (pointer: coarse) {
  .card:not(:has(.border-yellow)):hover,
  .item:not(:has(.border-yellow)):hover,
  .item-wrapper.border-yellow:hover,
  .content-wrapper.border-yellow:hover,
  .card-wrapper.border-yellow:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-info:hover,
  .btn-success:hover,
  .btn-white:hover {
    transform: none !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14) !important;
  }

  .card:not(:has(.border-yellow)):hover .card-img img,
  .item:not(:has(.border-yellow)):hover .item-img img,
  .item-wrapper.border-yellow:hover .item-img img,
  .item-wrapper.border-yellow:hover .img-wrapper img {
    transform: none !important;
  }

  .contacts2 .card-wrapper:hover .image-wrapper {
    transform: none !important;
    background: rgba(244, 232, 57, 0.14) !important;
  }

  .social-list a:hover,
  .socicon:hover {
    transform: none !important;
  }
}

@media (max-width: 991px) {
  /* ---- Blur più leggero: su molti smartphone il backdrop-filter
     sulla navbar fissa appesantisce lo scroll ---- */
  .navbar {
    backdrop-filter: saturate(140%) blur(3px);
  }

  /* ---- Voci del menu e sottomenu più comode da toccare
     (target minimo consigliato ~44px) ---- */
  .nav-dropdown .link,
  .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* ---- Bottoni e campi form con altezza minima adatta al dito ---- */
  .btn {
    min-height: 44px;
  }

  .form-control {
    min-height: 44px;
  }

  /* ---- Card prodotti/servizi/noleggio a bordo giallo: l'immagine
     a piena larghezza non ha più bisogno di un'altezza così grande
     come su desktop, altrimenti si scorre troppo prima del testo ---- */
  .features7 .card-wrapper.border-yellow {
    min-height: auto;
  }

  .features7 .card-wrapper.border-yellow .image-wrapper img {
    height: 260px;
  }
}

@media (max-width: 575px) {
  .features7 .card-wrapper.border-yellow .image-wrapper img {
    height: 220px;
  }

  /* ---- Icone dei contatti leggermente più compatte sugli schermi
     più piccoli, per lasciare più spazio al testo affiancato ---- */
  .contacts2 .image-wrapper {
    width: 48px;
    height: 48px;
    margin-right: 0.85rem;
  }

  .contacts2 .mbr-iconfont {
    font-size: 1.3rem;
  }

  /* ---- Le card non devono "salire" più di pochi pixel quando
     l'utente le tocca (dove l'hover non viene neutralizzato) ---- */
  .card:not(:has(.border-yellow)):hover,
  .item:not(:has(.border-yellow)):hover {
    transform: translateY(-3px);
  }
}