Bootstrap 5 Components

<section class="pb-12 pb-md-20 overflow-hidden">
  <div class="container">
    <div class="row mb-n6">
      <div class="d-none d-xl-block col-xl-3 mb-6">
        <div class="rounded-3" style="height: 340px; background: linear-gradient(180deg, rgba(248, 248, 248, 0.00) 0%, #F8F8F8 100%);"></div>
      </div>
      <div class="d-none d-xl-block col-xl-3 mb-6">
        <div class="rounded-3" style="height: 340px; background: linear-gradient(180deg, rgba(248, 248, 248, 0.00) 0%, #F8F8F8 100%);"></div>
      </div>
      <div class="col-6 col-xl-3 mb-6">
        <div class="rounded-3" style="height: 340px; background: linear-gradient(180deg, rgba(248, 248, 248, 0.00) 0%, #F8F8F8 100%);"></div>
      </div>
      <div class="col-6 col-xl-3 mb-6">
        <div class="rounded-3" style="height: 340px; background: linear-gradient(180deg, rgba(248, 248, 248, 0.00) 0%, #F8F8F8 100%);"></div>
      </div>
      <div class="col-6 col-xl-3 order-last order-xl-0 mb-6">
        <div class="bg-light-light bg-opacity-50 rounded-3" style="height: 340px;"></div>
      </div>
      <div class="col-12 col-xl-6 mb-6">
        <div class="d-flex h-100 align-items-center position-relative" style="min-height: 340px;">
          <div class="position-absolute top-0 h-100 start-0 w-100">
            <div class="row position-relative">
              <div class="position-absolute top-0 py-40 start-0 w-100" style="background: linear-gradient(0deg, rgba(248, 248, 248, 0.00) 0%, white 100%);"></div>
              <div class="col-6">

<section class="py-12 py-md-16 py-lg-24">
  <div class="container">
    <div class="mw-md mw-md-none mx-auto">
      <div class="row">
        <div class="col-12 col-md-4 mb-10 mb-md-0">
          <div class="pt-10 border-3 border-top border-primary">
            <h4 class="mb-1">101K+</h4>
            <p class="text-light-dark mb-0">Users studying around the globe</p>
          </div>
        </div>
        <div class="col-12 col-md-4 mb-10 mb-md-0">
          <div class="pt-10 border-3 border-top border-primary">
            <h4 class="mb-1">352K+</h4>
            <p class="text-light-dark mb-0">Registered Users</p>
          </div>
        </div>
        <div class="col-12 col-md-4 mb-10 mb-md-0">
          <div class="pt-10 border-3 border-top border-primary">
            <h4 class="mb-1">94K+</h4>
            <p class="text-light-dark mb-0">Registered Users</p>
          </div>
        </div>
      </div>
    </div>

<section class="overflow-hidden">
  <div class="row">
    <div class="col-lg-6">
      <div class="mw-md py-12 py-md-24 py-lg-40 px-5 mx-auto">
        <h4 class="font-heading mb-4">Sign up</h4>
        <p class="mb-8">
          <span class="text-light-dark">Already have an account?</span>
          <a class="d-inline-block text-dark border-0 fw-bold" href="#">Login</a>
        </p>
        <form action="">
          <label class="form-label" for="">Email</label>
          <input class="form-control mb-4" type="email" placeholder="john@email.com">
          <label class="form-label" for="">Password</label>
          <div class="position-relative">
            <input class="form-control mb-8" type="email" placeholder="Enter password">
            <button class="btn p-0 border-0 position-absolute top-50 end-0 me-4 translate-middle-y">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21.25 9.15C18.94 5.52 15.56 3.43 12 3.43C10.22 3.43 8.49 3.95 6.91 4.92C5.33 5.9 3.91 7.33 2.75 9.15C1.75 10.72 1.75 13.27 2.75 14.84C5.06 18.48 8.44 20.56 12 20.56C13.78 20.56 15.51 20.04 17.09 19.07C18.67 18.09 20.09 16.66 21.25 14.84C22.25 13.28 22.25 10.72 21.25 9.15ZM12 16.04C9.76 16.04 7.96 14.23 7.96 12C7.96 9.77 9.76 7.96 12 7.96C14.24 7.96 16.04 9.77 16.04 12C16.04 14.23 14.24 16.04 12 16.04Z" fill="#A3A3A3"></path>
                <path d="M12.0004 9.14C10.4304 9.14 9.15039 10.42 9.15039 12C9.15039 13.57 10.4304 14.85 12.0004 14.85C13.5704 14.85 14.8604 13.57 14.8604 12C14.8604 10.43 13.5704 9.14 12.0004 9.14Z" fill="#A3A3A3"></path>
              </svg>
            </button>
          </div>
          <button class="btn mb-4 py-3 lh-lg w-100 btn-primary border-primary-dark">Sign Up</button>
          <a class="btn w-100 d-flex flex-wrap btn-outline-light text-dark" href="#">

<section class="py-12 py-md-16 py-lg-24 overflow-hidden">
  <div class="container">
    <div class="mw-5xl mx-auto">
      <div class="mw-xl mx-auto mb-16 text-center">
        <h1 class="font-heading mb-6">Pricing</h1>
        <p class="fs-5 text-light-dark mb-10">Simple pricing that fits for everyone for the price of a cup of coffee. Start for free, no credit card required.</p>
        <div class="d-flex flex-column flex-md-row mb-n4 align-items-center justify-content-center">
          <div class="d-flex me-4 mb-4 align-items-center">
            <span class="fw-bold">Monthly</span>
            <div class="d-inline-flex mx-4 bg-primary rounded-pill" style="padding: 1.5px;">
              <button class="btn bg-transparent border-0 p-0" style="width: 20px; height: 20px;"></button>
              <button class="btn bg-white border-0 p-0" style="width: 20px; height: 20px;"></button>
            </div>
            <span class="fw-bold">Annually</span>
          </div>
          <div class="d-inline-block py-1 px-4 mb-4 bg-primary-light rounded-pill">
            <span class="text-primary-dark small">SAVE 15% with annual billing</span>
          </div>
        </div>
      </div>
      <div class="row mb-16 mb-md-24">
        <div class="col-12 col-md-6 mb-8 mb-md-0">
          <div class="mw-lg mx-auto p-10 h-100 border border-light rounded-3">
            <span class="d-block display-3 fw-bold mb-6">Free</span>

<section class="py-12 py-md-16 py-lg-24 overflow-hidden">
  <div class="mb-12 mb-md-24 pb-8 pb-md-16 border-bottom border-light">
    <div class="container">
      <div class="mw-5xl mx-auto text-center">
        <span class="badge mb-4 bg-primary-light fw-medium text-primary border border-warning">CAREERS</span>
        <h3 class="font-heading">Careers at Solstice</h3>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="mw-5xl mx-auto">
      <h4 class="mb-4">What we’re building</h4>
      <div class="row mb-16">
        <div class="col-12 col-lg-6 mb-6 mb-lg-0">
          <div>
            <p class="text-light-dark mb-0">People are shifting to a new form of collaboration in distributed teams and are wasting too much effort connecting the dots between different work streams to understand the bigger picture. Solstice is building a work hub that gives people a radically simpler way to coordinate work across teams and get context on what’s happening.</p>
          </div>
        </div>
        <div class="col-12 col-lg-6">
          <div>
            <p class="text-light-dark mb-0">By bringing structure, access, and efficiency to teamwork, Solstice makes it easier for businesses to scale their operations. Backed by Atomico, Salesforce Ventures, and Mosaic, we’re on a mission to unlock the collective potential of teams and would love for you to join us!</p>
          </div>
        </div>
      </div>

<section class="py-12 py-md-16 py-lg-24">
  <div class="container">
    <div class="mw-6xl mx-auto">
      <div class="mw-md mw-lg-xl mx-auto mb-20 text-center">
        <h3 class="font-heading mb-4">How it works</h3>
        <p class="text-light-dark mb-0">What steps do I need to take to join?</p>
      </div>
      <div class="row">
        <div class="col-4">
          <div class="position-relative pt-12 pb-40 px-10 h-100 border border-primary rounded-3 overflow-hidden">
            <span class="badge mb-6 pe-3 d-inline-flex align-items-start bg-black text-white lh-base">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.2 1.33331H9.46667C7.33333 1.33331 6 2.66665 6 4.79998V7.49998H8.96L7.58 6.11998C7.48 6.01998 7.43333 5.89331 7.43333 5.76665C7.43333 5.63998 7.48 5.51331 7.58 5.41331C7.77333 5.21998 8.09333 5.21998 8.28667 5.41331L10.52 7.64665C10.7133 7.83998 10.7133 8.15998 10.52 8.35331L8.28667 10.5866C8.09333 10.78 7.77333 10.78 7.58 10.5866C7.38667 10.3933 7.38667 10.0733 7.58 9.87998L8.96 8.49998H6V11.2C6 13.3333 7.33333 14.6666 9.46667 14.6666H11.1933C13.3267 14.6666 14.66 13.3333 14.66 11.2V4.79998C14.6667 2.66665 13.3333 1.33331 11.2 1.33331Z" fill="white"></path>
                <path d="M1.83337 7.5C1.56004 7.5 1.33337 7.72667 1.33337 8C1.33337 8.27333 1.56004 8.5 1.83337 8.5H6.00004V7.5H1.83337Z" fill="white"></path>
              </svg>
              <span class="ms-1">Step I</span>
            </span>
            <h4 class="display-3 fw-bold mb-6">Create Account</h4>
            <p class="text-light-dark">Click "Sign Up," enter your name, email, a secure password, and hit "Create Account."</p>
            <div class="position-absolute bottom-0 end-0 mb-n5 me-4">
              <div class="d-flex justify-content-end gap-4 mb-4">
                <div class="rounded-2 bg-light-light bg-opacity-10" style="width: 64px; height: 64px;"></div>
                <div class="rounded-2 bg-light-light bg-opacity-75" style="width: 64px; height: 64px;"></div>
                <div class="rounded-2 bg-light-light bg-opacity-50" style="width: 64px; height: 64px;"></div>

<section class="py-12 py-md-16 py-lg-24">
  <div class="container position-relative">
    <div class="mw-lg mx-auto mw-lg-none mb-20 mb-md-32">
      <div class="row">
        <div class="col-12 col-lg-6 mb-12 mb-lg-0">
          <div class="mw-lg">
            <div class="d-flex mb-14 justify-content-between">
              <span class="badge d-inline-flex align-items-center bg-primary-light text-primary border border-info">
                <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="4" cy="4" r="3" fill="#FF7100"></circle></svg>
                <span class="ms-1 lh-base">About Us</span>
              </span>
              <span>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="5" stroke="#6F0B45" stroke-width="1.25"></circle><circle cx="8" cy="8" r="7.375" stroke="#FFC96D" stroke-width="1.25"></circle><circle cx="8" cy="8" r="3" fill="#FF7100"></circle></svg>
                <span class="ms-3 small fw-semibold">Meet Solstice</span>
              </span>
            </div>
            <img class="img-fluid d-block rounded-3" src="solstice-assets/images/about/picture-large1.png" alt="">
          </div>
        </div>
        <div class="col-12 col-lg-6">
          <div class="mw-md">
            <h1 class="font-heading mb-10">On a mission to make learning fun</h1>
            <p class="text-light-dark mb-0">We are driven to transform the landscape of learning into a captivating journey of excitement and discovery. Our aim is to infuse every educational experience with the essence of joy, making learning an immersive adventure that fuels curiosity and fosters growth.</p>
          </div>

<section class="py-12 py-md-16 py-lg-24">
  <div class="container">
    <div class="p-14 bg-light-light rounded-3">
      <div class="row">
        <div class="col-lg-4 mb-8 mb-lg-0">
          <div class="d-flex flex-column h-100">
            <h3 class="font-heading mb-auto">FAQ</h3>
            <div class="mw-sm mt-12">
              <p class="display-5 fw-bold mb-0">Still have more questions?</p>
              <p class="display-5 fw-bold mb-6">Talk to our customer happiness team</p>
              <a class="btn btn-sm btn-secondary" href="#">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.3333 1.66669H6.66666C3.33332 1.66669 1.66666 3.33335 1.66666 6.66669V17.5C1.66666 17.9584 2.04166 18.3334 2.49999 18.3334H13.3333C16.6667 18.3334 18.3333 16.6667 18.3333 13.3334V6.66669C18.3333 3.33335 16.6667 1.66669 13.3333 1.66669ZM11.6667 12.7084H5.83332C5.49166 12.7084 5.20832 12.425 5.20832 12.0834C5.20832 11.7417 5.49166 11.4584 5.83332 11.4584H11.6667C12.0083 11.4584 12.2917 11.7417 12.2917 12.0834C12.2917 12.425 12.0083 12.7084 11.6667 12.7084ZM14.1667 8.54169H5.83332C5.49166 8.54169 5.20832 8.25835 5.20832 7.91669C5.20832 7.57502 5.49166 7.29169 5.83332 7.29169H14.1667C14.5083 7.29169 14.7917 7.57502 14.7917 7.91669C14.7917 8.25835 14.5083 8.54169 14.1667 8.54169Z" fill="currentColor"></path>
                </svg>
                <span class="ms-2">Talk to us</span>
              </a>
            </div>
          </div>
        </div>
        <div class="col-lg-8">
          <div class="mw-3xl mx-auto">
            <div class="mb-3 bg-white rounded-3">
              <button class="btn btn-outline-light p-6 d-flex w-100 justify-content-between align-items-center text-start text-black rounded-3">
                <span class="h5 mb-0 me-6">What is Solstice? What is it for?</span>

<section class="py-12 py-md-16 py-lg-24">
  <div class="container">
    <div class="mw-6xl mx-auto">
      <h2 class="font-heading mb-6">Blog</h2>
      <p class="fs-5 text-light-dark mb-24">Latest articles and releases</p>
      <a class="d-block mb-20 p-4 bg-white mb-20 border rounded-3" href="#">
        <div class="rounded-3 overflow-hidden">
          <div class="row">
            <div class="position-relative col-12 col-md-6 p-0 rounded-3 overflow-hidden">
              <div class="position-absolute top-0 start-0">
                <svg width="155" height="154" viewBox="0 0 155 154" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M-34 79.9324V153.361C-34 153.714 -33.7141 154 -33.3615 154H17.62C17.9724 154 18.2585 153.714 18.2585 153.361V94.299C18.2585 55.5087 56.5087 17.2585 95.299 17.2585H154.361C154.714 17.2585 155 16.9724 155 16.62V-34.3615C155 -34.7139 154.714 -35 154.361 -35H80.9324C17.4572 -35 -34 16.4572 -34 79.9324Z" fill="#FF7100"></path>
                </svg>
              </div>
              <div class="position-absolute bottom-0 end-0">
                <svg width="154" height="158" viewBox="0 0 154 158" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M189 74.0676V0.638514C189 0.286054 188.714 0 188.361 0H137.38C137.028 0 136.742 0.286054 136.742 0.638514V59.701C136.742 98.4913 98.4914 136.742 59.701 136.742H0.638514C0.286054 136.742 0 137.028 0 137.38V188.361C0 188.714 0.286054 189 0.638514 189H74.0676C137.543 189 189 137.543 189 74.0676Z" fill="#FF7100"></path>
                </svg>
              </div>
              <img class="img-fluid d-block h-100 w-100" src="solstice-assets/images/blog/picture-large.png" alt="">
            </div>
            <div class="col-12 col-md-6">
              <div class="d-flex flex-col h-100 align-items-center">
                <div class="mw-md mx-auto py-8 px-8">

<section class="py-12 py-md-16 py-lg-24">
  <div class="container">
    <div class="mw-6xl mx-auto">
      <div class="text-center mb-12">
        <a class="d-inline-flex mb-12 align-items-center text-light-dark fw-bold" href="#">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.4167 10H5M5 10L10 5M5 10L10 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="ms-2">Back to Blog</span>
        </a>
        <h2 class="font-heading">The Art and Science of Design Development: Crafting Digital Experiences</h2>
      </div>
      <img class="img-fluid d-block mb-12 w-100 rounded-3" src="solstice-assets/images/blog/post-picture.png" alt="">
      <div class="mw-4xl mx-auto">
        <div class="mb-12">
          <div class="d-flex mb-n6 flex-wrap py-5 border-top border-bottom align-items-center justify-content-between">
            <div class="mb-6">
              <div class="d-flex align-items-center">
                <img src="solstice-assets/images/blog/avatar1.png" alt="">
                <div class="ms-4">
                  <span class="d-block fw-semibold">John Doe</span>
                  <span class="text-light-dark fw-medium">Content Writer, Solstice</span>
                </div>
              </div>

<section class="py-12 py-md-16 py-lg-24">
  <div class="container position-relative">
    <div class="mw-xl mx-auto mb-24 text-center">
      <h3 class="font-heading mb-4">Join our events</h3>
      <p class="text-light-dark mb-0">Engage in our events to chat about learning trends and experience our collaborative online learning platform first-hand.</p>
    </div>
    <div class="mw-sm mw-lg-5xl mx-auto">
      <div class="row mb-n8">
        <div class="col-12 col-lg-8 mb-8 mb-lg-16">
          <a class="d-block bg-white border rounded-3 overflow-hidden" href="#">
            <div class="row align-items-center">
              <div class="position-relative col-12 col-lg-6 p-0">
                <div class="position-absolute top-0 start-0">
                  <svg width="154" height="154" viewBox="0 0 154 154" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M-35 79.9324V153.361C-35 153.714 -34.7141 154 -34.3615 154H16.62C16.9724 154 17.2585 153.714 17.2585 153.361V94.299C17.2585 55.5087 55.5087 17.2585 94.299 17.2585H153.361C153.714 17.2585 154 16.9724 154 16.62V-34.3615C154 -34.7139 153.714 -35 153.361 -35H79.9324C16.4572 -35 -35 16.4572 -35 79.9324Z" fill="#FFF2D6"></path>
                  </svg>
                </div>
                <div class="position-absolute bottom-0 end-0">
                  <svg width="152" height="153" viewBox="0 0 152 153" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M189 74.0676V0.638514C189 0.286054 188.714 0 188.361 0H137.38C137.028 0 136.742 0.286054 136.742 0.638514V59.701C136.742 98.4913 98.4914 136.742 59.701 136.742H0.638514C0.286054 136.742 0 137.028 0 137.38V188.361C0 188.714 0.286054 189 0.638514 189H74.0676C137.543 189 189 137.543 189 74.0676Z" fill="#FFF2D6"></path>
                  </svg>
                </div>
                <img class="img-fluid d-block h-100 w-100" src="solstice-assets/images/events/picture1.png" alt="">
              </div>

<section class="py-12 py-md-16 py-lg-24 overflow-hidden">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-6">
        <p class="fs-6 fw-semibold">Backed by leading education companies</p>
      </div>
      <div class="col-12 col-md-6">
        <div class="row">
          <div class="col-6 col-lg-3 mb-6 mb-sm-0">
            <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-black1.png" alt="">
          </div>
          <div class="col-6 col-lg-3 mb-6 mb-sm-0">
            <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-black2.png" alt="">
          </div>
          <div class="col-6 col-lg-3 mb-6 mb-lg-0">
            <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-black3.png" alt="">
          </div>
          <div class="col-6 col-lg-3">
            <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-black4.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>

<section class="py-12 py-md-16 py-lg-24">
  <div class="container">
    <div class="mw-lg mw-lg-6xl mx-auto">
      <div class="row">
        <div class="col-12 col-lg-5 col-xl-6 mb-12 mb-lg-0">
          <div class="mw-sm">
            <h3 class="font-heading mb-4">Contact us</h3>
            <p class="text-light-dark mb-0">Submit your info and we’ll get back to you as soon as possible.</p>
            <div class="my-10">
              <svg width="49" height="3" viewBox="0 0 49 3" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="1" width="12" height="1" rx="0.5" fill="#FFC96D"></rect><circle cx="17.5" cy="1.5" r="1.5" fill="#FFA632"></circle><circle cx="24.5" cy="1.5" r="1.5" fill="#FFA632"></circle><circle cx="31.5" cy="1.5" r="1.5" fill="#FFA632"></circle><rect x="37" y="1" width="12" height="1" rx="0.5" fill="#FFC96D"></rect></svg>
            </div>
            <div class="mb-10">
              <div class="d-flex mb-4 align-items-center">
                <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="36" height="36" rx="10" fill="#FF7100"></rect>
                  <path d="M26.3333 25.7083H9.66666C9.32499 25.7083 9.04166 25.9916 9.04166 26.3333C9.04166 26.675 9.32499 26.9583 9.66666 26.9583H26.3333C26.675 26.9583 26.9583 26.675 26.9583 26.3333C26.9583 25.9916 26.675 25.7083 26.3333 25.7083Z" fill="white"></path>
                  <path d="M22.1667 9.66669H13.8333C11.3333 9.66669 10.5 11.1584 10.5 13V26.3334H25.5V13C25.5 11.1584 24.6667 9.66669 22.1667 9.66669ZM16.3333 22.375H13.8333C13.4917 22.375 13.2083 22.0917 13.2083 21.75C13.2083 21.4084 13.4917 21.125 13.8333 21.125H16.3333C16.675 21.125 16.9583 21.4084 16.9583 21.75C16.9583 22.0917 16.675 22.375 16.3333 22.375ZM16.3333 18.625H13.8333C13.4917 18.625 13.2083 18.3417 13.2083 18C13.2083 17.6584 13.4917 17.375 13.8333 17.375H16.3333C16.675 17.375 16.9583 17.6584 16.9583 18C16.9583 18.3417 16.675 18.625 16.3333 18.625ZM16.3333 14.875H13.8333C13.4917 14.875 13.2083 14.5917 13.2083 14.25C13.2083 13.9084 13.4917 13.625 13.8333 13.625H16.3333C16.675 13.625 16.9583 13.9084 16.9583 14.25C16.9583 14.5917 16.675 14.875 16.3333 14.875ZM22.1667 22.375H19.6667C19.325 22.375 19.0417 22.0917 19.0417 21.75C19.0417 21.4084 19.325 21.125 19.6667 21.125H22.1667C22.5083 21.125 22.7917 21.4084 22.7917 21.75C22.7917 22.0917 22.5083 22.375 22.1667 22.375ZM22.1667 18.625H19.6667C19.325 18.625 19.0417 18.3417 19.0417 18C19.0417 17.6584 19.325 17.375 19.6667 17.375H22.1667C22.5083 17.375 22.7917 17.6584 22.7917 18C22.7917 18.3417 22.5083 18.625 22.1667 18.625ZM22.1667 14.875H19.6667C19.325 14.875 19.0417 14.5917 19.0417 14.25C19.0417 13.9084 19.325 13.625 19.6667 13.625H22.1667C22.5083 13.625 22.7917 13.9084 22.7917 14.25C22.7917 14.5917 22.5083 14.875 22.1667 14.875Z" fill="white"></path>
                </svg>
                <span class="ms-3 display-5 fw-bold">Company HQ</span>
              </div>
              <span class="d-block text-light-dark">4140 Parker Rd. Allentown,</span>
              <span class="text-light-dark">New Mexico 31134</span>
            </div>
            <div class="position-relative mw-xs p-8 border border-light rounded-3">

<section class="overflow-hidden">
  <div class="row align-items-center">
    <div class="col-lg-6">
      <div class="mw-md py-12 py-md-24 py-lg-40 px-5 mx-auto">
        <h4 class="font-heading mb-4">Sign up</h4>
        <p class="mb-8">
          <span class="text-light-dark">Already have an account?</span>
          <a class="d-inline-block text-dark border-0 fw-bold" href="#">Login</a>
        </p>
        <form action="">
          <label class="form-label" for="">Email</label>
          <input class="form-control mb-4" type="email" placeholder="john@email.com">
          <label class="form-label" for="">Password</label>
          <div class="position-relative">
            <input class="form-control mb-8" type="email" placeholder="Enter password">
            <button class="btn p-0 border-0 position-absolute top-50 end-0 me-4 translate-middle-y">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21.25 9.15C18.94 5.52 15.56 3.43 12 3.43C10.22 3.43 8.49 3.95 6.91 4.92C5.33 5.9 3.91 7.33 2.75 9.15C1.75 10.72 1.75 13.27 2.75 14.84C5.06 18.48 8.44 20.56 12 20.56C13.78 20.56 15.51 20.04 17.09 19.07C18.67 18.09 20.09 16.66 21.25 14.84C22.25 13.28 22.25 10.72 21.25 9.15ZM12 16.04C9.76 16.04 7.96 14.23 7.96 12C7.96 9.77 9.76 7.96 12 7.96C14.24 7.96 16.04 9.77 16.04 12C16.04 14.23 14.24 16.04 12 16.04Z" fill="#A3A3A3"></path>
                <path d="M12.0004 9.14C10.4304 9.14 9.15039 10.42 9.15039 12C9.15039 13.57 10.4304 14.85 12.0004 14.85C13.5704 14.85 14.8604 13.57 14.8604 12C14.8604 10.43 13.5704 9.14 12.0004 9.14Z" fill="#A3A3A3"></path>
              </svg>
            </button>
          </div>
          <button class="btn mb-4 py-3 lh-lg w-100 btn-primary border-primary-dark">Sign Up</button>
          <a class="btn w-100 d-flex flex-wrap btn-outline-light text-dark" href="#">

<section class="py-12 pt-lg-24">
  <div class="container">
    <div class="row mb-12 mb-md-20 mb-lg-40">
      <div class="col-lg-2 mb-12 mb-lg-0">
        <a class="d-inline-block" href="#">
          <img src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
        </a>
      </div>
      <div class="col-lg-7 mb-16 mb-lg-0">
        <div class="row">
          <div class="col-6 col-sm-4 mb-10 mb-sm-0">
            <h6 class="mb-6 fw-medium">Platform</h6>
            <ul class="list-unstyled mb-0">
              <li class="mb-6"><a class="btn btn-link text-light-dark p-0" href="#">Features</a></li>
              <li class="mb-6"><a class="btn btn-link text-light-dark p-0" href="#">How it works</a></li>
              <li class="mb-6"><a class="btn btn-link text-light-dark p-0" href="#">Pricing</a></li>
              <li class="mb-6"><a class="btn btn-link text-light-dark p-0" href="#">Features</a></li>
              <li><a class="btn btn-link text-light-dark p-0" href="#">Events</a></li>
            </ul>
          </div>
          <div class="col-6 col-sm-4 mb-10 mb-sm-0">
            <h6 class="mb-6 fw-medium">Company</h6>
            <ul class="list-unstyled mb-0">
              <li class="mb-6"><a class="btn btn-link text-light-dark p-0" href="#">About</a></li>

<section class="py-12 py-md-16 py-lg-24">
  <div class="container">
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="text-center mb-24">
        <span class="badge mb-6 text-primary text-uppercase">Features</span>
        <h3 class="font-heading text-center mb-0">Discover our features</h3>
      </div>
      <div class="row align-items-center">
        <div class="col-lg-6 mb-12 mb-lg-0">
          <div class="mw-md">
            <h4 class="font-heading mb-6">
              <span class="d-block">Study room.</span>
              <span>Personal or group.</span>
            </h4>
            <p class="text-light-dark mb-8">Optimize your study environment with a personalized room, tailored it to accommodate group study sessions.</p>
            <div class="d-inline-block ps-2 py-2 pe-4 mb-10 border border-light-light rounded-1 shadow">
              <div class="d-flex align-items-center">
                <span class="badge d-inline-flex align-items-center bg-secondary-light">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M1.33334 7.99998C1.33334 4.31793 4.31796 1.33331 8.00001 1.33331C11.6821 1.33331 14.6667 4.31793 14.6667 7.99998C14.6667 11.682 11.6821 14.6666 8.00001 14.6666C4.31796 14.6666 1.33334 11.682 1.33334 7.99998ZM10.4684 6.75964C10.5094 6.70497 10.5391 6.64266 10.5557 6.57635C10.5723 6.51005 10.5755 6.4411 10.565 6.37356C10.5546 6.30601 10.5308 6.24123 10.495 6.18302C10.4591 6.12481 10.412 6.07436 10.3564 6.03461C10.3008 5.99487 10.2378 5.96664 10.1712 5.95159C10.1045 5.93654 10.0355 5.93496 9.9682 5.94696C9.90091 5.95896 9.8367 5.98429 9.77935 6.02146C9.72199 6.05863 9.67264 6.10688 9.6342 6.1634L7.42155 9.26083L6.31112 8.15041C6.21391 8.05982 6.08533 8.01051 5.95247 8.01285C5.81962 8.0152 5.69286 8.06902 5.5989 8.16297C5.50494 8.25693 5.45112 8.38369 5.44878 8.51655C5.44643 8.6494 5.49575 8.77798 5.58634 8.87519L7.1248 10.4137C7.17744 10.4663 7.2409 10.5068 7.31077 10.5324C7.38064 10.558 7.45525 10.5681 7.52942 10.562C7.60359 10.5559 7.67554 10.5337 7.74027 10.497C7.805 10.4603 7.86097 10.4099 7.90428 10.3494L10.4684 6.75964Z" fill="#530031"></path>
                  </svg>
                  <span class="ms-1">Tips</span>
                </span>
                <span class="ms-3 small fw-medium">Customize your room to enhance your focus.</span>

<section class="py-12 py-md-16 py-lg-24 overflow-hidden">
  <div class="container mb-24">
    <div class="mw-sm mw-lg-md mx-auto mb-20 text-center">
      <h3 class="font-heading mb-6">Testimonials from Our Users</h3>
      <p class="text-light-dark mb-0">See what they have to say about us</p>
    </div>
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row mb-16">
        <div class="col-12 col-lg-4 mb-12 mb-lg-0">
          <div>
            <div class="p-12 mb-8 h-100 border border-primary rounded-top rounded-end">
              <svg width="30" height="22" viewBox="0 0 30 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.1971 4.75862C10.9375 4.89655 9.11058 5.47127 7.71635 6.48276C6.37019 7.49425 5.57692 8.87356 5.33654 10.6207C5.28846 11.2184 5.28846 11.8621 5.33654 12.5517C5.72115 12 6.20192 11.6092 6.77885 11.3793C7.35577 11.1494 8.05289 11.0345 8.87019 11.0345C10.1683 11.0345 11.2981 11.5172 12.2596 12.4828C13.2212 13.4483 13.7019 14.7126 13.7019 16.2759C13.7019 17.977 13.125 19.3563 11.9712 20.4138C10.8173 21.4713 9.30289 22 7.42788 22C5.07212 22 3.24519 21.1724 1.94712 19.5172C0.649038 17.8161 0 15.5862 0 12.8276C0 9.47126 1.05769 6.57471 3.17308 4.13793C5.33654 1.65517 8.67789 0.275861 13.1971 0V4.75862ZM29.4952 4.75862C27.1875 4.89655 25.3606 5.47127 24.0144 6.48276C22.6683 7.49425 21.875 8.87356 21.6346 10.6207C21.5865 11.0345 21.5625 11.6782 21.5625 12.5517C21.9952 12 22.5 11.6092 23.0769 11.3793C23.6538 11.1494 24.351 11.0345 25.1683 11.0345C26.4663 11.0345 27.5962 11.5172 28.5577 12.4828C29.5192 13.4483 30 14.7126 30 16.2759C30 17.977 29.4231 19.3563 28.2692 20.4138C27.1154 21.4713 25.601 22 23.726 22C21.3221 22 19.4712 21.1724 18.1731 19.5172C16.9231 17.8161 16.2981 15.5862 16.2981 12.8276C16.2981 9.47126 17.3558 6.57471 19.4712 4.13793C21.6346 1.65517 24.976 0.275861 29.4952 0V4.75862Z" fill="#FF7100"></path>
              </svg>
              <h5 class="mt-8 mb-4 display-5 fw-bold">I've been more productive with Solstice</h5>
              <p class="text-dark-light mb-0">“I've been more productive with Solstice and my academic performance is getting better every semester.”</p>
            </div>
            <div class="d-flex align-items-center">
              <img class="img-fluid pt-1 bg-primary-light rounded-pill" src="solstice-assets/images/testimonials/man-avatar1.png" alt="">
              <div class="ms-3">
                <span class="d-block fw-bold">Steven Klein</span>
                <span class="d-block small text-light-dark">Student</span>
              </div>
            </div>

<section class="py-12 py-md-20 overflow-hidden">
  <div class="container">
    <div class="row">
      <div class="col-6 col-lg-3 order-last order-lg-0">
        <div class="mb-6 rounded-3 bg-light-light bg-opacity-50" style="height: 340px;"></div>
        <div class="rounded-3" style="height: 340px; background:linear-gradient(180deg, rgba(248, 248, 248, 0.00) 0%, #F8F8F8 100%);"></div>
      </div>
      <div class="col-lg-6">
        <div class="mw-xl pb-20 pb-lg-0 pt-lg-24 mx-auto text-center">
          <h1 class="font-heading d-none d-lg-inline-block text-primary" style="font-size: 192px;">404</h1>
          <h1 class="font-heading d-inline-block d-lg-none text-primary mb-6" style="font-size: 72px;">404</h1>
          <p class="fs-5 text-light-dark mb-10">The page you are looking for was moved, removed, renamed or might have never existed!</p>
          <a class="btn btn-primary border-primary-dark" href="#">Back to Home</a>
        </div>
      </div>
      <div class="col-6 col-lg-3">
        <div class="mb-6 rounded-3 bg-light-light bg-opacity-50" style="height: 340px;"></div>
        <div class="rounded-3" style="height: 340px; background:linear-gradient(180deg, rgba(248, 248, 248, 0.00) 0%, #F8F8F8 100%);"></div>
      </div>
    </div>
  </div>
</section>

<section>
  <nav class="navbar navbar-expand-lg navbar-light border-light border-bottom">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-primary" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="56" height="56" rx="28" fill="currentColor"></rect>
          <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse position-relative" id="nav01">
        <ul class="navbar-nav position-absolute top-50 start-50 translate-middle">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</a></li>
              <li><a class="dropdown-item" href="#">Option 3</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Community</a></li>

<section class="py-12 py-md-16 py-lg-24">
  <div class="container">
    <div class="mw-md mw-md-none mx-auto">
      <div class="row">
        <div class="col-12 col-md-4 mb-6 mb-md-0">
          <div class="py-6 px-6 px-lg-10 h-100 text-center bg-primary-light rounded-3">
            <h4 class="mb-1 h2 text-primary">101K+</h4>
            <p class="text-dark mb-0">Users studying around the globe</p>
          </div>
        </div>
        <div class="col-12 col-md-4 mb-6 mb-md-0">
          <div class="py-6 px-6 px-lg-10 h-100 text-center bg-primary-light rounded-3">
            <h4 class="mb-1 h2 text-primary">352K+</h4>
            <p class="text-dark mb-0">Registered Users</p>
          </div>
        </div>
        <div class="col-12 col-md-4 mb-6 mb-md-0">
          <div class="py-6 px-6 px-lg-10 h-100 text-center bg-primary-light rounded-3">
            <h4 class="mb-1 h2 text-primary">94K+</h4>
            <p class="text-dark mb-0">Registered Users</p>
          </div>
        </div>
      </div>
    </div>