/* =====================================
MFNXT LEARN HUB learn.css
===================================== */
:root{
    --learn-bg:#F8FBFF;
    --learn-card:#FFFFFF;
    --learn-border:#E9EEF5;
    --learn-heading:#0B1F52;
    --learn-text:#5B6475;
    --learn-blue-light:#EDF5FF;
    --learn-hover:
    0 20px 50px rgba(0,0,0,.08);
    }
    /* =====================================
    GLOBAL
    ===================================== */
    /* ====================================
    BREADCRUMB
    ==================================== */
    .hero-breadcrumb{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:35px;
    font-size:14px;
    flex-wrap:wrap;
    }
    .hero-breadcrumb a{
    color:#667085;
    text-decoration:none;
    font-weight:500;
    transition:.3s;
    font-size:14px;
    }
    .hero-breadcrumb a:hover{
    color:#0066CC;
    }
    .hero-breadcrumb span{
    color:#0B1F52;
    font-weight:600;
    }
    .hero-breadcrumb i{
    color:#98A2B3;
    font-size:10px;
    }
    .width-container{
    width:100%;
    max-width:1140px;
    margin:0 auto;
    padding:0 12px;
    }
    .badge{
    display:inline-block;
    padding:10px 18px;
    background:#EAF3FF;
    color:#0066CC;
    border-radius:30px;
    font-size:12px;
    font-weight:600;
    margin-bottom:10px;
    letter-spacing: 0.10rem;
    }
    h1{
    font-size:clamp(2.3rem,5vw,2.8rem);
    font-weight:700;
    color:#0B1F52;
    line-height:1.5;
    margin-bottom:25px;
    }
    h2{
    font-size:clamp(2rem,5vw,2.3rem);
    font-weight:700;
    color:#0B1F52;
    line-height:1.3;
    margin-bottom: 20px;
    }
    p{
    font-size:clamp(1rem,5vw,1.1rem);
    line-height:1.9;
    color:#667085;
    }
    .hero-image{
    max-width:700px;
    width:110%;
    height: 130%;
    }
    @media(max-width:991px){
    .hero-image{
    width:100%;
    margin:auto;
    }
    }
    .investor-disclaimer{
    padding:0 0 40px;
    }
    .disclaimer-box{
    background:#FFF8E8;
    border:1px solid #FFE2A8;
    border-left:5px solid #F59E0B;
    border-radius:18px;
    padding:22px 25px;
    display:flex;
    align-items:flex-start;
    gap:15px;
    }
    .disclaimer-box i{
    color:#F59E0B;
    font-size:24px;
    flex-shrink:0;
    margin-top:2px;
    }
    .disclaimer-box p{
    margin:0;
    color:#7A5B00;
    font-size:14px;
    line-height:1.8;
    font-weight:500;
    }
    .disclaimer-box h5{
    color:#7A5B00;
    font-size:16px;
    font-weight:700;
    margin-bottom:8px;
    }
    /* Mobile */
    @media(max-width:768px){
    .disclaimer-box{
    padding:18px;
    gap:12px;
    }
    .disclaimer-box i{
    font-size:20px;
    }
    .disclaimer-box p{
    font-size:13px;
    line-height:1.7;
    }
    }
    /* ====================================
    INDEX FUND HERO
    ==================================== */
    .index-hero{
    padding:40px 0px;
    background:
    linear-gradient(
    180deg,
    #F8FBFF 0%,
    #EEF6FF 100%
    );
    }
    .index-hero .hero-buttons{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    }
    .index-hero .hero-buttons .btn{
    font-size:clamp(0.90rem,5vw,0.90rem);
    padding:8px 18px;
    border-radius:8px;
    font-weight:500;
    letter-spacing: 0.06rem;
    margin-top: 30px;
    }
    .index-hero .hero-stats{
    display:flex;
    gap:40px;
    margin-top:40px;
    }
    .index-hero .hero-stats strong{
    font-size:clamp(1.1rem,5vw,1.5rem);
    display:block;
    color:#0066CC;
    font-weight:700;
    }
    .index-hero .hero-stats div{
    color:#667085;
    font-size:clamp(1rem,5vw,1rem);
    }
    /* ====================================
    WHAT YOU'LL LEARN
    ==================================== */
    .what-learn-section{
    padding:80px 0;
    }
    .what-learn-section .section-heading{
    text-align:center;
    }
    .what-learn-section .learn-card{
    background:#fff;
    border:1px solid #E9EEF5;
    border-radius:10px;
    padding:25px;
    height:100%;
    text-align:center;
    transition:.3s;
    }
    .what-learn-section .learn-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 60px rgba(0,0,0,.08);
    border-color:#0066CC;
    }
    .what-learn-section .learn-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:#0066CC;
    opacity:0;
    transition:.3s;
    }
    .what-learn-section .learn-card:hover::before{
    opacity:1;
    }
    .what-learn-section .learn-icon{
    width:70px;
    height:70px;
    margin:0 auto 25px;
    border-radius:50%;
    background:#EAF3FF;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#0066CC;
    }
    .what-learn-section .learn-icon i{
    font-size:25px;
    color:#0066CC;
    }
    .what-learn-section .learn-card h3{
    font-size:clamp(1.1rem,5vw,1.1rem);
    color:#0B1F52;
    margin-bottom:15px;
    font-weight:600;
    }
    .what-learn-section .learn-card p{
    font-size:clamp(1rem,5vw,1rem);
    color:#667085;
    line-height:1.5;
    margin:0;
    }
    .what-learn-section .learn-card a{
    text-decoration: none;
    }
    /* ====================================
    WHAT IS INDEX FUND
    ==================================== */
    .index-fund-intro{
    padding:80px 0;
    }
    .index-fund-intro .intro-image{
    max-width:700px;
    width:100%;
    }
    .index-fund-intro .intro-highlight{
    font-size:clamp(1rem,5vw,1rem);
    margin-top:30px;
    padding:20px;
    background:#F8FBFF;
    border-left:5px solid #0066CC;
    border-radius:6px;
    display:flex;
    gap:15px;
    }
    .index-fund-intro .intro-highlight i{
    color:#0066CC;
    font-size:24px;
    }
    .index-fund-intro .intro-highlight span{
    color:#0B1F52;
    font-weight:400;
    }
    /* ====================================
    WHY INVESTORS CHOOSE INDEX FUNDS
    ==================================== */
    .why-index-funds{
    padding:80px 0;
    background:#F8FBFF;
    }
    .why-index-funds .benefit-card{
    background:#fff;
    border:1px solid #E9EEF5;
    border-radius:10px;
    padding:35px;
    height:100%;
    text-align:center;
    transition:.3s;
    }
    .why-index-funds .benefit-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 60px rgba(0,0,0,.08);
    border-color:#0066CC;
    }
    .why-index-funds .benefit-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:#0066CC;
    opacity:0;
    transition:.3s;
    }
    .why-index-funds .benefit-card:hover::before{
    opacity:1;
    border-radius:24px;
    }
    .why-index-funds .benefit-icon{
    width:70px;
    height:70px;
    margin:0 auto 25px;
    border-radius:50%;
    background:#EAF3FF;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#0066CC;
    }
    .why-index-funds .benefit-icon i{
    font-size:25px;
    color:#0066CC;
    }
    .why-index-funds .benefit-card h3{
    font-size:clamp(1.1rem,5vw,1.1rem);
    color:#0B1F52;
    margin-bottom:15px;
    font-weight:600;
    }
    .why-index-funds .benefit-card p{
    font-size:clamp(1rem,5vw,1rem);
    color:#667085;
    line-height:1.5;
    margin:0;
    }
    /* ====================================
    FEATURED LEARNING ARTICLES
    ==================================== */
    .featured-learning-section{
    padding:80px 0;
    }
    .featured-learning-section .learning-article-card{
    background:#fff;
    border:1px solid #E9EEF5;
    border-radius:24px;
    overflow:hidden;
    height:100%;
    transition:.3s;
    display:flex;
    flex-direction:column;
    }
    .featured-learning-section .learning-article-card:hover{
    transform:translateY(-8px);
    box-shadow:
    0 20px 50px rgba(0,0,0,.08);
    }
    .featured-learning-section .learning-image{
    display:block;
    height:auto;
    overflow:hidden;
    }
    .featured-learning-section .learning-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    }
    .featured-learning-section .learning-content{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:25px;
    }
    .featured-learning-section .learning-tag{
    display:inline-block;
    width:fit-content;
    background:#EDF5FF;
    color:#0066CC;
    padding:6px 12px;
    border-radius:30px;
    font-size:12px;
    font-weight:600;
    margin-bottom:15px;
    }
    .featured-learning-section .learning-content h3{
    font-size:clamp(1.2rem,5vw,1.2rem);
    line-height:1.4;
    margin-bottom:15px;
    }
    .featured-learning-section .learning-content h3 a{
    text-decoration:none;
    color:#0B1F52;
    }
    .featured-learning-section .learning-content p{
    font-size:clamp(1rem,5vw,1rem);
    color:#667085;
    line-height:1.8;
    }
    .featured-learning-section .learning-meta{
    margin-top:auto;
    padding-top:20px;
    color:#667085;
    font-size:14px;
    }
    .featured-learning-section .btn-view-all{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 22px;
    background:#0066CC;
    color:#fff;
    text-decoration:none;
    border-radius:12px;
    font-weight:400;
    transition:.3s;
    letter-spacing: 0.06rem;
    }
    .featured-learning-section .btn-view-all:hover{
    background:#0055AA;
    color:#fff;
    }
    /* ====================================
    INDEX FUND VS ACTIVE FUND
    ==================================== */
    .comparison-section{
    padding:40px 0;
    background:#F8FBFF;
    }
    .comparison-section .comparison-table{
    background:#fff;
    border-radius:4px;
    overflow:hidden;
    border:1px solid #E9EEF5;
    box-shadow:
    0 10px 30px rgba(0,0,0,.05);
    }
    .comparison-section .comparison-table table{
    margin:0;
    }
    .comparison-section .comparison-table thead{
    background:
    linear-gradient(
    135deg,
    #0066CC,
    #0055AA
    );
    color:#fff;
    }
    .comparison-section .comparison-table th{
    padding:22px;
    font-size:16px;
    font-weight:500;
    border:none;
    text-align:center;
    }
    .comparison-section .comparison-table th:first-child{
    text-align:left;
    }
    .comparison-section .comparison-table td{
    padding:15px;
    border-color:#e6ebf2;
    vertical-align:middle;
    text-align:center;
    font-weight:400;
    }
    .comparison-section .comparison-table td:first-child{
    text-align:left;
    font-weight:400;
    color:#0B1F52;
    }
    .comparison-section .comparison-table tbody tr{
    transition:.3s;
    }
    .comparison-section .comparison-table tbody tr:hover{
    background:#F8FBFF;
    }
    .comparison-section .comparison-table tbody tr:nth-child(even){
    background:#FCFDFF;
    }
    /* Index Fund Column */
    .comparison-section .comparison-table td:nth-child(2){
    color:#16A34A;
    font-weight:400;
    }
    /* Active Fund Column */
    .comparison-section .comparison-table td:nth-child(3){
    color:#DC2626;
    font-weight:400;
    }
    .comparison-section .comparison-box{
    background:#fff;
    border:1px solid #E9EEF5;
    border-radius:24px;
    padding:40px;
    box-shadow:
    0 10px 30px rgba(0,0,0,.05);
    }
    .comparison-section .comparison-box h3{
    color:#0B1F52;
    font-size:30px;
    font-weight:600;
    margin-bottom:20px;
    line-height: 1.3;
    }
    .comparison-section .comparison-box p{
    color:#667085;
    line-height:1.9;
    }
    .comparison-section .comparison-note{
    margin-top:25px;
    padding:18px;
    background:#EDF5FF;
    border-radius:12px;
    display:flex;
    gap:12px;
    align-items:flex-start;
    }
    .comparison-section .comparison-note i{
    color:#0066CC;
    font-size:20px;
    }
    .comparison-section .comparison-note span{
    color:#0B1F52;
    font-weight:500;
    }
    /* ====================================
    CALCULATOR SECTION
    ==================================== */
    .calculator-section{
    padding:80px 0;
    background:#ffffff;
    }
    .calculator-section .calculator-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    }
    .calculator-section .mini-calculator-card{
    background:#fff;
    border:1px solid #E9EEF5;
    border-radius:20px;
    padding:20px;
    display:flex;
    gap:15px;
    text-decoration:none;
    position:relative;
    transition:.3s;
    }
    .calculator-section .mini-calculator-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    }
    .calculator-section .mini-calculator-card h4{
    font-size:clamp(1.2rem,5vw,1.2rem);
    font-weight:600;
    color:#0B1F52;
    line-height:1.3;
    }
    .calculator-section .mini-calculator-card p{
    font-size:clamp(1rem,5vw,1rem);
    font-weight:400;
    line-height:1.3;
    }
    .calculator-section .mini-icon{
    width:55px;
    height:55px;
    min-width:55px;
    border-radius:14px;
    background:#EDF5FF;
    display:flex;
    align-items:center;
    justify-content:center;
    }
    .calculator-section .mini-icon i{
    color:#0066CC;
    font-size:20px;
    }
    .calculator-section .coming-soon{
    position:absolute;
    top:15px;
    right:15px;
    background:#EEF2FF;
    color:#6366F1;
    padding:4px 10px;
    border-radius:20px;
    font-size:11px;
    font-weight:600;
    }
    @media(max-width:767px){
    .calculator-section .calculator-grid{
    grid-template-columns:1fr;
    }
    }
    /* ====================================
    ROADMAP SECTION
    ==================================== */
    .roadmap-section{
    padding:80px 0;
    background:#F8FBFF;
    }
    .roadmap-section  .roadmap-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
    }
    .roadmap-section  .roadmap-card{
    background:#fff;
    border:1px solid #E9EEF5;
    border-radius:10px;
    padding:25px;
    text-align:center;
    transition:.3s;
    }
    .roadmap-section  .roadmap-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 60px rgba(0,0,0,.08);
    border-color:#0066CC;
    }
    .roadmap-section  .roadmap-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:#0066CC;
    opacity:0;
    transition:.3s;
    }
    .roadmap-section  .roadmap-card:hover::before{
    opacity:1;
    border-radius:24px;
    }
    .roadmap-section  .roadmap-icon{
    width:70px;
    height:70px;
    border-radius:50%;
    background:#EDF5FF;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 15px;
    }
    .roadmap-section  .roadmap-icon i{
    color:#0066CC;
    font-size:25px;
    }
    .roadmap-section .roadmap-step{
    width:30px;
    height:30px;
    border-radius:50%;
    background:#0066CC;
    color:#fff;
    display:none;
    align-items:center;
    justify-content:center;
    margin:0 auto 15px;
    font-size:10px;
    font-weight:700;
    }
    .roadmap-section  .roadmap-card h4{
    color:#0B1F52;
    font-size:16px;
    line-height:1.5;
    margin:0;
    }
    @media(max-width:991px){
    .roadmap-section  .roadmap-grid{
    grid-template-columns:repeat(2,1fr);
    }
    }
    @media(max-width:575px){
    .roadmap-section  .roadmap-grid{
    grid-template-columns:1fr;
    }
    }
    /* =====================================
    FAQ SECTION
    ===================================== */
    .faq-section{
    padding:80px 0;
    }
    /* Accordion */
    .faq-section .faq-accordion .accordion-item{
    border:none;
    margin-bottom:25px;
    border-radius:16px !important;
    overflow:hidden;
    background:#F8FBFF;
    box-shadow:none;;
    }
    .faq-section .faq-accordion .accordion-button{
    background:#F8FBFF;
    color:#0B1F52;
    font-size:16px;
    font-weight:600;
    padding:22px 25px;
    box-shadow:none;
    }
    .faq-section .faq-accordion .accordion-button:not(.collapsed){
    background:#EDF5FF;
    color:#0066CC;
    }
    .faq-section .faq-accordion .accordion-button:focus{
    box-shadow:none;
    }
    .faq-section .faq-accordion .accordion-body{
    padding:0 25px 25px;
    color:#667085;
    line-height:1.8;
    background:#F8FBFF;
    font-size:clamp(1rem,5vw,1rem);
    }
    /* Plus / Minus */
    .faq-section .faq-accordion .accordion-button::after{
    transform:scale(.9);
    }
    /* Mobile */
    @media(max-width:991px){
    .faq-section .faq-section h2{
    font-size:32px;
    }
    }
    /* ====================================
    FINAL CTA SECTION
    ==================================== */
    .newsletter-cta{
    padding:40px 0;
    }
    .newsletter-cta .newsletter-box{
    background:
    linear-gradient(
    135deg,
    #F8FBFF,
    #EAF3FF
    );
    border:1px solid #DCEBFF;
    border-radius:32px;
    padding:60px;
    }
    .newsletter-cta .newsletter-badge{
    display:inline-block;
    padding:10px 18px;
    background:#fff;
    color:#0066CC;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
    margin-bottom:20px;
    }
    .newsletter-cta .newsletter-box h2{
    color:#0B1F52;
    font-size:42px;
    font-weight:800;
    margin-bottom:20px;
    }
    .newsletter-cta .newsletter-box p{
    color:#667085;
    font-size:16px;
    line-height:1.8;
    margin:0;
    }
    .newsletter-cta .cta-buttons{
    display:flex;
    flex-direction:column;
    gap:10px;
    }
    .newsletter-cta .cta-buttons .btn{
    font-size:clamp(0.90rem,5vw,0.90rem);
    border-radius:8px;
    padding:8px 18px;
    font-weight:500;
    letter-spacing: 0.06rem;
    }
    /* ====================================
    NIFTY HERO
    ==================================== */
    .nifty-hero{
    padding:40px 0px;
    background:
    linear-gradient(
    180deg,
    #F8FBFF 0%,
    #EEF6FF 100%
    );
    }
    .nifty-hero .hero-buttons{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    }
    .nifty-hero .hero-buttons .btn{
    font-size:clamp(0.90rem,5vw,0.90rem);
    padding:8px 18px;
    border-radius:8px;
    font-weight:500;
    letter-spacing: 0.06rem;
    }
    /* ====================================
    WHAT YOU'LL LEARN
    ==================================== */
    .learn-topics-section{
    padding:80px 0;
    }
    .learn-topics-section .topic-card{
    background:#fff;
    border:1px solid #E9EEF5;
    border-radius:10px;
    padding:25px;
    height:100%;
    text-align:center;
    transition:.3s;
    }
    .learn-topics-section .topic-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 60px rgba(0,0,0,.08);
    border-color:#0066CC;
    }
    .learn-topics-section .topic-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:#0066CC;
    opacity:0;
    transition:.3s;
    }
    .learn-topics-section .topic-card:hover::before{
    opacity:1;
    }
    .learn-topics-section .topic-card i{
    width:70px;
    height:70px;
    margin:0 auto 25px;
    border-radius:50%;
    background:#EAF3FF;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;
    color:#0066CC;
    }
    .learn-topics-section .topic-card h4{
    font-size:clamp(1.1rem,5vw,1.1rem);
    color:#0B1F52;
    margin-bottom:15px;
    font-weight:600;
    }
    .learn-topics-section .topic-card p{
    font-size:clamp(1rem,5vw,1rem);
    line-height: 1.5;
    }
    .learn-topics-section .topic-card a{
    text-decoration: none;
    }
    /* ====================================
    WHAT IS A MARKET INDEX
    ==================================== */
    .index-intro-section{
    padding:40px 0;
    }
    .index-intro-section .intro-image{
    max-width:520px;
    }
    /* ====================================
    IMPORTANCE OF INDICES
    ==================================== */
    .importance-section{
    padding:80px 0;
    background:#F8FBFF;
    }
    .importance-section .importance-card{
    background:#fff;
    border:1px solid #E9EEF5;
    border-radius:10px;
    padding:25px;
    text-align:center;
    height:100%;
    transition:.3s;
    }
    .importance-section .importance-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 60px rgba(0,0,0,.08);
    border-color:#0066CC;
    }
    .importance-section .importance-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:#0066CC;
    opacity:0;
    transition:.3s;
    }
    .importance-section .importance-card:hover::before{
    opacity:1;
    }
    .importance-section .importance-card i{
    width:70px;
    height:70px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    margin-bottom:20px;
    background:#EDF5FF;
    color:#0066CC;
    font-size:25px;
    }
    .importance-section .importance-card h4{
    font-size:clamp(1.1rem,5vw,1.1rem);
    color:#0B1F52;
    font-weight:700;
    margin-bottom:12px;
    }
    .importance-section .importance-card p{
    font-size:clamp(1rem,5vw,1rem);
    line-height:1.5;
    color:#667085;
    margin-bottom:35px;
    }
    /* ====================================
    NIFTY 50
    ==================================== */
    .nifty50-section{
    padding:40px 0;
    }
    .nifty50-section .fact-box{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-top:30px;
    }
    .nifty50-section .fact-box div{
    background:#EDF5FF;
    padding:16px;
    border-radius:14px;
    color:#0B1F52;
    }
    /* ====================================
    NIFTY NEXT 50
    ==================================== */
    .next50-section{
    padding:80px 0;
    background:#F8FBFF;
    }
    .next50-section .fact-box{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-top:30px;
    }
    .next50-section .fact-box div{
    background:#EDF5FF;
    padding:16px;
    border-radius:14px;
    color:#0B1F52;
    }
    /* ====================================
    SENSEX
    ==================================== */
    .sensex-section{
    padding:80px 0;
    }
    .sensex-section .fact-box{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-top:30px;
    }
    .sensex-section .fact-box div{
    background:#EDF5FF;
    padding:16px;
    border-radius:14px;
    color:#0B1F52;
    }
    /* ====================================
    NIFTY VS SENSEX
    ==================================== */
    .comparison-section{
    padding:80px 0;
    background:#F8FBFF;
    }
    .comparison-section .comparison-wrapper{
    max-width:1000px;
    margin:auto;
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    border:1px solid #E9EEF5;
    box-shadow:0 15px 40px rgba(0,0,0,.05);
    }
    .comparison-section .comparison-header{
    display:grid;
    grid-template-columns:1fr 120px 1fr;
    background:#0066CC;
    color:#fff;
    font-weight:700;
    text-align:center;
    }
    .comparison-section .comparison-header div{
    padding:15px;
    font-size:clamp(1.2rem,5vw,1.2rem);
    }
    .comparison-section .comparison-row{
    display:grid;
    grid-template-columns:1fr 120px 1fr;
    border-bottom:1px solid #EDF2F7;
    }
    .comparison-section .comparison-row:last-child{
    border:none;
    }
    .comparison-section .feature{
    padding:22px;
    font-weight:600;
    color:#0B1F52;
    background:#FAFBFC;
    }
    .comparison-section .value{
    padding:12px;
    text-align:center;
    color:#667085;
    font-weight:500;
    }
    .comparison-section .center{
    background:#004CB3;
    }
    .comparison-section .comparison-row:hover{
    background:#F8FBFF;
    }
    .index-match-section{
    padding:80px 0;
    }
    .investor-paths{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    }
    .path-card{
    background:#fff;
    border:1px solid #E6EDF7;
    border-radius:20px;
    padding:30px;
    height:100%;
    }
    .path-card h4{
    font-size:22px;
    font-weight:700;
    color:#0B1F52;
    margin-bottom:12px;
    }
    .path-card p{
    color:#667085;
    line-height:1.7;
    margin-bottom:20px;
    }
    .path-card span{
    display:inline-block;
    padding:8px 16px;
    border-radius:50px;
    background:#EDF5FF;
    color:#0066CC;
    font-weight:600;
    font-size:14px;
    }
    @media(max-width:991px){
    .investor-paths{
    grid-template-columns:1fr 1fr;
    }
    }
    @media(max-width:576px){
    .investor-paths{
    grid-template-columns:1fr;
    }
    }
    /* ====================================
    INDEX CREATION TIMELINE
    ==================================== */
    .index-creation-section{
    padding:80px 0;
    }
    .index-creation-section .process-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin-top:50px;
    }
    .index-creation-section .process-card{
    background:#fff;
    padding:25px;
    border-radius:20px;
    border:1px solid #E7EDF5;
    position:relative;
    transition:.3s;
    }
    .index-creation-section .process-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 30px rgba(0,0,0,.08);
    }
    .index-creation-section .process-card span{
    display:inline-flex;
    width:40px;
    height:40px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#0066CC;
    color:#fff;
    font-weight:500;
    margin-bottom:10px;
    }
    .index-creation-section .process-card h4{
    font-size:clamp(1rem,5vw,1rem);
    font-weight:700;
    color:#0B1F52;
    margin-bottom:10px;
    }
    .index-creation-section .process-card p{
    font-size:clamp(1rem,5vw,1rem);
    line-height: 1.4;
    margin:0;
    color:#667085;
    }
    @media(max-width:991px){
    .index-creation-section .process-grid{
    grid-template-columns:1fr 1fr;
    }
    }
    @media(max-width:576px){
    .index-creation-section .process-grid{
    grid-template-columns:1fr;
    }
    }
    /* ====================================
    POPULAR INDICES
    ==================================== */
    .popular-indices-section{
    padding:40px 0;
    background:#F8FBFF;
    }
    .popular-indices-section .index-card{
    background:#fff;
    border:1px solid #E9EEF5;
    border-radius:5px;
    padding:15px;
    height:100%;
    transition:.3s;
    }
    .popular-indices-section .index-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 60px rgba(0,0,0,.08);
    border-color:#0066CC;
    }
    .popular-indices-section .index-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:#0066CC;
    opacity:0;
    transition:.3s;
    }
    .popular-indices-section .index-card:hover::before{
    opacity:1;
    }
    .popular-indices-section .index-card h3{
    font-size:clamp(1.2rem,5vw,1.2rem);
    color:#0B1F52;
    font-weight:600;
    }
    .popular-indices-section .index-card p{
    color:#667085;
    margin:0;
    font-size:clamp(1rem,5vw,1rem);
    line-height: 1.5;
    }
    /* ====================================
    LEARNING TOOLS SECTION
    ==================================== */
    .learning-tools-section{
    padding:40px 0;
    }
    .learning-tools-section .tools-faq-wrapper{
    display:grid;
    grid-template-columns:380px 1fr;
    gap:30px;
    }
    .learning-tools-section .tools-panel{
    background:#F8FBFF;
    border:1px solid #E8EEF5;
    border-radius:24px;
    padding:35px;
    height:100%;
    }
    .learning-tools-section .section-tag{
    display:inline-block;
    padding:8px 16px;
    border-radius:30px;
    background:rgba(255,255,255,.15);
    font-size:12px;
    font-weight:600;
    letter-spacing:1px;
    margin-bottom:20px;
    }
    .learning-tools-section .tools-panel h3,
    .faq-panel h3{
    font-size:26px;
    font-weight:700;
    margin-bottom:15px;
    }
    .learning-tools-section .tools-panel p{
    opacity:.9;
    line-height:1.6;
    margin-bottom:25px;
    font-size: 16px;
    }
    .learning-tools-section .tools-list{
    display:flex;
    flex-direction:column;
    gap:15px;
    }
    .learning-tools-section .tools-list a{
    text-decoration: none;
    }
    .learning-tools-section .tool-card{
    background:#fff;
    border:1px solid #E9EEF5;
    border-radius:18px;
    padding:18px;
    transition:.3s;
    }
    .learning-tools-section .tool-card:hover{
    background:rgba(255,255,255,.20);
    transform:translateX(5px);
    text-decoration: none;
    }
    .learning-tools-section .tool-card i{
    width:50px;
    height:50px;
    border-radius:14px;
    background:#EDF5FF;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#0066CC;
    font-size:23px;
    margin-bottom: 10px;
    }
    .learning-tools-section .tool-card h5{
    margin:0;
    font-size:17px;
    font-weight:600;
    }
    .learning-tools-section .tool-card span{
    font-size:13px;
    opacity:.85;
    }
    .learning-tools-section .faq-panel{
    background:#F8FBFF;
    padding:35px;
    border-radius:28px;
    border:1px solid #E8EEF5;
    }
    .learning-tools-section .faq-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-top:25px;
    }
    .learning-tools-section .faq-card{
    background:#fff;
    border:1px solid #E9EEF5;
    border-radius:10px;
    padding:24px;
    transition:.3s;
    }
    .learning-tools-section .faq-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 60px rgba(0,0,0,.08);
    border-color:#0066CC;
    }
    .learning-tools-section .faq-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:#0066CC;
    opacity:0;
    transition:.3s;
    }
    .learning-tools-section .faq-card:hover::before{
    opacity:1;
    }
    .learning-tools-section .faq-card h4{
    font-size:19px;
    font-weight:600;
    color:#0B1F52;
    margin-bottom:10px;
    }
    .learning-tools-section .faq-card p{
    margin:0;
    color:#667085;
    line-height:1.6;
    font-size:16px;
    }
    @media(max-width:991px){
    .learning-tools-section .tools-faq-wrapper{
    grid-template-columns:1fr;
    }
    .learning-tools-section .faq-list{
    grid-template-columns:1fr;
    }
    }
    /* ====================================
    CONTINUE LEARNING
    ==================================== */
    .continue-learning-section{
    padding:40px 0;
    }
    .continue-learning-section .continue-box{
    background:#F8FBFF;
    border:1px solid #DCEBFF;
    border-radius:32px;
    padding:60px;
    text-align:center;
    }
    .continue-learning-section .continue-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
    }
    .continue-learning-section .continue-buttons .btn{
    padding:6px 18px;
    border-radius:10px;
    font-weight:400;
    }