h2{
    padding: 0;
    margin: 0;
}

p{
    padding: 0;
    margin: 0;
}

.CNL{
    font-family: 'Poppins' !important ;
}

.button-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 1.25em 0;
}

.search-category-button {
    border: 1px solid black;
    background-color: white;
    color: black;
    padding: 1em;
    font-size: 1em;
    width: 23%;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 5px;
}

.search-category-button:hover {
    background-color: #0056b3;
    font-weight: 700;
    color: white;
}

.search-results{
    padding: 0 0 5em 0;
}

.active {
    background-color: #0056b3;
    color: white;
    box-shadow: 0em 4px 8px rgba(0, 0, 0, 0.2);
}

.filter-header {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
    padding: 1em 2em;
    gap: 0.625em; 
    box-sizing: border-box;
}

.extra-information-city {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em; 
    padding: 1em 0em;    
}

.extra-information h5 {
    margin: .7em 0em;
}

.location-label {
    background-color: #FFB827;
    color: black;
    font-size: 1.1em;
    font-weight: 500;
    display: flex;
    align-items: center; 
    gap: 0.5em; 
    border-radius: 12px;
    padding: 0.625em;
    cursor: default; 
    box-shadow: 0em 2px 4px rgba(0, 0, 0, 0.1); 
    margin: 0;
}


.title-logo{
    margin: auto 0em auto 2em;    
}

.title-logo img{  
    border-radius: 8px;
    max-width: 12.5em;
    max-height: 12.5em;
}

#title1{
    font-size: 2.5em;
}
#title2{
    font-size: 2em;
    padding: 1em 0 0 0;
    margin-bottom: 0.5em;
}
#title3{
    font-size: 1.5em;
}
#list{
    margin-bottom: 0.2em;
}

.title-text{
    width: 100%;
    padding-left: 1.5em;
    padding-right: 1.5em;
}

.yellow-title{
    background: #F7EAC9;
    display: flex;
    border-radius: 10px;
    padding: 1em 0;
    margin-top: 1em;
}

.two-column {
    margin-top: 1em;
    display: flex;
    justify-content: space-between; /* Ensures even spacing between columns */   
}

.blue-columns {
    margin-top: 1em;
    display: flex;
    justify-content: space-between; /* Ensures even spacing between columns */   
    background-color: #C9DAF1;
    padding: 1em;
    border-radius: 5px;
    margin-bottom: 2em;
}

.blue-columns a {
    align-items: center;
    margin: auto 0;
}

.research-and-projects-info, .research-and-projects-org {
    flex: 1; /* Ensures both columns take equal width */
}

.status-container {
    display: flex;
    align-items: center;
    gap: 0.625em; /* Space between elements */
}

.research-and-projects-org p{
    margin: 0;
}

.status-dot {
    width: 1.25em;
    height: 1.25em;
    background-color: #B34430; /* Red dot color */
    border-radius: 50%; /* Makes it circular */
}

.status-text {
    font-weight: bold;
    font-size: 1rem;
    margin: 0;
}

.status-value {
    font-weight: normal;
    color: #242525; /* Gray color for the status value */
}

.status-badge {
    background-color: #242525; /* Dark background for badge */
    color: white; /* White text */
    padding: 0.3125em 0.625em;
    border-radius: 10px; /* Rounded corners */
    font-size: 0.8rem;
    font-weight: bold;
}

.pointy-badge {
    display: flex;
    align-items: center;
    background-color: #FFB827; /* Yellow background */
    padding: 0.1875em 0.4375em 0.1875em 0.5625em;
    border-radius: 7px; /* Smooth corners on the right side */
    gap: 0.5em; /* Space between dot and text */
    /* font-family: Arial, sans-serif; */
    font-weight: 600;
    font-size: .8em;
    color: #242525;
    width: fit-content;
    clip-path: polygon(7px 0, 100% 0, 100% 100%, 7px 100%, 0 50%);
    -webkit-clip-path: polygon(7px 0, 100% 0, 100% 100%, 7px 100%, 0 50%);
    margin-bottom: .5em;
    margin-left: 1.5em;
}

.openlink-img{
    width: 2.5em;
    height: 2.5em;
}

.pointy-badge-dot {
    width: 0.625em;
    height: 0.625em;
    background-color: #FFFAE5; /* Light yellow dot */
    border-radius: 50%; /* Circular dot */
    flex-shrink: 0; /* Prevent shrinking */
}

.pointy-badge-text {
    margin: 0; /* Removes default <p> margin */
}

.research-and-projects-content {
    display: flex;
    width: 100%; /* Full width parent container */
    margin: auto;
    padding: 1em 0em 1em 0em;
}

.extra-information {
    background: #C9DAF1;
    width: 25%; /* Properly takes all available width */
    padding: 0em 2em 1em 2em;
    box-sizing: border-box; /* Important for padding inclusion */
    height: fit-content;
    border-radius: 8px;
}

.extra-information a{
    margin-bottom: .5em;
    margin-left: 1.5em;
    text-decoration: underline; /* Adds the underline */
    color: inherit;
}

.research-and-projects-maincontent{
    width: 90%;
    margin: auto;
    max-width: 78.125em;
}

.main-width{
    width: 90%;
    margin: auto; 
    max-width: 78.125em;
}

.research-and-projects-content-goal{
    padding: 0 2em;
    width: 75%;
    margin-bottom: 2em;
}

.research-and-projects-content-goal p{
    margin-bottom: .7em;
}
.research-and-projects-content-goal #title3{
    margin-bottom: 0em;
}

.location-label img{
    width: 1em;
    height: 1em;
}

.location-label p{
    font-size: .8em;
    margin: 0;
}


.two-column a {
    align-items: center;
    margin: auto 0;
}

a {
    text-decoration: none;
    color: black;
    text-decoration: underline;
}

.divider {
    height: 1px; /* Thickness of the divider */
    background-color: #ccc; /* Light gray color */
    margin: 0 auto 1em auto;
    width: 80%; /* Width defined inline or in CSS */
    border: none; /* Ensure no border is applied */
    box-sizing: border-box; /* Include padding/borders within width/height */
}





/* Media query for tablets */
@media (width <= 1000px) {

}

@media (width <= 600px) {
    .button-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .5em
    }
    .research-and-projects-maincontent .two-column{
        display: flex;
        flex-direction: column;
    }
    .search-category-button{
        width: 100%;
        font-size: .8em;
    }
    .yellow-title{
        flex-direction: column;
        padding-bottom: 0;
    }
    .yellow-title.two-column{
        flex-direction: column;
    }
    .two-column {
        justify-content: normal;
        gap: 1em;
    }
    .title-logo{
        margin: auto;
    }
    .title-text{
        width: 100%;
    }
    #title1{
        font-size: 2.5em;
    }
    #title2{
        font-size: 2em;
        padding: 0;
        margin: 0;
    }
    #title3{
        font-size: 1.5em;
    }
    .research-and-projects-content {
        flex-direction: column;
    }
    .extra-information {
        width: 100%;
    }
    .research-and-projects-content-goal{
        width: 100%;
    }
}

/* Media query for mobile devices */
@media (width <=  480px) {
    .blue-columns{
        flex-direction: column;
        gap: 1em;
    }
}