.register-hero {
 background-color: #800020;
 color: #ffffff;
 padding: 80px 20px;
 text-align: center;
}

.register-hero h1 {
 font-size: 3rem;
 margin-bottom: 15px;
 font-weight: 700;
}

.register-hero p {
 font-size: 1.4rem;
 color: #DAA520;
 font-weight: 500;
}

.register-form-wrapper {
 max-width: 600px;
 margin: 80px auto;
 padding: 0 20px;
}

.register-card {
 background-color: #ffffff;
 padding: 40px;
 border-radius: 8px;
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.register-card h2 {
 color: #800020;
 font-size: 1.8rem;
 margin-bottom: 25px;
 text-align: center;
}

.form-group {
 margin-bottom: 20px;
}

.form-group label {
 display: block;
 margin-bottom: 8px;
 font-weight: 600;
 color: #555555;
}

.form-group input {
 width: 100%;
 padding: 12px;
 border: 1px solid #cccccc;
 border-radius: 4px;
 font-size: 1rem;
 font-family: inherit;
}

.form-group input:focus {
 border-color: #800020;
 outline: none;
}

.submit-btn {
 background-color: #800020;
 color: #ffffff;
 padding: 14px 25px;
 border: none;
 border-radius: 4px;
 font-size: 1.1rem;
 font-weight: 600;
 cursor: pointer;
 transition: background-color 0.3s ease;
 width: 100%;
 margin-top: 10px;
}

.submit-btn:hover {
 background-color: #DAA520;
 color: #333333;
}

.login-link-container {
 margin-top: 30px;
 text-align: center;
 border-top: 1px solid #eeeeee;
 padding-top: 20px;
}

.login-link-container p {
 margin-bottom: 10px;
 color: #666666;
}

.login-btn {
 display: inline-block;
 background-color: #DAA520;
 color: #ffffff;
 padding: 10px 20px;
 border-radius: 4px;
 text-decoration: none;
 font-weight: 600;
 transition: background-color 0.3s ease;
}

.login-btn:hover {
 background-color: #800020;
}