.poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.required::after {
    content: "*";
    font-weight: bold;
    color: red;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    font-size: 16px;
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    font-family: "Poppins", Arial;
}

.wrap-flex {
    display: flex;
    align-items: center;
}

    .wrap-flex > * {
        padding: 1px;
        margin: 0;
    }


/* Navbar */

#navbar a {
    margin-right: 10px;
    font-weight: 400;
    color: black;
}

/* Home Page Hero */

#mainHeroBackground {
    background-color: #00a0af;
}

#mainHeroContainer h4 {
    font-size: 30px;
    color: white;
    font-weight: 600;
}

#mainHeroContainer h1 {
    font-size: clamp(55px, 5.8vw, 75px);
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
    color: white;
}

#mainHeroContainer p {
    color: white;
    font-weight: 600;
}

/* Home Page Brain Card */

#mainBrainCardHeader {
    background-color: #052f5f;
    border-radius: 30px 30px 0 0;
}

#mainBrainCard {
    color: white;
    max-width: 400px;
    border: none;
    border-radius: 30px 30px 0 0;
}

    #mainBrainCard a {
        color: white;
        text-decoration: none;
    }

#mainBrainCardBody {
    background-color: rgba(0,160,175);
    border-radius: 0 0 30px 30px;
}

/* Home Page Spinal Card */

#mainSpinalCardHeader {
    background-color: #052f5f;
    border-radius: 30px 30px 0 0;
}

#mainSpinalCard {
    color: white;
    max-width: 400px;
    border: none;
    border-radius: 30px 30px 0 0;
}

    #mainSpinalCard a {
        color: white;
        text-decoration: none;
    }

#mainSpinalCardBody {
    background-color: rgba(0,160,175);
    border-radius: 0 0 30px 30px;
}

/* Home Page - Additional Filter Options */

#addFilterOptions {
    background-color: #052F5F;
}

#addFilterOptionsCards {
    color: white;
    background-color: #052f5f;
    border-radius: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    #addFilterOptionsCards .card {
        border: none;
        padding-bottom: 10px;
        background-color: #052f5f;
        border-radius: 20px;
    }

    #addFilterOptionsCards .card-body {
        background-color: #00A0AF;
        border-radius: 20px;
    }

    #addFilterOptionsCards .card a {
        background-color: #00A0AF;
        color: white;
        text-decoration: underline;
        text-decoration: none;
        font-size: 32px;
    }

    #addFilterOptionsCards .card .list-group-item {
        background-color: #00A0AF;
        border: none;
    }

/* Home Page - SearchByTypeAndCategory Partial View */

#searchByResourceTypeDiv {
    column-count: 2; /* Number of columns */
}

    #searchByResourceTypeDiv li {
        break-inside: avoid; /* Prevent items from breaking between columns */
    }

#searchByResourceTypeTitle {
    font-weight: 900;
    font-size: 40px;
}

#searchByCategoryDiv {
    column-count: 2; /* Number of columns */
}

    #searchByCategoryDiv li {
        break-inside: avoid; /* Prevent items from breaking between columns */
    }

#searchByCategoryTitle {
    font-weight: 900;
    font-size: 40px;
}

#SearchByTypeAndCategory_Box {
    background-color: #00A0AF;
    color: white;
}

    #SearchByTypeAndCategory_Box a {
        text-decoration: none;
        color: white;
        font-size: 32px;
    }

        #SearchByTypeAndCategory_Box a:hover {
            text-decoration: underline;
        }


/* Site Wide Search */

#SiteWideSearchResult i {
    color: #0D6EFD;
}

#noResultsText {
    font-size: 30px;
}

/* About Pages */
#aboutBanner {
    color: white;
    display: flex;
    flex-shrink: 1;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: rgb(0,160,175);
    background: linear-gradient(90deg, rgba(0,160,175,1) 0%, rgba(5,47,95,1) 76%);
    min-height: 300px;
}

    #aboutBanner h1 {
        font-size: 75px;
    }

    #aboutBanner p {
        color: gray;
        font-weight: 400;
    }

#aboutColorWrapper {
    background-color: #052f5f;
    border-radius: 30px;
}

    #aboutColorWrapper h3 {
        color: white;
    }

    #aboutColorWrapper p {
        color: white;
    }

#aboutFileDownloadCard {
    color: white;
    background-color: #052f5f;
    border-radius: 30px;
    padding: 50px;
}

    #aboutFileDownloadCard .card {
        border: none;
        padding-bottom: 10px;
        background-color: #052f5f;
        border-radius: 20px;
    }

    #aboutFileDownloadCard .card-body {
        background-color: white;
        border-radius: 20px;
    }

        #aboutFileDownloadCard .card a {
            background-color: white;
            color: black;
            text-decoration: underline;
        }

    #aboutFileDownloadCard .card .list-group-item {
        background-color: white;
        border: none;
    }

/* Support Group Page */
/*.supportGroupHeader {
    background-color: #1073d6;
    border-radius: 30px 30px 0px 0px;
    padding: 20px;
}

.supportGroupHeader h2 {
    font-weight: bold;
}

.supportGroupBody {
    padding: 20px;
}

.supportGroupContactGroup {
    padding: 20px;
}

.supportGroupButtons {
    padding: 20px;
}

.supportGroupFooter {
    padding: 20px;
}

#supportGroupButtonsLink {
    color: rgba(247,142,30);
    text-decoration: none;
}

#supportGroupButtonsLink:hover {
    color: aqua;
}

.supportGroupFooter {
    background-color: #e5e4e2;
    border-radius: 0px 0px 30px 30px;
}*/

/* Events Page */
#eventFilterButton {
    padding-top: 10px;
    text-align: center;
}

#eventsOngoingItems {
}

#eventsOngoingItem {
    background-color: white;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 20px;
}

    #eventsOngoingItem a {
        color: black;
    }

    #eventsOngoingItem p {
        color: black;
    }

#verticalLine {
    border-left: 6px solid #00A0AF;
    height: auto;
    margin-top: 25px;
    margin-bottom: 25px;
}


    /* Category Filter Page */
    #catFilterBanner {
    background: rgb(0,160,175);
    background: linear-gradient(90deg, rgba(0,160,175,1) 0%, rgba(5,47,95,1) 76%);
    max-height: 520px;
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

    #catFilterBanner h1 {
        font-size: clamp(40px, 5.8vw, 60px);
        font-weight: 1000;
        text-transform: uppercase;
        color: white;
    }

    #catFilterBanner h2 {
        font-weight: 400;
        color: white;
    }

    #catFilterBanner p {
        font-weight: 400;
        color: white;
    }

#catFilterCard {
    background-color: #00a0af;
    border: none;
    border-radius: 30px;
}

    #catFilterCard .card-body {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    #catFilterCard .card-footer {
        border-radius: 0px 0px 30px 30px;
    }

    #catFilterCard h5 {
        text-align: center;
        color: white !important;
        font-size: 24px;
        font-weight: 400;
    }

    #catFilterCard a {
        text-decoration: none;
        font-size: 24px;
        color: white;
        font-weight: 550;
    }

    #catFilterCard img {
        border-radius: 30px 30px 0px 0px;
    }

.card-img-top {
    min-height: 300px;
    width: 100%;
    height: 15vw; /* Adjust as desired */
    object-fit: cover; /* Enables zoom instead of image stretching */
}

/* Sub-Category Filter Page */

#subCatFilterBanner {
    background: rgb(0,160,175);
    background: linear-gradient(90deg, rgba(0,160,175,1) 0%, rgba(5,47,95,1) 76%);
    max-height: 520px;
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

    #subCatFilterBanner h1 {
        font-size: clamp(40px, 5.8vw, 60px);
        font-weight: 1000;
        text-transform: uppercase;
        color: white;
    }

    #subCatFilterBanner h2 {
        font-weight: 400;
        color: white;
    }

#subCatFilterCard {
    background-color: #00a0af;
    border: none;
    border-radius: 30px;
}

    #subCatFilterCard .card-body {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    #subCatFilterCard .card-footer {
        border-radius: 0px 0px 30px 30px;
    }
    
    #subCatFilterCard h5 {
        color: white !important;
        font-size: 24px;
        font-weight: 400;
    }

    #subCatFilterCard a {
        text-decoration: none;
        font-size: 24px;
        color: white;
        font-weight: 550;
    }

    #subCatFilterCard img {
        border-radius: 30px 30px 0px 0px;
    }

/* Content Results Page */

#contentResultsBanner {
    background: rgb(0,160,175);
    background: linear-gradient(90deg, rgba(0,160,175,1) 0%, rgba(5,47,95,1) 76%);
    max-height: 520px;
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

    #contentResultsBanner h1 {
        font-size: clamp(40px, 5.8vw, 60px);
        font-weight: 1000;
        text-transform: uppercase;
        color: white;
        flex-shrink: 1;
    }

    #contentResultsBanner h2 {
        font-weight: 400;
        color: white;
        flex-shrink: 1;
    }

#contentResults .card-header {
    background-color: rgba(0, 160, 175);
}

    #contentResults .card-header h3 {
        font-weight: bold;
        color: white;
    }

#contentResults .card-body {
    background-color: #F5F5F5;
}

#contentResults h3 {
    font-size: 45px;
    color: #0E2239;
}


/* Content Details Page */

#contentDetailsBanner {
    background: rgb(0,160,175);
    background: linear-gradient(90deg, rgba(0,160,175,1) 0%, rgba(5,47,95,1) 76%);
    display: flex;
    max-height: 520px;
    min-height: 300px;
}

#contentDetailsBannerRow {
    max-height: 520px;
    min-height: 520px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

    #contentDetailsBannerRow h1 {
        font-size: 60px;
        font-weight: 1000;
        text-transform: uppercase;
        color: white;
    }

    #contentDetailsBannerRow p {
        font-weight: 400;
        color: white;
    }

    #contentDetailsBannerRow img {
        max-width: 500px;
        max-height: 400px;
    }

#contentDetailsBody p {
    font-size: 24px;
}

#linkCardHeader {
    color: white;
    background-color: rgba(0,160,175,0.8);
}

#linkCardBody {
    background-color: #00a0af;
}

    #linkCardBody a {
        color: white;
        background-color: #00a0af;
        text-decoration: underline;
    }

        #linkCardBody a:hover {
            color: black;
            background-color: white;
        }

#attchCardHeader {
    color: white;
    background-color: rgba(0,160,175,0.8);
}

#attchCardBody {
    background-color: #00a0af;
}

    #attchCardBody a {
        color: white;
        background-color: #00a0af;
    }

        #attchCardBody a:hover {
            color: black;
            background-color: white;
        }

#attchCardEmpty {
    color: white;
    background-color: #00a0af;
}

/* Content Details */

#detailsMainBody {
    background-color: #e9ecef;
    border-radius: 10px;
    padding: 10px;
}

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {
    #eventsOngoing {
        color: white;
        background-color: #052f5f;
        border-radius: 30px;
        padding: 50px;
        margin-bottom: 50px;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

    #eventsOngoing {
        color: white;
        background-color: #052f5f;
        border-radius: 30px;
        padding: 50px;
        margin-bottom:50px;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    #navbar a {
        font-size: 10px;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    #navbar a {
        font-size: 19px;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

    #navbar a {
        font-size: 19px;
    }
}