.hero-banner::before {
 content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    #4D148C 0%,      /* FedEx Purple */
    #7D22C3 33%,     /* Blend 33     */
    #FF6200 100%     /* FedEx Orange */
  );
  opacity: 0.75;     /* Adjust 0.6–0.85 for image visibility */
  z-index: 1;
}
.verticle {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

.box-shadow{
    box-shadow: 0px 6px 15px #8e8e8e47;
}



/************* TABBED INTERFACE *************/
/* Custom Classes for All Tabbed Interface Buttons and Items Containers can be found in this space */
body:not(.finetune) .creative-tab-item {
    display: none!important;
}

body:not(.finetune) .creative-tab-item.creative-active-tab-item {
    display: block!important;
    animation: animateIn .75s forwards ease;
}

.creative-tab-button {
    transition: all linear 0.2s;
    cursor: pointer;
}

.creative-active-tab-line {
    transition: left ease 500ms;
}

/************* STYLE TAB ACTIVE STATE: INTERFACE 3 *************/
.creative-tab-side .creative-active-tab-button {
    border-right: 1px solid rgb(rgb(142, 142, 142))!important;
}

/************* STYLE TAB ACTIVE STATE BACKGROUND: ALL INTERFACES *************/
.creative-tab-auto .creative-active-tab-button, 
.creative-tab-full .creative-active-tab-button,
.creative-tab-side .creative-active-tab-button {
    background-color: rgb(77, 20, 140)!important;
    border-top: 0px solid rgb(240, 108, 71)!important;
    color: rgb(255, 255, 255)!important;
}

/************* TAB ANIMATION *************/

@keyframes animateIn{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}