
    /* Hexagon image shape */
    .hexagon {
      clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }
    body {
        font-family: 'Poppins', sans-serif;
        color: #000000;
        background-color: #f7f6fc;
        padding-top: 40px; /* Höhe des Tickers + etwas extra für Sicherheit */
    }

    .card {
        border: none !important;
        box-shadow: none !important;
    }

    .navbar {
        max-width: 80%; /* Oder eine feste Breite, z. B. 900px */
        border-radius: 50px; /* Sorgt für abgerundete Enden */
        background-color: white;
        margin: 20px auto; /* Zentriert die Navbar */
        padding: 10px 20px;
        margin-top: 10px; /* Navbar etwas nach unten setzen */
    }

    .custom-table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 15px; /* Abrundung der gesamten Tabelle */
    overflow: hidden; /* Verhindert das Austreten von Inhalten außerhalb der Abrundung */
}

@media (min-width: 768px) {
    .custom-table tbody td {
        padding-top: 20px; 
        padding-bottom: 20px;
    }
}
@media (max-width: 768px) {
    .custom-table tbody td {
        padding-top: 15px; 
        padding-bottom: 15px;
    }
}

    .custom-table th, .custom-table td {
        color: black !important; /* Setzt den Text in den Tabellenzellen auf Schwarz */
        border: none !important; /* Entfernt mögliche Rahmen */
    }

    /* Abrundung der oberen Ecken in der ersten Zeile */
    .custom-table tr:first-child th:first-child {
        border-top-left-radius: 15px;
    }
    .custom-table tr:first-child th:last-child {
        border-top-right-radius: 15px;
    }

    /* Abrundung der unteren Ecken in der letzten Zeile */
    .custom-table tr:last-child td:first-child {
        border-bottom-left-radius: 15px;
    }
    .custom-table tr:last-child td:last-child {
        border-bottom-right-radius: 15px;
    }




    @media (max-width: 768px) {
        .custom-table td, .custom-table th {
            font-size: 12px; /* Schrift verkleinern */
        }
        
        .custom-table td {
            padding: 8px; /* Weniger Padding */
        }
    }

    /* "Instruction for Participation" Container auf Mobile anpassen */
    @media (max-width: 768px) {
        .card {
            max-width: 80%; /* Kartenbreite begrenzen */
            margin: 0 auto; /* Karten zentrieren */
        }
    }

    /* "Ersten beiden Buttons auf Mobile mittig ausrichten." Container auf Mobile anpassen */
    @media (max-width: 768px) {
        .button-container {
            justify-content: center !important; /* Buttons mittig ausrichten */
        }
    }

    /* buttons orange machen */
    .btn-danger {
        background-color: #f9660e !important;
        border-color: #f9660e !important;
    }

    .btn-danger:hover {
        background-color: #d4550c !important; /* Dunklere Farbe für Hover-Effekt */
        border-color: #d4550c !important;
    }

    /* QR Code Button nach erstem Participate button */
    .btn-custom {
        background-color: #f9660e !important; /* Hintergrundfarbe */
        border-color: #f9660e !important;
        color: black !important; /* Icon-Farbe */
    }

    .btn-custom:hover {
        background-color: #d4550c !important; /* Dunklere Farbe beim Hover */
        border-color: #d4550c !important;
    }

    .btn-custom i {
        color: black !important; /* Icon in schwarz */
    }


    

    /* "Rules & Information" Abschnitt auf Mobil mittig ausrichten */
    @media (max-width: 768px) {
        #info .row {
            text-align: center; /* Inhalt zentrieren */
            margin-top: 20px;
        }
        #info .row .col-md-6 {
            margin: 0 auto; /* Mittig ausrichten */
            margin-bottom: 30px;
        }
    }

   
    @media (max-width: 768px) {
        .hero-section .row {
            text-align: center;
        }

        .hero-image {
            width: 90%;
            margin: 0 auto 20px auto;
            margin-top: 20px;
            margin-bottom: -65px;
        }
    }

    @media (max-width: 768px) {
        .navbar {
            width: 100%;
            max-width: none;
            border-radius: 0;
            margin: 0;
        }
    }

    /* Hamburger-Icon schwarz machen */

    .navbar-toggler-icon {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="black" class="bi bi-list" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 3.5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1h-10a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1h-10a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1h-10a.5.5 0 0 1-.5-.5z"/></svg>');
    }

    /* Grauen Rand um Hamburger-Icon entfernen */

    .navbar-toggler {
        border: none !important;  /* Entfernt den Rand */
        box-shadow: none !important;  /* Entfernt den Schatten */
        background-color: transparent !important; /* Falls eine Hintergrundfarbe vorhanden ist */
        outline: none !important; /* Entfernt den Fokus-Ring */
    }

    /* Wenn Hamburger Menu auf mobil öffnet, dann platz über Giveaway schaffen */
    @media (max-width: 768px) {
        .navbar-collapse {
            padding-top: 20px !important; /* Fügt Platz über dem ersten Menüpunkt hinzu */
        }
    }
    .navbar-toggler {
    border: none !important;  /* Entfernt den Standard-Rand */
    background-color: #f9660e !important; /* Hintergrundfarbe */
    border-radius: 50px !important; /* Rundes Design */
    padding: 10px; /* Abstand für die Größe des Icons */
}

    /* Hamburger-Icon korrekt stylen */
.navbar-toggler-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    background: none !important; /* Entfernt das Standard-Bild */
    position: relative;
}

/* Linien erstellen */
.navbar-toggler-icon span {
    display: block;
    background-color: black;
    width: 100%;
    height: 3px;
    transition: all 0.3s ease-in-out;
}


    /* Animation für geöffneten Zustand */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span:nth-child(2) {
    opacity: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}




    @media (max-width: 768px) {
        .hero-image {
            width: 100%; /* Volle Breite nutzen */
            max-width: 400px; /* Begrenzung, damit es nicht zu riesig wird */
            height: auto; /* Verhältnis beibehalten */
        }
    }

    /* QR Code abschnitt auf Desktop und Mobil unterscheiden */
    @media (max-width: 768px) {
        #participate-desktop {
            display: none !important;
        }
        #participate-mobile {
            display: block !important;
        }
    }

    /* Calculate your prize abschnitt auf Desktop und mobile unterscheiden */
    @media (max-width: 768px) {
        #count-desktop {
            display: none !important;
        }
        #count-mobile {
            display: block !important;
        }
    }

    @media (min-width: 457px) {
        #count-desktop {
            display: block !important;
        }
        #count-mobile {
            display: none !important;
        }
    }

    /* Sticky Krypto-Ticker */
    #crypto-ticker {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #f9660e; /*  Hintergrund */
        color: black; /* Weiße Schrift */
        padding: 8px 0;
        font-size: 14px;
        font-weight: bold;
        z-index: 1000;
        overflow: hidden;
        white-space: nowrap;
    }

    .ticker-container {
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    #ticker-content {
        display: flex;
        gap: 40px;
        animation: ticker-scroll 20s linear infinite;
        width: max-content;
    }

    @keyframes ticker-scroll {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
    }


    .ticker-item {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .ticker-icon {
        width: 16px;
        height: 16px;
    }


    /* Footer */
    .footer a {
        color: #fff;
        text-decoration: none;
        font-size: 14px;
    }

    .footer a:hover {
        text-decoration: underline;
    }
   /* Footer Styling */
    .footer {
        text-align: left; /* Mobile-Inhalte mittig */
    }

    .footer h6 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .footer a {
        color: #fff;
        text-decoration: none;
        font-size: 14px;
    }

    .footer a:hover {
        text-decoration: underline;
    }

    /* Footer Links zentrieren und Abstand optimieren */
    .footer-links {
        list-style: none;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        font-size: 14px;
        margin-top: 10px;
    }

    .footer-links li {
        display: inline;
    }

    /* Mehr Abstand für mobile Footer-Spalten */
    @media (max-width: 768px) {
        .footer .row > div {
            text-align: left;
        }

        .footer-links{
            justify-content: left;
            display: flex;
            flex-wrap: wrap;
            gap: 9px; /* Abstand zwischen den Links */

        }

        .footer-links li {
            flex: 1 1 auto; /* Automatische Breite für gleichmäßige Verteilung */
        }

        .footer .container {
            padding-left: 40px; /* Mehr Abstand nach rechts für kleinere Bildschirme */
        }
    }

    footer.footer {
        padding-top: 100px !important;  /* Mehr Abstand nach oben */
        padding-bottom: 100px !important; /* Mehr Abstand nach unten */
    }


    /* Social Icons Styling */
    .social-icon {
        display: inline-block;
        margin: 0 10px;
    }

    .social-img {
        width: 30px; /* Größe der Icons */
        height: auto;
        transition: opacity 0.3s ease-in-out;
    }

    .social-img:hover {
        opacity: 0.7;
    }

    .social-icons-container {
        margin-bottom: 40px; /* Falls nötig, hier Wert anpassen */
    }


    /* Tabellen content nach rechts verschieben*/

    /* mobil */
    @media (max-width: 768px) {

        .custom-table th, .custom-table td {
        padding-left: 25px; /* Verschiebt den Inhalt nach rechts */
        padding-right: 25px;
        }

        .custom-table th {
            padding-top: 25px; /* Mehr Padding oben */
        }

        

    }

    /* Desktop */

    @media (min-width: 768px) {

        .custom-table th, .custom-table td {
        padding-left: 50px; /* Verschiebt den Inhalt nach rechts */
        }

        .custom-table th {
            padding-top: 30px; /* Mehr Padding oben */
        }

        
    }


    /* Auf Desktop unter der transaktionstabelle latz schaffen */
    @media (min-width: 768px) {
        #transactions {
            margin-bottom: 50px; /* Abstand unter der Tabelle */
        }
    }

    /* Zeilenumbruch nur auf Mobil aktivieren */
    @media (min-width: 768px) {
        .mobile-break {
            display: none;
        }
    }

    /* Tabellenzeilen abwechselnd färben */
    .custom-table tbody tr:nth-child(even) td {
        background-color: white !important; /* Ungerade Zeilen */
    }

    .custom-table tbody tr:nth-child(odd) td {
        background-color: #fcf6f0 !important; /* Gerade Zeilen */
    }

    .custom-table td:last-child {
    padding-right: 25px !important; /* Mindestens 20px Abstand nach rechts */
}

/* Live Transaktion Abschnitt Funktionen */
    /* Fade-In Animation für neue Transaktionen */
    @keyframes fadeInSlide {
        from {
            opacity: 0;
            transform: translateY(-1px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .fade-in {
        animation: fadeInSlide 1s ease-in-out;
    }

    /* Claimed Widget */
    #progress-widget {
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        background-color: #f9660e;
        color: white;
        padding: 10px 15px;
        border-radius: 8px;
        font-weight: bold;
        font-size: 14px;
        z-index: 99999 !important;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
        text-align: center;
        width: 160px;
        display: flex;
        flex-direction: column;
        align-items: center;
        
        /* Standardmäßig versteckt */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    }

    #progress-bar {
        width: 100%;
        height: 8px;
        background-color: white;
        border-radius: 5px;
        margin-top: 5px;
        overflow: hidden;
    }

    #progress-fill {
        width: 74%;
        height: 100%;
        background-color: black;
    }

    /* Schließen-Button Styling */
    #close-widget {
        position: absolute;
        top: 5px;
        right: 8px;
        cursor: pointer;
        font-size: 17px;
        font-weight: bold;
        color: black;
    }

    #close-widget:hover {
        color: white;
    }
