.categories{
    background:var(--card-background);
    border-radius:12px;
    box-shadow:var(--card-shadow);
}

.categories .title{
    margin:0;
    font-size:18px;
    padding:var(--main-padding);
    padding-bottom:0;
}

.categories .specialties{
    display:grid;
    grid-template-columns:1fr;
}


.categories .specialties .specialty{
    --badge-color: hsl(270, 50%, 40%);
    display:flex;
    align-items:center;
    text-decoration:none;
    color:var(--main-text-color);
    transition-duration: var(--main-transition-duration);
    transition-property: color, background, background-color;
    text-align: center;
    border-bottom: 1px solid var(--main-border-color);
    padding: 8px 18px;

    &:last-child{
        margin-bottom:0;
        border-bottom: none;
    }


    &:hover{
        
        background: color-mix(in srgb, var(--main-accent-color) 20%, var(--main-color-to-mix));
    }
}

.categories .specialties .specialty svg{
    width: 30px;
    height: 30px;
    margin-right: 8px;
    background-color: color-mix(in srgb, var(--badge-color) 15%, var(--main-color-to-mix));
    border-radius: 50%;
    padding: 5px;
    color: var(--badge-color);
    overflow: visible;
}

.categories .specialties .specialty .badge{
    background-color: color-mix(in srgb, var(--main-accent-color) 30%, var(--main-color-to-mix));
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 20px;
    font-weight: 600;
    text-transform: capitalize;
    margin-left: auto;
}



.categories .seeAll{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: 12px 18px;
    color: var(--main-muted-color);
    font-weight: 500;
    border-top: 1px solid var(--main-border-color);
    text-decoration: none;
    border-radius: 0 0 var(--main-radius) var(--main-radius);
    transition-duration: var(--main-transition-duration);
    transition-property: color, background, background-color;

    &:hover{
        background-color: color-mix(in srgb, var(--main-accent-color) 20%, var(--main-color-to-mix));
        color: var(--main-text-color);
    }
}


@container (width > 500px){ 
    .categories .specialties{
        order:2;
        grid-template-columns:1fr 1fr;

        .specialty:nth-child(odd){
            border-right: 1px solid var(--main-border-color);
        }

        .specialty:nth-last-child(2):nth-child(odd){
            border-bottom: none;
        }
    } 
}

.special{
    margin-top: 1rem;
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: true;
}

@keyframes rotateSpecial{
    to{
        --angle: 1turn;
    }
}

.special .title{
    font-size:18px;
    padding-bottom:0.5rem;
    font-weight: 600;
}

.special .calc-card{
    border: 5px solid transparent;
    background: 
    linear-gradient(var(--card-background) 0 0) padding-box, 
    conic-gradient(from var(--angle), blueviolet, pink, blueviolet) border-box;
    animation: rotateSpecial 4s linear infinite;
}

.special .calc-card .title svg{
    width:25px;
    height:25px;
    color: pink;
    animation: special-colorPulse 4s infinite alternate;
}

@keyframes special-colorPulse{
    0% { color: pink; }
    50% { color: blueviolet; }
    100% { color: pink; }
}