Services Components in Asitrastudio library

<section class="relative py-12 md:py-24 bg-coolGray-50 overflow-hidden">
  <div class="container mx-auto px-4 relative">
    <img class="hidden sm:block absolute top-0 left-1/2 lg:ml-20 xl:-ml-52 mt-8 lg:mt-20 rounded-4xl" src="asitrastudio-assets/services/map-small.png" alt="">
    <h1 class="font-heading text-6xl md:text-10xl tracking-tighter mb-24">Services</h1>
    <a class="relative group block xl:flex pb-8 mb-24 items-end border-b border-black" href="#">
      <div class="mb-8 xl:mb-0">
        <span class="block lg:-mb-1 text-sm text-coolGray-600">01</span>
        <h3 class="text-4xl xs:text-6xl lg:text-7xl inline-block pb-2 border-b-3 border-transparent group-hover:border-black transition duration-150">De-risking your project</h3>
      </div>
      <div class="max-w-md text-right mb-8 xl:mb-0 ml-auto xl:mr-20">
        <p>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>
      <div class="text-right">
        <span class="inline-block group-hover:rotate-45 transform transition duration-100">
          <svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M30 3L3 30" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M30 27.758V3H5.24196" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
      </div>
    </a>
    <a class="group block xl:flex pb-8 mb-24 items-end border-b border-black" href="#">
      <div class="mb-8 xl:mb-0">
        <span class="block lg:-mb-1 text-sm text-coolGray-600">02</span>
        <h3 class="text-4xl xs:text-6xl lg:text-7xl inline-block pb-2 border-b-3 border-transparent group-hover:border-black transition duration-150">Planning strategies</h3>
      </div>
      <div class="max-w-md text-right mb-8 xl:mb-0 ml-auto xl:mr-20">
        <p>This process is led either by a chartered planning consultant or chartered architect and entails the preparation of concept designs and planning strategies.</p>
      </div>
      <div class="text-right">
        <span class="inline-block group-hover:rotate-45 transform transition duration-100">
          <svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M30 3L3 30" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M30 27.758V3H5.24196" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
      </div>
    </a>
    <a class="group block xl:flex pb-8 items-end border-b border-black" href="#">
      <div class="mb-8 xl:mb-0">
        <span class="block lg:-mb-1 text-sm text-coolGray-600">03</span>
        <h3 class="text-4xl xs:text-6xl lg:text-7xl inline-block border-b-3 border-transparent group-hover:border-black transition duration-150">Return on investment</h3>
      </div>
      <div class="max-w-md text-right mb-8 xl:mb-0 ml-auto xl:mr-20">
        <p>During this phase the design is developed to meet the required technical standards to meet building regulations and incorporate sustainability strategies.</p>
      </div>
      <div class="text-right">
        <span class="inline-block group-hover:rotate-45 transform transition duration-100">
          <svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M30 3L3 30" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M30 27.758V3H5.24196" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
      </div>
    </a>
  </div>
</section>

<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>
        </div>
        <div class="has-mw-md mb-8 mb-0-widescreen ml-auto mr-20-widescreen">
          <p class="has-text-right has-text-dark">This process is led either by a chartered planning consultant or chartered architect and entails the preparation of concept designs and planning strategies.</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 3L3 30" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M30 27.758V3H5.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 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">03</span>
          <h3 class="is-size-3 has-text-dark">Return on investment</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">During this phase the design is developed to meet the required technical standards to meet building regulations and incorporate sustainability strategies.</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 3L3 30" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M30 27.758V3H5.24196" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
      </div>
    </div>
  </div>
</section>

<section class="position-relative py-12 py-md-24 bg-light-light overflow-hidden">
  <div class="container position-relative"><img class="d-none d-sm-block position-absolute top-0 start-50 ms-lg-20 ms-xl-n52 mt-8 mt-lg-20 img-fluid rounded-5" style="z-index: 0;" src="asitrastudio-assets/services/map-small.png" alt=""/>
    <h1 class="fw-medium mb-24" >Services</h1>
    <div class="position-relative d-xl-flex mw-xl mw-xl-none mx-auto pb-8 mb-24 align-items-end border-bottom border-2 border-dark">
      <div class="mb-8 mb-xl-0"><span class="d-block mb-n2 fs-9 fw-medium text-secondary-light" >01</span>
        <h3 class="fw-medium" >De-risking your project</h3>
      </div>
      <div class="mw-md text-end mb-8 mb-xl-0 ms-auto me-xl-20">
        <p class="mb-0" >
          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="d-block text-end">
        <svg width="33" height="33" viewbox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M30 3L3 30" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M30 27.758V3H5.24196" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></span>
    </div>
    <div class="d-xl-flex mw-xl mw-xl-none mx-auto pb-8 mb-24 align-items-end border-bottom border-2 border-dark">
      <div class="mb-8 mb-xl-0"><span class="d-block mb-n2 fs-9 fw-medium text-secondary-light" >02</span>
        <h3 class="fw-medium" >Planning strategies</h3>
      </div>
      <div class="mw-md text-end mb-8 mb-xl-0 ms-auto me-xl-20">
        <p class="mb-0" >
          This process is led either by a chartered planning consultant or chartered architect and entails the
          preparation of
          concept designs and planning strategies.
        </p>
      </div><span class="d-block text-end">
        <svg width="33" height="33" viewbox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M30 3L3 30" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M30 27.758V3H5.24196" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></span>
    </div>
    <div class="d-xl-flex mw-xl mw-xl-none mx-auto pb-8 align-items-end border-bottom border-2 border-dark">
      <div class="mb-8 mb-xl-0"><span class="d-block mb-n2 fs-9 fw-medium text-secondary-light" >03</span>
        <h3 class="fw-medium" >Return on investment</h3>
      </div>
      <div class="mw-md text-end mb-8 mb-xl-0 ms-auto me-xl-20">
        <p class="mb-0" >
          During this phase the design is developed to meet the required technical standards to meet building regulations and
          incorporate sustainability strategies.
        </p>
      </div><span class="d-block text-end">
        <svg width="33" height="33" viewbox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M30 3L3 30" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M30 27.758V3H5.24196" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></span>
    </div>
  </div>
</section>