/* =======================================
   TECHNOLOGY STACK OVERVIEW
======================================= */

.stack-title{
    text-align:center;
    font-size:2.4rem;
    font-weight:700;
    margin-bottom:30px;
    color:#003366;
    letter-spacing:.5px;
    text-shadow:1px 1px 2px rgba(0,0,0,.10);
}

.technology-stack{
    padding:20px;
    border-radius:15px;
}

/* CARD */

.tech-card{
    position:relative;
    background:linear-gradient(
        180deg,
        #ffffff,
        #f8fbff
    );
    min-height:140px;
    border:1px solid #dbe3ea !important;
    border-radius:12px !important;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    transition:all .35s ease;
    cursor:pointer;
}

/* HOVER EFFECT */

.tech-card:hover{
    transform:translateY(-8px);
    box-shadow:0 16px 30px rgba(0,0,0,.20);
    background:#fffef8;
    z-index:100;
}

/* CARD TITLE */

.tech-card h5{
    font-size:1.25rem;
    font-weight:700;
    margin-bottom:18px;
}

/* BADGES */

.tech-badge{
    display:inline-block;
    background:#eef6ff;
    border:1px solid #cfe2ff;
    border-radius:25px;
    padding:8px 16px;
    margin:4px;
    color:#0d47a1;
    font-weight:600;
    font-size:.95rem;
}

/* TOP BORDER COLORS */

.backend-card{
    border-top:6px solid #28a745 !important;
}

.database-card{
    border-top:6px solid #0d6efd !important;
}

.infrastructure-card{
    border-top:6px solid #fd7e14 !important;
}

.development-card{
    border-top:6px solid #6f42c1 !important;
}

.hosting-card{
    border-top:6px solid #dc3545 !important;
}

.analytics-card{
    border-top:6px solid #20c997 !important;
}

/* HEADING COLORS */

.backend-card h5{
    color:#198754;
}

.database-card h5{
    color:#0d6efd;
}

.infrastructure-card h5{
    color:#fd7e14;
}

.development-card h5{
    color:#6f42c1;
}

.hosting-card h5{
    color:#dc3545;
}

.analytics-card h5{
    color:#20c997;
}

/* FIX HOVER CLIPPING */

.row.g-4.mb-5,
.col-lg-4,
.col-md-6{
    overflow:visible !important;
}