/* Keep your initial hides exactly as-is */

.clinical-col,
.medical-col,
.marketing-col,
.pms-col,
.regulatory-col,
.rd-col,
.internal-col,
.it-col {
    display: none !important;
}

/* Fade behavior: JS toggles these */

.fade-panel {
    opacity: 0;
    transition: opacity 300ms ease 0s;
}



.fade-panel.is-active-panel {
    display: block !important;
}

.fade-panel.is-visible {
    opacity: 1;
}

/* Keeps fade */

.fade-panel {
    opacity: 0;
    transition: opacity 1000ms 0s ease;
}

/* Beat the hide rule: higher specificity + !important */

:is( .executives-col, .clinical-col, .medical-col, .marketing-col, .pms-col, .regulatory-col, .rd-col, .internal-col, .it-col).is-active-panel {
    display: block !important;
}

.executives-col.is-active-panel,
.clinical-col.is-active-panel,
.medical-col.is-active-panel,
.marketing-col.is-active-panel,
.pms-col.is-active-panel,
.regulatory-col.is-active-panel,
.rd-col.is-active-panel,
.internal-col.is-active-panel,
.it-col.is-active-panel {
    display: block !important;
}

.challenges-tabs li.active a {
    background-color: #333 !important;
}

.challenges-tabs li.active a h4 {
    color: #fff !important;
}

.tabs-el-content .fusion-content-boxes .fusion-column {
    margin-bottom: 5px;
}



.executives-col .heading {
    margin-bottom: 0px !important;
}

.tabs-el-content h6 {
    min-height: 40px;
}

@media screen and (max-width: 600px) {
    .challenges-tabs {
        margin-bottom: 30px;
    }
}

.tabs-el-content h5 {
    font-size: clamp(15px, 1vw, 24px) !important;
}

/* content boxes - home  */

.tabs-el-content .content-container {
    font-family: 'Archivo' !important;
    color: #4A505C !important;
    line-height: 152%;
    margin-bottom: 0px !important;
}

.tabs-el-content .col.content-box-wrapper {
    padding: 20px;
}

@media screen and (min-width: 1024px) {
  .tabs-el-content .col.content-box-wrapper {
      min-height: 130px;
  }

  .executives-col.tabs-el-content .col.content-box-wrapper {
    min-height: 50px !important;
  }
}

@media screen and (min-width: 601px) and (max-width: 1023px) {
    .tabs-el-content .col.content-box-wrapper {
      min-height: 190px;
  }

  .executives-col.tabs-el-content .col.content-box-wrapper {
    min-height: 100px !important;
  }
}

.challenges-tabs .nav {
    text-align: left !important;
}

.challenges-tabs .nav {
    text-align: left !important;
}

.challenges-tabs .nav ul li {
    margin-bottom: 5px !important;
    margin-right: 5px;
}

/* animated border(s) */

/* ===== Animated 1px runner (shared) ===== */

/* Base setup shared by both targets (no border-radius here) */

:is(.challenges-tabs .nav ul li a, .card-build > div) {
    position: relative;
    --bb: 1px;
    /* ring thickness */
    --c: #3578FF;
    /* runner color */
    --run: 1.8s;
    /* 50% slower per your last change */
    --solidFrac: 0.30;
    /* 30% of the visible arc is solid head */
}

/* Keep each target's own shape */

.challenges-tabs .nav ul li a {
    border-radius: 100px;
}

.card-build>div {
    border-radius: 8px;
}

/* Runner ring */

:is(.challenges-tabs .nav ul li a, .card-build > div)::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* follow each element's corners */
    padding: var(--bb);
    opacity: 0;
    background: conic-gradient( from var(--ang), rgba(53, 120, 255, 1) 0deg, rgba(53, 120, 255, 1) calc(var(--arc) * var(--solidFrac)), rgba(53, 120, 255, 0) var(--arc), rgba(53, 120, 255, 0) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* Trigger animation on hover */

:is(.challenges-tabs .nav ul li a, .card-build > div):hover::before {
    animation: runner-one-lap var(--run) linear 1;
}

/* One clockwise lap: reveal → cruise → vanish at start */

@keyframes runner-one-lap {
    0% {
        --ang: 0deg;
        --arc: 0deg;
        opacity: 0;
    }
    5% {
        --arc: 0deg;
        opacity: 1;
    }
    20% {
        --ang: 72deg;
        --arc: 140deg;
        opacity: 1;
    }
    80% {
        --ang: 288deg;
        --arc: 140deg;
        opacity: 1;
    }
    100% {
        --ang: 360deg;
        --arc: 0deg;
        opacity: 0;
    }
}