/* ========================================================== 
    MP PARAMEDICAL - UNDER CONSTRUCTION 
=========================================================== */

/* ========================================================== 
    MAIN WRAPPER 
=========================================================== */ 
.mp-under-construction { 
    min-height: 100vh; 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden; background: 
    radial-gradient( circle at 10% 20%, rgba(0, 150, 136, 0.13), transparent 28% ), radial-gradient( circle at 90% 80%, rgba(0, 105, 92, 0.12), transparent 30% ), linear-gradient( 135deg, #f8fcfd 0%, #eef8f7 48%, #f7fbfd 100% ); 
}

/* ========================================================== 
    ANIMATED BACKGROUND BLOBS 
    =========================================================== */ 
    .mp-bg-shape { 
        position: absolute; 
        border-radius: 50%; 
        pointer-events: none; 
        filter: blur(1px); 
    } 
    
    .mp-bg-shape.one { 
        width: 330px; 
        height: 330px; 
        top: -150px; 
        left: -100px; 
        background: rgba(0, 137, 123, 0.10); 
        animation: floatOne 8s ease-in-out infinite; 
    } 
    
    .mp-bg-shape.two { 
        width: 250px; 
        height: 250px; 
        right: -90px; 
        top: 15%; 
        background: rgba(38, 166, 154, 0.10); 
        animation: floatTwo 7s ease-in-out infinite; 
    } 
    
    .mp-bg-shape.three { 
        width: 400px; 
        height: 400px; 
        bottom: -250px; 
        left: 25%; 
        background: rgba(0, 105, 92, 0.06); 
        animation: floatThree 10s ease-in-out infinite; 
    } 
    
    @keyframes floatOne { 
        0%, 100% { 
            transform: translate(0, 0); 
        } 
        50% { 
            transform: translate(35px, 30px); 
        } 
    } 
    
    @keyframes floatTwo { 
        0%, 100% { 
            transform: translate(0, 0); 
        } 
        50% { 
            transform: translate(-25px, 35px); 
        } 
    } 
    
    @keyframes floatThree { 
        0%, 100% { 
            transform: translateY(0); 
        } 
        50% { 
            transform: translateY(-35px); 
        } 
    }

    /* ========================================================== 
        DECORATIVE PLUS SIGNS 
    =========================================================== */ 
    .mp-plus { 
        position: absolute; 
        color: rgba(0, 137, 123, 0.16); 
        font-size: 42px; font-weight: 700; 
        animation: plusFloat 5s ease-in-out infinite; 
        user-select: none; 
    } 
    
    .mp-plus.one { 
        top: 18%; 
        left: 8%; 
    } 
        
    .mp-plus.two { 
        top: 68%; 
        right: 10%; 
        font-size: 30px; 
        animation-delay: 1.5s; 
    } 
    
    .mp-plus.three { 
        top: 30%; 
        right: 18%; 
        font-size: 22px; 
        animation-delay: 2.5s; 
    } 
    
    @keyframes plusFloat { 
        0%, 100% { 
            transform: translateY(0) rotate(0deg); opacity: .45; 
        } 
        50% { 
            transform: translateY(-15px) rotate(8deg); opacity: 1; 
        } 
    }

    /* ========================================================== 
        MAIN CONTAINER 
    =========================================================== */ 
    .mp-container { 
        width: 100%; 
        max-width: 1180px; 
        padding: 50px 25px; 
        position: relative; 
        z-index: 5; 
    }

    /* ========================================================== 
        CONTENT CARD 
    =========================================================== */ 
    .mp-construction-card { 
        position: relative; 
        overflow: hidden; 
        display: grid; 
        grid-template-columns: 1fr 1fr; 
        align-items: center; 
        gap: 45px; 
        padding: 55px; 
        border-radius: 30px; 
        background: rgba(255, 255, 255, 0.78); 
        border: 1px solid rgba(255, 255, 255, 0.9); 
        box-shadow: 0 30px 70px rgba(16, 42, 67, 0.12), 0 10px 25px rgba(0, 137, 123, 0.06); 
        backdrop-filter: blur(15px); 
        -webkit-backdrop-filter: blur(15px); 
        animation: cardReveal 1s ease forwards; 
    } 
    
    @keyframes cardReveal { 
        from { 
            opacity: 0; transform: translateY(35px); 
        } 
        to { 
            opacity: 1; transform: translateY(0); 
        } 
    }

    /* ========================================================== 
        CARD TOP GLOW 
    =========================================================== */ 
    .mp-construction-card::before { 
        content: ""; 
        position: absolute; 
        width: 300px; 
        height: 300px; 
        right: -160px; 
        top: -160px; 
        border-radius: 50%; 
        background: rgba(0, 137, 123, 0.08); 
    }

    /* ========================================================== 
        LEFT CONTENT 
    =========================================================== */ 
    .mp-content { 
        position: relative; 
        z-index: 2; 
    }

    /* ========================================================== 
        BRAND BADGE 
    =========================================================== */ 
    .mp-brand-badge { 
        display: inline-flex; 
        align-items: center; 
        gap: 10px; 
        padding: 9px 16px; 
        margin-bottom: 24px; 
        border-radius: 50px; 
        background: #e3f5f2; 
        color: #00796b; 
        font-size: 14px; 
        font-weight: 700; 
        letter-spacing: .4px; 
        transition: all .3s ease; 
    } 
    
    .mp-brand-badge:hover { 
        transform: translateY(-3px); 
        box-shadow: 0 8px 20px rgba(0, 121, 107, .15); 
    } 
    
    .mp-brand-dot { 
        width: 9px; 
        height: 9px; 
        border-radius: 50%; 
        background: #00897b; 
        box-shadow: 0 0 0 5px rgba(0, 137, 123, .12); 
        animation: pulseDot 1.8s infinite; 
    } 
    
    @keyframes pulseDot { 
        0% { 
            box-shadow: 0 0 0 0 rgba(0, 137, 123, .35); 
        } 
        70% { 
            box-shadow: 0 0 0 8px rgba(0, 137, 123, 0); 
        } 
        100% { 
            box-shadow: 0 0 0 0 rgba(0, 137, 123, 0); 
        } 
    }

    /* ========================================================== 
        HEADING 
    =========================================================== */ 
    .mp-title { 
        color: #102a43; 
        font-size: clamp(38px, 5vw, 65px); 
        line-height: 1.05; 
        font-weight: 800; 
        letter-spacing: -2px; 
        margin-bottom: 20px; 
    } 
    
    .mp-title span { 
        display: block; 
        color: #00897b; 
    } 
    
    .mp-description { 
        max-width: 560px; 
        color: #526777; 
        font-size: 17px; 
        line-height: 1.75; 
        margin-bottom: 28px; 
    }

    /* ========================================================== 
        PROGRESS 
    =========================================================== */ 
    .mp-progress-wrapper { 
        max-width: 500px; 
        margin-bottom: 30px; 
    } 
    
    .mp-progress-header { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        margin-bottom: 10px; 
        color: #35556b; 
        font-size: 14px; 
        font-weight: 700; 
    } 
    
    .mp-progress-bar { 
        width: 100%; 
        height: 9px; 
        overflow: hidden; 
        border-radius: 50px; 
        background: #e4eeee; 
    } 
    
    .mp-progress-fill { 
        width: 72%; 
        height: 100%; 
        border-radius: inherit; 
        background: linear-gradient( 90deg, #00796b, #26a69a ); 
        position: relative; animation: progressLoad 1.8s ease forwards; 
    } 
    
    .mp-progress-fill::after { 
        content: ""; 
        position: absolute; 
        inset: 0; 
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.5), transparent ); 
        animation: progressShine 2s linear infinite; 
    } 
    
    @keyframes progressLoad { 
        from { 
            width: 0; 
        } 
        to { 
            width: 72%; 
        } 
    } 
    
    @keyframes progressShine { 
        from { 
            transform: translateX(-100%); 
        } 
        to { 
            transform: translateX(100%); 
        } 
    }

    /* ========================================================== 
        BUTTON 
    =========================================================== */ 
    .mp-home-btn { 
        display: inline-flex; 
        align-items: center; 
        justify-content: center; 
        gap: 10px; 
        min-height: 50px; 
        padding: 0 24px; 
        border-radius: 12px; 
        background: #00796b; 
        color: #ffffff; 
        text-decoration: none; 
        font-size: 15px; 
        font-weight: 700; 
        box-shadow: 0 10px 22px rgba(0, 121, 107, .22); 
        transition: all .35s ease; 
    } 
    
    .mp-home-btn:hover { 
        color: #ffffff; 
        background: #00695c; 
        transform: translateY(-4px); 
        box-shadow: 0 16px 30px rgba(0, 121, 107, .28); 
        text-decoration: none;
    } 
    
    .mp-home-arrow { 
        transition: transform .3s ease; 
    } 
    
    .mp-home-btn:hover .mp-home-arrow { 
        transform: translateX(5px); 
    }

    /* ========================================================== 
        RIGHT VISUAL 
    =========================================================== */ 
    .mp-visual { 
        min-height: 430px; 
        position: relative; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
    }

    /* ========================================================== 
        MAIN CIRCLE 
    =========================================================== */ 
    .mp-circle { 
        width: 330px; 
        height: 330px; 
        position: relative; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        border-radius: 50%; 
        background: linear-gradient( 145deg, #e5f7f4, #f8ffff ); 
        box-shadow: inset 0 0 0 18px rgba(255,255,255,.7), 0 25px 50px rgba(0, 121, 107, .13); 
        animation: circleFloat 5s ease-in-out infinite; 
    } 
    
    @keyframes circleFloat { 
        0%, 100% { 
            transform: translateY(0); 
        } 50% { 
            transform: translateY(-12px); 
        } 
    }

    /* ========================================================== 
        CONSTRUCTION ICON 
    =========================================================== */ 
    .mp-icon-box { 
        width: 145px; 
        height: 145px; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        border-radius: 35px; 
        background: linear-gradient( 145deg, #00796b, #26a69a ); 
        color: #ffffff; 
        font-size: 65px; 
        box-shadow: 0 20px 40px rgba(0, 121, 107, .27); 
        transform: rotate(-5deg); 
        transition: all .4s ease; 
    } 
    
    .mp-circle:hover .mp-icon-box { 
        transform: rotate(0deg) scale(1.08); 
    }

    /* ========================================================== 
        FLOATING CARDS 
    =========================================================== */ 
    .mp-floating-card { 
        position: absolute; 
        display: flex; 
        align-items: center; 
        gap: 11px; 
        padding: 13px 16px; 
        border-radius: 14px; 
        background: rgba(255,255,255,.92); 
        border: 1px solid rgba(255,255,255,.9); 
        box-shadow: 0 15px 35px rgba(16,42,67,.12); 
        color: #284b60; 
        font-size: 13px; 
        font-weight: 700; 
        backdrop-filter: blur(8px); 
        transition: all .35s ease; 
    } 
    
    .mp-floating-card:hover { 
        transform: translateY(-7px) scale(1.03); 
        box-shadow: 0 20px 40px rgba(16,42,67,.17); 
    } 
    
    .mp-floating-icon { 
        width: 35px; 
        height: 35px; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        border-radius: 10px; 
        background: #e4f5f2; 
        color: #00796b; 
        font-size: 17px; 
    } 
    
    .mp-floating-card.card-one { 
        left: 0; top: 65px; 
        animation: floatingOne 4s ease-in-out infinite; 
    } 
    
    .mp-floating-card.card-two { 
        right: 0; 
        bottom: 70px; 
        animation: floatingTwo 4.5s ease-in-out infinite; 
    } 
    
    .mp-floating-card.card-three { 
        right: 15px; 
        top: 35px; 
        animation: floatingThree 5s ease-in-out infinite; 
    } 
    
    @keyframes floatingOne { 
        0%, 100% { 
            transform: translateY(0); 
        } 
        50% { 
            transform: translateY(-12px); 
        } 
    } 
    
    @keyframes floatingTwo { 
        0%, 100% { 
            transform: translateY(0); 
        } 
        50% { 
            transform: translateY(10px); 
        } 
    } 
    
    @keyframes floatingThree { 
        0%, 100% { 
            transform: translateY(0); 
        } 
        50% { 
            transform: translateY(-9px); 
        } 
    } 
    
    /* ========================================================== 
        ECG LINE 
    =========================================================== */ 
    .mp-ecg { 
        position: absolute; 
        width: 220px; 
        height: 60px; 
        bottom: 20px; 
        left: 50%; 
        transform: translateX(-50%); 
        opacity: .6; 
    } 
    
    .mp-ecg svg { 
        width: 100%; 
        height: 100%; 
    } 
    
    .mp-ecg path { 
        fill: none; 
        stroke: #00897b; 
        stroke-width: 3; 
        stroke-linecap: round; 
        stroke-linejoin: round; 
        stroke-dasharray: 400; 
        stroke-dashoffset: 400; 
        animation: ecgAnimation 2.5s linear infinite; 
    } 
    
    @keyframes ecgAnimation { 
        to { 
            stroke-dashoffset: 0; 
        } 
    }