body {
  font-family: var(--pt-serif-regular);
  background-color: var(--background);
  overflow-x: hidden;
  color: #000000;
}

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

@font-face {
  font-family: jekaterina;
  src: url(font/Jekaterina.ttf);
}

:root {
  --pt-serif-regular: "PT Serif", serif;
  --primary-font: "Noto Sans", sans-serif;
  --background: #12171e;
  --black-color: #11151c;
  --grey-color: #616771;
  --light-color: #fff3d4;
  --yellow-color: #fff3d4;
  --font-special: jekaterina;
  --orange-color: #f58b00;
}

a {
  text-decoration: none;
  color: var(--grey-color);
}

li {
  list-style: none;
}

.heading-text {
  background: var(--button-outline);
  color: #fff;
  font-family: var(--primary-font);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  line-height: 18px;
  font-size: 14px;
  height: 39px;
  position: relative;
  z-index: 9;
  padding: 0 1rem;
  text-align: center;
}

@media (max-width: 450px) {
  .heading-text img {
    display: none;
  }
  .heading-text {
    padding: 1.5rem;
  }
}

header {
  display: flex;
  align-items: center;
  font-family: var(--primary-font);
  max-width: 1500px;
  height: 60px;
  position: relative;
  justify-content: space-between;
  margin-inline: auto;
  padding: 6px 32px;
  /* margin-top: 1.5rem; */
  /* border-radius: 30px; */
  background-color: var(--black-color);
  border-bottom: 1px solid #ffffff10;
  z-index: 9;
  box-shadow: 0.6px 1.2px 3px rgba(0, 0, 0, 0.01),
    1.3px 2.8px 6.9px rgba(0, 0, 0, 0.014),
    2.3px 4.9px 12px rgba(0, 0, 0, 0.017), 3.6px 7.8px 19px rgba(0, 0, 0, 0.02),
    5.6px 12px 29.4px rgba(0, 0, 0, 0.023),
    8.7px 18.7px 45.8px rgba(0, 0, 0, 0.026),
    14.5px 31px 76.1px rgba(0, 0, 0, 0.03), 29px 62px 152px rgba(0, 0, 0, 0.04);
}

.social-wallet-container {
  display: flex;
  align-items: center;
  gap: 1em;
}

.connect-wallet-btn {
  cursor: pointer;
  transition: background-color 0.3s ease;
  background-color: transparent;
}

.sticky-btn {
  position: fixed; /* Make it fixed */
  bottom: 100px; /* Distance from the bottom */
  right: 20px; /* Distance from the right */
  z-index: 1000; /* Ensure it’s on top of other elements */
  display: none;
  flex-direction: column; /* Stack the button and info vertically */
  align-items: center; /* Center the content */
}

.sticky-btn .connect_wallet {
  background-color: var(--button-outline);
  color: #fff;
  padding: 1rem;
}

.hidden {
  display: none;
}

#wallet_info {
  padding: 0 1rem;
  position: absolute;
  top: 60px;
  max-width: 100%;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  right: 0%;
  background-color: #fff;
  font-size: 16px;
}
#wallet_info h2 {
  font-size: 16px;
}

#wallet_address,
#wallet_balance {
  width: 40ch;
  font-size: 16px;
}

nav ul {
  display: flex;
  align-items: center;
}

nav ul li {
  display: flex;
  align-items: center;
  gap: 0.3em;
}

nav ul li {
  margin: 0 1rem;
}

nav a {
  color: var(--grey-color);
  font-size: 0.9rem;
}

nav ul li .first-active {
  color: var(--yellow-color);
}

nav ul li .first-active i {
  color: var(--yellow-color);
}

nav a:hover {
  color: var(--yellow-color);
  transition: 0.2s ease-in;
}

nav i {
  color: var(--grey-color);
  font-size: 0.5rem;
}

nav li:hover i {
  color: var(--yellow-color);
}
.logo-nav-container {
  display: flex;
  align-items: center;
}
.social-link {
  display: flex;
  align-items: center;
  gap: 1em;
}

.dropdown {
  width: 16px;
}

.twitter_link img {
  background-color: black;
  border-radius: 50px;
  padding: 0.4rem;
}
.connect_wallet {
  font-size: 0.8rem;
  color: var(--grey-color);
  border: none;
  font-weight: 500;
  font-family: var(--primary-font);
  font-style: italic;
}

.connect_wallet:hover {
  color: var(--yellow-color);
  transition: 0.2s ease-in;
}

.header-menu-btn {
  display: none;
}

.fa-solid {
  color: var(--grey-color);
  font-size: 1.2rem;
  cursor: pointer;
}

.fa-solid:hover {
  color: var(--yellow-color);
  transition: 0.2s ease-in;
}
/* Mobile Menu Styles */
#mobile-menu {
  position: fixed;
  right: 0; /* Start off-screen */
  top: 0;
  height: 100vh;
  width: 70vw;
  background-color: #ffffff;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0; /* Start hidden */
  transform: translateX(100%); /* Move off-screen */
  z-index: 1000;
  padding: 20px;
  font-family: var(--primary-font);
  font-weight: 600;
  font-size: 1.2rem;
  display: none;
  box-shadow: 0.6px 1.2px 3px -4px rgba(0, 0, 0, 0.01),
    1.3px 2.8px 6.9px -4px rgba(0, 0, 0, 0.014),
    2.3px 4.9px 12px -4px rgba(0, 0, 0, 0.017),
    3.6px 7.8px 19px -4px rgba(0, 0, 0, 0.02),
    5.6px 12px 29.4px -4px rgba(0, 0, 0, 0.023),
    8.7px 18.7px 45.8px -4px rgba(0, 0, 0, 0.026),
    14.5px 31px 76.1px -4px rgba(0, 0, 0, 0.03),
    29px 62px 152px -4px rgba(0, 0, 0, 0.04);
}

#mobile-menu.visible {
  display: block; /* Show block to apply transition */
  opacity: 1; /* Fully visible */
  transform: translateX(0); /* Move back into view */
}

.logo img {
  width: 25px;
  height: 40px;
}

.social-link a {
  display: flex;
  align-items: center;
  gap: 1em;
  font-size: 0.9rem;
}

.social-link a:hover {
  color: var(--yellow-color);
  transition: 0.2s ease-in;
}

.social-link .arbitrum {
  width: 25px;
  margin-left: 1.5rem;
}

/* HEADER MOBILE */

@media (max-width: 450px) {
  header {
    display: flex;
    max-width: 90%;
    padding: 2rem 1rem;
  }
  nav {
    display: none;
  }

  .social-link {
    display: none;
  }

  .validate-btns {
    display: none;
  }

  .sticky-btn {
    display: block;
  }

  .header-menu-btn {
    display: block;
    cursor: pointer;
  }
  .mobile-nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3rem;
  }

  .hidden-menu ul {
    display: flex;
    flex-direction: column;
  }

  .mobile-invest-link-li,
  .about-link-li {
    display: flex;
    flex-direction: column;
    margin: 1rem 0;
    gap: 1em;
  }

  .mobile-invest-link-li p,
  .about-link-li p {
    display: flex;
    align-items: center;
    gap: 1em;
    cursor: pointer;
  }

  .mobile-docs {
    margin-bottom: 2rem;
  }

  .submenu {
    font-weight: 400;
    display: none;
  }
  .submenu {
    max-height: 0; /* Hide by default */
    overflow: hidden; /* Prevent overflow */
    transition: max-height 0.3s ease; /* Smooth transition */
  }

  .submenu.visible {
    max-height: 200px; /* Adjust based on content height */
  }

  .submenu {
    max-height: 0; /* Hide by default */
    overflow: hidden; /* Prevent overflow */
    transition: max-height 0.3s ease; /* Smooth transition */
  }

  .submenu.visible {
    max-height: 200px; /* Adjust based on content height */
  }

  .submenu li {
    margin: 1rem 0;
  }

  #mobile-menu.visible {
    right: 0;
  }

  #mobile-menu ul {
    list-style: none;
    padding: 0;
  }

  #mobile-menu li {
    margin: 20px 0;
  }

  .submenu {
    padding-left: 20px;
  }

  .mobile-hidden {
    display: none;
  }

  .hidden-menu {
    display: none;
  }

  .mobile-invest-link-li a {
    cursor: pointer;
  }

  .menu-bar-close {
    cursor: pointer;
  }

  .submenu li a {
    position: relative;
    display: flex;
    gap: 1em;
  }

  .mobile-mtbill-text {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
  }
  .mobile-mtbill-text p {
    font-size: 12px;
    color: gray;
  }

  .sticky-btn {
    display: flex;
  }
}

.logo-watermark {
  position: absolute;
  top: 0;
  overflow: hidden;
}

.invest-content {
  position: relative;
}

.dropdown-hover:hover .dropdown {
  transform: rotate(180deg);
  transition: 0.1s ease-in;
  cursor: pointer;
  position: relative;
}

.invest-content:hover .invest-sub-links {
  display: block; /* Show sub-links when hovered */
  opacity: 1; /* Make them fully visible */
  transform: translateY(0); /* Reset any transformation */
}

.invest-hover {
  cursor: pointer;
}

/* Optional: Adding some transition effect */
.invest-sub-links {
  opacity: 0; /* Start with invisible */
  transform: translateY(-10px); /* Start slightly above the normal position */
}

.invest-hover:hover .invest-sub-links {
  opacity: 1; /* Fully visible on hover */
  transform: translateY(0); /* Move to normal position */
}

.invest-sub-links {
  width: 270px;
  min-height: 100%;
  background-color: rgb(255, 255, 255);
  border-radius: 28px;
  position: absolute;
  left: 20%;
  top: 40px;
  padding: 1rem;
  display: flex;
}

.invest-link-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
  max-width: 100%;
  margin: 1rem 0;

  padding: 0.3rem;
}

.invest-link-content:hover {
  border-radius: 12px;
  /* padding: 0.4rem; */
  background-color: #0f172a40;
  transition: 0.2s ease-in;
}

.invest-content {
  position: relative; /* Relative positioning for dropdown content */
}

.about-sub-links {
  display: none; /* Hidden by default */
  position: absolute; /* Position it absolutely under the About section */
  top: 100%; /* Position right below the dropdown-hover */
  left: 0;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  z-index: 10;
  transition: all 0.3s ease; /* Smooth transition */
  opacity: 0;
  transform: translateY(-10px); /* Start slightly above */
}

/* Show the about-sub-links when hovering over the invest-content container */
.invest-content:hover .about-sub-links {
  display: block;
  opacity: 1;
  transform: translateY(0); /* Animate sliding down */
}

/* Optional styles to make sure the about-sub-links doesn't disappear */
.about-sub-links a {
  display: block;
  padding: 5px 10px;
  color: #333;
  text-decoration: none;
}

/* Style for links on hover */
.about-sub-links a:hover {
  background-color: #f0f0f0;
}

/* Landing page section */

.landing-page-section {
  max-width: 100%;
  position: relative;
  min-height: 100vh;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}

.landing-page-flex {
  display: flex;
  /* flex-wrap: wrap; */
  max-width: 880px;
  height: 519px;
  margin-inline: auto;
  justify-content: space-between;
  align-items: center;
  /* padding: 0 2rem; */
  position: relative;
}
.aggregator-content {
  margin-top: 1rem;
}
.landing-page-container {
  position: relative;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-inline: auto;
  justify-content: center;
  max-width: 100%;
  height: 519px;
}

.landing-page-content-btns {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1em;
}

.landing-page-content-btns button {
  padding: 0.5rem 1rem;
  color: black;
  cursor: pointer;
  background-color: var(--orange-color);
  border: none;
  border-radius: 4px;
  font-weight: 600;
}

.landing-page-content-btns button:hover {
  color: #fff;
  transition: 0.2s ease-in;
}
.stake {
  background: #4caf50; /* Green */
}

.unstake {
  background: #f44336; /* Red */
}

.migrate {
  background: #ff9800; /* Orange */
}
.aggregator-content {
  display: flex;
  color: var(--grey-color);
  font-family: var(--primary-font);
}

.aggregator-content div {
  font-size: 12.8px;
  background-color: #11151c;
  /* padding: 1rem 1.5rem; */
  width: 116px;
  height: 36px;
  border: 1px solid #ffffff0f;
  border-radius: 4px 0px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aggregator-content button {
  font-size: 12.8px;
  background-color: #11151c;
  cursor: pointer;
  background-color: var(--orange-color);
  cursor: pointer;
  /* padding: 1rem 1.5rem; */
  width: 108px;
  height: 36px;
  border: 1px solid #ffffff0f;
  color: #000000;
  border-radius: 4px;
  margin: 0 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* Optional: Keep focus styles for accessibility */
.aggregator-content :focus {
  outline: none; /* Removes default focus outline */
  border: 2px solid #000; /* Adds a custom focus indicator */
}

.aggregator-content :active {
  color: rgb(255, 255, 255); /* Text color */
}

.aggregator-content button:hover {
  background-color: #f58b00cb;
}
.aggregator-content .aggregator {
  background-color: #161b24;
  color: var(--yellow-color);
}

.swap-field {
  max-width: 100%;
  height: 441px;
  border: 1px solid #ffffff0c;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

@media (max-width: 790px) {
  .swap-field {
    max-width: 100%;
  }
}

@media (max-width: 450px) {
  .swap-field {
    width: 400px;
  }
}
.swap-field-container {
  max-width: 100%;
  /* border: 4px solid yellow; */
}
.swap-tabs p {
  color: var(--yellow-color);
  font-size: 19.2px;
  font-family: var(--primary-font);
}
.swap-settings {
  display: flex;
  gap: 1em;
}

.swap-tabs {
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
}

.swap-flex {
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  position: relative;
  /* border: 1px solid rgb(255, 255, 255); */
}

.native-content img {
  width: 20px;
}

.native-container {
  display: flex;
  position: relative;
  max-width: 100%;
  margin-top: 1rem;
  background-color: #161b24;
  border-radius: 4px;
}

.native-content {
  background-color: #1d232e;
  position: relative;
  max-width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  font-family: var(--primary-font);
  padding: 0 1rem;
}

.native-content p {
  color: var(--yellow-color);
  font-family: inherit;
}

.paraswap-container {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-left: 1rem;
}

.paraswap-container i {
  color: var(--orange-color);
  font-size: 0.6rem;
}

.paraswap-content,
.openocean-content {
  display: flex;
  align-items: center;
  max-width: 100%;
}

.paraswap-content img:last-child {
  /* width: 70px; */
  object-fit: contain;
}

.paraswap-content p {
  font-family: var(--font-special);
  color: var(--grey-color);
}
.openocean-content p {
  font-family: var(--primary-font);
  color: var(--grey-color);
}

.landing-page-header-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 8;
}

.Eth-container {
  position: relative;
  max-width: 600px;
  height: 75px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  background-color: #161b24;
  margin-top: 1rem;
  padding-right: 1rem;
}

.eth-content {
  display: flex;
  align-items: center;
  gap: 1em;
  border-radius: 4px;
  height: 100%;
  max-width: 160px;
  padding: 0.5rem 1rem;
  background-color: #1d232e;
}

.Weth-content {
  position: relative;
  color: var(--grey-color);
  font-family: var(--primary-font);
}

.Weth-content span {
  font-size: 0.8rem;
}
.Weth-content p {
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.3em;
}

.Weth-content p i {
  color: var(--grey-color);
  font-size: 0.6rem;
}

.eth-content img {
  width: 50px;
}

.Eth-field {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5em;
}

@media (max-width: 826px) {
  .Eth-field {
    width: 300px;
  }
}

@media (max-width: 784px) {
  .Eth-field {
    width: 250px;
  }
}

@media (max-width: 790px) {
  .Eth-field {
    width: 200px;
  }

  .paraswap-container {
    margin-left: 0rem;
  }
  .paraswap-content img,
  .openocean-content img {
    /* border: 1px solid #fff; */
    width: 20px;
  }

  .paraswap-content p,
  .openocean-content p {
    font-size: 0.6rem;
  }
}

@media (max-width: 787px) {
  .Eth-field {
    width: 140px;
  }

  .paraswap-container {
    gap: 0.4em;
    margin-left: 1rem;
  }

  .paraswap-content p,
  .openocean-content p {
    font-size: 0.8rem;
  }
}
.input-field {
  width: 400px;
  height: 30px;
  background-color: transparent;
  border: none;
}
.second-field {
  color: var(--grey-color);
  font-family: var(--primary-font);
}

.input-field {
  text-align: right; /* Align text and placeholder to the right */
  /* Optional: Default border */
  outline: none; /* Removes the blue outline in some browsers */
  transition: border-color 0.3s ease; /* Smooth transition */
  font-family: var(--primary-font);
  font-size: 1rem;
}
.input-field:focus {
  border: none; /* Removes the border on focus */
  outline: none; /* Ensures no outline appears */
  color: #fff;
  font-size: 1rem;
}

/* Hide the spinner buttons */
.input-field::-webkit-inner-spin-button,
.input-field::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* For Firefox */
.input-field[type="number"] {
  -moz-appearance: textfield;
}

.Eth-field p {
  color: var(--grey-color);
  font-family: var(--primary-font);
  font-size: 0.8rem;
}

.Eth-field p span {
  color: var(--orange-color);
}

.Connect {
  width: 100%;
  color: #000000;
  background-color: var(--orange-color);
  margin-top: 1rem;
  height: 59px;
  border-radius: 4px;
  border: none;
  font-size: 18.8px;
  font-family: var(--primary-font);
  line-height: 19.2px;
  cursor: pointer;
}

/* Change color when the button is clicked */
.Connect:active {
  background-color: white; /* New background color */
  color: rgb(255, 255, 255); /* Text color */
}

/* Optional: Keep focus styles for accessibility */
.Connect:focus {
  outline: none; /* Removes default focus outline */
  border: 2px solid #000; /* Adds a custom focus indicator */
}

.Connect:hover {
  background-color: #f58b00cb;
}

.support {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1rem;
  justify-content: center;
}

.support p {
  color: var(--grey-color);
  font-size: 0.7rem;
  font-family: var(--primary-font);
}

.support img {
  width: 70px;
}

.knight-container {
  max-width: 300px;
  height: 441px;
  display: flex;
  flex-direction: column;
  gap: 1em;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--primary-font);
  padding: 18px 1rem;
  background-color: #1d232e;
  position: relative;
}

.knight-content {
  max-width: 233px;
}

.knight-content img {
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

.knight-container p:first-of-type {
  color: var(--orange-color);
  font-size: 12px;
}

.delegate {
  color: var(--yellow-color);
}

.knight-container p:last-of-type {
  color: var(--grey-color);
  font-size: 12px;
}

.knight-btn {
  width: 100%;
  padding: 0.5rem 0;
  background-color: var(--orange-color);
  border: none;
  font-weight: 400;
  border-radius: 4px;
  height: 40px;
  font-size: 1rem;
}

/* Optional: Keep focus styles for accessibility */
.knight-btn:focus {
  outline: none; /* Removes default focus outline */
  border: 2px solid #000; /* Adds a custom focus indicator */
}

.knight-btn:active {
  background-color: white; /* New background color */
  color: rgb(255, 255, 255); /* Text color */
}

.knight-content-container {
  width: 100%;
}

.knight-btn:hover {
  background-color: #f58b00cb;
}

.mobile-knight-content {
  display: none;
}

.mobile-knight-texts span {
  color: var(--orange-color);
}

.mobile-knight-img {
  color: #fff;
}

.mobile-knight-texts p:first-of-type {
  color: var(--yellow-color);
  font-size: 1rem;
}

@media (max-width: 1069px) {
  .swap-flex {
    flex-direction: column;
  }

  .landing-page-section {
    min-height: 100vh;
  }
  .knight-content-container {
    display: none;
  }

  .mobile-knight-content {
    display: flex;
  }
  .knight-container {
    position: relative;
    min-width: 600px;
    height: 200px;
  }
}

@media (max-width: 826px) {
  .knight-container {
    position: relative;
    min-width: 500px;
    height: 200px;
    text-align: left;
  }
}

@media (max-width: 786px) {
  .knight-container {
    position: relative;
    min-width: 280px;
    height: 200px;
  }
}

@media (max-width: 523px) {
  .knight-container {
    min-width: 230px;
  }

  .Eth-field {
    min-width: 70px;
  }
  .input-field {
    width: 50px;
  }

  /* .knight-btn {
    width: 120px;
  } */
}

@media (max-width: 450px) {
  .knight-container {
    min-width: 400px;
  }
}
.mobile-knight-img {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.mobile-knight-img img {
  width: 30px;
}

.chart-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border: 1px solid #ffffff17;
  width: 180px;
  padding: 1rem;
  height: 48px;
  cursor: pointer;
  margin-inline: auto;
}

.chart-toggle p {
  color: var(--yellow-color);
  font-family: var(--primary-font);
}

.chart-toggle img {
  margin-top: 0.5rem;
}

#chart {
  width: 100%;
  /* height: 100vh; */
}

.chart-toggle {
  margin: 20px auto;
  cursor: pointer;
}

/* Hide the TradingView widget initially */
.tradingview-widget-container {
  width: 80%;
  height: 600px;
  margin: 30px auto;
  display: none;
}

.chart-toggle {
  margin: 20px auto;
  cursor: pointer;
  text-align: center;
}

#tradingview_chart {
  width: 100%;
  height: 100%;
}
.landing-page-header-text h1 {
  font-size: 72px;
  font-family: var(--pt-serif-regular);
  font-weight: 300;
}

.landing-page-header-text p {
  font-size: 24px;
}

.live-crypto-container {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 820px;
  gap: 1.5em;
  margin-top: 4rem;
}

.live-crypto-content {
  width: 394px;
  height: 284px;
  background-color: #fff;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  border-radius: 28px;
  position: relative;
  font-family: var(--primary-font);
  box-shadow: 0.6px 1.2px 3px rgba(0, 0, 0, 0.01),
    1.3px 2.8px 6.9px rgba(0, 0, 0, 0.014),
    2.3px 4.9px 12px rgba(0, 0, 0, 0.017), 3.6px 7.8px 19px rgba(0, 0, 0, 0.02),
    5.6px 12px 29.4px rgba(0, 0, 0, 0.023),
    8.7px 18.7px 45.8px rgba(0, 0, 0, 0.026),
    14.5px 31px 76.1px rgba(0, 0, 0, 0.03), 29px 62px 152px rgba(0, 0, 0, 0.04);
}

.crypto-logo-container {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 1rem;
}

.crypto-logo-container p {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 1rem;
}

.live-crypto-content p {
  font-family: inherit;
}

.crypto-percentage {
  font-size: 72px;
  font-family: var(--pt-serif-regular);
  display: flex;
  align-items: flex-end;
  color: var(--light-color);
  font-weight: 1;
  margin-bottom: 1rem;
}

.crypto-span {
  font-size: 16px;
  font-weight: 900;
}

.amount-btn-container {
  display: flex;
  align-items: center;
  justify-content: start;
}

.amount {
  display: flex;
  align-items: center;
  gap: 1em;
}

.amount p {
  color: var(--light-color);
  background: #00b6df29;
  font-weight: 500;
  padding: 0 12px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  border-radius: 28px;
  height: 32px;
  display: inline-flex;
  align-items: center;
}

.eth-img-bg {
  background: #00b6df29;
  border-radius: 28px;
  height: 32px;
  width: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.invest-btn {
  position: absolute;
  right: 4%;
  background: var(--light-color);
  border: transparent;
  padding: 12px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  color: #fff;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  border-radius: 28px;
}

.invest-btn a {
  color: #fff;
}

.crypto-percentage-green {
  color: var(--green-color);
}

.amount-green p {
  background-color: #34c7591c;
  color: var(--green-color);
}

.eth-img-bg-green {
  background-color: #34c7591c;
}

.invest-btn-green {
  background-color: var(--green-color);
}

/* LANDING PAGE SECTION MOBILE */

@media (max-width: 450px) {
  .landing-page-header-text {
    text-align: center;
  }

  .landing-page-header-text h1 {
    font-size: 50px;
  }

  .landing-page-header-text p {
    font-size: 16px;
  }

  .landing-page-container {
    padding: 0 1rem;
  }

  .live-crypto-content {
    width: 100%;
  }
}

.social-links {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.social-links a {
  color: var(--grey-color); /* Default icon color */
  font-size: 32px; /* Icon size */
  transition: color 0.3s ease;
  text-decoration: none;
}

.social-links a:hover {
  color: var(--orange-color);
  background-color: transparent; /* Change to your preferred hover color */
}

/* about section */

.about-section {
  z-index: 9;
  position: relative;
  max-width: 100%;
  height: 100%;
  margin-top: 8rem;
}

.about-container {
  max-width: 1200px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-inline: auto;
  margin-top: 3rem;
  gap: 2em;
  justify-content: space-between;
}

.about-section h1 {
  text-align: center;
  font-size: 44px;
  color: var(--black-color);
  font-weight: 100;
}

.about-content {
  width: 376px;
  height: 413px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  border-radius: 28px;
  box-shadow: 0.6px 1.2px 3px -4px rgba(0, 0, 0, 0.01),
    1.3px 2.8px 6.9px -4px rgba(0, 0, 0, 0.014),
    2.3px 4.9px 12px -4px rgba(0, 0, 0, 0.017),
    3.6px 7.8px 19px -4px rgba(0, 0, 0, 0.02),
    5.6px 12px 29.4px -4px rgba(0, 0, 0, 0.023),
    8.7px 18.7px 45.8px -4px rgba(0, 0, 0, 0.026),
    14.5px 31px 76.1px -4px rgba(0, 0, 0, 0.03),
    29px 62px 152px -4px rgba(0, 0, 0, 0.04);
}

.about-content img {
  margin-bottom: 2rem;
}

.about-content h5 {
  font-size: 28px;
  font-weight: 100;
  margin-bottom: 1rem;
}

.about-content p {
  font-family: var(--primary-font);
}

/*Supporter section  */

.supporters-section {
  max-width: 100%;
  height: 100%;
  margin-top: 8rem;
}

.supporters-section h1 {
  text-align: center;
  font-size: 44px;
  color: var(--black-color);
  font-weight: 100;
}

.supporters-content img:nth-of-type(1) {
  width: 205px;
}

.supporters-content img:nth-of-type(8) {
  width: 100px;
  height: 50px;
}

.supporters-content img:last-child {
  width: 150px;
}

.supporters-content img {
  max-width: 100%;
}

.supporters-section-container {
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  margin-inline: auto;
  margin-top: 3rem;
  padding: 48px 58px;
  border-radius: 28px;
  height: 100%;
  position: relative;
  box-shadow: 0.6px 1.2px 3px -4px rgba(0, 0, 0, 0.01),
    1.3px 2.8px 6.9px -4px rgba(0, 0, 0, 0.014),
    2.3px 4.9px 12px -4px rgba(0, 0, 0, 0.017),
    3.6px 7.8px 19px -4px rgba(0, 0, 0, 0.02),
    5.6px 12px 29.4px -4px rgba(0, 0, 0, 0.023),
    8.7px 18.7px 45.8px -4px rgba(0, 0, 0, 0.026),
    14.5px 31px 76.1px -4px rgba(0, 0, 0, 0.03),
    29px 62px 152px -4px rgba(0, 0, 0, 0.04);
}

.supporters-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns */
  gap: 3em; /* space between items */
  justify-items: center; /* center the images in each grid cell */
  align-items: center; /* vertically center the images */
  margin-inline: auto;
}

.supporters-content img {
  max-width: 100%;
  height: auto;
  object-fit: contain; /* ensures the images are scaled properly */
}

/* supporters section mobile */

@media (max-width: 450px) {
  .supporters-section {
    padding: 0 1rem;
  }
  .supporters-section-container {
    height: 100vh;
    padding: 48px 2rem;
  }
  .supporters-content {
    gap: 4em;
    grid-template-columns: repeat(2, 1fr);
  }

  .supporters-content img:nth-of-type(1) {
    width: 100%;

    object-fit: contain;
  }
}

/* PARTNERS SECTION */

.partners-section {
  max-width: 100%;
  height: 100%;
  margin-top: 8rem;
}

.partners-section h1 {
  text-align: center;
  font-size: 44px;
  color: var(--black-color);
  font-weight: 100;
}

.partners-section-container {
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-inline: auto;
  margin-top: 2rem;
  gap: 4em;
}

.partners-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: flex-start;
  max-width: 576px;
  min-height: 300px;
  background-color: #fff;
  padding: 40px;
  border-radius: 28px;
  box-shadow: 0.6px 1.2px 3px -4px rgba(0, 0, 0, 0.01),
    1.3px 2.8px 6.9px -4px rgba(0, 0, 0, 0.014),
    2.3px 4.9px 12px -4px rgba(0, 0, 0, 0.017),
    3.6px 7.8px 19px -4px rgba(0, 0, 0, 0.02),
    5.6px 12px 29.4px -4px rgba(0, 0, 0, 0.023),
    8.7px 18.7px 45.8px -4px rgba(0, 0, 0, 0.026),
    14.5px 31px 76.1px -4px rgba(0, 0, 0, 0.03),
    29px 62px 152px -4px rgba(0, 0, 0, 0.04);
}

.partners-content p {
  font-size: 24px;
  font-family: var(--primary-font);
  margin-bottom: 8rem;
}

.partner-img-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4em;
}

.partner-img-container-grid {
  flex-wrap: wrap;
}

.partner-img-container img {
  width: 200px;
}
.partner-img-container-grid img {
  width: 130px;
}

/* PARTNER SECTION MOBILE */
@media (max-width: 450px) {
  .partners-section-container {
    padding: 0 1rem;
  }
  .partners-content {
    height: 100%;
    padding: 40px;
  }
}

/* NEWS LETTER SECTION */

.news-letter {
  max-width: 100%;
  height: 100%;
  margin-top: 8rem;
  padding: 3rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.news-letter h1 {
  text-align: center;
  font-size: 44px;
  color: var(--black-color);
  font-weight: 100;
}

.news-letter-container {
  max-width: 700px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  margin-top: 4rem;
}

.email {
  width: 344px;
  height: 50px;
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  border: none;
  font-size: 16px;
}

.email:focus {
  outline: none;
  transition: 0.2s ease-in;
  padding: 0 2rem;
}

.news-letter-container button {
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  background-color: var(--button-outline);
  color: #fff;
  font-size: 16px;
  font-family: var(--primary-font);
}

/* FOOTER SECTION */

footer {
  background-color: #11151c;
  max-width: 100%;
  height: 30%;
  border: 1px solid #ffffff14;
  /* padding-bottom: 3rem; */
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
}

.footer-container {
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-inline: auto;
  margin-top: 2rem;
  gap: 4em;
  justify-content: space-between;
  min-height: 200px;
  align-items: flex-start;
  font-family: var(--primary-font);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 1em;
  font-size: 0.8rem;
}

.footer-col p {
  color: var(--light-color);
  font-size: 0.8rem;
}

.all-rights-container {
  color: #0d182e47;
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin-inline: auto;
  font-size: 12px;
}

.all-rights-container p:last-child {
  width: 765px;
}

/* FOOTER SECTION MOBILE */

@media (max-width: 450px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 0;
  }

  .all-rights-container {
    color: #0d182e47;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    gap: 2em;
    padding: 0 2rem;
  }

  .all-rights-container p:last-child {
    width: 100%;
  }
}

/* Hero Section */
.hero {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 4rem;
  position: relative;
}

.hero-content {
  max-width: 50%;
  position: relative;
}

.hero-content h2 {
  font-size: 48px;
  margin-bottom: 1rem;
  font-family: var(--pt-serif-regular);
  color: var(--black-color);
}

.hero-content p {
  font-size: 20px;
  margin-bottom: 2rem;
  font-family: var(--primary-font);
  color: #fff;
}

.hero-image img {
  width: 500px;
  height: auto;
}

/* Mission Section */
.mission {
  background-color: #f4f4f4;
  padding: 4rem;
  text-align: center;
  position: relative;
  max-width: 100%;
}
.mission-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  gap: 3em;
  max-width: 700px;
  margin-inline: auto;
}

.mission-content h1 {
  font-family: var(--primary-font);
  font-size: 35px;
}

.mission-content p {
  font-family: var(--primary-font);
}

/* Team Section */
.team {
  padding: 4rem;
  background-color: white;
  text-align: center;
}

.team h2 {
  font-size: 36px;
  margin-bottom: 2rem;
}

.team-grid {
  display: flex;
  justify-content: space-around;
}

.team-member {
  width: 200px;
  text-align: center;
}

.team-member img {
  width: 100%;
  border-radius: 50%;
  margin-bottom: 1rem;
}

.team-member h3 {
  font-size: 20px;
  margin-bottom: 0.5rem;
}

.team-member p {
  font-size: 16px;
  color: #555;
}

/* Values Section */
.values {
  background-color: #f4f4f4;
  padding: 4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.values h1 {
  font-size: 36px;
  margin-bottom: 2rem;
  font-family: var(--primary-font);
}

.values-grid {
  display: flex;
  justify-content: space-around;
}

.value-item {
  max-width: 200px;
}

.value-item h3 {
  font-size: 20px;
  margin-bottom: 1rem;
  font-family: var(--primary-font);
}

.value-item p {
  font-size: 16px;
  color: gray;
  font-family: var(--primary-font);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .hero {
    flex-direction: column;
    text-align: center;
  }

  .hero-content {
    max-width: 100%;
    margin-bottom: 2rem;
  }

  .hero-image img {
    width: 100%;
  }

  .team-grid,
  .values-grid {
    flex-direction: column;
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .mission,
  .team,
  .values {
    padding: 2rem;
  }

  .hero-content h1 {
    font-size: 36px;
  }

  .hero-content p {
    font-size: 18px;
  }

  .team-member,
  .value-item {
    width: 100%;
  }
}

/* contact page */

.contact-page {
  padding: 2rem;
}

.contact-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
  background-color: #f0f8ff;
  border-radius: 12px;
  margin-bottom: 2rem;
}

.hero-content {
  max-width: 50%;
}

.hero-content h1 {
  font-size: 3rem;
  color: #1e3a8a;
  margin-bottom: 1rem;
  font-family: var(--pt-serif-regular);
}

.hero-content p {
  font-size: 1.2rem;
  color: #4a5568;
}

.hero-image img {
  width: 100%;
  max-width: 500px;
}

.contact-details {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3rem;
}

.details-card {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  width: 30%;
  text-align: center;
}

.details-card h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--black-color);
  font-family: var(--primary-font);
}

.details-card p {
  font-size: 1.1rem;
  font-family: var(--primary-font);
  color: #000000;
}

.contact-form-section {
  width: 500px;
  background-color: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  margin-inline: auto;
}

.contact-form {
  display: flex;
  flex-direction: column;
}

.input-group {
  margin-bottom: 1.5rem;
}

.input-group label {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  display: block;
  color: #2d3748;
}

.input-group input,
.input-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 1rem;
}

.input-group input:focus,
.input-group textarea:focus {
  outline: none;
  border-color: #3182ce;
}

.submit-btn {
  background-color: #1e3a8a;
  color: #fff;
  padding: 1rem;
  border: none;
  border-radius: 8px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-btn:hover {
  background-color: #2b6cb0;
}

/* Responsive */
@media (max-width: 768px) {
  .contact-hero {
    flex-direction: column;
  }

  .hero-content {
    max-width: 100%;
    text-align: center;
  }

  .contact-details {
    flex-direction: column;
    align-items: center;
  }

  .details-card {
    width: 100%;
    margin-bottom: 1.5rem;
  }
}

/* DASHBOARD SECTION */

.dashboard-section {
  max-width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;

  /* margin-top: 1rem; */
}

.tab-user-container {
  display: flex;
  gap: 1em;
  padding: 1rem;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dotted rgb(124, 124, 124);
}

.tab-user-container h3 {
  font-family: var(--primary-font);
  font-weight: 400;
  color: rgb(231, 231, 231);
  font-size: 16px;
}

.dashboard-tabs-container {
  width: 300px;
  height: 100%;
  background-color: var(--black-color);
  color: #fff;
  font-family: var(--primary-font);
  overflow: hidden;
}

.dashboard-tabs-container-content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between; /* Ensures even spacing */
  margin-top: 3rem;
}

.dashboard-tabs-link {
  display: flex;
  /* flex-direction: column; */
  gap: 1em;
  align-items: center;
  margin: 10px; /* Adjust spacing as needed */
  flex-basis: 30%; /* Each item takes up 30% of the width */
  cursor: pointer;
  margin: 2rem 10px;
  padding: 0.6rem;
}

.dashboard-tabs-link:hover {
  border-radius: 12px;
  background-color: rgb(96, 52, 255);
}

.dashboard-tabs-link p {
  font-weight: 200;
}

.dashboard-tabs-link img {
  width: 20px;
}

.dashboard-tabs-container-content {
  max-width: 100%; /* Ensures it spans full width */
}

/* Add responsive breakpoints if needed */
@media (max-width: 768px) {
  .dashboard-tabs-link {
    flex-basis: 45%; /* More space per item on smaller screens */
  }
}

.dashboard-content-features {
  background-color: var(--background);
  width: 100%;
  height: 100%;
  box-shadow: 1.1px 1.1px 8.2px rgba(0, 0, 0, 0.028),
    -0.3px -0.3px 19.7px rgba(0, 0, 0, 0.04),
    -3.5px -3.5px 37.1px rgba(0, 0, 0, 0.05),
    -6.1px -6.1px 66.1px rgba(0, 0, 0, 0.06),
    -1px -1px 123.7px rgba(0, 0, 0, 0.072), 100px 100px 296px rgba(0, 0, 0, 0.1);
}

.track-text {
  text-align: left;
  padding: 2rem;
}

.crypto-table-container {
  max-width: 1200px;
  margin: 50px auto;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  font-family: var(--primary-font);
}

.crypto-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.crypto-table th,
.crypto-table td {
  padding: 12px;
  border-bottom: 1px solid #ddd;
}

.crypto-table th {
  background-color: #4caf50;
  color: white;
  font-size: 16px;
}

.crypto-table td {
  font-size: 14px;
  color: #333;
}

.crypto-table tr:hover {
  background-color: #f2f2f2;
}

/* Color styling for percentage change */
.positive {
  color: #4caf50;
  font-weight: bold;
}

.negative {
  color: #ff5733;
  font-weight: bold;
}

/* Responsive styling */
@media (max-width: 768px) {
  .crypto-table-container {
    padding: 10px;
  }

  .crypto-table th,
  .crypto-table td {
    padding: 8px;
    font-size: 12px;
  }

  .crypto-table th {
    font-size: 14px;
  }
}

.tradingview {
  color: blue;
  padding: 1rem;
  margin-top: 2rem;
}

/* LOG IN SECTION */

.sign-in-section {
  max-width: 100%;
  padding: 0 1rem;
}

.login-container {
  position: relative;
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  font-family: var(--primary-font);
}

#registerForm {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
}

.login-container h1 {
  margin-bottom: 20px;
  text-align: center;
  font-family: var(--primary-font);
  font-weight: 400;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  font-weight: 100;
}

label {
  display: block;
  margin-bottom: 5px;
  /* font-weight: light; */
  font-weight: 200;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  border-color: var(--button-outline); /* Change to your desired color */
  outline: none;
}

.login-button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 4px;
  background-color: var(--button-outline); /* Change to your desired color */
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.login-button:hover {
  background-color: #6584da; /* Darken on hover */
}

.register-link {
  text-align: center;
  margin-top: 20px;
}

.register-link a {
  color: var(--black-color); /* Change to your desired color */
  text-decoration: none;
}

.register-link a:hover {
  text-decoration: underline; /* Add underline on hover */
}

/* REGISTER PAGE */

.register-page-container {
  display: flex;
  align-items: center;
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
  justify-content: space-around;
  padding: 2rem 0;
  flex-wrap: wrap;
}

.register-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 500px;
  height: 500px;
  /* margin: 50px auto; */
  padding: 20px;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  font-family: var(--primary-font);
}

.register-text-content {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.register-text-content h1 {
  font-family: var(--primary-font);
  font-weight: 700;
  font-size: 2.3rem;
}

.register-text-content p {
  font-size-adjust: 0.8rem;
  font-family: var(--primary-font);
  color: red;
  font-weight: 600;
}

.register-container h1 {
  margin-bottom: 20px;
  text-align: center;
  font-family: var(--primary-font);
  font-weight: 400;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  border-color: var(--button-outline); /* Change to your desired color */
  outline: none;
}

.register-button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 4px;
  background-color: var(--button-outline); /* Change to your desired color */
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.register-button:hover {
  background-color: #2b6cb0; /* Darken on hover */
}

.login-link {
  text-align: center;
  margin-top: 20px;
}

.login-link a {
  color: var(--black-color); /* Change to your desired color */
  text-decoration: none;
}

.login-link a:hover {
  text-decoration: underline; /* Add underline on hover */
}

/* REGISTER PAGE MOBILE */

@media (max-width: 450px) {
  .register-page-container {
    margin-inline: auto;
    justify-content: space-around;
    padding: 2rem 1rem;
    gap: 2em;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
  }
}

/* DOCS PAGE */

.docs-container {
  display: flex;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.side-nav {
  width: 20%;
  background: #fff;
  padding: 20px;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.side-nav h2 {
  font-size: 18px;
  margin-bottom: 10px;
  font-family: var(--pt-serif-regular);
}

.side-nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--primary-font);
}

.side-nav ul li {
  margin-bottom: 15px;
}

.side-nav ul li a {
  text-decoration: none;
  color: var(--black-color);
  font-weight: bold;
  margin: 3rem 0;
}

.side-nav ul li a:hover {
  color: gray;
}

.docs-content {
  width: 80%;
  padding: 20px;
}

.docs-content section {
  margin: 4rem 0;
}

.docs-content h2 {
  font-size: 22px;
  margin-bottom: 10px;
  font-family: var(--pt-serif-regular);
}

.docs-content p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
  font-family: var(--primary-font);
}