/* General styles for both next and previous buttons */
.carousel-control-prev,
.carousel-control-next {
    /* Sizing and Shape */
    width: 70px;
    height: 70px;
    border-radius: 50%; /* Makes the button circular */

    /* Appearance */
    background-color: #000;
    border: 1px solid #fff;
    color: #fff; /* Sets the color for the arrow character */
    opacity: 0.8; /* Makes it slightly transparent until hover */
    transition: opacity 0.2s ease-in-out;

    /* Positioning */
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Vertically centers the button */
    z-index: 10; /* Ensures buttons are on top of other content */
    
    /* Flexbox for centering the arrow */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Optional: Improve visibility on hover */
.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
}

/* Position the 'previous' button outside the carousel on the left */
.carousel-control-prev {
    left: -80px; /* Adjust this value to control the distance */
}

/* Position the 'next' button outside the carousel on the right */
.carousel-control-next {
    right: -80px; /* Adjust this value to control the distance */
}

/* Hide the default Bootstrap SVG icons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    display: none;
}

/* Add a custom 'left arrow' character to the 'previous' button */
.carousel-control-prev::before {
    content: '‹';
    font-size: 90px; /* Increased from 40px for a larger arrow */
    font-weight: italic;
    line-height: 1;
    padding-bottom: 4px; /* Nudge the arrow up slightly for better centering */
}

/* Add a custom 'right arrow' character to the 'next' button */
.carousel-control-next::before {
    content: '›';
    font-size: 90px; /* Increased from 40px for a larger arrow */
    font-weight: italic;
    line-height: 1;
    padding-bottom: 4px; /* Nudge the arrow up slightly for better centering */
}