.fade-in {
    opacity: 0;
    transform: translateY(20px); /* Start 20px below its final position */
    animation: fadeInAnimation 1s forwards;
    animation-delay: 0.3s;
}

@keyframes fadeInAnimation {
    from {
        opacity: 0;
        transform: translateY(20px); /* Starts from 20px below */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Ends at its natural position */
    }
}
/* Desktop and general styles */
.highlight-connect a {
    background-color: #ffffff; /* White background */
    color: #002229 !important; /* Teal text, with !important to ensure it takes precedence */
    padding: 4px 8px; /* Standard padding */
    border-radius: 5px; /* Rounded corners for a button-like appearance */
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .highlight-connect a {
        padding: 8px 12px !important; /* Increased padding for better touch target size on mobile */
        font-size: 16px; /* Optionally increase font size for better readability */
    }
}
/* ====== Investment Criteria cards ====== */
.criteria-grid{
    display:flex;
    flex-wrap:wrap;          /* breaks after 2 cards → 2×2 grid   */
    justify-content:center;  /* centres the whole grid            */
}

.criteria-card{
    /* size */
    flex:0 0 300px;          /* exact width 300 px                 */
    max-width:300px;
    height:220px;            /* exact height – change if needed   */

    /* spacing (acts like “gap”) */
    margin:24px;             /* space around every card           */

    /* keeps inner Stack stretched */
    display:flex;
    flex-direction:column;
}