.carousel {
    position: relative;
    height: 30vh;
}

.news a {
    text-decoration: none;
}

.bgImage .details {
    font-family:"BPG Arial Caps";
}

.bgImage .title {
    width: 40%;
    margin-top: 19vh;
    color: #fff;
    text-align: left !important;
    font-size: 20px;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.4);
    font-family: "BPG Arial Caps";
    z-index: 2 !important;
}

.bgImage .desc {
    width: 60%;
    margin-top: 5px;
    color: #fff;
    text-align: left !important;
    font-size: 11px;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.9);
    font-family: "BPG Arial Caps";
    z-index: 2 !important;
}

.news .title button {
    width: 100%;
    height: 45px;
    background: rgba(255,255,255,0.7);
    font-size: 10px;
    color: rgba(0,0,0,0.5);
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-width: 3px;
    border-style: solid;
    border-color: rgba(255,255,255,0.4);
    padding: 0px;
    margin-top: 30px;
    border-radius: 10px;
    box-shadow: -2px 5px 15px 0px rgba(0, 0, 0, 0.1);
}

.news .title button text {
    padding: 10px 10px 10px 20px;
}

.news .title button span {
    height: 100%;
    width: auto;
    display: flex;
    align-items: center;
    padding: 0px 15px 0px 15px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(90deg, rgba(0, 213, 195, 1) 0%, rgba(0, 189, 200, 1) 60%);
}

.news .title button span i {
    font-size: 20px;
}

.news .inactiveCard .img {
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: end;
    padding-bottom: 5px
}

.news .inactiveCard .img::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.4);
    /*background: linear-gradient(0deg, rgba(255,255,255, 0.5) 40%, rgba(255,255,255, 0) 60%);*/
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    z-index: 0;
    padding: 5px;
    background-clip: content-box;
}

.news .inactiveCard span {
    width: 0%;
    transform: rotate(-90deg);
    transform-origin: center center;
    white-space: nowrap;
    color: #fff;
    font-size: 15px;
    font-family:"BPG Arial Caps";
    text-shadow: 5px 3px 10px rgba(0,0,0,1);
}


.carousel-indicators {
    bottom: 0px;
    padding: 10px;
    margin: 0px !important;
    width: 100%;
    justify-content: end;
    z-index: 99;
}

.carousel-indicators [data-bs-target] {
    background-color: rgba(255, 255, 255, 0.5);
}

.carousel-indicators .active {
    background-color: rgba(255, 255, 255, 1);
}

.prevSlide {
    display: flex;
    justify-content: end;
    position: absolute;
    padding-left: 10px;
    top: 55%;
    z-index: 2;
    opacity: 0;
    transition: all .5s ease-in-out;
}

.prevSlide button {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 60%);
    padding: 10px 5px 10px 10px;
    font-size: 30px;
    font-weight:800;
    color: rgba(255,255,255,0.9);
    border-width: 0px;
    border-radius: 5px;
}

.nextSlide {
    display: flex;
    justify-content: end;
    position: absolute;
    padding-left: 10px;
    top: 35%;
    z-index: 2;
    opacity: 0;
    transition: all .5s ease-in-out;
}

.carousel:hover .nextSlide {
    opacity: 1;
}

.carousel:hover .prevSlide {
    opacity: 1;
}

.nextSlide button {
    /*background: rgba(255,255,255,0.5);*/
    /*background: linear-gradient(90deg, rgba(0, 213, 195, 1) 0%, rgba(0, 189, 200, 1) 60%);*/
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 60%);
    padding: 10px 5px 10px 10px;
    font-size: 30px;
    font-weight:800;
    color: rgba(255,255,255,0.9);

    /*border-width: 2px 0px 2px 2px;*/
    border-width: 0px;
    /*border-style: solid;*/
    /*border-color: rgba(0, 213, 195,0.75);*/
    border-radius: 5px;
}

.carousel .glow-btn {
    margin-top: 15px;
    position: relative;
    display: inline-flex;
    align-items: center;
    float: center;
    gap: 14px;
    padding: 5px 20px;
    border-radius: 8px;
    background: rgba(20, 20, 20, 0.85);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    overflow: hidden;
    backdrop-filter: blur(6px);
}

.carousel .glow-btn::after {
    content: "";
    position: absolute;
    right: 20%;
    top: 50%;
    transform: translateY(-50%);
    width: 160px;
    height: 80px;
    background: radial-gradient(
            ellipse at center,
            rgba(255, 0, 0, 0.1),
            rgba(255, 0, 0, 0.2),
            transparent 70%
    );
    filter: blur(20px);
    pointer-events: none;
}

.carousel .icon i {
    color: #ff2b2b;
    font-size: 14px;
    font-weight: 400;
}

.carousel .text.muted {
    color: rgba(255, 255, 255, 0.75);
    font-size: 9px;
}

.carousel .divider {
    width: 2px;
    height: 24px;
    background: #ff2b2b;
    box-shadow: 0 0 10px rgba(255, 43, 43, 0.8);
}

.animate-me {
    cursor: pointer;
    opacity: 0;
    transform: translateY(30px);
}

.animate-me.active-anim {
    animation: fadeUp 0.7s ease forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hover-text::before {
    content: "[ ";
    transform: translateX(5px);
}

.hover-text::after {
    content: " ]";
    transform: translateX(-5px);
}

.hover-text::before,
.hover-text::after {
    opacity: 0;
    color: red;
    transition: all 0.2s ease;
}

.hover-text:hover::before,
.hover-text:hover::after {
    opacity: 1;
    transform: translateX(0);
}



@media only screen and (max-width: 600px) {
    /*.carousel {*/
    /*    position: absolute;*/
    /*    top: 0px;*/
    /*    left: 0px;*/
    /*    width: calc(96vw - 15px);*/
    /*    height: calc(100vh - 30px);*/
    /*    display: flex;*/
    /*    justify-content: center;*/
    /*    align-items: center;*/
    /*    font-size: 10px;*/
    /*    color: rgba(0, 0, 0, 0.9);*/
    /*    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.07);*/
    /*    z-index: 1;*/
    /*}*/
}