/* =========================
   ARC DIGITAL MENU
   FORMAL NAVY + GOLD THEME
   ========================= */
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
html {
    scroll-behavior: smooth;
}
 
body {
    font-family: Arial, Helvetica, sans-serif;
    background: #ffffff;
    color: #12263F;
    min-height: 100vh;
}
 
 
/* =========================
   HERO
   ========================= */
 
.hero {
    position: relative;
    text-align: center;
    padding: 30px 20px 25px;
    background: #ffffff;
}
 
.logo-container {
    margin-bottom: 15px;
}
 
.logo {
    width: 95px;
    height: 95px;
    object-fit: contain;
}
 
/* NOTE: the welcome heading (h1.welcome-title) is styled in ONE place only -
   see "TOP WELCOME HEADER" at the bottom of this file. The old ".hero h1"
   navy-plaque rule that used to live here has been removed: it painted a dark
   navy background (#132b43) behind the heading, which is what produced the
   large navy rectangle whenever the heading text was missing. */
 
.subtitle {
    margin-top: 12px;
    font-size: 13px;
    letter-spacing: 2px;
    color: #435D6B;
    font-weight: bold;
}
 
.gold-line {
    width: 80px;
    height: 3px;
    background: #F4E500;
    margin: 18px auto;
}
 
.welcome {
    color: #435D6B;
    font-size: 14px;
}
 
 
/* =========================
   MAIN CONTAINER
   ========================= */
 
.container {
    width: 92%;
    max-width: 900px;
    margin: auto;
}
 
 
/* =========================
   MAIN CARDS
   ========================= */
 
.main-card {
    display: flex;
    align-items: center;
 
    text-decoration: none;
    color: #12263F;
 
    background: #ffffff;
 
    border: 2px solid #8FC4D8;
 
    border-radius: 8px;
 
    padding: 18px 20px;
 
    margin-bottom: 14px;
 
    box-shadow: 0 2px 6px rgba(18, 38, 63, 0.08);
 
    transition: all 0.25s ease;
}
 
.main-card:hover {
    border-color: #12263F;
    background: #F7FAFC;
    transform: translateY(-2px);
 
    box-shadow: 0 4px 10px rgba(18, 38, 63, 0.12);
}
 
.main-card:active {
    transform: scale(0.98);
}
 
 
/* =========================
   ICON
   ========================= */
 
.icon {
    width: 52px;
    height: 52px;
 
    display: flex;
    align-items: center;
    justify-content: center;
 
    background: #12263F;
    color: #F4E500;
 
    border-radius: 7px;
 
    font-size: 24px;
 
    margin-right: 15px;
}
 
/* =====================================================
   PREMIUM ARC QUICK NAVIGATION
   Glass capsule / navy + gold design
   ===================================================== */
 
.hero-image-container {
    position: relative;
}
 
.quick-nav {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 10;
 
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
 
    max-width: calc(100% - 36px);
    padding: 7px 9px;
 
    background: linear-gradient(
        135deg,
        rgba(8, 18, 30, 0.88),
        rgba(15, 27, 42, 0.72)
    );
 
    border: 1px solid rgba(212, 175, 55, 0.55);
    border-radius: 18px;
 
    box-sizing: border-box;
 
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 0 0 1px rgba(255, 255, 255, 0.035);
 
    backdrop-filter: blur(14px) saturate(135%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
}
 
.quick-nav a {
    position: relative;
 
    display: inline-flex;
    align-items: center;
    justify-content: center;
 
    min-height: 34px;
    padding: 7px 12px;
 
    border: 1px solid transparent;
    border-radius: 11px;
 
    background: transparent;
    color: rgba(255, 255, 255, 0.94);
 
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.35px;
    white-space: nowrap;
 
    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}
 
.quick-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: #d4af37;
    transform: translateX(-50%);
    transition: width 0.25s ease;
}
 
.quick-nav a:hover,
.quick-nav a:focus-visible {
    background: rgba(212, 175, 55, 0.12);
    color: #f5d77a;
    border-color: rgba(212, 175, 55, 0.30);
    outline: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
 
.quick-nav a:hover::after,
.quick-nav a:focus-visible::after {
    width: 24px;
}
 
/* =====================================================
   JOIN ARC - SAME AS OTHER NAV ITEMS
   ===================================================== */
 
.quick-nav .join-arc-nav {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.94);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
 
.quick-nav .join-arc-nav::after {
    display: block;
}
 
.quick-nav .join-arc-nav:hover,
.quick-nav .join-arc-nav:focus-visible {
    color: #f5d77a;
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.30);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
 
 
/* =====================================================
   JOIN ARC MAIN CARD
   ===================================================== */
 
.main-card.join-arc-card {
    border: 2px solid #8FC4D8;
    box-shadow: 0 2px 6px rgba(18, 38, 63, 0.08);
}
 
.main-card.join-arc-card .icon {
    background: #132b43;
    color: #f7e58a;
}
 
.main-card.join-arc-card h2 {
    color: #132b43;
}
 
.main-card.join-arc-card:hover {
    border-color: #12263F;
    background: #F7FAFC;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(18, 38, 63, 0.12);
}
 
.main-card.join-arc-card .arrow {
    color: #12263F;
}
 
 
/* =====================================================
   JOIN ARC - MOBILE
   ===================================================== */
 
@media (max-width: 600px) {
 
    .main-card.join-arc-card {
        width: 100%;
        box-sizing: border-box;
    }
 
    .quick-nav .join-arc-nav {
        flex: 0 0 auto;
    }
}
/* =====================================================
   MOBILE
   ===================================================== */
 
@media (max-width: 700px) {
 
    .quick-nav {
        right: 10px;
        bottom: 10px;
        max-width: calc(100% - 20px);
 
        gap: 2px;
        padding: 5px 6px;
        border-radius: 15px;
 
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
 
    .quick-nav::-webkit-scrollbar {
        display: none;
    }
 
    .quick-nav a {
        flex: 0 0 auto;
        min-height: 32px;
        padding: 7px 10px;
        font-size: 9px;
        border-radius: 9px;
    }
}
 
 
/* =====================================================
   SMALL PHONES
   ===================================================== */
 
@media (max-width: 430px) {
 
    .quick-nav {
        right: 7px;
        bottom: 7px;
        max-width: calc(100% - 14px);
        padding: 4px 5px;
        border-radius: 14px;
    }
 
    .quick-nav a {
        min-height: 30px;
        padding: 6px 8px;
        font-size: 8px;
        border-radius: 8px;
    }
}
/* =========================
   CARD TEXT
   ========================= */
 
.main-card h2 {
    font-size: 17px;
    color: #12263F;
    margin-bottom: 5px;
    font-weight: bold;
}
 
.main-card p {
    font-size: 12px;
    color: #435D6B;
}
 
 
/* =========================
   ARROW
   ========================= */
 
.arrow {
    margin-left: auto;
 
    font-size: 28px;
 
    color: #12263F;
 
    font-weight: bold;
}
 
 
/* =========================
   CONTENT SECTIONS
   ========================= */
 
.content-section {
 
    margin-top: 30px;
 
    background: #ffffff;
 
    border: 2px solid #8FC4D8;
 
    border-radius: 6px;
 
    padding: 0 20px 20px;
 
    box-shadow: 0 2px 7px rgba(18, 38, 63, 0.08);
}
 
 
/* =========================
   SECTION TITLE
   ========================= */
 
.section-title {
 
    text-align: center;
 
    background: #12263F;
 
    color: #E7C47A;
 
    font-size: 20px;
 
    font-weight: bold;
 
    padding: 13px 15px;
 
    margin: 0 -20px 18px;
 
    border-radius: 5px 5px 0 0;
}
 
 
/* =========================
   TIMINGS
   ========================= */
 
.timing-row {
 
    display: flex;
 
    justify-content: space-between;
 
    align-items: center;
 
    gap: 15px;
 
    padding: 13px 5px;
 
    border-bottom: 1px solid #D9E8EE;
 
    font-size: 13px;
}
 
.timing-row:last-child {
    border-bottom: none;
}
 
.timing-row span {
    color: #12263F;
    font-weight: 600;
}
 
.timing-row strong {
    color: #12263F;
    background: #F4E500;
 
    padding: 5px 10px;
 
    border-radius: 4px;
 
    text-align: right;
}
 
 
/* =========================
   UPDATES
   ========================= */
 
.update-box {
 
    background: #D39A9C;
 
    border: 2px solid #8FC4D8;
 
    border-radius: 5px;
 
    padding: 15px;
 
    margin-bottom: 12px;
}
 
.update-box:last-child {
    margin-bottom: 0;
}
 
.update-box h3 {
 
    color: #12263F;
 
    font-size: 15px;
 
    margin-bottom: 7px;
 
    font-weight: bold;
}
 
.update-box p {
 
    color: #12263F;
 
    font-size: 13px;
 
    line-height: 1.5;
}
 
 
/* =========================
   IMPORTANT / HIGHLIGHT BOX
   ========================= */
 
.highlight-box {
 
    background: #435D6B;
 
    color: #ffffff;
 
    border: 3px solid #8FC4D8;
 
    border-radius: 5px;
 
    padding: 20px;
 
    margin-top: 25px;
 
    text-align: center;
 
    box-shadow: 0 2px 6px rgba(18, 38, 63, 0.12);
}
 
.highlight-box h2 {
 
    color: #F4E500;
 
    font-size: 20px;
 
    margin-bottom: 8px;
}
 
.highlight-box strong {
 
    color: #E7C47A;
 
    font-size: 25px;
}
 
 
/* =========================
   NOTICE BOX
   ========================= */
 
.notice-box {
 
    background: #D39A9C;
 
    border: 2px solid #8FC4D8;
 
    border-radius: 5px;
 
    padding: 18px;
 
    margin-top: 20px;
}
 
.notice-box h3 {
 
    background: #12263F;
 
    color: #E7C47A;
 
    padding: 10px;
 
    margin: -18px -18px 14px;
 
    border-radius: 4px 4px 0 0;
 
    font-size: 16px;
 
    text-align: center;
}
 
.notice-box p {
 
    color: #12263F;
 
    font-size: 13px;
 
    line-height: 1.6;
}
 
 
/* =========================
   FEEDBACK
   ========================= */
 
.feedback-section {
 
    text-align: center;
 
    margin-top: 30px;
 
    padding: 28px 20px;
 
    background: #ffffff;
 
    border: 2px solid #8FC4D8;
 
    border-radius: 6px;
 
    box-shadow: 0 2px 7px rgba(18, 38, 63, 0.08);
}
 
.feedback-icon {
    font-size: 35px;
    margin-bottom: 10px;
}
 
.feedback-section h2 {
 
    display: inline-block;
 
    background: #12263F;
 
    color: #F4E500;
 
    font-size: 20px;
 
    padding: 10px 20px;
 
    border-radius: 5px;
 
    margin-bottom: 12px;
}
 
.feedback-section p {
 
    color: #435D6B;
 
    font-size: 13px;
 
    line-height: 1.5;
 
    margin-bottom: 20px;
}
 
 
/* =========================
   FEEDBACK BUTTON
   ========================= */
 
.feedback-button {
 
    display: inline-block;
 
    background: #12263F;
 
    color: #F4E500;
 
    text-decoration: none;
 
    padding: 13px 28px;
 
    border-radius: 5px;
 
    border: 2px solid #12263F;
 
    font-weight: bold;
 
    font-size: 13px;
 
    letter-spacing: 0.5px;
 
    transition: 0.25s;
}
 
.feedback-button:hover {
 
    background: #F4E500;
 
    color: #12263F;
 
    border-color: #F4E500;
 
    transform: translateY(-2px);
}
 
 
/* =========================
   FOOTER
   ========================= */
 
footer {
 
    text-align: center;
 
    padding: 35px 20px;
 
    background: #12263F;
 
    color: #D9E8EE;
 
    font-size: 12px;
 
    line-height: 1.8;
 
    margin-top: 35px;
}
 
footer strong {
    color: #F4E500;
}
 
.copyright {
    color: #9FB1BC;
}
 
 
/* =========================
   MENU / NAVIGATION
   ========================= */
 
.menu-header {
 
    background: #12263F;
 
    color: #F4E500;
 
    padding: 15px 20px;
 
    text-align: center;
 
    font-size: 20px;
 
    font-weight: bold;
 
    border-radius: 5px;
 
    margin-bottom: 18px;
}
 
 
/* =========================
   LIST ITEMS
   ========================= */
 
.menu-item {
 
    display: flex;
 
    justify-content: space-between;
 
    align-items: center;
 
    padding: 12px 5px;
 
    border-bottom: 1px solid #D9E8EE;
 
    color: #12263F;
 
    font-size: 14px;
}
 
.menu-item:last-child {
    border-bottom: none;
}
 
.menu-item .price {
 
    color: #12263F;
 
    background: #F4E500;
 
    padding: 5px 9px;
 
    border-radius: 4px;
 
    font-weight: bold;
}
 
 
/* =========================
   TABLE
   ========================= */
 
table {
 
    width: 100%;
 
    border-collapse: collapse;
 
    background: #ffffff;
 
    color: #12263F;
 
    font-size: 13px;
}
 
th {
 
    background: #12263F;
 
    color: #F4E500;
 
    padding: 12px;
 
    text-align: center;
}
 
td {
 
    padding: 11px;
 
    border: 1px solid #8FC4D8;
 
    text-align: center;
}
 
tr:nth-child(even) {
    background: #F4F8FA;
}
 
 
/* =========================
   MOBILE
   ========================= */
 
@media (max-width: 600px) {
 
    .hero {
        padding: 20px 12px 20px;
    }
 
    .logo {
        width: 75px;
        height: 75px;
    }
 
    .subtitle {
        font-size: 10px;
        letter-spacing: 1.5px;
    }
 
    .container {
        width: 94%;
    }
 
    .main-card {
        padding: 15px;
    }
 
    .icon {
        width: 45px;
        height: 45px;
        font-size: 21px;
        margin-right: 12px;
    }
 
    .main-card h2 {
        font-size: 14px;
    }
 
    .main-card p {
        font-size: 11px;
    }
 
    .arrow {
        font-size: 24px;
    }
 
    .content-section {
        padding: 0 15px 18px;
    }
 
    .section-title {
        margin-left: -15px;
        margin-right: -15px;
        font-size: 17px;
    }
 
    .timing-row {
        font-size: 12px;
    }
 
    .timing-row strong {
        padding: 4px 7px;
    }
 
    .highlight-box h2 {
        font-size: 17px;
    }
 
    .highlight-box strong {
        font-size: 22px;
    }
}
 
 
/* =====================================================
   ARC HAMBURGER MENU
   ===================================================== */
 
 
/* HAMBURGER CONTAINER */
 
.hamburger-container {
 
    position: absolute;
 
    top: 20px;
 
    right: 20px;
 
    z-index: 1000;
 
}
 
 
/* HAMBURGER BUTTON */
 
.hamburger-button {
 
    width: 48px;
 
    height: 48px;
 
    display: flex;
 
    flex-direction: column;
 
    align-items: center;
 
    justify-content: center;
 
    gap: 6px;
 
    background: rgba(13, 13, 13, 0.92);
 
    border: 1px solid #d4af37;
 
    border-radius: 8px;
 
    cursor: pointer;
 
    padding: 0;
 
    transition: 0.3s;
 
}
 
 
.hamburger-button:hover {
 
    background: #d4af37;
 
}
 
 
/* THREE LINES */
 
.hamburger-button span {
 
    display: block;
 
    width: 23px;
 
    height: 2px;
 
    background: #d4af37;
 
    transition: 0.3s;
 
}
 
 
.hamburger-button:hover span {
 
    background: #111111;
 
}
 
 
/* =========================
   MENU PANEL
   ========================= */
 
.side-menu {
 
    position: absolute;
 
    top: 58px;
 
    right: 0;
 
    width: 285px;
 
    padding: 18px;
 
    background:
 
        linear-gradient(
            145deg,
            #1c1c1c,
            #0c0c0c
        );
 
    border: 1px solid #d4af37;
 
    border-radius: 12px;
 
    box-shadow:
 
        0 15px 35px rgba(0, 0, 0, 0.75),
 
        inset 0 0 20px rgba(212, 175, 55, 0.04);
 
    opacity: 0;
 
    visibility: hidden;
 
    transform: translateY(-10px);
 
    transition:
 
        opacity 0.25s ease,
 
        transform 0.25s ease,
 
        visibility 0.25s;
 
}
 
 
/* MENU OPEN */
 
.side-menu.active {
 
    opacity: 1;
 
    visibility: visible;
 
    transform: translateY(0);
 
}
 
 
/* =========================
   MENU HEADER
   ========================= */
 
.menu-title {
 
    text-align: center;
 
    padding: 5px 5px 12px;
 
}
 
 
.menu-title img {
 
    width: 52px;
 
    height: 52px;
 
    object-fit: contain;
 
    margin-bottom: 5px;
 
}
 
 
.menu-title h3 {
 
    color: #d4af37;
 
    font-size: 18px;
 
    letter-spacing: 2px;
 
    margin: 0;
 
}
 
 
.menu-title span {
 
    display: block;
 
    margin-top: 4px;
 
    color: #888888;
 
    font-size: 8px;
 
    letter-spacing: 1.5px;
 
}
 
 
/* =========================
   DIVIDER
   ========================= */
 
.menu-divider {
 
    height: 1px;
 
    background:
 
        linear-gradient(
            90deg,
            transparent,
            #d4af37,
            transparent
        );
 
    margin: 5px 0 10px;
 
}
 
 
/* =========================
   MENU LINKS
   ========================= */
 
.menu-link {
 
    display: flex;
 
    align-items: center;
 
    gap: 12px;
 
    padding: 12px 10px;
 
    margin: 3px 0;
 
    border-radius: 7px;
 
    color: #eeeeee;
 
    text-decoration: none;
 
    font-family: Arial, Helvetica, sans-serif;
 
    font-size: 12px;
 
    letter-spacing: 0.5px;
 
    transition: 0.25s;
 
}
 
 
.menu-link:hover {
 
    background: rgba(212, 175, 55, 0.12);
 
    color: #d4af37;
 
    padding-left: 15px;
 
}
 
 
/* MENU ICON */
 
.menu-icon {
 
    width: 30px;
 
    height: 30px;
 
    min-width: 30px;
 
    display: flex;
 
    align-items: center;
 
    justify-content: center;
 
    border: 1px solid #6f5b20;
 
    border-radius: 50%;
 
    background: #0b0b0b;
 
    font-size: 14px;
 
}
 
 
/* =========================
   HAMBURGER MOBILE
   ========================= */
 
@media (max-width: 600px) {
 
    .hamburger-container {
 
        top: 15px;
 
        right: 15px;
 
    }
 
 
    .hamburger-button {
 
        width: 43px;
 
        height: 43px;
 
    }
 
 
    .side-menu {
 
        width: 265px;
 
        right: 0;
 
    }
 
 
    .menu-link {
 
        padding: 11px 8px;
 
        font-size: 11px;
 
    }
 
}
 
 
/* =====================================================
   FINAL MOBILE RESPONSIVENESS FIX
   Keeps the desktop design unchanged
   ===================================================== */
 
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
 
img {
    max-width: 100%;
    height: auto;
}
 
/* Prevent flex content from forcing horizontal scrolling */
.main-card > * {
    min-width: 0;
}
 
.main-card p,
.main-card h2,
.timing-row span,
.menu-item span {
    overflow-wrap: anywhere;
}
 
/* Tables remain usable on small screens */
.content-section {
    max-width: 100%;
    overflow: hidden;
}
 
@media (max-width: 600px) {
 
    body {
        font-size: 14px;
    }
 
    .hero {
        width: 100%;
        padding: 18px 10px 18px;
    }
 
    .logo {
        width: 72px;
        height: 72px;
    }
 
    .subtitle {
        font-size: 9px;
        line-height: 1.4;
        letter-spacing: 1px;
        padding: 0 8px;
    }
 
    .welcome {
        font-size: 13px;
        line-height: 1.5;
        padding: 0 5px;
    }
 
    .container {
        width: calc(100% - 20px);
        max-width: none;
    }
 
    .main-card {
        width: 100%;
        padding: 13px 12px;
        margin-bottom: 11px;
    }
 
    .icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        margin-right: 10px;
        font-size: 19px;
    }
 
    .main-card h2 {
        font-size: 14px;
        line-height: 1.3;
    }
 
    .main-card p {
        font-size: 11px;
        line-height: 1.4;
    }
 
    .arrow {
        flex: 0 0 auto;
        margin-left: 8px;
        font-size: 22px;
    }
 
    .content-section {
        width: 100%;
        margin-top: 20px;
        padding: 0 12px 15px;
    }
 
    .section-title {
        margin-left: -12px;
        margin-right: -12px;
        font-size: 16px;
        line-height: 1.3;
        padding: 11px 10px;
    }
 
    .timing-row {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 11px 2px;
        font-size: 11px;
        line-height: 1.4;
    }
 
    .timing-row span {
        flex: 1 1 auto;
        min-width: 0;
    }
 
    .timing-row strong {
        flex: 0 0 auto;
        max-width: 48%;
        padding: 4px 6px;
        font-size: 10px;
        line-height: 1.25;
        text-align: center;
    }
 
    .update-box {
        padding: 12px;
        margin-bottom: 10px;
    }
 
    .update-box h3 {
        font-size: 14px;
        line-height: 1.35;
    }
 
    .update-box p {
        font-size: 12px;
        line-height: 1.5;
    }
 
    .highlight-box {
        padding: 15px 12px;
        margin-top: 18px;
    }
 
    .highlight-box h2 {
        font-size: 16px;
        line-height: 1.3;
    }
 
    .highlight-box strong {
        font-size: 21px;
    }
 
    .notice-box {
        padding: 14px;
        margin-top: 16px;
    }
 
    .notice-box h3 {
        margin: -14px -14px 12px;
        padding: 9px 8px;
        font-size: 14px;
        line-height: 1.3;
    }
 
    .notice-box p {
        font-size: 12px;
        line-height: 1.55;
    }
 
    .feedback-section {
        margin-top: 20px;
        padding: 22px 12px;
    }
 
    .feedback-icon {
        font-size: 30px;
    }
 
    .feedback-section h2 {
        max-width: 100%;
        font-size: 17px;
        padding: 9px 13px;
        line-height: 1.3;
    }
 
    .feedback-section p {
        font-size: 12px;
        line-height: 1.55;
    }
 
    .feedback-button {
        display: block;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        padding: 12px 15px;
        font-size: 12px;
    }
 
    footer {
        padding: 28px 12px;
        margin-top: 25px;
        font-size: 11px;
        line-height: 1.7;
    }
 
    .menu-header {
        width: 100%;
        padding: 12px 10px;
        font-size: 17px;
        line-height: 1.3;
    }
 
    .menu-item {
        gap: 8px;
        padding: 10px 2px;
        font-size: 12px;
        line-height: 1.4;
    }
 
    .menu-item > span:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }
 
    .menu-item .price {
        flex: 0 0 auto;
        padding: 4px 7px;
        font-size: 11px;
        white-space: nowrap;
    }
 
    /* Make wide tables scroll horizontally instead of breaking the page */
    .content-section table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
 
    table {
        min-width: 520px;
        font-size: 11px;
    }
 
    th,
    td {
        padding: 8px 7px;
    }
 
    /* Hamburger menu stays inside the phone viewport */
    .hamburger-container {
        top: 12px;
        right: 12px;
        max-width: calc(100vw - 24px);
    }
 
    .hamburger-button {
        width: 42px;
        height: 42px;
    }
 
    .side-menu {
        width: min(265px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        right: 0;
    }
 
    .menu-link {
        padding: 10px 8px;
        font-size: 11px;
    }
 
    .menu-title h3 {
        font-size: 17px;
    }
}
 
/* Very small phones */
@media (max-width: 380px) {
 
    .logo {
        width: 65px;
        height: 65px;
    }
 
    .container {
        width: calc(100% - 16px);
    }
 
    .main-card {
        padding: 11px 9px;
    }
 
    .icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        margin-right: 8px;
        font-size: 17px;
    }
 
    .main-card h2 {
        font-size: 13px;
    }
 
    .main-card p {
        font-size: 10px;
    }
 
    .arrow {
        font-size: 20px;
    }
 
    .content-section {
        padding-left: 10px;
        padding-right: 10px;
    }
 
    .section-title {
        margin-left: -10px;
        margin-right: -10px;
        font-size: 15px;
    }
}
 
 
/* =====================================================
   FINAL MOBILE WIDTH FIX
   Fixes content appearing on only half of the screen
   Desktop layout remains unchanged
   ===================================================== */
 
.hero-image-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
}
 
.hero-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}
 
@media (max-width: 600px) {
 
    html,
    body {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }
 
    main.container {
        display: block;
        width: calc(100vw - 20px) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
 
    main.container .main-card,
    main.container .content-section,
    main.container .feedback-section {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
 
    main.container .main-card {
        box-sizing: border-box;
    }
 
    main.container .content-section {
        box-sizing: border-box;
    }
 
    main.container .feedback-section {
        box-sizing: border-box;
    }
 
    footer {
        width: 100%;
        box-sizing: border-box;
    }
}
 
@media (max-width: 380px) {
    main.container {
        width: calc(100vw - 16px) !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
    }
}
 
/* NOTE: this file used to contain an "ARC PREMIUM WELCOME TITLE" block that
   printed the heading with .hero h1::before { content: "WELCOME TO" } and
   .hero h1::after { content: "AZADI RECREATIONAL COMPLEX" }. Because the text
   came from CSS, adding the same words to the <h1> in index.html made the
   browser show both copies. The heading text now lives in the HTML only, and
   all of its styling lives in the "TOP WELCOME HEADER" block at the bottom of
   this file. */
 
 
/* =====================================================================
   ABOUT US — PREMIUM REDESIGN (only this section changed)
   Serif heading + gold dot-divider, gold accent rule on the copy side,
   frosted-glass contact card on the other. Everything above this block
   is untouched.
   ===================================================================== */
 
.about-section {
    margin-top: 60px;
    padding: 0;
}
 
.about-title {
    text-align: center;
    background: #12263F;
    color: #E7C47A;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 13px 15px;
    border-radius: 5px 5px 0 0;
    margin-bottom: 18px;
}
 
.about-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: stretch;
}
 
.about-content {
    border-left: 2px solid #c9a227;
    padding: 4px 0 4px 26px;
}
 
.about-content h3 {
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: 700;
    color: #12263F;
    margin-bottom: 14px;
}
 
.about-content p {
    font-family: "Jost", Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #5b6b78;
    line-height: 1.75;
    margin-bottom: 14px;
}
 
.about-content .lede {
    font-size: 15px;
    font-weight: 500;
    color: #12263F;
}
 
.contact-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(60, 74, 92, 0.85);
    border: 1px solid rgba(201, 162, 39, 0.6);
    border-radius: 10px;
    padding: 30px 28px;
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 20px 46px rgba(8, 20, 34, 0.28);
}
 
.contact-box h3 {
    font-family: "Jost", Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #f1d41c;
    margin-bottom: 18px;
    text-align: center;
}
 
.contact-box .contact-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(232, 212, 136, 0.2);
    font-family: "Jost", Arial, Helvetica, sans-serif;
    font-size: 13px;
}
 
.contact-box .contact-row:last-child {
    border-bottom: none;
}
 
.contact-label {
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #e6c74c;
    white-space: nowrap;
}
 
.contact-box .contact-row a {
    text-decoration: none;
    color: #e7ecef;
    overflow-wrap: anywhere;
    text-align: right;
    transition: color 0.2s ease;
}
 
.contact-box .contact-row a:hover {
    color: #efce63;
}
 
@media (max-width: 900px) {
 
    .about-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}
 
@media (max-width: 600px) {
 
    .about-section {
        margin-top: 44px;
    }
 
    .about-title {
        font-size: 17px;
        padding: 11px 10px;
    }
 
    .about-content {
        padding-left: 18px;
    }
 
    .about-content h3 {
        font-size: 19px;
    }
 
    .contact-box {
        padding: 24px 20px;
    }
}

/* JOIN ARC navigation emphasis */
        .join-arc-nav {
            font-weight: 800;
        }

        .join-arc-card {
            border-color: #c9a227;
        }

        .join-arc-card .icon {
            background: #132b43;
            color: #f7e58a;
        }

        .join-arc-card h2 {
            color: #132b43;
        }

        /* =====================================================
           TOP WELCOME HEADER - MATCHES THE ARC COVER DESIGN
           ===================================================== */
        .arc-top-header {
            width: 100%;
            min-height: 200px;
            display: grid;
            grid-template-columns: 155px minmax(0, 1fr) 60px;
            align-items: center;
            box-sizing: border-box;
            padding: 18px 24px 12px 24px;
            background: #fff;
            position: relative;
            z-index: 5;
        }

        .arc-top-header .logo-container {
            width: 135px;
            height: 135px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
        }

        .arc-top-header .logo {
            width: 130px;
            height: 130px;
            max-width: 100%;
            object-fit: contain;
            display: block;
        }

        /* -------------------------------------------------------------
           WELCOME HEADING - SINGLE SOURCE OF TRUTH

           The heading text is written in index.html:

               <h1 class="welcome-title">
                   <span class="welcome-black">WELCOME TO</span><span
                       class="arc-gradient">AZADI RECREATIONAL COMPLEX</span>
               </h1>

           Nothing below uses content: "..." , so the heading can never be
           rendered twice. These rules only style what the HTML already says.
           ------------------------------------------------------------- */
        .arc-top-header .welcome-title {
            position: relative;
            z-index: 1;
            margin: 0;
            padding: 0;
            max-width: 1200px;
            text-align: center;
            text-transform: none;
            font-family: Arial, Helvetica, sans-serif;
            font-size: clamp(38px, 5vw, 72px);
            line-height: 1.02;
            font-weight: 500;
            letter-spacing: -2px;
            color: #000;
            background: none;
            text-shadow: none;
        }

        /* "WELCOME TO" - solid black.
           margin-right replaces the gap the old ::before used to create. */
        .arc-top-header .welcome-title .welcome-black {
            color: #020202;
            font-weight: 600;
            margin-right: 12px;
        }

        /* "AZADI RECREATIONAL COMPLEX" - animated ARC gradient.
           Same gradient, size and animation the old ::after used. */
        .arc-top-header .welcome-title .arc-gradient {
            font-weight: 600;

            background: linear-gradient(
                90deg,
                #4f9fe8 0%,
                #48bde9 20%,
                #42d7c7 40%,
                #42d889 60%,
                #42bfcf 80%,
                #4f9fe8 100%
            );

            background-size: 300% 100%;

            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;

            animation: arcWelcomeGradient 7s ease-in-out infinite;
        }

        /* Smooth left-to-right premium colour movement */
        @keyframes arcWelcomeGradient {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        /* Flat colour alternatives kept from the original stylesheet.
           Not used by the current markup - swap .arc-gradient for
           .arc-blue / .arc-green in index.html if the flat look is wanted. */
        .arc-top-header .welcome-title .arc-green {
            color: #49c5a8;
        }

        .arc-top-header .welcome-title .arc-blue {
            color: #259bd2;
        }


        /* HAMBURGER ALIGNED WITH THE WELCOME TITLE */
        .arc-top-header .hamburger-container {
            position: static;
            top: auto;
            right: auto;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            width: 100%;
        }

        .arc-top-header .hamburger-button {
            width: 48px;
            height: 48px;
        }

        /* Hide the old title area below the cover image */
        .hero > .subtitle,
        .hero > .gold-line,
        .hero > .welcome {
            display: none !important;
        }

        @media (max-width: 900px) {
            .arc-top-header {
                grid-template-columns: 105px minmax(0, 1fr) 55px;
                min-height: 145px;
                padding: 12px 14px;
            }

            .arc-top-header .logo-container {
                width: 95px;
                height: 95px;
            }

            .arc-top-header .logo {
                width: 90px;
                height: 90px;
            }

            .arc-top-header .welcome-title {
                font-size: clamp(28px, 6vw, 48px);
                letter-spacing: -1px;
            }
        }

        @media (max-width: 600px) {
            .arc-top-header {
                grid-template-columns: 1fr;
                justify-items: center;
                min-height: 180px;
                padding: 12px 10px 16px;
            }

            .arc-top-header .logo-container {
                width: 72px;
                height: 72px;
            }

            .arc-top-header .logo {
                width: 68px;
                height: 68px;
            }

            .arc-top-header {
                position: relative;
            }

            .arc-top-header .hamburger-container {
                position: absolute;
                top: 14px;
                right: 10px;
                width: auto;
            }

            .arc-top-header .hamburger-button {
                width: 43px;
                height: 43px;
            }

            .arc-top-header .welcome-title {
                margin-top: 8px;
                font-size: clamp(26px, 8vw, 38px);
            }

            /* "WELCOME TO" sits on its own line on phones */
            .arc-top-header .welcome-title .welcome-black {
                display: block;
                margin-right: 0;
                margin-bottom: 4px;
            }

            .arc-top-header .welcome-title .arc-gradient {
                display: block;
            }
        }


        /* =====================================================
   DESKTOP DROPDOWN - FORCE TO FRONT
   ONLY AFFECTS DESKTOP
   ===================================================== */

@media (min-width: 901px) {

    /* Put the entire top header above the hero navigation */
    .arc-top-header {
        position: relative;
        z-index: 9999 !important;
    }

    /* Keep hamburger above everything inside the header */
    .arc-top-header .hamburger-container {
        position: relative;
        z-index: 10000 !important;
    }

    /* Dropdown must be above the horizontal quick navigation */
    .arc-top-header .side-menu {
        position: absolute;
        top: 58px;
        right: 0;
        z-index: 10001 !important;
    }

    /* Keep horizontal navigation underneath dropdown */
    .hero-image-container .quick-nav {
        z-index: 10 !important;
    }

}