body{
    background-color: #f2f4f8;
}

main{
    max-width: 1248px;
    margin: 30px auto;
}


/* Login Page */

.login {
    background-color: white;
    margin: 20vh auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    border-radius: 10px;
    width: 50%;
}

/* End Login Page */

/* index.html */

.concerts{
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}

.concert{
    width: 256px;
}

.concert img{
    width: 100%;
}

.concert a{
    color: black;
    text-decoration: none;
    transition: 0.3s;
    font-weight: bold;
}

.concert a:hover{
    color: #0d6efd ;
    text-decoration: none;
}

.concert .description{
    font-size: 14px;
}

/* Concert Page */
.concert_details{
    display: flex;
    align-items: center;
}

.concert_details .concert_image{
    width: 300px;
}

.concert_details .concert_image img{
    width: 100%;
}



@media (max-width: 768px) {
    .concert_details{
        flex-direction: column;
    }

    .concert-modal{
        width: 100% !important;
        margin: 0;
    }

   

    #show_concert-modal .booking_details{
        display: flex;
        flex-direction: column;
    }

    .sector_info {
        display: flex;
        width: 100%;
        flex-direction: column;
    }

    .login {
      width: 90%;
    }
  
    .login div {
      width: 100% !important;
    }
  }
  
#qr-payment-modal .modal-body {
    padding: 2rem;
}

#qr-code-container {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
    display: inline-block;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#qr-code-image {
    display: block;
    margin: 0 auto;
    border-radius: 5px;
}

.alert-info {
    background-color: #e7f3ff;
    border-color: #b3d9ff;
}