.btn-primary {
        background-color: #AA336A; /* Muted dark pink */
        border-color: #AA336A;
    }

    .btn-primary:hover {
        background-color: #932b5a; /* Darker shade for hover */
        border-color: #932b5a;
    }

    .navbar, .card-header, .alert-primary {
        background-color: #D33682; /* Use muted dark pink for navbar, card headers, alerts */
        color: white;
    }

    .text-primary {
        color: #AA336A !important;
    }


/* Container for Thumbnails */
.thumbnails-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
}

.model-thumbnails-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px; /* Space between the thumbnails */
}

/* Style for individual thumbnails */
.model-thumbnail {
    flex: 1 0 calc(100% / 7 - 10px); /* Ensures 7 thumbnails per row with space between them */
    margin-bottom: 20px;
    text-align: center;
}

.model-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Model name styling */
.model-name {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

/* Styling the links */
.model-link {
    text-decoration: none;
    color: inherit;
}

.model-link:hover {
    text-decoration: underline;
    color: #aa336a; /* Muted dark pink for hover */
}

/* Responsive Design */
@media (max-width: 1200px) {
    .model-thumbnail {
        flex: 1 0 calc(100% / 6 - 10px); /* 6 thumbnails per row on medium screens */
    }
}

@media (max-width: 992px) {
    .model-thumbnail {
        flex: 1 0 calc(100% / 5 - 10px); /* 5 thumbnails per row on smaller screens */
    }
}

@media (max-width: 768px) {
    .model-thumbnail {
        flex: 1 0 calc(100% / 3 - 10px); /* 3 thumbnails per row on tablets */
    }
}

@media (max-width: 576px) {
    .model-thumbnail {
        flex: 1 0 calc(100% / 2 - 10px); /* 2 thumbnails per row on mobile */
    }
}