/* Sfondo e Font del body */
.custom-body {
    font-family: 'Montserrat', sans-serif;
    background-color: rgb(0, 0, 0);
}

/* Colore dei link della navbar */
.navbar-nav .nav-link {
    color: white !important; 
}

/* Hover */
.navbar-nav .nav-link:hover {
    color: #B2F90E !important; 
    transition: 0.3s;
    text-shadow: 0 0 10px #00d4ff;
}

/* Stile per la pagina corrente */
.nav-link.active-page {
    color: #B2F90E !important;
    font-weight: bold;         
    border-bottom: 2px solid #B2F90E;
}

/* Colore hamburger */
.navbar-toggler {
    border-color: #B2F90E !important; /* Colore del bordo del bottone */
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23B2F90E' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}
.navbar-toggler:focus {
    box-shadow: 0 0 10px #B2F90E;
}

/* Titolo Mars Attacks! */
.titolo-film {
    font-family: 'MarsAttacks', sans-serif !important;
    color: #B2F90E;
    font-size: 7.5rem !important; /* <--- Aumentato da 5.5rem a 7.5rem */
    display: inline-block; 
    transform: rotate(-5deg);
    text-transform: none !important; 
    line-height: 0.9 !important;   /* <--- Rende lo spazio sopra/sotto più compatto */
}

/* Logo a destra */
.navbar-brand {
    margin-left: 40px !important; 
}

/* Menù e voci a sinistra */
.navbar-toggler {
    margin-right: 20px !important; /* Sposta il bottone verso sinistra, lontano dal bordo destro */
}
.navbar-nav {
    margin-left: 30px !important; /* Allontana la lista dal bordo destro */
}

.apple-card {
    position: relative;
    height: 500px; /* Altezza per la sezione grande */
    background-size: cover;
    background-position: center;
    border-radius: 28px; /* Arrotondamento */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.3s ease;
}
.small-card {
    height: 400px; /* Altezza per le sezioni piccole */
}
.apple-card:hover {
    transform: scale(1.01); /* Leggero effetto zoom al passaggio del mouse */
}
.overlay {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Scurisce l'immagine per leggere meglio il testo */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: white;
}
.apple-card h2, .apple-card h3 {
    margin-bottom: 15px;
}

/* Footer */
.footer-apple {
    background-color: #000000;
    color: #86868b; /* Il classico grigio testi di Apple per i dettagli */
    font-size: 0.85rem;
    border-top: 1px solid #1d1d1f; /* Linea di divisione sottile e scura */
}

.footer-logo {
    width: auto;
    max-width: 100px; /* Impedisce ai loghi di diventare giganti */
    height: auto;
    max-height: 45px; /* Mantiene tutti i loghi proporzionati in altezza */
    filter: grayscale(100%) opacity(70%); /* Rende i loghi uniformi in stile minimal */
    transition: all 0.3s ease;
}

/* Al passaggio del mouse i loghi tornano al loro colore originale */
.logo-box a:hover .footer-logo {
    filter: grayscale(0%) opacity(100%);
}

.footer-text {
    color: #86868b;
}

/* RIDIMENSIONAMENTO PER TELEFONO */
@media (max-width: 767.98px) {
  /* titolo principale */
  .display-4 {
    font-size: 2.2rem !important; 
    letter-spacing: 0px !important;
  }

  /* titoli delle sezioni e film */
.titolo-film {
    font-size: 4.9rem !important;
    transform: rotate(-3deg);
    line-height: 0.9 !important;
  }

  h2.h1, .h1 {
    font-size: 1.8rem !important;
  }
  
  h3.h4, .h4 {
    font-size: 1.4rem !important;
  }

  /* testi fs-5 */
  .fs-5 {
    font-size: 0.95rem !important; 
    line-height: 1.6 !important;
  }

  /* immagini nelle colonne */
  .overflow-hidden img {
    aspect-ratio: 16/9 !important; 
  }

  /* padding e margin */
  .pt-5, .py-5 {
    padding-top: 2.5rem !important;
  }
  .pb-5, .py-5 {
    padding-bottom: 2.5rem !important;
  }
  .mb-5 {
    margin-bottom: 1.5rem !important;
  }
  
  /* griglia tra colonne */
  .g-5 {
    --bs-gutter-x: 1.5rem !important;
    --bs-gutter-y: 1.5rem !important;
  }

  /* Modali */
  .modal-dialog {
    margin: 0.75rem !important; 
  }
  .modal-body {
    padding: 1.5rem !important; 
  }
  .modal-body .fs-5 {
    font-size: 1.1rem !important; 
  }

  /* navbar aperta */
  .navbar-nav {
    text-align: center;
    padding: 1rem 0;
  }
  .nav-link {
    padding: 0.5rem 0 !important;
  }
}

/* IG per telefono */
@media (max-width: 767.98px) {
  .modal-body .row.g-0 {
    flex-direction: column;
  }
  
  .modal-body .col-md-6.border-start {
    border-left: 0 !important;
    border-top: 1px solid #222 !important;
  }
}

/* BANNER */
.astro-banner {
  background: linear-gradient(135deg, #050505 0%, #0a0a0a 100%);
  box-shadow: 0 0 30px rgba(178, 249, 14, 0.05); 
  position: relative;
  overflow: hidden;
}

/* Linea di divisione verticale per schermi grandi */
.banner-divider {
  width: 1px;
  height: 50px;
  background-color: #222;
}

/* Animazione o responsive sui blocchi mobile */
@media (max-width: 767.98px) {
  .banner-section {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #111;
  }
  .banner-section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

/* Effetto hover sul link del luogo */
.banner-location-link {
  display: inline-block;
  transition: opacity 0.2s ease;
}

.banner-location-link:hover {
  opacity: 0.85;
}

.banner-location-link:hover .fw-bold {
  color: #B2F90E !important; 
}

.feed-instagram .overflow-hidden img {
    aspect-ratio: 16/9 !important;
}