:root{ --brand: #5BD4FA; --accent:#6610f2; --gap:12px; --radius:12px; }
*{box-sizing:border-box}
body{font-family:Poppins, system-ui, -apple-system, 'Segoe UI', Roboto, Arial; margin:0; background:#f7fbff; color:#111;}
a{color:var(--brand); text-decoration:none}
.header{background:linear-gradient(90deg, rgba(91,212,250,0.12), rgba(255,255,255,0.0)); position:sticky; top:0; z-index:1000; backdrop-filter: blur(6px);}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:10px 18px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:44px; width:44px; object-fit:cover; border-radius:8px;}
.nav-links{display:flex; gap:12px; align-items:center;}
.nav-links a{padding:8px 12px; border-radius:8px; font-weight:600;}
.nav-links a:hover{background:rgba(91,212,250,0.12);}

.hero{margin:18px auto; max-width:1200px; padding:12px;}
.slider{border-radius:14px; overflow:hidden; box-shadow:0 10px 30px rgba(10,10,30,.06); height:320px; display:flex; align-items:center; justify-content:center; background:#eaf8ff;}
.slider img{width:100%; height:320px; object-fit:cover; display:block; transition:opacity .6s ease-in-out; opacity:1;}
.slider .overlay{position:absolute; left:0; right:0; top:0; bottom:0; display:flex; align-items:flex-end; padding:20px; pointer-events:none;}
.container{max-width:1200px; margin:0 auto; padding:0 16px;}

.section{margin:28px 0;}
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:16px;}

.card{background:#fff; border-radius:12px; padding:14px; box-shadow:0 8px 20px rgba(10,10,30,.04); transition:transform .22s ease, box-shadow .22s ease;}
.card:hover{transform:translateY(-6px); box-shadow:0 16px 40px rgba(10,10,30,.08);}
.card .thumb{height:160px; overflow:hidden; border-radius:10px; margin-bottom:10px;}
.card .thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.card .title{font-weight:700; margin-bottom:6px;}
.card .meta{font-size:13px; color:#666; margin-bottom:8px;}
.btn-brand{background:var(--brand); color:#000; border:none; padding:8px 14px; border-radius:8px; font-weight:700; display:inline-block;}

.about{background:linear-gradient(180deg,#fff,#f8fdff); border-radius:12px; padding:18px; box-shadow:0 8px 30px rgba(10,10,30,.03);}

.footer{margin-top:40px; padding:30px 0; background:#fff; border-top:1px solid rgba(10,10,30,.04);}
.footer .inner{max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; gap:12px; align-items:center; padding:0 16px;}
.footer .social a{margin-left:10px; color:var(--brand); font-weight:700;}

@media(max-width:768px){
  .slider{height:220px} .slider img{height:220px}
  .nav-links{display:none}
  .container{padding:0 12px}
}
.navbar {
  transition: all 0.3s ease;
}

.navbar-brand img {
  height: 38px;
  transition: transform 0.3s ease;
}

.navbar-brand:hover img {
  transform: scale(1.05);
}

.nav-link {
  font-weight: 500;
  color: #222 !important;
  transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #5BD4FA !important;
}

.navbar-toggler {
  background-color: rgba(0,0,0,0.05);
  border-radius: 6px;
}

@media (max-width: 991px) {
  .navbar-collapse {
    background: #fff;
    border-radius: 8px;
    padding: 10px 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }
  .nav-link {
    display: block;
    padding: 0.7rem 1rem;
  }
}