:root {
    --card-primary-color: #1a589e;
    --card-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --card-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Base Card Styles */
.bidding-opportunity-card {
    /* Structure & Layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
 
    
    
    /* Sizing */
    height: 9rem; /* h-36 */
    padding: 1rem; /* p-4 */
    gap: 0.5rem; /* space-y-2 (using modern flex gap) */

    /* Appearance */
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: var(--card-shadow-xl); /* shadow-xl */
    border: 1px solid #1a589e; /* border border-gray-100 */
    background-color: #ffffff; /* bg-white */
    overflow: hidden;

    /* Border Top Color and Width */
    border-top-width: 8px; /* border-t-8 */
    border-top-color: var(--card-primary-color); /* style="border-top-color: #1a589e;" */
    
    /* Transitions */
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-all duration-300 */
}

/* Hover Effects */
.bidding-opportunity-card:hover {
    box-shadow: var(--card-shadow-2xl); /* hover:shadow-2xl */
    transform: scale(1.01); /* hover:scale-[1.01] */
}

/* Icon Styles */
.bidding-opportunity-icon {
    /* Sizing */
    width: 2rem; /* w-8 */
    height: 2rem; /* h-8 */
    margin-bottom: 0.25rem; /* mb-1 */

    /* Appearance */
    color: var(--card-primary-color); /* style="color: #1a589e;" */
    
    /* Transitions */
    transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-colors duration-300 */
}

/* Text Styles */
.bidding-opportunity-text {
    /* Font */
    font-size: 1rem; /* text-base */
    font-weight: 800; /* font-extrabold */
    line-height: 1.25; /* leading-tight */
    color: #000000; /* text-black */
}