:root {
    -\-pio-secondary-color: #F5F5F5;
}

/* IN USE - do not delete. Most template V2 markup uses bootstrap's .container,
   but InnerPage/AboutUsV2.cshtml uses .pio-container on purpose: the About
   design is drawn to a 1440px content width, which only .pio-container reaches
   (see the table below). (.pio-containers with an S is a different class, on
   the header row.)

   The one behavioural difference between the two is at the top end:
       breakpoint   .pio-container   bootstrap .container
       >= 1400px        1360px             1320px
       >= 1600px        1440px             1320px
   Below 1400px the two are identical (540/720/960/1140) and both use a 1.5rem
   gutter, so only very wide screens changed - content is up to 120px narrower
   there. */
.pio-container, .pio-container-xxl, .pio-container-xl, .pio-container-lg, .pio-container-md, .pio-container-sm {
    -\-pio-gutter-x: 1.5rem;
    width: 100%;
    padding-left: calc(var(-\-pio-gutter-x) * .5);
    padding-right: calc(var(-\-pio-gutter-x) * .5);
    margin-left: auto;
    margin-right: auto;
}

/* Hero Logo: Responsive Sizes */
.hero-scroll-logo {
    height: auto !important;
    object-fit: contain;
}

@media screen and (max-width: 767px) {
    .hero-scroll-logo {
        max-width: 220px !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .hero-scroll-logo {
        max-width: 350px !important;
    }
}

@media screen and (min-width: 375px) {

    .know-your-teacher {
        text-align: center;
    }

}

/* Small breakpoint */
@media screen and (min-width: 576px) {
    .pio-container, .pio-container-md, .pio-container-sm {
        max-width: 540px;
    }

    .pio-btn {
        padding: 10px 24px 10px 24px !important;
    }

    .toggle-container {
        width: 140px;
    }
    .text-alignment{
        text-align: start;
    }
    .description,
    .text-size {
        font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
    }

    .course-schedule {
        -\-bs-table-bg: unset;
        -\-bs-table-color: #000;
        border-radius: 15px;
        background-color: var(-\-pio-secondary-color);
    }

    .course-schedule > tbody tr td {
        border: unset;
        border-bottom: 1px solid #000;
    }

    .course-schedule > :not(caption) > * > * {
        padding: 0.75rem 2.5rem;
        font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
    }

    .availability-btn {
        background: #a42c3163;
        color: #A42C31;
        border-radius: 20px;
        font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
        width: max-content;
    }

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

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

    .auth-svg {
        width: 200px;
        height: 120px;
    }

    .pio-tablet video {
        left: 19px;
        top: 54px;
        width: calc(336px - 38px);
        height: calc(515px - 118px);
    }

    .webinar-form-signup {
        bottom: 100px;
    }

    .padding-subject-courses {
        padding-left: 1.3rem;
    }

    .subject-hero-height {
        min-height: 300px;
        max-height: 440px;
    }

    .pio-hero-content {
        text-align: start;
    }

    .subject-description {
        width: 50%;
    }

    .hero-vid {
        width: 75%;
        height: 330px;
        border: 8px solid #EEE;
        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%);
    }

    .testi-card {
        position: relative;
        width: 24rem;
        aspect-ratio: 1;
        overflow: hidden;
        border-radius: 8px !important;
        height: 15rem;
        transition: all 0.5s ease-in-out;
    }

    .testi-card .card-body .testi-card-description {
        visibility: hidden;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        padding: 10px;
        transform: translateY(100%);
        transition: transform 0.5s ease-in-out, visibility 0.5s ease-in-out;
    }

    /*.testi-card:hover .card-body .testi-card-description {
        visibility: visible;
        transform: translateY(0);
    }

    .testi-card:hover .pio-testi-img,
    .testi-card:hover .fw-bold,
    .testi-card:hover .description {
        transform: translateY(-50%);
    }*/

    .circle-scroll-blue::before {
        top: 24%;
        transform: translateY(-50%) scale(0);
    }

    .circle-scroll-orange::after {
        top: 50%;
        transform: translateY(-50%) scale(0);
    }
}

/* Medium breakpoint */
@media screen and (min-width:768px) {

    .pio-training-video {
        width: 41.666667%;
    }

    .hero-weird-planet {
        bottom: 20%;
    }

    .pio-container, .pio-container-md, .pio-container-sm {
        max-width: 720px;
    }

    .pio-b2b-header {
        background: #000;
        clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 80%);

        /* The navbar is position:fixed and 135px tall at this width, so hero
           copy starting at the top of the section sits almost against it.
           This is the breathing room above the heading. */
        padding-top: clamp(1.5rem, 3vw, 4rem);

        /* Clearance for the diagonal above. The cut runs from 80% of the
           section's height on one side to 100% on the other, so the shortest
           edge sits 20% of the way up and the last line of copy was landing
           almost on it.
           The padding buys 0.8px of clearance per 1px added - the wedge is a
           PERCENTAGE of the height, so growing the section grows the wedge too
           - which is why this is a large number rather than the ~100px of gap
           it actually produces. */
        padding-bottom: clamp(3rem, 6vw, 8rem);
    }
    .discount-badge {
        font-size: clamp(0.5382rem, calc(0.5164rem + 0.0929vw), 0.6rem) !important;
    }

    .content-wrapper {
        color: #fff;
    }

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

    .accredit .accredit-svgs:nth-child(2),
    .accredit .accredit-svgs:nth-child(6) {
        border-inline-end: 0.5px solid;
    }

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

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

    .inPerson-section-content {
        position: absolute;
        top: 25%;
        left: 0;
    }
    .courses-hero-padding{
        padding : 3rem;
    }

    .color-white {
        color: #fff;
    }

    .hero-spaceman {
        inset-inline-end: 15%;
        bottom: 3%;
    }
}

/* Large breakpoint */
@media screen and (min-width:992px) {

    .table-responsive-pio tr {
        border-inline-end: initial;
    }

    .hero-moon {
        bottom: -8%;
    }

    .hero-earth, .hero-space {
        bottom: -2%;
    }

    .mode-switch {
        width: 400px
    }

    .mode-switch {
        padding: 5px 0px;
    }

    .pio-container, .pio-container-lg, .pio-container-md, .pio-container-sm {
        max-width: 960px;
    }

    .pio-col-10 {
        width: 84.333333%;
    }

    .pio-hero-scene {
        top: var(-\-pio-navbar-h);
        height: calc(100vh - var(-\-pio-navbar-h));
    }

    .pio-inner-training h4 {
        font-size: clamp(1.7065rem, calc(1.5152rem + 0.8165vw), 2.25rem);
    }

    .pio-footer-items ul a {
        font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
    }

    .mySwiper {
        width: 300px !important;
        height: 450px !important;
    }

    .pio-inner-training
    .pio-training-paragraph,
    .description2 {
        font-size: clamp(0.8246rem, calc(0.7849rem + 0.1696vw), 0.9375rem);
    }

    .pio-heading {
        font-size: clamp(1.1091rem, calc(1.0374rem + 0.3056vw), 1.3125rem);
    }

    .pio-inner-training p span {
        font-size: clamp(1.487rem, calc(1.3504rem + 0.5829vw), 1.875rem);
    }

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

    .training-inner-heading {
        font-size: clamp(1.2843rem, calc(1.1863rem + 0.418vw), 1.5625rem);
    }

    .know-your-teacher {
        text-align: start;
    }

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

    .pio-service-heading {
        font-size: clamp(2.1178rem, calc(1.7631rem + 1.5132vw), 3.125rem);
    }

    .accredit .col-md-3 svg {
        width: 183px;
        height: 52px;
    }

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

    .courses-discounts span {
        font-size: clamp(1.7739rem, calc(1.5623rem + 0.903vw), 2.375rem);
    }

    .w-size {
        width: 50%;
    }

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

    .center-text {
        text-align: unset;
    }

    .list-images li {
        width: 100%;
        font-size: clamp(0.8738rem, calc(0.8294rem + 0.1895vw), 1rem);
    }

    .pio-inner-training {
        padding-block: 3rem;
        padding-inline: 0 3rem;
    }

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

    .footer-gap {
        gap: 10px;
    }

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

    .padding-subject-courses {
        padding-left: 2.3rem;
    }

    /* Hero scene – desktop height */
    .pio-hero-scene {
        min-height: calc(100vh - var(-\-pio-navbar-h));
    }
}

/* Extra large breakpoint */
@media screen and (min-width:1200px) {
    .pio-container, .pio-container-xl, .pio-container-lg, .pio-container-md, .pio-container-sm {
        max-width: 1140px;
    }

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

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

    .pio-training-video {
        inset-inline-end: 0;
        width: 45%;
    }

    .pio-inner-training {
        padding-inline: 0 27%;
    }

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

/* Extra extra large breakpoint */
@media screen and (min-width:1400px) {
    .hero-weird-planet {
        bottom: 35%;
    }

    .pio-container, .pio-container-xxl, .pio-container-xl, .pio-container-lg, .pio-container-md, .pio-container-sm {
        max-width: 1360px;
    }

    .pio-btn {
        padding: 10px 27px 10px 27px !important;
        font-size: clamp(0.7241rem, calc(0.6929rem + 0.1329vw), 0.8125rem);
    }

    .pio-hero-heading {
        font-size: clamp(1.9588rem, calc(1.6803rem + 1.1886vw), 2.75rem);
        font-weight: 600;
    }

    .pio-hero-sub-heading {
        font-size: clamp(1.7065rem, calc(1.5152rem + 0.8165vw), 2.25rem);
    }

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

    .pio-hero-content {
        max-width: 700px;
    }

    .pio-custom-paragraph {
        font-size: clamp(0.8738rem, calc(0.8294rem + 0.1895vw), 1rem);
        max-width: 700px;
    }

    .pio-inner-training {
        padding-block: 6rem;
    }

    .pio-inner-training h4 {
        font-size: clamp(2.1178rem, calc(1.7631rem + 1.5132vw), 3.125rem);
    }

    .pio-inner-training .pio-training-paragraph {
        font-size: clamp(0.9625rem, calc(0.525rem + 0.5vw), 1.125rem);
    }

    .pio-inner-training .training-heading {
        font-size: clamp(0.9938rem, calc(-0.3694rem + 1.5577vw), 1.5rem);
    }

    .pio-inner-training .training-inner-heading {
        font-size: clamp(1.5rem, calc(0.8269rem + 0.7692vw), 1.75rem);
    }

    .pio-inner-training .description {
        font-size: clamp(0.9625rem, calc(0.525rem + 0.5vw), 1.125rem);
    }

    .pio-inner-training p span {
        font-size: clamp(1.8385rem, calc(1.6055rem + 0.9939vw), 2.5rem);
    }

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

    .footer-text {
        font-size: clamp(0.7241rem, calc(0.6929rem + 0.1329vw), 0.8125rem);
    }

    .pio-stroke-text span {
        font-size: clamp(2.375rem, calc(1.3656rem + 1.1538vw), 2.75rem);
    }

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

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

    .pio-statistics-about .statistics-content {
        font-size: clamp(2.1178rem, calc(1.7631rem + 1.5132vw), 3.125rem);
        font-weight: 600;
    }

    .pio-footer-heading {
        font-size: clamp(1.5631rem, calc(1.4092rem + 0.6564vw), 2rem) !important;
    }

}

/* super extra large breakpoint */
@media screen and (min-width:1600px) {

    .hero-weird-planet {
        bottom: 25%;
    }

    .container.pio-testimonials {
        padding: 8rem;
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .pio-container, .pio-container-xxl, .pio-container-xl, .pio-container-lg, .pio-container-md, .pio-container-sm {
        max-width: 1440px;
    }

}

/* extra small breakpoint */
@media screen and (max-width:576px) {
    .footer-social {
        text-align: center;
    }
}

@media (max-width:600px) {
    .tl-grid {
        grid-template-columns: 1fr;
    }
}

/* mobile hero scene adjustments */
@media screen and (max-width:767px) {

    .in-product-h1 {
        font-size: clamp(2.0677rem, calc(1.7394rem + 1.4007vw), 3rem);
    }

    .hero-spaceman {
        width: 40vw;
        inset-inline-end: 2%;
        bottom: 2%;
    }

    .hero-spaceman-shadow {
        bottom: 1%;
    }

    .hero-weird-planet {
        width: 35vw;
        bottom: 4%;
        inset-inline-end: -15%;
        opacity: 0.7;
    }

    .pio-background-img {
        min-height: unset !important;
    }
}

@media screen and (max-width:1024px) {
    .pio-background-img::before, body[data-bs-theme="dark"] .pio-background-img::before {
        width: 100% !important;
        background: rgba(var(-\-color-value)) !important;
    }
}

/* ==========================================================================
   MOVED FROM style.css - all screen-size media queries live here
   ========================================================================== */

/* moved from style.css (was line 192) */
@media screen and (max-width: 991px) {
    main {
        padding-top: 80px;
    }
}

/* moved from style.css (was line 1080) */
@media (max-width: 768px) {
    .hero-title {
        font-size: clamp(1.8385rem, calc(1.6055rem + 0.9939vw), 2.5rem);
    }
}

/* moved from style.css (was line 2752) */
/* Responsive */
@media (max-width: 991px) {
    .gear-carousel-wrapper {
        justify-content: flex-end;
    }

    /* One number. Card size, card centring and the orbit radius are all ratios
       of --gear-size in style.css, so they follow automatically. */
    .gear-carousel-container {
        -\-gear-size: 320px;
    }

    body[dir="ltr"] .gear-carousel-container {
        transform: translateX(50%) !important;
    }

    body[dir="rtl"] .gear-carousel-container {
        transform: translateX(-50%) !important;
    }

    .gear-inner {
        width: 70px;
        height: 70px;
    }

    .gear-card-inner {
        padding: 8px 8px;
        gap: 6px;
    }

        .gear-card-inner img {
            width: 30px;
            height: 30px;
        }

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

/* moved from style.css (was line 2801) */
@media (max-width: 480px) {
    .gear-carousel-wrapper {
        padding: 3rem 0;
    }

    .gear-carousel-container {
        -\-gear-size: 280px;
        /* The stacked icon-over-text layout below needs more vertical room than
           the 0.217 ratio gives at this size, so the height ratio is relaxed
           here only. Width still follows --gear-size. */
        -\-gear-card-height: calc(var(-\-gear-size) * 0.30);
    }

    body[dir="ltr"] .gear-carousel-container {
        transform: translateX(50%) !important;
    }

    body[dir="rtl"] .gear-carousel-container {
        transform: translateX(-50%) !important;
    }

    .gear-inner {
        width: 55px;
        height: 55px;
    }

    /* Icon over text here, not side by side, so the icon and the padding both
       need to come in tighter than the shared ratios give - stacking costs
       vertical room the row layout does not. The LABEL is deliberately not
       overridden any more: it inherits --gear-card-font (~10px at this size),
       where the old clamp here capped it at 9px. Measured, the stacked content
       lands at 79px inside an 84px card. */
    .gear-card-inner {
        padding: 6px;
        gap: 4px;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

        .gear-card-inner img {
            width: 24px;
            height: 24px;
        }
}

/* moved from style.css (was line 4488) */
@media (max-width: 768px) {
    .pio-b2b-inPerson-img {
        height: 400px;
    }
}

/* moved from style.css (was line 4754) */
/* md ≥ 768px — side by side: left 2/3, right 1/3 */
@media (min-width: 768px) {
    .bento-flex-layout {
        flex-direction: row;
        align-items: flex-start;
    }

    /* subtract the 1rem flex gap from the column bases so
       left + gap + right = exactly 100% and the outer edges line up
       with the full-width cards above/below (header, schedule) */
    .bento-flex-col-left {
        flex: 0 0 calc(66.666% - 0.5rem);
        max-width: calc(66.666% - 0.5rem);
    }

    .bento-flex-col-right {
        flex: 0 0 calc(33.333% - 0.5rem);
        max-width: calc(33.333% - 0.5rem);
    }
}

/* moved from style.css (was line 4790) */
/* md ≥ 768px — two columns */
@media (min-width: 768px) {
    .bento-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "cell1 cell2"
            "cell3 cell4"
            "cell5 cell6";
    }
}

/* moved from style.css (was line 4801) */
/* lg ≥ 992px — desktop layout: 3 cols, 4 rows */
@media (min-width: 992px) {
    .bento-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
            "cell1 cell1 cell2"
            "cell3 cell3 cell4"
            "cell5 cell5 cell4"
            "cell5 cell5 cell6";
    }
}

/* moved from style.css (was line 4855) */
@media (min-width: 768px) {
    .bento-grid.no-cell1 {
        grid-template-areas:
            "cell3 cell2"
            "cell5 cell4"
            "cell5 cell6";
    }
}

/* moved from style.css (was line 4864) */
@media (min-width: 992px) {
    .bento-grid.no-cell1 {
        grid-template-areas:
            "cell3 cell3 cell2"
            "cell5 cell5 cell4"
            "cell5 cell5 cell4"
            "cell5 cell5 cell6";
    }
}

/* moved from style.css (was line 4884) */
@media (min-width: 768px) {
    .bento-grid.no-cell5 {
        grid-template-areas:
            "cell1 cell2"
            "cell3 cell4"
            "cell3 cell6";
    }
}

/* moved from style.css (was line 4893) */
@media (min-width: 992px) {
    .bento-grid.no-cell5 {
        grid-template-areas:
            "cell1 cell1 cell2"
            "cell3 cell3 cell4"
            "cell3 cell3 cell4"
            "cell3 cell3 cell6";
    }
}

/* moved from style.css (was line 4912) */
@media (min-width: 768px) {
    .bento-grid.no-cell1.no-cell5 {
        grid-template-areas:
            "cell3 cell2"
            "cell3 cell4"
            "cell3 cell6";
    }
}

/* moved from style.css (was line 4921) */
@media (min-width: 992px) {
    .bento-grid.no-cell1.no-cell5 {
        grid-template-areas:
            "cell3 cell3 cell2"
            "cell3 cell3 cell4"
            "cell3 cell3 cell4"
            "cell3 cell3 cell6";
    }
}

/* moved from style.css (was line 4941) */
@media (min-width: 768px) {
    .bento-grid.no-cell2 {
        grid-template-areas:
            "cell1 cell4"
            "cell3 cell4"
            "cell5 cell6";
    }
}

/* moved from style.css (was line 4950) */
@media (min-width: 992px) {
    .bento-grid.no-cell2 {
        grid-template-areas:
            "cell1 cell1 cell4"
            "cell3 cell3 cell4"
            "cell5 cell5 cell4"
            "cell5 cell5 cell6";
    }
}

/* moved from style.css (was line 4969) */
@media (min-width: 768px) {
    .bento-grid.no-cell1.no-cell2 {
        grid-template-areas:
            "cell3 cell4"
            "cell5 cell4"
            "cell5 cell6";
    }
}

/* moved from style.css (was line 4978) */
@media (min-width: 992px) {
    .bento-grid.no-cell1.no-cell2 {
        grid-template-areas:
            "cell3 cell3 cell4"
            "cell5 cell5 cell4"
            "cell5 cell5 cell4"
            "cell5 cell5 cell6";
    }
}

/* moved from style.css (was line 4997) */
@media (min-width: 768px) {
    .bento-grid.no-cell5.no-cell2 {
        grid-template-areas:
            "cell1 cell4"
            "cell3 cell4"
            "cell3 cell6";
    }
}

/* moved from style.css (was line 5006) */
@media (min-width: 992px) {
    .bento-grid.no-cell5.no-cell2 {
        grid-template-areas:
            "cell1 cell1 cell4"
            "cell3 cell3 cell4"
            "cell3 cell3 cell4"
            "cell3 cell3 cell6";
    }
}

/* moved from style.css (was line 5024) */
@media (min-width: 768px) {
    .bento-grid.no-cell1.no-cell5.no-cell2 {
        grid-template-areas:
            "cell3 cell4"
            "cell3 cell4"
            "cell3 cell6";
    }
}

/* moved from style.css (was line 5033) */
@media (min-width: 992px) {
    .bento-grid.no-cell1.no-cell5.no-cell2 {
        grid-template-areas:
            "cell3 cell3 cell4"
            "cell3 cell3 cell4"
            "cell3 cell3 cell4"
            "cell3 cell3 cell6";
    }
}

/* moved from style.css (was line 5852) */
/* responsive */
@media (max-width: 767.98px) {
    .topics-accordion .accordion-button {
        padding: 0.85rem 1rem;
        font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
    }

    .custom-accordion-body {
        padding: 0.25rem 1rem 0.6rem;
    }

    /* let long titles wrap instead of truncating on small screens */
    .accordion-title,
    .lesson-name,
    .lecture-name {
        white-space: normal;
        line-height: 1.45;
    }

    .lecture-list {
        padding-inline-start: 0;
    }

    /* hide the size chip on very tight rows to give names room */
    .module-size {
        display: none;
    }

    .package-accordion .accordion-button {
        padding: 0.85rem 1rem;
        font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
    }

    .package-course-body {
        padding: 0.75rem 0.75rem;
    }

    .course-type-chip {
        width: 26px;
        height: 26px;
        font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    }
}

/* moved from style.css (was line 6136) */
/* mobile: show ~1.4 cards and scroll */
@media (max-width: 991.98px) {
    .certificate-item {
        flex: 0 0 70%;
        max-width: 70%;
    }
}

/* moved from style.css (was line 6633) */
/* MOBILE: the toggle is fully icon-only (even the active side collapses); the
   label is revealed on press-and-hold as a tooltip (:active) instead. */
@media (max-width: 767.98px) {
    /* the compact icon-only toggle needs far less corner clearance */
    .buy-courses-modal .buy-section-row.selected .buy-section-item {
        padding-inline-end: 4.25rem;
    }

    .buy-courses-modal .buy-section-method-mini .method-segment-btn {
        position: relative;
    }

    /* no expanded active side, and no inline label on any side */
    .buy-courses-modal .buy-section-method-mini .method-segment-btn.active {
        padding: 0;
        gap: 0;
    }

        .buy-courses-modal .buy-section-method-mini .method-segment-btn.active span {
            display: none;
        }

    /* press-and-hold: show the button's title as a tooltip below it (kept
       inside the card so the row's overflow:hidden never clips it) */
    .buy-courses-modal .buy-section-method-mini .method-segment-btn:active::after {
        content: attr(title);
        position: absolute;
        top: calc(100% + 6px);
        inset-inline-end: 0;
        padding: 3px 7px;
        border-radius: 4px;
        background: #333;
        color: #fff;
        font-size: clamp(0.6206rem, calc(0.597rem + 0.1005vw), 0.6875rem);
        font-weight: 600;
        line-height: 1.3;
        white-space: nowrap;
        pointer-events: none;
        z-index: 40;
    }
}

/* moved from style.css (was line 7763) */
@media (max-width: 991.98px) {
    .cart-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .cart-summary {
        position: sticky;
        top: auto;
        bottom: 0;
        max-height: none;
        overflow-y: visible;
        background-color: var(-\-body-background, #fff);
    }
}

/* moved from style.css (was line 7780) */
/* stack on mobile: drop the column headings, one field per line */
@media (max-width: 767.98px) {
    .cart-table-head {
        display: none;
    }

    .cart-row-main {
        grid-template-columns: 1fr;
        gap: .85rem;
    }

        .cart-row-main .col-total {
            justify-content: space-between;
        }

    .cart-cert-img {
        width: 64px;
        height: 46px;
    }

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

/* moved from style.css (was line 7872) */
@media (min-width: 992px) {
    .swiper-testimonials swiper-slide {
        width: calc(100% / 3) !important;
    }
}

/* moved from style.css (was line 8532) */
/* desktop: a floating rounded pill hovering above the bottom edge */
@media (min-width: 768px) {
    .sticky-cta {
        bottom: 22px;
        padding-inline: 1rem;
    }

    .sticky-cta-inner {
        max-width: 720px;
        margin: 0 auto;
        border-radius: 999px;
        padding: .6rem .6rem .6rem 1rem;
        box-shadow: 0 12px 34px rgba(0, 0, 0, .2);
    }

    .sticky-cta-btn {
        border-radius: 999px;
    }
}

/* moved from style.css (was line 8552) */
/* small phones: keep the name from crowding the button */
@media (max-width: 380px) {
    .sticky-cta-name {
        max-width: 42vw;
    }
}

/* ==========================================================================
   Certificate carousel (product page bento card)
   ========================================================================== */

@media (max-width: 991.98px) {
    .cert-card .bento-card-body {
        padding: 20px 16px 24px;
    }

    .cert-thumbs {
        -\-cert-thumb-w: 44px;
        -\-cert-thumb-h: 32px;
        -\-cert-thumb-gap: 6px;
    }
}

@media (max-width: 575.98px) {
    .cert-card .bento-card-header {
        padding: 0.75rem 1rem;
    }

    .cert-card .bento-card-body {
        padding: 16px 12px 20px;
    }

    .cert-card .cert-nav-btn {
        width: 34px;
        height: 34px;
    }

    .cert-thumbs {
        -\-cert-thumb-w: 48px;
        -\-cert-thumb-h: 34px;
        -\-cert-thumb-gap: 6px;
    }

    .cert-card .certificate.optional .img-container::after {
        width: 64px;
        height: 64px;
        background-size: contain;
    }

    .cert-card .certificate .description {
        font-size: clamp(0.7241rem, calc(0.6929rem + 0.1329vw), 0.8125rem);
    }
}

@media screen and (max-width: 767.98px) {
    .footer .row {
        -\-bs-gutter-x: 1.5rem;
    }

    .footer .col-lg-3.ps-0,
    .footer .col-lg-3.pe-0,
    .footer .pio-footer-items.px-5 {
        padding-inline: calc(var(-\-bs-gutter-x) * .5) !important;
    }

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

    .footer .pio-footer-items,
    .footer .pio-footer-items a {
        white-space: normal !important;
    }

    .footer .footer-links {
        align-items: flex-start !important;
    }

    .footer .footer-social {
        width: 100%;
        text-align: start;
    }

    .footer .country-select {
        width: 100%;
        max-width: 14rem;
        margin-top: .5rem;
    }
}