/* ============================================================
   PART 1: PC / DESKTOP STYLES (DEFAULT)
   Ye code sirf Laptop/PC par chalega
   ============================================================ */

/* --- RESET & VARIABLES --- */
:root {
    --primary-red: #D32F2F;
    --dark-navy: #0F224A;
    --gold: #C5A059;
    --bg-light: #F4F7FA;
    --white: #FFFFFF;
    --text-main: #242e50;
    --text-light: #666;
    --shadow-header: 0 4px 15px rgba(0,0,0,0.08);
    --shadow-card: 0 5px 15px rgba(0,0,0,0.05);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-main);
    line-height: 1.6;
} /* Maine yahan body tag band kiya hai jo pehle missing tha */

header, nav, a, button, .menu {
    font-family: 'Manrope', sans-serif; 
}

/* --- UNIVERSAL BLUE SEPARATOR LINE --- */
hr.blue-line {
    border: 0;                /* Purani default border hatao */
    height: 2px;              /* Line ki motai (2px best dikhegi) */
    background: #2196F3;      /* Blue Color */
    background-color: #2196F3; /* Extra safety ke liye */
    margin-top: 20px;         /* Upar gap */
    margin-bottom: 30px;      /* Niche gap */
    width: 100%;              /* Full choudai */
    display: block;           /* Zabardasti dikhao */
    opacity: 1;               /* Transparency hatao */
}

/* PC CONTAINER: Bada aur Chauda */
.container { 
    max-width: 1250px; 
    margin: 0 auto; 
    padding: 0 20px; 
}

a { text-decoration: none; transition: 0.3s; }
/* --- DROPDOWN MENU DESIGN (PC) --- */

/* Dropdown Container */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown ke andar wali list (Chhupi hui) */
.dropdown-content {
    display: none; /* Shuru me gayab */
    position: absolute;
    background-color: #ffffff;
    min-width: 280px; /* List ki choudai */
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    border-top: 3px solid #D32F2F; /* Red Top Border */
    z-index: 1000;
    border-radius: 0 0 5px 5px;
    top: 100%; /* Button ke theek niche */
}

/* Links inside Dropdown */
.dropdown-content a {
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid #f1f1f1;
    text-align: left; /* Left Align text */
}

/* Hover Effects */
.dropdown-content a:hover {
    background-color: #f9f9f9;
    color: #D32F2F;
    padding-left: 20px; /* Thoda shift hoga hover par */
}

/* Show Dropdown on Hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Arrow Icon Adjustment */
.dropbtn {
    cursor: pointer;
}

/* --- TOP BAR (PC: Left Aligned) --- */
/* --- TOP BAR DESIGN (PC & MOBILE SINGLE LINE) --- */

.top-bar { 
    background: #B71C1C; /* India Post Red */
    color: white; 
    font-size: 14px;
    font-weight: 500; /* PC Font Size */
    padding: 8px 0; 
}

.top-bar-inner { 
    display: flex; 
    /* PC: Left aur Right kone mein space */
    justify-content: space-between; 
    align-items: center; 
}

/* Hide helper text on mobile to save space */
/* Helper Class: Mobile par extra text chupane ke liye */
.hide-on-mobile { display: inline; }

/* --- MOBILE SPECIFIC SETTINGS --- */
@media (max-width: 600px) {
    
    .top-bar {
        font-size: 10px; /* Error Fixed: font size -> font-size */
        padding: 6px 0;
    }

    .top-bar-inner {
        /* Mobile: Center Align lekin Row (Ek Line) */
        justify-content: center; 
        gap: 50px; /* Dono ke beech thoda gap */
        width: 100%;
    }

    /* Font Size bahut chhota karna padega ek line ke liye */
    .contact-left, .contact-right {
        font-size: 10px; /* Text Size Small */
        white-space: nowrap; /* Text tut kar niche na gire */
    }

    /* "Toll Free" aur "Support" text ko chupana behtar hai mobile par */
    /* Taaki sirf Icon aur Number dikhe aur ek line me fit ho jaye */
    .hide-on-mobile {
        display: none;

    }
        /* Email aur Phone ko ek line me rakhne ke liye */
    .contact-left, .contact-right {
        white-space: nowrap;
    }

}

/* --- HEADER (PC) --- */
.main-header {
    background: var(--white);
    box-shadow: var(--shadow-header);
    position: sticky; top: 0; z-index: 9999; width: 100%;
}
.header-inner { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; }
.logo-area { display: flex; align-items: center; gap: 10px; }
.brand-logo { height: 50px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-title { font-weight: 900; color: var(--primary-red); font-size: 27px; }
.brand-sub { font-size: 14px; color: var(--text-light); }

/* PC NAV MENU (Visible) */
.nav-menu { display: flex;  gap: 30px; }
.nav-link { color: var(--text-main); font-weight:700; font-size: 17px; margin-right: 10px;}
.nav-link:hover { color: var(--primary-red); }



/* PC MOBILE TOGGLE (Hidden) */
.mobile-toggle { display: none; } 

/* --- HERO SECTION (WITH GRADIENT BACKGROUND) --- */
.hero-section {
    /* Ye line background ko Left (White) se Right (Light Blue) karegi */
    background: linear-gradient(to right, #ffffff 0%, #e3f2fd 100%);
    
    padding: 60px 0 40px;
    text-align: center;
    border-bottom: 1px solid #10B981;
}

/* PC par Font Bada rakhne ke liye */
.hero-content h1 { 
    font-size: 38px; 
    color: var(--dark-navy); 
    font-weight: 700; 
    margin-bottom: 10px;
}

.hero-content .highlight { 
    color: var(--primary-red); 
}

.hero-content p { 
    font-size: 16px; 
    color: #555; 
}

/* --- SECTIONS & HEADINGS (PC) --- */
.category-section { padding: 60px 0; border-bottom: 1px solid #ddd; }
.bg-grey { background-color: #F9FAFB; }
.section-header { text-align: center; margin-bottom: 40px; }
.section-header h2 { font-size: 28px; color: var(--dark-navy); font-weight: 700; border-bottom: 3px solid var(--gold); display: inline-block; padding-bottom: 5px; }

/* --- CARDS GRID (PC: 3 Columns) --- */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Columns Fix */
    gap: 30px;
}

.pro-card {
    background: var(--white); border-radius: 10px; padding: 35px 30px;
    min-height: 300px; /* PC Height */
    border-top: 5px solid var(--gold); box-shadow: var(--shadow-card);
    display: flex; flex-direction: column; justify-content: space-between;
    transition: all 0.3s ease; position: relative;
}

.pro-card:hover { transform: translateY(-5px); border-top-color: var(--primary-red); box-shadow: 0 10px 25px rgba(211, 47, 47, 0.15); }
.card-badge { position: absolute; top: 15px; right: 15px; background: #FFF8E1; color: #F57F17; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.pro-card h3 { font-size: 20px; color: var(--dark-navy); font-weight: 700; margin-bottom: 10px; }
.pro-card p { font-size: 14px; color: var(--text-light); margin-bottom: 20px; line-height: 1.5; }

.calc-btn { display: block; text-align: center; background: var(--dark-navy); color: white; padding: 12px 0; border-radius: 6px; font-weight: 600; transition: background 0.3s; }
.calc-btn:hover { background: var(--primary-red); }

/* --- FOOTER (PC: 4 Columns) --- */
/* --- FOOTER DESIGN (4 COLUMNS FIXED) --- */
.main-footer {
    background: #0A192F; /* Dark Navy Background */
    color: #CFD8DC;      /* Light Grey Text */
    padding-top: 60px;
    font-size: 14px;
    margin-top: auto;
}

.footer-grid {
    display: grid;
    /* PC Par 4 Barabar Columns */
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px;
    padding-bottom: 50px;
}

/* Headings Design */
.footer-col h4 {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700; /* Bold Heading */
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-left: 3px solid #C5A059; /* Gold Line */
    padding-left: 10px;
}

/* Links & Text Design (Bold Kiya Hai) */
/* --- FOOTER DESIGN (CORRECTED LAYOUT) --- */
.main-footer {
    background: #0A192F; /* Dark Navy */
    color: #CFD8DC;
    padding-top: 60px;
    font-size: 14px;
    margin-top: auto;
    width: 100%;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    
    /* --- YAHAN CHANGE KARNA HAI --- */
    /* Pehle ye 50px tha, isliye gap zyada tha. */
    /* Ab isko 10px ya 0px kar do taaki gap kam ho jaye. */
    padding-bottom: 10px; 
    
    align-items: start;
}
/* Headings (Bold) */
.footer-col h4 {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700; /* Bold Heading */
    margin-bottom: 20px;
    text-transform: uppercase;
    border-left: 3px solid #C5A059;
    padding-left: 10px;
}

/* Links (Thoda Bold) */
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 12px; }

.footer-col ul li a {
    color: #B0BEC5;
    font-weight: 500; /* Semi-Bold Links */
    font-size: 14px;
    display: block;
    transition: 0.3s;
}

.footer-col ul li a:hover { color: #C5A059; transform: translateX(5px); }

/* Address Text (Thoda Bold) */
.address-text, .contact-text {
    font-size: 13px;
    line-height: 1.6;
    color: #B0BEC5;
    margin-bottom: 15px;
    font-weight: 500; /* Semi-Bold Text */
}

.address-text strong, .contact-text strong { color: white; }

.footer-logo {
    font-weight: 800; /* Extra Bold Logo */
    color: #D32F2F;
}

/* Disclaimer Box */
.disclaimer-box {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 4px;
    font-size: 12px;
    border-left: 3px solid #FF5252;
    color: #cfd8dc;
}

/* --- COPYRIGHT BAR (BRAND COLOR & BOLD TEXT) --- */
.footer-bottom {
    /* 1. Background ko India Post Red kiya */
    background: #c41f1f; /* Khatta Rang */
    
    /* Padding thodi adjust ki */
    padding: 15px 0;
    
    text-align: center;
    
    /* Border hata diya kyunki ab red color khud hi border jaisa hai */
    border-top: none; 
    
    width: 100%;
}

.footer-bottom p {
    /* 2. Text Color ko White kiya */
    color: #faf9a9; 
    
    /* 3. Text ko Bold kiya */
    font-weight: 700; 
    
    font-size: 14px; /* Font thoda sa bada kiya clear dikhne ke liye */
    margin: 0;
}

/* --- MOBILE RESPONSIVE --- */
/* Mobile par wapas stack (ek ke niche ek) ho jayega */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablet: 2 Col */
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr; /* Mobile: 1 Col */
        text-align: center;
        gap: 40px;
    }
    .footer-col h4 {
        border-left: none;
        border-bottom: 2px solid #C5A059;
        display: inline-block;
        padding-left: 0;
        padding-bottom: 5px;
    }
}
.footer-bottom { padding: 20px 0; text-align: center; background: rgba(0,0,0,0.2); }


/* ============================================================
   PART 2: MOBILE STYLES ONLY
   Ye code sirf tab chalega jab screen choti (Mobile) hogi.
   Iske andar jo bhi likhoge wo PC ko kharab nahi karega.
   ============================================================ */

@media (max-width: 768px) {

    /* 1. CONTAINER & ALIGNMENT */
    .container { padding: 0 15px; } /* Side space mobile par kam */
    
    .top-bar-inner { 
        justify-content: center; /* Mobile par Center Align */
        gap: 10px;
    }

    /* 2. HEADER & MENU FIX */
    .nav-menu {
        display: none; /* Hide default menu */
        flex-direction: column;
        gap: 0;
        width: 100%;
        position: absolute; top: 50px; left: 0;
        background: white; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        padding: 10px 0; text-align: center; border-top: 1px solid #eee;
    }
    .nav-menu.active { display: flex; } /* Show when clicked */
    .mobile-toggle { display: flex; flex-direction: column; gap: 5px; cursor: pointer; }
    .mobile-toggle .bar { width: 25px; height: 3px; background: var(--dark-navy); border-radius: 3px; }

    /* 3. FONT SIZES (Override PC Fonts) */
    .hero-content h1 { font-size: 22px !important; margin-bottom: 5px; } /* Forced Small */
    .hero-content p { font-size: 13px !important; padding: 0 10px; }
    
    .section-header h2 { font-size: 20px !important; }
    .section-header p { font-size: 12px !important; }

    /* 4. CARDS LAYOUT (1 Column) */
    .cards-grid { grid-template-columns: 1fr; gap: 20px; } /* Stack cards */
    
    .pro-card { 
        min-height: 200px; /* Height fix hata di mobile ke liye */
        padding: 25px 20px; 
    }
    
    .pro-card h3 { font-size: 18px !important; margin-bottom: 5px; }
    .pro-card p { font-size: 13px !important; line-height: 1.4; margin-bottom: 15px; }
    .calc-btn { padding: 10px 0; font-size: 13px; }

    /* 5. FOOTER STACK */
    .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 30px; }
    .footer-col h4 { border-left: none; border-bottom: 2px solid var(--gold); display: inline-block; padding-left: 0; margin-bottom: 15px; }
}
/* --- Default Styles (Base settings) --- */
.hero-description {
    font-family: 'Manrope', sans-serif;
    color: #4B5563;       /* Professional Grey color */
    text-align: center;   /* Hamesha beech mein rahega */
    line-height: 1.5;     /* Lines ke beech saans lene ki jagah */
    font-weight: 500;
    margin-left: auto;    /* Center karne ke liye */
    margin-right: auto;   /* Center karne ke liye */
}

/* --- PC View (Laptop/Desktop ke liye) --- */
@media screen and (min-width: 769px) {
    .hero-description {
        font-size: 18px;        /* PC par bada text padhne mein acha lagta hai */
        max-width: 750px;       /* Text ko zyada lamba hone se rokega */
        margin-top: 20px;
        margin-bottom: 0px;
    }
}

/* --- INFORMATION SECTION (Shadow Box Design) --- */

.info-section {
    background-color: #F4F7FA; /* Page ka background halka grey */
    padding: 60px 0;
}

/* White Box with Shadow */
.info-box-shadow {
    background: #ffffff; /* Box ka color White */
    padding: 40px;       /* Andar ki spacing */
    border-radius: 12px; /* Kone Gol (Rounded Corners) */
    
    /* ✨ MAGIC SHADOW EFFECT ✨ */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); 
    
    /* Width control */
    max-width: 1000px;
    margin: 0 auto;      /* Center mein laane ke liye */
    border-top: 5px solid #D32F2F; /* Upar ek Red Line design ke liye */
}

/* --- 2. NEW SOFT SHADOW SEPARATOR --- */
hr.shadow-separator {
    border: 0;              /* Purani border hatao */
    height: 1px;            /* Line ki motai ekdum patli */
    
    /* ✨ MAGIC CSS: Solid color ki jagah Gradient ✨ */
    /* Ye beech mein halka neela hoga aur kinaron par gayab ho jayega */
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(33, 150, 243, 0.6), rgba(255, 255, 255, 0));
    
    margin-top: 25px;       /* Upar gap */
    margin-bottom: 35px;    /* Niche gap */
}

/* --- 1. HEADING CLEANUP (Line Removed) --- */
.info-box-shadow h2 {
    color: #0F224A;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    
    /* IMPORTANT: Border aur pseudo-elements hata diye */
    border-bottom: none !important;
    position: static;
}

/* Agar galti se '::after' wala code active hai to usse chupane ke liye */
.info-box-shadow h2::after {
    display: none !important; 
}

/* Paragraphs Design (Alignment) */
.info-box-shadow p {
    font-size: 16px;
    color: #444;
    line-height: 1.8; /* Line ke beech achha gap */
    margin-bottom: 15px;
    
    /* IMP: Ye text ko dono taraf se barabar karega */
    text-align: justify; 
}
/* ============================================================
   FIXED PART (Mobile View & Table Styles)
   Is code ko file ke sabse neeche replace karo
   ============================================================ */

/* --- Mobile View (Phone ke liye - Hero Description) --- */
@media screen and (max-width: 768px) {
    .hero-description {
        font-size: 15px;
        width: 90%;
        margin-top: 12px;
        margin-bottom: 12px;
        padding-left: 10px;
        padding-right: 10px;
    }
} 
/* ^^^ YE BRACKET MISSING THA PEHLE ^^^ */

/* --- Mobile View (Info Box) --- */
@media (max-width: 768px) {
    .info-box-shadow {
        padding: 25px;
    }
    .info-box-shadow h2 { font-size: 22px; }
    .info-box-shadow h3 { font-size: 18px; }
    .info-box-shadow p { 
        font-size: 14px; 
        text-align: left; 
    }
}

/* ============================================================
   TABLE CSS (Ye ab sabse bahar hai, isliye PC par bhi chalega)
   ============================================================ */

/* Table Container - Mobile Scroll ke liye */
.table-container {
    width: 100%;
    overflow-x: auto;
    margin: 20px 0;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Main Table */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Manrope', sans-serif;
    background-color: #fff;
    min-width: 600px;
}

/* Header Design */
.comparison-table thead tr {
    background-color: #1e3a8a;
    color: #ffffff;
    text-align: center !important; /* Force Center Header */
}

/* Cells (Khaney) Design */
.comparison-table th, .comparison-table td {
    border: 1px solid #94a3b8; /* Dark Grey Border */
    
    /* JABARDASTI CENTER KARNE WALA CODE */
    text-align: center !important;    
    vertical-align: middle !important;
    
    padding: 14px 16px;
    font-size: 16px;
    line-height: 1.5;
}

/* Agar pehla column (Criteria) bhi center chahiye */
.comparison-table td:first-child {
    background-color: #f8fafc;
    font-weight: 600;
    width: 25%;
    text-align: center !important; 
}

/* Mobile Adjustments for Table */
@media screen and (max-width: 768px) {
    .comparison-table th, .comparison-table td {
        padding: 10px;
        font-size: 14px;
        text-align: center !important;
    }
}
/* --- SCHEME LIST DESIGN --- */

/* Sub-headings (A. PLI Schemes...) */
.scheme-heading {
    color: #1e3a8a;       /* Dark Blue */
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    margin-top: 10px;
}

/* List Style (Points) */
.scheme-list {
    list-style: none;     /* Default dot hataya */
    padding: 0;
}

.scheme-list li {
    position: relative;
    padding-left: 25px;   /* Text ko thoda aage khiskaya */
    margin-bottom: 12px;  /* Har point ke beech gap */
    font-size: 16px;
    color: #444;
    line-height: 1.6;
}

/* Custom Bullet Point (Blue Dot or Arrow) */
.scheme-list li::before {
    content: "➤";         /* Arrow Icon */
    position: absolute;
    left: 0;
    color: #D32F2F;       /* Red Color ka arrow */
    font-size: 14px;
    top: 3px;
}

/* Pro Tip Box Design */
.pro-tip-box {
    background-color: #fffbeb; /* Light Yellow Background */
    border-left: 4px solid #f59e0b; /* Orange Border */
    padding: 15px;
    margin-top: 25px;
    border-radius: 4px;
    font-size: 15px;
    color: #92400e;
}
/* --- SMART TABLE (PC View - Normal Table) --- */
.table-container-smart {
    width: 100%;
    margin: 20px 0;
}

.smart-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Manrope', sans-serif;
}

.smart-table thead tr {
    background-color: #1e3a8a; /* Dark Blue Header */
    color: #ffffff;
    text-align: left;
}

.smart-table th, .smart-table td {
    padding: 15px;
    border: 1px solid #e2e8f0;
    font-size: 16px;
}

/* Rate Text ko thoda Green aur Bold dikhane ke liye */
.rate-text {
    color: #166534; /* Dark Green (Paisa color) */
    font-weight: 800;
}

/* --- MOBILE VIEW MAGIC (Cards Banayega) --- */
@media screen and (max-width: 768px) {
    
    /* Table ke Headers chupao */
    .smart-table thead {
        display: none;
    }

    /* Table Row ko "Card" banao */
    .smart-table tr {
        display: block;
        margin-bottom: 10px; /* Do cards ke beech gap */
        border: 1px solid #e2e8f0;
        border-radius: 8px; /* Gol Kinare */
        box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Halka Shadow */
        background-color: #fff;
        
        /* Left side mein Red Line (Styling ke liye) */
        border-left: 6px solid #D32F2F; 
    }

    /* Cells ko Block banao taaki wo ek ke niche ek aayein */
    .smart-table td {
        display: block;
        text-align: left;
        border: none; /* Andar ki lines hatao */
        border-bottom: 1px solid #f1f5f9;
        position: relative;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    /* Last line ka border hatao */
    .smart-table td:last-child {
        border-bottom: none;
        background-color: #fcfcfc; /* Rate wale part ka background halka grey */
        color: #D32F2F; /* Rate Red color mein dikhega mobile par */
    }

    /* Plan Name thoda bada dikhe */
    .smart-table td:first-child {
        font-size: 10px;
        color: #1e3a8a;
        padding-top: 10px;
    }
}
/* ============================================================
   NEW CALCULATOR PAGE STYLES (PC & MOBILE HYBRID)
   (Paste this at the very END of pli22.css)
   ============================================================ */

/* --- General Layout --- */
.calculator-page-container {
    padding: 50px 0;
    background-color: #F4F7FA; /* Light grey background */
}

/* PC Grid Layout (Default) */
.calculator-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* PC: Side by Side */
    gap: 40px;
    align-items: start;
    margin-bottom: 40px;
}

/* --- Card General Styles --- */
.calc-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    border: 1px solid #eee;
}

.card-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--dark-navy);
    margin-bottom: 25px;
}

/* --- Input Form Styles --- */
.input-card-style { border-top: 4px solid var(--gold); /* Gold Top */ }

.form-group { margin-bottom: 20px; }
.form-group label {
    display: block; font-weight: 600; margin-bottom: 8px; color: #333;
}
.form-group input, .form-group select {
    width: 100%; padding: 12px 15px;
    border: 1px solid #ccc; border-radius: 6px;
    font-size: 16px; font-family: 'Manrope', sans-serif;
    background: #fff;
}
.form-group input:disabled { cursor: not-allowed; }

.calc-submit-btn {
    width: 100%; background: #D32F2F; color: white;
    padding: 15px; border: none; border-radius: 6px;
    font-size: 18px; font-weight: 700; cursor: pointer;
    transition: 0.3s;
}
.calc-submit-btn:hover { background: #b71c1c; }

/* --- Result Card Styles (New Layout) --- */
.result-card-style { 
    padding: 0; /* Banner full width chahiye */
    overflow: hidden;
    border-top: none; /* Red banner khud top border ban jayega */
    animation: fadeIn 0.5s ease-in;
}

/* Blue Banner */
.maturity-banner {
    background: #1976D2; /* Strong Blue */
    color: white;
    text-align: center;
    padding: 25px;
}
.maturity-banner small { display: block; font-size: 16px; opacity: 0.9; margin-bottom: 5px; }
.maturity-banner strong { display: block; font-size: 32px; }

/* Summary Flex (SA & Bonus) */
.result-summary-flex {
    display: flex;
    justify-content: space-around;
    padding: 25px;
    border-bottom: 1px solid #eee;
}
.summary-item { text-align: center; }
.summary-item small { display: block; color: #666; font-size: 14px; }
.summary-item strong { display: block; font-size: 22px; color: var(--dark-navy); margin-top: 5px; }
.summary-divider { width: 1px; background: #eee; height: 50px; }

/* Bottom Section (Chart & Premium) */
.result-bottom-flex {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
}

.chart-container-small {
    width: 120px; height: 120px;
    flex-shrink: 0;
}

/* Blue Premium Alert Box */
.premium-alert-box-blue {
    background: #E3F2FD;
    border-left: 4px solid #1976D2;
    padding: 15px;
    border-radius: 6px;
    display: flex;
    gap: 15px;
    align-items: center;
    flex-grow: 1;
}
.alert-icon { font-size: 24px; }
.alert-text { font-size: 14px; color: #0D47A1; line-height: 1.5; }
.alert-text strong { display: block; margin-bottom: 3px; }


/* --- SEO Accordion Styles --- */
.seo-accordion-container { margin-top: 0; }
.seo-details-box {
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    overflow: hidden;
}
.seo-summary-head {
    padding: 20px;
    font-size: 18px;
    font-weight: 700;
    color: var(--dark-navy);
    cursor: pointer;
    list-style: none; /* Hide default arrow */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9f9f9;
}
/* Custom Arrow */
.dropdown-arrow { transition: transform 0.3s; font-size: 14px; color: #666; }
details[open] .dropdown-arrow { transform: rotate(180deg); }

.seo-content-body {
    padding: 25px;
    border-top: 1px solid #eee;
    font-size: 15px; color: #555; line-height: 1.7;
}

/* --- New Mobile Footer Styles --- */
.footer-bottom-red {
    background: #D32F2F; /* Red background */
    color: white;
    text-align: center;
    padding: 15px 0;
    font-weight: 600;
}
.footer-links-stack {
    display: none; /* PC par chupao */
}


/* ================= MOBILE MEDIA QUERIES (Max 768px) ================= */
@media (max-width: 768px) {
    
    /* 1. STACK LAYOUT */
    .calculator-grid-layout {
        grid-template-columns: 1fr; /* Stack one below another */
        gap: 25px;
        margin-bottom: 25px;
    }

    /* 2. CARD ADJUSTMENTS */
    .calc-card { padding: 20px; }
    .maturity-banner strong { font-size: 28px; }
    .summary-item strong { font-size: 20px; }

    /* 3. MOBILE FOOTER STACK */
    .main-footer .footer-grid { display: none; /* Hide PC Footer Grid */ }
    
    .footer-links-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding: 30px 0;
        background: var(--dark-navy); /* Navy BG for links */
    }
    .footer-links-stack a {
        color: #B0BEC5; font-weight: 500; font-size: 16px;
    }
    
    /* Hide original footer bottom, show new red one */
    .main-footer .footer-bottom { display: none; } 
    .footer-bottom-red { display: block; }
}

/* Animation */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- CALCULATOR SPECIFIC CSS (Add to pli22.css) --- */

.calculator-card {
    background: white;
    width: 100%;
    max-width: 600px; /* Thoda bada kiya taki mobile me acha dikhe */
    margin: 30px auto; /* Center me lane ke liye */
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-top: 5px solid #d32f2f;
}

.calculator-card h2 {
    text-align: center;
    color: #d32f2f;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.form-group input, 
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
}

.age-display {
    background-color: #e3f2fd;
    color: #0d47a1;
    padding: 10px;
    border-radius: 6px;
    font-size: 0.95rem;
    margin-top: 8px;
    font-weight: bold;
    display: none;
}

.helper-text {
    font-size: 0.85rem;
    color: #666;
    margin-top: 5px;
}

.btn-calculate {
    width: 100%;
    background-color: #d32f2f;
    color: white;
    padding: 14px;
    border: none;
    border-radius: 6px;
    font-size: 1.1rem;
    cursor: pointer;
    font-weight: bold;
    margin-top: 15px;
    transition: background 0.3s;
}

.btn-calculate:hover {
    background-color: #b71c1c;
}

.result-section {
    margin-top: 30px;
    display: none;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.result-section table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.result-section th, 
.result-section td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

.result-section th {
    background-color: #f8f9fa;
    color: #333;
}

.price-col {
    text-align: right !important;
    color: #d32f2f;
    font-weight: bold;
    font-size: 1.1rem;
}

/* --- NEW RESULT SECTION STYLES --- */

/* Result Container */
.result-container-styled {
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    animation: fadeIn 0.5s ease;
}

/* Section Headings */
.result-heading {
    color: #0F224A;
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 25px;
    margin-bottom: 15px;
    border-left: 5px solid #D32F2F;
    padding-left: 10px;
}

/* Professional Tables */
.pli-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    font-size: 15px;
    border: 1px solid #e0e0e0;
}

.pli-table th, .pli-table td {
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    text-align: left;
}

/* Header Style (Grey as per image) */
.pli-table th {
    background-color: #f8f9fa;
    color: #444;
    font-weight: 600;
    width: 50%; /* Equal split for 2-col tables */
}

.pli-table td {
    color: #333;
    font-weight: 500;
}

/* Highlighted Rows/Cells */
.text-green { color: #2e7d32; font-weight: bold; }
.text-red { color: #d32f2f; font-weight: bold; }
.bg-highlight { background-color: #fffde7; }

/* 4-Column Table Adjustment */
.table-4-col th { width: 25%; }

/* --- PIE CHART (CSS ONLY) --- */
.chart-card {
    background: #f9fbfd;
    border: 1px solid #e3e6f0;
    border-radius: 10px;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 30px;
}

.chart-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: conic-gradient(
        #D32F2F 0% 30%,  /* Investment Color */
        #388E3C 30% 100% /* Profit Color */
    );
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Center White Hole for Donut Chart */
.chart-circle::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    background: white;
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

.chart-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.legend-item { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot-invest { background-color: #D32F2F; }
.dot-profit { background-color: #388E3C; }

/* Mobile Responsive */
@media (max-width: 768px) {
    .pli-table, .pli-table thead, .pli-table tbody, .pli-table th, .pli-table td, .pli-table tr { 
        display: block; 
    }
    .pli-table thead tr { position: absolute; top: -9999px; left: -9999px; }
    .pli-table tr { margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px; overflow: hidden; }
    .pli-table td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; text-align: right; }
    .pli-table td:before { position: absolute; top: 12px; left: 10px; width: 45%; padding-right: 10px; white-space: nowrap; text-align: left; font-weight: bold; content: attr(data-label); color: #666; }
    
    /* Keep 4-col table scrollable instead of stacked for better readability */
    .table-responsive { overflow-x: auto; display: block; }
    .table-4-col { min-width: 600px; display: table; }
    .table-4-col th, .table-4-col td { display: table-cell; text-align: center; }
}