.container-expertise{
    margin: 0 auto;
    padding: 6rem 0;

    max-width: 1400px; 
}

.heading-expertise{
    max-width: 50rem;

    text-align: center;

    margin: 0 auto;
    margin-bottom: 4rem;    
}
.text-secondary{
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-family: "Manrope", sans-serif;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    color: hsl(var(--secondary));    
}

.title-semi{
    margin-top: 1rem;
    color: hsl(var(--foreground));
    text-align: center;

    font-family: "Inter", sans-serif;
    font-weight: 800;

    font-size: 2.25rem;
    line-height: 1;
}
@media (min-width: 768px) {
    .title-semi {
        font-size: 3rem;
    }
}

.container-dev{
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2rem;
}
@media (min-width: 768px) {
    .container-dev {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.btn-dev, .btn-data{
    position: relative;
    overflow: hidden;
    text-decoration: none;
    border-radius: 1.5rem;
    background-color: white;

    padding: 2.5rem;
    box-shadow: var(--shadow-card);

    transition: all 0.5s;
}
.btn-dev:hover, .btn-data:hover {
    box-shadow: var(--shadow-glow);
}

.blob-dev{
    position: absolute;

    top: -5rem;
    right: -5rem;

    width: 16rem;
    height: 16rem;

    opacity: 0.2;

    transition: transform 0.7s;
    background: radial-gradient(circle, #3b82f6, #1d4ed8);
    border-radius: 42% 58% 64% 36% / 47% 41% 59% 53%;
}
.btn-dev:hover .blob-dev {
    transform: scale(1.25);
}

.lucide-code{
    width: 3rem;
    height: 3rem;

    margin-bottom: 1.5rem;    
}
.title-carddev{
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2rem;

    color: black;

    margin-bottom: 0.75rem;
}
.text-foreground{
    font-family: "Inter", sans-serif;

    margin-bottom: 1.5rem;
    color: hsl(var(--muted-foreground));
}
.inline-btn{
    display: inline-flex;
    align-items: center;

    gap: 0.5rem;

    color: hsl(var(--primary));

    font-family: "Inter", sans-serif;
    font-weight: 600;    
}
.lucide-arrow{
    width: 1rem;
    height: 1rem;

    transition: transform 0.2s ease;
}
.inline-btn:hover .lucide-arrow{
    transform: translateX(0.25rem);
}

.blob-data{
    position: absolute;

    top: -5rem;
    right: -5rem;
    z-index: 10;

    width: 16rem;
    height: 16rem;

    opacity: 0.2;

    transition: transform 0.7s;
    background: radial-gradient(circle, #ef4444, #991b1b);
    border-radius: 42% 58% 64% 36% / 47% 41% 59% 53%;
}
.btn-data:hover .blob-data {
    transform: scale(1.25);
}