/* CSS For Louisville Rose Awards Categories page */

/* #categoriesHeaderSection {
    background: url('https://louisvilleroseawards.com/wp-content/uploads/2023/07/Categories-Image23.jpg');
    background-size: cover;
    height: 80em;
    margin-top: -12em;
    padding: 16em 0 0 0;
} */

#categoriesHeaderSection {
    position: relative;
    background: url('https://louisvilleroseawards.com/wp-content/uploads/2024/07/i-NPZcdzr-X2.jpg');
    background-size: cover;
    height: 80em;
    margin-top: -12em;
    padding: 16em 0 0 0;
    z-index: 0; /* Ensure this is behind the pseudo-element */
}

#categoriesHeaderSection::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75); /* Adjust the opacity as needed */
    z-index: -1; /* Ensure this is behind the content */
}

#roseAwardsTimeLineSection {
    padding: 5em 0;
}

h1 {
    font-size: 40pt;
    margin-bottom: 0.5em;
}

.mb {
    margin-bottom: 3em;
}

ul, ol {
    text-align: left;
    color: white;
}

.link-no-underline:hover {
    text-decoration: none;
}

.hover-orange:hover p {
    color: #c73b00!important;
}

@media (max-width: 1199px) {
    #categoriesHeaderSection {
        height: 70em;
    }
}

@media (max-width: 991px) {
    #categoriesHeaderSection {
        height: 75em;
        background-position: 39% 100%;
    }
}

@media (max-width: 767px) {
    #categoriesHeaderSection {
        background: rgb(12,0,52);
        background-size: initial;
        height: initial;
        padding: 12em 0 3em 0;
    }
}

@media (max-width: 479px) {
    #categoriesHeaderSection {
        padding: 11em 0 2em 0;
    }
}

@media (max-width: 404px) {
    h1 {
        font-size: 25pt;
    }

    h4 {
        font-size: 15pt;
    }
}