.trad-dual-header-text-container {
    display: block; /* inline text flow — secondary continues right after primary */
}
.trad-dual-header-text-container.is-row {
    /* inline by default — no extra needed */
}
.trad-dual-header-text-container.is-column .trad-dual-header-primary,
.trad-dual-header-text-container.is-column .trad-dual-header-secondary {
    display: block; /* new line mode */
}
.trad-dual-header-text-container .trad-dual-header-primary {
    font-size: 34px;
    font-weight: 500;
    transition: color 0.4s ease-in-out, 
    -webkit-text-stroke-color 0.4s ease-in-out;
    color: #333;
    display: inline;
}
/* Apply gradient style only if has-gradient is present */
.trad-dual-header-text-container .trad-dual-header-primary {
    transition: color 0.4s ease, 
    -webkit-text-stroke-color 0.4s ease;
}

/* Gradient state (additional styles only) */
.trad-dual-header-text-container.has-gradient .trad-dual-header-primary {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
    background-position: left center;
    transition: background-position 0.4s ease, 
                color 0.4s ease, 
  -webkit-text-stroke-color 0.4s ease;
}

.trad-dual-header-text-container.has-gradient .trad-dual-header-primary:hover {
    background-position: right center;
}

 /*---------------------------------- For second header style// ------------------------------------*/
.trad-dual-header-text-container .trad-dual-header-secondary {
    font-size: 34px;
    font-weight: 500;
    transition: color 0.4s ease-in-out, 
    -webkit-text-stroke-color 0.4s ease-in-out;
}
/* Apply gradient style only if has-gradient is present */
.trad-dual-header-text-container .trad-dual-header-secondary {
    color: #0c38c9;
    transition: color 0.4s ease, 
    -webkit-text-stroke-color 0.4s ease;
    letter-spacing: 10px;
    display: inline; /* flows right after primary text */
}
/* Secondary gradient — only when has-gradient-secondary class is present (NOT has-gradient) */
.trad-dual-header-text-container.has-gradient-secondary .trad-dual-header-secondary {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
    background-position: left center;
    transition: background-position 0.4s ease, 
                color 0.4s ease, 
  -webkit-text-stroke-color 0.4s ease;
}
.trad-dual-header-text-container.has-gradient-secondary .trad-dual-header-secondary:hover {
    background-position: right center;
}

/* Reset: when primary has gradient, secondary must NOT be transparent */
.trad-dual-header-text-container.has-gradient .trad-dual-header-secondary {
    -webkit-text-fill-color: unset;
}

.trad-dual-header-text-container.has-gradient-secondary.has-gradient .trad-dual-header-secondary {
    -webkit-text-fill-color: transparent;
}

@media(max-width:767px){
  .elementor-element-123 .trad-dual-header-text-container { text-align: center; }
}

/* Suffix text */
.trad-dual-header-text-container .trad-dual-header-suffix {
    font-size: 34px;
    font-weight: 500;
    color: #333;
    display: inline;
    transition: color 0.4s ease;
}

.trad-dual-header-text-container.is-column .trad-dual-header-suffix {
    display: block;
}

/* Gradient suffix */
.trad-dual-header-text-container.has-gradient-suffix .trad-dual-header-suffix {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}