:root {
  --border-radius: 1.5rem;
}

.home-page-section,
.home-page-section > .container {
  gap: 40px;
}

.home-page-hero-section {
  background: var(--bs-body-bg-2);
  border-radius: 0 0 5vw 5vw;
}

.home-page-hero-section-ellipse {
  width: 80%;
  aspect-ratio: 0.75;
  filter: blur(100px);
}

.home-page-hero-section-ellipse.ellipse-1 {
  top: -30%;
  left: -30%;
  background: var(--accent-color-2);
}

.home-page-hero-section-ellipse.ellipse-2 {
  bottom: -30%;
  right: -30%;
  background: var(--accent-color);
}

.view-stock-data-btn {
  height: 40px;
}

.view-stock-data-btn button {
  width: calc(100% - 4px);
  height: 36.5px;
}

.view-stock-data-btn-investors {
  display: block;
}

.view-stock-data-btn-businesses,
.view-stock-data-btn-developers {
  display: none;
}

.home-page-hero-section:has(#businesses-tab.active)
  .view-stock-data-btn-investors,
.home-page-hero-section:has(#businesses-tab.active)
  .view-stock-data-btn-developers {
  display: none;
}

.home-page-hero-section:has(#businesses-tab.active)
  .view-stock-data-btn-businesses {
  display: block;
}

.home-page-hero-section:has(#developers-tab.active)
  .view-stock-data-btn-investors,
.home-page-hero-section:has(#developers-tab.active)
  .view-stock-data-btn-businesses {
  display: none;
}

.home-page-hero-section:has(#developers-tab.active)
  .view-stock-data-btn-developers {
  display: block;
}

.hero-audience-tab {
  color: var(--bs-body-color);
}

.hero-audience-tab.active,
.hero-audience-tab:hover .text {
  color: var(--bs-heading-color);
}

.hero-audience-tab.active .text {
  font-weight: 700;
}

[data-bs-theme="dark"] .hero-audience-tab.active .text,
[data-bs-theme="dark"] .hero-audience-tab:hover .text {
  background: var(--gradient-primary);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

.hero-audience-tab-line {
  height: 3px;
  background: var(--bs-heading-color);
  transform: scaleX(0);
  transform-origin: center center;
}

[data-bs-theme="dark"] .hero-audience-tab-line {
  background: var(--gradient-primary);
}

.hero-audience-tab.active .hero-audience-tab-line {
  transform: scaleX(1);
}

#hero-audience-tab-content {
  width: 85%;
}

#hero-audience-tab-content .tab-pane {
  aspect-ratio: 2.6;
}

.crypto-stock-cards-container {
  overflow-x: auto;
}

.crypto-stock-card {
  width: 85%;
  max-width: 310px;
}

.crypto-stock-card-bg {
  aspect-ratio: 2.25;
  clip-path: url(#crypto-card-clip-path);
}

.crypto-stock-card-arrow-btn {
  width: calc(20% - 0.5rem);
  aspect-ratio: 1;
}

.crypto-stock-card-arrow-btn img[alt="arrow"] {
  width: 40%;
}

.crypto-stock-card .crypto-stock-card-category-img {
  height: 60%;
  left: 5%;
}

.crypto-stock-card:hover .crypto-stock-card-arrow-btn {
  transform: translate(4px, -4px);
}

[data-bs-theme="dark"] #new-to-crypto-container {
  background: linear-gradient(
    90deg,
    #4d597b 0%,
    #564372 22.5%,
    #201e1e 100%
  ) !important;
}

.tab-content .tab-pane:not(.show) {
  display: none;
}

.tab-content .tab-pane.show {
  display: block;
}

[role="tablist"] [role="tab"][aria-selected="false"] {
  background: transparent;
  border: none !important;
}

#new-to-crypto-accordion .accordion-button {
  border-top-right-radius: 0 !important;
  border-top-left-radius: 0 !important;
}

#new-to-crypto-accordion .accordion-button .serial-number,
[role="tablist"] [role="tab"][aria-selected="false"] .serial-number {
  color: var(--accent-color);
}

#new-to-crypto-accordion .accordion-button .title,
[role="tablist"] [role="tab"][aria-selected="false"] .title {
  color: var(--bs-body-color);
}

#new-to-crypto-accordion .accordion-button:not(.collapsed) .serial-number,
[role="tablist"] [role="tab"][aria-selected="true"] .serial-number {
  background: transparent;
  -webkit-text-fill-color: unset;
}

#new-to-crypto-accordion .accordion-button:not(.collapsed) .serial-number,
#new-to-crypto-accordion .accordion-button:not(.collapsed) .title,
[role="tablist"] [role="tab"][aria-selected="true"] .serial-number,
[role="tablist"] [role="tab"][aria-selected="true"] .title {
  color: #ffffff;
}

#new-to-crypto-accordion .accordion-button:not(.collapsed),
#new-to-crypto-accordion [role="tablist"] [role="tab"][aria-selected="true"] {
  background: var(--gradient-primary);
}

#new-to-crypto-accordion .accordion-button:not(.collapsed)::after,
[data-bs-theme="dark"]
  #new-to-crypto-accordion
  .accordion-button:not(.collapsed)::after,
[data-bs-theme="dark"]
  #take-next-step-section
  .accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1);
}

#new-to-crypto-accordion .card button:hover,
#new-to-crypto-xl-content .card button:hover {
  transform: scale(1.05);
}

#take-next-step-section .accordion-button:not(.collapsed)::after {
  filter: brightness(0);
}

.bg-accent-frame-1 {
  background: url("/assets/images/backgrounds/accent-1-light.svg") no-repeat
    center center;
  background-size: cover;
}

[data-bs-theme="dark"] .bg-accent-frame-1 {
  background: url("/assets/images/backgrounds/accent-1-dark.svg") no-repeat
    center center;
}

.bg-accent-frame-2 {
  background: url("/assets/images/backgrounds/accent-2-light.svg") no-repeat
    center center;
  background-size: cover;
}

[data-bs-theme="dark"] .bg-accent-frame-2 {
  background: url("/assets/images/backgrounds/accent-2-dark.svg") no-repeat
    center center;
}

.frame-img-1 {
  width: 90%;
  top: 10%;
  left: 5%;
}

.frame-img-2 {
  width: 50%;
  top: 5%;
  left: 3%;
}

.frame-img-3 {
  width: 50%;
  bottom: -15%;
  right: 3%;
}

.frame-img-4 {
  width: 35%;
  top: 4%;
  left: 2.5%;
}

.frame-img-5 {
  width: 70%;
  bottom: -18%;
  right: 4%;
}

.what-makes-us-diff-section > div {
  width: 100%;
  max-width: 550px;
  gap: 1.5rem;
}

[data-bs-theme="dark"] #take-next-step-section .accordion-button .card,
[data-bs-theme="dark"] #news-and-trending-section .card,
[data-bs-theme="dark"] #new-to-crypto-xl-content .card {
  background: var(--bs-body-bg);
}

#take-next-step-section .accordion-button.collapsed {
  border-radius: 0.625rem;
}

#take-next-step-section .divider {
  height: 150px;
  background: #b1b1b1;
}

@media (width < 576px) {
  .home-page-hero-section-heading,
  .home-page-hero-section-description {
    max-width: 350px;
  }
}

@media (width >= 576px) {
  .home-page-hero-section-heading {
    width: 460px;
  }

  .home-page-hero-section-ellipse {
    width: 70%;
    filter: blur(120px);
  }
}

@media (width >= 768px) {
  .view-stock-data-btn {
    height: 44px;
  }

  .view-stock-data-btn button {
    height: 40.5px;
  }
}

@media (width >= 992px) {
  :root {
    --border-radius: 1.75rem;
  }

  .home-page-hero-section-ellipse {
    width: 60%;
  }

  .crypto-stock-cards-container {
    overflow-x: unset;
  }

  .crypto-stock-cards-container .crypto-stock-card:nth-child(n + 4) {
    display: none;
  }

  .crypto-stock-cards-container.show-all .crypto-stock-card:nth-child(n + 4) {
    display: block;
  }

  .crypto-stock-card {
    width: calc((100% - 32px) / 3);
    max-width: none;
  }

  #news-and-trending-section {
    max-width: 100%;
  }

  #news-and-trending-section > div {
    border-radius: 0px !important;
  }

  .what-makes-us-diff-section > div {
    max-width: none;
    gap: 6rem;
    margin-bottom: 4rem;
  }

  .frame-img-2 {
    width: 45%;
    top: -12%;
    left: 6%;
  }

  .frame-img-3 {
    width: 80%;
    bottom: -25%;
    right: 2%;
  }

  .frame-img-4 {
    width: 50%;
    top: -15%;
  }

  .frame-img-5 {
    width: 80%;
    bottom: -25%;
    right: 5%;
  }
}

@media (width >= 1200px) {
  .home-page-section {
    gap: 60px;
  }

  .home-page-hero-section-heading {
    width: 550px;
  }

  .home-page-hero-section-ellipse {
    width: 35%;
    filter: blur(200px);
  }

  .home-page-hero-section-ellipse.ellipse-1 {
    top: unset;
    bottom: 0;
    left: -10%;
  }

  .home-page-hero-section-ellipse.ellipse-2 {
    bottom: 0;
    right: -10%;
  }

  #hero-audience-tab-content {
    width: 75%;
  }

  .home-page-hero-content-section .tab-content .tab-pane img,
  #trusted-by-scroller-container {
    width: 85%;
  }

  #new-to-crypto-accordion .accordion-collapse {
    display: block !important;
  }

  .what-makes-us-diff-section > div {
    gap: 5rem;
  }

  .take-next-step-card {
    width: calc(33.33% - 33.33px);
  }

  [data-bs-theme="light"] .take-next-step-card .card {
    background: var(--primary-light);
  }
}

@media (width >= 1400px) {
  :root {
    --border-radius: 2rem;
  }

  .what-makes-us-diff-section > div {
    gap: 7rem;
    margin-bottom: 6rem;
  }
}

@media (width >= 1920px) {
  .home-page-hero-section-ellipse.ellipse-1 {
    left: 0;
    border-bottom-left-radius: 0px !important;
  }

  .home-page-hero-section-ellipse.ellipse-2 {
    right: 0;
    border-bottom-right-radius: 0px !important;
  }
}