body { font-family: sans-serif; }

/* Custom styles for new feature section */
.text-web-primary {
    color: #D946EF; /* Fuchsia 500 - a magenta/pink color */
}

.bg-light-magenta {
    background-color: #FCE7F3; /* Pink 100 - a light magenta/pink */
}

.p-10px {
    padding: 10px;
}

/* Ensure Tabler's .fw-bold is sufficient for font-weight-700 */
/* Ensure Tabler's .fs-4 is sufficient for font-size-18 (1.125rem) */

/* Styling for the feature boxes as per the user's HTML structure */
.feature-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
    gap: 1.5rem; /* Spacing between items, adjust as needed */
}

.box-item {
    display: flex;
    flex-direction: column; /* Align icon and text vertically */
    align-items: center; /* Center items horizontally */
    text-align: center;
    padding: 1.5rem; /* Padding inside each box */
    border-radius: 8px; /* Rounded corners for the boxes */
    background-color: #fff; /* White background for boxes */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.box-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

.box-item .icon-container { /* Create a wrapper for icon if needed, or style the div directly */
    font-size: 40px; /* Already in inline style, but good to have a class */
    margin-bottom: 1rem;
}

.box-item .text p:first-child { /* The feature title, e.g., "Hitungan Mundur" */
    /* font-size-18 and font-weight-700 will be replaced by Tabler fs-4 and fw-bold */
    margin-bottom: 0.5rem;
}

.box-item .text p:last-child { /* The feature description */
    font-size: 0.875rem; /* text-secondary or similar from Tabler */
    color: #6c757d; /* text-secondary color from Tabler */
}