.buttons {
    text-align: center;
    margin-top: 20px; /* Add some space between the paragraph and buttons */
}

.download-btn,
.signup-btn {
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
    font-size: 18px;
    display: inline-block;
    padding: 8px 25px;
    margin: 10px;
    text-decoration: none;
    border-radius: 20px;
    font-weight: bold;
    border: 2px solid #7B68EE; 
    backdrop-filter: blur(70px);   
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, color 0.3s ease;
    background: linear-gradient(to right,#7B68EE, #800080 0%,#FF69B4 ,#00BFFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
  
}
    


 .download-btn:hover,
.signup-btn:hover {
  color: #000000;
  
    background-size: 300% 300%;
    animation: gradientAnimation 6s ease infinite;
    box-shadow: 0 4px 15px rgba(0, 191, 255, 0.5);
    transform: scale(1.05);
}
  
  
.download-btn:active, 
  .signup-btn:active { color: #000000; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); transform: scale(0.95); } 
  
  
  
  .heading-with-underline {
    display: inline-block; /* Optional: To limit underline to text width */
    border-bottom: 3px solid #800080; /* Thickness and color of the underline */
    padding-bottom: 5px; /* Space between text and underline */
margin: 5px 0;    
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
















@keyframes colorChange {
            0% {
                color: #7B68EEd;
            }
            25% {
                color: #FF69B4;
            }
            50% {
                color: #00BFFF;
            }
            75% {
                color: #800080;
            }
            100% {
                color:  #7B68EE;
            }
        }

        .color-changing-text {
            
            font-size: 30px;
            animation: colorChange 12s infinite;
        }
        
        .ctext {
           text-align: center;
           font-size: 30px;
        }
        .ctexts {
           text-align: center;
           font-size: 25px;
           
           margin-right: 35%;
        }
        
        
         #acyve-particle-hero {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 0;
        border-radius: 10px;
        overflow: hidden;
    }