:root {
    --primary: #3cbdfe;
    --primarydark: linear-gradient(135deg, #020024, #050060, #090979);
    --primarylight: #3cbdfe;
    --color-primarylight: #3cbdfe;
    --secondary: #1C1A1B;
    --bodybg: linear-gradient(135deg, #020024, #050060, #090979);
    --bodyfg: #fff;
    --bodytext: #fff;
    --primary-white: #fff;
    --text-dark: #000;
    --text-dark2: #fff;
    --card: #292D32;
    --title: #1C1A1B;
    --black: #000;
    --text: #fff;
    --bg-card: #fff;
    --card-bg: #171717;
    --text-light: #171717b3;
    --bg-light: #ECECDE;
    --white: #fff;
    --black-text : #000;
    --bg-gradient: linear-gradient(135deg, #020024, #050060, #090979);
    --bg-gradient2:linear-gradient(135deg, #020024, #050060, #090979);
    --bg-gradient3: linear-gradient(135deg, #020024, #050060, #090979);
    --font-family-title: "Space Grotesk";
    --font-family-base: "Space Grotesk";
    [data-theme-version="dark"] {
        --secondary: #1C1A1B;
        --secondary-hover: #0E0E0E;
        --secondary-light: #2C2E30;
        --primary-white: linear-gradient(135deg, #020024, #050060, #090979);
        --primarydark: linear-gradient(135deg, #020024, #050060, #090979);
        --bg-light: linear-gradient(135deg, #020024, #050060, #090979);
        --body-color: #77775B;
        --text-dark: #000;
        --text-dark2: rgba(255, 255, 255, 0.5);
        --title: var(--secondary);
        --white: #fff;
        --bg-card: #2C2E30;
        .page-text,
        .panel-btn,
        .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(--bg-gradient);
        }
    }
    .btn-quantity {
        &.light {
            .btn,
            .form-control {
                border-radius: 10px !important;
            }
        }
    }
    img {
        border-radius: 20px;
    }
    .banner-gradient1 {
        .rating-bx,
        .section-head {
            .title,
            .text {
                color: #fff;
            }
        }
    }
    ::selection {
        color: #ffffff;
        background: var(--primary);
    }
    [data-theme-version=dark] .seo-info-section,[data-theme-version=dark] .site-footer.style-4,.content-inner-1,.content-inner-10,[data-theme-version=dark] .site-header.style-3.is-fixed .main-bar,.content-inner-2 {
        background: var(--bg-gradient);
    }
}