/* ==========================================================================
   SME Insurance India — brand theme overrides
   Sits on top of the Urane template stylesheet. Loaded last.
   Palette derived from the SME shield logo.
   ========================================================================== */

:root {
    /* Palette sampled directly from the Insumust globe logo.
       #0072BC is the mid ocean blue of the wordmark; #002B55 the deepest
       part of the globe; #8CE6FA the cyan of the "Be Insured. Be Safe."
       tagline on the dark-background variant. */
    --color-primary: #0072BC;    /* primary blue -- 4.9:1 with white text */
    --color-secondary: #00A0DC;  /* bright cyan-blue */
    --color-accent: #8CE6FA;     /* tagline cyan, accents only */
    --dark: #002B55;             /* deep ocean navy */
    --dark-secondary: #013D71;
    --dark-optional: #001B38;
    --bg-gray: #EAF4FB;          /* pale blue tint */
    --color-heading: #012A4F;
    --color-paragraph: #55677A;
    --box-shadow-secondary: 0 10px 30px 0 rgba(0, 114, 188, 0.35);
    --bg-gradient: linear-gradient(45deg, #0072BC 30%, #00A0DC 90%);
    --bg-gradient-five: linear-gradient(65deg, #00A0DC 30%, #0072BC 100%);
}

/* --------------------------------------------------------------------------
   Logo sizing and variants.
   The SME mark is a wide SVG (2560x1264), so it needs an explicit height or
   it blows out the header grid. Two variants ship: the full-colour mark for
   light backgrounds and a white-text mark for dark ones.
   -------------------------------------------------------------------------- */

.navbar .navbar-brand img.logo {
    width: auto;
    max-width: none;
}

/* --- Inner pages: solid white navbar, always the colour mark --- */

.navbar.navbar-default .navbar-brand img.logo { height: 54px; }
.navbar.navbar-default.sticky-on .navbar-brand img.logo { height: 46px; }

/* --- Home: overlay navbar, two logo variants ---

   IMPORTANT: validnavs.js REMOVES the `no-background` class once the page is
   scrolled past 34px. So any rule scoped to `.no-background` silently stops
   applying on scroll. Scoping the hide/show that way showed BOTH logos on the
   sticky header (the white-text variant looked like a stray shield, because
   its wordmark is white-on-white).

   So: the colour mark is the default in every state, and the white mark is
   only opted in for the one case that needs it -- the unscrolled overlay
   navbar below 1399px, where the brand sits on the blue bar with no white
   plate behind it. --- */

/* Specificity note: validnavs.css carries two competing rules --
     `.navbar-brand > img { display: block }`  and, below 1023px,
     `nav.navbar.validnavs.navbar-fixed .logo { display: block !important }`.
   The !important in the mobile rule cannot be beaten by specificity alone,
   which is why both logos appeared side by side on phones. These rules match
   it with !important so the variants stay mutually exclusive at every width
   and scroll position. */

nav.navbar.validnavs .navbar-brand img.insumust-logo-light { display: none !important; }
nav.navbar.validnavs .navbar-brand img.insumust-logo-dark  { display: block !important; }

@media (max-width: 1398px) {
    nav.navbar.validnavs.navbar-style-one.no-background .navbar-brand img.insumust-logo-light { display: block !important; }
    nav.navbar.validnavs.navbar-style-one.no-background .navbar-brand img.insumust-logo-dark  { display: none !important; }
}

.navbar-style-one .navbar-brand img.logo { height: 60px; }
.navbar-style-one:not(.no-background) .navbar-brand img.logo { height: 46px; }

/* Centre the brand inside the template's 180px white plate. */
@media (min-width: 1399px) {
    nav.navbar.navbar-style-one.no-background a.navbar-brand {
        display: flex;
        align-items: center;
        min-height: 96px;
    }
    nav.navbar.navbar-style-one.no-background a.navbar-brand img.logo { height: 72px; }
    /* The template turns the brand into a white silhouette in a mid-width
       band; we swap the source instead, so cancel the filter. */
    nav.navbar.navbar-style-one.no-background a.navbar-brand img { filter: none; }
}

@media only screen and (min-width: 1024px) and (max-width: 1399px) {
    nav.navbar.navbar-style-one.no-background a.navbar-brand img { filter: none; }
}

/* Logo inside the mobile slide-in menu */
.navbar .navbar-collapse > img {
    height: 44px;
    width: auto;
    margin-bottom: 10px;
}

footer .f-item.about .logo img {
    height: 58px;
    width: auto;
}

@media (max-width: 767px) {
    .navbar .navbar-brand img.logo,
    .navbar.navbar-default .navbar-brand img.logo,
    .navbar-style-one.no-background .navbar-brand img.logo { height: 40px; }
}

/* --------------------------------------------------------------------------
   Top bars
   -------------------------------------------------------------------------- */

/* Home top bar stays light: the template's white brand plate overlaps it. */
.top-bar-style-two { background: #ffffff; }

.top-bar-style-two ul.top-header-list li h6,
.top-bar-style-two ul.top-header-list li h6 a { color: var(--color-heading); }

.top-bar-style-two ul.top-header-list li p { color: var(--color-paragraph); }

/* Inner top bar is dark; make sure links read against it. */
.top-bar-area.bg-dark.text-light ul.item-flex li,
.top-bar-area.bg-dark.text-light ul.item-flex li a { color: rgba(255, 255, 255, .82); }

.top-bar-area.bg-dark.text-light ul.item-flex li a:hover { color: #fff; }

.top-bar-area.bg-dark.text-light ul.item-flex li i { color: var(--color-secondary); }

.top-bar-area.bg-dark .social ul li a { color: rgba(255, 255, 255, .82); }
.top-bar-area.bg-dark .social ul li a:hover { color: #fff; }

/* Nav call-to-action on inner pages */
.sme-nav-cta { white-space: nowrap; }

@media (max-width: 991px) {
    .sme-nav-cta { display: none; }
}

/* --------------------------------------------------------------------------
   Products / services cards — keep card heights even across the grid
   -------------------------------------------------------------------------- */

.services-style-one {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.services-style-one p {
    flex-grow: 1;
}

.services-style-three .info p {
    min-height: 96px;
}

.sme-product-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Industries grid
   -------------------------------------------------------------------------- */

.sme-industry-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    height: 100%;
    background: #fff;
    box-shadow: 0 4px 24px rgba(0, 43, 85, 0.09);
    transition: transform .35s ease, box-shadow .35s ease;
}

.sme-industry-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 36px rgba(0, 43, 85, 0.17);
}

.sme-industry-card .thumb {
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.sme-industry-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.sme-industry-card:hover .thumb img {
    transform: scale(1.07);
}

.sme-industry-card .info {
    padding: 28px 28px 30px;
}

.sme-industry-card .info span {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.sme-industry-card .info h4 {
    font-size: 20px;
    line-height: 1.35;
    margin-bottom: 14px;
}

.sme-industry-card .info h4 a {
    color: var(--color-heading);
}

.sme-industry-card .info h4 a:hover {
    color: var(--color-primary);
}

.sme-industry-card .info p {
    margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   Client logo strip — the real client marks vary wildly in aspect ratio
   -------------------------------------------------------------------------- */

.sme-client-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 767px) {
    .sme-client-strip { grid-template-columns: repeat(2, 1fr); }
}

.sme-client-strip .item {
    background: #fff;
    border: 1px solid #d8e8f4;
    border-radius: 8px;
    height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* The supplied marks are 200x115 on white; this padding keeps them from
       touching the card edge without shrinking them too far. */
    padding: 18px 24px;
}

/* Real client marks are shown in full colour -- greyscaling them defeats the
   point of displaying the logo at all. A slight lift on hover instead. */
.sme-client-strip .item img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    transition: transform .3s ease;
}

.sme-client-strip .item:hover img { transform: scale(1.05); }

.sme-client-strip .item {
    transition: box-shadow .3s ease, border-color .3s ease;
}

.sme-client-strip .item:hover {
    border-color: rgba(0, 114, 188, .35);
    box-shadow: 0 6px 20px rgba(0, 43, 85, .10);
}

/* --------------------------------------------------------------------------
   Leadership cards
   -------------------------------------------------------------------------- */

.sme-leader-card {
    background: #fff;
    border-radius: 10px;
    padding: 36px;
    height: 100%;
    box-shadow: 0 4px 24px rgba(0, 43, 85, 0.09);
}

.sme-leader-card .head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
}

.sme-leader-card .head img {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-secondary);
    flex-shrink: 0;
}

.sme-leader-card .head h4 {
    margin-bottom: 4px;
    font-size: 22px;
}

.sme-leader-card .head span {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 14px;
}

.sme-leader-card p {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Testimonials — real quotes run long, so cap and scroll rather than clip
   -------------------------------------------------------------------------- */

.sme-quote-card {
    background: #fff;
    border-radius: 10px;
    padding: 36px;
    height: 100%;
    box-shadow: 0 4px 24px rgba(0, 43, 85, 0.09);
    display: flex;
    flex-direction: column;
}

.sme-quote-card .stars {
    color: #f5a623;
    margin-bottom: 16px;
}

.sme-quote-card p {
    flex-grow: 1;
    font-size: 15px;
    line-height: 1.8;
}

.sme-quote-card .author {
    border-top: 1px solid #dcebf6;
    padding-top: 18px;
    margin-top: 22px;
}

.sme-quote-card .author h5 {
    margin-bottom: 2px;
    font-size: 17px;
}

.sme-quote-card .author span {
    font-size: 13px;
    color: var(--color-paragraph);
}

/* --------------------------------------------------------------------------
   Blog cards — even heights and consistent image crops
   -------------------------------------------------------------------------- */

.home-blog-style-one-item > img,
.sme-blog-card .thumb img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.sme-blog-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 43, 85, 0.09);
    transition: transform .35s ease, box-shadow .35s ease;
}

.sme-blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 36px rgba(0, 43, 85, 0.17);
}

.sme-blog-card .info {
    padding: 26px 28px 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.sme-blog-card .meta {
    font-size: 13px;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 12px;
}

.sme-blog-card h4 {
    font-size: 19px;
    line-height: 1.45;
    margin-bottom: 12px;
}

.sme-blog-card h4 a { color: var(--color-heading); }
.sme-blog-card h4 a:hover { color: var(--color-primary); }

.sme-blog-card p {
    flex-grow: 1;
    margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   Product detail page
   -------------------------------------------------------------------------- */

.sme-detail-body p { margin-bottom: 20px; }

.sme-detail-body h3 {
    margin-top: 34px;
    margin-bottom: 16px;
    font-size: 26px;
}

.sme-callout {
    background: var(--bg-gray);
    border-left: 4px solid var(--color-primary);
    border-radius: 6px;
    padding: 28px 32px;
    margin: 32px 0;
}

.sme-callout p:last-child { margin-bottom: 0; }

.sme-sidebar-widget {
    background: #fff;
    border-radius: 10px;
    padding: 32px;
    margin-bottom: 30px;
    box-shadow: 0 4px 24px rgba(0, 43, 85, 0.09);
}

.sme-sidebar-widget h4 {
    font-size: 20px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dcebf6;
}

.sme-sidebar-widget ul { list-style: none; margin: 0; padding: 0; }

.sme-sidebar-widget ul li { border-bottom: 1px solid #e6f0f8; }
.sme-sidebar-widget ul li:last-child { border-bottom: none; }

.sme-sidebar-widget ul li a {
    display: block;
    padding: 12px 0;
    color: var(--color-heading);
    font-weight: 500;
    font-size: 15px;
}

.sme-sidebar-widget ul li a:hover,
.sme-sidebar-widget ul li.active a { color: var(--color-primary); }

.sme-sidebar-cta {
    background: var(--dark);
    color: #fff;
    border-radius: 10px;
    padding: 36px 32px;
    text-align: center;
}

.sme-sidebar-cta h4 { color: #fff; margin-bottom: 12px; }
.sme-sidebar-cta p { color: rgba(255,255,255,.75); margin-bottom: 22px; }

/* --------------------------------------------------------------------------
   Fun facts strip
   -------------------------------------------------------------------------- */

.sme-fact {
    text-align: center;
    padding: 20px 10px;
}

.sme-fact .counter {
    display: flex;
    justify-content: center;
    align-items: baseline;
    font-size: 46px;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
}

.sme-fact .counter .operator { font-size: 34px; }

.sme-fact span.label {
    display: block;
    margin-top: 12px;
    font-weight: 600;
    color: var(--color-heading);
}

.sme-fact small {
    display: block;
    margin-top: 6px;
    color: var(--color-paragraph);
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */

.sme-note {
    font-size: 13px;
    color: var(--color-paragraph);
}

.breadcrumb-area h1 { text-transform: none; }

.text-brand { color: var(--color-primary) !important; }

/* Nav dropdowns hold long product names */
.navbar .dropdown-menu { min-width: 280px; }

/* --------------------------------------------------------------------------
   Navigation spacing.
   SME's menu carries longer labels than the stock template ("Industries
   Insured", "Our Products"), so the default 15px item padding overflows the
   nav column and wraps the last item. Tighten it on desktop only.
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) {
    nav.navbar.validnavs .navbar-nav.navbar-center > li > a,
    nav.navbar.validnavs .navbar-nav.navbar-right > li > a {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (min-width: 1200px) and (max-width: 1499px) {
    nav.navbar.validnavs .navbar-nav.navbar-center > li > a,
    nav.navbar.validnavs .navbar-nav.navbar-right > li > a {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 15px;
    }
}

/* Keep the header contact block on one line */
.attr-nav.attr-box li.contact .info h5,
.attr-nav.attr-box li.contact .info h5 a {
    font-size: 15px;
    white-space: nowrap;
}

.attr-nav.attr-box li.contact .info p { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Even card heights.
   Real copy varies in length far more than the template's lorem ipsum, so
   cards need to stretch and push their CTA to the bottom rather than sitting
   at whatever height the text happens to end.
   -------------------------------------------------------------------------- */

/* Industry cards: pin "Read More" to the bottom of every card.
   The card is the flex column; .info grows to fill whatever the tallest
   sibling needs. Giving .info height:100% instead makes it overflow the
   card and get clipped by the card's overflow:hidden. */
.sme-industry-card {
    display: flex;
    flex-direction: column;
}

.sme-industry-card .thumb { flex-shrink: 0; }

.sme-industry-card .info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.sme-industry-card .info p { flex-grow: 1; }

.sme-industry-card .info .btn-reagular { margin-top: auto; align-self: flex-start; }

/* Product carousel: equal slide heights and a consistent image crop */
.services-carousel .swiper-slide {
    height: auto;
    display: flex;
}

.services-carousel .swiper-slide .services-style-three { width: 100%; }

.services-style-three,
.services-style-three .info {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.services-style-three .thumb img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.services-style-three .info p { flex-grow: 1; }

/* Products grid on the listing page */
.services-style-one .btn-reagular { margin-top: auto; }

/* --------------------------------------------------------------------------
   The product carousel uses the template's "stage" layout, which deliberately
   lets the next slide bleed past the container. Clip it at the section edge so
   the bleed still reads but the page gains no horizontal scrollbar.
   -------------------------------------------------------------------------- */

.services-style-three-area { overflow: hidden; }

/* --------------------------------------------------------------------------
   One-page landing (landing.html)
   Invisible anchors offset so a smooth-scrolled section is not hidden behind
   the sticky header.
   -------------------------------------------------------------------------- */

.sme-anchor {
    display: block;
    position: relative;
    top: -90px;
    height: 0;
    visibility: hidden;
}

/* --------------------------------------------------------------------------
   Login button (header, all variants)
   -------------------------------------------------------------------------- */

.sme-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: 1px solid rgba(47, 92, 171, .35);
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-primary);
    background: transparent;
    white-space: nowrap;
    transition: all .3s ease;
}

.sme-login-btn i { font-size: 14px; }

.sme-login-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Inner header: login sits beside the quote CTA */
.attr-right.sme-attr-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Home / landing overlay header: the attr bar sits on the blue band, so the
   outline button needs light treatment there. Once the nav sticks it turns
   white, so revert to the brand-coloured version. */
.attr-nav.attr-box ul li.sme-login-item {
    display: inline-flex;
    align-items: center;
    padding-left: 18px;
}

/* The light outline is only correct where the overlay navbar actually sits on
   the blue band -- i.e. desktop. On phones that header collapses to a white
   bar, so a white button on it is invisible; keep the brand-coloured style. */
@media (min-width: 992px) {
    .navbar-style-one.no-background .sme-login-btn {
        color: #fff;
        border-color: rgba(255, 255, 255, .55);
    }

    .navbar-style-one.no-background .sme-login-btn:hover {
        background: #fff;
        border-color: #fff;
        color: var(--color-primary);
    }
}

/* Below 1399px the overlay bar is blue; above it the brand plate is white but
   the attr area is still on the blue band, so the light style holds either way. */

@media (max-width: 1199px) {
    .attr-nav.attr-box ul li.contact { display: none; }
}

@media (max-width: 991px) {
    .sme-login-btn { padding: 9px 16px; font-size: 14px; }
}

/* The mobile slide-in menu gets its own Login row, because the attr bar is
   hidden at that size. It must be hidden on desktop, where the button already
   shows -- and the selector needs to out-specify validnavs' own
   `nav.navbar.validnavs .navbar-nav > li` display rule, or Login appears twice. */
nav.navbar.validnavs .navbar-nav > li.sme-mobile-login { display: none; }

@media (max-width: 991px) {
    nav.navbar.validnavs .navbar-nav > li.sme-mobile-login { display: block; }
    nav.navbar.validnavs .navbar-nav > li.sme-mobile-login > a { color: var(--color-primary); }
    nav.navbar.validnavs .navbar-nav > li.sme-mobile-login > a i { margin-right: 8px; }
}

/* --------------------------------------------------------------------------
   Login page
   -------------------------------------------------------------------------- */

.sme-auth-card {
    background: #fff;
    border-radius: 12px;
    padding: 46px 44px;
    box-shadow: 0 10px 40px rgba(0, 43, 85, .11);
}

.sme-auth-card h2 { font-size: 30px; margin-bottom: 10px; }
.sme-auth-card > p { margin-bottom: 30px; }

.sme-auth-form .form-group { margin-bottom: 22px; }

.sme-auth-form label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--color-heading);
}

.sme-auth-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 26px;
    font-size: 14px;
}

.sme-check { font-weight: 500; color: var(--color-paragraph); }
.sme-check input { margin-right: 8px; }

.sme-auth-alt {
    margin-top: 26px;
    margin-bottom: 0;
    font-size: 14px;
    text-align: center;
}

.sme-auth-aside { padding-top: 10px; }
.sme-auth-aside h3 { margin-bottom: 22px; }


/* Keep the remember-me checkbox on one line with its label */
.sme-auth-row .sme-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

.sme-auth-row .sme-check input {
    width: auto;
    margin: 0;
    flex-shrink: 0;
}

/* The attr-nav gives its anchors `display:block; padding:30px 0`, which
   stretched the Login button to the full height of the navbar. Reassert the
   button box on the overlay header specifically. */
.attr-nav.attr-box ul li.sme-login-item > a.sme-login-btn {
    display: inline-flex;
    align-items: center;
    padding: 11px 22px;
    line-height: 1;
    height: auto;
}

.attr-nav.attr-box ul li.sme-login-item { align-self: center; }


/* --------------------------------------------------------------------------
   Insumust logo sizing.
   This is a globe + wordmark lockup with a tagline underneath, so it needs
   noticeably more height than a plain wordmark or the previous flat SVG --
   below about 60px the "Be Insured. Be Safe." line stops being legible.
   -------------------------------------------------------------------------- */

.navbar .navbar-brand img.logo { width: auto; max-width: none; }

.navbar.navbar-default .navbar-brand img.logo { height: 66px; }
.navbar.navbar-default.sticky-on .navbar-brand img.logo { height: 56px; }

.navbar-style-one .navbar-brand img.logo { height: 64px; }
.navbar-style-one:not(.no-background) .navbar-brand img.logo { height: 56px; }

@media (min-width: 1399px) {
    nav.navbar.navbar-style-one.no-background a.navbar-brand img.logo { height: 80px; }
}

@media (max-width: 991px) {
    .navbar .navbar-brand img.logo,
    .navbar.navbar-default .navbar-brand img.logo,
    .navbar-style-one.no-background .navbar-brand img.logo { height: 52px; }
}

@media (max-width: 575px) {
    .navbar .navbar-brand img.logo,
    .navbar.navbar-default .navbar-brand img.logo,
    .navbar-style-one.no-background .navbar-brand img.logo { height: 44px; }
}

.navbar .navbar-collapse > img { height: 56px; width: auto; margin-bottom: 16px; }

footer .f-item.about .logo img { height: 76px; width: auto; }

/* Logo on the sign-in card */
.sme-auth-logo {
    display: block;
    margin-bottom: 26px;
}

.sme-auth-logo img {
    height: 72px;
    width: auto;
}

/* --------------------------------------------------------------------------
   Mobile header layout
   The template absolutely-positions .navbar-brand at left:50% to centre the
   logo, and hides .attr-right entirely below 992px. That leaves the phone
   header as a lone hamburger with a floating logo and no way to sign in.
   Below, the brand is returned to normal flow so it sits directly beside the
   hamburger, and the Login button is brought back on the right.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {

    /* --- hamburger + logo, together, on the left --- */
    nav.navbar.validnavs .navbar-header {
        display: flex !important;
        align-items: center;
        gap: 12px;
        width: auto !important;
        float: none !important;
    }

    nav.navbar.validnavs .navbar-header .navbar-toggle {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        float: none !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center;
    }

    nav.navbar.validnavs .navbar-header .navbar-brand {
        position: static !important;
        left: auto !important;
        transform: none !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
    }

    /* --- Login back on the right --- */
    nav.navbar.validnavs .attr-right {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
    }

    nav.navbar.validnavs .attr-nav.attr-box { display: block !important; }

    nav.navbar.validnavs .attr-nav.attr-box > ul {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        margin: 0;
        padding: 0;
    }

    nav.navbar.validnavs .attr-nav.attr-box ul li.sme-login-item {
        display: inline-flex !important;
        padding-left: 0;
    }

    /* The slide-in menu already carries its own Login row; with the button
       visible again that would be a duplicate. */
    nav.navbar.validnavs .navbar-nav > li.sme-mobile-login { display: none !important; }
}

/* Icon-only on genuinely tiny screens. 400px was too generous -- most phones
   report 360-393px, so the label was hidden on nearly every device. There is
   room for the word "Login" well below that. */
@media (max-width: 339px) {
    .sme-login-btn { padding: 8px 12px; }
    .sme-login-btn span { display: none; }
}

/* On inner pages the nav row is `d-flex justify-content-between`, and
   .overlay-screen (a zero-width dimming layer) sits in it as the final flex
   child. space-between therefore reserved a slot for it and pulled the Login
   button in from the right edge. Taking it out of flow fixes the alignment;
   it is only ever shown as a full-screen overlay anyway. */
@media (max-width: 991px) {
    nav.navbar.validnavs .nav-box > .overlay-screen { position: absolute; }
    nav.navbar.validnavs .attr-right { margin-left: auto; }
}


/* The attr-nav sets a dark colour on its anchors which the Login button was
   inheriting (it computed to #232323 rather than the brand blue), so state it
   explicitly on the element and its icon. */
.sme-login-btn,
.sme-login-btn i,
.attr-nav.attr-box ul li.sme-login-item > a.sme-login-btn,
.attr-nav.attr-box ul li.sme-login-item > a.sme-login-btn i {
    color: var(--color-primary);
}

.sme-login-btn:hover,
.sme-login-btn:hover i,
.attr-nav.attr-box ul li.sme-login-item > a.sme-login-btn:hover,
.attr-nav.attr-box ul li.sme-login-item > a.sme-login-btn:hover i {
    color: #fff;
}

@media (min-width: 992px) {
    .navbar-style-one.no-background .sme-login-btn,
    .navbar-style-one.no-background .sme-login-btn i { color: #fff; }
    .navbar-style-one.no-background .sme-login-btn:hover,
    .navbar-style-one.no-background .sme-login-btn:hover i { color: var(--color-primary); }
}