

.wdt-flex-banner-options .wdt-flex-banner-option {
  width: 100%;
  height: 100vh;
  transition: .8s cubic-bezier(.29, 0, .2, 1);
  border-radius: var(--wdtRadius_Zero);
  -webkit-border-radius: var(--wdtRadius_Zero);
  background-color: var(--wdtTertiaryColor);
}

.wdt-flex-banner-options .wdt-flex-banner-option:not(:last-child) {
  margin-right: 30px;
}

.wdt-flex-banner-options {
  counter-reset: count;
}

.wdt-flex-banner-options .wdt-flex-banner-option:after {
  counter-increment: count;
  content: "0" counter(count);
  background-color: var(--wdtSecondaryColor);
  color: var(--wdtAccentTxtColor);
  font-family: var(--wdtFontTypo_Alt);
  font-size: var(--wdtFontSize_Base);
  font-weight: var(--wdtFontWeight_Ext);
  letter-spacing: var(--wdtLetterSpacing_3X);
  display: block;
  z-index: 3;
  position: absolute;
  top: clamp(1.875rem, 1.2535rem + 2.0804vw, 3.75rem); /*60-30*/
  left: clamp(1.875rem, 1.2535rem + 2.0804vw, 3.75rem); /*60-30*/
  height: 50px;
  width: 50px;
  display: grid;
  place-items: center;
  transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out;
}

.wdt-flex-banner-options .wdt-flex-banner-option.active:after {
  border: 1px solid currentColor;
  background-color: transparent;
  color: var(--wdtSecondaryColor);
}


/* Transtion Style */

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label {
  display: flex;
  margin-top: auto;
  align-items: flex-end;
  padding: clamp(1.875rem, 1.2535rem + 2.0804vw, 3.75rem); /*60-30*/
  height: 100%;
}

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-title {
  flex: 1;
  line-height: 1;
}

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info {
  flex: 0;
  overflow: hidden;
  transition: var(--wdt-Ad-Transition);
  -webkit-transition: var(--wdt-Ad-Transition);
}

.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-title,
.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info>div.wdt-flex-banner-image,
.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: 375ms cubic-bezier(0.7, 0, 0.3, 1);
  transition: 375ms cubic-bezier(0.7, 0, 0.3, 1);
  width: 100%;
  padding: 0;
  margin: 0 0 25px;
}

.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 .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: 500ms cubic-bezier(0.7, 0, 0.3, 1);
  transition: 500ms 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: 60ms;
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  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: 50ms;
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  opacity: 0;
}

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info>div.wdt-flex-banner-title {
  transition-delay: 2ms;
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  opacity: 0;
}

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info>div.wdt-flex-banner-image {
  transition-delay: 2ms;
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  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: 25ms;
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  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: 2ms;
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  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: 0ms;
  -webkit-transform: translateY(0);
  transform: translateY(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: 300ms;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label .wdt-flex-banner-info>div.wdt-flex-banner-title {
  transition-delay: 350ms;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}

.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label .wdt-flex-banner-info>div.wdt-flex-banner-image {
  transition-delay: 400ms;
  -webkit-transform: translateY(0);
  transform: translateY(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: 450ms;
  -webkit-transform: translateY(0);
  transform: translateY(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: 620ms;
  -webkit-transform: translateY(0);
  transform: translateY(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_Alt);
  text-transform: capitalize;
}

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info {
  padding: 30px 0 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);
      display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.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;
  line-height: 1;
  font-size: 1em;
  padding: var(--wdtPadding_Btn);
  text-align: center;
  -webkit-border-radius: var(--wdtRadius_Zero);
  border-radius: var(--wdtRadius_Zero);
}

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info>div.wdt-flex-banner-button a:after {
  content: "";
  height: 14px;
  width: 16px;
  display: inline-block;
  background-color: currentcolor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M98.58,50.33,56.91,92H35.18L69,58.18H.85V42.82H69.36L35.53,9H57.26L87.72,39.46l3.35,3.36Z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  margin: auto;
  margin-left: 8px;
  position: relative;
  top: 1px;
}

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info>div.wdt-flex-banner-button a:hover:after {
  animation: btn-arrow-move 0.375s linear;
  -webkit-animation: btn-arrow-move 0.375s linear;
}

@keyframes btn-arrow-move {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  49% {
    transform: translateX(100%);
    opacity: 0;
  }

  50% {
    transform: translateX(-100%);
    opacity: 0;
  }

  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

.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);
}

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label>div.wdt-flex-banner-title {
  transition: var(--wdt-Ad-Transition);
}

.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label>div.wdt-flex-banner-title {
  display: block;
  opacity: 0;
  margin-left: -40px;
  flex: 0;
}

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info>div.wdt-flex-banner-image img {
  border-radius: var(--wdtRadius_Zero);
  -webkit-border-radius: var(--wdtRadius_Zero);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label .wdt-flex-banner-info {
  flex: 1;
  width: 100%;
}

/* -----------------------
    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(--wdtHeadAltColor);
}

/* -----------------------
    secondary Color 
----------------------- */

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info>div.wdt-flex-banner-button a {
  background-color: var(--wdtSecondaryColor);
  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: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: var(--wdtPrimaryColor);
  color: var(--wdtAccentTxtColor);
}


/* -----------------------
    Responsive
----------------------- */

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-title {
  font-size: clamp(1.875rem, 1.7914rem + 0.3822vw, 2.25rem); /* Min-30 & Max-36 */
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  text-align: start;
  display: flex;
  align-items: center;
}

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-info .wdt-flex-banner-title {
  writing-mode: unset;
  transform: unset;
  z-index: 2;
  position: relative;
}
  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info>div.wdt-flex-banner-image {
    height: 280px;
  }

@media (min-width: 1281px) {
  .wdt-flex-banner-options .wdt-flex-banner-option:not(.active) .wdt-flex-banner-label {
    padding: clamp(1.875rem, 1.2535rem + 2.0804vw, 3.75rem) clamp(2.1875rem, 1.6696rem + 1.7337vw, 3.75rem);
  }

  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info {
    height: 90%;
  }
}

@media screen and (max-width:1280px) and (min-width:1025px) {
  .wdt-flex-banner-options .wdt-flex-banner-option:not(.active) .wdt-flex-banner-label {
    padding: 40px 35px;
  }
}

@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: 4;
  }

  .wdt-flex-banner-options .wdt-flex-banner-option:after {
    left: 0;
    right: 0;
    margin: auto;
  }

  .wdt-flex-banner-options .wdt-flex-banner-option.active:after {
    left: calc(clamp(1.875rem, 1.2535rem + 2.0804vw, 3.75rem) - 5px);
    right: auto;
  }

  .wdt-flex-banner-options .wdt-flex-banner-option:not(.active) {
    cursor: pointer;
  }

}

@media (max-width: 1024px) {

  .wdt-flex-banner-options .wdt-flex-banner-option {
    position: relative;
  }

  .wdt-flex-banner-options .wdt-flex-banner-option:before {
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: var(--wdtRadius_Zero);
    -webkit-border-radius: var(--wdtRadius_Zero);
  }

  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label {
    padding: 30px;
    z-index: 1;
  }
.wdt-flex-banner-options .wdt-flex-banner-option:after {
  left: 30px;
}
  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info {
    padding: 10px 0 0;
  }

  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-title {
    font-size: var(--wdtFontSize_H5);
    margin: 0 30px 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>div.wdt-flex-banner-title,
  .wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label>div.wdt-flex-banner-title {
    display: none;
  }

  .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-title,
  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info>div.wdt-flex-banner-image,
  .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: 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-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-image {
    transition-delay: 35ms;
    -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: thin;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    display: flex;
    overflow: auto;
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap;
    padding-bottom: 25px;
    margin: 0;
  }

  .wdt-flex-banner-options .wdt-flex-banner-option {
    display: inherit;
    flex: 0 0 48.5%;
    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 100%;
  }

  /* .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info>div.wdt-flex-banner-image img {
    max-height: 260px;
  } */
}

@media (max-width: 479px) {

  .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 100%;
    width: auto !important;
  }
}

/* ===== Scrollbar CSS ===== */
@-moz-document url-prefix() {
  .wdt-flex-banner-options {
    scrollbar-width: thin;
  }
}

/* Firefox */
.wdt-flex-banner-options {
  scrollbar-width: thin;
}

/* Chrome, Edge, and Safari */
.wdt-flex-banner-options::-webkit-scrollbar {
  width: 100%;
  height: 4px;
  border: 0px solid var(--wdtPrimaryColor);
}

.wdt-flex-banner-options::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(var(--wdtSecondaryColorRgb), 0.2);
}

.wdt-flex-banner-options::-webkit-scrollbar-thumb {
  border-radius: 0px;
}