/* Google Font Poppins 300 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,300&family=Signika:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Righteous&display=swap');

h1, h2, h3, p {font-family: 'Poppins', sans-serif;}
h2 {font-size: 34px}

.nav-item li, .nav-item a {font-family: 'Lato', sans-serif; text-transform: uppercase; }

/* footer */
.bg-light {
    background-color: rgb(219 219 219) !important;
}
/* fine footer*/

.carousel-inner > .item {
    position: relative;
    display: none;
    -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
    -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left;
}
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
      
/* Bottons by Sergio */

.btn-primary {
    font-size: medium;}

.footer a { color: #5a5a5a; text-decoration: none;}

/* Titoli in sofrapposizione delle immagini header */
.custom-title {
  color: white;
  background-color: rgba(0, 0, 0, 0.5); /* Nero al 50% */
  backdrop-filter: blur(5px);           /* Effetto vetro satinato */
  border-radius: 15px;                  /* Angoli arrotondati */
  padding: 10px 20px;
  display: inline-block;
  margin: 1em;
}
/* fino titoli in immagini header*/

/* Sovrascrittura del breakpoint nativo XXL (dai 1400px in su) */
@media (min-width: 1400px) {
    .container {
        /* Bootstrap di default usa 1320px. 
           Qui lo impostiamo a 1600px per un look più ampio */
        max-width: 1600px; 
    }
}

/* Se vuoi un controllo ancora più granulare per i monitor 1920px (Full HD) */
@media (min-width: 1920px) {
    .container {
        max-width: 1800px;
    }
}
/* ---------------- CARD IN PAGINE DI CATEGORIA ------------ */

/* Forza le card ad avere la stessa altezza e gestisce l'immagine */
.card-custom-bg {
    background-size: cover;          /* Fa sì che l'immagine copra tutta la card */
    background-position: center;      /* Centra l'immagine */
    background-repeat: no-repeat;
    min-height: 700px;               /* Forza la card a essere visibile anche con poco testo */
    border: none;
    position: relative;
    z-index: 1;
    color: white;                    /* Rende i testi bianchi per contrasto */
    border-radius:15px;
}

/* Overlay per rendere il testo leggibile sopra l'immagine */
.card-custom-bg::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Uno strato scuro semi-trasparente */
    z-index: -1;                     /* Va sotto il testo ma sopra l'immagine */
     border-radius:15px;
}

/* Assicurati che il corpo della card non abbia sfondi solidi */
.card-custom-bg .card-body {
    background: transparent !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Sposta il testo in basso come in un catalogo premium */
     border-radius:15px;
}

/* Stile per il logo posizionato */
.card-logo {
    position: absolute;
    top: 20px;          /* Distanza dal bordo superiore */
    right: 20px;        /* Distanza dal bordo destro */
    max-width: 300px;   /* Larghezza massima richiesta */
    width: 40%;         /* Opzionale: rende il logo fluido su schermi piccoli */
    height: auto;
    z-index: 2;         /* Sopra l'overlay nero (che ha z-index: -1) e il testo */
}

/* Ottimizzazione per mobile (opzionale) */
@media (max-width: 576px) {
    .card-logo {
        max-width: 150px; /* Riduce il logo su smartphone per non coprire troppo */
        top: 15px;
        right: 15px;
    }
}
/*  --------- FINE CARD IN PAGINE DI CATEGORIA ----------------- */