body {
  font-family: 'Poppins', sans-serif;
  background: #000;
  color: #fff;
  overflow: auto;
}

.top-bar {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:20px;
}

.top-btn {
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 14px;
  transition: 0.3s ease;
}

/* Back Button Style */
.back-btn {
  background: #1e2a38;
  color: #fff;
}

.back-btn:hover {
  background: #2f3f52;
  color: #fff;
}

/* Share Button Style */
.share-btn {
  background: #70abd261;
  border: 1px solid #7cbbe7;
  color: #7cbbe7;
}

.share-btn:hover {
  background: #ffb300;
  color: #000;
}


/* Swiper Fullscreen */
.swiper {
  width: 100%;
  height:100vh;
  /* height: 100vh; */
  /* min-height: 100vh; */
  /* padding: 80px 20px; */
}

.swiper-slide {
  /* display: flex;
  justify-content: center;
  align-items: center; */
  text-align: center;
  transition: background 1s ease;
  position: relative;
}

/* Different slide backgrounds */
.slide1 { background: radial-gradient(circle, #7fccff38, #000); }
.slide2 { background: radial-gradient(circle, #001a2b, #000); }
.slide3 { background: radial-gradient(circle, #2b001f, #000); }
.slide4 { background: radial-gradient(circle, #002b12, #000); }
.slide5 { background: radial-gradient(circle, #2b1400, #000); }
.slide6 { background: radial-gradient(circle, #001d2b, #000); }
.slide7 { background: radial-gradient(circle, #2b002b, #000); }
.slide8 { background: radial-gradient(circle, #1a2b00, #000); }
.slide9 { background: radial-gradient(circle, #2b0000, #000); }
.slide10 { background: radial-gradient(circle, #001b1b, #000); }


/* Floating Yellow Dots */
.particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #39b6ff;
  border-radius: 50%;
  animation: float 6s infinite ease-in-out;
  opacity: 0.6;
}

@keyframes float {
  0% { transform: translateY(0px); opacity:0.2; }
  50% { transform: translateY(-40px); opacity:1; }
  100% { transform: translateY(0px); opacity:0.2; }
}

@media(max-width:768px){
  .slide-content h1 { font-size: 2rem; }
}
.swiper-button-next,
.swiper-button-prev {
  color: #7cbbe7;
  width: 50px;
  height: 50px;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  transition: 0.3s;
  top:10;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: #7fc5f6;
  color: #ffffff;
}
.slide-content{
    padding:50px 0;
     height: 100vh;
  overflow-y: auto;
}
.first_slide{
  padding:50px 0;
}
.logo_img{
  margin-bottom:40px;
}
.logo_img img {
    width: 150px;
    box-shadow: 0 6px 18px #39b6ff87;
    background: #70abd2a3;
    border-radius: 10%;
}
.first_title{

}
.first_title span {
    font-size: 16px;
    font-weight: 500;
    color: #79c8ff;
    background: #70abd261;
    border: 1px solid #7cbbe7;
    border-radius: 50px;
    padding: 5px 30px;
}
.first_title h1 {
    font-size: 50px;
    font-weight: 700;
    color: #79c8ff;
    margin:12px 0;
    text-transform: uppercase;
}
.first_title h2 {
    font-size: 50px;
    font-weight: 700;
    color: #79c8ff;
    margin:12px 0;
}
.first_title p {
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom:12px;
}
.first_title h6{
    font-size: 13px;
    font-weight: 500;
    color: #ccc;
    margin-bottom:12px;
}
.first_title h5{
    font-size: 18px;
    font-weight: 500;
    color: #7fccff;
    margin-bottom:12px;
}

@media (max-width:576px) {
  .first_title h1 {
    font-size: 25px;
  }
  .first_title h2{
    font-size: 25px;
  }
}

.slide_sec2{
  padding:50px 0;
}

.btn-wrapper {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-top:40px;
}

/* Base Style */
.pill {
  position: relative;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  transition: 0.3s ease;
  backdrop-filter: blur(8px);
  border: 2px solid transparent;
}

/* Blue */
.pill.blue {
  color: #40e0ff;
  border-color: #40e0ff;
  background: linear-gradient(145deg, rgba(0, 255, 255, 0.1), rgba(0, 0, 0, 0.4));
  box-shadow: 0 0 20px rgba(64, 224, 255, 0.3);
}

.pill.blue:hover {
  box-shadow: 0 0 35px rgba(64, 224, 255, 0.7);
  transform: translateY(-3px);
}

/* Gold */
.pill.gold {
  color: #ffb300;
  border-color: #ffb300;
  background: linear-gradient(145deg, rgba(255, 179, 0, 0.1), rgba(0, 0, 0, 0.4));
  box-shadow: 0 0 20px rgba(255, 179, 0, 0.3);
}

.pill.gold:hover {
  box-shadow: 0 0 35px rgba(255, 179, 0, 0.7);
  transform: translateY(-3px);
}

/* Red */
.pill.red {
  color: #ff4d4d;
  border-color: #ff4d4d;
  background: linear-gradient(145deg, #ef444433, #22c55e33);
  box-shadow: 0 0 20px rgba(255, 77, 77, 0.3);
}

.pill.red:hover {
  box-shadow: 0 0 35px rgba(255, 77, 77, 0.7);
  transform: translateY(-3px);
}

/* Green */
.pill.green {
  color: #2cff88;
  border-color: #2cff88;
  background: linear-gradient(145deg, rgba(44, 255, 136, 0.1), rgba(0, 0, 0, 0.4));
  box-shadow: 0 0 20px rgba(44, 255, 136, 0.3);
}

.pill.green:hover {
  box-shadow: 0 0 35px rgba(44, 255, 136, 0.7);
  transform: translateY(-3px);
}




.bottom_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    text-align: center;
    margin-top: 30px;
}
.cta-btn {
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  padding: 18px 36px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
}
.cta-btn span{
    color: #000;
}

/* Join Now */
.join-btn {
  background: linear-gradient(180deg, #ffb703, #f7a600);
  color: #000;
  box-shadow: 0 10px 30px rgba(255,183,3,0.4);
}

.join-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(255,183,3,0.6);
}

/* Visit Exchange */
.visit-btn {
  background: #1e2a38;
  color: #fff;
  border: 1px solid #2f3f52;
}

.visit-btn:hover {
  background: #263548;
  transform: translateY(-3px);
}

.count-row{
    margin-top: 40px;
}
.count-box h2 {
  font-size: 30px;
  font-weight: 700;
  color: #ffb703;
  margin:0;
}

.count-box p {
  margin-top: 6px;
  font-size: 16px;
  color: #9aa4b2;
  margin:0;
}

/* Responsive */
@media (max-width: 768px) {
  .cta-btn {
    width: 100%;
    justify-content: center;
  }

  .count-box h2 {
    font-size: 36px;
  }
}

.bottoom_footer p{
    text-align: center;
    margin-top: 40px;
    font-size: 14px;
    color: #9aa4b2;
}


.dex-slide2 {
  padding: 20px 0px;
  text-align: center;
}

.stats-wrapper {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.stat-card {
  background:#111827cc;
  border-radius: 25px;
  padding: 15px;
  width: 250px;
  /* box-shadow: 0 0 30px rgba(0, 140, 255, 0.15); */
  border: 1px solid #1f2937;
  transition: 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-8px);
  box-shadow:0 0px 40px #39b6ff87;
  border-color: #7cbbe7;
}

/* Icon */
.icon-box {
    width: 50px;
    height: 45px;
    background: #39b6ff87;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 10px;
    color: #000;
}
.stat-card h3 {
    font-size: 21px;
    color: #7cbbe7;
    margin: 0px 0;
    font-weight: 600;
}

.stat-card p {
  opacity: 0.7;
}

/* Info Box */
.info-box {
  border-radius: 30px;
  padding:20px;
  max-width: 1100px;
  margin: auto;
      background: #70abd261;
    border: 2px solid #7cbbe7;
    box-shadow: 0 6px 18px #39b6ff87;
}

.info-box p {
    font-size: 14px;
    line-height: 1.6;
    font-weight: normal;
    color: #c1c1c1;
}

.info-box h4 {
  color: #f5b400;
  margin-bottom: 30px;
  font-weight: 500;
  font-size: 14px;
}

.dex-btn {
    display: inline-block;
    padding: 10px 30px;
    background: #f5b400;
    color: #000;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    transition: 0.3s ease;
    font-size: 14px;
}

.dex-btn:hover {
  background: #ffcc33;
  transform: translateY(-3px);
}






/* slide 3 */

.stats-wrapper2 {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.stat-card2 {
  background:#0b0f18;
  border-radius: 25px;
  padding: 15px;
  width: 250px;
  border: 1px solid #1f2937;
  transition: 0.3s ease;
  text-align: center;
  backdrop-filter: blur(10px);
}

.stat-card2:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 40px #6babd8;
  border-color: #79c8ff;
}
.icon-box2 {
  width: 60px;
  height: 55px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 12px;
  color: white;
}

/* DIFFERENT COLORS LIKE IMAGE */
.icon-box2.blue {
  background: linear-gradient(135deg, #1e90ff, #00c6ff);
}

.icon-box2.yellow {
  background: linear-gradient(135deg, #ffb800, #ffd966);
  color: #000;
}

.icon-box2.red-green {
  background: linear-gradient(135deg, #ff4b4b, #00ff99);
}

.icon-box2.green {
  background: linear-gradient(135deg, #00ff99, #00c853);
}

.icon-box2.purple {
  background: linear-gradient(135deg, #a855f7, #d946ef);
}

/* TEXT STYLING */
.stat-card2 h3 {
  font-size: 20px;
  color: #79c8ff;
  margin: 6px 0;
  font-weight: 600;
}

.stat-card2 p {
  opacity: 0.8;
  margin: 2px 0;
  font-size: 15px;
}

.stat-card2 h6 {
  font-size: 12px;
  opacity: 0.6;
}

/* BOTTOM INFO BOX */
.info-box2 {
  background: #f59e0b38;
  border-radius: 10px;
  padding:20px;
  margin: auto;
  border: 1px solid rgba(245,180,0,0.3);
  box-shadow: 0 0 60px rgba(245, 180, 0, 0.15);
}

.info-box2 p {
  font-size: 14px;
  line-height: 1.6;
  font-weight: normal;
  color: #c1c1c1;
  margin: 0;
}
@media (max-width: 992px) {
  .stat-card2 {
    width: 45%;
  }
}

@media (max-width: 576px) {
  .stat-card2 {
    width: 100%;
  }
  .lp-header h2{
    font-size: 25px !important;
  }
}


/* slide 4 */


.lp-section {
  width:100%;
}

.lp-badge {
  display: inline-block;
  padding: 8px 22px;
  border-radius: 50px;
  border: 1px solid #3cff7a;
  color: #3cff7a;
  font-size: 12px;
  letter-spacing: 1px;
  margin-bottom: 12px;
  background: rgba(60, 255, 122, 0.08);
}


.lp-header h2 {
  font-size: 36px;
  font-weight: 600;
  background: linear-gradient(90deg, #3cff7a, #facc15);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lp-header p {
  color: #c1c1c1;
  margin-top: 5px;
}


.lp_card{
  border: 1px solid #f59e0b66;
  background:linear-gradient(135deg, #f59e0b1a , #22c55e1a);
  padding:20px;
  border-radius: 12px;
  max-width: 1010px;
  margin: auto;
  width:100%;
}
.lp_card h3{
  color: #FBC023;
  font-size: 25px;
    font-weight: 600;
}
.lp_card h3 i {
    padding: 10px 20px;
    color: #000;
    font-size: 20px;
    font-weight: 600;
    background: linear-gradient(45deg, #f59e0b, #eab308);
    border-radius: 10px;
}
.lp_card h3 i::before {
    position: relative;
    left: -9px;
}
.lp_card h5 {
    font-size: 30px;
    font-weight: 700;
}
.lp_card p{
  color:#9ca3af;
  font-size: 13px;
}

.box_lp{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:20px;
  flex-wrap: wrap;
}



.lp-stat-box {
  background: #0f1520;
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  border: 1px solid #1f2937;
  width: 300px;
}
.lp-stat-box h4 {
  font-size: 22px;
  color: #f5b400;
  margin-bottom: 3px;
}
.lp-stat-box p {
  font-size: 12px;
  color: #c1c1c1;
  margin: 0;
}

.lp-stat-box.green h4 {
  color: #3cff7a;
}
.lp-stat-box.purple h4 {
  color: #c084fc;
}

.lp-bottom-bar {
  margin-top: 25px;
  background: rgba(60, 255, 122, 0.1);
  border: 1px solid rgba(60,255,122,0.3);
  border-radius: 12px;
  padding: 12px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lp-bottom-bar span {
  color: #c1c1c1;
}
.lp-day {
  color: #3cff7a;
  font-weight: 600;
}




/* slide 5 */


.lp-section {
  width:100%;
}

.lp-badge {
  display: inline-block;
  padding: 8px 22px;
  border-radius: 50px;
  border: 1px solid #3cff7a;
  color: #3cff7a;
  font-size: 12px;
  letter-spacing: 1px;
  margin-bottom: 12px;
  background: rgba(60, 255, 122, 0.08);
}


.lp-header h2 {
  font-size: 36px;
  font-weight: 600;
  background: linear-gradient(90deg, #3cff7a, #facc15);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lp-header p {
  color: #c1c1c1;
  margin-top: 5px;
}

/* OUTER BORDER BOX */
.booster-wrapper{
  max-width: 1010px;
  margin: auto;
  /* margin: 50px auto; */
  border: 1px solid rgba(60, 255, 122, 0.6);
  border-radius: 22px;
  padding: 25px;
  background:linear-gradient(
137deg, #22c55e1a, #f59e0b1a);
}

/* TOP 3 CARDS FLEX */
.booster-top{
  display:flex;
  gap:12px;
  justify-content: space-between;
  margin-bottom:20px;
}

/* COMMON CARD */
.booster-card {
    /* flex: 1; */
    background: #1f293780;
    border-radius: 14px;
    padding: 18px;
    text-align: center;
    color: white;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 12px;
    width:50%;
}

.booster-card h3{
  margin:0;
  font-size:24px;
  color:#5aa7ff;
}

.booster-card p{
  margin:4px 0 0;
  font-size:12px;
  color:#c1c1c1;
}

/* GREEN CARD */
.booster-card.green h3{
  color:#3cff7a;
}

/* GOLD CARD */
.booster-card.gold{
  background:linear-gradient(135deg, #3fa44a63, #4b3b0b);
  border-color:#f5b400;
}

.booster-card.gold h3{
  color:#f5b400;
}

/* CENTER BOX */
.booster-center{
  padding:25px;
  margin-bottom:20px;
  text-align:center;
  color:white;
}

.booster-center h4{
  margin-bottom:15px;
}

/* CENTER CONTENT FLEX */
.booster-center-content{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

/* CIRCLE ICON */
.booster-center-icon{
  width:55px;
  height:55px;
  border-radius:50%;
  background:linear-gradient(135deg,#3cff7a,#f5b400);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  color:white;
}

/* TEXT */
.booster-center-text h5{
  margin:0;
  font-size:22px;
  color:#3cff7a;
}

.booster-center-text p{
  margin:0;
  font-size:12px;
  color:#c1c1c1;
}

/* BOTTOM 2 CARDS FLEX */
.booster-bottom{
  display:flex;
  gap:12px;
  justify-content: center;
  /* width:600px; */
}

/* SMALL CARD */
/* .booster-card.small{
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
} */

/* SMALL ICON */
.small-icon{
  width:45px;
  height:45px;
  border-radius:10px;
  background:#0b0f18;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  color:#f5b400;
  border:1px solid #1f2937;
}

.small-icon.green{
  color:#3cff7a;
}

.booster-card h5{
  font-size:13px;
}
.booster_b {
    background: #11182799;
    border: 1px solid #374151;
    border-radius: 15px;
    padding: 25px;
}

/* RESPONSIVE (FLEX WRAP) */
@media (max-width:768px){
  .booster-top,
  .booster-bottom{
    flex-wrap:wrap;
  }

  .booster-card{
    min-width:100%;
  }
}

/* slide6 */


/* .commission-wrapper{
  max-width:1100px;
  margin:40px auto;
  padding:25px;
  border:1px solid rgba(60,255,122,.5);
  border-radius:22px;
  background:#0b0f18;
} */


.commission-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:25px;
  background:linear-gradient(145deg ,#8b5cf64d , #8b5cf64d ,#f59e0b4d);
  color:#c4b5fd;
  border:1px solid #a78bfa80;
  font-size:12px;
}

.commission-title {
    margin: 15px 0 5px;
    font-size: 35px;
    font-weight: 600;
    text-align: center;
    background: linear-gradient(90deg, #AA89FA, #E17BF9, #EF92AA, #FBBD29 ,#FBBD29);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.commission-subtitle{
  color:#3cff7a;
  font-size:14px;
  margin-bottom:20px;
}
.level_main_outer {
    border: 1px solid #8b5cf64d;
    border-radius: 20px;
    background: linear-gradient(45deg, #111827cc, #111827f2);
    padding: 20px;
        max-width: 1010px;
    margin: auto;
}


.level-heading{
  color:#f5b400;
  margin-bottom:12px;
  font-size:14px;
}
.level-heading2{
  color:#a78bfa;
  margin-bottom:12px;
  font-size:14px;
}
.level-heading3{
  color:#36D19A;
  margin-bottom:12px;
  font-size:14px;
}

/* GRID */
.level-main{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.level-section{
  margin:15px ;
}

.level-card {
    background: #0f1520;
    border: 1px solid #1f2937;
    border-radius: 14px;
    padding: 7px;
    text-align: center;
    position: relative;
    width: 200px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: all 0.5s ease;
}
.level-card:hover{
  transform: scale(1.1);
}
.level-number {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-weight: bold;
    color: white;
    text-align: center;
    font-size: 14px;
}
.level-card h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    margin-top: 7px;
}
.level-card p{
  margin:0;
  color:#6b7280;
  font-size: 13px;
}

/* COLORS */
.gold .level-number{
  background:linear-gradient(130deg, #B08D13, #FA7E17);
}
.level-card.gold {
    box-shadow: 0px 2px 12px #f59e0b40;
}
.level-card.purple {
    box-shadow: 0px 2px 12px #8b5cf63d;
}

.gold h3{ color:#f5b400; }

.purple .level-number{
  background:linear-gradient(
130deg, #B179FA, #CC54EF);
}

.purple h3{ color:#c6b3ff; }

/* EXTENDED */
.extended-grid{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.level-mini{
  width:80px;
  height:70px;
  border-radius:12px;
  border:1px solid #2ad9a3;
  background:#0b0f18;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#2ad9a3;
  box-shadow: 0px 2px 6px #2ad9a3;
}
.level-mini span{
      width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-weight: bold;
    color: white;
    text-align: center;
    font-size: 14px;
        background: linear-gradient(130deg, #14b8a6, #34d399);
}

.unlock-text{
  margin-top:15px;
  font-size:12px;
  color:#71fcc0;
}
.commission-wrapper {
    padding: 50px 0;
}

.commission-total {
    margin-top: 25px;
    padding: 15px;
    border-radius: 16px;
    border: 1px solid #f5b400;
    background: linear-gradient(145deg, #8b5cf633, #8b5cf63b, #f59e0b42);
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1080px;
    margin: auto;
}

.commission-total h2{
  margin:5px 0 0;
  color:#c6b3ff;
}

.com_text span{
    color: #6b7280;
    font-size: 10px;
}
.com_text h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}
.breakdown {
    color: #6b7280;
    font-size: 10px;
}


.single-leg-wrapper {
    margin: 40px auto;
    max-width: 900px;
    padding: 10px;
    border-radius: 10px;
    background: linear-gradient(45deg, #1e293b, #0f172a);
    border: 1px solid #334155;
}

.income-title {
    text-align: center;
    font-size: 32px;
    color: #e2e8f0;
    margin-bottom: 30px;
    font-weight: 600;
}

/* .income-container {
    display: flex;
    align-items: center;
    gap: 30px;
    overflow: auto;
} */
 .income-user{
  margin-bottom:6px;
 }

.income-user img {
    width: 100%;
    height:180px;
    border-radius: 10px;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.4);
}

.income-table {
    /* flex: 1;
    min-width: 600px; */
    width:100%;
}

.income-row {
    display: flex;
    /* grid-template-columns: 80px 1fr 1fr 1fr; */
    background: #0f1520;
    border: 1px solid #1f2937;
    padding: 5px 10px;
    margin-bottom: 5px;
    border-radius: 7px;
    text-align: center;
    color: #cbd5e1;
    transition: 0.3s;
    align-items: center;
    justify-content: space-between;
    overflow: auto;
}

.income-row:hover {
    transform: scale(1.02);
    background: #111827;
}

.income-row.header {
    background: #1e293b;
    font-weight: 600;
    color: #f5b400;
}


@media(max-width:768px){
  .commission-title {
      font-size: 22px;
  }
  .commission-total{
    flex-direction:column;
    text-align:center;
    gap:10px;
  }
  .income-user img {
    height: 120px;
  }
  .income-container {
    gap: 15px;
  }
}
@media(max-width:992px){
  .level-main {
    flex-wrap: wrap;
  }
  .income-row {
    gap: 10px;
  }

}


/* slide7 */

.milestone-section{
  padding:60px 0;
}

.milestone-header{
  text-align:center;
  margin-bottom:20px;
}

.milestone-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:25px;
  background:linear-gradient(
106deg, #f59e0b4d, #a855f74d);
  color:#f5b400;
  border:1px solid #f5b400;
  font-size:12px;
}

.reward-title{
  font-size: 48px;
  font-weight: 700;
  text-align: center;
  background: linear-gradient(90deg, #f5b400, #9c3cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
  margin: 10px 0;
}


.milestone-sub{
  color:#22d3ee;
  font-size:14px;
}

.milestone-panel{
  max-width:1100px;
  margin:auto;
  background:#0b0f18;
  border:1px solid #f5b400;
  border-radius:20px;
  padding:20px;
}

/* FLEX ROW */
.milestone-row{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.milestone-row2{
  margin:30px 0;
}

/* CARD */
.ms-card{
  width:200px;
  background:#111827;
  border:1px solid #1f2937;
  border-radius:12px;
  padding:12px;
  text-align:center;
  transition: all 0.5s ease;
}

.ms-card h4{
  color:#fff;
  font-size:14px;
  margin:0;
}

.ms-card p{
  color:#9ca3af;
  font-size:12px;
  margin:5px 0 8px;
}

/* BOTTOM BAR */
.ms-bar{
  padding:8px;
  border-radius:8px;
  color:#fff;
  font-weight:600;
}

/* COLORS (same as image) */
.bronze .ms-bar{ background:#d97706; }
.silver .ms-bar{ background:#9ca3af; }
.gold .ms-bar{ background:#facc15; }
.platinum .ms-bar{ background:#c084fc; }
.diamond .ms-bar{ background:#22d3ee; }

.bronze{ 
  box-shadow:0px 4px 8px #d97706;
}
.silver{ 
  box-shadow:0px 4px 8px #9ca3af;
}
.gold{ 
  box-shadow:0px 4px 8px #facc15;
}
.platinum{ 
  box-shadow:0px 4px 8px #c084fc; 
}
.diamond{ 
  box-shadow:0px 4px 8px #22d3ee;
}

.bronze:hover,
.silver:hover,
.gold:hover,
.platinum:hover,
.diamond:hover{
  transform: translateY(-6px);
}

.teal .ms-bar{ background:#2dd4bf; }
.blue .ms-bar{ background:#60a5fa; }
.orange .ms-bar{ background:#fb923c; }
.pink .ms-bar{ background:#f472b6; }
.yellow .ms-bar{ background:#facc15; }

.teal:hover,
.blue:hover,
.orange:hover,
.pink:hover,
.yellow:hover{
  transform: translateY(-6px);
}
.teal{ 
  box-shadow:0px 4px 8px #2dd4bf;
}
.blue{ 
  box-shadow:0px 4px 8px #60a5fa;
}
.orange{ 
  box-shadow:0px 4px 8px #fb923c;
}
.pink{ 
  box-shadow:0px 4px 8px #f472b6; 
}
.yellow{ 
  box-shadow:0px 4px 8px #facc15;
}


/* BOTTOM 3 BOXES */
.milestone-bottom{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:15px;
  flex-wrap:wrap;
}

.bottom-box {
    flex: 1;
    background: #0f1520;
    border: 1px solid #f5b400;
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.top-tier {
  border-color:#C084FC;
  background: linear-gradient(90deg , #a855f726 ,#ec489926);
}
.pool{
  background: linear-gradient(90deg , #eab30826 ,#f59e0b26);
}
.info{
  background: #1f293780;
}
.info p{
  margin: 0;
  color:#9ca3af;
  font-size: 13px;
}
.bottom-box span{
  color:#9ca3af;
  font-size:10px;
}

.bottom-box h3{
  color:#f5b400;
  font-size: 20px;
    font-weight: 600;
    margin: 0;
}
.top-tier h3{
  color:#C084FC;
}

/* RESPONSIVE */
@media(max-width:992px){
  .milestone-row{ 
    flex-wrap:wrap; 
    gap:25px;
  }
}

@media(max-width:768px){
  .milestone-title{ font-size:24px; }
  .milestone-bottom{ flex-direction:column; }
}
@media (max-width:576px) {
  .reward-title {
    font-size: 20px;
  }
}


/* slide8 */

.earning-section{
  padding:50px 0;
}

.earning_title span{
    font-size: 15px;
    font-weight: 500;
    color: #39b6ff;
        background: #70abd261;
    border: 2px solid #7cbbe7;
    box-shadow: 0 6px 15px #39b6ff87;
    border-radius: 50px;
    padding:5px 30px;
    text-transform: uppercase;
}
.earning_title h1 {
    font-size: 50px;
    font-weight: 700;
    color: #39b6ff;
    margin:12px 0;
    text-transform: uppercase;
}
.earning_title h2 {
    font-size: 50px;
    font-weight: 700;
    color: #39b6ff;
    margin:12px 0;
}
.earning_title p {
    font-size: 15px;
    font-weight: 500;
    color: #ccc;
    margin-bottom:12px;
}
.earning-card{
  max-width: 1010px;
  margin: auto;
  background: linear-gradient(45deg, #111827cc, #111827f2);
  border: 1px solid #7cbbe7;
  border-radius: 18px;
  padding: 18px 22px;
}

/* Header Row */
.earning-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.earning-title{
  color: #e5e7eb;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.earning-percent{
  color: #7cbbe7;
  font-weight: 600;
}

/* Progress Bar */
.progress-wrapper{
  margin: 15px 0;
}

.progress-bar-top {
    width: 100%;
    height: 15px;
    border-radius: 10px;
    background: linear-gradient(90deg,
   #7cbbe7,
   #7cbbe7,
   #c084fc,
   #c084fc,
   #f3a683,
   #f3a683,
   #f5b400
  );
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 9px;
}

/* Dots */
.dot{
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
}

/* Bottom Labels */
.rank-labels{
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #9ca3af;
}

.crown-label{
  color: #7cbbe7;
  font-weight: 600;
}

/* Responsive */
@media(max-width:768px){
  .earning-card{
    padding: 14px;
  }

  .earning-title{
    font-size: 14px;
  }

  .rank-labels{
    font-size: 11px;
    flex-wrap: wrap;
    gap: 6px;
  }
}

.rank-cards{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:15px;
  margin-top:20px;
}

.rank-card{
  width:240px;
  height:180px;
  background:linear-gradient(45deg, #111827a1, #1f2937b8);
  border:1px solid #1f2937;
  border-radius:14px;
  text-align:center;
  padding:15px;
  position:relative;
  transition: all 0.3s ease;
}
.rank-card:hover{
  border: 1.5px solid #7cbbe7;
  box-shadow: 0 0 10px #39b6ff87;
  transform: translateY(-6px);
}

/* ---- SAME COLOR BORDER FOR CARDS ---- */

.gold-card{
  border: 1.5px solid #7cbbe7;
  box-shadow: 0 0 8px #39b6ff87;
}

.platinum-card{
  border: 1.5px solid #e5e7eb;
  box-shadow: 0 0 8px #e5e7eb50;
}

.diamond-card{
  border: 1.5px solid #36d1ff;
  box-shadow: 0 0 8px #36d1ff50;
}

.elite-card{
  border: 1.5px solid #b66cff;
  box-shadow: 0 0 8px #b66cff50;
}

.master-card{
  border: 1.5px solid #ff6b9b;
  box-shadow: 0 0 8px #ff6b9b50;
}

.legend-card{
  border: 1.5px solid #ff9f43;
  box-shadow: 0 0 8px #ff9f4350;
}

.champion-card{
  border: 1.5px solid #2ed573;
  box-shadow: 0 0 8px #2ed57350;
}

.crown-card{
  border: 1.5px solid #7cbbe7;
  box-shadow: 0 0 8px #39b6ff87;
}

.rank-number {
    position: absolute;
    top: -10px;
    right: -6px;
    background: linear-gradient(45deg, #1f2937, #374151);
    padding: 3px 9px;
    border-radius: 50%;
    font-size: 12px;
    border: 1px solid #4b5563;
}
.rank-card h3{
  font-size: 14px;
}

/* PERCENT BOX */
.percent{
  margin-top:8px;
  padding:6px 12px;
  border-radius:8px;
  display:inline-block;
}

/* COLORS */
.golds{background:#7cbbe7;}
.platinums{background:#e5e7eb;color:black;}
.diamonds{background:#36d1ff;}
.elites{background:#b66cff;}
.masters{background:#ff6b9b;}
.legends{background:#ff9f43;}
.champions{background:#2ed573;}
.crown{background:#7cbbe7;}

.differential-box {
    margin-top: 30px !important;
    border: 1px solid #f59e0b4d;
    padding: 10px;
    border-radius: 14px;
    background: #f59e0b1a;
    max-width: 1010px;
    margin: auto;
}
.differential-box h3{
  font-size: 20px;
}
.differential-box h3 {
    font-size: 16px;
    font-weight: 600;
}

.diff-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:40px;
}

/* Main box style */
.diff-item{
  background:#0f1520;
  padding:12px 18px;
  border-radius:12px;
  text-align:center;
  min-width:120px;
  border:1px solid #1f2937;
}

/* Text style */
.diff-item span{
  display:block;
  font-size:12px;
  color:#9ca3af;
  margin-bottom:5px;
  font-weight:500;
}

/* Default h4 */
.diff-item h4{
  margin:0;
  font-size:22px;
  font-weight:700;
}

/* First box - Your Rank (Cyan) */
.your-rank h4{
  color:#22e6e6;
}

/* Second box - Downline Rank (Yellow) */
.downline-rank h4{
  color:#facc15;
}

/* Third box - You Earn (Highlighted Box) */
.earn{
  border:1.5px solid #facc15;
  background:#facc1424;
}

.earn h4{
  color:#facc15;
}

/* Minus and Equal signs */
.minus, .equal{
  color:#9ca3af;
  font-size:22px;
  font-weight:bold;
}


/* FEATURES */
.features-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:15px;
  margin-top:20px;
}

.feature-box{
  width:240px;
  background:#11182799;
  border: 1px solid #37415180;
  padding:12px;
  border-radius:12px;
  text-align:center;
}
.feature-box h4 {
    color: #fff;
    font-size: 15px;
    margin: 0;
}
.feature-box p {
    color: #9ca3af;
    margin: 0;
    font-size: 11px;
}
h2.bottom-text {
    color: #fbbf24;
    font-size: 14px;
    margin: 0;
    font-weight: 600;
    margin-top: 17px;
}

/* RESPONSIVE */
@media(max-width:992px){
  /* .rank-card{
    width:48%;
  } */
}

@media(max-width:768px){

  .diff-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  } 

}

@media(max-width:576px){
.earning_title h2 {
    font-size: 25px;
}
}


/* slide 9 */

.milestone-sub-slide9{
  color:#999;
  font-size:14px;
}

.milestone-bottom2{
  display:flex;
  justify-content:center;
  gap:15px;
  margin-top:20px;
  flex-wrap:wrap;
}

/* CARD STYLE */
.bottom-box{
  flex: 1;
  min-width: 240px;
  max-width: 260px;
  height: 100px;
  border-radius: 14px;
  padding: 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(45deg, #0f1520, #111827);
  border: 1px solid #3b3f4f;
  transition: all 0.3s ease;
}

/* ICON */
.bottom-box .icon{
  font-size: 22px;
  margin-bottom: 6px;
}

/* TEXT */
.bottom-box h4{
  margin: 0;
  font-size: 16px;
  color: #e5e7eb;
}

.bottom-box p{
  margin: 0;
  font-size: 12px;
  color: #9ca3af;
}

/* DIFFERENT CARD COLORS (MATCHING YOUR IMAGE) */
.milestone{
  border-color:#8b5cf6;
  background: linear-gradient(90deg, #8b5cf61a, #6d28d91a);
}

.boost{
  border-color:#f5b400;
  background: linear-gradient(90deg, #f59e0b1a, #eab3081a);
}

.trade{
  border-color:#3b82f6;
  background: linear-gradient(90deg, #3b82f61a, #2563eb1a);
}

.chain{
  border-color:#2ad9a3;
  background: linear-gradient(90deg, #2ad9a31a, #0d94881a);
}

/* CENTER TEXT LINE */
.milestone-text2{
  text-align: center;
  margin-top: 15px;
  font-size: 14px;
    font-weight: 500;
    background: linear-gradient(90deg, #f5b400, #c084fc, #2ad9a3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* RESPONSIVE */
@media(max-width:992px){
  .milestone-bottom2{
    flex-wrap: wrap;
  }
}

@media(max-width:768px){
  .bottom-box{
    min-width: 100%;
  }
}


/* slide 10 */


.nft-section{
  width: 100%;
  max-width: 1010px;
  margin: 40px auto;
}
.nft_inner{
  background: linear-gradient(130deg , #111827cc , #111827f2);
  border: 1px solid #10b9814d;
  padding: 20px;
  border-radius: 15px;
  margin-top: 20px;
}

.tag{
  background:linear-gradient(90deg,#10b9814d,#a855f74d);
  color:#6ee7b7;
  display:inline-flex;
  padding:6px 12px;
  border-radius:20px;
  font-size:12px;
  border: 1px solid #6ee7b7;
}

.main-title {
    font-size: 30px;
    margin: 10px 0 5px;
    background: linear-gradient(89deg, #34d399, #22d3ee, #c084fc ,#c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #0000;
    font-weight: 600;
}
.nft-p{
  font-size: 14px;
  color: #a7a7a7;
}

.sub-tag{
  color:#34d399;
  font-size:12px;
  margin-bottom:15px;
}

/* Top amplifier box */
.amplifier-box{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:#0b1220;
  border:1px solid #1f2937;
  padding:12px;
  border-radius:12px;
  flex-wrap:wrap;
}

.amp-item{
  text-align:center;
  min-width:110px;
}

.amp-item span{
  font-size:10px;
  color:#9ca3af;
}

.amp-item h4 {
    margin: 5px 0 0;
    font-size: 18px;
    font-weight: 600;
}

.total {
    border: 1px solid #fbbf24;
    color: #fbbf24;
    padding: 10px;
    border-radius: 10px;
    background: #a67d1e69;
}

.plus,.equal{
  font-size:20px;
  color:#9ca3af;
}
.equal {
    color: #fbbf23;
}
.plus {
    color: #34d399;
}
.amp-item2{
    color: #34d399;
}
.amp-item3{
   color: #c084fc;
}

/* Royalty */
.royalty-title{
  margin:15px 0;
  text-align:center;
  color:#c084fc;
  font-size:12px;
}

.royalty-row{
  display:flex;
  gap:12px;
  justify-content:space-between;
  flex-wrap:wrap;
}

.royalty-box{
  flex:1;
  padding:12px;
  border-radius:12px;
  text-align:center;
}

.dark{
  background:#06b6d429;
  border:1px solid #06b6d44d;
}

.royalty-box.gold-r {
    border: 1px solid #f59e0b4d;
    background: #f59e0b29;
}
.dark h3{
  color: #23D3EE;
}
.gold-r {
  color: #FBBF23;
}

.royalty-box h3{
  margin:0;
  font-size:22px;
}

.royalty-box span{
  font-size:12px;
  color:#e5e7eb;
}

.royalty-box p{
  margin:4px 0 0;
  font-size:11px;
  color:#9ca3af;
}

/* Bottom actions */
.what-title{
  margin:15px 0;
  text-align:center;
  color:#2dd4bf;
  font-size:12px;
}

.action-row{
  display:flex;
  gap:13px;
  flex-wrap:wrap;
}

.action-box{
  flex:1;
  background:#0f172a;
  border:1px solid #1f2937;
  border-radius:12px;
  padding:10px;
  text-align:center;
}
.action_box1{
  background:#22c55e26;
  border:1px solid #10b9814d;
}
.action_box2{
  background:#06b6d426;
  border:1px solid #3b82f64d;
}
.action_box3{
  background:#14b8a626;
  border:1px solid #06b6d44d;
}
.action_box4{
  background:#eab30826;
  border:1px solid #f59e0b4d;
}

.action-box h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
}
.action-box span{

}

.action-box p{
  margin:0;
  font-size:11px;
  color:#9ca3af;
}

@media (max-width:576px) {
  .main-title {
    font-size: 20px;
  }
}

.outer-flow{
  border: 1px solid #06b6d44d;
  padding: 15px;
  border-radius: 15px;
  background: linear-gradient(90deg,#111827cc ,#111827f2);
}
.flow-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

.flow-item {
  text-align: center;
  background: linear-gradient(90deg,#111827 ,#1f2937);
  border: 1px solid #374151;
  padding: 15px;
  border-radius: 12px;
  /* min-width: 140px; */
}

.flow-h61{
  font-size: 16px;
  font-weight: 600;
  color: #ff8c00;
  margin: 0;
}
.flow-h62{
  font-size: 16px;
  font-weight: 600;
  color: #8a2be2;
  margin: 0;
}
.flow-h63{
  font-size: 16px;
  font-weight: 600;
  color: #00c6ff;
  margin: 0;
}
.flow-h64{
  font-size: 16px;
  font-weight: 600;
  color: #00bfa5;
  margin: 0;
}
.flow-h65{
  font-size: 14px;
  font-weight: 600;
  color: #ff5f9e;
  margin: 0;
}
.flow-item p{
  color: #9ca3af;
  margin: 0;
  font-size: 11px;
}

.icon-box {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin: 0 auto 10px;
}

.orangeF { background: linear-gradient(135deg, #ff8c00, #ff4500); }
.purpleF { background: linear-gradient(135deg, #8a2be2, #6a0dad); }
.blueF  { background: linear-gradient(135deg, #00c6ff, #0072ff); }
.tealF   { background: linear-gradient(135deg, #00e5ff, #00bfa5); }
.pinkF  { background: linear-gradient(135deg, #ff5f9e, #ff9a44); }

.arrow {
  font-size: 24px;
  color: #00e5ff;
}

.mint-note {
  margin: 20px 0 30px;
  color: #00e5ff;
}

.card-box {
  border: 1px solid #1a2a3a;
  padding: 20px;
  border-radius: 15px;
  background: #0a1220;
  height: 100%;
  text-align: left;
}

.card-box ul {
  list-style: none;
  padding: 0;
}

.card-box li {
  margin-bottom: 8px;
}

.tech_i{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tech_b h5{
    color: #33CD95;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}
.tech-box h5 {
    color: #9759F6;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}
.tech-grid p {
  margin: 0;
  opacity: 0.7;
  font-size: 13px;
}
.tech_s1{
  font-weight: 600;
  color: #00e5ff;

}
.tech_s2{
  font-weight: 600;
  color: #9759F6;

}
.tech_s3{
  font-weight: 600;
  color: #33CD95;

}
.tech_s4{
  font-weight: 600;
  color: #F2A60C;

}

/* RESPONSIVE */
@media (max-width: 992px) {
  .flow-wrapper {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .bottom-section{
    gap:30px;
  }
  .arrow {
    transform: rotate(90deg);
    display: none;
  }
  .tech-grid {
    grid-template-columns: 1fr;
  }
}


.level-c2{
    background: #0f1520;
    border: 1px solid #1f2937;
    border-radius: 14px;
    padding: 15px;
    text-align: center;
    position: relative;
    width: 200px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: all 0.5s ease;
}
.level-c2 h4{
  font-size: 15px;
  font-weight: 600;
}




/* CARD BASE */
.card-box {
  border-radius: 18px;
  padding: 30px;
  height: 100%;
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
}

/* STAKING CARD */
.staking-box {
  background: linear-gradient(135deg, #0e1f2f, #102e3a);
  border: 1px solid #1de9b6;
  text-align: center;
}

.staking-title {
  color: #1de9b6;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 15px;
}

.staking-item {
  display: flex;
  justify-content: space-between;
  padding: 7px 18px;
  border-radius: 10px;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.04);
}

.apy {
  font-weight: 600;
}
.staking-item span{
  font-size: 13px;
}

.green { color: #1de9b6; }
.blues { color: #29b6f6; }
.purple { color: #b388ff; }

.note {
  margin-top: 15px;
  font-size: 13px;
  opacity: 0.6;
}

/* SECURITY CARD */
.security-box {
  background: linear-gradient(135deg, #1b1a23, #2a1e1a);
  border: 1px solid #ff9800;
  text-align: center;
}
.tech-bar span{
  font-size: 14px;
}

.security-title {
  color: #ffb300;
  margin-bottom: 20px;
  font-weight: 600;
}

.security-list {
  list-style: none;
  padding: 0;
}

.security-list li {
  margin-bottom: 12px;
  color: #ddd;
}

/* TECH BAR */
.tech-bar {
  margin-top: 15px;
  padding: 15px 25px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(90deg, #101a2e, #0f1626);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.label {
  opacity: 0.6;
}

.tech {
  font-weight: 500;
}

.react { color: #29b6f6; }
.solidity { color: #b388ff; }
.ipfs { color: #00e676; }
.metamask { color: #ffb300; }

.divider {
  opacity: 0.4;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .staking-item {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .tech-bar {
    text-align: center;
    flex-direction: column;
  }
  .divider {
    display: none;
  }
}


.ledger-section {
  padding: 50px ;
  text-align: center;
}

/* Badge */
.badge-box {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 50px;
  border: 1px solid #1de9b6;
  color: #1de9b6;
  font-size: 13px;
  margin-bottom: 20px;
  background: rgba(29,233,182,0.08);
}

.main-title2 {
    font-size: 30px;
    margin: 0;
    background: linear-gradient(89deg, #21D4ED, #34D39A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #0000;
    font-weight: 600;
}

.sub-text {
  opacity: 0.6;
  margin-bottom: 40px;
}

/* FLEX STATS */
.stats-flexs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.stat-cards {
  background: linear-gradient(135deg, #111c2e, #0f1626);
  padding: 15px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  transition: 0.3s;
  width:250px;
}

.stat-cards:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 20px rgba(0,255,255,0.1);
}

.stat-cards h3 {
  margin: 10px 0 5px;
}

.stat-cards p {
  opacity: 0.5;
  font-size: 14px;
  margin: 0;
}

.icon {
  font-size: 20px;
}

.purple-l { color: #b388ff; }
.green-l { color: #1de9b6; }
.violet-l { color: #9c27b0; }
.yellow-l { color: #ffb300; }

/* LIVE BOX */
.live-box {
  max-width: 1100px;
  margin: auto;
  background: linear-gradient(135deg, #101a2e, #0c1424);
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  text-align: left;
}

.live-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-weight: 500;
}
.live-header span{
  font-size: 14px;
}

.live-status {
  color: #1de9b6;
  font-size: 14px;
}

.activity-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 12px;
    /* border-bottom: 1px solid rgba(255,255,255,0.05); */
    background: #171d2c;
    margin-bottom: 8px;
    border-radius: 10px;
}

.activity-item small {
  display: block;
  opacity: 0.5;
  font-size: 12px;
}
strong {
    font-size: 12px;
    font-weight: 600;
}

.profit {
  color: #00e676;
  font-weight: 600;
    background: #00e67673;
    border-radius: 5px;
    padding: 3px 5px;
    font-size: 13px;
}

.loss {
    color: #ff5252;
    font-weight: 600;
    background: #ff52525e;
    border-radius: 5px;
    padding: 3px 5px;
    font-size: 13px;
}

.country-text {
  text-align: center;
  font-size: 13px;
  opacity: 0.5;
  margin: 20px 0;
}

/* Button */
.ledger-btn {
  display: block;
  text-align: center;
  padding: 14px;
  border-radius: 10px;
  background: linear-gradient(90deg, #1de9b6, #00bcd4);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
  margin-top: 15px;
  font-size: 14px;
}

.ledger-btn:hover {
  opacity: 0.9;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .main-title {
    font-size: 28px;
  }

  .live-box {
    padding: 20px;
  }

  .activity-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .live-info {
    padding: 10px 10px !important;
    }
}
.live-info {
    border: 1px solid #06b6d44d;
    background: linear-gradient(90deg , #111827cc , #111827f2);
    padding: 20px 47px;
    border-radius: 15px;
}





.bot-section {
  padding:50px;
  text-align: center;
}

/* Badge */
.bot-badge {
  display: inline-block;
  padding: 6px 20px;
  border-radius: 50px;
  border: 1px solid #4fc3f7;
  color: #4fc3f7;
  font-size: 13px;
  margin-bottom: 20px;
  background: rgba(79,195,247,0.08);
}

/* Title */
.bot-title {
    font-size: 30px;
    margin: 0;
    background: linear-gradient(89deg, #53AEF7, #2CD4C1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #0000;
    font-weight: 600;
}

.bot-subtitle {
  opacity: 0.6;
  margin-bottom: 40px;
}

.fea-bot{
    border: 1px solid #06b6d44d;
    background: linear-gradient(90deg , #111827cc , #111827f2);
    padding: 20px ;
    border-radius: 15px;
}
.feature-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 35px;
}

.feature-card {
  background: linear-gradient(135deg, #121c2d, #0f1626);
  padding: 25px 15px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  transition: 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 15px rgba(66,165,245,0.2);
}

.feature-card h4 {
  margin: 10px 0 5px;
  font-size: 14px;
  font-weight: 600;
}

.feature-card p {
  font-size: 13px;
  opacity: 0.6;
}

.icon {
  font-size: 22px;
}

/* How Box */
.how-box {
  margin: 30px auto;
  padding: 25px;
  border-radius: 18px;
  background: linear-gradient(135deg, #0f1c2d, #0d1626);
  border: 1px solid rgba(255,255,255,0.08);
  max-width: 1100px;
}

.how-box h3 {
    color: #4fc3f7;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
}

/* Steps */
.steps-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.step {
  font-size: 14px;
}

.step span {
  background: #42a5f5;
  padding: 4px 9px;
  border-radius: 50%;
  margin-right: 8px;
  font-size: 12px;
}

.arrow {
  opacity: 0.5;
}

.mini-feature-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 0 auto;
    max-width: 1100px;
}

.mini-card {
  padding: 15px;
  border-radius: 12px;
  background: linear-gradient(135deg, #111c2e, #0f1626);
  border: 1px solid rgba(255,255,255,0.08);
  width:260px;
}

.mini-card h6{
  font-size: 15px;
  margin: 0;
}
a.cta-btn2 {
    margin-top: 15px;
}
.cta-btn2 {
    display: flex;
    padding: 14px 30px;
    border-radius: 10px;
    background: linear-gradient(90deg, #42a5f5, #00acc1);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.cta-btn2:hover {
  opacity: 0.9;
}

/* Responsive */
@media (max-width: 768px) {

  .bot-title {
    font-size: 26px;
  }

  /* .steps-row {
    flex-direction: column;
  } */

  .arrow {
    display: none;
  }

}

@media (max-width: 576px) {

 .feature-card {
    width: 100%;
}
}