.banner-container {position: relative; width: 100%;display: flex;align-items: center;justify-content: center;}
.banner-container .slideshow {width: 100%;position: relative;}
.banner-container .slide-item {display: none;}
.banner-container .slide-item.active {display: block;}
.banner-container img {width: 100%;object-fit: cover;object-position: center;}
.banner-container .arrow {position: absolute;top: 0;width: 40px;height: 100%;color: #fff;background: rgba(0,0,0,0);font-size: 18px;font-weight: 900;cursor: pointer;outline: none;transition: 0.6s ease;display: flex;align-items: center;justify-content: center;border: 0;padding:  0 2rem 0 2rem;}
.banner-container .arrow--previous {left: 0;border-radius: 0 3px 3px 0;}
.banner-container .arrow--next {right: 0;border-radius: 3px 0 0 3px;}
.banner-container .arrow:hover {background-color: rgb(0, 0, 0, 0.5);backdrop-filter: blur(2px);}
.banner-container .fade {opacity:unset;}
.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}}

.banner-container .banner-content-container {width: calc(100% - 7.5% - 7.5%);color: white;position: absolute;bottom: 0;z-index: 1;transform: translateY(50%);}
.banner-container .banner-content {background: rgba(89, 90, 102, 0.6);backdrop-filter: blur(5px); padding: 0 5rem 2rem 5rem; border-radius: 1rem;}
.banner-container .banner-content-title {display: flex;font-size: 1rem;text-transform: uppercase;padding: 1.5rem 0;}
.banner-container .banner-content-title span {position: relative;}
.banner-container .banner-content-title span::after {content: "";display: block;position: absolute;width: 40%;min-width: 5rem; height: 2.5px;background-color: white;}

.banner-container .banner-description-container {display: none;flex-direction: column;gap: 0.25rem;}
.banner-container .banner-description-container.active {display: flex;}
.banner-container .banner-description-title {font-size: 2.5rem;text-transform: uppercase;font-weight: 500;}
.banner-container .banner-description-content {font-size: 1rem;line-height: 1.5; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;min-height: 4.5em;}

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

.banner-container .banner-footer-container {display: flex;align-items: center;justify-content: space-between;padding-top: 1rem;}
.banner-container .banner-dot-container .dots{text-align: left;cursor: pointer;}
.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;}
.banner-container .banner-dot-container .bannerDots:first-child{background: var(--website-theme-color);}
.banner-container .banner-dot-container .bannerDots:hover, .dot:focus{background: var(--website-theme-color);}
.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;}

.banner-container .banner-action-container {display: flex;align-items: center;justify-content: end;}
.banner-container .banner-action-container .banner-action-item {display: flex;align-items: center;gap: .75rem;display: none;}
.banner-container .banner-action-container .banner-action-item.active {display: flex;}
.banner-container .banner-action-container .banner-action-tag {align-self: stretch;font-size: 1.25rem;padding-top: 0.5rem;}
.banner-container .banner-action-container .edge_button {font-size: 1rem;padding: 0.5rem 3rem 0.35rem 3rem;}

@media screen and (max-width: 1200px) {
    .banner-container {flex-flow: column;gap: 1rem}
    .banner-container .banner-content-container {position: static;transform: none;}
    .banner-container .banner-content {padding: 0 3rem 1rem 3rem;}

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

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

@media screen and (max-width: 850px) {
    .banner-container .banner-content-title {font-size: 0.9rem;}
    .banner-container .banner-description-title {font-size: 1.3rem;}
    .banner-container .banner-description-content {font-size: 0.8rem;}
    
    .banner-container .banner-footer-container {flex-flow: column;padding-top: 0;}
    .banner-container .banner-footer-container .banner-dot-container {width: 100%;}

    .banner-container .banner-action-container  {width: 100%;}
    .banner-container .banner-action-container .banner-action-item {flex-flow: column;gap: 0;width: 100%;}
    .banner-container .banner-action-container .banner-action-tag {font-size: 1rem;text-align: end;}
    .banner-container .banner-action-container .edge_button_shadow {width: 100%;}
    .banner-container .banner-action-container .edge_button {font-size: 0.8rem;width: 100%;}
    
}

@media screen and (max-width: 580px) {
    .banner-container .banner-content-container {width: calc(100% - 1rem);}
    .banner-container .banner-content {padding: 0 1.5rem 1rem 1.5rem;border-radius: 0.5rem;}
    .banner-container .banner-content-title {font-size: 0.8rem;}
    .banner-container .banner-description-title {font-size: 1rem;}
    .banner-container .banner-description-content {font-size: 0.7rem;}
    
    .banner-container .banner-action-container .banner-action-tag {font-size: 0.9rem;}
    .banner-container .banner-action-container .edge_button {font-size: 0.8rem;}
}