/**
    Marquee Animation Style 
*/

.wdt-animation-wrapper { position: relative; display: flex; flex-flow: row nowrap; overflow: visible; overflow-x: clip; }

.wdt-animation-wrapper div[class*="-marqee"] { width: auto; flex: 0 0 auto; display: grid; grid-auto-flow: column; align-items: center; }

.wdt-animation-wrapper div[class*="-marqee"] .wdt-animation-item { display: inline-flex; flex: 0 0 auto; text-align: center; align-items: center; position: relative; }
.wdt-animation-wrapper .wdt-animation-item { padding: 0 clamp(0.875rem, 0.7308rem + 0.641vw, 1.5rem); /*  Min-14 & Max-24 */ }

.wdt-animation-wrapper div[class*="-marqee"].right-to-left { 
    -webkit-animation: MarqueeLeft 24s linear infinite 0ms; animation: MarqueeLeft 24s linear infinite 0ms; }
.wdt-animation-wrapper div[class*="-marqee"].left-to-right { 
    -webkit-animation: MarqueeRight 24s linear infinite 0ms; animation: MarqueeRight 24s linear infinite 0ms; }
  
.wdt-animation-wrapper:hover div[class*="-marqee"] { -webkit-animation-play-state: paused; animation-play-state: paused; }

@keyframes MarqueeLeft { 
    from { margin-left: 0; } 
    to { margin-left: var(--wdt-marque-Margin-Width); } 
}
@keyframes MarqueeRight { 
    from { margin-left: var(--wdt-marque-Margin-Width); } 
    to { margin-left: 0; } 
}

/**
    Animation Text Style 
*/

.wdt-animation-item.text-item { display: inline-block; font-size: clamp(1.75rem, 1.4615rem + 1.2821vw, 3rem); /* Min-28 & Max-48 */
    font-weight: var(--wdtFontWeight_Alt); font-family: var(--wdtFontTypo_Alt); text-transform: capitalize; line-height: 1; }

.wdt-animation-item.text-item,
.wdt-animation-item.text-item a { color: var(--wdtHeadAltColor); text-decoration: none !important; }
.wdt-animation-item.text-item a:hover { color: var(--wdtPrimaryColor); }

/**
    Animation Icon Style 
*/

.wdt-animation-item.icon-item { display: flex; align-items: center; justify-content: center;
    font-size: clamp(1.75rem, 1.4615rem + 1.2821vw, 3rem); /* Min-28 & Max-48 */ }

.wdt-animation-item.icon-item svg { width: 1em; height: 1em; fill: currentColor; }


/**
    Animation Image Style 
*/

.wdt-animation-item.image-item img { object-fit: cover; object-position: center;
    width: clamp(1.75rem, 1.4615rem + 1.2821vw, 3rem); /* Min-28 & Max-48 */
    height: clamp(1.75rem, 1.4615rem + 1.2821vw, 3rem); /* Min-28 & Max-48 */ }



/**
    Responsive - AT Media Query
    --------------------------------
*/


/* Animation -Image & Text */

.wdt-animation-holder .wdt-animation-item.image-text .wdt-animation-item-text {
  font-size: clamp(1.875rem, 1.625rem + 1.25vw, 3.125rem); /* Min-30 & Max-50 */  
  text-transform: uppercase;
  font-weight: var(--wdtFontWeight_H2);
  font-family: var(--wdtFontTypo_H2);
  position: relative;
}
.wdt-animation-holder .wdt-animation-item.image-text .wdt-animation-item-text.text-item{
    color: var(--wdtLinkColor);
    transition: var(--wdt-Ad-Transition);
}
.wdt-animation-holder .wdt-animation-item.image-text .wdt-animation-item-text.text-item:hover{
    color: rgba(var(--wdtHeadAltColorRgb),0.6);
}
.wdt-dark-bg .wdt-animation-holder .wdt-animation-item.image-text .wdt-animation-item-text.text-item:hover{
    color: var(--wdtPrimaryColor);
}
.wdt-animation-holder .wdt-animation-wrapper .wdt-animation-item.image-text {
  padding: 0 0.5em;
  position: relative;
}

/* Background container */
.wdt-animation-holder .wdt-animation-item.image-text .wdt-animation-item-image {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(7.5rem, 6.75rem + 3.75vw, 11.25rem); /* Min-120 & Max-180 */
  height: clamp(8.125rem, 7.375rem + 3.75vw, 11.875rem); /* Min-130 & Max-190 */
  z-index: 1;
}

.wdt-animation-holder .wdt-animation-item.image-text .wdt-animation-item-image:before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    background: var(--wdtBorderColor);
    z-index: 0;
    border-radius: var(--wdtRadius_2X);
    opacity: 0;
    transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transition: var(--wdt-Ad-Transition);
    -webkit-transition: var(--wdt-Ad-Transition);
}

.wdt-animation-holder .wdt-animation-item.image-text:hover .wdt-animation-item-image:before {
    opacity: 1;
    transform: rotate(0deg);
}

/* Image inside the background */
.wdt-animation-holder .wdt-animation-item.image-text .wdt-animation-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--wdtRadius_2X);
  transform: rotate(0deg);
  opacity: 0;
  transition: var(--wdt-Ad-Transition);
  z-index: 1;
  position: relative;
}

/* Rotate image slightly on hover */
.wdt-animation-holder .wdt-animation-item.image-text:hover .wdt-animation-item-image img {
  transform: rotate(15deg);
    opacity: 1;
}



.wdt-animation-holder .wdt-animation-item.text-item { 
   font-size: clamp(1.875rem, 1.625rem + 1.25vw, 3.125rem); /* Min-30 & Max-50 */  
   text-transform:uppercase;
   line-height:var( --wdtLineHeight_H5);
}
.wdt-animation-holder .wdt-animation-item.text-item:nth-child(2) a{
   color:var(--wdtPrimaryColor);
}
.wdt-animation-holder .wdt-animation-item.text-item:nth-child(4) a{
   color:var(--wdtPrimaryColor);
}

.wdt-animation-holder .wdt-animation-item.text-item img.emoji {
    margin: 0 7px !important;
}

/*  */

.wdt-animation-wrapper div[class*="-marqee"]:has(.wdt-animation-item.icon-item),
.wdt-animation-wrapper div[class*="-marqee"] .wdt-animation-item.icon-item {
    overflow: hidden;
}

.wdt-animation-wrapper div[class*="-marqee"] .wdt-animation-item.icon-item svg {
    /* filter: drop-shadow(0 1em 0 currentcolor);
    -webkit-filter: drop-shadow(0 1em 0 currentcolor);
    transform: translateY(0);
    -webkit-transform: translateY(0); */
    transition: var(--wdt-Ad-Transition);
    -webkit-transition: var(--wdt-Ad-Transition);
}

.wdt-animation-wrapper div[class*="-marqee"] .wdt-animation-item.icon-item:hover svg {
    /* transform: translateY(-1em);
    -webkit-transform: translateY(-1em); */
    color: rgba(var(--wdtHeadAltColorRgb),0.7);
}

.wdt-dark-bg .wdt-animation-wrapper div[class*="-marqee"] .wdt-animation-item.icon-item:hover svg {
    color: var(--wdtPrimaryColor);
}


/* Standard Template */

.wdt-animation-wrapper div[class*="-marqee"] .wdt-animation-item.standard-text {
    display: flex;
    align-items: center;

    font-size: clamp(1.5rem, 1.425rem + 0.375vw, 1.875rem); /* Min-24 & Max-30 */
    font-family: var(--wdtFontTypo_Alt);
    font-weight: var(--wdtFontWeight_Base);
    line-height: var(--wdtLineHeight_Ext);
    text-transform: uppercase;

    padding: 12px;
    padding-right: 30px;
    padding-left: 25px;
    margin: 0 15px;

    border-radius: var(--wdtRadius_Part);
    -webkit-border-radius: var(--wdtRadius_Part);
    transition: var(--wdt-Ad-Transition);
    -webkit-transition: var(--wdt-Ad-Transition);
}

.wdt-animation-wrapper div[class*="-marqee"] .wdt-animation-item.standard-text p {
    margin: 0;
}

.wdt-animation-wrapper div[class*="-marqee"] .wdt-animation-item.standard-text .icon-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    /* background-color: var(--wdtPrimaryColor); */
    /* font-size: var(--wdtFontSize_H5); */
    font-size: clamp(2.5rem, 2.375rem + 0.625vw, 3.125rem); /* 50 - 40 */
    margin-right: 22px;
    border-radius: var(--wdtRadius_Full);
    -webkit-border-radius: var(--wdtRadius_Full);
    transition: inherit;
    -webkit-transition: inherit;
}

.wdt-animation-wrapper div[class*="-marqee"] .wdt-animation-item.standard-text .wdt-animation-item-sub-text {
    position: relative;
    /* font-size: var(--wdtFontSize_Base); */
    color: rgba(var(--wdtHeadAltColorRgb),0.3);
    border-left: 2px solid var(--wdtBorderColor);
    padding-left: 20px;
    margin-left: 20px;
    transition: inherit;
    -webkit-transition: inherit;
}

.wdt-animation-wrapper div[class*="-marqee"] .wdt-animation-item.standard-text:hover {
    background-color: var(--wdtPrimaryColor);
}

/* .wdt-animation-wrapper div[class*="-marqee"] .wdt-animation-item.standard-text:hover .icon-item {
    background-color: var(--wdtHeadAltColor);
    color: var(--wdtAccentTxtColor);
} */
