body {
}

:root {
    /* CSS HEX */
    --coffee: #644536ff;
    --redwood: #b2675eff;
    --lion: #c4a381ff;
    --pistachio: #bbd686ff;
    --cream: #eef1bdff;
    --indigo: #4f46e5;
}

/* Wrapper for .NET and Development Portfolio */
.relative-wrapper {
    font-size: 3rem; /* Match text size */
    line-height: 1.2;
}

/* Background box */
.custom-box {
    position: absolute;
    bottom: -4px; /* Similar to -bottom-1 */
    left: -8px; /* Similar to -left-2 */
    right: -8px; /* Similar to -right-2 */
    top: -4px; /* Similar to -top-1 */
    background-color: #4f46e5; /* Indigo-600 equivalent */
    transform: rotate(-1deg);
    z-index: -1; /* Ensure it's behind the text */
    border-radius: 4px; /* Optional: Add slight rounding */
}

/* Text for .NET */
.text-neutral {
    color: white; /* Neutral gray equivalent */
    font-weight: bold; /* Ensure the text is bold */
}

/* Development Portfolio heading */
.fs-3em {
    font-size: 3rem; /* Match the size of the text */
}

.d-flex.align-items-center {
    display: flex;
    align-items: center; /* Vertically center-align items */
    gap: 1rem; /* Add spacing between .NET and Development Portfolio */
}

/* Responsive Adjustments */
@media (min-width: 768px) {
    .custom-box {
        bottom: 0; /* Reset for medium screens */
        left: -12px; /* Similar to -left-3 */
        right: -12px; /* Similar to -right-3 */
        top: 0; /* Reset for medium screens */
    }
}

.project-container {
    height: 500px;
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    overflow: hidden; /* Ensure the pseudo-elements don't extend outside the border-radius */
    
}


.project-container::after {
    content: ""; /* Required */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay; adjust opacity as needed */
    backdrop-filter: blur(5px); /* This blurs the area behind the pseudo-element, not the image itself */
    -webkit-backdrop-filter: blur(5px); /* For Safari */
    z-index: 1; /* Same as ::before to ensure it's under the content */
}


/* Ensure the content of the container is positioned above the pseudo-elements */
.project-container > * {
    position: relative;
    z-index: 2; /* Higher than the pseudo-elements */
}


@media (max-width: 460px) {
    .d-flex {
        flex-direction: column !important;
    }