<div class="bg-transparent">
    <div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 gap-y-16 px-8 pt-12 mt-12 pb-24 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
      <div class="max-w-3xl px-0 lg:px-16 lg:pb-10 pb-4">
        <p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
        <h2 class="fade-in text-balance lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-black sm:text-5xl">This is Feature4.html
        </h2>
        <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
        <p class="mx-auto mt-4 mb-10 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
        <a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
            Get started
        </a>
      </div>
      <div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
        <dl class="fade-in grid grid-cols-1 mx-auto gap-x-8 sm:grid-cols-2 lg:gap-y-10 gap-y-6">
          <div class="">
            <dt class="font-medium text-gray-200">✓ Communicate securely</dt>
            <dd class="mt-1 font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd> 
          </div>
          <div class="">
            <dt class="font-medium text-gray-200">✓ Store effortlessly</dt>
            <dd class="mt-1 ont-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
          </div>
          <div class="">
            <dt class="font-medium text-gray-200">✓ Restore authenticity</dt>
            <dd class="font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
         </div>
         <div class="">
            <dt class="font-medium text-gray-200">✓ Unlockinsights</dt>
            <dd class="font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
         </div>
         <div class="">
            <dt class="font-medium text-gray-200">✓ Streamline interactions</dt>
            <dd class="font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
         </div>
         <div class="">
            <dt class="font-medium text-gray-200">✓ digital presence</dt>
            <dd class="font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
         </div>
        </dl>
      </div>
    </div>
  </div>
  
  <style>
    /* Define the slow blinking animation */
    @keyframes fadeIn {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
    
      /* Apply the fade-in animation to elements with the 'fade-in' class */
      .fade-in {
        animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
      }
    
      /* Optional: Delay the animation for a more staggered effect */
      h2 {
        animation-delay: 0.5s; /* Delay for header */
      }
    
      p {
        animation-delay: 1s; /* Delay for paragraphs */
      }
      
    @keyframes blink {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0.4;
      }
      100% {
        opacity: 1;
      }
    }
  
    /* Apply the blinking animation to the link */
    .blinking-effect {
      animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
    }
  </style>