.kit-title {
    font-family: Bazinga;
    text-align: center;
    width: 100%;
    /* 1. Apply a background gradient to the element */
    background-image: linear-gradient(to right, #f3ec78, #af4261); /* Example colors and direction */

    /* 2. Clip the background to the shape of the text */
    -webkit-background-clip: text; /* For WebKit browsers (Chrome, Safari) */
    background-clip: text; /* Standard property */

    /* 3. Make the text itself transparent to reveal the background gradient */
    -webkit-text-fill-color: transparent; /* For WebKit browsers */
    color: transparent; /* Standard property, for fallback or other browsers */

    /* Optional: Add basic text styling */
    font-size: 6rem;
}

.carousel-inner {
    background-color: white;
    border-radius: var(--bs-border-radius);
}

.carousel-inner > .carousel-item > img {
    margin: auto;
    object-fit: contain;
    object-position: center;
    overflow: hidden;
} 

.buy-btn {
    font-size: 1.25rem;
    color: white;
    text-decoration: none;
    & img {
        height: 1.8rem;
        margin: auto;
        margin-left: 0.3rem;
    }
}

.buy-btn:hover {
    color: white;
}

.indicator-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: var(--bs-border-radius);
}

.img-indicator-row > .col-4 > button {
    border: none;
    background-color: white;
    padding: 0px;
    height: 100px;
    width: 100%;
    & img {
        padding: 0px;
    }
}