/* 
TOP SECTION


.mf-top-section{

    padding:100px 0;

    background:#ffffff;

}



.mf-top-container{

    width:90%;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:70px;

}




LEFT SIDE


.mf-top-content{

    width:50%;

}



.mf-top-content span{

    color:#2563eb;

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

}



.mf-top-content h1{

    font-size:55px;

    line-height:1.2;

    color:#111827;

    margin:20px 0;

}



.mf-top-content p{

    font-size:17px;

    color:#64748b;

    line-height:1.8;

    margin-bottom:15px;

}




.mf-btn{

    display:inline-block;

    margin-top:20px;

    padding:14px 35px;

    background:#2563eb;

    color:white;

    text-decoration:none;

    border-radius:30px;

    transition:.3s;

}



.mf-btn:hover{

    transform:translateY(-5px);

}





RIGHT IMAGE


.mf-top-image{

    width:45%;

}



.mf-top-image img{

    width:100%;

    height:500px;

    object-fit:cover;

    border-radius:30px;

    box-shadow:
    0 20px 50px rgba(0,0,0,0.15);

    animation:mfFloat 4s infinite;

}

RIGHT IMAGE

.mf-top-image{

    width:45%;

}


.mf-top-image img{

    width:100%;

    height:auto;

    max-height:500px;

    object-fit:contain;

    border-radius:30px;

    display:block;

    box-shadow:
    0 20px 50px rgba(0,0,0,0.15);

    animation:mfFloat 4s infinite;

}


@keyframes mfFloat{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-15px);

}


100%{

transform:translateY(0);

}

}




MOBILE


@media(max-width:768px){


.mf-top-container{

    flex-direction:column;

}


.mf-top-content,
.mf-top-image{

    width:100%;

}



.mf-top-content h1{

    font-size:36px;

}


}
@media(max-width:768px){


.mf-top-section{

    padding:60px 0;

}


.mf-top-container{

    width:90%;

    flex-direction:column;

    gap:40px;

}


.mf-top-content,
.mf-top-image{

    width:100%;

}


.mf-top-content h1{

    font-size:36px;

}


.mf-top-image img{

    width:100%;

    height:auto;

    max-height:none;

    object-fit:contain;

    border-radius:20px;

}


} */

/* INTRO SECTION */


.mf-intro{

    padding:80px 20px;

    background:
    linear-gradient(135deg,
    #dbeafe,
    #eff6ff,
    #bfdbfe);

    text-align:center;

}


.mf-intro-container{

    max-width:1100px;

    margin:auto;

}
.mf-intro-container h2{

    font-size:42px;

    font-weight:700;

    color:#0f172a;

    margin-bottom:10px;

    white-space:nowrap;

}


.mf-intro-container p{

    max-width:950px;

    margin:0 auto 20px;

    color:#475569;

    font-size:17px;

    line-height:1.9;

}





/* subtle animation */

.mf-intro-container{

    animation:slideUp 1s ease;

}



@keyframes slideUp{


from{

    opacity:0;

    transform:translateY(40px);

}


to{

    opacity:1;

    transform:translateY(0);

}


}





/* Responsive */


@media(max-width:768px){


.mf-intro-container h2{

    font-size:28px;

    white-space:normal;

}



.mf-intro-container p{

    font-size:16px;

}


}

/*------------ top fund section------ -------------*/
/* .top-fund-section{

padding:80px 0;
background:#ffffff;

}
 */
/* .top-fund-section{

    padding:100px 0;

    background:
    linear-gradient(135deg,
    #eff6ff,
    #dbeafe);

} */
.top-fund-section{

    padding:100px 0;

    background:#ffffff;

}

.fund-layout{

width:92%;
margin:auto;

display:flex;
gap:35px;

}



.fund-list{

width:75%;

}



/* .fund-list h2{

font-size:45px;
color:#1e3a8a;
margin-bottom:40px;

} */

.fund-list h2{

    font-size:45px;

    color:#1e3a8a;

    margin-bottom:40px;

}



/* FUND CARD */

.fund-card{

    background:white;

    border-radius:20px;

    overflow:hidden;

    margin-bottom:30px;

    border:1px solid #bfdbfe;

    box-shadow:
    0 15px 35px rgba(37,99,235,.12);

}





.fund-header{

    background:
    linear-gradient(135deg,
    #2563eb,
    #1e40af);

    padding:25px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.fund-header h3{

    color:white;

    font-size:25px;

}





.fund-header button{

    background:white;

    color:#2563eb;

    border:none;

    padding:12px 25px;

    border-radius:25px;

    font-weight:600;

}




.fund-return{

    display:flex;

    justify-content:space-around;

    padding:35px;

    background:#f8fbff;

}



.fund-return span{

    color:#64748b;

}



.fund-return strong{

    display:block;

    color:#2563eb;

    font-size:24px;

    margin-top:8px;

}

/* CATEGORY */


.category-box{

width:25%;

border:2px solid #fee2e2;

border-radius:15px;

padding:25px;

height:max-content;

}



.category-box h2{

color:#1e3a8a;

font-size:32px;

border-bottom:1px solid #ddd;

padding-bottom:15px;

}



.category-box ul{

padding:0;

}



.category-box li{

list-style:none;

padding:14px 5px;

border-bottom:1px solid #e5e7eb;

color:#334155;

}





@media(max-width:768px){


.fund-layout{

flex-direction:column;

}


.fund-list,
.category-box{

width:100%;

}


.fund-return{

flex-wrap:wrap;
gap:20px;

}

}

/* WHERE MUTUAL FUNDS INVEST */
/* .where-invest-section{

    margin-top:70px;

} */

.where-invest-section{

    margin-top:80px;

    background:#ffffff;

}

.where-invest-section h2{

    font-size:45px;

    color:#1e3a8a;

    margin-bottom:35px;

}


.where-invest-box{

    background:#ffffff;

    border-radius:25px;

    padding:45px;

    border:1px solid #bfdbfe;

    box-shadow:
    0 15px 40px rgba(37,99,235,.12);

}


.where-invest-box li{

    color:#475569;

    font-size:18px;

    line-height:1.8;

    margin-bottom:25px;

}



.where-invest-box li::marker{

    color:#2563eb;

}



.invest-btn{

    background:#2563eb;

    color:white;

    border:none;

    padding:14px 35px;

    border-radius:30px;

    font-size:17px;

    transition:.3s;

}



.invest-btn:hover{

    background:#1e40af;

    transform:translateY(-5px);

}

/***************** next benefit section *********/

.benefit-slider{

    display:flex;
    align-items:center;
    gap:30px;

}
.benefit-wrapper{

    overflow:hidden;
    width:100%;

}


.benefit-track{

    display:flex;

    gap:30px;

    transition:0.5s ease;

}


.benefit-card{

    flex:0 0 calc(50% - 15px);

    min-height:300px;

    padding:35px;

    background:white;

    border:1px solid #bfdbfe;

    border-radius:25px;

    box-sizing:border-box;

}
.benefit-icon{

    width:60px;
    height:60px;

    background:#dbeafe;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}


.benefit-icon i{

    color:#2563eb;

    font-size:28px;

}



.benefit-card h3{

    color:#1e3a8a;

    font-size:30px;

    margin-top:25px;

}


.benefit-card p{

    color:#475569;

    line-height:1.8;

}



/* ARROWS */
.slide-btn{

    width:55px;
    height:55px;

    border-radius:50%;

    border:2px solid #bfdbfe;

    background:white;

    color:#1e3a8a;

    cursor:pointer;

    font-size:22px;

}


.slide-btn:hover{

    background:#2563eb;

    color:white;

}
/* dots */
.benefit-dots{

    text-align:center;

    margin-top:35px;

}


.dot{

    display:inline-block;

    width:10px;

    height:10px;

    border-radius:50%;

    background:#bfdbfe;

    margin:0 6px;

    cursor:pointer;

}



.dot.active{

    background:#2563eb;

}

@media(max-width:768px){

.benefit-slider{

    gap:10px;

}
.benefit-card{

    flex:0 0 100%;

    min-height:320px;
}
.benefit-wrapper{
    width:100%;
}
.benefit-card h3{
    font-size:25px;
}
.benefit-card p{
    font-size:15px;
}
.slide-btn{
    width:40px;
    height:40px;
    font-size:18px;
}
}
/*--------------  faq -----------------------*/
.faq-section{


padding:90px 0;

background:#ffffff;


}



.faq-container{

width:85%;

margin:auto;

}



.faq-container h2{


font-size:45px;

color:#1e3a8a;

text-align:center;

margin-bottom:50px;

font-weight:700;


}




.faq-item{


margin-bottom:20px;


border:1px solid #bfdbfe;

border-radius:15px;

overflow:hidden;

background:white;


box-shadow:

0 10px 25px rgba(37,99,235,.08);


}




.faq-question{


width:100%;

padding:22px 30px;

background:#eff6ff;

border:none;

display:flex;

justify-content:space-between;

align-items:center;

font-size:20px;

font-weight:600;

color:#1e3a8a;

cursor:pointer;


}




.faq-question span{

font-size:30px;

color:#2563eb;

}





.faq-answer{


max-height:0;

overflow:hidden;

transition:.4s ease;

background:white;


}



.faq-answer p{


padding:25px 30px;

font-size:17px;

line-height:1.8;

color:#475569;


}