/* Make the carousel control arrows larger */
    .custom-control-prev,
    .custom-control-next {
        width: 60px; /* Width of the arrow container */
        height: 60px; /* Height of the arrow container */
        background-color: rgba(0, 0, 0, 0.6); /* Dark background with some transparency */
        border-radius: 50%; /* Make the arrow container circular */
        top: 50%;
        transform: translateY(-50%);
    }

    /* Styling for the actual arrow icons */
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        background-color: white; /* White arrow color */
        width: 30px; /* Width of the arrow itself */
        height: 30px; /* Height of the arrow itself */
    }

    /* Align the arrows in the center vertically */
    .custom-control-prev {
        left: 10px;
    }

    .custom-control-next {
        right: 10px;
    }
    
.fixed-bottom {
    z-index: 1030; /* Ensures it's above other content */
}

.btn-violet {
    background-color: #6f42c1; /* Violet color */
    color: #fff; /* White text */
    border: none;
}

.btn-violet:hover {
    background-color: #5a379e; /* Darker violet on hover */
}

.bg-light {
    background-color: #f8f9fa !important; /* Light background */
}

.p-3 {
    padding: 1rem !important;
}

select.form-select {
    width: 100%; /* Make sure the dropdown takes full width */
}