@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700;800&display=swap');

:root{
  --primary:#0a6b0a;
  --primary-light:#2e8b2e;
  --dark:#0f172a;
  --light:#f8fafc;
  --muted:#64748b;
  --gradient-text: linear-gradient(135deg, #0a6b0a 0%, #004d00 100%);
  --shadow-soft: 0 10px 40px -10px rgba(0,0,0,0.08);
  --shadow-hover: 0 20px 50px -10px rgba(10,107,10,0.18);
  --radius:20px;
}

*{ font-family:'Hind Siliguri',sans-serif; }
body{ background:var(--light); color:var(--dark); overflow-x:hidden; }

/* Navbar */
.navbar-premium{
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(0,0,0,.05);
  box-shadow:0 4px 30px rgba(0,0,0,0.03);
  padding:12px 0;
}
.brand-premium{
  font-weight:800; font-size:1.55rem;
  background:var(--gradient-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.dropdown-menu {
  min-width: 200px;
  padding: 10px;
}

.dropdown-item {
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 10px;
}

.dropdown-item:hover {
  background: rgba(10,107,10,0.08);
  color: var(--primary);
}



.navlink-premium{
  font-weight:700; color:#475569 !important;
  margin-left:18px; transition:.25s;
}
.navlink-premium:hover{ color:var(--primary)!important; }

.btn-shine{
  background:var(--primary);
  color:#fff !important;
  padding:10px 25px;
  border-radius:999px;
  font-weight:800;
  box-shadow:0 4px 15px rgba(10,107,10,.30);
  display:inline-flex; align-items:center; gap:8px;
  transition:.25s;
}
.btn-shine:hover{ transform:translateY(-2px); box-shadow:0 10px 25px rgba(10,107,10,.35); }

.btn-user-dash{
  background:#e8f5e9;
  color:var(--primary) !important;
  padding:8px 20px;
  border-radius:999px;
  font-weight:900;
  border:1px solid rgba(10,107,10,.10);
  transition:.25s;
}
.btn-user-dash:hover{
  background:var(--primary);
  color:#fff !important;
  box-shadow:0 5px 15px rgba(10,107,10,.20);
}

/* Hero */
.hero{
  padding:95px 0 75px;
  background: radial-gradient(circle at 10% 20%, rgb(240,253,244) 0%, rgb(255,255,255) 90%);
}
.hero-badge{
  background:rgba(10,107,10,.10);
  color:var(--primary);
  padding:8px 20px;
  border-radius:999px;
  font-weight:900;
  font-size:.92rem;
  display:inline-block;
  margin-bottom:18px;
}
.hero-title{
  font-weight:900;
  font-size:clamp(30px,3.6vw,56px);
  line-height:1.12;
  margin-bottom:18px;
}
.hero-title span{ color:var(--primary); }
.hero-desc{
  color:var(--muted);
  font-size:1.18rem;
  font-weight:600;
  line-height:1.6;
  margin-bottom:34px;
}
.hero-float{
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow-hover);
  border:4px solid #fff;
  animation:float 6s ease-in-out infinite;
}
.hero-float img{ width:100%; height:auto; display:block; }
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}

/* Section */
.section-header{ text-align:center; margin-bottom:55px; }
.section-header h5{
  color:var(--primary); font-weight:900;
  text-transform:uppercase; letter-spacing:1px;
  font-size:.92rem;
}
.section-header h2{ font-weight:900; font-size:clamp(26px,2.6vw,44px); margin-top:8px; }

/* Frame Cards */
.frame-card{
  background:#fff;
  border-radius:22px;
  padding:10px;
  border:1px solid rgba(0,0,0,.03);
  box-shadow:var(--shadow-soft);
  transition:.35s;
  cursor:pointer;
  height:100%;
  position:relative;
}
.frame-card:hover{
  transform:translateY(-10px);
  box-shadow:var(--shadow-hover);
  border-color:rgba(10,107,10,.10);
}
.frame-img{
  border-radius:16px;
  overflow:hidden;
  background:#f1f5f9;
  height:260px;
}
.frame-img img{ width:100%; height:100%; object-fit:cover; transition:.5s; }
.frame-card:hover .frame-img img{ transform:scale(1.08); }
.frame-details{ padding:18px 10px 10px; text-align:center; }
.frame-title{ font-weight:900; font-size:1.12rem; margin-bottom:5px; }
.frame-role{ color:var(--muted); font-weight:600; font-size:.92rem; }

.hot-pill{
  position:absolute; top:14px; right:14px;
  background:#dc2626; color:#fff;
  padding:6px 12px; border-radius:999px;
  font-size:12px; font-weight:900;
  box-shadow:0 10px 20px rgba(220,38,38,.18);
}

/* CTA */
.cta{
  background: linear-gradient(135deg, #0a6b0a 0%, #064006 100%);
  padding:80px 0;
  color:#fff;
}
.cta-btn-white{
  background:#fff; color:var(--primary);
  padding:12px 40px; border-radius:999px;
  font-weight:900; display:inline-flex; align-items:center; gap:10px;
  transition:.25s; box-shadow:0 10px 30px rgba(0,0,0,.20);
}
.cta-btn-white:hover{ transform:scale(1.04); background:#f8fafc; }

/* Footer */
.footer-premium{
  background:#0f172a;
  color:#94a3b8;
  padding-top:70px;
}
.footer-brand{
  font-size:1.85rem;
  font-weight:900;
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  display:inline-block;
  margin-bottom:18px;
}
.footer-heading{ color:#fff; font-weight:900; margin-bottom:24px; font-size:1.1rem; }
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:12px; }
.footer-links a{
  color:#94a3b8; transition:.25s;
  display:inline-flex; align-items:center; gap:8px;
}
.footer-links a:hover{ color:var(--primary); transform:translateX(5px); }
.social-btn{
  width:40px; height:40px;
  background:rgba(255,255,255,.05);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; color:#fff;
  margin-right:10px; transition:.25s;
}
.social-btn:hover{ background:var(--primary); transform:translateY(-4px); }
.footer-bottom{
  background:#020617;
  padding:25px 0;
  margin-top:45px;
  border-top:1px solid rgba(255,255,255,.05);
}