body {
  overflow-x: hidden !important;
  background-color: rgb(10, 10, 63) !important;
  /* background:linear-gradient(to right, red 50%, blue 50%); */
}

body::-webkit-scrollbar {
  width: 0.75em;
  background-color: #3b4296;
}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: #d90e0e;
  border-radius: 45px;
  outline: 0px solid slategrey;
}

.border-w {
  border: 1px solid white;
}

.log-jug {
  max-width: 330px;
  max-height: 230px;
}

.mog-jug {
  max-width: 220px;
  max-height: 150px;
}

.auditbtn1 {
  padding: 10px 10px !important;
  width: 200px !important;
  background-color: #0000bb !important;
  color: white !important;
  border: 1px solid #000000 !important;
  border-radius: 45px !important;
}

.auditbtn1:hover {
  background-color: #000 !important;
}

.auditbtn2 {
  padding: 10px 10px !important;
  width: 200px !important;
  background-color: #ff413e !important;
  color: white !important;
  border: 1px solid #000000 !important;
  border-radius: 45px !important;
}

.auditbtn2:hover {
  background-color: #000 !important;
}

.popover {
  display: none;
  position: absolute;
  background-color: #000000 !important;
  color: #8b1010;
  padding: 10px;
  border-radius: 5px;
  /* z-index: 1000000 !important; */
}

.note {
  background-color: #0000bb;
  color: white;
  border: 1px solid red !important;
  padding: 2px 10px;
  border-radius: 5px;
}

.DexBtn {
  background-color: #0A0A3F !important;
  border: 2px solid #b6b6b6 !important;
  border-radius: 50px !important;
  padding: 10px 70px !important;
  color: #e9e9e9 !important;
  font-size: 20px !important;
  margin-top: 10px;
}

.DexBtn:hover {
  background-color: #d60000 !important;
  border: 2px solid #b6b6b6 !important;
  color: rgb(255, 255, 255) !important;
  border: 2px solid #ffffff !important;
  /* box-shadow: 0px 0px 10px 0px #ffffff; */
}

.popover a {
  color: #f9d4d4;

}

.disca {
  text-decoration: none;
  transition: font-weight 0.3s ease;
  font-weight: normal;
  /* Initial font-weight */
}

.disca:hover {
  font-weight: bold;
  /* Font-weight on hover */

}

.newimagebanner {
  width: 80%;
  height: 55vh !important;
  border-radius: 15px;
  border: 5px solid #000000;
}

.slidersection {
  background-color: teal;
  color: white;
  font-family: helvetica;
  text-transform: uppercase;
  overflow-x: hidden;
}

.newslider {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 100%;
}

.news-message {
  display: flex;
  flex-shrink: 0;
  height: 50px;
  gap: 20px;
  align-items: center;
  animation: slide-left 120s linear infinite;
}

.newdisplay {
  display: block;
}

.news-message span {
  font-weight: 800;
  font-size: 21px;
}

@keyframes slide-left {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

.sec2 {
  position: relative;
  /* Ensure the background image is positioned relative to this container */
  z-index: 0;
  /* Ensure the content of sec2 stays above the background */
}

.sec2::before {
  content: "";
  /* Create a pseudo-element to act as the background */
  position: absolute;
  /* Position the background absolutely */
  top: 10px;
  left: 0;
  width: 100%;
  /* Cover the entire container */
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('/images/vecteezy_united-states-of-america-political-map_13836232.png');
  /* URL of your background image */
  opacity: 0.2;
  /* Adjust the opacity as needed */
  z-index: -1;
  /* Position the background behind the content */
}

.section3 {
  position: relative;
  /* Ensure the background image is positioned relative to this container */
  z-index: 0;
  /* Ensure the content of sec2 stays above the background */
}

.section3::before {
  content: "";
  /* Create a pseudo-element to act as the background */
  position: absolute;
  /* Position the background absolutely */
  top: 10px;
  left: 0;
  width: 100%;
  /* Cover the entire container */
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('/images/bgggg.png');
  /* URL of your background image */
  opacity: 0.2;
  /* Adjust the opacity as needed */
  z-index: -1;
  /* Position the background behind the content */
}

.sec4 {
  position: relative;
  /* Ensure the background image is positioned relative to this container */
  z-index: 0;
  /* Ensure the content of sec2 stays above the background */
}

.sec4::before {
  content: "";
  /* Create a pseudo-element to act as the background */
  position: absolute;
  /* Position the background absolutely */
  top: 20%;
  left: 10%;
  width: 80%;
  /* Cover the entire container */
  height: 80%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('/images/bgsec4.png');
  /* URL of your background image */
  opacity: 0.2;
  /* Adjust the opacity as needed */
  z-index: -1;
  /* Position the background behind the content */
  animation: rotateBackground 20s linear infinite;
  /* Animation properties */
}

@keyframes rotateBackground {
  0% {
    transform: rotate(0deg);
    /* Initial rotation angle */
  }

  100% {
    transform: rotate(360deg);
    /* Final rotation angle */
  }
}

.Card_change1 {
  background: #2126b86f;
  border: 2px solid #e80a06;
  padding: 5px;
  border-radius: 3%;
  width: 350px !important;
  height: 420px !important;
  /* z-index: 1; */
}



.color-hover {
  border-radius: 15px !important;
  background-color: #1d1f5a !important;
}

.color-hover:hover {
  background-color: #e54946 !important;

  border-radius: 0px;
}

.linka {
  text-decoration: none;
  transition: transform 0.3s ease;
}

.linka:hover {
  transform: translateY(-5px);
}

.nav-item1 {
  transition: transform 0.3s ease;
}

/* .nav-item1:hover {
    transform: translateY(-5px);
} */


.nav-link:hover {
  color: #a9a9a9 !important;
}

.btn1 {
  transition: transform 0.3s ease;
}

.btn3 {
  transition: transform 0.3s ease;
}

.btn1:hover {
  transition: transform 0.3s ease;
  transform: translateY(-5px);
}

.btn3:hover {
  transition: transform 0.3s ease;
  transform: translateY(-5px);
}

.section {

  padding-top: 100px;
  padding-bottom: 100px;
}

.section1 {
  background: url("/images/usflag.jpg");
  background-size: cover;
  background-position: center;
  /* height: 110vh; */

}

.pushme {
  position: relative;
  font-weight: 700;
  background-color: #384D9D;
  border-radius: 0.6em;
  display: inline-block;
  margin: 1em;
}

.pushme .inner {
  display: inline-block;
  background-color: #F6F3EB;
  border-radius: 0.6em;
  border: 0.3em solid #384D9D;
  padding: 1em;
  cursor: pointer;
  text-transform: uppercase;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transform: translate3d(0.6em, -0.6em, 0);
  transition: transform 240ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-delay: 220ms;
}

.pushme:active .inner,
.pushme.click .inner {
  transform: translate3d(0, 0, 0);
  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}

.btn1 {
  text-decoration: none !important;
  padding: 15px 30px;
  background-color: #003277;
  border: 3px solid #DA1310;
  border-radius: 45px;
  font-size: 25px !important;
  font-weight: bold;
  color: white;

}

.btn2 {
  text-decoration: none !important;
  padding: 15px 30px;
  background-color: #5c0083;
  border: 3px solid #000000;
  border-radius: 45px;
  font-size: 25px !important;
  font-weight: bold;
  color: white;
}

.btn3 {
  text-decoration: none !important;
  padding: 15px 30px;
  background-color: #DA1310;
  border: 3px solid #003277;
  border-radius: 45px;
  font-size: 25px !important;
  font-weight: bold;
  color: white;
}

/* .h11 {
  width: 70%;
} */

.box1 {
  margin-top: 187px;
  padding: 15px;
  background-color: #080b58;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
  width: 100%;
  border: 3px solid #DA1310;
}

.box6 {
  padding: 20px;
  background-color: #080b58;
  border: 15px solid #16187e;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  width: 100%;
}

.box7 {
  padding: 20px;
  background-color: #DA1310;
  border: 15px solid #ee2e2b;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  width: 100%;
}

.box5 {
  padding: 20px;
  background-color: #262626;
  border: 15px solid #3e3e3e;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  width: 100%;
}

.toke1 {
  background-color: #0f126f;
  padding: 12px 65px;
  color: white;
  font-weight: bold;
  font-size: 17px;
  width: 100% !important;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  transition: transform 0.3s ease;
}

.toke1:hover {
  transform: scale(1.05);
}

.toke11 {
  /* background-color: #0f126f; */
  padding: 20px 60px;
  color: white;
  font-weight: bold;
  font-size: 24px;
  width: 100%;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  transition: transform 0.3s ease;
}

.toke11:hover {
  transform: scale(1.05);
}

.box2 {
  margin-top: 187px;
  padding: 15px;
  background-color: #DA1310;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
  width: 100%;
  border: 3px solid #1f24b3;
}

.toke2 {
  background-color: #ad2220;
  padding: 12px 65px;
  color: white;
  font-weight: bold;
  font-size: 17px;
  width: 100%;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  transition: transform 0.3s ease;
}

.toke2:hover {
  transform: scale(1.05);
}

.toke3:hover {
  transform: scale(1.05);
}

.toke4:hover {
  transform: scale(1.05);
}

.toke3 {
  border: 6px solid rgb(22, 22, 159);
  background-color: rgb(57, 57, 255);
  padding: 10px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  width: 100%;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

.toke4 {
  border: 6px solid #91100e;
  background-color: #DA1310;
  padding: 10px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  width: 100%;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

.box3 {
  padding: 20px;
  background-color: #080b58;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
  width: 100%;
  border: 1px solid #0f1378;
}

.box4 {
  padding: 20px;
  background-color: #DA1310;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
  width: 100%;
  border: 1px solid #f17775;
}

/* button style  */
:root {
  --backgroundColor: rgba(246, 241, 209);
  --cloorShadeA: #DA1310;
  --colorShadeB: #e32a26;
  --colorShadeC: #e14340;
  --colorShadeD: #e54f4c;
  --colorShadeE: #ec817f;
  --cloorShadeA1: #080b58;
  --colorShadeB1: #111570;
  --colorShadeC1: #1c2184;
  --colorShadeD1: #3f44ae;
  --colorShadeE1: #595ec9;
}

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");

* {
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: border-box;
}

.button1 {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  font-size: 1.5rem !important;
  color: var(--colorShadeA);
  font-weight: 700;
  text-transform: uppercase;
  font-family: inherit;
}

button.big-button {
  padding: 0.5em 1em;
  border: 2px solid var(--colorShadeA);
  border-radius: 1em;
  background: var(--colorShadeE);
  transform-style: preserve-3d;
  transition: all 175ms cubic-bezier(0, 0, 1, 1);
}

button.big-button::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--colorShadeC);
  border-radius: inherit;
  box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.75em 0 0 var(--colorShadeA);
  transform: translate3d(0, 0.75em, -1em);
  transition: all 175ms cubic-bezier(0, 0, 1, 1);
}

button.big-button:hover {
  background: var(--colorShadeD);
  transform: translate(0, 0.375em);
}

button.big-button:hover::before {
  transform: translate3d(0, 0.75em, -1em);
}

button.big-button:active {
  transform: translate(0em, 0.75em);
}

button.big-button:active::before {
  transform: translate3d(0, 0, -1em);

  box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.25em 0 0 var(--colorShadeB);
}

.button2 {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  font-size: 1.5rem !important;
  color: var(--colorShadeA1);
  font-weight: 700;
  text-transform: uppercase;
  font-family: inherit;
}

button.big-button2 {
  padding: 0.5em 1em;
  border: 2px solid var(--colorShadeA1);
  border-radius: 1em;
  background: var(--colorShadeE1);
  transform-style: preserve-3d;
  transition: all 175ms cubic-bezier(0, 0, 1, 1);
}

button.big-button2::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--colorShadeC1);
  border-radius: inherit;
  box-shadow: 0 0 0 2px var(--colorShadeB1), 0 0.75em 0 0 var(--colorShadeA1);
  transform: translate3d(0, 0.75em, -1em);
  transition: all 175ms cubic-bezier(0, 0, 1, 1);
}

button.big-button2:hover {
  background: var(--colorShadeD1);
  transform: translate(0, 0.375em);
}

button.big-button2:hover::before {
  transform: translate3d(0, 0.75em, -1em);
}

button.big-button2:active {
  transform: translate(0em, 0.75em);
}

button.big-button2:active::before {
  transform: translate3d(0, 0, -1em);

  box-shadow: 0 0 0 2px var(--colorShadeB1), 0 0.25em 0 0 var(--colorShadeB1);
}

/* Ends    */




/* How to buy Cards  */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;800&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.section3 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 100px;
  padding-bottom: 100px;

}

.section3 .container12 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  margin: 0px 0;

}

.section3 .container12 .card {
  position: relative;
  min-width: 200px;
  height: 340px;
  background-color: #191ea8;
  box-shadow: inset 5px 5px 5px #12157433,
    inset -5px -5px 15px #3136ce2c,
    5px 5px 15px #12157435, -5px -5px 15px #3136ce2f;
  border-radius: 15px;
  margin: 30px;
  transition: 0.5s;
}

.section3 .container12 .card:nth-child(1) .box .content a {
  background: #2196f3;
}

.section3 .container12 .card:nth-child(2) .box .content a {
  background: #e91e63;
}

.section3 .container12 .card:nth-child(3) .box .content a {
  background: #23c186;
}

.section3 .container12 .card .box {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: #b8110f;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 0.5s;
}

.section3 .container12 .card .box:hover {
  transform: translateY(-50px);
}

.section3 .container12 .card .box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.03);
}

.section3 .container12 .card .box .content {
  padding: 20px;
  text-align: center;
}

.section3 .container12 .card .box .content h2 {
  position: absolute;
  top: -10px;
  right: 30px;
  font-size: 8rem;
  color: rgba(255, 255, 255, 0.1);
}

.section3 .container12 .card .box .content h3 {
  font-size: 1.8rem;
  color: #fff;
  z-index: 1;
  transition: 0.5s;
  margin-bottom: 15px;
}

.section3 .container12 .card .box .content p {
  font-size: 1.3rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  z-index: 1;
  transition: 0.5s;
}

.section3 .container12 .card .box .content a {
  position: relative;
  display: inline-block;
  padding: 8px 20px;
  background: black;
  border-radius: 5px;
  text-decoration: none;
  color: white;
  margin-top: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transition: 0.5s;
}

.section3 .container12 .card .box .content a:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
  background: #fff;
  color: #000;
}


/* HTB ENDS  */
@media screen and (max-width: 1180px) {
  .nh5 {
    font-size: 15px !important;
  }

  .newdisplay {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  .sec4::before {

    animation: rotateBackground 0s linear infinite !important;
    /* Animation properties */
  }

  .mobi {
    font-size: 12px !important;
  }

  .Card_change1 {

    height: 480px !important;
  }

  @keyframes rotateBackground {
    0% {
      transform: rotate(0deg);
      /* Initial rotation angle */
    }

    100% {
      transform: rotate(0deg);
      /* Final rotation angle */
    }
  }

  .btn1 {
    padding: 5px 10px !important;
  }

  .btn3 {
    padding: 5px 10px !important;
  }

  .img1cont {
    padding-bottom: 100px !important;
  }


}

@media screen and (max-width: 800px) {
  .section1 {
    background: url("/images/usflag.jpg");
    background-size: cover;
    background-position: center;
    height: auto !important;

  }

  .endisc {
    flex-direction: column !important;
  }
}

/* CSS */
.button-54 {
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  color: #d90e0e;
  cursor: pointer;
  border: 3px solid;
  padding: 0.25em 0.5em;
  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-54:active {
  box-shadow: 0px 0px 0px 0px;
  top: 5px;
  left: 5px;
}


.fire {
  font-size: 18px;
  filter: blur(0.02em);
  -webkit-filter: blur(0.02em);
  margin: 0em auto 0 auto;
  position: relative;
  width: 4em;
  height: 20px;
}

.particle {
  animation: rise 1s ease-in infinite;
  background-image: radial-gradient(#ff5000 20%, rgba(255, 80, 0, 0) 70%);
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0;
  position: absolute;
  bottom: 0;
  width: 5em;
  height: 5em;
}

.particle:nth-of-type(1) {
  animation-delay: 0.109403365s;
  left: calc((100% - 5em) * 0);
}

.particle:nth-of-type(2) {
  animation-delay: 0.8131025256s;
  left: calc((100% - 5em) * 0.02);
}

.particle:nth-of-type(3) {
  animation-delay: 0.8642454852s;
  left: calc((100% - 5em) * 0.04);
}

.particle:nth-of-type(4) {
  animation-delay: 0.4377087583s;
  left: calc((100% - 5em) * 0.06);
}

.particle:nth-of-type(5) {
  animation-delay: 0.9446768555s;
  left: calc((100% - 5em) * 0.08);
}

.particle:nth-of-type(6) {
  animation-delay: 0.5134893122s;
  left: calc((100% - 5em) * 0.1);
}

.particle:nth-of-type(7) {
  animation-delay: 0.3357863125s;
  left: calc((100% - 5em) * 0.12);
}

.particle:nth-of-type(8) {
  animation-delay: 0.0185091393s;
  left: calc((100% - 5em) * 0.14);
}

.particle:nth-of-type(9) {
  animation-delay: 0.413809104s;
  left: calc((100% - 5em) * 0.16);
}

.particle:nth-of-type(10) {
  animation-delay: 0.8641081983s;
  left: calc((100% - 5em) * 0.18);
}

.particle:nth-of-type(11) {
  animation-delay: 0.2895498179s;
  left: calc((100% - 5em) * 0.2);
}

.particle:nth-of-type(12) {
  animation-delay: 0.524349282s;
  left: calc((100% - 5em) * 0.22);
}

.particle:nth-of-type(13) {
  animation-delay: 0.3575926788s;
  left: calc((100% - 5em) * 0.24);
}

.particle:nth-of-type(14) {
  animation-delay: 0.3126300548s;
  left: calc((100% - 5em) * 0.26);
}

.particle:nth-of-type(15) {
  animation-delay: 0.5705604631s;
  left: calc((100% - 5em) * 0.28);
}

.particle:nth-of-type(16) {
  animation-delay: 0.0659139132s;
  left: calc((100% - 5em) * 0.3);
}

.particle:nth-of-type(17) {
  animation-delay: 0.3981558408s;
  left: calc((100% - 5em) * 0.32);
}

.particle:nth-of-type(18) {
  animation-delay: 0.3798754046s;
  left: calc((100% - 5em) * 0.34);
}

.particle:nth-of-type(19) {
  animation-delay: 0.1864847041s;
  left: calc((100% - 5em) * 0.36);
}

.particle:nth-of-type(20) {
  animation-delay: 0.4256929931s;
  left: calc((100% - 5em) * 0.38);
}

.particle:nth-of-type(21) {
  animation-delay: 0.4864796499s;
  left: calc((100% - 5em) * 0.4);
}

.particle:nth-of-type(22) {
  animation-delay: 0.1024293921s;
  left: calc((100% - 5em) * 0.42);
}

.particle:nth-of-type(23) {
  animation-delay: 0.6139569775s;
  left: calc((100% - 5em) * 0.44);
}

.particle:nth-of-type(24) {
  animation-delay: 0.302560787s;
  left: calc((100% - 5em) * 0.46);
}

.particle:nth-of-type(25) {
  animation-delay: 0.9507942655s;
  left: calc((100% - 5em) * 0.48);
}

.particle:nth-of-type(26) {
  animation-delay: 0.9257117153s;
  left: calc((100% - 5em) * 0.5);
}

.particle:nth-of-type(27) {
  animation-delay: 0.9620289934s;
  left: calc((100% - 5em) * 0.52);
}

.particle:nth-of-type(28) {
  animation-delay: 0.7911642855s;
  left: calc((100% - 5em) * 0.54);
}

.particle:nth-of-type(29) {
  animation-delay: 0.6276274214s;
  left: calc((100% - 5em) * 0.56);
}

.particle:nth-of-type(30) {
  animation-delay: 0.6361642883s;
  left: calc((100% - 5em) * 0.58);
}

.particle:nth-of-type(31) {
  animation-delay: 0.0142289626s;
  left: calc((100% - 5em) * 0.6);
}

.particle:nth-of-type(32) {
  animation-delay: 0.547155971s;
  left: calc((100% - 5em) * 0.62);
}

.particle:nth-of-type(33) {
  animation-delay: 0.4945709835s;
  left: calc((100% - 5em) * 0.64);
}

.particle:nth-of-type(34) {
  animation-delay: 0.5808089763s;
  left: calc((100% - 5em) * 0.66);
}

.particle:nth-of-type(35) {
  animation-delay: 0.6279893689s;
  left: calc((100% - 5em) * 0.68);
}

.particle:nth-of-type(36) {
  animation-delay: 0.2293314206s;
  left: calc((100% - 5em) * 0.7);
}

.particle:nth-of-type(37) {
  animation-delay: 0.6269085973s;
  left: calc((100% - 5em) * 0.72);
}

.particle:nth-of-type(38) {
  animation-delay: 0.8899763913s;
  left: calc((100% - 5em) * 0.74);
}

.particle:nth-of-type(39) {
  animation-delay: 0.9430388634s;
  left: calc((100% - 5em) * 0.76);
}

.particle:nth-of-type(40) {
  animation-delay: 0.4457931245s;
  left: calc((100% - 5em) * 0.78);
}

.particle:nth-of-type(41) {
  animation-delay: 0.783252127s;
  left: calc((100% - 5em) * 0.8);
}

.particle:nth-of-type(42) {
  animation-delay: 0.1739334576s;
  left: calc((100% - 5em) * 0.82);
}

.particle:nth-of-type(43) {
  animation-delay: 0.9535508997s;
  left: calc((100% - 5em) * 0.84);
}

.particle:nth-of-type(44) {
  animation-delay: 0.6482046896s;
  left: calc((100% - 5em) * 0.86);
}

.particle:nth-of-type(45) {
  animation-delay: 0.2031657556s;
  left: calc((100% - 5em) * 0.88);
}

.particle:nth-of-type(46) {
  animation-delay: 0.8717697608s;
  left: calc((100% - 5em) * 0.9);
}

.particle:nth-of-type(47) {
  animation-delay: 0.3440202838s;
  left: calc((100% - 5em) * 0.92);
}

.particle:nth-of-type(48) {
  animation-delay: 0.0442294916s;
  left: calc((100% - 5em) * 0.94);
}

.particle:nth-of-type(49) {
  animation-delay: 0.3608265315s;
  left: calc((100% - 5em) * 0.96);
}

.particle:nth-of-type(50) {
  animation-delay: 0.187643566s;
  left: calc((100% - 5em) * 0.98);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0) scale(1);
  }

  25% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translateY(-10em) scale(0);
  }
}

@media (min-width: 768px) {
  .button-54 {
    padding: 0.25em 0.75em;
  }



}

.button-55 {
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  color: #000000;
  cursor: pointer;
  border: 3px solid;
  padding: 0.25em 0.5em;
  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-55:hover {
  background-color: #484848;
}

.button-55:active {
  box-shadow: 0px 0px 0px 0px;
  top: 5px;
  left: 5px;
}

@media (min-width: 768px) {
  .button-55 {
    padding: 0.25em 0.75em;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(1, 240px);
    grid-gap: 32px;
    position: relative;
    z-index: 1;
  }
}


/* CSS */
.button-74 {
  background-color: #e70c0c;
  border: 2px solid #030303;
  border-radius: 30px;
  box-shadow: #000000 4px 4px 0 0;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  font-size: 22px;
  padding: 0 18px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-74:hover {
  background-color: #fff;
  color: #000;
}

.button-74:active {
  box-shadow: #000000 2px 2px 0 0;
  transform: translate(2px, 2px);
}

@media (min-width: 768px) {
  .button-74 {
    min-width: 120px;
    padding: 0 25px;
  }
}

.button-75 {
  background-color: #080b58;
  border: 2px solid #030303;
  border-radius: 30px;
  box-shadow: #000000 4px 4px 0 0;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  font-size: 22px;
  padding: 0 18px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-75:hover {
  background-color: #ffffff;
  color: black !important;
}

.button-75:active {
  box-shadow: #000000 2px 2px 0 0;
  transform: translate(2px, 2px);
}

.vote74 {
  background-color: #e70c0c;
  border: 2px solid #030303;
  border-radius: 30px;
  box-shadow: #000000 4px 4px 0 0;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  font-size: 22px;
  padding: 0 18px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.vote74:hover {
  background-color: #fff;
  color: #000;
}

.vote74:active {
  box-shadow: #000000 2px 2px 0 0;
  transform: translate(2px, 2px);
}

@media (min-width: 768px) {
  .vote74 {
    min-width: 120px;
    padding: 0 25px;
  }
}


.vote75 {
  background-color: #080B58;
  border: 2px solid #030303;
  border-radius: 30px;
  box-shadow: #000000 4px 4px 0 0;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  font-size: 22px;
  padding: 0 18px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.vote75:hover {
  background-color: #fff;
  color: #000;
}

.vote75:active {
  box-shadow: #000000 2px 2px 0 0;
  transform: translate(2px, 2px);
}

.button-76 {
  background-color: #ffffff;
  border: 2px solid #030303;
  border-radius: 30px;
  box-shadow: #000000 4px 4px 0 0;
  color: #000000;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  font-size: 22px;
  padding: 0 38px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.tokenfont {
  color: #00c8ff;
  font-size: 60px;
}

.button-76:hover {
  background-color: #989898 !important;
  color: rgb(241, 241, 241) !important;
}

.button-76:active {
  box-shadow: #000000 2px 2px 0 0;
  transform: translate(2px, 2px);
}

@media (min-width: 768px) {
  .button-75 {
    min-width: 120px;
    padding: 0 25px;
  }

}









.item1 {
  --border: 5px;
  /* the border width */
  --slant: 0.7em;
  /* control the slanted corners */
  --color: #3236ff;
  /* the color */

  font-size: 15px;
  padding: 0.4em 0em;
  border: none;
  cursor: pointer;
  font-weight: bold;
  color: var(--color);
  background:
    linear-gradient(to bottom left, var(--color) 50%, #0000 50.1%) top right,
    linear-gradient(to top right, var(--color) 50%, #0000 50.1%) bottom left;
  background-size: calc(var(--slant) + 1.3*var(--border)) calc(var(--slant) + 1.3*var(--border));
  background-repeat: no-repeat;
  box-shadow:
    0 0 0 200px inset var(--s, #0000),
    0 0 0 var(--border) inset var(--color);
  clip-path:
    polygon(0 0, calc(100% - var(--slant)) 0, 100% var(--slant),
      100% 100%, var(--slant) 100%, 0 calc(100% - var(--slant)));
  transition: color var(--t, 0.3s), background-size 0.3s;
  height: 55px !important;
}

.item1:focus-visible {
  outline-offset: calc(-1*var(--border));
  outline: var(--border) solid #000c;
  clip-path: none;
  background-size: 0 0;
}

.item1:hover,
.item1:active {
  background-size: 100% 100%;
  color: #fff;
  --t: 0.2s 0.1s;
}

.item1:active {
  --s: #0005;
  transition: none;
}













#return-to-top {
  z-index: 111111 !important;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgb(13, 0, 255);
  background: rgba(102, 0, 255, 0.7);
  width: 50px;
  height: 50px;
  display: block;
  text-decoration: none;
  -webkit-border-radius: 35px;
  -moz-border-radius: 35px;
  border-radius: 35px;
  display: none;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#return-to-top i {
  color: #fff;
  margin: 0;
  position: relative;
  left: 16px;
  top: 13px;
  font-size: 19px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#return-to-top:hover {
  background: rgba(0, 0, 0, 0.9);
}

#return-to-top:hover i {
  color: #fff;
  top: 5px;
}






@-webkit-keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-250px * 7));
  }
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-250px * 7));
  }
}

.slider {
  background: none !important;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0);
  height: 50px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100vw;
}

.slider::before,
.slider::after {
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
  content: "";
  height: 50px;
  position: absolute;
  width: 110px;
  z-index: 2;
}

.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

.slider::before {
  left: 0;
  top: 0;
}

.slider .slide-track {
  -webkit-animation: scroll 40s linear infinite;
  animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250px * 14);
}

.slider .slide {
  height: 50px;
  width: 110px;
}



.nav-soc {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.nav-soc2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

@media screen and (max-width: 576px) {


  .log-jug {
    width: 70px;
    height: 70px;
  }

  .newimagebanner {
    width: 80%;
    height: auto !important;

  }

  .mog-jug {
    width: 70px;
    height: 70px;
  }

  .nav-soc {

    justify-content: left;
    align-items: start;
    flex-wrap: wrap;
  }

  .nav-soc a {
    padding: 10px 0px;
    width: 100%;
  }

  .nav-soc li {
    padding: 5px 15px;

  }

  .nav-soc2 {
    flex-direction: column;
    width: 100%;
    justify-content: left;
    align-items: start;
    flex-wrap: wrap;
  }

  .tokenfont {
    color: #00c8ff;
    font-size: 45px;
  }

  .mobilefirset {
    margin-top: 180px !important;
  }

  .button-76 {
    font-size: 18px;
    padding: 0px 20px;
  }
}


.marg1 {
  margin-left: 4.5rem !important;
  margin-right: .5rem !important;
}

.up1{
  transition: transform 0.3s ease-in-out;
}

.up1:hover{
  transform: translateY(-5px);
}
.copy-alert {
  display: none;
  position: absolute;
  top: -25px;
  right: 0;
  background: #ffffff;
  color: rgb(0, 0, 0);
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 4px;
  z-index: 1000;
  transition: opacity 0.3s;
}