:root{
  --primary:#0d47a1;
  --secondary:#1565c0;
  --accent:#ffb300;
  --light:#f5f7fa;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--light);
  color:#333;
}
.topbar{
  background:#083b8a;
  color:#fff;
  font-size:14px;
}
.navbar{
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.hero{
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url("../images/banner.jpg") center/cover no-repeat;
  color:#fff;
}
.hero h1{font-size:3rem;font-weight:700}
.hero p{font-size:1.2rem}
.section-title{
  color:var(--primary);
  font-weight:700;
  margin-bottom:1rem;
}
.card{
  border:0;
  border-radius:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  transition:.25s;
}
.card:hover{
  transform:translateY(-4px);
}
.stat-card i{
  font-size:2.8rem;
  color:var(--primary);
}
.quick-card{
  text-align:center;
  padding:20px;
}
.quick-card i{
  font-size:2.4rem;
  color:var(--secondary);
}
.gallery img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:10px;
}
.btn-primary{
  background:var(--primary);
  border-color:var(--primary);
}
.btn-warning{
  color:#222;
}

.footer{
  background:#083b8a;
  color:#fff;
  padding:30px 0;
  margin-top:40px;
}
@media (max-width:768px){
.hero{min-height:300px}
.hero h1{font-size:2rem}
.hero p{font-size:1rem}
.topbar{text-align:center}
}