/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

/* CONTAINER */
body, html {
  height: 100%;
  background-color: #f5f7fa;
}

.container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* LEFT SIDE */
.left-side {
  flex: 1;
  background: url("background.jpg") no-repeat center center/cover;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.overlay {
  background: rgba(1, 42, 74, 0.8); /* dark navy overlay */
  text-align: center;
  color: #fff;
  padding: 50px; /* slightly bigger for balance */
  border-radius: 15px;
  width: 80%;
  animation: fadeInLeft 1.2s ease;
}

.logo {
  width: 120px;
  margin-bottom: 25px;
}

.overlay h1 {
  font-size: 28px;
  margin-bottom: 12px;
  font-weight: 700;
  color: #fff;
}

.overlay h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #cfd8dc;
}

.overlay p {
  font-size: 14px;
  opacity: 0.9;
  color: #e0e0e0;
}

/* RIGHT SIDE */
.right-side {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #012a4a, #01497c);
  position: relative;
}

/* LOGIN BOX - BIGGER & ADJUSTED */
.login-box {
  background: #f8f9fb; /* light background for contrast */
  width: 480px; /* bigger width */
  padding: 60px 60px; /* more spacious padding */
  border-radius: 25px;
  box-shadow: 0 15px 40px rgba(1, 42, 74, 0.4); /* deep shadow with palette color */
  border: 2px solid #01497c; /* subtle border using palette color */
  text-align: center;
  transform: translateY(20px);
  animation: slideUp 1.3s ease forwards;
  position: relative;
  z-index: 2;
}

/* HEADINGS & TEXT */
.login-box h2 {
  color: #012a4a;
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 15px;
}

.login-box p {
  color: #333;
  margin-bottom: 35px;
  font-size: 15px;
}

/* LABELS */
label {
  display: block;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: #012a4a;
  margin-bottom: 5px;
}

/* INPUTS */
input, select {
  width: 100%;
  padding: 14px 14px; /* bigger input fields */
  border-radius: 12px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  transition: border 0.3s ease, box-shadow 0.3s ease;
  outline: none;
  font-size: 15px;
}

input:focus, select:focus {
  border-color: #01497c;
  box-shadow: 0 0 10px rgba(1, 73, 124, 0.4);
}

/* BUTTONS */
.btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(90deg, #012a4a, #01497c);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn:hover {
  background: linear-gradient(90deg, #01497c, #014f86);
  transform: scale(1.03);
}

/* REGISTER SECTION */
.register-section {
  margin-top: 10px;
  text-align: center;
  line-height: 1.2;
}

.register-section p {
  margin-bottom: 4px;
  color: #012a4a;
  font-size: 14px;
}

.register-btn {
  display: inline-block;
  padding: 10px 18px;
  background: linear-gradient(90deg, #012a4a, #01497c);
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: all 0.3s ease;
}

.register-btn:hover {
  background: linear-gradient(90deg, #01497c, #014f86);
  transform: scale(1.05);
}

/* ANIMATIONS */
@keyframes fadeInLeft {
  0% { opacity: 0; transform: translateX(-50px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes slideUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 1.2s ease forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}