body {
    background-color: #f4ffee;
}

[x-cloak] {
    display: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {}

.swiper-pagination-bullet-active {
    background: #c6a75e;
    border-radius: 4px;
}

section {
    padding: 35px 20px;
}

.why-card {
    background: linear-gradient(to right, #dcfce7 50%, #6e9051 10%);
}

/* header css  */

.search-modal-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.search-modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.search-modal-box {
    transform: translateY(-16px) scale(0.97);
    transition:
        transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
        opacity 0.25s ease;
    opacity: 0;
}

.search-modal-overlay.active .search-modal-box {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* .swiper-slide {

    height: auto;
} */

.card-swiper .swiper-pagination {
    bottom: 8px;
}

.card-swiper .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: #ccc;
    opacity: 1;
}

.card-swiper .swiper-pagination-bullet-active {
    background: #4c7936;
}

.video-card:hover .play-btn {
    transform: translate(-50%, -50%) scale(1.1);
}

.video-card.active {
    border-color: #4c7936 !important;
    border-width: 3px !important;
}

/* gallery section css  */

.gallery-thumb {
    cursor: pointer;
}

.gallery-thumb img {
    transition: transform 0.3s ease;
}

.gallery-thumb:hover img {
    transform: scale(1.05);
}

/* Modal */
#galleryModal {
    display: none;
}

#galleryModal.open {
    display: flex;
}

/* Modal swiper arrows */
.modal-prev,
.modal-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.modal-prev {
    left: -20px;
}

.modal-next {
    right: -20px;
}

.footer-wave {
    display: block;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.mobile-sidebar {
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.mobile-sidebar.sidebar-open {
    transform: translateX(0);
}

/* FIX 3: Accordion smooth animation using CSS grid trick */
.acc-body {
    display: grid;
    grid-template-rows: 0fr;
    transition:
        grid-template-rows 0.28s ease,
        opacity 0.22s ease;
    opacity: 0;
}

.acc-body.acc-open {
    grid-template-rows: 1fr;
    opacity: 1;
}

.acc-body>div {
    overflow: hidden;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes tagfloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.anim-float {
    animation: float 5s ease-in-out infinite;
}

.anim-tag1 {
    animation: tagfloat 4s ease-in-out infinite;
}

.anim-tag2 {
    animation: tagfloat 4s ease-in-out 1s infinite;
}

.anim-tag3 {
    animation: tagfloat 4s ease-in-out 2s infinite;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

@keyframes marquee-infinite {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee-scroll {
    animation: marquee-infinite 26s linear infinite;
}

/* User control accessibility feature */
.animate-marquee-scroll:hover {
    animation-play-state: paused;
}

.acc-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.acc-body.acc-open {
    grid-template-rows: 1fr;
}

.acc-body>div {
    overflow: hidden;
}


.heroBannerSwiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #fff;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.heroBannerSwiper .swiper-pagination-bullet-active {
    opacity: 1;
    width: 28px;
    border-radius: 5px;
    background: #4C7936;
}


.storySwiper .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    background: #ccc;
    opacity: 1;
}

.storySwiper .swiper-pagination-bullet-active {
    background: #4c7936;
}


.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
    display: none;
}


.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }