/* ==========================================================
   DraftSend Static Public Pages

   Used by:
   - app/Views/static/about.php
   - app/Views/static/help.php
   - app/Views/static/features.php
   - app/Views/static/terms.php
   - app/Views/static/privacy.php
   - app/Views/static/contact.php

   @version 2.0.0
   @last_updated 2026-06-02

   @changelog
   2.0.0 - REDESIGNED: Aligned static public pages with new blue-gradient Draftsend public style.
         - UPDATED: Nav, hero, cards, sidebar, mini cards, buttons, CTA sections, and footer.
         - ADDED: Static visual helpers for feature grids, split sections, support cards, and final CTA.
         - PRESERVED: Shared public nav/footer/static page layout class hooks and responsive behavior.
   1.0.0 - ADDED: Shared public nav/footer/static page layout.
         - ADDED: Dark premium legal/content page styling.
         - ADDED: Shared cards, sidebar, CTA, responsive behavior.
         - ADDED: Mobile public navigation support.
   ========================================================== */

:root {
    --static-blue-950: #070d34;
    --static-blue-900: #111a58;
    --static-blue-800: #182d8f;
    --static-blue-700: #1d4ed8;
    --static-blue-600: #2563eb;
    --static-cyan-400: #22d3ee;
    --static-cyan-300: #67e8f9;
    --static-purple-500: #8b5cf6;
    --static-pink-400: #fb7185;
    --static-amber-300: #fcd34d;

    --static-bg: #ffffff;
    --static-bg-soft: #f6f8ff;
    --static-card: #ffffff;
    --static-card-strong: #f8faff;
    --static-border: #e6ebf5;
    --static-border-strong: #d8e2f3;

    --static-text: #101828;
    --static-text-strong: #101828;
    --static-muted: #667085;
    --static-muted-2: #98a2b3;

    --static-accent: #1d4ed8;
    --static-accent-dark: #182d8f;

    --static-shadow-sm: 0 10px 28px rgba(16, 24, 40, 0.08);
    --static-shadow: 0 20px 55px rgba(16, 24, 40, 0.12);
    --static-shadow-blue: 0 30px 90px rgba(37, 99, 235, 0.26);

    --static-radius-xl: 36px;
    --static-radius-lg: 28px;
    --static-radius-md: 18px;
    --static-radius-sm: 12px;
    --static-radius-pill: 999px;

    --static-max: 1320px;

    --static-footer-bg: #070d34;
    --static-footer-text: rgba(255, 255, 255, 0.72);
    --static-footer-muted: rgba(255, 255, 255, 0.7);
    --static-footer-border: rgba(255, 255, 255, 0.12);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--static-bg);
    color: var(--static-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body *:not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands) {
    font-family: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* ------------------ Public Static Nav ------------------ */

.static-public-nav {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(7, 13, 52, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.static-public-nav-inner {
    width: min(var(--static-max), calc(100% - 2rem));
    min-height: 76px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
}

.static-public-logo {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    text-decoration: none;
}

.static-public-logo-img {
    display: block;
    width: 176px;
    max-width: 42vw;
    height: auto;
    filter: brightness(0) invert(1);
}

.static-public-links {
    display: flex;
    align-items: center;
    gap: clamp(18px, 3vw, 34px);
    margin-left: auto;
}

.static-public-links a {
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
    transition: color 0.2s ease;
}

.static-public-links a:hover,
.static-public-links a.active {
    color: #ffffff;
}

.static-public-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.static-nav-btn,
.static-btn,
.static-btn-primary,
.static-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: var(--static-radius-pill);
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.static-nav-btn:hover,
.static-btn:hover,
.static-btn-primary:hover,
.static-cta:hover {
    transform: translateY(-1px);
}

.static-nav-btn-outline,
.static-btn-secondary {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.36);
}

.static-nav-btn-outline:hover,
.static-btn-secondary:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
}

.static-nav-btn-primary,
.static-btn-primary,
.static-cta {
    color: var(--static-blue-700);
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(7, 13, 52, 0.18);
}

.static-nav-btn-primary:hover,
.static-btn-primary:hover,
.static-cta:hover {
    color: var(--static-blue-800);
    box-shadow: 0 18px 45px rgba(7, 13, 52, 0.25);
}

.static-page .static-btn-secondary,
.static-card .static-btn-secondary,
.static-sidebar-card .static-btn-secondary,
.static-mini-card .static-btn-secondary {
    color: var(--static-blue-700);
    background: #f3f6ff;
    border-color: #d8e2f3;
}

.static-page .static-btn-secondary:hover,
.static-card .static-btn-secondary:hover,
.static-sidebar-card .static-btn-secondary:hover,
.static-mini-card .static-btn-secondary:hover {
    color: #ffffff;
    background: var(--static-blue-700);
    border-color: var(--static-blue-700);
}

.static-page .static-btn-primary,
.static-card .static-btn-primary,
.static-sidebar-card .static-btn-primary,
.static-mini-card .static-btn-primary,
.static-page .static-cta,
.static-card .static-cta,
.static-sidebar-card .static-cta {
    color: #ffffff;
    background: var(--static-blue-700);
    box-shadow: 0 14px 34px rgba(37, 99, 235, 0.2);
}

.static-page .static-btn-primary:hover,
.static-card .static-btn-primary:hover,
.static-sidebar-card .static-btn-primary:hover,
.static-mini-card .static-btn-primary:hover,
.static-page .static-cta:hover,
.static-card .static-cta:hover,
.static-sidebar-card .static-cta:hover {
    color: #ffffff;
    background: var(--static-blue-800);
    box-shadow: 0 18px 42px rgba(37, 99, 235, 0.28);
}

.static-mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    cursor: pointer;
}

.static-mobile-toggle i {
    color: #ffffff;
    font-size: 1.05rem;
}

.static-mobile-menu {
    display: none;
    width: min(var(--static-max), calc(100% - 2rem));
    margin: 0 auto;
    padding: 0 0 18px;
}

.static-mobile-menu.show {
    display: grid;
    gap: 8px;
}

.static-mobile-menu a {
    display: block;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.94rem;
    font-weight: 800;
    text-decoration: none;
}

.static-mobile-menu a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.13);
}

/* ------------------ Static Page Shell ------------------ */

.static-page-shell {
    min-height: 100vh;
    background: #ffffff;
}

.static-page {
    max-width: var(--static-max);
    margin: 0 auto;
    padding: 0 clamp(18px, 4vw, 72px) 64px;
    color: var(--static-text);
}

/* ------------------ Hero ------------------ */

.static-hero {
    position: relative;
    overflow: hidden;
    margin-left: calc(-1 * clamp(18px, 4vw, 72px));
    margin-right: calc(-1 * clamp(18px, 4vw, 72px));
    margin-bottom: clamp(54px, 6vw, 76px);
    padding: clamp(74px, 8vw, 122px) clamp(18px, 4vw, 72px);
    color: #ffffff;
    text-align: center;
    background:
        radial-gradient(circle at 74% 24%, rgba(103, 232, 249, 0.38), transparent 20%),
        radial-gradient(circle at 62% 62%, rgba(251, 113, 133, 0.32), transparent 20%),
        radial-gradient(circle at 46% 42%, rgba(139, 92, 246, 0.38), transparent 24%),
        linear-gradient(135deg, #20127a 0%, #2334b6 42%, #445ee8 100%);
}

.static-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 150px;
    background: linear-gradient(180deg, transparent, rgba(19, 24, 82, 0.28));
    pointer-events: none;
}

.static-hero::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: 10%;
    top: 80px;
    border-radius: 999px;
    background: rgba(103, 232, 249, 0.24);
    filter: blur(42px);
    pointer-events: none;
}

.static-hero > * {
    position: relative;
    z-index: 2;
}

.static-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 8px 14px;
    border-radius: var(--static-radius-pill);
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.static-hero h1 {
    max-width: 980px;
    margin: 0 auto;
    color: #ffffff;
    font-size: clamp(3rem, 6vw, 5.8rem);
    line-height: 0.96;
    letter-spacing: -0.07em;
    font-weight: 900;
}

.static-hero p {
    max-width: 760px;
    margin: 28px auto 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(1.05rem, 1.45vw, 1.25rem);
    line-height: 1.58;
    font-weight: 500;
}

.static-hero-actions,
.static-card-actions,
.static-cta-actions {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ------------------ Layout ------------------ */

.static-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.9fr);
    gap: 26px;
    align-items: start;
}

.static-main {
    display: grid;
    gap: 26px;
}

.static-card,
.static-sidebar-card,
.static-mini-card {
    background: var(--static-card);
    border: 1px solid var(--static-border);
    border-radius: var(--static-radius-lg);
    box-shadow: var(--static-shadow-sm);
}

.static-card {
    padding: clamp(24px, 3vw, 34px);
}

.static-card.featured-card {
    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.1), transparent 26%),
        #ffffff;
}

.static-card h2,
.static-card h3,
.static-sidebar-card h3 {
    margin: 0 0 12px;
    color: var(--static-text-strong);
    letter-spacing: -0.04em;
    line-height: 1.15;
    font-weight: 900;
}

.static-card h2 {
    font-size: clamp(1.55rem, 2.6vw, 2.25rem);
}

.static-card h3 {
    font-size: 1.2rem;
}

.static-card p,
.static-card li,
.static-sidebar-card p,
.static-sidebar-card li {
    color: var(--static-muted);
    line-height: 1.78;
}

.static-card p {
    margin: 0;
}

.static-card p + p {
    margin-top: 14px;
}

.static-card ul,
.static-card ol {
    margin: 0;
    padding-left: 20px;
}

.static-card li + li {
    margin-top: 8px;
}

.static-card code {
    background: #f3f6ff;
    border: 1px solid #d8e2f3;
    color: var(--static-blue-700);
    padding: 2px 7px;
    border-radius: 8px;
    font-size: 0.92em;
    font-weight: 800;
}

.static-sidebar {
    display: grid;
    gap: 18px;
    position: sticky;
    top: 96px;
}

.static-sidebar-card {
    padding: 24px 22px;
}

.static-sidebar-links,
.static-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.static-sidebar-links a {
    color: var(--static-text);
    text-decoration: none;
    font-weight: 800;
}

.static-sidebar-links a:hover {
    color: var(--static-blue-700);
}

.static-sidebar-list li {
    color: var(--static-muted);
    line-height: 1.65;
}

.static-sidebar-list strong {
    color: var(--static-text-strong);
}

.static-note {
    margin-top: 20px;
    color: var(--static-muted-2);
    font-size: 0.95rem;
}

.static-link {
    color: var(--static-blue-700);
    text-decoration: none;
    font-weight: 900;
}

.static-link:hover {
    color: var(--static-blue-800);
}

/* ------------------ Feature Grid Helpers ------------------ */

.static-grid {
    display: grid;
    gap: 18px;
}

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

.static-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.static-mini-card {
    padding: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.static-mini-card:hover {
    transform: translateY(-3px);
    border-color: rgba(37, 99, 235, 0.24);
    box-shadow: var(--static-shadow);
}

.static-mini-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: #edf4ff;
    color: var(--static-blue-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    margin-bottom: 18px;
    border: 1px solid #d8e2f3;
}

.static-mini-card h2,
.static-mini-card h3 {
    margin: 0;
    color: var(--static-text-strong);
    line-height: 1.25;
    letter-spacing: -0.035em;
    font-weight: 900;
}

.static-mini-card p {
    margin: 12px 0 0;
    color: var(--static-muted);
    line-height: 1.7;
}

/* ------------------ Static Visual Sections ------------------ */

.static-split-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr);
    gap: 28px;
    align-items: center;
}

.static-visual-panel {
    position: relative;
    min-height: 280px;
    border-radius: 30px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(7, 13, 52, 0.08) 0%, rgba(7, 13, 52, 0.76) 100%),
        radial-gradient(circle at 78% 24%, rgba(103, 232, 249, 0.78), transparent 24%),
        radial-gradient(circle at 28% 34%, rgba(252, 211, 77, 0.65), transparent 20%),
        radial-gradient(circle at 52% 62%, rgba(251, 113, 133, 0.72), transparent 24%),
        linear-gradient(135deg, #0f4c81 0%, #2563eb 48%, #7c3aed 100%);
    box-shadow: var(--static-shadow-blue);
}

.static-visual-panel::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.static-visual-overlay {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    padding: 20px;
    border-radius: 22px;
    background: rgba(7, 13, 52, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.static-visual-overlay span {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(103, 232, 249, 0.22);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.static-visual-overlay strong {
    display: block;
    font-size: 1.35rem;
    line-height: 1.12;
    letter-spacing: -0.04em;
    font-weight: 900;
}

.static-visual-overlay p {
    margin: 9px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.84rem;
    line-height: 1.45;
}

.static-support-card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.static-support-card .static-mini-icon {
    margin-bottom: 0;
    flex: 0 0 52px;
}

.static-support-copy {
    flex: 1;
    min-width: 240px;
}

/* ------------------ Final CTA ------------------ */

.static-final-cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: clamp(62px, 7vw, 92px) 24px;
    border-radius: var(--static-radius-xl);
    color: #ffffff;
    background:
        radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.28), transparent 26%),
        linear-gradient(135deg, #162179, #2452df 54%, #4f46e5);
    box-shadow: var(--static-shadow-blue);
}

.static-final-cta::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 280px;
    left: 50%;
    top: -120px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(103, 232, 249, 0.36);
    filter: blur(36px);
}

.static-final-cta > * {
    position: relative;
    z-index: 2;
}

.static-final-cta h2 {
    max-width: 820px;
    margin: 0 auto;
    color: #ffffff;
    font-size: clamp(2.1rem, 4vw, 3.7rem);
    line-height: 1.05;
    letter-spacing: -0.06em;
    font-weight: 900;
}

.static-final-cta p {
    max-width: 740px;
    margin: 18px auto 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.05rem;
    line-height: 1.65;
}

/* ------------------ Public Footer ------------------ */

.static-public-footer {
    margin-top: 0;
    padding: 58px clamp(18px, 4vw, 72px) 34px;
    background: var(--static-footer-bg);
    color: var(--static-footer-text);
    border-radius: 0;
    overflow: hidden;
}

.static-public-footer-inner {
    max-width: var(--static-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 46px;
    align-items: start;
}

.static-footer-logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
    color: #ffffff;
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    text-decoration: none;
}

.static-footer-logo span {
    color: var(--static-cyan-300);
}

.static-footer-logo:hover {
    color: #ffffff;
}

.static-footer-brand p {
    max-width: 370px;
    margin: 0;
    color: var(--static-footer-muted);
    font-size: 0.94rem;
    line-height: 1.65;
}

.static-footer-links {
    display: contents;
}

.static-footer-column h4 {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 900;
}

.static-footer-column a {
    display: block;
    margin-bottom: 11px;
    color: var(--static-footer-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.35;
    transition: color 0.2s ease;
}

.static-footer-column a:hover {
    color: #ffffff;
}

.static-public-footer-bottom {
    max-width: var(--static-max);
    margin: 42px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--static-footer-border);
    color: var(--static-footer-muted);
    text-align: center;
    font-size: 0.86rem;
}

/* ------------------ Responsive ------------------ */

@media (max-width: 1180px) {
    .static-public-footer-inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .static-footer-brand {
        grid-column: 1 / -1;
    }

    .static-footer-links {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column: 1 / -1;
        gap: 34px;
    }
}

@media (max-width: 960px) {
    .static-layout,
    .static-split-card {
        grid-template-columns: 1fr;
    }

    .static-sidebar {
        position: static;
    }

    .static-grid-3,
    .static-grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .static-public-links,
    .static-public-actions {
        display: none;
    }

    .static-mobile-toggle {
        display: inline-flex;
    }

    .static-hero h1 {
        font-size: clamp(2.7rem, 13vw, 4.8rem);
    }
}

@media (max-width: 768px) {
    .static-public-nav-inner {
        min-height: 68px;
        width: min(var(--static-max), calc(100% - 1.25rem));
    }

    .static-public-logo-img {
        width: 150px;
        max-width: 60vw;
    }

    .static-mobile-menu {
        width: min(var(--static-max), calc(100% - 1.25rem));
    }

    .static-page {
        padding-left: 16px;
        padding-right: 16px;
    }

    .static-hero {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .static-card,
    .static-sidebar-card,
    .static-mini-card {
        padding: 22px 20px;
        border-radius: 24px;
    }

    .static-support-card {
        flex-direction: column;
    }

    .static-final-cta {
        border-radius: 28px;
    }

    .static-cta-actions,
    .static-card-actions,
    .static-hero-actions {
        flex-direction: column;
    }

    .static-cta-actions .static-btn,
    .static-cta-actions .static-btn-primary,
    .static-card-actions .static-btn,
    .static-card-actions .static-btn-primary,
    .static-hero-actions .static-btn,
    .static-hero-actions .static-btn-primary {
        width: 100%;
    }

    .static-footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 24px;
    }

    .static-public-footer-bottom {
        padding: 20px 0 24px;
    }
}

@media (max-width: 640px) {
    .static-page {
        padding-bottom: 46px;
    }

    .static-hero h1 {
        font-size: 2.48rem;
    }

    .static-hero p {
        font-size: 1rem;
    }

    .static-visual-panel {
        min-height: 240px;
        border-radius: 24px;
    }

    .static-visual-overlay {
        left: 16px;
        right: 16px;
        bottom: 16px;
        padding: 16px;
    }

    .static-btn,
    .static-btn-primary,
    .static-cta {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .static-public-logo-img {
        width: 132px;
    }

    .static-footer-links {
        grid-template-columns: 1fr;
        gap: 24px 20px;
    }

    .static-footer-column h4 {
        font-size: 0.92rem;
    }

    .static-footer-column a {
        font-size: 0.88rem;
    }
}

@media print {
    .static-public-nav,
    .static-public-footer,
    .static-hero,
    .static-final-cta {
        display: none !important;
    }

    body,
    .static-page-shell {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .static-card,
    .static-sidebar-card,
    .static-mini-card {
        box-shadow: none !important;
        border-color: #cccccc !important;
    }
}/* ==========================================================
   Public Logo Visibility Fix
   ========================================================== */

.static-public-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    padding: 7px 11px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(7, 13, 52, 0.14);
}

.static-public-logo-img {
    filter: none !important;
    width: 170px;
    height: auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    .static-public-logo-img {
        width: 145px;
    }
}

@media (max-width: 430px) {
    .static-public-logo-img {
        width: 128px;
    }
}