
.wdt-flex-banner-options .wdt-flex-banner-option { width: 100%; height: 100vh; transition: .8s cubic-bezier(.29,0,.2,1);
  background-image: var(--optionBackground); background-position: center center; background-repeat: no-repeat; background-size: cover; }
.wdt-flex-banner-options .wdt-flex-banner-option:not(:last-child) { margin-right: 30px; }
.wdt-flex-banner-options .wdt-flex-banner-option:before { 
  content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; pointer-events: none;
  display: block; background-color: rgb(var(--wdtSecondaryColorRgb),0.2); opacity: 0;}

/* Transtion Style */

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label { 
  display: flex; margin-top: auto; padding: 30px; flex-direction: column; z-index: 1; order: 1;
  /* opacity: 0; transform: translateX(100px); -webkit-transform: translateX(100px); 
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1) 1s;  */
}

  /* .wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label { opacity: 1; transform: translateX(0); } */

/* .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-title { flex: 0; }
.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info { flex: 1; } */

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-icon,
.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label > div.wdt-flex-banner-title,
.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-sub-title,
.wdt-flex-banner-options .wdt-flex-banner-option .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-flex-banner-button { 
  -webkit-transition: all 200ms cubic-bezier(0.7, 0, 0.3, 1); transition: all 200ms cubic-bezier(0.7, 0, 0.3, 1); 
  width: 100%; padding: 0; margin: 0 0 10px; }

.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-icon,
.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label > div.wdt-flex-banner-title,
.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-sub-title,
.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-content,
.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button {
  -webkit-transition: all 550ms cubic-bezier(0.7, 0, 0.3, 1); transition: all 550ms cubic-bezier(0.7, 0, 0.3, 1); }

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-icon { 
  transition-delay: 0ms; -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; }
.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label > div.wdt-flex-banner-title {
  transition-delay: 0ms; -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; }
.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-sub-title {
  transition-delay: 0ms; -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; }
.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-content {
  transition-delay: 0ms; -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; }
.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button {
  transition-delay: 0ms; -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; }

.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-icon {
  transition-delay: 400ms; -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
  .wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label > div.wdt-flex-banner-title {
    transition-delay: 500ms; -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-sub-title {
  transition-delay: 450ms; -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-content {
  transition-delay: 550ms; -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button {
  transition-delay: 600ms; -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }

  /* Transtion End */


.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-title { 
  line-height: var(--wdtLineHeight_Alt); font-family: var(--wdtFontTypo_Alt); font-weight: var(--wdtFontWeight_Ext); 
  text-transform: capitalize; font-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem); /* Min-20 & Max-24 */ }

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info { padding: 0; }

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div:last-child { margin-bottom: 0; }
.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-content { font-family: var(--wdtFontTypo_Base); }
.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-content p { margin: 0; }

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button a { 
  margin-top: 10px; 
  display: inline-block; 
  position: relative;
  font-size: var(--wdtFontSize_Base);        
  font-weight: var(--wdtFontWeight_Base); 
  line-height: var(--wdtLineHeight_Ext);
  padding: 0 0 2px; 
  text-transform: capitalize; 
  border: 0; 
  transition: background-size 0.6s ease-in-out, color 0.3s linear;
  -webkit-transition: background-size 0.3s ease-in-out, color 0.3s linear;
}

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button a:after {
  display: inline-block;
  position: absolute;
  content: '\0806';
  margin-left: 10px;
  bottom: 0;
  top: 0;
  margin-top: auto;
  margin-bottom: auto;
  line-height: 0;
  height: fit-content;
  font-family: "manasu-wp-additional-icons";
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  transition: var(--wdtBaseTransition); -webkit-transition: var(--wdtBaseTransition);
  transform: rotate(0deg); -webit-transform: rotate(0deg);
}

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button a:hover:after,
.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button a:focus:after {
  transform: rotate(45deg); -webit-transform: rotate(45deg);
}


.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-shadow { pointer-events: none;
  width: 100%; height: 100%; position: absolute; opacity: 0.5;
  background: rgb(var(--wdtHeadAltColorRgb),1); z-index: 0; }

/* Tags */

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-list {
    z-index: 1;
    display: inline-flex;
    order: 0;
    margin: -6px;
    margin-left: auto;
    width: fit-content;
    writing-mode: vertical-lr;
    padding: 20px;
}

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-list > span {
    font-size: var(--wdtFontSize_Base);
    font-weight: var(--wdtFontSize_Base);
    line-height: var(--wdtLineHeight_Ext);
    color: var(--wdtAccentTxtColor);
    border: 1px solid var(--wdtAccentTxtColor);
    padding: 20px 10px;
    margin: 6px;
    border-radius: var(--wdtRadius_Part);
    -webkit-border-radius: var(--wdtRadius_Part);
}


/* -----------------------
    Primary Color 
----------------------- */

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-title,
.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info { color: var(--wdtAccentTxtColor); }

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button a { 
  background-color: transparent; 
  color: var(--wdtAccentTxtColor);
  background-image: linear-gradient(90deg, currentColor 50%, currentColor 50%);
  background-repeat: no-repeat; background-position: left bottom; background-size: 100% 1px; }

/* -----------------------
    secondary Color 
----------------------- */

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button a:focus,
.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button a:hover { 
  background-color: transparent; background-size: 0 1px; background-position: right bottom; }


/* -----------------------
    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; }

  .wdt-flex-banner-options .wdt-flex-banner-option.active { flex: 2; }


}

@media ( max-width: 1024px) { 

  .wdt-flex-banner-options .wdt-flex-banner-option { position: relative; flex-direction: column; }
  .wdt-flex-banner-options .wdt-flex-banner-option:before { z-index: 0; top: 0; right: 0; bottom: 0; left: 0; }
  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label { padding: 20px; z-index: 1; }
  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info { padding: 4px 0 0; }


  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-title { flex: 0; }
  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info { flex: 1; }
  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-icon, 
  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-sub-title, 
  .wdt-flex-banner-options .wdt-flex-banner-option .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-flex-banner-button { width: 100%; padding: 0; }

  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-icon { 
    transition-delay: 70ms; -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label > div.wdt-flex-banner-title {
    transition-delay: 60ms; -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-sub-title {
    transition-delay: 50ms; -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-content {
    transition-delay: 25ms; -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-button {
    transition-delay: 2ms; -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }

  /* -----------------------
      Snap scroll style 
  ----------------------- */

  .wdt-flex-banner-options { -webkit-scrollbar-width: none; scrollbar-width: none; scroll-behavior: smooth; 
    display: flex; overflow: auto; scroll-snap-type: x mandatory; flex-wrap: nowrap; padding-bottom: 0; margin: 0; }
  .wdt-flex-banner-options .wdt-flex-banner-option { display: inherit;
    flex: 0 0 44%; width: auto !important; scroll-snap-align: start; scroll-snap-stop: always; }

  /* Full-width Snap scroll style */

  .wdt-flex-banner-options { scroll-padding: 0px; }
  .wdt-flex-banner-options .wdt-flex-banner-option:not(:last-child) { margin-right: 20px; }

}

@media (max-width: 767px) {

  /* Snap scroll style */
  .wdt-flex-banner-options .wdt-flex-banner-option { flex: 0 0 60%; }
}

@media (max-width: 767px) {

  /* Snap scroll style */
  .wdt-flex-banner-options .wdt-flex-banner-option { flex: 0 0 80%; }
}

@media (max-width: 480px) {

  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-title { margin: 0 20px 0 0; }

  /* Snap scroll style */
  .wdt-flex-banner-options .wdt-flex-banner-option { flex: 0 0 80%; }
}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  .wdt-flex-banner-options { scrollbar-width: none; scrollbar-color: var(--wdtPrimaryColor) 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(--wdtPrimaryColor); border-radius: 0px; }


/*=== Full Width Click Slider - Demo ===*/

@media (min-width: 1281px) {

  .wdt-full-width-click-slider .wdt-flex-banner-options { position: relative; }
  .wdt-full-width-click-slider .wdt-flex-banner-options .wdt-flex-banner-option:not(:last-child) { 
    margin-right: 0px; border-right: 1px solid var(--wdtBorderColor); }
  .wdt-full-width-click-slider .wdt-flex-banner-options .wdt-flex-banner-option { background: none; position: static; display: grid; }
  .wdt-full-width-click-slider .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-shadow,
  .wdt-full-width-click-slider .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label { grid-area: 1/-1; position: relative; }

  .wdt-full-width-click-slider .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-shadow { visibility: hidden; opacity: 0;
    background-image: linear-gradient(45deg, rgba(0,0,0,0.7), rgba(0,0,0,0.3)); background-size: 100% 100%; background-repeat: no-repeat;
    -webkit-transition: all .6s cubic-bezier(.29,0,.2,1); transition: all .6s cubic-bezier(.29,0,.2,1); 
    -webkit-filter: blur(10px); filter: blur(10px); }
  .wdt-full-width-click-slider .wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-shadow { opacity: 1; visibility: visible; }

  .wdt-full-width-click-slider .wdt-flex-banner-options .wdt-flex-banner-option:before { pointer-events: none;
    content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; display: block; z-index: -1; background-color: transparent;
    background-image: var(--optionBackground); background-position: center; background-repeat: no-repeat; background-size: cover; }

  .wdt-full-width-click-slider .wdt-flex-banner-options .wdt-flex-banner-option:before { 
    -webkit-animation: slide-animation-out-up var(--wdt-Ad-Transition) forwards;
    animation: slide-animation-out-up var(--wdt-Ad-Transition) forwards; }
  .wdt-full-width-click-slider .wdt-flex-banner-options .wdt-flex-banner-option.active:before {
    -webkit-animation: slide-animation-in-up var(--wdt-Ad-Transition) forwards;
    animation: slide-animation-in-up var(--wdt-Ad-Transition) forwards; }

  @keyframes slide-animation-in-up {
      0% { clip-path: inset(0 0 0 100%); -webkit-clip-path: inset(0 0 0 100%); }
      100% { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
  }

  @-webkit-keyframes slide-animation-in-up {
      0% { clip-path: inset(0 0 0 100%); -webkit-clip-path: inset(0 0 0 100%); }
      100% { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
  }

  @keyframes slide-animation-out-up {
      0% { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
      100% { clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); }
  }
  @-webkit-keyframes slide-animation-out-up {
      0% { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
      100% { clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); }
  }

}
