.hidden {
    display: none !important;
}

h2 {
    font-size: 1.5em; /* Adjust size as needed */
}

h3 {
    font-size: 1.2em; /* Smaller than h2 */
}

/* This applies to the Stripe card container, adding a border, padding, and background */
#payment-form {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f8f9fa;
    margin-bottom: 45px;
}
 
#register-button { 
	padding-bottom: 5px;
	margin-bottom:50px
}

#purchase-now { 
	padding-bottom: 5px;
	margin-bottom:50px
}

.btn btn-success { 
	padding-bottom: 5px;
	margin-bottom:20px
}

.form-group {
    float: left;
    position: relative;
    padding: 0.65rem;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Modal Styling */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Gray out background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
}

.spinner {
    width: 50px;
    height: 50px;
    margin-top: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}