.main .section {
    background-color: rgba(0, 0, 0, 0.5);
    /* same as above */
    border-radius: 15px;
    /* rounded corners for a softer look */
    padding: 15px;
    margin-bottom: 15px;
}

.text-background {
    background: rgba(0, 0, 0, 0.5);
    /* half-transparent black */
    color: white;
    /* white text */
    padding: 15px;
    /* some padding */
    border-radius: 10px;
    /* rounded corners */
    font-weight: 500;
    /* slightly bold text */
}

.carousel-item {
    height: 60vh;
    /* Or whatever size you prefer */
    background: rgba(0, 0, 0, 0.5);
    /* semi-transparent background */
    position: relative;
}

.carousel-item img {
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* center the image within the item */
    object-fit: cover;
    /* make sure the image covers the whole item */
}

.carousel-control-prev,
.carousel-control-next {
    opacity: 1;
    /* Make the controls fully opaque */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(13, 215, 63, 0.5);
    /* Make it slightly transparent */
    transition: 0.3s;
    /* Transition effect when hovering */
    filter: invert(1) sepia(1) saturate(5) hue-rotate(-180deg);
    /* Make it red */
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    background-color: rgba(232, 6, 6, 0.8);
    /* Make it less transparent when hovering */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    /* Add a inner shadow effect */
    filter: invert(1) sepia(1) saturate(5) hue-rotate(-180deg);
    /* Keep it red when hovering, graphical effects make it visible ;) not red necessarily but now it's good when hovered */
}

.carousel-control-prev,
.carousel-control-next {
    width: auto;
    bottom: 0;
    /* Position it at the bottom */
    top: unset;
    /* Reset the top position */
    transform: unset;
    /* Reset the transform property */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 35px;
    /* Adjust this value as needed */
    height: 35px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    /* This will add a semi-transparent white background around the arrows */
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    /* Makes the background circular */
    padding: 2px;
    /* Padding between the icon and the background */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    box-shadow: 0 0 10px #000;
}

/* Above is a trick to make something visible everywhere; add a shadow! */

.slideshow-header {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.carousel-description-text {
    display: none;
    background-color: rgba(0, 0, 0, 0.5);
    /* Adjust the alpha value (0.5 here) as per your need */
    color: white;
    /* Adjust the color of the text as per your need */
    /* Add other styles as needed */
}

.info-list {
    list-style-type: none;
    padding: 0;
}

.info-list li {
    padding: 5px 0;
}

.info-list i {
    margin-right: 10px;
}