/* From Uiverse.io by McHaXYT */ 
.button-container {
display: flex;
justify-content: start;
align-items: center;
gap: 1.5rem;
}

.button {
cursor: pointer;
text-decoration: none;
color: #ffff;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #2d2e32;
border: 2px solid #2d2e32;
transition: all 0.45s;
}

.button:hover {
transform: rotate(360deg);
transform-origin: center center;
background-color: #ffff;
color: #2d2e32;
}

.button:hover .btn-svg {
filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(305deg)
brightness(103%) contrast(103%);
}

.flex-center {
display: flex;
justify-content: center;
align-items: center;
}

.Btn {
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background-color: transparent;
/* position: relative; */
/* overflow: hidden; */
border-radius: 7px;
cursor: pointer;
transition: all 0.3s;
/* agar bisa di scrol */

}

.svgContainer {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
backdrop-filter: blur(0px);
letter-spacing: 0.8px;
border-radius: 10px;
transition: all 0.3s;
border: 1px solid rgba(156, 156, 156, 0.466);
}

.BG {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #075e54;
z-index: -1;
border-radius: 10px;
pointer-events: none;
transition: all 0.3s;
}

.Btn:hover .BG {
transform: rotate(35deg);
transform-origin: bottom;
}

.Btn:hover .svgContainer {
background-color: rgba(156, 156, 156, 0.466);
backdrop-filter: blur(4px);
}