@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Goldman:wght@400;700&display=swap");

:root {
  --blue: #6a77fe;
  --purple: #5944db;
  --lightpurple: #dde0ec;
  --darkpurple: #4c01e6;
  --purplepink: #c397f2;
  --toggleblue: #567dff;
  --black: #000000;
  --background: #f6f6f6;
  --white: #ffffff;
  --togglewhite: #ffffff;
  --toggleblack: #000000;
  --grey: #d9d9d9;
  --togglegrey: #d8d8d8;
  --linegrey: #4e4e4e;
  --shadow: rgba(207, 207, 255, 0.5);
  --innerstroke: #ffffff;
  --strokeblur: rgba(255, 255, 255, 0.67);
  --whiteblur: rgba(255, 255, 255, 0.67);
  --togglewhiteblur: rgba(255, 255, 255, 0.67);
  --inputborder: #e0e0e0;
  --formshadow: rgba(238, 238, 238, 0.5);
  --formblur: rgba(255, 255, 255, 0.87);
  --toggleformblur: rgba(255, 255, 255, 0.87);
  --linkgrey: #7c7c7c;
  --linkblue: #5c80ff;
  --hamburger: #ffffff;
  --hamburgerlink: #6a77fe;
  --contactgrey: #8c8c8c;
  --contactform: #b3b3b3;
  --green: #3ab700;
  --nav-black: #191919;
  --table-green: #00e717;
  --table-dark-green: #00850d;
  --table-red: #ca0000;
  --table-grey: #8c8c8c;
  --table-border-grey: #4e4e4e;
  --table-row-grey: #dddddd;
  --light-red: #ff3232;
  --outline-grey: #b3b3b3;
  --modal-bg-black: #222222;
  --strategy-light-red: #4b4b4b;
  --paragraph-grey: #4b4b4b;
  --active-grey: #d9d9d9;
  --form-select-grey: #d9d9d9;
  --fold-content-bg: #eaeaea;
  --tradings-item-arrow: #1a1a1a;
  --orange: #e97102;
  --dashboard-background: #191919;
  --dashboard-background-mobile: #f6f6f6;
  --dashboard-nav-background: #ffffff;
  --content-container-background: #ffffff;
  --content-container-background-mobile: #f6f6f6;
  --content-container-acc-setting-background: #eaeaea;
  --modal-footer-button: #000000;
  --open-trades-row-grey: #ededed;
  --open-trades-text-grey: #4b4b4b;
  --last-week-container-grey: #eaeaea;
  --referral-overview-membership-grey: #f6f6f6;
  --referral-overview-membership-card: #ffffff;
  --referral-list-table-border: #8c8c8c;
  --referral-list-table-background: #d8d8d8;
  --referral-list-input: #d8d8d8;
  --withdrawal-request-footer: #191919;
  --withdrawal-request-input: #474747;
  --profile-card-background: #d8d8d8;
  --profile-input-background: #eaeaea;

  --download-background-dark: #1a1a1a;
  --question-background-grey: #ebebeb;
  --banner-table: #eaeaea;
  --banner-green-gradient1: rgba(70, 176, 183, 0.42);
  --banner-green-gradient2: rgba(70, 176, 183, 0.09);
  --banner-green-gradient3: rgba(70, 176, 183, 0);
  --banner-gold-gradient1: rgb(250, 212, 21, 0.59);
  --banner-gold-gradient2: rgba(252, 228, 44, 0.08);
  --banner-gold-gradient3: rgba(252, 230, 48, 0);

  --banner-ruby-gradient1: rgba(250, 22, 22, 0.57);
  --banner-ruby-gradient2: rgba(252, 44, 44, 0.1);
  --banner-ruby-gradient3: rgba(252, 48, 48, 0);

  --banner-sapphire-gradient1: rgba(23, 193, 250, 0.56);
  --banner-sapphire-gradient2: rgba(45, 180, 252, 0.08);
  --banner-sapphire-gradient3: rgba(48, 179, 252, 0);

  --banner-emerald-gradient1: rgba(23, 250, 146, 0.56);
  --banner-emerald-gradient2: rgba(45, 252, 195, 0.08);
  --banner-emerald-gradient3: rgba(48, 252, 203, 0);

  --banner-diamond-gradient1: rgba(213, 112, 255, 0.56);
  --banner-diamond-gradient2: rgba(213, 111, 255, 0.08);
  --banner-diamond-gradient3: rgba(213, 111, 255, 0);

  --progress-green: #55cbd2;
  --progress-gold: #ffe100;
  --progress-ruby: #ff0033;
  --progress-sapphire: #00d1ff;
  --progress-emerald: #02ffc2;

  --platinum: #3e3e3e;
  --gold: #b9a300;
  --ruby: #ff0033;
  --sapphire: #00a4c8;
  --emerald: #00a980;
  --diamond: #cd54ff;

  --promotion-dotted: #484848;
  --promotion-dotted-active: #cfcfcf;

  --platinum-title: #647c78;
  --gold-title: #634700;
  --ruby-title: #560d0d;
  --sapphire-title: #1b5269;
  --emerald-title: #196147;
  --diamond-title: #26074e;

  --platinum-title-gradient1: #e7feff;
  --platinum-title-gradient2: #fffdf0;
  --gold-title-gradient1: #f8c501;
  --gold-title-gradient2: #fde833;
  --ruby-title-gradient1: #d8002b;
  --ruby-title-gradient2: #fa4003;
  --sapphire-title-gradient1: #64d5ff;
  --sapphire-title-gradient2: #b1e5ff;
  --emerald-title-gradient1: #00d870;
  --emerald-title-gradient2: #03face;
  --diamond-title-gradient1: #c47de1;
  --diamond-title-gradient2: #687adf;

  --promotion-icon-bg: #ebebeb;
  --platinum-requirement: #edfffe;
  --platinum-requirement-meet: #005257;
  --platinum-requirement-meet-bg: #edfffe;

  --gold-requirement: #fffded;
  --gold-requirement-meet: #998700;
  --gold-requirement-meet-bg: #ffe300;

  --ruby-requirement: #ffeded;
  --ruby-requirement-meet: #ff0033;
  --ruby-requirement-meet-bg: #ff0000;

  --sapphire-requirement: #f0faff;
  --sapphire-requirement-meet: #00a4c8;
  --sapphire-requirement-meet-bg: #2eb2fc;

  --emerald-requirement: #f0fffb;
  --emerald-requirement-meet: #00a980;
  --emerald-requirement-meet-bg: #2efccb;

  --diamond-requirement: #f5edff;

  --promotion-icon: #000000;
  --termsgrey: #8b8b8b;
  --logo-bg: #f0f0f0;
}

[data-bs-theme="light"] {
  --nav-black: #191919;
  --white: #ffffff;
  --black: #000000;
  --table-row-black: #000000;
  --table-row-grey: #dddddd;
  --modal-bg-black: #222222;
  --active-nav-black: #191919;
  --active-grey: #d9d9d9;
  --fold-content-black: #000000;
  --fold-content-bg: #eaeaea;
}

[data-bs-theme="dark"] {
  --background: #000000;
  --nav-black: #ffffff;
  --white: #000000;
  --black: #ffffff;
  --lightpurple: #6a77fe;
  --grey: #ffffff;
  --shadow: rgba(62, 62, 62, 0.5);
  --innerstroke: #484366;
  --strokeblur: #484366;
  --whiteblur: rgba(0, 0, 0, 0.67);
  --inputborder: #bababa;
  --formshadow: rgba(56, 40, 77, 0.5);
  --formblur: rgba(9, 0, 34, 0.74);
  --hamburger: #6a77fe;
  --hamburgerlink: #000000;
  --table-row-grey: #000000;
  --modal-bg-black: #ffffff;
  --strategy-light-red: #ff3232;
  --paragraph-grey: #a7a7a7;
  --active-nav-black: #d9d9d9;
  --active-grey: #191919;
  --form-select-grey: #000000;
  --fold-content-black: #eaeaea;
  --fold-content-bg: #000000;
  --tradings-item-arrow: #d9d9d9;
  --dashboard-background: #f6f6f6;
  --dashboard-background-mobile: #191919;
  --dashboard-nav-background: #191919;
  --content-container-background: #1a1a1a;
  --content-container-background-mobile: #1a1a1a;
  --content-container-acc-setting-background: #1a1a1a;
  --modal-footer-button: #6a77fe;
  --open-trades-row-grey: #3f3f3f;
  --open-trades-text-grey: #8c8c8c;
  --last-week-container-grey: #3f3f3f;
  --referral-overview-membership-grey: #3f3f3f;
  --referral-overview-membership-card: #2c2c2c;
  --referral-list-table-border: #3f3f3f;
  --referral-list-table-background: #000000;
  --referral-list-input: #191919;
  --withdrawal-request-footer: #000000;
  --withdrawal-request-input: #ffffff;
  --profile-card-background: #3f3f3f;
  --profile-input-background: #191919;
  --question-background-grey: #2b2b2b;
  --banner-table: #3f3f3f;
  --promotion-dotted-active: #ffffff;
  --promotion-icon-bg: #303030;
  --promotion-icon: #d8d8d8;
  --platinum: #c8c8c8;
  --platinum-icon-bg: #303030;
  --banner-green-gradient1: rgba(163, 184, 186, 0.47);
  --banner-green-gradient2: rgba(213, 242, 244, 0.07);
  --banner-green-gradient3: rgba(222, 253, 255, 0);

  --platinum-requirement: #172928;
  --platinum-requirement-meet: #47f5ff;
  --platinum-requirement-meet-bg: #292929;

  --gold-requirement: #292717;
  --gold-requirement-meet: #ffe100;
  --gold-requirement-meet-bg: #ffffff;

  --ruby-requirement: #291717;
  --ruby-requirement-meet: #ff0033;
  --ruby-requirement-meet-bg: #ffffff;

  --sapphire-requirement: #172629;
  --sapphire-requirement-meet: #2eb2fc;
  --sapphire-requirement-meet-bg: #ffffff;

  --emerald-requirement: #172924;
  --emerald-requirement-meet: #2efccb;
  --emerald-requirement-meet-bg: #ffffff;

  --diamond-requirement: #1f1729;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

ul {
  text-decoration: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  margin: 0;
}

a {
  text-decoration: none;
  all: unset;
}

body {
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  height: auto;
}

/***** Get Font Family Code From Here!! *****/
/* font-family: "Roboto", sans-serif; */
/* font-family: "Goldman", sans-serif; */
/* Goldman Font only have 400 and 700 boldness */

/* Landing Page */
.landing-body {
  background-color: var(--background);
}

/* Landing Page - Navbar */
.landing-nav {
  background: transparent;
  width: 100%;
  font-family: "Roboto", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px 0px;
  position: absolute;
  z-index: 3;
}

.landing-logo {
  text-align: center;
}

.landing-logo img {
  width: 100%;
  height: auto;
}

.landing-nav ul li {
  display: inline-block;
  /* margin-top: -5px; */
  line-height: 40px;
  cursor: pointer;
}

.landing-nav ul li a {
  color: var(--black) !important;
  font-size: 20px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 3px;
  text-transform: uppercase;
}

.landing-nav ul li a.active,
.landing-nav ul li a:hover {
  color: var(--blue) !important;
  transition: 0.5s;
  cursor: pointer;
}

.checkbtn {
  font-size: 30px;
  color: var(--white);
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}

#check {
  display: none;
}

.landing-switch {
  position: relative;
  display: inline-block;
  width: 65px;
  height: 34px;
  margin-left: 25px;
}

.landing-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.landing-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--blue);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 34px;
}

.landing-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: var(--white);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}

input[name="toggle-switch"]:checked + .landing-slider {
  background-color: var(--togglewhite);
}

#toggle-switch:focus + .landing-slider {
  box-shadow: 0 0 1px var(--toggleblue);
}

#toggle-switch:checked + .landing-slider:before {
  -webkit-transform: translateX(31px);
  -ms-transform: translateX(31px);
  transform: translateX(31px);
  background-color: var(--blue);
}

/* Landing Page - Hero Section */
.hero-section {
  position: relative;
}

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

.landing-hero-container {
  padding: 20px 30px;
}

.landing-hero-top {
  width: auto;
  position: absolute;
  top: 12%;
  left: 9.5%;
}

.landing-hero-title {
  font-family: "Goldman", sans-serif;
  font-size: 75px;
  font-weight: 400;
  width: 70%;
  line-height: 1.1;
  color: var(--black);
}

.landing-hero-top p {
  font-family: "Roboto", sans-serif;
  font-size: 21px;
  font-weight: 300;
  width: 50%;
  color: var(--black);
  line-height: 1.2;
  margin-top: 40px;
}

.landing-hero-btn {
  padding: 7px 10px;
  background: linear-gradient(to right, #5d70ff, #8270ff 68%, #705efe 100%);
  border-radius: 37px;
  width: 300px;
  height: 60px;
  display: flex;
  justify-content: end;
  align-items: center;
  margin-top: 80px;
  cursor: pointer;
}

.landing-hero-btn:hover {
  background: linear-gradient(to right, #8190ff, #8270ff 68%, #7182ff 100%);
  animation: gradient_move 1.5s ease;
}

.landing-hero-btn span {
  color: var(--togglewhite);
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 20px;
}

.landing-hero-btn button {
  background-color: var(--togglewhite);
  border: none;
  color: var(--toggleblack);
  width: 50px;
  height: 50px;
  font-size: 26px;
  line-height: 50px;
  border-radius: 50%;
  margin-left: 30px;
}

@keyframes gradient_move {
  to {
    background-position: 20vw;
  }
}

.landing-hero-bottom {
  position: absolute;
  bottom: 18%;
  right: 17%;
  width: 464px;
}

.landing-hero-bottom h2 {
  font-family: "Roboto", sans-serif;
  font-size: 36px;
  font-weight: 600;
  color: var(--grey);
}

.landing-hero-bottom p {
  font-family: "Roboto", sans-serif;
  font-size: 19px;
  font-weight: 300;
  color: var(--grey);
  margin-top: 23px;
  line-height: 1.2;
}

/* Landing Page - Card Section */
.landing-card-section {
  padding: 50px 20px 80px 20px;
}

.landing-card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 70px 50px;
}

.landing-card-box {
  padding: 30px 20px;
  text-align: center;
  width: 375px;
  height: 360px;
  border-radius: 50px;
  outline: 3px solid var(--innerstroke);
  background-color: var(--white);
  box-shadow: 0px 16px 15px 0px var(--shadow);
}

.landing-card-box svg {
  height: 75px;
}

.landing-card-box svg {
  fill: var(--black);
}

.landing-card-box svg path {
  fill: var(--black);
  stroke: var(--black);
}

.landing-card-box h2 {
  font-family: "Roboto", sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--blue);
  margin-top: 30px;
}

.landing-card-box p {
  font-family: "Roboto", sans-serif;
  font-size: 19px;
  font-weight: 300;
  color: var(--black);
  line-height: 1.2;
  width: 285px;
  margin: 0 auto;
  margin-top: 15px;
}

/* Landing Page - Advantage */
.landing-advantage-section {
  position: relative;
  margin-top: 10px;
  padding-bottom: 40px;
}

.planet-left {
  position: absolute;
  left: 4%;
  bottom: 20%;
  z-index: 4;
  width: 180px;
}

.planet-right {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  width: 310px;
}

.background-planet {
  width: 100%;
  position: absolute;
  z-index: 4;
}

.landing-advantage-container {
  padding: 60px 20px;
  position: relative;
  z-index: 5;
  text-align: center;
}

.landing-common-h2 {
  font-weight: 700;
  font-size: 36px;
  margin-top: 20px;
  margin-bottom: 40px;
  color: var(--black);
  text-align: center;
}

.landing-advantage-row {
  margin-top: 20px;
  background: linear-gradient(
    to right,
    var(--whiteblur) 0%,
    var(--white),
    var(--whiteblur) 95%
  );
  outline: 3px solid var(--strokeblur);
  border-radius: 50px;
  height: 97px;
  align-items: center;
}

.landing-advantage-col:nth-child(1),
.landing-advantage-col:nth-child(2) {
  border-right: 1px solid var(--black);
  height: 40px;
}

.landing-advantage-col {
  gap: 10px;
  padding: 0;
}

.landing-advantage-col img {
  width: 35px;
}

.landing-advantage-col p {
  margin-bottom: 0px;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--black);
}

/* Landing Page - Strategy Section */
.landing-strategy-section {
  position: relative;
  margin-top: 50px;
}

.landing-strategy-background {
  position: absolute;
  z-index: 3;
  width: 100%;
}

.landing-strategy-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  padding: 0px 20px;
}

.landing-strategy-box {
  position: relative;
  z-index: 5;
  width: 360px;
  height: 541px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  padding: 69px 40px 0px 40px;
}

.landing-strategy-box:nth-child(1) {
  background-image: url(../img/strategy-bg1.png);
}

.landing-strategy-box:nth-child(2) {
  background-image: url(../img/strategy-bg2.png);
}

.landing-strategy-box:nth-child(3) {
  background-image: url(../img/strategy-bg3.png);
}

.landing-strategy-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  gap: 25px;
  margin-top: 100px;
}

.landing-strategy-line {
  width: 175px;
  border: 1px solid var(--purple);
}

.landing-strategy-box h2 {
  margin-bottom: 0px;
  font-family: "Roboto", sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--toggleblack);
}

.landing-strategy-box p {
  font-family: "Roboto", sans-serif;
  font-size: 21px;
  font-weight: 400;
  color: var(--purple);
}

/* Landing Page - Loss Section */
.landing-loss-section {
  margin-top: 100px;
}

.landing-loss-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 0px 80px;
  gap: 30px 55px;
}

.landing-loss-box {
  position: relative;
}

.landing-loss-background {
  width: 320px;
  height: auto;
}

.landing-loss-inner {
  position: absolute;
  top: 56%;
  left: 45%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
}

.landing-loss-inner img {
  width: 40px;
}

.landing-loss-inner p {
  margin-bottom: 0px;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--purple);
}

/* Landing Page - Reminder */
.landing-reminder-section {
  padding: 20px;
  margin-top: 150px;
}

.landing-reminder-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;
}

.landing-reminder-left {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.landing-fuel-box {
  position: relative;
}

.landing-fuel {
  width: 90px;
  position: relative;
  z-index: 5;
}

.landing-fuel-title {
  position: absolute;
  top: 0;
  top: 13%;
  left: 67%;
  width: 130px;
}

.landing-fuel-title-bg {
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 3;
  width: 200px;
  height: 30px;
  background-color: var(--lightpurple);
}

.landing-fuel-title h2 {
  position: relative;
  z-index: 4;
  margin-top: -15px;
  margin-left: 40px;
  width: 200px;
  font-family: "Roboto", sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--black);
}

.landing-reminder-left-inner {
  margin-top: 60px;
}

.landing-reminder-left-inner ul {
  list-style-type: disc;
  width: 570px;
}

.landing-reminder-left-inner ul li {
  color: var(--black);
  font-family: "Roboto", sans-serif;
  font-size: 19px;
  font-weight: 400;
  padding: 5px 0px;
}

.landing-reminder-right {
  /*width: 295px;
  height: 179px;
  background-image: url(../img/landing-reminder.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%; */
  position: relative;
  text-align: center;
  width: 295px;
}

.landing-reminder-right-inner {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.landing-reminder-right img {
  width: 100%;
}

.landing-reminder-right h2 {
  color: var(--darkpurple);
  font-family: "Roboto", sans-serif;
  font-size: 34px;
  font-weight: 600;
}

.landing-reminder-right p {
  color: var(--toggleblack);
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 400;
  margin-top: 20px;
  line-height: 1.2;
}

/* Landing Page - Easy Way Section */
.landing-easyway-section {
  padding: 20px 20px 0px 70px;
  margin-top: 100px;
}

.landing-easyway-container {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 110px;
}

.landing-easyway-left {
  width: 570px;
}

.landing-easyway-left img {
  width: 100%;
}

.landing-easyway-right {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
}

.landing-easyway-right h2 {
  color: var(--black);
  font-family: "Roboto", sans-serif;
  font-size: 35px;
  font-weight: 800;
}

.landing-easyway-right p {
  color: var(--black);
  font-family: "Roboto", sans-serif;
  font-size: 21px;
  font-weight: 300;
  line-height: 1.3;
  width: 580px;
  margin-top: 15px;
}

.landing-learnmore-btn {
  padding: 7px 10px;
  background: linear-gradient(
    to right,
    #94bfff,
    #a2c6ff 39%,
    #ffb6e1 74%,
    #bdb8f8 100%
  );
  border-radius: 37px;
  width: 230px;
  height: 59px;
  display: flex;
  justify-content: end;
  align-items: center;
  margin-top: 20px;
  cursor: pointer;
}

.landing-learnmore-btn:hover {
  background: linear-gradient(to right, #ffb6e1, #a2c6ff 50%, #bdb8f8 100%);
  animation: gradient_move2 1.3s;
}

.landing-learnmore-btn span {
  color: var(--togglewhite);
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 20px;
}

.landing-learnmore-btn button {
  background-color: var(--togglewhite);
  border: none;
  color: var(--purplepink);
  width: 50px;
  height: 50px;
  font-size: 26px;
  line-height: 50px;
  border-radius: 50%;
  margin-left: 20px;
}

/* Landing Page - Footer */
.landing-footer-section {
  background-color: var(--toggleblack);
}

.landing-footer-upper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 160px 50px 210px;
}

.landing-footer-logo {
  width: 330px;
}

.landing-footer-logo img {
  width: 100%;
}

.landing-footer-info h2 {
  color: var(--togglewhite);
  font-family: "Roboto", sans-serif;
  font-size: 35px;
  font-weight: 600;
  margin-bottom: 10px;
}

.landing-footer-info p {
  color: var(--togglewhite);
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 200;
  margin-bottom: 0px;
  text-align: right;
}

.landing-footer-container hr {
  width: 100%;
  border: 1px solid var(--togglewhite);
}

.landing-copyright {
  color: var(--togglewhite);
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 200;
  margin-bottom: 0px;
  padding-bottom: 20px;
  text-align: center;
}

@keyframes gradient_move2 {
  to {
    background-position: 230px;
  }
}

.landing-logo-section,
.landing-content-section,
.landing-bullet-section,
.landing-mobile-bottom {
  display: none;
}

/* Registration Page */
.registration-body {
  background-image: url(../img/registration-bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: var(--background);
  height: 100%;
}

.registration-section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-direction: column;
  position: relative;
}

.registration-container {
  margin-top: 70px;
}

.registration-form-container {
  position: relative;
  width: 540px;
  height: 510px;
  background-color: var(--formblur);
  padding: 32px 65px 0px 65px;
  border-radius: 60px;
  box-shadow: 3px 13px 15px 0px var(--formshadow);
  outline: 3px solid var(--white);
  margin-top: 10px;
}

.registration-form-container header {
  color: var(--blue);
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 800;
}

.registration-form .registration-input-box {
  width: 100%;
  margin-top: 20px;
}

.registration-input-box label {
  color: var(--black);
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 300;
}

.registration-form :where(.registration-input-box input, .select-box) {
  position: relative;
  height: 37px;
  width: 100%;
  outline: none;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--black);
  margin-top: 8px;
  border: 0.5px solid var(--inputborder);
  background-color: transparent;
  padding: 0 10px;
}

.registration-input-box input:focus {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

.registration-form {
  margin-top: 10px;
}

.registration-form .column {
  display: flex;
  column-gap: 30px;
}

.registration-form .agreement-box {
  margin-top: 20px;
}

.registration-form :where(.agreement-option, .agreement) {
  display: flex;
  align-items: center;
  column-gap: 50px;
  flex-wrap: wrap;
}

.registration-form .agreement {
  column-gap: 5px;
}

.agreement input {
  accent-color: var(--blue);
}

.registration-form :where(.agreement input, .agreement label) {
  cursor: pointer;
}

.agreement label {
  color: var(--black);
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  font-weight: 300;
}

.registration-form button {
  height: 40px;
  width: 100%;
  color: var(--togglewhite);
  margin-top: 20px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--blue);
  font-family: "Roboto", sans-serif;
  font-size: 17px;
  font-weight: 500;
}

.registration-form button:hover {
  background: var(--darkpurple);
}

.registration-bottom {
  text-align: center;
  margin-top: 15px;
}

.login-link-box,
.enquiry-link-box {
  color: var(--linkgrey);
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 300;
}

.login-link,
.enquiry-link {
  color: var(--linkblue);
  text-decoration: none;
  outline: none;
  cursor: pointer;
  transition: all 0.3s;
}

.login-link:hover,
.enquiry-link:hover {
  color: var(--purplepink);
}

.registration-checkbtn {
  display: block;
  position: relative;
  z-index: 5;
  color: var(--hamburgerlink);
  line-height: 0;
  margin-right: 0px;
  width: 6%;
}

.registration-nav {
  display: block;
  padding: 10px 25px;
  width: 500px;
  left: 50%;
  top: 12.5%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  flex-wrap: wrap;
}

.registration-nav ul {
  position: fixed;
  width: 200px;
  height: 290px;
  background: var(--hamburger);
  top: 2%;
  right: 2%;
  text-align: center;
  transition: all 0.5s;
  border-radius: 15px;
  z-index: 4;
  padding: 40px 0px 0px 0px;
  display: none;
}

.registration-nav ul li {
  display: block;
  margin: 10px 0;
  line-height: 20px;
}

.registration-nav ul li a {
  font-size: 15px;
  padding: 3px;
}

.registration-nav ul li a:hover,
.registration-nav ul li a.active {
  background: none;
  color: var(--hamburgerlink);
}

#check:checked ~ .registration-ul {
  display: block;
}

#check:checked ~ .registration-checkbtn {
  color: var(--toggleblack);
}

.registration-logo {
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  width: 94%;
}

.registration-switch {
  margin-left: 0px;
}

.registration-crafted {
  color: var(--black);
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 300;
  text-align: center;
  margin-top: 15px;
}

.registration-crafted {
  position: absolute;
  bottom: 1%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.registration-title {
  color: var(--black);
  font-family: "Goldman", sans-serif;
  font-size: 27px;
  font-weight: 500;
  margin-bottom: 0px;
  text-align: center;
  margin: 0 auto;
  margin-top: 13px;
}

/* Login Page */
.login-form-container {
  position: relative;
  width: 460px;
  height: 430px;
  background-color: var(--formblur);
  padding: 45px 102px 0px 102px;
  border-radius: 53px;
  box-shadow: 3px 13px 15px 0px var(--formshadow);
  outline: 3px solid var(--white);
  margin-top: 10px;
}

.forget-pwd {
  float: right;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 27px;
  color: var(--blue);
}

.login-section {
  justify-content: center;
}

.login-container {
  margin-top: 0px;
}

/* Email Page */
.email-section {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
}

.email-container {
  width: 700px;
  margin-top: 65px;
}

.email-checkbtn {
  display: none;
}

.email-btn-row {
  background-color: var(--blue);
  padding: 8px 0px;
}

.common-icon {
  background-color: var(--togglewhite);
  border: none;
  color: var(--toggleblue);
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin: 0 auto;
  font-size: 30px;
}

.common-icon img {
  width: 100%;
}

.email-content-row {
  background-color: var(--toggleformblur);
  box-shadow: 3px 13px 15px 0px var(--formshadow);
  outline: 3px solid var(--togglewhite);
  padding: 30px;
  border-radius: 14px;
  text-align: left;
  margin-top: 20px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 390px;
}

.email-content-upper {
  width: 300px;
  margin: 0 auto;
  padding-left: 25px;
}

.email-content-lower {
  width: 300px;
  margin: 0 auto;
  text-align: center;
}

.email-content-upper h2 {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--toggleblue);
}

.email-content-upper p {
  font-family: "Roboto", sans-serif;
  font-size: 11px;
  font-weight: 300;
  color: var(--toggleblack);
  margin-bottom: 10px;
}

.email-content-lower p {
  font-family: "Roboto", sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--toggleblack);
  margin-bottom: 10px;
}

.email-content-lower button {
  border: none;
  background-color: var(--toggleblue);
  color: var(--togglewhite);
  width: 225px;
  height: 32px;
  border-radius: 6px;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  font-weight: 300;
  margin-top: 8px;
}

/* Contact Us */
.contact-nav {
  padding: 10px 25px;
  width: 500px;
  left: 50%;
  top: 15%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
}

hr.nav-hr {
  width: 80%;
  border: 0.7px solid var(--black);
  margin: 0 auto;
  text-align: center;
}

.contact-us-box {
  width: 100%;
  text-align: center;
}

.contact-us-box span {
  font-family: "Roboto", sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--blue);
  line-height: 30px;
}

hr.contact-us-hr {
  width: 100%;
  border: 1px solid var(--linegrey);
  margin: 20px 0px;
  opacity: 0.6;
}

.contact-section {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: auto;
  position: relative;
}

.contact-container {
  width: 700px;
  margin-top: 115px;
}

.contact-content-row {
  background-color: var(--toggleformblur);
  box-shadow: 3px 13px 15px 0px var(--formshadow);
  outline: 3px solid var(--togglewhite);
  padding: 15px 40px 10px 40px;
  border-radius: 14px;
  text-align: left;
  margin-top: 75px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 460px;
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
}

.contact-content-upper h2 {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--toggleblue);
}

hr.contact-content-hr {
  width: 100%;
  border: 1px solid var(--linegrey);
  margin: 10px 0px;
}

.contact-content-upper p {
  font-family: "Roboto", sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--contactgrey);
  margin-bottom: 10px;
}

.contact-content-lower {
  margin-top: -20px;
}

.contact-form :where(.registration-input-box input, .select-box) {
  position: relative;
  height: 37px;
  width: 100%;
  outline: none;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--black);
  margin-top: 8px;
  border: 0.5px solid var(--contactgrey);
  background-color: var(--togglegrey);
  padding: 0 17px;
  border-radius: 3px;
}

.contact-form {
  margin-top: 0px;
}

.contact-form::placeholder {
  color: var(--grey);
}

.contact-form .contact-input-box {
  position: relative;
  z-index: 3;
}

.contact-form .contact-input-box:nth-child(1) {
  margin-top: 0px;
}

.contact-input-box label {
  color: var(--toggleblack);
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 400;
}

.contact-input-box textarea {
  width: 100%;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--toggleblack);
  border: 0.5px solid var(--contactgrey);
  background-color: var(--togglegrey);
  margin-top: 8px;
  padding: 6px 17px;
  border-radius: 3px;
  height: 120px;
  resize: none;
}

.contact-form .common-btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 15px;
  margin-top: 15px;
}

.contact-form .common-btn {
  border: none;
  color: var(--togglewhite);
  width: 225px;
  height: 28px;
  border-radius: 6px;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  font-weight: 300;
  margin-top: 8px;
}

.contact-form .btn-send {
  background-color: var(--green);
}

.contact-form .btn-back {
  background-color: var(--toggleblue);
}

#count {
  position: absolute;
  bottom: 8%;
  right: 2%;
  z-index: 4;
  font-family: "Roboto", sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--contactgrey);
}

#maximum_count {
  margin-left: -3px;
}

/* Fading animation */
.fade {
  animation: fade ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Registration Popup */
#popup-check {
  margin-right: 10px;
  accent-color: var(--purple);
}

.important-reminder-en-title h1 {
  font-family: "Roboto", sans-serif;
}

.important-reminder-en-p p {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
}

.important-reminder-modal .important-reminder-en-body {
  padding: 30px 70px;
}

.registration-popup-btn {
  font-family: "Roboto", sans-serif;
}

/* Email Verified Popup */
.important-reminder-modal .email_verified-body {
  padding: 45px 0px;
}

.email-verified-title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}

.email-verified-title img {
  width: 70px;
  height: auto;
}

.email-verified-title h1 {
  font-family: "Roboto", sans-serif;
  font-size: 19px;
}

.email_verified-p {
  width: 260px;
}

.email_verified-p p {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.2;
  margin: 0px;
}

.popup-done-btn {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 13px;
  width: 220px;
  margin-top: 60px;
}

/* Verify Email Popup */
.important-reminder-modal .verify-email-body {
  height: 300px;
  justify-content: space-between;
}

.verify-email-p p {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.2;
  margin: 0px;
}

/* Left Side Bar Menu */
.layout-menu-navigation-vertical {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 20px;
  width: 300px;
  box-sizing: initial;
  border-bottom-right-radius: 30px;
  background: var(--white);
  transition: width 0.5s;
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll;
}

.layout-menu-navigation-vertical::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}

.layout-menu-navigation-vertical ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-left: 15px;
  padding-top: 40px;
}

.layout-menu-navigation-vertical ul .layout-menu-category {
  font-size: 12px;
  color: var(--blue);
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-left: 10px;
  padding-top: 20px;
}

.layout-menu-navigation-vertical ul li {
  position: relative;
  list-style: none;
  width: 100%;
  border-top-left-radius: 70px;
  border-bottom-left-radius: 70px;
  cursor: pointer;
}

.layout-menu-navigation-vertical ul li .layout-menu-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-menu-navigation-vertical ul li .layout-menu-logo img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.layout-menu-navigation-vertical
  ul
  li
  .layout-menu-logo
  .layout-menu-logo-title {
  color: var(--blue);
  font-size: 16px;
  text-transform: uppercase;
  font-weight: bold;
}

.layout-menu-navigation-vertical ul li.active {
  background: var(--dashboard-background);
}

.layout-menu-navigation-vertical ul li b:nth-child(1) {
  position: absolute;
  top: -20px;
  height: 20px;
  width: 100%;
  background: var(--dashboard-background);
  display: none;
}

.layout-menu-navigation-vertical ul li b:nth-child(1)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-bottom-right-radius: 50px;
  background: var(--white);
}

.layout-menu-navigation-vertical ul li b:nth-child(2) {
  position: absolute;
  bottom: -20px;
  height: 20px;
  width: 100%;
  background: var(--dashboard-background);
  display: none;
}

.layout-menu-navigation-vertical ul li b:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top-right-radius: 50px;
  background: var(--white);
}

.layout-menu-navigation-vertical ul li.active b:nth-child(1),
.layout-menu-navigation-vertical ul li.active b:nth-child(2) {
  display: block;
}

.layout-menu-navigation-vertical ul li a {
  position: relative;
  display: block;
  width: 100%;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--black);
  font-size: 18px;
  padding-left: 20px;
}

.layout-menu-navigation-vertical ul li.active a {
  color: var(--blue);
}

.layout-menu-navigation-vertical ul li a .layout-menu-icon {
  position: relative;
  display: block;
  min-width: 30px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.layout-menu-navigation-vertical ul li a .layout-menu-icon img {
  width: 24px;
  height: 24px;
}

.layout-menu-navigation-vertical ul li a .layout-menu-title {
  position: relative;
  display: block;
  padding-left: 10px;
  height: 60px;
  line-height: 60px;
  white-space: normal;
}

.layout-menu-navigation-vertical ul li button {
  background-color: var(--blue);
  color: #ffffff;
  padding: 10px;
  width: 94%;
  border: none;
  border-radius: 10px;
  margin: 30px 30px 30px 0px;
}

/* Layout Container */
.layout-page {
  padding: 20px 30px 20px 330px;
}

/* Horizontal Nav Bar */
.layout-menu-navigation-horizontal ul {
  font-weight: 500;
  text-transform: uppercase;
}

.layout-menu-navigation-horizontal .layout-nav-list-debug {
  color: var(--blue) !important;
}

.layout-menu-navigation-horizontal .nav-link {
  color: var(--white);
}

.layout-menu-navigation-horizontal .nav-link.show {
  color: var(--white);
}

.layout-menu-navigation-horizontal ul li {
  color: #ffffff;
}

.layout-menu-navigation-horizontal .dropdown-item {
  width: auto;
}

.member-icon {
  width: 20px;
  height: auto;
  margin-top: -3px;
  vertical-align: middle;
}

.member-icon path {
  stroke: var(--white);
}

/* Home Page - Mobile Version */
.home-page-wrapper .table tr td {
  border-bottom: 0 none; /* Remove bottom border for the first row */
}

.home-page-wrapper .robot-trading-tab-1 tr:nth-child(5) td {
  background-color: transparent;
}

/* Robot Trading */
body.dashboard-body {
  background-color: var(--dashboard-background);
  font-family: "Roboto", sans-serif;
}

body.acc-setting-body {
  background-color: #f6f6f6;
  font-family: "Roboto", sans-serif;
}

.content-container-title {
  font-size: 26px;
  margin-bottom: 30px;
  font-family: "Goldman", sans-serif;
  color: var(--white);
  padding-left: 20px;
}

.content-container-card {
  background-color: var(--content-container-background);
  border-radius: 10px;
  padding: 40px 50px;
}

.robot-trading-tab .nav-link {
  cursor: pointer;
}

.robot-trading-tab .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: var(--black);
  background-color: transparent;
  border-color: transparent transparent var(--white);
  border-bottom: 3px solid var(--blue) !important;
  font-size: 20px;
  font-weight: 500 !important;
  padding: 10px 20px;
}

.robot-trading-tab .nav-link {
  border: none;
  color: var(--black);
  font-size: 20px;
  font-weight: 500 !important;
  padding: 10px 20px;
}

.robot-trading-tab .nav-tabs {
  border-color: var(--table-border-grey);
}

.robot-trading-tab .nav-link:hover {
  border: none;
  background-color: transparent;
}

.robot-trading-tab-content {
  margin-top: 20px;
}

.robot-trading-tab .table td,
.robot-trading-tab .table th {
  background-color: transparent;
  color: var(--black);
  border-color: var(--table-border-grey);
}

.robot-trading-tab .table th {
  font-weight: lighter;
  font-size: 18px;
}

.robot-trading-tab .table td {
  padding: 16px 0px;
  font-size: 18px;
}

.robot-trading-live-market-crypto {
  display: flex;
  align-items: center;
}

.robot-trading-live-market-crypto img {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

.robot-trading-live-market-crypto p {
  margin-bottom: 0px;
}

.robot-trading-live-market-change-green {
  border-radius: 5px;
  width: fit-content;
  height: fit-content;
  padding: 2px 10px;
  background-color: var(--table-dark-green);
  font-size: 16px;
  color: #ffffff;
}

.robot-trading-live-market-change-red {
  border-radius: 5px;
  width: fit-content;
  height: fit-content;
  padding: 2px 8px;
  background-color: var(--table-red);
  font-size: 16px;
  color: #ffffff;
}

.robot-trading-live-market-change-grey {
  border-radius: 5px;
  width: fit-content;
  height: fit-content;
  padding: 2px 8px;
  background-color: var(--table-grey);
  font-size: 16px;
  color: #ffffff;
}

.robot-trading-live-market-price-green {
  color: var(--table-green);
}

.robot-trading-live-market-price-grey {
  color: var(--table-grey);
}

.robot-trading-tab .table tr td:nth-child(1) {
  font-weight: 500;
  text-transform: uppercase;
}

.robot-trading-tab-1 .table tr td:nth-child(2) {
  width: 50px;
  text-align: end;
}

.robot-trading-tab-1 .table tr th:nth-child(3),
.robot-trading-tab-1 table tr td:nth-child(3) {
  width: 80px;
  padding-left: 30px;
}

.robot-trading-tab-1 tr:first-child td {
  border-bottom: 0 none; /* Remove bottom border for the first row */
}

.robot-trading-tab-1 tr:nth-child(5) td {
  background-color: var(--table-row-grey);
}

.robot-trading-tab-1 .table tr th {
  font-weight: 300;
}

.robot-trading-live-market-add-new button {
  border-radius: 5px;
  border: none;
  color: #ffffff;
  background-color: var(--blue);
  padding: 5px 0px;
  width: 100%;
}

.robot-trading-warning-msg {
  font-size: 16px;
  font-weight: 500;
  color: var(--light-red);
  text-decoration: underline;
  margin-top: 30px;
}

/* Robot Trading - Active Robot Tab */
.robot-trading-active-robot-status-green {
  color: var(--table-green);
}

.robot-trading-active-robot-status-red {
  color: var(--table-red);
}

.robot-trading-active-robot-status-grey {
  color: var(--table-grey);
}

.robot-trading-active-robot-status-white {
  color: var(--black);
}

.robot-trading-active-robot-edit {
  width: 22px;
  height: 22px;
}

.robot-trading-tab-2 .table tr th {
  font-weight: 300;
}

.robot-trading-tab-2 .table tr th:nth-child(2),
.robot-trading-tab-2 .table tr td:nth-child(2),
.robot-trading-tab-2 .table tr th:nth-child(3),
.robot-trading-tab-2 .table tr td:nth-child(3) {
  text-align: center;
}

.fold-row {
  display: none;
}

.no-border {
  border-bottom: none !important;
}

.fold-content {
  padding: 20px;
  background-color: var(--fold-content-bg);
  width: 100%;
  border-radius: 5px;
}

.fold-content .nav-item {
  width: 300px;
  text-align: center;
  padding-right: 10px;
}

.fold-content .nav-item .nav-link.active {
  background-color: var(--blue);
  border: none;
}

.fold-content .nav-item .nav-link {
  border: 1px solid var(--outline-grey);
  border-radius: 10px;
  background-color: var(--active-grey);
  padding: 5px 0px;
  font-size: 16px;
  text-transform: none;
  font-weight: 400;
}

.paused-active-tab-content {
  margin-top: 30px;
}

.active-tab-pane-row {
  margin-bottom: 20px;
}

.active-tab-pane-row.row-1 .active-tab-pane-col-1 label {
  color: var(--light-red);
  text-transform: none;
  font-weight: 300;
  font-size: 16px;
}

.active-tab-pane-row.row-1 .active-tab-pane-col-2 label {
  color: #037bff;
  text-transform: none;
  font-weight: 300;
  font-size: 16px;
}

.select-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.active-tab-pane-row .form-select {
  appearance: none; /* Hide the default dropdown arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding-right: 30px; /* Add padding to make room for the SVG */
  border: 1px solid var(--outline-grey);
  background-color: var(--form-select-grey);
  background-size: 0px;
  color: var(--black);
}

.active-tab-pane-row .form-select option {
  color: var(--black);
}

.select-container svg {
  position: absolute;
  top: 50%;
  right: 12px; /* Position the SVG inside the container */
  transform: translateY(-50%);
  pointer-events: none; /* Prevent the SVG from interfering with clicking the select */
  stroke: var(--black);
  width: 8px;
  height: auto;
}

.active-tab-pane-row input {
  border: 1px solid var(--outline-grey);
  background-color: var(--form-select-grey);
  color: var(--black);
}

.active-tab-pane-row input::placeholder {
  color: var(--white);
}

.active-tab-pane-row .active-tab-pane-col-1 label {
  color: var(--orange);
  text-transform: none;
  font-weight: 300;
  font-size: 16px;
}

.active-tab-pane-row .active-tab-pane-col-2 label {
  color: #00e717;
  text-transform: none;
  font-weight: 300;
  font-size: 16px;
}

.paused-tab-pane-buttons {
  display: flex;
  flex-direction: column;
}

.paused-tab-pane-buttons button {
  width: 180px;
  border: none;
  border-radius: 10px;
  padding: 3px 0px;
  margin: 10px 0px;
  color: var(--white);
}

.paused-tab-pane-buttons button:nth-child(1) {
  background-color: var(--blue);
}

.paused-tab-pane-buttons button:nth-child(2) {
  background-color: #ce2e2e;
}

.active-tab-pane-buttons {
  display: flex;
  flex-direction: column;
}

.active-tab-pane-buttons button {
  width: 180px;
  border: none;
  border-radius: 10px;
  padding: 8px 0px;
  margin: 10px 0px;
  color: #ffffff;
}

.active-tab-pane-buttons button:nth-child(1) {
  background-color: #037bff;
}

.active-tab-pane-buttons button:nth-child(2) {
  background-color: #ce2e2e;
}

.paused-tab-pane-row label {
  text-transform: none;
  font-weight: 500;
  font-size: 16px;
  color: var(--open-trades-text-dark-grey);
}

.paused-tab-pane-row input {
  border: 1px solid var(--outline-grey);
  background-color: var(--fold-content-bg);
  color: var(--black);
  width: 100%;
}

/* .paused-tab-pane-row .form-select {
    border: 1px solid var(--outline-grey);
    background-color: var(--active-nav-black);
    color: var(--white);
    background-size: 8px auto;
    background-image: url("../img/down-dropdown.png");
} */

.paused-tab-pane-row .form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  border: 1px solid var(--outline-grey);
  background-color: var(--fold-content-bg);
  background-size: 0px;
  color: var(--black);
}

.paused-tab-pane-row .form-select option {
  color: var(--black);
}

.paused-tab-pane-row input::placeholder {
  color: var(--black);
}

.paused-tab-pane-row button {
  background-color: var(--blue);
  width: fit-content;
  height: fit-content;
  border: none;
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  padding: 8px 30px;
}

/* 重要提醒 Pop Up Modal*/
.important-reminder-modal .modal-body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 30px 0px;
}

.important-reminder-modal .important-reminder-modal-title {
  color: var(--blue);
}

.important-reminder-modal-title {
  display: flex;
  align-items: center;
}

.important-reminder-modal-title h1 {
  font-size: 26px;
  font-weight: bolder;
  color: var(--darkpurple);
}

.important-reminder-modal-title img {
  width: 26px;
  height: 26px;
  margin: 0px 6px;
}

.important-reminder-modal-content p {
  margin: 6px 0px;
  font-size: 18px;
  text-align: center;
}

.important-reminder-modal-button {
  width: 80px;
  border: none;
  border-radius: 5px;
  background-color: var(--blue);
  color: var(--white);
  font-size: 16px;
  padding: 4px 0px;
  margin-top: 14px;
}

/* Robot Setting Pop Up Modal*/
.robot-setting-modal .modal-content {
  background-color: var(--content-container-background);
  padding: 20px 15px;
}

.robot-setting-modal .modal-title {
  color: var(--blue);
}

.robot-setting-modal .modal-header {
  border-bottom: 0 none;
}

.robot-setting-modal .modal-footer {
  border-top: 0 none;
}
.robot-setting-modal .modal-body {
  color: var(--black);
}

.robot-setting-modal .btn-close {
  color: var(--white);
  background-color: #000000;
  border-radius: 50px;
  border: 2px solid #ffffff;
  background-size: 12px;
  background-image: url("../img/modal-close.png");
  opacity: 1;
}

.robot-setting-modal .robot-strategy-container {
  display: flex;
  align-items: start;
}

.robot-setting-modal .robot-strategy-container h4 {
  font-size: 18px;
  margin-bottom: 20px;
}

.robot-setting-modal .robot-strategy-container p {
  font-size: 14px;
  font-weight: 400;
  color: var(--paragraph-grey);
}

.robot-setting-modal .robot-strategy-container span {
  color: var(--strategy-light-red);
  font-weight: bold;
}

.robot-setting-modal .robot-strategy-container select {
  border: 1px solid var(--outline-grey);
  border-radius: 5px;
  background-color: #ffffff;
  color: #000000;
  background-size: 8px auto;
}

.robot-setting-modal .active-tab-pane-buttons button {
  background-color: var(--blue);
}

.robot-setting-modal .active-tab-pane-row .form-select {
  appearance: none; /* Hide the default dropdown arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding-right: 30px; /* Add padding to make room for the SVG */
  border: 1px solid var(--outline-grey);
  background-color: #ffffff;
  background-size: 0px;
  color: #000000;
}

.robot-setting-modal .select-container svg {
  position: absolute;
  top: 50%;
  right: 12px; /* Position the SVG inside the container */
  transform: translateY(-50%);
  pointer-events: none; /* Prevent the SVG from interfering with clicking the select */
  stroke: #000000;
  width: 8px;
  height: auto;
}

.robot-setting-modal .active-tab-pane-row input {
  border: 1px solid var(--outline-grey);
  background-color: #ffffff;
  color: #000000;
}

.modal-footer-close-button {
  margin: 0 auto;
  width: 93%;
  background-color: var(--modal-footer-button);
  color: #ffffff;
  text-transform: uppercase;
  font-size: 12px;
  border: none;
  border-radius: 10px;
  padding: 8px 0px;
}

.robot-setting-modal.modal-bot-2 .paused-tab-pane-row input {
  background-color: #ffffff;
  color: #000000;
}

.robot-setting-modal.modal-bot-2 .paused-tab-pane-row .form-select {
  background-color: #ffffff;
  color: #000000;
}

.robot-setting-modal.modal-bot-2 .paused-tab-pane-row .form-select option {
  color: #000000;
}

/* Footer */
.dashboard-footer .footer-left,
.dashboard-footer .footer-right {
  color: var(--table-grey);
  font-size: 18px;
}

.dashboard-footer .footer-left {
  display: flex;
}

.dashboard-footer .footer-left-first {
  padding-right: 10px;
}

.dashboard-footer .footer-left span {
  text-decoration: underline;
}

/* Topbar */
.topbar-section {
  display: none;
  background-color: var(--blue);
  color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.topbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin: 0 auto;
  padding: 50px 20px 8px 20px;
}

.topbar-left-small {
  width: 10px;
  position: absolute;
  left: 10%;
  bottom: 8%;
  font-size: 18px;
  cursor: pointer;
  color: #ffffff;
}

.topbar-left {
  font-size: 24px;
  width: 55px;
  text-align: left;
}
.topbar-right {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
}

.topbar-language a {
  font-size: 16px;
}

.topbar-center-home {
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.bottom-nav-bar-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: transparent;
  z-index: 100;
  transition: 0.4s;
}

.bottom-nav-bar-header .nav-container {
  height: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bottom-nav-bar-header .nav-menu {
  position: fixed;
  bottom: 0;
  /* left: 0; */
  background-color: var(--blue);
  box-shadow: 0 -1px 12px hsla(174, 63%, 15%, 0.15);
  border-radius: 0px;
  height: 4.6rem;
  padding: 0 0.5rem;
  display: grid;
  align-content: center;
  /* transition: 0.4s; */
  width: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

.bottom-nav-bar-header .nav-list,
.bottom-nav-bar-header .nav-link {
  display: flex;
}

.bottom-nav-bar-header .nav-link {
  flex-direction: column;
  align-items: center;
  row-gap: 0.25rem;
  color: var(--white);
}

.bottom-nav-bar-header .nav-link span {
  font-size: 12px;
}

.bottom-nav-bar-header .nav-list {
  justify-content: space-around;
}

.bottom-nav-bar-header .nav-name {
  font-size: 10px;
}

.bottom-nav-bar-header .nav-link.active path,
.bottom-nav-bar-header .nav-link path {
  fill: #ffffff;
}

.bottom-nav-bar-header .nav-link.active span,
.bottom-nav-bar-header .nav-link span {
  color: #ffffff;
}

/* No News Found */
.no-news-container .content-container-card {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
}

.no-news-tab {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.no-news-tab img {
  width: 48px;
  height: 48px;
}

.no-news-tab p {
  color: var(--table-border-grey);
  font-weight: 500;
}

/* Tradings Item */
.tradings-tab-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

hr.tradings-tab-line {
  border-top: 1px solid var(--table-grey);
  opacity: 1;
}
.tradings-tab-title {
  display: flex;
  align-items: center;
}

.tradings-tab-title h4 {
  color: var(--blue);
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 400;
}

.tradings-tab-title img {
  width: 30px;
  height: 30px;
  margin-right: 14px;
}

.tradings-container .content-container-card {
  padding: 40px 30px;
}

/* Dark Mode */
.dark-mode-container .theme-color-mode-container {
  display: flex;
  align-items: center;
}

.dark-mode-container .content-container-title {
  padding: 0px 30px;
}

.dark-mode-container .content-container-card {
  background-color: transparent;
  padding: 10px 30px;
}

.dark-mode-container .radio-container {
  width: 50%;
}

.dark-mode-container .radio-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #b3b3b3;
  position: relative;
}

.dark-mode-container .radio-option:last-child {
  border-bottom: none;
}

.dark-mode-container label {
  font-size: 16px;
  cursor: pointer;
  color: var(--white);
}

.dark-mode-container .radio-input-container {
  display: flex;
  align-items: center;
  padding-left: 50px;
}

.dark-mode-container .radio-input-container .form-check-input {
  border: 2px solid #b3b3b3;
  position: relative;
  background-color: #ffffff;
}

.dark-mode-container .radio-input-container .form-check-input:checked {
  background-color: #00e717;
  border: #00e717;
}

.dark-mode-container .radio-label-multiline .description {
  font-size: 10px;
  color: #888;
  margin-top: 5px;
}

.dark-mode-container .radio-label-multiline {
  display: flex;
  flex-direction: column;
}

/* Robot Setup */
.robot-setup-container h2 {
  color: var(--blue);
  font-size: 20px;
}

.robot-setup-container .paused-tab-pane-row input {
  width: auto;
}

.robot-setup-container .paused-tab-pane-row label {
  color: var(--black);
}

hr.robot-setup-title-hr {
  width: 100%;
  border: 1px solid #4e4e4e;
  margin: 20px 0px;
}

.robot-setup-container button {
  color: #ffffff;
  background-color: var(--blue);
  width: 330px;
  border: none;
  border-radius: 10px;
  padding: 8px;
  margin-top: 10px;
  margin-bottom: 50px;
}

.robot-setup-container .link-step h3 {
  color: var(--black);
  font-size: 16px;
}

.robot-setup-container .link-step p {
  margin-bottom: 0px;
  color: #ff3232;
  font-size: 16px;
  font-weight: 300;
}

.robot-setup-container .link-step span {
  color: #357aff;
  font-weight: 500;
  text-decoration: underline;
}

.robot-setup-container .coin-balance {
  margin-top: 50px;
}

.robot-setup-container .coin-balance h3 {
  color: var(--blue);
  font-size: 16px;
}

.robot-setup-container .coin-balance table {
  border-collapse: collapse;
  width: 300px;
}

.robot-setup-container .coin-balance td,
.robot-setup-container .coin-balance th {
  border: 1px solid var(--black);
  text-align: left;
  padding: 2px 8px;
}

.robot-setup-container .coin-balance td:nth-child(1) {
  color: var(--orange);
}

.robot-setup-container .coin-balance tr td.table-row-text-green {
  color: #00e717;
}

.robot-setup-container .coin-balance tr td.table-row-text-red {
  color: #ce2e2e;
}

.robot-setup-container .coin-balance tr {
  background-color: transparent;
}

/* Open Trades */
.open-trades-container .content-container-card {
  padding: 30px 20px 40px 20px;
}

.open-trades-container .table {
  border-collapse: separate;
  border-spacing: 0 4px;
}

.open-trades-container .table tr th,
.open-trades-container .table tr td {
  border-bottom: 0 none;
}

.open-trades-container .table tr th {
  background-color: transparent;
  color: var(--black);
  font-weight: 300;
}

.open-trades-container .table tr td {
  background-color: var(--open-trades-row-grey);
  color: var(--black);
  font-weight: 300;
  padding: 10px;
}

.open-trades-container .table tr td:nth-child(1) {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  width: 100px;
  font-weight: bold;
}

.open-trades-container .table tr td:nth-child(2) {
  font-weight: bold;
}

.open-trades-container .table tr td:nth-child(3) {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  width: 100px;
  font-weight: 400;
}

.open-trades-container .table tr th,
.open-trades-container .table tr td {
  text-align: center;
}

.open-trades-container .third-col-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.open-trades-container .third-col-flex:nth-child(1) {
  justify-content: end;
}

.open-trades-container .open-trades-text {
  display: flex;
  justify-content: space-between;
}

.open-trades-container .open-trades-text p {
  margin-bottom: 0px;
  font-weight: bold;
  color: var(--open-trades-text-grey);
}

/* Trading History */
.trading-history-container .content-container-card {
  min-height: 580px;
  padding: 40px 35px;
}

.trading-history-tab .nav-pills {
  margin-bottom: 30px;
}

.trading-history-tab .nav-link.active {
  background-color: var(--blue);
}

.trading-history-tab .nav-link {
  background-color: #ffffff;
  color: #000000;
  padding: 2px 14px;
  margin-right: 10px;
  cursor: pointer;
  font-size: 18px;
}

.trading-history-tab .trading-history-tab-content h1 {
  font-size: 24px;
  color: var(--black);
}

.last-week-tab-container {
  background-color: var(--last-week-container-grey);
  padding: 15px;
  margin-top: 10px;
  border-radius: 10px;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.last-week-tab-container-first-row {
  display: flex;
  justify-content: space-between;
}

.last-week-tab-container-first-row-first-col {
  display: flex;
  align-items: center;
  gap: 10px;
}

.last-week-tab-container-first-row-first-col h2 {
  font-size: 22px;
  color: var(--black);
  font-weight: 400;
}

.last-week-tab-container-first-row-first-col h4 {
  font-size: 16px;
  color: #cd1010;
}

.last-week-tab-container-first-row h3 {
  font-size: 20px;
  color: var(--black);
  font-weight: 300;
}

.last-week-tab-container-second-row {
  display: flex;
  justify-content: space-between;
}

.last-week-tab-container-second-row-first-col {
  width: 150px;
  display: flex;
  justify-content: space-between;
}

.last-week-tab-container-second-row-first-col h3 {
  font-size: 20px;
  font-weight: 300;
  color: var(--black);
}

.last-week-tab-container-second-row-second-col {
  display: flex;
  align-items: center;
  gap: 10px;
}

.last-week-tab-container-third-out {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

.last-week-tab-container-third-out p {
  color: var(--open-trades-text-grey);
  font-size: 20px;
  font-weight: bold;
}

.custom-search-tab-pane-form {
  padding-left: 40px;
  margin-bottom: 30px;
}

.custom-search-tab-pane .form-select {
  appearance: none; /* Hide the default dropdown arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding-right: 30px; /* Add padding to make room for the SVG */
  background-color: var(--form-select-grey);
  background-size: 0px;
  border: none;
  color: var(--black);
}

.custom-search-tab-pane input {
  appearance: none; /* Hide the default dropdown arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding-right: 8px; /* Add padding to make room for the SVG */
  background-color: var(--form-select-grey);
  background-size: 0px;
  border: none;
  color: var(--black);
}

.custom-search-tab-pane button {
  background-color: var(--blue);
  padding: 10px;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  width: 100%;
}

/* Referral Overview */
.acc-setting-body .content-container-title {
  color: #000000;
}

.acc-setting-body .layout-menu-navigation-horizontal .nav-link {
  color: #000000;
}

.acc-setting-body .layout-menu-navigation-horizontal .nav-link.show {
  color: #000000;
}

.acc-setting-body .member-icon path {
  stroke: #000000;
}

.acc-setting-body .layout-menu-navigation-horizontal ul li {
  color: #ffffff;
}

.acc-setting-body .content-container-card {
  background-color: var(--content-container-acc-setting-background);
  padding: 20px;
}

.referral-overview-container .content-container-card {
  background-color: var(--content-container-background-mobile);
  padding: 20px;
}

.referral-overview-first-row-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "hits referral earning";
  gap: 1rem;
  margin-bottom: 20px;
}

.referral-overview-first-row-card.card-1 {
  grid-area: hits;
}

.referral-overview-first-row-card.card-2 {
  grid-area: referral;
}

.referral-overview-first-row-card.card-3 {
  grid-area: earning;
}

.referral-overview-first-row-card {
  display: flex;
  align-items: center;
  background-color: var(--last-week-container-grey);
  padding: 10px;
  border-radius: 10px;
}

.referral-overview-first-row-card-width {
  width: 100%;
}

.referral-overview-first-row-card img {
  width: 70px;
  height: 70px;
  margin-right: 20px;
}

.referral-overview-first-row-card h2 {
  font-size: 20px;
  color: var(--blue);
  margin-bottom: 0;
}

hr.referral-overview-first-row-hr {
  margin: 0px 0px 6px 0px;
}

.referral-overview-first-row-card h1 {
  font-size: 24px;
  color: var(--black);
  margin-bottom: 0;
}

.referral-overview-first-row-card p {
  font-size: 12px;
  color: #8c8c8c;
  margin-bottom: 0;
}

.referral-overview-second-row-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "account account sponsor"
    "account account recent"
    "account account .";
  gap: 1rem;
}

.referral-overview-second-row-card.card-1 {
  grid-area: account;
}

.referral-overview-second-row-card.card-2 {
  grid-area: sponsor;
}

.referral-overview-second-row-card.card-3 {
  grid-area: recent;
}

.referral-overview-second-row-card {
  display: flex;
  align-items: center;
  background-color: var(--last-week-container-grey);
  padding: 26px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.referral-overview-second-row-card {
  display: block;
}

.referral-overview-second-row-card hr {
  margin: 10px 0px;
  border: 1px solid #4e4e4e;
  opacity: 0.5;
}

.referral-overview-second-row-card h4 {
  color: #b9b9b9;
  font-size: 12px;
}

.referral-overview-second-row-card h2 {
  color: var(--black);
  font-size: 16px;
}

.account-overview-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.account-overview-title h1 {
  font-size: 24px;
  color: var(--blue);
  margin-bottom: 0px;
}

.account-overview-title .title-tag {
  border: none;
  border-radius: 15px;
  font-size: 16px;
  color: #ffffff;
  padding: 2px 10px;
  background-color: #3ab700;
}

.account-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "account1"
    "account2"
    "account3";
}

.account-detail-grid-1 {
  grid-area: account1;
}

.account-detail-grid-2 {
  grid-area: account2;
}

.account-detail-grid-3 {
  grid-area: account3;
}

.account-detail-grid-1 img {
  margin-bottom: 30px;
}

.shorten-url .title-tag {
  border: none;
  border-radius: 15px;
  font-size: 16px;
  color: #ffffff;
  padding: 2px 10px;
  background-color: #e97102;
  width: fit-content;
}

.account-detail-grid-mobile-line {
  display: none;
}

.title-tag-wrapper {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 2px;
}

.referral-overview-second-row-card.card-2 h4 {
  margin-bottom: 0px;
  color: #b9b9b9;
  font-size: 12px;
}

.referral-overview-second-row-card.card-2 h2 {
  margin-bottom: 0px;
  color: var(--black);
  font-size: 16px;
}

.referral-overview-second-row-card.card-2 h5 {
  margin-bottom: 0px;
  color: #b9b9b9;
  font-size: 10px;
  margin-bottom: 0px;
}

.my-sponsor-member {
  display: flex;
  align-items: start;
}

.my-sponsor-member img {
  margin-right: 20px;
}

.sponsor-member-details {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.sponsor-member-details svg {
  margin-right: 4px;
}

.referral-overview-second-row-card.card-3 .title-tag {
  background-color: #037bff;
}

.referral-overview-second-row-card.card-3 .no-record-found {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.referral-overview-second-row-card.card-3 h4 {
  font-size: 13px;
  font-weight: 500;
}

.referral-overview-second-row-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "account account sponsor"
    "account account recent"
    "account account .";
  gap: 1rem;
}

.referral-overview-third-row-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 500px;
  grid-template-areas: "performance performance .";
  gap: 1rem;
}

.referral-overview-third-row-card.card-1 {
  grid-area: performance;
}

.referral-overview-third-row-card {
  align-items: center;
  background-color: var(--last-week-container-grey);
  padding: 26px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.referral-overview-third-row-card .third-row-card-hr,
.referral-overview-fourth-row-card .fourth-row-card-hr {
  margin: 10px 0px;
  border: 1px solid #4e4e4e;
  opacity: 0.5;
}

.referral-overview-fourth-row-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "membership membership .";
  gap: 1rem;
}

.referral-overview-fourth-row-card {
  align-items: center;
  background-color: var(--referral-overview-membership-grey);
  padding: 26px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.referral-overview-fourth-row-card.card-1 {
  grid-area: membership;
}

.membership-transaction {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--referral-overview-membership-card);
  padding: 44px 0px;
  border-radius: 10px;
  gap: 24px;
}

.membership-transaction-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.membership-transaction-1-info {
  display: flex;
  align-items: end;
  gap: 10px;
}

.membership-info-col {
  display: flex;
  align-items: end;
}

.membership-info-col svg {
  margin-bottom: 6px;
}

.membership-transaction-1 h4 {
  font-size: 12px;
  color: #b9b9b9;
  margin-bottom: 0px;
  margin-top: 6px;
  font-weight: 400;
}

.membership-info-col h2 {
  font-size: 24px;
  color: var(--black);
  margin-bottom: 0px;
}

.membership-info-col h3 {
  font-size: 18px;
  color: var(--black);
  margin-bottom: 0px;
}

.membership-transaction-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.membership-transaction-2 h1 {
  font-size: 26px;
  color: var(--black);
}

.membership-transaction-2 h4 {
  font-size: 12px;
  color: #4870ff;
  font-weight: 300;
  margin-top: 10px;
}

h4.membership-register {
  font-size: 12px;
  color: #b9b9b9;
  margin-top: 20px;
}

.membership-register span {
  color: var(--black);
}

.membership-annual-fee {
  display: flex;
  align-items: start;
  gap: 20px;
  margin-top: 20px;
}

.membership-annual-fee img {
  width: 40px;
  height: 40px;
}

.membership-annual-fee h3 {
  font-size: 16px;
  color: var(--black);
  font-weight: bold;
}

.membership-annual-fee h4 {
  font-size: 12px;
  color: #b9b9b9;
}

.membership-register-text {
  margin-top: 20px;
}

.membership-annual-fee .text-tag {
  background-color: var(--blue);
  font-size: 12px;
  color: #ffffff;
  border-radius: 10px;
  padding: 0px 8px;
}

/* Referral List */
.find-referral-title h1 {
  font-size: 24px;
  color: var(--blue);
  margin-bottom: 0px;
}

.referral-list-container hr {
  margin: 10px 0px;
  border: 1px solid #4e4e4e;
  opacity: 0.5;
}

.first-name-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

.first-name-grid label {
  font-size: 20px;
  color: var(--black);
}

.first-name-grid input {
  border: 1px solid #b3b3b3;
  background-color: var(--referral-list-input);
  color: var(--black);
}

.find-name-grid input::placeholder {
  color: #474747;
}

.find-referral-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.find-referral-title .select-container {
  position: relative;
  display: inline-block;
  width: fit-content;
}

.find-referral-title .form-select {
  appearance: none; /* Hide the default dropdown arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding-right: 30px; /* Add padding to make room for the SVG */
  border: none;
  border-radius: 50px;
  background-color: #037bff;
  background-size: 0px;
  color: #ffffff;
}

.find-referral-title .select-container svg {
  position: absolute;
  top: 50%;
  right: 14%; /* Position the SVG inside the container */
  transform: translateY(-50%);
  pointer-events: none; /* Prevent the SVG from interfering with clicking the select */
  stroke: #ffffff;
  width: 8px;
  height: auto;
}

.referral-list-button-group {
  display: flex;
  align-items: center;
  margin-top: 40px;
  justify-content: end;
}

.referral-list-button-group button:nth-child(1) {
  padding: 6px;
  border: none;
  background-color: #e97102;
  border-radius: 3px;
  color: #ffffff;
  margin-right: 10px;
}

.referral-list-button-group button:nth-child(2) {
  padding: 6px;
  border: none;
  background-color: #037bff;
  border-radius: 3px;
  color: #ffffff;
}

.referral-list-button-group button i {
  margin-right: 4px;
}

.referral-list-table .table {
  margin: 0;
}

.referral-list-table svg {
  height: 14px;
  width: auto;
}

.referral-list-table .table tr th {
  background-color: var(--referral-list-table-border);
  color: #ffffff;
}

.referral-list-table .table tr td {
  text-align: center;
  background-color: var(--referral-list-table-background);
  padding: 20px 0px;
}

.referral-list-table p {
  margin-bottom: 0px;
}

.referral-list-table {
  border-bottom: 20px solid var(--referral-list-table-border);
  border-top: 3px solid var(--referral-list-table-border);
  border-radius: 3px;
  margin-top: 40px;
}

.referral-list-table .table-filter {
  display: flex;
  align-items: center;
}

.referral-list-table.table-mobile-ver {
  display: none;
}

/* Withdraw Request */
.withdrawal-request-container .content-container-card {
  padding: 0px;
}

.withdrawal-request-container .find-referral-title {
  padding: 40px 50px 0px 50px;
}

.withdrawal-request-container hr {
  margin: 10px 50px;
}

.withdrawal-request-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "pendingInfo accountInput";
  gap: 1rem;
  padding: 0px 50px;
  margin-top: 40px;
}

.withdrawal-request-detail-grid .detail-grid-1 {
  grid-area: pendingInfo;
}

.withdrawal-request-detail-grid .detail-grid-2 {
  grid-area: accountInput;
}

.withdrawal-request-detail-grid p {
  font-size: 16px;
  color: var(--black);
  margin-bottom: 0px;
}

.withdrawal-request-footer {
  background-color: var(--withdrawal-request-footer);
  color: #f53b3b;
  padding: 10px 50px;
  margin-top: 30px;
  border-radius: 3px;
  font-size: 14px;
}

.withdrawal-request-input-button-group {
  display: flex;
  align-items: center;
  margin-top: 30px;
  justify-content: end;
}

.withdrawal-request-input-button-group button:nth-child(1) {
  padding: 6px;
  border: none;
  background-color: #ca0000;
  border-radius: 3px;
  color: #ffffff;
  margin-right: 10px;
}

.withdrawal-request-input-button-group button:nth-child(2) {
  padding: 6px;
  border: none;
  background-color: #037bff;
  border-radius: 3px;
  color: #ffffff;
}

.withdrawal-request-input-button-group button svg {
  margin-right: 4px;
}

.withdrawal-request-detail-grid .detail-grid-2 input,
.withdrawal-request-detail-grid .detail-grid-2 span {
  border: 1px solid #b3b3b3;
  background-color: var(--referral-list-input);
  color: var(--withdrawal-request-input);
}

.withdrawal-request-detail-grid .detail-grid-2 input::placeholder {
  color: #474747;
}

/* Genealogy View */
.genealogy-view-button-group {
  display: flex;
  align-items: center;
}

.genealogy-view-button-group .genealogy-reset {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border: none;
  background-color: #e97102;
  border-radius: 3px;
  color: #ffffff;
  margin-right: 10px;
}

.genealogy-view-button-group .genealogy-reset i {
  margin-right: 4px;
}

.genealogy-view-button-group .input-group button:nth-child(1) {
  background-color: #3ab700;
  color: #ffffff;
  border-radius: 3px;
}

.genealogy-view-button-group .input-group button:nth-child(2) {
  background-color: #6c757d;
  color: #ffffff;
}

.genealogy-view-member-card {
  background-color: var(--referral-list-input);
  border: 1px solid #717171;
  border-radius: 10px;
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.genealogy-view-member-card .genealogy-view-member-center {
  background-color: #ffffff;
  padding: 10px 20px;
  border-radius: 3px;
  text-align: center;
  width: fit-content;
  height: fit-content;
}

.genealogy-view-member-card .genealogy-view-member-center p {
  margin-bottom: 0px;
  text-transform: uppercase;
  font-size: 16px;
  color: var(--blue);
}

.genealogy-view-button-group.mobile-ver-btn {
  justify-content: end;
  margin-top: 20px;
  display: none;
}

.genealogy-view-button-group.mobile-ver-btn .genealogy-reset {
  margin-right: 0px;
  margin-left: 20px;
}

.genealogy-view-button-group.mobile-ver-btn .input-group {
  width: auto;
}

/* Profile */
.profile-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 0.5fr;
  grid-template-rows: 0.2fr 0.4fr 1fr;
  grid-template-areas:
    "member options options"
    "settings options options"
    ". options options";
  gap: 1rem;
}

.profile-card-grid-1 {
  grid-area: member;
}

.profile-card-grid-2 {
  grid-area: settings;
}

.profile-card-grid-3 {
  grid-area: options;
}

.profile-card-grid h1 {
  color: var(--blue);
  font-size: 20px;
}

.profile-card-grid hr {
  margin: 15px 0px 15px 0px;
}

hr.first-name-front-hr,
hr.about-me-last-hr {
  display: none;
}

.profile-card-grid-1,
.profile-card-grid-2,
.profile-card-grid-3 {
  background-color: var(--profile-card-background);
  border-radius: 3px;
  padding: 20px;
}

.profile-button-group-mobile-ver {
  display: none;
}

.profile-card-grid-1-member {
  text-align: center;
}

.profile-card-grid-1-member .member-names h5 {
  display: none;
}

.profile-card-grid-1-member p {
  font-size: 15px;
  color: var(--black);
  margin-bottom: 0px;
}

.profile-card-grid-2 .profile-settings-list h3:first-child {
  border-radius: 3px;
  width: 100%;
  padding: 4px 8px;
  background-color: var(--blue);
  color: #ffffff;
  font-size: 18px;
  font-size: 400;
}

.profile-card-grid-2 h3 {
  border-radius: 3px;
  width: 100px;
  padding: 4px 8px;
  color: var(--black);
  font-size: 18px;
  font-weight: 400;
}

.profile-card-grid-3 p {
  font-size: 12px;
  color: #8c8c8c;
}

.profile-inputs-form .form-check-input {
  height: 1.5em;
  width: 3em;
}

.profile-inputs-form .form-check-input:checked {
  background-color: var(--blue);
}

.profile-inputs-form label {
  color: var(--black);
}

.profile-inputs-form label span {
  color: var(--blue);
  border: none;
  background-color: transparent;
}

.profile-inputs-form input,
.profile-inputs-form .form-select,
.profile-inputs-form span,
.profile-inputs-form textarea {
  background-color: var(--profile-input-background);
  border: 1px solid #b3b3b3;
}

.profile-inputs-form i {
  color: var(--blue);
}

.profile-button-group {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.profile-button-group button {
  border: none;
  border-radius: 20px;
  padding: 4px 10px;
  color: #ffffff;
}

.profile-button-group button:nth-child(1) {
  background-color: #e97102;
}

.profile-button-group button:nth-child(2) {
  background-color: #3ab700;
}

.profile-button-group i {
  margin-right: 2px;
  color: #ffffff;
}

.profile-button-group-mobile-ver {
  display: none;
}

.feedback-container .profile-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 0.5fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "contact feedback feedback"
    ". feedback feedback";
  gap: 1rem;
}

.feedback-container .profile-card-grid-1 {
  grid-area: contact;
}

.feedback-container .profile-card-grid-3 {
  grid-area: feedback;
}

.message-type-button-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

.message-type-button-group button {
  background-color: #3f3f3f;
  border: none;
  padding: 2px 6px;
  color: #ffffff;
  font-size: 12px;
  border-radius: 3px;
}

.message-type-button-group button:first-child {
  background-color: var(--blue);
}

.message-type-button-group button img {
  width: 14px;
  height: 14px;
}

/* Download Page */
.download-container-card {
  background-color: var(--download-background-dark);
  padding: 30px 40px;
}

.download-row {
  padding: 20px;
  background-color: var(--black);
  border-radius: 3px;
  margin: 0;
}

.download-row:nth-child(2) {
  margin-top: 25px;
  max-height: 450px;
  height: 450px;
}

form.search-form input[type="text"] {
  padding: 7.6px;
  border: 1px solid var(--outline-grey);
  float: left;
  width: 95%;
  background: var(--nav-black);
  color: var(--white);
  font-size: 20px;
}

form.search-form button {
  float: left;
  width: 5%;
  padding: 7.6px;
  background: var(--blue);
  color: var(--togglewhite);
  font-size: 22px;
  border: none;
  outline: none;
  cursor: pointer;
}

form.search-form input[type="text"]:focus {
  outline: none;
}

form.search-form::after {
  content: "";
  clear: both;
  display: table;
}

.download-question {
  width: 73px;
  height: 73px;
  line-height: 73px;
  border-radius: 50%;
  font-size: 50px;
  text-align: center;
  background-color: var(--question-background-grey);
  color: var(--toggleblack);
}

.download-card {
  background-color: transparent;
}

.download-row h2 {
  font-weight: 500;
  color: var(--white);
  font-size: 25px;
  margin-top: 15px;
}

.download-row p {
  font-weight: 300;
  color: var(--white);
  font-size: 20px;
  margin-top: 10px;
}

/* Banner Promotion Page */
.banner-promotion-container {
  /* max-height: 450px;
    height: 450px; */
}

.banner-promotion-table {
  border-radius: 3px;
  border: none;
  border-color: transparent;
  font-family: "Roboto", sans-serif;
  margin-bottom: 0px;
}

.banner-promotion-table tfoot tr td {
  height: 30px;
  background-color: var(--banner-table);
}

.banner-promotion-table th {
  background-color: var(--banner-table);
  font-weight: 400;
}

.banner-promotion-table th:nth-child(1),
.banner-promotion-table td:nth-child(1) {
  width: 17%;
}

.banner-promotion-table th i {
  margin-right: 5px;
  color: var(--toggleblue);
}

.table.banner-promotion-table > :not(caption) > * > * {
  padding: 0.5rem 1.5rem;
}

.no-record-tab {
  margin-top: 20px;
}

.no-record-icon {
  width: 53px;
  height: 53px;
  line-height: 53px;
  border-radius: 50%;
  font-size: 30px;
  text-align: center;
  background-color: var(--question-background-grey);
  color: var(--toggleblack);
}

.promotion-row {
  position: relative;
  padding: 30px 60px;
}

.curve-shape {
  height: 250px;
  background: linear-gradient(
    to bottom,
    var(--banner-green-gradient1),
    var(--banner-green-gradient2) 91%,
    var(--banner-green-gradient3) 100%
  );
  border-bottom-left-radius: 130px;
  border-bottom-right-radius: 130px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

.curve-shape-gold {
  background: linear-gradient(
    to bottom,
    var(--banner-gold-gradient1),
    var(--banner-gold-gradient2) 91%,
    var(--banner-gold-gradient3) 100%
  );
}

.curve-shape-ruby {
  background: linear-gradient(
    to bottom,
    var(--banner-ruby-gradient1),
    var(--banner-ruby-gradient2) 91%,
    var(--banner-ruby-gradient3) 100%
  );
}

.curve-shape-sapphire {
  background: linear-gradient(
    to bottom,
    var(--banner-sapphire-gradient1),
    var(--banner-sapphire-gradient2) 91%,
    var(--banner-sapphire-gradient3) 100%
  );
}

.curve-shape-emerald {
  background: linear-gradient(
    to bottom,
    var(--banner-emerald-gradient1),
    var(--banner-emerald-gradient2) 91%,
    var(--banner-emerald-gradient3) 100%
  );
}

.curve-shape-diamond {
  background: linear-gradient(
    to bottom,
    var(--banner-diamond-gradient1),
    var(--banner-diamond-gradient2) 91%,
    var(--banner-diamond-gradient3) 100%
  );
}

.promotion-member-profile {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

.progress {
  padding: 0;
  position: relative;
  z-index: 4;
  height: 6px;
  width: 100%;
  background-color: var(--togglewhite);
}

.progress-bar {
  height: 6px;
  width: 50%;
  background-color: var(--progress-green);
}

.progress-bar-gold {
  background-color: var(--progress-gold);
}

.progress-bar-ruby {
  background-color: var(--progress-ruby);
}

.progress-bar-sapphire {
  background-color: var(--progress-sapphire);
}

.progress-bar-emerald {
  background-color: var(--progress-emerald);
}

.promotion-member {
  color: var(--black);
  font-weight: 500;
  font-size: 34px;
  position: relative;
  z-index: 4;
  padding: 0;
  margin-bottom: 40px;
}

.promotion-member img {
  width: 60px;
  margin-right: 10px;
}

.promotion-rank {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 4;
  font-size: 18px;
}

.diamond-promotion-rank {
  opacity: 0;
}

.platinum {
  color: var(--platinum);
}

.gold {
  color: var(--gold);
}

.ruby {
  color: var(--ruby);
}

.sapphire {
  color: var(--sapphire);
}

.emerald {
  color: var(--emerald);
}

.diamond {
  color: var(--diamond);
}

.promotion-dotted-container {
  position: relative;
  z-index: 4;
  text-align: center;
  margin-top: 25px;
}

.promotion-dotted-container span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0px 7px;
  background-color: var(--promotion-dotted);
}

.promotion-dotted-container span.active {
  background-color: var(--promotion-dotted-active);
  width: 27px;
  border-radius: 10px;
}

.promotion-row {
  margin-bottom: 50px;
}

.promotion-rank-description {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  margin-top: 55px;
}

.promotion-rank-description img {
  width: 150px;
  position: relative;
  z-index: 6;
}

.promotion-rank-title {
  font-family: "Goldman", sans-serif;
  font-size: 60px;
  font-weight: 500;
  line-height: 1.2;
  background: linear-gradient(
    to right,
    var(--platinum-title-gradient1),
    var(--platinum-title-gradient2)
  );
  padding: 0px 13px;
  border-radius: 30px;
  color: var(--platinum-title);
  margin-top: -23px;
  position: relative;
  z-index: 5;
}

.promotion-rank-gold {
  background: linear-gradient(
    to right,
    var(--gold-title-gradient1),
    var(--gold-title-gradient2)
  );
  color: var(--gold-title);
}

.promotion-rank-ruby {
  background: linear-gradient(
    to right,
    var(--ruby-title-gradient1),
    var(--ruby-title-gradient2)
  );
  color: var(--ruby-title);
}

.promotion-rank-sapphire {
  background: linear-gradient(
    to right,
    var(--sapphire-title-gradient1),
    var(--sapphire-title-gradient2)
  );
  color: var(--sapphire-title);
}

.promotion-rank-emerald {
  background: linear-gradient(
    to right,
    var(--emerald-title-gradient1),
    var(--emerald-title-gradient2)
  );
  color: var(--emerald-title);
}

.promotion-rank-diamond {
  background: linear-gradient(
    to right,
    var(--diamond-title-gradient1),
    var(--diamond-title-gradient2)
  );
  color: var(--diamond-title);
}

.promotion-rank-reward {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  gap: 30px;
}

.promotion-reward-box {
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 35px;
  margin-top: 20px;
}

.promotion-reward-description {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  gap: 0px;
  height: 80px;
}

.promotion-reward-description h2 {
  font-size: 35px;
  font-weight: 500;
  color: var(--black);
  margin-bottom: 0px;
}

.promotion-reward-description p {
  font-size: 26px;
  font-weight: 400;
  color: var(--black);
  margin-bottom: 0px;
}

.promotion-reward-description p.promotion-diamond-p {
  width: 700px;
}

.promotion-reward-svg {
  background-color: var(--promotion-icon-bg);
  border-radius: 20px;
  width: 80px;
  height: 80px;
  line-height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.promotion-reward-svg svg path.path-fill {
  fill: var(--promotion-icon);
}

.promotion-reward-svg svg path.stroke-fill {
  stroke: var(--promotion-icon);
}

.black-space {
  width: 100%;
  height: 20px;
  background-color: var(--black);
}

.requirement-row {
  margin-top: 70px;
  padding: 30px 60px;
}

.requirement-box {
  position: relative;
}

.requirement-svg {
  text-align: center;
}

.requirement-svg svg path.path-bg {
  fill: var(--platinum-requirement);
}

.requirement-title {
  font-size: 45px;
  font-weight: 500;
  color: var(--black);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.promotion-requirement-container {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  gap: 40px;
}

.promotion-requirement-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 35px;
  margin-top: 0px;
}

.promotion-requirement-icon {
  background-color: var(--black);
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.promotion-requirement-icon img {
  margin-left: 10px;
}

.promotion-reward-description span {
  font-size: 35px;
  font-weight: 400;
  color: var(--black);
  margin-bottom: 0px;
  line-height: 1.1;
  padding-right: 50px;
}

.requirement-meet-box {
  margin-top: 80px;
  margin-bottom: 60px;
}

.requirement-meet-box svg path.path-green-fill {
  fill: var(--platinum-requirement-meet-bg);
}

.requirement-meet-box svg path.path-gold-fill {
  fill: var(--gold-requirement-meet-bg);
}

.requirement-meet-box svg path.path-ruby-fill {
  fill: var(--ruby-requirement-meet-bg);
}

.requirement-meet-box svg path.path-sapphire-fill {
  fill: var(--sapphire-requirement-meet-bg);
}

.requirement-meet-box svg path.path-emerald-fill {
  fill: var(--emerald-requirement-meet-bg);
}

.requirement-meet-title {
  font-size: 32px;
  font-weight: 400;
  color: var(--platinum-requirement-meet);
  line-height: 1.2;
  width: 100%;
}

.requirement-meet-gold {
  color: var(--gold-requirement-meet);
}

.requirement-meet-ruby {
  color: var(--ruby-requirement-meet);
}

.requirement-meet-sapphire {
  color: var(--sapphire-requirement-meet);
}

.requirement-meet-emerald {
  color: var(--emerald-requirement-meet);
}

.promotion-rule-container {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  gap: 5px;
  margin-top: 50px;
  margin-bottom: 70px;
}

.promotion-rule-container span {
  font-size: 35px;
  font-weight: 400;
  color: var(--black);
  margin-bottom: 0px;
  line-height: 1.1;
  padding-right: 50px;
}

.banner-mobile-footer {
  display: none;
}

@media (min-width: 1600px) {
  .registration-logo img {
    width: 300px;
    height: auto;
  }
}

@media (min-width: 1400px) {
  .landing-advantage-container {
    max-width: 1200px;
  }
}

@media (max-width: 1600px) {
  .landing-logo img {
    width: 80%;
    height: auto;
  }

  .registration-logo img {
    width: 150px;
    height: auto;
  }
}

@media (max-width: 1540px) {
  .meet-svg svg {
    width: 760px;
  }

  .requirement-meet-title {
    font-size: 30px;
    width: 90%;
  }
}

@media (max-width: 1500px) {
  .landing-hero-bottom {
    bottom: 18%;
  }
}

@media (max-width: 1400px) {
  form.search-form input[type="text"] {
    width: 93%;
  }

  form.search-form button {
    width: 7%;
  }

  .requirement-title {
    font-size: 39.5px;
  }

  .requirement-meet-title {
    font-size: 30px;
  }

  .promotion-reward-description p.promotion-diamond-p {
    width: 640px;
  }
}

@media (max-width: 1385px) {
  .landing-hero-top {
    left: 8.5%;
  }

  .landing-hero-bottom {
    right: 13%;
  }
}

@media (max-width: 1367px) {
  .meet-svg svg {
    width: 670px;
  }

  .requirement-meet-title {
    font-size: 28px;
    width: 80%;
  }

  .requirement-row,
  .promotion-row {
    padding: 30px 40px;
  }

  .promotion-reward-description span,
  .promotion-rule-container span {
    padding-right: 0px;
  }
}

@media (max-width: 1324px) {
  .landing-slider {
    border: 0.4px solid white;
  }

  .landing-hero-title {
    font-size: 62px;
  }

  .landing-hero-top p {
    font-size: 18px;
    width: 45%;
  }

  .landing-hero-bottom {
    right: 14%;
    width: 390px;
  }

  .landing-hero-bottom h2 {
    font-size: 30px;
  }

  .landing-hero-bottom p {
    font-size: 16px;
  }
}

@media (max-width: 1300px) {
  .landing-card-box {
    width: 340px;
    height: 320px;
    border-radius: 40px;
  }

  .landing-card-box svg {
    height: 65px;
  }

  .landing-card-box h2 {
    font-size: 22px;
  }

  .landing-card-box p {
    font-size: 16px;
    width: 265px;
    margin-top: 15px;
  }

  .landing-easyway-right h2 {
    font-size: 30px;
  }

  .landing-easyway-right p {
    font-size: 18px;
    width: 500px;
  }

  .landing-learnmore-btn {
    width: 200px;
    height: 50px;
  }

  .landing-learnmore-btn span {
    font-size: 18px;
  }

  .landing-learnmore-btn button {
    width: 42px;
    height: 42px;
    font-size: 23px;
    line-height: 42px;
    margin-left: 15px;
    margin-right: -5px;
  }

  .landing-footer-upper {
    padding: 50px 160px 50px 120px;
  }

  .account-overview-title h1,
  .referral-overview-first-row-card h2 {
    font-size: 18px;
    color: var(--blue);
    margin-bottom: 0px;
  }
}

@media (max-width: 1260px) {
  .landing-hero-top {
    top: 13%;
    left: 6%;
  }

  .landing-nav ul li a {
    font-size: 17px;
    padding: 7px 10px;
  }

  .landing-hero-btn {
    padding: 7px 10px;
    border-radius: 37px;
    width: 260px;
    height: 55px;
    margin-top: 80px;
  }

  .landing-hero-btn span {
    font-size: 18px;
  }

  .landing-hero-btn button {
    width: 45px;
    height: 45px;
    font-size: 24px;
    line-height: 45px;
    margin-left: 26px;
  }

  .landing-loss-container {
    padding: 0px 30px;
  }

  .requirement-row,
  .promotion-row {
    padding: 30px;
  }

  .meet-svg svg {
    width: 670px;
  }

  .title-svg svg {
    width: 550px;
  }

  .title-svg-small svg {
    width: 500px;
  }

  .requirement-title {
    font-size: 35px;
  }

  .requirement-meet-title {
    font-size: 26px;
    width: 100%;
  }

  .promotion-reward-description h2 {
    font-size: 30px;
  }

  .promotion-reward-description p {
    font-size: 22px;
  }

  .promotion-requirement-container {
    gap: 25px;
  }

  .promotion-reward-description span,
  .promotion-rule-container span {
    font-size: 30px;
  }

  .promotion-reward-description p.promotion-diamond-p {
    width: 550px;
  }
}

@media (max-width: 1222px) {
  .promotion-rank-title {
    font-size: 50px;
  }

  .requirement-meet-box {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .meet-svg svg {
    width: 580px;
  }

  .title-svg svg {
    width: 450px;
  }

  .title-svg-small svg {
    width: 390px;
  }

  .requirement-title {
    font-size: 32px;
  }

  .requirement-meet-title {
    font-size: 23px;
  }

  .promotion-requirement-container {
    gap: 15px;
  }

  .promotion-reward-description span,
  .promotion-rule-container span {
    font-size: 28px;
  }

  .table.banner-promotion-table > :not(caption) > * > * {
    padding: 0.5rem 1.1rem;
  }
}

@media (max-width: 1180px) {
  .landing-logo {
    width: 250px;
    margin-right: 30px;
  }

  .landing-hero-title {
    font-size: 50px;
  }

  .landing-hero-top p {
    font-size: 16.5px;
    width: 50%;
  }

  .landing-card-box {
    width: 290px;
    height: 270px;
    border-radius: 40px;
  }

  .landing-card-box svg {
    height: 60px;
  }

  .landing-card-box h2 {
    font-size: 18px;
    margin-top: 25px;
  }

  .landing-card-box p {
    font-size: 14px;
    width: 245px;
    margin-top: 10px;
  }

  .landing-strategy-box {
    width: 300px;
    height: 426px;
    padding: 45px 40px 0px 40px;
  }

  .landing-strategy-inner {
    gap: 15px;
    margin-top: 75px;
  }

  .landing-strategy-line {
    width: 125px;
  }

  .landing-strategy-box h2 {
    font-size: 20px;
  }

  .landing-strategy-box p {
    font-size: 16px;
  }

  .landing-footer-upper {
    padding: 50px 120px 50px 100px;
  }

  .landing-footer-logo {
    width: 280px;
  }

  .landing-footer-info p {
    font-size: 16px;
  }

  .landing-footer-info h2 {
    font-size: 30px;
  }

  .landing-copyright {
    font-size: 13px;
  }

  .registration-logo {
    width: 87%;
  }

  .promotion-reward-description p.promotion-diamond-p {
    width: 450px;
  }
}

@media (max-width: 1130px) {
  .landing-loss-container {
    gap: 30px;
  }

  .landing-loss-background {
    width: 280px;
    height: auto;
  }

  .landing-loss-inner img {
    width: 35px;
  }

  .landing-loss-inner p {
    font-size: 18px;
  }

  .meet-svg svg {
    width: 530px;
  }

  .requirement-meet-title {
    font-size: 22px;
  }
}

@media (max-width: 1110px) {
  .landing-logo {
    width: 250px;
    margin-right: 30px;
  }

  .landing-logo img {
    width: 100%;
  }

  .registration-logo {
    margin-right: 0px;
    width: 94%;
  }

  .registration-logo img {
    width: 150px;
    height: auto;
  }

  .landing-hero-title {
    font-size: 47px;
  }

  .landing-hero-top p {
    font-size: 15px;
    width: 45%;
  }

  .landing-hero-bottom {
    bottom: 18%;
    right: 10%;
  }

  .landing-hero-btn {
    margin-top: 50px;
  }

  .landing-reminder-container {
    gap: 60px;
  }

  form.search-form input[type="text"] {
    width: 90%;
  }

  form.search-form button {
    width: 10%;
  }

  .banner-promotion-table th:nth-child(1),
  .banner-promotion-table td:nth-child(1) {
    width: 20%;
  }
}

@media (max-width: 1070px) {
  .landing-reminder-right h2 {
    font-size: 30px;
  }

  .landing-reminder-right p {
    font-size: 19px;
  }

  .landing-reminder-left-inner ul {
    width: 500px;
  }

  .landing-reminder-left-inner ul li {
    font-size: 17px;
  }

  .landing-fuel-title-bg {
    width: 185px;
  }

  .landing-fuel {
    width: 80px;
  }

  .landing-fuel-title h2 {
    width: 200px;
    font-size: 30px;
  }

  .landing-reminder-right-inner {
    top: 42%;
  }

  .landing-reminder-right p {
    font-size: 20px;
    margin-top: 25px;
  }

  .landing-easyway-container {
    gap: 60px;
  }

  .landing-easyway-right h2 {
    font-size: 26px;
  }

  .landing-easyway-right p {
    font-size: 16px;
    width: 400px;
  }

  .landing-learnmore-btn {
    width: 180px;
    height: 42px;
  }

  .landing-learnmore-btn span {
    font-size: 16px;
  }

  .landing-learnmore-btn button {
    width: 35px;
    height: 35px;
    font-size: 21px;
    line-height: 35px;
    margin-left: 15px;
  }

  .landing-footer-upper {
    padding: 50px 80px;
  }
}

@media (max-width: 1068px) {
  .layout-menu-navigation-vertical {
    width: 70px;
    overflow-x: hidden;
  }

  .layout-menu-navigation-vertical ul li a {
    padding-left: 15px;
  }

  .layout-menu-navigation-vertical ul li button {
    display: none;
  }

  .layout-menu-navigation-vertical ul li .layout-menu-logo {
    justify-content: start;
    padding-left: 18px;
    margin-bottom: 20px;
  }

  .layout-menu-navigation-vertical
    ul
    li
    .layout-menu-logo
    .layout-menu-logo-title {
    display: none;
  }

  .layout-menu-navigation-vertical ul .layout-menu-category {
    display: none;
  }

  .layout-page {
    padding-left: 100px;
  }

  .meet-svg svg {
    width: 630px;
  }

  .requirement-meet-title {
    font-size: 27px;
  }

  .promotion-reward-description p.promotion-diamond-p {
    width: 580px;
  }
}

@media (max-width: 1016px) {
  .landing-card-container {
    gap: 50px 30px;
  }

  .landing-card-box {
    width: 250px;
    height: 240px;
    border-radius: 40px;
    padding: 20px 0px;
  }

  .landing-card-box svg {
    height: 50px;
  }

  .landing-card-box h2 {
    font-size: 16px;
    margin-top: 20px;
  }

  .landing-card-box p {
    font-size: 13px;
    width: 210px;
    margin-top: 10px;
  }
}

@media (max-width: 1000px) {
  .landing-logo {
    width: 200px;
    margin-right: 30px;
  }

  .registration-logo {
    width: 94%;
    margin-right: 0px;
  }

  .landing-nav ul li a {
    font-size: 15px;
    padding: 7px;
  }

  .landing-hero-title {
    font-size: 47px;
  }

  .landing-hero-top p {
    font-size: 15px;
    width: 45%;
  }

  .landing-hero-bottom {
    right: 10%;
  }

  .landing-nav ul li {
    line-height: 32px;
  }

  .landing-switch {
    width: 60px;
    height: 30px;
    margin-left: 20px;
  }

  .landing-slider:before {
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
  }

  .landing-hero-btn {
    width: 220px;
    height: 55px;
    margin-top: 35px;
  }

  .landing-hero-btn span {
    font-size: 16px;
  }

  .landing-hero-btn button {
    width: 40px;
    height: 40px;
    font-size: 23px;
    line-height: 40px;
    margin-left: 12px;
  }

  .landing-hero-bottom {
    bottom: 16%;
    right: 6%;
  }

  .landing-hero-bottom h2 {
    font-size: 26px;
  }

  .landing-hero-bottom p {
    font-size: 14px;
  }

  .referral-overview-third-row-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 400px;
    grid-template-areas: "performance .";
    gap: 1rem;
  }

  .referral-overview-fourth-row-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "membership .";
    gap: 1rem;
  }
}

@media (max-width: 992px) {
  .landing-advantage-row {
    height: 70px;
  }

  .landing-advantage-col {
    gap: 8px;
  }

  .landing-advantage-col img {
    width: 25px;
  }

  .landing-advantage-col p {
    font-size: 14px;
  }

  .planet-right {
    width: 220px;
    top: 7%;
  }

  .planet-left {
    width: 160px;
  }

  .landing-loss-container {
    gap: 30px;
  }

  .landing-loss-background {
    width: 220px;
    height: auto;
  }

  .landing-loss-inner {
    gap: 5px;
  }

  .landing-loss-inner img {
    width: 25px;
  }

  .landing-loss-inner p {
    font-size: 14.5px;
  }

  .landing-reminder-right {
    width: 265px;
  }

  .landing-reminder-right h2 {
    font-size: 25px;
  }

  .landing-reminder-right p {
    font-size: 16px;
  }

  .landing-reminder-left-inner ul {
    width: 450px;
  }

  .landing-reminder-left-inner ul li {
    font-size: 15px;
  }

  .landing-fuel-title-bg {
    width: 160px;
  }

  .landing-fuel {
    width: 80px;
  }

  .landing-fuel-title h2 {
    width: 180px;
    margin-top: -10px;
    font-size: 26px;
  }

  .registration-nav ul li {
    line-height: 20px;
  }

  .dark-mode-container .radio-container {
    width: 80%;
  }
}

@media (max-width: 950px) {
  .meet-svg svg {
    width: 570px;
  }

  .requirement-meet-title {
    font-size: 24px;
  }

  .promotion-reward-description p.promotion-diamond-p {
    width: 450px;
  }
}

@media (max-width: 910px) {
  .fold-content .nav-pills {
    justify-content: space-between; /* Space out nav items */
    gap: 10px;
  }

  .fold-content .nav-item {
    flex: 1; /* Allow each nav item to fill available space */
    padding-right: 0px;
  }

  .fold-content .nav-link {
    text-align: center; /* Center align text */
  }
}

@media (max-width: 900px) {
  .landing-hero-title {
    font-size: 40px;
    width: 60%;
  }

  .landing-hero-top p {
    font-size: 14px;
    width: 46%;
  }

  .landing-hero-btn {
    justify-content: center;
    gap: 12px;
    width: 190px;
    height: 45px;
    margin-top: 40px;
    padding: 0px;
  }

  .landing-hero-btn span {
    font-size: 14px;
  }

  .landing-hero-btn button {
    width: 35px;
    height: 35px;
    font-size: 20px;
    line-height: 35px;
    margin-left: 0px;
  }

  .landing-hero-bottom {
    right: 2%;
  }

  .landing-strategy-box {
    width: 250px;
    height: 356px;
    padding: 40px 30px 0px 30px;
  }

  .landing-strategy-inner {
    gap: 15px;
    margin-top: 65px;
  }

  .landing-strategy-line {
    width: 125px;
  }

  .landing-strategy-box h2 {
    font-size: 18px;
  }

  .landing-strategy-box p {
    font-size: 14px;
  }

  .landing-reminder-right-inner {
    top: 45%;
  }

  .landing-reminder-right {
    width: 240px;
  }

  .landing-reminder-left-inner {
    margin-top: 55px;
  }

  .landing-reminder-left-inner ul {
    width: 420px;
  }

  .landing-reminder-left-inner ul li {
    padding: 1px 0px;
  }

  .landing-reminder-right h2 {
    font-size: 22px;
  }

  .landing-fuel-title {
    top: 14%;
  }

  .landing-fuel-title h2 {
    width: 180px;
    margin-top: -13px;
    font-size: 26px;
  }

  .landing-fuel-title-bg {
    width: 160px;
    height: 25px;
  }

  .landing-easyway-section {
    padding: 20px 20px 0px 20px;
  }

  .landing-easyway-container {
    gap: 40px;
  }

  .landing-easyway-right h2 {
    font-size: 22px;
  }

  .landing-easyway-right p {
    font-size: 14px;
    width: 370px;
  }

  .landing-learnmore-btn {
    width: 140px;
    height: 35px;
    margin-top: 10px;
  }

  .landing-learnmore-btn span {
    font-size: 12px;
  }

  .landing-learnmore-btn button {
    width: 27px;
    height: 27px;
    font-size: 15px;
    line-height: 27px;
    margin-left: 13px;
  }

  .landing-footer-upper {
    padding: 50px 80px 30px 80px;
  }

  .landing-footer-logo {
    width: 230px;
  }

  .landing-footer-info p {
    font-size: 14px;
  }

  .landing-footer-info h2 {
    font-size: 26px;
  }

  .landing-copyright {
    font-size: 12px;
  }

  .feedback-container .profile-card-grid-1 img {
    width: 200px;
    height: auto;
  }

  .promotion-rank-title {
    font-size: 43px;
  }

  .meet-svg svg {
    width: 530px;
  }

  .requirement-title {
    font-size: 30px;
  }

  .requirement-meet-title {
    font-size: 22px;
  }

  .promotion-reward-description h2 {
    font-size: 25px;
  }

  .promotion-reward-description p {
    font-size: 20px;
  }

  .promotion-requirement-container {
    gap: 10px;
  }

  .promotion-reward-description span,
  .promotion-rule-container span {
    font-size: 25px;
  }
}

@media (max-width: 850px) {
  .landing-logo {
    width: 140px;
    margin-right: 10px;
  }

  .registration-logo {
    width: 94%;
    margin-right: 0px;
  }

  .landing-nav ul li a {
    font-size: 15px;
    padding: 7px;
  }

  .landing-nav ul li {
    line-height: 32px;
  }

  .registration-nav ul li {
    line-height: 20px;
  }

  .landing-hero-top {
    top: 12%;
  }

  .landing-hero-title {
    font-size: 35px;
  }

  .landing-hero-top p {
    font-size: 14px;
    width: 46%;
    margin-top: 30px;
  }

  .landing-hero-bottom {
    right: 6%;
    width: 320px;
  }

  .landing-hero-bottom h2 {
    font-size: 22px;
  }

  .landing-hero-bottom p {
    font-size: 13px;
    margin-top: 20px;
  }

  .landing-card-section {
    padding: 50px 20px 30px 20px;
  }

  .landing-card-box {
    width: 200px;
    height: 200px;
    border-radius: 25px;
    padding: 20px 0px 10px 0px;
  }

  .landing-card-box svg {
    height: 40px;
  }

  .landing-card-box h2 {
    font-size: 13px;
    margin-top: 15px;
  }

  .landing-card-box p {
    font-size: 10px;
    width: 160px;
    margin-top: 10px;
  }

  .landing-reminder-container {
    gap: 30px;
  }

  .landing-reminder-right {
    width: 220px;
  }

  .landing-reminder-right-inner {
    top: 45%;
  }

  .landing-reminder-right h2 {
    font-size: 22px;
  }

  .landing-reminder-right p {
    font-size: 14px;
    margin-top: 17px;
  }

  .landing-strategy-section {
    margin-top: 0px;
  }

  .feedback-container .profile-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.2fr 1fr;
    grid-template-areas:
      "contact"
      "feedback";
    gap: 1rem;
  }

  .promotion-requirement-container {
    margin-top: 30px;
  }

  .meet-svg svg {
    width: 460px;
  }

  .title-svg svg {
    width: 430px;
  }

  .title-svg-small svg {
    width: 370px;
  }

  .requirement-title {
    font-size: 25px;
  }

  .requirement-meet-title {
    font-size: 19px;
  }

  .requirement-row {
    margin-top: 40px;
  }

  .requirement-meet-box {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .banner-promotion-table th:nth-child(1),
  .banner-promotion-table td:nth-child(1) {
    width: 25%;
  }

  .promotion-reward-description p.promotion-diamond-p {
    width: 320px;
  }
}

@media (max-width: 800px) {
  .landing-strategy-box {
    width: 200px;
    height: 285px;
    padding: 30px 20px 0px 20px;
  }

  .landing-strategy-inner {
    gap: 10px;
    margin-top: 50px;
  }

  .landing-strategy-line {
    width: 105px;
  }

  .landing-strategy-box h2 {
    font-size: 15px;
  }

  .landing-strategy-box p {
    font-size: 12px;
  }

  .landing-loss-container {
    gap: 20px;
  }

  .landing-loss-background {
    width: 180px;
    height: auto;
  }

  .landing-loss-inner {
    gap: 5px;
  }

  .landing-loss-inner img {
    width: 20px;
  }

  .landing-loss-inner p {
    font-size: 12px;
  }

  .landing-reminder-right h2 {
    font-size: 20px;
  }

  .landing-reminder-right {
    width: 200px;
  }

  .landing-reminder-right p {
    font-size: 13px;
  }

  .landing-fuel-title {
    top: 12%;
  }

  .landing-fuel {
    width: 70px;
  }

  .landing-fuel-title h2 {
    width: 160px;
    margin-top: -10px;
    font-size: 24px;
  }

  .landing-reminder-left-inner ul {
    width: 370px;
  }

  .landing-reminder-left-inner ul li {
    font-size: 14px;
  }

  .account-overview-title .title-tag,
  .shorten-url .title-tag {
    font-size: 13px;
  }

  .referral-overview-second-row-card.card-2 h2 {
    font-size: 15px;
  }

  .account-detail-grid-1 img {
    margin-bottom: 10px;
    width: 50px;
    height: 50px;
  }

  .my-sponsor-member img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }

  .first-name-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .acc-setting-body .withdrawal-request-container .content-container-card {
    padding: 0px;
  }

  .withdrawal-request-detail-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "accountInput"
      "pendingInfo";
    padding: 0px 20px;
  }

  .withdrawal-request-container .find-referral-title {
    padding: 30px 20px 0px 20px;
  }

  .withdrawal-request-container hr {
    margin: 10px 20px;
  }

  .withdrawal-request-detail-grid p {
    font-size: 14px;
    margin-bottom: 15px;
  }

  .withdrawal-request-detail-grid p:first-child {
    margin-top: 40px;
  }

  .withdrawal-request-footer {
    background-color: transparent;
    margin-top: 20px;
    text-align: center;
    padding: 30px 20px;
  }
}

@media (max-width: 767px) {
  .checkbtn {
    display: block;
  }

  .landing-nav {
    display: block;
    padding: 0px 20px;
  }

  .landing-nav ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: var(--blue);
    top: 50px;
    left: -100%;
    text-align: center;
    transition: all 0.5s;
  }

  .landing-nav ul li {
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }

  .landing-nav ul li a {
    font-size: 20px;
  }

  .landing-nav ul li a:hover,
  .landing-nav ul li a.active {
    background: none !important;
    color: var(--white) !important;
  }

  #check:checked ~ ul {
    left: 0;
  }

  .landing-logo {
    margin-top: 15px;
    width: 180px;
    margin-left: 15px;
    margin-right: 10px;
  }

  .registration-nav {
    /* display: block; */
    display: flex;
    padding: 10px 25px;
    /* width: 380px; */
    /* left: 58%;
      top: 8.5%;
      transform: translate(-50%, -50%); */
  }

  .registration-nav ul {
    position: fixed;
    width: 200px;
    height: 250px;
    background: var(--hamburger);
    top: 2%;
    right: 3%;
    text-align: center;
    transition: all 0.5s;
    border-radius: 15px;
    z-index: 3;
    padding: 40px 0px 0px 0px;
    display: none;
  }

  .registration-nav ul li {
    display: block;
    margin: 10px 0;
    line-height: 20px;
  }

  .registration-nav ul li a {
    font-size: 15px;
    padding: 3px;
  }

  .registration-nav ul li a:hover,
  .registration-nav ul li a.active {
    background: none;
    color: var(--hamburgerlink);
  }

  #check:checked ~ .registration-ul {
    display: block;
    left: auto;
    height: auto;
    right: 0;
    top: 0;
  }

  #check:checked ~ .registration-checkbtn {
    color: var(--toggleblack);
  }

  .registration-logo {
    width: 91%;
    margin: 0px;
  }

  .landing-common-h2 {
    font-size: 25px;
    margin-top: 20px;
    margin-bottom: 30px;
  }

  .landing-advantage-row {
    height: 60px;
  }

  .landing-advantage-col {
    gap: 8px;
  }

  .landing-advantage-col img {
    width: 20px;
  }

  .landing-advantage-col p {
    font-size: 12px;
    max-width: 110px;
  }

  .landing-advantage-col:nth-child(1),
  .landing-advantage-col:nth-child(2) {
    height: 30px;
  }

  .planet-right {
    width: 150px;
    top: 11%;
  }

  .planet-left {
    width: 110px;
    bottom: 25%;
  }

  .landing-easyway-section {
    margin-top: 35px;
  }

  .landing-easyway-right h2 {
    font-size: 19px;
  }

  .landing-easyway-right p {
    font-size: 13px;
    width: 310px;
    margin-top: 8px;
  }

  .landing-learnmore-btn {
    width: 120px;
    height: 30px;
    margin-top: 5px;
  }

  .landing-learnmore-btn span {
    font-size: 10px;
  }

  .landing-learnmore-btn button {
    width: 23px;
    height: 23px;
    font-size: 13px;
    line-height: 23px;
    margin-left: 10px;
  }

  .landing-footer-upper {
    padding: 50px 60px 30px 60px;
  }

  .landing-footer-logo {
    width: 200px;
  }

  .landing-footer-info p {
    font-size: 13px;
  }

  .landing-footer-info h2 {
    font-size: 22px;
    margin-bottom: 3px;
  }

  .landing-copyright {
    font-size: 11px;
  }

  .custom-search-tab-pane-form {
    padding: 0px 10px;
  }

  /* Referral Overview */
  .referral-overview-first-row-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "earning earning"
      "hits referral";
  }

  .referral-overview-first-row-card-width {
    width: 70%;
  }

  .referral-overview-first-row-card.card-3 {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .referral-overview-second-row-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 220px;
    grid-template-areas:
      "account account"
      "sponsor recent";
    gap: 1rem;
  }

  .referral-overview-third-row-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "performance";
    gap: 1rem;
  }

  .referral-overview-fourth-row-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "membership";
    gap: 1rem;
  }

  .banner-container-card {
    padding: 25px;
  }

  .curve-shape {
    height: 210px;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
  }

  .promotion-member {
    font-size: 28px;
    margin-bottom: 30px;
  }

  .promotion-member img {
    width: 50px;
    margin-right: 5px;
  }

  .promotion-dotted-container {
    margin-top: 15px;
  }

  .requirement-row {
    padding: 0px;
  }

  .promotion-row {
    padding: 20px;
  }

  .promotion-reward-description h2 {
    font-size: 23px;
  }

  .promotion-reward-description p {
    font-size: 18px;
  }

  .promotion-reward-description span,
  .promotion-rule-container span {
    font-size: 23px;
  }

  .promotion-rank-description img {
    width: 130px;
  }

  .promotion-rank-reward {
    margin-top: 30px;
    gap: 5px;
  }

  .promotion-reward-svg {
    width: 70px;
    height: 70px;
    line-height: 50px;
  }

  .promotion-reward-svg svg {
    width: 40px;
  }

  .promotion-reward-box {
    gap: 30px;
  }
}

@media (max-width: 733px) {
  .landing-reminder-section {
    margin-top: 90px;
  }

  .landing-reminder-container {
    gap: 20px;
  }

  .landing-fuel {
    width: 60px;
  }

  .landing-fuel-title {
    top: 11%;
  }

  .landing-fuel-title h2 {
    width: 140px;
    margin-top: -10px;
    font-size: 20px;
    margin-left: 25px;
  }

  .landing-fuel-title-bg {
    width: 120px;
    height: 20px;
  }

  .landing-reminder-left-inner {
    margin-top: 40px;
  }

  .landing-reminder-left-inner ul {
    width: 340px;
  }

  .landing-reminder-left-inner ul li {
    font-size: 12px;
  }

  .landing-reminder-right {
    width: 170px;
  }

  .landing-reminder-right-inner {
    top: 47%;
  }

  .landing-reminder-right h2 {
    font-size: 18px;
  }

  .landing-reminder-right p {
    font-size: 12px;
  }

  .profile-card-grid {
    grid-template-columns: 0.8fr 1fr 0.5fr;
    grid-template-rows: 0.2fr 0.4fr 1fr;
    grid-template-areas:
      "member options options"
      "settings options options"
      ". options options";
  }
}

@media (max-width: 710px) {
  .landing-hero-title {
    font-size: 32px;
  }

  .landing-hero-top {
    top: 12%;
  }

  .landing-hero-top p {
    font-size: 13px;
    width: 44%;
    margin-top: 25px;
  }

  .landing-hero-btn {
    gap: 6px;
    width: 170px;
    height: 45px;
    margin-top: 35px;
  }

  .landing-hero-btn span {
    font-size: 13px;
  }

  .landing-hero-btn button {
    width: 32px;
    height: 32px;
    font-size: 20px;
    line-height: 32px;
    margin-left: 0px;
  }

  .landing-hero-bottom {
    right: 5%;
    width: 290px;
  }

  .landing-hero-bottom h2 {
    font-size: 20px;
  }

  .landing-hero-bottom p {
    font-size: 12px;
    margin-top: 16px;
  }

  .landing-card-container {
    gap: 50px 20px;
  }

  .landing-card-box {
    width: 170px;
    height: 170px;
    border-radius: 20px;
    padding: 20px 0px 10px 0px;
  }

  .landing-card-box svg {
    height: 35px;
  }

  .landing-card-box h2 {
    font-size: 11px;
    margin-top: 15px;
  }

  .landing-card-box p {
    font-size: 8px;
    width: 140px;
    margin-top: 8px;
  }

  .trading-history-tab .nav-link {
    padding: 2px 10px;
    margin-right: 6px;
    font-size: 14px;
  }

  .my-sponsor-member img {
    width: 40px;
    height: 40px;
  }

  form.search-form input[type="text"] {
    width: 85%;
  }

  form.search-form button {
    width: 15%;
  }

  .download-row h2 {
    font-size: 21px;
    margin-top: 15px;
  }

  .download-row p {
    font-size: 16px;
    margin-top: 5px;
  }
}

@media (max-width: 670px) {
  .dashboard-footer .footer-left,
  .dashboard-footer .footer-right {
    font-size: 16px;
  }

  .profile-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.2fr 1fr;
    grid-template-areas:
      "member"
      "options";
    gap: 1rem;
  }

  .profile-card-grid-2 {
    display: none;
  }

  .promotion-rank-description img {
    width: 100px;
  }

  .promotion-rank-title {
    font-size: 32px;
    margin-top: -15px;
  }

  .promotion-member img {
    width: 40px;
    margin-right: 5px;
  }

  .promotion-member {
    font-size: 22px;
    margin-bottom: 25px;
  }

  .promotion-rank {
    font-size: 16px;
  }

  .meet-svg svg {
    width: 400px;
  }

  .title-svg svg {
    width: 340px;
  }

  .title-svg-small svg {
    width: 300px;
  }

  .requirement-title {
    font-size: 22px;
  }

  .requirement-meet-title {
    font-size: 17px;
  }

  .promotion-reward-box {
    gap: 20px;
  }

  .promotion-reward-svg {
    width: 55px;
    height: 55px;
    border-radius: 14px;
  }

  .promotion-reward-svg svg {
    width: 30px;
  }

  .promotion-reward-description h2 {
    font-size: 20px;
  }

  .promotion-reward-description p {
    font-size: 16px;
  }

  .promotion-requirement-container {
    gap: 0px;
  }

  .promotion-requirement-icon {
    width: 35px;
    height: 35px;
  }

  .promotion-requirement-icon img {
    width: 50px;
  }

  .promotion-reward-description {
    height: 60px;
  }

  .promotion-reward-description span,
  .promotion-rule-container span {
    font-size: 20px;
  }

  .requirement-meet-box {
    margin-top: 0px;
    margin-bottom: 10px;
  }

  .promotion-rule-container {
    margin-top: 30px;
    margin-bottom: 50px;
  }

  .banner-promotion-table {
    font-size: 13px;
  }
}

@media (max-width: 650px) {
  .landing-hero-title {
    font-size: 28px;
  }

  .landing-hero-top {
    top: 13%;
  }

  .landing-hero-top p {
    font-size: 11px;
    width: 44%;
    margin-top: 18px;
  }

  .landing-hero-btn {
    gap: 6px;
    width: 150px;
    height: 40px;
    margin-top: 20px;
  }

  .landing-hero-btn span {
    font-size: 11px;
  }

  .landing-hero-btn button {
    width: 30px;
    height: 30px;
    font-size: 16px;
    line-height: 30px;
    margin-left: 0px;
  }

  .landing-hero-bottom {
    right: 4%;
    width: 250px;
  }

  .landing-hero-bottom h2 {
    font-size: 16px;
  }

  .landing-hero-bottom p {
    font-size: 12px;
    margin-top: 14px;
  }

  .checkbtn {
    margin-right: 20px;
  }

  .landing-strategy-container {
    gap: 15px;
  }

  .landing-strategy-box {
    width: 150px;
    height: 215px;
    padding: 23px 10px 0px 10px;
  }

  .landing-strategy-inner {
    gap: 8px;
    margin-top: 40px;
  }

  .landing-strategy-line {
    width: 85px;
  }

  .landing-strategy-box h2 {
    font-size: 12px;
  }

  .landing-strategy-box p {
    font-size: 9px;
  }

  .landing-loss-container {
    gap: 20px;
  }

  .landing-loss-background {
    width: 150px;
    height: auto;
  }

  .landing-loss-inner {
    gap: 5px;
  }

  .landing-loss-inner img {
    width: 15px;
  }

  .landing-loss-inner p {
    font-size: 10px;
  }

  .landing-reminder-left-inner ul {
    width: 300px;
  }

  .landing-reminder-right {
    width: 140px;
  }

  .landing-reminder-right-inner {
    top: 48%;
  }

  .landing-reminder-right h2 {
    font-size: 15px;
  }

  .landing-reminder-right p {
    font-size: 10px;
    margin-top: 10px;
  }

  .landing-footer-upper {
    padding: 50px 30px 30px 30px;
  }

  .landing-footer-logo {
    width: 170px;
  }

  .landing-footer-info p {
    font-size: 12px;
  }

  .landing-footer-info h2 {
    font-size: 20px;
    margin-bottom: 3px;
  }

  .landing-copyright {
    font-size: 10px;
  }

  .registration-nav {
    width: 440px;
    top: 10%;
  }

  .registration-checkbtn {
    margin-right: 0px;
  }

  .login-form-container {
    width: 430px;
    height: 400px;
    padding: 25px 82px 0px 82px;
  }

  .robot-trading-container .paused-tab-pane-row label {
    font-size: 13px;
  }

  .paused-tab-pane-row button {
    font-size: 12px;
    padding: 8px 10px;
  }

  .referral-overview-first-row-card h2,
  .account-overview-title h1 {
    font-size: 14px;
  }

  .referral-overview-first-row-card h1 {
    font-size: 22px;
  }

  .referral-overview-second-row-card h2 {
    font-size: 14px;
  }

  /* Referral List Table Mobile Version */
  .referral-list-table.table-mobile-ver .table tr th {
    border-bottom: 0 none;
    width: 150px;
  }

  .referral-list-table.table-mobile-ver .table tr td:last-child {
    border-bottom: 0 none;
  }

  .referral-list-table.table-mobile-ver {
    border-bottom: none;
    border-top: none;
    border-radius: 3px;
    margin-top: 40px;
  }

  .referral-list-table.table-mobile-ver {
    display: block;
  }

  .referral-list-table {
    display: none;
  }

  .referral-list-table.referral-list-table.table-mobile-ver .table tr td {
    vertical-align: middle;
  }

  .genealogy-view-button-group.mobile-ver-btn {
    display: flex;
  }

  .genealogy-view-button-group.web-ver-btn {
    display: none;
  }

  form.search-form input[type="text"] {
    width: 85%;
  }

  form.search-form button {
    width: 15%;
  }

  .download-row h2 {
    font-size: 19px;
    margin-top: 15px;
  }

  .download-row p {
    font-size: 14px;
    margin-top: 5px;
  }
}

@media (max-width: 640px) {
  .robot-trading-container .content-container-card {
    padding: 20px 20px;
  }

  .robot-trading-tab .nav-tabs .nav-item.show .nav-link,
  .nav-tabs .nav-link.active {
    font-size: 16px;
    font-weight: 400;
    padding: 10px 10px;
  }
  .robot-trading-tab .nav-link {
    font-size: 16px;
    font-weight: 400;
    padding: 10px 10px;
  }

  .robot-trading-tab .table th {
    font-size: 14px;
  }

  .robot-trading-tab .table td {
    padding: 16px 0px;
    font-size: 14px;
  }

  .robot-trading-live-market-crypto img {
    width: 14px;
    height: 14px;
  }

  .robot-trading-live-market-change-green,
  .robot-trading-live-market-change-red,
  .robot-trading-live-market-change-grey {
    font-size: 14px;
    padding: 2px 8px;
  }

  .robot-trading-tab-nav .nav-tabs {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }

  .robot-trading-tab-nav .nav-item {
    flex: 1;
    text-align: center;
  }

  .robot-setup-container .content-container-card {
    padding: 20px 20px;
  }
}

@media (max-width: 620px) {
  .dashboard-footer .footer-left,
  .dashboard-footer .footer-right {
    font-size: 14px;
  }

  .meet-svg svg {
    width: 320px;
    height: 150px;
  }

  .title-svg svg {
    width: 300px;
  }

  .title-svg-small svg {
    width: 260px;
  }

  .requirement-title {
    font-size: 20px;
  }

  .requirement-meet-title {
    font-size: 13px;
  }

  .promotion-reward-description h2,
  .promotion-reward-description span,
  .promotion-rule-container span {
    font-size: 18px;
  }

  .promotion-reward-description p {
    font-size: 14px;
  }

  .promotion-requirement-container {
    margin-top: 10px;
  }

  .promotion-rule-container {
    margin-top: 20px;
    margin-bottom: 50px;
  }

  .requirement-row {
    margin-top: 30px;
  }

  .table.banner-promotion-table > :not(caption) > * > * {
    padding: 0.5rem 0.7rem;
  }

  .promotion-reward-description p.promotion-diamond-p {
    width: 260px;
  }
}

@media (max-width: 600px) {
  .landing-card-box {
    width: 140px;
    height: 130px;
    border-radius: 20px;
    padding: 15px 0px 10px 0px;
  }

  .landing-card-box svg {
    height: 25px;
  }

  .landing-card-box h2 {
    font-size: 10px;
    margin-top: 10px;
  }

  .landing-card-box p {
    font-size: 7px;
    width: 130px;
    margin-top: 8px;
  }

  .landing-reminder-section {
    margin-top: 40px;
  }

  .landing-fuel {
    width: 50px;
  }

  .landing-fuel-title {
    top: 10%;
  }

  .landing-fuel-title h2 {
    width: 100px;
    margin-top: -10px;
    font-size: 15px;
    margin-left: 25px;
  }

  .landing-fuel-title-bg {
    width: 95px;
    height: 13px;
  }

  .landing-reminder-left-inner ul {
    width: 260px;
  }

  .landing-reminder-left-inner ul li {
    font-size: 10px;
  }

  .landing-easyway-right h2 {
    font-size: 16px;
  }

  .landing-easyway-right p {
    font-size: 11px;
    width: 270px;
    margin-top: 8px;
  }

  .landing-learnmore-btn {
    width: 120px;
    height: 30px;
    margin-top: 5px;
  }

  .landing-learnmore-btn span {
    font-size: 10px;
  }

  .landing-learnmore-btn button {
    width: 23px;
    height: 23px;
    font-size: 13px;
    line-height: 23px;
    margin-left: 15px;
  }

  .registration-form-container {
    width: 425px;
    border-radius: 40px;
    padding: 25px 45px 0px 45px;
  }

  .registration-form {
    margin-top: 0px;
  }

  .registration-nav {
    /* left: 59%;
      top: 8.5%; */
  }

  .trading-history-container .content-container-card {
    padding: 30px 20px;
  }

  .trading-history-tab .nav-link {
    padding: 2px 6px;
  }
}

@media (max-width: 576px) {
  .landing-advantage-col {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .landing-advantage-container {
    padding: 60px 30px;
  }

  .landing-common-h2 {
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 30px;
  }

  .landing-advantage-row {
    height: 50px;
  }

  .landing-advantage-col {
    gap: 8px;
  }

  .landing-advantage-col img {
    width: 20px;
  }

  .landing-advantage-col p {
    font-size: 9px;
    max-width: 82px;
  }

  .landing-advantage-col:nth-child(1),
  .landing-advantage-col:nth-child(2) {
    height: 25px;
  }

  .planet-right {
    width: 130px;
    top: 14%;
  }

  .planet-left {
    width: 90px;
  }

  .email-container {
    width: 500px;
    margin-top: 15px;
    padding: 0px 40px;
  }

  .email-btn-row {
    padding: 8px 0px;
  }

  .common-icon {
    width: 43px;
    height: 43px;
    font-size: 23px;
  }

  .email-content-row {
    height: 340px;
  }

  .contact-container {
    padding: 0 20px;
    width: 470px;
  }

  .dashboard-footer .footer-left,
  .dashboard-footer .footer-right {
    font-size: 12px;
  }

  .paused-tab-pane-row button {
    font-size: 14px;
    padding: 8px 10px;
    width: 93%;
    margin: 0 auto;
    margin-top: 10px;
  }
}

@media (max-width: 550px) {
  .landing-hero-title {
    font-size: 25px;
  }

  .landing-hero-top {
    top: 13%;
  }

  .landing-hero-top p {
    font-size: 10px;
    width: 42%;
    margin-top: 18px;
  }

  .landing-hero-btn {
    gap: 6px;
    width: 130px;
    height: 32px;
    margin-top: 20px;
  }

  .landing-hero-btn span {
    font-size: 9px;
  }

  .landing-hero-btn button {
    width: 25px;
    height: 25px;
    font-size: 14px;
    line-height: 25px;
    margin-left: 0px;
  }

  .landing-hero-bottom {
    right: 3%;
    width: 220px;
  }

  .landing-hero-bottom h2 {
    font-size: 14px;
  }

  .landing-hero-bottom p {
    font-size: 11px;
    margin-top: 10px;
  }

  .landing-nav {
    padding: 0px;
  }

  .landing-logo {
    width: 150px;
    margin-left: 30px;
    margin-right: 30px;
  }

  .registration-logo {
    width: 90%;
    margin: 0px;
  }

  .checkbtn {
    font-size: 27px;
    line-height: 65px;
  }

  .landing-loss-section {
    margin-top: 40px;
  }

  .landing-loss-container {
    gap: 15px;
  }

  .landing-loss-background {
    width: 130px;
    height: auto;
  }

  .landing-loss-inner {
    gap: 5px;
  }

  .landing-loss-inner img {
    width: 10px;
  }

  .landing-loss-inner p {
    font-size: 8px;
  }

  .landing-reminder-right {
    width: 120px;
  }

  .landing-reminder-right-inner {
    top: 49%;
  }

  .landing-reminder-right h2 {
    font-size: 13px;
  }

  .landing-reminder-right p {
    font-size: 9px;
    margin-top: 10px;
  }

  .landing-reminder-left-inner ul {
    width: 240px;
  }

  .landing-easyway-right h2 {
    font-size: 14px;
  }

  .landing-easyway-right p {
    font-size: 11px;
    width: 240px;
    margin-top: 8px;
  }

  .landing-learnmore-btn {
    width: 100px;
    height: 26px;
    margin-top: 0px;
  }

  .landing-learnmore-btn span {
    font-size: 9px;
  }

  .landing-learnmore-btn button {
    width: 20px;
    height: 20px;
    font-size: 11px;
    line-height: 20px;
    margin-left: 7px;
  }

  .landing-footer-upper {
    padding: 20px 30px;
  }

  .landing-footer-logo {
    width: 150px;
  }

  .landing-footer-info p {
    font-size: 11px;
  }

  .landing-footer-info h2 {
    font-size: 18px;
    margin-bottom: 3px;
  }

  .landing-copyright {
    font-size: 9px;
  }

  .registration-form-container {
    height: 450px;
    padding: 15px 45px 0px 45px;
  }

  .registration-nav {
    width: 400px;
  }

  .registration-checkbtn {
    line-height: 35px;
    margin-right: 0px;
    width: 10%;
  }

  .registration-input-box label {
    font-size: 14px;
  }

  .registration-form :where(.registration-input-box input, .select-box) {
    height: 32px;
    font-size: 14px;
  }

  .registration-form-container header {
    font-size: 18px;
  }

  .registration-form .registration-input-box {
    margin-top: 15px;
  }

  .login-form-container {
    width: 430px;
    height: 390px;
    padding: 25px 72px 0px 72px;
  }

  .email-container {
    width: 420px;
  }

  .contact-form :where(.registration-input-box input, .select-box) {
    height: 32px;
    font-size: 12px;
  }
}

/* -- Dashboard - Mobile Version */
@media (max-width: 550px) {
  body.dashboard-body {
    background-color: var(--dashboard-background-mobile);
    height: 100vh;
  }

  body.acc-setting-body {
    background-color: var(--content-container-background-mobile);
  }

  .content-container-card {
    background-color: var(--content-container-background-mobile);
  }

  .acc-setting-body .content-container-card {
    background-color: var(--content-container-background-mobile);
    padding: 20px;
  }

  .layout-page {
    padding: 20px 0px;
  }

  .layout-menu-navigation-vertical {
    display: none;
  }

  .content-container-card {
    border-radius: 0px;
  }

  .content-container-title {
    display: none;
  }

  .robot-trading-live-market-add-new {
    width: 50%;
    display: block;
    margin: 0 auto;
  }

  .bottom-nav-bar-header {
    display: block;
  }

  .topbar-section {
    display: block;
  }

  .dashboard-footer,
  .robot-trading-tab-1 .robot-trading-warning-msg {
    display: none;
  }

  .home-content-wrapper {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .robot-trading-tab .table td,
  .robot-trading-tab .table th {
    background-color: transparent;
    color: var(--black);
  }

  .robot-trading-tab .nav-tabs .nav-item.show .nav-link,
  .nav-tabs .nav-link.active,
  .robot-trading-tab .nav-link {
    color: var(--black);
  }

  .robot-trading-tab-content {
    margin-top: 10px;
  }

  .robot-trading-tab-1 tr:nth-child(5) td {
    background-color: var(--table-row-grey);
  }

  .robot-trading-tab-1 .table tr td {
    padding: 16px 10px;
  }

  .robot-trading-tab-2 .robot-trading-warning-msg {
    font-size: 12px;
    text-align: center;
  }

  .robot-trading-tab-2 .table tr td:nth-child(4) {
    text-align: end;
  }

  .fold-content {
    padding: 15px;
  }

  .active-tab-pane-row.row-1 .active-tab-pane-col-1 label,
  .active-tab-pane-row.row-1 .active-tab-pane-col-2 label,
  .active-tab-pane-row input,
  .active-tab-pane-row select {
    font-size: 14px;
  }

  .active-tab-pane-buttons,
  .paused-tab-pane-buttons {
    justify-content: center;
    align-items: center;
  }

  .active-tab-pane-buttons button,
  .paused-tab-pane-buttons button {
    padding: 10px 0px;
    width: 250px;
  }

  .fold-content .nav-item .nav-link {
    background-color: var(--active-grey);
  }

  /* Tradings Item Tab */
  .tradings-tab-arrow path {
    fill: var(--tradings-item-arrow);
  }

  /* No News Found */
  .no-news-container .content-container-card {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
  }

  .no-news-tab {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .no-news-tab img {
    width: 48px;
    height: 48px;
  }
  .no-news-tab p {
    color: var(--table-border-grey);
  }

  /* Dark Mode */
  .dark-mode-container .content-container-card {
    padding: 10px 0px;
  }

  .dark-mode-container .theme-color-mode-container {
    justify-content: center;
    width: 100%;
  }

  .dark-mode-container label {
    color: var(--black);
  }

  /* Robot Setup */
  .robot-setup-container .paused-tab-pane-row label {
    color: var(--black);
  }

  .robot-setup-container .paused-tab-pane-row input {
    width: 100%;
  }

  .robot-setup-container button {
    width: 100%;
    margin-top: 20px;
  }

  .robot-setup-container .link-step h3 {
    color: var(--black);
  }

  .robot-setup-container .link-step p {
    font-size: 12px;
  }

  .robot-setup-container .coin-balance td,
  .robot-setup-container .coin-balance th {
    border: 1px solid var(--black);
  }

  .robot-setup-container .coin-balance {
    padding: 0px 10px;
    margin: 0 auto;
  }

  .robot-setup-container .coin-balance table {
    width: 100%; /* Ensure the width is set */
  }

  .robot-setup-container .coin-balance h3 {
    margin-top: 50px;
  }

  /* Open Trades */
  .open-trades-container .table,
  .open-trades-container .open-trades-text p {
    font-size: 13px;
  }

  /* Trading History */
  .trading-history-tab .nav-pills {
    display: flex;
    justify-content: space-around;
  }

  .trading-history-tab .nav-link {
    padding: 2px 12px;
    margin-right: 0px;
    font-size: 16px;
  }

  .trading-history-tab .trading-history-tab-content .custom-search-tab-pane h1,
  .last-week-tab-container-third-out p {
    font-size: 16px;
    padding: 0px 10px;
  }

  .trading-history-tab .trading-history-tab-content h1 {
    font-size: 16px;
  }

  .last-week-tab-container-first-row-first-col h2,
  .last-week-tab-container-first-row h3,
  .last-week-tab-container-second-row-first-col h3 {
    font-size: 15px;
  }

  .last-week-tab-container-second-row-first-col {
    width: 100px;
  }

  .last-week-tab-container-first-row-first-col h4 {
    font-size: 14px;
  }

  .custom-search-tab-pane button {
    margin-top: 20px;
  }

  /* Referral Overview */
  .referral-overview-container .content-container-card {
    padding: 20px 15px;
  }

  .referral-overview-first-row-card img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }

  .referral-overview-first-row-card h2 {
    font-size: 11px;
  }

  .referral-overview-first-row-card h1 {
    font-size: 16px;
  }

  .referral-overview-first-row-card-width {
    width: 50%;
  }

  .referral-overview-second-row-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 200px;
    grid-template-areas:
      "account account"
      "sponsor recent";
    gap: 1rem;
  }

  .referral-overview-second-row-card .account-detail-grid h4 {
    font-size: 11px;
    margin-bottom: 0px;
  }

  .referral-overview-second-row-card .account-detail-grid h2 {
    font-size: 11px;
    margin-bottom: 0px;
  }

  .account-detail-grid {
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-template-areas:
      "account1 account2"
      "account1 account3";
  }

  .account-detail-grid-1 {
    grid-area: account1;
  }

  .account-detail-grid-2 {
    grid-area: account2;
  }

  .account-detail-grid-3 {
    grid-area: account3;
  }

  .account-detail-grid-1 hr,
  .account-detail-grid-2 hr,
  .account-detail-grid-3 hr {
    display: none;
  }

  .account-detail-grid-mobile-line {
    display: block;
  }

  .account-overview-title .title-tag,
  .shorten-url .title-tag {
    font-size: 12px;
  }

  .account-detail-grid-2 {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .account-overview-title h1 {
    font-size: 15px;
  }

  .account-detail-grid-1 img {
    margin-bottom: 10px;
    width: 30px;
    height: 30px;
  }

  .my-sponsor-member img {
    width: 30px;
    height: 30px;
  }

  .referral-overview-second-row-card h2 {
    font-size: 14px;
  }

  .referral-overview-second-row-card.card-2 h2 {
    font-size: 14px;
  }

  .referral-overview-second-row-card.card-2 h4 {
    font-size: 12px;
  }

  .referral-overview-second-row-card.card-3 .no-record-found img {
    width: 50px;
    height: 50px;
  }

  .referral-overview-second-row-card.card-3 h4 {
    font-size: 12px;
  }

  .membership-annual-fee {
    gap: 10px;
  }

  .membership-register-text {
    margin-top: 0px;
  }

  /* Referral List */
  .first-name-grid label,
  .first-name-grid input {
    font-size: 14px;
  }

  .find-referral-title .form-select {
    font-size: 12px;
  }

  .find-referral-title h1 {
    font-size: 18px;
  }

  .referral-list-table .table tr th {
    font-size: 14px;
  }

  /* Referral List Table Mobile Version */
  .referral-list-table.table-mobile-ver .table tr th {
    border-bottom: 0 none; /* Remove bottom border for the first row */
    width: 100px;
    font-size: 12px;
  }

  .withdrawal-request-detail-grid .detail-grid-1 {
    margin-top: 30px;
  }

  .withdrawal-request-footer {
    background-color: transparent;
    margin-top: 10px;
    text-align: center;
    padding: 20px;
    font-size: 12px;
  }

  /* Genealogy View */
  .genealogy-view-member-card {
    height: 350px;
  }

  .genealogy-view-member-card {
    padding: 30px;
    justify-content: center;
    align-items: start;
  }

  /* Profile */
  .acc-setting-body .profile-tab-container .content-container-card {
    padding: 0px;
  }

  .profile-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 70px 1fr;
    grid-template-areas:
      "member"
      "options";
    gap: 1rem;
  }

  .profile-inputs-form input,
  .profile-inputs-form .form-select,
  .profile-inputs-form span {
    background-color: var(--referral-list-input);
  }

  .profile-card-grid-1,
  .profile-card-grid-2,
  .profile-card-grid-3 {
    background-color: transparent;
    border-radius: 3px;
    padding: 20px;
  }

  .profile-card-grid-1 h1,
  .profile-card-grid-1 hr,
  .profile-card-grid-2 h1,
  .profile-card-grid-2 hr,
  .profile-card-grid-3 h1,
  .profile-card-grid-3 hr,
  .profile-card-grid-3 p {
    display: none;
  }

  hr.first-name-front-hr,
  hr.about-me-last-hr {
    display: block;
    border: 1px solid #4e4e4e;
  }

  .start-bio-profile {
    margin-top: 30px;
  }

  .profile-button-group {
    justify-content: start;
    color: var(--black);
    font-size: 13px;
  }

  .profile-button-group button:nth-child(2) {
    display: none;
  }

  .profile-button-group-mobile-ver {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    gap: 10px;
  }

  .profile-button-group-mobile-ver button {
    border: none;
    padding: 6px;
    width: 100%;
    border-radius: 10px;
    color: #ffffff;
  }

  .profile-button-group-mobile-ver button:nth-child(1) {
    background-color: #3ab700;
  }

  .profile-button-group-mobile-ver button:nth-child(2) {
    background-color: var(--blue);
  }

  .profile-card-grid-1-member {
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .profile-card-grid-1-member .member-names h5 {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
    color: var(--blue);
  }

  .member-names {
    text-align: start;
    margin-left: 15px;
  }

  /* Feedback */
  .feedback-container .profile-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.1fr 1fr;
    grid-template-areas:
      "contact"
      "feedback";
    gap: 1rem;
  }

  .feedback-container .profile-card-grid-1 h1,
  .feedback-container .profile-card-grid-1 hr,
  .feedback-container .profile-card-grid-3 h1,
  .feedback-container .profile-card-grid-3 hr,
  .feedback-container .profile-card-grid-3 p {
    display: block;
  }

  .feedback-container .profile-card-grid-1 {
    background-color: var(--profile-card-background);
    border-radius: 3px;
    padding: 20px;
  }

  .robot-trading-container .banner-container-card {
    padding: 0px;
  }

  .banner-table-row {
    padding: 20px;
    display: none;
  }

  .curve-shape {
    height: 180px;
  }

  .promotion-dotted-container span {
    width: 8px;
    height: 8px;
    margin: 0px 6px;
  }

  .promotion-dotted-container span.active {
    width: 23px;
  }

  .promotion-rank {
    font-size: 14px;
    margin-top: -3px;
  }

  .requirement-row,
  .promotion-row {
    padding: 0px 30px;
  }

  .promotion-member {
    margin-top: 25px;
    margin-bottom: 20px;
  }

  .black-space {
    display: none;
  }

  .promotion-rank-reward {
    margin-top: 0px;
  }

  .meet-svg svg {
    width: 420px;
  }

  .rule-row {
    margin-top: 10px;
  }

  .requirement-title {
    font-size: 24px;
    width: 100%;
  }

  .requirement-meet-title {
    font-size: 18px;
  }

  .promotion-dotted-container {
    margin-top: 5px;
  }

  .topbar-right {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    position: absolute;
    bottom: 2%;
    right: 3%;
  }

  .topbar-helpline {
    font-size: 9px;
    font-weight: 300;
    color: var(--togglewhite);
  }

  .topbar-helpicon img {
    width: 18px;
  }

  .banner-promotion-bottom-bar {
    display: none;
  }

  .banner-mobile-footer {
    display: block;
    text-align: center;
    margin-top: 90px;
  }

  .banner-mobile-footer span {
    font-weight: 400;
    font-size: 14px;
    color: var(--termsgrey);
  }

  .banner-bottom-logo {
    background-color: var(--logo-bg);
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 10px;
  }

  .banner-bottom-logo img {
    width: 160px;
  }

  .banner-promotion-wrapper {
    padding-bottom: 0px;
  }

  .banner-promotion-layout-page {
    padding: 20px 0px 0px 0px;
  }

  .my-banner-rule {
    display: none;
  }

  .promotion-reward-description p.promotion-diamond-p {
    width: 350px;
  }

  .promotion-requirement-container {
    gap: 10px;
  }

  .my-banner-rule-row {
    padding-bottom: 70px;
  }
}

@media (max-width: 500px) {
  .landing-card-section {
    padding: 0px 10px 30px 10px;
  }

  .landing-card-container {
    gap: 30px 20px;
  }

  .landing-card-box {
    width: 120px;
    height: 120px;
    border-radius: 20px;
    padding: 2px 5px;
  }

  .landing-card-box svg {
    height: 16px;
  }

  .landing-card-box h2 {
    font-size: 9px;
    margin-top: 5px;
    margin-bottom: 3px;
    line-height: 1.1;
  }

  .landing-card-box p {
    font-size: 7px;
    width: 100px;
    margin-top: 3px;
  }

  .landing-strategy-section {
    margin-top: 0px;
  }

  .landing-strategy-container {
    gap: 15px;
  }

  .landing-strategy-box {
    width: 150px;
    height: 215px;
    padding: 23px 10px 0px 10px;
  }

  .landing-strategy-inner {
    gap: 5px;
    margin-top: 40px;
  }

  .landing-strategy-line {
    width: 80px;
  }

  .landing-strategy-box h2 {
    font-size: 10px;
  }

  .landing-strategy-box p {
    font-size: 8px;
  }

  .landing-reminder-left-inner {
    margin-top: 25px;
  }

  .landing-reminder-left-inner ul {
    width: 220px;
  }

  .landing-reminder-left-inner ul li {
    font-size: 9px;
  }

  .landing-easyway-right h2 {
    font-size: 12px;
  }

  .landing-easyway-right p {
    font-size: 9px;
    width: 200px;
    margin-top: 4px;
  }

  .landing-learnmore-btn {
    width: 90px;
    height: 22px;
    margin-top: 0px;
  }

  .landing-learnmore-btn span {
    font-size: 8px;
  }

  .landing-learnmore-btn button {
    width: 18px;
    height: 18px;
    font-size: 9px;
    line-height: 18px;
    margin-left: 9px;
    margin-right: -8px;
  }

  .registration-form-container {
    height: 450px;
    padding: 20px 35px 0px 35px;
    width: 400px;
  }

  .login-form-container {
    width: 410px;
    height: 390px;
    padding: 25px 72px 0px 72px;
  }

  .meet-svg svg {
    width: 350px;
  }

  .requirement-title {
    font-size: 22px;
  }

  .requirement-meet-title {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .landing-hero-title {
    font-size: 20px;
  }

  .landing-hero-top {
    top: 12%;
  }

  .landing-hero-top p {
    font-size: 10px;
    width: 42%;
    margin-top: 10px;
  }

  .landing-hero-btn {
    gap: 6px;
    width: 130px;
    height: 32px;
    margin-top: 10px;
  }

  .landing-hero-btn span {
    font-size: 9px;
  }

  .landing-hero-btn button {
    width: 25px;
    height: 25px;
    font-size: 14px;
    line-height: 25px;
    margin-left: 0px;
  }

  .landing-hero-bottom {
    right: 3%;
    width: 200px;
  }

  .landing-hero-bottom h2 {
    font-size: 13px;
  }

  .landing-hero-bottom p {
    font-size: 10px;
    margin-top: 10px;
  }

  .landing-logo {
    width: 130px;
    margin-top: 13px;
  }

  .checkbtn {
    line-height: 50px;
  }

  .registration-logo {
    width: 90%;
    margin: 0px;
  }

  .registration-checkbtn {
    line-height: 35px;
    margin-right: 0px;
  }

  .landing-loss-container {
    gap: 10px;
  }

  .landing-loss-background {
    width: 115px;
    height: auto;
  }

  .landing-loss-inner {
    gap: 5px;
  }

  .landing-loss-inner img {
    width: 8px;
  }

  .landing-loss-inner p {
    font-size: 7px;
  }

  .landing-reminder-container {
    gap: 10px;
  }

  .landing-reminder-left {
    gap: 13px;
  }

  .landing-reminder-left-inner ul {
    width: 200px;
  }

  .landing-reminder-left-inner {
    margin-top: 30px;
  }

  .landing-fuel-title {
    left: 50%;
  }

  .contact-container {
    width: 420px;
  }

  .robot-trading-container .content-container-card {
    padding: 15px 10px;
  }

  .trading-history-tab .nav-link {
    padding: 2px 8px;
    font-size: 14px;
  }

  .referral-overview-container .content-container-card {
    padding: 20px 10px;
  }

  .referral-overview-first-row-card h2,
  .account-overview-title h1 {
    font-size: 12px;
  }

  .account-overview-title .title-tag,
  .shorten-url .title-tag {
    font-size: 10px;
  }

  .referral-overview-second-row-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "account"
      "sponsor"
      "recent";
    gap: 1rem;
  }

  .referral-overview-second-row-card {
    margin-bottom: 10px;
  }

  .account-detail-grid {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-areas:
      "account1 account2"
      "account1 account3";
  }

  .robot-trading-container .banner-container-card {
    padding: 0px;
  }
}

@media (max-width: 431px) {
  .hero-section,
  .landing-card-section,
  .landing-advantage-section,
  .landing-strategy-section,
  .landing-loss-section,
  .landing-reminder-section,
  .landing-easyway-section,
  .landing-footer-section,
  .hide-nav {
    display: none;
  }

  .landing-logo-section {
    padding: 40px 0px 20px 0px;
    text-align: center;
  }

  .landing-logo-section img {
    width: 240px;
  }

  .landing-content-section {
    position: relative;
    margin-top: 0px;
    padding-top: 35px;
  }

  .landing-content-section img {
    width: 100%;
    margin-top: -14px;
  }

  .landing-carousel-container {
    transition: all 0.4s ease;
  }

  .landing-hero-title {
    font-size: 32px;
    width: 100%;
  }

  .landing-hero-top {
    top: 0%;
  }

  .landing-mobile-description {
    position: absolute;
    top: 15%;
    width: 100%;
    width: 320px;
    text-align: left;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .landing-mobile-description h2 {
    font-family: "Roboto", sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--black);
  }

  .landing-mobile-description p {
    font-family: "Roboto", sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: var(--black);
    line-height: 1.2;
  }

  .landing-bullet-section {
    margin-top: 10px;
  }

  .landing-bullet-container {
    text-align: center;
  }

  .landing-bullet-container .carousel-dot {
    height: 10px;
    width: 10px;
    margin: 0 8px;
    background-color: var(--contactform);
    border-radius: 50%;
    display: inline-block;
    transition: all 0.4s ease;
    cursor: pointer;
  }

  .landing-bullet-container .carousel-active {
    background-color: var(--blue);
  }

  .landing-hero-top p {
    font-size: 12px;
    width: 65%;
    margin-top: 10px;
    color: var(--linegrey);
  }

  .landing-link {
    color: var(--linkgrey);
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 300;
  }

  .landing-crafted {
    color: var(--linkgrey);
    font-family: "Roboto", sans-serif;
    font-size: 13px;
    font-weight: 300;
    text-align: center;
    margin-top: 5px;
  }

  .landing-mobile-bottom-container button {
    height: 40px;
    width: 85%;
    color: var(--togglewhite);
    margin-top: 0px;
    margin-bottom: 20px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--blue);
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 400;
  }

  .landing-mobile-bottom-container button:hover {
    background: var(--darkpurple);
  }

  .registration-body {
    background-image: url(../img/registration-bg-mobile.png);
  }

  .registration-section {
    justify-content: start;
    height: auto;
  }

  .registration-container {
    margin-top: 145px;
  }

  .registration-form-container {
    height: auto;
    padding: 20px 35px 20px 35px;
    width: 380px;
    margin-top: 20px;
  }

  .registration-form .column {
    flex-wrap: wrap;
  }

  .registration-form :where(.agreement-option, .agreement) {
    row-gap: 10px;
  }

  .registr ation-form .registration-input-box {
    margin-top: 5px;
  }

  .registration-logo img {
    width: 200px;
    height: auto;
  }

  .registration-nav {
    top: 9%;
    /* padding: 10px 20px; */
    flex-direction: column;
    align-items: end;
    width: 370px;
  }

  .registration-logo {
    width: auto;
    margin: 0 auto;
    order: 2;
  }

  .registration-checkbtn {
    order: 1;
    padding: 10px 35px 0px 0px;
  }

  .registration-title {
    order: 3;
    margin: 0 auto;
    margin-top: 8px;
    font-size: 23px;
  }

  .registration-crafted {
    bottom: 0%;
  }

  #check:checked ~ .registration-ul {
    display: block;
    left: auto;
    right: 0%;
    top: 4%;
  }

  .registration-nav ul li {
    text-align: right;
    padding: 0px 20px;
  }

  .login-section {
    justify-content: center;
    height: 100%;
  }

  .login-container {
    margin-top: 0px;
  }

  .relative-crafted {
    position: relative;
    margin-top: 40px;
  }

  .email-section {
    align-items: start;
  }

  .email-container {
    width: 100%;
    padding: 0px;
    margin-top: 140px;
  }

  .email-content-row {
    width: 310px;
    margin: 0 auto;
    margin-top: 20px;
    padding: 30px 10px;
  }

  .email-btn-row {
    padding: 12px 0px;
  }

  .common-icon {
    width: 63px;
    height: 63px;
    font-size: 33px;
  }

  .contact-body {
    background: var(--background);
  }

  .contact-title {
    display: none;
  }

  .contact-checkbtn {
    display: none;
  }

  .contact-us-box {
    text-align: left;
  }

  .contact-us-box span {
    line-height: 55px;
    margin-left: 10px;
  }

  hr.contact-us-hr {
    margin: 0 0 20px 0;
  }

  .contact-container {
    width: 350px;
    padding: 0;
  }

  .contact-content-row {
    padding: 15px 20px 10px 20px;
    background-color: var(--background);
    box-shadow: none;
    outline: none;
    margin-bottom: 10px;
  }

  .contact-nav {
    background-color: var(--togglegrey);
    padding: 0px 10px 10px 10px;
  }

  .contact-crafted {
    display: none;
  }

  .landing-logo-section,
  .landing-content-section,
  .landing-bullet-section,
  .landing-mobile-bottom {
    display: block;
  }

  .modal-content {
    width: 80%;
    text-align: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: 0 auto;
  }

  .important-reminder-modal .important-reminder-en-body {
    padding: 30px;
  }

  .important-reminder-en-title h1 {
    font-size: 23px;
  }

  .important-reminder-en-p p {
    font-size: 17px;
  }

  .email_verified-p {
    width: 240px;
  }

  .requirement-row,
  .promotion-row {
    padding: 0px 15px;
  }

  .meet-svg svg {
    width: 330px;
    height: 130px;
  }

  .title-svg svg {
    width: 250px;
    height: 60px;
  }

  .title-svg-small svg {
    width: 200px;
  }

  .requirement-title {
    font-size: 18px;
  }

  .requirement-meet-title {
    font-size: 13px;
  }

  .promotion-requirement-icon {
    width: 25px;
    height: 25px;
  }

  .promotion-requirement-icon img {
    width: 30px;
    margin-left: 6px;
  }

  .promotion-row {
    margin-bottom: 20px;
  }

  .requirement-row {
    margin-top: 10px;
  }

  .promotion-requirement-container {
    margin-top: 0px;
  }

  .promotion-requirement-box {
    gap: 15px;
  }

  .promotion-reward-description {
    height: 50px;
  }

  .promotion-reward-description h2,
  .promotion-reward-description span,
  .promotion-rule-container span {
    font-size: 14px;
  }

  .promotion-rule-container {
    margin-top: 10px;
    margin-bottom: 70px;
  }

  .banner-mobile-footer {
    margin-top: 30px;
  }

  .banner-mobile-footer span {
    font-size: 12px;
  }

  .banner-bottom-logo {
    height: 50px;
    margin-top: 6px;
  }

  .banner-bottom-logo img {
    width: 120px;
  }

  .diamond-rule-row {
    margin-top: 70px;
  }

  .promotion-reward-description p.promotion-diamond-p {
    width: 300px;
  }

  .my-banner-rule-row {
    padding-bottom: 50px;
  }
}

@media (max-width: 390px) {
  .registration-container {
    padding-bottom: 50px;
    margin-top: 160px;
  }

  .registration-title {
    margin-top: 6px;
  }

  .registration-form-container {
    height: auto;
    padding: 13px 30px;
    width: 300px;
    border-radius: 20px;
  }

  .registration-logo img {
    width: 200px;
    height: auto;
  }

  .registration-nav {
    /* top: 7%; */
    /* padding: 10px 20px 0px 0px; */
    top: 14%;
    width: 300px;
  }

  .registration-logo {
    width: auto;
  }

  .contact-container {
    width: 310px;
  }

  .landing-hero-title {
    font-size: 28px;
  }

  .landing-hero-top p {
    font-size: 10px;
    width: 60%;
  }

  .landing-mobile-description h2 {
    font-size: 20px;
  }

  .landing-mobile-description p {
    font-size: 10px;
  }

  .landing-link {
    font-size: 13px;
  }

  .trading-history-container .content-container-card {
    padding: 20px 10px;
  }

  .trading-history-tab .nav-link {
    padding: 2px 6px;
    font-size: 13px;
  }

  form.search-form input[type="text"] {
    font-size: 14px;
  }

  form.search-form button {
    padding: 8.2px;
    font-size: 14px;
  }

  .curve-shape {
    height: 150px;
    border-bottom-left-radius: 80px;
    border-bottom-right-radius: 80px;
  }

  .meet-svg svg {
    width: 280px;
    height: 100px;
  }

  .title-svg svg {
    width: 200px;
    height: 60px;
  }

  .title-svg-small svg {
    width: 160px;
    height: 60px;
  }

  .requirement-title {
    font-size: 16px;
  }

  .requirement-meet-title {
    font-size: 12px;
  }

  .promotion-rank-description img {
    width: 80px;
  }

  .promotion-rank-title {
    font-size: 26px;
    margin-top: -13px;
  }

  .promotion-rank-reward {
    margin-top: 20px;
  }

  .promotion-reward-svg {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .promotion-reward-svg svg {
    width: 25px;
  }

  .promotion-reward-box {
    gap: 15px;
  }

  .promotion-reward-description p {
    font-size: 12px;
  }

  .promotion-reward-description h2,
  .promotion-reward-description span,
  .promotion-rule-container span {
    font-size: 12px;
  }

  .promotion-requirement-icon {
    width: 13px;
    height: 13px;
  }

  .promotion-requirement-icon img {
    width: 20px;
    margin-left: 4px;
  }

  .promotion-reward-description {
    height: 30px;
  }

  .requirement-meet-box {
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .promotion-member {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .promotion-member img {
    width: 34px;
  }

  .progress {
    height: 4px;
  }

  .progress-bar {
    height: 4px;
  }

  .promotion-rank {
    font-size: 12px;
  }

  .promotion-dotted-container span {
    width: 6px;
    height: 6px;
    margin: 0px 4px;
  }

  .promotion-dotted-container span.active {
    width: 19px;
  }

  .promotion-reward-diamond {
    margin-top: 8px;
  }

  .promotion-reward-description p.promotion-diamond-p {
    width: 230px;
    line-height: 1.1;
  }
}

@media (max-width: 350px) {
  .landing-hero-title {
    font-size: 26px;
  }

  .landing-hero-top p {
    font-size: 8px;
    width: 55%;
  }

  .landing-mobile-description {
    width: 90%;
  }

  .landing-mobile-description h2 {
    font-size: 18px;
  }

  .landing-mobile-description p {
    font-size: 10px;
  }
}

@media (min-height: 700px) {
  .login-container {
    margin-top: 50px;
  }
}

@media (max-height: 636px) {
  .email-btn-row {
    padding: 8px 0px;
  }

  .common-icon {
    width: 43px;
    height: 43px;
    font-size: 23px;
  }

  .email-content-row {
    height: 340px;
  }
}

@media (max-height: 570px) {
  .registration-nav {
    top: 12%;
  }

  .registration-container {
    margin-top: 110px;
  }
}

@media (min-width: 431px) and (max-height: 670px) {
  /* .registration-nav {
      top: 6%;
    } */

  .registration-section {
    height: auto;
  }

  .registration-container {
    padding-bottom: 50px;
  }

  .login-section {
    height: 100%;
  }

  .login-container {
    padding-bottom: 0px;
  }
}

@media (max-width: 431px) and (min-height: 800px) {
  .registration-section {
    height: 100%;
  }
}

@media (min-width: 431px) and (max-height: 700px) {
  .registration-nav {
    top: 10%;
  }

  .custom-registration-container {
    margin-top: 100px;
  }

  .custom-form-container {
    width: 540px;
    height: 460px;
    padding: 20px 60px 0px 60px;
    margin-top: 10px;
  }

  .custom-registration-container .registration-input-box {
    margin-top: 10px;
  }

  .login-container {
    margin-top: 120px;
  }

  .contact-nav {
    top: 15%;
  }
}

@media (min-width: 1300px) and (min-height: 700px) {
  .contact-section {
    height: 100%;
  }
}

@media (min-width: 431px) and (max-height: 600px) {
  .registration-section {
    height: auto;
  }

  .login-section {
    height: 100%;
  }

  .login-container {
    margin-top: 60px;
  }
}

@media (max-width: 350px) and (min-height: 800px) {
  .registration-container {
    padding-bottom: 50px;
    margin-top: 130px;
  }

  .registration-nav {
    top: 8%;
  }
}