@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap');

body {
background:#060606;
font-family: "Inter", sans-serif;
}

h1,h2,h3,h4,h5,h6 {font-family: "Unbounded", sans-serif;}
p {font-family: "Inter", sans-serif;}
a {color:#54EDCE;}

section.header {
    background-color: #010101;
	border-bottom: 1px solid #150026;
}
/* HERO */
.hero-section{
background:url('../img/back-1.jpg') center/cover no-repeat;
display:flex;
align-items:center;
}
/* HERO */
.hero-section-home{
background:url('../img/back-2.jpg') center/cover no-repeat;
display:flex;
align-items:center;
}
h1.head-title {
    font-size: 100px;
    letter-spacing: -0.44px;
    font-weight: 800;
	color:#54EDCE;
	font-family: "Unbounded", sans-serif;
}
p.head-subtitle {
    color: #54EDCE;
    font-size: 18px;
    font-weight: 800;
    line-height: 28px;
    letter-spacing: -0.44px;
}
h1.head-title-profile {
    font-size: 36px;
	line-height: 54px;
    letter-spacing: -0.44px;
    font-weight: 500;
	color:#fff;
	font-family: "Unbounded", sans-serif;
}
p.head-subtitle-profile {
    color: #54EDCE;
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    letter-spacing: -0.44px;
}
/* BALANCE */
.balance-pill {
    background: #1C1C31;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    border: 1px solid #2F1A53;
}
.hdr-btn {
    background: #12302A;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #54EDCE;
	color:#54EDCE;
}

/* FEATURED */
.featured-card{
background:linear-gradient(145deg,#111,#000);
border:1px solid #333;
border-radius:16px;
padding:25px;
box-shadow:0 0 20px rgba(255,215,0,.15);
transition:.3s;
}

.featured-card:hover{
transform:translateY(-5px);
box-shadow:0 0 30px rgba(255,215,0,.4);
}

/* MATCH CARD */
.match-card{
background:#0e0e0e;
border:1px solid #2c2c2c;
border-radius:14px;
padding:20px;
}

/* PICKS BAR */
.picks-bar{
background:#0a0a0a;
border-top:1px solid #333;
padding:20px 0;
position:sticky;
bottom:0;
}

.pick{
background:#151515;
padding:10px 18px;
border-radius:10px;
border:1px solid #333;
}

/* tab section */

/* MAIN TAB CONTAINER */
.main-tabs{
  background:linear-gradient(145deg,#0d1020,#0a0c18);
  padding:12px;
  border-radius:60px;
  gap:10px;
  box-shadow:0 10px 40px rgba(0,0,0,.6);
}

/* MAIN TAB BUTTON */
.main-tabs .nav-link {
    color: #cfd3ff;
    padding: 12px 23px;
    border-radius: 30px;
    border: 1px solid #50505C;
    transition: .3s;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.15px;
}

.main-tabs .nav-link.active{
  background:#ffff;
  color:#000;
  box-shadow:0 0 20px rgba(0,200,255,.3);
}

/* SUB TABS */
.sub-tabs{
  gap:12px;
}

.sub-tabs .nav-link{
  border-radius:30px;
  padding:8px 20px;
  background:#0b0d12;
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
}

.sub-tabs .nav-link.active{
  background:#cacaee;
  color:#000;
  border:none;
}
.tab-border{
 /* border-bottom:1px solid #ffd520; */
 padding-bottom:50px;
}

/* WIDGET AREA */
.widget-box{
  background:linear-gradient(#141822,#0d111a);
  padding:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  margin-bottom:20px;
}


/* widget layout */
.banana-card{
  position:relative;
  padding:26px;
  border-radius:22px;
  background:radial-gradient(circle at 30% 0%, #111, #050505 70%);
  border:2px solid #ffcc33;
  background:url(../img/back-11.png) top right no-repeat;
  box-shadow:
    0 0 30px rgba(255,204,0,.6),
    inset 0 0 30px rgba(255,204,0,.15);
  height:100%;
  transition:.35s ease;
}

.banana-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 0 60px rgba(255,204,0,.9),
    inset 0 0 40px rgba(255,204,0,.25);
}

/* TITLE */
.banana-title{
  color:#ffcc33;
  font-weight:800;
  letter-spacing:1px;
  margin-bottom:14px;
  border-bottom: 1px solid #ffcc33;
  	font-weight:900;
	font-size: 22px;
	line-height:16px;
	padding-bottom: 24px;
}

/* EVENT */
.banana-event{
  font-size:14px;
  color:#aaa;
  margin-bottom:18px;
}

.event-logo{
  height:18px;
  margin-right:6px;
}

/* ROW */
.banana-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  margin-bottom:5px;
}
.banana-row-2{
  display:flex;
  justify-content:right;
  align-items:center;
  margin-bottom:5px;
  margin-top:5px;

}

/* RIDER */
.rider{
  display:flex;
  align-items:center;
  gap:12px;
}

.rider img{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#000;
}

.rider strong{
  display:block;
  font-size:12px;
}

.rider span{
  font-size:12px;
  color:#aaa;
}

/* ODDS BOX */
.odd-box{
  display:flex;
  border:1px solid #ffcc33;
  border-radius:6px;
  overflow:hidden;
  font-size:14px;
  width: 50%;
}

.odd-box span{
  padding:10px 16px;
  background: linear-gradient(178deg, #746B5A 0%, #6c6148 52%, #a59474 70%, #a79678 85%, #746B5A 100%);
    color:#fff;
	font-weight:700;
	font-size: 14px;
	line-height:20px;
	text-align:center;
  width: 50%;
}

.odd-box strong{
  padding:10px 18px;
  background:#111;
  	color:#fff;
	font-weight:700;
	letter-spacing:-0.15px;
	font-size: 14px;
	line-height:20px;
	text-align:center;
	align-items: center;
  width: 50%;
  display: grid;
}
.banana-footer{
  display:flex;
  justify-content:center; 
  align-items:right;
  width:55%;
  font-size:12px;
  color:#ffd520 ;
  font-family: "Unbounded", sans-serif;
  margin-top:20px;border: 3px solid transparent;
    border-image: linear-gradient(90deg,#ffd587 0%, #cfa344 52%, #9a5f00 70%,  #ffd699 85%,  #f5be38 100%);
    border-image-slice: 1;
}
.banana-footer span{
  padding:8px 0px 8px 5px;
   font-size:12px;
  color:#ffd520 ;
  align-items:center;
  	font-weight:900;
	line-height:16px;
	text-align:center;
	font-family: "Unbounded", sans-serif;
}
.banana-footer strong{
  padding:0px 5px 0px 8px;
  align-items: center; 
  color:#ffd520 ;
  border-radius:6px;
  font-size:22px;
  font-weight:900;
  background:linear-gradient(90deg,#ffd587 0%, #cfa344 52%, #9a5f00 70%,  #ffd699 85%,  #f5be38 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Unbounded", sans-serif;
}




/* FOOTER */
.footer{background:#1E1E1E;border-top:1px solid #222;color:#fff;padding: 80px 0px 50px 0px;}
p.footer-tagline {color: #BDBDBD;font-size: 16px;font-weight: 400;line-height: 24px;letter-spacing: -0.31px;}
.footer-social-icons {display: flex;gap: 15px;}
.footer-social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
	text-decoration: none;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #FFFFFF ;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.footer-links-list {list-style: none;padding: 0;margin: 0;}
.footer-links-list li {margin-bottom: 12px;}
.footer-links-list a {font-size: 16px;font-weight: 400;text-align: center;line-height: 24px;letter-spacing: -0.31px;color: #BDBDBD;text-decoration: none;transition: all 0.3s ease;}
.footer-heading {color: #fff;font-size: 16px;font-weight: 700;margin-bottom: 20px;position: relative;padding-bottom: 10px;}
.footer-heading::after {content: '';position: absolute;bottom: 0;left: 0;width: 50px;height: 2px;background: #B98728;}
.footer-section {color: #FFFFFF;padding-bottom: 20px;}
.footer-logo img {width: 38%;}
.copyright-box {border-top: 1px solid #2F2F2F;padding-top: 30px;margin-top: 30px;}
p.copyright {color: #fff;font-size: 14px;font-weight: 400;text-align: center;line-height: 20px;letter-spacing: -0.15px;}


/* ================================
   IDENTITY VERIFICATION FORM
================================ */
 
/* Form Wrapper Card (match featured-card feel) */
.verify-card{
background:linear-gradient(145deg,#131313,#1A1A1A);
border:1px solid #54EDCE;
border-radius:18px;
padding:40px;
max-width:720px;
margin:auto;
box-shadow:0 0 25px rgba(0,255,200,.08);
transition:.3s;
}
 
.verify-card:hover{
box-shadow:0 0 35px rgba(0,255,200,.18);
}
 
/* Heading */
.verify-title{
	color:#55ffd5;
	font-weight:700;
	letter-spacing:.4px;
	font-size: 30px;
	line-height:35px;
}
 
.verify-subtitle{
color:#aaa;
}
 
/* Section Title */
.verify-section-title{
	font-weight:700;
	color:#fff;
	font-size: 24px;
	font-family: "Inter", sans-serif;
}
 
/* Custom Select */
.verify-card .form-select{
background:#181818;
border:1px solid #333;
color:#fff;
border-radius:10px;
padding:12px;
}
 
.verify-card .form-select:focus{
border-color:#55ffd5;
box-shadow:0 0 10px rgba(85,255,213,.3);
}
 
/* Upload Buttons */
.btn-upload{
	background:#55ffd5;
	color:#000;
	border:none;
	padding:12px 26px;
	border-radius:40px;
	transition:.25s;
	font-size:16px;
	font-weight:500;
	line-height:24px;
	letter-spacing:-0.15px;
	font-family: "Inter", sans-serif;
}
 
.btn-upload:hover{
background:#2ff1c2;
box-shadow:0 0 15px rgba(85,255,213,.6);
}
 
/* Outline Upload */
.btn-upload-outline{
	background:#010101;
	color:#fff;
	border:1px solid #55ffd5;
	padding:12px 26px;
	border-radius:40px;
	transition:.25s;
	font-size:16px;
	font-weight:500;
	line-height:24px;
	font-family: "Inter", sans-serif;
}
 
.btn-upload-outline:hover{
	background:#55ffd5;
	color:#000;
	box-shadow:0 0 15px rgba(85,255,213,.6);
}
 
/* Verify Button */
.btn-verify{
	background:#1f6f63;
	color:#fff;
	border:none;
	padding:14px 34px;
	border-radius:40px;
	font-weight:600;
	transition:.3s;
}
 
.btn-verify:hover{
background:#2aa893;
box-shadow:0 0 20px rgba(0,255,200,.5);
}
 
/* Checkbox */
.verify-card .form-check-input{
background-color:#fff;
border:1px solid #fff;
}
 
.verify-card .form-check-input:checked{
background-color:#55ffd5;
border-color:#55ffd5;
}
 
.form-navigation {
    display: flex;
    justify-content: space-between; /* pushes buttons to left & right */
    align-items: center;
    margin-top: 20px;
}

/* =========================
   STEPPER LAYOUT
========================= */
 
.stepper{
  position: relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;          /* allow titles below */
  margin-bottom:45px;
}
 
/* Grey base line */
.stepper::before{
  content:"";
  position:absolute;
  top:21px;
  left:0;
  width:100%;
  height:2px;
  background:#444;
  z-index:0;
}
 
/* Active progress line */
.stepper::after{
  content:"";
  position:absolute;
  top:21px;
  left:0;
  height:2px;
  width:var(--progress,0%);
  background:#55ffd5;
  transition:width .4s ease;
  z-index:0;
}
 
/* =========================
   STEP ITEM
========================= */
 
.step{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;       /* circle + title vertical */
  align-items:center;
  cursor:pointer;
  transition:.3s;
}
 
.step:hover{
  transform:scale(1.05);
}
 
/* =========================
   CIRCLE NUMBER
========================= */
 
.circle{
  width:42px;
  height:42px;
  border-radius:50%;
  border:2px solid #55ffd5;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#55ffd5;
  font-weight:600;
  background:#060606;
  transition:.3s;
}
 
/* ACTIVE STEP */
.step.active .circle{
  background:#55ffd5;
  color:#000;
}
 
/* COMPLETED STEP */
.step.completed .circle{
  background:#55ffd5;
  color:#000;
}
 
/* =========================
   STEP TITLE (UNDER CIRCLE)
========================= */
 
.step-title{
  margin-top:10px;
  font-size:14px;
  color:#888;
  text-align:center;
  max-width:110px;
  line-height:1.3;
  transition:.3s;
}
 
.step.active .step-title,
.step.completed .step-title{
  color:#55ffd5;
  font-weight:600;
}
 
/* =========================
   FORM STEP ANIMATION
========================= */
 
.form-step{
  display:none;
  animation:fade .4s ease;
}
 
.form-step.active{
  display:block;
}
 
@keyframes fade{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1}
}


/** strong password css **/
 
.password-wrapper {
  margin-top: 10px;
}
 
/* Meter Background */
.strength-meter {
  width: 100%;
  height: 6px;
  background: #333333;
  border-radius: 4px;
  margin-top: 8px;
  overflow: hidden;
}
 
/* Animated Fill */
.strength-fill {
  height: 100%;
  width: 0%;
  transition: all .4s ease;
  border-radius: 4px;
}
 
/* Text */
#strengthText {
  display: block;
  margin-top: 6px;
  font-size: 13px;
} 
 
 .password-field {

  position: relative;

}
 
/* Eye Icon */

.toggle-password {

  position: absolute;

  right: 12px;

  top: 50%;

  transform: translateY(-50%);

  cursor: pointer;

  color: #777;

  font-size: 18px;

}
 
/* Add padding so text doesn't overlap icon */

.password-field input {

  padding-right: 40px;

}

/* Title */
.page-title {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
}
 
/* Subtitle */
.page-subtitle {
  color: #cfcfcf;
  font-size: 16px;
  margin-top: 6px;
}
 
/* Section Card */
.form-section {
  background: #1A1A1A;
  border-radius: 14px;
  padding: 22px 24px;
  border: 1px solid #343434;
}
 
/* Section Heading */
.section-title {
  color: #55ffd5;
  font-weight: 700;
  margin-bottom: 18px;
  font-size: 18px;
}
 
/* Empty Area Height (like screenshot placeholder) */
.section-body {
  min-height: 140px;   /* adjust depending on your fields */
}
 
/* Make it look spaced like UI */
.form-section + .form-section {
  margin-top: 24px;
}
 
 
/* CARD */
.race-card{
  background: radial-gradient(circle at 20% 0%, #1b1f24, #0b0d10 70%);
  border-radius:18px;
  padding:22px;
  border:1px solid #999999;
  box-shadow:0 0 30px rgba(0,0,0,0.8);
  transition:.3s ease;
  height:100%;
}
 
.race-card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 40px rgba(0,255,200,.15);
}
 
/* HEADER */
.race-title{
  font-size:12px;
  color:#fff;
  letter-spacing:.4px;
}
 
.badge-scheduled{
  border:1px solid #55ffd5;
  color:#55ffd5;
  padding:6px 14px;
  border-radius:30px;
  font-size:10px;
  letter-spacing:0.37px;
  font-family: "Inter", sans-serif;
  line-height:15px;
}
 
/* RIDER */
.rider{
  margin:5px 0 10px;
}
 
.brand-logo{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#111;
  margin-right:12px;
  object-fit:contain;
}
 
.rider-name{
  font-weight:700;
  font-size:12px;
  font-family: "Inter", sans-serif;
  line-height:16px;
}
 
.brand-name{
  color:#FFFFFFB3;
  font-weight:300;
  font-size:12px;
  font-family: "Inter", sans-serif;
  line-height:16px;
}
 
/* TABLE */
.race-table{
  border-radius:5px;
  overflow:hidden;
  border:1px solid #999999;
}
 
/* HEAD */
.table-head{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  background:linear-gradient(#3a3a3a,#2b2b2b);
  font-size:13px;
  color:#d2d2d2;
  border-bottom:1px solid #999999;
}
 
.table-head div{
  padding: 8px 15px;
  line-height:16px;
  text-align:center;
  font-weight:700;
  border-right:1px solid #999999;
  font-family: "Inter", sans-serif;
  align-items: center;
  display:grid;
}
 
.table-head div:last-child{
  border-right:none;
}
 
/* BODY */
.table-body{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  background:linear-gradient(#14171a,#0c0e11);
}
 
.table-body div{
  text-align:center;
  /*border-right:1px solid rgba(255,255,255,0.08);*/
}
.myborder{border-right:1px solid #999999;display: grid;align-items: center;}
.myborder-bottom {border-bottom:1px solid #999999;}

.table-body div:last-child{
  border-right:none;
}
.table-body .positive:last-child{
  border-right:none;
}
 
/* ODDS COLORS */
.positive{
  color:#ffffff;
  font-weight:700;
  font-size:14px;
  font-family: "Inter", sans-serif;
  line-height:20px;
  letter-spacing:-0.15px;
  padding: 5px 0px 5px 0px;
}
 
.negative{
  color:#ffffff;
  font-weight:700;
  font-size:14px;
  font-family: "Inter", sans-serif;
  line-height:20px;
  letter-spacing:-0.15px; 
  padding: 5px 0px 5px 0px;
}
 
/* SECTION BACKGROUND */
.pick-section{
  background: radial-gradient(circle at 20% 0%, #14181d, #060708 70%);
  padding:40px 30px;
  color:#fff;
}
 
/* HORIZONTAL SCROLL (if many cards) */
.pick-cards{
  overflow-x:auto;
}
 
/* CARD BASE */
.pick-card{
  position:relative;
  width:260px;
  padding:20px;
  border-radius:18px;
  background:linear-gradient(#121417,#0b0d10);
  border:1px solid rgba(255,255,255,0.15);
  box-shadow:0 10px 40px rgba(0,0,0,.7);
  transition:.3s ease;

}
 
.pick-card:hover{
  transform:translateY(-4px);
}
 
/* COLORED GLOW VARIANTS */
.pick-card.green{
  /* box-shadow:0 0 60px rgba(120,255,0,.25); */
   background: #A9F50F;
   background: linear-gradient(to left, #537213 0%, #161616 10%, #161616 89%, #537213 100%);
}
 
.pick-card.red{
  /* box-shadow:0 0 60px rgba(255,0,80,.25); */
  background:#FB0547;
  background: linear-gradient(to left, #630F25 0%, #161616 10%, #161616 89%, #630F25 100%);
}
 
.pick-card.orange{
  /* box-shadow:0 0 60px rgba(255,120,0,.25); */
  background:#FF4800;
  background: linear-gradient(to left, #762A0D 0%, #161616 10%, #161616 89%, #762A0D 100%);
}
 
/* CLOSE BUTTON */
.pick-close{
  position:absolute;
  top:10px;
  right:14px;
  background:none;
  border:none;
  color:#ccc;
  font-size:20px;
  cursor:pointer;
}
 
/* HEADER */
.pick-header{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#fff;
  font-weight:500;
  line-height:16px;
}
 
.smx-logo{
  height:18px;
}
 
/* DIVIDER */
.divider{
  height:1px;
  background:#fff;
  margin-top:12px;
}
 
/* RIDER */
.brand-logo{
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:contain;
  background:#000;
}
 
/* ODDS BOX */
.pick-odds{
  display:flex;
  justify-content:space-between;
  border:1px solid rgba(255,255,255,.25);
  border-radius:6px;
  overflow:hidden;
}
 
.pick-odds span{
  background:#2c2f33;
  padding:14px 16px;
  font-size: 12px;
  line-height: 16px;
  font-weight:700;
}
 
.pick-odds strong {
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}
 
/* RIGHT PANEL */
.checkout-panel{
  border-left:1px solid #fff;
  padding-left:40px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
 
.checkout-panel h4{
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    margin-bottom:20px;
    text-align:center;
	letter-spacing:-0.44px;
	font-family: "Unbounded", sans-serif;
}
 
/* CHECKOUT BUTTON */
.checkout-btn{
  background:#FFD700;
  border:none;
  padding:14px 26px;
  border-radius:30px;
  font-weight:700;
  font-size:18px;
  color:#000;
  transition:.3s;
  letter-spacing:-0.44px;
}
 
.checkout-btn:hover{
  background:#ffea4d;
} 



/* =====Profile Page HEADER ===== */
.profile-header {
  position: relative;
  background:url('../img/back-3.jpg') center/cover no-repeat;
  display: flex;
  align-items: flex-end;
  padding: 50px 60px;
  color: #fff;
}
.profile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.2));
}

.profile-box {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ===== LEFT ===== */
.profile-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.profile-img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
}

.profile-info h1 {
  font-size: 36px;
  font-weight: 500;
  line-height: 54px;
}

.handle {
  color: #00f5d4;
  margin-top: 4px;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
}

.badges {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
}
.btn-upload-1 {
    background: #55ffd5;
    color: #000;
    border: none;
    padding: 12px 26px;
    border-radius: 40px;
    transition: .25s;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}
.btn-upload-outline-1 {
    background: #010101;
    color: #fff;
    border: 1px solid #55ffd5;
    padding: 12px 26px;
    border-radius: 40px;
    transition: .25s;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}
.btn-upload-1:hover {
    background: #2ff1c2;
    box-shadow: 0 0 15px rgba(85, 255, 213, .6);
}
.btn-upload-outline-1:hover {
    background: #55ffd5;
    color: #000;
    box-shadow: 0 0 15px rgba(85, 255, 213, .6);
}

/* ===== RIGHT ===== */
.profile-actions {
  display: flex;
  gap: 15px;
}

    .activity-card {
      background: #0d0f12;
      border-radius: 18px;
      padding: 20px;
      box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
	  border: 1px solid #585858;
      color: #fff;
    }

    .activity-header {
      border-bottom: 1px solid #55ffd5;
      padding-bottom: 10px;
      margin-bottom: 15px;
    }

    .view-all {
      color: #ff2d55;
      font-size: 14px;
      text-decoration: none;
    }

    .activity-item {
      background: #14171c;
      border-radius: 15px;
      padding: 15px;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: 0.3s;
    }

    .activity-item:hover {
      background: #1c2128;
    }

    .icon-box {
      width: 45px;
      height: 45px;
      border-radius: 12px;
      margin-right: 15px;
      flex-shrink: 0;
    }

    .icon-green { background: #0f2f1f; }
    .icon-yellow { background: #3a2f0f; }
    .icon-red { background: #3a1015; }
    .icon-blue { background: #0f2f3a; }

    .activity-title {
	  font-size: 14px;
	  line-height:21px;
	  font-weight:400;
      margin-bottom: 2px;
	  font-family: "Inter", sans-serif;
    }

    .activity-sub {
		font-size: 12px;
		color: #666666;
		line-height: 18px;
		font-weight: 400;
		font-family: "Lato", sans-serif;
    }

    .time-text {
      font-size: 12px;
      color: #666666;
	  line-height: 18px;
	  font-weight: 400;
	  font-family: "Lato", sans-serif;
    }
	.activity-card h3 {
		font-size: 18px;
		line-height: 27px;
		font-weight: 500;
		color: #fff;
		margin-bottom: 15px;
}
 
 
/* Cards */
.card-profile {
  background: #151515;
  padding: 20px;
  border-radius: 18px;
  box-shadow: 0 0 10px rgba(0, 255, 200, 0.05);
  border: 1px solid #595959;
}

.card-profile h3 {
  font-size: 18px;
  line-height: 27px;
  font-weight: 500;	
  color:#fff;
  margin-bottom: 15px;
  border-bottom: 1px solid #55ffd5;
  padding-bottom: 10px;
}

/* Top Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  display: flex;
  gap: 8px;
}

.stat-card h2 {
  font-size: 28px;
  margin-bottom: 5px;
  line-height: 30px;
  font-weight: 400;
  font-family: "Inter", sans-serif;
} 

.stat-card p {
  font-size: 14px;
  color: #fff;
  margin: 0px;
  line-height: 21px;
  font-family: "Lato", sans-serif;
}

.icon-profile {
  width: 50px;
  height: 50px;
  background: #2ee6c6;
  border-radius: 10px;
}
p.short-tle-1 {
    color: #28A745;
    font-size: 14px;
	line-height: 19px;
	font-weight: 400;
}
p.short-tle-2 {
    color: #DC3545;
    font-size: 14px;
	line-height: 19px;
	font-weight: 400;
}

/* Main Grid */
.main-grid {
  display: grid;
  grid-template-columns: 1.5fr 1.5fr 1.5fr;
  gap: 20px;
}

/* Lists */
ul.list, ul.sports {
    padding: 0px;
    list-style: none;
}
.list li,
.sports li {
  padding: 12px;
  background: #111111;
  margin-bottom: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
  font-size: 16px;
  line-height:24px;
  font-weight:400;
  font-family: "Lato", sans-serif;
}

.list li:hover,
.sports li:hover {
  background: #232836;
}

.sports li {
  display: flex;
  justify-content: space-between;
  color: #ccc;
}

/* Activity */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.view-all {
  color: #DC143C;
  font-size: 14px;
  cursor: pointer;
}

.activity li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
}

.activity small {
  color: #888;
}


/* Wagers */
.wager {
  background: #1b1f2a;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-left: 3px solid #54EDCE;
}
.wager-left strong{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #fff;
}
.wager-left p{
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: #54EDCE;
	margin: 10px 0px 0px 0px;
	font-family: "Inter", sans-serif;
}
.wager-right {
    text-align: right;
}
.wager-right small{
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #666666;
	font-family: "Lato", sans-serif;
}
.wager-right p{
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: #666666;
	margin: 10px 0px 0px 0px;
	font-family: "Lato", sans-serif;
}


        .stat-card {
            background: #111;
            border-radius: 18px;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 20px;
            transition: 0.3s ease;
        }

        .stat-card:hover {
            background: #181818;
            transform: translateY(-4px);
        }

        .icon-box-1 {
            width: 60px;
            height: 60px;
            background: #58d3b2;
            border-radius: 12px;
            flex-shrink: 0;
        }

        .stat-value {
            font-size: 28px;
			line-height:42px;
            font-weight: 400;
			font-family: "Inter", sans-serif;
        }

        .stat-label {
            color: #aaa;
            font-size: 14px;
			line-height:21px;
            font-weight: 400;
			font-family: "Lato", sans-serif;
        }

        .win-loss span {
            font-size: 12px;
            margin-left: 6px;
        }

        .win {
            color: #28A745;
        }

        .loss {
            color: #DC3545;
        }

		.progress  {
			height: 6px;
			background-color: #fff;
			margin-top: 8px;
			width: 60px;
			align-items: end;
			display: inline-table;
			margin-left: 10px;
		}

        .progress-bar {
            background-color: #58d3b2;
        }

/* =====END Profile Page ===== */




/* ===== RESPONSIVE ===== */
@media (max-width: 1000px) {
  .main-grid {
    grid-template-columns: 1fr;
  }
} 
 
 

 
@media (max-width: 768px) {
  .page-title {
    font-size: 28px;
  }
  .form-section {
    padding: 18px;
  }		
  .profile-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .profile-actions {
    align-self: flex-start;
  }
  .pick-cards {
    justify-content: center;
  }  
  .verify-card {
	  padding: 20px;
  } 
  li.nav-item {
    text-align: center;
  }
  .profile-header {
     padding: 30px 20px;
}
} 
 
/*******************lobby page css**************************/