UI Components – Saturn Library

<section class="py-12 py-lg-16 bg-light-light position-relative overflow-hidden">
  <div class="container position-relative">
    <img class="position-absolute top-0 start-0" src="saturn-assets/images/team/full-blue-light.png" alt="">
    <img class="position-absolute bottom-0 end-0" src="saturn-assets/images/team/full-orange-light.png" alt="">
    <div class="position-relative">
      <div class="mw-2xl mx-auto mb-24 text-center">
        <h2 class="font-heading mb-8">
          <span>Get to know our amazing</span>
          <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">Team</span>
        </h2>
        <p class="lead text-secondary mb-6">Mi turpis turpis in justo pellentesque id nibh praesent.</p>
        <a class="btn btn-outline-light text-primary rounded-pill" href="#">
          <span>See More Team</span>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14.83 11.29L10.59 7.05C10.497 6.95627 10.3864 6.88188 10.2646 6.83111C10.1427 6.78034 10.012 6.7542 9.88 6.7542C9.74799 6.7542 9.61729 6.78034 9.49543 6.83111C9.37357 6.88188 9.26297 6.95627 9.17 7.05C8.98375 7.23736 8.87921 7.49082 8.87921 7.755C8.87921 8.01919 8.98375 8.27264 9.17 8.46L12.71 12L9.17 15.54C8.98375 15.7274 8.87921 15.9808 8.87921 16.245C8.87921 16.5092 8.98375 16.7626 9.17 16.95C9.26344 17.0427 9.37426 17.116 9.4961 17.1658C9.61794 17.2155 9.7484 17.2408 9.88 17.24C10.0116 17.2408 10.1421 17.2155 10.2639 17.1658C10.3857 17.116 10.4966 17.0427 10.59 16.95L14.83 12.71C14.9237 12.617 14.9981 12.5064 15.0489 12.3846C15.0997 12.2627 15.1258 12.132 15.1258 12C15.1258 11.868 15.0997 11.7373 15.0489 11.6154C14.9981 11.4936 14.9237 11.383 14.83 11.29Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
      <div class="mw-sm mx-auto mw-md-none">
        <div class="row mb-n8">
          <div class="col-12 col-md-6 col-lg-4 mb-8">
            <div class="text-center bg-white py-10 px-10 rounded-1">
              <img class="img-fluid d-block mx-auto mb-6" src="saturn-assets/images/team/avatar-sm-circle1.png" alt="">
              <span class="d-block fs-5 fw-bold mb-2">Annette Black</span>

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <div class="position-relative container">
    <div class="row">
      <div class="col-lg-6 mb-12 mb-lg-0">
        <div class="mw-lg mx-auto mx-lg-0">
          <span class="badge bg-primary-light px-3 py-2 text-primary mb-8">👋 MEET SATURN UI LIBRARY</span>
          <h2 class="font-heading mb-8">
            <span>Create</span>
            <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">Sensational</span>
            <span>UI Library</span>
          </h2>
          <ul class="list-unstyled mb-0">
            <li class="d-flex mb-4 align-items-center">
              <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="11" cy="11" r="11" fill="#00AD6F"></circle>
                <path d="M15.6666 7.5L9.24992 13.9167L6.33325 11" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="ms-3 text-secondary">Agile web design and development methodology</span>
            </li>
            <li class="d-flex mb-4 align-items-center">
              <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="11" cy="11" r="11" fill="#00AD6F"></circle>
                <path d="M15.6666 7.5L9.24992 13.9167L6.33325 11" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <img class="position-absolute bottom-0 start-50 translate-middle-x" src="saturn-assets/images/footers/orange-light-bottom.png" alt="">
  <img class="position-absolute top-0 start-0" src="saturn-assets/images/footers/blue-light-left.png" alt="">
  <div class="container position-relative">
    <div class="d-md-flex pb-10 mb-10 align-items-center justify-content-between border-bottom">
      <a class="btn btn-link p-0 mb-10 mb-md-0" href="#">
        <img class="img-fluid" src="saturn-assets/logos/logo-saturn-dark.svg" alt="">
      </a>
      <div class="d-flex flex-column flex-sm-row gap-8 align-items-sm-center">
        <span class="text-white">Ready to get collaborate?</span>
        <a class="btn btn-sm btn-primary" href="#">Get Started</a>
      </div>
    </div>
    <div class="row mb-16">
      <div class="col-12 col-lg-4 mb-12 mb-lg-0">
        <div class="mw-sm">
          <h6 class="mw-xs font-heading fs-5 lh-sm mb-3">Subscribe to our newsletter</h6>
          <form action="">
            
              <label class="form-label fs-9 text-white" for="">Email</label>
              <div class="d-flex flex-column flex-sm-row gap-4">
                <div class="position-relative d-flex w-100 bg-white border rounded-1">
                  <span class="position-absolute bottom-0 start-0 ms-3 translate-middle-y">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <img class="d-none d-sm-block position-absolute top-0 start-0 mt-24" src="saturn-assets/images/contact/dots-side-1.svg" alt="">
  <img class="d-none d-sm-block position-absolute bottom-0 end-0 mb-24" src="saturn-assets/images/contact/dots-side-2.svg" alt="">
  <div class="container position-relative">
    <div class="mw-2xl mx-auto mb-20 text-center">
      <span class="badge px-4 py-2 text-primary bg-primary-light mb-4">READY TO SUPPORT</span>
      <h3 class="font-heading mb-4">
        <span>Let’s stay</span>
        <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">connected</span>
      </h3>
      <p class="lead text-secondary">We help people to grow their business using saturn ui library with professional and powerfull solution.</p>
    </div>
    <div class="mw-2xl mx-auto mw-xl-none">
      <div class="row mb-14 align-items-center justify-content-between">
        <div class="col-12 col-xl-auto mb-12 mb-xl-0">
          <div class="d-sm-flex align-items-center">
            <span>
              <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="80" y="80" width="80" height="80" rx="40" transform="rotate(-180 80 80)" fill="#9FE2FF"></rect>
                <path d="M49.92 41.3332C49.6267 41.3332 49.32 41.2399 49.0267 41.1732C48.4327 41.0423 47.8489 40.8686 47.28 40.6532C46.6615 40.4282 45.9815 40.4399 45.3711 40.686C44.7606 40.9322 44.2628 41.3954 43.9733 41.9866L43.68 42.5866C42.3813 41.8641 41.188 40.9669 40.1333 39.9199C39.0864 38.8653 38.1891 37.6719 37.4667 36.3732L38.0267 35.9999C38.6178 35.7105 39.0811 35.2126 39.3272 34.6022C39.5734 33.9917 39.585 33.3118 39.36 32.6932C39.1483 32.1231 38.9746 31.5396 38.84 30.9466C38.7733 30.6532 38.72 30.3466 38.68 30.0399C38.5181 29.1007 38.0262 28.2502 37.2928 27.6416C36.5595 27.0329 35.6329 26.7061 34.68 26.7199H30.68C30.1054 26.7145 29.5363 26.833 29.0116 27.0673C28.4869 27.3016 28.0188 27.6462 27.6393 28.0776C27.2597 28.5091 26.9775 29.0172 26.812 29.5675C26.6465 30.1178 26.6015 30.6973 26.68 31.2666C27.3903 36.8524 29.9414 42.0424 33.9302 46.0168C37.919 49.9911 43.1183 52.5233 48.7067 53.2132H49.2133C50.1966 53.2147 51.1459 52.8539 51.88 52.1999C52.3018 51.8226 52.6388 51.3601 52.8686 50.843C53.0985 50.3259 53.216 49.7658 53.2133 49.1999V45.1999C53.197 44.2738 52.8598 43.382 52.2591 42.6768C51.6585 41.9716 50.8318 41.4967 49.92 41.3332ZM50.5867 49.3332C50.5864 49.5226 50.5459 49.7096 50.4677 49.8821C50.3896 50.0545 50.2756 50.2083 50.1333 50.3332C49.9872 50.4664 49.8133 50.5654 49.6242 50.623C49.4351 50.6807 49.2356 50.6955 49.04 50.6666C44.0465 50.0263 39.4083 47.7419 35.857 44.1736C32.3056 40.6054 30.0432 35.9564 29.4267 30.9599C29.4055 30.7646 29.4241 30.567 29.4813 30.3791C29.5386 30.1912 29.6334 30.0168 29.76 29.8666C29.885 29.7243 30.0388 29.6104 30.2112 29.5322C30.3836 29.454 30.5707 29.4135 30.76 29.4132H34.76C35.0701 29.4063 35.3728 29.5077 35.6162 29.7C35.8596 29.8923 36.0283 30.1633 36.0933 30.4666C36.1467 30.831 36.2133 31.191 36.2933 31.5466C36.4474 32.2494 36.6524 32.9401 36.9067 33.6132L35.04 34.4799C34.8804 34.5531 34.7368 34.6572 34.6176 34.786C34.4983 34.9149 34.4056 35.0661 34.3449 35.2308C34.2842 35.3956 34.2566 35.5707 34.2638 35.7462C34.271 35.9217 34.3127 36.094 34.3867 36.2532C36.3056 40.3636 39.6097 43.6676 43.72 45.5866C44.0446 45.7199 44.4087 45.7199 44.7333 45.5866C44.8996 45.5271 45.0524 45.4352 45.1829 45.3162C45.3134 45.1971 45.4189 45.0534 45.4933 44.8932L46.32 43.0266C47.0093 43.2731 47.7128 43.4779 48.4267 43.6399C48.7822 43.7199 49.1422 43.7866 49.5067 43.8399C49.8099 43.905 50.081 44.0737 50.2733 44.317C50.4655 44.5604 50.5669 44.8632 50.56 45.1732L50.5867 49.3332ZM49.3333 37.3332C49.687 37.3332 50.0261 37.1928 50.2762 36.9427C50.5262 36.6927 50.6667 36.3535 50.6667 35.9999V30.6666C50.6667 30.313 50.5262 29.9738 50.2762 29.7238C50.0261 29.4737 49.687 29.3332 49.3333 29.3332C48.9797 29.3332 48.6406 29.4737 48.3905 29.7238C48.1405 29.9738 48 30.313 48 30.6666V35.9999C48 36.3535 48.1405 36.6927 48.3905 36.9427C48.6406 37.1928 48.9797 37.3332 49.3333 37.3332ZM44 37.3332C44.3536 37.3332 44.6928 37.1928 44.9428 36.9427C45.1929 36.6927 45.3333 36.3535 45.3333 35.9999V30.6666C45.3333 30.313 45.1929 29.9738 44.9428 29.7238C44.6928 29.4737 44.3536 29.3332 44 29.3332C43.6464 29.3332 43.3073 29.4737 43.0572 29.7238C42.8072 29.9738 42.6667 30.313 42.6667 30.6666V35.9999C42.6667 36.3535 42.8072 36.6927 43.0572 36.9427C43.3073 37.1928 43.6464 37.3332 44 37.3332Z" fill="black"></path>
              </svg>
            </span>
            <div class="ms-3 ms-sm-8 mt-4 mt-sm-0">
              <span class="d-block fs-7 text-secondary">Phone</span>

<section class="py-12 py-lg-24 bg-light-light position-relative overflow-hidden">
  <img class="position-absolute top-0 start-0 mt-10" src="saturn-assets/images/pricing/circle-left-star.png" alt="">
  <div class="container position-relative">
    <div class="mw-3xl mx-auto text-center mb-20">
      <span class="badge px-3 py-1 mb-4 bg-primary-light text-primary text-uppercase">Pricing</span>
      <h3 class="font-heading mb-8">
        <span>Choose a</span>
        <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">plan</span>
      </h3>
      <div class="d-flex align-items-center justify-content-center">
        <span class="fs-6">Billed Monthly</span>
        <div class="d-inline-flex mx-3 align-items-center justify-content-center bg-light rounded-pill p-1">
          <button class="btn btn-light p-0 rounded-pill" style="width: 20px; height: 20px;"></button>
          <button class="btn btn-primary p-0 rounded-pill" style="width: 20px; height: 20px;"></button>
        </div>
        <span class="fs-6">Billed Yearly</span>
      </div>
    </div>
    <div class="mw-sm mw-md-3xl mx-auto">
      <div class="py-12 px-8 px-md-12 mb-6 bg-white shadow-lg rounded-4">
        <div class="d-flex flex-column flex-md-row gap-10 align-items-center justify-content-between">
          <div class="mw-xs">
            <span class="d-block fs-5 fw-semibold mb-2">For Education</span>
            <p class="text-secondary mb-0">Simply dummy text of the printing and typesetting industry.</p>

<section class="py-8 position-relative overflow-hidden">
  <div class="container">
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row align-items-center">
        <div class="col-lg-6 mb-12 mb-lg-0">
          <div class="mw-md">
            <h5 class="font-heading mb-4">Sign in to your account</h5>
            <p class="mw-md fs-7 text-secondary mb-10">Greetings on your return! We kindly request you to enter your details.</p>
            <form action="">
              <div class="mb-6">
                <input class="form-control" type="email" name="" id="" placeholder="Enter your email">
              </div>
              <div class="mb-8">
                <input class="form-control" type="password" name="" id="" placeholder="Enter your password">
              </div>
              <div class="d-flex mb-6 justify-content-between">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="" id="">
                  <label class="ms-2 fs-10 form-check-label" for="">Remember for 30 days</label>
                </div>
                <a class="btn btn-link p-0 fs-9 fw-semibold" href="#">Forget password?</a>
              </div>
              <button class="btn btn-primary w-100 rounded-pill" type="submit">Login</button>
            </form>

<section class="py-12 py-sm-24 py-lg-44 position-relative overflow-hidden">
  <div class="d-none d-md-flex position-absolute top-0 end-0 h-100 bg-dark col-3 align-items-center">
    <img class="img-fluid translate-middle-x" src="saturn-assets/images/cta/image-placeholder-blue.png" alt="">
  </div>
  <img class="position-absolute top-0 start-0" src="saturn-assets/images/cta/double-light-center.png" alt="">
  <div class="position-relative container">
    <div class="mw-md mw-lg-xl mx-auto mx-md-0">
      <h3 class="font-heading mb-4">
        <span>We build</span>
        <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">different</span>
      </h3>
      <p class="fs-6 fw-semibold mb-4">Let’s join and let us know what do you need</p>
      <p class="text-muted mb-10">Elementum magna nisl egestas eget semper. Tempus diam auctor mattis elementum sagittis at urna sodales. A egestas vulputate cursus blandit fermentum scelerisque ac sed.</p>
      <a class="btn btn-primary" href="#">
        <span>Get Started</span>
        <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M14.8299 12.04L10.5899 7.80001C10.497 7.70628 10.3864 7.63189 10.2645 7.58112C10.1427 7.53035 10.012 7.50421 9.87994 7.50421C9.74793 7.50421 9.61723 7.53035 9.49537 7.58112C9.37351 7.63189 9.26291 7.70628 9.16994 7.80001C8.98369 7.98737 8.87915 8.24082 8.87915 8.50501C8.87915 8.7692 8.98369 9.02265 9.16994 9.21001L12.7099 12.75L9.16994 16.29C8.98369 16.4774 8.87915 16.7308 8.87915 16.995C8.87915 17.2592 8.98369 17.5126 9.16994 17.7C9.26338 17.7927 9.3742 17.866 9.49604 17.9158C9.61787 17.9655 9.74834 17.9908 9.87994 17.99C10.0115 17.9908 10.142 17.9655 10.2638 17.9158C10.3857 17.866 10.4965 17.7927 10.5899 17.7L14.8299 13.46C14.9237 13.367 14.9981 13.2564 15.0488 13.1346C15.0996 13.0127 15.1257 12.882 15.1257 12.75C15.1257 12.618 15.0996 12.4873 15.0488 12.3654C14.9981 12.2436 14.9237 12.133 14.8299 12.04Z" fill="#FFF2EE"></path>
        </svg>
      </a>
    </div>
  </div>
  <div class="d-flex d-md-none py-32 col-5 mt-12 ms-auto align-items-center bg-dark position-relative">
    <img class="img-fluid translate-middle-x" src="saturn-assets/images/cta/image-placeholder-blue.png" alt="">
  </div>

<section class="pt-12 pt-lg-24 pt-xl-32 position-relative overflow-hidden">
  <img class="position-absolute top-0 start-50 translate-middle-x" src="saturn-assets/images/newsletter/double-light.png" alt="">
  <img class="position-absolute top-0 end-0" src="../../saturnc-assets/images/newsletter/half-star-circle-top.png" alt="">
  <div class="position-relative container">
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="row align-items-end">
        <div class="col-lg-6">
          <div class="mw-lg mx-auto mx-lg-0 pb-24">
            <span class="badge mb-10 px-3 py-1 bg-primary-light text-primary">NEWSLETTER</span>
            <h3 class="font-heading mb-16">Sign up for our newsletter</h3>
            <form action="">
              <div class="d-flex flex-column flex-sm-row align-items-sm-center gap-4">
                <input class="form-control" type="email" name="" id="" placeholder="pat@shuffle.dev">
                <button class="flex-shrink-0 btn btn-sm h-100 btn-primary d-flex align-items-center justify-content-center fs-8" type="submit">
                  <span>Subscribe</span>
                  <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M14.8299 12.04L10.5899 7.80001C10.497 7.70628 10.3864 7.63189 10.2645 7.58112C10.1427 7.53035 10.012 7.50421 9.87994 7.50421C9.74793 7.50421 9.61723 7.53035 9.49537 7.58112C9.37351 7.63189 9.26291 7.70628 9.16994 7.80001C8.98369 7.98737 8.87915 8.24082 8.87915 8.50501C8.87915 8.7692 8.98369 9.02265 9.16994 9.21001L12.7099 12.75L9.16994 16.29C8.98369 16.4774 8.87915 16.7308 8.87915 16.995C8.87915 17.2592 8.98369 17.5126 9.16994 17.7C9.26338 17.7927 9.3742 17.866 9.49604 17.9158C9.61787 17.9655 9.74834 17.9908 9.87994 17.99C10.0115 17.9908 10.142 17.9655 10.2638 17.9158C10.3857 17.866 10.4965 17.7927 10.5899 17.7L14.8299 13.46C14.9237 13.367 14.9981 13.2564 15.0488 13.1346C15.0996 13.0127 15.1257 12.882 15.1257 12.75C15.1257 12.618 15.0996 12.4873 15.0488 12.3654C14.9981 12.2436 14.9237 12.133 14.8299 12.04Z" fill="#FFF2EE"></path>
                  </svg>
                </button>
              </div>
              <p class="fs-10 fw-semibold mt-2 mb-0">
                <span class="text-muted">We care about your data in our</span>
                <a class="btn btn-sm fs-10 btn-link fw-semibold p-0" href="#">privacy policy</a>
              </p>

<div class="position-fixed bottom-0 w-100 p-10 overflow-hidden">
  <div class="position-relative p-12 mw-xl ms-auto bg-primary border rounded-3">
    <img class="position-absolute bottom-0 end-0 img-fluid" src="saturn-assets/images/cookies/cookie-orange-right.svg" alt="">
    <button class="position-absolute top-0 end-0 m-4 btn p-0">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M13.4099 11.9999L19.7099 5.70994C19.8982 5.52164 20.004 5.26624 20.004 4.99994C20.004 4.73364 19.8982 4.47825 19.7099 4.28994C19.5216 4.10164 19.2662 3.99585 18.9999 3.99585C18.7336 3.99585 18.4782 4.10164 18.2899 4.28994L11.9999 10.5899L5.70994 4.28994C5.52164 4.10164 5.26624 3.99585 4.99994 3.99585C4.73364 3.99585 4.47824 4.10164 4.28994 4.28994C4.10164 4.47825 3.99585 4.73364 3.99585 4.99994C3.99585 5.26624 4.10164 5.52164 4.28994 5.70994L10.5899 11.9999L4.28994 18.2899C4.19621 18.3829 4.12182 18.4935 4.07105 18.6154C4.02028 18.7372 3.99414 18.8679 3.99414 18.9999C3.99414 19.132 4.02028 19.2627 4.07105 19.3845C4.12182 19.5064 4.19621 19.617 4.28994 19.7099C4.3829 19.8037 4.4935 19.8781 4.61536 19.9288C4.73722 19.9796 4.86793 20.0057 4.99994 20.0057C5.13195 20.0057 5.26266 19.9796 5.38452 19.9288C5.50638 19.8781 5.61698 19.8037 5.70994 19.7099L11.9999 13.4099L18.2899 19.7099C18.3829 19.8037 18.4935 19.8781 18.6154 19.9288C18.7372 19.9796 18.8679 20.0057 18.9999 20.0057C19.132 20.0057 19.2627 19.9796 19.3845 19.9288C19.5064 19.8781 19.617 19.8037 19.7099 19.7099C19.8037 19.617 19.8781 19.5064 19.9288 19.3845C19.9796 19.2627 20.0057 19.132 20.0057 18.9999C20.0057 18.8679 19.9796 18.7372 19.9288 18.6154C19.8781 18.4935 19.8037 18.3829 19.7099 18.2899L13.4099 11.9999Z" fill="#FFAF9B"></path>
      </svg>
    </button>
    <div class="position-relative">
      <span class="d-block fs-6 fw-semibold text-white mb-4">Cookies on this site</span>
      <p class="text-primary-light mb-6">By clicking "Accept all cookies" you consent to cookies being stored on your device to improve website.</p>
      <div class="d-flex flex-column flex-sm-row align-items-sm-center gap-4"><a class="btn btn-outline-primary-light text-white" href="#">Decline</a><a class="btn btn-light-light text-primary" href="#">Accept all cokies</a></div>
    </div>
  </div>
</div>

<section class="py-12 py-lg-24 bg-light-light position-relative overflow-hidden">
  <img class="position-absolute bottom-0 end-0 mb-44 mb-md-0 me-n52 me-md-n24" src="saturn-assets/images/testimonials/circle-star-bg.svg" alt="">
  <div class="container position-relative">
    <div class="row align-items-center mb-16">
      <div class="col-lg-7 mb-8 mb-lg-0">
        <span class="badge px-3 py-1 mb-4 bg-primary-light text-primary text-uppercase">TESTIMONIALS</span>
        <h3 class="font-heading mb-4">
          <span>What our clients</span>
          <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">said</span>
        </h3>
        <p class="text-secondary">Risus viverra justo sagittis vestibulum metus.</p>
      </div>
      <div class="col-lg-5">
        <div class="d-flex align-items-center justify-content-lg-end">
          <button class="btn me-3 d-flex align-items-center justify-content-center btn-outline-light bg-light-light rounded-pill p-0" style="width: 56px; height: 56px;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.17006 11.2899L13.4101 7.04995C13.503 6.95622 13.6136 6.88183 13.7355 6.83106C13.8573 6.78029 13.988 6.75415 14.1201 6.75415C14.2521 6.75415 14.3828 6.78029 14.5046 6.83106C14.6265 6.88183 14.7371 6.95622 14.8301 7.04995C15.0163 7.23731 15.1208 7.49076 15.1208 7.75495C15.1208 8.01913 15.0163 8.27259 14.8301 8.45995L11.2901 11.9999L14.8301 15.5399C15.0163 15.7273 15.1208 15.9808 15.1208 16.2449C15.1208 16.5091 15.0163 16.7626 14.8301 16.9499C14.7366 17.0426 14.6258 17.116 14.504 17.1657C14.3821 17.2155 14.2517 17.2407 14.1201 17.2399C13.9885 17.2407 13.858 17.2155 13.7362 17.1657C13.6143 17.116 13.5035 17.0426 13.4101 16.9499L9.17006 12.7099C9.07633 12.617 9.00194 12.5064 8.95117 12.3845C8.9004 12.2627 8.87426 12.132 8.87426 11.9999C8.87426 11.8679 8.9004 11.7372 8.95117 11.6154C9.00194 11.4935 9.07633 11.3829 9.17006 11.2899Z" fill="#424453"></path>
            </svg>
          </button>
          <button class="btn d-flex align-items-center justify-content-center btn-primary-light rounded-pill p-0" style="width: 56px; height: 56px;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.8299 11.2899L10.5899 7.04995C10.497 6.95622 10.3864 6.88183 10.2645 6.83106C10.1427 6.78029 10.012 6.75415 9.87994 6.75415C9.74793 6.75415 9.61723 6.78029 9.49537 6.83106C9.37351 6.88183 9.26291 6.95622 9.16994 7.04995C8.98369 7.23731 8.87915 7.49076 8.87915 7.75495C8.87915 8.01913 8.98369 8.27259 9.16994 8.45995L12.7099 11.9999L9.16994 15.5399C8.98369 15.7273 8.87915 15.9808 8.87915 16.2449C8.87915 16.5091 8.98369 16.7626 9.16994 16.9499C9.26338 17.0426 9.3742 17.116 9.49604 17.1657C9.61787 17.2155 9.74834 17.2407 9.87994 17.2399C10.0115 17.2407 10.142 17.2155 10.2638 17.1657C10.3857 17.116 10.4965 17.0426 10.5899 16.9499L14.8299 12.7099C14.9237 12.617 14.9981 12.5064 15.0488 12.3845C15.0996 12.2627 15.1257 12.132 15.1257 11.9999C15.1257 11.8679 15.0996 11.7372 15.0488 11.6154C14.9981 11.4935 14.9237 11.3829 14.8299 11.2899Z" fill="#FF460C"></path>
            </svg>
          </button>

<section class="pt-12 pt-lg-24 pb-80 pb-sm-96 py-xl-32 position-relative overflow-hidden">
  <div class="position-relative container pb-12 pb-md-64 pb-xl-0">
    <div class="text-center mb-24">
      <span class="badge bg-primary-light px-3 py-2 text-primary mb-4">👋 MEET SATURN UI LIBRARY</span>
      <h2 class="font-heading mb-4">
        <span>Online Course</span>
        <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">Apps</span>
      </h2>
      <p class="lead text-secondary mb-0">Nisi eu pellentesque felis volutpat aliquet pulvinar sed.</p>
    </div>
    <div class="mw-xs mx-auto mw-md-none">
      <div class="row justify-content-between">
        <div class="col-md-6 col-xl-4 mb-12 mb-md-0">
          <div class="mb-14">
            <div class="mb-2">
              <img class="img-fluid" style="width: 30px;" src="saturn-assets/images/applications/avatar-photo1.png" alt="">
              <img class="img-fluid ms-n2" style="width: 30px;" src="saturn-assets/images/applications/avatar-photo2.png" alt="">
              <img class="img-fluid ms-n2" style="width: 30px;" src="saturn-assets/images/applications/avatar-photo3.png" alt="">
            </div>
            <span class="d-block fs-9 fw-semibold">Trusted by 1M+ Customers</span>
            <div class="d-flex mb-4 align-items-center">
              <div class="me-2">
                <img class="img-fluid" src="saturn-assets/images/cta/yellow-star.svg" alt="">
                <img class="img-fluid" src="saturn-assets/images/cta/yellow-star.svg" alt="">

<section class="py-12 py-md-24 py-lg-32 py-xl-40 position-relative overflow-hidden">
  <img class="position-absolute bottom-0 end-0" src="saturn-assets/images/http-codes/orange-light-right.png" alt="">
  <img class="position-absolute top-0 start-0" src="saturn-assets/images/http-codes/blue-light-left.png" alt="">
  <div class="container position-relative">
    <div class="d-sm-flex align-items-start justify-content-center">
      <img class="img-fluid d-block mb-8 mb-sm-0 me-sm-14" src="saturn-assets/images/http-codes/sad-face-icon.svg" alt="">
      <div class="mw-2xl">
        <h2 class="font-heading mb-6">
          <span class="d-block d-md-inline-block">Oh no!</span>
          <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">Error 404</span>
        </h2>
        <p class="mw-lg lead fs-6 text-secondary mb-14">Sorry, the page you are looking for doesn't exist or has been moved. Try searching our site:</p>
        <a class="btn btn-primary rounded-pill" href="#">Take me home</a>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden">
  <img class="position-absolute top-0 mt-10 start-0" src="saturn-assets/images/content/star-dark-bg.svg" alt="">
  <img class="position-absolute bottom-0 end-0" src="saturn-assets/images/content/orange-light-right.png" alt="">
  <div class="container position-relative">
    <div class="mw-3xl mx-auto text-center mb-20">
      <span class="badge px-4 py-2 text-primary bg-primary-light mb-5">RICH TEXT MODULE</span>
      <h2 class="font-heading text-white mb-0">
        <span>Saturn is a beautiful</span>
        <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">UI Library</span>
      </h2>
    </div>
    <div class="mw-lg mw-lg-none mx-auto">
      <div class="row">
        <div class="col-lg-6 mb-12 mb-lg-0">
          <div>
            <p class="fs-4 text-white mb-8">Arcu ultrices sit non magna enim semper quam venenatis. Mi quisque ultrices rerit nec aliquet integer mollis faucibus colum morbi paleo javanicus.</p>
            <p class="fs-4 text-white mb-12">Augue justo at convallis vitae nunc maecenas est. Viverra duis feugiat posuere vitae tincidunt.</p>
            <p class="fs-7 text-secondary mb-8">Pellentesque ipsum nulla in eget interdum a. Neque pellentesque pulvinar mauris pulvinar diam. Turpis aliquet pellentesque velit vitae nisi sed morbi ultrices sed. Egestas interdum elit integer nec pharetra eget blandit dolor purus. A sed nisi congue morbi fermentum blandit. Turpis pretium dignissim risus ultrices purus et amet netus nibh.</p>
            <p class="fs-7 text-secondary mb-8">Vestibulum est ante in congue a fusce nunc. At tristique donec nisi viverra vulputate blandit orci at lectus. Morbi cras urna congue ornare. Mi magna vestibulum tortor id nec tortor non. Enim orci lorem egestas sed morbi dui mauris etiam nulla. Euismod cursus viverra ut ac eu sit quam amet tempor. Id in suspendisse nam sit vitae ullamcorper mollis et ut.</p>
          </div>
        </div>
        <div class="col-lg-6">
          <div>
            <p class="fs-4 text-light-dark fw-semibold mb-10">Vestibulum est ante in congue a fusce nunc. At tristique donec nisi viverra vulputate blandit turpis pretium dignissim risus ultrices purus et amet netus nibh.</p>

<section class="py-12 py-lg-24 bg-light-light position-relative overflow-hiddepx-8 px-sm-12 px-md-20 py-20 px-8 px-sm-12 px-md-20 py-20 n">
  <img class="position-absolute top-0 end-0 mt-20" src="saturn-assets/images/faq/star-right.svg" alt="">
  <img class="position-absolute top-0 start-0" src="saturn-assets/images/faq/light-blue-left.png" alt="">
  <div class="container position-relative">
    <div class="mw-4xl mx-auto text-center mb-20">
      <span class="badge px-4 py-2 text-primary bg-primary-light mb-5">FREQUENTLY ASK QUESTION</span>
      <h2 class="font-heading mb-0">
        <span>You ask? We</span>
        <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">answer</span>
      </h2>
    </div>
    <div class="row">
      <div class="col-md-4 col-xl-3 position-relative">
        <div class="d-none d-md-block position-absolute top-0 end-0 h-100 border-end border-light-dark"></div>
        <div class="position-relative">
          <h6 class="fs-5 mb-8">Getting Started</h6>
          <ul class="list-unstyled mb-16">
            <li class="mb-6">
              <a class="btn d-flex align-items-center p-0 text-start fw-normal text-start text-primary" href="#">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" r="5" stroke="#C3C6CE" stroke-width="2"></circle></svg>
                <span class="ms-3">Getting Started</span>
              </a>
            </li>
            <li class="mb-6">

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <img class="position-absolute bottom-0 start-0" src="saturn-assets/images/features/star-left.png" alt="">
  <img class="position-absolute top-0 end-0" src="saturn-assets/images/features/blue-light-right.png" alt="">
  <div class="container position-relative">
    <div class="mw-lg mw-lg-none mx-auto">
      <div class="row mb-24 align-items-center">
        <div class="col-lg-6 mb-12 mb-lg-0">
          <div>
            <h2 class="font-heading mb-8">
              <span>We help our client solve</span>
              <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">problems</span>
            </h2>
            <p class="lead fs-4 text-secondary mb-0">Our platform offers the modern enterprise full control of how date can be access and used with industry leading software solutions for identity, activation, and date collaboration</p>
          </div>
        </div>
        <div class="col-lg-6">
          <img class="mw-lg-md ms-lg-auto img-fluid d-block w-100" src="saturn-assets/images/features/violet-image.png" alt="">
        </div>
      </div>
      <div class="row">
        <div class="col-lg-4 position-relative pb-12 pb-lg-0 mb-12 mb-lg-0">
          <div class="d-none d-lg-block position-absolute top-0 end-0 h-100 border-end"></div>
          <div class="d-lg-none position-absolute bottom-0 end-0 w-100 border-bottom"></div>
          <div class="position-relative text-center">

<section>
  <nav class="navbar navbar-expand-lg navbar-dark bg-black">
    <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-2 rounded-1 border-0 bg-dark-light">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 12H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 6H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 18H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <a class="navbar-brand position-absolute top-50 start-50 translate-middle" href="#">
        <img class="img-fluid" src="saturn-assets/logos/logo-saturn-light.svg" alt="">
      </a>
      <div class="collapse navbar-collapse" id="nav01">
        <div class="ms-auto"><a class="btn btn-sm btn-link fw-semibold" href="#">Sign In</a><a class="btn btn-sm btn-primary" href="#">Create an account</a></div>
      </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="text-end mb-5">
        <a class="navbar-close text-secondary" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24">

<section class="py-12 py-lg-24 position-relative overflow-hiddepx-8 px-sm-12 px-md-20 py-20 px-8 px-sm-12 px-md-20 py-20 n">
  <img class="position-absolute top-0 end-0 mt-20" src="saturn-assets/images/blog/star-circle-right.svg" alt="">
  <img class="position-absolute bottom-0 start-0" src="saturn-assets/images/blog/blue-light-left.png" alt="">
  <div class="container position-relative">
    <div class="mw-md mx-auto mw-md-none">
      <div class="row align-items-end mb-20">
        <div class="col-lg-8 mb-10 mb-lg-0">
          <span class="badge px-4 py-2 text-primary bg-primary-light mb-5">OUR BLOG</span>
          <h2 class="font-heading mb-0">
            <span>News &amp;</span>
            <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">Articles</span>
          </h2>
        </div>
        <div class="col-lg-4">
          <div class="d-flex align-items-center justify-content-lg-end">
            <button class="btn me-3 d-flex align-items-center justify-content-center btn-light-light rounded-pill p-0" style="width: 56px; height: 56px;">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.17006 11.2899L13.4101 7.04995C13.503 6.95622 13.6136 6.88183 13.7355 6.83106C13.8573 6.78029 13.988 6.75415 14.1201 6.75415C14.2521 6.75415 14.3828 6.78029 14.5046 6.83106C14.6265 6.88183 14.7371 6.95622 14.8301 7.04995C15.0163 7.23731 15.1208 7.49076 15.1208 7.75495C15.1208 8.01913 15.0163 8.27259 14.8301 8.45995L11.2901 11.9999L14.8301 15.5399C15.0163 15.7273 15.1208 15.9808 15.1208 16.2449C15.1208 16.5091 15.0163 16.7626 14.8301 16.9499C14.7366 17.0426 14.6258 17.116 14.504 17.1657C14.3821 17.2155 14.2517 17.2407 14.1201 17.2399C13.9885 17.2407 13.858 17.2155 13.7362 17.1657C13.6143 17.116 13.5035 17.0426 13.4101 16.9499L9.17006 12.7099C9.07633 12.617 9.00194 12.5064 8.95117 12.3845C8.9004 12.2627 8.87426 12.132 8.87426 11.9999C8.87426 11.8679 8.9004 11.7372 8.95117 11.6154C9.00194 11.4935 9.07633 11.3829 9.17006 11.2899Z" fill="#424453"></path>
              </svg>
            </button>
            <button class="btn d-flex align-items-center justify-content-center btn-primary-light rounded-pill p-0" style="width: 56px; height: 56px;">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.8299 11.2899L10.5899 7.04995C10.497 6.95622 10.3864 6.88183 10.2645 6.83106C10.1427 6.78029 10.012 6.75415 9.87994 6.75415C9.74793 6.75415 9.61723 6.78029 9.49537 6.83106C9.37351 6.88183 9.26291 6.95622 9.16994 7.04995C8.98369 7.23731 8.87915 7.49076 8.87915 7.75495C8.87915 8.01913 8.98369 8.27259 9.16994 8.45995L12.7099 11.9999L9.16994 15.5399C8.98369 15.7273 8.87915 15.9808 8.87915 16.2449C8.87915 16.5091 8.98369 16.7626 9.16994 16.9499C9.26338 17.0426 9.3742 17.116 9.49604 17.1657C9.61787 17.2155 9.74834 17.2407 9.87994 17.2399C10.0115 17.2407 10.142 17.2155 10.2638 17.1657C10.3857 17.116 10.4965 17.0426 10.5899 16.9499L14.8299 12.7099C14.9237 12.617 14.9981 12.5064 15.0488 12.3845C15.0996 12.2627 15.1257 12.132 15.1257 11.9999C15.1257 11.8679 15.0996 11.7372 15.0488 11.6154C14.9981 11.4935 14.9237 11.3829 14.8299 11.2899Z" fill="#FF460C"></path>
              </svg>

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <img class="d-none d-lg-block position-absolute top-0 start-0 mt-24" src="saturn-assets/images/contact/dots-side-1.svg" alt="">
  <img class="d-none d-lg-block position-absolute bottom-0 end-0 mb-24" src="saturn-assets/images/contact/dots-side-2.svg" alt="">
  <div class="container position-relative">
    <div class="row">
      <div class="col-lg-6 mb-12 mb-lg-0">
        <div class="mw-md">
          <div class="mb-24">
            <span class="badge px-4 py-2 text-primary bg-primary-light mb-4">READY TO SUPPORT</span>
            <h3 class="font-heading mb-4">
              <span>Don’t hesitate</span>
              <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">to talk with us</span>
            </h3>
            <p class="lead text-secondary">Relax, we are ready to support 24/7 for you</p>
          </div>
          <div class="d-sm-flex mb-14 align-items-center">
            <span>
              <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="80" y="80" width="80" height="80" rx="40" transform="rotate(-180 80 80)" fill="#9FE2FF"></rect>
                <path d="M49.92 41.3332C49.6267 41.3332 49.32 41.2399 49.0267 41.1732C48.4327 41.0423 47.8489 40.8686 47.28 40.6532C46.6615 40.4282 45.9815 40.4399 45.3711 40.686C44.7606 40.9322 44.2628 41.3954 43.9733 41.9866L43.68 42.5866C42.3813 41.8641 41.188 40.9669 40.1333 39.9199C39.0864 38.8653 38.1891 37.6719 37.4667 36.3732L38.0267 35.9999C38.6178 35.7105 39.0811 35.2126 39.3272 34.6022C39.5734 33.9917 39.585 33.3118 39.36 32.6932C39.1483 32.1231 38.9746 31.5396 38.84 30.9466C38.7733 30.6532 38.72 30.3466 38.68 30.0399C38.5181 29.1007 38.0262 28.2502 37.2928 27.6416C36.5595 27.0329 35.6329 26.7061 34.68 26.7199H30.68C30.1054 26.7145 29.5363 26.833 29.0116 27.0673C28.4869 27.3016 28.0188 27.6462 27.6393 28.0776C27.2597 28.5091 26.9775 29.0172 26.812 29.5675C26.6465 30.1178 26.6015 30.6973 26.68 31.2666C27.3903 36.8524 29.9414 42.0424 33.9302 46.0168C37.919 49.9911 43.1183 52.5233 48.7067 53.2132H49.2133C50.1966 53.2147 51.1459 52.8539 51.88 52.1999C52.3018 51.8226 52.6388 51.3601 52.8686 50.843C53.0985 50.3259 53.216 49.7658 53.2133 49.1999V45.1999C53.197 44.2738 52.8598 43.382 52.2591 42.6768C51.6585 41.9716 50.8318 41.4967 49.92 41.3332ZM50.5867 49.3332C50.5864 49.5226 50.5459 49.7096 50.4677 49.8821C50.3896 50.0545 50.2756 50.2083 50.1333 50.3332C49.9872 50.4664 49.8133 50.5654 49.6242 50.623C49.4351 50.6807 49.2356 50.6955 49.04 50.6666C44.0465 50.0263 39.4083 47.7419 35.857 44.1736C32.3056 40.6054 30.0432 35.9564 29.4267 30.9599C29.4055 30.7646 29.4241 30.567 29.4813 30.3791C29.5386 30.1912 29.6334 30.0168 29.76 29.8666C29.885 29.7243 30.0388 29.6104 30.2112 29.5322C30.3836 29.454 30.5707 29.4135 30.76 29.4132H34.76C35.0701 29.4063 35.3728 29.5077 35.6162 29.7C35.8596 29.8923 36.0283 30.1633 36.0933 30.4666C36.1467 30.831 36.2133 31.191 36.2933 31.5466C36.4474 32.2494 36.6524 32.9401 36.9067 33.6132L35.04 34.4799C34.8804 34.5531 34.7368 34.6572 34.6176 34.786C34.4983 34.9149 34.4056 35.0661 34.3449 35.2308C34.2842 35.3956 34.2566 35.5707 34.2638 35.7462C34.271 35.9217 34.3127 36.094 34.3867 36.2532C36.3056 40.3636 39.6097 43.6676 43.72 45.5866C44.0446 45.7199 44.4087 45.7199 44.7333 45.5866C44.8996 45.5271 45.0524 45.4352 45.1829 45.3162C45.3134 45.1971 45.4189 45.0534 45.4933 44.8932L46.32 43.0266C47.0093 43.2731 47.7128 43.4779 48.4267 43.6399C48.7822 43.7199 49.1422 43.7866 49.5067 43.8399C49.8099 43.905 50.081 44.0737 50.2733 44.317C50.4655 44.5604 50.5669 44.8632 50.56 45.1732L50.5867 49.3332ZM49.3333 37.3332C49.687 37.3332 50.0261 37.1928 50.2762 36.9427C50.5262 36.6927 50.6667 36.3535 50.6667 35.9999V30.6666C50.6667 30.313 50.5262 29.9738 50.2762 29.7238C50.0261 29.4737 49.687 29.3332 49.3333 29.3332C48.9797 29.3332 48.6406 29.4737 48.3905 29.7238C48.1405 29.9738 48 30.313 48 30.6666V35.9999C48 36.3535 48.1405 36.6927 48.3905 36.9427C48.6406 37.1928 48.9797 37.3332 49.3333 37.3332ZM44 37.3332C44.3536 37.3332 44.6928 37.1928 44.9428 36.9427C45.1929 36.6927 45.3333 36.3535 45.3333 35.9999V30.6666C45.3333 30.313 45.1929 29.9738 44.9428 29.7238C44.6928 29.4737 44.3536 29.3332 44 29.3332C43.6464 29.3332 43.3073 29.4737 43.0572 29.7238C42.8072 29.9738 42.6667 30.313 42.6667 30.6666V35.9999C42.6667 36.3535 42.8072 36.6927 43.0572 36.9427C43.3073 37.1928 43.6464 37.3332 44 37.3332Z" fill="black"></path>
              </svg>
            </span>
            <div class="ms-3 ms-sm-8 mt-4 mt-sm-0">
              <span class="d-block fs-7 text-secondary">Phone</span>

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <div class="position-relative container">
    <div class="row align-items-center">
      <div class="col-lg-7 col-xl-6 mb-12 mb-lg-0">
        <div class="mw-lg mx-auto mx-lg-0">
          <span class="badge bg-primary-light px-3 py-2 text-primary mb-8">👋 MEET SATURN UI LIBRARY</span>
          <h2 class="font-heading mb-16">
            <span>Achievements This</span>
            <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">Month</span>
          </h2>
          <div class="d-flex mb-14 align-items-center">
            <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="40" cy="40" r="40" fill="#FFE9B0"></circle>
              <path d="M53.3333 30.7733C53.3344 29.9603 53.0941 29.1652 52.643 28.4888C52.1918 27.8124 51.55 27.2852 50.7989 26.9739C50.0478 26.6626 49.2212 26.5813 48.4239 26.7402C47.6265 26.8992 46.8943 27.2912 46.3199 27.8666L42.5733 31.6133L33.9199 28.7333C33.6895 28.6609 33.4438 28.6524 33.209 28.7088C32.9741 28.7651 32.759 28.8842 32.5866 29.0533L29.4133 32.2C29.2629 32.3521 29.1513 32.5381 29.088 32.7424C29.0246 32.9467 29.0113 33.1632 29.0493 33.3737C29.0872 33.5842 29.1752 33.7825 29.3058 33.9518C29.4365 34.1211 29.6059 34.2566 29.7999 34.3466L36.7066 37.48L33.2399 40.9466L30.9599 39.8C30.7137 39.6668 30.4319 39.6144 30.1543 39.6503C29.8767 39.6862 29.6174 39.8085 29.4133 40L27.0533 42.4133C26.8049 42.6631 26.6655 43.0011 26.6655 43.3533C26.6655 43.7056 26.8049 44.0435 27.0533 44.2933L35.7066 52.9466C35.9564 53.195 36.2943 53.3344 36.6466 53.3344C36.9988 53.3344 37.3368 53.195 37.5866 52.9466L39.9999 50.5867C40.2 50.3886 40.3323 50.1323 40.3778 49.8545C40.4233 49.5766 40.3797 49.2915 40.2533 49.04L39.1066 46.76L42.5733 43.2933L45.7066 50.2C45.7967 50.394 45.9321 50.5634 46.1014 50.6941C46.2708 50.8247 46.469 50.9127 46.6795 50.9506C46.89 50.9886 47.1065 50.9753 47.3108 50.9119C47.5151 50.8486 47.7011 50.737 47.8533 50.5867L50.9999 47.44C51.169 47.2676 51.2881 47.0524 51.3444 46.8176C51.4008 46.5828 51.3923 46.337 51.3199 46.1066L48.4399 37.4533L52.1333 33.68C52.5162 33.2994 52.8195 32.8464 53.0256 32.3473C53.2316 31.8483 53.3362 31.3132 53.3333 30.7733ZM50.2399 31.8L45.9199 36.12C45.7508 36.2924 45.6317 36.5075 45.5754 36.7424C45.519 36.9772 45.5275 37.2229 45.5999 37.4533L48.4799 46.0933L47.2799 47.2933L44.1466 40.4C44.0577 40.2042 43.9227 40.0328 43.7532 39.9005C43.5837 39.7682 43.3847 39.6788 43.1733 39.64C42.96 39.6011 42.7405 39.6147 42.5337 39.6798C42.3269 39.7448 42.1391 39.8593 41.9866 40.0133L36.4933 45.56C36.296 45.757 36.1655 46.0109 36.1201 46.2859C36.0746 46.561 36.1166 46.8433 36.2399 47.0933L37.3333 49.3333L36.5866 50.08L29.8799 43.36L30.6666 42.6666L32.9466 43.8133C33.1966 43.9367 33.4789 43.9786 33.754 43.9331C34.029 43.8877 34.2829 43.7572 34.4799 43.56L39.9999 38.0133C40.1531 37.8613 40.2671 37.6744 40.3322 37.4686C40.3972 37.2628 40.4113 37.0443 40.3733 36.8319C40.3353 36.6194 40.2462 36.4194 40.1138 36.2489C39.9815 36.0785 39.8097 35.9427 39.6133 35.8533L32.6666 32.72L33.8666 31.52L42.5066 34.4C42.737 34.4724 42.9827 34.4809 43.2175 34.4245C43.4524 34.3682 43.6675 34.2491 43.8399 34.08L48.1599 29.76C48.2928 29.6241 48.4515 29.5162 48.6266 29.4425C48.8018 29.3688 48.9899 29.3308 49.1799 29.3308C49.37 29.3308 49.5581 29.3688 49.7332 29.4425C49.9084 29.5162 50.0671 29.6241 50.1999 29.76C50.339 29.8888 50.449 30.0459 50.5226 30.2206C50.5961 30.3954 50.6316 30.5838 50.6266 30.7733C50.6338 30.9616 50.6033 31.1494 50.5369 31.3257C50.4705 31.502 50.3695 31.6633 50.2399 31.8Z" fill="#1E2238"></path>
            </svg>
            <div class="ms-6">
              <span class="d-block h3 mb-1">320</span>
              <span class="fs-7 text-secondary">Products Created</span>
            </div>
          </div>
          <div class="d-flex mb-14 align-items-center">
            <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="40" cy="40" r="40" fill="#9FE2FF"></circle>
              <path d="M53.1198 31.4134C52.9427 30.2779 52.4106 29.2277 51.5998 28.4133C50.7855 27.6025 49.7353 27.0704 48.5998 26.8934C46.2504 26.5386 43.8542 26.6473 41.5465 27.2134C41.4554 27.232 41.3662 27.2588 41.2798 27.2934C37.903 28.1445 34.8202 29.8955 32.3598 32.36C29.8853 34.8381 28.1256 37.9383 27.2665 41.3334C27.2665 41.4134 27.2665 41.4934 27.1998 41.5867C26.6337 43.8989 26.525 46.2994 26.8798 48.6534C27.0702 49.7651 27.6013 50.7901 28.3998 51.5867C29.2142 52.3975 30.2644 52.9296 31.3998 53.1067C32.3168 53.2558 33.2442 53.3316 34.1732 53.3334C35.6386 53.3249 37.0979 53.1414 38.5198 52.7867H38.7065C42.0877 51.9307 45.1753 50.1784 47.6439 47.7144C50.1125 45.2505 51.8707 42.1662 52.7332 38.7867C52.7332 38.7067 52.7332 38.6267 52.7998 38.5333C53.373 36.204 53.4817 33.7847 53.1198 31.4134ZM45.8265 29.3334C46.6126 29.3292 47.3976 29.3916 48.1732 29.52C48.282 29.5431 48.389 29.5743 48.4932 29.6134L46.6665 31.4534L44.6132 29.4C45.0132 29.3334 45.4265 29.3334 45.8265 29.3334ZM34.2265 34.2267C36.2339 32.2302 38.7091 30.7679 41.4265 29.9734L44.7865 33.3334L41.9198 36.2L40.9465 35.2267C40.8225 35.1017 40.6751 35.0025 40.5126 34.9348C40.3501 34.8671 40.1758 34.8323 39.9998 34.8323C39.8238 34.8323 39.6495 34.8671 39.4871 34.9348C39.3246 35.0025 39.1771 35.1017 39.0532 35.2267C38.8048 35.4765 38.6654 35.8144 38.6654 36.1667C38.6654 36.5189 38.8048 36.8569 39.0532 37.1067L40.0265 38.08L38.0798 40L37.1065 39.0267C36.8567 38.7783 36.5187 38.639 36.1665 38.639C35.8142 38.639 35.4763 38.7783 35.2265 39.0267C35.1015 39.1506 35.0023 39.2981 34.9346 39.4606C34.8669 39.6231 34.8321 39.7973 34.8321 39.9733C34.8321 40.1494 34.8669 40.3236 34.9346 40.4861C35.0023 40.6486 35.1015 40.7961 35.2265 40.92L36.1998 41.8934L33.3332 44.7867L29.9865 41.44C30.7726 38.7181 32.2306 36.2375 34.2265 34.2267ZM29.6132 48.4934C29.5741 48.3892 29.5429 48.2822 29.5198 48.1734C29.3179 46.9981 29.2553 45.8032 29.3332 44.6133L31.4532 46.6667L29.6132 48.4934ZM31.8265 50.48C31.7177 50.4569 31.6107 50.4257 31.5065 50.3867L33.3332 48.5467L35.3865 50.6667C34.1966 50.7446 33.0017 50.6819 31.8265 50.48ZM45.7732 45.7733C43.7623 47.7692 41.2818 49.2273 38.5598 50.0134L35.2132 46.6667L38.0798 43.8L39.0532 44.7733C39.1766 44.8977 39.3233 44.9965 39.4849 45.0641C39.6466 45.1317 39.8199 45.1668 39.9951 45.1674C40.1703 45.168 40.3439 45.1341 40.506 45.0677C40.6681 45.0012 40.8155 44.9035 40.9398 44.78C41.0641 44.6566 41.1629 44.5099 41.2305 44.3482C41.2982 44.1866 41.3333 44.0133 41.3339 43.8381C41.3345 43.6629 41.3006 43.4893 41.2342 43.3272C41.1677 43.1651 41.0699 43.0177 40.9465 42.8934L39.9998 41.92L41.9198 40L42.8932 40.9733C43.0177 41.0969 43.1655 41.1947 43.328 41.261C43.4904 41.3274 43.6644 41.361 43.8398 41.36C44.1035 41.3589 44.361 41.2796 44.5796 41.1322C44.7983 40.9848 44.9683 40.7759 45.0682 40.5318C45.1681 40.2878 45.1934 40.0196 45.1409 39.7612C45.0884 39.5028 44.9604 39.2657 44.7732 39.08L43.7998 38.1067L46.6665 35.2134L50.0132 38.56C49.2271 41.282 47.769 43.7625 45.7732 45.7733ZM50.6665 35.3867L48.5465 33.3334L50.3865 31.5067C50.4255 31.6109 50.4567 31.7178 50.4798 31.8267C50.6817 33.0019 50.7444 34.1968 50.6665 35.3867Z" fill="#1E2238"></path>

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <img class="position-absolute top-0 end-0 mt-20" src="saturn-assets/images/pricing/circle-star.png" alt="">
  <div class="container position-relative">
    <div class="mw-3xl mx-auto text-center mb-16">
      <h3 class="font-heading mb-10">
        <span>Choose a plan for a more</span>
        <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">advanced</span>
        <span>business</span>
      </h3>
      <div class="d-flex flex-wrap mb-10 gap-12 align-items-center justify-content-center">
        <div>
          <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M25.6996 9.61339C25.5757 9.48842 25.4282 9.38923 25.2657 9.32154C25.1032 9.25384 24.929 9.21899 24.7529 9.21899C24.5769 9.21899 24.4027 9.25384 24.2402 9.32154C24.0777 9.38923 23.9302 9.48842 23.8063 9.61339L13.8729 19.5601L9.69961 15.3734C9.57092 15.2491 9.41899 15.1513 9.25252 15.0857C9.08605 15.0201 8.90828 14.9879 8.72937 14.991C8.55047 14.9941 8.37392 15.0324 8.20982 15.1038C8.04571 15.1751 7.89726 15.278 7.77294 15.4067C7.64863 15.5354 7.55087 15.6873 7.48527 15.8538C7.41966 16.0203 7.38749 16.1981 7.39058 16.377C7.39368 16.5559 7.43198 16.7324 7.50331 16.8965C7.57463 17.0606 7.67758 17.2091 7.80628 17.3334L12.9263 22.4534C13.0502 22.5784 13.1977 22.6776 13.3602 22.7452C13.5227 22.8129 13.6969 22.8478 13.8729 22.8478C14.049 22.8478 14.2232 22.8129 14.3857 22.7452C14.5482 22.6776 14.6957 22.5784 14.8196 22.4534L25.6996 11.5734C25.8349 11.4485 25.943 11.297 26.0168 11.1283C26.0907 10.9597 26.1289 10.7775 26.1289 10.5934C26.1289 10.4093 26.0907 10.2271 26.0168 10.0585C25.943 9.88978 25.8349 9.73825 25.6996 9.61339Z" fill="#0BB678"></path>
          </svg>
          <span class="fs-7 fw-semibold">Cancel Anytime</span>
        </div>
        <div>
          <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M25.6996 9.61339C25.5757 9.48842 25.4282 9.38923 25.2657 9.32154C25.1032 9.25384 24.929 9.21899 24.7529 9.21899C24.5769 9.21899 24.4027 9.25384 24.2402 9.32154C24.0777 9.38923 23.9302 9.48842 23.8063 9.61339L13.8729 19.5601L9.69961 15.3734C9.57092 15.2491 9.41899 15.1513 9.25252 15.0857C9.08605 15.0201 8.90828 14.9879 8.72937 14.991C8.55047 14.9941 8.37392 15.0324 8.20982 15.1038C8.04571 15.1751 7.89726 15.278 7.77294 15.4067C7.64863 15.5354 7.55087 15.6873 7.48527 15.8538C7.41966 16.0203 7.38749 16.1981 7.39058 16.377C7.39368 16.5559 7.43198 16.7324 7.50331 16.8965C7.57463 17.0606 7.67758 17.2091 7.80628 17.3334L12.9263 22.4534C13.0502 22.5784 13.1977 22.6776 13.3602 22.7452C13.5227 22.8129 13.6969 22.8478 13.8729 22.8478C14.049 22.8478 14.2232 22.8129 14.3857 22.7452C14.5482 22.6776 14.6957 22.5784 14.8196 22.4534L25.6996 11.5734C25.8349 11.4485 25.943 11.297 26.0168 11.1283C26.0907 10.9597 26.1289 10.7775 26.1289 10.5934C26.1289 10.4093 26.0907 10.2271 26.0168 10.0585C25.943 9.88978 25.8349 9.73825 25.6996 9.61339Z" fill="#0BB678"></path>
          </svg>
          <span class="fs-7 fw-semibold">Cancel Anytime</span>
        </div>
      </div>
      <div class="d-flex align-items-center justify-content-center">