Bulma Components

<section class="pb-10 has-background-white-ter is-relative is-clipped" x-data="{ mobileNavOpen: false }">
  <nav class="navbar py-2 has-background-white-ter is-light" role="navigation" aria-label="navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img class="image" src="asitrastudio-assets/logos/logo-asi.svg" alt="">
      </a>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="is-hidden-desktop is-inline-flex is-align-items-center is-justify-content-center navbar-menu-open navbar-burger" href="#">
        <svg width="38" height="16" viewbox="0 0 44 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="44" height="2" rx="1" fill="black"></rect><rect y="14" width="44" height="2" rx="1" fill="black"></rect></svg>
      </button>
    </div>
    <div class="navbar-menu" id="navExample">
      <div class="navbar-end">
        <a class="navbar-item">About</a><a class="navbar-item">Services</a><a class="navbar-item">Projects</a><a class="navbar-item">Contact us</a>
        <div class="navbar-item">
          <a class="button is-outlined is-rounded is-dark is-flex is-align-items-center" href="#">
            <span class="mr-3">Get consulation</span>
            <svg class="is-rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>

<section class="has-background-white-ter is-relative is-clipped" x-data="{ mobileNavOpen: false }">
  <nav class="navbar py-2 has-background-white-ter is-light" role="navigation" aria-label="navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img class="image" src="asitrastudio-assets/logos/logo-asi.svg" alt="">
      </a>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="is-hidden-desktop is-inline-flex is-align-items-center is-justify-content-center navbar-menu-open navbar-burger" href="#">
        <svg width="38" height="16" viewbox="0 0 44 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="44" height="2" rx="1" fill="black"></rect><rect y="14" width="44" height="2" rx="1" fill="black"></rect></svg>
      </button>
    </div>
    <div class="navbar-menu" id="navExample">
      <div class="navbar-end">
        <a class="navbar-item">About</a><a class="navbar-item">Services</a><a class="navbar-item">Projects</a><a class="navbar-item">Contact us</a>
        <div class="navbar-item">
          <a class="button is-outlined is-rounded is-dark is-flex is-align-items-center" href="#">
            <span class="mr-3">Get consulation</span>
            <svg class="is-rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>

<section class="section has-background-white-ter" x-data="{ showContent: false }">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-12 is-4-widescreen mb-20 mb-0-widescreen">
        <div class="has-mw-lg">
          <h1 class="title is-size-2-mobile is-size-1-tablet mb-8" style="letter-spacing: -0.04em;">Open Position</h1>
          <a x-on:click.prevent="showContent=true" :class="{ 'is-hidden': showContent }" class="button is-outlined is-dark is-rounded" href="#">View all open position</a>
        </div>
      </div>
      <div class="column is-12 is-8-widescreen">
        <div>
          <a class="mb-8 is-block" href="#" style="border-bottom: 1.5px solid #000000;">
            <div class="mb-3 is-inline-flex is-align-items-center">
              <span class="is-size-7 has-text-grey has-text-weight-medium">Full-time</span>
              <span class="mx-4 -mt-2 is-inline-block">
                <svg width="3" height="3" viewbox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M0.896 1.772C0.896 1.632 0.924 1.50133 0.98 1.38C1.036 1.25867 1.11067 1.15133 1.204 1.058C1.30667 0.955333 1.41867 0.876 1.54 0.82C1.67067 0.764 1.806 0.736 1.946 0.736C2.086 0.736 2.21667 0.764 2.338 0.82C2.46867 0.876 2.58067 0.955333 2.674 1.058C2.77667 1.15133 2.856 1.25867 2.912 1.38C2.968 1.50133 2.996 1.632 2.996 1.772C2.996 2.052 2.89333 2.29933 2.688 2.514C2.48267 2.72867 2.23533 2.836 1.946 2.836C1.65667 2.836 1.40933 2.72867 1.204 2.514C0.998667 2.29933 0.896 2.052 0.896 1.772Z" fill="#646464"></path>
                </svg>
              </span>
              <span class="is-size-7 has-text-grey has-text-weight-medium">Remote</span>
            </div>
            <div class="pb-4 is-flex is-justify-content-space-between is-align-items-center border-2">
              <h3 class="is-size-4-mobile is-size-3-tablet">Product Manager, Instagram Camera</h3>
              <span class="pl-6 is-rotate-45">

<section class="section py-12 py-20-tablet has-background-dark">
  <div class="container">
    <div class="has-mw-xl has-mw-none-widescreen mx-auto">
      <div class="mb-20 columns is-multiline">
        <div class="column is-12 is-3-widescreen mb-12 mb-0-widescreen">
          <a class="is-inline-block has-text-grey" href="#">
            <img class="image is-fullwidth" style="height: 21px;" src="asitrastudio-assets/logos/logo-asitra-white.svg" alt="">
          </a>
        </div>
        <div class="column is-2-widescreen is-6-mobile mb-10 mb-0-widescreen">
          <h5 class="has-text-white mb-4 is-size-6">About</h5>
          <ul>
            <li class="mb-2"><a class="is-inline-block has-text-grey-light" href="#">Contact</a></li>
            <li class="mb-2"><a class="is-inline-block has-text-grey-light" href="#">Blog</a></li>
            <li class="mb-2"><a class="is-inline-block has-text-grey-light" href="#">Our Storry</a></li>
            <li>
              <a class="is-inline-block has-text-grey-light" href="#">
                <span class="mr-2">Careers</span>
                <span class="tag is-primary has-text-white px-2 py-1 is-uppercase" style="font-size: 12px;">Hiring</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="column is-3-widescreen is-6-mobile mb-10 mb-0-widescreen">

<section class="is-relative is-clipped">
  <div class="is-fixed is-bottom-0 is-left-0 is-fullwidth pt-8 pb-10" style="z-index: 50;">
    <div class="is-flex px-6 is-justify-content-center">
      <div class="notification is-success is-light is-inline-flex py-4 pl-5 pr-6 is-align-items-center" style="border-radius: 20px;">
        <span class="mr-4">
          <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect y="0.5" width="21" height="21" rx="10.5" fill="#219653"></rect>
            <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
          </svg>
        </span>
        <p>Your settings have been saved</p>
      </div>
    </div>
  </div>
</section>

<section class="section has-background-white-ter">
  <div class="container">
    <h1 class="title is-size-2-mobile is-size-1-tablet mb-12" style="letter-spacing: -0.04em;">FAQ</h1>
    <div class="columns is-multiline">
      <div class="column is-4">
        <div class="has-mw-xs">
          <p class="is-size-6">
            <span class="has-text-grey">Couldnt&grave;t fint what you were looking for? write to us at</span>
            <a class="has-text-dark is-inline-block" href="mailto:">help@snazzy.co</a>
          </p>
        </div>
      </div>
      <div class="column is-8">
        <div class="has-mw-3xl ml-auto-desktop">
          <div class="px-0 py-6" style="border-top: 1px solid black;" x-data="{ accordion: false }">
            <div class="is-flex is-justify-content-space-between is-align-items-center is-fullwidth">
              <h5 class="is-size-6-mobile is-size-5-tablet has-text-dark">What is Cult Wine Investment?</h5>
              <button x-on:click="accordion = !accordion" class="button p-0 is-rounded is-dark ml-4 is-flex-shrink-0" :class="{ 'is-outlined': !accordion }" style="width: 48px; height: 48px;">
                <span :class="{ 'is-rotate-180': accordion, 'is-rotate-0': !accordion }" class="inline-block transform rotate-0">
                    <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>

<section class="section has-background-white-ter">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-12 is-6-desktop mb-16 mb-0-desktop">
        <div class="has-mw-xl mx-auto mx-0-desktop">
          <div class="has-mw-lg mb-10">
            <h1 class="title is-size-2-mobile is-size-1-tablet mb-8" style="letter-spacing: -0.04em;">Let&grave;s talk</h1>
            <p class="subtitle is-size-6">Whereby Embedded is the easiest way to embed video calls directly into your app, website, or anywhere else you need beautiful, custom video chat &ndash; that just works.</p>
          </div>
          <div class="mb-20 columns is-multiline">
            <div class="column is-6">
              <div class="box py-6 has-text-centered" style="border-radius: 20px;">
                <span class="mb-2 is-block has-text-grey-dark">Call us</span>
                <span class="has-text-weight-medium has-text-dark">+48 291 821 114</span>
              </div>
            </div>
            <div class="column is-6">
              <div class="box py-6 has-text-centered" style="border-radius: 20px;">
                <span class="mb-2 is-block has-text-grey-dark">Email us</span>
                <span class="has-text-weight-medium has-text-dark">contact@asitrastudio.co</span>
              </div>
            </div>
          </div>
          <div class="mb-16">

<section class="section has-background-white-ter">
  <div class="container">
    <div class="columns is-multiline is-vcentered">
      <div class="column is-6 mb-20 mb-0-desktop">
        <div class="has-mw-lg">
          <h2 class="title mb-10 is-size-2" style="letter-spacing: -0.02em;">Meet our partners</h2>
          <a class="button is-ghost px-0" href="#" style="height: 38px;">
            <span class="mr-3">I will become a sponsor</span>
            <svg class="is-rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 1.5L1 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9 8.83571V1.5H1.66429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="column is-6">
        <div class="columns is-mobile is-multiline">
          <div class="column is-6-mobile is-3-tablet">
            <div class="is-flex is-align-items-center is-justify-content-center" style="height: 88px">
              <img class="image" src="asitrastudio-assets/logo-clouds/brand-youtube.png" alt="">
            </div>
          </div>
          <div class="column is-6-mobile is-3-tablet">
            <div class="is-flex is-align-items-center is-justify-content-center" style="height: 88px">

<section class="section has-background-white-ter" x-data="{ toggle: false }">
  <div class="container">
    <div class="has-mw-md has-mw-lg-desktop has-mw-none-widescreen mx-auto">
      <div class="has-mw-3xl mb-20">
        <h1 class="title is-size-2 is-size-1-widescreen" style="letter-spacing: -0.04em;">Premium Membership</h1>
      </div>
      <div class="is-flex-tablet mb-10 is-align-items-center">
        <span class="is-block-mobile is-size-6" :class="{ 'has-text-dark': !toggle, 'has-text-grey': toggle }">Billed monthly</span>
        <div class="my-4-mobile mx-4-tablet is-inline-flex has-background-dark" style="padding: 2px; border-radius: 999px;">
          <button x-on:click="toggle = !toggle" class="button p-0" :class="{ 'is-light has-background-transparent': toggle, 'is-white': !toggle }" style="width: 26px; height: 26px; border-radius: 999px;"></button>
          <button x-on:click="toggle = !toggle" class="button p-0" :class="{ 'is-light has-background-transparent': !toggle, 'is-white': toggle }" style="width: 26px; height: 26px; border-radius: 999px;"></button>
        </div>
        <div class="is-block-mobile is-inline-flex-tablet is-align-items-center">
          <span class="mr-3 is-inline-block is-size-6" :class="{ 'has-text-dark': toggle, 'has-text-grey': !toggle }">Billed yearly</span>
          <span class="tag is-light is-size-7 px-3 py-1 is-inline-block has-text-dark">20% SAVE</span>
        </div>
      </div>
      <div class="columns is-multiline">
        <div class="column is-12-tablet is-4-widescreen">
          <div class="box px-8 pt-10 pb-10 is-covered" style="height: 100%">
            <span class="mb-2 is-block is-size-6 has-text-weight-medium has-text-dark">Starter plan</span>
            <h3 class="mb-4 is-size-2 has-text-dark" style="letter-spacing: -0.04em;">Free</h3>
            <p class="mb-8 has-text-dark">During this phase the design is developed to meet the required technical standards to</p>
            <a class="button is-outlined is-dark is-rounded mb-16 is-fullwidth" href="#">Get started</a>

<section class="is-relative bg-light-light has-background-white">
  <div class="px-5 py-6 border-top border-light">
    <div class="container">
      <nav class="breadcrumb" aria-label="breadcrumbs">
        <ul>
          <li><a href="#">Homepage</a></li>
          <li class="is-active"><a class="has-text-grey" href="#" aria-current="page">Services</a></li>
        </ul>
      </nav>
    </div>
  </div>
</section>

<section class="py-12-mobile py-24-tablet has-background-white">
  <div class="container">
    <div class="has-mw-5xl mx-auto mb-20 px-8 has-text-centered">
      <p class="mb-10 is-size-5 has-text-dark">
        <span>&ldquo;KW70 Fix is a leading real estate investment firm in the World, headquartered in New York with offices in</span>
        <span></span>
        <span>London, Chicago, Barcelona, Vienna, Las Vegas.</span>
        <span>KW70 Fix initiative seeks out regions and markets with robust underlying catalysts, such as burgeoning technology sectors, a diverse workforce, and a strong entrepreneurial culture.</span>
      </p>
      <a class="button is-ghost px-0" href="#" style="height: 38px;">
        <span class="mr-2">Get to know us</span>
        <svg class="is-rotate-45" width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </a>
    </div>
    <div class="has-mw-sm has-mw-none-widescreen has-mw-2xl-desktop mx-auto">
      <div class="mx-0 columns is-multiline">
        <div class="column is-12 is-3-widescreen is-6-desktop p-0">
          <div class="box pl-8 pb-12 is-flex is-align-items-end" style="height: 290px;">
            <div>
              <h5 class="is-size-3 has-text-dark">700+</h5>
              <span class="is-block has-text-dark">Clients</span>

<section class="section has-background-white-ter" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container">
    <div class="mb-20 columns is-multiline is-align-items-end">
      <div class="column is-12-tablet is-7-fullhd mb-12 mb-0-fullhd">
        <h1 class="title is-relative is-inline-block is-size-2 is-size-1-desktop" style="letter-spacing: -0.04em;">
          <span>Selected projects</span>
          <span class="is-absolute is-top-0 is-right-0 -mt-5 -mr-2 is-block is-size-4 has-text-grey has-text-weight-medium">(21)</span>
        </h1>
      </div>
      <div class="column is-12-tablet is-5-fullhd">
        <ul class="is-flex-tablet -mb-3 is-justify-content-end is-align-items-center">
          <li class="mb-3 mr-6"><a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" class="button is-rounded px-5 is-size-6" :class="{ 'is-dark': tab == $refs.tab1.textContent, 'is-light has-background-white-ter': tab != $refs.tab1.textContent }" href="#" style="max-height: 38px;">All</a></li>
          <li class="mb-3 mr-6"><a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" class="button is-rounded px-5 is-size-6" :class="{ 'is-dark': tab == $refs.tab2.textContent, 'is-light has-background-white-ter': tab != $refs.tab2.textContent }" href="#" style="max-height: 38px;">Villa</a></li>
          <li class="mb-3 mr-6"><a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" class="button is-rounded px-5 is-size-6" :class="{ 'is-dark': tab == $refs.tab3.textContent, 'is-light has-background-white-ter': tab != $refs.tab3.textContent }" href="#" style="max-height: 38px;">Residance</a></li>
          <li class="mb-3"><a x-ref="tab4" x-on:click.prevent="tab = $refs.tab4.textContent" class="button is-rounded px-5 is-size-6" :class="{ 'is-dark': tab == $refs.tab4.textContent, 'is-light has-background-white-ter': tab != $refs.tab4.textContent }" href="#" style="max-height: 38px;">Apartaments</a></li>
        </ul>
      </div>
    </div>
    <div class="mb-20 columns is-multiline">
      <div class="column is-7-tablet mb-12 mb-0-tablet" :class="{ 'is-block': $refs.tab1.textContent == tab || $refs.tab2.textContent == tab, 'is-hidden': $refs.tab1.textContent != tab && $refs.tab2.textContent != tab }">
        <a class="is-block" href="#">
          <img class="mb-8 image is-fullwidth" style="border-radius: 40px; max-height: 800px;" src="asitrastudio-assets/projects/photo-square3.png" alt="">
          <div class="has-mw-xs has-mw-md-desktop">
            <span class="mb-3 tag is-dark">Apartament</span>

<section class="section has-background-white">
  <div class="is-fixed-top is-top-0 is-left-0 is-fullwidth is-covered" style="height: 100%">
    <div class="is-flex is-justify-content-center is-align-items-center is-fullwidth is-covered" style="height: 100%">
      <div class="box has-mw-lg mx-auto px-8 px-16-tablet py-12 is-relative has-background-white is-fullwidth has-text-centered">
        <button class="mt-6 mr-8 is-absolute is-top-0 is-right-0 button p-0 is-light has-background-white-ter" style="height: auto;">
          <svg width="15" height="16" viewbox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.5 6.45616L7.42929 6.38545L1.96352 0.919676C1.96351 0.919673 1.96351 0.919669 1.96351 0.919666C1.75876 0.714984 1.4811 0.6 1.19159 0.6C0.902079 0.6 0.624425 0.71498 0.419676 0.919655C0.419669 0.919662 0.419662 0.919669 0.419655 0.919676M7.5 6.45616L0.419655 0.919676M7.5 6.45616L7.57071 6.38545M7.5 6.45616L7.57071 6.38545M0.419655 0.919676C0.21498 1.12442 0.1 1.40208 0.1 1.69159C0.1 1.9811 0.214984 2.25876 0.419666 2.46351M0.419655 0.919676L0.419666 2.46351M0.419666 2.46351C0.419669 2.46351 0.419673 2.46351 0.419676 2.46352M0.419666 2.46351L0.419676 2.46352M0.419676 2.46352L5.88545 7.92929M0.419676 2.46352L5.88545 7.92929M7.57071 6.38545L13.0365 0.919676C13.0365 0.919673 13.0365 0.919669 13.0365 0.919666C13.2412 0.714984 13.5189 0.6 13.8084 0.6C14.0979 0.6 14.3756 0.71498 14.5803 0.919655C14.785 1.12441 14.9 1.40207 14.9 1.69159C14.9 1.9811 14.785 2.25876 14.5803 2.46351C14.5803 2.46351 14.5803 2.46351 14.5803 2.46352L9.11455 7.92929L9.04384 8L9.11455 8.07071L14.5803 13.5365C14.5803 13.5365 14.5803 13.5365 14.5803 13.5365M7.57071 6.38545L14.5803 13.5365M5.95616 8L5.88545 8.07071L0.419676 13.5365C0.419673 13.5365 0.419669 13.5365 0.419666 13.5365C0.214984 13.7412 0.1 14.0189 0.1 14.3084C0.1 14.5979 0.21498 14.8756 0.419655 15.0803C0.624405 15.285 0.902069 15.4 1.19159 15.4C1.4811 15.4 1.75876 15.285 1.96351 15.0803C1.96351 15.0803 1.96351 15.0803 1.96352 15.0803L7.42929 9.61455L7.5 9.54384L7.57071 9.61455L13.0365 15.0803C13.0365 15.0803 13.0365 15.0803 13.0365 15.0803C13.2412 15.285 13.5189 15.4 13.8084 15.4C14.0979 15.4 14.3756 15.285 14.5803 15.0803C14.5803 15.0803 14.5803 15.0803 14.5803 15.0803M5.95616 8L14.5803 15.0803M5.95616 8L5.88545 7.92929M5.95616 8L5.88545 7.92929M14.5803 15.0803C14.785 14.8756 14.9 14.5979 14.9 14.3084C14.9 14.0189 14.785 13.7412 14.5803 13.5365M14.5803 15.0803L14.5803 13.5365" fill="#222222" stroke="#222222" stroke-width="1"></path>
          </svg>
        </button>
        <div class="has-mw-md mx-auto">
          <form action="">
            <h3 class="mb-10 is-size-4 has-text-weight-medium has-text-dark" style="letter-spacing: -0.02em;">Sign in to asitrastudio</h3>
            <a class="button is-light is-outlined is-rounded mb-2 is-fullwidth" href="#">
              <img src="asitrastudio-assets/sign-in/google.svg" alt="">
              <span class="is-size-7 has-text-dark ml-4">Sign in with Google</span>
            </a>
            <a class="button is-light is-outlined is-rounded mb-8 is-fullwidth" href="#">
              <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.7478 0C12.7876 0 12.8274 0 12.8695 0C12.9671 1.20593 12.5068 2.107 11.9474 2.75952C11.3985 3.40754 10.6469 4.03603 9.43117 3.94067C9.35007 2.75201 9.81112 1.91777 10.3698 1.26675C10.8879 0.660032 11.8378 0.120142 12.7478 0Z" fill="#222222"></path>
                <path d="M16.4254 12.5517C16.4254 12.5638 16.4254 12.5743 16.4254 12.5855C16.0837 13.6203 15.5964 14.5071 15.0017 15.33C14.4588 16.0772 13.7935 17.0826 12.6056 17.0826C11.5791 17.0826 10.8973 16.4226 9.84534 16.4046C8.73252 16.3865 8.12055 16.9565 7.10309 17.0999C6.98671 17.0999 6.87032 17.0999 6.75618 17.0999C6.00905 16.9917 5.40608 16.4 4.96681 15.8669C3.67153 14.2916 2.6706 12.2566 2.48438 9.65256C2.48438 9.39725 2.48438 9.1427 2.48438 8.8874C2.56322 7.02369 3.46879 5.5084 4.67247 4.77403C5.30772 4.38357 6.181 4.05092 7.1534 4.1996C7.57015 4.26418 7.9959 4.40685 8.36909 4.54801C8.72276 4.68392 9.16504 4.92496 9.58403 4.91219C9.86787 4.90393 10.1502 4.75601 10.4363 4.65164C11.2743 4.34903 12.0958 4.00212 13.1785 4.16506C14.4798 4.36179 15.4034 4.93998 15.9741 5.83203C14.8733 6.53261 14.003 7.58836 14.1517 9.39125C14.2838 11.0289 15.236 11.9871 16.4254 12.5517Z" fill="#222222"></path>
              </svg>
              <span class="is-size-7 has-text-dark ml-4">Sign in with Apple</span>
            </a>
            <div class="mb-8 is-flex is-align-items-center">

<section class="section has-background-white-ter">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-4-widescreen is-5-desktop mb-20 mb-0-desktop">
        <div class="has-mw-xs">
          <h1 class="title is-size-2-mobile is-size-1-tablet mb-10" style="letter-spacing: -0.04em;">Meet the team</h1>
          <a class="button is-ghost px-0" href="#" style="height: 38px;">
            <span class="mr-3">See more people</span>
            <svg class="is-rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 1.5L1 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9 8.83571V1.5H1.66429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="column is-8-widescreen is-7-desktop">
        <div class="columns is-mobile is-multiline">
          <div class="column is-6-mobile is-6-tablet is-4-desktop mb-12">
            <div>
              <figure class="image is-96x96 mb-6">
                <img class="image" src="asitrastudio-assets/team/team-avatar1.png" alt="">
              </figure>
              <span class="is-block has-text-grey is-size-7 has-text-weight-medium">Executive Chairman</span>
              <span class="title is-size-5-mobile is-size-4-tablet">Jacob Jones</span>

<section class="section has-background-white-ter">
  <div class="container">
    <h1 class="title is-size-2-mobile is-size-1-tablet mb-20" style="letter-spacing: -0.04em;">Get started quickly</h1>
    <div class="px-12 px-32-widescreen pt-20 pt-10-desktop pb-10 has-background-dark" style="border-radius: 40px;">
      <div class="columns is-multiline is-vcentered">
        <div class="column is-6">
          <div class="has-mw-md has-mw-lg-desktop mx-auto">
            <h3 class="title has-text-white mb-6 is-size-3-mobile is-size-2-desktop" style="letter-spacing: -0.02em;">Althhorpe Street Leamigton Spa</h3>
            <p class="has-mw-sm is-size-6 has-text-grey mb-10">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
            <a class="button is-outlined is-rounded is-light" href="#">
              <span class="mr-2">Get consulation</span>
              <svg class="is-rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
        </div>
        <div class="column is-6">
          <img class="is-block image is-fullwidth has-mw-lg mx-auto has-mw-none-desktop" src="asitrastudio-assets/features/double-photo.png" alt="">
        </div>
      </div>
    </div>
  </div>

<section class="section py-10 has-background-white-ter">
  <div class="container">
    <div class="-mx-2 columns is-mobile is-multiline">
      <div class="column is-12-mobile is-12-tablet is-6-desktop px-2">
        <div class="is-fullheight px-8 px-20-tablet py-20 has-background-white" style="border-radius: 40px;">
          <div class="has-mw-md mx-auto">
            <div class="mb-32">
              <span class="tag is-light mb-4 has-text-dark">Error</span>
              <h2 class="title is-size-2 is-size-1-desktop mb-10" style="letter-spacing: -0.02em;">Error 404</h2>
              <p class="subtitle mb-10">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
              <a class="button is-outlined is-dark is-rounded" href="#">
                <span class="mr-2">Back to homepage</span>
                <svg class="is-rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
            <div class="has-mw-xs ml-auto has-text-right">
              <span class="is-block is-size-7 has-text-dark">2023</span>
              <p class="has-text-grey">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
            </div>
          </div>
        </div>

<section class="section py-0 is-relative is-clipped has-background-white">
  <div class="container is-relative">
    <img class="has-mw-4xl -mr-24-desktop-only is-absolute is-block-desktop is-hidden-touch is-bottom-0 is-right-0" src="asitrastudio-assets/download/phone-right-xl.png" alt="">
    <div class="is-relative">
      <div class="has-mw-sm has-mw-md-tablet has-mw-lg-desktop mx-auto mx-0-desktop pt-12 pt-20-tablet py-40-desktop pb-20">
        <h2 class="title is-size-3-mobile is-size-2-tablet mb-8" style="letter-spacing: -0.02em;">Get our mobile app to make the process faster</h2>
        <p class="has-mw-md subtitle mb-12 is-size-6">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
        <div class="has-mw-sm buttons is-flex-wrap-nowrap">
          <a class="mr-6 is-inline-block" href="#">
            <img class="image is-fullwidth" src="asitrastudio-assets/download/app-store.svg" alt="">
          </a>
          <a class="is-inline-block" href="#">
            <img class="image is-fullwidth" src="asitrastudio-assets/download/google.svg" alt="">
          </a>
        </div>
      </div>
      <img class="is-hidden-desktop image is-fullwidth has-mw-2xl mx-auto" src="asitrastudio-assets/download/phone-right-xl.png" alt="">
    </div>
  </div>
</section>

<section class="section py-5 has-background-light">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-6-desktop is-7-widescreen">
        <div class="has-mw-md has-mw-xl-desktop mx-auto mx-0-desktop py-20 py-40-desktop">
          <span class="is-block mb-4 is-size-7 has-text-weight-medium has-text-dark">Lorem Ipsum</span>
          <div class="has-mw-sm has-mw-none-desktop has-mw-md-tablet mb-12">
            <h1 class="title is-size-2 is-size-1-desktop mb-10" style="letter-spacing: -0.04em;">Keep up with our contant</h1>
            <p class="has-mw-sm subtitle is-size-6">It is a long established fact that a reader will be distracted by the readable content</p>
          </div>
          <div>
            <div class="field is-flex-tablet is-justify-content-center">
              <div class="control is-fullwidth mr-0-mobile mr-3 mb-2 mb-0-tablet">
                <input class="input has-background-white has-text-dark" type="email" placeholder="Enter your email" style="border: none;">
              </div>
              <div class="control">
                <button class="button is-dark is-fullwidth is-rounded" type="submit">Sign Up</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-5-widescreen is-6-desktop">
        <img class="is-block image is-fullwidth has-mw-md mx-auto has-mw-none-desktop is-covered" style="object-fit: cover; height: 100%; border-radius: 30px;" src="asitrastudio-assets/newsletter/photo1.png" alt="">

<section class="section is-relative is-clipped has-background-white">
  <div class="container is-relative">
    <img class="mt-32 mt-16-widescreen ml-80-widescreen is-absolute is-left-0 is-top-0 is-top-0" style="z-index: 0; border-radius: 30px;" src="asitrastudio-assets/services/map-small.png" alt="">
    <div class="is-relative">
      <h1 class="title is-size-2-mobile is-size-1-tablet mb-20" style="letter-spacing: -0.04em;">Services</h1>
      <div class="has-mw-xl has-mw-none-widescreen mx-auto mb-24 pb-8 is-flex-widescreen is-relative is-align-items-end" style="border-BOTTOM: 1PX SOLID BLACK;">
        <div class="mb-8 mb-0-widescreen">
          <span class="-mb-2 is-block is-size-7 has-text-weight-medium has-text-grey">01</span>
          <h3 class="is-size-3 has-text-dark">De-risking your project</h3>
        </div>
        <div class="has-mw-md mb-8 mb-0-widescreen ml-auto mr-20-widescreen">
          <p class="has-text-right has-text-dark">We follow the RIBA Plan of Work 2020 to ensure an orderly framework and project clarity from the outset. First, we conduct feasibility studies and a project review.</p>
        </div>
        <span class="is-block has-text-right">
          <svg width="33" height="33" viewbox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M30 30L3 3" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M30 5.24196V30H5.24196" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
      </div>
      <div class="has-mw-xl has-mw-none-widescreen mx-auto mb-24 pb-8 is-flex-widescreen is-align-items-end" style="border-BOTTOM: 1PX SOLID BLACK;">
        <div class="mb-8 mb-0-widescreen">
          <span class="-mb-2 is-block is-size-7 has-text-weight-medium has-text-grey">02</span>
          <h3 class="is-size-3 has-text-dark">Planning strategies</h3>

<section class="section pt-12 pt-0-desktop pt-20-tablet is-clipped has-background-white">
  <div class="container is-relative">
    <img class="-mr-64-tablet -mr-24-widescreen-only is-absolute is-block is-hidden-mobile is-bottom-0 is-right-0" style="z-index: 1;" src="asitrastudio-assets/cta/woman-cta-right.png" alt="">
    <div class="has-mw-md mx-auto mx-0-tablet has-mw-xl-tablet has-mw-3xl-widescreen py-36-tablet is-relative">
      <span class="is-block mb-4 is-size-7 has-text-grey has-text-weight-medium">Lorem Ipsum</span>
      <h1 class="title is-size-3-mobile is-size-1-tablet mb-14" style="letter-spacing: -0.04em;">
        <span>Share your travels with</span>
        <span class="is-inline-block has-text-grey-dark" style="line-height: 1; border-bottom: 3px solid #646464;">friends &amp; family</span>
      </h1>
      <div class="buttons is-relative" style="z-index: 10;">
        <a class="button is-primary mr-6-tablet is-rounded" href="#">
          <span class="mr-2">Get consulation</span>
          <svg class="is-rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 1.5L1 9.5" stroke="white" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9 8.83571V1.5H1.66429" stroke="white" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
        <a class="button is-outlined is-dark is-rounded" href="#">
          <span class="mr-2">Get consulation</span>
          <svg class="is-rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>