/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */

html {
 scroll-behavior: smooth;
    
}

body {
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
    overflow-x: hidden;

}

.full-screen-bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 0;

}

/* Sfondo principale (sfondo 1) */
.full-screen-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Pesce animato */
.fish {
  position: fixed;
  top: 0%;
  left: 50%;
  transform: translate(-30%, -30%) scale(1);
  transform-origin: center;
  animation: swim 5s infinite ease-in-out;
  z-index: 2;
  pointer-events: none;
}

/* Primo nuovo sfondo (sfondo 2) */
.full-screen-bg2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 3;
  pointer-events: none;
}

/* Secondo nuovo sfondo (sfondo 3) */
.full-screen-bg3 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 4;
  pointer-events: none;
}

/* Logo centrale */
.contlogoup {
  text-align: center;
  position: absolute;
  top: 20%;
  left: 54%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  max-width: 1000px !important;
  margin: 0 auto;
  font-size: 8vw !important;
  line-height: 1.2;
  max-width: 80%;
  opacity: 0.9;
  z-index: 5;
}

/* Pulsanti in basso */
.button {
  display: flex;
  flex-direction: column;
  position: relative;
  width: min(100%, 900px);
  margin: 0 auto;
  padding: clamp(10px, 2vw, 20px);
  box-sizing: border-box;
  top: clamp(550px, calc(550px + (700px - 100vw) * 0.5), 650px);
  z-index: 5;
}

@keyframes swim {
  0% {
    transform: translateX(-150%) scale(0.5) rotateY(0deg);
  }
  50% {
    transform: translateX(-50%) scale(0.5) rotateY(0deg);
  }
  100% {
    transform: translateX(100%) scale(0.5) rotateY(0deg);
  }
}

/* Pulsanti in basso */
.button {
  display: flex;
  flex-direction: column;
  position: relative;
  width: min(100%, 900px);
  margin: 0 auto;
  padding: clamp(10px, 2vw, 20px);
  box-sizing: border-box;
  top: clamp(550px, calc(550px + (700px - 100vw) * 0.5), 650px);
}

.buybutton {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr)); /* Colonne con larghezza minima */
  gap: 40px; /* Maggiore spazio tra i pulsanti */
  justify-content: center; /* Centra orizzontalmente i pulsanti all'interno del contenitore */
  align-items: center; /* Centra verticalmente i pulsanti all'interno del contenitore */
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px 10px;
}

.buttoncont {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px; /* Maggiore spazio tra i bottoni */
  width: 100%;
  margin-top: 30px; /* Aggiunge spazio sopra il contenitore */
}


.button-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 180px;
  min-width: 120px;
  height: 100px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  margin: 0 auto; /* Centra il pulsante */
}

/* Media query per tablet (max-width: 768px) */
@media (max-width: 768px) {
  .buybutton {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 20px 20px;
  }

  .button-link {
    max-width: 160px;
    min-width: 120px;
    height: 90px;
    margin: 0 auto;
      
  }
}

/* Media query per smartphone (max-width: 480px) */
@media (max-width: 480px) {
  .buybutton {
    grid-template-columns: 1fr;
    gap: 35px;
    padding: 20px 20px;
    padding-bottom: 20px; /
  }

  .button-link {
    max-width: 160px;
    min-width: 120px;
    height: 80px;
    margin: 0 auto;
    margin-bottom: 30px;
  }

  .buttoncont {
    gap: 30px;
    margin-top: 20px; /* Aggiunge spazio tra i gruppi di pulsanti */
  }
}

.button-1 {
  width: 100%;
  height: auto;
  object-fit: contain; /* Mantiene le proporzioni dell'immagine */
  transition: transform 0.2s ease-in-out;
}

.button-3 {
  width: 100%;
  height: auto;
  object-fit: contain; /* Mantiene le proporzioni dell'immagine */
  transition: transform 0.2s ease-in-out;
}

.button-2 {
  height: clamp(65px, 8vw, 80px);
  width: auto;
  transition: transform 0.2s ease-in-out;
}

.button-1:hover {
  transform: scale(1.15); /* Ingrandisce il pulsante del 1% */
  transition: all 0.2s ease-in-out; /* Crea una transizione fluida per l'effetto */
}

.button-3:hover {
  transform: scale(1.15); /* Ingrandisce il pulsante del 1% */
  transition: all 0.2s ease-in-out; /* Crea una transizione fluida per l'effetto */
}

.button-2:hover {
  transform: scale(1.15); /* Ingrandisce il pulsante del 1% */
  transition: all 0.2s ease-in-out; /* Crea una transizione fluida per l'effetto */
}




.Total-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 700px;
  gap: 100px;
}

/* dati contract + motto + logo */
.contract-container {
  position: relative;
  width: 75%; /* Larghezza massima del contenitore */
  padding: 40psx;
  text-align: center;
  max-width: 950px; /* Larghezza massima del contenitore */
  padding: 20px;
  background: linear-gradient(
    to bottom right,
    hsla(202, 98%, 74%, 0.503) 0%,
    hsla(203, 97%, 74%, 0.561) 8.4%,
    hsla(205, 96%, 73%, 0.51) 15.3%,
    hsla(207, 94%, 72%, 0.537) 21.1%,
    hsla(210, 92%, 71%, 0.495) 25.9%,
    hsla(213, 90%, 70%, 0.522) 30.1%,
    hsla(216, 88%, 68%, 0.496) 34%,
    hsla(220, 85%, 67%, 0.51) 37.9%,
    hsla(224, 83%, 65%, 0.453) 42%,
    hsla(228, 82%, 64%, 0.534) 46.5%,
    hsla(233, 80%, 62%, 0.524) 51.9%,
    hsla(238, 79%, 61%, 0.547) 58.2%,
    hsla(243, 79%, 58%, 0.532) 66%,
    hsla(248, 80%, 54%, 0.507) 75.3%,
    hsla(253, 83%, 49%, 0.563) 86.6%,
    hsla(257, 100%, 45%, 0.5) 100%
  );
  text-align: center;
  border-radius: 50px;
  box-shadow: 4px 4px 4px 2px rgba(158, 196, 246, 0.435);
}

.logomini {
  max-width: 60%;
  height: auto;
  margin-left: 10%;
}

.contracttxt {
  color: #fff;
  font-family: "Permanent Marker", sans-serif;
  font-size: 1.9rem;
}
.contractnum {
  background-color: #a4fb0f;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  color: darkblue;
  font-size: 1.35rem;
  word-wrap: break-word;
    overflow-wrap: break-word;
    /* Optional: add some padding for better readability */
    padding: 10px;
}
/* dati tokenomics */

.tokenomics-container {
  position: relative;
  width: 90%; /* Rendi il contenitore più largo rispetto al contenuto */
  max-width: 800px; /* Limita la larghezza massima */
  margin: 0 auto; /* Centra il contenitore */
  padding: 20px; /* Spazio interno */
  background: linear-gradient(
    to bottom right,
    hsla(202, 98%, 74%, 0.5),
    hsla(257, 100%, 45%, 0.5)
  ); /* Sfondo sfumato */
  text-align: center;
  border-radius: 50px;
  box-shadow: 4px 4px 4px 2px rgba(158, 196, 246, 0.435);
  box-sizing: border-box; /* Include il padding nel calcolo delle dimensioni */
  overflow-wrap: break-word; /* Forza il testo a spezzarsi */
}

.title {
  font-family: "rock salt";
  color: yellow;

  font-size: 2rem;
  margin-bottom: 20px;
}

.title-new {
  font-family: "rock salt";
  color: black;
  font-size: 2rem;
  margin-bottom: 20px;
}

.token-info {
  color: white;
  font-size: 1.2rem;
}

.token-supply {
  font-family: "Permanent Marker", sans-serif;
}

.number1 {
  font-family: monospace;
  font-size: xx-large;
  background-color: #a4fb0f;
  color: darkblue;
}

.number2 {
  font-family: monospace;
  font-size: large;
  background-color: #a4fb0f;
  color: darkblue;
}

.distribution {
  font-family: "Permanent Marker", sans-serif;
}
@media (max-width: 768px) {
  .title {
    font-size: 1.3rem;
  }

  .token-info {
    font-size: 1rem;
  }
}

.flexpercent {
  display: flex;
  flex-direction: column; /* Disposizione verticale per schermi piccoli */
  gap: 20px; /* Spazio tra gli elementi */
  justify-content: center; /* Centra il contenuto */
  align-items: center;
}

.flexpercent .flex-item {
  flex: 1 1 100%; /* Ogni elemento occupa l'intera larghezza disponibile */
  max-width: 760px; /* Limita la larghezza massima a 760px */
  box-sizing: border-box; /* Include il padding nel calcolo delle dimensioni */
  text-align: center; /* Centra il contenuto */
  word-wrap: break-word; /* Forza la parola a capo */
  word-break: break-word; /* Supporta ulteriormente la divisione */
  margin: 0 auto 20px auto; /* Centra l'elemento e aggiunge margine inferiore */
}

/* Stile opzionale per allineamento responsivo */
@media (max-width: 768px) {
  .flexpercent .flex-item {
    max-width: 100%; /* Elimina il limite per schermi più piccoli */
    margin: 0 20px; /* Aggiunge un margine massimo di 20px ai lati */
  }
}

.text-cont-p {
  position: relative;
  width: 80%; /* Aumenta la larghezza per dare più spazio all'immagine */
  max-width: 900px; /* Larghezza massima per contenitori più grandi */
  padding: 20px; /* Correzione del padding */
  background: linear-gradient(
    to bottom right,
    hsla(202, 98%, 74%, 0.5),
    hsla(257, 100%, 45%, 0.5)
  );
  text-align: center;
  border-radius: 20px;
  box-shadow: 4px 4px 8px rgba(158, 196, 246, 0.4);
  margin: 0 auto; /* Centra il contenitore */
}

.roadmap-image {
  width: 100%; /* L'immagine si adatta alla larghezza del contenitore */
  max-width: 100%; /* Previene che l'immagine superi i limiti del contenitore */
  height: auto; /* Mantiene le proporzioni */
  border: 2px solid black;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: block;
  margin: 20px auto; /* Spaziatura e centratura */
}

.faq-item {
  margin-bottom: 20px;
  margin-left: 40px;
  margin-right: 40px;
  padding: 15px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.545); /* Sfondo trasparente */
  border: 2px solid black; /* Bordo nero solido come base */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.faq-item strong {
  font-family: "rock salt";
  color: yellow;
  font-style: bold;
  font-size: 18px;

  display: block;
  margin-bottom: 8px;
}

.faq-item p {
  font-family: "Lacquer", system-ui;
  font-style: bold;
  margin: 0;
  font-size: 22px;
}

.faq-item em {
  color: #000000;
  font-style: italic;
  font-size: 1em;
}

.faq-item ul {
  margin-top: 10px;
  padding-left: 20px;
  font-family: "Lacquer", system-ui;
  font-size: 22px;
}

.faq-item ul li {
  margin-bottom: 5px;
}

.faq-item strong {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
}

@media (max-width: 768px) {
  .faq-item {
    margin-left: 10px;
    margin-right: 10px;
  }
}

/* GRIGLIA IMMAGINI */
.containergrid {
  position: relative;
  padding: 20px;
  width: auto; /* Per centrare il contenitore */
  display: flex;
  justify-content: center; /* Centra gli elementi orizzontalmente */
  align-items: center; /* Centra verticalmente, se necessario */
  flex-wrap: wrap; /* Manda a capo gli elementi se lo schermo si ridimensiona */
  gap: 20px; /* Aggiungi spazio tra le immagini */
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 colonne di larghezza uguale */
  gap: 20px; /* Spazio tra le immagini */
}

.image-item {
  border-radius: 5px;
  overflow: hidden; /* Nasconde l'overflow del pulsante */
  position: relative; /* Per posizionare il pulsante */
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Adatta l'immagine al contenitore mantenendo le proporzioni */
}

.download-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: #fff;
  color: #333;
  padding: 6px;
  border: none;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* Effetto zoom-in per l'immagine */
.zoom-image {
  transition: transform 0.3s ease-in-out;
}

.zoom-image:hover {
  transform: scale(1.1); /* Aumenta del 10% l'immagine al passaggio del mouse */
}

.image-item:hover .download-button {
  opacity: 1;
}

/* Stile per il pulsante "Go to Top" */
.go-top-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background-color: #5F9BFA; /* Colore di sfondo */
  color: #fff; /* Colore della freccia */
  border: 2px solid #000; /* Contorno nero */
  border-radius: 50%; /* Forma circolare */
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s, transform 0.3s;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}

/* Mostra il pulsante quando è attivo */
.go-top-button.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Effetto hover */
.go-top-button:hover {
  background-color: #4A82D8; /* Colore leggermente più scuro al passaggio del mouse */
}

@media (max-width: 768px) {
  .image-grid {
    grid-template-columns: repeat(2, 1fr); /* Una colonna per schermi piccoli */
  }
}

/* Stile del modale */
.modal {
  display: none; /* Nasconde il modale di default */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center; /* Centra l'immagine orizzontalmente */
  align-items: center; /* Centra l'immagine verticalmente */
  overflow: hidden; /* Nasconde l'overflow */
}

.modal-content {
  max-width: 90%;
  max-height: 90%;
  border: 2px solid black;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Stile per la chiusura */
.close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}


/* ==============================
   Stile specifico per la sezione NFT
   ============================== */
.nft-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Titolo “Our exclusive NFT” */
.nft-section .title-new {
  font-size: 1.5rem;                       /* fissato a 2rem */
  color: #FFD700;                        /* oro brillante */
  text-transform: uppercase;             /* maiuscole */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
  margin-bottom: 0.5rem;                 /* spazio sotto */
  letter-spacing: 1px;
}

/* Sottotitolo */
.nft-section .subtitle {
  font-family: "Lacquer", system-ui;     /* font Lacquer */
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: #FFFFFF;
  max-width: 800px;
  margin: 0 auto 2rem;                   /* spazio sotto */
  line-height: 1.4;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  text-align: center;
}

/* Link all’interno del sottotitolo */
.nft-section .subtitle a {
  color: #5F9BFA;
  font-weight: bold;
  text-decoration: underline;
}

/* Maggior gap tra le card NFT */
.nft-section .image-grid {
  gap: 30px;
}

/* ==============================
   Sezione Alpha: video + testo + CTA
   ============================== */
.alpha-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem; /* aggiunge spazio sotto l’ultimo box */
}

/* VIDEO */
.alpha-section .alpha-video {
  width: 100%;
  max-width: 800px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  margin-bottom: 1.5rem;
}

/* TESTO in Lacquer */
.alpha-section .alpha-text {
  font-family: "Lacquer", system-ui;
  font-size: 1.25rem;
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 2rem;
}

/* CTA colorata in palette */
.alpha-section .cta-button {
  display: inline-block;
  background: linear-gradient(45deg, #FFD700, #FFFFFF, #5F9BFA);
  color: #000;
  font-family: "Permanent Marker", sans-serif;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s ease-in-out;
}
.alpha-section .cta-button:hover {
  transform: scale(1.05);
}