UI Components – Asitrastudio Library

<section class="section has-background-white-ter">
  <div class="container">
    <div class="has-mw-xl has-mw-none-desktop mx-auto">
      <h1 class="title mb-20 is-size-3-mobile is-size-2-desktop" style="letter-spacing: -0.02em;">Get started quickly</h1>
      <div class="columns is-multiline">
        <div class="column is-12 is-4-desktop mb-8 mb-0-desktop">
          <div class="box px-10 pt-16 pb-12 has-background-white">
            <div class="has-mw-xs mx-auto has-text-centered">
              <span class="mb-8 is-block">
                <svg width="41" height="41" viewbox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.5221 32.4582H13.668C6.83464 32.4582 3.41797 30.7498 3.41797 22.2082V13.6665C3.41797 6.83317 6.83464 3.4165 13.668 3.4165H27.3346C34.168 3.4165 37.5846 6.83317 37.5846 13.6665V22.2082C37.5846 29.0415 34.168 32.4582 27.3346 32.4582H26.4805C25.9509 32.4582 25.4384 32.7144 25.1138 33.1415L22.5513 36.5582C21.4238 38.0615 19.5788 38.0615 18.4513 36.5582L15.8888 33.1415C15.6155 32.7657 14.9834 32.4582 14.5221 32.4582Z" stroke="black" stroke-width="2.5625" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M27.3292 18.7917H27.3445" stroke="black" stroke-width="3.41667" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M20.4893 18.7917H20.5047" stroke="black" stroke-width="3.41667" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M13.6573 18.7917H13.6726" stroke="black" stroke-width="3.41667" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
              <h4 class="mb-8 is-size-5-touch is-size-4-desktop has-text-dark" style="letter-spacing: -0.02em;">Do I need to use the Paid Partnership label for things like?</h4>
              <a class="button is-ghost px-0" href="#" style="height: 38px;">
                <span class="mr-2">See more</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>

<section class="is-relative is-clipped" x-data="{ open: true }" :class="{ 'is-hidden': !open }">
  <div class="is-fixed is-bottom-0 is-right-0 is-fullwidth has-mw-lg p-8" style="z-index: 50;">
    <div class="is-relative box py-6 px-6 has-mw-sm ml-auto has-background-white" style="border-radius: 20px;">
      <div class="is-absolute is-top-0 is-right-0 mt-5 mr-5">
        <button class="is-inline-block button is-light has-background-white p-0" x-on:click="open=false">
          <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.625 4.84212L5.57197 4.78909L1.47264 0.689757C1.31908 0.536241 1.11083 0.45 0.89369 0.45C0.67656 0.45 0.468319 0.536235 0.314757 0.689741C0.314752 0.689747 0.314747 0.689752 0.314741 0.689757M5.625 4.84212L0.314741 0.689757M5.625 4.84212L5.67803 4.78909L9.77736 0.689757C9.93093 0.536241 10.1392 0.45 10.3563 0.45C10.5734 0.45 10.7817 0.536235 10.9352 0.689741C11.0888 0.843304 11.175 1.05155 11.175 1.26869C11.175 1.48583 11.0888 1.69408 10.9352 1.84764L6.83591 5.94697L6.78288 6L6.83591 6.05303L10.9352 10.1524M5.625 4.84212L10.9352 10.1524M0.314741 0.689757C0.161235 0.843319 0.075 1.05156 0.075 1.26869C0.075 1.48583 0.161241 1.69408 0.314757 1.84764M0.314741 0.689757L0.314757 1.84764M0.314757 1.84764L4.41409 5.94697L4.46712 6L4.41409 6.05303L0.314757 10.1524C0.161241 10.3059 0.075 10.5142 0.075 10.7313C0.075 10.9484 0.161235 11.1567 0.314741 11.3102C0.468304 11.4638 0.676552 11.55 0.89369 11.55C1.11083 11.55 1.31908 11.4638 1.47264 11.3102L5.57197 7.21091L5.625 7.15788L5.67803 7.21091L9.77736 11.3102C9.93093 11.4638 10.1392 11.55 10.3563 11.55C10.5734 11.55 10.7817 11.4638 10.9352 11.3103C10.9352 11.3103 10.9353 11.3102 10.9353 11.3102M0.314757 1.84764L10.9353 11.3102M10.9353 11.3102C11.0888 11.1567 11.175 10.9484 11.175 10.7313C11.175 10.5142 11.0888 10.3059 10.9352 10.1524M10.9353 11.3102L10.9352 10.1524" fill="black" stroke="black" stroke-width="1"></path>
          </svg>
        </button>
      </div>
      <div class="is-flex mb-4 is-align-items-center">
        <svg width="21" height="21" viewbox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="21" height="21" rx="10.5" fill="#219653"></rect>
          <path d="M15.7676 7.63463C15.4582 7.32482 14.9558 7.32501 14.646 7.63463L9.59787 12.683L7.35419 10.4393C7.04438 10.1295 6.54217 10.1295 6.23236 10.4393C5.92255 10.7491 5.92255 11.2513 6.23236 11.5611L9.03684 14.3656C9.19165 14.5204 9.39464 14.598 9.59765 14.598C9.80067 14.598 10.0039 14.5206 10.1587 14.3656L15.7676 8.75644C16.0775 8.44684 16.0775 7.94443 15.7676 7.63463Z" fill="white"></path>
        </svg>
        <span class="ml-4 has-text-dark">Your settings have been saved</span>
      </div>
      <p class="mw-xs text-secondary-light fs-9 mb-6 has-text-dark">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="buttons"><a class="button is-dark is-size-7 py-3 is-rounded" href="#">I accept</a><a class="button is-dark is-size-7 py-3 is-outlined is-rounded" href="#">Don&apos;t accept</a></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-20" style="letter-spacing: -0.04em;">Get started quickly</h1>
    <div class="has-mw-2xl has-mw-none-desktop mx-auto">
      <div class="columns is-multiline">
        <div class="column is-3-desktop is-6-tablet mb-8">
          <div class="has-mw-xs mx-auto">
            <div class="mb-8 is-flex has-background-dark is-justify-content-center is-align-items-center" style="width: 72px; height: 72px; border-radius: 21.5px;">
              <svg width="30" height="30" viewbox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.625 23.75H10C5 23.75 2.5 22.5 2.5 16.25V10C2.5 5 5 2.5 10 2.5H20C25 2.5 27.5 5 27.5 10V16.25C27.5 21.25 25 23.75 20 23.75H19.375C18.9875 23.75 18.6125 23.9375 18.375 24.25L16.5 26.75C15.675 27.85 14.325 27.85 13.5 26.75L11.625 24.25C11.425 23.975 10.9625 23.75 10.625 23.75Z" stroke="white" stroke-width="1.875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M19.9931 13.75H20.0044" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M14.9931 13.75H15.0044" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M9.99313 13.75H10.0044" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <h4 class="mb-6 is-size-5 has-text-dark" style="letter-spacing: -0.02em;">Call us</h4>
            <p class="has-text-grey">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s,</p>
          </div>
        </div>
        <div class="column is-3-desktop is-6-tablet mb-8">
          <div class="has-mw-xs mx-auto">
            <div class="mb-8 is-flex has-background-dark is-justify-content-center is-align-items-center" style="width: 72px; height: 72px; border-radius: 21.5px;">
              <svg width="30" height="30" viewbox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.1117 2.78672L6.87422 5.13672C5.43672 5.67422 4.26172 7.37422 4.26172 8.89922V18.1867C4.26172 19.6617 5.23672 21.5992 6.42422 22.4867L11.7992 26.4992C13.5617 27.8242 16.4617 27.8242 18.2242 26.4992L23.5992 22.4867C24.7867 21.5992 25.7617 19.6617 25.7617 18.1867V8.89922C25.7617 7.36172 24.5867 5.66172 23.1492 5.12422L16.9117 2.78672C15.8492 2.39922 14.1492 2.39922 13.1117 2.78672Z" stroke="white" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="section has-background-white-ter">
  <div class="container">
    <div class="columns is-multiline is-vcentered">
      <div class="column is-6 mb-16 mb-0-desktop">
        <div class="has-mw-md mx-auto mx-0-desktop">
          <h2 class="title is-size-3-mobile is-size-2-tablet mb-8" style="letter-spacing: -0.02em;">Get started quickly</h2>
          <p class="mb-10 is-size-6 has-text-dark">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using &apos;Content here, content here&apos;, making it look like readable</p>
          <a class="button is-ghost px-0" href="#" style="height: 38px;">
            <span class="mr-4">See more</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>
      <div class="column is-6">
        <img class="has-mw-md has-mw-none-desktop mx-auto mr-0-desktop is-block image is-fullwidth" src="asitrastudio-assets/features/photo1.png" alt="">
      </div>
    </div>
  </div>
</section>

<section class="position-relative bg-light-light overflow-hidden">
  <nav class="navbar mb-12 navbar-expand-lg navbar-light py-4"  >
    <div class="container"><a class="navbar-brand" href="#"><img class="img-fluid" style="height: 21px;" src="asitrastudio-assets/logos/logo-asi.svg" alt=""/></a>
      <button class="d-lg-none navbar-burger btn px-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg width="44" 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 class="collapse navbar-collapse" id="nav05">
        <ul class="navbar-nav ms-lg-auto me-4">
          <li class="nav-item me-4"><a class="nav-link" href="#" >About</a></li>
          <li class="nav-item me-4"><a class="nav-link" href="#" >Services</a></li>
          <li class="nav-item me-4"><a class="nav-link" href="#" >Projects</a></li>
          <li class="nav-item"><a class="nav-link" href="#" >Contact us</a></li>
        </ul>
        <div><a class="btn btn-outline-dark fw-medium d-flex align-items-center rounded-pill" href="#"><span class="me-3" >Get consulation</span>
            <svg class="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>
  </nav>

<section class="position-relative bg-light-light">
  <nav class="navbar mb-12 navbar-expand-lg navbar-light py-4"  >
    <div class="container"><a class="navbar-brand" href="#"><img class="img-fluid" style="height: 21px;" src="asitrastudio-assets/logos/logo-asi.svg" alt=""/></a>
      <button class="d-lg-none navbar-burger btn px-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg width="44" 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 class="collapse navbar-collapse" id="nav05">
        <ul class="navbar-nav ms-lg-auto me-4">
          <li class="nav-item me-4"><a class="nav-link" href="#" >About</a></li>
          <li class="nav-item me-4"><a class="nav-link" href="#" >Services</a></li>
          <li class="nav-item me-4"><a class="nav-link" href="#" >Projects</a></li>
          <li class="nav-item"><a class="nav-link" href="#" >Contact us</a></li>
        </ul>
        <div><a class="btn btn-outline-dark fw-medium d-flex align-items-center rounded-pill" href="#"><span class="me-3" >Get consulation</span>
            <svg class="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>
  </nav>

<section class="position-relative pb-20 bg-light-light overflow-hidden">
  <nav class="navbar mb-12 navbar-expand-lg navbar-light py-4"  >
    <div class="container"><a class="navbar-brand" href="#"><img class="img-fluid" style="height: 21px;" src="asitrastudio-assets/logos/logo-asi.svg" alt=""/></a>
      <button class="d-lg-none navbar-burger btn px-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg width="44" 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 class="collapse navbar-collapse" id="nav05">
        <ul class="navbar-nav ms-lg-auto me-4">
          <li class="nav-item me-4"><a class="nav-link" href="#" >About</a></li>
          <li class="nav-item me-4"><a class="nav-link" href="#" >Services</a></li>
          <li class="nav-item me-4"><a class="nav-link" href="#" >Projects</a></li>
          <li class="nav-item"><a class="nav-link" href="#" >Contact us</a></li>
        </ul>
        <div><a class="btn btn-outline-dark fw-medium d-flex align-items-center rounded-pill" href="#"><span class="me-3" >Get consulation</span>
            <svg class="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>
  </nav>

<section class="position-relative pb-10 bg-light-light overflow-hidden">
  <nav class="navbar mb-8 navbar-expand-lg navbar-light py-4"  >
    <div class="container"><a class="navbar-brand" href="#"><img class="img-fluid" style="height: 21px;" src="asitrastudio-assets/logos/logo-asi.svg" alt=""/></a>
      <button class="d-lg-none navbar-burger btn px-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg width="44" 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 class="collapse navbar-collapse" id="nav05">
        <ul class="navbar-nav ms-lg-auto me-4">
          <li class="nav-item me-4"><a class="nav-link" href="#" >About</a></li>
          <li class="nav-item me-4"><a class="nav-link" href="#" >Services</a></li>
          <li class="nav-item me-4"><a class="nav-link" href="#" >Projects</a></li>
          <li class="nav-item"><a class="nav-link" href="#" >Contact us</a></li>
        </ul>
        <div><a class="btn btn-outline-dark fw-medium d-flex align-items-center rounded-pill" href="#"><span class="me-3" >Get consulation</span>
            <svg class="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>
  </nav>

<section class="position-relative pb-10 bg-light-light overflow-hidden">
  <nav class="navbar mb-12 navbar-expand-lg navbar-light py-4"  >
    <div class="container"><a class="navbar-brand" href="#"><img class="img-fluid" style="height: 21px;" src="asitrastudio-assets/logos/logo-asi.svg" alt=""/></a>
      <button class="d-lg-none navbar-burger btn px-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg width="44" 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 class="collapse navbar-collapse" id="nav05">
        <ul class="navbar-nav ms-lg-auto me-4">
          <li class="nav-item me-4"><a class="nav-link" href="#" >About</a></li>
          <li class="nav-item me-4"><a class="nav-link" href="#" >Services</a></li>
          <li class="nav-item me-4"><a class="nav-link" href="#" >Projects</a></li>
          <li class="nav-item"><a class="nav-link" href="#" >Contact us</a></li>
        </ul>
        <div><a class="btn btn-outline-dark fw-medium d-flex align-items-center rounded-pill" href="#"><span class="me-3" >Get consulation</span>
            <svg class="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>
  </nav>

<section class="position-relative bg-light-light">
  <div class="px-5 py-6 border-top border-light">
    <div class="container">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
          <li class="breadcrumb-item"><a href="#" >Homepage</a></li>
          <li class="breadcrumb-item text-light-dark active" aria-current="page" >Services</li>
        </ol>
      </nav>
    </div>
  </div>
</section>

<section class="py-12 py-md-24 bg-light-light">
  <div class="container">
    <div class="mw-md mw-lg-none mx-auto">
      <div class="mw-3xl mb-20">
        <h1 >Premium Membership</h1>
      </div>
      <div class="d-flex mb-10 align-items-center"><span class="fs-6 fs-medium" >Billed monthly</span>
        <div class="d-inline-flex mx-4 mx-lg-8 bg-dark rounded-pill" style="padding: 2px;">
          <button class="btn p-0 bg-white" style="width: 26px; height: 26px;"></button>
          <button class="btn p-0 bg-transparent" style="width: 26px; height: 26px;"></button>
        </div>
        <div class="d-md-inline-flex align-items-center"><span class="d-inline-block me-3 fs-6 fs-medium text-light-dark" >Billed yearly</span><span class="d-inline-block py-1 px-3 fs-10 fw-semibold border border-dark rounded-pill" >
            20%
            SAVE</span></div>
      </div>
      <div class="row">
        <div class="col-12 col-lg-4 mb-5 mb-lg-0">
          <div class="h-100 pt-10 pb-10 px-8 border rounded-5"><span class="d-block mb-2 fs-6 fw-semibold" >Starter plan</span>
            <h3 class="fs-1 fw-medium mb-4" >Free</h3>
            <p class="text-secondary-light mb-8" >
              During this phase the design is developed to meet the required technical
              standards to
            </p><a class="btn w-100 mb-16 btn-outline-dark" href="#" >Get started</a>
            <ul class="list-unstyled mb-0">

<section class="py-12 py-md-20 bg-light-light">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6 mb-16 mb-lg-0">
        <div class="mw-xl mx-auto mx-lg-0">
          <div class="mw-lg mb-10">
            <h1 class="mb-8" >Let&grave;s talk</h1>
            <p class="fs-6 text-secondary-light mb-0" >
              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="row mb-20">
            <div class="col-12 col-sm-6 mb-6 mb-sm-0">
              <div class="py-6 text-center border border-light-dark rounded-5"><span class="d-block mb-2 fs-9 text-light-dark" >Call us</span><span class="fw-semibold" >+48 291 821 114</span></div>
            </div>
            <div class="col-12 col-sm-6">
              <div class="py-6 text-center border border-light-dark rounded-5"><span class="d-block mb-2 fs-9 text-light-dark" >Email us</span><span class="fw-semibold" >contact@example.com</span></div>
            </div>
          </div>
          <div class="mb-16"><span class="d-block mb-5 fs-7 fw-semibold" >Socials</span>
            <div class="d-flex flex-wrap align-items-center"><a class="d-inline-flex me-8 align-items-center" href="#">
                <svg width="17" height="13" viewbox="0 0 17 13" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="py-12 py-md-24 bg-light-light">
  <div class="container">
    <h1 class="mb-12" >FAQ</h1>
    <div class="row">
      <div class="col-12 col-lg-4 mb-16 mb-lg-0">
        <div class="mw-xs">
          <p class="fs-7 text-light-dark"><span >Couldnt&grave;t fint what you were looking for? write to us at</span><span> </span><a class="d-inline-block text-dark" href="mailto:" >help@example.com</a></p>
        </div>
      </div>
      <div class="col-12 col-lg-8">
        <div class="ms-lg-auto mw-3xl">
          <div class="py-6 px-0 border-top border-dark">
            <div class="d-flex w-100 justify-content-between align-items-center">
              <h5 class="fw-medium mb-0" >What is Cult Wine Investment?</h5>
              <button class="flex-shrink-0 ms-4 btn btn-outline-dark p-0" style="width: 48px; height: 48px;">
                <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>
              </button>
            </div>
          </div>
          <div class="py-6 px-0 border-top border-dark">
            <div class="d-flex w-100 justify-content-between align-items-center">

<div class="position-fixed bottom-0 end-0 w-100 bg-white pt-8 pb-9" style="z-index: 50;">
  <button class="position-absolute top-0 end-0 mt-2 me-5 me-xl-12 btn btn-link p-0 fs-6 fw-bold">
    <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="black" stroke-width="1"></path>
    </svg>
  </button>
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-8 mb-6 mb-lg-0">
        <h4 class="fs-5 fw-medium mb-4" >Cookie Consent</h4>
        <p class="text-secondary-light fs-9" >
          In order to provide you with a more personal user experience, we and our selected third parties use cookies or similar
          technologies for technical purposes and, with your consent, for &ldquo;basic interactions &amp; functionalities&rdquo;, &ldquo;experience
          enhancement&rdquo;, &ldquo;measurement&rdquo; and &ldquo;targeting &amp; advertising&rdquo;. Denying consent may make related features unavailable. You
          can freely give, deny, or withdraw your consent at any time.Use the &ldquo;I accept&rdquo; button to consent to the use of such
          technologies.
        </p>
        <p class="text-secondary-light fs-9 mb-0" >Use the &ldquo;I don&rsquo;t accept&rdquo; button to continue without accepting.</p>
      </div>
      <div class="col-12 col-lg-4 d-flex align-items-center justify-content-lg-end"><a class="btn me-4 btn-dark" href="#" >I accept</a><a class="btn btn-outline-dark" href="#" >Settings</a></div>
    </div>
  </div>
</div>

<section>
  <div class="position-fixed top-0 start-0 h-100 w-100">
    <div class="d-flex h-100 w-100 py-20 px-5 align-items-center justify-content-center">
      <div class="position-relative pt-16 pb-10 pt-md-10 px-6 px-md-16 w-100 mw-xl mx-auto text-center bg-white border rounded-5">
        <button class="position-absolute top-0 end-0 mt-6 me-8 btn btn-link p-0">
          <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="mw-md mx-auto">
          <form action="">
            <h3 class="fs-4 fw-medium mb-10" >Sign up to studio</h3><a class="btn btn-lg px-4 mb-2 w-100 btn-outline-light" href="#"><img src="asitrastudio-assets/sign-in/google.svg" alt=""/><span class="ms-4 text-dark" >Sign up with Google</span></a><a class="btn btn-lg px-4 mb-8 w-100 btn-outline-light" 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="ms-4 text-dark" >Sign up with Apple</span></a>
            <div class="d-flex mb-8 align-items-center">
              <div class="w-100 bg-light" style="height: 2px;"></div><span class="fs-10 mx-5 text-light-dark text-uppercase" >or</span>
              <div class="w-100 bg-light" style="height: 2px;"></div>
            </div>
            <div>
              <input class="form-control mb-4" type="text" placeholder="Full name"/>
              <input class="form-control mb-4" type="email" placeholder="E-mail"/>
              <div class="position-relative mb-6">

<section class="py-12 py-md-20 bg-dark">
  <div class="container">
    <div class="mw-xl mx-auto mw-xl-none">
      <div class="row mb-20">
        <div class="col-12 col-xl-3 mb-12 mb-xl-0"><a class="d-inline-block" href="#"><img class="img-fluid" style="height: 21px;" src="asitrastudio-assets/logos/logo-asitra-white.svg" alt=""/></a></div>
        <div class="col-auto col-sm-6 col-xl-2 mb-10 mb-xl-0 pe-10 pe-sm-0">
          <h5 class="fs-7 text-white mb-4" >About</h5>
          <ul class="list-unstyled">
            <li class="mb-2"><a class="d-inline-block text-light-dark" href="#" >Contact</a></li>
            <li class="mb-2"><a class="d-inline-block text-light-dark" href="#" >Blog</a></li>
            <li class="mb-2"><a class="d-inline-block text-light-dark" href="#" >Our Storry</a></li>
            <li><a class="d-inline-block text-light-dark" href="#"><span class="me-2" >Careers</span><span class="badge px-2 py-1 fs-10 bg-info text-white text-uppercase" >Hiring</span></a></li>
          </ul>
        </div>
        <div class="col-auto col-sm-6 col-xl-3 mb-10 mb-xl-0">
          <h5 class="fs-7 text-white mb-4" >Company</h5>
          <ul class="list-unstyled">
            <li class="mb-2"><a class="d-inline-block text-light-dark" href="#" >Press</a></li>
            <li class="mb-2"><a class="d-inline-block text-light-dark" href="#" >Brand Assets</a></li>
            <li class="mb-2"><a class="d-inline-block text-light-dark" href="#" >Changelog</a></li>
            <li><a class="d-inline-block text-light-dark" href="#" >Help centre</a></li>
          </ul>
        </div>
        <div class="col-12 col-xl-4">

<section class="py-10 bg-light-light">
  <div class="container">
    <div class="row mx-n2">
      <div class="col-12 col-lg-6 mb-4 mb-lg-0 px-2">
        <div class="py-20 px-8 px-sm-20 bg-white rounded-5">
          <div class="mw-2xl mx-auto">
            <div class="mw-md mb-32"><span class="badge mb-4 border border-dark" >Error</span>
              <h2 class="mb-6" >Error 404</h2>
              <p class="text-light-dark 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="btn btn-outline-dark" href="#"><span class="me-2" >Back to homepage</span>
                <svg class="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="mw-xs ms-auto text-end"><span class="d-block fs-9" >2023</span>
              <p class="text-light-dark mb-0" >
                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>

<section class="py-12 py-md-24 bg-light-light">
  <div class="container">
    <div class="row mb-20 align-items-end">
      <div class="col-12 col-lg-6 mb-8 mb-lg-0">
        <h1 >Blog</h1>
      </div>
      <div class="col-12 col-lg-6 text-end"><a class="d-inline-block pb-2 fw-semibold border-0 border-2 border-dark border-bottom" href="#"><span class="me-3" >See our blog</span>
          <svg class="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>
    <div class="row">
      <div class="col-12 col-lg-6 mb-8 mb-lg-0"><a class="d-block position-relative" href="#"><img class="d-block w-100 img-fluid rounded-5" style="max-height: 670px;" src="asitrastudio-assets/blog/blog-shadow.png" alt=""/>
          <div class="position-absolute bottom-0 start-0 mw-md mw-lg-xl p-9">
            <div class="mb-3"><span class="badge me-3 text-white border border-2 border-white" >Interior</span><span class="d-inline-block fs-9 text-white" >9 min read</span></div>
            <h3 class="fs-2 text-white" >How to decorating ourdoor sofa</h3>
          </div></a></div>
      <div class="col-12 col-lg-6">
        <div class="row h-100">
          <div class="col-12 col-md-7 mb-8 mb-md-0"><a class="d-block" href="#"><img class="d-block w-100 img-fluid mb-8 rounded-5" src="asitrastudio-assets/blog/blog2.png" alt=""/>
              <div class="mw-xs pe-5">
                <div class="mb-3"><span class="badge me-3 border border-dark" >Interior</span><span class="d-inline-block fs-9 text-secondary-light" >9 min read</span></div>
                <h4 class="fw-medium" >How to decorating ourdoor sofa</h4>

<section class="py-12 py-md-20 bg-light-light">
  <div class="container">
    <div class="row">
      <div class="col-lg-5 col-xl-4 mb-20 mb-lg-0">
        <div>
          <h1 class="mb-10" >Meet the team</h1><a class="d-inline-block pb-2 fw-semibold border-0 border-2 border-dark border-bottom" href="#"><span class="me-3" >See more people</span>
            <svg class="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="col-lg-7 col-xl-8">
        <div class="row">
          <div class="col-6 col-md-4 col-lg-6 col-xl-4 mb-12">
            <div><img class="img-fluid mb-6" src="asitrastudio-assets/team/team-avatar1.png" alt=""/><span class="d-block fs-9 text-secondary-light" >Executive Chairman</span><span class="d-block fs-4" >Jacob Jones</span></div>
          </div>
          <div class="col-6 col-md-4 col-lg-6 col-xl-4 mb-12">
            <div><img class="img-fluid mb-6" src="asitrastudio-assets/team/team-avatar2.png" alt=""/><span class="d-block fs-9 text-secondary-light" >Executive Chairman</span><span class="d-block fs-4" >Ronald Richards</span></div>
          </div>
          <div class="col-6 col-md-4 col-lg-6 col-xl-4 mb-12">
            <div><img class="img-fluid mb-6" src="asitrastudio-assets/team/team-avatar3.png" alt=""/><span class="d-block fs-9 text-secondary-light" >Executive Chairman</span><span class="d-block fs-4" >Leslie Alexander</span></div>
          </div>
          <div class="col-6 col-md-4 col-lg-6 col-xl-4 mb-12">

<section class="py-12 py-md-24 bg-light-light">
  <div class="container">
    <div class="mw-6xl px-8 mb-20 mx-auto text-center">
      <p class="fw-medium fs-4 mb-10"><span >KW70 Fix is a leading real estate investment firm in the World, headquartered in New York with offices in</span> <span class="fst-italic text-secondary-light" >London, Chicago, Barcelona, Vienna, Rome, 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. Once identified, we aim to bring our extensive knowledge and resources to these carefully chosen areas, partnering with local stakeholders to create a thriving physical environment that promotes growth and prosperity. </span></p><a class="d-inline-block pb-2 fw-semibold border-0 border-2 border-dark border-bottom" href="#"><span class="me-3" >Get to know us</span>
        <svg class="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="mw-sm mw-lg-2xl mx-auto mw-xl-none">
      <div class="row mx-0">
        <div class="col-12 col-lg-6 col-xl-3 p-0">
          <div class="d-flex align-items-end ps-8 pe-1 py-12 border" style="border-radius: 60px; height: 290px;">
            <div>
              <h5 class="fs-1 mb-5" >700+</h5><span class="d-block text-secondary-light" >Clients</span>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-6 col-xl-3 p-0">
          <div class="d-flex align-items-end ps-8 pe-1 py-12 border" style="border-radius: 60px; height: 290px;">
            <div>
              <h5 class="fs-1 mb-5" >40 000+</h5><span class="d-block text-secondary-light" >Projects</span>
            </div>
          </div>