@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');

  .container3D { transform-style: preserve-3d; }
  .container { position:relative; }




  #s4a {
  position:relative;
  overflow:hidden;
  display: flex;
  justify-content: center;
  align-items: center; /* 👈 Centers button vertically */
  z-index: 34;
  width:100%;
  font-size:3rem; 
  color:white; 
  transform-style: preserve-3d; 
  backface-visibility:hidden;
  padding: 10rem 0; 
  transform: translateY(35%);
  }

    #s4a .btn3 {
  position: relative;
  z-index: 38; /* ensures above particles */
  top: 50px;
}

  #s4b {
  position:relative;
  overflow:hidden;
  display: flex;
  justify-content: center;
  align-items: center; /* 👈 Centers button vertically */
  z-index: 34;
  width:100%;
  font-size:3rem; 
  color:white; 
  transform-style: preserve-3d; 
  backface-visibility:hidden;
  padding: 10rem 0; 
  }

    #s4b .btn3 {
  position: relative;
  z-index: 38; /* ensures above particles */
  top: 50px;
}

  #s4c {
  position:relative;
  overflow:hidden;
  display: flex;
  justify-content: center;
  align-items: center; /* 👈 Centers button vertically */
  z-index: 34;
  width:100%;
  font-size:3rem; 
  color:white; 
  transform-style: preserve-3d; 
  backface-visibility:hidden;
  padding: 10rem 0; 
  }

    #s4c .btn3 {
  position: relative;
  z-index: 38; /* ensures above particles */
  top: 50px;
}
a {
  text-decoration: none;
}

  /* 🎨 Button Style */
.btn3 {

  position: relative;
  padding: 14px 40px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #000000; /* neon lime (matches your earlier theme) */
  background: rgba(255, 255, 255, 0.4); /* glass transparent */
  border: 3.5px solid rgb(255, 255, 255);
  border-radius: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s ease;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.btn3::before {
 content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 180deg at 50% 50%,
    #00fff7,
    #8a2be2,
    #d2fa7a,
    #00fff7
  );
  opacity: 0.15;
  animation: rotate 6s linear infinite;
}
  


  .btn3:hover {
   color: #fff;
  border: 1px solid rgba(210, 250, 122, 0.8);
  box-shadow: 0 0 20px #eafffe, 0 0 40px #0c0c0c;
  transform: translateY(-3px) scale(1.05);

  }

  .awesome-btn3::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.1);
}

.oneMusic-btn3 i {
  font-size: 1.2em;   /* make it slightly bigger */
  margin-left: 8px;   /* give spacing from text */
  vertical-align: middle; /* align nicely with text */
}

  /* Animated gradient movement */
@keyframes spin {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}
  /* Fade In Up Animation */
  @keyframes fadeInUp {
    0% { opacity:0; transform: translateY(40px); }
    100% { opacity:1; transform: translateY(0); }
  }
  .fadeInUp {
    animation: fadeInUp 1s ease forwards;
  }