.floating_box {
    position: fixed;
    width: 56px;
    right: 5px;
    bottom: 0px;
    text-align: right;
    z-index: 999;
  }
  
  .floating_box .float_banner ul{
    padding-left: 0px;
  }

  .floating_box .float_banner ul li {
    position: relative;
    width: 56px;
    transition: width 1s ease-in-out;
  }
  
  .floating_box .float_banner ul li.hide-promo {
    width: 0px;
    /* overflow: hidden; */
    transition: width 1s ease;
  }
  
  .floating_box .float_banner ul li + li {
    margin-top: 5px;
  }
  
  .floating_box .float_banner ul li .banner_wrap {
    position: relative;
    display: block;
    width: 56px;
    height: 56px;
    overflow: hidden;
    text-align: center;
    border: 1px solid #f1f1f1;
    /* border-radius: 16px; */
    background-size: auto 42px;
    background-repeat: no-repeat;
    background-position: 50% 0;
    /* background-color: #ffffff; */
    margin-bottom: 5px;
  }
  
  .floating_box .float_banner ul li .banner_wrap > img {
    display: inline-block;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  
  .floating_box .float_banner ul li .banner_wrap > video {
    display: inline-block;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  
  .floating_box .float_banner ul{
    list-style: none;
    text-align: -webkit-right;
  }
  
  .toggle-promo i{
    transform: rotateY(0deg);
    transition: all .5s ease;
  }
  
  .toggle-promo.show i{
    transform: rotateY(180deg);
    transition: all .5s ease;
  }
  
  /* Modal video styling */
  #popup-promo video {
    width: 100%;
    height: auto;
    max-height: 70vh;
    border-radius: 8px;
  }

  /* Redesigned modal aesthetics */
  .promo-modal .modal-content{
    border: none;
    border-radius: 16px;
  }
  .promo-modal .modal-header{
    padding: 1rem 1.25rem 0;
  }
  .promo-modal .modal-body{
    padding: 0 1.25rem 1.25rem;
  }
  .promo-modal .modal-footer{
    border-top: none;
  }
  .promo-modal .carousel-inner img{
    max-height: 70vh;
    object-fit: cover;
  }

  /* Compact custom popup */
  .promo-popup{
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: none;
  }
  .promo-popup.open{display:block;}
  .promo-popup-backdrop{
    position:absolute; inset:0; background:rgba(0,0,0,0.55);
  }
  .promo-popup-card{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width: min(860px, 94vw);
    background:#fff; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.25);
    overflow:hidden;
  }
  .promo-popup-close{
    position:absolute; right:8px; top:6px; border:0; background:transparent; font-size:28px; line-height:1; cursor:pointer;
  }
  .promo-popup-media img, .promo-popup-media video{ display:block; width:100%; height:auto; }
  .promo-popup-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-top:1px solid #eee; }
  .promo-popup-cta{ background:#317c8c; color:#fff; padding:6px 12px; border-radius:6px; text-decoration:none; }

  /* Two-column layout */
  .promo-card-two-col{ display:flex; gap:0; }
  .promo-left{ flex: 1 1 56%; background:#000; position:relative; height:56vh; min-height:360px; }
  .promo-right{ flex: 1 1 44%; padding:24px 22px; }
  .promo-title{ font-size:22px; line-height:1.3; margin:4px 0 14px; color:#111; }
  .promo-bullets{ list-style:none; padding:0; margin:0 0 16px; }
  .promo-bullets li{ position:relative; padding-left:22px; margin:8px 0; }
  .promo-bullets li:before{ content:'\2713'; position:absolute; left:0; top:0; color:#317c8c; }
  .promo-cta{ display:inline-block; background:#2f2b2b; color:#fff; padding:10px 16px; border-radius:4px; text-decoration:none; margin:8px 0 14px; }
  .promo-socials{ display:flex; gap:10px; margin-bottom:8px; }
  .social-btn{ display:inline-block; padding:8px 10px; border-radius:6px; text-decoration:none; color:#fff; font-size:14px; }
  .social-btn.fb{ background:#3b5998; }
  .social-btn.ig{ background:#d62976; }
  .social-btn.gg{ background:#db4437; }
  .promo-dontshow{ font-size:13px; color:#333; }

  /* Slider */
  .promo-slider{ position:relative; height:100%; }
  .promo-slide{ height:100%; display:flex; align-items:center; justify-content:center; }
  .promo-media{ width:100%; height:100%; object-fit:contain; display:block; background:transparent; }
  /* Fallback visibility when slick isn't initialized */
  #promoSlider:not(.slick-initialized) .promo-slide{ display:none; }
  #promoSlider:not(.slick-initialized) .promo-slide.active{ display:block; }
  /* Fallback arrows and dots */
  #promoSlider:not(.slick-initialized) .promo-nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.5); color:#fff; border:0; width:36px; height:36px; border-radius:50%; cursor:pointer; }
  #promoSlider:not(.slick-initialized) .promo-nav.prev{ left:8px; }
  #promoSlider:not(.slick-initialized) .promo-nav.next{ right:8px; }
  #promoSlider:not(.slick-initialized) .promo-dots{ position:absolute; bottom:8px; left:50%; transform:translateX(-50%); display:flex; gap:6px; }
  #promoSlider:not(.slick-initialized) .promo-dot{ width:8px; height:8px; border-radius:50%; background:#ddd; border:0; padding:0; cursor:pointer; }
  #promoSlider:not(.slick-initialized) .promo-dot.active{ background:#317c8c; }
  /* Slick overrides within popup */
  .promo-left .slick-slider, .promo-left .slick-list, .promo-left .slick-track{ height:100%; }
  .promo-left .slick-list{ display:flex; }
  .promo-left .slick-track{ display:flex; align-items:center; }
  .promo-left .slick-slide{ height:100%; display:flex; align-items:center; justify-content:center; }
  .promo-left .slick-prev, .promo-left .slick-next{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.5); color:#fff; border:0; width:36px; height:36px; border-radius:50%; z-index:2; }
  .promo-left .slick-prev{ left:8px; }
  .promo-left .slick-next{ right:8px; }
  .promo-left .slick-dots{ position:absolute; bottom:8px; left:50%; transform:translateX(-50%); }
  .promo-left .slick-dots li button:before{ color:#317c8c; opacity:0.6; }
  .promo-left .slick-dots li.slick-active button:before{ opacity:1; }

  @media (max-width: 720px){
    .promo-card-two-col{ flex-direction:column; }
    .promo-left{ height: 58vw; }
  }