Organic_Nature_Loader_Real_Estate

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-emerald-50 via-teal-50 to-cyan-50 dark:from-slate-900 dark:via-blue-950 dark:to-teal-950 p-4">
  <div class="relative w-32 h-32 md:w-48 md:h-48 group">
    <!-- Outer flowing circle -->
    <div class="absolute inset-0 rounded-full border-4 border-t-emerald-400 border-r-teal-500 border-b-cyan-400 border-l-lime-300 dark:border-t-emerald-700 dark:border-r-teal-800 dark:border-b-cyan-700 dark:border-l-lime-600 animate-spin-slow origin-center ease-in-out scale-100 group-hover:scale-110 transition-transform duration-500"></div>

    <!-- Inner flowing circle -->
    <div class="absolute inset-4 rounded-full border-4 border-t-teal-400 border-r-cyan-500 border-b-lime-400 border-l-emerald-300 dark:border-t-teal-700 dark:border-r-cyan-800 dark:border-b-lime-700 dark:border-l-emerald-600 animate-[spin-reverse_4s_linear_infinite] origin-center rotate-45 scale-90 group-hover:scale-100 transition-transform duration-500"></div>

    <!-- Central organic shape placeholder -->
    <div class="absolute inset-8 md:inset-12 bg-gradient-to-br from-emerald-300 via-teal-400 to-cyan-300 dark:from-emerald-600 dark:via-teal-700 dark:to-cyan-600 rounded-full flex items-center justify-center overflow-hidden transform animate-pulse-slight origin-center group-hover:rotate-12 transition-transform duration-500 shadow-md dark:shadow-lg">
      <svg class="w-10 h-10 md:w-16 md:h-16 text-white dark:text-gray-200 opacity-80" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 3.394l6 6H6l6-6zM7 14h10v4H7v-4z"/>
      </svg>
    </div>

    <!-- Organic-like leaf/petal elements (simplified for loader) -->
    <div class="absolute top-0 left-1/2 -translate-x-1/2 w-4 h-4 md:w-6 md:h-6 rounded-full bg-emerald-400 dark:bg-emerald-600 animate-[leaf-pulse_2s_ease-in-out_infinite_0s] transform rotate-45 origin-bottom-right group-hover:scale-125 transition-transform duration-500"></div>
    <div class="absolute bottom-0 right-1/2 translate-x-1/2 w-4 h-4 md:w-6 md:h-6 rounded-full bg-teal-400 dark:bg-teal-600 animate-[leaf-pulse_2s_ease-in-out_infinite_0.5s] transform -rotate-45 origin-top-left group-hover:scale-125 transition-transform duration-500"></div>
    <div class="absolute top-1/2 left-0 -translate-y-1/2 w-4 h-4 md:w-6 md:h-6 rounded-full bg-cyan-400 dark:bg-cyan-600 animate-[leaf-pulse_2s_ease-in-out_infinite_1s] transform rotate-135 origin-top-right group-hover:scale-125 transition-transform duration-500"></div>
    <div class="absolute bottom-1/2 right-0 translate-y-1/2 w-4 h-4 md:w-6 md:h-6 rounded-full bg-lime-400 dark:bg-lime-600 animate-[leaf-pulse_2s_ease-in-out_infinite_1.5s] transform -rotate-135 origin-bottom-left group-hover:scale-125 transition-transform duration-500"></div>
  </div>

  <style>
    @keyframes spin-slow {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes spin-reverse {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(-360deg); }
    }
    @keyframes pulse-slight {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.05); opacity: 0.95; }
    }

    @keyframes leaf-pulse {
      0%, 100% { transform: translateY(0) scale(1) rotate(attr(data-rotate-initial)); opacity: 1; }
      50% { transform: translateY(-5px) scale(1.1) rotate(attr(data-rotate-mid)); opacity: 0.8; }
    }
    /* Custom property for rotation */
    .absolute:nth-of-type(3)[data-rotate-initial="45deg"] { transform: rotate(45deg); }
    .absolute:nth-of-type(3)[data-rotate-mid="55deg"] { transform: rotate(55deg); }
  </style>
</div>