/* Green/Grey modern theme with smooth animations */
@font-face{
  font-family:'SolaimanLipi';
  src: url('../fonts/SolaimanLipi.ttf') format('truetype');
  font-weight:normal; font-style:normal; font-display:swap;
}
:root{
  --brand:#1a8c4f;
  --brand-2:#0f5c35;
  --soft:#f0fff6;
  --muted:#6c757d;
  --glass: rgba(255,255,255,0.75);
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'SolaimanLipi', Arial, sans-serif;
  background: linear-gradient(180deg,#e7fff1 0%,#f7faf8 100%);
  color:#1f2937;
}
.bg-deep{background: linear-gradient(90deg, var(--brand), var(--brand-2));}
.navbar-brand{letter-spacing:.4px}
.shadow-soft{box-shadow:var(--shadow)}

.card-glass{
  background: var(--glass);
  border:1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(6px);
  border-radius: 20px;
}

.mini-card{
  color:#fff;
  border-radius:18px;
  padding:1rem 1.25rem;
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.mini-title{opacity:.95;font-size:.98rem}
.mini-count{font-weight:800;font-size:1.6rem;margin-top:.2rem}
.mini-icon{font-size:2.3rem; opacity:.9}

.gradient-1{background:linear-gradient(135deg,#00b894,#00cec9)}
.gradient-2{background:linear-gradient(135deg,#fdcb6e,#e17055)}
.gradient-3{background:linear-gradient(135deg,#6c5ce7,#00cec9)}
.gradient-4{background:linear-gradient(135deg,#0984e3,#6c5ce7)}

.timeline{list-style:none;margin:0;padding-left:0}
.timeline li{position:relative;padding-left:1rem;margin:.6rem 0}
.timeline li span{display:inline-block; min-width:92px; font-weight:700; color:#0f5132}
.timeline li::before{content:"";position:absolute;left:0;top:.55rem;width:8px;height:8px;border-radius:50%;background:var(--brand)}

.preloader{position:fixed; inset:0; background:rgba(255,255,255,.95); z-index:9999; transition:.4s; opacity:1; visibility:visible}
.preloader.hide{opacity:0; visibility:hidden}
.spinner{width:44px; height:44px; border:4px solid #c8f5de; border-top-color:var(--brand); border-radius:50%; animation:spin 1s linear infinite}

.btn-ripple{position:relative; overflow:hidden}
.btn-ripple::after{
  content:""; position:absolute; width:10px; height:10px; border-radius:50%;
  background: rgba(255,255,255,.6); transform:scale(1); opacity:0; pointer-events:none;
}
.btn-ripple:active::after{
  animation:ripple .6s ease-out; opacity:1;
}

.animate-pop{animation:pop .45s ease-out both}
.animate-float{animation:floaty 2.4s ease-in-out infinite}
.animate-fade{animation:fadeIn .6s ease both}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{0%{transform:scale(.95);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:translateY(0)}}
@keyframes ripple{0%{transform:scale(1); opacity:.6}100%{transform:scale(20); opacity:0}}