body { font-family: 'Montserrat', sans-serif; background-color: #F5F7FA; color: #1B1F3B; font-size: .95rem }
    .logo-text { font-weight: 700; font-size: 1.5rem; color: white; text-decoration: none; }
    footer { background-color: #4f525a; color: white; padding: 2rem 1rem; }
    footer a { color: white; text-decoration: none; margin-left: 1rem; }
    .hero-section, .tool-section { background: white; border-radius: 10px; padding: 1.2rem; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 1rem; }
    .btn-green { background-color: #00C853; color: white; border: none; }
    .btn-green:hover { background-color: #00b34c; }
    .ad-banner { height: 90px; background: #ddd; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-top: 1rem; }
    .form-label { font-size:13px; font-weight:bold; }
    .calculator-section {
      background: #ffffff;
      padding: 50px;
      border-radius: 12px;
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
      max-width: 1000px;
      margin: auto;
    }
    .calculator-section h1 { font-weight: 600; text-align: center; }
    .form-range { width: 100%; }
    .result-box { background: #f1f3f5; padding: 20px; border-radius: 10px; margin-top: 30px; }
    .range-output { font-weight: bold; }
    #sipChart { max-width: 300px; margin: 30px auto; display: block; }
    h1, h2, h3, h4, h5 { font-weight: 600; }
	h2{color:#0056b3;font-size:23px;}
    a { text-decoration: none; color: #0d6efd; }
	.sticky-top {
    z-index: 1030; /* default Bootstrap value for navbar */
  }
  .custom-navbar {
  background-color: rgba(3, 95, 156, 0.9); /* semi-transparent primary-like blue */
  backdrop-filter: blur(8px); /* optional: adds smooth blur behind */
}
.actv-lnk{color:#fff!important}
#ppf-fd{margin-top:30px!important}

#ppfResult {
  font-weight: bold;
  font-size: 1.2rem;
}
.btn-success {
  background-color: #28a745;
  border-color: #28a745;
}


input[type=range]::-webkit-slider-thumb {
  background: #00C853; /* Green thumb */
}

input[type=range]::-moz-range-thumb {
  background: #00C853;
}

input[type=range]::-webkit-slider-runnable-track {
  background: #b2f5c4; /* light green track */
}

input[type=range]::-moz-range-track {
  background: #b2f5c4;
}
input[type=range] {
  accent-color: #00C853;
  height: 4px;
  border-radius: 4px;
}

.page-container { max-width:1200px; margin:30px auto; padding:0 20px; display:flex; gap:30px; align-items:flex-start; }
    .content { flex:0 0 70%; }
    .sidebar { flex:0 0 28%; }
    .intro-section { display:flex; gap:25px; align-items:center; background:#fff; border-radius:10px; padding:25px; margin-bottom:30px; box-shadow:0 4px 14px rgba(0,0,0,0.05); }
    .intro-section img { width:40%; border-radius:8px; }
    .intro-text { width:60%; }
    .intro-text h1 { color:#0d47a1; font-size:26px; margin-bottom:10px; }
    .intro-text p {line-height:1.5;}
    .section-card { background:#fff; border-radius:10px; padding:25px; margin-bottom:25px; box-shadow:0 4px 14px rgba(0,0,0,0.05); }
    .section-card img { width:80px; margin-bottom:12px; }
    .section-card h2 { font-size:22px; color:#0d47a1; margin-bottom:10px; }
    .section-card p {line-height:1.5; }
    .blog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:25px; }
    .blog-card { background:#fff; border-radius:10px; padding:18px; box-shadow:0 3px 12px rgba(0,0,0,0.05); }
    .blog-card img { width:100%; height:150px; object-fit:cover; border-radius:8px; margin-bottom:10px; }
    .blog-card h4 { font-size:17px; color:#0d47a1; margin-bottom:6px; }
    .ad-rect { background:#f3f3f3; border:2px dashed #ccc; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#888; font-weight:600; }
    .ad-rect-small { height:250px; }
    .ad-rect-large { height:600px; }
    .sidebar-card { background:#fff; border-radius:10px; padding:16px; box-shadow:0 3px 12px rgba(0,0,0,0.05); margin-bottom:20px; }
    .recent-post { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
    .recent-post img { width:64px; height:48px; object-fit:cover; border-radius:6px; }
    @media(max-width:992px){ .page-container{flex-direction:column;} .content,.sidebar{flex:100%;} .intro-section{flex-direction:column;} .intro-section img,.intro-text{width:100%;} }
	.top-hd{font-size:29px;margin-bottom:30px;}
	
	/* Main container using flex */
    
.post-disclaimer {
    margin-top: 25px;
    padding: 16px;
    background: #f7f7f7;
    border-left: 4px solid #0d47a1;
    font-size: 14px;
    line-height: 1.6;
    color: #444;
	font-style:italic
}
    /* Left (Main Blog Section) */
    .left-section {
      flex: 0 0 70%;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 25px;
    }

    .blog-card {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: all 0.3s ease;
    }

    .blog-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    .blog-card img {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }

    .blog-content {
      padding: 20px;
      flex-grow: 1;
    }

    .blog-content h3 {
      font-size: 1.2rem;
    margin: 0 0 10px;
    color: #4c6278;
    }

    .blog-content p {
      font-size: 0.95rem;
      line-height: 1.5;
      color: #555;
    }

    .read-more {
      display: inline-block;
      margin-top: 10px;
      background: #0056b3;
      color: #fff;
      padding: 8px 16px;
      border-radius: 5px;
      text-decoration: none;
      font-size: 0.9rem;
      transition: background 0.3s ease;
    }

    .read-more:hover {
      background: #003d80;
    }
 .read-more-btn{
      display:inline-block;
      padding:10px 14px;
      background: linear-gradient(90deg,var(--accent1),var(--accent2));
      color:#fff;
      font-weight:700;
      border-radius:10px;
      box-shadow: 0 8px 20px rgba(13,71,161,0.12);
      transition: transform 220ms ease, box-shadow 220ms ease, opacity 220ms;
    }
    .read-more-btn:hover{transform: translateY(-3px); opacity:0.98}



    /* Right Section */
    .right-section {
      flex: 0 0 28%;
      background: #fff;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
      position: sticky;
      top: 20px;
      height: fit-content;
      align-self: flex-start;
    }

    .right-section h2 {
      color: #0056b3;
      font-size: 1.2rem;
      margin-bottom: 15px;
    }

    .recent-post {
      display: flex;
      margin-bottom: 15px;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
    }

    .recent-post img {
      width: 70px;
      height: 70px;
      border-radius: 6px;
      margin-right: 10px;
      object-fit: cover;
    }

    .recent-post h4 {
      font-size: 0.95rem;
      color: #333;
      margin: 0;
    }

    .ad-space {
      margin-top: 30px;
      background: #eaeaea;
      height: 250px;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #777;
      font-size: 0.95rem;
      border: 2px dashed #ccc;
      text-align: center;
      padding: 10px;
    }

    /* Pagination */
    .pagination {
      text-align: center;
      margin: 40px 0;
      width: 100%;
	  display:block;			
    }

    .pagination button {
      background: #0056b3;
      color: #fff;
      border: none;
      padding: 10px 20px;
      margin: 0 10px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 1rem;
      transition: background 0.3s ease;
    }

    .pagination button:hover {
      background: #003d80;
    }

    /* Responsive Design */
    @media screen and (max-width: 992px) {
      .container {
        flex-direction: column;
      }
      .left-section, .right-section {
        flex: 100%;
      }
      .right-section {
        position: static;
        margin-top: 20px;
      }
    }
	
	header {
      background: #0056b3;
      color: #fff;
      text-align: center;
      padding: 30px 0;
    }
    header h1 {
      margin: 0;
      font-size: 2rem;
    }
	
	/* blog style */
	.blog-content { flex: 0 0 70%; background:#fff; padding:28px; border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,0.06); }
    .article h1 { font-size:clamp(10px, 5vw, 25px); margin-bottom:10px; color:#0056b3; }
    .article p { line-height:1.7; color:#333; font-size:15px; }
    .section-title { font-size:1.4rem; color:#0056b3; margin-top:18px; margin-bottom:8px; }
    .steps ol { padding-left:20px; }
    .infographic-placeholder { width:100%; height:220px; background:#eef4ff; border:2px dashed #c9ddff; display:flex; align-items:center; justify-content:center; color:#6b8ac4; margin:16px 0; border-radius:6px; font-weight:600; }
    .tips ul { padding-left:20px; }
   
    /* responsive */
    @media (max-width:992px){
      .page-container { flex-direction:column; padding:0 16px; }
      .content, .sidebar { flex:100%; }
      .sidebar { order:2; }
    }
	.blog-img{width:75%;clear:both; border-radius:8px; margin:12px 0;}
	.blog-ttls{font-style:italic}
	.breadcrumb-container {
  background: #f8f8f8;
  border-bottom: 1px solid #e2e2e2;
}

.breadcrumb a {
  color: #0d47a1;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: #444;
  font-weight: 600;
}
.hm-vdo1{width:100%; height:100%;border-radius:12px;margin-bottom:15px;}


@media screen and (min-width: 992px) {
	 .hm-vdo{width:42%; height:42%;border-radius:12px;}
 }

 @media screen and (max-width: 992px) {
	 .hm-vdo{width:90%; height:90%}
 }

#blog-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;          /* space between cards */
  margin-top: 20px;
  margin-bottom:45px;
}

/* Blog card style */
.section-card {
  background: #fff;
  padding: 18px;
  border-radius: 10px;
  border: 1px solid #eee;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Responsive fix for tablets */
@media (max-width: 900px) {
  #blog-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive fix for mobile */
@media (max-width: 600px) {
  #blog-list {
    grid-template-columns: 1fr;
  }
}
:root{
      --bg:#0f1724;
      --card:#ffffff;
      --muted:#7a8696;
      --accent1:#0d47a1;      /* deep blue */
      --accent2:#00bfa5;      /* teal */
      --gradient-1: linear-gradient(135deg,#0d47a1cc,#00bfa599);
      --glass: rgba(255,255,255,0.04);
      --radius:14px;
      --transition: 300ms cubic-bezier(.2,.9,.2,1);
      --max-width:1200px;
      --text:#0b1b2b;
    }
	
	.calc-box {
    background:#fff;
    padding:16px;
    border:1px solid #eef4ff;
    border-radius:10px;
    text-align:left;
    box-shadow:0 8px 18px rgba(10,10,10,0.04);
}
.calc-box img {
    width:48px;
    height:48px;
    margin-bottom:10px;
}
.calc-box h3 {
    font-size:18px;
    margin:0 0 6px;
    color:#0d47a1;
}
.calc-box p {
    line-height:1.5;
}

.glossary-block {
  background:#fff;
  padding:16px 20px;
  border-left:4px solid #0d47a1;
  border-radius:6px;
  margin-bottom:14px;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
}
.glossary-block h3 {
  font-size:20px;
  color:#0d47a1;
  margin-bottom:6px;
}
.glossary-block p {
  color:#444;
  font-size:14px;
  line-height:1.6;
}


/* =========  BLOG ARTICLE TYPOGRAPHY UPGRADE  ========= */

/* Main article container */
.blog-content.article {
  font-size: 16px;
  line-height: 1.6;
}

/* Normal paragraphs */
.blog-content.article p {
  margin-bottom: 14px;          /* space between paragraphs */
  line-height: 1.6;             /* line spacing */
}

/* Lead paragraph under H1 */
.blog-content.article .lead {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Headings spacing */
.blog-content.article h1 {
  margin-bottom: 18px;
  line-height: 1.4;
}

.blog-content.article h2.section-title {
  margin-top: 28px;
  margin-bottom: 12px;
  line-height: 1.4;
}

.blog-content.article h3 {
  margin-top: 20px;
  margin-bottom: 8px;
  line-height: 1.4;
}

/* Lists inside article */
.blog-content.article ul,
.blog-content.article ol {
  padding-left: 22px;
  margin-bottom: 14px;
  font-size:15px;
}

.blog-content.article li {
  margin-bottom: 6px;
  line-height: 1.6;
}

/* Tables spacing */
.blog-content.article table {
  margin: 12px 0 18px;
}

/* Breadcrumb + meta text subtle spacing */
.breadcrumb-container {
  margin-bottom: 4px;
}

.blog-content.article > p[style*="font-size:14px"] {
  margin-bottom: 12px;
}
.blog-p-txt
{
	margin-bottom:6px
}
.glossary-mini-card {
  background:#fff;
  padding:15px 20px;
  border-left:4px solid #0d47a1;
  border-radius:6px;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
}
.glossary-mini-card h4 {
  margin-bottom:6px;
  font-size:18px;
  color:#0d47a1;
}
.glossary-mini-card p {
  line-height:1.5;
}
/* Animated Text */
/* Animated Text – 10 Lines Version */
.animated-text-wrapper {
  font-size: 18px;
  font-weight: 600;
  margin: 15px 0 25px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.static-text {
  color: #222;
}

.dynamic-text {
  height: 34px;
  overflow: hidden;
  position: relative;
}

.dynamic-text span {
  display: block;
  height: 34px;
  line-height: 34px;
  color: #0d47a1;
  animation: scrollText10 20s infinite;
}

/* 10-line animation */
@keyframes scrollText10 {
  0%   { transform: translateY(0); }
  10%  { transform: translateY(-34px); }
  20%  { transform: translateY(-68px); }
  30%  { transform: translateY(-102px); }
  40%  { transform: translateY(-136px); }
  50%  { transform: translateY(-170px); }
  60%  { transform: translateY(-204px); }
  70%  { transform: translateY(-238px); }
  80%  { transform: translateY(-272px); }
  90%  { transform: translateY(-306px); }
  100% { transform: translateY(0); }
}

/* Mobile Optimization */
@media (max-width: 768px) {
  .animated-text-wrapper {
    font-size: 20px;
  }

  .dynamic-text,
  .dynamic-text span {
    height: 28px;
    line-height: 28px;
  }

  @keyframes scrollText10 {
    0%   { transform: translateY(0); }
    10%  { transform: translateY(-28px); }
    20%  { transform: translateY(-56px); }
    30%  { transform: translateY(-84px); }
    40%  { transform: translateY(-112px); }
    50%  { transform: translateY(-140px); }
    60%  { transform: translateY(-168px); }
    70%  { transform: translateY(-196px); }
    80%  { transform: translateY(-224px); }
    90%  { transform: translateY(-252px); }
    100% { transform: translateY(0); }
  }
}


/* Blog list – single column full width */
#blog-list {
  display: block;
}

/* Individual blog row */
.blog-row {
  width: 100%;
  padding: 22px;
  margin-bottom: 22px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.blog-row:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}