/*
 * Enhanced content sections (home + About page). Logo palette: deep navy, royal blue, gold.
 * Light is the default; html[data-theme="dark"] rules at the end switch to the dark look.
 */

/* ======================= about ======================= */
.tq-about {
    --tq-navy: #06256f;
    --tq-blue: #0d4ecd;
    --tq-gold: #e0a514;
    --tq-gold-text: #a87300;
    --tq-text: #4a5468;
    --tq-card: #ffffff;
    --tq-card-border: rgba(6, 37, 111, .08);
    --tq-card-shadow: 0 18px 40px rgba(6, 37, 111, .1);
    --tq-frame: #ffffff;

    position: relative;
    padding: 50px 0;
    overflow: hidden;
}

/* the About page counter strip had no spacing of its own */
.main>.counter-area {
    padding: 50px 0;
}

/* ---------- visual ---------- */
.tq-about__visual {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 40px 70px 0;
}

.tq-about__dots {
    position: absolute;
    left: -24px;
    top: -24px;
    width: 150px;
    height: 150px;
    background-image: radial-gradient(rgba(13, 78, 205, .28) 2px, transparent 2.5px);
    background-size: 16px 16px;
}

.tq-about__glow {
    position: absolute;
    right: -40px;
    bottom: 0;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 188, 30, .3), transparent 65%);
    filter: blur(10px);
}

.tq-about__photo {
    position: relative;
    margin: 0;
    overflow: hidden;
}

.tq-about__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

.tq-about__photo:hover img {
    transform: scale(1.05);
}

.tq-about__photo--main {
    z-index: 1;
    width: 78%;
    aspect-ratio: 4 / 5;
    border-radius: 32px;
    box-shadow: var(--tq-card-shadow);
}

/* the second photo overlaps the first in a white frame */
.tq-about__photo--side {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    width: 48%;
    aspect-ratio: 3 / 4;
    border-radius: 26px;
    border: 8px solid var(--tq-frame);
    box-shadow: 0 24px 50px rgba(6, 37, 111, .22);
}

.tq-about__badge {
    position: absolute;
    z-index: 3;
    top: 34px;
    right: 6px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-align: center;
    background: linear-gradient(135deg, #f5d65f, #e0a514 55%, #d5902a);
    color: #fff;
    text-shadow: 0 1px 2px rgba(60, 30, 0, .45);
    box-shadow: 0 0 0 8px rgba(224, 165, 20, .18), 0 18px 34px rgba(160, 110, 10, .35);
}

.tq-about__badge strong {
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
}

.tq-about__badge strong span {
    font-size: 26px;
}

.tq-about__badge small {
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
}

.tq-about__chip {
    position: absolute;
    z-index: 3;
    left: -10px;
    bottom: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 12px;
    border-radius: 18px;
    background: var(--tq-card);
    border: 1px solid var(--tq-card-border);
    box-shadow: var(--tq-card-shadow);
    white-space: nowrap;
}

.tq-about__chip-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #116bdd, #06256f);
    color: #fff;
    font-size: 19px;
}

.tq-about__chip strong {
    display: block;
    color: var(--tq-navy);
    font-size: 15px;
    line-height: 1.25;
}

.tq-about__chip small {
    color: var(--tq-text);
    font-size: 12.5px;
}

/* ---------- content ---------- */
.tq-about__text {
    margin: 0 0 24px;
    color: var(--tq-text);
    font-size: 16.5px;
    line-height: 1.75;
}

.tq-about__points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.tq-about__points li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--tq-navy);
    font-size: 15.5px;
    font-weight: 600;
}

.tq-about__points i {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(13, 78, 205, .1);
    color: var(--tq-blue);
    font-size: 11px;
}

.tq-about__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 32px;
}

.tq-about__feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    border-radius: 20px;
    background: var(--tq-card);
    border: 1px solid var(--tq-card-border);
    box-shadow: 0 8px 24px rgba(6, 37, 111, .06);
    transition: box-shadow .3s ease, border-color .3s ease;
}

.tq-about__feature:hover {
    border-color: rgba(13, 78, 205, .25);
    box-shadow: var(--tq-card-shadow);
}

.tq-about__feature-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #116bdd, #06256f);
    color: #fff;
    font-size: 21px;
    box-shadow: 0 10px 20px rgba(13, 78, 205, .25);
}

.tq-about__feature-icon--gold {
    background: linear-gradient(135deg, #f5d65f, #e0a514 55%, #d5902a);
    box-shadow: 0 10px 20px rgba(224, 165, 20, .3);
}

.tq-about__feature h6 {
    margin: 2px 0 6px;
    color: var(--tq-navy);
    font-size: 17px;
    font-weight: 700;
}

.tq-about__feature p {
    margin: 0;
    color: var(--tq-text);
    font-size: 14px;
    line-height: 1.6;
}

.tq-about__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
}

.tq-about__btn {
    height: 54px;
    padding: 0 28px;
    font-size: 16px;
}

.tq-about__btn i {
    transition: transform .25s ease;
}

.tq-about__btn:hover i {
    transform: translateX(4px);
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    .tq-about__visual {
        margin-bottom: 10px;
    }
}

@media (max-width: 575px) {
    .tq-about__visual {
        padding: 0 16px 56px 0;
    }

    .tq-about__dots {
        left: -10px;
        top: -14px;
        width: 100px;
        height: 100px;
    }

    .tq-about__badge {
        top: 16px;
        right: 0;
        width: 96px;
        height: 96px;
        box-shadow: 0 0 0 6px rgba(224, 165, 20, .18), 0 12px 24px rgba(160, 110, 10, .35);
    }

    .tq-about__badge strong {
        font-size: 30px;
    }

    .tq-about__badge strong span {
        font-size: 20px;
    }

    .tq-about__badge small {
        font-size: 10.5px;
    }

    .tq-about__photo--side {
        border-width: 5px;
    }

    .tq-about__chip {
        left: 0;
        bottom: 12px;
        padding: 8px 12px 8px 8px;
        gap: 8px;
    }

    .tq-about__chip-icon {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .tq-about__chip strong {
        font-size: 13px;
    }

    .tq-about__chip small {
        font-size: 11px;
    }

    .tq-about__points,
    .tq-about__features {
        grid-template-columns: 1fr;
    }

    .tq-about__btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {

    .tq-about__photo img,
    .tq-about__feature {
        transition: none;
    }
}

/* ---------- dark mode ---------- */
html[data-theme="dark"] .tq-about {
    --tq-navy: #ffffff;
    --tq-blue: #4d8fff;
    --tq-gold-text: #f3bc1e;
    --tq-text: #c9d1db;
    --tq-card: #161616;
    --tq-card-border: rgba(255, 255, 255, .1);
    --tq-card-shadow: 0 18px 40px rgba(0, 0, 0, .5);
    --tq-frame: #161616;
}

html[data-theme="dark"] .tq-about__dots {
    background-image: radial-gradient(rgba(77, 143, 255, .35) 2px, transparent 2.5px);
}

html[data-theme="dark"] .tq-about__glow {
    background: radial-gradient(circle, rgba(13, 78, 205, .35), transparent 65%);
}

html[data-theme="dark"] .tq-about__points i {
    background: rgba(77, 143, 255, .14);
}

html[data-theme="dark"] .tq-about__feature:hover {
    border-color: rgba(77, 143, 255, .35);
}

/* ======================= why toqona (bento grid) ======================= */
.tq-why {
    --tq-navy: #06256f;
    --tq-blue: #0d4ecd;
    --tq-text: #4a5468;
    --tq-card: #ffffff;
    --tq-card-border: rgba(6, 37, 111, .08);
    --tq-card-shadow: 0 18px 40px rgba(6, 37, 111, .1);

    position: relative;
    padding: 50px 0;
    background: linear-gradient(180deg, transparent, rgba(13, 78, 205, .04) 50%, transparent);
}

.tq-why__intro {
    margin: 14px 0 0;
    color: var(--tq-text);
    font-size: 17px;
}

/* tall feature card on the left, six reason cards in two columns beside it */
.tq-why__grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 20px;
    margin-top: 40px;
}

.tq-why__lead {
    position: relative;
    grid-row: span 3;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 36px;
    border-radius: 28px;
    background: radial-gradient(circle at 85% 10%, rgba(243, 188, 30, .28), transparent 40%),
        linear-gradient(160deg, #116bdd 0%, #0d4ecd 35%, #06256f 100%);
    color: #fff;
    box-shadow: 0 30px 60px rgba(6, 37, 111, .3);
}

/* faint rings in the corner */
.tq-why__lead-ring {
    position: absolute;
    right: -90px;
    bottom: -90px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 40px solid rgba(255, 255, 255, .05);
    box-shadow: 0 0 0 40px rgba(255, 255, 255, .03);
    pointer-events: none;
}

.tq-why__lead-label {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #ffd76a;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tq-why__lead h3 {
    margin: 20px 0 12px;
    color: #fff;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
}

.tq-why__lead p {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 15.5px;
    line-height: 1.7;
}

.tq-why__big {
    margin-top: auto;
    padding-top: 30px;
}

.tq-why__big strong {
    display: block;
    color: #ffd76a;
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tq-why__big small {
    color: rgba(255, 255, 255, .8);
    font-size: 15px;
}

.tq-why__mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 22px 0 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

.tq-why__mini strong {
    display: block;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.tq-why__mini small {
    color: rgba(255, 255, 255, .72);
    font-size: 12.5px;
    line-height: 1.3;
}

.tq-why__btn {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    height: 52px;
    padding: 0 26px;
    font-size: 15.5px;
}

.tq-why__btn i {
    transition: transform .25s ease;
}

.tq-why__btn:hover i {
    transform: translateX(4px);
}

.tq-why__card {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border-radius: 22px;
    background: var(--tq-card);
    border: 1px solid var(--tq-card-border);
    box-shadow: 0 8px 24px rgba(6, 37, 111, .06);
    transition: box-shadow .3s ease, border-color .3s ease;
}

.tq-why__card:hover {
    border-color: rgba(13, 78, 205, .2);
    box-shadow: var(--tq-card-shadow);
}

/* big outlined number in the corner */
.tq-why__num {
    position: absolute;
    top: 14px;
    right: 20px;
    color: transparent;
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    -webkit-text-stroke: 1.5px rgba(13, 78, 205, .16);
    transition: -webkit-text-stroke-color .3s ease;
}

.tq-why__card:hover .tq-why__num {
    -webkit-text-stroke-color: rgba(224, 165, 20, .55);
}

.tq-why__icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #116bdd, #06256f);
    color: #fff;
    font-size: 22px;
    box-shadow: 0 10px 20px rgba(13, 78, 205, .25);
    transition: transform .3s ease;
}

.tq-why__icon--gold {
    background: linear-gradient(135deg, #f5d65f, #e0a514 55%, #d5902a);
    box-shadow: 0 10px 20px rgba(224, 165, 20, .3);
}

.tq-why__card:hover .tq-why__icon {
    transform: rotate(-8deg) scale(1.06);
}

.tq-why__card h4 {
    margin: 0 0 8px;
    color: var(--tq-navy);
    font-size: 18px;
    font-weight: 700;
}

.tq-why__card p {
    margin: 0;
    color: var(--tq-text);
    font-size: 14.5px;
    line-height: 1.65;
}

@media (max-width: 1199px) {
    .tq-why__grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
    }

    .tq-why__lead {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .tq-why__big {
        margin-top: 0;
    }
}

@media (max-width: 575px) {
    .tq-why__grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 28px;
    }

    .tq-why__lead {
        padding: 26px;
        border-radius: 22px;
    }

    .tq-why__lead h3 {
        font-size: 26px;
    }

    .tq-why__big strong {
        font-size: 44px;
    }

    .tq-why__mini strong {
        font-size: 19px;
    }

    .tq-why__btn {
        width: 100%;
        justify-content: center;
    }

    .tq-why__card {
        padding: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .tq-why__card,
    .tq-why__icon {
        transition: none;
    }
}

html[data-theme="dark"] .tq-why {
    --tq-navy: #ffffff;
    --tq-blue: #4d8fff;
    --tq-text: #c9d1db;
    --tq-card: #161616;
    --tq-card-border: rgba(255, 255, 255, .1);
    --tq-card-shadow: 0 18px 40px rgba(0, 0, 0, .5);
    background: linear-gradient(180deg, transparent, rgba(13, 78, 205, .08) 50%, transparent);
}

html[data-theme="dark"] .tq-why__lead {
    box-shadow: 0 30px 60px rgba(13, 78, 205, .25);
}

html[data-theme="dark"] .tq-why__num {
    -webkit-text-stroke-color: rgba(255, 255, 255, .14);
}

html[data-theme="dark"] .tq-why__card:hover {
    border-color: rgba(77, 143, 255, .35);
}

/* ======================= package cards (.tq-plan) ======================= */
/* same layout as before: image on the left, details on the right, stacked where the card is narrow */
.tq-plan {
    --tq-navy: #06256f;
    --tq-blue: #0d4ecd;
    --tq-gold-text: #a87300;
    --tq-text: #4a5468;
    --tq-card: #ffffff;
    --tq-edge: rgba(6, 37, 111, .09);
    --tq-muted: #8a93a3;
    --tq-tint: rgba(13, 78, 205, .05);

    display: flex;
    gap: 22px;
    height: 100%;
    padding: 14px;
    border: 1.5px solid transparent;
    border-radius: 24px;
    background: linear-gradient(var(--tq-card), var(--tq-card)) padding-box,
        linear-gradient(var(--tq-edge), var(--tq-edge)) border-box;
    box-shadow: 0 10px 30px rgba(6, 37, 111, .07);
    transition: box-shadow .3s ease;
}

/* blue-to-gold border on hover (no movement) */
.tq-plan:hover {
    background: linear-gradient(var(--tq-card), var(--tq-card)) padding-box,
        linear-gradient(135deg, #0d4ecd, #e0a514) border-box;
    box-shadow: 0 22px 46px rgba(6, 37, 111, .14);
}

/* ---------- image ---------- */
.tq-plan__media {
    position: relative;
    flex: 0 0 240px;
    min-height: 260px;
    overflow: hidden;
    border-radius: 18px;
    background: #eef2fb;
}

.tq-plan__media img {
    position: relative;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.tq-plan:hover .tq-plan__media img {
    transform: scale(1.06);
}

/* soft navy shade at the bottom */
.tq-plan__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(6, 37, 111, .4));
    pointer-events: none;
}

/* shown only when the uploaded image is missing */
.tq-plan__fallback {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    text-align: center;
    background: radial-gradient(rgba(255, 255, 255, .12) 1.5px, transparent 2px) 0 0 / 18px 18px,
        radial-gradient(circle at 80% 12%, rgba(243, 188, 30, .4), transparent 45%),
        linear-gradient(150deg, #116bdd, #06256f);
    color: #fff;
}

.tq-plan__media.is-empty .tq-plan__fallback {
    display: flex;
}

.tq-plan__fallback i {
    width: 64px;
    height: 64px;
    margin-bottom: 4px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #f5d65f, #e0a514 55%, #d5902a);
    color: #fff;
    font-size: 26px;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .1), 0 12px 24px rgba(0, 0, 0, .25);
    text-shadow: 0 1px 2px rgba(60, 30, 0, .45);
}

.tq-plan__fallback strong {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
}

/* ---------- details ---------- */
.tq-plan__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 6px 4px 0;
}

.tq-plan__title {
    margin: 0 0 10px;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
}

.tq-plan__title a {
    color: var(--tq-navy);
    text-decoration: none;
    transition: color .2s ease;
}

.tq-plan__title a:hover {
    color: var(--tq-blue);
}

.tq-plan__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 14px;
}

/* rating badge: gold pill, stars filled to the exact rating, then the score */
.tq-plan__rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 10px;
    border-radius: 50px;
    background: linear-gradient(135deg, rgba(255, 215, 106, .22), rgba(224, 165, 20, .1));
    border: 1px solid rgba(224, 165, 20, .35);
    line-height: 1;
}

.tq-plan__stars {
    position: relative;
    display: inline-block;
    font-size: 12.5px;
    letter-spacing: 2px;
    white-space: nowrap;
}

.tq-plan__stars-base {
    color: rgba(6, 37, 111, .15);
}

/* gold layer on top, cut to the rating width */
.tq-plan__stars-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--fill, 100%);
    overflow: hidden;
    background: linear-gradient(180deg, #ffd76a, #e0a514 60%, #c98f0a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tq-plan__rating strong {
    color: var(--tq-navy);
    font-size: 14px;
    font-weight: 800;
}

.tq-plan__rating small {
    margin-left: -5px;
    color: var(--tq-muted);
    font-size: 12px;
    font-weight: 600;
}

html[data-theme="dark"] .tq-plan__rating {
    background: linear-gradient(135deg, rgba(243, 188, 30, .16), rgba(243, 188, 30, .06));
    border-color: rgba(243, 188, 30, .35);
}

html[data-theme="dark"] .tq-plan__stars-base {
    color: rgba(255, 255, 255, .18);
}

.tq-plan__includes {
    margin-bottom: 16px;
}

.tq-plan__includes>small {
    display: block;
    margin-bottom: 8px;
    color: var(--tq-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.tq-plan__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tq-plan__chips span {
    max-width: 100%;
    overflow: hidden;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--tq-tint);
    border: 1px solid var(--tq-edge);
    color: var(--tq-navy);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tq-plan__chips .tq-plan__chip-more {
    background: rgba(224, 165, 20, .12);
    border-color: rgba(224, 165, 20, .3);
    color: var(--tq-gold-text);
}

.tq-plan__desc {
    margin: -4px 0 16px;
    color: var(--tq-text);
    font-size: 14px;
    line-height: 1.6;
}

/* price panel */
.tq-plan__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding: 12px 12px 12px 16px;
    border-radius: 16px;
    background: var(--tq-tint);
}

.tq-plan__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

.tq-plan__price strong {
    color: var(--tq-navy);
    font-size: 23px;
    font-weight: 800;
    line-height: 1.1;
}

.tq-plan__price del {
    color: var(--tq-muted);
    font-size: 14.5px;
    font-weight: 500;
}

/* discount percentage right after the struck-through price */
.tq-plan__off {
    align-self: center;
    padding: 3px 8px;
    border-radius: 50px;
    background: rgba(22, 163, 74, .12);
    color: #15803d;
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
}

html[data-theme="dark"] .tq-plan__off {
    background: rgba(34, 197, 94, .16);
    color: #4ade80;
}

.tq-plan__btn {
    flex: 1 0 auto;
    height: 44px;
    padding: 0 20px;
    font-size: 14.5px;
}

.tq-plan__btn i {
    transition: transform .25s ease;
}

.tq-plan__btn:hover i {
    transform: translateX(4px);
}

/* image on top, details below below desktop width, where the card is too narrow to sit side by side */
@media (max-width: 1199px) {
    .tq-plan {
        flex-direction: column;
        gap: 16px;
    }

    .tq-plan__media {
        flex-basis: auto;
        min-height: 0;

    }

    .tq-plan__body {
        padding: 0 6px 6px;
    }

    .tq-plan__btn {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    .tq-plan,
    .tq-plan__media img {
        transition: none;
    }
}

html[data-theme="dark"] .tq-plan {
    --tq-navy: #ffffff;
    --tq-blue: #4d8fff;
    --tq-gold-text: #f3bc1e;
    --tq-text: #c9d1db;
    --tq-card: #161616;
    --tq-edge: rgba(255, 255, 255, .1);
    --tq-muted: #8e97a3;
    --tq-tint: rgba(255, 255, 255, .04);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

html[data-theme="dark"] .tq-plan:hover {
    background: linear-gradient(var(--tq-card), var(--tq-card)) padding-box,
        linear-gradient(135deg, #4d8fff, #f3bc1e) border-box;
    box-shadow: 0 22px 46px rgba(0, 0, 0, .6);
}

html[data-theme="dark"] .tq-plan__media {
    background: #1f1f1f;
}

/* ======================= discover toqona advantage (.tq-adv) ======================= */
.tq-adv {
    --tq-navy: #06256f;
    --tq-blue: #0d4ecd;
    --tq-text: #4a5468;
    --tq-card: #ffffff;
    --tq-edge: rgba(6, 37, 111, .09);
    --tq-tint: rgba(13, 78, 205, .05);

    position: relative;
    padding: 50px 0;
}

/* editorial header: heading on the left, intro on the right */
.tq-adv__head {
    display: grid;
    grid-template-columns: 1fr;
    align-items: end;
    gap: 20px 48px;
    margin-bottom: 36px;
}

.tq-adv__intro {
    margin: 0;
    padding-left: 22px;
    border-left: 3px solid #e0a514;
    color: var(--tq-text);
    font-size: 16.5px;
    line-height: 1.75;
}

/* ---------- photo card ---------- */
.tq-adv__photo {
    position: relative;
    height: 100%;
    min-height: 420px;
    margin: 0;
    overflow: hidden;
    border-radius: 28px;
    box-shadow: 0 24px 50px rgba(6, 37, 111, .16);
}

.tq-adv__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
}

.tq-adv__photo:hover img {
    transform: scale(1.04);
}

.tq-adv__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(6, 37, 111, .78));
    pointer-events: none;
}

/* frosted strip with the learn > practice > earn journey */
.tq-adv__journey {
    position: absolute;
    z-index: 1;
    left: 20px;
    right: 20px;
    bottom: 20px;
    padding: 16px 20px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #fff;
}

.tq-adv__journey-label {
    display: block;
    margin-bottom: 12px;
    color: #ffd76a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.tq-adv__steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tq-adv__step {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
}

.tq-adv__step-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--tq-blue);
    font-size: 17px;
}

.tq-adv__step:last-child .tq-adv__step-icon {
    background: linear-gradient(135deg, #f5d65f, #e0a514 55%, #d5902a);
    color: #fff;
}

.tq-adv__step-arrow {
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
}

/* ---------- advantages as a connected list ---------- */
.tq-adv__list {
    position: relative;
    display: grid;
    gap: 14px;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* dashed line joining the icons */
.tq-adv__list::before {
    content: "";
    position: absolute;
    left: 45px;
    top: 40px;
    bottom: 40px;
    border-left: 2px dashed rgba(13, 78, 205, .2);
}

.tq-adv__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 18px 20px;
    border-radius: 20px;
    background: var(--tq-card);
    border: 1px solid var(--tq-edge);
    box-shadow: 0 8px 22px rgba(6, 37, 111, .05);
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.tq-adv__item:hover {
    background: linear-gradient(var(--tq-tint), var(--tq-tint)), var(--tq-card);
    border-color: rgba(13, 78, 205, .25);
    box-shadow: 0 16px 34px rgba(6, 37, 111, .1);
}

.tq-adv__icon {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #116bdd, #06256f);
    color: #fff;
    font-size: 21px;
    box-shadow: 0 10px 20px rgba(13, 78, 205, .25);
    transition: background .3s ease;
}

.tq-adv__icon--gold {
    background: linear-gradient(135deg, #f5d65f, #e0a514 55%, #d5902a);
    box-shadow: 0 10px 20px rgba(224, 165, 20, .3);
}

/* hovered row: icon swaps to the other brand colour */
.tq-adv__item:hover .tq-adv__icon {
    background: linear-gradient(135deg, #f5d65f, #e0a514 55%, #d5902a);
}

.tq-adv__item:hover .tq-adv__icon--gold {
    background: linear-gradient(135deg, #116bdd, #06256f);
}

.tq-adv__item h5 {
    margin: 2px 0 6px;
    color: var(--tq-navy);
    font-size: 17.5px;
    font-weight: 700;
}

.tq-adv__item p {
    margin: 0;
    color: var(--tq-text);
    font-size: 14.5px;
    line-height: 1.6;
}

@media (max-width: 991px) {
    .tq-adv__head {
        grid-template-columns: 1fr;
        margin-bottom: 28px;
    }

    .tq-adv__photo {
        min-height: 360px;
    }
}

@media (max-width: 575px) {
    .tq-adv__photo {
        min-height: 300px;
        border-radius: 22px;
    }

    .tq-adv__journey {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 12px 14px;
    }

    .tq-adv__step {
        flex-direction: column;
        gap: 6px;
        font-size: 13px;
    }

    .tq-adv__step-icon {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .tq-adv__item {
        padding: 16px;
        gap: 14px;
    }

    .tq-adv__list::before {
        left: 41px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .tq-adv__photo img,
    .tq-adv__item,
    .tq-adv__icon {
        transition: none;
    }
}

html[data-theme="dark"] .tq-adv {
    --tq-navy: #ffffff;
    --tq-blue: #4d8fff;
    --tq-text: #c9d1db;
    --tq-card: #161616;
    --tq-edge: rgba(255, 255, 255, .1);
    --tq-tint: rgba(77, 143, 255, .08);
}

html[data-theme="dark"] .tq-adv__photo {
    box-shadow: 0 24px 50px rgba(0, 0, 0, .55);
}

html[data-theme="dark"] .tq-adv__list::before {
    border-left-color: rgba(77, 143, 255, .3);
}

html[data-theme="dark"] .tq-adv__item {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .tq-adv__step-icon {
    background: #161616;
    color: #4d8fff;
}

/* ======================= founder & co-founders (.tq-founders) ======================= */
/* one profile card per person: photo on one side, name, role and story on the other; the second card mirrors the first */
.tq-founders {
    --tq-navy: #06256f;
    --tq-blue: #0d4ecd;
    --tq-text: #4a5468;
    --tq-card: #ffffff;
    --tq-edge: rgba(6, 37, 111, .09);
    --tq-tint: rgba(13, 78, 205, .06);

    position: relative;
    padding: 50px 0;
}

.tq-founders__list {
    display: grid;
    gap: 28px;
}

.tq-founder {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 34px;
    padding: 18px;
    border: 1.5px solid transparent;
    border-radius: 24px;
    background: linear-gradient(var(--tq-card), var(--tq-card)) padding-box,
        linear-gradient(var(--tq-edge), var(--tq-edge)) border-box;
    box-shadow: 0 10px 30px rgba(6, 37, 111, .07);
    transition: box-shadow .3s ease;
}

.tq-founder:nth-child(even) {
    flex-direction: row-reverse;
}

/* blue-to-gold border on hover (no movement), same as the package cards */
.tq-founder:hover {
    background: linear-gradient(var(--tq-card), var(--tq-card)) padding-box,
        linear-gradient(135deg, #0d4ecd, #e0a514) border-box;
    box-shadow: 0 22px 46px rgba(6, 37, 111, .14);
}

/* ---------- photo ---------- */
.tq-founder__media {
    position: relative;
    flex: 0 0 320px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 18px;
    background: #eef2fb;
}

.tq-founder__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .6s ease;
}

.tq-founder:hover .tq-founder__media img {
    transform: scale(1.05);
}

/* navy shade at the bottom so the badge stays readable on any photo */
.tq-founder__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(6, 37, 111, .55));
    pointer-events: none;
}

/* shown only when no photo is uploaded or the file is missing */
.tq-founder__fallback {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: radial-gradient(rgba(255, 255, 255, .12) 1.5px, transparent 2px) 0 0 / 18px 18px,
        radial-gradient(circle at 80% 12%, rgba(243, 188, 30, .4), transparent 45%),
        linear-gradient(150deg, #116bdd, #06256f);
}

.tq-founder__media.is-empty .tq-founder__fallback {
    display: flex;
}

.tq-founder__fallback i {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #f5d65f, #e0a514 55%, #d5902a);
    color: #fff;
    font-size: 40px;
    box-shadow: 0 0 0 12px rgba(255, 255, 255, .1), 0 0 0 24px rgba(255, 255, 255, .05), 0 16px 30px rgba(0, 0, 0, .25);
    text-shadow: 0 1px 2px rgba(60, 30, 0, .45);
}

.tq-founder__badge {
    position: absolute;
    z-index: 1;
    left: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 50px;
    background: linear-gradient(135deg, #f5d65f, #e0a514 55%, #d5902a);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-shadow: 0 1px 2px rgba(60, 30, 0, .4);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .2);
}

/* ---------- details ---------- */
.tq-founder__body {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 14px 22px 4px 0;
}

.tq-founder:nth-child(even) .tq-founder__body {
    padding: 14px 0 4px 22px;
}

/* big faint quote mark in the corner */
.tq-founder__quote {
    position: absolute;
    top: 14px;
    right: 18px;
    color: rgba(224, 165, 20, .18);
    font-size: 64px;
    line-height: 1;
    pointer-events: none;
}

.tq-founder__name {
    margin: 0 0 8px;
    padding-right: 70px;
    color: var(--tq-navy);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
}

.tq-founder__role {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 50px;
    background: var(--tq-tint);
    border: 1px solid rgba(13, 78, 205, .14);
    color: var(--tq-blue);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* short gold rule between the role and the story */
.tq-founder__bio {
    position: relative;
    margin-top: 14px;
    padding-top: 16px;
}

.tq-founder__bio::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 56px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f5d65f, #e0a514 55%, #d5902a);
}

.tq-founder__bio p {
    margin: 0 0 4px;
    color: var(--tq-text);
    font-size: 15.5px;
    line-height: 1.6;
}

.tq-founder__bio p:last-child {
    margin-bottom: 0;
}

@media (max-width: 1199px) {
    .tq-founder__media {
        flex-basis: 280px;
    }
}

@media (max-width: 991px) {
    .tq-founder {
        gap: 24px;
    }

    .tq-founder__media {
        flex-basis: 230px;
    }

    .tq-founder__body,
    .tq-founder:nth-child(even) .tq-founder__body {
        padding: 10px 6px 6px;
    }

    .tq-founder__name {
        font-size: 24px;
    }
}

/* photo on top, details below on phones */
@media (max-width: 767px) {

    .tq-founder,
    .tq-founder:nth-child(even) {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        padding: 14px;
        border-radius: 22px;
    }

    .tq-founder__media {
        flex-basis: auto;
        aspect-ratio: 1 / 1;
    }

    .tq-founder__body,
    .tq-founder:nth-child(even) .tq-founder__body {
        padding: 0 6px 8px;
    }

    .tq-founder__quote {
        top: -2px;
        right: 6px;
        font-size: 48px;
    }

    .tq-founder__name {
        padding-right: 50px;
        font-size: 22px;
    }

    .tq-founder__bio {
        margin-top: 12px;
        padding-top: 14px;
    }

    .tq-founder__bio p {
        font-size: 15px;
        line-height: 1.6;
    }
}

@media (prefers-reduced-motion: reduce) {

    .tq-founder,
    .tq-founder__media img {
        transition: none;
    }
}

html[data-theme="dark"] .tq-founders {
    --tq-navy: #ffffff;
    --tq-blue: #4d8fff;
    --tq-text: #c9d1db;
    --tq-card: #161616;
    --tq-edge: rgba(255, 255, 255, .1);
    --tq-tint: rgba(77, 143, 255, .1);
}

html[data-theme="dark"] .tq-founder {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

html[data-theme="dark"] .tq-founder:hover {
    background: linear-gradient(var(--tq-card), var(--tq-card)) padding-box,
        linear-gradient(135deg, #4d8fff, #f3bc1e) border-box;
    box-shadow: 0 22px 46px rgba(0, 0, 0, .6);
}

html[data-theme="dark"] .tq-founder__media {
    background: #1f1f1f;
}

html[data-theme="dark"] .tq-founder__role {
    border-color: rgba(77, 143, 255, .25);
}

html[data-theme="dark"] .tq-founder__quote {
    color: rgba(243, 188, 30, .2);
}

/* ======================= management message (.tq-mgmt) ======================= */
/* full-width deep-blue band: heading, highlight line and values on the left, the letter in a white card on the right */
.tq-mgmt {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(140deg, #0d4ecd 0%, #06256f 55%, #041a4f 100%);
    color: rgba(255, 255, 255, .82);
}

.tq-mgmt .container {
    position: relative;
    z-index: 1;
}

.tq-mgmt__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.tq-mgmt__blob--a {
    width: 420px;
    height: 420px;
    top: -140px;
    right: -100px;
    background: rgba(243, 188, 30, .32);
}

.tq-mgmt__blob--b {
    width: 360px;
    height: 360px;
    bottom: -160px;
    left: -120px;
    background: rgba(77, 143, 255, .45);
}

.tq-mgmt__grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 56px;
    align-items: center;
}

/* ---------- left ---------- */
.tq-mgmt__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 50px;
    border: 1px solid rgba(243, 188, 30, .45);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(8px);
    color: #f5c542;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.tq-mgmt__title {
    margin: 18px 0 16px;
    color: #fff;
    font-size: clamp(34px, 4.6vw, 54px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.5px;
}

.tq-mgmt__title span {
    background: linear-gradient(100deg, #f5d65f, #e0a514);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tq-mgmt__highlight {
    max-width: 440px;
    margin: 0 0 32px;
    padding-left: 18px;
    border-left: 3px solid #f3bc1e;
    color: #fff;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.55;
}

.tq-mgmt__values {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tq-mgmt__values li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
    transition: background .3s ease, border-color .3s ease;
}

.tq-mgmt__values li:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(243, 188, 30, .45);
}

.tq-mgmt__values i {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #f5d65f, #e0a514 55%, #d5902a);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 8px 18px rgba(224, 165, 20, .3);
}

.tq-mgmt__values strong {
    display: block;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.tq-mgmt__values small {
    display: block;
    color: rgba(255, 255, 255, .7);
    font-size: 13.5px;
}

/* ---------- letter card ---------- */
.tq-mgmt__letter {
    position: relative;
    padding: 48px 48px 36px;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 40px 80px rgba(0, 0, 0, .3);
}

/* gold accent bar on the top edge */
.tq-mgmt__letter::before {
    content: "";
    position: absolute;
    top: 0;
    left: 48px;
    width: 90px;
    height: 5px;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(90deg, #f5d65f, #e0a514);
}

.tq-mgmt__quote {
    position: absolute;
    top: 30px;
    right: 36px;
    font-size: 72px;
    line-height: 1;
    color: rgba(13, 78, 205, .1);
    pointer-events: none;
}

.tq-mgmt__letter p {
    margin: 0 0 14px;
    color: #4a5468;
    font-size: 16px;
    line-height: 1.8;
}

.tq-mgmt__letter .tq-mgmt__lead {
    color: #06256f;
    font-size: 21px;
    font-weight: 800;
}

.tq-mgmt__letter .tq-mgmt__close {
    margin-bottom: 0;
    color: #0d4ecd;
    font-weight: 700;
}

.tq-mgmt__sign {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px dashed rgba(6, 37, 111, .15);
}

.tq-mgmt__sign-icon {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0d4ecd, #06256f);
    color: #f5c542;
    font-size: 19px;
    box-shadow: 0 10px 22px rgba(13, 78, 205, .3);
}

.tq-mgmt__sign small {
    display: block;
    color: #7a8499;
    font-size: 14px;
}

.tq-mgmt__sign strong {
    display: block;
    color: #a87300;
    font-size: 18px;
    font-weight: 800;
}

@media (max-width: 991px) {
    .tq-mgmt {
        padding: 70px 0;
    }

    .tq-mgmt__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .tq-mgmt__highlight {
        max-width: none;
    }
}

@media (max-width: 575px) {
    .tq-mgmt__letter {
        padding: 36px 22px 26px;
        border-radius: 24px;
    }

    .tq-mgmt__letter::before {
        left: 22px;
    }

    .tq-mgmt__quote {
        top: 20px;
        right: 18px;
        font-size: 52px;
    }

    .tq-mgmt__letter p {
        font-size: 15.5px;
    }

    /* the highlight line and the three value rows are left out on phones to keep the section short */
    .tq-mgmt__highlight,
    .tq-mgmt__values {
        display: none;
    }
}

html[data-theme="dark"] .tq-mgmt {
    background:
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(140deg, #0a2a6e 0%, #071636 55%, #050c1e 100%);
}

html[data-theme="dark"] .tq-mgmt__letter {
    background: #121826;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 40px 80px rgba(0, 0, 0, .55);
}

html[data-theme="dark"] .tq-mgmt__letter p {
    color: #c9d1db;
}

html[data-theme="dark"] .tq-mgmt__letter .tq-mgmt__lead {
    color: #fff;
}

html[data-theme="dark"] .tq-mgmt__letter .tq-mgmt__close {
    color: #4d8fff;
}

html[data-theme="dark"] .tq-mgmt__quote {
    color: rgba(77, 143, 255, .14);
}

html[data-theme="dark"] .tq-mgmt__sign {
    border-top-color: rgba(255, 255, 255, .14);
}

html[data-theme="dark"] .tq-mgmt__sign small {
    color: #8e97a3;
}

html[data-theme="dark"] .tq-mgmt__sign strong {
    color: #f3bc1e;
}

/* ======================= meet our best instructors (.tq-tutors) ======================= */
/* portrait cards in the owl slider: photo (or initials panel) with the rating on it, then name and role */
.tq-tutors {
    --tq-navy: #06256f;
    --tq-blue: #0d4ecd;
    --tq-card: #ffffff;
    --tq-edge: rgba(6, 37, 111, .09);
    --tq-tint: rgba(13, 78, 205, .06);
    --tq-dot: rgba(6, 37, 111, .18);

    position: relative;
    padding: 50px 0;
}

/* room for the card shadows, which the slider would otherwise cut off */
.tq-tutors__slider .owl-stage-outer {
    padding: 8px 0 26px;
}

.tq-tutor {
    height: 100%;
    padding: 12px;
    border: 1.5px solid transparent;
    border-radius: 24px;
    background: linear-gradient(var(--tq-card), var(--tq-card)) padding-box,
        linear-gradient(var(--tq-edge), var(--tq-edge)) border-box;
    box-shadow: 0 10px 26px rgba(6, 37, 111, .07);
    transition: box-shadow .3s ease;
}

/* blue-to-gold border on hover (no movement), same as the package and founder cards */
.tq-tutor:hover {
    background: linear-gradient(var(--tq-card), var(--tq-card)) padding-box,
        linear-gradient(135deg, #0d4ecd, #e0a514) border-box;
    box-shadow: 0 18px 38px rgba(6, 37, 111, .14);
}

/* ---------- photo ---------- */
.tq-tutor__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 18px;
    background: #eef2fb;
}

.tq-tutors .tq-tutor__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .6s ease;
}

.tq-tutor:hover .tq-tutor__media img {
    transform: scale(1.06);
}

.tq-tutor__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(6, 37, 111, .5));
    pointer-events: none;
}

/* frosted rating chip in the corner of the photo */
.tq-tutor__rating {
    position: absolute;
    z-index: 1;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #06256f;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .15);
}

.tq-tutor__rating i {
    color: #e0a514;
    font-size: 12px;
}

/* ---------- details ---------- */
.tq-tutor__body {
    padding: 16px 6px 6px;
    text-align: center;
}

.tq-tutor__name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 0 10px;
    color: var(--tq-navy);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
}

.tq-tutor__name i {
    flex-shrink: 0;
    color: var(--tq-blue);
    font-size: 15px;
}

.tq-tutor__role {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    padding: 5px 14px;
    border-radius: 50px;
    background: var(--tq-tint);
    border: 1px solid rgba(13, 78, 205, .14);
    color: var(--tq-blue);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---------- slider dots: small navy dots, the active one a wide gold pill ---------- */
.tq-tutors__slider .owl-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

.tq-tutors__slider .owl-dots .owl-dot span {
    display: block;
    width: 9px;
    height: 9px;
    margin: 0;
    border-radius: 50px;
    background: var(--tq-dot);
    transition: width .3s ease, background .3s ease;
}

.tq-tutors__slider .owl-dots .owl-dot.active span {
    width: 28px;
    background: linear-gradient(90deg, #f5d65f, #e0a514 55%, #d5902a);
}

/* one card per slide on phones: a square photo keeps it from getting too tall */
@media (max-width: 599px) {
    .tq-tutor__media {
        aspect-ratio: 1 / 1;
    }

    .tq-tutor__name {
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .tq-tutor,
    .tq-tutors .tq-tutor__media img,
    .tq-tutors__slider .owl-dots .owl-dot span {
        transition: none;
    }
}

html[data-theme="dark"] .tq-tutors {
    --tq-navy: #ffffff;
    --tq-blue: #4d8fff;
    --tq-card: #161616;
    --tq-edge: rgba(255, 255, 255, .1);
    --tq-tint: rgba(77, 143, 255, .1);
    --tq-dot: rgba(255, 255, 255, .22);
}

html[data-theme="dark"] .tq-tutor {
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}

html[data-theme="dark"] .tq-tutor:hover {
    background: linear-gradient(var(--tq-card), var(--tq-card)) padding-box,
        linear-gradient(135deg, #4d8fff, #f3bc1e) border-box;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .6);
}

html[data-theme="dark"] .tq-tutor__media {
    background: #1f1f1f;
}

html[data-theme="dark"] .tq-tutor__role {
    border-color: rgba(77, 143, 255, .25);
}

html[data-theme="dark"] .tq-tutor__rating {
    background: rgba(22, 22, 22, .85);
    color: #fff;
}

/* ===== Testimonials: Google-review style ===== */
.testimonial-area .gr-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: max-content;
    max-width: 100%;
    margin: -10px auto 40px;
    padding: 12px 26px;
    background: #fff;
    border: 1px solid #e5e9f2;
    border-radius: 60px;
    box-shadow: 0 10px 30px rgba(6, 37, 111, .08);
}
.testimonial-area .gr-logo { width: 30px; height: 30px; flex: none; }
.testimonial-area .gr-score { font-size: 34px; font-weight: 800; line-height: 1; color: var(--color-dark); }
.testimonial-area .gr-meta { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.testimonial-area .gr-meta span { font-size: 13px; color: #5f6b85; }
.testimonial-area .gr-stars { display: inline-flex; gap: 2px; color: #fbbc04; font-size: 14px; }
.testimonial-area .gr-stars .off { color: #d5dae5; }

.testimonial-area .gr-card {
    height: 100%;
    padding: 24px;
    background: #fff;
    border: 1px solid #e5e9f2;
    border-radius: 18px;
    box-shadow: 0 6px 22px rgba(6, 37, 111, .07);
    transition: box-shadow .3s ease, border-color .3s ease;
}
.testimonial-area .gr-card:hover {
    border-color: #cfd8ee;
    box-shadow: 0 16px 40px rgba(13, 78, 205, .15);
}
.testimonial-area .gr-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.testimonial-area .gr-avatar {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: #eef2fb;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #e5e9f2;
}
.testimonial-area .gr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-area .gr-user { flex: 1; min-width: 0; }
.testimonial-area .gr-user h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.testimonial-area .gr-user span { font-size: 13px; color: #6b7691; }
.testimonial-area .gr-g { flex: none; width: 24px; height: 24px; }
.testimonial-area .gr-rating { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.testimonial-area .gr-rating .gr-stars { font-size: 16px; }
.testimonial-area .gr-verified { font-size: 12px; font-weight: 600; color: #1a8f4c; }
.testimonial-area .gr-text { margin: 0; font-size: 15px; line-height: 1.7; color: var(--body-text-color); }

html[data-theme="dark"] .testimonial-area .gr-summary,
html[data-theme="dark"] .testimonial-area .gr-card {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .testimonial-area .gr-score,
html[data-theme="dark"] .testimonial-area .gr-user h5 { color: #fff; }
html[data-theme="dark"] .testimonial-area .gr-meta span,
html[data-theme="dark"] .testimonial-area .gr-user span { color: #aab4cf; }
html[data-theme="dark"] .testimonial-area .gr-text { color: #cdd5ea; }
html[data-theme="dark"] .testimonial-area .gr-avatar { box-shadow: 0 0 0 3px #0b1530, 0 0 0 4px rgba(255, 255, 255, .15); }
html[data-theme="dark"] .testimonial-area .gr-stars .off { color: rgba(255, 255, 255, .2); }
@media (max-width: 575px) {
    .testimonial-area .gr-summary { padding: 10px 18px; gap: 10px; }
    .testimonial-area .gr-score { font-size: 28px; }
}

/* ======================= frequently asked questions (.tq-faq) ======================= */
/* heading and a support card on the left (sticky on desktop), numbered question cards on the right */
.tq-faq {
    --tq-navy: #06256f;
    --tq-blue: #0d4ecd;
    --tq-text: #4a5468;
    --tq-card: #ffffff;
    --tq-edge: rgba(6, 37, 111, .09);
    --tq-tint: rgba(13, 78, 205, .07);

    position: relative;
    padding: 50px 0 90px;
}

/* ---------- left column ---------- */
.tq-faq__aside {
    position: sticky;
    top: 120px;
}

.tq-faq__lead {
    margin: 16px 0 28px;
    padding-left: 18px;
    border-left: 3px solid #e0a514;
    color: var(--tq-text);
    font-size: 16.5px;
    line-height: 1.75;
}

/* navy support card */
.tq-faq__help {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px 18px;
    padding: 26px;
    border-radius: 24px;
    background: radial-gradient(rgba(255, 255, 255, .1) 1.5px, transparent 2px) 0 0 / 18px 18px,
        radial-gradient(circle at 90% 10%, rgba(243, 188, 30, .35), transparent 45%),
        linear-gradient(150deg, #116bdd, #06256f 70%);
    color: #fff;
    box-shadow: 0 24px 50px rgba(6, 37, 111, .2);
}

.tq-faq__help-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #f5d65f, #e0a514 55%, #d5902a);
    color: #fff;
    font-size: 24px;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .1), 0 12px 24px rgba(0, 0, 0, .25);
    text-shadow: 0 1px 2px rgba(60, 30, 0, .45);
}

.tq-faq__help h5 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 19px;
    font-weight: 800;
}

.tq-faq__help p {
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 14.5px;
    line-height: 1.55;
}

.tq-faq__cta {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    border-radius: 50px;
    background: #fff;
    color: #06256f;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background .25s ease, color .25s ease;
}

.tq-faq__cta:hover {
    background: linear-gradient(135deg, #f5d65f, #e0a514 55%, #d5902a);
    color: #fff;
}

.tq-faq__cta i {
    transition: transform .25s ease;
}

.tq-faq__cta:hover i {
    transform: translateX(4px);
}

/* ---------- question cards ---------- */
.tq-faq__list {
    display: grid;
    gap: 14px;
}

.tq-faq__item {
    border: 1.5px solid transparent;
    border-radius: 20px;
    background: linear-gradient(var(--tq-card), var(--tq-card)) padding-box,
        linear-gradient(var(--tq-edge), var(--tq-edge)) border-box;
    box-shadow: 0 8px 22px rgba(6, 37, 111, .05);
    transition: box-shadow .3s ease;
}

.tq-faq__item:hover {
    box-shadow: 0 14px 32px rgba(6, 37, 111, .1);
}

/* open question: blue-to-gold border, same as the cards elsewhere on the page */
.tq-faq__item:has(.tq-faq__btn:not(.collapsed)) {
    background: linear-gradient(var(--tq-card), var(--tq-card)) padding-box,
        linear-gradient(135deg, #0d4ecd, #e0a514) border-box;
    box-shadow: 0 18px 40px rgba(6, 37, 111, .12);
}

.tq-faq__head {
    margin: 0;
}

.tq-faq__btn {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 18px 20px;
    border: 0;
    background: none;
    color: var(--tq-navy);
    text-align: left;
    cursor: pointer;
}

.tq-faq__num {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--tq-tint);
    color: var(--tq-blue);
    font-size: 15px;
    font-weight: 800;
    transition: background .3s ease, color .3s ease;
}

.tq-faq__q {
    flex: 1;
    min-width: 0;
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.4;
    transition: color .3s ease;
}

/* plus that turns into a cross when open */
.tq-faq__icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--tq-tint);
    color: var(--tq-blue);
    font-size: 14px;
    transition: background .3s ease, color .3s ease;
}

.tq-faq__icon i {
    transition: transform .3s ease;
}

.tq-faq__btn:hover .tq-faq__q {
    color: var(--tq-blue);
}

.tq-faq__btn:not(.collapsed) .tq-faq__num {
    background: linear-gradient(135deg, #116bdd, #06256f);
    color: #fff;
}

.tq-faq__btn:not(.collapsed) .tq-faq__icon {
    background: linear-gradient(135deg, #f5d65f, #e0a514 55%, #d5902a);
    color: #fff;
}

.tq-faq__btn:not(.collapsed) .tq-faq__icon i {
    transform: rotate(135deg);
}

.tq-faq__btn:focus-visible {
    outline: 2px solid var(--tq-blue);
    outline-offset: -2px;
    border-radius: 20px;
}

/* answer, lined up under the question text */
.tq-faq__body {
    margin: 0 20px 0 82px;
    padding: 2px 54px 22px 0;
    color: var(--tq-text);
    font-size: 15.5px;
    line-height: 1.75;
}

/* answers are pasted from a rich-text editor with fixed fonts, sizes and colours; make them match the site */
.tq-faq__body *,
.tq-faq__body font {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    background: transparent !important;
}

.tq-faq__body p {
    margin: 0 0 10px;
}

.tq-faq__body> :last-child {
    margin-bottom: 0;
}

.tq-faq__body ul,
.tq-faq__body ol {
    margin: 0 0 10px;
    padding-left: 20px;
}

@media (max-width: 991px) {
    .tq-faq {
        padding-bottom: 60px;
    }

    .tq-faq__aside {
        position: static;
    }
}

@media (max-width: 575px) {
    .tq-faq__help {
        padding: 22px 20px;
        border-radius: 22px;
    }

    .tq-faq__btn {
        gap: 12px;
        padding: 14px;
    }

    .tq-faq__num {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 13.5px;
    }

    .tq-faq__q {
        font-size: 15.5px;
    }

    .tq-faq__icon {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .tq-faq__body {
        margin: 0 14px;
        padding: 2px 0 18px;
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .tq-faq__item,
    .tq-faq__num,
    .tq-faq__q,
    .tq-faq__icon,
    .tq-faq__icon i,
    .tq-faq__cta,
    .tq-faq__cta i {
        transition: none;
    }
}

html[data-theme="dark"] .tq-faq {
    --tq-navy: #ffffff;
    --tq-blue: #4d8fff;
    --tq-text: #c9d1db;
    --tq-card: #161616;
    --tq-edge: rgba(255, 255, 255, .1);
    --tq-tint: rgba(77, 143, 255, .12);
}

html[data-theme="dark"] .tq-faq__item {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
}

html[data-theme="dark"] .tq-faq__item:has(.tq-faq__btn:not(.collapsed)) {
    background: linear-gradient(var(--tq-card), var(--tq-card)) padding-box,
        linear-gradient(135deg, #4d8fff, #f3bc1e) border-box;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}

html[data-theme="dark"] .tq-faq__help {
    box-shadow: 0 24px 50px rgba(0, 0, 0, .55);
}

/* ======================= our courses (.tq-courses) ======================= */
/* compact course cards in the owl slider: image with tag + lecture count on it, then title, hours/language and a link */
.tq-courses {
    --tq-navy: #06256f;
    --tq-blue: #0d4ecd;
    --tq-text: #4a5468;
    --tq-card: #ffffff;
    --tq-edge: rgba(6, 37, 111, .09);
    --tq-tint: rgba(13, 78, 205, .07);
    --tq-dot: rgba(6, 37, 111, .18);

    position: relative;
    padding: 36px 0 30px;
}

.tq-courses .site-heading {
    margin-bottom: 14px;
}

/* room for the card shadows, which the slider would otherwise cut off */
.tq-courses__slider .owl-stage-outer {
    padding: 6px 0 20px;
}

.tq-course {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px;
    border: 1.5px solid transparent;
    border-radius: 22px;
    background: linear-gradient(var(--tq-card), var(--tq-card)) padding-box,
        linear-gradient(var(--tq-edge), var(--tq-edge)) border-box;
    box-shadow: 0 10px 26px rgba(6, 37, 111, .07);
    transition: box-shadow .3s ease;
}

/* blue-to-gold border on hover (no movement), same as the package, founder and instructor cards */
.tq-course:hover {
    background: linear-gradient(var(--tq-card), var(--tq-card)) padding-box,
        linear-gradient(135deg, #0d4ecd, #e0a514) border-box;
    box-shadow: 0 18px 38px rgba(6, 37, 111, .14);
}

/* ---------- image ---------- */
.tq-course__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 15px;
    background: #eef2fb;
}

.tq-course__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.tq-course:hover .tq-course__media img {
    transform: scale(1.07);
}

.tq-course__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 37, 111, .18), transparent 35%, rgba(6, 37, 111, .55));
    pointer-events: none;
}

.tq-course__tag,
.tq-course__lectures {
    position: absolute;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.tq-course__tag {
    top: 10px;
    left: 10px;
    background: linear-gradient(135deg, #f5d65f, #e0a514 55%, #d5902a);
    color: #3a2600;
}

.tq-course__lectures {
    right: 10px;
    bottom: 10px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--tq-navy);
}

.tq-course__lectures i {
    color: var(--tq-blue);
}

/* ---------- body ---------- */
.tq-course__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 12px 4px 4px;
}

.tq-course__title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    /* two lines at most, so every card in the row stays the same height */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 1.65em;
}

.tq-course__title a {
    color: var(--tq-navy);
    text-transform: capitalize;
    transition: color .2s ease;
}

.tq-course:hover .tq-course__title a {
    color: var(--tq-blue);
}

.tq-course__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tq-course__meta li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 50px;
    background: var(--tq-tint);
    border: 1px solid rgba(13, 78, 205, .14);
    color: var(--tq-text);
    font-size: 12.5px;
    font-weight: 600;
}

.tq-course__meta li i {
    color: var(--tq-blue);
}

.tq-course__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed var(--tq-edge);
    color: var(--tq-navy);
    font-size: 14px;
    font-weight: 800;
}

.tq-course__cta i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d4ecd, #06256f);
    color: #fff;
    font-size: 12px;
    transition: transform .3s ease, background .3s ease;
}

.tq-course__cta:hover {
    color: var(--tq-blue);
}

.tq-course:hover .tq-course__cta i {
    background: linear-gradient(135deg, #f5d65f, #e0a514);
    color: #3a2600;
    transform: translateX(3px);
}

/* ---------- slider dots: small navy dots, the active one a wide gold pill ---------- */
.tq-courses__slider .owl-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 2px;
}

.tq-courses__slider .owl-dots .owl-dot span {
    display: block;
    width: 9px;
    height: 9px;
    margin: 0;
    border-radius: 50px;
    background: var(--tq-dot);
    transition: width .3s ease, background .3s ease;
}

.tq-courses__slider .owl-dots .owl-dot.active span {
    width: 28px;
    background: linear-gradient(90deg, #f5d65f, #e0a514 55%, #d5902a);
}

@media (max-width: 575px) {
    .tq-courses {
        padding: 28px 0 22px;
    }

    .tq-course__title {
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .tq-course,
    .tq-course__media img,
    .tq-course__cta i,
    .tq-courses__slider .owl-dots .owl-dot span {
        transition: none;
    }
}

html[data-theme="dark"] .tq-courses {
    --tq-navy: #ffffff;
    --tq-blue: #4d8fff;
    --tq-text: #c9d1db;
    --tq-card: #161616;
    --tq-edge: rgba(255, 255, 255, .1);
    --tq-tint: rgba(77, 143, 255, .1);
    --tq-dot: rgba(255, 255, 255, .22);
}

html[data-theme="dark"] .tq-course {
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}

html[data-theme="dark"] .tq-course:hover {
    background: linear-gradient(var(--tq-card), var(--tq-card)) padding-box,
        linear-gradient(135deg, #4d8fff, #f3bc1e) border-box;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .6);
}

html[data-theme="dark"] .tq-course__media {
    background: #1f1f1f;
}

html[data-theme="dark"] .tq-course__meta li {
    border-color: rgba(77, 143, 255, .25);
}

html[data-theme="dark"] .tq-course__lectures {
    background: rgba(22, 22, 22, .88);
    color: #fff;
}

html[data-theme="dark"] .tq-course__cta i {
    background: linear-gradient(135deg, #4d8fff, #0d4ecd);
}

/* equal-height cards: the owl stage becomes a flex row so every card stretches to the tallest one */
.tq-courses__slider .owl-stage {
    display: flex;
}

.tq-courses__slider .owl-item {
    display: flex;
}

.tq-courses__slider .owl-item .tq-course {
    width: 100%;
}

/* ======================= about page ======================= */
/* mission/vision/values, 3 steps and the closing call to action; the other sections reuse the home page partials */
.tq-apillars,
.tq-asteps,
.tq-acta {
    --tq-navy: #06256f;
    --tq-blue: #0d4ecd;
    --tq-text: #4a5468;
    --tq-card: #ffffff;
    --tq-edge: rgba(6, 37, 111, .09);
    --tq-tint: rgba(13, 78, 205, .07);
}

/* ---------- stats strip ---------- */
.tq-apillar__icon,
.tq-astep__icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: linear-gradient(135deg, #0d4ecd, #06256f);
    color: #fff;
    font-size: 20px;
    box-shadow: 0 8px 18px rgba(13, 78, 205, .28);
}

.tq-apillar__icon--gold {
    background: linear-gradient(135deg, #f5d65f, #e0a514 55%, #d5902a);
    color: #3a2600;
    box-shadow: 0 8px 18px rgba(224, 165, 20, .32);
}

/* ---------- mission / vision / values ---------- */
.tq-apillars {
    padding: 30px 0 14px;
}

.tq-apillars__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.tq-apillar {
    position: relative;
    overflow: hidden;
    padding: 24px 22px;
    border: 1.5px solid transparent;
    border-radius: 22px;
    background: linear-gradient(var(--tq-card), var(--tq-card)) padding-box,
        linear-gradient(var(--tq-edge), var(--tq-edge)) border-box;
    box-shadow: 0 10px 26px rgba(6, 37, 111, .07);
    transition: box-shadow .3s ease;
}

/* soft glow in the corner of each card */
.tq-apillar::after {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(rgba(13, 78, 205, .12), transparent 70%);
    pointer-events: none;
}

.tq-apillar:hover {
    background: linear-gradient(var(--tq-card), var(--tq-card)) padding-box,
        linear-gradient(135deg, #0d4ecd, #e0a514) border-box;
    box-shadow: 0 18px 38px rgba(6, 37, 111, .14);
}

.tq-apillar h4 {
    margin: 16px 0 8px;
    color: var(--tq-navy);
    font-size: 21px;
    font-weight: 800;
}

.tq-apillar p {
    margin: 0;
    color: var(--tq-text);
    line-height: 1.65;
}

/* ---------- how it works ---------- */
.tq-asteps {
    padding: 34px 0 16px;
}

.tq-asteps .site-heading {
    margin-bottom: 22px;
}

.tq-asteps__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* dashed line running behind the three icons */
.tq-asteps__grid::before {
    content: "";
    position: absolute;
    top: 53px;
    left: 16%;
    right: 16%;
    border-top: 2px dashed rgba(13, 78, 205, .25);
}

.tq-astep {
    position: relative;
    padding: 22px 20px 24px;
    text-align: center;
    border: 1.5px solid transparent;
    border-radius: 22px;
    background: linear-gradient(var(--tq-card), var(--tq-card)) padding-box,
        linear-gradient(var(--tq-edge), var(--tq-edge)) border-box;
    box-shadow: 0 10px 26px rgba(6, 37, 111, .07);
}

.tq-astep:hover {
    background: linear-gradient(var(--tq-card), var(--tq-card)) padding-box,
        linear-gradient(135deg, #0d4ecd, #e0a514) border-box;
}

.tq-astep__num {
    position: absolute;
    top: 12px;
    right: 18px;
    color: rgba(13, 78, 205, .13);
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
}

.tq-astep__icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    border-radius: 50%;
    font-size: 24px;
    box-shadow: 0 0 0 7px var(--tq-card), 0 0 0 8px rgba(13, 78, 205, .2), 0 10px 22px rgba(13, 78, 205, .3);
}

.tq-astep h4 {
    margin: 0 0 6px;
    color: var(--tq-navy);
    font-size: 20px;
    font-weight: 800;
}

.tq-astep p {
    margin: 0;
    color: var(--tq-text);
    line-height: 1.6;
}

/* ---------- closing call to action ---------- */
.tq-acta {
    padding: 14px 0 44px;
}

.tq-acta__box {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 34px 38px;
    border-radius: 26px;
    background: radial-gradient(rgba(255, 255, 255, .09) 1.5px, transparent 2px) 0 0 / 20px 20px,
        radial-gradient(circle at 90% 10%, rgba(243, 188, 30, .38), transparent 45%),
        linear-gradient(135deg, #0d4ecd, #06256f 75%);
    box-shadow: 0 22px 46px rgba(6, 37, 111, .25);
}

.tq-acta__ring {
    position: absolute;
    left: -70px;
    bottom: -110px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 42px solid rgba(255, 255, 255, .06);
    pointer-events: none;
}

.tq-acta__copy,
.tq-acta__btns {
    position: relative;
}

.tq-acta__copy h2 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.25;
}

.tq-acta__copy p {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 16px;
}

.tq-acta__btns {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    gap: 12px;
}

.tq-acta__btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 24px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 800;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.tq-acta__btn--gold {
    background: linear-gradient(135deg, #f5d65f, #e0a514 55%, #d5902a);
    color: #3a2600;
    box-shadow: 0 10px 22px rgba(224, 165, 20, .35);
}

.tq-acta__btn--gold:hover {
    color: #3a2600;
    transform: translateY(-2px);
}

.tq-acta__btn--line {
    border: 1.5px solid rgba(255, 255, 255, .55);
    color: #fff;
}

.tq-acta__btn--line:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

@media (max-width: 991px) {
    .tq-apillars__grid,
    .tq-asteps__grid {
        grid-template-columns: 1fr;
    }

    .tq-asteps__grid::before {
        display: none;
    }

    .tq-acta__box {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 24px;
    }
}

@media (max-width: 575px) {
    .tq-acta__copy h2 {
        font-size: 24px;
    }

    .tq-acta__btns,
    .tq-acta__btn {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {

    .tq-apillar,
    .tq-acta__btn {
        transition: none;
    }
}

html[data-theme="dark"] .tq-apillars,
html[data-theme="dark"] .tq-asteps {
    --tq-navy: #ffffff;
    --tq-blue: #4d8fff;
    --tq-text: #c9d1db;
    --tq-card: #161616;
    --tq-edge: rgba(255, 255, 255, .1);
    --tq-tint: rgba(77, 143, 255, .1);
}

html[data-theme="dark"] .tq-apillar,
html[data-theme="dark"] .tq-astep {
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}

html[data-theme="dark"] .tq-apillar:hover,
html[data-theme="dark"] .tq-astep:hover {
    background: linear-gradient(var(--tq-card), var(--tq-card)) padding-box,
        linear-gradient(135deg, #4d8fff, #f3bc1e) border-box;
}

html[data-theme="dark"] .tq-astep__num {
    color: rgba(255, 255, 255, .1);
}

/* about page: every section gets the same 50px top and bottom padding (30px on phones) */
.tq-aboutpage > section,
.tq-aboutpage > .bg-img > section {
    padding-top: 50px;
    padding-bottom: 50px;
}

@media (max-width: 575px) {

    .tq-aboutpage > section,
    .tq-aboutpage > .bg-img > section {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

/* ======================= plan detail page (.tq-pd) ======================= */
/* navy hero with the package box, price and Buy Now; then the highlights, the included courses (reusing the home .tq-course card) and a closing banner */
.tq-pd,
.tq-pdpoints {
    --tq-navy: #06256f;
    --tq-blue: #0d4ecd;
    --tq-text: #4a5468;
    --tq-card: #ffffff;
    --tq-edge: rgba(6, 37, 111, .09);
    --tq-tint: rgba(13, 78, 205, .07);
}

.tq-pd {
    position: relative;
    overflow: hidden;
    padding: 50px 0;
    background: radial-gradient(rgba(255, 255, 255, .09) 1.5px, transparent 2px) 0 0 / 22px 22px,
        radial-gradient(circle at 88% 8%, rgba(243, 188, 30, .35), transparent 45%),
        linear-gradient(135deg, #0d4ecd, #06256f 72%);
}

.tq-pd__ring {
    position: absolute;
    left: -130px;
    bottom: -170px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 60px solid rgba(255, 255, 255, .05);
    pointer-events: none;
}

.tq-pd .container {
    position: relative;
}

.tq-pd__crumbs {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
    padding: 6px 16px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    font-weight: 600;
}

.tq-pd__crumbs a {
    color: #fff;
}

.tq-pd__crumbs a:hover {
    color: #f5d65f;
}

.tq-pd__crumbs i.fa-chevron-right {
    font-size: 10px;
    opacity: .7;
}

.tq-pd__tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    border-radius: 50px;
    background: linear-gradient(135deg, #f5d65f, #e0a514 55%, #d5902a);
    color: #3a2600;
    font-size: 13px;
    font-weight: 800;
}

.tq-pd__title {
    margin: 14px 0 10px;
    color: #fff;
    font-size: 46px;
    font-weight: 800;
    line-height: 1.12;
}

.tq-pd__rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, .85);
}

.tq-pd__rating strong {
    color: #fff;
    font-size: 16px;
}

.tq-pd__stars {
    position: relative;
    display: inline-block;
    font-size: 15px;
    letter-spacing: 2px;
    white-space: nowrap;
}

.tq-pd__stars-base {
    color: rgba(255, 255, 255, .25);
}

.tq-pd__stars-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--fill, 100%);
    overflow: hidden;
    color: #f5c542;
}

.tq-pd__desc {
    max-width: 560px;
    margin: 0 0 16px;
    color: rgba(255, 255, 255, .82);
    font-size: 16.5px;
    line-height: 1.65;
}

.tq-pd__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.tq-pd__facts li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
}

.tq-pd__facts li i {
    color: #f5d65f;
}

.tq-pd__buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
}

.tq-pd__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    color: #fff;
}

.tq-pd__price small {
    flex-basis: 100%;
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
    font-weight: 600;
}

.tq-pd__price del {
    text-decoration-thickness: 2px;
}

.tq-pd__price strong {
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
}

.tq-pd__off {
    padding: 3px 11px;
    border-radius: 50px;
    background: #1fb36b;
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
}

.tq-pd__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    border-radius: 50px;
    background: linear-gradient(135deg, #f5d65f, #e0a514 55%, #d5902a);
    color: #3a2600;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 12px 26px rgba(224, 165, 20, .4);
    transition: transform .25s ease, box-shadow .25s ease;
}

.tq-pd__btn:hover {
    color: #3a2600;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(224, 165, 20, .5);
}

.tq-pd__save {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
}

.tq-pd__save i {
    margin-right: 5px;
    color: #f5d65f;
}

/* package box on a soft glow */
.tq-pd__visual {
    position: relative;
    display: grid;
    place-items: center;
}

.tq-pd__glow {
    position: absolute;
    width: 80%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(rgba(245, 214, 95, .45), transparent 68%);
    filter: blur(8px);
}

.tq-pd__visual img {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: auto;
    border-radius: 22px;
    filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .35));
}

/* ---------- highlights ---------- */
.tq-pdpoints {
    padding: 28px 0 0;
}

.tq-pdpoints__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.tq-pdpoints__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1.5px solid transparent;
    border-radius: 50px;
    background: linear-gradient(var(--tq-card), var(--tq-card)) padding-box,
        linear-gradient(135deg, #0d4ecd, #e0a514) border-box;
    box-shadow: 0 8px 20px rgba(6, 37, 111, .07);
    color: var(--tq-navy);
    font-size: 14.5px;
    font-weight: 700;
}

.tq-pdpoints__item i {
    color: #1fb36b;
}

/* ---------- included courses ---------- */
.tq-pdcourses {
    padding: 50px 0;
}

.tq-pdcourses .site-heading {
    margin-bottom: 22px;
}

.tq-pdcourses__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 300px));
    justify-content: center;
    gap: 18px;
}

/* same 50px (30px on phones) rhythm as the other sections */
.tq-planpage > .tq-acta {
    padding: 50px 0;
}

@media (max-width: 991px) {
    .tq-pd__title {
        font-size: 38px;
    }

    .tq-pd__visual img {
        max-width: 320px;
    }
}

@media (max-width: 575px) {
    .tq-pd {
        padding: 30px 0;
    }

    .tq-pd__crumbs {
        margin-bottom: 18px;
    }

    .tq-pd__title {
        font-size: 31px;
    }

    .tq-pd__desc {
        font-size: 15.5px;
    }

    .tq-pd__price strong {
        font-size: 34px;
    }

    .tq-pd__btn {
        width: 100%;
        justify-content: center;
    }

    .tq-pdpoints {
        padding-top: 20px;
    }

    .tq-pdcourses {
        padding: 30px 0;
    }

    .tq-planpage > .tq-acta {
        padding: 30px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tq-pd__btn {
        transition: none;
    }
}

html[data-theme="dark"] .tq-pdpoints {
    --tq-navy: #ffffff;
    --tq-blue: #4d8fff;
    --tq-text: #c9d1db;
    --tq-card: #161616;
    --tq-edge: rgba(255, 255, 255, .1);
    --tq-tint: rgba(77, 143, 255, .1);
}

/* ---------- plan detail hero (always light, in both themes) ---------- */
.site-breadcrumb.tq-planhero,
html[data-theme="dark"] .site-breadcrumb.tq-planhero {
    background: linear-gradient(135deg, #eef4ff 0%, #ffffff 55%, #fff6dc 100%) !important;
    text-align: left;
    overflow: hidden;
    align-items: stretch;
    padding-bottom: 70px;
    color: #4a5468;
}

.tq-planhero .container {
    position: relative;
    z-index: 1;
}

.tq-planhero__ring {
    position: absolute;
    right: -120px;
    top: -120px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    border: 70px solid rgba(13, 78, 205, .06);
    pointer-events: none;
}

.tq-planhero__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 50px;
    background: rgba(224, 165, 20, .16);
    color: #a87300;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.tq-planhero .course-single-header .title {
    margin: 16px 0 12px;
    font-size: clamp(30px, 4.4vw, 48px);
    font-weight: 800;
    line-height: 1.15;
    color: #06256f;
}

.tq-planhero .course-single-header p.tq-planhero__desc {
    max-width: 620px;
    margin-bottom: 18px;
    color: #4a5468;
}

.tq-planhero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.tq-planhero__facts li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 50px;
    background: #fff;
    border: 1px solid rgba(6, 37, 111, .08);
    box-shadow: 0 6px 16px rgba(6, 37, 111, .06);
    color: #06256f;
    font-size: 14px;
    font-weight: 600;
}

.tq-planhero__facts i {
    color: #0d4ecd;
}

.tq-planhero__buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
}

.tq-planhero .plan-price {
    margin: 0;
}

.tq-planhero .plan-price .old-price {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 600;
    color: #7a8499;
}

.tq-planhero .plan-price .current-price {
    margin: 0;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    color: #a87300;
}

.tq-planhero__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 60px;
    background: linear-gradient(135deg, #0d4ecd, #06256f);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 12px 26px rgba(13, 78, 205, .3);
    transition: transform .2s ease, box-shadow .2s ease;
}

.tq-planhero__btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(13, 78, 205, .4);
}

.tq-planhero__visual {
    padding: 10px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(6, 37, 111, .08);
    box-shadow: 0 24px 50px rgba(6, 37, 111, .16);
    transform: rotate(2deg);
}

.tq-planhero__visual img {
    display: block;
    width: 100%;
    border-radius: 16px;
}

@media (max-width: 991px) {
    .tq-planhero__visual {
        max-width: 360px;
        transform: none;
    }
}

.tq-planhero__visual {
    position: relative;
}

.tq-planhero__visual img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #eef4ff;
}

.tq-planhero__badge {
    position: absolute;
    left: -18px;
    bottom: 26px;
    padding: 10px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f5c542, #e0a514);
    color: #06256f;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 12px 24px rgba(224, 165, 20, .4);
    transform: rotate(-2deg);
}

.tq-planhero__badge strong {
    display: block;
    font-size: 22px;
    font-weight: 800;
}

/* ---------- plan hero: modern pass ---------- */
.site-breadcrumb.tq-planhero,
html[data-theme="dark"] .site-breadcrumb.tq-planhero {
    background:
        linear-gradient(rgba(6, 37, 111, .045) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, rgba(6, 37, 111, .045) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(160deg, #f4f8ff 0%, #ffffff 50%, #fff8e6 100%) !important;
}

.tq-planhero__ring {
    display: none;
}

.tq-planhero__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}

.tq-planhero__blob--a {
    width: 380px;
    height: 380px;
    right: 6%;
    top: 8%;
    background: rgba(13, 78, 205, .22);
}

.tq-planhero__blob--b {
    width: 300px;
    height: 300px;
    left: -80px;
    bottom: -60px;
    background: rgba(224, 165, 20, .28);
}

.tq-planhero__tag {
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(224, 165, 20, .4);
    backdrop-filter: blur(8px);
}

.tq-planhero .course-single-header .title {
    background: linear-gradient(100deg, #06256f 30%, #0d4ecd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: -.5px;
}

.tq-planhero__facts li {
    background: rgba(255, 255, 255, .65);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 8px 24px rgba(6, 37, 111, .08);
}

.tq-planhero__buy {
    display: inline-flex;
    padding: 18px 22px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .7);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 18px 40px rgba(6, 37, 111, .1);
}

.tq-planhero__btn {
    background: linear-gradient(135deg, #0d4ecd, #3b82f6);
}

.tq-planhero__visual {
    padding: 8px;
    border-radius: 28px;
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 30px 60px rgba(6, 37, 111, .2);
    transform: rotate(0);
    transition: transform .4s ease;
}

.tq-planhero__visual:hover {
    transform: translateY(-6px);
}

.tq-planhero__visual img {
    border-radius: 20px;
}

.tq-planhero__float {
    position: absolute;
    right: -14px;
    top: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 30px rgba(6, 37, 111, .18);
    color: #06256f;
    font-size: 13px;
    font-weight: 700;
    animation: tqPlanFloat 4s ease-in-out infinite;
}

.tq-planhero__float i {
    color: #16a34a;
}

@keyframes tqPlanFloat {
    50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
    .tq-planhero__float { animation: none; }
}

/* phones and tablets: style.css gives .video-wrap a fixed height, so let the box follow the image,
   show the whole picture (no 4:3 crop) and keep the pills inside the screen */
@media (max-width: 991.98px) {
    .tq-planhero__visual {
        height: auto;
        margin: 28px auto 0;
    }

    .tq-planhero__visual img {
        height: auto;
        max-height: 70vh;
        aspect-ratio: auto;
        object-fit: contain;
    }

    .tq-planhero__float {
        right: 10px;
        top: 14px;
    }

    .tq-planhero__badge {
        left: 10px;
        bottom: 14px;
    }
}

/* ---------- checkout ---------- */
.tq-checkout .checkout-area {
    background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 40%);
}

.tq-checkout .checkout-area .card {
    border: 1px solid var(--tq-card-border);
    border-radius: 22px;
    background: var(--tq-card);
    box-shadow: 0 18px 44px rgba(6, 37, 111, .08);
    overflow: hidden;
    position: relative;
}

.tq-checkout .checkout-area .card-header {
    padding: 22px 24px 16px;
    border-bottom: 1px dashed var(--tq-card-border);
}

.tq-checkout .checkout-area .card-header h4 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--tq-navy);
}

.tq-checkout .checkout-area .card-body {
    padding: 22px 24px;
}

.tq-co-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tq-blue), var(--tq-navy));
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(13, 78, 205, .3);
}

.tq-checkout .checkout-form .form-control {
    border-radius: 14px;
    background: #f6f9ff;
    border: 1px solid rgba(6, 37, 111, .1);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.tq-checkout .checkout-form .form-control:focus {
    background: #fff;
    border-color: var(--tq-blue);
    box-shadow: 0 0 0 4px rgba(13, 78, 205, .12);
}

.tq-checkout .checkout-form label {
    font-weight: 600;
    color: var(--tq-navy);
}

.tq-checkout .terms-row {
    border-radius: 14px;
}

.tq-co-side {
    position: sticky;
    top: 110px;
}

.tq-co-plan {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, #06256f, #0d4ecd);
    color: #fff;
    box-shadow: 0 18px 40px rgba(6, 37, 111, .28);
}

.tq-co-plan img {
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    border-radius: 16px;
    object-fit: cover;
    background: #fff;
}

.tq-co-plan h5 {
    margin: 2px 0 4px;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
}

.tq-co-plan small {
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
}

.tq-co-plan__tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 50px;
    background: rgba(224, 165, 20, .95);
    color: #06256f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.tq-checkout .checkout-summary-table th {
    padding: 10px 0;
    font-size: 15px;
    color: var(--tq-text);
}

.tq-checkout .checkout-summary-table th:last-child {
    text-align: right;
    color: var(--tq-navy);
}

.tq-checkout .checkout-summary-table tfoot th {
    padding-top: 16px;
    font-size: 19px;
    font-weight: 800;
    color: var(--tq-navy);
}

.tq-checkout .checkout-summary-table tfoot th:last-child {
    color: var(--tq-gold-text);
}

.tq-checkout .payment-method-item {
    border-radius: 16px;
    padding: 14px 16px;
    background: #f6f9ff;
}

.tq-checkout .payment-method-item:hover {
    border-color: var(--tq-blue);
}

.tq-checkout .payment-method-item.active-payment {
    background: #fff;
    border-color: var(--tq-blue);
    box-shadow: 0 0 0 3px rgba(13, 78, 205, .12);
}

.tq-checkout #payment_page .theme-btn {
    padding: 16px 24px;
    border-radius: 60px;
    font-weight: 700;
    box-shadow: 0 14px 28px rgba(13, 78, 205, .28);
}

.tq-co-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tq-co-trust li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tq-text);
}

.tq-co-trust i {
    color: #16a34a;
}

@media (max-width: 991px) {
    .tq-co-side {
        position: static;
    }
}

html[data-theme="dark"] .tq-checkout .checkout-area {
    background: transparent;
}

html[data-theme="dark"] .tq-checkout .checkout-area .card {
    background: #0f1a33;
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .4);
}

html[data-theme="dark"] .tq-checkout .checkout-area .card-header {
    border-bottom-color: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] .tq-checkout .checkout-area .card-header h4,
html[data-theme="dark"] .tq-checkout .checkout-form label,
html[data-theme="dark"] .tq-checkout .checkout-summary-table th,
html[data-theme="dark"] .tq-checkout .checkout-summary-table th:last-child,
html[data-theme="dark"] .tq-checkout .checkout-summary-table tfoot th {
    color: #fff;
}

html[data-theme="dark"] .tq-checkout .checkout-summary-table tfoot th:last-child {
    color: #f5c542;
}

html[data-theme="dark"] .tq-checkout .checkout-form .form-control,
html[data-theme="dark"] .tq-checkout .payment-method-item {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
}

html[data-theme="dark"] .tq-checkout .payment-method-item.active-payment {
    background: rgba(13, 78, 205, .2);
    border-color: #3b82f6;
}

html[data-theme="dark"] .tq-co-trust li {
    color: rgba(255, 255, 255, .8);
}

.tq-checkout {
    --tq-navy: #06256f;
    --tq-blue: #0d4ecd;
    --tq-gold: #e0a514;
    --tq-gold-text: #a87300;
    --tq-text: #4a5468;
    --tq-card: #ffffff;
    --tq-card-border: rgba(6, 37, 111, .08);
}

/* ---------- all courses page ---------- */
.tq-allcourses {
    --tq-navy: #06256f;
    --tq-blue: #0d4ecd;
    --tq-text: #4a5468;
    --tq-card: #ffffff;
    --tq-edge: rgba(6, 37, 111, .09);
    padding: 60px 0 70px;
}

.tq-allcourses .site-heading p {
    max-width: 520px;
    margin: 10px auto 0;
    color: var(--tq-text);
}

.tq-allcourses__search {
    position: relative;
    max-width: 460px;
    margin: 0 auto 34px;
}

.tq-allcourses__search i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tq-blue);
    pointer-events: none;
}

.tq-allcourses__search input {
    width: 100%;
    height: 54px;
    padding: 0 22px 0 50px;
    border-radius: 60px;
    border: 1px solid var(--tq-edge);
    background: var(--tq-card);
    box-shadow: 0 12px 30px rgba(6, 37, 111, .08);
    color: var(--tq-navy);
    font-weight: 500;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.tq-allcourses__search input:focus {
    border-color: var(--tq-blue);
    box-shadow: 0 0 0 4px rgba(13, 78, 205, .12);
}

.tq-allcourses__empty {
    margin: 30px 0 0;
    text-align: center;
    font-weight: 600;
    color: var(--tq-text);
}

.tq-allcourses .tq-pdcourses__grid {
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}

html[data-theme="dark"] .tq-allcourses__search input {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    color: #fff;
}

html[data-theme="dark"] .tq-allcourses .site-heading p,
html[data-theme="dark"] .tq-allcourses__empty {
    color: rgba(255, 255, 255, .75);
}

/* ======================= course details ======================= */
.tq-cd {
    --tq-navy: #06256f;
    --tq-blue: #0d4ecd;
    --tq-gold: #e0a514;
    --tq-gold-text: #a87300;
    --tq-text: #4a5468;
    --tq-card: #ffffff;
    --tq-edge: rgba(6, 37, 111, .09);
    --tq-soft: #f4f8ff;
    padding: 50px 0 70px;
    background: linear-gradient(180deg, #f4f8ff 0, #fff 380px);
}

.tq-cd__main,
.tq-cd__side {
    background: var(--tq-card);
    border: 1px solid var(--tq-edge);
    border-radius: 26px;
    box-shadow: 0 18px 44px rgba(6, 37, 111, .08);
}

.tq-cd__main {
    padding: 14px 14px 30px;
}

.tq-cd__cover {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16 / 8;
    background: var(--tq-soft);
}

.tq-cd__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tq-cd__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(6, 37, 111, .35));
    pointer-events: none;
}

.tq-cd__play {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: 74px;
    height: 74px;
    margin: -37px 0 0 -37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--tq-blue);
    font-size: 24px;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, .35), 0 16px 34px rgba(6, 37, 111, .35);
    transition: transform .25s ease;
}

.tq-cd__play:hover {
    transform: scale(1.08);
    color: var(--tq-blue);
}

.tq-cd__head,
.tq-cd__tabs,
.tq-cd__panes {
    padding-left: 18px;
    padding-right: 18px;
}

.tq-cd__head {
    padding-top: 24px;
}

.tq-cd__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 50px;
    background: rgba(224, 165, 20, .16);
    color: var(--tq-gold-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.tq-cd__title {
    margin: 14px 0 10px;
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--tq-navy);
}

.tq-cd__lead {
    margin: 0 0 14px;
    color: var(--tq-text);
}

.tq-cd__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 20px;
}

.tq-cd__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 50px;
    background: var(--tq-soft);
    border: 1px solid var(--tq-edge);
    color: var(--tq-navy);
    font-size: 14px;
    font-weight: 600;
}

.tq-cd__chip i {
    color: var(--tq-blue);
}

.tq-cd__chip--rating i {
    color: var(--tq-gold);
}

.tq-cd__by {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--tq-soft);
}

.tq-cd__by img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(6, 37, 111, .15);
}

.tq-cd__by small {
    display: block;
    font-size: 12px;
    color: var(--tq-text);
}

.tq-cd__by strong {
    color: var(--tq-navy);
}

.tq-cd__updated {
    margin-left: auto;
    font-size: 13px;
    color: var(--tq-text);
}

.tq-cd__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 26px 0 0;
    list-style: none;
    border-bottom: 1px solid var(--tq-edge);
}

.tq-cd__tabs .nav-link {
    position: relative;
    padding: 12px 18px;
    border: 0;
    background: transparent;
    color: var(--tq-text);
    font-weight: 700;
}

.tq-cd__tabs .nav-link small {
    margin-left: 4px;
    padding: 2px 8px;
    border-radius: 50px;
    background: var(--tq-soft);
    font-size: 11px;
}

.tq-cd__tabs .nav-link.active {
    color: var(--tq-blue);
}

.tq-cd__tabs .nav-link.active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--tq-blue), var(--tq-gold));
}

.tq-cd__panes {
    padding-top: 22px;
}

.tq-cd__prose {
    color: var(--tq-text);
    line-height: 1.8;
}

.tq-cd__empty {
    margin: 0;
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--tq-soft);
    color: var(--tq-text);
}

.tq-cd__lessons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tq-cd__lesson {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid var(--tq-edge);
    border-radius: 16px;
    background: var(--tq-card);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.tq-cd__lesson:hover,
.tq-cd__lesson.is-open {
    border-color: rgba(13, 78, 205, .4);
    box-shadow: 0 8px 20px rgba(13, 78, 205, .08);
}

.tq-cd__num {
    flex: 0 0 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tq-soft);
    color: var(--tq-blue);
    font-size: 13px;
    font-weight: 800;
}

.tq-cd__lesson.is-open .tq-cd__num {
    background: linear-gradient(135deg, var(--tq-blue), #06256f);
    color: #fff;
}

.tq-cd__ltitle {
    flex: 1;
    font-weight: 600;
    color: var(--tq-navy);
}

.tq-cd__ltype {
    font-size: 13px;
    color: var(--tq-text);
    white-space: nowrap;
}

.tq-cd__ltype i {
    color: var(--tq-blue);
}

.tq-cd__lock {
    color: #94a0b8;
}

.tq-cd__lesson.is-open .tq-cd__lock {
    color: #16a34a;
}

.tq-cd__inst {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
    border-radius: 18px;
    background: var(--tq-soft);
}

.tq-cd__inst img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 8px 18px rgba(6, 37, 111, .15);
}

.tq-cd__inst h4 {
    margin: 0 0 4px;
    color: var(--tq-navy);
}

.tq-cd__inst p {
    margin: 0 0 8px;
    color: var(--tq-text);
}

.tq-cd__side {
    position: sticky;
    top: 110px;
    padding: 26px 24px;
    overflow: hidden;
}

.tq-cd__side h4 {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 800;
    color: var(--tq-navy);
}

.tq-cd__inc {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.tq-cd__inc li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--tq-edge);
    color: var(--tq-text);
    font-size: 15px;
}

.tq-cd__inc li i {
    width: 20px;
    text-align: center;
    color: var(--tq-blue);
}

.tq-cd__inc li span {
    margin-left: auto;
    font-weight: 700;
    color: var(--tq-navy);
    text-align: right;
}

.tq-cd__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 24px;
    border-radius: 60px;
    background: linear-gradient(135deg, #0d4ecd, #06256f);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 14px 28px rgba(13, 78, 205, .3);
    transition: transform .2s ease;
}

.tq-cd__btn:hover {
    transform: translateY(-3px);
}

.tq-cd__note {
    margin: 10px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--tq-text);
}

.tq-cd__share {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed var(--tq-edge);
}

.tq-cd__share span {
    margin-right: auto;
    font-weight: 700;
    color: var(--tq-navy);
}

.tq-cd__share a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tq-soft);
    color: var(--tq-blue);
    transition: background .2s ease, color .2s ease;
}

.tq-cd__share a:hover {
    background: var(--tq-blue);
    color: #fff;
}

@media (max-width: 991px) {
    .tq-cd__side {
        position: static;
    }
}

@media (max-width: 575px) {
    .tq-cd__ltype,
    .tq-cd__updated {
        display: none;
    }
}

html[data-theme="dark"] .tq-cd {
    background: transparent;
    --tq-card: #0f1a33;
    --tq-edge: rgba(255, 255, 255, .1);
    --tq-soft: rgba(255, 255, 255, .06);
    --tq-text: rgba(255, 255, 255, .72);
    --tq-navy: #ffffff;
}

html[data-theme="dark"] .tq-cd__main,
html[data-theme="dark"] .tq-cd__side {
    box-shadow: 0 18px 44px rgba(0, 0, 0, .4);
}

html[data-theme="dark"] .tq-cd__tabs .nav-link.active,
html[data-theme="dark"] .tq-cd__chip i,
html[data-theme="dark"] .tq-cd__inc li i,
html[data-theme="dark"] .tq-cd__ltype i {
    color: #5b9bff;
}

html[data-theme="dark"] .tq-cd__chip--rating i,
html[data-theme="dark"] .tq-cd__tag {
    color: #f5c542;
}

/* ---------- home page: sections alternate white / tinted (the management message and package sections keep their own dark backgrounds) ---------- */
.tq-home > :nth-child(even):not(.tq-mgmt):not(.tq-pkgs) {
    background: #ffffff !important;
}

.tq-home > :nth-child(odd):not(:first-child):not(.tq-mgmt):not(.tq-pkgs) {
    background: linear-gradient(180deg, #f4f8ff, #eef4ff) !important;
}

html[data-theme="dark"] .tq-home > :nth-child(even):not(.tq-mgmt):not(.tq-pkgs) {
    background: transparent !important;
}

html[data-theme="dark"] .tq-home > :nth-child(odd):not(:first-child):not(.tq-mgmt):not(.tq-pkgs) {
    background: rgba(255, 255, 255, .03) !important;
}

/* ---------- home page: 30px above and below every section on phones ---------- */
/* the hero keeps its own top padding, which clears the fixed header */
@media (max-width: 575px) {
    .tq-home > :not(:first-child) {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .tq-home > :first-child {
        padding-bottom: 30px !important;
    }
}

/* ---------- advantage: journey strip, enhanced ---------- */
.tq-adv__journey {
    padding: 18px 22px 20px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08));
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 0 18px 40px rgba(6, 37, 111, .35);
}

.tq-adv__journey-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.tq-adv__journey-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 215, 106, .7), transparent);
}

.tq-adv__steps {
    gap: 8px;
}

.tq-adv__step {
    flex: 0 1 auto;
    gap: 12px;
}

.tq-adv__step-icon {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 19px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .25), 0 0 0 5px rgba(255, 255, 255, .18);
}

.tq-adv__step-icon b {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #06256f;
    border: 2px solid #fff;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

.tq-adv__step-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    font-size: 17px;
    font-weight: 800;
}

.tq-adv__step-text small {
    margin-bottom: 2px;
    color: rgba(255, 255, 255, .7);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tq-adv__step-line {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 18px;
    color: #ffd76a;
    font-size: 11px;
}

.tq-adv__step-line::before {
    content: "";
    flex: 1;
    border-top: 2px dashed rgba(255, 255, 255, .5);
}

@media (max-width: 575px) {
    .tq-adv__step {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .tq-adv__step-text {
        align-items: center;
        font-size: 14px;
    }

    .tq-adv__step-icon {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }
}

/* ======================= contact page (same layout, enhanced) ======================= */
.tq-contactpage .contact-area {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f4f8ff 0, #fff 480px);
}

.tq-contactpage .contact-area::before {
    content: "";
    position: absolute;
    right: -100px;
    top: 30px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: rgba(224, 165, 20, .16);
    filter: blur(80px);
    pointer-events: none;
}

.tq-contactpage .contact-area .container {
    position: relative;
    z-index: 1;
}

/* info cards: equal height, white cards with a gradient icon tile */
.tq-contactpage .contact-content .row > [class*="col-"] {
    display: flex;
}

.tq-contactpage .contact-info {
    width: 100%;
    margin-bottom: 0;
    padding: 30px 22px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid rgba(6, 37, 111, .09);
    box-shadow: 0 14px 34px rgba(6, 37, 111, .08);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.tq-contactpage .contact-info::before {
    display: none;
}

.tq-contactpage .contact-info:hover {
    transform: translateY(-6px);
    border-color: rgba(13, 78, 205, .35);
    box-shadow: 0 22px 44px rgba(13, 78, 205, .16);
}

.tq-contactpage .contact-info .icon {
    width: 74px;
    height: 74px;
    line-height: 74px;
    font-size: 30px;
    border-radius: 22px;
    background: linear-gradient(135deg, #0d4ecd, #06256f);
    box-shadow: 0 12px 24px rgba(13, 78, 205, .3);
    transform: rotate(-6deg);
    transition: transform .3s ease;
}

.tq-contactpage .contact-info:hover .icon {
    transform: rotate(0) scale(1.06);
}

.tq-contactpage .contact-info:nth-child(even) .icon,
.tq-contactpage .contact-content .row > :nth-child(even) .contact-info .icon {
    background: linear-gradient(135deg, #f5c542, #d5902a);
    box-shadow: 0 12px 24px rgba(224, 165, 20, .35);
}

.tq-contactpage .contact-info .content h5 {
    color: #06256f;
}

.tq-contactpage .contact-info .content p,
.tq-contactpage .contact-info .content a {
    color: #4a5468;
    word-break: break-word;
}

.tq-contactpage .contact-info .content a:hover {
    color: #0d4ecd;
}

/* photo: framed with a soft blue-gold glow behind it */
.tq-contactpage .contact-img {
    position: relative;
    height: 100%;
}

.tq-contactpage .contact-img::before {
    content: "";
    position: absolute;
    inset: 18px -14px -14px 18px;
    border-radius: 40px;
    background: linear-gradient(135deg, rgba(13, 78, 205, .25), rgba(224, 165, 20, .35));
    z-index: 0;
}

.tq-contactpage .contact-img img {
    position: relative;
    z-index: 1;
    height: 100%;
    object-fit: cover;
    border: 8px solid #fff;
    box-shadow: 0 24px 50px rgba(6, 37, 111, .18);
}

/* form card */
.tq-contactpage .contact-form {
    position: relative;
    overflow: hidden;
    padding: 38px;
    border: 1px solid rgba(6, 37, 111, .08);
    box-shadow: 0 26px 60px rgba(6, 37, 111, .12);
}

.tq-contactpage .contact-form-header h2 {
    color: #06256f;
    font-weight: 800;
}

.tq-contactpage .contact-form .form-control {
    border-radius: 14px;
    background: #f6f9ff;
    border: 1px solid rgba(6, 37, 111, .1);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.tq-contactpage .contact-form .form-control:focus {
    background: #fff;
    border-color: #0d4ecd;
    box-shadow: 0 0 0 4px rgba(13, 78, 205, .12);
}

.tq-contactpage .contact-form .theme-btn {
    padding: 15px 34px;
    border-radius: 60px;
    font-weight: 700;
    box-shadow: 0 14px 28px rgba(13, 78, 205, .28);
}

@media (max-width: 575px) {
    .tq-contactpage .contact-form {
        padding: 26px 20px;
    }

    .tq-contactpage .contact-img::before {
        display: none;
    }
}

html[data-theme="dark"] .tq-contactpage .contact-area {
    background: transparent;
}

html[data-theme="dark"] .tq-contactpage .contact-info {
    background: #0f1a33;
    border-color: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] .tq-contactpage .contact-info .content h5 {
    color: #fff;
}

html[data-theme="dark"] .tq-contactpage .contact-info .content p,
html[data-theme="dark"] .tq-contactpage .contact-info .content a {
    color: rgba(255, 255, 255, .75);
}

html[data-theme="dark"] .tq-contactpage .contact-img img {
    border-color: #0f1a33;
}

html[data-theme="dark"] .tq-contactpage .contact-form {
    border-color: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] .tq-contactpage .contact-form-header h2 {
    color: #fff;
}

html[data-theme="dark"] .tq-contactpage .contact-form .form-control {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
}

/* ---------- contact page: modern pass (same layout) ---------- */
.tq-contactpage .contact-area {
    background:
        linear-gradient(rgba(6, 37, 111, .04) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, rgba(6, 37, 111, .04) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(160deg, #f4f8ff 0%, #ffffff 50%, #fff8e6 100%);
}

.tq-contactpage .contact-area::after {
    content: "";
    position: absolute;
    left: -100px;
    bottom: 60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(13, 78, 205, .16);
    filter: blur(80px);
    pointer-events: none;
}

/* info cards: frosted glass, gradient border on hover */
.tq-contactpage .contact-info {
    border-radius: 28px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1.5px solid rgba(255, 255, 255, .95);
    box-shadow: 0 16px 40px rgba(6, 37, 111, .09);
}

.tq-contactpage .contact-info:hover {
    border: 1.5px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #0d4ecd, #e0a514) border-box;
    box-shadow: 0 24px 48px rgba(13, 78, 205, .18);
}

.tq-contactpage .contact-info .icon {
    position: relative;
}

.tq-contactpage .contact-info .icon::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 28px;
    border: 1.5px dashed rgba(13, 78, 205, .3);
    transition: transform .6s ease;
}

.tq-contactpage .contact-info:hover .icon::after {
    transform: rotate(90deg);
}

/* photo: floating glass chip over the picture */
.tq-contactpage .contact-img::after {
    content: "We reply within one working day";
    position: absolute;
    z-index: 2;
    left: 28px;
    bottom: 30px;
    padding: 10px 18px 10px 40px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .88) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='6' fill='%2316a34a'/%3E%3C/svg%3E") no-repeat 16px center;
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 28px rgba(6, 37, 111, .25);
    color: #06256f;
    font-size: 13.5px;
    font-weight: 700;
}

.tq-contactpage .contact-img img {
    border-radius: 36px;
}

/* form: soft glass card, pill fields */
.tq-contactpage .contact-form {
    border-radius: 36px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.tq-contactpage .contact-form-header h2 {
    font-size: 34px;
    letter-spacing: -.3px;
    background: linear-gradient(100deg, #06256f 40%, #0d4ecd);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tq-contactpage .contact-form .form-control {
    border-radius: 18px;
    padding-top: 15px;
    padding-bottom: 15px;
    background: #fff;
    border: 1.5px solid rgba(6, 37, 111, .1);
    box-shadow: 0 4px 12px rgba(6, 37, 111, .04);
}

.tq-contactpage .contact-form .form-control:hover {
    border-color: rgba(13, 78, 205, .3);
}

.tq-contactpage .contact-form .theme-btn {
    background: linear-gradient(135deg, #0d4ecd, #06256f);
    border: 0;
    color: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}

.tq-contactpage .contact-form .theme-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(13, 78, 205, .4);
}

@media (max-width: 575px) {
    .tq-contactpage .contact-img::after {
        left: 16px;
        bottom: 18px;
        font-size: 12.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tq-contactpage .contact-info .icon::after {
        transition: none;
    }
}

html[data-theme="dark"] .tq-contactpage .contact-area {
    background: transparent;
}

html[data-theme="dark"] .tq-contactpage .contact-info {
    background: rgba(15, 26, 51, .8);
    border-color: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] .tq-contactpage .contact-info:hover {
    background: linear-gradient(#0f1a33, #0f1a33) padding-box, linear-gradient(135deg, #3b82f6, #e0a514) border-box;
}

html[data-theme="dark"] .tq-contactpage .contact-form {
    background: rgba(15, 26, 51, .9);
}

html[data-theme="dark"] .tq-contactpage .contact-form-header h2 {
    background: linear-gradient(100deg, #fff 40%, #8db8ff);
    -webkit-background-clip: text;
    background-clip: text;
}

html[data-theme="dark"] .tq-contactpage .contact-form .form-control {
    background: rgba(255, 255, 255, .06);
}

/* ======================= sign in ======================= */
.tq-signin .auth-area {
    position: relative;
    overflow: hidden;
    padding: calc(var(--khn-header-space, 104px) + 30px) 0 80px;
    background:
        linear-gradient(rgba(6, 37, 111, .04) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, rgba(6, 37, 111, .04) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(160deg, #f4f8ff 0%, #ffffff 50%, #fff8e6 100%);
}

.tq-signin .auth-area::before,
.tq-signin .auth-area::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.tq-signin .auth-area::before {
    width: 340px;
    height: 340px;
    right: -80px;
    top: 80px;
    background: rgba(224, 165, 20, .2);
}

.tq-signin .auth-area::after {
    width: 320px;
    height: 320px;
    left: -100px;
    bottom: 40px;
    background: rgba(13, 78, 205, .18);
}

.tq-signin .container {
    position: relative;
    z-index: 1;
}

.tq-auth {
    display: grid;
    grid-template-columns: 5fr 6fr;
    max-width: 1020px;
    margin: 0 auto;
    border-radius: 34px;
    overflow: hidden;
    /* blue-to-gold gradient border */
    border: 2px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #0d4ecd, #e0a514) border-box;
    box-shadow: 0 30px 70px rgba(6, 37, 111, .18);
}

.tq-auth__aside {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 40px;
    background: linear-gradient(160deg, #0d4ecd, #06256f 80%);
    color: #fff;
}

.tq-auth__ring {
    position: absolute;
    right: -90px;
    bottom: -90px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 50px solid rgba(255, 255, 255, .07);
}

.tq-auth__tag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #ffd76a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tq-auth__aside h2 {
    margin: 18px 0 12px;
    color: #fff;
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.2;
}

.tq-auth__aside h2 span {
    color: #ffd76a;
}

.tq-auth__aside p {
    margin: 0 0 28px;
    color: rgba(255, 255, 255, .82);
}

.tq-auth__points {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tq-auth__points li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 600;
}

.tq-auth__points i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, .14);
    color: #f5c542;
}

.tq-signin .tq-auth .auth-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 44px;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
}

.tq-signin .auth-form .auth-header p {
    font-size: 17px;
    font-weight: 600;
    color: #06256f;
}

.tq-signin .auth-form .form-control {
    border-radius: 16px;
    background: #f6f9ff;
    border: 1px solid rgba(6, 37, 111, .1);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.tq-signin .auth-form .form-control:focus {
    background: #fff;
    border-color: #0d4ecd;
    box-shadow: 0 0 0 4px rgba(13, 78, 205, .12);
}

.tq-signin .auth-form .theme-btn {
    width: 100%;
    border-radius: 60px;
    font-weight: 700;
    box-shadow: 0 14px 28px rgba(13, 78, 205, .3);
}

.tq-auth__join {
    margin: 22px 0 0;
    text-align: center;
    color: #4a5468;
}

.tq-auth__join a {
    font-weight: 700;
    color: #a87300;
}

.tq-auth__join a:hover {
    text-decoration: underline;
}

@media (max-width: 991px) {
    .tq-auth {
        grid-template-columns: 1fr;
        max-width: 520px;
    }

    .tq-auth__aside {
        display: none;
    }
}

@media (max-width: 575px) {
    .tq-signin .tq-auth .auth-form {
        padding: 32px 22px;
    }
}

html[data-theme="dark"] .tq-signin .auth-area {
    background: transparent;
}

html[data-theme="dark"] .tq-auth {
    background: linear-gradient(#0f1a33, #0f1a33) padding-box,
        linear-gradient(135deg, #4d8fff, #f3bc1e) border-box;
}

html[data-theme="dark"] .tq-signin .tq-auth .auth-form {
    background: #0f1a33;
}

html[data-theme="dark"] .tq-signin .auth-form .auth-header p {
    color: #fff;
}

html[data-theme="dark"] .tq-signin .auth-form .form-control {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
}

html[data-theme="dark"] .tq-signin .auth-form .form-control::placeholder {
    color: #fff;
    opacity: 1;
}

html[data-theme="dark"] .tq-auth__join {
    color: rgba(255, 255, 255, .72);
}

html[data-theme="dark"] .tq-auth__join a {
    color: #f5c542;
}

/* ======================= cash payment ======================= */
.tq-cash {
    --tq-navy: #06256f;
    --tq-blue: #0d4ecd;
    --tq-gold: #e0a514;
    --tq-text: #4a5468;
    --tq-card: #ffffff;
    --tq-edge: rgba(6, 37, 111, .1);
    --tq-soft: #f4f8ff;
    padding: 36px 0 56px;
    background: linear-gradient(180deg, #f4f8ff, #fff 400px);
}

/* one card, two panels side by side: pay on the left, proof form on the right */
.tq-cash__wrap {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    border-radius: 30px;
    background: var(--tq-card);
    border: 1px solid var(--tq-edge);
    box-shadow: 0 26px 60px rgba(6, 37, 111, .12);
    overflow: hidden;
}

.tq-cash__pay {
    padding: 28px;
    background: linear-gradient(180deg, var(--tq-soft), var(--tq-card));
    border-right: 1px dashed var(--tq-edge);
}

.tq-cash__amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding: 18px 22px;
    border-radius: 22px;
    background: linear-gradient(135deg, #0d4ecd, #06256f);
    color: #fff;
    box-shadow: 0 16px 34px rgba(13, 78, 205, .3);
}

.tq-cash__label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}

.tq-cash__amount strong {
    display: block;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.1;
    color: #ffd76a;
}

.tq-cash__plan {
    text-align: right;
}

.tq-cash__plan small {
    display: block;
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
}

.tq-cash__plan b {
    font-size: 17px;
}

.tq-cash__scan {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 22px;
    align-items: center;
}

.tq-cash__qr {
    text-align: center;
}

.tq-cash__qr img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 10px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--tq-edge);
    box-shadow: 0 12px 28px rgba(6, 37, 111, .1);
}

.tq-cash__qr span {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tq-text);
}

.tq-cash__qr span i {
    color: var(--tq-blue);
}

.tq-cash__upi .tq-cash__label {
    margin-bottom: 8px;
    color: var(--tq-text);
}

.tq-cash__upi-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px 10px 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--tq-edge);
}

.tq-cash__upi-box b {
    color: var(--tq-navy);
    word-break: break-all;
}

.tq-cash__upi-box button {
    flex: 0 0 auto;
    padding: 8px 16px;
    border: 0;
    border-radius: 50px;
    background: linear-gradient(135deg, #f5c542, #d5902a);
    color: #06256f;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

.tq-cash__steps {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tq-cash__steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tq-navy);
}

.tq-cash__steps span {
    flex: 0 0 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--tq-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.tq-cash__wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
    padding: 14px 24px;
    border-radius: 60px;
    background: linear-gradient(135deg, #25d366, #128c4a);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 14px 28px rgba(37, 211, 102, .3);
    transition: transform .2s ease;
}

.tq-cash__wa:hover {
    transform: translateY(-3px);
}

.tq-cash__form {
    padding: 28px;
}

.tq-cash__form h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    color: var(--tq-navy);
    font-weight: 800;
}

.tq-cash__form h4 i {
    color: var(--tq-blue);
}

.tq-cash__form > p {
    margin: 0 0 20px;
    color: var(--tq-text);
    font-size: 14px;
}

.tq-cash__form label {
    font-weight: 600;
    color: var(--tq-navy);
}

.tq-cash__form .form-control {
    border-radius: 14px;
    background: var(--tq-soft);
    border: 1px solid var(--tq-edge);
}

.tq-cash__form .form-control:focus {
    background: #fff;
    border-color: var(--tq-blue);
    box-shadow: 0 0 0 4px rgba(13, 78, 205, .12);
}

.tq-cash__hint {
    display: block;
    margin-top: 6px;
    color: var(--tq-text);
}

.tq-cash__file {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tq-cash__file img {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--tq-edge);
}

.tq-cash__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 18px;
    padding: 15px 24px;
    border: 0;
    border-radius: 60px;
    background: linear-gradient(135deg, #0d4ecd, #06256f);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 14px 28px rgba(13, 78, 205, .3);
    transition: transform .2s ease;
}

.tq-cash__submit:hover {
    transform: translateY(-3px);
}

@media (max-width: 991px) {
    .tq-cash__wrap {
        grid-template-columns: 1fr;
    }

    .tq-cash__pay {
        border-right: 0;
        border-bottom: 1px dashed var(--tq-edge);
    }
}

@media (max-width: 575px) {
    .tq-cash__scan {
        grid-template-columns: 1fr;
    }

    .tq-cash__qr {
        max-width: 220px;
        margin: 0 auto;
    }

    .tq-cash__pay,
    .tq-cash__form {
        padding: 22px 18px;
    }

    .tq-cash__amount strong {
        font-size: 30px;
    }
}

html[data-theme="dark"] .tq-cash {
    background: transparent;
    --tq-card: #0f1a33;
    --tq-edge: rgba(255, 255, 255, .12);
    --tq-soft: rgba(255, 255, 255, .05);
    --tq-text: rgba(255, 255, 255, .72);
    --tq-navy: #ffffff;
}

html[data-theme="dark"] .tq-cash__qr img,
html[data-theme="dark"] .tq-cash__upi-box {
    background: rgba(255, 255, 255, .06);
}

html[data-theme="dark"] .tq-cash__qr img {
    background: #fff;
}

html[data-theme="dark"] .tq-cash__upi-box b {
    color: #fff;
}

/* ======================= thank you (cash payment) ======================= */
.tq-thanks__area {
    position: relative;
    overflow: hidden;
    margin-top: 0 !important;
    padding: calc(var(--khn-header-space, 104px) + 6px) 0 30px;
    background:
        linear-gradient(rgba(6, 37, 111, .04) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, rgba(6, 37, 111, .04) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(160deg, #f4f8ff 0%, #ffffff 50%, #fff8e6 100%);
}

.tq-thanks__area::before,
.tq-thanks__area::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.tq-thanks__area::before {
    width: 320px;
    height: 320px;
    right: -80px;
    top: 80px;
    background: rgba(224, 165, 20, .2);
}

.tq-thanks__area::after {
    width: 320px;
    height: 320px;
    left: -100px;
    bottom: 40px;
    background: rgba(13, 78, 205, .18);
}

.tq-thanks__card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    max-width: 760px;
    margin: 0 auto;
    padding: 26px 32px 28px;
    border-radius: 34px;
    background: #fff;
    border: 1px solid rgba(6, 37, 111, .08);
    box-shadow: 0 30px 70px rgba(6, 37, 111, .16);
    text-align: center;
}

.tq-thanks__ring {
    position: absolute;
    right: -110px;
    top: -110px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 44px solid rgba(13, 78, 205, .06);
}

.tq-thanks__check {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #15803d);
    box-shadow: 0 0 0 10px rgba(34, 197, 94, .15), 0 18px 36px rgba(21, 128, 61, .35);
    animation: tqThanksPop .6s cubic-bezier(.2, 1.4, .4, 1) both;
}

.tq-thanks__check svg {
    width: 100%;
    height: 100%;
    padding: 16px;
}

.tq-thanks__check circle {
    display: none;
}

.tq-thanks__check path {
    stroke: #fff;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: tqThanksDraw .5s ease .4s forwards;
}

@keyframes tqThanksPop {
    from { transform: scale(.4); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes tqThanksDraw {
    to { stroke-dashoffset: 0; }
}

.tq-thanks__card h1 {
    margin: 0 0 4px;
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    background: linear-gradient(100deg, #06256f 30%, #0d4ecd);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tq-thanks__lead {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: #06256f;
}

.tq-thanks__sub {
    max-width: 440px;
    margin: 0 auto 20px;
    color: #4a5468;
}

.tq-thanks__steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    position: relative;
}

.tq-thanks__steps::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 22px;
    border-top: 2px dashed rgba(6, 37, 111, .2);
}

.tq-thanks__steps li {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: #77808f;
}

.tq-thanks__steps li span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eef2fb;
    border: 3px solid #fff;
    color: #94a0b8;
    font-size: 16px;
    box-shadow: 0 6px 14px rgba(6, 37, 111, .1);
}

.tq-thanks__steps li.is-done {
    color: #15803d;
}

.tq-thanks__steps li.is-done span {
    background: linear-gradient(135deg, #22c55e, #15803d);
    color: #fff;
}

.tq-thanks__steps li.is-now {
    color: #06256f;
}

.tq-thanks__steps li.is-now span {
    background: linear-gradient(135deg, #f5c542, #d5902a);
    color: #06256f;
    animation: tqThanksPulse 1.8s ease-in-out infinite;
}

@keyframes tqThanksPulse {
    50% { box-shadow: 0 0 0 10px rgba(224, 165, 20, .2), 0 6px 14px rgba(6, 37, 111, .1); }
}

.tq-thanks__btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.tq-thanks__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 60px;
    background: linear-gradient(135deg, #0d4ecd, #06256f);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 14px 28px rgba(13, 78, 205, .3);
    transition: transform .2s ease;
}

.tq-thanks__btn:hover {
    transform: translateY(-3px);
}

.tq-thanks__btn--line {
    background: #fff;
    color: #06256f !important;
    border: 1.5px solid rgba(13, 78, 205, .35);
    box-shadow: none;
}

@media (max-width: 575px) {
    .tq-thanks__card {
        padding: 22px 16px 22px;
    }

    .tq-thanks__steps li {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tq-thanks__check,
    .tq-thanks__check path,
    .tq-thanks__steps li.is-now span {
        animation: none;
        stroke-dashoffset: 0;
    }
}

html[data-theme="dark"] .tq-thanks__area {
    background: transparent;
}

html[data-theme="dark"] .tq-thanks__card {
    background: #0f1a33;
    border-color: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] .tq-thanks__card h1 {
    background: linear-gradient(100deg, #fff 30%, #8db8ff);
    -webkit-background-clip: text;
    background-clip: text;
}

html[data-theme="dark"] .tq-thanks__lead,
html[data-theme="dark"] .tq-thanks__steps li.is-now {
    color: #fff;
}

html[data-theme="dark"] .tq-thanks__sub {
    color: rgba(255, 255, 255, .72);
}

html[data-theme="dark"] .tq-thanks__steps li span {
    background: rgba(255, 255, 255, .08);
    border-color: #0f1a33;
}

html[data-theme="dark"] .tq-thanks__btn--line {
    background: transparent;
    color: #fff !important;
}

/* ---------- thank you: smaller, more polished card ---------- */
.tq-thanks__card {
    max-width: 560px;
    padding: 22px 26px 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% -10%, rgba(34, 197, 94, .14), transparent 55%),
        #fff;
}

.tq-thanks__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle, rgba(224, 165, 20, .55) 2.5px, transparent 3px) 12% 18% / 90px 90px,
        radial-gradient(circle, rgba(13, 78, 205, .35) 2px, transparent 2.5px) 70% 8% / 110px 110px,
        radial-gradient(circle, rgba(34, 197, 94, .4) 2px, transparent 2.5px) 90% 40% / 130px 130px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 40%);
    mask-image: linear-gradient(180deg, #000, transparent 40%);
    pointer-events: none;
}

.tq-thanks__check {
    width: 64px;
    height: 64px;
    margin-bottom: 10px;
    box-shadow: 0 0 0 8px rgba(34, 197, 94, .14), 0 0 0 16px rgba(34, 197, 94, .07), 0 14px 28px rgba(21, 128, 61, .35);
}

.tq-thanks__check svg {
    padding: 14px;
}

.tq-thanks__card h1 {
    font-size: clamp(24px, 3.4vw, 30px);
}

.tq-thanks__lead {
    font-size: 16px;
}

.tq-thanks__sub {
    max-width: 400px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.5;
}

.tq-thanks__steps {
    margin-bottom: 16px;
    padding: 14px 10px 12px;
    border-radius: 18px;
    background: #f4f8ff;
    border: 1px solid rgba(6, 37, 111, .07);
}

.tq-thanks__steps::before {
    top: 36px;
}

.tq-thanks__steps li {
    gap: 8px;
    font-size: 12.5px;
}

.tq-thanks__steps li span {
    width: 40px;
    height: 40px;
    font-size: 14px;
}

.tq-thanks__btns {
    gap: 10px;
}

.tq-thanks__btn {
    padding: 11px 22px;
    font-size: 14px;
}

@media (max-width: 575px) {
    .tq-thanks__card {
        padding: 20px 14px 20px;
    }
}

html[data-theme="dark"] .tq-thanks__card {
    background:
        radial-gradient(circle at 50% -10%, rgba(34, 197, 94, .18), transparent 55%),
        #0f1a33;
}

html[data-theme="dark"] .tq-thanks__steps {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .1);
}

/* ======================= thank you (plan order receipt) ======================= */
.tq-thanks__logo {
    position: relative;
    margin: 0 auto 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed rgba(6, 37, 111, .14);
}

.tq-thanks__logo img {
    max-width: 180px;
    max-height: 56px;
    width: auto;
    height: auto;
}

.tq-thanks__card--order .tq-thanks__lead {
    color: #15803d;
}

.tq-thanks__amount {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 14px auto 18px;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #06256f, #0d4ecd);
    color: #fff;
    box-shadow: 0 14px 28px rgba(6, 37, 111, .22);
}

.tq-thanks__amount-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}

.tq-thanks__amount strong {
    font-size: clamp(30px, 6vw, 38px);
    font-weight: 800;
    line-height: 1.15;
    color: #f5c542;
}

.tq-thanks__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
}

.tq-thanks__details {
    position: relative;
    margin: 0 0 20px;
    padding: 4px 16px;
    border-radius: 18px;
    background: #f4f8ff;
    border: 1px solid rgba(6, 37, 111, .07);
    text-align: left;
}

.tq-thanks__details > div {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid rgba(6, 37, 111, .08);
}

.tq-thanks__details > div:last-child {
    border-bottom: 0;
}

.tq-thanks__details dt {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: #4a5468;
}

.tq-thanks__details dd {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0b1530;
    text-align: right;
    overflow-wrap: anywhere;
}

.tq-thanks__cap {
    text-transform: capitalize;
}

.tq-thanks__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 60px;
    background: rgba(34, 197, 94, .14);
    color: #15803d;
    font-size: 13px;
}

@media (max-width: 575px) {
    .tq-thanks__details {
        padding: 2px 12px;
    }

    .tq-thanks__details > div {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .tq-thanks__details dd {
        font-size: 14px;
    }

    .tq-thanks__card--order .tq-thanks__btn {
        width: 100%;
        justify-content: center;
    }
}

html[data-theme="dark"] .tq-thanks__logo {
    border-color: rgba(255, 255, 255, .14);
}

html[data-theme="dark"] .tq-thanks__card--order .tq-thanks__lead {
    color: #4ade80;
}

html[data-theme="dark"] .tq-thanks__amount {
    background: linear-gradient(135deg, rgba(13, 78, 205, .45), rgba(6, 37, 111, .6));
    border: 1px solid rgba(255, 255, 255, .1);
}

html[data-theme="dark"] .tq-thanks__details {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] .tq-thanks__details > div {
    border-color: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .tq-thanks__details dt {
    color: rgba(255, 255, 255, .65);
}

html[data-theme="dark"] .tq-thanks__details dd {
    color: #fff;
}

html[data-theme="dark"] .tq-thanks__badge {
    background: rgba(74, 222, 128, .14);
    color: #4ade80;
}