.btn-class {
            position: relative;
            background-color: #1a1a1a;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            /* border: 2px solid transparent; */
            display: inline-block;
        }

        .btn-class a {
            color: #ffffff;
            text-decoration: none;
            font-weight: 600;
            letter-spacing: 1px;
            transition: color 0.3s ease;
        }

        /* The hidden "Magnetic" border */
        .btn-class::before {
            content: "";
            position: absolute;
            inset: -2px; /* Starts slightly outside */
            border: 2px solid #007bff;
            opacity: 0;
            transform: scale(0.9); /* Starts smaller */
            transition: all 0.4s ease;
            pointer-events: none;
        }

        /* Hover Interaction: The border snaps into place and glows */
        .btn-class:hover {
            background-color: #007bff;
            transform: scale(1.1);
        }

        .btn-class:hover::before {
            opacity: 1;
            transform: scale(1); /* Snaps to full size */
        }
        
        .btn-class:hover a {
            color: #fff;
        }
