@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter/Inter.ttf");
}

@font-face {
  font-family: "Nunito Sans";
  src: url("./assets/fonts/Nunito_Sans/NunitoSans-Regular.ttf");
}
@font-face {
  font-family: "Juventus Fans";
  src: url("./assets/fonts/Juventus-Fans-Regular/Juventus-Fans-Regular.woff");
}

@font-face {
  font-family: "Montecatini Pro";
  src: url("./assets/fonts/Tipografia\ Corporativa\ Montecatini/Louise Fili Ltd - Montecatini Pro Normale.woff");
}

html,
body {
  padding: 0;
  margin: 0;
  background-color: #860303;
  font-family: "Inter", sans-serif;
  color: #fff;
  /* max-width: 100%; */
  overflow-x: hidden;
  scroll-behavior: smooth;
  text-align: center;
  /* min-width: 1440px; */
  /* max-width: 1440px; */
  /* min-width: 1200px; */
  max-width: 1920px;
  margin: 0 auto;
  /* max-width: 1920px; */
  /* resize: both; */
  /* overflow: hidden; */
}

.header {
  background-image: url("./assets/images/heading.jpg");
  width: 100%;
  padding: 128px 120px 50px;
  /* padding: 128px 220px 50px; */
  height: auto;
  background-size: cover;
  background-repeat: no-repeat;

  margin-bottom: -10px;
  text-align: left;
}

.header-bold {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  font-size: 72px;
  line-height: 87px;
  letter-spacing: 0.04em;

  color: #ffffff;

  text-shadow: 0px 6px 4px rgba(0, 0, 0, 0.3);
}

.header-smaller {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  font-size: 48px;
  line-height: 58px;
  letter-spacing: 0.04em;

  color: #ffffff;

  text-shadow: 0px 6px 4px rgba(0, 0, 0, 0.3);
}

.header-caption {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 29px;
  color: #ffffff;
  text-shadow: 0px 6px 4px rgba(0, 0, 0, 0.3);
}

.heading-button-container {
  padding: 24px 0;
}

.cta-heading {
  background: linear-gradient(
    180deg,
    #e7b846 10.42%,
    #fff2a4 27.08%,
    #e7b846 53.12%,
    #e0bc38 72.4%,
    #d59922 89.06%
  );
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 40px;

  border: none;
  width: 320px;
  height: 80px;

  cursor: pointer;

  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 29px;
  text-align: center;
  letter-spacing: 0.04em;

  color: #0d0d0d;
  padding: 15px 20px;
}

.cta-heading a {
  text-decoration: none;
  color: #0d0d0d;
}

.cta-heading:hover,
.button-start:hover {
  background: linear-gradient(
    0deg,
    #e7b846 10.42%,
    #fff2a4 27.08%,
    #e7b846 53.12%,
    #e0bc38 72.4%,
    #d59922 89.06%
  );
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.main-content img{
  width: 100%; 
  height: auto; 
  display: block; 
  margin-left: auto; 
  margin-right: auto;
}

.red-inverted-gradient {
  background-image: url("./assets/images/background-elem/Brandmark.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;

  padding: 30px 120px;
  /* padding: 30px 0px; */
  text-align: center;
  position: relative;
  width: 100%;
  z-index: 10;

  display: flex;
  justify-content: space-around;

  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px);
}

.red-inverted-content {
  display: flex;
  gap: 10px;
  text-align: center;
}

.official-partner-text {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #ffffff;
  padding: 25.5px 24px;
}

.official-partner-text a {
  text-decoration: none;
  color: #ffffff;
}

a {
  text-decoration: none;
}

.svg-images {
  width: 100%;
}

.juventus-image {
  width: 56px;
}

.sevilla-image {
  width: 76px;
}

.svg-images-level {
  margin: 10px 0spx;
}

#toAscension:hover,
#toBenefits:hover,
#toSupport:hover,
#toReferReward:hover {
  background: #0d0d0d;
  border-radius: 64px;
  border-radius: 64px;

  cursor: pointer;
}

.tab-active {
  background: #0d0d0d;
  border-radius: 64px;
  border-radius: 64px;

  cursor: pointer;
  min-width: 180px;
}

.tab-button {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 150%;
  color: #ffffff;
  padding: 16px 30px;

  cursor: pointer;
}

.inactive {
  background: #430808;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 64px;
}

.tab-button a {
  color: #fff !important;
  text-decoration: none !important;
}

a:hover {
  color: #fff !important;
  text-decoration: none !important;
}

.subheading,
.subheading-rajah {
  background: linear-gradient(
    180deg,
    #e7b846 21.21%,
    #e7b846 26.91%,
    #fff2a4 37.93%,
    #e7b846 58.59%,
    #e0bc38 66.79%,
    #d59922 75.15%,
    #d59922 80.17%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;

  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-size: 32px;
  line-height: 64px;
}

.subheading-rajah {
  font-size: 48px;
}

.main-heading {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 85px;
  line-height: 98.6px;

  color: #ffffff;

  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  margin: 0.5px auto 10px;
}

.main-heading-sm {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 85px;
  line-height: 98.6px;

  color: #ffffff;

  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  margin: 0.5px auto 10px;
}

.section-boxes {
  display: flex;
  gap: 48px;
}

.first-box {
  background-image: url("./assets/images/background-elem/bg-box-1.png");
  background-repeat: no-repeat;

  /* width: 386px; */
  width: 486px;
  height: 380px;

  border-radius: 12px;

  text-align: center;
  cursor: pointer;
  /* margin-left: -20px; */

  background-size: cover;
}

.second-box {
  background-image: url("./assets/images/background-elem/bg-box-2.png");
  background-repeat: no-repeat;

  width: 486px;
  height: 380px;

  border-radius: 12px;

  text-align: center;
  cursor: pointer;

  background-size: cover;
}

.third-box {
  background-image: url("./assets/images/background-elem/bg-box-3.png");
  background-repeat: no-repeat;

  width: 486px;
  height: 380px;
  border-radius: 12px;

  text-align: center;
  cursor: pointer;

  background-size: cover;
}

.first-box a,
.second-box a,
.third-box a {
  text-decoration: none;
  color: #fff;
}

.box-icon {
  /* margin-top: 88px; */
  margin-top: 138px;
}

.box-text {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 150%;

  color: #ffffff;
  padding: 10px 0;
}

.paragraph {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;

  color: #ffffff;

  padding: 24px 0px;
}

.ascension-section {
  margin: 80px auto 32px;
}

.level-plates {
  display: flex;
  gap: 20px;
}

.red-radial-gradient {
  background: radial-gradient(
    311.25% 68.52% at 50% 0%,
    #860303 0%,
    #0d0d0d 56.77%,
    #0d0d0d 100%
  );
  text-align: center;
}

.red-section {
  display: flex;
  gap: 20px;
  justify-content: center;
}

#faq {
  background: radial-gradient(
    311.25% 68.52% at 50% 0%,
    #860303 0%,
    #0d0d0d 56.77%,
    #0d0d0d 100%
  );

  display: flex;
  justify-content: space-between;
  /* justify-content: center; */
  gap: 50px;
}

#beTheKing,
#faq,
#benefits,
#ascencion,
.article {
  text-align: left;
}

#beTheKing {
  padding: 172px 120px 0px;
  /* padding: 172px 220px 0px; */
}

#ascencion {
  padding: 0px 120px;
  /* padding: 0px 220px; */
}
#faq,
#benefits,
.article {
  padding: 24px 120px;
  /* padding: 24px 220px; */
}

#mobile-tab {
  display: none;
  background: #430808;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 7px;
  margin: 5px 8px 10px;
}

#mobile-tab-container {
  display: flex;
  padding: 3px 4px;
  justify-content: space-around;
}

.mobile-active {
  background: #0d0d0d;
  border-radius: 5px;
}

.red-sect-heading {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 64px;
  line-height: 150%;

  color: #ffffff;

  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);

  padding: 4px 16px;
  width: 100%;
}

.dark-card {
  background: #090909;
  box-shadow: -4px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  padding: 36px 44px;
  /* width: 570px; */
  /* min-width: 570px; */
  /* width: 760px; */
  width: 650px;
  text-align: left;
  margin: 1px 0 15px;
}

.yellow-title {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 150%;

  background: linear-gradient(
    180deg,
    #e7b846 21.21%,
    #e7b846 26.91%,
    #fff2a4 37.93%,
    #e7b846 58.59%,
    #e0bc38 66.79%,
    #d59922 75.15%,
    #d59922 80.17%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  margin-bottom: 12px;
}

.faq-paragraph {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;

  color: #ffffff;
}

.more-right {
  text-align: right;
  padding: 16px 8px;
  cursor: pointer;
  position: relative;
  left: -45px;
}

.more-right span {
  position: relative;
  top: 5px;
  left: 5px;
}

.more-right:hover {
  color: #fdc51c;
}

.more-right a {
  color: #fff;
}

.more-right img {
  vertical-align: bottom !important;
}

.main-container {
  padding: 60px 120px;
  text-align: left;
}

.article {
  text-align: left;
}

.banner {
  background-image: url("./assets/images/banner-bg/reward.png");
  width: 100%;
  padding: 100px 48px 32px;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 754px;
  height: 100%;
  margin-bottom: 80px;

  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  border-radius: 12px;
}

.banner-p {
  width: 582px;
  font-weight: 400px;
  margin-top: -36px;
}

.darker-bg {
  background-image: url("./assets/images/banner-bg/premium.jpg");
  background-repeat: no-repeat;
  padding: 48px 0px;
  text-align: center;
  width: 100%;
  background-size: cover;
}

.h2-white {
  font-family: "Inter";
  font-style: normal;
  margin-bottom: 24px;
  font-weight: 700;
  font-size: 64px;
  line-height: 150%;

  text-align: center;

  color: #ffffff;

  margin-bottom: 69px;
}

.glass-morphism-container {
  display: flex;
  gap: 20px;
  /* gap: 10px; */
  justify-content: center;
  margin: 0 120px;
  flex-wrap: wrap;
  flex-direction: row;
}

.glassmorph-card {
  box-sizing: border-box;
  background: linear-gradient(
    180deg,
    rgba(137, 137, 137, 0.3) 0%,
    rgba(255, 255, 255, 0.2) 0.01%,
    rgba(255, 255, 255, 0.02) 100%
  );
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px);
  width: 387px;
  /* width: 480px; */
  border-radius: 12px;

  text-align: center;
  padding: 5%;
}

.glassmorph-title {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  font-size: 24px;
  line-height: 150%;

  text-align: center;

  color: #ffffff;
  padding: 8px 8px;
}

.glassmorph-circle {
  width: 125px;
  height: 125px;
  box-sizing: border-box;
  background: linear-gradient(
    180deg,
    rgba(137, 137, 137, 0.3) 0%,
    rgba(255, 255, 255, 0.2) 0.01%,
    rgba(255, 255, 255, 0.02) 100%
  );
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 100%;
  margin: 0 auto;
  padding: 8px 8px;
}

.glassmorph-description {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 150%;
  text-align: center;

  color: #ffffff;
  padding: 8px 8px;
}

.bg-king {
  background-image: url("./assets/images/banner-bg/king-bg.png");
  background-repeat: no-repeat;
  width: 100%;
  background-size: cover;
  padding: 90px 120px;
  /* padding: 90px 220px; */
  text-align: center;
  min-height: 300px;
  margin-top: -20px;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.vip-header {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-size: 48px;
  line-height: 58px;

  display: flex;
  align-items: center;

  color: #ffffff;
  padding: 4px 42px;
}

.vip-text {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 32px;
  line-height: 39px;

  display: flex;
  align-items: center;

  color: #ffffff;
  padding: 4px 42px;
}

.button-part {
  display: flex;
  float: right;
}

.button-part a {
  text-decoration: none !important;
}
.button-start {
  background: linear-gradient(
    180deg,
    #e7b846 10.42%,
    #fff2a4 27.08%,
    #e7b846 53.12%,
    #e0bc38 72.4%,
    #d59922 89.06%
  );
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  width: 100%;

  border: none;

  padding: 45px 45px;

  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 29px;

  text-align: center;
  letter-spacing: 0.02em;

  color: #0d0d0d;
  cursor: pointer;
}

footer {
  background: #111111;
  padding: 24px 120px;
  text-align: center;

  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 64px;
  line-height: 150%;

  text-align: center;

  color: #787878;
  position: relative;
  bottom: 0;
}

.text-caption {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-size: 16px;
  line-height: 150%;
  text-align: center;
  letter-spacing: 0.02em;

  color: #ffffff;
}

.IDR {
  box-sizing: border-box;
  background: #ffffff;
  border: 0.5px solid #dddddd;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 12px;

  font-family: "Nunito Sans", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 19px;
  text-align: center;
  width: 90%;
  color: #000000;
  padding: 10px 20px;
  margin: 30px auto;
}

.IDR-mobile {
  background: #0d0d0d;
  border-radius: 8px;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  border: none;

  font-family: "Nunito Sans", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 19px;
  text-align: center;
  width: 90%;
  color: #fff;
  padding: 10px 16px;
  margin: 30px 0px 10px;
}

.coin-image-tbl {
  width: 62px;
}

.th {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 150%;

  text-align: center;

  color: #ffffff;
}

.table {
  border: none;
}

.table-first-col {
  text-align: left;
  border-right: 1px solid #707070;
  background: #050505;
  padding: 5px 15px 5px;

  width: 20%;
}

.table-col {
  padding: 5px 15px 5px;
  text-align: center;
  background: #101010;

  /* width: 8.06%; */
  width: 9%;
}

.table-col:first-child,
.table-col:nth-child(2),
.table-col:nth-child(3),
.table-col:nth-child(4) {
  border-right: 1px solid #707070;
}

.gradient-tbl-title {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 150%;

  background: linear-gradient(
    180deg,
    #e7b846 21.21%,
    #e7b846 26.91%,
    #fff2a4 37.93%,
    #e7b846 58.59%,
    #e0bc38 66.79%,
    #d59922 75.15%,
    #d59922 80.17%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;

  text-align: left;
}

.white-tbl-description {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 28px;
  color: #ffffff;
  margin: 1px 5px;
}

.black-tbl-description {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 28px;

  color: #0d0d0d;

  margin: 1px 5px;
}

.th-dark {
  color: #0d0d0d;
  text-align: center;
}
.tbl-gold-bg {
  /* background: rgba(233, 177, 0, 0.6) 0%; */
  background: #eece6b;
  opacity: 0.95;

  text-align: center;

  box-sizing: border-box;

  border: none;

  width: 9%;
}

.tbl-gold-bg img,
.tbl-platinum-bg img,
.tbl-diamond-bg img,
.tbl-emerald-bg img {
  margin-bottom: -5px;
  margin-top: -5px;
  width: 30px;
}

.tbl-platinum-bg {
  box-sizing: border-box;
  background: #e1f9f7;
  border-left: 1px solid #0d0d0d;
  position: relative;

  text-align: center;

  width: 9%;
}

.tbl-diamond-bg {
  box-sizing: border-box;
  border-left: 1px solid #0d0d0d;
  background: #efefef;

  text-align: center;

  width: 9%;
}

.tbl-emerald-bg {
  box-sizing: border-box;
  border-left: 1px solid #0d0d0d;
  background-repeat: repeat-y;
  background: #67c87c;

  text-align: center;

  width: 9%;
}

.collapsible {
  cursor: pointer;

  display: flex;
  justify-content: space-between;
}

#collapse-1,
#collapse-2,
#collapse-3,
#collapse-4,
#collapse-5,
#collapse-6,
#collapse-7,
#collapse-8,
#collapse-9 {
  display: none;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  margin: 16px auto;
}

.icon-caret-down,
.icon-caret-up {
  margin: 5px 10px;
}

.faq-paragraph-bold {
  font-weight: 700;
}

.tab-container {
  position: relative;
  z-index: 99;
  top: 50px;
  left: 0;
  text-align: center;
  margin: 0 120px;
}
/**btuttton */
.tab-button-container {
  display: flex;
  /* gap: 30px; */
  gap: 0;
  /* margin: 0px 120px; */
  /* justify-content: space-between; */
  /* margin-left: -5%; */
  margin-left: -5px;
  justify-content: space-evenly;
}

.dark-box {
  display: flex;
  gap: 10px;
  /* justify-content: space-around; */
  justify-content: space-between;
}

.coins {
  display: flex;
  /* justify-content: center; */
  justify-content: space-evenly;
  gap: 10px;
  margin: 30px auto;
}

.coins-label {
  margin: 4px auto;
}

#tbl-desktop {
  display: unset;
}

/* table {
  width: 95% !important;
} */

.tbl-containers {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

#tbl-mobile-default,
#tbl-mobile-copper,
#tbl-mobile-bronze,
#tbl-mobile-silver,
#tbl-mobile-gold,
#tbl-mobile-platinum,
#tbl-mobile-diamond,
#tbl-mobile-emerald {
  display: none;
  border-radius: 4px;
  margin: -50px auto 5px;
}

nav {
  background: #430808;
  padding: 10px 16px;
  display: none;
  width: 100%;
}

#burger {
  cursor: pointer;
  padding: 5px 5px;
}

#flyout {
  padding: 16px 8px;
  background: radial-gradient(
    125.08% 125.08% at 50% 0%,
    #860303 0%,
    #0d0d0d 79.46%,
    #0d0d0d 100%
  );
  position: relative;
  position: absolute;
  width: 0;
  top: 5.5%;
  left: 1%;
  z-index: 100;
  display: none;
  transition: width 0.1s;
  opacity: 0;
  width: 190px;
}

#flyout .mob-item {
  margin: 10px 0;
  line-height: 14px;
  font-size: 12px;
  padding: 8px 8px;
  text-align: center;
  cursor: pointer;
  display: block;

  text-decoration: none;
  color: #fff;
}

#flyout .list-active {
  background: #0d0d0d;
  border-radius: 64px;
}

#flyout .list {
  background: #430808;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 64px;
}

.juventus-border {
  border: 0.466555px solid #ffffff;
  width: 1px;
  height: 90%;
  transform: rotate(0deg);
}

.juventus-logo,
.sevilla-logo {
  margin-right: 6px;
}

.juventus {
  font-family: "Juventus Fans";
  font-style: normal;
  font-weight: 700;
  font-size: 27.8289px;
  line-height: 33px;

  color: #ffffff;
  text-align: left;
  margin-top: -10px;
  margin-left: 6px;
}

.sevilla {
  font-family: "Montecatini Pro";
  font-style: normal;
  font-weight: 800;
  font-size: 19.7895px;
  line-height: 24px;
  text-align: left;
  color: #ffffff;
  margin-left: 6px;
}

.button-prev {
  position: absolute;
  left: 1.5%;
  top: 50.5%;
  display: none;
}

.button-next {
  position: absolute;
  top: 50.5%;
  left: 90%;
  display: none;
}

#faq-card,
#legalitas-card,
#faq-title,
#legalitas-title {
  display: block;
}

#ekings-logo img {
  width: 80px;
}

/****mobile slider for testimonial ***/
#myCarousel {
  display: none;
}

.carousel-control.left,
.carousel-control.right {
  background-image: none;
}

/** smaller device ***/
/* @media only screen and (min-width: 280px) and (max-width: 480px) and (-webkit-device-pixel-ratio: 3) { */
@media (max-width: 575.98px) {
  body {
    background-image: url("./assets/images/background-elem/mobile-radial.png");
    background-size: cover;
    /* background-position: left; */
  }

  .main-content {
    background: transparent;
  }

  .red-radial-gradient {
    background: transparent;
  }

  .tab-container {
    top: 0px;
    /* margin-bottom: 5px; */
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 16px 16px !important;
    left: 0;
    margin: 0 -10px 5px !important;
  }

  .tab-button-container {
    margin: 20px 5px !important;
    justify-content: none;
    flex-wrap: wrap !important;
    /* gap: 5px !important; */

    gap: 3px !important;
    justify-content: flex-start;
  }

  .tab-button {
    font-size: 9px;
    line-height: 11px;
    padding: 5px 8.5px !important;
  }

  #beTheKing {
    padding: 16px 24px 24px !important;
  }

  #ascencion {
    padding: 0px 24px !important;
    margin: 0px auto;
  }

  .dark-box {
    flex-direction: row;
    justify-content: space-around;
    gap: 5px;
    margin: 0 auto;
  }

  .box-text {
    font-size: 9px;
    line-height: 11px;
    padding: 0 0;
  }

  .box-icon {
    margin-top: 21px;
  }

  .box-icon img {
    width: 19px;
  }

  .first-box {
    margin-left: -10px;
  }

  .first-box,
  .second-box,
  .third-box {
    width: 104px;
    height: 72px;
    border-radius: 4px;
    background-position: top center;
    background-size: contain;
  }

  .paragraph {
    font-size: 9px;
    line-height: 11px;
  }

  .col {
    flex-basis: 100% !important;
  }

  .bg-king {
    flex-direction: column;

    /* padding: 16px 20px !important; */
    /* padding: 16px 0px !important; */
    padding: 8px 0px 48px !important;
    margin: 0px auto;

    min-height: 150px;
    background-image: url("./assets/images/background-elem/red-royal-chair.png");
    background-size: cover;
    background-position: center;
  }

  .header {
    padding: 46px 16px 23px;
    background-position: top right;
    background-size: fit;
  }

  .header-smaller {
    font-size: 16px;
    line-height: 19px;
  }

  .red-inverted-gradient {
    padding: 20px 16px !important;

    box-shadow: none !important;
    justify-content: flex-start;
    gap: 25px;
    background-position: center;
  }

  .table {
    flex-direction: column;
  }

  .table-first-col {
    width: 60%;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  }

  .table-col {
    width: 40%;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  }

  #beTheKing,
  #faq,
  #benefits,
  #ascencion,
  .article {
    padding: 10px 20px;
  }

  .article {
    padding-bottom: 68px !important;
  }

  #banner-header {
    position: relative;

    top: -75px;
    text-align: center;
  }

  #faq {
    background: transparent;
  }

  .vip-header {
    /* margin: 15px 16px 4px; */
    margin: 15px 0 4px;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    padding: 2px 8px;
  }

  .vip-text {
    margin: 4px 16px 8px;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    padding: 2px 8px;
  }

  .button-part {
    display: block;
    width: 100%;
  }

  .button-start {
    padding: 14px 19px;
    font-size: 9px;
    line-height: 11px;
    width: 50%;
  }

  .dark-card {
    /* width: 100%; */
    width: 328px !important;
    padding: 12px 8px;
    border-radius: 4px 4px 0px 0px;
    margin: 16px auto;
  }

  #faq {
    display: block;
  }

  .more-right {
    text-align: right;
    left: 0;
    font-size: 12px;
    line-height: 150%;
  }

  .more-right img {
    vertical-align: bottom !important;
  }

  /* .collapsible {
   
    width: 20.5em;
  } */

  .banner {
    padding: 30px 16px;
    background-position: center;
    min-height: 272px;
    margin: 25px 0;
  }

  .banner-p {
    width: 100%;
  }

  .main-heading {
    font-size: 24px;
    line-height: 29px;
  }

  .main-heading-sm {
    font-size: 24px;
    line-height: 29px;
    padding: 2px 0px;
    margin: 0.5px auto 0;
  }

  .subheading {
    font-size: 16px;
    line-height: 19px;
    margin: 0 auto;
  }

  .red-inverted-content {
    gap: 10px;
  }

  .red-sect-heading {
    font-size: 12px;
    line-height: 15px;
    padding: 3px 16px;
  }

  .svg-images {
    width: 50%;
    margin: 5px 0;
  }

  .juventus-image {
    width: 30px;
    margin-right: 15px;
    margin-top: 5px;
  }

  .sevilla-image {
    width: 40px;
    margin: 0px 15px;
  }

  #tbl-desktop {
    display: none;
  }

  .juventus-logo,
  .sevilla-logo {
    margin-right: -15px !important;
  }

  .juventus-border {
    height: 45px;
    margin-top: 5px;
  }

  .subheading-rajah {
    font-size: 16px;
    line-height: 150%;
  }

  .darker-bg {
    padding: 8px 16px;

    /* height: 380px; */
    height: 360px;
  }

  .h2-white {
    font-size: 20px;
    line-height: 150%;
  }
  nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .juventus {
    font-size: 11.8421px;

    line-height: 16px;
    padding: 10px 0px;
  }

  .sevilla {
    font-size: 8.42105px;

    line-height: 16px;
    padding: 5px 0px;
  }

  .yellow-title {
    font-size: 12px;
    line-height: 15px;
  }

  .faq-paragraph {
    font-size: 9px;
    line-height: 11px;
  }

  .header-bold {
    font-size: 24px;
    line-height: 29px;
  }

  .header-caption {
    font-size: 9px;
    line-height: 11px;
  }

  .cta-heading {
    font-size: 9px;
    line-height: 11px;
    width: 124px;
    height: 31px;
    padding: 10px 20px;
  }

  #legalitas-card,
  #faq-title,
  #legalitas-title {
    display: none;
  }

  #legalitas-card,
  #faq-card {
    margin: -16px auto;
  }

  #mobile-tab {
    display: block;
  }

  footer {
    font-size: 24px;
    line-height: 150%;
    padding: 80px 142px;
  }

  .coin-image {
    width: 69px;
  }

  .table-col:first-child,
  .table-col:nth-child(2),
  .table-col:nth-child(3),
  .table-col:nth-child(4) {
    border-right: none;
  }

  .white-tbl-description {
    font-size: 9px;
    line-height: 150%;
  }

  .black-tbl-description {
    font-size: 9px;
    line-height: 150%;
  }

  .coins {
    margin: 1em -2em 1.5em !important;
    justify-content: start !important;
    overflow-x: scroll !important;
  }

  body ::-webkit-scrollbar {
    display: none;
  }

  .glass-morphism-container {
    /* margin: 0 auto; */
    margin: -90px auto !important;
    left: -3.15em;
  }

  .glassmorph-title {
    font-size: 12px;
    line-height: 150%;
  }

  .carousel-inner > .item.active,
  .carousel-inner > .item.next.left,
  .carousel-inner > .item.prev.right {
    width: 240px !important;
    /* left: -1.5em; */
  }

  .carousel-control.right {
    right: -10% !important;
  }

  .profile-pic img {
    width: 80px;
  }

  .glassmorph-description {
    font-size: 9px;
    line-height: 150%;
  }

  .glassmorph-card {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(20px);

    border-radius: 12px;
    margin: 0 auto;
    padding: 8px 16px;
    width: 240px !important;
    white-space: normal;
  }

  #benefits {
    padding: 10px 0px;
  }

  #tbl-mobile-default,
  #tbl-mobile-copper,
  #tbl-mobile-bronze,
  #tbl-mobile-silver,
  #tbl-mobile-gold,
  #tbl-mobile-platinum,
  #tbl-mobile-diamond,
  #tbl-mobile-emerald {
    padding: 16px 0px;
  }

  #myCarousel {
    display: flex;
    gap: 50px;
  }

  #noCarousel {
    display: none;
  }

  .carousel-inner {
    gap: 50px !important;
    display: flex !important;
    justify-content: center;
    /* margin-left: -3.15em; */
    margin-left: -5.55em;
  }

  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    left: 1000px;
  }

  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    /* left: 1000px; */
    left: -6.25em !important;
  }
}

/** ipads and tablets **/
@media (max-width: 767.98px) {
  body {
    background-image: url("./assets/images/background-elem/mobile-radial.png");
    background-size: cover;
  }

  .main-content {
    background: transparent;
  }

  .red-radial-gradient {
    background: none;
  }

  .red-inverted-gradient {
    box-shadow: none;
    padding: 16px 0px;
  }

  .red-inverted-content {
    gap: 2px;
  }

  .more-right {
    text-align: right;
  }

  #tbl-desktop {
    display: none;
  }

  .tab-container {
  }

  .tab-button-container {
    /* margin: 0px 20px; */
    margin: 0px 20px !important;
    flex-wrap: wrap;
    /* gap: 10px !important; */
    gap: 10px;
  }

  .table-first-col {
    width: 545px;
  }

  .table-col,
  .tbl-diamond-bg,
  .tbl-emerald-bg,
  .tbl-gold-bg,
  .tbl-platinum-bg {
    width: 345px;
  }

  .table-col:first-child,
  .table-col:nth-child(2),
  .table-col:nth-child(3),
  .table-col:nth-child(4) {
    border-right: none;
  }

  /* .coin-image-tbl {
    width: 110px;
  } */

  .banner-p {
    width: 100%;
    padding-bottom: 20px;
  }

  .button-part {
    display: block;
    width: 100%;
  }

  .svg-images {
    margin: 5px 0;
  }

  .header {
    background-position: top;
    padding: 48px 48px;
  }

  #beTheKing {
    padding: 56px 48px;
  }

  #ascencion {
    padding: 0px 48px;
    margin: -50px auto;
  }

  nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 16px 24px;
  }

  .tab-container {
    padding: 24px 16px;
  }

  #mobile-tab {
    display: block;
  }

  #legalitas-card,
  #faq-title,
  #legalitas-title {
    display: none;
  }
  #faq {
    margin: -10px 0;

    background: none;
  }

  .dark-card {
    /* min-width: 760px; */
    width: 760px;
  }

  #faq,
  #benefits,
  .article {
    padding: 24px 24px;
    margin: 10px auto;
  }

  .coins {
    margin: 24px -24px;
    justify-content: start;
    overflow-x: scroll !important;
  }

  body ::-webkit-scrollbar {
    display: none;
  }

  #tbl-mobile-default {
    display: block;
  }
  .juventus-logo,
  .sevilla-logo {
    margin-right: 5px;
  }
  .juventus-border {
    margin-left: 15px;
    margin-right: 15px;
  }

  #myCarousel {
    display: flex;
    gap: 1000px;
  }

  #noCarousel {
    display: none;
  }

  .glass-morphism-container {
    margin: 0 auto;
  }

  .glassmorph-card {
    width: 380px !important;
    transition: width 0.1ms;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(20px);

    border-radius: 12px;
    margin: 0 auto;
    padding: 8px 16px;
    white-space: normal;
  }

  .carousel-inner {
    left: 25% !important;
  }

  .carousel-control.left {
    left: 10%;
  }

  .carousel-control.right {
    right: 10%;
  }

  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    left: 1000px;
  }

  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    left: 1000px;
  }
}



/** laptop, desktop and small screen
including little bit larger pads/tablet sizes **/
@media (max-width: 1024px) {
  body {
    background-image: url("./assets/images/background-elem/mobile-radial.png");
    background-size: cover;
    overflow: hidden;
  }

  .main-content {
    background: transparent;
  }

  .red-radial-gradient {
    background: none;
  }

  .red-inverted-gradient {
    box-shadow: none;
    padding: 24px 0px;
  }

  .more-right {
    text-align: right;
  }

  #tbl-desktop {
    display: none;
  }

  .tab-button-container {
    /* margin: 0px 20px; */
    margin: 0 auto 48px;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: flex-start;
  }

  .table-first-col {
    width: 545px;
  }

  .table-col,
  .tbl-diamond-bg,
  .tbl-emerald-bg,
  .tbl-gold-bg,
  .tbl-platinum-bg {
    width: 345px;
  }

  .table-col:first-child,
  .table-col:nth-child(2),
  .table-col:nth-child(3),
  .table-col:nth-child(4) {
    border-right: none;
  }

  /* .coin-image-tbl {
    width: 110px;
  } */

  .banner-p {
    width: 100%;
    padding-bottom: 20px;
  }

  .button-part {
    display: block;
    width: 100%;
  }

  .svg-images {
    margin: 5px 0;
  }

  .header {
    background-position: top;
    padding: 24px 24px;
  }

  #beTheKing {
    padding: 56px 48px;
  }

  #ascencion {
    padding: 0px 48px;
    margin: -50px auto;
  }

  nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 16px 16px;
  }

  .tab-container {
    /* padding: 24px 16px; */
    margin: 24px 48px;
  }

  .tab-button {
    /* padding: 16px 24px; */
    padding: 16px 16px;
  }

  #mobile-tab {
    display: block;
  }

  #legalitas-card,
  #faq-title,
  #legalitas-title {
    display: none;
  }
  #faq {
    margin: -10px 0;

    background: none;
  }

  .dark-card {
    /* min-width: 760px; */
    width: 50em;
  }

  #faq,
  #benefits,
  .article {
    padding: 24px 24px;
    /* margin: 10px auto; */
  }

  .coins {
    margin: 24px -75px 50px;
    justify-content: start;
    overflow-x: scroll !important;
  }

  body ::-webkit-scrollbar {
    display: none;
  }

  #tbl-mobile-default {
    display: block;
  }

  .juventus-logo,
  .sevilla-logo {
    margin-right: 5px;
  }
  .juventus-border {
    margin-left: 15px;
    margin-right: 15px;
  }

  #myCarousel {
    display: flex !important;
  }

  #noCarousel {
    display: none;
  }

  .glass-morphism-container {
    margin: 0 auto;
    transition: margin 0.1ms;
    gap: 1000px;
  }

  .glassmorph-card {
    width: 380px !important;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(20px);

    border-radius: 12px;
    margin: 0 auto;
    padding: 8px 16px;
    white-space: normal;
  }

  .carousel-inner {
    gap: 1000px !important;
    display: flex !important;
    justify-content: center;
  }

  .carousel-control.left {
    left: 15%;
  }

  .carousel-control.right {
    right: 15%;
  }

  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    right: -200%;
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    left: 0;
  }

  .carousel-inner > .item.prev.right {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: -50%;
  }
  .carousel-inner > .item.active.right {
    -webkit-transform: translate3d(40%, 0, 0);
    transform: translate3d(40%, 0, 0);
    right: -1000%;
  }

  .vip-header,
  .vip-text {
    padding: 4px 72px 16px;
  }

  .bg-king {
    padding: 90px 56px;
    margin: -10px auto;
  }
}