.wdt-flex-banner-options .wdt-flex-banner-option { width: 100%; height: 100vh; transition: .8s cubic-bezier(.29,0,.2,1);
  background: center / cover no-repeat; cursor: pointer; background-color: var(--wdtTertiaryColor); border-radius: var(--wdtRadius_2X);  overflow:hidden;
  will-change: flex;
  contain: layout style;
} 
.wdt-flex-banner-options .wdt-flex-banner-option:not(:last-child) { margin-right: 20px; }


/* Transtion Style */

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label { 
  display: flex;  align-items: flex-end; height:100%;
   }

.wdt-flex-banner-options  .wdt-flex-banner-label .wdt-flex-banner-title { 
  flex: 0; white-space: nowrap; }
.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info { flex: 1; align-self:center; }
.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-media,
.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info{ height:100%; }
.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-media{ flex: 60%; transition: flex .8s cubic-bezier(.29,0,.2,1); will-change: flex;}
.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info{ flex:40%; }
.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-media .wdt-flex-banner-image,
.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-media .wdt-flex-banner-image img{ height:100%; object-fit:cover; background-position: center; }
.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-title,
.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-icon,
.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-sub-title,
.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-content,
.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button { 
   padding: 0; margin: 0 0 10px; }

   .wdt-flex-banner-options .wdt-flex-banner-info div.wdt-icon-list-wrapper{
      display: flex;
      align-items: center;
      justify-content: inherit;
      gap: 10px;
      margin-bottom:10px;
   }
   

/* NOTE: per-element transition/transition-delay declarations used to be split
   across this block AND the "Common Transition" block further down, with two
   different durations (var(--wdt-Ad-Transition) vs 0.9s) and two different
   delay schedules fighting over the same elements. That mismatch was the
   source of the jerk. All timing is now defined once, in the single
   "Common Transition" block below, for every info-panel child consistently. */


.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-title { 
  font-family: var(--wdtFontTypo_Alt);
  line-height: var(--wdtLineHeight_Alt);  letter-spacing: 0; margin-bottom: 20px; margin-top:0;}
.wdt-flex-banner-options .wdt-flex-banner-option  .wdt-flex-banner-media .wdt-flex-banner-title{ display:none; }

.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info > div:last-child { margin-bottom: 0; }
.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-content { 
  font-family: var(--wdt-elementor-typo-text-font-family); margin-bottom:20px; }
.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-content p { margin: 0; }

.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button a { 
  display: inline-block; margin-top: 16px; position: relative; display: inline-flex; justify-content: center; text-align: center; }

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button a:before{left: 15px; top: -3px;}
.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button a:after{right: 15px; bottom: -3px;}

.wdt-flex-banner-options.wdt-flex-banner-standard .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button a{
  display: inline-flex; justify-content: center; text-align: center;background-color: transparent; border: 1px solid var(--wdtSecondaryColor); border-radius: var(--wdtRadius_Button); padding: 8px; position: relative;
}

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button a::before,
.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button a::after {
  content: ''; position: absolute; width: 55px; height: 5px; z-index: 10;
  background-image: linear-gradient(-65deg, var(--wdtPrimaryColor) 0px, var(--wdtPrimaryColor) 10px, var(--wdtBodyBGColor) 10px, var(--wdtBodyBGColor) 14px, var(--wdtPrimaryColor) 14px, var(--wdtPrimaryColor) 24px, var(--wdtBodyBGColor) 24px, var(--wdtBodyBGColor) 28px, var(--wdtPrimaryColor) 28px, var(--wdtPrimaryColor) 76px);
  box-shadow: 5px 0 20px 1px var(--wdtPrimaryColor); transition: var(--wdtBaseTransition); transform: translateX(0%); display: inline-block; }   

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button:hover a::before{left: calc(100% - 65px);}
.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button:hover a::after{right: calc(100% - 65px);}

.wdt-flex-banner-options.wdt-flex-banner-standard .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button:hover a .wdt-button-inner{background:var(--wdtSecondaryColor); color:var(--wdtAccentTxtColor);}

.wdt-flex-banner-options.wdt-flex-banner-standard .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button a .wdt-button-inner { 
  border-radius: var(--wdtRadius_Button);
  background: var(--wdtPrimaryColor);
  color: var(--wdtAccentTxtColor);
  text-transform: uppercase;
  display: inline-block;
  border: 0;
  border-color: transparent;
  padding: var(--wdtPadding_Btn);
  -webkit-transition: var(--wdtBaseTransition);
  transition: var(--wdtBaseTransition);
  width: auto;
}

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-shadow { 
  pointer-events: none; width: 100%; height: 100%; position: absolute; 
  background-image: linear-gradient(45deg, rgba(0,0,0,0.8), transparent); }

/* -----------------------
    Primary Color 
----------------------- */

.wdt-flex-banner-options  .wdt-flex-banner-label .wdt-flex-banner-title,
.wdt-flex-banner-options  .wdt-flex-banner-label .wdt-flex-banner-info { color: var(--wdt-elementor-color-white); }

/* -----------------------
    secondary Color 
----------------------- */

.wdt-flex-banner-options  .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button a:focus,
.wdt-flex-banner-options  .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button a:hover { 
  background-color: var(--wdtSecondaryColor); color: var(--wdt-elementor-color-white); }


/* -----------------------
    Content Typo
----------------------- */

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-title { 
 text-align: start; display: flex; align-items: center; text-transform: capitalize;} 

.wdt-flex-banner-options  .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-icon {
  font-size: var(--wdtFontSize_H4); }

.wdt-flex-banner-options  .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-sub-title {
  font-family: var(--wdtFontTypo_Alt); font-size: var(--wdtFontSize_H4); 
  font-weight: var(--wdtFontWeight_Ext); text-transform: capitalize; }


.wdt-flex-banner-options  .wdt-flex-banner-label .wdt-flex-banner-media {
    display: grid;
    align-items: flex-start;
}

.wdt-flex-banner-options  .wdt-flex-banner-label .wdt-flex-banner-media .wdt-flex-banner-image {
  grid-area: 1 / -1;
}

.wdt-flex-banner-options  .wdt-flex-banner-label .wdt-flex-banner-media  .wdt-flex-banner-title {
  grid-area: 1 / -1;
  padding: 20px;
}

  /* =========================================================
     Common Transition (single source of truth)
     Every info-panel child (icon, sub-title, title, content,
     icon-list-wrapper, button) now shares the SAME duration and
     easing curve, and a single, top-to-bottom staggered delay
     schedule. Previously icon/sub-title ran on a different,
     shorter timing (var(--wdt-Ad-Transition)) than title/content/
     button (0.9s), and the active-state delays were also out of
     sequence (title firing last, after the button) — that double
     mismatch was what produced the jerk.
  ========================================================= */

.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-icon,
.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-sub-title,
.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-title,
.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-content,
.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-icon-list-wrapper,
.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button{
    transition:
        transform 0.9s cubic-bezier(.22,1,.36,1),
        opacity 0.9s cubic-bezier(.22,1,.36,1),
        filter 0.9s cubic-bezier(.22,1,.36,1);
    will-change: transform, opacity;
}

/* Initial State */

.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-icon{
    opacity:0;
    transform:translateY(50px);
}

.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-sub-title{
    opacity:0;
    transform:translateY(50px);
}

.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-title{
    opacity:0;
    transform:translateY(80px) scale(.92);
    filter:blur(8px); color:var(--wdtPrimaryColor);
}

.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-content{
    opacity:0;
    transform:translateY(100px) scale(.95);
    filter:blur(10px);
    color: var(--wdtBodyTxtColor);
}

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-icon-list-wrapper {
    opacity:0;
    transform:translateY(120px) scale(.97);
    filter:blur(12px);
}

.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button{
    opacity:0;
    transform:translateY(140px) scale(.99);
    filter:blur(14px);
    margin-top:30px;
}

/* Active State — single, sequential stagger: icon > sub-title > title > content > icon-list-wrapper > button */

.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-icon{
    opacity:1;
    transform:translateY(0);
    transition-delay:.15s;
}

.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-sub-title {
  opacity: 1; transform: translateY(0);
  transition-delay:.25s;
}

.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label .wdt-flex-banner-title{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
    transition-delay:.35s;
}

.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-content{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
    transition-delay:.45s;
}

.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-icon-list-wrapper {
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
    transition-delay:.55s;
}

.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
    display: inline-flex;
    position: relative;
    transition-delay:.65s;
}


.wdt-flex-banner-options .wdt-flex-banner-option .wdt-icon-list-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The info panel container itself now animates in step with the media
   panel (same .8s / cubic-bezier(.29,0,.2,1)) instead of snapping its
   width/opacity/padding instantly while its children fade in smoothly.
   This was the biggest visible "jerk". */
.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info {
    padding: 0;
    opacity: 0;
    width: 0;
    flex: 0;
    height: fit-content;
    align-self: center;
    transition:
        flex .8s cubic-bezier(.29,0,.2,1),
        width .8s cubic-bezier(.29,0,.2,1),
        opacity .8s cubic-bezier(.29,0,.2,1),
        padding .8s cubic-bezier(.29,0,.2,1);
    will-change: flex, width, opacity, padding;
}

.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-info {
    padding: 30px;
    opacity: 1;
    width: 50%;
    flex: 50%;

    transform: translateX(0) scale(1);
    filter: blur(0);
}


/* -----------------------
    Responsive
----------------------- */

@media ( min-width: 1025px) {

  .wdt-flex-banner-options { display: flex; flex-wrap: nowrap; }
  .wdt-flex-banner-options .wdt-flex-banner-option { 
    flex: 1; width: 100% !important; overflow: hidden; display: flex; flex-direction: column; 
    position: relative; transition: flex .8s cubic-bezier(.29,0,.2,1); will-change: flex; }

  }
  @media ( min-width: 1025px) {
    .wdt-flex-banner-options .wdt-flex-banner-option.active { flex: 3; }
  }

@media ( max-width: 1540px) { 

  .wdt-flex-banner-options .wdt-flex-banner-option { position: relative; }
  .wdt-flex-banner-options .wdt-flex-banner-option:before { z-index: 0; inset: 0;}
  
  .wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info { padding: 10px 0 0; }

  .wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-title { flex: 0; }



  /* -----------------------
      Snap scroll style 
  ----------------------- */

  /* .wdt-flex-banner-options {         
    scroll-behavior: smooth; display: flex; overflow: auto; scroll-snap-type: x mandatory; 
    flex-wrap: nowrap; padding-bottom: 15px; margin: 0; }
  .wdt-flex-banner-options .wdt-flex-banner-option {
    display: inherit;
    flex: 0 0 30%;
    width: auto !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    } */

  /* Full-width Snap scroll style */

  .wdt-flex-banner-options { scroll-padding: 0px; }
  
}


@media ( max-width: 1280px){
     .wdt-flex-banner-options .wdt-flex-banner-option.active { flex: 4; }
     .wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-info{ padding:20px; }
     .wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button{ margin-top:30px; }
} 


@media ( max-width: 1024px) {
    .wdt-flex-banner-options .wdt-flex-banner-option{
      flex: 0 0 44%;
    }
        .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-info {
        padding: 30px;
    }
    .wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info{ flex:50%; width:50%; opacity:1; padding:30px; }
    .wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-title{
    opacity:1;
    transform:translateY(0px) scale(1);
    filter:blur(0px);
}

.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-content{
    opacity:1;
    transform:translateY(0px) scale(1);
    filter:blur(0px);
}

.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0px);
    
}
.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-icon-list-wrapper {
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
    transition-delay:.55s;
}
.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-icon-list-wrapper {
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
    transition-delay:.55s;
}
.wdt-flex-banner-options .wdt-flex-banner-option:not(:last-child){ margin-right:0; margin-bottom:30px; }
.wdt-flex-banner-options{ max-width: 850px; margin:0 auto; }
.wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-media {
    flex: 50%;
}
}

@media (max-width: 767px) {

  /* Snap scroll style */
  .wdt-flex-banner-options .wdt-flex-banner-option { flex: 0 0 75%; }
  .wdt-flex-banner-options{ max-width: 580px; margin:0 auto; }
 .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-info {
        padding: 20px;
    }
  .wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-media{ flex:40%; }
    /* .wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-info{ padding:20px; } */
 
    
}
@media (max-width: 479px) {

  /* Snap scroll style */
  .wdt-flex-banner-options .wdt-flex-banner-option { flex: 0 0 90%; height:100% !important; }
  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label{ flex-direction:column; }
   .wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-info{ flex:100%; width:100%; }
   .wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-info{  flex:100%; width:100%;  }
   .wdt-flex-banner-options{ max-width: 400px; margin:0 auto; }
   .wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-media .wdt-flex-banner-image, .wdt-flex-banner-options .wdt-flex-banner-label .wdt-flex-banner-media .wdt-flex-banner-image img{ max-height:300px; }
}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  .wdt-flex-banner-options { scrollbar-color: var(--wdt-elementor-color-accent) transparent; }

  /* Chrome, Edge, and Safari */
  .wdt-flex-banner-options::-webkit-scrollbar { width: 0px; display: none; }
  .wdt-flex-banner-options::-webkit-scrollbar-track { background: transparent; }
  .wdt-flex-banner-options::-webkit-scrollbar-thumb { background-color: var(--wdt-elementor-color-accent); border-radius: var(--wdtRadius_Zero); }