: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;
        --primarydark: #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,
        .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(--primary);
          }
      }
    
      .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);
    }

  
   
}