:root {
    --card-radius: 14px;
    --overlay-height: 180px;/* more height for text + button */
    --overlay-bg: linear-gradient( 180deg, rgba(5, 25, 60, 0) 0%, rgba(5, 25, 60, 0.3) 30%, rgba(5, 25, 60, 0.8) 100% );
    --accent: #1877f2;
    --text-on-accent: #ffffff;
}

/* Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: stretch;
}

/* Card */
.blog-card {
    background: #fff;
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(10, 30, 60, 0.08);
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 0.28s ease;
    outline: none;
}

    .blog-card:hover,
    .blog-card:focus-within {
        transform: translateY(-6px);
        box-shadow: 0 14px 40px rgba(8, 30, 70, 0.12);
    }

/* Media area */
.card-media {
    position: relative;
    width: 100%;
/*    height: 0;*/
    height:450px;
/*    padding-bottom: 58%;*/
    overflow: hidden;
    background: #f3f6fb;
}

    .card-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.2, 1);
    }
/*    .card-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.2, 1);
    }*/

.blog-card:hover .card-media img {
    transform: scale(1.06);
}

/* Overlay always visible */
.card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    height: var(--overlay-height);
    bottom: 0;
    padding: 20px 22px;
    box-sizing: border-box;
    background: var(--overlay-bg);
    display: flex;
    align-items: flex-end;
}

/* Text content */
.overlay-text {
    color: var(--text-on-accent);
}

.card-title {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--text-on-accent);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.card-excerpt {
    margin: 0 0 16px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.5;
}

/* Read More button below text */
.read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    backdrop-filter: blur(6px);
    opacity: 0.9;
    transition: background 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

    .read-more i {
        font-size: 13px;
        transition: transform 0.25s ease;
    }

/* Hover effects */
.blog-card:hover .read-more {
    background: rgba(255, 255, 255, 0.25);
    opacity: 1;
    transform: translateY(-2px);
}

    .blog-card:hover .read-more i {
        transform: translateX(4px);
    }

/* Responsive */
@media (max-width: 980px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    :root {
        --overlay-height: 140px;
    }
}

@media (max-width: 640px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }

    :root {
        --overlay-height: 150px;
    }
}

.card-title,
.card-excerpt {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.35);
}
/*page heaidng*/
.blog-page-header {
    padding: 60px 0 30px;
    text-align: left;
}

.section-heading {
    max-width: 800px;
    margin: 0 auto;
}

    /* Left border style similar to Editorial Heritage */
    .section-heading h2 {
        position: relative;
        font-size: 34px;
        font-weight: 700;
        color: #0b1e3b;
        padding-left: 16px;
        margin-bottom: 10px;
    }

        .section-heading h2::before {
            content: "";
            position: absolute;
            left: 0;
            top: 4px;
            bottom: 4px;
            width: 4px;
            background-color: #0b66d1; /* BlueprintRx blue */
            border-radius: 4px;
        }

    /* Subtitle */
    .section-heading p {
        font-size: 17px;
        color: #555;
        line-height: 1.6;
        padding-left: 16px; /* align with title */
        margin-bottom: 0;
    }



    /*aniamtion*/
.blog-page-header {
    position: relative;
    padding: 80px 0 50px;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(120deg, #f7faff 0%, #eef4fb 50%, #f7faff 100%);
    background-size: 200% 200%;
    animation: gradientMove 8s ease-in-out infinite alternate;
}

.blog-page-header {
    position: relative;
    overflow: hidden;
    padding: 40px 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
}
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}
.section-heading.blog-page-heading {
    margin: 0px;
}

.section-heading {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

    .section-heading h2 {
        position: relative;
        font-size: 36px;
        font-weight: 700;
        color: #0b1e3b;
        padding-left: 18px;
        margin-bottom: 10px;
        display: inline-block;
    }

        .section-heading h2::before {
            content: "";
            position: absolute;
            left: 0;
            top: 6px;
            bottom: 6px;
            width: 4px;
            background: linear-gradient(180deg, #1877f2 0%, #00b4d8 100%);
            border-radius: 4px;
            animation: pulseLine 2s ease-in-out infinite alternate;
        }

@keyframes pulseLine {
    0% {
        opacity: 0.6;
        transform: scaleY(0.9);
    }

    100% {
        opacity: 1;
        transform: scaleY(1);
    }
}

.section-heading p {
    font-size: 17px;
    color: #555;
    line-height: 1.6;
    padding-left: 18px;
    margin-bottom: 0;
}



/*.animated-title {
    background: linear-gradient(90deg, #0b66d1 0%, #00b4d8 50%, #0b66d1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 40px;
    font-weight: 800;
    filter: drop-shadow(0 6px 18px rgba(11,102,209,0.08));
}*/

/*.animated-title {
    position: relative;
}*/

/*    .animated-title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -12px;
        height: 6px;
        width: 56px;
        border-radius: 4px;
        background: linear-gradient(90deg,#1877f2,#00b4d8);
        transform: translateY(6px) scaleX(0);
        transform-origin: left center;
        transition: transform .7s cubic-bezier(.2,.9,.2,1), opacity .5s;
        opacity: 0.95;
        box-shadow: 0 6px 20px rgba(11,102,209,0.06);
    }*/

/* trigger it immediately on load & on hover */
.blog-page-header.refined .section-heading .animated-title {
    /* force a small reflow so ::after animates in */
}

/*    .blog-page-header.refined .section-heading .animated-title::after {
        transform: translateY(0) scaleX(1);
    }*/


.animated-title {
    position: relative;
    display: inline-block;
    font-size: 40px;
    font-weight: 800;
    background: linear-gradient(90deg, #0b66d1, #00b4d8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

    /* continuous animated underline */
/*    .animated-title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -12px;
        height: 6px;
        width: 100px;
        border-radius: 8px;
        background: linear-gradient( 90deg, #1877f2, #00b4d8, #1877f2 );
        background-size: 200% 100%;
        animation: underlineFlow 3.5s linear infinite;
        box-shadow: 0 4px 12px rgba(0, 180, 216, 0.15);
    }*/

/* flowing gradient motion */
/*@keyframes underlineFlow {
    0% {
        background-position: 0% 0;
    }

    100% {
        background-position: 200% 0;
    }
}*/

/* subtle breathing effect on the bar */
/*.animated-title::after {
    animation: underlineFlow 3.5s linear infinite, pulseSize 4s ease-in-out infinite alternate;
}

@keyframes pulseSize {
    0% {
        transform: scaleX(1);
        opacity: 0.85;
    }

    50% {
        transform: scaleX(1.15);
        opacity: 1;
    }

    100% {
        transform: scaleX(1);
        opacity: 0.9;
    }
}
.animated-title::after {
   
    left: 45px;
    bottom: -12px;
    height: 6px;
    width: 75%;
   
}*/
.blog-page-header {
    background: linear-gradient(120deg, #f5f5f6 0%, #eef4fb 50%, #f7faff 100%);    


    background: linear-gradient(120deg, #f3f3f3 0%, #eef4fb 50%, #f7faff 100%);
 
    animation: gradientMove 8s ease-in-out infinite alternate;
}

/*new seciton*/
/* wrapper aligns title + ecg */
.title-with-ecg {
    position: relative;
    display: inline-block; /* keeps underline sized to title width */
    padding-bottom: 14px; /* room for the underline */
}

/* keep your animated-title styling as before */
.animated-title {
    position: relative;
    z-index: 3;
    display: inline-block;
    font-size: 40px;
    font-weight: 800;
    color: #072041;
    padding-left: 18px;
}

/* ECG svg - full width of title element */
.ecg-underline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%; /* matches title container width */
    height: 18px; /* thickness/height of the underline area */
    z-index: 2;
    overflow: visible;
    pointer-events: none;
}

/* path initial styling */
.ecg-path {
    stroke-dasharray: 10 6; /* dashed look, tweak if you want continuous line */
    stroke-dashoffset: 0;
    filter: drop-shadow(0 3px 8px rgba(11,102,209,0.12));
}

/* animation - make the ECG appear to move from right -> left */
@keyframes ecgScan {
    0% {
        stroke-dashoffset: 0;
        transform: translateX(0);
    }

    100% {
        stroke-dashoffset: -200;
        transform: translateX(-40px);
    }
}

/* apply animation */
.ecg-path {
    animation: ecgScan 2.6s linear infinite;
    transform-origin: left center;
}

/* subtle pulse scale so it breathes a bit */
@keyframes ecgPulse {
    0% {
        transform: translateX(0) scaleY(1);
        opacity: 0.95;
    }

    50% {
        transform: translateX(-6px) scaleY(1.03);
        opacity: 1;
    }

    100% {
        transform: translateX(0) scaleY(1);
        opacity: 0.95;
    }
}

.ecg-path {
    animation: ecgScan 2.6s linear infinite, ecgPulse 4s ease-in-out infinite;
}

/* accessible reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
    .ecg-path {
        animation: none;
        stroke-dashoffset: 0;
        transform: none;
    }
}

/* Variant: if you prefer a solid line (not dashed) */
.ecg-path.solid {
    stroke-dasharray: none;
}

.page-blog {
    padding: 50px 0;
}


/* Blog card container */


    

/* You can tweak colors by changing the linearGradient #ecgGrad stop colors */
/*test*/


/*anianton wave*/
/* --- Layout basics --- */
/*.blog-page-header {
    position: relative;
    overflow: hidden;
    padding: 84px 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}*/

    /* Animated moving background gradient */
    /*.blog-page-header::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: linear-gradient(120deg, #f7fbff 0%, #eef6ff 40%, #f6fbff 100%);
        background-size: 240% 240%;
        animation: headerGradient 10s ease-in-out infinite alternate;
        opacity: 1;
    }

@keyframes headerGradient {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}*/

/* Wave SVG container (above animated bg but behind text) */
/*.bg-waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;*/ /* anchors wave at bottom of header */
    /*height: 110px;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}*/

    /* Wave svg basic sizing */
    /*.bg-waves .wave,
    .bg-waves .wave-2 {
        position: absolute;
        left: 0;
        width: 180%;
        height: 100%;
        transform: translateX(0);
        opacity: 0.9;
    }*/

    /* Wave 1 slow horizontal motion */
    /*.bg-waves .wave {
        animation: waveMove 20s linear infinite;
        opacity: 0.7;
    }*/

    /* Wave 2 moves opposite / slower for depth */
    /*.bg-waves .wave-2 {
        animation: waveMoveReverse 28s linear infinite;
        opacity: 0.55;
    }*/

/* move waves horizontally */
/*@keyframes waveMove {
    0% {
        transform: translateX(-5%);
    }

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

    100% {
        transform: translateX(-5%);
    }
}

@keyframes waveMoveReverse {
    0% {
        transform: translateX(0%);
    }

    50% {
        transform: translateX(12%);
    }

    100% {
        transform: translateX(0%);
    }
}*/

/* Section heading container sits above background & waves */
/*.section-heading {
    position: relative;
    z-index: 3;*/ /* above ::before and waves */
    /*max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}*/

    /* LEFT vertical bar (editorial accent) */
    /*.section-heading h2 {
        position: relative;
        display: inline-block;*/ /* allows pseudo ::before to align */
        /*font-size: 36px;
        line-height: 1.05;
        font-weight: 800;
        color: #072041;*/ /* dark navy */
        /*margin: 0;
        padding-left: 18px;
        text-align: left;
    }*/

        /* vertical bar like editorial piece */
        /*.section-heading h2::before {
            content: "";
            position: absolute;
            left: 0;
            top: 6px;
            bottom: 6px;
            width: 6px;
            background: linear-gradient(180deg, #1877f2 0%, #00b4d8 100%);
            border-radius: 6px;
            transform-origin: center;
            animation: pulseLine 2.6s ease-in-out infinite alternate;
        }*/

/* subtle pulse for vertical line */
/*@keyframes pulseLine {
    0% {
        opacity: 0.75;
        transform: scaleY(0.96);
    }

    100% {
        opacity: 1;
        transform: scaleY(1.06);
    }
}*/

/* Animated gradient text fill + soft glow */
/*.animated-title {*/
    /* gradient for text */
    /*background: linear-gradient(90deg, #0b66d1 0%, #00b4d8 50%, #0b66d1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    margin-bottom: 12px;
    letter-spacing: -0.02em;*/
    /* text glow animation */
    /*animation: titleGlow 6s ease-in-out infinite alternate;
    font-size: 40px;
}*/

/* glow transitions */
/*@keyframes titleGlow {
    0% {
        filter: drop-shadow(0 0 2px rgba(11,102,209,0.25));
    }

    100% {
        filter: drop-shadow(0 0 10px rgba(0,180,216,0.25));
    }
}*/

/* subtitle */
/*.subtitle {
    margin: 0;
    margin-top: 6px;
    color: #3b5366;
    font-size: 16px;
    line-height: 1.6;
    z-index: 3;
    text-align: center;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 18px;*/ /* aligns with title left bar visually */
/*}*/

/* Responsive tweaks */
/*@media (max-width: 980px) {
    .animated-title {
        font-size: 32px;
    }

    .blog-page-header {
        padding: 64px 0 36px;
    }

    .bg-waves {
        height: 80px;
    }
}

@media (max-width: 640px) {
    .animated-title {
        font-size: 26px;
    }

    .subtitle {
        font-size: 15px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .section-heading h2::before {
        left: -2px;
    }*/
    /* keep bar visible */
/*}*/