/* Reduce the control hit area */
.carousel-control-prev,
.carousel-control-next {
    width: 35px;            /* shrink control area */
    pointer-events: none;   /* prevent blocking card buttons */
}

/* Make arrows clickable again */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    pointer-events: auto;
}

/* Optional: vertically center arrows and adjust size */
/* .carousel-control-prev-icon,
.carousel-control-next-icon {
    background-size: 100%, 100%;
} */

/* --- Make arrows BLUE & large --- */
/* Increase arrow size */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 40px;        /* default 20px */
    height: 40px;       /* default 20px */
    background-size: 40px 40px;
}

/* Recolor arrows to BLUE using CSS filter */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(31%) sepia(92%) saturate(2000%) hue-rotate(190deg) brightness(95%) contrast(105%);
    /* This produces a nice #007bff-ish Bootstrap blue */
}

/* Optional: hover effect */
.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    filter: invert(20%) sepia(90%) saturate(3500%) hue-rotate(190deg) brightness(105%) contrast(110%);
    transform: scale(1.15);
    transition: 0.2s ease;
}

/* Target all anchor tags */
a {
    text-decoration: none;  /* removes underline */
    color: inherit;         /* keeps text color same as parent */
}

/* OR, if you want a specific color */
/* a {
    text-decoration: none;
    color: #333;
} */

/* Optional: on hover */
a:hover {
    text-decoration: underline; /* underline only on hover if desired */
    color: #4a3fec; /* optional hover color */
}