.elementor-138 .elementor-element.elementor-element-9f1e42d{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-138 .elementor-element.elementor-element-cddb284{margin:75px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-cddb284 */<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
  <style>
    /* Reset and isolate styles to prevent conflicts */
    .arcade-navigation-wrapper * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .arcade-navigation-wrapper { font-family: 'Montserrat', sans-serif; }

    /* Visually hidden but accessible label helper */
    .sr-only {
      position: absolute !important;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .arcade-curve-svg { display: block; width: 100%; height: 80px; }
    .arcade-navigation { background-color: #3a3a3a; padding: 60px 40px; color: white; margin-top: -2px; }
    .arcade-nav-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr; gap: 80px; align-items: start; }
    .arcade-nav-left { display: flex; flex-direction: column; }
    .arcade-nav-left h3 { font-family: 'Bebas Neue', cursive; font-size: 30px; color: #C69B65; letter-spacing: 2px; margin-bottom: 20px; font-weight: bold; white-space: nowrap; }
    .arcade-nav-wrap { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; align-items: start; max-width: 800px; }
    .arcade-nav-section ul { list-style: none; }
    .arcade-nav-section ul li { margin-bottom: 18px; }
    .arcade-nav-section ul li a { color: white; text-decoration: none; font-size: 14px; font-weight: bold; font-family: 'Montserrat', sans-serif; letter-spacing: 1px; text-transform: uppercase; transition: color 0.3s ease; }
    .arcade-nav-section ul li a:hover { color: #C69B65; }
    .arcade-nav-right h3 { font-family: 'Bebas Neue', cursive; font-size: 30px; color: #C69B65; letter-spacing: 2px; margin-bottom: 20px; font-weight: bold; }
    .arcade-email-signup { margin-bottom: 40px; }
    .arcade-email-label { font-size: 14px; margin-bottom: 10px; display: block; }
    .arcade-email-form { display: flex; gap: 10px; }
    .arcade-email-input { flex: 1; padding: 12px 15px; border: none; background-color: white; color: white; font-family: 'Montserrat', sans-serif; font-size: 14px; }
    .arcade-email-input::placeholder { color: #888; }
    .submit-btn { padding: 12px 24px; background-color: #8b6537; color: white; border: none; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 0.3s ease; }
    .submit-btn:hover { background-color: #c49660; }
    .arcade-social-section h3 { margin-bottom: 20px; }
    .arcade-social-links { display: flex; gap: 15px; }
    .arcade-social-links a { color: white; font-size: 20px; transition: color 0.3s ease; }
    .arcade-social-links a:hover { color: #C69B65; }

    /* Footer */
    .arcade-footer { background-color: #2a2a2a; padding: 20px 40px; color: white; font-size: 12px; }
    .arcade-footer-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
    .arcade-footer-left { display: flex; align-items: center; }
    .arcade-footer-right { display: flex; gap: 30px; }
    .arcade-footer-right a { color: white; text-decoration: none; font-size: 12px; font-family: 'Montserrat', sans-serif; transition: color 0.3s ease; }
    .arcade-footer-right a:hover { color: #C69B65; }

    div#mc_embed_signup_scroll {
        display: flex;
        justify-content: space-between;
    }   
    input#mc-embedded-subscribe {
        padding: 21px 14px;
        line-height: 0;
    }
    .mc-field-group {
    min-width: 260px;
}

    /* Responsive */
    @media (max-width: 768px) {
      .arcade-curve-svg { height: 50px; }
      .arcade-navigation { padding: 40px 20px; }
      .arcade-nav-container { grid-template-columns: 1fr; gap: 40px; }
      .arcade-nav-wrap { grid-template-columns: 1fr; gap: 30px; }
      .arcade-email-form { flex-direction: column; }
      .arcade-submit-btn { align-self: flex-start; }
      .arcade-footer { padding: 20px; }
      .arcade-footer-container { flex-direction: column; gap: 15px; text-align: center; }
      .arcade-footer-right { flex-wrap: wrap; justify-content: center; gap: 15px; }
    }
    @media (max-width: 480px) {
      .arcade-curve-svg { height: 40px; }
      .arcade-nav-wrap { grid-template-columns: 1fr; text-align: left; }
      .arcade-social-links { justify-content: flex-start; }
      .arcade-footer-right { flex-direction: column; gap: 10px; }
    }
  </style>
</head>
<body>
  <div class="arcade-navigation-wrapper">
    <!-- Curved SVG Transition -->
    <svg class="arcade-curve-svg" viewBox="0 0 1200 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0,0 L1200,0 L1200,60 Q600,0 0,60 Z" fill="transparent" />
      <path d="M0,60 Q600,0 1200,60 L1200,80 L0,80 Z" fill="#3a3a3a" />
    </svg>

    <!-- Main Navigation Section -->
    <nav class="arcade-navigation">
      <div class="arcade-nav-container">
        <div class="arcade-nav-left">
          <h3>EXPERIENCE THE ARCADE</h3>
          <div class="arcade-nav-wrap">
            <div class="arcade-nav-section">
              <ul>
                <li><a href="/index.php/eat-and-drink/">EAT & DRINK</a></li>
                <li><a href="/index.php/shop/">SHOP</a></li>
                <li><a href="/index.php/our-events/">EVENTS</a></li>
                <li><a href="/index.php/our-history/">HISTORY</a></li>
              </ul>
            </div>
            <div class="arcade-nav-section">
              <ul>
                <li><a href="/index.php/plan-a-visit">PLAN YOUR VISIT</a></li>
                <li><a href="/index.php/live">ARTS LOFTS</a></li>
                <li><a href="/index.php/stay">HILTON GARDEN INN</a></li>
              </ul>
            </div>
            <div class="arcade-nav-section">
              <ul>
                <li><a href="https://www.arcadedaytonevents.com/">VENUE RENTAL</a></li>
                <li><a href="/index.php/faqs/">FAQs</a></li>
                <li><a href="/index.php/plan-a-visit#contact-form">CONTACT US</a></li>
              </ul>
            </div>
          </div>
        </div>

        <div class="arcade-nav-right">
          <div class="arcade-email-signup">
            <h3>STAY INFORMED</h3>

            <div id="mc_embed_shell">
              <div id="mc_embed_signup">
                <form action="https://crossstpartners.us10.list-manage.com/subscribe/post?u=39987e91dd66878a94286a49c&amp;id=26cb24322d&amp;f_id=00004ee4f0"
                      method="post"
                      id="mc-embedded-subscribe-form"
                      name="mc-embedded-subscribe-form"
                      class="validate"
                      target="_self"
                      novalidate>
                  <div id="mc_embed_signup_scroll">
                    <div class="mc-field-group">
                      <!-- Accessible, visually hidden label correctly bound to the input -->
                      <label for="mce-EMAIL" class="sr-only">Email Address</label>
                      <input type="email"
                             name="EMAIL"
                             class="required email arcade-email-input"
                             id="mce-EMAIL"
                             required
                             placeholder="Email Address"
                             value="">
                    </div>

                    <div id="mce-responses" class="clear">
                      <div class="response" id="mce-error-response" style="display:none;"></div>
                      <div class="response" id="mce-success-response" style="display:none;"></div>
                    </div>

                    <!-- bot field -->
                    <div aria-hidden="true" style="position:absolute; left:-5000px;">
                      <input type="text" name="b_39987e91dd66878a94286a49c_26cb24322d" tabindex="-1" value="">
                    </div>

                    <div class="clear">
                      <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button submit-btn" value="Subscribe">
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>

          <div class="arcade-social-section">
            <h3>CONNECT WITH US</h3>
            <div class="arcade-social-links">
              <a href="https://www.facebook.com/daytonarcade/" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
              <a href="https://www.instagram.com/arcadedayton/" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
            </div>
          </div>
        </div>
      </div>
    </nav>

    <!-- Footer Section -->
    <footer class="arcade-footer">
      <div class="arcade-footer-container">
        <div class="arcade-footer-left">
          <span>© 2025 The Arcade. All rights reserved.</span>
        </div>
        <div class="arcade-footer-right">
          <a href="/index.php/privacy-policy">Privacy Policy</a>
          <a href="/index.php/terms-of-service">Terms of Service</a>
          <a href="/index.php/photo-video-policy/">Photo / Video Policies</a>
        </div>
      </div>
    </footer>
  </div>
</body>
</html>/* End custom CSS */