*{
	box-sizing: border-box;
	margin:0;
	padding:0;
	
}

body{
	font-family: 'Poppins', sans-serif;
    color: #000000;
	background-color: #ffffff;
	background-image: url(../images/Test.jpg);
	}
	

.container{
	padding:2%;
	margin-top:10%;
	margin-left:35%;
	margin-right:35%;
	margin-bottom:10%;
	background-color: white;
}

.container p:first-child{
	font-size: 17px;
	font-weight:600;
	
	}

.back-button {
	
	color: black;
	cursor: pointer;
	text-decoration: none;
	  }
	  
.back-button:hover {
	color: #ff2953;
	  }
	
.time{
	margin-top:3%;
	display: grid;
	grid-template-columns:1fr 1fr;
	padding: 4%;
	background-color: rgb(236, 238,255);
	border-radius: 10px;

	
}

.time span{
	padding:4%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-color: white;
	border-radius: 10px;
	cursor: pointer;

	
}
/*.time span:first-child{

	
}*/

p:nth-child(3){
	margin-top:5%;
	font-size:16px;
	font-weight: 600;
	}
	
.value{
	width:100%;
	margin-top:2%;
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr;
	grid-gap:10px;
	
	
}

.money{
	border:2px solid rgb(236, 238, 255);
	border-radius:7px;
	
	font-weight:600;
	padding-left:30%;
	cursor:pointer;
	
}

.money:hover{
	background-color: black;
	color:rgb(255, 255, 255);
	
}

.confirm{
margin-top:5%;
}

.input{
	margin-top:5%;
}

.input[type="text"]{
	
	margin-top:2%;
	width: 100%;
	height:30px;
	padding-left:10px;
	font-size:15px;
	
	border-radius:5px;
}

p:nth-child(7){
	color:blue;
	
}

button{
	width:100%;
	height:30px;
	margin-top:5%;
	font-size: 15px;
	font-weight:600;
	color:white;
	background-color: #ff2953;
	border: none;
	border-radius:5px;
	cursor:pointer;
	}
	
button:hover{
	color:white;
	
}

p:nth-child(9){
	margin-top:10%;
	
	
}

.blue{
	color:blue;
	text-decoration:underline;
}
    
/* Styling for selection behavior */
.btn-select {
 border: 2px solid #ccc;
 padding: 10px;
 border-radius: 5px;
 cursor: pointer;
transition: all 0.3s ease;
display: inline-block;
text-align: center;
width: 100%;
        }

.btn-select.selected {
  background-color: #27223f; 
  color: white;
  border-color: #27223f;
        }

 .btn-select:hover {
  background-color: #27223f;
  color: white;
        }

.value {
  display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 10px;
margin-top: 20px;
}

.value .money {
	padding: 10px;
    font-weight: bold;
    text-align: center;
    }

@media (max-width: 768px) {
    .container {
        margin: 5% 2%; /* Less margin on mobile */
        padding: 5%;
    }

    .time, .value {
        grid-template-columns: 1fr 1fr; /* Adjust grids to two columns */
    }

    .back-button, .btn-select {
        font-size: 14px; /* Smaller text for smaller screens */
    }

    button {
        height: 50px; /* Bigger button for easier touch on mobile */
    }
}

@media (max-width: 480px) {
    .time, .value {
        grid-template-columns: 1fr; /* Stack items in one column */
    }
}