:root {
    ---color: #01aa3f;
    ---title: 37px;
    ---title-font: "Bitter", serif;
}

.gallery_title {
    font-size: var(---title);
    color: var(---color);
    font-family: var(---title-font);
    text-align: left;
    font-weight: bold;
}

.gallery_content {
    padding: 20px 0 0 0;
}

.gallery_box {
    display: flex;
    justify-content: flex-left;
    gap: 22px;
    flex-wrap: wrap;
    width: 100%;
    padding: 20px 0;
}

.gallery_item {
    flex: 1 1 calc(25% - 20px);
    max-width: calc(25% - 10px);
    background-color: white;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
    height: 265px;
}

.gallery_item:hover {
    cursor: pointer;
}

.gallery_img {
    overflow: hidden;
}

.gallery_img img {
    width: 100%;
    height: 215px;
    object-fit: cover;
}

.gallery_caption {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Manrope", sans-serif;
    color: #737373;
    font-weight: 600;
    padding: 10px;
}

.photo-gallery,
.audio-gallery,
.video-gallery {
    font-size: 20px;
    font-weight: bold;
    font-family: var(---title-font);
    color: #484848;
}

.nav-tabs .nav-link.active {
    color: #027f30;
}

/* AUDIO AND VIDEO */
.gallery_video {
    width: 100%;
    height: 215px;
    object-fit: cover;
}

.gallery_video iframe {
    height: 100%;
    width: 100%;
}

.gallery_audio {
    width: 100%;
    height: 215px;
    object-fit: cover;
    position: relative;
    display: inline-block;
}

.gallery_audio img {
    height: 100%;
    width: 100%;
}

.audio_play_button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 20px;
    cursor: pointer;
    text-align: center;
}

.audio_play_button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.page-btn,
.arrow-btn {
    border: 2px solid green;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px;
    color: green;
    background-color: white;
    cursor: pointer;
    transition: all 0.3s;
    font-family: "Bitter", sans-serif;
    font-weight: bold;
}

.page-btn.active {
    background-color: green;
    color: white;
    border-color: green;
}

.arrow-btn {
    /* background-color: #4e8abf; */
    /* border: none; */
}

.arrow-btn:disabled {
    background-color: #d3d3d3;
    cursor: not-allowed;
}

.dots {
    font-size: 24px;
    color: green;
}

/* Mobile devices */
@media (max-width: 767px) {
    .gallery_item {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .gallery_box {
        gap: 22px;
    }

    .gallery_title {
        font-size: 28px;
    }
}

/* Tablets and smaller desktops */
@media (min-width: 768px) and (max-width: 1024px) {
    .gallery_item {
        flex: 1 1 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }

    .gallery_box {
        gap: 15px;
    }

    .gallery_title {
        font-size: 32px;
    }
}

/* Large screens (desktops) */
@media (min-width: 1025px) {
    .gallery_item {
        flex: 1 1 calc(25% - 20px);
        max-width: calc(25% - 20px);
    }

    .gallery_box {
        gap: 22px;
    }

    .gallery_title {
        font-size: var(---title);
    }
}