@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
    --navy: #001247;
    --blue: #0c5ba8;
    --red: #e30613;
    --red2: #b70510;
    --ink: #061027;
    --text: #0a1533;
    --muted: #536174;
    --line: #dce5f2;
    --bg: #f7f9fd;
    --card: #fff;
    --soft: #eef3fb;
    --display: 'DM Serif Display', serif;
    --body: 'Inter', system-ui, sans-serif;
    --max: 1220px;
    --shadow: 0 24px 70px rgba(0, 18, 71, .12);
    --radius: 26px;
    color-scheme: light
}

:root[data-theme=dark] {
    --ink: #f7f9ff;
    --text: #f8fbff;
    --muted: #d7ddea;
    --line: rgba(255, 255, 255, .16);
    --bg: #061025;
    --card: #0c1731;
    --soft: #101d3a;
    --shadow: 0 24px 70px rgba(0, 0, 0, .4);
    color-scheme: dark
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.72;
    overflow-x: hidden
}

body.rtl {
    direction: rtl
}

body.high-contrast {
    --bg: #fff;
    --card: #fff;
    --text: #000;
    --muted: #111;
    --line: #000
}

:root[data-theme=dark] body.high-contrast {
    --bg: #000;
    --card: #000;
    --text: #fff;
    --muted: #fff;
    --line: #fff
}

body.large-text {
    font-size: 118%
}

body.reduce-motion *,
body.reduce-motion *:before,
body.reduce-motion *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important
}

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

button,
input,
select,
textarea {
    font-family: inherit
}

button {
    cursor: pointer;
    border: 0;
    background: none
}

.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 5000;
    background: #fff;
    color: #001247;
    padding: 10px 14px;
    border-radius: 12px;
    transform: translateY(-140%)
}

.skip-link:focus {
    transform: translateY(0)
}

.container {
    max-width: var(--max);
    margin: auto;
    padding: 0 26px
}

.tricolor-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 2000;
    background: linear-gradient(90deg, var(--navy) 33.33%, #fff 33.33%, #fff 66.66%, var(--red) 66.66%)
}

.nav {
    position: fixed;
    top: 4px;
    left: 0;
    right: 0;
    z-index: 1999;
    background: rgba(247, 249, 253, .84);
    backdrop-filter: blur(22px);
    border-bottom: 1px solid var(--line);
    transition: .25s
}

.nav.scrolled {
    box-shadow: 0 16px 40px rgba(0, 18, 71, .08)
}

:root[data-theme=dark] .nav {
    background: rgba(6, 16, 37, .88)
}

/* CHANGED: navbar is full-width so logo can stick to the browser edge
   and the main nav buttons stay centered on the browser. */
.nav .container.nav-inner {
    max-width: none;
    width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    position: relative
}

.nav-inner {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px
}

/* CHANGED: removed negative margin and locked logo to the left edge */
.nav-logo {
    display: flex;
    align-items: center;
    padding-left: 0;
    margin-left: 0;
    gap: 14px;
    min-width: 220px;
    flex-shrink: 0;
    position: relative;
    z-index: 5
}

.logo-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    display: block
}

.logo-sub {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--muted);
    line-height: 1.1;
    font-size: .74rem
}

.nav-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 4
}

.nav-links>a,
.menu-btn {
    font-weight: 850;
    color: var(--text);
    font-size: .94rem;
    padding: 10px 12px;
    border-radius: 999px;
    transition: .2s
}

.nav-links>a:hover,
.menu-btn:hover,
.nav-links>a.active {
    color: var(--blue);
    background: rgba(12, 91, 168, .08)
}

.nav-links>a.active {
    box-shadow: inset 0 0 0 1px rgba(12, 91, 168, .18)
}

.nav-cta {
    position: fixed;
    right: 205px;
    top: 24px;
    background: var(--red) !important;
    color: #fff !important;
    padding: 12px 22px !important;
    border-radius: 999px !important;
    box-shadow: 0 14px 30px rgba(227, 6, 19, .20);
    z-index: 2101
}

.nav-cta:hover {
    background: var(--red2) !important;
    transform: translateY(-1px)
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card)
}

.nav-toggle span {
    width: 23px;
    height: 2px;
    background: var(--text);
    display: block;
    border-radius: 5px
}

.dropdown {
    position: relative
}

.menu-btn {
    display: flex;
    align-items: center;
    gap: 6px
}

.dropdown-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 240px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 10px;
    display: none
}

.dropdown:hover .dropdown-panel,
.dropdown.open .dropdown-panel {
    display: block
}

.dropdown-panel a,
.dropdown-panel button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 800;
    color: var(--text)
}

.dropdown-panel a:hover,
.dropdown-panel button:hover {
    background: var(--soft)
}

.nav-controls {
    position: fixed;
    right: 0;
    top: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2101
}

.lang-switcher {
    display: flex;
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 999px;
    overflow: hidden
}

.lang-switcher button {
    padding: 10px 12px;
    font-weight: 900;
    color: var(--text);
    font-size: .82rem
}

.lang-switcher button.active {
    background: var(--navy);
    color: #fff
}

.theme-toggle {
    width: 48px;
    height: 38px;
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 999px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    color: var(--text)
}

.theme-toggle .toggle-track {
    position: relative;
    width: 26px;
    height: 14px;
    border-radius: 999px;
    background: var(--soft);
    display: block
}

.theme-toggle .toggle-dot {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--blue);
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transition: .25s;
    box-shadow: 0 4px 12px rgba(12, 91, 168, .32)
}

:root[data-theme=dark] .theme-toggle .toggle-dot {
    left: 10px;
    background: #fff
}

.theme-toggle .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0)
}

h1,
h2,
h3 {
    line-height: 1.04;
    color: var(--text)
}

h1,
h2 {
    font-family: var(--display);
    font-weight: 400
}

h1 {
    font-size: clamp(3.1rem, 7vw, 6.6rem)
}

h2 {
    font-size: clamp(2.1rem, 4.6vw, 4.1rem)
}

h3 {
    font-size: 1.22rem;
    font-weight: 900
}

.eyebrow {
    display: inline-block;
    color: var(--red);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .78rem;
    margin-bottom: 16px
}

.lead {
    font-size: 1.18rem;
    color: var(--muted);
    max-width: 760px
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 25px;
    border-radius: 999px;
    font-weight: 900;
    transition: .25s
}

.btn-primary {
    background: var(--red);
    color: #fff;
    box-shadow: 0 16px 36px rgba(227, 6, 19, .2)
}

.btn-secondary {
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--navy)
}

:root[data-theme=dark] .btn-secondary {
    color: #fff
}

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

.btn:hover {
    transform: translateY(-2px)
}

.section {
    padding: 92px 0
}

.section-soft {
    background: var(--soft)
}

.center {
    text-align: center
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 30px
}

.hero-actions.centered {
    justify-content: center
}

.page-hero {
    padding: 154px 0 78px;
    background: linear-gradient(135deg, var(--bg), var(--soft));
    border-bottom: 1px solid var(--line)
}

.page-hero h1 {
    font-size: clamp(2.8rem, 5.6vw, 5rem);
    max-width: 920px
}

.page-hero p {
    margin-top: 18px;
    font-size: 1.12rem;
    color: var(--muted);
    max-width: 820px
}

.home-hero {
    min-height: 100vh;
    padding: 135px 0 78px;
    display: grid;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(rgba(0, 18, 71, .68), rgba(0, 18, 71, .55)), url('../visuals/about-hero.png') center/cover no-repeat
}

.home-hero:after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 150px;
    background: linear-gradient(transparent, var(--bg))
}

.hero-centered {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    max-width: 980px;
    margin: auto
}

.home-hero h1,
.home-hero .lead {
    color: #fff
}

.home-hero .lead {
    margin: 24px auto 0;
    color: rgba(255, 255, 255, .9)
}

.hero-meta {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 32px
}

.hero-pill {
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .24);
    color: #fff;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 900;
    backdrop-filter: blur(10px)
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 34px;
    box-shadow: 0 16px 50px rgba(0, 18, 71, .055);
    transition: transform .25s, box-shadow .25s, border-color .25s
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: rgba(12, 91, 168, .25)
}

.card p,
.muted {
    color: var(--muted)
}

.num {
    color: var(--red);
    font-weight: 900;
    letter-spacing: .16em
}

.split {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 60px;
    align-items: center
}

.image-card {
    border-radius: 32px;
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    background: var(--card)
}

.image-card img {
    width: 100%;
    display: block;
    aspect-ratio: 16/10;
    object-fit: cover
}

.dark-cta {
    background: linear-gradient(135deg, var(--navy), #07133a);
    color: #fff
}

.dark-cta h2,
.dark-cta p {
    color: #fff
}

.cta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px
}

.experience-grid {
    counter-reset: item
}

.experience-card {
    min-height: 245px;
    position: relative;
    overflow: hidden;
    animation: cardIn .55s ease both
}

.experience-card:nth-child(1) {
    animation-delay: .05s
}

.experience-card:nth-child(2) {
    animation-delay: .12s
}

.experience-card:nth-child(3) {
    animation-delay: .19s
}

.experience-card:nth-child(4) {
    animation-delay: .26s
}

.experience-card:before {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(12, 91, 168, .08)
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(18px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.souvenir {
    background: linear-gradient(135deg, #fff, var(--soft));
    border: 2px dashed var(--red);
    border-radius: 28px;
    padding: 30px;
    text-align: center
}

.souvenir strong {
    font-family: var(--display);
    font-size: 2rem;
    color: var(--navy)
}

:root[data-theme=dark] .souvenir {
    background: var(--card)
}

:root[data-theme=dark] .souvenir strong {
    color: #fff
}

.stroll {
    position: relative;
    max-width: 980px;
    margin: 58px auto 0
}

.stroll:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(var(--blue), var(--red));
    border-radius: 999px;
    opacity: .25
}

.stroll-item {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    align-items: center;
    margin: 22px 0
}

.stroll-time {
    text-align: right;
    font-weight: 900;
    color: var(--navy)
}

:root[data-theme=dark] .stroll-time {
    color: #fff
}

.stroll-dot {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--card);
    border: 4px solid var(--blue);
    z-index: 1;
    margin: auto;
    font-weight: 900
}

.stroll-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 12px 40px rgba(0, 18, 71, .06)
}

.stroll-item:nth-child(even) .stroll-card {
    grid-column: 1
}

.stroll-item:nth-child(even) .stroll-time {
    grid-column: 3;
    text-align: left
}

.speak-box {
    margin-top: 34px;
    text-align: center;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap
}

.viewer-layout {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 34px;
    align-items: start
}

.viewer-wrapper {
    position: relative;
    height: 70vh;
    min-height: 540px;
    background: #071024;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: var(--shadow)
}

.viewer-canvas {
    width: 100%;
    height: 100%;
    display: block
}

.viewer-hint,
.viewer-fullscreen-btn {
    position: absolute;
    z-index: 3;
    background: rgba(255, 255, 255, .92);
    color: var(--navy);
    font-weight: 900
}

.viewer-hint {
    top: 20px;
    left: 20px;
    border-radius: 999px;
    padding: 12px 18px
}

.viewer-fullscreen-btn {
    top: 20px;
    right: 20px;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    font-size: 1.2rem
}

.viewer-wrapper:fullscreen {
    border-radius: 0;
    height: 100vh
}

.viewer-loading,
.viewer-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    gap: 14px
}

.viewer-fallback {
    display: none
}

.viewer-fallback.visible {
    display: flex
}

.zone-panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 30px;
    padding: 28px;
    box-shadow: 0 16px 50px rgba(0, 18, 71, .06)
}

.zone-buttons {
    display: grid;
    gap: 12px;
    margin: 22px 0
}

.zone-btn {
    background: var(--card);
    border: 1px solid var(--line);
    padding: 16px;
    border-radius: 17px;
    text-align: left;
    font-weight: 900;
    color: var(--text)
}

.zone-btn.active,
.zone-btn:hover {
    border-color: var(--blue);
    background: rgba(12, 91, 168, .08)
}

.zone-info {
    background: var(--soft);
    border-radius: 22px;
    padding: 24px
}

.architect-grid {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    gap: 56px;
    align-items: center
}

.architect-card {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--shadow)
}

.architect-card img {
    width: 100%;
    display: block;
    aspect-ratio: 16/10;
    object-fit: cover
}

.architect-card span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    color: white;
    background: linear-gradient(transparent, rgba(0, 18, 71, .9));
    font-family: var(--display);
    font-size: 1.6rem
}

.highlight-list {
    display: grid;
    gap: 14px;
    margin-top: 28px
}

.highlight-list div {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 20px
}

.highlight-list strong {
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: .12em
}

:root[data-theme=dark] .highlight-list strong {
    color: #fff
}

.form-shell {
    max-width: 760px;
    margin: auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 30px;
    padding: 38px
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.form-group {
    margin-bottom: 20px
}

.form-label {
    font-weight: 900;
    display: block;
    margin-bottom: 8px
}

.form-input,
.form-select {
    width: 100%;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--text)
}

#countryGroup {
    display: none
}

#countryGroup.visible {
    display: block
}

.footer {
    background: var(--card);
    border-top: 1px solid var(--line);
    padding: 50px 0
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr .8fr;
    gap: 30px
}

.footer-links {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px
}

.footer-links a {
    color: var(--muted);
    font-weight: 800
}

.contact-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    color: var(--muted)
}

.access-panel {
    position: fixed;
    right: 22px;
    bottom: 92px;
    z-index: 2100;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    border-radius: 22px;
    padding: 12px;
    display: none;
    gap: 8px;
    grid-template-columns: 1fr
}

.access-panel.open {
    display: grid
}

.access-panel button {
    padding: 11px 14px;
    border-radius: 14px;
    background: var(--soft);
    font-weight: 850;
    color: var(--text);
    text-align: left
}

.chatbot {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 2200
}

.chatbot-launch {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--blue), var(--navy));
    box-shadow: 0 18px 40px rgba(0, 18, 71, .26);
    color: #fff;
    display: grid;
    place-items: center
}

.chatbot-launch svg {
    width: 27px;
    height: 27px
}

.chatbot-panel {
    position: absolute;
    right: 0;
    bottom: 76px;
    width: min(360px, calc(100vw - 44px));
    height: 460px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 26px;
    box-shadow: var(--shadow);
    display: none;
    overflow: hidden
}

.chatbot.open .chatbot-panel {
    display: flex;
    flex-direction: column
}

.chatbot-head {
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center
}

.chatbot-close {
    font-size: 26px;
    color: var(--text)
}

.chatbot-messages {
    flex: 1;
    padding: 14px;
    overflow: auto;
    display: grid;
    align-content: start;
    gap: 10px
}

.bot-msg,
.user-msg {
    padding: 11px 13px;
    border-radius: 16px;
    max-width: 88%
}

.bot-msg {
    background: var(--soft);
    color: var(--text)
}

.user-msg {
    background: var(--blue);
    color: #fff;
    margin-left: auto
}

.chatbot-form {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--line)
}

.chatbot-form input {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg);
    color: var(--text)
}

.chatbot-form button {
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--red);
    color: #fff;
    font-weight: 900
}

.admin-login {
    max-width: 520px;
    margin: auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 30px;
    padding: 34px
}

.admin-dashboard {
    display: none
}

.admin-dashboard.active {
    display: block
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px
}

.stat-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 24px
}

.stat-card span {
    color: var(--muted);
    font-weight: 800
}

.stat-card strong {
    display: block;
    font-size: 2.4rem;
    color: var(--red)
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden
}

.admin-table th,
.admin-table td {
    padding: 14px;
    border-bottom: 1px solid var(--line);
    text-align: left
}

.fade-up {
    opacity: 0;
    transform: translateY(18px);
    transition: .65s ease
}

.fade-up.in-view {
    opacity: 1;
    transform: translateY(0)
}

@media(max-width:1080px) {
    .nav-logo {
        min-width: auto
    }

    .logo-sub {
        display: none
    }

    .nav-links {
        gap: 4px
    }

    .nav-links>a,
    .menu-btn {
        font-size: .88rem;
        padding: 9px 9px
    }

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

    .viewer-layout,
    .architect-grid,
    .split {
        grid-template-columns: 1fr
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr
    }

    .admin-stats {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:860px) {
    .nav .container.nav-inner {
        padding-right: 18px
    }

    .nav-inner {
        height: 74px
    }

    .nav-toggle {
        display: flex;
        position: relative;
        z-index: 2002
    }

    .nav-links {
        position: fixed;
        top: 79px;
        left: 16px;
        right: 16px;
        transform: none;
        display: none;
        flex-direction: column;
        align-items: stretch;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 24px;
        padding: 16px;
        box-shadow: var(--shadow)
    }

    .nav-links.open {
        display: flex
    }

    .nav-cta,
    .nav-controls {
        position: static
    }

    .nav-links>a,
    .menu-btn,
    .nav-cta {
        width: 100%;
        justify-content: flex-start
    }

    .dropdown-panel {
        position: static;
        width: 100%;
        box-shadow: none;
        margin-top: 8px
    }

    .nav-controls {
        justify-content: space-between
    }

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

    .section {
        padding: 70px 0
    }

    .page-hero {
        padding-top: 130px
    }

    .stroll:before {
        left: 25px
    }

    .stroll-item,
    .stroll-item:nth-child(even) {
        grid-template-columns: 60px 1fr;
        gap: 12px
    }

    .stroll-dot {
        grid-column: 1;
        grid-row: 1/3
    }

    .stroll-time,
    .stroll-item:nth-child(even) .stroll-time {
        grid-column: 2;
        text-align: left
    }

    .stroll-card,
    .stroll-item:nth-child(even) .stroll-card {
        grid-column: 2
    }

    .footer-grid {
        grid-template-columns: 1fr
    }

    .cta-row {
        flex-direction: column;
        align-items: flex-start
    }

    .form-row {
        grid-template-columns: 1fr
    }

    .viewer-wrapper {
        min-height: 420px;
        height: 60vh
    }

    .highlight-list div {
        grid-template-columns: 1fr
    }

    .admin-stats {
        grid-template-columns: 1fr
    }
}

@media(max-width:560px) {
    .container {
        padding: 0 18px
    }

    .nav .container.nav-inner {
        padding-left: 0;
        padding-right: 14px
    }

    h1 {
        font-size: clamp(2.6rem, 16vw, 4.2rem)
    }

    .home-hero {
        padding-top: 120px
    }

    .card {
        padding: 26px
    }

    .hero-meta {
        gap: 8px
    }

    .hero-pill {
        font-size: .85rem
    }

    .grid-4 {
        grid-template-columns: 1fr
    }

    .chatbot-panel {
        height: 420px
    }

    .page-hero h1 {
        font-size: 2.55rem
    }
}
/* ===== FINAL NAVBAR POSITION FIX ===== */

/* Keep the navbar full width */
.nav .container.nav-inner {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative !important;
}

/* Logo stays on the far left */
.nav-logo {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 3005 !important;
}

/* Main nav group stays centered on desktop */
.nav-links {
    position: fixed !important;
    left: 50% !important;
    top: 18px !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    z-index: 3000 !important;
}

.nav-actions {
    position: fixed !important;
    right: 12px !important;
    top: 15px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    z-index: 3010 !important;
}

.nav-actions .nav-cta {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    margin-right: 10px !important;
}

.nav-actions .nav-controls {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Mobile keeps the original dropdown behavior */
@media(max-width:860px) {
    .nav-logo {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        height: auto !important;
    }

    .nav-links {
        position: fixed !important;
        top: 50px !important;
        left: 16px !important;
        right: 16px !important;
        transform: none !important;
        height: auto !important;
        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        background: var(--card) !important;
        border: 1px solid var(--line) !important;
        border-radius: 24px !important;
        padding: 16px !important;
        box-shadow: var(--shadow) !important;
    }

    .nav-links.open {
        display: flex !important;
    }

    .nav-cta,
    .nav-controls {
        position: static !important;
        width: 100% !important;
    }
}

/* Consistent compact premium footer */
.ufe-footer {
    background: linear-gradient(135deg, #001247 0%, #061027 100%);
    color: #ffffff;
    padding: 34px 0 16px;
    border-top: 4px solid var(--red);
}

.ufe-footer-inner {
    display: grid;
    grid-template-columns: minmax(260px, 1.1fr) minmax(360px, 1.4fr) auto;
    gap: 30px;
    align-items: center;
}

.ufe-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-weight: 900;
    letter-spacing: .02em;
}

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

.ufe-footer-logo-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    background: rgba(255, 255, 255, .95);
    border-radius: 14px;
    padding: 6px;
}

.ufe-footer-copy {
    color: rgba(255, 255, 255, .70);
    margin-top: 10px;
    max-width: 430px;
    font-size: .92rem;
    line-height: 1.55;
}

.ufe-footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 18px;
}

.ufe-footer-links a {
    color: rgba(255, 255, 255, .78);
    font-size: .9rem;
    font-weight: 850;
    letter-spacing: .01em;
    transition: .2s ease;
}

.ufe-footer-links a:hover {
    color: #ffffff;
    transform: translateY(-2px);
}

.ufe-footer-social {
    display: flex;
    justify-content: flex-end;
}

.ufe-instagram-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    color: #ffffff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .20);
    transition: .22s ease;
}

.ufe-instagram-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.ufe-instagram-icon:hover {
    background: #ffffff;
    color: var(--blue);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .22);
}

.ufe-footer-bottom {
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, .58);
    font-size: .82rem;
    font-weight: 700;
}

@media (max-width: 1000px) {
    .ufe-footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 22px;
    }

    .ufe-footer-logo {
        justify-content: center;
    }

    .ufe-footer-copy {
        margin-left: auto;
        margin-right: auto;
    }

    .ufe-footer-social {
        justify-content: center;
    }

    .ufe-footer-bottom {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .ufe-footer {
        padding: 28px 0 14px;
    }

    .ufe-footer-links {
        gap: 10px 14px;
    }
}


/* ===== TRUE FINAL FIX: STABLE NAVBAR + ACCESSIBILITY FLOATING TOOL ===== */
@media (min-width: 1041px) {
    .nav .container.nav-inner {
        display: grid !important;
        grid-template-columns: minmax(120px, 260px) minmax(0, 1fr) minmax(315px, max-content) !important;
        align-items: center !important;
        gap: clamp(8px, 1.1vw, 22px) !important;
        width: 100% !important;
        max-width: none !important;
        height: 78px !important;
        margin: 0 !important;
        padding: 0 18px 0 0 !important;
        position: relative !important;
        direction: ltr !important;
    }

    .nav-logo {
        grid-column: 1 !important;
        justify-self: start !important;
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 5 !important;
    }

    .nav-links {
        grid-column: 2 !important;
        position: static !important;
        inset: auto !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
        gap: clamp(3px, .55vw, 10px) !important;
        z-index: 4 !important;
    }

    .nav-links > a,
    .menu-btn {
        white-space: nowrap !important;
        font-size: clamp(.78rem, .78vw, .94rem) !important;
        padding: 9px clamp(8px, .75vw, 12px) !important;
    }

    .nav-actions {
        grid-column: 3 !important;
        justify-self: end !important;
        position: static !important;
        inset: auto !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        min-width: max-content !important;
        z-index: 6 !important;
    }

    .nav-actions .nav-cta,
    .nav-cta {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        margin: 0 !important;
        width: auto !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .nav-actions .nav-controls,
    .nav-controls {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: auto !important;
        flex: 0 0 auto !important;
    }

    body.rtl .nav .container.nav-inner {
        grid-template-columns: minmax(315px, max-content) minmax(0, 1fr) minmax(120px, 260px) !important;
        padding: 0 0 0 18px !important;
        direction: ltr !important;
    }

    body.rtl .nav-actions {
        grid-column: 1 !important;
        justify-self: start !important;
        direction: rtl !important;
    }

    body.rtl .nav-links {
        grid-column: 2 !important;
        direction: rtl !important;
    }

    body.rtl .nav-logo {
        grid-column: 3 !important;
        justify-self: end !important;
        direction: rtl !important;
    }

    body.rtl .dropdown-panel {
        right: auto !important;
        left: 0 !important;
        text-align: right !important;
    }

    body.rtl .dropdown-panel a,
    body.rtl .dropdown-panel button {
        text-align: right !important;
        justify-content: flex-start !important;
    }
}

@media (max-width: 1180px) and (min-width: 1041px) {
    .logo-sub {
        display: none !important;
    }

    .logo-img {
        width: 86px !important;
        height: 86px !important;
    }

    .nav .container.nav-inner {
        grid-template-columns: minmax(88px, 120px) minmax(0, 1fr) minmax(305px, max-content) !important;
    }

    body.rtl .nav .container.nav-inner {
        grid-template-columns: minmax(305px, max-content) minmax(0, 1fr) minmax(88px, 120px) !important;
    }
}

@media (max-width: 1040px) {
    .nav .container.nav-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 78px !important;
        padding: 0 14px 0 0 !important;
        gap: 10px !important;
        direction: ltr !important;
    }

    body.rtl .nav .container.nav-inner {
        padding: 0 0 0 14px !important;
        flex-direction: row-reverse !important;
    }

    .nav-logo {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }

    .logo-sub {
        display: none !important;
    }

    .logo-img {
        width: 76px !important;
        height: 76px !important;
    }

    .nav-toggle {
        display: flex !important;
        flex: 0 0 auto !important;
        z-index: 3002 !important;
    }

    .nav-actions {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        z-index: 3001 !important;
    }

    .nav-actions .nav-cta,
    .nav-cta {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 10px 14px !important;
        white-space: nowrap !important;
    }

    .nav-actions .nav-controls,
    .nav-controls {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        width: auto !important;
    }

    .nav-links {
        position: fixed !important;
        top: 90px !important;
        left: 16px !important;
        right: 16px !important;
        transform: none !important;
        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: auto !important;
        max-height: calc(100vh - 112px) !important;
        overflow: auto !important;
        background: var(--card) !important;
        border: 1px solid var(--line) !important;
        border-radius: 24px !important;
        padding: 16px !important;
        box-shadow: var(--shadow) !important;
        z-index: 3000 !important;
    }

    .nav-links.open {
        display: flex !important;
    }

    .nav-links > a,
    .menu-btn,
    .nav-links .dropdown,
    .dropdown-panel a,
    .dropdown-panel button {
        width: 100% !important;
    }

    .nav-links > a,
    .menu-btn {
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 12px 14px !important;
    }

    body.rtl .nav-links > a,
    body.rtl .menu-btn,
    body.rtl .dropdown-panel a,
    body.rtl .dropdown-panel button {
        text-align: right !important;
        direction: rtl !important;
    }

    .dropdown-panel {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        margin-top: 8px !important;
    }
}

.access-fab {
    position: fixed;
    right: 22px;
    bottom: 164px;
    z-index: 2300;
    width: 58px;
    height: 58px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--red), var(--navy));
    color: #fff;
    box-shadow: 0 18px 42px rgba(0, 18, 71, .28);
    border: 1px solid rgba(255,255,255,.22);
    font-size: 1.35rem;
    font-weight: 900;
}

.access-fab:hover {
    transform: translateY(-2px);
}

body.rtl .access-fab,
body.rtl .access-panel,
body.rtl .chatbot {
    right: auto;
    left: 22px;
}

body.rtl .access-panel button {
    text-align: right;
}

/* =========================================================
   LOCKED FINAL FIX: DESKTOP + ARABIC NAVBAR MIRRORING
   This block intentionally overrides all earlier navbar rules.
   ========================================================= */
@media (min-width: 981px) {
    .nav {
        height: 96px !important;
        overflow: visible !important;
    }

    .nav .container.nav-inner,
    .nav-inner {
        max-width: none !important;
        width: 100% !important;
        height: 96px !important;
        min-height: 96px !important;
        margin: 0 !important;
        padding: 0 24px !important;
        display: grid !important;
        grid-template-columns: minmax(190px, 300px) minmax(520px, 1fr) minmax(360px, 450px) !important;
        align-items: center !important;
        justify-items: stretch !important;
        column-gap: 20px !important;
        position: relative !important;
        direction: ltr !important;
    }

    .nav-logo {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
        align-self: center !important;
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 30 !important;
        direction: ltr !important;
    }

    .nav-logo .logo-img,
    .logo-img {
        width: 88px !important;
        height: 88px !important;
        flex: 0 0 auto !important;
        object-fit: contain !important;
    }

    .nav-logo .logo-sub,
    .logo-sub {
        display: inline-block !important;
        max-width: 150px !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        font-size: .70rem !important;
        line-height: 1.15 !important;
    }

    .nav-links {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: center !important;
        align-self: center !important;
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        gap: clamp(4px, .55vw, 10px) !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        z-index: 25 !important;
        direction: ltr !important;
    }

    .nav-links > a,
    .nav-links .menu-btn,
    .menu-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        text-align: center !important;
        font-size: clamp(.78rem, .78vw, .94rem) !important;
        line-height: 1 !important;
        padding: 10px clamp(8px, .75vw, 13px) !important;
    }

    .nav-actions {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        align-self: center !important;
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 35 !important;
        direction: ltr !important;
    }

    .nav-actions .nav-cta,
    .nav-cta {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
        margin: 0 !important;
        padding: 12px 22px !important;
        white-space: nowrap !important;
        z-index: 36 !important;
    }

    .nav-actions .nav-controls,
    .nav-controls {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .dropdown-panel {
        z-index: 80 !important;
    }

    html[dir="rtl"] .nav .container.nav-inner,
    html[dir="rtl"] .nav-inner,
    body.rtl .nav .container.nav-inner,
    body.rtl .nav-inner {
        grid-template-columns: minmax(360px, 450px) minmax(520px, 1fr) minmax(190px, 300px) !important;
        direction: ltr !important;
    }

    html[dir="rtl"] .nav-logo,
    body.rtl .nav-logo {
        grid-column: 3 !important;
        justify-self: end !important;
        justify-content: flex-start !important;
        direction: rtl !important;
        text-align: right !important;
    }

    html[dir="rtl"] .nav-links,
    body.rtl .nav-links {
        grid-column: 2 !important;
        justify-self: center !important;
        direction: rtl !important;
        text-align: center !important;
    }

    html[dir="rtl"] .nav-links > a,
    html[dir="rtl"] .nav-links .menu-btn,
    html[dir="rtl"] .menu-btn,
    body.rtl .nav-links > a,
    body.rtl .nav-links .menu-btn,
    body.rtl .menu-btn {
        direction: rtl !important;
        text-align: center !important;
    }

    html[dir="rtl"] .nav-actions,
    body.rtl .nav-actions {
        grid-column: 1 !important;
        justify-self: start !important;
        justify-content: flex-start !important;
        direction: rtl !important;
    }

    html[dir="rtl"] .nav-actions .nav-controls,
    html[dir="rtl"] .nav-controls,
    body.rtl .nav-actions .nav-controls,
    body.rtl .nav-controls {
        direction: rtl !important;
    }

    html[dir="rtl"] .dropdown-panel,
    body.rtl .dropdown-panel {
        right: auto !important;
        left: 0 !important;
        direction: rtl !important;
        text-align: right !important;
    }

    html[dir="rtl"] .dropdown-panel a,
    html[dir="rtl"] .dropdown-panel button,
    body.rtl .dropdown-panel a,
    body.rtl .dropdown-panel button {
        direction: rtl !important;
        text-align: right !important;
        justify-content: flex-start !important;
    }
}

@media (min-width: 981px) and (max-width: 1320px) {
    .nav .container.nav-inner,
    .nav-inner {
        grid-template-columns: minmax(88px, 120px) minmax(420px, 1fr) minmax(330px, 390px) !important;
        column-gap: 12px !important;
        padding: 0 14px !important;
    }

    html[dir="rtl"] .nav .container.nav-inner,
    html[dir="rtl"] .nav-inner,
    body.rtl .nav .container.nav-inner,
    body.rtl .nav-inner {
        grid-template-columns: minmax(330px, 390px) minmax(420px, 1fr) minmax(88px, 120px) !important;
    }

    .logo-sub {
        display: none !important;
    }

    .logo-img {
        width: 78px !important;
        height: 78px !important;
    }

    .nav-links > a,
    .nav-links .menu-btn,
    .menu-btn {
        font-size: .78rem !important;
        padding: 9px 8px !important;
    }

    .nav-actions .nav-cta,
    .nav-cta {
        padding: 10px 16px !important;
    }

    .lang-switcher button {
        padding: 9px 10px !important;
    }
}

@media (max-width: 980px) {
    .nav {
        height: 82px !important;
        overflow: visible !important;
    }

    .nav .container.nav-inner,
    .nav-inner {
        max-width: none !important;
        width: 100% !important;
        height: 82px !important;
        min-height: 82px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        position: relative !important;
        direction: ltr !important;
    }

    html[dir="rtl"] .nav .container.nav-inner,
    html[dir="rtl"] .nav-inner,
    body.rtl .nav .container.nav-inner,
    body.rtl .nav-inner {
        flex-direction: row-reverse !important;
        direction: ltr !important;
    }

    .nav-logo {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        direction: ltr !important;
    }

    html[dir="rtl"] .nav-logo,
    body.rtl .nav-logo {
        direction: rtl !important;
    }

    .logo-img {
        width: 70px !important;
        height: 70px !important;
    }

    .logo-sub {
        display: none !important;
    }

    .nav-toggle {
        display: flex !important;
        position: relative !important;
        flex: 0 0 auto !important;
        z-index: 50 !important;
    }

    .nav-actions {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 45 !important;
        direction: ltr !important;
    }

    html[dir="rtl"] .nav-actions,
    body.rtl .nav-actions {
        direction: rtl !important;
    }

    .nav-actions .nav-cta,
    .nav-cta {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        width: auto !important;
        min-width: max-content !important;
        margin: 0 !important;
        padding: 9px 12px !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }

    .nav-actions .nav-controls,
    .nav-controls {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: auto !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .lang-switcher button {
        padding: 8px 9px !important;
        font-size: .72rem !important;
    }

    .theme-toggle {
        width: 44px !important;
        height: 34px !important;
    }

    .nav-links {
        position: fixed !important;
        top: 96px !important;
        left: 16px !important;
        right: 16px !important;
        bottom: auto !important;
        transform: none !important;
        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: calc(100vh - 112px) !important;
        overflow: auto !important;
        background: var(--card) !important;
        border: 1px solid var(--line) !important;
        border-radius: 24px !important;
        padding: 16px !important;
        box-shadow: var(--shadow) !important;
        z-index: 40 !important;
        direction: ltr !important;
    }

    .nav-links.open {
        display: flex !important;
    }

    html[dir="rtl"] .nav-links,
    body.rtl .nav-links {
        direction: rtl !important;
    }

    .nav-links > a,
    .nav-links .menu-btn,
    .menu-btn {
        justify-content: flex-start !important;
        width: 100% !important;
        text-align: left !important;
        padding: 12px 14px !important;
    }

    html[dir="rtl"] .nav-links > a,
    html[dir="rtl"] .nav-links .menu-btn,
    html[dir="rtl"] .menu-btn,
    body.rtl .nav-links > a,
    body.rtl .nav-links .menu-btn,
    body.rtl .menu-btn {
        direction: rtl !important;
        text-align: right !important;
        justify-content: flex-start !important;
    }

    .dropdown-panel {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        margin-top: 8px !important;
    }
}

@media (max-width: 560px) {
    .nav-actions .nav-cta,
    .nav-cta {
        padding: 8px 10px !important;
        font-size: .78rem !important;
    }

    .lang-switcher button {
        padding: 7px 8px !important;
    }

    .theme-toggle {
        width: 40px !important;
    }

    .logo-img {
        width: 62px !important;
        height: 62px !important;
    }
}


/* =========================================================
   FINAL FIX: PERFECTLY CENTERED NAV + ACCESS PANEL + ADMIN KPI DASHBOARD
   ========================================================= */
@media (min-width: 1181px) {
    .nav {
        height: 86px !important;
        overflow: visible !important;
    }

    .nav .container.nav-inner,
    .nav-inner {
        max-width: none !important;
        width: 100% !important;
        height: 86px !important;
        min-height: 86px !important;
        margin: 0 !important;
        padding: 0 34px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: relative !important;
        gap: 0 !important;
        direction: ltr !important;
        overflow: visible !important;
    }

    html[dir="rtl"] .nav .container.nav-inner,
    html[dir="rtl"] .nav-inner,
    body.rtl .nav .container.nav-inner,
    body.rtl .nav-inner {
        flex-direction: row !important;
        direction: ltr !important;
    }

    .nav-logo {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        flex: 0 0 360px !important;
        min-width: 360px !important;
        max-width: 360px !important;
        width: 360px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 20 !important;
        direction: ltr !important;
    }

    .logo-img {
        width: 86px !important;
        height: 86px !important;
        flex: 0 0 auto !important;
    }

    .logo-sub {
        white-space: nowrap !important;
    }

    .nav-links {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: row !important;
        gap: 10px !important;
        width: max-content !important;
        max-width: calc(100vw - 800px) !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 15 !important;
        direction: ltr !important;
        overflow: visible !important;
    }

    html[dir="rtl"] .nav-links,
    body.rtl .nav-links {
        direction: ltr !important;
        flex-direction: row !important;
    }

    .nav-links > a,
    .nav-links .menu-btn,
    .menu-btn {
        width: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        font-size: .94rem !important;
        padding: 10px 13px !important;
        line-height: 1 !important;
    }

    .nav-actions {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 12px !important;
        flex: 0 0 390px !important;
        min-width: 390px !important;
        max-width: 390px !important;
        width: 390px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 20 !important;
        direction: ltr !important;
    }

    html[dir="rtl"] .nav-actions,
    body.rtl .nav-actions {
        direction: ltr !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
    }

    .nav-actions .nav-cta,
    .nav-cta,
    html[dir="rtl"] .nav-actions .nav-cta,
    body.rtl .nav-actions .nav-cta {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 138px !important;
        width: auto !important;
        margin: 0 !important;
        padding: 13px 26px !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        z-index: 21 !important;
        direction: ltr !important;
    }

    .nav-actions .nav-controls,
    .nav-controls,
    html[dir="rtl"] .nav-actions .nav-controls,
    body.rtl .nav-actions .nav-controls {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
        direction: ltr !important;
    }

    .nav-toggle {
        display: none !important;
    }
}

@media (min-width: 1181px) and (max-width: 1420px) {
    .nav .container.nav-inner,
    .nav-inner {
        padding: 0 22px !important;
    }

    .nav-logo {
        flex-basis: 255px !important;
        min-width: 255px !important;
        max-width: 255px !important;
        width: 255px !important;
    }

    .logo-sub {
        display: none !important;
    }

    .nav-actions {
        flex-basis: 330px !important;
        min-width: 330px !important;
        max-width: 330px !important;
        width: 330px !important;
    }

    .nav-links {
        max-width: calc(100vw - 620px) !important;
        gap: 4px !important;
    }

    .nav-links > a,
    .nav-links .menu-btn,
    .menu-btn {
        font-size: .82rem !important;
        padding: 9px 8px !important;
    }

    .nav-actions .nav-cta,
    .nav-cta {
        min-width: 112px !important;
        padding: 12px 18px !important;
    }

    .lang-switcher button {
        padding: 9px 10px !important;
    }
}

@media (max-width: 1180px) {
    .nav .container.nav-inner,
    .nav-inner {
        max-width: none !important;
        width: 100% !important;
        height: 82px !important;
        min-height: 82px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: relative !important;
        direction: ltr !important;
    }

    .nav-logo {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 60 !important;
    }

    .nav-actions {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 60 !important;
        direction: ltr !important;
    }

    .nav-actions .nav-cta,
    .nav-cta,
    .nav-actions .nav-controls,
    .nav-controls {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
    }

    .nav-toggle {
        display: flex !important;
        z-index: 70 !important;
    }

    .nav-links {
        position: fixed !important;
        top: 96px !important;
        left: 16px !important;
        right: 16px !important;
        transform: none !important;
        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: auto !important;
        max-width: none !important;
        background: var(--card) !important;
        border: 1px solid var(--line) !important;
        border-radius: 24px !important;
        padding: 16px !important;
        box-shadow: var(--shadow) !important;
        z-index: 55 !important;
    }

    .nav-links.open {
        display: flex !important;
    }
}

.access-fab {
    right: 22px !important;
    left: auto !important;
    bottom: 160px !important;
    z-index: 2310 !important;
}

.access-panel {
    right: 96px !important;
    left: auto !important;
    bottom: 126px !important;
    width: 258px !important;
    max-width: calc(100vw - 130px) !important;
    z-index: 2305 !important;
    padding: 14px !important;
    border-radius: 24px !important;
    overflow: visible !important;
}

.access-panel button {
    width: 100% !important;
    min-height: 46px !important;
    padding: 12px 16px !important;
    text-align: left !important;
    white-space: normal !important;
    line-height: 1.25 !important;
}

html[dir="rtl"] .access-fab,
body.rtl .access-fab {
    left: 22px !important;
    right: auto !important;
}

html[dir="rtl"] .access-panel,
body.rtl .access-panel {
    left: 96px !important;
    right: auto !important;
}

html[dir="rtl"] .access-panel button,
body.rtl .access-panel button {
    text-align: right !important;
}

@media (max-width: 640px) {
    .access-fab {
        right: 16px !important;
        bottom: 138px !important;
    }

    .access-panel {
        right: 82px !important;
        bottom: 108px !important;
        width: auto !important;
        max-width: none !important;
        left: 16px !important;
    }

    html[dir="rtl"] .access-fab,
    body.rtl .access-fab {
        left: 16px !important;
        right: auto !important;
    }

    html[dir="rtl"] .access-panel,
    body.rtl .access-panel {
        left: 82px !important;
        right: 16px !important;
    }
}

.admin-page-hero {
    background:
        radial-gradient(circle at 12% 20%, rgba(12, 91, 168, .18), transparent 32%),
        radial-gradient(circle at 90% 16%, rgba(227, 6, 19, .12), transparent 28%),
        linear-gradient(135deg, var(--bg), var(--soft)) !important;
}

.admin-section {
    background: linear-gradient(180deg, var(--bg), var(--soft));
}

.admin-pro-shell {
    display: none;
}

.admin-pro-shell.active {
    display: block;
}

.admin-command-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 26px;
    background: linear-gradient(135deg, var(--navy), #071a52 56%, var(--blue));
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 34px;
    padding: 34px;
    color: #fff;
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
}

.admin-command-top::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
}

.admin-command-top h2,
.admin-command-top p {
    color: #fff;
    position: relative;
    z-index: 2;
}

.admin-command-top p {
    opacity: .78;
    max-width: 760px;
    margin-top: 10px;
}

.admin-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    color: #fff;
    font-weight: 900;
    letter-spacing: .12em;
    font-size: .72rem;
    margin-bottom: 14px;
}

.admin-live-pill span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #29d391;
    box-shadow: 0 0 0 6px rgba(41, 211, 145, .14);
}

.admin-command-actions {
    display: grid;
    gap: 12px;
    justify-items: end;
    position: relative;
    z-index: 2;
    min-width: 150px;
}

.admin-command-actions span {
    color: rgba(255,255,255,.72);
    font-weight: 800;
    font-size: .86rem;
}

.admin-export-btn {
    padding: 12px 18px;
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    font-weight: 900;
    box-shadow: 0 14px 34px rgba(0,0,0,.18);
}

.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-top: 22px;
}

.admin-kpi-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: 22px;
    box-shadow: 0 18px 50px rgba(0,18,71,.065);
    position: relative;
    overflow: hidden;
}

.admin-kpi-card::before {
    content: "";
    position: absolute;
    right: -35px;
    top: -35px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(12, 91, 168, .10);
}

.admin-kpi-card:nth-child(even)::before {
    background: rgba(227, 6, 19, .10);
}

.admin-kpi-card span {
    display: block;
    color: var(--muted);
    font-weight: 900;
    font-size: .84rem;
}

.admin-kpi-card strong {
    display: block;
    margin-top: 10px;
    color: var(--text);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1;
    font-weight: 900;
}

.admin-kpi-card small {
    display: block;
    margin-top: 12px;
    color: var(--muted);
    line-height: 1.35;
    font-weight: 700;
}

.admin-chart-grid {
    display: grid;
    grid-template-columns: 1.35fr .85fr;
    gap: 20px;
    margin-top: 22px;
}

.admin-panel,
.admin-table-panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 30px;
    padding: 24px;
    box-shadow: 0 18px 50px rgba(0,18,71,.065);
}

.admin-panel-large {
    min-height: 340px;
}

.admin-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.admin-panel-head h3 {
    margin: 0;
    font-size: 1.08rem;
}

.admin-panel-head p {
    color: var(--muted);
    margin-top: 4px;
    font-size: .92rem;
}

.admin-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(12,91,168,.10);
    color: var(--blue);
    font-size: .72rem;
    font-weight: 900;
    white-space: nowrap;
}

.admin-bars {
    height: 230px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 14px;
    align-items: end;
    padding: 20px 0 0;
}

.admin-bar-item {
    display: grid;
    align-content: end;
    gap: 9px;
    height: 100%;
    text-align: center;
}

.admin-bar-track {
    height: 185px;
    border-radius: 18px;
    background: var(--soft);
    display: flex;
    align-items: end;
    overflow: hidden;
    border: 1px solid var(--line);
}

.admin-bar-fill {
    width: 100%;
    min-height: 8px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(180deg, var(--red), var(--blue));
    box-shadow: 0 -12px 24px rgba(12,91,168,.16);
}

.admin-bar-value {
    color: var(--text);
    font-weight: 900;
    font-size: .88rem;
}

.admin-bar-label {
    color: var(--muted);
    font-weight: 800;
    font-size: .75rem;
}

.admin-horizontal-bars {
    display: grid;
    gap: 14px;
}

.admin-hbar-row {
    display: grid;
    gap: 7px;
}

.admin-hbar-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--text);
    font-weight: 900;
    font-size: .9rem;
}

.admin-hbar-track {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: var(--soft);
    border: 1px solid var(--line);
    overflow: hidden;
}

.admin-hbar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue), var(--red));
}

.admin-funnel {
    display: grid;
    gap: 12px;
    padding-top: 4px;
}

.admin-funnel-step {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.admin-funnel-step::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--w, 20%);
    background: linear-gradient(90deg, rgba(12,91,168,.16), rgba(227,6,19,.10));
}

.admin-funnel-step span,
.admin-funnel-step strong {
    position: relative;
    z-index: 2;
}

.admin-funnel-step span {
    font-weight: 900;
    color: var(--text);
}

.admin-funnel-step small {
    display: block;
    color: var(--muted);
    font-weight: 700;
    margin-top: 3px;
}

.admin-funnel-step strong {
    font-size: 1.28rem;
    color: var(--red);
}

.admin-table-panel {
    margin-top: 22px;
}

.admin-pro-table th {
    background: var(--soft);
    color: var(--text);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-pro-table td {
    font-weight: 700;
}

.admin-status-chip {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(41, 211, 145, .13);
    color: #13845b;
    font-weight: 900;
    font-size: .78rem;
}

:root[data-theme="dark"] .admin-status-chip {
    color: #71f1c1;
}

@media (max-width: 1180px) {
    .admin-kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .admin-chart-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .admin-command-top {
        display: grid;
        padding: 26px;
    }

    .admin-command-actions {
        justify-items: start;
    }

    .admin-kpi-grid {
        grid-template-columns: 1fr;
    }

    .admin-bars {
        gap: 8px;
    }
}

/* UFE Open Day — transparent university identity */
.nav-logo .logo-img,.ufe-footer-logo-img {
 object-fit:contain!important; object-position:left center!important;
 width:190px!important; max-width:min(190px,36vw)!important;
 height:auto!important; max-height:70px!important;
 background:transparent!important; border:0!important; padding:0!important;
}
.ufe-footer-logo-img {max-width:205px!important;width:205px!important}
.ufe-verify-panel { margin:18px 0; padding:18px; border:1px solid #d9dfef; border-radius:14px; background:#f8faff; color:#172554}
.ufe-verify-panel .btn {margin-top:10px}
.ufe-form-status {margin:10px 0;font-size:.91rem;line-height:1.5;min-height:1.3em}
.ufe-form-status.error {color:#b91c1c} .ufe-form-status.ok {color:#136b3b}
.ufe-quiz-otp {background:#101b37;border:1px solid #3c568a;border-radius:12px;padding:18px;margin:16px 0;color:white}
.ufe-quiz-otp input {width:100%;padding:12px;border-radius:8px;border:1px solid #778cb7}


/* UFE logo refinement: preserve official artwork with truly transparent edges. */
.nav-logo .logo-img{
 width:clamp(148px,14vw,200px)!important;
 max-width:200px!important;
 max-height:64px!important;
 height:auto!important;
 object-fit:contain!important;
 object-position:center!important;
 flex-shrink:0;
 display:block;
 box-shadow:none!important;
 filter:none;
}
.nav-logo {gap:12px;min-width:0;align-items:center;}
.ufe-footer-logo-img{
 width:clamp(170px,16vw,235px)!important;
 max-width:235px!important;max-height:86px!important;
 height:auto!important;object-fit:contain!important;
 background:transparent!important;box-shadow:none!important;
 border:0!important;border-radius:0!important;padding:0!important;
}
/* A soft surface, not a rectangular white image background, keeps dark-header
   text legible while retaining the actual logo colours. */
[data-theme="dark"] .nav-logo .logo-img {
 filter:drop-shadow(0 0 8px rgba(235,240,255,.48));
}
@media (max-width:800px){
 .nav-logo .logo-img {width:clamp(128px,31vw,175px)!important;max-height:56px!important}
 .nav-logo .logo-sub {font-size:.62rem;letter-spacing:.035em}
 .nav-logo {gap:7px!important}
}
@media (max-width:440px){
 .nav-logo .logo-sub {display:none}
}
/* The quiz uses dark navy; its original blue letterforms need gentle contrast.
   The gradient fades into the game background rather than exposing a white box. */
.quiz-ufe-brand{
 width:min(285px,80%)!important;
 height:auto!important;
 display:block!important;
 object-fit:contain!important;
 margin:2px auto 14px!important;
 padding:8px 16px!important;
 background:radial-gradient(ellipse at center, rgba(241,245,255,.94) 0%, rgba(229,237,255,.87) 48%, rgba(229,237,255,0) 79%)!important;
 border:0!important;border-radius:0!important;
 box-shadow:none!important;
}

/* Presentation demo: pointer hover, keyboard focus, and touch-friendly More menu */
@media (hover:hover) and (pointer:fine) {
 .dropdown:hover > .dropdown-panel {display:block;}
}
.dropdown-panel {top:100%!important;margin-top:0!important;z-index:2500!important;}
.dropdown-panel:before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;}
.dropdown:focus-within > .dropdown-panel,.dropdown.open > .dropdown-panel{display:block;}
.menu-btn{cursor:pointer;}
.admin-demo-credentials{margin:12px 0 20px;background:var(--soft);border:1px dashed var(--line);padding:16px;border-radius:14px;line-height:1.75;}
.admin-demo-credentials strong{display:block;font-size:1.02rem;}
.admin-demo-credentials code{font-weight:900;color:var(--navy);}
.admin-demo-credentials small{display:block;color:var(--muted);margin-top:5px;}
.admin-sample-switch{display:inline-flex;align-items:center;gap:8px;font-weight:700;cursor:pointer;padding:8px 0;}
.admin-sample-switch input{width:18px;height:18px;accent-color:var(--navy);}

/* Hide the old Open Day subtitle beside the UFE logo */
.nav-logo .logo-sub {
    display: none !important;
}

/* Remove the old Open Day branding beside the university logo */
.nav-logo .logo-sub,
.navbar .logo-sub,
.logo-sub {
    display: none !important;
}