/* =====================================================
   MPCB CONSULTANCY PAGE CSS
   PREMIUM BLUE CORPORATE THEME
===================================================== */


/* GLOBAL */

.section-padding{
    padding:90px 0;
}


.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}


.section-heading{
    text-align:center;
    margin-bottom:55px;
}


.section-label{

    color:#0066ff;
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
}


.section-heading h2{

    font-size:38px;
    color:#0f172a;
    font-weight:800;
    margin-top:15px;

}


.section-heading p{

    max-width:750px;
    margin:15px auto;
    color:#64748b;
    line-height:1.8;

}


.blue-divider{

    width:70px;
    height:4px;
    background:#0066ff;
    border-radius:20px;
    margin:20px 0;

}


.blue-divider.center{

    margin:20px auto;

}



/* =====================================================
 ABOUT SECTION
===================================================== */


.about-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;

}


.about-image{

    position:relative;

}


.about-image img{

    width:100%;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,.15);

}


.experience-box{

    position:absolute;
    bottom:-25px;
    right:25px;

    background:#0066ff;
    color:white;

    padding:25px;
    border-radius:15px;

    text-align:center;

}


.experience-box h2{

    font-size:45px;
}


.about-content h2{

    font-size:38px;
    line-height:1.3;
    color:#0f172a;

}


.about-content p{

    color:#64748b;
    line-height:1.8;

}


.about-points{

    display:grid;
    gap:15px;
    margin-top:25px;

}


.about-points div{

    font-weight:600;
    color:#334155;

}


.about-points i{

    color:#0066ff;
    margin-right:10px;

}



/* =====================================================
 SERVICES
===================================================== */


.services-bg{

    background:#f1f7ff;

}



.service-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}


.service-card{

    background:white;
    padding:35px 30px;
    border-radius:20px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.07);

    transition:.35s;

}


.service-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,102,255,.15);

}



.service-card i{

    font-size:42px;
    color:#0066ff;
    margin-bottom:20px;

}



.service-card h3{

    font-size:21px;
    color:#0f172a;

}



.service-card p{

    color:#64748b;
    line-height:1.7;

}





/* =====================================================
 INDUSTRIES
===================================================== */


.industries-section{

    padding:90px 0;
    background:white;

}



.industry-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}



.industry-card{

    background:white;

    padding:35px;

    border-radius:18px;

    border:1px solid #e2e8f0;

    text-align:center;

    transition:.35s;

}


.industry-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,102,255,.12);

}


.industry-card i{

    font-size:42px;
    color:#0066ff;
    margin-bottom:20px;

}



.industry-card h3{

    color:#0f172a;

}



.industry-card p{

    color:#64748b;
    line-height:1.7;

}



/* =====================================================
 PROCESS
===================================================== */


.process-section{

    padding:90px 0;
    background:#f1f7ff;

}



.process-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;

}



.process-card{

    background:white;
    padding:35px 25px;

    text-align:center;

    border-radius:18px;

    transition:.35s;

}


.process-card:hover{

    transform:translateY(-10px);

}



.process-number{

    width:65px;
    height:65px;

    background:#0066ff;

    color:white;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;

    margin:auto;

    font-size:22px;
    font-weight:700;

}



.process-card h3{

    margin-top:20px;
    color:#0f172a;

}



.process-card p{

    color:#64748b;
    line-height:1.7;

}



/* =====================================================
 WHY SECTION
===================================================== */


.why-section{

    padding:90px 0;

}



.why-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;

}


.why-card{

    padding:35px 25px;

    background:#f8fafc;

    border-radius:18px;

    text-align:center;

    border:1px solid #e2e8f0;

}



.why-card i{

    font-size:40px;
    color:#0066ff;

}



.why-card h3{

    color:#0f172a;

}



.why-card p{

    color:#64748b;

}



/* =====================================================
 FAQ
===================================================== */


.faq-section{

    padding:90px 0;
    background:#f1f7ff;

}



.faq-wrapper{

    max-width:850px;
    margin:auto;

}



.faq-item{

    background:white;

    margin-bottom:15px;

    border-radius:15px;

    overflow:hidden;

}



.faq-question{

    width:100%;

    padding:22px;

    border:none;

    background:white;

    display:flex;

    justify-content:space-between;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

}



.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:.4s;

    padding:0 22px;

}


.faq-answer p{

    color:#64748b;
    line-height:1.8;

}



.faq-item.active .faq-answer{

    max-height:200px;

}





/* =====================================================
 TESTIMONIAL
===================================================== */


.testimonial-section{

    padding:90px 0;

}



.testimonial-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.testimonial-card{

    padding:35px;

    border-radius:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}



.rating{

    color:#0066ff;
    font-size:25px;

}



.testimonial-card p{

    color:#64748b;
    line-height:1.8;

}



.testimonial-card h4{

    color:#0f172a;

}




/* =====================================================
 CLIENT SLIDER
===================================================== */


.clients-section{

    padding:60px 0;

    background:#f8fbff;

    overflow:hidden;

}



.clients-heading{

    text-align:center;

}



.clients-track{

    display:flex;

    gap:30px;

    margin-top:40px;

    width:max-content;

    animation:moveClient 25s linear infinite;

}



.client-logo{

    background:white;

    padding:20px 35px;

    border-radius:12px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    font-weight:600;

}



@keyframes moveClient{

from{
transform:translateX(0);
}

to{
transform:translateX(-50%);
}

}





/* =====================================================
 RELATED SERVICES
===================================================== */


.related-services{

padding:90px 0;

}



.related-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}


.related-card{

padding:35px;

background:#f8fbff;

border-radius:20px;

text-align:center;

transition:.3s;

}



.related-card:hover{

background:#0066ff;
color:white;

transform:translateY(-8px);

}



.related-card i{

font-size:40px;
color:#0066ff;

}



.related-card:hover i{

color:white;

}



/* =====================================================
 BLOG
===================================================== */


.blog-section{

padding:90px 0;

background:#f8fbff;

}



.blog-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}



.blog-card{

background:white;

border-radius:20px;

overflow:hidden;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}



.blog-card img{

width:100%;

height:230px;

object-fit:cover;

}



.blog-content{

padding:25px;

}



.blog-content h3{

color:#0f172a;

}



.blog-content p{

color:#64748b;

line-height:1.7;

}



/* =====================================================
 CTA
===================================================== */


.final-cta{

padding:100px 0;

background:linear-gradient(
135deg,
#005bea,
#00c6fb
);

text-align:center;

color:white;

}



.final-cta h2{

font-size:45px;

}



.final-cta p{

font-size:18px;

max-width:750px;

margin:20px auto;

}



.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

}



/* =====================================================
 FLOAT BUTTON
===================================================== */


.floating-contact a{

position:fixed;

right:25px;

width:60px;

height:60px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color:white;

font-size:28px;

z-index:999;

}



.whatsapp-btn{

bottom:100px;

background:#25d366;

}



.call-btn{

bottom:25px;

background:#0066ff;

}



/* =====================================================
 RESPONSIVE
===================================================== */


@media(max-width:992px){


.about-grid,
.service-grid,
.industry-grid,
.process-grid,
.why-grid,
.testimonial-grid,
.related-grid,
.blog-grid{

grid-template-columns:repeat(2,1fr);

}


}



@media(max-width:600px){


.container{

width:92%;

}


.section-padding,
.industries-section,
.process-section,
.why-section,
.faq-section,
.testimonial-section,
.related-services,
.blog-section{

padding:60px 0;

}



.about-grid,
.service-grid,
.industry-grid,
.process-grid,
.why-grid,
.testimonial-grid,
.related-grid,
.blog-grid{

grid-template-columns:1fr;

}



.section-heading h2{

font-size:28px;

}



.about-content h2{

font-size:30px;

}



.experience-box{

position:relative;

right:auto;

bottom:auto;

margin-top:20px;

}



.final-cta h2{

font-size:28px;

}



.cta-buttons{

flex-direction:column;

}



.floating-contact a{

width:52px;
height:52px;

right:15px;

}



}