Bootstrap 5 Components

<div class="position-fixed bottom-0 start-0 w-100 h-100" style="z-index: 50;">
  <div class="d-flex h-100 w-100 align-items-center">
    <div class="container py-16 pt-lg-24">
      <div class="mw-4xl mx-auto py-8 px-6 px-sm-14 w-100 bg-dark rounded-3">
        <p class="fw-medium text-light text-opacity-50 mb-6">We use our own and third-party cookies for analytical purposes and to show you advertisements and personalized content based on a profile created from the content you browse. You can accept all cookies or manage your preferences in the settings panel. More information can be found in the Cookie Policy.</p>
        <div class="row">
          <div class="col-12 col-sm-6 mb-3 mb-sm-0"><a class="btn py-2 fs-9 btn-light w-100" href="#">Ok</a></div>
          <div class="col-12 col-sm-6"><a class="btn py-2 fs-9 btn-outline-light w-100" href="#">No, thanks</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

<section class="py-12 py-24 bg-light bg-opacity-25 overflow-hidden">
  <div class="container mw-2xl mw-lg-8xl">
    <div class="mw-lg-2xl ms-lg-auto px-8 px-sm-12 pt-10 pb-20 bg-white rounded-4">
      <span class="d-block mb-4 fw-semibold">Join the Community</span>
      <h3 class="font-heading fs-2 mb-12">Newsletter</h3>
      <form action="">
        <div class="d-flex flex-column flex-sm-row gap-4">
          <input class="form-control bg-light bg-opacity-25 border-0" type="email" placeholder="Your Email">
          <button class="flex-shrink-0 btn btn-primary">Join now</button>
        </div>
      </form>
      <p class="mt-6 mb-0 fs-9 fw-medium">Get the ideas, tools and tips you need to grow your sound straight.</p>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-light bg-opacity-25">
  <div class="container mw-xl mw-lg-7xl">
    <h2 class="font-heading mb-14">Projects</h2>
    <div class="pt-2 border-top border-dark mb-16">
      <h5 class="font-heading mb-0">Do you have any question?</h5>
    </div>
    <div class="row">
      <div class="col-12 col-lg-6 mb-12 mb-lg-0">
        <div>
          <img class="d-block mb-6 w-100 img-fluid rounded-4" src="mirga-assets/images/projects/layer3.jpg" alt="">
          <h4 class="mb-6 fs-2 fw-medium text-dark">Weddedone digital</h4>
          <a class="btn btn-primary" href="#">More</a>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div>
          <img class="d-block mb-6 w-100 img-fluid rounded-4" src="mirga-assets/images/projects/layer4.jpg" alt="">
          <h4 class="mb-6 fs-2 fw-medium text-dark">Antopastroph</h4>
          <a class="btn btn-primary" href="#">More</a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-light bg-opacity-25">
  <div class="container mw-xl mw-lg-7xl">
    <div class="mw-xl mw-lg-3xl mx-auto text-center mb-20">
      <h1 class="font-heading mb-12">Send a message or chat with us</h1>
      <p class="lead fs-5 mb-0">Your journey to digital excellence starts here.</p>
    </div>
    <div class="row mb-n6">
      <div class="col-lg-6 mb-6">
        <div class="d-flex h-100 flex-column align-items-start px-8 px-sm-12 py-8 bg-white rounded-5">
          <span class="d-block fw-semibold mb-20">Phone number</span>
          <span class="d-block mt-auto fs-2 fw-medium text-dark">+41 337003 00</span>
        </div>
      </div>
      <div class="col-lg-6 mb-6">
        <div class="d-flex h-100 flex-column align-items-start px-8 px-sm-12 py-8 bg-white rounded-5">
          <span class="d-block fw-semibold mb-20">Email</span>
          <span class="d-block mt-auto fs-2 fw-medium text-dark">hi@contactmigra</span>
        </div>
      </div>
      <div class="col-lg-4 mb-6">
        <div class="position-relative h-100 rounded-5 overflow-hidden">
          <img class="img-fluid d-block w-100 h-100" src="mirga-assets/images/contact/woman2.jpg" alt="">
          <div class="position-absolute bottom-0 start-0 w-100 p-6"><a class="btn btn-primary w-100" href="#">Chat wit Yena</a></div>
        </div>

<section class="py-12 py-lg-24 bg-light bg-opacity-25">
  <div class="container mw-8xl">
    <div class="position-relative px-8 px-sm-10 py-32 rounded-4 bg-white">
      <div class="text-center position-relative">
        <span class="d-block text-dark fs-6 fw-semibold mb-6">Design room</span>
        <h2 class="font-heading mb-6">Turn inspiration into reality</h2>
        <p class="lead mb-14">Your journey to digital excellence starts here.</p>
        <a class="btn btn-primary" href="#">Start using Mirga</a>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-light bg-opacity-25">
  <div class="container mw-xl mw-md-7xl">
    <div class="text-center mb-20">
      <h1 class="font-heading mb-12">
        <span class="d-block">Join the community,</span>
        <div class="position-relative ms-4 d-inline-block">
          <div class="position-absolute top-0 end-0 me-n10 rounded-1 h-100 col-8 bg-danger-light bg-opacity-25"></div>
          <span class="position-relative">and change the</span>
        </div>
        <span class="d-block">future.</span>
      </h1>
      <p class="lead fs-5 mb-0">Your journey to digital excellence starts here.</p>
    </div>
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row mb-n5 mx-n2">
        <div class="col-lg-8 px-2 mb-5">
          <div class="pt-10 pb-12 px-10 rounded-4 bg-white">
            <div class="mw-md">
              <h6 class="fs-2 fw-medium mb-2">Digital app</h6>
              <p class="fw-medium mb-14">Can create, connect, verify, and search across all you knowledge platforms is one centralized, secure place - accelarating productivity.</p>
            </div>
            <div class="d-flex flex-column flex-lg-row justify-content-between align-items-end">
              <a class="btn btn-outline-primary" href="#">More</a>
              <img class="img-fluid order-first order-lg-last" src="mirga-assets/images/services/draw.png" alt="">

<section class="py-12 py-lg-24 bg-light bg-opacity-25">
  <div class="container mw-xl mw-lg-7xl">
    <h2 class="font-heading mb-14">Blog</h2>
    <div class="pt-2 border-top border-dark mb-14">
      <h5 class="font-heading mb-0">The most important news</h5>
    </div>
    <div class="row mb-n6">
      <div class="col-12 mb-6">
        <div class="px-8 py-10 px-md-12 pb-md-16 pt-md-10 bg-white rounded-4">
          <div class="row align-items-center">
            <div class="col-12 col-lg-7 mb-12 mb-lg-0">
              <div class="mw-xl">
                <span class="d-block fs-6 fw-semibold mb-6">Big news</span>
                <h2 class="font-heading mb-14">
                  <span>Your Guide to Higher Search</span>
                  <span class="position-relative d-inline-block">
                    <span>Rankings</span>
                    <div class="py-1 bg-success rounded-pill"></div>
                  </span>
                </h2>
                <p class="lead fw-medium mb-14 mb-md-24 mb-lg-32">Your journey to digital excellence starts here.</p>
                <div class="d-flex flex-column flex-md-row w-100 gap-4 gap-md-8 align-items-center">
                  <a class="btn btn-primary" href="#">Read more</a>
                  <span class="fs-6 fw-semibold">Thu 12 Oct, 4 AM</span>

<section class="position-relative py-16 bg-light bg-opacity-25 overflow-hidden">
  <div class="container mw-xl mw-lg-9xl">
    <h3 class="font-heading fs-2 mb-12">Testimonials</h3>
    <div class="d-flex w-100 mw-lg-8xl pe-lg-10 position-relative">
      <div class="flex-shrink-0 row flex-wrap flex-lg-nowrap w-100 flex-lg-nowrap">
        <div class="flex-shrink-0 col-12 col-lg-5 mb-4 mb-lg-0 me-lg-4 py-16 bg-white rounded-5">
          <div class="text-center">
            <img class="img-fluid d-block mb-6 mx-auto" src="mirga-assets/images/testimonials/avatar-man.png" alt="">
            <h6 class="fs-5 fw-bold mb-2">Mark Johanson Jr</h6>
            <span class="d-block fw-medium">Pink Ox</span>
            <span class="fw-medium">United States</span>
          </div>
        </div>
        <div class="flex-shrink-0 col-12 col-lg-7 ps-6 ps-sm-12 pb-24 pt-16 pe-6 pe-sm-20 bg-white rounded-5">
          <div class="d-sm-flex">
            <div class="mb-6 mb-sm-0 me-sm-8">
              <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="56" height="56" rx="28" fill="#F2F2F4"></rect>
                <path fill-rule="evenodd" clip-rule="evenodd" d="M23.5224 21H18.8895V26.7911H20.6268V31.9613L18 34.5881L22.0954 38.6836L25.5701 35.2089L26.4179 34.3611V21H23.5224ZM35.1045 21H30.4716V26.7911H32.2089V31.9613L29.5821 34.5881L33.6776 38.6836L37.1522 35.2089L38 34.3611V21H35.1045Z" fill="#FF8C68"></path>
              </svg>
            </div>
            <div>
              <p class="fs-3 text-dark fw-bold mb-0">Working with Migra has been a game-changer for our business. Their digital marketing strategies increased our online visibility and drove significant growth in traffic and conversions.</p>
              <p class="fs-3 text-dark fw-bold mb-0">Highly recommended!</p>

<section>
  <nav class="navbar navbar-expand-lg navbar-light">
    <div class="position-relative container" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
      <button class="navbar-burger p-0 me-8 bg-transparent border-0">
        <svg width="34" height="14" viewBox="0 0 34 14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_231_6602)"><rect width="34" height="3" rx="1.5" fill="#19191B"></rect><rect y="11" width="34" height="3" rx="1.5" fill="#19191B"></rect></g><defs><clipPath id="clip0_231_6602"><rect width="34" height="14" fill="white"></rect></clipPath></defs></svg>
      </button>
      <div class="collapse navbar-collapse" id="nav01">
        <ul class="navbar-nav ms-auto me-6">
          <li class="nav-item"><a class="nav-link" href="#">Products</a></li>
          <li class="nav-item"><a class="nav-link" href="#">What is Mirga</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Gallery</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Help</a></li>
        </ul>
      </div>
      <div class="d-none d-sm-block"><a class="btn btn-sm btn-outline-primary py-3" href="#">Contact us</a></div>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-100 mw-sm" 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 pt-5 pb-10 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" src="mirga-assets/images/logos/mirga-dark-logo.svg" alt="">

<section class="bg-dark overflow-hidden">
  <div class="border-bottom border-dark-light mb-12">
    <div class="container mw-9xl">
      <div class="d-flex flex-column flex-sm-row py-5 gap-6 align-items-start align-items-sm-center">
        <a class="btn text-white fw-medium p-0" href="#">Help Center</a><a class="btn text-white fw-medium p-0" href="#">Location</a><a class="btn ms-sm-auto text-white fw-medium p-0" href="#">Contact</a>
        <a class="btn text-white fw-medium p-0" href="#">
          <span class="me-6">Back to top</span>
          <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="20" cy="20" r="19.5" transform="rotate(90 20 20)" fill="white" stroke="#E5E5E7"></circle>
            <path d="M16.4123 21.1235L19.6007 17.9351L22.7891 21.1235" stroke="#19191B" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
  <div class="pb-16 pb-lg-32">
    <div class="container mw-9xl">
      <div class="row">
        <div class="col-lg-8 mb-20 mb-lg-0">
          <div class="row mb-n12">
            <div class="col-12 col-sm-6 col-md-3 mb-12">
              <div>
                <h6 class="fs-6 fw-medium text-white mb-8">Product</h6>
                <ul class="list-unstyled mb-0">

<section class="py-12 py-lg-24 bg-light bg-opacity-25">
  <div class="container mw-md mw-sm-8xl">
    <div class="mb-16">
      <h2 class="h2 fw-bold mb-10">FAQ’s</h2>
      <p class="lead fs-4 mb-0">Your journey to digital excellence starts here.</p>
    </div>
    <div class="border-top mb-20">
      <div class="row">
        <div class="col-12 col-lg-4 col-xl-3">
          <div class="mw-sm pt-6 pe-10">
            <h6 class="fs-3 fw-semibold mb-6">Your Account</h6>
            <p class="lead mb-0">It's essential because it allows you to reach a wider audience, track performance, and adapt your campaigns for better results.</p>
          </div>
        </div>
        <div class="col-12 col-lg-8 col-xl-9">
          <div class="mw-lg-4xl pt-20 ms-lg-auto">
            <div class="row mb-n14">
              <div class="col-12 col-sm-6 mb-14">
                <div class="mw-xs">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_231_2726)">
                      <path d="M16 0C7.17733 0 0 7.17733 0 16C0 24.8227 7.17733 32 16 32C24.8227 32 32 24.8227 32 16C32 7.17733 24.8227 0 16 0ZM26.5053 12.1613C25.7547 12.912 24.7373 13.3333 23.6773 13.3333H20.668L21.992 14.6573C22.4253 15.0907 22.668 15.6773 22.668 16.2893V18.0267C22.668 18.4453 22.5547 18.856 22.3387 19.2147L19.012 24.76C18.7987 25.116 18.4147 25.3333 18 25.3333H16.924C16.3827 25.3333 15.9107 24.9653 15.7787 24.4387L14.8547 20.74C14.7453 20.304 14.3547 19.9987 13.9053 19.9987H12.0027C10.5293 19.9987 9.336 18.8053 9.336 17.332V15.9387C9.336 15.1427 9.73333 14.4 10.396 13.9587L12.7373 12.3987C13.128 12.1387 13.588 11.9987 14.0573 11.9987H17.568C18.1773 11.9987 18.6707 11.5053 18.6707 10.896V9.788C18.6707 9.496 18.5547 9.21467 18.348 9.008L17.28 7.94C16.9227 7.58267 16.3667 7.51333 15.9333 7.77467L13.872 9.012C13.5227 9.22133 13.124 9.332 12.716 9.332H11.748C11.1533 9.332 10.6707 8.84933 10.6707 8.25467V7.15333C10.6707 6.84267 10.536 6.548 10.3027 6.34267L8.64267 4.89067C10.7533 3.48667 13.284 2.664 16.0027 2.664C21.4013 2.664 26.0507 5.896 28.1453 10.5213L26.5067 12.16L26.5053 12.1613Z" fill="#19191B"></path>
                    </g>
                  </svg>

<section class="py-12 py-lg-24 bg-light bg-opacity-25">
  <div class="container mw-7xl">
    <div class="pt-12 pb-24 px-5 px-sm-16 bg-white rounded-5">
      <div class="mb-12">
        <a class="btn d-inline-flex align-items-center border-0 p-0 fs-7 fw-medium text-muted" href="#">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.4167 10H5M5 10L10 5M5 10L10 15" stroke="#58575E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="ms-2">Back to Blog</span>
        </a>
      </div>
      <div class="mw-4xl mb-12">
        <span class="d-block mb-6 fs-6 fw-semibold">Thu 12 Oct, 4 AM</span>
        <h3 class="font-heading lh-sm display-5 fw-semibold mb-6">
          <span class="d-block">The Rise of Video Marketing:</span>
          <span>Engage Your Audience Like Never Before!</span>
        </h3>
        <div class="d-flex align-items-center">
          <div class="d-flex me-6 align-items-center">
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="12" fill="#B5FDC0"></rect></svg>
            <span class="fw-medium ms-2">design</span>
          </div>
          <div class="d-flex align-items-center">
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="12" fill="#FFB39A"></rect></svg>

<section class="py-12 py-lg-24 bg-light bg-opacity-25">
  <div class="container mw-xl mx-auto mw-lg-7xl">
    <h2 class="font-heading h4 mb-14">Talk to our sales team</h2>
    <div class="row">
      <div class="col-12 col-lg-6 mb-8 mb-lg-0">
        <div class="h-100 px-5 px-sm-12 pt-12 pb-14 bg-white rounded-4">
          <div class="pb-10 mb-10 border-bottom">
            <span class="d-block mb-4 fs-6 fw-semibold">Our office</span>
            <h5 class="fs-3 fw-medium text-dark mb-6">
              <span class="d-block">Mirga LTD</span>
              <span class="d-block">1400 Cherokee Rd a</span>
              <span class="d-block">Florence, SC 293501</span>
              <span class="d-block">United States</span>
            </h5>
            <span class="d-block fs-7 fw-medium">Opening hours 9am - 5pm</span>
          </div>
          <div class="pb-10 mb-10 border-bottom">
            <span class="d-block fs-6 fw-semibold">Phone number</span>
            <h5 class="fs-3 fw-medium text-dark mb-4">+41 337003 00</h5>
            <span class="d-block fs-6 fw-semibold">Email</span>
            <h5 class="fs-3 fw-medium text-dark mb-12">hi@contactmigra</h5>
            <div class="d-flex align-items-center">
              <a class="btn p-0 me-3 d-flex align-items-center justify-content-center btn-light rounded-pill" href="#" style="width: 46px; height: 46px;">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="py-12 py-lg-24 bg-dark overflow-hidden">
  <div class="container mw-8xl">
    <div class="position-relative d-inline-block mb-14">
      <span class="position-absolute top-0 end-0 me-n7 me-md-n6 me-lg-n5">
        <svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M22.1104 0H7.89656C3.53541 0 0 3.54358 0 7.9148V22.1614C0 26.5327 3.53541 30.0763 7.89656 30.0763H22.1104C26.4715 30.0763 30.0069 26.5327 30.0069 22.1614V7.9148C30.0069 3.54358 26.4715 0 22.1104 0Z" fill="#FEE34E"></path>
          <path d="M15.3529 7.38071C14.3388 6.36424 12.6946 6.36424 11.6805 7.38071C10.6663 8.39718 10.6663 10.0452 11.6805 11.0617L15.812 15.2028C16.8261 16.2192 18.4704 16.2192 19.4845 15.2028C20.4986 14.1863 20.4986 12.5383 19.4845 11.5218L15.3529 7.38071Z" fill="#19191B"></path>
          <path d="M13.4047 14.3978C12.3906 13.3813 10.7464 13.3813 9.73223 14.3978C8.71811 15.4143 8.71811 17.0623 9.73223 18.0788L13.8638 22.2199C14.8779 23.2363 16.5221 23.2363 17.5362 22.2199C18.5504 21.2034 18.5504 19.5554 17.5362 18.5389L13.4047 14.3978Z" fill="#19191B"></path>
        </svg>
      </span>
      <h2 class="position-relative font-heading text-white mb-0">Pricing</h2>
    </div>
    <div class="pt-2 border-top border-dark-light mb-32">
      <h5 class="mw-3xl fs-5 fw-semibold lh-sm text-light text-opacity-50 mb-0">Simple pricing that fits for everyone for the price of a cup of coffee. Start for free, no credit card required.</h5>
    </div>
    <div class="mw-md mw-md-none mx-auto">
      <div class="row mb-16 align-items-center">
        <div class="col-lg-8 col-xl-6 mb-12 mb-lg-0">
          <div class="row align-items-center">
            <div class="col-md-6 mb-6 mb-md-0">
              <div class="p-10 mb-6 rounded-4 bg-white">
                <span class="d-block mb-4 fs-3 fw-bold text-dark">Free</span>
                <div class="d-flex mb-12 align-items-center">
                  <span class="fs-2 fw-bold text-dark">$0</span>

<section class="py-12 py-lg-24 bg-light bg-opacity-25">
  <div class="container mw-4xl mw-xl-8xl">
    <h2 class="font-heading mb-14">Blog</h2>
    <div class="pt-2 border-top border-dark mb-14">
      <h5 class="font-heading mb-0">The most important news</h5>
    </div>
    <div class="row">
      <div class="col-12 col-xl-6 mb-8 mb-xl-0">
        <a class="position-relative btn mb-8 w-100 px-12 pb-12 pt-80 text-start rounded-4 overflow-hidden" href="#">
          <img class="position-absolute top-0 start-0 h-100 w-100 img-fluid" src="mirga-assets/images/blog/blog-picture3.png" alt="">
          <div class="position-relative mw-lg">
            <span class="d-block mb-6 fs-6 text-white">Big news</span>
            <h4 class="fs-2 font-heading text-white fw-medium mb-6">
              <span class="d-block">Unlocking the Power of SEO:</span>
              <span>Your Guide to Higher Search Rankings</span>
            </h4>
            <div class="d-flex align-items-center">
              <div class="d-flex me-6 align-items-center">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="12" fill="#B5FDC0"></rect></svg>
                <span class="fw-medium text-white ms-2">design</span>
              </div>
              <div class="d-flex align-items-center">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="12" fill="#FFB39A"></rect></svg>
                <span class="fw-medium text-white ms-2">vid marketing</span>

<section class="position-relative py-12 py-lg-24 bg-light bg-opacity-25 overflow-hidden">
  <div class="container mw-2xl mx-auto mw-md-7xl">
    <div class="mw-4xl mx-auto text-center mb-32">
      <h2 class="font-heading fw-semibold h1 mb-10">
        <span class="d-block">Our dedicated team</span>
        <span>of experts</span>
      </h2>
      <p class="lead fs-5 mb-0">At the heart of our success is a diverse and talented team.</p>
    </div>
    <div class="mw-lg mx-auto mw-md-none">
      <div class="row mb-20">
        <div class="col-md-8 mb-6 mb-md-0">
          <div class="px-12 pt-16 pb-20 bg-white rounded-4">
            <div>
              <h2 class="font-heading mb-32">
                <span class="d-block">Empowering</span>
                <span class="d-block">through online</span>
                <span class="d-inline-block position-relative">
                  <span>learning.</span>
                  <div class="py-1 bg-success rounded-pill"></div>
                </span>
              </h2>
              <div class="d-flex flex-wrap mw-lg mb-n5">
                <img class="d-inline-block mb-5 me-6 me-sm-12 img-fluid rounded-pill" style="width: 72px; height: 72px;" src="mirga-assets/images/team/avatar1.png" alt="">

<div class="position-fixed top-0 start-0 w-100 bg-light" style="z-index: 50;">
  <div class="container py-12">
    <div class="d-flex justify-content-center">
      <div class="alert alert-danger px-8 border-0" role="alert">
        <div class="d-flex align-items-center">
          <div class="flex-shrink-0 pe-6">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="31" height="31" rx="15.5" stroke="#19191B"></rect><line x1="21.3536" y1="11.3536" x2="11.3536" y2="21.3536" stroke="#19191B"></line><line x1="21.6464" y1="21.3521" x2="11.648" y2="11.3536" stroke="#19191B"></line></svg>
          </div>
          <div class="py-2 ps-5 border-start border-dark-light border-opacity-10">
            <span class="d-inline-block fw-semibold">Something went wrong while fetching your license’s data. Please try again contact us.</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<section class="py-12 py-lg-24 bg-light bg-opacity-25">
  <div class="container mw-3xl mw-lg-8xl">
    <div class="px-8 px-sm-12 px-lg-24 py-16 bg-white rounded-4">
      <div class="row mb-12 align-items-end">
        <div class="col-9">
          <img class="d-block w-100 img-fluid rounded-4" src="mirga-assets/images/about/picture1.png" alt="">
        </div>
        <div class="col-3">
          <img class="d-block w-100 img-fluid rounded-4" src="mirga-assets/images/about/picture2.png" alt="">
        </div>
      </div>
      <div class="mw-5xl mx-auto">
        <h1 class="display-3 fw-bold">Empowering</h1>
        <h1 class="display-3 fw-bold">through online learning.</h1>
        <div class="mw-md mw-lg-3xl mx-auto">
          <h1 class="display-3 fw-bold mb-16">This is our life.</h1>
          <p class="lead fs-5 mb-12 mb-lg-20">Your journey to digital excellence starts here.</p>
          <div class="row mx-n7">
            <div class="col-12 col-lg-6 px-7 mb-4 mb-lg-0">
              <p class="fs-7 fw-medium mb-0">For over 35 years, we've been sharing our passion for digital education with the world. Join us and experience the joy of learning like never before.</p>
            </div>
            <div class="col-12 col-lg-6 px-7">
              <p class="fs-7 fw-medium mb-0">For over 35 years, we've been sharing our passion for digital education with the world. Join us and experience the joy of learning like never before.</p>
            </div>

<section class="py-10 bg-light bg-opacity-25 overflow-hidden">
  <div class="container mw-8xl">
    <div class="position-relative px-8 py-10 px-sm-10 bg-white rounded-5">
      <div class="row">
        <div class="col-12 col-lg-8 mb-12 mb-lg-0">
          <div class="d-flex flex-column h-100 align-items-start mw-xl ps-2 pt-6">
            <h3 class="font-heading h4 mb-12">
              <span class="d-block">Shh*</span>
              <span class="d-inline-block position-relative">
                <span>Something</span>
                <div class="py-1 bg-success rounded-pill"></div>
              </span>
              <span class="d-inline-block">has wrong.</span>
            </h3>
            <p class="lead fs-5 mb-16">That page isn’t doesn’t exist or we can’t find it.</p>
            <a class="btn mt-auto btn-primary" href="#">Homepage</a>
          </div>
        </div>
        <div class="col-12 col-lg-4 pt-12 pt-lg-0 position-relative">
          <img class="d-block mx-auto me-lg-0 img-fluid rounded-5" src="mirga-assets/images/http-codes/face2.jpg" alt="">
        </div>
      </div>
    </div>
  </div>

<section class="py-12 py-lg-16 bg-light bg-opacity-25">
  <div class="container mw-8xl">
    <h6 class="font-heading fs-6 fw-medium mb-10 text-center">Trusted by top brands</h6>
    <div class="d-flex flex-wrap align-items-center justify-content-center mx-n8">
      <div class="p-8">
        <img class="img-fluid" src="mirga-assets/images/logos/placeholder-logo1.svg" alt="">
      </div>
      <div class="p-8">
        <img class="img-fluid" src="mirga-assets/images/logos/placeholder-logo2.svg" alt="">
      </div>
      <div class="p-8">
        <img class="img-fluid" src="mirga-assets/images/logos/placeholder-logo3.svg" alt="">
      </div>
      <div class="p-8">
        <img class="img-fluid" src="mirga-assets/images/logos/placeholder-logo4.svg" alt="">
      </div>
    </div>
    <div class="d-flex flex-wrap align-items-center justify-content-center mx-n8">
      <div class="p-8">
        <img class="img-fluid" src="mirga-assets/images/logos/placeholder-logo5.svg" alt="">
      </div>
      <div class="p-8">
        <img class="img-fluid" src="mirga-assets/images/logos/placeholder-logo6.svg" alt="">
      </div>