/* Header container */
.site-header {
  width: 100%;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* LEFT side */
  box-sizing: border-box;
}

/* Logo size control */
.site-logo {
  height: 48px;      /* 👈 controls logo size */
  max-width: 160px; /* 👈 prevents stretching */
  width: auto;
}
*{box-sizing:border-box;transition:.3s}
body{font-family:Segoe UI;background:#f4f7fb;margin:0;color:#1f2937}
header{display:flex;justify-content:space-between;align-items:center;padding:16px 40px;background:#0b4f6c}
header a{color:white;text-decoration:none;margin-left:15px}
.logo{font-size:22px;font-weight:600;color:white}

.page{max-width:1200px;margin:40px auto;padding:0 20px}
.page-header h1{color:#0b4f6c;margin-bottom:5px}
.page-header p{color:#6b7280}

.hero{text-align:center;padding:120px 20px;color:white;
background:linear-gradient(135deg,#0b4f6c,#01baef)}
.hero-actions{margin-top:30px}

.btn-primary{background:#01baef;color:white;border:none;padding:14px 28px;
border-radius:30px;font-size:15px;cursor:pointer;text-decoration:none}
.btn-primary:hover{transform:translateY(-2px)}
.btn-secondary{border:2px solid white;padding:14px 26px;border-radius:30px;
color:white;text-decoration:none;margin-left:15px}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.info-box{background:linear-gradient(135deg,#0b4f6c,#0284c7);
color:white;padding:40px;border-radius:20px}
.info-box ul{padding-left:20px}

.card{background:white;padding:30px;border-radius:20px;
box-shadow:0 15px 40px rgba(0,0,0,.1);margin-bottom:30px}

/* Animated Inputs */
.input-group{position:relative;margin:22px 0}
.input-group input,.input-group select{
width:100%;padding:16px 50px;border-radius:30px;
border:2px solid #e5e7eb;font-size:14px;outline:none}
.input-group label{
position:absolute;top:50%;left:50px;transform:translateY(-50%);
color:#9ca3af;background:white;padding:0 6px;pointer-events:none}
.input-group .icon{
position:absolute;left:18px;top:50%;transform:translateY(-50%);
font-size:18px;opacity:.7}
.input-group input:focus,
.input-group select:focus{
border-color:#01baef;
box-shadow:0 0 0 6px rgba(1,186,239,.2)}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown)+label,
.input-group select:focus + label{
top:-6px;font-size:11px;color:#01baef}

/* Landing extras */
.banner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;margin:60px 0}
.banner-card{background:white;padding:30px;border-radius:20px;text-align:center;
box-shadow:0 15px 30px rgba(0,0,0,.08)}
.banner-card:hover{transform:translateY(-8px)}

.timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px}
.timeline-step{background:white;padding:25px;border-radius:20px;text-align:center}
.timeline-step span{display:inline-block;background:#01baef;color:white;
width:36px;height:36px;border-radius:50%;line-height:36px;margin-bottom:10px}

.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:20px}

table{width:100%;border-collapse:collapse;background:white;border-radius:20px;overflow:hidden}
th{background:#0b4f6c;color:white}
td,th{padding:14px}
.approve{background:#22c55e;color:white;border:none;padding:6px 12px;border-radius:8px}
.reject{background:#ef4444;color:white;border:none;padding:6px 12px;border-radius:8px}

footer{text-align:center;padding:30px;background:#0b4f6c;color:white}

@media(max-width:900px){.two-col{grid-template-columns:1fr}}