.md-grid {
    max-width: 84%;
    /* max-width: initial; */
}

/* Centered item */
.centered {
    display: block;
    margin: 0 auto;
    width: fit-content;
}

/* custom by alex */
.red {
    color: red;
}

.orange {
    color: orange;
}

.yellow {
    color: yellow;
}

.green {
    color: green;
}

.blue {
    color: blue;
}

.indigo {
    color: indigo;
}

.violet {
    color: violet;
}


.md-typeset .grid.cards> :is(ul, ol)>li:is(:focus-within, :hover),
.md-typeset .grid>.card:is(:focus-within, :hover) {
    /* Firefox */
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 3px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px;
    border-color: var(--md-accent-fg-color);
}

.md-typeset .grid.cards>:-webkit-any(ul, ol)>li:-webkit-any(:focus-within, :hover) {
    /* Webkit */
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 3px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px;
    border-color: var(--md-accent-fg-color);
}

/* Testimonial cards */
.testimonial {
    padding: 40px 20px;
    border: 1px solid var(--pg-light-border);
    border-radius: 6px;
    background-color: var(--md-primary-fg-color);
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s; */

    .quote {
        font-size: 0.9rem;
        font-weight: 300;
    }

    .headshot {
        width: 5rem;
        height: 5rem;
        border-radius: 50%;
        object-fit: cover;
        /* Ensures the image keeps its aspect ratio */
    }

    .author {
        font-weight: bold;
        font-size: 1rem;
    }

    .logo {
        width: 7rem;
        /* You can adjust this based on the size you want */
        object-fit: contain;
        /* Ensures the logo keeps its aspect ratio */
        transition: opacity 0.3s;
    }

    .logo:hover {
        opacity: 0.8;
    }

    .role {
        font-size: 0.9rem;
        color: var(--md-default-fg-color--light);
        /* margin-top: 0.5rem; */
    }
}