
* { box-sizing: border-box; font-family: 'Poppins', sans-serif; }
body { margin:0; background: #f0f2f5; color:#333; }

/* Header */
header { background: linear-gradient(135deg,#ff7e5f,#feb47b); color:white; padding:40px 0; text-align:center; box-shadow:0 4px 15px rgba(0,0,0,0.2);}
header h1 { font-size:2.5rem; font-weight:700; letter-spacing:1px; animation: glow 2s ease-in-out infinite alternate;}
@keyframes glow { from { text-shadow:0 0 5px #fff; } to { text-shadow:0 0 20px #fff; } }
header p { font-size:1.2rem; margin-top:10px; font-weight:500; }

/* Tabs */
.tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:20px 0; }
.tab-btn { padding:10px 20px; border:none; border-radius:8px; cursor:pointer; background:#bdc3c7; color:white; font-weight:600; transition:0.3s; }
.tab-btn.active { background:#1abc9c; transform:scale(1.05); }

/* Tab Content */
.tab-content { display:none; background:white; padding:20px; border-radius:12px; box-shadow:0 5px 15px rgba(0,0,0,0.1); margin-bottom:20px; }
.tab-content.active { display:block; }

/* Form */
.form-group { margin-bottom:15px; }
label { display:block; font-weight:600; margin-bottom:5px; }
input, select { width:100%; padding:10px; border-radius:8px; border:1px solid #ccc; font-size:1rem; }
button { background:#1abc9c; color:white; border:none; padding:12px 20px; border-radius:8px; font-size:1rem; cursor:pointer; margin-top:10px; transition:0.3s; }
button:hover { background:#16a085; transform:scale(1.02); }

/* Amount in Words */
.amountInWords { margin-top:5px; font-style:italic; font-weight:600; color:#2c3e50; }

/* Result & Breakdown */
.breakdown { margin-top:10px; font-weight:600; font-size:1rem; }
#sipResult, #fdResult, #ppfResult, #goldResult { margin-top:15px; font-weight:600; font-size:1.1rem; }

/* Chart Container */
.chart-container {
  width: 100%;
  max-width: 450px;
  height: 350px;
  margin: 30px auto;
}

/* Footer */
footer { text-align:center; padding:15px; background:#1abc9c; color:white; margin-top:20px; border-radius:12px 12px 0 0; }

/* Responsive */
@media(max-width:700px){ 
    .tabs{ flex-direction:column; }
    .chart-container{ width:80%; height:300px; }
}

.footer-links {
  margin-bottom: 8px;
}

.footer-links a {
  color:#000000;
  text-decoration: none;
  margin: 0 5px;
  font-size: 14px;
}

.footer-links a:hover {
  text-decoration: underline;
}

.legal-section {
  max-width: 900px;
  margin: 40px auto;
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  font-size: 14px;
  color: #555;
}

.legal-section h2 {
  margin-bottom: 10px;
  color: #2c3e50;
}

.content-block {
  max-width: 720px;
  margin: 20px auto;
  padding: 12px;
  background: #ffffff;
  border-radius: 8px;
  font-size: 14px;
  color: #333;
}

.content-block h3 {
  margin-bottom: 8px;
  color: #2c3e50;
}

/* ================= HERO BANNER ================= */

.hero-banner {
  width: 100%;
  background: linear-gradient(135deg, #1abc9c, #16a085);
  color: white;
  padding: 60px 20px;
  text-align: center;
}

.hero-content {
  max-width: 900px;
  margin: 0 auto;
}

.hero-banner h2 {
  font-size: 2.2rem;
  margin-bottom: 15px;
  font-weight: 700;
}

.hero-banner p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 30px;
  opacity: 0.95;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.hero-btn {
  background: white;
  color: #16a085;
  padding: 12px 22px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s ease;
}

.hero-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.2);
}

.hero-btn.outline {
  background: transparent;
  color: white;
  border: 2px solid white;
}

.hero-btn.outline:hover {
  background: white;
  color: #16a085;
}

/* Mobile */
@media(max-width: 700px) {
  .hero-banner h2 {
    font-size: 1.8rem;
  }
}

/* ================= HERO BANNER ================= */

.hero-banner {
  width: 100%;
  background: linear-gradient(135deg, #1abc9c, #16a085);
  color: white;
  padding: 70px 20px;
  text-align: center;
}

.hero-content {
  max-width: 900px;
  margin: 0 auto;
}

.hero-banner h2 {
  font-size: 2.4rem;
  margin-bottom: 15px;
  font-weight: 700;
}

.hero-banner p {
  font-size: 1.15rem;
  line-height: 1.6;
  margin-bottom: 35px;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.hero-btn {
  background: white;
  color: #16a085;
  padding: 14px 26px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.25s ease;
}

.hero-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}

.hero-btn.outline {
  background: transparent;
  color: white;
  border: 2px solid white;
}

.hero-btn.outline:hover {
  background: white;
  color: #16a085;
}

@media (max-width: 700px) {
  .hero-banner h2 {
    font-size: 1.9rem;
  }
}

.ad-container { max-width:1000px; margin:30px auto; text-align:center; }
.ad-container:empty { display:none; }
ins.adsbygoogle[data-ad-status="unfilled"] { display:none!important; }

/* HERO */
.hero-banner { background:#1abc9c; color:white; padding:60px 20px; text-align:center; }
.hero-btn { background:white; color:#1abc9c; padding:12px 20px; border-radius:8px; text-decoration:none; }
.hero-btn.outline { background:none; color:white; border:2px solid white; }


/* ================= INTERNAL TOOLS BANNER ================= */

.tool-banner {
  margin: 40px auto;
  padding: 25px 20px;
  max-width: 900px;
  background: linear-gradient(135deg, #eef2ff, #f8fafc);
  border-left: 6px solid #2563eb;
  border-radius: 10px;
  text-align: center;
}

.tool-banner-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: #1e3a8a;
}

.tool-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.tool-links a {
  padding: 8px 16px;
  background: #2563eb;
  color: #ffffff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: 0.25s ease;
}

.tool-links a:hover {
  background: #1e40af;
  transform: translateY(-2px);
}
