/* Reset base */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html, body {
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
   font-family: 'Arial', sans-serif;
   color: #fff;
   line-height: 1.6;
   overflow-x: hidden;
}

.video-background {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: -1;
}

.container {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100vh;
   text-align: center;
}

.button-group {
   display: flex;
   gap: 15px; /* Spaziatura ridotta per un look più compatto */
}

.main-button {
   padding: 10px 20px; /* Dimensioni più piccole ed eleganti */
   border: none;
   border-radius: 20px; /* Arrotondati per un look professionale */
   font-size: 1rem; /* Testo più piccolo */
   font-weight: 600; /* Peso del testo moderato */
   text-decoration: none;
   color: #fff;
   background: linear-gradient(135deg, #00AEEF, #003087); /* Gradiente azzurro originale */
   transition: transform 0.3s ease, background 0.3s ease;
   display: inline-flex; /* Per allineare icona e testo */
   align-items: center;
   justify-content: center;
   gap: 5px; /* Spazio tra icona e testo */
   text-transform: uppercase;
   letter-spacing: 0.5px; /* Spaziatura leggera */
}

.main-button:hover {
   transform: translateY(-2px); /* Movimento più sottile */
   background: linear-gradient(135deg, #0091c2, #002664); /* Gradiente hover più scuro */
}

.main-button i {
   font-size: 0.9rem; /* Icone leggermente più piccole del testo */
}

/* Media query per schermi più piccoli */
@media (max-width: 600px) {
   .button-group {
       flex-direction: column;
       gap: 10px;
   }

   .main-button {
       width: 180px; /* Larghezza fissa per compattezza */
       padding: 8px 15px;
   }
}
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
html, body {
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
   font-family: 'Arial', sans-serif;
   color: #fff;
   line-height: 1.6;
   overflow-x: hidden;
}
.video-background {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: -1;
}
.container {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100vh;
   text-align: center;
   padding: 20px;
}
.logo-container {
   text-align: center;
   margin-bottom: 30px;
}
.logo {
   max-width: 180px;
   height: auto;
   display: block;
   margin: 0 auto;
}
.button-group {
   display: flex;
   gap: 20px;
   justify-content: center;
}
.main-button {
   padding: 10px 20px;
   border: none;
   border-radius: 20px;
   font-size: 1rem;
   font-weight: 600;
   color: #fff;
   background: linear-gradient(135deg, #00AEEF, #003087);
   text-decoration: none;
   transition: transform 0.3s ease, background 0.3s ease;
   display: inline-flex;
   align-items: center;
   gap: 5px;
}
.main-button:hover {
   transform: translateY(-2px);
   background: linear-gradient(135deg, #0091c2, #002664);
}
@media (max-width: 600px) {
   .logo {
       max-width: 150px;
   }
   .main-button {
       padding: 8px 15px;
       font-size: 0.9rem;
   }
}