.index-banner-container {position: relative; width: 100%;display: flex;align-items: center;justify-content: center;--banner-arrow-width: 56px;}
.index-banner-container .slideshow {width: 100%;position: relative;}
.index-banner-container .slide-item {display: none;}
.index-banner-container .slide-item.active {display: block;}
.index-banner-container img {width: 100%;object-fit: cover;object-position: center;}
.index-banner-container .arrow {position: absolute;top: 0;width: var(--banner-arrow-width);height: 100%;color: #fff;background: rgba(0,0,0,0);font-size: 18px;font-weight: 900;cursor: pointer;outline: none;transition: 0.3s ease;display: flex;align-items: center;justify-content: center;border: 0;padding:  0 1rem; z-index: 2;}
.index-banner-container .arrow--previous {left: 0;border-radius: 0 3px 3px 0;}
.index-banner-container .arrow--next {right: 0;border-radius: 3px 0 0 3px;}
.index-banner-container .arrow:hover {background-color: rgba(0, 0, 0, 0.25);} 
.index-banner-container .arrow ion-icon {font-size: 28px; color: #ffffff; filter: drop-shadow(0 0 6px rgba(0,0,0,0.3));}
.index-banner-container .fade {opacity:unset;}
.index-banner-container .fade {animation-name: fade;animation-duration: 1.8s;-webkit-animation-name: fade;-webkit-animation-duration: 0.5s;}
@keyframes fade{from { opacity: 0.2;}to { opacity: 1}}
@-webkit-keyframes fade{from { opacity: 0.2;}to { opacity: 1}}

.index-banner-container .banner-content-container {width: 100%;color: white;position: absolute;bottom: 0;left: 0;right: 0;z-index: 1;transform: none;}
.index-banner-container .banner-content {background: linear-gradient(180deg, rgba(14,13,19,0.0) 0%, rgba(14,13,19,0.65) 35%, rgba(14,13,19,0.9) 100%); padding: 1rem 7.5% 1.25rem 7.5%;}
.index-banner-container .banner-content-title {display: flex;font-size: 1rem;text-transform: uppercase;padding: 0.5rem 0;}
.index-banner-container .banner-content-title span {position: relative;}
.index-banner-container .banner-content-title span::after {content: "";display: block;position: absolute;width: 40%;min-width: 5rem; height: 2.5px;background-color: white;}

.index-banner-container .banner-description-container {display: none;flex-direction: column;gap: 0.35rem;max-height: 30vh;}
.index-banner-container .banner-description-container.active {display: flex;}
.index-banner-container .banner-description-title {font-size: 2rem;text-transform: none;font-weight: 700;letter-spacing: 0.2px;}
.index-banner-container .banner-description-meta {display: flex;align-items: center;gap: 10px;color: #C9D6FF;font-size: 0.85rem;opacity: 0.9;}
.index-banner-container .banner-description-content {font-size: 0.95rem;line-height: 1.5; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;}
.index-banner-container .banner-description-actions {display: flex;align-items: center;gap: 12px;margin-top: 6px;}
.index-banner-container .banner-description-actions .edge_button {font-size: 0.9rem;padding: 0.45rem 1.5rem 0.35rem 1.5rem;}

.index-banner-container .banner-additional-item {display: none;}
.index-banner-container .banner-additional-item.active {display: block;}

.index-banner-container .banner-footer-container {display: flex;align-items: center;justify-content: space-between;padding-top: 0.5rem;}
.index-banner-container .banner-dot-container .dots{text-align: left;cursor: pointer;}
.index-banner-container .banner-dot-container .bannerDots{display: inline-block;width: 8px;height: 8px;border-radius:25px;background: lightgray;border: 3px solid lightgray;margin: 0 3px;transition: all 1s ease;}
.index-banner-container .banner-dot-container .bannerDots:first-child{background: var(--website-theme-color);} 
.index-banner-container .banner-dot-container .bannerDots:hover, .dot:focus{background: var(--website-theme-color);} 
.index-banner-container .banner-dot-container .bannerDots.active {width: 40px; transition: all 0.5s ease;border: 3px solid var(--website-theme-color);background:var(--website-theme-color) !important;}

.index-banner-container .banner-action-container {display: flex;align-items: center;justify-content: end;}
.index-banner-container .banner-action-container .banner-action-item {display: none;}
.index-banner-container .banner-action-container .banner-action-item.active {display: block;}

@media screen and (max-width: 1200px) {
    .index-banner-container {flex-flow: column;gap: 1rem}
    .index-banner-container .banner-content-container {position: static;}
    .index-banner-container .banner-content {padding: 0.75rem 1rem 1rem 1rem;background: linear-gradient(180deg, rgba(14,13,19,0.0) 0%, rgba(14,13,19,0.65) 45%, rgba(14,13,19,0.9) 100%);} 

    .index-banner-container .banner-description-title {font-size: 1.5rem;}
    .index-banner-container .banner-description-content {font-size: 0.9rem;}

    .index-banner-container .banner-description-actions {padding-left: calc(var(--banner-arrow-width) / 3 * 2);padding-right: calc(var(--banner-arrow-width) / 3 * 2);}

    .index-banner-container .banner-action-container .banner-action-tag {font-size: 1.15rem;}
    .index-banner-container .banner-action-container .edge_button {font-size: 0.9rem;}
    
}

@media screen and (max-width: 850px) {
    .index-banner-container {--banner-arrow-width: 48px;}
    .index-banner-container img {aspect-ratio: 18/9; height: auto;}
    .index-banner-container .banner-content {padding: 0.75rem 1rem 1rem 1rem;}
    .index-banner-container .banner-content-title {font-size: 0.9rem;}
    .index-banner-container .banner-description-container {max-height: 28vh;}
    .index-banner-container .banner-description-title {font-size: 1.15rem; text-align: left;}
    .index-banner-container .banner-description-meta {font-size: 0.8rem;}
    .index-banner-container .banner-description-content {font-size: 0.85rem; -webkit-line-clamp: 3;}
    .index-banner-container .banner-description-actions {justify-content: flex-end;}
    .index-banner-container .banner-description-actions .edge_button {width: auto; font-size: 0.85rem; padding: 0.4rem 1.1rem 0.3rem 1.1rem;}

    .index-banner-container .banner-footer-container {flex-flow: column; padding-top: 0.25rem;}
    .index-banner-container .banner-footer-container .banner-dot-container {width: 100%; display: flex; justify-content: center;}
    .index-banner-container .banner-dot-container .bannerDots {width: 10px; height: 10px; margin: 0 4px;}
    .index-banner-container .arrow ion-icon {font-size: 24px;}
}

@media screen and (max-width: 580px) {
    .index-banner-container {--banner-arrow-width: 44px;}
    .index-banner-container .slideshow {padding-bottom: 96px;} /* reserve space for overlay card */
    .index-banner-container img {aspect-ratio: 18/9; height: auto;}
    .index-banner-container .banner-content-container {position: absolute; left: 0; right: 0; bottom: 0; width: 100%;}
    .index-banner-container .banner-content { 
        background: rgba(14,13,19,0.75);
        backdrop-filter: blur(6px);
        padding: 12px 14px; 
        border-radius: 12px 12px 0 0; 
        margin: 0; 
    }
    .index-banner-container .banner-description-container {max-height: 28vh;}
    .index-banner-container .banner-description-title {font-size: 1rem;}
    .index-banner-container .banner-description-meta {font-size: 0.75rem;}
    .index-banner-container .banner-description-content {font-size: 0.8rem; -webkit-line-clamp: 3;}
    .index-banner-container .banner-description-actions {justify-content: flex-end;margin-bottom: 1rem;}
    .index-banner-container .banner-description-actions .edge_button_shadow {width: 100%;}
    .index-banner-container .banner-description-actions .edge_button {font-size: 0.8rem; width: 100%; padding: 0.35rem 1rem 0.25rem 1rem;}

    .index-banner-container .banner-dot-container .bannerDots {width: 10px; height: 10px; margin: 0 4px;}
    .index-banner-container .arrow ion-icon {font-size: 22px;}
}