/* BODY */
body {
  font-family: Arial;
  background: url('placement.jpg') no-repeat center fixed;
  background-size: cover;
  margin: 0;
}

/* HEADER */
header {
  background: #4499c0;
  color: white;
  text-align: center;
  padding: 15px;
  font-size: 24px;
  font-weight: bold;
}

/* FORM */
.form-container {
  text-align: center;
  margin: 20px auto;
  width: 60%;
  padding: 20px;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  border-radius: 15px;
}

/* INPUTS */
input {
  padding: 14px;
  margin: 10px;
  width: 250px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  outline: none;
  transition: 0.3s;
}
input:focus { box-shadow: 0 0 12px #007bff; }

/* BUTTONS */
button {
  padding: 12px 28px;
  font-size: 16px;
  background: linear-gradient(45deg, #28a745, #34d058);
  color: white;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  margin: 5px;
  transition: 0.3s;
}
button:hover { transform: scale(1.08); }
button:active { transform: scale(0.95); }

/* TABLE */
.table-container {
  width: 60%;
  margin: 20px auto;
  max-height: 350px;
  overflow-y: auto;
  background: rgba(255,255,255,0.95);
  border-radius: 10px;
  padding: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: center;
}
th { background: #5ed853; color: white; }
tr:nth-child(even) { background: #f2f2f2; }
tr:hover { background: #91cabe; }

/* TOTAL COUNT */
#count {
  width: 60%;
  margin: 10px auto;
  padding: 10px;
  background: #4499c0;
  color: white;
  font-size: 18px;
  border-radius: 8px;
  text-align: center;
}

/* EMPTY MESSAGE */
#emptyMsg { color: red; font-weight: bold; margin-top: 10px; }

/* LOGOS */
.logo-left, .logo-right {
  position: fixed;
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.logo-left { animation: down 10s linear infinite; }
.logo-left.l1 { left: 20px; animation-delay: 0s; }
.logo-left.l2 { left: 100px; animation-delay: 3s; }
.logo-left.l3 { left: 180px; animation-delay: 6s; }
@keyframes down { from { top: -100px; } to { top: 100%; } }

.logo-right { animation: up 10s linear infinite; }
.logo-right.r1 { right: 20px; }
.logo-right.r2 { right: 100px; animation-delay: 3s; }
.logo-right.r3 { right: 180px; animation-delay: 6s; }
@keyframes up { from { bottom: -100px; } to { bottom: 100%; } }

/* COMPANY DETAILS */
.company-details {
  width: 60%;
  margin: 20px auto;
  text-align: center;
  color: white;
}
/* COMPANY DETAILS */
.company-details {
  width: 60%;
  margin: 20px auto;
  text-align: center;
}

.company-details table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  background: white; /* solid background */
}
.company-details th, .company-details td {
  padding: 10px;
  border: 1px solid #ecedef;
  color: black; /* text color for readability */
}
.company-details th { 
  background: #3d72a7; /* header color */
  color: white;
}
.company-details tr:nth-child(even) { 
  background: #f2f2f2; /* light stripe for readability */
}
.company-details tr:hover { 
  background: #d0e4f5; /* subtle hover effect */
}
.company-details h3 {
  text-align: center;
  margin-bottom: 10px;
}

/* FOOTER */
footer {
  background: black;
  color: white;
  text-align: center;
  padding: 10px;
}