<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>
<div class="container">
<div class="position-relative mx-auto mb-12 pb-12 border-bottom">
<div>
<h1 class="display-1">We create modern architecture</h1>
<div class="d-none d-xl-block position-absolute bottom-0 end-0 mw-sm mb-8">
<span class="d-block mb-n1 fs-10 text-end fw-medium">Since</span>
<span class="d-block mb-3 fs-10 text-end fw-medium">1979</span>
<p class="text-end fw-medium">
<span class="d-block">Duoloco® is a strategic branding agency</span>
<span class="d-block">focused on brand creation, rebrands, and brand</span>
<span class="d-block">transformation for progressive companies.</span>
</p>
</div>
<div class="d-xl-none mt-10 mw-sm ms-auto">
<span class="d-block mb-n1 fs-10 text-end fw-medium">Since</span>
<span class="d-block mb-3 fs-10 text-end fw-medium">1979</span>
<p class="text-end fw-medium">
<span class="d-block">Duoloco® is a strategic branding agency</span>
<span class="d-block">focused on brand creation, rebrands, and brand</span>
<span class="d-block">transformation for progressive companies.</span>
</p>
</div>
</div>
</div>
<div class="row align-items-end">
<div class="col-12 col-md-7 position-relative">
<div class="position-absolute top-0 end-0 mt-4 me-5 d-flex align-items-center justify-content-center" style="width: 180px; height: 180px;">
<img class="position-absolute top-0 start-0 w-100 h-100 spin" src="asitrastudio-assets/headers/spin-bonus.svg" alt="">
<img class="position-relative" src="asitrastudio-assets/headers/arrow-spin.svg" alt="">
</div>
<img class="imd-fluid w-100 rounded-top" style="object-fit: cover; height: 300px;" src="asitrastudio-assets/headers/header-photo-horizontal.png" alt="">
</div>
<div class="d-none d-md-block col-12 col-md-5">
<div class="row">
<div class="col-5">
<img class="img-fluid w-100 rounded-top" style="object-fit: cover; height: 300px;" src="asitrastudio-assets/headers/header-photo-small2.png" alt="">
</div>
<div class="col-7">
<img class="img-fluid w-100 rounded-top" style="object-fit: cover; height: 300px;" src="asitrastudio-assets/headers/header-photo1.png" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-xs" style="z-index: 9999;">
<div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark" style="opacity: 75%;"></div>
<nav class="position-relative h-100 w-100 d-flex flex-column justify-content-between py-8 px-8 bg-white overflow-auto">
<div class="d-flex align-items-center">
<a class="me-auto h4 mb-0 text-decoration-none" href="#">
<img class="img-fluid" style="height: 16px;" src="asitrastudio-assets/logos/logo-asi.svg" alt="">
</a>
<a class="navbar-close" href="#">
<svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
<div class="py-12">
<ul class="nav flex-column">
<li class="nav-item mb-6"><a class="nav-link text-dark" href="#">About</a></li>
<li class="nav-item mb-6"><a class="nav-link text-dark" href="#">Services</a></li>
<li class="nav-item mb-6"><a class="nav-link text-dark" href="#">Projects</a></li>
<li class="nav-item"><a class="nav-link text-dark" href="#">Contact us</a></li>
</ul>
</div>
<div><a class="btn btn-outline-dark mb-3 w-100 rounded-pill" href="#">Login</a><a class="btn btn-primary w-100 rounded-pill" href="#">Sign in</a></div>
</nav>
</div>
</section>