.morph-primary {
    background: linear-gradient(90deg, #e5204450, #e56b812e);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 5px;
}

.morph-secondary {
    background: linear-gradient(90deg, #42009885, #6000de85);
    border: 1px solid rgba(255, 255, 255, 0.272);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 5px;
}

.morph {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);  
    border-radius: 5px;
}

.morph-strong {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-radius: 5px;
}

.morph-pinki {
    background: linear-gradient(90deg, rgba(239, 50, 217, 0.33), rgba(137, 229, 255, 0.58));
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 5px;
}

.morph-pinki-no-border {
    background: linear-gradient(90deg, rgba(239, 50, 217, 0.33), rgba(137, 229, 255, 0.58));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.gradient-button {
    background: linear-gradient(45deg, var(--bs-info), var(--bs-danger), var(--bs-warning));
    color: white;

    /* Ustawienie koloru tekstu, jeśli potrzebne */
    border: none;

    /* Opcjonalnie, aby usunąć obramowanie */
    padding: 10px 20px;

    /* Opcjonalnie, dla lepszego wyglądu */
    background-size: 200% 200%;
    transition: all 0.3s ease;

    /* Dodaje płynne przejście dla efektów hover i focus */
}


.hover-zoom {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.2);

    /* Płynne przejście dla transformacji (zoom) i cienia */
    cursor: pointer;

    /* Dodanie kursora linku */
}

.hover-zoom:hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0px 0px 35px rgba(0,0,0,0.2);
    transform: scale(1.05) translateX(0px);
    z-index: 10;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;

    /* Płynne przejście dla transformacji (zoom) i cienia */
}


* Pinegrow generated Additional Rules End */
.container-right-md {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

/* Dla urządzeń małych (sm) */
@media (min-width: 576px) {
    .container-right-md {
        padding-left: calc(52vw - 290px);

        /* Dostosuj według potrzeb */
        padding-right: 0;
        margin-left: auto;
        margin-right: auto;
    }

    .margin-md-left {
        margin-left: calc(52vw - 320px);

        /* Dostosuj według potrzeb */
    }
}

/* Dla urządzeń średniej wielkości (md) */
@media (min-width: 768px) {
    .container-right-md {
        padding-left: calc(52vw - 395px);
        padding-right: 0;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Dla urządzeń dużych (lg) */
@media (min-width: 992px) {
    .container-right-md {
        padding-left: calc(52vw - 496px);
        margin-left: auto;
        margin-right: auto;
    }
}

/* Dla urządzeń bardzo dużych (xl) */
@media (min-width: 1200px) {
    .container-right-md {
        max-width: 1140px;
        padding-left: 0px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Dla urządzeń największych (xxl) */
@media (min-width: 1400px) {
    .container-right-md {
        max-width: 1320px;
        padding-left: 0px;
        margin-left: auto;
        margin-right: auto;
    }
}

.margin-md-left {
    margin-left: 0px;
}

/* Dla urządzeń średniej wielkości (md) */
@media (min-width: 768px) {
    .margin-md-left {
        margin-left: calc(52vw - 384px);
    }
}

/* Dla urządzeń dużych (lg) */
@media (min-width: 992px) {
    .margin-md-left {
        margin-left: calc(52vw - 496px);
    }
}

/* Dla urządzeń bardzo dużych (xl) */
@media (min-width: 1200px) {
    .margin-md-left {
        margin-left: calc(52vw - 600px);
    }
}

/* Dla urządzeń największych (xxl) */
@media (min-width: 1400px) {
    .margin-md-left {
        margin-left: calc(52vw - 700px);
    }
}

.empty-to-container {
    width: 0px;
    scroll-snap-align: start;
}

/* Dla urządzeń średniej wielkości (md) */
@media (min-width: 768px) {
    .empty-to-container {
        width: calc(52vw - 384px);
    }
}

/* Dla urządzeń dużych (lg) */
@media (min-width: 992px) {
    .empty-to-container {
        width: calc(52vw - 496px);
    }
}

/* Dla urządzeń bardzo dużych (xl) */
@media (min-width: 1200px) {
    .empty-to-container {
        width: calc(52vw - 600px);
    }
}

/* Dla urządzeń największych (xxl) */
@media (min-width: 1400px) {
    .empty-to-container {
        width: calc(52vw - 700px);
    }
}

.scrollable-row {
    overflow: scroll;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;

    /* IE and Edge */
    scrollbar-width: none;

    /* Firefox */
}

/* Dla urządzeń dużych (lg) */
@media (min-width: 992px) {
    .scrollable-row {
        overflow: visible;
    }
}

.scrollable-row::-webkit-scrollbar {
    display: none;

    /* Chrome, Safari and Opera */
}

.scrollable-col {
    flex: 0 0 auto;

    /* Zmień to, aby upewnić się, że kolumny nie są rozciągane */
    margin-right: 0px;

    /* Dodaje przestrzeń między kolumnami */
    scroll-snap-align: start;
}