/* site.css - minimal professional styles */
:root{
  --primary:#0d6efd;
  --muted:#6c757d;
  --bg:#f8f9fa;
  --card-bg:#ffffff;
  --radius:12px;
}
body{
  font-family: Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color:#222;
}
.header-top{
  background: linear-gradient(90deg, rgba(13,110,253,0.12), rgba(13,110,253,0.04));
  border-bottom:1px solid rgba(0,0,0,0.04);
}
.navbar-brand{font-weight:700; letter-spacing:0.3px}
.jumbotron{background:linear-gradient(180deg, rgba(13,110,253,0.06), transparent); border-radius: var(--radius);}
.card{border:0; border-radius:var(--radius); box-shadow:0 6px 20px rgba(0,0,0,0.06); background:var(--card-bg)}
.card .card-title{font-weight:600}
.card .card-text{color:var(--muted)}
.section-title{display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem}
.section-title h2{margin:0}
.footer{background:#0b1220; color:#cfd8dc; padding:3rem 0; margin-top:3rem}
.footer a{color:#cfe0ff; text-decoration:none}
.footer a:hover{color:#ffffff; text-decoration:underline}
.footer .footer-brand{display:flex; align-items:center; gap:12px}
.footer .footer-brand img{max-height:64px}
.footer .footer-about{color:#bfcbd6}
.footer h6{color:#e6eefc; font-weight:600}
.footer .list-unstyled li a{color:#bfcbd6}
.footer .list-unstyled li a:hover{color:#fff}
.footer .contact-item{color:#bfcbd6}
.footer .social-icons{display:flex; gap:12px; margin-top:8px; align-items:center}
.footer .social-icons a{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.04); color:#cfe0ff; transition:all .18s ease}
.footer .social-icons a:hover{background:var(--primary); color:#fff; transform:translateY(-2px)}
.footer .social-icons a svg{width:20px !important; height:20px !important; fill:currentColor !important}
.footer .small-muted{color:#9fb3ff}

/* Footer column heading accent */
.footer .footer-col h6{position:relative; padding-bottom:10px; margin-bottom:16px}
.footer .footer-col h6:after{content:''; position:absolute; left:0; bottom:0; height:3px; width:40px; background:linear-gradient(90deg,var(--primary),#7fb3ff); border-radius:2px}

/* compact footer lists */
.footer .footer-links li{margin:8px 0}
.footer .footer-links li a{color:#bfcbd6; font-size:0.95rem}
.footer .footer-contact p{margin:6px 0}

/* badges / small icons in lists */
.footer .icon-dot{display:inline-block; width:8px; height:8px; background:var(--primary); border-radius:50%; margin-right:8px; vertical-align:middle}

/* subtle divider top for footer */
.footer{border-top:1px solid rgba(255,255,255,0.03)}

@media (max-width:768px){
  .footer .row{gap:1rem}
  .footer .col-md-6, .footer .col-md-3{flex:1 1 100%; max-width:100%}
  .footer .footer-brand img{max-height:48px}
}

/* Header logo / brand styling */
.header-top .navbar-brand{display:flex; align-items:center; gap:10px}
.header-top .navbar-brand img{max-height:44px; width:auto; display:block; object-fit:contain; border-radius:6px}
.header-top .navbar-brand .brand-text{font-weight:700; color:var(--primary); margin:0}
@media (max-width:480px){
  /* On very small screens: always show full brand text. Allow wrapping so the
     name is never hidden. Reduce logo slightly to help space. */
  .header-top .navbar-brand{display:flex; align-items:center; gap:8px;}
  .header-top .navbar-brand img{max-height:28px; width:auto}
  .header-top .navbar-brand .brand-text{display:inline-block; font-size:1rem; line-height:1; white-space:normal; overflow:visible;}
}
.kicker{font-size:0.85rem; color:var(--primary); font-weight:600; text-transform:uppercase; letter-spacing:1px}
.container-small{max-width:1100px; margin:0 auto}
@media (max-width:768px){
  .card{box-shadow:0 4px 12px rgba(0,0,0,0.04)}
}

/* Header nav link hover underline */
.header-top nav a{
  position:relative;
  text-decoration:none;
  color:inherit;
  transition:color .15s ease;
}
.header-top nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  height:2px;
  width:0;
  background:currentColor;
  transition:width .18s ease;
  border-radius:2px;
}
.header-top nav a:hover::after,
.header-top nav a:focus::after{
  width:100%;
}
.header-top nav a:hover,
.header-top nav a:focus{
  color:var(--primary);
  outline:none;
}
