#sidebar-box-main {
    
    width: 100% !important;

}
#views-exposed-form-project-block-cards {

    padding: 40px 80px 0;

}

    #views-exposed-form-project-block-cards > .exposed-form {

        width: 100%;

    }

    #views-exposed-form-project-block-cards > .exposed-form > .form-item-category {

        width: 100%;

    }

        #views-exposed-form-project-block-cards > .exposed-form > .form-item-category > .bef-links {}

            #views-exposed-form-project-block-cards > .exposed-form > .form-item-category > .bef-links > ul {

                list-style-type: none;
                margin-top: 0;
                padding-left: 0;
                display: flex;
                flex-wrap: wrap;
                gap: 10px;

            }

                #views-exposed-form-project-block-cards > .exposed-form > .form-item-category > .bef-links > ul > li {}

                #views-exposed-form-project-block-cards > .exposed-form > .form-item-category > .bef-links > ul > li > a {

                    background-color: #f2f2f2;
                    border-radius: 20px;
                    color: #25355a;
                    font-size: 13px;
                    padding: 6px 18px;
                    display: block;

                }

                #views-exposed-form-project-block-cards > .exposed-form > .form-item-category > .bef-links > ul > li > a.bef-link--selected {

                    background-color: #25355a;
                    color: #ffcc33;
                    font-weight: 700;

                }


.project-group {

    padding: 0 80px 20px;
    
}

.project-group:last-child {

    padding-bottom: 80px;

}

    .project-group > .project-group-name {

        color: #007fa2;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        border-top: 2px solid #ffcc33;
        margin-top: 40px;
        padding-top: 20px;
        margin-bottom: 20px;

    }

        .project-group:first-child > .project-group-name {

            border-top: 0;
            margin-top: 0;

        }

    .project-group > .projects {

        display: flex;
        flex-wrap: wrap;
        gap: 24px;

    }

        .project-group > .projects > .project {

            box-sizing: border-box;
            background-color: #f0f9fc;
            border: 1px solid #d0eaf2;
            border-radius: 16px;
            overflow: hidden;
            flex: 0 0 1;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease, box-shadow 0.3s ease;

        }

            .project-group > .projects > .project:hover {

                transform: translateY(-8px);
                box-shadow: 0 20px 40px rgba(37, 53, 90, 0.15);

            }

            @media screen and (min-width: 768px) {

                .project-group > .projects > .project {

                    flex: 0 0 calc((100% - 48px) / 2);

                }


            }

            @media screen and (min-width: 992px) {

                .project-group > .projects > .project {

                    flex: 0 0 calc((100% - 48px) / 3);

                }

            }

            .project-group > .projects > .project > a > .project-image {}

                .project-group > .projects > .project > a > .project-image > img {

                    width: 100%;
                    height: auto;
                    display: block;

                }

            .project-group > .projects > .project > a > .project-name {

                padding-top: 20px;
                padding-right: 20px;
                padding-bottom: 10px;
                padding-left: 20px;

            }

                .project-group > .projects > .project > a > .project-name {

                    color: #25355a;
                    font-size: 1.1rem;
                    margin: 10px 0 8px;
                    font-weight: 700;

                }

                .project-group > .projects > .project > a > .project-name > a:hover {
                    
                    text-decoration: underline;

                }
                
            .project-group > .projects > .project > a > .project-description {
                
                padding-left: 20px;
                padding-right: 20px;

            }

                .project-group > .projects > .project > a > .project-description > p {

                    color: #555;
                    font-size: 0.9rem;
                    line-height: 1.6;
                    margin-top: 0;

                }

            .project-group > .projects > .project > a > .project-categories {

                border-top: 1px solid #d0eaf2;
                padding: 12px 20px;
                margin-top: auto;
                color: #888;
                font-size: 12px;
                line-height: 1.5;

            }

            .project-group > .projects > .project > a:focus {
                outline: none !important;
                outline-offset: 0px !important;
                box-shadow: none !important;
            }