:root {
    /* Other Settings */
    --nav-top: 60px; /* Top Nav Height */
    --color-1: #213555; /* Darkest */
    --color-2: #213555; /* Lighter */
    --color-3: #4F709C; /* Lighter */
    --color-4: #D8C4B6; /* Lighter */
    --color-5: #F5EFE7; /* Lightest */
    --font-body: Arial, "Helvetica Neue", Helvetica, sans-serif;
    --font-display: Arial, "Helvetica Neue", Helvetica, sans-serif;
    --font-serif: Georgia, "Times New Roman", Times, serif;
    --font-mono: Consolas, Menlo, Monaco, "Courier New", monospace;
}

/* Begin HTML */
html {
    font-size: 16px;
    position: relative;
    min-height: 100%;
    overflow: hidden;
}

body {
    margin-bottom: 0 0 60px 0;
    height: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: 0;
    color: #1f2328;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
}

code, kbd, samp, pre {
    font-family: var(--font-mono);
}
/* End HTML */

/* Wireframe 3D cube */
.cube-container {
    perspective: 1000px;
    width: 300px;
    height: 300px;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    /*    animation: rotateCube 30s infinite linear;*/
    transform: rotateX(-30deg) rotateY(50deg);
    transition: transform 0.5s ease-out;
}
@media (max-width: 1000px) {
    .cube {
        visibility: hidden;
    }
}

@keyframes rotateCube {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }

    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.cube-face {
    position: absolute;
    width: 300px;
    height: 300px;
    border: 1px solid #fff;
    background: rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    font-size: 2rem;
    color: #fff;
}

.face-front {
    transform: rotateY(0deg) translateZ(150px);
}

.face-back {
    transform: rotateY(180deg) translateZ(150px);
}

.face-right {
    transform: rotateY(90deg) translateZ(150px);
}

.face-left {
    transform: rotateY(-90deg) translateZ(150px);
}

.face-top {
    transform: rotateX(90deg) translateZ(150px);
}

.face-bottom {
    transform: rotateX(-90deg) translateZ(150px);
}

.section-title {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title h1 {
    color: #fff;
    font-weight: 700;
    letter-spacing: -0.01em;
    background: #FFF;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-title h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #FFF;
    font-weight: 700;
}

.section-title p {
    font-size: 1.2rem;
    color: #6c757d;
}

.section-title-special {
    text-align: center;
    margin-bottom: 3rem;
    color: #fff;
/*    letter-spacing: -0.02em;*/
    line-height: 1.2;
    background: #FFF;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Industries Section */
.industries {
    padding: 5rem 5%;
    background: radial-gradient(circle at top, #3b82f6 0%, #1e3a8a 80%);
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}
.industry-card {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers content */
    align-items: center; /* Horizontally centers content */
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    min-height: 300px; /* Consistent card height */
    height: 100%; /* Ensures equal height within a row */
    transition: all 0.3s ease;
    cursor: pointer;
}

    .industry-card:hover {
        border-color: #0696d7;
        box-shadow: 0 8px 20px rgba(6, 150, 215, 0.15);
    }

.industry-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.industry-card h3 {
    font-size: 1.2rem;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}

.industry-card p {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0;
}

/* Optional: for consistent layout when used in a grid */
.industry-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    align-items: stretch; /* ensures cards stretch equally */
}

/*.industry-card {
    background: #fff;
    min-height: 300px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
}

    .industry-card:hover {
        border-color: #0696d7;
        box-shadow: 0 8px 20px rgba(6, 150, 215, 0.15);
    }

.industry-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.industry-card h3 {
    font-size: 1.2rem;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}

.industry-card p {
    font-size: 0.9rem;
    color: #6c757d;
}*/

@media (max-width: 1024px) {
    .product-categories {
        grid-template-columns: 1fr;
    }

    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .product-list {
        grid-template-columns: 1fr;
    }
}

.features {
    padding: 80px 0;
    background: linear-gradient(to top, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%);
}

    .features h2 {
        text-align: center;
        margin-bottom: 50px;
        font-size: 2.5rem;
    }

/* Hero Section - Improved with parallax background and animated tagline */
.hero {
    position: relative;
    min-height: 800px;
    background: url('/images/hero.jpg') no-repeat center center/cover;
    background-attachment: fixed; /* Parallax effect */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

    .hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 64, 133, 0.7);
        z-index: 1;
    }

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

/* Begin Bootstrap */
.btn-secondary {
    color: #fff;
    border-color: #2f2f2f;
    background-color: #2f2f2f;
}

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:active {
        color: #fff;
        background-color: #1f1f1f !important;
        border-color: #1f1f1f !important;
    }

.btn-outline-secondary {
    color: #2f2f2f;
    border-color: #2f2f2f;
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus,
    .btn-outline-secondary:active {
        color: #fff;
        background-color: #2f2f2f !important;
        border-color: #2f2f2f !important;
    }

.btn-primary {
    color: #fff;
    background-color: #000;
    border-color: #000;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background-color: #2f2f2f !important;
        border-color: #2f2f2f !important;
    }

.btn-outline-primary {
    color: #000;
    border-color: #000;
}

    .btn-outline-primary:hover {
        color: #fff;
        background-color: #2f2f2f;
        border-color: #2f2f2f;
    }

    .btn-outline-primary:focus,
    .btn-outline-primary:active,
    .btn-outline-primary.active,
    .btn-check:checked + .btn-outline-primary,
    :not(.btn-check) + .btn-outline-primary:active {
        color: #fff;
        background-color: #2f2f2f !important;
        border-color: #2f2f2f !important;
    }

.form-control:focus {
    border-color: #777;
    box-shadow: none !important;
    outline: none !important;
}

.form-control {
    border-radius: 0px;
}

/* To remove the blazor form border colors: */
/* outline: none !important; */
.form-ctrl {
    border: 1px solid #b6bcc6 !important;
    color: #333;
    outline: none !important;
}

    .form-ctrl::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        opacity: .5 !important; /* Firefox */
        border-radius: 0px !important;
    }

.form-lbl {
    font-size: 14px;
    color: #333;
}

/* Fade out for text notifications */
@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fade-out {
    animation: fade-out ease 5s;
    animation-fill-mode: forwards;
}

.navbar-brand {
    cursor: pointer;
}

/* Remove border from hamburger menu */
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.navbar {
    max-height: var(--nav-top);
    min-height: var(--nav-top);
}

/* Remove the default outline */
.btn {
    outline: none !important;
    box-shadow: none !important;
}

/* End Bootstrap */
.app-link {
    color: var(--color-3);
    -webkit-text-decoration: none;
    text-decoration: none;
}

.item-link {
    color: var(--color-2);
    -webkit-text-decoration: none;
}

.article-title-font {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 1.4rem + 1.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-top: 0;
    color: #111827;
}

.article-details-font {
    font-family: var(--font-body);
    line-height: 1.5;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: #6b7280;
}

/* Article page: undo the global ".container { min-width: 100vw }", since 100vw includes the scrollbar and pushes the right padding off-screen */
@media screen and (max-width: 767.98px) {
    .container.article-container {
        min-width: 0 !important;
    }

    /* Article page: the social icons fold under the author and date, aligned left */
    .article-meta-details,
    .article-meta-social {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .article-meta-social .social-network {
        float: none !important;
        display: flow-root;
        margin-top: 0.5rem;
    }
}

.article-body-title {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    color: #111827;
}

.article-body-font {
    font-family: var(--font-body);
    line-height: 1.7;
    font-size: 1.0625rem;
    font-weight: 400;
    letter-spacing: 0;
    color: #1f2328;
    margin-right: 30px;
    position: relative !important;
    animation: fadeIn 2s !important;
}

    .article-body-font p,
    .article-body-font ul,
    .article-body-font ol {
        margin-bottom: 1.15em;
    }

    .article-body-font li {
        margin-bottom: 0.4em;
    }

    .article-body-font h1,
    .article-body-font h2,
    .article-body-font h3,
    .article-body-font h4,
    .article-body-font h5,
    .article-body-font h6 {
        font-family: var(--font-display);
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.3;
        color: #111827;
        margin-top: 1.6em;
        margin-bottom: 0.6em;
    }

    /* No extra space above the first element of the content */
    .article-body-font > :first-child {
        margin-top: 0;
    }

    .article-body-font h1 { font-size: 1.75rem; }
    .article-body-font h2 { font-size: 1.5rem; }
    .article-body-font h3 { font-size: 1.25rem; }
    .article-body-font h4 { font-size: 1.125rem; }
    .article-body-font h5,
    .article-body-font h6 { font-size: 1rem; }

    .article-body-font a {
        color: #1d4ed8;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

        .article-body-font a:hover {
            color: #1e3a8a;
        }

    .article-body-font strong,
    .article-body-font b {
        font-weight: 700;
        color: #111827;
    }

    .article-body-font blockquote {
        margin: 1.75em 0;
        padding: 0.25em 0 0.25em 1.25em;
        border-left: 3px solid var(--color-3);
        font-style: italic;
        color: #4b5563;
    }

    .article-body-font :not(pre) > code {
        font-family: var(--font-mono);
        font-size: 0.85em;
        padding: 0.15em 0.4em;
        border-radius: 4px;
        background-color: #f3f4f6;
        color: #be123c;
    }

    .article-body-font pre,
    .article-body-font pre code {
        font-family: var(--font-mono);
        font-size: 0.875rem;
        line-height: 1.6;
    }

    .article-body-font table {
        font-family: var(--font-body);
        font-size: 0.9375rem;
    }

    .article-body-font figcaption {
        font-family: var(--font-body);
        font-size: 0.875rem;
        color: #6b7280;
        text-align: center;
    }

.search-title-font {
    font-family: var(--font-display);
    font-size: 1.3125rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: #1f3a5f;
    transition: color 0.15s ease;
}

.search-body-font {
    margin: 8px 0 10px 0;
    font-family: var(--font-body);
    font-size: 0.9875rem;
    line-height: 1.65;
    color: #4b5563;
}

.search-meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #6b7280;
}

    .search-meta i {
        font-size: 0.875rem;
    }

    .search-meta .search-meta-sep {
        color: #d1d5db;
        margin: 0 4px;
    }

.listing-heading {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #111827;
}

    .listing-heading .listing-criteria {
        color: var(--color-3);
    }

/* Search Results */
.search-result {
    display: block;
    font-family: var(--font-body);
    text-decoration: none;
    color: var(--color-3);
    width: 100%;
    padding-bottom: 24px;
    border-bottom: 1px solid #e5e7eb;
}

    .search-result:hover .search-title-font {
        color: #1d4ed8;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;
    }

/* News-style article listing (recent, topics, search, series) */
.news-item {
    border-bottom: 1px solid #e5e7eb;
}

.news-item-link {
    display: flex;
    gap: 24px;
    align-items: stretch;
    padding: 22px 0;
    text-decoration: none;
    color: inherit;
}

.news-item-thumb {
    position: relative;
    flex: 0 0 260px;
    /* Pinned width so a small or square image can never narrow the box; the height follows the row and the image is cropped to fit. */
    width: 260px;
    min-width: 260px;
    max-width: 260px;
    /* Every thumbnail is at least 16:9 regardless of the image's own size or shape. */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
    background: #f3f4f6;
}

    /* Out of flow so the image's intrinsic size never affects the thumbnail's box; the image is cropped to fill it instead. */
    .news-item-thumb img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.35s ease;
    }

.news-item-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1f3a5f 0%, #111827 100%);
    color: rgba(255, 255, 255, 0.45);
    font-size: 2.25rem;
}

.news-item-body {
    flex: 1 1 auto;
    min-width: 0;
}

    /* Block-level so no line-box space sits below the author and date, keeping the thumbnail's bottom flush with it. */
    .news-item-body .search-meta {
        display: flex;
    }

.news-item-title {
    margin: 0;
}

.news-item-desc {
    display: grid;
}

    .news-item-desc > p {
        grid-area: 1 / 1;
        margin: 0;
        overflow-wrap: anywhere;
    }

    .news-item-desc .news-item-desc-placeholder {
        visibility: hidden;
    }

.news-item-link:hover .news-item-title {
    color: #1d4ed8;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.news-item-link:hover .news-item-thumb img {
    transform: scale(1.04);
}

@media (max-width: 767.98px) {
    .news-item-link {
        gap: 14px;
        padding: 16px 0;
    }

    .news-item-thumb {
        display: none;
    }

    .news-item-title {
        font-size: 1.0625rem;
    }

    .news-item-desc {
        font-size: 0.9rem;
        margin: 6px 0 6px 0;
    }
}

.navbar-buttons button {
    margin-left: 1rem; /* space between buttons */
    padding: 0.5rem 1rem; /* adjust as necessary */
    cursor: pointer;
}


/* Search */
.nav-search-form {
    max-width: 500px;
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-dropdown {
    float: right;
}

/* Just below 768, or a bug occurs */
@media screen and (max-width: 767.98px) {
    .nav-search-form {
        float: none;
        width: 200px;
        min-width: 100%;
    }

    .nav-dropdown {
        float: none;
        z-index: 1000;
    }

    .navbar-collapse {
        position: absolute;
        top: var(--nav-top);
        left: 0;
        background-color: #212529;
        margin-left: -12px;
        z-index: 1000;
        min-width: 100vw !important;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 10px;
        padding-top: 20px;
        border-bottom: 1px;
        border-color: #333;
        opacity: 1;
        transition: none !important;
    }

    .navbar-brand {
        margin: 0 0 5px 5px;
    }

    .container {
        min-width: 100vw !important;
    }
}

@media screen and (max-width: 992px) {
    .nav-item {
        margin-top: 10px;
    }
}

.nav-search-form input[type=text]:focus {
    background-color: #fff;
    outline: none;
    outline: 0;
}

.nav-search-form input[type=text]::placeholder {
    color: #333;
}

.nav-search-form::after {
    content: "";
    clear: both;
    display: table;
}

.nav-search-input {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    padding-left: 20px !important;
    padding-bottom: -10px;
    color: #e5e7eb;
    border-width: 1px 0px 1px 1px !important;
    border-style: solid;
    border-radius: 10rem 0 0 10rem !important;
    min-height: 38px;
    max-height: 38px;
    border-color: #555 !important;
    background-color: #232323;
    box-shadow: none !important;
}

    .nav-search-input::placeholder {
        color: #8b8f96;
        font-weight: 400;
        letter-spacing: 0.02em;
        opacity: 1;
    }

    .nav-search-input:focus {
        color: #fff;
        background-color: #2b2b2b;
        box-shadow: none !important;
        border-color: #555 !important;
        border-width: 1px 0px 1px 1px;
        border-style: solid;
        border-radius: 10rem 0 0 10rem;
    }

.nav-search-btn {
    font-size: .8rem;
    float: left;
    color: #CCC;
    border-color: #555 !important;
    cursor: pointer;
    border-width: 1px 1px 1px 0px;
    border-style: solid;
    border-radius: 0 10rem 10rem 0;
    background-color: #232323;
    min-height: 38px;
    max-height: 38px;
    max-width: 40px;
}

.nav-search-icon {
    font-size: 20px !important;
    margin: 10px !important;
}

.nav-search-btn.btn-outline-success:hover,
.nav-search-btn.btn-outline-success:focus,
.nav-search-btn.btn-outline-success:active {
    border-color: #CCC !important;
    box-shadow: none !important;
    background-color: #CCC;
    color: #000;
}

.dropdown-item {
    color: #CCC !important;
}

.profile-icon {
    font-size: 38px !important;
    color: #CCC !important;
    margin-top: -10px;
}
/* End Search */


/* Infinite scroll */
.infinite-scroll-more {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 4rem;
    margin: 1.5rem 0;
}

ul.article-contents-item {
    line-height: 1.5;
    font-family: var(--font-body);
    font-size: 1rem;
    letter-spacing: 0.005em;
}

    ul.article-contents-item li {
        list-style: none;
        position: relative;
    }

        ul.article-contents-item li::before {
            content: "";
            position: absolute;
            left: -20px;
            top: 10px;
            height: 5px;
            width: 5px;
            border: 1px solid #333;
            border-width: 2px 2px 0 0;
            transform: rotate(45deg);
        }

    ul.article-contents-item a {
        color: #005599;
        text-decoration: none;
    }

.series-header {
    background-color: #fff !important;
    border-bottom: none !important;
    color: var(--color-3) !important;
}

    .series-header a {
        font-family: var(--font-display);
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--color-3);
        text-decoration: none;
    }

.series-link {
    color: var(--color-3) !important;
}

.series-scroll-panel {
    max-height: 300px;
    overflow-y: auto;
    overflow: auto;
}

/* Scroll */
/* Blue scrollbar on a translucent, contrasting track for all scrollable elements (Firefox) */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: auto;
        scrollbar-color: #3b82f6 rgba(75, 85, 99, 0.15);
    }

    /* Main application scrollbar: same colors as the News menu's (track tint over the menu's #16191d background) */
    .container-main {
        scrollbar-color: #3b82f6 #1e2228;
    }
}

/* width */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

/* Track */
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: rgba(75, 85, 99, 0.15);
}

/* Main application scrollbar: same colors as the News menu's, whose translucent track sits on the menu's #16191d background */
.container-main::-webkit-scrollbar-track,
.container-main::-webkit-scrollbar-corner {
    background: linear-gradient(rgba(75, 85, 99, 0.15), rgba(75, 85, 99, 0.15)), #16191d;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background-color: #3b82f6;
    border: 2px solid transparent;
    border-radius: 6px;
    background-clip: padding-box;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background-color: #2563eb;
}

/* Hide arrow buttons */
::-webkit-scrollbar-button {
    display: none;
}

/* Header */
.header {
    display: flex;
    align-items: center;
    height: 500px;
    overflow: hidden;
    background: linear-gradient(to top, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-attachment: scroll;
    background-size: cover;
    font-family: var(--font-display);
}
.header {
    z-index: 1;
    position: relative;
}

.header .heading {
    font-family: var(--font-display);
    margin-top: 0px;
}

h1 .gradient-text {
    background: background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mdcreator-title {
    color: white;
    font-family: "Arial Black", Arial, Helvetica, sans-serif;
    font-size: 5rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
}

.mdcreator-subtitle {
    color: white;
    font-family: "Arial Black", Arial, Helvetica, sans-serif;
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
}

.image-3d {
    max-width: 600px;
    width: 100%;
}

.video-poster-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: 12px;
    border: 4px solid #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.video-poster-container:hover,
.video-poster-container:focus-visible {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
}

.video-poster-image {
    display: block;
    border-radius: 8px;
}

.video-poster-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
}

#mdcreatorPreviewModal .modal-content {
    background: rgba(0, 0, 0, 0.72) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

#mdcreatorPreviewModal.fade {
    transition: opacity 0.06s ease-in-out;
}

#mdcreatorPreviewModal.fade .modal-dialog {
    transform: none;
}

.time-recorder {
    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
    border: 2px solid rgba(255, 255, 255, 1);
    border-radius: 15px;
}

@media screen and (max-width: 1200px) {
    .header .heading {
        font-size: 60px;
    }
}

@media screen and (max-width: 1400px) {
    .header .heading {
        margin-top: 20px;
    }
}

.header .subheading {
    font-family: var(--font-display);
    font-size: 2rem;
}

.header-text {
    font-family: var(--font-display);
    line-height: 1.6;
    font-size: 30px;
    font-weight: 400;
    color: #555;
    border-width: 0px !important;
}

/* Cover - Base 64 Images */
.logo {
    background: url('/images/logo.png');
    background-repeat: no-repeat;
    background-position: bottom left;
    background-attachment: scroll;
    background-size: 300px;
}

.code {
    background: url('/images/code.jpg'); background-repeat: no-repeat;
    background-position: bottom center;
    background-attachment: scroll;
    background-size: cover;
}
.security {
    background: url("/images/security.jpg");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-attachment: scroll;
    background-size: cover;
}
.architecture {
    background: url("/images/architecture.jpg");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-attachment: scroll;
    background-size: cover;
}

/* About - Base 64 Images */
.profile {
    background: url('/images/profile.png') center/cover no-repeat;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: scroll;
    background-size: cover;
    border-radius: 50%;
    overflow: hidden;
}
.ad-1 {
    background: url("/images/md-creator-ad.jpg");
    background-position: bottom center;
    background-attachment: scroll;
    background-size: cover;
    min-height: 400px;
}

.ad-2 {
    background: url("/images/typing-tutor-ad.jpg");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-attachment: scroll;
    background-size: cover;
    min-height: 400px;
}

/* Signin Form */
.signin-control {
    font-size: 15px !important;
    border-radius: 20rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    height: 40px !important;
}

.signin-control:focus {
    border-color: var(--color-3) !important;
}

.signin-form {
    border-radius: 20px !important;
}

.bg-login-image {
    background: url('../images/signin.gif');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    border-radius: 20px 0px 0px 20px;
}

.bg-gradient-primary {
    background-color: var(--color-5);
    background-image: linear-gradient(180deg,var(--color-5) 10%,var(--color-1) 100%);
    background-size: cover;
    height: 100%;
}

.container-styled {
    background-color: var(--color-2);
    background-image: linear-gradient(180deg,var(--color-2) 10%,var(--color-4) 100%);
    background-size: cover;
}

.container-main {
    position: absolute;
    top: var(--nav-top);
    bottom: var(--nav-bottom);
    height: calc(100vh - var(--nav-top));
    width: 100vw;
    overflow-y: auto;
    overflow-x: hidden;
}

.footer {
    font-family: var(--font-body);
    color: #fff;
    height: var(--nav-bottom);
    margin: auto;
    background-color: #000;
}

.page-flex-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.page-flex-wrap > footer {
    margin-top: auto;
}

.hr-signin {
    margin: 20px 0px 10px 0px;
}

.card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 3rem;
}

.side-item {
    width: 410px;
}

/* Sidebar ads stay near the top while scrolling (desktop only) until the end of the content pushes them up */
@media (min-width: 992px) {
    .sidebar-sticky {
        position: sticky;
        top: 1rem;
    }
}

/* Listing pages (recent, topics, search, series), article and about: a fixed gap below the last sidebar ad. Padding rather than
   the ad's own margin, since padding stays inside the sticky box when it is pushed against the end of the column
   and keeps the ad off the bottom banner ad. */
.listing-sidebar {
    padding-bottom: 1.5rem;
}

.signin-header {
    font-family: var(--font-display);
    line-height: 1.6;
    font-size: 30px;
    font-weight: 400;
    color: #555;
    border-width: 0px !important;
}

.signin-btn {
    font-size: 15px !important;
    border-radius: 10rem !important;
    height: 40px;
    background-color: var(--color-3) !important;
    border-color: var(--color-3) !important;
}

    .signin-btn:hover {
        background-color: var(--color-1) !important;
    }

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

.custom-checkbox {
    margin: 20px;
}

.cover-item-heading {
    font-family: var(--font-display);
    font-weight: 300;
    line-height: 1;
}

.cover-item-icon {
    color: var(--color-3);
    margin-right: 10px;
}

    /* You might need to adjust the font-size depending on which icon you are using and the desired size */
    .cover-item-icon i {
        font-size: 35px;
    }

@media screen and (max-width: 576px) {
    .cover-item-icon i {
        font-size: 35px;
    }
}

/* CKEditor CodeSnippets */
pre > code {
    white-space: pre !important;
    overflow-x: auto;
    border-radius: 10px;
}

/* Make circles that indicate the steps of the form: */
.step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #fff;
    border: solid;
    border-color: var(--color-3);
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
}

    .step.active {
        opacity: 1;
    }

    /* Mark the steps that are finished and valid: */
    .step.finish {
        opacity: 1;
        background-color: var(--color-3);
    }

/* Fade ins */
.fade-in {
    animation: fadein .2s;
    -moz-animation: fadein .2s; /* Firefox */
    -webkit-animation: fadein .2s; /* Safari and Chrome */
    -o-animation: fadein .2s; /* Opera */
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadein { /* Firefox */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-o-keyframes fadein { /* Opera */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* Fade ins */

/* Matrix background container class */
.matrix-bg {
    position: relative;
    overflow: hidden;
    background: #000;
}

    .matrix-bg canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        opacity: 0.3;
        pointer-events: none;
    }

    .matrix-bg .content {
        position: relative;
        z-index: 1;
    }

.info-box {
    background: rgba(200, 200, 200, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 24px 32px;
    margin: 20px auto;
    max-width: 800px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: #fff;
    letter-spacing: 1.5px;
    text-align: left;
}

.sub-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.2;
    color: #fff;
    letter-spacing: 1.5px;
    text-align: left;
}

.card-icon {
    font-size: 40px;
    font-weight: bold;
}

.tt-hero {
    width: 860px;
    height: 420px;
    background: #1a1a28;
    border: 1px solid #2e2e46;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    align-items: center;
    box-shadow: 0 40px 80px rgba(0,0,0,0.6);
    position: relative;
}

    .tt-hero::before {
        content: '';
        position: absolute;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(124,111,255,0.09) 0%, transparent 65%);
        top: 50%;
        right: -100px;
        transform: translateY(-50%);
        pointer-events: none;
    }

.tt-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 0 64px;
}

.tt-logo-text {
    display: block;
    font-size: 72px;
    font-weight: 800;
    line-height: 1.0;
    letter-spacing: -0.03em;
}

    .tt-logo-text .tt-typing-word {
        color: #c8c8e8;
    }

    .tt-logo-text .tt-tutor-word {
        color: #7c6fff;
    }

/* Typewriter subtitle */
.tt-sub {
    font-size: 30px;
    font-weight: 300;
    color: #ddd;
    line-height: 1.6;
    min-height: 1.6em;
}

.tt-cursor {
    display: inline-block;
    width: 2px;
    height: 2rem;
    background: #7c6fff;
    margin-left: 2px;
    vertical-align: middle;
    animation: blink 1s step-start infinite;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.tt-cta {
    display: inline-block;
    margin-top: 8px;
    background: transparent;
    color: #c8c8e8;
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 32px;
    border-radius: 999px;
    border: 2px solid #7c6fff;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: background 0.2s, color 0.2s;
}

    .tt-cta:hover {
        background: #7c6fff;
        color: #ffffff;
    }

.new-hero-background {
    position: relative;
    min-height: 700px;
    height: calc(100vh - 30px);
    background: url('/images/background.jpg') no-repeat center center/cover;
    background-attachment: fixed; /* Parallax effect */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


.hero-image {
    position: relative;
    min-height: 700px;
    height: calc(100vh - 30px);
    background: url('/images/new_hero_image.jpg') no-repeat center center/cover;
    background-attachment: fixed; /* Parallax effect */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .hero-image::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 1;
    }

@media (max-width: 1000px) {
    .hero-image {
        padding-top: 200px;
    }
}

.cta-section {
    background: linear-gradient(135deg, var(--color-1), var(--color-2), var(--color-3));
    position: relative;
    display: flex;
    align-items: center;
    min-height: 700px;
}

    .cta-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 30% 70%, var(--color-1) 0%, transparent 50%), radial-gradient(circle at 70% 30%, var(--color-2) 0%, transparent 50%);
        opacity: 0.3;
    }

/*
 * Google AdSense units stay collapsed (no height or spacing) until AdSense marks them as
 * filled, so blocked, unapproved, or unfilled units take up no space. The ins element keeps
 * its width so AdSense can still size and fill it later (for example after consent is given),
 * and these rules react automatically whenever data-ad-status changes.
 */
.adsense-unit {
    margin: 0;
}

    .adsense-unit:has(ins.adsbygoogle[data-ad-status="filled"]) {
        margin-bottom: 1rem;
    }

    .adsense-unit.adsense-banner:has(ins.adsbygoogle[data-ad-status="filled"]) {
        margin-bottom: 1.5rem;
    }

    .adsense-unit ins.adsbygoogle:not([data-ad-status="filled"]) {
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden;
    }

/* News hero section */
.news-hero {
    position: relative;
    min-height: 700px;
    height: calc(100vh - 30px);
    background: url('/images/NewsHero.jpg') no-repeat center center/cover;
    background-attachment: fixed; /* Parallax effect */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .news-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1;
    }

/* Professional services section */
.services-section {
    position: relative;
    padding: 6rem 0;
    background: radial-gradient(circle at 15% 20%, rgba(79, 112, 156, 0.55) 0%, transparent 45%), radial-gradient(circle at 85% 80%, rgba(59, 130, 246, 0.25) 0%, transparent 50%), linear-gradient(135deg, #0b1424 0%, var(--color-1) 55%, #1b2c47 100%);
    overflow: hidden;
}

    .services-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
        background-size: 48px 48px;
        mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
        pointer-events: none;
    }

    .services-section .container {
        position: relative;
        z-index: 1;
    }

.services-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #9ec5ff;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Index page services intro: kicker label and lead paragraph on the left, Schedule a Call on the right,
   separated from the service cards by a hairline rule */
.services-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
    margin-bottom: 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
}

.services-intro-text {
    max-width: 760px;
}

.services-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1.25rem;
    color: #9ec5ff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

    .services-kicker::before {
        content: '';
        width: 40px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, #3b82f6, #9ec5ff);
    }

.services-intro-lead {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}

    .services-intro-lead strong {
        font-weight: 600;
        color: #fff;
    }

.services-intro-cta {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    padding: 0.95rem 1.75rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #3b82f6, var(--color-3));
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.35);
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .services-intro-cta:hover,
    .services-intro-cta:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 16px 36px rgba(59, 130, 246, 0.5);
        color: #fff;
    }

    .services-intro-cta-arrow {
        transition: transform 0.2s ease;
    }

    .services-intro-cta:hover .services-intro-cta-arrow,
    .services-intro-cta:focus-visible .services-intro-cta-arrow {
        transform: translateX(4px);
    }

@media (max-width: 992px) {
    .services-intro {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.75rem;
    }
}

.services-title {
    line-height: 1.1;
    margin-bottom: 1.25rem;
}

.services-lead {
    font-size: 1.15rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.8);
    max-width: 640px;
}

.services-quote {
    padding: 2rem 2.25rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 4px solid #3b82f6;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    color: #fff;
}

.services-quote-question {
    font-size: 1.35rem;
    font-style: italic;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}

.services-quote-answer {
    margin-top: 0.75rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: #9ec5ff;
}

.services-pillars {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0 0;
}

    .services-pillars li {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0.6rem 0.9rem;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.06);
        font-weight: 600;
        color: rgba(255, 255, 255, 0.9);
    }

        .services-pillars li i {
            color: #9ec5ff;
        }

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.service-card {
    padding: 1.75rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

    .service-card:hover {
        transform: translateY(-4px);
        border-color: rgba(158, 197, 255, 0.5);
        background: rgba(255, 255, 255, 0.08);
    }

    .service-card .service-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        margin-bottom: 1rem;
        border-radius: 10px;
        background: linear-gradient(135deg, #3b82f6, var(--color-3));
        font-size: 1.4rem;
        color: #fff;
    }

    .service-card h3 {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .service-card p {
        font-size: 0.92rem;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.7);
        margin: 0;
    }

@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .services-grid,
    .services-pillars {
        grid-template-columns: 1fr;
    }
}

/* News menu: full-width mega menu below the navbar, toggled by the navbar News button (see site.js) */
.news-menu-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #CCC !important;
    background: none;
    border: none;
}

    .news-menu-toggle:hover,
    .news-menu-toggle[aria-expanded="true"] {
        color: #fff !important;
    }

/* Menu icon morphs into a close icon while the menu is open */
    .news-menu-toggle i {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.25s ease, opacity 0.2s ease;
    }

.news-menu-toggle-open {
    font-size: 1.75rem;
}

.news-menu-toggle-close {
    font-size: 1.3rem;
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
}

.news-menu-toggle[aria-expanded="true"] .news-menu-toggle-open {
    opacity: 0;
    transform: rotate(90deg) scale(0.6);
}

.news-menu-toggle[aria-expanded="true"] .news-menu-toggle-close {
    opacity: 1;
    transform: rotate(0) scale(1);
}

.news-menu {
    position: fixed;
    top: var(--nav-top);
    left: 0;
    right: 0;
    z-index: 1020;
    max-height: calc(100vh - var(--nav-top));
    overflow-x: hidden;
    overflow-y: auto;
    background: #16191d;
    border-top: 1px solid #2b3035;
    border-bottom: 3px solid #3b82f6;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
    animation: news-menu-in 0.18s ease-out;
}

    .news-menu[hidden] {
        display: none;
    }

@keyframes news-menu-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Modules: Latest News and Search across the top, Topics and Account side by side below */
.news-menu-inner {
    display: grid;
    grid-template-columns: 1fr 280px;
    grid-template-areas:
        "latest search"
        "topics account";
    gap: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.news-menu-module {
    padding: 1.25rem;
    border: 1px solid #2b3035;
    border-radius: 12px;
    background: #1c2026;
}

.news-menu-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #2b3035;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8b949e;
}

    .news-menu-heading i {
        font-size: 0.9rem;
        color: #9ec5ff;
    }

/* Latest News module */
.news-menu-latest {
    grid-area: latest;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .news-menu-latest:hover,
    .news-menu-latest:focus-visible {
        background: #21262d;
        border-color: #3b82f6;
    }

.news-menu-latest-icon {
    position: relative;
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(253, 224, 71, 0.12);
    color: #fde047;
    font-size: 1.3rem;
}

    .news-menu-latest-icon .news-menu-live-dot {
        position: absolute;
        top: -3px;
        right: -3px;
        border: 2px solid #1c2026;
        box-sizing: content-box;
    }

.news-menu-latest-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.news-menu-latest-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.news-menu-latest-desc {
    font-size: 0.85rem;
    color: #8b949e;
}

.news-menu-latest-cta {
    margin-left: auto;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    color: #9ec5ff;
}

    .news-menu-latest-cta i {
        display: inline-block;
        margin-left: 4px;
        transition: transform 0.2s ease;
    }

.news-menu-latest:hover .news-menu-latest-cta i {
    transform: translateX(4px);
}

.news-menu-live-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
}

    .news-menu-live-dot::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: #ef4444;
        animation: news-menu-pulse 1.6s ease-out infinite;
    }

@keyframes news-menu-pulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* Search module: posts to /search like the navbar search */
.news-menu-search {
    grid-area: search;
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
}

.news-menu-search-form {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.35rem 0.35rem 0.35rem 0.8rem;
    border: 1px solid #2b3035;
    border-radius: 10px;
    background: #16191d;
    transition: border-color 0.15s ease;
}

    .news-menu-search-form:focus-within {
        border-color: #3b82f6;
    }

.news-menu-search-icon {
    font-size: 0.95rem;
    color: #8b949e;
}

.news-menu-search-form:focus-within .news-menu-search-icon {
    color: #9ec5ff;
}

.news-menu-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.3rem 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.92rem;
    color: #e6edf3;
}

    .news-menu-search-input::placeholder {
        color: #8b949e;
    }

    /* Keep the dark background when the browser previews or fills an autofill suggestion */
    .news-menu-search-input:-webkit-autofill,
    .news-menu-search-input:-webkit-autofill:hover,
    .news-menu-search-input:-webkit-autofill:focus {
        -webkit-text-fill-color: #e6edf3;
        -webkit-box-shadow: 0 0 0 1000px #16191d inset;
        box-shadow: 0 0 0 1000px #16191d inset;
        caret-color: #e6edf3;
        transition: background-color 9999s ease-in-out 0s;
    }

.news-menu-search-btn {
    display: flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.14);
    color: #9ec5ff;
    font-size: 1rem;
    transition: background 0.15s ease, color 0.15s ease;
}

    .news-menu-search-btn:hover,
    .news-menu-search-btn:focus-visible {
        background: #3b82f6;
        color: #fff;
    }

/* Topics module */
.news-menu-topics {
    grid-area: topics;
}

.news-menu-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.news-menu-link {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.6rem 0.65rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s ease;
}

    .news-menu-link:hover,
    .news-menu-link:focus-visible {
        background: rgba(255, 255, 255, 0.06);
    }

.news-menu-icon {
    display: flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.14);
    color: #9ec5ff;
    font-size: 1.05rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.news-menu-link:hover .news-menu-icon,
.news-menu-link:focus-visible .news-menu-icon {
    background: #3b82f6;
    color: #fff;
}

.news-menu-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.news-menu-title {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    color: #e6edf3;
}

.news-menu-desc {
    margin-top: 2px;
    font-size: 0.8rem;
    line-height: 1.35;
    color: #8b949e;
}

/* Account module */
.news-menu-account {
    grid-area: account;
}

.news-menu-account-groups {
    display: grid;
    grid-template-columns: 1fr;
}

.news-menu-account-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .news-menu-account-list + .news-menu-account-list {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid #2b3035;
    }

/* "a." outranks the scoped "a" color in _Layout.cshtml.css, which applies to plain href links like Service Portal */
.news-menu a.news-menu-account-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #c9d1d9;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

    .news-menu-account-link i {
        width: 1.1rem;
        font-size: 1rem;
        text-align: center;
        color: #8b949e;
        transition: color 0.15s ease;
    }

    .news-menu-account-link:hover,
    .news-menu-account-link:focus-visible {
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
    }

        .news-menu-account-link:hover i,
        .news-menu-account-link:focus-visible i {
            color: #9ec5ff;
        }

@media (prefers-reduced-motion: reduce) {
    .news-menu,
    .news-menu-live-dot::before {
        animation: none;
    }
}

@media (max-width: 1199.98px) {
    .news-menu-inner {
        grid-template-columns: 1fr 240px;
    }

    .news-menu-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablets: modules stack; the account groups sit side by side */
@media (max-width: 991.98px) {
    .news-menu-inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "search"
            "latest"
            "topics"
            "account";
    }

    .news-menu-account-groups {
        grid-template-columns: repeat(2, 1fr);
        gap: 0 0.75rem;
    }

        .news-menu-account-list + .news-menu-account-list {
            margin-top: 0;
            padding-top: 0;
            border-top: none;
        }
}

@media (max-width: 767.98px) {
    /* Undo the global ".container { min-width: 100vw }": 100vw includes the menu's own scrollbar, which caused horizontal overflow */
    .news-menu .container {
        min-width: 0 !important;
        padding-left: 16px;
        padding-right: 16px;
    }

    .news-menu-inner {
        gap: 0.75rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .news-menu-module {
        padding: 1rem;
    }
}

@media (max-width: 575.98px) {
    .news-menu-links,
    .news-menu-account-groups {
        grid-template-columns: 1fr;
    }

        .news-menu-account-list + .news-menu-account-list {
            margin-top: 0.5rem;
            padding-top: 0.5rem;
            border-top: 1px solid #2b3035;
        }

    .news-menu-desc,
    .news-menu-latest-desc,
    .news-menu-latest-cta span {
        display: none;
    }

    .news-menu-link {
        align-items: center;
        padding: 0.5rem;
    }
}