.button-wrapper {
text-decoration: none;
position: relative;
display: inline-block;
}

.box3 {
padding: 5px 15px;
display: inline-block;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
cursor: pointer;
font: 16px/24px Inter, Arial, sans-serif;
background-color: #329CD7;
border-radius: 30px; /* More rounded corners for capsule shape */
position: relative;
transition: 
box-shadow 0.4s ease, 
background-color 0.4s ease, 
color 0.4s ease;
box-shadow: 
0 0 2px 0 rgba(50, 156, 215, 0.1), 
0 0 4px 0 rgba(50, 156, 215, 0.2), 
0 0 6px 0 rgba(50, 156, 215, 0.3), 
0 0 8px 0 rgba(50, 156, 215, 0.4),
0 0 12px 0 rgba(50, 156, 215, 0.5), 
0 0 18px 0 rgba(50, 156, 215, 0.6);
width: 200px; /* Wider for capsule look */
height: 50px; /* Adjusted height */
display: flex;
justify-content: center;
align-items: center;
}

.box3:hover {
background-color: #2b85b8;
box-shadow: 
0 0 2px 0 rgba(50, 156, 215, 0.2), 
0 0 4px 0 rgba(50, 156, 215, 0.3), 
0 0 6px 0 rgba(50, 156, 215, 0.4), 
0 0 8px 0 rgba(50, 156, 215, 0.5),
0 0 12px 0 rgba(50, 156, 215, 0.6), 
0 0 18px 0 rgba(50, 156, 215, 0.7);
}

.box3 span {
color: #ffffff;
letter-spacing: 2px;
font-weight: 600;
position: relative;
z-index: 1;
}

.box3 i {
position: absolute;
z-index: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: inherit;
overflow: hidden;
border-radius: 30px; /* Match rounded corners for consistency */
}

.box3 i:before,
.box3 i:after {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: 50%;
transform: translate(-50%, -75%);
}

.box3 i:before {
border-radius: 45%;
background-color: rgba(255, 255, 255, 0.1);
animation: animate 7s linear infinite;
}

.box3 i:after {
border-radius: 80%;
background-color: rgba(255, 255, 255, 0.15);
animation: animate 15s linear infinite;
}

@keyframes animate {
0% {
transform: translate(-50%, -75%) rotate(0deg);
}
100% {
transform: translate(-50%, -75%) rotate(360deg);
}
}