*{
    margin:0;
    padding:0;
}
#first{
    padding-top: 30px ;
}

#first .card,#second .card{
    padding:2rem;
    border-radius:16px;
    text-align:center;
    box-shadow: 0 0 20px 0 rgba(76, 87, 125, .02);
}
.grid-container{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    width: 100%;
    gap:15px;
    justify-content:center;
    align-items: center;
   
}
.grid-container1{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    width: 100%;
    gap:15px;
    justify-content:center;
    align-items: center;
   
}
#first .card h3{
    color:#fff;
    font-size:22px;
    text-align:left;
    margin-bottom:20px;
    font-weight:500
}
#first .card h6{
    color:#fff;
    font-size:30px;
    text-align:left;
    font-weight:500
}
#first .card a{
    color:rgb(37 12 60);
    background-color: rgb(106 255 179);
   padding:14px 80px; 
   border-radius: 100px;
   font-size: 16px;
}
#first .card .crd-disply{
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.shareLink .permalink {
    position: relative;
    border-radius: 30px;
    text-align: left;

}
.shareLink .permalink .textLink {
    
    padding: 12px 60px 12px 30px;
    height: 55px;
    width:100% !important;
    font-size: 16px;
    letter-spacing: 0.3px;
    color: #1b072c;
    border-radius: 50px;
    background-color: #ffba23;
    outline: 0;
    appearance: none;
    transition: all 0.3s ease;
}
@media (max-width: 767px) {
    .shareLink .permalink .textLink {
        width: 100%;
   }
}

.shareLink .permalink .textLink::selection {
    color: #fff;
    background-color: #ff0a4b;
}
.shareLink .permalink .copyLink {
    position: absolute;
    top: 50%;
    right: 25px;
    cursor: pointer;
    transform: translateY(-50%);
}
.shareLink .permalink .copyLink:hover:after {
    opacity: 1;
    transform: translateY(0) translateX(-50%);
}
.shareLink .permalink .copyLink:after {
    content: attr(tooltip);
    width: 140px;
    bottom: -40px;
    left: 50%;
    padding: 5px;
    border-radius: 4px;
    font-size: 0.8rem;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    background-color: #000;
    color: #fff;
    transform: translateY(-10px) translateX(-50%);
    transition: all 300ms ease;
    text-align: center;
}
.shareLink .permalink .copyLink i {
    font-size: 20px;
    color: #ff0a4b;
}

#second{
    margin-top:25px
}
 .card{
    background-color:#250c3c;
    border: 1px solid #453059;
    color:white;
}
#second .card h3{
    color:#fff;
    font-size:16px;
    text-align:right;
    margin-bottom:20px;
    font-weight:400
}
 #second .card h6{
    color:#fff;
    font-size:28px;
    text-align:right;
    font-weight:500
}
#third{
    padding:25px 0px 40px;
}
#third h2{
   color: white;
   margin-bottom: 10px;
   font-weight: 300;
}
#third .card{
    background-color:#250c3c;
    border: 1px solid #453059;
    color: white;
}
table .even{
    background-color: #f0ffff21;
    color: white;
}
table .odd{
    background-color: #8e61ee;
}
table tbody{
    color: white;
}
div.dataTables_wrapper div.dataTables_info {
    font-weight: 500;
    color: #ffffff;
    padding: 1rem 0;
}
.form-control{
    background-color: #dcd2f7;
}
#second .card .crd-disply .earn-img img{
    height:80px;
}

#second .card .crd-disply {
    display:flex;
    justify-content: space-between;
    align-items: center; 
}

.grid-container .card1{
    background-color:transparent;
}
.card2{
    border-radius: 10px;
    padding:2rem;
}
.card2 .card1 .crd-disply h3{
   color:white;
   font-weight: 400;
   font-size: 16px;
   margin-bottom: 10px;
}
.card2 .card1 .crd-disply h6{
    color:white;
    font-weight: 500;
    font-size: 22px;
 }
 .card2 .card1 .crd-disply .earn-img img{
    height:40px;
 }
 .card2 .card1 .crd-disply .earn-img {
    background-color: #754d2930;
    padding:20px;
    height:80px;
    width:80px;
    border-radius:100px;
 }
 .card2 .card1 .crd-disply {
   display: flex;
   align-items: center;
  gap: 20px;
 }

  .card2 .card1 .crd-disply a{
   color: #1b072c;
   background-color: #ffba23;
   padding: 14px 30px;
   border-radius:100px;
   font-size: 14px;
   width: 140px;
   text-align: center;
   }
   
   .balance{
    font-size: 24px;
    margin-bottom: 20px;
   }
   .card-width{
    width: 60%;
    margin:auto;
   }
   #first .card .crd-disply .earn-img img {
    height: 100px;
}
.tree ul{
    justify-content: center;
}
.reward ul{
    color:white;
    display:flex;
    list-style:none;
    justify-content: space-between;
    padding-left:0px;
    margin-bottom: 0px;
}
.reward ul li p{
    margin-bottom: 0px;
}
.reward li h3{
    color:white;
    margin-bottom: 0px;
    font-size:20px;
    font-weight: 500;
}
.reward .card{
   padding:20px;
   font-size:16px;
   font-weight: 400;
}
.reward .card .crd-disply{
    justify-content: space-between;   
    display:flex;
}
 

.card1 .btn2{
    float: inline-end;
}
.reward-img img{
    width: 100%;
    height: 144px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom:20px
}

.user-img{
    justify-content: unset !important;
    gap:15px;
}
.placement-img{
    height: 100%;
    width: 100%;
    object-fit: contain;
}