/* Custom styles for the Benie Bookshop Overview */

.benie-overview-container {
    background-color: #2c3e50; /* Dark background color for the container */
    color: #ecf0f1; /* Light text color for general text */
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px; /* Spacing below the container if other content follows */
    max-width: 960px; /* Optional: Max width to keep it contained, adjust as needed */
    box-sizing: border-box;
    margin-left: auto; /* Center the container horizontally */
    margin-right: auto; /* Center the container horizontally */
}

.benie-overview-title {
    color: #ecf0f1;
    font-size: 1.8em;
    margin-bottom: 25px;
    text-align: center;
    font-weight: bold;
}

.benie-overview-item {
    text-align: center;
    padding: 15px 0;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.benie-overview-value {
    font-size: 2.2em;
    font-weight: bold;
    margin-bottom: 5px;
    line-height: 1.2;
}

.benie-overview-label {
    font-size: 0.95em;
    color: #bdc3c7;
    text-transform: capitalize;
}

.benie-color-primary {
    color: #87CEEB !important; /* Light Sky Blue */
}

.benie-color-secondary {
    color: #FFA500 !important; /* Orange */
}

.benie-color-red {
    color: #F08080 !important; /* Light Coral */
}

.benie-color-blue {
    color: #ADD8E6 !important; /* Light Blue */
}

/* Standard grid system classes - keep these if you use Bootstrap or similar */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
    justify-content: center;
}

.col-3, .col-lg-3, .col-md-3, .col-sm-6, .col-xs-6 {
    flex: 0 0 25%;
    max-width: 25%;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    margin-bottom: 15px;
}

/* Responsive adjustments for the grid */
@media (max-width: 991px) {
    .col-lg-3 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}

@media (max-width: 767px) {
    .col-md-3, .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 575px) {
    .col-xs-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}