:root {
    --primary: #8CC633;
    --primarydark: #1B2D00;
    --primarylight: #A9DE59;
    --color-primarylight: #A9DE59;
    --secondary: #1C1A1B;
    --bodybg: #131F00;
    --bodyfg: #fff;
    --bodytext: #77775B;
    --primary-white: #fff;
    --text-dark: #77775B;
    --text-dark2: #77775B;
    --card: #292D32;
    --title: #1C1A1B;
    --black: #000;
    --text: #fff;
    --bg-card: #fff;
    --card-bg: #171717;
    --text-light: #171717b3;
    --bg-light: #ECECDE;
    --white: #fff;
    --bg-gradient: linear-gradient(180deg, #203400 0%, #1C1A1B 100%);
    --bg-gradient2: linear-gradient(90deg, #8CC633 0%, #A9DE59 100%);
    --bg-gradient3: linear-gradient(180deg, rgba(169, 222, 89, 0.5) 0%, rgba(169, 222, 89, 0) 87%);
    --font-family-title: "Space Grotesk";
    --font-family-base: "Space Grotesk";
    [data-theme-version="dark"] {
        --secondary: #1C1A1B;
        --secondary-hover: #0E0E0E;
        --secondary-light: #2C2E30;
        --primary-white: #1B2D00;
        --bg-light: #131F00;
        --body-color: #77775B;
        --text-dark: #77775B;
        --text-dark2: rgba(255, 255, 255, 0.5);
        --title: var(--secondary);
        --white: #fff;
        --bg-card: #2C2E30;
        .page-text,
        .post-share ul li a {
            color: #fff;
        }
    }
    --animate-rotate: rotate 20s infinite linear;
    --animate-ticker: ticker 20s linear infinite 0s normal;
    --animate-toTopFromBottom: toTopFromBottom 0.8s ease 0s 1 normal forwards running;
    --animate-rocketLaunch: rocketLaunch 10s ease-in-out infinite;
    .section-head {
        .title {
            text-transform: inherit;
        }
        p {
            color: var(--text-dark2);
        }
    }
    .btn {
        text-transform: initial;
    }
    .main-banner {
        background: var(--bg-light);
    }
    .custmize {
        background: var(--bg-light) !important;
    }
    .pagination {
        &.style-1 {
            li {
                .next {
                    border-radius: 50px !important;
                }
            }
        }
    }
    .contact-section {
        &:after {
            background-color: var(--primary);
        }
    }
    .btn-quantity {
        &.light {
            .btn {
                border-radius: 10px;
            }
        }
    }
    img {
        border-radius: 20px;
    }
    .banner-gradient1 {
        .rating-bx,
        .section-head {
            .title,
            .text {
                color: #fff;
            }
        }
    }
    ::selection {
        color: #ffffff;
        background: var(--primary);
    }
}