body {
  margin: 0;
  font-family: Poppins;
  padding-top: 130px;
}

p {
  line-height: 150%;
}

li {
  line-height: 150%;
}

.navbar {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.navbar.hidden {
  transform: translateY(-100%);
  opacity: 0;
}

.navbar-brand {
  font-size: 1.2rem;
  font-weight: bold;
}

.card-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.fixed-height {
  height: 225px;
}

footer{
  margin-top: 30px;
}

footer a {
  color: #000;
  text-decoration: none;
}

footer a:hover {
  color: #7f5af0;
  transition: 0.5s;
}

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-10px); /* Alza leggermente la card */
}

.img-overview {
  height: auto; /* Altezza automatica per mantenere le proporzioni */
  max-height: 300px; /* Limita l'altezza su desktop */
  object-fit: contain;
}

.nav-title h1 {
  white-space: nowrap;
  margin-bottom: 0 !important;
}


/*-----------------------------------STILI------------------------------------------------------------------ */

.nav-item {
  padding: 2rem;
}

/*-----------------------------------NAVBAR--NUOVA------------------------------------------------------------------ */

/* Custom styling to control navbar height */
.custom-navbar {
  padding-top: 20px;
  padding-bottom: 20px;
}
.custom-navbar a.nav-title {
  text-decoration: none;
  color: #000;
  font-weight: bold;
}
.custom-navbar a.nav-title:hover {
  color: #7f5af0; /* Match button color */
  transition-duration: 0.5s;
}

.nav-title br {
  display: none;
}

.nav-title {
  font-family: 'BespokeStencil-Medium', sans-serif;
}

@media (max-width: 768px) {
  .nav-title br {
      display: inline;
  }

  body {
      padding-top: 100px;
  }

  .img-overview {
      max-height: 250px; /* Altezza più piccola per dispositivi mobili */
  }

  .leoport{
    border: solid 0.5px #333 !important;
    }
}





/*-----------------------------------PROGRESSBAR------------------------------------------------------------------ */

/* Progress bar container */
#progress-container {
  position: fixed;
  top: 0;  /* Verrà comunque nascosto quando la navbar è visibile */
  left: 0;
  width: 100%;
  height: 6px;
  background-color: rgba(0, 0, 0, 0.1); /* Sfondo opaco, opzionale */
  z-index: 9999;
  display: none; /* Di default nascosta */
}

/* Progress bar vera e propria */
#progress-bar {
  width: 0%;
  height: 100%;
  background-color: #7f5af0; /* Colore della barra (personalizzabile) */
  transition: width 0.25s ease-out;
}

/*----------------------------------- DARK MODE OVERRIDES ------------------------------------------------------------------ */

/* Impostazioni generali per Dark Mode */
body {
  background-color: #121212;
  color: #f3f3f3;
}

/* Navbar, Footer, Cards e altre aree strutturali */
.bg-body-tertiary,
.navbar,
footer,
.card,
.card-body {
  background-color: #1e1e1e !important;
  color: #f3f3f3!important;
}


.card-body, .card{
  background-color: #2f2f2f !important;
  color: #f3f3f3!important;
}


/* Testi e link */
.text-dark,
.text-body-secondary,
a,
h1,
h2,
h5,
p,
.card-text {
  color: #f3f3f3 !important;
}

/* Testi secondari con minore saturazione */
.text-body-secondary {
  color: #b0b0b0 !important;
}


/* Uniforma i bordi */
.border,
.border-bottom,
.border-top,
.border-success {
  border-color: #333 !important;
}

/* Navbar custom: titolo e hover */
.custom-navbar a.nav-title {
  color: #f3f3f3 !important;
}
.custom-navbar a.nav-title:hover {
  color: #7f5af0 !important;
}

/* Footer link */
footer a {
  color: #f3f3f3 !important;
}
footer a:hover {
  color: #7f5af0 !important;
  transition: 0.5s;
}

/* Bottoni (btn-success) */
.btn-success {
  background-color: #7f5af0 !important;
  border-color: #7f5af0 !important;
}
.btn-success:hover {
  background-color: #7f5af0a0!important;
  border-color: #7f5af0a0 !important;
}

/* Progress bar */
#progress-container {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
#progress-bar {
  background-color: #7f5af0 !important;
}

.leoport{
border: solid 3px #333 !important;
}

.leoport:hover{
  border: solid 3px #7f5af0 !important;
  transition: 0.5s;
}

.subtitle-video{
  color: #b0b0b0 !important;
}

.keywords{
  border-color: #7f5af0 !important;
  color: #f3f3f3 !important;

}





/*-----------------------------------CUSTOMFONT------------------------------------------------------------------ */

@font-face {
  font-family: 'BespokeStencil-Medium';
  src: url('font-custom/BespokeStencil-Medium.woff2') format('woff2'),
       url('font-custom/BespokeStencil-Medium.woff') format('woff'),
       url('font-custom/BespokeStencil-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'BespokeStencil-Bold';
  src: url('font-custom/BespokeStencil-Bold.woff2') format('woff2'),
       url('font-custom/BespokeStencil-Bold.woff') format('woff'),
       url('font-custom/BespokeStencil-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}