.community-header-bg-img {
    position: relative;
    background-image: url('../images/banners/community-members-bg.jpg');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 42vh;
    align-items: center;
}

.community-header-bg-img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Adjust the opacity as needed */
    z-index: 1;
}

.community-header-bg-img > * {
    position: relative;
    z-index: 2;
}

.community-header-text {
    font-family: 'DM Sans', serif;
    font-style: normal;
    font-weight: 500;
    font-size: 34px;
    line-height: 38px;
    text-align: center;
    color: #FFFFFF;
    width: 70%;
}

.community-header-btn {
    padding: 10px 24px;
    background: #EFB443;
    border-radius: 5px;
    color: #FFFFFF;
}

.community-header-btn:hover {
    background: #FFC107;
}

.community-header-form-btn {
    padding: 12px 26px;
    background: #006600;
    border-radius: 5px;
    color: #FFFFFF;
}

.community-header-form-btn:hover {
    background: #01b901;
}

.community-logo-img {
    object-fit: scale-down; /* Do not scale the image */
    object-position: center; /* Center the image within the element */
    width: 200px;
    height: 250px;
    border-radius: 8px;
}

.view-detail-link {
    color: #f8e9a1;
}

.view-detail-link:hover {
    color: #f8dc54;
}

.community-badge{
    box-sizing: border-box;
    width: 161px;
    background: #EAFFEA;
    border: 1px solid #006600;
    border-radius: 5px;
    margin: 0 auto;

    position: relative;
    display: inline-block;
    cursor: pointer;
}

.community-badge img{
    width: 35px;
}

.community-badge:hover{
    width: 165px;
}

.community-badge img:hover{
    width: 38px;
}

.community-badge:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    white-space: nowrap;
    z-index: 10;
    opacity: 1;
    visibility: visible;
}

.community-badge::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    white-space: nowrap;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}

.list-badge-image {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.list-badge-image:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    white-space: nowrap;
    z-index: 10;
    opacity: 1;
    visibility: visible;
}

.list-badge-image::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    white-space: nowrap;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}