/* Shared public-page layout fixes. Keep these rules after the theme styles so
   page variants inherit the same responsive behavior. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Compact language control rendered directly below the footer image widget. */
.site-language-bar {
    position: relative;
    z-index: 1;
    width: 100%;
    background: transparent;
}

.site-language-bar__inner {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
}

.site-language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 38px;
    margin: 0;
    padding: 4px 8px 4px 12px;
    color: #353539;
    background: #ffffff;
    border: 1px solid rgba(29, 34, 40, 0.12);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(29, 34, 40, 0.06);
    box-sizing: border-box;
    overflow: visible;
}

.site-language-switcher__label {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    gap: 7px;
    color: var(--main-color-one, #ff8a73);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    box-sizing: border-box;
}

.site-language-switcher__label i {
    font-size: 14px;
}

.site-language-switcher__select-wrap {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    box-sizing: border-box;
}

.site-language-menu {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.site-language-menu__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 30px;
    padding: 2px 8px;
    color: #353539;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    background: transparent;
    border-radius: 5px;
    outline: 0;
    cursor: pointer;
    list-style: none;
    box-sizing: border-box;
}

.site-language-menu__trigger::-webkit-details-marker {
    display: none;
}

.site-language-menu__trigger:focus-visible {
    box-shadow: 0 0 0 3px rgba(85, 128, 255, 0.18);
}

.site-language-menu__trigger i {
    flex: 0 0 auto;
    margin-left: 8px;
    color: #878a95;
    font-size: 10px;
    transition: transform 160ms ease;
}

.site-language-menu[open] .site-language-menu__trigger i {
    transform: rotate(180deg);
}

.site-language-menu__options {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 1000;
    display: grid;
    width: max-content;
    min-width: 100%;
    max-width: min(240px, calc(100vw - 32px));
    padding: 5px;
    background: #ffffff;
    border: 1px solid rgba(29, 34, 40, 0.16);
    border-radius: 7px;
    box-shadow: 0 10px 28px rgba(29, 34, 40, 0.18);
}

.site-language-menu__option {
    display: block;
    padding: 7px 10px;
    color: #353539;
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: none;
    border-radius: 4px;
}

.site-language-menu__option:hover,
.site-language-menu__option:focus-visible {
    color: #263348;
    background: #eef1f5;
}

.site-language-menu__option.is-active,
.site-language-menu__option.is-active:hover,
.site-language-menu__option.is-active:focus-visible {
    color: #ffffff;
    background: #263348;
}

.site-language-menu__option:focus-visible {
    outline: 2px solid rgba(85, 128, 255, 0.55);
    outline-offset: -2px;
}

/* Placement tests use a dark footer, so keep the language label readable
   without changing the selector appearance elsewhere on the site. */
.site-language-bar--placement .site-language-switcher__label,
.site-language-bar--placement .site-language-switcher__label-text {
    color: #222222 !important;
}

/* placement-tests.css applies a more specific important color to every
   footer span. Override only the language label on the two placement layouts. */
main.placement-test-shell ~ .footer-area .footer-widget .site-language-bar--placement .site-language-switcher__label,
main.placement-test-shell ~ .footer-area .footer-widget .site-language-bar--placement .site-language-switcher__label-text,
main.placement-chooser-shell ~ .footer-area .footer-widget .site-language-bar--placement .site-language-switcher__label,
main.placement-chooser-shell ~ .footer-area .footer-widget .site-language-bar--placement .site-language-switcher__label-text {
    color: #222222 !important;
}

.site-language-bar--placement .site-language-menu__trigger,
.site-language-bar--placement .site-language-menu__trigger i {
    color: #263348;
}

@media only screen and (max-width: 575px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Keep iOS and Android browsers from zooming the page when a visitor
       focuses an input, select, or textarea. Sixteen pixels is the safe
       minimum for mobile form controls. */
    input:not([type="hidden"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    .site-language-bar__inner {
        justify-content: center;
        padding: 0 10px;
    }

    .site-language-switcher {
        width: 100%;
        max-width: 360px;
        min-height: 46px;
        justify-content: space-between;
        gap: 10px;
        padding: 6px 9px 6px 12px;
        border: 1px solid rgba(255, 255, 255, 0.34);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 8px 22px rgba(23, 31, 49, 0.14);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .site-language-switcher__select-wrap {
        flex: 1 1 0;
    }

    .site-language-menu__trigger {
        min-height: 34px;
        padding: 4px 10px;
        font-size: 16px;
        line-height: 1.35;
    }

    .site-language-menu__trigger i {
        font-size: 11px;
    }

    .site-language-menu__options {
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: 74px;
        width: auto;
        min-width: 0;
        max-width: none;
        max-height: min(52vh, 320px);
        padding: 6px;
        border-radius: 10px;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        z-index: 100000;
    }

    .site-language-menu__option {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 9px 12px;
        font-size: 16px;
    }

    .site-language-menu__trigger,
    .site-language-menu__option {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

}

@media only screen and (max-width: 420px) {
    .site-language-switcher {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        gap: 7px;
        width: min(100%, 310px);
        max-width: 310px;
        min-height: 42px;
        padding: 5px 7px 5px 10px;
    }

    .site-language-switcher__label {
        flex: 0 0 auto;
        justify-content: flex-start;
        min-height: 0;
        gap: 5px;
        font-size: 13px;
    }

    .site-language-switcher__label i {
        font-size: 13px;
    }

    .site-language-switcher__select-wrap {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    .site-language-menu__trigger {
        min-height: 32px;
        padding: 3px 8px;
        font-size: 15px;
    }
}

/* Keep the theme's scroll/fade behavior, but make the control compact and
   unobtrusive on every public page and in RTL layouts. */
.back-to-top {
    right: 16px !important;
    bottom: 16px !important;
    left: auto !important;
    width: 42px !important;
    height: 42px !important;
    background-color: rgba(198, 31, 58, 0.42) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    line-height: 42px !important;
    font-size: 17px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14) !important;
}

.back-to-top .back-top,
.back-to-top i {
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

.back-to-top:hover,
.back-to-top:focus-visible {
    background-color: rgba(198, 31, 58, 0.64) !important;
}

@media only screen and (max-width: 575px) {
    .back-to-top {
        right: 12px !important;
        bottom: 12px !important;
        width: 38px !important;
        height: 38px !important;
        line-height: 38px !important;
        font-size: 15px !important;
    }
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

iframe {
    width: 100%;
}

[class*="col-"],
.widget,
.footer-widget,
.content,
.right-content-warp,
.right-content-inner-wrap {
    min-width: 0;
}

/* Tag archive thumbnails stay compact without stretching or cropping the
   source image. Full blog pages and other blog listings keep their theme
   sizing because this rule is scoped to the tag archive. */
.blog-tag-archive .blog-classic-item-01 .thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 240px;
    overflow: hidden;
    background: #f7f8fb;
}

.blog-tag-archive .blog-classic-item-01 .thumbnail img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 240px;
    object-fit: contain;
}

@media only screen and (max-width: 767px) {
    .blog-tag-archive .blog-classic-item-01 .thumbnail,
    .blog-tag-archive .blog-classic-item-01 .thumbnail img {
        max-height: 190px;
    }
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
button,
label {
    overflow-wrap: anywhere;
}

/* The original popup has a fixed 700px frame. Let the frame scroll while
   keeping images, long text, and buttons inside it. */
.nx-popup-backdrop {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nx-popup-wrapper {
    padding: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.nx-popup-wrapper .nx-modal-content-wrapper {
    width: min(700px, 100%);
    max-width: 100%;
    max-height: calc(100vh - 32px);
    margin: auto;
    overflow-x: hidden;
    overflow-y: auto;
}

.nx-popup-wrapper .nx-modal-inner-content-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
}

.nx-popup-wrapper .nx-modal-content,
.nx-popup-wrapper .notice-modal-content-wrapper,
.nx-popup-wrapper .promotional-modal-content-wrapper,
.nx-popup-wrapper .discount-modal-content-wrapper {
    max-width: 100%;
    min-width: 0;
}

.nx-popup-wrapper .promotional-modal-content-wrapper,
.nx-popup-wrapper .discount-modal-content-wrapper {
    align-items: center;
}

.nx-popup-wrapper .promotional-modal-content-wrapper .left-content-warp,
.nx-popup-wrapper .discount-modal-content-wrapper .left-content-warp {
    min-width: 0;
    overflow: hidden;
}

.nx-popup-wrapper .promotional-modal-content-wrapper .left-content-warp img,
.nx-popup-wrapper .discount-modal-content-wrapper .left-content-warp img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.nx-popup-wrapper .promotional-modal-content-wrapper .right-content-warp,
.nx-popup-wrapper .discount-modal-content-wrapper .right-content-warp,
.nx-popup-wrapper .right-content-inner-wrap {
    min-width: 0;
    max-width: 100%;
}

.nx-popup-wrapper .right-content-warp .title,
.nx-popup-wrapper .right-content-warp p,
.nx-popup-wrapper .btn-boxed {
    max-width: 100%;
    word-break: break-word;
}

.nx-popup-wrapper .btn-boxed {
    white-space: normal;
}

/* Frontend Bootstrap and Magnific popups use different wrappers, but both
   need the same viewport and media limits. */
.modal {
    overflow-y: auto;
}

.modal-dialog {
    width: calc(100% - 24px);
    max-width: 960px;
    margin: 12px auto;
}

.modal-content {
    max-width: 100%;
    max-height: calc(100vh - 24px);
    overflow: hidden;
}

.modal-body {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.mfp-wrap {
    overflow-y: auto;
}

.mfp-content,
.mfp-figure,
.mfp-figure figure {
    max-width: 100%;
}

/* Recent Blog Post widget */
.footer-area .recent_post_item li.single-recent-post-item {
    align-items: flex-start;
    min-width: 0;
}

.footer-area .recent_post_item li.single-recent-post-item .thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 36px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.footer-area .recent_post_item li.single-recent-post-item .thumb img,
.footer-area .recent_post_item li.single-recent-post-item .recent-post-thumbnail {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center;
}

.footer-area .recent_post_item li.single-recent-post-item .content {
    flex: 1 1 auto;
    min-width: 0;
}

.footer-area .recent_post_item li.single-recent-post-item .content .title {
    overflow-wrap: anywhere;
}

/* Blog media keeps every upload's natural aspect ratio. */
.blog-content-area .blog-classic-item-01 .thumbnail {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 28px;
    overflow: visible;
}

.blog-content-area .blog-classic-item-01 .thumbnail img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
}

@media only screen and (max-width: 767px) {
    .blog-content-area .blog-classic-item-01 .thumbnail {
        margin-bottom: 22px;
    }
}

/* Article hero media also scales proportionally instead of being cropped. */
.blog-details-item > .thumb {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
    margin: 0 auto 28px;
}

.blog-details-item > .thumb img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
}

/* Related cards use equal responsive slots, while contain keeps every source
   image proportional and fully visible. */
.related-post-area .single-blog-grid-02 .thumb {
    width: 100%;
    aspect-ratio: 12 / 5;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: transparent;
}

.related-post-area .single-blog-grid-02 .thumb img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
}

.blog-details-item .content-area img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.related-post-area .related-news-carousel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
    align-items: stretch;
}

.related-post-area .single-blog-grid-02 {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: 100%;
}

.related-post-area .single-blog-grid-02 .content {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 14px;
}

.related-post-area .single-blog-grid-02 .content .title {
    display: block;
    width: 100%;
    margin-bottom: 0;
    line-height: 28px;
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal;
}

.related-post-area .single-blog-grid-02 .content .title a {
    display: block;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .related-post-area .related-news-carousel {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .related-post-area .single-blog-grid-02 .thumb {
        aspect-ratio: 2 / 1;
    }
}

/* Keep footer widgets aligned as one responsive grid. The image widget and
   raw HTML widget can contain arbitrary media, so their inner content must
   be allowed to shrink without changing the column width. */
.footer-area .footer-top > .container > .row {
    align-items: stretch;
}

.footer-area .footer-top > .container > .row > [class*="col-"] {
    display: flex;
    min-width: 0;
}

.footer-area .footer-top > .container > .row > [class*="col-"] > .footer-widget {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: 100%;
}

/* The image widget needs no empty equal-height area around its logo. */
.footer-area .footer-top > .container > .row > [class*="col-"] > .footer-widget.image-widget {
    align-self: flex-start;
    height: auto;
    margin-bottom: 0;
}

.footer-area .footer-widget > .custom-html-widget,
.footer-area .footer-widget > .single-wrap,
.footer-area .footer-widget > .newsletter-widget {
    width: 100%;
    min-width: 0;
}

.footer-area .footer-widget .single-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex: 1 1 auto;
}

.footer-area .footer-widget.image-widget .single-wrap {
    flex: 0 0 auto;
}

.footer-area .footer-widget.image-widget .image-widget-title {
    width: 100%;
    margin: 0 0 20px;
    text-align: left;
    line-height: 28px;
}

.footer-area .footer-widget .single-wrap img {
    display: block;
    width: min(220px, calc(100vw - 30px));
    max-width: min(220px, calc(100vw - 30px));
    height: auto;
    max-height: 220px;
    margin: 0 auto;
    object-fit: contain;
}

.footer-area .footer-widget .custom-html-widget,
.footer-area .footer-widget .newsletter-widget {
    overflow-wrap: anywhere;
}

.footer-area .footer-widget .widget-description {
    overflow-wrap: anywhere;
}

.footer-area .footer-widget.image-widget .image-widget-description {
    width: 100%;
    margin: 0 0 6px;
    text-align: left;
    line-height: 1.6;
}

.footer-area .footer-widget.image-widget .single-wrap {
    align-self: flex-start;
    margin-top: 0;
    padding-top: 0;
}

.footer-area .footer-widget.image-widget .site-language-bar {
    margin-top: 20px;
}

.footer-area .footer-widget.image-widget .site-language-bar__inner {
    justify-content: center;
}

.footer-area .footer-widget.image-widget .site-language-switcher {
    width: auto;
    min-width: min(100%, 280px);
    margin: 0 auto;
}

.footer-area .footer-widget .custom-html-widget img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

/* Keep editor-inserted YouTube embeds proportional on every viewport. */
.dynamic-page-content-wrap iframe[src*="youtube.com/embed"],
.dynamic-page-content-wrap iframe[src*="youtube-nocookie.com/embed"],
.dynamic-page-content-wrap iframe[src*="youtu.be"] {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
    border: 0;
    margin: 0 auto;
}

/* Store badges are SVGs, so let them render at a useful size without
   distorting their intrinsic aspect ratio. */
.custom-html-widget img[src*="appstore"],
.custom-html-widget img[src*="playstore"],
.dynamic-page-content-wrap img[src*="appstore"],
.dynamic-page-content-wrap img[src*="playstore"] {
    display: inline-block;
    width: min(190px, 100%) !important;
    max-width: 100%;
    height: auto !important;
    max-height: none;
    object-fit: contain;
    image-rendering: auto;
    vertical-align: middle;
}

.custom-html-widget a[href*="apps.apple"],
.custom-html-widget a[href*="play.google"],
.dynamic-page-content-wrap a[href*="apps.apple"],
.dynamic-page-content-wrap a[href*="play.google"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    line-height: 0;
}

/* Blog pagination uses one compact control row instead of the framework's
   unstyled Tailwind mobile and desktop blocks. */
.pagination-wrapper {
    width: 100%;
    margin-top: 30px;
}

.pagination-wrapper .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination-wrapper .page-item {
    margin: 0;
}

.pagination-wrapper .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 11px;
    color: var(--heading-color);
    background-color: #fff;
    border: 1px solid #e2e7ee;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.pagination-wrapper .page-link:hover,
.pagination-wrapper .page-link:focus {
    color: #fff;
    background-color: var(--main-color-two);
    border-color: var(--main-color-two);
}

.pagination-wrapper .page-item.active .page-link {
    color: #fff;
    background-color: var(--main-color-two);
    border-color: var(--main-color-two);
}

.pagination-wrapper .page-item.disabled .page-link {
    color: #a4aab4;
    background-color: #f4f6f8;
    border-color: #e2e7ee;
    cursor: not-allowed;
}

.pagination-wrapper .page-link i {
    margin: 0;
    font-size: 11px;
}

/* Course pagination uses compact, touch-friendly arrow controls. */
.course-pagination {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: visible;
}

.course-pagination .pagination-nav {
    display: flex;
    justify-content: center;
    width: 100%;
}

.course-pagination .pagination {
    justify-content: center;
}

.course-pagination .page-link {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0 !important;
    font-size: 14px;
    line-height: 1;
}

.course-pagination .page-link i {
    display: inline-block;
    width: auto;
    height: auto;
    font-size: 12px !important;
    line-height: 1;
}

@media only screen and (max-width: 575px) {
    .course-pagination .page-link {
        width: 34px;
        min-width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .course-pagination .pagination {
        gap: 4px;
    }
}

@media only screen and (max-width: 767px) {
    /* Give stacked footer widgets a clear, restrained separation on phones. */
    .footer-area .footer-top > .container > .row > [class*="col-"] {
        position: relative;
        display: flex;
        width: 100%;
        padding-top: 26px;
        padding-bottom: 26px;
        border-bottom: 1px solid rgba(255, 255, 255, .18);
    }

    .footer-area .footer-top > .container > .row > [class*="col-"]:first-child {
        padding-top: 0;
    }

    .footer-area .footer-top > .container > .row > [class*="col-"]:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .footer-area .footer-top > .container > .row > [class*="col-"]:not(:last-child)::after {
        position: absolute;
        right: 0;
        bottom: -1px;
        left: 0;
        width: 48px;
        height: 2px;
        margin: auto;
        background-color: var(--main-color-two);
        content: "";
    }

    .footer-area .footer-top > .container > .row > [class*="col-"] > .footer-widget {
        height: auto;
    }
}

/* Home 17 hero: show the uploaded background's own full-width wave instead of
   letting the global cover rule crop its lower edge. */
.header-slider-wrapper.course-home {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}

.header-slider-wrapper.course-home::after {
    display: none;
}

.header-slider-wrapper.course-home .header-area,
.header-style-03.header-variant-17 .header-area {
    position: relative;
    /* The image and text are sibling stacking contexts. Keep all copy above
       the illustration so the glass panel never gets visually covered. */
    z-index: 2;
    padding-top: 255px !important;
    padding-bottom: 165px !important;
}

.header-slider-wrapper.course-home .right-image-wrap {
    top: 52%;
    /* Keep the illustration visually underneath the desktop copy panel. */
    right: 18%;
    width: min(54vw, 840px);
    max-height: 630px;
    z-index: 1;
    filter: saturate(1.08) contrast(1.04);
    transform: translateY(-50%);
}

.header-slider-wrapper.course-home .right-image-wrap img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 630px;
    height: auto;
    object-fit: contain;
}

/* Home 17 hero copy: give the editable text a clear, modern reading surface
   while keeping the uploaded background and illustration visible. */
.header-slider-wrapper.course-home .header-inner {
    position: relative;
    z-index: 2;
    max-width: 690px;
    padding: 34px 40px 36px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .78);
    border-left: 6px solid rgba(253, 169, 9, .92);
    border-radius: 18px;
    background: rgba(255, 255, 255, .32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86),
        inset 0 -1px 0 rgba(255, 255, 255, .34),
        0 22px 52px rgba(20, 47, 76, .18);
    -webkit-backdrop-filter: blur(6px) saturate(195%);
    backdrop-filter: blur(6px) saturate(195%);
}

.header-slider-wrapper.course-home .header-inner .title {
    position: relative;
    margin: 0 0 24px;
    padding-bottom: 20px;
    color: #07162d;
    font-family: "Poppins", var(--heading-font), system-ui, sans-serif;
    font-size: 56px;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .82),
        0 2px 10px rgba(255, 255, 255, .18);
}

.header-slider-wrapper.course-home .header-inner .title::after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 76px;
    height: 4px;
    border-radius: 4px;
    background: var(--course-two-color);
    content: "";
}

.header-slider-wrapper.course-home .header-inner .description {
    max-width: 610px;
    color: #0b1d38;
    font-family: "Poppins", var(--body-font), system-ui, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.65;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .86);
}

.header-slider-wrapper.course-home .header-inner .description > div {
    margin: 0 0 4px;
}

.header-slider-wrapper.course-home .header-inner .description b,
.header-slider-wrapper.course-home .header-inner .description strong {
    color: #020b1b;
    font-weight: 600;
}

.header-slider-wrapper.course-home .header-inner .btn-wrapper {
    margin-top: 26px !important;
}

.header-slider-wrapper.course-home .header-inner .btn-dagency {
    min-height: 54px;
    padding: 12px 14px 12px 28px;
    border: 2px solid rgba(255, 255, 255, .72);
    box-shadow: 0 10px 22px rgba(253, 169, 9, .22);
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .header-slider-wrapper.course-home .right-image-wrap {
        right: 17%;
        width: min(54vw, 700px);
    }
}

/* Use one centered desktop connector from step 1 to the final step, behind
   the numbered squares instead of separate offset segments. */
@media only screen and (min-width: 1201px) {
    .cagency-work-process-list {
        position: relative;
    }

    .cagency-work-process-list::before {
        position: absolute;
        top: 17px;
        right: 9.2%;
        left: 4.5%;
        height: 1px;
        border-bottom: 2px dashed var(--paragraph-color);
        content: "";
        pointer-events: none;
        z-index: 0;
    }

    .cagency-work-process-list .single-work-process-item .num-wrap {
        z-index: 1;
    }

    .cagency-work-process-list .single-work-process-item .num-wrap::before {
        display: none;
    }
}

@media only screen and (max-width: 991px) {
    .header-slider-wrapper.course-home .header-area,
    .header-style-03.header-variant-17 .header-area {
        padding-top: 170px !important;
        padding-bottom: 90px !important;
    }

    .header-slider-wrapper.course-home .right-image-wrap {
        display: block !important;
        top: 65%;
        right: 50%;
        width: min(88vw, 520px);
        max-height: 420px;
        opacity: .3;
        pointer-events: none;
        transform: translate(50%, -50%);
    }

    .header-slider-wrapper.course-home .right-image-wrap img {
        max-height: 420px;
    }

    .header-slider-wrapper.course-home .header-inner {
        max-width: 720px;
        margin-right: auto;
        margin-left: auto;
        background: rgba(255, 255, 255, .36);
    }

    .header-slider-wrapper.course-home .header-inner .title {
        font-size: 48px;
    }
}

@media only screen and (max-width: 767px) {
    /* Keep the existing logo-to-title breathing room on phones. */
    .header-slider-wrapper.course-home .header-area,
    .header-style-03.header-variant-17 .header-area {
        padding-top: 240px !important;
        padding-bottom: 90px !important;
    }

    .header-slider-wrapper.course-home .right-image-wrap {
        top: 68%;
        width: 94vw;
        max-height: 360px;
        opacity: .28;
    }

    .header-slider-wrapper.course-home .right-image-wrap img {
        max-height: 360px;
    }

    .header-slider-wrapper.course-home .header-inner {
        max-width: 100%;
        padding: 25px 20px 27px;
        border-left-width: 4px;
        border-radius: 14px;
        background: rgba(255, 255, 255, .38);
        -webkit-backdrop-filter: blur(6px) saturate(195%);
        backdrop-filter: blur(6px) saturate(195%);
    }

    .header-slider-wrapper.course-home .header-inner .title {
        margin-bottom: 20px;
        padding-bottom: 16px;
        font-size: 36px;
        line-height: 1.14;
    }

    .header-slider-wrapper.course-home .header-inner .title::after {
        width: 62px;
        height: 3px;
    }

    .header-slider-wrapper.course-home .header-inner .description {
        font-size: 16px;
        line-height: 1.65;
    }

    .header-slider-wrapper.course-home .header-inner .btn-dagency {
        min-height: 50px;
        padding-left: 22px;
    }

}

/* Course cards stay centered when the responsive column is wider than the
   theme's fixed card width. */
.course-grid-row {
    justify-content: center;
}

.course-grid-row > [class*="col-"] {
    display: flex;
    justify-content: center;
}

.course-grid-row .course-single-grid-item {
    width: 100%;
    max-width: 350px;
}

/* Center only the course cards while preserving the theme's left-aligned
   section headings and action controls. */
.all-courses-area > .container > .row + .row {
    justify-content: center;
}

.latest-courses-area .recent-course-area .owl-item,
.all-courses-area > .container > .row + .row > [class*="col-"] {
    display: flex;
    justify-content: center;
}

.latest-courses-area .recent-course-area .owl-item > .course-single-grid-item,
.all-courses-area .course-single-grid-item {
    width: 100%;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
}

.course-single-grid-item .thumb > a {
    display: block;
    min-width: 0;
}

.course-single-grid-item .thumb > a img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Site identity logos are normalized visually without changing their aspect
   ratio, including SVG files with arbitrary intrinsic dimensions. */
.navbar-area .nav-container .responsive-mobile-menu .logo-wrapper {
    max-width: 200px;
}

.header-style-03 .navbar-area .nav-container .responsive-mobile-menu .logo-wrapper {
    max-width: 200px;
}

.navbar-area .nav-container .responsive-mobile-menu .logo-wrapper .logo img {
    display: block;
    width: 200px;
    height: 200px;
    max-width: 100%;
    object-fit: contain;
}

.header-style-03 .navbar-area .nav-container .responsive-mobile-menu .logo-wrapper .logo img {
    width: 200px;
    height: 200px;
    max-width: 100%;
}

@media only screen and (min-width: 768px) {
    .nx-popup-wrapper .nx-modal-inner-content-wrapper {
        height: 400px;
        min-height: 400px;
    }

    .nx-popup-wrapper .promotional-modal-content-wrapper .left-content-warp {
        flex: 0 1 50%;
    }

    .nx-popup-wrapper .promotional-modal-content-wrapper .right-content-warp {
        flex: 1 1 50%;
    }

    .nx-popup-wrapper .discount-modal-content-wrapper .left-content-warp {
        flex: 0 1 330px;
    }

    .nx-popup-wrapper .discount-modal-content-wrapper .right-content-warp {
        flex: 1 1 auto;
    }
}

@media only screen and (max-width: 767px) {
    .container,
    .container-fluid {
        max-width: 100%;
    }

    .custom-form-builder-form.contact-page-form,
    .custom-form-builder-wrapper .contact-page-form {
        min-width: 0;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .blog-details-item,
    .blog-details-item .content,
    .blog-classic-item-01,
    .blog-classic-item-01 .content {
        min-width: 0;
        max-width: 100%;
    }

    .blog-details-item img,
    .blog-classic-item-01 img {
        width: 100%;
        height: auto;
    }

    .nx-popup-wrapper {
        align-items: flex-start;
        padding: 12px;
    }

    .nx-popup-wrapper .nx-modal-content-wrapper {
        width: 100%;
        max-height: calc(100vh - 24px);
        margin: 12px auto;
    }

    .nx-popup-wrapper .nx-modal-inner-content-wrapper {
        height: auto;
        padding: 42px 18px 20px;
    }

    .nx-popup-wrapper.only-image-modal .nx-modal-inner-content-wrapper {
        min-height: 280px;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .nx-popup-wrapper .notice-modal-content-wrapper .right-side-content {
        width: 100%;
        max-width: 100%;
    }

    .nx-popup-wrapper .notice-modal-content-wrapper .right-side-content .title,
    .nx-popup-wrapper .promotional-modal-content-wrapper .right-content-warp .title,
    .nx-popup-wrapper .discount-modal-content-wrapper .right-content-warp .title {
        font-size: 28px;
        line-height: 36px;
    }

    .nx-popup-wrapper .promotional-modal-content-wrapper,
    .nx-popup-wrapper .discount-modal-content-wrapper {
        display: block;
    }

    .nx-popup-wrapper .promotional-modal-content-wrapper .left-content-warp,
    .nx-popup-wrapper .discount-modal-content-wrapper .left-content-warp {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .nx-popup-wrapper .promotional-modal-content-wrapper .left-content-warp img,
    .nx-popup-wrapper .discount-modal-content-wrapper .left-content-warp img {
        max-height: 220px;
    }

    .nx-popup-wrapper .promotional-modal-content-wrapper .right-content-warp,
    .nx-popup-wrapper .discount-modal-content-wrapper .right-content-warp {
        display: block;
        width: 100%;
    }

    .nx-popup-wrapper .discount-modal-content-wrapper #countdown {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .nx-popup-wrapper .discount-modal-content-wrapper .nx-singular-countdown-item {
        width: calc(50% - 4px);
        margin-left: 0;
    }

    .modal-dialog {
        width: calc(100% - 24px);
        margin: 12px auto;
    }

    .modal-content {
        max-height: calc(100vh - 24px);
    }

    .footer-area .recent_post_item li.single-recent-post-item .thumb {
        flex-basis: 56px;
        width: 56px;
        height: 30px;
        margin-right: 7px;
    }

    .footer-area .recent_post_item li.single-recent-post-item .content .title {
        font-size: 15px;
        line-height: 20px;
    }

    .footer-area .footer-top > .container > .row > [class*="col-"] > .footer-widget {
        height: auto;
    }

    .footer-area .footer-widget .single-wrap img {
        width: min(300px, calc(100vw - 30px));
        max-width: min(300px, calc(100vw - 30px));
        max-height: 300px;
    }

    .footer-area .footer-widget.image-widget,
    .footer-area .footer-widget.image-widget .single-wrap {
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom: 0;
        min-height: 0;
        line-height: 0;
    }

    .footer-area .footer-widget.image-widget .image-widget-title {
        margin-bottom: 12px;
        line-height: 1.3;
    }

    .footer-area .footer-widget.image-widget .site-language-switcher {
        width: min(100%, 360px);
        margin: 0 auto;
    }

    .latest-courses-area .recent-course-area .owl-stage {
        display: flex;
        align-items: stretch;
    }

    .latest-courses-area .recent-course-area .owl-item {
        display: flex;
        height: auto;
    }

    .latest-courses-area .recent-course-area .owl-item > .course-single-grid-item,
    .all-courses-area .course-single-grid-item {
        width: 100%;
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Brand carousel logos: give SVGs a readable desktop size without letting
   them dominate the single-item mobile carousel. */
.client-area .single-brand .img-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
}

.client-area .single-brand img {
    display: block;
    width: min(400px, 100%);
    max-width: 100%;
    height: auto;
    max-height: 180px;
    object-fit: contain;
    opacity: .65;
    filter: grayscale(.45);
    transition: filter .3s ease, opacity .3s ease;
}

.client-area .single-brand:hover img {
    opacity: 1;
    filter: grayscale(0);
}

@media only screen and (max-width: 767px) {
    .client-area .single-brand img {
        width: min(330px, 100%);
        max-height: 145px;
    }
}

@media only screen and (max-width: 374px) {
    .footer-area .recent_post_item li.single-recent-post-item .thumb {
        flex-basis: 50px;
        width: 50px;
        height: 28px;
    }
}

/* Keep the newsletter action icon inside the input on every viewport. */
.newsletter-form-wrap,
.newsletter-form-wrap form {
    width: 100%;
    max-width: 100%;
}

.newsletter-form-wrap .form-group .form-control {
    width: 100%;
    max-width: 100%;
    padding-right: 48px;
}

.newsletter-form-wrap .newsletter-math-challenge {
    margin-top: 8px;
}

.newsletter-form-wrap .newsletter-math-instruction {
    margin: 2px 0 6px;
    font-size: 11px;
    line-height: 15px;
}

.newsletter-form-wrap .form-message-show.newsletter-response-visible {
    display: block;
    margin-bottom: 12px;
}

.newsletter-form-wrap .newsletter-two-step.newsletter-complete {
    display: none;
}

.newsletter-two-step .newsletter-step {
    display: none;
}

.newsletter-two-step .newsletter-email-step {
    display: block;
}

.newsletter-two-step.is-math-step .newsletter-email-step {
    display: none;
}

.newsletter-two-step.is-math-step .newsletter-math-step {
    display: block;
}

.newsletter-two-step .newsletter-next-step,
.newsletter-form-wrap .newsletter-two-step .newsletter-submit-btn {
    border: 0;
    border-radius: 4px;
    background: var(--main-color-one);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 18px;
    font-size: 14px;
    line-height: 1;
}

.newsletter-two-step .newsletter-next-step:hover,
.newsletter-two-step .newsletter-submit-btn:hover {
    background: var(--main-color-two);
    color: #fff;
}

.newsletter-form-wrap .newsletter-two-step .newsletter-submit-btn {
    position: static;
    width: auto;
    height: auto;
    line-height: 1;
}

.newsletter-form-wrap .newsletter-two-step .newsletter-submit-btn i {
    margin-right: 7px;
}

.newsletter-form-wrap .submit-btn {
    top: 7px;
    right: 5px;
    width: 40px;
    min-width: 40px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    overflow: hidden;
}

.newsletter-form-wrap .submit-btn i {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 14px;
}

.newsletter-form-wrap .newsletter-two-step .newsletter-next-step,
.newsletter-form-wrap .newsletter-two-step .newsletter-submit-btn {
    min-height: 32px;
    margin-top: 6px;
    padding: 6px 12px;
    font-size: 12px;
}

[dir="rtl"] .newsletter-form-wrap .form-group .form-control {
    padding-right: 12px;
    padding-left: 48px;
}

[dir="rtl"] .newsletter-form-wrap .submit-btn {
    right: auto;
    left: 5px;
}

/* Render visible text using the capitalization entered in the admin. */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body a,
body span,
body li,
body button,
body label,
body small,
body strong,
body em,
body td,
body th,
body input,
body textarea,
body select,
body option,
body input::placeholder,
body textarea::placeholder {
    text-transform: none !important;
}

@media only screen and (max-width: 767px) {
    /* The square logo needs a small breathing space before the course hero. */
    .header-area.course-home {
        padding-top: 220px !important;
    }
}

@media only screen and (max-width: 991px) {
    .header-style-01 .navbar-area .nav-container {
        padding: 0 30px !important;
    }

    /* Modern mobile menu control with a clear accent and compact icon. */
    .navbar-area .nav-container .responsive-mobile-menu .navbar-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        min-width: 52px;
        height: 46px;
        padding: 0;
        border: 0;
        border-radius: 14px;
        background-color: var(--main-color-one);
        color: #fff;
        box-shadow: 0 6px 16px rgba(29, 34, 40, 0.2);
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .navbar-area .nav-container .responsive-mobile-menu .navbar-toggler:hover,
    .navbar-area .nav-container .responsive-mobile-menu .navbar-toggler:focus {
        background-color: #f66f57;
        transform: translateY(-50%) scale(1.04);
        transform-origin: center;
        box-shadow: 0 8px 18px rgba(29, 34, 40, 0.24);
    }

    .navbar-area .nav-container .responsive-mobile-menu .navbar-toggler:focus {
        outline: 0;
        box-shadow: 0 0 0 3px rgba(255, 138, 115, 0.3), 0 8px 18px rgba(29, 34, 40, 0.24);
    }

    .navbar-area .nav-container .responsive-mobile-menu .navbar-toggler-icon {
        position: relative;
        display: block;
        width: 26px;
        height: 18px;
        background-image: none !important;
        background-size: auto;
    }

    .navbar-area .nav-container .responsive-mobile-menu .navbar-toggler-icon::before {
        position: absolute;
        top: 1px;
        left: 0;
        width: 26px;
        height: 2px;
        border-radius: 2px;
        background-color: #fff;
        box-shadow: 0 7px 0 #fff, 0 14px 0 #fff;
        content: '';
    }
}

/* Compact the nav row without resizing the site branding. The logo keeps its
   normalized 200px box, but is removed from normal flow so it cannot make the
   navbar background unnecessarily tall. */
.header-style-01 .navbar-area.nav-style-01 .nav-container {
    min-height: 87px;
    height: 87px;
    padding: 0 15px !important;
    overflow: visible;
}

.header-style-01 .navbar-area.nav-style-01 .responsive-mobile-menu {
    position: relative;
    min-height: 165px;
    height: 165px;
    overflow: visible;
    align-self: flex-start;
}

.header-style-01 .navbar-area.nav-style-01 .responsive-mobile-menu .logo-wrapper {
    position: relative;
    width: 200px;
    max-width: 200px;
    height: 165px;
    overflow: visible;
}

.header-style-01 .navbar-area.nav-style-01 .responsive-mobile-menu .logo-wrapper .logo {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 200px;
    max-width: 200px;
    height: 165px;
    overflow: visible;
}

.header-style-01 .navbar-area.nav-style-01 .responsive-mobile-menu .logo-wrapper .logo img {
    position: static;
    width: 200px;
    max-width: 200px;
    height: 165px;
    object-fit: contain;
}

@media only screen and (min-width: 992px) {
    .header-style-01 .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav li {
        line-height: 80px;
    }
}

@media only screen and (min-width: 1201px) {
    .header-style-01 .navbar-area.nav-style-01 .responsive-mobile-menu .logo-wrapper .logo {
        top: -20px;
    }
}

@media only screen and (max-width: 991px) {
    .header-style-01 .navbar-area.nav-style-01 .nav-container {
        min-height: 87px;
        height: 87px;
        padding: 0 20px !important;
    }

    .header-style-01 .navbar-area.nav-style-01 .responsive-mobile-menu {
        min-height: 165px;
        height: 165px;
        display: flex;
        align-items: center;
    }
}

/* Collapse the menu through the tablet range so it cannot wrap into a clipped
   second row between 1000px and 1200px. */
@media only screen and (max-width: 1200px) {
    .header-style-01 .navbar-area.nav-style-01 .nav-container {
        position: relative;
        min-height: 135px;
        height: 135px;
        padding: 0 20px !important;
    }

    .header-style-01 .navbar-area.nav-style-01 .responsive-mobile-menu {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 115px;
        height: 115px;
    }

    .header-style-01 .navbar-area.nav-style-01 .responsive-mobile-menu .logo-wrapper {
        height: 135px;
        min-height: 135px;
    }

    .header-style-01 .navbar-area.nav-style-01 .responsive-mobile-menu .logo-wrapper .logo {
        top: 0;
    }

    /* Match desktop behavior: the menu is normal at the top and becomes fixed
       only after the scroll handler adds .nav-fixed. */
    .header-style-01 .navbar-area.nav-style-01.nav-fixed {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 100000 !important;
        width: 100%;
        height: 85px;
        min-height: 85px;
        overflow: visible;
    }

    .header-style-01.navbar-variant-01 .navbar-area.nav-style-01 {
        height: 100px;
        min-height: 100px;
        overflow: visible;
    }

    .header-style-01 .navbar-area.nav-style-01 .responsive-mobile-menu .navbar-toggler {
        position: absolute;
        top: 40%;
        right: 0;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 52px;
        min-width: 52px;
        height: 46px;
        padding: 0;
        border: 0;
        border-radius: 14px;
        background-color: var(--main-color-one);
        color: #fff;
        box-shadow: 0 6px 16px rgba(29, 34, 40, 0.2);
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
        transform: translateY(-50%);
    }

    .header-style-01 .navbar-area.nav-style-01 .responsive-mobile-menu .navbar-toggler:hover,
    .header-style-01 .navbar-area.nav-style-01 .responsive-mobile-menu .navbar-toggler:focus {
        background-color: #f66f57;
        transform: translateY(-50%) scale(1.04);
        transform-origin: center;
        box-shadow: 0 8px 18px rgba(29, 34, 40, 0.24);
    }

    .header-style-01 .navbar-area.nav-style-01 .responsive-mobile-menu .navbar-toggler:focus {
        outline: 0;
        box-shadow: 0 0 0 3px rgba(255, 138, 115, 0.3), 0 8px 18px rgba(29, 34, 40, 0.24);
    }

    .header-style-01 .navbar-area.nav-style-01 .responsive-mobile-menu .navbar-toggler-icon {
        position: relative;
        display: block;
        width: 26px;
        height: 18px;
        background-image: none !important;
        background-size: auto;
    }

    .header-style-01 .navbar-area.nav-style-01 .responsive-mobile-menu .navbar-toggler-icon::before {
        position: absolute;
        top: 1px;
        left: 0;
        width: 26px;
        height: 2px;
        border-radius: 2px;
        background-color: #fff;
        box-shadow: 0 7px 0 #fff, 0 14px 0 #fff;
        content: '';
    }

    .header-style-01 .navbar-area.nav-style-01 .nav-container .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 99999;
        display: none !important;
        width: 100%;
        padding-left: 20px;
        background-color: #fff;
    }

    .header-style-01 .navbar-area.nav-style-01 .nav-container .navbar-collapse.show {
        display: block !important;
    }

    .header-style-01 .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav {
        display: block;
        flex-direction: column !important;
        height: auto;
        margin-top: 0;
        text-align: left;
    }

    .header-style-01 .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav li {
        display: block;
        line-height: 26px !important;
        padding: 10px 0;
        border-bottom: 1px solid #e2e2e2;
    }

    .header-style-01 .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav li a,
    .header-style-01 .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children::before,
    .header-style-01 .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav li.menu-item-has-mega-menu::before {
        color: var(--paragraph-color) !important;
    }

    /* Keep the exact collapsed-menu interaction through the full tablet
       range. Bootstrap starts expanding navbar-expand-lg at 992px, so these
       rules explicitly preserve the mobile submenu behavior until desktop
       begins at 1201px. */
    .header-style-01 .navbar-area.nav-style-01 .nav-right-content {
        display: none !important;
    }

    .header-style-01 .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children,
    .header-style-01 .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav li.menu-item-has-mega-menu {
        z-index: initial;
    }

    .header-style-01 .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children:hover {
        padding-bottom: 0;
    }

    .header-style-01 .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children:hover > .sub-menu {
        visibility: visible;
        height: auto;
        opacity: 1;
        background-color: transparent;
        border-bottom: none;
    }

    .header-style-01 .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu {
        position: initial;
        display: block;
        width: 100%;
        margin-left: 0;
        padding-bottom: 0;
        border-top: none;
        box-shadow: none;
        visibility: hidden;
        height: 0;
        max-height: 250px;
        overflow: hidden;
        overflow-y: scroll;
        opacity: 0;
        transition: height 0.5s;
    }

    .header-style-01 .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu .sub-menu .menu-item-has-children::before {
        content: "\f107";
    }

    .header-style-01 .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu li {
        padding: 0;
    }

    .header-style-01 .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu li + li {
        border-top: none;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .header-style-01 .navbar-area.nav-style-01 .responsive-mobile-menu .navbar-toggler {
        top: 60%;
    }
}

/* Keep the mobile menu behavior explicit at 980px and below as well. */
@media only screen and (max-width: 980px) {
    .header-style-01 .navbar-area.nav-style-01 .responsive-mobile-menu {
        display: flex;
        align-items: center;
    }

    .header-style-01 .navbar-area.nav-style-01 .nav-container .navbar-toggler {
        display: inline-flex;
    }
}

@media only screen and (max-width: 767px) {
    .header-slider-wrapper.course-home + .container {
        margin-top: 24px !important;
    }

    /* Center related blog cards and headings in the mobile reading flow. */
    .related-post-area .section-title,
    .related-post-area .section-title > .title,
    .related-post-area .related-news-carousel,
    .related-post-area .single-blog-grid-02,
    .related-post-area .single-blog-grid-02 .content {
        text-align: center;
    }

    .related-post-area .related-news-carousel {
        width: 100%;
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
    }

    .related-post-area .single-blog-grid-02 {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
    }

    .related-post-area .single-blog-grid-02 .thumb {
        display: flex;
        width: 100%;
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
    }

    .related-post-area .single-blog-grid-02 .thumb img {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        margin-right: auto;
        margin-left: auto;
        object-fit: contain;
    }

    .related-post-area .single-blog-grid-02 .content {
        width: 100%;
        padding: 12px 10px 0;
    }

    .related-post-area .single-blog-grid-02 .content .title {
        font-size: 17px;
        line-height: 26px;
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
        overflow: visible;
        text-align: center;
    }

    .related-post-area .single-blog-grid-02 .content .title a {
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
        overflow: visible;
        text-align: center;
    }
}

/* Course instructor biography: keep the biography primary and the portrait
   compact, with a single framed profile instead of two competing columns. */
#nav-instructor .course-instructor-profile {
    display: flex;
    align-items: center;
    gap: 28px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 30px;
    border: 1px solid #e1e8f0;
    border-radius: 18px;
    background-color: #ffffff;
    box-shadow: 0 12px 30px rgba(29, 34, 40, 0.08);
    overflow: hidden;
}

#nav-instructor .course-instructor-profile .content-wrap {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
}

#nav-instructor .course-instructor-profile .content-wrap .designation {
    margin-bottom: 8px;
    color: var(--course-two-color);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

#nav-instructor .course-instructor-profile .content-wrap .title {
    margin-bottom: 14px;
    line-height: 1.25;
}

#nav-instructor .course-instructor-profile .description,
#nav-instructor .course-instructor-profile .description p {
    max-width: 100%;
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

#nav-instructor .course-instructor-profile .social-wrap {
    margin-top: 18px;
}

#nav-instructor .course-instructor-profile .thumb {
    order: 2;
    flex: 0 0 152px;
    width: 152px;
    height: 190px;
    margin: 0;
    padding: 6px;
    border: 1px solid #d5dfeb;
    border-radius: 16px;
    background-color: #f7faff;
}

#nav-instructor .course-instructor-profile .thumb img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 11px;
    object-fit: contain;
    object-position: center;
    background-color: #f7faff;
}

@media only screen and (max-width: 767px) {
    #nav-instructor .course-instructor-profile {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 22px;
    }

    #nav-instructor .course-instructor-profile .thumb {
        align-self: center;
        flex-basis: 120px;
        width: 120px;
        height: 150px;
    }
}

/* Instructor profile pages use a compact portrait card and a readable
   biography workspace. These rules are scoped to the page class so the
   shared course cards and other frontend layouts keep their existing style. */
.instructor-profile-page {
    background-color: #f6f9fc;
}

.instructor-profile-page > .container > .row {
    align-items: flex-start;
}

.instructor-profile-page .instructor-info-wrapper {
    height: 100%;
    padding: 28px 24px;
    border: 1px solid #e1e8f0;
    border-radius: 14px;
    background-color: #ffffff;
    box-shadow: 0 14px 34px rgba(28, 43, 61, 0.08);
    text-align: center;
}

.instructor-profile-page .instructor-info-wrapper .img-wrap {
    width: 210px;
    height: 270px;
    margin: 0 auto 22px;
    padding: 7px;
    overflow: hidden;
    border: 1px solid #d6e1ec;
    border-radius: 18px;
    background-color: #f7faff;
    box-shadow: 0 10px 24px rgba(41, 61, 84, 0.1);
}

.instructor-profile-page .instructor-info-wrapper .img-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: contain;
    object-position: center;
    background-color: #f7faff;
}

.instructor-profile-page .instructor-info-wrapper .content .title {
    margin-bottom: 6px;
    color: #172235;
    font-size: 24px;
    line-height: 1.25;
}

.instructor-profile-page .instructor-info-wrapper .content .designation {
    display: block;
    color: var(--main-color-one);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.instructor-profile-page .instructor-info-wrapper .content .social-wrap {
    margin-top: 20px;
}

.instructor-profile-page .instructor-info-wrapper .content .social-wrap li a {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid #dce5ef;
    border-radius: 50%;
    background-color: #ffffff;
    color: var(--main-color-one);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.instructor-profile-page .instructor-info-wrapper .content .social-wrap li a:hover {
    background-color: var(--main-color-one);
    color: #ffffff;
    transform: translateY(-2px);
}

.instructor-profile-page .instructor-content-wrapper {
    min-height: 100%;
    padding: 28px 30px 32px;
    border: 1px solid #e1e8f0;
    border-radius: 14px;
    background-color: #ffffff;
    box-shadow: 0 14px 34px rgba(28, 43, 61, 0.08);
}

.instructor-profile-page .instructor-content-wrapper > .nav-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
    border-bottom: 1px solid #e1e8f0;
}

.instructor-profile-page .instructor-content-wrapper > .nav-tabs .nav-link {
    margin-bottom: -1px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    color: #647184;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.instructor-profile-page .instructor-content-wrapper > .nav-tabs .nav-link.active {
    border-color: #e1e8f0 #e1e8f0 #ffffff;
    color: var(--main-color-one);
    background-color: #ffffff;
}

.instructor-profile-page .instructor-content-wrapper .tab-inner-area {
    color: #4c5868;
    font-size: 16px;
    line-height: 1.8;
}

.instructor-profile-page .instructor-content-wrapper .tab-inner-area p:last-child {
    margin-bottom: 0;
}

.instructor-profile-page .my-courses-wrap .row {
    row-gap: 24px;
}

.instructor-profile-page .my-courses-wrap .course-single-grid-item {
    height: 100%;
    overflow: hidden;
    border: 1px solid #e1e8f0;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 8px 20px rgba(28, 43, 61, 0.06);
}

.instructor-profile-page .my-courses-wrap .course-single-grid-item .thumb {
    aspect-ratio: 16 / 9;
    min-height: 0;
    overflow: hidden;
}

.instructor-profile-page .my-courses-wrap .course-single-grid-item .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.instructor-profile-page .my-courses-wrap .course-single-grid-item .content {
    padding: 20px;
}

@media only screen and (max-width: 991px) {
    .instructor-profile-page .instructor-info-wrapper {
        margin-bottom: 24px;
    }

    .instructor-profile-page .instructor-info-wrapper .img-wrap {
        width: 180px;
        height: 230px;
    }
}

@media only screen and (max-width: 767px) {
    .instructor-profile-page {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .instructor-profile-page .instructor-info-wrapper {
        padding: 22px 18px;
    }

    .instructor-profile-page .instructor-info-wrapper .img-wrap {
        width: 148px;
        height: 190px;
        margin-bottom: 18px;
    }

    .instructor-profile-page .instructor-content-wrapper {
        padding: 20px 18px 24px;
    }

    .instructor-profile-page .instructor-content-wrapper > .nav-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: thin;
    }

    .instructor-profile-page .instructor-content-wrapper > .nav-tabs .nav-link {
        flex: 0 0 auto;
        padding-right: 14px;
        padding-left: 14px;
    }

    .instructor-profile-page .instructor-content-wrapper .tab-inner-area {
        font-size: 15px;
        line-height: 1.7;
        overflow-wrap: anywhere;
    }

    .instructor-profile-page .my-courses-wrap .course-single-grid-item .content {
        padding: 16px;
    }

    .instructor-profile-page #courses_tab .my-courses-wrap > .row {
        justify-content: center;
    }

    .instructor-profile-page #courses_tab .my-courses-wrap > .row > [class*="col-"] {
        display: flex;
        flex: 0 0 100%;
        justify-content: center;
        max-width: 100%;
    }

    .instructor-profile-page #courses_tab .course-single-grid-item {
        width: 100%;
        max-width: 340px;
        margin-right: auto;
        margin-left: auto;
    }

    .instructor-profile-page #courses_tab .pagination-wrapper {
        text-align: center;
    }
}

/* Course detail columns stack below the large breakpoint. Keep the sidebar
   visually separated from the main course content on phones and tablets. */
@media only screen and (max-width: 991px) {
    .course-details-content-area > .container > .row > .col-lg-8 {
        margin-bottom: 32px;
    }
}

/* Course appointment link: a prominent action beside the content tabs on
   desktop and a full-width touch target when the tabs stack on mobile. */
.course-details-content-area .content-tab-wrapper > nav .nav-tabs .course-appointment-action {
    display: inline-flex;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 190px;
    margin-left: auto;
    gap: 9px;
    padding: 11px 19px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 999px;
    background: linear-gradient(135deg, #c8ff00 0%, #39ff88 100%);
    box-shadow: 0 10px 24px rgba(57, 255, 136, .3), inset 0 1px 0 rgba(255, 255, 255, .7);
    color: #10231d !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(6px) saturate(160%);
    backdrop-filter: blur(6px) saturate(160%);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.course-details-content-area .content-tab-wrapper > nav .nav-tabs .course-appointment-action::before {
    position: absolute;
    z-index: 0;
    top: 0;
    left: -35%;
    width: 28%;
    height: 100%;
    content: "";
    background: rgba(255, 255, 255, .28);
    transform: skewX(-20deg);
    transition: left .45s ease;
}

.course-details-content-area .content-tab-wrapper > nav .nav-tabs .course-appointment-action i,
.course-details-content-area .content-tab-wrapper > nav .nav-tabs .course-appointment-action span {
    position: relative;
    z-index: 1;
}

.course-details-content-area .content-tab-wrapper > nav .nav-tabs .course-appointment-action i {
    font-size: 14px;
    line-height: 1;
    color: currentColor;
}

.course-details-content-area .content-tab-wrapper > nav .nav-tabs .course-appointment-action:hover,
.course-details-content-area .content-tab-wrapper > nav .nav-tabs .course-appointment-action:focus-visible {
    color: #10231d !important;
    filter: saturate(1.12) brightness(1.04);
    transform: translateY(-2px);
    box-shadow: 0 13px 29px rgba(57, 255, 136, .4), 0 0 0 3px rgba(200, 255, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.course-details-content-area .content-tab-wrapper > nav .nav-tabs .course-appointment-action:hover::before,
.course-details-content-area .content-tab-wrapper > nav .nav-tabs .course-appointment-action:focus-visible::before {
    left: 115%;
}

@media only screen and (max-width: 767px) {
    .course-details-content-area .content-tab-wrapper > nav .nav-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: stretch;
    }

    .course-details-content-area .content-tab-wrapper > nav .nav-tabs .nav-link {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        padding: 12px 10px;
        text-align: center;
    }

    .course-details-content-area .content-tab-wrapper > nav .nav-tabs .course-appointment-action {
        flex: 0 0 100%;
        width: 100%;
        min-height: 46px;
        margin-top: 2px;
        padding: 13px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .course-details-content-area .content-tab-wrapper > nav .nav-tabs .course-appointment-action,
    .course-details-content-area .content-tab-wrapper > nav .nav-tabs .course-appointment-action::before {
        transition: none;
    }
}

/* Compact appointment profile with a clear visual hierarchy. The original
   template gives the portrait 40% of the header, which is too dominant for a
   biography and creates a tall layout on smaller screens. */
.appointment-details-page .appointment-details-item {
    max-width: 1040px;
    margin: 0 auto;
    padding: 30px;
    border: 1px solid #e3eaf2;
    border-radius: 14px;
    background-color: #ffffff;
    box-shadow: 0 14px 36px rgba(30, 42, 56, 0.08);
}

.appointment-details-page .appointment-details-item .top-part {
    align-items: center;
    gap: 34px;
    padding: 4px 0 28px;
}

.appointment-details-page .appointment-details-item .top-part .thumb {
    flex: 0 0 176px;
    width: 176px;
    height: 176px;
    margin: 0;
    padding: 7px;
    overflow: hidden;
    border: 1px solid #d7e1ec;
    border-radius: 18px;
    background-color: #f7faff;
    box-shadow: 0 8px 20px rgba(40, 61, 84, 0.1);
}

.appointment-details-page .appointment-details-item .top-part .thumb img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: contain;
    object-position: center;
    background-color: #f7faff;
}

.appointment-details-page .appointment-details-item .top-part .content {
    width: auto;
    min-width: 0;
}

.appointment-details-page .appointment-details-item .top-part .content .title {
    margin-bottom: 14px;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.18;
}

.appointment-details-page .appointment-details-item .top-part .content .short-description {
    max-width: 680px;
    margin-bottom: 18px;
    line-height: 1.75;
}

.appointment-details-page .appointment-details-item .bottom-part {
    margin-top: 0;
    padding-top: 26px;
    border-top: 1px solid #e7edf3;
}

.appointment-details-page .appointment-details-item .bottom-part .nav-tabs {
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 28px;
    border-bottom: 1px solid #e2e8ef;
}

.appointment-details-page .appointment-details-item .bottom-part .nav-tabs .nav-link {
    min-width: 0;
    padding: 12px 18px;
    border-radius: 8px 8px 0 0;
}

.appointment-details-page .booking-wrap {
    gap: 30px;
    align-items: flex-start;
}

.appointment-details-page .booking-wrap .left-part,
.appointment-details-page .booking-wrap .right-part {
    width: auto;
    padding: 0;
}

.appointment-details-page .booking-wrap .left-part {
    flex: 0 0 40%;
}

.appointment-details-page .booking-wrap .right-part {
    flex: 1 1 auto;
}

.appointment-details-page .booking-wrap .left-part,
.appointment-details-page .booking-wrap .right-part .form-wrapper {
    padding: 22px;
    border: 1px solid #e3eaf2;
    border-radius: 10px;
    background-color: #fbfcfe;
}

.appointment-details-page .booking-wrap .right-part .form-wrapper {
    background-color: #ffffff;
}

.appointment-details-page .appointment-booking-form .form-control {
    min-height: 48px;
    border: 1px solid #d8e1eb;
    border-radius: 7px;
}

.appointment-details-page #appointment-booking-form .form-group {
    margin-bottom: 22px;
}

.appointment-details-page #appointment-booking-form .button-wrap {
    margin-top: 4px;
}

/* Give the appointment information tab clear spacing between biography,
   education, additional information, and specialisation blocks. */
.appointment-details-page .information-area-wrap {
    display: grid;
    gap: 22px;
}

.appointment-details-page .information-area-wrap > .description-wrap,
.appointment-details-page .information-area-wrap > .education-info,
.appointment-details-page .information-area-wrap > .additional-info,
.appointment-details-page .information-area-wrap > .specialised-info {
    margin: 0;
    padding: 22px 24px;
    border: 1px solid #e3eaf2;
    border-radius: 12px;
    background: linear-gradient(145deg, #ffffff, #f8fbfe);
}

.appointment-details-page .information-area-wrap .title {
    margin: 0 0 13px;
}

.appointment-details-page .information-area-wrap .description-wrap > *:last-child,
.appointment-details-page .information-area-wrap .circle-list:last-child {
    margin-bottom: 0;
}

.appointment-details-page .information-area-wrap .circle-list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
}

.appointment-details-page .information-area-wrap .circle-list li {
    margin: 0;
    line-height: 1.55;
}

/* Popup builder: keep every popup inside the viewport on touch and desktop. */
.nx-popup-backdrop {
    z-index: 1990;
    inset: 0;
}

.nx-popup-wrapper {
    z-index: 1991;
    inset: 0;
    box-sizing: border-box;
    align-items: flex-start;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
        max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

.nx-popup-wrapper .nx-modal-content-wrapper {
    display: flex;
    align-items: center;
    width: min(700px, 100%);
    min-height: calc(100dvh - 24px);
    max-height: calc(100dvh - 24px);
    margin: 0 auto;
    overflow: visible;
}

.nx-popup-wrapper .nx-modal-inner-content-wrapper {
    width: 100%;
    height: auto;
    min-height: 400px;
    max-height: calc(100dvh - 24px);
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
    -webkit-overflow-scrolling: touch;
}

.nx-popup-wrapper .nx-modal-content {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.nx-popup-wrapper .nx-popup-close {
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #263244;
    font-size: 20px;
    line-height: 1;
    box-shadow: 0 5px 16px rgba(20, 30, 45, .16);
    transition: transform 160ms ease, background-color 160ms ease;
}

.nx-popup-wrapper .nx-popup-close:hover,
.nx-popup-wrapper .nx-popup-close:focus-visible {
    background: #ffffff;
    transform: scale(1.06);
    outline: 0;
}

.nx-popup-wrapper .btn-boxed {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.nx-popup-wrapper.notice-modal .nx-modal-inner-content-wrapper {
    min-height: 400px;
}

.nx-popup-wrapper.notice-modal .nx-modal-content {
    height: auto;
    min-height: 310px;
}

.nx-popup-wrapper.notice-modal-content-wrapper .right-side-content,
.nx-popup-wrapper .notice-modal-content-wrapper .right-side-content {
    width: min(100%, 430px);
    max-width: 100%;
}

.nx-popup-wrapper .notice-modal-content-wrapper .right-side-content .title,
.nx-popup-wrapper .right-content-warp .title {
    max-width: 100%;
    font-size: clamp(30px, 5vw, 50px);
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.nx-popup-wrapper .promotional-modal-content-wrapper,
.nx-popup-wrapper .discount-modal-content-wrapper {
    width: 100%;
    max-width: 100%;
    gap: 24px;
}

.nx-popup-wrapper .promotional-modal-content-wrapper .left-content-warp,
.nx-popup-wrapper .discount-modal-content-wrapper .left-content-warp {
    flex: 0 1 46%;
    width: auto;
    margin-right: 0;
}

.nx-popup-wrapper .promotional-modal-content-wrapper .right-content-warp,
.nx-popup-wrapper .discount-modal-content-wrapper .right-content-warp {
    flex: 1 1 0;
    width: auto;
}

.nx-popup-wrapper .promotional-modal-content-wrapper .left-content-warp img,
.nx-popup-wrapper .discount-modal-content-wrapper .left-content-warp img {
    max-height: min(48vh, 340px);
}

.nx-popup-wrapper .discount-modal-content-wrapper #countdown {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.nx-popup-wrapper .discount-modal-content-wrapper .nx-singular-countdown-item {
    width: calc(25% - 8px);
    min-width: 58px;
}

.nx-popup-wrapper .discount-modal-content-wrapper .nx-singular-countdown-item + .nx-singular-countdown-item {
    margin-left: 0;
}

.nx-popup-wrapper.only-image-modal .nx-modal-inner-content-wrapper {
    width: 100%;
    min-height: min(65dvh, 520px);
    max-height: calc(100dvh - 24px);
    padding: 0;
    aspect-ratio: 7 / 4;
    background-size: cover;
}

@media only screen and (max-width: 767px) {
    .nx-popup-wrapper .nx-modal-content-wrapper {
        min-height: calc(100dvh - 24px);
        max-height: calc(100dvh - 24px);
    }

    .nx-popup-wrapper .nx-modal-inner-content-wrapper,
    .nx-popup-wrapper.notice-modal .nx-modal-inner-content-wrapper {
        min-height: 0;
        max-height: calc(100dvh - 24px);
        padding: 24px;
        border-radius: 14px;
    }

    .nx-popup-wrapper .nx-popup-close {
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
        font-size: 18px;
    }

    .nx-popup-wrapper.notice-modal .nx-modal-inner-content-wrapper {
        min-height: 360px;
        background-position: 72% center;
    }

    .nx-popup-wrapper.notice-modal .nx-modal-content {
        min-height: 290px;
        align-items: center;
    }

    .nx-popup-wrapper .notice-modal-content-wrapper .right-side-content .title,
    .nx-popup-wrapper .right-content-warp .title {
        font-size: clamp(28px, 9vw, 40px);
        line-height: 1.14;
    }

    .nx-popup-wrapper .promotional-modal-content-wrapper,
    .nx-popup-wrapper .discount-modal-content-wrapper {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .nx-popup-wrapper .promotional-modal-content-wrapper .left-content-warp,
    .nx-popup-wrapper .discount-modal-content-wrapper .left-content-warp {
        width: 100%;
        margin: 0;
    }

    .nx-popup-wrapper .promotional-modal-content-wrapper .left-content-warp img,
    .nx-popup-wrapper .discount-modal-content-wrapper .left-content-warp img {
        width: min(42%, 150px);
        max-height: 15dvh;
        margin: 0 auto;
    }

    .nx-popup-wrapper .promotional-modal-content-wrapper .right-content-warp,
    .nx-popup-wrapper .discount-modal-content-wrapper .right-content-warp {
        width: 100%;
    }

    .nx-popup-wrapper .discount-modal-content-wrapper .right-content-warp .title {
        font-size: clamp(28px, 9vw, 38px);
        line-height: 1.14;
    }

    .nx-popup-wrapper .discount-modal-content-wrapper .nx-singular-countdown-item {
        flex: 1 1 calc(25% - 8px);
        width: auto;
    }

    .nx-popup-wrapper.only-image-modal .nx-modal-inner-content-wrapper {
        min-height: min(52dvh, 380px);
        aspect-ratio: auto;
        background-size: min(42vw, 150px) auto;
        background-color: #f4f6f8;
        background-repeat: no-repeat;
    }
}

@media only screen and (max-width: 380px) {
    .nx-popup-wrapper {
        padding: 8px;
    }

    .nx-popup-wrapper .nx-modal-content-wrapper,
    .nx-popup-wrapper .nx-modal-inner-content-wrapper {
        max-height: calc(100dvh - 16px);
    }

    .nx-popup-wrapper .nx-modal-inner-content-wrapper,
    .nx-popup-wrapper.notice-modal .nx-modal-inner-content-wrapper {
        padding: 20px 16px;
    }

    .nx-popup-wrapper .discount-modal-content-wrapper .nx-singular-countdown-item .time {
        font-size: 22px;
    }

    .nx-popup-wrapper .promotional-modal-content-wrapper .left-content-warp img,
    .nx-popup-wrapper .discount-modal-content-wrapper .left-content-warp img {
        width: min(40%, 125px);
        max-height: 13dvh;
    }

    .nx-popup-wrapper.only-image-modal .nx-modal-inner-content-wrapper {
        min-height: min(48dvh, 330px);
        background-size: min(40vw, 125px) auto;
    }
}

@media only screen and (max-width: 767px) {
    .appointment-details-page {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .appointment-details-page .appointment-details-item {
        padding: 18px;
        border-radius: 10px;
    }

    .appointment-details-page .appointment-details-item .top-part {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding-top: 0;
        text-align: center;
    }

    .appointment-details-page .appointment-details-item .top-part .thumb {
        align-self: center;
        flex-basis: 112px;
        width: 112px;
        height: 112px;
    }

    .appointment-details-page .appointment-details-item .top-part .content {
        width: 100%;
    }

    .appointment-details-page .appointment-details-item .top-part .content .title {
        font-size: 28px;
    }

    .appointment-details-page .appointment-details-item .top-part .content .short-description {
        line-height: 1.6;
    }

    .appointment-details-page .appointment-details-item .bottom-part .nav-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        scrollbar-width: thin;
    }

    .appointment-details-page .appointment-details-item .bottom-part .nav-tabs .nav-link {
        flex: 0 0 auto;
        white-space: nowrap;
        padding-right: 13px;
        padding-left: 13px;
    }

    .appointment-details-page .booking-wrap {
        display: block;
    }

    .appointment-details-page .booking-wrap .left-part,
    .appointment-details-page .booking-wrap .right-part {
        width: 100%;
    }

    .appointment-details-page .booking-wrap .right-part {
        margin-top: 18px;
    }

    .appointment-details-page .booking-wrap .left-part,
    .appointment-details-page .booking-wrap .right-part .form-wrapper {
        padding: 16px;
    }

    .appointment-details-page #appointment-booking-form .form-group {
        margin-bottom: 18px;
    }

    .appointment-details-page .information-area-wrap { gap: 16px; }
    .appointment-details-page .information-area-wrap > .description-wrap,
    .appointment-details-page .information-area-wrap > .education-info,
    .appointment-details-page .information-area-wrap > .additional-info,
    .appointment-details-page .information-area-wrap > .specialised-info { padding: 18px 16px; }
}

/* Unified footer widgets: equal desktop columns with the same frosted-glass
   treatment used by the home hero copy panel. */
.footer-area .footer-top > .container > .row {
    align-items: stretch;
    row-gap: 20px;
}

.footer-area .footer-top > .container > .row > [class*="col-"] > .footer-widget {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 22px 20px;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 18px;
    background: rgba(255, 255, 255, .32);
    background-color: rgba(255, 255, 255, .32) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86),
        inset 0 -1px 0 rgba(255, 255, 255, .34),
        0 22px 52px rgba(20, 47, 76, .18);
    -webkit-backdrop-filter: blur(6px) saturate(0%);
    backdrop-filter: blur(6px) saturate(0%);
    color: inherit;
    font-family: var(--body-font);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.footer-area .footer-top > .container > .row > [class*="col-"] > .footer-widget:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, .94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92),
        inset 0 -1px 0 rgba(255, 255, 255, .38),
        0 24px 56px rgba(20, 47, 76, .22);
}

.footer-area.home-variant-14 .footer-top > .container > .row > [class*="col-"] > .footer-widget,
.footer-area.home-variant-15 .footer-top > .container > .row > [class*="col-"] > .footer-widget,
.footer-area.home-variant-17 .footer-top > .container > .row > [class*="col-"] > .footer-widget {
    border-color: rgba(255, 255, 255, .78);
    background: rgba(255, 255, 255, .32);
    background-color: rgba(255, 255, 255, .32) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86),
        inset 0 -1px 0 rgba(255, 255, 255, .34),
        0 22px 52px rgba(20, 47, 76, .18);
}

.footer-area .footer-widget,
.footer-area .footer-widget p,
.footer-area .footer-widget a,
.footer-area .footer-widget li,
.footer-area .footer-widget span,
.footer-area .footer-widget input,
.footer-area .footer-widget button {
    font-family: var(--body-font);
}

.footer-area .footer-widget .widget-title,
.footer-area .footer-widget > .image-widget-title,
.footer-area .footer-widget .newsletter-widget > .widget-title {
    display: block;
    min-height: 0;
    margin: 0 0 13px;
    font-family: var(--body-font);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
}

.footer-area .footer-widget p,
.footer-area .footer-widget .widget-description,
.footer-area .footer-widget .paragraph,
.footer-area .footer-widget .custom-html-widget {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.65;
}

.footer-area .footer-widget .recent_post_item {
    flex: 1 1 auto;
    min-width: 0;
}

.footer-area .footer-widget .recent_post_item .title {
    margin-bottom: 4px;
    font-family: var(--body-font);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
}

.footer-area .footer-widget .recent_post_item .time {
    font-family: var(--body-font);
    font-size: 12px;
    line-height: 1.4;
}

.footer-area .footer-widget .newsletter-form-wrap {
    margin-top: auto;
}

.footer-area .footer-widget .newsletter-form-wrap .form-control {
    font-family: var(--body-font);
    font-size: 13px;
}

.footer-area .footer-widget.image-widget {
    align-self: stretch;
    height: 100%;
    margin-bottom: 0;
    line-height: 1.65;
}

.footer-area .footer-widget.image-widget .image-widget-title {
    margin-bottom: 13px;
    font-size: 17px;
    line-height: 1.35;
}

.footer-area .footer-widget.image-widget .image-widget-description {
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.65;
}

@media only screen and (min-width: 992px) {
    .footer-area .footer-top > .container > .row {
        flex-wrap: nowrap;
    }

    .footer-area .footer-top > .container > .row > [class*="col-"] {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        min-width: 0;
    }
}

@media only screen and (max-width: 991px) {
    .footer-area .footer-top > .container > .row > [class*="col-"] > .footer-widget {
        height: auto;
    }
}

@media only screen and (max-width: 767px) {
    .footer-area .footer-top > .container > .row {
        row-gap: 0;
    }

    .footer-area .footer-top > .container > .row > [class*="col-"] > .footer-widget {
        width: 100%;
        padding: 20px 18px;
        border-radius: 18px;
        line-height: 1.6;
    }

    .footer-area .footer-widget .widget-title,
    .footer-area .footer-widget > .image-widget-title,
    .footer-area .footer-widget .newsletter-widget > .widget-title,
    .footer-area .footer-widget.image-widget .image-widget-title {
        margin-bottom: 10px;
        font-size: 16px;
        line-height: 1.35;
    }

    .footer-area .footer-widget p,
    .footer-area .footer-widget .widget-description,
    .footer-area .footer-widget .paragraph,
    .footer-area .footer-widget .custom-html-widget,
    .footer-area .footer-widget.image-widget .image-widget-description {
        font-size: 13px;
        line-height: 1.6;
    }

    .footer-area .footer-widget:hover {
        transform: none;
    }
}

/* Keep the wave in a background layer so the glass widgets can sit above it. */
.footer-area.footer-area .footer-top {
    position: relative;
    overflow: visible;
    padding-top: 195px !important;
    border-radius: 0;
    background: transparent !important;
}

.footer-area .footer-top::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    bottom: 0;
    height: auto;
    border: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 320 C220 380 390 240 610 290 S1010 380 1200 305' fill='none' stroke='white' stroke-opacity='.32' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    content: "";
}

.footer-area .footer-top::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    background-color: var(--footer-background-color, rgba(35, 51, 104, .26));
    background-image: none;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1000' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 320 C220 380 390 240 610 290 S1010 380 1200 305 L1200 1000 L0 1000 Z'/%3E%3C/svg%3E");
    -webkit-mask-position: 0 0;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1000' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 320 C220 380 390 240 610 290 S1010 380 1200 305 L1200 1000 L0 1000 Z'/%3E%3C/svg%3E");
    mask-position: 0 0;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    pointer-events: none;
    content: "";
}

.footer-area .footer-top > .container {
    position: relative;
    z-index: 2;
}

.footer-area .footer-top > .container > .row > [class*="col-"] > .footer-widget {
    position: relative;
    z-index: 3;
}

.footer-area .copyright-area {
    position: relative;
    z-index: 2;
    display: block !important;
    min-height: 65px;
    padding: 20px 0;
    background-color: rgba(7, 22, 45, .9) !important;
    color: rgba(255, 255, 255, .82) !important;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.footer-area .copyright-area .copyright-area-inner {
    display: block;
    color: inherit !important;
    font-family: var(--body-font);
    font-size: 13px;
    line-height: 1.6;
    opacity: 1;
    text-align: center;
    visibility: visible;
}

.footer-area .copyright-area .copyright-area-inner a {
    color: rgba(255, 255, 255, .96) !important;
    font-weight: 700;
}

/* Keep normal page scrolling enabled; only the bottom footer boundary gets
   overscroll containment. */
html,
body {
    overscroll-behavior-y: auto;
}

html {
    background-color: rgba(7, 22, 45, .9);
}

/* Keep the navy canvas permanently available for Safari's area below the
   document. The white underlay preserves every transparent page section, so
   the only visible navy outside the normal layout is below the footer. */
body {
    position: relative;
    z-index: 0;
    background-color: rgba(7, 22, 45, .9);
}

body::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-color: #ffffff;
    content: "";
    pointer-events: none;
}

html.header-at-top,
html.footer-at-bottom {
    overscroll-behavior-y: none;
}

@media only screen and (max-width: 767px) {
    .footer-area.footer-area .footer-top {
        padding-top: 145px !important;
    }

    .footer-area .footer-top::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 350 C260 390 450 300 650 335 S980 395 1200 345' fill='none' stroke='white' stroke-opacity='.32' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
        background-size: 100% 100%;
    }

    .footer-area .footer-top::after {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1000' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 350 C260 390 450 300 650 335 S980 395 1200 345 L1200 1000 L0 1000 Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1000' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 350 C260 390 450 300 650 335 S980 395 1200 345 L1200 1000 L0 1000 Z'/%3E%3C/svg%3E");
    }

    .footer-area .copyright-area {
        padding: 17px 0;
    }
}

/* Keep the final image widget aligned with the other desktop footer cards. */
@media only screen and (min-width: 992px) {
    .footer-area .footer-top > .container > .row > [class*="col-"] {
        display: flex;
        align-items: stretch;
    }

    .footer-area .footer-top > .container > .row > [class*="col-"] > .footer-widget,
    .footer-area .footer-top > .container > .row > [class*="col-"] > .footer-widget.image-widget {
        flex: 1 1 auto;
        height: auto;
        min-height: 100%;
    }
}

/* Give the home-page speciality cards a consistent, polished desktop frame. */
@media only screen and (min-width: 992px) {
    .our-specialities-area > .container > .row:last-child > [class*="col-"] {
        display: flex;
        align-items: stretch;
        margin-bottom: 30px;
    }

    .our-specialities-area > .container > .row:last-child > [class*="col-"] > .single-specialities-item {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 365px;
        height: 100%;
        margin-bottom: 0;
        padding: 30px 26px 26px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 18px;
        box-shadow: 0 18px 38px rgba(20, 47, 76, .16),
            inset 0 1px 0 rgba(255, 255, 255, .16);
        transition: transform .25s ease, box-shadow .25s ease;
    }

    .our-specialities-area > .container > .row:last-child > [class*="col-"] > .single-specialities-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 24px 46px rgba(20, 47, 76, .22),
            inset 0 1px 0 rgba(255, 255, 255, .2);
    }

    .our-specialities-area .single-specialities-item .icon {
        width: 112px;
        height: 112px;
        margin: 0 auto;
        font-size: 46px;
        line-height: 112px;
        box-shadow: 0 10px 22px rgba(20, 47, 76, .14),
            inset 0 1px 0 rgba(255, 255, 255, .24);
    }

    .our-specialities-area .single-specialities-item .content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        padding: 22px 0 0;
    }

    .our-specialities-area .single-specialities-item .content .title {
        min-height: 56px;
        margin-bottom: 12px;
        font-size: 19px;
        line-height: 1.4;
        letter-spacing: 0;
    }

    .our-specialities-area .single-specialities-item .content .description {
        font-size: 14px;
        line-height: 1.65;
    }
}

/* Use a brighter, distinct palette so each speciality has its own identity. */
.our-specialities-area .single-specialities-item.bg-color-1 {
    background-color: #5b4bda;
}

.our-specialities-area .single-specialities-item.bg-color-1 .icon {
    background-color: #8275f2;
}

.our-specialities-area .single-specialities-item.bg-color-2 {
    background-color: #e85d75;
}

.our-specialities-area .single-specialities-item.bg-color-2 .icon {
    background-color: #f58a9a;
}

.our-specialities-area .single-specialities-item.bg-color-3 {
    background-color: #008f9a;
}

.our-specialities-area .single-specialities-item.bg-color-3 .icon {
    background-color: #23b8c7;
}

.our-specialities-area .single-specialities-item.bg-color-4 {
    background-color: #e58b16;
}

.our-specialities-area .single-specialities-item.bg-color-4 .icon {
    background-color: #f3b24e;
}

.our-specialities-area .single-specialities-item {
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: 0 14px 30px rgba(20, 47, 76, .12),
        inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* Keep the home-page navbar transparent in its normal and fixed states. The
   variant stylesheet and responsive menu rules otherwise add a dark strip
   after a viewport or language change. */
.header-style-03.header-variant-17 .navbar-area,
.header-style-03.header-variant-17 .navbar-area::before,
.header-style-03.header-variant-17 .navbar-area::after,
.header-style-03.header-variant-17 .navbar-area.nav-fixed,
.header-style-03.header-variant-17 .navbar-area.nav-fixed::before,
.header-style-03.header-variant-17 .navbar-area.nav-fixed::after,
.header-style-03.header-variant-17 .navbar-area .nav-container,
.header-style-03.header-variant-17 .navbar-area .nav-container::before,
.header-style-03.header-variant-17 .navbar-area .nav-container::after,
.header-style-03.header-variant-17 .navbar-area.nav-fixed .nav-container,
.header-style-03.header-variant-17 .navbar-area.nav-fixed .nav-container::before,
.header-style-03.header-variant-17 .navbar-area.nav-fixed .nav-container::after {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Keep breadcrumb headers compact and consistent across viewport sizes. */
.breadcrumb-area {
    height: 300px;
    min-height: 300px;
}

.breadcrumb-area .breadcrumb-inner {
    padding: 155px 0 142px 0;
}

.breadcrumb-area .page-title {
    font-size: 19px;
    line-height: 18px;
    text-transform: none !important;
}

/* The template reuses bg-color-1..4 after the fourth item. Override the
   current eight-card layout by position so every speciality has its own
   color while the existing classes remain a fallback for future items. */
.our-specialities-area > .container > .row:last-child > [class*="col-"]:nth-child(1) > .single-specialities-item {
    background-color: #5b4bda;
}

.our-specialities-area > .container > .row:last-child > [class*="col-"]:nth-child(1) > .single-specialities-item .icon {
    background-color: #8275f2;
}

.our-specialities-area > .container > .row:last-child > [class*="col-"]:nth-child(2) > .single-specialities-item {
    background-color: #e85d75;
}

.our-specialities-area > .container > .row:last-child > [class*="col-"]:nth-child(2) > .single-specialities-item .icon {
    background-color: #f58a9a;
}

.our-specialities-area > .container > .row:last-child > [class*="col-"]:nth-child(3) > .single-specialities-item {
    background-color: #008f9a;
}

.our-specialities-area > .container > .row:last-child > [class*="col-"]:nth-child(3) > .single-specialities-item .icon {
    background-color: #23b8c7;
}

.our-specialities-area > .container > .row:last-child > [class*="col-"]:nth-child(4) > .single-specialities-item {
    background-color: #e58b16;
}

.our-specialities-area > .container > .row:last-child > [class*="col-"]:nth-child(4) > .single-specialities-item .icon {
    background-color: #f3b24e;
}

.our-specialities-area > .container > .row:last-child > [class*="col-"]:nth-child(5) > .single-specialities-item {
    background-color: #2563b8;
}

.our-specialities-area > .container > .row:last-child > [class*="col-"]:nth-child(5) > .single-specialities-item .icon {
    background-color: #4c86d9;
}

.our-specialities-area > .container > .row:last-child > [class*="col-"]:nth-child(6) > .single-specialities-item {
    background-color: #a34a78;
}

.our-specialities-area > .container > .row:last-child > [class*="col-"]:nth-child(6) > .single-specialities-item .icon {
    background-color: #d477a6;
}

.our-specialities-area > .container > .row:last-child > [class*="col-"]:nth-child(7) > .single-specialities-item {
    background-color: #248a52;
}

.our-specialities-area > .container > .row:last-child > [class*="col-"]:nth-child(7) > .single-specialities-item .icon {
    background-color: #56bd7c;
}

.our-specialities-area > .container > .row:last-child > [class*="col-"]:nth-child(8) > .single-specialities-item {
    background-color: #425466;
}

.our-specialities-area > .container > .row:last-child > [class*="col-"]:nth-child(8) > .single-specialities-item .icon {
    background-color: #71869a;
}

/* Compact vertical process timeline for phones and narrow tablets. */
@media only screen and (max-width: 991px) {
    .process-steps-area .section-title .subtitle {
        font-size: 13px;
        line-height: 1.4;
    }

    .process-steps-area .section-title .title {
        font-size: 30px;
        line-height: 1.25;
    }

    .process-steps-area .cagency-work-process-list {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 4px 0 4px 48px;
        margin-left: 10px;
        width: calc(100% - 10px);
        text-align: left;
    }

    .process-steps-area .cagency-work-process-list::before {
        position: absolute;
        top: 24px;
        bottom: 24px;
        left: 16px;
        width: 2px;
        height: auto;
        border: 0;
        border-radius: 2px;
        background-color: rgba(85, 128, 255, .42);
        content: "";
        pointer-events: none;
        z-index: 0;
    }

    .process-steps-area .cagency-work-process-list .single-work-process-item {
        position: relative;
        display: flex;
        align-items: flex-start;
        width: 100%;
        min-height: 48px;
        margin: 0 0 10px;
        padding: 0 0 10px;
        text-align: left;
    }

    .process-steps-area .cagency-work-process-list .single-work-process-item:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .process-steps-area .cagency-work-process-list .single-work-process-item .num-wrap {
        position: absolute;
        top: 0;
        left: -48px;
        z-index: 1;
        width: 34px;
        height: 34px;
        margin: 0;
        font-size: 18px;
        line-height: 34px;
        text-align: center;
    }

    .process-steps-area .cagency-work-process-list .single-work-process-item .num-wrap::after {
        top: -4px;
        width: 42px;
        height: 42px;
    }

    .process-steps-area .cagency-work-process-list .single-work-process-item .num-wrap::before {
        display: none;
    }

.process-steps-area .cagency-work-process-list .single-work-process-item .title {
        margin: 0;
        padding: 2px 0 0;
        font-size: 15px;
        line-height: 1.45;
        font-weight: 700;
        text-align: left;
    }
}

/* About Us: give the uploaded level illustration a stronger, clean visual
   presence without allowing it to create horizontal overflow. */
.global-network-area .map-img {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    padding-top: 20px;
    overflow: visible;
}

.global-network-area .map-img img {
    display: block;
    width: 96% !important;
    max-width: 100% !important;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 18px 24px rgba(20, 47, 76, .16));
    transform: scale(1);
}

/* The 512px rounded logo should support the About Us copy instead of
   dominating the section. This selector is limited to the image-group
   version used by the About Us page, not the home-page experience block. */
.top-experience-area .experience-author.padding-bottom-100 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding-bottom: 24px;
}

.top-experience-area .experience-author.padding-bottom-100 .thumb-1,
.top-experience-area .experience-author.padding-bottom-100 .thumb-2 {
    position: static;
    width: min(58%, 280px);
    margin: 0 auto;
}

.top-experience-area .experience-author.padding-bottom-100 .thumb-1 img,
.top-experience-area .experience-author.padding-bottom-100 .thumb-2 img {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

/* The second image slot is optional. Do not reserve space when the admin has
   left it empty, and collapse editor-only blank paragraphs in the copy. */
.top-experience-area .experience-author.padding-bottom-100 .thumb-2:not(:has(img)) {
    display: none;
}

.top-experience-area:not(.bg-blue) .experience-content-03 .content > p:empty,
.top-experience-area:not(.bg-blue) .experience-content-03 .content > p:has(> br:only-child) {
    display: none;
}

@media only screen and (max-width: 991px) {
    .top-experience-area:not(.bg-blue) .experience-content-03 {
        display: block;
        height: auto !important;
        align-items: flex-start;
        align-self: flex-start !important;
    }

    .top-experience-area:not(.bg-blue) .experience-content-03 .content {
        width: 100%;
        height: auto !important;
        align-self: flex-start !important;
    }

    .global-network-area .map-img {
        min-height: 280px;
        padding-top: 0;
    }

    .global-network-area .map-img img {
        width: 96% !important;
        max-width: 100% !important;
        transform: none;
    }

    .top-experience-area .experience-author.padding-bottom-100 .thumb-1,
    .top-experience-area .experience-author.padding-bottom-100 .thumb-2 {
        width: min(52%, 220px);
    }

    .top-experience-area .experience-author.padding-bottom-100 .thumb-1 img,
    .top-experience-area .experience-author.padding-bottom-100 .thumb-2 img {
        max-width: 220px;
    }
}

@media only screen and (max-width: 575px) {
    .global-network-area .map-img {
        min-height: 220px;
    }

    .global-network-area .map-img img {
        transform: none;
    }

    .top-experience-area .experience-author.padding-bottom-100 .thumb-1,
    .top-experience-area .experience-author.padding-bottom-100 .thumb-2 {
        width: min(52%, 180px);
    }

    .top-experience-area .experience-author.padding-bottom-100 .thumb-1 img,
    .top-experience-area .experience-author.padding-bottom-100 .thumb-2 img {
        max-width: 180px;
    }
}

@media only screen and (min-width: 992px) {
    /* Remove the template's one-column offset so the About Us copy sits
       closer to the reduced image and keep the quote in normal document flow
       instead of stretching the content to the full row height. */
    .top-experience-area:not(.bg-blue) > .container > .row > .col-lg-5.offset-lg-1 {
        margin-left: 0;
    }

    .top-experience-area:not(.bg-blue) .experience-content-03 {
        display: block;
        height: auto !important;
        align-items: flex-start;
        align-self: flex-start !important;
    }

    .top-experience-area:not(.bg-blue) .experience-content-03 .content {
        width: 100%;
        height: auto !important;
        align-self: flex-start !important;
    }

    .top-experience-area:not(.bg-blue) > .container > .row {
        align-items: flex-start;
    }

    .top-experience-area:not(.bg-blue) > .container > .row > .col-lg-6,
    .top-experience-area:not(.bg-blue) > .container > .row > .col-lg-5 {
        align-self: flex-start;
    }

    .top-experience-area:not(.bg-blue) .experience-author.padding-bottom-100 {
        justify-content: center;
        padding-right: 0;
    }

.top-experience-area:not(.bg-blue) .experience-author.padding-bottom-100 .thumb-1 {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Public exercise navigation */
.exercise-back-navigation {
    display: flex;
    justify-content: flex-start;
    margin: -8px 0 26px;
}

.exercise-back-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 9px 15px;
    border: 1px solid rgba(39, 100, 215, .24);
    border-radius: 999px;
    background: linear-gradient(135deg, #f4f8ff, #fff);
    color: #2458b8 !important;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none !important;
    box-shadow: 0 7px 18px rgba(31, 73, 135, .08);
    transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.exercise-back-link i { font-size: 12px; }

.exercise-back-link:hover,
.exercise-back-link:focus-visible {
    border-color: #2764d7;
    background: #eef5ff;
    color: #173d84 !important;
    box-shadow: 0 9px 22px rgba(31, 73, 135, .14);
    transform: translateX(-2px);
}

.placement-writing-ai-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    color: #a5f3fc;
    font-size: .82rem;
    font-weight: 700;
}

.placement-writing-ai-note i { color: #f9a8d4; }

@media (max-width: 767px) {
    .exercise-back-navigation { margin: -2px 0 22px; }
    .exercise-back-link { min-height: 40px; padding: 8px 13px; font-size: 12px; }
    .placement-writing-ai-note { align-items: flex-start; line-height: 1.45; }
}

/* Keep the public site in its authored light color scheme. This also keeps
   native controls from selecting a dark palette when the browser honors the
   page color-scheme declaration. A user-forced browser transformation remains
   controlled by the browser itself. */
:root {
    color-scheme: only light;
}

/* Keep collapsed submenus readable on every frontend page and navbar variant. */
@media only screen and (max-width: 1200px) {
    .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children > .sub-menu,
    .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-mega-menu > .xg_mega_menu_wrapper {
        background-color: #fff !important;
    }

    .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children > .sub-menu li > a,
    .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-mega-menu > .xg_mega_menu_wrapper a {
        color: #263247 !important;
        background-color: transparent !important;
        text-shadow: none !important;
    }

    .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children > .sub-menu li > a:hover,
    .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children > .sub-menu li > a:focus,
    .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children > .sub-menu li > a:focus-visible,
    .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children > .sub-menu li > a:active,
    .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-mega-menu > .xg_mega_menu_wrapper a:hover,
    .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-mega-menu > .xg_mega_menu_wrapper a:focus,
    .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-mega-menu > .xg_mega_menu_wrapper a:focus-visible,
    .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-mega-menu > .xg_mega_menu_wrapper a:active {
        color: #b51f3d !important;
        background-color: #f0f3f8 !important;
    }
}