/* ==========================================================
   MEDICHPLUS HOMEPAGE
   Version: 1.0
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================
   VARIABLES
   ========================================================== */

:root{

    --navy:#0d2140;
    --navy-light:#163866;

    --green:#2f8f3b;
    --green-light:#44b658;

    --teal:#1f8d9d;
    --teal-light:#3ab4c6;

    --white:#ffffff;

    --gray:#f5f7fa;
    --line:#e2e8ef;

    --text:#1c2a3a;
    --text-light:#687585;

    --radius:22px;

}

/* ==========================================================
   BASE
   ========================================================== */

#medichplus-home{

    font-family:'Inter',sans-serif;

    color:var(--text);

    background:#fff;

}

#medichplus-home *{

    box-sizing:border-box;

}

.mplus-container{

    width:100%;

    max-width:1280px;

    margin:auto;

    padding:0 24px;

}

h1,h2,h3,h4{

    font-family:'Manrope',sans-serif;

}

/* ==========================================================
   HERO
   ========================================================== */

.mplus-hero{

    position:relative;

    overflow:hidden;

    background:

    radial-gradient(circle at top left,#1f4276 0%,transparent 35%),

    radial-gradient(circle at bottom right,#1c7f92 0%,transparent 30%),

    linear-gradient(135deg,#09192d,#10294d);

    padding:90px 0;

}

.mplus-hero-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

}

.mplus-badge{

    display:inline-block;

    padding:10px 18px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.15);

    color:#fff;

    border-radius:999px;

    margin-bottom:24px;

    font-weight:700;

}

.mplus-hero h1{

    font-size:58px;

    line-height:1.1;

    color:#fff;

    margin:0 0 25px;

    font-weight:800;

}

.mplus-hero p{

    font-size:19px;

    color:#d6dce5;

    line-height:1.8;

    max-width:720px;

}

.mplus-search-form{

    margin-top:35px;

    display:flex;

    background:#fff;

    border-radius:999px;

    overflow:hidden;

    box-shadow:0 20px 60px rgba(0,0,0,.18);

}

.mplus-search-form input{

    flex:1;

    border:none;

    outline:none;

    padding:20px 28px;

    font-size:16px;

}

.mplus-search-form button{

    border:none;

    cursor:pointer;

    padding:0 34px;

    color:#fff;

    background:linear-gradient(135deg,var(--green),var(--teal));

    font-weight:700;

    transition:.3s;

}

.mplus-search-form button:hover{

    transform:scale(1.03);

}

.mplus-hero-buttons{

    margin-top:35px;

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.mplus-btn-primary,
.mplus-btn-secondary,
.mplus-btn-outline{

    text-decoration:none;

    padding:16px 30px;

    border-radius:999px;

    font-weight:700;

    transition:.3s;

}

.mplus-btn-primary{

    background:linear-gradient(135deg,var(--green),var(--teal));

    color:#fff;

}

.mplus-btn-secondary{

    background:#fff;

    color:var(--navy);

}

.mplus-btn-outline{

    border:2px solid rgba(255,255,255,.25);

    color:#fff;

}

.mplus-btn-primary:hover,
.mplus-btn-secondary:hover,
.mplus-btn-outline:hover{

    transform:translateY(-4px);

}

.mplus-trust-badges{

    margin-top:38px;

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.mplus-trust-badges span{

    color:#dbe6ef;

    font-weight:600;

}

/* ==========================================================
   LIVE CARD
   ========================================================== */

.mplus-dashboard-preview{

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(22px);

    border:1px solid rgba(255,255,255,.15);

    border-radius:28px;

    padding:35px;

    color:#fff;

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

}

.mplus-preview-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.mplus-online{

    color:#7dff98;

    font-weight:700;

}

.mplus-stat{

    display:flex;

    justify-content:space-between;

    padding:18px 0;

    border-bottom:1px solid rgba(255,255,255,.12);

}

.mplus-stat strong{

    font-size:26px;

}

.mplus-feature-list{

    margin-top:25px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

}

.mplus-feature-list div{

    background:rgba(255,255,255,.08);

    padding:12px;

    border-radius:12px;

}

/* ==========================================================
   FLOATING CIRCLES
   ========================================================== */

.mplus-circle{

    position:absolute;

    border-radius:50%;

    opacity:.12;

    animation:float 10s infinite ease-in-out;

}

.circle-1{

    width:420px;

    height:420px;

    background:#2f8f3b;

    top:-120px;

    left:-120px;

}

.circle-2{

    width:260px;

    height:260px;

    background:#1f8d9d;

    right:8%;

    top:20%;

}

.circle-3{

    width:220px;

    height:220px;

    background:#ffffff;

    bottom:-120px;

    right:-100px;

}

@keyframes float{

    50%{

        transform:translateY(-25px);

    }

}

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

@media(max-width:992px){

.mplus-hero-grid{

grid-template-columns:1fr;

}

.mplus-hero{

padding:70px 0;

}

.mplus-hero h1{

font-size:42px;

}

}

@media(max-width:768px){

.mplus-search-form{

flex-direction:column;

border-radius:20px;

}

.mplus-search-form button{

padding:18px;

}

.mplus-hero h1{

font-size:34px;

}

.mplus-dashboard-preview{

margin-top:20px;

}

}

/* ==========================================================
   HOME STATS
   ========================================================== */

.mplus-home-stats{

    padding:90px 0;

    background:#f8fafc;

}

.mplus-section-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 60px;

}

.mplus-section-badge{

    display:inline-block;

    background:#e8f8ec;

    color:var(--green);

    padding:10px 18px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

}

.mplus-section-heading h2{

    font-size:42px;

    color:var(--navy);

    margin-bottom:18px;

}

.mplus-section-heading p{

    font-size:18px;

    color:var(--text-light);

    line-height:1.8;

}

.mplus-stats-grid{

    display:grid;

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

    gap:28px;

}

.mplus-stat-card{

    background:#fff;

    border-radius:22px;

    padding:40px 30px;

    text-align:center;

    transition:.35s;

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

}

.mplus-stat-card:hover{

    transform:translateY(-10px);

}

.mplus-stat-icon{

    font-size:52px;

    margin-bottom:20px;

}

.mplus-stat-card h3{

    font-size:46px;

    color:var(--green);

    margin:0;

}

.mplus-stat-card h4{

    margin:16px 0;

    color:var(--navy);

    font-size:22px;

}

.mplus-stat-card p{

    color:var(--text-light);

    line-height:1.8;

}

@media(max-width:992px){

.mplus-stats-grid{

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

}

}

@media(max-width:650px){

.mplus-stats-grid{

grid-template-columns:1fr;

}

.mplus-section-heading h2{

font-size:32px;

}

}

/* ======================================================
FEATURED COMPANIES
====================================================== */

.mplus-featured-companies{

padding:100px 0;

background:#fff;

}

.mplus-company-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.mplus-company-card{

background:#fff;

border:1px solid #edf1f5;

border-radius:24px;

padding:32px;

transition:.35s;

box-shadow:0 15px 35px rgba(15,35,70,.07);

display:flex;

flex-direction:column;

height:100%;

}

.mplus-company-card:hover{

transform:translateY(-10px);

box-shadow:0 30px 60px rgba(15,35,70,.14);

}

.mplus-company-avatar{

width:70px;

height:70px;

border-radius:50%;

background:linear-gradient(135deg,var(--green),var(--teal));

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

font-weight:800;

color:#fff;

margin-bottom:25px;

}

.mplus-company-card h3{

margin:0;

font-size:24px;

color:var(--navy);

}

.mplus-company-role{

display:inline-block;

margin:15px 0;

padding:8px 16px;

border-radius:50px;

background:#eef8f0;

color:var(--green);

font-size:13px;

font-weight:700;

text-transform:uppercase;

}

.mplus-company-card p{

flex:1;

color:#687585;

line-height:1.8;

}

.mplus-company-footer{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:30px;

padding-top:20px;

border-top:1px solid #edf1f5;

}

.mplus-company-footer span{

color:var(--green);

font-weight:700;

}

.mplus-company-footer a{

text-decoration:none;

font-weight:700;

color:var(--navy);

transition:.3s;

}

.mplus-company-footer a:hover{

color:var(--green);

}

@media(max-width:992px){

.mplus-company-grid{

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

}

}

@media(max-width:700px){

.mplus-company-grid{

grid-template-columns:1fr;

}

}

/* ==========================================
FEATURED PRODUCTS
========================================== */

.mplus-featured-products{

padding:100px 0;

background:#f7fafc;

}

.mplus-products-grid{

display:grid;

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

gap:28px;

margin-top:60px;

}

.mplus-product-card{

background:#fff;

border-radius:22px;

overflow:hidden;

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

transition:.35s;

display:flex;

flex-direction:column;

}

.mplus-product-card:hover{

transform:translateY(-8px);

box-shadow:0 28px 60px rgba(15,40,70,.16);

}

.mplus-product-image{

height:180px;

display:flex;

align-items:center;

justify-content:center;

font-size:70px;

background:linear-gradient(135deg,#eef8f2,#dff7fb);

}

.mplus-product-body{

padding:26px;

display:flex;

flex-direction:column;

flex:1;

}

.mplus-product-category{

display:inline-block;

background:#eef8f0;

color:var(--green);

padding:8px 14px;

border-radius:40px;

font-size:12px;

font-weight:700;

margin-bottom:16px;

text-transform:uppercase;

}

.mplus-product-body h3{

font-size:22px;

margin-bottom:15px;

color:var(--navy);

}

.mplus-product-body p{

color:#667484;

line-height:1.8;

flex:1;

}

.mplus-product-footer{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:25px;

padding-top:18px;

border-top:1px solid #edf2f6;

}

.mplus-stock{

color:var(--green);

font-weight:700;

}

.mplus-product-footer a{

text-decoration:none;

font-weight:700;

color:var(--navy);

}

.mplus-center{

text-align:center;

margin-top:55px;

}

.mplus-big-button{

display:inline-block;

padding:18px 42px;

border-radius:999px;

background:linear-gradient(135deg,var(--green),var(--teal));

color:#fff;

font-weight:700;

text-decoration:none;

transition:.3s;

}

.mplus-big-button:hover{

transform:translateY(-4px);

}

@media(max-width:1100px){

.mplus-products-grid{

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

}

}

@media(max-width:650px){

.mplus-products-grid{

grid-template-columns:1fr;

}

}

/* ==========================================================
RFQ SECTION
========================================================== */

.mplus-home-rfqs{

padding:100px 0;

background:#ffffff;

}

.mplus-rfq-grid{

display:grid;

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

gap:28px;

margin-top:60px;

}

.mplus-rfq-card{

background:#fff;

border:1px solid #e7edf3;

border-radius:22px;

padding:30px;

transition:.35s;

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

display:flex;

flex-direction:column;

}

.mplus-rfq-card:hover{

transform:translateY(-8px);

box-shadow:0 28px 55px rgba(15,40,70,.15);

}

.mplus-rfq-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.mplus-rfq-icon{

font-size:34px;

}

.mplus-rfq-status{

background:#e9f8ee;

color:var(--green);

padding:8px 14px;

border-radius:999px;

font-size:12px;

font-weight:700;

}

.mplus-rfq-card h3{

font-size:24px;

margin-bottom:18px;

color:var(--navy);

}

.mplus-rfq-card p{

margin:10px 0;

color:var(--text-light);

line-height:1.7;

}

.mplus-rfq-footer{

margin-top:auto;

padding-top:24px;

border-top:1px solid #eef2f6;

}

.mplus-rfq-footer a{

text-decoration:none;

font-weight:700;

color:var(--navy);

}

.mplus-empty-state{

text-align:center;

padding:60px;

background:#f8fafc;

border-radius:20px;

}

@media(max-width:992px){

.mplus-rfq-grid{

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

}

}

@media(max-width:650px){

.mplus-rfq-grid{

grid-template-columns:1fr;

}

}

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

.mplus-services-home{

padding:100px 0;

background:#f8fafc;

}

.mplus-services-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.mplus-service-card{

background:#fff;

padding:35px;

border-radius:22px;

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

transition:.35s;

display:flex;

flex-direction:column;

}

.mplus-service-card:hover{

transform:translateY(-10px);

box-shadow:0 30px 60px rgba(15,40,70,.15);

}

.mplus-service-icon{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

font-size:36px;

border-radius:18px;

background:linear-gradient(135deg,var(--green),var(--teal));

color:#fff;

margin-bottom:24px;

}

.mplus-service-card h3{

font-size:24px;

color:var(--navy);

margin-bottom:12px;

}

.mplus-service-company{

display:inline-block;

margin-bottom:18px;

font-weight:700;

color:var(--green);

}

.mplus-service-card p{

flex:1;

line-height:1.8;

color:var(--text-light);

}

.mplus-service-card a{

margin-top:24px;

text-decoration:none;

font-weight:700;

color:var(--navy);

}

@media(max-width:992px){

.mplus-services-grid{

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

}

}

@media(max-width:650px){

.mplus-services-grid{

grid-template-columns:1fr;

}

}
/* ======================================================
FEATURES
====================================================== */

.mplus-features{

padding:110px 0;

background:#fff;

}

.mplus-features-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.mplus-feature-card{

padding:35px;

border-radius:22px;

background:#fff;

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

transition:.35s;

text-align:center;

}

.mplus-feature-card:hover{

transform:translateY(-10px);

}

.mplus-feature-icon{

font-size:52px;

margin-bottom:22px;

}

.mplus-feature-card h3{

margin-bottom:15px;

color:var(--navy);

}

.mplus-feature-card p{

line-height:1.8;

color:var(--text-light);

}

/* HOW IT WORKS */

.mplus-how-it-works{

padding:110px 0;

background:#f8fafc;

}

.mplus-steps{

display:grid;

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

gap:30px;

margin-top:60px;

}

.mplus-step{

text-align:center;

padding:35px;

}

.mplus-step-number{

width:70px;

height:70px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

font-weight:800;

background:linear-gradient(135deg,var(--green),var(--teal));

color:#fff;

}

.mplus-step h3{

margin-bottom:15px;

color:var(--navy);

}

.mplus-step p{

color:var(--text-light);

line-height:1.8;

}

@media(max-width:992px){

.mplus-features-grid{

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

}

.mplus-steps{

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

}

}

@media(max-width:650px){

.mplus-features-grid,

.mplus-steps{

grid-template-columns:1fr;

}

}
/* ======================================================
TESTIMONIALS
====================================================== */

.mplus-testimonials{

padding:110px 0;

background:#fff;

}

.mplus-testimonial-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.mplus-testimonial-card{

background:#fff;

padding:35px;

border-radius:22px;

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

transition:.35s;

}

.mplus-testimonial-card:hover{

transform:translateY(-8px);

box-shadow:0 30px 60px rgba(15,40,70,.15);

}

.mplus-stars{

font-size:22px;

color:#f4b400;

margin-bottom:20px;

}

.mplus-testimonial-card p{

font-style:italic;

line-height:1.9;

color:var(--text-light);

margin-bottom:25px;

}

.mplus-person strong{

display:block;

font-size:18px;

color:var(--navy);

}

.mplus-person span{

color:#7b8795;

font-size:14px;

}

@media(max-width:992px){

.mplus-testimonial-grid{

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

}

}

@media(max-width:650px){

.mplus-testimonial-grid{

grid-template-columns:1fr;

}

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

.mplus-faq{

padding:110px 0;

background:#f7fafc;

}

.mplus-faq-list{

max-width:900px;

margin:60px auto 0;

}

.mplus-faq details{

background:#fff;

border-radius:18px;

margin-bottom:18px;

padding:24px 28px;

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

}

.mplus-faq summary{

cursor:pointer;

font-size:20px;

font-weight:700;

color:var(--navy);

list-style:none;

}

.mplus-faq summary::-webkit-details-marker{

display:none;

}

.mplus-faq details p{

margin-top:20px;

line-height:1.9;

color:var(--text-light);

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

.mplus-cta{

padding:120px 0;

background:linear-gradient(135deg,#0f2447,#1b3d73);

color:#fff;

}

.mplus-cta-box{

max-width:900px;

margin:auto;

text-align:center;

}

.mplus-cta h2{

font-size:46px;

margin-bottom:25px;

color:#fff;

}

.mplus-cta p{

font-size:19px;

line-height:1.9;

margin-bottom:40px;

opacity:.92;

}

.mplus-cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.mplus-outline-button{

padding:18px 40px;

border:2px solid #fff;

border-radius:50px;

color:#fff;

font-weight:700;

text-decoration:none;

transition:.3s;

}

.mplus-outline-button:hover{

background:#fff;

color:#14315c;

}