@import "/wp-content/themes/custom/components/project-modal/ProjectModal.css";

.Projects {
    font-family: inherit;
    font-size: 1rem;
    margin: auto;
    background-color: #D6DBE1;
}

.Projects .status {
    padding: 4rem 2rem;
    background: #D6DBE1;
    text-align: center;
    color: #8a8a8a;
    font-weight: bold;
    position: relative;
    z-index: 20;
    font-size: 1.5rem;
}

.Projects .status-no-results,
.Projects .status-error {
    display: flex;
    gap: .5rem;
    justify-content: center;
    align-items: center;
    border: 1px dashed #0a4b7830;
}

.Projects .project-box {
    background: no-repeat no-repeat center center;
    background-size: cover;
    min-height: 450px;
    filter: saturate(0);
    transition: filter .5s ease-in-out 0s;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: end;
    padding: 1rem;
}

.Projects .project-box:hover,
.Projects .project-box:focus {
    filter: saturate(100%);
}

.Projects .project-box .project-more-button {
    opacity: 0;
    border: 1px solid white;
    padding: 1rem;
    background: transparent;
    color: white;
    transition: opacity .3s ease-in-out 0s;
    font-weight: bold;
    border-radius: 25PX;
    width: 100%;
    height: 100%;
    max-width: 135px;
    max-height: 35px;
}

.Projects .project-box:hover .project-more-button,
.Projects .project-box:focus .project-more-button {
    opacity: 1;
}

.Projects .d-none {
    display: none;
}

.Projects .outer-swiper {
    position: relative;
}

.Projects .custom-swiper-button-prev,
.Projects .custom-swiper-button-next {
    position: absolute;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    fill: black;
}

.Projects .custom-swiper-button-prev {
    left: -40px;
}

.Projects .custom-swiper-button-next {
    right: -40px;
}

.Projects .custom-swiper-button-prev:hover,
.Projects .custom-swiper-button-next:hover {
    fill: green;
}