/* Στυλ για το loader */
    .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* Μαύρο με διαφάνεια */
  z-index: 9998; /* Βεβαιωθείτε ότι είναι κάτω από τον loader */
  display: block; /* Εμφανίζεται πάντα */
}

/* Στυλ για το loader */
.loader {
  border: 16px solid #f3f3f3; /* Γυρισμένος διάφανος κύκλος */
  border-top: 16px solid #6d696a; /* Μπλε top */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite; /* Περιστροφή */
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -60px 0 0 -60px; /* Κεντράρισμα του spinner */
  z-index: 9999; /* Βεβαιωθείτε ότι είναι πάνω από το μαύρο φόντο */
  display: block; /* Εμφανίζεται πάντα */
}

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

 .loaded .overlay {
  display: none; /* Απόκρυψη του μαύρου φόντου όταν η σελίδα είναι φορτωμένη */
}

.loaded .loader {
  display: none; /* Απόκρυψη του loader όταν η σελίδα είναι φορτωμένη */
}

.logo {
	  position: fixed;

  bottom: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px; /* Προσαρμόστε το μέγεθος της εικόνας σύμφωνα με τις ανάγκες σας */
  height: auto; /* Προσαρμόστε το μέγεθος της εικόνας σύμφωνα με τις ανάγκες σας */
  z-index: 10000; /* Βεβαιωθείτε ότι είναι πάνω από τον κύκλο */
}