/* ===== Base structure ===== */
.banner-slider-wrapper {
    position: relative;
    overflow: hidden;
  }
  .banner-sliderss .slick-prev {
    display:none !important;
  }
  .banner-sliderss .slick-next {
    display:none!important;
  }
  .ban-img, .ban-vid, .banner-slider-wrapper iframe{
    width:100%;
    height:auto;
    position:relative;
    z-index:999;
    border-radius:8px;
  }
  .banner-slider-wrapper .ban-img{
   height:390px;
   object-fit:cover;
  }
  .banner-slider-wrapper #belive-widget-1769679080069.embed-player{
    padding:unset !important;
    height:400px !important;
  }
  
  .banner-slider {
    position: relative;
    overflow: hidden;
  }
  
  .banner-slide {
    position: relative;
    overflow: hidden;
  }
  
  /* Force fade slides to stack correctly */
  .banner-slider .slick-slide {
    opacity: 0;
    transition: opacity 1s ease;
    position: relative;
    width: 100%;
    float: none;
  }
  
  .banner-slider .slick-slide.slick-active {
    opacity: 1;
    z-index: 1;
  }
  
  
  .embed-player {
  padding-bottom: unset !important;
  max-width: 100% !important;
  width: 100%;
  aspect-ratio: 16 / 9;
  
  }
  
  /* ===== Background image ===== */
  .banner-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    opacity: 1;
    transition: opacity 1s ease, transform 7s ease;
    z-index: 0;
  }
  .slick-slide.slick-active .banner-image {
    opacity: 1;
  /*   transform: scale(1.1); */
  }
  
  /* ===== Gradient overlay ===== */
  .banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  
  /* ===== Content styling ===== */
  .banner-content {
    position: relative;
    z-index: 2;
    max-width: 530px;
  /*   padding: 100px; */
    overflow: hidden;
     color:#fff;
  }
  .banner-content .cta-button{
    opacity: 0;
    transform: translatex(-50px);
    transition: all 0.4s ease;
  }
  /* Start hidden */
  .banner-content h5,
  .banner-content .banner-title,
  .banner-content p{
    opacity: 0;
    transform: translateY(20px);
    transition: all 1.5s ease;
  }
  
  
  
  /* ===== Animated states ===== */
  .slick-slide.animate h5,
  .slick-slide.animate .banner-title,
  .slick-slide.animate p,
  .slick-slide.animate .cta-button {
    opacity: 1;
    transform: translate(0);
      transition: all 1.5s ease;
    transition-delay: 0s; /* Start at same time */
  }
  
  /* ===== Custom navigation tabs ===== */
  .banner-tabs {
    display: flex;
    justify-content: center;
    gap: 50px;
    padding: 20px 0;
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
  }
  
  /* Dot hidden on desktop – shown only on mobile */
  .tab-dot {
    display: none;
  }

  .banner-tab {
    position: relative;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: all 0.4s ease;
    padding: 0 20px;
    opacity: 0.7;
  }
  
  /* grey base line */
  .banner-tab::before {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.4);
  }
  
  /* white animated line */
  .banner-tab::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    height: 2px;
    width: calc(var(--progress, 0) * 100%);
    background: #fff;
    transition: width 0s; /* no easing — JS drives progress */
  }
  
  /* active state */
  .banner-tab.active {
    opacity: 1;
  }
  
  
  .banner-content .event-name{
     color:#CCCCCC;
     font-size:16px;
     letter-spacing:1px;
     font-weight:600;
     margin-bottom:0px;
  }
  .banner-content .banner-title{
     font-size:44px;
     line-height:56px;
     font-weight:bold;
    color:#fff;
  }
  .banner-content .sub-text{
    font-weight:400;
     color:#CCCCCC;
     margin:20px 0px;
     margin-bottom:30px;
  }
  .banner-tabs{
       width:100%;
     } 
  @media (max-width:1199px){
     .banner-tabs{
       width:100%;
     }  
  }
  @media (max-width:767px){
     /* Show tabs on mobile as dots */
     .banner-tabs {
       opacity: 1;
       display: flex;
     }
    .banner-tab:before {
      display:none;
    }
    
    .banner-tab:after {
       display:none;
    }
    .banner-tabs {
          gap: 15px !important;
    }
     .mob-tab-text {
       display: none;
     }
     .tab-dot {
       display: inline-block;
       font-size: 24px;
       line-height: 1;
       padding: 0 6px;
     }
     .banner-tab {
       padding: 0 8px;
       font-size: 0;
     }
  }
     .banner-slider-wrapper .slick-next, .banner-slider-wrapper .slick-prev{
     top:93%;
     background-repeat:no-repeat;
  }
  .banner-slider-wrapper .slick-next:hover, .banner-slider-wrapper .slick-prev:hover{
    opacity:0.7;
  }
  
  .banner-slider-wrapper .slick-prev:before{
     content:'';
     display:block;
          height: 30px;
          width: 50px;
     background-size:70%;
     background-image:url('/hubfs/39936595/Vector%206%20(1)-1-1.svg');
     background-repeat:no-repeat;
  }
  .banner-slider-wrapper .slick-next:before{
     content:'';
     background-image:url('/hubfs/39936595/Vector%206%20(1)%20(1).svg');
     display:block;
          height: 30px;
          width: 50px;
      background-size:70%;
     background-repeat:no-repeat;
  
  }
  .banner-slider-wrapper .slick-arrow:hover,.banner-slider-wrapper .slick-arrow:focus {
     border:unset;
  }
        .banner-slider-wrapper .slick-next{
         right: 40%;
     }
     .banner-slider-wrapper .slick-prev {
      left: 40%;
      z-index:9;
  }
     .banner-slider-wrapper .slick-next, .banner-slider-wrapper .slick-prev{
       top:93%;
     }
    .banner-slide{
         padding-bottom:50px;
    }
     .banner-content .sub-text{
         margin: 15px 0 25px;
     }
     .banner-tabs{
       width:90%;
        gap:30px;
     }
     .banner-content{
       padding-top:90px;
  
     }
     .banner-slider-wrapper .cta-wrappers{
       display:block;
     }
     .banner-slider-wrapper .cta-wrappers a{
       display:inline-block;
       margin-bottom:15px;
     }
     .banner-image{
       background-position:67%;
     }
  }
  @media (max-width:330px){
     .banner-tab{
       font-size:14px;
        padding:0px 15px;
     }
  }