<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- 
    - primary meta tags
  -->
    <title>603 The Coworking Space</title>
    <meta name="title" content="603 The Coworking Space" />
    <!-- 
    - favicon
  -->
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="./assets/favicon/apple-touch-icon.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./assets/favicon/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="./assets/favicon/favicon-16x16.png"
    />
    <link rel="manifest" href="./assets/favicon/site.webmanifest" />

    <!-- 
    - google font link
  -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

    <!-- 
    - custom css link
  -->
    <link rel="stylesheet" href="./assets/css/styles.css" />

    <!-- 
    - preload images
  -->
    <link
      rel="preload"
      as="image"
      href="./assets/images/sunmill-loc_batcheditor_fotor (1).avif"
    />
    <!-- <link rel="preload" as="image" href="./assets/images/sunshine-loc.png">
  <link rel="preload" as="image" href="./assets/images/heroLocation.png"> -->
  </head>
  <link
    href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Forum&display=swap"
    rel="stylesheet"
  />
  <body id="top">
    <!-- 
    - #PRELOADER
  -->

    <div class="preload" data-preaload>
      <div class="circle"></div>
      <p class="text">603</p>
    </div>

    <!-- 
    - #TOP BAR
  -->

    <div class="topbar">
      <div class="container">
        <address class="topbar-item">
          <div class="icon">
            <ion-icon name="location-outline" aria-hidden="true"></ion-icon>
          </div>

          <span class="span">
            Makhija Arcade, 35th Rd, Khar, Khar West, Mumbai, Maharashtra 400052
          </span>
        </address>

        <div class="separator"></div>

        <div class="topbar-item item-2">
          <div class="icon">
            <ion-icon name="time-outline" aria-hidden="true"></ion-icon>
          </div>

          <span class="span">Daily : 8.00 am to 10.00 pm</span>
        </div>

        <a href="tel:+11234567890" class="topbar-item link">
          <div class="icon">
            <ion-icon name="call-outline" aria-hidden="true"></ion-icon>
          </div>

          <span class="span"> +91 9136036603</span>
        </a>

        <div class="separator"></div>

        <a
          href="mailto:	
      sales@603thecoworkingspace.com"
          class="topbar-item link"
        >
          <div class="icon">
            <ion-icon name="mail-outline" aria-hidden="true"></ion-icon>
          </div>

          <span class="span"> sales@603thecoworkingspace.com</span>
        </a>
      </div>
    </div>

    <!-- 
    - #HEADER
  -->

    <header class="header" data-header>
      <div class="container">
        <a href="index.html#" class="logo">
          <img
            src="./assets/images/603logo (1).avif"
            width="160"
            height="50"
            alt="Grilli - Home"
          />
        </a>

        <nav class="navbar" data-navbar>
          <button
            class="close-btn scale-up"
            aria-label="close menu"
            data-nav-toggler
          >
            <ion-icon name="close-outline" aria-hidden="true"></ion-icon>
          </button>

          <a href="index.html#" class="logo">
            <img
              src="./assets/images/603logo (1).avif"
              width="160"
              height="50"
              alt="Grilli - Home"
            />
          </a>

          <ul class="navbar-list">
            <li class="navbar-item">
              <a
                href="index.html#home"
                class="navbar-link hover-underline active"
              >
                <div class="separator"></div>

                <span class="span">Home</span>
              </a>
            </li>

            <li class="navbar-item">
              <a href="blogpost4.html" class="navbar-link hover-underline">
                <div class="separator"></div>
                <span class="span">Spaces</span>
              </a>
            </li>

            <li class="navbar-item">
              <a href="about.html" class="navbar-link hover-underline">
                <div class="separator"></div>
                <span class="span">About Us</span>
              </a>
            </li>

            <li class="navbar-item">
              <a href="index.html#images" class="navbar-link hover-underline">
                <div class="separator"></div>
                <span class="span">Images</span>
              </a>
            </li>

            <li class="navbar-item">
              <a href="blogs.html" class="navbar-link hover-underline">
                <div class="separator"></div>
                <span class="span">Blogs</span>
              </a>
            </li>

            <li class="navbar-item">
              <a href="#" class="navbar-link hover-underline">
                <div class="separator"></div>

                <span class="span">Contact</span>
              </a>
            </li>
          </ul>

          <div class="text-center">
            <p class="headline-1 navbar-title">Visit Us</p>

            <address class="body-4">
              Restaurant St, Delicious City, <br />
              London 9578, UK
            </address>

            <p class="body-4 navbar-text">Open: 9.30 am - 2.30pm</p>

            <a href="mailto:booking@grilli.com" class="body-4 sidebar-link"
              >booking@grilli.com</a
            >

            <div class="separator"></div>

            <p class="contact-label">Booking Request</p>

            <a
              href="tel:+88123123456"
              class="body-1 contact-number hover-underline"
            >
              +88-123-123456
            </a>
          </div>
        </nav>

        <a href="indexLayout.html" class="btn btn-secondary scale-up">
          <span class="text text-1">Make Your Space</span>

          <span class="text text-2" aria-hidden="true">Make Your Space</span>
        </a>

        <button
          class="nav-open-btn scale-up"
          aria-label="open menu"
          data-nav-toggler
        >
          <span class="line line-1"></span>
          <span class="line line-2"></span>
          <span class="line line-3"></span>
        </button>
      </div>
    </header>

    <main>
        <!-- GET IN TOUCH SECTION -->
        <section class="hero text-center space-section">
          <div class="contact-container">
            <form action="https://api.web3forms.com/submit" method="POST" class="contact-left">
                <div class="contact-left-title">
                    <h2>Get in Touch</h2>
                    <hr>
                </div>
                <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
                <input type="text" name="name" placeholder="Your Name" class="contact-inputs" required>
                <input type="email" name="email" placeholder="Your Email" class="contact-inputs" required>
                <textarea name="message" placeholder="Your Message" class="contact-inputs" required></textarea>
                <button type="submit" class="btn btn-secondary scale-up">
                  <span class="text text-1">submit</span>
                  <span class="text text-2" aria-hidden="true">submit</span>
                </button>
            </form>
            <div class="contact-right">
                <img src="assets/main3.png" alt="">
            </div>
        </div>
        </section>
        <style>
          
          /*Contact Page*/
          .contact-container{
              height: 100vh;
              display: flex;
              align-items: center;
              justify-content: space-evenly;
          }
          .contact-left{
              display: flex;
              flex-direction: column;
              align-items: start;
              gap: 20px;
          }
          .contact-left-title h2{
              font-family: 'Forum', cursive;
              font-size: 5rem;
              margin-bottom: 5px;
          }
          .contact-left-title hr{
              border: none;
              width: 120px;
              height: 5px;
              background-color: rgb(247, 177, 14);
              border-radius: 5px;
              margin-bottom: 20px;
          }
          .contact-inputs {
            width: 400px;
            height: 50px;
            border: 2px solid rgb(228, 197, 144);
            padding-left: 20px;
            font-weight: 500;
            color: #666666;
            position: relative;
            z-index: 10;
          }

          .contact-left textarea{
              height: 140px;
              padding-top: 15px;
          }
          .contact-inputs:focus{
              border: 2px solid rgb(247, 177, 14);
          }
          .contact-inputs::placeholder{
              color: #a9a9a9a9;
          }
          .contact-left button img{
              height: 15px;
          }
          .contact-right img{
              width: 500px;
          }
          @media (max-width:800px) {
              .contact-inputs{
                  width: 80vw;
              }
              .contact-right{
                  display: none;
              }
          }

          /*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

.footer-top {
  margin-block-end: 70px;
}

.footer-brand {
  position: relative;
  padding: 50px 40px;
  background: var(--black) url("../images/footer-form-bg.png");
  background-position: center top;
  background-repeat: repeat;
}

.footer-brand::before,
.footer-brand::after {
  top: 0;
  height: 100%;
  background-image: url("../images/footer-form-pattern.svg");
}

.footer-brand::before {
  left: 0;
}

.footer-brand::after {
  right: 0;
}

.footer-brand .logo {
  max-width: max-content;
  margin-inline: auto;
  margin-block-end: 40px;
}

.footer-brand :is(.body-4, .label-1) {
  color: var(--quick-silver);
  line-height: var(--lineHeight-3);
}

.footer-brand .contact-link {
  margin-block: 6px;
  transition: var(--transition-1);
}

.footer-brand .contact-link:is(:hover, :focus-visible) {
  color: var(--gold-crayola);
}

.footer-brand .wrapper {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-block: 40px 25px;
}

.footer-brand .separator {
  animation: rotate360 15s linear infinite;
}

.footer-brand .label-1 {
  margin-block-end: 30px;
}

.footer-brand .label-1 .span {
  display: inline;
  color: var(--white);
}

.footer-brand .icon-wrapper .input-field {
  cursor: text;
}

.footer-brand .btn {
  min-width: 100%;
}

.footer-list {
  display: grid;
  gap: 20px;
  background-color: var(--black-alpha-80);
}

.footer-list-left{
  padding: 15px;
  margin-left: 2rem;
}

.footer-list-right{
  margin-right: 2rem;
  padding: 20px 10px;
}

.footer-link {
  color: #fff;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letterSpacing-4);
  margin-inline: auto;
  transition: var(--transition-1);
  display: flex;
  align-items: center;
}
.footer-link ion-icon {
  margin-right: 8px;
  font-size: 16px
}
.footer-link i {
  margin-right: 8px;
  font-size: 14px
}
.footer-link:is(:hover, :focus-visible) {
  color: var(--gold-crayola);
}

.footer-bottom{
  margin-bottom: -10rem;
}

.copyright {
  color: var(--quick-silver);
  background-color: var(--black-alpha-80);
  text-align: center;
  justify-content: center;
  height: 50px;
  padding-top: 10px;
  line-height: var(--lineHeight-3);
  margin: 0;
}

.copyright .link {
  display: inline;
  color: var(--gold-crayola);
  text-decoration: underline;
}

  .space-section {
    background-image: linear-gradient(
        to right,
        rgba(247, 177, 14, 0.1) 1px,
        transparent 1px
      ),
      linear-gradient(
        to bottom,
        rgba(247, 177, 14, 0.1) 1px,
        transparent 1px
      );
    background-size: 120px 120px;
  }
  .space-container {
    display: grid;
    padding-bottom: 15rem;
  }
  .space-container {
    grid-template-columns: 1fr;
  }
  @media (min-width: 600px) {
    .space-container {
      grid-template-columns: repeat(1, 1fr);
      width: 95vw;
    }
  }

  @media (min-width: 900px) {
    .space-container {
      grid-template-columns: repeat(1, 1fr);
      width: 95vw;
    }
  }
  @media (min-width: 1200px) {
    .space-container {
      grid-template-columns: repeat(2, 1fr);
      padding-bottom: 0;
      width: 88vw;
    }
  }

  .space-canvas-div {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4em;
  }

  .space-canvas {
    width: 100%;
    height: auto;
  }

  .space-canvas-border-div {
    position: absolute;
    height: 100%;
    aspect-ratio: 1;
    border: 0.5em solid hsl(42, 94%, 51%);
    background-image: url("assets/images/footer-form-bg.png");
    border-radius: 20% 10% 20% 10%;
    animation: rotate360 linear 10s infinite;
    z-index: -1;
  }


  .space-canvas-shadow {
    position: absolute;
    width: 100%;
    height: auto;
    top: 2em;
    left: 1em;
    z-index: -1;
    filter: grayscale(100%) brightness(50%) contrast(200%);
  }

  .space-description-div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    min-height: 100%;
    box-sizing: content-box;
    border: 3px double #f7b10e;
  }

  .space-description-heading {
    font-size: 3.5rem;
    line-height: 1.25em;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em;
    font-weight: 900;
    color: hsl(38, 61%, 55%);
    text-shadow: 1px 0px 0px hsl(38, 61%, 50%),
      4px 0px 0px hsl(38, 61%, 45%), 3px 0px 0px hsl(38, 61%, 40%),
      5px 0px 0px hsl(38, 61%, 35%), 5px 0px 0px hsl(38, 61%, 30%),
      6px 0px 0px hsl(38, 61%, 25%);
    background-image: linear-gradient(
      to bottom,
      rgb(54, 54, 54),
      rgba(54, 54, 54, 0.8),
      transparent
    );
    background-size: cover;
  }

  .space-description-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-image: linear-gradient(
        to top,
        rgb(54, 54, 54),
        rgba(54, 54, 54, 0.8),
        rgba(54, 54, 54, 0.6),
        rgba(54, 54, 54, 0.4),
        rgba(54, 54, 54, 0.2),
        transparent
      ),
      url("assets/images/footer-form-bg.png");
  }

  .space-description-div {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .space-description {
    line-height: normal;
    padding-bottom: 2em;
  }
  .card-container {
    display: grid;
  }
  .card-container {
    grid-template-columns: 1fr;
  }
  @media (min-width: 600px) {
    .card-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 900px) {
    .card-container {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 1200px) {
    .card-container {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  .philosophy-section {
    background-color: #2e3033;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .philosophy-container {
    width: 95vw;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .philosophy-heading {
    font-size: 3em;
    font-weight: bold;
    color: hsl(38, 61%, 55%);
    text-shadow: 1px 0px 0px hsl(38, 61%, 50%),
      4px 0px 0px hsl(38, 61%, 45%), 3px 0px 0px hsl(38, 61%, 40%),
      5px 0px 0px hsl(38, 61%, 35%), 5px 0px 0px hsl(38, 61%, 30%),
      6px 0px 0px hsl(38, 61%, 25%);
    line-height: 1.25em;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .curve-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
  }

  .curve-top svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 200px;
    transform: rotateY(180deg);
  }

  .curve-top .shape-fill {
    fill: #161718;
  }

  .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    height: 50vh;
  }

  .card-heading {
    color: hsl(38, 61%, 55%);
    font-size: 2.5rem;
    font-weight: bold;
  }

  .curve-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
    z-index: -1;
  }

  .curve-bottom svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 200px;
    transform: rotateY(180deg);
  }

  .curve-bottom .shape-fill {
    fill: #212121;
  }


#top{
  height: auto;
}

        </style>
        <footer class="footer section has-bg-image text-center fade-in"
        style="background-image: url('./assets/images/fae955e3-de29-4d6b-a41a-85563f86a931.avif')">
        <div class="container">
          <div class="footer-top grid-list">
            <div class="footer-brand has-before has-after">
              <a href="#" class="logo">
                <!-- <img src="./assets/images/603logo (1).avif" width="160" height="50" loading="lazy" alt="grilli home"> -->
                <img src="https://abhiram.sirv.com/609%20Workved/assets/603logo%20(1).avif?format=webp" width="160" height="50" loading="lazy" alt="grilli home">
              </a>
    
              <address class="body-4">
                Makhija Arcade, 35th Rd, Khar, Khar West, Mumbai, Maharashtra 400052
              </address>
    
              <a href="mailto:booking@grilli.com" class="body-4 contact-link">booking@grilli.com</a>
    
              <a href="tel:+88123123456" class="body-4 contact-link">Booking Request : +88-123-123456</a>
    
              <p class="body-4">
                Open : 09:00 am - 01:00 pm
              </p>
    
              <div class="wrapper">
                <div class="separator"></div>
                <div class="separator"></div>
                <div class="separator"></div>
              </div>
    
              <p class="title-1">Get News & Offers</p>
    
              <p class="label-1">
                Subscribe us & Get <span class="span">25% Off.</span>
              </p>
    
              <form action="" class="input-wrapper">
                <div class="icon-wrapper">
                  <ion-icon name="mail-outline" aria-hidden="true"></ion-icon>
    
                  <input type="email" name="email_address" placeholder="Your email" autocomplete="off" class="input-field">
                </div>
    
                <button type="submit" class="btn btn-secondary scale-up">
                  <span class="text text-1">Subscribe</span>
    
                  <span class="text text-2" aria-hidden="true">Subscribe</span>
                </button>
              </form>
    
            </div>
    
            <head>
              <!-- Include Ionic Icons CDN -->
              <script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@6.0.0/dist/ionicons/ionicons.esm.js"></script>
              <script nomodule src="https://cdn.jsdelivr.net/npm/ionicons@6.0.0/dist/ionicons/ionicons.js"></script>
            </head>
            
            <ul class="footer-list">
              <!-- Home Link with Icon -->
              <li>
                <a href="#" class="label-2 footer-link hover-underline">
                  <ion-icon name="home-outline"></ion-icon> Home
                </a>
              </li>
            
              <!-- Contact Link with Icon -->
              <li>
                <a href="#" class="label-2 footer-link hover-underline">
                  <ion-icon name="call-outline"></ion-icon> Contact
                </a>
              </li>
            </ul>
            
            <ul class="footer-list">
              <!-- Facebook Link with Icon -->
              <li>
                <a href="#" class="label-2 footer-link hover-underline">
                  <ion-icon name="logo-facebook"></ion-icon> Facebook
                </a>
              </li>
            
              <!-- Instagram Link with Icon -->
              <li>
                <a href="#" class="label-2 footer-link hover-underline">
                  <ion-icon name="logo-instagram"></ion-icon> Instagram
                </a>
              </li>
            
              <!-- Twitter Link with Icon -->
              <li>
                <a href="#" class="label-2 footer-link hover-underline">
                  <i class="fa-brands fa-twitter"></i>
                  Twitter
                </a>
              </li>
            
              <!-- Youtube Link with Icon -->
              <li>
                <a href="#" class="label-2 footer-link hover-underline">
                  <ion-icon name="logo-youtube"></ion-icon>Youtube
                </a>
              </li>
            
              <!-- Google Map Link with Icon -->
              <li>
                <a href="#" class="label-2 footer-link hover-underline">
                  <ion-icon name="location-outline"></ion-icon> Google Map
                </a>
              </li>
            </ul>
    
          </div>
    
          <div class="footer-bottom">
    
            <p class="copyright">
              &copy; 2024 . All Rights Reserved | Crafted by <a href="603thecoworkingspace.com" target="_blank"
                class="link">603 The Coworking Space</a>
            </p>
    
          </div>
    
        </div>
      </footer>
    
    </main>


    <!-- 
    - #BACK TO TOP
  -->

    <a
      href="#top"
      class="back-top-btn active"
      aria-label="back to top"
      data-back-top-btn
    >
      <ion-icon name="chevron-up" aria-hidden="true"></ion-icon>
    </a>

    <!-- 
    - custom js link
  -->
    <script src="./assets/js/script.js"></script>

    <!-- 
    - ionicon link
  -->
    <script
      type="module"
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
    ></script>
  </body>
</html>