/* Reset some default styles */

body {
    font-family: Arial, sans-serif!important;
    background-color: black!important;
    
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px;
    padding: 10px 0; /* Adjust the top and bottom padding */
    margin-bottom: 0px;
}
/* Style for the icon and text container */
.nav-icon {
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Style for the image */
.nav-icon img {
    vertical-align: middle;
}

/* Add some margin to the "Home" link */
.navbar-nav .nav-item:first-child {
    margin-right: 20px;
}

.nav-tabs > li {
    float:none;
    display:inline-block;
    zoom:1;
}
#Nav > li{
    margin: 15px;
}
.logo img {
    width: 50px; /* Adjust the size as needed */
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 20rem;
}

.nav-links a {
    text-decoration: none;
   
}
/* Style the icon for login */
.nav-link i.bx {
    color: purple;
    font-size: 24px;
}

/* Push the icon to the left side */
.nav-item.boxicon {
    margin-right: auto;
}

.btn-signup {
    background-color: purple!important;
    color: white; /* Text color */
    border-color: purple!important; /* Border color (if needed) */
}

/* Hover effect (optional) */
.btn-signup:hover {
    background-color: darkpurple!important; /* Change color on hover */
    border-color: darkpurple!important; /* Change border color on hover (if needed) */
}
/*///////////LOGIN///////////*/

.logincontainer {
    max-width: 400px;
    margin-top: 100px;
    margin-left: 400px;
    padding: 20px;
    background-color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    text-align: center;
}

h2 {
    color: white;
}

input[type="text"], input[type="password"] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    background-color: gray;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 3px;
}


input[type="submit"] {
    background-color: purple;
    color: white;
    padding: 14px 20px;
    margin: 10px 0;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: rebeccapurple;
}
#logininfo{
    text-align: left!important;
}
.shwpass{
    text-align: left!important;
    margin-bottom: 10px;
    color: white;
}



/*//////////////////// Carousel////////////////// */
.carousel-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 800px; /* Use 100vh for full viewport height */
    margin-top: -45px!important;
    overflow: hidden; /* Hide overflow to prevent vertical scrolling */
}

/* Adjust image size to fit within the carousel container */
.carousel-item img {
    width: 100%; /* Set image width to 100% for full width */
    height: 100%; /* Maintain image aspect ratio */
    object-fit: cover;
}

/* Change the color of carousel arrows and indicators */
.carousel-control-prev-icon,
.carousel-control-next-icon,
.carousel-indicators li {
    background-color: mediumpurple!important; /* Change to your desired color */
    color: black!important;
}

/* Lower the position of the carousel indicators */
.carousel-indicators {
    margin-bottom: 10px!important; /* Adjust as needed to place them below the images */
}

.carousel-section {
    margin-bottom: 0px!important; /* Adjust the margin value as needed */
}

.torhead {
    margin-top: 0px;
}


/*home page*/
/* Custom CSS for the four cards */
.card1{
    margin-right: 60px!important;
}
.custom-card {
    width: calc(20% - 5px); /* 25% width with spacing between cards */
    margin-bottom: 20px;
}

/* Centering the card content */
.custom-card .card-body {
    text-align: center;
}

/* Add some space between the carousel and the cards */

/* Style for the "View More Tournaments" button */
.btn-view-more {
    background-color: purple!important;
    display: block;
    margin: 20px auto;
    text-align: left;
}


/*tournament page*/
/* Cards */
.card {
    border: 1px solid #ddd;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    margin-top: 4rem;
    margin-bottom: 4rem;
    padding: 2rem;
    width: 300px;
    height: 400px;
    margin-left: 8rem;
    margin-right: 8rem;
    
    background-color: #333!important;
    display: flex;
    align-items: center;
}

.card img {
    max-width: 35%;
    height: 50px;;
}

.card-title {
    font-size: 20px!important;
    color: white;
    text-align: center;
}

.card-img-top {
    flex: 0 0 25%;
    margin-right: 1rem;
}

.card-body {
    flex: 1;
}

.card p{
    text-align: center;
}
.card:hover {
    transform: scale(1.05);
}

#card-button{
     background-color: purple;
    border-color: purple;
}
/* Footer */
footer {
    background-color: #333!important;
    color: white;
    text-align: center;
}

.firsthead {
    font-size: 30px;
    font-family: serif;
    margin-top: 20px; /* Adjust the margin as needed */
    margin-bottom: 20px; /* Adjust the margin as needed */
    text-align: center;
}

.VerticalLine {
    border-right: 3px groove;
    height: 200px; /* Adjust the height as needed */
}


.foottext3 {
    font-size: 20px;
    text-align: center;
    font-family: serif;
}

/*//////////////////////////////////////////////////*/
.button1 {
    background-color: purple;
    border: none;
    color: white;
    float: right; /* Float the button to the right */
}

.card-text{
    color: gray!important;
}

/*tournment*/
/* Additional Styles */

.heading1 {
    color: white;
    text-align: center;
    margin-right: auto; /* Add this line to center the heading */
    margin-left: auto; /* Add this line to center the heading */
}

#tournament-button {
    display: flex!important;
    background-color: purple;
    border-color: purple;
    color: white;
    padding: 10px;
    margin-top: 1rem;
    justify-content: flex-end!important;
    text-align: right!important;
}
.image-text-container {
    display: flex; /* Use Flexbox */
    border: 1px solid grey;
    color: white!important;
    text-align: center;
    margin-bottom: 12px;
}

.image-text-container img {
   width: 20px;
    height: 20px;
    margin-top: 20px;
    
    
}
.image-text-container p {
    margin-top: 20px!important;
    margin-left: 40px!important;
    text-align: center;
}
.numbers{
   text-align: center;
    color: white!important;
   
}
.tourbutton {
    background-color: purple;
    border: none;
    color: white;
    text-align: end;
    display: block;
    margin-left: auto; /* This pushes the button to the right */
    margin-bottom: 30px!important;
    padding: 10px;
}
/* Custom CSS for pagination */
.page-link-custom {
    color: gray; /* Change text color */
    background-color: black!important; /* Change background color */
    border-color: black!important; /* Change border color */
    transition: background-color 0.3s, color 0.3s!important; /* Add hover transition */
}

.page-link-custom:hover {
    background-color: #555!important; /* Change background color on hover */
    color: white; /* Change text color on hover */
}


/////////////////////////////////////////
/* Add this to your existing style.css or in a new <style> tag in your <head> */
.score-leaderboard {
    background-color: #4a148c;
    color: #fff;
    padding: 50px 0;
}

.score-leaderboard h2 {
    font-size: 28px;
}

.table {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.table th,
.table td {
    vertical-align: middle;
}

.table th {
    background-color: #4a148c;
    border-color: #4a148c;
    font-weight: bold;
    text-align: center;
}

.table-dark {
    background-color: #4a148c;
    color: #fff;
}

.table-dark th {
    color: #fff;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.1);
}

.table td {
    font-weight: 500;
    color: gray;
}

/* Set a specific width for "Tournaments Played" and "Wins" columns */
.table td:nth-child(4), .table td:nth-child(5) {
    width: 80px; /* Adjust the width as needed */
}



/* Style buttons and icons as needed for your aesthetic */
/////////////////////////////////
.registration-form {
    width: 200px;
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

/* Change the background color of input fields */
.form-control {
    background-color: #333!important;
    color: white!important;
    border: 1px solid gray; /* Add border for better visibility */
}

.form-group label {
    font-weight: bold;
}

button {
    margin-top: 10px;
    margin-bottom: 15px;
    max-width: 200px;
    background-color: purple;
    border-color: purple;
    color: white;
    padding: 10px;
}
.lastName {
    margin-top: 5px!important;
}
.form-group input[ type= "checkbox"]{
    color: white!important;
}
//////////////////////////////////////
/* Add this to your existing CSS */
/* Add this to your existing CSS */
.row.align-items-center img {
    margin-bottom: 0;
}

.row.align-items-center .sandra {
    color: white;
    margin-left: 5px;
    font-weight: bold;
    margin-top: 0; /* Remove the top margin */
}

.left-container {
    margin-top: 20px;
    padding: 20px;
    background-color: #333;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid #333;
    color: white; /* Text color for main container */
}

.left-container h3 {
    color: white;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.team-info {
    display: flex;
    align-items: center;
    color: white;
}

.team-info img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.team-details {
    margin-left: 10px;
    color: gray; /* Text color for team details */
     
}
.team-member {
    display: flex;
    align-items: center;
    
}
.team-member:hover{
    background-color: purple;
}

.team-member img {
    margin-left: 10px;
}
/*container2*/
.right-container{
margin-top: 20px;
margin right: 40px;
    padding: 20px;
    background-color: #333;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid #333;
    color: white; /* Text color for main container */
}
.right-container h3{
     color: white;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}
.table-rectangular {
    border-collapse: collapse;
    width: 100%;
    border: none;
}

.table-rectangular th, .table-rectangular td {
    border: 1px solid gray; /* Change color to gray */
    padding: 8px;
    text-align: left;
    color: gray;
}

.table-rectangular th {
    background-color: #333;
    color: white;
}

.viewMoreButton{
    padding: 10px;
    margin-top: 10px;
}
/* Custom modal styles */
    .modal-content {
        background-color: #333!important;
        color: white!important;
    }

    .modal-title {
        color: white!important;
    }

    .modal-body {
        color: gray!important;
    }
.custom-modal {
    background-color: #333!important;
    
}
.modalbtn{
    background-color: purple!important;
}

/* Custom CSS for Recent Tournaments */
.custom-container {
    background-color: #333;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.custom-table {
    background-color: #333;
    color: white;
}

.custom-table th, .custom-table td {
    border-color: white;
}

.custom-table th {
    background-color: #333;
}

/* Style for the eye icon */
#showPassword {
    cursor: pointer; /* Add a pointer cursor to indicate interactivity */
    color: white; /* Default color */
    font-size: 18px; /* Adjust the font size as needed */
    transition: color 0.3s; /* Smooth color transition on hover */
    background-color: black;
}

/* Change color on hover */
#showPassword:hover {
    color: white; /* Change to a darker color on hover */
}