.blog-cover {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    box-shadow: 0px 0px 5px 3px #ccc;
}

.pop-items {
    margin: 1.25rem 0;
    /* border-bottom: 1px solid var(--ci-pink); */
    /* padding-bottom: 1rem; */

    &:hover .pop-head {
        color: var(--ci-pink);
    }

    & .pop-head {
        transition: .5s;
    }
}

.pop-images img {
    aspect-ratio: 1/1;
    object-fit: cover;
}

.paragraph p {
    margin-bottom: 1lh;
    font-size: var(--font-lg);
    line-height: 1.5;
}

.title {
    margin-bottom: .25lh;
}

.meta {
    margin-bottom: 1.5lh;
}

.swiper-wrapper {
    height: auto;
}

:is(.swiper-button-next, .swiper-button-prev) {
    color: var(--ci-pink);
    transition: .5s;

    &:hover {
        color: white;
    }
}

.swiper-pagination-bullet-active {
    background-color: var(--ci-pink);
}

.mg-item figure {
    margin: .25rem;
    border-radius: .25rem;
    overflow: hidden;
}

.gallery-img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

#img_modal {
    backdrop-filter: blur(5px) opacity(.75);
}

#img_modal img {
    max-height: 80dvh;
    border-radius: 1rem;
    padding: .5rem;
    background: white;
}

#img_modal .modal-content {
    box-shadow: unset;
    background: transparent;
    border: 0;
}

#img_modal .close {
    position: absolute;
    left: 100%;
    transform: translate(-50%, -50%);
    background: white;
    opacity: 1;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--ci-pink);
    transition: .5s;
    opacity: 1;
}

#modal-image {
    width: fit-content;
    margin: auto;
    position: relative;

}

#prevBtn,
#nextBtn {
    top: 50%;
    transform: translate(-50%, -50%);
    background: white;
    color: var(--ci-pink);
    width: 2.5rem;
    height: 2.5rem;
    opacity: .75;
    border-radius: 50%;
    font-size: 1.5rem;
    transition: .5s;

    &:hover {
        opacity: 1;
    }
}

.image-gallary .mg-item:hover {
    transform: scale(1.125);
    z-index: 2;
}

.mg-item {
    transition: .5s;
}

.image-gallary:has(.mg-item:hover) .mg-item:not(:hover) {
    opacity: .75;
}

#prevBtn {
    left: 5%;
    z-index: 5;
    @media (min-width:992px) {
        left: 0%;
    }
}

#nextBtn {
    left: 95%;
    z-index: 5;
    @media (min-width:992px) {
        left: 100%;
    }
}
.right-nav{
    height: fit-content;
position: sticky;
top: 61px;

@media (min-width:992px) {
    border-left: 1px solid #cecece;
}
}

.blog-wallpaper {
    width: 100%;
    
    /* background-image: url(https://www.asiaticagro.com/images/pages/asiaticagro-website/demo2024/news-events//2025-06-20_134919.jpg); */
    background-repeat: no-repeat;
    background-size: contain, cover;
    background-position: center top;
    background-attachment: local, fixed;
    @media (min-width:992px) {
        height: 65vmin;
    }
    /* box-shadow: 0px -10px 12px 0px inset #00000055; */
}

.cover-img {
    max-height: 100%;
@media (min-width:992px) {
    border-radius: 1rem;
}
  
}
#loadMoreImages {
    color: var(--ci-primary);
    transition: .5s;
    border-color: var(--ci-primary);
}
#loadMoreImages:hover{
    color: white;
    background-color: var(--ci-primary);
}