*{
    padding: 0;
    margin: 0;
    background-color: #F5F7F8;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #495E57;
       
}
hr{
    z-index: -1;
    padding: 0;
    margin: 0;
}

.header{
    z-index: 10;
   
    height: 7vh;
    width: 70%;
    margin: auto;
    background-color: white;
    border-radius: 10px;
    box-shadow: 8px 5px 8px #45474B;
    position: fixed;
    top:20px;
    left:15%;
    display: flex;
  
    align-items: center;
}
.header img{
    
    /* border-radius: 50%; */
    margin-left: 10px;
}
.header a{
    text-decoration: none;
    color: #45474B;
    margin-left: 20px;
    background-color: white;

}
.header span{
    text-decoration: none;
    color: #45474B;
    margin-left: 12px;
    background-color: white;

}
.btn-contact{
    background-color: #F4CE14;
    padding:0.5% 1%;
    border-radius: 10px;
    width: 15%;
    position: absolute;
    right: 10px;
    border: none;
    font-size: medium;
}
.nme{
    background-color: #F4CE14;
    position: relative;
    left: 46%;
    border-radius: 10px;
    padding: 1%;
    margin: auto;
    border: 0px;
    font-weight: bold;

}
#h{
    position: relative;
    left: 46%;
}
.hero{
    position: relative;
    top:100px;
   
    width: 100%;
    margin: auto;
    height: 50vh;
    align-items: center;
    
}
.front-banner{
    position: relative;
    left: 46%;
   /* top:50px;
     z-index: 9; */

}
.right{
    margin-left: auto; 
    margin-right: 0;  
}
.left{
    align:left;
}
.hero p{
    text-align: center;
    width: 50%;
    /* position: relative;
    left: 22%; */
    margin: auto;
}
.stats{
    width: 70%;
    margin: auto;
    background-color: white;
    border: 1px solid black;
    border-radius: 10px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 10vh;
}
.st1{
    background-color: white;
    font-size: medium;
    font-weight: bold;
    text-align: center;
}
.st1 h3{
    background-color: white;
    
    
}
/* project css */
.pbox{
    display: flex;
   
    
    justify-content:space-evenly;
    text-align: center;
    /* box-shadow: 5px 5px 8px #45474B; */
    width: 60%;
    margin: auto;
    text-decoration: none;
    padding: 2%;
    position: relative;
    top:px;
   
}
.pbox .d1{
    text-align: center;
   
    width: 50%;
    box-shadow: 3px 3px 6px #45474B;
    /* height: 55vh; */
    background-color: white;
    border: 1px solid black;

}
.pbox a{
    text-decoration: none;
    border: 1px solid black;
    padding: 3px 7px;
    background-color: #F4CE14;
    border-radius: 10px;
    margin: 10px;
    margin-top: 15px;
}
.d1 h4{
    padding: 10px;
    background-color: white;

}
.d1 img{
    margin: 0px;
    border-bottom: 1px solid black;
    
}
.d1 p{
    padding: 10px;
    background-color: white;
    text-align: center;
}
.d1 form{
    display: grid;
    background-color: white;
}
/* this  */
input[type=text],input[type=number], select, textarea {
    width: 98%;
    padding: 10px;
    border: 1px solid black;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    /* resize: vertical; */
    background-color: white;
  }
  
  input[type=submit] {
    background-color: #F4CE14;
    color: #45474B;
    padding: 10px 20px ;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    
  }
  
  input[type=submit]:hover {
    background-color: #379777;
  }
  
  .container {
    border-radius: 5px;
    background-color: white;
    padding: 20px;
  }
  .d1 label{
    background-color: white;
  }
  h1{
    font-size: medium;
  }

  .pool-btn{
    background-color: #F4CE14;
    
    border-radius: 10px;
    padding: 2%;
    margin: auto;
    border: 0px;
    font-weight: bold;
    font-size: medium;

}
h3{
    background-color: white;
}
.btn2 {
    background-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.6;
    border-radius: 10px;
    padding: 2%;
    margin: auto;
    border: 0px;
    font-weight: bold;
    font-size: medium;
}

.btn2.active {
    background-color: #F4CE14;
    cursor: pointer;
    opacity: 1;
    border-radius: 10px;
    padding: 2%;
    margin: auto;
    border: 0px;
    font-weight: bold;
    font-size: medium;
}
#add-token-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    padding: 12px 20px;
    background-color: #F4CE14;
    color: #45474B;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 1000;
  }
  
  #add-token-btn:hover {
    background-color: #495E57;
    color: white;
  }
  #tokenBalanceBox {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: #F4CE14;
    color: #45474B;
    padding: 8px 14px;
    border-radius: 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    z-index: 1000;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.6);
  }
  #tokenBalance{
    background-color: #F4CE14;
    color: #45474B;
    font-weight: bold;
  }
  #winner-popup {
    display: none; /* Hidden by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #F4CE14;
    color:#45474B;
    padding: 20px;
    border-radius: 10px;
    z-index: 1000; /* Ensure it's above other content */
}