:root {
  --accent-color: #9f65ff;
  --accent-secondary: #ff6099;
  --accent-tertiary: #1aa4b2;
  --accent-blue: #0075ff;
  --accent-aqua: #4cded3;
  --accent-pink: #fc6cff;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}
body {
  /* background-color: #f5edfe; */
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  background: rgb(245, 237, 254);
  background: linear-gradient(180deg, rgba(245, 237, 254, 1) 0%, rgba(255, 231, 245, 1) 24%, rgba(233, 244, 255, 1) 49%, rgba(242, 253, 255, 1) 74%, rgba(253, 152, 255, 1) 100%);
}

.fs-90 {
  font-size: 90px;
}
.fs-70 {
  font-size: 70px;
}
.fs-50 {
  font-size: 50px;
}
.fs-40 {
  font-size: 40px;
}
.fs-35 {
  font-size: 35px;
}
.fs-25 {
  font-size: 25px;
}
.fs-22 {
  font-size: 22px;
}
.fs-21 {
  font-size: 21px;
}
.fs-20 {
  font-size: 20px;
}
.fs-18 {
  font-size: 18px;
}
.fs-16 {
  font-size: 16px;
}
.fs-15 {
  font-size: 15px;
}
.lh-84 {
  line-height: 84px;
}
.lh-60 {
  line-height: 60px;
}
.lh-50 {
  line-height: 50px;
}
.lh-34 {
  line-height: 34px;
}
.lh-32 {
  line-height: 32px;
}
.lh-30 {
  line-height: 30px;
}
.lh-26 {
  line-height: 26px;
}
.lh-20 {
  line-height: 20px;
}

.px-8 {
  padding-right: 8rem;
  padding-left: 8rem;
}

.px-70 {
  padding-left: 70px;
  padding-right: 70px;
}
.pl-70 {
  padding-left: 70px !important;
}

.jumbotron {
  height: 80vh;
  margin-top: 5rem;
}

.text-accent {
  color: var(--accent-color) !important;
}
.text-accent-secondary {
  color: var(--accent-secondary) !important;
}
.text-accent-tertiary {
  color: var(--accent-tertiary) !important;
}
.text-accent-blue {
  color: var(--accent-blue) !important;
}
.text-accent-aqua {
  color: var(--accent-aqua) !important;
}
.text-accent-pink {
  color: var(--accent-pink) !important;
}

.bg-accent-blue {
  background-color: var(--accent-blue) !important;
}

.btn-accent {
  background-color: var(--accent-color);
  color: #ffffff;
  border: 1px solid var(--accent-color);
  border-radius: 1rem;
}
.btn-accent:hover {
  background-color: #7d2eff;
  color: #ffffff;
}

.btn-telegram {
  background-color: #249fdb;
  color: #ffffff;
}
.btn-telegram:hover {
  background-color: #1e8ac0;
  color: #ffffff;
}

.btn-swap-lg {
  background-color: rgba(0, 117, 255, 0.1);
  padding: 20px, 0px, 20px, 0px;
  border-radius: 40px;
  color: var(--accent-blue) !important;
  font-size: 70px;
  font-weight: 700;
}
.btn-swap-lg:hover {
  background-color: rgba(0, 117, 255, 0.1);
  box-shadow: inset 0px 0px 0px 4px rgba(0, 117, 255, 0.5);
}
.btn-aqua {
  background-color: var(--accent-aqua);
  color: #ffffff;
}
.btn-aqua:hover {
  background-color: #42c5ba;
  color: #ffffff;
}

.address-bar {
  width: fit-content;
  background-color: #ffffff;
  border: 2px solid var(--accent-color);
  border-radius: 1rem;
}

.nav-link {
  color: #5a5f64;
  font-weight: 600;
}
.nav-link:hover {
  color: #5a5f64;
}
.nav-underline .nav-link.active,
.nav-underline .show > .nav-link {
  color: var(--accent-color);
}

.eco-card {
  border-radius: 30px !important;
  border: none;
}
.eco-card-img-overlay {
  width: 100%;
  height: 100%;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 1.5rem 1rem 1rem 1rem;
}

.card {
  border: none;
  border-radius: 1rem;
}

.gradient-section-up {
  background: rgb(161, 214, 210);
  background: linear-gradient(180deg, rgba(161, 214, 210, 0) 0%, rgba(161, 214, 210, 1) 100%);
}
.gradient-section-down {
  background: rgb(161, 214, 210);
  background: linear-gradient(0deg, rgba(161, 214, 210, 0) 0%, rgba(161, 214, 210, 1) 100%);
}

.gradient-card-1 {
  transition: all 1s linear;
  background: rgb(100, 74, 255);
  background: linear-gradient(180deg, rgba(100, 74, 255, 0) 70%, rgba(220, 100, 200, 1) 100%);
}
.gradient-card-1:hover {
  background: rgb(100, 74, 255);
  background: linear-gradient(180deg, rgba(100, 74, 255, 0) 0%, rgba(220, 100, 200, 1) 100%);
}

.gradient-card-2 {
  background: rgb(80, 150, 255);
  background: linear-gradient(180deg, rgba(80, 150, 255, 0) 70%, rgba(80, 150, 255, 1) 100%);
}
.gradient-card-2:hover {
  background: rgb(80, 150, 255);
  background: linear-gradient(180deg, rgba(80, 150, 255, 0) 0%, rgba(80, 150, 255, 1) 100%);
}

.gradient-card-3 {
  background: rgb(100, 74, 255);
  background: linear-gradient(180deg, rgba(100, 74, 255, 0) 70%, rgba(43, 231, 163, 1) 100%);
}
.gradient-card-3:hover {
  background: rgb(100, 74, 255);
  background: linear-gradient(180deg, rgba(100, 74, 255, 0) 0%, rgba(43, 231, 163, 1) 100%);
}

.gradient-card-4 {
  background: rgb(109, 184, 208);
  background: linear-gradient(180deg, rgba(109, 184, 208, 0) 70%, rgba(109, 184, 208, 1) 100%);
}
.gradient-card-4:hover {
  background: rgb(109, 184, 208);
  background: linear-gradient(180deg, rgba(109, 184, 208, 0) 0%, rgba(109, 184, 208, 1) 100%);
}

.gradient-card-5 {
  background: rgb(100, 74, 255);
  background: linear-gradient(180deg, rgba(100, 74, 255, 0) 70%, rgba(100, 74, 255, 1) 100%);
}
.gradient-card-5:hover {
  background: rgb(100, 74, 255);
  background: linear-gradient(180deg, rgba(100, 74, 255, 0) 0%, rgba(100, 74, 255, 1) 100%);
}

.gradient-card-6 {
  background: rgb(100, 74, 255);
  background: linear-gradient(180deg, rgba(100, 74, 255, 0) 70%, rgba(41, 170, 182, 1) 100%);
}
.gradient-card-6:hover {
  background: rgb(100, 74, 255);
  background: linear-gradient(180deg, rgba(100, 74, 255, 0) 0%, rgba(41, 170, 182, 1) 100%);
}

.gradient-card-7 {
  background: rgb(151, 218, 151);
  background: linear-gradient(180deg, rgba(151, 218, 151, 0) 70%, rgba(151, 218, 151, 1) 100%);
}
.gradient-card-7:hover {
  background: rgb(151, 218, 151);
  background: linear-gradient(180deg, rgba(151, 218, 151, 0) 0%, rgba(151, 218, 151, 1) 100%);
}

.gradient-card-8 {
  background: rgb(86, 94, 96);
  background: linear-gradient(180deg, rgba(86, 94, 96, 0) 70%, rgba(86, 94, 96, 1) 100%);
}
.gradient-card-8:hover {
  background: rgb(86, 94, 96);
  background: linear-gradient(180deg, rgba(86, 94, 96, 0) 0%, rgba(86, 94, 96, 1) 100%);
}

.price-green {
  color: #00d5a2;
}
.price-red {
  color: #d50027;
}

.text-wrapper {
  width: 100%;
  overflow: hidden;
}
.text-scroll {
  display: flex;
  width: 3000px;
  -moz-animation: scroll-h 20s linear infinite;
  -webkit-animation: scroll-h 20s linear infinite;
  animation: scroll-h 20s linear infinite;
}

.text-scroll h2 {
  white-space: nowrap;
}

@keyframes scroll-h {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.accordion-item {
  border: none;
  border-radius: 1rem !important;
}
.accordion-flush > .accordion-item > .accordion-header .accordion-button,
.accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
  border-radius: 1rem !important;
}

.accordion-button:not(.collapsed) {
  background-color: inherit !important;
  box-shadow: none !important;
}

.col-240 {
  width: 264px;
}

.dropdown-menu {
  padding: 0.5rem;
}
.dropdown-item {
  border-radius: 4px;
}

footer {
  padding: 40px 0px;
  background-color: #212223;
}
footer ul li {
  color: #8a8d93;
  padding: 10px 0px;
}
footer ul li a {
  color: #ffffff;
  text-decoration: none;
}
footer ul li a:hover {
  opacity: 0.8;
}

@media (max-width: 992px) {
  .btn-swap-lg {
    font-size: 50px;
    border-radius: 20px;
  }
}

@media (max-width: 768px) {
  .jumbotron {
    height: 70vh;
  }
  .px-70 {
    padding-left: 45px;
    padding-right: 45px;
  }
  .px-8 {
    padding-right: 0;
    padding-left: 0;
  }
  .pl-70 {
    padding-left: 45px !important;
  }
  .btn-swap-lg {
    font-size: 30px;
    border-radius: 20px;
  }
  .fs-70 {
    font-size: 50px;
  }
  .lh-84 {
    line-height: 65px;
  }
}