/* ===== Kinar Saathi - Government Portal Stylesheet ===== */

/* Base */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; overflow-x:hidden; background:#f8fafc; }

/* Scrollbar */
::-webkit-scrollbar { width:7px; }
::-webkit-scrollbar-track { background:#f1f5f9; }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#1a365d,#3182ce); border-radius:10px; }

/* Sticky Header */
#mainHeader { transition:box-shadow 0.3s ease; }
#mainHeader.scrolled { box-shadow:0 4px 24px rgba(0,0,0,0.12); }

/* Tricolor */
.tricolor-line { height:4px; background:linear-gradient(to right,#f97316 33%,#fff 33%,#fff 66%,#16a34a 66%); }

/* Hero */
.hero-section {
    min-height:85vh;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
.hero-overlay {
    position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(26,54,93,0.92) 0%,rgba(43,108,176,0.85) 50%,rgba(49,130,206,0.80) 100%);
    z-index:1;
}
.hero-section::before {
    content:'';position:absolute;top:-50%;right:-20%;width:500px;height:500px;border-radius:50%;
    background:rgba(255,255,255,0.04);animation:heroPulse 8s ease-in-out infinite;z-index:2;
}
.hero-section::after {
    content:'';position:absolute;bottom:-30%;left:-10%;width:350px;height:350px;border-radius:50%;
    background:rgba(255,255,255,0.03);animation:heroPulse 10s ease-in-out infinite reverse;z-index:2;
}
@keyframes heroPulse { 0%,100%{transform:scale(1);opacity:.5} 50%{transform:scale(1.2);opacity:1} }

/* Person Cards - Modern */
.person-card {
    transition:all 0.5s cubic-bezier(0.4,0,0.2,1);
    background:white;
    border-radius:20px;
    padding:28px 16px 24px;
    border:1px solid #e2e8f0;
    position:relative;
    overflow:hidden;
}
.person-card::before {
    content:'';position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(90deg,#f97316,#3182ce,#16a34a);
    transform:scaleX(0);transition:transform 0.4s ease;transform-origin:left;
}
.person-card:hover::before { transform:scaleX(1); }
.person-card:hover { transform:translateY(-10px);box-shadow:0 20px 40px rgba(26,54,93,0.15); }
.person-card .person-img {
    width:120px;height:120px;border-radius:50%;margin:0 auto 16px;
    border:4px solid #e2e8f0;overflow:hidden;
    transition:all 0.4s ease;box-shadow:0 4px 15px rgba(0,0,0,0.1);
    background:#f1f5f9;
}
.person-card:hover .person-img {
    border-color:#3182ce;box-shadow:0 0 0 4px rgba(49,130,206,0.2),0 8px 25px rgba(49,130,206,0.2);
}
.person-card .person-img img { width:100%;height:100%;object-fit:cover; }

/* Quick Access Cards */
.quick-card {
    transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
    position:relative;overflow:hidden;
    border-radius:16px;
}
.quick-card::after {
    content:'';position:absolute;top:0;left:0;width:4px;height:0;
    background:linear-gradient(to bottom,#f97316,#3182ce);
    transition:height 0.4s ease;
}
.quick-card:hover::after { height:100%; }
.quick-card:hover { transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,0.08); }

/* News Items */
.news-item { transition:all 0.3s ease;border-left:3px solid transparent; }
.news-item:hover { background:#f7fafc;border-left-color:#3182ce;padding-left:20px; }

/* Scheme Cards */
.scheme-card {
    transition:all 0.4s cubic-bezier(0.4,0,0.2,1);overflow:hidden;border-radius:16px;
}
.scheme-card:hover { transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,0.10); }
.scheme-card:hover .scheme-icon { transform:scale(1.1); }
.scheme-icon { transition:transform 0.5s ease; }

/* Counter Animation */
.counter-box { transition:all 0.4s ease;border-radius:16px; }
.counter-box:hover { transform:translateY(-5px) scale(1.03); }

/* Testimonial Cards */
.testimonial-card {
    transition:all 0.4s ease;position:relative;border-radius:16px;
}
.testimonial-card::before {
    content:'\201C';position:absolute;top:12px;left:18px;font-size:55px;
    color:rgba(49,130,206,0.08);font-family:Georgia,serif;line-height:1;
}
.testimonial-card:hover { transform:translateY(-5px);box-shadow:0 20px 40px rgba(0,0,0,0.08); }

/* Section Heading */
.section-heading { position:relative;display:inline-block; }
.section-heading::after {
    content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);
    width:60px;height:3px;background:linear-gradient(to right,#f97316,#3182ce);border-radius:2px;
}

/* Floating Animation */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.floating { animation:float 3s ease-in-out infinite; }

/* Gradient Move */
@keyframes gradientMove { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* Back to Top */
#backToTop.show { display:flex !important;animation:fadeInUp 0.3s ease; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* Chart Container */
.chart-container { position:relative;height:300px;width:100%; }

/* Badge Pulse */
.update-badge { animation:badgePulse 2s infinite; }
@keyframes badgePulse { 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.4)} 50%{box-shadow:0 0 0 8px rgba(239,68,68,0)} }

/* Multi-step Form */
.step-indicator { display:flex;justify-content:center;gap:8px;margin-bottom:32px; }
.step-dot {
    width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:600;border:2px solid #e2e8f0;color:#94a3b8;background:#fff;
    transition:all 0.3s ease;position:relative;
}
.step-dot.active { border-color:#3182ce;color:#fff;background:#3182ce; }
.step-dot.completed { border-color:#16a34a;color:#fff;background:#16a34a; }
.step-connector { width:40px;height:2px;background:#e2e8f0;margin-top:17px;transition:background 0.3s; }
.step-connector.active { background:#3182ce; }
.form-step { display:none; }
.form-step.active { display:block;animation:fadeIn 0.4s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* OTP Input */
.otp-inputs { display:flex;gap:8px;justify-content:center; }
.otp-inputs input {
    width:48px;height:52px;text-align:center;font-size:20px;font-weight:700;
    border:2px solid #e2e8f0;border-radius:12px;outline:none;
    transition:border-color 0.3s;
}
.otp-inputs input:focus { border-color:#3182ce;box-shadow:0 0 0 3px rgba(49,130,206,0.1); }

/* Accordion */
.accordion-content { max-height:0;overflow:hidden;transition:max-height 0.4s ease; }
.accordion-item.open .accordion-content { max-height:500px; }
.accordion-item.open .accordion-icon { transform:rotate(180deg); }
.accordion-icon { transition:transform 0.3s ease; }

/* Gallery Image Hover */
.gallery-item { border-radius:16px;overflow:hidden; }
.gallery-item .overlay {
    position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.7),transparent);
    opacity:0;transition:opacity 0.4s ease;
}
.gallery-item:hover .overlay { opacity:1; }
.gallery-item:hover .gallery-icon { transform:scale(1.15); }
.gallery-icon { transition:transform 0.4s ease; }

/* Page Banner */
.page-banner {
    background:linear-gradient(135deg,#1a365d 0%,#2b6cb0 60%,#3182ce 100%);
    position:relative;overflow:hidden;
}
.page-banner::before {
    content:'';position:absolute;top:-30%;right:-10%;width:300px;height:300px;border-radius:50%;
    background:rgba(255,255,255,0.04);
}
.page-banner::after {
    content:'';position:absolute;bottom:-20%;left:-5%;width:200px;height:200px;border-radius:50%;
    background:rgba(255,255,255,0.03);
}

/* Responsive */
@media(max-width:768px) {
    .hero-section { min-height:auto;padding-top:60px;padding-bottom:60px; }
    .hero-section::before,.hero-section::after { display:none; }
    .chart-container { height:250px; }
    .otp-inputs input { width:40px;height:44px;font-size:16px; }
    .step-dot { width:30px;height:30px;font-size:11px; }
    .step-connector { width:24px; }
}
@media(max-width:480px) {
    .chart-container { height:200px; }
    .otp-inputs input { width:36px;height:40px;font-size:15px; }
}
