:root {
        --gradient: conic-gradient(
            from 90deg at 50% 50%,
            rgb(251, 55, 60),
            rgba(252, 114, 28, 1),
            rgba(255, 220, 0, 1),
            rgba(27, 206, 255, 1),
            rgba(42, 107, 255, 1),
            rgba(217, 41, 255, 1),
            rgba(255, 10, 92, 1)
        );
    }
    .feature-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 per row */
        gap: 20px;
    }

    #feature_card {
        max-height: 100px;
        padding: 10px;
        border: 1px dashed #166E9E;
        border-radius: 10px;
        transition: transform 0.3s ease;
        cursor: pointer;
    }
    #feature_card:hover{
        box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
        border: 1px dashed #8AC6D2;
        transform: scale(1);
    }
    #feature_card_body{
        padding-left: 10px;
    }
    #feature_card_img{
        width: 80px;
        height: 80px;
    }
    #feature_card_desc{
        font-size: 15px;
    }

    /* Responsive: 2 cards per row on tablets */
    @media (max-width: 992px) {
        .feature-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* Responsive: 1 card per row on mobile */
    @media (max-width: 576px) {
        .feature-grid {
            grid-template-columns: 1fr;
        }
    }