.displayCustomBanners4 .cb-animate-bg { background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.06) 100%); animation: cbBgPulse 6s ease-in-out infinite; }
@keyframes cbBgPulse { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.displayCustomBanners4 .cb-animate-text { opacity: 0; transform: translateY(24px); animation: cbTextIn .9s cubic-bezier(.2,.6,.2,1) .2s forwards; }
@keyframes cbTextIn { to { opacity: 1; transform: translateY(0); } }
.displayCustomBanners4 .cb-animate-image { opacity: 0; transform: scale(.92); animation: cbImgIn .9s cubic-bezier(.2,.6,.2,1) .3s forwards; }
@keyframes cbImgIn { to { opacity: 1; transform: scale(1); } }
.displayCustomBanners4 .cb-delay-1 { animation-delay: .1s; } 
.displayCustomBanners4 .cb-delay-2 { animation-delay: .25s; } 
.displayCustomBanners4 .cb-delay-3 { animation-delay: .4s; } 
.displayCustomBanners4 .cb-delay-4 { animation-delay: .55s; }
/* Start states for pre-marked banners and trigger overrides */
.displayCustomBanners4 .banner-item .caption *:not(img),
.displayCustomBanners4 .banner-item img {
  opacity: 0;
  transform: translateY(24px) scale(.92);
}
.displayCustomBanners4 .banner-item.cb-animate-bg .caption *:not(img).cb-animate-text {
  animation: cbTextIn .9s cubic-bezier(.2,.6,.2,1) .2s forwards;
}
.displayCustomBanners4 .banner-item.cb-animate-bg img.cb-animate-image {
  animation: cbImgIn .9s cubic-bezier(.2,.6,.2,1) .2s forwards;
}
/* Trigger animations when slide has cb-anim-run */
.displayCustomBanners4 .banner-item.cb-anim-run .caption *:not(img).cb-animate-text { animation: cbTextIn .9s cubic-bezier(.2,.6,.2,1) .2s forwards; }
.displayCustomBanners4 .banner-item.cb-anim-run img.cb-animate-image { animation: cbImgIn .9s cubic-bezier(.2,.6,.2,1) .2s forwards; }

/* New structure styles similar to blog */
.displayCustomBanners4 .banner-item-cover {
    position: relative;
    overflow: hidden;
}

.displayCustomBanners4 .banner-item-cover img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.displayCustomBanners4 .banner-item-cover:hover img {
    transform: scale(1.05);
}

.displayCustomBanners4 .banner-item-title {
    margin: 15px 0 10px 0;
    font-size: 1.2em;
    font-weight: bold;
}

.displayCustomBanners4 .banner-item-title a {
    color: inherit;
    text-decoration: none;
}

.displayCustomBanners4 .banner-item-title a:hover {
    text-decoration: underline;
}

.displayCustomBanners4 .banner-item-content-text {
    margin: 10px 0;
    line-height: 1.5;
}

.displayCustomBanners4 .banner-item-footer {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.displayCustomBanners4 .banner-item-infos {
    display: flex;
    align-items: center;
    gap: 15px;
}

.displayCustomBanners4 .banner-item-info {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9em;
    color: #666;
    text-decoration: none;
}

.displayCustomBanners4 .banner-item-info:hover {
    color: #333;
}

.displayCustomBanners4 .banner-item-info i {
    font-size: 0.8em;
}

/* Existing styles for compatibility */
.displayCustomBanners4 .home-slider .banner-img.cb-animate-image.cb-delay-1 {
    width: auto;
    max-width: 40%;
}

.displayCustomBanners4  .banner-img.cb-animate-image.cb-delay-1 {
    margin-left: auto;
}

.displayCustomBanners4  .custom-html {
    display: flex;
    z-index: 2;
    position: relative;
}

.displayCustomBanners4  .banner-item-content {
    display: flex;
    align-items: center;
    background: rgb(29, 5, 5);
}

.displayCustomBanners4  .banner-img {
    order: 1;
}

.displayCustomBanners4 .bx-wrapper .bx-pager.bx-default-pager a {
    -webkit-border-radius: 0;
    border-radius: 0;
    cursor: pointer;
    display: inline-block;
    height: 5px;
    width: 30px;
    margin: 0 5px;
    position: relative;
    background: #ffffff;
}

.displayCustomBanners4 .bx-wrapper .bx-pager.bx-default-pager a:before, .displayCustomBanners4 .bx-wrapper .bx-pager.bx-default-pager a:after{
    content:none;
}

.displayCustomBanners4 .bx-wrapper .bx-pager.bx-default-pager a:hover,.displayCustomBanners4 .bx-wrapper .bx-pager.bx-default-pager a.active {
    background: #c19e79
}

.displayCustomBanners4 .html-over .custom-html {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    bottom: 0;
    right: 0;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%)
}

.displayCustomBanners4 .home-slide {
    background-size: cover;
    background-position: 50% 0;
    background-repeat: no-repeat
}

.displayCustomBanners4 .home-slide .banner-item-content {
    position: relative;
    width: 100%;
}

.displayCustomBanners4 .home-slide .custom-html {
    color: #ffffff;
    line-height: 1.4;
    font-size: 48px;
    width: 560px;
    height: 250px;
    flex-wrap: wrap;
    left: 100px;
}

.displayCustomBanners4 .home-slide p {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.5;
}

.displayCustomBanners4 .home-slide .title_slide_one {
    font-size: 0.75em;
    text-transform: uppercase;
    color: #ce9f78;
    line-height: 1;
    font-size: 60px;
}

.displayCustomBanners4 .home-slide .title_slide_two {
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    color: #ce9f78;
    margin-bottom: 34px
}

@media (max-width: 1199px) {
    .displayCustomBanners4 .html-over .custom-html {
        top: 30%;
        -webkit-transform: scale(0.5) translate(-60%, -50%);
        transform: scale(0.5) translate(-60%, -50%);
    }
}

@media (max-width: 991px) {
    .displayCustomBanners4 .home-slide .custom-html {
        font-size:30px;
    }
    .displayCustomBanners4 .home-slide .title_slide_two {
        margin-bottom:15px
    }
}

@media (max-width: 768px) {
    .displayCustomBanners4 .home-slide .custom-html {
        font-size:15px
    }
    .displayCustomBanners4 .home-slide p{
        font-size:11px;
    }
    .displayCustomBanners4 .btn-big, .displayCustomBanners4 .btn-primary.btn-big {
        border-width: 1px;
        font-size: 11px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .displayCustomBanners4 .html-over .custom-html {
        bottom: 0;
        top: auto;
        -webkit-transform: translate(0,-30%);
        transform: translate(0,0%);
        display: flex;
        flex-wrap: wrap;
        background: #1a090ab3;
        padding-top: 20px;
    }
    .displayCustomBanners4 .home-slide .title_slide_two{
        margin-bottom:0px;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .displayCustomBanners4 .home-slide .title_slide_three {
        /* display:none */
        margin-bottom: .9em;
    }
}

@media (max-width: 380px) {
    .displayCustomBanners4 .home-slide .custom-html {
        font-size:17px
    }
}

/* Responsive bx-slider height fixes */
.displayCustomBanners4 .bx-viewport {
    height: auto !important;
    min-height: 400px;
}

.displayCustomBanners4 .bx-wrapper {
    height: auto !important;
}

.displayCustomBanners4 .carousel {
    height: auto !important;
}

.displayCustomBanners4 .banner-item {
    height: auto !important;
    min-height: 400px;
    display: flex;
    align-items: center;
}

.displayCustomBanners4 .banner-item-content {
    height: auto !important;
    /* min-height: 400px; */
    display: flex;
    align-items: center;
    width: 100%;
}

.displayCustomBanners4 .banner-img {
    /* width: 100% !important; */
    /* height: auto !important; */
    /* max-height: 400px; */
    /* object-fit: cover; */
    /* object-position: center; */
    display: block;
}

/* Responsive breakpoints for slider height and images */
@media (max-width: 1199px) {
    .displayCustomBanners4 .bx-viewport,
    .displayCustomBanners4 .banner-item,
    .displayCustomBanners4 .banner-item-content {
        min-height: 350px;
    }
    
    .displayCustomBanners4 .banner-img {
        max-height: 350px;
    }
}

@media (max-width: 991px) {
    .displayCustomBanners4 .bx-viewport,
    .displayCustomBanners4 .banner-item,
    .displayCustomBanners4 .banner-item-content {
        min-height: 300px;
    }
    
    .displayCustomBanners4 .banner-img {
        max-height: 300px;
    }
}

@media (max-width: 768px) {
    .displayCustomBanners4 .bx-viewport,
    .displayCustomBanners4 .banner-item,
    .displayCustomBanners4 .banner-item-content {
        min-height: 250px;
    }
    
    .displayCustomBanners4 .banner-img {
        max-height: 250px;
        order: 0;
    }
}

@media (max-width: 480px) {
    .displayCustomBanners4 .bx-viewport,
    .displayCustomBanners4 .banner-item,
    .displayCustomBanners4 .banner-item-content {
        min-height: 200px;
    }
    
    .displayCustomBanners4 .banner-img {
        max-height: 200px;
        max-height: none!important;
    }
}

@media (max-width: 380px) {
    .displayCustomBanners4 .bx-viewport,
    .displayCustomBanners4 .banner-item,
    .displayCustomBanners4 .banner-item-content {
        min-height: calc(100vh - 72px);
        width: 100%;
        min-width: 100%;
    }
    
    .displayCustomBanners4 .banner-img {
        max-height: 180px;
        height: auto!important;
    }
}

/* Ensure proper aspect ratio for images */
.displayCustomBanners4 .banner-item-content img.banner-img {
    /* aspect-ratio: 16/9; */
    /* width: 100%; */
    /* height: auto; */
}

/* Fix for mobile banner wrapper */
.displayCustomBanners4 .mobile-banner-wrapper .banner-img {
    width: 100% !important;
    height: auto !important;
    max-height: none;
    /* aspect-ratio: 16/9; */
    margin: auto 0 0;
}