/* Angular: hide bindings until compiled */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

html, body {
    overflow-x: hidden;
}

.Controlersv2 {
    font-size: clamp(0.7138rem, calc(0.6835rem + 0.1294vw), 0.8rem);
    font-weight: 600;
}

:root {
    /* variables */
    -\-pio-primary-color: #FFA000;
    -\-pio-secondary-color: #f8f8f8;
    -\-pio-scondery-text: #00000080;
    -\-pio-black-theme-secondary-color: #111111c2;
    /* The logo navy: the one accent colour of the V2 template (replaces the old #00AACD). */
    -\-pio-blue-color: #055386;
    -\-pio-bg-color: #070b1a;
    /* program background vars */
    -\-rotate-angle: 35deg;
    -\-rotate-bottom: 25deg;
    -\-rotate-directional: right;
    -\-color-value: 255, 255, 255;
    -\-bg-p-shift: -60%;
    -\-text-color: 000;
    -\-violet: #7c3aed;
    -\-text: #1d2330;
    -\-muted: #9097a3;
    -\-border: #eceef2;
    -\-card-radius: 20px;
    -\-toggle-space: 5px;
    /* nav baer height and space shifting under it*/
    -\-pio-navbar-h: 78px;
    /* titles size in idex page */
    /* general */
    -\-pio-home-title-scale: 1;
    /* specific titles */
    -\-pio-title-scale-hero: 1;
    -\-pio-title-scale-offers: 0.65;
    -\-pio-title-scale-popular: 0.65;
    -\-pio-title-scale-popular-tabs: 1;
    -\-pio-title-scale-schedule: 0.65;
    -\-pio-title-scale-programs: 0.65;
    -\-pio-title-scale-library: 0.65;
    -\-pio-title-scale-business: 0.65;
    -\-pio-title-scale-testimonials: 0.65;
    -\-pio-title-scale-accreditations: 0.65;
    /* index page sections: every section's eyebrow, heading and text
       (applied at the end of this file, "V2 index page - section typography") */
    -\-pio-section-eyebrow-size: 20px;
    -\-pio-section-heading-size: 38px;
    -\-pio-section-heading-weight: 600;
    -\-pio-section-text-size: 16px;
    -\-pio-section-text-weight: normal;
    -\-pio-home-space-top: clamp(20px, 2.0vw, 80px);
    -\-pio-home-space-bottom: clamp(24px, calc(18.9px + 1.307vw), 44px);
    -\-pio-inner-hero-title: 3rem;
    -\-pio-inner-hero-art: clamp(20rem, calc(1.75rem + 29.4vw), 27.5rem);
    -\-pio-inner-hero-pad-bottom: 84px;
}

* {
    font-family: "Poppins", sans-serif;
}

input::placeholder {
    font-family: "Poppins", sans-serif;
}

body[dir="ltr"] p::first-letter,
body[dir="ltr"] li::first-letter {
    text-transform: capitalize;
}

h1, h2, h3, h4, h5, h6 {
    text-transform: capitalize;
}

a {
    cursor: pointer;
}

.text-black {
    color: var(-\-bs-black);
}

.two-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.primary-color {
    color: var(-\-pio-blue-color);
}

.bg-primary-pio {
    background: var(-\-pio-primary-color)
}

pio-swiper swiper-container.mySwiper img {
    height: 100%;
    width: 100%;
    /* contain, not cover: the WHOLE illustration has to be visible. cover fills
       the card but crops whatever does not match the square slot - with the
       current 300x450 files that was about a third of the height, clipping the
       top and bottom points off the diamond. contain scales the image down
       until it fits instead. */
    object-fit: contain;
    /* block kills the inline baseline gap that left a sliver under the image */
    display: block;
    /* Corners follow the slide. Set on the IMAGE rather than left to
       overflow:hidden on the parent, because .mySwiper uses effect="cube":
       every slide lives in a 3D transform context where ancestor clipping is
       unreliable, so the radius has to be on the painted element.
       NOT `inherit` - swiper puts a wrapper between the slide and the image, so
       inherit resolves against that wrapper and comes out 0. The value is a
       custom property declared on .mySwiper so the slide and the image cannot
       drift apart. */
    border-radius: var(-\-pio-swiper-radius, 18px);
}

pio-swiper swiper-container.mySwiper swiper-slide {
    height: 300px;
    width: 300px;
    padding: 0 !important;
}

pio-swiper swiper-container.mySwiper .swiper-wrapper {
    width: 100% !important;
    height: 100% !important;
}

/* Constant-speed rotation.
   The cube runs on autoplay-delay="0" with a 7s speed (see the template in
   cardshand_swiper_directive.js) so it never stops turning. Swiper's default
   easing for a slide transition is ease-out, which is right when each turn is
   a discrete move between two resting faces - but with no rest between them it
   makes the cube surge and slow once per face, so the rotation reads as
   stop-start even though it never actually stops.
   linear is what turns those back-to-back transitions into one even rotation.
   The shadow elements are included because swiper transitions them on the same
   clock, and leaving them eased makes the shadow drift out of step with the
   cube casting it. */
pio-swiper swiper-container.mySwiper .swiper-wrapper,
pio-swiper swiper-container.mySwiper swiper-slide,
pio-swiper swiper-container.mySwiper .swiper-cube-shadow {
    transition-timing-function: linear !important;
}

.black-text {
    color: #000;
}

.filter-grayscale {
    filter: grayscale(100%);
}

/* Sentence case, against the site-wide `h1..h6 { text-transform: capitalize }`
   near the top of this file. That rule turned the sentence into "Academy Is A
   Licensed Testing Center By:", which is not how the design reads it. Scoped to
   this one heading so no other heading changes. */
.pio-testing-heading {
    text-transform: none;
}

/* "Academy is a licensed testing center by" logos on AboutUsV2.
   Sized by height so the three read as one set: the source files are
   385x119, 559x115 and 223x143, so any width-based sizing (the col-md-2 +
   img-fluid this replaced) lands them at wildly different heights. */
.pio-testing-logos img {
    height: 2.5rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* The logo strip is meant to sit a little wider than the title, so it has to
   track the title's size. .pio-hero-heading is NOT one curve: responsive.css
   overrides it at 1200px and again at 1400px, where it jumps to 2.75rem and the
   title suddenly measures ~904px. With a single fixed logo height the strip was
   674px there - a quarter NARROWER than the title - while still being wider than
   it below 1400px. These steps mirror the heading's own breakpoints and are
   tuned to keep the strip at roughly 1.05-1.10x the title's text width. */
@media (min-width: 768px) {
    .pio-testing-logos img {
        height: 3rem;
    }
}

@media (min-width: 1200px) {
    .pio-testing-logos img {
        height: 3.25rem;
    }
}

@media (min-width: 1400px) {
    .pio-testing-logos img {
        height: 5.25rem;
    }
}

/* ICDL is a stacked lockup - mark on top, "The Digital Skills Standard" beneath -
   so at the same box height as the two wordmarks its letterforms come out far
   smaller and it reads as the odd one out. The extra height matches the optical
   balance in the design. For mathematically identical boxes instead, delete this
   rule and the pio-logo-stacked class on the img. */
.pio-testing-logos img.pio-logo-stacked {
    height: 3.5rem;
}

@media (min-width: 768px) {
    .pio-testing-logos img.pio-logo-stacked {
        height: 4.25rem;
    }
}

@media (min-width: 1200px) {
    .pio-testing-logos img.pio-logo-stacked {
        height: 4.65rem;
    }
}

@media (min-width: 1400px) {
    .pio-testing-logos img.pio-logo-stacked {
        height: 7.5rem;
    }
}

.certificate.optional .img-container {
    position: relative;
    display: inline-block;
}

    .certificate.optional .img-container::after {
        content: '';
        position: absolute;
        z-index: 3;
        left: -4px;
        bottom: -4px;
        width: 90px;
        height: 90px;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url(../../assets/optionalCertificate.svg);
    }

.invalid-feedback,
.passwordComplexityPopover {
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    z-index: 0;
}

.pio-custom-paragraph {
    font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
}

/* remove this */
pio-swiper .mySwiper {
    height: auto !important;
}

/* swipers cards with the shadow instaed of border */
.swiper-box-shadow .card {
    border: none !important;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.under-line {
    height: 1px;
    width: 50%;
    background: #bdbdbd;
}

.no-scroll {
    overflow: hidden;
}

/* Compensate for fixed header on internal pages. Same token the bar sizes
   itself from, so the reserve and the bar can never drift apart - they were
   120 against 135 before, which is why hero copy sat under the nav row. The
   <=991px override below is separate on purpose: there the bar is auto-height
   and the token does not describe it. */
main {
    padding-top: var(-\-pio-navbar-h);
    padding-bottom: var(-\-pio-section-space);
}

.fs-title-desc {
    font-size: clamp(1.1rem, calc(1.0296rem + 0.3005vw), 1.3rem) !important;
}

.description2 {
    font-size: clamp(0.6206rem, calc(0.597rem + 0.1005vw), 0.6875rem);
}

.disabled {
    color: #ababab80;
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
}

    .disabled.activeEnroll {
        color: var(-\-pio-blue-color);
    }

.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    background-color: transparent;
    border-color: transparent;
}

.subjects-dropdown .btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    border-color: #dee2e6;
}

.signup-sub,
.signin-sub {
    color: var(-\-pio-blue-color);
}

.card-img-top {
    height: 160px;
    max-width: 100%;
}

.dropdown-menu {
    text-align: unset;
}

.pio-btn {
    width: max-content;
    border-radius: 8px;
    padding: 5px 5px 5px 5px;
    font-size: clamp(0.6206rem, calc(0.597rem + 0.1005vw), 0.6875rem);
    color: #fff;
}

.pio-btn-socials {
    border-radius: 50px;
    border: 1px solid rgba(51, 51, 51, 0.50);
    background: #F5F5F5;
    color: #000;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    padding: 0.65rem;
}

    .pio-btn-socials:hover {
        background: rgba(245,245,245, 0.4);
        border: 1px solid rgba(51, 51, 51, 0.4);
    }

    .pio-btn-socials span {
        font-size: clamp(0.7545rem, calc(0.7209rem + 0.1434vw), 0.85rem);
    }

.pio-btn-signIn, .pio-register-now-btn {
    background: var(-\-pio-primary-color) !important;
}

.pio-add-to-catd-btn {
    transition: background 0.4s ease-in-out
}

.recorded .pio-add-to-catd-btn {
    background: var(-\-pio-blue-color) !important;
}

.interactive .pio-add-to-catd-btn {
    background: var(-\-pio-primary-color) !important;
}

.pio-register-now-btn, .pio-add-to-catd-btn {
    transition: none !important;
}

    .pio-register-now-btn:hover, .pio-add-to-catd-btn:hover {
        background: var(-\-pio-primary-color) rgba(255,255,255,0.1);
    }

.primary-color {
    transition: color 0.4s ease-in-out
}

.interactive .primary-color {
    color: var(-\-pio-primary-color) !important;
}

.recorded .primary-color {
    color: var(-\-pio-blue-color) !important;
}

path {
    transition: stroke 0.4s ease-in-out;
}

.interactive path, .interactive circle {
    stroke: var(-\-pio-primary-color) !important;
}

.recorded path, .recorded circle {
    stroke: var(-\-pio-blue-color) !important;
}

.interactive .starH path {
    fill: var(-\-pio-primary-color) !important;
}

.recorded .starH path {
    fill: var(-\-pio-blue-color) !important;
}

.pio-btn-signUp {
    border: 1px solid var(-\-pio-primary-color) !important;
    color: #7b7b7b;
    font-weight: 600;
}

.interactive .pio-btn-signUp {
    border: 1px solid var(-\-pio-primary-color) !important;
    color: var(-\-pio-primary-color);
    font-weight: 600;
}

    .interactive .pio-btn-signUp:hover {
        background: var(-\-pio-primary-color)
    }

.recorded .pio-btn-signUp {
    border: 1px solid var(-\-pio-blue-color) !important;
    color: var(-\-pio-blue-color);
    font-weight: 600;
}

    .recorded .pio-btn-signUp:hover {
        background: var(-\-pio-blue-color) !important;
    }

.pio-btn:hover,
.pio-btn-signIn:hover,
.pio-btn-signUp:hover,
.pio-register-now-btn:hover,
.pio-add-to-catd-btn:hover {
    opacity: 0.7 !important;
    color: white;
}

.pio-btn-signUp:hover {
    background: var(-\-pio-primary-color) !important;
    opacity: 1 !important;
}

/* Prevent native select options from inheriting the hover background color */
.pio-select-btn option {
    background-color: #fff;
    color: #000;
}

/* Hero section */
/* Space-themed hero background scene ── */
.hero-section-dark {
    background: #070b1a;
}

/* Gradient at the bottom of the hero scroll area: smooth dark transition */

.pio-hero-scene {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: #070b1a;
}

    /* Black gradient at the bottom of the scene — covers the moon's lower edge */
    /*.pio-hero-scene::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 15%;
        background: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
        z-index: 6;
        pointer-events: none;
    }*/

/* shared layer base */
.hero-layer {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

/* 1) starry sky – fills the whole scene */
.hero-space {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Meteor Effect */
.meteors {
    position: absolute;
    inset: 0;
    z-index: 0; /* behind earth */
    overflow: hidden;
    pointer-events: none;
    transform: translateY(var(-\-scroll, 0e0px)); /* move with space */
}

.meteor {
    position: absolute;
    width: 250px;
    height: 2px;
    background: linear-gradient(90deg, #fff, transparent);
    animation: shootingStar linear infinite;
    opacity: 0;
    border-radius: 50%;
    transform-origin: left;
}

    .meteor::before {
        content: '';
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 15px 3px rgba(255, 255, 255, 0.9);
        left: 0;
        top: -2px;
    }

@keyframes shootingStar {
    0% {
        transform: rotate(-35deg) translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    60% {
        opacity: 0;
    }

    100% {
        transform: rotate(-35deg) translateX(-1500px);
        opacity: 0;
    }
}

/* Randomized delays and positions */
.m1 {
    top: 15%;
    left: 85%;
    animation-duration: 3.5s;
    animation-delay: 1s;
}

.m2 {
    top: -5%;
    left: 50%;
    animation-duration: 4s;
    animation-delay: 4.5s;
}

.m3 {
    top: 35%;
    left: 105%;
    animation-duration: 2.8s;
    animation-delay: 8s;
}

.m4 {
    top: 10%;
    left: 120%;
    animation-duration: 3.2s;
    animation-delay: 11.5s;
}

.m5 {
    top: 25%;
    left: 75%;
    animation-duration: 3.6s;
    animation-delay: 15s;
}

/* 2.5) weird planet – moves down SECOND (Phase 2) */
.hero-weird-planet {
    width: clamp(350px, 55vw, 800px);
    height: auto;
    bottom: 0%;
    inset-inline-end: 0%;
    z-index: 2;
    opacity: 0.85;
    transition: transform 1.2s ease-in-out, opacity 1.2s ease-in-out;
    /* Static starting position with parallax drift downward */
    transform: translate(0, calc(var(-\-planet-parallax, 0e0px) + var(-\-hero-wiggle, 0e0px) * -0.3)) scaleX(-1);
}

/* Weird planet exits at Phase 3 (during section transition, slower for parallax) */
.hero-section-dark[data-animation-phase="3"] .hero-weird-planet {
    transform: translate(0, 100vh) scaleX(-1);
    opacity: 0;
    transition: transform 1.4s ease-in-out, opacity 1.4s ease-in-out;
}

/* 2) earth planet – moves down FIRST (Phase 1) */
.hero-earth {
    width: clamp(300px, 42vw, 1020px);
    height: auto;
    bottom: 5%;
    inset-inline-start: 2%;
    z-index: 1;
    opacity: 1;
    transition: transform 1.2s ease-in-out, opacity 1.2s ease-in-out;
    /* Static starting position with parallax drift downward */
    transform: translateY(calc(var(-\-earth-parallax, 0e0px) + var(-\-hero-wiggle, 0e0px) * 0.4));
}

    /* Rotation on inner image only — keeps exit direction consistent */
    .hero-earth .hero-earth-inner {
        width: 100%;
        height: auto;
        position: relative;
        animation: spinEarth 120s linear infinite;
    }

/* Earth exits at Phase 3 (during section transition, faster for parallax) */
.hero-section-dark[data-animation-phase="3"] .hero-earth {
    transform: translate(0, 100vh);
    opacity: 0;
    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
}

@keyframes spinEarth {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}

/* 3) moon surface – bottom full-width */
.hero-moon {
    bottom: 0;
    inset-inline-start: 0;
    width: 100%;
    height: auto;
    min-height: 18%;
    object-fit: cover;
    object-position: top center;
    z-index: 2;
}

/* Spaceman Shadow - Precise alignment */
.hero-spaceman-shadow {
    width: clamp(160px, 30vw, 320px);
    height: clamp(60px, 10vw, 120px);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 40%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
    bottom: -6.5%;
    inset-inline-end: 2%;
    z-index: 3;
    transform: translateX(-8%);
    opacity: 0.8;
    transition: transform 0.6s cubic-bezier(0, 0, 0.2, 1);
}

/* 4) spaceman reading – Massive Hero Scale */
.hero-spaceman {
    width: clamp(160px, 30vw, 320px);
    height: auto;
    bottom: -5%;
    inset-inline-end: 2%;
    z-index: 3;
    -webkit-mask-image: linear-gradient(to top, transparent, black 5%, black 100%);
    mask-image: linear-gradient(to top, transparent, black 5%, black 100%);
    transform: scaleX(-1);
    transition: transform 0.6s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s ease;
}

/* ── Phase 4: Camera dive effect ──
   Instead of scaling individual elements (which breaks transforms like scaleX),
   we move the ENTIRE scene upward as one unit. This simulates the camera
   descending/diving past the moon into the next section.                       */
.pio-hero-scene {
    transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.hero-section-dark[data-animation-phase="3"] .pio-hero-scene {
    transform: translateY(-100%);
}

/* text sits above everything */
.pio-hero-scene .pio-hero {
    position: static;
    color: #fff;
}

/* Hero Text Layout & Typography */
.hero-scroll-text {
    opacity: 1 !important;
    transform: none !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    max-width: 580px !important;
    display: flex !important;
    flex-direction: column !important;
}

.hero-scroll-text {
    inset-inline-start: 10% !important;
    inset-inline-end: auto !important;
    align-items: flex-start !important;
    text-align: start !important;
}

    .hero-scroll-text h3 {
        font-size: clamp(1.1rem, calc(0.9592rem + 0.6009vw), 1.5rem) !important;
        font-weight: 700 !important;
        color: var(-\-pio-blue-color) !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        margin-bottom: 0.5rem !important;
        text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
    }

    .hero-scroll-text h1 {
        font-size: clamp(2.2rem, calc(1.7775rem + 1.8028vw), 3.4rem) !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        line-height: 1.25 !important;
        text-shadow: 0 4px 25px rgba(0, 0, 0, 0.75) !important;
        margin: 0 !important;
    }

.pio-hero-scene .pio-heading,
.pio-hero-scene .pio-hero-content {
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.pio-hero {
    /* Vertically center the content in the hero */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}

.pio-hero-heading {
    font-size: clamp(1.487rem, calc(1.3504rem + 0.5829vw), 1.875rem);
}

.pio-hero-sub-heading {
    font-size: clamp(1.2415rem, calc(1.1505rem + 0.3883vw), 1.5rem);
}

.pio-heading {
    font-weight: 700;
}

.pio-hero-content {
    width: 90%;
    font-weight: 600;
}

/* Typewriter Effect */
.tw-word {
    opacity: 0;
    display: inline;
    transition: opacity 0.12s ease;
}

    .tw-word.tw-revealed {
        opacity: 1;
    }

/* Scroll Transition: Phase-based smooth triggered transitions */

/* Text: hidden by default, appears at Phase 2 */
.hero-scroll-text {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease-in-out, transform 1s ease-in-out;
}

.hero-section-dark[data-animation-phase="1"] .hero-scroll-text,
.hero-section-dark[data-animation-phase="2"] .hero-scroll-text,
.hero-section-dark[data-animation-phase="3"] .hero-scroll-text {
    opacity: 1;
    transform: translateY(0);
}

/* Logo: fades out (Phase 5) */
.hero-scroll-logo {
    opacity: 1;
    transform: scale(1);
    max-width: 500px;
    height: auto;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.hero-section-dark[data-animation-phase="1"] .hero-scroll-logo,
.hero-section-dark[data-animation-phase="2"] .hero-scroll-logo,
.hero-section-dark[data-animation-phase="3"] .hero-scroll-logo {
    opacity: 0;
    transform: translateY(-100vh);
}

/* Hero Overlay: Gradient transition to solid cover */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 11, 26, 0.8) 0%, rgba(7, 11, 26, 0.4) 40%, transparent 100%);
    z-index: 4;
    transition: background 1.5s cubic-bezier(0.4, 0, 0.2, 1), z-index 1.5s;
    pointer-events: none;
}

.hero-section-dark[data-animation-phase="3"] .hero-overlay {
    background: #070b1a !important; /* Matches space color to cover scene */
    z-index: 10;
    pointer-events: all;
}

.signature-section {
    background: #ffffff;
    color: #000000;
}

    .signature-section,
    .signature-section p,
    .signature-section h1,
    .signature-section h2,
    .signature-section h3 {
        color: inherit;
    }

.hero-title {
    font-size: clamp(2.2508rem, calc(1.8109rem + 1.8768vw), 3.5rem);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    width: 100%;
}

/* Section below: slides up from dark overlay in Phase 4 */

.hero-section-dark[data-animation-phase="3"] + * {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Signature Programs */
.section-padding {
    padding-block: var(-\-pio-section-space, 1.5rem) 0;
}

/* ── Cinematic Section Entrance ── */
.sig-programs.sig-visible > div:first-child {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}

.sig-cards {
    display: flex;
    gap: 20px;
    width: 100%;
}

    .sig-cards .card {
        position: relative;
        background: lightgray 50%;
        height: 500px;
        border: none;
        border-radius: 12px;
        flex: 1 1 0;
        overflow: hidden;
        transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), flex 0.5s ease-in-out;
    }

/* When section becomes visible, cards rise in with stagger */
.sig-programs.sig-cards-visible .sig-cards .card {
    opacity: 1;
    /* Expand over 0.5s, but WAIT 0.2s first! */
    transition: flex 0.5s ease-in-out 0.2s;
}

    .sig-programs.sig-cards-visible .sig-cards .card:nth-child(1) {
        transition-delay: 0.2s;
    }

    .sig-programs.sig-cards-visible .sig-cards .card:nth-child(2) {
        transition-delay: 0.35s;
    }

    .sig-programs.sig-cards-visible .sig-cards .card:nth-child(3) {
        transition-delay: 0.5s;
    }

    .sig-programs.sig-cards-visible .sig-cards .card:nth-child(4) {
        transition-delay: 0.65s;
    }

    .sig-programs.sig-cards-visible .sig-cards .card:nth-child(5) {
        transition-delay: 0.8s;
    }

.sig-cards .card img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.sig-cards .card:hover {
    flex: 3 1 0;
}

    .sig-cards .card:hover .card-content {
        display: flex;
        justify-content: space-between;
        position: absolute;
        bottom: 0;
        opacity: 1;
        transition: opacity 0.3s ease-in-out;
    }

.card-content {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    transition: opacity 0.3s ease-in-out 0.5s;
}

/* Mobile Signature Cards */
.sig-mobile-card {
    position: relative;
    height: 350px;
    width: 100%;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    color: #fff;
}

    .sig-mobile-card img.sig-bg {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 12px;
        opacity: 0.8;
    }

    .sig-mobile-card .card-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 1.5rem 1rem;
        opacity: 1;
        z-index: 2;
    }

/* busisness services */
.pio-service-heading {
    font-size: clamp(1.3675rem, calc(1.2549rem + 0.4807vw), 1.6875rem);
    font-weight: 600;
}

/* Intro copy under a section heading. Unbounded it runs the full page width,
   which on a wide desktop is a ~200-character line - far past the ~75 the eye
   tracks comfortably. Wraps at three quarters from tablet, two thirds on large
   screens; full width stays on phones where there is nothing to give back.
   max-width is direction-agnostic, so RTL hugs the right edge on its own. */
.pio-service-intro {
    max-width: 100%;
}

@media (min-width: 768px) {
    .pio-service-intro {
        max-width: 75%;
    }
}

@media (min-width: 1200px) {
    .pio-service-intro {
        max-width: 66%;
    }
}

.services-card-mobile {
    max-width: 8rem;
    height: 10rem;
    padding-block: .5rem;
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    padding-inline: .8rem;
    font-weight: 600;
    border: none;
}

    .services-card-mobile h6 {
        font-size: clamp(0.5678rem, calc(0.5476rem + 0.086vw), 0.625rem);
    }

    .services-card-mobile p {
        font-size: clamp(0.46rem, calc(0.4459rem + 0.0601vw), 0.5rem);
        margin-block-end: 0;
    }

/* training library */
.pio-training-library {
    background: var(-\-pio-primary-color);
}

.pio-training-library.pio-training-band-mobile {
    -\-pio-training-tail: 3.5rem;
    -\-pio-training-fade: calc(var(-\-pio-training-tail) + 1.5rem);
    -\-pio-training-fade-to: transparent;
    padding-bottom: var(-\-pio-training-tail);
    background: linear-gradient(to bottom,
        var(-\-pio-primary-color) calc(100% - var(-\-pio-training-fade)),
        color-mix(in srgb, var(-\-pio-primary-color) 74%, var(-\-pio-training-fade-to)) calc(100% - var(-\-pio-training-fade) * .81),
        color-mix(in srgb, var(-\-pio-primary-color) 54%, var(-\-pio-training-fade-to)) calc(100% - var(-\-pio-training-fade) * .66),
        color-mix(in srgb, var(-\-pio-primary-color) 38%, var(-\-pio-training-fade-to)) calc(100% - var(-\-pio-training-fade) * .53),
        color-mix(in srgb, var(-\-pio-primary-color) 19%, var(-\-pio-training-fade-to)) calc(100% - var(-\-pio-training-fade) * .35),
        color-mix(in srgb, var(-\-pio-primary-color) 7.5%, var(-\-pio-training-fade-to)) calc(100% - var(-\-pio-training-fade) * .2),
        color-mix(in srgb, var(-\-pio-primary-color) 2%, var(-\-pio-training-fade-to)) calc(100% - var(-\-pio-training-fade) * .09),
        var(-\-pio-training-fade-to) 100%);
}

body[data-bs-theme="dark"] .pio-training-band-mobile {
    -\-pio-training-fade-to: var(-\-bs-white);
}

    .pio-training-band-mobile .training-Swiper {
        align-self: stretch;
        width: 100%;
        -\-swiper-pagination-bullet-inactive-opacity: .5;
    }

        .pio-training-band-mobile .training-Swiper swiper-slide {
            width: 100% !important;
        }

.pio-inner-training {
    -\-pio-training-panel-bg: var(-\-pio-blue-color);
    position: relative;
    isolation: isolate;
    padding-block: 1rem;
    padding-inline: 0 1rem;
    background: transparent;
    border-radius: 0;
}

    .pio-inner-training::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset-block: 0;
        inset-inline-end: 0;
        inset-inline-start: -100vw;
        background: #111111;
        border-start-end-radius: 24px;
    }

    .pio-inner-training *, .pio-inner-training span, .pio-inner-training .pio-stroke-text span {
        color: #ffffff;
    }

.training-heading {
    font-size: clamp(0.8246rem, calc(0.7849rem + 0.1696vw), 0.9375rem);
    color: #fff;
    font-weight: 600;
}

.pio-inner-training h4 {
    font-size: clamp(1.0635rem, calc(0.9978rem + 0.2802vw), 1.25rem);
    font-weight: 600;
}

.pio-inner-training .pio-training-paragraph {
    font-size: clamp(0.6206rem, calc(0.597rem + 0.1005vw), 0.6875rem);
}

.pio-inner-training p span {
    font-size: clamp(1.0635rem, calc(0.9978rem + 0.2802vw), 1.25rem);
}

.pio-stroke-text span {
    color: white;
    font-weight: 600;
}

.pio-training-video {
    inset-inline-end: 1.5rem;
    bottom: 50px;
    z-index: 1;
}

.pio-training-item-text {
    width: 50%;
}

    .pio-training-video video {
        border-radius: 24px;
    }

.pio-video-wrapper .pio-lazy-video {
    display: block;
    opacity: 0;
    transition: opacity .35s ease;
}

/* shown once the video is ready */
.pio-video-wrapper.is-loaded .pio-lazy-video {
    opacity: 1;
}

.pio-video-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .05);
    border-radius: 1.5rem; /* matches rounded-5 */
    z-index: 2;
}

/* hide spinner after load */
.pio-video-wrapper.is-loaded .pio-video-spinner {
    display: none;
}

.training-inner-heading {
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
}

.description,
.text-size {
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
}

.smart-training-cards .card {
    background: #F5F5F5;
    border: 1px solid #F5F5F5;
}

.card-title.two-lines {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #000;
}

.pio-title-tip {
    -\-bs-tooltip-max-width: min(20rem, 80vw);
    -\-bs-tooltip-padding-x: 0.75rem;
    -\-bs-tooltip-padding-y: 0.5rem;
    -\-bs-tooltip-font-size: 0.8125rem;
    -\-bs-tooltip-border-radius: 0.5rem;
    line-height: 1.5;
}

/* courses section */
.courses-section .card,
.pio-packages .card,
.pio-webinar-cards .card,
.crew-cards,
.pio-b2b-form,
.pio-cart-card {
    width: 100%;
    border-radius: 12px;
    border: 1.5px solid #00000000;
}

.diploma-bundles .card {
    background: #ffffff;
}

.heart-svg {
    display: flex;
    align-items: center;
    width: 35px;
    height: 35px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 23px;
    border: none;
    top: 6px;
    left: 8px;
}

    .heart-svg svg path:hover {
        fill: #FF5F5F;
    }

.courses-section .card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
/*diploma cards*/

.go-corner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 35px;
    height: 35px;
    overflow: hidden;
    top: 0;
    right: 0;
    background-color: var(-\-pio-blue-color);
    border-radius: 0 4px 0 32px;
}

.card1.activeBundle {
    border: 3px solid var(-\-pio-blue-color);
    box-shadow: 0 0 3px 15px var(-\-pio-blue-color);
}

.diploma-bundles .card.activeBundle {
    box-shadow: 0px 0px 5px 4px color-mix(in srgb, var(-\-pio-blue-color) 50%, transparent);
    background: var(-\-pio-blue-color);
}

.diploma-bundles .card:hover {
    box-shadow: 0px 0px 5px 4px color-mix(in srgb, var(-\-pio-blue-color) 50%, transparent);
}

.card .card-title {
    color: #000;
}

.card1.activeBundle .go-corner {
    background: var(-\-bs-white)
}

.pio-schedule-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    color: var(-\-pio-blue-color);
    margin-top: 4px;
}

swiper-slide {
    padding: 10px
}

    swiper-slide .badge {
        z-index: 1;
    }

.card1.activeBundle .go-arrow svg path {
    stroke: var(-\-bs-black)
}

.go-arrow {
    margin-top: -4px;
    margin-right: -4px;
    color: white;
    font-family: courier, sans-serif;
}

.card1 {
    display: block;
    position: relative;
    background-color: #f2f8f9;
    border-radius: 4px;
    padding: 32px 24px;
    text-decoration: none;
    z-index: 0;
    overflow: hidden;
}

    .card1::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -16px;
        right: -16px;
        background: var(-\-pio-blue-color);
        height: 32px;
        width: 32px;
        border-radius: 32px;
        transform: scale(1);
        transform-origin: 50% 50%;
        transition: transform 0.25s ease-out;
    }

    .card1.activeBundle::before {
        background: var(-\-bs-white);
    }

.diploma-bundles .card.activeBundle:hover p,
.diploma-bundles .card.activeBundle:hover .price,
.diploma-bundles .card.activeBundle:hover h5 {
    color: #000 !important;
}

.card1:hover::before {
    transform: scale(30);
}

.card1:hover .card-body p,
.card1:hover .card-body span,
.card1:hover .card-body h5 {
    transition: all 0.3s ease-out;
    color: #ffffff;
}

.diploma-bundles .card.activeBundle {
    box-shadow: 0px 0px 5px 1px color-mix(in srgb, var(-\-pio-blue-color) 50%, transparent);
    background: var(-\-pio-blue-color);
}

    .diploma-bundles .card.activeBundle p, .diploma-bundles .card.activeBundle .price, .diploma-bundles .card.activeBundle h5 {
        color: #ffffff
    }

.diploma-info-tabs button,
.diploma-info-tabs select {
    border-radius: 20px;
    border: 1px solid var(-\-pio-blue-color) !important;
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    color: #000;
}

.diploma-info-tabs select {
    width: 200px;
}

.diploma-info-tabs button:hover {
    background: var(-\-pio-blue-color);
    color: #fff;
}

.diploma-info-tabs button.active {
    background: var(-\-pio-blue-color) !important;
    box-shadow: var(-\-pio-blue-color) 0px 1px 3px;
    color: #fff;
}

.diplomaBundleSwiper .card {
    position: relative;
    display: inline-block;
    transition: 0.5s;
    overflow: hidden;
}

    /*selected( active ) diploma animation*/
    .diplomaBundleSwiper .card span.animation-stroke {
        position: absolute;
        display: block;
    }

    .diplomaBundleSwiper .card.activeBundle .animation-stroke:nth-child(1) {
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, transparent, #FFFFFF);
        animation: animate1 3s linear infinite;
        border-radius: 0 5px 5px 0;
    }

.diplomaBundleSwiper .description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .diplomaBundleSwiper .description * {
        pointer-events: none; /* Disable clicks */
    }

@keyframes animate1 {
    0% {
        left: -100%;
    }

    50%, 100% {
        left: 100%;
    }
}

.diplomaBundleSwiper .card.activeBundle .animation-stroke:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #FFFFFF);
    animation: animate2 3s linear infinite;
    border-radius: 0 0 5px 5px;
    animation-delay: 0.75s;
}

@keyframes animate2 {
    0% {
        top: -100%;
    }

    50%, 100% {
        top: 100%;
    }
}

.diplomaBundleSwiper .card.activeBundle .animation-stroke:nth-child(3) {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent, #FFFFFF);
    animation: animate3 3s linear infinite;
    border-radius: 5px 0 0 5px;
    animation-delay: 1.5s;
}

@keyframes animate3 {
    0% {
        right: -100%;
    }

    50%, 100% {
        right: 100%;
    }
}

.diplomaBundleSwiper .card.activeBundle .animation-stroke:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #FFFFFF);
    animation: animate4 3s linear infinite;
    border-radius: 5px 5px 0 0;
    animation-delay: 2.25s;
}

.university-logo {
    height: 90px;
    object-fit: contain; /* to mantain ratio */
    width: 100%;
}

@keyframes animate4 {
    0% {
        bottom: -100%;
    }

    50%, 100% {
        bottom: 100%;
    }
}

.diplomaBundleSwiper .card:not(.activeBundle) .animation-stroke:nth-child(1) {
    display: none
}

.courses-section .card .card-body a .card-title {
    color: #000;
    text-align: start;
}

    .courses-section .card .card-body a .card-title:hover {
        color: var(-\-pio-primary-color);
    }

/* accredit*/
/* Holds the accreditation logo grid ~150px narrower than the container it sits
   in, and centres it. margin-inline (not margin-left/right) so it mirrors in
   Arabic without a second rule, and auto on both sides is what does the
   centring - the row previously carried mx-0, which pins both margins to an
   explicit 0 and auto can never beat that.

   It is a wrapper rather than a rule on .accredit itself because .row depends
   on its own negative inline margins to cancel the container's padding. Setting
   max-width and auto margins on the row would overwrite those and pull every
   cell 12px in from the grid lines.

   Constrained from lg only: 150px off a phone-width container would leave the
   eight logos in a ribbon barely wide enough to read. */
.accredit-wrap {
    margin-inline: auto;
}

@media (min-width: 992px) {
    .accredit-wrap {
        max-width: calc(100% - 150px);
    }
}

.accredit .accredit-svgs {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.5px solid;
    border-top: none;
    height: 150px;
    background: #fff;
}

    .accredit .accredit-svgs:nth-child(1),
    .accredit .accredit-svgs:nth-child(5),
    .accredit .accredit-svgs:nth-child(7),
    .accredit .accredit-svgs:nth-child(3) {
        border-inline-start: none;
    }

    .accredit .accredit-svgs:nth-child(4),
    .accredit .accredit-svgs:nth-child(8),
    .accredit .accredit-svgs:nth-child(2),
    .accredit .accredit-svgs:nth-child(6) {
        border-inline-end: none;
    }

    .accredit .accredit-svgs:nth-child(7),
    .accredit .accredit-svgs:nth-child(8) {
        border-bottom: none;
    }

/* swipers */
/* to rember: here important because of swiper auto implmention of inline width*/
swiper-slide {
    display: flex;
    justify-content: center;
    width: 320px !important;
}

/* swiper cards in index page */
.buisness-bg swiper-slide {
    width: 100% !important;
}

/* swiper diplomas cards in*/
.diplomaBundleSwiper swiper-slide {
    width: 280px !important;
}

/* swiper B2B */
/* Grey training captions from the B2B hero design, in either theme. */
.pio-b2b-hero-caption {
    width: 100%;
    padding: 1rem;
    border-radius: 1rem 1rem 0 0;
    background-color: #d9d9d9;
    color: #111;
}

.pio-b2b-hero-caption > h6 {
    margin-bottom: .5rem;
    color: #111;
}

body .pio-b2b-header .content-wrapper .pio-b2b-hero-caption > p.description {
    color: #666;
}

/* Keep the inquiry panel clear of the fixed navbar after a CTA jump. */
#b2b-inquiry-form {
    scroll-margin-top: 160px;
}

.b2b-header-swiper swiper-slide {
    width: 100% !important;
}

.b2b-header-swiper,
.b2b-header-swiper2 {
    -\-swiper-pagination-bullet-size: 8px;
    -\-swiper-pagination-bullet-horizontal-gap: 5px;
    /* 1, not swiper's default .4: SIZE is the only thing that marks the active
       dot here - colour and opacity stay identical across all of them */
    -\-swiper-pagination-bullet-inactive-opacity: 1;
}

/* Flex the row so every dot is centred on one line whatever its size. Swiper
   lays the bullets out as inline-blocks sitting on the text baseline, which
   leaves differently-sized dots hanging at different heights. */
.b2b-header-swiper::part(pagination),
.b2b-header-swiper2::part(pagination) {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* These dots sit ON the B2B hero, which is deliberately the OPPOSITE colour of
   the theme - black in light mode, white in dark. So they cannot follow the
   page's text colour; they follow the hero's. One custom property holds the
   contrasting colour and the two rules below just read it. */
.b2b-header-swiper,
.b2b-header-swiper2 {
    -\-pio-hero-dot: #fff;               /* light theme -> hero is #000 */
}

body[data-bs-theme="dark"] .b2b-header-swiper,
body[data-bs-theme="dark"] .b2b-header-swiper2 {
    -\-pio-hero-dot: #111;               /* dark theme -> hero is #fff */
}

    .b2b-header-swiper::part(bullet),
    .b2b-header-swiper2::part(bullet) {
        background: var(-\-pio-hero-dot);
        border: none;
        box-shadow: none;
        outline: none;
        opacity: 1;
        /* belt and braces with the flex row above, for the inline-block
           fallback if a swiper build does not expose the pagination part */
        vertical-align: middle;
        flex: 0 0 auto;
        transition: transform .25s ease;
    }

    /* The active dot is scaled rather than given a bigger width/height: the
       bullets are inline-block, so changing their box size would shift the row
       and knock the smaller ones off the shared centre line. transform scales
       about the centre, so the row stays put and the change animates. */
    /* Only the scale differs. Colour, opacity, border and ring are all pinned
       to the same values as the inactive dots - swiper paints its theme colour
       and a focus ring on the active bullet otherwise, which showed up as an
       orange circle around it. */
    .b2b-header-swiper::part(bullet-active),
    .b2b-header-swiper2::part(bullet-active) {
        background: var(-\-pio-hero-dot);
        border: none;
        box-shadow: none;
        outline: none;
        transform: scale(1.4);
        opacity: 1;
    }

.inPersonSwiper swiper-slide {
    width: 100% !important;
}

/* Left unstyled this fell back to swiper's own --swiper-theme-color (#007aff),
   a blue that appears nowhere else on the page. Same treatment as the header
   swiper above, but keyed to this section's accent - the one already on
   .pio-in-person-sub and .pio-in-person-header-line. --pio-blue-color is the
   same in both themes, so this needs no dark-theme counterpart. */
.inPersonSwiper {
    -\-swiper-pagination-bullet-size: 10px;
    -\-swiper-pagination-bullet-horizontal-gap: 5px;
    -\-swiper-pagination-bullet-inactive-opacity: .4;
}

    .inPersonSwiper::part(bullet) {
        background: var(-\-pio-blue-color);
        border: none;
        box-shadow: none;
    }

.mySwiper {
    /* One place for the card's corner rounding - the slide and the <img> inside
       it both read this, see the img rule near the top of this file.
       0 = square corners. Set it to e.g. 18px to round the cards again; both
       elements follow, so they cannot drift apart. */
    -\-pio-swiper-radius: 0e0px;
    scale: 1.2;
    margin-bottom: 3rem;
}

    .mySwiper swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(-\-pio-swiper-radius, 18px);
        /* belt and braces with the img's own radius above - this catches any
           other child, and the corners were square before because the radius
           was declared here with nothing clipping to it */
        overflow: hidden;
        font-size: clamp(1.1539rem, calc(1.0761rem + 0.3321vw), 1.375rem);
        font-weight: bold;
        color: #fff;
        width: 100%;
    }

.mySwiper1,
.mySwiper0,
.mySwiper2,
.mySwiper3,
.swiper-testimonials,
.pio-testi-swiper {
    width: 100%;
    height: 100%;
    margin-inline: 10px;
}

.sigSwiper {
    width: 100%;
    display: block;
}

/* Move Swiper arrows to the bottom left */
swiper-container::part(button-prev),
swiper-container::part(button-next) {
    top: auto;
    bottom: 0;
    width: 40px;
    height: 40px;
    background-color: var(-\-pio-primary-color);
    border-radius: 50%;
    color: white;
}

swiper-container::part(button-prev) {
    left: 10px;
    right: auto;
}

swiper-container::part(button-next) {
    left: 60px;
    right: auto;
}

    /* Make the inner arrow icons smaller */
    swiper-container::part(button-prev)::after,
    swiper-container::part(button-next)::after {
        font-size: clamp(0.8738rem, calc(0.8294rem + 0.1895vw), 1rem);
        font-weight: 800;
    }

.swiper-button-next svg,
.swiper-button-prev svg {
    width: 45% !important;
    height: 45% !important;
}

.signin {
    width: 410px;
    z-index: 1;
}

/* INNER COURSES Page */

/* the line: pull it to the vertical center of the container and put it underneath */

/* the toggle: lift it above the line and give it an opaque background */
.mode-switch {
    position: relative;
    z-index: 2;
    background: #fff; /* or whatever matches your page bg */
}

.mode-switch {
    position: relative;
    z-index: 2;
    background: #fff; /* or whatever matches your page bg */
}

.banner-line {
    height: 10px;
}

.recorded .banner-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    z-index: 1;
    background: var(-\-pio-blue-color);
    transition: all 0.3s ease-in-out;
}

.interactive .banner-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    z-index: 1;
    background: var(-\-pio-primary-color);
    transition: all 0.3s ease-in-out;
}

.recorded .active-frame {
    background-image: linear-gradient(90deg, var(-\-pio-blue-color) 0%, #055386 100%);
    transition: all 0.3s ease-in-out;
}

.interactive .active-frame {
    background-image: linear-gradient(90deg, var(-\-pio-primary-color), var(-\-pio-primary-color));
    transition: all 0.3s ease-in-out;
}

.pio-background-img {
    background: url(../../assets/templatev2/subject1.jpg);
    color: var(-\-bs-black);
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    min-height: 450px;
}

    .pio-background-img > * {
        position: relative;
        z-index: 1; /* Note: Text and children go above the overlay */
    }

    .pio-background-img::before {
        content: "";
        background:
        /* Bottom Shadow (rotated slightly left) */
        /*linear-gradient(var(--rotate-bottom), rgba(var(--color-value), 1) 0%, rgba(var(--color-value), 0.9) 30%, rgba(var(--color-value), 0) 40%),*/
        /* angle; Shadow (rotated slightly left) */
        /*linear-gradient(var(--rotate-angle), rgba(var(--color-value), 1) 0%, rgba(var(--color-value), 0.9) 2%, rgba(var(--color-value), 0) 45%),*/
        /* Your original white base layer */
        linear-gradient(to var(-\-rotate-directional), rgba(var(-\-color-value), 1) 20%, rgba(var(-\-color-value), 0.9) 45%, rgba(var(-\-color-value), 0) 65%);
        position: absolute;
        pointer-events: none;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-repeat: no-repeat;
        background-position: top right;
        z-index: 0;
    }

/* Keep subject headings and descriptions on the opaque side of the hero. */
.header-hero.pio-subject-hero h1.pio-hero-content {
    max-width: 100%;
    line-height: 1.35;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

@media (min-width: 1025px) {
    .header-hero.pio-subject-hero h1.pio-hero-content {
        max-width: 50%;
    }

    .pio-subject-hero::before {
        background: linear-gradient(to var(-\-rotate-directional), rgba(var(-\-color-value), 1) 50%, rgba(var(-\-color-value), .96) 56%, rgba(var(-\-color-value), 0) 76%);
    }
}

.bg-none {
    background: none !important;
}

.diploma-bundles .card .card-body span {
    font-size: clamp(1.0635rem, calc(0.9978rem + 0.2802vw), 1.25rem);
    font-weight: 600;
}

.swiperDescreptionSection {
    max-height: 500px
}

.videoModal .modal-dialog {
    max-width: 1200px; /* Much bigger */
    width: 90%;
    margin: 30px auto;
}

.videoModal .modal-body {
    position: relative;
    padding: 0px;
}

.videoModal .modal-content {
    background-color: transparent;
    border: none;
}

.videoModal .btn-close {
    position: absolute;
    right: -30px;
    top: 0;
}

.pio-info-btn,
.pio-buy-btn {
    min-width: 137px;
}

.center-text,
.text-alignment {
    text-align: center;
}

.vertical-swiper {
    width: 100%;
    height: 400px;
    position: relative;
}

.swiperDescreptionSection swiper-slide.pio-about-course {
    height: 472px;
}

.vertical-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    padding: 20px;
    position: relative;
}

.hero-vid {
    width: 100%;
    border-radius: 24px;
    background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.00) 5.81%), linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.00) 9.58%);
}

/* ─── Promo media: thumbnail → inline video ─── */
.promo-media-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25),
                0 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.4s ease;
}

.promo-media-wrapper:hover {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35),
                0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Thumbnail state */
.promo-thumbnail {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.promo-thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.4s ease;
}

.promo-thumbnail:hover .promo-thumbnail-img {
    transform: scale(1.05);
    filter: brightness(0.75);
}

/* Dark gradient overlay – centers the play button */
.promo-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.45) 100%
    );
    transition: background 0.4s ease;
}

.promo-thumbnail:hover .promo-play-overlay {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0.55) 100%
    );
}

/* Solid play button – uses system mode colors */
.promo-play-btn {
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(-\-pio-blue-color);
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
}

.interactive .promo-play-btn {
    background: var(-\-pio-primary-color);
}

.promo-thumbnail:hover .promo-play-btn {
    transform: scale(1.12);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}

/* Pulse ring animation – same system color */
.promo-play-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(-\-pio-blue-color);
    animation: promo-pulse 2s ease-out infinite;
}

.interactive .promo-play-btn::before {
    border-color: var(-\-pio-primary-color);
}

@keyframes promo-pulse {
    0%   { transform: scale(1);   opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

.promo-play-label {
    color: #fff;
    font-size: clamp(0.7545rem, calc(0.7209rem + 0.1434vw), 0.85rem);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.promo-thumbnail:hover .promo-play-label {
    opacity: 1;
    transform: translateY(0);
}

/* Video player state – same size as thumbnail */
.promo-video-player {
    width: 100%;
    height: 100%;
    overflow: hidden;
    animation: promo-fadeIn 0.5s ease-out;
}

.promo-video-player .hero-vid {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: none;
}

.promo-video-player .hero-vid iframe {
    width: 100%;
    height: 100%;
    border-radius: 0;
    display: block;
}

@keyframes promo-fadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1);    }
}

.courses-hero-padding {
    padding: 0.5rem;
}

.expand-content {
    overflow: hidden;
    transform: translateY(100);
    transition: all 0.4s ease;
    transform-origin: top;
}

    .expand-content.expand {
        transform: translateY(0);
    }

.toggle-container,
.login-type-toggle {
    /* background-color: var(--pio-secondary-color); */
    border-radius: 20px;
    border: 1px solid #ff9600;
    font-size: clamp(0.6206rem, calc(0.597rem + 0.1005vw), 0.6875rem) !important;
    width: 160px;
    position: relative;
    display: flex;
}

.toggle-btn {
    flex: 1;
    border-radius: 20px;
    background: transparent;
    border: none;
    text-align: center;
    padding: 6px;
    margin: 6px;
    cursor: pointer;
    z-index: 1;
    color: #ff9600;
    position: relative;
}

    .toggle-btn.active {
        color: white !important;
    }

.toggle-highlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    border-radius: 20px;
    background-color: #ff9600;
    transition: all 0.5s ease-in-out;
    z-index: 0;
}

.toggle-container.interactive .toggle-highlight {
    left: 0;
}

.toggle-container.recorded .toggle-highlight {
    left: 52%;
}

.courses-discounts {
    font-size: clamp(1.5631rem, calc(1.4092rem + 0.6564vw), 2rem);
}

.loading-spinner i {
    margin-right: 10px;
    animation: spin 1s linear infinite;
}

.pricing {
    display: flex;
    flex-direction: column;
}

.discounted-container {
    position: relative;
}

.discounted-price {
    vertical-align: bottom;
    display: inline-block;
    position: relative;
}

    .discounted-container .discounted-price > .price {
        font-size: 32px;
    }

/*
    .discounted-price > span {
        color: #f8f8f8
    }*/

.discount-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    white-space: nowrap;
    font-weight: 800;
    transform: translate(-50%, -45%) rotate(9deg);
    background-color: rgba(173, 0, 17, 0.8);
    color: #fff;
    text-align: center;
    font-size: clamp(0.5382rem, calc(0.5164rem + 0.0929vw), 0.6rem) !important;
    line-height: 1.5;
    padding: 0 10px;
}

[dir="rtl"] .discount-badge {
    transform: translate(-32%, -45%) rotate(9deg);
}

.current-price {
    padding: 0px 10px 0px 10px;
    font-size: clamp(1.5631rem, calc(1.4092rem + 0.6564vw), 2rem) !important;
}

.ltr .discounted-price, .ltr .current-price {
    text-align: left;
}

.rtl .discounted-price, .rtl .current-price {
    text-align: right;
    direction: rtl;
}

.descriptionSwiper swiper-slide {
    justify-content: start;
}

.cerificate-content h5 {
    font-size: clamp(0.5678rem, calc(0.5476rem + 0.086vw), 0.625rem);
    font-weight: 700;
}

.cerificate-content h6 {
    font-size: clamp(0.5678rem, calc(0.5476rem + 0.086vw), 0.625rem);
}

.pio-videos-accordion .accordion-item .accordion-header .accordion-button::after {
    margin-right: unset;
    margin-left: unset;
    display: none;
}

.accordion-item .accordion-header .accordion-button::after {
    -\-bs-accordion-btn-icon: unset;
    -\-bs-accordion-btn-active-icon: unset;
}

.accordion-button.collapsed .fa-chevron-up {
    display: none;
}

.accordion-button:not(.collapsed) .fa-chevron-up {
    display: inline;
}

.accordion-button:not(.collapsed) .fa-chevron-down {
    display: none;
}

.fa-chevron-up, .fa-chevron-down {
    transition: display 0.3s ease;
}

.pio-videos-accordion .accordion-item {
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    overflow: hidden;
    background-color: #fff;
}

    .pio-videos-accordion .accordion-item .accordion-header .accordion-button,
    .pio-videos-accordion .accordion-item .accordion-collapse .accordion-body {
        background-color: transparent;
        color: #000;
        font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
        text-align: unset;
        -\-bs-accordion-btn-focus-box-shadow: none;
    }

.custom-accordion-body a {
    color: #000;
}

.custom-accordion-body .active a,
.custom-accordion-body .active span {
    color: #000;
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
}

.custom-accordion-body .disabled a,
.custom-accordion-body .disabled span,
.webinar-card .disabled .pio-card-footer span {
    color: var(-\-pio-scondery-text);
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    display: flex;
    flex-wrap: nowrap;
}

.table-responsive-pio {
    overflow: auto;
}

::-webkit-scrollbar-track {
    background-color: var(-\-pio-secondary-color);
}

.table-responsive-pio tr:not(:last-child) {
    border-inline-end: 1px solid rgb(0, 0, 0);
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: var(-\-pio-secondary-color);
}

::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-color: #878787;
}

.course-schedule > tbody tr td {
    border: hidden;
}

.mobile-schedule .table > :not(caption) > * > * {
    border-bottom-width: 0;
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
}

.course-schedule > :not(caption) > * > * {
    padding: 0.75rem 0.75rem;
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
}

.availability-btn {
    color: #d03d43;
}

    .availability-btn.active {
        color: #2CA46C;
    }

/* # Testmonial */

.pio-testimonials swiper-container .card {
    border: none;
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.testimonials .card .description {
    position: absolute;
    top: 110%;
    left: 0;
    transform: translateY(100%);
    background: white;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    text-align: center;
    align-content: center;
    padding: 2rem;
    border-radius: 10px;
    color: var(-\-bs-dark);
}

.testimonials .card:hover .description {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transition: ease-in-out 0.8s;
    color: var(-\-bs-dark);
}

.testi-card {
    width: 24rem;
    height: 19rem;
}

    .testi-card .card-body .testi-card-description {
        color: #000;
    }

.pio-testimonials {
    background: var(-\-pio-primary-color);
}

.pio-testimonials .card {
    border-radius: 24px;
    border: none;
}

.pio-testi-img {
    width: 102px;
    height: 102px;
    border-radius: 50%;
}

.pio-about-course .card {
    background: var(-\-pio-secondary-color);
    border: none;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
}

    .pio-about-course .card.about:hover {
        width: 800px;
    }

.about-features-section {
    color: var(-\-text-color)
}

.btn-center {
    margin-left: auto;
    margin-right: auto;
}

.pio-contact .card {
    border-radius: 12px;
    background: url('../../assets/templatev2/email.png');
    background-size: cover;
    background-position: center;
    border: none;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.10);
}

.mode-switch {
    padding: 2px;
    display: flex;
    width: 78px;
    border-radius: 50px;
    overflow: hidden;
    background-color: #f5f5f5;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-radius: 25px;
    overflow: hidden;
}

.country-select svg {
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    pointer-events: none;
}

.pio-footer-country {
    position: relative;
    z-index: 1;
    display: inline-block;
    min-width: 11rem;
}

.pio-footer-country-toggle {
    position: relative;
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .55rem .9rem;
    background: var(-\-pio-primary-color);
    border: 1px solid var(-\-pio-primary-color);
    border-radius: 10px;
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    transition: border-color .2s ease, background-color .2s ease;
}

    .pio-footer-country-toggle:hover {
        border-color: #E89200;
        background: #E89200;
    }

    .pio-footer-country-toggle:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    .pio-footer-country-toggle[aria-expanded="true"] {
        border-color: #E89200;
        background: #E89200;
    }

.pio-footer-country-globe {
    color: #fff;
    font-size: .9rem;
    line-height: 1;
}

.pio-footer-country-name {
    flex: 1;
    text-align: start;
}

.pio-footer-country-caret {
    font-size: .65rem;
    line-height: 1;
    opacity: .85;
    transition: transform .25s ease;
}

.pio-footer-country-toggle[aria-expanded="true"] .pio-footer-country-caret {
    transform: rotate(180deg);
}

.pio-footer-country-menu {
    min-width: 100%;
    margin-bottom: .5rem !important;
    padding: .35rem;
    background: #1c1c1c;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}

    .pio-footer-country-menu .dropdown-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .5rem .75rem;
        border-radius: 8px;
        color: rgba(255, 255, 255, .75);
        font-size: .8rem;
        transition: background-color .15s ease, color .15s ease;
    }

        .pio-footer-country-menu .dropdown-item:hover,
        .pio-footer-country-menu .dropdown-item:focus {
            background: rgba(255, 255, 255, .06);
            color: #fff;
        }

        .pio-footer-country-menu .dropdown-item.is-selected {
            background: var(-\-pio-primary-color);
            color: #fff;
        }

            .pio-footer-country-menu .dropdown-item.is-selected:hover,
            .pio-footer-country-menu .dropdown-item.is-selected:focus {
                background: #E89200;
                color: #fff;
            }

        .pio-footer-country-menu .dropdown-item .fa-check {
            font-size: .7rem;
            line-height: 1;
            visibility: hidden;
        }

        .pio-footer-country-menu .dropdown-item.is-selected .fa-check {
            visibility: visible;
        }

.mode-option {
    flex: 1;
    padding: 0;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s ease;
    width: 150px;
    font-size: clamp(0.7948rem, calc(0.7577rem + 0.1581vw), 0.9rem);
    color: #ff9f0a;
}

.mode-switch {
    position: relative;
    background-color: #f0f0f0;
    border-radius: 25px;
    overflow: hidden;
}

    .mode-switch .mode-option {
        width: 50%;
        z-index: 3;
        text-align: center;
        cursor: pointer;
        line-height: 38px;
        font-weight: bold;
        transition: color 0.4s ease-in-out;
        color: #555;
    }

        .mode-switch .mode-option.active {
            color: #fff;
        }

    .mode-switch .active-frame {
        z-index: 2;
        position: absolute;
        width: 50%;
        background-color: #ff9f0a;
        height: calc(100% - calc(2 * var(-\-toggle-space)));
        border-radius: 25px;
        transition: inset-inline-end 0.4s ease-in-out;
        inset-inline-end: var(-\-toggle-space);
        top: var(-\-toggle-space);
    }

    .mode-switch .mode-option span {
        line-height: 22px
    }

    /* Position the active frame based on the mode */
    .mode-switch.recorded .active-frame {
        inset-inline-end: var(-\-toggle-space);
    }

    .mode-switch.interactive .active-frame {
        inset-inline-end: calc( 50% - var(-\-toggle-space) );
    }

.mode-option.active {
    color: #fff;
    border-radius: 50px;
    font-size: clamp(0.8738rem, calc(0.8294rem + 0.1895vw), 1rem);
    font-weight: bold;
}

.interactive .mode-option:not(.active) {
    color: var(-\-pio-primary-color);
}

.recorded .mode-option:not(.active) {
    color: var(-\-pio-blue-color);
}

.mode-switch.mode-switch--labelled {
    -\-toggle-space: 3px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: max-content;
    max-width: 100%;
    padding: var(-\-toggle-space);
}

.mode-switch.mode-switch--labelled .mode-option,
.mode-switch.mode-switch--labelled .mode-option.active {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: auto;
    min-height: 26px;
    padding: 0 0.9rem;
    line-height: 1.2;
    font-size: 0.8125rem;
    white-space: nowrap;
    border-radius: 25px;
}

.mode-switch.mode-switch--labelled .mode-option i {
    font-size: 0.875rem;
    line-height: 1;
}

.mode-switch.mode-switch--labelled .mode-option span {
    line-height: 1.2;
}

.mode-switch.mode-switch--labelled .active-frame {
    width: calc(50% - var(-\-toggle-space));
    height: auto;
    top: var(-\-toggle-space);
    bottom: var(-\-toggle-space);
}

.mode-switch.mode-switch--labelled.recorded .active-frame {
    inset-inline-end: var(-\-toggle-space);
}

.mode-switch.mode-switch--labelled.interactive .active-frame {
    inset-inline-end: 50%;
}

.w-size {
    width: 100%;
}

.inner-spans span {
    font-size: clamp(0.5678rem, calc(0.5476rem + 0.086vw), 0.625rem);
}

.animate-details {
    color: #50B1FC;
}

    .animate-details svg {
        width: 15px;
    }

    .animate-details:hover {
        color: #53aaec;
    }

        .animate-details:hover svg,
        .next svg:hover {
            transform: translateX(30%);
            transition: transform 0.3s;
        }

.hero-vid iframe {
    width: 100%;
    border-radius: 14px;
    height: 19.6rem;
}
/* B2B PAGE*/
.pio-b2b-header {
    position: relative;
    overflow: hidden;
}

.content-wrapper {
    width: 100%;
    height: 100%;
    color: #000;
}

.b2b-our-clients {
    background: linear-gradient(180deg, #F5F5F5, #00000000);
}

.pio-slide-show {
    background: #F5F5F500;
}

/* ---- theme-aware assets: the LIGHT half of the dual image system ----
   dark-theme-v2.css section 5 already flips these under
   body[data-bs-theme="dark"] ("markup carries BOTH images; the theme decides
   which one is visible") - but the light-mode side of the pair was never
   written, so with nothing hiding .img-dark-theme both copies stacked up in the
   default theme. This is that missing half.

   Used by the B2B client logos, which ship as a coloured file for light mode
   and a white one (-w) for dark. Two real files, so nothing depends on
   filter/mix-blend-mode guessing a legible colour out of one image. */
.img-dark-theme {
    display: none;
}

.img-light-theme {
    display: block;
}

.pio-circle-background {
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    background: #00000080;
    padding: 10px 10px 10px 10px;
    border-radius: 100%;
    top: 8px;
    right: 8px;
}

.pio-why-gifs img {
    max-width: 120px;
    max-height: 120px;
}

.cards-description {
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
}

.pio-smart-training-container {
    border-radius: 100%;
    width: 500px;
    height: 500px;
    border: 2px solid #000;
}

    .pio-smart-training-container .card {
        backdrop-filter: blur(3px);
        background: transparent;
    }

        .pio-smart-training-container .card .card-body img {
            width: 70px;
            height: 70px;
        }

#card1 {
    left: -127px;
}

/* ===== Gear Carousel ===== */
.gear-carousel-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5rem 0;
    width: 100%;
    overflow-x: hidden;
}

.gear-carousel-container {
    /* ── SIZE: the whole assembly is driven by one number ──────────────────
       --gear-size is the ring's diameter. Everything else is a ratio off it,
       measured from the Figma (ring Ø 420, cards 232x91, card centres orbiting
       at radius 252):

           card width   232/420 = 0.552   (was 170 on a 480 ring = 0.354)
           card height   91/420 = 0.217   (was content-driven)
           orbit radius 252/210 = 1.2     <- cards ride OUTSIDE the ring, they
                                             are not centred on it (was 1.0)
           label text    15/420 = 0.036   (was capped at 0.75rem = 12px on a
                                           480 ring, i.e. 0.025 - a third
                                           under the design)
           icon          50/420 = 0.115   (was a flat 44px = 0.092)
           padding y/x   15/420 = 0.030, 12/420 = 0.025
           gap           10/420 = 0.021

       The padding and gap ratios reproduce today's desktop pixels almost
       exactly (14.4/12/10 against 14/12/10) - the point of moving them onto
       --gear-size is that they now SHRINK with the card. They used to stay at
       14px while the card halved, which is what left no room for a larger
       label at the middle breakpoint.

       Because these are ratios, the responsive breakpoints only need to
       override --gear-size and the whole thing rescales in proportion. */
    -\-gear-size: 480px;
    -\-gear-card-width: calc(var(-\-gear-size) * 0.552);
    -\-gear-card-height: calc(var(-\-gear-size) * 0.217);
    -\-gear-card-font: calc(var(-\-gear-size) * 0.036);
    -\-gear-card-icon: calc(var(-\-gear-size) * 0.115);
    -\-gear-card-pad-y: calc(var(-\-gear-size) * 0.030);
    -\-gear-card-pad-x: calc(var(-\-gear-size) * 0.025);
    -\-gear-card-gap: calc(var(-\-gear-size) * 0.021);
    -\-gear-orbit-scale: 1.2;

    /* ── MOTION: one place to tune the step ────────────────────────────────
       The gear and the cards both read these, and that shared timing is what
       makes them turn as a single mechanism - change the curve or the duration
       here and they stay locked together.

       Tuned as a CLOCK ESCAPEMENT, not a carousel:

           HOLD -> HARD IMPULSE -> FAST -> DECELERATE -> LOCK -> HOLD

       Nothing about the movement itself is set here - the path, the positions
       and the 60-degree step all come from pio-gear-carousel. These two values
       only decide how that step is paced.

       ── the HOLD is a duration problem, not a curve problem ──
       The step fires every 3000ms. A 550ms move leaves 2450ms motionless, so
       the wheel is still for 82% of the cycle and each step arrives as a
       discrete event. At the 1.1s this used to be, the wheel was moving a
       third of the time and no curve could stop that reading as continuous.

       Duration is the ONLY thing to touch when the pace needs adjusting - the
       curve carries the mechanical character and rescales with it. 550ms is up
       from 420ms, which drops the peak from ~4800px/s to ~3670px/s while the
       shape, the proportions and the recoil all stay exactly as they were.
       Past roughly 700ms the tail starts disappearing again (see below).

       ── the IMPULSE / FAST / DECELERATE shape ──
       cubic-bezier(0.1, 0.75, 0.28, 1.1), measured as distance covered per
       quarter of the move:

           previous  0.32,0.36,0.58,1     33 | 35 | 24 |  8   even, carousel
           now       0.1,0.75,0.28,1.1    80 | 18 |  4 | -2   escapement

       y1 = 0.75 against x1 = 0.1 is the impulse: at 550ms it leaves at
       ~3670px/s where the even curve it replaced peaked at ~1050px/s, and
       clears 90% of the arc in the first ~205ms. The rest of the move is the
       brake.

       This is deliberately the front-loaded shape that was WRONG at 1.1s - at
       that length the tail was 825ms of motion too small to see, so it read as
       "snap, then nothing". Held under ~700ms the same shape is one legible
       gesture: hit, run, brake, stop. Duration and curve are a pair; stretch
       the duration far enough and the shape stops working again.

       ── the LOCK ──
       y2 = 1.1 carries it 1.7% past the tooth before it settles back, which is
       the negative fourth quarter above. On a 60-degree step that is about a
       degree of recoil - enough to land as a mechanical clunk rather than a
       soft arrival, not enough to look bouncy. Raise y2 toward 1.16 for a
       heavier catch, drop it to 1 for a dead stop with no recoil.

       Keep the duration BELOW the directive's step interval (3000ms default,
       overridable with pio-gear-carousel-interval) or one step gets cut off by
       the next and the motion never settles. */
    -\-gear-step-duration: 0.55s;
    -\-gear-step-ease: cubic-bezier(0.1, 0.75, 0.28, 1.1);
    position: relative;
    width: var(-\-gear-size);
    height: var(-\-gear-size);
}

.gear-outer-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(-\-gear-size);
    height: var(-\-gear-size);
    pointer-events: none;
}

    .gear-outer-circle img {
        width: 100%;
        height: 100%;
    }

.gear-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    /* The `rotate(0deg)` belongs in the base state on purpose. The directive
       sets `translate(-50%,-50%) rotate(Ndeg)`, and the browser only tweens
       two transforms smoothly when both sides list the SAME functions in the
       same order. Leave it off and the very first step falls back to matrix
       decomposition and visibly snaps. */
    transform: translate(-50%, -50%) rotate(0deg);
    width: 110px;
    height: 110px;
    /* was `animation: gearSpin 20s linear infinite` - a continuous spin that
       ran on its own clock and had no relationship to the cards. The gear is
       now stepped by pio-gear-carousel in the same tick, with the same
       duration and curve, so the whole assembly turns as one. */
    transition: transform var(-\-gear-step-duration) var(-\-gear-step-ease);
    z-index: 2;
}

    .gear-inner img {
        width: 100%;
        height: 100%;
        opacity: 0.35;
    }

/* Added by the directive for the opening draw only, so the cards are placed
   rather than animated out from the middle. See pio-gear-carousel. */
.gear-carousel-container.gear-no-anim .gear-card,
.gear-carousel-container.gear-no-anim .gear-inner {
    transition: none;
}

.gear-cards-orbit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.gear-card {
    position: absolute;
    top: 50%;
    left: 50%;
    /* An explicit height, not content-driven, so all six boxes are identical
       the way the design has them - a two-line label and a three-line label
       used to produce two different card sizes. */
    width: var(-\-gear-card-width);
    height: var(-\-gear-card-height);
    /* Pull back half the box so the card's CENTRE sits on the orbit. The old
       -85/-55 pair was half of the 170 width but half of a 110 height the card
       never actually had (it measured ~72px), so every card hung low on the
       ring. Deriving both from the same variables keeps them honest. */
    margin-left: calc(var(-\-gear-card-width) / -2);
    margin-top: calc(var(-\-gear-card-height) / -2);
    /* Same two variables as .gear-inner - that is the whole trick. */
    transition: transform var(-\-gear-step-duration) var(-\-gear-step-ease);
    z-index: 3;
}

.gear-card-inner {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* 1px solid black on the light page; dark-theme-v2.css swaps it to white.
       Was 1.5px of rgba(220,220,220,.4), which was near-invisible on white. */
    border: 1px solid #000;
    border-radius: 12px;
    padding: var(-\-gear-card-pad-y) var(-\-gear-card-pad-x);
    /* fill the fixed .gear-card box, so the visible panel is the same size on
       every card regardless of how many lines its label runs to */
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(-\-gear-card-gap);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transition: box-shadow 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

    .gear-card-inner:hover {
        box-shadow: 0 6px 24px color-mix(in srgb, var(-\-pio-blue-color) 20%, transparent);
        transform: scale(1.05);
    }

    .gear-card-inner img {
        width: var(-\-gear-card-icon);
        height: var(-\-gear-card-icon);
        flex-shrink: 0;
    }

    /* Sized off --gear-size rather than a vw clamp. The clamp tracked the
       VIEWPORT, but the wheel's size is set per breakpoint and does not track
       the viewport at all - so between 992px and a 4K screen the ring stayed
       480px while the label kept creeping, and the two were never in the
       proportion the design draws them. */
    .gear-card-inner span {
        font-size: var(-\-gear-card-font);
        font-weight: 600;
        color: #333;
        line-height: 1.3;
    }

body[data-bs-theme="dark"] .gear-card-inner span {
    color: #fff;
}

.package-offer input::placeholder {
    color: dimgrey
}

.form-select {
    padding: 0.375rem 2rem .375rem 0.75rem;
    background-position: right .75rem center;
    z-index: 0;
}

/*Subjects page */
.subject-description {
    font-size: clamp(0.8738rem, calc(0.8294rem + 0.1895vw), 1rem);
    width: 100%;
}

.pio-filter-bar {
    background: #F5F5F5;
    padding: 1rem 1.5rem 1rem 1.5rem !important;
}

.pio-btn-filter {
    color: #000 !important;
    background: white !important;
}

    .pio-btn-filter:hover, .pio-btn-filter:active, .pio-btn-filter:focus, .pio-btn-filter:focus-visible {
        color: #000 !important;
    }

.bestSellerLabel {
    background: #eceb98;
    color: #000;
}

.filteration-dropdowns {
    min-width: 17%;
}

/* ── the filter bar stays on one line ──────────────────────────────────────
   The row is flex-nowrap (see _subjectTabsNewV2.cshtml). For that to work the
   dropdowns have to be allowed to size themselves and to shrink:

     min-width: 0   the percentage min-widths above are what forced the wrap.
                    Eight controls at 11% each, plus the label and the gaps,
                    cannot fit in 100% - so with nowrap they would overflow the
                    container instead of wrapping, which is worse.
     flex: 0 1 auto size to the button's own text, and give up space evenly when
                    there is not enough.
     nowrap on the button so a squeezed control shortens the row rather than
                    growing taller by wrapping its own label - the thing this
                    change exists to prevent.

   Scoped to .pio-filter-bar because .filteration-dropdowns is only used there
   today, and this is a layout decision about that bar rather than about the
   control. */
.pio-filter-bar .filteration-dropdowns {
    min-width: 0;
    flex: 0 1 auto;
}

.pio-filter-bar .filteration-dropdowns > .pio-btn-filter {
    white-space: nowrap;
    /* The buttons are d-flex with a caret after the label; without this the
       label shrinks to nothing before the caret does. */
    min-width: 0;
}

/* Narrower than the widest desktop, the eight controls need room back, and it
   comes from the padding.

   THE !important IS REQUIRED, NOT A SHORTCUT
     responsive.css sets `.pio-btn { padding: 10px 24px !important }` from
     576px up. Being !important, it beats this rule on any specificity, so the
     first version of this block - written without it - silently did nothing
     and the buttons kept all 24px a side. Overriding an !important declaration
     is the one case where matching it is the correct answer rather than a
     workaround.

     That is also worth knowing before reaching for anything cleverer: 24px to
     8px across sixteen paddings returns about 256px, which is an order of
     magnitude more than these widths were ever short by. Shrinking the labels
     or truncating them - both of which the earlier attempt did - was solving a
     problem that only existed because this rule was not landing. */
@media screen and (max-width: 1399.98px) {
    .pio-filter-bar .filteration-dropdowns > .pio-btn-filter {
        padding-inline: 0.75rem !important;
    }
}

/* The tight band is 768px to 1199px. The bar is d-none d-md-block, so it first
   appears at 768 - where Bootstrap's .container is only 720px wide and all
   eight controls are still asked for. Tighter padding and half the gap are
   enough on their own; the labels keep their full size, which matters because
   the buttons are white-space: nowrap and a shrunken label is the one thing
   that would make this bar harder to read than the wrapping it replaces. */
@media screen and (max-width: 1199.98px) {
    /* Eight gaps, so every 2px here is 16px across the row - which is what
       closes the last few pixels at 768, where the container is at its
       narrowest and the control count is unchanged. */
    .pio-filter-bar .d-flex {
        gap: 0.375rem !important;
    }

    .pio-filter-bar .filteration-dropdowns > .pio-btn-filter {
        padding-inline: 0.5rem !important;
    }

    /* The "filter by" label carries px-2 for spacing it no longer needs: it
       has a gap on both sides already, and it is prose rather than a control,
       so it is the one item that loses nothing by giving its padding up. That
       is the last 16px, which is what clears 768 - the narrowest width the bar
       is shown at, and the only one where all eight controls were still over. */
    .pio-filter-bar > .container > .d-flex > span {
        padding-inline: 0 !important;
    }
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(-\-pio-blue-color);
    border-radius: 8px;
}

.price-offers span {
    color: #000;
    font-size: clamp(1.2415rem, calc(1.1505rem + 0.3883vw), 1.5rem);
    font-weight: 600;
}

.price-offers sub {
    padding-inline-end: 5px;
    color: #808080;
    font-weight: 700;
    font-size: clamp(0.8738rem, calc(0.8294rem + 0.1895vw), 1rem);
    padding-inline-end: 5px;
}

    .price-offers sub + .price::after {
        font-weight: 700;
        font-size: clamp(0.8738rem, calc(0.8294rem + 0.1895vw), 1rem);
        padding-inline-end: 5px;
        color: #808080;
    }

.popover-custom {
    z-index: 2;
    min-width: 299px;
    background: #fff;
    left: 600px;
    top: 45px;
    right: 0;
    height: auto;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25) !important;
    border-radius: 4px;
    transition: all 0s ease-in-out;
    text-align: start;
}

    .popover-custom .card {
        border: none !important;
        background-color: var(-\-pio-secondary-color) !important;
    }

.feature-items {
    padding-inline-start: 1rem;
    padding-inline-end: 2rem;
}

.popover-custom .card-body {
    color: #000;
}

/* Default positioning for LTR popover-right */
.popover-right .popover-content:after {
    content: " ";
    position: absolute;
    left: -32px;
    top: 27%;
    border-top: 15px solid transparent;
    border-right: 17px solid #fff;
    border-left: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

/* Positioning for LTR popover-left */
.popover-left .popover-content:after {
    content: " ";
    position: absolute;
    right: -32px;
    top: 27%;
    border-top: 15px solid transparent;
    border-right: 15px solid transparent;
    border-left: 17px solid #fff;
    border-bottom: 15px solid transparent;
}

/* Default positioning for RTL popover-right (appears on the left in RTL) */
.rtl-popover-right .popover-content:after {
    content: " ";
    position: absolute;
    left: -32px;
    right: unset;
    top: 27%;
    border-top: 15px solid transparent;
    border-right: 17px solid #fff;
    border-left: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

/* Positioning for RTL popover-left (appears on the right in RTL) */
.rtl-popover-left .popover-content:after {
    content: " ";
    position: absolute;
    right: -32px;
    left: unset;
    top: 27%;
    border-top: 15px solid transparent;
    border-left: 17px solid #fff;
    border-right: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

.activePopover {
    z-index: 1;
}

/*Training library page*/
.list-images li {
    list-style-image: url('../../assets/templatev2/right.svg');
    padding-top: 10px;
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    width: 100%;
}

.list-images-orange li {
    list-style-image: url('../../assets/templatev2/check-orange.svg');
    padding-top: 10px;
    width: 100%;
    font-size: clamp(0.9701rem, calc(0.9156rem + 0.2327vw), 1.125rem);
}

    .list-images-orange li span {
        opacity: 0.5;
    }

.pio-accredit-hero {
    position: relative;
    overflow: hidden;
    padding: 76px 0 84px;
    background: linear-gradient(135deg, #152847 0%, rgba(21, 40, 71, 0) 45%), #0a1525;
    color: #fff;
}

body[data-bs-theme="dark"] .pio-accredit-hero {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

    .pio-accredit-hero .container {
        position: relative;
    }

    .pio-accredit-hero .pio-crumb {
        -\-pio-crumb-link: var(-\-pio-primary-color, #FFA000);
        -\-pio-crumb-current: rgba(255, 255, 255, .8);
        -\-pio-crumb-sep: rgba(255, 255, 255, .45);
    }

.pio-accredit-hero-mark {
    position: absolute;
    top: 50%;
    inset-inline-end: max(2rem, calc((100vw - 1320px) / 2 - 2rem));
    width: 300px;
    height: 300px;
    color: #fff;
    opacity: .06;
    transform: translateY(-50%);
    pointer-events: none;
}

.pio-accredit-eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 14px;
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(-\-pio-primary-color, #FFA000);
}

    .pio-accredit-eyebrow::before {
        content: "";
        flex: 0 0 auto;
        width: 58px;
        height: 2px;
        background: currentColor;
    }

[dir="rtl"] .pio-accredit-eyebrow {
    letter-spacing: 0;
}

.pio-accredit-title {
    margin: 0 0 18px;
    font-size: clamp(1.9rem, calc(1.2rem + 2.2vw), 2.75rem);
    font-weight: 800;
    line-height: 1.2;
    text-transform: none;
    color: #fff;
}

.pio-accredit-intro {
    max-width: 720px;
    margin: 0;
    font-size: 1rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, .78);
}

.pio-accredit-body {
    padding-block: 3rem 5rem;
}

.accredit-cards {
    -\-bs-gutter-x: 1.5rem;
    -\-bs-gutter-y: 1.5rem;
}

.pio-accredit-card {
    width: 100%;
    height: 100%;
    min-height: 363px;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    border-color: var(-\-bs-border-color, #dee2e6);
    background-color: var(-\-bs-body-bg, #fff);
    color: var(-\-bs-body-color, #212529);
    text-align: start;
}

.pio-accredit-card .auth-details-btn:focus-visible {
    outline: 3px solid var(-\-pio-primary-color, #FFA000);
    outline-offset: 3px;
}

    .pio-accredit-card .auth-media {
        position: relative;
        height: 160px;
        min-height: 160px;
        overflow: hidden;
    }

    .pio-accredit-card .auth-svg {
        position: absolute;
        width: 78%;
        height: 55%;
    }

    .pio-accredit-card .card-body {
        padding: 1rem;
    }

    .pio-accredit-card .card-title {
        font-size: 1rem;
        font-weight: 500;
        text-align: start;
    }

    .pio-accredit-card .auth-card-summary {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: anywhere;
        font-size: .75rem;
        line-height: 1.55;
        margin-bottom: 1rem;
        text-align: start;
    }

    .pio-accredit-card .auth-card-code {
        min-width: 0;
        font-size: .875rem;
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .pio-accredit-card .auth-details-btn {
        min-width: 100px;
        min-height: 42px;
        flex-shrink: 0;
        margin-inline-start: auto;
        padding: .625rem 1rem;
        font-size: .8125rem;
        font-weight: 500;
    }

.pio-accredit-card:hover,
.pio-accredit-card:focus-within {
    background-color: var(-\-pio-card-hover-bg, var(-\-bs-tertiary-bg, #f8f9fa));
    box-shadow: var(-\-pio-card-hover-shadow, 0 8px 24px rgba(0, 0, 0, .12));
}

@media (prefers-reduced-motion: no-preference) {
    .pio-accredit-card {
        transition: transform .36s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease, background-color .2s ease;
    }

        .pio-accredit-card:hover,
        .pio-accredit-card:focus-within {
            transform: scale(var(-\-pio-card-lift, 1.025));
        }
}

@media (max-width: 991.98px) {
    .pio-accredit-hero-mark {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .pio-accredit-hero {
        padding: 48px 0 52px;
    }

    .pio-accredit-body {
        padding-block: 2rem 3rem;
    }
}

    .auth-media {
        width: 100%;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #16232b;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .auth-media .auth-svg {
        width: auto;
        height: 55%;
        max-width: 78%;
        max-height: 55%;
        object-fit: contain;
    }

    .auth-modal {
        border: 0;
        border-radius: 14px;
        overflow: hidden;
    }

    .auth-media--modal {
        height: 15rem;
        border-radius: 0;
    }

    .auth-modal-close {
        position: absolute;
        top: 0.875rem;
        inset-inline-end: 0.875rem;
        z-index: 2;
        padding: 0.5rem;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.85);
    }

    .auth-modal .modal-body {
        padding: 1.75rem;
        text-align: start;
    }

    .auth-modal-title {
        font-weight: 700;
        margin-bottom: 0.25rem;
    }

    .auth-modal-code {
        font-weight: 600;
        color: var(-\-pio-primary-color);
        margin-bottom: 1rem;
    }

    /* pre-line, not nowrap: the API's Description carries real \n breaks between
       paragraphs, and without this they collapse into one run-on block. wrap
       still applies, so long lines behave normally. */
    .auth-modal-desc {
        white-space: pre-line;
        line-height: 1.9;
        margin-bottom: 0;
    }

.auth-svg {
    width: 130px;
    height: 70px;
}

/*sign in*/
.sign-gif-container {
    background: #f9f9f9;
    border-radius: 20px;
}

    /* signin form */
    .pio-signup-form .form-check .form-check-label,
    .pio-signup-form .form-check-label,
    .pio-form-label {
        font-weight: 600 !important;
        font-size: clamp(0.7241rem, calc(0.6929rem + 0.1329vw), 0.8125rem);
    }

    .pio-signup-form .alert {
        height: 48px;
    }

input,
input::placeholder {
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
}

.pio-signup-form input:not([type='checkbox']),
.pio-signup-form select {
    height: 45px !important;
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    padding: 0.5rem 1.8rem 0.5rem 0.75rem;
}

.subjects-dropdown button,
.subjects-dropdown button:hover {
    border: 1px solid #dee2e6;
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    height: 45px !important;
}

.pio-signup-form input[type='date'].is-invalid,
.pio-signup-form.was-validated input[type='date']:invalid,
.pio-signup-form input[type='date'].is-valid,
.pio-signup-form.was-validated input[type='date']:valid {
    background-position: right calc(2.375em + .1875rem) center !important;
}

.pio-signup-form input[type=radio] {
    height: 20px !important;
    font-size: clamp(1.0635rem, calc(0.9978rem + 0.2802vw), 1.25rem);
    padding: unset !important;
}

.pio-signup-form .btn-showPassword {
    position: absolute;
    right: 0;
    top: -6px;
    padding: 1rem 0.75rem;
    height: 60px;
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    background: transparent;
    border: 0;
    z-index: 10;
}

/* for the select validated background position */
.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"],
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"],
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"] {
    padding-left: 0.6rem;
    background-position: right .75rem center, center right 2.25rem;
    z-index: 0;
}

/* for the all the feilds except password background position */
.pio-signup-form .form-control.is-invalid:not(.password),
.pio-signup-form.was-validated .form-control:invalid:not(.password),
.pio-signup-form .form-control.is-valid:not(.password),
.pio-signup-form.was-validated .form-control:valid:not(.password) {
    background-position: right calc(.375em + .1875rem) center;
}

/* for the password feild background position */
.pio-signup-form .password.form-control.is-invalid,
.pio-signup-form.was-validated .password.form-control:invalid,
.pio-signup-form .password.form-control.is-valid,
.pio-signup-form.was-validated .password.form-control:valid {
    background-position: right calc(2rem + .1875rem) center;
}

/* padding for the feilds after validation*/
.form-control.is-invalid, .was-validated .form-control:invalid,
.form-control.is-valid, .was-validated .form-control:valid {
    padding-left: 10px;
}

.inner-body-height {
    min-height: calc(100vh - 140px);
}

.phone-code-input > input {
    padding-left: 57px !important;
}

.phone-code-input > span {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(-\-pio-blue-color);
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 50px #fff inset;
    -webkit-text-fill-color: #333;
}

    input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 50px #fff inset;
        -webkit-text-fill-color: #333;
    }

/* webinars */
.pio-webinar-cards .card .pio-btn-signUp {
    padding: 5px 9px 5px 9px !important;
}

.laptop,
.pio-tablet,
.pio-iphone {
    position: relative;
    z-index: 1;
}

    .laptop video,
    .pio-tablet video,
    .pio-iphone video {
        object-fit: cover;
    }

    .laptop video {
        position: absolute;
        height: 86.3%;
        width: 78%;
        top: 10px;
        background: #000;
    }

.pio-tablet {
    width: 336px;
    height: 515px;
}

    .pio-tablet video,
    .pio-iphone video {
        position: absolute;
        object-fit: cover;
    }

    .pio-tablet video {
        left: 15px;
        top: 40px;
        width: calc(280px - 38px);
        height: calc(444px - 118px);
    }

.pio-iphone-container {
    position: absolute;
    left: 222px;
    bottom: 0;
}

.pio-iphone video {
    top: 8px;
    left: 8px;
    width: calc(198px - 38px);
    height: calc(466px - 118px);
    border-radius: 18px;
    z-index: -1;
}

/* webinar cards */
.webinar-card {
    position: relative;
    overflow: hidden;
}

    .webinar-card:hover {
        height: 315px;
        transition: all 0.5s ease-in-out;
    }

    .webinar-card .card-thumb {
        height: 100%;
        overflow: hidden;
    }

        .webinar-card .card-thumb img {
            width: 100%;
            height: 300px;
            display: block;
            opacity: 1;
            transform: scale(1);
        }

.webinar-details {
    display: none;
    position: absolute;
    overflow: auto;
    bottom: 67px;
}

.webinar-form-signup {
    display: none;
    position: absolute;
    overflow: auto;
    bottom: 68px;
}

.webinar-card:hover .card-thumb {
    height: 40px;
    transition: height 0.5s ease-in-out;
}

    .webinar-card:hover .card-thumb img {
        opacity: 0.6;
        transform: scale(1.2);
        filter: blur(4px);
    }

.webinar-card:hover .webinar-info .card-heading {
    display: none !important;
}

.webinar-card:hover .webinar-details {
    display: flex !important;
    flex-direction: column;
    font-size: clamp(0.7241rem, calc(0.6929rem + 0.1329vw), 0.8125rem);
}

.webinar-card:hover .webinar-form-signup {
    display: flex !important;
}

    .webinar-card:hover .webinar-form-signup.d-none,
    .webinar-card:hover .webinar-details.d-none {
        display: none !important;
    }

.webinar-card:hover .webinar-form-signup-show {
    display: inline-flex;
    transition: all 0.5s ease-in;
}

.webinar-card:hover .pio-card-footer {
    position: absolute;
    width: 90%;
    padding-bottom: 10px;
    bottom: 0;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}

.webinar-card-register .form-group input::placeholder {
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
}

.custom-checkbox .form-check-input:checked {
    background-color: #ffa017;
    border-color: #ffa017;
}

.custom-checkbox-blue .form-check-input:checked {
    background-color: var(-\-pio-blue-color);
    border-color: var(-\-pio-blue-color);
}

/* about us */
/* about hero */
/* The VIDEO is decoration, so the video is what leaves the flow - not the copy.
   It used to be the other way round: the video sat in flow and set the section's
   height, and the text was absolutely positioned on top of it. That is why this
   hero misbehaved -
     - the content contributed no height, so the section could not grow to fit it
       and the next section rode up over the card;
     - the card's start edge had to be hand-nudged (ms-5) instead of coming from
       the grid, so it never lined up with anything else on the page.
   Now the section owns the height, the video is stretched behind it, and the
   copy is ordinary in-flow content inside a .container like every other block on
   the site. */
.pio-about-background {
    position: relative;
    min-height: 700px;
    height: 95vh;
    overflow: hidden;
}

    /* behind the content, covering the section */
    .pio-about-background > .background-vid {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

    /* above the video, still in normal flow */
    .pio-about-background > .container {
        position: relative;
        z-index: 1;
    }

.about-hero-card {
    background: rgba(0,0,0,0.1);
    filter: blur(0.1);
    backdrop-filter: blur(5px);
    padding-inline-start: 20px;
    padding-inline-end: 40px;
}

/* Hero card at 1.3x. A scale rather than a set of bigger font sizes: it grows
   the padding, the corner radius, the 83px rule beside "About" and the
   paragraph's 600px measure by the same factor, so every proportion inside the
   card stays exactly as it is now - which is what enlarging them one by one
   would not have done.

   Anchored to the corner the card is already pinned to, so it grows inward over
   the video instead of drifting off it: top, plus the inline edge its ms-5
   margin holds it against. That edge flips with the page direction.

   Held back below lg on purpose - at 1.3x the card runs ~845px wide and would
   outgrow a tablet viewport, and the section it lives in starts at md. */
/* The 1.3x scale and its transform-origin were removed together, on purpose.
   transform-origin was the only thing pinning the scaled card to its start
   corner; dropping it alone would leave scale() growing from the centre, which
   pushes the card's start edge ~15% of its width outward and off the container
   grid - the opposite of lining up with everything else. The card now sits at
   its natural size, starting on the container's start edge.
   To bring the enlargement back, restore both lines together:
       @media (min-width: 992px) {
           .about-hero-card { transform: scale(1.3); transform-origin: left top; }
           [dir="rtl"] .about-hero-card { transform-origin: right top; }
       } */

.pio-statistics-about {
    background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(0,0,0,0) 100%);
}

/* ---- B2B stats: four cards ----
   This section used to borrow AboutUsV2's .pio-statistics-about bar and then
   spend five rules overriding it back - the fade-out to a flat card, the type
   scale, the leading, the gaps - each one having to out-specify or out-order
   the shared rule. The new design is four separate cards with the number above
   its labels, which shares nothing with that bar, so B2B owns its own classes
   outright and AboutUsV2 is left with no B2B rules to trip over.

   FOUR ACROSS AT EVERY WIDTH - the row never wraps to 2x2. That is what makes
   the clamps below reach as low as they do: on a 320px phone each card is about
   65px of usable width, so the type has to come all the way down to keep
   "250.000" on one line inside it. There is no breakpoint anywhere in this
   block; the layout is the same shape everywhere and only the scale moves. */
.pio-b2b-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.35rem, 1.5vw, 1.5rem);
    width: 100%;
}

.pio-b2b-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(0.75rem, 2.5vw, 2.25rem) clamp(0.3rem, 1.4vw, 1.5rem);
    color: #000;
    background: #F5F5F5;
    border-radius: 12px;
    text-align: center;
}

/* line-height 1: this inherited 1.5, so a 56px digit occupied 84px with 28px of
   it empty. Digits have no descenders worth the room.
   The clamp floor is set by the longest value, "250.000", in the narrowest
   card - not by what 31 or 400 could get away with. */
.pio-b2b-stat-number {
    color: var(-\-pio-blue-color);
    font-size: clamp(1.25rem, 5.2vw, 3.5rem);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* the thousands part of 250.000, set down as in the design. em, not rem, so it
   tracks the number it belongs to through every step of the clamp above. */
.pio-b2b-stat-number-sm {
    font-size: 0.55em;
    font-weight: 700;
}

/* a word in the number slot (About Us: "Thousands", "100s")
   - smaller than a digit and allowed to wrap, so it fits a quarter-width card */
.pio-b2b-stat-number-word {
    font-size: clamp(1rem, 3.2vw, 2.4rem);
    white-space: normal;
    overflow-wrap: anywhere;
}

.pio-b2b-stat-label {
    margin-top: clamp(0.35rem, 1.2vw, 0.85rem);
    font-weight: 700;
    line-height: 1.25;
    font-size: clamp(0.65rem, 1.6vw, 1rem);
}

/* The longest note - "trained employee" / "موظف تم تدريبه" - wraps to two or
   three lines in a quarter-width card on a phone. That is fine; what is not is
   a single long word forcing the card wider than its column. */
.pio-b2b-stat-note {
    line-height: 1.25;
    font-size: clamp(0.65rem, 1.6vw, 1rem);
    overflow-wrap: anywhere;
}

    .pio-statistics-about .statistics-content {
        font-size: clamp(1.8385rem, calc(1.6055rem + 0.9939vw), 2.5rem);
        font-weight: 600;
    }

.pio-statistics-sub {
    font-size: clamp(0.5678rem, calc(0.5476rem + 0.086vw), 0.625rem);
}

.pio-about-section-vid {
    object-fit: cover;
    width: 100%;
    border-radius: 20px;
}

.about-video-wrapper {
    width: 100%;
    height: 500px; /* لازم height ثابت */
    overflow: hidden;
    position: relative;
    display: block;
}

    .about-video-wrapper video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.circle-missions {
    height: 700px;
    width: 700px;
    border-radius: 100%;
    background: linear-gradient(#e66465, #9198e5);
}

.circle-missions2 {
    height: 500px;
    width: 500px;
    border-radius: 100%;
    background: linear-gradient(#e66465, #9198e5);
}

.img-click {
    display: block;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    cursor: pointer;
}

.crew-cards img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crew-cards {
    position: relative;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
}

.crew-info {
    visibility: hidden;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: -17px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(87, 87, 87, 0.8);
    color: white;
    padding: 10px;
    transform: translateY(100%);
    transition: transform 0.5s ease-in-out;
}

.crew-cards:hover .crew-info {
    visibility: visible;
    transform: translateY(0);
}

.slider-img {
    border-radius: 20px;
}

/* ==========================================================================
   ABOUT US PAGE (template V2)  -  Views/InnerPage/AboutUsV2.cshtml
   ========================================================================== */

.pio-about-title {
    font-size: clamp(1.75rem, 3vw, 3.25rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 0;
    text-transform: none;
}

.pio-about-body {
    font-size: clamp(0.8125rem, 1vw, 1rem);
    line-height: 1.65;
}

/* hero */
.pio-about-hero {
    -\-pio-about-hero-fade: #fff;
    position: relative;
    min-height: 620px;
    height: 92vh;
    overflow: hidden;
}

    .pio-about-hero::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        height: clamp(240px, 45%, 480px);
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(to top, var(-\-pio-about-hero-fade) 0%, transparent 100%);
    }

.pio-about-hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.pio-about-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.85) 100%);
}

.pio-about-hero-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    color: #fff;
    padding-block: calc(70px + clamp(1.5rem, 4vh, 3rem)) clamp(2rem, 6vh, 4rem);
}

.pio-about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(-\-pio-blue-color);
    font-weight: 600;
    font-size: clamp(0.875rem, 1.1vw, 1.125rem);
}

.pio-about-eyebrow-rule {
    display: inline-block;
    flex: 0 0 auto;
    width: clamp(40px, 5vw, 84px);
    height: 2px;
    border-radius: 2px;
    background: #fff;
}

.pio-about-hero-title {
    margin: 0.75rem 0 1rem;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    font-size: clamp(2rem, 4vw, 4.25rem);
}

.pio-about-hero-lead {
    max-width: 46ch;
    margin: 0;
    color: rgba(255,255,255,.88);
    font-size: clamp(0.8125rem, 1vw, 1rem);
    line-height: 1.6;
}

    .pio-about-hero-lead + .pio-about-hero-lead {
        margin-top: 0.75rem;
    }

/* intro: media + copy */
.pio-about-intro-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
}

.pio-about-intro-vid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pio-about-intro-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding-inline-start: clamp(0e0rem, 3vw, 4rem);
}

    .pio-about-intro-copy .pio-about-body {
        margin-bottom: 0;
    }

.pio-about-intro-btn {
    margin-top: 0.5rem;
}

.pio-about-intro-tagline {
    margin: -0.5rem 0 0;
    font-size: clamp(1rem, 1.35vw, 1.375rem);
    font-weight: 500;
    line-height: 1.4;
    opacity: .8;
}

.pio-about-intro-subtitle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0 -0.5rem;
    font-size: clamp(1.0625rem, 1.3vw, 1.375rem);
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}

    .pio-about-intro-subtitle::before {
        content: "";
        flex: 0 0 auto;
        width: 32px;
        height: 4px;
        border-radius: 2px;
        background: var(-\-pio-primary-color);
    }

/* our history */
.pio-about-history {
    -\-pio-about-panel-veil: rgba(255,255,255,.09);
    -\-pio-about-panel-edge: rgba(255,255,255,.10);
    position: relative;
    background-image: url("../../assets/TemplateV2/about/our-history-bg.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding-block: clamp(1.5rem, 4vw, 4.5rem);
}

/* background-attachment: fixed is ignored or janky on touch browsers (iOS
   Safari paints it once and leaves it), and it is motion nobody asked for
   under prefers-reduced-motion. Both fall back to a plain scrolling image. */
@media (hover: none), (prefers-reduced-motion: reduce) {
    .pio-about-history {
        background-attachment: scroll;
    }
}

    .pio-about-history::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.28);
    }

    .pio-about-history > .pio-container {
        position: relative;
        z-index: 1;
    }

.pio-about-history-panel {
    color: #fff;
    background: var(-\-pio-about-panel-veil);
    border: 1px solid var(-\-pio-about-panel-edge);
    border-radius: 12px;
    backdrop-filter: blur(2px);
    padding-inline: clamp(1.25rem, 9vw, 11.5rem);
    padding-block: clamp(2rem, 4.5vw, 5rem);
}

.pio-about-history-title {
    color: #fff;
    margin-bottom: clamp(1.5rem, 3.5vw, 3.5rem);
}

.pio-about-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(1rem, 2vw, 2rem);
    row-gap: 2.5rem;
}

    .pio-about-timeline::before {
        content: "";
        position: absolute;
        top: 2px;
        inset-inline: 0;
        border-top: 1px dashed rgba(255,255,255,.5);
    }

.pio-about-milestone {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .pio-about-milestone::before {
        content: "";
        display: block;
        width: 44px;
        height: 4px;
        border-radius: 2px;
        background: var(-\-pio-primary-color);
        margin-bottom: clamp(1rem, 1.8vw, 1.75rem);
    }

.pio-about-milestone-year {
    color: #fff;
    font-weight: 500;
    line-height: 1.2;
    font-size: clamp(1.25rem, 1.9vw, 2.25rem);
    margin-bottom: 0.5rem;
}

.pio-about-milestone-name {
    color: #fff;
    text-transform: none;
    font-weight: 700;
    line-height: 1.3;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    margin-bottom: 0.65rem;
}

.pio-about-milestone-text {
    color: rgba(255,255,255,.82);
    font-size: clamp(0.8125rem, 1vw, 1rem);
    line-height: 1.6;
    margin-bottom: 0;
}

/* mission / vision */
.pio-about-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.75rem);
    text-align: center;
}

.pio-about-value-art {
    width: 100%;
    max-width: clamp(220px, 26vw, 380px);
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: contain;
}

.pio-about-value-text {
    max-width: 46ch;
    margin-bottom: 0;
}

.pio-about-value-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.pio-about-value-title {
    margin: 0;
    font-size: clamp(1.375rem, 2vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
}

.pio-about-page {
    -\-pio-about-space: clamp(2.5rem, calc(1.5rem + 3vw), 5rem);
    padding-bottom: calc(var(-\-pio-about-space) * 2);
}

    .pio-about-page > .pio-section {
        padding-top: var(-\-pio-about-space);
    }

    .pio-about-page > .pio-about-history,
    .pio-about-page > .pio-about-split {
        margin-top: var(-\-pio-about-space);
    }

    .pio-about-page > .pio-about-split + .pio-about-split {
        margin-top: 0;
    }

/* full-bleed split rows: recruiting / trainers */
.pio-about-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: clamp(300px, 30vw, 500px);
}

.pio-about-split-media {
    position: relative;
    overflow: hidden;
    min-height: 220px;
}

    .pio-about-split-media img {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.pio-about-split-copy {
    display: flex;
    align-items: center;
}

.pio-about-split-inner {
    max-width: 760px;
    padding-inline: clamp(1.5rem, 5.5vw, 6.5rem) clamp(1.5rem, 4vw, 5rem);
    padding-block: clamp(2rem, 4vw, 3rem);
}

    .pio-about-split-inner .pio-about-body {
        margin-bottom: 0;
    }

        .pio-about-split-inner .pio-about-body + .pio-about-body {
            margin-top: 1rem;
        }

.pio-about-split-title {
    margin-bottom: clamp(1rem, 2vw, 1.75rem);
}

.pio-about-split-reverse .pio-about-split-media {
    order: 2;
}

.pio-about-split-reverse .pio-about-split-copy {
    order: 1;
}

.pio-about-split-reverse .pio-about-split-inner {
    margin-inline-start: auto;
    padding-inline: clamp(1.5rem, 4vw, 5rem) clamp(1.5rem, 5.5vw, 6.5rem);
}

/* meet the crew */
.pio-about-crew-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 3.5vw, 4.5rem);
    margin-block: clamp(2rem, 4vw, 3.5rem);
}

.pio-about-crew-card {
    margin: 0;
}

.pio-about-crew-photo {
    aspect-ratio: 11 / 10;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(127,127,127,.14);
}

    .pio-about-crew-photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
    }

.pio-about-crew-meta {
    text-align: center;
    padding-top: 1.15rem;
}

.pio-about-crew-name {
    font-weight: 700;
    text-transform: none;
    line-height: 1.3;
    font-size: clamp(1.0625rem, 1.4vw, 1.5rem);
    margin-bottom: 0.55rem;
}

.pio-about-crew-role {
    font-size: clamp(0.8125rem, 1vw, 1rem);
    line-height: 1.5;
    margin-bottom: 0.25rem;
    opacity: .85;
}

    .pio-about-crew-role:last-child {
        margin-bottom: 0;
    }

.pio-about-crew-more {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

/* licensed testing centers */
.pio-about-testing-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1rem, 2vw, 2.25rem);
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.pio-about-testing-card {
    flex: 0 0 auto;
    width: clamp(160px, 20vw, 300px);
    aspect-ratio: 2 / 1;
    display: grid;
    place-items: center;
    padding: clamp(0.875rem, 2vw, 2rem);
    background: #fff;
    border: 1px solid rgba(127,127,127,.18);
    border-radius: 12px;
}

    .pio-about-testing-card img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }

@media screen and (min-width: 992px) {
    .pio-about-hero-inner {
        padding-block-start: calc(var(-\-pio-navbar-h) + clamp(1.5rem, 5vh, 3.5rem));
    }
}

@media screen and (max-width: 991.98px) {
    .pio-about-split {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .pio-about-split-media {
        aspect-ratio: 16 / 9;
    }

    .pio-about-split-reverse .pio-about-split-media,
    .pio-about-split-reverse .pio-about-split-copy {
        order: 0;
    }

    .pio-about-split-inner,
    .pio-about-split-reverse .pio-about-split-inner {
        max-width: none;
        margin-inline-start: 0;
        padding-inline: clamp(1.25rem, 5vw, 3rem);
    }

    .pio-about-crew-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .pio-about-intro-copy {
        padding-inline-start: 0;
    }
}

@media screen and (max-width: 767.98px) {
    .pio-about-hero {
        min-height: 0;
        height: auto;
    }

    .pio-about-hero-inner {
        gap: 3rem;
    }

    .pio-about-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .pio-about-timeline::before {
            display: none;
        }

    .pio-about-history-panel {
        padding-inline: clamp(1.25rem, 6vw, 2.5rem);
    }
}

@media screen and (max-width: 575.98px) {
    .pio-about-crew-grid {
        grid-template-columns: 1fr;
    }

    .pio-about-timeline {
        grid-template-columns: 1fr;
    }
}

/* shopping cart page */
.cart-item-image {
    border-radius: 15px;
    height: 140px;
    width: 196px;
}

.pio-payment-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
}

.payment-btn-img {
    width: 40px;
    height: 30px;
}

.shopping_cart_container .table-responsive .table {
    -\-bs-table-bg: transparent;
}

.apple-pay-btn {
    background: #000;
}

    .apple-pay-btn:hover {
        background: rgba(0, 0, 0, 0.74);
    }

.paypal-pay-btn {
    background: #025271;
}

    .paypal-pay-btn:hover {
        background: rgba(2, 82, 113, 0.7);
    }

.checkout-btn {
    background: #FFA000;
}

    .checkout-btn:hover {
        background: rgba(255, 160, 0, 0.61);
    }

.cart-item-title {
    color: #000;
}

.cart-continue {
    color: #00000075;
}

.apple-pay-svg {
    fill: #000;
}

.apple-pay-btn .payment-btn-img {
    content: url('../../assets/templatev2/pay-apple-light.svg');
}

.fa-trash-can {
    color: #000;
}

    .fa-trash-can:hover {
        color: darkred;
    }

.certificates-accordion .accordion-item {
    border: none;
}

    .certificates-accordion .accordion-item .accordion-button {
        border-bottom: 1px solid;
        text-align: unset;
    }

    .certificates-accordion .accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
        border-bottom-left-radius: unset;
        border-bottom-right-radius: unset;
    }

    .certificates-accordion .accordion-item .accordion-button::after {
        margin-right: unset;
    }

    .certificates-accordion .accordion-item .accordion-button:not(.collapsed) {
        background: transparent;
    }

    .certificates-accordion .accordion-item .accordion-button:focus {
        box-shadow: unset;
    }
/* footer */
.footer {
    background: var(-\-pio-secondary-color);
}

    .footer .description {
        text-align: justify;
    }

    .footer .pio-footer-items > .fw-bold {
        text-transform: capitalize;
    }

body[data-bs-theme="light"] .pio-footer-items ul a:hover,
body[data-bs-theme="light"] .footer-icons a:hover,
body[data-bs-theme="light"] .footer-text a:hover {
    color: var(-\-pio-primary-color);
}

.footer-text {
    font-size: clamp(0.6206rem, calc(0.597rem + 0.1005vw), 0.6875rem);
}

    .pio-footer-items ul a,
    .footer-icons a,
    .footer-text a {
        font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
        color: #000 !important;
    }

        .pio-footer-items ul a li {
            margin-bottom: 10px;
        }

        .pio-footer-items ul a:hover {
            color: var(-\-pio-primary-color);
        }

a:hover {
    color: var(-\-pio-primary-color);
}

.footer-dropdown button {
    background: var(-\-pio-primary-color);
    border-radius: 12px;
}

    .footer-dropdown button span {
        font-size: clamp(0.5678rem, calc(0.5476rem + 0.086vw), 0.625rem);
    }

.pio-rights {
    font-size: clamp(0.5678rem, calc(0.5476rem + 0.086vw), 0.625rem);
    color: var(-\-pio-scondery-text);
    font-weight: 600;
}

.footer {
    background-color: #111111;
    color: #fff;
}

    .footer .pio-footer-items ul a,
    .footer .footer-icons a,
    .footer .footer-text a,
    .footer .pio-rights {
        color: #fff !important;
    }

        .footer .pio-footer-items ul a:hover,
        .footer .footer-icons a:hover,
        .footer .footer-text a:hover {
            color: var(-\-pio-primary-color) !important;
        }

body[data-bs-theme="light"] .footer #logoImage {
    content: url('../../assets/templatev2/logo-light.png');
}

.pay-card {
    display: flex;
    width: 60px;
    height: 36px;
    padding: 5px 7px;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}

.pio-fs-7 {
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
}

.spinner,
.burger-menu-background {
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 11;
    top: 0;
    background: rgba(0,0,0,0.7);
}

    .spinner img {
        width: 120px;
    }

    .spinner span {
        display: flex;
        align-items: center;
    }
        /* code #2 */
        .spinner span label {
            margin: 0.25rem 0.25rem;
            animation: loadingAnimation 0.7s infinite alternate;
            font-size: clamp(1.2415rem, calc(1.1505rem + 0.3883vw), 1.5rem);
        }

            .spinner span label:nth-child(1) {
                margin: 0;
            }

            .spinner span label:nth-child(2) {
                animation-delay: 0.1s;
                font-size: clamp(1.4081rem, calc(1.2877rem + 0.5137vw), 1.75rem);
            }

            .spinner span label:nth-child(3) {
                animation-delay: 0.2s;
                font-size: clamp(1.4081rem, calc(1.2877rem + 0.5137vw), 1.75rem);
            }

            .spinner span label:nth-child(4) {
                animation-delay: 0.3s;
                font-size: clamp(1.4081rem, calc(1.2877rem + 0.5137vw), 1.75rem);
            }

@keyframes loadingAnimation {
    0% {
        transform: scale(1);
        opacity: 0.2;
    }

    100% {
        transform: scale(0.8);
        opacity: 1;
    }
}

.keen-slider-buttons {
    padding-left: 2.5rem;
}

    .keen-slider-buttons > .btn {
        overflow: hidden;
        position: relative;
        transition: .2s transform ease-in-out;
        will-change: transform;
        z-index: 0;
    }

        .keen-slider-buttons > .btn::after {
            background-color: #ffffffa8;
            border-radius: 3rem;
            content: '';
            height: 100%;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            transform: translate(-100%, 0);
            transition: .2s transform ease-out;
            z-index: -1;
        }

        .keen-slider-buttons > .btn:hover::after {
            transform: translate(0, 0);
            box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
        }

.circle-scroll {
    position: relative;
    overflow: hidden;
}

    .circle-scroll::before,
    .circle-scroll::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        opacity: 0;
        transition: transform 0.6s ease, opacity 0.6s ease;
        z-index: -1;
    }

.intro {
    position: relative
}

.fullscreen-animation {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.hero-section-dark {
    z-index: 1 !important;
}

#lottie {
    height: 100vh;
    width: 100vw;
    position: fixed !important;
    top: 0;
    right: 0;
    object-fit: contain;
    overflow: hidden;
    z-index: -5;
}

    #lottie svg {
        width: 100%;
        height: 100%;
        display: block;
        z-index: -5;
    }

        #lottie svg g {
            z-index: -5;
        }

            #lottie svg g image {
                height: 100%;
                width: 100%;
                object-fit: contain;
                overflow: hidden;
                z-index: -5;
            }

.scrollmagic-pin-spacer {
    padding-top: unset !important;
    padding-bottom: unset !important;
}

.passwordComplexityPopover {
    position: relative;
    background: #fff;
    top: 5px;
    color: #000;
    border: 1px solid #dee2e6;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 10px;
}

.passwordComplexityPopover-arrow {
    position: absolute;
    top: -10px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
}

.passwordComplexityPopover::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 30px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

.filter-dropdown-container {
    display: none;
    /* position: absolute;*/
    width: 100%;
    z-index: 1;
    top: 40px;
    left: 0;
    background-color: white;
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 20px 20px;
}

.filtarationDropdownMobile {
    background: #f5f5f5;
    border-radius: 20px;
    font-size: clamp(0.5678rem, calc(0.5476rem + 0.086vw), 0.625rem);
    display: flex;
    justify-content: center;
}

    .filtarationDropdownMobile:hover {
        background: #f5f5f5;
    }

.custom-dropdown-item {
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    gap: 1.75rem;
}

    .custom-dropdown-item input {
        width: 1.8em;
        height: 1.8em;
    }

/*.price-offer::after {
    content: ' JD';
    direction: ltr;
}*/

.price::after {
    content: attr(data-currency);
    font-size: clamp(0.8738rem, calc(0.8294rem + 0.1895vw), 1rem);
}

.price-offer::after, .price-offer::before, sub.price::after {
    content: '' !important
}

.fa-star, .fa-star-half-stroke, .fa-hourglass-start {
    color: #ffa000;
}

/****************************************************
*   Mobile V2 filter: floating action button (FAB)  *
*   + floating chip panel. Mobile only (d-md-none)  *
*   so desktop/tablet & V1 are untouched.           *
*****************************************************/
/* inert wrapper: its FAB / panel / backdrop are all position:fixed, so it
   collapses to zero height. d-md-none on it hides the whole thing at >=768,
   keeping the component mobile-only (desktop/tablet & V1 untouched). */
.pio-fab-filter {
    display: block;
}

/* ---- FAB ---- */
/* the WRAPPER owns the fixed position, so the badge (absolute) anchors to it
   and does NOT rotate; only the inner button rotates when the panel opens */
.pio-fab-filter-fab {
    position: fixed;
    bottom: 1.25rem;
    inset-inline-end: 1.25rem; /* bottom-right LTR, bottom-left RTL (auto) */
    z-index: 1045;
    width: 56px;
    height: 56px;
}

.pio-fab-filter-btn {
    width: 100%;
    height: 100%;
    min-width: 44px;
    min-height: 44px;
    border: none;
    border-radius: 50%;
    background-color: var(-\-pio-blue-color);
    color: #fff;
    font-size: clamp(1.0635rem, calc(0.9978rem + 0.2802vw), 1.25rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

    .pio-fab-filter-btn:hover {
        color: #fff;
    }

    /* tactile press animation */
    .pio-fab-filter-btn:active {
        transform: scale(0.92);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
    }

    .pio-fab-filter-btn:focus-visible {
        outline: 3px solid color-mix(in srgb, var(-\-pio-blue-color) 45%, transparent);
        outline-offset: 2px;
    }

    .pio-fab-filter-btn.is-open {
        transform: rotate(90deg);
    }

/* active-filter count badge: anchored to the wrapper, above the button,
   so it stays upright while the button spins */
.pio-fab-filter-badge {
    position: absolute;
    top: -2px;
    inset-inline-end: -2px;
    z-index: 2;
    min-width: 20px;
    height: 20px;
    padding-inline: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(-\-pio-primary-color);
    color: #fff;
    font-size: clamp(0.6206rem, calc(0.597rem + 0.1005vw), 0.6875rem);
    font-weight: 700;
    line-height: 1;
    border-radius: 2rem;
    border: 2px solid #fff;
    pointer-events: none; /* taps fall through to the button beneath */
}

/* ---- outside-tap backdrop (transparent: not a modal/sheet) ---- */
.pio-fab-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1044;
    background: transparent;
}

/* ---- floating chip panel ---- */
.pio-fab-filter-panel {
    position: fixed;
    bottom: calc(1.25rem + 56px + 0.75rem); /* just above the FAB */
    inset-inline-end: 1.25rem;
    z-index: 1046;
    width: min(340px, calc(100vw - 2rem));
    max-height: min(70vh, 560px);
    display: flex;
    flex-direction: column;
    /* DEFAULT = dark-mode look: the body is data-bs-theme="dark" by default,
       and the panel INVERTS against the page like the buy modal -> white panel
       on a dark page. The light-page (dark panel) look is the override below. */
    background: #fff;
    color: #111;
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
    /* closed state: faded, scaled down toward the FAB corner, nudged down */
    transform-origin: bottom right;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9) translateY(12px);
    /* transform + opacity only => 60fps-friendly */
    transition: opacity .22s ease, transform .22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear .22s;
    pointer-events: none;
}

body[dir="rtl"] .pio-fab-filter-panel {
    transform-origin: bottom left;
}

.pio-fab-filter-panel.open {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
    transition: opacity .22s ease, transform .22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
    pointer-events: auto;
}

.pio-fab-filter-header {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #eceef2;
}

.pio-fab-filter-title {
    font-weight: 700;
    font-size: clamp(0.8246rem, calc(0.7849rem + 0.1696vw), 0.9375rem);
}

.pio-fab-filter-close {
    border: none;
    background: none;
    color: #6b7075;
    font-size: clamp(0.8738rem, calc(0.8294rem + 0.1895vw), 1rem);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .pio-fab-filter-close:focus-visible {
        outline: 2px solid var(-\-pio-blue-color);
        outline-offset: 1px;
    }

.pio-fab-filter-scroll {
    overflow-y: auto;
    padding: 0.85rem 1rem 1rem;
    -webkit-overflow-scrolling: touch;
}

/* ---- accordion group: clickable header row + collapsible body ---- */
.pio-fab-filter-group {
    border-top: 1px solid rgba(0, 0, 0, .07);
}

    .pio-fab-filter-group:first-child {
        border-top: 0;
    }

.pio-fab-filter-group-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    background: none;
    border: none;
    padding: 0.7rem 0;
    cursor: pointer;
    text-align: start;
    color: inherit;
}

    .pio-fab-filter-group-header:focus-visible {
        outline: 2px solid var(-\-pio-blue-color);
        outline-offset: 2px;
        border-radius: 6px;
    }

.pio-fab-filter-label {
    display: block;
    font-weight: 700;
    font-size: clamp(0.7241rem, calc(0.6929rem + 0.1329vw), 0.8125rem);
    margin: 0;
}

/* caret: FA sizes .svg-inline--fa to 1em; font-size pins it, and it flips
   when the group is open */
.pio-fab-filter-caret {
    width: 12px;
    height: 12px;
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    flex-shrink: 0;
    opacity: .7;
    transition: transform .2s ease;
}

.pio-fab-filter-group.open .pio-fab-filter-caret {
    transform: rotate(180deg);
}

.pio-fab-filter-group-body {
    padding-bottom: 0.8rem;
}

.pio-fab-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* ---- chip (shared by button chips & label/checkbox chips) ---- */
.pio-fab-chip {
    position: relative; /* contains the visually-hidden checkbox */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin: 0;
    padding: 0.3rem 0.85rem;
    border: 1px solid #e3e6ea;
    border-radius: 999px;
    background: #f5f5f5;
    color: #333;
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .pio-fab-chip:hover {
        border-color: var(-\-pio-blue-color);
    }

    .pio-fab-chip:focus-within,
    .pio-fab-chip:focus-visible {
        outline: 2px solid var(-\-pio-blue-color);
        outline-offset: 1px;
    }

    /* the real checkbox stays functional but visually hidden inside the chip */
    .pio-fab-chip .pio-fab-chip-input {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        pointer-events: none;
    }

    /* selected chip -> the application theme color (wins in both page themes) */
    .pio-fab-chip.is-active,
    body[data-bs-theme="light"] .pio-fab-chip.is-active,
    body[data-bs-theme="dark"] .pio-fab-chip.is-active {
        background-color: var(-\-pio-blue-color);
        border-color: var(-\-pio-blue-color);
        color: #fff;
    }

/* ============================================================
   Panel theme INVERSION (matches the buy/preview modals):
   - default (above) = white panel  -> for the dark page (dark mode)
   - override (below) = dark panel   -> for the light page (light mode)
   ============================================================ */
body[data-bs-theme="light"] .pio-fab-filter-panel {
    background: #10141c;
    color: #fff;
}

body[data-bs-theme="light"] .pio-fab-filter-header {
    border-bottom-color: rgba(255, 255, 255, .12);
}

body[data-bs-theme="light"] .pio-fab-filter-close {
    color: #aab2bd;
}

body[data-bs-theme="light"] .pio-fab-filter-group {
    border-top-color: rgba(255, 255, 255, .1);
}

body[data-bs-theme="light"] .pio-fab-chip {
    background: #1e2530;
    border-color: #333c48;
    color: #e6e6e6;
}

/* honor reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .pio-fab-filter-btn,
    .pio-fab-filter-panel,
    .pio-fab-filter-caret,
    .pio-fab-chip,
    .cert-card .certificate,
    .cart-certs-chevron,
    .pay-tile,
    .pay-tile-check,
    .pay-back-btn,
    .pay-confirm .pay-confirm-btn {
        transition: none;
    }

    .pay-tile.is-selected,
    .pay-tile:active {
        transform: none;
    }
}

/****************************************************
*                     Filters                       *
*****************************************************/
.filtersChosed {
    background: #fff;
    border: 1px solid #0000002b !important;
    color: rgba(0, 0, 0, 0.5);
    font-size: clamp(0.6206rem, calc(0.597rem + 0.1005vw), 0.6875rem);
    padding-inline-start: 10px;
    padding-inline-end: 25px;
}

.removeFilter {
    height: 15px;
    top: 6px;
    right: 5px;
    cursor: pointer;
}

.filtersChosed:hover {
    background-color: #f3f3f3;
    color: #000;
}

    .filtersChosed:hover .removeFilter {
        color: red;
    }

.pio-chips-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    margin-inline-start: 0.15rem;
    padding: 0;
    border: 1px solid rgba(215, 38, 61, 0.3);
    border-radius: 50%;
    background: rgba(215, 38, 61, 0.07);
    color: #D7263D;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

    .pio-chips-clear:hover,
    .pio-chips-clear:focus-visible {
        background: #D7263D;
        border-color: #D7263D;
        color: #fff;
        box-shadow: 0 5px 14px rgba(215, 38, 61, 0.26);
    }

    .pio-chips-clear__glyph {
        display: block;
        width: 0.82rem;
        height: 0.82rem;
    }

body[data-bs-theme="dark"] .pio-chips-clear {
    border-color: rgba(255, 107, 126, 0.34);
    background: rgba(255, 107, 126, 0.12);
    color: #FF6B7E;
}

    body[data-bs-theme="dark"] .pio-chips-clear:hover,
    body[data-bs-theme="dark"] .pio-chips-clear:focus-visible {
        background: #D7263D;
        border-color: #D7263D;
        color: #fff;
    }
.filterChecked {
    background: #0c750c1c !important;
    border-color: rgba(var(-\-bs-success-rgb), var(-\-bs-border-opacity)) !important;
}

/* Testmonial buttons */
.custom-swiper-button-prev,
.custom-swiper-button-next {
    width: 50px;
    height: 50px;
    background-color: rgba(0,0,0,10%);
    color: #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    font-size: clamp(1.0635rem, calc(0.9978rem + 0.2802vw), 1.25rem);
    cursor: pointer;
    border: none;
    transition: background-color 0.3s, color 0.3s;
}

.pio-nav-btn {
    background-color: rgba(0,0,0,0);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid #000;
    border-color: #000;
    color: #000 !important;
    fill: #000 !important;
    stroke: #000 !important;
    transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease, filter .15s ease;
}

    .pio-nav-btn:hover {
        transform: scale(1.12);
        filter: brightness(1.12);
        border-color: #000;
    }

    .pio-nav-btn:active {
        transform: scale(0.9); /* press-in feedback on click */
        box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
        background-color: var(-\-pio-primary-color) !important;
        border-color: var(-\-pio-primary-color) !important;
    }

    .pio-nav-btn.is-disabled {
        opacity: .35;
        cursor: not-allowed;
        pointer-events: none; /* can't click, can't hover-grow */
        transform: none;
        box-shadow: none;
    }

/* Center the buttons */
.left-arrow {
    left: 8rem;
    top: 65%;
    transform: translate(-50%, -50%);
}

.right-arrow {
    right: 8rem;
    top: 65%;
    transform: translate(50%, -50%);
}

/* Hover Effect */
.custom-swiper-button-prev:hover,
.custom-swiper-button-next:hover {
    background-color: #fff;
    color: var(-\-bs-gray-900);
    box-shadow: 0 2px 15px rgba(0,0,0,0.2);
}

.selectedCourses {
    max-width: 257px;
    border-radius: 8px;
    padding: 8px;
    font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
    color: var(-\-pio-primary-color);
    border: 1px solid var(-\-pio-primary-color);
}

.form-select:focus {
    border-color: unset;
    outline: 0;
    box-shadow: unset;
}

/* mini loading */
.loading-spinner {
    margin-right: 10px;
    animation: spin 1s linear infinite;
}

.mini-loader-icon {
    border: 0.25rem dotted #f3f3f3;
    border-radius: 50%;
    border-top: .25rem dotted #5f5f5f;
    border-right: .25rem dotted #7f7f7f;
    border-bottom: .25rem dotted #AfAfAf;
    width: 1.5rem;
    height: 1.5rem;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* B2B In-Person Section Refactor */
.pio-in-person-section {
    background-color: #fff;
    transition: background-color 0.3s ease;
}

.pio-b2b-inPerson-img {
    height: 650px;
    object-fit: cover;
    width: 100%;
}

.pio-b2b-inPerson-text {
    line-height: 1.6;
    color: #777;
    font-size: clamp(0.8246rem, calc(0.7849rem + 0.1696vw), 0.9375rem);
}

.pio-in-person-header-line {
    width: 40px;
    height: 2px;
    background-color: var(-\-pio-blue-color);
}

/* ── B2B page: rules lifted out of inline style attributes ──────────────────
   Each of these was repeated verbatim on every slide/field it applied to, so
   changing one meant finding all of them. Inline also put them out of reach of
   the dark theme, which can override a class but not a style attribute. */

/* hero swiper tiles (mobile) - was on all four slides */
.pio-b2b-hero-tile {
    background: var(-\-pio-blue-color);
    height: 20rem;
}

/* "Why Pioneers" gif cards - was on all five slides.
   The rounded outline is part of the design, so it is pinned here rather than
   left to Bootstrap's .card defaults - those track the theme and fade to
   rgba(255,255,255,.15) in dark mode, which is invisible on the black page.
   dark-theme-v2 turns the stroke white; light mode keeps the darker one. */
.pio-b2b-why-tile {
    height: 21rem;
    border: 1px solid rgba(16, 42, 58, 0.175);
    border-radius: 1rem;
    transition: background-color .25s ease, border-color .25s ease;
}

/* ── hover inverts the tile against the page ──
   Light page: the card goes dark. dark-theme-v2.css mirrors this so a dark
   page gets a card that goes light. Kept in two files rather than one
   `filter: invert()` because inverting would also wreck the coloured gif.

   The title and the copy have to be repainted explicitly. Bootstrap's .card
   sets its own `color`, so they do NOT inherit from this rule, and left alone
   they stay dark-on-dark and vanish the moment you hover.

   :focus-within alongside :hover so a keyboard user tabbing into the tile gets
   the same state - the tooltip rules below already work this way. */
.pio-b2b-why-tile:hover,
.pio-b2b-why-tile:focus-within {
    background-color: #000620;
    border-color: #000620;
}

.pio-b2b-why-tile:hover .card-title,
.pio-b2b-why-tile:hover .cards-description,
.pio-b2b-why-tile:focus-within .card-title,
.pio-b2b-why-tile:focus-within .cards-description {
    color: #fefefe;
}

.pio-b2b-why-tile .card-title,
.pio-b2b-why-tile .cards-description {
    transition: color .25s ease;
}

/* The copy sits at the BOTTOM of the tile with the gif above it, and is sized to
   fill the card the way the design does. Bootstrap's .card-body is flex:1 1 auto,
   so it was swallowing all ~214px of leftover height while its text only used the
   top 60px - that is where the dead space at the bottom came from. Making the body
   size to its content and pushing it down with an auto margin moves the slack
   above the text, where the gif lives, instead of below it. */
/* Both zones are fixed so every tile lays out identically: the gif box is the
   same height in all five, and the title reserves two lines whether it needs
   them or not. That is what keeps the titles on one line with each other and the
   descriptions starting at the same y, the way the design has them - anchoring
   the text to the bottom instead made 1-line and 2-line titles start at
   different heights. */
/* The gif zone and the text zone add up to exactly the tile's 21rem, so the
   card's own justify-content:center has no slack left to distribute and every
   tile lays out identically. Budget at the largest clamp() sizes:
   title 2 lines 55px + 8px gap + description 3 lines 70px + 20px bottom
   padding = 153px, inside this 9.75rem (156px). The description used to
   overflow this box and run down onto the bottom border. */
.pio-b2b-why-tile .card-body {
    flex: 0 0 auto;
    height: 9.75rem;
    width: 100%;
    padding: 0 1.25rem 1.25rem;
    text-align: start;
}

.pio-b2b-why-tile .card-title {
    font-size: clamp(1.0625rem, calc(0.95rem + 0.45vw), 1.375rem);
    line-height: 1.25;
    min-height: 2.5em;
    margin-bottom: 0.5rem;
}

/* Three lines then an ellipsis, so no amount of copy can push the text onto the
   bottom border. Anything cut is still reachable: the hover tooltip below shows
   the whole sentence. */
.pio-b2b-why-tile .cards-description {
    font-size: clamp(0.8125rem, calc(0.7681rem + 0.1894vw), 0.9375rem);
    line-height: 1.55;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* ── full copy on hover ──
   A pure-CSS bubble, so there is no tooltip library to initialise inside the
   swiper. data-tip is filled in by the page script from the element's own text,
   which is why it can never drift out of sync with what is rendered, and it is
   only set on the cards whose copy actually got clipped - hovering a short one
   should not pop an empty bubble.
   The bubble hangs off the card rather than the paragraph because the paragraph
   carries overflow:hidden for the clamp and would cut it off. Positioned with
   physical `left`, not inset-inline-start: the card box is the same either way,
   so this needs no RTL mirror. */
.pio-b2b-why-tile.has-tip {
    cursor: help;
}

.pio-b2b-why-tile.has-tip::after,
.pio-b2b-why-tile.has-tip::before {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

.pio-b2b-why-tile.has-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(0 + 0.625rem);
    left: 50%;
    transform: translateX(-50%) translateY(0.25rem);
    z-index: 30;
    width: max-content;
    max-width: min(17rem, 80vw);
    padding: 0.625rem 0.875rem;
    border-radius: 0.625rem;
    background: #1f2833;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: start;
    white-space: normal;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}

/* the little arrow */
.pio-b2b-why-tile.has-tip::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 0.25rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 31;
    border: 0.375rem solid transparent;
    border-top-color: #1f2833;
}

.pio-b2b-why-tile.has-tip:hover::after,
.pio-b2b-why-tile.has-tip:focus-within::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.pio-b2b-why-tile.has-tip:hover::before,
.pio-b2b-why-tile.has-tip:focus-within::before {
    opacity: 1;
    visibility: visible;
}

/* ...and let the gif use that reclaimed space instead of staying at 120px.
   A fixed height (not max-height) so the gif box is identical in every tile,
   which is what makes the text below it line up across the row. */
.pio-b2b-why-tile img {
    height: 11.25rem;
    width: auto;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
    transition: filter .25s ease;
}

/* The tile flips light/dark on hover, so the artwork has to flip with it or a
   white-background gif ends up as a bright slab on a near-black card.

   invert(1) alone would do the white->black swap, but it also drags every hue
   to its opposite - the brand cyan in these gifs would come back orange. The
   hue-rotate(180deg) chasing it turns those hues back, so the net effect is
   what was asked for: light areas go dark and dark areas go light, while the
   coloured parts stay on-brand.

   Drop the hue-rotate if a literal photographic negative is what you want.

   One rule, not two: both themes invert the tile on hover, so both want the
   artwork inverted. Filters compose off whatever the image already is, so this
   is correct in light and dark without a per-theme override. */
.pio-b2b-why-tile:hover img,
.pio-b2b-why-tile:focus-within img {
    filter: invert(1) hue-rotate(180deg);
}

/* Swiper clips at its own edge, and the slide widths it derives from
   slidesPerView are fractional - the rounding put the outermost tile's 1px
   border right on the clip line, so the card at the end of the row looked
   open-sided. The padding buys two pixels inside the clip (Swiper subtracts it
   from the slide widths itself); the matching negative margin pulls the
   padding box back out, so the FIRST card still starts exactly on the
   container edge, level with the heading above it. */
/* At >=1400px whyPioParams switches to slidesPerView:5 and the row is LOCKED -
   Swiper reports isLocked with allowSlideNext false, so there is nothing to drag
   and its transform math is unused. The five tiles should therefore just divide
   the track.
   They did not, because of `swiper-slide { width: 320px !important }` further up
   this file: a global rule written to beat Swiper's inline width. Swiper computes
   250.4px per slide here, the rule forces 320px, and 5*320 plus gaps is 1650px
   inside a 1292px track - the row spilled past the swiper (which is
   overflow:visible) and the last card's border ended up off-screen. That same
   rule's 10px inline padding is what held the first card 10px clear of the
   heading and button above it.
   Equal flex children fill the track exactly instead, the gap comes from
   spaceBetween alone, and the last slide drops its trailing margin so the row
   ends flush. Below this breakpoint the swiper really does slide, so the fixed
   width is deliberately left alone there. */
@media (min-width: 1400px) {
    .whyPioSwiper swiper-slide {
        width: auto !important;
        flex: 1 1 0;
        min-width: 0;
        padding-inline: 0;
    }

    .whyPioSwiper swiper-slide:last-child {
        margin-inline-end: 0 !important;
    }
}

.whyPioSwiper {
    padding-inline: 2px;
    margin-inline: -2px;
}

/* The form container never had a background at all. In light mode that left it
   white-on-white instead of the grey card the design calls for; in dark mode it
   left it transparent, and dark-theme-v2 sets .pio-b2b-form{color:#000} - so the
   "Personal"/"Company" headings rendered black on a black page. The inputs
   survived only because they are forced white with !important.
   --pio-secondary-color is a light grey in BOTH themes (#f8f8f8 / #F5F5F5),
   which is exactly what makes this read as a light card on a dark page and
   keeps the black text legible. Kept out of the grouped rule further up, which
   .pio-webinar-cards / .crew-cards / .pio-cart-card also share. */
.pio-b2b-form {
    background-color: var(-\-pio-secondary-color);
}

/* B2B form controls - the border was inline on all seven */
.pio-b2b-form .form-control,
.pio-b2b-form .form-select {
    border: 1px solid #ababab;
}

/* The select also carried the last hardcoded font-size in template V2.
   Bootstrap's own .form-select padding is single-class, so the two-class
   selector here wins without needing !important the way the inline rule did. */
.pio-b2b-form .form-select {
    min-height: 3.625rem;
    padding: 0 0.625rem;
    font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
}

.pio-in-person-sub {
    color: var(-\-pio-blue-color);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* B2B Header Swiper Images (People PNGs) */
.pio-header-swiper-img {
    height: 450px;
    object-fit: contain;
    width: 100%;
}

.pio-header-swiper-img-mobile {
    height: 180px;
    object-fit: contain;
    width: 100%;
}

/* Fast Forward Override for scrolling */
body.fast-forward-active * {
    transition-duration: 0.35s !important;
    transition-delay: 0.05s !important;
    animation-duration: 0.35s !important;
}

body.fast-forward-active .hero-earth {
    animation: spinEarth 5s linear infinite !important; /* Earth spins 24x faster! */
}

body.fast-forward-active,
body.fast-forward-active * {
    cursor: none !important;
}

@keyframes pulse {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.15);
    }
}

/* CRT / VHS screen effect while fast-forwarding */
.crt-ff-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9998; /* Just below custom cursor (9999) */
    opacity: 0;
    transition: opacity 0.15s ease;
    background: radial-gradient(circle, color-mix(in srgb, var(-\-pio-blue-color) 4%, transparent) 0%, rgba(7, 11, 26, 0.15) 100%);
}

body.fast-forward-active .crt-ff-overlay {
    opacity: 1;
    animation: crtFlicker 0.12s infinite;
}

/* scanlines */
.crt-ff-overlay .vhs-scanlines {
    position: absolute;
    inset: 0;
    background: linear-gradient( rgba(255, 255, 255, 0) 50%, rgba(128, 128, 128, 0.12) 50% /* Subtle grey lines with low opacity */
    );
    background-size: 100% 4px;
    z-index: 1;
}

/* VHS HUD */
.crt-ff-overlay .vhs-hud {
    position: absolute;
    top: 30px;
    left: 30px;
    color: #00FF66; /* Retro VCR green */
    font-family: 'Courier New', Courier, monospace;
    font-size: clamp(1.2415rem, calc(1.1505rem + 0.3883vw), 1.5rem);
    font-weight: bold;
    text-shadow: 0 0 8px rgba(0, 255, 102, 0.8);
    letter-spacing: 2px;
    animation: vhsBlink 0.8s steps(2, start) infinite;
    z-index: 2;
}

/* VHS Glitch Line moving down the screen */
.crt-ff-overlay .vhs-glitch-line {
    position: absolute;
    width: 100%;
    height: 4px;
    background: rgba(128, 128, 128, 0.25); /* Subtle grey line with low opacity */
    box-shadow: 0 0 6px rgba(128, 128, 128, 0.15);
    top: -10px;
    animation: vhsGlitchLine 1.8s linear infinite;
    z-index: 2;
}

@keyframes crtFlicker {
    0% {
        opacity: 0.9;
    }

    50% {
        opacity: 0.96;
    }

    100% {
        opacity: 0.9;
    }
}

@keyframes vhsBlink {
    to {
        visibility: hidden;
    }
}

@keyframes vhsGlitchLine {
    0% {
        top: -20px;
    }

    100% {
        top: 120%;
    }
}

/* Reverse Active Styles (Scrolling Upwards) */
body.fast-forward-active.reverse-active .hero-earth {
    animation: spinEarthReverse 5s linear infinite !important; /* Earth spins reverse! */
}

body.fast-forward-active.reverse-active .vhs-glitch-line {
    animation: vhsGlitchLineReverse 1.8s linear infinite !important; /* Static sweeps upwards! */
}

@keyframes spinEarthReverse {
    from {
        rotate: 360deg;
    }

    to {
        rotate: 0deg;
    }
}

@keyframes vhsGlitchLineReverse {
    0% {
        top: 120%;
    }

    100% {
        top: -20px;
    }
}

.tl-grid,
.tl-card {
    -\-tl-accent: #7c3aed;
    -\-tl-accent-grad: linear-gradient(135deg,#a855f7 0%,#6d28d9 100%);
    -\-tl-text: #1d2330;
    -\-tl-muted: #9097a3;
    -\-tl-border: #eceef2;
    -\-tl-radius: 20px;
}

/* ---- grid ---- */
.tl-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 26px;
    margin: 0 auto;
}

/* ---- card ---- */
.tl-card {
    background: #fff;
    border: 1px solid var(-\-tl-border);
    border-radius: var(-\-tl-radius);
    padding: 26px 26px 22px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 18px rgba(20,20,50,.1);
    transition: box-shadow .25s ease, transform .25s ease;
}

    .tl-card:hover {
        box-shadow: 0 16px 36px rgba(20,20,50,.10);
        transform: translateY(-4px);
    }

/* ---- icon tile ---- */
.tl-card-icon {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background set per-card via ng-style */
}

    .tl-card-icon span {
        width: 100%;
        height: 100%;
    }

    .tl-card-icon svg {
        width: 100%;
        height: 100%;
    }

/* ******************************
   Bento spinner – loading overlay
 ****************************** */
.bento-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 120px;
    width: 100%;
    background: #fff;
}

    .bento-spinner .spinner {
        width: 36px;
        height: 36px;
        border: 3px solid #e9ecef;
        border-top-color: black;
        border-radius: 50%;
        background: transparent !important;
        animation: bentoSpin 0.7s linear infinite;
        position: static !important;
    }

.interactive .bento-spinner .spinner {
    border-top-color: var(-\-pio-primary-color);
}

@keyframes bentoSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ******************************
   Start  bento-grid inner pages
 ****************************** */

.in-product-h1 {
    font-size: clamp(1.5631rem, calc(1.4092rem + 0.6564vw), 2rem);
}

/* Flex-based 2-column layout (replaces grid in _courseDescription2) */
.bento-flex-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bento-flex-col-left,
.bento-flex-col-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bento-grid {
    display: grid;
    gap: 1rem;
    overflow: visible;
    /* Mobile first (< 768px): single column, natural stacking */
    grid-template-columns: 1fr;
    grid-template-areas:
        "cell1"
        "cell2"
        "cell3"
        "cell4"
        "cell5"
        "cell6";
}

.bento-grid-cell-1 {
    grid-area: cell1;
}

.bento-grid-cell-2 {
    grid-area: cell2;
}

.bento-grid-cell-3 {
    grid-area: cell3;
}

.bento-grid-cell-4 {
    grid-area: cell4;
}

.bento-grid-cell-5 {
    grid-area: cell5;
}

.bento-grid-cell-6 {
    grid-area: cell6;
}

/* ==========================================
   Bento grid dynamic layouts
   When cells are missing, others expand to fill.
   Cell 3 fills cell 1/5 areas.
   Cell 4 fills cell 2 area.
   ========================================== */

/* --- no-cell1 only: cell3 takes cell1's place --- */
.bento-grid.no-cell1 {
    grid-template-areas:
        "cell3"
        "cell2"
        "cell4"
        "cell5"
        "cell6";
}

/* --- no-cell5 only: cell3 takes cell5's place --- */
.bento-grid.no-cell5 {
    grid-template-areas:
        "cell1"
        "cell2"
        "cell3"
        "cell4"
        "cell6";
}

/* --- no-cell1 AND no-cell5: cell3 takes both places --- */
.bento-grid.no-cell1.no-cell5 {
    grid-template-areas:
        "cell3"
        "cell2"
        "cell4"
        "cell6";
}

/* --- no-cell2 only: cell4 takes cell2's place --- */
.bento-grid.no-cell2 {
    grid-template-areas:
        "cell1"
        "cell3"
        "cell4"
        "cell5"
        "cell6";
}

/* --- no-cell1 AND no-cell2: cell3→cell1, cell4→cell2 --- */
.bento-grid.no-cell1.no-cell2 {
    grid-template-areas:
        "cell3"
        "cell4"
        "cell5"
        "cell6";
}

/* --- no-cell5 AND no-cell2: cell3→cell5, cell4→cell2 --- */
.bento-grid.no-cell5.no-cell2 {
    grid-template-areas:
        "cell1"
        "cell3"
        "cell4"
        "cell6";
}

/* --- no-cell1 AND no-cell5 AND no-cell2: cell3→cell1+cell5, cell4→cell2 --- */
.bento-grid.no-cell1.no-cell5.no-cell2 {
    grid-template-areas:
        "cell3"
        "cell4"
        "cell6";
}

/* bento card */
.bento-card {
    width: 100%; /* fills the container */
    height: 100%; /* fills the container */
    background-color: #fff;
    /*box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);*/
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.5rem;
    overflow: hidden;
}

.bento-card-header {
    background-color: #fff; /* same as body */
    border-bottom: 1px solid #f2f2f2; /* removes Bootstrap's header divider */
    padding: 0.75rem 1.25rem 0.75rem;
    font-weight: 500;

}

.bento-card-body {
    background-color: #fff; /* matches the header */
    padding: 20px 30px 30px 30px;
}

.bento-card-title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.0635rem, calc(0.9978rem + 0.2802vw), 1.25rem);
}

.bento-card-text {
    margin: 0 0 1rem;
    color: #212529;
}

.bento-card-btn {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background-color: #0d6efd;
    color: #fff;
    text-decoration: none;
    border-radius: 0.375rem;
    font-size: clamp(0.8738rem, calc(0.8294rem + 0.1895vw), 1rem);
}

    .bento-card-btn:hover {
        background-color: #0b5ed7;
    }

/* ========================================================================== */
/*  START : Inquiry Modal V2 Styles (bento-card based)                        */
/* ========================================================================== */

.inquiry-modal-v2 {
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    border: none;
}

.inquiry-modal-v2 .modal-header {
    padding: 0.75rem 1rem 0;
}

.inquiry-modal-v2 .modal-body {
    padding: 0 1.5rem 1.5rem;
}

/* Labels */
.inquiry-label {
    font-size: clamp(0.7545rem, calc(0.7209rem + 0.1434vw), 0.85rem);
    font-weight: 500;
    color: #555;
    margin-bottom: 0.25rem;
}

/* Inputs */
.inquiry-input {
    border-radius: 0.5rem;
    border: 1px solid #e0e0e0;
    padding: 0.5rem 0.75rem;
    font-size: clamp(0.7948rem, calc(0.7577rem + 0.1581vw), 0.9rem);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .inquiry-input:focus {
        border-color: var(-\-pio-blue-color);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(-\-pio-blue-color) 10%, transparent);
    }

/* Phone code prefix */
.inquiry-phone-code {
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-right: none;
    border-radius: 0.5rem 0 0 0.5rem;
    font-size: clamp(0.7545rem, calc(0.7209rem + 0.1434vw), 0.85rem);
    color: #555;
    min-width: 60px;
    justify-content: center;
}

.inquiry-phone-code + .inquiry-input {
    border-radius: 0 0.5rem 0.5rem 0;
}

/* Validation messages */
.inquiry-validation-msg {
    color: #dc3545;
    font-size: clamp(0.6974rem, calc(0.6684rem + 0.124vw), 0.78rem);
    margin-top: 0.25rem;
    padding-inline-start: 2px;
}

/* Submit button */
.inquiry-submit-btn {
    background: linear-gradient(135deg, var(-\-pio-blue-color), #0090b0);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.6rem 1.5rem;
    font-size: clamp(0.8345rem, calc(0.7939rem + 0.1735vw), 0.95rem);
    font-weight: 600;
    transition: background 0.25s ease, transform 0.15s ease;
}

    .inquiry-submit-btn:hover {
        background: linear-gradient(135deg, #0090b0, #007a96);
        color: #fff;
        transform: translateY(-1px);
    }

    .inquiry-submit-btn:disabled {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
    }

/* Success / Error icons animation */
.inquiry-success-icon svg,
.inquiry-error-icon svg,
.inquiry-user-icon svg {
    animation: inquiryIconPop 0.4s ease-out;
}

@keyframes inquiryIconPop {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.inquiry-user-head {
    fill: var(-\-pio-blue-color);
}

.inquiry-modal-v2.interactive .inquiry-user-head {
    fill: var(-\-pio-primary-color);
}

#inquiryModalV2[data-bs-theme] {
    color: var(-\-bs-body-color);
}

#inquiryModalV2[data-bs-theme="light"] {
    color-scheme: light;
}

    #inquiryModalV2[data-bs-theme="light"] .btn-close {
        filter: none;
    }

    #inquiryModalV2[data-bs-theme="light"] .form-select {
        -\-bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        color: var(-\-bs-body-color);
    }

    #inquiryModalV2[data-bs-theme="light"] .inquiry-label {
        color: #555;
        font-weight: 500;
    }

#inquiryModalV2[data-bs-theme="dark"] .form-select {
    color: var(-\-bs-white);
}

#inquiryModalV2[data-bs-theme="dark"] .inquiry-label {
    color: #fff;
    font-weight: 900;
}

/* ========================================================================== */
/*  END : Inquiry Modal V2 Styles                                             */
/* ========================================================================== */

/* teacher */

.teacher-avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
}

.teacher-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* certificate scroll */
.certificates-scroll {
    /* ~3 certificates tall, then scroll */
    max-height: 760px;
    overflow-y: auto;
    /* a little right padding so content doesn't hug the scrollbar */
    padding-right: 8px;
}

    /* optional: nicer thin scrollbar */
    .certificates-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .certificates-scroll::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 3px;
    }

    .certificates-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .certificate-img-conatiner{
        aspect-ratio: 230 / 165;
        max-height: 180px !important;
        box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
    }

    .certificate-img-conatiner img{
        width: 100% !important;
        height: 100% !important;
    }

/* objectives */
.alternating-colors li {
    position: relative;
    list-style-type: none;
}

    .alternating-colors li::before {
        content: '';
        display: block;
        height: 24px;
        width: 24px;
        position: absolute;
        inset-inline-start: -5px !important;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 10.75C0 4.81494 4.81494 0 10.75 0C16.6851 0 21.5 4.81494 21.5 10.75C21.5 16.6851 16.6851 21.5 10.75 21.5C4.81494 21.5 0 16.6851 0 10.75ZM10.75 1.65385C5.72833 1.65385 1.65385 5.72833 1.65385 10.75C1.65385 15.7717 5.72833 19.8462 10.75 19.8462C15.7717 19.8462 19.8462 15.7717 19.8462 10.75C19.8462 5.72833 15.7717 1.65385 10.75 1.65385Z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.2428 5.98283C16.5925 6.27657 16.6379 6.79818 16.3441 7.14787L9.39797 15.4171C9.24402 15.6004 9.01822 15.708 8.77891 15.712C8.5396 15.7161 8.31026 15.6163 8.15014 15.4384L5.17322 12.1307C4.86771 11.7913 4.89523 11.2684 5.23469 10.9629C5.57415 10.6574 6.097 10.6849 6.40251 11.0244L8.74327 13.6252L15.0778 6.08413C15.3715 5.73444 15.8931 5.68908 16.2428 5.98283Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 10.75C0 4.81494 4.81494 0 10.75 0C16.6851 0 21.5 4.81494 21.5 10.75C21.5 16.6851 16.6851 21.5 10.75 21.5C4.81494 21.5 0 16.6851 0 10.75ZM10.75 1.65385C5.72833 1.65385 1.65385 5.72833 1.65385 10.75C1.65385 15.7717 5.72833 19.8462 10.75 19.8462C15.7717 19.8462 19.8462 15.7717 19.8462 10.75C19.8462 5.72833 15.7717 1.65385 10.75 1.65385Z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.2428 5.98283C16.5925 6.27657 16.6379 6.79818 16.3441 7.14787L9.39797 15.4171C9.24402 15.6004 9.01822 15.708 8.77891 15.712C8.5396 15.7161 8.31026 15.6163 8.15014 15.4384L5.17322 12.1307C4.86771 11.7913 4.89523 11.2684 5.23469 10.9629C5.57415 10.6574 6.097 10.6849 6.40251 11.0244L8.74327 13.6252L15.0778 6.08413C15.3715 5.73444 15.8931 5.68908 16.2428 5.98283Z'/%3E%3C/svg%3E");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat !important;
        mask-position: center !important;
        mask-size: contain !important;
        height: 20px !important;
        width: 20px !important;
        background-color: #FFA000;
    }

    .alternating-colors li::before {
        content: '';
        display: block;
        height: 18px;
        width: 18px;
        position: absolute;
        top: 2px;
        inset-inline-start: -26px; /* left in LTR, right in RTL */
    }

ul.alternating-colors li::before {
    background-color: #FFA000;
}

/* Topics acordian */

/* ---- total duration badge ---- */
.topics-total-duration {
    font-size: clamp(0.6985rem, calc(0.6693rem + 0.1244vw), 0.7812rem);
    color: #5c6670;
    font-weight: 500;
    background-color: #f1f4f7;
    padding: 3px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

/* ---- Level 1 : Module accordion ---- */
.topics-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.topics-accordion .accordion-item {
    border: 1px solid #e9edf1;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    /* Lift the card a touch on hover / while open so the active module is easy to spot */
    .topics-accordion .accordion-item:hover {
        border-color: #dbe4ec;
    }

.topics-accordion .accordion-button {
    background: #fff;
    font-weight: 600;
    box-shadow: none;
    padding: 1.05rem 1.25rem;
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: none;
    cursor: pointer;
    text-align: start;
    font-size: clamp(0.8246rem, calc(0.7849rem + 0.1696vw), 0.9375rem);
    color: #111;
    transition: background-color .2s ease;
}

    .topics-accordion .accordion-button:hover {
        background-color: #f7f8fa;
    }

    .topics-accordion .accordion-button:focus {
        box-shadow: none;
    }

    /* Keyboard users still get a visible focus ring */
    .topics-accordion .accordion-button:focus-visible,
    .lesson-accordion-button:focus-visible {
        outline: 2px solid var(-\-pio-primary-color, var(-\-pio-blue-color));
        outline-offset: -2px;
        border-radius: 8px;
    }

    /* hide Bootstrap's default arrow, use our chevron */
    .topics-accordion .accordion-button::after {
        display: none;
    }

/* Uniform icon slot: keeps text aligned on the same column across every level */
.accordion-icon-diamond,
.lesson-play-icon,
.lecture-play-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(-\-pio-primary-color, var(-\-pio-blue-color));
}

.accordion-icon-diamond svg,
.lesson-play-icon svg,
.lesson-play-icon i,
.lecture-play-icon svg,
.lecture-play-icon i {
    font-size: clamp(0.8246rem, calc(0.7849rem + 0.1696vw), 0.9375rem);
    width: 18px;
    height: 18px;
}

.accordion-icon-diamond i {
    font-size: 14.4px;
}

.accordion-title {
    /* don't stretch: the chevron sits right after the title text */
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accordion-meta {
    flex-shrink: 0;
    white-space: nowrap;
    /* push to the row end (RTL-aware) — done here because Bootstrap's ms-auto
       is unreliable in this project */
    margin-inline-start: auto;
}

.topics-accordion .accordion-chevron,
.package-accordion .accordion-chevron {
    transition: transform .25s ease;
    color: #555;
    flex-shrink: 0;
}

    /* bolder chevron: stroke the path on top of its fill */
    .topics-accordion .accordion-chevron path,
    .package-accordion .accordion-chevron path {
        stroke: currentColor;
        stroke-width: 1.25;
    }

.topics-accordion .accordion-button:not(.collapsed) .accordion-chevron,
.package-accordion .accordion-button:not(.collapsed) .accordion-chevron {
    transform: rotate(180deg);
}

/* Open module: subtle accent to match the open-lesson state,
   plus a hairline under the header so it reads separate from the list */
.topics-accordion .accordion-button:not(.collapsed) {
    background-color: color-mix(in srgb, var(-\-pio-blue-color) 6%, transparent);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(-\-pio-blue-color) 15%, transparent);
}

.topics-accordion .accordion-button:not(.collapsed) .accordion-title {
    color: var(-\-pio-primary-color, var(-\-pio-blue-color));
}

.topics-accordion .accordion-button::after,
.package-accordion .accordion-button::after {
    display: none !important;
}

/* Module-level flat row: a single lesson/lecture promoted to the module's place.
   Reuses .accordion-button styling so it looks exactly like the other topics,
   it just doesn't expand. */
.topics-accordion .module-flat-row,
.package-accordion .module-flat-row {
    cursor: default;
}

/* diploma course without content (not clickable): slightly softer than black */
.package-accordion .module-flat-row .accordion-title {
    color: #6b7075;
}

    .topics-accordion .module-flat-row.disabled .accordion-title,
    .topics-accordion .module-flat-row.disabled .lesson-size {
        color: #9aa0a6;
    }

/* ---- Level 1 body ---- */
.custom-accordion-body {
    padding: 0.35rem 1.25rem 0.85rem;
}

/* ---- Level 2 : Lesson accordion ---- */
.lesson-accordion {
    display: flex;
    flex-direction: column;
}

.lesson-accordion-item {
    border-bottom: 1px solid #f2f2f2;
}

    .lesson-accordion-item:last-child {
        border-bottom: none;
    }

.lesson-accordion-button {
    background: transparent;
    border: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.75rem 0;
    min-height: 44px;
    cursor: pointer;
    text-align: start;
    font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
    color: #111;
    font-weight: 500;
    transition: background-color .2s ease;
    border-radius: 8px;
    /* Hover pill bleeds outward via negative margins so the text column stays
       perfectly aligned with the module title */
    padding-inline: 8px;
    margin-inline: -8px;
    width: calc(100% + 16px);
}

    .lesson-accordion-button:hover {
        background-color: #f4f7fa;
    }

    .lesson-accordion-button:focus {
        outline: none;
    }

.lesson-name {
    /* don't stretch: the chevron sits right after the title text */
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111;
}

.lesson-meta {
    flex-shrink: 0;
    white-space: nowrap;
    margin-inline-start: auto;
}

.lesson-chevron {
    transition: transform .25s ease;
    color: #999;
    flex-shrink: 0;
}

.lesson-accordion-button:not(.collapsed) .lesson-chevron {
    transform: rotate(180deg);
}

.lesson-accordion-button:not(.collapsed) {
    background-color: color-mix(in srgb, var(-\-pio-blue-color) 7%, transparent);
    font-weight: 600;
}

.lesson-accordion-button:not(.collapsed) .lesson-name {
    color: var(-\-pio-primary-color, var(-\-pio-blue-color));
}

/* lessons flat row (single lecture) */
.lesson-row {
    padding: 0.75rem 0;
    min-height: 44px;
    /* same negative-margin pill as the lesson button so hover matches and BOTH
       edges align with the module row: time/lock end on the same column */
    padding-inline: 8px;
    margin-inline: -8px;
    gap: 12px;
    border-radius: 8px;
    transition: background-color .2s ease;
}

    .lesson-row:not(.disabled):hover {
        background-color: #f4f7fa;
    }

    .lesson-row .lesson-name {
        color: #111;
    }

    .lesson-row.disabled .lesson-name,
    .lesson-row.disabled .lesson-size {
        color: #9aa0a6;
    }

    .lesson-row.disabled .lesson-name {
        pointer-events: none;
    }

/* plain underlined link - no pill/badge around it */
.lesson-preview {
    color: #111;
    background: none;
    border: none;
    font-weight: 600;
    font-size: clamp(0.6985rem, calc(0.6693rem + 0.1244vw), 0.7812rem);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    white-space: nowrap;
    padding: 0;
    transition: color .15s ease;
}

    .lesson-preview:hover {
        color: #000;
    }

    /* already previewed: text turns purple, the eye keeps its color */
    .lesson-preview.previewed {
        color: #6f42c1;
    }

        .lesson-preview.previewed i {
            color: #111;
        }

/* lock chip: a circle, same height as the time chip */
.lesson-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f1f4f7;
    color: #5c6670;
    font-size: clamp(0.6206rem, calc(0.597rem + 0.1005vw), 0.6875rem);
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
}

/* time/size chip: identical at every level (module, lesson, lecture)
   and fixed min-width so the chips line up in one column at the row end */
.lesson-size {
    background-color: #f1f4f7;
    color: #5c6670;
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    font-weight: 500;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    min-width: 64px;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* ---- Level 3 : Lecture rows ---- */
.lecture-list {
    padding-inline: 0;  /* same alignment columns as modules & lessons, both edges */
    padding-bottom: 0.25rem;
}

.lecture-row {
    padding: 0.6rem 0;
    min-height: 40px;
    gap: 12px;
    border-bottom: 1px solid #f6f8fa;
    /* same pill treatment, same aligned columns on both edges */
    padding-inline: 8px;
    margin-inline: -8px;
    border-radius: 8px;
    transition: background-color .2s ease;
}

    .lecture-row:last-child {
        border-bottom: none;
    }

    .lecture-row:not(.disabled):hover {
        background-color: #f4f7fa;
    }

    .lecture-row.disabled {
        cursor: not-allowed;
    }

.lecture-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(0.7495rem, calc(0.7163rem + 0.1416vw), 0.8438rem);
    color: #3c4650;
    display:block !important;
    text-align:start;
}

.lecture-meta {
    flex-shrink: 0;
    white-space: nowrap;
    margin-inline-start: auto;
}

.lecture-row.disabled .lecture-name {
    color: #9aa0a6;
    pointer-events: none;
}

.lecture-row.disabled .lesson-size {
    color: #9aa0a6;
}

/* Module count & size in header: soft chips so they scan easily */
.module-size,
.module-lesson-count {
    font-weight: 500;
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    background-color: #f1f4f7;
    color: #5c6670 !important;
    padding: 2px 10px;
    border-radius: 999px;
    line-height: 1.6;
}

/* same fixed width as .lesson-size so time chips align in one column at every level */
.module-size {
    display: inline-block;
    min-width: 64px;
    text-align: center;
}

.module-size, .lesson-size, .lecture-size {
    min-width: 84px;
}

.topics-accordion .accordion-button:not(.collapsed) .module-lesson-count,
.topics-accordion .accordion-button:not(.collapsed) .module-size {
    background-color: color-mix(in srgb, var(-\-pio-blue-color) 10%, transparent);
    color: var(-\-pio-primary-color, var(-\-pio-blue-color)) !important;
}

/* ---- Diploma / package accordion (multiple courses inside a diploma) ---- */
.package-accordion {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.package-category-title {
    color: var(-\-pio-primary-color, var(-\-pio-blue-color));
    font-weight: 700;
    font-size: clamp(0.8738rem, calc(0.8294rem + 0.1895vw), 1rem);
    margin: 1.25rem 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

    /* soft rule after the category name so groups separate visually */
    .package-category-title::after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(to right, color-mix(in srgb, var(-\-pio-blue-color) 25%, transparent), transparent);
    }

.package-accordion > div > .package-category-title:first-child {
    margin-top: 0.25rem;
}

.package-course-item {
    border: 1px solid #e9edf1;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .package-course-item:not(:last-child) {
        margin-bottom: 12px;
    }

    .package-course-item:hover {
        border-color: #dbe4ec;
    }

.package-accordion .accordion-button {
    background: #fff;
    font-weight: 600;
    box-shadow: none;
    padding: 1.05rem 1.25rem;
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: none;
    cursor: pointer;
    text-align: start;
    font-size: clamp(0.8246rem, calc(0.7849rem + 0.1696vw), 0.9375rem);
    color: #111;
    transition: background-color .2s ease;
}

    .package-accordion .accordion-button:hover {
        background-color: #f7f8fa;
    }

    .package-accordion .accordion-button:focus {
        box-shadow: none;
    }

    .package-accordion .accordion-button:focus-visible {
        outline: 2px solid var(-\-pio-primary-color, var(-\-pio-blue-color));
        outline-offset: -2px;
        border-radius: 8px;
    }

    .package-accordion .accordion-button:not(.collapsed) {
        background-color: color-mix(in srgb, var(-\-pio-blue-color) 6%, transparent);
        box-shadow: inset 0 -1px 0 color-mix(in srgb, var(-\-pio-blue-color) 15%, transparent);
    }

        .package-accordion .accordion-button:not(.collapsed) .accordion-title {
            color: var(-\-pio-primary-color, var(-\-pio-blue-color));
        }

/* Interactive / Recorded type chips */
.course-type-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background-color: #f1f4f7;
    color: #5c6670;
    font-size: clamp(0.7241rem, calc(0.6929rem + 0.1329vw), 0.8125rem);
    flex-shrink: 0;
    transition: background-color .2s ease, color .2s ease;
}

.package-accordion .accordion-button:not(.collapsed) .course-type-chip {
    background-color: color-mix(in srgb, var(-\-pio-blue-color) 10%, transparent);
    color: var(-\-pio-primary-color, var(-\-pio-blue-color));
}

/* body that holds the nested topics of a diploma course */
.package-course-body {
    background-color: #fbfcfd;
    padding: 1rem 1.25rem;
}

    /* nested topic modules sit on the tinted body, keep them crisp */
    .package-course-body .topics-accordion .accordion-item {
        border-color: #e4e9ee;
    }

/* syllabus loading spinner: blend with the tinted body, brand-colored */
.package-syllabus-spinner {
    background: transparent;
    min-height: 110px;
}

    .package-syllabus-spinner .spinner {
        border-top-color: var(-\-pio-primary-color, var(-\-pio-blue-color));
    }

/* ---- Video preview modal ---- */
.video-preview-modal-content {
    border-radius: 14px;
    overflow: hidden;
    border: none;
}

.video-preview-modal-header {
    border-bottom: 1px solid #eee;
    padding: 0.85rem 1.25rem;
}

    .video-preview-modal-header .modal-title {
        font-weight: 600;
        font-size: clamp(0.8246rem, calc(0.7849rem + 0.1696vw), 0.9375rem);
        color: #111;
    }

.video-preview-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    background: #000;
}

.video-preview-iframe,
.video-preview-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* features & objective list */
.feature-list {
    list-style: none;
    padding-inline-start: 0; /* logical: left in LTR, right in RTL */
    margin: 0;
}

    .feature-list li {
        position: relative;
        padding-inline-start: 28px; /* space for bullet, flips with direction */
        margin-bottom: 22px;
        text-align: justify;
        line-height: 1.5;
    }

        .feature-list li:last-child {
            margin-bottom: 0;
        }

        .feature-list li::before {
            content: '';
            position: absolute;
            inset-inline-start: 0; /* left in LTR, right in RTL */
            top: 6px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(-\-pio-blue-color);
        }

.objective-list.feature-list li:before {
    top: 0px !important;
    background-color: #FFA000;
}
/* ******************************
   End bento-grid inner pages
 ****************************** */
/* ******************************
   Start More-certificate inner pages
 ****************************** */
.more-certificates-band {
    background-color: #FFA000; /* orange like the image */
    padding: 64px 48px;
    width: 100%;
}

.more-certificates-title {
    color: #111;
    font-size: clamp(1.8385rem, calc(1.6055rem + 0.9939vw), 2.5rem);
    margin-bottom: 1.25rem;
}

.more-certificates-desc {
    color: #fff;
    line-height: 1.8;
}

.line-clamp-5 {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: default;
}

.certificates-row {
    display: flex;
    flex-wrap: nowrap; /* keep on one line so they overflow, not wrap */
    gap: 2.5rem; /* space between certificates */
    overflow-x: auto; /* scroll when more than 3 */
    padding-bottom: 12px; /* room for the scrollbar */
    scroll-snap-type: x mandatory;
    justify-content: safe center; /* centered when ≤3, left-aligned + scroll when >3 */
}

.certificate-item {
    flex: 0 0 calc((100% - 5rem) / 3); /* exactly 3 across; 5rem = 2 × 2.5rem gap */
    max-width: calc((100% - 5rem) / 3);
    scroll-snap-align: center;
}

.certificate .img-container {
    width: 230px !important;
    height: 165px !important;
}

        .certificate .img-container img {
            box-shadow: 0 6px 18px rgba(0,0,0,.15);
            width: 100% !important;
            height: 100% !important;

        }

.cert-card {
    -\-cert-accent: var(-\-pio-primary-color);
}

.cert-card.cert-recorded {
    -\-cert-accent: var(-\-pio-blue-color);
}

.cert-card .cert-nav-btn {
    width: 30px;
    height: 30px;
    border-width: 1.5px;
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    padding: 0;
}

    .cert-card .cert-nav-btn:active {
        background-color: var(-\-cert-accent) !important;
        border-color: var(-\-cert-accent) !important;
    }

.cert-thumbs {
    -\-cert-thumb-w: 56px;
    -\-cert-thumb-h: 40px;
    -\-cert-thumb-gap: 8px;
    -\-cert-thumb-peek: 18px;
    -\-cert-thumbs-visible: 4;
    display: flex;
    flex-wrap: nowrap;
    gap: var(-\-cert-thumb-gap);
    width: fit-content;
    max-width: calc(var(-\-cert-thumbs-visible) * (var(-\-cert-thumb-w) + var(-\-cert-thumb-gap)) + var(-\-cert-thumb-peek));
    margin: 0 auto 1.25rem;
    padding: 4px 0 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(-\-cert-accent) rgba(0,0,0,.08);
}

    .cert-thumbs::-webkit-scrollbar {
        height: 4px;
    }

    .cert-thumbs::-webkit-scrollbar-track {
        background: rgba(0,0,0,.08);
        border-radius: 2px;
    }

    .cert-thumbs::-webkit-scrollbar-thumb {
        background: var(-\-cert-accent);
        border-radius: 2px;
    }

.cert-thumb {
    flex: 0 0 var(-\-cert-thumb-w);
    width: var(-\-cert-thumb-w);
    height: var(-\-cert-thumb-h);
    scroll-snap-align: center;
    padding: 0;
    background: none;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    opacity: .45;
    transition: opacity .2s ease-in-out, border-color .2s ease-in-out, transform .2s ease-in-out;
}

    .cert-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .cert-thumb:hover {
        opacity: .8;
    }

    .cert-thumb.is-active {
        opacity: 1;
        border-color: var(-\-cert-accent);
        transform: translateY(-2px);
    }

.cert-stage {
    display: flex;
    justify-content: center;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

.cert-card .certificate {
    width: 100%;
    max-width: 230px;
    transition: opacity .22s ease-out, transform .22s ease-out;
}

    .cert-card .certificate.is-changing {
        opacity: 0;
        transform: scale(.97);
        transition: none;
    }

.cert-card .certificate img {
    -webkit-user-drag: none;
}

.cert-card .certificate .img-container {
    width: 100% !important;
    height: auto !important;
}

.trainer-card .trainer-nav-btn {
    width: 30px;
    height: 30px;
    border-width: 1.5px;
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    padding: 0;
}

    .trainer-card .trainer-nav-btn:active {
        background-color: var(-\-pio-primary-color) !important;
        border-color: var(-\-pio-primary-color) !important;
    }

.trainer-thumbs {
    -\-trainer-thumb: 42px;
    -\-trainer-thumb-gap: 10px;
    display: flex;
    flex-wrap: nowrap;
    gap: var(-\-trainer-thumb-gap);
    width: fit-content;
    max-width: calc(5 * (var(-\-trainer-thumb) + var(-\-trainer-thumb-gap)) + 18px);
    margin: 0 auto 1.25rem;
    padding: 6px 4px 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

    .trainer-thumbs::-webkit-scrollbar {
        display: none;
    }

    .trainer-thumbs.is-fade-left {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 32px);
        mask-image: linear-gradient(to right, transparent, #000 32px);
    }

    .trainer-thumbs.is-fade-right {
        -webkit-mask-image: linear-gradient(to left, transparent, #000 32px);
        mask-image: linear-gradient(to left, transparent, #000 32px);
    }

    .trainer-thumbs.is-fade-left.is-fade-right {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
    }

.trainer-thumb {
    flex: 0 0 var(-\-trainer-thumb);
    width: var(-\-trainer-thumb);
    height: var(-\-trainer-thumb);
    scroll-snap-align: center;
    padding: 0;
    background: none;
    border: 2px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    opacity: .45;
    box-shadow: 0 0 0 1px #e8edf2;
    transition: opacity .25s ease, box-shadow .25s ease, transform .25s ease;
}

    .trainer-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .trainer-thumb:hover {
        opacity: .8;
    }

    .trainer-thumb.is-active {
        opacity: 1;
        box-shadow: 0 0 0 2px var(-\-pio-primary-color);
        transform: translateY(-2px);
    }

.trainer-stage {
    display: flex;
    justify-content: center;
    touch-action: pan-y;
}

.trainer-card .trainer-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: justify;
    transition: opacity .3s ease-out, transform .3s ease-out;
}

    .trainer-card .trainer-profile.is-changing {
        opacity: 0;
        transform: translateY(6px);
        transition: none;
    }

.trainer-card .trainer-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(-\-pio-primary-color);
    margin-bottom: .85rem;
    -webkit-user-drag: none;
}

.trainer-card .trainer-name {
    margin-bottom: .4rem;
}

.trainer-card .trainer-bio {
    overflow: hidden;
    max-height: 100rem;
    margin-bottom: 0;
    transition: max-height .4s ease;
}

    .trainer-card .trainer-bio.clamped {
        max-height: 4.9em;
    }

    .trainer-card .trainer-bio.clamped.is-overflowing {
        -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    }

.trainer-card .instructor-bio-toggle {
    align-self: center;
    color: var(-\-pio-primary-color);
}

    .trainer-card .instructor-bio-toggle i {
        transition: transform .25s ease;
    }

    .trainer-card .instructor-bio-toggle.expanded i {
        transform: rotate(180deg);
    }

    .cert-card .certificate .img-container img {
        height: auto !important;
        aspect-ratio: 230 / 165;
        object-fit: cover;
    }

.cert-card .certificate .description {
    overflow-wrap: anywhere;
}

.certificate-item .cert-type {
    color: #111;
    font-size: clamp(0.8738rem, calc(0.8294rem + 0.1895vw), 1rem);
    margin-bottom: .25rem;
}

    .certificate-item .cert-title {
        color: #111;
        font-size: clamp(0.8345rem, calc(0.7939rem + 0.1735vw), 0.95rem);
        font-weight: 400;
    }

/* thin scrollbar */
.certificates-row::-webkit-scrollbar {
    height: 6px;
}

.certificates-row::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.25);
    border-radius: 3px;
}

.certificates-row::-webkit-scrollbar-track {
    background: transparent;
}

/* ******************************
   End More-certificate inner pages
 ****************************** */

 /* ******************************
   start inquery modal inner pages
 ****************************** */

    /* Fix Bootstrap RTL border-radius inversion for LTR input groups */
    .inquiry-modal-v2 .input-group[dir="ltr"] > .input-group-text:first-child {
        border-top-left-radius: var(-\-bs-border-radius, 0.375rem) !important;
        border-bottom-left-radius: var(-\-bs-border-radius, 0.375rem) !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .inquiry-modal-v2 .input-group[dir="ltr"] > .form-control:not(:first-child) {
        border-top-right-radius: var(-\-bs-border-radius, 0.375rem) !important;
        border-bottom-right-radius: var(-\-bs-border-radius, 0.375rem) !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    /* Country code badge & submit button – default to recorded color */
    .inquiry-modal-v2 .inquiry-phone-code {
        background-color: var(-\-pio-blue-color);
        color: #fff;
        border-color: var(-\-pio-blue-color);
        font-weight: 600;
    }

    .inquiry-modal-v2 .inquiry-submit-btn {
        background-color: var(-\-pio-blue-color);
        color: #fff;
        border-color: var(-\-pio-blue-color);
    }

    /* Input focus default (recorded) */
    .inquiry-modal-v2 .inquiry-input:focus {
        border-color: var(-\-pio-blue-color);
        box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(-\-pio-blue-color) 25%, transparent);
    }

    /* Interactive mode override */
    .inquiry-modal-v2.interactive .inquiry-phone-code {
        background: var(-\-pio-primary-color) !important;
        background-color: var(-\-pio-primary-color) !important;
        border-color: var(-\-pio-primary-color) !important;
    }

    .inquiry-modal-v2.interactive .inquiry-submit-btn {
        background: var(-\-pio-primary-color) !important;
        background-color: var(-\-pio-primary-color) !important;
        border-color: var(-\-pio-primary-color) !important;
    }

    /* Input focus interactive */
    .inquiry-modal-v2.interactive .inquiry-input:focus {
        border-color: var(-\-pio-primary-color) !important;
        box-shadow: 0 0 0 0.25rem rgba(255, 160, 0, 0.25) !important;
    }

 /* ******************************
   End inquery modal inner pages
 ****************************** */

/* ── Diploma course dropdown (Bento style overrides) ── */
.diploma-course-selector-card {
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.diploma-course-selector-card .form-select:focus {
    border-color: var(-\-pio-blue-color);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(-\-pio-blue-color) 30%, transparent);
}

.interactive .diploma-course-selector-card .form-select:focus {
    border-color: var(-\-pio-primary-color);
    box-shadow: 0 0 0 0.2rem rgba(255, 160, 0, 0.3);
}

/* ******************************
   Buy-courses selection modal
   ****************************** */
.buy-courses-modal .modal-header {
    padding: 1rem 1.5rem 0;
}

.buy-courses-modal .modal-title {
    font-size: clamp(0.9127rem, calc(0.8643rem + 0.2063vw), 1.05rem);
}

/* The section LIST grows with its content and only starts scrolling once it
   gets tall (its own cap). The course name, validation and action buttons
   always stay in normal flow directly BELOW the list - never overlapping it. */
.buy-courses-modal .buy-courses-list {
    max-height: 60vh;
    overflow-y: auto;
    padding-inline-end: 4px;
    margin-top: 1rem;
}

.buy-courses-modal .buy-category-title {
    font-size: clamp(0.7138rem, calc(0.6835rem + 0.1294vw), 0.8rem);
    font-weight: 700;
    color: #888;
    margin: 0.9rem 0 0.35rem;
}

.buy-courses-modal .buy-course-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    padding: 0.55rem 0.85rem;
    margin-bottom: 0.5rem;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

    .buy-courses-modal .buy-course-item .form-check-input {
        float: none;
        margin: 0;
        flex-shrink: 0;
        width: 1.15rem;
        height: 1.15rem;
        cursor: pointer;
    }

    .buy-courses-modal .buy-course-item .form-check-label {
        cursor: pointer;
        font-size: clamp(0.7948rem, calc(0.7577rem + 0.1581vw), 0.9rem);
        flex-grow: 1;
    }

    .buy-courses-modal .buy-course-item:hover {
        border-color: var(-\-pio-blue-color);
    }

/* checkbox checked / focus - recorded (default) */
.buy-courses-modal .form-check-input:checked {
    background-color: var(-\-pio-blue-color);
    border-color: var(-\-pio-blue-color);
}

.buy-courses-modal .form-check-input:focus {
    border-color: var(-\-pio-blue-color);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(-\-pio-blue-color) 25%, transparent);
}

/* checkbox checked / focus - interactive override */
.buy-courses-modal.interactive .form-check-input:checked {
    background-color: var(-\-pio-primary-color) !important;
    border-color: var(-\-pio-primary-color) !important;
}

.buy-courses-modal.interactive .form-check-input:focus {
    border-color: var(-\-pio-primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 160, 0, 0.25) !important;
}

.buy-courses-modal.interactive .buy-course-item:hover {
    border-color: var(-\-pio-primary-color);
}

/* main course row - locked */
.buy-courses-modal .buy-course-main {
    background-color: #f8f9fa;
}

    .buy-courses-modal .buy-course-main .form-check-input:disabled {
        opacity: 1;
    }

.buy-courses-modal .buy-included-badge {
    font-size: clamp(0.6311rem, calc(0.6068rem + 0.1035vw), 0.7rem);
    font-weight: 600;
    color: #fff;
    background-color: var(-\-pio-blue-color);
    border-radius: 2rem;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}

.buy-courses-modal.interactive .buy-included-badge {
    background-color: var(-\-pio-primary-color);
}

/* ==============================================================
   Buy / enroll modal follows the page theme:
     light page -> light modal (its default look)
     dark page  -> dark modal
   (.buy-courses-modal is the .modal-content element)
   ============================================================== */

/* light page -> LIGHT modal.
   The colour is published as a variable too: the selected payment tile draws a
   ring that sits on this background, and needs it under the ring to read as a
   ring rather than as a halo. */
body[data-bs-theme="light"] .buy-courses-modal {
    -\-pio-buy-modal-bg: #fff;
    background-color: #fff;
    color: #111;
}

    body[data-bs-theme="light"] .buy-courses-modal .modal-title,
    body[data-bs-theme="light"] .buy-courses-modal .fw-bold,
    body[data-bs-theme="light"] .buy-courses-modal .form-check-label {
        color: #111;
    }

    body[data-bs-theme="light"] .buy-courses-modal .btn-close {
        filter: none;
    }

/* dark page -> DARK modal */
body[data-bs-theme="dark"] .buy-courses-modal {
    -\-pio-buy-modal-bg: #10141c;
    background-color: #10141c;
    color: #fff;
}

    body[data-bs-theme="dark"] .buy-courses-modal .modal-title,
    body[data-bs-theme="dark"] .buy-courses-modal .fw-bold,
    body[data-bs-theme="dark"] .buy-courses-modal .form-check-label {
        color: #fff;
    }

    body[data-bs-theme="dark"] .buy-courses-modal .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
        padding: 10px 0 !important;
    }

    body[data-bs-theme="dark"] .buy-courses-modal .buy-course-main {
        background-color: rgba(255, 255, 255, 0.05);
    }

    body[data-bs-theme="dark"] .buy-courses-modal .buy-course-item,
    body[data-bs-theme="dark"] .buy-courses-modal .buy-section-item {
        border-color: rgba(255, 255, 255, 0.16);
    }

    body[data-bs-theme="dark"] .buy-courses-modal .buy-section-meta,
    body[data-bs-theme="dark"] .buy-courses-modal .buy-section-meta b {
        color: #aab2bd;
    }

/* section option rows in the select-section state */
.buy-courses-modal .buy-section-item {
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

    .buy-courses-modal .buy-section-item .form-check-input {
        cursor: pointer;
        flex-shrink: 0;
    }

    .buy-courses-modal .buy-section-item .buy-section-meta {
        display: flex;
        align-items: center;
        gap: .45rem;
        font-size: clamp(0.6985rem, calc(0.6693rem + 0.1244vw), 0.7812rem);
        color: #6b7075;
    }

        .buy-courses-modal .buy-section-item .buy-section-meta i {
            width: 14px;
            text-align: center;
            color: var(-\-pio-blue-color);
        }

    /* chosen section stands out */
    .buy-courses-modal .buy-section-item.selected {
        border-color: var(-\-pio-blue-color);
        background-color: color-mix(in srgb, var(-\-pio-blue-color) 5%, transparent);
    }

.buy-courses-modal.interactive .buy-section-item .buy-section-meta i {
    color: var(-\-pio-primary-color);
}

.buy-courses-modal.interactive .buy-section-item.selected {
    border-color: var(-\-pio-primary-color);
    background-color: rgba(255, 160, 0, .07);
}

.buy-courses-modal .buy-courses-list-compact {
    margin-top: 0.5rem;
}

    .buy-courses-modal .buy-courses-list-compact .buy-section-row {
        margin-bottom: 0.4rem;
    }

.buy-courses-modal .buy-section-row .buy-section-compact {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    align-items: flex-start;
}

    .buy-courses-modal .buy-section-compact .form-check-input {
        margin-top: 0.1rem;
    }

    .buy-courses-modal .buy-section-item .buy-section-meta.buy-section-when,
    .buy-courses-modal .buy-section-compact .buy-section-meta {
        flex-wrap: wrap;
        column-gap: 0.9rem;
        row-gap: 0.15rem;
        line-height: 1.35;
    }

    .buy-courses-modal .buy-section-item .buy-section-when {
        color: #3a3f44;
    }

body[data-bs-theme="dark"] .buy-courses-modal .buy-section-item .buy-section-when,
body[data-bs-theme="dark"] .buy-courses-modal .buy-section-item .buy-section-when b {
    color: #e2e6ea;
}

.buy-courses-modal .buy-duplicate-icon {
    color: var(-\-pio-blue-color);
}

.buy-courses-modal.interactive .buy-duplicate-icon {
    color: var(-\-pio-primary-color);
}

/* cart page: item thumbnail */
.cart-item-thumb {
    width: 72px;
    height: 48px;
    object-fit: cover;
    border-radius: 0.5rem;
    flex-shrink: 0;
}

/* badge showing which mode (recorded / live) is being bought */
.buy-courses-modal .buy-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: clamp(0.6311rem, calc(0.6068rem + 0.1035vw), 0.7rem);
    font-weight: 600;
    color: #fff;
    background-color: var(-\-pio-blue-color);
    border-radius: 2rem;
    padding: 0.2rem 0.65rem;
    white-space: nowrap;
}

.buy-courses-modal.interactive .buy-mode-badge {
    background-color: var(-\-pio-primary-color);
}

/* secondary "continue shopping" button in the added-to-cart state */
.buy-courses-modal .buy-continue-btn {
    border: 1px solid var(-\-pio-blue-color);
    color: var(-\-pio-blue-color);
    border-radius: 0.5rem;
    padding: 0.6rem 1.5rem;
    font-size: clamp(0.8345rem, calc(0.7939rem + 0.1735vw), 0.95rem);
    font-weight: 600;
}

.buy-courses-modal.interactive .buy-continue-btn {
    border-color: var(-\-pio-primary-color);
    color: var(-\-pio-primary-color);
}

/* ---- Buy Now, step two: the payment method ----
   Deliberately thin. Everything inside this step - the pay buttons, the
   certificate cards, the total row, the guards and the alerts - is drawn with
   the CART's classes (.cart-pay-*, .cart-cert-*, .cart-subtotal-*), which are
   global and were never scoped to the cart page. That is the point: buying one
   course from its own page and checking out a basket must not look like two
   different products. Only the frame around them is new.

   The step no longer scrolls. It used to have to: the summary listed one meta
   per line, the certificates were full cart-sized cards, and every payment
   method was a full-width button stacked under the last, so four providers
   pushed the total and the actions past the bottom of a phone screen and the
   whole step got max-height: 60vh and an overflow of its own.

   Each of those three is compact now - inline metas, small certificate rows, a
   grid of square method tiles with ONE button under it - so everything the
   visitor has to read before paying is on screen at once. The only thing still
   allowed to scroll is the certificate list, which is the one part with no
   upper bound on how many rows a course can have. */
.buy-payment-step {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* what is being bought, above the money */
.buy-pay-summary {
    padding: .6rem .75rem;
    border: 1px solid rgba(128, 128, 128, .25);
    border-radius: 10px;
}

    .buy-pay-summary p:last-child {
        margin-bottom: 0;
    }

/* the metas run inline and wrap: a classroom course with a date range and a
   place used to cost three stacked lines and now costs one or two */
.buy-pay-metas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem .9rem;
    margin-top: .3rem;
}

.buy-pay-meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: #9298a1;
    font-size: clamp(0.7948rem, calc(0.7577rem + 0.1581vw), 0.9rem);
}

    .buy-pay-metas .buy-pay-meta + .buy-pay-meta {
        margin-top: 0;
    }

    .buy-pay-meta i {
        color: var(-\-pio-blue-color);
    }

.buy-courses-modal.interactive .buy-pay-meta i {
    color: var(-\-pio-primary-color);
}

/* the total sits tighter here than in the cart summary, where it is the top of
   a whole column rather than one block among several */
.buy-payment-step .cart-subtotal-row.buy-pay-total {
    margin-bottom: 0;
    padding-top: .5rem;
    border-top: 1px solid rgba(128, 128, 128, .25);
}

/* the flex gap above already spaces these; their own margins would double it */
.buy-payment-step .cart-certs,
.buy-payment-step .cart-pay-guard,
.buy-payment-step .cart-pay-btn {
    margin-top: 0;
    margin-bottom: 0;
}

/* ---- certificates, compact ----
   Kept in full - which certificate comes with a course, and which one costs
   extra, is part of what is being paid for and must not be hidden behind a
   toggle at the moment of payment. They are just drawn tighter here than on the
   cart page: a smaller plate, a single-line title, and a bounded list. The list
   is the only part of the step with no upper bound on its length, so it is the
   only part with a scroll of its own. */
.buy-payment-step .cart-certs-panel {
    gap: .35rem;
    padding-top: 0;
    /* two rows in full and a sliver of the next, so a longer list reads as
       scrollable rather than as if it ended */
    max-height: 7.5rem;
    overflow-y: auto;
}

.buy-payment-step .cart-cert-card {
    gap: .6rem;
    padding: .35rem .5rem;
    border-radius: 8px;
}

.buy-payment-step .cart-cert-img {
    width: 50px;
    height: 36px;
    border-radius: 4px;
}

.buy-payment-step .cart-cert-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(0.7545rem, calc(0.7209rem + 0.1434vw), 0.85rem);
}

.buy-payment-step .cart-cert-type {
    display: none;
}

/* ---- the payment methods, as a grid of squares ----
   One method used to be one FULL-WIDTH button, stacked under the last. Four
   providers were four rows, which is what forced the step to scroll.
   Splitting the job in two fixes it: the tiles PICK, and the single button
   under them PAYS. That is also why a tile is safe to tap - selecting is free,
   and nothing is charged until the one button below is pressed. */
.pay-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.25rem, 1fr));
    gap: .5rem;
}

.pay-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    /*aspect-ratio: 1 / 1;*/
    padding: .4rem .3rem;
    border: none;
    border-radius: 10px;
    opacity: .45;
    cursor: pointer;
    transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

    .pay-tile:hover {
        opacity: .8;
    }

    /* the ring is drawn OUTSIDE the tile, on the modal's own background, so it
       needs the modal colour under it to read as a ring and not as a smudge */
    .pay-tile.is-selected {
        opacity: 1;
        transform: translateY(-2px);
        box-shadow: 0 0 0 2px var(-\-pio-buy-modal-bg, #fff), 0 0 0 4px var(-\-pio-blue-color);
    }

    /* a method this page cannot finish. Still clickable - tapping it says why
       (see selectPayMethod) instead of leaving a dead square with no reason */
    .pay-tile.is-off {
        opacity: .3;
        filter: grayscale(.9);
        cursor: not-allowed;
    }

    .pay-tile:disabled {
        cursor: not-allowed;
    }

    /* last, so it wins over .is-selected's own transform while pressed */
    .pay-tile:active {
        transform: scale(.96);
    }

.buy-courses-modal.interactive .pay-tile.is-selected {
    box-shadow: 0 0 0 2px var(-\-pio-buy-modal-bg, #fff), 0 0 0 4px var(-\-pio-primary-color, #F5821F);
}

.pay-tile-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    fill: currentColor;
}

span.pay-tile-icon {
    display: inline-flex;
}

    span.pay-tile-icon > svg {
        display: block;
        width: 100%;
        height: 100%;
    }

.pay-tile-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.15;
    text-align: center;
    font-size: clamp(0.625rem, calc(0.5949rem + 0.1284vw), 0.72rem);
    font-weight: 600;
    unicode-bidi: isolate;
}

/* on every tile and revealed with a class, never added and removed: an element
   that comes and goes here would be one more node for font-awesome's rewriter
   to take ownership of, and a class can be animated */
.pay-tile-check {
    position: absolute;
    top: .3rem;
    inset-inline-end: .3rem;
    width: 11px;
    height: 11px;
    fill: currentColor;
    opacity: 0;
    transform: scale(.5);
    transition: opacity .18s ease, transform .18s ease;
}

.pay-tile.is-selected .pay-tile-check {
    opacity: 1;
    transform: scale(1);
}

/* one action for the active tile, with Back beside it rather than under it */
.pay-confirm {
    display: flex;
    align-items: stretch;
    gap: .5rem;
}

    /* the brand colour is written inline by payStyle and changes as the pick
       changes, so it is transitioned - the button recolours rather than jumps */
    .pay-confirm .pay-confirm-btn {
        flex: 1 1 auto;
        min-width: 0;
        margin-bottom: 0;
        padding: .7rem 1rem;
        transition: filter .15s ease, background-color .2s ease, color .2s ease;
    }

        .pay-confirm .pay-confirm-btn > span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

.pay-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    flex: 0 0 auto;
    padding: .7rem .85rem;
    border: 1px solid rgba(128, 128, 128, .4);
    border-radius: 9px;
    background-color: transparent;
    color: inherit;
    font-size: clamp(0.8rem, calc(0.7714rem + 0.1219vw), 0.8875rem);
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

    .pay-back-btn:hover {
        border-color: var(-\-pio-blue-color);
        background-color: rgba(128, 128, 128, .12);
    }

    .pay-back-btn:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.buy-courses-modal.interactive .pay-back-btn:hover {
    border-color: var(-\-pio-primary-color, #F5821F);
}

.pay-back-arrow {
    width: 14px;
    height: 14px;
}

/* the line under "Payment complete" / "You are enrolled" */
.buy-paid-note {
    max-width: 30ch;
    color: #9298a1;
    font-size: clamp(0.7948rem, calc(0.7577rem + 0.1581vw), 0.9rem);
}

.buy-courses-modal .buy-failed-icon circle,
.buy-courses-modal .buy-failed-icon path {
    stroke: #DC3545 !important;
}
/* ******************************
   End buy-courses selection modal
   ****************************** */

/* ******************************
   Interactive delivery-method selector (live / classroom)
   Used in the schedule card AND the buy modal. Interactive is the orange
   brand color (--pio-primary-color).
   ****************************** */
.method-select {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.method-select-label {
    font-size: clamp(0.6985rem, calc(0.6693rem + 0.1244vw), 0.7812rem);
    font-weight: 600;
    color: #5c6670;
}

.method-segment {
    display: flex;
    gap: 4px;
    background: #e9eef3;
    border-radius: 999px;
    padding: 4px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
}

.method-segment-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: #5c6670;
    font-size: clamp(0.7241rem, calc(0.6929rem + 0.1329vw), 0.8125rem);
    font-weight: 600;
    padding: 7px 10px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

    .method-segment-btn i {
        font-size: clamp(0.7241rem, calc(0.6929rem + 0.1329vw), 0.8125rem);
    }

    .method-segment-btn.active {
        background: var(-\-pio-primary-color, var(-\-pio-blue-color));
        color: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    }

/* locked: the section is in the cart, so the method can no longer be changed
   (remove it from the cart first). The chosen side stays highlighted. */
.method-segment.locked {
    cursor: not-allowed;
    opacity: .9;
}

    .method-segment.locked .method-segment-btn {
        cursor: not-allowed;
    }

    .method-segment.locked .method-segment-btn:not(.active) {
        opacity: .45;
    }

.method-locked-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.method-lock {
    font-size: clamp(0.6206rem, calc(0.597rem + 0.1005vw), 0.6875rem);
    color: var(-\-pio-primary-color, var(-\-pio-blue-color));
}

/* ---- buy modal: each section is ONE integrated card ----
   radio + details on top, the section's own delivery-method toggle as a
   footer of the SAME card (not a detached block under it) */
.buy-courses-modal .buy-section-row {
    position: relative;
    border: 1px solid #e0e0e0;
    border-radius: 0.65rem;
    margin-bottom: 0.6rem;
    overflow: hidden;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    /* the label is the card's content, not its own card */
    .buy-courses-modal .buy-section-row .buy-section-item {
        border: none;
        border-radius: 0;
        margin: 0;
        background: transparent;
        padding-inline-end: 0.85rem;
    }

    /* only the SELECTED row renders the corner toggle, so only it reserves
       room in the top-end corner for that absolutely-positioned toggle */
    .buy-courses-modal .buy-section-row.selected .buy-section-item {
        padding-inline-end: 8rem;
    }

/* FUNCTIONAL method toggle, absolutely positioned in the selected card's
   top-end corner (rendered only for the selected section). The ACTIVE side
   shows its icon + type; the other side is an icon-only dot. */
.buy-courses-modal .buy-section-method-mini {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    z-index: 2;
    gap: 2px;
    padding: 2px;
}

    .buy-courses-modal .buy-section-method-mini .method-segment-btn {
        flex: 0 0 auto;
        min-width: 26px;
        height: 26px;
        padding: 0;
        gap: 0;
    }

        .buy-courses-modal .buy-section-method-mini .method-segment-btn i {
            font-size: clamp(0.6206rem, calc(0.597rem + 0.1005vw), 0.6875rem);
        }

        /* the non-active side stays an icon-only dot */
        .buy-courses-modal .buy-section-method-mini .method-segment-btn span {
            display: none;
        }

        /* the active side expands to reveal its icon + type */
        .buy-courses-modal .buy-section-method-mini .method-segment-btn.active {
            padding: 0 10px;
            gap: 5px;
        }

            .buy-courses-modal .buy-section-method-mini .method-segment-btn.active span {
                display: inline;
                font-size: clamp(0.6206rem, calc(0.597rem + 0.1005vw), 0.6875rem);
                font-weight: 600;
                white-space: nowrap;
            }

/* lock note in the actions area: shown when the selected section is in the
   cart, so its in-card method toggle is frozen until it's removed */
.buy-method-locked-note {
    font-size: clamp(0.6985rem, calc(0.6693rem + 0.1244vw), 0.7812rem);
    font-weight: 600;
    color: #5c6670;
}

    .buy-courses-modal .buy-section-row:hover {
        border-color: var(-\-pio-blue-color);
    }

    .buy-courses-modal .buy-section-row.selected {
        border-color: var(-\-pio-blue-color);
        background-color: color-mix(in srgb, var(-\-pio-blue-color) 4%, transparent);
        box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    }

.buy-courses-modal.interactive .buy-section-row:hover {
    border-color: var(-\-pio-primary-color);
}

.buy-courses-modal.interactive .buy-section-row.selected {
    border-color: var(-\-pio-primary-color);
    background-color: rgba(255, 160, 0, .05);
}

/* method toggle as the card footer, hairline-tied to the details above it */
.buy-courses-modal .buy-section-method {
    padding: 0.55rem 0.85rem 0.7rem;
    border-top: 1px dashed #e6e6e6;
    background-color: rgba(0, 0, 0, .015);
}

.buy-courses-modal .buy-section-row.selected .buy-section-method {
    border-top-color: color-mix(in srgb, var(-\-pio-blue-color) 22%, transparent);
    background-color: color-mix(in srgb, var(-\-pio-blue-color) 3%, transparent);
}

.buy-courses-modal.interactive .buy-section-row.selected .buy-section-method {
    border-top-color: rgba(255, 160, 0, .28);
    background-color: rgba(255, 160, 0, .04);
}

    /* tighter, caption-like label inside the compact footer */
    .buy-courses-modal .buy-section-method .method-select-label {
        font-size: clamp(0.6467rem, calc(0.6214rem + 0.1082vw), 0.7188rem);
    }

/* dark modal (dark page): invert card + footer borders */
body[data-bs-theme="dark"] .buy-courses-modal .buy-section-row {
    border-color: rgba(255, 255, 255, .16);
    background: transparent;
}

body[data-bs-theme="dark"] .buy-courses-modal .buy-section-method {
    border-top-color: rgba(255, 255, 255, .14);
    background-color: rgba(255, 255, 255, .03);
}

body[data-bs-theme="dark"] .buy-courses-modal .method-select-label {
    color: #aab2bd;
}

/* single available method: a static chip, no toggle */
.method-single {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    background: #eef2f6;
    color: #37414b;
    font-size: clamp(0.7241rem, calc(0.6929rem + 0.1329vw), 0.8125rem);
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
}

/* dark theme forces .bento-card span { color:#212529 } - keep the ACTIVE
   segment's label/icon white so it stays readable on the brand fill */
.bento-card .method-segment-btn.active,
.bento-card .method-segment-btn.active span,
.bento-card .method-segment-btn.active i {
    color: #fff !important;
}

.selected-course-method {
    font-size: clamp(0.6985rem, calc(0.6693rem + 0.1244vw), 0.7812rem);
    font-weight: 600;
    color: #5c6670;
}

/* ******************************
   Schedule card (interactive) - right bento column
   ****************************** */
.schedule-card .schedule-nav-btn {
    width: 30px;
    height: 30px;
    border-width: 1.5px;
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    padding: 0;
}

/* exactly ONE card visible at a time: with slidesPerView 'auto'
   the slide's own width decides, so pin it to the full container */
.schedule-swiper {
    display: block;
    width: 100%;
    overflow: hidden;
}

swiper-slide.schedule-slide {
    width: 100% !important;
    box-sizing: border-box;
    height: auto;
}

/* the bento card stays WHITE in dark mode, but dark-theme-v2 forces every
   .bento-card span to #212529 - the 2-class selector + !important wins back
   the intended colors in BOTH themes */
.schedule-card .schedule-muted {
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    color: #8a9098 !important;
}

/* day chips: only the days the section actually meets are rendered */
.schedule-card .schedule-days {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    align-content: flex-start;
}

.schedule-card .schedule-session .schedule-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background-color: rgba(5, 83, 134, .07);
    color: var(-\-pio-blue-color, #055386) !important;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.schedule-card .schedule-session {
    position: relative;
    padding: 1rem;
    border: 1px solid #e7eaee;
    border-radius: 0.75rem;
    background-color: #fff;
}

/* pagination dots: which section you are on + that there are more */
.schedule-swiper::part(pagination) {
    position: static;
    margin-top: 10px;
}

.schedule-swiper::part(bullet) {
    width: 7px;
    height: 7px;
    background: #d4dae0;
    opacity: 1;
}

.schedule-swiper::part(bullet-active) {
    width: 18px;
    border-radius: 999px;
    background: var(-\-pio-primary-color);
}

.schedule-card .schedule-meta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed #dde3ea;
}

.schedule-card .schedule-meta::before,
.schedule-card .schedule-meta::after {
    content: "";
    position: absolute;
    bottom: -0.5625rem;
    box-sizing: border-box;
    width: 0.5625rem;
    height: 1.125rem;
    border: 1px solid #e7eaee;
    background-color: #fff;
}

.schedule-card .schedule-meta::before {
    inset-inline-start: calc(-1rem - 1px);
    border-inline-start: 0;
    border-start-end-radius: 0.5625rem;
    border-end-end-radius: 0.5625rem;
}

.schedule-card .schedule-meta::after {
    inset-inline-end: calc(-1rem - 1px);
    border-inline-end: 0;
    border-start-start-radius: 0.5625rem;
    border-end-start-radius: 0.5625rem;
}

.schedule-card .schedule-line {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.schedule-card .schedule-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background-color: rgba(5, 83, 134, .08);
    color: var(-\-pio-blue-color, #055386);
}

.schedule-card .schedule-icon svg {
    width: 1rem;
    height: 1rem;
}

.schedule-card .schedule-when-date {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem 0.5rem;
    min-width: 0;
}

.schedule-card .schedule-when-date,
.schedule-card .schedule-time {
    color: #253444;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.schedule-card .schedule-time {
    white-space: nowrap;
}

.schedule-card .schedule-arrow {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    color: #9aa5b1;
}

.schedule-card .schedule-arrow:lang(ar) {
    transform: scaleX(-1);
}

.schedule-card .schedule-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding-top: 0.125rem;
}

.schedule-card .schedule-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    padding: 0.2rem 0.625rem;
    border-radius: 999px;
    background-color: #f1f4f7;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
}

.schedule-card .schedule-session .schedule-tag span {
    color: #4a5868 !important;
}

.schedule-card .schedule-tag svg {
    flex: none;
    width: 0.8125rem;
    height: 0.8125rem;
    color: #8a94a0;
}

.schedule-card .schedule-muted {
    font-size: clamp(0.6206rem, calc(0.597rem + 0.1005vw), 0.6875rem);
}

/* schedule action buttons use the pio-framework utilities:
   btn-pio-outline-primary (Buy it now) + btn-pio-primary (Enroll) */
/* ******************************
   End schedule card
   ****************************** */

/* ******************************
   Video preview modal
   (follows the page theme: light page -> light modal, dark page -> dark modal)
   ****************************** */
.video-preview-modal .modal-content {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
}

.video-preview-modal .modal-header {
    padding: 1rem 1.25rem 0;
}

.video-preview-modal .modal-header-extention {
    padding: 1rem 1.25rem 0;
}

.video-preview-modal .video-preview-eyebrow {
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    font-weight: 600;
    letter-spacing: .02em;
    opacity: .6;
    margin-bottom: .25rem;
}

.video-preview-modal .modal-title {
    font-weight: 700;
    font-size: clamp(0.9127rem, calc(0.8643rem + 0.2063vw), 1.05rem);
}

.video-preview-modal .modal-body .ratio {
    border-radius: .5rem;
    overflow: hidden;
}

/* page DARK -> modal DARK */
body[data-bs-theme="dark"] .video-preview-modal .modal-content {
    background-color: #10141c;
    color: #fff;
}

body[data-bs-theme="dark"] .video-preview-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* page LIGHT -> modal LIGHT */
body[data-bs-theme="light"] .video-preview-modal .modal-content {
    background-color: #fff;
    color: #111;
}

body[data-bs-theme="light"] .video-preview-modal .btn-close {
    filter: none;
}
/* ******************************
   End video preview modal
   ****************************** */

/* ******************************
   Selected courses (cart) page V2
   ****************************** */
.selected-courses-page .selected-courses-count {
    font-size: clamp(0.7545rem, calc(0.7209rem + 0.1434vw), 0.85rem);
    font-weight: 600;
    color: #fff;
    background-color: var(-\-pio-blue-color);
    border-radius: 2rem;
    padding: 0.2rem 0.75rem;
    white-space: nowrap;
}

.selected-courses-page .selected-courses-empty i {
    color: var(-\-pio-blue-color);
}

.selected-courses-page .selected-courses-group {
    border: 1px solid #e0e0e0;
    border-radius: 0.75rem;
    overflow: hidden;
}

.selected-courses-page .selected-courses-group-header {
    background-color: #f8f9fa;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e0e0e0;
}

.selected-courses-page .selected-course-row {
    padding: 0.75rem 1rem;
}

    .selected-courses-page .selected-course-row + .selected-course-row {
        border-top: 1px solid #eee;
    }

.selected-courses-page .selected-course-name {
    font-size: clamp(0.8345rem, calc(0.7939rem + 0.1735vw), 0.95rem);
}

.selected-courses-page .selected-course-remove {
    border: none;
    color: #dc3545;
}
/* ******************************
   End selected courses (cart) page V2
   ****************************** */

/* ******************************
   Cart page V2 - table layout (matches the checkout design). Colours are
   theme-neutral (inherit / translucent grey) so it works in light + dark.
   ****************************** */

.cart-page-v2 {
    max-width: 1280px;
}

.cart-head-title {
    font-size: clamp(1.8385rem, calc(1.6055rem + 0.9939vw), 2.5rem);
    font-weight: 800;
}

.cart-continue-link {
    color: inherit;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

    .cart-continue-link:hover {
        color: var(-\-pio-primary-color, #F5821F);
    }

/* Page body: lines + summary side by side. The summary is the SECOND child, so
   the grid puts it on the inline-end edge in both directions (right in EN, left
   in AR) with no direction-specific rules. */
.cart-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 2rem;
    align-items: start;
}

.cart-main {
    min-width: 0; /* let long course names wrap instead of stretching the grid */
}

/* shared 3-column grid for the header + the top strip of each row.
   Certificates are NOT a column - they hang under the row (.cart-certs). */
.cart-table-head,
.cart-row-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem 8rem;
    gap: 1rem;
    align-items: start;
}

.cart-table-head {
    padding-bottom: .85rem;
    border-bottom: 1px solid rgba(128, 128, 128, .28);
    font-weight: 700;
}

    .cart-table-head .col-total {
        text-align: end;
    }

.cart-row {
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(128, 128, 128, .18);
}

/* Product cell */
.cart-row .col-product {
    display: flex;
    gap: 1rem;
}

.cart-prod-thumb {
    width: 130px;
    height: 92px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 10px;
}

.cart-prod-name {
    font-weight: 700;
    line-height: 1.3;
}

.cart-prod-instructor {
    color: #9298a1;
    font-size: clamp(0.7948rem, calc(0.7577rem + 0.1581vw), 0.9rem);
}

/* recorded / live / classroom badge - same visual language as the navbar
   popup's .cart-popup-method, sized for the roomier cart row */
.cart-prod-method {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    background-color: rgba(255, 160, 0, .1);
    color: #a76c00; /* darkened primary: the amber itself fails contrast on the tint */
    font-size: clamp(0.7138rem, calc(0.6835rem + 0.1294vw), 0.8rem);
    font-weight: 600;
}

/* ---- revalidation state (POST /v2/Cart/Items) ---- */

/* banner above the table: checking / check failed / lines need attention */
.cart-alert {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    padding: .8rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: clamp(0.8345rem, calc(0.7939rem + 0.1735vw), 0.95rem);
}

.cart-alert-info {
    border-color: rgba(128, 128, 128, .3);
    background-color: rgba(128, 128, 128, .08);
}

.cart-alert-danger {
    border-color: rgba(220, 53, 69, .35);
    background-color: rgba(220, 53, 69, .08);
    color: #b02a37;
}

/* #b02a37 is a dark red chosen to sit on a near-white page; on the dark theme it
   is barely legible against a translucent red fill. Lighten it there - the
   border and background are alpha-based and work on both, only the text needs
   the swap. .cart-alert-btn and .cart-pay-guard.is-actionable inherit it through
   `color: inherit` / currentColor. */
body[data-bs-theme="dark"] .cart-alert-danger,
body[data-bs-theme="dark"] .cart-pay-guard.is-actionable {
    color: #ff8f99;
}

/* Paid: the green counterpart of .cart-alert-danger, on the same rgba(40,167,69)
   the payment-reference block already uses so the two agree. Same dark-theme
   treatment as the red one - only the text needs lightening, the alpha border
   and fill carry over. */
.cart-alert-success {
    border-color: rgba(40, 167, 69, .35);
    background-color: rgba(40, 167, 69, .08);
    color: #1a7f37;
}

body[data-bs-theme="dark"] .cart-alert-success {
    color: #6fd18a;
}

    /* .cart-alert-btn:hover tints red for the danger banner it was written for */
    .cart-alert-success .cart-alert-btn:hover {
        background-color: rgba(40, 167, 69, .12);
    }

/* the button is an <a> in the success banner */
a.cart-alert-btn {
    text-decoration: none;
}

/* the gateway's own wording, shown under ours - a detail, not a second voice */
.cart-alert em {
    font-style: normal;
    opacity: .8;
}

.cart-alert-btn {
    margin-inline-start: auto;
    padding: .25rem .8rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: none;
    color: inherit;
    font-size: clamp(0.7545rem, calc(0.7209rem + 0.1434vw), 0.85rem);
    font-weight: 600;
    cursor: pointer;
}

    .cart-alert-btn:hover {
        background-color: rgba(220, 53, 69, .12);
    }

/* a line the server rejected: tinted red with a rule down its leading edge so
   the whole row reads as one blocked unit */
.cart-row-blocked {
    background-color: rgba(220, 53, 69, .06);
    border-inline-start: 3px solid #dc3545;
    padding-inline: .75rem;
}

/* one-off pulse when "Show me" points at the row. It washes a translucent red
   OVER the row with an inset shadow rather than swapping the background
   colour, so the same keyframes read correctly on the light and dark page. */
.cart-row-flash {
    animation: cartRowFlash 1.2s ease-in-out 2;
}

@keyframes cartRowFlash {
    0%, 100% {
        box-shadow: none;
    }

    50% {
        box-shadow: inset 0 0 0 100vmax rgba(220, 53, 69, .28);
    }
}

/* per-line verdict: owned / gone / off sale / needs a date / waiting list */
.cart-status-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: clamp(0.7138rem, calc(0.6835rem + 0.1294vw), 0.8rem);
    font-weight: 600;
}

    .cart-status-badge.is-danger {
        background-color: rgba(220, 53, 69, .12);
        color: #b02a37;
    }

    .cart-status-badge.is-warn {
        background-color: rgba(255, 160, 0, .14);
        color: #a76c00;
    }

    .cart-status-badge.is-info {
        background-color: color-mix(in srgb, var(-\-pio-blue-color) 12%, transparent);
        color: #007e99;
    }

.cart-status-note {
    font-size: clamp(0.7545rem, calc(0.7209rem + 0.1434vw), 0.85rem);
    line-height: 1.4;
    color: #9298a1;
}

/* "Choose a date" / "Change date" on an interactive line */
.cart-line-action {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .15rem;
    padding: .3rem .75rem;
    border: 1px solid rgba(128, 128, 128, .45);
    border-radius: 999px;
    background: none;
    color: inherit;
    font-size: clamp(0.7545rem, calc(0.7209rem + 0.1434vw), 0.85rem);
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

    .cart-line-action:hover {
        border-color: var(-\-pio-primary-color, #F5821F);
        color: var(-\-pio-primary-color, #F5821F);
    }

    /* the line can't be paid for until this is dealt with */
    .cart-line-action.is-required {
        border-color: #dc3545;
        background-color: rgba(220, 53, 69, .08);
        color: #b02a37;
    }

        .cart-line-action.is-required:hover {
            border-color: #dc3545;
            background-color: rgba(220, 53, 69, .16);
            color: #b02a37;
        }

.cart-prod-rating {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
}

    .cart-prod-rating .fa-star {
        color: #ffa000;
    }

/* ---- certificates accordion (under the course, not a column) ---- */
.cart-certs {
    margin-top: 1rem;
}

.cart-certs-toggle {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .6rem .9rem;
    border: 1px solid rgba(128, 128, 128, .3);
    border-radius: 10px;
    background: none;
    color: inherit;
    font-size: clamp(0.8107rem, calc(0.7723rem + 0.1642vw), 0.92rem);
    cursor: pointer;
    transition: border-color .15s ease;
}

    .cart-certs-toggle:hover {
        border-color: var(-\-pio-primary-color, #F5821F);
    }

    .cart-certs-toggle > .fa-award {
        color: var(-\-pio-primary-color, #F5821F);
    }

/* the auto margin lives here, not on the note: the note is conditional, and the
   chevron has to sit on the inline-end whether or not it renders */
.cart-certs-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-inline-end: auto;
    font-weight: 600;
}

.cart-certs-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background-color: rgba(128, 128, 128, .18);
    font-size: clamp(0.6974rem, calc(0.6684rem + 0.124vw), 0.78rem);
    font-weight: 700;
}

/* collapsed summary - sits next to the chevron on the inline-end */
.cart-certs-toggle-note {
    color: #9298a1;
    font-size: clamp(0.7545rem, calc(0.7209rem + 0.1434vw), 0.85rem);
}

    .cart-certs-toggle-note.is-selected {
        color: var(-\-pio-primary-color, #F5821F);
        font-weight: 700;
    }

.cart-certs-chevron {
    font-size: clamp(0.7138rem, calc(0.6835rem + 0.1294vw), 0.8rem);
    opacity: .7;
    transition: transform .25s ease;
}

.cart-certs-toggle.is-open .cart-certs-chevron {
    transform: rotate(180deg);
}

.cart-certs-panel {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding-top: .75rem;
}

.cart-certs-empty {
    margin-top: 1rem;
    color: #9298a1;
    font-size: clamp(0.7948rem, calc(0.7577rem + 0.1581vw), 0.9rem);
}

/* ---- one certificate: image + type/title/amount + include flag ---- */
.cart-cert-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .65rem .85rem;
    border: 1px solid rgba(128, 128, 128, .25);
    border-radius: 10px;
    transition: border-color .15s ease, background-color .15s ease;
}

    /* optional ones are a choice, so the whole card is the hit area */
    .cart-cert-card.is-optional {
        cursor: pointer;
    }

        .cart-cert-card.is-optional:hover {
            border-color: var(-\-pio-primary-color, #F5821F);
        }

        .cart-cert-card.is-optional.is-selected {
            border-color: var(-\-pio-primary-color, #F5821F);
            background-color: rgba(255, 160, 0, .07);
        }

    /* included ones are locked on - muted so the choice stands out */
    .cart-cert-card.is-included {
        background-color: rgba(128, 128, 128, .05);
    }

/* certificates are documents: contain (never crop) on a neutral plate */
.cart-cert-img {
    width: 84px;
    height: 60px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 6px;
    background-color: rgba(128, 128, 128, .1);
}

.cart-cert-body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    flex-grow: 1;
}

.cart-cert-type,
.cart-cert-title {
    unicode-bidi: isolate;
}

.cart-cert-type {
    color: #9298a1;
    font-size: clamp(0.6974rem, calc(0.6684rem + 0.124vw), 0.78rem);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.cart-cert-title {
    font-weight: 600;
    line-height: 1.3;
}

.cart-cert-amount {
    color: #9298a1;
    font-size: clamp(0.7545rem, calc(0.7209rem + 0.1434vw), 0.85rem);
}

    /* the only amount that is actually charged */
    .cart-cert-amount.is-addon {
        color: var(-\-pio-primary-color, #F5821F);
        font-weight: 700;
    }

.cart-cert-flag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
    color: #9298a1;
    font-size: clamp(0.7138rem, calc(0.6835rem + 0.1294vw), 0.8rem);
    white-space: nowrap;
}

    .cart-cert-flag input {
        width: 1.15rem;
        height: 1.15rem;
        cursor: pointer;
        accent-color: var(-\-pio-primary-color, #F5821F);
    }

    .cart-cert-flag .fa-circle-check {
        color: #2ea86a;
    }

/* Total cell */
.cart-row .col-total {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 1.1rem;
    font-weight: 700;
}

.cart-remove-btn {
    border: none;
    background: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
    transition: color .15s ease;
}

    .cart-remove-btn:hover {
        color: #dc3545;
    }

/* Summary + payment: second column of .cart-body, so it sits on the inline-end
   edge, and sticks there so the total and the pay buttons stay with the visitor
   however far down the list they scroll. */
.cart-summary {
    position: sticky;
    /* Sit clear of .pio-parent-header, which is position:fixed with z-index 1000
       and height:auto - it slides back in on scroll up and would otherwise paint
       over the top of this card. cartCtrlV2 measures the header and publishes
       --pio-header-h; the fallback is --pio-navbar-h, the same token main
       reserves from, for the runs where JS has not set it yet. */
    top: calc(var(-\-pio-header-h, var(-\-pio-navbar-h)) + 12px);
    padding: 1.25rem;
    border: 1px solid rgba(128, 128, 128, .25);
    border-radius: 12px;
    /* never taller than the viewport: a long summary scrolls inside itself
       instead of clipping the pay buttons off the bottom */
    max-height: calc(100vh - var(-\-pio-header-h, var(-\-pio-navbar-h)) - 32px);
    overflow-y: auto;
}

.cart-subtotal-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.cart-subtotal-label {
    font-size: clamp(1.3095rem, calc(1.2073rem + 0.4364vw), 1.6rem);
    font-weight: 800;
}

.cart-subtotal-note {
    color: #9298a1;
    font-size: clamp(0.7948rem, calc(0.7577rem + 0.1581vw), 0.9rem);
}

.cart-subtotal-value {
    font-size: clamp(1.3095rem, calc(1.2073rem + 0.4364vw), 1.6rem);
    font-weight: 800;
}

    .cart-subtotal-value.price::after {
        font-size: clamp(1.1361rem, calc(1.0608rem + 0.3214vw), 1.35rem);
    }

/* why the payment buttons are locked - sits directly above them and, when a
   line is the reason, is clickable to jump straight to it */
.cart-pay-guard {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem .9rem;
    margin-bottom: 1rem;
    border: 1px dashed rgba(128, 128, 128, .45);
    border-radius: 9px;
    color: #9298a1;
    font-size: clamp(0.7948rem, calc(0.7577rem + 0.1581vw), 0.9rem);
}

    .cart-pay-guard.is-actionable {
        border-style: solid;
        border-color: rgba(220, 53, 69, .4);
        background-color: rgba(220, 53, 69, .07);
        color: #b02a37;
        cursor: pointer;
    }

.cart-pay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .9rem 1rem;
    margin-bottom: 1rem;
    border: none;
    border-radius: 9px;
    font-size: clamp(0.8738rem, calc(0.8294rem + 0.1895vw), 1rem);
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease;
}

    .cart-pay-btn:disabled {
        filter: grayscale(.85);
        opacity: .55;
        cursor: not-allowed;
    }

        .cart-pay-btn:disabled:hover {
            filter: grayscale(.85);
        }

    .cart-pay-btn:last-child {
        margin-bottom: 0;
    }

    .cart-pay-btn:hover {
        filter: brightness(.94);
    }

    /* The button that was just pressed is disabled along with all the others -
       but it is the one thing on screen that is actually WORKING, so it must not
       read as dead. It keeps its brand colour and full opacity while the spinner
       runs; every other button keeps the greyed :disabled look.
       Listed after :disabled:hover, and with :hover of its own, so it wins in
       both states rather than by source order alone. */
    .cart-pay-btn:disabled.is-busy,
    .cart-pay-btn:disabled.is-busy:hover {
        filter: none;
        opacity: 1;
        cursor: progress;
    }

.cart-pay-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

span.cart-pay-icon {
    display: inline-flex;
}

    span.cart-pay-icon > svg {
        display: block;
        width: 100%;
        height: 100%;
    }

/* ---- one close button for every template-2 modal ----
   Two variants had grown apart: `btn-close mx-0 p-0` (cart, buy-courses) and a
   bare `btn-close` (login, inquiry). The first is 1em - about 16px - once p-0
   strips Bootstrap's padding, which is under half the 24px minimum target size
   and far under a comfortable 44px touch target.

   `margin-inline-start: auto` is the other half of the job: it pins the button
   to the inline-end of the header whatever else is in there. Without it a
   header whose ONLY child is the close button (the inquiry modal) puts it at
   the opposite corner from every other modal, because `space-between` falls
   back to flex-start with a single child.

   Sized in both directions from the logical inline axis, so RTL needs no rule
   of its own. */
.pio-modal-close.btn-close {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    margin-inline-start: auto;
    /* the glyph keeps its 1em size, centred in the bigger target */
    background-position: center;
    background-size: 1em auto;
    border-radius: 50%;
    opacity: .7;
    transition: opacity .15s ease, background-color .15s ease;
}

    .pio-modal-close.btn-close:hover,
    .pio-modal-close.btn-close:focus-visible {
        opacity: 1;
        background-color: rgba(128, 128, 128, .16);
    }

/* ---- inline SVG icons ----
   These are hand-inlined FontAwesome paths rather than <i class="fa-*">, because
   font-awesome/js/all.min.js rewrites <i> elements out from under Angular (see
   the comments in ShoppingCart.cshtml). They need the sizing and the spin that
   the .fa-* classes would otherwise have provided. */
.cart-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex-shrink: 0;
}

/* reuses the @keyframes spin already defined for .loading-spinner */
.cart-icon-spin {
    animation: spin 1s linear infinite;
    transform-origin: 50% 50%;
}

/* In the pay button the spinner and the fallback card icon take the SAME box as
   .cart-pay-icon (22px): all three swap in and out of one slot, so without a
   shared size the label slides sideways every time the state changes. */
.cart-pay-btn > .cart-icon {
    width: 22px;
    height: 22px;
}

/* One payment option = its button plus an optional note under it. The gap between
   options moves onto this wrapper: the button is always the last child of its own
   wrapper, so .cart-pay-btn:last-child above would otherwise zero every gap. */
.cart-pay-option {
    margin-bottom: 1rem;
}

    .cart-pay-option:last-child {
        margin-bottom: 0;
    }

    .cart-pay-option .cart-pay-btn {
        margin-bottom: 0;
    }

/* Why a disabled pay button is disabled - a greyed button with no reason reads as
   a bug. Same muted grey as .cart-pay-loading / .cart-pay-guard. */
.cart-pay-note {
    display: block;
    margin-top: .35rem;
    text-align: center;
    color: #9298a1;
    font-size: clamp(0.7138rem, calc(0.6835rem + 0.1294vw), 0.8rem);
}

.cart-pay-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .9rem 1rem;
    color: #9298a1;
    font-size: clamp(0.7948rem, calc(0.7577rem + 0.1581vw), 0.9rem);
}

/* ---- pay-by-reference result (eFAWATEERcom) ----
   The bill number is the one thing on this page the visitor has to carry away
   with them, so it is the loudest element in the summary: large, monospaced (so
   6 and 8 cannot be confused), and selectable. Translucent neutral fills like
   the rest of the cart, so it needs no per-theme override. */
.cart-pay-reference {
    margin-top: 1rem;
    /* the held pay buttons follow immediately after this panel - same rhythm as
       .cart-alert, which is the other block that sits above them */
    margin-bottom: 1.25rem;
    padding: 1rem;
    border: 1px solid rgba(40, 167, 69, .35);
    border-radius: 12px;
    background-color: rgba(40, 167, 69, .08);
}

.cart-pay-reference-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
}

/* The copy button belongs TO the number, so the two sit together as one unit.
   No space-between: that pins each to an opposite edge, which looked fine in the
   narrow summary column but opened a gap the full width of the modal.
   The row also follows the page direction rather than forcing ltr on itself -
   in Arabic the group then starts at the right, under a right-aligned heading,
   instead of drifting to the left. Only the digits are pinned ltr, below. */
.cart-pay-reference-number {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .15rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(1.2415rem, calc(1.1505rem + 0.3883vw), 1.5rem);
    font-weight: 700;
    letter-spacing: .05em;
}

    /* Digits read left-to-right in any language, and `isolate` keeps them one
       run so surrounding Arabic cannot reorder them. Selectable as a whole,
       because it gets copied by hand as often as by the button. */
    .cart-pay-reference-number > span {
        direction: ltr;
        unicode-bidi: isolate;
        user-select: all;
    }

.cart-pay-reference-copy {
    flex-shrink: 0;
    padding: .35rem .6rem;
    border: 1px solid rgba(128, 128, 128, .35);
    border-radius: 8px;
    background: none;
    color: inherit;
    cursor: pointer;
}

    .cart-pay-reference-copy:hover {
        background-color: rgba(128, 128, 128, .12);
    }

.cart-pay-reference-note {
    margin: .75rem 0 0;
    color: #9298a1;
    font-size: clamp(0.7545rem, calc(0.7209rem + 0.1434vw), 0.85rem);
    line-height: 1.6;
}

/* Why every other pay button went quiet, and the way back out. Separated from
   the instructions above by a rule so it reads as a different kind of thing:
   that paragraph is what to do next, this is what changed on the page. */
.cart-pay-reference-hold {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(128, 128, 128, .25);
    color: #9298a1;
    font-size: clamp(0.7545rem, calc(0.7209rem + 0.1434vw), 0.85rem);
    line-height: 1.6;
}

.cart-pay-reference-change {
    padding: .4rem .9rem;
    border: 1px solid rgba(128, 128, 128, .45);
    border-radius: 999px;
    background: none;
    color: inherit;
    font-size: clamp(0.7545rem, calc(0.7209rem + 0.1434vw), 0.85rem);
    font-weight: 600;
    cursor: pointer;
}

    .cart-pay-reference-change:hover {
        background-color: rgba(128, 128, 128, .12);
    }

/* ---- cart section picker modal ---- */
.cart-picker-waiting {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem;
    border-radius: 10px;
    background-color: color-mix(in srgb, var(-\-pio-blue-color) 8%, transparent);
    line-height: 1.5;
}

    .cart-picker-waiting > i {
        margin-top: .2rem;
        color: var(-\-pio-blue-color);
        font-size: clamp(1.0265rem, calc(0.9654rem + 0.2607vw), 1.2rem);
    }

/* ---- title + description ---- */
.tl-card-title {
    color: var(-\-text-color);
    font-size: clamp(0.9701rem, calc(0.9156rem + 0.2327vw), 1.125rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 8px;
}

.tl-card-desc {
    font-size: clamp(0.7241rem, calc(0.6929rem + 0.1329vw), 0.8125rem);
    color: var(-\-tl-muted);
    line-height: 1.55;
}

/* ---- footer: count left, button right ---- */
.tl-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.tl-card-count {
    font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
    font-weight: 700;
    color: var(-\-text-color);
}

.tl-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(0.7241rem, calc(0.6929rem + 0.1329vw), 0.8125rem);
    font-weight: 600;
    color: var(-\-tl-accent);
    text-decoration: none;
    border: 1.5px solid var(-\-tl-accent);
    border-radius: 10px;
    padding: 9px 16px;
    transition: background .2s ease, color .2s ease;
}

    .tl-card-btn svg {
        width: 15px;
        height: 15px;
    }

    .tl-card-btn i {
        font-size: 15px;
    }

    .tl-card-btn:hover {
        background: var(-\-tl-btn-color) !important;
        color: var(-\-text-color) !important;
    }

/* ----  max-width ---- */
.max-w-90px {
    width: 90px;
}

/* testimonials card styling for bento-grid */
.testi-card {
    cursor: default;
    aspect-ratio: 1.2903;
    border: 1px solid rgba(0,0,0,0.05);
}

.testi-card .testi-overlay-content {
    transform: translateY(101%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(-\-pio-primary-color, #FFA000);
    overflow-y: auto;
}

.testi-card:hover .testi-overlay-content {
    transform: translateY(0);
}

.testi-card:hover .testi-visible-content {
    opacity: 0;
    transform: scale(0.9);
}

.testi-card .testi-visible-content {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pio-testi-img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border: 3px solid var(-\-pio-primary-color, #FFA000);
    padding: 3px;
}

.testi-text {
    font-size: clamp(0.7545rem, calc(0.7209rem + 0.1434vw), 0.85rem);
    line-height: 1.6;
}

.pio-nav-prev.is-disabled,
.pio-nav-next.is-disabled {
    opacity: 0.4;
    cursor: not-allowed !important;
}

/* --- Section State Badges --- */
.section-status-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
    text-align: center;
    width: 100%;
}

.section-status-badge.header-status-badge {
    width: auto;
    min-width: 150px;
}

.section-owned {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.section-in-cart {
    background-color: #f1f3f5;
    color: #495057;
    border: 1px solid #dee2e6;
}

.schedule-slide .btn.schedule-cart-btn {
    justify-content: space-between;
    gap: 0.5rem;
    padding-inline: 0.375rem 1rem;
}

.schedule-card .schedule-cart-btn .schedule-cart-state,
.schedule-card .schedule-cart-btn .schedule-cart-edit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    white-space: nowrap;
}

.schedule-card .schedule-cart-btn .schedule-cart-state {
    padding: 0.3rem 0.75rem;
    border-radius: 0.375rem;
    background-color: rgba(255, 160, 0, .12);
    font-size: 0.8125rem;
    transition: background-color .2s ease;
}

.schedule-card .schedule-cart-btn:hover .schedule-cart-state,
.schedule-card .schedule-cart-btn:focus-visible .schedule-cart-state {
    background-color: rgba(255, 255, 255, .22);
}

.schedule-card .schedule-cart-btn .schedule-cart-edit i {
    font-size: 0.8125rem;
}

/* ******************************
   Header purchase actions (product hero)
   [Add to Cart] / [In Cart + Go to Cart] / [Buy It Now]
   ****************************** */
/* the framework buttons are compact by default: hero CTAs need presence */
.header-actions .header-cta {
    font-size: clamp(0.8246rem, calc(0.7849rem + 0.1696vw), 0.9375rem);
    padding: 10px 22px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* ── equal-height purchase controls (hero header + schedule card) ──
   the rows use align-items-stretch, so every control in a line grows to
   the tallest one; the 44px floor keeps single controls consistent too,
   and each control flex-centers its own content */
.header-actions .btn,
.header-actions .section-status-badge,
.schedule-slide .btn,
.schedule-slide .section-status-badge,
.schedule-actions .btn,
.schedule-actions .section-status-badge {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem; /* one consistent icon <-> label gap inside every control */
}

    /* schedule card: standalone badges still fill the column (the column
       stretches them), but inside an action row they share the line
       instead of forcing the full width */
    .schedule-slide .section-status-badge {
        width: auto;
    }

/* ── instructor profile: floated avatar, text WRAPS around it (no columns).
   NB: the container must NOT create a new block formatting context - the
   text has to interact with the float; it only clears it at the end ── */
.instructor-profile::after {
    content: "";
    display: block;
    clear: both;
}

    /* physical float + RTL override instead of float:inline-start, so the
       avatar lands on the correct side in every browser */
    .instructor-profile .instructor-avatar {
        float: left;
        width: 130px;
        height: 130px;
        margin-inline-end: 1rem;
        margin-block-end: .35rem;
        border: 3px solid var(-\-pio-blue-color)
    }

body[dir="rtl"] .instructor-profile .instructor-avatar {
    float: right;
}

/* ── instructor bio: clamped to ~3 lines until "see more" expands it ──
   a PLAIN block (not -webkit-box) so its lines shorten around the floated
   avatar; max-height animates the expand smoothly and a fade-out mask
   stands in for the ellipsis while clamped.
   overflow MUST be clip, not hidden: hidden creates a new block formatting
   context and the text then sits BESIDE the float as a rigid column
   instead of wrapping around it */
.instructor-bio {
    overflow: hidden; /* fallback for browsers without clip (no wrap there) */
    overflow: clip;
    max-height: 100rem; /* expanded: roomy ceiling, only there to animate */
    transition: max-height .4s ease;
}

    .instructor-bio.clamped {
        max-height: 4.9em; /* ~3 lines */
    }

    .instructor-bio.clamped.is-overflowing {
        -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    }

.instructor-bio-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: none;
    border: none;
    padding: 0;
    margin-block-start: .25rem;
    align-self: flex-start;
    font-size: clamp(0.7241rem, calc(0.6929rem + 0.1329vw), 0.8125rem);
    font-weight: 600;
    color: var(-\-pio-blue-color);
}

    .instructor-bio-toggle span {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .instructor-bio-toggle svg {
        font-size: clamp(0.6206rem, calc(0.597rem + 0.1005vw), 0.6875rem);
        transition: transform .25s ease;
    }

    /* expanded -> chevron flips up (down = read more, up = show less) */
    .instructor-bio-toggle.expanded svg {
        transform: rotate(180deg);
    }

/* ── instructor title / specialty under the name (shown only when the API
   sends one; the doubled selector beats the dark theme's .bento-card p) ── */
.instructor-profile .instructor-title {
    font-size: clamp(0.7241rem, calc(0.6929rem + 0.1329vw), 0.8125rem);
    color: #8a9098 !important;
    margin-bottom: .25rem;
}

/* ── instructor stat tiles: rating / students / courses ──
   equal tiles on one strip; a tile simply disappears when its
   value is missing and the rest share the row */
.instructor-stats {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.instructor-stat {
    flex: 1 1 0;
    min-width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    text-align: center;
    background-color: #f8f9fa;
    border: 1px solid #eceef2;
    border-radius: 0.5rem;
    padding: .85rem .5rem;
}

/* the tile selectors carry an extra class so they also win over the
   dark theme's blanket ".bento-card span" color override */
.instructor-stat .instructor-stat-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(-\-pio-blue-color) 10%, transparent);
    color: var(-\-pio-blue-color) !important;
    font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
}

    /* the chip icon follows the chip color (beats the global orange
       .fa-star rule for the rating chip) */
    .instructor-stat .instructor-stat-icon i {
        color: inherit;
    }

.instructor-stat .instructor-stat-value {
    font-size: clamp(0.9127rem, calc(0.8643rem + 0.2063vw), 1.05rem);
    font-weight: 700;
    line-height: 1;
}

/* mini star row keeps the site's orange rating stars (global .fa-star) */
.instructor-stat .instructor-stat-stars {
    display: inline-flex;
    gap: 2px;
    font-size: clamp(0.5678rem, calc(0.5476rem + 0.086vw), 0.625rem);
}

.instructor-stat .instructor-stat-label {
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    color: #8a9098 !important;
}

/* ── section radio group (buy modal only - the schedule card is
   display-only) ── */
/* the fieldset is semantic only: no box of its own */
.schedule-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

/* picked radio carries the mode accent (recorded default / interactive) */
.buy-courses-modal .buy-section-item .form-check-input:checked {
    background-color: var(-\-pio-blue-color);
    border-color: var(-\-pio-blue-color);
}

.buy-courses-modal.interactive .buy-section-item .form-check-input:checked {
    background-color: var(-\-pio-primary-color);
    border-color: var(-\-pio-primary-color);
}

/* inline "pick a section first" error inside the buy modal */
.buy-courses-modal .buy-modal-error {
    font-size: clamp(0.7241rem, calc(0.6929rem + 0.1329vw), 0.8125rem);
    font-weight: 600;
    color: #dc3545;
    background-color: rgba(220, 53, 69, .08);
    border: 1px solid rgba(220, 53, 69, .35);
    border-radius: 0.5rem;
    padding: .55rem .8rem;
}

/* ******************************
   Recorded course card - right bento column
   (recorded counterpart of the interactive schedule card)
   ****************************** */
.recorded-course-card {
    transition: box-shadow .25s ease, transform .25s ease;
}

    .recorded-course-card:hover {
        box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
        transform: translateY(-2px);
    }

.recorded-card-media {
    position: relative;
    overflow: hidden;
}

.recorded-card-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform .35s ease;
}

.recorded-course-card:hover .recorded-card-thumb {
    transform: scale(1.03);
}

/* the doubled selectors (badge + its inner span, etc.) out-rank the dark
   theme's blanket ".bento-card span" color override */
.recorded-card-badge {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    font-weight: 600;
    background-color: var(-\-pio-blue-color);
    border-radius: 2rem;
    padding: .25rem .7rem;
    white-space: nowrap;
}

.recorded-course-card .recorded-card-badge,
.recorded-course-card .recorded-card-badge span {
    color: #fff !important;
}

.recorded-card-meta {
    font-size: clamp(0.7241rem, calc(0.6929rem + 0.1329vw), 0.8125rem);
}

.recorded-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.recorded-card-meta .recorded-card-meta-item,
.recorded-card-meta .recorded-card-meta-item span {
    color: #6b7075 !important;
}

.recorded-card-meta .recorded-card-meta-item i {
    color: var(-\-pio-blue-color) !important;
}

/* price row: mirrors the hero header's free / offer / regular styling */
.recorded-card-price .recorded-card-price-free,
.recorded-card-price .recorded-card-current-price {
    font-size: clamp(1.1361rem, calc(1.0608rem + 0.3214vw), 1.35rem);
    font-weight: 700;
    color: var(-\-pio-blue-color) !important;
}

.recorded-card-price .recorded-card-old-price {
    font-size: clamp(0.8345rem, calc(0.7939rem + 0.1735vw), 0.95rem);
    color: #8a9098 !important;
}

.recorded-card-price .recorded-card-discount-badge {
    font-size: clamp(0.6206rem, calc(0.597rem + 0.1005vw), 0.6875rem);
    font-weight: 700;
    color: #fff !important;
    background-color: var(-\-pio-blue-color);
    border-radius: 2rem;
    padding: .15rem .55rem;
    white-space: nowrap;
}

/* the action buttons reuse the 44px equal-height rule via .schedule-actions */

/* ******************************
   Section rows inside the buy modal: per-row actions
   ****************************** */
.buy-courses-modal .buy-section-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.buy-courses-modal .buy-section-actions .section-status-badge {
    width: auto;
    padding: 6px 12px;
    font-size: clamp(0.6985rem, calc(0.6693rem + 0.1244vw), 0.7812rem);
}

/* ******************************
   Navbar cart: count badge + popup
   ****************************** */
.cart-count-badge {
    position: absolute;
    top: -6px;
    inset-inline-end: -8px;
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(-\-pio-blue-color);
    color: #fff;
    font-size: clamp(0.6206rem, calc(0.597rem + 0.1005vw), 0.6875rem);
    font-weight: 700;
    line-height: 1;
    border-radius: 2rem;
}

@media (max-width: 991.98px) {
    .cart-count-badge {
        inset-inline-end: auto;
        inset-inline-start: -8px;
    }
}

/* ******************************
   Floating sticky Add-to-Cart bar (product page). Theme-neutral surface so it
   works in light + dark; slides up from the bottom edge when .is-visible.
   ****************************** */
.sticky-cta {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 998;
    padding: 0;
    transform: translateY(120%);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), opacity .35s ease;
    pointer-events: none;
}

    .sticky-cta.is-docked {
        position: absolute;
        bottom: auto;
    }

    .sticky-cta.is-docked:not(.is-visible) {
        opacity: 0;
    }

    .sticky-cta.is-visible .sticky-cta-inner {
        pointer-events: auto;
    }

    .sticky-cta.is-visible {
        transform: translateY(0);
    }

.sticky-cta-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 1rem;
    background: #fff;
    box-shadow: 0 -6px 22px rgba(0, 0, 0, .14);
}

.sticky-cta-info {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.sticky-cta-thumb {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 50%;
}

.sticky-cta-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sticky-cta-name {
    font-weight: 700;
    font-size: clamp(0.8345rem, calc(0.7939rem + 0.1735vw), 0.95rem);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sticky-cta-price {
    font-weight: 700;
    color: var(-\-pio-primary-color, #F5821F);
}

.sticky-cta-actions {
    flex-shrink: 0;
}

.sticky-cta-btn {
    white-space: nowrap;
}

/* ---- in-bar "added to cart" success animation ----
   sequence: the bar wiggles + a cart icon jumps out of the button and back in;
   then a green circle floods from the button and "Added to cart" appears. */

/* 1) the whole bar wiggles a little */
.sticky-cta-inner.is-success {
    animation: sticky-wiggle .5s ease;
}

@keyframes sticky-wiggle {
    0%, 100% { transform: translateX(0) rotate(0); }
    15% { transform: translateX(-4px) rotate(-.5deg); }
    35% { transform: translateX(4px) rotate(.5deg); }
    55% { transform: translateX(-3px) rotate(-.3deg); }
    75% { transform: translateX(2px) rotate(.2deg); }
}

/* 2) cart icon over the button: jumps from inside the button UP and out of the
   bar, then drops back inside. Not clipped, so it can leave the bar's top. */
.sticky-cta-actions {
    position: relative;
    /* row so the in-cart state can show [go to cart] + a compact [edit] together */
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* compact icon-only edit button in the bar (space is tight) */
.sticky-cta-edit {
    flex: 0 0 auto;
}

.sticky-cta-fly {
    position: absolute;
    /* anchored to the bar's END edge, which does NOT move when the button
       swaps Add->In-cart, so the cart rises/falls in ONE spot (no side jump) */
    inset-inline-end: 24px;
    bottom: 6px;
    z-index: 4;
    color: #1e8e3e;
    font-size: clamp(1.1717rem, calc(1.0913rem + 0.343vw), 1.4rem);
    opacity: 0;
    pointer-events: none;
}

    .sticky-cta-fly.is-on {
        animation: sticky-fly .7s cubic-bezier(.3, 1.25, .45, 1) forwards;
    }

@keyframes sticky-fly {
    0%   { opacity: 0; transform: translateY(0) scale(.5); }
    18%  { opacity: 1; transform: translateY(0) scale(1); }
    55%  { opacity: 1; transform: translateY(-46px) scale(1.15); }
    100% { opacity: 0; transform: translateY(0) scale(.5); }
}

/* keep the real button out of the way during the animation: no second cart
   icon, and its Add->In-cart width swap never shows under the flying cart */
.sticky-cta-inner.is-success .sticky-cta-btn {
    opacity: 0;
    pointer-events: none;
}

/* 3) green flood + label. Own clip layer (overflow) so the fly cart above is
   free to leave the bar while the circle stays clipped to the bar shape. */
.sticky-cta-done {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

    .sticky-cta-done.is-on {
        opacity: 1;
        visibility: visible;
    }

/* circle expands from the button side to flood the bar */
.sticky-cta-done-circle {
    position: absolute;
    top: 50%;
    inset-inline-end: 46px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1e8e3e;
    transform: translateY(-50%) scale(0);
}

    .sticky-cta-done.is-on .sticky-cta-done-circle {
        animation: sticky-done-fill .5s ease .55s forwards;
    }

@keyframes sticky-done-fill {
    from { transform: translateY(-50%) scale(0); }
    to   { transform: translateY(-50%) scale(48); }
}

.sticky-cta-done-text {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
}

    .sticky-cta-done.is-on .sticky-cta-done-text {
        animation: sticky-done-text .4s ease 1s forwards;
    }

    .sticky-cta-done-text i {
        display: inline-block;
        animation: cart-added-pop .4s ease 1s both;
    }

@keyframes sticky-done-text {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pio-user-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    /* subtle brand ring around the photo / initials circle */
    border: 2px solid color-mix(in srgb, var(-\-pio-blue-color) 55%, transparent);
}

.pio-user-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(-\-pio-blue-color);
    color: #fff;
    font-weight: 700;
    font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
}

.pio-user-name {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
    font-weight: 600;
}

.user-menu-header {
    padding: 10px 12px 8px;
}

.user-menu-name {
    font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-email {
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    color: #6b7075;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-divider {
    margin: 6px 4px;
    border-color: rgba(0, 0, 0, .1);
    opacity: 1;
}

/* small muted section label ("switch account") */
.user-menu-section {
    padding: 6px 12px 2px;
    font-size: clamp(0.6467rem, calc(0.6214rem + 0.1082vw), 0.7188rem);
    font-weight: 700;
    letter-spacing: .3px;
    color: #8a919c;
}

.user-menu-item {
    padding: 9px 12px;
    border-radius: 10px;
    font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
    color: inherit;
    cursor: pointer;
    transition: background-color .15s ease;
}

    .user-menu-item:hover {
        background: color-mix(in srgb, var(-\-pio-blue-color) 10%, transparent);
    }

    .user-menu-item i {
        width: 18px;
        text-align: center;
        color: var(-\-pio-blue-color);
    }

    /* the active account row: highlighted, not clickable */
    .user-menu-item.is-current {
        background: color-mix(in srgb, var(-\-pio-blue-color) 8%, transparent);
        cursor: default;
    }

.user-menu-tile {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: color-mix(in srgb, var(-\-pio-blue-color) 12%, transparent);
    transition: background-color .15s ease;
}

    .user-menu-item .user-menu-tile i {
        width: auto;
        color: var(-\-pio-blue-color);
        transition: color .15s ease;
    }

.user-menu-nav {
    font-weight: 600;
}

    .user-menu .user-menu-nav:hover,
    .user-menu .user-menu-nav:focus-visible {
        color: inherit;
    }

    .user-menu-nav:hover .user-menu-tile,
    .user-menu-nav:focus-visible .user-menu-tile {
        background: var(-\-pio-blue-color);
    }

    .user-menu-nav:hover .user-menu-tile i,
    .user-menu-nav:focus-visible .user-menu-tile i {
        color: #fff;
    }

.user-menu-item .user-menu-arrow {
    width: auto;
    font-size: .7rem;
    color: currentColor;
    opacity: .4;
    transition: transform .15s ease, opacity .15s ease;
}

.user-menu-nav:hover .user-menu-arrow {
    opacity: 1;
    transform: translateX(3px);
}

[dir="rtl"] .user-menu-item .user-menu-arrow {
    transform: scaleX(-1);
}

[dir="rtl"] .user-menu-nav:hover .user-menu-arrow {
    transform: translateX(-3px) scaleX(-1);
}

.user-menu .user-menu-item.user-menu-signout {
    width: 100%;
    border: 0;
    background: transparent;
    color: #dc3545;
    font-weight: 600;
    text-align: start;
}

    .user-menu .user-menu-item.user-menu-signout:hover,
    .user-menu .user-menu-item.user-menu-signout:focus-visible {
        background: rgba(220, 53, 69, .08);
    }

    .user-menu-signout .user-menu-tile {
        background: rgba(220, 53, 69, .1);
    }

    .user-menu-item.user-menu-signout .user-menu-tile i {
        color: #dc3545;
    }

    .user-menu-signout:hover .user-menu-tile,
    .user-menu-signout:focus-visible .user-menu-tile {
        background: #dc3545;
    }

    .user-menu-item.user-menu-signout:hover .user-menu-tile i,
    .user-menu-item.user-menu-signout:focus-visible .user-menu-tile i {
        color: #fff;
    }

.user-menu-avatar-sm {
    width: 30px;
    height: 30px;
    font-size: clamp(0.6206rem, calc(0.597rem + 0.1005vw), 0.6875rem);
    border-width: 1.5px;
}

.user-menu-account-name {
    font-size: clamp(0.7495rem, calc(0.7163rem + 0.1416vw), 0.8438rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-check {
    color: var(-\-pio-blue-color);
    font-size: clamp(0.8246rem, calc(0.7849rem + 0.1696vw), 0.9375rem);
    flex-shrink: 0;
}

.user-menu-footer {
    padding: 8px 4px 4px;
}

.user-menu-logout {
    padding: 9px 12px;
    font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
    font-weight: 600;
    color: #dc3545;
    background: transparent;
    border: 1px solid rgba(220, 53, 69, .35);
    border-radius: 10px;
    transition: background-color .15s ease, color .15s ease;
}

    .user-menu-logout:hover {
        background: #dc3545;
        color: #fff;
    }

/* ******************************
   Login modal V2 - follows the page theme
   (same convention as the buy/enroll modal:
     light page -> light modal
     dark page  -> dark modal)
   ****************************** */
/* uniform corners for every field: the login PAGE flattens one side of the
   select/phone input (grouped look); standalone in the modal that reads broken */
.login-modal-v2 .form-control,
.login-modal-v2 .form-select {
    border-radius: 10px;
}

.login-modal-v2 .login-modal-subtitle {
    font-size: clamp(0.7241rem, calc(0.6929rem + 0.1329vw), 0.8125rem);
    color: #6b7075;
}

.login-modal-v2 .login-modal-signup-hint {
    font-size: clamp(0.7495rem, calc(0.7163rem + 0.1416vw), 0.8438rem);
}

    .login-modal-v2 .login-modal-signup-hint a {
        color: var(-\-pio-blue-color);
    }
.login-modal-v2 .inquiry-submit-btn {
    background: var(-\-pio-blue-color);
    border-color: var(-\-pio-blue-color);
    color: #fff;
}

    .login-modal-v2 .inquiry-submit-btn:hover,
    .login-modal-v2 .inquiry-submit-btn:focus-visible {
        background: color-mix(in srgb, var(-\-pio-blue-color) 85%, #000);
        color: #fff;
    }

/* light page -> LIGHT modal (form controls keep their light look) */
body[data-bs-theme="light"] .login-modal-v2 {
    background-color: #fff;
    color: #111;
}

    /* keep the dropdown list readable regardless of any global dark styling */
    body[data-bs-theme="light"] .login-modal-v2 .form-select option {
        background-color: #fff;
        color: #111;
    }

    body[data-bs-theme="light"] .login-modal-v2 .modal-title,
    body[data-bs-theme="light"] .login-modal-v2 .form-label,
    body[data-bs-theme="light"] .login-modal-v2 .form-check-label {
        color: #111;
    }

    body[data-bs-theme="light"] .login-modal-v2 .btn-close {
        filter: none;
    }

    body[data-bs-theme="light"] .login-modal-v2 .form-control,
    body[data-bs-theme="light"] .login-modal-v2 .form-select {
        background-color: #fff;
        color: #111;
        border-color: #ced4da;
    }

/* dark page -> DARK modal (form controls flip too) */
body[data-bs-theme="dark"] .login-modal-v2 {
    background-color: #10141c;
    color: #fff;
}

    body[data-bs-theme="dark"] .login-modal-v2 .modal-title,
    body[data-bs-theme="dark"] .login-modal-v2 .form-label,
    body[data-bs-theme="dark"] .login-modal-v2 .form-check-label {
        color: #fff;
    }

    body[data-bs-theme="dark"] .login-modal-v2 .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }

    body[data-bs-theme="dark"] .login-modal-v2 .login-modal-subtitle {
        color: #aab2bd;
    }

    body[data-bs-theme="dark"] .login-modal-v2 .form-control,
    body[data-bs-theme="dark"] .login-modal-v2 .form-select {
        background-color: rgba(255, 255, 255, .06);
        color: #fff;
        border-color: rgba(255, 255, 255, .2);
    }

        body[data-bs-theme="dark"] .login-modal-v2 .form-control::placeholder {
            color: #8a919c;
        }

    /* bootstrap's caret svg is dark: swap in a light one for the dark control */
    body[data-bs-theme="dark"] .login-modal-v2 .form-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }

    /* native <option>s inherit the control's white text but the browser draws
       the open list on white -> the countries were invisible. Pin both sides */
    body[data-bs-theme="dark"] .login-modal-v2 .form-select option {
        background-color: #10141c;
        color: #fff;
    }

    body[data-bs-theme="dark"] .login-modal-v2 .phone-code-input > span {
        color: #aab2bd;
    }

    body[data-bs-theme="dark"] .login-modal-v2 .btn-showPassword {
        color: #aab2bd;
    }

/* ******************************
   Toasts ('toastRaised' broadcasts -> common/_toastPartial)
   ****************************** */
.custom-toast {
    position: fixed;
    top: 18px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 2000; /* above modals (1055) */
    max-width: min(480px, calc(100vw - 2rem));
    padding: 14px 22px;
    border-radius: 12px;
    background-color: #1f2833;
    color: #fff;
    font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
    font-weight: 600;
    text-align: center;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
}

body[dir="rtl"] .custom-toast {
    transform: translateX(50%);
}

/* ******************************
   Webinar card signup form
   ****************************** */
/* Sits inside the card on hover. It is absolutely positioned over the thumb
   (see .webinar-form-signup further up), so it needs its own breathing room
   rather than inheriting the card's cramped padding. */
.pio-webinar-page .webinar-form-signup {
    inset-inline: 0;
    padding-inline: 0.875rem;
}

.pio-webinar-page .webinar-form-title {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 0.5rem;
}

/* --pio-primary-color is the orange (#FFA000) the card's Register/SignUp
   buttons use; --pio-blue-color is the logo navy. Matching the CTA. */
.pio-webinar-page .webinar-form-title b {
    color: var(-\-pio-primary-color, #FFA000);
}

/* One consistent field: same height, same radius, readable placeholder, and a
   focus ring that actually shows against the dark card. */
.pio-webinar-page .webinar-card-register .form-control,
.pio-webinar-page .webinar-card-register .form-select {
    height: 2.5rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background-color: rgba(255, 255, 255, 0.06);
    color: #fff;
    box-shadow: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.pio-webinar-page .webinar-card-register .form-control::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.pio-webinar-page .webinar-card-register .form-control:focus,
.pio-webinar-page .webinar-card-register .form-select:focus {
    border-color: var(-\-pio-primary-color, #FFA000);
    background-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 0 0 0.15rem rgba(255, 160, 0, 0.25);
    color: #fff;
}

/* Country + number read as one control. The picker is held to a fixed narrow
   width - before this the two shared the row evenly and the number was clipped
   to "Phone numb". Radii are spelled out per direction because bootstrap.rtl
   also loads and flattens input-group corners the wrong way round. */
.pio-webinar-page .webinar-phone-group > .form-select {
    flex: 0 0 auto;
    width: 6.5rem;
    padding-inline: 0.5rem 1.5rem;
    border-inline-end: 0;
    border-radius: 0.5rem 0 0 0.5rem !important;
}

.pio-webinar-page .webinar-phone-group > .form-control {
    border-radius: 0 0.5rem 0.5rem 0 !important;
}

body[dir="rtl"] .pio-webinar-page .webinar-phone-group > .form-select {
    border-radius: 0 0.5rem 0.5rem 0 !important;
}

body[dir="rtl"] .pio-webinar-page .webinar-phone-group > .form-control {
    border-radius: 0.5rem 0 0 0.5rem !important;
}

/* the two card buttons, so Register reads as the primary action */
.pio-webinar-page .webinar-card .pio-card-footer .btn {
    border-radius: 0.5rem;
    padding-inline: 1rem;
}

/* ******************************
   Webinar page type scale
   ****************************** */
/* Every font-size and font-weight on this page lives in this one block, scoped
   to .pio-webinar-page so nothing else on the site moves.

   SIZE: the three display headings already land on the design's size - they all
   carry .pio-hero-heading, which responsive.css caps at 2.75rem (44px) from
   1400px up. They are here for WEIGHT: responsive.css sets .pio-hero-heading
   and .pio-heading to 600 and the design has them bold.

   The under-sized copy had two sources: the shared .text-size rule caps at 14px,
   and the card text came off Bootstrap tag defaults (h6 = 16px). Note that
   .description and .text-size are declared TOGETHER in one rule (style.css
   ~1404, and again in responsive.css), so lifting only .text-size left every
   .description on this page stranded at 14px beside an 18px lead paragraph -
   which is why both are named below. */

/* --- display headings: hero, "Upcoming Webinars", "Join us ...", "Stay tuned" */
.pio-webinar-page .pio-hero-heading,
.pio-webinar-page .pio-heading {
    font-weight: 700;
}

/* --- lead line under a heading: one step above body copy, medium weight */
.pio-webinar-page .text-size {
    font-size: clamp(0.9375rem, calc(0.86rem + 0.33vw), 1.125rem);
    font-weight: 500;
}

/* --- body copy (the two "Join us ..." paragraphs) */
.pio-webinar-page .description {
    font-size: clamp(0.875rem, calc(0.825rem + 0.22vw), 1rem);
    font-weight: 400;
    line-height: 1.7;
}

/* --- hero standfirst. .description2 caps at 15px site-wide, which reads thin
       under a 44px heading; the subscribe card keeps the site default. */
.pio-webinar-page .pio-background-img .description2 {
    font-size: clamp(0.875rem, calc(0.825rem + 0.22vw), 1rem);
    font-weight: 500;
}

/* --- buttons stayed on the shared 13px while the copy around them grew */
.pio-webinar-page .btn-pio-outline-primary {
    font-size: clamp(0.8125rem, calc(0.7775rem + 0.15vw), 0.9375rem);
    font-weight: 600;
    padding: 10px 18px;
}

/* --- subject filter chips */
.pio-webinar-page .custom-checkbox .form-check-label {
    font-size: clamp(0.8125rem, calc(0.7775rem + 0.15vw), 0.9375rem);
    font-weight: 500;
}

/* --- card front */
.pio-webinar-page .webinar-card .card-heading {
    font-size: clamp(1rem, calc(0.9rem + 0.35vw), 1.25rem);
    font-weight: 700;
    line-height: 1.3;
}

.pio-webinar-page .webinar-card .card-text {
    font-size: clamp(0.8125rem, calc(0.77rem + 0.18vw), 0.9375rem);
    font-weight: 400;
}

.pio-webinar-page .webinar-card .pio-btn-signUp {
    font-size: clamp(0.8125rem, calc(0.7775rem + 0.15vw), 0.9375rem);
    font-weight: 600;
}

/* --- card back (title + blurb revealed on hover) */
.pio-webinar-page .webinar-details h6 {
    font-size: clamp(0.9375rem, calc(0.885rem + 0.23vw), 1.0625rem);
    font-weight: 700;
}

.pio-webinar-page .webinar-details p {
    font-size: clamp(0.8125rem, calc(0.77rem + 0.18vw), 0.9375rem);
    line-height: 1.55;
}

/* --- the empty / failed states stand where the cards would be, so they are on
       the same scale rather than the h6/p defaults */
.pio-webinar-page .pio-webinar-empty h6 {
    font-size: clamp(1rem, calc(0.93rem + 0.3vw), 1.1875rem);
    font-weight: 600;
}

.pio-webinar-page .pio-webinar-empty p {
    font-size: clamp(0.875rem, calc(0.825rem + 0.22vw), 1rem);
}

/* ******************************
   B2B inquiry form: country + phone as one control
   ****************************** */
/* This column is only ~205px on desktop (col-md-6 inside the col-md-5 form), so
   the picker gets just enough room for its dial code and the phone box takes the
   rest. The native dropdown popup is NOT limited by this width, so the full
   country name is still readable with the list open. */
/* Down from 7rem. pio-dial-code-only means the closed box only ever shows
   "+962", so everything past that was padding around a clipped country name -
   space the phone number should have.

   Sized in `ch` rather than rem: 1ch is the width of a digit in whatever font
   the form ends up using, so `5ch` literally means "five characters of dial
   code" (+ up to four digits, which covers every calling code) and it stays
   correct if the form's font-size changes. The 1.4rem is the start padding
   plus the caret's lane.

   `width: auto` cannot be used here even though it looks tempting: a select
   sizes itself to its WIDEST OPTION, and the options still carry full country
   names for the popup - it would come out wider than the 7rem it replaced.

   The popup is unaffected either way; a native dropdown sizes to its own
   content, not to the box, so the names still have room when it is open. */
.pio-b2b-form .pio-phone-group > .form-select {
    flex: 0 0 auto;
    width: calc(5ch + 1.4rem);
    padding-inline: 0.4rem 1rem;
    /* Caret at the INLINE end, and smaller. It used to be pinned to physical
       `left` at any direction, which is right for RTL but in LTR put it under
       the "+" of the dial code with the text painted over it. */
    background-size: 0.65rem 0.5rem;
    background-position: right 0.25rem center;
    /* one shared outline down the middle instead of two touching borders */
    border-inline-end: 0;
}

body[dir="rtl"] .pio-b2b-form .pio-phone-group > .form-select {
    background-position: left 0.25rem center;
}

.pio-b2b-form .pio-phone-group > .form-floating {
    flex: 1 1 auto;
    min-width: 0;
}

/* Kept, unused by default, as the direction-safe way to push a column to the
   end of a short row. Add .pio-b2b-form-col to a column whose row does not add
   up to 12 and the spare space lands in front of it instead of after it.

   The inquiry row is 6 + 6 now, so nothing needs it - but reach for THIS and
   not Bootstrap's .offset-*, which is broken on this site: bootstrap.min.css
   and bootstrap.rtl.min.css both load and define offset with different physical
   properties (margin-left vs margin-right). Neither overrides the other, the
   column gets BOTH, and the row overflows past 12 and wraps.
   margin-inline-start is one logical property written once, so it cannot double
   up and it mirrors correctly in Arabic and English. */
@media (min-width: 768px) {
    .pio-b2b-form-col {
        margin-inline-start: auto;
    }
}

/* Rounding is physical-per-direction and !important, both deliberately.
   Bootstrap flattens input-group children with
   `.input-group:not(.has-validation) > :not(:last-child):not(...)...`, which
   scores (0,6,0) - more specific than anything reasonable here - and BOTH
   bootstrap.min.css and bootstrap.rtl.min.css match it, one zeroing the right
   corners and the other the left, so together they flatten all four. Confirmed
   with CSS.getMatchedStylesForNode. `.inquiry-modal-v2` above solves the same
   collision the same way. Logical radius properties do NOT help - they lose on
   specificity long before direction is considered. */
.pio-b2b-form .pio-phone-group > .form-select {
    border-radius: var(-\-bs-border-radius) 0 0 var(-\-bs-border-radius) !important;
}

.pio-b2b-form .pio-phone-group > .form-floating > .form-control {
    border-radius: 0 var(-\-bs-border-radius) var(-\-bs-border-radius) 0 !important;
}

body[dir="rtl"] .pio-b2b-form .pio-phone-group > .form-select {
    border-radius: 0 var(-\-bs-border-radius) var(-\-bs-border-radius) 0 !important;
}

body[dir="rtl"] .pio-b2b-form .pio-phone-group > .form-floating > .form-control {
    border-radius: var(-\-bs-border-radius) 0 0 var(-\-bs-border-radius) !important;
}

.custom-toast.toast-error {
    background-color: #b02a37;
}

.custom-toast.toast-success {
    background-color: #17795e;
}

.custom-toast p {
    margin: 0;
}

.animatableToast {
    animation: toast-slide-down .25s ease-out;
}

@keyframes toast-slide-down {
    from {
        opacity: 0;
        margin-top: -10px;
    }

    to {
        opacity: 1;
        margin-top: 0;
    }
}

/* ******************************
   Subject page: subject filter
   ****************************** */
/* long subject names must not stretch the filter button */
.filteration-dropdowns .subject-filter-label {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filteration-dropdowns {
    -\-pio-filter-pad-x: 24px;
    -\-pio-filter-menu-pad: 0.35rem;
    /* Twice the 16rem the open menu used to be capped at. Nothing in these
       menus wraps any more, so the menu has to be allowed to grow sideways
       instead - a name that still does not fit at 32rem is ellipsized. */
    -\-pio-filter-menu-max: 32rem;
}

    .filteration-dropdowns .pio-btn-filter {
        text-align: start;
    }

    body[dir="rtl"] .filteration-dropdowns .dropdown-menu {
        -\-bs-position: end;
    }

    .filteration-dropdowns .dropdown-menu {
        width: max-content;
        min-width: 100%;
        max-width: min(80vw, var(-\-pio-filter-menu-max, 16rem));
        padding-inline: var(-\-pio-filter-menu-pad, 0.35rem);
        text-align: start;
    }

    .filteration-dropdowns .dropdown-item {
        padding-inline: max(0e0px, calc(var(-\-pio-filter-pad-x, 24px) - var(-\-pio-filter-menu-pad, 0.35rem)));
        padding-block: 0.4rem;
        text-align: start;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        /* The checkbox filters put their text in a .form-check-label carrying
           bootstrap's .text-wrap, which is `white-space: normal !important` -
           so this needs the same weight to hold the single line. The label is
           a flex item, and a flex item's min-width is auto: without the 0 it
           refuses to shrink below its text and pushes the menu wide instead
           of ellipsizing. */
        .filteration-dropdowns .dropdown-item .form-check-label {
            white-space: nowrap !important;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .filteration-dropdowns .dropdown-item .form-check-input {
            flex: 0 0 auto;
        }

@media screen and (max-width: 1399.98px) {
    .filteration-dropdowns {
        -\-pio-filter-pad-x: 0.75rem;
    }
}

@media screen and (max-width: 1199.98px) {
    .filteration-dropdowns {
        -\-pio-filter-pad-x: 0.5rem;
    }
}

/* the subjects list mirrors the navbar navigation and can be long */
.filteration-dropdowns .subjects-filter-menu {
    min-width: max(230px, 100%);
}


/* ======================================================================
   USER ACCOUNT POPOVER (Inverted Light Mode -> Dark)
   ====================================================================== */
.logged-in-user-anchors-holder .user-account-popover {
    background-color: #181d26 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    color: #fff !important;
}

.logged-in-user-anchors-holder .user-account-popover p {
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 0.75rem !important;
    margin-bottom: 0.5rem !important;
    font-weight: 600 !important;
}

.logged-in-user-anchors-holder .user-account-popover p span {
    color: #aab2bd !important;
    font-weight: 400 !important;
    font-size: 0.9em !important;
}

.logged-in-user-anchors-holder .user-account-popover ul {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin: 0 !important;
    padding: 0 !important;
}
.logged-in-user-anchors-holder .user-account-popover ul:last-child {
    border-bottom: none !important;
}

.logged-in-user-anchors-holder .user-account-popover ul li {
    list-style: none !important;
    margin: 0 !important;
}

.logged-in-user-anchors-holder .user-account-popover ul li a {
    color: #fff !important;
    display: block !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.logged-in-user-anchors-holder .user-account-popover ul li a:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(-\-pio-primary-color, #FFA000) !important;
}

/* ==========================================================================
   DIPLOMA PLANS (product page)
   One card per partner university. Each plan is a separate course, so picking
   a card reloads the price / certificates / features blocks below it in place
   instead of navigating (see _diplomaPlansV2.cshtml).
   ========================================================================== */
.diploma-plans {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}

.diploma-plans-head {
    text-align: start;
    margin-bottom: 1.25rem;
}

.diploma-plans-title {
    font-weight: 700;
    margin: 0;
}

.diploma-plans-sub {
    margin: 0.35rem 0 0;
    max-width: 62ch;
    color: #6a7b85;
    font-size: clamp(0.8125rem, calc(0.7841rem + 0.1214vw), 0.9375rem);
}

/* The cards sit as a centred group under a start-aligned heading; they do not
   stretch to fill the row, however few plans there are. */
.diploma-plans-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1.5rem;
}

.diploma-plan-card {
    position: relative;
    flex: 0 1 240px;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.75rem 1.25rem 1.25rem;
    font-family: inherit;
    /* the block reads along the reading direction, not centred */
    text-align: start;
    background-color: #fff;
    border: 1px solid rgba(16, 42, 58, 0.1);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(16, 42, 58, 0.06);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

    .diploma-plan-card:hover:not(:disabled) {
        border-color: var(-\-pio-blue-color);
        box-shadow: 0 10px 26px rgba(16, 42, 58, 0.14);
        transform: translateY(-2px);
    }

    .diploma-plan-card:focus-visible {
        outline: 2px solid var(-\-pio-blue-color);
        outline-offset: 2px;
    }

    .diploma-plan-card.is-active {
        border-color: var(-\-pio-blue-color);
        box-shadow: inset 0 0 0 2px var(-\-pio-blue-color), 0 10px 26px color-mix(in srgb, var(-\-pio-blue-color) 16%, transparent);
    }

    /* a switch is in flight: the cards stay readable, but no second pick lands */
    .diploma-plan-card.is-switching {
        cursor: default;
        transform: none;
    }

        .diploma-plan-card.is-switching:not(.is-active) {
            opacity: 0.6;
        }

.diploma-plan-mark {
    position: absolute;
    top: 0.6rem;
    inset-inline-end: 0.7rem;
    font-size: 1.1rem;
    line-height: 1;
    color: var(-\-pio-blue-color);
}

/* the crest is the one centred thing on the card */
.diploma-plan-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 72px;
}

    .diploma-plan-logo img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.diploma-plan-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    /* pins the action to the bottom so cards of unequal height line up */
    flex: 1 1 auto;
}

.diploma-plan-name {
    font-weight: 700;
    font-size: clamp(0.9375rem, calc(0.9091rem + 0.1214vw), 1.0625rem);
    color: #16232b;
}

.diploma-plan-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: #6a7b85;
}

/* the plan's own overview, clamped so one long write-up cannot make its card
   taller than the rest of the row */
.diploma-plan-desc {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #6a7b85;
    white-space: normal;
    text-align: start;
}

.diploma-plan-price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
}

.diploma-plan-price-was {
    font-size: 0.875rem;
    color: #98a6ae;
}

    /* the currency belongs on the price being charged, not on the struck one
       (same convention as the related-courses card) */
    .diploma-plan-price-was::after {
        content: '' !important;
    }

.diploma-plan-price-now {
    font-size: clamp(1.125rem, calc(1.0398rem + 0.3641vw), 1.5rem);
    color: var(-\-pio-blue-color);
}

/* reads as a "see details" link, arrow and all - it is the card's call to
   action even though the whole card is the click target */
.diploma-plan-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(-\-pio-blue-color);
}

.diploma-plan-arrow {
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

/* the arrow points the way the text runs */
[dir="rtl"] .diploma-plan-arrow {
    transform: scaleX(-1);
}

.diploma-plan-card:hover:not(:disabled) .diploma-plan-arrow {
    transform: translateX(3px);
}

[dir="rtl"] .diploma-plan-card:hover:not(:disabled) .diploma-plan-arrow {
    transform: scaleX(-1) translateX(3px);
}

/* The header and details blocks while the plan they describe is being swapped:
   dimmed and inert rather than unmounted, so the page keeps its height and the
   visitor keeps their scroll position. */
.course-switching {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* The plan currently on screen, named under the hero title. Deliberately has
   no surface of its own: it is drawn like the hours/rating meta beside it -
   a .text-pio-secondary icon plus bold text - so it inherits the hero's own
   colour in both themes instead of needing a per-theme treatment. */
.header-university {
    font-size: clamp(0.8125rem, calc(0.7841rem + 0.1214vw), 0.9375rem);
}

.pio-device {
    -\-screen-x: 0%;
    -\-screen-y: 0%;
    -\-screen-w: 100%;
    -\-screen-h: 100%;
    -\-screen-r: 0;
    position: relative;
    display: block;
    width: 100%;
    line-height: 0;
}

    .pio-device::before {
        content: "";
        position: absolute;
        z-index: 0;
        inset-inline-start: var(-\-screen-x);
        top: var(-\-screen-y);
        width: var(-\-screen-w);
        height: var(-\-screen-h);
        border-radius: var(-\-screen-r);
        background: #000;
    }

    .pio-device > img {
        position: relative;
        z-index: 2;
        display: block;
        width: 100%;
        height: auto;
    }

    .pio-device > video {
        position: absolute;
        z-index: 1;
        inset-inline-start: var(-\-screen-x);
        top: var(-\-screen-y);
        width: var(-\-screen-w);
        height: var(-\-screen-h);
        border-radius: var(-\-screen-r);
        object-fit: cover;
        background: #000;
    }

.pio-webinar-page .laptop {
    -\-screen-x: 11.53%;
    -\-screen-y: 6.72%;
    -\-screen-w: 76.83%;
    -\-screen-h: 80.78%;
    max-width: 900px;
    margin-inline-start: auto;
}

.pio-webinar-page .pio-tablet {
    -\-screen-x: 5.65%;
    -\-screen-y: 10.68%;
    -\-screen-w: 88.39%;
    -\-screen-h: 76.7%;
    -\-screen-r: 1.5%;
}

.pio-webinar-page .pio-iphone {
    -\-screen-x: 5.08%;
    -\-screen-y: 2.45%;
    -\-screen-w: 89.27%;
    -\-screen-h: 93.19%;
    -\-screen-r: 7%;
}

.pio-webinar-devices {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 420 / 505;
    margin-inline: auto;
}

    .pio-webinar-devices .pio-tablet {
        position: absolute;
        inset-inline-start: 0;
        bottom: 0;
        width: 78.1%;
    }

    .pio-webinar-devices .pio-iphone {
        position: absolute;
        inset-inline-start: 57.4%;
        bottom: 0;
        width: 39.8%;
        z-index: 3;
    }

/* ---- hero ---- */
.pio-webinar-page .pio-webinar-hero {
    position: relative;
    overflow: hidden;
}

    .pio-webinar-page .pio-webinar-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.88) 100%);
        pointer-events: none;
    }

    .pio-webinar-page .pio-webinar-hero > .pio-container {
        position: relative;
        z-index: 1;
    }

.pio-webinar-hero-copy {
    color: #fff;
}

    .pio-webinar-hero-copy > * {
        color: #fff;
    }

/* ---- cards ---- */
.pio-webinar-page .pio-webinar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
    width: 100%;
}

.pio-webinar-page .webinar-card {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: hidden;
    border-radius: 14px;
    padding: 10px;
    will-change: transform;
}

    .pio-webinar-page .webinar-card:hover {
        height: auto;
    }

    .pio-webinar-page .webinar-card .card-thumb {
        height: auto;
        border-radius: 10px;
        overflow: hidden;
    }

    .pio-webinar-page .webinar-card:hover .card-thumb {
        height: auto;
    }

    .pio-webinar-page .webinar-card .card-thumb img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        display: block;
        transform: none;
        opacity: 1;
        filter: none;
        will-change: transform, filter;
    }

    .pio-webinar-page .webinar-card:hover .card-thumb img {
        opacity: 1;
        transform: none;
        filter: none;
    }

.pio-webinar-page .webinar-panel {
    position: absolute;
    inset: 10px 10px auto;
    z-index: 2;
    border-radius: 10px;
    pointer-events: none;
}

    .pio-webinar-page .webinar-panel > * {
        pointer-events: auto;
    }

.pio-webinar-page .webinar-details,
.pio-webinar-page .webinar-form-signup {
    position: static;
    bottom: auto;
    overflow: visible;
    visibility: hidden;
    opacity: 0;
}

.pio-webinar-page .webinar-details {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .75rem .85rem;
}

.pio-webinar-page .webinar-card:hover .webinar-details,
.pio-webinar-page .webinar-card:hover .webinar-form-signup {
    display: flex;
}

.pio-webinar-page .webinar-info {
    position: relative;
    z-index: 2;
    height: auto !important;
    padding-top: .75rem;
}

.pio-webinar-page .webinar-card:hover .webinar-info .card-heading {
    display: block !important;
}

.pio-webinar-page .webinar-card:hover .pio-card-footer {
    position: static;
    width: 100%;
    padding-bottom: 0;
}

.pio-webinar-page .webinar-card .card-heading {
    font-size: clamp(0.9375rem, 1.05vw, 1.125rem);
    line-height: 1.35;
    margin-bottom: .6rem;
    min-height: 2.7em;
}

/* ---- group heading over each set of cards ---- */
.pio-webinar-group-title {
    width: 100%;
    text-align: center;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: clamp(0.9375rem, 1.2vw, 1.25rem);
    margin-bottom: clamp(1rem, 2vw, 1.75rem);
    opacity: .92;
}

/* ---- responsive ---- */
@media screen and (max-width: 1199.98px) {
    .pio-webinar-page .laptop {
        max-width: 720px;
        margin-inline: auto;
    }
}

@media screen and (max-width: 991.98px) {
    .pio-webinar-page .pio-webinar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pio-webinar-devices {
        max-width: 340px;
    }

    .pio-webinar-page .laptop {
        max-width: 560px;
    }
}

@media screen and (max-width: 575.98px) {
    .pio-webinar-page .pio-webinar-grid {
        grid-template-columns: 1fr;
    }

    .pio-webinar-devices {
        max-width: 280px;
    }
}

.pio-webinar-page .webinar-details,
.pio-webinar-page .webinar-form-signup {
    background: rgba(8, 10, 12, .82);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    padding: .85rem;
    margin: 0;
    color: #fff;
}

    .pio-webinar-page .webinar-details h6,
    .pio-webinar-page .webinar-details p,
    .pio-webinar-page .webinar-details strong {
        color: #fff;
    }

    .pio-webinar-page .webinar-details p:last-child {
        margin-bottom: 0;
    }

.pio-webinar-page .webinar-card .pio-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .75rem;
}

.pio-webinar-page .webinar-card .pio-card-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-inline-start: auto;
}

.pio-webinar-page .webinar-card .pio-card-footer .btn {
    flex: 0 0 auto;
    margin: 0 !important;
    border-radius: 8px;
    padding: .5rem 1.1rem !important;
    font-size: clamp(.75rem, .9vw, .875rem);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    border: 1.5px solid transparent;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.pio-webinar-page .webinar-card .pio-btn-signUp {
    background: var(-\-pio-primary-color);
    border-color: var(-\-pio-primary-color);
    color: #1a1205;
}

    .pio-webinar-page .webinar-card .pio-btn-signUp:hover,
    .pio-webinar-page .webinar-card .pio-btn-signUp:focus-visible {
        background: color-mix(in srgb, var(-\-pio-primary-color) 82%, #fff);
        border-color: color-mix(in srgb, var(-\-pio-primary-color) 82%, #fff);
        color: #1a1205;
    }

.pio-webinar-page .webinar-card .webinar-btn-back {
    background: transparent;
    color: inherit;
}

    .pio-webinar-page .webinar-card .webinar-btn-back:hover,
    .pio-webinar-page .webinar-card .webinar-btn-back:focus-visible {
        background: color-mix(in srgb, currentColor 12%, transparent);
        color: inherit;
    }

.pio-webinar-page .webinar-card .pio-card-footer .card-text {
    font-size: clamp(.6875rem, .85vw, .8125rem);
    line-height: 1.5;
}

.pio-webinar-page .webinar-details,
.pio-webinar-page .webinar-form-signup {
    display: flex;
}

.pio-webinar-page .webinar-card .webinar-btn-back {
    border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent) !important;
}

    .pio-webinar-page .webinar-card .webinar-btn-back:hover,
    .pio-webinar-page .webinar-card .webinar-btn-back:focus-visible {
        border-color: color-mix(in srgb, currentColor 75%, transparent) !important;
    }

.pio-webinar-page .webinar-panel {
    aspect-ratio: 16 / 10;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .pio-webinar-page .webinar-panel > .webinar-details,
    .pio-webinar-page .webinar-panel > .webinar-form-signup {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

.pio-webinar-page .webinar-details::-webkit-scrollbar-thumb,
.pio-webinar-page .webinar-form-signup::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .28);
    border-radius: 10px;
    box-shadow: none;
}

.pio-webinar-page .webinar-details::-webkit-scrollbar-track,
.pio-webinar-page .webinar-form-signup::-webkit-scrollbar-track {
    background: transparent;
    box-shadow: none;
}

.pio-webinar-page .webinar-card-register .form-select option,
.pio-webinar-page .webinar-phone-group > .form-select option {
    background-color: #1B1F23;
    color: #fff;
}

    .pio-webinar-page .webinar-card-register .form-select option:checked,
    .pio-webinar-page .webinar-phone-group > .form-select option:checked {
        background-color: #2A3036;
        color: #fff;
    }

.pio-webinar-page .pio-hero-heading,
.pio-webinar-page .pio-heading {
    font-size: clamp(1.75rem, 4.2vw, 3.75rem);
    line-height: 1.15;
}

.pio-webinar-page .custom-checkbox .form-check-label {
    font-size: clamp(0.9375rem, 1.15vw, 1.125rem);
    font-weight: 500;
}

.pio-webinar-page .custom-checkbox .form-check-input {
    width: 1.15em;
    height: 1.15em;
}

.pio-webinar-page .webinar-card .card-heading {
    font-size: clamp(1rem, 1.35vw, 1.375rem);
    line-height: 1.35;
}

.pio-webinar-page .webinar-card .pio-card-footer .card-text {
    font-size: clamp(0.8125rem, 1vw, 1rem);
    line-height: 1.55;
}

.pio-webinar-page .webinar-card:hover .webinar-details,
.pio-webinar-page .webinar-details {
    font-size: clamp(0.8125rem, 1vw, 1rem);
    line-height: 1.6;
}

    .pio-webinar-page .webinar-details h6 {
        font-size: clamp(1rem, 1.3vw, 1.3125rem);
    }

.pio-webinar-page .webinar-form-title {
    font-size: clamp(0.9375rem, 1.15vw, 1.125rem);
}

.pio-webinar-page .webinar-card-register .form-control,
.pio-webinar-page .webinar-card-register .form-select {
    font-size: clamp(0.8125rem, 1vw, 1rem);
}

    .pio-webinar-page .webinar-card-register .form-control::placeholder {
        font-size: clamp(0.8125rem, 1vw, 1rem);
    }

.pio-webinar-page .webinar-card .pio-card-footer .btn {
    font-size: clamp(0.8125rem, 1vw, 1rem) !important;
}

.header-hero .in-product-h1 {
    font-size: calc(2.375rem + 1.5vw);
    line-height: 1.15;
}

.header-hero .headerSection span {
    font-size: clamp(0.9375rem, 1.15vw, 1.1875rem);
}

.header-hero .pio-stat-icon {
    overflow: visible;
    margin-bottom: .25rem;
    transform-origin: 50% 50%;
    animation: pioStatPopA .6s cubic-bezier(.34, 1.56, .64, 1) both;
}

.header-hero.recorded .pio-stat-icon {
    animation-name: pioStatPopB;
}

.header-hero .pio-stat-icon path,
.header-hero .pio-stat-icon circle {
    stroke-dasharray: 1 1;
    animation: pioStatDrawA .9s cubic-bezier(.65, 0, .35, 1) both;
}

.header-hero.recorded .pio-stat-icon path,
.header-hero.recorded .pio-stat-icon circle {
    animation-name: pioStatDrawB;
}

.header-hero .pio-stat-icon--2,
.header-hero .pio-stat-icon--2 path {
    animation-delay: .12s;
}

.header-hero .pio-stat-icon--3,
.header-hero .pio-stat-icon--3 path {
    animation-delay: .24s;
}

.header-hero .pio-stat-icon .pio-stat-hand {
    animation-delay: .35s;
}

.header-hero .pio-stat-icon .pio-stat-play {
    animation-delay: .47s;
}

@keyframes pioStatPopA {
    from { opacity: 0; transform: scale(.6); }
    to { opacity: 1; transform: none; }
}

@keyframes pioStatPopB {
    from { opacity: 0; transform: scale(.6); }
    to { opacity: 1; transform: none; }
}

@keyframes pioStatDrawA {
    0% { stroke-dashoffset: 1; opacity: 0; }
    10% { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes pioStatDrawB {
    0% { stroke-dashoffset: 1; opacity: 0; }
    10% { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .header-hero .pio-stat-icon,
    .header-hero .pio-stat-icon path,
    .header-hero .pio-stat-icon circle {
        animation: none;
    }
}

.header-hero .header-university {
    font-size: clamp(0.9375rem, 1.05vw, 1.125rem);
}

.header-hero .courses-discounts {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
}

.header-hero .current-price {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem) !important;
}

.header-hero .discount-badge {
    font-size: clamp(0.6rem, 0.76vw, 0.75rem) !important;
}

.header-hero .header-actions .header-cta {
    font-size: clamp(0.875rem, 1.05vw, 1.0625rem);
    padding: 12px 26px;
}

.header-actions .header-cart-group,
.header-actions .header-info-icon {
    -\-accent: var(-\-pio-primary-color);
}

    .header-actions .header-cart-group.is-secondary,
    .header-actions .header-info-icon.is-secondary {
        -\-accent: var(-\-pio-blue-color);
    }

.header-actions .header-cart-group {
    display: inline-flex;
    align-items: stretch;
    min-height: 44px;
    border-radius: 10px;
    overflow: hidden;
    background: color-mix(in srgb, var(-\-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(-\-accent) 35%, transparent);
    font-size: clamp(0.875rem, 1.05vw, 1.0625rem);
    font-weight: 600;
}

.header-cart-group-main,
.header-cart-group-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 0;
    background: transparent;
    color: var(-\-accent);
    font: inherit;
    text-decoration: none;
    transition: background-color .2s ease;
}

.header-cart-group-main {
    padding: 0 22px;
}

.header-cart-group-edit {
    width: 48px;
    border-inline-start: 1px solid color-mix(in srgb, var(-\-accent) 35%, transparent);
    cursor: pointer;
}

    .header-cart-group-edit i {
        font-size: .85em;
    }

    .header-cart-group-main:hover,
    .header-cart-group-edit:hover,
    .header-cart-group-main:focus-visible,
    .header-cart-group-edit:focus-visible {
        color: var(-\-accent);
        background: color-mix(in srgb, var(-\-accent) 16%, transparent);
        outline: none;
    }

.header-actions .header-info-icon {
    width: 48px;
    min-width: 48px;
    height: 48px;
    align-self: center;
    padding: 0;
    border-radius: 50%;
    color: var(-\-accent);
    border: 1px solid color-mix(in srgb, var(-\-accent) 45%, transparent);
    background: transparent;
    font-size: 1.1rem;
}

    .header-actions .header-info-icon:hover,
    .header-actions .header-info-icon:focus-visible,
    .header-actions .header-info-icon.is-active {
        color: #fff;
        background: var(-\-accent);
        border-color: var(-\-accent);
    }

.header-actions .header-video-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .header-actions .header-video-icon .fa-play {
        transform: translateX(0.12em);
    }

@media (max-width: 767.98px) {
    .header-actions .btn,
    .header-actions .section-status-badge,
    .header-actions .header-cart-group {
        min-height: 38px;
    }

    .header-hero .header-actions .header-cta {
        font-size: .8125rem;
        padding: 7px 16px;
        border-radius: 8px;
    }

    .header-actions .header-cart-group {
        border-radius: 8px;
        font-size: .8125rem;
    }

    .header-cart-group-main {
        padding: 0 14px;
    }

    .header-cart-group-edit {
        width: 38px;
    }

    .header-actions .header-info-icon {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        font-size: .95rem;
    }
}

.header-actions .header-ask-icon {
    position: relative;
    -\-pio-ask-tilt: -12deg;
    -\-pio-ask-origin: 0% 100%;
}

[dir="rtl"] .header-actions .header-ask-icon {
    -\-pio-ask-tilt: 12deg;
    -\-pio-ask-origin: 100% 100%;
}

.header-ask-icon .pio-ask-bubble {
    position: absolute;
    z-index: 2;
    bottom: calc(100% - 4px);
    inset-inline-start: calc(100% - 14px);
    display: inline-flex;
    align-items: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 .5rem;
    justify-content: center;
    border: 2px solid var(-\-bs-body-bg);
    border-radius: 7px;
    background: var(-\-accent);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    transform-origin: var(-\-pio-ask-origin);
    transform: rotate(var(-\-pio-ask-tilt));
    animation: pioAskPop .45s cubic-bezier(.34, 1.56, .64, 1) 1.2s both, pioAskWiggle 4.5s ease-in-out 2.4s infinite;
    transition: opacity .25s ease, transform .25s ease;
}

    .header-ask-icon .pio-ask-bubble::after {
        content: "";
        position: absolute;
        inset-inline-start: 5px;
        bottom: -6px;
        width: 9px;
        height: 9px;
        background: var(-\-accent);
        border: solid var(-\-bs-body-bg);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .header-ask-icon .pio-ask-bubble b {
        font-size: 1rem;
        font-weight: 800;
    }

.header-ask-icon .pio-ask-bubble-label {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width .3s ease, margin .3s ease, opacity .2s ease;
}

.header-ask-icon:hover .pio-ask-bubble,
.header-ask-icon:focus-visible .pio-ask-bubble {
    animation: none;
    opacity: 1;
    transform: rotate(calc(var(-\-pio-ask-tilt) / 3));
}

    .header-ask-icon:hover .pio-ask-bubble-label,
    .header-ask-icon:focus-visible .pio-ask-bubble-label {
        max-width: 12em;
        margin-inline-start: .4em;
        opacity: 1;
    }

@keyframes pioAskPop {
    from {
        opacity: 0;
        transform: translateY(8px) rotate(0deg) scale(.3);
    }

    to {
        opacity: 1;
        transform: rotate(var(-\-pio-ask-tilt)) scale(1);
    }
}

@keyframes pioAskWiggle {
    0%, 74%, 100% {
        transform: rotate(var(-\-pio-ask-tilt)) scale(1);
    }

    78% {
        transform: rotate(calc(var(-\-pio-ask-tilt) + 16deg)) scale(1.15);
    }

    83% {
        transform: rotate(calc(var(-\-pio-ask-tilt) - 12deg)) scale(1.15);
    }

    88% {
        transform: rotate(calc(var(-\-pio-ask-tilt) + 8deg)) scale(1.08);
    }

    93% {
        transform: rotate(calc(var(-\-pio-ask-tilt) - 4deg)) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-ask-icon .pio-ask-bubble {
        animation: none;
        transition: none;
    }
}

@media (max-width: 991.98px) {
    .header-actions .header-ask-icon {
        -\-pio-ask-tilt: -10deg;
        -\-pio-ask-origin: 100% 0%;
    }

    [dir="rtl"] .header-actions .header-ask-icon {
        -\-pio-ask-tilt: 10deg;
        -\-pio-ask-origin: 0% 0%;
    }

    .header-ask-icon .pio-ask-bubble {
        bottom: auto;
        top: calc(100% - 4px);
        inset-inline-start: auto;
        inset-inline-end: calc(100% - 12px);
        min-width: 1.3rem;
        height: 1.3rem;
        padding: 0 .35rem;
        border-radius: 6px;
        font-size: .7rem;
    }

    .header-ask-icon .pio-ask-bubble::after {
        bottom: auto;
        top: -5px;
        inset-inline-start: auto;
        inset-inline-end: 4px;
        width: 7px;
        height: 7px;
        border-width: 2px 0 0 2px;
    }

    .header-ask-icon .pio-ask-bubble b {
        font-size: .8rem;
    }

    .header-ask-icon:hover .pio-ask-bubble-label,
    .header-ask-icon:focus-visible .pio-ask-bubble-label {
        margin-inline-start: .3em;
    }
}

.pio-share-modal {
    -\-pio-share-bg: #fff;
    -\-pio-share-ink: #111;
    -\-pio-share-muted: #6b7075;
    -\-pio-share-field: #f4f5f7;
    -\-pio-share-line: rgba(0, 0, 0, .1);
    -\-pio-share-x: #000;
    -\-pio-share-x-ink: #fff;
    -\-pio-share-accent: var(-\-pio-primary-color);
    background-color: var(-\-pio-share-bg);
    color: var(-\-pio-share-ink);
}

    .pio-share-modal.is-recorded {
        -\-pio-share-accent: var(-\-pio-blue-color);
    }

body[data-bs-theme="light"] .pio-share-modal .btn-close {
    filter: none;
}

body[data-bs-theme="dark"] .pio-share-modal {
    -\-pio-share-bg: #10141c;
    -\-pio-share-ink: #fff;
    -\-pio-share-muted: #aab2bd;
    -\-pio-share-field: rgba(255, 255, 255, .06);
    -\-pio-share-line: rgba(255, 255, 255, .14);
    -\-pio-share-x: #fff;
    -\-pio-share-x-ink: #000;
}

    body[data-bs-theme="dark"] .pio-share-modal .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }

.pio-share-modal .modal-header {
    padding: 1rem 1rem .25rem;
    padding-inline-start: 1.5rem;
}

.pio-share-modal .modal-title {
    color: var(-\-pio-share-ink);
    font-size: 1.25rem;
    font-weight: 700;
}

.pio-share-modal .modal-body {
    padding: .5rem 1.5rem 1.5rem;
}

.pio-share-course {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin-bottom: 1.5rem;
    padding: .75rem;
    border: 1px solid var(-\-pio-share-line);
    border-radius: 14px;
}

.pio-share-thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
}

.pio-share-course-name {
    display: -webkit-box;
    overflow: hidden;
    color: var(-\-pio-share-ink);
    font-weight: 600;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pio-share-dialog {
    -\-bs-modal-width: 560px;
}

.pio-share-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .5rem;
}

@media (max-width: 575.98px) {
    .pio-share-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 1rem;
    }
}

.pio-share-option {
    -\-brand: #6b7075;
    -\-brand-ink: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    padding: .25rem 0;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(-\-pio-share-muted);
    font-size: .8125rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s ease;
}

    .pio-share-option:hover,
    .pio-share-option:focus-visible {
        color: var(-\-pio-share-ink);
        outline: none;
    }

    .pio-share-option.is-whatsapp {
        -\-brand: #25d366;
    }

    .pio-share-option.is-x {
        -\-brand: var(-\-pio-share-x);
        -\-brand-ink: var(-\-pio-share-x-ink);
    }

    .pio-share-option.is-facebook {
        -\-brand: #1877f2;
    }

    .pio-share-option.is-messenger {
        -\-brand: #0099ff;
    }

    .pio-share-option.is-linkedin {
        -\-brand: #0a66c2;
    }

    .pio-share-option.is-instagram {
        -\-brand: #e4405f;
    }

.pio-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(-\-brand);
    color: var(-\-brand-ink);
    font-size: 1.375rem;
    transition: transform .2s ease, box-shadow .2s ease;
}

    .pio-share-icon :is(i, svg) {
        color: var(-\-brand-ink);
    }

.pio-share-option:hover .pio-share-icon,
.pio-share-option:focus-visible .pio-share-icon {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(-\-brand) 35%, transparent);
}

.pio-share-option:focus-visible .pio-share-icon {
    outline: 2px solid var(-\-pio-share-accent);
    outline-offset: 3px;
}

.pio-share-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pio-share-hint {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-top: 1rem;
    padding: .625rem .875rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(-\-pio-share-accent) 12%, transparent);
    color: var(-\-pio-share-ink);
    font-size: .875rem;
    line-height: 1.5;
}

    .pio-share-hint :is(i, svg) {
        flex-shrink: 0;
        margin-top: .2em;
        color: var(-\-pio-share-accent);
    }

    .pio-share-hint a {
        color: inherit;
        font-weight: 600;
    }

.pio-share-copy-label {
    display: block;
    margin: 1.5rem 0 .5rem;
    color: var(-\-pio-share-muted);
    font-size: .875rem;
    font-weight: 500;
}

.pio-share-copy {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem;
    padding-inline-start: .875rem;
    border: 1px solid var(-\-pio-share-line);
    border-radius: 12px;
    background: var(-\-pio-share-field);
    transition: border-color .2s ease;
}

    .pio-share-copy.is-copied {
        border-color: var(-\-pio-share-accent);
    }

.pio-share-url {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(-\-pio-share-ink);
    font-size: .875rem;
    text-overflow: ellipsis;
}

.pio-share-copy .pio-share-copy-btn {
    flex-shrink: 0;
    min-width: 6.5rem;
    padding: .5rem 1rem;
    border-radius: 9px;
    font-size: .875rem;
    font-weight: 600;
}

.pio-share-copy-state {
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

    .pio-share-copy-state:not(.ng-hide) {
        display: inline-flex;
    }

.header-hero h1.pio-hero-content {
    font-size: calc(2.375rem + 1.5vw);
    line-height: 1.08;
    font-weight: 700;
    max-width: none;
}

.header-hero .description2 {
    font-size: clamp(0.9375rem, 1.15vw, 1.1875rem);
    line-height: 1.7;
}

.pio-testimonials {
    position: relative;
    margin-top: 0;
    padding-block: clamp(1.5rem, 3.4vw, 4rem) clamp(1.5rem, 3vw, 3.5rem);
    border-radius: 0;
}

    .pio-testimonials::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../../assets/testimonials-background.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .pio-testimonials.is-companies::before {
        background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../../assets/testimonials-background-business.jpg");
    }

    .pio-testimonials > * {
        position: relative;
        z-index: 1;
    }

.testi-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
    width: 100%;
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 3.5rem);
    text-align: center;
}

.pio-testimonials .pio-heading {
    color: #fff;
    margin: 0;
}

.testi-rule {
    display: block;
    width: min(519px, 78%);
    height: auto;
}

.testi-row {
    margin-top: clamp(2rem, 3.5vw, 3rem);
    margin-inline: 0;
}

.pio-testimonials .testi-row > .col-12 {
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: 0;
}

.swiper-testimonials {
    height: auto;
    padding-inline: .75rem;
}

    .swiper-testimonials::part(wrapper) {
        align-items: stretch;
    }

.swiper-testimonials swiper-slide {
    height: auto;
    display: flex;
    width: 100% !important;
    padding: 1rem 13px 3rem;
}

.testi-quote {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0;
}

.testi-bubble {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: 100%;
    height: 244px;
    margin: 0;
    padding: clamp(1.25rem, 1.6vw, 1.75rem) clamp(1rem, 1.5vw, 1.5rem);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
    text-align: center;
    transform: scale(1);
    transform-origin: 50% 100%;
    transition: transform .5s ease, box-shadow .5s ease;
}

    .testi-bubble::after {
        content: "";
        position: absolute;
        top: calc(100% - 1px);
        left: 50%;
        width: 30px;
        height: 16px;
        background: #fff;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        transform: translateX(-50%);
    }

.testi-text {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
    font-size: clamp(.9375rem, 1vw, 1rem);
    line-height: 1.8;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.testi-author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    margin-top: 2.25rem;
    padding-inline: clamp(.5rem, 1.5vw, 1.25rem);
    text-align: center;
}

    .testi-author > * {
        max-width: 100%;
    }

.testi-avatar {
    width: 62px;
    height: 62px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 3px solid rgba(255, 255, 255, .92);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}

.testi-name {
    font-weight: 700;
    color: #fff;
    font-size: clamp(1rem, 1.15vw, 1.125rem);
    line-height: 1.3;
}

.testi-role {
    color: rgba(255, 255, 255, .62);
    font-size: clamp(.8125rem, .95vw, .9375rem);
    line-height: 1.2;
}

.swiper-testimonials swiper-slide.swiper-slide-active {
    z-index: 2;
}

.swiper-testimonials swiper-slide.swiper-slide-active .testi-bubble {
    transform: scale(1.06);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .38);
}

.swiper-testimonials::part(bullet),
.swiper-testimonials::part(bullet-active) {
    width: 9px;
    height: 9px;
    opacity: 1;
    transition: background .25s ease;
}

.swiper-testimonials::part(bullet) {
    background: rgba(255, 255, 255, .35);
}

.swiper-testimonials::part(bullet-active) {
    background: #fff;
}

.swiper-testimonials,
.swiper-testimonials swiper-slide {
    -webkit-user-select: none;
    user-select: none;
    cursor: grab;
}

.swiper-testimonials:active {
    cursor: grabbing;
}

@media screen and (max-width: 991.98px) {
    .pio-testimonials {
        padding-block: clamp(2.5rem, 6vw, 3rem) 2.5rem;
    }

    .swiper-testimonials swiper-slide {
        padding: 1rem 13px 2.75rem;
    }

    .testi-author {
        margin-top: 2rem;
    }

    .testi-text {
        -webkit-line-clamp: 6;
    }
}

@media screen and (max-width: 767.98px) {
    .pio-testimonials {
        padding-block: 2.5rem 1.75rem;
    }

    .pio-testimonials .pio-heading {
        text-wrap: balance;
    }

    .testi-head {
        gap: .85rem;
    }

    .testi-row {
        margin-top: 1.5rem;
    }

    .swiper-testimonials {
        padding-inline: 0;
    }

    .swiper-testimonials swiper-slide {
        padding: .5rem 1rem 2.75rem;
    }

    .testi-bubble {
        flex: 1 1 auto;
        height: auto;
        padding: 1.75rem 1.25rem;
        border-radius: 20px;
        box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
    }

    .swiper-testimonials swiper-slide.swiper-slide-active .testi-bubble {
        transform: none;
        box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
    }

    .testi-text {
        font-size: .9375rem;
        line-height: 1.7;
        -webkit-line-clamp: 11;
    }

    .testi-author {
        gap: .3rem;
        margin-top: 1.5rem;
    }

    .testi-avatar {
        width: 56px;
        height: 56px;
    }
}

:root {
    -\-pio-hero-keyline: rgba(0, 0, 0, .45);
}

.pio-offers-section {
    padding-block: var(-\-pio-section-space) 0;
    -\-pio-offers-fade: #fff;
}

body[data-bs-theme="dark"] .pio-offers-section {
    -\-pio-offers-fade: #000;
}

.pio-offers-shell {
    position: relative;
}

    .pio-offers-shell.is-loading {
        min-height: 336px;
    }

@media (max-width: 767.98px) {
    .pio-offers-shell.is-loading {
        min-height: 520px;
    }
}

@media (max-width: 575.98px) {
    .pio-offers-shell.is-loading {
        min-height: 440px;
    }
}

    .pio-offers-shell::before,
    .pio-offers-shell::after {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-block-end: 2.25rem;
        width: clamp(56px, 7vw, 120px);
        z-index: 3;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease;
    }

    .pio-offers-shell::before {
        inset-inline-start: 0;
        background: linear-gradient(to right, var(-\-pio-offers-fade), transparent);
    }

    .pio-offers-shell::after {
        inset-inline-end: 0;
        background: linear-gradient(to left, var(-\-pio-offers-fade), transparent);
    }

    body[dir="rtl"] .pio-offers-shell::before {
        background: linear-gradient(to left, var(-\-pio-offers-fade), transparent);
    }

    body[dir="rtl"] .pio-offers-shell::after {
        background: linear-gradient(to right, var(-\-pio-offers-fade), transparent);
    }

.pio-offers-swiper {
    display: block;
    width: 100%;
}

    .pio-offers-swiper::part(container) {
        padding-bottom: 2.25rem;
    }

    .pio-offers-swiper::part(pagination) {
        bottom: 0;
        inset-inline-start: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
    }

    .pio-offers-swiper::part(bullet),
    .pio-offers-swiper::part(bullet-active) {
        width: 18px;
        height: 8px;
        margin: 0;
        border-radius: 4px;
        background: currentColor;
        opacity: .22;
        transition: width .25s ease, opacity .25s ease, background-color .25s ease;
    }

    .pio-offers-swiper::part(bullet-active) {
        width: 30px;
        background: #FFA000;
        opacity: 1;
    }

.pio-offer-slide {
    display: block;
    flex: 0 0 auto;
    width: 86% !important;
    height: auto;
    overflow: visible;
    padding-inline: 3px;
}

.pio-offer-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    -\-pio-offer-pad: clamp(1.5rem, 2.4vw, 2.25rem);
    gap: 1rem;
    height: 100%;
    padding: var(-\-pio-offer-pad);
    border-radius: 24px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background: var(-\-pio-offer-base);
    transition: transform .35s ease, box-shadow .35s ease;
}

    .pio-offer-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        opacity: .25;
        transition: opacity .35s ease;
        background: linear-gradient(135deg, var(-\-pio-offer-tint) 0%, transparent 32%);
    }

    .pio-offer-card:hover {
        color: #fff;
        transform: translateY(-4px);
    }

    .pio-offer-card:hover::before {
        opacity: 1;
    }

.pio-offer-deco {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    opacity: .5;
    transition: opacity .35s ease;
}

.pio-offer-card:hover .pio-offer-deco {
    opacity: 1;
}

    .pio-offer-deco::before,
    .pio-offer-deco::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, .12);
    }

    .pio-offer-deco::before {
        width: 320px;
        height: 320px;
        inset-block-start: -42%;
        inset-inline-end: -6%;
    }

    .pio-offer-deco::after {
        width: 150px;
        height: 150px;
        inset-block-end: -22%;
        inset-inline-start: -8%;
        background: rgba(255, 255, 255, .1);
    }

/* Tint and ink derived from the root navy, like the amber pair is from #FFA000. */
.pio-offer-card--teal {
    -\-pio-offer-base: var(-\-pio-blue-color);
    -\-pio-offer-tint: color-mix(in srgb, var(-\-pio-blue-color) 75%, #fff);
    -\-pio-offer-ink: var(-\-pio-blue-color);
    -\-pio-offer-shadow: color-mix(in srgb, var(-\-pio-blue-color) 45%, transparent);
}

.pio-offer-card--amber {
    -\-pio-offer-base: #FFA000;
    -\-pio-offer-tint: #ffb733;
    -\-pio-offer-ink: #A66800;
    -\-pio-offer-shadow: rgba(255, 160, 0, .42);
}

.pio-offer-card--ink {
    -\-pio-offer-base: #0a1525;
    -\-pio-offer-tint: #152847;
    -\-pio-offer-ink: #152847;
    -\-pio-offer-shadow: rgba(10, 21, 37, .45);
}

.pio-offer-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.pio-offer-badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    border-radius: 999px;
    padding: .3rem .85rem;
    background: #fff;
    color: var(-\-pio-offer-ink);
    font-weight: 700;
    line-height: 1.4;
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
}

.pio-offer-title {
    margin-block: .9rem .55rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    text-transform: none;
    font-size: clamp(1.125rem, calc(1.0148rem + 0.4701vw), 1.5rem);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pio-offer-text {
    margin-bottom: 1.35rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .92);
    font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pio-offer-cta {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: .5rem;
    margin-top: auto;
    border-radius: 999px;
    padding: .6rem 1.2rem;
    background: #fff;
    color: var(-\-pio-offer-ink);
    font-weight: 600;
    line-height: 1;
    font-size: clamp(0.7206rem, calc(0.6893rem + 0.1335vw), 0.8125rem);
    transition: gap .25s ease;
}

.pio-offer-card:hover .pio-offer-cta {
    gap: .85rem;
}

body[dir="rtl"] .pio-offer-cta-arrow {
    transform: scaleX(-1);
}

.pio-offer-figure {
    -\-pio-offer-art-w: calc((100% + var(-\-pio-offer-pad)) * 1.05);
    position: relative;
    z-index: 1;
    align-self: flex-end;
    width: var(-\-pio-offer-art-w);
    min-width: 0;
    margin-block-start: auto;
    margin-inline-end: calc(var(-\-pio-offer-art-w) * -.05 - var(-\-pio-offer-pad));
    margin-block-end: calc(var(-\-pio-offer-art-w) * -.045 - var(-\-pio-offer-pad));
}

.pio-offer-art {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .22));
    transform-origin: 100% 100%;
    transition: transform .45s ease;
}

body[dir="rtl"] .pio-offer-art {
    transform-origin: 0 100%;
}

.pio-offer-card:hover .pio-offer-art {
    transform: scale(1.06);
}

.pio-offers-nav .pio-nav-btn {
    position: absolute;
    top: calc(50% - 3.1rem);
    z-index: 4;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .1);
    background-color: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}

.pio-offers-nav .pio-nav-prev {
    inset-inline-start: -.75rem;
}

.pio-offers-nav .pio-nav-next {
    inset-inline-end: -.75rem;
}

.pio-offers-nav .pio-nav-btn.is-disabled {
    opacity: 0;
    visibility: hidden;
}

@media screen and (min-width: 768px) {
    .pio-offer-slide {
        width: 66% !important;
    }

    .pio-offer-card {
        flex-direction: row;
        align-items: center;
        gap: clamp(1rem, 2vw, 1.75rem);
        min-height: 280px;
        padding-block: clamp(1.25rem, 1.8vw, 1.75rem);
    }

    .pio-offer-title {
        margin-block: .7rem .45rem;
    }

    .pio-offer-text {
        margin-bottom: 1rem;
    }

    .pio-offer-body {
        flex: 1 1 46%;
    }

    .pio-offer-figure {
        flex: 1 1 54%;
        width: auto;
        margin-inline-end: calc(-3% - var(-\-pio-offer-pad));
        margin-block-end: calc(-2.5% - var(-\-pio-offer-pad));
    }
}

@media screen and (min-width: 1200px) {
    .pio-offer-slide {
        width: 47% !important;
    }
}

@media screen and (max-width: 767.98px) {
    .pio-offers-nav {
        display: none;
    }

    .pio-offer-card {
        min-height: 0;
    }
}

body[data-bs-theme="dark"] .pio-offers-nav .pio-nav-btn {
    background-color: #171b22;
    border-color: rgba(255, 255, 255, .16);
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .55);
}

.pio-features-section {
    -\-pio-features-angle: 135deg;
    -\-pio-features-card: #fff;
    -\-pio-features-title: #0f1b2a;
    -\-pio-features-text: #5b6675;
    padding-block-start: var(-\-pio-section-space, 2rem);
}

body[dir="rtl"] .pio-features-section {
    -\-pio-features-angle: 225deg;
}

body[data-bs-theme="dark"] .pio-features-section {
    -\-pio-features-card: #0c0f15;
    -\-pio-features-title: #fff;
    -\-pio-features-text: #9aa3b2;
}

.pio-feature-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.pio-features-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .875rem;
}

.pio-feature-card {
    -\-pio-feature-fill: var(-\-pio-blue-color, #055386);
    -\-pio-feature-tint: color-mix(in srgb, var(-\-pio-blue-color, #055386) 75%, #fff);
    -\-pio-feature-ink: var(-\-pio-blue-color, #055386);
    -\-pio-feature-edge: color-mix(in srgb, var(-\-pio-feature-ink) 16%, transparent);
    -\-pio-feature-wash: 9%;
    -\-pio-feature-mark: .09;
    -\-pio-feature-pulse: .3;
    -\-pio-feature-radius: 24px;
    -\-pio-feature-chip: 60px;
    -\-pio-feature-chip-radius: 18px;
    -\-pio-feature-end: 1.125rem;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 108px;
    padding-block: 1.125rem;
    padding-inline: 1.25rem var(-\-pio-feature-end);
    border-radius: var(-\-pio-feature-radius);
}

.pio-feature-card--ink {
    -\-pio-feature-fill: #0a1525;
    -\-pio-feature-tint: #152847;
    -\-pio-feature-ink: #152847;
}

.pio-feature-card--amber {
    -\-pio-feature-fill: #FFA000;
    -\-pio-feature-tint: #ffb733;
    -\-pio-feature-ink: #FFA000;
}

body[data-bs-theme="dark"] .pio-feature-card {
    -\-pio-feature-ink: #3C9BE0;
    -\-pio-feature-wash: 15%;
    -\-pio-feature-mark: .12;
    -\-pio-feature-pulse: .5;
}

body[data-bs-theme="dark"] .pio-feature-card--ink {
    -\-pio-feature-fill: #24406b;
    -\-pio-feature-tint: #2f5387;
    -\-pio-feature-ink: #7d93b8;
}

body[data-bs-theme="dark"] .pio-feature-card--amber {
    -\-pio-feature-ink: #FFA000;
}

.pio-feature-deco {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(-\-pio-feature-radius);
    overflow: hidden;
    pointer-events: none;
}

    .pio-feature-deco::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(var(-\-pio-features-angle), var(-\-pio-features-card) 40%, color-mix(in srgb, var(-\-pio-feature-ink) var(-\-pio-feature-wash), var(-\-pio-features-card)));
        box-shadow: inset 0 0 0 1px var(-\-pio-feature-edge);
    }

.pio-feature-pulse {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(-\-pio-feature-end);
    width: var(-\-pio-feature-chip);
    height: var(-\-pio-feature-chip);
    margin-block-start: calc(var(-\-pio-feature-chip) / -2);
}

    .pio-feature-pulse::before,
    .pio-feature-pulse::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: var(-\-pio-feature-chip-radius);
        background: linear-gradient(145deg, var(-\-pio-feature-tint) 0%, var(-\-pio-feature-fill) 65%);
        opacity: 0;
        transform: rotate(82deg);
    }

.pio-feature-watermark {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: -34px;
    width: 150px;
    height: 150px;
    margin-block-start: -75px;
    color: var(-\-pio-feature-ink);
    opacity: var(-\-pio-feature-mark);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(-14deg);
}

.pio-feature-copy {
    flex: 1 1 auto;
    min-width: 0;
}

    .pio-feature-copy .heading,
    .pio-feature-copy .par {
        display: block;
    }

    .pio-feature-copy .heading {
        color: var(-\-pio-features-title);
        font-weight: 700;
        line-height: 1.35;
        font-size: clamp(1rem, calc(.9rem + .35vw), 1.125rem);
    }

    .pio-feature-copy .par {
        margin-block-start: .3rem;
        color: var(-\-pio-features-text);
        line-height: 1.5;
        font-size: clamp(.8125rem, calc(.78rem + .12vw), .875rem);
    }

.pio-feature-rule {
    width: 28px;
    height: 3px;
    margin-block-end: .65rem;
    border-radius: 3px;
    background-color: var(-\-pio-feature-ink);
}

.pio-feature-chip {
    flex: 0 0 auto;
    width: var(-\-pio-feature-chip);
    height: var(-\-pio-feature-chip);
}

.pio-feature-chip-face {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: var(-\-pio-feature-chip-radius);
    color: #fff;
    background: linear-gradient(145deg, var(-\-pio-feature-tint) 0%, var(-\-pio-feature-fill) 65%);
    transform: rotate(-8deg);
}

.pio-feature-icon {
    width: 35px;
    height: 35px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(8deg);
}

.pio-feature-card.is-lit .pio-feature-chip-face {
    transform: rotate(82deg);
    transition: transform .8s cubic-bezier(.65, 0, .35, 1);
}

.pio-feature-card.is-lit .pio-feature-icon {
    transform: rotate(-82deg);
    transition: transform .8s cubic-bezier(.65, 0, .35, 1);
}

.pio-feature-card.is-lit .pio-feature-pulse::before {
    animation: pio-feature-pulse 1.8s cubic-bezier(.2, .6, .35, 1) .75s both;
}

.pio-feature-card.is-lit .pio-feature-pulse::after {
    -\-pio-feature-pulse-peak: .55;
    animation: pio-feature-pulse 1.8s cubic-bezier(.2, .6, .35, 1) 1.1s both;
}

.pio-feature-card.is-lit .pio-feature-watermark {
    opacity: calc(var(-\-pio-feature-mark) * 2);
    transform: rotate(-6deg);
    transition: opacity 1.6s ease .75s, transform 1.6s cubic-bezier(.65, 0, .35, 1) .75s;
}

.pio-feature-card.is-lit .pio-feature-rule {
    width: 46px;
    transition: width .8s ease .9s;
}

.pio-feature-card.is-settling .pio-feature-chip-face,
.pio-feature-card.is-settling .pio-feature-icon {
    transition: transform .8s cubic-bezier(.65, 0, .35, 1);
}

.pio-feature-card.is-settling .pio-feature-watermark {
    transition: opacity 1.6s ease, transform 1.6s cubic-bezier(.65, 0, .35, 1);
}

.pio-feature-card.is-settling .pio-feature-rule {
    transition: width .6s ease .3s;
}

@keyframes pio-feature-pulse {
    0% {
        opacity: calc(var(-\-pio-feature-pulse) * var(-\-pio-feature-pulse-peak, 1));
        transform: rotate(82deg) scale(1);
    }

    100% {
        opacity: 0;
        transform: rotate(98deg) scale(5);
    }
}

@media (min-width: 992px) {
    .pio-features-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .pio-feature-card {
        min-height: 124px;
    }
}

@media (min-width: 1400px) {
    .pio-feature-card {
        -\-pio-feature-chip: 64px;
        -\-pio-feature-chip-radius: 20px;
        -\-pio-feature-end: 1.375rem;
        min-height: 132px;
        padding-inline-start: 1.5rem;
    }

    .pio-feature-icon {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 575.98px) {
    .pio-features-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .5rem;
    }

    .pio-feature-card {
        -\-pio-feature-radius: 18px;
        -\-pio-feature-chip: 44px;
        -\-pio-feature-chip-radius: 13px;
        -\-pio-feature-top: .875rem;
        flex-direction: column;
        justify-content: flex-start;
        gap: .625rem;
        min-height: 0;
        padding: var(-\-pio-feature-top) .375rem .8125rem;
        text-align: center;
    }

    .pio-feature-chip {
        order: -1;
    }

    .pio-feature-pulse {
        inset-block-start: var(-\-pio-feature-top);
        inset-inline: 0;
        margin-block-start: 0;
        margin-inline: auto;
    }

    .pio-feature-icon {
        width: 26px;
        height: 26px;
    }

    .pio-feature-watermark {
        inset-block-start: auto;
        inset-block-end: -20px;
        inset-inline-end: -20px;
        width: 80px;
        height: 80px;
        margin-block-start: 0;
    }

    .pio-feature-copy {
        flex: 0 1 auto;
        width: 100%;
    }

    .pio-feature-rule {
        display: none;
    }

    .pio-feature-copy .heading {
        font-size: clamp(.6875rem, 3.15vw, .8125rem);
        line-height: 1.3;
        hyphens: auto;
    }

    .pio-feature-copy .par {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (max-width: 359.98px) {
    .pio-features-grid {
        gap: .375rem;
    }

    .pio-feature-card {
        padding-inline: .25rem;
    }

    .pio-feature-copy .heading {
        font-size: clamp(.625rem, 3.15vw, .8125rem);
    }
}


.pio-testimonials.is-business .swiper-testimonials {
    margin-inline: 0;
}

@media (min-width: 992px) {
    .header-hero > .container > .row {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .header-hero .header-content > .d-flex {
        margin-top: .5rem !important;
        margin-bottom: .5rem !important;
    }

    .header-hero .in-product-h1 {
        margin-top: 0 !important;
    }

    .header-hero .headerSection > .d-flex,
    .header-hero .courses-discounts {
        margin-top: 1.5rem !important;
    }

    .header-hero .header-actions {
        margin-top: 1.25rem !important;
    }

    .header-hero .mode-switch {
        transform: translateX(6rem);
    }
}

/* ==========================================================================
   INDEX HERO - PHOTO BANNER
   ========================================================================== */
.hero-section-photo {
    background: #E8E6D9;
}

.pio-hero-banner {
    -\-pio-hero-h: min(36.3021vw, 697px);
    -\-pio-hero-lh: min(4.5833vw, 88px);
    position: relative;
    width: 100%;
    min-height: var(-\-pio-hero-h);
    background: #E8E6D9;
}

.pio-hero-banner-img {
    display: block;
    width: 100%;
    height: var(-\-pio-hero-h);
    object-fit: cover;
    object-position: center center;
}

.pio-hero-banner-copy {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
}


    .pio-hero-banner-copy > .container {
        width: 100%;
    }

    .pio-hero-banner-copy a {
        pointer-events: auto;
    }

.pio-hero-banner-text {
    max-width: min(55vw, 1060px, 100%);
    color: #10202B;
    overflow-wrap: break-word;
}

    .pio-hero-banner-text .pio-heading {
        font-family: Poppins, sans-serif;
        font-size: min(1.6667vw, 32px);
        font-weight: 600;
        line-height: var(-\-pio-hero-lh);
        letter-spacing: -0.02em;
        color: #000;
        text-transform: uppercase;
        margin-bottom: 0;
    }

    .pio-hero-banner-text .pio-hero-content {
        width: 100%;
        max-width: none;
        font-family: Poppins, sans-serif;
        font-size: min(3.75vw, 72px);
        font-weight: 600;
        line-height: var(-\-pio-hero-lh);
        letter-spacing: -0.02em;
        color: #000;
        margin: 0;
    }

@media (max-width: 991.98px) {
    .pio-hero-banner {
        -\-pio-hero-lh: 1.25em;
        min-height: 190px;
    }

    .pio-hero-banner-img {
        height: 190px;
        object-fit: cover;
        object-position: 78% center;
    }

    .pio-hero-banner-copy {
        position: absolute;
        /*display: block;*/
        padding-block: 1.5rem 2rem;
    }

    .pio-hero-banner-text {
        max-width: 100%;
    }

        .pio-hero-banner-text .pio-heading {
            font-size: clamp(0.8rem, 3.2vw, 1.1rem);
            letter-spacing: -0.02em;
        }

        .pio-hero-banner-text .pio-hero-content {
            font-size: clamp(1.1rem, 4.4vw, 1.9rem);
        }
}

/* ==========================================================================
   INDEX HERO - SLIDER (2+ banners)
   ========================================================================== */
.pio-hero-slider {
    -\-pio-hero-fade: 0.9s;
    -\-pio-hero-delay: 6s;
    -\-pio-hero-copy-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    overflow: hidden;
}

    .pio-hero-slider .pio-hero-slide {
        position: relative;
        opacity: 0;
        visibility: hidden;
        transition: opacity var(-\-pio-hero-fade) ease, visibility 0s linear var(-\-pio-hero-fade);
    }

        .pio-hero-slider .pio-hero-slide + .pio-hero-slide {
            position: absolute;
            inset: 0;
        }

        .pio-hero-slider .pio-hero-slide.is-active {
            opacity: 1;
            visibility: visible;
            transition: opacity var(-\-pio-hero-fade) ease, visibility 0s;
        }

.pio-hero-banner-media {
    position: relative;
    overflow: hidden;
}

    .pio-hero-slider .pio-hero-slide.is-active .pio-hero-banner-media {
        animation: pio-hero-media-zoom calc(var(-\-pio-hero-delay) + var(-\-pio-hero-fade)) linear forwards;
    }

    .pio-hero-slider.is-paused .pio-hero-slide.is-active .pio-hero-banner-media {
        animation-play-state: paused;
    }

@keyframes pio-hero-media-zoom {
    from {
        transform: scale(1.06);
    }

    to {
        transform: scale(1);
    }
}

.pio-hero-banner-copy::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to var(-\-pio-hero-scrim-dir, right), rgba(232, 230, 217, 0.92) 0%, rgba(232, 230, 217, 0.55) 34%, rgba(232, 230, 217, 0) 62%);
    pointer-events: none;
}

[dir="rtl"] .pio-hero-banner-copy::before {
    -\-pio-hero-scrim-dir: left;
}

.pio-hero-banner-copy > .container {
    position: relative;
    z-index: 1;
}

    .pio-hero-slider .pio-hero-banner-text > * {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 0.7s ease, transform 0.7s var(-\-pio-hero-copy-ease);
    }

    .pio-hero-slider .pio-hero-slide.is-active .pio-hero-banner-text > * {
        opacity: 1;
        transform: none;
        transition-delay: 0.25s;
    }

        .pio-hero-slider .pio-hero-slide.is-active .pio-hero-banner-text > * + * {
            transition-delay: 0.4s;
        }

.pio-hero-controls-wrap {
    position: absolute;
    inset-inline: 0;
    bottom: clamp(0.75rem, 2.2vw, 2.25rem);
    z-index: 3;
    pointer-events: none;
}

    .pio-hero-controls-wrap > .container {
        width: 100%;
    }

.pio-hero-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    pointer-events: auto;
}

.pio-hero-dots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pio-hero-dot {
    position: relative;
    width: 10px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(16, 32, 43, 0.2);
    transition: width 0.45s var(-\-pio-hero-copy-ease, ease), background-color 0.35s ease;
}

    .pio-hero-dot:hover {
        background: rgba(16, 32, 43, 0.38);
    }

    .pio-hero-dot:focus-visible {
        outline: 2px solid var(-\-pio-blue-color);
        outline-offset: 4px;
    }

    .pio-hero-dot.is-active {
        width: 56px;
        background: rgba(16, 32, 43, 0.18);
    }

.pio-hero-dot-progress {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(-\-pio-blue-color);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

[dir="rtl"] .pio-hero-dot-progress {
    transform-origin: right center;
}

.pio-hero-dot.is-active .pio-hero-dot-progress {
    animation: pio-hero-dot-fill var(-\-pio-hero-delay, 6s) linear forwards;
}

.pio-hero-slider.is-paused .pio-hero-dot.is-active .pio-hero-dot-progress {
    animation-play-state: paused;
}

.pio-hero-slider.is-paused .pio-hero-dot.is-active {
    animation: pio-hero-dot-breathe 1.6s ease-in-out infinite;
}

.pio-hero-dot-paused {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 7px);
    line-height: 0;
    opacity: 0;
    transform: translate(-50%, 4px) scale(0.6);
    transform-origin: 50% 100%;
    transition: opacity 0.2s ease, transform 0.3s var(-\-pio-hero-copy-ease, ease);
    pointer-events: none;
}

    .pio-hero-cursor-inner .pio-hero-pause-icon {
        width: 10px;
        height: 11px;
    }

    .pio-hero-dot-paused .pio-hero-pause-icon {
        width: 11px;
        height: 13px;
    }

.pio-hero-slider.is-paused .pio-hero-dot.is-active .pio-hero-dot-paused {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.pio-hero-slider.is-resuming .pio-hero-dot.is-active .pio-hero-dot-paused {
    animation: pio-hero-resume-out 0.7s ease forwards;
}

@keyframes pio-hero-resume-out {
    0%, 65% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -4px) scale(0.8);
    }
}

@keyframes pio-hero-dot-breathe {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 color-mix(in srgb, var(-\-pio-blue-color) 0%, transparent);
    }

    50% {
        opacity: 0.55;
        box-shadow: 0 0 0 4px color-mix(in srgb, var(-\-pio-blue-color) 18%, transparent);
    }
}

.pio-hero-cursor {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    display: none;
    pointer-events: none;
    will-change: transform;
}

.pio-hero-cursor-inner {
    display: block;
    line-height: 0;
    opacity: 0;
    transform: translate(14px, calc(-100% - 2px)) scale(0.5);
    transform-origin: 0 100%;
    transition: opacity 0.2s ease, transform 0.3s var(-\-pio-hero-copy-ease, ease);
}

.pio-hero-pause-icon {
    display: block;
    width: 16px;
    height: 18px;
    overflow: visible;
    filter: drop-shadow(0 1px 2px rgba(16, 32, 43, 0.35));
}

    .pio-hero-pause-icon rect,
    .pio-hero-pause-icon path {
        fill: var(-\-pio-blue-color);
        stroke: #FFF;
        stroke-width: 3;
        stroke-linejoin: round;
        paint-order: stroke;
    }

@media (hover: hover) and (pointer: fine) {
    .pio-hero-slider .pio-hero-cursor {
        display: block;
    }

    .pio-hero-slider.is-paused.has-pointer .pio-hero-cursor-inner {
        opacity: 1;
        transform: translate(14px, calc(-100% - 2px)) scale(1);
    }

    .pio-hero-slider.is-paused.has-pointer.is-over-control .pio-hero-cursor-inner {
        opacity: 0;
        transform: translate(14px, calc(-100% - 2px)) scale(0.5);
    }
}

@keyframes pio-hero-dot-fill {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

.pio-hero-nav {
    display: none;
    align-items: center;
    gap: 0.5rem;
}

.pio-hero-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.62);
    color: #10202B;
    line-height: 0;
    box-shadow: 0 4px 14px rgba(16, 32, 43, 0.1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    .pio-hero-arrow svg {
        width: 11px;
        height: 11px;
    }

    .pio-hero-arrow:hover {
        border-color: #10202B;
        background: #10202B;
        color: #FFF;
    }

    .pio-hero-arrow:focus-visible {
        outline: 2px solid var(-\-pio-blue-color);
        outline-offset: 3px;
    }

[dir="rtl"] .pio-hero-arrow svg {
    transform: scaleX(-1);
}

@media (min-width: 992px) {
    .pio-hero-nav {
        display: flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pio-hero-slider .pio-hero-slide,
    .pio-hero-slider .pio-hero-banner-text > *,
    .pio-hero-cursor-inner,
    .pio-hero-dot-paused,
    .pio-hero-dot {
        transition-duration: 0.01ms;
    }

    .pio-hero-slider .pio-hero-banner-text > * {
        transform: none;
    }

    .pio-hero-slider .pio-hero-slide.is-active .pio-hero-banner-media,
    .pio-hero-slider.is-paused .pio-hero-dot.is-active,
    .pio-hero-slider.is-resuming .pio-hero-dot.is-active .pio-hero-dot-paused {
        animation: none;
    }

    .pio-hero-dot.is-active .pio-hero-dot-progress {
        animation: none;
        transform: scaleX(1);
    }
}

/* ==========================================================================
   POPULAR COURSES (HOME)
   ========================================================================== */
.pio-popular-section {
    -\-pio-popular-title-size: clamp(1.5rem, calc(1.28rem + 0.94vw), 2.125rem);
    padding-block: var(-\-pio-section-space, 2rem) 0;
}

.pio-popular-rail .pio-course-swiper {
    margin-inline: calc(-0.5rem - 10px);
}

.pio-course-card .pio-btn-signIn,
.relatedCoursesSwiper .card .pio-btn-signIn {
    background: var(-\-pio-blue-color) !important;
}

.pio-popular-title {
    font-size: var(-\-pio-popular-title-size, 2.125rem);
    font-weight: 700;
    color: inherit;
    margin-bottom: 1rem;
}

.pio-popular-tabs-row {
    -\-pio-tab-font: clamp(0.875rem, calc(0.8rem + 0.3vw), 1.0625rem);
    -\-pio-tab-pad-y: 0.45em;
    -\-pio-tab-pad-x: 1.1em;
    -\-pio-tab-gap: 0.25rem;
    -\-pio-tab-track-pad: 0.3rem;
    -\-pio-tab-radius: 0;
    -\-pio-tab-min-h: 2.25rem;
    -\-pio-tab-fade: 4rem;
    -\-pio-tab-max-w: 46rem;
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 1.5rem;
}

    .pio-popular-tabs-row.pio-can-prev .pio-popular-tabs {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(-\-pio-tab-fade, 4rem));
        mask-image: linear-gradient(to right, transparent 0, #000 var(-\-pio-tab-fade, 4rem));
    }

    .pio-popular-tabs-row.pio-can-next .pio-popular-tabs {
        -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(-\-pio-tab-fade, 4rem));
        mask-image: linear-gradient(to left, transparent 0, #000 var(-\-pio-tab-fade, 4rem));
    }

    .pio-popular-tabs-row.pio-can-prev.pio-can-next .pio-popular-tabs {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(-\-pio-tab-fade, 4rem), #000 calc(100% - var(-\-pio-tab-fade, 4rem)), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 var(-\-pio-tab-fade, 4rem), #000 calc(100% - var(-\-pio-tab-fade, 4rem)), transparent 100%);
    }

.pio-tabs-more {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(-\-pio-primary-color, #FFA000);
    line-height: 0;
    transition: opacity .2s ease;
}

    .pio-tabs-more:hover {
        opacity: .7;
    }

    .pio-tabs-more svg {
        width: 13px;
        height: 13px;
    }

    .pio-tabs-more--prev {
        left: 0;
    }

    .pio-tabs-more--next {
        right: 0;
    }

    .pio-popular-tabs-row.pio-can-prev .pio-tabs-more--prev,
    .pio-popular-tabs-row.pio-can-next .pio-tabs-more--next {
        display: inline-flex;
    }

.pio-popular-tabs {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: var(-\-pio-tab-gap, 0.25rem);
    width: fit-content;
    max-width: 100%;
    min-height: var(-\-pio-tab-min-h, 2.25rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: var(-\-pio-tab-track-pad, 0.3rem);
    border-radius: var(-\-pio-tab-radius, 999px);
    /*background: var(--bs-secondary-bg, #f1f3f5);*/
}

    .pio-popular-tabs::-webkit-scrollbar {
        display: none;
    }

.pio-popular-tabs-row .pio-popular-tabs {
    padding-inline: 0;
}

.pio-tabs-pill {
    position: absolute;
    top: var(-\-pio-tab-track-pad, 0.3rem);
    bottom: var(-\-pio-tab-track-pad, 0.3rem);
    left: 0;
    width: 0;
    z-index: 0;
    opacity: 0;
    border-radius: var(-\-pio-tab-radius, 999px);
    background: var(-\-pio-primary-color, #FFA000);
    pointer-events: none;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}

    .pio-tabs-pill.is-ready {
        opacity: 1;
    }

.pio-popular-tab {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    background: none;
    border: 0;
    border-radius: var(-\-pio-tab-radius, 999px);
    padding: var(-\-pio-tab-pad-y, 0.45rem) var(-\-pio-tab-pad-x, 1.1rem);
    white-space: nowrap;
    font-size: var(-\-pio-tab-font, 1rem);
    font-weight: 600;
    line-height: 1.6;
    color: var(-\-pio-scondery-text, #00000080);
    transition: color 0.25s ease;
}

    .pio-popular-tab:hover,
    .pio-popular-tab:focus-visible {
        color: var(-\-pio-primary-color, #FFA000);
    }

    .pio-popular-tab.is-active,
    .pio-popular-tab.is-active:hover {
        color: #FFF;
    }

.pio-popular-section .pio-popular-tabs-row {
    -\-pio-tab-pad-x: 0;
    -\-pio-tab-gap: clamp(1.25rem, 2.2vw, 2.25rem);
    -\-pio-tab-track-pad: 0;
    -\-pio-tab-radius: 0;
    padding-inline-start: calc(1rem + 1px);
}

    .pio-popular-section .pio-popular-tabs .pio-tabs-pill {
        top: auto;
        bottom: 0;
        height: 3px;
    }

    .pio-popular-section .pio-popular-tabs .pio-popular-tab.is-active,
    .pio-popular-section .pio-popular-tabs .pio-popular-tab.is-active:hover {
        color: var(-\-pio-primary-color, #FFA000);
    }

.pio-popular-type {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}

.pio-popular-levels {
    font-size: 0.85rem;
    color: var(-\-pio-scondery-text, #00000080);
}

    .pio-popular-levels strong {
        color: var(-\-pio-blue-color);
    }

.pio-popular-discount {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(-\-pio-primary-color, #FFA000);
}

.pio-popular-discount-sign {
    font-size: 0.75rem;
}

.pio-popular-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.pio-popular-skeleton-line {
    display: block;
    height: 1.15rem;
    width: min(28rem, 70%);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.12) 37%, rgba(0, 0, 0, 0.06) 63%);
    background-size: 400% 100%;
    animation: pioPopularShimmer 1.4s ease infinite;
}

    .pio-popular-skeleton-line.short {
        width: min(16rem, 45%);
    }

@keyframes pioPopularShimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pio-popular-skeleton-line {
        animation: none;
    }
}


.pio-schedule-band {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(24rem, 36.2vw, 43.4375rem);
    overflow: hidden;
}

.pio-schedule-bg {
    position: absolute;
    inset: -12% 0;
    background-image: url("../../assets/TemplateV2/home/training-schedule-bg.jpg");
    background-size: cover;
    background-position: center;
    transform: translate3d(0, var(-\-pio-schedule-shift, 0e0px), 0);
    will-change: transform;
}

.pio-schedule-inner {
    position: relative;
    z-index: 1;
    padding-block: clamp(1.5rem, 3.57vw, 4.29rem);
}

.pio-schedule-card {
    width: min(100%, 43.44vw);
    max-width: 834px;
    margin-inline-start: auto;
    background: #fff;
    padding-inline: clamp(1.5rem, 3.86vw, 4.65rem);
    padding-block: clamp(1.75rem, 2.9vw, 3.5rem);
}

.pio-schedule-eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: clamp(0.75rem, 1.3vw, 1.6rem);
    color: var(-\-pio-blue-color);
    font-weight: 700;
    font-size: clamp(0.875rem, 1.1vw, 1.35rem);
}

    .pio-schedule-eyebrow svg {
        flex: none;
    }

.pio-schedule-title {
    margin-bottom: clamp(0.75rem, 1.3vw, 1.6rem);
    color: #000;
    font-weight: 700;
    font-size: clamp(1.75rem, 3.54vw, 4.25rem);
    line-height: 1.2;
}

.pio-schedule-text {
    margin-bottom: clamp(1.5rem, 2.66vw, 3.2rem);
    color: #000;
    font-size: clamp(0.875rem, 1.1vw, 1.35rem);
    line-height: 1.55;
}

.pio-schedule-cta {
    display: inline-block;
    width: max-content;
    max-width: 100%;
    border-radius: 6px;
    padding-block: clamp(0.6rem, 0.73vw, 0.9rem);
    padding-inline: clamp(1.5rem, 2.4vw, 2.9rem);
    font-size: clamp(0.8125rem, 0.79vw, 0.95rem);
    line-height: 1.15;
}

@media (max-width: 991.98px) {
    .pio-schedule-card {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pio-schedule-bg {
        transform: none;
    }
}

/* ---------- Schedule section - tiles design ----------
   homePartialsV2/_ScheduleSection.cshtml with useScheduleTiles = true.
   Grey band, navy subject bar with a pointer under the active tab (its x comes
   from the pioTilesPointer directive), then flat 3-per-row course cards.
   Prices alternate between the two brand accents, orange and cyan. */

.pio-tiles-section {
    -\-pio-tiles-band-bg: #ECEDEF;
    -\-pio-tiles-card-bg: #fff;
    -\-pio-tiles-bar-bg: #070b1a;
    -\-pio-tiles-title: #1d2330;
    -\-pio-tiles-muted: #6b7280;
    -\-pio-tiles-sep: #d6d9df;
    padding-block: clamp(3rem, 5vw, 5.5rem);
    background: var(-\-pio-tiles-band-bg);
}

.pio-tiles-head {
    margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
}

.pio-tiles-title {
    margin: 0;
    color: var(-\-pio-tiles-title);
    font-weight: 700;
    font-size: calc(clamp(1.75rem, 3.54vw, 3.75rem) * var(-\-pio-home-title-scale, 1) * var(-\-pio-title-scale-schedule, 1));
    line-height: 1.2;
}

.pio-tiles-tabs {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Centred rather than spread: subject names are long, so the bar often wraps,
       and centred rows stay balanced where space-around leaves a ragged second line. */
    justify-content: center;
    gap: 0.5rem clamp(1.25rem, 2.6vw, 2.75rem);
    padding: clamp(1.25rem, 2.2vw, 2.1rem) clamp(1rem, 2vw, 2rem);
    margin-bottom: clamp(2.5rem, 4.5vw, 4.5rem);
    background: var(-\-pio-tiles-bar-bg);
}

    /* The pointer. Physical `left` on purpose - the directive measures from the left edge in both directions. */
    .pio-tiles-tabs::after {
        content: '';
        position: absolute;
        top: 100%;
        left: var(-\-pio-tiles-pointer-x, 50%);
        transform: translateX(-50%);
        border-left: 11px solid transparent;
        border-right: 11px solid transparent;
        border-top: 11px solid var(-\-pio-tiles-bar-bg);
        opacity: 0;
        transition: left .3s ease, opacity .2s ease;
    }

    .pio-tiles-tabs.is-ready::after {
        opacity: 1;
    }

.pio-tiles-tab {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    padding: 0.35rem 0.25rem;
    color: #fff;
    /* --pio-tiles-tab-font is set by the pioTilesPointer directive when the tabs need shrinking to fit one row. */
    font-size: var(-\-pio-tiles-tab-font, 0.8125rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: color .2s ease;
}

    .pio-tiles-tab:hover,
    .pio-tiles-tab.is-active {
        color: var(-\-pio-primary-color, #FFA000);
    }

    .pio-tiles-tab:focus-visible {
        outline: 2px solid var(-\-pio-primary-color, #FFA000);
        outline-offset: 4px;
    }

/* English subject names run far longer than the Arabic ones, so the English bar gives up
   the wide gaps and letter-spacing to stay on one row. Phones keep their swipeable row. */
@media (min-width: 576px) {
    html[lang="en"] .pio-tiles-tabs {
        column-gap: clamp(0.875rem, 1vw, 1.5rem);
        padding-inline: 1rem;
    }

    html[lang="en"] .pio-tiles-tab {
        padding-inline: 0;
        letter-spacing: 0.01em;
        white-space: nowrap;
    }
}

.pio-tiles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.pio-tile {
    display: flex;
    flex-direction: column;
    background: var(-\-pio-tiles-card-bg);
    transition: box-shadow .25s ease, transform .25s ease;
}

    .pio-tile:hover {
        box-shadow: 0 14px 30px rgba(7, 11, 26, .12);
        transform: translateY(-3px);
    }

.pio-tile-media {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(-\-pio-secondary-color, #f8f8f8);
}

    .pio-tile-media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .4s ease;
    }

.pio-tile:hover .pio-tile-media img {
    transform: scale(1.04);
}

.pio-tile-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.75rem 1.25rem 2rem;
    text-align: center;
}

.pio-tile-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
}

    .pio-tile-title a {
        color: var(-\-pio-tiles-title);
        text-decoration: none;
        transition: color .2s ease;
    }

        .pio-tile-title a:hover {
            color: var(-\-pio-blue-color);
        }

.pio-tile-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 0.875rem;
    font-size: 0.8125rem;
    color: var(-\-pio-tiles-muted);
}

.pio-tile-meta-sep {
    width: 1px;
    height: 14px;
    background: var(-\-pio-tiles-sep);
}

.pio-tile-price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
    white-space: nowrap;
}

.pio-tile-price-old {
    font-size: 1rem;
    color: var(-\-pio-tiles-muted);
    text-decoration: line-through;
}

.pio-tile-price-value {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1;
    color: var(-\-pio-blue-color);
}

.pio-tile:nth-child(even) .pio-tile-price-value {
    color: var(-\-pio-primary-color, #FFA000);
}

.pio-tile-price-currency {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(-\-pio-tiles-title);
}

.pio-tiles-empty {
    margin: 0;
    text-align: center;
    color: var(-\-pio-tiles-muted);
}

.pio-tiles-actions {
    margin-top: clamp(2rem, 3.5vw, 3rem);
    text-align: center;
}

@media (max-width: 991.98px) {
    .pio-tiles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .pio-tiles-grid {
        grid-template-columns: 1fr;
    }

    /* Phones: one swipeable row instead of a tab per line. The scroller would clip
       the pointer, so it is dropped here - the orange tab marks the selection. */
    .pio-tiles-tabs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 1.5rem;
        padding: 1.1rem 1rem;
        margin-bottom: 2rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

        .pio-tiles-tabs::-webkit-scrollbar {
            display: none;
        }

        .pio-tiles-tabs::after {
            display: none;
        }

    .pio-tiles-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pio-tile,
    .pio-tile-media img,
    .pio-tiles-tabs::after {
        transition: none;
    }
}

/* ---------- Schedule section - banner design ----------
   Shared section typography above an intro panel and four compact cards. Subject
   tabs retain the shared scroll navigation. */
.pio-sbanner-section {
    -\-pio-sbanner-bg: #fff;
    -\-pio-sbanner-side-bg: #f3f3f3;
    -\-pio-sbanner-border: #e7eaee;
    -\-pio-sbanner-card-bg: #fff;
    -\-pio-sbanner-card-border: #e7eaee;
    -\-pio-sbanner-title: #253444;
    -\-pio-sbanner-text: #586574;
    -\-pio-sbanner-muted: #6b7280;
    -\-pio-sbanner-accent: var(-\-pio-blue-color, #055386);
    -\-pio-sbanner-tab-active: var(-\-pio-blue-color, #055386);
    -\-pio-sbanner-btn: var(-\-pio-blue-color, #055386);
    -\-pio-sbanner-arrow-bg: #fff;
    -\-pio-sbanner-meta-icon: var(-\-pio-blue-color, #055386);
    -\-pio-sbanner-chip-bg: rgba(5, 83, 134, .08);
    -\-pio-sbanner-chip-text: var(-\-pio-blue-color, #055386);
}

.pio-sbanner-copy {
    min-width: 0;
}

.pio-sbanner-copy .pio-schedule-eyebrow {
    margin-bottom: 0.5rem;
    color: var(-\-pio-primary-color, #FFA000);
    font-weight: 500;
}

.pio-sbanner-title {
    margin: 0 0 0.625rem;
    color: var(-\-pio-sbanner-title);
    line-height: 1.3;
}

.pio-sbanner-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    min-width: 0;
    padding: 1.5rem var(-\-pio-sbanner-pad);
    border-bottom: 1px solid var(-\-pio-sbanner-border);
    background: var(-\-pio-sbanner-side-bg);
}

.pio-sbanner-text {
    max-width: 48rem;
    margin: 0;
    color: var(-\-pio-sbanner-text);
    line-height: 1.6;
}

.pio-sbanner-cta {
    flex: none;
    padding: 0.65rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

.pio-sbanner {
    -\-pio-sbanner-pad: clamp(0.875rem, 1.5vw, 1.25rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    min-width: 0;
    border: 1px solid var(-\-pio-sbanner-border);
    border-radius: 0.875rem;
    background: var(-\-pio-sbanner-bg);
}

.pio-sbanner-main {
    min-width: 0;
    padding: var(-\-pio-sbanner-pad);
}

.pio-sbanner-tabs-row {
    -\-pio-tab-gap: clamp(1rem, 1.6vw, 1.75rem);
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(-\-pio-sbanner-border);
}

.pio-sbanner-tab {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    padding: 0.2rem 0 0.5rem;
    border: 0;
    background: none;
    color: var(-\-pio-sbanner-muted);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
    transition: color .2s ease;
}

.pio-sbanner-tab::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: var(-\-pio-primary-color, #FFA000);
    transform: scaleX(0);
    transition: transform .2s ease;
}

.pio-sbanner-tab:hover,
.pio-sbanner-tab.is-active {
    color: var(-\-pio-sbanner-tab-active);
}

.pio-sbanner-tab.is-active::after {
    transform: scaleX(1);
}

.pio-sbanner a:focus-visible,
.pio-sbanner-tab:focus-visible {
    outline: 2px solid var(-\-pio-sbanner-tab-active);
    outline-offset: 2px;
}

.pio-sbanner-tabs-row .pio-tabs-more {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(-\-pio-sbanner-arrow-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.pio-sbanner-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 0.75rem;
}

/* Specificity keeps the card surface consistent in dark mode. */
.pio-sbanner .pio-sbanner-card.card {
    flex-direction: row;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.5rem;
    overflow: hidden;
    border: 1px solid var(-\-pio-sbanner-card-border);
    border-radius: 0.65rem;
    background-color: var(-\-pio-sbanner-card-bg);
    box-shadow: none;
}

.pio-sbanner-media {
    display: block;
    flex: 0 0 5.75rem;
    min-height: 4rem;
    overflow: hidden;
    border-radius: 0.5rem;
}

.pio-sbanner-card .card-img-top {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.pio-sbanner-card .card-body {
    gap: 0.5625rem;
    min-width: 0;
    padding: 0.4375rem 0 0.3125rem;
}

/* The shared pio-title-tip behavior reveals truncated titles on hover/focus. */
.pio-sbanner-card .card-title {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.5em;
    margin: 0;
    color: var(-\-pio-sbanner-title);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
}

.pio-sbanner-head {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.pio-sbanner-title-link {
    flex: 1 1 auto;
    min-width: 0;
}

.pio-sbanner-rel {
    flex: none;
    margin-block-start: -0.9375rem;
    margin-inline-end: -0.5rem;
    min-width: 6rem;
    padding: 0.2rem 0.75rem;
    border-block-end: 1px solid var(-\-pio-sbanner-card-border);
    border-inline-start: 1px solid var(-\-pio-sbanner-card-border);
    border-end-start-radius: 0.65rem;
    background: transparent;
    color: #637485;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
}

.pio-sbanner-rel:lang(ar) {
    min-width: 5.25rem;
}

.pio-sbanner-when {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(-\-pio-sbanner-title);
}

.pio-sbanner-when svg {
    flex: none;
    width: 0.9375rem;
    height: 0.9375rem;
    color: var(-\-pio-sbanner-meta-icon);
}

.pio-sbanner-when-date {
    overflow-wrap: anywhere;
}

.pio-sbanner-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0;
}

.pio-sbanner-time {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    padding: 0.25rem 0.625rem;
    border-radius: 0.4rem;
    background: var(-\-pio-sbanner-chip-bg);
    color: var(-\-pio-sbanner-chip-text);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pio-sbanner-time svg {
    flex: none;
    width: 0.9375rem;
    height: 0.9375rem;
}

/* Override the shared .pio-btn padding from responsive.css. */
.pio-sbanner-foot .pio-sbanner-details {
    flex: none;
    margin-inline-start: auto;
    padding: 0.25rem 0.75rem !important;
    border: 1px solid var(-\-pio-sbanner-btn);
    border-radius: 0.4rem;
    background-color: var(-\-pio-sbanner-btn);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    /* Use the site's shared .pio-btn:hover opacity effect. */
    transition: opacity .2s ease;
}

.pio-sbanner-empty {
    margin: 0;
    padding: 2rem 1rem;
    text-align: center;
    color: var(-\-pio-sbanner-muted);
}

@media (min-width: 1200px) {
    .pio-sbanner {
        grid-template-columns: 17.5rem minmax(0, 1fr);
    }

    .pio-sbanner-summary {
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 1rem;
        padding-block: 1.25rem;
        border-bottom: 0;
        border-inline-end: 1px solid var(-\-pio-sbanner-border);
    }
}

@media (max-width: 767.98px) {
    .pio-sbanner-summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .pio-sbanner-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .pio-sbanner-media {
        flex-basis: 5.5rem;
    }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .pio-sbanner-card {
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .pio-sbanner .pio-sbanner-card.card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    }
}

@media (min-width: 1400px) {
    .pio-schedule-eyebrow {
        font-size: clamp(0.9625rem, calc(-0.4844rem + 1.6538vw), 1.5rem);
    }

    .pio-schedule-title {
        font-size: calc(clamp(3.0975rem, calc(1.3406rem + 2.0077vw), 3.75rem) * var(-\-pio-home-title-scale, 1) * var(-\-pio-title-scale-schedule, 1));
    }

    .pio-schedule-text {
        font-size: clamp(0.9625rem, calc(0.525rem + 0.5vw), 1.125rem);
    }

    .pio-schedule-cta {
        font-size: clamp(0.8125rem, calc(0.3075rem + 0.5769vw), 1rem);
    }

    .sig-programs .primary-color.pio-custom-paragraph,
    .service-section-dark .primary-color.pio-custom-paragraph {
        font-size: clamp(0.9938rem, calc(-0.3694rem + 1.5577vw), 1.5rem);
    }

    .sig-programs h4.pio-hero-heading {
        font-size: calc(clamp(2.7188rem, calc(-0.0575rem + 3.1731vw), 3.75rem) * var(-\-pio-home-title-scale, 1) * var(-\-pio-title-scale-programs, 1));
    }

    .service-section-dark .pio-service-heading {
        font-size: calc(clamp(3.0875rem, calc(1.3038rem + 2.0385vw), 3.75rem) * var(-\-pio-home-title-scale, 1) * var(-\-pio-title-scale-business, 1));
    }

    .sig-programs p.pio-custom-paragraph {
        font-size: clamp(0.9938rem, calc(0.6406rem + 0.4038vw), 1.125rem);
    }

    .service-section-dark .pio-service-intro {
        font-size: clamp(0.9938rem, calc(0.6406rem + 0.4038vw), 1.125rem) !important;
    }

    .service-section-dark .pio-btn.pio-btn-signIn {
        font-size: clamp(0.8094rem, calc(0.2963rem + 0.5865vw), 1rem);
    }

    .pio-popular-section .pio-popular-title {
        font-size: calc(clamp(2.1025rem, calc(-2.3331rem + 5.0692vw), 3.75rem) * var(-\-pio-home-title-scale, 1) * var(-\-pio-title-scale-popular, 1));
    }

    .pio-popular-tabs .pio-popular-tab {
            font-size: calc( clamp(0.9375rem, calc(0.79rem + 0.17vw), 1rem) * var(-\-pio-home-title-scale, 1) * var(-\-pio-title-scale-popular-tabs, 1) );
    }

    .pio-home-v2 .pio-hero-banner-text .pio-hero-content {
        font-size: calc(min(3.75vw, 72px) * var(-\-pio-home-title-scale, 1) * var(-\-pio-title-scale-hero, 1));
    }

    .pio-home-v2 .pio-offers-section .pio-offer-title {
        font-size: calc(clamp(2.25rem, calc(2.0296rem + 0.9402vw), 3rem) * var(-\-pio-home-title-scale, 1) * var(-\-pio-title-scale-offers, 1));
    }

    .pio-home-v2 .pio-inner-training h4 {
        font-size: calc(clamp(2.974rem, calc(2.7008rem + 1.1658vw), 3.75rem) * var(-\-pio-home-title-scale, 1) * var(-\-pio-title-scale-library, 1));
    }

    .pio-home-v2 .pio-testimonials .pio-heading {
        font-size: calc(clamp(2.974rem, calc(2.7008rem + 1.1658vw), 3.75rem) * var(-\-pio-home-title-scale, 1) * var(-\-pio-title-scale-testimonials, 1));
    }

    .pio-home-v2 .pio-accredit-section .pio-hero-heading {
        font-size: calc(clamp(3.9176rem, calc(3.3606rem + 2.3772vw), 5.5rem) * var(-\-pio-home-title-scale, 1) * var(-\-pio-title-scale-accreditations, 1));
    }
}

.pio-popular-foot {
    flex-wrap: wrap;
}

.pio-swipe-hint {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1;
    color: inherit;
    opacity: .6;
    user-select: none;
    pointer-events: none;
}

    .pio-swipe-hint .pio-swipe-arrow {
        width: 14px;
        height: 14px;
        flex: none;
        animation: pio-swipe-drift 1.4s ease-in-out infinite;
    }

    .pio-swipe-hint.is-rtl .pio-swipe-arrow {
        animation-name: pio-swipe-drift-rtl;
    }

@keyframes pio-swipe-drift {
    0%, 100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(5px);
    }
}

@keyframes pio-swipe-drift-rtl {
    0%, 100% {
        transform: scaleX(-1) translateX(0);
    }

    50% {
        transform: scaleX(-1) translateX(5px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pio-swipe-hint .pio-swipe-arrow {
        animation: none;
    }
}


/* V2 homepage: quick, repeatable motion and data-driven hero actions. */
.pio-home-v2 .pio-reveal {
    transition: opacity .28s ease, transform .36s cubic-bezier(.2, .7, .2, 1);
}
.pio-home-v2 .pio-reveal.pio-reveal-below {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: none;
}
.pio-home-v2 .pio-reveal.pio-reveal-above {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
    transition: none;
}
.pio-home-v2 [pio-reveal="media"].pio-reveal-below {
    transform: translate3d(0, 16px, 0) scale(.985);
}
.pio-home-v2 [pio-reveal="media"].pio-reveal-above {
    transform: translate3d(0, -16px, 0) scale(.985);
}
.pio-home-v2 .sig-cards .card.pio-reveal {
    transition: opacity .28s ease, transform .36s cubic-bezier(.2, .7, .2, 1), flex .4s ease;
}
.pio-home-v2 .pio-reveal:focus-within {
    opacity: 1;
    transform: none;
    transition-delay: 0s !important;
}
.pio-home-v2 .pio-reveal:not(.pio-reveal-below):not(.pio-reveal-above) .pio-line-anim,
.pio-home-v2 .pio-reveal:not(.pio-reveal-below):not(.pio-reveal-above) .pio-schedule-eyebrow svg {
    transform-origin: left center;
    animation: pio-home-rule .4s ease-out both;
}
[dir="rtl"] .pio-home-v2 .pio-reveal .pio-line-anim,
[dir="rtl"] .pio-home-v2 .pio-reveal .pio-schedule-eyebrow svg {
    transform-origin: right center;
}
@keyframes pio-home-rule {
    from { opacity: .3; transform: scaleX(.4); }
    to { opacity: 1; transform: scaleX(1); }
}
.pio-home-v2 #popular-courses {
    scroll-margin-top: 9rem;
}
/* All slides share a grid cell: the longest localized copy sets the height.
   This keeps buttons clear of the controls without clipping API-provided text. */
.pio-home-v2 .pio-hero-banner {
    display: grid;
}
.pio-home-v2 .pio-hero-slide {
    display: grid;
    grid-area: 1 / 1;
    min-width: 0;
    min-height: var(-\-pio-hero-h);
    position: relative;
}
.pio-home-v2 .pio-hero-slide + .pio-hero-slide {
    position: relative;
    inset: auto;
}
.pio-home-v2 .pio-hero-banner-media {
    position: absolute;
    inset: 0;
}
.pio-home-v2 .pio-hero-banner-img {
    height: 100%;
}
.pio-home-v2 .pio-hero-banner-copy {
    position: relative;
    grid-area: 1 / 1;
    padding-block: clamp(1.5rem, 3vw, 3rem) clamp(4.5rem, 6vw, 6rem);
}
.pio-home-v2 .pio-hero-actions {
    margin-top: clamp(.9rem, 1.6vw, 1.5rem);
}
.pio-home-v2 .pio-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    max-width: 100%;
    min-height: 46px;
    padding: .75rem 1.25rem;
    border: 1px solid transparent;
    border-radius: .75rem;
    background: #10202B;
    color: #fff;
    font-size: clamp(.875rem, 1vw, 1rem);
    font-weight: 600;
    line-height: 1.4;
    text-align: start;
    text-decoration: none;
    transition: background-color .18s ease, box-shadow .18s ease;
}
.pio-home-v2 .pio-hero-cta:hover {
    background: #194253;
    color: #fff;
    box-shadow: 0 6px 18px rgba(16, 32, 43, .16);
}
.pio-home-v2 .pio-hero-slide:not(.is-active) .pio-hero-cta {
    pointer-events: none;
}
.pio-home-v2 .pio-hero-cta:focus-visible {
    outline: 3px solid var(-\-pio-blue-color);
    outline-offset: 4px;
}
.pio-home-v2 .pio-hero-cta-arrow {
    flex: none;
    transition: transform .18s ease;
}
.pio-home-v2 .pio-hero-cta:hover .pio-hero-cta-arrow {
    transform: translateX(3px);
}
[dir="rtl"] .pio-home-v2 .pio-hero-cta-arrow { transform: scaleX(-1); }
[dir="rtl"] .pio-home-v2 .pio-hero-cta:hover .pio-hero-cta-arrow { transform: translateX(-3px) scaleX(-1); }
.pio-home-v2 .pio-hero-slider .pio-hero-slide.is-active .pio-hero-actions {
    transition-delay: .18s;
    transition-duration: .3s;
}
@media (max-width: 991.98px) {
    .pio-home-v2 .pio-hero-banner { -\-pio-hero-h: 310px; }
    .pio-home-v2 .pio-hero-banner-copy { padding-block: 1.75rem 4.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .pio-home-v2 .pio-reveal,
    .pio-home-v2 .sig-cards .card.pio-reveal,
    .pio-home-v2 .pio-hero-cta,
    .pio-home-v2 .pio-hero-cta-arrow,
    .pio-home-v2 .pio-hero-slider .pio-hero-slide.is-active .pio-hero-actions {
        transition: none !important;
    }
    .pio-home-v2 .pio-reveal.pio-reveal-below,
    .pio-home-v2 .pio-reveal.pio-reveal-above {
        opacity: 1;
        transform: none;
    }
    .pio-home-v2 .pio-reveal .pio-line-anim,
    .pio-home-v2 .pio-reveal .pio-schedule-eyebrow svg {
        animation: none !important;
    }
}


/* V2 index choreography: short text masks, media apertures and artwork depth. */
.pio-home-v2 .pio-hero-banner-copy button { pointer-events: auto; }
.pio-home-v2 .pio-hero-slide:not(.is-active) button.pio-hero-cta { pointer-events: none; }
.pio-home-v2 .pio-hero-action-status:not(:empty) {
    display: block;
    margin-top: .75rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    background: #fff;
    color: #10202B;
    font-size: .875rem;
}
@media (prefers-reduced-motion: no-preference) {
    .pio-home-v2 h2.pio-reveal:not(.pio-reveal-below):not(.pio-reveal-above),
    .pio-home-v2 h3.pio-reveal:not(.pio-reveal-below):not(.pio-reveal-above),
    .pio-home-v2 h4.pio-reveal:not(.pio-reveal-below):not(.pio-reveal-above),
    .pio-home-v2 .testi-head.pio-reveal:not(.pio-reveal-below):not(.pio-reveal-above) .pio-heading,
    .pio-home-v2 .service-section-dark .row.pio-reveal:not(.pio-reveal-below):not(.pio-reveal-above) .pio-service-heading {
        animation: pio-home-heading-open .42s cubic-bezier(.16, 1, .3, 1) both;
    }
    .pio-home-v2 .pio-training-video.pio-reveal:not(.pio-reveal-below):not(.pio-reveal-above) .pio-video-wrapper {
        animation: pio-home-media-open .5s cubic-bezier(.16, 1, .3, 1) both;
    }
}
@keyframes pio-home-heading-open {
    from { clip-path: inset(0 0 80% 0); }
    to { clip-path: inset(0 0 -8% 0); }
}
@keyframes pio-home-media-open {
    from { clip-path: inset(5% 4% 5% 4% round 32px); }
    to { clip-path: inset(0 round 24px); }
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .pio-home-v2 .pio-offer-art {
        translate: var(-\-pio-depth-x, 0e0px) var(-\-pio-depth-y, 0e0px);
        rotate: var(-\-pio-depth-angle, 0deg);
        transition: transform .35s ease, translate .22s ease-out, rotate .22s ease-out;
    }
    .pio-home-v2 .sig-cards .card > img {
        translate: var(-\-pio-depth-x, 0e0px) var(-\-pio-depth-y, 0e0px);
        scale: 1.035;
        transition: translate .25s ease-out;
    }
    .pio-home-v2 .pio-inner-training .pio-stroke-text {
        translate: 0 var(-\-pio-library-depth, 0e0px);
    }
}


/* Optional V2 hero video: keep the poster visible until playback succeeds. */
.pio-home-v2 .pio-hero-banner-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.pio-home-v2 .pio-hero-banner-video.has-video-frame { opacity: 1; }
.pio-home-v2 .pio-hero-slider .pio-hero-slide.is-active .pio-hero-media-video { animation: none; }
.pio-home-v2 .pio-hero-media-video .pio-hero-banner-img { transform: none; object-position: center; }
.pio-home-v2 .pio-hero-video-control {
    position: absolute;
    inset-inline-end: clamp(1rem, 4vw, 4rem);
    top: 1rem;
    z-index: 4;
    min-height: 44px;
    padding: .5rem .9rem;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 2rem;
    background: #10202B;
    color: #fff;
    font-size: .8125rem;
    cursor: pointer;
}
.pio-home-v2 .pio-hero-video-control:focus-visible { outline: 3px solid var(-\-pio-blue-color); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .pio-home-v2 .pio-hero-banner-video { display: none; transition: none; }
    .pio-home-v2 .pio-hero-video-control { display: none; }
}

@media screen and (min-width: 768px) {
}

.pio-home-v2 .sigSwiper:not(:defined) > swiper-slide:not(:first-child) {
    display: none;
}

.pio-home-v2 .sigSwiper > swiper-slide {
    width: calc((100% - 1px) / 1.1) !important;
}

@media screen and (min-width: 425px) {
    .pio-home-v2 .sigSwiper > swiper-slide {
        width: 100% !important;
    }
}

@media screen and (min-width: 768px) {
    .pio-home-v2 .sigSwiper > swiper-slide {
        width: calc((100% - 10px) / 2) !important;
    }
}

.pio-home-v2 #popular-courses .pio-popular-tabs-row[ng-cloak] {
    display: block !important;
    visibility: hidden;
    height: 40px;
}

.pio-home-v2 #popular-courses .pio-popular-rail {
    min-height: 363px;
}

.pio-home-v2 .pio-offers-shell.is-loading .pio-offers-swiper {
    min-height: 434px;
}

.pio-home-v2 #popular-courses .pio-popular-rail[ng-cloak] {
    display: block !important;
    visibility: hidden;
    height: 363px;
    overflow: hidden;
}

.pio-home-v2 .service-section-dark h3[ng-cloak],
.pio-home-v2 .service-section-dark p[ng-cloak] {
    display: block !important;
    visibility: hidden;
}

@media screen and (min-width: 768px) {
    .pio-home-v2 #popular-courses .pio-popular-rail {
        min-height: 433px;
    }

    .pio-home-v2 .pio-offers-shell.is-loading .pio-offers-swiper {
        min-height: 336px;
    }

    .pio-home-v2 #popular-courses .pio-popular-rail[ng-cloak] {
        height: 433px;
    }

    .pio-home-v2 pio-swiper:empty {
        display: block;
        min-height: 296px;
    }
}

.pio-home-v2 .pio-offer-art {
    height: auto;
}

.pio-home-v2 > .hero-section-photo {
    margin-block: 0;
}

.pio-home-v2 > .pio-training-section,
.pio-home-v2 > .testmonial-section,
.pio-home-v2 > .pio-schedule-band,
.pio-home-v2 > .pio-tiles-section {
    margin-block: var(-\-pio-home-space-top) var(-\-pio-home-space-bottom);
}

@media screen and (min-width: 768px) {
    .pio-home-v2 .pio-training-section {
        background: var(-\-pio-primary-color);
    }
}

@media screen and (max-width: 767.98px) {
    .pio-home-v2 > .pio-training-section {
        margin-block-end: 0;
    }

    .pio-home-v2 .pio-training-band-mobile {
        -\-pio-training-tail: calc(3.5rem + var(-\-pio-home-space-bottom));
    }
}

.pio-home-v2 .signature-section > .section-padding,
.pio-home-v2 .buisness-bg > .section-padding {
    padding-block: 0;
}

/* ---------- V2 index page - section typography ----------
   One size set for every section's eyebrow, heading and text, driven by the
   --pio-section-* variables in :root. Kept last and scoped to .pio-home-v2 so it
   wins over the older per-section clamp() sizes and title scales (above, in
   responsive.css and in pio-business-cube.css) at every breakpoint.
   The hero banner keeps its own display sizes. */

.pio-home-v2 .pio-schedule-eyebrow,
.pio-home-v2 .sig-programs .primary-color.pio-custom-paragraph,
.pio-home-v2 .pio-training-section .training-heading,
.pio-home-v2 .pio-training-section .primary-color.pio-custom-paragraph,
.pio-home-v2 .pio-b2b_cube .pio-b2b_cube__eyebrow {
    font-size: var(-\-pio-section-eyebrow-size);
}

.pio-home-v2 .pio-popular-section .pio-popular-title,
.pio-home-v2 .pio-tiles-section .pio-tiles-title,
.pio-home-v2 .pio-schedule-band .pio-schedule-title,
.pio-home-v2 .sig-programs h4.pio-hero-heading,
.pio-home-v2 .pio-training-section h4,
.pio-home-v2 .pio-b2b_cube .pio-b2b_cube__title,
.pio-home-v2 .testmonial-section .pio-heading,
.pio-home-v2 .pio-accredit-section .pio-hero-heading {
    font-size: var(-\-pio-section-heading-size);
    font-weight: var(-\-pio-section-heading-weight);
}

.pio-home-v2 .pio-sbanner-section .pio-sbanner-title {
    font-size: calc(var(-\-pio-section-heading-size) * .66);
    font-weight: var(-\-pio-section-heading-weight);
}

.pio-home-v2 .pio-sbanner-section .pio-sbanner-text {
    font-size: calc(var(-\-pio-section-text-size) * .875);
    font-weight: var(-\-pio-section-text-weight);
}

.pio-home-v2 .pio-schedule-band .pio-schedule-text,
.pio-home-v2 .sig-programs p.pio-custom-paragraph,
.pio-home-v2 .pio-training-section .pio-training-paragraph,
.pio-home-v2 .pio-b2b_cube .pio-b2b_cube__intro {
    font-size: var(-\-pio-section-text-size);
    font-weight: var(-\-pio-section-text-weight);
}

.pio-categories-section {
    -\-pio-cat-edge: #d4d4d8;
    -\-pio-cat-hover-edge: color-mix(in srgb, #FFA000 60%, transparent);
    -\-pio-cat-text: #0f1b2a;
    -\-pio-cat-icon: #6b7280;
    -\-pio-cat-arrow: color-mix(in srgb, #FFA000 55%, transparent);
    -\-pio-cat-fade: 3rem;
    -\-pio-cat-dir: 1;
}

body[dir="rtl"] .pio-categories-section {
    -\-pio-cat-dir: -1;
}

body[data-bs-theme="dark"] .pio-categories-section {
    -\-pio-cat-edge: rgba(255, 255, 255, .16);
    -\-pio-cat-text: #fff;
    -\-pio-cat-icon: #9aa3b2;
    -\-pio-cat-arrow: color-mix(in srgb, #FFA000 60%, transparent);
}

.pio-home-v2 .pio-categories-section .pio-categories-title {
    margin-bottom: 1rem;
    font-size: calc(var(-\-pio-section-heading-size) * .74);
    font-weight: var(-\-pio-section-heading-weight);
}

.pio-categories-row {
    position: relative;
}

.pio-categories-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    padding-block: 2px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .pio-categories-grid::-webkit-scrollbar {
        display: none;
    }

    .pio-categories-row.pio-can-prev .pio-categories-grid {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(-\-pio-cat-fade));
        mask-image: linear-gradient(to right, transparent 0, #000 var(-\-pio-cat-fade));
    }

    .pio-categories-row.pio-can-next .pio-categories-grid {
        -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(-\-pio-cat-fade));
        mask-image: linear-gradient(to left, transparent 0, #000 var(-\-pio-cat-fade));
    }

    .pio-categories-row.pio-can-prev.pio-can-next .pio-categories-grid {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(-\-pio-cat-fade), #000 calc(100% - var(-\-pio-cat-fade)), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 var(-\-pio-cat-fade), #000 calc(100% - var(-\-pio-cat-fade)), transparent 100%);
    }

.pio-categories-row.pio-can-prev .pio-tabs-more--prev,
.pio-categories-row.pio-can-next .pio-tabs-more--next {
    display: inline-flex;
}

.pio-categories-row.pio-can-prev .pio-categories-grid,
.pio-categories-row.pio-can-next .pio-categories-grid {
    cursor: grab;
}

.pio-categories-grid.is-dragging,
.pio-categories-grid.is-dragging .pio-category-chip {
    cursor: grabbing;
    user-select: none;
}

.pio-category-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 38px;
    padding-block: .3125rem;
    padding-inline: .875rem .75rem;
    border-radius: 999px;
    color: var(-\-pio-cat-text);
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(-\-pio-cat-edge);
    white-space: nowrap;
    transition: box-shadow .25s ease;
}

    .pio-category-chip:hover,
    .pio-category-chip:focus-visible {
        color: var(-\-pio-cat-text);
        box-shadow: inset 0 0 0 1px var(-\-pio-cat-hover-edge);
    }

    .pio-category-chip:focus-visible {
        outline: 2px solid #FFA000;
        outline-offset: -2px;
    }

.pio-category-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 29px;
    height: 18px;
    color: var(-\-pio-cat-icon);
}

    .pio-category-icon svg {
        display: block;
        width: 29px;
        height: 18px;
    }

.pio-category-name {
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.3;
}

.pio-category-arrow {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(-\-pio-cat-arrow);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: scaleX(var(-\-pio-cat-dir));
    transition: transform .25s ease, stroke .25s ease;
}

.pio-category-chip:hover .pio-category-arrow {
    stroke: #FFA000;
    transform: scaleX(var(-\-pio-cat-dir)) translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
    .pio-category-chip,
    .pio-category-arrow {
        transition: none;
    }
}

.pio-crumb {
    -\-pio-crumb-link: var(-\-pio-blue-color, #055386);
    -\-pio-crumb-current: #4b5563;
    -\-pio-crumb-sep: #9aa3ad;
    width: 100%;
    margin-bottom: 1rem;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
}

body[data-bs-theme="dark"] .pio-crumb,
.pio-about-hero .pio-crumb,
.pio-sched2-hero .pio-crumb,
.pio-offers-hero .pio-crumb {
    -\-pio-crumb-link: var(-\-pio-primary-color, #FFA000);
    -\-pio-crumb-current: rgba(255, 255, 255, .8);
    -\-pio-crumb-sep: rgba(255, 255, 255, .45);
}

.pio-offers-hero.pio-offers-hero--amber .pio-crumb {
    -\-pio-crumb-link: #fff;
    -\-pio-crumb-current: rgba(255, 255, 255, .85);
    -\-pio-crumb-sep: rgba(255, 255, 255, .6);
}

@media (min-width: 768px) {
    body[data-bs-theme="light"] .pio-b2b-header .pio-crumb {
        -\-pio-crumb-link: var(-\-pio-primary-color, #FFA000);
        -\-pio-crumb-current: rgba(255, 255, 255, .8);
        -\-pio-crumb-sep: rgba(255, 255, 255, .45);
    }
}

@media (min-width: 1025px) {
    .pio-webinar-hero .pio-crumb {
        -\-pio-crumb-link: var(-\-pio-primary-color, #FFA000);
        -\-pio-crumb-current: rgba(255, 255, 255, .8);
        -\-pio-crumb-sep: rgba(255, 255, 255, .45);
    }
}

body[data-bs-theme="dark"] .pio-b2b-header .pio-crumb {
    -\-pio-crumb-link: var(-\-pio-blue-color, #055386);
    -\-pio-crumb-current: #4b5563;
    -\-pio-crumb-sep: #9aa3ad;
}

.pio-crumb-page .pio-crumb {
    margin-top: 1.25rem;
}

.pio-crumb .pio-crumb-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
}

.pio-crumb .pio-crumb-item {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    max-width: 100%;
}

.pio-crumb .pio-crumb-item:first-child {
    flex-shrink: 0;
}

.pio-crumb .pio-crumb-item:last-child {
    flex-shrink: 100000;
}

.pio-crumb .pio-crumb-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    color: var(-\-pio-crumb-link);
    font-weight: 400;
    text-decoration: none;
    text-underline-offset: 3px;
}

.pio-crumb .pio-crumb-link > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.pio-crumb .pio-crumb-link:hover {
    color: var(-\-pio-crumb-link);
    text-decoration: underline;
}

.pio-crumb .pio-crumb-link:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(-\-pio-crumb-link);
    outline-offset: 2px;
}

.pio-crumb .pio-crumb-current {
    overflow: hidden;
    color: var(-\-pio-crumb-current);
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pio-crumb .pio-crumb-home-icon {
    flex: none;
    width: 14px;
    height: 14px;
}

.pio-crumb .pio-crumb-sep {
    flex: none;
    width: 10px;
    height: 10px;
    color: var(-\-pio-crumb-sep);
}

[dir="rtl"] .pio-crumb .pio-crumb-sep {
    transform: scaleX(-1);
}

@media (max-width: 991.98px) {
    .header-hero .header-content .pio-crumb-list {
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .pio-b2b-header .pio-crumb-list {
        justify-content: center;
    }
}

@media (min-width: 992px) {
    .header-hero .in-product-h1,
    .header-hero h1.pio-hero-content,
    .pio-about-hero .pio-about-hero-title,
    .pio-b2b-header .hero-title,
    .training-section-dark h1.pio-hero-content,
    .pio-sched2-hero .pio-sched2-hero-title,
    .pio-legal-hero .pio-legal-title,
    .pio-offers-hero .pio-offers-hero-title,
    .pio-webinar-page h1.pio-hero-heading,
    .pio-accredit-hero .pio-accredit-title {
        font-size: var(-\-pio-inner-hero-title);
    }
}

.pio-hero-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

.pio-hero-art {
    display: none;
}

@media (min-width: 992px) {
    .pio-hero-split {
        grid-template-columns: minmax(0, 1fr) var(-\-pio-inner-hero-art);
        column-gap: clamp(2rem, 5vw, 5rem);
    }

    .pio-hero-art {
        display: block;
        width: 100%;
        height: auto;
        margin-block: -3rem;
        pointer-events: none;
        user-select: none;
    }

    .pio-hero-art--baseline {
        align-self: end;
        margin-bottom: calc(-1 * var(-\-pio-inner-hero-pad-bottom));
    }
}

/* Flat editorial offer artwork keeps its printed, two-dimensional appearance. */
.pio-offers-section .pio-offer-art--flat {
    filter: none;
}

/* Keep offer artwork clear of the copy with a small bleed below the card edge. */
.pio-offers-section .pio-offer-card--edge-art .pio-offer-body {
    z-index: 2;
}

.pio-offers-section .pio-offer-card--edge-art .pio-offer-figure {
    width: calc(100% + 2 * var(-\-pio-offer-pad));
    margin-inline: calc(-1 * var(-\-pio-offer-pad));
    margin-block-start: 0;
    margin-block-end: calc(-1 * var(-\-pio-offer-pad) - 10px);
}

@media (min-width: 768px) {
    .pio-offers-section .pio-offer-card--edge-art .pio-offer-body {
        flex: 0 0 46%;
    }

    .pio-offers-section .pio-offer-card--edge-art .pio-offer-figure {
        position: absolute;
        inset-inline-end: -1px;
        inset-block-end: -10px;
        width: 48%;
        margin: 0;
    }
}
/* ==========================================================================
   Login method tabs (email / phone / username)
   Used by: loginV2partials/_loginFormV2.cshtml + modals/login/_loginModalV2.cshtml
   ========================================================================== */
.pio-login-tabs {
    display: flex;
    gap: .25rem;
    padding: .25rem;
    border-radius: 12px;
    background: var(--bs-secondary-bg, #f1f3f5);
}

.pio-login-tab {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-width: 0;
    padding: .55rem .5rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--pio-scondery-text, #00000080);
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

    .pio-login-tab span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pio-login-tab:hover,
    .pio-login-tab:focus-visible {
        color: var(--pio-primary-color, #FFA000);
    }

    .pio-login-tab.is-active {
        background: #fff;
        color: var(--pio-primary-color, #FFA000);
        box-shadow: 0 2px 8px rgba(10, 21, 37, .08);
    }

body[data-bs-theme="dark"] .pio-login-tabs {
    background: rgba(255, 255, 255, .06);
}

body[data-bs-theme="dark"] .pio-login-tab {
    color: rgba(255, 255, 255, .6);
}

    body[data-bs-theme="dark"] .pio-login-tab.is-active {
        background: rgba(255, 255, 255, .1);
        color: var(--pio-primary-color, #FFA000);
        box-shadow: none;
    }