/* Frontend theme approximating mpiore.in with improvements */
:root { --brand: #ED5D05; --brand-dark:#c84a04; --dark: #1f1f1f; --text: #333; --muted: #666; --bg: #fffaf6; }
body { font-family: 'Poppins', 'Noto Sans Devanagari', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: var(--bg); }
.container { width: min(1200px, 92%); margin: 0 auto; }

.topbar{ background:var(--brand); color:#fff; font-size:.9rem; }
.tb-content{ display:flex; align-items:center; justify-content:space-between; padding:6px 0 }
.tb-left span{ margin-right:16px }
.tb-right a{ color:#fff; margin-left:12px }

.site-header { background:var(--brand); position: sticky; top:0; z-index:1000; }
.site-header .container { display:flex; align-items:center; justify-content:space-between; padding:10px 0; }
.brand a { display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:700; }
.brand-text { font-size:1.05rem; letter-spacing:.2px; }
.brand-sub{ display:block; color:#fff; font-size:.75rem; margin-top:-4px }
.main-nav ul { display:flex; gap:20px; list-style:none; margin:0; padding:0; }
.main-nav a { text-decoration:none; color:#fff; font-weight:600; padding:.5rem .6rem; border-radius:6px; }
.main-nav a:hover, .main-nav a:focus { background: rgba(255,255,255,.15); color:#fff; outline: 2px solid transparent; }
.nav-toggle { display:none; background:none; border:1px solid #fff; color:#fff; padding:.4rem .6rem; border-radius:6px; }

@media (max-width: 900px) {
  .nav-toggle { display:block; }
  .main-nav ul { position: absolute; background:var(--brand); top:60px; right:4%; width: 92%; border:1px solid var(--brand-dark); border-radius:8px; box-shadow: 0 10px 24px rgba(0,0,0,.18); flex-direction:column; gap:0; overflow:hidden; max-height:0; transition:max-height .3s ease; }
  .main-nav ul.open { max-height: 420px; }
  .main-nav a { padding:12px 16px; display:block; }
}

.hero { background: linear-gradient(180deg, rgba(237,93,5,.08), rgba(237,93,5,0)); padding: 30px 0 50px; }
.hero .slider { display:grid; grid-template-columns: 1fr; gap:16px; }
.hero .slide { position:relative; border-radius:12px; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.08); background:#fff; }
.hero .slide img { width:100%; height:360px; object-fit:cover; display:block; }
.hero .caption { position:absolute; left:0; right:0; bottom:0; padding:16px; background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.5)); color:#fff; }
.hero .caption h1 { margin:0; font-size:1.8rem; }

.section { padding:50px 0; }
.section .heading { text-align:center; margin-bottom:24px; }
.heading h2 { font-size:1.8rem; margin:0; }
.heading .line { width:80px; height:4px; background:var(--brand); margin:10px auto 0; border-radius:99px; }
.cols { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
.card { background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.06); }
.card img { width:100%; height:200px; object-fit:cover; display:block; }
.card .content { padding:16px; }
.btn { display:inline-block; background:var(--brand); color:#fff; text-decoration:none; padding:.6rem .9rem; border-radius:8px; font-weight:600; }
.btn:hover, .btn:focus { filter:brightness(1.05); box-shadow:0 4px 10px rgba(237,93,5,.3); }

.site-footer { background:#111; color:#ddd; padding:30px 0; }
.site-footer h4 { color:#fff; margin-top:0; }
.footer-cols { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.site-footer a { color:#ddd; text-decoration:none; }
.site-footer a:hover { color:#fff; }
.copyright { margin-top:20px; border-top:1px solid #333; padding-top:10px; text-align:center; font-size:.9rem; color:#aaa; }

.social a { font-size:1.2rem; margin-right:8px; }

.notice-list { list-style:none; margin:0; padding:0; }
.notice-list li { padding:10px; border-bottom:1px dashed #ddd; }
.notice-list a { color:var(--brand); text-decoration:none; }
/* Mobile-first responsive layout for frontend sections */

/* Banner scaling */
.banner-wrap { width: 100%; overflow: hidden; }
.banner-wrap img { width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 3/1; }

/* Banner animations and visibility */
.carousel-item .banner-animate { opacity: 0; transform: scale(1.02) translateY(8px); transition: opacity .6s ease, transform .8s ease; }
.carousel-item.active .banner-animate { opacity: 1; transform: scale(1) translateY(0); }

/* Subtle ken-burns zoom for images */
@keyframes kenburns {
  0% { transform: scale(1.02) translateY(2px); }
  100% { transform: scale(1.07) translateY(0); }
}
.carousel-item.active .kenburns { animation: kenburns 8s ease-in-out forwards; }

/* Ensure videos scale correctly in banner */
.carousel-item video.d-block { width: 100%; height: auto; display: block; }

/* Blog grid */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 992px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card { background: #fff; border: 1px solid #e7e7e7; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.blog-card img { width: 100%; height: 180px; object-fit: cover; }
.blog-card .content { padding: 12px; }
.blog-card h3 { font-size: 1.05rem; margin: 0 0 6px; }
.blog-card p { font-size: .95rem; line-height: 1.5; color: #444; }

/* Gallery grid */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 992px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 576px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-grid img { width: 100%; height: 160px; object-fit: cover; border-radius: 8px; }

/* Lightbox: can also be reused on frontend */
.lightbox-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; flex-direction:column; z-index:1050 }
.lightbox-overlay.open{ display:flex }
.lightbox-overlay img{ max-width:90vw; max-height:70vh; border-radius:8px }
.lb-title{ color:#fff; margin-top:8px; font-size:.9rem }

/* Mobile typography */
@media (max-width: 576px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.35rem; }
  h3 { font-size: 1.2rem; }
}