/* Importing Google Font - Montserrat */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: "Montserrat", sans-serif;

}



body {

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 100vh;

  background: url("images/bg.jpg") #030728 no-repeat center;

}



.slider-wrapper {

    overflow: hidden;

    max-width: 1200px;

    margin: 0 70px 55px;

}

.user-name {
  text-align: center; 
}

.card-list .card-item {

    color: #fff;

    user-select: none;

    padding: 35px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    backdrop-filter: blur(30px);

    background: rgba(255, 255, 255, 0.2); /* Semi-transparent by default */

    border: 1px solid rgba(255, 255, 255, 0.5);

    transition: background 0.3s ease; /* Add a smooth transition */

}


.card-list .card-item:hover {

    background: rgba(255, 255, 255, 0.8); /* More opaque on hover */

}



.card-list .card-item .user-image {

    width: 165px;

    height: 170px;

    border-radius: 60%;

    margin-bottom: 40px;

    border: 4px solid #fff;

    padding: 5px;

}

.card-list .card-item .user-level {

    font-size: 1.10rem;

    color: #e3e3e3;

    font-weight: 500;

    margin: 14px 0 40px;

    text-align: center;

}

.card-list .card-item .sign_btn {

    font-size: 1.25rem;

    padding: 10px 35px;

    color: #030728;

    border-radius: 6px;

    font-weight: 500;

    cursor: pointer;

    background: #fff;

    border: 1px solid transparent;

    transition: 0.2s ease;

}

.card-list .card-item .sign_btn:hover {

    background: rgba(255, 255, 255, 0.1);

    border: 1px solid #fff;

    color: #fff;
	
}


.slider-wrapper .swiper-pagination-bullet {

    background: #fff;

    height: 13px;

    width: 13px;

    opacity: 0.5;

}



.slider-wrapper .swiper-pagination-bullet-active {

    opacity: 1;

}



.slider-wrapper .swiper-slide-button {

    color: #fff;

    margin-top: -85px;

    transition: 0.2s ease;

}



.slider-wrapper .swiper-slide-button:hover {

    color: #4658ff;

}



@media only screen and (max-width: 600px) {

    /* Styles for screens smaller than 600px */

}



@media only screen and (min-width: 601px) {

    /* Styles for screens larger than 600px */

}



/* Media Queries - Combined and Simplified */

@media (max-width: 768px) {

    .slider-wrapper {

        margin: 0 10px 40px;

    }

}


.slider-wrapper .swiper-slide-button{display:none;}

.modal-dialog{max-width:none;width:90%;margin:10px auto;}


@media (min-width:768px){.modal-dialog{width:700px;}}



/* Responsive modal - Simplified */

@media (max-width:576px){.modal-dialog{margin:1rem;}

.modal-content{font-size:14px;}

.modal-title{font-size:16px;}

.modal-header button.close{font-size:15px;}

.modal-footer button{font-size:14px;}}



/* Responsive table */

.table-responsive{width:100%;overflow-x:auto;}

.table td,.table th{white-space:nowrap;}



/* Loading indicator */

.loading-indicator{margin-top:50px;}

.loading-indicator i{color:#007bff;font-size:4em;}

.loading-indicator p{font-size:1.2em;margin-top:10px;}



/* Response messages */

#modalContent .text-success{font-size:1.8em;color:#28a745;font-weight:bold;margin-bottom:20px;}

#modalContent .text-danger{font-size:1.4em;color:#dc3545;margin-bottom:20px;}



/* Table in success message */

#modalContent table{font-size:1.2em;}



/* Hide the form by default */

#myForm{display:none;}



/* Show the form when the modal is shown */

#registrationModal.show #myForm{display:block;}



/* Modal styles - Combined and Simplified */

.modal-content{border-radius:10px;box-shadow:0px 0px 20px rgba(0,0,0,0.2);}

.modal-header{background-color:#f8f9fa;border-bottom:none;}

.modal-title{font-weight:bold;}

.modal-body{padding:30px;}

.modal-footer{border-top:none;}

.login-form{background-color:transparent;box-shadow:0 0 10px rgba(0,0,0,0.1);}

.login-form h2{margin-bottom:20px;color:white;}

.btn-outline-primary{color:white;border-color:white;}

.login-container{max-width:400px;background:url("images/bg.jpg") #030728 no-repeat center;padding:20px;border-radius:10px;}

.error-message{color:red;margin-top:10px;}

.top-bar{display:flex;align-items:center;margin-bottom:20px;}

.close-button{margin-left:auto;}