/*.collexo-pixi-item h2{color:#663795;}*/
.collexo-pixi-item .btn-holder a{background-color:#663795;border-color:#663795;}
.collexo-pixi-item .btn-holder a:hover{opacity:.8;}

@media (min-width:992px) {
	.item-center{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height:100vh;
        width:100%;
    }

    .item-center .responsiveimg{
        max-width: 450px;
        max-width: 65vh;
    }

    .item-center .info_text{
        max-width: 77%;
        margin-bottom:15px;
        font-size:14px;
    }
	
	.imageContent{
        position:relative;
        top:-10px;
    }
    .owl-carousel-login .owl-dots{
        position: absolute;
        bottom: 15px;
        width: 100%;
    }

    .mio-item{
        background:linear-gradient(135deg, #FFF5F0 0%, #CDEEFF 100%);
    }
    
    .inrollment-item{
        background: #EADCFF;
		background: linear-gradient(90deg,rgba(234, 220, 255, 1) 0%, rgba(250, 249, 254, 1) 65%, rgba(225, 233, 246, 1) 100%);
    }

    .inrollment-item .btn-fill-blue{
        background-color: #dea313;
        border-color: #dea313;
    }

    .inrollment-item .btn-fill-blue:hover{
        background-color: #dea313;
        border-color: #dea313;
        text-decoration: none;
    }
    
    .collexo-item{
        background:linear-gradient(360deg, #eff7fe 8%, snow 55%, #ffecef 100%, #fbfcff 100%);
    }
    .echo-item{
        background: linear-gradient(180deg, #fff2e6 15%, #fff2e6 15%, rgba(241,241,241,1) 82%);
    }
    .zing-item{
        background: linear-gradient(180deg, #ffe8ec 15%, rgba(255,231,239,1) 15%, rgba(241,241,241,1) 82%);
    }
    .owl-carousel .owl-nav{
        position: absolute;
        top: 0;
        right: 10px;
        display: none;
    }
    .mio-item .btn-fill-blue{
        background-color: #8948e4;
        border-color: #8f32e6;
    }
    .mio-item .btn-holder a:hover{
        opacity:0.8;
    }
    .items .responsiveimg{
        max-width:80vh;
        width:80vh;
		margin-bottom:0;
    }
    
    .mioVideo{
        max-width: 15vw;
        margin-bottom:1.5rem
    }

    .mioStar{
        right:-28px;
    }
}

@media (max-width:991px) {
    .owl-carousel .owl-nav{
       display:none;
    }
    .btn-holder{
        margin-bottom: 30px;
    }
    .collexo-pixi-item .responsiveimg{
        max-width:80vh;
        width:80vh;
    }
    .owl-carousel-login h2,.owl-carousel-login .info_text{text-align:center !important;}

    .imageContent{
        display:flex;
        align-items: center;
        justify-content: center;
    }
    .mioVideo{max-width: 14rem; margin-bottom:1rem;}
    .mioStar{
        right:30px;
    }
    #media-container img{
        max-width: 80%;
    }
}


.owl-carousel.owl-drag .owl-item{width:100%;}

.owl-theme .owl-dots .owl-dot span{width: 6px;height: 6px;}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span{background-color: #db4437;} 

button.owl-dot:hover:before{
    content: attr(data-title);
    position: absolute;
    top: -18px;
    background-color: #444;
    left: 50%;
    font-size: 12px;
    padding: 2px 8px;
    margin-left: -28px;
    border-radius: 4px 4px 0 0;
    color:#fff;
    min-width: 40px;
}
button.owl-dot:nth-child(3):hover::before{
    transform: translate(-15px,0px);
}
button.owl-dot:hover:after{
    content: '';
    position: absolute;
    top: -1px;
    border-color: #444 transparent transparent;
    border-style: solid;
    border-width: 5px;
    left: 50%;
    margin-left: -5px;
}
.owl-carousel-login.owl-carousel .owl-nav button{
    background-color: rgba(255, 255, 255, 0.5);
    color: #999;
    margin:0 2px;
    padding: 2px 10px !important;
    line-height: 1;
    font-size:24px;
}
.owl-carousel-login.owl-carousel .owl-nav button span{position: relative; top:-1px;}
.owl-carousel-login.owl-carousel .owl-nav [class*=owl-]:hover{
    background-color:rgba(68, 68, 68, 0.5);
}

.mioStar{
    position: absolute;
    top:70px;
}

.mioStar img{
    max-width:50px;
}

.owl-dots{display:flex;gap:6px;align-items:center;justify-content: center;}
.owl-dot{
  height:6px;width:6px;border-radius:3px;
  background:rgba(0,0,0,0.18);cursor:pointer;
  transition:all 0.3s cubic-bezier(0.22,1,0.36,1);
}
.owl-dot.active{width:22px}
.owl-dot.active span{width:22px !important}


/* Mio AI Coach hero graphic (login slider slide 1) */
.mioai-webinar-item {
    position: relative;
    overflow: hidden;
    background: #F4F4FC;
    --violet: #6C63FF;
    --violet-2: #7A63FF;
    --violet-3: #5B3FF8;
    --amber: #E67E22;
    --green: #28A745;
    --red: #DC3545;
    --ink: #1A1535;
    --ink-2: #3D3662;
    --ink-3: #6B6490;
    --ink-4: #9C98BE;
    --hero-bg: transparent;
    --border-bright: rgba(108, 99, 255, 0.14);
    --font: 'Inter', sans-serif;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --shadow-md: 0 4px 20px rgba(108, 99, 255, 0.1);
}

.mioai-webinar-item {
    background: #EADCFF;
    background: linear-gradient(90deg,rgba(234, 220, 255, 1) 0%, rgba(250, 249, 254, 1) 65%, rgba(225, 233, 246, 1) 100%)
}

.mioai-webinar-item > .imageContent,
.mioai-webinar-item > .h1,
.mioai-webinar-item > .info_text {
    position: relative;
    z-index: 1;
}

.mioai-webinar-item .imageContent {
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
}

.mioai-webinar-item .hero-graphic {
    position: relative;
    z-index: 1;
    container-type: inline-size;
    container-name: mio-hero;
    width: min(100%, 520px);
    max-width: 100%;
    aspect-ratio: 500 / 520;
    margin: 0 auto;
    margin-bottom: 0;
    background: transparent;
    overflow: visible;
}

.mioai-webinar-item .hero-graphic > * {
    position: absolute;
    z-index: 2;
}

.mioai-webinar-item .orb-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(108, 99, 255, 0.2) 0%, rgba(108, 99, 255, 0.05) 58%, transparent 100%);
    box-shadow: 0 0 36px rgba(108, 99, 255, 0.2), 0 0 72px rgba(108, 99, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: mioOrbPulse 4s ease-in-out infinite;
    will-change: transform, box-shadow;
}

@keyframes mioOrbPulse {
    0%, 100% {
        box-shadow: 0 0 36px rgba(108, 99, 255, 0.2), 0 0 72px rgba(108, 99, 255, 0.1);
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        box-shadow: 0 0 48px rgba(108, 99, 255, 0.28), 0 0 96px rgba(108, 99, 255, 0.14);
        transform: translate(-50%, -50%) scale(1.03);
    }
}

.mioai-webinar-item .orb-inner {
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(135deg, #5B3FF8 0%, #6C63FF 55%, #7A63FF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(108, 99, 255, 0.35), inset 0 2px 6px rgba(255, 255, 255, 0.28);
}

.mioai-webinar-item .orb-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.mioai-webinar-item .ring {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(108, 99, 255, 0.14);
    animation: mioRingRotate 20s linear infinite;
}

.mioai-webinar-item .ring-1 {
    width: 40%;
    aspect-ratio: 1;
}

.mioai-webinar-item .ring-2 {
    width: 64%;
    aspect-ratio: 1;
    border-color: rgba(108, 99, 255, 0.09);
    animation: mioRingRotateRev 30s linear infinite;
}

.mioai-webinar-item .ring-3 {
    width: 88%;
    aspect-ratio: 1;
    border-color: rgba(108, 99, 255, 0.06);
    animation: mioRingRotate 45s linear infinite;
}

@keyframes mioRingRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes mioRingRotateRev {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(-360deg); }
}

.mioai-webinar-item .ring-node {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--violet);
    top: -3px;
    left: 50%;
    margin-left: -3px;
    box-shadow: 0 0 8px rgba(108, 99, 255, 0.55);
    animation: mioNodeBlink 2.4s ease-in-out infinite;
}

.mioai-webinar-item .ring-node-amber {
    background: var(--amber);
    box-shadow: 0 0 8px rgba(230, 126, 34, 0.55);
    animation-delay: 0.8s;
}

.mioai-webinar-item .ring-node-green {
    background: var(--green);
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.55);
    animation-delay: 1.6s;
}

@keyframes mioNodeBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
}

.mioai-webinar-item .data-card {
    background: #fff;
    border: 1px solid rgba(108, 99, 255, 0.12);
    border-radius: clamp(8px, 2.4cqi, 12px);
    padding: clamp(7px, 2cqi, 10px) clamp(8px, 2.6cqi, 13px);
    box-shadow: var(--shadow-md);
    min-width: 0;
    width: clamp(100px, 27cqi, 142px);
    max-width: 36%;
    text-align: left;
    opacity: 1;
    animation: mioCardFloat 6s ease-in-out infinite;
    will-change: transform;
}

.mioai-webinar-item .dc-1 { top: 5%; left: 5%; right: auto; animation-delay: 0s; }
.mioai-webinar-item .dc-2 { top: 5%; right: 5%; left: auto; animation-delay: -2s; }
.mioai-webinar-item .dc-3 { bottom: 22%; left: 5%; right: auto; animation-delay: -4s; }
.mioai-webinar-item .dc-4 { bottom: 5%; right: 5%; left: auto; animation-delay: -1s; }
.mioai-webinar-item .dc-5 {
    top: 33%;
    right: 4%;
    left: auto;
    width: clamp(108px, 28cqi, 148px);
    animation-delay: -3s;
}

@keyframes mioCardFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.mioai-webinar-item .dc-label {
    font-size: clamp(7px, 1.8cqi, 8px);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: 4px;
}

.mioai-webinar-item .dc-value {
    font-family: var(--font);
    font-size: clamp(13px, 3.4cqi, 17px);
    font-weight: 700;
    line-height: 1.1;
}

.mioai-webinar-item .dc-value.violet { color: var(--violet); }
.mioai-webinar-item .dc-value.green { color: var(--green); }
.mioai-webinar-item .dc-value.amber { color: var(--amber); }

.mioai-webinar-item .dc-sub {
    font-size: clamp(8px, 2cqi, 10px);
    color: var(--ink-4);
    margin-top: 3px;
    line-height: 1.35;
}

.mioai-webinar-item .dc-signal {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-top: 5px;
}

.mioai-webinar-item .dc-signal-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
}

.mioai-webinar-item .dc-signal-text {
    font-size: clamp(7px, 1.9cqi, 9px);
    color: var(--ink-3);
    line-height: 1.35;
}

.mioai-webinar-item .dc-signal-text strong {
    color: var(--ink-2);
    font-weight: 600;
}

.mioai-webinar-item .dc-bars {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    height: 22px;
    margin-top: 5px;
}

.mioai-webinar-item .dc-bar {
    flex: 1;
    max-width: 5px;
    border-radius: 2px;
    background: var(--violet);
    opacity: 0.15;
    transform-origin: bottom;
}

.mioai-webinar-item .dc-bar.active { opacity: 0.75; }

.mioai-webinar-item .dc-bars .dc-bar:nth-child(1),
.mioai-webinar-item .dc-bars .dc-bar:nth-child(2),
.mioai-webinar-item .dc-bars .dc-bar:nth-child(3),
.mioai-webinar-item .dc-bars .dc-bar:nth-child(4),
.mioai-webinar-item .dc-bars .dc-bar:nth-child(5),
.mioai-webinar-item .dc-bars .dc-bar:nth-child(6),
.mioai-webinar-item .dc-bars .dc-bar:nth-child(7),
.mioai-webinar-item .dc-bars .dc-bar:nth-child(8),
.mioai-webinar-item .dc-bars .dc-bar:nth-child(9),
.mioai-webinar-item .dc-bars .dc-bar:nth-child(10) {
    animation: none;
}

.mioai-webinar-item .dc-tag-row {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.mioai-webinar-item .dc-tag {
    font-size: clamp(7px, 1.7cqi, 8px);
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1.2;
}

.mioai-webinar-item .tag-urgent { background: rgba(220, 53, 69, 0.1); color: var(--red); }
.mioai-webinar-item .tag-high { background: rgba(230, 126, 34, 0.1); color: var(--amber); }
.mioai-webinar-item .tag-med { background: rgba(108, 99, 255, 0.1); color: var(--violet); }

.mioai-webinar-item .connector-svg {
    inset: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

.mioai-webinar-item .dc-value-channel {
    font-size: clamp(11px, 2.8cqi, 14px);
    color: var(--ink);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.2;
}

.mioai-webinar-item .dc-score-suffix {
    font-size: clamp(9px, 2.4cqi, 12px);
    color: var(--ink-4);
    font-weight: 400;
}


@media (min-width: 992px) {
    .mioai-webinar-item .hero-graphic {
        width: calc(80vh * 491 / 584 * 500 / 520);
        max-width: 80vh;
    }

    .mioai-webinar-item .data-card {
        width: clamp(108px, 50cqi, 190px);
        max-width:50%;
    }

    .mioai-webinar-item .dc-1 { top: 5%; left: 5%; right: auto; }
    .mioai-webinar-item .dc-2 { top: 5%; right: 5%; left: auto; }
    .mioai-webinar-item .dc-3 { bottom: 22%; left: -5%; right: auto; }
    .mioai-webinar-item .dc-4 { bottom: 15%; right: 5%; left: auto; }
    .mioai-webinar-item .dc-5 {
        top: 35%;
        right:-15px;
        left: auto;
        width: clamp(112px, 50cqi, 190px);
    }
}

/* Scale cards inside hero as its width shrinks below 500px */
@container mio-hero (max-width: 460px) {
    .mioai-webinar-item .data-card {
        width: clamp(96px, 40cqi, 140px);
    }

    .mioai-webinar-item .dc-5 {
        width: clamp(100px, 40cqi, 148px);
    }
}

@container mio-hero (max-width: 380px) {
    .mioai-webinar-item .data-card {
        width: clamp(88px, 34cqi, 124px);
        padding: 6px 8px;
    }

    .mioai-webinar-item .dc-3 {
        bottom: 16%;
    }

    .mioai-webinar-item .dc-5 {
        top: 39%;
        width: clamp(92px, 36cqi, 128px);
    }
}

@container mio-hero (max-width: 300px) {
    .mioai-webinar-item .data-card {
        width: clamp(74px, 35cqi, 100px);
        padding: 5px 6px;
    }

    .mioai-webinar-item .dc-1,
    .mioai-webinar-item .dc-2 {
        top: 1%;
    }

    .mioai-webinar-item .dc-3 {
        bottom: 20%;
    }

    .mioai-webinar-item .dc-4 {
        bottom: 1%;
    }

    .mioai-webinar-item .dc-5 {
        top: 43%;
        width: clamp(78px, 37cqi, 108px);
    }

    .mioai-webinar-item .dc-bars {
        height: 16px;
    }
}

@media (max-width: 991px) {
    .mioai-webinar-item .imageContent {
        max-width: 100%;
        padding: 0;
    }

    .mioai-webinar-item .hero-graphic {
        width: min(100%, 420px);
        max-width: 100%;
        max-height: none;
        min-height: 0;
        aspect-ratio: 500 / 520;
    }

    .mioai-webinar-item .data-card {
        width: clamp(86px, 28%, 132px);
        max-width: 36%;
    }

    .mioai-webinar-item .dc-1 { top: 1%; left: 0; }
    .mioai-webinar-item .dc-2 { top: 1%; right: 0; }
    .mioai-webinar-item .dc-3 { bottom: 19%; left: 0; }
    .mioai-webinar-item .dc-4 { bottom: 1%; right: 0; }
    .mioai-webinar-item .dc-5 {
        top: 42%;
        right: 0;
        width: clamp(90px, 30%, 128px);
    }

    .mioai-webinar-item .dc-4 .dc-tag-row {
        gap: 2px;
    }

    .mioai-webinar-item .dc-4 .dc-tag {
        padding: 1px 4px;
    }
}

@media (max-width: 500px) {
    .mioai-webinar-item .hero-graphic {
        width: 100%;
    }

    .mioai-webinar-item .data-card {
        width: clamp(78px, 27%, 118px);
        max-width: 35%;
        padding: 5px 7px;
        animation: none;
    }

    .mioai-webinar-item .dc-3 {
        bottom: 21%;
    }

    .mioai-webinar-item .dc-5 {
        top: 44%;
    }

    .mioai-webinar-item .dc-4 .dc-tag-row {
        display: none;
    }

    .mioai-webinar-item .dc-signal-text {
        font-size: 7px;
    }
}

@media (max-width: 380px) {
    .mioai-webinar-item .hero-graphic {
        width: 100%;
    }

    .mioai-webinar-item .data-card {
        width: clamp(72px, 26%, 104px);
        max-width: 40%;
    }

    .mioai-webinar-item .dc-value {
        font-size: 12px;
    }

    .mioai-webinar-item .dc-4 .dc-signal {
        margin-top: 3px;
    }
}

@media (max-height: 760px) and (min-width: 992px) {
    .mioai-webinar-item .dc-3 {
        bottom: 24%;
    }

    .mioai-webinar-item .dc-5 {
        top: 36%;
    }
}