/* careers.css - full, robust version */

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Base page */
body{
  margin:0;
  font-family: Arial, sans-serif;
  color:#fff;
  /* background image on body, fixed */
  background: url('image/careers.jpg') no-repeat center center/cover;
  background-attachment: fixed;
  min-height:100vh;
  position: relative;
}

/* Fallback overlay (for browsers without backdrop-filter) */
body::before{
  content:"";
  position: fixed;
  inset:0; /* top:0; right:0; bottom:0; left:0; */
  z-index:0;
  background-color: rgba(11, 0, 0, 0.45); /* dark tint */
  /* try to blur the background as a fallback using filter on a copied background */
  background-attachment: fixed;
  mix-blend-mode: normal;
  pointer-events: none;
}

/* A separate fixed element (works better than body::before for stacking) */
.fixed-blur {
  position: fixed;
  inset:0;
  z-index:0;
  pointer-events: none;
  /* Use backdrop-filter where supported */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: rgba(0,0,0,0.30);
}

/* Main page container sits above the blur */
.careers-section {
  position: relative;
  z-index: 1; /* must be higher than the blur layer */
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  padding:120px 20px;
  box-sizing:border-box;
}

/* Glass card */
.overlay {
  width:90%;
  max-width:600px;
  padding:40px;
  border-radius:15px;
  text-align:center;
  color:#fff;
  background: rgba(8, 8, 8, 0.06); /* light translucent */
  box-shadow: 0 8px 30px rgba(11, 11, 11, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* small hover lift */
.overlay:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); }

h1 { color:#3ab6d9; margin:0 0 8px; font-size:2rem; }
.overlay p.lead { color:#e6f7fb; margin:0 0 18px; }

/* Form layout */
.careers-form{ display:flex; flex-direction:column; gap:14px; margin-top:10px; }
.careers-form input,
.careers-form select,
.careers-form button,
.careers-form label { font-size:15px; }

input, select {
  background: rgba(13, 13, 13, 0.12);
  color: #fff;
  border: none;
  padding:12px;
  border-radius:8px;
  outline: none;
}

input::placeholder { color: rgba(255,255,255,0.75); }

label { text-align:left; display:block; color:#dff6fb; margin-top:6px; }

/* File inputs: make them visually consistent */
.careers-form input[type="file"]{
  padding:10px 12px;
  background: rgba(11, 11, 11, 0.06);
  border-radius:6px;
  color:#fff;
}

/* Button */
button{
  background: linear-gradient(180deg,#3ab6d9,#25d366);
  color:#fff;
  border:none;
  padding:12px;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
}
button:hover{ transform: translateY(-2px); }

/* small caption / credit styling */
.note { color:#e0f7f6; font-size:0.95rem; }

/* responsive */
@media (max-width:768px){
  .overlay{ padding:28px; }
  h1{ font-size:1.6rem; }
  input, select, button{ font-size:14px; padding:10px; }
}

@media (max-width:420px){
  .overlay{ padding:20px; }
  body{ background-position:center top; }
}