.my-custom-button1 {
    background-color: #3f5382;
    border-radius: 30px;
    border: none; /* Optional: to remove any border */
    color: #ffffff; /* Optional: to make the text color white */
    padding: 10px 20px; /* Optional: for padding */
    font-size: 16px; /* Optional: for font size */
    transition: background-color 0.2s ease; /* Smooth transition effect */
}

.my-custom-button1:hover {
    background-color: #6c89bb; /* Darker shade for hover effect */
}

.my-custom-button2 {
    background-color: #3f5382;
    border-radius: 30px;
    border: none; /* Optional: to remove any border */
    color: #ffffff; /* Optional: to make the text color white */
    padding: 10px 20px; /* Optional: for padding */
    font-size: 16px; /* Optional: for font size */
    transition: background-color 0.2s ease; /* Smooth transition effect */
}

.my-custom-button2:hover {
    background-color: #6c89bb; /* Darker shade for hover effect */
}




.metric-card {
    background-color: #CEAF520D; /* Transparent background color */
    border-radius: 15px;         /* Rounded corners */
    padding: 10px;               /* Padding inside the card */
    width: 260px;                /* Width of the card*/
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow for card */
    color: #101828;                 /* Text color */
    font-family: 'Nunito Sans'; /* Font family */
}

.metric-card .icon {
    border-radius: 50%;        /* Circular icon */
    padding: 10px;
    display: inline-block;
    margin-bottom: 10px;
    width: 30px;
    height: 30px;
}

.metric-card .value {
    font-size: 30px;           /* Large font size for the number */
    font-weight: bold;         /* Bold font weight */
    margin: 10px 0;
    padding: 10px;

}

.metric-card .label {
    padding: 20px;
    font-size: 16px;           /* Font size for label */
    margin-bottom: 5px;
    color: #101828;
    font-weight: 700;          /* Bold font weight */

}

.metric-card .growth {
    color: #43b03c;            /* Green color for the growth indicator */
    font-size: 16px;           /* Font size for growth percentage */
    display: flex;
    align-items: center;
    padding: 10px;

}

.metric-card .growth .arrow {
    width: 15px;
    height: 15px;
    background-color: #43b03c; /* Matching green for the arrow */
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* Triangle shape for arrow */
    margin-right: 5px;
}