.category .btn{
    margin: 0 5px;
    padding: 10px 20px !important;
    width: 270px;
}

@media (max-width: 576px) {
    .category .btn{
        margin: 0 5px;
        padding: 5px 10px !important;
        width: 270px;
    }

    .category a{
        font-size: 12px !important;
    }
}

/* PIYORU BUTTON */
.btn-outline-piyoru {
    position: relative;
    border: 1px solid var(--black) !important; 
    color: var(--black);
    overflow: hidden;
    transition: color 0.4s ease-in-out, border-color 0.4s ease-in-out;
}

.btn-outline-piyoru::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg, #FFD4D4 -0.73%, #FFE7D3 50.35%, #B7D9FF 104.46%);
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    z-index: -1;
}

.btn-outline-piyoru:hover {
    border-color: transparent !important;
    color: var(--black);
}

.btn-outline-piyoru:hover::before {
    opacity: 1;
}

.btn-outline-piyoru.active {
    background: linear-gradient(95deg, #FFD4D4 -0.73%, #FFE7D3 50.35%, #B7D9FF 104.46%) !important;
    color: var(--black) !important;
    border-color: transparent !important;
    opacity: 1 !important;
}

/* CHISE BUTTON */
.btn-outline-chise {
    position: relative;
    border: 1px solid var(--black) !important;
    color: var(--black) !important;
    overflow: hidden;
    transition: color 0.4s ease-in-out, border-color 0.4s ease-in-out;
}

.btn-outline-chise::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #FFE3E3;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    z-index: -1;
}

.btn-outline-chise:hover {
    border-color: transparent !important;
    color: var(--black) !important;
}

.btn-outline-chise:hover::before {
    opacity: 1;
}

.btn-outline-chise.active {
    background: #FFE3E3 !important;
    color: var(--black) !important;
    border-color: transparent !important;
    opacity: 1 !important;
}

/* ALLEN BUTTON */
.btn-outline-allen {
    position: relative;
    border: 1px solid var(--black) !important;
    color: var(--black) !important;
    overflow: hidden;
    transition: color 0.4s ease-in-out, border-color 0.4s ease-in-out;
}

.btn-outline-allen::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--light-orange);
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    z-index: -1;
}

.btn-outline-allen:hover {
    border-color: transparent !important;
    color: var(--black) !important;
}

.btn-outline-allen:hover::before {
    opacity: 1;
}

.btn-outline-allen.active {
    background: var(--light-orange) !important;
    color: var(--black) !important;
    border-color: transparent !important;
    opacity: 1 !important;
}

/* LUCIA BUTTON */
.btn-outline-lucia {
    position: relative;
    border: 1px solid var(--black) !important;
    color: var(--black) !important;
    overflow: hidden;
    transition: color 0.4s ease-in-out, border-color 0.4s ease-in-out;
}

.btn-outline-lucia::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--light-blue);
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    z-index: -1;
}

.btn-outline-lucia:hover {
    border-color: transparent !important;
    color: var(--black) !important;
}

.btn-outline-lucia:hover::before {
    opacity: 1;
}

.btn-outline-lucia.active {
    background: var(--light-blue) !important;
    color: var(--black) !important;
    border-color: transparent !important;
    opacity: 1 !important;
}


.title h5 {
    font-size: clamp(16px, 3vw, 24px) !important;
    color: var(--black) !important;
    margin: 0;
    letter-spacing: 6px;
}

.title h2 {
    font-size: clamp(32px, 5vw, 64px) !important;
    font-weight: 800;
    margin: 0;
    letter-spacing: 23px;
}

.mini-title h3{
    font-size: clamp(24px, 5vw, 36px) !important;
    margin: 0;
    letter-spacing: 6px;
    color: var(--black);
    padding: 2rem 0;
}