html[data-theme="dark"] {
  --primColor: #fff;
  --secColor: hsl(240 17.7% 54.7% /1);
  --bgColor: #101020;
  --tetColor: rgb(18 170 255 /1);
  --prBoxBg: #16172a;
  --mainBorder: #222240;
  --tabActiveBg: #202041;
  --tabActiveCol: #fff;
  --tabHover: #20204190;
  --boxBg3: #222240;
  --boxBg2: #16162b;
  --boxBg: #11101e96;
  --boxBorder: #21213d;
}

html[data-theme="light"] {
  --primColor: #000;
  --secColor: #7776a1;
  --tetColor: rgb(18 170 255 /1);
  --boxBg: #f5f4fb;
  --boxBorder: #dbdbdb;
  --mainBorder: #d7d7d7;
  --prBoxBg: #fff;
  --bgColor: #f5f4fb;
  --tabActiveBg: #dcdce8;
  --tabActiveCol: #000;
  --tabHover: #dcdce890;
  --boxBg2: #fff;
  --boxBg3: #edecf2;
}

.tabActive {
  background: var(--tabActiveBg);
  color: var(--tabActiveCol) !important;
  
}

.tab {
  padding: 5px 35px;
  font-size: 13px;
  cursor: pointer;
  transition: 0.2s all;
}
.tab:hover{
  background: var(--tabHover);
  color: var(--tabActiveCol) !important;
  transition: 0.2s all;
}

.boxBg3 {
  background: var(--boxBg3);
}
.boxBg2 {
  background: var(--boxBg2);
}
.prBoxBg {
  background-color: var(--prBoxBg);
  border-radius: 5px;
  padding-bottom: 13px;
}

a {
  text-decoration: none;
  color: var(--secColor);
}
.bgColor {
  background: var(--bgColor);
}
.primColor {
  color: var(--primColor);
}
.secColor {
  color: var(--secColor);
}

.tetColor {
  color: var(--tetColor) !important;
}

.gradColor {
  background-image: linear-gradient(
    45deg,
    rgba(89, 42, 251, 1),
    rgba(157, 0, 255, 1)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fs-7 {
  font-size: 15px;
  text-wrap: balance;
}

.fs-8 {
  font-size: 13px;
  text-wrap: balance;
}

.fs-9 {
  font-size: 12px;
  text-wrap: balance;
}

.primBtn {
  background: linear-gradient(
    45deg,
    rgba(89, 42, 251, 1) 2%,
    rgba(157, 0, 255, 1) 97%
  ) !important;
  padding: 7px 15px;
  border-radius: 6px;
  border: none !important;
  font-size: 14px;
  font-weight: 500;
}

.secBtn {
  background: transparent !important;
  padding: 5px 15px;
  border-radius: px;
  border-style: solid;
  border-image: linear-gradient(
    45deg,
    rgba(89, 42, 251, 1),
    rgba(157, 0, 255, 1)
  );
  border-image-slice: 1;
  font-size: 14px;
  font-weight: 500;
}

.light {
  position: absolute;
  background-color: hsl(264.08deg 100% 50%);
  opacity: 1;
}

.boxBorder {
  border-radius: 0.375rem;
  border: 1px solid var(--boxBorder);
}

.boxBg {
  background-color: var(--boxBg);
}

.progress {
  height: 4px;
  background: transparent;
  overflow: visible;
}
.progress-bar {
  width: 50vh !important;

  border-radius: 10px;
}

input:active,
input:focus {
  border: none !important;
}

input {
  border: none !important;
}
.socio-ico img {
  width: 38px;
  padding: 5px;
  transition: 0.3s ease-in-out;
  filter: drop-shadow(0 0px 15px #bae6ff7f);
}

.socio-ico img:hover {
  scale: 1.3;
}

.graphBlock {
  transition: 0.1s ease-in-out;
}

.graphBlock:hover {
  scale: 0.95;
}

.graphBlock:hover ~ div {
  filter: brightness(0.8);
}

.container {
  width: 85%;
}

.headercont {
  height: 91vh;
}

.marigrap {
  width: 55%;
}
.connect-wallet-container {
  opacity: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000000;
  transition: 0.2s all;
  background-color: #10101fcc;
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
}
w3m-modal{
  z-index: 2000000000 !important;
}
#app{
  display: flex !important;
  gap: 10px;
  justify-content: space-evenly;
  align-items: center;
}
.connect-wallet-container.active {
  opacity: 1;
  pointer-events: auto;
  transition: 0.2s all;
}
.connect-wallet-block {
  width: 400px;
  background-color: var(--prBoxBg);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  text-align: center;

  --tw-shadow: 0px 0px 0px 1px hsl(240, 29.3%, 19.4%);
  --tw-shadow-colored: 0px 0px 0px 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

  --tw-bg-opacity: 1;
  background-color: hsl(240 31.9% 9.2% / var(--tw-bg-opacity));

  --tw-text-opacity: 1;
  color: hsl(240 45.5% 97.8% / var(--tw-text-opacity));
}
.cw-header {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 20px;
  font-weight: 400;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.cw-header span{
    cursor: pointer;
}
.cw-body{
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 35px;
}
.cw-item{
    background-color: #7340d9;
    padding: 8px 15px;
    border-radius: 15px;
    cursor: pointer;
    border: 2px solid #7340d9;
    transition: 0.2s all;
    display: flex;
    flex-direction: row;
    gap: 15px;
}
.cw-item:hover{
    background-color: transparent;
}
.user-account{
    position: relative;
    color: rgb(151, 151, 201);
    font-size: 14px;
    font-weight: 500;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    width: 70px;
    text-align: center;
    display: none;
}
.user-account::before{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: 'Disconnect';
    color: white;
    background-color: #190f30;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    z-index: 100000;
    transition: 0.2s all;
    
}
.user-account:hover::before{
    opacity: 1;
    pointer-events: auto;
    transition: 0.2s all;
}

.user-light::before{
  color: #190f30;
    background-color: #f5f4fb !important;

}
.user-light-pink::before{
  color: #190f30;
    background-color: #e9e0fb !important;


}

.with-nav{
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  border-bottom: 1px solid var(--mainBorder);
  color: var(--secColor);
  font-size: 15px;
  font-weight: 500;
  position: relative;
}
.with-nav-left{
  width: 50%;
  text-align: center;
  cursor: pointer;
}
.with-nav-right{
  width: 50%;
  text-align: center;
  cursor: pointer;
}
.with-nav-left.active{
  color: #878dc4;
  transition: 0.2s all;
}
.with-nav-right.active{
  color: #878dc4;
  transition: 0.2s all;
}
.floater{
  position: absolute;
  top: 100%;
  left: 0;
  transform: translate(0, -50%);
  width: 50%;
  transition: 0.2s all;
  height: 1px;
  background-color: var(--secColor);
}
.with-nav-content{
  margin-top: 20px;
}
.left-c
{
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.right-c{
  display: none;
}
.window{
  background-color: var(--bgColor);
  color: var(--secColor);
  font-weight: 400;
  font-size: 14px;
  width: 100%;
  padding: 8px 15px;
  border-radius: 8px;
}
.preview{
  font-weight: 500;
  font-size: 14px;
  width: 100%;
  
  border-radius: 8px;
  background-color: var(--bgColor);
  color: #878dc4;
  margin-top: 15px;
  border: 1px solid var(--mainBorder);
}
.preview-heading{
  border-bottom: 1px solid var(--mainBorder);
  padding: 10px 15px;
}
.preview-body{
  padding: 10px 15px;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.preview-item{
  color: #878dc4;
  display: flex;
  justify-content: space-between;
}
.info{
  text-align: right;
  font-size: 12px;
  transform: translateY(-6px);
}
.modular-p p{
  text-wrap: wrap !important;
  /* width: 100% !important; */
  padding: 0px !important;
}
.modular_p p #text{
  width: 100% !important;
}
@media only screen and (max-width: 1025px) {
  .container {
    width: 100%;
  }
  .nav {
    flex-wrap: wrap;
    flex-direction: column-reverse;
    row-gap: 1.5em;
  }
  .nav .d-flex {
    justify-content: space-evenly;
  }
  .headercont {
    height: 70vh;
  }
}

@media only screen and (max-width: 769px) {
  .display-4 {
    font-size: 2.6em;
  }
  .headersec {
    flex-direction: column;
  }
  .headerthir {
    flex-direction: column;
  }
  .cardes {
    flex-direction: column;
  }
  .cardes .prBoxBg {
    width: 100% !important;
  }
}

@media only screen and (max-width: 426px) {
  .headerfou {
    flex-direction: column;
  }
  .nav .socio-ico {
    display: none;
  }

  .headercont {
    height: auto;
    margin-top: 2em;
  }

  .headercont .col-6 {
    width: 100%;
  }

  .headerfif {
    flex-direction: column;
  }

  .nav .secBtn {
    font-size: 8px !important;
  }

  .nav .gap-5 {
    gap: 2rem !important;
  }

  .nav .gap-4 {
    gap: 1rem !important;
  }

  .tab {
    padding: 5px 16px;
    font-size: 13px;
    cursor: pointer;
  }

  .grapran {
    gap: 1rem !important;
  }

  .cardes .prBoxBg .pe-5 {
    padding-right: 0 !important;
  }
}

@media only screen and (max-width: 376px) {
  .tab {
    padding: 5px 16px;
    font-size: 12px;
  }

  .grapran .fs-4 {
    font-size: 16px !important;
  }
  .grapran .fs-8 {
    font-size: 12px !important;
  }
}