/* Definizione delle variabili CSS */
:root {
  --header-height-big: 75px;
  --header-height-small: 60px;
  --main-margin-big: 40px;
  --main-margin-small: 10px;
}

.main .item h2,
.main .item h3,
.main .item p {
  position: relative;
  z-index: 2;
  margin: 2px 0px;
  line-height: 1.2; /* Set line height for logo text */
  pointer-events: none; /* Non reagisce al mouse */
}

.header a {
  font-size: 18px; /* Set font size for header links */
  padding: 2px 8px; /* Aggiungi un po' di padding per migliorare l'aspetto */
}
.header .logo p {
  font-size: 18px; /* Set font size for logo text */
}
.main .item h2 {
  font-size: 20px; /* Set font size for item h2 */
  font-weight: 800;
  margin: 11px 0;
}
.main .item h3 {
  font-size: 16px; /* Set font size for item h3 */
  font-weight: 400;
  color: lightgrey;
}
.main .item p {
  font-size: 14px; /* Set font size for item paragraphs */
  color: grey;
  font-weight: 300;
}
.filter a {
  font-size: 14px; /* Set font size for filter links */
  padding: 12px 16px; /* Aggiungi un po' di padding per migliorare l'aspetto */
}
.fullscreen-menu a {
  font-size: 24px; /* Set font size for fullscreen menu links */
}
.cta-button {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
  background-color: #000000; /* Colore del pulsante */
  border: #ffffff 2px solid;
  text-decoration: none;
  transition: background-color 0.3s ease;
  pointer-events: all;
  text-align: left; /* Allinea il pulsante a sinistra */
}

.cta-button:hover {
  background-color: #ffffff; /* Colore al passaggio del mouse */
  color: #000000;
}
@media (min-width: 1025px) {
  .header a {
    font-size: 18px; /* Set font size for header links */
    padding: 2px 8px; /* Aggiungi un po' di padding per migliorare l'aspetto */
  }
  .header .logo p {
    font-size: 20px; /* Set font size for logo text */
  }
  .main .item h2 {
    font-size: 24px; /* Set font size for item h2 */
    margin: 12px 0;
  }
  .main .item h3 {
    font-size: 18px; /* Set font size for item h3 */
  }
  .main .item p {
    font-size: 16px; /* Set font size for item paragraphs */
  }
}
@media (max-width: 768px) {
  .cta-button {
    font-size: 1rem;
  }
}

body {
  margin: 0;
  font-family: "Poppins", Arial, sans-serif; /* Updated font-family */
  background-color: #000000;
  color: white;
}

.container {
  margin: 0 var(--main-margin-small); /* Imposta margine a destra e sinistra di 10vw */
}

.header {
  background-color: rgb(0, 0, 0);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-height-small); /* Utilizzo della variabile per mobile */
}

.menuDesktop {
  transform: translateX(12px);
}

.menuMobile {
  width: 24px;
  font-size: 24px;
  transform: translateX(10px);
  align-items: center; /* Center vertically */
  margin-left: auto; /* Align to the right */
  margin-right: 20px; /* Add right margin */
  cursor: pointer; /* Add cursor pointer */
}

.header a {
  color: white;
  margin: 0 15px;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease,
    border-radius 0.3s ease;
}

.header .logo {
  display: flex;
  align-items: center;
  font-size: 24px;
  transform: translateX(0px);
}

.header .logo img {
  height: 24px;
  margin-left: 8px;
}

.main {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0px 20px 0px; /* Imposta padding a 20 su tutti i lati, ma a 0 sul top */
}

.main .item {
  position: relative;
  padding: 20px;
  box-sizing: border-box;
  height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Align items to the bottom */
  background-size: cover;
  overflow: hidden; /* Ensure no overflow */
  cursor: pointer;
  border: #ffffff 1px solid;
}

.main .item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Estendi oltre i bordi laterali */
  height: 100%; /* Estendi oltre il bordo inferiore */
  z-index: 1;
}

.main h2.main {
  position: relative; /* Necessario per applicare il z-index */
  z-index: 10; /* Valore più alto rispetto al gradiente */
  background: transparent; /* Assicurati che lo sfondo sia trasparente */
}

.main .item video {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  margin: 0; /* Ensure no margin */
  padding: 0; /* Ensure no padding */
  border: none; /* Ensure no border */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  border: #000000 1px solid;
}

#filterBar {
  transform: translateX(-2px) translateY(-4px);
}
.filter {
  background-color: black;
  color: white;
  padding: 10px;
  text-align: left; /* Align texts to the left */
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  z-index: 999;
  padding-left: 0px; /* Ensure consistent left padding */
}

.filter a {
  color: white;
  margin: 0px; /* Match the margin of header texts */
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease,
    border-radius 0.3s ease;
}

.header a:hover,
.filter a:hover {
  text-decoration: none; /* Rimuovi la sottolineatura */
  background-color: white; /* Imposta lo sfondo bianco */
  color: black; /* Imposta il testo nero */
  border-radius: 0px; /* Aggiungi angoli arrotondati */
}

.filter a.active {
  background-color: white; /* Imposta lo sfondo bianco */
  color: black; /* Imposta il testo nero */
  border-radius: 0px; /* Aggiungi angoli arrotondati */
  transition: background-color 0.3s ease, color 0.3s ease,
    border-radius 0.3s ease;
}

/* Fullscreen menu styles */
.fullscreen-menu {
  display: none;
  position: fixed;
  top: 45px; /* Adjust based on header height */
  left: 0;
  width: 100%;
  height: calc(100% - 45px); /* Adjust based on header height */
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 1001;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  margin-top: 0; /* Ensure no margin at the top */
  opacity: 0;
  transition: opacity 0.5s ease;
}

.fullscreen-menu.show {
  display: flex;
  opacity: 1;
}

.fullscreen-menu a {
  color: white; /* Set text color to white */
  font-size: 24px; /* Increase font size */
  margin: 20px 0; /* Add more spacing between items */
  text-decoration: none; /* Remove underline */
  transition: color 0.3s ease; /* Smooth transition for color change */
  padding: 10px 20px;
}

.fullscreen-menu a:hover {
  color: black; /* Change text color to black on hover */
  background-color: white; /* Change background color to white on hover */
}

.menu-icon {
  width: 21px;
  height: 21px;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateX(3px);
}

.menu-icon div {
  width: 100%;
  height: 3px;
  background-color: white;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-icon.open div:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
  transform-origin: 50% 50%;
}

.menu-icon.open div:nth-child(2) {
  opacity: 0;
}

.menu-icon.open div:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
  transform-origin: 50% 50%;
}

.footer {
  height: 75px;
  width: 100%;
  padding: 8px;
  display: flex; /* Add flexbox */
  justify-content: flex-end; /* Align content to the right */
  align-items: center; /* Center content vertically */
  display: flex;
  align-items: center;
  z-index: 2000;
  font-weight: 300;
}

.footerIco {
  width: 24px;
  height: 24px;
  margin-left: 12px;
}

#lottie-container {
  margin: 0;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  position: fixed;
  z-index: 5000;
  transform: translate(calc(var(--main-margin-big) + 8px), 25px);
}

/* Breakpoints */

/* Mobile specific styles */
@media (orientation: portrait) {
  .header {
    height: var(
      --header-height-small
    ); /* Utilizzo della variabile per mobile */
    padding: 0px 0px 0px 0px; /* Adjust padding to fit height */
  }

  .header .logo p {
    display: none;
  }
  .menuDesktop {
    display: none; /* Hide div in mobile version */
  }
  .menuMobile {
    display: flex; /* Show in mobile version */
  }
  .main .item {
    flex: 1 1 calc(100% - 10px); /* Change to 100% width on mobile */
    max-width: calc(100% - 10px); /* Change to 100% width on mobile */
  }
  .filter {
    display: flex;
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Prevent line breaks */
    -ms-overflow-style: none; /* Hide scrollbar in IE and Edge */
    scrollbar-width: none; /* Hide scrollbar in Firefox */
    top: var(--header-height-small); /* Adjust based on mobile header height */
  }
  .filter::-webkit-scrollbar {
    display: none; /* Hide scrollbar in WebKit browsers */
  }
  .filter a {
    display: inline-block; /* Display links in a row */
  }
}

/* Mobile specific styles */
@media (orientation: landscape) {
  .header .logo p {
    display: block;
  }
  .menuDesktop {
    display: flex; /* Hide div in mobile version */
  }
  .menuMobile {
    display: none; /* Show in mobile version */
  }
  .main .item {
    flex: 1 1 calc(50% - 10px); /* Ensure each item is 50% width */
    max-width: calc(50% - 10px); /* Ensure each item is 50% width */
  }
}

@media (min-width: 0px) {
  /* Styles for screens bigger than 0px */
  .container {
    margin: 0 var(--main-margin-small); /* Imposta margine a destra e sinistra di 10vw */
  }
  .header {
    height: var(--header-height-small); /* Mobile height */
    padding: 0px 0px 0px 0px; /* Adjust padding to fit height */
  }
  .header .logo p {
    display: none;
  }
  .menuDesktop {
    display: none; /* Hide div in mobile version */
  }
  .menuMobile {
    display: flex; /* Show in mobile version */
    margin-left: auto; /* Align to the right */
    margin-right: 20px; /* Add right margin */
  }
  .filter {
    display: flex;
    margin-left: 10px;
    top: var(--header-height-small); /* Adjust based on mobile header height */
  }
  .main {
    padding: 0px 4px;
  }
  .main .item {
    flex: 1 1 calc(100% - 10px); /* Change to 100% width on mobile */
    max-width: calc(100% - 10px); /* Change to 100% width on mobile */
    margin: 5px 5px;
    height: 280px; /* Set height to 640px */
  }
  #lottie-container {
    transform: translate(calc(var(--main-margin-small) + 8px), 18px);
  }
  .main .item::before {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.8) 10%,
      rgba(0, 0, 0, 0.5) 25%,
      rgba(0, 0, 0, 0.05) 46%,
      transparent 50% /* Completamente trasparente alla fine */
    );
  }
}

@media (min-width: 481px) {
  /* Styles for screens bigger than 480px */
  .main .item {
    height: 315px; /* Set height to 640px */
  }
}

@media (min-width: 769px) {
  /* Styles for screens bigger than 768px */
  .container {
    margin: 0 var(--main-margin-big); /* Imposta margine a destra e sinistra di 10vw */
  }
  .header {
    padding: 0px 8px 0px 0px; /* Adjust padding to fit height */
  }
  .header .logo p {
    display: block;
  }
  .menuDesktop {
    display: flex; /* Hide by default */
  }
  .menuMobile {
    display: none; /* Hide by default */
  }
  .filter {
    margin-left: 2px;
  }
  .main .item {
    flex: 1 1 calc(50% - 10px); /* Ensure each item is 50% width */
    max-width: calc(50% - 10px); /* Ensure each item is 50% width */
    margin: 5px 5px;
    height: 315px; /* Set height to 640px */
  }
  .filter a {
    font-size: 14px; /* Set font size for filter links */
    padding: 2px 8px; /* Aggiungi un po' di padding per migliorare l'aspetto */
    margin: 0px 8px; /* Match the margin of header texts */
  }
  .fullscreen-menu a {
    font-size: 24px; /* Set font size for fullscreen menu links */
  }
  #lottie-container {
    transform: translate(calc(var(--main-margin-big) + 8px), 18px);
  }
}

@media (min-width: 1025px) {
  /* Styles for screens bigger than 1024px */
  .main .item {
    height: 420px; /* Set height to 640px */
  }
  .header {
    height: var(--header-height-big); /* Desktop height */
  }
  .filter {
    top: var(--header-height-big); /* Adjust based on desktop header height */
  }
  #lottie-container {
    transform: translate(calc(var(--main-margin-big) + 8px), 25px);
  }
  .main .item::before {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.8) 8%,
      rgba(0, 0, 0, 0.5) 18%,
      rgba(0, 0, 0, 0.05) 35%,
      transparent 40% /* Completamente trasparente alla fine */
    );
  }
}

@media (min-width: 1441px) {
  /* Styles for screens bigger than 1440px */
  .main .item {
    height: 480px; /* Set height to 640px */
  }
  .main .item::before {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.8) 8%,
      rgba(0, 0, 0, 0.5) 18%,
      rgba(0, 0, 0, 0.05) 32%,
      transparent 35% /* Completamente trasparente alla fine */
    );
  }
}

@media (min-width: 1921px) {
  /* Styles for screens bigger than 1920px */
  .main .item {
    height: 540px; /* Set height to 640px */
  }
}

.fade-in {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.fade-in.visible {
  opacity: 1;
}

#headerContainer {
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 0;
  z-index: 1000; /* Ensure it stays on top of other elements */
}