.btn-bg-grad .tn-atom {
        background-image: linear-gradient(to right, #A2B5BC 0%, #C2D1D7 25%, #F8FFCC 50%, #F7FF9D 55%, #FCFF66 100%) !important;
        background-position: 0 0 !important;
        background-size: 400% 200% !important;
        transition: all 1s ease-in-out !important;
      }
    
      .btn-bg-grad .tn-atom:hover {
        background-position: 100% 0 !important;  
      }


    

      .btn-bg-grad2 .tn-atom {
        background-image: linear-gradient(to right, #070D0F 0%, #171D1F 25%, #4A5457 50%, #4A5457 55%, #2A3234 100%) !important;
        background-position: 0 0 !important;
        background-size: 400% 200% !important;
        transition: all 1s ease-in-out !important;
      }
    
      .btn-bg-grad2 .tn-atom:hover {
        background-position: 100% 0 !important;  
      }
  
  
  

    .btn-bg-grad3 {
        text-decoration: none;
        transition: opacity 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
    }
    .btn-bg-grad3::after {
        --scale: 0;
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 1px;
        border-radius: 0px;
        background: linear-gradient(135deg, #C2D1D7, #FCFF66);
        transform: scaleX(var(--scale));
        transform-origin: var(--x) 50%;
        transition: transform 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
    }
    .btn-bg-grad3:hover {
        opacity: 1;
    }
    .btn-bg-grad3:hover::after {
        --scale: 1;
    }


    
    
    #rec642300341 {
        top: 0;
        width: 100%;
        position: fixed;
        z-index: 9999;
    }



    

      .btn-bg-grad4 .tn-atom {
        background-image: linear-gradient(180deg, #161717 0%, #1B1C1C 25%, #1B1C1C 50%, #1E1F1F 55%, #222424 100%) !important;
        background-position: 0 0 !important;
        background-size: 400% 200% !important;
        transition: all 0.6s ease-in-out !important;
      }
    
      .btn-bg-grad4 .tn-atom:hover {
        background-position: 100% 100% !important;
      }
      






    document.querySelectorAll('.btn-bg-grad3').forEach((elem) => {
    	elem.onmouseenter = elem.onmouseleave = (e) => {
            const tolerance = 10;
    		const left = 0;
    		const right = elem.clientWidth;
    		let x = e.pageX - elem.offsetLeft;
    		if (x - tolerance < left) x = left;
    		if (x + tolerance > right) x = right;
    		elem.style.setProperty('--x', `${ x }px`);
    	}
    });