*{
  box-sizing:border-box;
  transition:.3s;
}

body{
  font-family:Segoe UI;
  background:#f4f7fb;
  margin:0;
  color:#1f2937;
}

/* =========================
   HEADER (LOGO FINAL FIX)
   ========================= */
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:64px;                 /* LOCK HEIGHT */
  padding:0 40px;
  background:#0b4f6c;
  overflow:hidden;             /* PREVENT OVERFLOW */
}

header a{
  color:white;
  text-decoration:none;
  margin-left:15px;
}

header .logo{
  display:flex;
  align-items:center;
}

/* 🔒 FINAL LOGO CONTROL */
header .logo img{
  height:38px !important;      /* ONLY control height */
  width:auto !important;       /* KEEP ASPECT RATIO */
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  display:block;
}

/* GLOBAL IMAGE SAFETY */
img{
  max-width:100%;
  height:auto;
}

/* =========================
   PAGE
   ========================= */
.page{
  max-width:1200px;
  margin:40px auto;
  padding:0 20px;
}

.page-header h1{
  color:#0b4f6c;
  margin-bottom:5px;
}

.page-header p{
  color:#6b7280;
}

/* =========================
   HERO
   ========================= */
.hero{
  text-align:center;
  padding:50px 20px;
  color:white;
  background:linear-gradient(135deg,#0b4f6c,#01baef);
}

.hero-actions{
  margin-top:30px;
}

/* =========================
   BUTTONS
   ========================= */
.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;
}

/* =========================
   LAYOUT
   ========================= */
.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;
}

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

/* =========================
   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
   ========================= */
.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;
}

/* =========================
   TABLE
   ========================= */
.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
   ========================= */
footer{
  text-align:center;
  padding:30px;
  background:#0b4f6c;
  color:white;
}

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

@media(max-width:768px){
  header{
    height:56px;
    padding:0 20px;
  }

  header .logo img{
    height:30px !important;
  }
}
/* =========================
   HEADER LOGO FIX
   ========================= */

header{
  background:#0b4f6c;
  height:64px;                 /* fixed professional height */
  padding:0 40px;
  display:flex;
  align-items:center;
}

.logo-wrap{
  display:flex;
  align-items:center;
}

.logo-wrap img{
  height:38px;                 /* 🔑 controls logo size */
  width:auto;
  max-width:180px;
  object-fit:contain;
  display:block;
}
/* =========================
   FLASH LOGO PRELOADER
   ========================= */
#preloader{
  position:fixed;
  inset:0;
  background:#0b4f6c;          /* same as header for branding */
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99999;
  transition:opacity .8s ease, visibility .8s ease;
}

#preloader img{
  height:90px;                 /* controls flash logo size */
  width:auto;
  animation:logoPulse 1.6s ease-in-out infinite;
}

/* Pulse animation */
@keyframes logoPulse{
  0%{transform:scale(0.9);opacity:.6}
  50%{transform:scale(1.05);opacity:1}
  100%{transform:scale(0.9);opacity:.6}
}

/* Hide preloader */
#preloader.hide{
  opacity:0;
  visibility:hidden;
}