/* ==========================================================================
   ath-ui.css - Automation Test Hub public-site design system
   --------------------------------------------------------------------------
   Loaded LAST by user.Master, after the legacy stylesheets, so it can
   override them without !important wherever possible.

   1. Tokens               5. Forms            9.  Toast messages
   2. Global fixes         6. Cards            10. Utilities
   3. Typography           7. Modals           11. Reduced motion
   4. Buttons              8. Media / tables   12. Brand font (generated)

   Components are opt-in (ath-* classes) and are applied page by page.
   Section 2 and 12 apply globally.

   Breakpoints (match Bootstrap 3): 480 / 768 / 992 / 1200.
   Sizes are in px: Bootstrap 3 sets html{font-size:10px}, so rem = 10px.
   ========================================================================== */


/* 1. Tokens
   ========================================================================== */
:root {
    /* Brand */
    --ath-red: #b80000;
    --ath-red-hover: #990000;
    --ath-red-text: #b80000;          /* 7:1 on white, fine for text */
    --ath-red-light: #ffb3b3;         /* red accent on dark backgrounds */
    --ath-red-soft: #fbe9e9;
    --ath-navy: #012345;
    --ath-navy-700: #0b3a66;
    --ath-blue: #294e87;
    --ath-blue-500: #3f6fb5;

    /* Neutrals */
    --ath-ink: #1d2433;               /* body text */
    --ath-muted: #5b6472;             /* secondary text, 5.9:1 on white */
    --ath-border: #dfe4ec;
    --ath-surface: #ffffff;
    --ath-bg-soft: #f5f7fb;

    /* Status */
    --ath-success: #1e8e3e;
    --ath-success-soft: #e8f5ec;
    --ath-warning: #b45309;
    --ath-warning-soft: #fff4e5;
    --ath-danger: #b80000;
    --ath-danger-soft: #fbe9e9;

    /* Type */
    --ath-font-sans: 'Montserrat', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ath-text: 16px;
    --ath-text-sm: 14px;
    --ath-text-xs: 12px;
    --ath-leading: 1.6;
    --ath-h1: clamp(28px, 20px + 2.2vw, 44px);
    --ath-h2: clamp(24px, 18px + 1.6vw, 34px);
    --ath-h3: clamp(19px, 16px + 0.8vw, 24px);
    --ath-h4: 18px;

    /* Spacing */
    --ath-space-1: 4px;
    --ath-space-2: 8px;
    --ath-space-3: 12px;
    --ath-space-4: 16px;
    --ath-space-5: 24px;
    --ath-space-6: 32px;
    --ath-space-7: 48px;
    --ath-space-8: 64px;
    --ath-section-y: clamp(40px, 24px + 4vw, 80px);

    /* Shape */
    --ath-radius-sm: 6px;
    --ath-radius: 12px;
    --ath-radius-pill: 999px;
    --ath-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --ath-shadow: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .05);
    --ath-shadow-lg: 0 16px 32px rgba(16, 24, 40, .12), 0 4px 8px rgba(16, 24, 40, .06);

    /* Focus */
    --ath-focus: 0 0 0 3px rgba(63, 111, 181, .45);
    --ath-focus-outline: 3px solid #3f6fb5;

    --ath-transition: .2s ease;
}


/* 2. Global fixes
   ========================================================================== */

/* Keyboard focus is visible again (the legacy CSS removes outlines in ~60 places).
   :focus-visible only shows for keyboard navigation, not mouse clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible {
    outline: var(--ath-focus-outline) !important;
    outline-offset: 2px !important;
}

/* Images keep their aspect ratio when max-width scales them down.
   :where() keeps this at zero specificity so any component rule (e.g. the header logo
   height) wins over it. */
:where(img[width][height]) {
    height: auto;
}

/* Embedded maps/videos never overflow the screen. */
iframe,
video,
embed,
object {
    max-width: 100%;
}

/* No sideways scrolling on small screens because of one wide element.
   "clip" (not "hidden") so the body doesn't become a scroll container, which
   would break the sticky offer bar and header. */
body {
    overflow-x: clip;
}

/* 16px form fields on phones stop iOS zooming in when a field is focused. */
@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input:not([type]),
    select,
    textarea,
    .form-control {
        font-size: 16px !important;
    }
}


/* 3. Typography (opt-in)
   ========================================================================== */
.ath-section {
    clear: both;
    padding-top: var(--ath-section-y);
    padding-bottom: var(--ath-section-y);
    color: var(--ath-ink);
}

.ath-section--soft {
    background: var(--ath-bg-soft);
}

.ath-section--dark {
    background: linear-gradient(135deg, var(--ath-navy) 0%, var(--ath-blue) 100%);
    color: #fff;
}

.ath-section__head {
    max-width: 720px;
    margin: 0 auto var(--ath-space-6);
    text-align: center;
}

.ath-section__head--left {
    margin-left: 0;
    text-align: left;
}

.ath-eyebrow {
    display: inline-block;
    margin-bottom: var(--ath-space-2);
    color: var(--ath-red-text);
    font-size: var(--ath-text-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ath-section--dark .ath-eyebrow {
    color: var(--ath-red-light);
}

.ath-h1,
.ath-h2,
.ath-h3,
.ath-h4 {
    margin: 0 0 var(--ath-space-3);
    color: inherit;
    font-family: var(--ath-font-sans);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.ath-h1 { font-size: var(--ath-h1); }
.ath-h2 { font-size: var(--ath-h2); }
.ath-h3 { font-size: var(--ath-h3); }
.ath-h4 { font-size: var(--ath-h4); }

.ath-lead {
    margin: 0;
    color: var(--ath-muted);
    font-size: 17px;
    line-height: var(--ath-leading);
}

.ath-section--dark .ath-lead {
    color: rgba(255, 255, 255, .85);
}

/* Long-form text from the CMS (course descriptions, tutorials, news). */
.ath-prose {
    color: var(--ath-ink);
    font-size: var(--ath-text);
    line-height: 1.7;
}

    .ath-prose p,
    .ath-prose ul,
    .ath-prose ol {
        margin: 0 0 var(--ath-space-4);
    }

    .ath-prose h2,
    .ath-prose h3,
    .ath-prose h4 {
        margin: var(--ath-space-6) 0 var(--ath-space-3);
        font-weight: 700;
        line-height: 1.3;
    }

    .ath-prose img {
        max-width: 100%;
        height: auto;
        border-radius: var(--ath-radius-sm);
    }

    .ath-prose pre {
        overflow-x: auto;
        border-radius: var(--ath-radius-sm);
    }

    .ath-prose table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

.ath-link {
    color: var(--ath-red-text);
    font-weight: 600;
    text-decoration: none;
}

    .ath-link:hover,
    .ath-link:focus {
        color: var(--ath-navy);
        text-decoration: underline;
    }


/* 4. Buttons (opt-in; work on <a>, <button> and <input type=submit>)
   ========================================================================== */
.ath-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ath-space-2);
    min-height: 44px;
    padding: 10px 22px;
    border: 2px solid transparent;
    border-radius: var(--ath-radius-pill);
    background: var(--ath-red);
    color: #fff;
    font-family: var(--ath-font-sans);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color var(--ath-transition), border-color var(--ath-transition), color var(--ath-transition), box-shadow var(--ath-transition), transform var(--ath-transition);
}

    .ath-btn:hover,
    .ath-btn:focus {
        background: var(--ath-red-hover);
        color: #fff;
        text-decoration: none;
        box-shadow: var(--ath-shadow);
    }

    .ath-btn:active {
        transform: translateY(1px);
    }

    .ath-btn[disabled],
    .ath-btn.is-disabled,
    .ath-btn.aspNetDisabled {
        opacity: .55;
        cursor: not-allowed;
        box-shadow: none;
        pointer-events: none;
    }

.ath-btn--secondary {
    background: var(--ath-navy);
}

    .ath-btn--secondary:hover,
    .ath-btn--secondary:focus {
        background: var(--ath-navy-700);
    }

.ath-btn--outline {
    border-color: var(--ath-red);
    background: transparent;
    color: var(--ath-red-text);
}

    .ath-btn--outline:hover,
    .ath-btn--outline:focus {
        background: var(--ath-red);
        color: #fff;
    }

.ath-btn--light {
    background: #fff;
    color: var(--ath-navy);
}

    .ath-btn--light:hover,
    .ath-btn--light:focus {
        background: var(--ath-bg-soft);
        color: var(--ath-navy);
    }

.ath-btn--ghost {
    background: transparent;
    color: var(--ath-navy);
}

    .ath-btn--ghost:hover,
    .ath-btn--ghost:focus {
        background: var(--ath-bg-soft);
        color: var(--ath-navy);
        box-shadow: none;
    }

.ath-btn--sm {
    min-height: 36px;
    padding: 6px 16px;
    font-size: 13px;
}

.ath-btn--lg {
    min-height: 52px;
    padding: 14px 30px;
    font-size: 17px;
}

.ath-btn--block {
    display: flex;
    width: 100%;
}

/* Icon-only round button (e.g. carousel arrows, close). */
.ath-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--ath-border);
    border-radius: 50%;
    background: #fff;
    color: var(--ath-navy);
    cursor: pointer;
    transition: background-color var(--ath-transition), box-shadow var(--ath-transition);
}

    .ath-icon-btn:hover,
    .ath-icon-btn:focus {
        background: var(--ath-bg-soft);
        box-shadow: var(--ath-shadow-sm);
    }


/* 5. Forms (opt-in: wrap a form/fieldset in .ath-form)
   ========================================================================== */
.ath-form .ath-field {
    margin-bottom: var(--ath-space-4);
}

.ath-label {
    display: block;
    margin-bottom: 6px;
    color: var(--ath-ink);
    font-size: var(--ath-text-sm);
    font-weight: 600;
}

    .ath-label .ath-required {
        color: var(--ath-red-text);
    }

.ath-form .form-control,
.ath-input {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--ath-border);
    border-radius: var(--ath-radius-sm);
    background: #fff;
    color: var(--ath-ink);
    font-family: var(--ath-font-sans);
    font-size: 15px;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color var(--ath-transition), box-shadow var(--ath-transition);
}

.ath-form textarea.form-control,
textarea.ath-input {
    min-height: 110px;
    resize: vertical;
}

    .ath-form .form-control:focus,
    .ath-input:focus {
        border-color: var(--ath-blue-500);
        box-shadow: var(--ath-focus);
        outline: none;
    }

    .ath-form .form-control::placeholder,
    .ath-input::placeholder {
        color: #8a93a3;
    }

/* The existing client-side validation adds .validationErrorBorder; keep it and pair it
   with a visible message element (.ath-field-error) in the markup. */
.ath-form .validationErrorBorder,
.ath-form .form-control[aria-invalid="true"],
.ath-input[aria-invalid="true"] {
    border-color: var(--ath-danger) !important;
    box-shadow: 0 0 0 3px rgba(184, 0, 0, .15);
}

.ath-field-error {
    display: block;
    margin-top: 6px;
    color: var(--ath-danger);
    font-size: 13px;
    font-weight: 500;
}

    .ath-field-error:empty {
        display: none;
    }

.ath-help {
    display: block;
    margin-top: 6px;
    color: var(--ath-muted);
    font-size: 13px;
}

/* Input with an action button inside (e.g. show/hide password). */
.ath-input-group {
    position: relative;
}

    .ath-input-group .form-control,
    .ath-input-group .ath-input {
        padding-right: 52px;
    }

.ath-input-group__btn {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ath-muted);
    cursor: pointer;
}

    .ath-input-group__btn:hover,
    .ath-input-group__btn:focus {
        color: var(--ath-navy);
    }


/* 6. Cards and grids (opt-in)
   ========================================================================== */
.ath-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--ath-space-5);
}

.ath-grid--sm {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--ath-space-4);
}

.ath-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--ath-border);
    border-radius: var(--ath-radius);
    background: var(--ath-surface);
    color: var(--ath-ink);
    box-shadow: var(--ath-shadow-sm);
    transition: box-shadow var(--ath-transition), transform var(--ath-transition), border-color var(--ath-transition);
}

a.ath-card,
.ath-card--interactive {
    text-decoration: none;
}

    a.ath-card:hover,
    a.ath-card:focus,
    .ath-card--interactive:hover,
    .ath-card--interactive:focus-within {
        border-color: transparent;
        box-shadow: var(--ath-shadow-lg);
        transform: translateY(-3px);
        color: var(--ath-ink);
        text-decoration: none;
    }

.ath-card__media {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 56.25%;              /* 16:9 */
    overflow: hidden;
    background: var(--ath-bg-soft);
}

    .ath-card__media img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
    }

.ath-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: var(--ath-space-4) var(--ath-space-5) var(--ath-space-5);
}

.ath-card__title {
    margin: 0 0 var(--ath-space-2);
    color: var(--ath-navy);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

    .ath-card__title a {
        color: inherit;
        text-decoration: none;
    }

        /* Makes the whole card clickable from the title link, keeping one link per card. */
        .ath-card__title a.ath-stretched-link::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
        }

.ath-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ath-space-2) var(--ath-space-4);
    margin: 0 0 var(--ath-space-3);
    color: var(--ath-muted);
    font-size: 13px;
}

.ath-card__text {
    margin: 0 0 var(--ath-space-4);
    color: var(--ath-muted);
    font-size: var(--ath-text-sm);
    line-height: 1.6;
}

.ath-card__footer {
    display: flex;
    flex-wrap: wrap;                  /* very narrow cards: button drops under the price */
    align-items: center;
    justify-content: space-between;
    gap: var(--ath-space-3);
    margin-top: auto;
    padding-top: var(--ath-space-3);
}

/* Keep "₹ 25,000" on one line; the button beside it may shrink instead. */
.ath-price {
    flex: none;
    color: var(--ath-navy);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.ath-card__footer .ath-btn {
    min-width: 0;
    white-space: nowrap;
}

    .ath-price del {
        margin-left: 6px;
        color: var(--ath-muted);
        font-size: 14px;
        font-weight: 500;
    }

.ath-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--ath-radius-pill);
    background: var(--ath-red-soft);
    color: var(--ath-red-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.ath-badge--navy { background: #e6edf7; color: var(--ath-navy); }
.ath-badge--success { background: var(--ath-success-soft); color: var(--ath-success); }
.ath-badge--warning { background: var(--ath-warning-soft); color: var(--ath-warning); }

/* Placeholder shown while AJAX lists load (avoids empty space / layout jumps). */
.ath-skeleton {
    position: relative;
    overflow: hidden;
    border-radius: var(--ath-radius-sm);
    background: #e9edf3;
}

    .ath-skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
        animation: ath-shimmer 1.4s infinite;
    }

.ath-skeleton--card { height: 320px; border-radius: var(--ath-radius); }
.ath-skeleton--line { height: 14px; margin-bottom: 10px; }

@keyframes ath-shimmer {
    100% { transform: translateX(100%); }
}


/* 7. Modals (global: Bootstrap 3 modals fit small screens)
   ========================================================================== */
/* One white surface with rounded corners; the header follows the dialog top radius and is
   separated by a divider (legacy CSS gave headers a square grey fill and bodies #ececec). */
.modal-content {
    border: 0;
    border-radius: var(--ath-radius);
    background-color: #fff;
    padding-bottom: 0;
    box-shadow: var(--ath-shadow-lg);
}

.modal-header {
    padding: var(--ath-space-4) var(--ath-space-5) !important;
    border-bottom: 1px solid var(--ath-border);
    border-radius: var(--ath-radius) var(--ath-radius) 0 0;
    background-color: #fff !important;
}

.modal-footer {
    border-top: 1px solid var(--ath-border);
    border-radius: 0 0 var(--ath-radius) var(--ath-radius);
}

.modal-title {
    color: var(--ath-navy);
}

.modal-body {
    padding: var(--ath-space-5);
}

.modal-header .close {
    width: 44px;
    height: 44px;
    margin: -10px -12px -10px 0;
    font-size: 28px;
    opacity: .6;
}

    .modal-header .close:hover,
    .modal-header .close:focus {
        opacity: 1;
    }

@media (max-width: 767px) {
    /* Legacy rules force .modal-sm to 400/460px and some fields to 309px. */
    .modal-dialog,
    .modal-dialog.modal-sm,
    .modal-dialog.modal-lg,
    .modal-dialog-new-login-new-register-popup {
        width: auto !important;
        max-width: none !important;
        margin: 12px !important;
    }

    .modal .form-control-fild,
    .modal .form-control {
        width: 100% !important;
        max-width: 100% !important;
    }

    .modal-body {
        padding: var(--ath-space-4);
    }
}


/* 8. Media and tables (opt-in)
   ========================================================================== */

/* Responsive 16:9 wrapper for YouTube/Vimeo/maps: <div class="ath-embed"><iframe ...></div> */
.ath-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    border-radius: var(--ath-radius);
    background: #000;
}

.ath-embed--map {
    padding-top: 0;
    height: 320px;
    background: var(--ath-bg-soft);
}

.ath-embed--4x3 {
    padding-top: 75%;
}

    .ath-embed iframe,
    .ath-embed video,
    .ath-embed embed,
    .ath-embed object {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        border: 0;
    }

/* Wide tables scroll sideways inside their own box instead of breaking the page. */
.ath-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--ath-border);
    border-radius: var(--ath-radius-sm);
}

    .ath-table-wrap > .table {
        margin-bottom: 0;
    }


/* 9. Toast messages (global: #messageAlert from user.Master)
   ========================================================================== */
#messageAlert {
    position: fixed !important;
    top: 16px;
    right: 16px;
    left: auto !important;
    z-index: 2000;
    width: auto;
    max-width: calc(100% - 32px);
    min-width: 260px;
    margin: 0;
    padding: 14px 48px 14px 16px;
    border: 0;
    border-left: 4px solid var(--ath-muted);
    border-radius: var(--ath-radius);
    background: #fff;
    color: var(--ath-ink);
    font-size: var(--ath-text-sm);
    box-shadow: var(--ath-shadow-lg);
}

@media (min-width: 480px) {
    #messageAlert {
        max-width: 420px;
    }
}

    #messageAlert p {
        margin: 0;
        line-height: 1.5;
    }

    #messageAlert.alert-success {
        border-left-color: var(--ath-success);
        background: #fff;
        color: var(--ath-ink);
    }

        #messageAlert.alert-success #messageHeading {
            color: var(--ath-success);
        }

    #messageAlert.alert-danger {
        border-left-color: var(--ath-danger);
        background: #fff;
        color: var(--ath-ink);
    }

        #messageAlert.alert-danger #messageHeading {
            color: var(--ath-danger);
        }

    #messageAlert .close {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 36px;
        height: 36px;
        font-size: 24px;
        opacity: .6;
    }

        #messageAlert .close:hover,
        #messageAlert .close:focus {
            opacity: 1;
        }


/* 10. Utilities
   ========================================================================== */
.ath-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.ath-stack > * + * { margin-top: var(--ath-space-4); }
.ath-text-muted { color: var(--ath-muted) !important; }
.ath-text-center { text-align: center !important; }
.ath-mt-0 { margin-top: 0 !important; }
.ath-mb-0 { margin-bottom: 0 !important; }

/* Simple flex row that wraps on small screens. */
.ath-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ath-space-3);
}


/* Site header (user/UC/UCHomeNavigation.ascx)
   ========================================================================== */
.ath-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 999;                     /* below the offer bar (1000), above page content */
    border-bottom: 1px solid var(--ath-border);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    backdrop-filter: saturate(180%) blur(8px);
}

.ath-header__inner {
    position: relative;               /* positions the full-width mega menu */
    display: flex;
    align-items: center;
    gap: var(--ath-space-5);
    min-height: 72px;
}

.ath-header__logo {
    flex: none;
}

    .ath-header__logo img {
        display: block;
        width: auto;
        height: 46px;
    }

/* Desktop menu */
/* The nav stretches to the full header height and so do its items, so moving the pointer
   from a trigger down into its panel never leaves the item (no gap that closes the menu). */
.ath-nav {
    flex: 1 1 auto;
    align-self: stretch;
    min-width: 0;
}

.ath-header__logo img {
    max-width: none;                  /* fixed height, natural width (legacy img max-width rules) */
}

.ath-nav__list {
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ath-nav__item {
    position: relative;
    display: flex;
    align-items: center;
}

.ath-nav__trigger,
.ath-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--ath-radius-sm);
    background: transparent;
    color: var(--ath-navy);
    font-family: var(--ath-font-sans);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ath-transition), color var(--ath-transition);
}

    .ath-nav__trigger:hover,
    .ath-nav__trigger:focus,
    .ath-nav__link:hover,
    .ath-nav__link:focus,
    [data-menu].is-open > .ath-nav__trigger {
        background: var(--ath-bg-soft);
        color: var(--ath-red);
        text-decoration: none;
    }

.ath-nav__caret {
    font-size: 13px;
    transition: transform var(--ath-transition);
}

[data-menu].is-open > .ath-nav__trigger .ath-nav__caret {
    transform: rotate(180deg);
}

/* Simple dropdowns (Trainings, Tutorials, Events, account) */
.ath-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    display: none;
    min-width: 240px;
    max-height: 70vh;
    margin: 0;
    padding: 8px;
    overflow-y: auto;
    border: 1px solid var(--ath-border);
    border-radius: var(--ath-radius);
    background: #fff;
    box-shadow: var(--ath-shadow-lg);
    list-style: none;
}

.ath-menu--right {
    right: 0;
    left: auto;
}

    .ath-menu a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border-radius: var(--ath-radius-sm);
        color: var(--ath-ink);
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
    }

        .ath-menu a .fa {
            width: 16px;
            color: var(--ath-muted);
            text-align: center;
        }

        .ath-menu a:hover,
        .ath-menu a:focus {
            background: var(--ath-bg-soft);
            color: var(--ath-red);
        }

.ath-menu__all {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--ath-border);
}

    .ath-menu__all a {
        color: var(--ath-red);
        font-weight: 600;
    }

.ath-menu__divider {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--ath-border);
}

[data-menu].is-open > .ath-menu,
[data-menu].is-open > .ath-mega {
    display: block;
}

/* Hover opens menus on devices with a mouse. */
@media (hover: hover) and (min-width: 992px) {
    .ath-nav__item[data-menu]:hover > .ath-menu,
    .ath-nav__item[data-menu]:hover > .ath-mega {
        display: block;
    }

    /* Invisible bridge so the pointer can travel from the trigger into the panel. */
    .ath-nav__item[data-menu]::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 12px;
    }
}

/* Courses mega menu */
.ath-nav__item--mega {
    position: static;                 /* panel spans the header width */
}

.ath-mega {
    position: absolute;
    top: 100%;
    right: 15px;
    left: 15px;
    z-index: 20;
    display: none;
    overflow: hidden;
    border: 1px solid var(--ath-border);
    border-radius: 0 0 var(--ath-radius) var(--ath-radius);
    background: #fff;
    box-shadow: var(--ath-shadow-lg);
}

    [data-menu].is-open > .ath-mega,
    .ath-nav__item[data-menu]:hover > .ath-mega {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr);
    }

.ath-mega__tabs {
    display: flex;
    flex-direction: column;
    padding: 12px;
    border-right: 1px solid var(--ath-border);
    background: var(--ath-bg-soft);
}

.ath-mega__tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-radius: var(--ath-radius-sm);
    background: transparent;
    color: var(--ath-ink);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

    .ath-mega__tab .fa {
        color: var(--ath-muted);
        opacity: 0;
        transition: opacity var(--ath-transition), transform var(--ath-transition);
    }

    .ath-mega__tab:hover,
    .ath-mega__tab.is-active {
        background: #fff;
        color: var(--ath-red);
        box-shadow: var(--ath-shadow-sm);
    }

        .ath-mega__tab:hover .fa,
        .ath-mega__tab.is-active .fa {
            color: var(--ath-red);
            opacity: 1;
            transform: translateX(2px);
        }

.ath-mega__all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding: 14px 14px 4px;
    color: var(--ath-red);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

    .ath-mega__all:hover,
    .ath-mega__all:focus {
        color: var(--ath-red-hover);
        text-decoration: underline;
    }

.ath-mega__panel {
    max-height: 70vh;
    padding: 20px 24px 24px;
    overflow-y: auto;
}

    .ath-mega__panel[hidden] {
        display: none;
    }

.ath-mega__heading {
    margin: 0 0 14px;
    color: var(--ath-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Sub-technology groups as columns; each lists its courses as compact rows. */
.ath-mega__groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px 28px;
}

.ath-mega__group-title {
    margin: 0 0 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--ath-red-soft);
    color: var(--ath-navy);
    font-size: 14px;
    font-weight: 700;
}

.ath-mega__courses {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Without group titles (single master technology) the course rows use the full width. */
.ath-mega__group:only-child .ath-mega__courses {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px 14px;
}

.ath-mega__group:only-child {
    grid-column: 1 / -1;
}

/* Each course is its own light card, so neighbouring courses are clearly separated.
   Hover: brand-tint background, red accent bar on the left, image zoom and a sliding arrow. */
.ath-mega__course {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 10px 34px 10px 10px;
    overflow: hidden;
    border: 1px solid var(--ath-border);
    border-radius: var(--ath-radius-sm);
    background: var(--ath-bg-soft);
    color: var(--ath-ink);
    text-decoration: none;
    transition: background-color var(--ath-transition), border-color var(--ath-transition), box-shadow var(--ath-transition);
}

    .ath-mega__course::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 3px;
        background: var(--ath-red);
        transform: scaleY(0);
        transition: transform .2s ease;
    }

    .ath-mega__course::after {
        content: "\f105";
        position: absolute;
        top: 50%;
        right: 12px;
        color: var(--ath-red);
        font-family: FontAwesome;
        font-size: 18px;
        opacity: 0;
        transform: translate(-6px, -50%);
        transition: opacity .2s ease, transform .2s ease;
    }

    .ath-mega__course:hover,
    .ath-mega__course:focus {
        border-color: #f3d3d3;
        background: #fdf3f3;
        color: var(--ath-ink);
        text-decoration: none;
        box-shadow: 0 6px 16px -8px rgba(184, 0, 0, .35);
    }

        .ath-mega__course:hover::before,
        .ath-mega__course:focus::before {
            transform: scaleY(1);
        }

        .ath-mega__course:hover::after,
        .ath-mega__course:focus::after {
            opacity: 1;
            transform: translate(0, -50%);
        }

        .ath-mega__course:hover .ath-mega__thumb img,
        .ath-mega__course:focus .ath-mega__thumb img {
            transform: scale(1.08);
        }

.ath-mega__thumb {
    flex: 0 0 72px;
    height: 46px;
    overflow: hidden;
    border-radius: var(--ath-radius-sm);
    background: #fff;
}

    .ath-mega__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .3s ease;
    }

.ath-mega__info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;                     /* lets long text wrap instead of overflowing the row */
}

.ath-mega__name {
    color: var(--ath-navy);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ath-mega__course:hover .ath-mega__name,
.ath-mega__course:focus .ath-mega__name {
    color: var(--ath-red);
}

.ath-mega__meta,
.ath-mega__tools {
    color: var(--ath-muted);
    font-size: 12px;
    line-height: 1.4;
}

/* Tools list: wraps anywhere (it is often "A,B,C" without spaces) and is cut to 2 lines;
   the full list is in the tooltip. */
.ath-mega__tools {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

    .ath-mega__meta .fa,
    .ath-mega__tools .fa {
        margin-right: 4px;
        color: var(--ath-red);
    }

/* Right side: offers, cart, account / login */
.ath-header__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.ath-header__icon > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--ath-navy);
    font-size: 20px;
    text-decoration: none;
    transition: background-color var(--ath-transition), color var(--ath-transition);
}

    .ath-header__icon > a:hover,
    .ath-header__icon > a:focus,
    .ath-header__icon > a.is-open {
        background: var(--ath-bg-soft);
        color: var(--ath-red);
    }

.ath-header__badge {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: var(--ath-radius-pill);
    background: var(--ath-red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

.ath-header__badge--amber {
    background: #ffc107;
    color: #000;
}

.ath-header__badge:empty {
    display: none;
}

.ath-header__login,
.ath-header__register {
    margin-left: 4px;
}

.ath-btn.ath-header__login {
    background: var(--ath-bg-soft);
}

    .ath-btn.ath-header__login:hover,
    .ath-btn.ath-header__login:focus {
        background: #e9edf3;
        color: var(--ath-red);
    }

.ath-account {
    position: relative;
    margin-left: 4px;
}

.ath-account__trigger {
    padding: 0 8px 0 4px;
    border: 1px solid var(--ath-border);
    border-radius: var(--ath-radius-pill);
}

.ath-account__avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ath-red);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.ath-account__name {
    max-width: 120px;
    overflow: hidden;
    color: var(--ath-navy);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hamburger (phones / tablets) */
.ath-header__burger {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: 4px;
    padding: 0;
    border: 1px solid var(--ath-border);
    border-radius: var(--ath-radius-sm);
    background: #fff;
    cursor: pointer;
}

    .ath-header__burger span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: var(--ath-navy);
    }

@media (max-width: 1199px) {
    .ath-nav__trigger,
    .ath-nav__link {
        padding: 0 9px;
        font-size: 14px;
    }

    .ath-account__name {
        display: none;
    }

    /* Not enough room: "Become a Teacher" stays in the footer and the mobile drawer. */
    .ath-nav__link#btnBecomeTeacher {
        display: none;
    }
}

@media (max-width: 991px) {
    .ath-nav,
    .ath-header__login,
    .ath-header__register,
    .ath-account {
        display: none;
    }

    .ath-header__burger {
        display: inline-flex;
    }

    .ath-header__inner {
        min-height: 62px;
    }

    .ath-header__logo img {
        height: 38px;
    }
}

/* Mobile drawer */
.ath-drawer {
    position: fixed;
    inset: 0;
    z-index: 1060;                    /* above the header, offer bar and action bar */
    visibility: hidden;
}

    .ath-drawer.is-open {
        visibility: visible;
    }

.ath-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 16, 27, .55);
    opacity: 0;
    transition: opacity .25s ease;
}

.ath-drawer.is-open .ath-drawer__overlay {
    opacity: 1;
}

.ath-drawer__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: min(360px, 88vw);
    background: #fff;
    box-shadow: var(--ath-shadow-lg);
    transform: translateX(-100%);
    transition: transform .25s ease;
}

.ath-drawer.is-open .ath-drawer__panel {
    transform: translateX(0);
}

.ath-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 12px 16px;
    border-bottom: 1px solid var(--ath-border);
}

    .ath-drawer__head img {
        width: auto;
        height: 36px;
    }

.ath-drawer__close {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--ath-bg-soft);
    color: var(--ath-navy);
    font-size: 26px;
    line-height: 1;
}

.ath-drawer__account {
    padding: 16px;
    border-bottom: 1px solid var(--ath-border);
}

.ath-drawer__hello {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    color: var(--ath-navy);
    font-weight: 700;
}

.ath-drawer__account-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ath-drawer__body {
    flex: 1 1 auto;
    padding: 8px 0 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Accordion sections (<details>) */
.ath-acc {
    border-bottom: 1px solid var(--ath-border);
}

    .ath-acc > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 52px;
        padding: 0 16px;
        color: var(--ath-navy);
        font-size: 16px;
        font-weight: 700;
        list-style: none;
        cursor: pointer;
    }

        .ath-acc > summary::-webkit-details-marker {
            display: none;
        }

        .ath-acc > summary::after {
            content: "\f107";
            color: var(--ath-muted);
            font-family: FontAwesome;
            font-size: 18px;
            transition: transform var(--ath-transition);
        }

    .ath-acc[open] > summary::after {
        transform: rotate(180deg);
    }

    .ath-acc[open] > summary {
        color: var(--ath-red);
    }

.ath-acc--nested {
    border-bottom: 0;
}

    .ath-acc--nested > summary {
        min-height: 44px;
        padding-left: 28px;
        font-size: 15px;
        font-weight: 600;
    }

.ath-acc__body {
    padding-bottom: 8px;
}

.ath-acc__group {
    margin: 8px 0 0;
    padding: 6px 16px 4px 40px;
    color: var(--ath-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ath-acc__links {
    margin: 0;
    padding: 0 0 8px;
    list-style: none;
}

    .ath-acc__links a {
        display: block;
        padding: 10px 16px 10px 28px;
        color: var(--ath-ink);
        font-size: 15px;
        text-decoration: none;
    }

.ath-acc--nested .ath-acc__links a {
    padding-left: 40px;
    font-size: 14px;
}

    .ath-acc__links a:hover,
    .ath-acc__links a:focus {
        background: var(--ath-bg-soft);
        color: var(--ath-red);
    }

.ath-acc__all {
    display: block;
    padding: 10px 16px 10px 28px;
    color: var(--ath-red) !important;
    font-weight: 600;
    text-decoration: none;
}

/* Page behind an open drawer does not scroll. */
body.ath-no-scroll {
    overflow: hidden;
}


/* Shared site components (footer, quick actions, CTA, testimonials, forms)
   ========================================================================== */

/* --- Footer (UCHomeFooter) --- */
.ath-footer {
    clear: both;
    padding: 56px 0 40px;
    background: #0f1726;
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
    line-height: 1.6;
}

.ath-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap: 40px;
}

@media (max-width: 991px) {
    .ath-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

@media (max-width: 575px) {
    .ath-footer {
        padding: 40px 0 32px;
    }

    .ath-footer__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

.ath-footer__logo {
    display: block;
    width: auto;
    max-width: 180px;
    height: auto;
}

.ath-footer__tagline {
    max-width: 320px;
    margin: 16px 0 20px;
    color: rgba(255, 255, 255, .7);
}

.ath-footer__social {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ath-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 17px;
    transition: background-color var(--ath-transition), transform var(--ath-transition);
}

    .ath-footer__social-link:hover,
    .ath-footer__social-link:focus {
        color: #fff;
        text-decoration: none;
        transform: translateY(-2px);
    }

.ath-footer__social-link--fb:hover, .ath-footer__social-link--fb:focus { background: #4267b2; }
.ath-footer__social-link--in:hover, .ath-footer__social-link--in:focus { background: #0077b5; }
.ath-footer__social-link--yt:hover, .ath-footer__social-link--yt:focus { background: #e62117; }

.ath-footer__title {
    margin: 0 0 16px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
}

.ath-footer__title--spaced {
    margin-top: 28px;
}

.ath-footer__links {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .ath-footer__links li {
        margin: 0 0 10px;
    }

    .ath-footer__links a,
    .ath-footer__link-btn {
        padding: 0;
        border: 0;
        background: none;
        color: rgba(255, 255, 255, .75);
        font-size: 14px;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
        transition: color var(--ath-transition);
    }

        .ath-footer__links a:hover,
        .ath-footer__links a:focus,
        .ath-footer__link-btn:hover,
        .ath-footer__link-btn:focus {
            color: #fff;
            text-decoration: underline;
        }

/* Certificate number + Verify joined into one control (button attached to the input). */
.ath-footer__verify {
    display: flex;
    max-width: 360px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--ath-radius-sm);
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
    transition: border-color var(--ath-transition), box-shadow var(--ath-transition);
}

    .ath-footer__verify:focus-within {
        border-color: rgba(255, 255, 255, .6);
        box-shadow: var(--ath-focus);
    }

    .ath-footer__verify .ath-footer__verify-input {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        height: 44px;
        padding: 0 14px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #fff;
        box-shadow: none;
    }

        .ath-footer__verify .ath-footer__verify-input::placeholder {
            color: rgba(255, 255, 255, .55);
        }

        .ath-footer__verify .ath-footer__verify-input:focus {
            outline: none !important;   /* the whole control shows the focus ring */
            box-shadow: none;
        }

    .ath-footer__verify .ath-footer__verify-btn {
        flex: none;
        min-width: 96px;
        min-height: 44px;
        padding: 0 22px;
        border: 0;
        border-radius: 0;
        font-size: 14px;
    }

.ath-footer__payments {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, .85);
    font-size: 32px;
    line-height: 1;
}

.ath-footer-bottom {
    clear: both;
    padding: 14px 0;
    background: #0a101b;
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
}

    .ath-footer-bottom p {
        margin: 0;
        text-align: center;
    }

/* --- Quick actions bar (UCHomeFooter), fixed to the bottom of the screen --- */
.ath-actionbar-spacer {
    height: 48px;
}

.ath-actionbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 990;
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: #090f1a;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .15);
}

.ath-actionbar__list {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ath-actionbar__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px;
    border: 0;
    background: transparent;
    color: #fff !important;
    font-family: var(--ath-font-sans);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ath-transition);
}

    .ath-actionbar__item:hover,
    .ath-actionbar__item:focus {
        background: #b80000;
        color: #fff !important;
        text-decoration: none;
    }

    .ath-actionbar__item .fa,
    .ath-actionbar__item span:not(.ath-actionbar__count) {
        color: #fff !important;
    }

    .ath-actionbar__item .fa {
        font-size: 16px;
    }

    /* Helpline is shown in the selected (hover) colour so it stands out. */
    .ath-actionbar__item--highlight {
        background: #b80000;
    }

        .ath-actionbar__item--highlight:hover,
        .ath-actionbar__item--highlight:focus {
            background: #990000;
        }

.ath-actionbar__label--short {
    display: none;
}

.ath-actionbar__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--ath-radius-pill);
    background: #fff;
    color: var(--ath-red-text) !important;
    font-size: 11px;
    font-weight: 700;
}

    .ath-actionbar__count:empty {
        display: none;
    }

@media (max-width: 991px) {
    .ath-actionbar__item {
        padding: 0 12px;
        font-size: 13px;
    }
}

/* Phones: five equal icon buttons with short labels. */
@media (max-width: 767px) {
    .ath-actionbar-spacer {
        height: 58px;
    }

    .ath-actionbar__list {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }

    .ath-actionbar__item {
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        width: 100%;
        min-height: 58px;
        padding: 6px 2px;
        font-size: 11px;
    }

        .ath-actionbar__item .fa {
            font-size: 18px;
        }

    .ath-actionbar__label {
        display: none;
    }

    .ath-actionbar__label--short {
        display: block;
    }

    .ath-actionbar__count {
        position: absolute;
        top: 5px;
        left: calc(50% + 4px);
        min-width: 18px;
        height: 18px;
        font-size: 10px;
    }
}

/* --- Certificate preview modal --- */
@media (min-width: 768px) {
    .modal-dialog.ath-modal-certificate {
        width: calc(100% - 40px);
        max-width: 1110px;
    }
}

.ath-modal-certificate__body {
    padding: var(--ath-space-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ath-modal-certificate .modal-footer .ath-btn {
    gap: 6px;
}

/* --- Call to action band (UCFindYourProgram) --- */
/* clear: both - pages like course details float their content without clearing it;
   without this the band background paints behind that content. */
.ath-cta {
    clear: both;
    padding: 48px 0;
    background: linear-gradient(120deg, var(--ath-navy) 0%, var(--ath-blue) 60%, #6e1a52 100%);
    color: #fff;
}

.ath-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.ath-cta__text {
    flex: 1 1 420px;
}

.ath-cta__title {
    margin: 0;
    color: #fff;
    font-size: clamp(22px, 18px + 1vw, 28px);
    font-weight: 700;
    line-height: 1.3;
}

.ath-cta__lead {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .85);
    font-size: 16px;
}

@media (max-width: 767px) {
    .ath-cta {
        padding: 40px 0;
        text-align: center;
    }

    .ath-cta__inner {
        flex-direction: column;
    }

        .ath-cta__inner .ath-btn {
            width: 100%;
            white-space: normal;
        }
}

/* --- Testimonials (UCHomeTestimonials, Owl Carousel 2) --- */
.ath-testimonials .owl-stage-outer {
    padding: 8px 4px 16px;
}

.ath-testimonials .owl-stage {
    display: flex;
}

.ath-testimonials .owl-item {
    display: flex;
}

.ath-testimonial {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 28px 24px 24px;
    border: 1px solid var(--ath-border);
    border-radius: var(--ath-radius);
    background: #fff;
    box-shadow: var(--ath-shadow-sm);
}

.ath-testimonial__quote {
    margin: 0 0 20px;
    font-size: 15px;
    font-weight: 500;
}

    .ath-testimonial__quote p {
        display: -webkit-box;
        margin: 12px 0 0;
        overflow: hidden;
        color: var(--ath-ink);
        font-weight: 500;
        line-height: 1.7;
        white-space: pre-line;
        -webkit-line-clamp: 7;
        -webkit-box-orient: vertical;
    }

.ath-testimonial__mark {
    color: var(--ath-red);
    font-size: 24px;
}

.ath-testimonial__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--ath-border);
}

.ath-testimonials .owl-carousel .owl-item img.ath-testimonial__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--ath-bg-soft);
}

.ath-testimonial__name {
    color: var(--ath-navy);
    font-size: 15px;
    font-weight: 700;
}

.ath-testimonials .owl-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

    .ath-testimonials .owl-nav.disabled {
        display: none;
    }

    .ath-testimonials .owl-nav button.owl-prev,
    .ath-testimonials .owl-nav button.owl-next {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1px solid var(--ath-border);
        border-radius: 50%;
        background: #fff;
        color: var(--ath-navy);
        font-size: 22px;
        transition: background-color var(--ath-transition), box-shadow var(--ath-transition);
    }

        .ath-testimonials .owl-nav button.owl-prev:hover,
        .ath-testimonials .owl-nav button.owl-next:hover {
            background: var(--ath-bg-soft);
            box-shadow: var(--ath-shadow-sm);
        }

/* --- Enquiry forms --- */

/* Wide form dialogs (enquiry modals): two fields per row from tablet up. */
@media (min-width: 768px) {
    .modal-dialog.ath-modal-form {
        width: 720px;
        max-width: calc(100% - 40px);
        margin: 40px auto;
    }
}

.ath-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

    .ath-form-grid > .ath-field--full {
        grid-column: 1 / -1;
    }

    /* Last row: reCAPTCHA on the left, the submit button bottom-right. */
    .ath-form-grid > .ath-form-actions {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }

@media (max-width: 767px) {
    .ath-form-grid {
        grid-template-columns: 1fr;
    }

        .ath-form-grid > .ath-form-actions .ath-btn {
            width: 100%;
        }
}

/* reCAPTCHA is a fixed 304px widget; scale it down where the form is narrower. */
@media (max-width: 400px) {
    .ath-form [id^="ReCaptchContainer"] {
        transform: scale(.86);
        transform-origin: 0 0;
    }
}

/* Course details sidebar form */
.ath-request-card {
    height: auto;
    margin-bottom: var(--ath-space-5);
}

    .ath-request-card .ath-card__body {
        padding: var(--ath-space-5);
    }

@media (min-width: 992px) and (max-width: 1199px) {
    .ath-request-card [id^="ReCaptchContainer"] {
        transform: scale(.82);
        transform-origin: 0 0;
    }
}

.modal-title.ath-h4 {
    margin: 0;
    line-height: 1.4;
}


/* Home hero (Index.aspx)
   ========================================================================== */
.ath-hero {
    position: relative;
    clear: both;
    overflow: hidden;
    padding: clamp(28px, 16px + 3vw, 56px) 0;
    background:
        radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 22px 22px,
        radial-gradient(circle at 85% 20%, rgba(184, 0, 0, .45) 0, rgba(184, 0, 0, 0) 45%),
        radial-gradient(circle at 5% 100%, rgba(63, 111, 181, .25) 0, rgba(63, 111, 181, 0) 40%),
        linear-gradient(135deg, #171a24 0%, #2a2e3d 100%);
    color: #fff;
}

/* Bootstrap's .container/.row clearfix ::before/::after would become grid/flex items
   (an empty first cell pushes the content into the second column). */
.ath-hero__inner::before, .ath-hero__inner::after,
.ath-hero__trainings-inner::before, .ath-hero__trainings-inner::after,
.ath-header__inner::before, .ath-header__inner::after,
.ath-cta__inner::before, .ath-cta__inner::after,
.ath-dash-hero__inner::before, .ath-dash-hero__inner::after,
.ath-course-hero__row::before, .ath-course-hero__row::after,
.ath-cart .row::before, .ath-cart .row::after,
.ath-tutorial .row::before, .ath-tutorial .row::after {
    content: none;
    display: none;
}

.ath-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
}

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

.ath-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--ath-radius-pill);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
    font-weight: 600;
}

    .ath-hero__eyebrow .fa {
        color: #ffc107;
    }

.ath-hero__title {
    margin: 20px 0 16px;
    color: #fff;
    font-size: clamp(32px, 20px + 3.2vw, 58px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.02em;
}

    /* Rotating word on its own line, so typing does not reflow the heading. */
    .ath-hero__title .typewrite {
        display: block;
        min-height: 1.15em;
        color: #ff6b6b;
    }

.ath-hero__lead {
    max-width: 560px;
    margin: 0 0 var(--ath-space-5);
    color: rgba(255, 255, 255, .8);
    font-size: clamp(16px, 14px + .4vw, 19px);
    line-height: 1.6;
}

/* Search bar: one rounded control (icon + field + button). */
.ath-hero__search {
    display: flex;
    align-items: center;
    max-width: 580px;
    padding: 6px 6px 6px 18px;
    border-radius: var(--ath-radius-pill);
    background: #fff;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .5);
    transition: box-shadow var(--ath-transition);
}

    .ath-hero__search:focus-within {
        box-shadow: 0 0 0 4px rgba(255, 107, 107, .35), 0 18px 40px -12px rgba(0, 0, 0, .5);
    }

.ath-hero__search-icon {
    flex: none;
    color: var(--ath-muted);
    font-size: 18px;
}

.ath-hero__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--ath-ink);
    font-size: 16px;
    outline: none !important;         /* the whole bar shows the focus ring */
}

    /* Beat the global input focus styles (border + ring); the bar's :focus-within ring is enough. */
    .ath-hero__search .ath-hero__input,
    .ath-hero__search .ath-hero__input:hover,
    .ath-hero__search .ath-hero__input:focus,
    .ath-hero__search .ath-hero__input:focus-visible,
    .ath-hero__search .ath-hero__input:active {
        border: 0 !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent;
    }

    .ath-hero__input::placeholder {
        color: #8a93a3;
    }

.ath-hero__search .ath-hero__search-btn {
    flex: none;
    min-height: 48px;
    padding: 0 26px;
}

.ath-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: var(--ath-space-5);
}

.ath-btn.ath-hero__ghost {
    border-color: rgba(255, 255, 255, .35);
    background: transparent;
    color: #fff;
}

    .ath-btn.ath-hero__ghost:hover,
    .ath-btn.ath-hero__ghost:focus {
        border-color: #fff;
        background: rgba(255, 255, 255, .1);
        color: #fff;
        box-shadow: none;
    }

/* Stats: number above the label (dt comes first in the markup). */
.ath-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ath-space-6);
    margin: var(--ath-space-6) 0 0;
    padding-top: var(--ath-space-5);
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.ath-hero__stat {
    display: flex;
    flex-direction: column-reverse;
}

    .ath-hero__stat dd {
        margin: 0;
        color: #fff;
        font-size: clamp(26px, 20px + 1.2vw, 36px);
        font-weight: 800;
        line-height: 1.1;
    }

    .ath-hero__stat dt {
        margin-top: 4px;
        color: rgba(255, 255, 255, .7);
        font-size: 13px;
        font-weight: 500;
    }

/* Visual: photo in a glass frame with two floating info cards. */
.ath-hero__visual {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
}

.ath-hero__frame {
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 24px;
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6), 0 0 80px -20px rgba(184, 0, 0, .5);
}

    .ath-hero__frame img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 16px;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

.ath-hero__float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    background: #fff;
    color: var(--ath-muted);
    font-size: 12px;
    line-height: 1.35;
    box-shadow: var(--ath-shadow-lg);
    animation: ath-float 6s ease-in-out infinite;
}

    .ath-hero__float strong {
        display: block;
        color: var(--ath-navy);
        font-size: 14px;
    }

.ath-hero__float--top {
    top: 10%;
    left: -28px;
}

.ath-hero__float--bottom {
    right: -20px;
    bottom: 10%;
    animation-delay: -3s;
}

.ath-hero__float-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ath-red-soft);
    color: var(--ath-red);
    font-size: 16px;
}

.ath-hero__float-icon--amber {
    background: #fff4d6;
    color: #b7791f;
}

@keyframes ath-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@media (max-width: 1199px) {
    .ath-hero__float--top { left: -12px; }
    .ath-hero__float--bottom { right: -8px; }
}

@media (max-width: 575px) {
    .ath-hero__float {
        display: none;
    }

    .ath-hero__search {
        padding-left: 14px;
    }

    .ath-hero__search .ath-hero__search-btn {
        padding: 0 18px;
    }
}

/* Popular trainings chips */
.ath-hero__trainings {
    margin-top: clamp(32px, 4vw, 56px);
}

.ath-hero__trainings-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

/* Hero chips are links on a dark background: keep them white in every state. */
.ath-hero__chips > li {
    margin: 0;
    padding: 0;
}

    .ath-hero__chips > li::before,
    .ath-hero__chips > li::after,
    .ath-hero__chip::before,
    .ath-hero__chip::after {
        content: none;
        display: none;
    }

.ath-hero__chip,
.ath-hero__chip:visited {
    color: #fff;
}

.ath-hero__trainings-label {
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ath-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ath-hero__chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--ath-radius-pill);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--ath-transition), color var(--ath-transition), border-color var(--ath-transition);
}

    .ath-hero__chip:hover,
    .ath-hero__chip:focus {
        border-color: #fff;
        background: #fff;
        color: var(--ath-navy);
        text-decoration: none;
    }


/* Home page (Index.aspx + UCHome* controls)
   ========================================================================== */

/* Centered button under a section's content. */
.ath-section__cta {
    margin-top: var(--ath-space-6);
    text-align: center;
}

/* Text sections (About us, Learning platform): readable line length. */
.ath-home-text {
    max-width: 860px;
    margin: 0 auto;
}

    .ath-home-text .ath-prose {
        margin-bottom: var(--ath-space-5);
    }

    .ath-home-text .ath-prose:last-child {
        margin-bottom: 0;
    }

/* Course cards */
.ath-course-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: #ffc107;
    color: #000;
    box-shadow: var(--ath-shadow-sm);
}

.ath-course-card__meta {
    padding: 0;
    list-style: none;
}

    .ath-course-card__meta li {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .ath-course-card__meta .fa,
    .ath-course-card__meta .fa.fa-laptop {
        color: var(--ath-red) !important;
    }

/* Star rating (admin-set; rendered by CourseRating.Stars / athRatingHtml). */
.ath-rating {
    display: flex;
    align-items: center;
    gap: 2px;
}

.ath-rating__value {
    margin-left: 6px;
    color: inherit;
    font-size: .95em;
    font-weight: 700;
    letter-spacing: 0;
}

.ath-course-card__rating {
    margin-bottom: var(--ath-space-2);
    color: #f5a623;
    font-size: 13px;
}

    .ath-course-card__rating .ath-rating__value {
        color: var(--ath-ink);
    }

/* Course card hover preview (CoursePreview.cs markup, positioned by ath-forms.js).
   Fixed panel beside the card with an arrow pointing at it; desktop + mouse only. */
.ath-course-card template {
    display: none;
}

.ath-course-pop {
    position: fixed;
    z-index: 998;                     /* under the sticky header (999) */
    display: flex;
    flex-direction: column;
    width: 480px;                     /* JS narrows it when there is less room */
    border: 1px solid var(--ath-border);
    border-radius: 14px;
    background: var(--ath-surface);
    color: var(--ath-ink);
    box-shadow: 0 24px 48px -12px rgba(1, 35, 69, .28), var(--ath-shadow-sm);
    font-size: 14px;
    line-height: 1.5;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

    .ath-course-pop.is-left {
        transform: translateX(6px);
    }

    .ath-course-pop.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: none;         /* tooltip: the mouse passes through to the cards under it */
        transform: none;
    }

    /* Arrow towards the card */
    .ath-course-pop::before {
        content: "";
        position: absolute;
        top: var(--ath-pop-arrow, 40px);
        left: -8px;
        width: 14px;
        height: 14px;
        border-bottom: 1px solid var(--ath-border);
        border-left: 1px solid var(--ath-border);
        background: var(--ath-surface);
        transform: translateY(-50%) rotate(45deg);
    }

    .ath-course-pop.is-left::before {
        right: -8px;
        left: auto;
        border: 0;
        border-top: 1px solid var(--ath-border);
        border-right: 1px solid var(--ath-border);
    }

/* Content is clipped (not scrolled - the panel takes no mouse input) on very short screens. */
.ath-course-pop__body {
    min-height: 0;
    overflow: hidden;
    padding: 18px 22px 20px;
    border-radius: inherit;
}

.ath-pop__head {
    margin-bottom: 8px;
}

.ath-pop__eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 10px;
    border-radius: var(--ath-radius-pill);
    background: var(--ath-red-soft);
    color: var(--ath-red-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ath-pop__title {
    margin: 0 0 6px;
    color: var(--ath-navy);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

.ath-pop__rating {
    color: #f5a623;
    font-size: 13px;
}

    .ath-pop__rating .ath-rating__value {
        color: var(--ath-ink);
    }

.ath-pop__desc {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 12px;
    color: var(--ath-muted);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.ath-pop__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

    .ath-pop__facts li {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: var(--ath-radius-pill);
        background: var(--ath-bg-soft);
        color: var(--ath-ink);
        font-size: 12px;
        font-weight: 600;
    }

    .ath-pop__facts .fa {
        color: var(--ath-red);
    }

.ath-pop__label {
    margin: 0 0 6px;
    color: var(--ath-navy);
    font-size: 13px;
    font-weight: 700;
}

/* Two columns: keeps the panel short. */
.ath-pop__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

    .ath-pop__list li {
        position: relative;
        margin: 0;
        padding-left: 22px;
    }

    .ath-pop__list .fa {
        position: absolute;
        top: 3px;
        left: 0;
        color: var(--ath-success);
    }

.ath-pop__audience {
    margin: 0 0 14px;
    padding-top: 10px;
    border-top: 1px solid var(--ath-border);
    color: var(--ath-muted);
    font-size: 13px;
}

    .ath-pop__audience strong {
        color: var(--ath-ink);
    }

.ath-pop__hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--ath-muted);
    font-size: 12px;
}

    .ath-pop__hint .fa {
        color: var(--ath-red);
    }

@media (prefers-reduced-motion: reduce) {
    .ath-course-pop {
        transition: none;
        transform: none;
    }
}

/* The cart button sits above the card's stretched title link.
   White background, red border and text; fills red on hover. */
.ath-course-card .ath-course-card__cart {
    position: relative;
    z-index: 2;
    border-color: var(--ath-red);
    background: #fff;
    color: var(--ath-red);
}

    .ath-course-card .ath-course-card__cart:hover,
    .ath-course-card .ath-course-card__cart:focus {
        background: var(--ath-red);
        color: #fff;
    }

/* Advantages */
.ath-advantage .ath-card__body {
    padding: var(--ath-space-5);
}

.ath-advantage__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--ath-space-4);
    border-radius: 50%;
    background: var(--ath-red-soft);
    color: var(--ath-red);
    font-size: 18px;
}

.ath-advantage .ath-card__text {
    margin-bottom: 0;
}

/* Inner pages (shared)
   ========================================================================== */

/* Page banner used by ~19 public pages: <div class="pagesinner"><div class="container">
   <span>Label</span><h1>Title</h1></div></div>. The red label on #232636 was ~2:1 contrast. */
.pagesinner {
    clear: both;
    margin-top: 0;                    /* legacy 66px offset was for the old fixed header */
    padding: clamp(28px, 18px + 2.5vw, 48px) 0;
    background:
        radial-gradient(circle at 88% 15%, rgba(184, 0, 0, .35) 0, rgba(184, 0, 0, 0) 45%),
        linear-gradient(135deg, #1c1f2b 0%, #2a2e3d 100%);
}

    .pagesinner span {
        display: inline-block;
        color: var(--ath-red-light);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .pagesinner h1 {
        margin: 6px 0 0;
        color: #fff;
        font-size: var(--ath-h1);
        font-weight: 700;
        line-height: 1.2;
    }

/* List toolbar: filter box + result count. */
.ath-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ath-space-3) var(--ath-space-5);
    margin-bottom: var(--ath-space-5);
}

.ath-list-toolbar__search {
    position: relative;
    flex: 1 1 320px;
    max-width: 480px;
}

    .ath-list-toolbar__search .fa {
        position: absolute;
        top: 50%;
        left: 14px;
        transform: translateY(-50%);
        color: var(--ath-muted);
        pointer-events: none;
    }

    .ath-list-toolbar__search .ath-input {
        padding-left: 40px;
    }

.ath-list-toolbar__count {
    margin: 0;
    color: var(--ath-muted);
    font-size: var(--ath-text-sm);
    font-weight: 600;
}

.ath-search-note {
    margin: 0 0 var(--ath-space-5);
    color: var(--ath-ink);
}

    .ath-search-note .ath-link {
        margin-left: var(--ath-space-3);
    }

/* Empty / no-results state. */
.ath-empty {
    max-width: 480px;
    margin: var(--ath-space-6) auto;
    padding: var(--ath-space-6) var(--ath-space-5);
    border: 1px dashed var(--ath-border);
    border-radius: var(--ath-radius);
    color: var(--ath-muted);
    text-align: center;
}

    .ath-empty .fa {
        margin-bottom: var(--ath-space-3);
        color: #c7cdd8;
        font-size: 36px;
    }

    .ath-empty p {
        margin: 0 0 var(--ath-space-4);
        font-size: 16px;
    }

.ath-courses-page {
    padding-top: var(--ath-space-6);
}


/* Course details (user/CourseDetails.aspx)
   ========================================================================== */

/* Graphite hero (the page's original banner colour): distinct from the blue offer bar and the
   dark navy action bar, with a soft brand-red glow. */
.ath-course-hero {
    clear: both;
    margin-top: 0;                    /* the site header is sticky (in the page flow), no offset needed */
    padding: clamp(28px, 16px + 3vw, 56px) 0;
    background:
        radial-gradient(circle at 88% 15%, rgba(184, 0, 0, .35) 0, rgba(184, 0, 0, 0) 45%),
        linear-gradient(135deg, #1c1f2b 0%, #2a2e3d 100%);
    color: #fff;
}

.ath-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--ath-space-4);
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
}

    .ath-breadcrumb a {
        color: rgba(255, 255, 255, .75);
        text-decoration: none;
    }

        .ath-breadcrumb a:hover,
        .ath-breadcrumb a:focus {
            color: #fff;
            text-decoration: underline;
        }

    .ath-breadcrumb [aria-current] {
        color: #fff;
        font-weight: 600;
    }

.ath-course-hero__title {
    margin: 0 0 var(--ath-space-3);
    color: #fff;
    font-size: var(--ath-h1);
    font-weight: 700;
    line-height: 1.2;
}

.ath-course-hero__desc {
    max-width: 680px;
    margin-bottom: var(--ath-space-3);
    color: rgba(255, 255, 255, .8);
    font-size: 16px;
    line-height: 1.6;
}

    .ath-course-hero__desc p {
        margin: 0 0 8px;
        color: inherit;
    }

.ath-course-hero__rating {
    margin-bottom: var(--ath-space-5);
    color: #ffc107;
    letter-spacing: 3px;
}

/* Key facts: 2 per row on phones, 4 per row (wide ones span 2) from tablet up. */
.ath-course-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ath-space-3);
    margin: 0;
}

@media (min-width: 768px) {
    .ath-course-facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ath-course-facts__item--wide {
        grid-column: span 2;
    }
}

.ath-course-facts__item {
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--ath-radius-sm);
    background: rgba(255, 255, 255, .05);
}

    /* Legacy CSS forces .fa.fa-laptop to black with !important. */
    .ath-course-facts__item dt .fa,
    .ath-course-facts__item dt .fa.fa-laptop {
        color: var(--ath-red-light) !important;
    }

    .ath-course-facts__item dt {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 4px;
        color: rgba(255, 255, 255, .65);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .ath-course-facts__item dd {
        margin: 0;
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        word-break: break-word;
    }

/* Under the course image: price on the first row, Add to cart below it, centred horizontally
   and (from desktop up) vertically in the space left below the image. */
.ath-course-hero__buy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ath-space-3);
    margin-top: var(--ath-space-4);
    text-align: center;
}

@media (min-width: 992px) {
    /* Columns stretch to the row height so the buy block can centre in the free space. */
    .ath-course-hero__row {
        display: flex;
    }

        .ath-course-hero__row > [class*="col-"] {
            float: none;
        }

    .ath-course-hero__aside {
        display: flex;
        flex-direction: column;
    }

        .ath-course-hero__aside .ath-course-hero__buy {
            flex: 1 1 auto;
            min-height: 120px;
        }
}

.ath-course-hero__price {
    margin: 0;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.ath-course-hero__buy .ath-btn {
    min-width: 160px;
}

/* Course image: a translucent "glass" frame with rounded corners around a rounded image,
   a soft red glow behind it, and a caption bar (play button + label) at the bottom. */
.ath-course-hero__media {
    position: relative;
    display: block;
    margin-top: var(--ath-space-5);
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 20px;
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .55), 0 0 60px -10px rgba(184, 0, 0, .45);
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
}

@media (min-width: 992px) {
    .ath-course-hero__media {
        margin-top: 0;
    }
}

    .ath-course-hero__media:hover,
    .ath-course-hero__media:focus {
        text-decoration: none;
        transform: translateY(-3px);
        box-shadow: 0 28px 56px -12px rgba(0, 0, 0, .6), 0 0 70px -8px rgba(184, 0, 0, .55);
    }

.ath-course-hero__frame {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
    aspect-ratio: 16 / 10;
}

    .ath-course-hero__frame img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s ease;
    }

.ath-course-hero__media:hover .ath-course-hero__frame img,
.ath-course-hero__media:focus .ath-course-hero__frame img {
    transform: scale(1.04);
}

.ath-course-hero__caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 28px 16px 14px;
    background: linear-gradient(180deg, rgba(10, 12, 20, 0) 0%, rgba(10, 12, 20, .85) 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.ath-course-hero__play {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ath-red);
    color: #fff;
    font-size: 13px;
    box-shadow: 0 0 0 6px rgba(184, 0, 0, .25);
    transition: transform var(--ath-transition);
}

    .ath-course-hero__play .fa {
        margin-left: 3px;
    }

.ath-course-hero__media:hover .ath-course-hero__play,
.ath-course-hero__media:focus .ath-course-hero__play {
    transform: scale(1.1);
}

/* Section tabs (legacy scripts toggle .fixHeader to pin them under the header). */
/* Sticky under the site header: the script on the page sets "top" to the header's bottom
   edge (header height changes with the offer bar and screen size). */
.inner-bottom-menu .cornav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 900;
    border-bottom: 1px solid var(--ath-border);
    background: #fff;
}

    .inner-bottom-menu .cornav.is-stuck {
        box-shadow: var(--ath-shadow);
    }

.inner-bottom-menu ul.fixmenu {
    display: flex;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    white-space: nowrap;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

    .inner-bottom-menu ul.fixmenu li a {
        display: inline-block;
        padding: 18px 16px 15px;
        border-bottom: 3px solid transparent;
        color: var(--ath-muted);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

        .inner-bottom-menu ul.fixmenu li a:hover,
        .inner-bottom-menu ul.fixmenu li a:focus {
            color: var(--ath-navy);
        }

    .inner-bottom-menu ul.fixmenu li a.actifix {
        border-bottom-color: var(--ath-red);
        color: var(--ath-navy);
    }

/* Content sections */
.ath-course-body {
    padding-top: var(--ath-space-5);
    padding-bottom: var(--ath-space-7);
}

/* display: flow-root contains the floated CMS content (e.g. two-column lists), so the bottom
   border sits below all of it and the next section heading starts at the left edge. */
.ath-course-section {
    display: flow-root;
    clear: both;
    min-height: 0;
    padding: var(--ath-space-6) 0;
    border-bottom: 1px solid var(--ath-border);
    text-align: left;
}

    .ath-course-section:last-child {
        border-bottom: 0;
    }

.ath-course-section__title {
    margin: 0 0 var(--ath-space-4);
    color: var(--ath-navy);
    font-size: var(--ath-h3);
    font-weight: 700;
}

.ath-checklist {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .ath-checklist li {
        position: relative;
        margin-bottom: 12px;
        padding-left: 32px;
        color: var(--ath-ink);
        font-size: 16px;
        font-weight: 500;
        line-height: 1.5;
    }

        .ath-checklist li:empty {
            display: none;
        }

        .ath-checklist li::before {
            content: "\f00c";
            position: absolute;
            top: 2px;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--ath-red-soft);
            color: var(--ath-red);
            font-family: FontAwesome;
            font-size: 11px;
        }

/* Features comparison table */
.ath-compare {
    margin: 0;
    background: #fff;
}

    .ath-compare th,
    .ath-compare td {
        padding: 12px 16px !important;
        border-color: var(--ath-border) !important;
        vertical-align: middle !important;
    }

    .ath-compare thead th {
        background: var(--ath-bg-soft);
        color: var(--ath-navy);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .ath-compare thead th:not(:first-child),
    .ath-compare td {
        width: 110px;
        text-align: center;
    }

    .ath-compare tbody th {
        color: var(--ath-ink);
        font-weight: 500;
    }

    .ath-compare .fa-check {
        color: var(--ath-success);
        font-size: 18px;
    }

    .ath-compare .fa-times {
        color: var(--ath-red);
        font-size: 18px;
    }

/* Advantages accordion */
.ath-accordion .panel {
    margin-bottom: 10px !important;
    overflow: hidden;
    border: 1px solid var(--ath-border) !important;
    border-radius: var(--ath-radius-sm) !important;
    box-shadow: none;
}

.ath-accordion .panel-heading {
    padding: 0 !important;
    border: 0;
    background: #fff !important;
}

.ath-accordion .panel-title {
    margin: 0;
    font-size: 16px;
}

    .ath-accordion .panel-title a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        color: var(--ath-navy);
        font-weight: 600;
        text-decoration: none;
    }

        .ath-accordion .panel-title a .fa {
            color: var(--ath-red);
            transition: transform var(--ath-transition);
        }

.ath-accordion .panel-body {
    padding: 0 16px 16px !important;
    border-top: 0 !important;
    color: var(--ath-muted);
    line-height: 1.6;
}

/* Media list */
.ath-media-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ath-media-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 14px 16px;
    border: 1px solid var(--ath-border);
    border-radius: var(--ath-radius-sm);
    background: #fff;
}

    .ath-media-item + .ath-media-item {
        margin-top: 10px;
    }

.ath-media-item__name {
    display: flex;
    flex: 1 1 260px;
    align-items: center;
    gap: 10px;
    color: var(--ath-ink);
    font-weight: 500;
}

    .ath-media-item__name .fa {
        color: var(--ath-red);
        font-size: 18px;
    }

.ath-media-item__kind {
    padding: 1px 8px;
    border-radius: var(--ath-radius-pill);
    background: var(--ath-bg-soft);
    color: var(--ath-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.ath-media-item__locked {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ath-muted);
    font-size: 13px;
}

.ath-media-item--empty {
    color: var(--ath-muted);
}

@media (min-width: 768px) {
    .modal-dialog.ath-modal-media {
        width: 900px;
        max-width: calc(100% - 40px);
    }
}

/* Sidebar form spacing next to the content. */
.ath-course-body .ath-request-card {
    margin-top: var(--ath-space-6);
}


/* Cart (user/UC/UCMyCart.ascx)
   ========================================================================== */
.ath-cart {
    padding-top: var(--ath-space-6);
}

.ath-cart__heading {
    margin: 0 0 var(--ath-space-4);
    color: var(--ath-navy);
    font-size: var(--ath-h3);
    font-weight: 700;
}

.ath-cart__count {
    color: var(--ath-muted);
    font-size: 16px;
    font-weight: 500;
}

.ath-cart-list {
    margin: 0 0 var(--ath-space-4);
    padding: 0;
    list-style: none;
}

/* Cart row: image | title + course facts | price + remove (right). */
.ath-cart-item {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) auto;
    gap: var(--ath-space-4);
    align-items: start;
    padding: var(--ath-space-4);
    border: 1px solid var(--ath-border);
    border-radius: var(--ath-radius);
    background: #fff;
    box-shadow: var(--ath-shadow-sm);
}

    .ath-cart-item + .ath-cart-item {
        margin-top: var(--ath-space-3);
    }

.ath-cart-item__media {
    display: block;
    overflow: hidden;
    border-radius: var(--ath-radius-sm);
    background: var(--ath-bg-soft);
    aspect-ratio: 16 / 10;
}

    .ath-cart-item__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.ath-cart-item__body {
    min-width: 0;
}

.ath-cart-item__title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

    .ath-cart-item__title a {
        color: var(--ath-navy);
        text-decoration: none;
    }

        .ath-cart-item__title a:hover,
        .ath-cart-item__title a:focus {
            color: var(--ath-red);
        }

.ath-cart-item__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

    .ath-cart-item__facts li {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 10px;
        border-radius: var(--ath-radius-pill);
        background: var(--ath-bg-soft);
        color: var(--ath-ink);
        font-size: 13px;
        font-weight: 500;
    }

        .ath-cart-item__facts li .fa {
            color: var(--ath-red);
        }

.ath-cart-item__audience {
    display: flex;
    gap: 8px;
    margin: 0 0 8px;
    color: var(--ath-muted);
    font-size: 13px;
    line-height: 1.5;
}

    .ath-cart-item__audience .fa {
        margin-top: 3px;
        color: var(--ath-red);
    }

    .ath-cart-item__audience span {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .ath-cart-item__audience strong {
        color: var(--ath-ink);
        font-weight: 600;
    }

.ath-cart-item__details {
    font-size: 14px;
}

.ath-cart-item__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ath-space-3);
    align-self: stretch;
    text-align: right;
}

.ath-cart-item__price {
    margin: 0;
    color: var(--ath-navy);
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
}

.ath-cart-item__remove {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--ath-border);
    border-radius: var(--ath-radius-pill);
    color: var(--ath-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--ath-transition), border-color var(--ath-transition), background-color var(--ath-transition);
}

    .ath-cart-item__remove:hover,
    .ath-cart-item__remove:focus {
        border-color: var(--ath-red);
        background: var(--ath-red-soft);
        color: var(--ath-red);
        text-decoration: none;
    }

/* Tablets: image above the text. Phones: price + remove on one row at the bottom. */
@media (max-width: 767px) {
    .ath-cart-item {
        grid-template-columns: 120px minmax(0, 1fr);
    }

    .ath-cart-item__side {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        padding-top: var(--ath-space-3);
        border-top: 1px solid var(--ath-border);
    }
}

@media (max-width: 479px) {
    .ath-cart-item {
        grid-template-columns: 1fr;
    }
}

.ath-cart__subtotal {
    margin: 0 0 var(--ath-space-3);
    color: var(--ath-muted);
    text-align: right;
}

    .ath-cart__subtotal strong {
        margin-left: 8px;
        color: var(--ath-navy);
        font-size: 18px;
    }

/* Order summary: sticks beside the list on desktop, follows it on phones. */
.ath-cart-summary {
    height: auto;
    margin-top: var(--ath-space-5);
}

@media (min-width: 992px) {
    /* Columns stretch to the row height so the summary can stay in view while scrolling. */
    .ath-cart .row {
        display: flex;
    }

        .ath-cart .row > [class*="col-"] {
            float: none;
        }

    .ath-cart-summary {
        position: sticky;
        top: 140px;
        margin-top: 0;
    }
}

.ath-cart-summary .ath-card__body {
    padding: var(--ath-space-5);
}

.ath-cart-summary__title {
    margin: 0 0 var(--ath-space-4);
    color: var(--ath-navy);
    font-size: 20px;
    font-weight: 700;
}

.ath-promo {
    margin-bottom: var(--ath-space-4);
    padding-bottom: var(--ath-space-4);
    border-bottom: 1px solid var(--ath-border);
}

/* Promo code box + button joined into one control (same pattern as the footer
   "Verify certificate"). After a code is applied the box is disabled and "Remove" replaces "Apply". */
.ath-promo__row {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--ath-border);
    border-radius: var(--ath-radius-sm);
    background: #fff;
    transition: border-color var(--ath-transition), box-shadow var(--ath-transition);
}

    .ath-promo__row:focus-within {
        border-color: var(--ath-blue-500);
        box-shadow: var(--ath-focus);
    }

    .ath-promo__row .ath-input {
        flex: 1 1 auto;
        min-width: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        text-transform: uppercase;
    }

        .ath-promo__row .ath-input:focus {
            outline: none !important;   /* the whole control shows the focus ring */
            box-shadow: none;
        }

        .ath-promo__row .ath-input::placeholder {
            text-transform: none;
        }

        .ath-promo__row .ath-input[disabled] {
            background: var(--ath-bg-soft);
            color: var(--ath-navy);
            font-weight: 600;
        }

    .ath-promo__row .ath-btn {
        flex: none;
        min-width: 92px;
        padding: 0 20px;
        border: 0;
        border-radius: 0;
        font-size: 14px;
    }

    .ath-promo__row .ath-promo__remove {
        border-left: 1px solid var(--ath-border);
        background: #fff;
        color: var(--ath-red);
    }

        .ath-promo__row .ath-promo__remove:hover,
        .ath-promo__row .ath-promo__remove:focus {
            background: var(--ath-red-soft);
            color: var(--ath-red);
            box-shadow: none;
        }

/* Message set by UCMyCart.ascx.cs ShowPromoMessage(). */
.promo-message {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
}

.promo-message-success {
    color: var(--ath-success);
}

.promo-message-error {
    color: var(--ath-danger);
}

.ath-summary {
    margin: 0 0 var(--ath-space-5);
}

.ath-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
}

    .ath-summary__row dt {
        color: var(--ath-muted);
        font-weight: 500;
    }

    .ath-summary__row dd {
        margin: 0;
        color: var(--ath-ink);
        font-weight: 600;
    }

.ath-summary__discount {
    color: var(--ath-success) !important;
}

.ath-summary__row--total {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--ath-border);
}

    .ath-summary__row--total dt {
        color: var(--ath-navy);
        font-weight: 700;
    }

    .ath-summary__row--total dd {
        color: var(--ath-navy);
        font-size: 24px;
        font-weight: 700;
    }

.ath-cart-summary__secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: var(--ath-space-3) 0 0;
    color: var(--ath-muted);
    font-size: 13px;
}


/* Payment status (user/PaymentStatus.aspx)
   ========================================================================== */
.ath-status {
    max-width: 560px;
    margin: 0 auto;
    padding: var(--ath-space-7) var(--ath-space-5);
    border: 1px solid var(--ath-border);
    border-radius: var(--ath-radius);
    background: #fff;
    box-shadow: var(--ath-shadow);
    text-align: center;
}

.ath-status__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: var(--ath-space-4);
    border-radius: 50%;
    background: var(--ath-bg-soft);
    color: var(--ath-muted);
    font-size: 32px;
}

.ath-status--success .ath-status__icon { background: var(--ath-success-soft); color: var(--ath-success); }
.ath-status--failed .ath-status__icon { background: var(--ath-danger-soft); color: var(--ath-danger); }
.ath-status--attention .ath-status__icon { background: var(--ath-warning-soft); color: var(--ath-warning); }

.ath-status__title {
    margin: 0 0 var(--ath-space-2);
    color: var(--ath-navy);
    font-size: var(--ath-h3);
    font-weight: 700;
}

.ath-status__message {
    margin: 0 0 var(--ath-space-4);
    color: var(--ath-muted);
    font-size: 16px;
    line-height: 1.6;
}

.ath-status__ref {
    display: inline-block;
    margin: 0 0 var(--ath-space-5);
    padding: 8px 14px;
    border-radius: var(--ath-radius-sm);
    background: var(--ath-bg-soft);
    color: var(--ath-muted);
    font-size: 14px;
}

    .ath-status__ref strong {
        margin-left: 6px;
        color: var(--ath-ink);
        word-break: break-all;
    }

.ath-status__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ath-space-3);
}

.ath-status__note {
    flex-basis: 100%;
    margin: var(--ath-space-2) 0 0;
    color: var(--ath-muted);
    font-size: 13px;
}


/* Account pages: login, register, forgot / change password ("ath-auth")
   ========================================================================== */
.ath-auth {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    min-height: 100vh;
}

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

/* Brand panel (desktop only) */
.ath-auth__brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: var(--ath-space-7) clamp(32px, 4vw, 72px);
    background:
        radial-gradient(circle at 85% 15%, rgba(184, 0, 0, .35) 0, rgba(184, 0, 0, 0) 45%),
        linear-gradient(135deg, #1c1f2b 0%, #2a2e3d 100%);
    color: #fff;
}

@media (max-width: 991px) {
    .ath-auth__brand {
        display: none;
    }
}

.ath-auth__brand-logo img {
    width: auto;
    max-width: 180px;
    height: auto;
    margin-bottom: var(--ath-space-6);
}

.ath-auth__brand h2 {
    max-width: 420px;
    margin: 0 0 var(--ath-space-5);
    color: #fff;
    font-size: clamp(26px, 18px + 1.2vw, 36px);
    font-weight: 700;
    line-height: 1.25;
}

.ath-auth__brand ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ath-auth__brand li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, .85);
    font-size: 16px;
}

    .ath-auth__brand li .fa {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .12);
        color: var(--ath-red-light);
        font-size: 12px;
    }

/* Form side */
.ath-auth__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ath-space-7) var(--ath-space-4);
    background: var(--ath-bg-soft);
}

.ath-auth__main > div:not(.ath-auth__card) {   /* UpdatePanel wrapper on the login page */
    width: 100%;
    max-width: 440px;
}

.ath-auth__card {
    width: 100%;
    max-width: 440px;
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid var(--ath-border);
    border-radius: var(--ath-radius);
    background: #fff;
    box-shadow: var(--ath-shadow);
}

.ath-auth__card--wide {
    max-width: 560px;
}

.ath-auth__logo {
    display: inline-block;
    margin-bottom: var(--ath-space-5);
}

    .ath-auth__logo img {
        width: auto;
        max-width: 150px;
        height: auto;
    }

@media (min-width: 992px) {
    .ath-auth__logo {
        display: none;               /* the brand panel shows the logo on desktop */
    }
}

.ath-auth__title {
    margin: 0 0 6px;
    color: var(--ath-navy);
    font-size: 26px;
    font-weight: 700;
}

.ath-auth__subtitle {
    margin: 0 0 var(--ath-space-5);
    color: var(--ath-muted);
    font-size: 15px;
    line-height: 1.5;
}

.ath-auth__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.ath-auth__small-link {
    margin-bottom: 6px;
    font-size: 13px;
}

.ath-auth__switch {
    margin: var(--ath-space-5) 0 0;
    color: var(--ath-muted);
    text-align: center;
}

.ath-auth__legal {
    margin: var(--ath-space-4) 0 0;
    color: var(--ath-muted);
    font-size: 13px;
    text-align: center;
}

    .ath-auth__legal a {
        color: var(--ath-muted);
    }

        .ath-auth__legal a:hover,
        .ath-auth__legal a:focus {
            color: var(--ath-navy);
        }

    .ath-auth__legal span {
        margin: 0 6px;
    }

/* Checkbox with label */
.ath-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--ath-space-4);
    color: var(--ath-ink);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

    .ath-check input {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--ath-red);
    }

/* Password requirements checklist (change password) */
.ath-pwd-rules {
    margin: -6px 0 var(--ath-space-4);
    padding: 12px 14px;
    border-radius: var(--ath-radius-sm);
    background: var(--ath-bg-soft);
    list-style: none;
}

    .ath-pwd-rules li {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 2px 0;
        color: var(--ath-muted);
        font-size: 13px;
    }

        .ath-pwd-rules li.is-met {
            color: var(--ath-success);
        }

        .ath-pwd-rules li .fa {
            width: 14px;
            text-align: center;
        }


/* Article pages: About, Founder, Privacy, Terms, News/Event details
   ========================================================================== */
.ath-article__body {
    max-width: 860px;
    margin: 0 auto;
}

    .ath-article__body > :first-child {
        margin-top: 0;
    }

.ath-article__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--ath-space-4);
    font-size: 14px;
}

.ath-article__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--ath-space-5);
    color: var(--ath-muted);
    font-size: 14px;
}

    .ath-article__meta .fa {
        color: var(--ath-red);
    }

/* Listing cards (News, Events) */
.ath-post .ath-card__body {
    padding: var(--ath-space-5);
}

.ath-post__date {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--ath-space-3);
    color: var(--ath-red);
    font-size: 13px;
    font-weight: 600;
}

.ath-post__summary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.ath-post__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    color: var(--ath-red);
    font-size: 14px;
    font-weight: 600;
}

.ath-post:hover .ath-post__more .fa {
    transform: translateX(3px);
    transition: transform var(--ath-transition);
}

/* Link tiles (Tutorials, Trainings) */
.ath-tiles {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ath-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    min-height: 64px;
    padding: 14px 16px;
    border: 1px solid var(--ath-border);
    border-radius: var(--ath-radius);
    background: #fff;
    color: var(--ath-navy);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--ath-shadow-sm);
    transition: box-shadow var(--ath-transition), transform var(--ath-transition), border-color var(--ath-transition);
}

    .ath-tile:hover,
    .ath-tile:focus {
        border-color: transparent;
        box-shadow: var(--ath-shadow);
        color: var(--ath-navy);
        text-decoration: none;
        transform: translateY(-2px);
    }

.ath-tile__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--ath-red-soft);
    color: var(--ath-red);
}

.ath-tile__text {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
}

.ath-tile__arrow {
    color: var(--ath-muted);
    transition: transform var(--ath-transition);
}

.ath-tile:hover .ath-tile__arrow {
    transform: translateX(3px);
}

/* Batches */
.ath-batch .ath-card__body {
    padding: var(--ath-space-5);
}

.ath-batch__code {
    align-self: flex-start;
    margin-bottom: var(--ath-space-3);
}

.ath-batch__facts {
    margin: 0 0 var(--ath-space-4);
    padding: 0;
    list-style: none;
}

    .ath-batch__facts li {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
        color: var(--ath-ink);
        font-size: 14px;
    }

        .ath-batch__facts li .fa {
            width: 16px;
            color: var(--ath-red);
            text-align: center;
        }

/* Contact */
.ath-contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--ath-space-5);
}

.ath-contact__card .ath-card__body {
    padding: var(--ath-space-5);
}

.ath-contact__city {
    margin: 0 0 var(--ath-space-4);
    color: var(--ath-navy);
    font-size: var(--ath-h3);
    font-weight: 700;
}

.ath-contact__list {
    margin: 0 0 var(--ath-space-5);
    padding: 0;
    list-style: none;
}

    .ath-contact__list li {
        display: flex;
        gap: 12px;
        margin-bottom: 12px;
        color: var(--ath-ink);
        line-height: 1.5;
        word-break: break-word;
    }

        .ath-contact__list li > .fa {
            display: inline-flex;
            flex: none;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: var(--ath-red-soft);
            color: var(--ath-red);
        }

        .ath-contact__list li > span {
            padding-top: 6px;
        }

    .ath-contact__list a {
        color: var(--ath-navy);
        font-weight: 600;
    }

        .ath-contact__list a:hover,
        .ath-contact__list a:focus {
            color: var(--ath-red);
        }

.ath-contact .ath-embed--map {
    margin-top: auto;
    border-radius: var(--ath-radius-sm);
}

/* Tutorial reader: topic list (sticky on desktop, collapsible on phones) + content */
@media (min-width: 992px) {
    .ath-tutorial .row {
        display: flex;
    }

        .ath-tutorial .row > [class*="col-"] {
            float: none;
        }
}

.ath-topics {
    margin-bottom: var(--ath-space-5);
    overflow: hidden;
    border: 1px solid var(--ath-border);
    border-radius: var(--ath-radius);
    background: #fff;
}

@media (min-width: 992px) {
    .ath-topics {
        position: sticky;
        top: 140px;
        max-height: calc(100vh - 170px);
        overflow-y: auto;
    }
}

.ath-topics__title {
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ath-border);
    color: var(--ath-navy);
    font-size: 15px;
    font-weight: 700;
}

.ath-topics__toggle {
    display: none;
    align-items: center;
    width: 100%;
    gap: 6px;
    padding: 14px 16px;
    border: 0;
    background: #fff;
    color: var(--ath-navy);
    font-size: 15px;
    font-weight: 700;
    text-align: left;
}

    .ath-topics__toggle .fa {
        margin-left: auto;
        transition: transform var(--ath-transition);
    }

.ath-topics__count {
    color: var(--ath-muted);
    font-weight: 500;
}

.ath-topics__list {
    margin: 0;
    padding: 6px 0;
    list-style: none;
    counter-reset: topic;
}

    .ath-topics__list button {
        display: flex;
        width: 100%;
        gap: 10px;
        padding: 9px 16px;
        border: 0;
        border-left: 3px solid transparent;
        background: transparent;
        color: var(--ath-ink);
        font-size: 14px;
        line-height: 1.4;
        text-align: left;
        counter-increment: topic;
    }

        .ath-topics__list button::before {
            content: counter(topic);
            flex: none;
            min-width: 18px;
            color: var(--ath-muted);
            font-size: 12px;
            font-weight: 600;
        }

        .ath-topics__list button:hover {
            background: var(--ath-bg-soft);
        }

        .ath-topics__list button.is-active {
            border-left-color: var(--ath-red);
            background: var(--ath-red-soft);
            color: var(--ath-navy);
            font-weight: 600;
        }

@media (max-width: 991px) {
    .ath-topics__title {
        display: none;
    }

    .ath-topics__toggle {
        display: flex;
    }

    .ath-topics__list {
        display: none;
        border-top: 1px solid var(--ath-border);
    }

    .ath-topics.is-open .ath-topics__list {
        display: block;
    }

    .ath-topics.is-open .ath-topics__toggle .fa {
        transform: rotate(180deg);
    }
}

.ath-topic__title {
    margin: 0 0 var(--ath-space-2);
    color: var(--ath-navy);
    font-size: var(--ath-h2);
    font-weight: 700;
}

.ath-vm {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ath-space-5);
    max-width: 1000px;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .ath-vm {
        grid-template-columns: 1fr;
    }
}

.ath-vm__card .ath-card__body {
    padding: var(--ath-space-6) var(--ath-space-5);
}

.ath-vm__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--ath-space-4);
    border-radius: 50%;
    background: var(--ath-red-soft);
    color: var(--ath-red);
    font-size: 20px;
}

.ath-vm__title {
    margin: 0 0 var(--ath-space-3);
    color: var(--ath-navy);
    font-size: var(--ath-h3);
    font-weight: 700;
}


/* Student dashboard (Admin/UI/studentdashboard.aspx, route my-dashboard)
   ========================================================================== */
.ath-dash-hero {
    clear: both;
    padding: clamp(28px, 16px + 3vw, 48px) 0;
    background:
        radial-gradient(circle at 88% 15%, rgba(184, 0, 0, .35) 0, rgba(184, 0, 0, 0) 45%),
        linear-gradient(135deg, #1c1f2b 0%, #2a2e3d 100%);
    color: #fff;
}

.ath-dash-hero__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ath-space-5);
}

.ath-dash-hero__label {
    color: var(--ath-red-light);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ath-dash-hero__title {
    margin: 6px 0 8px;
    color: #fff;
    font-size: var(--ath-h1);
    font-weight: 700;
    line-height: 1.2;
}

.ath-dash-hero__lead {
    margin: 0;
    color: rgba(255, 255, 255, .8);
    font-size: 16px;
}

.ath-dash-stats {
    display: flex;
    gap: var(--ath-space-3);
    margin: 0;
}

.ath-dash-stats__item {
    min-width: 110px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--ath-radius);
    background: rgba(255, 255, 255, .06);
    text-align: center;
}

    .ath-dash-stats__item dt {
        color: rgba(255, 255, 255, .7);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .ath-dash-stats__item dd {
        margin: 2px 0 0;
        color: #fff;
        font-size: 28px;
        font-weight: 700;
    }

.ath-dash {
    padding-top: var(--ath-space-6);
}

.ath-dash__grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--ath-space-5);
    align-items: start;
}

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

/* Profile card */
.ath-dash-profile {
    height: auto;
}

@media (min-width: 992px) {
    .ath-dash-profile {
        position: sticky;
        top: 140px;
    }
}

.ath-dash-profile .ath-card__body {
    padding: var(--ath-space-5);
}

.ath-dash-profile__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: var(--ath-space-4);
}

.ath-dash-profile__avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ath-red);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

.ath-dash-profile__name {
    margin: 0 0 4px;
    color: var(--ath-navy);
    font-size: 18px;
    font-weight: 700;
    word-break: break-word;
}

.ath-dash-profile__details {
    margin: 0 0 var(--ath-space-4);
    padding: var(--ath-space-4) 0;
    border-top: 1px solid var(--ath-border);
    border-bottom: 1px solid var(--ath-border);
}

    .ath-dash-profile__details > div + div {
        margin-top: 12px;
    }

    .ath-dash-profile__details dt {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--ath-muted);
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
    }

        .ath-dash-profile__details dt .fa {
            color: var(--ath-red);
        }

    .ath-dash-profile__details dd {
        margin: 2px 0 0;
        color: var(--ath-ink);
        font-weight: 500;
        word-break: break-word;
    }

.ath-dash-profile__links {
    display: grid;
    gap: 8px;
}

/* Main column */
.ath-dash__block + .ath-dash__block {
    margin-top: var(--ath-space-7);
}

.ath-dash__title {
    margin: 0 0 var(--ath-space-4);
    color: var(--ath-navy);
    font-size: var(--ath-h3);
    font-weight: 700;
}

.ath-dash-courses {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--ath-space-4);
}

.ath-dash-course__media {
    position: relative;
    overflow: hidden;
    background: var(--ath-bg-soft);
    aspect-ratio: 16 / 7;
}

    .ath-dash-course__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.ath-dash-course .ath-card__body {
    padding: var(--ath-space-4) var(--ath-space-5) var(--ath-space-5);
}

.ath-dash-course .ath-card__title a {
    color: var(--ath-navy);
    text-decoration: none;
}

    .ath-dash-course .ath-card__title a:hover,
    .ath-dash-course .ath-card__title a:focus {
        color: var(--ath-red);
    }

.ath-dash-course__dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 var(--ath-space-4);
    padding: 0;
    color: var(--ath-ink);
    font-size: 14px;
    font-weight: 600;
    list-style: none;
}

    .ath-dash-course__dates span {
        display: block;
        color: var(--ath-muted);
        font-size: 12px;
        font-weight: 500;
    }

.ath-dash-course__access {
    margin-bottom: var(--ath-space-3);
}

.ath-dash-course__access-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
}

.ath-dash-course__days {
    font-weight: 700;
}

.ath-dash-course__period {
    color: var(--ath-muted);
}

.ath-progress {
    height: 8px;
    overflow: hidden;
    border-radius: var(--ath-radius-pill);
    background: #e9edf3;
}

    .ath-progress > span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--ath-success);
    }

/* Access state colours */
.ath-dash-course--ok .ath-dash-course__days { color: var(--ath-success); }
.ath-dash-course--soon .ath-dash-course__days { color: var(--ath-warning); }
.ath-dash-course--soon .ath-progress > span { background: #f5a623; }
.ath-dash-course--ending .ath-dash-course__days,
.ath-dash-course--expired .ath-dash-course__days { color: var(--ath-danger); }
.ath-dash-course--ending .ath-progress > span { background: var(--ath-red); }

.ath-dash-course--expired .ath-dash-course__media img {
    filter: grayscale(1);
    opacity: .7;
}

/* Orders */
.ath-dash-orders {
    margin: 0;
    background: #fff;
}

    .ath-dash-orders th,
    .ath-dash-orders td {
        padding: 12px 16px !important;
        border-color: var(--ath-border) !important;
        vertical-align: middle !important;
    }

    .ath-dash-orders thead th {
        background: var(--ath-bg-soft);
        color: var(--ath-muted);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

.ath-dash-orders__no {
    color: var(--ath-navy);
    font-weight: 700;
}

.ath-dash-orders__action {
    text-align: right;
}


/* 11. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* 12. Brand font (generated)
   --------------------------------------------------------------------------
   The legacy CSS sets Ubuntu / "Open Sans" / Raleway / Verdana etc. on these
   selectors, several with !important - and Open Sans and Raleway were never
   loaded, so text fell back to the browser default. Same selectors + later in
   the cascade + !important = Montserrat everywhere. Icon fonts (FontAwesome,
   Glyphicons), the certificate fonts and monospace code fonts are excluded.
   Regenerate if new legacy rules set a font-family.
   ========================================================================== */
#Cname { font-family: var(--ath-font-sans) !important; }
#Curname { font-family: var(--ath-font-sans) !important; }
#Trainingname { font-family: var(--ath-font-sans) !important; }
#first-slider .slide1 h3 { font-family: var(--ath-font-sans) !important; }
#first-slider .slide2 h3 { font-family: var(--ath-font-sans) !important; }
#first-slider .slide3 h3 { font-family: var(--ath-font-sans) !important; }
#first-slider .slide4 h3 { font-family: var(--ath-font-sans) !important; }
#loadMore { font-family: var(--ath-font-sans) !important; }
#populer-coursef .course-ccbx h2 { font-family: var(--ath-font-sans) !important; }
#showLess { font-family: var(--ath-font-sans) !important; }
#tab1>h4 { font-family: var(--ath-font-sans) !important; }
#tab1>p { font-family: var(--ath-font-sans) !important; }
#tab2>h4 { font-family: var(--ath-font-sans) !important; }
#txtMenuSearch { font-family: var(--ath-font-sans) !important; }
.Courses-responicve .toggle-wrapper > a { font-family: var(--ath-font-sans) !important; }
.Courses-responicve-fast .btn.btn-default.dropdown-toggle { font-family: var(--ath-font-sans) !important; }
.Register_icon_buttion a { font-family: var(--ath-font-sans) !important; }
.Register_icon_buttion-2 a { font-family: var(--ath-font-sans) !important; }
.about-pages-box>h1 { font-family: var(--ath-font-sans) !important; }
.about-pages-box>p { font-family: var(--ath-font-sans) !important; }
.accoun.Registert-buttion { font-family: var(--ath-font-sans) !important; }
.account { font-family: var(--ath-font-sans) !important; }
.account>a { font-family: var(--ath-font-sans) !important; }
.achcl-Platform>h1 { font-family: var(--ath-font-sans) !important; }
.adress>h1 { font-family: var(--ath-font-sans) !important; }
.adress>p { font-family: var(--ath-font-sans) !important; }
.alert-info { font-family: var(--ath-font-sans) !important; }
.angularjs-developmet>h1 { font-family: var(--ath-font-sans) !important; }
.aqhcl-advantages h1 { font-family: var(--ath-font-sans) !important; }
.aqhcl-advantages-saction-2>h2 { font-family: var(--ath-font-sans) !important; }
.backgroung-color-contact-form h1 { font-family: var(--ath-font-sans) !important; }
.banner-search-box .browes-course .browes-btn { font-family: var(--ath-font-sans) !important; }
.banner-search-box .or-text { font-family: var(--ath-font-sans) !important; }
.banner-training-item .training-item h2 { font-family: var(--ath-font-sans) !important; }
.batch-detail-newbox .btn.btn-default { font-family: var(--ath-font-sans) !important; }
.batch-detail-newbox h2 { font-family: var(--ath-font-sans) !important; }
.batch-detail-newbox span { font-family: var(--ath-font-sans) !important; }
.blue-orange-heading-left { font-family: var(--ath-font-sans) !important; }
.browser-support h1 { font-family: var(--ath-font-sans) !important; }
.btn.btn-default-send { font-family: var(--ath-font-sans) !important; }
.btn.btn-link { font-family: var(--ath-font-sans) !important; }
.btn.btn-menu { font-family: var(--ath-font-sans) !important; }
.btn.btn-primary-Register { font-family: var(--ath-font-sans) !important; }
.btn.btn-primary-fast { font-family: var(--ath-font-sans) !important; }
.btn.btn-primary-five { font-family: var(--ath-font-sans) !important; }
.btn.btn-primary-four { font-family: var(--ath-font-sans) !important; }
.btn.btn-primary-login { font-family: var(--ath-font-sans) !important; }
.btn.btn-primary-saceend { font-family: var(--ath-font-sans) !important; }
.btn.btn-primary-thard { font-family: var(--ath-font-sans) !important; }
.btn.btn-primary.btn-lg.btn-block { font-family: var(--ath-font-sans) !important; }
.btn.btn-warning-buttion { font-family: var(--ath-font-sans) !important; }
.carousel-caption h3 { font-family: var(--ath-font-sans) !important; }
.carousel-control .icon-next { font-family: var(--ath-font-sans) !important; }
.carousel-control .icon-prev { font-family: var(--ath-font-sans) !important; }
.carousel-inner>.item>a>img { font-family: var(--ath-font-sans) !important; }
.carousel-inner>.item>img { font-family: var(--ath-font-sans) !important; }
.category-course { font-family: var(--ath-font-sans) !important; }
.category-course-info-name { font-family: var(--ath-font-sans) !important; }
.checkbox .form-control-forgot { font-family: var(--ath-font-sans) !important; }
.chek form { font-family: var(--ath-font-sans) !important; }
.contact_nuber { font-family: var(--ath-font-sans) !important; }
.contact_nuber>span { font-family: var(--ath-font-sans) !important; }
.conte table { font-family: var(--ath-font-sans) !important; }
.corporate-contact-from h1 { font-family: var(--ath-font-sans) !important; }
.corporate-training-saction-1-box>h1 { font-family: var(--ath-font-sans) !important; }
.corporate-training-saction-1-box>h2 { font-family: var(--ath-font-sans) !important; }
.corporate_box>h1 { font-family: var(--ath-font-sans) !important; }
.corporate_box>p { font-family: var(--ath-font-sans) !important; }
.course-description>h1 { font-family: var(--ath-font-sans) !important; }
.course-features .nav.nav-tabs.faq-cat-tabs a { font-family: var(--ath-font-sans) !important; }
.course-features .panel-title { font-family: var(--ath-font-sans) !important; }
.course-features>h1 { font-family: var(--ath-font-sans) !important; }
.course-overview2>h1 { font-family: var(--ath-font-sans) !important; }
.course-rating-star { font-family: var(--ath-font-sans) !important; }
.course-selling-points ul li { font-family: var(--ath-font-sans) !important; }
.cuntery-slacte a { font-family: var(--ath-font-sans) !important; }
.do_net_tricks_social-icon_box > p { font-family: var(--ath-font-sans) !important; }
.do_net_tricks_social-icon_box>h1 { font-family: var(--ath-font-sans) !important; }
.do_net_tricks_social-icon_box>p { font-family: var(--ath-font-sans) !important; }
.doller-pirce a { font-family: var(--ath-font-sans) !important; }
.doller-pirce h5 { font-family: var(--ath-font-sans) !important; }
.doller-pirce h6 { font-family: var(--ath-font-sans) !important; }
.doller-pirce p { font-family: var(--ath-font-sans) !important; }
.drawer span { font-family: var(--ath-font-sans) !important; }
.drawer>li>a { font-family: var(--ath-font-sans) !important; }
.email>h2 { font-family: var(--ath-font-sans) !important; }
.feature-classroom.wow h3 { font-family: var(--ath-font-sans) !important; }
.features { font-family: var(--ath-font-sans) !important; }
.find-your-courses-box-left>h1 { font-family: var(--ath-font-sans) !important; }
.footer-list .widget ul li a { font-family: var(--ath-font-sans) !important; }
.footer_bootam_box a { font-family: var(--ath-font-sans) !important; }
.footer_bootam_box>h1 { font-family: var(--ath-font-sans) !important; }
.footer_bootam_box>p { font-family: var(--ath-font-sans) !important; }
.form-control-Register { font-family: var(--ath-font-sans) !important; }
.form-control-Registernew { font-family: var(--ath-font-sans) !important; }
.form-control-contact-message { font-family: var(--ath-font-sans) !important; }
.form-control-contact-us { font-family: var(--ath-font-sans) !important; }
.form-control-corporate-contact-from { font-family: var(--ath-font-sans) !important; }
.form-control-corporate-contact-from-message { font-family: var(--ath-font-sans) !important; }
.form-control-corporate-contact-from-slect { font-family: var(--ath-font-sans) !important; }
.form-control-dropdown { font-family: var(--ath-font-sans) !important; }
.form-control-dropdown_country-slaceted { font-family: var(--ath-font-sans) !important; }
.form-control-dropdown_find-your { font-family: var(--ath-font-sans) !important; }
.form-control-dropdown_mint { font-family: var(--ath-font-sans) !important; }
.form-control-dropdown_saceend { font-family: var(--ath-font-sans) !important; }
.form-control-find-your-serch { font-family: var(--ath-font-sans) !important; }
.form-control-login { font-family: var(--ath-font-sans) !important; }
.form-control-query { font-family: var(--ath-font-sans) !important; }
.form-control-text { font-family: var(--ath-font-sans) !important; }
.form-control.btn.btn-primary { font-family: var(--ath-font-sans) !important; }
.form-control.btn.btn-primary.Register-bution { font-family: var(--ath-font-sans) !important; }
.form-control.btn.btn-primary.Register-bution_saceend { font-family: var(--ath-font-sans) !important; }
.form-control.btn.btn-primary.Registernew { font-family: var(--ath-font-sans) !important; }
.form-control.btn.btn-primary.login-bution { font-family: var(--ath-font-sans) !important; }
.form-control.btn.btn-primary.new-register-buution { font-family: var(--ath-font-sans) !important; }
.form-control.btn.btn-primary.time-send { font-family: var(--ath-font-sans) !important; }
.frame-box h6 { font-family: var(--ath-font-sans) !important; }
.framework-fundamentals { font-family: var(--ath-font-sans) !important; }
.framework-fundamentals-2 em { font-family: var(--ath-font-sans) !important; }
.framework-fundamentals-2>h1 { font-family: var(--ath-font-sans) !important; }
.framework-fundamentals-3 a { font-family: var(--ath-font-sans) !important; }
.headertlt { font-family: var(--ath-font-sans) !important; }
.heading-full h1 { font-family: var(--ath-font-sans) !important; }
.heading-full h2 { font-family: var(--ath-font-sans) !important; }
.heading-half h1 { font-family: var(--ath-font-sans) !important; }
.heading-half h2 { font-family: var(--ath-font-sans) !important; }
.helpline>span { font-family: var(--ath-font-sans) !important; }
.icon a { font-family: var(--ath-font-sans) !important; }
.img-responsive { font-family: var(--ath-font-sans) !important; }
.instructor-training-box>h2 { font-family: var(--ath-font-sans) !important; }
.instructor-training-box>p { font-family: var(--ath-font-sans) !important; }
.instructor-training>h1 { font-family: var(--ath-font-sans) !important; }
.introduction-box>h1 { font-family: var(--ath-font-sans) !important; }
.item-info>span { font-family: var(--ath-font-sans) !important; }
.item-tow-text>h1 { font-family: var(--ath-font-sans) !important; }
.item-tow-text>p { font-family: var(--ath-font-sans) !important; }
.itme-cart-box>h1 { font-family: var(--ath-font-sans) !important; }
.learning-text > p { font-family: var(--ath-font-sans) !important; }
.learning-text>p { font-family: var(--ath-font-sans) !important; }
.left { font-family: var(--ath-font-sans) !important; }
.left_side_right_side.right>h2 { font-family: var(--ath-font-sans) !important; }
.left_side_right_side.right>p { font-family: var(--ath-font-sans) !important; }
.left_side_right_side>h4 { font-family: var(--ath-font-sans) !important; }
.link-list li a { font-family: var(--ath-font-sans) !important; }
.login_icon_buttion .or { font-family: var(--ath-font-sans) !important; }
.login_icon_buttion li a { font-family: var(--ath-font-sans) !important; }
.login_icon_new-register a { font-family: var(--ath-font-sans) !important; }
.lostbuttion h1 { font-family: var(--ath-font-sans) !important; }
.lostbuttion h3 { font-family: var(--ath-font-sans) !important; }
.lostbuttion p { font-family: var(--ath-font-sans) !important; }
.megamenu .title { font-family: var(--ath-font-sans) !important; }
.menu-view-all-course-btn { font-family: var(--ath-font-sans) !important; }
.meta-text { font-family: var(--ath-font-sans) !important; }
.mini-sldir>h1 { font-family: var(--ath-font-sans) !important; }
.modal-footer h6 { font-family: var(--ath-font-sans) !important; }
.modal-title { font-family: var(--ath-font-sans) !important; }
.navbar .navbar-brand { font-family: var(--ath-font-sans) !important; }
.navbar li a { font-family: var(--ath-font-sans) !important; }
.new-login-new-register-left-box h1 { font-family: var(--ath-font-sans) !important; }
.new-register-left_right.right>h2 { font-family: var(--ath-font-sans) !important; }
.new-register-left_right.right>p { font-family: var(--ath-font-sans) !important; }
.new-register-left_right>h4 { font-family: var(--ath-font-sans) !important; }
.new-register-saceend-left_right .or { font-family: var(--ath-font-sans) !important; }
.new-register-saceend-left_right.right>h2 { font-family: var(--ath-font-sans) !important; }
.new-register-saceend-left_right.right>p { font-family: var(--ath-font-sans) !important; }
.not h1 { font-family: var(--ath-font-sans) !important; }
.office-number>h2 { font-family: var(--ath-font-sans) !important; }
.office>h2 { font-family: var(--ath-font-sans) !important; }
.one-to-one-training-box>a { font-family: var(--ath-font-sans) !important; }
.one-to-one-training-box>h2 { font-family: var(--ath-font-sans) !important; }
.orderlist>li { font-family: var(--ath-font-sans) !important; }
.our-vision-our-mision-box>h1 { font-family: var(--ath-font-sans) !important; }
.padding-zero { font-family: var(--ath-font-sans) !important; }
.padding-zero h1 { font-family: var(--ath-font-sans) !important; }
.padding-zero_ratting { font-family: var(--ath-font-sans) !important; }
.panel-body { font-family: var(--ath-font-sans) !important; }
.panel-default>.panel-heading { font-family: var(--ath-font-sans) !important; }
.panel-title { font-family: var(--ath-font-sans) !important; }
.past-events-pages h1 { font-family: var(--ath-font-sans) !important; }
.past-events-pages-left-box h6 a { font-family: var(--ath-font-sans) !important; }
.past-events-pages-left-box ul li { font-family: var(--ath-font-sans) !important; }
.past-events-pages-left-box>h2 { font-family: var(--ath-font-sans) !important; }
.poction-fixed>h2 { font-family: var(--ath-font-sans) !important; }
.poction-fixed>p { font-family: var(--ath-font-sans) !important; }
.popover { font-family: var(--ath-font-sans) !important; }
.portfolio_images_overlay.text-center a { font-family: var(--ath-font-sans) !important; }
.portfolio_images_overlay.text-center a:hover { font-family: var(--ath-font-sans) !important; }
.postedby { font-family: var(--ath-font-sans) !important; }
.pp-off-bx span { font-family: var(--ath-font-sans) !important; }
.pp-search { font-family: var(--ath-font-sans) !important; }
.price-all a.btn.btn-info { font-family: var(--ath-font-sans) !important; }
.pricebtm { font-family: var(--ath-font-sans) !important; }
.pull-left { font-family: var(--ath-font-sans) !important; }
.pull-right .nav>li>a { font-family: var(--ath-font-sans) !important; }
.pull-right span a { font-family: var(--ath-font-sans) !important; }
.reg_login a { font-family: var(--ath-font-sans) !important; }
.register { font-family: var(--ath-font-sans) !important; }
.register_popap.last_box>h2 { font-family: var(--ath-font-sans) !important; }
.register_popap.last_box>p { font-family: var(--ath-font-sans) !important; }
.register_popap>h4 { font-family: var(--ath-font-sans) !important; }
.resp-tab-content.hor_1.resp-tab-content-active>h2 { font-family: var(--ath-font-sans) !important; }
.resp-tabs-container h2 { font-family: var(--ath-font-sans) !important; }
.right_sidefrom .form-control { font-family: var(--ath-font-sans) !important; }
.right_sidefrom h1 { font-family: var(--ath-font-sans) !important; }
.search-panel h1 { font-family: var(--ath-font-sans) !important; }
.search-property { font-family: var(--ath-font-sans) !important; }
.search-query.form-control-serch { font-family: var(--ath-font-sans) !important; }
.send>a { font-family: var(--ath-font-sans) !important; }
.single_portfolio_text>h1 { font-family: var(--ath-font-sans) !important; }
.singor { font-family: var(--ath-font-sans) !important; }
.singupbox-extra>h2 { font-family: var(--ath-font-sans) !important; }
.singupbox-extra>p { font-family: var(--ath-font-sans) !important; }
.slacted { font-family: var(--ath-font-sans) !important; }
.small_headr_nav li a { font-family: var(--ath-font-sans) !important; }
.small_slaidr p { font-family: var(--ath-font-sans) !important; }
.sount-banner .count-div { font-family: var(--ath-font-sans) !important; }
.speak-item strong { font-family: var(--ath-font-sans) !important; }
.subscribe .subscribe-form { font-family: var(--ath-font-sans) !important; }
.tab-pane.active { font-family: var(--ath-font-sans) !important; }
.tableStyleCurr th { font-family: var(--ath-font-sans) !important; }
.tableStylePass th { font-family: var(--ath-font-sans) !important; }
.tableStyleUp th { font-family: var(--ath-font-sans) !important; }
.test-saceend_pages>h1 { font-family: var(--ath-font-sans) !important; }
.testimonial3_header>h4 { font-family: var(--ath-font-sans) !important; }
.testimonial3_slide>h5 { font-family: var(--ath-font-sans) !important; }
.testimonial4_header>h4 { font-family: var(--ath-font-sans) !important; }
.testimonial4_slide>h5 { font-family: var(--ath-font-sans) !important; }
.testimonial5_header>h4 { font-family: var(--ath-font-sans) !important; }
.testimonial5_slide>h5 { font-family: var(--ath-font-sans) !important; }
.text-center { font-family: var(--ath-font-sans) !important; }
.text-center-tow { font-family: var(--ath-font-sans) !important; }
.text-hide { font-family: var(--ath-font-sans) !important; }
.thumbnail a>img { font-family: var(--ath-font-sans) !important; }
.thumbnail>img { font-family: var(--ath-font-sans) !important; }
.timeing { font-family: var(--ath-font-sans) !important; }
.toggle-title { font-family: var(--ath-font-sans) !important; }
.tooltip { font-family: var(--ath-font-sans) !important; }
.top-pp-off { font-family: var(--ath-font-sans) !important; }
.top_hadding-from>h2 { font-family: var(--ath-font-sans) !important; }
.topnavbar a { font-family: var(--ath-font-sans) !important; }
.tutorialTopicanchor { font-family: var(--ath-font-sans) !important; }
.ul-li-box li { font-family: var(--ath-font-sans) !important; }
.upcoming-batch h1 { font-family: var(--ath-font-sans) !important; }
.updatedby { font-family: var(--ath-font-sans) !important; }
.veiw>a { font-family: var(--ath-font-sans) !important; }
.why-angular-js h1 { font-family: var(--ath-font-sans) !important; }
.widget-heading h3 { font-family: var(--ath-font-sans) !important; }
.wsmenu-list>li>a { font-family: var(--ath-font-sans) !important; }
.wsmenu-submenu li a { font-family: var(--ath-font-sans) !important; }
a { font-family: var(--ath-font-sans) !important; }
a.animaction { font-family: var(--ath-font-sans) !important; }
body { font-family: var(--ath-font-sans) !important; }
button { font-family: var(--ath-font-sans) !important; }
h1 { font-family: var(--ath-font-sans) !important; }
h2 { font-family: var(--ath-font-sans) !important; }
h3 { font-family: var(--ath-font-sans) !important; }
h4 { font-family: var(--ath-font-sans) !important; }
h5 { font-family: var(--ath-font-sans) !important; }
h5.titlelink { font-family: var(--ath-font-sans) !important; }
h6 { font-family: var(--ath-font-sans) !important; }
html { font-family: var(--ath-font-sans) !important; }
input { font-family: var(--ath-font-sans) !important; }
input.home-search { font-family: var(--ath-font-sans) !important; }
label { font-family: var(--ath-font-sans) !important; }
li { font-family: var(--ath-font-sans) !important; }
li.category-list>a { font-family: var(--ath-font-sans) !important; }
ol.courselist { font-family: var(--ath-font-sans) !important; }
p { font-family: var(--ath-font-sans) !important; }
span { font-family: var(--ath-font-sans) !important; }
strong { font-family: var(--ath-font-sans) !important; }
table { font-family: var(--ath-font-sans) !important; }
ul.resp-tabs-list { font-family: var(--ath-font-sans) !important; }

/* Icon fonts win over the element-level rules above (e.g. <span class="fa ...">). */
.fa { font-family: FontAwesome !important; }
.glyphicon { font-family: "Glyphicons Halflings" !important; }