/* CAROUSEL - EXPAND CARDS */

:root {
    --ag-gap: 16px;
    --ag-hover: 520px;
    --ag-shrink: 160px;
    --ag-pad-c: 30px 12px;
    --ag-pad-e: 30px 40px;
    --ag-arrow-w: 17px;
    --ag-arrow-h: 15px;
    --ag-arrow-color: #668228;
    --ag-arrow-inactive-opacity: .5;
}

/* Hover-expand */
.agro-hover-expand-cards {
    position: relative;
    overflow: hidden;
}

.agro-hover-expand-cards>.e-con-inner {
    display: flex !important;
    flex-wrap: nowrap;
    gap: var(--ag-gap);
    align-items: stretch;
    overflow-x: auto;
    scrollbar-width: none;
}

.agro-hover-expand-cards>.e-con-inner::-webkit-scrollbar {
    height: 0;
}

.agro-hover-expand-cards.agro-no-inner {
    display: flex !important;
    flex-wrap: nowrap;
    gap: var(--ag-gap);
    align-items: stretch;
    overflow-x: auto;
    scrollbar-width: none;
}

.agro-hover-expand-cards.agro-no-inner::-webkit-scrollbar {
    height: 0;
}

.agro-hover-expand-cards>.e-con-inner>.agro-card,
.agro-hover-expand-cards.agro-no-inner>.agro-card {
    flex: 0 0 calc((100% - (var(--ag-gap) * 4)) / 5);
    height: 261px;
    display: flex;
    flex-direction: column;
    transition: flex-basis .35s ease, padding .25s ease, opacity .2s ease;
    padding: var(--ag-pad-c);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    opacity: 1;
}

.agro-hover-expand-cards .agro-card .elementor-widget-heading,
.agro-hover-expand-cards .agro-card h1,
.agro-hover-expand-cards .agro-card h2,
.agro-hover-expand-cards .agro-card h3 {
    margin-top: 0 !important;
}

.agro-stick-bottom {
    margin-top: auto;
}

.agro-hover-expand-cards .agro-show-when-expanded,
.agro-hover-expand-cards .agro-collapsed-hide {
    display: none;
}

@media (hover:hover) and (pointer:fine) {

    .agro-hover-expand-cards>.e-con-inner:hover>.agro-card,
    .agro-hover-expand-cards.agro-no-inner:hover>.agro-card {
        flex-basis: var(--ag-shrink);
        opacity: .95;
    }

    .agro-hover-expand-cards>.e-con-inner>.agro-card:hover,
    .agro-hover-expand-cards.agro-no-inner>.agro-card:hover {
        flex-basis: var(--ag-hover);
        padding: var(--ag-pad-e);
        opacity: 1;
    }

    .agro-hover-expand-cards>.e-con-inner>.agro-card:hover .agro-show-when-expanded,
    .agro-hover-expand-cards.agro-no-inner>.agro-card:hover .agro-show-when-expanded,
    .agro-hover-expand-cards>.e-con-inner>.agro-card:hover .agro-collapsed-hide,
    .agro-hover-expand-cards.agro-no-inner>.agro-card:hover .agro-collapsed-hide {
        display: initial;
    }
}

@media (max-width:768px) {
    .agro-hover-expand-cards {
        overflow: visible;
    }

    .agro-hover-expand-cards>.e-con-inner {
        display: block !important;
        overflow: visible;
    }

    .agro-hover-expand-cards.agro-no-inner {
        display: block !important;
        overflow: visible;
    }

    .agro-hover-expand-cards>.e-con-inner>.agro-card,
    .agro-hover-expand-cards.agro-no-inner>.agro-card {
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
        margin-bottom: var(--ag-gap);
        padding: var(--ag-pad-c);
        height: auto;
    }

    .agro-nav {
        display: none !important;
    }
}

.agro-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
    user-select: none;
}

.agro-nav button {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .08);
    background: #fff;
    cursor: pointer;
    padding: 0;
}

.agro-nav button[disabled] {
    opacity: var(--ag-arrow-inactive-opacity);
    cursor: default;
}

.agro-nav .agro-prev::before,
.agro-nav .agro-next::before {
    content: "";
    width: var(--ag-arrow-w);
    height: var(--ag-arrow-h);
    display: block;
    background-color: var(--ag-arrow-color);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.agro-nav .agro-prev::before {
    -webkit-mask-image: url('https://agrong.ng/wp-content/uploads/2025/10/Vector-18.svg');
    mask-image: url('https://agrong.ng/wp-content/uploads/2025/10/Vector-18.svg');
}

.agro-nav .agro-next::before {
    -webkit-mask-image: url('https://agrong.ng/wp-content/uploads/2025/10/Vector-19.svg');
    mask-image: url('https://agrong.ng/wp-content/uploads/2025/10/Vector-19.svg');
}

/* Dots Swiper */
.agro-dots-carousel.swiper {
    position: relative;
    overflow: hidden;
}

.agro-dots-carousel .swiper-slide {
    overflow: hidden;
}

.agro-dots-carousel .swiper-pagination {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 15px;
    width: auto;
    margin: 0;
    pointer-events: auto;
}

.agro-dots-carousel .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    background: #fff;
    opacity: 1;
    margin: 0 1px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.agro-dots-carousel .swiper-pagination-bullet-active {
    transform: scale(0.57);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .5);
}

/* Static */
.agro-static-carousel {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--ag-gap);
    overflow: hidden;
    position: relative;
}

.agro-static-carousel {
    scrollbar-width: none;
}

.agro-static-carousel::-webkit-scrollbar {
    height: 0;
}

.agro-static-carousel {
    overflow-x: auto;
}

.agro-static-carousel>.agro-static-item {
    flex: 0 0 calc((100% - (var(--ag-gap) * 4)) / 5);
}

@media (max-width:768px) {
    .agro-static-carousel {
        display: block;
        overflow: visible;
    }

    .agro-static-carousel>.agro-static-item {
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
        margin-bottom: var(--ag-gap);
    }
}

.agro-c .elementor-swiper-button path,
.elementor-widget-n-carousel .elementor-swiper-button path{
    opacity: .5 !important;
}
.agro-c .elementor-swiper-button:hover path,
.elementor-widget-n-carousel .elementor-swiper-button:hover path{
    opacity: 1 !important;
}