@import url("colors.css");

.item
{
    background: #333;    
    text-align: center;
    height: 350px !important;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Soft shadow */

}

.carousel
{
    margin: 30px 0px;
    border: 6px solid var(--pri);
    border-radius: 10px;
    overflow: hidden; /* Important for border-radius to apply to the carousel container */
    box-shadow: 0 8px 16px rgba(0,0,0,0.15); /* More prominent shadow for the entire carousel */
}

.bs-example
{
    margin: 20px;
}

.btn-carousel {
    background-color: var(--secAcc);
    border: 2px solid var(--priAcc) !important; /* Darker border for emphasis */
    color: #0d0a0b;
    padding: 12px 28px;
    border-radius: 10px;
    margin: 8px 10px 0 0;
    border: none;
    display: inline-block;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    box-shadow: 0 2px 8px rgba(19,60,85,0.08);
}

.carousel-caption {
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background for readability over images */
    padding: 20px; /* More padding inside the caption */
    border-radius: 10px; 
    left: 0; /* Ensure caption stretches full width */
    right: 0; /* Ensure caption stretches full width */
    bottom: 80px; /* Adjust this value to move the caption (and buttons) higher */
    padding-bottom: 0; /* Reset default padding if it's causing issues */
}

.carousel-caption{
bottom: 80px !important ; /* Example: Move the caption up by 80px from the bottom of the slide */
}

.carousel-caption h3 {
    font-size: 2.2em; /* Larger, more impactful heading */
    margin-bottom: 15px; /* Space between heading and buttons */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* Subtle text shadow for readability */
}

.carousel-indicators {
bottom: -1px; /* Increase this to move the indicators farther down -1*/
}

a:hover{
color: var(--link)!important;
}

.carousel-control-prev,
.carousel-control-next {
    top: 50%; /* Keep default vertical centering for built-in arrows */
    transform: translateY(-50%);
    background-image: none; /* Remove default arrow background image */
    opacity: 0.7; /* Slightly less opaque by default */
    transition: opacity 0.3s ease, background-color 0.3s ease; /* Smooth transition */
    width: 40px; /* Define width */
    height: 40px; /* Define height */
    border-radius: 50%; /* Make them round */
    background-color: rgba(0,0,0,0.3); /* Semi-transparent background */
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1; /* Fully opaque on hover */
    background-color: rgba(0,0,0,0.5); /* Darker background on hover */
}

.carousel-control-prev .glyphicon,
.carousel-control-next .glyphicon {
    font-size: 20px; /* Adjust icon size */
    color: #fff; /* White icon color */
}

.btn-div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

@media (max-width: 600px) {
    .btn-div {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .btn-carousel {
        width: 100%;
        font-size: 1rem;
        padding: 10px 0;
        margin: 0;
        border-radius: 14px;
    }
}