
.wdt-flex-banner-options .wdt-flex-banner-option { width: 100%; height: 100vh; transition: .8s cubic-bezier(.29,0,.2,1); 
  border: 1px solid var(--wdtPrimaryColor); border-radius: var(--wdtRadius_3X); overflow: hidden;
  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: clamp(1.25rem, 0.9615rem + 1.2821vw, 2.5rem); /* 20px - 40px */ }
.wdt-flex-banner-options .wdt-flex-banner-option:before { opacity: 0;
  content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; display: block; background-color: rgba(0,0,0,0.15);}

/* Transtion Style */

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label { /* display: flex; margin-top: auto; align-items: flex-end; */
  padding: 30px; background: var(--wdtTertiaryColor); height: 100%; width: 56%; margin-left: auto; align-content: center; opacity: 0;
  -webkit-transform: translateX(100%); transform: translateX(100%); transition: 375ms cubic-bezier(0.7, 0, 0.3, 1); transition-delay: 0ms; }

.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label { opacity: 1;
  -webkit-transform: translateX(0%); transform: translateX(0%); transition-delay: 380ms; }

.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-title,
.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-icons,
.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: 3ms cubic-bezier(0.7, 0, 0.3, 1); transition: 3ms cubic-bezier(0.7, 0, 0.3, 1); 
  /*width: 20vw; padding: 0 clamp(0.625rem, 0.1923rem + 1.9231vw, 2.5rem); margin: 0 0 10px; */ }

.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-title,
.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-label .wdt-flex-banner-icons,
.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-icons { 
  transition-delay: 0ms; -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; }
.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-title {
  transition-delay: 0ms; -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: 0ms; -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: 0ms; -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: 0ms; -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-icons {
  transition-delay: 420ms; -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
.wdt-flex-banner-options .wdt-flex-banner-option.active .wdt-flex-banner-title {
  transition-delay: 480ms; -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: 550ms; -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: 620ms; -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: 680ms; -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; letter-spacing: normal; }

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info { padding: 18px 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); }
.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 { 
  font-size: var(--wdtBtn_font_size, 1rem); display: inline-block; margin-top: 15px; padding: var(--wdtPadding_Btn, 0.7em 1.5em); 
  font-family: var(--wdtFontTypo_Alt); font-weight: var(--wdtFontWeight_Ext, 500); line-height: normal; 
  border-radius: 10em; text-transform: capitalize; }

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-shadow { pointer-events: none; opacity: 0;
  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 .wdt-flex-banner-info > div.wdt-flex-banner-content ul {
  margin: 16px 0px; list-style-type: none; padding: 0px; font-family: var(--wdtFontTypo_Alt); 
  font-size: clamp(1.125rem, 1.0962rem + 0.1282vw, 1.25rem); /* Min-18 & Max-20 */ }

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-content ul:fast-child {
  margin-top: 0px; }
.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-content ul:last-child {
  margin-bottom: 0px; }
.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-content ul li { 
  padding: 0px; position: relative; }

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info > div.wdt-flex-banner-content ul li:before {
  content: ""; position: relative; display: inline-block; width: 6px; height: 6px; margin-right: 10px;
  background-color: var(--wdtPrimaryColor); border-radius: 50%; }


.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-icons { margin: 0 -8px 16px;
  display: flex; flex-wrap: nowrap; align-items: center; width: auto;  }

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-icons .wdt-flex-banner-icon {
  font-size: 2rem; padding: 8px; display: inherit; }

/* -----------------------
    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: var(--wdtPrimaryColor); color: var(--wdtAccentTxtColor); }

/* -----------------------
    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: var(--wdtSecondaryColor); color: var(--wdtTertiaryColor); }


/* -----------------------
    Responsive
----------------------- */

.wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-title { display: flex; align-items: center;
  font-size: clamp(1.375rem, 1.3462rem + 0.1282vw, 1.5rem); /* Min-22 & Max-24 */
  /* -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; */ } 

@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; }

  /* .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-title { font-size: var(--wdtFontSize_H6);
    -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; }   */

}

@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; }
  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label { padding: 20px; z-index: 1; /*flex-flow: column wrap;*/ }
  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-info { padding: 18px 0 0; }
  /* .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-title { font-size: 1rem; 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 .wdt-flex-banner-icons, 
  .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 { /* display: flex; margin-top: auto; align-items: flex-end; */
    padding: 30px; background: rgba(var(--wdtTertiaryColorRgb), 0.89); height: fit-content; width: 100%; margin-left: auto; 
    align-content: end; opacity: 1; -webkit-transform: none; transform: none; transition: 375ms cubic-bezier(0.7, 0, 0.3, 1); 
    transition-delay: 0ms; margin-top: auto; }
    
  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .wdt-flex-banner-icons { 
    transition-delay: 70ms; -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label .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: 10px; } */

}

@media (max-width: 1540px) {
  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label { width: 65%; }
}

@media (max-width: 1280px) {
  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label { width: 78%; }
}

@media (max-width: 1024px) {
  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label { width: 82%; }
}

@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%; }

  .wdt-flex-banner-options .wdt-flex-banner-option .wdt-flex-banner-label { width: 100%; }
}

@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; }
