:root{
      --primary: #7DF9FF;
      --primarydark: #020659;
      --primarylight: #00F0FF;
      --color-primarylight: #00F0FF;
      --secondary: #020659;
      --bodybg: #010326;
      --bodyfg: #f5fbff;
      --bodytext: #d0defb;
      --primary-white: #ffffff;
      --text-dark: #ffffff;
      --text-dark2: rgba(255, 255, 255, 0.7);
      --card: #0f1435;
      --title: #ffffff;
      --black: #000;
      --text: #f5fbff;
      --bg-card: #081138;
      --card-bg: #070b24;
      --text-light: rgba(125, 249, 255, 0.8);
      --bg-light: #050a23;
      --white: #ffffff;


      --bg-gradient: linear-gradient(180deg, #020659 0%, #05103d 100%);
      --bg-gradient2: linear-gradient(95deg, #7DF9FF 0%, #00F0FF 45%, #8F00FF 100%);
     --bg-gradient3: linear-gradient(180deg, rgba(125, 249, 255, 0.5) 0%, rgba(125, 249, 255, 0) 87%);

      --font-family-title: "Space Grotesk";
      --font-family-base: "Space Grotesk";

      [data-theme-version="dark"]{
        --secondary: #010326;
        --secondary-hover: #030a2a;
        --secondary-light: #0f1435;
        --primary-white: #020659;
        --bg-light: #01041a;
        --body-color: #d0defb;
         --text-dark: rgba(255, 255, 255, 0.85);
         --text-dark2:rgba(255, 255, 255, 0.6);
        --title: #ffffff;
        --white: #ffffff;
        --bg-card: #0f1435;

        .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);
    }



}