body {
    background-color: #19191a;
    color: #f5f5f5;
    font-family: 'Nunito', sans-serif;
     background-image: linear-gradient(to bottom,#151522 2px, transparent 550px);
}

.main-container {
    width: 95%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 20px; /* Add horizontal padding */
}


.custom-container {
    padding: 2px 0; /* This ensures there's space above and below the title and dropdown */
}

.custom-title {
    font-family: 'Nunito Sans', sans-serif;
    color: #f5d6df; /* Adjust color as per your requirement */
    text-align: left;
    padding-top: 0px; /* Add space above the title, adjust as needed */
    margin-bottom: -10px; /* Space between title and images, adjust as needed */
    font-weight: 600;
}

.masonry-grid {
    column-count: 1; /* This will give you 6 columns by default */
    column-gap: 6px; /* Gap between the columns */
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.grid-item {
    display: inline-block;
    width: 100%;
    background-color: #333;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 6px; /* Gap between items in the same column */
}


.card {
    margin: 0;
}

.card-img-top {
    width: 100%;
    height: auto;
    min-width: 240px;
}

.card-body {
    padding: 10px;
}

.search-container {
    display: flex;
    align-items: flex-end; /* Align items to the bottom */
    justify-content: flex-end; /* Pushes content to the right side */
    padding-top: 20px; /* Add padding to the top */
}

.search-form {
    font-family: 'Nunito Sans', sans-serif;
    margin-right: 10px; /* Some space between search and dropdown */
}

#search-box {
    font-family: 'Nunito Sans', sans-serif;
    margin-left: 10px;
    font-size: 14px;
    background-color: #30383f;
    color: white;
    text-align: right;
    max-width: 150px;
    width: 125px;
    height: 25px; 
    border: none;
    padding: 2px 8px;
    border-radius: 4px;
}

.dropdown-item:hover {
    background-color: #f0f0f0;  /* Light gray */
    color: #777c96;  /* Dark gray-blue */
}

.btn-dark.dropdown-toggle:hover {
    background-color: #484c5a; /* Slightly lighter than the original background */
    color: rgb(243, 218, 241); /* Text color, assuming you want it to be white */
}

.sort-by-box {
    background-color: #30383f;
    color: rgb(235, 188, 219);
    font-size: 14px;
    text-align: right;
    max-width: 95px;
    width: 90px;
    height: 25px; 
    border: none;
    padding: 0px 8px;
    border-radius: 4px;
    line-height: 25px; /* To center the text vertically */
}

.search-query-container {
    font-size: 14px;
    font-family: 'Nunito Sans', sans-serif;
    text-align: left; /* This will right-align the content inside this div */
    margin-bottom: 10px; /* Gives some space before the cards or next content */
}

.search-query {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12px;
    font-style: italic;
    color: #777c96; /* This is a dark gray-blue color, you can adjust to your preference */
}

/* Small screens - 2 columns (like tablets in portrait) */
@media (min-width: 600px) {
    .masonry-grid {
        column-count: 2;
    }
}

/* Medium screens - 3 columns (like tablets in landscape) */
@media (min-width: 768px) {
    .masonry-grid {
        column-count: 3;
    }
}

/* Large screens - 4 columns (like smaller laptops) */
@media (min-width: 992px) {
    .masonry-grid {
        column-count: 4;
    }
}

/* Extra large screens - 5 columns (like larger laptops and desktops) */
@media (min-width: 1100px) {
    .masonry-grid {
        column-count: 5;
    }
}
/* Extra large screens - 6 columns (like larger laptops and desktops) */
@media (min-width: 1280px) {
    .masonry-grid {
        column-count: 6;
    }
}


/* Extra Extra large screens - 7 columns (like larger laptops and desktops) */
@media (min-width: 1440px) {
    .masonry-grid {
        column-count: 7;
    }
}


/* Extra Extra large screens - 7 columns (like larger laptops and desktops) */
@media (min-width: 1600px) {
    .masonry-grid {
        column-count: 8;
    }
}