body{
    background-color: #FFDE59;
}
.spiritual-heading {
      font-family: 'Playfair Display', serif;
      letter-spacing: 1px;
    }
@keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes float {
      0%, 100% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-20px);
      }
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes pulse-glow {
      0%, 100% {
        box-shadow: 0 0 40px rgba(198, 40, 40, 0.3), 0 0 80px rgba(198, 40, 40, 0.2), inset 0 0 60px rgba(255, 255, 255, 0.1);
      }
      50% {
        box-shadow: 0 0 60px rgba(198, 40, 40, 0.5), 0 0 120px rgba(198, 40, 40, 0.3), inset 0 0 80px rgba(255, 255, 255, 0.2);
      }
    }

    .fade-in {
      animation: fadeIn 1s ease-out forwards;
    }

    .mala-circle {
      position: relative;
      width: 320px;
      height: 320px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.7));
      animation: pulse-glow 3s ease-in-out infinite, float 6s ease-in-out infinite;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 4px solid rgba(198, 40, 40, 0.15);
      backdrop-filter: blur(10px);
    }

    .mala-inner {
      width: 240px;
      height: 240px;
      border-radius: 50%;

      display: flex;
      align-items: center;
      justify-content: center;

      position: relative;
      overflow: hidden;
    }

    .mala-beads {
      position: absolute;
      width: 100%;
      height: 100%;
      animation: rotate 30s linear infinite;
    }

    .bead {
      position: absolute;
      width: 8px;
      height: 8px;
      background: rgba(198, 40, 40, 0.4);
      border-radius: 50%;
      top: 50%;
      left: 50%;
    }

    .om-symbol {
      position: relative;
      z-index: 2;
      font-size: 80px;
      font-weight: bold;
      background: linear-gradient(135deg, #C62828, #8B1515);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .om-symbol img{
        width: 100%;
    }
.btn-primary {
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      z-index: 1;
    }

    .btn-primary::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
      z-index: -1;
    }

    .btn-primary:hover::before {
      width: 300px;
      height: 300px;
    }

    .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 35px rgba(198, 40, 40, 0.4);
    }

    .btn-secondary {
      transition: all 0.3s ease;
      position: relative;
    }

    .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(26, 26, 26, 0.15);
    }