body {
     background-color: #0B0B22;
     color: #F0F0F0;
     font-family: 'Poppins', sans-serif;
 }

 /*.gradient-text {
     background: linear-gradient(90deg, #00CFFF, #9A4DFF, #FF3EBF);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }*/

 .gradient-text {
     background: linear-gradient(90deg, #00CFFF, #9A4DFF, #FF3EBF);
     background-size: 300% 300%;
     /* Ustawienie większego tła, aby animacja była widoczna */
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: gradientAnimation 40s infinite linear;
     /* Ustawienie bardzo wolnej animacji */
 }

 @keyframes gradientAnimation {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0% 50%;
     }
 }

 .card,
 .profile-card {
     background: rgba(30, 30, 60, 0.95);
     border: none;
     border-radius: 20px;
     overflow: hidden;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     color: #F0F0F0;
 }

 .card:hover,
 .profile-card:hover {
     transform: scale(1.05);
     box-shadow: 0 0 30px #9A4DFF;
 }

.login-btn {
    background: linear-gradient(90deg, #00CFFF, #9A4DFF, #FF3EBF);
    border: none;
    color: #fff !important;
    font-weight: bold;
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    transition: all 0.3s ease;
}

.login-btn:hover {
    text-decoration: none;
    transform: translateY(-2px);
    /* zamiast scale, przesunięcie lekko w górę wygląda lepiej */
}

 .navbar {
     background: rgba(15, 15, 40, 0.9);
     backdrop-filter: blur(10px);
 }

 .footer {
     padding: 20px;
     background: rgba(15, 15, 40, 0.95);
     text-align: center;
     color: #F0F0F0;
 }

 .search-bar {
     max-width: 600px;
     margin: 20px auto;
 }

 .carousel-inner .carousel-item {
     display: flex;
     justify-content: center;
     gap: 20px;
 }

 .organizer-img {
     aspect-ratio: 1 / 1;
     /* wymusza kwadratowy kształt */
     width: 150px;
     object-fit: cover;
     border-radius: 50%;
     border: 3px solid #9A4DFF;
 }


 .event-details {
     font-size: 0.9rem;
 }

 .ticket-icon {
     width: 20px;
     height: 20px;
     margin-right: 5px;
 }

 .card-img-top {
     object-fit: cover;
     height: 200px;
 }

 .ticket-pools h2 {
     text-align: center;
 }

 .card-footer {
     padding: 1rem;
 }

 .event-details {
     font-size: 0.95rem;
     color: #ccc;
 }

 .event-image-fixed {
     max-height: 350px;
     object-fit: cover;
 }

 .btn-pay {
     background: linear-gradient(90deg, #00CFFF, #9A4DFF, #FF3EBF);
     /* Gradient tła */
     border: none;
     color: #fff !important;
     /* Biały kolor tekstu */
     font-weight: bold;
     border-radius: 20px;
     padding: 10px 20px;
     /* Większe odstępy */
     transition: transform 0.3s ease;
     text-align: center;
     display: inline-block;
     /* Umożliwia poprawne rozmieszczenie */
 }

 .btn-pay:hover {
     transform: scale(1.05);
     /* Powiększenie przycisku przy najechaniu */
 }

 .btn-pay:focus {
     outline: none;
     /* Usuwamy obramowanie po kliknięciu */
 }

.btn-soldout {
    background: linear-gradient(90deg, #ffa85c, #ff6f61, #ff5e7a);
    border: none;
    color: #fff !important;
    font-weight: bold;
    border-radius: 20px;
    padding: 10px 20px;
    text-align: center;
    display: inline-block;
    cursor: not-allowed;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.btn-soldout:hover {
    opacity: 0.85;
}

.btn-soldout:focus {
    outline: none;
}
 
 .navbar-logo {
     height: 40px;
     width: auto;
     display: block;
 }
 a {
     color: transparent;
     /* Ustawiamy kolor na przezroczysty, aby wykorzystać gradient */
     background: linear-gradient(90deg, #00CFFF, #9A4DFF, #FF3EBF);
     /* Tworzymy gradient */
     background-clip: text;
     /* Używamy gradientu do tekstu */
     -webkit-background-clip: text;
     /* Dla wsparcia w WebKit (Chrome, Safari) */
     text-decoration: none;
     /* Usunięcie podkreślenia */
 }

 a:hover {
     color: transparent;
     background: linear-gradient(90deg, #FF3EBF, #9A4DFF, #00CFFF);
     /* Gradient odwrotny przy hover */
     background-clip: text;
     -webkit-background-clip: text;
     text-decoration: underline;
     /* Podkreślenie linku po najechaniu */
 }
 /* Stylizacja hr z animowanym gradientem */
 hr {
     border: none;
     height: 2px;
     background: linear-gradient(90deg, #00CFFF, #9A4DFF, #FF3EBF);
     background-size: 300% 100%;
     animation: gradientAnimation 5s ease infinite;
     margin: 40px 0;
     position: relative;
 }

 @keyframes gradientAnimation {
     0% {
         background-position: 300% 0;
     }

     50% {
         background-position: 0 0;
     }

     100% {
         background-position: 300% 0;
     }
 }

 /* Opcjonalny cień pod hr */
 hr::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 0;
     width: 100%;
     height: 5px;
     background: rgba(0, 0, 0, 0.1);
     z-index: -1;
     border-radius: 10px;
 }
 #about .container {
     will-change: transform, opacity;
 }
 .toggle-zoom {
     transition: transform 0.4s ease;
     cursor: zoom-in;
 }

 .toggle-zoom.zoomed {
     transform: scale(1.1);
     /* lub np. 2 dla większego powiększenia */
     cursor: zoom-out;
     z-index: 1000;
     position: relative;
 }